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

reorganize directory structure and converting to typescript

development
mcyph 2021-04-02 13:08:03 +11:00
parent 589a75cdb5
commit 16ae8bb743
122 changed files with 1304 additions and 1241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/.eslintrc
View File

@ -1,3 +1,6 @@
{
"extends": "@ijsto"
"extends": "@ijsto",
"rules": {
"newIsCap": false
}
}

2
src/mxgraph/model/atomic_changes/mxCellAttributeChange.js → src/mxgraph/atomic_changes/mxCellAttributeChange.js
View File

@ -60,5 +60,5 @@ class mxCellAttributeChange {
}
export default mxCellAttributeChange;
import("../../io/mxGenericChangeCodec");
import("../io/mxGenericChangeCodec");

2
src/mxgraph/model/atomic_changes/mxChildChange.js → src/mxgraph/atomic_changes/mxChildChange.js
View File

@ -93,5 +93,5 @@ class mxChildChange {
}
export default mxChildChange;
import("../../io/mxChildChangeCodec");
import("../io/mxChildChangeCodec");

2
src/mxgraph/model/atomic_changes/mxCollapseChange.js → src/mxgraph/atomic_changes/mxCollapseChange.js
View File

@ -34,5 +34,5 @@ class mxCollapseChange {
}
export default mxCollapseChange;
import("../../io/mxGenericChangeCodec");
import("../io/mxGenericChangeCodec");

2
src/mxgraph/model/atomic_changes/mxGeometryChange.js → src/mxgraph/atomic_changes/mxGeometryChange.js
View File

@ -34,5 +34,5 @@ class mxGeometryChange {
}
export default mxGeometryChange;
import("../../io/mxGenericChangeCodec");
import("../io/mxGenericChangeCodec");

2
src/mxgraph/model/atomic_changes/mxRootChange.js → src/mxgraph/atomic_changes/mxRootChange.js
View File

@ -28,5 +28,5 @@ class mxRootChange {
}
export default mxRootChange;
import("../../io/mxRootChangeCodec");
import("../io/mxRootChangeCodec");

2
src/mxgraph/model/atomic_changes/mxStyleChange.js → src/mxgraph/atomic_changes/mxStyleChange.js
View File

@ -31,5 +31,5 @@ class mxStyleChange {
}
export default mxStyleChange;
import("../../io/mxGenericChangeCodec");
import("../io/mxGenericChangeCodec");

2
src/mxgraph/model/atomic_changes/mxTerminalChange.js → src/mxgraph/atomic_changes/mxTerminalChange.js
View File

@ -36,5 +36,5 @@ class mxTerminalChange {
}
export default mxTerminalChange;
import("../../io/mxTerminalChangeCodec");
import("../io/mxTerminalChangeCodec");

2
src/mxgraph/model/atomic_changes/mxValueChange.js → src/mxgraph/atomic_changes/mxValueChange.js
View File

@ -31,5 +31,5 @@ class mxValueChange {
}
export default mxValueChange;
import("../../io/mxGenericChangeCodec");
import("../io/mxGenericChangeCodec");

2
src/mxgraph/model/atomic_changes/mxVisibleChange.js → src/mxgraph/atomic_changes/mxVisibleChange.js
View File

@ -34,5 +34,5 @@ class mxVisibleChange {
}
export default mxVisibleChange;
import("../../io/mxGenericChangeCodec");
import("../io/mxGenericChangeCodec");

2
src/mxgraph/editor/mxDefaultToolbar.js
View File

@ -6,7 +6,7 @@
import mxClient from '../mxClient';
import mxToolbar from '../util/gui/mxToolbar';
import mxGeometry from '../model/mxGeometry';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxUtils from '../util/mxUtils';
import mxEvent from '../util/event/mxEvent';

10
src/mxgraph/editor/mxEditor.js
View File

@ -18,17 +18,17 @@ import mxCodec from '../io/mxCodec';
import mxWindow from '../util/gui/mxWindow';
import mxForm from '../util/gui/mxForm';
import mxOutline from '../view/graph/mxOutline';
import mxCell from '../model/mxCell';
import mxGeometry from '../model/mxGeometry';
import mxCell from '../view/cell/mxCell';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxConstants from '../util/mxConstants';
import mxGraph from '../view/graph/mxGraph';
import mxSwimlaneManager from '../view/graph/mxSwimlaneManager';
import mxLayoutManager from '../view/graph/mxLayoutManager';
import mxRubberband from '../handler/mxRubberband';
import mxEvent from '../util/event/mxEvent';
import mxRootChange from '../model/atomic_changes/mxRootChange';
import mxValueChange from '../model/atomic_changes/mxValueChange';
import mxCellAttributeChange from '../model/atomic_changes/mxCellAttributeChange';
import mxRootChange from '../atomic_changes/mxRootChange';
import mxValueChange from '../atomic_changes/mxValueChange';
import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
import mxPrintPreview from '../view/graph/mxPrintPreview';
import mxClipboard from '../util/storage/mxClipboard';
import mxLog from '../util/gui/mxLog';

63
src/mxgraph/handler/mxCellHighlight.js → src/mxgraph/handler/mxCellHighlight.ts
View File

@ -6,29 +6,40 @@
import mxConstants from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxCellState from "../view/cell/mxCellState";
import mxGraph from "../view/graph/mxGraph";
import mxShape from "../shape/mxShape";
class mxCellHighlight {
// TODO: Document me!!
highlightColor: string | null;
strokeWidth: number | null;
dashed: boolean | null;
opacity: number | null;
repaintHandler: Function | null;
shape: mxShape | null;
/**
* Variable: keepOnTop
*
* Specifies if the highlights should appear on top of everything
* else in the overlay pane. Default is false.
*/
keepOnTop = false;
keepOnTop: boolean = false;
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
graph = null;
graph: mxGraph | null = null;
/**
* Variable: state
*
* Reference to the <mxCellState>.
*/
state = null;
state: mxCellState | null = null;
/**
* Variable: spacing
@ -36,7 +47,7 @@ class mxCellHighlight {
* Specifies the spacing between the highlight for vertices and the vertex.
* Default is 2.
*/
spacing = 2;
spacing: number = 2;
/**
* Variable: resetHandler
@ -44,7 +55,7 @@ class mxCellHighlight {
* Holds the handler that automatically invokes reset if the highlight
* should be hidden.
*/
resetHandler = null;
resetHandler: Function | null = null;
/**
* Class: mxCellHighlight
@ -60,16 +71,16 @@ class mxCellHighlight {
*
* Constructs a cell highlight.
*/
constructor(graph, highlightColor, strokeWidth, dashed) {
constructor(graph: mxGraph | null=null,
highlightColor: string=mxConstants.DEFAULT_VALID_COLOR,
strokeWidth: number=mxConstants.HIGHLIGHT_STROKEWIDTH,
dashed: boolean=false) {
if (graph != null) {
this.graph = graph;
this.highlightColor =
highlightColor != null
? highlightColor
: mxConstants.DEFAULT_VALID_COLOR;
this.strokeWidth =
strokeWidth != null ? strokeWidth : mxConstants.HIGHLIGHT_STROKEWIDTH;
this.dashed = dashed != null ? dashed : false;
this.highlightColor = highlightColor;
this.strokeWidth = strokeWidth;
this.dashed = dashed;
this.opacity = mxConstants.HIGHLIGHT_OPACITY;
// Updates the marker if the graph changes
@ -113,7 +124,7 @@ class mxCellHighlight {
*
* color - String that represents the new highlight color.
*/
setHighlightColor(color) {
setHighlightColor(color: string): void {
this.highlightColor = color;
if (this.shape != null) {
@ -126,7 +137,7 @@ class mxCellHighlight {
*
* Creates and returns the highlight shape for the given state.
*/
drawHighlight() {
drawHighlight(): void {
this.shape = this.createShape();
this.repaint();
@ -146,7 +157,7 @@ class mxCellHighlight {
*
* Creates and returns the highlight shape for the given state.
*/
createShape() {
createShape(): mxShape {
const shape = this.graph.cellRenderer.createShape(this.state);
shape.svgStrokeTolerance = this.graph.tolerance;
@ -175,7 +186,7 @@ class mxCellHighlight {
*
* Returns the stroke width.
*/
getStrokeWidth(state) {
getStrokeWidth(state: mxCellState | null=null): number {
return this.strokeWidth;
}
@ -184,7 +195,7 @@ class mxCellHighlight {
*
* Updates the highlight after a change of the model or view.
*/
repaint() {
repaint(): void {
if (this.state != null && this.shape != null) {
this.shape.scale = this.state.view.scale;
@ -220,7 +231,7 @@ class mxCellHighlight {
*
* Resets the state of the cell marker.
*/
hide() {
hide(): void {
this.highlight(null);
}
@ -229,7 +240,7 @@ class mxCellHighlight {
*
* Marks the <markedState> and fires a <mark> event.
*/
highlight(state) {
highlight(state: mxCellState): void {
if (this.state !== state) {
if (this.shape != null) {
this.shape.destroy();
@ -237,7 +248,6 @@ class mxCellHighlight {
}
this.state = state;
if (this.state != null) {
this.drawHighlight();
}
@ -249,22 +259,21 @@ class mxCellHighlight {
*
* Returns true if this highlight is at the given position.
*/
isHighlightAt(x, y) {
let hit = false;
isHighlightAt(x: number,
y: number): boolean {
let hit = false;
if (this.shape != null && document.elementFromPoint != null) {
let elt = document.elementFromPoint(x, y);
let elt: Node & ParentNode = document.elementFromPoint(x, y);
while (elt != null) {
if (elt === this.shape.node) {
hit = true;
break;
}
elt = elt.parentNode;
}
}
return hit;
}
@ -273,7 +282,7 @@ class mxCellHighlight {
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy() {
destroy(): void {
this.graph.getView().removeListener(this.resetHandler);
this.graph.getView().removeListener(this.repaintHandler);
this.graph.getModel().removeListener(this.repaintHandler);

4
src/mxgraph/handler/mxConnectionHandler.js
View File

@ -2,8 +2,8 @@
* Copyright (c) 2006-2016, JGraph Ltd
* Copyright (c) 2006-2016, Gaudenz Alder
*/
import mxGeometry from '../model/mxGeometry';
import mxCell from '../model/mxCell';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxCell from '../view/cell/mxCell';
import mxPoint from '../util/datatypes/mxPoint';
import mxEventObject from '../util/event/mxEventObject';
import mxEvent from '../util/event/mxEvent';

2
src/mxgraph/io/mxCellCodec.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxCell from '../model/mxCell';
import mxCell from '../view/cell/mxCell';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
import mxUtils from "../util/mxUtils";

2
src/mxgraph/io/mxChildChangeCodec.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxChildChange from '../model/atomic_changes/mxChildChange';
import mxChildChange from '../atomic_changes/mxChildChange';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
import mxUtils from '../util/mxUtils';

4
src/mxgraph/io/mxCodec.js
View File

@ -5,10 +5,10 @@
*/
import mxUtils from '../util/mxUtils';
import mxCellPath from '../model/mxCellPath';
import mxCellPath from '../view/cell/mxCellPath';
import mxCodecRegistry from "./mxCodecRegistry";
import mxConstants from "../util/mxConstants";
import mxCell from "../model/mxCell";
import mxCell from "../view/cell/mxCell";
import mxLog from "../util/gui/mxLog";
class mxCodec {

12
src/mxgraph/io/mxGenericChangeCodec.js
View File

@ -5,12 +5,12 @@
*/
import mxObjectCodec from './mxObjectCodec';
import mxValueChange from '../model/atomic_changes/mxValueChange';
import mxStyleChange from '../model/atomic_changes/mxStyleChange';
import mxGeometryChange from '../model/atomic_changes/mxGeometryChange';
import mxCollapseChange from '../model/atomic_changes/mxCollapseChange';
import mxVisibleChange from '../model/atomic_changes/mxVisibleChange';
import mxCellAttributeChange from '../model/atomic_changes/mxCellAttributeChange';
import mxValueChange from '../atomic_changes/mxValueChange';
import mxStyleChange from '../atomic_changes/mxStyleChange';
import mxGeometryChange from '../atomic_changes/mxGeometryChange';
import mxCollapseChange from '../atomic_changes/mxCollapseChange';
import mxVisibleChange from '../atomic_changes/mxVisibleChange';
import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
import mxCodecRegistry from './mxCodecRegistry';
import mxUtils from "../util/mxUtils";

2
src/mxgraph/io/mxModelCodec.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxGraphModel from '../model/mxGraphModel';
import mxGraphModel from '../view/graph/mxGraphModel';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';

2
src/mxgraph/io/mxObjectCodec.js
View File

@ -6,7 +6,7 @@
import mxObjectIdentity from "../util/datatypes/mxObjectIdentity";
import mxLog from "../util/gui/mxLog";
import mxGeometry from "../model/mxGeometry";
import mxGeometry from "../util/datatypes/mxGeometry";
import mxPoint from "../util/datatypes/mxPoint";
import mxConstants from "../util/mxConstants";
import mxUtils from "../util/mxUtils";

2
src/mxgraph/io/mxRootChangeCodec.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxRootChange from '../model/atomic_changes/mxRootChange';
import mxRootChange from '../atomic_changes/mxRootChange';
import mxCodecRegistry from './mxCodecRegistry';
import mxConstants from "../util/mxConstants";
import mxObjectCodec from "./mxObjectCodec";

2
src/mxgraph/io/mxTerminalChangeCodec.js
View File

@ -5,7 +5,7 @@
*/
import mxObjectCodec from './mxObjectCodec';
import mxTerminalChange from '../model/atomic_changes/mxTerminalChange';
import mxTerminalChange from '../atomic_changes/mxTerminalChange';
import mxCodecRegistry from "./mxCodecRegistry";
class mxTerminalChangeCodec extends mxObjectCodec {

2
src/mxgraph/layout/hierarchical/model/mxSwimlaneModel.js
View File

@ -6,7 +6,7 @@
import mxUtils from '../../../util/mxUtils';
import mxGraphHierarchyNode from './mxGraphHierarchyNode';
import mxGraphHierarchyEdge from './mxGraphHierarchyEdge';
import mxCellPath from '../../../model/mxCellPath';
import mxCellPath from '../../../view/cell/mxCellPath';
class mxSwimlaneModel {
/**

2
src/mxgraph/layout/hierarchical/stage/mxSwimlaneOrdering.js
View File

@ -5,7 +5,7 @@
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import mxUtils from '../../../util/mxUtils';
import mxCellPath from '../../../model/mxCellPath';
import mxCellPath from '../../../view/cell/mxCellPath';
class mxSwimlaneOrdering extends mxHierarchicalLayoutStage {
/**

2
src/mxgraph/layout/mxCompactTreeLayout.js
View File

@ -7,7 +7,7 @@
import mxDictionary from '../util/datatypes/mxDictionary';
import mxPoint from '../util/datatypes/mxPoint';
import mxGraphLayout from './mxGraphLayout';
import mxCellPath from "../model/mxCellPath";
import mxCellPath from "../view/cell/mxCellPath";
import mxRectangle from "../util/datatypes/mxRectangle";
import mxUtils from "../util/mxUtils";
import WeightedCellSorter from "./WeightedCellSorter";

2
src/mxgraph/layout/mxGraphLayout.js
View File

@ -6,7 +6,7 @@
import mxDictionary from '../util/datatypes/mxDictionary';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxGeometry from '../model/mxGeometry';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxPoint from '../util/datatypes/mxPoint';
import mxConstants from '../util/mxConstants';

220
src/mxgraph/shape/mxShape.js → src/mxgraph/shape/mxShape.ts
View File

@ -10,6 +10,7 @@ import mxPoint from '../util/datatypes/mxPoint';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
import mxEvent from '../util/event/mxEvent';
import mxClient from '../mxClient';
import mxCellState from "../view/cell/mxCellState";
const toBool = i => {
if (i === 0) return false;
@ -22,69 +23,92 @@ const toBool = i => {
};
class mxShape {
// TODO: Document me!!
fill: string | null;
gradient: string | null;
gradientDirection: string | null;
opacity: number | null;
fillOpacity: number | null;
strokeOpacity: number | null;
stroke: string | null;
strokewidth: number | null;
spacing: number | null;
startSize: number | null;
endSize: number | null;
startArrow: FIXME;
endArrow: FIXME;
rotation: string;
direction: string;
flipH: boolean;
flipV: boolean;
isShadow: boolean;
isDashed: boolean;
isRounded: boolean;
glass: number;
/**
* Variable: dialect
*
* Holds the dialect in which the shape is to be painted.
* This can be one of the DIALECT constants in <mxConstants>.
*/
dialect = null;
dialect: string | null = null;
/**
* Variable: scale
*
* Holds the scale in which the shape is being painted.
*/
scale = 1;
scale: number = 1;
/**
* Variable: antiAlias
*
* Rendering hint for configuring the canvas.
*/
antiAlias = true;
antiAlias: boolean = true;
/**
* Variable: minSvgStrokeWidth
*
* Minimum stroke width for SVG output.
*/
minSvgStrokeWidth = 1;
minSvgStrokeWidth: number = 1;
/**
* Variable: bounds
*
* Holds the <mxRectangle> that specifies the bounds of this shape.
*/
bounds = null;
bounds: mxRectangle | null = null;
/**
* Variable: points
*
* Holds the array of <mxPoints> that specify the points of this shape.
*/
points = null;
points: mxPoint[] | null = null;
/**
* Variable: node
*
* Holds the outermost DOM node that represents this shape.
*/
node = null;
node: HTMLElement | null = null;
/**
* Variable: state
*
* Optional reference to the corresponding <mxCellState>.
*/
state = null;
state: mxCellState | null = null;
/**
* Variable: style
*
* Optional reference to the style of the corresponding <mxCellState>.
*/
style = null;
style: FIXME = null;
/**
* Variable: boundingBox
@ -92,14 +116,14 @@ class mxShape {
* Contains the bounding box of the shape, that is, the smallest rectangle
* that includes all pixels of the shape.
*/
boundingBox = null;
boundingBox: mxRectangle | null = null;
/**
* Variable: stencil
*
* Holds the <mxStencil> that defines the shape.
*/
stencil = null;
stencil: mxStencil | null = null;
/**
* Variable: svgStrokeTolerance
@ -107,21 +131,21 @@ class mxShape {
* Event-tolerance for SVG strokes (in px). Default is 8. This is only passed
* to the canvas in <createSvgCanvas> if <pointerEvents> is true.
*/
svgStrokeTolerance = 8;
svgStrokeTolerance: number = 8;
/**
* Variable: pointerEvents
*
* Specifies if pointer events should be handled. Default is true.
*/
pointerEvents = true;
pointerEvents: boolean = true;
/**
* Variable: svgPointerEvents
*
* Specifies if pointer events should be handled. Default is true.
* Specifies if pointer events should be handled. Default is 'all', meaning they will be.
*/
svgPointerEvents = 'all';
svgPointerEvents: string = 'all';
/**
* Variable: shapePointerEvents
@ -129,7 +153,7 @@ class mxShape {
* Specifies if pointer events outside of shape should be handled. Default
* is false.
*/
shapePointerEvents = false;
shapePointerEvents: boolean = false;
/**
* Variable: stencilPointerEvents
@ -137,7 +161,7 @@ class mxShape {
* Specifies if pointer events outside of stencils should be handled. Default
* is false. Set this to true for backwards compatibility with the 1.x branch.
*/
stencilPointerEvents = false;
stencilPointerEvents: boolean = false;
/**
* Variable: outline
@ -147,14 +171,14 @@ class mxShape {
* not be painted for outlines. Default is false. This should be set before
* calling <apply>.
*/
outline = false;
outline: boolean = false;
/**
* Variable: visible
*
* Specifies if the shape is visible. Default is true.
*/
visible = true;
visible: boolean = true;
/**
* Variable: useSvgBoundingBox
@ -162,7 +186,7 @@ class mxShape {
* Allows to use the SVG bounding box in SVG. Default is false for performance
* reasons.
*/
useSvgBoundingBox = true;
useSvgBoundingBox: boolean = true;
/**
* Class: mxShape
@ -222,7 +246,7 @@ class mxShape {
*
* Constructs a new shape.
*/
constructor(stencil) {
constructor(stencil: mxStencil) {
if (stencil !== mxConstants.DO_NOTHING) {
this.stencil = stencil;
}
@ -238,7 +262,7 @@ class mxShape {
*
* container - DOM node that will contain the shape.
*/
init(container) {
init(container: HTMLElement | null=null) {
if (this.node == null) {
this.node = this.create(container);
@ -357,13 +381,7 @@ class mxShape {
if (this.visible && this.checkBounds()) {
this.node.style.visibility = 'visible';
this.clear();
if (this.node.nodeName === 'DIV') {
this.redrawHtmlShape();
} else {
this.redrawShape();
}
this.updateBoundingBox();
} else {
this.node.style.visibility = 'hidden';
@ -565,7 +583,6 @@ class mxShape {
canvas.setDashed = () => {};
canvas.text = () => {};
}
return canvas;
}
@ -598,137 +615,6 @@ class mxShape {
return canvas;
}
/**
* Function: redrawHtml
*
* Allow optimization by replacing VML with HTML.
*/
redrawHtmlShape() {
// LATER: Refactor methods
this.updateHtmlBounds(this.node);
this.updateHtmlFilters(this.node);
this.updateHtmlColors(this.node);
}
/**
* Function: updateHtmlFilters
*
* Allow optimization by replacing VML with HTML.
*/
updateHtmlFilters(node) {
let f = '';
if (this.opacity < 100) {
f += `alpha(opacity=${this.opacity})`;
}
if (this.isShadow) {
// FIXME: Cannot implement shadow transparency with filter
f +=
`${'progid:DXImageTransform.Microsoft.dropShadow (' +
"OffX='"}${Math.round(mxConstants.SHADOW_OFFSET_X * this.scale)}', ` +
`OffY='${Math.round(mxConstants.SHADOW_OFFSET_Y * this.scale)}', ` +
`Color='${mxConstants.VML_SHADOWCOLOR}')`;
}
if (
this.fill != null &&
this.fill !== mxConstants.NONE &&
this.gradient &&
this.gradient !== mxConstants.NONE
) {
let start = this.fill;
let end = this.gradient;
let type = '0';
const lookup = { east: 0, south: 1, west: 2, north: 3 };
let dir = this.direction != null ? lookup[this.direction] : 0;
if (this.gradientDirection != null) {
dir = mxUtils.mod(dir + lookup[this.gradientDirection] - 1, 4);
}
if (dir === 1) {
type = '1';
const tmp = start;
start = end;
end = tmp;
} else if (dir === 2) {
const tmp = start;
start = end;
end = tmp;
} else if (dir === 3) {
type = '1';
}
f += `${'progid:DXImageTransform.Microsoft.gradient(' +
"startColorStr='"}${start}', endColorStr='${end}', gradientType='${type}')`;
}
node.style.filter = f;
}
/**
* Function: updateHtmlColors
*
* Allow optimization by replacing VML with HTML.
*/
updateHtmlColors(node) {
let color = this.stroke;
if (color != null && color !== mxConstants.NONE) {
node.style.borderColor = color;
if (this.isDashed) {
node.style.borderStyle = 'dashed';
} else if (this.strokewidth > 0) {
node.style.borderStyle = 'solid';
}
node.style.borderWidth = `${Math.max(
1,
Math.ceil(this.strokewidth * this.scale)
)}px`;
} else {
node.style.borderWidth = '0px';
}
color = this.outline ? null : this.fill;
if (color != null && color !== mxConstants.NONE) {
node.style.backgroundColor = color;
node.style.backgroundImage = 'none';
} else if (this.pointerEvents) {
node.style.backgroundColor = 'transparent';
} else if (document.documentMode === 8) {
mxUtils.addTransparentBackgroundFilter(node);
} else {
this.setTransparentBackgroundImage(node);
}
}
/**
* Function: updateHtmlBounds
*
* Allow optimization by replacing VML with HTML.
*/
updateHtmlBounds(node) {
let sw =
document.documentMode >= 9 ? 0 : Math.ceil(this.strokewidth * this.scale);
node.style.borderWidth = `${Math.max(1, sw)}px`;
node.style.overflow = 'hidden';
node.style.left = `${Math.round(this.bounds.x - sw / 2)}px`;
node.style.top = `${Math.round(this.bounds.y - sw / 2)}px`;
if (document.compatMode === 'CSS1Compat') {
sw = -sw;
}
node.style.width = `${Math.round(Math.max(0, this.bounds.width + sw))}px`;
node.style.height = `${Math.round(Math.max(0, this.bounds.height + sw))}px`;
}
/**
* Function: destroyCanvas
*
@ -1373,13 +1259,11 @@ class mxShape {
*
* cursor - The cursor to be used.
*/
setCursor(cursor) {
setCursor(cursor: string | null=null) {
if (cursor == null) {
cursor = '';
}
this.cursor = cursor;
if (this.node != null) {
this.node.style.cursor = cursor;
}
@ -1390,7 +1274,7 @@ class mxShape {
*
* Returns the current cursor.
*/
getCursor() {
getCursor(): string {
return this.cursor;
}
@ -1399,7 +1283,11 @@ class mxShape {
*
* Hook for subclassers.
*/
isRoundable() {
isRoundable(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number): boolean {
return false;
}
@ -1457,7 +1345,6 @@ class mxShape {
*/
createBoundingBox() {
const bb = this.bounds.clone();
if (
(this.stencil != null &&
(this.direction === mxConstants.DIRECTION_NORTH ||
@ -1466,7 +1353,6 @@ class mxShape {
) {
bb.rotate90();
}
return bb;
}

8
src/mxgraph/shape/node/mxCloud.js → src/mxgraph/shape/node/mxCloud.ts
View File

@ -4,6 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxActor from '../mxActor';
import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
class mxCloud extends mxActor {
/**
@ -40,7 +41,12 @@ class mxCloud extends mxActor {
*
* Draws the path for this shape.
*/
redrawPath(c, x, y, w, h) {
redrawPath(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
c.moveTo(0.25 * w, 0.25 * h);
c.curveTo(0.05 * w, 0.25 * h, 0, 0.5 * h, 0.16 * w, 0.55 * h);
c.curveTo(0, 0.66 * h, 0.18 * w, 0.9 * h, 0.31 * w, 0.8 * h);

14
src/mxgraph/shape/node/mxCylinder.js → src/mxgraph/shape/node/mxCylinder.ts
View File

@ -6,6 +6,7 @@
import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
class mxCylinder extends mxShape {
/**
@ -58,7 +59,11 @@ class mxCylinder extends mxShape {
*
* Redirects to redrawPath for subclasses to work.
*/
paintVertexShape(c, x, y, w, h) {
paintVertexShape(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
c.translate(x, y);
c.begin();
this.redrawPath(c, x, y, w, h, false);
@ -90,7 +95,12 @@ class mxCylinder extends mxShape {
*
* Draws the path for this shape.
*/
redrawPath(c, x, y, w, h, isForeground) {
redrawPath(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number,
isForeground: boolean=false) {
const dy = this.getCylinderSize(x, y, w, h);
if (

15
src/mxgraph/shape/node/mxDoubleEllipse.js → src/mxgraph/shape/node/mxDoubleEllipse.ts
View File

@ -8,6 +8,7 @@ import mxRectangle from '../../util/datatypes/mxRectangle';
import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
class mxDoubleEllipse extends mxShape {
/**
@ -64,7 +65,12 @@ class mxDoubleEllipse extends mxShape {
*
* Paints the background.
*/
paintBackground(c, x, y, w, h) {
paintBackground(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
c.ellipse(x, y, w, h);
c.fillAndStroke();
}
@ -74,7 +80,12 @@ class mxDoubleEllipse extends mxShape {
*
* Paints the foreground.
*/
paintForeground(c, x, y, w, h) {
paintForeground(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
if (!this.outline) {
const margin = mxUtils.getValue(
this.style,

7
src/mxgraph/shape/node/mxEllipse.js → src/mxgraph/shape/node/mxEllipse.ts
View File

@ -4,6 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxShape from '../mxShape';
import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
class mxEllipse extends mxShape {
/**
@ -39,7 +40,11 @@ class mxEllipse extends mxShape {
*
* Paints the ellipse shape.
*/
paintVertexShape(c, x, y, w, h) {
paintVertexShape(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
c.ellipse(x, y, w, h);
c.fillAndStroke();
}

8
src/mxgraph/shape/node/mxHexagon.js → src/mxgraph/shape/node/mxHexagon.ts
View File

@ -7,6 +7,7 @@ import mxActor from '../mxActor';
import mxPoint from '../../util/datatypes/mxPoint';
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
class mxHexagon extends mxActor {
/**
@ -27,7 +28,12 @@ class mxHexagon extends mxActor {
*
* Draws the path for this shape.
*/
redrawPath(c, x, y, w, h) {
redrawPath(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
const arcSize =
mxUtils.getValue(
this.style,

26
src/mxgraph/shape/node/mxImageShape.js → src/mxgraph/shape/node/mxImageShape.ts
View File

@ -7,8 +7,14 @@
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import mxRectangleShape from './mxRectangleShape';
import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
import mxRectangle from '../../util/datatypes/mxRectangle';
class mxImageShape extends mxRectangleShape {
// TODO: Document me!!
shadow: boolean;
image: string;
/**
* Variable: preserveImageAspect
*
@ -37,7 +43,12 @@ class mxImageShape extends mxRectangleShape {
* strokewidth - Optional integer that defines the stroke width. Default is
* 0. This is stored in <strokewidth>.
*/
constructor(bounds, image, fill, stroke, strokewidth) {
constructor(bounds: mxRectangle,
image: string,
fill: string,
stroke: string,
strokewidth: number=0) {
super();
this.bounds = bounds;
this.image = image;
@ -112,7 +123,6 @@ class mxImageShape extends mxRectangleShape {
createHtml() {
const node = document.createElement('div');
node.style.position = 'absolute';
return node;
}
@ -121,7 +131,11 @@ class mxImageShape extends mxRectangleShape {
*
* Disables inherited roundable support.
*/
isRoundable(c, x, y, w, h) {
isRoundable(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
return false;
}
@ -130,7 +144,11 @@ class mxImageShape extends mxRectangleShape {
*
* Generic background painting implementation.
*/
paintVertexShape(c, x, y, w, h) {
paintVertexShape(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
if (this.image != null) {
const fill = mxUtils.getValue(
this.style,

27
src/mxgraph/shape/node/mxRectangleShape.js → src/mxgraph/shape/node/mxRectangleShape.ts
View File

@ -7,6 +7,8 @@
import mxConstants from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxShape from '../mxShape';
import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
import mxRectangle from '../../util/datatypes/mxRectangle';
class mxRectangleShape extends mxShape {
/**
@ -29,7 +31,10 @@ class mxRectangleShape extends mxShape {
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(bounds, fill, stroke, strokewidth) {
constructor(bounds: mxRectangle,
fill: string,
stroke: string,
strokewidth: number) {
super();
this.bounds = bounds;
this.fill = fill;
@ -42,7 +47,7 @@ class mxRectangleShape extends mxShape {
*
* Returns true for non-rounded, non-rotated shapes with no glass gradient.
*/
isHtmlAllowed() {
isHtmlAllowed(): boolean {
let events = true;
if (this.style != null) {
@ -64,7 +69,11 @@ class mxRectangleShape extends mxShape {
*
* Generic background painting implementation.
*/
paintBackground(c, x, y, w, h) {
paintBackground(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number): void {
let events = true;
if (this.style != null) {
@ -124,7 +133,11 @@ class mxRectangleShape extends mxShape {
*
* Adds roundable support.
*/
isRoundable(c, x, y, w, h) {
isRoundable(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number): boolean {
return true;
}
@ -133,7 +146,11 @@ class mxRectangleShape extends mxShape {
*
* Generic background painting implementation.
*/
paintForeground(c, x, y, w, h) {
paintForeground(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number): void {
if (
this.glass &&
!this.outline &&

18
src/mxgraph/shape/node/mxRhombus.js → src/mxgraph/shape/node/mxRhombus.ts
View File

@ -7,6 +7,8 @@ import mxShape from '../mxShape';
import mxPoint from '../../util/datatypes/mxPoint';
import mxUtils from "../../util/mxUtils";
import mxConstants from "../../util/mxConstants";
import mxRectangle from "../../util/datatypes/mxRectangle";
import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
class mxRhombus extends mxShape {
/**
@ -29,12 +31,15 @@ class mxRhombus extends mxShape {
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(bounds, fill, stroke, strokewidth) {
constructor(bounds: mxRectangle,
fill: string,
stroke: string,
strokewidth: number=1) {
super();
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = strokewidth != null ? strokewidth : 1;
this.strokewidth = strokewidth;
}
/**
@ -42,7 +47,7 @@ class mxRhombus extends mxShape {
*
* Adds roundable support.
*/
isRoundable() {
isRoundable(): boolean {
return true;
}
@ -51,7 +56,12 @@ class mxRhombus extends mxShape {
*
* Generic painting implementation.
*/
paintVertexShape(c, x, y, w, h) {
paintVertexShape(c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number) {
const hw = w / 2;
const hh = h / 2;

12
src/mxgraph/shape/mxStencil.js → src/mxgraph/shape/node/mxStencil.js
View File

@ -4,12 +4,12 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxConnectionConstraint from '../view/connection/mxConnectionConstraint';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxShape from './mxShape';
import mxResources from "../util/mxResources";
import mxUtils from "../util/mxUtils";
import mxConstants from "../util/mxConstants";
import mxConnectionConstraint from '../../view/connection/mxConnectionConstraint';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxShape from '../mxShape';
import mxResources from "../../util/mxResources";
import mxUtils from "../../util/mxUtils";
import mxConstants from "../../util/mxConstants";
import mxStencilRegistry from "./mxStencilRegistry";
class mxStencil extends mxShape {

0
src/mxgraph/shape/mxStencilRegistry.js → src/mxgraph/shape/node/mxStencilRegistry.js
View File

6
src/mxgraph/model/mxGeometry.js → src/mxgraph/util/datatypes/mxGeometry.js
View File

@ -4,9 +4,9 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxPoint from '../util/datatypes/mxPoint';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxUtils from '../util/mxUtils';
import mxPoint from './mxPoint';
import mxRectangle from './mxRectangle';
import mxUtils from '../mxUtils';
class mxGeometry extends mxRectangle {
/**

2
src/mxgraph/util/mxUtils.js
View File

@ -10,7 +10,7 @@ import mxConstants from './mxConstants';
import mxObjectIdentity from './datatypes/mxObjectIdentity';
import mxPoint from './datatypes/mxPoint';
import mxDictionary from './datatypes/mxDictionary';
import mxCellPath from '../model/mxCellPath';
import mxCellPath from '../view/cell/mxCellPath';
import mxRectangle from './datatypes/mxRectangle';
import mxTemporaryCellStates from '../view/cell/mxTemporaryCellStates';
import mxCodec from '../io/mxCodec';

113
src/mxgraph/model/mxCell.js → src/mxgraph/view/cell/mxCell.ts
View File

@ -4,34 +4,40 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import mxGeometry from "../../util/datatypes/mxGeometry";
import mxCellOverlay from "./mxCellOverlay";
class mxCell {
// TODO: Document me!
// used by invalidate() of mxGraphView
invalidating: boolean = false;
onInit: Function | null = null;
// used by addCellOverlay() of mxGraph
overlays: mxCellOverlay[] | null = null;
/**
* Variable: id
*
* Holds the Id. Default is null.
*/
id = null;
id: number | null = null;
/**
* Variable: value
*
* Holds the user object. Default is null.
*/
value = null;
value: any = null;
/**
* Variable: geometry
*
* Holds the <mxGeometry>. Default is null.
*/
geometry = null;
geometry: mxGeometry | null = null;
/**
* Variable: style
@ -39,77 +45,77 @@ class mxCell {
* Holds the style as a string of the form [(stylename|key=value);]. Default is
* null.
*/
style = null;
style: string | null = null;
/**
* Variable: vertex
*
* Specifies whether the cell is a vertex. Default is false.
*/
vertex = false;
vertex: boolean = false;
/**
* Variable: edge
*
* Specifies whether the cell is an edge. Default is false.
*/
edge = false;
edge: boolean = false;
/**
* Variable: connectable
*
* Specifies whether the cell is connectable. Default is true.
*/
connectable = true;
connectable: boolean = true;
/**
* Variable: visible
*
* Specifies whether the cell is visible. Default is true.
*/
visible = true;
visible: boolean = true;
/**
* Variable: collapsed
*
* Specifies whether the cell is collapsed. Default is false.
*/
collapsed = false;
collapsed: boolean = false;
/**
* Variable: parent
*
* Reference to the parent cell.
*/
parent = null;
parent: mxCell | null = null;
/**
* Variable: source
*
* Reference to the source terminal.
*/
source = null;
source: mxCell | null = null;
/**
* Variable: target
*
* Reference to the target terminal.
*/
target = null;
target: mxCell | null = null;
/**
* Variable: children
*
* Holds the child cells.
*/
children = null;
children: mxCell[] | null = null;
/**
* Variable: edges
*
* Holds the edges.
*/
edges = null;
edges: mxCell[] | null = null;
/**
* Variable: mxTransient
@ -120,7 +126,7 @@ class mxCell {
* to mark transient fields since transient modifiers are not supported by
* the language.
*/
mxTransient = [
mxTransient: string[] = [
'id',
'value',
'parent',
@ -192,7 +198,12 @@ class mxCell {
* geometry - Optional <mxGeometry> that specifies the geometry.
* style - Optional formatted string that defines the style.
*/
constructor(value, geometry, style) {
//onInit: Function | null;
constructor(value: any=null,
geometry: mxGeometry=null,
style: string=null) {
this.value = value;
this.setGeometry(geometry);
this.setStyle(style);
@ -207,7 +218,7 @@ class mxCell {
*
* Returns the Id of the cell as a string.
*/
getId() {
getId(): number {
return this.id;
}
@ -216,7 +227,7 @@ class mxCell {
*
* Sets the Id of the cell to the given string.
*/
setId(id) {
setId(id: number): void {
this.id = id;
}
@ -226,7 +237,7 @@ class mxCell {
* Returns the user object of the cell. The user
* object is stored in <value>.
*/
getValue() {
getValue(): any {
return this.value;
}
@ -236,7 +247,7 @@ class mxCell {
* Sets the user object of the cell. The user object
* is stored in <value>.
*/
setValue(value) {
setValue(value: number): void {
this.value = value;
}
@ -248,10 +259,9 @@ class mxCell {
* replaces the user object with the given value and
* returns the old user object.
*/
valueChanged(newValue) {
valueChanged(newValue: any): any {
const previous = this.getValue();
this.setValue(newValue);
return previous;
}
@ -260,7 +270,7 @@ class mxCell {
*
* Returns the <mxGeometry> that describes the <geometry>.
*/
getGeometry() {
getGeometry(): mxGeometry | null {
return this.geometry;
}
@ -269,7 +279,7 @@ class mxCell {
*
* Sets the <mxGeometry> to be used as the <geometry>.
*/
setGeometry(geometry) {
setGeometry(geometry: mxGeometry): void {
this.geometry = geometry;
}
@ -278,7 +288,7 @@ class mxCell {
*
* Returns a string that describes the <style>.
*/
getStyle() {
getStyle(): string {
return this.style;
}
@ -287,7 +297,7 @@ class mxCell {
*
* Sets the string to be used as the <style>.
*/
setStyle(style) {
setStyle(style: string): void {
this.style = style;
}
@ -296,7 +306,7 @@ class mxCell {
*
* Returns true if the cell is a vertex.
*/
isVertex() {
isVertex(): boolean {
return !!this.vertex;
}
@ -310,7 +320,7 @@ class mxCell {
*
* vertex - Boolean that specifies if the cell is a vertex.
*/
setVertex(vertex) {
setVertex(vertex: boolean) {
this.vertex = vertex;
}
@ -319,7 +329,7 @@ class mxCell {
*
* Returns true if the cell is an edge.
*/
isEdge() {
isEdge(): boolean {
return !!this.edge;
}
@ -342,7 +352,7 @@ class mxCell {
*
* Returns true if the cell is connectable.
*/
isConnectable() {
isConnectable(): boolean {
return !!this.connectable;
}
@ -355,7 +365,7 @@ class mxCell {
*
* connectable - Boolean that specifies the new connectable state.
*/
setConnectable(connectable) {
setConnectable(connectable: boolean) {
this.connectable = connectable;
}
@ -364,7 +374,7 @@ class mxCell {
*
* Returns true if the cell is visibile.
*/
isVisible() {
isVisible(): boolean {
return !!this.visible;
}
@ -377,7 +387,7 @@ class mxCell {
*
* visible - Boolean that specifies the new visible state.
*/
setVisible(visible) {
setVisible(visible: boolean): void {
this.visible = visible;
}
@ -386,7 +396,7 @@ class mxCell {
*
* Returns true if the cell is collapsed.
*/
isCollapsed() {
isCollapsed(): boolean {
return !!this.collapsed;
}
@ -399,7 +409,7 @@ class mxCell {
*
* collapsed - Boolean that specifies the new collapsed state.
*/
setCollapsed(collapsed) {
setCollapsed(collapsed: boolean): void {
this.collapsed = collapsed;
}
@ -408,7 +418,7 @@ class mxCell {
*
* Returns the cell's parent.
*/
getParent() {
getParent(): mxCell | null {
return this.parent;
}
@ -421,7 +431,7 @@ class mxCell {
*
* parent - <mxCell> that represents the new parent.
*/
setParent(parent) {
setParent(parent: mxCell): void {
this.parent = parent;
}
@ -435,7 +445,7 @@ class mxCell {
* source - Boolean that specifies if the source terminal should be
* returned.
*/
getTerminal(source) {
getTerminal(source: boolean=false): mxCell | null {
return source ? this.source : this.target;
}
@ -528,7 +538,6 @@ class mxCell {
this.children.splice(index, 0, child);
}
}
return child;
}
@ -544,7 +553,7 @@ class mxCell {
* index - Integer that specifies the index of the child to be
* removed.
*/
remove(index) {
remove(index: number): mxCell | null {
let child = null;
if (this.children != null && index >= 0) {
child = this.getChildAt(index);
@ -627,11 +636,9 @@ class mxCell {
if (this.edges == null) {
this.edges = [];
}
this.edges.push(edge);
}
}
return edge;
}
@ -674,7 +681,6 @@ class mxCell {
*/
removeFromTerminal(isSource) {
const terminal = this.getTerminal(isSource);
if (terminal != null) {
terminal.removeEdge(this, isSource);
}
@ -692,7 +698,6 @@ class mxCell {
*/
hasAttribute(name) {
const userObject = this.getValue();
return userObject != null &&
userObject.nodeType === mxConstants.NODETYPE_ELEMENT &&
userObject.hasAttribute
@ -714,12 +719,10 @@ class mxCell {
*/
getAttribute(name, defaultValue) {
const userObject = this.getValue();
const val =
userObject != null && userObject.nodeType === mxConstants.NODETYPE_ELEMENT
? userObject.getAttribute(name)
: null;
return val != null ? val : defaultValue;
}
@ -733,9 +736,10 @@ class mxCell {
* name - Name of the attribute whose value should be set.
* value - New value of the attribute.
*/
setAttribute(name, value) {
const userObject = this.getValue();
setAttribute(name: string,
value: any): void {
const userObject = this.getValue();
if (
userObject != null &&
userObject.nodeType === mxConstants.NODETYPE_ELEMENT
@ -751,10 +755,9 @@ class mxCell {
* the user object. All fields in <mxTransient> are ignored
* during the cloning.
*/
clone() {
clone(): mxCell {
const clone = mxUtils.clone(this, this.mxTransient);
clone.setValue(this.cloneValue());
return clone;
}
@ -763,9 +766,8 @@ class mxCell {
*
* Returns a clone of the cell's user object.
*/
cloneValue() {
cloneValue(): any {
let value = this.getValue();
if (value != null) {
if (typeof value.clone === 'function') {
value = value.clone();
@ -773,10 +775,9 @@ class mxCell {
value = value.cloneNode(true);
}
}
return value;
}
}
export default mxCell;
import("../io/mxCellCodec");
import("../../io/mxCellCodec");

4
src/mxgraph/view/cell/mxCellEditor.ts
View File

@ -11,7 +11,7 @@ import mxClient from '../../mxClient';
import mxConstants from '../../util/mxConstants';
import mxText from '../../shape/mxText';
import mxGraph from '../graph/mxGraph';
import mxCell from '../../model/mxCell';
import mxCell from './mxCell';
import mxMouseEvent from '../../util/event/mxMouseEvent';
import mxCellState from './mxCellState';
@ -341,7 +341,7 @@ class mxCellEditor {
*
* Returns the current editing value.
*/
getCurrentValue(state) {
getCurrentValue(state: mxCellState) {
return mxUtils.extractTextWithWhitespace(this.textarea.childNodes);
}

2
src/mxgraph/view/cell/mxCellOverlay.ts
View File

@ -164,7 +164,7 @@ class mxCellOverlay extends mxEventSource {
* state - <mxCellState> that represents the current state of the
* associated cell.
*/
getBounds(state) {
getBounds(state: mxCellState) {
const isEdge = state.view.graph.getModel().isEdge(state.cell);
const s = state.view.scale;
let pt = null;

0
src/mxgraph/model/mxCellPath.js → src/mxgraph/view/cell/mxCellPath.js
View File

141
src/mxgraph/view/cell/mxCellRenderer.js → src/mxgraph/view/cell/mxCellRenderer.ts
View File

@ -3,34 +3,36 @@
* Copyright (c) 2006-2017, Gaudenz Alder
*/
import mxRectangleShape from '../../shape/mxRectangleShape';
import mxEllipse from '../../shape/mxEllipse';
import mxRhombus from '../../shape/mxRhombus';
import mxCylinder from '../../shape/mxCylinder';
import mxConnector from '../../shape/mxConnector';
import mxRectangleShape from '../../shape/node/mxRectangleShape';
import mxEllipse from '../../shape/node/mxEllipse';
import mxRhombus from '../../shape/node/mxRhombus';
import mxCylinder from '../../shape/node/mxCylinder';
import mxConnector from '../../shape/edge/mxConnector';
import mxActor from '../../shape/mxActor';
import mxTriangle from '../../shape/mxTriangle';
import mxHexagon from '../../shape/mxHexagon';
import mxCloud from '../../shape/mxCloud';
import mxLine from '../../shape/mxLine';
import mxArrow from '../../shape/mxArrow';
import mxArrowConnector from '../../shape/mxArrowConnector';
import mxDoubleEllipse from '../../shape/mxDoubleEllipse';
import mxHexagon from '../../shape/node/mxHexagon';
import mxCloud from '../../shape/node/mxCloud';
import mxLine from '../../shape/edge/mxLine';
import mxArrow from '../../shape/edge/mxArrow';
import mxArrowConnector from '../../shape/edge/mxArrowConnector';
import mxDoubleEllipse from '../../shape/node/mxDoubleEllipse';
import mxSwimlane from '../../shape/mxSwimlane';
import mxImageShape from '../../shape/mxImageShape';
import mxImageShape from '../../shape/node/mxImageShape';
import mxLabel from '../../shape/mxLabel';
import mxText from '../../shape/mxText';
import mxConstants from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxRectangle from '../../util/mxRectangle';
import mxStencilRegistry from '../../shape/mxStencilRegistry';
import mxEvent from '../../util/mxEvent';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxStencilRegistry from '../../shape/node/mxStencilRegistry';
import mxEvent from '../../util/event/mxEvent';
import mxClient from '../../mxClient';
import mxMouseEvent from '../../util/mxMouseEvent';
import mxDictionary from '../../util/mxDictionary';
import mxEventObject from '../../util/mxEventObject';
import mxPoint from '../../util/mxPoint';
import mxMouseEvent from '../../util/event/mxMouseEvent';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxEventObject from '../../util/event/mxEventObject';
import mxPoint from '../../util/datatypes/mxPoint';
import mxShape from '../../shape/mxShape';
import mxCellState from "./mxCellState";
import mxCell from "./mxCell";
class mxCellRenderer {
/**
@ -47,21 +49,21 @@ class mxCellRenderer {
*
* Defines the default shape for edges. Default is <mxConnector>.
*/
defaultEdgeShape = mxConnector;
defaultEdgeShape: mxShape = mxConnector;
/**
* Variable: defaultVertexShape
*
* Defines the default shape for vertices. Default is <mxRectangleShape>.
*/
defaultVertexShape = mxRectangleShape;
defaultVertexShape: mxShape = mxRectangleShape;
/**
* Variable: defaultTextShape
*
* Defines the default shape for labels. Default is <mxText>.
*/
defaultTextShape = mxText;
defaultTextShape: mxShape = mxText;
/**
* Variable: legacyControlPosition
@ -69,7 +71,7 @@ class mxCellRenderer {
* Specifies if the folding icon should ignore the horizontal
* orientation of a swimlane. Default is true.
*/
legacyControlPosition = true;
legacyControlPosition: boolean = true;
/**
* Variable: legacySpacing
@ -77,21 +79,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 = true;
legacySpacing: boolean = true;
/**
* Variable: antiAlias
*
* Anti-aliasing option for new shapes. Default is true.
*/
antiAlias = true;
antiAlias: boolean = true;
/**
* Variable: minSvgStrokeWidth
*
* Minimum stroke width for SVG output.
*/
minSvgStrokeWidth = 1;
minSvgStrokeWidth: number = 1;
/**
* Variable: forceControlClickHandler
@ -99,7 +101,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 = false;
forceControlClickHandler: boolean = false;
/**
* Class: mxCellRenderer
@ -164,7 +166,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be initialized.
*/
initializeShape(state) {
initializeShape(state: mxCellState) {
state.shape.dialect = state.view.graph.dialect;
this.configureShape(state);
state.shape.init(state.view.getDrawPane());
@ -179,7 +181,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be created.
*/
createShape(state) {
createShape(state: mxCellState): mxShape {
let shape = null;
if (state.style != null) {
@ -188,7 +190,6 @@ class mxCellRenderer {
const stencil = mxStencilRegistry.getStencil(
state.style[mxConstants.STYLE_SHAPE]
);
if (stencil != null) {
shape = new mxShape(stencil);
} else {
@ -196,7 +197,6 @@ class mxCellRenderer {
shape = new ctor();
}
}
return shape;
}
@ -209,7 +209,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the indicator shape should be created.
*/
createIndicatorShape(state) {
createIndicatorShape(state: mxCellState): mxShape {
state.shape.indicatorShape = this.getShape(
state.view.graph.getIndicatorShape(state)
);
@ -220,7 +220,7 @@ class mxCellRenderer {
*
* Returns the shape for the given name from <defaultShapes>.
*/
getShape(name) {
getShape(name: string): mxShape {
return name != null ? mxCellRenderer.defaultShapes[name] : null;
}
@ -229,7 +229,7 @@ class mxCellRenderer {
*
* Returns the constructor to be used for creating the shape.
*/
getShapeConstructor(state) {
getShapeConstructor(state: mxCellState) {
let ctor = this.getShape(state.style[mxConstants.STYLE_SHAPE]);
if (ctor == null) {
@ -250,7 +250,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be configured.
*/
configureShape(state) {
configureShape(state: mxCellState) {
state.shape.apply(state);
state.shape.image = state.view.graph.getImage(state);
state.shape.indicatorColor = state.view.graph.getIndicatorColor(state);
@ -274,7 +274,7 @@ class mxCellRenderer {
* This implementation resolves these keywords on the fill, stroke
* and gradient color keys.
*/
postConfigureShape(state) {
postConfigureShape(state: mxCellState) {
if (state.shape != null) {
this.resolveColor(
state,
@ -294,7 +294,7 @@ class mxCellRenderer {
* Checks if the style of the given <mxCellState> contains 'inherit',
* 'indicated' or 'swimlane' for colors that support those keywords.
*/
checkPlaceholderStyles(state) {
checkPlaceholderStyles(state: mxCellState) {
// LATER: Check if the color has actually changed
if (state.style != null) {
const values = ['inherit', 'swimlane', 'indicated'];
@ -311,7 +311,6 @@ class mxCellRenderer {
}
}
}
return false;
}
@ -389,7 +388,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the label should be created.
*/
getLabelValue(state) {
getLabelValue(state: mxCellState) {
return state.view.graph.getLabel(state.cell);
}
@ -540,7 +539,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the overlay should be created.
*/
createCellOverlays(state) {
createCellOverlays(state: mxCellState) {
const { graph } = state.view;
const overlays = graph.getCellOverlays(state.cell);
let dict = null;
@ -580,7 +579,6 @@ class mxCellRenderer {
shape.destroy();
});
}
state.overlays = dict;
}
@ -645,7 +643,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the control should be created.
*/
createControl(state) {
createControl(state: mxCellState) {
const { graph } = state.view;
const image = graph.getFoldingImage(state);
@ -678,16 +676,16 @@ class mxCellRenderer {
*
* state - <mxCellState> whose control click handler should be returned.
*/
createControlClickHandler(state) {
createControlClickHandler(state: mxCellState): Function {
const { graph } = state.view;
return mxUtils.bind(this, function(evt) {
return evt => {
if (this.forceControlClickHandler || graph.isEnabled()) {
const collapse = !graph.isCellCollapsed(state.cell);
graph.foldCells(collapse, false, [state.cell], null, evt);
mxEvent.consume(evt);
}
});
};
}
/**
@ -702,7 +700,11 @@ class mxCellRenderer {
* handleEvents - Boolean indicating if mousedown and mousemove should fire events via the graph.
* clickHandler - Optional function to implement clicks on the control.
*/
initControl(state, control, handleEvents, clickHandler) {
initControl(state,
control,
handleEvents,
clickHandler) {
const { graph } = state.view;
// In the special case where the label is in HTML and the display is SVG the image
@ -821,7 +823,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the event listeners should be isntalled.
*/
installListeners(state) {
installListeners(state: mxCellState) {
const { graph } = state.view;
// Workaround for touch devices routing all events for a mouse
@ -849,14 +851,14 @@ class mxCellRenderer {
mxEvent.addGestureListeners(
state.shape.node,
mxUtils.bind(this, evt => {
evt => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
new mxMouseEvent(evt, state)
);
}
}),
},
mxUtils.bind(this, evt => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
@ -865,14 +867,14 @@ class mxCellRenderer {
);
}
}),
mxUtils.bind(this, evt => {
evt => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_UP,
new mxMouseEvent(evt, getState(evt))
);
}
})
}
);
// Uses double click timeout in mxGraph for quirks mode
@ -880,12 +882,12 @@ class mxCellRenderer {
mxEvent.addListener(
state.shape.node,
'dblclick',
mxUtils.bind(this, evt => {
evt => {
if (this.isShapeEvent(state, evt)) {
graph.dblClick(evt, state.cell);
mxEvent.consume(evt);
}
})
}
);
}
}
@ -995,7 +997,7 @@ class mxCellRenderer {
* state - <mxCellState> whose label should be checked.
* shape - <mxText> shape to be checked.
*/
isTextShapeInvalid(state, shape) {
isTextShapeInvalid(state: mxCellState, shape) {
function check(property, stylename, defaultValue) {
let result = false;
@ -1057,7 +1059,7 @@ class mxCellRenderer {
*
* shape - <mxText> shape to be redrawn.
*/
redrawLabelShape(shape) {
redrawLabelShape(shape: mxShape): void {
shape.redraw();
}
@ -1070,7 +1072,7 @@ class mxCellRenderer {
*
* state - <mxCellState> whose label scale should be returned.
*/
getTextScale(state) {
getTextScale(state: mxCellState): number {
return state.view.scale;
}
@ -1083,7 +1085,7 @@ class mxCellRenderer {
*
* state - <mxCellState> whose label bounds should be returned.
*/
getLabelBounds(state) {
getLabelBounds(state: mxCellState): mxRectangle {
const { graph } = state.view;
const { scale } = state.view;
const isEdge = graph.getModel().isEdge(state.cell);
@ -1160,7 +1162,6 @@ class mxCellRenderer {
if (lw != null) {
bounds.width = parseFloat(lw) * scale;
}
if (!isEdge) {
this.rotateLabelBounds(state, bounds);
}
@ -1179,7 +1180,9 @@ class mxCellRenderer {
* state - <mxCellState> whose label bounds should be rotated.
* bounds - <mxRectangle> the rectangle to be rotated.
*/
rotateLabelBounds(state, bounds) {
rotateLabelBounds(state: mxCellState,
bounds: mxRectangle) {
bounds.y -= state.text.margin.y * bounds.height;
bounds.x -= state.text.margin.x * bounds.width;
@ -1489,7 +1492,9 @@ class mxCellRenderer {
*
* state - <mxCellState> whose shapes should be returned.
*/
getShapesForState(state) {
getShapesForState(state: mxCellState): [mxShape | null,
mxText | null,
mxShape | null] {
return [state.shape, state.text, state.control];
}
@ -1509,10 +1514,13 @@ class mxCellRenderer {
* be drawn into the DOM. If this is false then redraw and/or reconfigure
* will not be called on the shape.
*/
redraw(state, force, rendering) {
redraw(state: mxCellState,
force: boolean=false,
rendering: boolean=true): void {
const shapeChanged = this.redrawShape(state, force, rendering);
if (state.shape != null && (rendering == null || rendering)) {
if (state.shape != null && rendering) {
this.redrawLabel(state, shapeChanged);
this.redrawCellOverlays(state, shapeChanged);
this.redrawControl(state, shapeChanged);
@ -1528,7 +1536,10 @@ class mxCellRenderer {
*
* state - <mxCellState> whose label should be redrawn.
*/
redrawShape(state, force, rendering) {
redrawShape(state: mxCellState,
force: boolean=false,
rendering: boolean=true): boolean {
const { model } = state.view.graph;
let shapeChanged = false;
@ -1638,7 +1649,7 @@ class mxCellRenderer {
*
* Invokes redraw on the shape of the given state.
*/
doRedrawShape(state) {
doRedrawShape(state: mxCellState) {
state.shape.redraw();
}
@ -1666,7 +1677,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shapes should be destroyed.
*/
destroy(state) {
destroy(state: mxCellState) {
if (state.shape != null) {
if (state.text != null) {
state.text.destroy();

85
src/mxgraph/view/cell/mxCellState.js → src/mxgraph/view/cell/mxCellState.ts
View File

@ -7,21 +7,30 @@
import mxPoint from '../../util/datatypes/mxPoint';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxConstants from '../../util/mxConstants';
import mxCell from "./mxCell";
import mxGraphView from "../graph/mxGraphView";
import mxShape from "../../shape/mxShape";
import mxText from "../../shape/mxText";
class mxCellState extends mxRectangle {
// TODO: Document me!!
cellBounds: mxRectangle;
paintBounds: mxRectangle;
boundingBox: mxRectangle;
/**
* Variable: view
*
* Reference to the enclosing <mxGraphView>.
*/
view = null;
view: mxGraphView | null = null;
/**
* Variable: cell
*
* Reference to the <mxCell> that is represented by this state.
*/
cell = null;
cell: mxCell | null = null;
/**
* Variable: style
@ -29,21 +38,21 @@ class mxCellState extends mxRectangle {
* Contains an array of key, value pairs that represent the style of the
* cell.
*/
style = null;
style: any | null = null; // 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 = false;
invalidStyle: boolean = false;
/**
* Variable: invalid
*
* Specifies if the state is invalid. Default is true.
*/
invalid = true;
invalid: boolean = true;
/**
* Variable: origin
@ -51,7 +60,7 @@ class mxCellState extends mxRectangle {
* <mxPoint> that holds the origin for all child cells. Default is a new
* empty <mxPoint>.
*/
origin = null;
origin: mxPoint | null = null;
/**
* Variable: absolutePoints
@ -59,7 +68,7 @@ class mxCellState extends mxRectangle {
* Holds an array of <mxPoints> that represent the absolute points of an
* edge.
*/
absolutePoints = null;
absolutePoints: mxPoint[] | null = null;
/**
* Variable: absoluteOffset
@ -68,35 +77,35 @@ 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 = null;
absoluteOffset: mxPoint | null = null;
/**
* Variable: visibleSourceState
*
* Caches the visible source terminal state.
*/
visibleSourceState = null;
visibleSourceState: mxCellState | null = null;
/**
* Variable: visibleTargetState
*
* Caches the visible target terminal state.
*/
visibleTargetState = null;
visibleTargetState: mxCellState | null = null;
/**
* Variable: terminalDistance
*
* Caches the distance between the end points for an edge.
*/
terminalDistance = 0;
terminalDistance: number = 0;
/**
* Variable: length
*
* Caches the length of an edge.
*/
length = 0;
length: number = 0;
/**
* Variable: segments
@ -104,14 +113,14 @@ class mxCellState extends mxRectangle {
* Array of numbers that represent the cached length of each segment of the
* edge.
*/
segments = null;
segments: number[] | null = null;
/**
* Variable: shape
*
* Holds the <mxShape> that represents the cell graphically.
*/
shape = null;
shape: mxShape | null = null;
/**
* Variable: text
@ -119,21 +128,21 @@ 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 = null;
text: mxText | null = null;
/**
* Variable: unscaledWidth
*
* Holds the unscaled width of the state.
*/
unscaledWidth = null;
unscaledWidth: number | null = null;
/**
* Variable: unscaledHeight
*
* Holds the unscaled height of the state.
*/
unscaledHeight = null;
unscaledHeight: number | null = null;
/**
* Class: mxCellState
@ -160,7 +169,9 @@ class mxCellState extends mxRectangle {
* cell - <mxCell> that this state represents.
* style - Array of key, value pairs that constitute the style.
*/
constructor(view, cell, style) {
constructor(view: mxGraphView,
cell: mxCell,
style: {}) {
super(mxConstants.DO_NOTHING);
this.view = view;
@ -182,13 +193,10 @@ 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, bounds) {
border = border || 0;
bounds =
bounds != null
? bounds
: new mxRectangle(this.x, this.y, this.width, this.height);
getPerimeterBounds(border: number=0,
bounds: mxRectangle=new mxRectangle(
this.x, this.y, this.width, this.height
)): mxRectangle {
if (
this.shape != null &&
this.shape.stencil != null &&
@ -211,7 +219,6 @@ class mxCellState extends mxRectangle {
if (border !== 0) {
bounds.grow(border);
}
return bounds;
}
@ -226,7 +233,8 @@ class mxCellState extends mxRectangle {
* isSource - Boolean that specifies if the first or last point should
* be assigned.
*/
setAbsoluteTerminalPoint(point, isSource) {
setAbsoluteTerminalPoint(point: mxPoint,
isSource: boolean=false): void {
if (isSource) {
if (this.absolutePoints == null) {
this.absolutePoints = [];
@ -253,11 +261,10 @@ class mxCellState extends mxRectangle {
*
* Sets the given cursor on the shape and text shape.
*/
setCursor(cursor) {
setCursor(cursor: string): void {
if (this.shape != null) {
this.shape.setCursor(cursor);
}
if (this.text != null) {
this.text.setCursor(cursor);
}
@ -273,9 +280,8 @@ class mxCellState extends mxRectangle {
* source - Boolean that specifies if the source or target cell should be
* returned.
*/
getVisibleTerminal(source) {
getVisibleTerminal(source: boolean=false): mxCell | null {
const tmp = this.getVisibleTerminalState(source);
return tmp != null ? tmp.cell : null;
}
@ -289,7 +295,7 @@ class mxCellState extends mxRectangle {
* source - Boolean that specifies if the source or target state should be
* returned.
*/
getVisibleTerminalState(source) {
getVisibleTerminalState(source: boolean=false): mxCellState | null {
return source ? this.visibleSourceState : this.visibleTargetState;
}
@ -303,7 +309,8 @@ 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, source) {
setVisibleTerminalState(terminalState: mxCellState,
source: boolean=false): void {
if (source) {
this.visibleSourceState = terminalState;
} else {
@ -316,7 +323,7 @@ class mxCellState extends mxRectangle {
*
* Returns the unscaled, untranslated bounds.
*/
getCellBounds() {
getCellBounds(): mxRectangle {
return this.cellBounds;
}
@ -327,7 +334,7 @@ class mxCellState extends mxRectangle {
* <getCellBounds> but with a 90 degree rotation if the shape's
* isPaintBoundsInverted returns true.
*/
getPaintBounds() {
getPaintBounds(): mxRectangle {
return this.paintBounds;
}
@ -336,7 +343,7 @@ class mxCellState extends mxRectangle {
*
* Updates the cellBounds and paintBounds.
*/
updateCachedBounds() {
updateCachedBounds(): void {
const tr = this.view.translate;
const s = this.view.scale;
this.cellBounds = new mxRectangle(
@ -357,7 +364,7 @@ class mxCellState extends mxRectangle {
*
* Copies all fields from the given state to this state.
*/
setState(state) {
setState(state: mxCellState): void {
this.view = state.view;
this.cell = state.cell;
this.style = state.style;
@ -381,7 +388,7 @@ class mxCellState extends mxRectangle {
*
* Returns a clone of this <mxPoint>.
*/
clone() {
clone(): mxCellState {
const clone = new mxCellState(this.view, this.cell, this.style);
// Clones the absolute points
@ -423,7 +430,7 @@ class mxCellState extends mxRectangle {
*
* Destroys the state and all associated resources.
*/
destroy() {
destroy(): void {
this.view.graph.cellRenderer.destroy(this);
}
}

20
src/mxgraph/view/cell/mxTemporaryCellStates.js → src/mxgraph/view/cell/mxTemporaryCellStates.ts
View File

@ -11,34 +11,30 @@
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxGraphView from "../graph/mxGraphView";
import mxCell from "../../model/mxCell";
import mxCell from "./mxCell";
import mxCellState from "./mxCellState";
class mxTemporaryCellStates {
oldValidateCellState: Function | null;
oldDoRedrawShape: Function | null;
/**
* Variable: view
*
* Holds the width of the rectangle. Default is 0.
*/
view: mxGraphView | null = null;
/**
* Variable: oldStates
*
* Holds the height of the rectangle. Default is 0.
*/
oldStates: number = 0;
oldStates: mxCellState | null = null;
/**
* Variable: oldBounds
*
* Holds the height of the rectangle. Default is 0.
*/
oldBounds: number = 0;
oldBounds: mxRectangle | null = null;
/**
* Variable: oldScale
*
* Holds the height of the rectangle. Default is 0.
*/
oldScale: number = 0;
@ -117,7 +113,7 @@ class mxTemporaryCellStates {
*
* Returns the top, left corner as a new <mxPoint>.
*/
destroy() {
destroy(): void {
this.view.setScale(this.oldScale);
this.view.setStates(this.oldStates);
this.view.setGraphBounds(this.oldBounds);

4
src/mxgraph/view/graph/mxCurrentRootChange.ts
View File

@ -1,9 +1,9 @@
import mxGraphView from "./mxGraphView";
import mxEventObject from "../../util/event/mxEventObject";
import mxPoint from "../../util/datatypes/mxPoint";
import mxCell from "../../model/mxCell";
import mxCell from "../cell/mxCell";
import mxEvent from "../../util/event/mxEvent";
import mxGraphModel from "../../model/mxGraphModel";
import mxGraphModel from "./mxGraphModel";
class mxCurrentRootChange {
view: mxGraphView;

247
src/mxgraph/view/graph/mxGraph.ts
View File

@ -33,19 +33,19 @@ import mxEdgeSegmentHandler from '../../handler/mxEdgeSegmentHandler';
import mxElbowEdgeHandler from '../../handler/mxElbowEdgeHandler';
import mxMouseEvent from '../../util/event/mxMouseEvent';
import mxResources from '../../util/mxResources';
import mxGeometry from '../../model/mxGeometry';
import mxCell from '../../model/mxCell';
import mxGraphModel from '../../model/mxGraphModel';
import mxGeometry from '../../util/datatypes/mxGeometry';
import mxCell from '../cell/mxCell';
import mxGraphModel from './mxGraphModel';
import mxStylesheet from '../style/mxStylesheet';
import mxConstants from '../../util/mxConstants';
import mxMultiplicity from "../connection/mxMultiplicity";
import mxChildChange from '../../model/atomic_changes/mxChildChange';
import mxGeometryChange from '../../model/atomic_changes/mxGeometryChange';
import mxRootChange from '../../model/atomic_changes/mxRootChange';
import mxStyleChange from '../../model/atomic_changes/mxStyleChange';
import mxTerminalChange from '../../model/atomic_changes/mxTerminalChange';
import mxValueChange from '../../model/atomic_changes/mxValueChange';
import mxChildChange from '../../atomic_changes/mxChildChange';
import mxGeometryChange from '../../atomic_changes/mxGeometryChange';
import mxRootChange from '../../atomic_changes/mxRootChange';
import mxStyleChange from '../../atomic_changes/mxStyleChange';
import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
import mxValueChange from '../../atomic_changes/mxValueChange';
import mxPolyline from '../../shape/edge/mxPolyline';
import mxCellState from '../cell/mxCellState';
@ -60,6 +60,21 @@ class mxGraph extends mxEventSource {
connectionHandler: mxConnectionHandler | null = null;
graphHandler: mxGraphHandler | null = null;
graphModelChangeListener: Function | null = null;
shiftPreview1: HTMLElement | null;
shiftPreview2: HTMLElement | null;
panningManager: mxPanningManager | null;
lastTouchEvent: mxMouseEvent | null;
doubleClickCounter: number | null;
lastTouchCell: mxCell | null;
fireDoubleClick: boolean | null;
tapAndHoldThread: number | null;
lastMouseX: number;
lastMouseY: number;
isMouseTrigger: boolean;
ignoreMouseEvents: boolean;
mouseMoveRedirect: Function;
mouseUpRedirect: Function;
lastEvent: any; // FIXME: Check if this can be more specific - DOM events or mxEventObjects!
/**
* Variable: mouseListeners
@ -2146,16 +2161,15 @@ class mxGraph extends mxEventSource {
* cell - <mxCell> to add the overlay for.
* overlay - <mxCellOverlay> to be added for the cell.
*/
addCellOverlay(cell, overlay) {
addCellOverlay(cell: mxCell,
overlay: mxCellOverlay): mxCellOverlay {
if (cell.overlays == null) {
cell.overlays = [];
}
cell.overlays.push(overlay);
// Immediately update the cell display if the state exists
const state = this.view.getState(cell);
// Immediately updates the cell display if the state exists
if (state != null) {
this.cellRenderer.redraw(state);
}
@ -2163,7 +2177,6 @@ class mxGraph extends mxEventSource {
this.fireEvent(
new mxEventObject(mxEvent.ADD_OVERLAY, 'cell', cell, 'overlay', overlay)
);
return overlay;
}
@ -2412,7 +2425,8 @@ class mxGraph extends mxEventSource {
* cell - <mxCell> for which the initial editing value should be returned.
* evt - Optional mouse event that triggered the editor.
*/
getEditingValue(cell, evt) {
getEditingValue(cell: mxCell,
evt: mxEventObject): string {
return this.convertValueToString(cell);
}
@ -2424,9 +2438,9 @@ class mxGraph extends mxEventSource {
* Parameters:
*
* cancel - Boolean that specifies if the current editing value
* should be stored.
* shouldn't be stored.
*/
stopEditing(cancel) {
stopEditing(cancel: boolean=false): void {
this.cellEditor.stopEditing(cancel);
this.fireEvent(
new mxEventObject(mxEvent.EDITING_STOPPED, 'cancel', cancel)
@ -2447,8 +2461,8 @@ class mxGraph extends mxEventSource {
* evt - Optional event that triggered the change.
*/
labelChanged(cell: mxCell,
value,
evt: mxEvent) {
value: any,
evt: mxEventObject): mxCell {
this.model.beginUpdate();
try {
@ -2466,7 +2480,6 @@ class mxGraph extends mxEventSource {
} finally {
this.model.endUpdate();
}
return cell;
}
@ -2501,11 +2514,13 @@ class mxGraph extends mxEventSource {
* value - New label to be assigned.
* autoSize - Boolean that specifies if <cellSizeUpdated> should be called.
*/
cellLabelChanged(cell, value, autoSize) {
cellLabelChanged(cell: mxCell,
value: any,
autoSize: boolean=false) {
this.model.beginUpdate();
try {
this.model.setValue(cell, value);
if (autoSize) {
this.cellSizeUpdated(cell, false);
}
@ -2702,7 +2717,9 @@ class mxGraph extends mxEventSource {
* evt - Mouseevent that represents the doubleclick.
* cell - Optional <mxCell> under the mousepointer.
*/
dblClick(evt, cell) {
dblClick(evt: mxMouseEvent,
cell: mxCell | null=null): void {
const mxe = new mxEventObject(
mxEvent.DOUBLE_CLICK,
'event',
@ -2736,7 +2753,7 @@ class mxGraph extends mxEventSource {
* me - <mxMouseEvent> that represents the touch event.
* state - Optional <mxCellState> that is associated with the event.
*/
tapAndHold(me) {
tapAndHold(me: mxMouseEvent): void {
const evt = me.getEvent();
const mxe = new mxEventObject(
mxEvent.TAP_AND_HOLD,
@ -2795,13 +2812,16 @@ class mxGraph extends mxEventSource {
* Scrolls the graph to the given point, extending the graph container if
* specified.
*/
scrollPointToVisible(x, y, extend, border) {
scrollPointToVisible(x: number,
y: number,
extend: boolean,
border: number=20) {
if (
!this.timerAutoScroll &&
(this.ignoreScrollbars || mxUtils.hasScrollbars(this.container))
) {
const c = this.container;
border = border != null ? border : 20;
if (
x >= c.scrollLeft &&
@ -2878,7 +2898,6 @@ class mxGraph extends mxEventSource {
if (this.panningManager == null) {
this.panningManager = this.createPanningManager();
}
this.panningManager.panTo(x + this.panDx, y + this.panDy);
}
}
@ -3311,7 +3330,7 @@ class mxGraph extends mxEventSource {
* cell - <mxCell> whose style should be returned as an array.
* ignoreState - Optional boolean that specifies if the cell state should be ignored.
*/
getCurrentCellStyle(cell, ignoreState) {
getCurrentCellStyle(cell, ignoreState: boolean=false) {
const state = ignoreState ? null : this.view.getState(cell);
return state != null ? state.style : this.getCellStyle(cell);
@ -4708,13 +4727,13 @@ class mxGraph extends mxEventSource {
* <mxEvent.CELLS_ADDED> while the transaction is in progress.
*/
cellsAdded(
cells,
parent,
index,
source,
target,
absolute,
constrain,
cells: mxCell[] | null=null,
parent: mxCell | null=null,
index: number | null=null,
source: mxCell | null=null,
target: mxCell | null=null,
absolute: boolean=false,
constrain: boolean=false,
extend
) {
if (cells != null && parent != null && index != null) {
@ -4802,18 +4821,12 @@ class mxGraph extends mxEventSource {
this.fireEvent(
new mxEventObject(
mxEvent.CELLS_ADDED,
'cells',
cells,
'parent',
parent,
'index',
index,
'source',
source,
'target',
target,
'absolute',
absolute
'cells', cells,
'parent', parent,
'index', index,
'source', source,
'target', target,
'absolute', absolute
)
);
} finally {
@ -4833,8 +4846,8 @@ class mxGraph extends mxEventSource {
* recurse - Optional boolean which specifies if all descendants should be
* autosized. Default is true.
*/
autoSizeCell(cell, recurse) {
recurse = recurse != null ? recurse : true;
autoSizeCell(cell: mxCell,
recurse: boolean=true) {
if (recurse) {
const childCount = this.model.getChildCount(cell);
@ -5451,8 +5464,8 @@ class mxGraph extends mxEventSource {
*
* cell - <mxCell> whose size should be updated.
*/
updateCellSize(cell, ignoreChildren) {
ignoreChildren = ignoreChildren != null ? ignoreChildren : false;
updateCellSize(cell: mxCell,
ignoreChildren: boolean=false) {
this.model.beginUpdate();
try {
@ -5460,16 +5473,13 @@ class mxGraph extends mxEventSource {
this.fireEvent(
new mxEventObject(
mxEvent.UPDATE_CELL_SIZE,
'cell',
cell,
'ignoreChildren',
ignoreChildren
'cell', cell,
'ignoreChildren', ignoreChildren
)
);
} finally {
this.model.endUpdate();
}
return cell;
}
@ -6413,8 +6423,8 @@ class mxGraph extends mxEventSource {
* cells - <mxCell> which should be constrained.
* sizeFirst - Specifies if the size should be changed first. Default is true.
*/
constrainChild(cell, sizeFirst) {
sizeFirst = sizeFirst != null ? sizeFirst : true;
constrainChild(cell: mxCell,
sizeFirst: boolean=true) {
if (cell != null) {
let geo = this.getCellGeometry(cell);
@ -7669,11 +7679,10 @@ class mxGraph extends mxEventSource {
*
* value - Numeric value to be snapped to the grid.
*/
snap(value) {
snap(value: number): number {
if (this.gridEnabled) {
value = Math.round(value / this.gridSize) * this.gridSize;
}
return value;
}
@ -7682,7 +7691,12 @@ class mxGraph extends mxEventSource {
*
* Snaps the given delta with the given scaled bounds.
*/
snapDelta(delta, bounds, ignoreGrid, ignoreHorizontal, ignoreVertical) {
snapDelta(delta,
bounds,
ignoreGrid,
ignoreHorizontal,
ignoreVertical) {
const t = this.view.translate;
const s = this.view.scale;
@ -7731,7 +7745,6 @@ class mxGraph extends mxEventSource {
}
}
}
return delta;
}
@ -7890,7 +7903,8 @@ class mxGraph extends mxEventSource {
* Zooms the graph to the given scale with an optional boolean center
* argument, which is passd to <zoom>.
*/
zoomTo(scale, center) {
zoomTo(scale: number,
center: boolean=false) {
this.zoom(scale / this.view.scale, center);
}
@ -7962,8 +7976,9 @@ class mxGraph extends mxEventSource {
* argument that keeps the graph scrolled to the center. If the center argument
* is omitted, then <centerZoom> will be used as its value.
*/
zoom(factor, center) {
center = center != null ? center : this.centerZoom;
zoom(factor: number,
center: boolean=this.centerZoom): void {
const scale = Math.round(this.view.scale * factor * 100) / 100;
const state = this.view.getState(this.getSelectionCell());
factor = scale / this.view.scale;
@ -8050,7 +8065,7 @@ class mxGraph extends mxEventSource {
* rect - The un-scaled and un-translated rectangluar region that should be just visible
* after the operation
*/
zoomToRect(rect) {
zoomToRect(rect: mxRectangle): void {
const scaleX = this.container.clientWidth / rect.width;
const scaleY = this.container.clientHeight / rect.height;
const aspectFactor = scaleX / scaleY;
@ -8370,7 +8385,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> that represents a potential loop.
*/
isLoop(state) {
isLoop(state: mxCellState) {
const src = state.getVisibleTerminalState(true);
const trg = state.getVisibleTerminalState(false);
@ -8773,7 +8788,7 @@ class mxGraph extends mxEventSource {
* Returns the <mxImage> used to display the collapsed state of
* the specified cell state. This returns null for all edges.
*/
getFoldingImage(state) {
getFoldingImage(state: mxCellState) {
if (
state != null &&
this.foldingEnabled &&
@ -9150,7 +9165,9 @@ class mxGraph extends mxEventSource {
* swimlane - <mxCell> whose start size should be returned.
* ignoreState - Optional boolean that specifies if cell state should be ignored.
*/
getStartSize(swimlane, ignoreState) {
getStartSize(swimlane: mxCell,
ignoreState: boolean=false) {
const result = new mxRectangle();
const style = this.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt(
@ -9264,7 +9281,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> whose image URL should be returned.
*/
getImage(state) {
getImage(state: mxCellState) {
return state != null && state.style != null
? state.style[mxConstants.STYLE_IMAGE]
: null;
@ -9279,7 +9296,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> to check.
*/
isTransparentState(state) {
isTransparentState(state: mxCellState) {
let result = false;
if (state != null) {
const stroke = mxUtils.getValue(
@ -9312,7 +9329,7 @@ class mxGraph extends mxEventSource {
* state - <mxCellState> whose vertical alignment should be
* returned.
*/
getVerticalAlign(state) {
getVerticalAlign(state: mxCellState) {
return state != null && state.style != null
? state.style[mxConstants.STYLE_VERTICAL_ALIGN] ||
mxConstants.ALIGN_MIDDLE
@ -9331,7 +9348,7 @@ class mxGraph extends mxEventSource {
* state - <mxCellState> whose indicator color should be
* returned.
*/
getIndicatorColor(state) {
getIndicatorColor(state: mxCellState) {
return state != null && state.style != null
? state.style[mxConstants.STYLE_INDICATOR_COLOR]
: null;
@ -9349,7 +9366,7 @@ class mxGraph extends mxEventSource {
* state - <mxCellState> whose indicator gradient color should be
* returned.
*/
getIndicatorGradientColor(state) {
getIndicatorGradientColor(state: mxCellState) {
return state != null && state.style != null
? state.style[mxConstants.STYLE_INDICATOR_GRADIENTCOLOR]
: null;
@ -9366,7 +9383,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> whose indicator shape should be returned.
*/
getIndicatorShape(state) {
getIndicatorShape(state: mxCellState) {
return state != null && state.style != null
? state.style[mxConstants.STYLE_INDICATOR_SHAPE]
: null;
@ -9383,7 +9400,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> whose indicator image should be returned.
*/
getIndicatorImage(state) {
getIndicatorImage(state: mxCellState) {
return state != null && state.style != null
? state.style[mxConstants.STYLE_INDICATOR_IMAGE]
: null;
@ -9423,7 +9440,7 @@ class mxGraph extends mxEventSource {
* cell - <mxCell> to be checked.
* ignoreState - Optional boolean that specifies if the cell state should be ignored.
*/
isSwimlane(cell, ignoreState) {
isSwimlane(cell, ignoreState: boolean=false) {
if (
cell != null &&
this.model.getParent(cell) !== this.model.getRoot() &&
@ -9576,7 +9593,8 @@ class mxGraph extends mxEventSource {
*
* cell - <mxCell> whose locked state should be returned.
*/
isCellsLocked() {
isCellsLocked(): boolean {
// FIXME: Clarify the parameters!!! ========================================================================================
return this.cellsLocked;
}
@ -9590,7 +9608,7 @@ class mxGraph extends mxEventSource {
*
* value - Boolean that defines the new value for <cellsLocked>.
*/
setCellsLocked(value) {
setCellsLocked(value: boolean) {
this.cellsLocked = value;
}
@ -9631,7 +9649,7 @@ class mxGraph extends mxEventSource {
* Returns <cellsCloneable>, that is, if the graph allows cloning of cells
* by using control-drag.
*/
isCellsCloneable() {
isCellsCloneable(): boolean {
return this.cellsCloneable;
}
@ -9646,7 +9664,7 @@ class mxGraph extends mxEventSource {
*
* value - Boolean indicating if the graph should be cloneable.
*/
setCellsCloneable(value) {
setCellsCloneable(value): void {
this.cellsCloneable = value;
}
@ -9655,7 +9673,7 @@ class mxGraph extends mxEventSource {
*
* Returns the cells which may be exported in the given array of cells.
*/
getExportableCells(cells: mxCell[]) {
getExportableCells(cells: mxCell[]): mxCell[] {
return this.model.filterCells(
cells,
mxUtils.bind(this, cell => {
@ -9674,7 +9692,7 @@ class mxGraph extends mxEventSource {
*
* cell - <mxCell> that represents the cell to be exported.
*/
canExportCell(cell: mxCell) {
canExportCell(cell: mxCell | null=null): boolean {
return this.exportEnabled;
}
@ -9683,7 +9701,7 @@ class mxGraph extends mxEventSource {
*
* Returns the cells which may be imported in the given array of cells.
*/
getImportableCells(cells: mxCell[]) {
getImportableCells(cells: mxCell[]): mxCell[] {
return this.model.filterCells(
cells,
mxUtils.bind(this, cell => {
@ -9702,7 +9720,7 @@ class mxGraph extends mxEventSource {
*
* cell - <mxCell> that represents the cell to be imported.
*/
canImportCell(cell: mxCell) {
canImportCell(cell: mxCell | null=null): boolean {
return this.importEnabled;
}
@ -10698,7 +10716,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> that is being resized.
*/
isRecursiveResize(state) {
isRecursiveResize(state: mxCellState) {
return this.recursiveResize;
}
@ -10933,7 +10951,11 @@ class mxGraph extends mxEventSource {
* cell - <mxCell> that is under the mousepointer.
* clone - Optional boolean to indicate of cells will be cloned.
*/
getDropTarget(cells, evt, cell, clone) {
getDropTarget(cells: mxCell[],
evt: mxMouseEvent,
cell: mxCell | null=null,
clone: boolean=false): mxCell | null {
if (!this.isSwimlaneNesting()) {
for (let i = 0; i < cells.length; i += 1) {
if (this.isSwimlane(cells[i])) {
@ -10976,9 +10998,8 @@ class mxGraph extends mxEventSource {
}
// Checks if parent is dropped into child if not cloning
if (clone == null || !clone) {
if (!clone) {
let parent = cell;
while (parent != null && mxUtils.indexOf(cells, parent) < 0) {
parent = this.model.getParent(parent);
}
@ -11010,7 +11031,6 @@ class mxGraph extends mxEventSource {
parent = this.model.getChildAt(root, 0);
}
}
return parent;
}
@ -11020,7 +11040,7 @@ class mxGraph extends mxEventSource {
* Sets the <defaultParent> to the given cell. Set this to null to return
* the first child of the root in getDefaultParent.
*/
setDefaultParent(cell: mxCell) {
setDefaultParent(cell: mxCell): void {
this.defaultParent = cell;
}
@ -11034,11 +11054,10 @@ class mxGraph extends mxEventSource {
*
* cell - <mxCell> for which the ancestor swimlane should be returned.
*/
getSwimlane(cell: mxCell) {
getSwimlane(cell: mxCell): void {
while (cell != null && !this.isSwimlane(cell)) {
cell = this.model.getParent(cell);
}
return cell;
}
@ -11055,7 +11074,10 @@ class mxGraph extends mxEventSource {
* parent - <mxCell> that should be used as the root of the recursion.
* Default is <defaultParent>.
*/
getSwimlaneAt(x, y, parent) {
getSwimlaneAt(x: number,
y: number,
parent) {
if (parent == null) {
parent = this.getCurrentRoot();
@ -11086,7 +11108,6 @@ class mxGraph extends mxEventSource {
}
}
}
return null;
}
@ -11372,11 +11393,12 @@ class mxGraph extends mxEventSource {
* need be an ancestral parent, true, or the direct parent, false.
* Default is false
*/
getEdges(cell, parent, incoming, outgoing, includeLoops, recurse) {
incoming = incoming != null ? incoming : true;
outgoing = outgoing != null ? outgoing : true;
includeLoops = includeLoops != null ? includeLoops : true;
recurse = recurse != null ? recurse : false;
getEdges(cell: mxCell,
parent,
incoming: boolean=true,
outgoing: boolean=true,
includeLoops: boolean=true,
recurse: boolean=false) {
let edges = [];
const isCollapsed = this.isCellCollapsed(cell);
@ -11437,7 +11459,10 @@ class mxGraph extends mxEventSource {
* parent - <mxCell> the possible parent cell
* recurse - boolean whether or not to recurse the child ancestors
*/
isValidAncestor(cell, parent, recurse) {
isValidAncestor(cell: mxCell,
parent: mxCell,
recurse: boolean=false): boolean {
return recurse
? this.model.isAncestor(parent, cell)
: this.model.getParent(cell) == parent;
@ -12355,7 +12380,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> to create the handler for.
*/
createEdgeSegmentHandler(state) {
createEdgeSegmentHandler(state: mxCellState) {
return new mxEdgeSegmentHandler(state);
}
@ -12368,7 +12393,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> to create the handler for.
*/
createElbowEdgeHandler(state) {
createElbowEdgeHandler(state: mxCellState) {
return new mxElbowEdgeHandler(state);
}
@ -12519,18 +12544,18 @@ class mxGraph extends mxEventSource {
) {
this.eventSource = me.getSource();
this.mouseMoveRedirect = mxUtils.bind(this, evt => {
this.mouseMoveRedirect = evt => {
this.fireMouseEvent(
mxEvent.MOUSE_MOVE,
new mxMouseEvent(evt, this.getStateForTouchEvent(evt))
);
});
this.mouseUpRedirect = mxUtils.bind(this, evt => {
};
this.mouseUpRedirect = evt => {
this.fireMouseEvent(
mxEvent.MOUSE_UP,
new mxMouseEvent(evt, this.getStateForTouchEvent(evt))
);
});
};
mxEvent.addGestureListeners(
this.eventSource,
@ -12651,7 +12676,7 @@ class mxGraph extends mxEventSource {
*
* <mxCellState> - State whose event source should be returned.
*/
getEventState(state) {
getEventState(state: mxCellState) {
return state;
}
@ -12669,12 +12694,14 @@ class mxGraph extends mxEventSource {
* me - <mxMouseEvent> to be fired.
* sender - Optional sender argument. Default is this.
*/
fireMouseEvent(evtName, me, sender) {
fireMouseEvent(evtName: string,
me: mxMouseEvent,
sender: any=this) {
if (this.isEventSourceIgnored(evtName, me)) {
if (this.tooltipHandler != null) {
this.tooltipHandler.hide();
}
return;
}

44
src/mxgraph/model/mxGraphModel.js → src/mxgraph/view/graph/mxGraphModel.js
View File

@ -3,25 +3,25 @@
* Copyright (c) 2006-2018, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxEventSource from '../util/event/mxEventSource';
import mxUndoableEdit from '../util/undo/mxUndoableEdit';
import mxCellPath from './mxCellPath';
import mxDictionary from '../util/datatypes/mxDictionary';
import mxObjectIdentity from '../util/datatypes/mxObjectIdentity';
import mxCell from './mxCell';
import mxUtils from '../util/mxUtils';
import mxEventObject from '../util/event/mxEventObject';
import mxEvent from '../util/event/mxEvent';
import mxPoint from '../util/datatypes/mxPoint';
import mxEventSource from '../../util/event/mxEventSource';
import mxUndoableEdit from '../../util/undo/mxUndoableEdit';
import mxCellPath from '../cell/mxCellPath';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxObjectIdentity from '../../util/datatypes/mxObjectIdentity';
import mxCell from '../cell/mxCell';
import mxUtils from '../../util/mxUtils';
import mxEventObject from '../../util/event/mxEventObject';
import mxEvent from '../../util/event/mxEvent';
import mxPoint from '../../util/datatypes/mxPoint';
import mxChildChange from './atomic_changes/mxChildChange';
import mxCollapseChange from './atomic_changes/mxCollapseChange';
import mxGeometryChange from './atomic_changes/mxGeometryChange';
import mxRootChange from './atomic_changes/mxRootChange';
import mxStyleChange from './atomic_changes/mxStyleChange';
import mxTerminalChange from './atomic_changes/mxTerminalChange';
import mxValueChange from './atomic_changes/mxValueChange';
import mxVisibleChange from './atomic_changes/mxVisibleChange';
import mxChildChange from '../../atomic_changes/mxChildChange';
import mxCollapseChange from '../../atomic_changes/mxCollapseChange';
import mxGeometryChange from '../../atomic_changes/mxGeometryChange';
import mxRootChange from '../../atomic_changes/mxRootChange';
import mxStyleChange from '../../atomic_changes/mxStyleChange';
import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
import mxValueChange from '../../atomic_changes/mxValueChange';
import mxVisibleChange from '../../atomic_changes/mxVisibleChange';
class mxGraphModel extends mxEventSource {
/**
@ -458,16 +458,14 @@ class mxGraphModel extends mxEventSource {
*
* cell - Optional <mxCell> that specifies the child.
*/
getRoot(cell) {
getRoot(cell: mxCell | null=null): mxCell {
let root = cell || this.root;
if (cell != null) {
while (cell != null) {
root = cell;
cell = this.getParent(cell);
}
}
return root;
}
@ -587,7 +585,7 @@ class mxGraphModel extends mxEventSource {
*
* cell - <mxCell> whose parent should be returned.
*/
getParent(cell) {
getParent(cell: mxCell): mxCell {
return cell != null ? cell.getParent() : null;
}
@ -2165,5 +2163,5 @@ class mxGraphModel extends mxEventSource {
// Atomic changes
//
export default mxGraphModel;
import("../io/mxModelCodec");
import("../../io/mxModelCodec");

52
src/mxgraph/view/graph/mxGraphSelectionModel.js → src/mxgraph/view/graph/mxGraphSelectionModel.ts
View File

@ -11,7 +11,8 @@ import mxClient from '../../mxClient';
import mxUtils from '../../util/mxUtils';
import mxSelectionChange from './mxSelectionChange';
import mxEvent from '../../util/event/mxEvent';
import mxCell from "../../model/mxCell";
import mxCell from "../cell/mxCell";
import mxGraph from "./mxGraph";
class mxGraphSelectionModel extends mxEventSource {
/**
@ -21,7 +22,7 @@ class mxGraphSelectionModel extends mxEventSource {
* If the resource for this key does not exist then the value is used as
* the status message. Default is 'done'.
*/
doneResource = mxClient.language !== 'none' ? 'done' : '';
doneResource: string = mxClient.language !== 'none' ? 'done' : '';
/**
* Variable: updatingSelectionResource
@ -30,7 +31,7 @@ class mxGraphSelectionModel extends mxEventSource {
* being updated. If the resource for this key does not exist then the
* value is used as the status message. Default is 'updatingSelection'.
*/
updatingSelectionResource =
updatingSelectionResource: string =
mxClient.language !== 'none' ? 'updatingSelection' : '';
/**
@ -38,7 +39,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* Reference to the enclosing <mxGraph>.
*/
graph = null;
graph: mxGraph | null = null;
/**
* Variable: singleSelection
@ -46,7 +47,7 @@ class mxGraphSelectionModel extends mxEventSource {
* Specifies if only one selected item at a time is allowed.
* Default is false.
*/
singleSelection = false;
singleSelection: boolean = false;
/**
* Class: mxGraphSelectionModel
@ -87,7 +88,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* graph - Reference to the enclosing <mxGraph>.
*/
constructor(graph) {
constructor(graph: mxGraph) {
super();
this.graph = graph;
@ -99,7 +100,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* Returns <singleSelection> as a boolean.
*/
isSingleSelection() {
isSingleSelection(): boolean {
return this.singleSelection;
}
@ -113,7 +114,7 @@ class mxGraphSelectionModel extends mxEventSource {
* singleSelection - Boolean that specifies the new value for
* <singleSelection>.
*/
setSingleSelection(singleSelection) {
setSingleSelection(singleSelection: boolean): void {
this.singleSelection = singleSelection;
}
@ -122,11 +123,10 @@ class mxGraphSelectionModel extends mxEventSource {
*
* Returns true if the given <mxCell> is selected.
*/
isSelected(cell) {
isSelected(cell: mxCell): boolean {
if (cell != null) {
return mxUtils.indexOf(this.cells, cell) >= 0;
}
return false;
}
@ -135,7 +135,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* Returns true if no cells are currently selected.
*/
isEmpty() {
isEmpty(): boolean {
return this.cells.length === 0;
}
@ -145,7 +145,7 @@ class mxGraphSelectionModel extends mxEventSource {
* Clears the selection and fires a <change> event if the selection was not
* empty.
*/
clear() {
clear(): void {
this.changeSelection(null, this.cells);
}
@ -158,7 +158,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* cell - <mxCell> to be selected.
*/
setCell(cell) {
setCell(cell: mxCell): void {
if (cell != null) {
this.setCells([cell]);
}
@ -173,20 +173,18 @@ class mxGraphSelectionModel extends mxEventSource {
*
* cells - Array of <mxCells> to be selected.
*/
setCells(cells) {
setCells(cells: mxCell[]): void {
if (cells != null) {
if (this.singleSelection) {
cells = [this.getFirstSelectableCell(cells)];
}
const tmp = [];
for (let i = 0; i < cells.length; i += 1) {
if (this.graph.isCellSelectable(cells[i])) {
tmp.push(cells[i]);
}
}
this.changeSelection(tmp, this.cells);
}
}
@ -196,7 +194,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* Returns the first selectable cell in the given array of cells.
*/
getFirstSelectableCell(cells) {
getFirstSelectableCell(cells: mxCell[]): mxCell | null {
if (cells != null) {
for (let i = 0; i < cells.length; i += 1) {
if (this.graph.isCellSelectable(cells[i])) {
@ -204,7 +202,6 @@ class mxGraphSelectionModel extends mxEventSource {
}
}
}
return null;
}
@ -217,7 +214,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* cell - <mxCell> to add to the selection.
*/
addCell(cell) {
addCell(cell: mxCell | null=null): void {
if (cell != null) {
this.addCells([cell]);
}
@ -233,17 +230,15 @@ class mxGraphSelectionModel extends mxEventSource {
*
* cells - Array of <mxCells> to add to the selection.
*/
addCells(cells) {
addCells(cells: mxCell[]): void {
if (cells != null) {
let remove = null;
if (this.singleSelection) {
remove = this.cells;
cells = [this.getFirstSelectableCell(cells)];
}
const tmp = [];
for (let i = 0; i < cells.length; i += 1) {
if (
!this.isSelected(cells[i]) &&
@ -267,7 +262,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* cell - <mxCell> to remove from the selection.
*/
removeCell(cell) {
removeCell(cell: mxCell | null=null): void {
if (cell != null) {
this.removeCells([cell]);
}
@ -276,16 +271,14 @@ class mxGraphSelectionModel extends mxEventSource {
/**
* Function: removeCells
*/
removeCells(cells) {
removeCells(cells: mxCell[] | null=null): void {
if (cells != null) {
const tmp = [];
for (let i = 0; i < cells.length; i += 1) {
if (this.isSelected(cells[i])) {
tmp.push(cells[i]);
}
}
this.changeSelection(null, tmp);
}
}
@ -301,7 +294,7 @@ class mxGraphSelectionModel extends mxEventSource {
* remove - Array of <mxCell> to remove from the selection.
*/
changeSelection(added: mxCell[],
removed: mxCell[]) {
removed: mxCell[]): void {
if (
(added != null && added.length > 0 && added[0] != null) ||
(removed != null && removed.length > 0 && removed[0] != null)
@ -324,7 +317,7 @@ class mxGraphSelectionModel extends mxEventSource {
*
* cell - <mxCell> to add to the selection.
*/
cellAdded(cell) {
cellAdded(cell: mxCell): void {
if (cell != null && !this.isSelected(cell)) {
this.cells.push(cell);
}
@ -340,10 +333,9 @@ class mxGraphSelectionModel extends mxEventSource {
*
* cell - <mxCell> to remove from the selection.
*/
cellRemoved(cell) {
cellRemoved(cell: mxCell): void {
if (cell != null) {
const index = mxUtils.indexOf(this.cells, cell);
if (index >= 0) {
this.cells.splice(index, 1);
}

37
src/mxgraph/view/graph/mxGraphView.ts
View File

@ -22,10 +22,11 @@ import mxImageShape from '../../shape/node/mxImageShape';
import mxMouseEvent from '../../util/event/mxMouseEvent';
import mxStyleRegistry from '../style/mxStyleRegistry';
import mxGraph from "./mxGraph";
import mxCell from '../../model/mxCell';
import mxCell from '../cell/mxCell';
import mxImage from '../../util/image/mxImage';
import mxCurrentRootChange from "./mxCurrentRootChange";
import mxGraphModel from '../../model/mxGraphModel';
import mxGraphModel from './mxGraphModel';
import mxShape from '../../shape/mxShape';
const validateBool = x => {
if (x === true || x === false) {
@ -45,6 +46,10 @@ const validateString = x => {
}
class mxGraphView extends mxEventSource {
// TODO: Document me!
backgroundImage: mxImageShape | null;
backgroundPageShape: mxShape | null;
EMPTY_POINT = new mxPoint();
_canvas: HTMLElement;
@ -492,7 +497,7 @@ class mxGraphView extends mxEventSource {
*
* cells - Array of <mxCells> whose bounds should be returned.
*/
getBounds(cells: [mxCell]): [mxRectangle] {
getBounds(cells: mxCell[]): mxRectangle {
let result = null;
if (cells != null && cells.length > 0) {
@ -713,7 +718,7 @@ class mxGraphView extends mxEventSource {
* cell - Optional <mxCell> to be used as the root of the validation.
* Default is <currentRoot> or the root of the model.
*/
validate(cell) {
validate(cell: mxCell | null=null) {
const t0 = mxLog.enter('mxGraphView.validate');
window.status =
mxResources.get(this.updatingDocumentResource) ||
@ -1007,8 +1012,8 @@ class mxGraphView extends mxEventSource {
* visible - Optional boolean indicating if the cell should be visible. Default
* is true.
*/
validateCell(cell, visible) {
visible = visible != null ? visible : true;
validateCell(cell: mxCell,
visible: boolean=true) {
if (cell != null) {
visible = visible && this.graph.isCellVisible(cell);
@ -1029,7 +1034,6 @@ class mxGraphView extends mxEventSource {
}
}
}
return cell;
}
@ -1100,7 +1104,6 @@ class mxGraphView extends mxEventSource {
}
}
}
return state;
}
@ -1113,7 +1116,7 @@ class mxGraphView extends mxEventSource {
*
* state - <mxCellState> to be updated.
*/
updateCellState(state) {
updateCellState(state: mxCellState) {
state.absoluteOffset.x = 0;
state.absoluteOffset.y = 0;
state.origin.x = 0;
@ -1277,7 +1280,7 @@ class mxGraphView extends mxEventSource {
*
* state - <mxCellState> whose absolute offset should be updated.
*/
updateVertexLabelOffset(state) {
updateVertexLabelOffset(state: mxCellState) {
const h = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_POSITION,
@ -1363,7 +1366,7 @@ class mxGraphView extends mxEventSource {
*
* state - <mxCellState> that represents the cell state.
*/
stateValidated(state) {
stateValidated(state: mxCellState) {
const fg =
(this.graph.getModel().isEdge(state.cell) &&
this.graph.keepEdgesInForeground) ||
@ -1482,7 +1485,7 @@ class mxGraphView extends mxEventSource {
*
* edge - <mxCellState> whose bounds should be updated.
*/
updateBoundsFromStencil(state) {
updateBoundsFromStencil(state: mxCellState) {
let previous = null;
if (
@ -1854,7 +1857,7 @@ class mxGraphView extends mxEventSource {
*
* Returns the x-coordinate of the center point for automatic routing.
*/
getRoutingCenterX(state) {
getRoutingCenterX(state: mxCellState) {
const f =
state.style != null
? parseFloat(state.style[mxConstants.STYLE_ROUTING_CENTER_X]) || 0
@ -1867,7 +1870,7 @@ class mxGraphView extends mxEventSource {
*
* Returns the y-coordinate of the center point for automatic routing.
*/
getRoutingCenterY(state) {
getRoutingCenterY(state: mxCellState) {
const f =
state.style != null
? parseFloat(state.style[mxConstants.STYLE_ROUTING_CENTER_Y]) || 0
@ -1933,7 +1936,7 @@ class mxGraphView extends mxEventSource {
*
* Returns the perimeter function for the given state.
*/
getPerimeterFunction(state) {
getPerimeterFunction(state: mxCellState) {
let perimeter = state.style[mxConstants.STYLE_PERIMETER];
// Converts string values to objects
@ -2031,7 +2034,7 @@ class mxGraphView extends mxEventSource {
*
* state - <mxCellState> whose bounds should be updated.
*/
updateEdgeBounds(state) {
updateEdgeBounds(state: mxCellState) {
const points = state.absolutePoints;
const p0 = points[0];
const pe = points[points.length - 1];
@ -2268,7 +2271,7 @@ class mxGraphView extends mxEventSource {
*
* state - <mxCellState> whose absolute offset should be updated.
*/
updateEdgeLabelOffset(state) {
updateEdgeLabelOffset(state: mxCellState) {
const points = state.absolutePoints;
state.absoluteOffset.x = state.getCenterX();

34
src/mxgraph/view/graph/mxLayoutManager.js → src/mxgraph/view/graph/mxLayoutManager.ts
View File

@ -7,13 +7,14 @@
import mxEventSource from '../../util/event/mxEventSource';
import mxEvent from '../../util/event/mxEvent';
import mxUtils from '../../util/mxUtils';
import mxRootChange from '../../model/atomic_changes/mxRootChange';
import mxChildChange from '../../model/atomic_changes/mxChildChange';
import mxTerminalChange from '../../model/atomic_changes/mxTerminalChange';
import mxGeometryChange from '../../model/atomic_changes/mxGeometryChange';
import mxVisibleChange from '../../model/atomic_changes/mxVisibleChange';
import mxStyleChange from '../../model/atomic_changes/mxStyleChange';
import mxRootChange from '../../atomic_changes/mxRootChange';
import mxChildChange from '../../atomic_changes/mxChildChange';
import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
import mxGeometryChange from '../../atomic_changes/mxGeometryChange';
import mxVisibleChange from '../../atomic_changes/mxVisibleChange';
import mxStyleChange from '../../atomic_changes/mxStyleChange';
import mxEventObject from '../../util/event/mxEventObject';
import mxCell from "../cell/mxCell";
class mxLayoutManager extends mxEventSource {
/**
@ -361,8 +362,8 @@ class mxLayoutManager extends mxEventSource {
*
* Adds all ancestors of the given cell that have a layout.
*/
addAncestorsWithLayout(cell, result) {
result = result != null ? result : [];
addAncestorsWithLayout(cell: mxCell,
result: mxCell[]=[]): mxCell[] {
if (cell != null) {
const layout = this.hasLayout(cell);
@ -385,8 +386,8 @@ class mxLayoutManager extends mxEventSource {
*
* Adds all descendants of the given cell that have a layout.
*/
addDescendantsWithLayout(cell, result) {
result = result != null ? result : [];
addDescendantsWithLayout(cell: mxCell,
result: any[]=[]): any[] {
if (cell != null && this.hasLayout(cell)) {
const model = this.getGraph().getModel();
@ -400,7 +401,6 @@ class mxLayoutManager extends mxEventSource {
}
}
}
return result;
}
@ -412,7 +412,7 @@ class mxLayoutManager extends mxEventSource {
* <mxEvent.BEGIN_UPDATE>, in the second phase layouts for parent cells are
* executed before layouts for child cells with <mxEvent.END_UPDATE>.
*/
executeLayoutForCells(cells) {
executeLayoutForCells(cells: mxCell[]): void {
const sorted = mxUtils.sortCells(cells, false);
this.layoutCells(sorted, true);
this.layoutCells(sorted.reverse(), false);
@ -423,7 +423,9 @@ class mxLayoutManager extends mxEventSource {
*
* Executes all layouts which have been scheduled during the changes.
*/
layoutCells(cells, bubble) {
layoutCells(cells: mxCell[],
bubble: boolean=false): void {
if (cells.length > 0) {
// Invokes the layouts while removing duplicates
const model = this.getGraph().getModel();
@ -451,12 +453,12 @@ class mxLayoutManager extends mxEventSource {
*
* Executes the given layout on the given parent.
*/
executeLayout(cell, bubble) {
executeLayout(cell: mxCell,
bubble: boolean=false): void {
const layout = this.getLayout(
cell,
bubble ? mxEvent.BEGIN_UPDATE : mxEvent.END_UPDATE
);
if (layout != null) {
layout.execute(cell);
}
@ -467,7 +469,7 @@ class mxLayoutManager extends mxEventSource {
*
* Removes all handlers from the <graph> and deletes the reference to it.
*/
destroy() {
destroy(): void {
this.setGraph(null);
}
}

4
src/mxgraph/view/graph/mxSelectionChange.ts
View File

@ -3,10 +3,10 @@ import mxResources from '../../util/mxResources';
import mxLog from '../../util/gui/mxLog';
import mxEvent from '../../util/event/mxEvent';
import mxGraphSelectionModel from "./mxGraphSelectionModel";
import mxCell from '../../model/mxCell';
import mxCell from '../cell/mxCell';
class mxSelectionChange {
selectionModel: mxGraphSelectionModel
selectionModel: mxGraphSelectionModel;
added: mxCell[];
removed: mxCell[];

16
src/mxgraph/view/style/mxPerimeter.js → src/mxgraph/view/style/mxPerimeter.ts
View File

@ -93,7 +93,7 @@ const mxPerimeter = {
RectanglePerimeter(bounds: mxRectangle,
vertex: mxCellState,
next: mxPoint,
orthogonal: boolean=false) {
orthogonal: boolean=false): mxPoint {
const cx = bounds.getCenterX();
const cy = bounds.getCenterY();
@ -154,7 +154,7 @@ const mxPerimeter = {
EllipsePerimeter(bounds: mxRectangle,
vertex: mxCellState,
next: mxPoint,
orthogonal: boolean=false) {
orthogonal: boolean=false): mxPoint {
const { x } = bounds;
const { y } = bounds;
const a = bounds.width / 2;
@ -166,8 +166,8 @@ const mxPerimeter = {
// Calculates straight line equation through
// point and ellipse center y = d * x + h
const dx = parseInt(px - cx);
const dy = parseInt(py - cy);
const dx = parseInt(String(px - cx));
const dy = parseInt(String(py - cy));
if (dx === 0 && dy !== 0) {
return new mxPoint(cx, cy + (b * dy) / Math.abs(dy));
@ -240,7 +240,7 @@ const mxPerimeter = {
RhombusPerimeter(bounds: mxRectangle,
vertex: mxCellState,
next: mxPoint,
orthogonal: boolean=false) {
orthogonal: boolean=false): mxPoint {
const { x } = bounds;
const { y } = bounds;
const w = bounds.width;
@ -300,7 +300,7 @@ const mxPerimeter = {
TrianglePerimeter(bounds: mxRectangle,
vertex: mxCellState,
next: mxPoint,
orthogonal: boolean=false) {
orthogonal: boolean=false): mxPoint {
const direction =
vertex != null ? vertex.style[mxConstants.STYLE_DIRECTION] : null;
const vertical =
@ -430,7 +430,6 @@ const mxPerimeter = {
if (result == null) {
result = new mxPoint(cx, cy);
}
return result;
},
@ -443,7 +442,7 @@ const mxPerimeter = {
HexagonPerimeter(bounds: mxRectangle,
vertex: mxCellState,
next: mxPoint,
orthogonal: boolean=false) {
orthogonal: boolean=false): mxPoint {
const { x } = bounds;
const { y } = bounds;
@ -743,7 +742,6 @@ const mxPerimeter = {
if (result == null) {
return new mxPoint(cx, cy);
}
return result;
},
};

27
src/pages/backgrounds/ExampleBase.ts Normal file
View File

@ -0,0 +1,27 @@
class ExampleBase {
props: object;
constructor(props: object) {
this.props = props;
}
appendToElement(element): HTMLElement {
const html: string = this.getHTML();
const cont: HTMLElement =
document.createElement('div');
cont.innerHTML = html;
this.afterHTMLSet()
element.appendChild(cont);
return cont;
}
getHTML(): void {
throw new Error("Not implemented");
}
afterHTMLSet(): void {
throw new Error("Not implemented");
}
}
export default ExampleBase;

272
src/pages/backgrounds/ExtendCanvas.js
View File

@ -1,272 +0,0 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
* Converted to ES9 syntax/React by David Morrissey 2021
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxPoint from '../../mxgraph/util/mxPoint';
class ExtendCanvas extends React.Component {
constructor(props) {
super(props);
}
render() {
// A container for the graph
return (
<>
<h1>Extend canvas</h1>
This example demonstrates implementing an infinite canvas with
scrollbars.
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'auto',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
);
}
componentDidMount() {
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
/**
* Specifies the size of the size for "tiles" to be used for a graph with
* scrollbars but no visible background page. A good value is large
* enough to reduce the number of repaints that is caused for auto-
* translation, which depends on this value, and small enough to give
* a small empty buffer around the graph. Default is 400x400.
*/
const scrollTileSize = new mxRectangle(0, 0, 400, 400);
class MyCustomGraph extends mxGraph {
/**
* Returns the padding for pages in page view with scrollbars.
*/
getPagePadding() {
return new mxPoint(
Math.max(0, Math.round(this.container.offsetWidth - 34)),
Math.max(0, Math.round(this.container.offsetHeight - 34))
);
}
/**
* Returns the size of the page format scaled with the page size.
*/
getPageSize() {
return this.pageVisible
? new mxRectangle(
0,
0,
this.pageFormat.width * this.pageScale,
this.pageFormat.height * this.pageScale
)
: scrollTileSize;
}
/**
* Returns a rectangle describing the position and count of the
* background pages, where x and y are the position of the top,
* left page and width and height are the vertical and horizontal
* page count.
*/
getPageLayout() {
const size = this.pageVisible
? this.getPageSize()
: scrollTileSize;
const bounds = this.getGraphBounds();
if (bounds.width === 0 || bounds.height === 0) {
return new mxRectangle(0, 0, 1, 1);
}
// Computes untransformed graph bounds
const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
const w = Math.floor(bounds.width / this.view.scale);
const h = Math.floor(bounds.height / this.view.scale);
const x0 = Math.floor(x / size.width);
const y0 = Math.floor(y / size.height);
const w0 = Math.ceil((x + w) / size.width) - x0;
const h0 = Math.ceil((y + h) / size.height) - y0;
return new mxRectangle(x0, y0, w0, h0);
}
getPreferredPageSize(bounds, width, height) {
const pages = this.getPageLayout();
const size = this.getPageSize();
return new mxRectangle(
0,
0,
pages.width * size.width,
pages.height * size.height
);
}
sizeDidChange() {
if (this.container != null && mxUtils.hasScrollbars(this.container)) {
const pages = this.getPageLayout();
const pad = this.getPagePadding();
const size = this.getPageSize();
// Updates the minimum graph size
const minw = Math.ceil(
(2 * pad.x) / this.view.scale + pages.width * size.width
);
const minh = Math.ceil(
(2 * pad.y) / this.view.scale + pages.height * size.height
);
const min = this.minimumGraphSize;
// LATER: Fix flicker of scrollbar size in IE quirks mode
// after delayed call in window.resize event handler
if (min == null || min.width !== minw || min.height !== minh) {
this.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
}
// Updates auto-translate to include padding and graph size
const dx = pad.x / this.view.scale - pages.x * size.width;
const dy = pad.y / this.view.scale - pages.y * size.height;
if (
!this.autoTranslate &&
(this.view.translate.x !== dx || this.view.translate.y !== dy)
) {
this.autoTranslate = true;
this.view.x0 = pages.x;
this.view.y0 = pages.y;
// NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
// BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
// SHOULD MOVE TRANSLATE/SCALE TO VIEW.
const tx = this.view.translate.x;
const ty = this.view.translate.y;
this.view.setTranslate(dx, dy);
this.container.scrollLeft += (dx - tx) * this.view.scale;
this.container.scrollTop += (dy - ty) * this.view.scale;
this.autoTranslate = false;
return;
}
super.sizeDidChange();
}
}
}
// Creates the graph inside the given container
const graph = this.graph = new MyCustomGraph(this.el);
graph.panningHandler.ignoreCell = true;
graph.setPanning(true);
// Fits the number of background pages to the graph
graph.view.getBackgroundPageBounds = function() {
const layout = this.graph.getPageLayout();
const page = this.graph.getPageSize();
return new mxRectangle(
this.scale * (this.translate.x + layout.x * page.width),
this.scale * (this.translate.y + layout.y * page.height),
this.scale * layout.width * page.width,
this.scale * layout.height * page.height
);
};
/**
* Guesses autoTranslate to avoid another repaint (see below).
* Works if only the scale of the graph changes or if pages
* are visible and the visible pages do not change.
*/
const graphViewValidate = graph.view.validate;
graph.view.validate = function() {
if (
this.graph.container != null &&
mxUtils.hasScrollbars(this.graph.container)
) {
const pad = this.graph.getPagePadding();
const size = this.graph.getPageSize();
// Updating scrollbars here causes flickering in quirks and is not needed
// if zoom method is always used to set the current scale on the graph.
const tx = this.translate.x;
const ty = this.translate.y;
this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;
this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;
}
graphViewValidate.apply(this, arguments);
};
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
value: 'Hello,',
position: [20, 20],
size: [80, 30],
});
const v2 = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 30],
});
const e1 = graph.insertEdge({
parent,
source: v1,
target: v2,
});
});
// Sets initial scrollbar positions
window.setTimeout(() => {
const bounds = graph.getGraphBounds();
const width = Math.max(
bounds.width,
scrollTileSize.width * graph.view.scale
);
const height = Math.max(
bounds.height,
scrollTileSize.height * graph.view.scale
);
graph.container.scrollTop = Math.floor(
Math.max(
0,
bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)
)
);
graph.container.scrollLeft = Math.floor(
Math.max(
0,
bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)
)
);
}, 0);
}
}
export default ExtendCanvas;

282
src/pages/backgrounds/ExtendCanvas.ts Normal file
View File

@ -0,0 +1,282 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
* Converted to ES9 syntax/React by David Morrissey 2021
*/
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxGraphView from '../../mxgraph/view/graph/mxGraphView'
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxCell from '../../mxgraph/view/cell/mxCell';
import ExampleBase from "./ExampleBase";
/**
* Specifies the size of the size for "tiles" to be used for a graph with
* scrollbars but no visible background page. A good value is large
* enough to reduce the number of repaints that is caused for auto-
* translation, which depends on this value, and small enough to give
* a small empty buffer around the graph. Default is 400x400.
*/
const scrollTileSize = new mxRectangle(0, 0, 400, 400);
class ExtendCanvas extends ExampleBase {
constructor(props) {
super(props);
}
getHTML() {
// A container for the graph
return `
<h1>Extend canvas</h1>
This example demonstrates implementing an infinite canvas with
scrollbars.
<div id="el"
style="position: relative;
overflow: auto;
height: 241px;
background: url('editors/images/grid.gif');
cursor: default"
/>
`;
}
afterHTMLSet(): void {
// Executed after the HTML has been set
const el = document.getElementById("el");
el.id = '';
// Disables the built-in context menu
mxEvent.disableContextMenu(el);
// Creates the graph inside the given container
const graph: MyCustomGraph = new MyCustomGraph(el);
graph.panningHandler.ignoreCell = true;
graph.setPanning(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const v1: mxCell = graph.insertVertex({
parent,
value: 'Hello,',
position: [20, 20],
size: [80, 30],
});
const v2: mxCell = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 30],
});
const e1: mxCell = graph.insertEdge({
parent,
source: v1,
target: v2,
});
});
// Sets initial scrollbar positions
window.setTimeout(() => {
const bounds: mxRectangle = graph.getGraphBounds();
const width: number = Math.max(
bounds.width,
scrollTileSize.width * graph.view.scale
);
const height: number = Math.max(
bounds.height,
scrollTileSize.height * graph.view.scale
);
graph.container.scrollTop = Math.floor(
Math.max(
0,
bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)
)
);
graph.container.scrollLeft = Math.floor(
Math.max(
0,
bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)
)
);
}, 0);
}
}
class MyCustomGraph extends mxGraph {
autoTranslate: boolean;
createGraphView(): mxGraphView {
return new MyCustomGraphView(this);
}
/**
* Returns the padding for pages in page view with scrollbars.
*/
getPagePadding(): mxPoint {
return new mxPoint(
Math.max(0, Math.round(this.container.offsetWidth - 34)),
Math.max(0, Math.round(this.container.offsetHeight - 34))
);
}
/**
* Returns the size of the page format scaled with the page size.
*/
getPageSize(): mxRectangle {
return this.pageVisible
? new mxRectangle(
0,
0,
this.pageFormat.width * this.pageScale,
this.pageFormat.height * this.pageScale
)
: scrollTileSize;
}
/**
* Returns a rectangle describing the position and count of the
* background pages, where x and y are the position of the top,
* left page and width and height are the vertical and horizontal
* page count.
*/
getPageLayout(): mxRectangle {
const size: mxRectangle = this.pageVisible
? this.getPageSize()
: scrollTileSize;
const bounds = this.getGraphBounds();
if (bounds.width === 0 || bounds.height === 0) {
return new mxRectangle(0, 0, 1, 1);
}
// Computes untransformed graph bounds
const x: number = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
const y: number = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
const w: number = Math.floor(bounds.width / this.view.scale);
const h: number = Math.floor(bounds.height / this.view.scale);
const x0: number = Math.floor(x / size.width);
const y0: number = Math.floor(y / size.height);
const w0: number = Math.ceil((x + w) / size.width) - x0;
const h0: number = Math.ceil((y + h) / size.height) - y0;
return new mxRectangle(x0, y0, w0, h0);
}
getPreferredPageSize(bounds, width, height): mxRectangle {
const pages: mxRectangle = this.getPageLayout();
const size: mxRectangle = this.getPageSize();
return new mxRectangle(
0,
0,
pages.width * size.width,
pages.height * size.height
);
}
sizeDidChange(): mxRectangle {
if (this.container != null && mxUtils.hasScrollbars(this.container)) {
const pages: mxRectangle = this.getPageLayout();
const pad: mxPoint = this.getPagePadding();
const size: mxRectangle = this.getPageSize();
// Updates the minimum graph size
const minw: number = Math.ceil(
(2 * pad.x) / this.view.scale + pages.width * size.width
);
const minh: number = Math.ceil(
(2 * pad.y) / this.view.scale + pages.height * size.height
);
const min: number = this.minimumGraphSize;
// LATER: Fix flicker of scrollbar size in IE quirks mode
// after delayed call in window.resize event handler
if (min == null || min.width !== minw || min.height !== minh) {
this.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
}
// Updates auto-translate to include padding and graph size
const dx: number = pad.x / this.view.scale - pages.x * size.width;
const dy: number = pad.y / this.view.scale - pages.y * size.height;
if (
!this.autoTranslate &&
(this.view.translate.x !== dx || this.view.translate.y !== dy)
) {
this.autoTranslate = true;
this.view.x0 = pages.x;
this.view.y0 = pages.y;
// NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
// BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
// SHOULD MOVE TRANSLATE/SCALE TO VIEW.
const tx: number = this.view.translate.x;
const ty: number = this.view.translate.y;
this.view.setTranslate(dx, dy);
this.container.scrollLeft += (dx - tx) * this.view.scale;
this.container.scrollTop += (dy - ty) * this.view.scale;
this.autoTranslate = false;
return;
}
super.sizeDidChange();
}
}
}
class MyCustomGraphView extends mxGraphView {
/**
* Fits the number of background pages to the graph
*/
getBackgroundPageBounds(): mxRectangle {
const layout: mxRectangle = this.graph.getPageLayout();
const page: mxRectangle = this.graph.getPageSize();
return new mxRectangle(
this.scale * (this.translate.x + layout.x * page.width),
this.scale * (this.translate.y + layout.y * page.height),
this.scale * layout.width * page.width,
this.scale * layout.height * page.height
);
}
/**
* Guesses autoTranslate to avoid another repaint (see below).
* Works if only the scale of the graph changes or if pages
* are visible and the visible pages do not change.
*/
validate(): void {
if (
this.graph.container != null &&
mxUtils.hasScrollbars(this.graph.container)
) {
const pad: mxPoint = this.graph.getPagePadding();
const size: mxRectangle = this.graph.getPageSize();
// Updating scrollbars here causes flickering in quirks and is not needed
// if zoom method is always used to set the current scale on the graph.
//const tx = this.translate.x;
//const ty = this.translate.y;
this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;
this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;
}
super.validate();
};
}
export default ExtendCanvas;

10
src/pages/backgrounds/Grid.js
View File

@ -4,13 +4,13 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxLog from '../../mxgraph/util/mxLog';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxLog from '../../mxgraph/util/gui/mxLog';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxGraphView from '../../mxgraph/view/mxGraphView';
import mxGraphView from '../../mxgraph/view/graph/mxGraphView';
class Grid extends React.Component {
constructor(props) {

4
src/pages/basic/HelloWorld.js
View File

@ -4,8 +4,8 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
class HelloWorld extends React.Component {

2
src/pages/basic/Template.js
View File

@ -9,7 +9,7 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxCodec from '../../mxgraph/io/mxCodec';

200
src/pages/connections/Anchors.js
View File

@ -4,109 +4,22 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxShape from '../../mxgraph/shape/mxShape';
import mxConnectionConstraint from '../../mxgraph/view/mxConnectionConstraint';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxPolyline from '../../mxgraph/shape/mxPolyline';
import mxCellState from '../../mxgraph/view/mxCellState';
import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxPolyline from '../../mxgraph/shape/edge/mxPolyline';
import mxCellState from '../../mxgraph/view/cell/mxCellState';
import mxGeometry from "../../mxgraph/util/datatypes/mxGeometry";
import mxConnectionHandler from "../../mxgraph/handler/mxConnectionHandler";
class Anchors extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
// Overridden to define per-shape connection points
mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) {
if (terminal != null && terminal.shape != null) {
if (terminal.shape.stencil != null) {
if (terminal.shape.stencil.constraints != null) {
return terminal.shape.stencil.constraints;
}
} else if (terminal.shape.constraints != null) {
return terminal.shape.constraints;
}
}
return null;
};
// Defines the default constraints for all shapes
mxShape.prototype.constraints = [
new mxConnectionConstraint(new mxPoint(0.25, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(0.75, 1), true),
];
// Edges have no connection points
mxPolyline.prototype.constraints = null;
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
// Creates the graph inside the given this.el
const graph = new mxGraph(this.el);
graph.setConnectable(true);
// Enables connect preview for the default edge style
graph.connectionHandler.createEdgeState = function(me) {
const edge = graph.createEdge(null, null, null, null, null);
return new mxCellState(
this.graph.view,
edge,
this.graph.getCellStyle(edge)
);
};
// Specifies the default edge style
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
'orthogonalEdgeStyle';
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex({
parent,
value: 'Hello,',
position: [20, 20],
size: [80, 30],
});
const v2 = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 30],
});
const e1 = graph.insertEdge({
parent,
value: '',
position: v1,
size: v2,
});
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
render() {
// A container for the graph
return (
@ -129,6 +42,103 @@ class Anchors extends React.Component {
</>
);
};
componentDidMount() {
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
class MyCustomConnectionHandler extends mxConnectionHandler {
// Enables connect preview for the default edge style
createEdgeState(me) {
const edge = graph.createEdge(null, null, null, null, null);
return new mxCellState(
this.graph.view,
edge,
this.graph.getCellStyle(edge)
);
}
}
class MyCustomGraph extends mxGraph {
getAllConnectionConstraints(terminal, source) {
// Overridden to define per-shape connection points
if (terminal != null && terminal.shape != null) {
if (terminal.shape.stencil != null) {
if (terminal.shape.stencil.constraints != null) {
return terminal.shape.stencil.constraints;
}
} else if (terminal.shape.constraints != null) {
return terminal.shape.constraints;
}
}
return null;
}
createConnectionHandler() {
return new MyCustomConnectionHandler(this);
}
}
class MyCustomGeometryClass extends mxGeometry {
// Defines the default constraints for the vertices
constraints = [
new mxConnectionConstraint(new mxPoint(0.25, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(0.75, 1), true),
];
}
// Edges have no connection points
mxPolyline.prototype.constraints = null;
// Creates the graph inside the given this.el
const graph = new MyCustomGraph(this.el);
graph.setConnectable(true);
// Specifies the default edge style
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
'orthogonalEdgeStyle';
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
value: 'Hello,',
position: [20, 20],
size: [80, 30],
geometryClass: MyCustomGeometryClass,
});
const v2 = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 30],
geometryClass: MyCustomGeometryClass,
});
const e1 = graph.insertEdge({
parent,
value: '',
position: v1,
size: v2,
});
});
}
}
export default Anchors;

4
src/pages/connections/EdgeTolerance.js
View File

@ -4,8 +4,8 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxUtils from '../../mxgraph/util/mxUtils';
class EdgeTolerance extends React.Component {

8
src/pages/connections/FixedPoints.js
View File

@ -4,15 +4,15 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxConstraintHandler from '../../mxgraph/handler/mxConstraintHandler';
import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
import mxConnectionConstraint from '../../mxgraph/view/mxConnectionConstraint';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxCellState from '../../mxgraph/view/mxCellState';
import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxCellState from '../../mxgraph/view/cell/mxCellState';
class FixedPoints extends React.Component {
constructor(props) {

8
src/pages/connections/HelloPort.js
View File

@ -4,12 +4,12 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxCodec from '../../mxgraph/io/mxCodec';
import mxUtils from '../../mxgraph/util/mxUtils';

10
src/pages/connections/Orthogonal.js
View File

@ -4,16 +4,16 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
import mxGuide from '../../mxgraph/util/mxGuide';
import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
import mxGraphView from '../../mxgraph/view/mxGraphView';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxCellState from '../../mxgraph/view/mxCellState';
import mxGraphView from '../../mxgraph/view/graph/mxGraphView';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxCellState from '../../mxgraph/view/cell/mxCellState';
class Orthogonal extends React.Component {
constructor(props) {

10
src/pages/connections/PortRefs.js
View File

@ -4,16 +4,16 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxConstraintHandler from '../../mxgraph/handler/mxConstraintHandler';
import mxImage from '../../mxgraph/util/mxImage';
import mxImage from '../../mxgraph/util/image/mxImage';
import mxShape from '../../mxgraph/shape/mxShape';
import mxTriangle from '../../mxgraph/shape/mxTriangle';
import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
import mxConnectionConstraint from '../../mxgraph/view/mxConnectionConstraint';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxConstants from '../../mxgraph/util/mxConstants';
class PortRefs extends React.Component {

8
src/pages/dnd_copypaste/Clipboard.js
View File

@ -4,14 +4,14 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxClipboard from '../../mxgraph/util/mxClipboard';
import mxClipboard from '../../mxgraph/util/storage/mxClipboard';
import mxClient from '../../mxgraph/mxClient';
import mxCodec from '../../mxgraph/io/mxCodec';
import mxGraphModel from '../../mxgraph/model/mxGraphModel';
import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
class Clipboard extends React.Component {
constructor(props) {

10
src/pages/dnd_copypaste/DragSource.js
View File

@ -4,13 +4,13 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxCell from '../../mxgraph/model/mxCell';
import mxGeometry from '../../mxgraph/model/mxGeometry';
import mxCell from '../../mxgraph/view/cell/mxCell';
import mxGeometry from '../../mxgraph/util/datatypes/mxGeometry';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxDragSource from '../../mxgraph/util/mxDragSource';
import mxDragSource from '../../mxgraph/util/drag_pan/mxDragSource';
import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
import mxGuide from '../../mxgraph/util/mxGuide';
import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';

4
src/pages/dnd_copypaste/Drop.js
View File

@ -4,8 +4,8 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxClient from '../../mxgraph/mxClient';

4
src/pages/editing/Editing.js
View File

@ -4,8 +4,8 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';

4
src/pages/effects/Animation.js
View File

@ -4,8 +4,8 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
class Animation extends React.Component {
constructor(props) {

6
src/pages/effects/Morph.js
View File

@ -4,10 +4,10 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxMorphing from '../../mxgraph/util/mxMorphing';
import mxMorphing from '../../mxgraph/util/animate/mxMorphing';
import mxUtils from '../../mxgraph/util/mxUtils';
class Morph extends React.Component {

8
src/pages/effects/Overlays.js
View File

@ -4,11 +4,11 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxCellTracker from '../../mxgraph/handler/mxCellTracker';
import mxCellOverlay from '../../mxgraph/view/mxCellOverlay';
import mxImage from '../../mxgraph/util/mxImage';
import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
import mxImage from '../../mxgraph/util/image/mxImage';
import mxUtils from '../../mxgraph/util/mxUtils';
class Overlays extends React.Component {

6
src/pages/events/Boundary.js
View File

@ -4,11 +4,11 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
import mxUtils from '../../mxgraph/util/mxUtils';

10
src/pages/events/Events.js
View File

@ -4,17 +4,17 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
import mxParallelEdgeLayout from '../../mxgraph/layout/mxParallelEdgeLayout';
import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
import mxImage from '../../mxgraph/util/mxImage';
import mxImage from '../../mxgraph/util/image/mxImage';
import mxClient from '../../mxgraph/mxClient';
class Events extends React.Component {

4
src/pages/icons_images/ContextIcons.js
View File

@ -4,8 +4,8 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxVertexHandler from '../../mxgraph/handler/mxVertexHandler';
import mxUtils from '../../mxgraph/util/mxUtils';

12
src/pages/icons_images/Control.js
View File

@ -4,14 +4,14 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
import mxImageShape from '../../mxgraph/shape/mxImageShape';
import mxImage from '../../mxgraph/util/mxImage';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
import mxImageShape from '../../mxgraph/shape/node/mxImageShape';
import mxImage from '../../mxgraph/util/image/mxImage';
class Control extends React.Component {
constructor(props) {

4
src/pages/icons_images/FixedIcon.js
View File

@ -4,12 +4,12 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxLabel from '../../mxgraph/shape/mxLabel';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
class FixedIcon extends React.Component {
constructor(props) {

8
src/pages/icons_images/HoverIcons.js
View File

@ -4,13 +4,13 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxImage from '../../mxgraph/util/mxImage';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
import mxImage from '../../mxgraph/util/image/mxImage';
class HoverIcons extends React.Component {
constructor(props) {

10
src/pages/icons_images/Images.js
View File

@ -4,14 +4,14 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxImage from '../../mxgraph/util/mxImage';
import mxPerimeter from '../../mxgraph/view/mxPerimeter';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
import mxImage from '../../mxgraph/util/image/mxImage';
import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
class Images extends React.Component {
constructor(props) {

4
src/pages/icons_images/Indicators.js
View File

@ -4,9 +4,9 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
class Indicators extends React.Component {

12
src/pages/icons_images/Markers.js
View File

@ -4,14 +4,14 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
import mxCylinder from '../../mxgraph/shape/mxCylinder';
import mxMarker from '../../mxgraph/shape/mxMarker';
import mxArrow from '../../mxgraph/shape/mxArrow';
import mxCylinder from '../../mxgraph/shape/node/mxCylinder';
import mxMarker from '../../mxgraph/shape/edge/mxMarker';
import mxArrow from '../../mxgraph/shape/edge/mxArrow';
class Markers extends React.Component {
constructor(props) {

2
src/pages/labels/LabelPosition.js
View File

@ -4,7 +4,7 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
class LabelPosition extends React.Component {
constructor(props) {

4
src/pages/labels/Labels.js
View File

@ -4,11 +4,11 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
class Labels extends React.Component {
constructor(props) {

6
src/pages/labels/Perimeter.js
View File

@ -4,11 +4,11 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxGraphView from '../../mxgraph/view/mxGraphView';
import mxGraphView from '../../mxgraph/view/graph/mxGraphView';
class Perimeter extends React.Component {
constructor(props) {

8
src/pages/labels/SecondLabel.js
View File

@ -4,12 +4,12 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxRectangleShape from '../../mxgraph/shape/mxRectangleShape';
import mxRectangleShape from '../../mxgraph/shape/node/mxRectangleShape';
import mxText from '../../mxgraph/shape/mxText';
class SecondLabel extends React.Component {

2
src/pages/labels/Wrapping.js
View File

@ -4,7 +4,7 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
class Wrapping extends React.Component {
constructor(props) {

14
src/pages/layout/AutoLayout.js
View File

@ -4,19 +4,19 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxClient from '../../mxgraph/mxClient';
import mxMorphing from '../../mxgraph/util/mxMorphing';
import mxMorphing from '../../mxgraph/util/animate/mxMorphing';
import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
import mxHierarchicalLayout from '../../mxgraph/layout/hierarchical/mxHierarchicalLayout';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxCellOverlay from '../../mxgraph/view/mxCellOverlay';
import mxImage from '../../mxgraph/util/mxImage';
import mxEventObject from '../../mxgraph/util/mxEventObject';
import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
import mxImage from '../../mxgraph/util/image/mxImage';
import mxEventObject from '../../mxgraph/util/event/mxEventObject';
import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
class AutoLayout extends React.Component {
constructor(props) {

6
src/pages/layout/Collapse.js
View File

@ -4,9 +4,9 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxGraphModel from '../../mxgraph/model/mxGraphModel';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
class Collapse extends React.Component {
constructor(props) {

4
src/pages/layout/Constituent.js
View File

@ -4,8 +4,8 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';

6
src/pages/layout/Folding.js
View File

@ -4,10 +4,10 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
import mxStackLayout from '../../mxgraph/layout/mxStackLayout';
class Folding extends React.Component {

2
src/pages/layout/Groups.js
View File

@ -4,7 +4,7 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
import mxPopupMenuHandler from '../../mxgraph/handler/mxPopupMenuHandler';

12
src/pages/layout/Handles.js
View File

@ -4,15 +4,15 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxVertexHandler from '../../mxgraph/handler/mxVertexHandler';
import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxCylinder from '../../mxgraph/shape/mxCylinder';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
import mxCylinder from '../../mxgraph/shape/node/mxCylinder';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxHandle from '../../mxgraph/handler/mxHandle';
class Handles extends React.Component {

6
src/pages/layout/HierarchicalLayout.js
View File

@ -4,13 +4,13 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxHierarchicalLayout from '../../mxgraph/layout/hierarchical/mxHierarchicalLayout';
import mxFastOrganicLayout from '../../mxgraph/layout/mxFastOrganicLayout';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxPerimeter from '../../mxgraph/view/mxPerimeter';
import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
import mxUtils from '../../mxgraph/util/mxUtils';
class HierarchicalLayout extends React.Component {

8
src/pages/layout/Layers.js
View File

@ -4,10 +4,10 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxCell from '../../mxgraph/model/mxCell';
import mxGraphModel from '../../mxgraph/model/mxGraphModel';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxCell from '../../mxgraph/view/cell/mxCell';
import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxUtils from '../../mxgraph/util/mxUtils';
class Layers extends React.Component {

22
src/pages/layout/OrgChart.js
View File

@ -7,23 +7,23 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxPrintPreview from '../../mxgraph/view/mxPrintPreview';
import mxPrintPreview from '../../mxgraph/view/graph/mxPrintPreview';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxCellOverlay from '../../mxgraph/view/mxCellOverlay';
import mxImage from '../../mxgraph/util/mxImage';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
import mxImage from '../../mxgraph/util/image/mxImage';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxWindow from '../../mxgraph/util/mxWindow';
import mxToolbar from '../../mxgraph/util/mxToolbar';
import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
import mxWindow from '../../mxgraph/util/gui/mxWindow';
import mxToolbar from '../../mxgraph/util/gui/mxToolbar';
import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
import mxCompactTreeLayout from '../../mxgraph/layout/mxCompactTreeLayout';
import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
import mxClient from '../../mxgraph/mxClient';
import mxOutline from '../../mxgraph/view/mxOutline';
import mxOutline from '../../mxgraph/view/graph/mxOutline';
class OrgChart extends React.Component {
constructor(props) {

4
src/pages/layout/RadialTreeLayout.js
View File

@ -4,9 +4,9 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxPerimeter from '../../mxgraph/view/mxPerimeter';
import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxRadialTreeLayout from '../../mxgraph/layout/mxRadialTreeLayout';

18
src/pages/layout/SwimLanes.js
View File

@ -4,21 +4,21 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxRubberband from '../../mxgraph/handler/mxRubberband';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxStackLayout from '../../mxgraph/layout/mxStackLayout';
import mxSwimlaneManager from '../../mxgraph/view/mxSwimlaneManager';
import mxGraphModel from '../../mxgraph/model/mxGraphModel';
import mxSwimlaneManager from '../../mxgraph/view/graph/mxSwimlaneManager';
import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxPerimeter from '../../mxgraph/view/mxPerimeter';
import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxEditor from '../../mxgraph/editor/mxEditor';
import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
import mxImage from '../../mxgraph/util/mxImage';
import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
import mxImage from '../../mxgraph/util/image/mxImage';
import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
class SwimLanes extends React.Component {
constructor(props) {

18
src/pages/layout/Tree.js
View File

@ -4,20 +4,20 @@
*/
import React from 'react';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxPoint from '../../mxgraph/util/mxPoint';
import mxGraphView from '../../mxgraph/view/mxGraphView';
import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
import mxCylinder from '../../mxgraph/shape/mxCylinder';
import mxImage from '../../mxgraph/util/mxImage';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxGraphView from '../../mxgraph/view/graph/mxGraphView';
import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
import mxCylinder from '../../mxgraph/shape/node/mxCylinder';
import mxImage from '../../mxgraph/util/image/mxImage';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
import mxCompactTreeLayout from '../../mxgraph/layout/mxCompactTreeLayout';
import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
import mxRectangle from '../../mxgraph/util/mxRectangle';
import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxClient from '../../mxgraph/mxClient';
import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
class Tree extends React.Component {
constructor(props) {

8
src/pages/misc/DynamicLoading.js
View File

@ -4,14 +4,14 @@
*/
import React from 'react';
import mxEvent from '../../mxgraph/util/mxEvent';
import mxGraph from '../../mxgraph/view/mxGraph';
import mxEvent from '../../mxgraph/util/event/mxEvent';
import mxGraph from '../../mxgraph/view/graph/mxGraph';
import mxText from '../../mxgraph/shape/mxText';
import mxUtils from '../../mxgraph/util/mxUtils';
import mxConstants from '../../mxgraph/util/mxConstants';
import mxCodec from '../../mxgraph/io/mxCodec';
import mxEffects from '../../mxgraph/util/mxEffects';
import mxPerimeter from '../../mxgraph/view/mxPerimeter';
import mxEffects from '../../mxgraph/util/animate/mxEffects';
import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
class DynamicLoading extends React.Component {
constructor(props) {

Some files were not shown because too many files have changed in this diff Show More