clone

a browser-first diagram editor with live svg previews, local drafts and encrypted, accountless sharing

main
diagramzip / renderers / browser-run / frames / diagramsnet / vendor / assets / shapes / mxNetworks2.js
mxNetworks2.js 5.3K
1/**2 * Copyright (c) 2006-2025, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//Icon with background and long shadow7//**********************************************************************************************************************************************************8/**9* Extends mxShape.10*/11function mxShapeNetworks2Icon(bounds, fill, stroke, strokewidth)12{13 mxShape.call(this);14 this.bounds = bounds;15 this.fill = fill;16 this.stroke = stroke;17 this.strokewidth = (strokewidth != null) ? strokewidth : 1;18 this.prevNetwork2BgColor = "9DA6A8";19};2021/**22* Extends mxShape.23*/24mxUtils.extend(mxShapeNetworks2Icon, mxShape);2526mxShapeNetworks2Icon.prototype.customProperties = [27 {name: 'network2IconShadow', dispName: 'Long Shadow', type: 'bool', defVal: true, primary: true}, 28 {name: 'network2bgFillColor', dispName: 'Background Color', type: 'color', defVal: "#9DA6A8", primary: true}, 29];3031mxShapeNetworks2Icon.prototype.cst = {32 SHAPE_ICON : 'mxgraph.networks2.icon'33};3435/**36* Function: paintVertexShape37* 38* Paints the vertex shape.39*/40mxShapeNetworks2Icon.prototype.paintVertexShape = function(c, x, y, w, h)41{42 var isShadow = mxUtils.getValue(this.style, 'network2IconShadow', false);43 var bgColor = mxUtils.getColorValue(this.style, 'network2bgFillColor', 'none');44 c.translate(x, y);4546 if (bgColor != 'none')47 {48 this.background(c, 0, 0, w, h);49 }5051 c.setShadow(false);5253 if (isShadow && bgColor != 'none')54 {55 this.longShadow(c, 0, 0, w, h);56 }5758 if (bgColor != 'none')59 {60 c.translate(w / 7, h / 7);61 this.foreground(c, 0, 0, w / 1.4, h / 1.4);62 c.translate(-w / 7, -h / 7);63 }64 else65 {66 this.foreground(c, 0, 0, w, h);67 }6869 this.prevNetwork2BgColor = bgColor;70};7172mxShapeNetworks2Icon.prototype.background = function(c, x, y, w, h)73{74 var gradientColor = mxUtils.getColorValue(this.style, 'gradientColor', 'none');75 var gradientDir = mxUtils.getValue(this.style, 'gradientDirection', 'south');76 var fillColor = mxUtils.getColorValue(this.style, 'fillColor', '#ffffff');77 var fillColor = mxUtils.getColorValue(this.style, 'fillColor', '#ffffff');78 var bgColor = mxUtils.getColorValue(this.style, 'network2bgFillColor', 'none');7980 if (gradientColor == 'none')81 {82 c.setFillColor(bgColor);83 }84 else85 {86 c.setGradient(bgColor, gradientColor, 0, 0, w, h, gradientDir);87 }8889 c.roundrect(x, y, w, h, w * 0.03571, h * 0.03571);90 c.fill();9192 c.setFillColor(fillColor);9394};9596mxShapeNetworks2Icon.prototype.foreground = function(c, x, y, w, h)97{98 var stencilName = mxUtils.getValue(this.style, 'network2Icon', null);99 var stencil = null;100101 if (stencilName != null)102 {103 stencil = mxStencilRegistry.getStencil(stencilName);104 }105106 var bgColor = mxUtils.getColorValue(this.style, 'network2bgFillColor', 'none');107108 if (bgColor != 'none')109 {110 var stencilW = mxUtils.getValue(this.style, 'network2IconW', 1);111 var stencilH = mxUtils.getValue(this.style, 'network2IconH', 1);112 var xOff = mxUtils.getValue(this.style, 'network2IconXOffset', 0);113 var yOff = mxUtils.getValue(this.style, 'network2IconYOffset', 0);114115 if (stencil != null)116 {117 stencil.drawShape(c, this, x + w * 0.5 * (1 - stencilW) + xOff * w, y + h * 0.5 * (1 - stencilH) + yOff * h, w * stencilW, h * stencilH);118 }119 }120 else if (stencil != null)121 {122 stencil.drawShape(c, this, x, y, w, h);123 }124};125126mxShapeNetworks2Icon.prototype.longShadow = function(c, x, y, w, h)127{128 var stencilName = mxUtils.getValue(this.style, 'network2Icon', null) + "_shadow";129 var stencil = null;130 c.setFillColor('#000000');131 c.setStrokeColor('none');132133 if (stencilName != null)134 {135 stencil = mxStencilRegistry.getStencil(stencilName);136 }137 138 if (stencil != null)139 {140 stencil.drawShape(c, this, x, y, w, h);141 }142};143144mxShapeNetworks2Icon.prototype.styleChanged = function(key, value, state)145{146 if (key == 'network2bgFillColor' && state.style[key] != value && value == 'none')147 {148 var graph = state.view.graph;149 var geometry = graph.getCellGeometry(state.cell);150151 var stencilW = mxUtils.getValue(this.style, 'network2IconW', 1);152 var stencilH = mxUtils.getValue(this.style, 'network2IconH', 1);153154 if (geometry != null)155 {156 geometry = geometry.clone();157 var w = geometry.width;158 var h = geometry.height;159 160 geometry.width = geometry.width * stencilW / 1.4;161 geometry.height = geometry.height * stencilH / 1.4;162 geometry.x = geometry.x + (w - geometry.width) * 0.5;163 geometry.y = geometry.y + (h - geometry.height) * 0.5;164 graph.model.setGeometry(state.cell, geometry);165 }166 }167 else if (key == 'network2bgFillColor' && state.style[key] != value && value != 'none' && this.prevNetwork2BgColor == 'none')168 {169 var graph = state.view.graph;170 var geometry = graph.getCellGeometry(state.cell);171172 var stencilW = mxUtils.getValue(this.style, 'network2IconW', 1);173 var stencilH = mxUtils.getValue(this.style, 'network2IconH', 1);174175 if (geometry != null)176 {177 geometry = geometry.clone();178 var w = geometry.width;179 var h = geometry.height;180 181 geometry.width = geometry.width * 1.4 / stencilW;182 geometry.height = geometry.height * 1.4 / stencilH;183 geometry.x = geometry.x + (w - geometry.width) * 0.5;184 geometry.y = geometry.y + (h - geometry.height) * 0.5;185 graph.model.setGeometry(state.cell, geometry);186 }187 }188}189mxCellRenderer.registerShape(mxShapeNetworks2Icon.prototype.cst.SHAPE_ICON, mxShapeNetworks2Icon);