From 0adb9fa1d3389bd7f1cc07ff6f9a70d40c4e7f8b Mon Sep 17 00:00:00 2001 From: Junsik Shim Date: Mon, 30 Aug 2021 23:20:26 +0900 Subject: [PATCH] - Refactored the stories for storybook to work --- packages/core/src/editor/mxEditor.js | 60 +-- packages/core/src/index.ts | 271 ++++++------ packages/core/src/util/CloneUtils.js | 6 +- packages/core/src/util/gui/mxToolbar.js | 22 +- .../src/util/serialization/mxObjectCodec.js | 26 +- packages/core/src/view/Graph.ts | 5 + packages/core/src/view/Outline.ts | 11 +- .../core/src/view/cell/datatypes/CellState.ts | 2 +- .../core/src/view/cell/edge/EdgeHandler.ts | 2 +- .../core/src/view/cell/vertex/GraphVertex.ts | 3 +- .../core/src/view/cell/vertex/VertexHandle.ts | 2 +- .../src/view/cell/vertex/VertexHandler.ts | 2 +- .../core/src/view/geometry/shape/Actor.ts | 4 +- .../core/src/view/geometry/shape/Shape.ts | 2 +- .../src/view/geometry/shape/edge/Arrow.ts | 2 +- .../geometry/shape/edge/ArrowConnector.ts | 2 +- .../src/view/geometry/shape/edge/Connector.ts | 2 +- .../core/src/view/geometry/shape/edge/Line.ts | 2 +- .../src/view/geometry/shape/edge/Marker.ts | 4 +- .../src/view/geometry/shape/edge/Polyline.ts | 2 +- .../view/geometry/shape/node/CylinderShape.ts | 2 +- .../view/geometry/shape/node/ImageShape.ts | 2 +- .../view/geometry/shape/node/LabelShape.ts | 4 +- .../geometry/shape/node/RectangleShape.ts | 2 +- .../view/geometry/shape/node/StencilShape.ts | 2 +- .../view/geometry/shape/node/SwimlaneShape.ts | 4 +- .../src/view/geometry/shape/node/TextShape.ts | 4 +- .../view/geometry/shape/node/TriangleShape.ts | 2 +- .../view/grouping_ordering/GraphGrouping.ts | 142 +++--- .../src/view/grouping_ordering/GraphOrder.ts | 54 ++- packages/core/src/view/image/ImageExport.ts | 3 +- .../view/layout/layout/FastOrganicLayout.ts | 30 +- .../view/layout/layout/ParallelEdgeLayout.ts | 8 +- .../layout/hierarchical/SwimlaneLayout.ts | 6 +- .../model/GraphAbstractHierarchyCell.ts | 46 +- .../hierarchical/model/GraphHierarchyEdge.ts | 32 +- .../hierarchical/model/GraphHierarchyNode.ts | 8 +- .../hierarchical/mxHierarchicalLayout.js | 15 +- packages/core/src/view/ports/GraphPorts.ts | 7 - packages/core/webpack.config.js | 20 +- packages/html/stories/Anchors.stories.js | 75 ++-- packages/html/stories/Animation.stories.js | 35 +- packages/html/stories/AutoLayout.stories.js | 92 ++-- packages/html/stories/Boundary.stories.js | 72 +-- packages/html/stories/Clipboard.stories.js | 146 +++---- packages/html/stories/Collapse.stories.js | 23 +- packages/html/stories/Constituent.stories.js | 29 +- packages/html/stories/ContextIcons.stories.js | 72 ++- packages/html/stories/Control.stories.js | 65 ++- packages/html/stories/DragSource.stories.js | 65 ++- packages/html/stories/Drop.stories.js | 59 +-- .../html/stories/DynamicLoading.stories.js | 52 +-- packages/html/stories/DynamicStyle.stories.js | 33 +- .../html/stories/DynamicToolbar.stories.js | 75 ++-- .../html/stories/EdgeTolerance.stories.js | 27 +- packages/html/stories/Editing.stories.js | 29 +- packages/html/stories/Events.stories.js | 92 ++-- packages/html/stories/ExtendCanvas.stories.js | 411 ++++++++---------- packages/html/stories/FileIO.stories.js | 57 +-- packages/html/stories/FixedIcons.stories.js | 44 +- packages/html/stories/FixedPoints.stories.js | 93 ++-- packages/html/stories/Folding.stories.js | 32 +- packages/html/stories/Grid.stories.js | 154 +++---- packages/html/stories/Groups.stories.js | 48 +- packages/html/stories/Guides.stories.js | 61 ++- packages/html/stories/Handles.stories.js | 122 ++---- packages/html/stories/HelloPort.stories.js | 55 ++- packages/html/stories/HelloWorld.stories.js | 12 +- .../stories/HierarchicalLayout.stories.js | 37 +- packages/html/stories/HoverIcons.stories.js | 64 ++- packages/html/stories/HoverStyle.stories.js | 35 +- packages/html/stories/Images.stories.js | 65 ++- packages/html/stories/Indicators.stories.js | 23 +- packages/html/stories/JsonData.stories.js | 36 +- .../html/stories/LabelPosition.stories.js | 18 +- packages/html/stories/Labels.stories.js | 104 +---- packages/html/stories/Layers.stories.js | 51 +-- packages/html/stories/LoD.stories.js | 23 +- packages/html/stories/Markers.stories.js | 81 ++-- packages/html/stories/Merge.stories.js | 124 +----- packages/html/stories/Monitor.stories.js | 162 ++++--- packages/html/stories/Morph.stories.js | 34 +- packages/html/stories/OffPage.stories.js | 67 +-- packages/html/stories/OrgChart.stories.js | 152 +++---- packages/html/stories/Orthogonal.stories.js | 84 ++-- packages/html/stories/Overlays.stories.js | 35 +- packages/html/stories/PageBreaks.stories.js | 48 +- packages/html/stories/Perimeter.stories.js | 36 +- packages/html/stories/Permissions.stories.js | 96 ++-- packages/html/stories/PortRefs.stories.js | 120 ++--- .../html/stories/RadialTreeLayout.stories.js | 27 +- packages/html/stories/SecondLabel.stories.js | 83 ++-- packages/html/stories/Shape.stories.js | 25 +- packages/html/stories/Stencils.stories.js | 173 +++----- packages/html/stories/Stylesheet.stories.js | 93 +--- packages/html/stories/SwimLanes.stories.js | 117 +++-- packages/html/stories/Thread.stories.js | 17 +- packages/html/stories/Toolbar.stories.js | 99 ++--- packages/html/stories/Tree.stories.js | 110 ++--- packages/html/stories/UserObject.stories.js | 95 ++-- packages/html/stories/Validation.stories.js | 48 +- packages/html/stories/Visibility.stories.js | 35 +- packages/html/stories/Window.stories.js | 32 +- packages/html/stories/Wrapping.stories.js | 18 +- packages/html/webpack.config.js | 10 +- tsconfig.json | 16 +- webpack.config.js | 21 +- 107 files changed, 2266 insertions(+), 3203 deletions(-) diff --git a/packages/core/src/editor/mxEditor.js b/packages/core/src/editor/mxEditor.js index 9ee029c2b..c67d23da7 100644 --- a/packages/core/src/editor/mxEditor.js +++ b/packages/core/src/editor/mxEditor.js @@ -13,7 +13,7 @@ import CompactTreeLayout from '../view/layout/layout/CompactTreeLayout'; import mxDefaultToolbar from './mxDefaultToolbar'; import StackLayout from '../view/layout/layout/StackLayout'; import EventObject from '../view/event/EventObject'; -import utils, { getOffset } from '../util/Utils'; +import { getOffset } from '../util/Utils'; import mxCodec from '../util/serialization/mxCodec'; import mxWindow, { error } from '../util/gui/mxWindow'; import mxForm from '../util/gui/mxForm'; @@ -40,7 +40,7 @@ import RootChange from '../view/model/RootChange'; import ValueChange from '../view/cell/ValueChange'; import CellAttributeChange from '../view/cell/CellAttributeChange'; import PrintPreview from '../view/printing/PrintPreview'; -import mxClipboard from '../util/storage/mxClipboard'; +import mxClipboard from '../util/storage/Clipboard'; import mxLog from '../util/gui/mxLog'; import { isNode } from '../util/DomUtils'; import { getViewXml, getXml } from '../util/XmlUtils'; @@ -1292,10 +1292,7 @@ class mxEditor extends EventSource { const current = editor.graph.getView().scale * 100; const scale = parseFloat( - prompt( - Resources.get(editor.askZoomResource) || editor.askZoomResource, - current - ) + prompt(Resources.get(editor.askZoomResource) || editor.askZoomResource, current) ) / 100; if (!isNaN(scale)) { @@ -1362,8 +1359,7 @@ class mxEditor extends EventSource { */ // resetFirstTime(): void; resetFirstTime() { - document.cookie = - 'mxgraph=seen; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/'; + document.cookie = 'mxgraph=seen; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/'; } /** @@ -1677,10 +1673,8 @@ class mxEditor extends EventSource { if ( change instanceof RootChange || - (change instanceof ValueChange && - change.cell === this.graph.model.root) || - (change instanceof CellAttributeChange && - change.cell === this.graph.model.root) + (change instanceof ValueChange && change.cell === this.graph.model.root) || + (change instanceof CellAttributeChange && change.cell === this.graph.model.root) ) { this.fireEvent(new EventObject(InternalEvent.ROOT)); break; @@ -1801,9 +1795,7 @@ class mxEditor extends EventSource { this.addListener(InternalEvent.SAVE, () => { const tstamp = new Date().toLocaleString(); this.setStatus( - `${ - Resources.get(this.lastSavedResource) || this.lastSavedResource - }: ${tstamp}` + `${Resources.get(this.lastSavedResource) || this.lastSavedResource}: ${tstamp}` ); }); @@ -1811,10 +1803,9 @@ class mxEditor extends EventSource { // when new files are opened this.addListener(InternalEvent.OPEN, () => { this.setStatus( - `${ - Resources.get(this.currentFileResource) || - this.currentFileResource - }: ${this.filename}` + `${Resources.get(this.currentFileResource) || this.currentFileResource}: ${ + this.filename + }` ); }); } @@ -2045,15 +2036,7 @@ class mxEditor extends EventSource { post(url, `${this.postParameterName}=${data}`, (req) => { this.fireEvent( - new EventObject( - InternalEvent.POST, - 'request', - req, - 'url', - url, - 'data', - data - ) + new EventObject(InternalEvent.POST, 'request', req, 'url', url, 'data', data) ); }); } @@ -2292,11 +2275,7 @@ class mxEditor extends EventSource { // model, which will also make the change // part of the current transaction for (let i = 0; i < attrs.length; i += 1) { - const edit = new CellAttributeChange( - cell, - attrs[i].nodeName, - texts[i].value - ); + const edit = new CellAttributeChange(cell, attrs[i].nodeName, texts[i].value); model.execute(edit); } @@ -2446,8 +2425,7 @@ class mxEditor extends EventSource { frame.style.backgroundColor = 'white'; const w = document.body.clientWidth; - const h = - document.body.clientHeight || document.documentElement.clientHeight; + const h = document.body.clientHeight || document.documentElement.clientHeight; const wnd = new mxWindow( Resources.get(this.helpResource) || this.helpResource, @@ -2716,13 +2694,7 @@ class mxEditor extends EventSource { this.cycleAttribute(vertex); this.fireEvent( - new EventObject( - InternalEvent.BEFORE_ADD_VERTEX, - 'vertex', - vertex, - 'parent', - parent - ) + new EventObject(InternalEvent.BEFORE_ADD_VERTEX, 'vertex', vertex, 'parent', parent) ); model.beginUpdate(); @@ -2741,9 +2713,7 @@ class mxEditor extends EventSource { if (vertex != null) { this.graph.setSelectionCell(vertex); this.graph.scrollCellToVisible(vertex); - this.fireEvent( - new EventObject(InternalEvent.AFTER_ADD_VERTEX, 'vertex', vertex) - ); + this.fireEvent(new EventObject(InternalEvent.AFTER_ADD_VERTEX, 'vertex', vertex)); } return vertex; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index f037fe939..3a809025b 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -104,28 +104,28 @@ import RhombusShape from './view/geometry/shape/node/RhombusShape'; import StencilShape from './view/geometry/shape/node/StencilShape'; import StencilShapeRegistry from './view/geometry/shape/node/StencilShapeRegistry'; -import * as mxConstants from './util/Constants'; -import mxGuide from './util/Guide'; +import * as Constants from './util/Constants'; +import Guide from './util/Guide'; import Resources from './util/Resources'; import utils from './util/Utils'; -import * as mxCloneUtils from './util/CloneUtils'; -import * as mxDomUtils from './util/DomUtils'; -import * as mxEventUtils from './util/EventUtils'; -import * as mxGestureUtils from './util/GestureUtils'; -import * as mxStringUtils from './util/StringUtils'; -import * as mxXmlUtils from './util/XmlUtils'; +import * as CloneUtils from './util/CloneUtils'; +import * as DomUtils from './util/DomUtils'; +import * as EventUtils from './util/EventUtils'; +import * as GestureUtils from './util/GestureUtils'; +import * as StringUtils from './util/StringUtils'; +import * as XmlUtils from './util/XmlUtils'; import mxAnimation from './util/animate/mxAnimation'; import mxEffects from './util/animate/mxEffects'; import mxMorphing from './util/animate/mxMorphing'; -import mxAbstractCanvas2D from './util/canvas/AbstractCanvas2D'; -import mxSvgCanvas2D from './util/canvas/SvgCanvas2D'; +import AbstractCanvas2D from './util/canvas/AbstractCanvas2D'; +import SvgCanvas2D from './util/canvas/SvgCanvas2D'; import mxXmlCanvas2D from './util/canvas/mxXmlCanvas2D'; import Dictionary from './util/Dictionary'; import Geometry from './view/geometry/Geometry'; -import mxObjectIdentity from './util/mxObjectIdentity'; +import ObjectIdentity from './util/ObjectIdentity'; import Point from './view/geometry/Point'; import Rectangle from './view/geometry/Rectangle'; @@ -147,11 +147,11 @@ import InternalMouseEvent from './view/event/InternalMouseEvent'; import mxForm from './util/gui/mxForm'; import mxLog from './util/gui/mxLog'; -import mxPopupMenu from './util/gui/mxPopupMenu'; +import PopupMenu from './util/gui/PopupMenu'; import mxToolbar from './util/gui/mxToolbar'; import mxWindow from './util/gui/mxWindow'; -import Image from './view/image/ImageBox'; +import ImageBox from './view/image/ImageBox'; import ImageBundle from './view/image/ImageBundle'; import ImageExport from './view/image/ImageExport'; @@ -159,7 +159,7 @@ import mxUrlConverter from './util/network/mxUrlConverter'; import mxXmlRequest from './util/network/mxXmlRequest'; import mxAutoSaveManager from './util/storage/mxAutoSaveManager'; -import mxClipboard from './util/storage/mxClipboard'; +import Clipboard from './util/storage/Clipboard'; import UndoableEdit from './view/model/UndoableEdit'; import mxUndoManager from './util/mxUndoManager'; @@ -176,9 +176,8 @@ import TemporaryCellStates from './view/cell/TemporaryCellStates'; import ConnectionConstraint from './view/connection/ConnectionConstraint'; import Multiplicity from './view/validation/Multiplicity'; -import graph from './view/Graph'; +import Graph from './view/Graph'; import Model from './view/model/Model'; -import mxGraphSelectionModel from './view/selection/mxGraphSelectionModel'; import GraphView from './view/view/GraphView'; import LayoutManager from './view/layout/LayoutManager'; import Outline from './view/Outline'; @@ -190,124 +189,124 @@ import '../css/common.css'; export default { mxClient, mxLog, - mxObjectIdentity, - mxDictionary: Dictionary, - mxResources: Resources, - mxPoint: Point, - mxRectangle: Rectangle, + ObjectIdentity, + Dictionary, + Resources, + Point, + Rectangle, mxEffects, - mxUtils: utils, - mxConstants, - mxEventObject: EventObject, - mxMouseEvent: InternalMouseEvent, - mxEventSource: EventSource, - mxEvent: InternalEvent, + utils, + Constants, + EventObject, + InternalMouseEvent, + EventSource, + InternalEvent, mxXmlRequest, - mxClipboard, + Clipboard, mxWindow, mxForm, - mxImage: Image, + Image, mxDivResizer, - mxDragSource: DragSource, + DragSource, mxToolbar, - mxUndoableEdit: UndoableEdit, + UndoableEdit, mxUndoManager, mxUrlConverter, - mxPanningManager: PanningManager, - mxPopupMenu, + PanningManager, + PopupMenu, mxAutoSaveManager, mxAnimation, mxMorphing, - mxImageBundle: ImageBundle, - mxImageExport: ImageExport, - mxAbstractCanvas2D, + ImageBox, + ImageBundle, + ImageExport, + AbstractCanvas2D, mxXmlCanvas2D, - mxSvgCanvas2D, - mxGuide, - mxShape: Shape, - mxStencil: StencilShape, - mxStencilRegistry: StencilShapeRegistry, - mxMarker: Marker, - mxActor: Actor, - mxCloud: CloudShape, - mxRectangleShape: RectangleShape, - mxEllipse: EllipseShape, - mxDoubleEllipse: DoubleEllipseShape, - mxRhombus: RhombusShape, - mxPolyline: Polyline, - mxArrow: Arrow, - mxArrowConnector: ArrowConnector, - mxText: TextShape, - mxTriangle: TriangleShape, - mxHexagon: HexagonShape, - mxLine: Line, - mxImageShape: ImageShape, - mxLabel: Label, - mxCylinder: CylinderShape, - mxConnector: Connector, - mxSwimlane: SwimlaneShape, - mxGraphLayout: GraphLayout, - mxStackLayout: StackLayout, - mxPartitionLayout: PartitionLayout, - mxCompactTreeLayout: CompactTreeLayout, - mxRadialTreeLayout: RadialTreeLayout, - mxFastOrganicLayout: MxFastOrganicLayout, - mxCircleLayout: CircleLayout, - mxParallelEdgeLayout: ParallelEdgeLayout, - mxCompositeLayout: CompositeLayout, - mxEdgeLabelLayout: EdgeLabelLayout, - mxGraphAbstractHierarchyCell: MxGraphAbstractHierarchyCell, - mxGraphHierarchyNode: GraphHierarchyNode, - mxGraphHierarchyEdge: GraphHierarchyEdge, - mxGraphHierarchyModel: GraphHierarchyModel, - mxSwimlaneModel: SwimlaneModel, - mxHierarchicalLayoutStage: MxHierarchicalLayoutStage, - mxMedianHybridCrossingReduction: MedianHybridCrossingReduction, - mxMinimumCycleRemover: MinimumCycleRemover, - mxCoordinateAssignment: CoordinateAssignment, + SvgCanvas2D, + Guide, + Shape, + StencilShape, + StencilShapeRegistry, + Marker, + Actor, + CloudShape, + RectangleShape, + EllipseShape, + DoubleEllipseShape, + RhombusShape, + Polyline, + Arrow, + ArrowConnector, + TextShape, + TriangleShape, + HexagonShape, + Line, + ImageShape, + Label, + CylinderShape, + Connector, + SwimlaneShape, + GraphLayout, + StackLayout, + PartitionLayout, + CompactTreeLayout, + RadialTreeLayout, + MxFastOrganicLayout, + CircleLayout, + ParallelEdgeLayout, + CompositeLayout, + EdgeLabelLayout, + MxGraphAbstractHierarchyCell, + GraphHierarchyNode, + GraphHierarchyEdge, + GraphHierarchyModel, + SwimlaneModel, + MxHierarchicalLayoutStage, + MedianHybridCrossingReduction, + MinimumCycleRemover, + CoordinateAssignment, mxSwimlaneOrdering, mxHierarchicalLayout, - mxSwimlaneLayout: SwimlaneLayout, - mxGraphModel: Model, - mxCell: Cell, - mxGeometry: Geometry, - mxCellPath: CellPath, - mxPerimeter: Perimeter, - mxPrintPreview: PrintPreview, - mxStylesheet: Stylesheet, - mxCellState: CellState, - mxGraphSelectionModel, - mxCellEditor: CellEditor, - mxCellRenderer: CellRenderer, - mxEdgeStyle: EdgeStyle, - mxStyleRegistry: StyleRegistry, - mxGraphView: GraphView, - mxGraph: graph, - mxCellOverlay: CellOverlay, - mxOutline: Outline, - mxMultiplicity: Multiplicity, - mxLayoutManager: LayoutManager, - mxSwimlaneManager: SwimlaneManager, - mxTemporaryCellStates: TemporaryCellStates, - mxCellStatePreview: CellStatePreview, - mxConnectionConstraint: ConnectionConstraint, - mxGraphHandler: GraphHandler, - mxPanningHandler: PanningHandler, - mxPopupMenuHandler: PopupMenuHandler, - mxCellMarker: CellMarker, - mxSelectionCellsHandler: SelectionCellsHandler, - mxConnectionHandler: ConnectionHandler, - mxConstraintHandler: ConstraintHandler, - mxRubberband: RubberBand, - mxHandle: VertexHandle, - mxVertexHandler: VertexHandler, - mxEdgeHandler: EdgeHandler, - mxElbowEdgeHandler: ElbowEdgeHandler, - mxEdgeSegmentHandler: EdgeSegmentHandler, + SwimlaneLayout, + Model, + Cell, + Geometry, + CellPath, + Perimeter, + PrintPreview, + Stylesheet, + CellState, + CellEditor, + CellRenderer, + EdgeStyle, + StyleRegistry, + GraphView, + Graph, + CellOverlay, + Outline, + Multiplicity, + LayoutManager, + SwimlaneManager, + TemporaryCellStates, + CellStatePreview, + ConnectionConstraint, + GraphHandler, + PanningHandler, + PopupMenuHandler, + CellMarker, + SelectionCellsHandler, + ConnectionHandler, + ConstraintHandler, + RubberBand, + VertexHandle, + VertexHandler, + EdgeHandler, + ElbowEdgeHandler, + EdgeSegmentHandler, mxKeyHandler, - mxTooltipHandler: TooltipHandler, - mxCellTracker: CellTracker, - mxCellHighlight: CellHighlight, + TooltipHandler, + CellTracker, + CellHighlight, mxDefaultKeyHandler, mxDefaultPopupMenu, mxDefaultToolbar, @@ -328,22 +327,22 @@ export default { // mxDefaultToolbarCodec, // mxDefaultPopupMenuCodec, // mxEditorCodec, - mxCloneUtils, - mxDomUtils, - mxEventUtils, - mxGestureUtils, - mxStringUtils, - mxXmlUtils, + CloneUtils, + DomUtils, + EventUtils, + GestureUtils, + StringUtils, + XmlUtils, mxDomHelpers, - mxCellAttributeChange: CellAttributeChange, - mxChildChange: ChildChange, - mxCollapseChange: CollapseChange, - mxCurrentRootChange: CurrentRootChange, - mxGeometryChange: GeometryChange, - mxRootChange: RootChange, - mxSelectionChange: SelectionChange, - mxStyleChange: StyleChange, - mxTerminalChange: TerminalChange, - mxValueChange: ValueChange, - mxVisibleChange: VisibleChange, + CellAttributeChange, + ChildChange, + CollapseChange, + CurrentRootChange, + GeometryChange, + RootChange, + SelectionChange, + StyleChange, + TerminalChange, + ValueChange, + VisibleChange, }; diff --git a/packages/core/src/util/CloneUtils.js b/packages/core/src/util/CloneUtils.js index e4ae0a52a..c3d804a68 100644 --- a/packages/core/src/util/CloneUtils.js +++ b/packages/core/src/util/CloneUtils.js @@ -1,4 +1,4 @@ -import mxObjectIdentity from "./mxObjectIdentity"; +import ObjectIdentity from './ObjectIdentity'; /** * Function: clone @@ -26,7 +26,7 @@ export const clone = function _clone(obj, transients, shallow) { for (const i in obj) { if ( - i != mxObjectIdentity.FIELD_NAME && + i != ObjectIdentity.FIELD_NAME && (transients == null || transients.indexOf(i) < 0) ) { if (!shallow && typeof obj[i] === 'object') { @@ -39,4 +39,4 @@ export const clone = function _clone(obj, transients, shallow) { } return clone; -}; \ No newline at end of file +}; diff --git a/packages/core/src/util/gui/mxToolbar.js b/packages/core/src/util/gui/mxToolbar.js index 4c4fa441a..4052660c6 100644 --- a/packages/core/src/util/gui/mxToolbar.js +++ b/packages/core/src/util/gui/mxToolbar.js @@ -5,10 +5,9 @@ * Type definitions from the typed-mxgraph project */ -import utils from '../Utils'; import InternalEvent from '../../view/event/InternalEvent'; import Point from '../../view/geometry/Point'; -import mxPopupMenu from './mxPopupMenu'; +import PopupMenu from './PopupMenu'; import EventSource from '../../view/event/EventSource'; import EventObject from '../../view/event/EventObject'; import mxClient from '../../mxClient'; @@ -109,7 +108,7 @@ class mxToolbar extends EventSource { } } - const mouseHandler = evt => { + const mouseHandler = (evt) => { if (pressedIcon != null) { img.setAttribute('src', icon); } else { @@ -121,7 +120,7 @@ class mxToolbar extends EventSource { // while it is being clicked with the mouse InternalEvent.addGestureListeners( img, - evt => { + (evt) => { if (pressedIcon != null) { img.setAttribute('src', pressedIcon); } else { @@ -131,7 +130,7 @@ class mxToolbar extends EventSource { // Popup Menu if (factoryMethod != null) { if (this.menu == null) { - this.menu = new mxPopupMenu(); + this.menu = new PopupMenu(); this.menu.init(); } @@ -146,10 +145,7 @@ class mxToolbar extends EventSource { this.currentImg = img; this.menu.factoryMethod = factoryMethod; - const point = new Point( - img.offsetLeft, - img.offsetTop + img.offsetHeight - ); + const point = new Point(img.offsetLeft, img.offsetTop + img.offsetHeight); this.menu.popup(point.x, point.y, null, evt); // Sets and overrides to restore classname @@ -209,7 +205,7 @@ class mxToolbar extends EventSource { select.className = style || 'mxToolbarCombo'; this.addOption(select, title, null); - InternalEvent.addListener(select, 'change', evt => { + InternalEvent.addListener(select, 'change', (evt) => { const value = select.options[select.selectedIndex]; select.selectedIndex = 0; @@ -266,7 +262,7 @@ class mxToolbar extends EventSource { img.setAttribute('title', title); } - InternalEvent.addListener(img, 'click', evt => { + InternalEvent.addListener(img, 'click', (evt) => { let tmp = this.selectedMode.altIcon; if (tmp != null) { @@ -333,12 +329,12 @@ class mxToolbar extends EventSource { } if (this.enabled && toggle) { - InternalEvent.addListener(img, 'click', evt => { + InternalEvent.addListener(img, 'click', (evt) => { this.selectMode(img, funct); this.noReset = false; }); - InternalEvent.addListener(img, 'dblclick', evt => { + InternalEvent.addListener(img, 'dblclick', (evt) => { this.selectMode(img, funct); this.noReset = true; }); diff --git a/packages/core/src/util/serialization/mxObjectCodec.js b/packages/core/src/util/serialization/mxObjectCodec.js index 2dab2cf0b..0d9ef1803 100644 --- a/packages/core/src/util/serialization/mxObjectCodec.js +++ b/packages/core/src/util/serialization/mxObjectCodec.js @@ -5,12 +5,12 @@ * Type definitions from the typed-mxgraph project */ -import mxObjectIdentity from '../mxObjectIdentity'; +import ObjectIdentity from '../ObjectIdentity'; import mxLog from '../gui/mxLog'; import Geometry from '../../view/geometry/Geometry'; import Point from '../../view/geometry/Point'; import { NODETYPE_ELEMENT } from '../Constants'; -import utils, { isInteger, isNumeric } from '../Utils'; +import { isInteger, isNumeric } from '../Utils'; import { getTextContent } from '../DomUtils'; import { load } from '../network/mxXmlRequest'; @@ -303,7 +303,7 @@ class mxObjectCodec { /** * Returns true if the given attribute is to be ignored by the codec. This * implementation returns true if the given fieldname is in {@link exclude} or - * if the fieldname equals {@link mxObjectIdentity.FIELD_NAME}. + * if the fieldname equals {@link ObjectIdentity.FIELD_NAME}. * * @param obj Object instance that contains the field. * @param attr Fieldname of the field. @@ -313,9 +313,7 @@ class mxObjectCodec { */ // isExcluded(obj: any, attr: string, value: any, write?: boolean): boolean; isExcluded(obj, attr, value, write) { - return ( - attr == mxObjectIdentity.FIELD_NAME || this.exclude.indexOf(attr) >= 0 - ); + return attr == ObjectIdentity.FIELD_NAME || this.exclude.indexOf(attr) >= 0; } /** @@ -495,9 +493,7 @@ class mxObjectCodec { node.appendChild(child); } else { - mxLog.warn( - `mxObjectCodec.encode: No node for ${this.getName()}.${name}: ${value}` - ); + mxLog.warn(`mxObjectCodec.encode: No node for ${this.getName()}.${name}: ${value}`); } } @@ -532,9 +528,7 @@ class mxObjectCodec { */ // isBooleanAttribute(enc: mxCodec, obj: any, name: string, value: any): boolean; isBooleanAttribute(enc, obj, name, value) { - return ( - typeof value.length === 'undefined' && (value == true || value == false) - ); + return typeof value.length === 'undefined' && (value == true || value == false); } /** @@ -576,8 +570,7 @@ class mxObjectCodec { attr.name === 'y' || attr.name === 'width' || attr.name === 'height')) || - (obj.constructor === Point && - (attr.name === 'x' || attr.name === 'y')) || + (obj.constructor === Point && (attr.name === 'x' || attr.name === 'y')) || isNumeric(attr.value); return result; @@ -782,10 +775,7 @@ class mxObjectCodec { while (child != null) { const tmp = child.nextSibling; - if ( - child.nodeType === NODETYPE_ELEMENT && - !this.processInclude(dec, child, obj) - ) { + if (child.nodeType === NODETYPE_ELEMENT && !this.processInclude(dec, child, obj)) { this.decodeChild(dec, child, obj); } diff --git a/packages/core/src/view/Graph.ts b/packages/core/src/view/Graph.ts index f6adce424..afbd9e662 100644 --- a/packages/core/src/view/Graph.ts +++ b/packages/core/src/view/Graph.ts @@ -203,6 +203,10 @@ type PartialDragDrop = Pick< 'isDropEnabled' | 'isAutoScroll' | 'isAutoExtend' | 'isSplitEnabled' | 'isSplitTarget' >; type PartialSwimlane = Pick; +type PartialPorts = Pick< + GraphPorts, + 'isPort' | 'getTerminalForPort' | 'isPortsEnabled' | 'setPortsEnabled' +>; type PartialClass = PartialEvents & PartialSelection & PartialCells & @@ -220,6 +224,7 @@ type PartialClass = PartialEvents & PartialZoom & PartialDragDrop & PartialSwimlane & + PartialPorts & EventSource; export type MaxGraph = Graph & PartialClass; diff --git a/packages/core/src/view/Outline.ts b/packages/core/src/view/Outline.ts index 929e92fdc..49eb4cda1 100644 --- a/packages/core/src/view/Outline.ts +++ b/packages/core/src/view/Outline.ts @@ -15,7 +15,7 @@ import { import Point from './geometry/Point'; import Rectangle from './geometry/Rectangle'; import RectangleShape from './geometry/shape/node/RectangleShape'; -import graph from './Graph'; +import graph, { MaxGraph } from './Graph'; import ImageShape from './geometry/shape/node/ImageShape'; import InternalEvent from './event/InternalEvent'; import utils from '../util/Utils'; @@ -71,7 +71,7 @@ import EventSource from './event/EventSource'; * ``` */ class Outline { - constructor(source: graph, container: HTMLElement | null = null) { + constructor(source: MaxGraph, container: HTMLElement | null = null) { this.source = source; if (container != null) { @@ -224,7 +224,7 @@ class Outline { /** * Reference to the source {@link graph}. */ - source: graph; + source: MaxGraph; /** * Reference to the {@link graph} that renders the outline. @@ -576,10 +576,7 @@ class Outline { this.active = true; const sourceContainer = this.source.container; - if ( - this.source.useScrollbarsForPanning && - hasScrollbars(this.source.container) - ) { + if (this.source.useScrollbarsForPanning && hasScrollbars(this.source.container)) { this.dx0 = sourceContainer.scrollLeft; this.dy0 = sourceContainer.scrollTop; } else { diff --git a/packages/core/src/view/cell/datatypes/CellState.ts b/packages/core/src/view/cell/datatypes/CellState.ts index 824e0cd5e..5d1c266e7 100644 --- a/packages/core/src/view/cell/datatypes/CellState.ts +++ b/packages/core/src/view/cell/datatypes/CellState.ts @@ -13,7 +13,7 @@ import Shape from '../../geometry/shape/Shape'; import TextShape from '../../geometry/shape/node/TextShape'; import Dictionary from '../../../util/Dictionary'; import { NONE } from '../../../util/Constants'; -import { CellStateStyles } from 'packages/core/src/types'; +import { CellStateStyles } from 'core/types'; import RectangleShape from '../../geometry/shape/node/RectangleShape'; import CellOverlay from '../CellOverlay'; diff --git a/packages/core/src/view/cell/edge/EdgeHandler.ts b/packages/core/src/view/cell/edge/EdgeHandler.ts index 29b7d3260..36d5b6892 100644 --- a/packages/core/src/view/cell/edge/EdgeHandler.ts +++ b/packages/core/src/view/cell/edge/EdgeHandler.ts @@ -59,7 +59,7 @@ import { import Graph, { MaxGraph } from '../../Graph'; import CellState from '../datatypes/CellState'; import Shape from '../../geometry/shape/Shape'; -import { CellHandle, ColorValue, Listenable } from 'packages/core/src/types'; +import { CellHandle, ColorValue, Listenable } from 'core/types'; import InternalMouseEvent from '../../event/InternalMouseEvent'; import Cell from '../datatypes/Cell'; import ImageBox from '../../image/ImageBox'; diff --git a/packages/core/src/view/cell/vertex/GraphVertex.ts b/packages/core/src/view/cell/vertex/GraphVertex.ts index 10d595fd1..99837a07f 100644 --- a/packages/core/src/view/cell/vertex/GraphVertex.ts +++ b/packages/core/src/view/cell/vertex/GraphVertex.ts @@ -1,7 +1,6 @@ import Cell from '../datatypes/Cell'; import Geometry from '../../geometry/Geometry'; -import CellArray from '../datatypes/CellArray'; -import { autoImplement } from 'packages/core/src/util/Utils'; +import { autoImplement } from 'core/util/Utils'; import type GraphCells from '../GraphCells'; diff --git a/packages/core/src/view/cell/vertex/VertexHandle.ts b/packages/core/src/view/cell/vertex/VertexHandle.ts index 798ef7179..693af9546 100644 --- a/packages/core/src/view/cell/vertex/VertexHandle.ts +++ b/packages/core/src/view/cell/vertex/VertexHandle.ts @@ -26,7 +26,7 @@ import CellState from '../datatypes/CellState'; import CellArray from '../datatypes/CellArray'; import type { MaxGraph } from '../../Graph'; -import type { CellHandle, CellStateStyles } from 'packages/core/src/types'; +import type { CellHandle, CellStateStyles } from 'core/types'; /** * Implements a single custom handle for vertices. diff --git a/packages/core/src/view/cell/vertex/VertexHandler.ts b/packages/core/src/view/cell/vertex/VertexHandler.ts index 19a2eb3df..40feaf16f 100644 --- a/packages/core/src/view/cell/vertex/VertexHandler.ts +++ b/packages/core/src/view/cell/vertex/VertexHandler.ts @@ -33,7 +33,7 @@ import Graph, { MaxGraph } from '../../Graph'; import CellState from '../datatypes/CellState'; import Image from '../../image/ImageBox'; import Cell from '../datatypes/Cell'; -import { CellHandle, Listenable } from 'packages/core/src/types'; +import { CellHandle, Listenable } from 'core/types'; import Shape from '../../geometry/shape/Shape'; import InternalMouseEvent from '../../event/InternalMouseEvent'; import VertexHandle from './VertexHandle'; diff --git a/packages/core/src/view/geometry/shape/Actor.ts b/packages/core/src/view/geometry/shape/Actor.ts index 8f66e8cb3..a5b547b55 100644 --- a/packages/core/src/view/geometry/shape/Actor.ts +++ b/packages/core/src/view/geometry/shape/Actor.ts @@ -7,8 +7,8 @@ import Rectangle from '../Rectangle'; import Shape from './Shape'; import SvgCanvas2D from '../../../util/canvas/SvgCanvas2D'; -import { ColorValue } from 'packages/core/src/types'; -import { NONE } from 'packages/core/src/util/Constants'; +import { ColorValue } from 'core/types'; +import { NONE } from 'core/util/Constants'; /** * Extends {@link Shape} to implement an actor shape. If a custom shape with one diff --git a/packages/core/src/view/geometry/shape/Shape.ts b/packages/core/src/view/geometry/shape/Shape.ts index fc5d453fb..aa4e20263 100644 --- a/packages/core/src/view/geometry/shape/Shape.ts +++ b/packages/core/src/view/geometry/shape/Shape.ts @@ -23,7 +23,7 @@ import { SHADOW_OFFSET_Y, } from '../../../util/Constants'; import Point from '../Point'; -import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D'; +import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D'; import SvgCanvas2D from '../../../util/canvas/SvgCanvas2D'; import InternalEvent from '../../event/InternalEvent'; import mxClient from '../../../mxClient'; diff --git a/packages/core/src/view/geometry/shape/edge/Arrow.ts b/packages/core/src/view/geometry/shape/edge/Arrow.ts index 102120880..e9c6120ba 100644 --- a/packages/core/src/view/geometry/shape/edge/Arrow.ts +++ b/packages/core/src/view/geometry/shape/edge/Arrow.ts @@ -9,7 +9,7 @@ import { ARROW_SIZE, ARROW_SPACING, ARROW_WIDTH } from '../../../../util/Constan import Rectangle from '../../Rectangle'; import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; import Point from '../../Point'; -import { ColorValue } from 'packages/core/src/types'; +import { ColorValue } from 'core/types'; /** * Extends {@link Shape} to implement an arrow shape. The shape is used to represent edges, not vertices. diff --git a/packages/core/src/view/geometry/shape/edge/ArrowConnector.ts b/packages/core/src/view/geometry/shape/edge/ArrowConnector.ts index 1ecea57c9..1145b9f27 100644 --- a/packages/core/src/view/geometry/shape/edge/ArrowConnector.ts +++ b/packages/core/src/view/geometry/shape/edge/ArrowConnector.ts @@ -11,7 +11,7 @@ import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; import Point from '../../Point'; import Rectangle from '../../Rectangle'; import CellState from '../../../cell/datatypes/CellState'; -import { ColorValue } from 'packages/core/src/types'; +import { ColorValue } from 'core/types'; /** * Extends {@link Shape} to implement an new rounded arrow shape with support for waypoints and double arrows. The diff --git a/packages/core/src/view/geometry/shape/edge/Connector.ts b/packages/core/src/view/geometry/shape/edge/Connector.ts index fa1dc31a7..7f4885ec3 100644 --- a/packages/core/src/view/geometry/shape/edge/Connector.ts +++ b/packages/core/src/view/geometry/shape/edge/Connector.ts @@ -11,7 +11,7 @@ import Marker from './Marker'; import Point from '../../Point'; import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; import Rectangle from '../../Rectangle'; -import { ColorValue } from 'packages/core/src/types'; +import { ColorValue } from 'core/types'; /** * Extends {@link mxShape} to implement a connector shape. diff --git a/packages/core/src/view/geometry/shape/edge/Line.ts b/packages/core/src/view/geometry/shape/edge/Line.ts index 8bdfdd0fc..77ee72fe4 100644 --- a/packages/core/src/view/geometry/shape/edge/Line.ts +++ b/packages/core/src/view/geometry/shape/edge/Line.ts @@ -7,7 +7,7 @@ import Shape from '../Shape'; import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; import Rectangle from '../../Rectangle'; -import { ColorValue } from 'packages/core/src/types'; +import { ColorValue } from 'core/types'; /** * Extends {@link Shape} to implement a horizontal line shape. diff --git a/packages/core/src/view/geometry/shape/edge/Marker.ts b/packages/core/src/view/geometry/shape/edge/Marker.ts index 6051e85dd..dd207c902 100644 --- a/packages/core/src/view/geometry/shape/edge/Marker.ts +++ b/packages/core/src/view/geometry/shape/edge/Marker.ts @@ -4,8 +4,8 @@ * Updated to ES9 syntax by David Morrissey 2021 * Type definitions from the typed-mxgraph project */ -import { ArrowType } from 'packages/core/src/types'; -import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D'; +import { ArrowType } from 'core/types'; +import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D'; import { ARROW_CLASSIC, ARROW_CLASSIC_THIN, diff --git a/packages/core/src/view/geometry/shape/edge/Polyline.ts b/packages/core/src/view/geometry/shape/edge/Polyline.ts index fd2368e4f..e91a47788 100644 --- a/packages/core/src/view/geometry/shape/edge/Polyline.ts +++ b/packages/core/src/view/geometry/shape/edge/Polyline.ts @@ -8,7 +8,7 @@ import Shape from '../Shape'; import { LINE_ARCSIZE } from '../../../../util/Constants'; import Point from '../../Point'; import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; -import { ColorValue } from 'packages/core/src/types'; +import { ColorValue } from 'core/types'; /** * Class: mxPolyline diff --git a/packages/core/src/view/geometry/shape/node/CylinderShape.ts b/packages/core/src/view/geometry/shape/node/CylinderShape.ts index bc74aa637..56168bd3a 100644 --- a/packages/core/src/view/geometry/shape/node/CylinderShape.ts +++ b/packages/core/src/view/geometry/shape/node/CylinderShape.ts @@ -7,7 +7,7 @@ import Shape from '../Shape'; import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; import Rectangle from '../../Rectangle'; -import { NONE } from 'packages/core/src/util/Constants'; +import { NONE } from 'core/util/Constants'; /** * Extends {@link Shape} to implement an cylinder shape. If a custom shape with one filled area and an overlay path is diff --git a/packages/core/src/view/geometry/shape/node/ImageShape.ts b/packages/core/src/view/geometry/shape/node/ImageShape.ts index 1c6bbd103..723f50c16 100644 --- a/packages/core/src/view/geometry/shape/node/ImageShape.ts +++ b/packages/core/src/view/geometry/shape/node/ImageShape.ts @@ -10,7 +10,7 @@ import Rectangle from '../../Rectangle'; import CellState from '../../../cell/datatypes/CellState'; import AbstractCanvas2D from '../../../../util/canvas/SvgCanvas2D'; import CellOverlay from '../../../cell/CellOverlay'; -import { NONE } from 'packages/core/src/util/Constants'; +import { NONE } from 'core/util/Constants'; /** * Extends {@link mxShape} to implement an image shape. diff --git a/packages/core/src/view/geometry/shape/node/LabelShape.ts b/packages/core/src/view/geometry/shape/node/LabelShape.ts index dd54ddfd1..2e9e29d80 100644 --- a/packages/core/src/view/geometry/shape/node/LabelShape.ts +++ b/packages/core/src/view/geometry/shape/node/LabelShape.ts @@ -16,8 +16,8 @@ import { NONE, } from '../../../../util/Constants'; import RectangleShape from './RectangleShape'; -import { ColorValue } from 'packages/core/src/types'; -import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D'; +import { ColorValue } from 'core/types'; +import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D'; /** * Class: mxLabel diff --git a/packages/core/src/view/geometry/shape/node/RectangleShape.ts b/packages/core/src/view/geometry/shape/node/RectangleShape.ts index cc653b234..56caa159b 100644 --- a/packages/core/src/view/geometry/shape/node/RectangleShape.ts +++ b/packages/core/src/view/geometry/shape/node/RectangleShape.ts @@ -13,7 +13,7 @@ import { import Shape from '../Shape'; import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; import Rectangle from '../../Rectangle'; -import { ColorValue } from 'packages/core/src/types'; +import { ColorValue } from 'core/types'; /** * Extends {@link Shape} to implement a rectangle shape. diff --git a/packages/core/src/view/geometry/shape/node/StencilShape.ts b/packages/core/src/view/geometry/shape/node/StencilShape.ts index 096e8f264..6d476fd1e 100644 --- a/packages/core/src/view/geometry/shape/node/StencilShape.ts +++ b/packages/core/src/view/geometry/shape/node/StencilShape.ts @@ -24,7 +24,7 @@ import StencilShapeRegistry from './StencilShapeRegistry'; import { getChildNodes, getTextContent } from '../../../../util/DomUtils'; import Point from '../../Point'; import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; -import { AlignValue, ColorValue, VAlignValue } from 'packages/core/src/types'; +import { AlignValue, ColorValue, VAlignValue } from 'core/types'; /** * Implements a generic shape which is based on a XML node as a description. diff --git a/packages/core/src/view/geometry/shape/node/SwimlaneShape.ts b/packages/core/src/view/geometry/shape/node/SwimlaneShape.ts index 85079b9ff..0cb079884 100644 --- a/packages/core/src/view/geometry/shape/node/SwimlaneShape.ts +++ b/packages/core/src/view/geometry/shape/node/SwimlaneShape.ts @@ -15,8 +15,8 @@ import { NONE, RECTANGLE_ROUNDING_FACTOR, } from '../../../../util/Constants'; -import { ColorValue } from 'packages/core/src/types'; -import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D'; +import { ColorValue } from 'core/types'; +import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D'; /** * Extends {@link Shape} to implement a swimlane shape. diff --git a/packages/core/src/view/geometry/shape/node/TextShape.ts b/packages/core/src/view/geometry/shape/node/TextShape.ts index bd88c9c46..19d3edba3 100644 --- a/packages/core/src/view/geometry/shape/node/TextShape.ts +++ b/packages/core/src/view/geometry/shape/node/TextShape.ts @@ -47,8 +47,8 @@ import { OverflowValue, TextDirectionValue, VAlignValue, -} from 'packages/core/src/types'; -import SvgCanvas2D from 'packages/core/src/util/canvas/SvgCanvas2D'; +} from 'core/types'; +import SvgCanvas2D from 'core/util/canvas/SvgCanvas2D'; /** * Extends mxShape to implement a text shape. diff --git a/packages/core/src/view/geometry/shape/node/TriangleShape.ts b/packages/core/src/view/geometry/shape/node/TriangleShape.ts index 36a303e15..506a076e8 100644 --- a/packages/core/src/view/geometry/shape/node/TriangleShape.ts +++ b/packages/core/src/view/geometry/shape/node/TriangleShape.ts @@ -8,7 +8,7 @@ import Point from '../../Point'; import Actor from '../Actor'; import { LINE_ARCSIZE } from '../../../../util/Constants'; -import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D'; +import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D'; /** * Implementation of the triangle shape. diff --git a/packages/core/src/view/grouping_ordering/GraphGrouping.ts b/packages/core/src/view/grouping_ordering/GraphGrouping.ts index 17b17d6a0..a84e37990 100644 --- a/packages/core/src/view/grouping_ordering/GraphGrouping.ts +++ b/packages/core/src/view/grouping_ordering/GraphGrouping.ts @@ -1,20 +1,53 @@ -import Cell from "../cell/datatypes/Cell"; -import CellArray from "../cell/datatypes/CellArray"; -import {sortCells} from "../../util/Utils"; -import Geometry from "../geometry/Geometry"; -import EventObject from "../event/EventObject"; -import InternalEvent from "../event/InternalEvent"; -import Rectangle from "../geometry/Rectangle"; -import Point from "../geometry/Point"; -import Graph from "../Graph"; +import Cell from '../cell/datatypes/Cell'; +import CellArray from '../cell/datatypes/CellArray'; +import { autoImplement, sortCells } from '../../util/Utils'; +import Geometry from '../geometry/Geometry'; +import EventObject from '../event/EventObject'; +import InternalEvent from '../event/InternalEvent'; +import Rectangle from '../geometry/Rectangle'; +import Point from '../geometry/Point'; +import Graph from '../Graph'; +import GraphSelection from '../selection/GraphSelection'; +import GraphCells from '../cell/GraphCells'; +import GraphSwimlane from '../swimlane/GraphSwimlane'; +import GraphEdge from '../cell/edge/GraphEdge'; -class GraphGrouping { - constructor(graph: Graph) { - this.graph = graph; - } - - graph: Graph; +type PartialGraph = Pick< + Graph, + | 'getModel' + | 'fireEvent' + | 'getView' + | 'getDefaultParent' + | 'batchUpdate' + | 'isValidRoot' + | 'getCurrentRoot' +>; +type PartialCells = Pick< + GraphCells, + | 'cellsAdded' + | 'cellsMoved' + | 'cellsResized' + | 'getBoundingBoxFromGeometry' + | 'cellsRemoved' + | 'getChildCells' + | 'moveCells' +>; +type PartialEdge = Pick; +type PartialSelection = Pick< + GraphSelection, + 'getSelectionCells' | 'getSelectionCell' | 'clearSelection' | 'setSelectionCell' +>; +type PartialSwimlane = Pick< + GraphSwimlane, + 'isSwimlane' | 'getStartSize' | 'getActualStartSize' +>; +type PartialClass = PartialGraph & + PartialCells & + PartialEdge & + PartialSelection & + PartialSwimlane; +class GraphGrouping extends autoImplement() { /***************************************************************************** * Group: Grouping *****************************************************************************/ @@ -55,12 +88,12 @@ class GraphGrouping { parent = cells[0].getParent(); } - this.graph.model.beginUpdate(); + this.getModel().beginUpdate(); try { // Checks if the group has a geometry and // creates one if one does not exist if (group.getGeometry() == null) { - this.graph.model.setGeometry(group, new Geometry()); + this.getModel().setGeometry(group, new Geometry()); } // Adds the group into the parent @@ -84,7 +117,7 @@ class GraphGrouping { // Resizes the group this.cellsResized(new CellArray(group), [bounds], false); - this.graph.fireEvent( + this.fireEvent( new EventObject( InternalEvent.GROUP_CELLS, 'group', @@ -96,7 +129,7 @@ class GraphGrouping { ) ); } finally { - this.graph.model.endUpdate(); + this.getModel().endUpdate(); } } return group; @@ -125,10 +158,11 @@ class GraphGrouping { /** * Returns the bounds to be used for the given group and children. */ - getBoundsForGroup(group: Cell, - children: CellArray, - border: number | null): Rectangle | null { - + getBoundsForGroup( + group: Cell, + children: CellArray, + border: number | null + ): Rectangle | null { const result = this.getBoundingBoxFromGeometry(children, true); if (result != null) { if (this.isSwimlane(group)) { @@ -193,7 +227,7 @@ class GraphGrouping { } if (cells != null && cells.length > 0) { - this.graph.model.beginUpdate(); + this.getModel().beginUpdate(); try { for (let i = 0; i < cells.length; i += 1) { let children = cells[i].getChildren(); @@ -208,7 +242,7 @@ class GraphGrouping { // Fix relative child cells for (const child of children) { - const state = this.graph.view.getState(child); + const state = this.getView().getState(child); let geo = child.getGeometry(); if (state != null && geo != null && geo.relative) { @@ -217,18 +251,16 @@ class GraphGrouping { geo.y = (state.origin).y; geo.relative = false; - this.graph.model.setGeometry(child, geo); + this.getModel().setGeometry(child, geo); } } } } this.removeCellsAfterUngroup(cells); - this.graph.fireEvent( - new EventObject(InternalEvent.UNGROUP_CELLS, 'cells', cells) - ); + this.fireEvent(new EventObject(InternalEvent.UNGROUP_CELLS, 'cells', cells)); } finally { - this.graph.model.endUpdate(); + this.getModel().endUpdate(); } } return result; @@ -272,7 +304,7 @@ class GraphGrouping { if (cells == null) { cells = this.getSelectionCells(); } - this.graph.model.beginUpdate(); + this.getModel().beginUpdate(); try { const parent = this.getDefaultParent(); const index = parent.getChildCount(); @@ -282,7 +314,7 @@ class GraphGrouping { new EventObject(InternalEvent.REMOVE_CELLS_FROM_PARENT, 'cells', cells) ); } finally { - this.graph.model.endUpdate(); + this.getModel().endUpdate(); } return cells; } @@ -317,7 +349,7 @@ class GraphGrouping { leftBorder: number = 0 ): CellArray { if (cells == null) { - cells = this.graph.selection.getSelectionCells(); + cells = this.getSelectionCells(); } border = border != null ? border : 0; @@ -327,7 +359,7 @@ class GraphGrouping { bottomBorder = bottomBorder != null ? bottomBorder : 0; leftBorder = leftBorder != null ? leftBorder : 0; - this.graph.batchUpdate(() => { + this.batchUpdate(() => { for (let i = cells.length - 1; i >= 0; i--) { let geo = cells[i].getGeometry(); if (geo == null) { @@ -348,32 +380,18 @@ class GraphGrouping { geo = geo.clone(); if (moveGroup) { - geo.x = Math.round( - geo.x + bounds.x - border - size.x - leftBorder - ); - geo.y = Math.round( - geo.y + bounds.y - border - size.y - topBorder - ); + geo.x = Math.round(geo.x + bounds.x - border - size.x - leftBorder); + geo.y = Math.round(geo.y + bounds.y - border - size.y - topBorder); } geo.width = Math.round( - bounds.width + - 2 * border + - size.x + - leftBorder + - rightBorder + - size.width + bounds.width + 2 * border + size.x + leftBorder + rightBorder + size.width ); geo.height = Math.round( - bounds.height + - 2 * border + - size.y + - topBorder + - bottomBorder + - size.height + bounds.height + 2 * border + size.y + topBorder + bottomBorder + size.height ); - this.graph.model.setGeometry(cells[i], geo); + this.getModel().setGeometry(cells[i], geo); this.moveCells( children, border + size.x - bounds.x + leftBorder, @@ -402,7 +420,7 @@ class GraphGrouping { cell = cell || this.getSelectionCell(); if (cell != null && this.isValidRoot(cell)) { - this.view.setCurrentRoot(cell); + this.getView().setCurrentRoot(cell); this.clearSelection(); } } @@ -416,30 +434,26 @@ class GraphGrouping { const current = this.getCurrentRoot(); if (current != null) { - let next = current.getParent(); + let next = current.getParent(); // Finds the next valid root in the hierarchy - while ( - next !== root && - !this.isValidRoot(next) && - next.getParent() !== root - ) { + while (next !== root && !this.isValidRoot(next) && next.getParent() !== root) { next = next.getParent(); } // Clears the current root if the new root is // the model's root or one of the layers. if (next === root || next.getParent() === root) { - this.view.setCurrentRoot(null); + this.getView().setCurrentRoot(null); } else { - this.view.setCurrentRoot(next); + this.getView().setCurrentRoot(next); } - const state = this.view.getState(current); + const state = this.getView().getState(current); // Selects the previous root in the graph if (state != null) { - this.selection.setSelectionCell(current); + this.setSelectionCell(current); } } } diff --git a/packages/core/src/view/grouping_ordering/GraphOrder.ts b/packages/core/src/view/grouping_ordering/GraphOrder.ts index 0175873d5..3784896e6 100644 --- a/packages/core/src/view/grouping_ordering/GraphOrder.ts +++ b/packages/core/src/view/grouping_ordering/GraphOrder.ts @@ -1,16 +1,15 @@ -import CellArray from "../cell/datatypes/CellArray"; -import {sortCells} from "../../util/Utils"; -import EventObject from "../event/EventObject"; -import InternalEvent from "../event/InternalEvent"; -import Graph from "../Graph"; +import CellArray from '../cell/datatypes/CellArray'; +import { autoImplement, sortCells } from '../../util/Utils'; +import EventObject from '../event/EventObject'; +import InternalEvent from '../event/InternalEvent'; +import Graph from '../Graph'; +import GraphSelection from '../selection/GraphSelection'; -class GraphOrder { - constructor(graph: Graph) { - this.graph = graph; - } - - graph: Graph; +type PartialGraph = Pick; +type PartialSelection = Pick; +type PartialClass = PartialGraph & PartialSelection; +class GraphOrder extends autoImplement() { /***************************************************************************** * Group: Order *****************************************************************************/ @@ -26,17 +25,22 @@ class GraphOrder { */ orderCells( back: boolean = false, - cells: CellArray = this.graph.selection.getSelectionCells() + cells: CellArray = this.getSelectionCells() ): CellArray { - if (cells == null) { - cells = sortCells(this.graph.selection.getSelectionCells(), true); + cells = sortCells(this.getSelectionCells(), true); } - this.graph.batchUpdate(() => { + this.batchUpdate(() => { this.cellsOrdered(cells, back); - const event = new EventObject(InternalEvent.ORDER_CELLS, 'back', back, 'cells', cells); - this.graph.events.fireEvent(event); + const event = new EventObject( + InternalEvent.ORDER_CELLS, + 'back', + back, + 'cells', + cells + ); + this.fireEvent(event); }); return cells; @@ -49,25 +53,19 @@ class GraphOrder { * @param cells Array of {@link mxCell} whose order should be changed. * @param back Boolean that specifies if the cells should be moved to back. */ - cellsOrdered(cells: CellArray, - back: boolean = false) { - - this.graph.batchUpdate(() => { + cellsOrdered(cells: CellArray, back: boolean = false) { + this.batchUpdate(() => { for (let i = 0; i < cells.length; i += 1) { const parent = cells[i].getParent(); if (back) { - this.graph.model.add(parent, cells[i], i); + this.getModel().add(parent, cells[i], i); } else { - this.graph.model.add( - parent, - cells[i], - parent ? parent.getChildCount() - 1 : 0 - ); + this.getModel().add(parent, cells[i], parent ? parent.getChildCount() - 1 : 0); } } - this.graph.events.fireEvent( + this.fireEvent( new EventObject(InternalEvent.CELLS_ORDERED, 'back', back, 'cells', cells) ); }); diff --git a/packages/core/src/view/image/ImageExport.ts b/packages/core/src/view/image/ImageExport.ts index 5b2a86a8d..57fb94887 100644 --- a/packages/core/src/view/image/ImageExport.ts +++ b/packages/core/src/view/image/ImageExport.ts @@ -75,7 +75,8 @@ class ImageExport { for (let i = 0; i < childCount; i += 1) { const childState = graph.view.getState(state.cell.getChildAt(i)); - this.visitStatesRecursive(childState, canvas, visitor); + + if (childState) this.visitStatesRecursive(childState, canvas, visitor); } } } diff --git a/packages/core/src/view/layout/layout/FastOrganicLayout.ts b/packages/core/src/view/layout/layout/FastOrganicLayout.ts index e428c157b..3ceea4dc0 100644 --- a/packages/core/src/view/layout/layout/FastOrganicLayout.ts +++ b/packages/core/src/view/layout/layout/FastOrganicLayout.ts @@ -4,7 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 * Type definitions from the typed-mxgraph project */ -import mxObjectIdentity from '../../../util/mxObjectIdentity'; +import ObjectIdentity from '../../../util/ObjectIdentity'; import GraphLayout from './GraphLayout'; import Graph from '../../Graph'; import Cell from '../../cell/datatypes/Cell'; @@ -186,8 +186,7 @@ class MxFastOrganicLayout extends GraphLayout { */ isVertexIgnored(vertex: Cell) { return ( - super.isVertexIgnored(vertex) || - this.graph.getConnections(vertex).length === 0 + super.isVertexIgnored(vertex) || this.graph.getConnections(vertex).length === 0 ); } @@ -237,7 +236,7 @@ class MxFastOrganicLayout extends GraphLayout { this.cellLocation[i] = []; // Set up the mapping from array indices to cells - const id = mxObjectIdentity.get(vertex); + const id = ObjectIdentity.get(vertex); this.indices[id] = i; const bounds = this.getVertexBounds(vertex); @@ -283,7 +282,7 @@ class MxFastOrganicLayout extends GraphLayout { } // Looks the cell up in the indices dictionary - const id = mxObjectIdentity.get(cells[j]); + const id = ObjectIdentity.get(cells[j]); const index = this.indices[id]; // Check the connected cell in part of the vertex list to be @@ -309,11 +308,7 @@ class MxFastOrganicLayout extends GraphLayout { } // Main iteration loop - for ( - this.iteration = 0; - this.iteration < this.maxIterations; - this.iteration += 1 - ) { + for (this.iteration = 0; this.iteration < this.maxIterations; this.iteration += 1) { if (!this.allowedToRun) { return; } @@ -391,8 +386,7 @@ class MxFastOrganicLayout extends GraphLayout { // Get the distance of displacement for this node for this // iteration let deltaLength = Math.sqrt( - this.dispX[index] * this.dispX[index] + - this.dispY[index] * this.dispY[index] + this.dispX[index] * this.dispX[index] + this.dispY[index] * this.dispY[index] ); if (deltaLength < 0.001) { @@ -402,12 +396,10 @@ class MxFastOrganicLayout extends GraphLayout { // Scale down by the current temperature if less than the // displacement distance const newXDisp = - (this.dispX[index] / deltaLength) * - Math.min(deltaLength, this.temperature); + (this.dispX[index] / deltaLength) * Math.min(deltaLength, this.temperature); const newYDisp = - (this.dispY[index] / deltaLength) * - Math.min(deltaLength, this.temperature); + (this.dispY[index] / deltaLength) * Math.min(deltaLength, this.temperature); // reset displacements this.dispX[index] = 0; @@ -495,8 +487,7 @@ class MxFastOrganicLayout extends GraphLayout { // Distance between nodes const deltaLength = Math.sqrt(xDelta * xDelta + yDelta * yDelta); - let deltaLengthWithRadius = - deltaLength - this.radius[i] - this.radius[j]; + let deltaLengthWithRadius = deltaLength - this.radius[i] - this.radius[j]; if (deltaLengthWithRadius > this.maxDistanceLimit) { // Ignore vertices too far apart @@ -529,8 +520,7 @@ class MxFastOrganicLayout extends GraphLayout { * fashion to zero. */ reduceTemperature() { - this.temperature = - this.initialTemp * (1.0 - this.iteration / this.maxIterations); + this.temperature = this.initialTemp * (1.0 - this.iteration / this.maxIterations); } } diff --git a/packages/core/src/view/layout/layout/ParallelEdgeLayout.ts b/packages/core/src/view/layout/layout/ParallelEdgeLayout.ts index d11585938..3f294289d 100644 --- a/packages/core/src/view/layout/layout/ParallelEdgeLayout.ts +++ b/packages/core/src/view/layout/layout/ParallelEdgeLayout.ts @@ -7,7 +7,7 @@ import Point from '../../geometry/Point'; import GraphLayout from './GraphLayout'; -import mxObjectIdentity from '../../../util/mxObjectIdentity'; +import ObjectIdentity from '../../../util/ObjectIdentity'; import Graph from '../../Graph'; import CellArray from '../../cell/datatypes/CellArray'; import Cell from '../../cell/datatypes/Cell'; @@ -105,7 +105,7 @@ class ParallelEdgeLayout extends GraphLayout { findParallels(parent: Cell, cells: CellArray) { const lookup = []; - const addCell = cell => { + const addCell = (cell) => { if (!this.isEdgeIgnored(cell)) { const id = this.getEdgeId(cell); @@ -151,8 +151,8 @@ class ParallelEdgeLayout extends GraphLayout { let pts = ''; if (src != null && trg != null) { - src = mxObjectIdentity.get(src); - trg = mxObjectIdentity.get(trg); + src = ObjectIdentity.get(src); + trg = ObjectIdentity.get(trg); if (this.checkOverlap) { const state = this.graph.view.getState(edge); diff --git a/packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts b/packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts index 493a79c72..898a84226 100644 --- a/packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts +++ b/packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts @@ -11,7 +11,7 @@ import HierarchicalEdgeStyle from './HierarchicalEdgeStyle'; import Dictionary from '../../../../util/Dictionary'; import Rectangle from '../../../geometry/Rectangle'; import SwimlaneModel from './model/SwimlaneModel'; -import mxObjectIdentity from '../../../../util/mxObjectIdentity'; +import ObjectIdentity from '../../../../util/ObjectIdentity'; import mxSwimlaneOrdering from './stage/mxSwimlaneOrdering'; import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction'; import CoordinateAssignment from './stage/CoordinateAssignment'; @@ -694,7 +694,7 @@ class SwimlaneLayout extends GraphLayout { cell.getParent() !== this.parent && cell.isVisible() ) { - result[mxObjectIdentity.get(cell)] = cell; + result[ObjectIdentity.get(cell)] = cell; } if (this.traverseAncestors || (cell === this.parent && cell.isVisible())) { @@ -792,7 +792,7 @@ class SwimlaneLayout extends GraphLayout { // Has this vertex been seen before in any traversal // And if the filled vertex set is populated, only // process vertices in that it contains - const vertexID = mxObjectIdentity.get(vertex); + const vertexID = ObjectIdentity.get(vertex); if ( allVertices[vertexID] == null && diff --git a/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts b/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts index 09c22a959..475a6f70d 100644 --- a/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts +++ b/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts @@ -4,65 +4,65 @@ * Updated to ES9 syntax by David Morrissey 2021 * Type definitions from the typed-mxgraph project */ +import CellArray from 'core/view/cell/datatypes/CellArray'; import Cell from '../../../../cell/datatypes/Cell'; -import CellArray from '../../../../cell/datatypes/CellArray'; -class MxGraphAbstractHierarchyCell { +class GraphAbstractHierarchyCell extends Cell { /** * Variable: maxRank * * The maximum rank this cell occupies. Default is -1. */ - maxRank: number = -1; + maxRank = -1; /** * Variable: minRank * * The minimum rank this cell occupies. Default is -1. */ - minRank: number = -1; + minRank = -1; /** * Variable: x * * The x position of this cell for each layer it occupies */ - x: number = null; + x: number[]; /** * Variable: y * * The y position of this cell for each layer it occupies */ - y: number = null; + y: number[]; /** * Variable: width * * The width of this cell. Default is 0. */ - width: number = 0; + width = 0; /** * Variable: height * * The height of this cell. Default is 0. */ - height: number = 0; + height = 0; /** * Variable: nextLayerConnectedCells * * A cached version of the cells this cell connects to on the next layer up */ - nextLayerConnectedCells: CellArray | null = null; + nextLayerConnectedCells: CellArray[] | null = null; /** * Variable: previousLayerConnectedCells * * A cached version of the cells this cell connects to on the next layer down */ - previousLayerConnectedCells: CellArray | null = null; + previousLayerConnectedCells: CellArray[] | null = null; /** * Variable: temp @@ -74,7 +74,7 @@ class MxGraphAbstractHierarchyCell { * be used for hashing the nodes in the model dfs and so hashCode * was created */ - temp: any = null; + temp: number[]; /** * Class: mxGraphAbstractHierarchyCell @@ -86,6 +86,8 @@ class MxGraphAbstractHierarchyCell { * Constructs a new hierarchical layout algorithm. */ constructor() { + super(); + this.x = []; this.y = []; this.temp = []; @@ -96,7 +98,7 @@ class MxGraphAbstractHierarchyCell { * * Returns the cells this cell connects to on the next layer up */ - getNextLayerConnectedCells(layer: number): Cell | null { + getNextLayerConnectedCells(layer: number): CellArray | null { return null; } @@ -105,7 +107,7 @@ class MxGraphAbstractHierarchyCell { * * Returns the cells this cell connects to on the next layer down */ - getPreviousLayerConnectedCells(layer: number): Cell | null { + getPreviousLayerConnectedCells(layer: number): CellArray | null { return null; } @@ -114,7 +116,7 @@ class MxGraphAbstractHierarchyCell { * * Returns whether or not this cell is an edge */ - isEdge(): boolean { + isEdge() { return false; } @@ -123,7 +125,7 @@ class MxGraphAbstractHierarchyCell { * * Returns whether or not this cell is a node */ - isVertex(): boolean { + isVertex() { return false; } @@ -132,7 +134,7 @@ class MxGraphAbstractHierarchyCell { * * Gets the value of temp for the specified layer */ - getGeneralPurposeVariable(layer: number): null | number { + getGeneralPurposeVariable(layer: number): number | null { return null; } @@ -141,16 +143,14 @@ class MxGraphAbstractHierarchyCell { * * Set the value of temp for the specified layer */ - setGeneralPurposeVariable(layer: number, value: number): null | void { - return null; - } + setGeneralPurposeVariable(layer: number, value: number) {} /** * Function: setX * * Set the value of x for the specified layer */ - setX(layer: number, value: number): void { + setX(layer: number, value: number) { if (this.isVertex()) { this.x[0] = value; } else if (this.isEdge()) { @@ -163,7 +163,7 @@ class MxGraphAbstractHierarchyCell { * * Gets the value of x on the specified layer */ - getX(layer: number): number { + getX(layer: number) { if (this.isVertex()) { return this.x[0]; } @@ -178,7 +178,7 @@ class MxGraphAbstractHierarchyCell { * * Set the value of y for the specified layer */ - setY(layer: number, value: number): void { + setY(layer: number, value: number) { if (this.isVertex()) { this.y[0] = value; } else if (this.isEdge()) { @@ -187,4 +187,4 @@ class MxGraphAbstractHierarchyCell { } } -export default MxGraphAbstractHierarchyCell; +export default GraphAbstractHierarchyCell; diff --git a/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts b/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts index dbf621808..63fefb624 100644 --- a/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts +++ b/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts @@ -5,7 +5,7 @@ * Type definitions from the typed-mxgraph project */ import GraphAbstractHierarchyCell from './GraphAbstractHierarchyCell'; -import mxObjectIdentity from '../../../../../util/mxObjectIdentity'; +import ObjectIdentity from '../../../../../util/ObjectIdentity'; import CellArray from '../../../../cell/datatypes/CellArray'; import Cell from '../../../../cell/datatypes/Cell'; @@ -23,7 +23,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * * The object identities of the wrapped cells */ - ids = null; + ids: string[]; /** * Variable: source @@ -61,12 +61,12 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * edges - a list of real graph edges this abstraction represents */ constructor(edges: CellArray) { - super(edges); + super(); this.edges = edges; this.ids = []; for (let i = 0; i < edges.length; i += 1) { - this.ids.push(mxObjectIdentity.get(edges[i])); + this.ids.push(ObjectIdentity.get(edges[i])); } } @@ -75,7 +75,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * * Inverts the direction of this internal edge(s) */ - invert(layer) { + invert() { const temp = this.source; this.source = this.target; this.target = temp; @@ -87,15 +87,15 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * * Returns the cells this cell connects to on the next layer up */ - getNextLayerConnectedCells(layer: Cell): CellArray { + getNextLayerConnectedCells(layer: number) { if (this.nextLayerConnectedCells == null) { this.nextLayerConnectedCells = []; for (let i = 0; i < this.temp.length; i += 1) { - this.nextLayerConnectedCells[i] = []; + this.nextLayerConnectedCells[i] = new CellArray(); if (i === this.temp.length - 1) { - this.nextLayerConnectedCells[i].push(this.source); + this.nextLayerConnectedCells[i].push(this.source as Cell); } else { this.nextLayerConnectedCells[i].push(this); } @@ -109,15 +109,15 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * * Returns the cells this cell connects to on the next layer down */ - getPreviousLayerConnectedCells(layer: Cell): CellArray { + getPreviousLayerConnectedCells(layer: number) { if (this.previousLayerConnectedCells == null) { this.previousLayerConnectedCells = []; for (let i = 0; i < this.temp.length; i += 1) { - this.previousLayerConnectedCells[i] = []; + this.previousLayerConnectedCells[i] = new CellArray(); if (i === 0) { - this.previousLayerConnectedCells[i].push(this.target); + this.previousLayerConnectedCells[i].push(this.target as Cell); } else { this.previousLayerConnectedCells[i].push(this); } @@ -131,7 +131,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * * Returns true. */ - isEdge(): boolean { + isEdge() { return true; } @@ -140,7 +140,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * * Gets the value of temp for the specified layer */ - getGeneralPurposeVariable(layer: number): any { + getGeneralPurposeVariable(layer: number) { return this.temp[layer - this.minRank - 1]; } @@ -149,7 +149,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * * Set the value of temp for the specified layer */ - setGeneralPurposeVariable(layer: number, value: any): void { + setGeneralPurposeVariable(layer: number, value: number) { this.temp[layer - this.minRank - 1] = value; } @@ -158,8 +158,8 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell { * * Gets the first core edge associated with this wrapper */ - getCoreCell(): Cell | null { - if (this.edges != null && this.edges.length > 0) { + getCoreCell() { + if (this.edges.length > 0) { return this.edges[0]; } return null; diff --git a/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts b/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts index 970f467ce..81d057c26 100644 --- a/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts +++ b/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts @@ -5,7 +5,7 @@ * Type definitions from the typed-mxgraph project */ import MxGraphAbstractHierarchyCell from './GraphAbstractHierarchyCell'; -import mxObjectIdentity from '../../../../../util/mxObjectIdentity'; +import ObjectIdentity from '../../../../../util/ObjectIdentity'; import CellArray from '../../../../cell/datatypes/CellArray'; import Cell from '../../../../cell/datatypes/Cell'; @@ -26,9 +26,9 @@ class GraphHierarchyNode extends MxGraphAbstractHierarchyCell { constructor(cell) { super(cell); this.cell = cell; - this.id = mxObjectIdentity.get(cell); - this.connectsAsTarget: CellArray = []; - this.connectsAsSource: CellArray = []; + this.id = ObjectIdentity.get(cell); + this.connectsAsTarget = []; + this.connectsAsSource = []; } /** diff --git a/packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js b/packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js index 15f818b19..fdf01fd51 100644 --- a/packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js +++ b/packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js @@ -9,7 +9,7 @@ import { DIRECTION_NORTH } from '../../../../util/Constants'; import HierarchicalEdgeStyle from './HierarchicalEdgeStyle'; import Dictionary from '../../../../util/Dictionary'; import GraphHierarchyModel from './model/GraphHierarchyModel'; -import mxObjectIdentity from '../../../../util/mxObjectIdentity'; +import ObjectIdentity from '../../../../util/ObjectIdentity'; import MinimumCycleRemover from './stage/MinimumCycleRemover'; import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction'; import CoordinateAssignment from './stage/CoordinateAssignment'; @@ -249,8 +249,7 @@ class mxHierarchicalLayout extends GraphLayout { const rootsCopy = []; for (let i = 0; i < roots.length; i += 1) { - const ancestor = - parent != null ? model.isAncestor(parent, roots[i]) : true; + const ancestor = parent != null ? model.isAncestor(parent, roots[i]) : true; if (ancestor && roots[i].isVertex()) { rootsCopy.push(roots[i]); @@ -265,11 +264,7 @@ class mxHierarchicalLayout extends GraphLayout { this.run(parent); if (this.resizeParent && !parent.isCollapsed()) { - this.graph.updateGroupBounds( - [parent], - this.parentBorder, - this.moveParent - ); + this.graph.updateGroupBounds([parent], this.parentBorder, this.moveParent); } // Maintaining parent location @@ -574,7 +569,7 @@ class mxHierarchicalLayout extends GraphLayout { const { model } = this.graph; if (cell.isVertex() && cell !== this.parent && cell.isVisible()) { - result[mxObjectIdentity.get(cell)] = cell; + result[ObjectIdentity.get(cell)] = cell; } if (this.traverseAncestors || (cell === this.parent && cell.isVisible())) { @@ -672,7 +667,7 @@ class mxHierarchicalLayout extends GraphLayout { // Has this vertex been seen before in any traversal // And if the filled vertex set is populated, only // process vertices in that it contains - const vertexID = mxObjectIdentity.get(vertex); + const vertexID = ObjectIdentity.get(vertex); if ( allVertices[vertexID] == null && diff --git a/packages/core/src/view/ports/GraphPorts.ts b/packages/core/src/view/ports/GraphPorts.ts index 6d49ac222..4d5175aa1 100644 --- a/packages/core/src/view/ports/GraphPorts.ts +++ b/packages/core/src/view/ports/GraphPorts.ts @@ -1,13 +1,6 @@ import Cell from '../cell/datatypes/Cell'; -import Graph from '../Graph'; class GraphPorts { - constructor(graph: Graph) { - this.graph = graph; - } - - graph: Graph; - /** * Specifies if ports are enabled. This is used in {@link cellConnected} to update * the respective style. diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js index 3e9c2a737..60c62bb79 100644 --- a/packages/core/webpack.config.js +++ b/packages/core/webpack.config.js @@ -1,6 +1,6 @@ const path = require('path'); const webpack = require('webpack'); -const {merge} = require('webpack-merge'); +const { merge } = require('webpack-merge'); const base = require('../../webpack.config'); const CircularDependencyPlugin = require('circular-dependency-plugin'); @@ -8,20 +8,20 @@ module.exports = merge(base, { entry: './src/index.ts', resolve: { alias: { - '@': path.resolve(__dirname, 'src') - } + '@': path.resolve(__dirname, 'src'), + }, }, output: { filename: 'mxgraph.js', path: path.resolve(__dirname, 'dist'), library: 'mxgraph', - libraryTarget: 'umd' + libraryTarget: 'umd', }, module: { rules: [ { test: /\.(sa|sc|c)ss$/, - use: ['style-loader', 'css-loader'] + use: ['style-loader', 'css-loader'], }, { test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, @@ -30,8 +30,8 @@ module.exports = merge(base, { name: 'images/[hash].[ext]', limit: 10000, }, - } - ] + }, + ], }, plugins: [ new webpack.optimize.LimitChunkCountPlugin({ @@ -49,6 +49,6 @@ module.exports = merge(base, { allowAsyncCycles: false, // set the current working directory for displaying module paths cwd: process.cwd(), - }) - ] -}); \ No newline at end of file + }), + ], +}); diff --git a/packages/html/stories/Anchors.stories.js b/packages/html/stories/Anchors.stories.js index 5e2954a81..1d8b3a800 100644 --- a/packages/html/stories/Anchors.stories.js +++ b/packages/html/stories/Anchors.stories.js @@ -8,22 +8,22 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxEvent, - mxRubberband, - mxConnectionHandler, - mxConnectionConstraint, - mxGeometry, - mxPolyline, - mxPoint, - mxCellState + Graph, + InternalEvent, + Rubberband, + ConnectionHandler, + ConnectionConstraint, + Geometry, + Polyline, + Point, + CellState, } = mxgraph; const container = document.createElement('div'); @@ -34,22 +34,17 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); - class MyCustomConnectionHandler extends mxConnectionHandler { + class MyCustomConnectionHandler extends ConnectionHandler { // Enables connect preview for the default edge style createEdgeState(me) { const edge = graph.createEdge(null, null, null, null, null); - return new mxCellState( - this.graph.view, - edge, - this.graph.getCellStyle(edge) - ); + return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge)); } } - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { getAllConnectionConstraints(terminal, source) { // Overridden to define per-shape connection points if (terminal != null && terminal.shape != null) { @@ -69,38 +64,36 @@ const Template = ({ label, ...args }) => { } } - class MyCustomGeometryClass extends mxGeometry { + class MyCustomGeometryClass extends Geometry { // Defines the default constraints for the vertices constraints = [ - new mxConnectionConstraint(new mxPoint(0.25, 0), true), - new mxConnectionConstraint(new mxPoint(0.5, 0), true), - new mxConnectionConstraint(new mxPoint(0.75, 0), true), - new mxConnectionConstraint(new mxPoint(0, 0.25), true), - new mxConnectionConstraint(new mxPoint(0, 0.5), true), - new mxConnectionConstraint(new mxPoint(0, 0.75), true), - new mxConnectionConstraint(new mxPoint(1, 0.25), true), - new mxConnectionConstraint(new mxPoint(1, 0.5), true), - new mxConnectionConstraint(new mxPoint(1, 0.75), true), - new mxConnectionConstraint(new mxPoint(0.25, 1), true), - new mxConnectionConstraint(new mxPoint(0.5, 1), true), - new mxConnectionConstraint(new mxPoint(0.75, 1), true), + new ConnectionConstraint(new Point(0.25, 0), true), + new ConnectionConstraint(new Point(0.5, 0), true), + new ConnectionConstraint(new Point(0.75, 0), true), + new ConnectionConstraint(new Point(0, 0.25), true), + new ConnectionConstraint(new Point(0, 0.5), true), + new ConnectionConstraint(new Point(0, 0.75), true), + new ConnectionConstraint(new Point(1, 0.25), true), + new ConnectionConstraint(new Point(1, 0.5), true), + new ConnectionConstraint(new Point(1, 0.75), true), + new ConnectionConstraint(new Point(0.25, 1), true), + new ConnectionConstraint(new Point(0.5, 1), true), + new ConnectionConstraint(new Point(0.75, 1), true), ]; } // Edges have no connection points - mxPolyline.prototype.constraints = null; + Polyline.prototype.constraints = null; // Creates the graph inside the given container const graph = new MyCustomGraph(container); graph.setConnectable(true); // Specifies the default edge style - graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = - 'orthogonalEdgeStyle'; + graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle'; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -131,6 +124,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Animation.stories.js b/packages/html/stories/Animation.stories.js index 1bbd44769..e2f6ca668 100644 --- a/packages/html/stories/Animation.stories.js +++ b/packages/html/stories/Animation.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -7,15 +7,12 @@ import './css/animation.css'; export default { title: 'Effects/Animation', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxPoint - } = mxgraph; + const { Graph, Point } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -25,7 +22,7 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setEnabled(false); const parent = graph.getDefaultParent(); @@ -67,26 +64,18 @@ const Template = ({ label, ...args }) => { style: 'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;', }); - e1.geometry.points = [new mxPoint(230, 50)]; + e1.geometry.points = [new Point(230, 50)]; graph.orderCells(true, [e1]); }); // Adds animation to edge shape and makes "pipe" visible const state = graph.view.getState(e1); - state.shape.node - .getElementsByTagName('path')[0] - .removeAttribute('visibility'); - state.shape.node - .getElementsByTagName('path')[0] - .setAttribute('stroke-width', '6'); - state.shape.node - .getElementsByTagName('path')[0] - .setAttribute('stroke', 'lightGray'); - state.shape.node - .getElementsByTagName('path')[1] - .setAttribute('class', 'flow'); + state.shape.node.getElementsByTagName('path')[0].removeAttribute('visibility'); + state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke-width', '6'); + state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke', 'lightGray'); + state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'flow'); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/AutoLayout.stories.js b/packages/html/stories/AutoLayout.stories.js index 9bdec9ca9..615ee2be0 100644 --- a/packages/html/stories/AutoLayout.stories.js +++ b/packages/html/stories/AutoLayout.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,32 +8,32 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRubberband, - mxEvent, - mxUtils, - mxCellRenderer, - mxEdgeHandler, + Graph, + Rubberband, + InternalEvent, + utils, + CellRenderer, + EdgeHandler, mxHierarchicalLayout, - mxConstants, - mxCellOverlay, - mxImage, + Constants, + CellOverlay, + ImageBox, mxClient, mxMorphing, - mxEventObject, - mxEventUtils - } = mxgraph; + EventObject, + EventUtils, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -43,41 +43,36 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); - class MyCustomCellRenderer extends mxCellRenderer { + class MyCustomCellRenderer extends CellRenderer { installCellOverlayListeners(state, overlay, shape) { super.installCellOverlayListeners(state, overlay, shape); - mxEvent.addListener( + InternalEvent.addListener( shape.node, mxClient.IS_POINTER ? 'pointerdown' : 'mousedown', - evt => { - overlay.fireEvent( - new mxEventObject('pointerdown', 'event', evt, 'state', state) - ); + (evt) => { + overlay.fireEvent(new EventObject('pointerdown', 'event', evt, 'state', state)); } ); if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) { - mxEvent.addListener(shape.node, 'touchstart', evt => { - overlay.fireEvent( - new mxEventObject('pointerdown', 'event', evt, 'state', state) - ); + InternalEvent.addListener(shape.node, 'touchstart', (evt) => { + overlay.fireEvent(new EventObject('pointerdown', 'event', evt, 'state', state)); }); } } } - class MyCustomEdgeHandler extends mxEdgeHandler { + class MyCustomEdgeHandler extends EdgeHandler { connect(edge, terminal, isSource, isClone, me) { super.connect(edge, terminal, isSource, isClone, me); executeLayout(); } } - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { createEdgeHandler(state, edgeStyle) { return new MyCustomEdgeHandler(state, edgeStyle); } @@ -96,14 +91,13 @@ const Template = ({ label, ...args }) => { graph.view.setTranslate(20, 20); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). const parent = graph.getDefaultParent(); - const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST); + const layout = new mxHierarchicalLayout(graph, Constants.DIRECTION_WEST); let v1; const executeLayout = (change, post) => { @@ -118,7 +112,7 @@ const Template = ({ label, ...args }) => { } finally { // New API for animating graph layout results asynchronously const morph = new mxMorphing(graph); - morph.addListener(mxEvent.DONE, () => { + morph.addListener(InternalEvent.DONE, () => { graph.getModel().endUpdate(); if (post != null) { post(); @@ -128,16 +122,16 @@ const Template = ({ label, ...args }) => { } }; - const addOverlay = cell => { + const addOverlay = (cell) => { // Creates a new overlay with an image and a tooltip - const overlay = new mxCellOverlay( - new mxImage('images/add.png', 24, 24), + const overlay = new CellOverlay( + new ImageBox('images/add.png', 24, 24), 'Add outgoing' ); overlay.cursor = 'hand'; // Installs a handler for clicks on the overlay - overlay.addListener(mxEvent.CLICK, (sender, evt2) => { + overlay.addListener(InternalEvent.CLICK, (sender, evt2) => { graph.clearSelection(); const geo = graph.getCellGeometry(cell); @@ -173,15 +167,15 @@ const Template = ({ label, ...args }) => { graph.popupMenuHandler.hideMenu(); graph.stopEditing(false); - const pt = mxUtils.convertPoint( + const pt = utils.convertPoint( graph.container, - mxEventUtils.getClientX(evt2), - mxEventUtils.getClientY(evt2) + EventUtils.getClientX(evt2), + EventUtils.getClientY(evt2) ); graph.connectionHandler.start(state, pt.x, pt.y); graph.isMouseDown = true; - graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt2); - mxEvent.consume(evt2); + graph.isMouseTrigger = EventUtils.isMouseEvent(evt2); + InternalEvent.consume(evt2); }); // Sets the overlay for the cell in the graph @@ -199,16 +193,16 @@ const Template = ({ label, ...args }) => { addOverlay(v1); }); - graph.resizeCell = function() { - mxGraph.prototype.resizeCell.apply(this, arguments); + graph.resizeCell = function () { + Graph.prototype.resizeCell.apply(this, arguments); executeLayout(); }; - graph.connectionHandler.addListener(mxEvent.CONNECT, function() { + graph.connectionHandler.addListener(InternalEvent.CONNECT, function () { executeLayout(); }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Boundary.stories.js b/packages/html/stories/Boundary.stories.js index 2cbbd9097..ac5e6f08c 100644 --- a/packages/html/stories/Boundary.stories.js +++ b/packages/html/stories/Boundary.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,24 +8,17 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxEvent, - mxRubberband, - mxPoint, - mxGraphHandler, - mxUtils - } = mxgraph; + const { Graph, InternalEvent, Rubberband, Point, GraphHandler, utils } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -36,10 +29,9 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Disables the built-in context menu - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { // Enables moving of relative children isCellLocked(cell) { return false; @@ -94,7 +86,7 @@ const Template = ({ label, ...args }) => { y = y > 0.5 ? 1 : 0; } - return new mxPoint(x, y); + return new Point(x, y); } } } @@ -122,7 +114,7 @@ const Template = ({ label, ...args }) => { this.model.setGeometry(cell, geo); } } else { - mxGraph.prototype.translateCell.apply(this, arguments); + Graph.prototype.translateCell.apply(this, arguments); } } } @@ -142,29 +134,19 @@ const Template = ({ label, ...args }) => { graph.getStylesheet().putDefaultVertexStyle(style); // Replaces move preview for relative children - graph.graphHandler.getDelta = function(me) { - const point = mxUtils.convertPoint( - this.graph.container, - me.getX(), - me.getY() - ); - let delta = new mxPoint(point.x - this.first.x, point.y - this.first.y); + graph.graphHandler.getDelta = function (me) { + const point = utils.convertPoint(this.graph.container, me.getX(), me.getY()); + let delta = new Point(point.x - this.first.x, point.y - this.first.y); - if ( - this.cells != null && - this.cells.length > 0 && - this.cells[0] != null - ) { + if (this.cells != null && this.cells.length > 0 && this.cells[0] != null) { const state = this.graph.view.getState(this.cells[0]); const rel = graph.getRelativePosition(state, delta.x, delta.y); if (rel != null) { - const pstate = this.graph.view.getState( - state.cell.getParent() - ); + const pstate = this.graph.view.getState(state.cell.getParent()); if (pstate != null) { - delta = new mxPoint( + delta = new Point( pstate.x + pstate.width * rel.x - state.getCenterX(), pstate.y + pstate.height * rel.y - state.getCenterY() ); @@ -176,24 +158,16 @@ const Template = ({ label, ...args }) => { }; // Relative children cannot be removed from parent - graph.graphHandler.shouldRemoveCellsFromParent = function( - parent, - cells, - evt - ) { + graph.graphHandler.shouldRemoveCellsFromParent = function (parent, cells, evt) { return ( cells.length === 0 && !cells[0].geometry.relative && - mxGraphHandler.prototype.shouldRemoveCellsFromParent.apply( - this, - arguments - ) + GraphHandler.prototype.shouldRemoveCellsFromParent.apply(this, arguments) ); }; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -215,7 +189,7 @@ const Template = ({ label, ...args }) => { size: [20, 20], style: 'fontSize=9;shape=ellipse;resizable=0;', }); - v2.geometry.offset = new mxPoint(-10, -10); + v2.geometry.offset = new Point(-10, -10); v2.geometry.relative = true; const v3 = graph.insertVertex({ @@ -225,11 +199,11 @@ const Template = ({ label, ...args }) => { size: [20, 20], style: 'fontSize=9;shape=ellipse;resizable=0;', }); - v3.geometry.offset = new mxPoint(-10, -10); + v3.geometry.offset = new Point(-10, -10); v3.geometry.relative = true; }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Clipboard.stories.js b/packages/html/stories/Clipboard.stories.js index a1a4792b0..0f5591d47 100644 --- a/packages/html/stories/Clipboard.stories.js +++ b/packages/html/stories/Clipboard.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,28 +8,28 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxEvent, - mxRubberband, + Graph, + InternalEvent, + Rubberband, mxClipboard, - mxUtils, - mxEventUtils, + utils, + EventUtils, mxClient, mxCodec, - mxGraphModel, - mxStringUtils - } = mxgraph; + GraphModel, + mxStringUtils, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -40,28 +40,27 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Disables the built-in context menu - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Creates the graph inside the given this.el - const graph = new mxGraph(container); + const graph = new Graph(container); // Public helper method for shared clipboard. - mxClipboard.cellsToString = function(cells) { + mxClipboard.cellsToString = function (cells) { const codec = new mxCodec(); - const model = new mxGraphModel(); + const model = new GraphModel(); const parent = model.getRoot().getChildAt(0); for (let i = 0; i < cells.length; i++) { model.add(parent, cells[i]); } - return mxUtils.getXml(codec.encode(model)); + return utils.getXml(codec.encode(model)); }; // Focused but invisible textarea during control or meta key events const textInput = document.createElement('textarea'); - mxUtils.setOpacity(textInput, 0); + utils.setOpacity(textInput, 0); textInput.style.width = '1px'; textInput.style.height = '1px'; let restoreFocus = false; @@ -74,9 +73,9 @@ const Template = ({ label, ...args }) => { textInput.value = ' '; // Shows a textare when control/cmd is pressed to handle native clipboard actions - mxEvent.addListener(document, 'keydown', function(evt) { + InternalEvent.addListener(document, 'keydown', function (evt) { // No dialog visible - const source = mxEventUtils.getSource(evt); + const source = EventUtils.getSource(evt); if ( graph.isEnabled() && @@ -107,11 +106,11 @@ const Template = ({ label, ...args }) => { }); // Restores focus on graph this.el and removes text input from DOM - mxEvent.addListener(document, 'keyup', function(evt) { + InternalEvent.addListener(document, 'keyup', function (evt) { if ( restoreFocus && (evt.keyCode === 224 /* FF */ || - evt.keyCode === 17 /* Control */ || + evt.keyCode === 17 /* Control */ || evt.keyCode === 91 || evt.keyCode === 93) /* Meta */ ) { @@ -126,7 +125,7 @@ const Template = ({ label, ...args }) => { }); // Inserts the XML for the given cells into the text input for copy - const copyCells = function(graph, cells) { + const copyCells = function (graph, cells) { if (cells.length > 0) { const clones = graph.cloneCells(cells); @@ -153,48 +152,38 @@ const Template = ({ label, ...args }) => { }; // Handles copy event by putting XML for current selection into text input - mxEvent.addListener( - textInput, - 'copy', - (evt) => { - if (graph.isEnabled() && !graph.isSelectionEmpty()) { - copyCells( - graph, - mxUtils.sortCells( - graph.model.getTopmostCells(graph.getSelectionCells()) - ) - ); - dx = 0; - dy = 0; - } + InternalEvent.addListener(textInput, 'copy', (evt) => { + if (graph.isEnabled() && !graph.isSelectionEmpty()) { + copyCells( + graph, + utils.sortCells(graph.model.getTopmostCells(graph.getSelectionCells())) + ); + dx = 0; + dy = 0; } - ); + }); // Handles cut event by removing cells putting XML into text input - mxEvent.addListener( - textInput, - 'cut', - (evt) => { - if (graph.isEnabled() && !graph.isSelectionEmpty()) { - copyCells(graph, graph.removeCells()); - dx = -gs; - dy = -gs; - } + InternalEvent.addListener(textInput, 'cut', (evt) => { + if (graph.isEnabled() && !graph.isSelectionEmpty()) { + copyCells(graph, graph.removeCells()); + dx = -gs; + dy = -gs; } - ); + }); // Merges XML into existing graph and layers - const importXml = function(xml, dx, dy) { + const importXml = function (xml, dx, dy) { dx = dx != null ? dx : 0; dy = dy != null ? dy : 0; let cells = []; try { - const doc = mxUtils.parseXml(xml); + const doc = utils.parseXml(xml); const node = doc.documentElement; if (node != null) { - const model = new mxGraphModel(); + const model = new GraphModel(); const codec = new mxCodec(node.ownerDocument); codec.decode(node, model); @@ -217,18 +206,11 @@ const Template = ({ label, ...args }) => { if (!graph.isCellLocked(target)) { const children = parent.getChildren(); - cells = cells.concat( - graph.importCells(children, dx, dy, target) - ); + cells = cells.concat(graph.importCells(children, dx, dy, target)); } } else { // Delta is non cascading, needs separate move for layers - parent = graph.importCells( - [parent], - 0, - 0, - graph.model.getRoot() - )[0]; + parent = graph.importCells([parent], 0, 0, graph.model.getRoot())[0]; const children = parent.getChildren(); graph.moveCells(children, dx, dy); cells = cells.concat(children); @@ -247,12 +229,10 @@ const Template = ({ label, ...args }) => { }; // Parses and inserts XML into graph - const pasteText = function(text) { + const pasteText = function (text) { const xml = mxStringUtils.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; + const x = graph.container.scrollLeft / graph.view.scale - graph.view.translate.x; + const y = graph.container.scrollTop / graph.view.scale - graph.view.translate.y; if (xml.length > 0) { if (lastPaste !== xml) { @@ -273,23 +253,17 @@ const Template = ({ label, ...args }) => { }; // Function to fetch text from paste events - const extractGraphModelFromEvent = function(evt) { + const extractGraphModelFromEvent = function (evt) { let data = null; if (evt != null) { - const provider = - evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData; + const provider = evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData; if (provider != null) { data = - provider.types.indexOf('text/html') >= 0 - ? provider.getData('text/html') - : null; + provider.types.indexOf('text/html') >= 0 ? provider.getData('text/html') : null; - if ( - provider.types.indexOf('text/plain') - && (data == null || data.length === 0) - ) { + if (provider.types.indexOf('text/plain') && (data == null || data.length === 0)) { data = provider.getData('text/plain'); } } @@ -299,7 +273,7 @@ const Template = ({ label, ...args }) => { }; // Handles paste event by parsing and inserting XML - mxEvent.addListener(textInput, 'paste', function(evt) { + InternalEvent.addListener(textInput, 'paste', function (evt) { // Clears existing contents before paste - should not be needed // because all text is selected, but doesn't hurt since the // actual pasting of the new text is delayed in all cases. @@ -312,12 +286,9 @@ const Template = ({ label, ...args }) => { pasteText(xml); } else { // Timeout for new value to appear - window.setTimeout( - () => { - pasteText(textInput.value); - }, - 0 - ); + window.setTimeout(() => { + pasteText(textInput.value); + }, 0); } } @@ -325,8 +296,7 @@ const Template = ({ label, ...args }) => { }); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -350,6 +320,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Collapse.stories.js b/packages/html/stories/Collapse.stories.js index c26885f37..02ec2d3d6 100644 --- a/packages/html/stories/Collapse.stories.js +++ b/packages/html/stories/Collapse.stories.js @@ -1,19 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Layouts/Collapse', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRectangle - } = mxgraph; + const { Graph, Rectangle } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -23,10 +20,10 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - const graph = new mxGraph(container); + const graph = new Graph(container); const parent = graph.getDefaultParent(); - const getStyle = function() { + const getStyle = function () { // Extends Transactions.getStyle to show an image when collapsed // TODO cannot use super without a parent class // let style = super.getStyle(); @@ -37,7 +34,7 @@ const Template = ({ label, ...args }) => { `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`; } return style; - } + }; graph.batchUpdate(() => { const v1 = graph.insertVertex({ @@ -47,7 +44,7 @@ const Template = ({ label, ...args }) => { size: [200, 200], style: 'shape=swimlane;startSize=20;', }); - v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70); + v1.geometry.alternateBounds = new Rectangle(0, 0, 110, 70); v1.getStyle = getStyle; const v11 = graph.insertVertex({ @@ -60,6 +57,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Constituent.stories.js b/packages/html/stories/Constituent.stories.js index f753b9dc4..c506ad8e7 100644 --- a/packages/html/stories/Constituent.stories.js +++ b/packages/html/stories/Constituent.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,22 +8,17 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxEvent, - mxGraphHandler, - mxRubberband - } = mxgraph; + const { Graph, InternalEvent, GraphHandler, Rubberband } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -34,9 +29,9 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Disables the built-in context menu - mxEvent.disableContextMenu(container); + InternalEvent.disableContextMenu(container); - class MyCustomGraphHandler extends mxGraphHandler { + class MyCustomGraphHandler extends GraphHandler { /** * Redirects start drag to parent. */ @@ -49,7 +44,7 @@ const Template = ({ label, ...args }) => { } } - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { foldingEnabled = false; recursiveResize = true; @@ -76,7 +71,7 @@ const Template = ({ label, ...args }) => { const graph = new MyCustomGraph(container); // Enables rubberband selection - new mxRubberband(graph); + new Rubberband(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). @@ -99,6 +94,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/ContextIcons.stories.js b/packages/html/stories/ContextIcons.stories.js index c42274bcf..0469cde0a 100644 --- a/packages/html/stories/ContextIcons.stories.js +++ b/packages/html/stories/ContextIcons.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,20 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxEvent, - mxRubberband, - mxEventUtils, - mxUtils, - mxVertexHandler - } = mxgraph; + const { Graph, InternalEvent, Rubberband, EventUtils, utils, VertexHandler } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -31,8 +24,8 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - class mxVertexToolHandler extends mxVertexHandler { - // Defines a subclass for mxVertexHandler that adds a set of clickable + class mxVertexToolHandler extends VertexHandler { + // Defines a subclass for VertexHandler that adds a set of clickable // icons to every selected vertex. domNode = null; @@ -49,8 +42,8 @@ const Template = ({ label, ...args }) => { this.domNode.style.whiteSpace = 'nowrap'; // Workaround for event redirection via image tag in quirks and IE8 - const createImage = src => { - return mxUtils.createImage(src); + const createImage = (src) => { + return utils.createImage(src); }; // Delete @@ -59,13 +52,13 @@ const Template = ({ label, ...args }) => { img.style.cursor = 'pointer'; img.style.width = '16px'; img.style.height = '16px'; - mxEvent.addGestureListeners(img, evt => { + InternalEvent.addGestureListeners(img, (evt) => { // Disables dragging the image - mxEvent.consume(evt); + InternalEvent.consume(evt); }); - mxEvent.addListener(img, 'click', evt => { + InternalEvent.addListener(img, 'click', (evt) => { this.graph.removeCells([this.state.cell]); - mxEvent.consume(evt); + InternalEvent.consume(evt); }); this.domNode.appendChild(img); @@ -76,11 +69,11 @@ const Template = ({ label, ...args }) => { img.style.width = '16px'; img.style.height = '16px'; - mxEvent.addGestureListeners(img, evt => { - this.start(mxEventUtils.getClientX(evt), mxEventUtils.getClientY(evt), 7); + InternalEvent.addGestureListeners(img, (evt) => { + this.start(EventUtils.getClientX(evt), EventUtils.getClientY(evt), 7); this.graph.isMouseDown = true; - this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt); - mxEvent.consume(evt); + this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt); + InternalEvent.consume(evt); }); this.domNode.appendChild(img); @@ -91,16 +84,16 @@ const Template = ({ label, ...args }) => { img.style.width = '16px'; img.style.height = '16px'; - mxEvent.addGestureListeners(img, evt => { + InternalEvent.addGestureListeners(img, (evt) => { this.graph.graphHandler.start( this.state.cell, - mxEventUtils.getClientX(evt), - mxEventUtils.getClientY(evt) + EventUtils.getClientX(evt), + EventUtils.getClientY(evt) ); this.graph.graphHandler.cellWasClicked = true; this.graph.isMouseDown = true; - this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt); - mxEvent.consume(evt); + this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt); + InternalEvent.consume(evt); }); this.domNode.appendChild(img); @@ -111,16 +104,16 @@ const Template = ({ label, ...args }) => { img.style.width = '16px'; img.style.height = '16px'; - mxEvent.addGestureListeners(img, evt => { - const pt = mxUtils.convertPoint( + InternalEvent.addGestureListeners(img, (evt) => { + const pt = utils.convertPoint( this.graph.container, - mxEventUtils.getClientX(evt), - mxEventUtils.getClientY(evt) + EventUtils.getClientX(evt), + EventUtils.getClientY(evt) ); this.graph.connectionHandler.start(this.state, pt.x, pt.y); this.graph.isMouseDown = true; - this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt); - mxEvent.consume(evt); + this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt); + InternalEvent.consume(evt); }); this.domNode.appendChild(img); @@ -151,7 +144,7 @@ const Template = ({ label, ...args }) => { } } - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { createHandler(state) { if (state != null && state.cell.isVertex()) { return new mxVertexToolHandler(state); @@ -170,8 +163,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -199,6 +191,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Control.stories.js b/packages/html/stories/Control.stories.js index 0d98bcc6d..68522d00b 100644 --- a/packages/html/stories/Control.stories.js +++ b/packages/html/stories/Control.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,22 +8,22 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxEvent, - mxRubberband, - mxDomHelpers, - mxImageShape, - mxRectangle, - mxCellRenderer, - mxImage - } = mxgraph; + Graph, + InternalEvent, + Rubberband, + mxDomHelpers, + ImageShape, + Rectangle, + CellRenderer, + ImageBox, + } = maxgraph; const div = document.createElement('div'); @@ -37,13 +37,9 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Specifies the URL and size of the new control - const deleteImage = new mxImage( - '/images/forbidden.png', - 16, - 16 - ); + const deleteImage = new ImageBox('/images/forbidden.png', 16, 16); - class MyCustomCellRenderer extends mxCellRenderer { + class MyCustomCellRenderer extends CellRenderer { createControl(state) { super.createControl(state); @@ -51,20 +47,15 @@ const Template = ({ label, ...args }) => { if (state.cell.isVertex()) { if (state.deleteControl == null) { - const b = new mxRectangle( - 0, - 0, - deleteImage.width, - deleteImage.height - ); - state.deleteControl = new mxImageShape(b, deleteImage.src); + const b = new Rectangle(0, 0, deleteImage.width, deleteImage.height); + state.deleteControl = new ImageShape(b, deleteImage.src); state.deleteControl.dialect = graph.dialect; state.deleteControl.preserveImageAspect = false; - this.initControl(state, state.deleteControl, false, function(evt) { + this.initControl(state, state.deleteControl, false, function (evt) { if (graph.isEnabled()) { graph.removeCells([state.cell]); - mxEvent.consume(evt); + InternalEvent.consume(evt); } }); } @@ -83,18 +74,13 @@ const Template = ({ label, ...args }) => { const s = state.view.scale; return state.cell.isEdge() - ? new mxRectangle( + ? new Rectangle( state.x + state.width / 2 - (w / 2) * s, state.y + state.height / 2 - (h / 2) * s, w * s, h * s ) - : new mxRectangle( - state.x + state.width - w * s, - state.y, - w * s, - h * s - ); + : new Rectangle(state.x + state.width - w * s, state.y, w * s, h * s); } return null; } @@ -129,7 +115,7 @@ const Template = ({ label, ...args }) => { } } - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { createCellRenderer() { return new MyCustomCellRenderer(); } @@ -144,8 +130,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -194,6 +179,6 @@ const Template = ({ label, ...args }) => { ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/DragSource.stories.js b/packages/html/stories/DragSource.stories.js index 366569425..12005e6d0 100644 --- a/packages/html/stories/DragSource.stories.js +++ b/packages/html/stories/DragSource.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,26 +8,26 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxDomUtils, - mxRubberband, - mxDragSource, - mxUtils, - mxGestureUtils, - mxEdgeHandler, - mxGraphHandler, - mxGuide, - mxEventUtils, - mxCell, - mxGeometry - } = mxgraph; + Graph, + mxDomUtils, + Rubberband, + DragSource, + utils, + GestureUtils, + EdgeHandler, + GraphHandler, + Guide, + EventUtils, + Cell, + Geometry, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -36,14 +36,14 @@ const Template = ({ label, ...args }) => { container.style.height = `${args.height}px`; container.style.cursor = 'default'; - class MyCustomGuide extends mxGuide { + class MyCustomGuide extends Guide { isEnabledForEvent(evt) { // Alt disables guides - return !mxEventUtils.isAltDown(evt); + return !EventUtils.isAltDown(evt); } } - class MyCustomGraphHandler extends mxGraphHandler { + class MyCustomGraphHandler extends GraphHandler { // Enables guides guidesEnabled = true; @@ -52,12 +52,12 @@ const Template = ({ label, ...args }) => { } } - class MyCustomEdgeHandler extends mxEdgeHandler { + class MyCustomEdgeHandler extends EdgeHandler { // Enables snapping waypoints to terminals snapToTerminals = true; } - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { createGraphHandler() { return new MyCustomGraphHandler(this); } @@ -89,8 +89,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -121,9 +120,9 @@ const Template = ({ label, ...args }) => { } // Returns the graph under the mouse - const graphF = evt => { - const x = mxEventUtils.getClientX(evt); - const y = mxEventUtils.getClientY(evt); + const graphF = (evt) => { + const x = EventUtils.getClientX(evt); + const y = EventUtils.getClientY(evt); const elt = document.elementFromPoint(x, y); for (const graph of graphs) { @@ -137,7 +136,7 @@ const Template = ({ label, ...args }) => { // Inserts a cell at the given location const funct = (graph, evt, target, x, y) => { - const cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40)); + const cell = new Cell('Test', new Geometry(0, 0, 120, 40)); cell.vertex = true; const cells = graph.importCells([cell], x, y, target); @@ -148,7 +147,7 @@ const Template = ({ label, ...args }) => { }; // Creates a DOM node that acts as the drag source - const img = mxUtils.createImage('images/icons48/gear.png'); + const img = utils.createImage('images/icons48/gear.png'); img.style.width = '48px'; img.style.height = '48px'; container.appendChild(img); @@ -163,7 +162,7 @@ const Template = ({ label, ...args }) => { // if scalePreview (last) argument is true. Dx and dy are null to force // the use of the defaults. Note that dx and dy are only used for the // drag icon but not for the preview. - const ds = mxGestureUtils.makeDraggable( + const ds = GestureUtils.makeDraggable( img, graphF, funct, @@ -181,9 +180,9 @@ const Template = ({ label, ...args }) => { }; // Restores original drag icon while outside of graph - ds.createDragElement = mxDragSource.prototype.createDragElement; + ds.createDragElement = DragSource.prototype.createDragElement; return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Drop.stories.js b/packages/html/stories/Drop.stories.js index b0ff48022..c62602450 100644 --- a/packages/html/stories/Drop.stories.js +++ b/packages/html/stories/Drop.stories.js @@ -1,7 +1,7 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; -import { getXml, parseXml } from '@mxgraph/core/src/util/XmlUtils'; +import { getXml, parseXml } from '@maxgraph/core/util/XmlUtils'; export default { title: 'DnD_CopyPaste/Drop', @@ -9,24 +9,17 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRubberband, - mxUtils, - mxEventUtils, - mxEvent, - mxClient - } = mxgraph; + const { Graph, Rubberband, utils, EventUtils, InternalEvent, mxClient } = maxgraph; const div = document.createElement('div'); div.innerHTML = 'Drag & drop your images below:
'; @@ -42,42 +35,38 @@ const Template = ({ label, ...args }) => { // Checks if the browser is supported const fileSupport = - window.File != null && - window.FileReader != null && - window.FileList != null; + window.File != null && window.FileReader != null && window.FileList != null; if (!fileSupport || !mxClient.isBrowserSupported()) { // Displays an error message if the browser is not supported. - mxUtils.error('Browser is not supported!', 200, false); + utils.error('Browser is not supported!', 200, false); } else { // Disables the built-in context menu - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Creates the graph inside the given this.el - const graph = new mxGraph(container); + const graph = new Graph(container); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); - mxEvent.addListener(container, 'dragover', function(evt) { + InternalEvent.addListener(container, 'dragover', function (evt) { if (graph.isEnabled()) { evt.stopPropagation(); evt.preventDefault(); } }); - mxEvent.addListener(container, 'drop', evt => { + InternalEvent.addListener(container, 'drop', (evt) => { if (graph.isEnabled()) { evt.stopPropagation(); evt.preventDefault(); // Gets drop location point for vertex - const pt = mxUtils.convertPoint( + const pt = utils.convertPoint( graph.container, - mxEventUtils.getClientX(evt), - mxEventUtils.getClientY(evt) + EventUtils.getClientX(evt), + EventUtils.getClientY(evt) ); const tr = graph.view.translate; const { scale } = graph.view; @@ -95,7 +84,7 @@ const Template = ({ label, ...args }) => { } return div; -} +}; function handleDrop(graph, file, x, y) { // Handles each file as a separate insert for simplicity. @@ -104,7 +93,7 @@ function handleDrop(graph, file, x, y) { if (file.type.substring(0, 5) === 'image') { const reader = new FileReader(); - reader.onload = function(e) { + reader.onload = function (e) { // Gets size of image for vertex let data = e.target.result; @@ -144,9 +133,7 @@ function handleDrop(graph, file, x, y) { w = Math.max(1, Math.round(w)); h = Math.max(1, Math.round(h)); - data = `data:image/svg+xml,${btoa( - getXml(svgs[0], '\n') - )}`; + data = `data:image/svg+xml,${btoa(getXml(svgs[0], '\n'))}`; graph.insertVertex({ position: [x, y], size: [w, h], @@ -165,9 +152,7 @@ function handleDrop(graph, file, x, y) { const semi = data.indexOf(';'); if (semi > 0) { - data = - data.substring(0, semi) + - data.substring(data.indexOf(',', semi + 1)); + data = data.substring(0, semi) + data.substring(data.indexOf(',', semi + 1)); } graph.insertVertex({ @@ -185,4 +170,4 @@ function handleDrop(graph, file, x, y) { } } -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/DynamicLoading.stories.js b/packages/html/stories/DynamicLoading.stories.js index 79c743a19..0f3ca8a43 100644 --- a/packages/html/stories/DynamicLoading.stories.js +++ b/packages/html/stories/DynamicLoading.stories.js @@ -1,26 +1,26 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Misc/DynamicLoading', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxText, + Graph, + Text, mxEffects, - mxEvent, - mxConstants, - mxPerimeter, + InternalEvent, + Constants, + Perimeter, mxCodec, - mxUtils, - mxXmlUtils - } = mxgraph; + utils, + mxXmlUtils, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -33,16 +33,16 @@ const Template = ({ label, ...args }) => { let requestId = 0; // Speedup the animation - mxText.prototype.enableBoundingBox = false; + Text.prototype.enableBoundingBox = false; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Disables all built-in interactions graph.setEnabled(false); // Handles clicks on cells - graph.addListener(mxEvent.CLICK, function(sender, evt) { + graph.addListener(InternalEvent.CLICK, function (sender, evt) { const cell = evt.getProperty('cell'); if (cell != null) { @@ -52,8 +52,8 @@ const Template = ({ label, ...args }) => { // Changes the default vertex style in-place const style = graph.getStylesheet().getDefaultVertexStyle(); - style.shape = mxConstants.SHAPE_ELLIPSE; - style.perimiter = mxPerimeter.EllipsePerimeter; + style.shape = Constants.SHAPE_ELLIPSE; + style.perimiter = Perimeter.EllipsePerimeter; style.gradientColor = 'white'; // Gets the default parent for inserting new cells. This @@ -63,18 +63,10 @@ const Template = ({ label, ...args }) => { const cx = graph.container.clientWidth / 2; const cy = graph.container.clientHeight / 2; - const cell = graph.insertVertex( - parent, - '0-0', - '0-0', - cx - 20, - cy - 15, - 60, - 40 - ); + const cell = graph.insertVertex(parent, '0-0', '0-0', cx - 20, cy - 15, 60, 40); // Animates the changes in the graph model - graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt) { + graph.getModel().addListener(InternalEvent.CHANGE, function (sender, evt) { const { changes } = evt.getProperty('edit'); mxEffects.animateChanges(graph, changes); }); @@ -180,7 +172,7 @@ const Template = ({ label, ...args }) => { requestId++; // Creates a local graph with no display - const graph = new mxGraph(); + const graph = new Graph(); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). @@ -206,12 +198,12 @@ const Template = ({ label, ...args }) => { const enc = new mxCodec(); const node = enc.encode(graph.getModel()); - return mxUtils.getXml(node); + return utils.getXml(node); } load(graph, cell); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/DynamicStyle.stories.js b/packages/html/stories/DynamicStyle.stories.js index 78739f51c..c4d192a83 100644 --- a/packages/html/stories/DynamicStyle.stories.js +++ b/packages/html/stories/DynamicStyle.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,18 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxUtils, - mxConstants, - mxRubberband - } = mxgraph; + const { Graph, utils, Constants, Rubberband } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -30,25 +25,24 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Disables moving of edge labels in this examples graph.edgeLabelsMovable = false; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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 // not explicitely changed using mxStyleChange graph.getView().updateStyle = true; - // Overrides mxCell.getStyle to return a specific style + // Overrides Cell.getStyle to return a specific style // for edges that reflects their target terminal (in this case // the strokeColor will be equal to the target's fillColor). - const getStyle = function() { + const getStyle = function () { // TODO super cannot be used here // let style = super.getStyle(); let style; @@ -58,10 +52,7 @@ const Template = ({ label, ...args }) => { if (target != null) { const targetStyle = graph.getCurrentCellStyle(target); - const fill = mxUtils.getValue( - targetStyle, - 'fillColor' - ); + const fill = utils.getValue(targetStyle, 'fillColor'); if (fill != null) { style += `;strokeColor=${fill}`; @@ -120,6 +111,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/DynamicToolbar.stories.js b/packages/html/stories/DynamicToolbar.stories.js index b9b917e70..82e91eb2c 100644 --- a/packages/html/stories/DynamicToolbar.stories.js +++ b/packages/html/stories/DynamicToolbar.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,26 +8,26 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRubberband, - mxConnectionHandler, - mxImage, + Graph, + Rubberband, + ConnectionHandler, + ImageBox, mxToolbar, - mxGraphModel, + GraphModel, mxKeyHandler, - mxCell, - mxGeometry, - mxEvent, - mxUtils, - mxGestureUtils - } = mxgraph; + Cell, + Geometry, + InternalEvent, + utils, + GestureUtils, + } = maxgraph; const div = document.createElement('div'); @@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => { // Defines an icon for creating new connections in the connection handler. // This will automatically disable the highlighting of the source vertex. - mxConnectionHandler.prototype.connectImage = new mxImage( + ConnectionHandler.prototype.connectImage = new ImageBox( '/images/connector.gif', 16, 16 @@ -66,8 +66,8 @@ const Template = ({ label, ...args }) => { // Creates the model and the graph inside the container // using the fastest rendering available on the browser - const model = new mxGraphModel(); - const graph = new mxGraph(container, model); + const model = new GraphModel(); + const graph = new Graph(container, model); // Enables new connections in the graph graph.setConnectable(true); @@ -76,8 +76,7 @@ const Template = ({ label, ...args }) => { // Stops editing on enter or escape keypress const keyHandler = new mxKeyHandler(graph); - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); addVertex('/images/rectangle.gif', 100, 40, ''); addVertex('/images/rounded.gif', 100, 40, 'shape=rounded'); @@ -88,60 +87,60 @@ const Template = ({ label, ...args }) => { addVertex('/images/actor.gif', 30, 40, 'shape=actor'); function addVertex(icon, w, h, style) { - const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style); + const vertex = new Cell(null, new Geometry(0, 0, w, h), style); vertex.setVertex(true); - + const img = addToolbarItem(graph, toolbar, vertex, icon); img.enabled = true; - - graph.getSelectionModel().addListener(mxEvent.CHANGE, () => { + + graph.getSelectionModel().addListener(InternalEvent.CHANGE, () => { const tmp = graph.isSelectionEmpty(); - mxUtils.setOpacity(img, tmp ? 100 : 20); + utils.setOpacity(img, tmp ? 100 : 20); img.enabled = tmp; }); } - + function addToolbarItem(graph, toolbar, prototype, image) { // Function that is executed when the image is dropped on // the graph. The cell argument points to the cell under // the mousepointer if there is one. const funct = (graph, evt, cell, x, y) => { graph.stopEditing(false); - + const vertex = graph.getModel().cloneCell(prototype); vertex.geometry.x = x; vertex.geometry.y = y; - + graph.addCell(vertex); graph.setSelectionCell(vertex); }; - + // Creates the image which is used as the drag icon (preview) const img = toolbar.addMode(null, image, (evt, cell) => { const pt = graph.getPointForEvent(evt); funct(graph, evt, cell, pt.x, pt.y); }); - + // Disables dragging if element is disabled. This is a workaround // for wrong event order in IE. Following is a dummy listener that // is invoked as the last listener in IE. - mxEvent.addListener(img, 'mousedown', evt => { + InternalEvent.addListener(img, 'mousedown', (evt) => { // do nothing }); - + // This listener is always called first before any other listener // in all browsers. - mxEvent.addListener(img, 'mousedown', evt => { + InternalEvent.addListener(img, 'mousedown', (evt) => { if (img.enabled == false) { - mxEvent.consume(evt); + InternalEvent.consume(evt); } }); - - mxGestureUtils.makeDraggable(img, graph, funct); + + GestureUtils.makeDraggable(img, graph, funct); return img; } return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/EdgeTolerance.stories.js b/packages/html/stories/EdgeTolerance.stories.js index a9e9fe935..5960b1be4 100644 --- a/packages/html/stories/EdgeTolerance.stories.js +++ b/packages/html/stories/EdgeTolerance.stories.js @@ -1,19 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Connections/EdgeTolerance', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxUtils - } = mxgraph; + const { Graph, utils } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -23,7 +20,7 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { fireMouseEvent(evtName, me, sender) { // Overrides the mouse event dispatching mechanism to update the // cell which is associated with the event in case the native hit @@ -35,14 +32,14 @@ const Template = ({ label, ...args }) => { // them here. Storing them in the event means the overridden // method doesn't have to do this again. if (me.graphX == null || me.graphY == null) { - const pt = mxUtils.convertPoint(container, me.getX(), me.getY()); + const pt = utils.convertPoint(container, me.getX(), me.getY()); me.graphX = pt.x; me.graphY = pt.y; } const cell = this.getCellAt(me.graphX, me.graphY); - + if (cell?.isEdge()) { me.state = this.view.getState(cell); @@ -62,10 +59,10 @@ const Template = ({ label, ...args }) => { dblClick(evt, cell) { // Overrides double click handling to use the tolerance if (cell == null) { - const pt = mxUtils.convertPoint( + const pt = utils.convertPoint( el, - mxEventUtils.getClientX(evt), - mxEventUtils.getClientY(evt) + EventUtils.getClientX(evt), + EventUtils.getClientY(evt) ); cell = this.getCellAt(pt.x, pt.y); } @@ -110,6 +107,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Editing.stories.js b/packages/html/stories/Editing.stories.js index 9dce97453..379993228 100644 --- a/packages/html/stories/Editing.stories.js +++ b/packages/html/stories/Editing.stories.js @@ -1,23 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Editing/Editing', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxKeyHandler, - mxUtils, - mxDomUtils, - mxCloneUtils, - mxEventUtils - } = mxgraph; + const { Graph, mxKeyHandler, utils, mxDomUtils, CloneUtils, EventUtils } = maxgraph; const div = document.createElement('div'); div.innerHTML = ` @@ -34,7 +27,7 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; div.appendChild(container); - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { getLabel(cell) { // Returns a HTML representation of the cell where the // upper half is the first value, lower half is second @@ -79,10 +72,10 @@ const Template = ({ label, ...args }) => { // a mouse event if (evt != null) { // Finds the relative coordinates inside the cell - const point = mxUtils.convertPoint( + const point = utils.convertPoint( this.container, - mxEventUtils.getClientX(evt), - mxEventUtils.getClientY(evt) + EventUtils.getClientX(evt), + EventUtils.getClientY(evt) ); const state = this.getView().getState(cell); @@ -106,7 +99,7 @@ const Template = ({ label, ...args }) => { if (name != null) { // Clones the user object for correct undo and puts // the new value in the correct field. - const value = mxCloneUtils.clone(cell.value); + const value = CloneUtils.clone(cell.value); value[name] = newValue; newValue = value; @@ -143,6 +136,6 @@ const Template = ({ label, ...args }) => { }); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Events.stories.js b/packages/html/stories/Events.stories.js index e56b67d12..1b19ada23 100644 --- a/packages/html/stories/Events.stories.js +++ b/packages/html/stories/Events.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,28 +8,28 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxEvent, - mxRubberband, - mxConnectionHandler, - mxLayoutManager, + Graph, + InternalEvent, + Rubberband, + ConnectionHandler, + LayoutManager, mxParallelEdgeLayout, - mxImage, + ImageBox, mxKeyHandler, - mxConstants, - mxEdgeStyle - } = mxgraph; + Constants, + EdgeStyle, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -39,15 +39,15 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - class MyCustomConnectionHandler extends mxConnectionHandler { + class MyCustomConnectionHandler extends ConnectionHandler { // Sets the image to be used for creating new connections - connectImage = new mxImage('/images/green-dot.gif', 14, 14); + connectImage = new ImageBox('/images/green-dot.gif', 14, 14); } // Disables built-in context menu - mxEvent.disableContextMenu(container); + InternalEvent.disableContextMenu(container); - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { alternateEdgeStyle = 'elbow=vertical'; getTooltipForCell(cell) { @@ -64,7 +64,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 mxRubberband(graph) and new mxKeyHandler(graph). + // use new Rubberband(graph) and new mxKeyHandler(graph). const graph = new MyCustomGraph(container); // Enables tooltips, new connections and panning @@ -74,9 +74,9 @@ const Template = ({ label, ...args }) => { // Automatically handle parallel edges const layout = new mxParallelEdgeLayout(graph); - const layoutMgr = new mxLayoutManager(graph); + const layoutMgr = new LayoutManager(graph); - layoutMgr.getLayout = function(cell) { + layoutMgr.getLayout = function (cell) { if (cell.getChildCount() > 0) { return layout; } @@ -84,17 +84,17 @@ const Template = ({ label, ...args }) => { // Enables rubberband (marquee) selection and a handler // for basic keystrokes (eg. return, escape during editing). - const rubberband = new mxRubberband(graph); + const rubberband = new Rubberband(graph); const keyHandler = new mxKeyHandler(graph); // Changes the default style for edges "in-place" and assigns - // an alternate edge style which is applied in mxGraph.flip + // an alternate edge style which is applied in Graph.flip // when the user double clicks on the adjustment control point // of the edge. The ElbowConnector edge style switches to TopToBottom // if the horizontal style is true. const style = graph.getStylesheet().getDefaultEdgeStyle(); style.rounded = true; - style.edge = mxEdgeStyle.ElbowConnector; + style.edge = EdgeStyle.ElbowConnector; // Installs a popupmenu handler using local function (see below). graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => { @@ -108,42 +108,10 @@ const Template = ({ label, ...args }) => { // Adds cells to the model in a single step graph.getModel().beginUpdate(); try { - const v1 = graph.insertVertex( - parent, - null, - 'Doubleclick', - 20, - 20, - 80, - 30 - ); - const v2 = graph.insertVertex( - parent, - null, - 'Right-/Shiftclick', - 200, - 150, - 120, - 30 - ); - const v3 = graph.insertVertex( - parent, - null, - 'Connect/Reconnect', - 200, - 20, - 120, - 30 - ); - const v4 = graph.insertVertex( - parent, - null, - 'Control-Drag', - 20, - 150, - 100, - 30 - ); + const v1 = graph.insertVertex(parent, null, 'Doubleclick', 20, 20, 80, 30); + const v2 = graph.insertVertex(parent, null, 'Right-/Shiftclick', 200, 150, 120, 30); + const v3 = graph.insertVertex(parent, null, 'Connect/Reconnect', 200, 20, 120, 30); + const v4 = graph.insertVertex(parent, null, 'Control-Drag', 20, 150, 100, 30); const e1 = graph.insertEdge(parent, null, 'Tooltips', v1, v2); const e2 = graph.insertEdge(parent, null, '', v2, v3); } finally { @@ -152,7 +120,7 @@ const Template = ({ label, ...args }) => { } return container; -} +}; function createPopupMenu(graph, menu, cell, evt) { // Function to create the entries in the popupmenu @@ -171,4 +139,4 @@ function createPopupMenu(graph, menu, cell, evt) { }); } -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/ExtendCanvas.stories.js b/packages/html/stories/ExtendCanvas.stories.js index 040bc15d9..b305d965e 100644 --- a/packages/html/stories/ExtendCanvas.stories.js +++ b/packages/html/stories/ExtendCanvas.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,24 +8,17 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxEvent, - mxRubberband, - mxRectangle, - mxPoint, - mxUtils - } = mxgraph; + const { Graph, InternalEvent, Rubberband, Rectangle, Point, utils } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -35,233 +28,209 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; container.style.background = 'url(/images/grid.gif)'; - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); /** - * Specifies the size of the size for "tiles" to be used for a graph with - * scrollbars but no visible background page. A good value is large - * enough to reduce the number of repaints that is caused for auto- - * translation, which depends on this value, and small enough to give - * a small empty buffer around the graph. Default is 400x400. + * Specifies the size of the size for "tiles" to be used for a graph with + * scrollbars but no visible background page. A good value is large + * enough to reduce the number of repaints that is caused for auto- + * translation, which depends on this value, and small enough to give + * a small empty buffer around the graph. Default is 400x400. + */ + const scrollTileSize = new Rectangle(0, 0, 400, 400); + + class MyCustomGraph extends Graph { + /** + * Returns the padding for pages in page view with scrollbars. */ - const scrollTileSize = new mxRectangle(0, 0, 400, 400); + getPagePadding() { + return new Point( + Math.max(0, Math.round(this.container.offsetWidth - 34)), + Math.max(0, Math.round(this.container.offsetHeight - 34)) + ); + } - class MyCustomGraph extends mxGraph { - /** - * Returns the padding for pages in page view with scrollbars. - */ - getPagePadding() { - return new mxPoint( - Math.max(0, Math.round(this.container.offsetWidth - 34)), - Math.max(0, Math.round(this.container.offsetHeight - 34)) - ); - } - - /** - * Returns the size of the page format scaled with the page size. - */ - getPageSize() { - return this.pageVisible - ? new mxRectangle( + /** + * Returns the size of the page format scaled with the page size. + */ + getPageSize() { + return this.pageVisible + ? new Rectangle( 0, 0, this.pageFormat.width * this.pageScale, - this.pageFormat.height * this.pageScale - ) - : scrollTileSize; - } - - /** - * Returns a rectangle describing the position and count of the - * background pages, where x and y are the position of the top, - * left page and width and height are the vertical and horizontal - * page count. - */ - getPageLayout() { - const size = this.pageVisible ? this.getPageSize() : scrollTileSize; - const bounds = this.getGraphBounds(); - - if (bounds.width === 0 || bounds.height === 0) { - return new mxRectangle(0, 0, 1, 1); - } - - // Computes untransformed graph bounds - const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x); - const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y); - const w = Math.floor(bounds.width / this.view.scale); - const h = Math.floor(bounds.height / this.view.scale); - - const x0 = Math.floor(x / size.width); - const y0 = Math.floor(y / size.height); - const w0 = Math.ceil((x + w) / size.width) - x0; - const h0 = Math.ceil((y + h) / size.height) - y0; - - return new mxRectangle(x0, y0, w0, h0); - } - - getPreferredPageSize(bounds, width, height) { - const pages = this.getPageLayout(); - const size = this.getPageSize(); - - return new mxRectangle( - 0, - 0, - pages.width * size.width, - pages.height * size.height - ); - } - - sizeDidChange() { - if (this.container != null && mxUtils.hasScrollbars(this.container)) { - const pages = this.getPageLayout(); - const pad = this.getPagePadding(); - const size = this.getPageSize(); - - // Updates the minimum graph size - const minw = Math.ceil( - (2 * pad.x) / this.view.scale + pages.width * size.width - ); - const minh = Math.ceil( - (2 * pad.y) / this.view.scale + pages.height * size.height - ); - - const min = this.minimumGraphSize; - - // LATER: Fix flicker of scrollbar size in IE quirks mode - // after delayed call in window.resize event handler - if (min == null || min.width !== minw || min.height !== minh) { - this.minimumGraphSize = new mxRectangle(0, 0, minw, minh); - } - - // Updates auto-translate to include padding and graph size - const dx = pad.x / this.view.scale - pages.x * size.width; - const dy = pad.y / this.view.scale - pages.y * size.height; - - if ( - !this.autoTranslate && - (this.view.translate.x !== dx || this.view.translate.y !== dy) - ) { - this.autoTranslate = true; - this.view.x0 = pages.x; - this.view.y0 = pages.y; - - // NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE - // BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION. - // SHOULD MOVE TRANSLATE/SCALE TO VIEW. - const tx = this.view.translate.x; - const ty = this.view.translate.y; - - this.view.setTranslate(dx, dy); - this.container.scrollLeft += (dx - tx) * this.view.scale; - this.container.scrollTop += (dy - ty) * this.view.scale; - - this.autoTranslate = false; - return; - } - super.sizeDidChange(); - } - } + this.pageFormat.height * this.pageScale + ) + : scrollTileSize; } - // Creates the graph inside the given container - const graph = new MyCustomGraph(container); - graph.panningHandler.ignoreCell = true; - graph.setPanning(true); - - // Fits the number of background pages to the graph - graph.view.getBackgroundPageBounds = function() { - const layout = this.graph.getPageLayout(); - const page = this.graph.getPageSize(); - - return new mxRectangle( - this.scale * (this.translate.x + layout.x * page.width), - this.scale * (this.translate.y + layout.y * page.height), - this.scale * layout.width * page.width, - this.scale * layout.height * page.height - ); - }; - /** - * Guesses autoTranslate to avoid another repaint (see below). - * Works if only the scale of the graph changes or if pages - * are visible and the visible pages do not change. + * Returns a rectangle describing the position and count of the + * background pages, where x and y are the position of the top, + * left page and width and height are the vertical and horizontal + * page count. */ - const graphViewValidate = graph.view.validate; - graph.view.validate = function() { - if ( - this.graph.container != null && - mxUtils.hasScrollbars(this.graph.container) - ) { - const pad = this.graph.getPagePadding(); - const size = this.graph.getPageSize(); + getPageLayout() { + const size = this.pageVisible ? this.getPageSize() : scrollTileSize; + const bounds = this.getGraphBounds(); - // Updating scrollbars here causes flickering in quirks and is not needed - // if zoom method is always used to set the current scale on the graph. - const tx = this.translate.x; - const ty = this.translate.y; - this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width; - this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height; + if (bounds.width === 0 || bounds.height === 0) { + return new Rectangle(0, 0, 1, 1); } - graphViewValidate.apply(this, arguments); - }; + // Computes untransformed graph bounds + const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x); + const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y); + const w = Math.floor(bounds.width / this.view.scale); + const h = Math.floor(bounds.height / this.view.scale); - // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(graph); + const x0 = Math.floor(x / size.width); + const y0 = Math.floor(y / size.height); + const w0 = Math.ceil((x + w) / size.width) - x0; + const h0 = Math.ceil((y + h) / size.height) - y0; - // Gets the default parent for inserting new cells. This - // is normally the first child of the root (ie. layer 0). - const parent = graph.getDefaultParent(); + return new Rectangle(x0, y0, w0, h0); + } - // Adds cells to the model in a single step - graph.batchUpdate(() => { - const v1 = graph.insertVertex({ - parent, - value: 'Hello,', - position: [20, 20], - size: [80, 30], - }); - const v2 = graph.insertVertex({ - parent, - value: 'World!', - position: [200, 150], - size: [80, 30], - }); - const e1 = graph.insertEdge({ - parent, - source: v1, - target: v2, - }); + getPreferredPageSize(bounds, width, height) { + const pages = this.getPageLayout(); + const size = this.getPageSize(); + + return new Rectangle(0, 0, pages.width * size.width, pages.height * size.height); + } + + sizeDidChange() { + if (this.container != null && utils.hasScrollbars(this.container)) { + const pages = this.getPageLayout(); + const pad = this.getPagePadding(); + const size = this.getPageSize(); + + // Updates the minimum graph size + const minw = Math.ceil((2 * pad.x) / this.view.scale + pages.width * size.width); + const minh = Math.ceil( + (2 * pad.y) / this.view.scale + pages.height * size.height + ); + + const min = this.minimumGraphSize; + + // LATER: Fix flicker of scrollbar size in IE quirks mode + // after delayed call in window.resize event handler + if (min == null || min.width !== minw || min.height !== minh) { + this.minimumGraphSize = new Rectangle(0, 0, minw, minh); + } + + // Updates auto-translate to include padding and graph size + const dx = pad.x / this.view.scale - pages.x * size.width; + const dy = pad.y / this.view.scale - pages.y * size.height; + + if ( + !this.autoTranslate && + (this.view.translate.x !== dx || this.view.translate.y !== dy) + ) { + this.autoTranslate = true; + this.view.x0 = pages.x; + this.view.y0 = pages.y; + + // NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE + // BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION. + // SHOULD MOVE TRANSLATE/SCALE TO VIEW. + const tx = this.view.translate.x; + const ty = this.view.translate.y; + + this.view.setTranslate(dx, dy); + this.container.scrollLeft += (dx - tx) * this.view.scale; + this.container.scrollTop += (dy - ty) * this.view.scale; + + this.autoTranslate = false; + return; + } + super.sizeDidChange(); + } + } + } + + // Creates the graph inside the given container + const graph = new MyCustomGraph(container); + graph.panningHandler.ignoreCell = true; + graph.setPanning(true); + + // Fits the number of background pages to the graph + graph.view.getBackgroundPageBounds = function () { + const layout = this.graph.getPageLayout(); + const page = this.graph.getPageSize(); + + return new Rectangle( + this.scale * (this.translate.x + layout.x * page.width), + this.scale * (this.translate.y + layout.y * page.height), + this.scale * layout.width * page.width, + this.scale * layout.height * page.height + ); + }; + + /** + * Guesses autoTranslate to avoid another repaint (see below). + * Works if only the scale of the graph changes or if pages + * are visible and the visible pages do not change. + */ + const graphViewValidate = graph.view.validate; + graph.view.validate = function () { + if (this.graph.container != null && utils.hasScrollbars(this.graph.container)) { + const pad = this.graph.getPagePadding(); + const size = this.graph.getPageSize(); + + // Updating scrollbars here causes flickering in quirks and is not needed + // if zoom method is always used to set the current scale on the graph. + const tx = this.translate.x; + const ty = this.translate.y; + this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width; + this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height; + } + + graphViewValidate.apply(this, arguments); + }; + + // Enables rubberband selection + 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). + const parent = graph.getDefaultParent(); + + // Adds cells to the model in a single step + graph.batchUpdate(() => { + const v1 = graph.insertVertex({ + parent, + value: 'Hello,', + position: [20, 20], + size: [80, 30], }); + const v2 = graph.insertVertex({ + parent, + value: 'World!', + position: [200, 150], + size: [80, 30], + }); + const e1 = graph.insertEdge({ + parent, + source: v1, + target: v2, + }); + }); - // Sets initial scrollbar positions - window.setTimeout(() => { - const bounds = graph.getGraphBounds(); - const width = Math.max( - bounds.width, - scrollTileSize.width * graph.view.scale - ); - const height = Math.max( - bounds.height, - scrollTileSize.height * graph.view.scale - ); - graph.container.scrollTop = Math.floor( - Math.max( - 0, - bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4) - ) - ); - graph.container.scrollLeft = Math.floor( - Math.max( - 0, - bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2) - ) - ); - }, 0); + // Sets initial scrollbar positions + window.setTimeout(() => { + const bounds = graph.getGraphBounds(); + const width = Math.max(bounds.width, scrollTileSize.width * graph.view.scale); + const height = Math.max(bounds.height, scrollTileSize.height * graph.view.scale); + graph.container.scrollTop = Math.floor( + Math.max(0, bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)) + ); + graph.container.scrollLeft = Math.floor( + Math.max(0, bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)) + ); + }, 0); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/FileIO.stories.js b/packages/html/stories/FileIO.stories.js index 4d18cb838..c232defc6 100644 --- a/packages/html/stories/FileIO.stories.js +++ b/packages/html/stories/FileIO.stories.js @@ -1,23 +1,20 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; -import { error } from '@mxgraph/core/src/util/mxDomUtils'; -import { clone } from '@mxgraph/core/src/util/CloneUtils'; -import { button } from '@mxgraph/core/src/util/dom/mxDomHelpers'; -import { load } from '@mxgraph/core/src/util/network/mxXmlRequest'; +import { error } from '@maxgraph/core/util/DomUtils'; +import { clone } from '@maxgraph/core/util/CloneUtils'; +import { button } from '@maxgraph/core/util/dom/mxDomHelpers'; +import { load } from '@maxgraph/core/util/network/mxXmlRequest'; export default { title: 'Xml_Json/FileIO', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxConstants - } = mxgraph; + const { Graph, Constants } = maxgraph; const div = document.createElement('div'); @@ -41,7 +38,7 @@ const Template = ({ label, ...args }) => { error('Browser is not supported!', 200, false); } else { // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setEnabled(false); graph.setPanning(true); @@ -53,7 +50,7 @@ const Template = ({ label, ...args }) => { // Changes the default vertex style in-place let style = graph.getStylesheet().getDefaultVertexStyle(); - style.shape = mxConstants.SHAPE_ROUNDED; + style.shape = Constants.SHAPE_ROUNDED; style.perimiter = Perimeter.RectanglePerimeter; style.gradientColor = 'white'; style.perimeterSpacing = 4; @@ -63,10 +60,10 @@ const Template = ({ label, ...args }) => { style.labelBackgroundColor = 'white'; style = clone(style); - style.startArrow = mxConstants.ARROW_CLASSIC; + style.startArrow = Constants.ARROW_CLASSIC; graph.getStylesheet().putCellStyle('2way', style); - graph.isHtmlLabel = function(cell) { + graph.isHtmlLabel = function (cell) { return true; }; @@ -82,7 +79,7 @@ const Template = ({ label, ...args }) => { // Adds a button to execute the layout this.el2.appendChild( - button('Arrange', function(evt) { + button('Arrange', function (evt) { const parent = graph.getDefaultParent(); layout.execute(parent); }) @@ -94,7 +91,7 @@ const Template = ({ label, ...args }) => { // Loads the custom file format (TXT file) parse(graph, 'fileio.txt'); - // Loads the mxGraph file format (XML file) + // Loads the Graph file format (XML file) // read(graph, 'fileio.xml'); // Gets the default parent for inserting new cells. This @@ -108,9 +105,9 @@ const Template = ({ label, ...args }) => { graph.getModel().endUpdate(); } - graph.dblClick = function(evt, cell) { + graph.dblClick = function (evt, cell) { const mxe = new EventObject( - mxEvent.DOUBLE_CLICK, + InternalEvent.DOUBLE_CLICK, 'event', evt, 'cell', @@ -120,13 +117,11 @@ const Template = ({ label, ...args }) => { if ( this.isEnabled() && - !mxEvent.isConsumed(evt) && + !InternalEvent.isConsumed(evt) && !mxe.isConsumed() && cell != null ) { - alert( - `Show properties for cell ${cell.customId || cell.getId()}` - ); + alert(`Show properties for cell ${cell.customId || cell.getId()}`); } }; } @@ -163,15 +158,7 @@ const Template = ({ label, ...args }) => { const key = lines[i].substring(0, colon); if (key.length > 0) { - vertices[key] = graph.insertVertex( - parent, - null, - value, - 0, - 0, - 80, - 70 - ); + vertices[key] = graph.insertVertex(parent, null, value, 0, 0, 80, 70); } } else if (comma < colon) { // Looks up the vertices in the lookup table @@ -194,7 +181,7 @@ const Template = ({ label, ...args }) => { } } - // Parses the mxGraph XML file format + // Parses the Graph XML file format function read(graph, filename) { const req = load(filename); const root = req.getDocumentElement(); @@ -204,6 +191,6 @@ const Template = ({ label, ...args }) => { } return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/FixedIcons.stories.js b/packages/html/stories/FixedIcons.stories.js index 00d600ed7..892560d59 100644 --- a/packages/html/stories/FixedIcons.stories.js +++ b/packages/html/stories/FixedIcons.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,20 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRubberband, - mxRectangle, - mxConstants, - mxUtils, - mxLabel - } = mxgraph; + const { Graph, Rubberband, Rectangle, Constants, utils, mxLabel } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -32,38 +25,29 @@ 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) { - const iw = mxUtils.getValue( - this.style, - 'imageWidth', - mxConstants.DEFAULT_IMAGESIZE - ); - const ih = mxUtils.getValue( - this.style, - 'imageHeight', - mxConstants.DEFAULT_IMAGESIZE - ); + mxLabel.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); // Places the icon const ix = (w - iw) / 2; const iy = h - ih; - return new mxRectangle(x + ix, y + iy, iw, ih); + return new Rectangle(x + ix, y + iy, iw, ih); }; // Makes the shadow brighter - mxConstants.SHADOWCOLOR = '#C0C0C0'; + Constants.SHADOWCOLOR = '#C0C0C0'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Uncomment the following if you want the container // to fit the size of the graph // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -89,6 +73,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/FixedPoints.stories.js b/packages/html/stories/FixedPoints.stories.js index 79dba8fda..2f86bb8d5 100644 --- a/packages/html/stories/FixedPoints.stories.js +++ b/packages/html/stories/FixedPoints.stories.js @@ -1,7 +1,7 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; -import { intersects } from '@mxgraph/core/src/util/Utils'; +import { intersects } from '@maxgraph/core/util/Utils'; export default { title: 'Connections/FixedPoints', @@ -9,22 +9,22 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRubberband, - mxConnectionHandler, - mxConnectionConstraint, - mxConstraintHandler, - mxPoint, - mxCellState, - mxEdgeHandler - } = mxgraph; + Graph, + Rubberband, + ConnectionHandler, + ConnectionConstraint, + ConstraintHandler, + Point, + CellState, + EdgeHandler, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -34,17 +34,15 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - class MyCustomConstraintHandler extends mxConstraintHandler { + class MyCustomConstraintHandler extends ConstraintHandler { // Snaps to fixed points intersects(icon, point, source, existingEdge) { - return ( - !source || existingEdge || intersects(icon.bounds, point) - ); + return !source || existingEdge || intersects(icon.bounds, point); } } - class MyCustomConnectionHandler extends mxConnectionHandler { - // connectImage = new mxImage('images/connector.gif', 16, 16); + class MyCustomConnectionHandler extends ConnectionHandler { + // connectImage = new ImageBox('images/connector.gif', 16, 16); isConnectableCell(cell) { return false; @@ -59,21 +57,15 @@ const Template = ({ label, ...args }) => { */ updateEdgeState(pt, constraint) { if (pt != null && this.previous != null) { - const constraints = this.graph.getAllConnectionConstraints( - this.previous - ); + const constraints = this.graph.getAllConnectionConstraints(this.previous); let nearestConstraint = null; let dist = null; for (let i = 0; i < constraints.length; i++) { - const cp = this.graph.getConnectionPoint( - this.previous, - constraints[i] - ); + const cp = this.graph.getConnectionPoint(this.previous, constraints[i]); if (cp != null) { - const tmp = - (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y); + const tmp = (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y); if (dist == null || tmp < dist) { nearestConstraint = constraints[i]; @@ -90,7 +82,7 @@ const Template = ({ label, ...args }) => { // this.edgeState.style.edgeStyle = 'orthogonalEdgeStyle'; // And to use the new edge style in the new edge inserted into the graph, // update the cell style as follows: - // this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle); + // this.edgeState.cell.style = utils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle); } return super.updateEdgeState(pt, constraint); } @@ -106,22 +98,18 @@ const Template = ({ label, ...args }) => { 'edgeStyle=orthogonalEdgeStyle' ); - return new mxCellState( - this.graph.view, - edge, - this.graph.getCellStyle(edge) - ); + return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge)); } } - class MyCustomEdgeHandler extends mxEdgeHandler { + class MyCustomEdgeHandler extends EdgeHandler { // Disables floating connections (only use with no connect image) isConnectableCell(cell) { return graph.connectionHandler.isConnectableCell(cell); } } - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { createConnectionHandler() { const r = new MyCustomConnectionHandler(); r.constraintHandler = new MyCustomConstraintHandler(this); @@ -137,14 +125,14 @@ const Template = ({ label, ...args }) => { getAllConnectionConstraints(terminal) { if (terminal != null && terminal.cell.isVertex()) { return [ - new mxConnectionConstraint(new mxPoint(0, 0), true), - new mxConnectionConstraint(new mxPoint(0.5, 0), true), - new mxConnectionConstraint(new mxPoint(1, 0), true), - new mxConnectionConstraint(new mxPoint(0, 0.5), true), - new mxConnectionConstraint(new mxPoint(1, 0.5), true), - new mxConnectionConstraint(new mxPoint(0, 1), true), - new mxConnectionConstraint(new mxPoint(0.5, 1), true), - new mxConnectionConstraint(new mxPoint(1, 1), true), + new ConnectionConstraint(new Point(0, 0), true), + new ConnectionConstraint(new Point(0.5, 0), true), + new ConnectionConstraint(new Point(1, 0), true), + new ConnectionConstraint(new Point(0, 0.5), true), + new ConnectionConstraint(new Point(1, 0.5), true), + new ConnectionConstraint(new Point(0, 1), true), + new ConnectionConstraint(new Point(0.5, 1), true), + new ConnectionConstraint(new Point(1, 1), true), ]; } return null; @@ -156,8 +144,7 @@ const Template = ({ label, ...args }) => { graph.setConnectable(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -208,16 +195,16 @@ const Template = ({ label, ...args }) => { // Use this code to snap the source point for new connections without a connect preview, // ie. without an overridden graph.connectionHandler.createEdgeState /* - let mxConnectionHandlerMouseMove = mxConnectionHandler.prototype.mouseMove; - mxConnectionHandler.prototype.mouseMove = function(sender, me) + let mxConnectionHandlerMouseMove = ConnectionHandler.prototype.mouseMove; + ConnectionHandler.prototype.mouseMove = function(sender, me) { this.sourceConstraint = null; mxConnectionHandlerMouseMove.apply(this, arguments); }; - let mxConnectionHandlerGetSourcePerimeterPoint = mxConnectionHandler.prototype.getSourcePerimeterPoint; - mxConnectionHandler.prototype.getSourcePerimeterPoint = function(state, pt, me) + let mxConnectionHandlerGetSourcePerimeterPoint = ConnectionHandler.prototype.getSourcePerimeterPoint; + ConnectionHandler.prototype.getSourcePerimeterPoint = function(state, pt, me) { let result = null; @@ -262,6 +249,6 @@ const Template = ({ label, ...args }) => { */ return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Folding.stories.js b/packages/html/stories/Folding.stories.js index d2d61b5f0..0bec34da8 100644 --- a/packages/html/stories/Folding.stories.js +++ b/packages/html/stories/Folding.stories.js @@ -1,22 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Layouts/Folding', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxConstants, - mxEdgeStyle, - mxStackLayout, - mxLayoutManager - } = mxgraph; + const { Graph, Constants, EdgeStyle, StackLayout, LayoutManager } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -27,10 +21,10 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Enables crisp rendering of rectangles in SVG - mxConstants.ENTITY_SEGMENT = 20; + Constants.ENTITY_SEGMENT = 20; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setDropEnabled(true); // Disables global features @@ -43,7 +37,7 @@ const Template = ({ label, ...args }) => { // Sets global styles let style = graph.getStylesheet().getDefaultEdgeStyle(); - style.edge = mxEdgeStyle.EntityRelation; + style.edge = EdgeStyle.EntityRelation; style.rounded = true; style = graph.getStylesheet().getDefaultVertexStyle(); @@ -52,17 +46,17 @@ const Template = ({ label, ...args }) => { style.startSize = 30; style = []; - style.shape = mxConstants.SHAPE_RECTANGLE; + style.shape = Constants.SHAPE_RECTANGLE; style.strokeColor = 'none'; style.fillColor = 'none'; style.foldable = false; graph.getStylesheet().putCellStyle('column', style); // Installs auto layout for all levels - const layout = new mxStackLayout(graph, true); + const layout = new StackLayout(graph, true); layout.border = graph.border; - const layoutMgr = new mxLayoutManager(graph); - layoutMgr.getLayout = function(cell) { + const layoutMgr = new LayoutManager(graph); + layoutMgr.getLayout = function (cell) { if (!cell.collapsed) { if (cell.parent !== graph.model.root) { layout.resizeParent = true; @@ -140,6 +134,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Grid.stories.js b/packages/html/stories/Grid.stories.js index 2e46e511e..5f57d02da 100644 --- a/packages/html/stories/Grid.stories.js +++ b/packages/html/stories/Grid.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,26 +8,26 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxEvent, - mxRubberband, - mxLog, - mxGraphView, - mxPoint, + Graph, + InternalEvent, + Rubberband, + mxLog, + GraphView, + Point, mxDomHelpers, - mxEventUtils - } = mxgraph; + EventUtils, + } = maxgraph; const div = document.createElement('div'); @@ -39,73 +39,69 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; div.appendChild(container); - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Creates the graph inside the given container - var graph = new mxGraph(container); + var graph = new Graph(container); graph.graphHandler.scaleGrid = true; graph.setPanning(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); let repaintGrid; // Create grid dynamically (requires canvas) - (function() - { - try - { + (function () { + try { var canvas = document.createElement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = '0px'; canvas.style.left = '0px'; canvas.style.zIndex = -1; graph.container.appendChild(canvas); - + var ctx = canvas.getContext('2d'); - + // Modify event filtering to accept canvas as container - var mxGraphViewIsContainerEvent = mxGraphView.prototype.isContainerEvent; - mxGraphView.prototype.isContainerEvent = function(evt) - { - return mxGraphViewIsContainerEvent.apply(this, arguments) || - mxEventUtils.getSource(evt) == canvas; + var mxGraphViewIsContainerEvent = GraphView.prototype.isContainerEvent; + GraphView.prototype.isContainerEvent = function (evt) { + return ( + mxGraphViewIsContainerEvent.apply(this, arguments) || + EventUtils.getSource(evt) == canvas + ); }; - + var s = 0; var gs = 0; - var tr = new mxPoint(); + var tr = new Point(); var w = 0; var h = 0; - repaintGrid = function() - { - if (ctx != null) - { + repaintGrid = function () { + if (ctx != null) { var bounds = graph.getGraphBounds(); var width = Math.max(bounds.x + bounds.width, graph.container.clientWidth); var height = Math.max(bounds.y + bounds.height, graph.container.clientHeight); var sizeChanged = width != w || height != h; - - if (graph.view.scale != s || graph.view.translate.x != tr.x || graph.view.translate.y != tr.y || - gs != graph.gridSize || sizeChanged) - { + + if ( + graph.view.scale != s || + graph.view.translate.x != tr.x || + graph.view.translate.y != tr.y || + gs != graph.gridSize || + sizeChanged + ) { tr = graph.view.translate.clone(); s = graph.view.scale; gs = graph.gridSize; w = width; h = height; - + // Clears the background if required - if (!sizeChanged) - { + if (!sizeChanged) { ctx.clearRect(0, 0, w, h); - } - else - { + } else { canvas.setAttribute('width', w); canvas.setAttribute('height', h); } @@ -117,8 +113,7 @@ const Template = ({ label, ...args }) => { var minStepping = graph.gridSize; var stepping = minStepping * s; - if (stepping < minStepping) - { + if (stepping < minStepping) { var count = Math.round(Math.ceil(minStepping / stepping) / 2) * 2; stepping = count * stepping; } @@ -139,21 +134,19 @@ const Template = ({ label, ...args }) => { // Draws the actual grid ctx.strokeStyle = '#f6f6f6'; ctx.beginPath(); - - for (var x = xs; x <= xe; x += stepping) - { + + for (var x = xs; x <= xe; x += stepping) { x = Math.round((x - tx) / stepping) * stepping + tx; var ix = Math.round(x); - + ctx.moveTo(ix + 0.5, iys + 0.5); ctx.lineTo(ix + 0.5, iye + 0.5); } - for (var y = ys; y <= ye; y += stepping) - { + for (var y = ys; y <= ye; y += stepping) { y = Math.round((y - ty) / stepping) * stepping + ty; var iy = Math.round(y); - + ctx.moveTo(ixs + 0.5, iy + 0.5); ctx.lineTo(ixe + 0.5, iy + 0.5); } @@ -163,58 +156,53 @@ const Template = ({ label, ...args }) => { } } }; - } - catch (e) - { + } catch (e) { mxLog.show(); mxLog.debug('Using background image'); - - container.style.backgroundImage = 'url(\'editors/images/grid.gif\')'; + + container.style.backgroundImage = "url('editors/images/grid.gif')"; } - - var mxGraphViewValidateBackground = mxGraphView.prototype.validateBackground; - mxGraphView.prototype.validateBackground = function() - { + + var mxGraphViewValidateBackground = GraphView.prototype.validateBackground; + GraphView.prototype.validateBackground = function () { mxGraphViewValidateBackground.apply(this, arguments); repaintGrid(); }; })(); - - + // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). var parent = graph.getDefaultParent(); - + // Adds cells to the model in a single step graph.getModel().beginUpdate(); - try - { + try { var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); var e1 = graph.insertEdge(parent, null, '', v1, v2); - } - finally - { + } finally { // Updates the display graph.getModel().endUpdate(); } graph.centerZoom = false; - + const controller = document.createElement('div'); div.appendChild(controller); - controller.appendChild(mxDomHelpers.button('+', function() - { - graph.zoomIn(); - })); - - controller.appendChild(mxDomHelpers.button('-', function() - { - graph.zoomOut(); - })); + controller.appendChild( + mxDomHelpers.button('+', function () { + graph.zoomIn(); + }) + ); + + controller.appendChild( + mxDomHelpers.button('-', function () { + graph.zoomOut(); + }) + ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Groups.stories.js b/packages/html/stories/Groups.stories.js index 31bc83b27..31117498d 100644 --- a/packages/html/stories/Groups.stories.js +++ b/packages/html/stories/Groups.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,18 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRubberband, - mxGraphHandler, - mxPopupMenuHandler - } = mxgraph; + const { Graph, Rubberband, GraphHandler, mxPopupMenuHandler } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -30,27 +25,24 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Overrides check for valid roots - mxGraph.prototype.isValidRoot = function() { + Graph.prototype.isValidRoot = function () { return false; }; // Don't clear selection if multiple cells selected - const graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown; - mxGraphHandler.prototype.mouseDown = function(sender, me) { + const graphHandlerMouseDown = GraphHandler.prototype.mouseDown; + GraphHandler.prototype.mouseDown = function (sender, me) { graphHandlerMouseDown.apply(this, arguments); - if ( - this.graph.isCellSelected(me.getCell()) && - this.graph.getSelectionCount() > 1 - ) { + if (this.graph.isCellSelected(me.getCell()) && this.graph.getSelectionCount() > 1) { this.delayedSelection = false; } }; // Selects descendants before children selection mode const graphHandlerGetInitialCellForEvent = - mxGraphHandler.prototype.getInitialCellForEvent; - mxGraphHandler.prototype.getInitialCellForEvent = function(me) { + GraphHandler.prototype.getInitialCellForEvent; + GraphHandler.prototype.getInitialCellForEvent = function (me) { const model = this.graph.getModel(); const psel = this.graph.getSelectionCell().getParent(); let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments); @@ -72,9 +64,8 @@ const Template = ({ label, ...args }) => { }; // Selection is delayed to mouseup if child selected - const graphHandlerIsDelayedSelection = - mxGraphHandler.prototype.isDelayedSelection; - mxGraphHandler.prototype.isDelayedSelection = function(cell) { + const graphHandlerIsDelayedSelection = GraphHandler.prototype.isDelayedSelection; + GraphHandler.prototype.isDelayedSelection = function (cell) { let result = graphHandlerIsDelayedSelection.apply(this, arguments); const model = this.graph.getModel(); const psel = this.graph.getSelectionCell().getParent(); @@ -94,7 +85,7 @@ const Template = ({ label, ...args }) => { }; // Delayed selection of parent group - mxGraphHandler.prototype.selectDelayed = function(me) { + GraphHandler.prototype.selectDelayed = function (me) { let cell = me.getCell(); if (cell == null) { @@ -117,7 +108,7 @@ const Template = ({ label, ...args }) => { }; // Returns last selected ancestor - mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) { + mxPopupMenuHandler.prototype.getCellForPopupEvent = function (me) { let cell = me.getCell(); const model = this.graph.getModel(); let parent = cell.getParent(); @@ -134,7 +125,7 @@ const Template = ({ label, ...args }) => { }; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.constrainChildren = false; graph.extendParents = false; graph.extendParentsOnAdd = false; @@ -144,8 +135,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -162,6 +152,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Guides.stories.js b/packages/html/stories/Guides.stories.js index a7ad49c45..97630f187 100644 --- a/packages/html/stories/Guides.stories.js +++ b/packages/html/stories/Guides.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,21 +8,21 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxGraphHandler, - mxEvent, - mxConstants, - mxEdgeHandler, - mxEdgeStyle, - mxRubberband - } = mxgraph; + Graph, + GraphHandler, + InternalEvent, + Constants, + EdgeHandler, + EdgeStyle, + Rubberband, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -33,40 +33,39 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Enables guides - mxGraphHandler.prototype.guidesEnabled = true; + GraphHandler.prototype.guidesEnabled = true; // Alt disables guides - mxGraphHandler.prototype.useGuidesForEvent = function(me) { - return !mxEvent.isAltDown(me.getEvent()); + GraphHandler.prototype.useGuidesForEvent = function (me) { + return !InternalEvent.isAltDown(me.getEvent()); }; // Defines the guides to be red (default) - mxConstants.GUIDE_COLOR = '#FF0000'; + Constants.GUIDE_COLOR = '#FF0000'; // Defines the guides to be 1 pixel (default) - mxConstants.GUIDE_STROKEWIDTH = 1; + Constants.GUIDE_STROKEWIDTH = 1; // Enables snapping waypoints to terminals - mxEdgeHandler.prototype.snapToTerminals = true; + EdgeHandler.prototype.snapToTerminals = true; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setConnectable(true); graph.gridSize = 30; // Changes the default style for edges "in-place" and assigns - // an alternate edge style which is applied in mxGraph.flip + // an alternate edge style which is applied in Graph.flip // when the user double clicks on the adjustment control point // of the edge. The ElbowConnector edge style switches to TopToBottom // if the horizontal style is true. const style = graph.getStylesheet().getDefaultEdgeStyle(); style.rounded = true; - style.edge = mxEdgeStyle.ElbowConnector; + style.edge = EdgeStyle.ElbowConnector; graph.alternateEdgeStyle = 'elbow=vertical'; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -85,7 +84,7 @@ const Template = ({ label, ...args }) => { } // Handles cursor keys - const nudge = function(keyCode) { + const nudge = function (keyCode) { if (!graph.isSelectionEmpty()) { let dx = 0; let dy = 0; @@ -111,26 +110,26 @@ const Template = ({ label, ...args }) => { // Ignores enter keystroke. Remove this line if you want the // enter keystroke to stop editing - keyHandler.enter = function() {}; + keyHandler.enter = function () {}; - keyHandler.bindKey(37, function() { + keyHandler.bindKey(37, function () { nudge(37); }); - keyHandler.bindKey(38, function() { + keyHandler.bindKey(38, function () { nudge(38); }); - keyHandler.bindKey(39, function() { + keyHandler.bindKey(39, function () { nudge(39); }); - keyHandler.bindKey(40, function() { + keyHandler.bindKey(40, function () { nudge(40); }); }; return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Handles.stories.js b/packages/html/stories/Handles.stories.js index 4d24b31ba..1a2fa430d 100644 --- a/packages/html/stories/Handles.stories.js +++ b/packages/html/stories/Handles.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,29 +8,29 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxCylinder, + Graph, + CylinderShape, mxDomHelpers, - mxCellRenderer, - mxPoint, - mxRectangle, - mxVertexHandler, - mxEvent, - mxRubberband, - mxUtils, - mxHandle - } = mxgraph; + CellRenderer, + Point, + Rectangle, + VertexHandler, + InternalEvent, + Rubberband, + utils, + VertexHandle, + } = maxgraph; const div = document.createElement('div'); @@ -43,17 +43,15 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; div.appendChild(container); - class MyShape extends mxCylinder { + class MyShape extends CylinderShape { defaultPos1 = 20; defaultPos2 = 60; getLabelBounds(rect) { - const pos1 = - mxUtils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale; - const pos2 = - mxUtils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale; - return new mxRectangle( + const pos1 = utils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale; + const pos2 = utils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale; + return new Rectangle( rect.x, rect.y + pos1, rect.width, @@ -62,8 +60,8 @@ const Template = ({ label, ...args }) => { } redrawPath(path, x, y, w, h, isForeground) { - const pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1); - const pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2); + const pos1 = utils.getValue(this.style, 'pos1', this.defaultPos1); + const pos2 = utils.getValue(this.style, 'pos2', this.defaultPos2); if (isForeground) { if (pos1 < h) { @@ -80,9 +78,9 @@ const Template = ({ label, ...args }) => { } } } - mxCellRenderer.registerShape('myShape', MyShape); + CellRenderer.registerShape('myShape', MyShape); - class MyCustomVertexHandler extends mxVertexHandler { + class MyCustomVertexHandler extends VertexHandler { livePreview = true; rotationEnabled = true; @@ -90,19 +88,15 @@ const Template = ({ label, ...args }) => { createCustomHandles() { if (this.state.style.shape === 'myShape') { // Implements the handle for the first divider - const firstHandle = new mxHandle(this.state); + const firstHandle = new VertexHandle(this.state); - firstHandle.getPosition = function(bounds) { + firstHandle.getPosition = function (bounds) { const pos2 = Math.max( 0, Math.min( bounds.height, parseFloat( - mxUtils.getValue( - this.state.style, - 'pos2', - MyShape.prototype.defaultPos2 - ) + utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2) ) ) ); @@ -111,29 +105,21 @@ const Template = ({ label, ...args }) => { Math.min( pos2, parseFloat( - mxUtils.getValue( - this.state.style, - 'pos1', - MyShape.prototype.defaultPos1 - ) + utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1) ) ) ); - return new mxPoint(bounds.getCenterX(), bounds.y + pos1); + return new Point(bounds.getCenterX(), bounds.y + pos1); }; - firstHandle.setPosition = function(bounds, pt) { + firstHandle.setPosition = function (bounds, pt) { const pos2 = Math.max( 0, Math.min( bounds.height, parseFloat( - mxUtils.getValue( - this.state.style, - 'pos2', - MyShape.prototype.defaultPos2 - ) + utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2) ) ) ); @@ -143,26 +129,22 @@ const Template = ({ label, ...args }) => { ); }; - firstHandle.execute = function() { + firstHandle.execute = function () { this.copyStyle('pos1'); }; firstHandle.ignoreGrid = true; // Implements the handle for the second divider - const secondHandle = new mxHandle(this.state); + const secondHandle = new VertexHandle(this.state); - secondHandle.getPosition = function(bounds) { + secondHandle.getPosition = function (bounds) { const pos1 = Math.max( 0, Math.min( bounds.height, parseFloat( - mxUtils.getValue( - this.state.style, - 'pos1', - MyShape.prototype.defaultPos1 - ) + utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1) ) ) ); @@ -171,29 +153,21 @@ const Template = ({ label, ...args }) => { Math.min( bounds.height, parseFloat( - mxUtils.getValue( - this.state.style, - 'pos2', - MyShape.prototype.defaultPos2 - ) + utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2) ) ) ); - return new mxPoint(bounds.getCenterX(), bounds.y + pos2); + return new Point(bounds.getCenterX(), bounds.y + pos2); }; - secondHandle.setPosition = function(bounds, pt) { + secondHandle.setPosition = function (bounds, pt) { const pos1 = Math.max( 0, Math.min( bounds.height, parseFloat( - mxUtils.getValue( - this.state.style, - 'pos1', - MyShape.prototype.defaultPos1 - ) + utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1) ) ) ); @@ -203,7 +177,7 @@ const Template = ({ label, ...args }) => { ); }; - secondHandle.execute = function() { + secondHandle.execute = function () { this.copyStyle('pos2'); }; @@ -216,15 +190,14 @@ const Template = ({ label, ...args }) => { } } - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { createVertexHandler(state) { return new MyCustomVertexHandler(state); } } // Disables the built-in context menu - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Creates the graph inside the given container const graph = new MyCustomGraph(container); @@ -234,8 +207,7 @@ const Template = ({ label, ...args }) => { graph.centerZoom = false; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -263,17 +235,17 @@ const Template = ({ label, ...args }) => { div.appendChild(buttons); buttons.appendChild( - mxDomHelpers.button('+', function() { + mxDomHelpers.button('+', function () { graph.zoomIn(); }) ); buttons.appendChild( - mxDomHelpers.button('-', function() { + mxDomHelpers.button('-', function () { graph.zoomOut(); }) ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/HelloPort.stories.js b/packages/html/stories/HelloPort.stories.js index b5428f6cd..3514f95e9 100644 --- a/packages/html/stories/HelloPort.stories.js +++ b/packages/html/stories/HelloPort.stories.js @@ -1,8 +1,8 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; -import { popup } from '@mxgraph/core/src/util/gui/mxWindow'; -import { getPrettyXml } from '@mxgraph/core/src/util/XmlUtils'; +import { popup } from '@maxgraph/core/util/gui/mxWindow'; +import { getPrettyXml } from '@maxgraph/core/util/XmlUtils'; export default { title: 'Connections/HelloPort', @@ -10,21 +10,21 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRubberband, - mxEdgeStyle, - mxPoint, - mxConstants, + Graph, + Rubberband, + EdgeStyle, + Point, + Constants, mxDomHelpers, - mxClient - } = mxgraph; + mxClient, + } = maxgraph; mxClient.setImageBasePath('/images'); @@ -40,17 +40,17 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setConnectable(true); graph.setTooltips(true); // Sets the default edge style const style = graph.getStylesheet().getDefaultEdgeStyle(); - style.edge = mxEdgeStyle.ElbowConnector; + style.edge = EdgeStyle.ElbowConnector; // Ports are not used as terminals for edges, they are // only used to compute the graphical connection point - graph.isPort = function(cell) { + graph.isPort = function (cell) { const geo = this.getCellGeometry(cell); return geo != null ? geo.relative : false; @@ -58,26 +58,23 @@ const Template = ({ label, ...args }) => { // Implements a tooltip that shows the actual // source and target of an edge - graph.getTooltipForCell = function(cell) { + graph.getTooltipForCell = function (cell) { if (cell.isEdge()) { return `${this.convertValueToString( cell.getTerminal(true) - )} => ${this.convertValueToString( - cell.getTerminal(false) - )}`; + )} => ${this.convertValueToString(cell.getTerminal(false))}`; } - return mxGraph.prototype.getTooltipForCell.apply(this, arguments); + return Graph.prototype.getTooltipForCell.apply(this, arguments); }; // Removes the folding icon and disables any folding - graph.isCellFoldable = function(cell) { + graph.isCellFoldable = function (cell) { return false; }; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -89,10 +86,10 @@ const Template = ({ label, ...args }) => { const v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30); v1.setConnectable(false); const v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10); - v11.geometry.offset = new mxPoint(-5, -5); + v11.geometry.offset = new Point(-5, -5); v11.geometry.relative = true; const v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10); - v12.geometry.offset = new mxPoint(-5, -5); + v12.geometry.offset = new Point(-5, -5); v12.geometry.relative = true; const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); const v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30); @@ -106,7 +103,7 @@ const Template = ({ label, ...args }) => { const controller = document.createElement('div'); div.appendChild(controller); - const button = mxDomHelpers.button('View XML', function() { + const button = mxDomHelpers.button('View XML', function () { const encoder = new mxCodec(); const node = encoder.encode(graph.getModel()); popup(getPrettyXml(node), true); @@ -115,6 +112,6 @@ const Template = ({ label, ...args }) => { controller.appendChild(button); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/HelloWorld.stories.js b/packages/html/stories/HelloWorld.stories.js index 16d8a20c8..bc44ef70a 100644 --- a/packages/html/stories/HelloWorld.stories.js +++ b/packages/html/stories/HelloWorld.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -18,8 +18,8 @@ export default { }; const Template = ({ label, ...args }) => { - const { mxGraph, mxEvent, mxRubberband } = mxgraph; - + const { Graph, InternalEvent, Rubberband } = maxgraph; + console.log(maxgraph, Graph); const container = document.createElement('div'); container.style.position = 'relative'; container.style.overflow = 'hidden'; @@ -28,11 +28,11 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - if (!args.contextMenu) mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); - const graph = new mxGraph(container); + const graph = new Graph(container); - if (args.rubberBand) new mxRubberband(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 831eb6d85..980986386 100644 --- a/packages/html/stories/HierarchicalLayout.stories.js +++ b/packages/html/stories/HierarchicalLayout.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,26 +8,26 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, + Graph, mxDomUtils, mxFastOrganicLayout, mxHierarchicalLayout, - mxPerimeter, - mxEvent, - mxRubberband, - mxConstants - } = mxgraph; + Perimeter, + InternalEvent, + Rubberband, + Constants, + } = maxgraph; const div = document.createElement('div'); @@ -41,15 +41,14 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Adds rubberband selection - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); // Changes the default vertex style in-place let style = graph.getStylesheet().getDefaultVertexStyle(); - style.perimiter = mxPerimeter.RectanglePerimeter; + style.perimiter = Perimeter.RectanglePerimeter; style.gradientColor = 'white'; style.perimeterSpacing = 6; style.rounded = true; @@ -72,7 +71,7 @@ const Template = ({ label, ...args }) => { // Adds a button to execute the layout let button = document.createElement('button'); mxDomUtils.write(button, 'Hierarchical'); - mxEvent.addListener(button, 'click', function(evt) { + InternalEvent.addListener(button, 'click', function (evt) { layout.execute(parent); }); buttons.appendChild(button); @@ -81,7 +80,7 @@ const Template = ({ label, ...args }) => { button = document.createElement('button'); mxDomUtils.write(button, 'Organic'); - mxEvent.addListener(button, 'click', function(evt) { + InternalEvent.addListener(button, 'click', function (evt) { organic.execute(parent); }); @@ -122,6 +121,6 @@ const Template = ({ label, ...args }) => { } return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/HoverIcons.stories.js b/packages/html/stories/HoverIcons.stories.js index 9881096e1..b41cfafd2 100644 --- a/packages/html/stories/HoverIcons.stories.js +++ b/packages/html/stories/HoverIcons.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,21 +8,21 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxEvent, - mxRubberband, - mxImage, - mxRectangle, - mxUtils, - mxConnectionHandler - } = mxgraph; + Graph, + InternalEvent, + Rubberband, + ImageBox, + Rectangle, + utils, + ConnectionHandler, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -34,11 +34,7 @@ const Template = ({ label, ...args }) => { // Defines an icon for creating new connections in the connection handler. // This will automatically disable the highlighting of the source vertex. - mxConnectionHandler.prototype.connectImage = new mxImage( - 'images/connector.gif', - 16, - 16 - ); + ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16); // Defines a new class for all icons class mxIconSet { @@ -47,7 +43,7 @@ const Template = ({ label, ...args }) => { const { graph } = state.view; // Icon1 - let img = mxUtils.createImage('images/copy.png'); + let img = utils.createImage('images/copy.png'); img.setAttribute('title', 'Duplicate'); Object.assign(img.style, { cursor: 'pointer', @@ -58,10 +54,10 @@ const Template = ({ label, ...args }) => { top: `${state.y + state.height}px`, }); - mxEvent.addGestureListeners(img, evt => { + InternalEvent.addGestureListeners(img, (evt) => { const s = graph.gridSize; graph.setSelectionCells(graph.moveCells([state.cell], s, s, true)); - mxEvent.consume(evt); + InternalEvent.consume(evt); this.destroy(); }); @@ -69,7 +65,7 @@ const Template = ({ label, ...args }) => { this.images.push(img); // Delete - img = mxUtils.createImage('images/delete2.png'); + img = utils.createImage('images/delete2.png'); img.setAttribute('title', 'Delete'); Object.assign(img.style, { cursor: 'pointer', @@ -80,14 +76,14 @@ const Template = ({ label, ...args }) => { top: `${state.y - 16}px`, }); - mxEvent.addGestureListeners(img, evt => { + InternalEvent.addGestureListeners(img, (evt) => { // Disables dragging the image - mxEvent.consume(evt); + InternalEvent.consume(evt); }); - mxEvent.addListener(img, 'click', evt => { + InternalEvent.addListener(img, 'click', (evt) => { graph.removeCells([state.cell]); - mxEvent.consume(evt); + InternalEvent.consume(evt); this.destroy(); }); @@ -106,12 +102,11 @@ const Template = ({ label, ...args }) => { } // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setConnectable(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); // Defines the tolerance before removing the icons const ICON_TOLERANCE = 20; @@ -135,13 +130,13 @@ const Template = ({ label, ...args }) => { (me.getState() === this.currentState || me.getState() == null) ) { const tol = ICON_TOLERANCE; - const tmp = new mxRectangle( + const tmp = new Rectangle( me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol ); - if (mxUtils.intersects(tmp, this.currentState)) { + if (utils.intersects(tmp, this.currentState)) { return; } } @@ -149,10 +144,7 @@ const Template = ({ label, ...args }) => { let tmp = graph.view.getState(me.getCell()); // Ignore everything but vertices - if ( - graph.isMouseDown || - (tmp != null && !tmp.cell.isVertex()) - ) { + if (graph.isMouseDown || (tmp != null && !tmp.cell.isVertex())) { tmp = null; } @@ -210,6 +202,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/HoverStyle.stories.js b/packages/html/stories/HoverStyle.stories.js index 328968fc4..b186bc47c 100644 --- a/packages/html/stories/HoverStyle.stories.js +++ b/packages/html/stories/HoverStyle.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,18 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxConstants, - mxRubberband, - mxCloneUtils - } = mxgraph; + const { Graph, Constants, Rubberband, CloneUtils } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -30,7 +25,7 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); function updateStyle(state, hover) { if (hover) { @@ -42,9 +37,7 @@ const Template = ({ label, ...args }) => { // once it is set, whereas the above overrides the default value state.style.rounded = hover ? '1' : '0'; state.style.strokeWidth = hover ? '4' : '1'; - state.style.fontStyle = hover - ? mxConstants.FONT_BOLD - : '0'; + state.style.fontStyle = hover ? Constants.FONT_BOLD : '0'; } // Changes fill color to red on mouseover @@ -65,10 +58,7 @@ const Template = ({ label, ...args }) => { let tmp = graph.view.getState(me.getCell()); // Ignores everything but vertices - if ( - graph.isMouseDown || - (tmp != null && !tmp.cell.isVertex()) - ) { + if (graph.isMouseDown || (tmp != null && !tmp.cell.isVertex())) { tmp = null; } @@ -88,7 +78,7 @@ const Template = ({ label, ...args }) => { dragEnter(evt, state) { if (state != null) { this.previousStyle = state.style; - state.style = mxCloneUtils.clone(state.style); + state.style = CloneUtils.clone(state.style); updateStyle(state, true); state.shape.apply(state); state.shape.redraw(); @@ -115,8 +105,7 @@ const Template = ({ label, ...args }) => { }); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -134,6 +123,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Images.stories.js b/packages/html/stories/Images.stories.js index f591adf72..14c1bf1b4 100644 --- a/packages/html/stories/Images.stories.js +++ b/packages/html/stories/Images.stories.js @@ -1,23 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Icon_Images/Images', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxCloneUtils, - mxImage, - mxRectangle, - mxConstants, - mxPerimeter - } = mxgraph; + const { Graph, CloneUtils, ImageBox, Rectangle, Constants, Perimeter } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -28,16 +21,14 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Sets a background image and restricts child movement to its bounds - graph.setBackgroundImage( - new mxImage('images/gradient_background.jpg', 360, 200) - ); - graph.maximumGraphBounds = new mxRectangle(0, 0, 360, 200); + graph.setBackgroundImage(new ImageBox('images/gradient_background.jpg', 360, 200)); + graph.maximumGraphBounds = new Rectangle(0, 0, 360, 200); // Resizes the container but never make it bigger than the background - graph.minimumContainerSize = new mxRectangle(0, 0, 360, 200); + graph.minimumContainerSize = new Rectangle(0, 0, 360, 200); graph.setResizeContainer(true); // Disables basic selection and cell handling @@ -99,19 +90,19 @@ const Template = ({ label, ...args }) => { function configureStylesheet(graph) { let style = {}; - style.shape = mxConstants.SHAPE_IMAGE; - style.perimiter = mxPerimeter.RectanglePerimeter; + style.shape = Constants.SHAPE_IMAGE; + style.perimiter = Perimeter.RectanglePerimeter; style.image = 'images/icons48/keys.png'; style.fontColor = '#FFFFFF'; graph.getStylesheet().putCellStyle('image', style); - style = mxCloneUtils.clone(style); - style.shape = mxConstants.SHAPE_LABEL; + style = CloneUtils.clone(style); + style.shape = Constants.SHAPE_LABEL; style.strokeColor = '#000000'; - style.align = mxConstants.ALIGN_CENTER; - style.verticalAlign = mxConstants.ALIGN_TOP; - style.imageAlign = mxConstants.ALIGN_CENTER; - style.imageVerticalAlign = mxConstants.ALIGN_TOP; + style.align = Constants.ALIGN_CENTER; + style.verticalAlign = Constants.ALIGN_TOP; + style.imageAlign = Constants.ALIGN_CENTER; + style.imageVerticalAlign = Constants.ALIGN_TOP; style.image = 'images/icons48/gear.png'; style.imageWidth = '48'; style.imageHeight = '48'; @@ -119,31 +110,31 @@ const Template = ({ label, ...args }) => { style.spacing = '8'; graph.getStylesheet().putCellStyle('bottom', style); - style = mxCloneUtils.clone(style); - style.imageVerticalAlign = mxConstants.ALIGN_BOTTOM; + style = CloneUtils.clone(style); + style.imageVerticalAlign = Constants.ALIGN_BOTTOM; style.image = 'images/icons48/server.png'; delete style.spacingTop; graph.getStylesheet().putCellStyle('top', style); - style = mxCloneUtils.clone(style); - style.align = mxConstants.ALIGN_LEFT; - style.imageAlign = mxConstants.ALIGN_LEFT; - style.verticalAlign = mxConstants.ALIGN_MIDDLE; - style.imageVerticalAlign = mxConstants.ALIGN_MIDDLE; + style = CloneUtils.clone(style); + style.align = Constants.ALIGN_LEFT; + style.imageAlign = Constants.ALIGN_LEFT; + style.verticalAlign = Constants.ALIGN_MIDDLE; + style.imageVerticalAlign = Constants.ALIGN_MIDDLE; style.image = 'images/icons48/earth.png'; style.spacingLeft = '55'; style.spacing = '4'; graph.getStylesheet().putCellStyle('right', style); - style = mxCloneUtils.clone(style); - style.align = mxConstants.ALIGN_RIGHT; - style.imageAlign = mxConstants.ALIGN_RIGHT; + style = CloneUtils.clone(style); + style.align = Constants.ALIGN_RIGHT; + style.imageAlign = Constants.ALIGN_RIGHT; delete style.spacingLeft; style.spacingRight = '55'; graph.getStylesheet().putCellStyle('left', style); } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Indicators.stories.js b/packages/html/stories/Indicators.stories.js index 067f50d56..c92ccd8e9 100644 --- a/packages/html/stories/Indicators.stories.js +++ b/packages/html/stories/Indicators.stories.js @@ -1,21 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Icon_Images/Indicators', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxEdgeStyle, - mxConstants, - mxKeyHandler - } = mxgraph; + const { Graph, EdgeStyle, Constants, mxKeyHandler } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -26,7 +21,7 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setConnectable(true); new mxKeyHandler(graph); @@ -50,8 +45,8 @@ const Template = ({ label, ...args }) => { // Creates a style with an indicator style = graph.getStylesheet().getDefaultEdgeStyle(); - style.edge = mxEdgeStyle.ElbowConnector; - style.elbow = mxConstants.ELBOW_VERTICAL; + style.edge = EdgeStyle.ElbowConnector; + style.elbow = Constants.ELBOW_VERTICAL; style.rounded = true; // Gets the default parent for inserting new cells. This @@ -88,6 +83,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/JsonData.stories.js b/packages/html/stories/JsonData.stories.js index 16127d13c..7ffcae502 100644 --- a/packages/html/stories/JsonData.stories.js +++ b/packages/html/stories/JsonData.stories.js @@ -1,27 +1,27 @@ -import mxgraph from '@mxgraph/core'; -import { popup } from '@mxgraph/core/src/util/gui/mxWindow'; +import maxgraph from '@maxgraph/core'; +import { popup } from '@maxgraph/core/util/gui/mxWindow'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Xml_Json/JsonData', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, + Graph, mxObjectCodec, mxDomHelpers, mxCodecRegistry, - mxEvent, + InternalEvent, mxClient, mxCodec, mxDomUtils, - mxUtils - } = mxgraph; + utils, + } = maxgraph; mxClient.setImageBasePath('/images'); @@ -41,12 +41,12 @@ const Template = ({ label, ...args }) => { this.value = value; } const codec = new mxObjectCodec(new CustomData()); - codec.encode = function(enc, obj) { + codec.encode = function (enc, obj) { const node = enc.document.createElement('CustomData'); mxDomUtils.setTextContent(node, JSON.stringify(obj)); return node; }; - codec.decode = function(dec, node, into) { + codec.decode = function (dec, node, into) { const obj = JSON.parse(mxDomUtils.getTextContent(node)); obj.constructor = CustomData; @@ -55,15 +55,13 @@ const Template = ({ label, ...args }) => { mxCodecRegistry.register(codec); // Disables the built-in context menu - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Creates the graph inside the given container - const graph = new mxGraph(container); + 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). @@ -86,14 +84,14 @@ const Template = ({ label, ...args }) => { div.appendChild(buttons); buttons.appendChild( - mxDomHelpers.button('Show JSON', function() { + mxDomHelpers.button('Show JSON', function () { const encoder = new mxCodec(); const node = encoder.encode(graph.getModel()); - popup(mxUtils.getXml(node), true); + popup(utils.getXml(node), true); }) ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/LabelPosition.stories.js b/packages/html/stories/LabelPosition.stories.js index b6ce0158a..553fcb971 100644 --- a/packages/html/stories/LabelPosition.stories.js +++ b/packages/html/stories/LabelPosition.stories.js @@ -1,18 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Labels/LabelPosition', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph - } = mxgraph; + const { Graph } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -23,7 +21,7 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). @@ -36,7 +34,7 @@ const Template = ({ label, ...args }) => { // label positions using the label position styles. Vertical // and horizontal label position styles can be combined. // Note: Alternatively, vertex labels can be set be overriding - // mxCellRenderer.getLabelBounds. + // CellRenderer.getLabelBounds. graph.getModel().beginUpdate(); try { graph.insertVertex( @@ -85,6 +83,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Labels.stories.js b/packages/html/stories/Labels.stories.js index 6ac9580c9..9b4ec3f9e 100644 --- a/packages/html/stories/Labels.stories.js +++ b/packages/html/stories/Labels.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,19 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRubberband, - mxKeyHandler, - mxConstants, - mxRectangle - } = mxgraph; + const { Graph, Rubberband, mxKeyHandler, Constants, Rectangle } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -31,13 +25,12 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setTooltips(true); graph.htmlLabels = true; graph.vertexLabelsMovable = true; - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); new mxKeyHandler(graph); @@ -48,32 +41,30 @@ const Template = ({ label, ...args }) => { graph.autoSizeCellsOnAdd = true; // Allows moving of relative cells - graph.isCellLocked = function(cell) { + graph.isCellLocked = function (cell) { return this.isCellsLocked(); }; - graph.isCellResizable = function(cell) { + graph.isCellResizable = function (cell) { const geo = cell.getGeometry(); return geo == null || !geo.relative; }; // Truncates the label to the size of the vertex - graph.getLabel = function(cell) { + graph.getLabel = function (cell) { const label = this.labelsVisible ? this.convertValueToString(cell) : ''; const geometry = cell.getGeometry(); if ( !cell.isCollapsed() && geometry != null && - (geometry.offset == null || - (geometry.offset.x == 0 && geometry.offset.y == 0)) && + (geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0)) && cell.isVertex() && geometry.width >= 2 ) { const style = this.getCellStyle(cell); - const fontSize = - style.fontSize || mxConstants.DEFAULT_FONTSIZE; + const fontSize = style.fontSize || Constants.DEFAULT_FONTSIZE; const max = geometry.width / (fontSize * 0.625); if (max < label.length) { @@ -85,19 +76,18 @@ const Template = ({ label, ...args }) => { }; // Enables wrapping for vertex labels - graph.isWrapping = function(cell) { + graph.isWrapping = function (cell) { return cell.isCollapsed(); }; // Enables clipping of vertex labels if no offset is defined - graph.isLabelClipped = function(cell) { + graph.isLabelClipped = function (cell) { const geometry = cell.getGeometry(); return ( geometry != null && !geometry.relative && - (geometry.offset == null || - (geometry.offset.x == 0 && geometry.offset.y == 0)) + (geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0)) ); }; @@ -108,39 +98,11 @@ const Template = ({ label, ...args }) => { // Adds cells to the model in a single step graph.getModel().beginUpdate(); try { - const v1 = graph.insertVertex( - parent, - null, - 'vertexLabelsMovable', - 20, - 20, - 80, - 30 - ); + const v1 = graph.insertVertex(parent, null, 'vertexLabelsMovable', 20, 20, 80, 30); // Places sublabels inside the vertex - const label11 = graph.insertVertex( - v1, - null, - 'Label1', - 0.5, - 1, - 0, - 0, - null, - true - ); - const label12 = graph.insertVertex( - v1, - null, - 'Label2', - 0.5, - 0, - 0, - 0, - null, - true - ); + const label11 = graph.insertVertex(v1, null, 'Label1', 0.5, 1, 0, 0, null, true); + const label12 = graph.insertVertex(v1, null, 'Label2', 0.5, 0, 0, 0, null, true); const v2 = graph.insertVertex( parent, @@ -151,38 +113,18 @@ const Template = ({ label, ...args }) => { 80, 30 ); - v2.geometry.alternateBounds = new mxRectangle(0, 0, 80, 30); + v2.geometry.alternateBounds = new Rectangle(0, 0, 80, 30); const e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2); // Places sublabels inside the vertex - const label21 = graph.insertVertex( - v2, - null, - 'Label1', - 0.5, - 1, - 0, - 0, - null, - true - ); - const label22 = graph.insertVertex( - v2, - null, - 'Label2', - 0.5, - 0, - 0, - 0, - null, - true - ); + const label21 = graph.insertVertex(v2, null, 'Label1', 0.5, 1, 0, 0, null, true); + const label22 = graph.insertVertex(v2, null, 'Label2', 0.5, 0, 0, 0, null, true); } finally { // Updates the display graph.getModel().endUpdate(); } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Layers.stories.js b/packages/html/stories/Layers.stories.js index cc394e11c..86277bf04 100644 --- a/packages/html/stories/Layers.stories.js +++ b/packages/html/stories/Layers.stories.js @@ -1,22 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Layouts/Layers', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxDomHelpers, - mxCell, - mxGraphModel, - mxPoint - } = mxgraph; + const { Graph, mxDomHelpers, Cell, GraphModel, Point } = maxgraph; const div = document.createElement('div'); @@ -31,13 +25,13 @@ const Template = ({ label, ...args }) => { // Creates the graph inside the given container using a model // with a custom root and two layers. Layers can also be added - // dynamically using let layer = model.add(root, new mxCell()). - const root = new mxCell(); - const layer0 = root.insert(new mxCell()); - const layer1 = root.insert(new mxCell()); - const model = new mxGraphModel(root); + // dynamically using let layer = model.add(root, new Cell()). + const root = new Cell(); + const layer0 = root.insert(new Cell()); + const layer1 = root.insert(new Cell()); + const model = new GraphModel(root); - const graph = new mxGraph(container, model); + const graph = new Graph(container, model); // Disables basic selection and cell handling graph.setEnabled(false); @@ -70,17 +64,10 @@ const Template = ({ label, ...args }) => { 'fillColor=#C0C0C0' ); const v3 = graph.insertVertex(layer0, null, 'World!', 110, 150, 80, 30); - const e1 = graph.insertEdge( - layer1, - null, - '', - v1, - v3, - 'strokeColor=#0C0C0C' - ); - e1.geometry.points = [new mxPoint(60, 165)]; + const e1 = graph.insertEdge(layer1, null, '', v1, v3, 'strokeColor=#0C0C0C'); + e1.geometry.points = [new Point(60, 165)]; const e2 = graph.insertEdge(layer0, null, '', v2, v3); - e2.geometry.points = [new mxPoint(240, 165)]; + e2.geometry.points = [new Point(240, 165)]; const e3 = graph.insertEdge( layer0, null, @@ -89,7 +76,7 @@ const Template = ({ label, ...args }) => { v2, 'edgeStyle=topToBottomEdgeStyle' ); - e3.geometry.points = [new mxPoint(150, 30)]; + e3.geometry.points = [new Point(150, 30)]; const e4 = graph.insertEdge( layer1, null, @@ -98,7 +85,7 @@ const Template = ({ label, ...args }) => { v1, 'strokeColor=#0C0C0C;edgeStyle=topToBottomEdgeStyle' ); - e4.geometry.points = [new mxPoint(150, 40)]; + e4.geometry.points = [new Point(150, 40)]; } finally { // Updates the display model.endUpdate(); @@ -108,18 +95,18 @@ const Template = ({ label, ...args }) => { div.appendChild(buttons); buttons.appendChild( - mxDomHelpers.button('Layer 0', function() { + mxDomHelpers.button('Layer 0', function () { model.setVisible(layer0, !layer0.isVisible()); }) ); buttons.appendChild( - mxDomHelpers.button('Layer 1', function() { + mxDomHelpers.button('Layer 1', function () { model.setVisible(layer1, !layer1.isVisible()); }) ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/LoD.stories.js b/packages/html/stories/LoD.stories.js index e4f1d17cd..b84415b9c 100644 --- a/packages/html/stories/LoD.stories.js +++ b/packages/html/stories/LoD.stories.js @@ -1,19 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Zoom_OffPage/LoD', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxDomHelpers - } = mxgraph; + const { Graph, mxDomHelpers } = maxgraph; const div = document.createElement('div'); @@ -27,11 +24,11 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.centerZoom = false; // Links level of detail to zoom level but can be independent of zoom - const isVisible = function() { + const isVisible = function () { return this.lod == null || this.lod / 2 < graph.view.scale; }; @@ -74,18 +71,18 @@ const Template = ({ label, ...args }) => { div.appendChild(buttons); buttons.appendChild( - mxDomHelpers.button('+', function() { + mxDomHelpers.button('+', function () { graph.zoomIn(); }) ); buttons.appendChild( - mxDomHelpers.button('-', function() { + mxDomHelpers.button('-', function () { graph.zoomOut(); }) ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Markers.stories.js b/packages/html/stories/Markers.stories.js index 77bcffee0..4068889a7 100644 --- a/packages/html/stories/Markers.stories.js +++ b/packages/html/stories/Markers.stories.js @@ -1,25 +1,25 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Icon_Images/Markers', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxEdgeHandler, - mxGraphHandler, - mxCellRenderer, - mxMarker, - mxCylinder, - mxArrow, - mxPoint - } = mxgraph; + Graph, + EdgeHandler, + GraphHandler, + CellRenderer, + Marker, + CylinderShape, + Arrow, + Point, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -30,38 +30,27 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Enables guides - mxGraphHandler.prototype.guidesEnabled = true; - mxEdgeHandler.prototype.snapToTerminals = true; + GraphHandler.prototype.guidesEnabled = true; + EdgeHandler.prototype.snapToTerminals = true; // Registers and defines the custom marker - mxMarker.addMarker('dash', function( - canvas, - shape, - type, - pe, - unitX, - unitY, - size, - source, - sw, - filled - ) { - const nx = unitX * (size + sw + 1); - const ny = unitY * (size + sw + 1); + Marker.addMarker( + 'dash', + function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) { + const nx = unitX * (size + sw + 1); + const ny = unitY * (size + sw + 1); - return function() { - canvas.begin(); - canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2); - canvas.lineTo( - pe.x + ny / 2 - (3 * nx) / 2, - pe.y - (3 * ny) / 2 - nx / 2 - ); - canvas.stroke(); - }; - }); + return function () { + canvas.begin(); + canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2); + canvas.lineTo(pe.x + ny / 2 - (3 * nx) / 2, pe.y - (3 * ny) / 2 - nx / 2); + canvas.stroke(); + }; + } + ); // Defines custom message shape - class MessageShape extends mxCylinder { + class MessageShape extends CylinderShape { redrawPath(path, x, y, w, h, isForeground) { if (isForeground) { path.moveTo(0, 0); @@ -76,10 +65,10 @@ const Template = ({ label, ...args }) => { } } } - mxCellRenderer.registerShape('message', MessageShape); + CellRenderer.registerShape('message', MessageShape); // Defines custom edge shape - class LinkShape extends mxArrow { + class LinkShape extends Arrow { paintEdgeShape(c, pts) { const width = 10; @@ -121,10 +110,10 @@ const Template = ({ label, ...args }) => { c.stroke(); } } - mxCellRenderer.registerShape('link', LinkShape); + CellRenderer.registerShape('link', LinkShape); // Creates the graph - const graph = new mxGraph(container); + const graph = new Graph(container); // Sets default styles let style = graph.getStylesheet().getDefaultVertexStyle(); @@ -167,7 +156,7 @@ const Template = ({ label, ...args }) => { 14, 'shape=message;labelBackgroundColor=#ffffff;labelPosition=left;spacingRight=2;align=right;fontStyle=0;' ); - e11.geometry.offset = new mxPoint(-10, -7); + e11.geometry.offset = new Point(-10, -7); e11.geometry.relative = true; e11.connectable = false; @@ -215,6 +204,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Merge.stories.js b/packages/html/stories/Merge.stories.js index fcd176d04..68f2db6a0 100644 --- a/packages/html/stories/Merge.stories.js +++ b/packages/html/stories/Merge.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,18 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxPerimeter, - mxConstants, - mxRubberband - } = mxgraph; + const { Graph, Perimeter, Constants, Rubberband } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -29,34 +24,33 @@ const Template = ({ label, ...args }) => { container.style.background = 'url(/images/grid.gif)'; container.style.cursor = 'default'; - mxConstants.SHADOWCOLOR = '#c0c0c0'; + Constants.SHADOWCOLOR = '#c0c0c0'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // No size handles, please... graph.setCellsResizable(false); // Makes all cells round with a white, bold label let style = graph.stylesheet.getDefaultVertexStyle(); - style.shape = mxConstants.SHAPE_ELLIPSE; - style.perimiter = mxPerimeter.EllipsePerimeter; + style.shape = Constants.SHAPE_ELLIPSE; + style.perimiter = Perimeter.EllipsePerimeter; style.fontColor = 'white'; style.gradientColor = 'white'; - style.fontStyle = mxConstants.FONT_BOLD; + style.fontStyle = Constants.FONT_BOLD; style.fontSize = 14; style.shadow = true; // Makes all edge labels gray with a white background style = graph.stylesheet.getDefaultEdgeStyle(); style.fontColor = 'gray'; - style.fontStyle = mxConstants.FONT_BOLD; + style.fontStyle = Constants.FONT_BOLD; style.fontColor = 'black'; style.strokeWidth = 2; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -69,46 +63,10 @@ const Template = ({ label, ...args }) => { graph.getModel().beginUpdate(); try { - const a = graph.insertVertex( - parent, - 'a', - 'A', - 20, - 20, - w, - h, - 'fillColor=blue' - ); - const b = graph.insertVertex( - parent, - 'b', - 'B', - 20, - 200, - w, - h, - 'fillColor=blue' - ); - const c = graph.insertVertex( - parent, - 'c', - 'C', - 200, - 20, - w, - h, - 'fillColor=red' - ); - const d = graph.insertVertex( - parent, - 'd', - 'D', - 200, - 200, - w, - h, - 'fillColor=red' - ); + const a = graph.insertVertex(parent, 'a', 'A', 20, 20, w, h, 'fillColor=blue'); + const b = graph.insertVertex(parent, 'b', 'B', 20, 200, w, h, 'fillColor=blue'); + const c = graph.insertVertex(parent, 'c', 'C', 200, 20, w, h, 'fillColor=red'); + const d = graph.insertVertex(parent, 'd', 'D', 200, 200, w, h, 'fillColor=red'); const ac = graph.insertEdge( parent, 'ac', @@ -139,7 +97,7 @@ const Template = ({ label, ...args }) => { } // Creates the second graph model (without a container) - const graph2 = new mxGraph(); + const graph2 = new Graph(); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). @@ -149,46 +107,10 @@ const Template = ({ label, ...args }) => { // using custom ids for the vertices graph2.getModel().beginUpdate(); try { - const c = graph2.insertVertex( - parent2, - 'c', - 'C', - 200, - 20, - w, - h, - 'fillColor=green' - ); - const d = graph2.insertVertex( - parent2, - 'd', - 'D', - 200, - 200, - w, - h, - 'fillColor=green' - ); - const e = graph2.insertVertex( - parent2, - 'e', - 'E', - 400, - 20, - w, - h, - 'fillColor=green' - ); - const f = graph2.insertVertex( - parent2, - 'f', - 'F', - 400, - 200, - w, - h, - 'fillColor=green' - ); + const c = graph2.insertVertex(parent2, 'c', 'C', 200, 20, w, h, 'fillColor=green'); + const d = graph2.insertVertex(parent2, 'd', 'D', 200, 200, w, h, 'fillColor=green'); + const e = graph2.insertVertex(parent2, 'e', 'E', 400, 20, w, h, 'fillColor=green'); + const f = graph2.insertVertex(parent2, 'f', 'F', 400, 200, w, h, 'fillColor=green'); const ce = graph2.insertEdge( parent2, 'ce', @@ -227,6 +149,6 @@ const Template = ({ label, ...args }) => { graph.getModel().mergeChildren(parent2, parent /* , false */); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Monitor.stories.js b/packages/html/stories/Monitor.stories.js index 6832d8974..b3b58b27c 100644 --- a/packages/html/stories/Monitor.stories.js +++ b/packages/html/stories/Monitor.stories.js @@ -1,26 +1,26 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Misc/Monitor', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxEdgeStyle, + Graph, + EdgeStyle, mxDomHelpers, mxXmlUtils, - mxPerimeter, - mxUtils, - mxConstants, - mxCloneUtils, - mxCodec - } = mxgraph; + Perimeter, + utils, + Constants, + CloneUtils, + mxCodec, + } = maxgraph; const div = document.createElement('div'); @@ -33,50 +33,50 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; div.appendChild(container); - mxConstants.SHADOWCOLOR = '#e0e0e0'; + Constants.SHADOWCOLOR = '#e0e0e0'; // Creates the graph inside the given container const graph = createGraph(container); // Creates a process display using the activity names as IDs to refer to the elements const xml = - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + ''; const doc = mxXmlUtils.parseXml(xml); const codec = new mxCodec(doc); @@ -87,8 +87,8 @@ const Template = ({ label, ...args }) => { // Creates a button to invoke the refresh function buttons.appendChild( - mxDomHelpers.button('Update', function(evt) { - // XML is normally fetched from URL at server using mxUtils.get - this is a client-side + mxDomHelpers.button('Update', function (evt) { + // XML is normally fetched from URL at server using utils.get - this is a client-side // string with randomized states to demonstrate the idea of the workflow monitor const xml = `` + @@ -124,30 +124,16 @@ const Template = ({ label, ...args }) => { // Updates the cell color and adds some tooltip information if (cell != null) { // Resets the fillcolor and the overlay - graph.setCellStyles('fillColor', 'white', [ - cell, - ]); + graph.setCellStyles('fillColor', 'white', [cell]); graph.removeCellOverlays(cell); // Changes the cell color for the known states if (state == 'Running') { - graph.setCellStyles( - 'fillColor', - '#f8cecc', - [cell] - ); + graph.setCellStyles('fillColor', '#f8cecc', [cell]); } else if (state == 'Waiting') { - graph.setCellStyles( - 'fillColor', - '#fff2cc', - [cell] - ); + graph.setCellStyles('fillColor', '#fff2cc', [cell]); } else if (state == 'Completed') { - graph.setCellStyles( - 'fillColor', - '#d4e1f5', - [cell] - ); + graph.setCellStyles('fillColor', '#d4e1f5', [cell]); } // Adds tooltip information using an overlay icon @@ -176,8 +162,8 @@ const Template = ({ label, ...args }) => { const overlay = new CellOverlay(image, tooltip); // Installs a handler for clicks on the overlay - overlay.addListener(mxEvent.CLICK, function(sender, evt) { - mxUtils.alert(`${tooltip}\nLast update: ${new Date()}`); + overlay.addListener(InternalEvent.CLICK, function (sender, evt) { + utils.alert(`${tooltip}\nLast update: ${new Date()}`); }); return overlay; @@ -187,12 +173,12 @@ const Template = ({ label, ...args }) => { * Creates and returns an empty graph inside the given container. */ function createGraph(container) { - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setTooltips(true); graph.setEnabled(false); // Disables folding - graph.isCellFoldable = function(cell, collapse) { + graph.isCellFoldable = function (cell, collapse) { return false; }; @@ -203,20 +189,20 @@ const Template = ({ label, ...args }) => { style.strokeColor = '#808080'; style.fillColor = 'white'; style.gradientColor = 'white'; - style.gradientDirection = mxConstants.DIRECTION_EAST; + style.gradientDirection = Constants.DIRECTION_EAST; style.rounded = true; style.shadow = true; style.fontStyle = 1; style = graph.getStylesheet().getDefaultEdgeStyle(); - style.edge = mxEdgeStyle.ElbowConnector; + style.edge = EdgeStyle.ElbowConnector; style.strokeColor = '#808080'; style.rounded = true; style.shadow = true; style = []; - style.shape = mxConstants.SHAPE_SWIMLANE; - style.perimiter = mxPerimeter.RectanglePerimeter; + style.shape = Constants.SHAPE_SWIMLANE; + style.perimiter = Perimeter.RectanglePerimeter; style.strokeColor = '#a0a0a0'; style.fontColor = '#606060'; style.fillColor = '#E0E0DF'; @@ -232,30 +218,30 @@ const Template = ({ label, ...args }) => { graph.getStylesheet().putCellStyle('swimlane', style); style = []; - style.shape = mxConstants.SHAPE_RHOMBUS; - style.perimiter = mxPerimeter.RhombusPerimeter; + style.shape = Constants.SHAPE_RHOMBUS; + style.perimiter = Perimeter.RhombusPerimeter; style.strokeColor = '#91BCC0'; style.fontColor = 'gray'; style.fillColor = '#91BCC0'; style.gradientColor = 'white'; - style.align = mxConstants.ALIGN_CENTER; - style.verticalAlign = mxConstants.ALIGN_MIDDLE; + style.align = Constants.ALIGN_CENTER; + style.verticalAlign = Constants.ALIGN_MIDDLE; style.fontSize = 16; graph.getStylesheet().putCellStyle('step', style); style = []; - style.shape = mxConstants.SHAPE_ELLIPSE; - style.perimiter = mxPerimeter.EllipsePerimeter; + style.shape = Constants.SHAPE_ELLIPSE; + style.perimiter = Perimeter.EllipsePerimeter; style.fontColor = 'gray'; style.fillColor = '#A0C88F'; style.gradientColor = 'white'; style.strokeColor = '#A0C88F'; - style.align = mxConstants.ALIGN_CENTER; - style.verticalAlign = mxConstants.ALIGN_MIDDLE; + style.align = Constants.ALIGN_CENTER; + style.verticalAlign = Constants.ALIGN_MIDDLE; style.fontSize = 16; graph.getStylesheet().putCellStyle('start', style); - style = mxCloneUtils.clone(style); + style = CloneUtils.clone(style); style.fillColor = '#DACCBC'; style.strokeColor = '#AF7F73'; graph.getStylesheet().putCellStyle('end', style); @@ -282,6 +268,6 @@ const Template = ({ label, ...args }) => { } return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Morph.stories.js b/packages/html/stories/Morph.stories.js index e54bcdb0e..64e7e3302 100644 --- a/packages/html/stories/Morph.stories.js +++ b/packages/html/stories/Morph.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,23 +8,17 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxDomHelpers, - mxMorphing, - mxEvent, - mxRubberband - } = mxgraph; + const { Graph, mxDomHelpers, mxMorphing, InternalEvent, Rubberband } = maxgraph; const div = document.createElement('div'); @@ -38,15 +32,13 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Disables the built-in context menu - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -71,7 +63,7 @@ const Template = ({ label, ...args }) => { div.appendChild(buttons); buttons.appendChild( - mxDomHelpers.button('Morph', function() { + mxDomHelpers.button('Morph', function () { graph.clearSelection(); graph.getModel().beginUpdate(); @@ -88,7 +80,7 @@ const Template = ({ label, ...args }) => { } finally { // Arguments are number of steps, ease and delay const morph = new mxMorphing(graph, 20, 1.2, 20); - morph.addListener(mxEvent.DONE, function() { + morph.addListener(InternalEvent.DONE, function () { graph.getModel().endUpdate(); }); morph.startAnimation(); @@ -99,6 +91,6 @@ const Template = ({ label, ...args }) => { ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/OffPage.stories.js b/packages/html/stories/OffPage.stories.js index 0e27e7002..67e59a4d0 100644 --- a/packages/html/stories/OffPage.stories.js +++ b/packages/html/stories/OffPage.stories.js @@ -1,21 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Zoom_OffPage/OffPage', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxCellTracker, - mxConstants, - mxEvent - } = mxgraph; + const { Graph, CellTracker, Constants, InternalEvent } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -26,21 +21,17 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Use complete cell as highlight region - mxConstants.ACTIVE_REGION = 1; + Constants.ACTIVE_REGION = 1; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setEnabled(false); // Highlights offpage connectors - const highlight = new mxCellTracker(graph, null, function(me) { + const highlight = new CellTracker(graph, null, function (me) { const cell = me.getCell(); - if ( - cell != null && - cell.value != null && - typeof cell.value.create === 'function' - ) { + if (cell != null && cell.value != null && typeof cell.value.create === 'function') { return cell; } @@ -49,26 +40,18 @@ const Template = ({ label, ...args }) => { // Handles clicks on offpage connectors and // executes function in user object - graph.addListener(mxEvent.CLICK, function(source, evt) { + graph.addListener(InternalEvent.CLICK, function (source, evt) { const cell = evt.getProperty('cell'); - if ( - cell != null && - cell.value != null && - typeof cell.value.create === 'function' - ) { + if (cell != null && cell.value != null && typeof cell.value.create === 'function') { cell.value.create(); } }); // Handles clicks on offpage connectors and // executes function in user object - graph.getCursorForCell = function(cell) { - if ( - cell != null && - cell.value != null && - typeof cell.value.create === 'function' - ) { + graph.getCursorForCell = function (cell) { + if (cell != null && cell.value != null && typeof cell.value.create === 'function') { return 'pointer'; } }; @@ -78,7 +61,7 @@ const Template = ({ label, ...args }) => { let first = null; let second = null; - first = function() { + first = function () { const value = { toString() { return 'Next'; @@ -122,21 +105,14 @@ const Template = ({ label, ...args }) => { 40, 'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE' ); - const e1 = graph.insertEdge( - parent, - null, - null, - v1, - v2, - 'strokeColor=#FF1A00' - ); + const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#FF1A00'); } finally { // Updates the display graph.getModel().endUpdate(); } }; - second = function() { + second = function () { const value = { toString() { return 'Prev'; @@ -180,14 +156,7 @@ const Template = ({ label, ...args }) => { 40, 'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west' ); - const e1 = graph.insertEdge( - parent, - null, - null, - v1, - v2, - 'strokeColor=#008C00' - ); + const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#008C00'); } finally { // Updates the display graph.getModel().endUpdate(); @@ -197,6 +166,6 @@ const Template = ({ label, ...args }) => { first(); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/OrgChart.stories.js b/packages/html/stories/OrgChart.stories.js index fe531188c..f848ebf72 100644 --- a/packages/html/stories/OrgChart.stories.js +++ b/packages/html/stories/OrgChart.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,28 +8,28 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false - } - } + defaultValue: false, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxConstants, - mxEvent, + Graph, + Constants, + InternalEvent, mxClient, - mxPoint, - mxOutline, - mxEdgeStyle, + Point, + Outline, + EdgeStyle, mxKeyHandler, - mxCompactTreeLayout, - mxLayoutManager, - mxCellOverlay, - mxImage, - mxUtils, - mxToolbar - } = mxgraph; + CompactTreeLayout, + LayoutManager, + CellOverlay, + ImageBox, + utils, + mxToolbar, + } = maxgraph; const div = document.createElement('div'); @@ -43,24 +43,22 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Makes the shadow brighter - mxConstants.SHADOWCOLOR = '#C0C0C0'; + Constants.SHADOWCOLOR = '#C0C0C0'; const outline = document.getElementById('outlineContainer'); - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Sets a gradient background if (mxClient.IS_GC || mxClient.IS_SF) { container.style.background = '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E7E7E7))'; } else if (mxClient.IS_NS) { - container.style.background = - '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)'; + container.style.background = '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)'; } // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Enables automatic sizing for vertices after editing and // panning by using the left mouse button. @@ -78,7 +76,7 @@ const Template = ({ label, ...args }) => { // Creates the outline (navigator, overview) for moving // around the graph in the top, right corner of the window. - const outln = new mxOutline(graph, outline); + const outln = new Outline(graph, outline); // Disables tooltips on touch devices graph.setTooltips(!mxClient.IS_TOUCH); @@ -87,8 +85,8 @@ const Template = ({ label, ...args }) => { let style = graph.getStylesheet().getDefaultVertexStyle(); style.shape = 'label'; - style.verticalAlign = mxConstants.ALIGN_MIDDLE; - style.align = mxConstants.ALIGN_LEFT; + style.verticalAlign = Constants.ALIGN_MIDDLE; + style.align = Constants.ALIGN_LEFT; style.spacingLeft = 54; style.gradientColor = '#7d85df'; @@ -121,7 +119,7 @@ const Template = ({ label, ...args }) => { style.entryPerimeter = 0; // disabled // Disable the following for straight lines - style.edge = mxEdgeStyle.TopToBottom; + style.edge = EdgeStyle.TopToBottom; // Stops editing on enter or escape keypress const keyHandler = new mxKeyHandler(graph); @@ -129,7 +127,7 @@ const Template = ({ label, ...args }) => { // Enables automatic layout on the graph and installs // a tree layout for all groups who's children are // being changed, added or removed. - const layout = new mxCompactTreeLayout(graph, false); + const layout = new CompactTreeLayout(graph, false); layout.useBoundingBox = false; layout.edgeRouting = false; layout.levelDistance = 60; @@ -137,26 +135,26 @@ const Template = ({ label, ...args }) => { // Allows the layout to move cells even though cells // aren't movable in the graph - layout.isVertexMovable = function(cell) { + layout.isVertexMovable = function (cell) { return true; }; - const layoutMgr = new mxLayoutManager(graph); + const layoutMgr = new LayoutManager(graph); - layoutMgr.getLayout = function(cell) { + layoutMgr.getLayout = function (cell) { if (cell.getChildCount() > 0) { return layout; } }; // Installs a popupmenu handler using local function (see below). - graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) { + graph.popupMenuHandler.factoryMethod = function (menu, cell, evt) { return createPopupMenu(graph, menu, cell, evt); }; // Fix for wrong preferred size const oldGetPreferredSizeForCell = graph.getPreferredSizeForCell; - graph.getPreferredSizeForCell = function(cell) { + graph.getPreferredSizeForCell = function (cell) { const result = oldGetPreferredSizeForCell.apply(this, arguments); if (result != null) { @@ -167,13 +165,13 @@ const Template = ({ label, ...args }) => { }; // Sets the maximum text scale to 1 - graph.cellRenderer.getTextScale = function(state) { + graph.cellRenderer.getTextScale = function (state) { return Math.min(1, state.view.scale); }; // Dynamically adds text to the label as we zoom in // (without affecting the preferred size for new cells) - graph.cellRenderer.getLabelValue = function(state) { + graph.cellRenderer.getLabelValue = function (state) { let result = state.cell.value; if (state.cell.isVertex()) { @@ -219,28 +217,28 @@ const Template = ({ label, ...args }) => { div.appendChild(content); const tb = new mxToolbar(content); - tb.addItem('Zoom In', 'images/zoom_in32.png', function(evt) { + tb.addItem('Zoom In', 'images/zoom_in32.png', function (evt) { graph.zoomIn(); }); - tb.addItem('Zoom Out', 'images/zoom_out32.png', function(evt) { + tb.addItem('Zoom Out', 'images/zoom_out32.png', function (evt) { graph.zoomOut(); }); - tb.addItem('Actual Size', 'images/view_1_132.png', function(evt) { + tb.addItem('Actual Size', 'images/view_1_132.png', function (evt) { graph.zoomActual(); }); - tb.addItem('Print', 'images/print32.png', function(evt) { + tb.addItem('Print', 'images/print32.png', function (evt) { const preview = new PrintPreview(graph, 1); preview.open(); }); - tb.addItem('Poster Print', 'images/press32.png', function(evt) { - const pageCount = mxUtils.prompt('Enter maximum page count', '1'); + tb.addItem('Poster Print', 'images/press32.png', function (evt) { + const pageCount = utils.prompt('Enter maximum page count', '1'); if (pageCount != null) { - const scale = mxUtils.getScaleForPageCount(pageCount, graph); + const scale = utils.getScaleForPageCount(pageCount, graph); const preview = new PrintPreview(graph, scale); preview.open(); } @@ -252,21 +250,17 @@ const Template = ({ label, ...args }) => { if (cell != null) { if (cell.isVertex()) { - menu.addItem( - 'Add child', - '/images/overlays/check.png', - function() { - addChild(graph, cell); - } - ); + menu.addItem('Add child', '/images/overlays/check.png', function () { + addChild(graph, cell); + }); } - menu.addItem('Edit label', '/images/text.gif', function() { + menu.addItem('Edit label', '/images/text.gif', function () { graph.startEditingAtCell(cell); }); if (cell.id != 'treeRoot' && cell.isVertex()) { - menu.addItem('Delete', '/images/delete.gif', function() { + menu.addItem('Delete', '/images/delete.gif', function () { deleteSubtree(graph, cell); }); } @@ -274,26 +268,26 @@ const Template = ({ label, ...args }) => { menu.addSeparator(); } - menu.addItem('Fit', '/images/zoom.gif', function() { + menu.addItem('Fit', '/images/zoom.gif', function () { graph.fit(); }); - menu.addItem('Actual', '/images/zoomactual.gif', function() { + menu.addItem('Actual', '/images/zoomactual.gif', function () { graph.zoomActual(); }); menu.addSeparator(); - menu.addItem('Print', '/images/print.gif', function() { + menu.addItem('Print', '/images/print.gif', function () { const preview = new PrintPreview(graph, 1); preview.open(); }); - menu.addItem('Poster Print', '/images/print.gif', function() { - const pageCount = mxUtils.prompt('Enter maximum page count', '1'); + menu.addItem('Poster Print', '/images/print.gif', function () { + const pageCount = utils.prompt('Enter maximum page count', '1'); if (pageCount != null) { - const scale = mxUtils.getScaleForPageCount(pageCount, graph); + const scale = utils.getScaleForPageCount(pageCount, graph); const preview = new PrintPreview(graph, scale); preview.open(); } @@ -301,36 +295,24 @@ const Template = ({ label, ...args }) => { } function addOverlays(graph, cell, addDeleteIcon) { - let overlay = new mxCellOverlay( - new mxImage('images/add.png', 24, 24), - 'Add child' - ); + let overlay = new CellOverlay(new ImageBox('images/add.png', 24, 24), 'Add child'); overlay.cursor = 'hand'; - overlay.align = mxConstants.ALIGN_CENTER; - overlay.addListener( - mxEvent.CLICK, - (sender, evt) => { - addChild(graph, cell); - } - ); + overlay.align = Constants.ALIGN_CENTER; + overlay.addListener(InternalEvent.CLICK, (sender, evt) => { + addChild(graph, cell); + }); graph.addCellOverlay(cell, overlay); if (addDeleteIcon) { - overlay = new mxCellOverlay( - new mxImage('images/close.png', 30, 30), - 'Delete' - ); + overlay = new CellOverlay(new ImageBox('images/close.png', 30, 30), 'Delete'); overlay.cursor = 'hand'; - overlay.offset = new mxPoint(-4, 8); - overlay.align = mxConstants.ALIGN_RIGHT; - overlay.verticalAlign = mxConstants.ALIGN_TOP; - overlay.addListener( - mxEvent.CLICK, - (sender, evt) => { - deleteSubtree(graph, cell); - } - ); + overlay.offset = new Point(-4, 8); + overlay.align = Constants.ALIGN_RIGHT; + overlay.verticalAlign = Constants.ALIGN_TOP; + overlay.addListener(InternalEvent.CLICK, (sender, evt) => { + deleteSubtree(graph, cell); + }); graph.addCellOverlay(cell, overlay); } @@ -362,7 +344,7 @@ const Template = ({ label, ...args }) => { // of 20 pixels in negative, vertical direction. edge.geometry.x = 1; edge.geometry.y = 0; - edge.geometry.offset = new mxPoint(0, -20); + edge.geometry.offset = new Point(0, -20); addOverlays(graph, vertex, true); } finally { @@ -375,7 +357,7 @@ const Template = ({ label, ...args }) => { function deleteSubtree(graph, cell) { // Gets the subtree from cell downwards const cells = []; - graph.traverse(cell, true, function(vertex) { + graph.traverse(cell, true, function (vertex) { cells.push(vertex); return true; @@ -385,6 +367,6 @@ const Template = ({ label, ...args }) => { } return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Orthogonal.stories.js b/packages/html/stories/Orthogonal.stories.js index c4fe41f55..09e034aaa 100644 --- a/packages/html/stories/Orthogonal.stories.js +++ b/packages/html/stories/Orthogonal.stories.js @@ -1,27 +1,27 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Connections/Orthogonal', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRubberband, - mxConnectionHandler, - mxGraphHandler, - mxGuide, - mxPoint, - mxCellState, - mxEdgeHandler, - mxGraphView, - mxEvent - } = mxgraph; + Graph, + Rubberband, + ConnectionHandler, + GraphHandler, + Guide, + Point, + CellState, + EdgeHandler, + GraphView, + InternalEvent, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -32,21 +32,21 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Enables guides - mxGraphHandler.prototype.guidesEnabled = true; + GraphHandler.prototype.guidesEnabled = true; // Alt disables guides - mxGuide.prototype.isEnabledForEvent = function(evt) { - return !mxEvent.isAltDown(evt); + Guide.prototype.isEnabledForEvent = function (evt) { + return !InternalEvent.isAltDown(evt); }; // Enables snapping waypoints to terminals - mxEdgeHandler.prototype.snapToTerminals = true; + EdgeHandler.prototype.snapToTerminals = true; // Enables orthogonal connect preview in IE - mxConnectionHandler.prototype.movePreviewAway = false; + ConnectionHandler.prototype.movePreviewAway = false; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.disconnectOnMove = false; graph.foldingEnabled = false; graph.cellsResizable = false; @@ -54,46 +54,29 @@ const Template = ({ label, ...args }) => { graph.setConnectable(true); // Implements perimeter-less connection points as fixed points (computed before the edge style). - graph.view.updateFixedTerminalPoint = function( - edge, - terminal, - source, - constraint - ) { - mxGraphView.prototype.updateFixedTerminalPoint.apply(this, arguments); + graph.view.updateFixedTerminalPoint = function (edge, terminal, source, constraint) { + GraphView.prototype.updateFixedTerminalPoint.apply(this, arguments); const pts = edge.absolutePoints; const pt = pts[source ? 0 : pts.length - 1]; - if ( - terminal != null && - pt == null && - this.getPerimeterFunction(terminal) == null - ) { + if (terminal != null && pt == null && this.getPerimeterFunction(terminal) == null) { edge.setAbsoluteTerminalPoint( - new mxPoint( - this.getRoutingCenterX(terminal), - this.getRoutingCenterY(terminal) - ), + new Point(this.getRoutingCenterX(terminal), this.getRoutingCenterY(terminal)), source ); } }; // Changes the default edge style - graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = - 'orthogonalEdgeStyle'; + graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle'; delete graph.getStylesheet().getDefaultEdgeStyle().endArrow; // Implements the connect preview - graph.connectionHandler.createEdgeState = function(me) { + graph.connectionHandler.createEdgeState = function (me) { const edge = graph.createEdge(null, null, null, null, null); - return new mxCellState( - this.graph.view, - edge, - this.graph.getCellStyle(edge) - ); + return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge)); }; // Uncomment the following if you want the container @@ -101,8 +84,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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 +106,7 @@ const Template = ({ label, ...args }) => { 'portConstraint=northsouth;', true ); - v11.geometry.offset = new mxPoint(-5, -5); + v11.geometry.offset = new Point(-5, -5); const v12 = graph.insertVertex( v1, null, @@ -137,7 +119,7 @@ const Template = ({ label, ...args }) => { 'routingCenterX=-0.5;routingCenterY=0;', true ); - v12.geometry.offset = new mxPoint(-10, -5); + v12.geometry.offset = new Point(-10, -5); const v13 = graph.insertVertex( v1, null, @@ -150,7 +132,7 @@ const Template = ({ label, ...args }) => { 'routingCenterX=0.5;routingCenterY=0;', true ); - v13.geometry.offset = new mxPoint(0, -5); + v13.geometry.offset = new Point(0, -5); const v2 = graph.addCell(graph.getModel().cloneCell(v1)); v2.geometry.x = 200; @@ -173,6 +155,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Overlays.stories.js b/packages/html/stories/Overlays.stories.js index 3f45e26a1..5ac85507f 100644 --- a/packages/html/stories/Overlays.stories.js +++ b/packages/html/stories/Overlays.stories.js @@ -1,23 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Effects/Overlays', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxCellOverlay, - mxEvent, - mxCellTracker, - mxUtils, - mxImage - } = mxgraph; + const { Graph, CellOverlay, InternalEvent, CellTracker, utils, ImageBox } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -28,20 +21,20 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Disables basic selection and cell handling graph.setEnabled(false); // Highlights the vertices when the mouse enters - const highlight = new mxCellTracker(graph, '#00FF00'); + const highlight = new CellTracker(graph, '#00FF00'); // Enables tooltips for the overlays graph.setTooltips(true); // Installs a handler for click events in the graph // that toggles the overlay for the respective cell - graph.addListener(mxEvent.CLICK, (sender, evt) => { + graph.addListener(InternalEvent.CLICK, (sender, evt) => { const cell = evt.getProperty('cell'); if (cell != null) { @@ -49,14 +42,14 @@ const Template = ({ label, ...args }) => { if (overlays == null) { // Creates a new overlay with an image and a tooltip - const overlay = new mxCellOverlay( - new mxImage('/images/check.png', 16, 16), + const overlay = new CellOverlay( + new ImageBox('/images/check.png', 16, 16), 'Overlay tooltip' ); // Installs a handler for clicks on the overlay - overlay.addListener(mxEvent.CLICK, (sender, evt2) => { - mxUtils.alert('Overlay clicked'); + overlay.addListener(InternalEvent.CLICK, (sender, evt2) => { + utils.alert('Overlay clicked'); }); // Sets the overlay for the cell in the graph @@ -69,7 +62,7 @@ const Template = ({ label, ...args }) => { // Installs a handler for double click events in the graph // that shows an alert box - graph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => { + graph.addListener(InternalEvent.DOUBLE_CLICK, (sender, evt) => { const cell = evt.getProperty('cell'); alert(`Doubleclick: ${cell != null ? 'Cell' : 'Graph'}`); evt.consume(); @@ -101,6 +94,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/PageBreaks.stories.js b/packages/html/stories/PageBreaks.stories.js index 2b2333333..23842d4e4 100644 --- a/packages/html/stories/PageBreaks.stories.js +++ b/packages/html/stories/PageBreaks.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,23 +8,17 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRectangle, - mxRubberband, - mxDomHelpers, - mxEvent - } = mxgraph; + const { Graph, Rectangle, Rubberband, mxDomHelpers, InternalEvent } = maxgraph; const div = document.createElement('div'); @@ -37,11 +31,10 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; div.appendChild(container); - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.view.setScale(0.15); graph.pageBreaksVisible = true; graph.pageBreakDashed = true; @@ -60,8 +53,7 @@ const Template = ({ label, ...args }) => { graph.graphHandler.scaleGrid = true; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -90,38 +82,38 @@ const Template = ({ label, ...args }) => { div.appendChild(buttons); buttons.appendChild( - mxDomHelpers.button('Toggle Page Breaks', function(evt) { + mxDomHelpers.button('Toggle Page Breaks', function (evt) { graph.pageBreaksVisible = !graph.pageBreaksVisible; graph.sizeDidChange(); }) ); buttons.appendChild( - mxDomHelpers.button('Zoom In', function(evt) { + mxDomHelpers.button('Zoom In', function (evt) { graph.zoomIn(); }) ); buttons.appendChild( - mxDomHelpers.button('Zoom Out', function(evt) { + mxDomHelpers.button('Zoom Out', function (evt) { graph.zoomOut(); }) ); buttons.appendChild( - mxDomHelpers.button('Print', function(evt) { + mxDomHelpers.button('Print', function (evt) { // Matches actual printer paper size and avoids blank pages const scale = 0.5; // Applies scale to page - const pf = mxRectangle.fromRectangle( - graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT + const pf = Rectangle.fromRectangle( + graph.pageFormat || Constants.PAGE_FORMAT_A4_PORTRAIT ); pf.width = Math.round(pf.width * scale * graph.pageScale); pf.height = Math.round(pf.height * scale * graph.pageScale); // Finds top left corner of top left page - const bounds = mxRectangle.fromRectangle(graph.getGraphBounds()); + const bounds = Rectangle.fromRectangle(graph.getGraphBounds()); bounds.x -= graph.view.translate.x * graph.view.scale; bounds.y -= graph.view.translate.y * graph.view.scale; @@ -134,7 +126,7 @@ const Template = ({ label, ...args }) => { preview.autoOrigin = false; const oldRenderPage = preview.renderPage; - preview.renderPage = function(w, h, x, y, content, pageNumber) { + preview.renderPage = function (w, h, x, y, content, pageNumber) { const div = oldRenderPage.apply(this, arguments); const header = document.createElement('div'); @@ -172,12 +164,12 @@ const Template = ({ label, ...args }) => { ); buttons.appendChild( - mxDomHelpers.button('Reset View', function(evt) { + mxDomHelpers.button('Reset View', function (evt) { graph.view.scaleAndTranslate(0.15, 0, 0); }) ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Perimeter.stories.js b/packages/html/stories/Perimeter.stories.js index 01806ac03..2cc801d8d 100644 --- a/packages/html/stories/Perimeter.stories.js +++ b/packages/html/stories/Perimeter.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,18 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRubberband, - mxGraphView, - mxUtils - } = mxgraph; + const { Graph, Rubberband, GraphView, utils } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -31,14 +26,8 @@ const Template = ({ label, ...args }) => { // Redirects the perimeter to the label bounds if intersection // between edge and label is found - const mxGraphViewGetPerimeterPoint = - mxGraphView.prototype.getPerimeterPoint; - mxGraphView.prototype.getPerimeterPoint = function( - terminal, - next, - orthogonal, - border - ) { + const mxGraphViewGetPerimeterPoint = GraphView.prototype.getPerimeterPoint; + GraphView.prototype.getPerimeterPoint = function (terminal, next, orthogonal, border) { let point = mxGraphViewGetPerimeterPoint.apply(this, arguments); if (point != null) { @@ -49,7 +38,7 @@ const Template = ({ label, ...args }) => { const b = terminal.text.boundingBox.clone(); b.grow(3); - if (mxUtils.rectangleIntersectsSegment(b, point, next)) { + if (utils.rectangleIntersectsSegment(b, point, next)) { point = perimeter(b, terminal, next, orthogonal); } } @@ -59,7 +48,7 @@ const Template = ({ label, ...args }) => { }; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setVertexLabelsMovable(true); graph.setConnectable(true); @@ -68,8 +57,7 @@ const Template = ({ label, ...args }) => { // graph.setResizeContainer(true); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -116,6 +104,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Permissions.stories.js b/packages/html/stories/Permissions.stories.js index 5468571aa..8cc71329f 100644 --- a/packages/html/stories/Permissions.stories.js +++ b/packages/html/stories/Permissions.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,20 +8,20 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxConnectionHandler, - mxImage, - mxRubberband, + Graph, + ConnectionHandler, + ImageBox, + Rubberband, mxKeyHandler, - mxDomHelpers - } = mxgraph; + mxDomHelpers, + } = maxgraph; const div = document.createElement('div'); @@ -36,27 +36,22 @@ const Template = ({ label, ...args }) => { // Defines an icon for creating new connections in the connection handler. // This will automatically disable the highlighting of the source vertex. - mxConnectionHandler.prototype.connectImage = new mxImage( - 'images/connector.gif', - 16, - 16 - ); + ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Enable tooltips, disables mutligraphs, enable loops graph.setMultigraph(false); graph.setAllowLoops(true); // Enables rubberband selection and key handling - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); const keyHandler = new mxKeyHandler(graph); // Assigns the delete key - keyHandler.bindKey(46, function(evt) { + keyHandler.bindKey(46, function (evt) { if (graph.isEnabled()) { graph.removeCells(); } @@ -66,7 +61,7 @@ const Template = ({ label, ...args }) => { // aka "private" variable let currentPermission = null; - const apply = function(permission) { + const apply = function (permission) { graph.clearSelection(); permission.apply(graph); graph.setEnabled(true); @@ -83,37 +78,37 @@ const Template = ({ label, ...args }) => { const buttons = document.createElement('div'); div.appendChild(buttons); - let button = mxDomHelpers.button('Allow All', function(evt) { + let button = mxDomHelpers.button('Allow All', function (evt) { apply(new Permission()); }); buttons.appendChild(button); - button = mxDomHelpers.button('Connect Only', function(evt) { + button = mxDomHelpers.button('Connect Only', function (evt) { apply(new Permission(false, true, false, false, true)); }); buttons.appendChild(button); - button = mxDomHelpers.button('Edges Only', function(evt) { + button = mxDomHelpers.button('Edges Only', function (evt) { apply(new Permission(false, false, true, false, false)); }); buttons.appendChild(button); - button = mxDomHelpers.button('Vertices Only', function(evt) { + button = mxDomHelpers.button('Vertices Only', function (evt) { apply(new Permission(false, false, false, true, false)); }); buttons.appendChild(button); - button = mxDomHelpers.button('Select Only', function(evt) { + button = mxDomHelpers.button('Select Only', function (evt) { apply(new Permission(false, false, false, false, false)); }); buttons.appendChild(button); - button = mxDomHelpers.button('Locked', function(evt) { + button = mxDomHelpers.button('Locked', function (evt) { apply(new Permission(true, false)); }); buttons.appendChild(button); - button = mxDomHelpers.button('Disabled', function(evt) { + button = mxDomHelpers.button('Disabled', function (evt) { graph.clearSelection(); graph.setEnabled(false); graph.setTooltips(false); @@ -128,48 +123,37 @@ const Template = ({ label, ...args }) => { // specification for more functions to extend (eg. // isSelectable). const oldDisconnectable = graph.isCellDisconnectable; - graph.isCellDisconnectable = function(cell, terminal, source) { - return ( - oldDisconnectable.apply(this, arguments) && currentPermission.editEdges - ); + graph.isCellDisconnectable = function (cell, terminal, source) { + return oldDisconnectable.apply(this, arguments) && currentPermission.editEdges; }; const oldTerminalPointMovable = graph.isTerminalPointMovable; - graph.isTerminalPointMovable = function(cell) { - return ( - oldTerminalPointMovable.apply(this, arguments) && - currentPermission.editEdges - ); + graph.isTerminalPointMovable = function (cell) { + return oldTerminalPointMovable.apply(this, arguments) && currentPermission.editEdges; }; const oldBendable = graph.isCellBendable; - graph.isCellBendable = function(cell) { + graph.isCellBendable = function (cell) { return oldBendable.apply(this, arguments) && currentPermission.editEdges; }; const oldLabelMovable = graph.isLabelMovable; - graph.isLabelMovable = function(cell) { - return ( - oldLabelMovable.apply(this, arguments) && currentPermission.editEdges - ); + graph.isLabelMovable = function (cell) { + return oldLabelMovable.apply(this, arguments) && currentPermission.editEdges; }; const oldMovable = graph.isCellMovable; - graph.isCellMovable = function(cell) { - return ( - oldMovable.apply(this, arguments) && currentPermission.editVertices - ); + graph.isCellMovable = function (cell) { + return oldMovable.apply(this, arguments) && currentPermission.editVertices; }; const oldResizable = graph.isCellResizable; - graph.isCellResizable = function(cell) { - return ( - oldResizable.apply(this, arguments) && currentPermission.editVertices - ); + graph.isCellResizable = function (cell) { + return oldResizable.apply(this, arguments) && currentPermission.editVertices; }; const oldEditable = graph.isCellEditable; - graph.isCellEditable = function(cell) { + graph.isCellEditable = function (cell) { return ( (oldEditable.apply(this, arguments) && cell.isVertex() && @@ -179,7 +163,7 @@ const Template = ({ label, ...args }) => { }; const oldDeletable = graph.isCellDeletable; - graph.isCellDeletable = function(cell) { + graph.isCellDeletable = function (cell) { return ( (oldDeletable.apply(this, arguments) && cell.isVertex() && @@ -189,10 +173,8 @@ const Template = ({ label, ...args }) => { }; const oldCloneable = graph.isCellCloneable; - graph.isCellCloneable = function(cell) { - return ( - oldCloneable.apply(this, arguments) && currentPermission.cloneCells - ); + graph.isCellCloneable = function (cell) { + return oldCloneable.apply(this, arguments) && currentPermission.cloneCells; }; // Gets the default parent for inserting new cells. This @@ -212,7 +194,7 @@ const Template = ({ label, ...args }) => { } return div; -} +}; class Permission { constructor(locked, createEdges, editEdges, editVertices, cloneCells) { @@ -229,4 +211,4 @@ class Permission { } } -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/PortRefs.stories.js b/packages/html/stories/PortRefs.stories.js index 4017a8932..fed064cea 100644 --- a/packages/html/stories/PortRefs.stories.js +++ b/packages/html/stories/PortRefs.stories.js @@ -1,28 +1,28 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Connections/PortRefs', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRubberband, - mxPoint, - mxEdgeHandler, - mxConstraintHandler, - mxImage, - mxShape, - mxTriangle, - mxConstants, - mxConnectionConstraint, - mxClient - } = mxgraph; + Graph, + Rubberband, + Point, + EdgeHandler, + ConstraintHandler, + ImageBox, + Shape, + TriangleShape, + Constants, + ConnectionConstraint, + mxClient, + } = maxgraph; mxClient.setImageBasePath('/images'); @@ -35,22 +35,18 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Replaces the port image - mxConstraintHandler.prototype.pointImage = new mxImage( - '/images/dot.gif', - 10, - 10 - ); + ConstraintHandler.prototype.pointImage = new ImageBox('/images/dot.gif', 10, 10); - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setConnectable(true); // Disables automatic handling of ports. This disables the reset of the - // respective style in mxGraph.cellConnected. Note that this feature may + // respective style in Graph.cellConnected. Note that this feature may // be useful if floating and fixed connections are combined. graph.setPortsEnabled(false); // Enables rubberband selection - new mxRubberband(graph); + new Rubberband(graph); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). @@ -94,34 +90,30 @@ const Template = ({ label, ...args }) => { }; // Extends shapes classes to return their ports - mxShape.prototype.getPorts = function() { + Shape.prototype.getPorts = function () { return ports; }; - mxTriangle.prototype.getPorts = function() { + TriangleShape.prototype.getPorts = function () { return ports2; }; // Disables floating connections (only connections via ports allowed) - graph.connectionHandler.isConnectableCell = function(cell) { + graph.connectionHandler.isConnectableCell = function (cell) { return false; }; - mxEdgeHandler.prototype.isConnectableCell = function(cell) { + EdgeHandler.prototype.isConnectableCell = function (cell) { return graph.connectionHandler.isConnectableCell(cell); }; // Disables existing port functionality - graph.view.getTerminalPort = function(state, terminal, source) { + graph.view.getTerminalPort = function (state, terminal, source) { return terminal; }; // Returns all possible ports for a given terminal - graph.getAllConnectionConstraints = function(terminal, source) { - if ( - terminal != null && - terminal.shape != null && - terminal.shape.stencil != null - ) { + graph.getAllConnectionConstraints = function (terminal, source) { + if (terminal != null && terminal.shape != null && terminal.shape.stencil != null) { // for stencils with existing constraints... if (terminal.shape.stencil != null) { return terminal.shape.stencil.constraints; @@ -134,8 +126,8 @@ const Template = ({ label, ...args }) => { for (const id in ports) { const port = ports[id]; - const cstr = new mxConnectionConstraint( - new mxPoint(port.x, port.y), + const cstr = new ConnectionConstraint( + new Point(port.x, port.y), port.perimeter ); cstr.id = id; @@ -150,16 +142,9 @@ const Template = ({ label, ...args }) => { }; // Sets the port for the given connection - graph.setConnectionConstraint = function( - edge, - terminal, - source, - constraint - ) { + graph.setConnectionConstraint = function (edge, terminal, source, constraint) { if (constraint != null) { - const key = source - ? 'sourcePort' - : 'targetPort'; + const key = source ? 'sourcePort' : 'targetPort'; if (constraint == null || constraint.id == null) { this.setCellStyles(key, null, [edge]); @@ -170,14 +155,12 @@ const Template = ({ label, ...args }) => { }; // Returns the port for the given connection - graph.getConnectionConstraint = function(edge, terminal, source) { - const key = source - ? 'sourcePort' - : 'targetPort'; + graph.getConnectionConstraint = function (edge, terminal, source) { + const key = source ? 'sourcePort' : 'targetPort'; const id = edge.style[key]; if (id != null) { - const c = new mxConnectionConstraint(null, null); + const c = new ConnectionConstraint(null, null); c.id = id; return c; @@ -188,15 +171,12 @@ const Template = ({ label, ...args }) => { // Returns the actual point for a port by redirecting the constraint to the port const graphGetConnectionPoint = graph.getConnectionPoint; - graph.getConnectionPoint = function(vertex, constraint) { + graph.getConnectionPoint = function (vertex, constraint) { if (constraint.id != null && vertex != null && vertex.shape != null) { const port = vertex.shape.getPorts()[constraint.id]; if (port != null) { - constraint = new mxConnectionConstraint( - new mxPoint(port.x, port.y), - port.perimeter - ); + constraint = new ConnectionConstraint(new Point(port.x, port.y), port.perimeter); } } @@ -227,22 +207,8 @@ const Template = ({ label, ...args }) => { 60, 'shape=triangle;perimeter=trianglePerimeter;direction=south' ); - const e1 = graph.insertEdge( - parent, - null, - '', - v1, - v2, - 'sourcePort=s;targetPort=nw' - ); - const e2 = graph.insertEdge( - parent, - null, - '', - v1, - v3, - 'sourcePort=e;targetPort=out3' - ); + const e1 = graph.insertEdge(parent, null, '', v1, v2, 'sourcePort=s;targetPort=nw'); + const e2 = graph.insertEdge(parent, null, '', v1, v3, 'sourcePort=e;targetPort=out3'); } finally { // Updates the display graph.getModel().endUpdate(); @@ -251,10 +217,10 @@ const Template = ({ label, ...args }) => { // Comming soon... Integration with orthogonal edge style // Sets default edge style to use port constraints (needs to be moved up when uncommented) // graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle'; - /* let mxUtilsGetPortConstraints = mxUtils.getPortConstraints; - mxUtils.getPortConstraints = function(terminal, edge, source, defaultValue) + /* let mxUtilsGetPortConstraints = utils.getPortConstraints; + utils.getPortConstraints = function(terminal, edge, source, defaultValue) { - let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT; + let key = (source) ? Constants.STYLE_SOURCE_PORT : Constants.STYLE_TARGET_PORT; let id = edge.style[key]; let port = terminal.shape.getPorts()[id]; @@ -272,11 +238,11 @@ const Template = ({ label, ...args }) => { { let edge = graph.createEdge(null, null, null, null, null); - return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge)); + return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge)); }; */ return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/RadialTreeLayout.stories.js b/packages/html/stories/RadialTreeLayout.stories.js index fdb8ea4a6..6f6d9939e 100644 --- a/packages/html/stories/RadialTreeLayout.stories.js +++ b/packages/html/stories/RadialTreeLayout.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,19 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRubberband, - mxConstants, - mxRadialTreeLayout, - mxPerimeter - } = mxgraph; + const { Graph, Rubberband, Constants, mxRadialTreeLayout, Perimeter } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -31,15 +25,14 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Adds rubberband selection - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); // Changes the default vertex style in-place let style = graph.getStylesheet().getDefaultVertexStyle(); - style.perimiter = mxPerimeter.RectanglePerimeter; + style.perimiter = Perimeter.RectanglePerimeter; style.gradientColor = 'white'; style.perimeterSpacing = 6; style.rounded = true; @@ -100,6 +93,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/SecondLabel.stories.js b/packages/html/stories/SecondLabel.stories.js index 59d8aa9b6..2b2844a11 100644 --- a/packages/html/stories/SecondLabel.stories.js +++ b/packages/html/stories/SecondLabel.stories.js @@ -1,24 +1,24 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Labels/SecondLabel', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRectangleShape, + Graph, + RectangleShape, mxDomHelpers, - mxText, - mxPoint, - mxRectangle, - mxConstants - } = mxgraph; + Text, + Point, + Rectangle, + Constants, + } = maxgraph; const div = document.createElement('div'); @@ -32,19 +32,14 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Simple solution to add additional text to the rectangle shape definition: - (function() { - const mxRectangleShapeIsHtmlAllowed = - mxRectangleShape.prototype.isHtmlAllowed; - mxRectangleShape.prototype.isHtmlAllowed = function() { - return ( - mxRectangleShapeIsHtmlAllowed.apply(this, arguments) && - this.state == null - ); + (function () { + const mxRectangleShapeIsHtmlAllowed = RectangleShape.prototype.isHtmlAllowed; + RectangleShape.prototype.isHtmlAllowed = function () { + return mxRectangleShapeIsHtmlAllowed.apply(this, arguments) && this.state == null; }; - const mxRectangleShapePaintForeground = - mxRectangleShape.prototype.paintForeground; - mxRectangleShape.prototype.paintForeground = function(c, x, y, w, h) { + const mxRectangleShapePaintForeground = RectangleShape.prototype.paintForeground; + RectangleShape.prototype.paintForeground = function (c, x, y, w, h) { if ( this.state != null && this.state.cell.geometry != null && @@ -59,17 +54,17 @@ const Template = ({ label, ...args }) => { })(); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Disables the folding icon - graph.isCellFoldable = function(cell) { + graph.isCellFoldable = function (cell) { return false; }; let secondLabelVisible = true; // Hook for returning shape number for a given cell - graph.getSecondLabel = function(cell) { + graph.getSecondLabel = function (cell) { if (!cell.isEdge()) { // Possible to return any string here return `The ID of this cell is ${cell.id}`; @@ -82,7 +77,7 @@ const Template = ({ label, ...args }) => { // Overrides method to hide relative child vertices // TODO this function is not used - const isVisible = function() { + const isVisible = function () { return ( !cell.isVertex() || cell.geometry == null || @@ -93,7 +88,7 @@ const Template = ({ label, ...args }) => { // Creates the shape for the shape number and puts it into the draw pane const { redrawShape } = graph.cellRenderer; - graph.cellRenderer.redrawShape = function(state, force, rendering) { + graph.cellRenderer.redrawShape = function (state, force, rendering) { const result = redrawShape.apply(this, arguments); if ( @@ -104,28 +99,24 @@ const Template = ({ label, ...args }) => { ) { const secondLabel = graph.getSecondLabel(state.cell); - if ( - secondLabel != null && - state.shape != null && - state.secondLabel == null - ) { - state.secondLabel = new mxText( + if (secondLabel != null && state.shape != null && state.secondLabel == null) { + state.secondLabel = new Text( secondLabel, - new mxRectangle(), - mxConstants.ALIGN_LEFT, - mxConstants.ALIGN_BOTTOM + new Rectangle(), + Constants.ALIGN_LEFT, + Constants.ALIGN_BOTTOM ); // Styles the label state.secondLabel.color = 'black'; state.secondLabel.family = 'Verdana'; state.secondLabel.size = 8; - state.secondLabel.fontStyle = mxConstants.FONT_ITALIC; + state.secondLabel.fontStyle = Constants.FONT_ITALIC; state.secondLabel.background = 'yellow'; state.secondLabel.border = 'black'; state.secondLabel.valign = 'bottom'; state.secondLabel.dialect = state.shape.dialect; - state.secondLabel.dialect = mxConstants.DIALECT_STRICTHTML; + state.secondLabel.dialect = Constants.DIALECT_STRICTHTML; state.secondLabel.wrap = true; graph.cellRenderer.initializeLabel(state, state.secondLabel); } @@ -133,7 +124,7 @@ const Template = ({ label, ...args }) => { if (state.secondLabel != null) { const scale = graph.getView().getScale(); - const bounds = new mxRectangle( + const bounds = new Rectangle( state.x + state.width - 8 * scale, state.y + 8 * scale, 35, @@ -151,7 +142,7 @@ const Template = ({ label, ...args }) => { // Destroys the shape number const { destroy } = graph.cellRenderer; - graph.cellRenderer.destroy = function(state) { + graph.cellRenderer.destroy = function (state) { destroy.apply(this, arguments); if (state.secondLabel != null) { @@ -160,7 +151,7 @@ const Template = ({ label, ...args }) => { } }; - graph.cellRenderer.getShapesForState = function(state) { + graph.cellRenderer.getShapesForState = function (state) { return [state.shape, state.text, state.secondLabel, state.control]; }; @@ -186,7 +177,7 @@ const Template = ({ label, ...args }) => { 'align=left;verticalAlign=top;labelBackgroundColor=red;labelBorderColor=black', true ); - v11.geometry.offset = new mxPoint(-8, -8); + v11.geometry.offset = new Point(-8, -8); const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); // Another alternative solution of creating a second label as a relative child vertex // but this time with an automatic size so that the cell is actually selectable and @@ -202,7 +193,7 @@ const Template = ({ label, ...args }) => { 'align=left;verticalAlign=top;fillColor=red;rounded=1;spacingLeft=4;spacingRight=4', true ); - v21.geometry.offset = new mxPoint(-8, -8); + v21.geometry.offset = new Point(-8, -8); graph.updateCellSize(v21); const e1 = graph.insertEdge(parent, null, '', v1, v2); } finally { @@ -215,7 +206,7 @@ const Template = ({ label, ...args }) => { // Adds a button to execute the layout buttons.appendChild( - mxDomHelpers.button('Toggle Child Vertices', function(evt) { + mxDomHelpers.button('Toggle Child Vertices', function (evt) { relativeChildVerticesVisible = !relativeChildVerticesVisible; graph.refresh(); }) @@ -223,13 +214,13 @@ const Template = ({ label, ...args }) => { // Adds a button to execute the layout buttons.appendChild( - mxDomHelpers.button('Toggle IDs', function(evt) { + mxDomHelpers.button('Toggle IDs', function (evt) { secondLabelVisible = !secondLabelVisible; graph.refresh(); }) ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Shape.stories.js b/packages/html/stories/Shape.stories.js index 6f65d53ad..ddee680b2 100644 --- a/packages/html/stories/Shape.stories.js +++ b/packages/html/stories/Shape.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -6,16 +6,11 @@ export default { title: 'Shapes/Shape', argTypes: { ...globalTypes, - } + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxCylinder, - mxConstants, - mxCellRenderer - } = mxgraph; + const { Graph, CylinderShape, Constants, CellRenderer } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -36,17 +31,17 @@ const Template = ({ label, ...args }) => { The code below defines the shape. The BoxShape function it the constructor which creates a new object instance. - The next lines use an mxCylinder instance to augment the + The next lines use an CylinderShape instance to augment the prototype of the shape ("inheritance") and reset the constructor to the topmost function of the c'tor chain. */ - class BoxShape extends mxCylinder { + class BoxShape extends CylinderShape { // Defines the extrusion of the box as a "static class variable" extrude = 10; /* - Next, the mxCylinder's redrawPath method is "overridden". + Next, the CylinderShape's redrawPath method is "overridden". This method has a isForeground argument to separate two paths, one for the background (which must be closed and might be filled) and one for the foreground, which is @@ -85,10 +80,10 @@ const Template = ({ label, ...args }) => { } } } - mxCellRenderer.registerShape('box', BoxShape); + CellRenderer.registerShape('box', BoxShape); // Creates the graph inside the DOM node. - const graph = new mxGraph(container); + const graph = new Graph(container); // Disables basic selection and cell handling graph.setEnabled(false); @@ -123,6 +118,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Stencils.stories.js b/packages/html/stories/Stencils.stories.js index cefd2c8d0..95f9f051e 100644 --- a/packages/html/stories/Stencils.stories.js +++ b/packages/html/stories/Stencils.stories.js @@ -1,5 +1,5 @@ -import mxgraph from '@mxgraph/core'; -import { load } from "@mxgraph/core/src/util/network/mxXmlRequest"; +import maxgraph from '@maxgraph/core'; +import { load } from '@mxgraph/core/src/util/network/mxXmlRequest'; import { globalTypes } from '../.storybook/preview'; @@ -9,33 +9,33 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxConnectionHandler, + Graph, + ConnectionHandler, mxDomHelpers, - mxEdgeHandler, - mxEvent, - mxPoint, - mxCellHighlight, - mxConstants, - mxVertexHandler, - mxRubberband, - mxShape, - mxStencil, - mxStencilRegistry, - mxCellRenderer, - mxUtils - } = mxgraph; + EdgeHandler, + InternalEvent, + Point, + CellHighlight, + Constants, + VertexHandler, + Rubberband, + Shape, + StencilShape, + StencilRegistry, + CellRenderer, + utils, + } = maxgraph; const div = document.createElement('div'); @@ -49,31 +49,31 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Sets the global shadow color - mxConstants.SHADOWCOLOR = '#C0C0C0'; - mxConstants.SHADOW_OPACITY = 0.5; - mxConstants.SHADOW_OFFSET_X = 4; - mxConstants.SHADOW_OFFSET_Y = 4; - mxConstants.HANDLE_FILLCOLOR = '#99ccff'; - mxConstants.HANDLE_STROKECOLOR = '#0088cf'; - mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff'; + Constants.SHADOWCOLOR = '#C0C0C0'; + Constants.SHADOW_OPACITY = 0.5; + Constants.SHADOW_OFFSET_X = 4; + Constants.SHADOW_OFFSET_Y = 4; + Constants.HANDLE_FILLCOLOR = '#99ccff'; + Constants.HANDLE_STROKECOLOR = '#0088cf'; + Constants.VERTEX_SELECTION_COLOR = '#00a8ff'; // Enables connections along the outline - mxConnectionHandler.prototype.outlineConnect = true; - mxEdgeHandler.prototype.manageLabelHandle = true; - mxEdgeHandler.prototype.outlineConnect = true; - mxCellHighlight.prototype.keepOnTop = true; + ConnectionHandler.prototype.outlineConnect = true; + EdgeHandler.prototype.manageLabelHandle = true; + EdgeHandler.prototype.outlineConnect = true; + CellHighlight.prototype.keepOnTop = true; // Enable rotation handle - mxVertexHandler.prototype.rotationEnabled = true; + VertexHandler.prototype.rotationEnabled = true; // Uses the shape for resize previews - mxVertexHandler.prototype.createSelectionShape = function(bounds) { + VertexHandler.prototype.createSelectionShape = function (bounds) { const key = this.state.style.shape; - const stencil = mxStencilRegistry.getStencil(key); + const stencil = StencilRegistry.getStencil(key); let shape = null; if (stencil != null) { - shape = new mxShape(stencil); + shape = new Shape(stencil); shape.apply(this.state); } else { shape = new this.state.shape.constructor(); @@ -81,7 +81,7 @@ const Template = ({ label, ...args }) => { shape.outline = true; shape.bounds = bounds; - shape.stroke = mxConstants.HANDLE_STROKECOLOR; + shape.stroke = Constants.HANDLE_STROKECOLOR; shape.strokewidth = this.getSelectionStrokeWidth(); shape.isDashed = this.isSelectionDashed(); shape.isShadow = false; @@ -92,7 +92,7 @@ const Template = ({ label, ...args }) => { // Defines a custom stencil via the canvas API as defined here: // http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxXmlCanvas2D-js.html - class CustomShape extends mxShape { + class CustomShape extends Shape { paintBackground(c, x, y, w, h) { c.translate(x, y); @@ -122,7 +122,7 @@ const Template = ({ label, ...args }) => { } // Replaces existing actor shape - mxCellRenderer.registerShape('customShape', CustomShape); + CellRenderer.registerShape('customShape', CustomShape); // Loads the stencils into the registry const req = load('stencils.xml'); @@ -130,26 +130,22 @@ const Template = ({ label, ...args }) => { let shape = root.firstChild; while (shape != null) { - if (shape.nodeType === mxConstants.NODETYPE_ELEMENT) { - mxStencilRegistry.addStencil( - shape.getAttribute('name'), - new mxStencil(shape) - ); + if (shape.nodeType === Constants.NODETYPE_ELEMENT) { + StencilRegistry.addStencil(shape.getAttribute('name'), new StencilShape(shape)); } shape = shape.nextSibling; } - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setConnectable(true); graph.setTooltips(true); graph.setPanning(true); - graph.getTooltipForCell = function(cell) { + graph.getTooltipForCell = function (cell) { if (cell != null) { return cell.style; } @@ -166,8 +162,7 @@ const Template = ({ label, ...args }) => { style.shadow = '1'; // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -176,40 +171,13 @@ const Template = ({ label, ...args }) => { // Adds cells to the model in a single step graph.getModel().beginUpdate(); try { - const v1 = graph.insertVertex( - parent, - null, - 'A1', - 20, - 20, - 40, - 80, - 'shape=and' - ); - const v2 = graph.insertVertex( - parent, - null, - 'A2', - 20, - 220, - 40, - 80, - 'shape=and' - ); - const v3 = graph.insertVertex( - parent, - null, - 'X1', - 160, - 110, - 80, - 80, - 'shape=xor' - ); + const v1 = graph.insertVertex(parent, null, 'A1', 20, 20, 40, 80, 'shape=and'); + const v2 = graph.insertVertex(parent, null, 'A2', 20, 220, 40, 80, 'shape=and'); + const v3 = graph.insertVertex(parent, null, 'X1', 160, 110, 80, 80, 'shape=xor'); const e1 = graph.insertEdge(parent, null, '', v1, v3); - e1.geometry.points = [new mxPoint(90, 60), new mxPoint(90, 130)]; + e1.geometry.points = [new Point(90, 60), new Point(90, 130)]; const e2 = graph.insertEdge(parent, null, '', v2, v3); - e2.geometry.points = [new mxPoint(90, 260), new mxPoint(90, 170)]; + e2.geometry.points = [new Point(90, 260), new Point(90, 170)]; const v4 = graph.insertVertex( parent, @@ -242,9 +210,9 @@ const Template = ({ label, ...args }) => { 'shape=xor;flipH=1' ); const e3 = graph.insertEdge(parent, null, '', v4, v6); - e3.geometry.points = [new mxPoint(490, 60), new mxPoint(130, 130)]; + e3.geometry.points = [new Point(490, 60), new Point(130, 130)]; const e4 = graph.insertEdge(parent, null, '', v5, v6); - e4.geometry.points = [new mxPoint(490, 260), new mxPoint(130, 170)]; + e4.geometry.points = [new Point(490, 260), new Point(130, 170)]; const v7 = graph.insertVertex( parent, @@ -257,12 +225,12 @@ const Template = ({ label, ...args }) => { 'shape=or;direction=south' ); const e5 = graph.insertEdge(parent, null, '', v6, v7); - e5.geometry.points = [new mxPoint(310, 150)]; + e5.geometry.points = [new Point(310, 150)]; const e6 = graph.insertEdge(parent, null, '', v3, v7); - e6.geometry.points = [new mxPoint(270, 150)]; + e6.geometry.points = [new Point(270, 150)]; const e7 = graph.insertEdge(parent, null, '', v7, v5); - e7.geometry.points = [new mxPoint(290, 370)]; + e7.geometry.points = [new Point(290, 370)]; } finally { // Updates the display graph.getModel().endUpdate(); @@ -272,13 +240,13 @@ const Template = ({ label, ...args }) => { div.appendChild(buttons); buttons.appendChild( - mxDomHelpers.button('FlipH', function() { + mxDomHelpers.button('FlipH', function () { graph.toggleCellStyles('flipH'); }) ); buttons.appendChild( - mxDomHelpers.button('FlipV', function() { + mxDomHelpers.button('FlipV', function () { graph.toggleCellStyles('flipV'); }) ); @@ -289,7 +257,7 @@ const Template = ({ label, ...args }) => { buttons.appendChild(document.createTextNode('\u00a0')); buttons.appendChild( - mxDomHelpers.button('Rotate', function() { + mxDomHelpers.button('Rotate', function () { const cell = graph.getSelectionCell(); if (cell != null) { @@ -311,9 +279,7 @@ const Template = ({ label, ...args }) => { const state = graph.view.getState(cell); if (state != null) { - let dir = - state.style.direction || - 'east'; /* default */ + let dir = state.style.direction || 'east'; /* default */ if (dir === 'east') { dir = 'south'; @@ -341,17 +307,17 @@ const Template = ({ label, ...args }) => { buttons.appendChild(document.createTextNode('\u00a0')); buttons.appendChild( - mxDomHelpers.button('And', function() { + mxDomHelpers.button('And', function () { graph.setCellStyles('shape', 'and'); }) ); buttons.appendChild( - mxDomHelpers.button('Or', function() { + mxDomHelpers.button('Or', function () { graph.setCellStyles('shape', 'or'); }) ); buttons.appendChild( - mxDomHelpers.button('Xor', function() { + mxDomHelpers.button('Xor', function () { graph.setCellStyles('shape', 'xor'); }) ); @@ -362,14 +328,11 @@ const Template = ({ label, ...args }) => { buttons.appendChild(document.createTextNode('\u00a0')); buttons.appendChild( - mxDomHelpers.button('Style', function() { + mxDomHelpers.button('Style', function () { const cell = graph.getSelectionCell(); if (cell != null) { - const style = mxUtils.prompt( - 'Style', - cell.getStyle() - ); + const style = utils.prompt('Style', cell.getStyle()); if (style != null) { graph.getModel().setStyle(cell, style); @@ -379,17 +342,17 @@ const Template = ({ label, ...args }) => { ); buttons.appendChild( - mxDomHelpers.button('+', function() { + mxDomHelpers.button('+', function () { graph.zoomIn(); }) ); buttons.appendChild( - mxDomHelpers.button('-', function() { + mxDomHelpers.button('-', function () { graph.zoomOut(); }) ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Stylesheet.stories.js b/packages/html/stories/Stylesheet.stories.js index 1dd532710..4c0041a3b 100644 --- a/packages/html/stories/Stylesheet.stories.js +++ b/packages/html/stories/Stylesheet.stories.js @@ -1,21 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Styles/Stylesheet', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxPerimeter, - mxConstants, - mxEdgeStyle - } = mxgraph; + const { Graph, Perimeter, Constants, EdgeStyle } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -26,15 +21,15 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the DOM node. - const graph = new mxGraph(container); + const graph = new Graph(container); // Disables basic selection and cell handling graph.setEnabled(false); // Returns a special label for edges. Note: This does // a supercall to use the default implementation. - graph.getLabel = function(cell) { - const label = mxGraph.prototype.getLabel.apply(this, arguments); + graph.getLabel = function (cell) { + const label = Graph.prototype.getLabel.apply(this, arguments); if (cell.isEdge()) { return `Transfer ${label}`; @@ -44,7 +39,7 @@ const Template = ({ label, ...args }) => { // Installs a custom global tooltip graph.setTooltips(true); - graph.getTooltip = function(state) { + graph.getTooltip = function (state) { const { cell } = state; const model = this.getModel(); @@ -59,27 +54,27 @@ const Template = ({ label, ...args }) => { // Creates the default style for vertices let style = []; - style.shape = mxConstants.SHAPE_RECTANGLE; - style.perimiter = mxPerimeter.RectanglePerimeter; + style.shape = Constants.SHAPE_RECTANGLE; + style.perimiter = Perimeter.RectanglePerimeter; style.strokeColor = 'gray'; style.rounded = true; style.fillColor = '#EEEEEE'; style.gradientColor = 'white'; style.fontColor = '#774400'; - style.align = mxConstants.ALIGN_CENTER; - style.verticalAlign = mxConstants.ALIGN_MIDDLE; + style.align = Constants.ALIGN_CENTER; + style.verticalAlign = Constants.ALIGN_MIDDLE; style.fontSize = '12'; style.fontStyle = 1; graph.getStylesheet().putDefaultVertexStyle(style); // Creates the default style for edges style = []; - style.shape = mxConstants.SHAPE_CONNECTOR; + style.shape = Constants.SHAPE_CONNECTOR; style.strokeColor = '#6482B9'; - style.align = mxConstants.ALIGN_CENTER; - style.verticalAlign = mxConstants.ALIGN_MIDDLE; - style.edge = mxEdgeStyle.ElbowConnector; - style.endArrow = mxConstants.ARROW_CLASSIC; + style.align = Constants.ALIGN_CENTER; + style.verticalAlign = Constants.ALIGN_MIDDLE; + style.edge = EdgeStyle.ElbowConnector; + style.endArrow = Constants.ARROW_CLASSIC; style.fontSize = '10'; graph.getStylesheet().putDefaultEdgeStyle(style); @@ -90,51 +85,11 @@ const Template = ({ label, ...args }) => { // Adds cells to the model in a single step graph.getModel().beginUpdate(); try { - const v1 = graph.insertVertex( - parent, - null, - 'Interval 1', - 20, - 20, - 180, - 30 - ); - const v2 = graph.insertVertex( - parent, - null, - 'Interval 2', - 140, - 80, - 280, - 30 - ); - const v3 = graph.insertVertex( - parent, - null, - 'Interval 3', - 200, - 140, - 360, - 30 - ); - const v4 = graph.insertVertex( - parent, - null, - 'Interval 4', - 480, - 200, - 120, - 30 - ); - const v5 = graph.insertVertex( - parent, - null, - 'Interval 5', - 60, - 260, - 400, - 30 - ); + const v1 = graph.insertVertex(parent, null, 'Interval 1', 20, 20, 180, 30); + const v2 = graph.insertVertex(parent, null, 'Interval 2', 140, 80, 280, 30); + const v3 = graph.insertVertex(parent, null, 'Interval 3', 200, 140, 360, 30); + const v4 = graph.insertVertex(parent, null, 'Interval 4', 480, 200, 120, 30); + const v5 = graph.insertVertex(parent, null, 'Interval 5', 60, 260, 400, 30); const e1 = graph.insertEdge(parent, null, '1', v1, v2); e1.getGeometry().points = [{ x: 160, y: 60 }]; const e2 = graph.insertEdge(parent, null, '2', v1, v5); @@ -151,6 +106,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/SwimLanes.stories.js b/packages/html/stories/SwimLanes.stories.js index 4764b17e0..4e59bf8fe 100644 --- a/packages/html/stories/SwimLanes.stories.js +++ b/packages/html/stories/SwimLanes.stories.js @@ -1,29 +1,29 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Layouts/SwimLanes', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { mxEditor, - mxConnectionHandler, - mxImage, - mxPerimeter, - mxPoint, - mxConstants, - mxCloneUtils, - mxEdgeStyle, - mxEvent, - mxSwimlaneManager, - mxStackLayout, - mxLayoutManager - } = mxgraph; + ConnectionHandler, + ImageBox, + Perimeter, + Point, + Constants, + CloneUtils, + EdgeStyle, + InternalEvent, + SwimlaneManager, + StackLayout, + LayoutManager, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -35,16 +35,12 @@ const Template = ({ label, ...args }) => { // Defines an icon for creating new connections in the connection handler. // This will automatically disable the highlighting of the source vertex. - mxConnectionHandler.prototype.connectImage = new mxImage( - 'images/connector.gif', - 16, - 16 - ); + ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16); // Creates a wrapper editor around a new graph inside // the given container using an XML config for the // keyboard bindings - // const config = mxUtils + // const config = utils // .load('editors/config/keyhandler-commons.xml') // .getDocumentElement(); // const editor = new mxEditor(config); @@ -55,13 +51,13 @@ const Template = ({ label, ...args }) => { // Auto-resizes the container graph.border = 80; - graph.getView().translate = new mxPoint(graph.border / 2, graph.border / 2); + graph.getView().translate = new Point(graph.border / 2, graph.border / 2); graph.setResizeContainer(true); graph.graphHandler.setRemoveCellsFromParent(false); // Changes the default vertex style in-place let style = graph.getStylesheet().getDefaultVertexStyle(); - style.shape = mxConstants.SHAPE_SWIMLANE; + style.shape = Constants.SHAPE_SWIMLANE; style.verticalAlign = 'middle'; style.labelBackgroundColor = 'white'; style.fontSize = 11; @@ -71,8 +67,8 @@ const Template = ({ label, ...args }) => { style.strokeColor = 'black'; delete style.fillColor; - style = mxCloneUtils.clone(style); - style.shape = mxConstants.SHAPE_RECTANGLE; + style = CloneUtils.clone(style); + style.shape = Constants.SHAPE_RECTANGLE; style.fontSize = 10; style.rounded = true; style.horizontal = true; @@ -81,23 +77,23 @@ const Template = ({ label, ...args }) => { style.labelBackgroundColor = 'none'; graph.getStylesheet().putCellStyle('process', style); - style = mxCloneUtils.clone(style); - style.shape = mxConstants.SHAPE_ELLIPSE; - style.perimiter = mxPerimeter.EllipsePerimeter; + style = CloneUtils.clone(style); + style.shape = Constants.SHAPE_ELLIPSE; + style.perimiter = Perimeter.EllipsePerimeter; delete style.rounded; graph.getStylesheet().putCellStyle('state', style); - style = mxCloneUtils.clone(style); - style.shape = mxConstants.SHAPE_RHOMBUS; - style.perimiter = mxPerimeter.RhombusPerimeter; + style = CloneUtils.clone(style); + style.shape = Constants.SHAPE_RHOMBUS; + style.perimiter = Perimeter.RhombusPerimeter; style.verticalAlign = 'top'; style.spacingTop = 40; style.spacingRight = 64; graph.getStylesheet().putCellStyle('condition', style); - style = mxCloneUtils.clone(style); - style.shape = mxConstants.SHAPE_DOUBLE_ELLIPSE; - style.perimiter = mxPerimeter.EllipsePerimeter; + style = CloneUtils.clone(style); + style.shape = Constants.SHAPE_DOUBLE_ELLIPSE; + style.perimiter = Perimeter.EllipsePerimeter; style.spacingTop = 28; style.fontSize = 14; style.fontStyle = 1; @@ -105,16 +101,16 @@ const Template = ({ label, ...args }) => { graph.getStylesheet().putCellStyle('end', style); style = graph.getStylesheet().getDefaultEdgeStyle(); - style.edge = mxEdgeStyle.ElbowConnector; - style.endArrow = mxConstants.ARROW_BLOCK; + style.edge = EdgeStyle.ElbowConnector; + style.endArrow = Constants.ARROW_BLOCK; style.rounded = true; style.fontColor = 'black'; style.strokeColor = 'black'; - style = mxCloneUtils.clone(style); + style = CloneUtils.clone(style); style.dashed = true; - style.endArrow = mxConstants.ARROW_OPEN; - style.startArrow = mxConstants.ARROW_OVAL; + style.endArrow = Constants.ARROW_OPEN; + style.startArrow = Constants.ARROW_OVAL; graph.getStylesheet().putCellStyle('crossover', style); // Installs double click on middle control point and @@ -131,13 +127,11 @@ const Template = ({ label, ...args }) => { // End-states are no valid sources const previousIsValidSource = graph.isValidSource; - graph.isValidSource = function(cell) { + graph.isValidSource = function (cell) { if (previousIsValidSource.apply(this, arguments)) { const style = cell.getStyle(); - return ( - style == null || !(style == 'end' || style.indexOf('end') == 0) - ); + return style == null || !(style == 'end' || style.indexOf('end') == 0); } return false; @@ -149,7 +143,7 @@ const Template = ({ label, ...args }) => { // Note: All states are start states in // the example below, so we use the state // style below - graph.isValidTarget = function(cell) { + graph.isValidTarget = function (cell) { const style = cell.getStyle(); return ( @@ -166,7 +160,7 @@ const Template = ({ label, ...args }) => { graph.setSplitEnabled(false); // Returns true for valid drop operations - graph.isValidDropTarget = function(target, cells, evt) { + graph.isValidDropTarget = function (target, cells, evt) { if (this.isSplitEnabled() && this.isSplitTarget(target, cells, evt)) { return true; } @@ -188,13 +182,12 @@ const Template = ({ label, ...args }) => { return ( !pool && cell != lane && - ((lane && this.isPool(target)) || - (cell && this.isPool(target.getParent()))) + ((lane && this.isPool(target)) || (cell && this.isPool(target.getParent()))) ); }; // Adds new method for identifying a pool - graph.isPool = function(cell) { + graph.isPool = function (cell) { const model = this.getModel(); const parent = cell.getParent(); @@ -202,7 +195,7 @@ const Template = ({ label, ...args }) => { }; // Keeps widths on collapse/expand - const foldingHandler = function(sender, evt) { + const foldingHandler = function (sender, evt) { const cells = evt.getProperty('cells'); for (let i = 0; i < cells.length; i++) { @@ -214,11 +207,11 @@ const Template = ({ label, ...args }) => { } }; - graph.addListener(mxEvent.FOLD_CELLS, foldingHandler); + graph.addListener(InternalEvent.FOLD_CELLS, foldingHandler); } // Changes swimlane orientation while collapsed - const getStyle = function() { + const getStyle = function () { // TODO super cannot be used here // let style = super.getStyle(); let style; @@ -234,10 +227,10 @@ const Template = ({ label, ...args }) => { }; // Applies size changes to siblings and parents - new mxSwimlaneManager(graph); + new SwimlaneManager(graph); // Creates a stack depending on the orientation of the swimlane - const layout = new mxStackLayout(graph, false); + const layout = new StackLayout(graph, false); // Makes sure all children fit into the parent swimlane layout.resizeParent = true; @@ -246,14 +239,14 @@ const Template = ({ label, ...args }) => { layout.fill = true; // Only update the size of swimlanes - layout.isVertexIgnored = function(vertex) { + layout.isVertexIgnored = function (vertex) { return !graph.isSwimlane(vertex); }; // Keeps the lanes and pools stacked - const layoutMgr = new mxLayoutManager(graph); + const layoutMgr = new LayoutManager(graph); - layoutMgr.getLayout = function(cell) { + layoutMgr.getLayout = function (cell) { if ( !cell.isEdge() && cell.getChildCount() > 0 && @@ -271,13 +264,13 @@ const Template = ({ label, ...args }) => { // is normally the first child of the root (ie. layer 0). const parent = graph.getDefaultParent(); - const insertVertex = options => { + const insertVertex = (options) => { const v = graph.insertVertex(options); v.getStyle = getStyle; return v; }; - const insertEdge = options => { + const insertEdge = (options) => { const e = graph.insertEdge(options); e.getStyle = getStyle; return e; @@ -518,7 +511,7 @@ const Template = ({ label, ...args }) => { }); e.geometry.points = [ - new mxPoint( + new Point( step444.geometry.x + step444.geometry.width / 2, end3.geometry.y + end3.geometry.height / 2 ), @@ -544,7 +537,7 @@ const Template = ({ label, ...args }) => { }); e.geometry.points = [ - new mxPoint( + new Point( step33.geometry.x + step33.geometry.width / 2 + 20, step11.geometry.y + (step11.geometry.height * 4) / 5 ), @@ -563,6 +556,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Thread.stories.js b/packages/html/stories/Thread.stories.js index ae12a0478..88a073382 100644 --- a/packages/html/stories/Thread.stories.js +++ b/packages/html/stories/Thread.stories.js @@ -1,19 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Misc/Thread', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxClient - } = mxgraph; + const { Graph, mxClient } = maxgraph; mxClient.setImageBasePath('/images'); @@ -26,7 +23,7 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Disables basic selection and cell handling graph.setEnabled(false); @@ -66,6 +63,6 @@ const Template = ({ label, ...args }) => { f(); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Toolbar.stories.js b/packages/html/stories/Toolbar.stories.js index 6b0bca0d6..62068e71e 100644 --- a/packages/html/stories/Toolbar.stories.js +++ b/packages/html/stories/Toolbar.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,26 +8,26 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRubberband, - mxConnectionHandler, - mxImage, + Graph, + Rubberband, + ConnectionHandler, + ImageBox, mxToolbar, - mxGraphModel, + GraphModel, mxKeyHandler, - mxCell, - mxGeometry, - mxDragSource, + Cell, + Geometry, + DragSource, mxDomHelpers, - mxGestureUtils - } = mxgraph; + GestureUtils, + } = maxgraph; const div = document.createElement('div'); @@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => { // Defines an icon for creating new connections in the connection handler. // This will automatically disable the highlighting of the source vertex. - mxConnectionHandler.prototype.connectImage = new mxImage( + ConnectionHandler.prototype.connectImage = new ImageBox( '/images/connector.gif', 16, 16 @@ -66,12 +66,12 @@ const Template = ({ label, ...args }) => { // Creates the model and the graph inside the container // using the fastest rendering available on the browser - const model = new mxGraphModel(); - const graph = new mxGraph(container, model); + const model = new GraphModel(); + const graph = new Graph(container, model); graph.dropEnabled = true; // Matches DnD inside the graph - mxDragSource.prototype.getDropTarget = function(graph, x, y) { + DragSource.prototype.getDropTarget = function (graph, x, y) { let cell = graph.getCellAt(x, y); if (!graph.isValidDropTarget(cell)) { cell = null; @@ -86,22 +86,16 @@ const Template = ({ label, ...args }) => { // Stops editing on enter or escape keypress const keyHandler = new mxKeyHandler(graph); - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); const addVertex = (icon, w, h, style) => { - const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style); + const vertex = new Cell(null, new Geometry(0, 0, w, h), style); vertex.setVertex(true); addToolbarItem(graph, toolbar, vertex, icon); }; - addVertex( - '/images/swimlane.gif', - 120, - 160, - 'shape=swimlane;startSize=20;' - ); + addVertex('/images/swimlane.gif', 120, 160, 'shape=swimlane;startSize=20;'); addVertex('/images/rectangle.gif', 100, 40, ''); addVertex('/images/rounded.gif', 100, 40, 'shape=rounded'); addVertex('/images/ellipse.gif', 40, 40, 'shape=ellipse'); @@ -111,37 +105,30 @@ const Template = ({ label, ...args }) => { addVertex('/images/actor.gif', 30, 40, 'shape=actor'); toolbar.addLine(); - const button = mxDomHelpers.button( - 'Create toolbar entry from selection', - evt => { - if (!graph.isSelectionEmpty()) { - // Creates a copy of the selection array to preserve its state - const cells = graph.getSelectionCells(); - const bounds = graph.getView().getBounds(cells); + const button = mxDomHelpers.button('Create toolbar entry from selection', (evt) => { + if (!graph.isSelectionEmpty()) { + // Creates a copy of the selection array to preserve its state + const cells = graph.getSelectionCells(); + const bounds = graph.getView().getBounds(cells); - // Function that is executed when the image is dropped on - // the graph. The cell argument points to the cell under - // the mousepointer if there is one. - const funct = (graph, evt, cell) => { - graph.stopEditing(false); + // Function that is executed when the image is dropped on + // the graph. The cell argument points to the cell under + // the mousepointer if there is one. + const funct = (graph, evt, cell) => { + graph.stopEditing(false); - const pt = graph.getPointForEvent(evt); - const dx = pt.x - bounds.x; - const dy = pt.y - bounds.y; + const pt = graph.getPointForEvent(evt); + const dx = pt.x - bounds.x; + const dy = pt.y - bounds.y; - graph.setSelectionCells(graph.importCells(cells, dx, dy, cell)); - }; + graph.setSelectionCells(graph.importCells(cells, dx, dy, cell)); + }; - // Creates the image which is used as the drag icon (preview) - const img = toolbar.addMode( - null, - '/images/outline.gif', - funct - ); - mxGestureUtils.makeDraggable(img, graph, funct); - } + // Creates the image which is used as the drag icon (preview) + const img = toolbar.addMode(null, '/images/outline.gif', funct); + GestureUtils.makeDraggable(img, graph, funct); } - ); + }); tbContainer.appendChild(button); @@ -162,10 +149,10 @@ const Template = ({ label, ...args }) => { // Creates the image which is used as the drag icon (preview) const img = toolbar.addMode(null, image, funct); - mxGestureUtils.makeDraggable(img, graph, funct); + GestureUtils.makeDraggable(img, graph, funct); } return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Tree.stories.js b/packages/html/stories/Tree.stories.js index af97c8ff1..4f5ee65f2 100644 --- a/packages/html/stories/Tree.stories.js +++ b/packages/html/stories/Tree.stories.js @@ -1,30 +1,30 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Layouts/Tree', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxConstants, - mxCylinder, - mxCellRenderer, - mxGraphView, - mxImage, + Graph, + Constants, + CylinderShape, + CellRenderer, + GraphView, + ImageBox, mxClient, - mxEdgeStyle, + EdgeStyle, mxKeyHandler, - mxCompactTreeLayout, - mxLayoutManager, - mxRectangle, - mxPoint - } = mxgraph; + CompactTreeLayout, + LayoutManager, + Rectangle, + Point, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -40,7 +40,7 @@ const Template = ({ label, ...args }) => { Defines a custom shape for the tree node that includes the upper half of the outgoing edge(s). */ - class TreeNodeShape extends mxCylinder { + class TreeNodeShape extends CylinderShape { // Defines the length of the upper edge segment. static segment = 20; @@ -56,8 +56,7 @@ const Template = ({ label, ...args }) => { redrawPath(path, x, y, w, h, isForeground) { const { graph } = this.state.view; - const hasChildren = - graph.model.getOutgoingEdges(this.state.cell).length > 0; + const hasChildren = graph.model.getOutgoingEdges(this.state.cell).length > 0; if (isForeground) { if (hasChildren) { @@ -75,27 +74,27 @@ const Template = ({ label, ...args }) => { } } } - mxCellRenderer.registerShape('treenode', TreeNodeShape); + CellRenderer.registerShape('treenode', TreeNodeShape); - class MyCustomGraphView extends mxGraphView { + class MyCustomGraphView extends GraphView { updateFloatingTerminalPoint(edge, start, end, source) { // Defines a custom perimeter for the nodes in the tree let pt = null; if (source) { - pt = new mxPoint( + pt = new Point( start.x + start.width / 2, start.y + start.height + TreeNodeShape.segment ); } else { - pt = new mxPoint(start.x + start.width / 2, start.y); + pt = new Point(start.x + start.width / 2, start.y); } edge.setAbsoluteTerminalPoint(pt, source); } } - class MyCustomCellRenderer extends mxCellRenderer { + class MyCustomCellRenderer extends CellRenderer { getControlBounds(state) { // Defines the position of the folding icon if (state.control != null) { @@ -104,12 +103,9 @@ const Template = ({ label, ...args }) => { const h = state.control.bounds.height / oldScale; const s = state.view.scale; - return new mxRectangle( + return new Rectangle( state.x + state.width / 2 - (w / 2) * s, - state.y + - state.height + - TreeNodeShape.segment * s - - (h / 2) * s, + state.y + state.height + TreeNodeShape.segment * s - (h / 2) * s, w * s, h * s ); @@ -121,20 +117,12 @@ const Template = ({ label, ...args }) => { // Make the layout instance accessible by MyCustomGraph let layout; - class MyCustomGraph extends mxGraph { + class MyCustomGraph extends Graph { // Sets the collapse and expand icons. The values below are the default // values, but this is how to replace them if you need to. - collapsedImage = new mxImage( - `${mxClient.imageBasePath}/collapsed.gif`, - 9, - 9 - ); + collapsedImage = new ImageBox(`${mxClient.imageBasePath}/collapsed.gif`, 9, 9); - expandedImage = new mxImage( - `${mxClient.imageBasePath}/expanded.gif`, - 9, - 9 - ); + expandedImage = new ImageBox(`${mxClient.imageBasePath}/expanded.gif`, 9, 9); isCellFoldable(cell) { // Defines the condition for showing the folding icon @@ -171,7 +159,7 @@ const Template = ({ label, ...args }) => { show = show != null ? show : true; const cells = []; - this.traverse(cell, true, function(vertex) { + this.traverse(cell, true, function (vertex) { if (vertex !== cell) { cells.push(vertex); } @@ -200,7 +188,7 @@ const Template = ({ label, ...args }) => { style.shadow = true; style = graph.getStylesheet().getDefaultEdgeStyle(); - style.edge = mxEdgeStyle.TopToBottom; + style.edge = EdgeStyle.TopToBottom; style.rounded = true; // Enables automatic sizing for vertices after editing and @@ -215,15 +203,15 @@ const Template = ({ label, ...args }) => { // Enables automatic layout on the graph and installs // a tree layout for all groups who's children are // being changed, added or removed. - layout = new mxCompactTreeLayout(graph, false); + layout = new CompactTreeLayout(graph, false); layout.useBoundingBox = false; layout.edgeRouting = false; layout.levelDistance = 30; layout.nodeDistance = 10; - const layoutMgr = new mxLayoutManager(graph); + const layoutMgr = new LayoutManager(graph); - layoutMgr.getLayout = function(cell) { + layoutMgr.getLayout = function (cell) { if (cell.getChildCount() > 0) { return layout; } @@ -237,15 +225,7 @@ const Template = ({ label, ...args }) => { graph.getModel().beginUpdate(); try { const w = graph.container.offsetWidth; - const root = graph.insertVertex( - parent, - 'treeRoot', - 'Root', - w / 2 - 30, - 20, - 60, - 40 - ); + const root = graph.insertVertex(parent, 'treeRoot', 'Root', w / 2 - 30, 20, 60, 40); const v1 = graph.insertVertex(parent, 'v1', 'Child 1', 0, 0, 60, 40); graph.insertEdge(parent, null, '', root, v1); @@ -268,26 +248,10 @@ const Template = ({ label, ...args }) => { const v22 = graph.insertVertex(parent, 'v22', 'Child 2.2', 0, 0, 60, 40); graph.insertEdge(parent, null, '', v2, v22); - const v221 = graph.insertVertex( - parent, - 'v221', - 'Child 2.2.1', - 0, - 0, - 60, - 40 - ); + const v221 = graph.insertVertex(parent, 'v221', 'Child 2.2.1', 0, 0, 60, 40); graph.insertEdge(parent, null, '', v22, v221); - const v222 = graph.insertVertex( - parent, - 'v222', - 'Child 2.2.2', - 0, - 0, - 60, - 40 - ); + const v222 = graph.insertVertex(parent, 'v222', 'Child 2.2.2', 0, 0, 60, 40); graph.insertEdge(parent, null, '', v22, v222); const v31 = graph.insertVertex(parent, 'v31', 'Child 3.1', 0, 0, 60, 40); @@ -298,6 +262,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/UserObject.stories.js b/packages/html/stories/UserObject.stories.js index aa28b81e7..52ffab0c0 100644 --- a/packages/html/stories/UserObject.stories.js +++ b/packages/html/stories/UserObject.stories.js @@ -1,31 +1,31 @@ -import mxgraph from '@mxgraph/core'; -import { popup } from '@mxgraph/core/src/util/gui/mxWindow'; +import maxgraph from '@maxgraph/core'; +import { popup } from '@maxgraph/core/util/gui/mxWindow'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Xml_Json/UserObject', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRectangle, + Graph, + Rectangle, mxDomHelpers, mxKeyHandler, - mxEvent, + InternalEvent, mxXmlUtils, mxCodec, - mxConstants, - mxUtils, - mxEdgeStyle, + Constants, + utils, + EdgeStyle, mxDomUtils, mxForm, - mxCellAttributeChange - } = mxgraph; + CellAttributeChange, + } = maxgraph; const div = document.createElement('div'); @@ -39,7 +39,7 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Note that these XML nodes will be enclosing the - // mxCell nodes for the model cells in the output + // Cell nodes for the model cells in the output const doc = mxXmlUtils.createXmlDocument(); const person1 = doc.createElement('Person'); @@ -54,7 +54,7 @@ const Template = ({ label, ...args }) => { relation.setAttribute('since', '1985'); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Optional disabling of sizing graph.setCellsResizable(false); @@ -62,19 +62,19 @@ const Template = ({ label, ...args }) => { // Configures the graph contains to resize and // add a border at the bottom, right graph.setResizeContainer(true); - graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380); + graph.minimumContainerSize = new Rectangle(0, 0, 500, 380); graph.setBorder(60); // Stops editing on enter key, handles escape new mxKeyHandler(graph); // Overrides method to disallow edge label editing - graph.isCellEditable = function(cell) { + graph.isCellEditable = function (cell) { return !cell.isEdge(); }; // Overrides method to provide a cell label in the display - graph.convertValueToString = function(cell) { + graph.convertValueToString = function (cell) { if (mxDomUtils.isNode(cell.value)) { if (cell.value.nodeName.toLowerCase() == 'person') { const firstName = cell.getAttribute('firstName', ''); @@ -87,10 +87,7 @@ const Template = ({ label, ...args }) => { return firstName; } if (cell.value.nodeName.toLowerCase() == 'knows') { - return `${cell.value.nodeName} (Since ${cell.getAttribute( - 'since', - '' - )})`; + return `${cell.value.nodeName} (Since ${cell.getAttribute('since', '')})`; } } @@ -99,16 +96,12 @@ 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' - ) { + graph.cellLabelChanged = function (cell, newValue, autoSize) { + if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') { const pos = newValue.indexOf(' '); const firstName = pos > 0 ? newValue.substring(0, pos) : newValue; - const lastName = - pos > 0 ? newValue.substring(pos + 1, newValue.length) : ''; + const lastName = pos > 0 ? newValue.substring(pos + 1, newValue.length) : ''; // Clones the value for correct undo/redo const elt = cell.value.cloneNode(true); @@ -125,11 +118,8 @@ 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' - ) { + graph.getEditingValue = function (cell) { + if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') { const firstName = cell.getAttribute('firstName', ''); const lastName = cell.getAttribute('lastName', ''); @@ -141,7 +131,7 @@ const Template = ({ label, ...args }) => { graph.setTooltips(true); const { getTooltipForCell } = graph; - graph.getTooltipForCell = function(cell) { + graph.getTooltipForCell = function (cell) { // Adds some relation details for edges if (cell.isEdge()) { const src = this.getLabel(cell.getTerminal(true)); @@ -154,8 +144,7 @@ const Template = ({ label, ...args }) => { }; // Enables rubberband selection - if (args.rubberBand) - new RubberBand(graph); + if (args.rubberBand) new RubberBand(graph); const buttons = document.createElement('div'); div.appendChild(buttons); @@ -165,10 +154,10 @@ const Template = ({ label, ...args }) => { // Adds an option to view the XML of the graph buttons.appendChild( - mxDomHelpers.button('View XML', function() { + mxDomHelpers.button('View XML', function () { const encoder = new mxCodec(); const node = encoder.encode(graph.getModel()); - popup(mxUtils.getPrettyXml(node), true); + popup(utils.getPrettyXml(node), true); }) ); @@ -188,7 +177,7 @@ const Template = ({ label, ...args }) => { style = graph.getStylesheet().getDefaultEdgeStyle(); style.strokeColor = '#0C0C0C'; style.labelBackgroundColor = 'white'; - style.edge = mxEdgeStyle.ElbowConnector; + style.edge = EdgeStyle.ElbowConnector; style.rounded = true; style.fontColor = 'black'; style.fontSize = '10'; @@ -209,12 +198,10 @@ const Template = ({ label, ...args }) => { } // Implements a properties panel that uses - // mxCellAttributeChange to change properties - graph - .getSelectionModel() - .addListener(mxEvent.CHANGE, function(sender, evt) { - selectionChanged(graph); - }); + // CellAttributeChange to change properties + graph.getSelectionModel().addListener(InternalEvent.CHANGE, function (sender, evt) { + selectionChanged(graph); + }); selectionChanged(graph); @@ -262,7 +249,7 @@ const Template = ({ label, ...args }) => { function createTextField(graph, form, cell, attribute) { const input = form.addText(`${attribute.nodeName}:`, attribute.nodeValue); - const applyHandler = function() { + const applyHandler = function () { const newValue = input.value || ''; const oldValue = cell.getAttribute(attribute.nodeName, ''); @@ -270,11 +257,7 @@ const Template = ({ label, ...args }) => { graph.getModel().beginUpdate(); try { - const edit = new mxCellAttributeChange( - cell, - attribute.nodeName, - newValue - ); + const edit = new CellAttributeChange(cell, attribute.nodeName, newValue); graph.getModel().execute(edit); graph.updateCellSize(cell); } finally { @@ -283,9 +266,9 @@ const Template = ({ label, ...args }) => { } }; - mxEvent.addListener(input, 'keypress', function(evt) { + InternalEvent.addListener(input, 'keypress', function (evt) { // Needs to take shift into account for textareas - if (evt.keyCode == /* enter */ 13 && !mxEvent.isShiftDown(evt)) { + if (evt.keyCode == /* enter */ 13 && !InternalEvent.isShiftDown(evt)) { input.blur(); } }); @@ -296,10 +279,10 @@ const Template = ({ label, ...args }) => { // As a workaround you should use a local variable // that stores the focused field and invoke blur // explicitely where we do the graph.focus above. - mxEvent.addListener(input, 'blur', applyHandler); + InternalEvent.addListener(input, 'blur', applyHandler); } return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Validation.stories.js b/packages/html/stories/Validation.stories.js index 041a7c6b1..6b9bd0cf0 100644 --- a/packages/html/stories/Validation.stories.js +++ b/packages/html/stories/Validation.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,20 +8,20 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, - mxRubberband, + Graph, + Rubberband, mxXmlUtils, - mxMultiplicity, + Multiplicity, mxKeyHandler, - mxEvent - } = mxgraph; + InternalEvent, + } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -37,7 +37,7 @@ const Template = ({ label, ...args }) => { const subtargetNode = xmlDocument.createElement('Subtarget'); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); graph.setConnectable(true); graph.setTooltips(true); graph.setAllowDanglingEdges(false); @@ -45,7 +45,7 @@ const Template = ({ label, ...args }) => { // Source nodes needs 1..2 connected Targets graph.multiplicities.push( - new mxMultiplicity( + new Multiplicity( true, 'Source', null, @@ -60,7 +60,7 @@ const Template = ({ label, ...args }) => { // Source node does not want any incoming connections graph.multiplicities.push( - new mxMultiplicity( + new Multiplicity( false, 'Source', null, @@ -75,7 +75,7 @@ const Template = ({ label, ...args }) => { // Target needs exactly one incoming connection from Source graph.multiplicities.push( - new mxMultiplicity( + new Multiplicity( false, 'Target', null, @@ -89,11 +89,11 @@ const Template = ({ label, ...args }) => { ); // Enables rubberband selection - new mxRubberband(graph); + new Rubberband(graph); // Removes cells when [DELETE] is pressed const keyHandler = new mxKeyHandler(graph); - keyHandler.bindKey(46, function(evt) { + keyHandler.bindKey(46, function (evt) { if (graph.isEnabled()) { graph.removeCells(); } @@ -101,11 +101,11 @@ const Template = ({ label, ...args }) => { // Installs automatic validation (use editor.validation = true // if you are using an mxEditor instance) - const listener = function(sender, evt) { + const listener = function (sender, evt) { graph.validateGraph(); }; - graph.getModel().addListener(mxEvent.CHANGE, listener); + graph.getModel().addListener(InternalEvent.CHANGE, listener); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). @@ -131,15 +131,7 @@ const Template = ({ label, ...args }) => { 80, 30 ); - const v5 = graph.insertVertex( - parent, - null, - subtargetNode, - 200, - 200, - 80, - 30 - ); + const v5 = graph.insertVertex(parent, null, subtargetNode, 200, 200, 80, 30); const v6 = graph.insertVertex( parent, null, @@ -159,6 +151,6 @@ const Template = ({ label, ...args }) => { } return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Visibility.stories.js b/packages/html/stories/Visibility.stories.js index a91412144..78b9d15d0 100644 --- a/packages/html/stories/Visibility.stories.js +++ b/packages/html/stories/Visibility.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,17 +8,13 @@ export default { ...globalTypes, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph, - mxRubberband, - mxDomHelpers - } = mxgraph; + const { Graph, Rubberband, mxDomHelpers } = maxgraph; const div = document.createElement('div'); @@ -32,11 +28,10 @@ const Template = ({ label, ...args }) => { div.appendChild(container); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Enables rubberband selection - if (args.rubberBand) - new mxRubberband(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). @@ -47,7 +42,7 @@ const Template = ({ label, ...args }) => { let showThree = true; // Overridden to implement dynamic conditions - const isVisible = function() { + const isVisible = function () { // TODO super cannot be used here // let result = super.isVisible(); let result; @@ -93,19 +88,19 @@ const Template = ({ label, ...args }) => { // Dynamic conditions (requires refresh) buttons.appendChild( - mxDomHelpers.button('Cond 1', function() { + mxDomHelpers.button('Cond 1', function () { showOne = !showOne; graph.refresh(); }) ); buttons.appendChild( - mxDomHelpers.button('Cond 2', function() { + mxDomHelpers.button('Cond 2', function () { showTwo = !showTwo; graph.refresh(); }) ); buttons.appendChild( - mxDomHelpers.button('Cond 3', function() { + mxDomHelpers.button('Cond 3', function () { showThree = !showThree; graph.refresh(); }) @@ -113,7 +108,7 @@ const Template = ({ label, ...args }) => { // Explicit show/hide buttons.appendChild( - mxDomHelpers.button('Toggle cell', function() { + mxDomHelpers.button('Toggle cell', function () { graph.toggleCells(!v1.isVisible(), [v1], true); }) ); @@ -122,7 +117,7 @@ const Template = ({ label, ...args }) => { let removed = null; buttons.appendChild( - mxDomHelpers.button('Add/remove cell', function() { + mxDomHelpers.button('Add/remove cell', function () { if (removed != null) { graph.addCells(removed); removed = null; @@ -133,6 +128,6 @@ const Template = ({ label, ...args }) => { ); return div; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Window.stories.js b/packages/html/stories/Window.stories.js index 050b6f826..271099db0 100644 --- a/packages/html/stories/Window.stories.js +++ b/packages/html/stories/Window.stories.js @@ -1,4 +1,4 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; @@ -8,26 +8,26 @@ export default { ...globalTypes, contextMenu: { type: 'boolean', - defaultValue: false + defaultValue: false, }, rubberBand: { type: 'boolean', - defaultValue: true - } - } + defaultValue: true, + }, + }, }; const Template = ({ label, ...args }) => { const { - mxGraph, + Graph, mxWindow, mxKeyHandler, - mxRubberband, - mxEvent, + Rubberband, + InternalEvent, mxLog, mxDomUtils, - mxClient - } = mxgraph; + mxClient, + } = maxgraph; mxClient.setImageBasePath('/images'); @@ -53,19 +53,17 @@ const Template = ({ label, ...args }) => { ); // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Adds rubberband selection and keystrokes graph.setTooltips(true); graph.setPanning(true); - if (args.rubberBand) - new mxRubberband(graph); + if (args.rubberBand) new Rubberband(graph); new mxKeyHandler(graph); - if (!args.contextMenu) - mxEvent.disableContextMenu(container); + if (!args.contextMenu) InternalEvent.disableContextMenu(container); // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). @@ -127,6 +125,6 @@ const Template = ({ label, ...args }) => { mxLog.show(); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/stories/Wrapping.stories.js b/packages/html/stories/Wrapping.stories.js index e5c239ab2..ba38d4771 100644 --- a/packages/html/stories/Wrapping.stories.js +++ b/packages/html/stories/Wrapping.stories.js @@ -1,18 +1,16 @@ -import mxgraph from '@mxgraph/core'; +import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; export default { title: 'Labels/Wrapping', argTypes: { - ...globalTypes - } + ...globalTypes, + }, }; const Template = ({ label, ...args }) => { - const { - mxGraph - } = mxgraph; + const { Graph } = maxgraph; const container = document.createElement('div'); container.style.position = 'relative'; @@ -23,13 +21,13 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; // Creates the graph inside the given container - const graph = new mxGraph(container); + const graph = new Graph(container); // Enables HTML labels as wrapping is only available for those graph.setHtmlLabels(true); // Disables in-place editing for edges - graph.isCellEditable = function(cell) { + graph.isCellEditable = function (cell) { return !cell.isEdge(); }; @@ -64,6 +62,6 @@ const Template = ({ label, ...args }) => { }); return container; -} +}; -export const Default = Template.bind({}); \ No newline at end of file +export const Default = Template.bind({}); diff --git a/packages/html/webpack.config.js b/packages/html/webpack.config.js index 982593e2a..6b0e9e663 100644 --- a/packages/html/webpack.config.js +++ b/packages/html/webpack.config.js @@ -1,11 +1,11 @@ const path = require('path'); -const {merge} = require('webpack-merge'); +const { merge } = require('webpack-merge'); const base = require('../../webpack.config'); module.exports = merge(base, { resolve: { alias: { - '@mxgraph/core': path.resolve(__dirname, '../core') - } - } -}); \ No newline at end of file + '@maxgraph/core': path.resolve(__dirname, '../core/src'), + }, + }, +}); diff --git a/tsconfig.json b/tsconfig.json index dcd8889ce..374f8c4d4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,17 +7,17 @@ "isolatedModules": true, "jsx": "preserve", "module": "es2020", - "lib": [ - "es2020", - "dom" - ], + "lib": ["es2020", "dom"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "es2020", "resolveJsonModule": true, // Required for JSON files "skipLibCheck": true, - "forceConsistentCasingInFileNames": true + "forceConsistentCasingInFileNames": true, + "paths": { + "core/*": ["./packages/core/src/*"] + } }, "exclude": [ "node_modules", @@ -25,9 +25,5 @@ "**/*.json", // Don't try and check JSON files "**/*.spec.ts" ], - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx" - ] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] } diff --git a/webpack.config.js b/webpack.config.js index 190009653..ff5928128 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,5 @@ +const path = require('path'); + module.exports = { devtool: 'eval-source-map', module: { @@ -7,14 +9,17 @@ module.exports = { use: { loader: 'babel-loader', options: { - rootMode: 'upward' - } + rootMode: 'upward', + }, }, - exclude: /node_modules/ - } - ] + exclude: /node_modules/, + }, + ], }, resolve: { - extensions: ['.ts', '.js', '.css'] - } -} \ No newline at end of file + alias: { + core: path.resolve(__dirname, 'packages/core/src'), + }, + extensions: ['.ts', '.js', '.css'], + }, +};