From b0d978fb8ef8ff0a15b42f958bd73558cd416791 Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Sat, 17 Apr 2021 22:19:36 +1000 Subject: [PATCH] reverted to using mxCell functions directly rather than through mxGraphModel --- docs/stashed/Ports.js | 2 +- docs/stashed/Schema.js | 40 +- docs/stashed/Scrollbars.js | 12 +- docs/stashed/grapheditor/www/js/Actions.js | 30 +- docs/stashed/grapheditor/www/js/Dialogs.js | 26 +- docs/stashed/grapheditor/www/js/Editor.js | 16 +- docs/stashed/grapheditor/www/js/EditorUi.js | 54 +- docs/stashed/grapheditor/www/js/Format.js | 40 +- docs/stashed/grapheditor/www/js/Graph.js | 349 ++++++------ docs/stashed/grapheditor/www/js/Menus.js | 42 +- docs/stashed/grapheditor/www/js/Shapes.js | 2 +- docs/stashed/grapheditor/www/js/Sidebar.js | 100 ++-- .../core/src/atomic_changes/mxChildChange.js | 6 +- .../mxCurrentRootChange.ts | 16 +- .../mxSelectionChange.ts | 12 +- .../core/src/editor/mxDefaultPopupMenu.js | 4 +- packages/core/src/editor/mxDefaultToolbar.js | 12 +- packages/core/src/editor/mxEditor.js | 18 +- .../core/src/handler/mxConnectionHandler.js | 26 +- .../core/src/handler/mxConstraintHandler.js | 6 +- packages/core/src/handler/mxEdgeHandler.js | 64 +-- .../core/src/handler/mxEdgeSegmentHandler.js | 4 +- .../core/src/handler/mxElbowEdgeHandler.js | 2 +- packages/core/src/handler/mxGraphHandler.js | 72 +-- packages/core/src/handler/mxVertexHandler.js | 38 +- .../model/mxGraphHierarchyModel.js | 2 +- .../hierarchical/model/mxSwimlaneModel.js | 4 +- .../hierarchical/mxHierarchicalLayout.js | 20 +- .../layout/hierarchical/mxSwimlaneLayout.js | 22 +- .../stage/mxCoordinateAssignment.js | 8 +- packages/core/src/layout/mxCircleLayout.js | 4 +- .../core/src/layout/mxCompactTreeLayout.js | 10 +- packages/core/src/layout/mxEdgeLabelLayout.js | 6 +- packages/core/src/layout/mxGraphLayout.js | 36 +- .../core/src/layout/mxParallelEdgeLayout.js | 8 +- packages/core/src/layout/mxPartitionLayout.js | 14 +- packages/core/src/layout/mxStackLayout.js | 16 +- .../src/serialization/mxGraphViewCodec.js | 10 +- packages/core/src/util/animate/mxEffects.js | 6 +- packages/core/src/util/animate/mxMorphing.js | 8 +- .../src/util/datatypes/style/mxEdgeStyle.js | 4 +- packages/core/src/util/image/mxImageExport.js | 4 +- packages/core/src/util/mxUtils.js | 4 +- packages/core/src/view/cell/mxCell.ts | 5 + packages/core/src/view/cell/mxCellEditor.ts | 6 +- packages/core/src/view/cell/mxCellOverlay.ts | 2 +- packages/core/src/view/cell/mxCellRenderer.ts | 14 +- .../core/src/view/cell/mxCellStatePreview.ts | 24 +- .../src/view/connection/mxMultiplicity.js | 6 +- packages/core/src/view/graph/mxGraph.ts | 476 ++++++++-------- packages/core/src/view/graph/mxGraphModel.ts | 392 +++++++------- .../src/view/graph/mxGraphSelectionModel.ts | 2 +- packages/core/src/view/graph/mxGraphView.ts | 112 ++-- .../core/src/view/graph/mxLayoutManager.ts | 10 +- .../core/src/view/graph/mxSwimlaneManager.ts | 19 +- src/pages/connections/EdgeTolerance.js | 2 +- src/pages/connections/FixedPoints.js | 2 +- src/pages/connections/HelloPort.js | 6 +- src/pages/connections/PortRefs.js | 2 +- src/pages/dnd_copypaste/Clipboard.js | 16 +- src/pages/events/Boundary.js | 16 +- src/pages/examplesListing.json | 4 +- src/pages/icons_images/ContextIcons.js | 2 +- src/pages/icons_images/Control.js | 4 +- src/pages/icons_images/HoverIcons.js | 2 +- src/pages/labels/Labels.js | 12 +- src/pages/labels/SecondLabel.js | 6 +- src/pages/labels/Wrapping.js | 2 +- src/pages/layout/Collapse.js | 31 +- src/pages/layout/Constituent.js | 4 +- src/pages/layout/Groups.js | 28 +- src/pages/layout/Layers.js | 4 +- src/pages/layout/OrgChart.js | 8 +- src/pages/layout/SwimLanes.js | 509 ++++++++++-------- src/pages/misc/DynamicLoading.js | 12 +- src/pages/misc/Permissions.js | 8 +- src/pages/misc/Visibility.js | 21 +- src/pages/shapes_stencils/Stencils.js | 2 +- src/pages/styles/DynamicStyle.js | 52 +- src/pages/styles/HoverStyle.js | 2 +- src/pages/styles/Stylesheet.js | 8 +- src/pages/xml_json/UserObject.js | 8 +- src/pages/zoom_offpage/LOD.js | 29 +- 83 files changed, 1549 insertions(+), 1500 deletions(-) rename packages/core/src/{view/graph => atomic_changes}/mxCurrentRootChange.ts (80%) rename packages/core/src/{view/graph => atomic_changes}/mxSelectionChange.ts (82%) diff --git a/docs/stashed/Ports.js b/docs/stashed/Ports.js index ef9165e02..2a10af491 100644 --- a/docs/stashed/Ports.js +++ b/docs/stashed/Ports.js @@ -201,7 +201,7 @@ export default Ports; cell != null && this.isCellEditable(cell)) { - if (this.model.isEdge(cell) || + if (cell.isEdge() || !this.isHtmlLabel(cell)) { this.startEditingAtCell(cell); diff --git a/docs/stashed/Schema.js b/docs/stashed/Schema.js index 234aa569c..0d26725c9 100644 --- a/docs/stashed/Schema.js +++ b/docs/stashed/Schema.js @@ -158,13 +158,13 @@ export default MYNAMEHERE; graph.isHtmlLabel = function(cell) { return !this.isSwimlane(cell) && - !this.model.isEdge(cell); + !cell.isEdge(); }; // Edges are not editable graph.isCellEditable = function(cell) { - return !this.model.isEdge(cell); + return !cell.isEdge(); }; // Returns the name field of the user object for the label @@ -185,10 +185,10 @@ export default MYNAMEHERE; { return 'Type: '+state.cell.value.type; } - else if (this.model.isEdge(state.cell)) + else if (state.cell.isEdge()) { - let source = this.model.getTerminal(state.cell, true); - let parent = this.model.getParent(source); + let source = state.cell.getTerminal(true); + let parent = source.getParent(); return parent.value.name+'.'+source.value.name; } @@ -241,10 +241,10 @@ export default MYNAMEHERE; { let cell = cells[i]; - if (this.model.isEdge(cell)) + if (cell.isEdge()) { - let terminal = this.model.getTerminal(cell, true); - let parent = this.model.getParent(terminal); + let terminal = cell.getTerminal(true); + let parent = terminal.getParent(); this.model.remove(terminal); } } @@ -296,11 +296,11 @@ export default MYNAMEHERE; { // Finds the primary key child of the target table let primaryKey = null; - let childCount = this.model.getChildCount(target); + let childCount = target.getChildCount(); for (var i=0; i < childCount; i++) { - let child = this.model.getChildAt(target, i); + let child = target.getChildAt(i); if (child.value.primaryKey) { @@ -557,17 +557,17 @@ export default MYNAMEHERE; pt.x -= pstate.x; pt.y -= pstate.y; - let columnCount = graph.model.getChildCount(parent)+1; + let columnCount = parent.getChildCount()+1; name = mxUtils.prompt('Enter name for new column', 'COLUMN'+columnCount); } else { let tableCount = 0; - let childCount = graph.model.getChildCount(parent); + let childCount = parent.getChildCount(); for (var i=0; i 0) { for (var j=0; j 0 && index <= graph.model.getChildCount(graph.model.root)) + else if (index > 0 && index <= graph.model.root.getChildCount()) { - graph.setDefaultParent(graph.model.getChildAt(graph.model.root, index - 1)); + graph.setDefaultParent(graph.model.root.getChildAt(index - 1)); } else { @@ -2085,7 +2085,7 @@ let LayersWindow = function(editorUi, x, y, w, h) menu.addCheckmark(item, Editor.checkmarkImage); } - }))(graph.model.getChildAt(graph.model.root, i)); + }))(graph.model.root.getChildAt(i)); } }), offset.x, offset.y + insertLink.offsetHeight, evt); } @@ -2201,7 +2201,7 @@ let LayersWindow = function(editorUi, x, y, w, h) function refresh() { - layerCount = graph.model.getChildCount(graph.model.root) + layerCount = graph.model.root.getChildCount() listDiv.innerHTML = ''; function addLayer(index, label, child, defaultParent) @@ -2319,7 +2319,7 @@ let LayersWindow = function(editorUi, x, y, w, h) inp.style.marginTop = '4px'; left.appendChild(inp); - if (graph.model.isVisible(child)) + if (child.isVisible()) { inp.setAttribute('checked', 'checked'); inp.defaultChecked = true; @@ -2327,7 +2327,7 @@ let LayersWindow = function(editorUi, x, y, w, h) mxEvent.addListener(inp, 'click', function(evt) { - graph.model.setVisible(child, !graph.model.isVisible(child)); + graph.model.setVisible(child, !child.isVisible()); mxEvent.consume(evt); }); @@ -2451,7 +2451,7 @@ let LayersWindow = function(editorUi, x, y, w, h) { addLayer(i, graph.convertValueToString(child) || mxResources.get('background'), child, child); - }))(graph.model.getChildAt(graph.model.root, i)); + }))(graph.model.root.getChildAt(i)); } let label = graph.convertValueToString(selectionLayer) || mxResources.get('background'); diff --git a/docs/stashed/grapheditor/www/js/Editor.js b/docs/stashed/grapheditor/www/js/Editor.js index 0fdc52ddd..061ec275c 100644 --- a/docs/stashed/grapheditor/www/js/Editor.js +++ b/docs/stashed/grapheditor/www/js/Editor.js @@ -2576,7 +2576,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) { return false; } - else if (this.graph.getModel().isVertex(cells[i])) + else if (cells[i].isVertex()) { let geo = this.graph.getCellGeometry(cells[i]); @@ -2686,14 +2686,14 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) mxGraphHandler.prototype.isPropagateSelectionCell = function(cell, immediate, me) { let result = false; - let parent = this.graph.model.getParent(cell) + let parent = cell.getParent() if (immediate) { - let geo = (this.graph.model.isEdge(cell)) ? null : + let geo = (cell.isEdge()) ? null : this.graph.getCellGeometry(cell); - result = !this.graph.model.isEdge(parent) && + result = !parent.isEdge() && !this.graph.isSiblingSelected(cell) && ((geo != null && geo.relative) || !this.graph.isContainer(parent) || @@ -2709,7 +2709,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) if (!this.graph.isTable(table)) { - table = this.graph.model.getParent(table); + table = table.getParent(); } result = !this.graph.selectionCellsHandler.isHandled(table) || @@ -2729,11 +2729,11 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) { let cell = me.getCell(); let model = this.graph.getModel(); - let parent = model.getParent(cell); + let parent = cell.getParent(); let state = this.graph.view.getState(parent); let selected = this.graph.isCellSelected(cell); - while (state != null && (model.isVertex(parent) || model.isEdge(parent))) + while (state != null && (parent.isVertex() || parent.isEdge())) { let temp = this.graph.isCellSelected(parent); selected = selected || temp; @@ -2744,7 +2744,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) cell = parent; } - parent = model.getParent(parent); + parent = parent.getParent(); } return cell; diff --git a/docs/stashed/grapheditor/www/js/EditorUi.js b/docs/stashed/grapheditor/www/js/EditorUi.js index 966c8af2c..6d4dcd2c5 100644 --- a/docs/stashed/grapheditor/www/js/EditorUi.js +++ b/docs/stashed/grapheditor/www/js/EditorUi.js @@ -458,7 +458,7 @@ EditorUi = function(editor, container, lightbox) } // Handles special case for value "none" - let cellStyle = graph.getModel().getStyle(state.cell); + let cellStyle = state.cell ? state.cell.getStyle() : null; let tokens = (cellStyle != null) ? cellStyle.split(';') : []; for (let i = 0; i < tokens.length; i++) @@ -480,7 +480,7 @@ EditorUi = function(editor, container, lightbox) } // Resets current style - if (graph.getModel().isEdge(state.cell)) + if (state.cell.isEdge()) { graph.currentEdgeStyle = {}; } @@ -564,7 +564,7 @@ EditorUi = function(editor, container, lightbox) else { // Removes styles defined in the cell style from the styles to be applied - let cellStyle = model.getStyle(cell); + let cellStyle = cell.getStyle(); let tokens = (cellStyle != null) ? cellStyle.split(';') : []; appliedStyles = styles.slice(); @@ -606,9 +606,9 @@ EditorUi = function(editor, container, lightbox) } // Applies the current style to the cell - let edge = model.isEdge(cell); + let edge = cell.isEdge(); let current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle; - let newStyle = model.getStyle(cell); + let newStyle = cell.getStyle(); for (let j = 0; j < appliedStyles.length; j++) { @@ -669,8 +669,8 @@ EditorUi = function(editor, container, lightbox) { for (let i = 0; i < cells.length; i++) { - vertex = graph.getModel().isVertex(cells[i]) || vertex; - edge = graph.getModel().isEdge(cells[i]) || edge; + vertex = cells[i].isVertex() || vertex; + edge = cells[i].isEdge() || edge; if (edge && vertex) { @@ -868,7 +868,7 @@ EditorUi = function(editor, container, lightbox) let cells = evt.getProperty('cells'); let parent = evt.getProperty('parent'); - if (graph.getModel().isLayer(parent) && !graph.isCellVisible(parent) && cells != null && cells.length > 0) + if (graph.getModel().isLayer(parent) && !parent.isVisible() && cells != null && cells.length > 0) { graph.getModel().setVisible(parent, true); } @@ -1210,7 +1210,7 @@ EditorUi.prototype.installShapePicker = function() while (temp != null && graph.model.isVertex(temp) && geo != null && geo.relative) { cell = temp; - temp = graph.model.getParent(cell) + temp = cell.getParent() geo = graph.getCellGeometry(temp); } @@ -1634,7 +1634,7 @@ EditorUi.prototype.initClipboard = function() // to avoid having to carry over the mapping from object // ID to cell ID to the paste operation let model = new mxGraphModel(); - let parent = model.getChildAt(model.getRoot(), 0); + let parent = model.getRoot().getChildAt(0); for (let i = 0; i < clones.length; i++) { @@ -1647,8 +1647,8 @@ EditorUi.prototype.initClipboard = function() { let geo = graph.getCellGeometry(clones[i]); - if (geo != null && geo.relative && !model.isEdge(result[i]) && - lookup[mxObjectIdentity.get(model.getParent(result[i]))] == null) + if (geo != null && geo.relative && !result[i].isEdge() && + lookup[mxObjectIdentity.get(result[i].getParent())] == null) { geo.offset = null; geo.relative = false; @@ -2120,7 +2120,7 @@ EditorUi.prototype.initCanvas = function() model.addListener(mxEvent.CHANGE, function() { - layersButton.style.display = (model.getChildCount(model.root) > 1) ? '' : 'none'; + layersButton.style.display = (model.root.getChildCount() > 1) ? '' : 'none'; }); } @@ -2798,7 +2798,7 @@ EditorUi.prototype.isDiagramEmpty = function() { let model = this.editor.graph.getModel(); - return model.getChildCount(model.root) == 1 && model.getChildCount(model.getChildAt(model.root, 0)) == 0; + return model.getChildCount(model.root) == 1 && model.root.getChildAt(0).getChildCount() == 0; }; /** @@ -3475,16 +3475,16 @@ EditorUi.prototype.updateActionStates = function() { let cell = cells[i]; - if (graph.getModel().isEdge(cell)) + if (cell.isEdge()) { edgeSelected = true; } - if (graph.getModel().isVertex(cell)) + if (cell.isVertex()) { vertexSelected = true; - if (graph.getModel().getChildCount(cell) > 0 || + if (cell.getChildCount() > 0 || graph.isContainer(cell)) { groupSelected = true; @@ -3523,13 +3523,13 @@ EditorUi.prototype.updateActionStates = function() (oneVertexSelected && !graph.isContainer(graph.getSelectionCell()))); this.actions.get('ungroup').setEnabled(groupSelected); this.actions.get('removeFromGroup').setEnabled(oneVertexSelected && - graph.getModel().isVertex(graph.getModel().getParent(graph.getSelectionCell()))); + graph.getSelectionCell().getParent().isVertex()); // Updates menu states let state = graph.view.getState(graph.getSelectionCell()); this.menus.get('navigation').setEnabled(selected || graph.view.currentRoot != null); this.actions.get('collapsible').setEnabled(vertexSelected && - (graph.isContainer(graph.getSelectionCell()) || graph.model.getChildCount(graph.getSelectionCell()) > 0)); + (graph.isContainer(graph.getSelectionCell()) || graph.getSelectionCell().getChildCount() > 0)); this.actions.get('home').setEnabled(graph.view.currentRoot != null); this.actions.get('exitGroup').setEnabled(graph.view.currentRoot != null); this.actions.get('enterGroup').setEnabled(graph.getSelectionCount() == 1 && graph.isValidRoot(graph.getSelectionCell())); @@ -4106,7 +4106,7 @@ EditorUi.prototype.ctrlEnter = function() for (let i = 0; i < cells.length; i++) { // Clones table rows instead of cells - let cell = (graph.isTableCell(cells[i])) ? graph.model.getParent(cells[i]) : cells[i]; + let cell = (graph.isTableCell(cells[i])) ? cells[i].getParent() : cells[i]; if (cell != null && !lookup.get(cell)) { @@ -4593,7 +4593,7 @@ EditorUi.prototype.createKeyHandler = function(editor) for (let i = 0; i < cells.length; i++) { - if (graph.getModel().isVertex(cells[i]) && graph.isCellResizable(cells[i])) + if (cells[i].isVertex() && graph.isCellResizable(cells[i])) { let geo = graph.getCellGeometry(cells[i]); @@ -4632,7 +4632,7 @@ EditorUi.prototype.createKeyHandler = function(editor) { // Moves vertices up/down in a stack layout let cell = graph.getSelectionCell(); - let parent = graph.model.getParent(cell); + let parent = cell.getParent(); let layout = null; if (graph.getSelectionCount() == 1 && graph.model.isVertex(cell) && @@ -4651,7 +4651,7 @@ EditorUi.prototype.createKeyHandler = function(editor) } else if (keyCode == 39 ||keyCode == 40) { - graph.model.add(parent, cell, Math.min(graph.model.getChildCount(parent), index + 1)); + graph.model.add(parent, cell, Math.min(parent.getChildCount(), index + 1)); } } else @@ -4666,7 +4666,7 @@ EditorUi.prototype.createKeyHandler = function(editor) if (mxUtils.getValue(style, 'part', '0') == '1') { - let parent = graph.model.getParent(cells[i]); + let parent = cells[i].getParent(); if (graph.model.isVertex(parent) && mxUtils.indexOf(cells, parent) < 0) { @@ -4790,7 +4790,7 @@ EditorUi.prototype.createKeyHandler = function(editor) // On macOS, Control+Cursor is used by Expose so allow for Alt+Control to resize if (!this.isControlDown(evt) && mxEvent.isShiftDown(evt) && mxEvent.isAltDown(evt)) { - if (graph.model.isVertex(graph.getSelectionCell())) + if (graph.getSelectionCell() && graph.getSelectionCell().isVertex()) { return function() { @@ -4799,9 +4799,9 @@ EditorUi.prototype.createKeyHandler = function(editor) if (cells != null && cells.length > 0) { - if (cells.length == 1 && graph.model.isEdge(cells[0])) + if (cells.length == 1 && cells[0].isEdge()) { - graph.setSelectionCell(graph.model.getTerminal(cells[0], false)); + graph.setSelectionCell(cells[0].getTerminal(false)); } else { diff --git a/docs/stashed/grapheditor/www/js/Format.js b/docs/stashed/grapheditor/www/js/Format.js index 837150e26..77a973cb4 100644 --- a/docs/stashed/grapheditor/www/js/Format.js +++ b/docs/stashed/grapheditor/www/js/Format.js @@ -132,7 +132,7 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells) { let graph = this.editorUi.editor.graph; - if (graph.getModel().isVertex(cell)) + if (cell.isVertex()) { result.resizable = result.resizable && graph.isCellResizable(cell); result.rotatable = result.rotatable && graph.isCellRotatable(cell); @@ -203,7 +203,7 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells) } } } - else if (graph.getModel().isEdge(cell)) + else if (cell.isEdge()) { result.edges.push(cell); result.resizable = false; @@ -252,7 +252,7 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells) Format.prototype.isFillState = function(state) { return !this.isSpecialColor(state.style[mxConstants.STYLE_FILLCOLOR]) && - (state.view.graph.model.isVertex(state.cell) || + (state.cell.isVertex() || mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'arrow' || mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'filledEdge' || mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'flexArrow'); @@ -723,7 +723,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu for (let i = 0; i < cells.length; i++) { - if (graph.model.getChildCount(cells[i]) == 0) + if (cells[i].getChildCount() == 0) { graph.autoSizeCell(cells[i], false); } @@ -1745,8 +1745,8 @@ ArrangePanel.prototype.addGroupOps = function(div) div.appendChild(btn); count++; } - else if (graph.getSelectionCount() == 1 && !graph.getModel().isEdge(cell) && !graph.isSwimlane(cell) && - !graph.isTable(cell) && !ss.row && !ss.cell && graph.getModel().getChildCount(cell) > 0) + else if (graph.getSelectionCount() == 1 && !cell.isEdge() && !graph.isSwimlane(cell) && + !graph.isTable(cell) && !ss.row && !ss.cell && cell.getChildCount() > 0) { btn = mxUtils.button(mxResources.get('ungroup'), function(evt) { @@ -1802,8 +1802,8 @@ ArrangePanel.prototype.addGroupOps = function(div) } } - if (graph.getSelectionCount() == 1 && graph.getModel().isVertex(cell) && !ss.row && - !ss.cell && graph.getModel().isVertex(graph.getModel().getParent(cell))) + if (graph.getSelectionCount() == 1 && cell.isVertex() && !ss.row && + !ss.cell && cell.getParent().isVertex()) { if (count > 0) { @@ -2257,7 +2257,7 @@ ArrangePanel.prototype.addGeometry = function(container) { if (graph.isTableCell(cell)) { - cell = graph.model.getParent(cell); + cell = cell.getParent(); } if (graph.isTableRow(cell)) @@ -2424,7 +2424,7 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) for (let i = 0; i < cells.length; i++) { - if (graph.getModel().isVertex(cells[i])) + if (cells[i].isVertex()) { let geo = graph.getCellGeometry(cells[i]); @@ -2496,7 +2496,7 @@ ArrangePanel.prototype.addEdgeGeometryHandler = function(input, fn) for (let i = 0; i < cells.length; i++) { - if (graph.getModel().isEdge(cells[i])) + if (cells[i].isEdge()) { let geo = graph.getCellGeometry(cells[i]); @@ -2658,11 +2658,11 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) div.style.display = 'none'; } - if (graph.getSelectionCount() == 1 && graph.model.isEdge(cell)) + if (graph.getSelectionCount() == 1 && cell.isEdge()) { - let geo = graph.model.getGeometry(cell); - - if (geo.sourcePoint != null && graph.model.getTerminal(cell, true) == null) + let geo = cell.getGeometry(); + + if (geo.sourcePoint != null && cell.getTerminal(true) == null) { xs.value = geo.sourcePoint.x; ys.value = geo.sourcePoint.y; @@ -2672,7 +2672,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) divs.style.display = 'none'; } - if (geo.targetPoint != null && graph.model.getTerminal(cell, false) == null) + if (geo.targetPoint != null && cell.getTerminal(false) == null) { xt.value = geo.targetPoint.x; yt.value = geo.targetPoint.y; @@ -5614,8 +5614,8 @@ DiagramStylePanel.prototype.addView = function(div) graphStyle.background : null, [cells[i]]); } - let edge = model.isEdge(cells[i]); - let newStyle = model.getStyle(cells[i]); + let edge = cells[i].isEdge(); + let newStyle = cells[i].getStyle(); let current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle; for (let j = 0; j < styles.length; j++) @@ -5745,7 +5745,7 @@ DiagramStylePanel.prototype.addView = function(div) let defaultStyle = graph.stylesheet.getDefaultVertexStyle(); let appliedStyle = vertexStyle; - if (model.isEdge(cell)) + if (cell.isEdge()) { defaultStyle = graph.stylesheet.getDefaultEdgeStyle(); appliedStyle = edgeStyle; @@ -5883,7 +5883,7 @@ DiagramStylePanel.prototype.addView = function(div) let defaultStyle = graph.stylesheet.getDefaultVertexStyle(); let appliedStyle = vertexStyle; - if (model.isEdge(cell)) + if (cell.isEdge()) { defaultStyle = graph.stylesheet.getDefaultEdgeStyle(); appliedStyle = edgeStyle; diff --git a/docs/stashed/grapheditor/www/js/Graph.js b/docs/stashed/grapheditor/www/js/Graph.js index 260da755a..9448ed7c9 100644 --- a/docs/stashed/grapheditor/www/js/Graph.js +++ b/docs/stashed/grapheditor/www/js/Graph.js @@ -229,7 +229,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) if (!mxEvent.isAltDown(me.getEvent()) && state != null) { // Checks if state was removed in call to stopEditing above - if (this.model.isEdge(state.cell)) + if (state.cell.isEdge()) { start.point = new mxPoint(me.getGraphX(), me.getGraphY()); start.selected = this.isCellSelected(state.cell); @@ -265,16 +265,16 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) if (this.isTableCell(state.cell) && !this.isCellSelected(state.cell)) { - let row = this.model.getParent(state.cell); - let table = this.model.getParent(row); + let row = state.cell.getParent(); + let table = row.getParent(); if (!this.isCellSelected(table)) { if ((mxUtils.intersects(box, new mxRectangle(state.x, state.y - 2, state.width, 3)) && - this.model.getChildAt(table, 0) != row) || mxUtils.intersects(box, new mxRectangle( + table.getChildAt(0) != row) || mxUtils.intersects(box, new mxRectangle( state.x, state.y + state.height - 2, state.width, 3)) || (mxUtils.intersects(box, new mxRectangle(state.x - 2, state.y, 2, state.height)) && - this.model.getChildAt(row, 0) != state.cell) || mxUtils.intersects(box, new mxRectangle( + row.getChildAt(0) != state.cell) || mxUtils.intersects(box, new mxRectangle( state.x + state.width - 2, state.y, 2, state.height))) { let wasSelected = this.selectionCellsHandler.isHandled(table); @@ -326,7 +326,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) } } - current = this.view.getState(this.model.getParent(current.cell)); + current = this.view.getState(current.cell.getParent()); } } } @@ -365,7 +365,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) { let handler = this.selectionCellsHandler.getHandler(state.cell); - if (handler == null && this.model.isEdge(state.cell)) + if (handler == null && state.cell.isEdge()) { handler = this.createHandler(state); } @@ -507,7 +507,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) let cursor = null; // Checks if state was removed in call to stopEditing above - if (this.model.isEdge(state.cell)) + if (state.cell.isEdge()) { let box = new mxRectangle(me.getGraphX(), me.getGraphY()); box.grow(mxEdgeHandler.prototype.handleImage.width / 2); @@ -551,19 +551,19 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) if (this.isTableCell(state.cell)) { - let row = this.model.getParent(state.cell); - let table = this.model.getParent(row); + let row = state.cell.getParent(); + let table = row.getParent(); if (!this.isCellSelected(table)) { if ((mxUtils.intersects(box, new mxRectangle(state.x - 2, state.y, 2, state.height)) && - this.model.getChildAt(row, 0) != state.cell) || mxUtils.intersects(box, + row.getChildAt(0) != state.cell) || mxUtils.intersects(box, new mxRectangle(state.x + state.width - 2, state.y, 2, state.height))) { cursor ='col-resize'; } else if ((mxUtils.intersects(box, new mxRectangle(state.x, state.y - 2, state.width, 3)) && - this.model.getChildAt(table, 0) != row) || mxUtils.intersects(box, + table.getChildAt(0) != row) || mxUtils.intersects(box, new mxRectangle(state.x, state.y + state.height - 2, state.width, 3))) { cursor ='row-resize'; @@ -596,7 +596,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) } } - current = this.view.getState(this.model.getParent(current.cell)); + current = this.view.getState(current.cell.getParent()); } } @@ -747,7 +747,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) let cell = (this.graph.isTableCell(initialCell) && this.graph.isTableCell(cells[i]) && this.graph.isCellSelected(cells[i])) ? - this.graph.model.getParent(cells[i]) : + cells[i].getParent() : ((this.graph.isTableRow(initialCell) && this.graph.isTableRow(cells[i]) && this.graph.isCellSelected(cells[i])) ? @@ -775,7 +775,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) { if (!this.graph.isCellSelected(cell)) { - cell = this.graph.model.getParent(cell); + cell = cell.getParent(); } else { @@ -1027,7 +1027,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) return true; } - pState = this.view.getState(this.model.getParent(pState.cell)); + pState = this.view.getState(pState.cell).getParent(); } return false; @@ -1096,7 +1096,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) let graph = state.view.graph; return source && (graph.isCellSelected(state.cell) || (graph.isTableRow(state.cell) && - graph.selectionCellsHandler.isHandled(graph.model.getParent(state.cell)))); + graph.selectionCellsHandler.isHandled(state.cell.getParent()))); }; // Updates constraint handler if the selection changes @@ -1647,7 +1647,7 @@ Graph.prototype.init = function(container) /** * Implements zoom and offset via CSS transforms. This is currently only used - * in read-only as there are fewer issues with the mxCellState not being scaled + * in read-only as there are fewer issues with the mxCell not being scaled * and translated. * * KNOWN ISSUES TO FIX: @@ -1681,7 +1681,7 @@ Graph.prototype.init = function(container) return model.filterDescendants(function(cell) { - return (vertices && model.isVertex(cell)) || (edges && model.isEdge(cell)); + return (vertices && cell.isVertex()) || (edges && cell.isEdge()); }, model.getRoot()); }; @@ -1696,9 +1696,9 @@ Graph.prototype.init = function(container) if (this.isTable(cell) && (!this.isSwimlane(cell) || size == 0) && this.getLabel(cell) == '' && - this.model.getChildCount(cell) > 0) + cell.getChildCount() > 0) { - cell = this.model.getChildAt(cell, 0); + cell = cell.getChildAt(0); style = this.getCellStyle(cell); size = parseInt(mxUtils.getValue(style, mxConstants.STYLE_STARTSIZE, 0)); @@ -1707,11 +1707,11 @@ Graph.prototype.init = function(container) // Redirect editing for table rows if (this.isTableRow(cell) && (!this.isSwimlane(cell) || size == 0) && this.getLabel(cell) == '' && - this.model.getChildCount(cell) > 0) + cell.getChildCount() > 0) { - for (let i = 0; i < this.model.getChildCount(cell); i++) + for (let i = 0; i < cell.getChildCount(); i++) { - let temp = this.model.getChildAt(cell, i); + let temp = cell.getChildAt(i); if (this.isCellEditable(temp)) { @@ -1736,7 +1736,7 @@ Graph.prototype.init = function(container) style = mxUtils.clone(this.getCurrentCellStyle(cell)); // Handles special case for value "none" - let cellStyle = this.model.getStyle(cell); + let cellStyle = cell.getStyle(); let tokens = (cellStyle != null) ? cellStyle.split(';') : []; for (let j = 0; j < tokens.length; j++) @@ -1851,19 +1851,19 @@ Graph.prototype.init = function(container) if (parent != null) { - let childCount = this.model.getChildCount(parent); + let childCount = parent.getChildCount(); for (let i = childCount - 1; i >= 0; i--) { - let cell = this.model.getChildAt(parent, i); + let cell = parent.getChildAt(i); let result = this.getScaledCellAt(x, y, cell, vertices, edges, ignoreFn); if (result != null) { return result; } - else if (this.isCellVisible(cell) && (edges && this.model.isEdge(cell) || - vertices && this.model.isVertex(cell))) + else if (cell.isVisible() && (edges && cell.isEdge() || + vertices && cell.isVertex())) { let state = this.view.getState(cell); @@ -1884,7 +1884,7 @@ Graph.prototype.init = function(container) */ Graph.prototype.isRecursiveVertexResize = function(state) { - return !this.isSwimlane(state.cell) && this.model.getChildCount(state.cell) > 0 && + return !this.isSwimlane(state.cell) && state.cell.getChildCount() > 0 && !this.isCellCollapsed(state.cell) && mxUtils.getValue(state.style, 'recursiveResize', '1') == '1' && mxUtils.getValue(state.style, 'childLayout', null) == null; } @@ -1905,9 +1905,9 @@ Graph.prototype.init = function(container) { while (this.isPart(cell)) { - let temp = this.model.getParent(cell); + let temp = cell.getParent(); - if (!this.model.isVertex(temp)) + if (!temp.isVertex()) { break; } @@ -2349,7 +2349,7 @@ Graph.prototype.initLayoutManager = function() this.layoutManager.getLayout = function(cell, eventName) { - let parent = this.graph.model.getParent(cell); + let parent = cell.getParent(); // Executes layouts from top to bottom except for nested layouts where // child layouts are executed before and after the parent layout runs @@ -2553,7 +2553,7 @@ Graph.prototype.isIgnoreTerminalEvent = function(evt) */ Graph.prototype.isSplitTarget = function(target, cells, evt) { - return !this.model.isEdge(cells[0]) && + return !cells[0].isEdge() && !mxEvent.isAltDown(evt) && !mxEvent.isShiftDown(evt) && mxGraph.prototype.isSplitTarget.apply(this, arguments); }; @@ -2581,8 +2581,8 @@ Graph.prototype.isLabelMovable = function(cell) let style = this.getCurrentCellStyle(cell); return !this.isCellLocked(cell) && - ((this.model.isEdge(cell) && this.edgeLabelsMovable) || - (this.model.isVertex(cell) && (this.vertexLabelsMovable || + ((cell.isEdge() && this.edgeLabelsMovable) || + (cell.isVertex() && (this.vertexLabelsMovable || mxUtils.getValue(style, 'labelMovable', '0') == '1'))); }; @@ -2624,7 +2624,7 @@ Graph.prototype.getClickableLinkForCell = function(cell) return link; } - cell = this.model.getParent(cell); + cell = cell.getParent(); } while (cell != null); return null; @@ -2779,7 +2779,7 @@ Graph.prototype.createLayersDialog = function() div.style.position = 'absolute'; let model = this.getModel(); - let childCount = model.getChildCount(model.root); + let childCount = model.root.getChildCount(); for (let i = 0; i < childCount; i++) { @@ -2795,7 +2795,7 @@ Graph.prototype.createLayersDialog = function() cb.style.display = 'inline-block'; cb.setAttribute('type', 'checkbox'); - if (model.isVisible(layer)) + if (layer.isVisible()) { cb.setAttribute('checked', 'checked'); cb.defaultChecked = true; @@ -2821,7 +2821,7 @@ Graph.prototype.createLayersDialog = function() model.setVisible(layer, cb.checked); }); - })(model.getChildAt(model.root, i))); + })(model.root.getChildAt(i))); } return div; @@ -2879,7 +2879,7 @@ Graph.prototype.replacePlaceholders = function(cell, str, vars, translate) } } - current = this.model.getParent(current); + current = current.getParent(); } } @@ -2938,7 +2938,7 @@ Graph.prototype.restoreSelection = function(cells) Graph.prototype.selectCellsForConnectVertex = function(cells, evt, hoverIcons) { // Selects only target vertex if one exists - if (cells.length == 2 && this.model.isVertex(cells[1])) + if (cells.length == 2 && cells[1].isVertex()) { this.setSelectionCell(cells[1]); this.scrollCellToVisible(cells[1]); @@ -2971,7 +2971,7 @@ Graph.prototype.isCloneConnectSource = function(source) if (this.layoutManager != null) { - layout = this.layoutManager.getLayout(this.model.getParent(source)); + layout = this.layoutManager.getLayout(source.getParent()); } return this.isTableRow(source) || this.isTableCell(source) || @@ -2986,13 +2986,13 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl ignoreCellAt = (ignoreCellAt) ? ignoreCellAt : false; // Ignores relative edge labels - if (source.geometry.relative && this.model.isEdge(source.parent)) + if (source.geometry.relative && source.parent.isEdge()) { return []; } // Uses parent for relative child cells - while (source.geometry.relative && this.model.isVertex(source.parent)) + while (source.geometry.relative && source.parent.isVertex()) { source = source.parent; } @@ -3027,20 +3027,20 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl pt.y += composite.geometry.height / 2; } - let parentState = this.view.getState(this.model.getParent(source)); + let parentState = this.view.getState(source.getParent()); let s = this.view.scale; let t = this.view.translate; let dx = t.x * s; let dy = t.y * s; - if (parentState != null && this.model.isVertex(parentState.cell)) + if (parentState != null && parentState.cell.isVertex()) { dx = parentState.x; dy = parentState.y; } // Workaround for relative child cells - if (this.model.isVertex(source.parent) && source.geometry.relative) + if (source.parent.isVertex() && source.geometry.relative) { pt.x += source.parent.geometry.x; pt.y += source.parent.geometry.y; @@ -3081,7 +3081,7 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl break; } - temp = this.model.getParent(temp); + temp = temp.getParent(); } // Checks if source and target intersect @@ -3122,15 +3122,15 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl // TODO: Fix using target as parent for swimlane if (target != null && !this.isCellConnectable(target) && !this.isSwimlane(target)) { - let parent = this.getModel().getParent(target); + let parent = target.getParent(); - if (this.getModel().isVertex(parent) && this.isCellConnectable(parent)) + if (parent.isVertex() && this.isCellConnectable(parent)) { target = parent; } } - if (target == source || this.model.isEdge(target) || + if (target == source || target.isEdge() || !this.isCellConnectable(target) && !this.isSwimlane(target)) { @@ -3156,7 +3156,7 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl while (geo != null && geo.relative) { - cellToClone = this.getModel().getParent(cellToClone); + cellToClone = cellToClone.getParent(); geo = this.getCellGeometry(cellToClone); } @@ -3166,7 +3166,7 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl if (targetCell != null) { - this.addCells([realTarget], this.model.getParent(source), null, null, null, true); + this.addCells([realTarget], source.getParent(), null, null, null, true); } let geo = this.getCellGeometry(realTarget); @@ -3189,7 +3189,7 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl } let edge = ((mxEvent.isControlDown(evt) && mxEvent.isShiftDown(evt) && duplicate) || - (target == null && cloneSource)) ? null : this.insertEdge(this.model.getParent(source), + (target == null && cloneSource)) ? null : this.insertEdge(source.getParent(), null, '', source, realTarget, this.createCurrentEdgeStyle()); // Inserts edge before source @@ -3201,7 +3201,7 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl while (tmp.parent != null && tmp.geometry != null && tmp.geometry.relative && tmp.parent != edge.parent) { - tmp = this.model.getParent(tmp); + tmp = tmp.getParent(); } if (tmp != null && tmp.parent != null && tmp.parent == edge.parent) @@ -3279,7 +3279,7 @@ Graph.prototype.getIndexableText = function() { let cell = this.model.cells[key]; - if (this.model.isVertex(cell) || this.model.isEdge(cell)) + if (cell.isVertex() || cell.isEdge()) { if (this.isHtmlLabel(cell)) { @@ -3308,7 +3308,7 @@ Graph.prototype.getIndexableText = function() */ Graph.prototype.convertValueToString = function(cell) { - let value = this.model.getValue(cell); + let value = cell.getValue(); if (value != null && typeof(value) == 'object') { @@ -3327,7 +3327,7 @@ Graph.prototype.convertValueToString = function(cell) current.getAttribute(name) : '') : null; } - current = this.model.getParent(current); + current = current.getParent(); } } else @@ -3396,9 +3396,9 @@ Graph.prototype.getCellStyle = function(cell) if (cell != null && this.layoutManager != null) { - let parent = this.model.getParent(cell); + let parent = cell.getParent(); - if (this.model.isVertex(parent) && this.isCellCollapsed(cell)) + if (parent.isVertex() && this.isCellCollapsed(cell)) { let layout = this.layoutManager.getLayout(parent); @@ -3419,7 +3419,7 @@ Graph.prototype.updateAlternateBounds = function(cell, geo, willCollapse) { if (cell != null && geo != null && this.layoutManager != null && geo.alternateBounds != null) { - let layout = this.layoutManager.getLayout(this.model.getParent(cell)); + let layout = this.layoutManager.getLayout(cell.getParent()); if (layout != null && layout.constructor == mxStackLayout) { @@ -3480,7 +3480,7 @@ Graph.prototype.foldCells = function(collapse, recurse, cells, checkFoldable, ev if (dy != 0 || dx != 0) { - let parent = this.model.getParent(cells[i]); + let parent = cells[i].getParent(); let layout = this.layoutManager.getLayout(parent); if (layout == null) @@ -3582,7 +3582,7 @@ Graph.prototype.resizeParentStacks = function(parent, layout, dx, dy) this.model.setGeometry(parent, pgeo); } - parent = this.model.getParent(parent); + parent = parent.getParent(); layout = this.layoutManager.getLayout(parent); } } @@ -4111,7 +4111,7 @@ HoverIcons.prototype.init = function() graphClick.apply(this.graph, arguments); if (this.currentState != null && !this.graph.isCellSelected(this.currentState.cell) && - mxEvent.isTouchEvent(me.getEvent()) && !this.graph.model.isVertex(me.getCell())) + mxEvent.isTouchEvent(me.getEvent()) && !me.getCell().isVertex()) { this.reset(); } @@ -4183,8 +4183,7 @@ HoverIcons.prototype.init = function() else if (this.isActive()) { // Selects target vertex after drag and clone if not only new edge was inserted - if (this.graph.getSelectionCount() != 1 || !this.graph.model.isEdge( - this.graph.getSelectionCell())) + if (this.graph.getSelectionCount() != 1 || !this.graph.getSelectionCell().isEdge()) { this.update(this.getState(this.graph.view.getState( this.graph.getCellAt(me.getGraphX(), me.getGraphY())))); @@ -4421,7 +4420,7 @@ HoverIcons.prototype.click = function(state, dir, me) let tmp = this.getStateAt(state, x, y); - if (tmp != null && this.graph.model.isEdge(tmp.cell) && !this.graph.isCloneEvent(evt) && + if (tmp != null && tmp.cell.isEdge() && !this.graph.isCloneEvent(evt) && (tmp.getVisibleTerminalState(true) == state || tmp.getVisibleTerminalState(false) == state)) { this.graph.setSelectionCell(tmp.cell); @@ -4480,7 +4479,7 @@ HoverIcons.prototype.repaint = function() // Cell was deleted if (this.currentState != null && - this.graph.model.isVertex(this.currentState.cell) && + this.currentState.cell.isVertex() && this.graph.isCellConnectable(this.currentState.cell)) { let bds = mxRectangle.fromRectangle(this.currentState); @@ -4499,7 +4498,7 @@ HoverIcons.prototype.repaint = function() if (this.graph.isTableRow(this.currentState.cell)) { handler = this.graph.selectionCellsHandler.getHandler( - this.graph.model.getParent(this.currentState.cell)); + this.currentState.cell.getParent()); } let rotationBbox = null; @@ -4588,7 +4587,7 @@ HoverIcons.prototype.repaint = function() let checkCollision = mxUtils.bind(this, function(cell, arrow) { - let geo = this.graph.model.isVertex(cell) && this.graph.getCellGeometry(cell); + let geo = cell.isVertex() && this.graph.getCellGeometry(cell); // Ignores collision if vertex is more than 3 times the size of this vertex if (cell != null && !this.graph.model.isAncestor(cell, this.currentState.cell) && @@ -4655,7 +4654,7 @@ HoverIcons.prototype.repaint = function() */ HoverIcons.prototype.computeBoundingBox = function() { - let bbox = (!this.graph.model.isEdge(this.currentState.cell)) ? mxRectangle.fromRectangle(this.currentState) : null; + let bbox = (!this.currentState.cell.isEdge()) ? mxRectangle.fromRectangle(this.currentState) : null; this.visitNodes(function(elt) { @@ -4693,18 +4692,18 @@ HoverIcons.prototype.getState = function(state) else { // Uses connectable parent vertex if child is not connectable - if (this.graph.getModel().isVertex(cell) && !this.graph.isCellConnectable(cell)) + if (cell.isVertex() && !this.graph.isCellConnectable(cell)) { - let parent = this.graph.getModel().getParent(cell); + let parent = this.cell.getParent(); - if (this.graph.getModel().isVertex(parent) && this.graph.isCellConnectable(parent)) + if (parent.isVertex() && this.graph.isCellConnectable(parent)) { cell = parent; } } // Ignores locked cells and edges - if (this.graph.isCellLocked(cell) || this.graph.model.isEdge(cell)) + if (this.graph.isCellLocked(cell) || cell.isEdge()) { cell = null; } @@ -4734,7 +4733,7 @@ HoverIcons.prototype.update = function(state, x, y) else { if (state != null && state.cell.geometry != null && state.cell.geometry.relative && - this.graph.model.isEdge(state.cell.parent)) + state.cell.parent.isEdge()) { state = null; } @@ -4945,7 +4944,7 @@ Graph.prototype.createCrossFunctionalSwimlane = function(rowCount, colCount, w, */ Graph.prototype.isTableCell = function(cell) { - return this.model.isVertex(cell) && this.isTableRow(this.model.getParent(cell)); + return cell.isVertex() && this.isTableRow(cell.getParent()); }; /** @@ -4953,7 +4952,7 @@ Graph.prototype.isTableCell = function(cell) */ Graph.prototype.isTableRow = function(cell) { - return this.model.isVertex(cell) && this.isTable(this.model.getParent(cell)); + return cell.isVertex() && this.isTable(cell.getParent()); }; /** @@ -4986,7 +4985,7 @@ Graph.prototype.setTableRowHeight = function(row, dy, extend) rgeo.height += dy; model.setGeometry(row, rgeo); - let table = model.getParent(row); + let table = row.getParent(); let rows = model.getChildCells(table, true); // Shifts and resizes neighbor row @@ -5049,8 +5048,8 @@ Graph.prototype.setTableColumnWidth = function(col, dx, extend) extend = (extend != null) ? extend : false; let model = this.getModel(); - let row = model.getParent(col); - let table = model.getParent(row); + let row = col.getParent(); + let table = row.getParent(); let cells = model.getChildCells(row, true); let index = mxUtils.indexOf(cells, col); let lastColumn = index == cells.length - 1; @@ -5151,7 +5150,7 @@ TableLayout.prototype.isHorizontal = function() */ TableLayout.prototype.isVertexIgnored = function(vertex) { - return !this.graph.getModel().isVertex(vertex) || + return !vertex.isVertex() || !this.graph.isCellVisible(vertex); }; @@ -5391,7 +5390,7 @@ TableLayout.prototype.execute = function(parent) let state = this.getState(cell); // Forces repaint if jumps change on a valid edge - if (state != null && recurse && this.graph.model.isEdge(state.cell) && + if (state != null && recurse && state.cell.isEdge() && state.style != null && state.style[mxConstants.STYLE_CURVED] != 1 && !state.invalid && this.updateLineJumps(state)) { @@ -5401,7 +5400,7 @@ TableLayout.prototype.execute = function(parent) state = mxGraphViewValidateCellState.apply(this, arguments); // Adds to the list of edges that may intersect with later edges - if (state != null && recurse && this.graph.model.isEdge(state.cell) && + if (state != null && recurse && state.cell.isEdge() && state.style != null && state.style[mxConstants.STYLE_CURVED] != 1) { // LATER: Reuse jumps for valid edges @@ -5431,7 +5430,7 @@ TableLayout.prototype.execute = function(parent) mxGraphViewUpdateCellState.apply(this, arguments); // Updates jumps on invalid edge before repaint - if (this.graph.model.isEdge(state.cell) && + if (state.cell.isEdge() && state.style[mxConstants.STYLE_CURVED] != 1) { this.updateLineJumps(state); @@ -6185,7 +6184,7 @@ if (typeof mxVertexHandler != 'undefined') { let style = this.graph.createCurrentEdgeStyle(); let edge = this.graph.createEdge(null, null, null, null, null, style); - let state = new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge)); + let state = new mxCell(this.graph.view, edge, this.graph.getCellStyle(edge)); for (var key in this.graph.currentEdgeStyle) { @@ -6309,7 +6308,7 @@ if (typeof mxVertexHandler != 'undefined') { for (let i = 0; i < cells.length; i++) { - if (this.model.isVertex(cells[i]) || this.model.isEdge(cells[i])) + if (cells[i].isVertex() || cells[i].isEdge()) { this.setCellStyles(key, null, [cells[i]]); let style = this.getCellStyle(cells[i]); @@ -6363,11 +6362,11 @@ if (typeof mxVertexHandler != 'undefined') { let cell = cells[i]; lookup[mxObjectIdentity.get(cell)] = cell.getId(); - let childCount = this.model.getChildCount(cell); + let childCount = cell.getChildCount(); for (let j = 0; j < childCount; j++) { - this.createCellLookup([this.model.getChildAt(cell, j)], lookup); + this.createCellLookup([cell.getChildAt(j)], lookup); } } @@ -6414,8 +6413,8 @@ if (typeof mxVertexHandler != 'undefined') // Clones cells to remove invalid edges let cloneMap = {}; let cellMapping = {}; - let layers = tempModel.getChildren(this.cloneCell(tempModel.root, - this.isCloneInvalidEdges(), cloneMap)); + let layers = this.cloneCell(tempModel.root, + this.isCloneInvalidEdges(), cloneMap).getChildren(); if (layers != null) { @@ -6431,7 +6430,7 @@ if (typeof mxVertexHandler != 'undefined') // Merges into unlocked current layer if one layer is pasted if (layers.length == 1 && !this.isCellLocked(this.getDefaultParent())) { - let children = tempModel.getChildren(layers[0]); + let children = layers[0].getChildren(); if (children != null) { @@ -6439,7 +6438,7 @@ if (typeof mxVertexHandler != 'undefined') dx, dy, false, this.getDefaultParent()); // Imported default parent maps to local default parent - cellMapping[tempModel.getChildAt(tempModel.root, 0).getId()] = + cellMapping[tempModel.root.getChildAt(0).getId()] = this.getDefaultParent().getId(); } } @@ -6447,8 +6446,8 @@ if (typeof mxVertexHandler != 'undefined') { for (let i = 0; i < layers.length; i++) { - let children = this.model.getChildren(this.moveCells( - [layers[i]], dx, dy, false, this.model.getRoot())[0]); + let children = this.moveCells( + [layers[i]], dx, dy, false, this.model.getRoot())[0].getChildren(); if (children != null) { @@ -6510,7 +6509,7 @@ if (typeof mxVertexHandler != 'undefined') let codec = new mxCodec(); let model = new mxGraphModel(); - let parent = model.getChildAt(model.getRoot(), 0); + let parent = model.getRoot().getChildAt(0); for (let i = 0; i < clones.length; i++) { @@ -6523,8 +6522,8 @@ if (typeof mxVertexHandler != 'undefined') { let geo = this.getCellGeometry(clones[i]); - if (geo != null && geo.relative && !this.model.isEdge(cells[i]) && - dict.get(this.model.getParent(cells[i])) == null) + if (geo != null && geo.relative && !cells[i].isEdge() && + dict.get(cells[i].getParent()) == null) { geo.offset = null; geo.relative = false; @@ -6545,8 +6544,8 @@ if (typeof mxVertexHandler != 'undefined') */ Graph.prototype.isSwimlane = function(cell, ignoreState) { - if (cell != null && this.model.getParent(cell) != this.model.getRoot() && - !this.model.isEdge(cell)) + if (cell != null && cell.getParent() != this.model.getRoot() && + !cell.isEdge()) { let shape = this.getCurrentCellStyle(cell, ignoreState) [mxConstants.STYLE_SHAPE]; @@ -6563,7 +6562,7 @@ if (typeof mxVertexHandler != 'undefined') let graphIsExtendParent = Graph.prototype.isExtendParent; Graph.prototype.isExtendParent = function(cell) { - let parent = this.model.getParent(cell); + let parent = cell.getParent(); if (parent != null) { @@ -6587,7 +6586,7 @@ if (typeof mxVertexHandler != 'undefined') { if (parent == null) { - parent = this.model.getParent(edge); + parent = edge.getParent(); if (this.isTable(parent) || this.isTableRow(parent)) { @@ -6618,8 +6617,8 @@ if (typeof mxVertexHandler != 'undefined') let flatten = mxUtils.bind(this, function(temp) { if (this.view.getState(temp) != null && - (this.model.isVertex(temp) || - this.model.isEdge(temp))) + (temp.isVertex() || + temp.isEdge())) { cells.push(temp); @@ -6635,9 +6634,9 @@ if (typeof mxVertexHandler != 'undefined') } } - for (let i = 0; i < this.model.getChildCount(temp); i++) + for (let i = 0; i < temp.getChildCount(); i++) { - flatten(this.model.getChildAt(temp, i)); + flatten(temp.getChildAt(i)); } }); @@ -6698,7 +6697,7 @@ if (typeof mxVertexHandler != 'undefined') { if (target != null && this.isTableRow(cells[i])) { - let parent = this.model.getParent(cells[i]); + let parent = cells[i].getParent(); let row = this.getCellGeometry(cells[i]); if (this.isTable(parent)) @@ -6792,7 +6791,7 @@ if (typeof mxVertexHandler != 'undefined') for (let i = 0; i < sourceTables.length; i++) { if (!clone && this.model.contains(sourceTables[i]) && - this.model.getChildCount(sourceTables[i]) == 0) + sourceTables[i].getChildCount() == 0) { this.model.remove(sourceTables[i]); } @@ -6828,12 +6827,12 @@ if (typeof mxVertexHandler != 'undefined') { if (this.isTableCell(cells[i])) { - let row = this.model.getParent(cells[i]); - let table = this.model.getParent(row); + let row = cells[i].getParent(); + let table = row.getParent(); // Removes table if one cell in one row left - if (this.model.getChildCount(row) == 1 && - this.model.getChildCount(table) == 1) + if (row.getChildCount() == 1 && + table.getChildCount() == 1) { if (mxUtils.indexOf(cells, table) < 0 && mxUtils.indexOf(result, table) < 0) @@ -6851,7 +6850,7 @@ if (typeof mxVertexHandler != 'undefined') // Deletes table if all rows are removed if (this.isTableRow(cells[i])) { - let table = this.model.getParent(cells[i]); + let table = cells[i].getParent(); if (mxUtils.indexOf(cells, table) < 0 && mxUtils.indexOf(result, table) < 0) @@ -7000,14 +6999,14 @@ if (typeof mxVertexHandler != 'undefined') Graph.prototype.isValidRoot = function(cell) { // Counts non-relative children - let childCount = this.model.getChildCount(cell); + let childCount = cell.getChildCount(); let realChildCount = 0; for (let i = 0; i < childCount; i++) { - let child = this.model.getChildAt(cell, i); + let child = cell.getChildAt(i); - if (this.model.isVertex(child)) + if (child.isVertex()) { let geometry = this.getCellGeometry(child); @@ -7063,7 +7062,7 @@ if (typeof mxVertexHandler != 'undefined') if (result && cell != null && this.layoutManager != null) { - let parent = this.model.getParent(cell); + let parent = cell.getParent(); if (parent != null) { @@ -7117,15 +7116,15 @@ if (typeof mxVertexHandler != 'undefined') { let cell = cells[i]; - if (model.isEdge(cell)) + if (cell.isEdge()) { - let src = model.getTerminal(cell, true); - let trg = model.getTerminal(cell, false); + let src = cell.getTerminal(true); + let trg = cell.getTerminal(false); model.setTerminal(cell, trg, true); model.setTerminal(cell, src, false); - let geo = model.getGeometry(cell); + let geo = cell.getGeometry(); if (geo != null) { @@ -7160,7 +7159,7 @@ if (typeof mxVertexHandler != 'undefined') select.push(cell); } } - else if (model.isVertex(cell)) + else if (cell.isVertex()) { let geo = this.getCellGeometry(cell); @@ -7245,12 +7244,12 @@ if (typeof mxVertexHandler != 'undefined') if (this.isTableCell(cell)) { - cell = this.model.getParent(cell); + cell = cell.getParent(); } if (this.isTableRow(cell)) { - cell = this.model.getParent(cell); + cell = cell.getParent(); } // Forces repaint of table with unchanged style and geometry @@ -7397,7 +7396,7 @@ if (typeof mxVertexHandler != 'undefined') break; } - current = this.model.getParent(current); + current = current.getParent(); } } @@ -7443,7 +7442,7 @@ if (typeof mxVertexHandler != 'undefined') for (let i = 0; i < cells.length; i++) { - let parent = this.model.getParent(cells[i]); + let parent = cells[i].getParent(); if (parent != null && !dict.get(parent)) { @@ -7456,16 +7455,16 @@ if (typeof mxVertexHandler != 'undefined') { let state = this.view.getState(parents[i]); - if (state != null && (this.model.isEdge(state.cell) || - this.model.isVertex(state.cell)) && + if (state != null && (state.cell.isEdge() || + state.cell.isVertex()) && this.isCellDeletable(state.cell) && this.isTransparentState(state)) { let allChildren = true; - for (let j = 0; j < this.model.getChildCount(state.cell) && allChildren; j++) + for (let j = 0; j < state.cell.getChildCount() && allChildren; j++) { - if (!dict.get(this.model.getChildAt(state.cell, j))) + if (!dict.get(state.cell.getChildAt(j))) { allChildren = false; } @@ -7588,7 +7587,7 @@ if (typeof mxVertexHandler != 'undefined') // Disables dragging edge labels out of edges for (let i = 0; i < cells.length; i++) { - if (this.model.isEdge(this.model.getParent(cells[i]))) + if (cells[i].getParent().isEdge()) { return null; } @@ -7608,12 +7607,12 @@ if (typeof mxVertexHandler != 'undefined') { if (this.isTableCell(target)) { - target = this.model.getParent(target); + target = target.getParent(); } if (this.isTableRow(target)) { - target = this.model.getParent(target); + target = target.getParent(); } if (!this.isTable(target)) @@ -7657,9 +7656,9 @@ if (typeof mxVertexHandler != 'undefined') let pt = mxUtils.convertPoint(this.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); // Automatically adds new child cells to edges on double click - if (evt != null && !this.model.isVertex(cell)) + if (evt != null && !cell.isVertex()) { - let state = (this.model.isEdge(cell)) ? this.view.getState(cell) : null; + let state = (cell.isEdge()) ? this.view.getState(cell) : null; let src = mxEvent.getSource(evt); if ((this.firstClickState == state && this.firstClickSource == src) && @@ -7768,7 +7767,7 @@ if (typeof mxVertexHandler != 'undefined') label.vertex = true; let style = 'html=1;align=center;verticalAlign=middle;resizable=0;points=[];'; - if (state != null && this.model.isEdge(state.cell)) + if (state != null && state.cell.isEdge()) { label.style = 'edgeLabel;' + style; label.geometry.relative = true; @@ -8063,7 +8062,7 @@ if (typeof mxVertexHandler != 'undefined') { if (this.isTableCell(cells[i])) { - cells[i] = this.model.getParent(cells[i]); + cells[i] = cells[i].getParent(); } } @@ -8080,7 +8079,7 @@ if (typeof mxVertexHandler != 'undefined') for (let i = 0; i < cells.length; i++) { - let parent = model.getParent(cells[i]); + let parent = cells[i].getParent(); let child = this.moveCells([clones[i]], s, s, false)[0]; select.push(child); @@ -8266,7 +8265,7 @@ if (typeof mxVertexHandler != 'undefined') for (let i = 0; i < cells.length; i++) { - if (this.getModel().isVertex(cells[i])) + if (cells[i].isVertex()) { let state = this.view.getState(cells[i]); @@ -8302,7 +8301,7 @@ if (typeof mxVertexHandler != 'undefined') for (let i = 1; i < vertices.length - 1; i++) { - let pstate = this.view.getState(this.model.getParent(vertices[i].cell)); + let pstate = this.view.getState(vertices[i].cell.getParent()); let geo = this.getCellGeometry(vertices[i].cell); t0 += dt; @@ -8559,13 +8558,13 @@ if (typeof mxVertexHandler != 'undefined') { let graph = state.view.graph; let selected = graph.isCellSelected(state.cell); - let parent = graph.model.getParent(state.cell); + let parent = state.cell.getParent(); // Checks if parent cell is selected while (!ignoreSelection && !selected && parent != null) { selected = graph.isCellSelected(parent); - parent = graph.model.getParent(parent); + parent = parent.getParent(); } if (ignoreSelection || selected) @@ -8815,7 +8814,7 @@ if (typeof mxVertexHandler != 'undefined') // Shrinks tables for (let i = 0; i < cells.length; i++) { - let parent = this.model.getParent(cells[i]); + let parent = cells[i].getParent(); if (this.isTable(parent)) { @@ -8847,8 +8846,8 @@ if (typeof mxVertexHandler != 'undefined') for (let i = 0; i < parents.length; i++) { if (this.model.contains(parents[i]) && - (this.model.isVertex(parents[i]) || - this.model.isEdge(parents[i]))) + (parents[i].isVertex() || + parents[i].isEdge())) { select.push(parents[i]); } @@ -8874,15 +8873,15 @@ if (typeof mxVertexHandler != 'undefined') if (this.isTableCell(cell)) { - let row = model.getParent(cell); - table = model.getParent(row); + let row = cell.getParent(); + table = row.getParent(); index = mxUtils.indexOf(model.getChildCells(row, true), cell); } else { if (this.isTableRow(cell)) { - table = model.getParent(cell); + table = cell.getParent(); } else { @@ -8950,12 +8949,12 @@ if (typeof mxVertexHandler != 'undefined') if (this.isTableCell(cell)) { - row = model.getParent(cell); - table = model.getParent(row); + row = cell.getParent(); + table = row.getParent(); } else if (this.isTableRow(cell)) { - table = model.getParent(cell); + table = cell.getParent(); } else { @@ -9020,12 +9019,12 @@ if (typeof mxVertexHandler != 'undefined') if (this.isTableCell(cell)) { - row = model.getParent(cell); + row = cell.getParent(); } if (this.isTableRow(row)) { - table = model.getParent(row); + table = row.getParent(); } let rows = model.getChildCells(table, true); @@ -9104,13 +9103,13 @@ if (typeof mxVertexHandler != 'undefined') if (this.isTableCell(cell)) { - row = model.getParent(cell); + row = cell.getParent(); cell = row; } if (this.isTableRow(cell)) { - table = model.getParent(row); + table = row.getParent(); } let rows = model.getChildCells(table, true); @@ -9617,11 +9616,11 @@ if (typeof mxVertexHandler != 'undefined') this.graph.setSelectionCell(cell); // Enables focus outline for edges and edge labels - let parent = this.graph.getModel().getParent(cell); + let parent = this.cell.getParent(); let geo = this.graph.getCellGeometry(cell); - if ((this.graph.getModel().isEdge(parent) && geo != null && geo.relative) || - this.graph.getModel().isEdge(cell)) + if ((parent.isEdge() && geo != null && geo.relative) || + cell.isEdge(cell)) { // FF on Windows uses outline default of none if (mxClient.IS_FF && mxClient.IS_WIN) @@ -10021,7 +10020,7 @@ if (typeof mxVertexHandler != 'undefined') mxCellEditorApplyValue.apply(this, arguments); if (value == '' && this.graph.isCellDeletable(state.cell) && - this.graph.model.getChildCount(state.cell) == 0 && + state.cell.getChildCount() == 0 && this.graph.isTransparentState(state)) { this.graph.removeCells([state.cell], false); @@ -10160,7 +10159,7 @@ if (typeof mxVertexHandler != 'undefined') if (style['childLayout'] == null) { - let parent = this.graph.model.getParent(cell); + let parent = cell.getParent(); let geo = (parent != null) ? this.graph.getCellGeometry(parent) : null; if (geo != null) @@ -10215,11 +10214,11 @@ if (typeof mxVertexHandler != 'undefined') if (this.graph.isTableCell(cell)) { - addCell(model.getParent(model.getParent(cell))); + addCell(model.getParent(cell.getParent())); } else if (this.graph.isTableRow(cell)) { - addCell(model.getParent(cell)); + addCell(cell.getParent()); } addCell(cell); @@ -10282,7 +10281,7 @@ if (typeof mxVertexHandler != 'undefined') */ mxVertexHandler.prototype.isCenteredEvent = function(state, me) { - return (!(!this.graph.isSwimlane(state.cell) && this.graph.model.getChildCount(state.cell) > 0 && + return (!(!this.graph.isSwimlane(state.cell) && state.cell.getChildCount() > 0 && !this.graph.isCellCollapsed(state.cell) && mxUtils.getValue(state.style, 'recursiveResize', '1') == '1' && mxUtils.getValue(state.style, 'childLayout', null) == null) && @@ -10309,7 +10308,7 @@ if (typeof mxVertexHandler != 'undefined') { if (this.graph.isTableCell(this.state.cell)) { - return this.graph.view.getState(this.graph.model.getParent(this.graph.model.getParent(this.state.cell))); + return this.graph.view.getState(this.state.cell.getParent().getParent()); } else { @@ -10591,11 +10590,11 @@ if (typeof mxVertexHandler != 'undefined') // Creates new handles this.moveHandles = []; - for (let i = 0; i < model.getChildCount(this.state.cell); i++) + for (let i = 0; i < this.state.cell.getChildCount(); i++) { (mxUtils.bind(this, function(rowState) { - if (rowState != null && model.isVertex(rowState.cell)) + if (rowState != null && rowState.cell.isVertex()) { // Adds handle to move row // LATER: Move to overlay pane to hide during zoom but keep padding @@ -10643,7 +10642,7 @@ if (typeof mxVertexHandler != 'undefined') this.graph.container.appendChild(moveHandle); } - }))(this.graph.view.getState(model.getChildAt(this.state.cell, i))); + }))(this.graph.view.getState(this.state.cell.getChildAt(i))); } }; @@ -11334,10 +11333,10 @@ if (typeof mxVertexHandler != 'undefined') if (cells != null && cells.length == 1) { let model = this.graph.getModel(); - let parent = model.getParent(cells[0]); + let parent = cells[0].getParent(); let geo = this.graph.getCellGeometry(cells[0]); - if (model.isEdge(parent) && geo != null && geo.relative) + if (parent.isEdge() && geo != null && geo.relative) { let state = this.graph.view.getState(cells[0]); @@ -11377,10 +11376,10 @@ if (typeof mxVertexHandler != 'undefined') mxVertexHandler.prototype.getSelectionBounds = function(state) { let model = this.graph.getModel(); - let parent = model.getParent(state.cell); + let parent = state.cell.getParent(); let geo = this.graph.getCellGeometry(state.cell); - if (model.isEdge(parent) && geo != null && geo.relative && state.width < 2 && state.height < 2 && state.text != null && state.text.boundingBox != null) + if (parent.isEdge() && geo != null && geo.relative && state.width < 2 && state.height < 2 && state.text != null && state.text.boundingBox != null) { let bbox = state.text.unrotatedBoundingBox || state.text.boundingBox; @@ -11398,13 +11397,13 @@ if (typeof mxVertexHandler != 'undefined') mxVertexHandler.prototype.mouseDown = function(sender, me) { let model = this.graph.getModel(); - let parent = model.getParent(this.state.cell); + let parent = this.state.cell.getParent(); let geo = this.graph.getCellGeometry(this.state.cell); // Lets rotation events through let handle = this.getHandleForEvent(me); - if (handle == mxEvent.ROTATION_HANDLE || !model.isEdge(parent) || geo == null || !geo.relative || + if (handle == mxEvent.ROTATION_HANDLE || !parent.isEdge() || geo == null || !geo.relative || this.state == null || this.state.width >= 2 || this.state.height >= 2) { mxVertexHandlerMouseDown.apply(this, arguments); @@ -11417,7 +11416,7 @@ if (typeof mxVertexHandler != 'undefined') let stroke = mxUtils.getValue(this.state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE); let fill = mxUtils.getValue(this.state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE); - if (this.state.view.graph.model.isVertex(this.state.cell) && + if (this.state.cell.isVertex() && stroke == mxConstants.NONE && fill == mxConstants.NONE) { let angle = mxUtils.mod(mxUtils.getValue(this.state.style, mxConstants.STYLE_ROTATION, 0) + 90, 360); diff --git a/docs/stashed/grapheditor/www/js/Menus.js b/docs/stashed/grapheditor/www/js/Menus.js index 9a7fe0dcb..9f3e579ed 100644 --- a/docs/stashed/grapheditor/www/js/Menus.js +++ b/docs/stashed/grapheditor/www/js/Menus.js @@ -253,9 +253,9 @@ Menus.prototype.init = function() let tmp = graph.getSelectionCell(); let roots = null; - if (tmp == null || graph.getModel().getChildCount(tmp) == 0) + if (tmp == null || tmp.getChildCount() == 0) { - if (graph.getModel().getEdgeCount(tmp) == 0) + if (tmp.getEdgeCount() == 0) { roots = graph.findTreeRoots(graph.getDefaultParent()); } @@ -292,9 +292,9 @@ Menus.prototype.init = function() let tmp = graph.getSelectionCell(); let roots = null; - if (tmp == null || graph.getModel().getChildCount(tmp) == 0) + if (tmp == null || tmp.getChildCount() == 0) { - if (graph.getModel().getEdgeCount(tmp) == 0) + if (tmp.getEdgeCount() == 0) { roots = graph.findTreeRoots(graph.getDefaultParent()); } @@ -331,9 +331,9 @@ Menus.prototype.init = function() let tmp = graph.getSelectionCell(); let roots = null; - if (tmp == null || graph.getModel().getChildCount(tmp) == 0) + if (tmp == null || tmp.getChildCount() == 0) { - if (graph.getModel().getEdgeCount(tmp) == 0) + if (tmp.getEdgeCount() == 0) { roots = graph.findTreeRoots(graph.getDefaultParent()); } @@ -364,9 +364,9 @@ Menus.prototype.init = function() if (!graph.isSelectionEmpty()) { - tmp = graph.getModel().getParent(tmp); + tmp = tmp.getParent(); - if (graph.getModel().isVertex(tmp)) + if (tmp.isVertex()) { graph.updateGroupBounds([tmp], graph.gridSize * 2, true); } @@ -388,14 +388,14 @@ Menus.prototype.init = function() { let tmp = graph.getSelectionCell(); - if (tmp == null || graph.getModel().getChildCount(tmp) == 0) + if (tmp == null || tmp.getChildCount() == 0) { tmp = graph.getDefaultParent(); } layout.execute(tmp); - if (graph.getModel().isVertex(tmp)) + if (tmp.isVertex()) { graph.updateGroupBounds([tmp], graph.gridSize * 2, true); } @@ -410,14 +410,14 @@ Menus.prototype.init = function() { let tmp = graph.getSelectionCell(); - if (tmp == null || graph.getModel().getChildCount(tmp) == 0) + if (tmp == null || tmp.getChildCount() == 0) { tmp = graph.getDefaultParent(); } layout.execute(tmp); - if (graph.getModel().isVertex(tmp)) + if (tmp.isVertex()) { graph.updateGroupBounds([tmp], graph.gridSize * 2, true); } @@ -787,7 +787,7 @@ Menus.prototype.edgeStyleChange = function(menu, label, keys, values, sprite, pa { let cell = cells[i]; - if (graph.getModel().isEdge(cell)) + if (cell.isEdge()) { if (reset) { @@ -877,7 +877,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values) { for (let j = 0; j < cells.length; j++) { - if (graph.model.getChildCount(cells[j]) == 0) + if (cells[j].getChildCount() == 0) { graph.autoSizeCell(cells[j], false); } @@ -1143,8 +1143,8 @@ Menus.prototype.addPopupMenuArrangeItems = function(menu, cell, evt) { this.addMenuItems(menu, ['-', 'group'], null, evt); } - else if (graph.getSelectionCount() == 1 && !graph.getModel().isEdge(cell) && - !graph.isSwimlane(cell) && graph.getModel().getChildCount(cell) > 0) + else if (graph.getSelectionCount() == 1 && !cell.isEdge() && + !graph.isSwimlane(cell) && cell.getChildCount() > 0) { this.addMenuItems(menu, ['-', 'ungroup'], null, evt); } @@ -1164,7 +1164,7 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt) { let hasWaypoints = false; - if (graph.getModel().isEdge(cell) && mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) != 'entityRelationEdgeStyle' && + if (cell.isEdge() && mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) != 'entityRelationEdgeStyle' && mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) != 'arrow') { let handler = graph.selectionCellsHandler.getHandler(cell); @@ -1188,12 +1188,12 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt) this.addMenuItems(menu, [(isWaypoint) ? 'removeWaypoint' : 'addWaypoint'], null, evt); // Adds reset waypoints option if waypoints exist - let geo = graph.getModel().getGeometry(cell); + let geo = cell.getGeometry(); hasWaypoints = geo != null && geo.points != null && geo.points.length > 0; } - if (graph.getSelectionCount() == 1 && (hasWaypoints || (graph.getModel().isVertex(cell) && - graph.getModel().getEdgeCount(cell) > 0))) + if (graph.getSelectionCount() == 1 && (hasWaypoints || (cell.isVertex() && + cell.getEdgeCount() > 0))) { this.addMenuItems(menu, ['-', 'clearWaypoints'], null, evt); } @@ -1203,7 +1203,7 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt) this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], null, evt); // Shows edit image action if there is an image in the style - if (graph.getModel().isVertex(cell) && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null) + if (cell.isVertex() && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null) { menu.addSeparator(); this.addMenuItem(menu, 'image', null, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...'; diff --git a/docs/stashed/grapheditor/www/js/Shapes.js b/docs/stashed/grapheditor/www/js/Shapes.js index 8f40e05af..dd0862519 100644 --- a/docs/stashed/grapheditor/www/js/Shapes.js +++ b/docs/stashed/grapheditor/www/js/Shapes.js @@ -4181,7 +4181,7 @@ if (graph.isTableRow(state.cell) || graph.isTableCell(state.cell)) { let dir = graph.getSwimlaneDirection(state.style); - let parent = graph.model.getParent(state.cell); + let parent = state.cell.getParent(); let cells = graph.model.getChildCells(parent, true); let temp = []; diff --git a/docs/stashed/grapheditor/www/js/Sidebar.js b/docs/stashed/grapheditor/www/js/Sidebar.js index 16b34420c..35cd41c4a 100644 --- a/docs/stashed/grapheditor/www/js/Sidebar.js +++ b/docs/stashed/grapheditor/www/js/Sidebar.js @@ -2607,7 +2607,7 @@ Sidebar.prototype.updateShapes = function(source, targets) graph.model.beginUpdate(); try { - let cellStyle = graph.getModel().getStyle(source); + let cellStyle = source.getStyle(); // Lists the styles to carry over from the existing shape let styles = ['shadow', 'dashed', 'dashPattern', 'fontFamily', 'fontSize', 'fontColor', 'align', 'startFill', @@ -2621,8 +2621,8 @@ Sidebar.prototype.updateShapes = function(source, targets) { let targetCell = targets[i]; - if ((graph.getModel().isVertex(targetCell) == graph.getModel().isVertex(source)) || - (graph.getModel().isEdge(targetCell) == graph.getModel().isEdge(source))) + if ((targetCell.isVertex() == source.isVertex()) || + (targetCell.isEdge() == source.isEdge())) { let style = graph.getCurrentCellStyle(targets[i]); graph.getModel().setStyle(targetCell, cellStyle); @@ -2630,11 +2630,11 @@ Sidebar.prototype.updateShapes = function(source, targets) // Removes all children of composite cells if (mxUtils.getValue(style, 'composite', '0') == '1') { - let childCount = graph.model.getChildCount(targetCell); + let childCount = targetCell.getChildCount(); for (let j = childCount; j >= 0; j--) { - graph.model.remove(graph.model.getChildAt(targetCell, j)); + graph.model.remove(targetCell.getChildAt(j)); } } @@ -2822,7 +2822,7 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell var geo2 = graph.getCellGeometry(targets[dropCellIndex]); // Handles special case where target should be ignored for stack layouts - let targetParent = graph.model.getParent(source); + let targetParent = source.getParent(); let validLayout = true; // Ignores parent if it has a stack layout or if it is a table or row @@ -2838,7 +2838,7 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell } // Checks if another container is at the drop location - let tmp = (graph.model.isEdge(source)) ? null : graph.view.getState(targetParent); + let tmp = (source.isEdge()) ? null : graph.view.getState(targetParent); let dx = 0; let dy = 0; @@ -2859,7 +2859,7 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell } let useParent = !graph.isTableRow(source) && !graph.isTableCell(source) && - (graph.model.isEdge(source) || (sourceGeo != null && + (source.isEdge() || (sourceGeo != null && !sourceGeo.relative && validLayout)); let tempTarget = graph.getCellAt((geo.x + dx + graph.view.translate.x) * graph.view.scale, @@ -2879,7 +2879,7 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell targetParent = tempTarget; useParent = true; - if (!graph.model.isEdge(source)) + if (!source.isEdge()) { geo.x -= offset.x - dx; geo.y -= offset.y - dy; @@ -2896,7 +2896,7 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell dy = geo2.y; // Ignores geometry of edges - if (graph.model.isEdge(targets[dropCellIndex])) + if (targets[dropCellIndex].isEdge()) { dx = 0; dy = 0; @@ -2906,14 +2906,14 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell (geo.y - (useParent ? dy : 0)), (useParent) ? targetParent : null); tmp = targets; - if (graph.model.isEdge(source)) + if (source.isEdge()) { // Adds new terminal to edge // LATER: Push new terminal out radially from edge start point graph.model.setTerminal(source, targets[dropCellIndex], direction == mxConstants.DIRECTION_NORTH); } - else if (graph.model.isEdge(targets[dropCellIndex])) + else if (targets[dropCellIndex].isEdge()) { // Adds new outgoing connection to vertex and clears points graph.model.setTerminal(targets[dropCellIndex], source, true); @@ -2924,7 +2924,7 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell { geo3.setTerminalPoint(geo.getTerminalPoint(false), false); } - else if (useParent && graph.model.isVertex(targetParent)) + else if (useParent && targetParent.isVertex()) { // Adds parent offset to other nodes let tmpState = graph.view.getState(targetParent); @@ -2991,7 +2991,7 @@ Sidebar.prototype.getDropAndConnectGeometry = function(source, target, direction { geo2 = geo2.clone(); - if (graph.model.isEdge(source)) + if (source.isEdge()) { let state = graph.view.getState(source); let pts = state.absolutePoints; @@ -3022,7 +3022,7 @@ Sidebar.prototype.getDropAndConnectGeometry = function(source, target, direction let length = graph.defaultEdgeLength; // Maintains edge length - if (graph.model.isEdge(target) && geo2.getTerminalPoint(true) != null && + if (target.isEdge() && geo2.getTerminalPoint(true) != null && geo2.getTerminalPoint(false) != null) { var p0 = geo2.getTerminalPoint(true); @@ -3094,7 +3094,7 @@ Sidebar.prototype.getDropAndConnectGeometry = function(source, target, direction } // Adds offset to match cells without connecting edge - if (graph.model.isEdge(target) && geo2.getTerminalPoint(true) != null && + if (target.isEdge() && geo2.getTerminalPoint(true) != null && target.getTerminal(false) != null) { let targetGeo = graph.getCellGeometry(target.getTerminal(false)); @@ -3174,12 +3174,12 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, for (let i = 0; i < cells.length; i++) { - if (firstVertex == null && graph.model.isVertex(cells[i])) + if (firstVertex == null && cells[i].isVertex()) { firstVertex = i; } - else if (freeSourceEdge == null && graph.model.isEdge(cells[i]) && - graph.model.getTerminal(cells[i], true) == null) + else if (freeSourceEdge == null && cells[i].isEdge() && + cells[i].getTerminal(true) == null) { freeSourceEdge = i; } @@ -3202,12 +3202,12 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, if (cells != null && currentStyleTarget != null && activeArrow == styleTarget) { let tmp = graph.isCellSelected(currentStyleTarget.cell) ? graph.getSelectionCells() : [currentStyleTarget.cell]; - let updatedCells = this.updateShapes((graph.model.isEdge(currentStyleTarget.cell)) ? cells[0] : cells[firstVertex], tmp); + let updatedCells = this.updateShapes((currentStyleTarget.cell.isEdge()) ? cells[0] : cells[firstVertex], tmp); graph.setSelectionCells(updatedCells); } else if (cells != null && activeArrow != null && currentTargetState != null && activeArrow != styleTarget) { - let index = (graph.model.isEdge(currentTargetState.cell) || freeSourceEdge == null) ? firstVertex : freeSourceEdge; + let index = (currentTargetState.cell.isEdge() || freeSourceEdge == null) ? firstVertex : freeSourceEdge; graph.setSelectionCells(this.dropAndConnect(currentTargetState.cell, cells, direction, index, evt)); } else @@ -3355,7 +3355,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, if (currentStyleTarget != null && activeArrow == styleTarget) { - this.previewElement.style.display = (graph.model.isEdge(currentStyleTarget.cell)) ? 'none' : ''; + this.previewElement.style.display = (currentStyleTarget.cell.isEdge()) ? 'none' : ''; this.previewElement.style.left = currentStyleTarget.x + 'px'; this.previewElement.style.top = currentStyleTarget.y + 'px'; @@ -3369,15 +3369,15 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, dragSource.currentHighlight.hide(); } - let index = (graph.model.isEdge(currentTargetState.cell) || freeSourceEdge == null) ? firstVertex : freeSourceEdge; + let index = (currentTargetState.cell.isEdge() || freeSourceEdge == null) ? firstVertex : freeSourceEdge; let geo = sidebar.getDropAndConnectGeometry(currentTargetState.cell, cells[index], direction, cells); - var geo2 = (!graph.model.isEdge(currentTargetState.cell)) ? graph.getCellGeometry(currentTargetState.cell) : null; + var geo2 = (!currentTargetState.cell.isEdge()) ? graph.getCellGeometry(currentTargetState.cell) : null; var geo3 = graph.getCellGeometry(cells[index]); - let parent = graph.model.getParent(currentTargetState.cell); + let parent = currentTargetState.cell.getParent(); let dx = view.translate.x * view.scale; let dy = view.translate.y * view.scale; - if (geo2 != null && !geo2.relative && graph.model.isVertex(parent) && parent != view.currentRoot) + if (geo2 != null && !geo2.relative && parent.isVertex() && parent != view.currentRoot) { let pState = view.getState(parent); @@ -3389,7 +3389,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, var dy2 = geo3.y; // Ignores geometry of edges - if (graph.model.isEdge(cells[index])) + if (cells[index].isEdge()) { dx2 = 0; dy2 = 0; @@ -3408,7 +3408,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, this.previewElement.style.display = ''; } else if (dragSource.currentHighlight.state != null && - graph.model.isEdge(dragSource.currentHighlight.state.cell)) + dragSource.currentHighlight.state.cell.isEdge()) { // Centers drop cells when splitting edges this.previewElement.style.left = Math.round(parseInt(this.previewElement.style.left) - @@ -3445,11 +3445,11 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, // Uses connectable parent vertex if one exists if (cell != null && !this.graph.isCellConnectable(cell) && - !this.graph.model.isEdge(cell)) + !cell.isEdge()) { - let parent = this.graph.getModel().getParent(cell); + let parent = this.cell.getParent(); - if (this.graph.getModel().isVertex(parent) && + if (parent.isVertex() && this.graph.isCellConnectable(parent)) { cell = parent; @@ -3503,12 +3503,12 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE || mxUtils.getValue(state.style, mxConstants.STYLE_GRADIENTCOLOR, mxConstants.NONE) != mxConstants.NONE)) || mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) == 'image') || - timeOnTarget > 1500 || graph.model.isEdge(state.cell)) && (timeOnTarget > this.dropTargetDelay) && - !this.isDropStyleTargetIgnored(state) && ((graph.model.isVertex(state.cell) && firstVertex != null) || - (graph.model.isEdge(state.cell) && graph.model.isEdge(cells[0])))) + timeOnTarget > 1500 || state.cell.isEdge()) && (timeOnTarget > this.dropTargetDelay) && + !this.isDropStyleTargetIgnored(state) && ((state.cell.isVertex() && firstVertex != null) || + (state.cell.isEdge() && cells[0].isEdge()))) { currentStyleTarget = state; - let tmp = (graph.model.isEdge(state.cell)) ? graph.view.getPoint(state) : + let tmp = (state.cell.isEdge()) ? graph.view.getPoint(state) : new mxPoint(state.getCenterX(), state.getCenterY()); tmp = new mxRectangle(tmp.x - this.refreshTarget.width / 2, tmp.y - this.refreshTarget.height / 2, this.refreshTarget.width, this.refreshTarget.height); @@ -3539,7 +3539,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, else if (currentStyleTarget != null && styleTargetParent != null) { // Sets active Arrow as side effect - let tmp = (graph.model.isEdge(currentStyleTarget.cell)) ? graph.view.getPoint(currentStyleTarget) : new mxPoint(currentStyleTarget.getCenterX(), currentStyleTarget.getCenterY()); + let tmp = (currentStyleTarget.cell.isEdge()) ? graph.view.getPoint(currentStyleTarget) : new mxPoint(currentStyleTarget.getCenterX(), currentStyleTarget.getCenterY()); tmp = new mxRectangle(tmp.x - this.refreshTarget.width / 2, tmp.y - this.refreshTarget.height / 2, this.refreshTarget.width, this.refreshTarget.height); checkArrow(x, y, tmp, styleTarget); @@ -3551,7 +3551,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, // LATER: Use hit-detection for edges bbox = mxRectangle.fromRectangle(currentTargetState); - if (graph.model.isEdge(currentTargetState.cell)) + if (currentTargetState.cell.isEdge()) { let pts = currentTargetState.absolutePoints; @@ -3642,8 +3642,8 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, } let validTarget = (firstVertex == null || graph.isCellConnectable(cells[firstVertex])) && - ((graph.model.isEdge(cell) && firstVertex != null) || - (graph.model.isVertex(cell) && graph.isCellConnectable(cell))); + ((cell.isEdge() && firstVertex != null) || + (cell.isVertex() && graph.isCellConnectable(cell))); // Drop arrows shown after this.dropTargetDelay, hidden after 5 secs, switches arrows after 500ms if ((currentTargetState != null && timeOnTarget >= 5000) || @@ -3653,7 +3653,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, { activeTarget = false; currentTargetState = ((timeOnTarget < 5000 && timeOnTarget > this.dropTargetDelay) || - graph.model.isEdge(cell)) ? state : null; + cell.isEdge()) ? state : null; if (currentTargetState != null && validTarget) { @@ -3667,7 +3667,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, } } - if (graph.model.isEdge(cell)) + if (cell.isEdge()) { let pts = state.absolutePoints; @@ -3684,12 +3684,12 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, roundTarget.style.left = Math.floor(pe.x - this.roundDrop.width / 2) + 'px'; roundTarget.style.top = Math.floor(pe.y - this.roundDrop.height / 2) + 'px'; - if (graph.model.getTerminal(cell, true) == null) + if (cell.getTerminal(true) == null) { graph.container.appendChild(roundSource); } - if (graph.model.getTerminal(cell, false) == null) + if (cell.getTerminal(false) == null) { graph.container.appendChild(roundTarget); } @@ -3793,15 +3793,15 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, { // Selects parent group as drop target while (target != null && !graph.isValidDropTarget(target, cells, evt) && - model.isVertex(model.getParent(target))) + target.getParent().isVertex()) { - target = model.getParent(target); + target = target.getParent(); } if (target != null && (graph.view.currentRoot == target || - (!graph.isValidRoot(target) && - graph.getModel().getChildCount(target) == 0) || - graph.isCellLocked(target) || model.isEdge(target) || + (!graph.isValidRoot(target) && + target.getChildCount() == 0) || + graph.isCellLocked(target) || target.isEdge() || !graph.isValidDropTarget(target, cells, evt))) { target = null; @@ -3851,13 +3851,13 @@ Sidebar.prototype.itemClicked = function(cells, ds, evt, elt) // Alt+Click inserts and connects if (mxEvent.isAltDown(evt) && graph.getSelectionCount() == 1 && - graph.model.isVertex(graph.getSelectionCell())) + graph.getSelectionCell().isVertex()) { let firstVertex = null; for (let i = 0; i < cells.length && firstVertex == null; i++) { - if (graph.model.isVertex(cells[i])) + if (cells[i].isVertex()) { firstVertex = i; } diff --git a/packages/core/src/atomic_changes/mxChildChange.js b/packages/core/src/atomic_changes/mxChildChange.js index 4dfa8b78b..cfe97ff93 100644 --- a/packages/core/src/atomic_changes/mxChildChange.js +++ b/packages/core/src/atomic_changes/mxChildChange.js @@ -27,7 +27,7 @@ class mxChildChange { // execute(): void; execute() { if (this.child != null) { - let tmp = this.model.getParent(this.child); + let tmp = this.child.getParent(); const tmp2 = tmp != null ? tmp.getIndex(this.child) : 0; if (this.previous == null) { @@ -84,10 +84,10 @@ class mxChildChange { cell.setTerminal(source, true); cell.setTerminal(target, false); - const childCount = this.model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.connect(this.model.getChildAt(cell, i), isConnect); + this.connect(cell.getChildAt(i), isConnect); } } } diff --git a/packages/core/src/view/graph/mxCurrentRootChange.ts b/packages/core/src/atomic_changes/mxCurrentRootChange.ts similarity index 80% rename from packages/core/src/view/graph/mxCurrentRootChange.ts rename to packages/core/src/atomic_changes/mxCurrentRootChange.ts index 430bf93ba..a03dbe39d 100644 --- a/packages/core/src/view/graph/mxCurrentRootChange.ts +++ b/packages/core/src/atomic_changes/mxCurrentRootChange.ts @@ -1,10 +1,10 @@ -import mxGraphView from './mxGraphView'; -import mxEventObject from '../../util/event/mxEventObject'; -import mxPoint from '../../util/datatypes/mxPoint'; -import mxCell from '../cell/mxCell'; -import mxEvent from '../../util/event/mxEvent'; -import mxGraphModel from './mxGraphModel'; -import mxGraph from "./mxGraph"; +import mxGraphView from '../view/graph/mxGraphView'; +import mxEventObject from '../util/event/mxEventObject'; +import mxPoint from '../util/datatypes/mxPoint'; +import mxCell from '../view/cell/mxCell'; +import mxEvent from '../util/event/mxEvent'; +import mxGraphModel from '../view/graph/mxGraphModel'; +import mxGraph from "../view/graph/mxGraph"; /** * Class: mxCurrentRootChange @@ -27,7 +27,7 @@ class mxCurrentRootChange { this.isUp = true; break; } - tmp = model.getParent(tmp); + tmp = tmp.getParent(); } } } diff --git a/packages/core/src/view/graph/mxSelectionChange.ts b/packages/core/src/atomic_changes/mxSelectionChange.ts similarity index 82% rename from packages/core/src/view/graph/mxSelectionChange.ts rename to packages/core/src/atomic_changes/mxSelectionChange.ts index 47f500217..5cc2af7ee 100644 --- a/packages/core/src/view/graph/mxSelectionChange.ts +++ b/packages/core/src/atomic_changes/mxSelectionChange.ts @@ -1,9 +1,9 @@ -import mxEventObject from '../../util/event/mxEventObject'; -import mxResources from '../../util/mxResources'; -import mxLog from '../../util/gui/mxLog'; -import mxEvent from '../../util/event/mxEvent'; -import mxGraphSelectionModel from './mxGraphSelectionModel'; -import mxCell from '../cell/mxCell'; +import mxEventObject from '../util/event/mxEventObject'; +import mxResources from '../util/mxResources'; +import mxLog from '../util/gui/mxLog'; +import mxEvent from '../util/event/mxEvent'; +import mxGraphSelectionModel from '../view/graph/mxGraphSelectionModel'; +import mxCell from '../view/cell/mxCell'; /** * @class mxSelectionChange diff --git a/packages/core/src/editor/mxDefaultPopupMenu.js b/packages/core/src/editor/mxDefaultPopupMenu.js index 025f719b9..5d9595429 100644 --- a/packages/core/src/editor/mxDefaultPopupMenu.js +++ b/packages/core/src/editor/mxDefaultPopupMenu.js @@ -267,14 +267,14 @@ class mxDefaultPopupMenu { createConditions(editor, cell, evt) { // Creates array with conditions const model = editor.graph.getModel(); - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); // Adds some frequently used conditions const conditions = []; conditions.nocell = cell == null; conditions.ncells = editor.graph.getSelectionCount() > 1; conditions.notRoot = - model.getRoot() !== model.getParent(editor.graph.getDefaultParent()); + model.getRoot() !== editor.graph.getDefaultParent().getParent(); conditions.cell = cell != null; const isCell = cell != null && editor.graph.getSelectionCount() === 1; diff --git a/packages/core/src/editor/mxDefaultToolbar.js b/packages/core/src/editor/mxDefaultToolbar.js index b11305f58..ac7fa0119 100644 --- a/packages/core/src/editor/mxDefaultToolbar.js +++ b/packages/core/src/editor/mxDefaultToolbar.js @@ -303,7 +303,7 @@ class mxDefaultToolbar { if ( target == null || - model.isEdge(target) || + target.isEdge() || !this.connectOnDrop || !graph.isCellConnectable(target) ) { @@ -311,7 +311,7 @@ class mxDefaultToolbar { target != null && !graph.isValidDropTarget(target, [vertex], evt) ) { - target = model.getParent(target); + target = target.getParent(); } this.insert(vertex, evt, target); } else { @@ -370,8 +370,8 @@ class mxDefaultToolbar { model.beginUpdate(); try { - const geo = model.getGeometry(source); - const g = model.getGeometry(vertex).clone(); + const geo = source.getGeometry(); + const g = vertex.getGeometry().clone(); // Moves the vertex away from the drop target that will // be used as the source for the new connection @@ -391,7 +391,7 @@ class mxDefaultToolbar { // Fires two add-events with the code below - should be fixed // to only fire one add event for both inserts - const parent = model.getParent(source); + const parent = source.getParent(); graph.addCell(vertex, parent); graph.constrainChild(vertex); @@ -399,7 +399,7 @@ class mxDefaultToolbar { // the second function that fires an add event edge = this.editor.createEdge(source, vertex); - if (model.getGeometry(edge) == null) { + if (edge.getGeometry() == null) { const edgeGeometry = new mxGeometry(); edgeGeometry.relative = true; diff --git a/packages/core/src/editor/mxEditor.js b/packages/core/src/editor/mxEditor.js index 87dd153d4..03ad66a93 100644 --- a/packages/core/src/editor/mxEditor.js +++ b/packages/core/src/editor/mxEditor.js @@ -1555,7 +1555,7 @@ class mxEditor extends mxEventSource { let layout = null; const model = self.graph.getModel(); - if (model.getParent(cell) != null) { + if (cell.getParent() != null) { // Executes the swimlane layout if a child of // a swimlane has been changed. The layout is // lazy created in createSwimlaneLayout. @@ -1573,7 +1573,7 @@ class mxEditor extends mxEventSource { else if ( self.layoutDiagram && (graph.isValidRoot(cell) || - model.getParent(model.getParent(cell)) == null) + cell.getParent().getParent() == null) ) { if (self.diagramLayout == null) { self.diagramLayout = self.createDiagramLayout(); @@ -1892,14 +1892,14 @@ class mxEditor extends mxEventSource { while ( cell != null && - graph.getModel().getParent(graph.getModel().getParent(cell)) != null + cell.getParent().getParent() != null ) { // Append each label of a valid root if (graph.isValidRoot(cell)) { title = ` > ${graph.convertValueToString(cell)}${title}`; } - cell = graph.getModel().getParent(cell); + cell = cell.getParent(); } const prefix = this.getRootTitle(); @@ -2249,8 +2249,8 @@ class mxEditor extends mxEventSource { let heightField = null; // Adds fields for the location and size - if (model.isVertex(cell)) { - geo = model.getGeometry(cell); + if (cell.isVertex()) { + geo = cell.getGeometry(); if (geo != null) { yField = form.addText('top', geo.y); @@ -2261,7 +2261,7 @@ class mxEditor extends mxEventSource { } // Adds a field for the cell style - const tmp = model.getStyle(cell); + const tmp = cell.getStyle(); const style = form.addText('Style', tmp || ''); // Creates textareas for each attribute of the @@ -2690,8 +2690,8 @@ class mxEditor extends mxEventSource { parent = parent != null ? parent : this.graph.getSwimlaneAt(x, y); const { scale } = this.graph.getView(); - let geo = model.getGeometry(vertex); - const pgeo = model.getGeometry(parent); + let geo = vertex.getGeometry(); + const pgeo = parent.getGeometry(); if (this.graph.isSwimlane(vertex) && !this.graph.swimlaneNesting) { parent = null; diff --git a/packages/core/src/handler/mxConnectionHandler.js b/packages/core/src/handler/mxConnectionHandler.js index 7dd4a42ff..ace64b9f5 100644 --- a/packages/core/src/handler/mxConnectionHandler.js +++ b/packages/core/src/handler/mxConnectionHandler.js @@ -597,10 +597,10 @@ class mxConnectionHandler extends mxEventSource { // Uses connectable parent vertex if one exists if (cell != null && !self.graph.isCellConnectable(cell)) { - const parent = self.graph.getModel().getParent(cell); + const parent = self.cell.getParent(); if ( - self.graph.getModel().isVertex(parent) && + parent.isVertex() && self.graph.isCellConnectable(parent) ) { cell = parent; @@ -2008,12 +2008,12 @@ class mxConnectionHandler extends mxEventSource { // FIXME: Should not shift if vertex was aligned (same in Java) if ( dropTarget == null || - !this.graph.getModel().isEdge(dropTarget) + !dropTarget.isEdge() ) { const pstate = this.graph.getView().getState(dropTarget); if (pstate != null) { - const tmp = model.getGeometry(target); + const tmp = target.getGeometry(); tmp.x -= pstate.origin.x; tmp.y -= pstate.origin.y; } @@ -2030,10 +2030,10 @@ class mxConnectionHandler extends mxEventSource { if ( source != null && target != null && - model.getParent(source) === model.getParent(target) && - model.getParent(model.getParent(source)) !== model.getRoot() + source.getParent() === target.getParent() && + source.getParent().getParent() !== model.getRoot() ) { - parent = model.getParent(source); + parent = source.getParent(); if ( source.geometry != null && @@ -2041,7 +2041,7 @@ class mxConnectionHandler extends mxEventSource { target.geometry != null && target.geometry.relative ) { - parent = model.getParent(parent); + parent = parent.getParent(); } } @@ -2077,7 +2077,7 @@ class mxConnectionHandler extends mxEventSource { model.setGeometry(edge, this.edgeState.cell.geometry); } - parent = model.getParent(source); + parent = source.getParent(); // Inserts edge before source if (this.isInsertBefore(edge, source, target, evt, dropTarget)) { @@ -2090,7 +2090,7 @@ class mxConnectionHandler extends mxEventSource { tmp.geometry.relative && tmp.parent !== edge.parent ) { - tmp = this.graph.model.getParent(tmp); + tmp = tmp.getParent(); } if ( @@ -2103,7 +2103,7 @@ class mxConnectionHandler extends mxEventSource { } // Makes sure the edge has a non-null, relative geometry - let geo = model.getGeometry(edge); + let geo = edge.getGeometry(); if (geo == null) { geo = new mxGeometry(); @@ -2218,12 +2218,12 @@ class mxConnectionHandler extends mxEventSource { let geo = this.graph.getCellGeometry(source); while (geo != null && geo.relative) { - source = this.graph.getModel().getParent(source); + source = source.getParent(); geo = this.graph.getCellGeometry(source); } const clone = this.graph.cloneCell(source); - geo = this.graph.getModel().getGeometry(clone); + geo = clone.getGeometry(); if (geo != null) { const t = this.graph.view.translate; diff --git a/packages/core/src/handler/mxConstraintHandler.js b/packages/core/src/handler/mxConstraintHandler.js index 09e6c758f..42bcd6373 100644 --- a/packages/core/src/handler/mxConstraintHandler.js +++ b/packages/core/src/handler/mxConstraintHandler.js @@ -206,10 +206,10 @@ class mxConstraintHandler { // Uses connectable parent vertex if one exists if (cell != null && !this.graph.isCellConnectable(cell)) { - const parent = this.graph.getModel().getParent(cell); + const parent = this.cell.getParent(); if ( - this.graph.getModel().isVertex(parent) && + parent.isVertex() && this.graph.isCellConnectable(parent) ) { cell = parent; @@ -257,7 +257,7 @@ class mxConstraintHandler { (this.currentFocusArea == null || this.currentFocus == null || state != null || - !this.graph.getModel().isVertex(this.currentFocus.cell) || + !this.currentFocus.cell.isVertex() || !mxUtils.intersects(this.currentFocusArea, mouse)) && state !== this.currentFocus ) { diff --git a/packages/core/src/handler/mxEdgeHandler.js b/packages/core/src/handler/mxEdgeHandler.js index d0ccf6b8b..8c5f2f88d 100644 --- a/packages/core/src/handler/mxEdgeHandler.js +++ b/packages/core/src/handler/mxEdgeHandler.js @@ -273,7 +273,7 @@ class mxEdgeHandler { */ isParentHighlightVisible() { return !this.graph.isCellSelected( - this.graph.model.getParent(this.state.cell) + this.state.cell.getParent() ); } @@ -285,11 +285,11 @@ class mxEdgeHandler { updateParentHighlight() { if (!this.isDestroyed()) { const visible = this.isParentHighlightVisible(); - const parent = this.graph.model.getParent(this.state.cell); + const parent = this.state.cell.getParent(); const pstate = this.graph.view.getState(parent); if (this.parentHighlight != null) { - if (this.graph.model.isVertex(parent) && visible) { + if (parent.isVertex() && visible) { const b = this.parentHighlight.bounds; if ( @@ -315,7 +315,7 @@ class mxEdgeHandler { } } else if (this.parentHighlightEnabled && visible) { if ( - this.graph.model.isVertex(parent) && + parent.isVertex() && pstate != null && pstate.parentHighlight == null ) { @@ -602,10 +602,10 @@ class mxEdgeHandler { // Uses connectable parent vertex if one exists if (cell != null && !this.graph.isCellConnectable(cell)) { - const parent = this.graph.getModel().getParent(cell); + const parent = this.cell.getParent(); if ( - this.graph.getModel().isVertex(parent) && + parent.isVertex() && this.graph.isCellConnectable(parent) ) { cell = parent; @@ -626,7 +626,7 @@ class mxEdgeHandler { cell === self.state.cell || (cell != null && !self.graph.connectableEdges && - model.isEdge(cell)) || + cell.isEdge()) || model.isAncestor(self.state.cell, cell) ) { cell = null; @@ -644,7 +644,7 @@ class mxEdgeHandler { const other = self.graph.view.getTerminalPort( state, self.graph.view.getState( - model.getTerminal(self.state.cell, !self.isSource) + self.state.cell.getTerminal(!self.isSource) ), !self.isSource ); @@ -1052,7 +1052,7 @@ class mxEdgeHandler { if (this.isSource || this.isTarget) { const { cell } = this.state; - const terminal = this.graph.model.getTerminal(cell, this.isSource); + const terminal = cell.getTerminal(this.isSource); if ( (terminal == null && @@ -1252,7 +1252,7 @@ class mxEdgeHandler { const other = this.graph.view.getTerminalPort( this.state, this.graph.view.getState( - model.getTerminal(this.state.cell, !this.isSource) + this.state.cell.getTerminal(!this.isSource) ), !this.isSource ); @@ -1784,22 +1784,22 @@ class mxEdgeHandler { if (terminal != null) { const model = this.graph.getModel(); - const parent = model.getParent(edge); + const parent = edge.getParent(); model.beginUpdate(); try { // Clones and adds the cell if (clone) { - let geo = model.getGeometry(edge); + let geo = edge.getGeometry(); clone = this.graph.cloneCell(edge); - model.add(parent, clone, model.getChildCount(parent)); + model.add(parent, clone, parent.getChildCount()); if (geo != null) { geo = geo.clone(); model.setGeometry(clone, geo); } - const other = model.getTerminal(edge, !this.isSource); + const other = edge.getTerminal(!this.isSource); this.graph.connectCell(clone, other, !this.isSource); edge = clone; @@ -1822,7 +1822,7 @@ class mxEdgeHandler { const pstate = this.graph .getView() - .getState(this.graph.getModel().getParent(edge)); + .getState(edge.getParent()); if (pstate != null) { pt.x -= pstate.origin.x; @@ -1947,7 +1947,7 @@ class mxEdgeHandler { const pstate = this.graph .getView() - .getState(this.graph.getModel().getParent(this.state.cell)); + .getState(this.state.cell.getParent()); if (pstate != null) { point.x -= pstate.origin.x; @@ -1971,7 +1971,7 @@ class mxEdgeHandler { // moveLabel(edgeState: mxCellState, x: number, y: number): void; moveLabel(edgeState, x, y) { const model = this.graph.getModel(); - let geometry = model.getGeometry(edgeState.cell); + let geometry = edgeState.cell.getGeometry(); if (geometry != null) { const { scale } = this.graph.getView(); @@ -2032,7 +2032,7 @@ class mxEdgeHandler { // connect(edge: mxCell, terminal: mxCell, isSource: boolean, isClone: boolean, me: mxMouseEvent): mxCell; connect(edge, terminal, isSource, isClone, me) { const model = this.graph.getModel(); - const parent = model.getParent(edge); + const parent = edge.getParent(); model.beginUpdate(); try { @@ -2062,14 +2062,14 @@ class mxEdgeHandler { model.beginUpdate(); try { if (clone) { - const parent = model.getParent(edge); - const terminal = model.getTerminal(edge, !isSource); + const parent = edge.getParent(); + const terminal = edge.getTerminal(!isSource); edge = this.graph.cloneCell(edge); - model.add(parent, edge, model.getChildCount(parent)); + model.add(parent, edge, parent.getChildCount()); model.setTerminal(edge, terminal, !isSource); } - let geo = model.getGeometry(edge); + let geo = edge.getGeometry(); if (geo != null) { geo = geo.clone(); @@ -2100,16 +2100,16 @@ class mxEdgeHandler { model.beginUpdate(); try { if (clone) { - const parent = model.getParent(edge); - const source = model.getTerminal(edge, true); - const target = model.getTerminal(edge, false); + const parent = edge.getParent(); + const source = edge.getTerminal(true); + const target = edge.getTerminal(false); edge = this.graph.cloneCell(edge); - model.add(parent, edge, model.getChildCount(parent)); + model.add(parent, edge, parent.getChildCount()); model.setTerminal(edge, source, true); model.setTerminal(edge, target, false); } - let geo = model.getGeometry(edge); + let geo = edge.getGeometry(); if (geo != null) { geo = geo.clone(); @@ -2158,9 +2158,9 @@ class mxEdgeHandler { const s = this.graph.view.scale; let offset = new mxPoint(t.x * s, t.y * s); - const parent = this.graph.model.getParent(this.state.cell); + const parent = this.state.cell.getParent(); - if (this.graph.model.isVertex(parent)) { + if (parent.isVertex()) { const pState = this.graph.view.getState(parent); offset = new mxPoint(pState.x, pState.y); } @@ -2212,7 +2212,7 @@ class mxEdgeHandler { getHandleFillColor(index) { const isSource = index === 0; const { cell } = this.state; - const terminal = this.graph.getModel().getTerminal(cell, isSource); + const terminal = cell.getTerminal(isSource); let color = mxConstants.HANDLE_FILLCOLOR; if ( @@ -2240,7 +2240,7 @@ class mxEdgeHandler { redraw(ignoreHandles) { if (this.state != null) { this.abspoints = this.state.absolutePoints.slice(); - const g = this.graph.getModel().getGeometry(this.state.cell); + const g = this.state.cell.getGeometry(); if (g != null) { const pts = g.points; @@ -2636,7 +2636,7 @@ class mxEdgeHandler { } if (this.parentHighlight != null) { - const parent = this.graph.model.getParent(this.state.cell); + const parent = this.state.cell.getParent(); const pstate = this.graph.view.getState(parent); if (pstate != null && pstate.parentHighlight === this.parentHighlight) { diff --git a/packages/core/src/handler/mxEdgeSegmentHandler.js b/packages/core/src/handler/mxEdgeSegmentHandler.js index e6aa07ba8..f6a682e05 100644 --- a/packages/core/src/handler/mxEdgeSegmentHandler.js +++ b/packages/core/src/handler/mxEdgeSegmentHandler.js @@ -215,7 +215,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler { // connect(edge: mxCell, terminal: mxCell, isSource: boolean, isClone: boolean, me: mxMouseEvent): mxCell; connect(edge, terminal, isSource, isClone, me) { const model = this.graph.getModel(); - let geo = model.getGeometry(edge); + let geo = edge.getGeometry(); let result = null; // Merges adjacent edge segments @@ -245,7 +245,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler { model.beginUpdate(); try { if (result != null) { - geo = model.getGeometry(edge); + geo = edge.getGeometry(); if (geo != null) { geo = geo.clone(); diff --git a/packages/core/src/handler/mxElbowEdgeHandler.js b/packages/core/src/handler/mxElbowEdgeHandler.js index 7b1d22936..ba80e5a2a 100644 --- a/packages/core/src/handler/mxElbowEdgeHandler.js +++ b/packages/core/src/handler/mxElbowEdgeHandler.js @@ -192,7 +192,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler { */ // redrawInnerBends(p0: mxPoint, pe: mxPoint): void; redrawInnerBends(p0, pe) { - const g = this.graph.getModel().getGeometry(this.state.cell); + const g = this.state.cell.getGeometry(); const pts = this.state.absolutePoints; let pt = null; diff --git a/packages/core/src/handler/mxGraphHandler.js b/packages/core/src/handler/mxGraphHandler.js index 760d46799..b1e4bca37 100644 --- a/packages/core/src/handler/mxGraphHandler.js +++ b/packages/core/src/handler/mxGraphHandler.js @@ -458,10 +458,10 @@ class mxGraphHandler { * selection state to the parent. */ isPropagateSelectionCell(cell, immediate, me) { - const parent = this.graph.model.getParent(cell); + const parent = cell.getParent(); if (immediate) { - const geo = this.graph.model.isEdge(cell) + const geo = cell.isEdge() ? null : this.graph.getCellGeometry(cell); @@ -497,17 +497,17 @@ class mxGraphHandler { !this.graph.isCellSelected(state.cell) ) { const { model } = this.graph; - let next = this.graph.view.getState(model.getParent(state.cell)); + let next = this.graph.view.getState(state.cell.getParent()); while ( next != null && !this.graph.isCellSelected(next.cell) && - (model.isVertex(next.cell) || model.isEdge(next.cell)) && + (next.cell.isVertex() || next.cell.isEdge()) && this.isPropagateSelectionCell(state.cell, true, me) ) { state = next; next = this.graph.view.getState( - this.graph.getModel().getParent(state.cell) + state.cell.getParent() ); } } @@ -531,7 +531,7 @@ class mxGraphHandler { return this.graph.cellEditor.getEditingCell() != cell; } - cell = this.graph.model.getParent(cell); + cell = cell.getParent(); } } @@ -576,15 +576,15 @@ class mxGraphHandler { !isAltDown(me.getEvent()) ) { const model = this.graph.getModel(); - let parent = model.getParent(cell); + let parent = cell.getParent(); while ( this.graph.view.getState(parent) != null && - (model.isVertex(parent) || model.isEdge(parent)) && + (parent.isVertex() || parent.isEdge()) && this.isPropagateSelectionCell(cell, false, me) ) { cell = parent; - parent = model.getParent(cell); + parent = cell.getParent(); } } @@ -645,15 +645,15 @@ class mxGraphHandler { if (this.isMoveEnabled()) { const { model } = this.graph; - const geo = model.getGeometry(cell); + const geo = cell.getGeometry(); if ( this.graph.isCellMovable(cell) && - (!model.isEdge(cell) || + (!cell.isEdge() || this.graph.getSelectionCount() > 1 || (geo.points != null && geo.points.length > 0) || - model.getTerminal(cell, true) == null || - model.getTerminal(cell, false) == null || + cell.getTerminal(true) == null || + cell.getTerminal(false) == null || this.graph.allowDanglingEdges || (this.graph.isCloneEvent(me.getEvent()) && this.graph.isCellsCloneable())) @@ -682,9 +682,9 @@ class mxGraphHandler { const filter = mxUtils.bind(this, cell => { return ( this.graph.view.getState(cell) != null && - model.isVertex(cell) && - model.getGeometry(cell) != null && - !model.getGeometry(cell).relative + cell.isVertex() && + cell.getGeometry() != null && + !cell.getGeometry().relative ); }); @@ -774,14 +774,14 @@ class mxGraphHandler { const model = this.graph.getModel(); for (let i = 0; i < cells.length; i += 1) { - if (model.isVertex(cells[i]) || model.isEdge(cells[i])) { + if (cells[i].isVertex() || cells[i].isEdge()) { const state = this.graph.view.getState(cells[i]); if (state != null) { let bbox = state; if ( - model.isVertex(cells[i]) && + cells[i].isVertex() && state.shape != null && state.shape.boundingBox != null ) { @@ -859,8 +859,8 @@ class mxGraphHandler { if (this.guidesEnabled) { this.guide = this.createGuide(); - const parent = this.graph.model.getParent(cell); - const ignore = this.graph.model.getChildCount(parent) < 2; + const parent = cell.getParent(); + const ignore = parent.getChildCount() < 2; // Uses connected states as guides const connected = new mxDictionary(); @@ -878,7 +878,7 @@ class mxGraphHandler { } this.guide.isStateIgnored = state => { - const p = this.graph.model.getParent(state.cell); + const p = state.cell.getParent(); return ( state.cell != null && @@ -887,7 +887,7 @@ class mxGraphHandler { !ignore && !connected.get(state) && (this.target == null || - this.graph.model.getChildCount(this.target) >= 2) && + this.target.getChildCount() >= 2) && p !== (this.target || parent))) ); }; @@ -908,10 +908,10 @@ class mxGraphHandler { dict.put(cell, state); count++; - const childCount = this.graph.model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - count += this.addStates(this.graph.model.getChildAt(cell, i), dict); + count += this.addStates(cell.getChildAt(i), dict); } } @@ -1008,7 +1008,7 @@ class mxGraphHandler { * Returns true if the given cell is a valid drop target. */ isValidDropTarget(target, me) { - return this.graph.model.getParent(this.cell) !== target; + return this.cell.getParent() !== target; } /** @@ -1108,7 +1108,7 @@ class mxGraphHandler { this.connectOnDrop && cell != null && this.cells.length === 1 && - graph.getModel().isVertex(cell) && + cell.isVertex() && graph.isCellConnectable(cell) ) { state = graph.getView().getState(cell); @@ -1187,7 +1187,7 @@ class mxGraphHandler { graph.isEnabled() && graph.isCellMovable(me.getCell()) ) { - if (graph.getModel().isEdge(me.getCell())) { + if (me.getCell().isEdge()) { cursor = mxConstants.CURSOR_MOVABLE_EDGE; } else { cursor = mxConstants.CURSOR_MOVABLE_VERTEX; @@ -1289,7 +1289,7 @@ class mxGraphHandler { } // Temporarily changes position - if (this.graph.model.isVertex(state.cell)) { + if (state.cell.isVertex()) { state.x += dx; state.y += dy; @@ -1338,7 +1338,7 @@ class mxGraphHandler { for (let i = 0; i < states.length; i += 1) { const state = states[i][0]; - if (this.graph.model.isEdge(state.cell)) { + if (state.cell.isEdge()) { const geometry = this.graph.getCellGeometry(state.cell); const points = []; @@ -1602,7 +1602,7 @@ class mxGraphHandler { this.connectOnDrop && this.target == null && cell != null && - graph.getModel().isVertex(cell) && + cell.isVertex() && graph.isCellConnectable(cell) && graph.isEdgeValid(null, this.cell, cell) ) { @@ -1702,7 +1702,7 @@ class mxGraphHandler { */ // shouldRemoveCellsFromParent(parent: mxCell, cells: mxCell[], evt: Event): boolean; shouldRemoveCellsFromParent(parent, cells, evt) { - if (this.graph.getModel().isVertex(parent)) { + if (parent.isVertex()) { const pState = this.graph.getView().getState(parent); if (pState != null) { @@ -1741,7 +1741,7 @@ class mxGraphHandler { } // Removes cells from parent - const parent = this.graph.getModel().getParent(this.cell); + const parent = this.cell.getParent(); if ( target == null && @@ -1771,7 +1771,7 @@ class mxGraphHandler { // LATER: Recurse up the cell hierarchy for (let i = 0; i < cells.length; i += 1) { - const par = this.graph.model.getParent(cells[i]); + const par = cells[i].getParent(); if (par != null && !dict.get(par)) { dict.put(par, true); @@ -1818,10 +1818,10 @@ class mxGraphHandler { return ( state != null && - (this.graph.model.isEdge(state.cell) || - this.graph.model.isVertex(state.cell)) && + (state.cell.isEdge() || + state.cell.isVertex()) && this.graph.isCellDeletable(state.cell) && - this.graph.model.getChildCount(state.cell) === 0 && + state.cell.getChildCount() === 0 && this.graph.isTransparentState(state) ); } diff --git a/packages/core/src/handler/mxVertexHandler.js b/packages/core/src/handler/mxVertexHandler.js index 8ad6a5b41..9b73b07d4 100644 --- a/packages/core/src/handler/mxVertexHandler.js +++ b/packages/core/src/handler/mxVertexHandler.js @@ -277,7 +277,7 @@ class mxVertexHandler { this.sizers.push(this.createSizer('se-resize', i++)); } - const geo = this.graph.model.getGeometry(this.state.cell); + const geo = this.state.cell.getGeometry(); if ( geo != null && @@ -720,7 +720,7 @@ class mxVertexHandler { if (this.selectionBorder != null) { this.livePreviewActive = this.livePreview && - this.graph.model.getChildCount(this.state.cell) === 0; + this.state.cell.getChildCount() === 0; this.inTolerance = true; this.childOffsetX = 0; this.childOffsetY = 0; @@ -733,11 +733,11 @@ class mxVertexHandler { } else { // Saves reference to parent state const { model } = this.state.view.graph; - const parent = model.getParent(this.state.cell); + const parent = this.state.cell.getParent(); if ( this.state.view.currentRoot !== parent && - (model.isVertex(parent) || model.isEdge(parent)) + (parent.isVertex() || parent.isEdge()) ) { this.parentState = this.state.view.graph.view.getState(parent); } @@ -989,7 +989,7 @@ class mxVertexHandler { * Returns true if a ghost preview should be used for custom handles. */ isGhostPreview() { - return this.state.view.graph.model.getChildCount(this.state.cell) > 0; + return this.state.cell.getChildCount() > 0; } /** @@ -1466,8 +1466,8 @@ class mxVertexHandler { if (angle !== 0) { const model = this.graph.getModel(); - if (model.isVertex(cell) || model.isEdge(cell)) { - if (!model.isEdge(cell)) { + if (cell.isVertex() || cell.isEdge()) { + if (!cell.isEdge()) { const style = this.graph.getCurrentCellStyle(cell); const total = (style[mxConstants.STYLE_ROTATION] || 0) + angle; this.graph.setCellStyles(mxConstants.STYLE_ROTATION, total, [cell]); @@ -1478,18 +1478,18 @@ class mxVertexHandler { if (geo != null) { const pgeo = this.graph.getCellGeometry(parent); - if (pgeo != null && !model.isEdge(parent)) { + if (pgeo != null && !parent.isEdge()) { geo = geo.clone(); geo.rotate(angle, new mxPoint(pgeo.width / 2, pgeo.height / 2)); model.setGeometry(cell, geo); } - if ((model.isVertex(cell) && !geo.relative) || model.isEdge(cell)) { + if ((cell.isVertex() && !geo.relative) || cell.isEdge()) { // Recursive rotation - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.rotateCell(model.getChildAt(cell, i), angle, cell); + this.rotateCell(cell.getChildAt(i), angle, cell); } } } @@ -1580,7 +1580,7 @@ class mxVertexHandler { * in the graph using . */ resizeCell(cell, dx, dy, index, gridEnabled, constrained, recurse) { - let geo = this.graph.model.getGeometry(cell); + let geo = cell.getGeometry(); if (geo != null) { if (index === mxEvent.LABEL_HANDLE) { @@ -1637,10 +1637,10 @@ class mxVertexHandler { // moveChildren(cell: mxCell, dx: number, dy: number): void; moveChildren(cell, dx, dy) { const model = this.graph.getModel(); - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(cell, i); + const child = cell.getChildAt(i); let geo = this.graph.getCellGeometry(child); if (geo != null) { @@ -2138,7 +2138,7 @@ class mxVertexHandler { */ isParentHighlightVisible() { return !this.graph.isCellSelected( - this.graph.model.getParent(this.state.cell) + this.state.cell.getParent() ); } @@ -2151,11 +2151,11 @@ class mxVertexHandler { updateParentHighlight() { if (!this.isDestroyed()) { const visible = this.isParentHighlightVisible(); - const parent = this.graph.model.getParent(this.state.cell); + const parent = this.state.cell.getParent(); const pstate = this.graph.view.getState(parent); if (this.parentHighlight != null) { - if (this.graph.model.isVertex(parent) && visible) { + if (parent.isVertex() && visible) { const b = this.parentHighlight.bounds; if ( @@ -2181,7 +2181,7 @@ class mxVertexHandler { } } else if (this.parentHighlightEnabled && visible) { if ( - this.graph.model.isVertex(parent) && + parent.isVertex() && pstate != null && pstate.parentHighlight == null ) { @@ -2267,7 +2267,7 @@ class mxVertexHandler { } if (this.parentHighlight != null) { - const parent = this.graph.model.getParent(this.state.cell); + const parent = this.state.cell.getParent(); const pstate = this.graph.view.getState(parent); if (pstate != null && pstate.parentHighlight === this.parentHighlight) { diff --git a/packages/core/src/layout/hierarchical/model/mxGraphHierarchyModel.js b/packages/core/src/layout/hierarchical/model/mxGraphHierarchyModel.js index 407198792..08770dd21 100644 --- a/packages/core/src/layout/hierarchical/model/mxGraphHierarchyModel.js +++ b/packages/core/src/layout/hierarchical/model/mxGraphHierarchyModel.js @@ -212,7 +212,7 @@ class mxGraphHierarchyModel { // Looking for outgoing edges only if ( cell !== vertices[i] && - layout.graph.model.isVertex(cell) && + cell.isVertex() && !layout.isVertexIgnored(cell) ) { // We process all edge between this source and its targets diff --git a/packages/core/src/layout/hierarchical/model/mxSwimlaneModel.js b/packages/core/src/layout/hierarchical/model/mxSwimlaneModel.js index 91a6ee1ae..2f7c2e53b 100644 --- a/packages/core/src/layout/hierarchical/model/mxSwimlaneModel.js +++ b/packages/core/src/layout/hierarchical/model/mxSwimlaneModel.js @@ -207,7 +207,7 @@ class mxSwimlaneModel { internalVertices[i].swimlaneIndex = -1; for (let ii = 0; ii < swimlanes.length; ii += 1) { - if (graph.model.getParent(vertices[i]) === swimlanes[ii]) { + if (vertices[i].getParent() === swimlanes[ii]) { internalVertices[i].swimlaneIndex = ii; break; } @@ -227,7 +227,7 @@ class mxSwimlaneModel { // Looking for outgoing edges only if ( cell !== vertices[i] && - layout.graph.model.isVertex(cell) && + cell.isVertex() && !layout.isVertexIgnored(cell) ) { // We process all edge between this source and its targets diff --git a/packages/core/src/layout/hierarchical/mxHierarchicalLayout.js b/packages/core/src/layout/hierarchical/mxHierarchicalLayout.js index eddd9d74c..d8fac467e 100644 --- a/packages/core/src/layout/hierarchical/mxHierarchicalLayout.js +++ b/packages/core/src/layout/hierarchical/mxHierarchicalLayout.js @@ -235,7 +235,7 @@ class mxHierarchicalLayout extends mxGraphLayout { if ( parent !== this.root && - model.isVertex(parent) != null && + parent.isVertex() != null && this.maintainParentLocation ) { const geo = this.graph.getCellGeometry(parent); @@ -253,7 +253,7 @@ class mxHierarchicalLayout extends mxGraphLayout { const ancestor = parent != null ? model.isAncestor(parent, roots[i]) : true; - if (ancestor && model.isVertex(roots[i])) { + if (ancestor && roots[i].isVertex()) { rootsCopy.push(roots[i]); } } @@ -314,7 +314,7 @@ class mxHierarchicalLayout extends mxGraphLayout { for (const i in vertices) { const cell = vertices[i]; - if (model.isVertex(cell) && this.graph.isCellVisible(cell)) { + if (cell.isVertex() && this.graph.isCellVisible(cell)) { const conns = this.getEdges(cell); let fanOut = 0; let fanIn = 0; @@ -369,10 +369,10 @@ class mxHierarchicalLayout extends mxGraphLayout { const { model } = this.graph; let edges = []; const isCollapsed = this.graph.isCellCollapsed(cell); - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(cell, i); + const child = cell.getChildAt(i); if (this.isPort(child)) { edges = edges.concat(model.getEdges(child, true, true)); @@ -446,12 +446,10 @@ class mxHierarchicalLayout extends mxGraphLayout { if (terminal != null) { if (this.isPort(terminal)) { - terminal = this.graph.model.getParent(terminal); + terminal = terminal.getParent(); } - terminalCache.put(edge, terminal); } - return terminal; } @@ -577,7 +575,7 @@ class mxHierarchicalLayout extends mxGraphLayout { const { model } = this.graph; if ( - model.isVertex(cell) && + cell.isVertex() && cell !== this.parent && this.graph.isCellVisible(cell) ) { @@ -588,10 +586,10 @@ class mxHierarchicalLayout extends mxGraphLayout { this.traverseAncestors || (cell === this.parent && this.graph.isCellVisible(cell)) ) { - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(cell, i); + const child = cell.getChildAt(i); // Ignore ports in the layout vertex list, they are dealt with // in the traversal mechanisms diff --git a/packages/core/src/layout/hierarchical/mxSwimlaneLayout.js b/packages/core/src/layout/hierarchical/mxSwimlaneLayout.js index 88f8e6306..0b9645df6 100644 --- a/packages/core/src/layout/hierarchical/mxSwimlaneLayout.js +++ b/packages/core/src/layout/hierarchical/mxSwimlaneLayout.js @@ -241,7 +241,7 @@ class mxSwimlaneLayout extends mxGraphLayout { } if (parent == null) { - parent = model.getParent(swimlanes[0]); + parent = swimlanes[0].getParent(); } // Maintaining parent location @@ -250,7 +250,7 @@ class mxSwimlaneLayout extends mxGraphLayout { if ( parent !== this.root && - model.isVertex(parent) != null && + parent.isVertex() != null && this.maintainParentLocation ) { const geo = this.graph.getCellGeometry(parent); @@ -428,7 +428,7 @@ class mxSwimlaneLayout extends mxGraphLayout { if ( cell != null && - model.isVertex(cell) && + cell.isVertex() && this.graph.isCellVisible(cell) && model.isAncestor(parent, cell) ) { @@ -491,10 +491,10 @@ class mxSwimlaneLayout extends mxGraphLayout { const { model } = this.graph; let edges = []; const isCollapsed = this.graph.isCellCollapsed(cell); - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(cell, i); + const child = cell.getChildAt(i); if (this.isPort(child)) { edges = edges.concat(model.getEdges(child, true, true)); @@ -576,12 +576,10 @@ class mxSwimlaneLayout extends mxGraphLayout { if (terminal != null) { if (this.isPort(terminal)) { - terminal = this.graph.model.getParent(terminal); + terminal = terminal.getParent(); } - terminalCache.put(edge, terminal); } - return terminal; } @@ -712,9 +710,9 @@ class mxSwimlaneLayout extends mxGraphLayout { const { model } = this.graph; if ( - model.isVertex(cell) && + cell.isVertex() && cell !== this.parent && - model.getParent(cell) !== this.parent && + cell.getParent() !== this.parent && this.graph.isCellVisible(cell) ) { result[mxObjectIdentity.get(cell)] = cell; @@ -724,10 +722,10 @@ class mxSwimlaneLayout extends mxGraphLayout { this.traverseAncestors || (cell === this.parent && this.graph.isCellVisible(cell)) ) { - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(cell, i); + const child = cell.getChildAt(i); // Ignore ports in the layout vertex list, they are dealt with // in the traversal mechanisms diff --git a/packages/core/src/layout/hierarchical/stage/mxCoordinateAssignment.js b/packages/core/src/layout/hierarchical/stage/mxCoordinateAssignment.js index 6b4c2baa5..6bd091716 100644 --- a/packages/core/src/layout/hierarchical/stage/mxCoordinateAssignment.js +++ b/packages/core/src/layout/hierarchical/stage/mxCoordinateAssignment.js @@ -1370,11 +1370,11 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage { y += jetty; let x = jettys[parallelEdgeCount * 4 + arrayOffset]; - const modelSource = graph.model.getTerminal(realEdge, true); + const modelSource = realEdge.getTerminal(true); if ( this.layout.isPort(modelSource) && - graph.model.getParent(modelSource) === realSource + modelSource.getParent() === realSource ) { const state = graph.view.getState(modelSource); @@ -1477,12 +1477,12 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage { const y = rankY - jetty; let x = jettys[parallelEdgeCount * 4 + 2 - arrayOffset]; - const modelTarget = graph.model.getTerminal(realEdge, false); + const modelTarget = realEdge.getTerminal(false); const realTarget = this.layout.getVisibleTerminal(realEdge, false); if ( this.layout.isPort(modelTarget) && - graph.model.getParent(modelTarget) === realTarget + modelTarget.getParent() === realTarget ) { const state = graph.view.getState(modelTarget); diff --git a/packages/core/src/layout/mxCircleLayout.js b/packages/core/src/layout/mxCircleLayout.js index 61a24ddae..7f8581923 100644 --- a/packages/core/src/layout/mxCircleLayout.js +++ b/packages/core/src/layout/mxCircleLayout.js @@ -103,10 +103,10 @@ class mxCircleLayout extends mxGraphLayout { let top = null; let left = null; const vertices = []; - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const cell = model.getChildAt(parent, i); + const cell = parent.getChildAt(i); if (!this.isVertexIgnored(cell)) { vertices.push(cell); diff --git a/packages/core/src/layout/mxCompactTreeLayout.js b/packages/core/src/layout/mxCompactTreeLayout.js index 6c68b6e2a..bfcae75e4 100644 --- a/packages/core/src/layout/mxCompactTreeLayout.js +++ b/packages/core/src/layout/mxCompactTreeLayout.js @@ -254,7 +254,7 @@ class mxCompactTreeLayout extends mxGraphLayout { if ( this.graph.getEdges( parent, - model.getParent(parent), + parent.getParent(), this.invert, !this.invert, false @@ -303,7 +303,7 @@ class mxCompactTreeLayout extends mxGraphLayout { if ( parent !== this.root && - model.isVertex(parent) != null && + parent.isVertex() != null && this.maintainParentLocation ) { const geo = this.graph.getCellGeometry(parent); @@ -536,7 +536,7 @@ class mxCompactTreeLayout extends mxGraphLayout { : view.getVisibleTerminal(edge, this.invert); const tmp = this.dfs(target, parent); - if (tmp != null && model.getGeometry(target) != null) { + if (tmp != null && target.getGeometry() != null) { if (prev == null) { node.child = tmp; } else { @@ -853,14 +853,14 @@ class mxCompactTreeLayout extends mxGraphLayout { apply(node, bounds) { const model = this.graph.getModel(); const { cell } = node; - let g = model.getGeometry(cell); + let g = cell.getGeometry(); if (cell != null && g != null) { if (this.isVertexMovable(cell)) { g = this.setVertexLocation(cell, node.x, node.y); if (this.resizeParent) { - const parent = model.getParent(cell); + const parent = cell.getParent(); const id = mxCellPath.create(parent); // Implements set semantic diff --git a/packages/core/src/layout/mxEdgeLabelLayout.js b/packages/core/src/layout/mxEdgeLabelLayout.js index 6689d9b9b..7cfae7ae1 100644 --- a/packages/core/src/layout/mxEdgeLabelLayout.js +++ b/packages/core/src/layout/mxEdgeLabelLayout.js @@ -37,10 +37,10 @@ class mxEdgeLabelLayout extends mxGraphLayout { // Gets all vertices and edges inside the parent const edges = []; const vertices = []; - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const cell = model.getChildAt(parent, i); + const cell = parent.getChildAt(i); const state = view.getState(cell); if (state != null) { @@ -117,7 +117,7 @@ class mxEdgeLabelLayout extends mxGraphLayout { dx = 0; } - let g = model.getGeometry(edge.cell); + let g = edge.cell.getGeometry(); if (g != null) { g = g.clone(); diff --git a/packages/core/src/layout/mxGraphLayout.js b/packages/core/src/layout/mxGraphLayout.js index 4919edb45..f5e36d2c7 100644 --- a/packages/core/src/layout/mxGraphLayout.js +++ b/packages/core/src/layout/mxGraphLayout.js @@ -150,12 +150,12 @@ class mxGraphLayout { const result = func(vertex, edge); if (result == null || result) { - const edgeCount = this.graph.model.getEdgeCount(vertex); + const edgeCount = vertex.getEdgeCount(); if (edgeCount > 0) { for (let i = 0; i < edgeCount; i += 1) { - const e = this.graph.model.getEdgeAt(vertex, i); - const isSource = this.graph.model.getTerminal(e, true) === vertex; + const e = vertex.getEdgeAt(i); + const isSource = e.getTerminal(true) === vertex; if (!directed || isSource) { const next = this.graph.view.getVisibleTerminal(e, !isSource); @@ -178,7 +178,7 @@ class mxGraphLayout { // isAncestor(parent: mxCell, child: mxCell, traverseAncestors?: boolean): boolean; isAncestor(parent, child, traverseAncestors) { if (!traverseAncestors) { - return this.graph.model.getParent(child) === parent; + return child.getParent() === parent; } if (child === parent) { @@ -186,7 +186,7 @@ class mxGraphLayout { } while (child != null && child !== parent) { - child = this.graph.model.getParent(child); + child = child.getParent(); } return child === parent; @@ -213,7 +213,7 @@ class mxGraphLayout { // isVertexIgnored(vertex: mxCell): boolean; isVertexIgnored(vertex) { return ( - !this.graph.getModel().isVertex(vertex) || + !vertex.isVertex() || !this.graph.isCellVisible(vertex) ); } @@ -229,10 +229,10 @@ class mxGraphLayout { const model = this.graph.getModel(); return ( - !model.isEdge(edge) || + !edge.isEdge() || !this.graph.isCellVisible(edge) || - model.getTerminal(edge, true) == null || - model.getTerminal(edge, false) == null + edge.getTerminal(true) == null || + edge.getTerminal(false) == null ); } @@ -268,15 +268,15 @@ class mxGraphLayout { const model = this.graph.getModel(); if (model.isAncestor(this.parent, parent)) { - let parentGeo = model.getGeometry(parent); + let parentGeo = parent.getGeometry(); while (parent !== this.parent) { result.x += parentGeo.x; result.y += parentGeo.y; - parent = model.getParent(parent); + parent = parent.getParent(); - parentGeo = model.getGeometry(parent); + parentGeo = parent.getGeometry(); } } } @@ -292,7 +292,7 @@ class mxGraphLayout { setEdgePoints(edge, points) { if (edge != null) { const { model } = this.graph; - let geometry = model.getGeometry(edge); + let geometry = edge.getGeometry(); if (geometry == null) { geometry = new mxGeometry(); @@ -302,7 +302,7 @@ class mxGraphLayout { } if (this.parent != null && points != null) { - const parent = model.getParent(edge); + const parent = edge.getParent(); const parentOffset = this.getParentOffset(parent); @@ -331,7 +331,7 @@ class mxGraphLayout { // setVertexLocation(cell: mxCell, x: number, y: number): mxRectangle; setVertexLocation(cell, x, y) { const model = this.graph.getModel(); - let geometry = model.getGeometry(cell); + let geometry = cell.getGeometry(); let result = null; if (geometry != null) { @@ -363,7 +363,7 @@ class mxGraphLayout { } if (this.parent != null) { - const parent = model.getParent(cell); + const parent = cell.getParent(); if (parent != null && parent !== this.parent) { const parentOffset = this.getParentOffset(parent); @@ -391,7 +391,7 @@ class mxGraphLayout { */ // getVertexBounds(cell: mxCell): mxRectangle; getVertexBounds(cell) { - let geo = this.graph.getModel().getGeometry(cell); + let geo = cell.getGeometry(); // Checks for oversize label bounding box and corrects // the return value accordingly @@ -424,7 +424,7 @@ class mxGraphLayout { } if (this.parent != null) { - const parent = this.graph.getModel().getParent(cell); + const parent = this.cell.getParent(); geo = geo.clone(); if (parent != null && parent !== this.parent) { diff --git a/packages/core/src/layout/mxParallelEdgeLayout.js b/packages/core/src/layout/mxParallelEdgeLayout.js index 3c07da546..0364ceaab 100644 --- a/packages/core/src/layout/mxParallelEdgeLayout.js +++ b/packages/core/src/layout/mxParallelEdgeLayout.js @@ -122,10 +122,10 @@ class mxParallelEdgeLayout extends mxGraphLayout { } } else { const model = this.graph.getModel(); - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - addCell(model.getChildAt(parent, i)); + addCell(parent.getChildAt(i)); } } @@ -181,8 +181,8 @@ class mxParallelEdgeLayout extends mxGraphLayout { const edge = parallels[0]; const view = this.graph.getView(); const model = this.graph.getModel(); - const src = model.getGeometry(view.getVisibleTerminal(edge, true)); - const trg = model.getGeometry(view.getVisibleTerminal(edge, false)); + const src = view.getVisibleTerminal(edge, true).getGeometry(); + const trg = view.getVisibleTerminal(edge, false).getGeometry(); let x0; let y0; diff --git a/packages/core/src/layout/mxPartitionLayout.js b/packages/core/src/layout/mxPartitionLayout.js index 1afb2aa80..2052a03a2 100644 --- a/packages/core/src/layout/mxPartitionLayout.js +++ b/packages/core/src/layout/mxPartitionLayout.js @@ -79,17 +79,17 @@ class mxPartitionLayout extends mxGraphLayout { // moveCell(cell: mxCell, x: number, y: number): void; moveCell(cell, x, y) { const model = this.graph.getModel(); - const parent = model.getParent(cell); + const parent = cell.getParent(); if (cell != null && parent != null) { let i = 0; let last = 0; - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); // Finds index of the closest swimlane // TODO: Take into account the orientation for (i = 0; i < childCount; i += 1) { - const child = model.getChildAt(parent, i); + const child = parent.getChildAt(i); const bounds = this.getVertexBounds(child); if (bounds != null) { @@ -119,7 +119,7 @@ class mxPartitionLayout extends mxGraphLayout { execute(parent) { const horizontal = this.isHorizontal(); const model = this.graph.getModel(); - let pgeo = model.getGeometry(parent); + let pgeo = parent.getGeometry(); // Handles special case where the parent is either a layer with no // geometry or the current root of the view in which case the size @@ -136,10 +136,10 @@ class mxPartitionLayout extends mxGraphLayout { if (pgeo != null) { const children = []; - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(parent, i); + const child = parent.getChildAt(i); if (!this.isVertexIgnored(child) && this.isVertexMovable(child)) { children.push(child); @@ -174,7 +174,7 @@ class mxPartitionLayout extends mxGraphLayout { try { for (let i = 0; i < n; i += 1) { const child = children[i]; - let geo = model.getGeometry(child); + let geo = child.getGeometry(); if (geo != null) { geo = geo.clone(); diff --git a/packages/core/src/layout/mxStackLayout.js b/packages/core/src/layout/mxStackLayout.js index 199bb7e6d..2912f22e2 100644 --- a/packages/core/src/layout/mxStackLayout.js +++ b/packages/core/src/layout/mxStackLayout.js @@ -160,13 +160,13 @@ class mxStackLayout extends mxGraphLayout { // moveCell(cell: mxCell, x: number, y: number): void; moveCell(cell, x, y) { const model = this.graph.getModel(); - const parent = model.getParent(cell); + const parent = cell.getParent(); const horizontal = this.isHorizontal(); if (cell != null && parent != null) { let i = 0; let last = 0; - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); let value = horizontal ? x : y; const pstate = this.graph.getView().getState(parent); @@ -177,10 +177,10 @@ class mxStackLayout extends mxGraphLayout { value /= this.graph.view.scale; for (i = 0; i < childCount; i += 1) { - const child = model.getChildAt(parent, i); + const child = parent.getChildAt(i); if (child !== cell) { - const bounds = model.getGeometry(child); + const bounds = child.getGeometry(); if (bounds != null) { const tmp = horizontal @@ -210,7 +210,7 @@ class mxStackLayout extends mxGraphLayout { // getParentSize(): void; getParentSize(parent) { const model = this.graph.getModel(); - let pgeo = model.getGeometry(parent); + let pgeo = parent.getGeometry(); // Handles special case where the parent is either a layer with no // geometry or the current root of the view in which case the size @@ -234,11 +234,11 @@ class mxStackLayout extends mxGraphLayout { // getLayoutCells(parent: mxCell): Array; getLayoutCells(parent) { const model = this.graph.getModel(); - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); const cells = []; for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(parent, i); + const child = parent.getChildAt(i); if (!this.isVertexIgnored(child) && this.isVertexMovable(child)) { cells.push(child); @@ -346,7 +346,7 @@ class mxStackLayout extends mxGraphLayout { for (let i = 0; i < cells.length; i += 1) { const child = cells[i]; - let geo = model.getGeometry(child); + let geo = child.getGeometry(); if (geo != null) { geo = geo.clone(); diff --git a/packages/core/src/serialization/mxGraphViewCodec.js b/packages/core/src/serialization/mxGraphViewCodec.js index a013e7392..b393540ce 100644 --- a/packages/core/src/serialization/mxGraphViewCodec.js +++ b/packages/core/src/serialization/mxGraphViewCodec.js @@ -58,10 +58,10 @@ class mxGraphViewCodec extends mxObjectCodec { encodeCell(enc, view, cell) { const model = view.graph.getModel(); const state = view.getState(cell); - const parent = model.getParent(cell); + const parent = cell.getParent(); if (parent == null || state != null) { - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); const geo = view.graph.getCellGeometry(cell); let name = null; @@ -69,11 +69,11 @@ class mxGraphViewCodec extends mxObjectCodec { name = 'layer'; } else if (parent == null) { name = 'graph'; - } else if (model.isEdge(cell)) { + } else if (cell.isEdge()) { name = 'edge'; } else if (childCount > 0 && geo != null) { name = 'group'; - } else if (model.isVertex(cell)) { + } else if (cell.isVertex()) { name = 'vertex'; } @@ -158,7 +158,7 @@ class mxGraphViewCodec extends mxObjectCodec { const childNode = this.encodeCell( enc, view, - model.getChildAt(cell, i) + cell.getChildAt(i) ); if (childNode != null) { diff --git a/packages/core/src/util/animate/mxEffects.js b/packages/core/src/util/animate/mxEffects.js index f365a47fc..e0129e683 100644 --- a/packages/core/src/util/animate/mxEffects.js +++ b/packages/core/src/util/animate/mxEffects.js @@ -65,7 +65,7 @@ class mxEffects { if ( change.constructor !== mxGeometryChange || - graph.model.isEdge(change.cell) + change.cell.isEdge() ) { mxUtils.setOpacity(state.shape.node, (100 * step) / maxStep); } else { @@ -126,10 +126,10 @@ class mxEffects { // static cascadeOpacity(graph: mxGraph, cell: mxCell, opacity: number): void; static cascadeOpacity(graph, cell, opacity) { // Fades all children - const childCount = graph.model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = graph.model.getChildAt(cell, i); + const child = cell.getChildAt(i); const childState = graph.getView().getState(child); if (childState != null) { diff --git a/packages/core/src/util/animate/mxMorphing.js b/packages/core/src/util/animate/mxMorphing.js index f2f4e8712..7bef298d2 100644 --- a/packages/core/src/util/animate/mxMorphing.js +++ b/packages/core/src/util/animate/mxMorphing.js @@ -142,7 +142,7 @@ class mxMorphing extends mxAnimation { delta = this.getDelta(state); if ( - this.graph.getModel().isVertex(cell) && + cell.isVertex() && (delta.x != 0 || delta.y != 0) ) { const translate = this.graph.view.getTranslate(); @@ -156,11 +156,11 @@ class mxMorphing extends mxAnimation { } if (recurse && !this.stopRecursion(state, delta)) { - const childCount = this.graph.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { this.animateCell( - this.graph.getModel().getChildAt(cell, i), + cell.getChildAt(i), move, recurse ); @@ -205,7 +205,7 @@ class mxMorphing extends mxAnimation { let result = null; if (cell != null) { - const parent = this.graph.getModel().getParent(cell); + const parent = this.cell.getParent(); const geo = this.graph.getCellGeometry(cell); result = this.getOriginForCell(parent); diff --git a/packages/core/src/util/datatypes/style/mxEdgeStyle.js b/packages/core/src/util/datatypes/style/mxEdgeStyle.js index 79f29ec12..482c8d2b1 100644 --- a/packages/core/src/util/datatypes/style/mxEdgeStyle.js +++ b/packages/core/src/util/datatypes/style/mxEdgeStyle.js @@ -1075,9 +1075,9 @@ class mxEdgeStyle { ) { const { graph } = state.view; const sourceEdge = - source == null ? false : graph.getModel().isEdge(source.cell); + source == null ? false : source.cell.isEdge(); const targetEdge = - target == null ? false : graph.getModel().isEdge(target.cell); + target == null ? false : target.cell.isEdge(); const pts = mxEdgeStyle.scalePointArray( state.absolutePoints, diff --git a/packages/core/src/util/image/mxImageExport.js b/packages/core/src/util/image/mxImageExport.js index 867fbafa6..afb628e5b 100644 --- a/packages/core/src/util/image/mxImageExport.js +++ b/packages/core/src/util/image/mxImageExport.js @@ -69,11 +69,11 @@ class mxImageExport { visitor(state, canvas); const { graph } = state.view; - const childCount = graph.model.getChildCount(state.cell); + const childCount = state.cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { const childState = graph.view.getState( - graph.model.getChildAt(state.cell, i) + state.cell.getChildAt(i) ); this.visitStatesRecursive(childState, canvas, visitor); } diff --git a/packages/core/src/util/mxUtils.js b/packages/core/src/util/mxUtils.js index 9f56f74be..497a16c77 100644 --- a/packages/core/src/util/mxUtils.js +++ b/packages/core/src/util/mxUtils.js @@ -1964,7 +1964,7 @@ const mxUtils = { for (let i = 0; i < cells.length; i += 1) { if (cells[i] != null) { const style = mxUtils.setStyle( - model.getStyle(cells[i]), + cells[i].getStyle(), key, value ); @@ -2067,7 +2067,7 @@ const mxUtils = { for (let i = 0; i < cells.length; i += 1) { if (cells[i] != null) { const style = mxUtils.setStyleFlag( - model.getStyle(cells[i]), + cells[i].getStyle(), key, flag, value diff --git a/packages/core/src/view/cell/mxCell.ts b/packages/core/src/view/cell/mxCell.ts index 20c32cfcb..6022e54e5 100644 --- a/packages/core/src/view/cell/mxCell.ts +++ b/packages/core/src/view/cell/mxCell.ts @@ -71,6 +71,11 @@ class mxCell { } } + // TODO: Document me!!! + getChildren(): mxCell[] { + return this.children || []; + } + // TODO: Document me! // used by invalidate() of mxGraphView invalidating: boolean = false; diff --git a/packages/core/src/view/cell/mxCellEditor.ts b/packages/core/src/view/cell/mxCellEditor.ts index 579c7b107..089c55d50 100644 --- a/packages/core/src/view/cell/mxCellEditor.ts +++ b/packages/core/src/view/cell/mxCellEditor.ts @@ -548,7 +548,7 @@ class mxCellEditor { if (state == null) { this.stopEditing(true); } else if (this.textarea != null) { - const isEdge = this.graph.getModel().isEdge(state.cell); + const isEdge = state.cell.isEdge(); const { scale } = this.graph.getView(); let m = null; @@ -1106,7 +1106,7 @@ class mxCellEditor { */ // getEditorBounds(state: mxCellState): mxRectangle; getEditorBounds(state: mxCellState): mxRectangle | null { - const isEdge = this.graph.getModel().isEdge(state.cell); + const isEdge = state.cell.isEdge(); const { scale } = this.graph.getView(); const minSize = this.getMinimumSize(state); const minWidth = minSize.width; @@ -1196,7 +1196,7 @@ class mxCellEditor { } // Applies the horizontal and vertical label positions - if (this.graph.getModel().isVertex(state.cell)) { + if (state.cell.isVertex()) { const horizontal: string = mxUtils.getStringValue( state.style, mxConstants.STYLE_LABEL_POSITION, diff --git a/packages/core/src/view/cell/mxCellOverlay.ts b/packages/core/src/view/cell/mxCellOverlay.ts index acdb72d29..f1d40c4e4 100644 --- a/packages/core/src/view/cell/mxCellOverlay.ts +++ b/packages/core/src/view/cell/mxCellOverlay.ts @@ -177,7 +177,7 @@ class mxCellOverlay extends mxEventSource { */ // getBounds(state: mxCellState): mxRectangle; getBounds(state: mxCellState) { - const isEdge = state.view.graph.getModel().isEdge(state.cell); + const isEdge = state.cell.isEdge(); const s = state.view.scale; let pt = null; diff --git a/packages/core/src/view/cell/mxCellRenderer.ts b/packages/core/src/view/cell/mxCellRenderer.ts index 695d2ac3a..8b9ad0638 100644 --- a/packages/core/src/view/cell/mxCellRenderer.ts +++ b/packages/core/src/view/cell/mxCellRenderer.ts @@ -245,7 +245,7 @@ class mxCellRenderer { getShapeConstructor(state: mxCellState) { let ctor = this.getShape(state.style[mxConstants.STYLE_SHAPE]); if (ctor == null) { - ctor = (state.view.graph.getModel().isEdge(state.cell) + ctor = (state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape); } @@ -428,7 +428,7 @@ class mxCellRenderer { // createLabel(state: mxCellState, value: string): void; createLabel(state: mxCellState, value: any) { const { graph } = state.view; - const isEdge = graph.getModel().isEdge(state.cell); + const isEdge = state.cell.isEdge(); if (state.style.fontSize > 0 || state.style.fontSize == null) { // Avoids using DOM node for empty labels @@ -1138,7 +1138,7 @@ class mxCellRenderer { getLabelBounds(state: mxCellState): mxRectangle { const { graph } = state.view; const { scale } = state.view; - const isEdge = graph.getModel().isEdge(state.cell); + const isEdge = state.cell.isEdge(); let bounds = new mxRectangle( state.absoluteOffset.x, state.absoluteOffset.y @@ -1339,7 +1339,7 @@ class mxCellRenderer { // @ts-ignore const bounds = shape.overlay.getBounds(state); - if (!state.view.graph.getModel().isEdge(state.cell)) { + if (!state.cell.isEdge()) { if (state.shape != null && rot !== 0) { let cx = bounds.getCenterX(); let cy = bounds.getCenterY(); @@ -1423,7 +1423,7 @@ class mxCellRenderer { let cx = state.getCenterX(); let cy = state.getCenterY(); - if (!state.view.graph.getModel().isEdge(state.cell)) { + if (!state.cell.isEdge()) { cx = state.x + w * s; cy = state.y + h * s; @@ -1456,7 +1456,7 @@ class mxCellRenderer { } } - return state.view.graph.getModel().isEdge(state.cell) + return state.cell.isEdge() ? new mxRectangle( Math.round(cx - (w / 2) * s), Math.round(cy - (h / 2) * s), @@ -1649,7 +1649,7 @@ class mxCellRenderer { state.shape == null && state.view.graph.container != null && state.cell !== state.view.currentRoot && - (model.isVertex(state.cell) || model.isEdge(state.cell)) + (state.cell.isVertex() || state.cell.isEdge()) ) { state.shape = this.createShape(state); diff --git a/packages/core/src/view/cell/mxCellStatePreview.ts b/packages/core/src/view/cell/mxCellStatePreview.ts index 7363b5b30..db73da212 100644 --- a/packages/core/src/view/cell/mxCellStatePreview.ts +++ b/packages/core/src/view/cell/mxCellStatePreview.ts @@ -125,9 +125,9 @@ class mxCellStatePreview { if (state != null) { const model = this.graph.getModel(); - if (model.isVertex(state.cell)) { + if (state.cell.isVertex()) { (state.view).updateCellState(state); - const geo = model.getGeometry(state.cell); + const geo = state.cell.getGeometry(); // Moves selection cells and non-relative vertices in // the first phase so that edge terminal points will @@ -142,11 +142,11 @@ class mxCellStatePreview { } } - const childCount = model.getChildCount(state.cell); + const childCount = state.cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { this.translateState( - (state.view).getState(model.getChildAt(state.cell, i)), + (state.view).getState(state.cell.getChildAt(i)), dx, dy ); @@ -175,21 +175,21 @@ class mxCellStatePreview { // Updates the edge terminal points and restores the // (relative) positions of any (relative) children - if (model.isEdge(state.cell)) { + if (state.cell.isEdge()) { state.view.updateCellState(state); } const geo = this.graph.getCellGeometry(state.cell); - const pState = state.view.getState(model.getParent(state.cell)); + const pState = state.view.getState(state.cell.getParent()); // Moves selection vertices which are relative if ( (dx !== 0 || dy !== 0) && geo != null && geo.relative && - model.isVertex(state.cell) && + state.cell.isVertex() && (pState == null || - model.isVertex(pState.cell) || + pState.cell.isVertex() || this.deltas.get(state.cell) != null) ) { state.x += dx; @@ -203,11 +203,11 @@ class mxCellStatePreview { visitor(state); } - const childCount = model.getChildCount(state.cell); + const childCount = state.cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { this.revalidateState( - this.graph.view.getState(model.getChildAt(state.cell, i)), + this.graph.view.getState(state.cell.getChildAt(i)), dx, dy, visitor @@ -225,10 +225,10 @@ class mxCellStatePreview { // addEdges(state: mxCellState): void; addEdges(state: mxCellState): void { const model = this.graph.getModel(); - const edgeCount = model.getEdgeCount(state.cell); + const edgeCount = state.cell.getEdgeCount(); for (let i = 0; i < edgeCount; i += 1) { - const s = state.view.getState(model.getEdgeAt(state.cell, i)); + const s = state.view.getState(state.cell.getEdgeAt(i)); if (s != null) { this.moveState(s, 0, 0); diff --git a/packages/core/src/view/connection/mxMultiplicity.js b/packages/core/src/view/connection/mxMultiplicity.js index 8df28177c..08d719f7e 100644 --- a/packages/core/src/view/connection/mxMultiplicity.js +++ b/packages/core/src/view/connection/mxMultiplicity.js @@ -178,8 +178,8 @@ class mxMultiplicity { */ // checkNeighbors(graph: mxGraph, edge: mxCell, source: mxCell, target: mxCell): boolean; checkNeighbors(graph, edge, source, target) { - const sourceValue = graph.model.getValue(source); - const targetValue = graph.model.getValue(target); + const sourceValue = source.getValue(); + const targetValue = target.getValue(); let isValid = !this.validNeighborsAllowed; const valid = this.validNeighbors; @@ -203,7 +203,7 @@ class mxMultiplicity { */ // checkTerminal(graph: mxGraph, terminal: mxCell, edge: mxCell): boolean; checkTerminal(graph, terminal, edge) { - const value = graph.model.getValue(terminal); + const value = terminal.getValue(); return this.checkType(graph, value, this.type, this.attr, this.value); } diff --git a/packages/core/src/view/graph/mxGraph.ts b/packages/core/src/view/graph/mxGraph.ts index ccff6e8b9..d6c908ad7 100644 --- a/packages/core/src/view/graph/mxGraph.ts +++ b/packages/core/src/view/graph/mxGraph.ts @@ -1261,14 +1261,14 @@ class mxGraph extends mxEventSource { const addCell = (cell: mxCell) => { if (!dict.get(cell) && this.getModel().contains(cell)) { - if (this.getModel().isEdge(cell) || this.getModel().isVertex(cell)) { + if (cell.isEdge() || cell.isVertex()) { dict.put(cell, true); cells.push(cell); } else { - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - addCell(this.getModel().getChildAt(cell, i)); + addCell(cell.getChildAt(i)); } } } @@ -1323,18 +1323,18 @@ class mxGraph extends mxEventSource { const removed = []; for (let i = 0; i < cells.length; i += 1) { - if (!this.getModel().contains(cells[i]) || !this.isCellVisible(cells[i])) { + if (!this.getModel().contains(cells[i]) || !cells[i].isVisible()) { removed.push(cells[i]); } else { - let par = this.getModel().getParent(cells[i]); + let par = cells[i].getParent(); while (par != null && par !== this.getView().currentRoot) { - if (this.isCellCollapsed(par) || !this.isCellVisible(par)) { + if (this.isCellCollapsed(par) || !par.isVisible()) { removed.push(cells[i]); break; } - par = this.getModel().getParent(par); + par = par.getParent(); } } } @@ -1370,7 +1370,7 @@ class mxGraph extends mxEventSource { // the minimal required portions of the cache, namely, the // old and new parent and the child. else if (change instanceof mxChildChange) { - const newParent = this.getModel().getParent(change.child); + const newParent = change.child.getParent(); this.getView().invalidate(change.child, true, true); if (!this.getModel().contains(newParent) || this.isCellCollapsed(newParent)) { @@ -1443,10 +1443,10 @@ class mxGraph extends mxEventSource { */ // removeStateForCell(cell: mxCell): void; removeStateForCell(cell: mxCell) { - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.removeStateForCell(this.getModel().getChildAt(cell, i)); + this.removeStateForCell(cell.getChildAt(i)); } this.getView().invalidate(cell, false, true); @@ -1590,16 +1590,15 @@ class mxGraph extends mxEventSource { * remove the overlays from. Default is the root in the model. */ // clearCellOverlays(cell: mxCell): void; - clearCellOverlays(cell: mxCell | null=null): void { - cell = cell != null ? cell : this.getModel().getRoot(); + clearCellOverlays(cell: mxCell=this.getModel().getRoot()): void { this.removeCellOverlays(cell); // Recursively removes all overlays from the children - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = this.getModel().getChildAt(cell, i); - this.clearCellOverlays(child); // recurse + const child = cell.getChildAt(i); + this.clearCellOverlays(child); // recurse } } @@ -1895,7 +1894,7 @@ class mxGraph extends mxEventSource { let swimlanes = []; while (temp != null) { - temp = this.getModel().getParent(temp); + temp = temp.getParent(); const state = this.getView().getState(temp); if (this.isSwimlane(temp) && state != null) { @@ -1932,12 +1931,11 @@ class mxGraph extends mxEventSource { */ // isSiblingSelected(cell: mxCell): boolean; isSiblingSelected(cell: mxCell): boolean { - const model = this.getModel(); - const parent = model.getParent(cell); - const childCount = model.getChildCount(parent); + const parent = cell.getParent(); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(parent, i); + const child = parent.getChildAt(i); if (cell !== child && this.isCellSelected(child)) { return true; } @@ -2573,7 +2571,7 @@ class mxGraph extends mxEventSource { * @param ignoreState Optional boolean that specifies if the cell state should be ignored. */ // getCurrentCellStyle(cell: mxCell, ignoreState?: boolean): StyleMap; - getCurrentCellStyle(cell: mxCell | null, + getCurrentCellStyle(cell: mxCell, ignoreState: boolean=false): any { const state = ignoreState ? null : this.getView().getState(cell); @@ -2591,13 +2589,13 @@ class mxGraph extends mxEventSource { * @param cell {@link mxCell} whose style should be returned as an array. */ // getCellStyle(cell: mxCell): StyleMap; - getCellStyle(cell: mxCell | null): any { - const stylename = this.getModel().getStyle(cell); + getCellStyle(cell: mxCell): any { + const stylename = cell.getStyle(); let style = null; const stylesheet = this.stylesheet; // Gets the default style for the cell - if (this.getModel().isEdge(cell)) { + if (cell.isEdge()) { style = stylesheet.getDefaultEdgeStyle(); } else { style = stylesheet.getDefaultVertexStyle(); @@ -2727,7 +2725,7 @@ class mxGraph extends mxEventSource { let value = null; if (cells != null && cells.length > 0) { - const style = this.getCurrentCellStyle(cells[0]); + const style = this.getCurrentCellStyle(cells[0]); value = mxUtils.getValue(style, key, defaultValue) ? 0 : 1; this.setCellStyles(key, value, cells); } @@ -2825,7 +2823,7 @@ class mxGraph extends mxEventSource { for (let i = 0; i < cells.length; i += 1) { const state = this.getView().getState(cells[i]); - if (state != null && !this.getModel().isEdge(cells[i])) { + if (state != null && !cells[i].isEdge()) { if (param == null) { if (align === mxConstants.ALIGN_CENTER) { param = state.x + state.width / 2; @@ -2867,7 +2865,7 @@ class mxGraph extends mxEventSource { if (state != null) { let geo = this.getCellGeometry(cells[i]); - if (geo != null && !this.getModel().isEdge(cells[i])) { + if (geo != null && !cells[i].isEdge()) { geo = geo.clone(); if (align === mxConstants.ALIGN_CENTER) { @@ -2937,7 +2935,7 @@ class mxGraph extends mxEventSource { if (edge != null && this.alternateEdgeStyle != null) { this.getModel().beginUpdate(); try { - const style = this.getModel().getStyle(edge); + const style = edge.getStyle(); if (style == null || style.length === 0) { this.getModel().setStyle(edge, this.alternateEdgeStyle); @@ -3042,7 +3040,7 @@ class mxGraph extends mxEventSource { this.getModel().beginUpdate(); try { for (let i = 0; i < cells.length; i += 1) { - const parent = this.getModel().getParent(cells[i]); + const parent = cells[i].getParent(); if (back) { this.getModel().add(parent, cells[i], i); @@ -3050,7 +3048,7 @@ class mxGraph extends mxEventSource { this.getModel().add( parent, cells[i], - this.getModel().getChildCount(parent) - 1 + parent ? parent.getChildCount() - 1 : 0 ); } } @@ -3097,10 +3095,10 @@ class mxGraph extends mxEventSource { if (cells.length > 1 && bounds != null) { // Uses parent of group or previous parent of first child - let parent = this.getModel().getParent(group); + let parent = group.getParent(); if (parent == null) { - parent = this.getModel().getParent(cells[0]); + parent = cells[0].getParent(); } this.getModel().beginUpdate(); @@ -3112,7 +3110,7 @@ class mxGraph extends mxEventSource { } // Adds the group into the parent - let index = this.getModel().getChildCount(parent); + let index = parent.getChildCount(); this.cellsAdded( [group], parent, @@ -3125,7 +3123,7 @@ class mxGraph extends mxEventSource { ); // Adds the children into the group and moves - index = this.getModel().getChildCount(group); + index = group.getChildCount(); this.cellsAdded(cells, group, index, null, null, false, false, false); this.cellsMoved(cells, -bounds.x, -bounds.y, false, false, false); @@ -3158,12 +3156,12 @@ class mxGraph extends mxEventSource { getCellsForGroup(cells: mxCell[]) { const result = []; if (cells != null && cells.length > 0) { - const parent = this.getModel().getParent(cells[0]); + const parent = cells[0].getParent(); result.push(cells[0]); // Filters selection cells with the same parent for (let i = 1; i < cells.length; i += 1) { - if (this.getModel().getParent(cells[i]) === parent) { + if (cells[i].getParent() === parent) { result.push(cells[i]); } } @@ -3248,12 +3246,12 @@ class mxGraph extends mxEventSource { this.getModel().beginUpdate(); try { for (let i = 0; i < cells.length; i += 1) { - let children = this.getModel().getChildren(cells[i]); + let children = cells[i].getChildren(); if (children != null && children.length > 0) { children = children.slice(); - const parent = this.getModel().getParent(cells[i]); - const index = this.getModel().getChildCount(parent); + const parent = cells[i].getParent(); + const index = parent.getChildCount(); this.cellsAdded(children, parent, index, null, null, true); result = result.concat(children); @@ -3299,8 +3297,8 @@ class mxGraph extends mxEventSource { for (let i = 0; i < cells.length; i += 1) { if ( - this.getModel().isVertex(cells[i]) && - this.getModel().getChildCount(cells[i]) > 0 + cells[i].isVertex() && + cells[i].getChildCount() > 0 ) { tmp.push(cells[i]); } @@ -3332,7 +3330,7 @@ class mxGraph extends mxEventSource { this.getModel().beginUpdate(); try { const parent = this.getDefaultParent(); - const index = this.getModel().getChildCount(parent); + const index = parent.getChildCount(); this.cellsAdded(cells, parent, index, null, null, true); this.fireEvent( @@ -3457,7 +3455,7 @@ class mxGraph extends mxEventSource { if (cells != null && cells.length > 0) { for (let i = 0; i < cells.length; i += 1) { - if (this.getModel().isVertex(cells[i]) || this.getModel().isEdge(cells[i])) { + if (cells[i].isVertex() || cells[i].isEdge()) { const bbox = this.getView().getBoundingBox( this.getView().getState(cells[i]), true @@ -3534,39 +3532,41 @@ class mxGraph extends mxEventSource { if (tmp.length > 0) { const { scale } = this.view; const trans = this.getView().translate; + const out: mxCell[] = []; clones = this.getModel().cloneCells(cells, true, mapping); for (let i = 0; i < cells.length; i += 1) { if ( !allowInvalidEdges && - this.getModel().isEdge(clones[i]) && + clones[i].isEdge() && this.getEdgeValidationError( clones[i], - this.getModel().getTerminal(clones[i], true), - this.getModel().getTerminal(clones[i], false) + (clones[i]).getTerminal(true), + (clones[i]).getTerminal(false) ) != null ) { - clones[i] = null; + //clones[i] = null; } else { - const g = this.getModel().getGeometry(clones[i]); + out.push(clones[i]); + const g = clones[i].getGeometry(); if (g != null) { const state = this.getView().getState(cells[i]); - const pstate = this.getView().getState(this.getModel().getParent(cells[i])); + const pstate = this.getView().getState(cells[i].getParent()); if (state != null && pstate != null) { const dx = keepPosition ? 0 : (pstate.origin).x; const dy = keepPosition ? 0 : (pstate.origin).y; - if (this.getModel().isEdge(clones[i])) { + if (clones[i].isEdge()) { const pts = state.absolutePoints; if (pts != null) { // Checks if the source is cloned or sets the terminal point - let src = this.getModel().getTerminal(cells[i], true); + let src = cells[i].getTerminal(true); while (src != null && !dict.get(src)) { - src = this.getModel().getParent(src); + src = src.getParent(); } if (src == null && pts[0] != null) { @@ -3580,10 +3580,10 @@ class mxGraph extends mxEventSource { } // Checks if the target is cloned or sets the terminal point - let trg = this.getModel().getTerminal(cells[i], false); + let trg = cells[i].getTerminal(false); while (trg != null && !dict.get(trg)) { - trg = this.getModel().getParent(trg); + trg = trg.getParent(); } const n = pts.length - 1; @@ -3615,6 +3615,7 @@ class mxGraph extends mxEventSource { } } } + clones = out; } else { clones = []; } @@ -3881,7 +3882,7 @@ class mxGraph extends mxEventSource { } if (index == null) { - index = this.getModel().getChildCount(parent); + index = parent.getChildCount(); } this.getModel().beginUpdate(); @@ -3944,13 +3945,13 @@ class mxGraph extends mxEventSource { if (cells[i] == null) { index--; } else { - const previous = this.getModel().getParent(cells[i]); + const previous = cells[i].getParent(); // Keeps the cell at its absolute location if (o1 != null && cells[i] !== parent && parent !== previous) { const oldState = this.getView().getState(previous); const o2 = (oldState != null ? oldState.origin : zero); - let geo = this.getModel().getGeometry(cells[i]); + let geo = cells[i].getGeometry(); if (geo != null) { const dx = o2.x - o1.x; @@ -3963,7 +3964,7 @@ class mxGraph extends mxEventSource { if ( !geo.relative && - this.getModel().isVertex(cells[i]) && + cells[i].isVertex() && !this.isAllowNegativeCoordinates() ) { geo.x = Math.max(0, geo.x); @@ -3978,7 +3979,7 @@ class mxGraph extends mxEventSource { // if cell is already in parent if ( parent === previous && - index + i > this.getModel().getChildCount(parent) + index + i > parent.getChildCount() ) { index--; } @@ -4044,14 +4045,14 @@ class mxGraph extends mxEventSource { recurse: boolean=true) { if (recurse) { - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.autoSizeCell(this.getModel().getChildAt(cell, i)); + this.autoSizeCell(cell.getChildAt(i)); } } - if (this.getModel().isVertex(cell) && this.isAutoSizeCell(cell)) { + if (cell.isVertex() && this.isAutoSizeCell(cell)) { this.updateCellSize(cell); } } @@ -4147,11 +4148,11 @@ class mxGraph extends mxEventSource { const edges = this.getAllEdges([cells[i]]); const disconnectTerminal = mxUtils.bind(this, (edge: mxCell, source: boolean) => { - let geo = this.getModel().getGeometry(edge); + let geo = edge.getGeometry(); if (geo != null) { // Checks if terminal is being removed - const terminal = this.getModel().getTerminal(edge, source); + const terminal = edge.getTerminal(source); let connected = false; let tmp = terminal; @@ -4160,8 +4161,7 @@ class mxGraph extends mxEventSource { connected = true; break; } - - tmp = this.getModel().getParent(tmp); + tmp = tmp.getParent(); } if (connected) { @@ -4253,8 +4253,8 @@ class mxGraph extends mxEventSource { y: number, parent: mxCell | null=null) { - parent = parent != null ? parent : this.getModel().getParent(edge); - const source = this.getModel().getTerminal(edge, true); + parent = parent != null ? parent : edge.getParent(); + const source = edge.getTerminal(true); this.getModel().beginUpdate(); try { @@ -4289,7 +4289,7 @@ class mxGraph extends mxEventSource { this.cellsAdded( cells, parent, - this.getModel().getChildCount(parent), + parent ? parent.getChildCount() : 0, null, null, true @@ -4297,7 +4297,7 @@ class mxGraph extends mxEventSource { this.cellsAdded( [newEdge], parent, - this.getModel().getChildCount(parent), + parent ? parent.getChildCount() : 0, source, cells[0], false @@ -4479,7 +4479,7 @@ class mxGraph extends mxEventSource { } if (recurse) { - const children = this.getModel().getChildren(cells[i]); + const children = cells[i].getChildren(); this.cellsFolded(children, collapse, recurse); } @@ -4512,19 +4512,17 @@ class mxGraph extends mxEventSource { * @param willCollapse Boolean indicating if the cell is going to be collapsed. */ // swapBounds(cell: mxCell, willCollapse: boolean): void; - swapBounds(cell: mxCell | null, + swapBounds(cell: mxCell, willCollapse: boolean=false): void { - if (cell != null) { - let geo = this.getModel().getGeometry(cell); - if (geo != null) { - geo = geo.clone(); + let geo = cell.getGeometry(); + if (geo != null) { + geo = geo.clone(); - this.updateAlternateBounds(cell, geo, willCollapse); - geo.swap(); + this.updateAlternateBounds(cell, geo, willCollapse); + geo.swap(); - this.getModel().setGeometry(cell, geo); - } + this.getModel().setGeometry(cell, geo); } } @@ -4617,14 +4615,14 @@ class mxGraph extends mxEventSource { let edges: mxCell[] = []; if (cells != null) { for (let i = 0; i < cells.length; i += 1) { - const edgeCount = this.getModel().getEdgeCount(cells[i]); + const edgeCount = cells[i].getEdgeCount(); for (let j = 0; j < edgeCount; j++) { - edges.push(this.getModel().getEdgeAt(cells[i], j)); + edges.push(cells[i].getEdgeAt(j)); } // Recurses - const children = this.getModel().getChildren(cells[i]); + const children = cells[i].getChildren(); edges = edges.concat(this.getAllEdges(children)); } } @@ -4676,7 +4674,7 @@ class mxGraph extends mxEventSource { this.getModel().beginUpdate(); try { const size = this.getPreferredSizeForCell(cell); - let geo = this.getModel().getGeometry(cell); + let geo = cell.getGeometry(); if (size != null && geo != null) { const collapsed = this.isCellCollapsed(cell); @@ -4684,7 +4682,7 @@ class mxGraph extends mxEventSource { if (this.isSwimlane(cell)) { const style = this.getCellStyle(cell); - let cellStyle = this.getModel().getStyle(cell); + let cellStyle = cell.getStyle(); if (cellStyle == null) { cellStyle = ''; @@ -4741,7 +4739,7 @@ class mxGraph extends mxEventSource { } if (!ignoreChildren && !collapsed) { - const bounds = this.getView().getBounds(this.getModel().getChildren(cell)); + const bounds = this.getView().getBounds(cell.getChildren()); if (bounds != null) { const tr = this.getView().translate; @@ -4796,7 +4794,7 @@ class mxGraph extends mxEventSource { const state = this.getView().createState(cell); const { style } = state; - if (!this.getModel().isEdge(cell)) { + if (!cell.isEdge()) { const fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE; let dx = 0; @@ -5031,7 +5029,7 @@ class mxGraph extends mxEventSource { ignoreRelative: boolean=false, recurse: boolean=false): mxGeometry | null { - const prev = this.getModel().getGeometry(cell); + const prev = cell.getGeometry(); if ( prev != null && @@ -5059,7 +5057,7 @@ class mxGraph extends mxEventSource { if ( !geo.relative && - this.getModel().isVertex(cell) && + cell.isVertex() && !this.isAllowNegativeCoordinates() ) { geo.x = Math.max(0, geo.x); @@ -5092,13 +5090,13 @@ class mxGraph extends mxEventSource { resizeChildCells(cell: mxCell, newGeo: mxGeometry): void { - const geo = this.getModel().getGeometry(cell); + const geo = cell.getGeometry(); const dx = geo.width !== 0 ? newGeo.width / geo.width : 1; const dy = geo.height !== 0 ? newGeo.height / geo.height : 1; - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.scaleCell(this.getModel().getChildAt(cell, i), dx, dy, true); + this.scaleCell(cell.getChildAt(i), dx, dy, true); } } @@ -5109,10 +5107,10 @@ class mxGraph extends mxEventSource { */ // constrainChildCells(cell: mxCell): void; constrainChildCells(cell: mxCell) { - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.constrainChild(this.getModel().getChildAt(cell, i)); + this.constrainChild(cell.getChildAt(i)); } } @@ -5131,7 +5129,7 @@ class mxGraph extends mxEventSource { dy: number, recurse: boolean=false): void { - let geo = this.getModel().getGeometry(cell); + let geo = cell.getGeometry(); if (geo != null) { const style = this.getCurrentCellStyle(cell); @@ -5167,7 +5165,7 @@ class mxGraph extends mxEventSource { geo.height = h; } - if (this.getModel().isVertex(cell)) { + if (cell.isVertex()) { this.cellResized(cell, geo, true, recurse); } else { this.getModel().setGeometry(cell, geo); @@ -5184,7 +5182,7 @@ class mxGraph extends mxEventSource { // extendParent(cell: mxCell): void; extendParent(cell: mxCell | null=null): void { if (cell != null) { - const parent = this.getModel().getParent(cell); + const parent = cell.getParent(); let p = this.getCellGeometry(parent); if (parent != null && p != null && !this.isCellCollapsed(parent)) { @@ -5291,7 +5289,7 @@ class mxGraph extends mxEventSource { if (dict.get(cell)) { return true; } - cell = this.getModel().getParent(cell); + cell = cell.getParent(); } return false; }; @@ -5301,14 +5299,15 @@ class mxGraph extends mxEventSource { for (let i = 0; i < cells.length; i += 1) { const geo = this.getCellGeometry(cells[i]); - const parent = this.getModel().getParent(cells[i]); + const parent = cells[i].getParent(); if ( geo == null || !geo.relative || - !this.getModel().isEdge(parent) || - (!isSelected(this.getModel().getTerminal(parent, true)) && - !isSelected(this.getModel().getTerminal(parent, false))) + (parent && !parent.isEdge()) || + (parent && + !isSelected(parent.getTerminal(true)) && + !isSelected(parent.getTerminal(false))) ) { checked.push(cells[i]); } @@ -5346,19 +5345,19 @@ class mxGraph extends mxEventSource { this.setAllowNegativeCoordinates(previous); if (target != null) { - const index = this.getModel().getChildCount(target); + const index = target.getChildCount(); this.cellsAdded(cells, target, index, null, null, true); // Restores parent edge on cloned edge labels if (clone) { for (let i = 0; i < cells.length; i += 1) { const geo = this.getCellGeometry(cells[i]); - const parent = this.getModel().getParent(origCells[i]); + const parent = origCells[i].getParent(); if ( geo != null && geo.relative && - this.getModel().isEdge(parent) && + parent.isEdge() && this.getModel().contains(parent) ) { this.getModel().add(parent, cells[i]); @@ -5454,7 +5453,7 @@ class mxGraph extends mxEventSource { translateCell(cell: mxCell, dx: number, dy: number): void { - let geometry = this.getModel().getGeometry(cell); + let geometry = cell.getGeometry(); if (geometry != null) { dx = parseFloat(String(dx)); @@ -5464,18 +5463,18 @@ class mxGraph extends mxEventSource { if ( !geometry.relative && - this.getModel().isVertex(cell) && + cell.isVertex() && !this.isAllowNegativeCoordinates() ) { geometry.x = Math.max(0, geometry.x); geometry.y = Math.max(0, geometry.y); } - if (geometry.relative && !this.getModel().isEdge(cell)) { - const parent = this.getModel().getParent(cell); + if (geometry.relative && !cell.isEdge()) { + const parent = cell.getParent(); let angle = 0; - if (this.getModel().isVertex(parent)) { + if (parent.isVertex()) { const style = this.getCurrentCellStyle(parent); angle = mxUtils.getValue(style, mxConstants.STYLE_ROTATION, 0); } @@ -5512,11 +5511,11 @@ class mxGraph extends mxEventSource { */ // getCellContainmentArea(cell: mxCell): mxRectangle; getCellContainmentArea(cell: mxCell): mxRectangle | null { - if (cell != null && !this.getModel().isEdge(cell)) { - const parent = this.getModel().getParent(cell); + if (cell != null && !cell.isEdge()) { + const parent = cell.getParent(); if (parent != null && parent !== this.getDefaultParent()) { - const g = this.getModel().getGeometry(parent); + const g = parent.getGeometry(); if (g != null) { let x = 0; @@ -5596,7 +5595,7 @@ class mxGraph extends mxEventSource { geo != null && (this.isConstrainRelativeChildren() || !geo.relative) ) { - const parent = this.getModel().getParent(cell); + const parent = cell.getParent(); const pgeo = this.getCellGeometry(parent); let max = this.getMaximumGraphBounds(); @@ -5644,7 +5643,7 @@ class mxGraph extends mxEventSource { const desc = this.getModel().getDescendants(cell); for (let i = 0; i < desc.length; i += 1) { - if (this.isCellVisible(desc[i])) { + if (desc[i].isVisible()) { cells.push(desc[i]); } } @@ -5751,7 +5750,7 @@ class mxGraph extends mxEventSource { } } - this.resetEdges(this.getModel().getChildren(cells[i])); + this.resetEdges(cells[i].getChildren()); } } finally { this.getModel().endUpdate(); @@ -5766,7 +5765,7 @@ class mxGraph extends mxEventSource { */ // resetEdge(edge: mxCell): mxCell; resetEdge(edge: mxCell): mxCell | null { - let geo = this.getModel().getGeometry(edge); + let geo = edge.getGeometry(); // Resets the control points if (geo != null && geo.points != null && geo.points.length > 0) { @@ -5820,7 +5819,7 @@ class mxGraph extends mxEventSource { let dy = 0; // LATER: Add flipping support for image shapes - if (this.getModel().isVertex(terminalState.cell)) { + if ((terminalState.cell).isVertex()) { let flipH = terminalState.style[mxConstants.STYLE_FLIPH]; let flipV = terminalState.style[mxConstants.STYLE_FLIPV]; @@ -6121,7 +6120,7 @@ class mxGraph extends mxEventSource { } else { r2 += r1; - if (this.getModel().isVertex(vertex.cell)) { + if ((vertex.cell).isVertex()) { let flipH = vertex.style[mxConstants.STYLE_FLIPH] == 1; let flipV = vertex.style[mxConstants.STYLE_FLIPV] == 1; @@ -6188,7 +6187,7 @@ class mxGraph extends mxEventSource { this.getModel().beginUpdate(); try { - const previous = this.getModel().getTerminal(edge, source); + const previous = edge.getTerminal(source); this.cellConnected(edge, terminal, source, constraint); this.fireEvent( new mxEventObject( @@ -6229,7 +6228,7 @@ class mxGraph extends mxEventSource { if (edge != null) { this.getModel().beginUpdate(); try { - const previous = this.getModel().getTerminal(edge, source); + const previous = edge.getTerminal(source); // Updates the constraint this.setConnectionConstraint(edge, terminal, source, constraint); @@ -6298,12 +6297,12 @@ class mxGraph extends mxEventSource { } for (const cell of cells) { - if (this.getModel().isEdge(cell)) { - let geo = this.getModel().getGeometry(cell); + if (cell.isEdge()) { + let geo = cell.getGeometry(); if (geo != null) { const state = this.getView().getState(cell); - const pstate = this.getView().getState(this.getModel().getParent(cell)); + const pstate = this.getView().getState(cell.getParent()); if (state != null && pstate != null) { geo = geo.clone(); @@ -6314,14 +6313,14 @@ class mxGraph extends mxEventSource { const dy = -pstate.origin.y; const pts = state.absolutePoints; - let src = this.getModel().getTerminal(cell, true); + let src = cell.getTerminal(true); if ( src != null && this.isCellDisconnectable(cell, src, true) ) { while (src != null && !dict.get(src)) { - src = this.getModel().getParent(src); + src = src.getParent(); } if (src == null) { @@ -6336,14 +6335,14 @@ class mxGraph extends mxEventSource { } } - let trg = this.getModel().getTerminal(cell, false); + let trg = cell.getTerminal(false); if ( trg != null && this.isCellDisconnectable(cell, trg, false) ) { while (trg != null && !dict.get(trg)) { - trg = this.getModel().getParent(trg); + trg = trg.getParent(); } if (trg == null) { @@ -6453,7 +6452,7 @@ class mxGraph extends mxEventSource { // getTerminalForPort(cell: mxCell, source: boolean): mxCell; getTerminalForPort(cell: mxCell, source: boolean=false): mxCell | null { - return this.getModel().getParent(cell); + return cell.getParent(); } /** @@ -6499,20 +6498,20 @@ class mxGraph extends mxEventSource { const current = this.getCurrentRoot(); if (current != null) { - let next = this.getModel().getParent(current); + let next = current.getParent(); // Finds the next valid root in the hierarchy while ( next !== root && !this.isValidRoot(next) && - this.getModel().getParent(next) !== root + next.getParent() !== root ) { - next = this.getModel().getParent(next); + next = next.getParent(); } // Clears the current root if the new root is // the model's root or one of the layers. - if (next === root || this.getModel().getParent(next) === root) { + if (next === root || next.getParent() === root) { this.getView().setCurrentRoot(null); } else { this.getView().setCurrentRoot(next); @@ -6595,11 +6594,11 @@ class mxGraph extends mxEventSource { // Recursively includes the bounds of the children if (includeDescendants) { - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { const tmp = this.getCellBounds( - this.getModel().getChildAt(cell, i), + cell.getChildAt(i), includeEdges, true ); @@ -6656,14 +6655,14 @@ class mxGraph extends mxEventSource { if (cells != null) { for (const cell of cells) { - if (includeEdges || this.getModel().isVertex(cell)) { + if (includeEdges || cell.isVertex()) { // Computes the bounding box for the points in the geometry const geo = this.getCellGeometry(cell); if (geo != null) { let bbox = null; - if (this.getModel().isEdge(cell)) { + if (cell.isEdge()) { const addPoint = (pt: mxPoint | null) => { if (pt != null) { if (tmp == null) { @@ -6674,11 +6673,11 @@ class mxGraph extends mxEventSource { } }; - if (this.getModel().getTerminal(cell, true) == null) { + if (cell.getTerminal(true) == null) { addPoint(geo.getTerminalPoint(true)); } - if (this.getModel().getTerminal(cell, false) == null) { + if (cell.getTerminal(false) == null) { addPoint(geo.getTerminalPoint(false)); } @@ -6694,11 +6693,11 @@ class mxGraph extends mxEventSource { bbox = tmp; } else { - const parent = this.getModel().getParent(cell); + const parent = cell.getParent(); if (geo.relative) { if ( - this.getModel().isVertex(parent) && + parent.isVertex() && parent !== this.getView().currentRoot ) { tmp = this.getBoundingBoxFromGeometry([parent], false); @@ -6721,7 +6720,7 @@ class mxGraph extends mxEventSource { bbox = mxRectangle.fromRectangle(geo); if ( - this.getModel().isVertex(parent) && + parent.isVertex() && mxUtils.indexOf(cells, parent) >= 0 ) { tmp = this.getBoundingBoxFromGeometry([parent], false); @@ -6776,7 +6775,11 @@ class mxGraph extends mxEventSource { */ // refresh(cell?: mxCell): void; refresh(cell: mxCell | null=null): void { - this.getView().clear(cell, cell == null); + if (cell) { + this.getView().clear(cell, false); + } else { + this.getView().clear(undefined, true); + } this.getView().validate(); this.sizeDidChange(); this.fireEvent(new mxEventObject(mxEvent.REFRESH)); @@ -7387,7 +7390,7 @@ class mxGraph extends mxEventSource { */ // getCellGeometry(cell: mxCell): mxGeometry; getCellGeometry(cell: mxCell): mxGeometry | null { - return this.getModel().getGeometry(cell); + return cell.getGeometry(); } /** @@ -7402,13 +7405,13 @@ class mxGraph extends mxEventSource { * @param cell {@link mxCell} whose visible state should be returned. */ // isCellVisible(cell: mxCell): boolean; - isCellVisible(cell: mxCell | null): boolean { - return this.getModel().isVisible(cell); + isCellVisible(cell: mxCell): boolean { + return cell.isVisible(); } /** * Returns true if the given cell is collapsed in this graph. This - * implementation uses {@link mxGraphModel.isCollapsed}. Subclassers can override + * implementation uses {@link mxCell.isCollapsed}. Subclassers can override * this to implement specific collapsed states for cells in only one graph, * that is, without affecting the collapsed state of the cell. * @@ -7418,13 +7421,14 @@ class mxGraph extends mxEventSource { * @param cell {@link mxCell} whose collapsed state should be returned. */ // isCellCollapsed(cell: mxCell): boolean; - isCellCollapsed(cell: mxCell | null): boolean { - return this.getModel().isCollapsed(cell); + isCellCollapsed(cell: mxCell): boolean { + // SLATED FOR DELETION + return cell.isCollapsed(); } /** * Returns true if the given cell is connectable in this graph. This - * implementation uses {@link mxGraphModel.isConnectable}. Subclassers can override + * implementation uses {@link mxCell.isConnectable}. Subclassers can override * this to implement specific connectable states for cells in only one graph, * that is, without affecting the connectable state of the cell in the model. * @@ -7432,7 +7436,8 @@ class mxGraph extends mxEventSource { */ // isCellConnectable(cell: mxCell): boolean; isCellConnectable(cell: mxCell): boolean { - return this.getModel().isConnectable(cell); + // SLATED FOR DELETION + return cell.isConnectable(); } /** @@ -7609,8 +7614,8 @@ class mxGraph extends mxEventSource { if ( edge != null && - this.getModel().getTerminal(edge, true) == null && - this.getModel().getTerminal(edge, false) == null + edge.getTerminal(true) == null && + edge.getTerminal(false) == null ) { return null; } @@ -7705,17 +7710,16 @@ class mxGraph extends mxEventSource { * @param context Object that represents the global validation state. */ // validateGraph(cell: mxCell, context: any): string | null; - validateGraph(cell: mxCell | null=null, + validateGraph(cell: mxCell=this.getModel().getRoot(), context: any): string | null { - cell = cell != null ? cell : this.getModel().getRoot(); context = context != null ? context : {}; let isValid = true; - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const tmp = this.getModel().getChildAt(cell, i); + const tmp = cell.getChildAt(i); let ctx = context; if (this.isValidRoot(tmp)) { @@ -7736,18 +7740,18 @@ class mxGraph extends mxEventSource { let warning = ''; // Adds error for invalid children if collapsed (children invisible) - if (this.isCellCollapsed(cell) && !isValid) { + if (cell && this.isCellCollapsed(cell) && !isValid) { warning += `${mxResources.get(this.containsValidationErrorsResource) || this.containsValidationErrorsResource}\n`; } // Checks edges and cells using the defined multiplicities - if (this.getModel().isEdge(cell)) { + if (cell && cell.isEdge()) { warning += this.getEdgeValidationError( cell, - this.getModel().getTerminal(cell, true), - this.getModel().getTerminal(cell, false) + cell.getTerminal(true), + cell.getTerminal(false) ) || ''; } else { warning += this.getCellValidationError(cell) || ''; @@ -7764,7 +7768,7 @@ class mxGraph extends mxEventSource { // before any potential alerts are displayed. // LATER: Move this into addCellOverlay. Redraw // should check if overlay was added or removed. - if (this.getModel().getParent(cell) == null) { + if (cell.getParent() == null) { this.getView().validate(); } return warning.length > 0 || !isValid ? warning : null; @@ -7781,7 +7785,7 @@ class mxGraph extends mxEventSource { getCellValidationError(cell: mxCell): string | null { const outCount = this.getModel().getDirectedEdgeCount(cell, true); const inCount = this.getModel().getDirectedEdgeCount(cell, false); - const value = this.getModel().getValue(cell); + const value = cell.getValue(); let error = ''; if (this.multiplicities != null) { @@ -7851,7 +7855,7 @@ class mxGraph extends mxEventSource { if ( state != null && this.foldingEnabled && - !this.getModel().isEdge(state.cell) + !state.cell.isEdge() ) { const tmp = this.isCellCollapsed(state.cell); @@ -7885,7 +7889,7 @@ class mxGraph extends mxEventSource { */ // convertValueToString(cell: mxCell): string; convertValueToString(cell: mxCell): string | null { - const value = this.getModel().getValue(cell); + const value = cell.getValue(); if (value != null) { if (isNode(value)) { @@ -8437,8 +8441,8 @@ class mxGraph extends mxEventSource { ignoreState: boolean=false): boolean { if ( cell != null && - this.getModel().getParent(cell) !== this.getModel().getRoot() && - !this.getModel().isEdge(cell) + cell.getParent() !== this.getModel().getRoot() && + !cell.isEdge() ) { return ( this.getCurrentCellStyle(cell, ignoreState)[mxConstants.STYLE_SHAPE] === @@ -8548,11 +8552,11 @@ class mxGraph extends mxEventSource { */ // isCellLocked(cell: mxCell): boolean; isCellLocked(cell: mxCell): boolean { - const geometry = this.getModel().getGeometry(cell); + const geometry = cell.getGeometry(); return ( this.isCellsLocked() || - (geometry != null && this.getModel().isVertex(cell) && geometry.relative) + (geometry != null && cell.isVertex() && geometry.relative) ); } @@ -8769,8 +8773,8 @@ class mxGraph extends mxEventSource { isLabelMovable(cell: mxCell): boolean { return ( !this.isCellLocked(cell) && - ((this.getModel().isEdge(cell) && this.edgeLabelsMovable) || - (this.getModel().isVertex(cell) && this.vertexLabelsMovable)) + ((cell.isEdge() && this.edgeLabelsMovable) || + (cell.isVertex() && this.vertexLabelsMovable)) ); } @@ -9306,7 +9310,7 @@ class mxGraph extends mxEventSource { return ( (cell == null && this.allowDanglingEdges) || (cell != null && - (!this.getModel().isEdge(cell) || this.connectableEdges) && + (!cell.isEdge() || this.connectableEdges) && this.isCellConnectable(cell)) ); } @@ -9440,7 +9444,7 @@ class mxGraph extends mxEventSource { */ // isExtendParent(cell: mxCell): boolean; isExtendParent(cell: mxCell): boolean { - return !this.getModel().isEdge(cell) && this.isExtendParents(); + return !cell.isEdge() && this.isExtendParents(); } /** @@ -9529,7 +9533,8 @@ class mxGraph extends mxEventSource { isConstrainChild(cell: mxCell): boolean { return ( this.isConstrainChildren() && - !this.getModel().isEdge(this.getModel().getParent(cell)) + !!cell.getParent() && + !(cell.getParent()).isEdge() ); } @@ -9633,7 +9638,7 @@ class mxGraph extends mxEventSource { const style = this.getCurrentCellStyle(cell); return ( - this.getModel().getChildCount(cell) > 0 && + cell.getChildCount() > 0 && style[mxConstants.STYLE_FOLDABLE] != 0 ); } @@ -9656,9 +9661,9 @@ class mxGraph extends mxEventSource { return ( cell != null && ((this.isSplitEnabled() && this.isSplitTarget(cell, cells, evt)) || - (!this.getModel().isEdge(cell) && + (!cell.isEdge() && (this.isSwimlane(cell) || - (this.getModel().getChildCount(cell) > 0 && + (cell.getChildCount() > 0 && !this.isCellCollapsed(cell))))) ); } @@ -9677,18 +9682,18 @@ class mxGraph extends mxEventSource { evt: mxMouseEvent): boolean { if ( - this.getModel().isEdge(target) && + target.isEdge() && cells != null && cells.length == 1 && this.isCellConnectable(cells[0]) && this.getEdgeValidationError( target, - this.getModel().getTerminal(target, true), + target.getTerminal(true), cells[0] ) == null ) { - const src = this.getModel().getTerminal(target, true); - const trg = this.getModel().getTerminal(target, false); + const src = target.getTerminal(true); + const trg = target.getTerminal(false); return ( !this.getModel().isAncestor(cells[0], src) && @@ -9740,10 +9745,10 @@ class mxGraph extends mxEventSource { } else if (swimlane != null) { // Checks if the cell is an ancestor of the swimlane // under the mouse and uses the swimlane in that case - let tmp = this.getModel().getParent(swimlane); + let tmp = swimlane.getParent(); while (tmp != null && this.isSwimlane(tmp) && tmp != cell) { - tmp = this.getModel().getParent(tmp); + tmp = tmp.getParent(); } if (tmp == cell) { @@ -9756,18 +9761,18 @@ class mxGraph extends mxEventSource { !this.isValidDropTarget(cell, cells, evt) && !this.getModel().isLayer(cell) ) { - cell = this.getModel().getParent(cell); + cell = cell.getParent(); } // Checks if parent is dropped into child if not cloning if (!clone) { let parent = cell; while (parent != null && mxUtils.indexOf(cells, parent) < 0) { - parent = this.getModel().getParent(parent); + parent = parent.getParent(); } } - return !this.getModel().isLayer(cell) && parent == null ? cell : null; + return !this.getModel().isLayer(cell) && parent == null ? cell : null; } /** @@ -9788,8 +9793,8 @@ class mxGraph extends mxEventSource { parent = this.defaultParent; if (parent == null) { - const root = this.getModel().getRoot(); - parent = this.getModel().getChildAt(root, 0); + const root = this.getModel().getRoot(); + parent = root.getChildAt(0); } } return parent; @@ -9813,7 +9818,7 @@ class mxGraph extends mxEventSource { // getSwimlane(cell: mxCell): mxCell; getSwimlane(cell: mxCell | null=null): mxCell | null { while (cell != null && !this.isSwimlane(cell)) { - cell = this.getModel().getParent(cell); + cell = cell.getParent(); } return cell; } @@ -9841,10 +9846,10 @@ class mxGraph extends mxEventSource { } if (parent != null) { - const childCount = this.getModel().getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = this.getModel().getChildAt(parent, i); + const child = parent.getChildAt(i); if (child != null) { const result = this.getSwimlaneAt(x, y, child); @@ -9852,7 +9857,7 @@ class mxGraph extends mxEventSource { if (result != null) { return result; } - if (this.isCellVisible(child) && this.isSwimlane(child)) { + if (child.isVisible() && this.isSwimlane(child)) { const state = this.getView().getState(child); if (this.intersects(state, x, y)) { @@ -9901,19 +9906,19 @@ class mxGraph extends mxEventSource { } if (parent != null) { - const childCount = this.getModel().getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = childCount - 1; i >= 0; i--) { - const cell = this.getModel().getChildAt(parent, i); + const cell = parent.getChildAt(i); const result = this.getCellAt(x, y, cell, vertices, edges, ignoreFn); if (result != null) { return result; } if ( - this.isCellVisible(cell) && - ((edges && this.getModel().isEdge(cell)) || - (vertices && this.getModel().isVertex(cell))) + cell.isVisible() && + ((edges && cell.isEdge()) || + (vertices && cell.isVertex())) ) { const state = this.getView().getState(cell); @@ -10044,7 +10049,7 @@ class mxGraph extends mxEventSource { * be returned. Default is `false`. */ // getChildCells(parent: mxCell, vertices?: boolean, edges?: boolean): mxCell[]; - getChildCells(parent: mxCell | null=this.getDefaultParent(), + getChildCells(parent: mxCell=this.getDefaultParent(), vertices: boolean=false, edges: boolean=false): (mxCell | null)[] { @@ -10053,7 +10058,7 @@ class mxGraph extends mxEventSource { // Filters out the non-visible child cells for (let i = 0; i < cells.length; i += 1) { - if (this.isCellVisible(cells[i])) { + if (cells[i].isVisible()) { result.push(cells[i]); } } @@ -10136,12 +10141,12 @@ class mxGraph extends mxEventSource { let edges: mxCell[] = []; const isCollapsed = this.isCellCollapsed(cell); - const childCount = this.getModel().getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = this.getModel().getChildAt(cell, i); + const child = cell.getChildAt(i); - if (isCollapsed || !this.isCellVisible(child)) { + if (isCollapsed || !(child).isVisible()) { edges = edges.concat(this.getModel().getEdges(child, incoming, outgoing)); } } @@ -10195,7 +10200,7 @@ class mxGraph extends mxEventSource { return recurse ? this.getModel().isAncestor(parent, cell) - : this.getModel().getParent(cell) == parent; + : cell.getParent() == parent; } /** @@ -10374,15 +10379,15 @@ class mxGraph extends mxEventSource { } if (parent != null) { - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const cell = model.getChildAt(parent, i); + const cell = parent.getChildAt(i); const state: mxCellState = this.getView().getState(cell); if ( state != null && - this.isCellVisible(cell) && + cell.isVisible() && (ignoreFn == null || !ignoreFn(state)) ) { const deg = @@ -10395,10 +10400,10 @@ class mxGraph extends mxEventSource { const hit = (intersection != null && - model.isVertex(cell) && + cell.isVertex() && mxUtils.intersects(intersection, box)) || (intersection == null && - (model.isEdge(cell) || model.isVertex(cell)) && + (cell.isEdge() || cell.isVertex()) && box.x >= x && box.y + box.height <= bottom && box.y >= y && @@ -10460,13 +10465,13 @@ class mxGraph extends mxEventSource { } if (parent != null) { - const childCount = this.getModel().getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = this.getModel().getChildAt(parent, i); + const child = parent.getChildAt(i); const state = this.getView().getState(child); - if (this.isCellVisible(child) && state != null) { + if (child.isVisible() && state != null) { if ( (!rightHalfpane || state.x >= x0) && (!bottomHalfpane || state.y >= y0) @@ -10506,14 +10511,14 @@ class mxGraph extends mxEventSource { if (parent != null) { const model = this.getModel(); - const childCount = model.getChildCount(parent); + const childCount = parent.getChildCount(); let best = null; let maxDiff = 0; for (let i = 0; i < childCount; i += 1) { - const cell = model.getChildAt(parent, i); + const cell = parent.getChildAt(i); - if (this.getModel().isVertex(cell) && this.isCellVisible(cell)) { + if (cell.isVertex() && cell.isVisible()) { const conns = this.getConnections(cell, isolate ? parent : null); let fanOut = 0; let fanIn = 0; @@ -10601,15 +10606,15 @@ class mxGraph extends mxEventSource { const result = func(vertex, edge); if (result == null || result) { - const edgeCount = this.getModel().getEdgeCount(vertex); + const edgeCount = vertex.getEdgeCount(); if (edgeCount > 0) { for (let i = 0; i < edgeCount; i += 1) { - const e = this.getModel().getEdgeAt(vertex, i); - const isSource = this.getModel().getTerminal(e, true) == vertex; + const e = vertex.getEdgeAt(i); + const isSource = e.getTerminal(true) == vertex; if (!directed || !inverse == isSource) { - const next = this.getModel().getTerminal(e, !isSource); + const next = e.getTerminal(!isSource); this.traverse(next, directed, func, e, visited, inverse); } } @@ -10800,27 +10805,29 @@ class mxGraph extends mxEventSource { sel.clear(); } - const parent = - cell != null ? this.getModel().getParent(cell) : this.getDefaultParent(); + const parent = ( + cell != null ? cell.getParent() : this.getDefaultParent() + ); - const childCount = this.getModel().getChildCount(parent); + const childCount = parent.getChildCount(); if (cell == null && childCount > 0) { - const child = this.getModel().getChildAt(parent, 0); + const child = parent.getChildAt(0); this.setSelectionCell(child); } else if ( + parent && (cell == null || isParent) && this.getView().getState(parent) != null && - this.getModel().getGeometry(parent) != null + parent.getGeometry() != null ) { if (this.getCurrentRoot() != parent) { this.setSelectionCell(parent); } } else if (cell != null && isChild) { - const tmp = this.getModel().getChildCount(cell); + const tmp = cell.getChildCount(); if (tmp > 0) { - const child = this.getModel().getChildAt(cell, 0); + const child = cell.getChildAt(0); this.setSelectionCell(child); } } else if (childCount > 0) { @@ -10828,12 +10835,12 @@ class mxGraph extends mxEventSource { if (isNext) { i++; - const child = this.getModel().getChildAt(parent, i % childCount); + const child = parent.getChildAt(i % childCount); this.setSelectionCell(child); } else { i--; const index = i < 0 ? childCount - 1 : i; - const child = this.getModel().getChildAt(parent, index); + const child = parent.getChildAt(index); this.setSelectionCell(child); } } @@ -10860,7 +10867,7 @@ class mxGraph extends mxEventSource { }, parent ) - : this.getModel().getChildren(parent); + : parent.getChildren(); if (cells != null) { this.setSelectionCells(cells); @@ -10906,12 +10913,13 @@ class mxGraph extends mxEventSource { const filter = (cell: mxCell) => { return ( this.getView().getState(cell) != null && - (((selectGroups || this.getModel().getChildCount(cell) == 0) && - this.getModel().isVertex(cell) && + (((selectGroups || cell.getChildCount() == 0) && + cell.isVertex() && vertices && - !this.getModel().isEdge(this.getModel().getParent(cell))) || - (this.getModel().isEdge(cell) && edges)) - ); + cell.getParent() && + !(cell.getParent()).isEdge() || + (cell.isEdge() && edges)) + )); }; const cells = this.getModel().filterDescendants(filter, parent); @@ -10977,7 +10985,7 @@ class mxGraph extends mxEventSource { let result: mxEdgeHandler | mxVertexHandler | null = null; if (state != null) { - if (this.getModel().isEdge(state.cell)) { + if (state.cell.isEdge()) { const source = state.getVisibleTerminalState(true); const target = state.getVisibleTerminalState(false); const geo = this.getCellGeometry(state.cell); diff --git a/packages/core/src/view/graph/mxGraphModel.ts b/packages/core/src/view/graph/mxGraphModel.ts index c80b2b7ed..49ef70a9f 100644 --- a/packages/core/src/view/graph/mxGraphModel.ts +++ b/packages/core/src/view/graph/mxGraphModel.ts @@ -406,9 +406,9 @@ class mxGraphModel extends mxEventSource { } // Visits the children of the cell - const childCount = this.getChildCount(parent); + const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = this.getChildAt(parent, i); + const child = parent.getChildAt(i); result = result.concat(this.filterDescendants(filter, child)); } @@ -426,7 +426,7 @@ class mxGraphModel extends mxEventSource { if (cell != null) { while (cell != null) { root = cell; - cell = this.getParent(cell); + cell = cell.getParent(); } } return root; @@ -490,8 +490,8 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell that represents the possible layer. */ // isLayer(cell: mxCell): boolean; - isLayer(cell: mxCell | null): boolean { - return this.isRoot(this.getParent(cell)); + isLayer(cell: mxCell): boolean { + return this.isRoot(cell.getParent()); } /** @@ -502,11 +502,11 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} child that specifies the child. */ // isAncestor(parent: mxCell, child: mxCell): boolean; - isAncestor(parent: mxCell | null, - child: mxCell | null): boolean { + isAncestor(parent: mxCell, + child: mxCell): boolean { while (child != null && child !== parent) { - child = this.getParent(child); + child = child.getParent(); } return child === parent; } @@ -517,8 +517,8 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell that specifies the cell. */ // contains(cell: mxCell): boolean; - contains(cell: mxCell | null): boolean { - return this.isAncestor(this.root, cell); + contains(cell: mxCell): boolean { + return this.isAncestor(this.root, cell); } /** @@ -527,8 +527,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose parent should be returned. */ // getParent(cell: mxCell): mxCell; - getParent(cell: mxCell | null): mxCell | null { - return cell != null ? cell.getParent() : null; + getParent(cell: mxCell): mxCell | null { + // SLATED FOR DELETION + return cell.getParent(); } /** @@ -549,10 +550,10 @@ class mxGraphModel extends mxEventSource { if (child !== parent && parent != null && child != null) { // Appends the child if no index was specified if (index == null) { - index = this.getChildCount(parent); + index = parent.getChildCount(); } - const parentChanged = parent !== this.getParent(child); + const parentChanged = parent !== child.getParent(); this.execute(new mxChildChange(this, parent, child, index)); // Maintains the edges parents by moving the edges @@ -616,10 +617,10 @@ class mxGraphModel extends mxEventSource { } // Recursively processes child cells - const childCount = this.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.cellAdded(this.getChildAt(cell, i)); + this.cellAdded(cell.getChildAt(i)); } } } @@ -645,25 +646,22 @@ class mxGraphModel extends mxEventSource { */ // updateEdgeParents(cell: mxCell, root: mxCell): void; updateEdgeParents(cell: mxCell, - root: mxCell | null=null): void { - - // Gets the topmost node of the hierarchy - root = root || this.getRoot(cell); + root: mxCell=this.getRoot(cell)): void { // Updates edges on children first - const childCount = this.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = this.getChildAt(cell, i); + const child = cell.getChildAt(i); this.updateEdgeParents(child, root); } // Updates the parents of all connected edges - const edgeCount = this.getEdgeCount(cell); + const edgeCount = cell.getEdgeCount(); const edges = []; for (let i = 0; i < edgeCount; i += 1) { - edges.push(this.getEdgeAt(cell, i)); + edges.push(cell.getEdgeAt(i)); } for (let i = 0; i < edges.length; i += 1) { @@ -686,50 +684,54 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} root that represents the current root of the model. */ // updateEdgeParent(edge: mxCell, root: mxCell): void; - updateEdgeParent(edge: mxCell | null, - root: mxCell | null): void { + updateEdgeParent(edge: mxCell, + root: mxCell): void { - let source = this.getTerminal(edge, true); - let target = this.getTerminal(edge, false); + let source = edge.getTerminal(true); + let target = edge.getTerminal(false); let cell = null; // Uses the first non-relative descendants of the source terminal while ( source != null && - !this.isEdge(source) && + !source.isEdge() && source.geometry != null && source.geometry.relative ) { - source = this.getParent(source); + source = source.getParent(); } // Uses the first non-relative descendants of the target terminal while ( target != null && this.ignoreRelativeEdgeParent && - !this.isEdge(target) && + !target.isEdge() && target.geometry != null && target.geometry.relative ) { - target = this.getParent(target); + target = target.getParent(); + } + + if (!source || !target) { + throw new Error("Shouldn't get here!"); } if (this.isAncestor(root, source) && this.isAncestor(root, target)) { if (source === target) { - cell = this.getParent(source); + cell = source ? source.getParent() : null; } else { cell = this.getNearestCommonAncestor(source, target); } if ( cell != null && - (this.getParent(cell) !== this.root || this.isAncestor(cell, edge)) && - this.getParent(edge) !== cell + (cell.getParent() !== this.root || this.isAncestor(cell, edge)) && + edge && edge.getParent() !== cell ) { - let geo = this.getGeometry(edge); + let geo = edge.getGeometry(); if (geo != null) { - const origin1 = this.getOrigin(this.getParent(edge)); + const origin1 = this.getOrigin(edge.getParent()); const origin2 = this.getOrigin(cell); const dx = origin2.x - origin1.x; @@ -740,7 +742,7 @@ class mxGraphModel extends mxEventSource { this.setGeometry(edge, geo); } - this.add(cell, edge, this.getChildCount(cell)); + this.add(cell, edge, cell.getChildCount()); } } } @@ -750,14 +752,14 @@ class mxGraphModel extends mxEventSource { * given parent as an {@link mxPoint}. */ // getOrigin(cell: mxCell): mxPoint; - getOrigin(cell: mxCell | null): mxPoint { + getOrigin(cell: mxCell): mxPoint { let result = null; if (cell != null) { - result = this.getOrigin(this.getParent(cell)); + result = this.getOrigin(cell.getParent()); - if (!this.isEdge(cell)) { - const geo = this.getGeometry(cell); + if (!cell.isEdge()) { + const geo = cell.getGeometry(); if (geo != null) { result.x += geo.x; @@ -777,43 +779,42 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell2 that specifies the second cell in the tree. */ // getNearestCommonAncestor(cell1: mxCell, cell2: mxCell): mxCell; - getNearestCommonAncestor(cell1: mxCell | null, - cell2: mxCell | null): mxCell | null { + getNearestCommonAncestor(cell1: mxCell, + cell2: mxCell): mxCell | null { - if (cell1 != null && cell2 != null) { - // Creates the cell path for the second cell - let path = mxCellPath.create(cell2); + // Creates the cell path for the second cell + let path = mxCellPath.create(cell2); - if (path != null && path.length > 0) { - // Bubbles through the ancestors of the first - // cell to find the nearest common ancestor. - let cell = cell1; - let current: string | null = mxCellPath.create(cell); + if (path != null && path.length > 0) { + // Bubbles through the ancestors of the first + // cell to find the nearest common ancestor. + let cell = cell1; + let current: string | null = mxCellPath.create(cell); - // Inverts arguments - if (path.length < current.length) { - cell = cell2; - const tmp = current; - current = path; - path = tmp; + // Inverts arguments + if (path.length < current.length) { + cell = cell2; + const tmp = current; + current = path; + path = tmp; + } + + while (cell != null) { + const parent = cell.getParent(); + + // Checks if the cell path is equal to the beginning of the given cell path + if ( + path.indexOf(current + mxCellPath.PATH_SEPARATOR) === 0 && + parent != null + ) { + return cell; } - while (cell != null) { - const parent = this.getParent(cell); - - // Checks if the cell path is equal to the beginning of the given cell path - if ( - path.indexOf(current + mxCellPath.PATH_SEPARATOR) === 0 && - parent != null - ) { - return cell; - } - - current = mxCellPath.getParentPath(current); - cell = parent; - } + current = mxCellPath.getParentPath(current); + cell = parent; } } + return null; } @@ -828,10 +829,9 @@ class mxGraphModel extends mxEventSource { remove(cell: mxCell) { if (cell === this.root) { this.setRoot(null); - } else if (this.getParent(cell) != null) { + } else if (cell.getParent() != null) { this.execute(new mxChildChange(this, null, cell)); } - return cell; } @@ -844,10 +844,10 @@ class mxGraphModel extends mxEventSource { cellRemoved(cell: mxCell) { if (cell != null && this.cells != null) { // Recursively processes child cells - const childCount = this.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = childCount - 1; i >= 0; i--) { - this.cellRemoved(this.getChildAt(cell, i)); + this.cellRemoved(cell.getChildAt(i)); } // Removes the dictionary entry for the cell @@ -872,7 +872,7 @@ class mxGraphModel extends mxEventSource { parent: mxCell | null, index: number) { - const previous = this.getParent(cell); + const previous = cell.getParent(); if (parent != null) { if (parent !== previous || previous.getIndex(cell) !== index) { @@ -884,7 +884,7 @@ class mxGraphModel extends mxEventSource { } // Adds or removes the cell from the model - const par = this.contains(parent); + const par = parent ? this.contains(parent) : null; const pre = this.contains(previous); if (par && !pre) { @@ -901,8 +901,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose number of children should be returned. */ // getChildCount(cell?: mxCell): number; - getChildCount(cell: mxCell | null) { - return cell != null ? cell.getChildCount() : 0; + getChildCount(cell: mxCell) { + // SLATED FOR DELETION + return cell.getChildCount(); } /** @@ -912,9 +913,10 @@ class mxGraphModel extends mxEventSource { * @param index Integer that specifies the index of the child to be returned. */ // getChildAt(cell: mxCell, index: number): mxCell; - getChildAt(cell: mxCell | null, + getChildAt(cell: mxCell, index: number): mxCell | null { - return cell != null ? cell.getChildAt(index) : null; + // SLATED FOR DELETION + return cell.getChildAt(index); } /** @@ -924,8 +926,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell the represents the parent. */ // getChildren(cell: mxCell): Array; - getChildren(cell: mxCell): mxCell[] | null { - return cell != null ? cell.children : null; + getChildren(cell: mxCell): mxCell[] { + // SLATED FOR DELETION + return cell.children || []; } /** @@ -934,7 +937,7 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose child vertices should be returned. */ // getChildVertices(parent: mxCell): Array; - getChildVertices(parent: mxCell | null) { + getChildVertices(parent: mxCell) { return this.getChildCells(parent, true, false); } @@ -944,7 +947,7 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose child edges should be returned. */ // getChildEdges(parent: mxCell): Array; - getChildEdges(parent: mxCell | null): (mxCell | null)[] { + getChildEdges(parent: mxCell): mxCell[] { return this.getChildCells(parent, false, true); } @@ -959,20 +962,20 @@ class mxGraphModel extends mxEventSource { * Default is false. */ // getChildCells(parent: mxCell, vertices: boolean, edges: boolean): Array; - getChildCells(parent: mxCell | null, + getChildCells(parent: mxCell, vertices: boolean=false, - edges: boolean=false): (mxCell | null)[] { + edges: boolean=false): mxCell[] { - const childCount = this.getChildCount(parent); + const childCount = parent.getChildCount(); const result = []; for (let i = 0; i < childCount; i += 1) { - const child = this.getChildAt(parent, i); + const child = parent.getChildAt(i); if ( (!edges && !vertices) || - (edges && this.isEdge(child)) || - (vertices && this.isVertex(child)) + (edges && child.isEdge()) || + (vertices && child.isVertex()) ) { result.push(child); } @@ -988,9 +991,10 @@ class mxGraphModel extends mxEventSource { * @param isSource Boolean indicating which end of the edge should be returned. */ // getTerminal(edge: mxCell, isSource: boolean): mxCell; - getTerminal(edge: mxCell | null, + getTerminal(edge: mxCell, isSource: boolean=false): mxCell | null { - return edge != null ? edge.getTerminal(isSource) : null; + // SLATED FOR DELETION + return edge.getTerminal(isSource); } /** @@ -1005,15 +1009,15 @@ class mxGraphModel extends mxEventSource { * target terminal of the edge. */ // setTerminal(edge: mxCell, terminal: mxCell, isSource: boolean): mxCell; - setTerminal(edge: mxCell | null, + setTerminal(edge: mxCell, terminal: mxCell | null, isSource: boolean): mxCell | null { - const terminalChanged = terminal !== this.getTerminal(edge, isSource); + const terminalChanged = terminal !== edge.getTerminal(isSource); this.execute(new mxTerminalChange(this, edge, terminal, isSource)); if (this.maintainEdgeParent && terminalChanged) { - this.updateEdgeParent(edge, this.getRoot()); + this.updateEdgeParent(edge, this.getRoot()); } return terminal; } @@ -1027,7 +1031,7 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} target that specifies the new target terminal. */ // setTerminals(edge: mxCell, source: mxCell, target: mxCell): void; - setTerminals(edge: mxCell | null, + setTerminals(edge: mxCell, source: mxCell | null, target: mxCell | null): void { @@ -1050,11 +1054,11 @@ class mxGraphModel extends mxEventSource { * target terminal of the edge. */ // terminalForCellChanged(edge: mxCell, terminal: mxCell, isSource: boolean): mxCell; - terminalForCellChanged(edge: mxCell | null, + terminalForCellChanged(edge: mxCell, terminal: mxCell | null, isSource: boolean=false): mxCell | null { - const previous = this.getTerminal(edge, isSource); + const previous = edge.getTerminal(isSource); if (terminal != null) { terminal.insertEdge(edge, isSource); } else if (previous != null) { @@ -1070,7 +1074,8 @@ class mxGraphModel extends mxEventSource { */ // getEdgeCount(cell: mxCell): number; getEdgeCount(cell: mxCell): number { - return cell != null ? cell.getEdgeCount() : 0; + // SLATED FOR DELETION + return cell.getEdgeCount(); } /** @@ -1083,7 +1088,8 @@ class mxGraphModel extends mxEventSource { // getEdgeAt(cell: mxCell, index: number): mxCell; getEdgeAt(cell: mxCell, index: number): mxCell | null { - return cell != null ? cell.getEdgeAt(index) : null; + // SLATED FOR DELETION + return cell.getEdgeAt(index); } /** @@ -1100,11 +1106,11 @@ class mxGraphModel extends mxEventSource { outgoing: boolean, ignoredEdge: mxCell | null=null): number { let count = 0; - const edgeCount = this.getEdgeCount(cell); + const edgeCount = cell.getEdgeCount(); for (let i = 0; i < edgeCount; i += 1) { - const edge = this.getEdgeAt(cell, i); - if (edge !== ignoredEdge && this.getTerminal(edge, outgoing) === cell) { + const edge = cell.getEdgeAt(i); + if (edge !== ignoredEdge && edge && edge.getTerminal(outgoing) === cell) { count += 1; } } @@ -1129,7 +1135,7 @@ class mxGraphModel extends mxEventSource { * */ // getIncomingEdges(cell: mxCell): Array; - getIncomingEdges(cell: mxCell): (mxCell | null)[] { + getIncomingEdges(cell: mxCell): mxCell[] { return this.getEdges(cell, true, false, false); } @@ -1140,7 +1146,7 @@ class mxGraphModel extends mxEventSource { * */ // getOutgoingEdges(cell: mxCell): Array; - getOutgoingEdges(cell: mxCell): (mxCell | null)[] { + getOutgoingEdges(cell: mxCell): mxCell[] { return this.getEdges(cell, false, true, false); } @@ -1164,13 +1170,13 @@ class mxGraphModel extends mxEventSource { outgoing: boolean=true, includeLoops: boolean=true) { - const edgeCount = this.getEdgeCount(cell); + const edgeCount = cell.getEdgeCount(); const result = []; for (let i = 0; i < edgeCount; i += 1) { - const edge = this.getEdgeAt(cell, i); - const source = this.getTerminal(edge, true); - const target = this.getTerminal(edge, false); + const edge = cell.getEdgeAt(i); + const source = edge.getTerminal(true); + const target = edge.getTerminal(false); if ( (includeLoops && source === target) || @@ -1201,8 +1207,8 @@ class mxGraphModel extends mxEventSource { target: mxCell, directed: boolean=false) { - const tmp1 = this.getEdgeCount(source); - const tmp2 = this.getEdgeCount(target); + const tmp1 = source.getEdgeCount(); + const tmp2 = target.getEdgeCount(); // Assumes the source has less connected edges let terminal = source; @@ -1220,9 +1226,9 @@ class mxGraphModel extends mxEventSource { // Checks if the edge is connected to the correct // cell and returns the first match for (let i = 0; i < edgeCount; i += 1) { - const edge = this.getEdgeAt(terminal, i); - const src = this.getTerminal(edge, true); - const trg = this.getTerminal(edge, false); + const edge = terminal.getEdgeAt(i); + const src = edge.getTerminal(true); + const trg = edge.getTerminal(false); const directedMatch = src === source && trg === target; const oppositeMatch = trg === source && src === target; @@ -1230,7 +1236,6 @@ class mxGraphModel extends mxEventSource { result.push(edge); } } - return result; } @@ -1254,37 +1259,34 @@ class mxGraphModel extends mxEventSource { const terminals = []; - if (edges != null) { - for (let i = 0; i < edges.length; i += 1) { - const source = this.getTerminal(edges[i], true); - const target = this.getTerminal(edges[i], false); + for (let i = 0; i < edges.length; i += 1) { + const source = edges[i].getTerminal(true); + const target = edges[i].getTerminal(false); - // Checks if the terminal is the source of - // the edge and if the target should be - // stored in the result - if ( - source === terminal && - target != null && - target !== terminal && - targets - ) { - terminals.push(target); - } + // Checks if the terminal is the source of + // the edge and if the target should be + // stored in the result + if ( + source === terminal && + target != null && + target !== terminal && + targets + ) { + terminals.push(target); + } - // Checks if the terminal is the taget of - // the edge and if the source should be - // stored in the result - else if ( - target === terminal && - source != null && - source !== terminal && - sources - ) { - terminals.push(source); - } + // Checks if the terminal is the taget of + // the edge and if the source should be + // stored in the result + else if ( + target === terminal && + source != null && + source !== terminal && + sources + ) { + terminals.push(source); } } - return terminals; } @@ -1307,22 +1309,20 @@ class mxGraphModel extends mxEventSource { for (let i = 0; i < cells.length; i += 1) { const cell = cells[i]; let topmost = true; - let parent = this.getParent(cell); + let parent = cell.getParent(); while (parent != null) { if (dict.get(parent)) { topmost = false; break; } - - parent = this.getParent(parent); + parent = parent.getParent(); } if (topmost) { tmp.push(cell); } } - return tmp; } @@ -1332,8 +1332,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell that represents the possible vertex. */ // isVertex(cell: mxCell): boolean; - isVertex(cell: mxCell | null): boolean { - return cell != null ? cell.isVertex() : false; + isVertex(cell: mxCell): boolean { + // SLATED FOR DELETION + return cell.isVertex(); } /** @@ -1342,8 +1343,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell that represents the possible edge. */ // isEdge(cell: mxCell): boolean; - isEdge(cell: mxCell | null): boolean { - return cell != null ? cell.isEdge() : false; + isEdge(cell: mxCell): boolean { + // SLATED FOR DELETION + return cell.isEdge(); } /** @@ -1354,8 +1356,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose connectable state should be returned. */ // isConnectable(cell: mxCell): boolean; - isConnectable(cell: mxCell | null) { - return cell != null ? cell.isConnectable() : false; + isConnectable(cell: mxCell) { + // SLATED FOR DELECTION + return cell.isConnectable(); } /** @@ -1364,8 +1367,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose user object should be returned. */ // getValue(cell: mxCell): any; - getValue(cell: mxCell | null) { - return cell != null ? cell.getValue() : null; + getValue(cell: mxCell) { + // SLATED FOR DELETION + return cell.getValue(); } /** @@ -1412,8 +1416,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose geometry should be returned. */ // getGeometry(cell: mxCell): mxGeometry; - getGeometry(cell: mxCell | null): mxGeometry | null { - return cell != null ? cell.getGeometry() : null; + getGeometry(cell: mxCell): mxGeometry | null { + // SLATED FOR DELETION + return cell.getGeometry(); } /** @@ -1425,10 +1430,10 @@ class mxGraphModel extends mxEventSource { * @param {mxGeometry} geometry that defines the new geometry. */ // setGeometry(cell: mxCell, geometry: mxGeometry): mxGeometry; - setGeometry(cell: mxCell | null, + setGeometry(cell: mxCell, geometry: mxGeometry): mxGeometry { - if (geometry !== this.getGeometry(cell)) { + if (geometry !== cell.getGeometry()) { this.execute(new mxGeometryChange(this, cell, geometry)); } return geometry; @@ -1442,7 +1447,7 @@ class mxGraphModel extends mxEventSource { geometryForCellChanged(cell: mxCell, geometry: mxGeometry): mxGeometry | null { - const previous = this.getGeometry(cell); + const previous = cell.getGeometry(); cell.setGeometry(geometry); return previous; } @@ -1454,6 +1459,7 @@ class mxGraphModel extends mxEventSource { */ // getStyle(cell: mxCell): string | null; getStyle(cell: mxCell | null): any { + // SLATED FOR DELETION return cell != null ? cell.getStyle() : null; } @@ -1469,7 +1475,7 @@ class mxGraphModel extends mxEventSource { setStyle(cell: mxCell, style: any): any { - if (style !== this.getStyle(cell)) { + if (style !== cell.getStyle()) { this.execute(new mxStyleChange(this, cell, style)); } return style; @@ -1487,7 +1493,7 @@ class mxGraphModel extends mxEventSource { styleForCellChanged(cell: mxCell, style: any): mxCell | null { - const previous = this.getStyle(cell); + const previous = cell.getStyle(); cell.setStyle(style); return previous; } @@ -1498,8 +1504,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose collapsed state should be returned. */ // isCollapsed(cell: mxCell): boolean; - isCollapsed(cell: mxCell | null): boolean { - return cell != null ? cell.isCollapsed() : false; + isCollapsed(cell: mxCell): boolean { + // SLATED FOR DELETION + return cell.isCollapsed(); } /** @@ -1513,7 +1520,7 @@ class mxGraphModel extends mxEventSource { setCollapsed(cell: mxCell, collapsed: boolean): boolean { - if (collapsed !== this.isCollapsed(cell)) { + if (collapsed !== cell.isCollapsed()) { this.execute(new mxCollapseChange(this, cell, collapsed)); } return collapsed; @@ -1531,7 +1538,7 @@ class mxGraphModel extends mxEventSource { collapsedStateForCellChanged(cell: mxCell, collapsed: boolean): boolean { - const previous = this.isCollapsed(cell); + const previous = cell.isCollapsed(); cell.setCollapsed(collapsed); return previous; } @@ -1542,8 +1549,9 @@ class mxGraphModel extends mxEventSource { * @param {mxCell} cell whose visible state should be returned. */ // isVisible(cell: mxCell): boolean; - isVisible(cell: mxCell | null): boolean { - return cell != null ? cell.isVisible() : false; + isVisible(cell: mxCell): boolean { + // SLATED FOR DELETION + return cell.isVisible(); } /** @@ -1557,7 +1565,7 @@ class mxGraphModel extends mxEventSource { setVisible(cell: mxCell, visible: boolean) { - if (visible !== this.isVisible(cell)) { + if (visible !== cell.isVisible()) { this.execute(new mxVisibleChange(this, cell, visible)); } return visible; @@ -1574,7 +1582,7 @@ class mxGraphModel extends mxEventSource { // visibleStateForCellChanged(cell: mxCell, visible: boolean): boolean; visibleStateForCellChanged(cell: mxCell, visible: boolean): boolean { - const previous = this.isVisible(cell); + const previous = cell.isVisible(); cell.setVisible(visible); return previous; } @@ -1740,14 +1748,14 @@ class mxGraphModel extends mxEventSource { // cells in the target model for (const key in mapping) { const cell = mapping[key]; - let terminal = this.getTerminal(cell, true); + let terminal = cell.getTerminal(true); if (terminal != null) { terminal = mapping[mxCellPath.create(terminal)]; this.setTerminal(cell, terminal, true); } - terminal = this.getTerminal(cell, false); + terminal = cell.getTerminal(false); if (terminal != null) { terminal = mapping[mxCellPath.create(terminal)]; @@ -1781,7 +1789,7 @@ class mxGraphModel extends mxEventSource { if (typeof cell.getId === 'function') { const id: string = cell.getId(); let target = - id != null && (!this.isEdge(cell) || !cloneAllEdges) + id != null && (!cell.isEdge() || !cloneAllEdges) ? this.getCell(id) : null; @@ -1828,8 +1836,7 @@ class mxGraphModel extends mxEventSource { const dict = new mxDictionary(); for (const cell of cells) { - const parent = this.getParent(cell); - + const parent = cell.getParent(); if (parent != null && !dict.get(parent)) { dict.put(parent, true); parents.push(parent); @@ -1872,21 +1879,17 @@ class mxGraphModel extends mxEventSource { // cloneCells(cells: Array, includeChildren?: boolean, mapping?: any): Array; cloneCells(cells: mxCell[], includeChildren: boolean=true, - mapping: any={}): (mxCell | null)[] { + mapping: any={}): mxCell[] { - const clones: (mxCell | null)[] = []; + const clones: mxCell[] = []; for (let i = 0; i < cells.length; i += 1) { - if (cells[i] != null) { - clones.push(this.cloneCellImpl(cells[i], mapping, includeChildren)); - } else { - clones.push(null); - } + clones.push(this.cloneCellImpl(cells[i], mapping, includeChildren)); } for (let i = 0; i < clones.length; i += 1) { if (clones[i] != null) { - this.restoreClone(clones[i], cells[i], mapping); + this.restoreClone(clones[i], cells[i], mapping); } } return clones; @@ -1904,15 +1907,15 @@ class mxGraphModel extends mxEventSource { let clone = mapping ? mapping[ident] : null; if (clone == null) { - clone = this.cellCloned(cell); + clone = cell.clone(); mapping[ident] = clone; if (includeChildren) { - const childCount = this.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { const cloneChild = this.cloneCellImpl( - this.getChildAt(cell, i), + cell.getChildAt(i), mapping, true ); @@ -1929,6 +1932,7 @@ class mxGraphModel extends mxEventSource { */ // cellCloned(cell: mxCell): mxCell; cellCloned(cell: mxCell): mxCell { + // SLATED FOR DELETION return cell.clone(); } @@ -1937,11 +1941,11 @@ class mxGraphModel extends mxEventSource { * a network of cloned cells. */ // restoreClone(clone: mxCell, cell: mxCell, mapping?: any): void; - restoreClone(clone: mxCell | null, - cell: mxCell | null, + restoreClone(clone: mxCell, + cell: mxCell, mapping: any): void { - const source = this.getTerminal(cell, true); + const source = cell.getTerminal(true); if (source != null) { const tmp = mapping[mxObjectIdentity.get(source)]; @@ -1950,7 +1954,7 @@ class mxGraphModel extends mxEventSource { } } - const target = this.getTerminal(cell, false); + const target = cell.getTerminal(false); if (target != null) { const tmp = mapping[mxObjectIdentity.get(target)]; if (tmp != null) { @@ -1958,11 +1962,11 @@ class mxGraphModel extends mxEventSource { } } - const childCount = this.getChildCount(clone); + const childCount = clone.getChildCount(); for (let i = 0; i < childCount; i += 1) { this.restoreClone( - this.getChildAt(clone, i), - this.getChildAt(cell, i), + clone.getChildAt(i), + cell.getChildAt(i), mapping ); } diff --git a/packages/core/src/view/graph/mxGraphSelectionModel.ts b/packages/core/src/view/graph/mxGraphSelectionModel.ts index 121817cf3..1b7fc5867 100644 --- a/packages/core/src/view/graph/mxGraphSelectionModel.ts +++ b/packages/core/src/view/graph/mxGraphSelectionModel.ts @@ -10,7 +10,7 @@ import mxEventSource from '../../util/event/mxEventSource'; import mxEventObject from '../../util/event/mxEventObject'; import mxClient from '../../mxClient'; import mxUtils from '../../util/mxUtils'; -import mxSelectionChange from './mxSelectionChange'; +import mxSelectionChange from '../../atomic_changes/mxSelectionChange'; import mxEvent from '../../util/event/mxEvent'; import mxCell from '../cell/mxCell'; import mxGraph from './mxGraph'; diff --git a/packages/core/src/view/graph/mxGraphView.ts b/packages/core/src/view/graph/mxGraphView.ts index 5bf3eb0a7..f3ddb5b07 100644 --- a/packages/core/src/view/graph/mxGraphView.ts +++ b/packages/core/src/view/graph/mxGraphView.ts @@ -25,7 +25,7 @@ import mxStyleRegistry from '../../util/datatypes/style/mxStyleRegistry'; import mxGraph from './mxGraph'; import mxCell from '../cell/mxCell'; import mxImage from '../../util/image/mxImage'; -import mxCurrentRootChange from './mxCurrentRootChange'; +import mxCurrentRootChange from '../../atomic_changes/mxCurrentRootChange'; import mxGraphModel from './mxGraphModel'; import mxShape from '../../shape/mxShape'; import mxGeometry from "../../util/datatypes/mxGeometry"; @@ -371,10 +371,8 @@ class mxGraphView extends mxEventSource { let result = null; if (cells != null && cells.length > 0) { - const model = (this.graph).getModel(); - for (let i = 0; i < cells.length; i += 1) { - if (model.isVertex(cells[i]) || model.isEdge(cells[i])) { + if (cells[i].isVertex() || cells[i].isEdge()) { const state = this.getState(cells[i]); if (state != null) { @@ -497,22 +495,20 @@ class mxGraphView extends mxEventSource { * @param force Boolean indicating if the current root should be ignored for * recursion. */ - // clear(cell?: mxCell, force?: boolean, recurse?: boolean): void; + // clear(cell: mxCell, force?: boolean, recurse?: boolean): void; clear( - cell: mxCell | null = null, + cell: mxCell=(this.graph).getModel().getRoot(), force: boolean = false, recurse: boolean = true ) { const model: mxGraphModel = (this.graph).getModel(); - cell = cell || model.getRoot(); - this.removeState(cell); if (recurse && (force || cell != this.currentRoot)) { - const childCount: number = model.getChildCount(cell); + const childCount: number = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.clear(model.getChildAt(cell, i), force); + this.clear(cell.getChildAt(i), force); } } else { this.invalidate(cell); @@ -547,20 +543,20 @@ class mxGraphView extends mxEventSource { // Recursively invalidates all descendants if (recurse) { - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(cell, i); + const child = cell.getChildAt(i); this.invalidate(child, recurse, includeEdges); } } // Propagates invalidation to all connected edges if (includeEdges) { - const edgeCount = model.getEdgeCount(cell); + const edgeCount = cell.getEdgeCount(); for (let i = 0; i < edgeCount; i += 1) { - this.invalidate(model.getEdgeAt(cell, i), recurse, includeEdges); + this.invalidate(cell.getEdgeAt(i), recurse, includeEdges); } } @@ -577,7 +573,7 @@ class mxGraphView extends mxEventSource { * Default is {@link currentRoot} or the root of the model. */ // validate(cell?: mxCell): void; - validate(cell: mxCell | null = null) { + validate(cell: mxCell | null=null) { const t0 = mxLog.enter('mxGraphView.validate'); window.status = mxResources.get(this.updatingDocumentResource) || @@ -588,10 +584,10 @@ class mxGraphView extends mxEventSource { const graphBounds = this.getBoundingBox( this.validateCellState( this.validateCell( - cell || + (cell || (this.currentRoot != null ? this.currentRoot - : (this.graph).getModel().getRoot()) + : (this.graph).getModel().getRoot())) ) ) ); @@ -646,11 +642,11 @@ class mxGraphView extends mxEventSource { if (recurse) { const model = (this.graph).getModel(); - const childCount = model.getChildCount(state.cell); + const childCount = state.cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { const bounds = this.getBoundingBox( - this.getState(model.getChildAt(state.cell, i)) + this.getState(state.cell.getChildAt(i)) ); if (bounds != null) { @@ -847,26 +843,24 @@ class mxGraphView extends mxEventSource { * is true. */ // validateCell(cell: mxCell, visible?: boolean): void; - validateCell(cell: mxCell | null=null, + validateCell(cell: mxCell, visible: boolean = true): mxCell | null { - if (cell != null) { - visible = visible && (this.graph).isCellVisible(cell); - const state = this.getState(cell, visible); + visible = visible && cell.isVisible(); + const state = this.getState(cell, visible); - if (state != null && !visible) { - this.removeState(cell); - } else { - const model = (this.graph).getModel(); - const childCount = model.getChildCount(cell); + if (state != null && !visible) { + this.removeState(cell); + } else { + const model = (this.graph).getModel(); + const childCount = cell.getChildCount(); - for (let i = 0; i < childCount; i += 1) { - this.validateCell( - model.getChildAt(cell, i), - visible && - (!this.isCellCollapsed(cell) || cell === this.currentRoot) - ); - } + for (let i = 0; i < childCount; i += 1) { + this.validateCell( + cell.getChildAt(i), + visible && + (!this.isCellCollapsed(cell) || cell === this.currentRoot) + ); } } return cell; @@ -899,7 +893,7 @@ class mxGraphView extends mxEventSource { } if (cell !== this.currentRoot) { - this.validateCellState(model.getParent(cell), false); + this.validateCellState(cell.getParent(), false); } state.setVisibleTerminalState( @@ -928,9 +922,9 @@ class mxGraphView extends mxEventSource { this.stateValidated(state); } - const childCount = model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i += 1) { - this.validateCellState(model.getChildAt(cell, i)); + this.validateCellState(cell.getChildAt(i)); } } } @@ -957,7 +951,7 @@ class mxGraphView extends mxEventSource { if (state.cell !== this.currentRoot) { const model = (this.graph).getModel(); - const pState = this.getState(model.getParent(state.cell)); + const pState = this.getState(state.cell.getParent()); if (pState != null && pState.cell !== this.currentRoot) { origin.x += (pState.origin).x; @@ -974,11 +968,11 @@ class mxGraphView extends mxEventSource { const geo = (this.graph).getCellGeometry(state.cell); if (geo != null) { - if (!model.isEdge(state.cell)) { + if (!state.cell.isEdge()) { offset = (geo.offset != null ? geo.offset : this.EMPTY_POINT); if (geo.relative && pState != null) { - if (model.isEdge(pState.cell)) { + if (pState.cell.isEdge()) { const origin = this.getPoint(pState, geo); if (origin != null) { @@ -1006,11 +1000,11 @@ class mxGraphView extends mxEventSource { state.height = this.scale * geo.height; state.unscaledHeight = geo.height; - if (model.isVertex(state.cell)) { + if (state.cell.isVertex()) { this.updateVertexState(state, geo); } - if (model.isEdge(state.cell)) { + if (state.cell.isEdge()) { this.updateEdgeState(state, geo); } } @@ -1021,7 +1015,7 @@ class mxGraphView extends mxEventSource { /** * Returns true if the children of the given cell should not be visible in the - * view. This implementation uses {@link mxGraph.isCellVisible} but it can be + * view. This implementation uses {@link mxCell.isCellVisible} but it can be * overidden to use a separate condition. */ // isCellCollapsed(cell: mxCell): boolean; @@ -1037,9 +1031,9 @@ class mxGraphView extends mxEventSource { geo: mxGeometry) { const model = (this.graph).getModel(); - const pState = this.getState(model.getParent(state.cell)); + const pState = this.getState(state.cell.getParent()); - if (geo.relative && pState != null && !model.isEdge(pState.cell)) { + if (geo.relative && pState != null && !pState.cell.isEdge()) { const alpha = mxUtils.toRadians( pState.style[mxConstants.STYLE_ROTATION] || '0' ); @@ -1071,10 +1065,10 @@ class mxGraphView extends mxEventSource { // as such edges are invalid and produce NPEs in the edge styles. // Also removes connected edges that have no visible terminals. if ( - (((this.graph).model).getTerminal(state.cell, true) != null && + (state.cell.getTerminal(true) != null && source == null) || (source == null && geo.getTerminalPoint(true) == null) || - (((this.graph).model).getTerminal(state.cell, false) != null && + (state.cell.getTerminal(false) != null && target == null) || (target == null && geo.getTerminalPoint(false) == null) ) { @@ -1200,9 +1194,9 @@ class mxGraphView extends mxEventSource { stateValidated(state: mxCellState): void { const graph = (this.graph); const fg = - (graph.getModel().isEdge(state.cell) && + (state.cell.isEdge() && graph.keepEdgesInForeground) || - (graph.getModel().isVertex(state.cell) && + (state.cell.isVertex() && graph.keepEdgesInBackground); const htmlNode = fg ? this.lastForegroundHtmlNode || this.lastHtmlNode @@ -1651,7 +1645,7 @@ class mxGraphView extends mxEventSource { let flipH = false; let flipV = false; - if (((this.graph).model).isVertex(terminal.cell)) { + if (terminal.cell.isVertex()) { flipH = mxUtils.getValue(terminal.style, mxConstants.STYLE_FLIPH, 0) == 1; flipV = @@ -1835,26 +1829,26 @@ class mxGraphView extends mxEventSource { * should be returned. */ // getVisibleTerminal(edge: mxCell, source: boolean): mxCell; - getVisibleTerminal(edge: mxCell | null, + getVisibleTerminal(edge: mxCell, source: boolean) { const model = (this.graph).getModel(); - let result = model.getTerminal(edge, source); + let result = edge.getTerminal(source); let best = result; while (result != null && result != this.currentRoot) { - if (!(this.graph).isCellVisible(best) || this.isCellCollapsed(result)) { + if ((best && !best.isVisible()) || this.isCellCollapsed(result)) { best = result; } - result = model.getParent(result); + result = result.getParent(); } // Checks if the result is valid for the current view state if ( best != null && (!model.contains(best) || - model.getParent(best) === model.getRoot() || + best.getParent() === model.getRoot() || best === this.currentRoot) ) { best = null; @@ -2007,7 +2001,7 @@ class mxGraphView extends mxEventSource { y: number) { const model = (this.graph).getModel(); - const geometry = model.getGeometry(edgeState.cell); + const geometry = edgeState.cell.getGeometry(); if (geometry != null) { const absolutePoints = (edgeState.absolutePoints); @@ -2168,7 +2162,7 @@ class mxGraphView extends mxEventSource { if ( create && (state == null || this.updateStyle) && - (this.graph).isCellVisible(cell) + cell.isVisible() ) { if (state == null) { state = this.createState(cell); @@ -2521,7 +2515,7 @@ class mxGraphView extends mxEventSource { } if (root != null && root.parentNode != null) { - this.clear(this.currentRoot, true); + this.clear(this.currentRoot, true); mxEvent.removeGestureListeners( document, null, diff --git a/packages/core/src/view/graph/mxLayoutManager.ts b/packages/core/src/view/graph/mxLayoutManager.ts index 2ff47d03f..85e8dda8f 100644 --- a/packages/core/src/view/graph/mxLayoutManager.ts +++ b/packages/core/src/view/graph/mxLayoutManager.ts @@ -243,7 +243,7 @@ class mxLayoutManager extends mxEventSource { for (let i = 0; i < cells.length; i += 1) { const layout = this.getLayout( - model.getParent(cells[i]), + cells[i].getParent(), mxEvent.MOVE_CELLS ); @@ -271,7 +271,7 @@ class mxLayoutManager extends mxEventSource { for (let i = 0; i < cells.length; i += 1) { const layout = this.getLayout( - model.getParent(cells[i]), + cells[i].getParent(), mxEvent.RESIZE_CELLS ); if (layout != null) { @@ -349,7 +349,7 @@ class mxLayoutManager extends mxEventSource { if (this.isBubbling()) { const model = (this.getGraph()).getModel(); - this.addAncestorsWithLayout(model.getParent(cell), result); + this.addAncestorsWithLayout(cell.getParent(), result); } } return result; @@ -363,8 +363,8 @@ class mxLayoutManager extends mxEventSource { if (cell != null && this.hasLayout(cell)) { const model = (this.getGraph()).getModel(); - for (let i = 0; i < model.getChildCount(cell); i += 1) { - const child = model.getChildAt(cell, i); + for (let i = 0; i < cell.getChildCount(); i += 1) { + const child = cell.getChildAt(i); if (this.hasLayout(child)) { result.push(child); diff --git a/packages/core/src/view/graph/mxSwimlaneManager.ts b/packages/core/src/view/graph/mxSwimlaneManager.ts index 11714fb2c..a172f3284 100644 --- a/packages/core/src/view/graph/mxSwimlaneManager.ts +++ b/packages/core/src/view/graph/mxSwimlaneManager.ts @@ -245,17 +245,16 @@ class mxSwimlaneManager extends mxEventSource { */ // swimlaneAdded(swimlane: mxCell): void; swimlaneAdded(swimlane: mxCell): void { - const model = (this.getGraph()).getModel(); - const parent = model.getParent(swimlane); - const childCount = model.getChildCount(parent); + const parent = swimlane.getParent(); + const childCount = parent.getChildCount(); let geo = null; // Finds the first valid sibling swimlane as reference for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(parent, i); + const child = parent.getChildAt(i); if (child !== swimlane && !this.isSwimlaneIgnored(child)) { - geo = model.getGeometry(child); + geo = child.getGeometry(); if (geo != null) { break; } @@ -286,7 +285,7 @@ class mxSwimlaneManager extends mxEventSource { // Finds the top-level swimlanes and adds offsets for (const cell of cells) { if (!this.isSwimlaneIgnored(cell)) { - const geo = model.getGeometry(cell); + const geo = cell.getGeometry(); if (geo != null) { const size = new mxRectangle(0, 0, geo.width, geo.height); @@ -295,7 +294,7 @@ class mxSwimlaneManager extends mxEventSource { while (current != null) { top = current; - current = model.getParent(current); + current = current.getParent(); const tmp = (this.graph).isSwimlane(current) ? (this.graph).getStartSize(current) : new mxRectangle(); @@ -342,7 +341,7 @@ class mxSwimlaneManager extends mxEventSource { const horizontal = this.isCellHorizontal(swimlane); if (!this.isSwimlaneIgnored(swimlane)) { - let geo = model.getGeometry(swimlane); + let geo = swimlane.getGeometry(); if (geo != null) { if ( @@ -368,10 +367,10 @@ class mxSwimlaneManager extends mxEventSource { w -= tmp.width; h -= tmp.height; - const childCount = model.getChildCount(swimlane); + const childCount = swimlane.getChildCount(); for (let i = 0; i < childCount; i += 1) { - const child = model.getChildAt(swimlane, i); + const child = swimlane.getChildAt(i); this.resizeSwimlane(child, w, h, horizontal); } } finally { diff --git a/src/pages/connections/EdgeTolerance.js b/src/pages/connections/EdgeTolerance.js index 2434518d8..7f72825c7 100644 --- a/src/pages/connections/EdgeTolerance.js +++ b/src/pages/connections/EdgeTolerance.js @@ -57,7 +57,7 @@ class EdgeTolerance extends React.Component { } const cell = this.getCellAt(me.graphX, me.graphY); - if (this.getModel().isEdge(cell)) { + if (cell.isEdge()) { me.state = this.view.getState(cell); if (me.state != null && me.state.shape != null) { diff --git a/src/pages/connections/FixedPoints.js b/src/pages/connections/FixedPoints.js index df7e5ab3c..dc6d8fb6e 100644 --- a/src/pages/connections/FixedPoints.js +++ b/src/pages/connections/FixedPoints.js @@ -144,7 +144,7 @@ class FixedPoints extends React.Component { } getAllConnectionConstraints(terminal) { - if (terminal != null && this.model.isVertex(terminal.cell)) { + if (terminal != null && terminal.cell.isVertex()) { return [ new mxConnectionConstraint(new mxPoint(0, 0), true), new mxConnectionConstraint(new mxPoint(0.5, 0), true), diff --git a/src/pages/connections/HelloPort.js b/src/pages/connections/HelloPort.js index e2a45a5ab..25d194b43 100644 --- a/src/pages/connections/HelloPort.js +++ b/src/pages/connections/HelloPort.js @@ -66,11 +66,11 @@ class HelloPort extends React.Component { // Implements a tooltip that shows the actual // source and target of an edge graph.getTooltipForCell = function(cell) { - if (this.model.isEdge(cell)) { + if (cell.isEdge()) { return `${this.convertValueToString( - this.model.getTerminal(cell, true) + cell.getTerminal(true) )} => ${this.convertValueToString( - this.model.getTerminal(cell, false) + cell.getTerminal(false) )}`; } diff --git a/src/pages/connections/PortRefs.js b/src/pages/connections/PortRefs.js index a12cc3be9..750b5f587 100644 --- a/src/pages/connections/PortRefs.js +++ b/src/pages/connections/PortRefs.js @@ -139,7 +139,7 @@ class PortRefs extends React.Component { if (terminal.shape.stencil != null) { return terminal.shape.stencil.constraints; } - } else if (terminal != null && this.model.isVertex(terminal.cell)) { + } else if (terminal != null && terminal.cell.isVertex()) { if (terminal.shape != null) { const ports = terminal.shape.getPorts(); const cstrs = new Array(); diff --git a/src/pages/dnd_copypaste/Clipboard.js b/src/pages/dnd_copypaste/Clipboard.js index 30e00f922..cc2524dc1 100644 --- a/src/pages/dnd_copypaste/Clipboard.js +++ b/src/pages/dnd_copypaste/Clipboard.js @@ -52,7 +52,7 @@ class Clipboard extends React.Component { mxClipboard.cellsToString = function(cells) { const codec = new mxCodec(); const model = new mxGraphModel(); - const parent = model.getChildAt(model.getRoot(), 0); + const parent = model.getRoot().getChildAt(0); for (let i = 0; i < cells.length; i++) { model.add(parent, cells[i]); @@ -200,16 +200,14 @@ class Clipboard extends React.Component { const codec = new mxCodec(node.ownerDocument); codec.decode(node, model); - const childCount = model.getChildCount(model.getRoot()); - const targetChildCount = graph.model.getChildCount( - graph.model.getRoot() - ); + const childCount = model.getRoot().getChildCount(); + const targetChildCount = graph.model.getRoot().getChildCount(); // Merges existing layers and adds new layers graph.model.beginUpdate(); try { for (let i = 0; i < childCount; i++) { - let parent = model.getChildAt(model.getRoot(), i); + let parent = model.getRoot().getChildAt(i); // Adds cells to existing layers if not locked if (targetChildCount > i) { @@ -217,10 +215,10 @@ class Clipboard extends React.Component { const target = childCount === 1 ? graph.getDefaultParent() - : graph.model.getChildAt(graph.model.getRoot(), i); + : graph.model.getRoot().getChildAt(i); if (!graph.isCellLocked(target)) { - const children = model.getChildren(parent); + const children = parent.getChildren(); cells = cells.concat( graph.importCells(children, dx, dy, target) ); @@ -233,7 +231,7 @@ class Clipboard extends React.Component { 0, graph.model.getRoot() )[0]; - const children = graph.model.getChildren(parent); + const children = parent.getChildren(); graph.moveCells(children, dx, dy); cells = cells.concat(children); } diff --git a/src/pages/events/Boundary.js b/src/pages/events/Boundary.js index cf9722de9..a44a06413 100644 --- a/src/pages/events/Boundary.js +++ b/src/pages/events/Boundary.js @@ -51,10 +51,10 @@ class Boundary extends React.Component { // Removes folding icon for relative children isCellFoldable(cell, collapse) { - const childCount = this.model.getChildCount(cell); + const childCount = cell.getChildCount(); for (let i = 0; i < childCount; i++) { - const child = this.model.getChildAt(cell, i); + const child = cell.getChildAt(i); const geo = this.getCellGeometry(child); if (geo != null && geo.relative) { @@ -69,12 +69,12 @@ class Boundary extends React.Component { getRelativePosition(state, dx, dy) { if (state != null) { const model = graph.getModel(); - const geo = model.getGeometry(state.cell); + const geo = state.cell.getGeometry(); - if (geo != null && geo.relative && !model.isEdge(state.cell)) { - const parent = model.getParent(state.cell); + if (geo != null && geo.relative && !state.cell.isEdge()) { + const parent = state.cell.getParent(); - if (model.isVertex(parent)) { + if (parent.isVertex()) { const pstate = graph.view.getState(parent); if (pstate != null) { @@ -116,7 +116,7 @@ class Boundary extends React.Component { ); if (rel != null) { - let geo = this.model.getGeometry(cell); + let geo = cell.getGeometry(); if (geo != null && geo.relative) { geo = geo.clone(); @@ -164,7 +164,7 @@ class Boundary extends React.Component { if (rel != null) { const pstate = this.graph.view.getState( - this.graph.model.getParent(state.cell) + state.cell.getParent() ); if (pstate != null) { diff --git a/src/pages/examplesListing.json b/src/pages/examplesListing.json index 1551bec54..9323be2be 100644 --- a/src/pages/examplesListing.json +++ b/src/pages/examplesListing.json @@ -25,7 +25,7 @@ "SourceCodeDisplay": "import { Component } from 'react';\nimport Prism from 'prismjs';\nimport 'prismjs/themes/prism-okaidia.css';\nimport 'prismjs/components/prism-markup-templating';\nimport 'prismjs/components/prism-handlebars.min.js';\nimport 'prismjs/components/prism-lua.min.js';\nimport 'prismjs/components/prism-c.min.js';\nimport 'prismjs/components/prism-cpp.min.js';\nimport 'prismjs/components/prism-ruby.min.js';\nimport 'prismjs/components/prism-java.min.js';\nimport 'prismjs/components/prism-javascript.min.js';\nimport 'prismjs/components/prism-bash.min.js';\nimport 'prismjs/components/prism-csharp.min.js';\nimport 'prismjs/components/prism-css.min.js';\nimport 'prismjs/components/prism-typescript.min.js';\nimport 'prismjs/components/prism-yaml.min.js';\nimport 'prismjs/components/prism-json.min.js';\nimport 'prismjs/components/prism-swift.min.js';\nimport 'prismjs/components/prism-jsx.min.js';\nimport 'prismjs/components/prism-dart.min.js';\nimport 'prismjs/components/prism-sql.min.js';\nimport 'prismjs/components/prism-rust.min.js';\nimport 'prismjs/components/prism-php.min.js';\nimport 'prismjs/components/prism-perl.min.js';\nimport 'prismjs/components/prism-go.min.js';\nimport 'prismjs/components/prism-docker.min.js';\nimport 'prismjs/components/prism-python.min.js';\n\n// Adapted from\n// https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/\n\nexport class SourceCodeDisplay extends Component {\n /**\n *\n * @param code\n * @param plugins\n * @param language\n */\n constructor({ code, plugins, language, theme, style }) {\n if (plugins == null) {\n plugins = ['line-numbers', 'show-language'];\n }\n super({ code, plugins, language, theme, style });\n }\n\n render() {\n // TODO: Support theme!!!\n return (\n <>\n \n {\n this.el = el;\n }}\n className={`language-${this.props.language}`}\n >\n {(this.props.code || '').trim()}\n \n \n \n );\n }\n\n componentDidMount() {\n if (this.el) {\n Prism.highlightElement(this.el);\n }\n }\n\n componentDidUpdate() {\n if (this.el) {\n Prism.highlightElement(this.el);\n }\n }\n}\n\nexport default SourceCodeDisplay;\n", "DynamicStyle": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstants from '../mxgraph/util/mxConstants';\n\nclass DynamicStyle extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Dynamic Style

\n This example demonstrates changing the style of a cell dynamically by\n overriding mxGraphModel.getStyle.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Disables moving of edge labels in this examples\n graph.edgeLabelsMovable = false;\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Needs to set a flag to check for dynamic style changes,\n // that is, changes to styles on cells where the style was\n // not explicitely changed using mxStyleChange\n graph.getView().updateStyle = true;\n\n // Overrides mxGraphModel.getStyle to return a specific style\n // for edges that reflects their target terminal (in this case\n // the strokeColor will be equal to the target's fillColor).\n const previous = graph.model.getStyle;\n\n graph.model.getStyle = function(cell) {\n if (cell != null) {\n let style = previous.apply(this, arguments);\n\n if (this.isEdge(cell)) {\n const target = this.getTerminal(cell, false);\n\n if (target != null) {\n const targetStyle = graph.getCurrentCellStyle(target);\n const fill = mxUtils.getValue(\n targetStyle,\n mxConstants.STYLE_FILLCOLOR\n );\n\n if (fill != null) {\n style += `;strokeColor=${fill}`;\n }\n }\n } else if (this.isVertex(cell)) {\n const geometry = this.getGeometry(cell);\n\n if (geometry != null && geometry.width > 80) {\n style += ';fillColor=green';\n }\n }\n\n return style;\n }\n\n return null;\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [20, 20],\n size: [80, 30],\n style: 'fillColor=green',\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n style: 'fillColor=blue',\n });\n const v3 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [20, 150],\n size: [80, 30],\n style: 'fillColor=red',\n });\n const e1 = graph.insertEdge({\n parent,\n value: 'Connect',\n source: v1,\n target: v2,\n style: 'perimeterSpacing=4;strokeWidth=4;labelBackgroundColor=white;fontStyle=1',\n });\n });\n };\n}\n\nexport default DynamicStyle;\n", "PortRefs": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConstraintHandler from '../mxgraph/handler/mxConstraintHandler';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxShape from '../mxgraph/shape/mxShape';\nimport mxTriangle from '../mxgraph/shape/mxTriangle';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\nimport mxConnectionConstraint from '../mxgraph/view/mxConnectionConstraint';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxConstants from '../mxgraph/util/mxConstants';\n\nclass PortRefs extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Port References Example

\n This example demonstrates referencing connection points by ID. The main\n difference to the implementation where the connection point is stored in\n the connecting edge is that changes to the original port will be\n reflected in all existing connections since they reference that port.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Replaces the port image\n mxConstraintHandler.prototype.pointImage = new mxImage(\n 'images/dot.gif',\n 10,\n 10\n );\n\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n\n // Disables automatic handling of ports. This disables the reset of the\n // respective style in mxGraph.cellConnected. Note that this feature may\n // be useful if floating and fixed connections are combined.\n graph.setPortsEnabled(false);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Ports are equal for all shapes...\n const ports = new Array();\n\n // NOTE: Constraint is used later for orthogonal edge routing (currently ignored)\n ports.w = { x: 0, y: 0.5, perimeter: true, constraint: 'west' };\n ports.e = { x: 1, y: 0.5, perimeter: true, constraint: 'east' };\n ports.n = { x: 0.5, y: 0, perimeter: true, constraint: 'north' };\n ports.s = { x: 0.5, y: 1, perimeter: true, constraint: 'south' };\n ports.nw = { x: 0, y: 0, perimeter: true, constraint: 'north west' };\n ports.ne = { x: 1, y: 0, perimeter: true, constraint: 'north east' };\n ports.sw = { x: 0, y: 1, perimeter: true, constraint: 'south west' };\n ports.se = { x: 1, y: 1, perimeter: true, constraint: 'south east' };\n\n // ... except for triangles\n const ports2 = new Array();\n\n // NOTE: Constraint is used later for orthogonal edge routing (currently ignored)\n ports2.in1 = { x: 0, y: 0, perimeter: true, constraint: 'west' };\n ports2.in2 = { x: 0, y: 0.25, perimeter: true, constraint: 'west' };\n ports2.in3 = { x: 0, y: 0.5, perimeter: true, constraint: 'west' };\n ports2.in4 = { x: 0, y: 0.75, perimeter: true, constraint: 'west' };\n ports2.in5 = { x: 0, y: 1, perimeter: true, constraint: 'west' };\n\n ports2.out1 = {\n x: 0.5,\n y: 0,\n perimeter: true,\n constraint: 'north east',\n };\n ports2.out2 = { x: 1, y: 0.5, perimeter: true, constraint: 'east' };\n ports2.out3 = {\n x: 0.5,\n y: 1,\n perimeter: true,\n constraint: 'south east',\n };\n\n // Extends shapes classes to return their ports\n mxShape.prototype.getPorts = function() {\n return ports;\n };\n\n mxTriangle.prototype.getPorts = function() {\n return ports2;\n };\n\n // Disables floating connections (only connections via ports allowed)\n graph.connectionHandler.isConnectableCell = function(cell) {\n return false;\n };\n mxEdgeHandler.prototype.isConnectableCell = function(cell) {\n return graph.connectionHandler.isConnectableCell(cell);\n };\n\n // Disables existing port functionality\n graph.view.getTerminalPort = function(state, terminal, source) {\n return terminal;\n };\n\n // Returns all possible ports for a given terminal\n graph.getAllConnectionConstraints = function(terminal, source) {\n if (\n terminal != null &&\n terminal.shape != null &&\n terminal.shape.stencil != null\n ) {\n // for stencils with existing constraints...\n if (terminal.shape.stencil != null) {\n return terminal.shape.stencil.constraints;\n }\n } else if (terminal != null && this.model.isVertex(terminal.cell)) {\n if (terminal.shape != null) {\n const ports = terminal.shape.getPorts();\n const cstrs = new Array();\n\n for (const id in ports) {\n const port = ports[id];\n\n const cstr = new mxConnectionConstraint(\n new mxPoint(port.x, port.y),\n port.perimeter\n );\n cstr.id = id;\n cstrs.push(cstr);\n }\n\n return cstrs;\n }\n }\n\n return null;\n };\n\n // Sets the port for the given connection\n graph.setConnectionConstraint = function(\n edge,\n terminal,\n source,\n constraint\n ) {\n if (constraint != null) {\n const key = source\n ? mxConstants.STYLE_SOURCE_PORT\n : mxConstants.STYLE_TARGET_PORT;\n\n if (constraint == null || constraint.id == null) {\n this.setCellStyles(key, null, [edge]);\n } else if (constraint.id != null) {\n this.setCellStyles(key, constraint.id, [edge]);\n }\n }\n };\n\n // Returns the port for the given connection\n graph.getConnectionConstraint = function(edge, terminal, source) {\n const key = source\n ? mxConstants.STYLE_SOURCE_PORT\n : mxConstants.STYLE_TARGET_PORT;\n const id = edge.style[key];\n\n if (id != null) {\n const c = new mxConnectionConstraint(null, null);\n c.id = id;\n\n return c;\n }\n\n return null;\n };\n\n // Returns the actual point for a port by redirecting the constraint to the port\n const graphGetConnectionPoint = graph.getConnectionPoint;\n graph.getConnectionPoint = function(vertex, constraint) {\n if (constraint.id != null && vertex != null && vertex.shape != null) {\n const port = vertex.shape.getPorts()[constraint.id];\n\n if (port != null) {\n constraint = new mxConnectionConstraint(\n new mxPoint(port.x, port.y),\n port.perimeter\n );\n }\n }\n\n return graphGetConnectionPoint.apply(this, arguments);\n };\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'A', 20, 20, 100, 40);\n const v2 = graph.insertVertex(\n parent,\n null,\n 'B',\n 80,\n 100,\n 100,\n 100,\n 'shape=ellipse;perimeter=ellipsePerimeter'\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n 'C',\n 190,\n 30,\n 100,\n 60,\n 'shape=triangle;perimeter=trianglePerimeter;direction=south'\n );\n const e1 = graph.insertEdge(\n parent,\n null,\n '',\n v1,\n v2,\n 'sourcePort=s;targetPort=nw'\n );\n const e2 = graph.insertEdge(\n parent,\n null,\n '',\n v1,\n v3,\n 'sourcePort=e;targetPort=out3'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Comming soon... Integration with orthogonal edge style\n // Sets default edge style to use port constraints (needs to be moved up when uncommented)\n // graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';\n /* let mxUtilsGetPortConstraints = mxUtils.getPortConstraints;\n mxUtils.getPortConstraints = function(terminal, edge, source, defaultValue)\n {\n let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT;\n let id = edge.style[key];\n\n let port = terminal.shape.getPorts()[id];\n\n // TODO: Add support for rotation, direction\n if (port != null)\n {\n return port.constraint;\n }\n\n return mxUtilsGetPortConstraints.apply(this, arguments);\n };\n // Connect preview\n graph.connectionHandler.createEdgeState = function(me)\n {\n let edge = graph.createEdge(null, null, null, null, null);\n\n return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));\n };\n */\n }\n}\n\nexport default PortRefs;\n", - "Groups": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\nimport mxPopupMenuHandler from '../mxgraph/handler/mxPopupMenuHandler';\n\nclass Groups extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Groups

\n This example demonstrates using cells as parts of other cells.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Overrides check for valid roots\n mxGraph.prototype.isValidRoot = function() {\n return false;\n };\n\n // Don't clear selection if multiple cells selected\n const graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;\n mxGraphHandler.prototype.mouseDown = function(sender, me) {\n graphHandlerMouseDown.apply(this, arguments);\n\n if (\n this.graph.isCellSelected(me.getCell()) &&\n this.graph.getSelectionCount() > 1\n ) {\n this.delayedSelection = false;\n }\n };\n\n // Selects descendants before children selection mode\n const graphHandlerGetInitialCellForEvent =\n mxGraphHandler.prototype.getInitialCellForEvent;\n mxGraphHandler.prototype.getInitialCellForEvent = function(me) {\n const model = this.graph.getModel();\n const psel = model.getParent(this.graph.getSelectionCell());\n let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);\n let parent = model.getParent(cell);\n\n if (psel == null || (psel != cell && psel != parent)) {\n while (\n !this.graph.isCellSelected(cell) &&\n !this.graph.isCellSelected(parent) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n cell = parent;\n parent = this.graph.getModel().getParent(cell);\n }\n }\n\n return cell;\n };\n\n // Selection is delayed to mouseup if child selected\n const graphHandlerIsDelayedSelection =\n mxGraphHandler.prototype.isDelayedSelection;\n mxGraphHandler.prototype.isDelayedSelection = function(cell) {\n let result = graphHandlerIsDelayedSelection.apply(this, arguments);\n const model = this.graph.getModel();\n const psel = model.getParent(this.graph.getSelectionCell());\n const parent = model.getParent(cell);\n\n if (psel == null || (psel != cell && psel != parent)) {\n if (\n !this.graph.isCellSelected(cell) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n result = true;\n }\n }\n\n return result;\n };\n\n // Delayed selection of parent group\n mxGraphHandler.prototype.selectDelayed = function(me) {\n let cell = me.getCell();\n\n if (cell == null) {\n cell = this.cell;\n }\n\n const model = this.graph.getModel();\n let parent = model.getParent(cell);\n\n while (\n this.graph.isCellSelected(cell) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n cell = parent;\n parent = model.getParent(cell);\n }\n\n this.graph.selectCellForEvent(cell, me.getEvent());\n };\n\n // Returns last selected ancestor\n mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) {\n let cell = me.getCell();\n const model = this.graph.getModel();\n let parent = model.getParent(cell);\n\n while (model.isVertex(parent) && !this.graph.isValidRoot(parent)) {\n if (this.graph.isCellSelected(parent)) {\n cell = parent;\n }\n\n parent = model.getParent(parent);\n }\n\n return cell;\n };\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.constrainChildren = false;\n graph.extendParents = false;\n graph.extendParentsOnAdd = false;\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 120, 60);\n const v2 = graph.insertVertex(v1, null, 'World!', 90, 20, 60, 20);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Groups;\n", + "Groups": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\nimport mxPopupMenuHandler from '../mxgraph/handler/mxPopupMenuHandler';\n\nclass Groups extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Groups

\n This example demonstrates using cells as parts of other cells.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Overrides check for valid roots\n mxGraph.prototype.isValidRoot = function() {\n return false;\n };\n\n // Don't clear selection if multiple cells selected\n const graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;\n mxGraphHandler.prototype.mouseDown = function(sender, me) {\n graphHandlerMouseDown.apply(this, arguments);\n\n if (\n this.graph.isCellSelected(me.getCell()) &&\n this.graph.getSelectionCount() > 1\n ) {\n this.delayedSelection = false;\n }\n };\n\n // Selects descendants before children selection mode\n const graphHandlerGetInitialCellForEvent =\n mxGraphHandler.prototype.getInitialCellForEvent;\n mxGraphHandler.prototype.getInitialCellForEvent = function(me) {\n const model = this.graph.getModel();\n const psel = model.getParent(this.graph.getSelectionCell());\n let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);\n let parent = model.getParent(cell);\n\n if (psel == null || (psel != cell && psel != parent)) {\n while (\n !this.graph.isCellSelected(cell) &&\n !this.graph.isCellSelected(parent) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n cell = parent;\n parent = this.cell.getParent();\n }\n }\n\n return cell;\n };\n\n // Selection is delayed to mouseup if child selected\n const graphHandlerIsDelayedSelection =\n mxGraphHandler.prototype.isDelayedSelection;\n mxGraphHandler.prototype.isDelayedSelection = function(cell) {\n let result = graphHandlerIsDelayedSelection.apply(this, arguments);\n const model = this.graph.getModel();\n const psel = model.getParent(this.graph.getSelectionCell());\n const parent = model.getParent(cell);\n\n if (psel == null || (psel != cell && psel != parent)) {\n if (\n !this.graph.isCellSelected(cell) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n result = true;\n }\n }\n\n return result;\n };\n\n // Delayed selection of parent group\n mxGraphHandler.prototype.selectDelayed = function(me) {\n let cell = me.getCell();\n\n if (cell == null) {\n cell = this.cell;\n }\n\n const model = this.graph.getModel();\n let parent = model.getParent(cell);\n\n while (\n this.graph.isCellSelected(cell) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n cell = parent;\n parent = model.getParent(cell);\n }\n\n this.graph.selectCellForEvent(cell, me.getEvent());\n };\n\n // Returns last selected ancestor\n mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) {\n let cell = me.getCell();\n const model = this.graph.getModel();\n let parent = model.getParent(cell);\n\n while (model.isVertex(parent) && !this.graph.isValidRoot(parent)) {\n if (this.graph.isCellSelected(parent)) {\n cell = parent;\n }\n\n parent = model.getParent(parent);\n }\n\n return cell;\n };\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.constrainChildren = false;\n graph.extendParents = false;\n graph.extendParentsOnAdd = false;\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 120, 60);\n const v2 = graph.insertVertex(v1, null, 'World!', 90, 20, 60, 20);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Groups;\n", "ContextIcons": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxVertexHandler from '../mxgraph/handler/mxVertexHandler';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxClient from '../mxgraph/mxClient';\n\nclass ContextIcons extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Context icons

\n This example demonstrates adding icons to selected vertices to carry out\n special operations.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n class mxVertexToolHandler extends mxVertexHandler {\n // Defines a subclass for mxVertexHandler that adds a set of clickable\n // icons to every selected vertex.\n\n domNode = null;\n\n init() {\n super.init();\n\n // In this example we force the use of DIVs for images in IE. This\n // handles transparency in PNG images properly in IE and fixes the\n // problem that IE routes all mouse events for a gesture via the\n // initial IMG node, which means the target vertices\n this.domNode = document.createElement('div');\n this.domNode.style.position = 'absolute';\n this.domNode.style.whiteSpace = 'nowrap';\n\n // Workaround for event redirection via image tag in quirks and IE8\n const createImage = src => {\n return mxUtils.createImage(src);\n };\n\n // Delete\n let img = createImage('images/delete2.png');\n img.setAttribute('title', 'Delete');\n img.style.cursor = 'pointer';\n img.style.width = '16px';\n img.style.height = '16px';\n mxEvent.addGestureListeners(img, evt => {\n // Disables dragging the image\n mxEvent.consume(evt);\n });\n mxEvent.addListener(img, 'click', evt => {\n this.graph.removeCells([this.state.cell]);\n mxEvent.consume(evt);\n });\n this.domNode.appendChild(img);\n\n // Size\n img = createImage('images/fit_to_size.png');\n img.setAttribute('title', 'Resize');\n img.style.cursor = 'se-resize';\n img.style.width = '16px';\n img.style.height = '16px';\n\n mxEvent.addGestureListeners(img, evt => {\n this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);\n this.graph.isMouseDown = true;\n this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);\n mxEvent.consume(evt);\n });\n this.domNode.appendChild(img);\n\n // Move\n img = createImage('images/plus.png');\n img.setAttribute('title', 'Move');\n img.style.cursor = 'move';\n img.style.width = '16px';\n img.style.height = '16px';\n\n mxEvent.addGestureListeners(img, evt => {\n this.graph.graphHandler.start(\n this.state.cell,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n this.graph.graphHandler.cellWasClicked = true;\n this.graph.isMouseDown = true;\n this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);\n mxEvent.consume(evt);\n });\n this.domNode.appendChild(img);\n\n // Connect\n img = createImage('images/check.png');\n img.setAttribute('title', 'Connect');\n img.style.cursor = 'pointer';\n img.style.width = '16px';\n img.style.height = '16px';\n\n mxEvent.addGestureListeners(img, evt => {\n const pt = mxUtils.convertPoint(\n this.graph.container,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n this.graph.connectionHandler.start(this.state, pt.x, pt.y);\n this.graph.isMouseDown = true;\n this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);\n mxEvent.consume(evt);\n });\n this.domNode.appendChild(img);\n\n this.graph.container.appendChild(this.domNode);\n this.redrawTools();\n }\n\n redraw() {\n super.redraw();\n this.redrawTools();\n }\n\n redrawTools() {\n if (this.state != null && this.domNode != null) {\n const dy = 4;\n this.domNode.style.left = `${this.state.x + this.state.width - 56}px`;\n this.domNode.style.top = `${this.state.y + this.state.height + dy}px`;\n }\n }\n\n destroy(sender, me) {\n super.destroy(sender, me);\n\n if (this.domNode != null) {\n this.domNode.parentNode.removeChild(this.domNode);\n this.domNode = null;\n }\n }\n }\n\n class MyCustomGraph extends mxGraph {\n createHandler(state) {\n if (state != null && this.model.isVertex(state.cell)) {\n return new mxVertexToolHandler(state);\n }\n return super.createHandler(state);\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n graph.setConnectable(true);\n graph.connectionHandler.createTarget = true;\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [20, 20],\n size: [80, 30],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n });\n const e1 = graph.insertEdge({\n parent,\n source: v1,\n target: v2,\n });\n });\n };\n}\n\nexport default ContextIcons;\n", "RadialTreeLayout": "/**\n * Copyright (c) 2006-2014, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxRadialTreeLayout from '../mxgraph/layout/mxRadialTreeLayout';\n\nclass RadialTreeLayout extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Radial Tree (Hierarchical) Layout

\n This example demonstrates the use of the hierarchical and organic\n layouts. Note that the hierarchical layout requires another script tag\n in the head of the page.\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'auto',\n height: '800px',\n borderTop: 'gray 1px solid',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Adds rubberband selection\n new mxRubberband(graph);\n\n // Changes the default vertex style in-place\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_PERIMETER_SPACING] = 6;\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_SHADOW] = true;\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_ROUNDED] = true;\n\n // Creates a layout algorithm to be used\n // with the graph\n const layout = new mxRadialTreeLayout(graph);\n\n const parent = graph.getDefaultParent();\n\n // Load cells and layouts the graph\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, '1', 500, 500, 80, 30);\n const v2 = graph.insertVertex(parent, null, '2.1', 0, 0, 80, 30);\n const v3 = graph.insertVertex(parent, null, '2.2', 0, 0, 80, 30);\n const v4 = graph.insertVertex(parent, null, '3.1', 0, 0, 80, 30);\n const v4_1 = graph.insertVertex(parent, null, '3.2', 0, 0, 80, 30);\n const v4_2 = graph.insertVertex(parent, null, '3.3', 0, 0, 80, 30);\n const v4_3 = graph.insertVertex(parent, null, '3.6', 0, 0, 80, 30);\n const v4_4 = graph.insertVertex(parent, null, '3.7', 0, 0, 80, 30);\n const v5 = graph.insertVertex(parent, null, '3.4', 0, 0, 80, 30);\n const v6 = graph.insertVertex(parent, null, '2.3', 0, 0, 80, 30);\n const v7 = graph.insertVertex(parent, null, '4.1', 0, 0, 80, 30);\n const v7_1 = graph.insertVertex(parent, null, '4.2', 0, 0, 80, 30);\n const v7_2 = graph.insertVertex(parent, null, '4.3', 0, 0, 80, 30);\n const v7_3 = graph.insertVertex(parent, null, '4.4', 0, 0, 80, 30);\n const v7_4 = graph.insertVertex(parent, null, '4.5', 0, 0, 80, 30);\n const v7_5 = graph.insertVertex(parent, null, '4.6', 0, 0, 80, 30);\n const v7_6 = graph.insertVertex(parent, null, '4.7', 0, 0, 80, 30);\n\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n const e2 = graph.insertEdge(parent, null, '', v1, v3);\n const e3 = graph.insertEdge(parent, null, '', v3, v4);\n const e3_1 = graph.insertEdge(parent, null, '', v3, v4_1);\n const e3_2 = graph.insertEdge(parent, null, '', v3, v4_2);\n const e3_3 = graph.insertEdge(parent, null, '', v3, v4_3);\n const e3_4 = graph.insertEdge(parent, null, '', v3, v4_4);\n const e4 = graph.insertEdge(parent, null, '', v2, v5);\n const e5 = graph.insertEdge(parent, null, '', v1, v6);\n const e6 = graph.insertEdge(parent, null, '', v4_3, v7);\n var e6_1 = graph.insertEdge(parent, null, '', v4_4, v7_4);\n var e6_2 = graph.insertEdge(parent, null, '', v4_4, v7_5);\n var e6_3 = graph.insertEdge(parent, null, '', v4_4, v7_6);\n var e6_1 = graph.insertEdge(parent, null, '', v4_3, v7_1);\n var e6_2 = graph.insertEdge(parent, null, '', v4_3, v7_2);\n var e6_3 = graph.insertEdge(parent, null, '', v4_3, v7_3);\n\n // Executes the layout\n layout.execute(parent);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default RadialTreeLayout;\n", "HelloPort": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxCodec from '../mxgraph/io/mxCodec';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass HelloPort extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Hello Port

\n This example demonstrates using the isPort hook for visually connecting\n to another cell.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n graph.setTooltips(true);\n\n // Sets the default edge style\n const style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;\n\n // Ports are not used as terminals for edges, they are\n // only used to compute the graphical connection point\n graph.isPort = function(cell) {\n const geo = this.getCellGeometry(cell);\n\n return geo != null ? geo.relative : false;\n };\n\n // Implements a tooltip that shows the actual\n // source and target of an edge\n graph.getTooltipForCell = function(cell) {\n if (this.model.isEdge(cell)) {\n return `${this.convertValueToString(\n this.model.getTerminal(cell, true)\n )} => ${this.convertValueToString(\n this.model.getTerminal(cell, false)\n )}`;\n }\n\n return mxGraph.prototype.getTooltipForCell.apply(this, arguments);\n };\n\n // Removes the folding icon and disables any folding\n graph.isCellFoldable = function(cell) {\n return false;\n };\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);\n v1.setConnectable(false);\n const v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);\n v11.geometry.offset = new mxPoint(-5, -5);\n v11.geometry.relative = true;\n const v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);\n v12.geometry.offset = new mxPoint(-5, -5);\n v12.geometry.relative = true;\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);\n var e1 = graph.insertEdge(parent, null, '', v11, v2);\n var e1 = graph.insertEdge(parent, null, '', v12, v3);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n const button = mxUtils.button('View XML', function() {\n const encoder = new mxCodec();\n const node = encoder.encode(graph.getModel());\n mxUtils.popup(mxUtils.getPrettyXml(node), true);\n });\n\n this.el2.appendChild(button);\n }\n}\n\nexport default HelloPort;\n", @@ -34,7 +34,7 @@ "Drop": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxClient from '../mxgraph/mxClient';\n\nclass Drop extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Drop

\n This example demonstrates handling native drag and drop of images\n (requires modern browser).\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '441px',\n background: `url('editors/images/grid.gif')`,\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Checks if the browser is supported\n const fileSupport =\n window.File != null &&\n window.FileReader != null &&\n window.FileList != null;\n\n if (!fileSupport || !mxClient.isBrowserSupported()) {\n // Displays an error message if the browser is not supported.\n mxUtils.error('Browser is not supported!', 200, false);\n } else {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given this.el\n const graph = new mxGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n mxEvent.addListener(this.el, 'dragover', function(evt) {\n if (graph.isEnabled()) {\n evt.stopPropagation();\n evt.preventDefault();\n }\n });\n\n mxEvent.addListener(this.el, 'drop', evt => {\n if (graph.isEnabled()) {\n evt.stopPropagation();\n evt.preventDefault();\n\n // Gets drop location point for vertex\n const pt = mxUtils.convertPoint(\n graph.container,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n const tr = graph.view.translate;\n const { scale } = graph.view;\n const x = pt.x / scale - tr.x;\n const y = pt.y / scale - tr.y;\n\n // Converts local images to data urls\n const filesArray = evt.dataTransfer.files;\n\n for (let i = 0; i < filesArray.length; i++) {\n this.handleDrop(graph, filesArray[i], x + i * 10, y + i * 10);\n }\n }\n });\n }\n }\n\n handleDrop(graph, file, x, y) {\n // Handles each file as a separate insert for simplicity.\n // Use barrier to handle multiple files as a single insert.\n\n if (file.type.substring(0, 5) === 'image') {\n const reader = new FileReader();\n\n reader.onload = function(e) {\n // Gets size of image for vertex\n let data = e.target.result;\n\n // SVG needs special handling to add viewbox if missing and\n // find initial size from SVG attributes (only for IE11)\n if (file.type.substring(0, 9) === 'image/svg') {\n const comma = data.indexOf(',');\n const svgText = atob(data.substring(comma + 1));\n const root = mxUtils.parseXml(svgText);\n\n // Parses SVG to find width and height\n if (root != null) {\n const svgs = root.getElementsByTagName('svg');\n\n if (svgs.length > 0) {\n const svgRoot = svgs[0];\n let w = parseFloat(svgRoot.getAttribute('width'));\n let h = parseFloat(svgRoot.getAttribute('height'));\n\n // Check if viewBox attribute already exists\n const vb = svgRoot.getAttribute('viewBox');\n\n if (vb == null || vb.length === 0) {\n svgRoot.setAttribute('viewBox', `0 0 ${w} ${h}`);\n }\n // Uses width and height from viewbox for\n // missing width and height attributes\n else if (Number.isNaN(w) || Number.isNaN(h)) {\n const tokens = vb.split(' ');\n\n if (tokens.length > 3) {\n w = parseFloat(tokens[2]);\n h = parseFloat(tokens[3]);\n }\n }\n\n w = Math.max(1, Math.round(w));\n h = Math.max(1, Math.round(h));\n\n data = `data:image/svg+xml,${btoa(\n mxUtils.getXml(svgs[0], '\\n')\n )}`;\n graph.insertVertex({\n position: [x, y],\n size: [w, h],\n style: `shape=image;image=${data};`,\n });\n }\n }\n } else {\n const img = new Image();\n\n img.onload = () => {\n const w = Math.max(1, img.width);\n const h = Math.max(1, img.height);\n\n // Converts format of data url to cell style value for use in vertex\n const semi = data.indexOf(';');\n\n if (semi > 0) {\n data =\n data.substring(0, semi) +\n data.substring(data.indexOf(',', semi + 1));\n }\n\n graph.insertVertex({\n position: [x, y],\n size: [w, h],\n style: `shape=image;image=${data};`,\n });\n };\n\n img.src = data;\n }\n };\n\n reader.readAsDataURL(file);\n }\n }\n}\n\nexport default Drop;\n", "Markers": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxCellRenderer from '../mxgraph/view/mxCellRenderer';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\nimport mxCylinder from '../mxgraph/shape/mxCylinder';\nimport mxMarker from '../mxgraph/shape/mxMarker';\nimport mxArrow from '../mxgraph/shape/mxArrow';\n\nclass Markers extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Markers

\n This example demonstrates creating custom markers and customizing the\n built-in markers.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '381px',\n border: '1px solid gray',\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Enables guides\n mxGraphHandler.prototype.guidesEnabled = true;\n mxEdgeHandler.prototype.snapToTerminals = true;\n\n // Registers and defines the custom marker\n mxMarker.addMarker('dash', function(\n canvas,\n shape,\n type,\n pe,\n unitX,\n unitY,\n size,\n source,\n sw,\n filled\n ) {\n const nx = unitX * (size + sw + 1);\n const ny = unitY * (size + sw + 1);\n\n return function() {\n canvas.begin();\n canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);\n canvas.lineTo(\n pe.x + ny / 2 - (3 * nx) / 2,\n pe.y - (3 * ny) / 2 - nx / 2\n );\n canvas.stroke();\n };\n });\n\n // Defines custom message shape\n class MessageShape extends mxCylinder {\n redrawPath(path, x, y, w, h, isForeground) {\n if (isForeground) {\n path.moveTo(0, 0);\n path.lineTo(w / 2, h / 2);\n path.lineTo(w, 0);\n } else {\n path.moveTo(0, 0);\n path.lineTo(w, 0);\n path.lineTo(w, h);\n path.lineTo(0, h);\n path.close();\n }\n }\n }\n mxCellRenderer.registerShape('message', MessageShape);\n\n // Defines custom edge shape\n class LinkShape extends mxArrow {\n paintEdgeShape(c, pts) {\n const width = 10;\n\n // Base vector (between end points)\n const p0 = pts[0];\n const pe = pts[pts.length - 1];\n\n const dx = pe.x - p0.x;\n const dy = pe.y - p0.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const length = dist;\n\n // Computes the norm and the inverse norm\n const nx = dx / dist;\n const ny = dy / dist;\n const basex = length * nx;\n const basey = length * ny;\n const floorx = (width * ny) / 3;\n const floory = (-width * nx) / 3;\n\n // Computes points\n const p0x = p0.x - floorx / 2;\n const p0y = p0.y - floory / 2;\n const p1x = p0x + floorx;\n const p1y = p0y + floory;\n const p2x = p1x + basex;\n const p2y = p1y + basey;\n const p3x = p2x + floorx;\n const p3y = p2y + floory;\n // p4 not necessary\n const p5x = p3x - 3 * floorx;\n const p5y = p3y - 3 * floory;\n\n c.begin();\n c.moveTo(p1x, p1y);\n c.lineTo(p2x, p2y);\n c.moveTo(p5x + floorx, p5y + floory);\n c.lineTo(p0x, p0y);\n c.stroke();\n }\n }\n mxCellRenderer.registerShape('link', LinkShape);\n\n // Creates the graph\n const graph = new mxGraph(this.el);\n\n // Sets default styles\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style.fillColor = '#FFFFFF';\n style.strokeColor = '#000000';\n style.fontColor = '#000000';\n style.fontStyle = '1';\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style.strokeColor = '#000000';\n style.fontColor = '#000000';\n style.fontStyle = '0';\n style.fontStyle = '0';\n style.startSize = '8';\n style.endSize = '8';\n\n // Populates the graph\n const parent = graph.getDefaultParent();\n\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'v1', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'v2', 440, 20, 80, 30);\n const e1 = graph.insertEdge(\n parent,\n null,\n '',\n v1,\n v2,\n 'dashed=1;' +\n 'startArrow=oval;endArrow=block;sourcePerimeterSpacing=4;startFill=0;endFill=0;'\n );\n const e11 = graph.insertVertex(\n e1,\n null,\n 'Label',\n 0,\n 0,\n 20,\n 14,\n 'shape=message;labelBackgroundColor=#ffffff;labelPosition=left;spacingRight=2;align=right;fontStyle=0;'\n );\n e11.geometry.offset = new mxPoint(-10, -7);\n e11.geometry.relative = true;\n e11.connectable = false;\n\n const v3 = graph.insertVertex(parent, null, 'v3', 20, 120, 80, 30);\n const v4 = graph.insertVertex(parent, null, 'v4', 440, 120, 80, 30);\n const e2 = graph.insertEdge(\n parent,\n null,\n 'Label',\n v3,\n v4,\n 'startArrow=dash;startSize=12;endArrow=block;labelBackgroundColor=#FFFFFF;'\n );\n\n const v5 = graph.insertVertex(\n parent,\n null,\n 'v5',\n 40,\n 220,\n 40,\n 40,\n 'shape=ellipse;perimeter=ellipsePerimeter;'\n );\n const v6 = graph.insertVertex(\n parent,\n null,\n 'v6',\n 460,\n 220,\n 40,\n 40,\n 'shape=doubleEllipse;perimeter=ellipsePerimeter;'\n );\n const e3 = graph.insertEdge(\n parent,\n null,\n 'Link',\n v5,\n v6,\n 'shape=link;labelBackgroundColor=#FFFFFF;'\n );\n } finally {\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Markers;\n", "Overlays": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxCellTracker from '../mxgraph/handler/mxCellTracker';\nimport mxCellOverlay from '../mxgraph/view/mxCellOverlay';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass Overlays extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Overlays

\n This example demonstrates cell highlighting, overlays and handling click\n and double click events. See also: events.html for more event handling.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Disables basic selection and cell handling\n graph.setEnabled(false);\n\n // Highlights the vertices when the mouse enters\n const highlight = new mxCellTracker(graph, '#00FF00');\n\n // Enables tooltips for the overlays\n graph.setTooltips(true);\n\n // Installs a handler for click events in the graph\n // that toggles the overlay for the respective cell\n graph.addListener(mxEvent.CLICK, (sender, evt) => {\n const cell = evt.getProperty('cell');\n\n if (cell != null) {\n const overlays = graph.getCellOverlays(cell);\n\n if (overlays == null) {\n // Creates a new overlay with an image and a tooltip\n const overlay = new mxCellOverlay(\n new mxImage('editors/images/overlays/check.png', 16, 16),\n 'Overlay tooltip'\n );\n\n // Installs a handler for clicks on the overlay\n overlay.addListener(mxEvent.CLICK, (sender, evt2) => {\n mxUtils.alert('Overlay clicked');\n });\n\n // Sets the overlay for the cell in the graph\n graph.addCellOverlay(cell, overlay);\n } else {\n graph.removeCellOverlays(cell);\n }\n }\n });\n\n // Installs a handler for double click events in the graph\n // that shows an alert box\n graph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {\n const cell = evt.getProperty('cell');\n mxUtils.alert(`Doubleclick: ${cell != null ? 'Cell' : 'Graph'}`);\n evt.consume();\n });\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Click,',\n position: [20, 20],\n size: [60, 40],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'Doubleclick',\n position: [200, 150],\n size: [100, 40],\n });\n const e1 = graph.insertEdge({\n parent,\n source: v1,\n target: v2,\n });\n });\n }\n}\n\nexport default Overlays;\n", - "Constituent": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\n\nclass Constituent extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Constituent

\n This example demonstrates using cells as parts of other cells.\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: 'url(\"editors/images/grid.gif\")',\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n class MyCustomGraphHandler extends mxGraphHandler {\n /**\n * Redirects start drag to parent.\n */\n getInitialCellForEvent(me) {\n let cell = super.getInitialCellForEvent(me);\n if (this.graph.isPart(cell)) {\n cell = this.graph.getModel().getParent(cell);\n }\n return cell;\n }\n }\n\n class MyCustomGraph extends mxGraph {\n foldingEnabled = false;\n\n recursiveResize = true;\n\n isPart(cell) {\n // Helper method to mark parts with constituent=1 in the style\n return this.getCurrentCellStyle(cell).constituent == '1';\n }\n\n selectCellForEvent(cell, evt) {\n // Redirects selection to parent\n if (this.isPart(cell)) {\n cell = this.model.getParent(cell);\n }\n super.selectCellForEvent(cell, evt);\n }\n\n createGraphHandler() {\n return new MyCustomGraphHandler(this);\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n position: [20, 20],\n size: [120, 70],\n });\n const v2 = graph.insertVertex({\n parent: v1,\n value: 'Constituent',\n position: [20, 20],\n size: [80, 30],\n style: 'constituent=1;',\n });\n });\n }\n}\n\nexport default Constituent;\n", + "Constituent": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\n\nclass Constituent extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Constituent

\n This example demonstrates using cells as parts of other cells.\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: 'url(\"editors/images/grid.gif\")',\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n class MyCustomGraphHandler extends mxGraphHandler {\n /**\n * Redirects start drag to parent.\n */\n getInitialCellForEvent(me) {\n let cell = super.getInitialCellForEvent(me);\n if (this.graph.isPart(cell)) {\n cell = this.cell.getParent();\n }\n return cell;\n }\n }\n\n class MyCustomGraph extends mxGraph {\n foldingEnabled = false;\n\n recursiveResize = true;\n\n isPart(cell) {\n // Helper method to mark parts with constituent=1 in the style\n return this.getCurrentCellStyle(cell).constituent == '1';\n }\n\n selectCellForEvent(cell, evt) {\n // Redirects selection to parent\n if (this.isPart(cell)) {\n cell = this.model.getParent(cell);\n }\n super.selectCellForEvent(cell, evt);\n }\n\n createGraphHandler() {\n return new MyCustomGraphHandler(this);\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n position: [20, 20],\n size: [120, 70],\n });\n const v2 = graph.insertVertex({\n parent: v1,\n value: 'Constituent',\n position: [20, 20],\n size: [80, 30],\n style: 'constituent=1;',\n });\n });\n }\n}\n\nexport default Constituent;\n", "Editing": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\n\nclass Editing extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Editing

\n This example demonstrates using the in-place editor trigger to specify\n the editing value and write the new value into a specific field of the\n user object. Wrapping and DOM nodes as labels are also demonstrated\n here.\n
\n
\n Double-click the upper/lower half of the cell to edit different fields\n of the user object.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n }\n\n componentDidMount() {\n class MyCustomGraph extends mxGraph {\n getLabel(cell) {\n // Returns a HTML representation of the cell where the\n // upper half is the first value, lower half is second\n // value\n\n const table = document.createElement('table');\n table.style.height = '100%';\n table.style.width = '100%';\n\n const body = document.createElement('tbody');\n const tr1 = document.createElement('tr');\n const td1 = document.createElement('td');\n td1.style.textAlign = 'center';\n td1.style.fontSize = '12px';\n td1.style.color = '#774400';\n mxUtils.write(td1, cell.value.first);\n\n const tr2 = document.createElement('tr');\n const td2 = document.createElement('td');\n td2.style.textAlign = 'center';\n td2.style.fontSize = '12px';\n td2.style.color = '#774400';\n mxUtils.write(td2, cell.value.second);\n\n tr1.appendChild(td1);\n tr2.appendChild(td2);\n body.appendChild(tr1);\n body.appendChild(tr2);\n table.appendChild(body);\n\n return table;\n }\n\n getEditingValue(cell, evt) {\n // Returns the editing value for the given cell and event\n evt.fieldname = this.__getFieldnameForEvent(cell, evt);\n return cell.value[evt.fieldname] || '';\n }\n\n __getFieldnameForEvent(cell, evt) {\n // Helper method that returns the fieldname to be used for\n // a mouse event\n if (evt != null) {\n // Finds the relative coordinates inside the cell\n const point = mxUtils.convertPoint(\n this.container,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n const state = this.getView().getState(cell);\n\n if (state != null) {\n point.x -= state.x;\n point.y -= state.y;\n\n // Returns second if mouse in second half of cell\n if (point.y > state.height / 2) {\n return 'second';\n }\n }\n }\n return 'first';\n }\n\n labelChanged(cell, newValue, trigger) {\n // Sets the new value for the given cell and trigger\n const name = trigger != null ? trigger.fieldname : null;\n\n if (name != null) {\n // Clones the user object for correct undo and puts\n // the new value in the correct field.\n const value = mxUtils.clone(cell.value);\n value[name] = newValue;\n newValue = value;\n\n super.labelChanged(cell, newValue, trigger);\n }\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n graph.setHtmlLabels(true);\n\n // Adds handling of return and escape keystrokes for editing\n const keyHandler = new mxKeyHandler(graph);\n\n // Sample user objects with 2 fields\n const value = {};\n value.first = 'First value';\n value.second = 'Second value';\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n value,\n 100,\n 60,\n 120,\n 80,\n 'overflow=fill;'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Editing;\n", "HierarchicalLayout": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxHierarchicalLayout from '../mxgraph/layout/hierarchical/mxHierarchicalLayout';\nimport mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass HierarchicalLayout extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Hierarchical Layout

\n This example demonstrates the use of the hierarchical and organic\n layouts. Note that the hierarchical layout requires another script tag\n in the head of the page.\n {\n this.el = el;\n }}\n style={{\n position: 'absolute',\n overflow: 'auto',\n top: '36px',\n bottom: '0px',\n left: '0px',\n right: '0px',\n borderTop: 'gray 1px solid',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Adds rubberband selection\n new mxRubberband(graph);\n\n // Changes the default vertex style in-place\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_PERIMETER_SPACING] = 6;\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_SHADOW] = true;\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_ROUNDED] = true;\n\n // Creates a layout algorithm to be used\n // with the graph\n const layout = new mxHierarchicalLayout(graph);\n const organic = new mxFastOrganicLayout(graph);\n organic.forceConstant = 120;\n\n const parent = graph.getDefaultParent();\n\n // Adds a button to execute the layout\n let button = document.createElement('button');\n mxUtils.write(button, 'Hierarchical');\n mxEvent.addListener(button, 'click', function(evt) {\n layout.execute(parent);\n });\n this.el2.appendChild(button);\n\n // Adds a button to execute the layout\n button = document.createElement('button');\n mxUtils.write(button, 'Organic');\n\n mxEvent.addListener(button, 'click', function(evt) {\n organic.execute(parent);\n });\n\n this.el2.appendChild(button);\n\n // Load cells and layouts the graph\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, '1', 0, 0, 80, 30);\n const v2 = graph.insertVertex(parent, null, '2', 0, 0, 80, 30);\n const v3 = graph.insertVertex(parent, null, '3', 0, 0, 80, 30);\n const v4 = graph.insertVertex(parent, null, '4', 0, 0, 80, 30);\n const v5 = graph.insertVertex(parent, null, '5', 0, 0, 80, 30);\n const v6 = graph.insertVertex(parent, null, '6', 0, 0, 80, 30);\n const v7 = graph.insertVertex(parent, null, '7', 0, 0, 80, 30);\n const v8 = graph.insertVertex(parent, null, '8', 0, 0, 80, 30);\n const v9 = graph.insertVertex(parent, null, '9', 0, 0, 80, 30);\n\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n const e2 = graph.insertEdge(parent, null, '', v1, v3);\n const e3 = graph.insertEdge(parent, null, '', v3, v4);\n const e4 = graph.insertEdge(parent, null, '', v2, v5);\n const e5 = graph.insertEdge(parent, null, '', v1, v6);\n const e6 = graph.insertEdge(parent, null, '', v2, v3);\n const e7 = graph.insertEdge(parent, null, '', v6, v4);\n const e8 = graph.insertEdge(parent, null, '', v6, v1);\n const e9 = graph.insertEdge(parent, null, '', v6, v7);\n const e10 = graph.insertEdge(parent, null, '', v7, v8);\n const e11 = graph.insertEdge(parent, null, '', v7, v9);\n const e12 = graph.insertEdge(parent, null, '', v7, v6);\n const e13 = graph.insertEdge(parent, null, '', v7, v5);\n\n // Executes the layout\n layout.execute(parent);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default HierarchicalLayout;\n", "OffPage": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxCellTracker from '../mxgraph/handler/mxCellTracker';\nimport mxConstants from '../mxgraph/util/mxConstants';\n\nclass OffPage extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n

Offpage connector

\n This example demonstrates creating offpage connectors in a graph and\n loading a new diagram on a single click.\n {\n this.el = el;\n }}\n style={{}}\n />\n \n );\n }\n\n componentDidMount() {\n // Use complete cell as highlight region\n mxConstants.ACTIVE_REGION = 1;\n\n const container = document.createElement('div');\n container.style.position = 'relative';\n container.style.overflow = 'hidden';\n container.style.height = '80vhpx';\n container.style.background = 'url(\"editors/images/grid.gif\")';\n\n this.el.appendChild(container);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(container);\n graph.setEnabled(false);\n\n // Highlights offpage connectors\n const highlight = new mxCellTracker(graph, null, function(me) {\n const cell = me.getCell();\n\n if (\n cell != null &&\n cell.value != null &&\n typeof cell.value.create === 'function'\n ) {\n return cell;\n }\n\n return null;\n });\n\n // Handles clicks on offpage connectors and\n // executes function in user object\n graph.addListener(mxEvent.CLICK, function(source, evt) {\n const cell = evt.getProperty('cell');\n\n if (\n cell != null &&\n cell.value != null &&\n typeof cell.value.create === 'function'\n ) {\n cell.value.create();\n }\n });\n\n // Handles clicks on offpage connectors and\n // executes function in user object\n graph.getCursorForCell = function(cell) {\n if (\n cell != null &&\n cell.value != null &&\n typeof cell.value.create === 'function'\n ) {\n return 'pointer';\n }\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n let first = null;\n let second = null;\n\n first = function() {\n const value = {\n toString() {\n return 'Next';\n },\n create: second,\n };\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n graph.getModel().setRoot(graph.getModel().createRoot());\n const parent = graph.getDefaultParent();\n\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Click',\n 30,\n 20,\n 80,\n 30,\n 'fillColor=#FFFF88;strokeColor=#FF1A00'\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'Next',\n 20,\n 150,\n 100,\n 30,\n 'fillColor=#FFFF88;strokeColor=#FF1A00'\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n value,\n 200,\n 150,\n 40,\n 40,\n 'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE'\n );\n const e1 = graph.insertEdge(\n parent,\n null,\n null,\n v1,\n v2,\n 'strokeColor=#FF1A00'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n };\n\n second = function() {\n const value = {\n toString() {\n return 'Prev';\n },\n create: first,\n };\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n graph.getModel().setRoot(graph.getModel().createRoot());\n const parent = graph.getDefaultParent();\n\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Click',\n 30,\n 20,\n 80,\n 30,\n 'fillColor=#CDEB8B;strokeColor=#008C00'\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'Prev',\n 220,\n 20,\n 100,\n 30,\n 'fillColor=#CDEB8B;strokeColor=#008C00'\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n value,\n 30,\n 150,\n 40,\n 40,\n 'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west'\n );\n const e1 = graph.insertEdge(\n parent,\n null,\n null,\n v1,\n v2,\n 'strokeColor=#008C00'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n };\n\n first();\n }\n}\n\nexport default OffPage;\n", diff --git a/src/pages/icons_images/ContextIcons.js b/src/pages/icons_images/ContextIcons.js index 9b4d24d84..01c9ba2d1 100644 --- a/src/pages/icons_images/ContextIcons.js +++ b/src/pages/icons_images/ContextIcons.js @@ -161,7 +161,7 @@ class ContextIcons extends React.Component { class MyCustomGraph extends mxGraph { createHandler(state) { - if (state != null && this.model.isVertex(state.cell)) { + if (state != null && state.cell.isVertex()) { return new mxVertexToolHandler(state); } return super.createHandler(state); diff --git a/src/pages/icons_images/Control.js b/src/pages/icons_images/Control.js index 1096314ed..9a42bb5ec 100644 --- a/src/pages/icons_images/Control.js +++ b/src/pages/icons_images/Control.js @@ -58,7 +58,7 @@ class Control extends React.Component { const { graph } = state.view; - if (graph.getModel().isVertex(state.cell)) { + if (state.cell.isVertex()) { if (state.deleteControl == null) { const b = new mxRectangle( 0, @@ -91,7 +91,7 @@ class Control extends React.Component { const h = state.deleteControl.bounds.height / oldScale; const s = state.view.scale; - return state.view.graph.getModel().isEdge(state.cell) + return state.cell.isEdge() ? new mxRectangle( state.x + state.width / 2 - (w / 2) * s, state.y + state.height / 2 - (h / 2) * s, diff --git a/src/pages/icons_images/HoverIcons.js b/src/pages/icons_images/HoverIcons.js index 4ab375b78..14ee55e42 100644 --- a/src/pages/icons_images/HoverIcons.js +++ b/src/pages/icons_images/HoverIcons.js @@ -158,7 +158,7 @@ class HoverIcons extends React.Component { // Ignore everything but vertices if ( graph.isMouseDown || - (tmp != null && !graph.getModel().isVertex(tmp.cell)) + (tmp != null && !tmp.cell.isVertex()) ) { tmp = null; } diff --git a/src/pages/labels/Labels.js b/src/pages/labels/Labels.js index ef26d7a4a..09c538328 100644 --- a/src/pages/labels/Labels.js +++ b/src/pages/labels/Labels.js @@ -60,7 +60,7 @@ class Labels extends React.Component { }; graph.isCellResizable = function(cell) { - const geo = this.model.getGeometry(cell); + const geo = cell.getGeometry(); return geo == null || !geo.relative; }; @@ -68,14 +68,14 @@ class Labels extends React.Component { // Truncates the label to the size of the vertex graph.getLabel = function(cell) { const label = this.labelsVisible ? this.convertValueToString(cell) : ''; - const geometry = this.model.getGeometry(cell); + const geometry = cell.getGeometry(); if ( - !this.model.isCollapsed(cell) && + !cell.isCollapsed() && geometry != null && (geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0)) && - this.model.isVertex(cell) && + cell.isVertex() && geometry.width >= 2 ) { const style = this.getCellStyle(cell); @@ -93,12 +93,12 @@ class Labels extends React.Component { // Enables wrapping for vertex labels graph.isWrapping = function(cell) { - return this.model.isCollapsed(cell); + return cell.isCollapsed(); }; // Enables clipping of vertex labels if no offset is defined graph.isLabelClipped = function(cell) { - const geometry = this.model.getGeometry(cell); + const geometry = cell.getGeometry(); return ( geometry != null && diff --git a/src/pages/labels/SecondLabel.js b/src/pages/labels/SecondLabel.js index 0cb5fc6be..c60096673 100644 --- a/src/pages/labels/SecondLabel.js +++ b/src/pages/labels/SecondLabel.js @@ -83,7 +83,7 @@ class SecondLabel extends React.Component { // Hook for returning shape number for a given cell graph.getSecondLabel = function(cell) { - if (!this.model.isEdge(cell)) { + if (!cell.isEdge()) { // Possible to return any string here return `The ID of this cell is ${cell.id}`; } @@ -94,9 +94,9 @@ class SecondLabel extends React.Component { let relativeChildVerticesVisible = true; // Overrides method to hide relative child vertices - graph.isCellVisible = function(cell) { + const isVisible = function() { return ( - !this.model.isVertex(cell) || + !cell.isVertex() || cell.geometry == null || !cell.geometry.relative || cell.geometry.relative == relativeChildVerticesVisible diff --git a/src/pages/labels/Wrapping.js b/src/pages/labels/Wrapping.js index 76434da23..e4ac5c77a 100644 --- a/src/pages/labels/Wrapping.js +++ b/src/pages/labels/Wrapping.js @@ -43,7 +43,7 @@ class Wrapping extends React.Component { // Disables in-place editing for edges graph.isCellEditable = function(cell) { - return !this.model.isEdge(cell); + return !cell.isEdge(); }; // Gets the default parent for inserting new cells. This diff --git a/src/pages/layout/Collapse.js b/src/pages/layout/Collapse.js index dc2b54938..689d192f8 100644 --- a/src/pages/layout/Collapse.js +++ b/src/pages/layout/Collapse.js @@ -37,25 +37,20 @@ class Collapse extends React.Component { }; componentDidMount() { - class MyCustomModel extends mxGraphModel { - getStyle(cell) { - // Extends mxGraphModel.getStyle to show an image when collapsed - if (cell != null) { - let style = super.getStyle(cell); - if (this.isCollapsed(cell)) { - style = - `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` + - `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`; - } - return style; - } - return null; - } - } - - const graph = new mxGraph(this.el, new MyCustomModel()); + const graph = new mxGraph(this.el); const parent = graph.getDefaultParent(); + const getStyle = function() { + // Extends mxGraphModel.getStyle to show an image when collapsed + let style = super.getStyle(); + if (this.isCollapsed()) { + style = + `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` + + `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`; + } + return style; + } + graph.batchUpdate(() => { const v1 = graph.insertVertex({ parent, @@ -65,6 +60,7 @@ class Collapse extends React.Component { style: 'shape=swimlane;startSize=20;', }); v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70); + v1.getStyle = getStyle; const v11 = graph.insertVertex({ parent: v1, @@ -72,6 +68,7 @@ class Collapse extends React.Component { position: [10, 40], size: [120, 80], }); + v11.getStyle = getStyle; }); }; } diff --git a/src/pages/layout/Constituent.js b/src/pages/layout/Constituent.js index 49ba8f825..ac882a4ff 100644 --- a/src/pages/layout/Constituent.js +++ b/src/pages/layout/Constituent.js @@ -47,7 +47,7 @@ class Constituent extends React.Component { getInitialCellForEvent(me) { let cell = super.getInitialCellForEvent(me); if (this.graph.isPart(cell)) { - cell = this.graph.getModel().getParent(cell); + cell = this.cell.getParent(); } return cell; } @@ -66,7 +66,7 @@ class Constituent extends React.Component { selectCellForEvent(cell, evt) { // Redirects selection to parent if (this.isPart(cell)) { - cell = this.model.getParent(cell); + cell = cell.getParent(); } super.selectCellForEvent(cell, evt); } diff --git a/src/pages/layout/Groups.js b/src/pages/layout/Groups.js index 9e0d538af..e7076344e 100644 --- a/src/pages/layout/Groups.js +++ b/src/pages/layout/Groups.js @@ -59,19 +59,19 @@ class Groups extends React.Component { mxGraphHandler.prototype.getInitialCellForEvent; mxGraphHandler.prototype.getInitialCellForEvent = function(me) { const model = this.graph.getModel(); - const psel = model.getParent(this.graph.getSelectionCell()); + const psel = this.graph.getSelectionCell().getParent(); let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments); - let parent = model.getParent(cell); + let parent = cell.getParent(); if (psel == null || (psel != cell && psel != parent)) { while ( !this.graph.isCellSelected(cell) && !this.graph.isCellSelected(parent) && - model.isVertex(parent) && + parent.isVertex() && !this.graph.isValidRoot(parent) ) { cell = parent; - parent = this.graph.getModel().getParent(cell); + parent = this.cell.getParent(); } } @@ -84,13 +84,13 @@ class Groups extends React.Component { mxGraphHandler.prototype.isDelayedSelection = function(cell) { let result = graphHandlerIsDelayedSelection.apply(this, arguments); const model = this.graph.getModel(); - const psel = model.getParent(this.graph.getSelectionCell()); - const parent = model.getParent(cell); + const psel = this.graph.getSelectionCell().getParent(); + const parent = cell.getParent(); if (psel == null || (psel != cell && psel != parent)) { if ( !this.graph.isCellSelected(cell) && - model.isVertex(parent) && + parent.isVertex() && !this.graph.isValidRoot(parent) ) { result = true; @@ -109,15 +109,15 @@ class Groups extends React.Component { } const model = this.graph.getModel(); - let parent = model.getParent(cell); + let parent = cell.getParent(); while ( this.graph.isCellSelected(cell) && - model.isVertex(parent) && + parent.isVertex() && !this.graph.isValidRoot(parent) ) { cell = parent; - parent = model.getParent(cell); + parent = cell.getParent(); } this.graph.selectCellForEvent(cell, me.getEvent()); @@ -127,16 +127,14 @@ class Groups extends React.Component { mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) { let cell = me.getCell(); const model = this.graph.getModel(); - let parent = model.getParent(cell); + let parent = cell.getParent(); - while (model.isVertex(parent) && !this.graph.isValidRoot(parent)) { + while (parent.isVertex() && !this.graph.isValidRoot(parent)) { if (this.graph.isCellSelected(parent)) { cell = parent; } - - parent = model.getParent(parent); + parent = parent.getParent(); } - return cell; }; diff --git a/src/pages/layout/Layers.js b/src/pages/layout/Layers.js index ad604178d..645943edd 100644 --- a/src/pages/layout/Layers.js +++ b/src/pages/layout/Layers.js @@ -119,13 +119,13 @@ class Layers extends React.Component { this.el2.appendChild( mxUtils.button('Layer 0', function() { - model.setVisible(layer0, !model.isVisible(layer0)); + model.setVisible(layer0, !layer0.isVisible()); }) ); this.el2.appendChild( mxUtils.button('Layer 1', function() { - model.setVisible(layer1, !model.isVisible(layer1)); + model.setVisible(layer1, !layer1.isVisible()); }) ); } diff --git a/src/pages/layout/OrgChart.js b/src/pages/layout/OrgChart.js index fd2fba01a..5e4a18ee9 100644 --- a/src/pages/layout/OrgChart.js +++ b/src/pages/layout/OrgChart.js @@ -203,7 +203,7 @@ class OrgChart extends React.Component { graph.cellRenderer.getLabelValue = function(state) { let result = state.cell.value; - if (state.view.graph.getModel().isVertex(state.cell)) { + if (state.cell.isVertex()) { if (state.view.scale > 1) { result += '\nDetails 1'; } @@ -278,7 +278,7 @@ class OrgChart extends React.Component { const model = graph.getModel(); if (cell != null) { - if (model.isVertex(cell)) { + if (cell.isVertex()) { menu.addItem( 'Add child', 'editors/images/overlays/check.png', @@ -292,7 +292,7 @@ class OrgChart extends React.Component { graph.startEditingAtCell(cell); }); - if (cell.id != 'treeRoot' && model.isVertex(cell)) { + if (cell.id != 'treeRoot' && cell.isVertex()) { menu.addItem('Delete', 'editors/images/delete.gif', function() { deleteSubtree(graph, cell); }); @@ -371,7 +371,7 @@ class OrgChart extends React.Component { model.beginUpdate(); try { vertex = graph.insertVertex(parent, null, 'Double click to set name'); - const geometry = model.getGeometry(vertex); + const geometry = vertex.getGeometry(); // Updates the geometry of the vertex with the // preferred size computed in the graph diff --git a/src/pages/layout/SwimLanes.js b/src/pages/layout/SwimLanes.js index e0703bac1..defa281fd 100644 --- a/src/pages/layout/SwimLanes.js +++ b/src/pages/layout/SwimLanes.js @@ -149,7 +149,7 @@ class SwimLanes extends React.Component { graph.isValidSource = function(cell) { if (previousIsValidSource.apply(this, arguments)) { - const style = this.getModel().getStyle(cell); + const style = cell.getStyle(); return ( style == null || !(style == 'end' || style.indexOf('end') == 0) @@ -166,10 +166,10 @@ class SwimLanes extends React.Component { // the example below, so we use the state // style below graph.isValidTarget = function(cell) { - const style = this.getModel().getStyle(cell); + const style = cell.getStyle(); return ( - !this.getModel().isEdge(cell) && + !cell.isEdge() && !this.isSwimlane(cell) && (style == null || !(style == 'state' || style.indexOf('state') == 0)) ); @@ -194,7 +194,7 @@ class SwimLanes extends React.Component { // Checks if any lanes or pools are selected for (let i = 0; i < cells.length; i++) { - const tmp = model.getParent(cells[i]); + const tmp = cells[i].getParent(); lane = lane || this.isPool(tmp); pool = pool || this.isPool(cells[i]); @@ -205,33 +205,16 @@ class SwimLanes extends React.Component { !pool && cell != lane && ((lane && this.isPool(target)) || - (cell && this.isPool(model.getParent(target)))) + (cell && this.isPool(target.getParent()))) ); }; // Adds new method for identifying a pool graph.isPool = function(cell) { const model = this.getModel(); - const parent = model.getParent(cell); + const parent = cell.getParent(); - return parent != null && model.getParent(parent) == model.getRoot(); - }; - - // Changes swimlane orientation while collapsed - graph.model.getStyle = function(cell) { - let style = mxGraphModel.prototype.getStyle.apply(this, arguments); - - if (graph.isCellCollapsed(cell)) { - if (style != null) { - style += ';'; - } else { - style = ''; - } - - style += 'horizontal=1;align=left;spacingLeft=14;'; - } - - return style; + return parent != null && parent.getParent() == model.getRoot(); }; // Keeps widths on collapse/expand @@ -239,7 +222,7 @@ class SwimLanes extends React.Component { const cells = evt.getProperty('cells'); for (let i = 0; i < cells.length; i++) { - const geo = graph.model.getGeometry(cells[i]); + const geo = cells[i].getGeometry(); if (geo.alternateBounds != null) { geo.width = geo.alternateBounds.width; @@ -250,6 +233,20 @@ class SwimLanes extends React.Component { graph.addListener(mxEvent.FOLD_CELLS, foldingHandler); } + // Changes swimlane orientation while collapsed + const getStyle = function() { + let style = super.getStyle(); + if (this.isCellCollapsed()) { + if (style != null) { + style += ';'; + } else { + style = ''; + } + style += 'horizontal=1;align=left;spacingLeft=14;'; + } + return style; + }; + // Applies size changes to siblings and parents new mxSwimlaneManager(graph); @@ -272,9 +269,9 @@ class SwimLanes extends React.Component { layoutMgr.getLayout = function(cell) { if ( - !model.isEdge(cell) && - graph.getModel().getChildCount(cell) > 0 && - (model.getParent(cell) == model.getRoot() || graph.isPool(cell)) + !cell.isEdge() && + cell.getChildCount() > 0 && + (cell.getParent() == model.getRoot() || graph.isPool(cell)) ) { layout.fill = graph.isPool(cell); @@ -288,229 +285,251 @@ class SwimLanes extends React.Component { // is normally the first child of the root (ie. layer 0). const parent = graph.getDefaultParent(); + const insertVertex = options => { + const v = graph.insertVertex(options); + v.getStyle = getStyle; + return v; + }; + + const insertEdge = options => { + const e = graph.insertEdge(options); + e.getStyle = getStyle; + return e; + }; + // Adds cells to the model in a single step - model.beginUpdate(); - try { - const pool1 = graph.insertVertex(parent, null, 'Pool 1', 0, 0, 640, 0); + model.batchUpdate(() => { + const pool1 = insertVertex({ + parent, + value: 'Pool 1', + position: [0, 0], + size: [640, 0], + }); pool1.setConnectable(false); - const lane1a = graph.insertVertex(pool1, null, 'Lane A', 0, 0, 640, 110); + const lane1a = insertVertex({ + parent: pool1, + value: 'Lane A', + position: [0, 0], + size: [640, 110], + }); lane1a.setConnectable(false); - const lane1b = graph.insertVertex(pool1, null, 'Lane B', 0, 0, 640, 110); + const lane1b = insertVertex({ + parent: pool1, + value: 'Lane B', + position: [0, 0], + size: [640, 110], + }); lane1b.setConnectable(false); - const pool2 = graph.insertVertex(parent, null, 'Pool 2', 0, 0, 640, 0); + const pool2 = insertVertex({ + parent, + value: 'Pool 2', + position: [0, 0], + size: [640, 0], + }); pool2.setConnectable(false); - const lane2a = graph.insertVertex(pool2, null, 'Lane A', 0, 0, 640, 140); + const lane2a = insertVertex({ + parent: pool2, + value: 'Lane A', + position: [0, 0], + size: [640, 140], + }); lane2a.setConnectable(false); - const lane2b = graph.insertVertex(pool2, null, 'Lane B', 0, 0, 640, 110); + const lane2b = insertVertex({ + parent: pool2, + value: 'Lane B', + position: [0, 0], + size: [640, 110], + }); lane2b.setConnectable(false); - const start1 = graph.insertVertex( - lane1a, - null, - null, - 40, - 40, - 30, - 30, - 'state' - ); - const end1 = graph.insertVertex( - lane1a, - null, - 'A', - 560, - 40, - 30, - 30, - 'end' - ); + const start1 = insertVertex({ + parent: lane1a, + position: [40, 40], + size: [30, 30], + style: 'state', + }); + const end1 = insertVertex({ + parent: lane1a, + value: 'A', + position: [560, 40], + size: [30, 30], + style: 'end', + }); - const step1 = graph.insertVertex( - lane1a, - null, - 'Contact\nProvider', - 90, - 30, - 80, - 50, - 'process' - ); - const step11 = graph.insertVertex( - lane1a, - null, - 'Complete\nAppropriate\nRequest', - 190, - 30, - 80, - 50, - 'process' - ); - const step111 = graph.insertVertex( - lane1a, - null, - 'Receive and\nAcknowledge', - 385, - 30, - 80, - 50, - 'process' - ); + const step1 = insertVertex({ + parent: lane1a, + value: 'Contact\nProvider', + position: [90, 30], + size: [80, 50], + style: 'process', + }); + const step11 = insertVertex({ + parent: lane1a, + value: 'Complete\nAppropriate\nRequest', + position: [190, 30], + size: [80, 50], + style: 'process', + }); + const step111 = insertVertex({ + parent: lane1a, + value: 'Receive and\nAcknowledge', + position: [385, 30], + size: [80, 50], + style: 'process', + }); - const start2 = graph.insertVertex( - lane2b, - null, - null, - 40, - 40, - 30, - 30, - 'state' - ); + const start2 = insertVertex({ + parent: lane2b, + position: [40, 40], + size: [30, 30], + style: 'state', + }); - const step2 = graph.insertVertex( - lane2b, - null, - 'Receive\nRequest', - 90, - 30, - 80, - 50, - 'process' - ); - const step22 = graph.insertVertex( - lane2b, - null, - 'Refer to Tap\nSystems\nCoordinator', - 190, - 30, - 80, - 50, - 'process' - ); + const step2 = insertVertex({ + parent: lane2b, + value: 'Receive\nRequest', + position: [90, 30], + size: [80, 50], + style: 'process', + }); + const step22 = insertVertex({ + parent: lane2b, + value: 'Refer to Tap\nSystems\nCoordinator', + position: [190, 30], + size: [80, 50], + style: 'process', + }); - const step3 = graph.insertVertex( - lane1b, - null, - 'Request 1st-\nGate\nInformation', - 190, - 30, - 80, - 50, - 'process' - ); - const step33 = graph.insertVertex( - lane1b, - null, - 'Receive 1st-\nGate\nInformation', - 290, - 30, - 80, - 50, - 'process' - ); + const step3 = insertVertex({ + parent: lane1b, + value: 'Request 1st-\nGate\nInformation', + position: [190, 30], + size: [80, 50], + style: 'process', + }); + const step33 = insertVertex({ + parent: lane1b, + value: 'Receive 1st-\nGate\nInformation', + position: [290, 30], + size: [80, 50], + style: 'process', + }); - const step4 = graph.insertVertex( - lane2a, - null, - 'Receive and\nAcknowledge', - 290, - 20, - 80, - 50, - 'process' - ); - const step44 = graph.insertVertex( - lane2a, - null, - 'Contract\nConstraints?', - 400, - 20, - 50, - 50, - 'condition' - ); - const step444 = graph.insertVertex( - lane2a, - null, - 'Tap for gas\ndelivery?', - 480, - 20, - 50, - 50, - 'condition' - ); + const step4 = insertVertex({ + parent: lane2a, + value: 'Receive and\nAcknowledge', + position: [290, 20], + size: [80, 50], + style: 'process', + }); + const step44 = insertVertex({ + parent: lane2a, + value: 'Contract\nConstraints?', + position: [400, 20], + size: [50, 50], + style: 'condition', + }); + const step444 = insertVertex({ + parent: lane2a, + value: 'Tap for gas\ndelivery?', + position: [480, 20], + size: [50, 50], + style: 'condition', + }); - const end2 = graph.insertVertex( - lane2a, - null, - 'B', - 560, - 30, - 30, - 30, - 'end' - ); - const end3 = graph.insertVertex( - lane2a, - null, - 'C', - 560, - 84, - 30, - 30, - 'end' - ); + const end2 = insertVertex({ + parent: lane2a, + value: 'B', + position: [560, 30], + size: [30, 30], + style: 'end', + }); + const end3 = insertVertex({ + parent: lane2a, + value: 'C', + position: [560, 84], + size: [30, 30], + style: 'end', + }); let e = null; - graph.insertEdge(lane1a, null, null, start1, step1); - graph.insertEdge(lane1a, null, null, step1, step11); - graph.insertEdge(lane1a, null, null, step11, step111); + insertEdge({ + parent: lane1a, + source: start1, + target: step1, + }); + insertEdge({ + parent: lane1a, + source: step1, + target: step11, + }); + insertEdge({ + parent: lane1a, + source: step11, + target: step111, + }); - graph.insertEdge(lane2b, null, null, start2, step2); - graph.insertEdge(lane2b, null, null, step2, step22); - graph.insertEdge(parent, null, null, step22, step3); - - graph.insertEdge(lane1b, null, null, step3, step33); - graph.insertEdge(lane2a, null, null, step4, step44); - graph.insertEdge( - lane2a, - null, - 'No', - step44, - step444, - 'verticalAlign=bottom' - ); - graph.insertEdge( + insertEdge({ + parent: lane2b, + source: start2, + target: step2, + }); + insertEdge({ + parent: lane2b, + source: step2, + target: step22, + }); + insertEdge({ parent, - null, - 'Yes', - step44, - step111, - 'verticalAlign=bottom;horizontal=0;labelBackgroundColor=white;' - ); + source: step22, + target: step3, + }); - graph.insertEdge( - lane2a, - null, - 'Yes', - step444, - end2, - 'verticalAlign=bottom' - ); - e = graph.insertEdge( - lane2a, - null, - 'No', - step444, - end3, - 'verticalAlign=top' - ); + insertEdge({ + parent: lane1b, + source: step3, + target: step33, + }); + insertEdge({ + parent: lane2a, + source: step4, + target: step44, + }); + insertEdge({ + parent: lane2a, + value: 'No', + source: step44, + target: step444, + style: 'verticalAlign=bottom', + }); + insertEdge({ + parent, + value: 'Yes', + source: step44, + target: step111, + style: 'verticalAlign=bottom;horizontal=0;labelBackgroundColor=white;', + }); + + insertEdge({ + parent: lane2a, + value: 'Yes', + source: step444, + target: end2, + style: 'verticalAlign=bottom', + }); + e = insertEdge({ + parent: lane2a, + value: 'No', + source: step444, + target: end3, + style: 'verticalAlign=top', + }); e.geometry.points = [ new mxPoint( step444.geometry.x + step444.geometry.width / 2, @@ -518,21 +537,41 @@ class SwimLanes extends React.Component { ), ]; - graph.insertEdge(parent, null, null, step1, step2, 'crossover'); - graph.insertEdge(parent, null, null, step3, step11, 'crossover'); - e = graph.insertEdge(lane1a, null, null, step11, step33, 'crossover'); + insertEdge({ + parent, + source: step1, + target: step2, + style: 'crossover', + }); + insertEdge({ + parent, + source: step3, + target: step11, + style: 'crossover', + }); + e = insertEdge({ + parent: lane1a, + source: step11, + target: step33, + style: 'crossover', + }); e.geometry.points = [ new mxPoint( step33.geometry.x + step33.geometry.width / 2 + 20, step11.geometry.y + (step11.geometry.height * 4) / 5 ), ]; - graph.insertEdge(parent, null, null, step33, step4); - graph.insertEdge(lane1a, null, null, step111, end1); - } finally { - // Updates the display - model.endUpdate(); - } + insertEdge({ + parent, + source: step33, + target: step4, + }); + insertEdge({ + parent: lane1a, + source: step111, + target: end1, + }); + }); } } diff --git a/src/pages/misc/DynamicLoading.js b/src/pages/misc/DynamicLoading.js index 7b59f0232..172bfb0bd 100644 --- a/src/pages/misc/DynamicLoading.js +++ b/src/pages/misc/DynamicLoading.js @@ -95,7 +95,7 @@ class DynamicLoading extends React.Component { // by requesting the respective data in the server-side // (implemented for this demo using the server-function) function load(graph, cell) { - if (graph.getModel().isVertex(cell)) { + if (cell.isVertex()) { const cx = graph.container.clientWidth / 2; const cy = graph.container.clientHeight / 2; @@ -115,7 +115,7 @@ class DynamicLoading extends React.Component { for (var key in graph.getModel().cells) { const tmp = graph.getModel().getCell(key); - if (tmp != cell && graph.getModel().isVertex(tmp)) { + if (tmp != cell && tmp.isVertex()) { graph.removeCells([tmp]); } } @@ -124,7 +124,7 @@ class DynamicLoading extends React.Component { graph.getModel().mergeChildren(model.getRoot().getChildAt(0), parent); // Moves the given cell to the center - let geo = graph.getModel().getGeometry(cell); + let geo = cell.getGeometry(); if (geo != null) { geo = geo.clone(); @@ -143,13 +143,13 @@ class DynamicLoading extends React.Component { for (var key in graph.getModel().cells) { const tmp = graph.getModel().getCell(key); - if (tmp != cell && model.isVertex(tmp)) { + if (tmp != cell && tmp.isVertex()) { vertices.push(tmp); // Changes the initial location "in-place" // to get a nice animation effect from the // center to the radius of the circle - const geo = model.getGeometry(tmp); + const geo = tmp.getGeometry(); if (geo != null) { geo.x = cx - geo.width / 2; @@ -167,7 +167,7 @@ class DynamicLoading extends React.Component { ); for (let i = 0; i < cellCount; i++) { - let geo = graph.getModel().getGeometry(vertices[i]); + let geo = vertices[i].getGeometry(); if (geo != null) { geo = geo.clone(); diff --git a/src/pages/misc/Permissions.js b/src/pages/misc/Permissions.js index 125fe4d02..5ceec34a8 100644 --- a/src/pages/misc/Permissions.js +++ b/src/pages/misc/Permissions.js @@ -199,9 +199,9 @@ class Permissions extends React.Component { graph.isCellEditable = function(cell) { return ( (oldEditable.apply(this, arguments) && - this.getModel().isVertex(cell) && + cell.isVertex() && currentPermission.editVertices) || - (this.getModel().isEdge(cell) && currentPermission.editEdges) + (cell.isEdge() && currentPermission.editEdges) ); }; @@ -209,9 +209,9 @@ class Permissions extends React.Component { graph.isCellDeletable = function(cell) { return ( (oldDeletable.apply(this, arguments) && - this.getModel().isVertex(cell) && + cell.isVertex() && currentPermission.editVertices) || - (this.getModel().isEdge(cell) && currentPermission.editEdges) + (cell.isEdge() && currentPermission.editEdges) ); }; diff --git a/src/pages/misc/Visibility.js b/src/pages/misc/Visibility.js index 434a55627..dfc3a4492 100644 --- a/src/pages/misc/Visibility.js +++ b/src/pages/misc/Visibility.js @@ -57,16 +57,14 @@ class Visibility extends React.Component { let showThree = true; // Overridden to implement dynamic conditions - graph.isCellVisible = function(cell) { - let result = mxGraph.prototype.isCellVisible.apply(this, arguments); - - if (result && cell.value != null) { + const isVisible = function() { + let result = super.isVisible(); + if (result && this.value != null) { result = - (showOne && cell.value == '1') || - (showTwo && cell.value == '2') || - (showThree && cell.value == '3'); + (showOne && this.value == '1') || + (showTwo && this.value == '2') || + (showThree && this.value == '3'); } - return result; }; @@ -79,18 +77,23 @@ class Visibility extends React.Component { position: [20, 20], size: [80, 30], }); + v1.isVisible = isVisible; + const v2 = graph.insertVertex({ parent, value: '2', position: [200, 150], size: [80, 30], }); + v2.isVisible = isVisible; + const e1 = graph.insertEdge({ parent, value: '3', source: v1, target: v2, }); + e1.isVisible = isVisible; }); // Dynamic conditions (requires refresh) @@ -116,7 +119,7 @@ class Visibility extends React.Component { // Explicit show/hide this.el2.appendChild( mxUtils.button('Toggle cell', function() { - graph.toggleCells(!graph.getModel().isVisible(v1), [v1], true); + graph.toggleCells(!v1.isVisible(), [v1], true); }) ); diff --git a/src/pages/shapes_stencils/Stencils.js b/src/pages/shapes_stencils/Stencils.js index c6b282e38..5527df733 100644 --- a/src/pages/shapes_stencils/Stencils.js +++ b/src/pages/shapes_stencils/Stencils.js @@ -375,7 +375,7 @@ class Stencils extends React.Component { if (cell != null) { const style = mxUtils.prompt( 'Style', - graph.getModel().getStyle(cell) + cell.getStyle() ); if (style != null) { diff --git a/src/pages/styles/DynamicStyle.js b/src/pages/styles/DynamicStyle.js index b343a068d..f40da1cee 100644 --- a/src/pages/styles/DynamicStyle.js +++ b/src/pages/styles/DynamicStyle.js @@ -50,41 +50,34 @@ class DynamicStyle extends React.Component { // not explicitely changed using mxStyleChange graph.getView().updateStyle = true; - // Overrides mxGraphModel.getStyle to return a specific style + // Overrides mxCell.getStyle to return a specific style // for edges that reflects their target terminal (in this case // the strokeColor will be equal to the target's fillColor). - const previous = graph.model.getStyle; - graph.model.getStyle = function(cell) { - if (cell != null) { - let style = previous.apply(this, arguments); + const getStyle = function() { + let style = super.getStyle(); - if (this.isEdge(cell)) { - const target = this.getTerminal(cell, false); + if (this.isEdge()) { + const target = this.getTerminal(false); - if (target != null) { - const targetStyle = graph.getCurrentCellStyle(target); - const fill = mxUtils.getValue( - targetStyle, - mxConstants.STYLE_FILLCOLOR - ); + if (target != null) { + const targetStyle = graph.getCurrentCellStyle(target); + const fill = mxUtils.getValue( + targetStyle, + mxConstants.STYLE_FILLCOLOR + ); - if (fill != null) { - style += `;strokeColor=${fill}`; - } - } - } else if (this.isVertex(cell)) { - const geometry = this.getGeometry(cell); - - if (geometry != null && geometry.width > 80) { - style += ';fillColor=green'; + if (fill != null) { + style += `;strokeColor=${fill}`; } } - - return style; + } else if (this.isVertex()) { + const geometry = this.getGeometry(); + if (geometry != null && geometry.width > 80) { + style += ';fillColor=green'; + } } - - return null; + return style; }; // Gets the default parent for inserting new cells. This @@ -100,6 +93,8 @@ class DynamicStyle extends React.Component { size: [80, 30], style: 'fillColor=green', }); + v1.getStyle = getStyle; + const v2 = graph.insertVertex({ parent, value: 'World!', @@ -107,6 +102,8 @@ class DynamicStyle extends React.Component { size: [80, 30], style: 'fillColor=blue', }); + v2.getStyle = getStyle; + const v3 = graph.insertVertex({ parent, value: 'World!', @@ -114,6 +111,8 @@ class DynamicStyle extends React.Component { size: [80, 30], style: 'fillColor=red', }); + v3.getStyle = getStyle; + const e1 = graph.insertEdge({ parent, value: 'Connect', @@ -121,6 +120,7 @@ class DynamicStyle extends React.Component { target: v2, style: 'perimeterSpacing=4;strokeWidth=4;labelBackgroundColor=white;fontStyle=1', }); + e1.getStyle = getStyle; }); }; } diff --git a/src/pages/styles/HoverStyle.js b/src/pages/styles/HoverStyle.js index 8ac6e8ac0..d0eca3ff1 100644 --- a/src/pages/styles/HoverStyle.js +++ b/src/pages/styles/HoverStyle.js @@ -75,7 +75,7 @@ class HoverStyle extends React.Component { // Ignores everything but vertices if ( graph.isMouseDown || - (tmp != null && !graph.getModel().isVertex(tmp.cell)) + (tmp != null && !tmp.cell.isVertex()) ) { tmp = null; } diff --git a/src/pages/styles/Stylesheet.js b/src/pages/styles/Stylesheet.js index 5f571e4de..3018c898b 100644 --- a/src/pages/styles/Stylesheet.js +++ b/src/pages/styles/Stylesheet.js @@ -49,7 +49,7 @@ class Stylesheet extends React.Component { graph.getLabel = function(cell) { const label = mxGraph.prototype.getLabel.apply(this, arguments); - if (this.getModel().isEdge(cell)) { + if (cell.isEdge()) { return `Transfer ${label}`; } return label; @@ -61,9 +61,9 @@ class Stylesheet extends React.Component { const { cell } = state; const model = this.getModel(); - if (model.isEdge(cell)) { - const source = this.getLabel(model.getTerminal(cell, true)); - const target = this.getLabel(model.getTerminal(cell, false)); + if (modcellel.isEdge()) { + const source = this.getLabel(cell.getTerminal(true)); + const target = this.getLabel(cell.getTerminal(false)); return `${source} -> ${target}`; } diff --git a/src/pages/xml_json/UserObject.js b/src/pages/xml_json/UserObject.js index 615ff0800..81326762e 100644 --- a/src/pages/xml_json/UserObject.js +++ b/src/pages/xml_json/UserObject.js @@ -101,7 +101,7 @@ class UserObject extends React.Component { // Overrides method to disallow edge label editing graph.isCellEditable = function(cell) { - return !this.getModel().isEdge(cell); + return !cell.isEdge(); }; // Overrides method to provide a cell label in the display @@ -174,9 +174,9 @@ class UserObject extends React.Component { const { getTooltipForCell } = graph; graph.getTooltipForCell = function(cell) { // Adds some relation details for edges - if (graph.getModel().isEdge(cell)) { - const src = this.getLabel(this.getModel().getTerminal(cell, true)); - const trg = this.getLabel(this.getModel().getTerminal(cell, false)); + if (cell.isEdge()) { + const src = this.getLabel(cell.getTerminal(true)); + const trg = this.getLabel(cell.getTerminal(false)); return `${src} ${cell.value.nodeName} ${trg}`; } diff --git a/src/pages/zoom_offpage/LOD.js b/src/pages/zoom_offpage/LOD.js index 739ea5900..3fcc5e7aa 100644 --- a/src/pages/zoom_offpage/LOD.js +++ b/src/pages/zoom_offpage/LOD.js @@ -45,7 +45,7 @@ class LOD extends React.Component { graph.centerZoom = false; // Links level of detail to zoom level but can be independent of zoom - graph.isCellVisible = function(cell) { + const isVisible = function(cell) { return cell.lod == null || cell.lod / 2 < this.view.scale; }; @@ -54,26 +54,35 @@ class LOD extends React.Component { const parent = graph.getDefaultParent(); // Adds cells to the model in a single step - graph.getModel().beginUpdate(); - try { + graph.batchUpdate(() => { const v1 = graph.insertVertex(parent, null, '1', 20, 20, 80, 30); v1.lod = 1; + v1.isVisible = isVisible; + const v2 = graph.insertVertex(parent, null, '1', 200, 150, 80, 30); v2.lod = 1; + v2.isVisible = isVisible; + const v3 = graph.insertVertex(parent, null, '2', 20, 150, 40, 20); v3.lod = 2; + v3.isVisible = isVisible; + const v4 = graph.insertVertex(parent, null, '3', 200, 10, 20, 20); v4.lod = 3; + v4.isVisible = isVisible; + const e1 = graph.insertEdge(parent, null, '2', v1, v2, 'strokeWidth=2'); e1.lod = 2; - var e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2'); + e1.isVisible = isVisible; + + const e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2'); e2.lod = 2; - var e2 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1'); - e2.lod = 3; - } finally { - // Updates the display - graph.getModel().endUpdate(); - } + e2.isVisible = isVisible; + + const e3 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1'); + e3.lod = 3; + e3.isVisible = isVisible; + }); this.el2.appendChild( mxUtils.button('+', function() {