From 16ae8bb743c5f6281038bc305af6416cff6a49fe Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Fri, 2 Apr 2021 13:08:03 +1100 Subject: [PATCH] reorganize directory structure and converting to typescript --- src/.eslintrc | 5 +- .../atomic_changes/mxCellAttributeChange.js | 2 +- .../atomic_changes/mxChildChange.js | 2 +- .../atomic_changes/mxCollapseChange.js | 2 +- .../atomic_changes/mxGeometryChange.js | 2 +- .../atomic_changes/mxRootChange.js | 2 +- .../atomic_changes/mxStyleChange.js | 2 +- .../atomic_changes/mxTerminalChange.js | 2 +- .../atomic_changes/mxValueChange.js | 2 +- .../atomic_changes/mxVisibleChange.js | 2 +- src/mxgraph/editor/mxDefaultToolbar.js | 2 +- src/mxgraph/editor/mxEditor.js | 10 +- ...{mxCellHighlight.js => mxCellHighlight.ts} | 63 ++-- src/mxgraph/handler/mxConnectionHandler.js | 4 +- src/mxgraph/io/mxCellCodec.js | 2 +- src/mxgraph/io/mxChildChangeCodec.js | 2 +- src/mxgraph/io/mxCodec.js | 4 +- src/mxgraph/io/mxGenericChangeCodec.js | 12 +- src/mxgraph/io/mxModelCodec.js | 2 +- src/mxgraph/io/mxObjectCodec.js | 2 +- src/mxgraph/io/mxRootChangeCodec.js | 2 +- src/mxgraph/io/mxTerminalChangeCodec.js | 2 +- .../hierarchical/model/mxSwimlaneModel.js | 2 +- .../hierarchical/stage/mxSwimlaneOrdering.js | 2 +- src/mxgraph/layout/mxCompactTreeLayout.js | 2 +- src/mxgraph/layout/mxGraphLayout.js | 2 +- src/mxgraph/shape/{mxShape.js => mxShape.ts} | 222 ++++---------- .../shape/node/{mxCloud.js => mxCloud.ts} | 8 +- .../node/{mxCylinder.js => mxCylinder.ts} | 14 +- ...{mxDoubleEllipse.js => mxDoubleEllipse.ts} | 15 +- .../shape/node/{mxEllipse.js => mxEllipse.ts} | 7 +- .../shape/node/{mxHexagon.js => mxHexagon.ts} | 8 +- .../node/{mxImageShape.js => mxImageShape.ts} | 26 +- ...xRectangleShape.js => mxRectangleShape.ts} | 27 +- .../shape/node/{mxRhombus.js => mxRhombus.ts} | 18 +- src/mxgraph/shape/{ => node}/mxStencil.js | 12 +- .../shape/{ => node}/mxStencilRegistry.js | 0 .../{model => util/datatypes}/mxGeometry.js | 6 +- src/mxgraph/util/mxUtils.js | 2 +- .../{model/mxCell.js => view/cell/mxCell.ts} | 113 +++---- src/mxgraph/view/cell/mxCellEditor.ts | 4 +- src/mxgraph/view/cell/mxCellOverlay.ts | 2 +- .../{model => view/cell}/mxCellPath.js | 0 .../{mxCellRenderer.js => mxCellRenderer.ts} | 141 +++++---- .../cell/{mxCellState.js => mxCellState.ts} | 85 +++--- ...CellStates.js => mxTemporaryCellStates.ts} | 20 +- src/mxgraph/view/graph/mxCurrentRootChange.ts | 4 +- src/mxgraph/view/graph/mxGraph.ts | 247 ++++++++------- .../{model => view/graph}/mxGraphModel.js | 44 ++- ...ctionModel.js => mxGraphSelectionModel.ts} | 52 ++-- src/mxgraph/view/graph/mxGraphView.ts | 37 +-- ...{mxLayoutManager.js => mxLayoutManager.ts} | 34 ++- src/mxgraph/view/graph/mxSelectionChange.ts | 4 +- .../style/{mxPerimeter.js => mxPerimeter.ts} | 16 +- src/pages/backgrounds/ExampleBase.ts | 27 ++ src/pages/backgrounds/ExtendCanvas.js | 272 ----------------- src/pages/backgrounds/ExtendCanvas.ts | 282 ++++++++++++++++++ src/pages/backgrounds/Grid.js | 10 +- src/pages/basic/HelloWorld.js | 4 +- src/pages/basic/Template.js | 2 +- src/pages/connections/Anchors.js | 200 +++++++------ src/pages/connections/EdgeTolerance.js | 4 +- src/pages/connections/FixedPoints.js | 8 +- src/pages/connections/HelloPort.js | 8 +- src/pages/connections/Orthogonal.js | 10 +- src/pages/connections/PortRefs.js | 10 +- src/pages/dnd_copypaste/Clipboard.js | 8 +- src/pages/dnd_copypaste/DragSource.js | 10 +- src/pages/dnd_copypaste/Drop.js | 4 +- src/pages/editing/Editing.js | 4 +- src/pages/effects/Animation.js | 4 +- src/pages/effects/Morph.js | 6 +- src/pages/effects/Overlays.js | 8 +- src/pages/events/Boundary.js | 6 +- src/pages/events/Events.js | 10 +- src/pages/icons_images/ContextIcons.js | 4 +- src/pages/icons_images/Control.js | 12 +- src/pages/icons_images/FixedIcon.js | 4 +- src/pages/icons_images/HoverIcons.js | 8 +- src/pages/icons_images/Images.js | 10 +- src/pages/icons_images/Indicators.js | 4 +- src/pages/icons_images/Markers.js | 12 +- src/pages/labels/LabelPosition.js | 2 +- src/pages/labels/Labels.js | 4 +- src/pages/labels/Perimeter.js | 6 +- src/pages/labels/SecondLabel.js | 8 +- src/pages/labels/Wrapping.js | 2 +- src/pages/layout/AutoLayout.js | 14 +- src/pages/layout/Collapse.js | 6 +- src/pages/layout/Constituent.js | 4 +- src/pages/layout/Folding.js | 6 +- src/pages/layout/Groups.js | 2 +- src/pages/layout/Handles.js | 12 +- src/pages/layout/HierarchicalLayout.js | 6 +- src/pages/layout/Layers.js | 8 +- src/pages/layout/OrgChart.js | 22 +- src/pages/layout/RadialTreeLayout.js | 4 +- src/pages/layout/SwimLanes.js | 18 +- src/pages/layout/Tree.js | 18 +- src/pages/misc/DynamicLoading.js | 8 +- src/pages/misc/Guides.js | 6 +- src/pages/misc/Merge.js | 4 +- src/pages/misc/Monitor.js | 10 +- src/pages/misc/Permissions.js | 4 +- src/pages/misc/Thread.js | 2 +- src/pages/misc/Validation.js | 6 +- src/pages/misc/Visibility.js | 2 +- src/pages/printing/PageBreaks.js | 6 +- src/pages/shapes_stencils/Shape.js | 6 +- src/pages/shapes_stencils/Stencils.js | 12 +- src/pages/styles/DynamicStyle.js | 2 +- src/pages/styles/HoverStyle.js | 2 +- src/pages/styles/Stylesheet.js | 6 +- src/pages/toolbars/DynamicToolbar.js | 14 +- src/pages/toolbars/Toolbar.js | 14 +- src/pages/windows/Windows.js | 8 +- src/pages/xml_json/FileIO.js | 8 +- src/pages/xml_json/JsonData.js | 4 +- src/pages/xml_json/Resources.js | 4 +- src/pages/xml_json/UserObject.js | 12 +- src/pages/zoom_offpage/LOD.js | 2 +- src/pages/zoom_offpage/OffPage.js | 4 +- 122 files changed, 1304 insertions(+), 1241 deletions(-) rename src/mxgraph/{model => }/atomic_changes/mxCellAttributeChange.js (97%) rename src/mxgraph/{model => }/atomic_changes/mxChildChange.js (98%) rename src/mxgraph/{model => }/atomic_changes/mxCollapseChange.js (95%) rename src/mxgraph/{model => }/atomic_changes/mxGeometryChange.js (94%) rename src/mxgraph/{model => }/atomic_changes/mxRootChange.js (93%) rename src/mxgraph/{model => }/atomic_changes/mxStyleChange.js (94%) rename src/mxgraph/{model => }/atomic_changes/mxTerminalChange.js (95%) rename src/mxgraph/{model => }/atomic_changes/mxValueChange.js (94%) rename src/mxgraph/{model => }/atomic_changes/mxVisibleChange.js (94%) rename src/mxgraph/handler/{mxCellHighlight.js => mxCellHighlight.ts} (83%) rename src/mxgraph/shape/{mxShape.js => mxShape.ts} (89%) rename src/mxgraph/shape/node/{mxCloud.js => mxCloud.ts} (88%) rename src/mxgraph/shape/node/{mxCylinder.js => mxCylinder.ts} (87%) rename src/mxgraph/shape/node/{mxDoubleEllipse.js => mxDoubleEllipse.ts} (88%) rename src/mxgraph/shape/node/{mxEllipse.js => mxEllipse.ts} (83%) rename src/mxgraph/shape/node/{mxHexagon.js => mxHexagon.ts} (84%) rename src/mxgraph/shape/node/{mxImageShape.js => mxImageShape.ts} (90%) rename src/mxgraph/shape/node/{mxRectangleShape.js => mxRectangleShape.ts} (81%) rename src/mxgraph/shape/node/{mxRhombus.js => mxRhombus.ts} (78%) rename src/mxgraph/shape/{ => node}/mxStencil.js (98%) rename src/mxgraph/shape/{ => node}/mxStencilRegistry.js (100%) rename src/mxgraph/{model => util/datatypes}/mxGeometry.js (98%) rename src/mxgraph/{model/mxCell.js => view/cell/mxCell.ts} (89%) rename src/mxgraph/{model => view/cell}/mxCellPath.js (100%) rename src/mxgraph/view/cell/{mxCellRenderer.js => mxCellRenderer.ts} (94%) rename src/mxgraph/view/cell/{mxCellState.js => mxCellState.ts} (83%) rename src/mxgraph/view/cell/{mxTemporaryCellStates.js => mxTemporaryCellStates.ts} (90%) rename src/mxgraph/{model => view/graph}/mxGraphModel.js (97%) rename src/mxgraph/view/graph/{mxGraphSelectionModel.js => mxGraphSelectionModel.ts} (89%) rename src/mxgraph/view/graph/{mxLayoutManager.js => mxLayoutManager.ts} (92%) rename src/mxgraph/view/style/{mxPerimeter.js => mxPerimeter.ts} (98%) create mode 100644 src/pages/backgrounds/ExampleBase.ts delete mode 100644 src/pages/backgrounds/ExtendCanvas.js create mode 100644 src/pages/backgrounds/ExtendCanvas.ts diff --git a/src/.eslintrc b/src/.eslintrc index bdcc50e03..107984be5 100644 --- a/src/.eslintrc +++ b/src/.eslintrc @@ -1,3 +1,6 @@ { - "extends": "@ijsto" + "extends": "@ijsto", + "rules": { + "newIsCap": false + } } \ No newline at end of file diff --git a/src/mxgraph/model/atomic_changes/mxCellAttributeChange.js b/src/mxgraph/atomic_changes/mxCellAttributeChange.js similarity index 97% rename from src/mxgraph/model/atomic_changes/mxCellAttributeChange.js rename to src/mxgraph/atomic_changes/mxCellAttributeChange.js index fde45d906..800c8909c 100644 --- a/src/mxgraph/model/atomic_changes/mxCellAttributeChange.js +++ b/src/mxgraph/atomic_changes/mxCellAttributeChange.js @@ -60,5 +60,5 @@ class mxCellAttributeChange { } export default mxCellAttributeChange; -import("../../io/mxGenericChangeCodec"); +import("../io/mxGenericChangeCodec"); diff --git a/src/mxgraph/model/atomic_changes/mxChildChange.js b/src/mxgraph/atomic_changes/mxChildChange.js similarity index 98% rename from src/mxgraph/model/atomic_changes/mxChildChange.js rename to src/mxgraph/atomic_changes/mxChildChange.js index bc0bc9936..277600a5a 100644 --- a/src/mxgraph/model/atomic_changes/mxChildChange.js +++ b/src/mxgraph/atomic_changes/mxChildChange.js @@ -93,5 +93,5 @@ class mxChildChange { } export default mxChildChange; -import("../../io/mxChildChangeCodec"); +import("../io/mxChildChangeCodec"); diff --git a/src/mxgraph/model/atomic_changes/mxCollapseChange.js b/src/mxgraph/atomic_changes/mxCollapseChange.js similarity index 95% rename from src/mxgraph/model/atomic_changes/mxCollapseChange.js rename to src/mxgraph/atomic_changes/mxCollapseChange.js index af1dfcdd9..74fe8a565 100644 --- a/src/mxgraph/model/atomic_changes/mxCollapseChange.js +++ b/src/mxgraph/atomic_changes/mxCollapseChange.js @@ -34,5 +34,5 @@ class mxCollapseChange { } export default mxCollapseChange; -import("../../io/mxGenericChangeCodec"); +import("../io/mxGenericChangeCodec"); diff --git a/src/mxgraph/model/atomic_changes/mxGeometryChange.js b/src/mxgraph/atomic_changes/mxGeometryChange.js similarity index 94% rename from src/mxgraph/model/atomic_changes/mxGeometryChange.js rename to src/mxgraph/atomic_changes/mxGeometryChange.js index 1d60c114f..ae4dd729c 100644 --- a/src/mxgraph/model/atomic_changes/mxGeometryChange.js +++ b/src/mxgraph/atomic_changes/mxGeometryChange.js @@ -34,5 +34,5 @@ class mxGeometryChange { } export default mxGeometryChange; -import("../../io/mxGenericChangeCodec"); +import("../io/mxGenericChangeCodec"); diff --git a/src/mxgraph/model/atomic_changes/mxRootChange.js b/src/mxgraph/atomic_changes/mxRootChange.js similarity index 93% rename from src/mxgraph/model/atomic_changes/mxRootChange.js rename to src/mxgraph/atomic_changes/mxRootChange.js index 042fb36a3..ed9abab11 100644 --- a/src/mxgraph/model/atomic_changes/mxRootChange.js +++ b/src/mxgraph/atomic_changes/mxRootChange.js @@ -28,5 +28,5 @@ class mxRootChange { } export default mxRootChange; -import("../../io/mxRootChangeCodec"); +import("../io/mxRootChangeCodec"); diff --git a/src/mxgraph/model/atomic_changes/mxStyleChange.js b/src/mxgraph/atomic_changes/mxStyleChange.js similarity index 94% rename from src/mxgraph/model/atomic_changes/mxStyleChange.js rename to src/mxgraph/atomic_changes/mxStyleChange.js index 475cd4f6c..43d467572 100644 --- a/src/mxgraph/model/atomic_changes/mxStyleChange.js +++ b/src/mxgraph/atomic_changes/mxStyleChange.js @@ -31,5 +31,5 @@ class mxStyleChange { } export default mxStyleChange; -import("../../io/mxGenericChangeCodec"); +import("../io/mxGenericChangeCodec"); diff --git a/src/mxgraph/model/atomic_changes/mxTerminalChange.js b/src/mxgraph/atomic_changes/mxTerminalChange.js similarity index 95% rename from src/mxgraph/model/atomic_changes/mxTerminalChange.js rename to src/mxgraph/atomic_changes/mxTerminalChange.js index e3289b068..69271828e 100644 --- a/src/mxgraph/model/atomic_changes/mxTerminalChange.js +++ b/src/mxgraph/atomic_changes/mxTerminalChange.js @@ -36,5 +36,5 @@ class mxTerminalChange { } export default mxTerminalChange; -import("../../io/mxTerminalChangeCodec"); +import("../io/mxTerminalChangeCodec"); diff --git a/src/mxgraph/model/atomic_changes/mxValueChange.js b/src/mxgraph/atomic_changes/mxValueChange.js similarity index 94% rename from src/mxgraph/model/atomic_changes/mxValueChange.js rename to src/mxgraph/atomic_changes/mxValueChange.js index 8b3b9b7b2..d9a87e343 100644 --- a/src/mxgraph/model/atomic_changes/mxValueChange.js +++ b/src/mxgraph/atomic_changes/mxValueChange.js @@ -31,5 +31,5 @@ class mxValueChange { } export default mxValueChange; -import("../../io/mxGenericChangeCodec"); +import("../io/mxGenericChangeCodec"); diff --git a/src/mxgraph/model/atomic_changes/mxVisibleChange.js b/src/mxgraph/atomic_changes/mxVisibleChange.js similarity index 94% rename from src/mxgraph/model/atomic_changes/mxVisibleChange.js rename to src/mxgraph/atomic_changes/mxVisibleChange.js index 32480e433..bd864dfdf 100644 --- a/src/mxgraph/model/atomic_changes/mxVisibleChange.js +++ b/src/mxgraph/atomic_changes/mxVisibleChange.js @@ -34,5 +34,5 @@ class mxVisibleChange { } export default mxVisibleChange; -import("../../io/mxGenericChangeCodec"); +import("../io/mxGenericChangeCodec"); diff --git a/src/mxgraph/editor/mxDefaultToolbar.js b/src/mxgraph/editor/mxDefaultToolbar.js index 30fe3555a..1a19a0342 100644 --- a/src/mxgraph/editor/mxDefaultToolbar.js +++ b/src/mxgraph/editor/mxDefaultToolbar.js @@ -6,7 +6,7 @@ import mxClient from '../mxClient'; import mxToolbar from '../util/gui/mxToolbar'; -import mxGeometry from '../model/mxGeometry'; +import mxGeometry from '../util/datatypes/mxGeometry'; import mxUtils from '../util/mxUtils'; import mxEvent from '../util/event/mxEvent'; diff --git a/src/mxgraph/editor/mxEditor.js b/src/mxgraph/editor/mxEditor.js index 295fe5f36..5cae49c71 100644 --- a/src/mxgraph/editor/mxEditor.js +++ b/src/mxgraph/editor/mxEditor.js @@ -18,17 +18,17 @@ import mxCodec from '../io/mxCodec'; import mxWindow from '../util/gui/mxWindow'; import mxForm from '../util/gui/mxForm'; import mxOutline from '../view/graph/mxOutline'; -import mxCell from '../model/mxCell'; -import mxGeometry from '../model/mxGeometry'; +import mxCell from '../view/cell/mxCell'; +import mxGeometry from '../util/datatypes/mxGeometry'; import mxConstants from '../util/mxConstants'; import mxGraph from '../view/graph/mxGraph'; import mxSwimlaneManager from '../view/graph/mxSwimlaneManager'; import mxLayoutManager from '../view/graph/mxLayoutManager'; import mxRubberband from '../handler/mxRubberband'; import mxEvent from '../util/event/mxEvent'; -import mxRootChange from '../model/atomic_changes/mxRootChange'; -import mxValueChange from '../model/atomic_changes/mxValueChange'; -import mxCellAttributeChange from '../model/atomic_changes/mxCellAttributeChange'; +import mxRootChange from '../atomic_changes/mxRootChange'; +import mxValueChange from '../atomic_changes/mxValueChange'; +import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange'; import mxPrintPreview from '../view/graph/mxPrintPreview'; import mxClipboard from '../util/storage/mxClipboard'; import mxLog from '../util/gui/mxLog'; diff --git a/src/mxgraph/handler/mxCellHighlight.js b/src/mxgraph/handler/mxCellHighlight.ts similarity index 83% rename from src/mxgraph/handler/mxCellHighlight.js rename to src/mxgraph/handler/mxCellHighlight.ts index d63d91a00..a2939a14f 100644 --- a/src/mxgraph/handler/mxCellHighlight.js +++ b/src/mxgraph/handler/mxCellHighlight.ts @@ -6,29 +6,40 @@ import mxConstants from '../util/mxConstants'; import mxEvent from '../util/event/mxEvent'; import mxRectangle from '../util/datatypes/mxRectangle'; +import mxCellState from "../view/cell/mxCellState"; +import mxGraph from "../view/graph/mxGraph"; +import mxShape from "../shape/mxShape"; class mxCellHighlight { + // TODO: Document me!! + highlightColor: string | null; + strokeWidth: number | null; + dashed: boolean | null; + opacity: number | null; + repaintHandler: Function | null; + shape: mxShape | null; + /** * Variable: keepOnTop * * Specifies if the highlights should appear on top of everything * else in the overlay pane. Default is false. */ - keepOnTop = false; + keepOnTop: boolean = false; /** * Variable: graph * * Reference to the enclosing . */ - graph = null; + graph: mxGraph | null = null; /** * Variable: state * * Reference to the . */ - state = null; + state: mxCellState | null = null; /** * Variable: spacing @@ -36,7 +47,7 @@ class mxCellHighlight { * Specifies the spacing between the highlight for vertices and the vertex. * Default is 2. */ - spacing = 2; + spacing: number = 2; /** * Variable: resetHandler @@ -44,7 +55,7 @@ class mxCellHighlight { * Holds the handler that automatically invokes reset if the highlight * should be hidden. */ - resetHandler = null; + resetHandler: Function | null = null; /** * Class: mxCellHighlight @@ -60,16 +71,16 @@ class mxCellHighlight { * * Constructs a cell highlight. */ - constructor(graph, highlightColor, strokeWidth, dashed) { + constructor(graph: mxGraph | null=null, + highlightColor: string=mxConstants.DEFAULT_VALID_COLOR, + strokeWidth: number=mxConstants.HIGHLIGHT_STROKEWIDTH, + dashed: boolean=false) { + if (graph != null) { this.graph = graph; - this.highlightColor = - highlightColor != null - ? highlightColor - : mxConstants.DEFAULT_VALID_COLOR; - this.strokeWidth = - strokeWidth != null ? strokeWidth : mxConstants.HIGHLIGHT_STROKEWIDTH; - this.dashed = dashed != null ? dashed : false; + this.highlightColor = highlightColor; + this.strokeWidth = strokeWidth; + this.dashed = dashed; this.opacity = mxConstants.HIGHLIGHT_OPACITY; // Updates the marker if the graph changes @@ -113,7 +124,7 @@ class mxCellHighlight { * * color - String that represents the new highlight color. */ - setHighlightColor(color) { + setHighlightColor(color: string): void { this.highlightColor = color; if (this.shape != null) { @@ -126,7 +137,7 @@ class mxCellHighlight { * * Creates and returns the highlight shape for the given state. */ - drawHighlight() { + drawHighlight(): void { this.shape = this.createShape(); this.repaint(); @@ -146,7 +157,7 @@ class mxCellHighlight { * * Creates and returns the highlight shape for the given state. */ - createShape() { + createShape(): mxShape { const shape = this.graph.cellRenderer.createShape(this.state); shape.svgStrokeTolerance = this.graph.tolerance; @@ -175,7 +186,7 @@ class mxCellHighlight { * * Returns the stroke width. */ - getStrokeWidth(state) { + getStrokeWidth(state: mxCellState | null=null): number { return this.strokeWidth; } @@ -184,7 +195,7 @@ class mxCellHighlight { * * Updates the highlight after a change of the model or view. */ - repaint() { + repaint(): void { if (this.state != null && this.shape != null) { this.shape.scale = this.state.view.scale; @@ -220,7 +231,7 @@ class mxCellHighlight { * * Resets the state of the cell marker. */ - hide() { + hide(): void { this.highlight(null); } @@ -229,7 +240,7 @@ class mxCellHighlight { * * Marks the and fires a event. */ - highlight(state) { + highlight(state: mxCellState): void { if (this.state !== state) { if (this.shape != null) { this.shape.destroy(); @@ -237,7 +248,6 @@ class mxCellHighlight { } this.state = state; - if (this.state != null) { this.drawHighlight(); } @@ -249,22 +259,21 @@ class mxCellHighlight { * * Returns true if this highlight is at the given position. */ - isHighlightAt(x, y) { - let hit = false; + isHighlightAt(x: number, + y: number): boolean { + let hit = false; if (this.shape != null && document.elementFromPoint != null) { - let elt = document.elementFromPoint(x, y); + let elt: Node & ParentNode = document.elementFromPoint(x, y); while (elt != null) { if (elt === this.shape.node) { hit = true; break; } - elt = elt.parentNode; } } - return hit; } @@ -273,7 +282,7 @@ class mxCellHighlight { * * Destroys the handler and all its resources and DOM nodes. */ - destroy() { + destroy(): void { this.graph.getView().removeListener(this.resetHandler); this.graph.getView().removeListener(this.repaintHandler); this.graph.getModel().removeListener(this.repaintHandler); diff --git a/src/mxgraph/handler/mxConnectionHandler.js b/src/mxgraph/handler/mxConnectionHandler.js index c739202a7..586335c82 100644 --- a/src/mxgraph/handler/mxConnectionHandler.js +++ b/src/mxgraph/handler/mxConnectionHandler.js @@ -2,8 +2,8 @@ * Copyright (c) 2006-2016, JGraph Ltd * Copyright (c) 2006-2016, Gaudenz Alder */ -import mxGeometry from '../model/mxGeometry'; -import mxCell from '../model/mxCell'; +import mxGeometry from '../util/datatypes/mxGeometry'; +import mxCell from '../view/cell/mxCell'; import mxPoint from '../util/datatypes/mxPoint'; import mxEventObject from '../util/event/mxEventObject'; import mxEvent from '../util/event/mxEvent'; diff --git a/src/mxgraph/io/mxCellCodec.js b/src/mxgraph/io/mxCellCodec.js index eebb4efcf..fca8e5ccf 100644 --- a/src/mxgraph/io/mxCellCodec.js +++ b/src/mxgraph/io/mxCellCodec.js @@ -4,7 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 */ -import mxCell from '../model/mxCell'; +import mxCell from '../view/cell/mxCell'; import mxObjectCodec from './mxObjectCodec'; import mxCodecRegistry from './mxCodecRegistry'; import mxUtils from "../util/mxUtils"; diff --git a/src/mxgraph/io/mxChildChangeCodec.js b/src/mxgraph/io/mxChildChangeCodec.js index 58bcd8da6..abfbe1726 100644 --- a/src/mxgraph/io/mxChildChangeCodec.js +++ b/src/mxgraph/io/mxChildChangeCodec.js @@ -4,7 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 */ -import mxChildChange from '../model/atomic_changes/mxChildChange'; +import mxChildChange from '../atomic_changes/mxChildChange'; import mxObjectCodec from './mxObjectCodec'; import mxCodecRegistry from './mxCodecRegistry'; import mxUtils from '../util/mxUtils'; diff --git a/src/mxgraph/io/mxCodec.js b/src/mxgraph/io/mxCodec.js index 1f90b692b..56416ad61 100644 --- a/src/mxgraph/io/mxCodec.js +++ b/src/mxgraph/io/mxCodec.js @@ -5,10 +5,10 @@ */ import mxUtils from '../util/mxUtils'; -import mxCellPath from '../model/mxCellPath'; +import mxCellPath from '../view/cell/mxCellPath'; import mxCodecRegistry from "./mxCodecRegistry"; import mxConstants from "../util/mxConstants"; -import mxCell from "../model/mxCell"; +import mxCell from "../view/cell/mxCell"; import mxLog from "../util/gui/mxLog"; class mxCodec { diff --git a/src/mxgraph/io/mxGenericChangeCodec.js b/src/mxgraph/io/mxGenericChangeCodec.js index e8d98255e..4711c8e63 100644 --- a/src/mxgraph/io/mxGenericChangeCodec.js +++ b/src/mxgraph/io/mxGenericChangeCodec.js @@ -5,12 +5,12 @@ */ import mxObjectCodec from './mxObjectCodec'; -import mxValueChange from '../model/atomic_changes/mxValueChange'; -import mxStyleChange from '../model/atomic_changes/mxStyleChange'; -import mxGeometryChange from '../model/atomic_changes/mxGeometryChange'; -import mxCollapseChange from '../model/atomic_changes/mxCollapseChange'; -import mxVisibleChange from '../model/atomic_changes/mxVisibleChange'; -import mxCellAttributeChange from '../model/atomic_changes/mxCellAttributeChange'; +import mxValueChange from '../atomic_changes/mxValueChange'; +import mxStyleChange from '../atomic_changes/mxStyleChange'; +import mxGeometryChange from '../atomic_changes/mxGeometryChange'; +import mxCollapseChange from '../atomic_changes/mxCollapseChange'; +import mxVisibleChange from '../atomic_changes/mxVisibleChange'; +import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange'; import mxCodecRegistry from './mxCodecRegistry'; import mxUtils from "../util/mxUtils"; diff --git a/src/mxgraph/io/mxModelCodec.js b/src/mxgraph/io/mxModelCodec.js index 0312d5ebe..a8c180716 100644 --- a/src/mxgraph/io/mxModelCodec.js +++ b/src/mxgraph/io/mxModelCodec.js @@ -4,7 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 */ -import mxGraphModel from '../model/mxGraphModel'; +import mxGraphModel from '../view/graph/mxGraphModel'; import mxObjectCodec from './mxObjectCodec'; import mxCodecRegistry from './mxCodecRegistry'; diff --git a/src/mxgraph/io/mxObjectCodec.js b/src/mxgraph/io/mxObjectCodec.js index 16d30d158..816d4730a 100644 --- a/src/mxgraph/io/mxObjectCodec.js +++ b/src/mxgraph/io/mxObjectCodec.js @@ -6,7 +6,7 @@ import mxObjectIdentity from "../util/datatypes/mxObjectIdentity"; import mxLog from "../util/gui/mxLog"; -import mxGeometry from "../model/mxGeometry"; +import mxGeometry from "../util/datatypes/mxGeometry"; import mxPoint from "../util/datatypes/mxPoint"; import mxConstants from "../util/mxConstants"; import mxUtils from "../util/mxUtils"; diff --git a/src/mxgraph/io/mxRootChangeCodec.js b/src/mxgraph/io/mxRootChangeCodec.js index 8b7e5e36e..7e8f74135 100644 --- a/src/mxgraph/io/mxRootChangeCodec.js +++ b/src/mxgraph/io/mxRootChangeCodec.js @@ -4,7 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 */ -import mxRootChange from '../model/atomic_changes/mxRootChange'; +import mxRootChange from '../atomic_changes/mxRootChange'; import mxCodecRegistry from './mxCodecRegistry'; import mxConstants from "../util/mxConstants"; import mxObjectCodec from "./mxObjectCodec"; diff --git a/src/mxgraph/io/mxTerminalChangeCodec.js b/src/mxgraph/io/mxTerminalChangeCodec.js index 3fff8d2e4..9be716c82 100644 --- a/src/mxgraph/io/mxTerminalChangeCodec.js +++ b/src/mxgraph/io/mxTerminalChangeCodec.js @@ -5,7 +5,7 @@ */ import mxObjectCodec from './mxObjectCodec'; -import mxTerminalChange from '../model/atomic_changes/mxTerminalChange'; +import mxTerminalChange from '../atomic_changes/mxTerminalChange'; import mxCodecRegistry from "./mxCodecRegistry"; class mxTerminalChangeCodec extends mxObjectCodec { diff --git a/src/mxgraph/layout/hierarchical/model/mxSwimlaneModel.js b/src/mxgraph/layout/hierarchical/model/mxSwimlaneModel.js index 28b17e242..966138d9a 100644 --- a/src/mxgraph/layout/hierarchical/model/mxSwimlaneModel.js +++ b/src/mxgraph/layout/hierarchical/model/mxSwimlaneModel.js @@ -6,7 +6,7 @@ import mxUtils from '../../../util/mxUtils'; import mxGraphHierarchyNode from './mxGraphHierarchyNode'; import mxGraphHierarchyEdge from './mxGraphHierarchyEdge'; -import mxCellPath from '../../../model/mxCellPath'; +import mxCellPath from '../../../view/cell/mxCellPath'; class mxSwimlaneModel { /** diff --git a/src/mxgraph/layout/hierarchical/stage/mxSwimlaneOrdering.js b/src/mxgraph/layout/hierarchical/stage/mxSwimlaneOrdering.js index a2b2cd3f0..cd1d2457d 100644 --- a/src/mxgraph/layout/hierarchical/stage/mxSwimlaneOrdering.js +++ b/src/mxgraph/layout/hierarchical/stage/mxSwimlaneOrdering.js @@ -5,7 +5,7 @@ */ import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage'; import mxUtils from '../../../util/mxUtils'; -import mxCellPath from '../../../model/mxCellPath'; +import mxCellPath from '../../../view/cell/mxCellPath'; class mxSwimlaneOrdering extends mxHierarchicalLayoutStage { /** diff --git a/src/mxgraph/layout/mxCompactTreeLayout.js b/src/mxgraph/layout/mxCompactTreeLayout.js index 8a9203795..7b8d22f39 100644 --- a/src/mxgraph/layout/mxCompactTreeLayout.js +++ b/src/mxgraph/layout/mxCompactTreeLayout.js @@ -7,7 +7,7 @@ import mxDictionary from '../util/datatypes/mxDictionary'; import mxPoint from '../util/datatypes/mxPoint'; import mxGraphLayout from './mxGraphLayout'; -import mxCellPath from "../model/mxCellPath"; +import mxCellPath from "../view/cell/mxCellPath"; import mxRectangle from "../util/datatypes/mxRectangle"; import mxUtils from "../util/mxUtils"; import WeightedCellSorter from "./WeightedCellSorter"; diff --git a/src/mxgraph/layout/mxGraphLayout.js b/src/mxgraph/layout/mxGraphLayout.js index 5cb612adf..ca879f509 100644 --- a/src/mxgraph/layout/mxGraphLayout.js +++ b/src/mxgraph/layout/mxGraphLayout.js @@ -6,7 +6,7 @@ import mxDictionary from '../util/datatypes/mxDictionary'; import mxRectangle from '../util/datatypes/mxRectangle'; -import mxGeometry from '../model/mxGeometry'; +import mxGeometry from '../util/datatypes/mxGeometry'; import mxPoint from '../util/datatypes/mxPoint'; import mxConstants from '../util/mxConstants'; diff --git a/src/mxgraph/shape/mxShape.js b/src/mxgraph/shape/mxShape.ts similarity index 89% rename from src/mxgraph/shape/mxShape.js rename to src/mxgraph/shape/mxShape.ts index 43b86a7d3..897f706cd 100644 --- a/src/mxgraph/shape/mxShape.js +++ b/src/mxgraph/shape/mxShape.ts @@ -10,6 +10,7 @@ import mxPoint from '../util/datatypes/mxPoint'; import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D'; import mxEvent from '../util/event/mxEvent'; import mxClient from '../mxClient'; +import mxCellState from "../view/cell/mxCellState"; const toBool = i => { if (i === 0) return false; @@ -22,69 +23,92 @@ const toBool = i => { }; class mxShape { + // TODO: Document me!! + fill: string | null; + gradient: string | null; + gradientDirection: string | null; + opacity: number | null; + fillOpacity: number | null; + strokeOpacity: number | null; + stroke: string | null; + strokewidth: number | null; + spacing: number | null; + startSize: number | null; + endSize: number | null; + startArrow: FIXME; + endArrow: FIXME; + rotation: string; + direction: string; + flipH: boolean; + flipV: boolean; + isShadow: boolean; + isDashed: boolean; + isRounded: boolean; + glass: number; + /** * Variable: dialect * * Holds the dialect in which the shape is to be painted. * This can be one of the DIALECT constants in . */ - dialect = null; + dialect: string | null = null; /** * Variable: scale * * Holds the scale in which the shape is being painted. */ - scale = 1; + scale: number = 1; /** * Variable: antiAlias * * Rendering hint for configuring the canvas. */ - antiAlias = true; + antiAlias: boolean = true; /** * Variable: minSvgStrokeWidth * * Minimum stroke width for SVG output. */ - minSvgStrokeWidth = 1; + minSvgStrokeWidth: number = 1; /** * Variable: bounds * * Holds the that specifies the bounds of this shape. */ - bounds = null; + bounds: mxRectangle | null = null; /** * Variable: points * * Holds the array of that specify the points of this shape. */ - points = null; + points: mxPoint[] | null = null; /** * Variable: node * * Holds the outermost DOM node that represents this shape. */ - node = null; + node: HTMLElement | null = null; /** * Variable: state * * Optional reference to the corresponding . */ - state = null; + state: mxCellState | null = null; /** * Variable: style * * Optional reference to the style of the corresponding . */ - style = null; + style: FIXME = null; /** * Variable: boundingBox @@ -92,14 +116,14 @@ class mxShape { * Contains the bounding box of the shape, that is, the smallest rectangle * that includes all pixels of the shape. */ - boundingBox = null; + boundingBox: mxRectangle | null = null; /** * Variable: stencil * * Holds the that defines the shape. */ - stencil = null; + stencil: mxStencil | null = null; /** * Variable: svgStrokeTolerance @@ -107,21 +131,21 @@ class mxShape { * Event-tolerance for SVG strokes (in px). Default is 8. This is only passed * to the canvas in if is true. */ - svgStrokeTolerance = 8; + svgStrokeTolerance: number = 8; /** * Variable: pointerEvents * * Specifies if pointer events should be handled. Default is true. */ - pointerEvents = true; + pointerEvents: boolean = true; /** * Variable: svgPointerEvents * - * Specifies if pointer events should be handled. Default is true. + * Specifies if pointer events should be handled. Default is 'all', meaning they will be. */ - svgPointerEvents = 'all'; + svgPointerEvents: string = 'all'; /** * Variable: shapePointerEvents @@ -129,7 +153,7 @@ class mxShape { * Specifies if pointer events outside of shape should be handled. Default * is false. */ - shapePointerEvents = false; + shapePointerEvents: boolean = false; /** * Variable: stencilPointerEvents @@ -137,7 +161,7 @@ class mxShape { * Specifies if pointer events outside of stencils should be handled. Default * is false. Set this to true for backwards compatibility with the 1.x branch. */ - stencilPointerEvents = false; + stencilPointerEvents: boolean = false; /** * Variable: outline @@ -147,14 +171,14 @@ class mxShape { * not be painted for outlines. Default is false. This should be set before * calling . */ - outline = false; + outline: boolean = false; /** * Variable: visible * * Specifies if the shape is visible. Default is true. */ - visible = true; + visible: boolean = true; /** * Variable: useSvgBoundingBox @@ -162,7 +186,7 @@ class mxShape { * Allows to use the SVG bounding box in SVG. Default is false for performance * reasons. */ - useSvgBoundingBox = true; + useSvgBoundingBox: boolean = true; /** * Class: mxShape @@ -222,7 +246,7 @@ class mxShape { * * Constructs a new shape. */ - constructor(stencil) { + constructor(stencil: mxStencil) { if (stencil !== mxConstants.DO_NOTHING) { this.stencil = stencil; } @@ -238,7 +262,7 @@ class mxShape { * * container - DOM node that will contain the shape. */ - init(container) { + init(container: HTMLElement | null=null) { if (this.node == null) { this.node = this.create(container); @@ -357,13 +381,7 @@ class mxShape { if (this.visible && this.checkBounds()) { this.node.style.visibility = 'visible'; this.clear(); - - if (this.node.nodeName === 'DIV') { - this.redrawHtmlShape(); - } else { - this.redrawShape(); - } - + this.redrawShape(); this.updateBoundingBox(); } else { this.node.style.visibility = 'hidden'; @@ -565,7 +583,6 @@ class mxShape { canvas.setDashed = () => {}; canvas.text = () => {}; } - return canvas; } @@ -598,137 +615,6 @@ class mxShape { return canvas; } - /** - * Function: redrawHtml - * - * Allow optimization by replacing VML with HTML. - */ - redrawHtmlShape() { - // LATER: Refactor methods - this.updateHtmlBounds(this.node); - this.updateHtmlFilters(this.node); - this.updateHtmlColors(this.node); - } - - /** - * Function: updateHtmlFilters - * - * Allow optimization by replacing VML with HTML. - */ - updateHtmlFilters(node) { - let f = ''; - - if (this.opacity < 100) { - f += `alpha(opacity=${this.opacity})`; - } - - if (this.isShadow) { - // FIXME: Cannot implement shadow transparency with filter - f += - `${'progid:DXImageTransform.Microsoft.dropShadow (' + - "OffX='"}${Math.round(mxConstants.SHADOW_OFFSET_X * this.scale)}', ` + - `OffY='${Math.round(mxConstants.SHADOW_OFFSET_Y * this.scale)}', ` + - `Color='${mxConstants.VML_SHADOWCOLOR}')`; - } - - if ( - this.fill != null && - this.fill !== mxConstants.NONE && - this.gradient && - this.gradient !== mxConstants.NONE - ) { - let start = this.fill; - let end = this.gradient; - let type = '0'; - - const lookup = { east: 0, south: 1, west: 2, north: 3 }; - let dir = this.direction != null ? lookup[this.direction] : 0; - - if (this.gradientDirection != null) { - dir = mxUtils.mod(dir + lookup[this.gradientDirection] - 1, 4); - } - - if (dir === 1) { - type = '1'; - const tmp = start; - start = end; - end = tmp; - } else if (dir === 2) { - const tmp = start; - start = end; - end = tmp; - } else if (dir === 3) { - type = '1'; - } - - f += `${'progid:DXImageTransform.Microsoft.gradient(' + - "startColorStr='"}${start}', endColorStr='${end}', gradientType='${type}')`; - } - - node.style.filter = f; - } - - /** - * Function: updateHtmlColors - * - * Allow optimization by replacing VML with HTML. - */ - updateHtmlColors(node) { - let color = this.stroke; - - if (color != null && color !== mxConstants.NONE) { - node.style.borderColor = color; - - if (this.isDashed) { - node.style.borderStyle = 'dashed'; - } else if (this.strokewidth > 0) { - node.style.borderStyle = 'solid'; - } - - node.style.borderWidth = `${Math.max( - 1, - Math.ceil(this.strokewidth * this.scale) - )}px`; - } else { - node.style.borderWidth = '0px'; - } - - color = this.outline ? null : this.fill; - - if (color != null && color !== mxConstants.NONE) { - node.style.backgroundColor = color; - node.style.backgroundImage = 'none'; - } else if (this.pointerEvents) { - node.style.backgroundColor = 'transparent'; - } else if (document.documentMode === 8) { - mxUtils.addTransparentBackgroundFilter(node); - } else { - this.setTransparentBackgroundImage(node); - } - } - - /** - * Function: updateHtmlBounds - * - * Allow optimization by replacing VML with HTML. - */ - updateHtmlBounds(node) { - let sw = - document.documentMode >= 9 ? 0 : Math.ceil(this.strokewidth * this.scale); - node.style.borderWidth = `${Math.max(1, sw)}px`; - node.style.overflow = 'hidden'; - - node.style.left = `${Math.round(this.bounds.x - sw / 2)}px`; - node.style.top = `${Math.round(this.bounds.y - sw / 2)}px`; - - if (document.compatMode === 'CSS1Compat') { - sw = -sw; - } - - node.style.width = `${Math.round(Math.max(0, this.bounds.width + sw))}px`; - node.style.height = `${Math.round(Math.max(0, this.bounds.height + sw))}px`; - } - /** * Function: destroyCanvas * @@ -1373,13 +1259,11 @@ class mxShape { * * cursor - The cursor to be used. */ - setCursor(cursor) { + setCursor(cursor: string | null=null) { if (cursor == null) { cursor = ''; } - this.cursor = cursor; - if (this.node != null) { this.node.style.cursor = cursor; } @@ -1390,7 +1274,7 @@ class mxShape { * * Returns the current cursor. */ - getCursor() { + getCursor(): string { return this.cursor; } @@ -1399,7 +1283,11 @@ class mxShape { * * Hook for subclassers. */ - isRoundable() { + isRoundable(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number): boolean { return false; } @@ -1457,7 +1345,6 @@ class mxShape { */ createBoundingBox() { const bb = this.bounds.clone(); - if ( (this.stencil != null && (this.direction === mxConstants.DIRECTION_NORTH || @@ -1466,7 +1353,6 @@ class mxShape { ) { bb.rotate90(); } - return bb; } diff --git a/src/mxgraph/shape/node/mxCloud.js b/src/mxgraph/shape/node/mxCloud.ts similarity index 88% rename from src/mxgraph/shape/node/mxCloud.js rename to src/mxgraph/shape/node/mxCloud.ts index f76a57448..876abd39f 100644 --- a/src/mxgraph/shape/node/mxCloud.js +++ b/src/mxgraph/shape/node/mxCloud.ts @@ -4,6 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 */ import mxActor from '../mxActor'; +import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D"; class mxCloud extends mxActor { /** @@ -40,7 +41,12 @@ class mxCloud extends mxActor { * * Draws the path for this shape. */ - redrawPath(c, x, y, w, h) { + redrawPath(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { + c.moveTo(0.25 * w, 0.25 * h); c.curveTo(0.05 * w, 0.25 * h, 0, 0.5 * h, 0.16 * w, 0.55 * h); c.curveTo(0, 0.66 * h, 0.18 * w, 0.9 * h, 0.31 * w, 0.8 * h); diff --git a/src/mxgraph/shape/node/mxCylinder.js b/src/mxgraph/shape/node/mxCylinder.ts similarity index 87% rename from src/mxgraph/shape/node/mxCylinder.js rename to src/mxgraph/shape/node/mxCylinder.ts index e7a66aa26..a5730e6f3 100644 --- a/src/mxgraph/shape/node/mxCylinder.js +++ b/src/mxgraph/shape/node/mxCylinder.ts @@ -6,6 +6,7 @@ import mxShape from '../mxShape'; import mxConstants from '../../util/mxConstants'; import mxUtils from '../../util/mxUtils'; +import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D"; class mxCylinder extends mxShape { /** @@ -58,7 +59,11 @@ class mxCylinder extends mxShape { * * Redirects to redrawPath for subclasses to work. */ - paintVertexShape(c, x, y, w, h) { + paintVertexShape(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { c.translate(x, y); c.begin(); this.redrawPath(c, x, y, w, h, false); @@ -90,7 +95,12 @@ class mxCylinder extends mxShape { * * Draws the path for this shape. */ - redrawPath(c, x, y, w, h, isForeground) { + redrawPath(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number, + isForeground: boolean=false) { const dy = this.getCylinderSize(x, y, w, h); if ( diff --git a/src/mxgraph/shape/node/mxDoubleEllipse.js b/src/mxgraph/shape/node/mxDoubleEllipse.ts similarity index 88% rename from src/mxgraph/shape/node/mxDoubleEllipse.js rename to src/mxgraph/shape/node/mxDoubleEllipse.ts index 559153ece..d577242e6 100644 --- a/src/mxgraph/shape/node/mxDoubleEllipse.js +++ b/src/mxgraph/shape/node/mxDoubleEllipse.ts @@ -8,6 +8,7 @@ import mxRectangle from '../../util/datatypes/mxRectangle'; import mxShape from '../mxShape'; import mxConstants from '../../util/mxConstants'; import mxUtils from '../../util/mxUtils'; +import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D"; class mxDoubleEllipse extends mxShape { /** @@ -64,7 +65,12 @@ class mxDoubleEllipse extends mxShape { * * Paints the background. */ - paintBackground(c, x, y, w, h) { + paintBackground(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { + c.ellipse(x, y, w, h); c.fillAndStroke(); } @@ -74,7 +80,12 @@ class mxDoubleEllipse extends mxShape { * * Paints the foreground. */ - paintForeground(c, x, y, w, h) { + paintForeground(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { + if (!this.outline) { const margin = mxUtils.getValue( this.style, diff --git a/src/mxgraph/shape/node/mxEllipse.js b/src/mxgraph/shape/node/mxEllipse.ts similarity index 83% rename from src/mxgraph/shape/node/mxEllipse.js rename to src/mxgraph/shape/node/mxEllipse.ts index 9a8be1089..2286c8b62 100644 --- a/src/mxgraph/shape/node/mxEllipse.js +++ b/src/mxgraph/shape/node/mxEllipse.ts @@ -4,6 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 */ import mxShape from '../mxShape'; +import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D"; class mxEllipse extends mxShape { /** @@ -39,7 +40,11 @@ class mxEllipse extends mxShape { * * Paints the ellipse shape. */ - paintVertexShape(c, x, y, w, h) { + paintVertexShape(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { c.ellipse(x, y, w, h); c.fillAndStroke(); } diff --git a/src/mxgraph/shape/node/mxHexagon.js b/src/mxgraph/shape/node/mxHexagon.ts similarity index 84% rename from src/mxgraph/shape/node/mxHexagon.js rename to src/mxgraph/shape/node/mxHexagon.ts index 1d8a30fca..f9d929d05 100644 --- a/src/mxgraph/shape/node/mxHexagon.js +++ b/src/mxgraph/shape/node/mxHexagon.ts @@ -7,6 +7,7 @@ import mxActor from '../mxActor'; import mxPoint from '../../util/datatypes/mxPoint'; import mxUtils from '../../util/mxUtils'; import mxConstants from '../../util/mxConstants'; +import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D"; class mxHexagon extends mxActor { /** @@ -27,7 +28,12 @@ class mxHexagon extends mxActor { * * Draws the path for this shape. */ - redrawPath(c, x, y, w, h) { + redrawPath(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { + const arcSize = mxUtils.getValue( this.style, diff --git a/src/mxgraph/shape/node/mxImageShape.js b/src/mxgraph/shape/node/mxImageShape.ts similarity index 90% rename from src/mxgraph/shape/node/mxImageShape.js rename to src/mxgraph/shape/node/mxImageShape.ts index c2bf34f9e..e9080708c 100644 --- a/src/mxgraph/shape/node/mxImageShape.js +++ b/src/mxgraph/shape/node/mxImageShape.ts @@ -7,8 +7,14 @@ import mxUtils from '../../util/mxUtils'; import mxConstants from '../../util/mxConstants'; import mxRectangleShape from './mxRectangleShape'; +import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D"; +import mxRectangle from '../../util/datatypes/mxRectangle'; class mxImageShape extends mxRectangleShape { + // TODO: Document me!! + shadow: boolean; + image: string; + /** * Variable: preserveImageAspect * @@ -37,7 +43,12 @@ class mxImageShape extends mxRectangleShape { * strokewidth - Optional integer that defines the stroke width. Default is * 0. This is stored in . */ - constructor(bounds, image, fill, stroke, strokewidth) { + constructor(bounds: mxRectangle, + image: string, + fill: string, + stroke: string, + strokewidth: number=0) { + super(); this.bounds = bounds; this.image = image; @@ -112,7 +123,6 @@ class mxImageShape extends mxRectangleShape { createHtml() { const node = document.createElement('div'); node.style.position = 'absolute'; - return node; } @@ -121,7 +131,11 @@ class mxImageShape extends mxRectangleShape { * * Disables inherited roundable support. */ - isRoundable(c, x, y, w, h) { + isRoundable(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { return false; } @@ -130,7 +144,11 @@ class mxImageShape extends mxRectangleShape { * * Generic background painting implementation. */ - paintVertexShape(c, x, y, w, h) { + paintVertexShape(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { if (this.image != null) { const fill = mxUtils.getValue( this.style, diff --git a/src/mxgraph/shape/node/mxRectangleShape.js b/src/mxgraph/shape/node/mxRectangleShape.ts similarity index 81% rename from src/mxgraph/shape/node/mxRectangleShape.js rename to src/mxgraph/shape/node/mxRectangleShape.ts index 2a3492563..96646095f 100644 --- a/src/mxgraph/shape/node/mxRectangleShape.js +++ b/src/mxgraph/shape/node/mxRectangleShape.ts @@ -7,6 +7,8 @@ import mxConstants from '../../util/mxConstants'; import mxUtils from '../../util/mxUtils'; import mxShape from '../mxShape'; +import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D"; +import mxRectangle from '../../util/datatypes/mxRectangle'; class mxRectangleShape extends mxShape { /** @@ -29,7 +31,10 @@ class mxRectangleShape extends mxShape { * strokewidth - Optional integer that defines the stroke width. Default is * 1. This is stored in . */ - constructor(bounds, fill, stroke, strokewidth) { + constructor(bounds: mxRectangle, + fill: string, + stroke: string, + strokewidth: number) { super(); this.bounds = bounds; this.fill = fill; @@ -42,7 +47,7 @@ class mxRectangleShape extends mxShape { * * Returns true for non-rounded, non-rotated shapes with no glass gradient. */ - isHtmlAllowed() { + isHtmlAllowed(): boolean { let events = true; if (this.style != null) { @@ -64,7 +69,11 @@ class mxRectangleShape extends mxShape { * * Generic background painting implementation. */ - paintBackground(c, x, y, w, h) { + paintBackground(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number): void { let events = true; if (this.style != null) { @@ -124,7 +133,11 @@ class mxRectangleShape extends mxShape { * * Adds roundable support. */ - isRoundable(c, x, y, w, h) { + isRoundable(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number): boolean { return true; } @@ -133,7 +146,11 @@ class mxRectangleShape extends mxShape { * * Generic background painting implementation. */ - paintForeground(c, x, y, w, h) { + paintForeground(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number): void { if ( this.glass && !this.outline && diff --git a/src/mxgraph/shape/node/mxRhombus.js b/src/mxgraph/shape/node/mxRhombus.ts similarity index 78% rename from src/mxgraph/shape/node/mxRhombus.js rename to src/mxgraph/shape/node/mxRhombus.ts index 16e641822..b60a25968 100644 --- a/src/mxgraph/shape/node/mxRhombus.js +++ b/src/mxgraph/shape/node/mxRhombus.ts @@ -7,6 +7,8 @@ import mxShape from '../mxShape'; import mxPoint from '../../util/datatypes/mxPoint'; import mxUtils from "../../util/mxUtils"; import mxConstants from "../../util/mxConstants"; +import mxRectangle from "../../util/datatypes/mxRectangle"; +import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D"; class mxRhombus extends mxShape { /** @@ -29,12 +31,15 @@ class mxRhombus extends mxShape { * strokewidth - Optional integer that defines the stroke width. Default is * 1. This is stored in . */ - constructor(bounds, fill, stroke, strokewidth) { + constructor(bounds: mxRectangle, + fill: string, + stroke: string, + strokewidth: number=1) { super(); this.bounds = bounds; this.fill = fill; this.stroke = stroke; - this.strokewidth = strokewidth != null ? strokewidth : 1; + this.strokewidth = strokewidth; } /** @@ -42,7 +47,7 @@ class mxRhombus extends mxShape { * * Adds roundable support. */ - isRoundable() { + isRoundable(): boolean { return true; } @@ -51,7 +56,12 @@ class mxRhombus extends mxShape { * * Generic painting implementation. */ - paintVertexShape(c, x, y, w, h) { + paintVertexShape(c: mxAbstractCanvas2D, + x: number, + y: number, + w: number, + h: number) { + const hw = w / 2; const hh = h / 2; diff --git a/src/mxgraph/shape/mxStencil.js b/src/mxgraph/shape/node/mxStencil.js similarity index 98% rename from src/mxgraph/shape/mxStencil.js rename to src/mxgraph/shape/node/mxStencil.js index 049fc99e8..88e55d9ef 100644 --- a/src/mxgraph/shape/mxStencil.js +++ b/src/mxgraph/shape/node/mxStencil.js @@ -4,12 +4,12 @@ * Updated to ES9 syntax by David Morrissey 2021 */ -import mxConnectionConstraint from '../view/connection/mxConnectionConstraint'; -import mxRectangle from '../util/datatypes/mxRectangle'; -import mxShape from './mxShape'; -import mxResources from "../util/mxResources"; -import mxUtils from "../util/mxUtils"; -import mxConstants from "../util/mxConstants"; +import mxConnectionConstraint from '../../view/connection/mxConnectionConstraint'; +import mxRectangle from '../../util/datatypes/mxRectangle'; +import mxShape from '../mxShape'; +import mxResources from "../../util/mxResources"; +import mxUtils from "../../util/mxUtils"; +import mxConstants from "../../util/mxConstants"; import mxStencilRegistry from "./mxStencilRegistry"; class mxStencil extends mxShape { diff --git a/src/mxgraph/shape/mxStencilRegistry.js b/src/mxgraph/shape/node/mxStencilRegistry.js similarity index 100% rename from src/mxgraph/shape/mxStencilRegistry.js rename to src/mxgraph/shape/node/mxStencilRegistry.js diff --git a/src/mxgraph/model/mxGeometry.js b/src/mxgraph/util/datatypes/mxGeometry.js similarity index 98% rename from src/mxgraph/model/mxGeometry.js rename to src/mxgraph/util/datatypes/mxGeometry.js index 7106849a9..0dc894697 100644 --- a/src/mxgraph/model/mxGeometry.js +++ b/src/mxgraph/util/datatypes/mxGeometry.js @@ -4,9 +4,9 @@ * Updated to ES9 syntax by David Morrissey 2021 */ -import mxPoint from '../util/datatypes/mxPoint'; -import mxRectangle from '../util/datatypes/mxRectangle'; -import mxUtils from '../util/mxUtils'; +import mxPoint from './mxPoint'; +import mxRectangle from './mxRectangle'; +import mxUtils from '../mxUtils'; class mxGeometry extends mxRectangle { /** diff --git a/src/mxgraph/util/mxUtils.js b/src/mxgraph/util/mxUtils.js index ba456b0de..acf911db4 100644 --- a/src/mxgraph/util/mxUtils.js +++ b/src/mxgraph/util/mxUtils.js @@ -10,7 +10,7 @@ import mxConstants from './mxConstants'; import mxObjectIdentity from './datatypes/mxObjectIdentity'; import mxPoint from './datatypes/mxPoint'; import mxDictionary from './datatypes/mxDictionary'; -import mxCellPath from '../model/mxCellPath'; +import mxCellPath from '../view/cell/mxCellPath'; import mxRectangle from './datatypes/mxRectangle'; import mxTemporaryCellStates from '../view/cell/mxTemporaryCellStates'; import mxCodec from '../io/mxCodec'; diff --git a/src/mxgraph/model/mxCell.js b/src/mxgraph/view/cell/mxCell.ts similarity index 89% rename from src/mxgraph/model/mxCell.js rename to src/mxgraph/view/cell/mxCell.ts index 8ef7d3b82..7b8139301 100644 --- a/src/mxgraph/model/mxCell.js +++ b/src/mxgraph/view/cell/mxCell.ts @@ -4,34 +4,40 @@ * Updated to ES9 syntax by David Morrissey 2021 */ -import mxUtils from '../util/mxUtils'; -import mxConstants from '../util/mxConstants'; +import mxUtils from '../../util/mxUtils'; +import mxConstants from '../../util/mxConstants'; +import mxGeometry from "../../util/datatypes/mxGeometry"; +import mxCellOverlay from "./mxCellOverlay"; class mxCell { // TODO: Document me! // used by invalidate() of mxGraphView invalidating: boolean = false; + onInit: Function | null = null; + + // used by addCellOverlay() of mxGraph + overlays: mxCellOverlay[] | null = null; /** * Variable: id * * Holds the Id. Default is null. */ - id = null; + id: number | null = null; /** * Variable: value * * Holds the user object. Default is null. */ - value = null; + value: any = null; /** * Variable: geometry * * Holds the . Default is null. */ - geometry = null; + geometry: mxGeometry | null = null; /** * Variable: style @@ -39,77 +45,77 @@ class mxCell { * Holds the style as a string of the form [(stylename|key=value);]. Default is * null. */ - style = null; + style: string | null = null; /** * Variable: vertex * * Specifies whether the cell is a vertex. Default is false. */ - vertex = false; + vertex: boolean = false; /** * Variable: edge * * Specifies whether the cell is an edge. Default is false. */ - edge = false; + edge: boolean = false; /** * Variable: connectable * * Specifies whether the cell is connectable. Default is true. */ - connectable = true; + connectable: boolean = true; /** * Variable: visible * * Specifies whether the cell is visible. Default is true. */ - visible = true; + visible: boolean = true; /** * Variable: collapsed * * Specifies whether the cell is collapsed. Default is false. */ - collapsed = false; + collapsed: boolean = false; /** * Variable: parent * * Reference to the parent cell. */ - parent = null; + parent: mxCell | null = null; /** * Variable: source * * Reference to the source terminal. */ - source = null; + source: mxCell | null = null; /** * Variable: target * * Reference to the target terminal. */ - target = null; + target: mxCell | null = null; /** * Variable: children * * Holds the child cells. */ - children = null; + children: mxCell[] | null = null; /** * Variable: edges * * Holds the edges. */ - edges = null; + edges: mxCell[] | null = null; /** * Variable: mxTransient @@ -120,7 +126,7 @@ class mxCell { * to mark transient fields since transient modifiers are not supported by * the language. */ - mxTransient = [ + mxTransient: string[] = [ 'id', 'value', 'parent', @@ -192,7 +198,12 @@ class mxCell { * geometry - Optional that specifies the geometry. * style - Optional formatted string that defines the style. */ - constructor(value, geometry, style) { + //onInit: Function | null; + + constructor(value: any=null, + geometry: mxGeometry=null, + style: string=null) { + this.value = value; this.setGeometry(geometry); this.setStyle(style); @@ -207,7 +218,7 @@ class mxCell { * * Returns the Id of the cell as a string. */ - getId() { + getId(): number { return this.id; } @@ -216,7 +227,7 @@ class mxCell { * * Sets the Id of the cell to the given string. */ - setId(id) { + setId(id: number): void { this.id = id; } @@ -226,7 +237,7 @@ class mxCell { * Returns the user object of the cell. The user * object is stored in . */ - getValue() { + getValue(): any { return this.value; } @@ -236,7 +247,7 @@ class mxCell { * Sets the user object of the cell. The user object * is stored in . */ - setValue(value) { + setValue(value: number): void { this.value = value; } @@ -248,10 +259,9 @@ class mxCell { * replaces the user object with the given value and * returns the old user object. */ - valueChanged(newValue) { + valueChanged(newValue: any): any { const previous = this.getValue(); this.setValue(newValue); - return previous; } @@ -260,7 +270,7 @@ class mxCell { * * Returns the that describes the . */ - getGeometry() { + getGeometry(): mxGeometry | null { return this.geometry; } @@ -269,7 +279,7 @@ class mxCell { * * Sets the to be used as the . */ - setGeometry(geometry) { + setGeometry(geometry: mxGeometry): void { this.geometry = geometry; } @@ -278,7 +288,7 @@ class mxCell { * * Returns a string that describes the