From 7cac8a2a86ac9599a3ff1e51f878bca15162dbf7 Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Sun, 2 May 2021 23:59:43 +1000 Subject: [PATCH] bugfixes --- docs/js-api/files/view/mxGraph-js.html | 6 +- docs/stashed/Schema.js | 2 +- docs/stashed/Wires.js | 60 +++++----- docs/stashed/grapheditor/www/js/Actions.js | 2 +- docs/stashed/grapheditor/www/js/Format.js | 2 +- docs/stashed/grapheditor/www/js/Graph.js | 70 ++++++------ docs/stashed/grapheditor/www/js/Shapes.js | 106 +++++++++--------- docs/stashed/grapheditor/www/js/Sidebar.js | 2 +- .../core/src/handler/mxElbowEdgeHandler.js | 2 +- .../src/util/datatypes/style/mxEdgeStyle.js | 2 +- packages/core/src/view/cell/mxCellRenderer.ts | 4 +- packages/core/src/view/graph/mxGraph.ts | 6 +- packages/core/typed_mxgraph_defs.json | 6 +- packages/html/stories/FixedPoints.stories.js | 4 +- 14 files changed, 137 insertions(+), 137 deletions(-) diff --git a/docs/js-api/files/view/mxGraph-js.html b/docs/js-api/files/view/mxGraph-js.html index 072a098c7..871c6fc15 100644 --- a/docs/js-api/files/view/mxGraph-js.html +++ b/docs/js-api/files/view/mxGraph-js.html @@ -655,9 +655,9 @@ graph.getPreferredSizeForCell = function(cell) let result = graphGetPreferredSizeForCell.apply(this, arguments); let style = this.getCellStyle(cell); - if (style['minWidth'] > 0) + if (style.minWidth > 0) { - result.width = Math.max(style['minWidth'], result.width); + result.width = Math.max(style.minWidth, result.width); } return result; @@ -1032,7 +1032,7 @@ graph.isWrapping = function(state) { let style = this.getCurrentCellStyle(cell); - return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0; + return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0; };

You can then use the new style as shown in this example.

graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0');

Parameters

cellmxCell whose selectable state should be returned.

isCellsSelectable

mxGraph.prototype.isCellsSelectable = function()

Returns cellsSelectable.

diff --git a/docs/stashed/Schema.js b/docs/stashed/Schema.js index ac37270fb..0c1a11165 100644 --- a/docs/stashed/Schema.js +++ b/docs/stashed/Schema.js @@ -667,7 +667,7 @@ export default MYNAMEHERE; style.verticalAlign = mxConstants.ALIGN_TOP; style.gradientColor = '#41B9F5'; style.fillColor = '#8CCDF5'; - style['swimlaneFillColor'] = '#ffffff'; + style.swimlaneFillColor = '#ffffff'; style.strokeColor = '#1B78C8'; style.fontColor = '#000000'; style.strokeWidth = '2'; diff --git a/docs/stashed/Wires.js b/docs/stashed/Wires.js index 9690e5e4e..4efa4d6d3 100644 --- a/docs/stashed/Wires.js +++ b/docs/stashed/Wires.js @@ -228,32 +228,32 @@ export default MYNAMEHERE; let fillColor = (invert) ? 'none' : '#FFFFFF'; let style = graph.getStylesheet().getDefaultEdgeStyle(); - delete style['endArrow']; - style['strokeColor'] = strokeColor; - style['labelBackgroundColor'] = labelBackground; - style['edgeStyle'] = 'wireEdgeStyle'; - style['fontColor'] = fontColor; - style['fontSize'] = '9'; - style['movable'] = '0'; - style['strokeWidth'] = strokeWidth; - //style['rounded'] = '1'; + delete style.endArrow; + style.strokeColor = strokeColor; + style.labelBackgroundColor = labelBackground; + style.edgeStyle = 'wireEdgeStyle'; + style.fontColor = fontColor; + style.fontSize = '9'; + style.movable = '0'; + style.strokeWidth = strokeWidth; + //style.rounded = '1'; // Sets join node size - style['startSize'] = joinNodeSize; - style['endSize'] = joinNodeSize; + style.startSize = joinNodeSize; + style.endSize = joinNodeSize; style = graph.getStylesheet().getDefaultVertexStyle(); - style['gradientDirection'] = 'south'; - //style['gradientColor'] = '#909090'; - style['strokeColor'] = strokeColor; - //style['fillColor'] = '#e0e0e0'; - style['fillColor'] = 'none'; - style['fontColor'] = fontColor; - style['fontStyle'] = '1'; - style['fontSize'] = '12'; - style['resizable'] = '0'; - style['rounded'] = '1'; - style['strokeWidth'] = strokeWidth; + style.gradientDirection = 'south'; + //style.gradientColor = '#909090'; + style.strokeColor = strokeColor; + //style.fillColor = '#e0e0e0'; + style.fillColor = 'none'; + style.fontColor = fontColor; + style.fontStyle = '1'; + style.fontSize = '12'; + style.resizable = '0'; + style.rounded = '1'; + style.strokeWidth = strokeWidth; let parent = graph.getDefaultParent(); @@ -724,8 +724,8 @@ export default MYNAMEHERE; this.state.style = this.lastStyle; // Workaround for shape using current stroke width if no strokewidth defined - this.state.style['strokeWidth'] = this.state.style['strokeWidth'] || '1'; - this.state.style['strokeColor'] = this.state.style['strokeColor'] || 'none'; + this.state.style.strokeWidth = this.state.style.strokeWidth || '1'; + this.state.style.strokeColor = this.state.style.strokeColor || 'none'; if (this.state.shape != null) { @@ -738,8 +738,8 @@ export default MYNAMEHERE; { this.lastStyle = state.style; state.style = mxUtils.clone(state.style); - state.style['strokeColor'] = '#00ff00'; - state.style['strokeWidth'] = '3'; + state.style.strokeColor = '#00ff00'; + state.style.strokeWidth = '3'; if (state.shape != null) { @@ -781,12 +781,12 @@ export default MYNAMEHERE; if (this.model.isEdge(this.model.getTerminal(cell, true))) { - style['startArrow'] = 'oval'; + style.startArrow = 'oval'; } if (this.model.isEdge(this.model.getTerminal(cell, false))) { - style['endArrow'] = 'oval'; + style.endArrow = 'oval'; } } @@ -838,11 +838,11 @@ export default MYNAMEHERE; // Gets the initial connection from the source terminal or edge if (source != null && state.view.graph.model.isEdge(source.cell)) { - horizontal = state.style['sourceConstraint'] == 'horizontal'; + horizontal = state.style.sourceConstraint == 'horizontal'; } else if (source != null) { - horizontal = source.style['portConstraint'] != 'vertical'; + horizontal = source.style.portConstraint != 'vertical'; // Checks the direction of the shape and rotates let direction = source.style.direction; diff --git a/docs/stashed/grapheditor/www/js/Actions.js b/docs/stashed/grapheditor/www/js/Actions.js index 71ada98b1..f3b0cc18a 100644 --- a/docs/stashed/grapheditor/www/js/Actions.js +++ b/docs/stashed/grapheditor/www/js/Actions.js @@ -628,7 +628,7 @@ Actions.prototype.init = function() if (refState != null) { graph.stopEditing(); - let value = (refState.style['html'] == '1') ? null : '1'; + let value = (refState.style.html == '1') ? null : '1'; graph.getModel().beginUpdate(); try diff --git a/docs/stashed/grapheditor/www/js/Format.js b/docs/stashed/grapheditor/www/js/Format.js index 59328c0aa..aaba588f0 100644 --- a/docs/stashed/grapheditor/www/js/Format.js +++ b/docs/stashed/grapheditor/www/js/Format.js @@ -5608,7 +5608,7 @@ DiagramStylePanel.prototype.addView = function(div) let style = graph.getCellStyle(cells[i]); // Handles special label background color - if (style['labelBackgroundColor'] != null) + if (style.labelBackgroundColor != null) { graph.updateCellStyles('labelBackgroundColor', (graphStyle != null) ? graphStyle.background : null, [cells[i]]); diff --git a/docs/stashed/grapheditor/www/js/Graph.js b/docs/stashed/grapheditor/www/js/Graph.js index 2bef22461..9c48b087a 100644 --- a/docs/stashed/grapheditor/www/js/Graph.js +++ b/docs/stashed/grapheditor/www/js/Graph.js @@ -204,7 +204,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) { let style = this.getCurrentCellStyle(cell); - return (style != null) ? (style['html'] == '1' || style.whiteSpace == 'wrap') : false; + return (style != null) ? (style.html == '1' || style.whiteSpace == 'wrap') : false; }; // Implements a listener for hover and click handling on edges @@ -625,7 +625,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) if (state.view.graph.isHtmlLabel(state.cell)) { - if (state.style['html'] != 1) + if (state.style.html != 1) { result = mxUtils.htmlEntities(result, false); } @@ -2358,20 +2358,20 @@ Graph.prototype.initLayoutManager = function() { let style = this.graph.getCellStyle(cell); - if (style['childLayout'] == 'stackLayout') + if (style.childLayout == 'stackLayout') { let stackLayout = new mxStackLayout(this.graph, true); stackLayout.resizeParentMax = mxUtils.getValue(style, 'resizeParentMax', '1') == '1'; stackLayout.horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1'; stackLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1'; stackLayout.resizeLast = mxUtils.getValue(style, 'resizeLast', '0') == '1'; - stackLayout.spacing = style['stackSpacing'] || stackLayout.spacing; - stackLayout.border = style['stackBorder'] || stackLayout.border; - stackLayout.marginLeft = style['marginLeft'] || 0; - stackLayout.marginRight = style['marginRight'] || 0; - stackLayout.marginTop = style['marginTop'] || 0; - stackLayout.marginBottom = style['marginBottom'] || 0; - stackLayout.allowGaps = style['allowGaps'] || 0; + stackLayout.spacing = style.stackSpacing || stackLayout.spacing; + stackLayout.border = style.stackBorder || stackLayout.border; + stackLayout.marginLeft = style.marginLeft || 0; + stackLayout.marginRight = style.marginRight || 0; + stackLayout.marginTop = style.marginTop || 0; + stackLayout.marginBottom = style.marginBottom || 0; + stackLayout.allowGaps = style.allowGaps || 0; stackLayout.fill = true; if (stackLayout.allowGaps) @@ -2381,7 +2381,7 @@ Graph.prototype.initLayoutManager = function() return stackLayout; } - else if (style['childLayout'] == 'treeLayout') + else if (style.childLayout == 'treeLayout') { let treeLayout = new mxCompactTreeLayout(this.graph); treeLayout.horizontal = mxUtils.getValue(style, 'horizontalTree', '1') == '1'; @@ -2394,7 +2394,7 @@ Graph.prototype.initLayoutManager = function() return treeLayout; } - else if (style['childLayout'] == 'flowLayout') + else if (style.childLayout == 'flowLayout') { let flowLayout = new mxHierarchicalLayout(this.graph, mxUtils.getValue(style, 'flowOrientation', mxConstants.DIRECTION_EAST)); @@ -2414,15 +2414,15 @@ Graph.prototype.initLayoutManager = function() return flowLayout; } - else if (style['childLayout'] == 'circleLayout') + else if (style.childLayout == 'circleLayout') { return new mxCircleLayout(this.graph); } - else if (style['childLayout'] == 'organicLayout') + else if (style.childLayout == 'organicLayout') { return new mxFastOrganicLayout(this.graph); } - else if (style['childLayout'] == 'tableLayout') + else if (style.childLayout == 'tableLayout') { return new TableLayout(this.graph); } @@ -3602,11 +3602,11 @@ Graph.prototype.isContainer = function(cell) if (this.isSwimlane(cell)) { - return style['container'] != '0'; + return style.container != '0'; } else { - return style['container'] == '1'; + return style.container == '1'; } }; @@ -3617,7 +3617,7 @@ Graph.prototype.isCellConnectable = function(cell) { let style = this.getCurrentCellStyle(cell); - return (style['connectable'] != null) ? style['connectable'] != '0' : + return (style.connectable != null) ? style.connectable != '0' : mxGraph.prototype.isCellConnectable.apply(this, arguments); }; @@ -3628,7 +3628,7 @@ Graph.prototype.isLabelMovable = function(cell) { let style = this.getCurrentCellStyle(cell); - return (style['movableLabel'] != null) ? style['movableLabel'] != '0' : + return (style.movableLabel != null) ? style.movableLabel != '0' : mxGraph.prototype.isLabelMovable.apply(this, arguments); }; @@ -3711,10 +3711,10 @@ Graph.prototype.isCellFoldable = function(cell) { let style = this.getCurrentCellStyle(cell); - return this.foldingEnabled && (style['treeFolding'] == '1' || + return this.foldingEnabled && (style.treeFolding == '1' || (!this.isCellLocked(cell) && - ((this.isContainer(cell) && style['collapsible'] != '0') || - (!this.isContainer(cell) && style['collapsible'] == '1')))); + ((this.isContainer(cell) && style.collapsible != '0') || + (!this.isContainer(cell) && style.collapsible == '1')))); }; /** @@ -4396,7 +4396,7 @@ HoverIcons.prototype.drag = function(evt, x, y) { let direction = this.getDirection(); es.cell.style = mxUtils.setStyle(es.cell.style, 'sourcePortConstraint', direction); - es.style['sourcePortConstraint'] = direction; + es.style.sourcePortConstraint = direction; } } }; @@ -4809,7 +4809,7 @@ HoverIcons.prototype.update = function(state, x, y) */ HoverIcons.prototype.setCurrentState = function(state) { - if (state.style['portConstraint'] != 'eastwest') + if (state.style.portConstraint != 'eastwest') { this.graph.container.appendChild(this.arrowUp); this.graph.container.appendChild(this.arrowDown); @@ -4962,7 +4962,7 @@ Graph.prototype.isTable = function(cell) { let style = this.getCellStyle(cell); - return style != null && style['childLayout'] == 'tableLayout'; + return style != null && style.childLayout == 'tableLayout'; }; /** @@ -5494,7 +5494,7 @@ TableLayout.prototype.execute = function(parent) var state2 = this.validEdges[e]; var pts2 = state2.absolutePoints; - if (pts2 != null && mxUtils.intersects(state, state2) && state2.style['noJump'] != '1') + if (pts2 != null && mxUtils.intersects(state, state2) && state2.style.noJump != '1') { // Compares each segment of the edge with the current segment for (let j = 0; j < pts2.length - 1; j++) @@ -5713,8 +5713,8 @@ TableLayout.prototype.execute = function(parent) mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source) { if (start != null && edge != null && - (start.style['snapToPoint'] == '1' || - edge.style['snapToPoint'] == '1')) + (start.style.snapToPoint == '1' || + edge.style.snapToPoint == '1')) { start = this.getTerminalPort(edge, start, source); let next = this.getNextPoint(edge, end, source); @@ -6568,9 +6568,9 @@ if (typeof mxVertexHandler != 'undefined') { let style = this.getCurrentCellStyle(parent); - if (style['expand'] != null) + if (style.expand != null) { - return style['expand'] != '0'; + return style.expand != '0'; } } @@ -9428,7 +9428,7 @@ if (typeof mxVertexHandler != 'undefined') { let state = this.graph.view.getState(this.editingCell); - return state != null && state.style['html'] == 1; + return state != null && state.style.html == 1; }; /** @@ -9597,7 +9597,7 @@ if (typeof mxVertexHandler != 'undefined') // dashed borders for divs and table cells let state = this.graph.view.getState(cell); - if (state != null && state.style['html'] == 1) + if (state != null && state.style.html == 1) { this.textarea.className = 'mxCellEditor geContentEditable'; } @@ -10157,7 +10157,7 @@ if (typeof mxVertexHandler != 'undefined') stackLayoutResizeCell.apply(this, arguments); let style = this.graph.getCellStyle(cell); - if (style['childLayout'] == null) + if (style.childLayout == null) { let parent = cell.getParent(); let geo = (parent != null) ? parent.getGeometry() : null; @@ -10166,7 +10166,7 @@ if (typeof mxVertexHandler != 'undefined') { style = this.graph.getCellStyle(parent); - if (style['childLayout'] == 'stackLayout') + if (style.childLayout == 'stackLayout') { let border = parseFloat(mxUtils.getValue(style, 'stackBorder', mxStackLayout.prototype.border)); let horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1'; @@ -10675,7 +10675,7 @@ if (typeof mxVertexHandler != 'undefined') { let result = new mxPoint(0, 0); let tol = this.tolerance; - let name = this.state.style['shape']; + let name = this.state.style.shape; if (mxCellRenderer.defaultShapes[name] == null && mxStencilRegistry.getStencil(name) == null) diff --git a/docs/stashed/grapheditor/www/js/Shapes.js b/docs/stashed/grapheditor/www/js/Shapes.js index f49f92981..ee1515731 100644 --- a/docs/stashed/grapheditor/www/js/Shapes.js +++ b/docs/stashed/grapheditor/www/js/Shapes.js @@ -1656,7 +1656,7 @@ let mxRhombusPaintVertexShape = mxRhombus.prototype.paintVertexShape; mxRhombus.prototype.getLabelBounds = function(rect) { - if (this.style['double'] == 1) + if (this.style.double == 1) { let margin = (Math.max(2, this.strokewidth + 1) * 2 + parseFloat( this.style[mxConstants.'margin'] || 0)) * this.scale; @@ -1671,7 +1671,7 @@ { mxRhombusPaintVertexShape.apply(this, arguments); - if (!this.outline && this.style['double'] == 1) + if (!this.outline && this.style.double == 1) { let margin = Math.max(2, this.strokewidth + 1) * 2 + parseFloat(this.style[mxConstants.'margin'] || 0); @@ -1703,7 +1703,7 @@ }; ExtendedShape.prototype.getLabelBounds = function(rect) { - if (this.style['double'] == 1) + if (this.style.double == 1) { let margin = (Math.max(2, this.strokewidth + 1) + parseFloat( this.style[mxConstants.'margin'] || 0)) * this.scale; @@ -1719,7 +1719,7 @@ { if (this.style != null) { - if (!this.outline && this.style['double'] == 1) + if (!this.outline && this.style.double == 1) { let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style[mxConstants.'margin'] || 0); x += margin; @@ -2144,9 +2144,9 @@ { let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1; - if (vertex.style['backboneSize'] != null) + if (vertex.style.backboneSize != null) { - sw += (parseFloat(vertex.style['backboneSize']) * vertex.view.scale / 2) - 1; + sw += (parseFloat(vertex.style.backboneSize) * vertex.view.scale / 2) - 1; } if (vertex.style.direction == 'south' || @@ -3782,14 +3782,14 @@ { if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1') { - this.state.style['arcSize'] = Math.round(Math.max(0, Math.min(bounds.width, + this.state.style.arcSize = Math.round(Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x) * 2))); } else { let f = Math.min(50, Math.max(0, (bounds.width - pt.x + bounds.x) * 100 / Math.min(bounds.width, bounds.height))); - this.state.style['arcSize'] = Math.round(f); + this.state.style.arcSize = Math.round(f); } }); } @@ -3826,7 +3826,7 @@ let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width * 0.75)); - this.state.style['size'] = size; + this.state.style.size = size; }, false, true)]; if (mxUtils.getValue(state.style, 'rounded', false)) @@ -3855,7 +3855,7 @@ let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width)); - this.state.style['size'] = size; + this.state.style.size = size; }, false, redrawEdges)]; if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false)) @@ -3879,7 +3879,7 @@ return new mxPoint(bounds.x + size, bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, pt.x - bounds.x), + this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, pt.x - bounds.x), Math.min(bounds.height, pt.y - bounds.y))) / factor); }, false)]; @@ -3903,7 +3903,7 @@ return new mxPoint(bounds.x, bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.max(0, pt.y - bounds.y); + this.state.style.size = Math.max(0, pt.y - bounds.y); }, true)]; } }; @@ -3920,8 +3920,8 @@ return new mxPoint(bounds.x + (1 - as) * bounds.width, bounds.y + (1 - aw) * bounds.height / 2); }, function(bounds, pt) { - this.state.style['arrowWidth'] = Math.max(0, Math.min(1, Math.abs(bounds.y + bounds.height / 2 - pt.y) / bounds.height * 2)); - this.state.style['arrowSize'] = Math.max(0, Math.min(maxSize, (bounds.x + bounds.width - pt.x) / (bounds.width))); + this.state.style.arrowWidth = Math.max(0, Math.min(1, Math.abs(bounds.y + bounds.height / 2 - pt.y) / bounds.height * 2)); + this.state.style.arrowSize = Math.max(0, Math.min(maxSize, (bounds.x + bounds.width - pt.x) / (bounds.width))); })]; }; }; @@ -3977,7 +3977,7 @@ }, function(dist, nx, ny, p0, p1, pt) { let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); - state.style['width'] = Math.round(w * 2) / state.view.scale - spacing; + state.style.width = Math.round(w * 2) / state.view.scale - spacing; }); }; @@ -4014,7 +4014,7 @@ let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; - state.style['width'] = Math.round(w * 2) / state.view.scale; + state.style.width = Math.round(w * 2) / state.view.scale; // Applies to opposite side if (mxEvent.isControlDown(me.getEvent())) @@ -4045,13 +4045,13 @@ let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; - state.style['startWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; + state.style.startWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; // Applies to opposite side if (mxEvent.isControlDown(me.getEvent())) { state.style.endSize = state.style.startSize; - state.style['endWidth'] = state.style['startWidth']; + state.style.endWidth = state.style.startWidth; } // Snaps to endWidth @@ -4062,9 +4062,9 @@ state.style.startSize = state.style.endSize; } - if (Math.abs(parseFloat(state.style['startWidth']) - parseFloat(state.style['endWidth'])) < tol) + if (Math.abs(parseFloat(state.style.startWidth) - parseFloat(state.style.endWidth)) < tol) { - state.style['startWidth'] = state.style['endWidth']; + state.style.startWidth = state.style.endWidth; } } })); @@ -4085,7 +4085,7 @@ let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; - state.style['width'] = Math.round(w * 2) / state.view.scale; + state.style.width = Math.round(w * 2) / state.view.scale; // Applies to opposite side if (mxEvent.isControlDown(me.getEvent())) @@ -4116,13 +4116,13 @@ let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; - state.style['endWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; + state.style.endWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; // Applies to opposite side if (mxEvent.isControlDown(me.getEvent())) { state.style.startSize = state.style.endSize; - state.style['startWidth'] = state.style['endWidth']; + state.style.startWidth = state.style.endWidth; } // Snaps to start geometry @@ -4133,9 +4133,9 @@ state.style.endSize = state.style.startSize; } - if (Math.abs(parseFloat(state.style['endWidth']) - parseFloat(state.style['startWidth'])) < tol) + if (Math.abs(parseFloat(state.style.endWidth) - parseFloat(state.style.startWidth)) < tol) { - state.style['endWidth'] = state.style['startWidth']; + state.style.endWidth = state.style.startWidth; } } })); @@ -4218,7 +4218,7 @@ return new mxPoint(bounds.getCenterX(), bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; }, 'umlFrame': function(state) @@ -4231,8 +4231,8 @@ return new mxPoint(bounds.x + w0, bounds.y + h0); }, function(bounds, pt) { - this.state.style['width'] = Math.round(Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, pt.x - bounds.x))); - this.state.style['height'] = Math.round(Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.width = Math.round(Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, pt.x - bounds.x))); + this.state.style.height = Math.round(Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; return handles; @@ -4250,7 +4250,7 @@ { let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0'; let size = (fixed) ? Math.max(0, Math.min(bounds.width * 0.5, (pt.x - bounds.x))) : Math.max(0, Math.min(0.5, (pt.x - bounds.x) / bounds.width)); - this.state.style['size'] = size; + this.state.style.size = size; }, false)]; if (mxUtils.getValue(state.style, 'rounded', false)) @@ -4271,7 +4271,7 @@ }, function(bounds, pt) { let m = Math.min(bounds.width, bounds.height); - this.state.style['size'] = Math.max(0, Math.min(1, Math.min((Math.max(0, bounds.getCenterY() - pt.y) / m) * 2, + this.state.style.size = Math.max(0, Math.min(1, Math.min((Math.max(0, bounds.getCenterY() - pt.y) / m) * 2, (Math.max(0, bounds.getCenterX() - pt.x) / m) * 2))); })]; }, @@ -4285,7 +4285,7 @@ return new mxPoint(bounds.x + bounds.width - size, bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x), + this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x), Math.min(bounds.height, pt.y - bounds.y)))); })]; }, @@ -4299,7 +4299,7 @@ return new mxPoint(bounds.x + bounds.width - size, bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x), + this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x), Math.min(bounds.height, pt.y - bounds.y)))); })]; }, @@ -4312,7 +4312,7 @@ return new mxPoint(bounds.x + bounds.width / 4, bounds.y + size * 3 / 4); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3))); + this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3))); }, false)]; if (mxUtils.getValue(state.style, 'rounded', false)) @@ -4335,7 +4335,7 @@ let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0'; let size = (fixed) ? Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x))) : Math.max(0, Math.min(1, (bounds.x + bounds.width - pt.x) / bounds.width)); - this.state.style['size'] = size; + this.state.style.size = size; }, false)]; }, 'callout': function(state) @@ -4350,8 +4350,8 @@ }, function(bounds, pt) { let base = Math.max(0, Math.min(bounds.width, mxUtils.getValue(this.state.style, 'base', CalloutShape.prototype.base))); - this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))); - this.state.style['position'] = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100; + this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))); + this.state.style.position = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100; }, false), createHandle(state, ['position2'], function(bounds) { var position2 = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position2', CalloutShape.prototype.position2))); @@ -4371,7 +4371,7 @@ { let position = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position', CalloutShape.prototype.position))); - this.state.style['base'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width))); + this.state.style.base = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width))); }, false)]; if (mxUtils.getValue(state.style, 'rounded', false)) @@ -4391,8 +4391,8 @@ return new mxPoint(bounds.x + dx, bounds.y + dy); }, function(bounds, pt) { - this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); - this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); + this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; if (mxUtils.getValue(state.style, 'rounded', false)) @@ -4412,8 +4412,8 @@ return new mxPoint(bounds.x + dx / 2, bounds.y + dy * 2); }, function(bounds, pt) { - this.state.style['jettyWidth'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)) * 2); - this.state.style['jettyHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)) / 2); + this.state.style.jettyWidth = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)) * 2); + this.state.style.jettyHeight = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)) / 2); })]; return handles; @@ -4428,8 +4428,8 @@ return new mxPoint(bounds.x + dx, bounds.y + dy); }, function(bounds, pt) { - this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); - this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); + this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; }, 'tee': function(state) @@ -4442,8 +4442,8 @@ return new mxPoint(bounds.x + (bounds.width + dx) / 2, bounds.y + dy); }, function(bounds, pt) { - this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width / 2, (pt.x - bounds.x - bounds.width / 2)) * 2)); - this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width / 2, (pt.x - bounds.x - bounds.width / 2)) * 2)); + this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; }, 'singleArrow': createArrowHandleFunction(1), @@ -4470,8 +4470,8 @@ tw = bounds.width - tw; } - this.state.style['tabWidth'] = Math.round(tw); - this.state.style['tabHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.tabWidth = Math.round(tw); + this.state.style.tabHeight = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; }, 'document': function(state) @@ -4483,7 +4483,7 @@ return new mxPoint(bounds.x + 3 * bounds.width / 4, bounds.y + (1 - size) * bounds.height); }, function(bounds, pt) { - this.state.style['size'] = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height)); + this.state.style.size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height)); }, false)]; }, 'tape': function(state) @@ -4495,7 +4495,7 @@ return new mxPoint(bounds.getCenterX(), bounds.y + size * bounds.height / 2); }, function(bounds, pt) { - this.state.style['size'] = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2)); + this.state.style.size = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2)); }, false)]; }, 'isoCube2' : function(state) @@ -4508,7 +4508,7 @@ return new mxPoint(bounds.x, bounds.y + isoH); }, function(bounds, pt) { - this.state.style['isoAngle'] = Math.max(0, (pt.y - bounds.y) * 50 / bounds.height); + this.state.style.isoAngle = Math.max(0, (pt.y - bounds.y) * 50 / bounds.height); }, true)]; }, 'cylinder2' : createCylinderHandleFunction(CylinderShape.prototype.size), @@ -4522,7 +4522,7 @@ return new mxPoint(bounds.getCenterX(), bounds.y + (1 - size) * bounds.height); }, function(bounds, pt) { - this.state.style['size'] = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height)); + this.state.style.size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height)); }, false)]; }, 'step': createDisplayHandleFunction(StepShape.prototype.size, true, null, true, StepShape.prototype.fixedSize), @@ -4550,7 +4550,7 @@ // LATER: Make locked state independent of rotatable flag, fix toggle if default is false //if (this.graph.isCellResizable(this.state.cell) || this.graph.isCellMovable(this.state.cell)) { - let name = this.state.style['shape']; + let name = this.state.style.shape; if (mxCellRenderer.defaultShapes[name] == null && mxStencilRegistry.getStencil(name) == null) @@ -4592,7 +4592,7 @@ mxEdgeHandler.prototype.createCustomHandles = function() { - let name = this.state.style['shape']; + let name = this.state.style.shape; if (mxCellRenderer.defaultShapes[name] == null && mxStencilRegistry.getStencil(name) == null) diff --git a/docs/stashed/grapheditor/www/js/Sidebar.js b/docs/stashed/grapheditor/www/js/Sidebar.js index eb0cc22b5..cf890203d 100644 --- a/docs/stashed/grapheditor/www/js/Sidebar.js +++ b/docs/stashed/grapheditor/www/js/Sidebar.js @@ -3739,7 +3739,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, arrowLeft.style.left = Math.floor(bds.x - this.triangleLeft.width) + 'px'; arrowLeft.style.top = arrowRight.style.top; - if (state.style['portConstraint'] != 'eastwest') + if (state.style.portConstraint != 'eastwest') { graph.container.appendChild(arrowUp); graph.container.appendChild(arrowDown); diff --git a/packages/core/src/handler/mxElbowEdgeHandler.js b/packages/core/src/handler/mxElbowEdgeHandler.js index ef1796c83..1722900c1 100644 --- a/packages/core/src/handler/mxElbowEdgeHandler.js +++ b/packages/core/src/handler/mxElbowEdgeHandler.js @@ -127,7 +127,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler { this.state.style.edge === EDGESTYLE_TOPTOBOTTOM || ((this.state.style.edge === mxEdgeStyle.ElbowConnector || this.state.style.edge === EDGESTYLE_ELBOW) && - this.state.style['elbow'] === ELBOW_VERTICAL) + this.state.style.elbow === ELBOW_VERTICAL) ? 'row-resize' : 'col-resize'; } diff --git a/packages/core/src/util/datatypes/style/mxEdgeStyle.js b/packages/core/src/util/datatypes/style/mxEdgeStyle.js index 7d45b001e..f2b285908 100644 --- a/packages/core/src/util/datatypes/style/mxEdgeStyle.js +++ b/packages/core/src/util/datatypes/style/mxEdgeStyle.js @@ -374,7 +374,7 @@ class mxEdgeStyle { if ( !horizontal && - (vertical || state.style['elbow'] === ELBOW_VERTICAL) + (vertical || state.style.elbow === ELBOW_VERTICAL) ) { mxEdgeStyle.TopToBottom(state, source, target, points, result); } else { diff --git a/packages/core/src/view/cell/mxCellRenderer.ts b/packages/core/src/view/cell/mxCellRenderer.ts index 37e47f1d1..00a194731 100644 --- a/packages/core/src/view/cell/mxCellRenderer.ts +++ b/packages/core/src/view/cell/mxCellRenderer.ts @@ -291,11 +291,11 @@ class mxCellRenderer { shape.apply(state); shape.image = state.view.graph.getImage(state); shape.indicatorColor = state.view.graph.getIndicatorColor(state); - shape.indicatorStrokeColor = state.style['indicatorStrokeColor']; + shape.indicatorStrokeColor = state.style.indicatorStrokeColor; shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor( state ); - shape.indicatorDirection = state.style['indicatorDirection']; + shape.indicatorDirection = state.style.indicatorDirection; shape.indicatorImage = state.view.graph.getIndicatorImage(state); this.postConfigureShape(state); } diff --git a/packages/core/src/view/graph/mxGraph.ts b/packages/core/src/view/graph/mxGraph.ts index c8c36f316..4ba16d560 100644 --- a/packages/core/src/view/graph/mxGraph.ts +++ b/packages/core/src/view/graph/mxGraph.ts @@ -4814,9 +4814,9 @@ class mxGraph extends mxEventSource { * var result = graphGetPreferredSizeForCell.apply(this, arguments); * var style = this.getCellStyle(cell); * - * if (style['minWidth'] > 0) + * if (style.minWidth > 0) * { - * result.width = Math.max(style['minWidth'], result.width); + * result.width = Math.max(style.minWidth, result.width); * } * * return result; @@ -8674,7 +8674,7 @@ class mxGraph extends mxEventSource { * { * var style = this.getCurrentCellStyle(cell); * - * return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0; + * return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0; * }; * ``` * diff --git a/packages/core/typed_mxgraph_defs.json b/packages/core/typed_mxgraph_defs.json index 2c17f0a3f..3ad3c4ec6 100644 --- a/packages/core/typed_mxgraph_defs.json +++ b/packages/core/typed_mxgraph_defs.json @@ -5999,9 +5999,9 @@ " * var result = graphGetPreferredSizeForCell.apply(this, arguments);", " * var style = this.getCellStyle(cell);", " *", - " * if (style['minWidth'] > 0)", + " * if (style.minWidth > 0)", " * {", - " * result.width = Math.max(style['minWidth'], result.width);", + " * result.width = Math.max(style.minWidth, result.width);", " * }", " *", " * return result;", @@ -7558,7 +7558,7 @@ " * {", " * var style = this.getCurrentCellStyle(cell);", " *", - " * return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;", + " * return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0;", " * };", " * ```", " *", diff --git a/packages/html/stories/FixedPoints.stories.js b/packages/html/stories/FixedPoints.stories.js index bada3d84a..cd3fbac44 100644 --- a/packages/html/stories/FixedPoints.stories.js +++ b/packages/html/stories/FixedPoints.stories.js @@ -86,10 +86,10 @@ const Template = ({ label, ...args }) => { } // In case the edge style must be changed during the preview: - // this.edgeState.style['edgeStyle'] = 'orthogonalEdgeStyle'; + // this.edgeState.style.edgeStyle = 'orthogonalEdgeStyle'; // And to use the new edge style in the new edge inserted into the graph, // update the cell style as follows: - // this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style['edgeStyle']); + // this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle); } return super.updateEdgeState(pt, constraint); }