zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Converting to TS.

development
Junsik Shim 2021-05-08 20:02:13 +09:00
parent 846f20335c
commit 92e4970cca
38 changed files with 3903 additions and 4003 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/core/src/atomic_changes/mxCellAttributeChange.js → packages/core/src/atomic_changes/mxCellAttributeChange.ts
View File

@ -1,3 +1,8 @@
import { isNullish } from '../util/mxUtils';
import mxCell from '../view/cell/mxCell';
import type { UndoableChange } from '../types';
/**
* Class: mxCellAttributeChange
*
@ -30,8 +35,13 @@
* Constructs a change of a attribute of the DOM node
* stored as the value of the given {@link mxCell}`.
*/
class mxCellAttributeChange {
constructor(cell, attribute, value) {
class mxCellAttributeChange implements UndoableChange {
cell: mxCell;
attribute: string;
value: any;
previous: any;
constructor(cell: mxCell, attribute: string, value: any) {
this.cell = cell;
this.attribute = attribute;
this.value = value;
@ -46,19 +56,16 @@ class mxCellAttributeChange {
*/
// execute(): void;
execute() {
if (this.cell != null) {
const tmp = this.cell.getAttribute(this.attribute);
const tmp = this.cell.getAttribute(this.attribute);
if (this.previous == null) {
this.cell.value.removeAttribute(this.attribute);
} else {
this.cell.setAttribute(this.attribute, this.previous);
}
this.previous = tmp;
if (isNullish(this.previous)) {
this.cell.value.removeAttribute(this.attribute);
} else {
this.cell.setAttribute(this.attribute, this.previous);
}
this.previous = tmp;
}
}
export default mxCellAttributeChange;
// import('../serialization/mxGenericChangeCodec');

72
packages/core/src/atomic_changes/mxChildChange.js → packages/core/src/atomic_changes/mxChildChange.ts
View File

@ -1,3 +1,8 @@
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
import mxCell from '../view/cell/mxCell';
/**
* Action to add or remove a child in a model.
*
@ -8,8 +13,20 @@
*
* @class mxChildChange
*/
class mxChildChange {
constructor(model, parent, child, index) {
class mxChildChange implements UndoableChange {
model: mxGraphModel;
parent: mxCell | null;
child: mxCell;
previous: mxCell | null;
index: number;
previousIndex: number;
constructor(
model: mxGraphModel,
parent: mxCell | null,
child: mxCell,
index: number = 0
) {
this.model = model;
this.parent = parent;
this.previous = parent;
@ -24,31 +41,28 @@ class mxChildChange {
* removes or restores the cell's
* connections.
*/
// execute(): void;
execute() {
if (this.child != null) {
let tmp = this.child.getParent();
const tmp2 = tmp != null ? tmp.getIndex(this.child) : 0;
let tmp = this.child.getParent();
const tmp2 = tmp ? tmp.getIndex(this.child) : 0;
if (this.previous == null) {
this.connect(this.child, false);
}
tmp = this.model.parentForCellChanged(
this.child,
this.previous,
this.previousIndex
);
if (this.previous != null) {
this.connect(this.child, true);
}
this.parent = this.previous;
this.previous = tmp;
this.index = this.previousIndex;
this.previousIndex = tmp2;
if (!this.previous) {
this.connect(this.child, false);
}
tmp = this.model.parentForCellChanged(
this.child,
this.previous,
this.previousIndex
);
if (this.previous) {
this.connect(this.child, true);
}
this.parent = this.previous;
this.previous = tmp;
this.index = this.previousIndex;
this.previousIndex = tmp2;
}
/**
@ -58,14 +72,11 @@ class mxChildChange {
*
* @warning doc from mxGraph source code is incorrect
*/
// connect(cell: mxCell, isConnect: boolean): void;
connect(cell, isConnect) {
isConnect = isConnect != null ? isConnect : true;
connect(cell: mxCell, isConnect: boolean = true) {
const source = cell.getTerminal(true);
const target = cell.getTerminal(false);
if (source != null) {
if (source) {
if (isConnect) {
this.model.terminalForCellChanged(cell, source, true);
} else {
@ -73,7 +84,7 @@ class mxChildChange {
}
}
if (target != null) {
if (target) {
if (isConnect) {
this.model.terminalForCellChanged(cell, target, false);
} else {
@ -93,4 +104,3 @@ class mxChildChange {
}
export default mxChildChange;
// import('../serialization/mxChildChangeCodec');

28
packages/core/src/atomic_changes/mxCollapseChange.js → packages/core/src/atomic_changes/mxCollapseChange.ts
View File

@ -1,3 +1,8 @@
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
/**
* Class: mxCollapseChange
*
@ -8,8 +13,13 @@
* Constructs a change of a collapsed state in the
* specified model.
*/
class mxCollapseChange {
constructor(model, cell, collapsed) {
class mxCollapseChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
collapsed: boolean;
previous: boolean;
constructor(model: mxGraphModel, cell: mxCell, collapsed: boolean) {
this.model = model;
this.cell = cell;
this.collapsed = collapsed;
@ -22,17 +32,13 @@ class mxCollapseChange {
* Changes the collapsed state of {@link cell}` to {@link previous}` using
* <mxGraphModel.collapsedStateForCellChanged>.
*/
// execute(): void;
execute() {
if (this.cell != null) {
this.collapsed = this.previous;
this.previous = this.model.collapsedStateForCellChanged(
this.cell,
this.previous
);
}
this.collapsed = this.previous;
this.previous = this.model.collapsedStateForCellChanged(
this.cell,
this.previous
);
}
}
export default mxCollapseChange;
// import('../serialization/mxGenericChangeCodec');

40
packages/core/src/atomic_changes/mxCurrentRootChange.ts
View File

@ -3,26 +3,30 @@ import mxEventObject from '../util/event/mxEventObject';
import mxPoint from '../util/datatypes/mxPoint';
import mxCell from '../view/cell/mxCell';
import mxEvent from '../util/event/mxEvent';
import mxGraphModel from '../view/graph/mxGraphModel';
import mxGraph from "../view/graph/mxGraph";
import type { UndoableChange } from '../types';
/**
* Class: mxCurrentRootChange
*
* Action to change the current root in a view.
*/
class mxCurrentRootChange {
constructor(view: mxGraphView, root: mxCell) {
class mxCurrentRootChange implements UndoableChange {
view: mxGraphView;
root: mxCell | null;
previous: mxCell | null;
isUp: boolean;
constructor(view: mxGraphView, root: mxCell | null) {
this.view = view;
this.root = root;
this.previous = root;
this.isUp = root == null;
this.isUp = root === null;
if (!this.isUp) {
let tmp: mxCell | null = this.view.currentRoot;
const model: mxGraphModel = (<mxGraph>this.view.graph).getModel();
let tmp = this.view.currentRoot;
while (tmp != null) {
while (tmp) {
if (tmp === root) {
this.isUp = true;
break;
@ -32,28 +36,19 @@ class mxCurrentRootChange {
}
}
view: mxGraphView;
root: mxCell;
previous: mxCell;
isUp: boolean;
/**
* Changes the current root of the view.
*/
// execute(): void;
execute(): void {
execute() {
const tmp = this.view.currentRoot;
this.view.currentRoot = this.previous;
this.previous = <mxCell>tmp;
this.previous = tmp;
const translate = (<mxGraph>this.view.graph).getTranslateForRoot(
const translate = this.view.graph.getTranslateForRoot(
this.view.currentRoot
);
if (translate != null) {
if (translate) {
this.view.translate = new mxPoint(-translate.x, -translate.y);
}
@ -64,7 +59,7 @@ class mxCurrentRootChange {
this.view.refresh();
}
const name: string = this.isUp ? mxEvent.UP : mxEvent.DOWN;
const name = this.isUp ? mxEvent.UP : mxEvent.DOWN;
this.view.fireEvent(
new mxEventObject(
@ -75,6 +70,7 @@ class mxCurrentRootChange {
this.previous
)
);
this.isUp = !this.isUp;
}
}

38
packages/core/src/atomic_changes/mxGeometryChange.js
View File

@ -1,38 +0,0 @@
/**
* Class: mxGeometryChange
*
* Action to change a cell's geometry in a model.
*
* Constructor: mxGeometryChange
*
* Constructs a change of a geometry in the
* specified model.
*/
class mxGeometryChange {
constructor(model, cell, geometry) {
this.model = model;
this.cell = cell;
this.geometry = geometry;
this.previous = geometry;
}
/**
* Function: execute
*
* Changes the geometry of {@link cell}` ro {@link previous}` using
* <mxGraphModel.geometryForCellChanged>.
*/
// execute(): void;
execute() {
if (this.cell != null) {
this.geometry = this.previous;
this.previous = this.model.geometryForCellChanged(
this.cell,
this.previous
);
}
}
}
export default mxGeometryChange;
// import('../serialization/mxGenericChangeCodec');

42
packages/core/src/atomic_changes/mxGeometryChange.ts Normal file
View File

@ -0,0 +1,42 @@
import mxGeometry from '../util/datatypes/mxGeometry';
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
/**
* Class: mxGeometryChange
*
* Action to change a cell's geometry in a model.
*
* Constructor: mxGeometryChange
*
* Constructs a change of a geometry in the
* specified model.
*/
class mxGeometryChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
geometry: mxGeometry | null;
previous: mxGeometry | null;
constructor(model: mxGraphModel, cell: mxCell, geometry: mxGeometry | null) {
this.model = model;
this.cell = cell;
this.geometry = geometry;
this.previous = geometry;
}
/**
* Function: execute
*
* Changes the geometry of {@link cell}` ro {@link previous}` using
* <mxGraphModel.geometryForCellChanged>.
*/
execute() {
this.geometry = this.previous;
this.previous = this.model.geometryForCellChanged(this.cell, this.previous);
}
}
export default mxGeometryChange;

15
packages/core/src/atomic_changes/mxRootChange.js → packages/core/src/atomic_changes/mxRootChange.ts
View File

@ -1,3 +1,8 @@
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
/**
* Action to change the root in a model.
*
@ -8,8 +13,12 @@
*
* @class mxRootChange
*/
class mxRootChange {
constructor(model, root) {
class mxRootChange implements UndoableChange {
model: mxGraphModel;
root: mxCell | null;
previous: mxCell | null;
constructor(model: mxGraphModel, root: mxCell | null) {
this.model = model;
this.root = root;
this.previous = root;
@ -19,7 +28,6 @@ class mxRootChange {
* Carries out a change of the root using
* <mxGraphModel.rootChanged>.
*/
// execute(): void;
execute() {
this.root = this.previous;
this.previous = this.model.rootChanged(this.previous);
@ -27,4 +35,3 @@ class mxRootChange {
}
export default mxRootChange;
// import('../serialization/mxRootChangeCodec');

27
packages/core/src/atomic_changes/mxSelectionChange.ts
View File

@ -5,11 +5,17 @@ import mxEvent from '../util/event/mxEvent';
import mxGraphSelectionModel from '../view/graph/mxGraphSelectionModel';
import mxCell from '../view/cell/mxCell';
import type { UndoableChange } from '../types';
/**
* @class mxSelectionChange
* Action to change the current root in a view.
*/
class mxSelectionChange {
class mxSelectionChange implements UndoableChange {
selectionModel: mxGraphSelectionModel;
added: mxCell[];
removed: mxCell[];
constructor(
selectionModel: mxGraphSelectionModel,
added: mxCell[] = [],
@ -20,16 +26,9 @@ class mxSelectionChange {
this.removed = removed.slice();
}
selectionModel: mxGraphSelectionModel;
added: mxCell[];
removed: mxCell[];
/**
* Changes the current root of the view.
*/
// execute(): void;
execute() {
const t0: any = mxLog.enter('mxSelectionChange.execute');
@ -37,16 +36,12 @@ class mxSelectionChange {
mxResources.get(this.selectionModel.updatingSelectionResource) ||
this.selectionModel.updatingSelectionResource;
if (this.removed != null) {
for (const removed of this.removed) {
this.selectionModel.cellRemoved(removed);
}
for (const removed of this.removed) {
this.selectionModel.cellRemoved(removed);
}
if (this.added != null) {
for (const added of this.added) {
this.selectionModel.cellAdded(added);
}
for (const added of this.added) {
this.selectionModel.cellAdded(added);
}
[this.added, this.removed] = [this.removed, this.added];

30
packages/core/src/atomic_changes/mxStyleChange.js
View File

@ -1,30 +0,0 @@
/**
* Action to change a cell's style in a model.
*
* @class mxStyleChange
*/
class mxStyleChange {
constructor(model, cell, style) {
this.model = model;
this.cell = cell;
this.style = style;
this.previous = style;
}
/**
* Function: execute
*
* Changes the style of {@link cell}` to {@link previous}` using
* <mxGraphModel.styleForCellChanged>.
*/
// execute(): void;
execute() {
if (this.cell != null) {
this.style = this.previous;
this.previous = this.model.styleForCellChanged(this.cell, this.previous);
}
}
}
export default mxStyleChange;
// import('../serialization/mxGenericChangeCodec');

36
packages/core/src/atomic_changes/mxStyleChange.ts Normal file
View File

@ -0,0 +1,36 @@
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
/**
* Action to change a cell's style in a model.
*
* @class mxStyleChange
*/
class mxStyleChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
style: string | null;
previous: string | null;
constructor(model: mxGraphModel, cell: mxCell, style: string | null) {
this.model = model;
this.cell = cell;
this.style = style;
this.previous = style;
}
/**
* Function: execute
*
* Changes the style of {@link cell}` to {@link previous}` using
* <mxGraphModel.styleForCellChanged>.
*/
execute() {
this.style = this.previous;
this.previous = this.model.styleForCellChanged(this.cell, this.previous);
}
}
export default mxStyleChange;

36
packages/core/src/atomic_changes/mxTerminalChange.js
View File

@ -1,36 +0,0 @@
/**
* Action to change a terminal in a model.
*
* Constructor: mxTerminalChange
*
* Constructs a change of a terminal in the
* specified model.
*/
class mxTerminalChange {
constructor(model, cell, terminal, source) {
this.model = model;
this.cell = cell;
this.terminal = terminal;
this.previous = terminal;
this.source = source;
}
/**
* Changes the terminal of {@link cell}` to {@link previous}` using
* <mxGraphModel.terminalForCellChanged>.
*/
// execute(): void;
execute() {
if (this.cell != null) {
this.terminal = this.previous;
this.previous = this.model.terminalForCellChanged(
this.cell,
this.previous,
this.source
);
}
}
}
export default mxTerminalChange;
// import('../serialization/mxTerminalChangeCodec');

48
packages/core/src/atomic_changes/mxTerminalChange.ts Normal file
View File

@ -0,0 +1,48 @@
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
/**
* Action to change a terminal in a model.
*
* Constructor: mxTerminalChange
*
* Constructs a change of a terminal in the
* specified model.
*/
class mxTerminalChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
terminal: mxCell | null;
previous: mxCell | null;
source: boolean;
constructor(
model: mxGraphModel,
cell: mxCell,
terminal: mxCell | null,
source: boolean
) {
this.model = model;
this.cell = cell;
this.terminal = terminal;
this.previous = terminal;
this.source = source;
}
/**
* Changes the terminal of {@link cell}` to {@link previous}` using
* <mxGraphModel.terminalForCellChanged>.
*/
execute() {
this.terminal = this.previous;
this.previous = this.model.terminalForCellChanged(
this.cell,
this.previous,
this.source
);
}
}
export default mxTerminalChange;

31
packages/core/src/atomic_changes/mxValueChange.js
View File

@ -1,31 +0,0 @@
/**
* Action to change a user object in a model.
*
* Constructs a change of a user object in the
* specified model.
*
* @class mxValueChange
*/
class mxValueChange {
constructor(model, cell, value) {
this.model = model;
this.cell = cell;
this.value = value;
this.previous = value;
}
/**
* Changes the value of {@link cell}` to {@link previous}` using
* <mxGraphModel.valueForCellChanged>.
*/
// execute(): void;
execute() {
if (this.cell != null) {
this.value = this.previous;
this.previous = this.model.valueForCellChanged(this.cell, this.previous);
}
}
}
export default mxValueChange;
// import('../serialization/mxGenericChangeCodec');

37
packages/core/src/atomic_changes/mxValueChange.ts Normal file
View File

@ -0,0 +1,37 @@
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
/**
* Action to change a user object in a model.
*
* Constructs a change of a user object in the
* specified model.
*
* @class mxValueChange
*/
class mxValueChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
value: unknown;
previous: unknown;
constructor(model: mxGraphModel, cell: mxCell, value: unknown) {
this.model = model;
this.cell = cell;
this.value = value;
this.previous = value;
}
/**
* Changes the value of {@link cell}` to {@link previous}` using
* <mxGraphModel.valueForCellChanged>.
*/
execute() {
this.value = this.previous;
this.previous = this.model.valueForCellChanged(this.cell, this.previous);
}
}
export default mxValueChange;

28
packages/core/src/atomic_changes/mxVisibleChange.js → packages/core/src/atomic_changes/mxVisibleChange.ts
View File

@ -1,3 +1,8 @@
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
/**
* Class: mxVisibleChange
*
@ -8,8 +13,13 @@
* Constructs a change of a visible state in the
* specified model.
*/
class mxVisibleChange {
constructor(model, cell, visible) {
class mxVisibleChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
visible: boolean;
previous: boolean;
constructor(model: mxGraphModel, cell: mxCell, visible: boolean) {
this.model = model;
this.cell = cell;
this.visible = visible;
@ -22,17 +32,13 @@ class mxVisibleChange {
* Changes the visible state of {@link cell}` to {@link previous}` using
* <mxGraphModel.visibleStateForCellChanged>.
*/
// execute(): void;
execute() {
if (this.cell != null) {
this.visible = this.previous;
this.previous = this.model.visibleStateForCellChanged(
this.cell,
this.previous
);
}
this.visible = this.previous;
this.previous = this.model.visibleStateForCellChanged(
this.cell,
this.previous
);
}
}
export default mxVisibleChange;
// import('../serialization/mxGenericChangeCodec');

236
packages/core/src/shape/mxShape.ts
View File

@ -5,7 +5,12 @@
* Type definitions from the typed-mxgraph project
*/
import mxRectangle from '../util/datatypes/mxRectangle';
import mxUtils from '../util/mxUtils';
import {
getBoundingBox,
getDirectedBounds,
getValue,
mod,
} from '../util/mxUtils';
import {
DIRECTION_EAST,
DIRECTION_NORTH,
@ -32,8 +37,9 @@ import mxClient from '../mxClient';
import mxCellState from '../view/cell/mxCellState';
import mxStencil from './node/mxStencil';
import mxCellOverlay from '../view/cell/mxCellOverlay';
import { CellStateStyles } from '../types';
const toBool = (i: any): boolean => {
const toBool = (i: any) => {
if (i === 0) return false;
if (i === 1) return true;
if (i === '0') return false;
@ -104,11 +110,11 @@ class mxShape {
* container - DOM node that will contain the shape.
*/
// init(container: Element): void;
init(container: HTMLElement | SVGElement | null = null) {
if (this.node == null) {
this.node = this.create(container);
init(container: SVGElement | null = null) {
if (!this.node) {
this.node = this.create();
if (container != null) {
if (container) {
container.appendChild(this.node);
}
}
@ -119,8 +125,7 @@ class mxShape {
*
* Sets the styles to their default values.
*/
// initStyles(container: Element): void;
initStyles(container: SVGElement | null = null) {
initStyles() {
this.strokewidth = 1;
this.rotation = 0;
this.opacity = 100;
@ -133,14 +138,14 @@ class mxShape {
// TODO: Document me!!
// Assigned in mxCellRenderer
preserveImageAspect: boolean = false;
preserveImageAspect = false;
overlay: mxCellOverlay | null = null;
indicator: mxShape | null = null;
indicatorShape: typeof mxShape | null = null;
// Assigned in mxCellHighlight
opacity: number = 100;
isDashed: boolean = false;
opacity = 100;
isDashed = false;
fill: string | null = null;
@ -148,7 +153,7 @@ class mxShape {
gradientDirection: string | null = null;
fillOpacity: number = 100;
fillOpacity = 100;
strokeOpacity: number | null = 100;
@ -168,23 +173,23 @@ class mxShape {
direction: string | null = null;
flipH: boolean = false;
flipH = false;
flipV: boolean = false;
flipV = false;
isShadow: boolean = false;
isShadow = false;
isRounded: boolean = false;
isRounded = false;
rotation: number = 0;
rotation = 0;
cursor: string = '';
cursor = '';
verticalTextRotation: number | null = null;
oldGradients: any[] | null = null;
glass: boolean = false;
glass = false;
/**
* Variable: dialect
@ -192,7 +197,6 @@ class mxShape {
* Holds the dialect in which the shape is to be painted.
* This can be one of the DIALECT constants in <mxConstants>.
*/
// dialect: string;
dialect: string | null = null;
/**
@ -200,31 +204,27 @@ class mxShape {
*
* Holds the scale in which the shape is being painted.
*/
// scale: number;
scale: number = 1;
scale = 1;
/**
* Variable: antiAlias
*
* Rendering hint for configuring the canvas.
*/
// antiAlias: boolean;
antiAlias: boolean = true;
antiAlias = true;
/**
* Variable: minSvgStrokeWidth
*
* Minimum stroke width for SVG output.
*/
// minSvgStrokeWidth: number;
minSvgStrokeWidth: number = 1;
minSvgStrokeWidth = 1;
/**
* Variable: bounds
*
* Holds the <mxRectangle> that specifies the bounds of this shape.
*/
// bounds: mxRectangle;
bounds: mxRectangle | null = null;
/**
@ -232,15 +232,13 @@ class mxShape {
*
* Holds the array of <mxPoints> that specify the points of this shape.
*/
// points: mxPoint[];
points: (mxPoint | null)[] | null = null;
points: (mxPoint | null)[] = [];
/**
* Variable: node
*
* Holds the outermost DOM node that represents this shape.
*/
// node: HTMLElement;
node: SVGGElement | null = null;
/**
@ -248,16 +246,14 @@ class mxShape {
*
* Optional reference to the corresponding <mxCellState>.
*/
// state?: mxCellState;
state?: mxCellState | null = null;
state: mxCellState | null = null;
/**
* Variable: style
*
* Optional reference to the style of the corresponding <mxCellState>.
*/
// style?: { [key: string]: any };
style?: any = null;
style: CellStateStyles | null = null;
/**
* Variable: boundingBox
@ -265,7 +261,6 @@ class mxShape {
* Contains the bounding box of the shape, that is, the smallest rectangle
* that includes all pixels of the shape.
*/
// boundingBox: mxRectangle;
boundingBox: mxRectangle | null = null;
/**
@ -273,7 +268,6 @@ class mxShape {
*
* Holds the <mxStencil> that defines the shape.
*/
// stencil: mxStencil;
stencil: mxStencil | null = null;
/**
@ -282,24 +276,21 @@ class mxShape {
* Event-tolerance for SVG strokes (in px). Default is 8. This is only passed
* to the canvas in <createSvgCanvas> if <pointerEvents> is true.
*/
// svgStrokeTolerance: number;
svgStrokeTolerance: number = 8;
svgStrokeTolerance = 8;
/**
* Variable: pointerEvents
*
* Specifies if pointer events should be handled. Default is true.
*/
// pointerEvents: boolean;
pointerEvents: boolean = true;
pointerEvents = true;
/**
* Variable: svgPointerEvents
*
* Specifies if pointer events should be handled. Default is true.
*/
// svgPointerEvents: 'all';
svgPointerEvents: string = 'all';
svgPointerEvents = 'all';
/**
* Variable: shapePointerEvents
@ -307,8 +298,7 @@ class mxShape {
* Specifies if pointer events outside of shape should be handled. Default
* is false.
*/
// shapePointerEvents: boolean;
shapePointerEvents: boolean = false;
shapePointerEvents = false;
/**
* Variable: stencilPointerEvents
@ -316,8 +306,7 @@ class mxShape {
* Specifies if pointer events outside of stencils should be handled. Default
* is false. Set this to true for backwards compatibility with the 1.x branch.
*/
// stencilPointerEvents: boolean;
stencilPointerEvents: boolean = false;
stencilPointerEvents = false;
/**
* Variable: outline
@ -327,16 +316,14 @@ class mxShape {
* not be painted for outlines. Default is false. This should be set before
* calling <apply>.
*/
// outline: boolean;
outline: boolean = false;
outline = false;
/**
* Variable: visible
*
* Specifies if the shape is visible. Default is true.
*/
// visible: boolean;
visible: boolean = true;
visible = true;
/**
* Variable: useSvgBoundingBox
@ -344,8 +331,7 @@ class mxShape {
* Allows to use the SVG bounding box in SVG. Default is false for performance
* reasons.
*/
// useSvgBoundingBox: boolean;
useSvgBoundingBox: boolean = true;
useSvgBoundingBox = true;
/**
* Function: isHtmlAllowed
@ -353,7 +339,6 @@ class mxShape {
* Returns true if HTML is allowed for this shape. This implementation always
* returns false.
*/
// isHtmlAllowed(): boolean;
isHtmlAllowed() {
return false;
}
@ -363,16 +348,13 @@ class mxShape {
*
* Returns 0, or 0.5 if <strokewidth> % 2 == 1.
*/
// getSvgScreenOffset(): number;
getSvgScreenOffset(): number {
getSvgScreenOffset() {
const sw =
this.stencil && this.stencil.strokewidth !== 'inherit'
? Number(this.stencil.strokewidth)
: <number>this.strokewidth;
return mxUtils.mod(Math.max(1, Math.round(sw * this.scale)), 2) === 1
? 0.5
: 0;
return mod(Math.max(1, Math.round(sw * this.scale)), 2) === 1 ? 0.5 : 0;
}
/**
@ -387,8 +369,7 @@ class mxShape {
*
* container - DOM node that will contain the shape.
*/
// create(container: Element): Element;
create(container: SVGElement | HTMLElement | null): SVGGElement {
create() {
return document.createElementNS('http://www.w3.org/2000/svg', 'g');
}
@ -398,8 +379,7 @@ class mxShape {
* Reconfigures this shape. This will update the colors etc in
* addition to the bounds or points.
*/
// reconfigure(): void;
reconfigure(): void {
reconfigure() {
this.redraw();
}
@ -408,8 +388,7 @@ class mxShape {
*
* Creates and returns the SVG node(s) to represent this shape.
*/
// redraw(): void;
redraw(): void {
redraw() {
if (!this.node) return;
this.updateBoundsFromPoints();
@ -429,10 +408,10 @@ class mxShape {
*
* Removes all child nodes and resets all CSS.
*/
// clear(): void;
clear(): void {
clear() {
if (!this.node) return;
while (this.node.lastChild != null) {
while (this.node.lastChild) {
this.node.removeChild(this.node.lastChild);
}
}
@ -442,11 +421,10 @@ class mxShape {
*
* Updates the bounds based on the points.
*/
// updateBoundsFromPoints(): void;
updateBoundsFromPoints(): void {
updateBoundsFromPoints() {
const pts = this.points;
if (pts != null && pts.length > 0 && pts[0] != null) {
if (pts.length > 0 && pts[0]) {
this.bounds = new mxRectangle(
Math.round(pts[0].x),
Math.round(pts[0].y),
@ -455,7 +433,7 @@ class mxShape {
);
for (const pt of pts) {
if (pt != null) {
if (pt) {
this.bounds.add(
new mxRectangle(Math.round(pt.x), Math.round(pt.y), 1, 1)
);
@ -471,53 +449,46 @@ class mxShape {
* given scaled and translated bounds of the shape. This method should not
* change the rectangle in-place. This implementation returns the given rect.
*/
// getLabelBounds(rect: mxRectangle): mxRectangle;
getLabelBounds(rect: mxRectangle): mxRectangle {
const d = mxUtils.getValue(this.style, STYLE_DIRECTION, DIRECTION_EAST);
getLabelBounds(rect: mxRectangle) {
const d = getValue(this.style, STYLE_DIRECTION, DIRECTION_EAST);
let bounds = rect.clone();
// Normalizes argument for getLabelMargins hook
if (
d !== DIRECTION_SOUTH &&
d !== DIRECTION_NORTH &&
this.state != null &&
this.state.text != null &&
this.state &&
this.state.text &&
this.state.text.isPaintBoundsInverted()
) {
bounds = bounds.clone();
[bounds.width, bounds.height] = [bounds.height, bounds.width];
}
let labelMargins: mxRectangle | null = this.getLabelMargins(bounds);
let labelMargins = this.getLabelMargins(bounds);
if (labelMargins != null) {
labelMargins = <mxRectangle>(<mxRectangle>labelMargins).clone();
if (labelMargins) {
labelMargins = labelMargins.clone();
let flipH = toBool(mxUtils.getValue(this.style, STYLE_FLIPH, false));
let flipV = toBool(mxUtils.getValue(this.style, STYLE_FLIPV, false));
let flipH = toBool(getValue(this.style, STYLE_FLIPH, false));
let flipV = toBool(getValue(this.style, STYLE_FLIPV, false));
// Handles special case for vertical labels
if (
this.state != null &&
this.state.text != null &&
this.state &&
this.state.text &&
this.state.text.isPaintBoundsInverted()
) {
const tmp = <number>labelMargins.x;
labelMargins.x = <number>labelMargins.height;
labelMargins.height = <number>labelMargins.width;
labelMargins.width = <number>labelMargins.y;
const tmp = labelMargins.x;
labelMargins.x = labelMargins.height;
labelMargins.height = labelMargins.width;
labelMargins.width = labelMargins.y;
labelMargins.y = tmp;
[flipH, flipV] = [flipV, flipH];
}
return mxUtils.getDirectedBounds(
rect,
labelMargins,
this.style,
flipH,
flipV
);
return getDirectedBounds(rect, labelMargins, this.style, flipH, flipV);
}
return rect;
}
@ -529,8 +500,7 @@ class mxShape {
* computing the label bounds as an <mxRectangle>, where the bottom and right
* margin are defined in the width and height of the rectangle, respectively.
*/
// getLabelMargins(rect: mxRectangle): mxRectangle | null;
getLabelMargins(rect: mxRectangle | null = null): mxRectangle | null {
getLabelMargins(rect: mxRectangle | null): mxRectangle | null {
return null;
}
@ -539,13 +509,12 @@ class mxShape {
*
* Returns true if the bounds are not null and all of its variables are numeric.
*/
// checkBounds(): boolean;
checkBounds(): boolean {
checkBounds() {
return (
!Number.isNaN(this.scale) &&
Number.isFinite(this.scale) &&
this.scale > 0 &&
this.bounds != null &&
this.bounds &&
!Number.isNaN(this.bounds.x) &&
!Number.isNaN(this.bounds.y) &&
!Number.isNaN(this.bounds.width) &&
@ -560,12 +529,12 @@ class mxShape {
*
* Updates the SVG or VML shape.
*/
// redrawShape(): void;
redrawShape(): void {
if (!this.node) return;
const canvas = this.createCanvas();
if (canvas != null) {
if (canvas) {
// Specifies if events should be handled
canvas.pointerEvents = this.pointerEvents;
@ -587,15 +556,14 @@ class mxShape {
*
* Creates a new canvas for drawing this shape. May return null.
*/
// createCanvas(): Element;
createCanvas(): mxSvgCanvas2D {
createCanvas() {
const canvas = this.createSvgCanvas();
if (canvas != null && this.outline) {
if (canvas && this.outline) {
canvas.setStrokeWidth(this.strokewidth);
canvas.setStrokeColor(this.stroke);
if (this.isDashed != null) {
if (this.isDashed) {
canvas.setDashed(this.isDashed);
}
@ -606,6 +574,7 @@ class mxShape {
canvas.setDashed = () => {};
canvas.text = () => {};
}
return canvas;
}
@ -614,20 +583,18 @@ class mxShape {
*
* Creates and returns an <mxSvgCanvas2D> for rendering this shape.
*/
// createSvgCanvas(): mxSvgCanvas2D;
createSvgCanvas(): mxSvgCanvas2D {
createSvgCanvas() {
const canvas = new mxSvgCanvas2D(this.node, false);
canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0;
canvas.pointerEventsValue = this.svgPointerEvents;
const off = this.getSvgScreenOffset();
if (off !== 0) {
(<SVGGElement>this.node).setAttribute(
'transform',
`translate(${off},${off})`
);
} else {
(<SVGGElement>this.node).removeAttribute('transform');
if (this.node) {
if (off !== 0) {
this.node.setAttribute('transform', `translate(${off},${off})`);
} else {
this.node.removeAttribute('transform');
}
}
canvas.minStrokeWidth = this.minSvgStrokeWidth;
@ -647,14 +614,14 @@ class mxShape {
* Destroys the given canvas which was used for drawing. This implementation
* increments the reference counts on all shared gradients used in the canvas.
*/
destroyCanvas(canvas: mxSvgCanvas2D): void {
destroyCanvas(canvas: mxSvgCanvas2D) {
// Manages reference counts
if (canvas instanceof mxSvgCanvas2D) {
// Increments ref counts
for (const key in canvas.gradients) {
const gradient = canvas.gradients[key];
if (gradient != null) {
if (gradient) {
gradient.mxRefCount = (gradient.mxRefCount || 0) + 1;
}
}
@ -669,20 +636,19 @@ class mxShape {
*
* Invoked before paint is called.
*/
beforePaint(c: mxSvgCanvas2D): void {}
beforePaint(c: mxSvgCanvas2D) {}
/**
* Function: afterPaint
*
* Invokes after paint was called.
*/
afterPaint(c: mxSvgCanvas2D): void {}
afterPaint(c: mxSvgCanvas2D) {}
/**
* Generic rendering code.
*/
// paint(c: mxAbstractCanvas2D): void;
paint(c: mxSvgCanvas2D): void {
paint(c: mxSvgCanvas2D) {
let strokeDrawn = false;
if (c != null && this.outline) {
@ -801,7 +767,7 @@ class mxShape {
c.setDashed(
this.isDashed,
this.style != null
? toBool(mxUtils.getValue(this.style, STYLE_FIX_DASH, false))
? toBool(getValue(this.style, STYLE_FIX_DASH, false))
: false
);
}
@ -893,9 +859,7 @@ class mxShape {
if (
!this.outline ||
this.style == null ||
toBool(
mxUtils.getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) === false
)
toBool(getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) === false)
) {
c.setShadow(false);
this.paintForeground(c, x, y, w, h);
@ -945,22 +909,16 @@ class mxShape {
getArcSize(w: number, h: number): number {
let r = 0;
if (toBool(mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0))) {
if (toBool(getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0))) {
r = Math.min(
w / 2,
Math.min(
h / 2,
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
)
Math.min(h / 2, getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2)
);
} else {
const f = parseFloat(
String(
mxUtils.getValue(
this.style,
STYLE_ARCSIZE,
RECTANGLE_ROUNDING_FACTOR * 100
) / 100
getValue(this.style, STYLE_ARCSIZE, RECTANGLE_ROUNDING_FACTOR * 100) /
100
)
);
r = Math.min(w * f, h * f);
@ -1046,7 +1004,7 @@ class mxShape {
}
while (i < (close ? pts.length : pts.length - 1)) {
let tmp = pts[mxUtils.mod(i, pts.length)];
let tmp = pts[mod(i, pts.length)];
let dx = pt.x - tmp.x;
let dy = pt.y - tmp.y;
@ -1069,7 +1027,7 @@ class mxShape {
// Draws a curve from the last point to the current
// point with a spacing of size off the current point
// into direction of the next point
let next = pts[mxUtils.mod(i + 1, pts.length)];
let next = pts[mod(i + 1, pts.length)];
// Uses next non-overlapping point
while (
@ -1077,7 +1035,7 @@ class mxShape {
Math.round(next.x - tmp.x) === 0 &&
Math.round(next.y - tmp.y) === 0
) {
next = pts[mxUtils.mod(i + 2, pts.length)];
next = pts[mod(i + 2, pts.length)];
i++;
}
@ -1336,7 +1294,7 @@ class mxShape {
const rot = this.getShapeRotation();
if (rot !== 0) {
bbox = mxUtils.getBoundingBox(bbox, rot);
bbox = getBoundingBox(bbox, rot);
}
}
this.boundingBox = bbox;
@ -1408,7 +1366,7 @@ class mxShape {
// getTextRotation(): number;
getTextRotation(): number {
let rot = this.getRotation();
if (!toBool(mxUtils.getValue(this.style, STYLE_HORIZONTAL, 1))) {
if (!toBool(getValue(this.style, STYLE_HORIZONTAL, 1))) {
rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
}
return rot;

14
packages/core/src/shape/node/mxStencilRegistry.js → packages/core/src/shape/node/mxStencilRegistry.ts
View File

@ -23,6 +23,12 @@
* (end)
*/
import mxStencil from './mxStencil';
type Stencils = {
[k: string]: mxStencil;
};
/**
* A singleton class that provides a registry for stencils and the methods
* for painting those stencils onto a canvas or into a DOM.
@ -30,7 +36,7 @@
* @class mxStencilRegistry
*/
class mxStencilRegistry {
static stencils = {};
static stencils: Stencils = {};
/**
* Adds the given <mxStencil>.
@ -38,8 +44,7 @@ class mxStencilRegistry {
* @param {string} name
* @param {mxStencil} stencil
*/
// static addStencil(name: string, stencil: mxStencil): void;
static addStencil(name, stencil) {
static addStencil(name: string, stencil: mxStencil) {
mxStencilRegistry.stencils[name] = stencil;
}
@ -49,8 +54,7 @@ class mxStencilRegistry {
* @param {string} name
* @returns {mxStencil}
*/
// static getStencil(name: string): mxStencil;
static getStencil(name) {
static getStencil(name: string) {
return mxStencilRegistry.stencils[name];
}
}

75
packages/core/src/types.ts Normal file
View File

@ -0,0 +1,75 @@
import type mxCell from './view/cell/mxCell';
export type CellMap = {
[id: string]: mxCell;
};
export type FilterFunction = (cell: mxCell) => boolean;
export type UndoableChange = {
execute: () => void;
undo?: () => void;
redo?: () => void;
};
export type StyleValue = string | number;
export type StyleProperties = {
[k: string]: StyleValue;
};
export type Properties = {
[k: string]: any;
};
export type CellStateStyles = {
[k: string]: string;
};
export type ColorInputValue = string | 'none';
export type ColorValue = string | null;
export type DirectionValue = 'north' | 'south' | 'east' | 'west';
export type AlignValue =
| 'left'
| 'center'
| 'right'
| 'top'
| 'middle'
| 'bottom';
export type CanvasState = {
dx: number;
dy: number;
scale: number;
alpha: number;
fillAlpha: number;
strokeAlpha: number;
fillColor: ColorValue;
gradientFillAlpha: number;
gradientColor: ColorValue;
gradientAlpha: number;
gradientDirection: string | null;
strokeColor: ColorValue;
strokeWidth: number;
dashed: boolean;
dashPattern: string;
fixDash: boolean;
lineCap: string;
lineJoin: string;
miterLimit: number;
fontColor: ColorValue;
fontBackgroundColor: ColorValue;
fontBorderColor: ColorValue;
fontSize: number;
fontFamily: string;
fontStyle: number;
shadow: boolean;
shadowColor: ColorValue;
shadowAlpha: number;
shadowDx: number;
shadowDy: number;
rotation: number;
rotationCx: number;
rotationCy: number;
};

206
packages/core/src/util/canvas/mxAbstractCanvas2D.js → packages/core/src/util/canvas/mxAbstractCanvas2D.ts
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import mxUtils from '../mxUtils';
import { arcToCurves, getRotatedPoint } from '../mxUtils';
import {
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
@ -16,6 +16,9 @@ import {
} from '../mxConstants';
import mxUrlConverter from '../network/mxUrlConverter';
import mxPoint from '../datatypes/mxPoint';
import { clone } from '../mxCloneUtils';
import type { CanvasState, ColorInputValue, ColorValue } from '../../types';
/**
* Class: mxAbstractCanvas2D
@ -38,26 +41,28 @@ class mxAbstractCanvas2D {
this.reset();
}
converter: mxUrlConverter;
/**
* Variable: state
*
* Holds the current state.
*/
state = null;
state: CanvasState = this.createState();
/**
* Variable: states
*
* Stack of states.
*/
states = null;
states: CanvasState[] = [];
/**
* Variable: path
*
* Holds the current path as an array.
*/
path = null;
path: (string | number)[] = [];
/**
* Variable: rotateHtml
@ -181,7 +186,7 @@ class mxAbstractCanvas2D {
rotation: 0,
rotationCx: 0,
rotationCy: 0,
};
} as CanvasState;
}
/**
@ -189,8 +194,8 @@ class mxAbstractCanvas2D {
*
* Rounds all numbers to integers.
*/
format(value) {
return Math.round(parseFloat(value));
format(value: number) {
return Math.round(value);
}
/**
@ -198,20 +203,18 @@ class mxAbstractCanvas2D {
*
* Adds the given operation to the path.
*/
addOp = (...args) => {
if (this.path != null) {
this.path.push(args[0]);
addOp = (op: string, ...args: number[]) => {
this.path.push(op);
if (args.length > 2) {
const s = this.state;
if (args.length > 1) {
const s = this.state;
for (let i = 2; i < args.length; i += 2) {
this.lastX = args[i - 1];
this.lastY = args[i];
for (let i = 1; i < args.length; i += 2) {
this.lastX = args[i - 1];
this.lastY = args[i];
this.path.push(this.format((this.lastX + s.dx) * s.scale));
this.path.push(this.format((this.lastY + s.dy) * s.scale));
}
this.path.push(this.format((this.lastX + s.dx) * s.scale));
this.path.push(this.format((this.lastY + s.dy) * s.scale));
}
}
};
@ -221,10 +224,10 @@ class mxAbstractCanvas2D {
*
* Rotates the given point and returns the result as an <mxPoint>.
*/
rotatePoint(x, y, theta, cx, cy) {
rotatePoint(x: number, y: number, theta: number, cx: number, cy: number) {
const rad = theta * (Math.PI / 180);
return mxUtils.getRotatedPoint(
return getRotatedPoint(
new mxPoint(x, y),
Math.cos(rad),
Math.sin(rad),
@ -239,7 +242,7 @@ class mxAbstractCanvas2D {
*/
save() {
this.states.push(this.state);
this.state = mxUtils.clone(this.state);
this.state = clone(this.state);
}
/**
@ -248,9 +251,9 @@ class mxAbstractCanvas2D {
* Restores the current state.
*/
restore() {
if (this.states.length > 0) {
this.state = this.states.pop();
}
const state = this.states.pop();
if (state) this.state = state;
}
/**
@ -258,7 +261,7 @@ class mxAbstractCanvas2D {
*
* Sets the current link. Hook for subclassers.
*/
setLink(link) {
setLink(link: string | null) {
// nop
}
@ -267,7 +270,7 @@ class mxAbstractCanvas2D {
*
* Scales the current state.
*/
scale(value) {
scale(value: number) {
this.state.scale *= value;
this.state.strokeWidth *= value;
}
@ -277,7 +280,7 @@ class mxAbstractCanvas2D {
*
* Translates the current state.
*/
translate(dx, dy) {
translate(dx: number, dy: number) {
this.state.dx += dx;
this.state.dy += dy;
}
@ -287,7 +290,13 @@ class mxAbstractCanvas2D {
*
* Rotates the current state.
*/
rotate(theta, flipH, flipV, cx, cy) {
rotate(
theta: number,
flipH: boolean,
flipV: boolean,
cx: number,
cy: number
) {
// nop
}
@ -296,7 +305,7 @@ class mxAbstractCanvas2D {
*
* Sets the current alpha.
*/
setAlpha(value) {
setAlpha(value: number) {
this.state.alpha = value;
}
@ -305,7 +314,7 @@ class mxAbstractCanvas2D {
*
* Sets the current solid fill alpha.
*/
setFillAlpha(value) {
setFillAlpha(value: number) {
this.state.fillAlpha = value;
}
@ -314,7 +323,7 @@ class mxAbstractCanvas2D {
*
* Sets the current stroke alpha.
*/
setStrokeAlpha(value) {
setStrokeAlpha(value: number) {
this.state.strokeAlpha = value;
}
@ -323,12 +332,10 @@ class mxAbstractCanvas2D {
*
* Sets the current fill color.
*/
setFillColor(value) {
if (value === NONE) {
value = null;
}
setFillColor(value: ColorInputValue) {
const v = value === NONE ? null : value;
this.state.fillColor = value;
this.state.fillColor = v;
this.state.gradientColor = null;
}
@ -337,12 +344,22 @@ class mxAbstractCanvas2D {
*
* Sets the current gradient.
*/
setGradient(color1, color2, x, y, w, h, direction, alpha1, alpha2) {
setGradient(
color1: ColorValue,
color2: ColorValue,
x: number,
y: number,
w: number,
h: number,
direction: string | null,
alpha1 = 1,
alpha2: number = 1
) {
const s = this.state;
s.fillColor = color1;
s.gradientFillAlpha = alpha1 != null ? alpha1 : 1;
s.gradientFillAlpha = alpha1;
s.gradientColor = color2;
s.gradientAlpha = alpha2 != null ? alpha2 : 1;
s.gradientAlpha = alpha2;
s.gradientDirection = direction;
}
@ -351,12 +368,9 @@ class mxAbstractCanvas2D {
*
* Sets the current stroke color.
*/
setStrokeColor(value) {
if (value === NONE) {
value = null;
}
this.state.strokeColor = value;
setStrokeColor(value: ColorInputValue) {
const v = value === NONE ? null : value;
this.state.strokeColor = v;
}
/**
@ -364,7 +378,7 @@ class mxAbstractCanvas2D {
*
* Sets the current stroke width.
*/
setStrokeWidth(value) {
setStrokeWidth(value: number) {
this.state.strokeWidth = value;
}
@ -373,7 +387,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables dashed lines.
*/
setDashed(value, fixDash) {
setDashed(value: boolean, fixDash: boolean) {
this.state.dashed = value;
this.state.fixDash = fixDash;
}
@ -383,7 +397,7 @@ class mxAbstractCanvas2D {
*
* Sets the current dash pattern.
*/
setDashPattern(value) {
setDashPattern(value: string) {
this.state.dashPattern = value;
}
@ -392,7 +406,7 @@ class mxAbstractCanvas2D {
*
* Sets the current line cap.
*/
setLineCap(value) {
setLineCap(value: string) {
this.state.lineCap = value;
}
@ -401,7 +415,7 @@ class mxAbstractCanvas2D {
*
* Sets the current line join.
*/
setLineJoin(value) {
setLineJoin(value: string) {
this.state.lineJoin = value;
}
@ -410,7 +424,7 @@ class mxAbstractCanvas2D {
*
* Sets the current miter limit.
*/
setMiterLimit(value) {
setMiterLimit(value: number) {
this.state.miterLimit = value;
}
@ -419,12 +433,9 @@ class mxAbstractCanvas2D {
*
* Sets the current font color.
*/
setFontColor(value) {
if (value === NONE) {
value = null;
}
this.state.fontColor = value;
setFontColor(value: ColorInputValue) {
const v = value === NONE ? null : value;
this.state.fontColor = v;
}
/**
@ -432,12 +443,9 @@ class mxAbstractCanvas2D {
*
* Sets the current font background color.
*/
setFontBackgroundColor(value) {
if (value === NONE) {
value = null;
}
this.state.fontBackgroundColor = value;
setFontBackgroundColor(value: ColorInputValue) {
const v = value === NONE ? null : value;
this.state.fontBackgroundColor = v;
}
/**
@ -445,12 +453,9 @@ class mxAbstractCanvas2D {
*
* Sets the current font border color.
*/
setFontBorderColor(value) {
if (value === NONE) {
value = null;
}
this.state.fontBorderColor = value;
setFontBorderColor(value: ColorInputValue) {
const v = value === NONE ? null : value;
this.state.fontBorderColor = v;
}
/**
@ -458,8 +463,8 @@ class mxAbstractCanvas2D {
*
* Sets the current font size.
*/
setFontSize(value) {
this.state.fontSize = parseFloat(value);
setFontSize(value: number) {
this.state.fontSize = value;
}
/**
@ -467,7 +472,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font family.
*/
setFontFamily(value) {
setFontFamily(value: string) {
this.state.fontFamily = value;
}
@ -476,11 +481,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font style.
*/
setFontStyle(value) {
if (value == null) {
value = 0;
}
setFontStyle(value: number) {
this.state.fontStyle = value;
}
@ -489,7 +490,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
setShadow(enabled) {
setShadow(enabled: boolean) {
this.state.shadow = enabled;
}
@ -498,12 +499,9 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
setShadowColor(value) {
if (value === NONE) {
value = null;
}
this.state.shadowColor = value;
setShadowColor(value: ColorInputValue) {
const v = value === NONE ? null : value;
this.state.shadowColor = v;
}
/**
@ -511,7 +509,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
setShadowAlpha(value) {
setShadowAlpha(value: number) {
this.state.shadowAlpha = value;
}
@ -520,7 +518,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
setShadowOffset(dx, dy) {
setShadowOffset(dx: number, dy: number) {
this.state.shadowDx = dx;
this.state.shadowDy = dy;
}
@ -541,7 +539,7 @@ class mxAbstractCanvas2D {
*
* Moves the current path the given coordinates.
*/
moveTo(x, y) {
moveTo(x: number, y: number) {
this.addOp(this.moveOp, x, y);
}
@ -550,7 +548,7 @@ class mxAbstractCanvas2D {
*
* Draws a line to the given coordinates. Uses moveTo with the op argument.
*/
lineTo(x, y) {
lineTo(x: number, y: number) {
this.addOp(this.lineOp, x, y);
}
@ -559,7 +557,7 @@ class mxAbstractCanvas2D {
*
* Adds a quadratic curve to the current path.
*/
quadTo(x1, y1, x2, y2) {
quadTo(x1: number, y1: number, x2: number, y2: number) {
this.addOp(this.quadOp, x1, y1, x2, y2);
}
@ -568,7 +566,14 @@ class mxAbstractCanvas2D {
*
* Adds a bezier curve to the current path.
*/
curveTo(x1, y1, x2, y2, x3, y3) {
curveTo(
x1: number,
y1: number,
x2: number,
y2: number,
x3: number,
y3: number
) {
this.addOp(this.curveOp, x1, y1, x2, y2, x3, y3);
}
@ -578,8 +583,16 @@ class mxAbstractCanvas2D {
* Adds the given arc to the current path. This is a synthetic operation that
* is broken down into curves.
*/
arcTo(rx, ry, angle, largeArcFlag, sweepFlag, x, y) {
const curves = mxUtils.arcToCurves(
arcTo(
rx: number,
ry: number,
angle: number,
largeArcFlag: boolean,
sweepFlag: boolean,
x: number,
y: number
) {
const curves = arcToCurves(
this.lastX,
this.lastY,
rx,
@ -610,7 +623,14 @@ class mxAbstractCanvas2D {
*
* Closes the current path.
*/
close(x1, y1, x2, y2, x3, y3) {
close(
x1: number,
y1: number,
x2: number,
y2: number,
x3: number,
y3: number
) {
this.addOp(this.closeOp);
}

153
packages/core/src/util/canvas/mxSvgCanvas2D.js → packages/core/src/util/canvas/mxSvgCanvas2D.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import mxUtils from '../mxUtils';
import { getAlignmentAsPoint, isNotNullish } from '../mxUtils';
import mxClient from '../../mxClient';
import {
ABSOLUTE_LINE_HEIGHT,
@ -35,6 +35,11 @@ import mxAbstractCanvas2D from './mxAbstractCanvas2D';
import { parseXml } from '../mxXmlUtils';
import { importNodeImplementation, isNode, write } from '../mxDomUtils';
import { htmlEntities, trim } from '../mxStringUtils';
import { AlignValue, ColorValue, DirectionValue } from '../../types';
type GradientMap = {
[k: string]: SVGLinearGradientElement;
};
// Activates workaround for gradient ID resolution if base tag is used.
const useAbsoluteIds =
@ -82,7 +87,7 @@ const useAbsoluteIds =
* Or set the respective attribute in the SVG element directly.
*/
class mxSvgCanvas2D extends mxAbstractCanvas2D {
constructor(root, styleEnabled) {
constructor(root: SVGElement, styleEnabled: boolean) {
super();
/**
@ -97,7 +102,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Local cache of gradients for quick lookups.
*/
this.gradients = [];
this.gradients = {};
/**
* Variable: defs
@ -153,31 +158,35 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
}
root: SVGElement;
gradients: GradientMap;
defs: SVGDefsElement | null = null;
styleEnabled = true;
/**
* Holds the current DOM node.
*/
// node: Element;
node = null;
node: SVGElement | null = null;
/**
* Specifies if plain text output should match the vertical HTML alignment.
* @default true.
*/
// matchHtmlAlignment: boolean;
matchHtmlAlignment = true;
/**
* Specifies if text output should be enabled.
* @default true
*/
// textEnabled: boolean;
textEnabled = true;
/**
* Specifies if use of foreignObject for HTML markup is allowed.
* @default true
*/
// foEnabled: boolean;
foEnabled = true;
/**
@ -185,101 +194,97 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* If this is set to `null` then no fallback text is added to the exported document.
* @default [Object]
*/
// foAltText: string;
foAltText = '[Object]';
/**
* Offset to be used for foreignObjects.
* @default 0
*/
// foOffset: number;
foOffset = 0;
/**
* Offset to be used for text elements.
* @default 0
*/
// textOffset: number;
textOffset = 0;
/**
* Offset to be used for image elements.
* @default 0
*/
// imageOffset: number;
imageOffset = 0;
/**
* Adds transparent paths for strokes.
* @default 0
*/
// strokeTolerance: number;
strokeTolerance = 0;
/**
* Minimum stroke width for output.
* @default 1
*/
// minStrokeWidth: number;
minStrokeWidth = 1;
/**
* Local counter for references in SVG export.
* @default 0
*/
// refCount: number;
refCount = 0;
/**
* Correction factor for {@link mxConstants.LINE_HEIGHT} in HTML output.
* @default 1
*/
// lineHeightCorrection: number;
lineHeightCorrection = 1;
/**
* Default value for active pointer events.
* @default all
*/
// pointerEventsValue: string;
pointerEventsValue = 'all';
/**
* Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
* @default 10.
*/
// fontMetricsPadding: number;
fontMetricsPadding = 10;
/**
* Specifies if offsetWidth and offsetHeight should be cached. This is used to speed up repaint of text in {@link updateText}.
* @default true
*/
// cacheOffsetSize: boolean;
cacheOffsetSize = true;
/**
* Updates existing DOM nodes for text rendering.
*/
static createCss = (
w,
h,
align,
valign,
wrap,
overflow,
clip,
bg,
border,
flex,
block,
s,
callback
w: number,
h: number,
align: AlignValue,
valign: string,
wrap: boolean,
overflow: string,
clip: boolean,
bg: ColorValue,
border: ColorValue,
flex: string,
block: string,
scale: number,
callback: (
dx: number,
dy: number,
flex: string,
item: string,
block: string,
ofl: string
) => void
) => {
let item = `box-sizing: border-box; font-size: 0; text-align: ${
align === ALIGN_LEFT ? 'left' : align === ALIGN_RIGHT ? 'right' : 'center'
}; `;
const pt = mxUtils.getAlignmentAsPoint(align, valign);
const pt = getAlignmentAsPoint(align, valign);
let ofl = 'overflow: hidden; ';
let fw = 'width: 1px; ';
let fh = 'height: 1px; ';
@ -311,11 +316,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let bgc = '';
if (bg != null) {
if (bg) {
bgc += `background-color: ${bg}; `;
}
if (border != null) {
if (border) {
bgc += `border: 1px solid ${border}; `;
}
@ -329,13 +334,13 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
block += `white-space: normal; word-wrap: ${WORD_WRAP}; `;
fw = `width: ${Math.round(w)}px; `;
if (ofl != '' && overflow !== 'fill') {
if (ofl !== '' && overflow !== 'fill') {
dy = 0;
}
} else {
block += 'white-space: nowrap; ';
if (ofl == '') {
if (ofl === '') {
dx = 0;
}
}
@ -346,9 +351,8 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
/**
* Rounds all numbers to 2 decimal points.
*/
// format(value: string): number;
format(value) {
return parseFloat(parseFloat(value).toFixed(2));
format(value: number) {
return parseFloat(value.toFixed(2));
}
/**
@ -357,7 +361,6 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* workaround for the fact that window.location.search is empty if there is
* no search string behind the question mark.
*/
// getBaseUrl(): string;
getBaseUrl() {
let { href } = window.location;
const hash = href.lastIndexOf('#');
@ -372,17 +375,15 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
/**
* Returns any offsets for rendering pixels.
*/
// reset(): void;
reset() {
super.reset();
this.gradients = [];
this.gradients = {};
}
/**
* Creates the optional style section.
*/
// createStyle(x?: any): HTMLElement;
createStyle(x) {
createStyle() {
const style = this.createElement('style');
style.setAttribute('type', 'text/css');
write(
@ -396,21 +397,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
/**
* Private helper function to create SVG elements
*/
// createElement(tagName: string, namespace?: string): HTMLElement;
createElement(tagName, namespace) {
if (this.root.ownerDocument.createElementNS != null) {
return this.root.ownerDocument.createElementNS(
namespace || NS_SVG,
tagName
);
}
const elt = this.root.ownerDocument.createElement(tagName);
if (namespace != null) {
elt.setAttribute('xmlns', namespace);
}
return elt;
createElement(tagName: string, namespace?: string) {
return this.root.ownerDocument.createElementNS(
namespace || NS_SVG,
tagName
) as SVGElement;
}
/**
@ -419,21 +410,21 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Returns the alternate text string for the given foreignObject.
*/
getAlternateText(
fo,
x,
y,
w,
h,
str,
align,
valign,
wrap,
fo: SVGForeignObjectElement,
x: number,
y: number,
w: number,
h: number,
str: Element | string,
align: AlignValue,
valign: string,
wrap: boolean,
format,
overflow,
clip,
overflow: boolean,
clip: boolean,
rotation
) {
return str != null ? this.foAltText : null;
return isNotNullish(str) ? this.foAltText : null;
}
/**
@ -448,8 +439,8 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
w,
h,
str,
align,
valign,
align: AlignValue,
valign: AlignValue,
wrap,
format,
overflow,
@ -473,7 +464,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
);
const s = this.state;
if (text != null && s.fontSize > 0) {
if (isNotNullish(text) && s.fontSize > 0) {
const dy = valign === ALIGN_TOP ? 1 : valign === ALIGN_BOTTOM ? 0 : 0.3;
const anchor =
align === ALIGN_RIGHT
@ -483,8 +474,8 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
: 'middle';
const alt = this.createElement('text');
alt.setAttribute('x', Math.round(x + s.dx));
alt.setAttribute('y', Math.round(y + s.dy + dy * s.fontSize));
alt.setAttribute('x', String(Math.round(x + s.dx)));
alt.setAttribute('y', String(Math.round(y + s.dy + dy * s.fontSize)));
alt.setAttribute('fill', s.fontColor || 'black');
alt.setAttribute('font-family', s.fontFamily);
alt.setAttribute('font-size', `${Math.round(s.fontSize)}px`);
@ -527,7 +518,13 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Private helper function to create SVG elements
*/
// createGradientId(start: string, end: string, alpha1: string, alpha2: string, direction: string): string;
createGradientId(start, end, alpha1, alpha2, direction) {
createGradientId(
start: string,
end: string,
alpha1: number,
alpha2: number,
direction: DirectionValue
) {
// Removes illegal characters from gradient ID
if (start.charAt(0) === '#') {
start = start.substring(1);

18
packages/core/src/util/datatypes/mxDictionary.ts
View File

@ -7,11 +7,11 @@
import mxObjectIdentity from './mxObjectIdentity';
type Dictionary = {
[key: string]: any;
type Dictionary<T, U> = {
[key: string]: U;
};
type Visitor = (key: any, value: any) => void;
type Visitor<T, U> = (key: string, value: U) => void;
/**
* Class: mxDictionary
@ -23,7 +23,7 @@ type Visitor = (key: any, value: any) => void;
*
* Constructs a new dictionary which allows object to be used as keys.
*/
class mxDictionary {
class mxDictionary<T, U> {
constructor() {
this.clear();
}
@ -33,7 +33,7 @@ class mxDictionary {
*
* Stores the (key, value) pairs in this dictionary.
*/
map: Dictionary = {};
map: Dictionary<T, U> = {};
/**
* Function: clear
@ -49,7 +49,7 @@ class mxDictionary {
*
* Returns the value for the given key.
*/
get(key: any) {
get(key: T) {
const id = mxObjectIdentity.get(key);
return this.map[id];
@ -61,7 +61,7 @@ class mxDictionary {
* Stores the value under the given key and returns the previous
* value for that key.
*/
put(key: any, value: any) {
put(key: T, value: U) {
const id = mxObjectIdentity.get(key);
const previous = this.map[id];
this.map[id] = value;
@ -75,7 +75,7 @@ class mxDictionary {
* Removes the value for the given key and returns the value that
* has been removed.
*/
remove(key: any) {
remove(key: T) {
const id = mxObjectIdentity.get(key);
const previous = this.map[id];
delete this.map[id];
@ -124,7 +124,7 @@ class mxDictionary {
*
* visitor - A function that takes the key and value as arguments.
*/
visit(visitor: Visitor) {
visit(visitor: Visitor<string, U>) {
for (const key in this.map) {
visitor(key, this.map[key]);
}

16
packages/core/src/util/datatypes/mxGeometry.ts
View File

@ -7,7 +7,7 @@
import mxPoint from './mxPoint';
import mxRectangle from './mxRectangle';
import mxUtils from '../mxUtils';
import mxUtils, { equalPoints, getRotatedPoint, toRadians } from '../mxUtils';
import { clone } from '../mxCloneUtils';
/**
@ -201,14 +201,14 @@ class mxGeometry extends mxRectangle {
* @param {mxPoint} cx that specifies the center of the rotation.
*/
rotate(angle: number, cx: mxPoint) {
const rad = mxUtils.toRadians(angle);
const rad = toRadians(angle);
const cos = Math.cos(rad);
const sin = Math.sin(rad);
// Rotates the geometry
if (!this.relative) {
const ct = new mxPoint(this.getCenterX(), this.getCenterY());
const pt = mxUtils.getRotatedPoint(ct, cos, sin, cx);
const pt = getRotatedPoint(ct, cos, sin, cx);
this.x = Math.round(pt.x - this.width / 2);
this.y = Math.round(pt.y - this.height / 2);
@ -216,14 +216,14 @@ class mxGeometry extends mxRectangle {
// Rotates the source point
if (this.sourcePoint) {
const pt = mxUtils.getRotatedPoint(this.sourcePoint, cos, sin, cx);
const pt = getRotatedPoint(this.sourcePoint, cos, sin, cx);
this.sourcePoint.x = Math.round(pt.x);
this.sourcePoint.y = Math.round(pt.y);
}
// Translates the target point
if (this.targetPoint) {
const pt = mxUtils.getRotatedPoint(this.targetPoint, cos, sin, cx);
const pt = getRotatedPoint(this.targetPoint, cos, sin, cx);
this.targetPoint.x = Math.round(pt.x);
this.targetPoint.y = Math.round(pt.y);
}
@ -232,7 +232,7 @@ class mxGeometry extends mxRectangle {
if (this.points) {
for (let i = 0; i < this.points.length; i += 1) {
if (this.points[i]) {
const pt = mxUtils.getRotatedPoint(this.points[i], cos, sin, cx);
const pt = getRotatedPoint(this.points[i], cos, sin, cx);
this.points[i].x = Math.round(pt.x);
this.points[i].y = Math.round(pt.y);
}
@ -339,7 +339,7 @@ class mxGeometry extends mxRectangle {
!!this.sourcePoint?.equals(geom.sourcePoint)) &&
((this.targetPoint === null && geom.targetPoint === null) ||
!!this.targetPoint?.equals(geom.targetPoint)) &&
mxUtils.equalPoints(this.points, geom.points) &&
equalPoints(this.points, geom.points) &&
((this.alternateBounds === null && geom.alternateBounds === null) ||
!!this.alternateBounds?.equals(geom.alternateBounds)) &&
((this.offset === null && geom.offset === null) ||
@ -348,7 +348,7 @@ class mxGeometry extends mxRectangle {
}
clone() {
return clone(this);
return clone(this) as mxGeometry;
}
}

49
packages/core/src/util/datatypes/mxObjectIdentity.ts
View File

@ -6,6 +6,19 @@
*/
import { getFunctionName } from '../mxStringUtils';
import { isNullish } from '../mxUtils';
const FIELD_NAME = 'mxObjectId';
type IdentityObject = {
[FIELD_NAME]?: string;
[k: string]: any;
};
type IdentityFunction = {
(): any;
[FIELD_NAME]?: string;
};
/**
* @class
@ -21,8 +34,7 @@ class mxObjectIdentity {
* Name of the field to be used to store the object ID. Default is
* <code>mxObjectId</code>.
*/
// static FIELD_NAME: string;
static FIELD_NAME = 'mxObjectId';
static FIELD_NAME = FIELD_NAME;
/**
* Current counter.
@ -30,37 +42,26 @@ class mxObjectIdentity {
static counter = 0;
/**
* Returns the ID for the given object or function or null if no object
* is specified.
* Returns the ID for the given object or function.
*/
static get(obj: any) {
if (obj) {
if (!(mxObjectIdentity.FIELD_NAME in obj)) {
if (typeof obj === 'object') {
const ctor = getFunctionName(obj.constructor);
obj[
mxObjectIdentity.FIELD_NAME
] = `${ctor}#${mxObjectIdentity.counter++}`;
} else if (typeof obj === 'function') {
obj[
mxObjectIdentity.FIELD_NAME
] = `Function#${mxObjectIdentity.counter++}`;
}
static get(obj: IdentityObject | IdentityFunction) {
if (isNullish(obj[FIELD_NAME])) {
if (typeof obj === 'object') {
const ctor = getFunctionName(obj.constructor);
obj[FIELD_NAME] = `${ctor}#${mxObjectIdentity.counter++}`;
} else if (typeof obj === 'function') {
obj[FIELD_NAME] = `Function#${mxObjectIdentity.counter++}`;
}
return obj[mxObjectIdentity.FIELD_NAME];
}
return null;
return obj[FIELD_NAME] as string;
}
/**
* Deletes the ID from the given object or function.
*/
static clear(obj: any) {
if (typeof obj === 'object' || typeof obj === 'function') {
delete obj[mxObjectIdentity.FIELD_NAME];
}
static clear(obj: IdentityObject | IdentityFunction) {
delete obj[FIELD_NAME];
}
}

2490
packages/core/src/util/mxUtils.js
View File

File diff suppressed because it is too large Load Diff

2415
packages/core/src/util/mxUtils.ts Normal file
View File

File diff suppressed because it is too large Load Diff

135
packages/core/src/util/mxXmlUtils.js
View File

@ -126,3 +126,138 @@ export const getViewXml = (graph, scale, cells, x0, y0) => {
return result;
};
/**
* Function: getXml
*
* Returns the XML content of the specified node. For Internet Explorer,
* all \r\n\t[\t]* are removed from the XML string and the remaining \r\n
* are replaced by \n. All \n are then replaced with linefeed, or &#xa; if
* no linefeed is defined.
*
* Parameters:
*
* node - DOM node to return the XML for.
* linefeed - Optional string that linefeeds are converted into. Default is
* &#xa;
*/
export const getXml = (node, linefeed) => {
let xml = '';
if (window.XMLSerializer != null) {
const xmlSerializer = new XMLSerializer();
xml = xmlSerializer.serializeToString(node);
} else if (node.xml != null) {
xml = node.xml
.replace(/\r\n\t[\t]*/g, '')
.replace(/>\r\n/g, '>')
.replace(/\r\n/g, '\n');
}
// Replaces linefeeds with HTML Entities.
linefeed = linefeed || '&#xa;';
xml = xml.replace(/\n/g, linefeed);
return xml;
};
/**
* Function: getPrettyXML
*
* Returns a pretty printed string that represents the XML tree for the
* given node. This method should only be used to print XML for reading,
* use <getXml> instead to obtain a string for processing.
*
* Parameters:
*
* node - DOM node to return the XML for.
* tab - Optional string that specifies the indentation for one level.
* Default is two spaces.
* indent - Optional string that represents the current indentation.
* Default is an empty string.
* newline - Option string that represents a linefeed. Default is '\n'.
*/
export const getPrettyXml = (node, tab, indent, newline, ns) => {
const result = [];
if (node != null) {
tab = tab != null ? tab : ' ';
indent = indent != null ? indent : '';
newline = newline != null ? newline : '\n';
if (node.namespaceURI != null && node.namespaceURI !== ns) {
ns = node.namespaceURI;
if (node.getAttribute('xmlns') == null) {
node.setAttribute('xmlns', node.namespaceURI);
}
}
if (node.nodeType === NODETYPE_DOCUMENT) {
result.push(
mxUtils.getPrettyXml(node.documentElement, tab, indent, newline, ns)
);
} else if (node.nodeType === NODETYPE_DOCUMENT_FRAGMENT) {
let tmp = node.firstChild;
if (tmp != null) {
while (tmp != null) {
result.push(mxUtils.getPrettyXml(tmp, tab, indent, newline, ns));
tmp = tmp.nextSibling;
}
}
} else if (node.nodeType === NODETYPE_COMMENT) {
const value = getTextContent(node);
if (value.length > 0) {
result.push(`${indent}<!--${value}-->${newline}`);
}
} else if (node.nodeType === NODETYPE_TEXT) {
const value = trim(getTextContent(node));
if (value.length > 0) {
result.push(indent + htmlEntities(value, false) + newline);
}
} else if (node.nodeType === NODETYPE_CDATA) {
const value = getTextContent(node);
if (value.length > 0) {
result.push(`${indent}<![CDATA[${value}]]${newline}`);
}
} else {
result.push(`${indent}<${node.nodeName}`);
// Creates the string with the node attributes
// and converts all HTML entities in the values
const attrs = node.attributes;
if (attrs != null) {
for (let i = 0; i < attrs.length; i += 1) {
const val = htmlEntities(attrs[i].value);
result.push(` ${attrs[i].nodeName}="${val}"`);
}
}
// Recursively creates the XML string for each child
// node and appends it here with an indentation
let tmp = node.firstChild;
if (tmp != null) {
result.push(`>${newline}`);
while (tmp != null) {
result.push(
mxUtils.getPrettyXml(tmp, tab, indent + tab, newline, ns)
);
tmp = tmp.nextSibling;
}
result.push(`${indent}</${node.nodeName}>${newline}`);
} else {
result.push(` />${newline}`);
}
}
}
return result.join('');
};

42
packages/core/src/util/network/mxUrlConverter.js → packages/core/src/util/network/mxUrlConverter.ts
View File

@ -21,7 +21,6 @@ class mxUrlConverter {
*
* Specifies if the converter is enabled. Default is true.
*/
// enabled: boolean;
enabled = true;
/**
@ -29,23 +28,20 @@ class mxUrlConverter {
*
* Specifies the base URL to be used as a prefix for relative URLs.
*/
// baseUrl: string;
baseUrl = null;
baseUrl: string | null = null;
/**
* Variable: baseDomain
*
* Specifies the base domain to be used as a prefix for absolute URLs.
*/
// baseDomain: string;
baseDomain = null;
baseDomain: string | null = null;
/**
* Function: updateBaseUrl
*
* Private helper function to update the base URL.
*/
// updateBaseUrl(): void;
updateBaseUrl() {
this.baseDomain = `${location.protocol}//${location.host}`;
this.baseUrl = this.baseDomain + location.pathname;
@ -62,7 +58,6 @@ class mxUrlConverter {
*
* Returns <enabled>.
*/
// isEnabled(): boolean;
isEnabled() {
return this.enabled;
}
@ -72,8 +67,7 @@ class mxUrlConverter {
*
* Sets <enabled>.
*/
// setEnabled(value: boolean): void;
setEnabled(value) {
setEnabled(value: boolean) {
this.enabled = value;
}
@ -82,7 +76,6 @@ class mxUrlConverter {
*
* Returns <baseUrl>.
*/
// getBaseUrl(): string;
getBaseUrl() {
return this.baseUrl;
}
@ -92,8 +85,7 @@ class mxUrlConverter {
*
* Sets <baseUrl>.
*/
// setBaseUrl(value: string): void;
setBaseUrl(value) {
setBaseUrl(value: string) {
this.baseUrl = value;
}
@ -102,7 +94,6 @@ class mxUrlConverter {
*
* Returns <baseDomain>.
*/
// getBaseDomain(): string;
getBaseDomain() {
return this.baseDomain;
}
@ -112,8 +103,7 @@ class mxUrlConverter {
*
* Sets <baseDomain>.
*/
// setBaseDomain(value: string): void;
setBaseDomain(value) {
setBaseDomain(value: string) {
this.baseDomain = value;
}
@ -122,15 +112,14 @@ class mxUrlConverter {
*
* Returns true if the given URL is relative.
*/
// isRelativeUrl(url: string): boolean;
isRelativeUrl(url) {
isRelativeUrl(url: string) {
return (
url != null &&
url.substring(0, 2) != '//' &&
url.substring(0, 7) != 'http://' &&
url.substring(0, 8) != 'https://' &&
url.substring(0, 10) != 'data:image' &&
url.substring(0, 7) != 'file://'
url &&
url.substring(0, 2) !== '//' &&
url.substring(0, 7) !== 'http://' &&
url.substring(0, 8) !== 'https://' &&
url.substring(0, 10) !== 'data:image' &&
url.substring(0, 7) !== 'file://'
);
}
@ -140,14 +129,13 @@ class mxUrlConverter {
* Converts the given URL to an absolute URL with protol and domain.
* Relative URLs are first converted to absolute URLs.
*/
// convert(url: string): string;
convert(url) {
convert(url: string) {
if (this.isEnabled() && this.isRelativeUrl(url)) {
if (this.getBaseUrl() == null) {
if (!this.getBaseUrl()) {
this.updateBaseUrl();
}
if (url.charAt(0) == '/') {
if (url.charAt(0) === '/') {
url = this.getBaseDomain() + url;
} else {
url = this.getBaseUrl() + url;

42
packages/core/src/util/undo/mxUndoableEdit.ts
View File

@ -9,6 +9,8 @@ import mxEvent from '../event/mxEvent';
import mxEventObject from '../event/mxEventObject';
import mxEventSource from '../event/mxEventSource';
import type { UndoableChange } from '../../types';
/**
* Class: mxUndoableEdit
*
@ -75,7 +77,7 @@ class mxUndoableEdit {
* expected to either have an undo and redo function, or an execute
* function. Default is an empty array.
*/
changes: any[] = [];
changes: UndoableChange[] = [];
/**
* Variable: significant
@ -83,32 +85,28 @@ class mxUndoableEdit {
* Specifies if the undoable change is significant.
* Default is true.
*/
// significant: boolean;
significant: boolean = true;
significant = true;
/**
* Variable: undone
*
* Specifies if this edit has been undone. Default is false.
*/
// undone: boolean;
undone: boolean = false;
undone = false;
/**
* Variable: redone
*
* Specifies if this edit has been redone. Default is false.
*/
// redone: boolean;
redone: boolean = false;
redone = false;
/**
* Function: isEmpty
*
* Returns true if the this edit contains no changes.
*/
// isEmpty(): boolean;
isEmpty(): boolean {
isEmpty() {
return this.changes.length === 0;
}
@ -117,8 +115,7 @@ class mxUndoableEdit {
*
* Returns <significant>.
*/
// isSignificant(): boolean;
isSignificant(): boolean {
isSignificant() {
return this.significant;
}
@ -128,9 +125,8 @@ class mxUndoableEdit {
* Adds the specified change to this edit. The change is an object that is
* expected to either have an undo and redo, or an execute function.
*/
// add(change: mxUndoableChange): void;
add(change: any): void {
// FIXME!!!
add(change: UndoableChange) {
this.changes.push(change);
}
@ -140,8 +136,7 @@ class mxUndoableEdit {
* Hook to notify any listeners of the changes after an <undo> or <redo>
* has been carried out. This implementation is empty.
*/
// notify(): void;
notify(): void {}
notify() {}
/**
* Function: die
@ -149,16 +144,14 @@ class mxUndoableEdit {
* Hook to free resources after the edit has been removed from the command
* history. This implementation is empty.
*/
// die(): void;
die(): void {}
die() {}
/**
* Function: undo
*
* Undoes all changes in this edit.
*/
// undo(): void;
undo(): void {
undo() {
if (!this.undone) {
this.source.fireEvent(new mxEventObject(mxEvent.START_EDIT));
const count = this.changes.length;
@ -166,9 +159,9 @@ class mxUndoableEdit {
for (let i = count - 1; i >= 0; i--) {
const change = this.changes[i];
if (change.execute != null) {
if (change.execute) {
change.execute();
} else if (change.undo != null) {
} else if (change.undo) {
change.undo();
}
@ -182,6 +175,7 @@ class mxUndoableEdit {
this.redone = false;
this.source.fireEvent(new mxEventObject(mxEvent.END_EDIT));
}
this.notify();
}
@ -190,8 +184,7 @@ class mxUndoableEdit {
*
* Redoes all changes in this edit.
*/
// redo(): void;
redo(): void {
redo() {
if (!this.redone) {
this.source.fireEvent(new mxEventObject(mxEvent.START_EDIT));
const count = this.changes.length;
@ -215,6 +208,7 @@ class mxUndoableEdit {
this.redone = true;
this.source.fireEvent(new mxEventObject(mxEvent.END_EDIT));
}
this.notify();
}
}

344
packages/core/src/view/cell/mxCell.ts
View File

@ -11,6 +11,9 @@ import mxCellOverlay from './mxCellOverlay';
import { clone } from '../../util/mxCloneUtils';
import mxPoint from '../../util/datatypes/mxPoint';
import mxCellPath from './mxCellPath';
import { isNotNullish } from '../../util/mxUtils';
import type { FilterFunction } from '../../types';
/**
* Cells are the elements of the graph model. They represent the state
@ -67,109 +70,95 @@ class mxCell {
this.setGeometry(geometry);
this.setStyle(style);
if (this.onInit != null) {
if (this.onInit) {
this.onInit();
}
}
// TODO: Document me!!!
getChildren(): mxCell[] {
return this.children || [];
return this.children;
}
// TODO: Document me!
// used by invalidate() of mxGraphView
invalidating: boolean = false;
onInit: Function | null = null;
onInit: (() => void) | null = null;
// used by addCellOverlay() of mxGraph
overlays: mxCellOverlay[] | null = null;
overlays: mxCellOverlay[] = [];
/**
* Holds the Id. Default is null.
*/
// id: string;
id: string | null = null;
/**
* Holds the user object. Default is null.
*/
// value: any;
value: any = null;
/**
* Holds the <mxGeometry>. Default is null.
*/
// geometry: mxGeometry;
geometry: mxGeometry | null = null;
/**
* Holds the style as a string of the form [(stylename|key=value);]. Default is
* null.
*/
// style: string;
style: string | null = null;
/**
* Specifies whether the cell is a vertex. Default is false.
*/
// vertex: boolean;
vertex: boolean = false;
/**
* Specifies whether the cell is an edge. Default is false.
*/
// edge: boolean;
edge: boolean = false;
/**
* Specifies whether the cell is connectable. Default is true.
*/
// connectable: boolean;
connectable: boolean = true;
/**
* Specifies whether the cell is visible. Default is true.
*/
// visible: boolean;
visible: boolean = true;
/**
* Specifies whether the cell is collapsed. Default is false.
*/
// collapsed: boolean;
collapsed: boolean = false;
/**
* Reference to the parent cell.
*/
// parent: mxCell;
parent: mxCell | null = null;
/**
* Reference to the source terminal.
*/
// source: mxCell;
source: mxCell | null = null;
/**
* Reference to the target terminal.
*/
// target: mxCell;
target: mxCell | null = null;
/**
* Holds the child cells.
*/
// children: Array<mxCell>;
children: mxCell[] | null = null;
children: mxCell[] = [];
/**
* Holds the edges.
*/
// edges: Array<mxCell>;
edges: mxCell[] | null = null;
edges: mxCell[] = [];
/**
* List of members that should not be cloned inside <clone>. This field is
@ -178,7 +167,6 @@ class mxCell {
* to mark transient fields since transient modifiers are not supported by
* the language.
*/
// mxTransient: Array<string>;
mxTransient: string[] = [
'id',
'value',
@ -192,16 +180,14 @@ class mxCell {
/**
* Returns the Id of the cell as a string.
*/
// getId(): string;
getId(): string | null {
getId() {
return this.id;
}
/**
* Sets the Id of the cell to the given string.
*/
// setId(id: string): void;
setId(id: string): void {
setId(id: string) {
this.id = id;
}
@ -209,8 +195,7 @@ class mxCell {
* Returns the user object of the cell. The user
* object is stored in <value>.
*/
// getValue(): any;
getValue(): any {
getValue() {
return this.value;
}
@ -218,8 +203,7 @@ class mxCell {
* Sets the user object of the cell. The user object
* is stored in <value>.
*/
// setValue(value: any): void;
setValue(value: number): void {
setValue(value: any) {
this.value = value;
}
@ -229,8 +213,7 @@ class mxCell {
* replaces the user object with the given value and
* returns the old user object.
*/
// valueChanged(newValue: any): any;
valueChanged(newValue: any): any {
valueChanged(newValue: any) {
const previous = this.getValue();
this.setValue(newValue);
return previous;
@ -239,40 +222,35 @@ class mxCell {
/**
* Returns the <mxGeometry> that describes the <geometry>.
*/
// getGeometry(): mxGeometry;
getGeometry(): mxGeometry | null {
getGeometry() {
return this.geometry;
}
/**
* Sets the <mxGeometry> to be used as the <geometry>.
*/
// setGeometry(geometry: mxGeometry): void;
setGeometry(geometry: mxGeometry | null): void {
setGeometry(geometry: mxGeometry | null) {
this.geometry = geometry;
}
/**
* Returns a string that describes the <style>.
*/
// getStyle(): string;
getStyle(): any {
getStyle() {
return this.style;
}
/**
* Sets the string to be used as the <style>.
*/
// setStyle(style: string): void;
setStyle(style: string | null): void {
setStyle(style: string | null) {
this.style = style;
}
/**
* Returns true if the cell is a vertex.
*/
// isVertex(): boolean;
isVertex(): boolean {
isVertex() {
return this.vertex;
}
@ -284,7 +262,6 @@ class mxCell {
*
* @param vertex Boolean that specifies if the cell is a vertex.
*/
// setVertex(vertex: boolean): void;
setVertex(vertex: boolean) {
this.vertex = vertex;
}
@ -292,8 +269,7 @@ class mxCell {
/**
* Returns true if the cell is an edge.
*/
// isEdge(): boolean;
isEdge(): boolean {
isEdge() {
return this.edge;
}
@ -305,7 +281,6 @@ class mxCell {
*
* @param edge Boolean that specifies if the cell is an edge.
*/
// setEdge(edge: boolean): void;
setEdge(edge: boolean) {
this.edge = edge;
}
@ -313,8 +288,7 @@ class mxCell {
/**
* Returns true if the cell is connectable.
*/
// isConnectable(): boolean;
isConnectable(): boolean {
isConnectable() {
return this.connectable;
}
@ -325,7 +299,6 @@ class mxCell {
*
* @param connectable Boolean that specifies the new connectable state.
*/
// setConnectable(connectable: boolean): void;
setConnectable(connectable: boolean) {
this.connectable = connectable;
}
@ -333,8 +306,7 @@ class mxCell {
/**
* Returns true if the cell is visibile.
*/
// isVisible(): boolean;
isVisible(): boolean {
isVisible() {
return this.visible;
}
@ -345,16 +317,14 @@ class mxCell {
*
* @param visible Boolean that specifies the new visible state.
*/
// setVisible(visible: boolean): void;
setVisible(visible: boolean): void {
setVisible(visible: boolean) {
this.visible = visible;
}
/**
* Returns true if the cell is collapsed.
*/
// isCollapsed(): boolean;
isCollapsed(): boolean {
isCollapsed() {
return this.collapsed;
}
@ -365,16 +335,14 @@ class mxCell {
*
* @param collapsed Boolean that specifies the new collapsed state.
*/
// setCollapsed(collapsed: boolean): void;
setCollapsed(collapsed: boolean): void {
setCollapsed(collapsed: boolean) {
this.collapsed = collapsed;
}
/**
* Returns the cell's parent.
*/
// getParent(): mxCell;
getParent(): mxCell | null {
getParent() {
return this.parent;
}
@ -385,8 +353,7 @@ class mxCell {
*
* @param parent<mxCell> that represents the new parent.
*/
// setParent(parent: mxCell): void;
setParent(parent: mxCell | null): void {
setParent(parent: mxCell | null) {
this.parent = parent;
}
@ -398,8 +365,7 @@ class mxCell {
* @param source Boolean that specifies if the source terminal should be
* returned.
*/
// getTerminal(source: boolean): mxCell;
getTerminal(source: boolean = false): mxCell | null {
getTerminal(source: boolean = false) {
return source ? this.source : this.target;
}
@ -410,22 +376,21 @@ class mxCell {
* @param {boolean} isSource boolean that specifies if the source or target terminal
* should be set.
*/
// setTerminal(terminal: mxCell, isSource: boolean): mxCell;
setTerminal(terminal: mxCell | null, isSource: boolean): mxCell | null {
setTerminal(terminal: mxCell | null, isSource: boolean) {
if (isSource) {
this.source = terminal;
} else {
this.target = terminal;
}
return terminal;
}
/**
* Returns the number of child cells.
*/
// getChildCount(): number;
getChildCount(): number {
return this.children == null ? 0 : this.children.length;
getChildCount() {
return this.children.length;
}
/**
@ -435,9 +400,8 @@ class mxCell {
*
* @param childChild whose index should be returned.
*/
// getIndex(child: mxCell): number;
getIndex(child: mxCell | null): number {
if (child === null || !this.children) return -1;
getIndex(child: mxCell | null) {
if (child === null) return -1;
return this.children.indexOf(child);
}
@ -448,9 +412,8 @@ class mxCell {
*
* @param indexInteger that specifies the child to be returned.
*/
// getChildAt(index: number): mxCell;
getChildAt(index: number): mxCell | null {
return this.children == null ? null : this.children[index];
getChildAt(index: number) {
return this.children[index];
}
/**
@ -465,27 +428,20 @@ class mxCell {
* @param indexOptional integer that specifies the index at which the child
* should be inserted into the child array.
*/
// insert(child: mxCell, index: number): mxCell;
insert(child: mxCell | null = null, index: number | null = null) {
if (child != null) {
if (index == null) {
index = this.getChildCount();
insert(child: mxCell, index?: number) {
if (index === undefined) {
index = this.getChildCount();
if (child.getParent() === this) {
index--;
}
}
child.removeFromParent();
child.setParent(this);
if (this.children == null) {
this.children = [];
this.children.push(child);
} else {
this.children.splice(index, 0, child);
if (child.getParent() === this) {
index--;
}
}
child.removeFromParent();
child.setParent(this);
this.children.splice(index, 0, child);
return child;
}
@ -499,25 +455,25 @@ class mxCell {
* @param indexInteger that specifies the index of the child to be
* removed.
*/
// remove(index: number): mxCell;
remove(index: number): mxCell | null {
remove(index: number) {
let child = null;
if (this.children != null && index >= 0) {
if (index >= 0) {
child = this.getChildAt(index);
if (child != null) {
if (child) {
this.children.splice(index, 1);
child.setParent(null);
}
}
return child;
}
/**
* Removes the cell from its parent.
*/
// removeFromParent(): mxCell;
removeFromParent(): void {
if (this.parent != null) {
removeFromParent() {
if (this.parent) {
const index = this.parent.getIndex(this);
this.parent.remove(index);
}
@ -526,9 +482,8 @@ class mxCell {
/**
* Returns the number of edges in the edge array.
*/
// getEdgeCount(): number;
getEdgeCount(): number {
return this.edges == null ? 0 : this.edges.length;
getEdgeCount() {
return this.edges.length;
}
/**
@ -538,9 +493,7 @@ class mxCell {
*
* @param edge<mxCell> whose index in <edges> should be returned.
*/
// getEdgeIndex(edge: mxCell): number;
getEdgeIndex(edge: mxCell): number {
if (!this.edges) return -1;
getEdgeIndex(edge: mxCell) {
return this.edges.indexOf(edge);
}
@ -552,8 +505,8 @@ class mxCell {
* @param indexInteger that specifies the index of the edge to be returned.
*/
// getEdgeAt(index: number): mxCell;
getEdgeAt(index: number): mxCell | null {
return this.edges == null ? null : this.edges[index];
getEdgeAt(index: number) {
return this.edges[index];
}
/**
@ -565,23 +518,18 @@ class mxCell {
* @param edge <mxCell> to be inserted into the edge array.
* @param isOutgoing Boolean that specifies if the edge is outgoing.
*/
// insertEdge(edge: mxCell, isOutgoing: boolean): mxCell;
insertEdge(edge: mxCell | null, isOutgoing: boolean) {
if (edge != null) {
edge.removeFromTerminal(isOutgoing);
edge.setTerminal(this, isOutgoing);
insertEdge(edge: mxCell, isOutgoing: boolean = false) {
edge.removeFromTerminal(isOutgoing);
edge.setTerminal(this, isOutgoing);
if (
this.edges == null ||
edge.getTerminal(!isOutgoing) !== this ||
this.edges.indexOf(edge) < 0
) {
if (this.edges == null) {
this.edges = [];
}
this.edges.push(edge);
}
if (
this.edges.length === 0 ||
edge.getTerminal(!isOutgoing) !== this ||
this.edges.indexOf(edge) < 0
) {
this.edges.push(edge);
}
return edge;
}
@ -594,18 +542,17 @@ class mxCell {
* @param edge<mxCell> to be removed from the edge array.
* @param isOutgoing Boolean that specifies if the edge is outgoing.
*/
// removeEdge(edge: mxCell, isOutgoing: boolean): mxCell;
removeEdge(edge: mxCell | null, isOutgoing: boolean = false): mxCell | null {
if (edge != null) {
if (edge.getTerminal(!isOutgoing) !== this && this.edges != null) {
const index = this.getEdgeIndex(edge);
removeEdge(edge: mxCell, isOutgoing: boolean = false) {
if (edge.getTerminal(!isOutgoing) !== this && this.edges.length > 0) {
const index = this.getEdgeIndex(edge);
if (index >= 0) {
this.edges.splice(index, 1);
}
if (index >= 0) {
this.edges.splice(index, 1);
}
edge.setTerminal(null, isOutgoing);
}
edge.setTerminal(null, isOutgoing);
return edge;
}
@ -616,10 +563,10 @@ class mxCell {
*
* @param isSource Boolean that specifies if the edge should be removed from its source or target terminal.
*/
// removeFromTerminal(isSource: boolean): mxCell;
removeFromTerminal(isSource: boolean): void {
removeFromTerminal(isSource: boolean) {
const terminal = this.getTerminal(isSource);
if (terminal != null) {
if (terminal) {
terminal.removeEdge(this, isSource);
}
}
@ -632,14 +579,14 @@ class mxCell {
*
* @param nameName nameName of the attribute.
*/
// hasAttribute(name: string): boolean;
hasAttribute(name: string): boolean {
hasAttribute(name: string) {
const userObject = this.getValue();
return (
userObject != null &&
isNotNullish(userObject) &&
(userObject.nodeType === NODETYPE_ELEMENT && userObject.hasAttribute
? userObject.hasAttribute(name)
: userObject.getAttribute(name) != null)
: isNotNullish(userObject.getAttribute(name)))
);
}
@ -653,14 +600,14 @@ class mxCell {
* @param defaultValueOptional default value to use if the attribute has no
* value.
*/
// getAttribute(name: string, defaultValue: any): any;
getAttribute(name: string, defaultValue: any): any {
getAttribute(name: string, defaultValue?: any) {
const userObject = this.getValue();
const val =
userObject != null && userObject.nodeType === NODETYPE_ELEMENT
isNotNullish(userObject) && userObject.nodeType === NODETYPE_ELEMENT
? userObject.getAttribute(name)
: null;
return val != null ? val : defaultValue;
return val ? val : defaultValue;
}
/**
@ -671,10 +618,10 @@ class mxCell {
* @param nameName of the attribute whose value should be set.
* @param valueNew value of the attribute.
*/
// setAttribute(name: string, value: any): void;
setAttribute(name: string, value: any): void {
setAttribute(name: string, value: any) {
const userObject = this.getValue();
if (userObject != null && userObject.nodeType === NODETYPE_ELEMENT) {
if (isNotNullish(userObject) && userObject.nodeType === NODETYPE_ELEMENT) {
userObject.setAttribute(name, value);
}
}
@ -684,7 +631,6 @@ class mxCell {
* the user object. All fields in <mxTransient> are ignored
* during the cloning.
*/
// clone(): mxCell;
clone(): mxCell {
const c = clone(this, this.mxTransient);
c.setValue(this.cloneValue());
@ -694,13 +640,12 @@ class mxCell {
/**
* Returns a clone of the cell's user object.
*/
// cloneValue(): any;
cloneValue(): any {
cloneValue() {
let value = this.getValue();
if (value != null) {
if (isNotNullish(value)) {
if (typeof value.clone === 'function') {
value = value.clone();
} else if (value.nodeType != null) {
} else if (isNotNullish(value.nodeType)) {
value = value.cloneNode(true);
}
}
@ -712,16 +657,15 @@ class mxCell {
*
* @param {mxCell} cell2 that specifies the second cell in the tree.
*/
// getNearestCommonAncestor(cell1: mxCell, cell2: mxCell): mxCell;
getNearestCommonAncestor(cell2: mxCell | null): mxCell | null {
getNearestCommonAncestor(cell2: mxCell) {
// Creates the cell path for the second cell
let path = mxCellPath.create(<mxCell>cell2);
let path = mxCellPath.create(cell2);
if (path != null && path.length > 0) {
if (path.length > 0) {
// Bubbles through the ancestors of the first
// cell to find the nearest common ancestor.
let cell: mxCell | null = this;
let current: string | null = mxCellPath.create(<mxCell>cell);
let current: string | null = mxCellPath.create(cell);
// Inverts arguments
if (path.length < current.length) {
@ -731,18 +675,15 @@ class mxCell {
path = tmp;
}
while (cell != null) {
const parent = <mxCell>cell.getParent();
while (cell && current) {
const parent: mxCell | null = cell.getParent();
// Checks if the cell path is equal to the beginning of the given cell path
if (
path.indexOf(current + mxCellPath.PATH_SEPARATOR) === 0 &&
parent != null
) {
if (path.indexOf(current + mxCellPath.PATH_SEPARATOR) === 0 && parent) {
return cell;
}
current = mxCellPath.getParentPath(<string>current);
current = mxCellPath.getParentPath(current);
cell = parent;
}
}
@ -756,18 +697,17 @@ class mxCell {
*
* @param {mxCell} child that specifies the child.
*/
// isAncestor(parent: mxCell, child: mxCell): boolean;
isAncestor(child: mxCell | null): boolean {
while (child != null && child !== this) {
child = <mxCell>child.getParent();
isAncestor(child: mxCell | null) {
while (child && child !== this) {
child = child.getParent();
}
return child === this;
}
/**
* Returns the child vertices of the given parent.
*/
// getChildVertices(parent: mxCell): Array<mxCell>;
getChildVertices() {
return this.getChildCells(true, false);
}
@ -775,8 +715,7 @@ class mxCell {
/**
* Returns the child edges of the given parent.
*/
// getChildEdges(parent: mxCell): Array<mxCell>;
getChildEdges(): mxCell[] {
getChildEdges() {
return this.getChildCells(false, true);
}
@ -789,13 +728,12 @@ class mxCell {
* @param edges Boolean indicating if child edges should be returned.
* Default is false.
*/
// getChildCells(parent: mxCell, vertices: boolean, edges: boolean): Array<mxCell>;
getChildCells(vertices: boolean = false, edges: boolean = false): mxCell[] {
getChildCells(vertices: boolean = false, edges: boolean = false) {
const childCount = this.getChildCount();
const result = [];
for (let i = 0; i < childCount; i += 1) {
const child = <mxCell>this.getChildAt(i);
const child = this.getChildAt(i);
if (
(!edges && !vertices) ||
@ -805,6 +743,7 @@ class mxCell {
result.push(child);
}
}
return result;
}
@ -816,11 +755,7 @@ class mxCell {
* incoming edges should be returned.
* @param {mxCell} ignoredEdge that represents an edge to be ignored.
*/
// getDirectedEdgeCount(cell: mxCell, outgoing: boolean, ignoredEdge: boolean): number;
getDirectedEdgeCount(
outgoing: boolean,
ignoredEdge: mxCell | null = null
): number {
getDirectedEdgeCount(outgoing: boolean, ignoredEdge: mxCell | null = null) {
let count = 0;
const edgeCount = this.getEdgeCount();
@ -830,13 +765,13 @@ class mxCell {
count += 1;
}
}
return count;
}
/**
* Returns all edges of the given cell without loops.
*/
// getConnections(cell: mxCell): Array<mxCell>;
getConnections() {
return this.getEdges(true, true, false);
}
@ -844,16 +779,14 @@ class mxCell {
/**
* Returns the incoming edges of the given cell without loops.
*/
// getIncomingEdges(cell: mxCell): Array<mxCell>;
getIncomingEdges(): mxCell[] {
getIncomingEdges() {
return this.getEdges(true, false, false);
}
/**
* Returns the outgoing edges of the given cell without loops.
*/
// getOutgoingEdges(cell: mxCell): Array<mxCell>;
getOutgoingEdges(): mxCell[] {
getOutgoingEdges() {
return this.getEdges(false, true, false);
}
@ -870,7 +803,6 @@ class mxCell {
* @param includeLoops Optional boolean that specifies if loops should be returned.
* Default is true.
*/
// getEdges(cell: mxCell, incoming?: boolean, outgoing?: boolean, includeLoops?: boolean): Array<mxCell>;
getEdges(
incoming: boolean = true,
outgoing: boolean = true,
@ -880,7 +812,7 @@ class mxCell {
const result = [];
for (let i = 0; i < edgeCount; i += 1) {
const edge = <mxCell>this.getEdgeAt(i);
const edge = this.getEdgeAt(i);
const source = edge.getTerminal(true);
const target = edge.getTerminal(false);
@ -900,24 +832,23 @@ class mxCell {
* Returns the absolute, accumulated origin for the children inside the
* given parent as an {@link mxPoint}.
*/
// getOrigin(cell: mxCell): mxPoint;
getOrigin(): mxPoint {
let result = null;
getOrigin() {
let result = new mxPoint();
const parent = this.getParent();
if (this != null && this.getParent()) {
result = (<mxCell>this.getParent()).getOrigin();
if (parent) {
result = parent.getOrigin();
if (!this.isEdge()) {
const geo = this.getGeometry();
if (geo != null) {
if (geo) {
result.x += geo.x;
result.y += geo.y;
}
}
} else {
result = new mxPoint();
}
return result;
}
@ -925,7 +856,7 @@ class mxCell {
* Returns all descendants of the given cell and the cell itself in an array.
*/
// getDescendants(parent: mxCell): Array<mxCell>;
getDescendants(): mxCell[] {
getDescendants() {
return this.filterDescendants(null);
}
@ -948,26 +879,20 @@ class mxCell {
* @param filter JavaScript function that takes an {@link mxCell} as an argument
* and returns a boolean.
*/
// filterDescendants(filter: (...args: any) => boolean, parent?: mxCell): Array<mxCell>;
filterDescendants(filter: Function | null): mxCell[] {
let parent = this;
filterDescendants(filter: FilterFunction | null) {
// Creates a new array for storing the result
let result: mxCell[] = [];
// Recursion starts at the root of the model
parent = parent || this.getRoot();
// Checks if the filter returns true for the cell
// and adds it to the result array
if (filter == null || filter(parent)) {
result.push(parent);
if (filter === null || filter(this)) {
result.push(this);
}
// Visits the children of the cell
const childCount = parent.getChildCount();
const childCount = this.getChildCount();
for (let i = 0; i < childCount; i += 1) {
const child = <mxCell>parent.getChildAt(i);
const child = this.getChildAt(i);
result = result.concat(child.filterDescendants(filter));
}
@ -977,18 +902,17 @@ class mxCell {
/**
* Returns the root of the model or the topmost parent of the given cell.
*/
// getRoot(cell?: mxCell): mxCell;
getRoot(): mxCell {
let root: mxCell = this;
let cell: mxCell = this;
getRoot() {
let root = null;
let cell: mxCell | null = this;
while (cell != null) {
while (cell) {
root = cell;
cell = <mxCell>cell.getParent();
cell = cell.getParent();
}
return root;
}
}
export default mxCell;
// import('../../serialization/mxCellCodec');

53
packages/core/src/view/cell/mxCellPath.ts
View File

@ -18,7 +18,6 @@ class mxCellPath {
/**
* Defines the separator between the path components. Default is ".".
*/
// static PATH_SEPARATOR: string;
static PATH_SEPARATOR = '.';
/**
@ -30,20 +29,16 @@ class mxCellPath {
*
* cell - Cell whose path should be returned.
*/
// static create(cell: mxCell): string;
static create(cell: mxCell): string {
let result = '';
let parent = cell.getParent();
if (cell != null) {
let parent = cell.getParent();
while (parent) {
const index = parent.getIndex(cell);
result = index + mxCellPath.PATH_SEPARATOR + result;
while (parent != null) {
const index = parent.getIndex(cell);
result = index + mxCellPath.PATH_SEPARATOR + result;
cell = parent;
parent = cell.getParent();
}
cell = parent;
parent = cell.getParent();
}
// Remove trailing separator
@ -62,18 +57,16 @@ class mxCellPath {
*
* path - Path whose parent path should be returned.
*/
// static getParentPath(path: string): string;
static getParentPath(path: string): string | null {
if (path != null) {
const index = path.lastIndexOf(mxCellPath.PATH_SEPARATOR);
static getParentPath(path: string) {
const index = path.lastIndexOf(mxCellPath.PATH_SEPARATOR);
if (index >= 0) {
return path.substring(0, index);
}
if (path.length > 0) {
return '';
}
if (index >= 0) {
return path.substring(0, index);
}
if (path.length > 0) {
return '';
}
return null;
}
@ -86,15 +79,14 @@ class mxCellPath {
* root - Root cell of the path to be resolved.
* path - String that defines the path.
*/
// static resolve(root: string, path: string): string;
static resolve(root: mxCell, path: string): mxCell | null {
let parent: mxCell | null | undefined = root;
if (path != null) {
const tokens = path.split(mxCellPath.PATH_SEPARATOR);
for (let i = 0; i < tokens.length; i += 1) {
parent = parent?.getChildAt(parseInt(tokens[i])) || null;
}
static resolve(root: mxCell, path: string) {
let parent: mxCell | null = root;
const tokens = path.split(mxCellPath.PATH_SEPARATOR);
for (let i = 0; i < tokens.length; i += 1) {
parent = parent.getChildAt(parseInt(tokens[i]));
}
return parent;
}
@ -102,8 +94,7 @@ class mxCellPath {
* Compares the given cell paths and returns -1 if p1 is smaller, 0 if
* p1 is equal and 1 if p1 is greater than p2.
*/
// static compare(p1: string, p2: string): number;
static compare(p1: string, p2: string): number {
static compare(p1: string[], p2: string[]) {
const min = Math.min(p1.length, p2.length);
let comp = 0;

83
packages/core/src/view/cell/mxCellRenderer.ts
View File

@ -138,7 +138,6 @@ class mxCellRenderer {
*
* Defines the default shape for edges. Default is <mxConnector>.
*/
// defaultEdgeShape: mxConnector;
defaultEdgeShape: typeof mxShape = mxConnector;
/**
@ -146,7 +145,6 @@ class mxCellRenderer {
*
* Defines the default shape for vertices. Default is <mxRectangleShape>.
*/
// defaultVertexShape: mxRectangleShape;
defaultVertexShape: typeof mxRectangleShape = mxRectangleShape;
/**
@ -154,7 +152,6 @@ class mxCellRenderer {
*
* Defines the default shape for labels. Default is <mxText>.
*/
// defaultTextShape: mxText;
defaultTextShape: typeof mxText = mxText;
/**
@ -163,8 +160,7 @@ class mxCellRenderer {
* Specifies if the folding icon should ignore the horizontal
* orientation of a swimlane. Default is true.
*/
// legacyControlPosition: boolean;
legacyControlPosition: boolean = true;
legacyControlPosition = true;
/**
* Variable: legacySpacing
@ -172,24 +168,21 @@ class mxCellRenderer {
* Specifies if spacing and label position should be ignored if overflow is
* fill or width. Default is true for backwards compatiblity.
*/
// legacySpacing: boolean;
legacySpacing: boolean = true;
legacySpacing = true;
/**
* Variable: antiAlias
*
* Anti-aliasing option for new shapes. Default is true.
*/
// antiAlias: boolean;
antiAlias: boolean = true;
antiAlias = true;
/**
* Variable: minSvgStrokeWidth
*
* Minimum stroke width for SVG output.
*/
// minSvgStrokeWidth: number;
minSvgStrokeWidth: number = 1;
minSvgStrokeWidth = 1;
/**
* Variable: forceControlClickHandler
@ -197,8 +190,7 @@ class mxCellRenderer {
* Specifies if the enabled state of the graph should be ignored in the control
* click handler (to allow folding in disabled graphs). Default is false.
*/
// forceControlClickHandler: boolean;
forceControlClickHandler: boolean = false;
forceControlClickHandler = false;
/**
* Registers the given constructor under the specified key in this instance of the renderer.
@ -210,7 +202,6 @@ class mxCellRenderer {
* @param key the shape name.
* @param shape constructor of the {@link mxShape} subclass.
*/
// static registerShape(key: string, shape: new (...args: any) => mxShape): void;
static registerShape(key: string, shape: typeof mxShape) {
mxCellRenderer.defaultShapes[key] = shape;
}
@ -225,11 +216,12 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be initialized.
*/
// initializeShape(state: mxCellState): void;
initializeShape(state: mxCellState) {
(<mxShape>state.shape).dialect = state.view.graph.dialect;
this.configureShape(state);
(<mxShape>state.shape).init(state.view.getDrawPane());
if (state.shape) {
state.shape.dialect = state.view.graph.dialect;
this.configureShape(state);
state.shape.init(state.view.getDrawPane());
}
}
/**
@ -241,21 +233,21 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be created.
*/
// createShape(state: mxCellState): mxShape;
createShape(state: mxCellState): mxShape | null {
let shape = null;
if (state.style != null) {
if (state.style) {
// Checks if there is a stencil for the name and creates
// a shape instance for the stencil if one exists
const stencil = mxStencilRegistry.getStencil(state.style[STYLE_SHAPE]);
if (stencil != null) {
if (stencil) {
shape = new mxShape(stencil);
} else {
const ctor = this.getShapeConstructor(state);
shape = new ctor();
}
}
return shape;
}
@ -268,12 +260,12 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the indicator shape should be created.
*/
// createIndicatorShape(state: mxCellState): void;
createIndicatorShape(state: mxCellState): void {
// @ts-ignore
state.shape.indicatorShape = this.getShape(
<string>state.view.graph.getIndicatorShape(state)
);
createIndicatorShape(state: mxCellState) {
if (state.shape) {
state.shape.indicatorShape = this.getShape(
state.view.graph.getIndicatorShape(state)
);
}
}
/**
@ -281,10 +273,8 @@ class mxCellRenderer {
*
* Returns the shape for the given name from <defaultShapes>.
*/
// getShape(name: string): mxShape;
getShape(name: string): typeof mxShape {
// @ts-ignore
return name != null ? mxCellRenderer.defaultShapes[name] : null;
getShape(name: string | null) {
return name ? mxCellRenderer.defaultShapes[name] : null;
}
/**
@ -292,14 +282,15 @@ class mxCellRenderer {
*
* Returns the constructor to be used for creating the shape.
*/
// getShapeConstructor(state: mxCellState): any;
getShapeConstructor(state: mxCellState) {
let ctor = this.getShape(state.style[STYLE_SHAPE]);
if (ctor == null) {
if (!ctor) {
ctor = <typeof mxShape>(
(state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape)
);
}
return ctor;
}
@ -312,19 +303,21 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be configured.
*/
// configureShape(state: mxCellState): void;
configureShape(state: mxCellState) {
const shape = <any>state.shape;
shape.apply(state);
shape.image = state.view.graph.getImage(state);
shape.indicatorColor = state.view.graph.getIndicatorColor(state);
shape.indicatorStrokeColor = state.style[STYLE_INDICATOR_STROKECOLOR];
shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
state
);
shape.indicatorDirection = state.style[STYLE_INDICATOR_DIRECTION];
shape.indicatorImage = state.view.graph.getIndicatorImage(state);
this.postConfigureShape(state);
const shape = state.shape;
if (shape) {
shape.apply(state);
shape.image = state.view.graph.getImage(state);
shape.indicatorColor = state.view.graph.getIndicatorColor(state);
shape.indicatorStrokeColor = state.style[STYLE_INDICATOR_STROKECOLOR];
shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
state
);
shape.indicatorDirection = state.style[STYLE_INDICATOR_DIRECTION];
shape.indicatorImage = state.view.graph.getIndicatorImage(state);
this.postConfigureShape(state);
}
}
/**

135
packages/core/src/view/cell/mxCellState.ts
View File

@ -11,8 +11,9 @@ import mxCell from './mxCell';
import mxGraphView from '../graph/mxGraphView';
import mxShape from '../../shape/mxShape';
import mxText from '../../shape/mxText';
import mxGraph from "../graph/mxGraph";
import mxDictionary from "../../util/datatypes/mxDictionary";
import mxDictionary from '../../util/datatypes/mxDictionary';
import type { CellStateStyles } from '../../types';
/**
* Class: mxCellState
@ -40,19 +41,19 @@ import mxDictionary from "../../util/datatypes/mxDictionary";
* style - Array of key, value pairs that constitute the style.
*/
class mxCellState extends mxRectangle {
constructor(view: mxGraphView, cell: mxCell, style: {}) {
constructor(view: mxGraphView, cell: mxCell, style: CellStateStyles) {
super();
this.view = view;
this.cell = cell;
this.style = style != null ? style : {};
this.style = style ?? {};
this.origin = new mxPoint();
this.absoluteOffset = new mxPoint();
}
// referenced in mxCellRenderer
node: any;
node: HTMLElement | null = null;
// TODO: Document me!!
cellBounds: mxRectangle | null = null;
@ -65,14 +66,13 @@ class mxCellState extends mxRectangle {
control: mxShape | null = null;
// Used by mxCellRenderer's createCellOverlays()
overlays: mxDictionary | null = null;
overlays: mxDictionary<mxCell, mxShape> | null = null;
/**
* Variable: view
*
* Reference to the enclosing <mxGraphView>.
*/
// view: mxGraphView;
view: mxGraphView;
/**
@ -80,7 +80,6 @@ class mxCellState extends mxRectangle {
*
* Reference to the <mxCell> that is represented by this state.
*/
// cell: mxCell;
cell: mxCell;
/**
@ -89,23 +88,21 @@ class mxCellState extends mxRectangle {
* Contains an array of key, value pairs that represent the style of the
* cell.
*/
// style: { [key: string]: any };
style: any; // TODO: Important - make the style type more strictly typed to allow for typescript checking of individual properties!!!
style: CellStateStyles; // TODO: Important - make the style type more strictly typed to allow for typescript checking of individual properties!!!
/**
* Variable: invalidStyle
*
* Specifies if the style is invalid. Default is false.
*/
invalidStyle: boolean = false;
invalidStyle = false;
/**
* Variable: invalid
*
* Specifies if the state is invalid. Default is true.
*/
// invalid: boolean;
invalid: boolean = true;
invalid = true;
/**
* Variable: origin
@ -113,7 +110,6 @@ class mxCellState extends mxRectangle {
* <mxPoint> that holds the origin for all child cells. Default is a new
* empty <mxPoint>.
*/
// origin: mxPoint;
origin: mxPoint;
/**
@ -122,8 +118,7 @@ class mxCellState extends mxRectangle {
* Holds an array of <mxPoints> that represent the absolute points of an
* edge.
*/
// absolutePoints: mxPoint[];
absolutePoints: (mxPoint | null)[] | null = null;
absolutePoints: (mxPoint | null)[] = [];
/**
* Variable: absoluteOffset
@ -132,7 +127,6 @@ class mxCellState extends mxRectangle {
* absolute coordinates of the label position. For vertices, this is the
* offset of the label relative to the top, left corner of the vertex.
*/
// absoluteOffset: mxPoint;
absoluteOffset: mxPoint;
/**
@ -140,7 +134,6 @@ class mxCellState extends mxRectangle {
*
* Caches the visible source terminal state.
*/
// visibleSourceState: mxCellState;
visibleSourceState: mxCellState | null = null;
/**
@ -148,7 +141,6 @@ class mxCellState extends mxRectangle {
*
* Caches the visible target terminal state.
*/
// visibleTargetState: mxCellState;
visibleTargetState: mxCellState | null = null;
/**
@ -156,16 +148,14 @@ class mxCellState extends mxRectangle {
*
* Caches the distance between the end points for an edge.
*/
// terminalDistance: number;
terminalDistance: number = 0;
terminalDistance = 0;
/**
* Variable: length
*
* Caches the length of an edge.
*/
// length: number;
length: number = 0;
length = 0;
/**
* Variable: segments
@ -173,15 +163,13 @@ class mxCellState extends mxRectangle {
* Array of numbers that represent the cached length of each segment of the
* edge.
*/
// segments: number[];
segments: number[] | null = null;
segments: number[] = [];
/**
* Variable: shape
*
* Holds the <mxShape> that represents the cell graphically.
*/
// shape: mxShape;
shape: mxShape | null = null;
/**
@ -190,7 +178,6 @@ class mxCellState extends mxRectangle {
* Holds the <mxText> that represents the label of the cell. Thi smay be
* null if the cell has no label.
*/
// text: mxText;
text: mxText | null = null;
/**
@ -198,7 +185,6 @@ class mxCellState extends mxRectangle {
*
* Holds the unscaled width of the state.
*/
// unscaledWidth: number;
unscaledWidth: number | null = null;
/**
@ -219,7 +205,6 @@ class mxCellState extends mxRectangle {
* border - Optional border to be added around the perimeter bounds.
* bounds - Optional <mxRectangle> to be used as the initial bounds.
*/
// getPerimeterBounds(border?: number, bounds?: mxRectangle): mxRectangle;
getPerimeterBounds(
border: number = 0,
bounds: mxRectangle = new mxRectangle(
@ -228,10 +213,10 @@ class mxCellState extends mxRectangle {
this.width,
this.height
)
): mxRectangle {
) {
if (
this.shape != null &&
this.shape.stencil != null &&
this.shape &&
this.shape.stencil &&
this.shape.stencil.aspect === 'fixed'
) {
const aspect = this.shape.stencil.computeAspect(
@ -251,6 +236,7 @@ class mxCellState extends mxRectangle {
if (border !== 0) {
bounds.grow(border);
}
return bounds;
}
@ -265,21 +251,14 @@ class mxCellState extends mxRectangle {
* isSource - Boolean that specifies if the first or last point should
* be assigned.
*/
// setAbsoluteTerminalPoint(point: mxPoint, isSource: boolean): void;
setAbsoluteTerminalPoint(point: mxPoint,
isSource: boolean=false): void {
setAbsoluteTerminalPoint(point: mxPoint, isSource = false) {
if (isSource) {
if (this.absolutePoints == null) {
this.absolutePoints = [];
}
if (this.absolutePoints.length === 0) {
this.absolutePoints.push(point);
} else {
this.absolutePoints[0] = point;
}
} else if (this.absolutePoints == null) {
this.absolutePoints = [];
} else if (this.absolutePoints.length === 0) {
this.absolutePoints.push(null);
this.absolutePoints.push(point);
} else if (this.absolutePoints.length === 1) {
@ -294,12 +273,11 @@ class mxCellState extends mxRectangle {
*
* Sets the given cursor on the shape and text shape.
*/
// setCursor(cursor: string): void;
setCursor(cursor: string): void {
if (this.shape != null) {
setCursor(cursor: string) {
if (this.shape) {
this.shape.setCursor(cursor);
}
if (this.text != null) {
if (this.text) {
this.text.setCursor(cursor);
}
}
@ -314,10 +292,9 @@ class mxCellState extends mxRectangle {
* source - Boolean that specifies if the source or target cell should be
* returned.
*/
// getVisibleTerminal(source: boolean): mxCell;
getVisibleTerminal(source: boolean = false): mxCell | null {
getVisibleTerminal(source = false) {
const tmp = this.getVisibleTerminalState(source);
return tmp != null ? tmp.cell : null;
return tmp ? tmp.cell : null;
}
/**
@ -330,8 +307,7 @@ class mxCellState extends mxRectangle {
* source - Boolean that specifies if the source or target state should be
* returned.
*/
// getVisibleTerminalState(source?: boolean): mxCellState;
getVisibleTerminalState(source: boolean = false): mxCellState | null {
getVisibleTerminalState(source = false): mxCellState | null {
return source ? this.visibleSourceState : this.visibleTargetState;
}
@ -345,11 +321,7 @@ class mxCellState extends mxRectangle {
* terminalState - <mxCellState> that represents the terminal.
* source - Boolean that specifies if the source or target state should be set.
*/
// setVisibleTerminalState(terminalState: mxCellState, source: boolean): void;
setVisibleTerminalState(
terminalState: mxCellState,
source: boolean = false
): void {
setVisibleTerminalState(terminalState: mxCellState, source = false) {
if (source) {
this.visibleSourceState = terminalState;
} else {
@ -362,9 +334,8 @@ class mxCellState extends mxRectangle {
*
* Returns the unscaled, untranslated bounds.
*/
// getCellBounds(): mxRectangle;
getCellBounds(): mxRectangle {
return <mxRectangle>this.cellBounds;
getCellBounds() {
return this.cellBounds;
}
/**
@ -374,9 +345,8 @@ class mxCellState extends mxRectangle {
* <getCellBounds> but with a 90 degree rotation if the shape's
* isPaintBoundsInverted returns true.
*/
// getPaintBounds(): mxRectangle;
getPaintBounds(): mxRectangle {
return <mxRectangle>this.paintBounds;
getPaintBounds() {
return this.paintBounds;
}
/**
@ -384,12 +354,11 @@ class mxCellState extends mxRectangle {
*
* Updates the cellBounds and paintBounds.
*/
// updateCachedBounds(): void;
updateCachedBounds(): void {
const view = <mxGraphView>this.view;
updateCachedBounds() {
const view = this.view;
const tr = view.translate;
const s = view.scale;
this.cellBounds = new mxRectangle(
this.x / s - tr.x,
this.y / s - tr.y,
@ -398,7 +367,7 @@ class mxCellState extends mxRectangle {
);
this.paintBounds = mxRectangle.fromRectangle(this.cellBounds);
if (this.shape != null && this.shape.isPaintBoundsInverted()) {
if (this.shape && this.shape.isPaintBoundsInverted()) {
this.paintBounds.rotate90();
}
}
@ -408,8 +377,7 @@ class mxCellState extends mxRectangle {
*
* Copies all fields from the given state to this state.
*/
// setState(state: mxCellState): void;
setState(state: mxCellState): void {
setState(state: mxCellState) {
this.view = state.view;
this.cell = state.cell;
this.style = state.style;
@ -433,28 +401,24 @@ class mxCellState extends mxRectangle {
*
* Returns a clone of this <mxPoint>.
*/
// clone(): mxCellState;
clone(): mxCellState {
const clone = new mxCellState(<mxGraphView>this.view, <mxCell>this.cell, this.style);
clone() {
const clone = new mxCellState(this.view, this.cell, this.style);
// Clones the absolute points
if (this.absolutePoints != null) {
clone.absolutePoints = [];
for (let i = 0; i < this.absolutePoints.length; i += 1) {
clone.absolutePoints[i] = (<mxPoint[]>this.absolutePoints)[i].clone();
}
for (let i = 0; i < this.absolutePoints.length; i += 1) {
const p = this.absolutePoints[i];
clone.absolutePoints[i] = p ? p.clone() : null;
}
if (this.origin != null) {
if (this.origin) {
clone.origin = this.origin.clone();
}
if (this.absoluteOffset != null) {
if (this.absoluteOffset) {
clone.absoluteOffset = this.absoluteOffset.clone();
}
if (this.boundingBox != null) {
if (this.boundingBox) {
clone.boundingBox = this.boundingBox.clone();
}
@ -476,22 +440,19 @@ class mxCellState extends mxRectangle {
*
* Destroys the state and all associated resources.
*/
// destroy(): void;
destroy(): void {
(<mxGraph>(<mxGraphView>this.view).graph).cellRenderer.destroy(this);
destroy() {
this.view.graph.cellRenderer.destroy(this);
}
/**
* Returns true if the given cell state is a loop.
*
* @param state {@link mxCellState} that represents a potential loop.
*/
// isLoop(state: mxCellState): boolean;
isLoop(): boolean {
isLoop(state: mxCellState) {
const src = this.getVisibleTerminalState(true);
const trg = this.getVisibleTerminalState(false);
return src != null && src == trg;
return src && src === trg;
}
}

87
packages/core/src/view/cell/mxCells.ts
View File

@ -1,6 +1,8 @@
import mxCell from "./mxCell";
import mxDictionary from "../../util/datatypes/mxDictionary";
import mxObjectIdentity from "../../util/datatypes/mxObjectIdentity";
import mxCell from './mxCell';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxObjectIdentity from '../../util/datatypes/mxObjectIdentity';
import type { CellMap, FilterFunction } from '../../types';
class mxCells extends Array<mxCell> {
constructor(...items: mxCell[]) {
@ -11,15 +13,15 @@ class mxCells extends Array<mxCell> {
* Returns the cells from the given array where the given filter function
* returns true.
*/
// filterCells(cells: Array<mxCell>, filter: (...args: any) => boolean): Array<mxCell>;
filterCells(filter: Function): mxCell[] {
let result = [];
filterCells(filter: FilterFunction) {
const result = [];
for (let i = 0; i < this.length; i += 1) {
if (filter(this[i])) {
result.push(this[i]);
}
}
return result;
}
@ -34,11 +36,11 @@ class mxCells extends Array<mxCell> {
* @param targets Boolean that specifies if target terminals should be contained
* in the result. Default is true.
*/
// getOpposites(edges: Array<mxCell>, terminal: mxCell, sources?: boolean, targets?: boolean): Array<mxCell>;
getOpposites(terminal: mxCell,
sources: boolean=true,
targets: boolean=true): mxCell[] {
getOpposites(
terminal: mxCell,
sources: boolean = true,
targets: boolean = true
) {
const terminals = [];
for (let i = 0; i < this.length; i += 1) {
@ -48,21 +50,16 @@ class mxCells extends Array<mxCell> {
// Checks if the terminal is the source of
// the edge and if the target should be
// stored in the result
if (
source === terminal &&
target != null &&
target !== terminal &&
targets
) {
if (source === terminal && target && target !== terminal && targets) {
terminals.push(target);
}
// Checks if the terminal is the taget of
// the edge and if the source should be
// Checks if the terminal is the taget of
// the edge and if the source should be
// stored in the result
else if (
target === terminal &&
source != null &&
source &&
source !== terminal &&
sources
) {
@ -77,8 +74,7 @@ class mxCells extends Array<mxCell> {
* descendants for each {@link mxCell} that it contains. Duplicates should be
* removed in the cells array to improve performance.
*/
// getTopmostCells(cells: Array<mxCell>): Array<mxCell>;
getTopmostCells(): mxCell[] {
getTopmostCells() {
const dict = new mxDictionary();
const tmp = [];
@ -91,7 +87,7 @@ class mxCells extends Array<mxCell> {
let topmost = true;
let parent = cell.getParent();
while (parent != null) {
while (parent) {
if (dict.get(parent)) {
topmost = false;
break;
@ -103,6 +99,7 @@ class mxCells extends Array<mxCell> {
tmp.push(cell);
}
}
return tmp;
}
@ -110,18 +107,18 @@ class mxCells extends Array<mxCell> {
* Returns an array that represents the set (no duplicates) of all parents
* for the given array of cells.
*/
// getParents(cells: Array<mxCell>): Array<mxCell>;
getParents() {
const parents = [];
const dict = new mxDictionary();
for (const cell of this) {
const parent = cell.getParent();
if (parent != null && !dict.get(parent)) {
if (parent && !dict.get(parent)) {
dict.put(parent, true);
parents.push(parent);
}
}
return parents;
}
@ -135,10 +132,7 @@ class mxCells extends Array<mxCell> {
* with all descendants.
* @param mapping Optional mapping for existing clones.
*/
// cloneCells(cells: Array<mxCell>, includeChildren?: boolean, mapping?: any): Array<mxCell>;
cloneCells(includeChildren: boolean=true,
mapping: any={}): mxCell[] {
cloneCells(includeChildren = true, mapping: CellMap = {}) {
const clones: mxCell[] = [];
for (const cell of this) {
@ -146,8 +140,8 @@ class mxCells extends Array<mxCell> {
}
for (let i = 0; i < clones.length; i += 1) {
if (clones[i] != null) {
this.restoreClone(<mxCell>clones[i], this[i], mapping);
if (clones[i]) {
this.restoreClone(clones[i], this[i], mapping);
}
}
return clones;
@ -158,15 +152,11 @@ class mxCells extends Array<mxCell> {
*
* @private
*/
// cloneCellImpl(cell: mxCell, mapping?: any, includeChildren?: boolean): mxCell;
cloneCellImpl(cell: mxCell,
mapping: any={},
includeChildren: boolean): mxCell {
cloneCellImpl(cell: mxCell, mapping: CellMap, includeChildren: boolean) {
const ident = mxObjectIdentity.get(cell);
let clone = mapping ? mapping[ident] : null;
if (clone == null) {
if (clone === null) {
clone = cell.clone();
mapping[ident] = clone;
@ -175,7 +165,7 @@ class mxCells extends Array<mxCell> {
for (let i = 0; i < childCount; i += 1) {
const cloneChild = this.cloneCellImpl(
<mxCell>cell.getChildAt(i),
cell.getChildAt(i),
mapping,
true
);
@ -183,6 +173,7 @@ class mxCells extends Array<mxCell> {
}
}
}
return clone;
}
@ -192,35 +183,27 @@ class mxCells extends Array<mxCell> {
*
* @private
*/
// restoreClone(clone: mxCell, cell: mxCell, mapping?: any): void;
restoreClone(clone: mxCell,
cell: mxCell,
mapping: any): void {
restoreClone(clone: mxCell, cell: mxCell, mapping: CellMap): void {
const source = cell.getTerminal(true);
if (source != null) {
if (source) {
const tmp = mapping[mxObjectIdentity.get(source)];
if (tmp != null) {
if (tmp) {
tmp.insertEdge(clone, true);
}
}
const target = cell.getTerminal(false);
if (target != null) {
if (target) {
const tmp = mapping[mxObjectIdentity.get(target)];
if (tmp != null) {
if (tmp) {
tmp.insertEdge(clone, false);
}
}
const childCount = clone.getChildCount();
for (let i = 0; i < childCount; i += 1) {
this.restoreClone(
<mxCell>clone.getChildAt(i),
<mxCell>cell.getChildAt(i),
mapping
);
this.restoreClone(clone.getChildAt(i), cell.getChildAt(i), mapping);
}
}
}

82
packages/core/src/view/connection/mxMultiplicity.js → packages/core/src/view/connection/mxMultiplicity.ts
View File

@ -7,6 +7,8 @@
import mxResources from '../../util/mxResources';
import { isNode } from '../../util/mxDomUtils';
import mxGraph from '../graph/mxGraph';
import mxCell from '../cell/mxCell';
/**
* @class mxMultiplicity
@ -30,16 +32,16 @@ import { isNode } from '../../util/mxDomUtils';
*/
class mxMultiplicity {
constructor(
source,
type,
attr,
value,
min,
max,
validNeighbors,
countError,
typeError,
validNeighborsAllowed
source: boolean,
type: string,
attr: string | null = null,
value: string | null = null,
min: number = 0,
max: number | 'n' = 'n',
validNeighbors: string[] = [],
countError: string | null = null,
typeError: string | null = null,
validNeighborsAllowed: boolean = true
) {
this.source = source;
this.type = type;
@ -59,75 +61,65 @@ class mxMultiplicity {
* passed to {@link mxUtils.isNode} together with the source or target vertex
* value as the first argument.
*/
// type: string;
type = null;
type: string;
/**
* Optional string that specifies the attributename to be passed to
* {@link mxUtils.isNode} to check if the rule applies to a cell.
*/
// attr: string;
attr = null;
attr: string | null;
/**
* Optional string that specifies the value of the attribute to be passed
* to {@link mxUtils.isNode} to check if the rule applies to a cell.
*/
// value: string;
value = null;
value: string | null;
/**
* Boolean that specifies if the rule is applied to the source or target
* terminal of an edge.
*/
// source: boolean;
source = null;
source: boolean;
/**
* Defines the minimum number of connections for which this rule applies.
*
* @default 0
*/
// min: number;
min = null;
min: number = 0;
/**
* Defines the maximum number of connections for which this rule applies.
* A value of 'n' means unlimited times.
* @default 'n'
*/
// max: number | 'n';
max = null;
max: number | 'n' = 'n';
/**
* Holds an array of strings that specify the type of neighbor for which
* this rule applies. The strings are used in {@link mxCell.is} on the opposite
* terminal to check if the rule applies to the connection.
*/
// validNeighbors: Array<string>;
validNeighbors = null;
validNeighbors: string[] = [];
/**
* Boolean indicating if the list of validNeighbors are those that are allowed
* for this rule or those that are not allowed for this rule.
*/
// validNeighborsAllowed: boolean;
validNeighborsAllowed = true;
validNeighborsAllowed: boolean;
/**
* Holds the localized error message to be displayed if the number of
* connections for which the rule applies is smaller than {@link min} or greater
* than {@link max}.
*/
// countError: string;
countError = null;
countError: string | null;
/**
* Holds the localized error message to be displayed if the type of the
* neighbor for a connection does not match the rule.
*/
// typeError: string;
typeError = null;
typeError: string | null;
/**
* Checks the multiplicity for the given arguments and returns the error
@ -140,8 +132,14 @@ class mxMultiplicity {
* @param sourceOut Number of outgoing edges from the source terminal.
* @param targetIn Number of incoming edges for the target terminal.
*/
// check(graph: mxGraph, edge: mxCell, source: mxCell, target: mxCell, sourceOut: number, targetIn: number): string;
check(graph, edge, source, target, sourceOut, targetIn) {
check(
graph: mxGraph,
edge: mxCell | null,
source: mxCell,
target: mxCell,
sourceOut: number,
targetIn: number
) {
let error = '';
if (
@ -176,8 +174,12 @@ class mxMultiplicity {
* Checks if there are any valid neighbours in {@link validNeighbors}. This is only
* called if {@link validNeighbors} is a non-empty array.
*/
// checkNeighbors(graph: mxGraph, edge: mxCell, source: mxCell, target: mxCell): boolean;
checkNeighbors(graph, edge, source, target) {
checkNeighbors(
graph: mxGraph,
edge: mxCell | null,
source: mxCell,
target: mxCell
) {
const sourceValue = source.getValue();
const targetValue = target.getValue();
let isValid = !this.validNeighborsAllowed;
@ -201,8 +203,7 @@ class mxMultiplicity {
* given cell is the source or target of the given edge, depending on
* {@link source}. This implementation uses {@link checkType} on the terminal's value.
*/
// checkTerminal(graph: mxGraph, terminal: mxCell, edge: mxCell): boolean;
checkTerminal(graph, terminal, edge) {
checkTerminal(graph: mxGraph, terminal: mxCell, edge: mxCell | null) {
const value = terminal.getValue();
return this.checkType(graph, value, this.type, this.attr, this.value);
@ -211,8 +212,13 @@ class mxMultiplicity {
/**
* Checks the type of the given value.
*/
// checkType(graph: mxCell, value: string, type: string, attr: string, attrValue: any): boolean;
checkType(graph, value, type, attr, attrValue) {
checkType(
graph: mxGraph,
value: any,
type: string,
attr: string | null = null,
attrValue: any = null
) {
if (value != null) {
if (!Number.isNaN(value.nodeType)) {
// Checks if value is a DOM node

40
packages/core/src/view/graph/mxGraph.ts
View File

@ -6480,7 +6480,7 @@ class mxGraph extends mxEventSource {
* @param cell {@link mxCell} that represents the root.
*/
// getTranslateForRoot(cell: mxCell): mxPoint;
getTranslateForRoot(cell: mxCell): any {
getTranslateForRoot(cell: mxCell | null): mxPoint | null {
return null;
}
@ -7661,33 +7661,25 @@ class mxGraph extends mxEventSource {
source: mxCell | null = null,
target: mxCell | null = null
): string | null {
if (
edge != null &&
!this.isAllowDanglingEdges() &&
(source == null || target == null)
) {
if (edge && !this.isAllowDanglingEdges() && (!source || !target)) {
return '';
}
if (
edge != null &&
edge.getTerminal(true) == null &&
edge.getTerminal(false) == null
) {
if (edge && !edge.getTerminal(true) && !edge.getTerminal(false)) {
return null;
}
// Checks if we're dealing with a loop
if (!this.allowLoops && source === target && source != null) {
if (!this.allowLoops && source === target && source) {
return '';
}
// Checks if the connection is generally allowed
if (!this.isValidConnection(<mxCell>source, <mxCell>target)) {
if (!this.isValidConnection(source, target)) {
return '';
}
if (source != null && target != null) {
if (source && target) {
let error = '';
// Checks if the cells are already connected
@ -7719,7 +7711,7 @@ class mxGraph extends mxEventSource {
);
// Checks the change against each multiplicity rule
if (this.multiplicities != null) {
if (this.multiplicities) {
for (let i = 0; i < this.multiplicities.length; i += 1) {
const err = this.multiplicities[i].check(
this,
@ -7737,7 +7729,7 @@ class mxGraph extends mxEventSource {
}
// Validates the source and target terminals independently
const err = this.validateEdge(<mxCell>edge, source, target);
const err = this.validateEdge(edge, source, target);
if (err != null) {
error += err;
}
@ -7756,7 +7748,11 @@ class mxGraph extends mxEventSource {
* @param target {@link mxCell} that represents the target terminal.
*/
// validateEdge(edge: mxCell, source: mxCell, target: mxCell): string | null;
validateEdge(edge: mxCell, source: mxCell, target: mxCell): void | null {
validateEdge(
edge: mxCell | null,
source: mxCell | null,
target: mxCell | null
): string | null {
return null;
}
@ -9332,10 +9328,10 @@ class mxGraph extends mxEventSource {
* @param cell {@link mxCell} that represents a possible source or null.
*/
// isValidSource(cell: mxCell): boolean;
isValidSource(cell: mxCell): boolean {
isValidSource(cell: mxCell | null): boolean {
return (
(cell == null && this.allowDanglingEdges) ||
(cell != null &&
(!cell && this.allowDanglingEdges) ||
(!!cell &&
(!cell.isEdge() || this.connectableEdges) &&
cell.isConnectable())
);
@ -9348,7 +9344,7 @@ class mxGraph extends mxEventSource {
* @param cell {@link mxCell} that represents a possible target or null.
*/
// isValidTarget(cell: mxCell): boolean;
isValidTarget(cell: mxCell): boolean {
isValidTarget(cell: mxCell | null): boolean {
return this.isValidSource(cell);
}
@ -9363,7 +9359,7 @@ class mxGraph extends mxEventSource {
* @param target {@link mxCell} that represents the target cell.
*/
// isValidConnection(source: mxCell, target: mxCell): boolean;
isValidConnection(source: mxCell, target: mxCell): boolean {
isValidConnection(source: mxCell | null, target: mxCell | null): boolean {
return this.isValidSource(source) && this.isValidTarget(target);
}

495
packages/core/src/view/graph/mxGraphModel.ts
View File

File diff suppressed because it is too large Load Diff

153
packages/core/src/view/graph/mxGraphView.ts
View File

@ -40,7 +40,16 @@ import {
} from '../../util/mxConstants';
import mxClient from '../../mxClient';
import mxEvent from '../../util/event/mxEvent';
import mxUtils from '../../util/mxUtils';
import {
convertPoint,
getCurrentStyle,
getOffset,
getRotatedPoint,
getValue,
ptSegDistSq,
relativeCcw,
toRadians,
} from '../../util/mxUtils';
import mxLog from '../../util/gui/mxLog';
import mxResources from '../../util/mxResources';
import mxCellState from '../cell/mxCellState';
@ -120,7 +129,7 @@ class mxGraphView extends mxEventSource {
backgroundPageShape: mxShape | null = null;
EMPTY_POINT: mxPoint = new mxPoint();
EMPTY_POINT = new mxPoint();
canvas: SVGElement | null = null;
@ -137,110 +146,95 @@ class mxGraphView extends mxEventSource {
* If the resource for this key does not exist then the value is used as
* the status message. Default is 'done'.
*/
// doneResource: 'done' | '';
doneResource: string = mxClient.language !== 'none' ? 'done' : '';
doneResource = mxClient.language !== 'none' ? 'done' : '';
/**
* Specifies the resource key for the status message while the document is
* being updated. If the resource for this key does not exist then the
* value is used as the status message. Default is 'updatingDocument'.
*/
// updatingDocumentResource: 'updatingDocument' | '';
updatingDocumentResource: string =
updatingDocumentResource =
mxClient.language !== 'none' ? 'updatingDocument' : '';
/**
* Specifies if string values in cell styles should be evaluated using
* {@link mxUtils.eval}. This will only be used if the string values can't be mapped
* {@link eval}. This will only be used if the string values can't be mapped
* to objects using {@link mxStyleRegistry}. Default is false. NOTE: Enabling this
* switch carries a possible security risk.
*/
// allowEval: boolean;
allowEval: boolean = false;
allowEval = false;
/**
* Specifies if a gesture should be captured when it goes outside of the
* graph container. Default is true.
*/
// captureDocumentGesture: boolean;
captureDocumentGesture: boolean = true;
captureDocumentGesture = true;
/**
* Specifies if shapes should be created, updated and destroyed using the
* methods of {@link mxCellRenderer} in {@link graph}. Default is true.
*/
// rendering: boolean;
rendering: boolean = true;
rendering = true;
/**
* Reference to the enclosing {@link mxGraph}.
*/
// graph: mxGraph;
graph: mxGraph;
/**
* {@link mxCell} that acts as the root of the displayed cell hierarchy.
*/
// currentRoot: mxCell;
currentRoot: mxCell | null = null;
graphBounds: mxRectangle = new mxRectangle();
graphBounds = new mxRectangle();
scale: number = 1;
scale = 1;
/**
* {@link mxPoint} that specifies the current translation. Default is a new
* empty {@link mxPoint}.
*/
// translate: mxPoint;
translate: mxPoint = new mxPoint();
translate = new mxPoint();
states: mxDictionary = new mxDictionary();
states = new mxDictionary<mxCellState>();
/**
* Specifies if the style should be updated in each validation step. If this
* is false then the style is only updated if the state is created or if the
* style of the cell was changed. Default is false.
*/
// updateStyle: boolean;
updateStyle: boolean = false;
updateStyle = false;
/**
* During validation, this contains the last DOM node that was processed.
*/
// lastNode: Element;
lastNode: HTMLElement | SVGElement | null = null;
/**
* During validation, this contains the last HTML DOM node that was processed.
*/
// lastHtmlNode: HTMLElement;
lastHtmlNode: HTMLElement | SVGElement | null = null;
/**
* During validation, this contains the last edge's DOM node that was processed.
*/
// lastForegroundNode: Element;
lastForegroundNode: HTMLElement | SVGElement | null = null;
/**
* During validation, this contains the last edge HTML DOM node that was processed.
*/
// lastForegroundHtmlNode: HTMLElement;
lastForegroundHtmlNode: HTMLElement | SVGElement | null = null;
/**
* Returns {@link graphBounds}.
*/
// getGraphBounds(): mxRectangle;
getGraphBounds(): mxRectangle {
getGraphBounds() {
return this.graphBounds;
}
/**
* Sets {@link graphBounds}.
*/
// setGraphBounds(value: mxRectangle): void;
setGraphBounds(value: mxRectangle) {
this.graphBounds = value;
}
@ -248,8 +242,7 @@ class mxGraphView extends mxEventSource {
/**
* Returns the {@link scale}.
*/
// getScale(): number;
getScale(): number {
getScale() {
return this.scale;
}
@ -259,7 +252,6 @@ class mxGraphView extends mxEventSource {
*
* @param value Decimal value that specifies the new scale (1 is 100%).
*/
// setScale(value: number): void;
setScale(value: number) {
const previousScale: number = this.scale;
if (previousScale !== value) {
@ -282,8 +274,7 @@ class mxGraphView extends mxEventSource {
/**
* Returns the {@link translate}.
*/
// getTranslate(): mxPoint;
getTranslate(): mxPoint {
getTranslate() {
return this.translate;
}
@ -295,7 +286,6 @@ class mxGraphView extends mxEventSource {
* @param dx X-coordinate of the translation.
* @param dy Y-coordinate of the translation.
*/
// setTranslate(dx: number, dy: number): void;
setTranslate(dx: number, dy: number) {
const previousTranslate = new mxPoint(this.translate.x, this.translate.y);
@ -319,7 +309,7 @@ class mxGraphView extends mxEventSource {
);
}
isRendering(): boolean {
isRendering() {
return this.rendering;
}
@ -327,7 +317,7 @@ class mxGraphView extends mxEventSource {
this.rendering = value;
}
isAllowEval(): boolean {
isAllowEval() {
return this.allowEval;
}
@ -347,7 +337,7 @@ class mxGraphView extends mxEventSource {
* Sets {@link states}.
*/
// setStates(value: mxDictionary<mxCellState>): void;
setStates(value: any): void {
setStates(value: mxDictionary): void {
this.states = value;
}
@ -524,22 +514,23 @@ class mxGraphView extends mxEventSource {
* recursion.
*/
// clear(cell: mxCell, force?: boolean, recurse?: boolean): void;
clear(
cell: mxCell = <mxCell>(<mxGraph>this.graph).getModel().getRoot(),
force: boolean = false,
recurse: boolean = true
) {
const model: mxGraphModel = (<mxGraph>this.graph).getModel();
this.removeState(<mxCell>cell);
clear(cell?: mxCell | null, force: boolean = false, recurse: boolean = true) {
if (!cell) {
cell = this.graph.getModel().getRoot();
}
if (recurse && (force || cell != this.currentRoot)) {
const childCount: number = cell.getChildCount();
if (cell) {
this.removeState(cell);
for (let i = 0; i < childCount; i += 1) {
this.clear(<mxCell>cell.getChildAt(i), force);
if (recurse && (force || cell !== this.currentRoot)) {
const childCount: number = cell.getChildCount();
for (let i = 0; i < childCount; i += 1) {
this.clear(cell.getChildAt(i), force);
}
} else {
this.invalidate(cell);
}
} else {
this.invalidate(cell);
}
}
@ -1082,14 +1073,14 @@ class mxGraphView extends mxEventSource {
const pState = this.getState(state.cell.getParent());
if (geo.relative && pState != null && !pState.cell.isEdge()) {
const alpha = mxUtils.toRadians(pState.style[STYLE_ROTATION] || '0');
const alpha = toRadians(pState.style[STYLE_ROTATION] || '0');
if (alpha !== 0) {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const ct = new mxPoint(state.getCenterX(), state.getCenterY());
const cx = new mxPoint(pState.getCenterX(), pState.getCenterY());
const pt = mxUtils.getRotatedPoint(ct, cos, sin, cx);
const pt = getRotatedPoint(ct, cos, sin, cx);
state.x = pt.x - state.width / 2;
state.y = pt.y - state.height / 2;
}
@ -1147,10 +1138,10 @@ class mxGraphView extends mxEventSource {
*/
// updateVertexLabelOffset(state: mxCellState): void;
updateVertexLabelOffset(state: mxCellState) {
const h = mxUtils.getValue(state.style, STYLE_LABEL_POSITION, ALIGN_CENTER);
const h = getValue(state.style, STYLE_LABEL_POSITION, ALIGN_CENTER);
if (h === ALIGN_LEFT) {
let lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
let lw = getValue(state.style, STYLE_LABEL_WIDTH, null);
if (lw != null) {
lw *= this.scale;
@ -1164,11 +1155,11 @@ class mxGraphView extends mxEventSource {
// @ts-ignore
state.absoluteOffset.x += state.width;
} else if (h === ALIGN_CENTER) {
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
const lw = getValue(state.style, STYLE_LABEL_WIDTH, null);
if (lw != null) {
// Aligns text block with given width inside the vertex width
const align = mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_CENTER);
const align = getValue(state.style, STYLE_ALIGN, ALIGN_CENTER);
let dx = 0;
if (align === ALIGN_CENTER) {
@ -1184,7 +1175,7 @@ class mxGraphView extends mxEventSource {
}
}
const v = mxUtils.getValue(
const v = getValue(
state.style,
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
@ -1482,7 +1473,7 @@ class mxGraphView extends mxEventSource {
if (
(points == null || points.length < 2) &&
(!mxUtils.getValue(edge.style, STYLE_ORTHOGONAL_LOOP, false) ||
(!getValue(edge.style, STYLE_ORTHOGONAL_LOOP, false) ||
((sc == null || sc.point == null) && (tc == null || tc.point == null)))
) {
return source != null && source === target;
@ -1501,12 +1492,8 @@ class mxGraphView extends mxEventSource {
target: mxCellState | null = null
): any {
let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target)
? mxUtils.getValue(
edge.style,
STYLE_LOOP,
(<mxGraph>this.graph).defaultLoopStyle
)
: !mxUtils.getValue(edge.style, STYLE_NOEDGESTYLE, false)
? getValue(edge.style, STYLE_LOOP, (<mxGraph>this.graph).defaultLoopStyle)
: !getValue(edge.style, STYLE_NOEDGESTYLE, false)
? edge.style[STYLE_EDGE]
: null;
@ -1594,13 +1581,13 @@ class mxGraphView extends mxEventSource {
let next = this.getNextPoint(edge, end, source);
const orth = (<mxGraph>this.graph).isOrthogonal(edge);
const alpha = mxUtils.toRadians(Number(start.style[STYLE_ROTATION] || '0'));
const alpha = toRadians(Number(start.style[STYLE_ROTATION] || '0'));
const center = new mxPoint(start.getCenterX(), start.getCenterY());
if (alpha !== 0) {
const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha);
next = mxUtils.getRotatedPoint(next, cos, sin, center);
next = getRotatedPoint(next, cos, sin, center);
}
let border = parseFloat(edge.style[STYLE_PERIMETER_SPACING] || 0);
@ -1619,7 +1606,7 @@ class mxGraphView extends mxEventSource {
if (alpha !== 0) {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
pt = mxUtils.getRotatedPoint(pt, cos, sin, center);
pt = getRotatedPoint(pt, cos, sin, center);
}
return pt;
@ -1640,7 +1627,7 @@ class mxGraphView extends mxEventSource {
source: boolean = false
): mxCellState | null {
const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT;
const id = mxUtils.getValue(state.style, key);
const id = getValue(state.style, key);
if (id != null) {
const tmp = this.getState(
@ -1689,17 +1676,13 @@ class mxGraphView extends mxEventSource {
let flipV = false;
if (terminal.cell.isVertex()) {
flipH = mxUtils.getValue(terminal.style, STYLE_FLIPH, 0) == 1;
flipV = mxUtils.getValue(terminal.style, STYLE_FLIPV, 0) == 1;
flipH = getValue(terminal.style, STYLE_FLIPH, 0) == 1;
flipV = getValue(terminal.style, STYLE_FLIPV, 0) == 1;
// Legacy support for stencilFlipH/V
if (terminal.shape != null && terminal.shape.stencil != null) {
flipH =
mxUtils.getValue(terminal.style, 'stencilFlipH', 0) == 1 ||
flipH;
flipV =
mxUtils.getValue(terminal.style, 'stencilFlipV', 0) == 1 ||
flipV;
flipH = getValue(terminal.style, 'stencilFlipH', 0) == 1 || flipH;
flipV = getValue(terminal.style, 'stencilFlipV', 0) == 1 || flipV;
}
if (flipH) {
@ -2049,7 +2032,7 @@ class mxGraphView extends mxEventSource {
// Works out which line segment the point of the label is closest to
let p0 = absolutePoints[0];
let pe = absolutePoints[1];
let minDist = mxUtils.ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y);
let minDist = ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y);
let length = 0;
let index = 0;
let tmp = 0;
@ -2057,7 +2040,7 @@ class mxGraphView extends mxEventSource {
for (let i = 2; i < pointCount; i += 1) {
p0 = pe;
pe = absolutePoints[i];
const dist = mxUtils.ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y);
const dist = ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y);
tmp += segments[i - 2];
if (dist <= minDist) {
@ -2104,10 +2087,8 @@ class mxGraphView extends mxEventSource {
projlen = seg;
}
let yDistance = Math.sqrt(
mxUtils.ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y)
);
const direction = mxUtils.relativeCcw(p0.x, p0.y, pe.x, pe.y, x, y);
let yDistance = Math.sqrt(ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y));
const direction = relativeCcw(p0.x, p0.y, pe.x, pe.y, x, y);
if (direction === -1) {
yDistance = -yDistance;
@ -2291,7 +2272,7 @@ class mxGraphView extends mxEventSource {
// isScrollEvent(evt: Event): boolean;
isScrollEvent(evt: MouseEvent) {
const graph = <mxGraph>this.graph;
const offset = mxUtils.getOffset(graph.container);
const offset = getOffset(graph.container);
const pt = new mxPoint(evt.clientX - offset.x, evt.clientY - offset.y);
const container = <HTMLElement>graph.container;
@ -2408,7 +2389,7 @@ class mxGraphView extends mxEventSource {
// Dispatches the drop event to the graph which
// consumes and executes the source function
const pt = mxUtils.convertPoint(container, x, y);
const pt = convertPoint(container, x, y);
state = (<mxGraphView>graph.view).getState(
graph.getCellAt(pt.x, pt.y)
);
@ -2533,7 +2514,7 @@ class mxGraphView extends mxEventSource {
// updateContainerStyle(container: Element): void;
updateContainerStyle(container: HTMLElement) {
// Workaround for offset of container
const style = mxUtils.getCurrentStyle(container);
const style = getCurrentStyle(container);
if (style != null && style.position == 'static') {
container.style.position = 'relative';

4
packages/core/src/view/graph/mxSwimlaneManager.ts
View File

@ -6,7 +6,7 @@
*/
import mxEventSource from '../../util/event/mxEventSource';
import mxUtils from '../../util/mxUtils';
import { getValue } from '../../util/mxUtils';
import mxEvent from '../../util/event/mxEvent';
import { STYLE_HORIZONTAL } from '../../util/mxConstants';
import mxRectangle from '../../util/datatypes/mxRectangle';
@ -209,7 +209,7 @@ class mxSwimlaneManager extends mxEventSource {
isCellHorizontal(cell: mxCell): boolean {
if ((<mxGraph>this.graph).isSwimlane(cell)) {
const style = (<mxGraph>this.graph).getCellStyle(cell);
return mxUtils.getValue(style, STYLE_HORIZONTAL, 1) == 1;
return getValue(style, STYLE_HORIZONTAL, 1) == 1;
}
return !this.isHorizontal();
}