diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index ffb9f7eb0..4bde2df2c 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -72,7 +72,7 @@ export { default as CircleLayout } from './view/layout/layout/CircleLayout'; export { default as CompactTreeLayout } from './view/layout/layout/CompactTreeLayout'; export { default as CompositeLayout } from './view/layout/layout/CompositeLayout'; export { default as EdgeLabelLayout } from './view/layout/layout/EdgeLabelLayout'; -export { default as MxFastOrganicLayout } from './view/layout/layout/FastOrganicLayout'; +export { default as FastOrganicLayout } from './view/layout/layout/FastOrganicLayout'; export { default as GraphLayout } from './view/layout/layout/GraphLayout'; export { default as ParallelEdgeLayout } from './view/layout/layout/ParallelEdgeLayout'; export { default as PartitionLayout } from './view/layout/layout/PartitionLayout'; @@ -113,7 +113,7 @@ export { default as mxStylesheetCodec } from './util/serialization/mxStylesheetC export { default as mxTerminalChangeCodec } from './util/serialization/mxTerminalChangeCodec'; export { default as Actor } from './view/geometry/shape/Actor'; -export { default as Label } from './view/geometry/shape/node/LabelShape'; +export { default as LabelShape } from './view/geometry/shape/node/LabelShape'; export { default as Shape } from './view/geometry/shape/Shape'; export { default as SwimlaneShape } from './view/geometry/shape/node/SwimlaneShape'; export { default as TextShape } from './view/geometry/shape/node/TextShape'; diff --git a/packages/core/src/util/serialization/mxGraphCodec.js b/packages/core/src/util/serialization/mxGraphCodec.js index 6b706c645..758fa17a3 100644 --- a/packages/core/src/util/serialization/mxGraphCodec.js +++ b/packages/core/src/util/serialization/mxGraphCodec.js @@ -5,7 +5,7 @@ * Type definitions from the typed-mxgraph project */ -import graph from '../../view/Graph'; +import { Graph } from '../../view/Graph'; import mxCodecRegistry from './mxCodecRegistry'; import mxObjectCodec from './mxObjectCodec'; @@ -28,7 +28,7 @@ import mxObjectCodec from './mxObjectCodec'; */ class mxGraphCodec extends mxObjectCodec { constructor() { - super(new graph(), [ + super(new Graph(), [ 'graphListeners', 'eventListeners', 'view', diff --git a/packages/core/src/view/geometry/shape/Shape.ts b/packages/core/src/view/geometry/shape/Shape.ts index d7d89043f..4500f31fd 100644 --- a/packages/core/src/view/geometry/shape/Shape.ts +++ b/packages/core/src/view/geometry/shape/Shape.ts @@ -1205,7 +1205,7 @@ class Shape { * Returns the rotation from the style. */ getRotation() { - return this.rotation; + return this.rotation ?? 0; } /** @@ -1230,7 +1230,7 @@ class Shape { */ getShapeRotation() { let rot = this.getRotation(); - console.log('rot', rot, this, this.rotation); + if (this.direction === DIRECTION_NORTH) { rot += 270; } else if (this.direction === DIRECTION_WEST) { diff --git a/packages/html/stories/Anchors.stories.js b/packages/html/stories/Anchors.stories.js index d6f895218..9831d3193 100644 --- a/packages/html/stories/Anchors.stories.js +++ b/packages/html/stories/Anchors.stories.js @@ -1,7 +1,7 @@ import { Graph, InternalEvent, - Rubberband, + RubberBand, ConnectionHandler, ConnectionConstraint, Geometry, @@ -91,7 +91,7 @@ const Template = ({ label, ...args }) => { graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle'; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/AutoLayout.stories.js b/packages/html/stories/AutoLayout.stories.js index 0f62823da..caa940e17 100644 --- a/packages/html/stories/AutoLayout.stories.js +++ b/packages/html/stories/AutoLayout.stories.js @@ -1,6 +1,6 @@ import { Graph, - Rubberband, + RubberBand, InternalEvent, CellRenderer, EdgeHandler, @@ -88,7 +88,7 @@ const Template = ({ label, ...args }) => { graph.view.setTranslate(20, 20); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Boundary.stories.js b/packages/html/stories/Boundary.stories.js index c01716079..71f6f10e7 100644 --- a/packages/html/stories/Boundary.stories.js +++ b/packages/html/stories/Boundary.stories.js @@ -1,7 +1,7 @@ import { Graph, InternalEvent, - Rubberband, + RubberBand, Point, GraphHandler, utils, @@ -172,7 +172,7 @@ const Template = ({ label, ...args }) => { }; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Clipboard.stories.js b/packages/html/stories/Clipboard.stories.js index 84bb20f50..a7c8cfdd7 100644 --- a/packages/html/stories/Clipboard.stories.js +++ b/packages/html/stories/Clipboard.stories.js @@ -1,14 +1,14 @@ import { Graph, InternalEvent, - Rubberband, - mxClipboard, + RubberBand, + Clipboard, utils, EventUtils, mxClient, mxCodec, Model, - mxStringUtils, + StringUtils, } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => { const graph = new Graph(container); // Public helper method for shared clipboard. - mxClipboard.cellsToString = function (cells) { + Clipboard.cellsToString = function (cells) { const codec = new mxCodec(); const model = new Model(); const parent = model.getRoot().getChildAt(0); @@ -142,7 +142,7 @@ const Template = ({ label, ...args }) => { } } - textInput.value = mxClipboard.cellsToString(clones); + textInput.value = Clipboard.cellsToString(clones); } textInput.select(); @@ -228,7 +228,7 @@ const Template = ({ label, ...args }) => { // Parses and inserts XML into graph const pasteText = function (text) { - const xml = mxStringUtils.trim(text); + const xml = StringUtils.trim(text); const x = graph.container.scrollLeft / graph.view.scale - graph.view.translate.x; const y = graph.container.scrollTop / graph.view.scale - graph.view.translate.y; @@ -294,7 +294,7 @@ const Template = ({ label, ...args }) => { }); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Constituent.stories.js b/packages/html/stories/Constituent.stories.js index 88ab9867a..dd621ada1 100644 --- a/packages/html/stories/Constituent.stories.js +++ b/packages/html/stories/Constituent.stories.js @@ -1,4 +1,4 @@ -import { Graph, InternalEvent, GraphHandler, Rubberband } from '@maxgraph/core'; +import { Graph, InternalEvent, GraphHandler, RubberBand } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -69,7 +69,7 @@ const Template = ({ label, ...args }) => { const graph = new MyCustomGraph(container); // Enables rubberband selection - new Rubberband(graph); + new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/ContextIcons.stories.js b/packages/html/stories/ContextIcons.stories.js index f64053cb0..c346bbcc8 100644 --- a/packages/html/stories/ContextIcons.stories.js +++ b/packages/html/stories/ContextIcons.stories.js @@ -1,7 +1,7 @@ import { Graph, InternalEvent, - Rubberband, + RubberBand, EventUtils, utils, VertexHandler, @@ -168,7 +168,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Control.stories.js b/packages/html/stories/Control.stories.js index 93bb998d7..bd1830dbc 100644 --- a/packages/html/stories/Control.stories.js +++ b/packages/html/stories/Control.stories.js @@ -1,7 +1,7 @@ import { Graph, InternalEvent, - Rubberband, + RubberBand, mxDomHelpers, ImageShape, Rectangle, @@ -128,7 +128,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/DragSource.stories.js b/packages/html/stories/DragSource.stories.js index 0d11c5c6c..f9fd0cc85 100644 --- a/packages/html/stories/DragSource.stories.js +++ b/packages/html/stories/DragSource.stories.js @@ -1,7 +1,7 @@ import { Graph, - mxDomUtils, - Rubberband, + DomUtils, + RubberBand, DragSource, utils, GestureUtils, @@ -87,7 +87,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). @@ -124,7 +124,7 @@ const Template = ({ label, ...args }) => { const elt = document.elementFromPoint(x, y); for (const graph of graphs) { - if (mxDomUtils.isAncestorNode(graph.container, elt)) { + if (DomUtils.isAncestorNode(graph.container, elt)) { return graph; } } diff --git a/packages/html/stories/Drop.stories.js b/packages/html/stories/Drop.stories.js index 05c22ff03..46bd31451 100644 --- a/packages/html/stories/Drop.stories.js +++ b/packages/html/stories/Drop.stories.js @@ -1,6 +1,6 @@ import { Graph, - Rubberband, + RubberBand, utils, EventUtils, InternalEvent, @@ -53,7 +53,7 @@ const Template = ({ label, ...args }) => { const graph = new Graph(container); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); InternalEvent.addListener(container, 'dragover', function (evt) { if (graph.isEnabled()) { diff --git a/packages/html/stories/DynamicLoading.stories.js b/packages/html/stories/DynamicLoading.stories.js index 13abe403e..e2e7ad179 100644 --- a/packages/html/stories/DynamicLoading.stories.js +++ b/packages/html/stories/DynamicLoading.stories.js @@ -1,13 +1,13 @@ import { Graph, - Text, + TextShape, mxEffects, InternalEvent, Constants, Perimeter, mxCodec, utils, - mxXmlUtils, + XmlUtils, } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -31,7 +31,7 @@ const Template = ({ label, ...args }) => { let requestId = 0; // Speedup the animation - Text.prototype.enableBoundingBox = false; + TextShape.prototype.enableBoundingBox = false; // Creates the graph inside the given container const graph = new Graph(container); @@ -85,7 +85,7 @@ const Template = ({ label, ...args }) => { graph.getModel().beginUpdate(); try { const xml = server(cell.id); - const doc = mxXmlUtils.parseXml(xml); + const doc = XmlUtils.parseXml(xml); const dec = new mxCodec(doc); const model = dec.decode(doc.documentElement); diff --git a/packages/html/stories/DynamicStyle.stories.js b/packages/html/stories/DynamicStyle.stories.js index 68f0c25bc..d33c53b35 100644 --- a/packages/html/stories/DynamicStyle.stories.js +++ b/packages/html/stories/DynamicStyle.stories.js @@ -1,4 +1,4 @@ -import { Graph, utils, Constants, Rubberband } from '@maxgraph/core'; +import { Graph, utils, Constants, RubberBand } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -29,7 +29,7 @@ const Template = ({ label, ...args }) => { graph.edgeLabelsMovable = false; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Needs to set a flag to check for dynamic style changes, // that is, changes to styles on cells where the style was diff --git a/packages/html/stories/DynamicToolbar.stories.js b/packages/html/stories/DynamicToolbar.stories.js index 9efde2b47..98038dc18 100644 --- a/packages/html/stories/DynamicToolbar.stories.js +++ b/packages/html/stories/DynamicToolbar.stories.js @@ -1,6 +1,6 @@ import { Graph, - Rubberband, + RubberBand, ConnectionHandler, ImageBox, mxToolbar, @@ -74,7 +74,7 @@ const Template = ({ label, ...args }) => { // Stops editing on enter or escape keypress const keyHandler = new mxKeyHandler(graph); - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); addVertex('/images/rectangle.gif', 100, 40, ''); addVertex('/images/rounded.gif', 100, 40, 'shape=rounded'); diff --git a/packages/html/stories/Editing.stories.js b/packages/html/stories/Editing.stories.js index 18d4ea0d2..f6b6a59cb 100644 --- a/packages/html/stories/Editing.stories.js +++ b/packages/html/stories/Editing.stories.js @@ -2,7 +2,7 @@ import { Graph, mxKeyHandler, utils, - mxDomUtils, + DomUtils, CloneUtils, EventUtils, } from '@maxgraph/core'; @@ -48,14 +48,14 @@ const Template = ({ label, ...args }) => { td1.style.textAlign = 'center'; td1.style.fontSize = '12px'; td1.style.color = '#774400'; - mxDomUtils.write(td1, cell.value.first); + DomUtils.write(td1, cell.value.first); const tr2 = document.createElement('tr'); const td2 = document.createElement('td'); td2.style.textAlign = 'center'; td2.style.fontSize = '12px'; td2.style.color = '#774400'; - mxDomUtils.write(td2, cell.value.second); + DomUtils.write(td2, cell.value.second); tr1.appendChild(td1); tr2.appendChild(td2); diff --git a/packages/html/stories/Events.stories.js b/packages/html/stories/Events.stories.js index 0d927dca3..03099f7bf 100644 --- a/packages/html/stories/Events.stories.js +++ b/packages/html/stories/Events.stories.js @@ -1,10 +1,10 @@ import { Graph, InternalEvent, - Rubberband, + RubberBand, ConnectionHandler, LayoutManager, - mxParallelEdgeLayout, + ParallelEdgeLayout, ImageBox, mxKeyHandler, Constants, @@ -62,7 +62,7 @@ const Template = ({ label, ...args }) => { // Optionally you can enable panning, tooltips and connections // using graph.setPanning(), setTooltips() & setConnectable(). // To enable rubberband selection and basic keyboard events, - // use new Rubberband(graph) and new mxKeyHandler(graph). + // use new RubberBand(graph) and new mxKeyHandler(graph). const graph = new MyCustomGraph(container); // Enables tooltips, new connections and panning @@ -71,7 +71,7 @@ const Template = ({ label, ...args }) => { graph.setConnectable(true); // Automatically handle parallel edges - const layout = new mxParallelEdgeLayout(graph); + const layout = new ParallelEdgeLayout(graph); const layoutMgr = new LayoutManager(graph); layoutMgr.getLayout = function (cell) { @@ -82,7 +82,7 @@ const Template = ({ label, ...args }) => { // Enables rubberband (marquee) selection and a handler // for basic keystrokes (eg. return, escape during editing). - const rubberband = new Rubberband(graph); + const rubberband = new RubberBand(graph); const keyHandler = new mxKeyHandler(graph); // Changes the default style for edges "in-place" and assigns diff --git a/packages/html/stories/ExtendCanvas.stories.js b/packages/html/stories/ExtendCanvas.stories.js index d1a28f64e..8a68023ad 100644 --- a/packages/html/stories/ExtendCanvas.stories.js +++ b/packages/html/stories/ExtendCanvas.stories.js @@ -1,7 +1,7 @@ import { Graph, InternalEvent, - Rubberband, + RubberBand, Rectangle, Point, utils, @@ -195,7 +195,7 @@ const Template = ({ label, ...args }) => { }; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/FixedIcons.stories.js b/packages/html/stories/FixedIcons.stories.js index e4ee2cc71..e83801ba2 100644 --- a/packages/html/stories/FixedIcons.stories.js +++ b/packages/html/stories/FixedIcons.stories.js @@ -1,4 +1,11 @@ -import { Graph, Rubberband, Rectangle, Constants, utils, mxLabel } from '@maxgraph/core'; +import { + Graph, + RubberBand, + Rectangle, + Constants, + utils, + LabelShape, +} from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -23,7 +30,7 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Overrides the image bounds code to change the position - mxLabel.prototype.getImageBounds = function (x, y, w, h) { + LabelShape.prototype.getImageBounds = function (x, y, w, h) { const iw = utils.getValue(this.style, 'imageWidth', Constants.DEFAULT_IMAGESIZE); const ih = utils.getValue(this.style, 'imageHeight', Constants.DEFAULT_IMAGESIZE); @@ -45,7 +52,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/FixedPoints.stories.js b/packages/html/stories/FixedPoints.stories.js index b720f34e3..0b88a1d3b 100644 --- a/packages/html/stories/FixedPoints.stories.js +++ b/packages/html/stories/FixedPoints.stories.js @@ -1,6 +1,6 @@ import { Graph, - Rubberband, + RubberBand, ConnectionHandler, ConnectionConstraint, ConstraintHandler, @@ -142,7 +142,7 @@ const Template = ({ label, ...args }) => { graph.setConnectable(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Grid.stories.js b/packages/html/stories/Grid.stories.js index 7c79e774a..3221cc7c1 100644 --- a/packages/html/stories/Grid.stories.js +++ b/packages/html/stories/Grid.stories.js @@ -1,7 +1,7 @@ import { Graph, InternalEvent, - Rubberband, + RubberBand, mxLog, GraphView, Point, @@ -45,7 +45,7 @@ const Template = ({ label, ...args }) => { graph.setPanning(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); let repaintGrid; diff --git a/packages/html/stories/Groups.stories.js b/packages/html/stories/Groups.stories.js index d79e10012..8bd5800f4 100644 --- a/packages/html/stories/Groups.stories.js +++ b/packages/html/stories/Groups.stories.js @@ -1,4 +1,4 @@ -import { Graph, Rubberband, GraphHandler, mxPopupMenuHandler } from '@maxgraph/core'; +import { Graph, RubberBand, GraphHandler, PopupMenuHandler } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -106,7 +106,7 @@ const Template = ({ label, ...args }) => { }; // Returns last selected ancestor - mxPopupMenuHandler.prototype.getCellForPopupEvent = function (me) { + PopupMenuHandler.prototype.getCellForPopupEvent = function (me) { let cell = me.getCell(); const model = this.graph.getModel(); let parent = cell.getParent(); @@ -133,7 +133,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Guides.stories.js b/packages/html/stories/Guides.stories.js index bc11be398..026b57160 100644 --- a/packages/html/stories/Guides.stories.js +++ b/packages/html/stories/Guides.stories.js @@ -5,7 +5,7 @@ import { Constants, EdgeHandler, EdgeStyle, - Rubberband, + RubberBand, } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -63,7 +63,7 @@ const Template = ({ label, ...args }) => { graph.alternateEdgeStyle = 'elbow=vertical'; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Handles.stories.js b/packages/html/stories/Handles.stories.js index bd66765dd..def72de26 100644 --- a/packages/html/stories/Handles.stories.js +++ b/packages/html/stories/Handles.stories.js @@ -7,7 +7,7 @@ import { Rectangle, VertexHandler, InternalEvent, - Rubberband, + RubberBand, utils, VertexHandle, } from '@maxgraph/core'; @@ -205,7 +205,7 @@ const Template = ({ label, ...args }) => { graph.centerZoom = false; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/HelloPort.stories.js b/packages/html/stories/HelloPort.stories.js index 92522a334..cb3e64d13 100644 --- a/packages/html/stories/HelloPort.stories.js +++ b/packages/html/stories/HelloPort.stories.js @@ -1,6 +1,6 @@ import { Graph, - Rubberband, + RubberBand, EdgeStyle, Point, Constants, @@ -72,7 +72,7 @@ const Template = ({ label, ...args }) => { }; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/HelloWorld.stories.js b/packages/html/stories/HelloWorld.stories.js index 05ad8f655..e8ed58c28 100644 --- a/packages/html/stories/HelloWorld.stories.js +++ b/packages/html/stories/HelloWorld.stories.js @@ -25,11 +25,11 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - if (!args.contextMenu) InternalEvent.disableContextMenu(container); + // if (!args.contextMenu) InternalEvent.disableContextMenu(container); const graph = new Graph(container); - // if (args.rubberBand) new Rubberband(graph); + // if (args.rubberBand) new RubberBand(graph); const parent = graph.getDefaultParent(); diff --git a/packages/html/stories/HierarchicalLayout.stories.js b/packages/html/stories/HierarchicalLayout.stories.js index 0e45518f1..0d97bec1a 100644 --- a/packages/html/stories/HierarchicalLayout.stories.js +++ b/packages/html/stories/HierarchicalLayout.stories.js @@ -1,11 +1,11 @@ import { Graph, - mxDomUtils, - mxFastOrganicLayout, + DomUtils, + FastOrganicLayout, mxHierarchicalLayout, Perimeter, InternalEvent, - Rubberband, + RubberBand, Constants, } from '@maxgraph/core'; @@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => { const graph = new Graph(container); // Adds rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Changes the default vertex style in-place let style = graph.getStylesheet().getDefaultVertexStyle(); @@ -58,7 +58,7 @@ const Template = ({ label, ...args }) => { // Creates a layout algorithm to be used // with the graph const layout = new mxHierarchicalLayout(graph); - const organic = new mxFastOrganicLayout(graph); + const organic = new FastOrganicLayout(graph); organic.forceConstant = 120; const parent = graph.getDefaultParent(); @@ -68,7 +68,7 @@ const Template = ({ label, ...args }) => { // Adds a button to execute the layout let button = document.createElement('button'); - mxDomUtils.write(button, 'Hierarchical'); + DomUtils.write(button, 'Hierarchical'); InternalEvent.addListener(button, 'click', function (evt) { layout.execute(parent); }); @@ -76,7 +76,7 @@ const Template = ({ label, ...args }) => { // Adds a button to execute the layout button = document.createElement('button'); - mxDomUtils.write(button, 'Organic'); + DomUtils.write(button, 'Organic'); InternalEvent.addListener(button, 'click', function (evt) { organic.execute(parent); diff --git a/packages/html/stories/HoverIcons.stories.js b/packages/html/stories/HoverIcons.stories.js index c7626af97..31004f1e7 100644 --- a/packages/html/stories/HoverIcons.stories.js +++ b/packages/html/stories/HoverIcons.stories.js @@ -1,7 +1,7 @@ import { Graph, InternalEvent, - Rubberband, + RubberBand, ImageBox, Rectangle, utils, @@ -104,7 +104,7 @@ const Template = ({ label, ...args }) => { graph.setConnectable(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Defines the tolerance before removing the icons const ICON_TOLERANCE = 20; diff --git a/packages/html/stories/HoverStyle.stories.js b/packages/html/stories/HoverStyle.stories.js index 3cfafa93c..a00066e8d 100644 --- a/packages/html/stories/HoverStyle.stories.js +++ b/packages/html/stories/HoverStyle.stories.js @@ -1,4 +1,4 @@ -import { Graph, Constants, Rubberband, CloneUtils } from '@maxgraph/core'; +import { Graph, Constants, RubberBand, CloneUtils } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -103,7 +103,7 @@ const Template = ({ label, ...args }) => { }); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/JsonData.stories.js b/packages/html/stories/JsonData.stories.js index 29fc0b072..3a58a8750 100644 --- a/packages/html/stories/JsonData.stories.js +++ b/packages/html/stories/JsonData.stories.js @@ -6,9 +6,9 @@ import { InternalEvent, mxClient, mxCodec, - mxDomUtils, + DomUtils, utils, - popup, + mxWindow, } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -41,11 +41,11 @@ const Template = ({ label, ...args }) => { const codec = new mxObjectCodec(new CustomData()); codec.encode = function (enc, obj) { const node = enc.document.createElement('CustomData'); - mxDomUtils.setTextContent(node, JSON.stringify(obj)); + DomUtils.setTextContent(node, JSON.stringify(obj)); return node; }; codec.decode = function (dec, node, into) { - const obj = JSON.parse(mxDomUtils.getTextContent(node)); + const obj = JSON.parse(DomUtils.getTextContent(node)); obj.constructor = CustomData; return obj; @@ -85,7 +85,7 @@ const Template = ({ label, ...args }) => { mxDomHelpers.button('Show JSON', function () { const encoder = new mxCodec(); const node = encoder.encode(graph.getModel()); - popup(utils.getXml(node), true); + mxWindow.popup(utils.getXml(node), true); }) ); diff --git a/packages/html/stories/Labels.stories.js b/packages/html/stories/Labels.stories.js index a87006b1c..7888e4f97 100644 --- a/packages/html/stories/Labels.stories.js +++ b/packages/html/stories/Labels.stories.js @@ -1,4 +1,4 @@ -import { Graph, Rubberband, mxKeyHandler, Constants, Rectangle } from '@maxgraph/core'; +import { Graph, RubberBand, mxKeyHandler, Constants, Rectangle } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -28,7 +28,7 @@ const Template = ({ label, ...args }) => { graph.htmlLabels = true; graph.vertexLabelsMovable = true; - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); new mxKeyHandler(graph); diff --git a/packages/html/stories/Merge.stories.js b/packages/html/stories/Merge.stories.js index 7ee112976..a86eb4552 100644 --- a/packages/html/stories/Merge.stories.js +++ b/packages/html/stories/Merge.stories.js @@ -1,4 +1,4 @@ -import { Graph, Perimeter, Constants, Rubberband } from '@maxgraph/core'; +import { Graph, Perimeter, Constants, RubberBand } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -48,7 +48,7 @@ const Template = ({ label, ...args }) => { style.strokeWidth = 2; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Monitor.stories.js b/packages/html/stories/Monitor.stories.js index 8a08d7d8c..801c150d0 100644 --- a/packages/html/stories/Monitor.stories.js +++ b/packages/html/stories/Monitor.stories.js @@ -2,7 +2,7 @@ import { Graph, EdgeStyle, mxDomHelpers, - mxXmlUtils, + XmlUtils, Perimeter, utils, Constants, @@ -76,7 +76,7 @@ const Template = ({ label, ...args }) => { '' + '' + ''; - const doc = mxXmlUtils.parseXml(xml); + const doc = XmlUtils.parseXml(xml); const codec = new mxCodec(doc); codec.decode(doc.documentElement, graph.getModel()); @@ -101,7 +101,7 @@ const Template = ({ label, ...args }) => { */ function update(graph, xml) { if (xml != null && xml.length > 0) { - const doc = mxXmlUtils.parseXml(xml); + const doc = XmlUtils.parseXml(xml); if (doc != null && doc.documentElement != null) { const model = graph.getModel(); diff --git a/packages/html/stories/Morph.stories.js b/packages/html/stories/Morph.stories.js index e3c9758ee..155c66c97 100644 --- a/packages/html/stories/Morph.stories.js +++ b/packages/html/stories/Morph.stories.js @@ -3,7 +3,7 @@ import { mxDomHelpers, mxMorphing, InternalEvent, - Rubberband, + RubberBand, } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => { const graph = new Graph(container); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Orthogonal.stories.js b/packages/html/stories/Orthogonal.stories.js index fa22d27b3..8c70addfa 100644 --- a/packages/html/stories/Orthogonal.stories.js +++ b/packages/html/stories/Orthogonal.stories.js @@ -1,6 +1,6 @@ import { Graph, - Rubberband, + RubberBand, ConnectionHandler, GraphHandler, Guide, @@ -82,7 +82,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/PageBreaks.stories.js b/packages/html/stories/PageBreaks.stories.js index 92c083264..e9ae355ec 100644 --- a/packages/html/stories/PageBreaks.stories.js +++ b/packages/html/stories/PageBreaks.stories.js @@ -1,7 +1,7 @@ import { Graph, Rectangle, - Rubberband, + RubberBand, mxDomHelpers, InternalEvent, } from '@maxgraph/core'; @@ -57,7 +57,7 @@ const Template = ({ label, ...args }) => { graph.graphHandler.scaleGrid = true; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Perimeter.stories.js b/packages/html/stories/Perimeter.stories.js index 28b9c53c4..edf9d34db 100644 --- a/packages/html/stories/Perimeter.stories.js +++ b/packages/html/stories/Perimeter.stories.js @@ -1,4 +1,4 @@ -import { Graph, Rubberband, GraphView, utils } from '@maxgraph/core'; +import { Graph, RubberBand, GraphView, utils } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -55,7 +55,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Permissions.stories.js b/packages/html/stories/Permissions.stories.js index ec63e63d0..3e731f1cd 100644 --- a/packages/html/stories/Permissions.stories.js +++ b/packages/html/stories/Permissions.stories.js @@ -2,7 +2,7 @@ import { Graph, ConnectionHandler, ImageBox, - Rubberband, + RubberBand, mxKeyHandler, mxDomHelpers, } from '@maxgraph/core'; @@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => { graph.setAllowLoops(true); // Enables rubberband selection and key handling - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); const keyHandler = new mxKeyHandler(graph); diff --git a/packages/html/stories/PortRefs.stories.js b/packages/html/stories/PortRefs.stories.js index 6b4cb03e0..477acc6b6 100644 --- a/packages/html/stories/PortRefs.stories.js +++ b/packages/html/stories/PortRefs.stories.js @@ -1,6 +1,6 @@ import { Graph, - Rubberband, + RubberBand, Point, EdgeHandler, ConstraintHandler, @@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => { graph.setPortsEnabled(false); // Enables rubberband selection - new Rubberband(graph); + new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/RadialTreeLayout.stories.js b/packages/html/stories/RadialTreeLayout.stories.js index b66e00447..26a9dad90 100644 --- a/packages/html/stories/RadialTreeLayout.stories.js +++ b/packages/html/stories/RadialTreeLayout.stories.js @@ -1,8 +1,8 @@ import { Graph, - Rubberband, + RubberBand, Constants, - mxRadialTreeLayout, + RadialTreeLayout, Perimeter, } from '@maxgraph/core'; @@ -32,7 +32,7 @@ const Template = ({ label, ...args }) => { const graph = new Graph(container); // Adds rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Changes the default vertex style in-place let style = graph.getStylesheet().getDefaultVertexStyle(); @@ -47,7 +47,7 @@ const Template = ({ label, ...args }) => { // Creates a layout algorithm to be used // with the graph - const layout = new mxRadialTreeLayout(graph); + const layout = new RadialTreeLayout(graph); const parent = graph.getDefaultParent(); diff --git a/packages/html/stories/SecondLabel.stories.js b/packages/html/stories/SecondLabel.stories.js index 769589150..c24f1c99d 100644 --- a/packages/html/stories/SecondLabel.stories.js +++ b/packages/html/stories/SecondLabel.stories.js @@ -2,7 +2,7 @@ import { Graph, RectangleShape, mxDomHelpers, - Text, + TextShape, Point, Rectangle, Constants, @@ -98,7 +98,7 @@ const Template = ({ label, ...args }) => { const secondLabel = graph.getSecondLabel(state.cell); if (secondLabel != null && state.shape != null && state.secondLabel == null) { - state.secondLabel = new Text( + state.secondLabel = new TextShape( secondLabel, new Rectangle(), Constants.ALIGN_LEFT, diff --git a/packages/html/stories/Stencils.stories.js b/packages/html/stories/Stencils.stories.js index d20d03aa0..a67e14c32 100644 --- a/packages/html/stories/Stencils.stories.js +++ b/packages/html/stories/Stencils.stories.js @@ -8,10 +8,10 @@ import { CellHighlight, Constants, VertexHandler, - Rubberband, + RubberBand, Shape, StencilShape, - StencilRegistry, + StencilShapeRegistry, CellRenderer, utils, } from '@maxgraph/core'; @@ -66,7 +66,7 @@ const Template = ({ label, ...args }) => { // Uses the shape for resize previews VertexHandler.prototype.createSelectionShape = function (bounds) { const key = this.state.style.shape; - const stencil = StencilRegistry.getStencil(key); + const stencil = StencilShapeRegistry.getStencil(key); let shape = null; if (stencil != null) { @@ -128,7 +128,10 @@ const Template = ({ label, ...args }) => { while (shape != null) { if (shape.nodeType === Constants.NODETYPE_ELEMENT) { - StencilRegistry.addStencil(shape.getAttribute('name'), new StencilShape(shape)); + StencilShapeRegistry.addStencil( + shape.getAttribute('name'), + new StencilShape(shape) + ); } shape = shape.nextSibling; @@ -159,7 +162,7 @@ const Template = ({ label, ...args }) => { style.shadow = '1'; // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Toolbar.stories.js b/packages/html/stories/Toolbar.stories.js index 27e6884d0..5a0d45c62 100644 --- a/packages/html/stories/Toolbar.stories.js +++ b/packages/html/stories/Toolbar.stories.js @@ -1,6 +1,6 @@ import { Graph, - Rubberband, + RubberBand, ConnectionHandler, ImageBox, mxToolbar, @@ -84,7 +84,7 @@ const Template = ({ label, ...args }) => { // Stops editing on enter or escape keypress const keyHandler = new mxKeyHandler(graph); - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); const addVertex = (icon, w, h, style) => { const vertex = new Cell(null, new Geometry(0, 0, w, h), style); diff --git a/packages/html/stories/UserObject.stories.js b/packages/html/stories/UserObject.stories.js index 07cd60f86..c28c3ef54 100644 --- a/packages/html/stories/UserObject.stories.js +++ b/packages/html/stories/UserObject.stories.js @@ -4,12 +4,12 @@ import { mxDomHelpers, mxKeyHandler, InternalEvent, - mxXmlUtils, + XmlUtils, mxCodec, Constants, utils, EdgeStyle, - mxDomUtils, + DomUtils, mxForm, CellAttributeChange, } from '@maxgraph/core'; @@ -37,7 +37,7 @@ const Template = ({ label, ...args }) => { // Note that these XML nodes will be enclosing the // Cell nodes for the model cells in the output - const doc = mxXmlUtils.createXmlDocument(); + const doc = XmlUtils.createXmlDocument(); const person1 = doc.createElement('Person'); person1.setAttribute('firstName', 'Daffy'); @@ -72,7 +72,7 @@ const Template = ({ label, ...args }) => { // Overrides method to provide a cell label in the display graph.convertValueToString = function (cell) { - if (mxDomUtils.isNode(cell.value)) { + if (DomUtils.isNode(cell.value)) { if (cell.value.nodeName.toLowerCase() == 'person') { const firstName = cell.getAttribute('firstName', ''); const lastName = cell.getAttribute('lastName', ''); @@ -94,7 +94,7 @@ const Template = ({ label, ...args }) => { // Overrides method to store a cell label in the model const { cellLabelChanged } = graph; graph.cellLabelChanged = function (cell, newValue, autoSize) { - if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') { + if (DomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') { const pos = newValue.indexOf(' '); const firstName = pos > 0 ? newValue.substring(0, pos) : newValue; @@ -116,7 +116,7 @@ const Template = ({ label, ...args }) => { // Overrides method to create the editing value const { getEditingValue } = graph; graph.getEditingValue = function (cell) { - if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') { + if (DomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') { const firstName = cell.getAttribute('firstName', ''); const lastName = cell.getAttribute('lastName', ''); @@ -218,13 +218,13 @@ const Template = ({ label, ...args }) => { const cell = graph.getSelectionCell(); if (cell == null) { - mxDomUtils.writeln(div, 'Nothing selected.'); + DomUtils.writeln(div, 'Nothing selected.'); } else { // Writes the title const center = document.createElement('center'); - mxDomUtils.writeln(center, `${cell.value.nodeName} (${cell.id})`); + DomUtils.writeln(center, `${cell.value.nodeName} (${cell.id})`); div.appendChild(center); - mxDomUtils.br(div); + DomUtils.br(div); // Creates the form from the attributes of the user object const form = new mxForm(); @@ -236,7 +236,7 @@ const Template = ({ label, ...args }) => { } div.appendChild(form.getTable()); - mxDomUtils.br(div); + DomUtils.br(div); } } diff --git a/packages/html/stories/Validation.stories.js b/packages/html/stories/Validation.stories.js index 4accc7f5b..ad4136f13 100644 --- a/packages/html/stories/Validation.stories.js +++ b/packages/html/stories/Validation.stories.js @@ -1,7 +1,7 @@ import { Graph, - Rubberband, - mxXmlUtils, + RubberBand, + XmlUtils, Multiplicity, mxKeyHandler, InternalEvent, @@ -29,7 +29,7 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - const xmlDocument = mxXmlUtils.createXmlDocument(); + const xmlDocument = XmlUtils.createXmlDocument(); const sourceNode = xmlDocument.createElement('Source'); const targetNode = xmlDocument.createElement('Target'); const subtargetNode = xmlDocument.createElement('Subtarget'); @@ -87,7 +87,7 @@ const Template = ({ label, ...args }) => { ); // Enables rubberband selection - new Rubberband(graph); + new RubberBand(graph); // Removes cells when [DELETE] is pressed const keyHandler = new mxKeyHandler(graph); diff --git a/packages/html/stories/Visibility.stories.js b/packages/html/stories/Visibility.stories.js index ec3af6247..bc595da7f 100644 --- a/packages/html/stories/Visibility.stories.js +++ b/packages/html/stories/Visibility.stories.js @@ -1,4 +1,4 @@ -import { Graph, Rubberband, mxDomHelpers } from '@maxgraph/core'; +import { Graph, RubberBand, mxDomHelpers } from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -29,7 +29,7 @@ const Template = ({ label, ...args }) => { const graph = new Graph(container); // Enables rubberband selection - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). diff --git a/packages/html/stories/Window.stories.js b/packages/html/stories/Window.stories.js index fee0e53c3..6fb46e30e 100644 --- a/packages/html/stories/Window.stories.js +++ b/packages/html/stories/Window.stories.js @@ -2,10 +2,10 @@ import { Graph, mxWindow, mxKeyHandler, - Rubberband, + RubberBand, InternalEvent, mxLog, - mxDomUtils, + DomUtils, mxClient, } from '@maxgraph/core'; @@ -57,7 +57,7 @@ const Template = ({ label, ...args }) => { graph.setTooltips(true); graph.setPanning(true); - if (args.rubberBand) new Rubberband(graph); + if (args.rubberBand) new RubberBand(graph); new mxKeyHandler(graph); @@ -85,7 +85,7 @@ const Template = ({ label, ...args }) => { const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. '; let content = document.createElement('div'); - mxDomUtils.write(content, lorem + lorem + lorem); + DomUtils.write(content, lorem + lorem + lorem); wnd = new mxWindow( 'Scrollable, resizable, auto height',