From 4316d4f5e578d1e7267c0a15452aa78d6c88c31a Mon Sep 17 00:00:00 2001 From: Junsik Shim Date: Wed, 1 Sep 2021 23:04:33 +0900 Subject: [PATCH] - Trying to get the stories working... --- packages/core/src/types.ts | 2 +- packages/core/src/util/Utils.ts | 63 ++++++++++++++----- packages/core/src/util/animate/mxAnimation.js | 6 +- packages/core/src/util/gui/mxToolbar.js | 1 + packages/core/src/util/gui/mxWindow.js | 32 ++-------- packages/core/src/util/mxUndoManager.js | 1 + .../src/util/storage/mxAutoSaveManager.js | 3 +- packages/core/src/view/Graph.ts | 44 ++++++------- packages/core/src/view/GraphHandler.ts | 22 ++++--- packages/core/src/view/cell/GraphCells.ts | 15 ++--- packages/core/src/view/cell/datatypes/Cell.ts | 8 +-- .../core/src/view/cell/datatypes/CellState.ts | 2 +- .../core/src/view/cell/edge/EdgeHandler.ts | 39 ++++++------ packages/core/src/view/cell/edge/GraphEdge.ts | 7 --- .../core/src/view/cell/vertex/GraphVertex.ts | 3 +- .../core/src/view/cell/vertex/VertexHandle.ts | 2 +- .../src/view/cell/vertex/VertexHandler.ts | 25 +++++--- .../src/view/connection/ConnectionHandler.ts | 15 ++--- .../src/view/connection/ConstraintHandler.ts | 2 +- .../src/view/connection/GraphConnections.ts | 23 ++++++- packages/core/src/view/event/EventSource.ts | 13 ++-- packages/core/src/view/event/InternalEvent.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 +- .../core/src/view/layout/LayoutManager.ts | 47 +++++--------- .../core/src/view/layout/SwimlaneManager.ts | 20 ++---- .../model/GraphAbstractHierarchyCell.ts | 2 +- packages/core/src/view/model/Model.ts | 9 +-- .../core/src/view/selection/GraphSelection.ts | 30 ++++----- packages/core/src/view/snap/GraphSnap.ts | 8 +-- packages/core/src/view/view/GraphView.ts | 6 +- packages/core/webpack.config.js | 9 +-- packages/html/stories/FileIO.stories.js | 3 +- packages/html/stories/HelloWorld.stories.js | 9 ++- tsconfig.json | 11 ++-- webpack.config.js | 5 -- 50 files changed, 263 insertions(+), 268 deletions(-) diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 5cb54d134..cc82ae22f 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -236,7 +236,7 @@ export type ListenerTarget = { mxListenerList?: Listener[]; }; -export type Listenable = (EventSource | EventTarget) & ListenerTarget; +export type Listenable = (EventTarget | (Window & typeof globalThis)) & ListenerTarget; export type MouseEventListener = (me: MouseEvent) => void; export type KeyboardEventListener = (ke: KeyboardEvent) => void; diff --git a/packages/core/src/util/Utils.ts b/packages/core/src/util/Utils.ts index fd238c831..37095b4e1 100644 --- a/packages/core/src/util/Utils.ts +++ b/packages/core/src/util/Utils.ts @@ -39,10 +39,10 @@ import { getOuterHtml } from './DomUtils'; import CellState from '../view/cell/datatypes/CellState'; import Cell from '../view/cell/datatypes/Cell'; import Model from '../view/model/Model'; -import graph from '../view/Graph'; +import CellArray from '../view/cell/datatypes/CellArray'; import type { CellStateStyles, Properties, StyleValue } from '../types'; -import CellArray from '../view/cell/datatypes/CellArray'; +import type { MaxGraph } from '../view/Graph'; /** * Class: mxUtils @@ -2072,7 +2072,7 @@ export const getSizeForString = ( */ export const getScaleForPageCount = ( pageCount: number, - graph: graph, + graph: MaxGraph, pageFormat?: Rectangle, border = 0 ) => { @@ -2209,7 +2209,7 @@ export const getScaleForPageCount = ( * h - Optional height of the graph view. */ export const show = ( - graph: graph, + graph: MaxGraph, doc: Document, x0 = 0, y0 = 0, @@ -2325,7 +2325,7 @@ export const show = ( * * graph - to be printed. */ -export const printScreen = (graph: graph) => { +export const printScreen = (graph: MaxGraph) => { const wnd = window.open(); if (!wnd) return; @@ -2353,19 +2353,52 @@ export const isNullish = (v: string | object | null | undefined | number) => export const isNotNullish = (v: string | object | null | undefined | number) => !isNullish(v); -// Mixins support -export const applyMixins = (derivedCtor: any, constructors: any[]) => { - constructors.forEach((baseCtor) => { - Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => { - Object.defineProperty( - derivedCtor.prototype, - name, - Object.getOwnPropertyDescriptor(baseCtor.prototype, name) || Object.create(null) - ); - }); +export const copyPropertiesToPrototype = (source: any, sourceObj: any, target: any) => { + Object.getOwnPropertyNames(sourceObj).forEach((name) => { + try { + Object.defineProperty(target, name, { + ...(Object.getOwnPropertyDescriptor(source, name) || Object.create(null)), + value: sourceObj[name], + }); + } catch (e) { + console.error(e); + } }); }; +export const copyMethodsToPrototype = (source: any, target: any) => { + Object.getOwnPropertyNames(source).forEach((name) => { + try { + if (name !== 'constructor') { + Object.defineProperty( + target, + name, + Object.getOwnPropertyDescriptor(source, name) || Object.create(null) + ); + } + } catch (e) { + console.error(e); + } + }); +}; + +// Mixins support +export const applyMixins = (derivedCtor: any, constructors: any[]) => { + constructors.forEach((baseCtor) => { + // Copy variables + copyPropertiesToPrototype(baseCtor.prototype, new baseCtor(), derivedCtor.prototype); + + // Copy methods + copyMethodsToPrototype(baseCtor.prototype, derivedCtor.prototype); + }); + + // Attach the derived prototype to each prototype. + constructors.forEach((baseCtor) => { + Object.setPrototypeOf(baseCtor.prototype, derivedCtor.prototype); + }); +}; + +// Creates a class using a type export const autoImplement = (): new () => T => class {} as any; export default utils; diff --git a/packages/core/src/util/animate/mxAnimation.js b/packages/core/src/util/animate/mxAnimation.js index 0bbe5ef36..ae4809d58 100644 --- a/packages/core/src/util/animate/mxAnimation.js +++ b/packages/core/src/util/animate/mxAnimation.js @@ -17,6 +17,7 @@ import InternalEvent from '../../view/event/InternalEvent'; class mxAnimation extends EventSource { constructor(delay) { super(); + this.delay = delay != null ? delay : 20; } @@ -46,10 +47,7 @@ class mxAnimation extends EventSource { // startAnimation(): void; startAnimation() { if (this.thread == null) { - this.thread = window.setInterval( - this.updateAnimation.bind(this), - this.delay - ); + this.thread = window.setInterval(this.updateAnimation.bind(this), this.delay); } } diff --git a/packages/core/src/util/gui/mxToolbar.js b/packages/core/src/util/gui/mxToolbar.js index 4052660c6..1ffa55acd 100644 --- a/packages/core/src/util/gui/mxToolbar.js +++ b/packages/core/src/util/gui/mxToolbar.js @@ -28,6 +28,7 @@ import { br, write, writeln } from '../DomUtils'; class mxToolbar extends EventSource { constructor(container) { super(); + this.container = container; } diff --git a/packages/core/src/util/gui/mxWindow.js b/packages/core/src/util/gui/mxWindow.js index 0ee9ddd2c..c06d7315a 100644 --- a/packages/core/src/util/gui/mxWindow.js +++ b/packages/core/src/util/gui/mxWindow.js @@ -378,10 +378,7 @@ class mxWindow extends EventSource { // setScrollable(scrollable: boolean): void; setScrollable(scrollable) { // Workaround for hang in Presto 2.5.22 (Opera 10.5) - if ( - navigator.userAgent == null || - navigator.userAgent.indexOf('Presto/2.5') < 0 - ) { + if (navigator.userAgent == null || navigator.userAgent.indexOf('Presto/2.5') < 0) { if (scrollable) { this.contentWrapper.style.overflow = 'auto'; } else { @@ -519,12 +516,7 @@ class mxWindow extends EventSource { } }; - InternalEvent.addGestureListeners( - this.resize, - start, - dragHandler, - dropHandler - ); + InternalEvent.addGestureListeners(this.resize, start, dragHandler, dropHandler); this.div.appendChild(this.resize); } else { this.resize.style.display = 'inline'; @@ -550,9 +542,7 @@ class mxWindow extends EventSource { this.table.style.height = `${height}px`; this.contentWrapper.style.height = `${ - this.div.offsetHeight - - this.title.offsetHeight - - this.contentHeightCorrection + this.div.offsetHeight - this.title.offsetHeight - this.contentHeightCorrection }px`; } @@ -792,12 +782,7 @@ class mxWindow extends EventSource { }; const dropHandler = (evt) => { - InternalEvent.removeGestureListeners( - document, - null, - dragHandler, - dropHandler - ); + InternalEvent.removeGestureListeners(document, null, dragHandler, dropHandler); this.fireEvent(new EventObject(InternalEvent.MOVE_END, 'event', evt)); InternalEvent.consume(evt); }; @@ -940,9 +925,7 @@ class mxWindow extends EventSource { this.contentWrapper.style.display != 'none' ) { this.contentWrapper.style.height = `${ - this.div.offsetHeight - - this.title.offsetHeight - - this.contentHeightCorrection + this.div.offsetHeight - this.title.offsetHeight - this.contentHeightCorrection }px`; } @@ -1095,10 +1078,7 @@ export const error = (message, width, close, icon) => { warn.destroy(); }); - write( - button, - Resources.get(utils.closeResource) || utils.closeResource - ); + write(button, Resources.get(utils.closeResource) || utils.closeResource); tmp.appendChild(button); div.appendChild(tmp); diff --git a/packages/core/src/util/mxUndoManager.js b/packages/core/src/util/mxUndoManager.js index c08f97f6c..ca339730d 100644 --- a/packages/core/src/util/mxUndoManager.js +++ b/packages/core/src/util/mxUndoManager.js @@ -76,6 +76,7 @@ import EventSource from '../view/event/EventSource'; class mxUndoManager extends EventSource { constructor(size) { super(); + this.size = size != null ? size : 100; this.clear(); } diff --git a/packages/core/src/util/storage/mxAutoSaveManager.js b/packages/core/src/util/storage/mxAutoSaveManager.js index 77abf74ad..86fe145bc 100644 --- a/packages/core/src/util/storage/mxAutoSaveManager.js +++ b/packages/core/src/util/storage/mxAutoSaveManager.js @@ -147,8 +147,7 @@ class mxAutoSaveManager extends EventSource { if ( dt > this.autoSaveDelay || - (this.ignoredChanges >= this.autoSaveThreshold && - dt > this.autoSaveThrottle) + (this.ignoredChanges >= this.autoSaveThreshold && dt > this.autoSaveThrottle) ) { this.save(); this.reset(); diff --git a/packages/core/src/view/Graph.ts b/packages/core/src/view/Graph.ts index afbd9e662..52d8efdce 100644 --- a/packages/core/src/view/Graph.ts +++ b/packages/core/src/view/Graph.ts @@ -24,6 +24,8 @@ import Point from './geometry/Point'; import { applyMixins, autoImplement, + copyMethodsToPrototype, + copyPropertiesToPrototype, getCurrentStyle, hasScrollbars, parseCssNumber, @@ -70,6 +72,7 @@ import GraphTooltip from './tooltip/GraphTooltip'; import GraphTerminal from './terminal/GraphTerminal'; import GraphDragDrop from './drag_drop/GraphDragDrop'; import GraphSwimlane from './swimlane/GraphSwimlane'; +import GraphPageBreaks from './page_breaks/GraphPageBreaks'; type PartialEvents = Pick< GraphEvents, @@ -260,14 +263,14 @@ const defaultPlugins: GraphPluginConstructor[] = [ class Graph extends autoImplement() { constructor( container: HTMLElement, - model: Model, + model?: Model, plugins: GraphPluginConstructor[] = defaultPlugins, stylesheet: Stylesheet | null = null ) { super(); this.container = container; - this.model = model; + this.model = model ?? new Model(); this.plugins = plugins; this.cellRenderer = this.createCellRenderer(); this.setStylesheet(stylesheet != null ? stylesheet : this.createStylesheet()); @@ -570,21 +573,6 @@ class Graph extends autoImplement() { */ keepEdgesInBackground: boolean = false; - /** - * Specifies if a child should be constrained inside the parent bounds after a - * move or resize of the child. - * @default true - */ - constrainChildren: boolean = true; - - /** - * Specifies if child cells with relative geometries should be constrained - * inside the parent bounds, if {@link constrainChildren} is `true`, and/or the - * {@link maximumGraphBounds}. - * @default false - */ - constrainRelativeChildren: boolean = false; - /** * Specifies the return value for {@link isRecursiveResize}. * @default false (for backwards compatibility) @@ -669,12 +657,13 @@ class Graph extends autoImplement() { getContainsValidationErrorsResource = () => this.containsValidationErrorsResource; // TODO: Document me!! - batchUpdate(fn: Function): void { - (this.getModel()).beginUpdate(); + batchUpdate(fn: Function) { + console.log(this.getModel, this.getModel()); + this.getModel().beginUpdate(); try { fn(); } finally { - (this.getModel()).endUpdate(); + this.getModel().endUpdate(); } } @@ -775,7 +764,10 @@ class Graph extends autoImplement() { const newParent = change.child.getParent(); this.view.invalidate(change.child, true, true); - if (!this.getModel().contains(newParent) || newParent.isCollapsed()) { + if ( + newParent && + (!this.getModel().contains(newParent) || newParent.isCollapsed()) + ) { this.view.invalidate(change.child, true, true); this.removeStateForCell(change.child); @@ -1669,6 +1661,7 @@ class Graph extends autoImplement() { applyMixins(Graph, [ GraphCells, GraphConnections, + GraphDragDrop, GraphEdge, GraphEditing, GraphEvents, @@ -1676,11 +1669,20 @@ applyMixins(Graph, [ GraphImage, GraphLabel, GraphOverlays, + GraphPageBreaks, + GraphPanning, + GraphPorts, GraphSelection, GraphSnap, GraphSwimlane, + GraphTerminal, + GraphTooltip, GraphValidation, GraphVertex, + GraphZoom, ]); +copyPropertiesToPrototype(EventSource.prototype, new EventSource(), Graph.prototype); +copyMethodsToPrototype(EventSource.prototype, Graph.prototype); + export default Graph; diff --git a/packages/core/src/view/GraphHandler.ts b/packages/core/src/view/GraphHandler.ts index 9276df827..4d8cb027b 100644 --- a/packages/core/src/view/GraphHandler.ts +++ b/packages/core/src/view/GraphHandler.ts @@ -479,7 +479,7 @@ class GraphHandler implements GraphPlugin { * selection state to the parent. */ isPropagateSelectionCell(cell: Cell, immediate: boolean, me: InternalMouseEvent) { - const parent = cell.getParent(); + const parent = cell.getParent() as Cell; if (immediate) { const geo = cell.isEdge() ? null : cell.getGeometry(); @@ -512,7 +512,8 @@ class GraphHandler implements GraphPlugin { state && !this.graph.isCellSelected(state.cell) ) { - let next = this.graph.view.getState(state.cell.getParent()); + let parent = state.cell.getParent(); + let next = parent ? this.graph.view.getState(parent) : null; while ( next && @@ -521,7 +522,8 @@ class GraphHandler implements GraphPlugin { this.isPropagateSelectionCell(state.cell, true, me) ) { state = next; - next = this.graph.view.getState(state.cell.getParent()); + parent = state.cell.getParent(); + next = parent ? this.graph.view.getState(parent) : null; } } @@ -534,17 +536,19 @@ class GraphHandler implements GraphPlugin { * Hook to return true for delayed selections. */ isDelayedSelection(cell: Cell, me: InternalMouseEvent) { + let c: Cell | null = cell; + const selectionCellsHandler = this.graph.getPlugin( 'SelectionCellsHandler' ) as SelectionCellsHandler; if (!this.graph.isToggleEvent(me.getEvent()) || !isAltDown(me.getEvent())) { - while (cell) { - if (selectionCellsHandler.isHandled(cell)) { - return this.graph.cellEditor.getEditingCell() !== cell; + while (c) { + if (selectionCellsHandler.isHandled(c)) { + return this.graph.cellEditor.getEditingCell() !== c; } - cell = cell.getParent(); + c = c.getParent(); } } @@ -586,6 +590,7 @@ class GraphHandler implements GraphPlugin { let parent = cell.getParent(); while ( + parent && this.graph.view.getState(parent) && (parent.isVertex() || parent.isEdge()) && this.isPropagateSelectionCell(cell, false, me) @@ -848,7 +853,7 @@ class GraphHandler implements GraphPlugin { if (this.guidesEnabled) { this.guide = this.createGuide(); - const parent = cell.getParent(); + const parent = cell.getParent() as Cell; const ignore = parent.getChildCount() < 2; // Uses connected states as guides @@ -1709,6 +1714,7 @@ class GraphHandler implements GraphPlugin { if ( target == null && + parent && this.isRemoveCellsFromParent() && this.shouldRemoveCellsFromParent(parent, cells, evt) ) { diff --git a/packages/core/src/view/cell/GraphCells.ts b/packages/core/src/view/cell/GraphCells.ts index ad58addd8..de94f5c66 100644 --- a/packages/core/src/view/cell/GraphCells.ts +++ b/packages/core/src/view/cell/GraphCells.ts @@ -631,7 +631,8 @@ class GraphCells extends autoImplement() { if (g) { const state = this.getView().getState(cell); - const pstate = this.getView().getState(cell.getParent()); + const parent = cell.getParent(); + const pstate = parent ? this.getView().getState(parent) : null; if (state && pstate) { const dx = keepPosition ? 0 : (pstate.origin).x; @@ -785,7 +786,7 @@ class GraphCells extends autoImplement() { // Keeps the cell at its absolute location if (o1 && cell !== parent && parent !== previous) { - const oldState = this.getView().getState(previous); + const oldState = previous ? this.getView().getState(previous) : null; const o2 = oldState ? oldState.origin : zero; let geo = cell.getGeometry(); @@ -1538,7 +1539,7 @@ class GraphCells extends autoImplement() { */ extendParent(cell: Cell) { const parent = cell.getParent(); - let p = parent.getGeometry(); + let p = parent ? parent.getGeometry() : null; if (parent && p && !parent.isCollapsed()) { const geo = cell.getGeometry(); @@ -1706,6 +1707,7 @@ class GraphCells extends autoImplement() { if ( geo && geo.relative && + parent && parent.isEdge() && this.getModel().contains(parent) ) { @@ -1886,11 +1888,10 @@ class GraphCells extends autoImplement() { if (geo && (this.isConstrainRelativeChildren() || !geo.relative)) { const parent = cell.getParent(); - const pgeo = parent.getGeometry(); let max = this.getMaximumGraphBounds(); // Finds parent offset - if (max) { + if (max && parent) { const off = this.getBoundingBoxFromGeometry(new CellArray(parent), false); if (off) { @@ -2809,7 +2810,7 @@ class GraphCells extends autoImplement() { } else { const parent = cell.getParent(); - if (geo.relative) { + if (geo.relative && parent) { if (parent.isVertex() && parent !== this.getView().currentRoot) { tmp = this.getBoundingBoxFromGeometry(new CellArray(parent), false); @@ -2830,7 +2831,7 @@ class GraphCells extends autoImplement() { } else { bbox = Rectangle.fromRectangle(geo); - if (parent.isVertex() && cells.indexOf(parent) >= 0) { + if (parent && parent.isVertex() && cells.indexOf(parent) >= 0) { tmp = this.getBoundingBoxFromGeometry(new CellArray(parent), false); if (tmp) { diff --git a/packages/core/src/view/cell/datatypes/Cell.ts b/packages/core/src/view/cell/datatypes/Cell.ts index 3e309a666..4e3f52035 100644 --- a/packages/core/src/view/cell/datatypes/Cell.ts +++ b/packages/core/src/view/cell/datatypes/Cell.ts @@ -343,8 +343,8 @@ class Cell { /** * Returns the cell's parent. */ - getParent(): Cell { - return this.parent; + getParent() { + return this.parent; } /** @@ -901,9 +901,9 @@ class Cell { /** * Returns the root of the model or the topmost parent of the given cell. */ - getRoot(): Cell { + getRoot() { let root: Cell = this; - let cell: Cell = this; + let cell: Cell | null = this; while (cell) { root = cell; diff --git a/packages/core/src/view/cell/datatypes/CellState.ts b/packages/core/src/view/cell/datatypes/CellState.ts index 5d1c266e7..f561bf986 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 'core/types'; +import { CellStateStyles } from '../../../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 36d5b6892..6c3996b9b 100644 --- a/packages/core/src/view/cell/edge/EdgeHandler.ts +++ b/packages/core/src/view/cell/edge/EdgeHandler.ts @@ -56,10 +56,10 @@ import { isMouseEvent, isShiftDown, } from '../../../util/EventUtils'; -import Graph, { MaxGraph } from '../../Graph'; +import { MaxGraph } from '../../Graph'; import CellState from '../datatypes/CellState'; import Shape from '../../geometry/shape/Shape'; -import { CellHandle, ColorValue, Listenable } from 'core/types'; +import { CellHandle, ColorValue, Listenable } from '../../../types'; import InternalMouseEvent from '../../event/InternalMouseEvent'; import Cell from '../datatypes/Cell'; import ImageBox from '../../image/ImageBox'; @@ -400,7 +400,8 @@ class EdgeHandler { * always returns true. */ isParentHighlightVisible() { - return !this.graph.isCellSelected(this.state.cell.getParent()); + const parent = this.state.cell.getParent(); + return parent ? !this.graph.isCellSelected(parent) : null; } /** @@ -412,10 +413,10 @@ class EdgeHandler { if (!this.isDestroyed()) { const visible = this.isParentHighlightVisible(); const parent = this.state.cell.getParent(); - const pstate = this.graph.view.getState(parent); + const pstate = parent ? this.graph.view.getState(parent) : null; if (this.parentHighlight) { - if (parent.isVertex() && visible) { + if (parent && parent.isVertex() && visible) { const b = this.parentHighlight.bounds; if ( @@ -438,7 +439,7 @@ class EdgeHandler { this.parentHighlight = null; } } else if (this.parentHighlightEnabled && visible) { - if (parent.isVertex() && pstate && !pstate.parentHighlight) { + if (parent && parent.isVertex() && pstate && !pstate.parentHighlight) { this.parentHighlight = this.createParentHighlightShape(pstate); // VML dialect required here for event transparency in IE this.parentHighlight.dialect = DIALECT_SVG; @@ -624,7 +625,7 @@ class EdgeHandler { if (cell && !cell.isConnectable()) { const parent = cell.getParent(); - if (parent.isVertex() && parent.isConnectable()) { + if (parent && parent.isVertex() && parent.isConnectable()) { cell = parent; } } @@ -1060,7 +1061,7 @@ class EdgeHandler { * * Returns a clone of the current preview state for the given point and terminal. */ - clonePreviewState(point: Point, terminal: Cell) { + clonePreviewState(point: Point, terminal: Cell | null) { return this.state.clone(); } @@ -1402,7 +1403,7 @@ class EdgeHandler { updatePreviewState( edgeState: CellState, point: Point, - terminalState: CellState, + terminalState: CellState | null, me: InternalMouseEvent, outline = false ) { @@ -1473,9 +1474,9 @@ class EdgeHandler { } if (this.isSource) { - sourceConstraint = constraint; + sourceConstraint = constraint!; } else if (this.isTarget) { - targetConstraint = constraint; + targetConstraint = constraint!; } if (this.isSource || this.isTarget) { @@ -1713,7 +1714,7 @@ class EdgeHandler { if (clone) { let geo = edge.getGeometry(); const cloned = this.graph.cloneCell(edge); - model.add(parent, cloned, parent.getChildCount()); + model.add(parent, cloned, parent!.getChildCount()); if (geo != null) { geo = geo.clone(); @@ -1741,7 +1742,8 @@ class EdgeHandler { pt.y / this.graph.view.scale - this.graph.view.translate.y ); - const pstate = this.graph.getView().getState(edge.getParent()); + const parent = edge.getParent(); + const pstate = parent ? this.graph.getView().getState(parent) : null; if (pstate != null) { pt.x -= pstate.origin.x; @@ -1846,7 +1848,8 @@ class EdgeHandler { point.x = Math.round(point.x / scale - tr.x); point.y = Math.round(point.y / scale - tr.y); - const pstate = this.graph.getView().getState(this.state.cell.getParent()); + const parent = this.state.cell.getParent(); + const pstate = parent ? this.graph.getView().getState(parent) : parent; if (pstate) { point.x -= pstate.origin.x; @@ -1967,7 +1970,7 @@ class EdgeHandler { const parent = edge.getParent(); const terminal = edge.getTerminal(!isSource); edge = this.graph.cloneCell(edge); - model.add(parent, edge, parent.getChildCount()); + model.add(parent, edge, parent!.getChildCount()); model.setTerminal(edge, terminal, !isSource); } @@ -2000,7 +2003,7 @@ class EdgeHandler { const source = edge.getTerminal(true); const target = edge.getTerminal(false); edge = this.graph.cloneCell(edge); - model.add(parent, edge, parent.getChildCount()); + model.add(parent, edge, parent!.getChildCount()); model.setTerminal(edge, source, true); model.setTerminal(edge, target, false); } @@ -2050,7 +2053,7 @@ class EdgeHandler { const parent = this.state.cell.getParent(); - if (parent.isVertex()) { + if (parent && parent.isVertex()) { const pState = this.graph.view.getState(parent); if (pState) offset = new Point(pState.x, pState.y); @@ -2478,7 +2481,7 @@ class EdgeHandler { if (this.parentHighlight) { const parent = this.state.cell.getParent(); - const pstate = this.graph.view.getState(parent); + const pstate = parent ? this.graph.view.getState(parent) : null; if (pstate && pstate.parentHighlight === this.parentHighlight) { pstate.parentHighlight = null; diff --git a/packages/core/src/view/cell/edge/GraphEdge.ts b/packages/core/src/view/cell/edge/GraphEdge.ts index 45f4c773f..1dd7d85b0 100644 --- a/packages/core/src/view/cell/edge/GraphEdge.ts +++ b/packages/core/src/view/cell/edge/GraphEdge.ts @@ -71,13 +71,6 @@ class GraphEdge extends autoImplement() { */ cloneInvalidEdges = false; - /** - * Specifies if edges should be disconnected from their terminals when they - * are moved. - * @default true - */ - disconnectOnMove = true; - /** * Specifies the alternate edge style to be used if the main control point * on an edge is being double clicked. diff --git a/packages/core/src/view/cell/vertex/GraphVertex.ts b/packages/core/src/view/cell/vertex/GraphVertex.ts index 99837a07f..2e4d3fff3 100644 --- a/packages/core/src/view/cell/vertex/GraphVertex.ts +++ b/packages/core/src/view/cell/vertex/GraphVertex.ts @@ -1,6 +1,6 @@ import Cell from '../datatypes/Cell'; import Geometry from '../../geometry/Geometry'; -import { autoImplement } from 'core/util/Utils'; +import { autoImplement } from '../../../util/Utils'; import type GraphCells from '../GraphCells'; @@ -122,6 +122,7 @@ class GraphVertex extends autoImplement() { relative, geometryClass ); + return this.addCell(vertex, parent); }; diff --git a/packages/core/src/view/cell/vertex/VertexHandle.ts b/packages/core/src/view/cell/vertex/VertexHandle.ts index 693af9546..3499caba0 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 'core/types'; +import type { CellHandle, CellStateStyles } from '../../../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 40feaf16f..1dac3fe1e 100644 --- a/packages/core/src/view/cell/vertex/VertexHandler.ts +++ b/packages/core/src/view/cell/vertex/VertexHandler.ts @@ -26,20 +26,18 @@ import RectangleShape from '../../geometry/shape/node/RectangleShape'; import ImageShape from '../../geometry/shape/node/ImageShape'; import EllipseShape from '../../geometry/shape/node/EllipseShape'; import Point from '../../geometry/Point'; -import utils, { getRotatedPoint, intersects, mod, toRadians } from '../../../util/Utils'; +import { getRotatedPoint, intersects, mod, toRadians } from '../../../util/Utils'; import mxClient from '../../../mxClient'; import { isMouseEvent, isShiftDown } from '../../../util/EventUtils'; -import Graph, { MaxGraph } from '../../Graph'; +import { MaxGraph } from '../../Graph'; import CellState from '../datatypes/CellState'; import Image from '../../image/ImageBox'; import Cell from '../datatypes/Cell'; -import { CellHandle, Listenable } from 'core/types'; +import { CellHandle, Listenable } from '../../../types'; import Shape from '../../geometry/shape/Shape'; import InternalMouseEvent from '../../event/InternalMouseEvent'; -import VertexHandle from './VertexHandle'; import CellArray from '../datatypes/CellArray'; import EdgeHandler from '../edge/EdgeHandler'; -import CellHighlight from '../../selection/CellHighlight'; import EventSource from '../../event/EventSource'; import GraphHandler from '../../GraphHandler'; import SelectionCellsHandler from '../../selection/SelectionCellsHandler'; @@ -741,6 +739,7 @@ class VertexHandler { if ( this.state.view.currentRoot !== parent && + parent && (parent.isVertex() || parent.isEdge()) ) { this.parentState = this.state.view.graph.view.getState(parent); @@ -2048,7 +2047,8 @@ class VertexHandler { * always returns true. */ isParentHighlightVisible() { - return !this.graph.isCellSelected(this.state.cell.getParent()); + const parent = this.state.cell.getParent(); + return parent ? !this.graph.isCellSelected(parent) : false; } /** @@ -2060,10 +2060,10 @@ class VertexHandler { if (!this.isDestroyed()) { const visible = this.isParentHighlightVisible(); const parent = this.state.cell.getParent(); - const pstate = this.graph.view.getState(parent); + const pstate = parent ? this.graph.view.getState(parent) : null; if (this.parentHighlight) { - if (parent.isVertex() && visible) { + if (parent && parent.isVertex() && visible) { const b = this.parentHighlight.bounds; if ( @@ -2086,7 +2086,12 @@ class VertexHandler { this.parentHighlight = null; } } else if (this.parentHighlightEnabled && visible) { - if (parent.isVertex() && pstate != null && pstate.parentHighlight == null) { + if ( + parent && + parent.isVertex() && + pstate != null && + pstate.parentHighlight == null + ) { this.parentHighlight = this.createParentHighlightShape(pstate); // VML dialect required here for event transparency in IE this.parentHighlight.dialect = DIALECT_SVG; @@ -2161,7 +2166,7 @@ class VertexHandler { if (this.parentHighlight) { const parent = this.state.cell.getParent(); - const pstate = this.graph.view.getState(parent); + const pstate = parent ? this.graph.view.getState(parent) : null; if (pstate && pstate.parentHighlight === this.parentHighlight) { pstate.parentHighlight = null; diff --git a/packages/core/src/view/connection/ConnectionHandler.ts b/packages/core/src/view/connection/ConnectionHandler.ts index 80e60f896..624059e10 100644 --- a/packages/core/src/view/connection/ConnectionHandler.ts +++ b/packages/core/src/view/connection/ConnectionHandler.ts @@ -612,7 +612,7 @@ class ConnectionHandler extends EventSource implements GraphPlugin { if (cell && !cell.isConnectable() && self.cell) { const parent = self.cell.getParent(); - if (parent.isVertex() && parent.isConnectable()) { + if (parent && parent.isVertex() && parent.isConnectable()) { cell = parent; } } @@ -1938,13 +1938,13 @@ class ConnectionHandler extends EventSource implements GraphPlugin { } } - let parent = this.graph.getDefaultParent(); + let parent: Cell | null = this.graph.getDefaultParent(); if ( source && target && source.getParent() === target.getParent() && - source.getParent().getParent() !== model.getRoot() + source.getParent()?.getParent() !== model.getRoot() ) { parent = source.getParent(); @@ -1954,7 +1954,7 @@ class ConnectionHandler extends EventSource implements GraphPlugin { target.geometry && target.geometry.relative ) { - parent = parent.getParent(); + parent = parent!.getParent(); } } @@ -1968,7 +1968,7 @@ class ConnectionHandler extends EventSource implements GraphPlugin { style = this.edgeState.cell.style ?? ''; } - edge = this.insertEdge(parent, '', value, source, target, style); + edge = this.insertEdge(parent as Cell, '', value, source, target, style); if (edge && source) { // Updates the connection constraints @@ -1990,9 +1990,10 @@ class ConnectionHandler extends EventSource implements GraphPlugin { // Inserts edge before source if (this.isInsertBefore(edge, source, target, evt, dropTarget)) { const index = null; - let tmp = source; + let tmp: Cell | null = source; while ( + tmp && tmp.parent != null && tmp.geometry != null && tmp.geometry.relative && @@ -2123,7 +2124,7 @@ class ConnectionHandler extends EventSource implements GraphPlugin { let geo = source.getGeometry(); while (geo && geo.relative) { - source = source.getParent(); + source = source.getParent() as Cell; geo = source.getGeometry(); } diff --git a/packages/core/src/view/connection/ConstraintHandler.ts b/packages/core/src/view/connection/ConstraintHandler.ts index d240e7deb..4b046f5ef 100644 --- a/packages/core/src/view/connection/ConstraintHandler.ts +++ b/packages/core/src/view/connection/ConstraintHandler.ts @@ -233,7 +233,7 @@ class ConstraintHandler { if (cell != null && !cell.isConnectable()) { const parent = cell.getParent(); - if (parent.isVertex() && parent.isConnectable()) { + if (parent && parent.isVertex() && parent.isConnectable()) { cell = parent; } } diff --git a/packages/core/src/view/connection/GraphConnections.ts b/packages/core/src/view/connection/GraphConnections.ts index 4f8760d39..608a0aa58 100644 --- a/packages/core/src/view/connection/GraphConnections.ts +++ b/packages/core/src/view/connection/GraphConnections.ts @@ -51,11 +51,27 @@ class GraphConnections extends autoImplement() { this.connectionHandler = connectionHandler; } - constrainChildren = false; + /** + * Specifies if a child should be constrained inside the parent bounds after a + * move or resize of the child. + * @default true + */ + constrainChildren = true; + /** + * Specifies if child cells with relative geometries should be constrained + * inside the parent bounds, if {@link constrainChildren} is `true`, and/or the + * {@link maximumGraphBounds}. + * @default false + */ constrainRelativeChildren = false; - disconnectOnMove = false; + /** + * Specifies if edges should be disconnected from their terminals when they + * are moved. + * @default true + */ + disconnectOnMove = true; cellsDisconnectable = true; @@ -493,7 +509,8 @@ class GraphConnections extends autoImplement() { if (geo) { const state = this.getView().getState(cell); - const pstate = this.getView().getState(cell.getParent()); + const parent = cell.getParent(); + const pstate = parent ? this.getView().getState(parent) : null; if (state && pstate) { geo = geo.clone(); diff --git a/packages/core/src/view/event/EventSource.ts b/packages/core/src/view/event/EventSource.ts index 622e2aff1..be183cce7 100644 --- a/packages/core/src/view/event/EventSource.ts +++ b/packages/core/src/view/event/EventSource.ts @@ -34,9 +34,8 @@ type EventListenerObject = { * * Constructs a new event source. */ -class EventSource extends EventTarget { - constructor(eventSource: EventSource | null = null) { - super(); +class EventSource { + constructor(eventSource: EventTarget | null = null) { this.eventSource = eventSource; } @@ -61,7 +60,7 @@ class EventSource extends EventTarget { * * Optional source for events. Default is null. */ - eventSource: EventSource | EventTarget | null; + eventSource: EventTarget | null = null; /** * Function: isEventsEnabled @@ -95,7 +94,7 @@ class EventSource extends EventTarget { * * Sets . */ - setEventSource(value: EventSource | EventTarget | null) { + setEventSource(value: EventTarget | null) { this.eventSource = value; } @@ -147,7 +146,7 @@ class EventSource extends EventTarget { * sender - Optional sender to be passed to the listener. Default value is * the return value of . */ - fireEvent(evt: EventObject, sender: EventSource | EventTarget | null = null) { + fireEvent(evt: EventObject, sender: EventTarget | null = null) { if (this.isEventsEnabled()) { if (!evt) { evt = new EventObject(''); @@ -157,7 +156,7 @@ class EventSource extends EventTarget { sender = this.getEventSource(); } if (!sender) { - sender = this; + sender = (this); } for (const eventListener of this.eventListeners) { diff --git a/packages/core/src/view/event/InternalEvent.ts b/packages/core/src/view/event/InternalEvent.ts index 11ca071f8..4877cd445 100644 --- a/packages/core/src/view/event/InternalEvent.ts +++ b/packages/core/src/view/event/InternalEvent.ts @@ -123,7 +123,7 @@ class InternalEvent { * will be registered as well as the mouse events. */ static addGestureListeners( - node: EventSource | EventTarget, + node: Listenable, startListener: MouseEventListener | null = null, moveListener: MouseEventListener | null = null, endListener: MouseEventListener | null = null diff --git a/packages/core/src/view/geometry/shape/Actor.ts b/packages/core/src/view/geometry/shape/Actor.ts index a5b547b55..3a5934b8e 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 'core/types'; -import { NONE } from 'core/util/Constants'; +import { ColorValue } from '../../../types'; +import { NONE } from '../../../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 aa4e20263..6cfe7d6e1 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 'core/util/canvas/AbstractCanvas2D'; +import AbstractCanvas2D from '../../../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 e9c6120ba..7a95ab82b 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 'core/types'; +import { ColorValue } from '../../../../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 1145b9f27..aad9d5b19 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 'core/types'; +import { ColorValue } from '../../../../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 7f4885ec3..244640f54 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 'core/types'; +import { ColorValue } from '../../../../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 77ee72fe4..9112dd0b0 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 'core/types'; +import { ColorValue } from '../../../../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 dd207c902..9a3810756 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 'core/types'; -import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D'; +import { ArrowType } from '../../../../types'; +import AbstractCanvas2D from '../../../../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 e91a47788..a415e1258 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 'core/types'; +import { ColorValue } from '../../../../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 56168bd3a..16facf53b 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 'core/util/Constants'; +import { NONE } from '../../../../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 723f50c16..1a880cce4 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 'core/util/Constants'; +import { NONE } from '../../../../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 2e9e29d80..98d0f97b4 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 'core/types'; -import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D'; +import { ColorValue } from '../../../../types'; +import AbstractCanvas2D from '../../../../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 56caa159b..e9397154e 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 'core/types'; +import { ColorValue } from '../../../../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 6d476fd1e..6b198882d 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 'core/types'; +import { AlignValue, ColorValue, VAlignValue } from '../../../../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 0cb079884..afc181af2 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 'core/types'; -import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D'; +import { ColorValue } from '../../../../types'; +import AbstractCanvas2D from '../../../../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 19d3edba3..a47faa09f 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 'core/types'; -import SvgCanvas2D from 'core/util/canvas/SvgCanvas2D'; +} from '../../../../types'; +import SvgCanvas2D from '../../../../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 506a076e8..8216a4755 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 'core/util/canvas/AbstractCanvas2D'; +import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D'; /** * Implementation of the triangle shape. diff --git a/packages/core/src/view/layout/LayoutManager.ts b/packages/core/src/view/layout/LayoutManager.ts index de253d9e0..fb98a22f5 100644 --- a/packages/core/src/view/layout/LayoutManager.ts +++ b/packages/core/src/view/layout/LayoutManager.ts @@ -18,9 +18,9 @@ import EventObject from '../event/EventObject'; import Cell from '../cell/datatypes/Cell'; import graph from '../Graph'; import Rectangle from '../geometry/Rectangle'; -import InternalMouseEvent from "../event/InternalMouseEvent"; +import InternalMouseEvent from '../event/InternalMouseEvent'; import { getClientX, getClientY } from '../../util/EventUtils'; -import CellArray from "../cell/datatypes/CellArray"; +import CellArray from '../cell/datatypes/CellArray'; import Graph from '../Graph'; /** @@ -70,9 +70,9 @@ class LayoutManager extends EventSource { this.resizeHandler = (sender: any, evt: EventObject) => { if (this.isEnabled()) { this.cellsResized( - evt.getProperty('cells'), - evt.getProperty('bounds'), - evt.getProperty('previous') + evt.getProperty('cells'), + evt.getProperty('bounds'), + evt.getProperty('previous') ); } }; @@ -219,9 +219,7 @@ class LayoutManager extends EventSource { * @param cell Array of {@link Cell} that have been moved. * @param evt Mouse event that represents the mousedown. */ - cellsMoved(cells: CellArray, - evt: InternalMouseEvent): void { - + cellsMoved(cells: CellArray, evt: InternalMouseEvent): void { if (cells != null && evt != null) { const point = convertPoint( (this.getGraph()).container, @@ -231,10 +229,7 @@ class LayoutManager extends EventSource { const model = (this.getGraph()).getModel(); for (let i = 0; i < cells.length; i += 1) { - const layout = this.getLayout( - cells[i].getParent(), - InternalEvent.MOVE_CELLS - ); + const layout = this.getLayout(cells[i].getParent(), InternalEvent.MOVE_CELLS); if (layout != null) { layout.moveCell(cells[i], point.x, point.y); @@ -258,10 +253,7 @@ class LayoutManager extends EventSource { const model = (this.getGraph()).getModel(); for (let i = 0; i < cells.length; i += 1) { - const layout = this.getLayout( - cells[i].getParent(), - InternalEvent.RESIZE_CELLS - ); + const layout = this.getLayout(cells[i].getParent(), InternalEvent.RESIZE_CELLS); if (layout != null) { layout.resizeCell(cells[i], bounds[i], prev?.[i]); } @@ -296,10 +288,7 @@ class LayoutManager extends EventSource { ); } - if ( - change instanceof TerminalChange || - change instanceof GeometryChange - ) { + if (change instanceof TerminalChange || change instanceof GeometryChange) { return this.addCellsWithLayout(change.cell); } @@ -313,12 +302,8 @@ class LayoutManager extends EventSource { /** * Adds all ancestors of the given cell that have a layout. */ - addCellsWithLayout(cell: Cell, - result: CellArray = new CellArray()): CellArray { - return this.addDescendantsWithLayout( - cell, - this.addAncestorsWithLayout(cell, result) - ); + addCellsWithLayout(cell: Cell, result: CellArray = new CellArray()): CellArray { + return this.addDescendantsWithLayout(cell, this.addAncestorsWithLayout(cell, result)); } /** @@ -343,8 +328,7 @@ class LayoutManager extends EventSource { /** * Adds all descendants of the given cell that have a layout. */ - addDescendantsWithLayout(cell: Cell, - result: CellArray = new CellArray()): CellArray { + addDescendantsWithLayout(cell: Cell, result: CellArray = new CellArray()): CellArray { if (cell != null && this.hasLayout(cell)) { const model = (this.getGraph()).getModel(); @@ -372,9 +356,7 @@ class LayoutManager extends EventSource { /** * Executes all layouts which have been scheduled during the changes. */ - layoutCells(cells: CellArray, - bubble: boolean = false): void { - + layoutCells(cells: CellArray, bubble: boolean = false): void { if (cells.length > 0) { // Invokes the layouts while removing duplicates const model = (this.getGraph()).getModel(); @@ -400,8 +382,7 @@ class LayoutManager extends EventSource { /** * Executes the given layout on the given parent. */ - executeLayout(cell: Cell, - bubble: boolean=false): void { + executeLayout(cell: Cell, bubble: boolean = false): void { const layout = this.getLayout( cell, bubble ? InternalEvent.BEGIN_UPDATE : InternalEvent.END_UPDATE diff --git a/packages/core/src/view/layout/SwimlaneManager.ts b/packages/core/src/view/layout/SwimlaneManager.ts index ccce2cfcc..67a9a12ff 100644 --- a/packages/core/src/view/layout/SwimlaneManager.ts +++ b/packages/core/src/view/layout/SwimlaneManager.ts @@ -13,7 +13,7 @@ import graph from '../Graph'; import EventObject from '../event/EventObject'; import Cell from '../cell/datatypes/Cell'; import Geometry from '../geometry/Geometry'; -import CellArray from "../cell/datatypes/CellArray"; +import CellArray from '../cell/datatypes/CellArray'; /** * @class SwimlaneManager @@ -282,15 +282,8 @@ class SwimlaneManager extends EventSource { } const parentHorizontal = - current != null - ? this.isCellHorizontal(current) - : this.horizontal; - this.resizeSwimlane( - top, - size.width, - size.height, - parentHorizontal - ); + current != null ? this.isCellHorizontal(current) : this.horizontal; + this.resizeSwimlane(top, size.width, size.height, parentHorizontal); } } } @@ -307,12 +300,7 @@ class SwimlaneManager extends EventSource { * * @param swimlane {@link mxCell} whose size has changed. */ - resizeSwimlane( - swimlane: Cell, - w: number, - h: number, - parentHorizontal: boolean - ): void { + resizeSwimlane(swimlane: Cell, w: number, h: number, parentHorizontal: boolean): void { const model = (this.graph).getModel(); model.beginUpdate(); 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 475a6f70d..43d0d9ef7 100644 --- a/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts +++ b/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts @@ -4,7 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 * Type definitions from the typed-mxgraph project */ -import CellArray from 'core/view/cell/datatypes/CellArray'; +import CellArray from '../../../../../view/cell/datatypes/CellArray'; import Cell from '../../../../cell/datatypes/Cell'; class GraphAbstractHierarchyCell extends Cell { diff --git a/packages/core/src/view/model/Model.ts b/packages/core/src/view/model/Model.ts index bf247cd79..3fd9d3a7c 100644 --- a/packages/core/src/view/model/Model.ts +++ b/packages/core/src/view/model/Model.ts @@ -8,10 +8,9 @@ import EventSource from '../event/EventSource'; import UndoableEdit from './UndoableEdit'; import CellPath from '../cell/datatypes/CellPath'; import Cell from '../cell/datatypes/Cell'; -import utils, { isNumeric } from '../../util/Utils'; +import { isNumeric } from '../../util/Utils'; import EventObject from '../event/EventObject'; import InternalEvent from '../event/InternalEvent'; -import Point from '../geometry/Point'; import ChildChange from './ChildChange'; import CollapseChange from '../folding/CollapseChange'; import GeometryChange from '../geometry/GeometryChange'; @@ -23,7 +22,7 @@ import VisibleChange from '../style/VisibleChange'; import Geometry from '../geometry/Geometry'; import CellArray from '../cell/datatypes/CellArray'; -import type { CellMap, FilterFunction, UndoableChange } from '../../types'; +import type { FilterFunction } from '../../types'; /** * Extends {@link EventSource} to implement a graph model. The graph model acts as @@ -209,6 +208,7 @@ import type { CellMap, FilterFunction, UndoableChange } from '../../types'; class Model extends EventSource { constructor(root: Cell | null = null) { super(); + this.currentEdit = this.createUndoableEdit(); if (root != null) { @@ -1159,8 +1159,5 @@ class Model extends EventSource { } } -// -// Atomic changes -// export default Model; // import('../../serialization/mxModelCodec'); diff --git a/packages/core/src/view/selection/GraphSelection.ts b/packages/core/src/view/selection/GraphSelection.ts index 0e41a1d34..b4672d601 100644 --- a/packages/core/src/view/selection/GraphSelection.ts +++ b/packages/core/src/view/selection/GraphSelection.ts @@ -157,8 +157,8 @@ class GraphSelection extends autoImplement() { * * @param cell {@link mxCell} to add to the selection. */ - addCell(cell: Cell) { - this.addCells(new CellArray(cell)); + addCellToSelection(cell: Cell) { + this.addCellsToSelection(new CellArray(cell)); } /** @@ -167,7 +167,7 @@ class GraphSelection extends autoImplement() { * * @param cells Array of {@link Cell} to add to the selection. */ - addCells(cells: CellArray) { + addCellsToSelection(cells: CellArray) { let remove = null; if (this.singleSelection) { remove = this.cells; @@ -193,8 +193,8 @@ class GraphSelection extends autoImplement() { * * @param cell {@link mxCell} to remove from the selection. */ - removeCell(cell: Cell) { - this.removeCells(new CellArray(cell)); + removeCellFromSelection(cell: Cell) { + this.removeCellsFromSelection(new CellArray(cell)); } /** @@ -203,7 +203,7 @@ class GraphSelection extends autoImplement() { * * @param cells {@link mxCell}s to remove from the selection. */ - removeCells(cells: CellArray) { + removeCellsFromSelection(cells: CellArray) { const tmp = new CellArray(); for (let i = 0; i < cells.length; i += 1) { @@ -337,7 +337,7 @@ class GraphSelection extends autoImplement() { * @param cell {@link mxCell} to be add to the selection. */ addSelectionCell(cell: Cell) { - this.addCell(cell); + this.addCellToSelection(cell); } /** @@ -346,7 +346,7 @@ class GraphSelection extends autoImplement() { * @param cells Array of {@link Cell} to be added to the selection. */ addSelectionCells(cells: CellArray) { - this.addCells(cells); + this.addCellsToSelection(cells); } /** @@ -355,7 +355,7 @@ class GraphSelection extends autoImplement() { * @param cell {@link mxCell} to be removed from the selection. */ removeSelectionCell(cell: Cell) { - this.removeCell(cell); + this.removeCellFromSelection(cell); } /** @@ -364,7 +364,7 @@ class GraphSelection extends autoImplement() { * @param cells Array of {@link Cell} to be removed from the selection. */ removeSelectionCells(cells: CellArray) { - this.removeCells(cells); + this.removeCellsFromSelection(cells); } /** @@ -424,7 +424,7 @@ class GraphSelection extends autoImplement() { this.clear(); } - const parent = cell ? cell.getParent() : this.getDefaultParent(); + const parent = cell ? (cell.getParent() as Cell) : this.getDefaultParent(); const childCount = parent.getChildCount(); if (!cell && childCount > 0) { @@ -516,13 +516,15 @@ class GraphSelection extends autoImplement() { selectGroups = false ) { const filter = (cell: Cell) => { + const p = cell.getParent(); + return ( !!this.getView().getState(cell) && (((selectGroups || cell.getChildCount() === 0) && cell.isVertex() && vertices && - cell.getParent() && - !cell.getParent().isEdge()) || + p && + !p.isEdge()) || (cell.isEdge() && edges)) ); }; @@ -573,7 +575,7 @@ class GraphSelection extends autoImplement() { * Returns true if any sibling of the given cell is selected. */ isSiblingSelected(cell: Cell) { - const parent = cell.getParent(); + const parent = cell.getParent() as Cell; const childCount = parent.getChildCount(); for (let i = 0; i < childCount; i += 1) { diff --git a/packages/core/src/view/snap/GraphSnap.ts b/packages/core/src/view/snap/GraphSnap.ts index 9b327886f..f09e69dac 100644 --- a/packages/core/src/view/snap/GraphSnap.ts +++ b/packages/core/src/view/snap/GraphSnap.ts @@ -9,9 +9,9 @@ type PartialClass = PartialGraph; class GraphSnap extends autoImplement() { // TODO: Document me! - tolerance: number = 0; + snapTolerance: number = 0; - getSnapTolerance = () => this.tolerance; + getSnapTolerance = () => this.snapTolerance; /** * Specifies the grid size. @@ -142,14 +142,14 @@ class GraphSnap extends autoImplement() { * Returns {@link tolerance}. */ getTolerance() { - return this.tolerance; + return this.snapTolerance; } /** * Sets {@link tolerance}. */ setTolerance(value: number) { - this.tolerance = value; + this.snapTolerance = value; } } diff --git a/packages/core/src/view/view/GraphView.ts b/packages/core/src/view/view/GraphView.ts index 7d8809382..b44a41786 100644 --- a/packages/core/src/view/view/GraphView.ts +++ b/packages/core/src/view/view/GraphView.ts @@ -883,7 +883,8 @@ class GraphView extends EventSource { state.length = 0; if (state.cell !== this.currentRoot) { - const pState = this.getState(state.cell.getParent()); + const parent = state.cell.getParent(); + const pState = parent ? this.getState(parent) : null; if (pState && pState.cell !== this.currentRoot) { origin.x += pState.origin.x; @@ -947,7 +948,8 @@ class GraphView extends EventSource { * Validates the given cell state. */ updateVertexState(state: CellState, geo: Geometry) { - const pState = this.getState(state.cell.getParent()); + const parent = state.cell.getParent(); + const pState = parent ? this.getState(parent) : null; if (geo.relative && pState && !pState.cell.isEdge()) { const alpha = toRadians(pState.style.rotation); diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js index 60c62bb79..f458581b3 100644 --- a/packages/core/webpack.config.js +++ b/packages/core/webpack.config.js @@ -6,15 +6,10 @@ const CircularDependencyPlugin = require('circular-dependency-plugin'); module.exports = merge(base, { entry: './src/index.ts', - resolve: { - alias: { - '@': path.resolve(__dirname, 'src'), - }, - }, output: { - filename: 'mxgraph.js', + filename: 'maxgraph.js', path: path.resolve(__dirname, 'dist'), - library: 'mxgraph', + library: 'maxgraph', libraryTarget: 'umd', }, module: { diff --git a/packages/html/stories/FileIO.stories.js b/packages/html/stories/FileIO.stories.js index c232defc6..c1c901556 100644 --- a/packages/html/stories/FileIO.stories.js +++ b/packages/html/stories/FileIO.stories.js @@ -1,7 +1,6 @@ import maxgraph from '@maxgraph/core'; import { globalTypes } from '../.storybook/preview'; -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'; @@ -35,7 +34,7 @@ const Template = ({ label, ...args }) => { if (!mxClient.isBrowserSupported()) { // Displays an error message if the browser is // not supported. - error('Browser is not supported!', 200, false); + alert('Browser is not supported!', 200, false); } else { // Creates the graph inside the given container const graph = new Graph(container); diff --git a/packages/html/stories/HelloWorld.stories.js b/packages/html/stories/HelloWorld.stories.js index bc44ef70a..a9c98d0e9 100644 --- a/packages/html/stories/HelloWorld.stories.js +++ b/packages/html/stories/HelloWorld.stories.js @@ -1,4 +1,5 @@ -import maxgraph from '@maxgraph/core'; +import Graph from '@maxgraph/core/view/Graph'; +import InternalEvent from '@maxgraph/core/view/event/InternalEvent'; import { globalTypes } from '../.storybook/preview'; @@ -18,8 +19,6 @@ export default { }; const Template = ({ label, ...args }) => { - const { Graph, InternalEvent, Rubberband } = maxgraph; - console.log(maxgraph, Graph); const container = document.createElement('div'); container.style.position = 'relative'; container.style.overflow = 'hidden'; @@ -29,10 +28,10 @@ const Template = ({ label, ...args }) => { container.style.cursor = 'default'; if (!args.contextMenu) InternalEvent.disableContextMenu(container); - + console.log(Graph, Graph.prototype); const graph = new Graph(container); - if (args.rubberBand) new Rubberband(graph); + // if (args.rubberBand) new Rubberband(graph); const parent = graph.getDefaultParent(); diff --git a/tsconfig.json b/tsconfig.json index 374f8c4d4..891387f73 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,18 +6,15 @@ "esModuleInterop": true, "isolatedModules": true, "jsx": "preserve", - "module": "es2020", - "lib": ["es2020", "dom"], + "module": "umd", + "lib": ["dom"], "moduleResolution": "node", "noEmit": true, "strict": true, - "target": "es2020", + "target": "es5", "resolveJsonModule": true, // Required for JSON files "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "paths": { - "core/*": ["./packages/core/src/*"] - } + "forceConsistentCasingInFileNames": true }, "exclude": [ "node_modules", diff --git a/webpack.config.js b/webpack.config.js index ff5928128..968774ce1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,3 @@ -const path = require('path'); - module.exports = { devtool: 'eval-source-map', module: { @@ -17,9 +15,6 @@ module.exports = { ], }, resolve: { - alias: { - core: path.resolve(__dirname, 'packages/core/src'), - }, extensions: ['.ts', '.js', '.css'], }, };