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

finished converting most main base modules to typescript+eslint

development
mcyph 2021-04-09 15:26:04 +10:00
parent 889156b314
commit c372e77297
62 changed files with 668 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/mxgraph/atomic_changes/mxCellAttributeChange.js
View File

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

3
src/mxgraph/atomic_changes/mxGeometryChange.js
View File

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

3
src/mxgraph/atomic_changes/mxTerminalChange.js
View File

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

45
src/mxgraph/handler/mxCellHighlight.ts
View File

@ -42,6 +42,7 @@ class mxCellHighlight {
this.repaintHandler = () => {
// Updates reference to state
if (this.state != null) {
// @ts-ignore
const tmp = this.graph.view.getState(this.state.cell);
if (tmp == null) {
@ -71,17 +72,17 @@ class mxCellHighlight {
}
// TODO: Document me!!
highlightColor: string | null;
highlightColor: string | null=null;
strokeWidth: number | null;
strokeWidth: number | null=null;
dashed: boolean | null;
dashed: boolean=false;
opacity: number | null;
opacity: number=100;
repaintHandler: Function | null;
repaintHandler: Function | null=null;
shape: mxShape | null;
shape: mxShape | null=null;
/**
* Variable: keepOnTop
@ -149,10 +150,14 @@ class mxCellHighlight {
if (
!this.keepOnTop &&
// @ts-ignore
this.shape.node.parentNode.firstChild !== this.shape.node
) {
// @ts-ignore
this.shape.node.parentNode.insertBefore(
// @ts-ignore
this.shape.node,
// @ts-ignore
this.shape.node.parentNode.firstChild
);
}
@ -164,21 +169,21 @@ class mxCellHighlight {
* Creates and returns the highlight shape for the given state.
*/
createShape(): mxShape {
const shape = this.graph.cellRenderer.createShape(this.state);
const shape = <mxShape>(<mxGraph>this.graph).cellRenderer.createShape(<mxCellState>this.state);
shape.svgStrokeTolerance = this.graph.tolerance;
shape.points = this.state.absolutePoints;
shape.apply(this.state);
shape.svgStrokeTolerance = (<mxGraph>this.graph).tolerance;
shape.points = (<mxCellState>this.state).absolutePoints;
shape.apply(<mxCellState>this.state);
shape.stroke = this.highlightColor;
shape.opacity = this.opacity;
shape.isDashed = this.dashed;
shape.isShadow = false;
shape.dialect = mxConstants.DIALECT_SVG;
shape.init(this.graph.getView().getOverlayPane());
shape.init((<mxGraph>this.graph).getView().getOverlayPane());
mxEvent.redirectMouseEvents(shape.node, this.graph, this.state);
if (this.graph.dialect !== mxConstants.DIALECT_SVG) {
if ((<mxGraph>this.graph).dialect !== mxConstants.DIALECT_SVG) {
shape.pointerEvents = false;
} else {
shape.svgPointerEvents = 'stroke';
@ -192,7 +197,7 @@ class mxCellHighlight {
*
* Returns the stroke width.
*/
getStrokeWidth(state: mxCellState | null = null): number {
getStrokeWidth(state: mxCellState | null = null): number | null {
return this.strokeWidth;
}
@ -205,6 +210,7 @@ class mxCellHighlight {
if (this.state != null && this.shape != null) {
this.shape.scale = this.state.view.scale;
// @ts-ignore
if (this.graph.model.isEdge(this.state.cell)) {
this.shape.strokewidth = this.getStrokeWidth();
this.shape.points = this.state.absolutePoints;
@ -219,7 +225,7 @@ class mxCellHighlight {
this.shape.rotation = Number(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
);
this.shape.strokewidth = this.getStrokeWidth() / this.state.view.scale;
this.shape.strokewidth = <number>this.getStrokeWidth() / this.state.view.scale;
this.shape.outline = true;
}
@ -246,7 +252,7 @@ class mxCellHighlight {
*
* Marks the <markedState> and fires a <mark> event.
*/
highlight(state: mxCellState): void {
highlight(state: mxCellState | null=null): void {
if (this.state !== state) {
if (this.shape != null) {
this.shape.destroy();
@ -268,7 +274,7 @@ class mxCellHighlight {
isHighlightAt(x: number, y: number): boolean {
let hit = false;
if (this.shape != null && document.elementFromPoint != null) {
let elt: Node & ParentNode = document.elementFromPoint(x, y);
let elt: (Node & ParentNode) | null = document.elementFromPoint(x, y);
while (elt != null) {
if (elt === this.shape.node) {
@ -287,9 +293,10 @@ class mxCellHighlight {
* Destroys the handler and all its resources and DOM nodes.
*/
destroy(): void {
this.graph.getView().removeListener(this.resetHandler);
this.graph.getView().removeListener(this.repaintHandler);
this.graph.getModel().removeListener(this.repaintHandler);
const graph = <mxGraph>this.graph;
graph.getView().removeListener(this.resetHandler);
graph.getView().removeListener(this.repaintHandler);
graph.getModel().removeListener(this.repaintHandler);
if (this.shape != null) {
this.shape.destroy();

2
src/mxgraph/shape/edge/mxMarker.js
View File

@ -16,7 +16,7 @@ class mxMarker {
*
* Maps from markers names to functions to paint the markers.
*/
static markers: [];
static markers = [];
/**
* Function: addMarker

14
src/mxgraph/shape/mxActor.ts
View File

@ -3,9 +3,9 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxShape from './mxShape';
import mxSvgCanvas2D from "../util/canvas/mxSvgCanvas2D";
import mxRectangle from 'mxgraph/util/datatypes/mxRectangle';
import mxShape from './mxShape';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
/**
* Class: mxActor
@ -48,10 +48,12 @@ import mxRectangle from 'mxgraph/util/datatypes/mxRectangle';
* 1. This is stored in <strokewidth>.
*/
class mxActor extends mxShape {
constructor(bounds: mxRectangle | null=null,
fill: string | null=null,
stroke: string | null=null,
strokewidth: number=1) {
constructor(
bounds: mxRectangle | null = null,
fill: string | null = null,
stroke: string | null = null,
strokewidth: number = 1
) {
super();
this.bounds = bounds;
this.fill = fill;

23
src/mxgraph/shape/mxShape.ts
View File

@ -13,6 +13,7 @@ import mxClient from '../mxClient';
import mxCellState from '../util/datatypes/mxCellState';
import mxAbstractCanvas2D from '../util/canvas/mxAbstractCanvas2D';
import mxStencil from './node/mxStencil';
import mxCellOverlay from "../view/cell/mxCellOverlay";
const toBool = (i: any): boolean => {
if (i === 0) return false;
@ -99,7 +100,7 @@ class mxShape {
*
* container - DOM node that will contain the shape.
*/
init(container: SVGElement | null = null) {
init(container: HTMLElement | SVGElement | null = null) {
if (this.node == null) {
this.node = this.create(container);
@ -125,14 +126,23 @@ class mxShape {
}
// TODO: Document me!!
// Assigned in mxCellRenderer
preserveImageAspect: boolean=false;
overlay: mxCellOverlay | null=null;
indicator: mxShape | null=null;
indicatorShape: typeof mxShape | null=null;
// Assigned in mxCellHighlight
opacity: number | null=100;
isDashed: boolean=false;
fill: string | null = null;
gradient: string | null = null;
gradientDirection: string | null = null;
opacity: number | null = null;
fillOpacity: number | null = null;
strokeOpacity: number | null = null;
@ -159,8 +169,6 @@ class mxShape {
isShadow: boolean = false;
isDashed: boolean = false;
isRounded: boolean = false;
rotation: number | null = null;
@ -214,7 +222,7 @@ class mxShape {
*
* Holds the array of <mxPoints> that specify the points of this shape.
*/
points: mxPoint[] | null = null;
points: (mxPoint | null)[] | null = null;
/**
* Variable: node
@ -349,7 +357,7 @@ class mxShape {
*
* container - DOM node that will contain the shape.
*/
create(container: SVGElement | null): SVGGElement {
create(container: SVGElement | HTMLElement | null): SVGGElement {
return document.createElementNS("http://www.w3.org/2000/svg", "g");
}
@ -709,6 +717,7 @@ class mxShape {
for (let i = 0; i < this.points.length; i += 1) {
if (this.points[i] != null) {
// @ts-ignore
pts.push(new mxPoint(this.points[i].x / s, this.points[i].y / s));
}
}

111
src/mxgraph/shape/mxText.ts
View File

@ -72,7 +72,7 @@ class mxText extends mxShape {
value: string,
bounds: mxRectangle,
align: string=mxConstants.ALIGN_CENTER,
valign: string=mxConstants.ALIGN_MIDDLE,
valign: string | null=mxConstants.ALIGN_MIDDLE,
color: string='black',
family: string=mxConstants.DEFAULT_FONTFAMILY,
size: number=mxConstants.DEFAULT_FONTSIZE,
@ -89,9 +89,11 @@ class mxText extends mxShape {
clipped: boolean=false,
overflow: string='visible',
labelPadding: number=0,
textDirection
textDirection: string=mxConstants.DEFAULT_TEXT_DIRECTION
) {
super();
valign = valign != null ? valign : mxConstants.ALIGN_MIDDLE;
this.value = value;
this.bounds = bounds;
this.color = color;
@ -118,7 +120,7 @@ class mxText extends mxShape {
}
// TODO: Document me!
value: string;
value: string | HTMLElement | SVGGElement | null;
bounds: mxRectangle;
align: string=mxConstants.ALIGN_CENTER;
valign: string=mxConstants.ALIGN_MIDDLE;
@ -138,8 +140,8 @@ class mxText extends mxShape {
clipped: boolean=false;
overflow: string='visible';
labelPadding: number=0;
textDirection;
margin: mxRectangle | null=null;
textDirection: string=mxConstants.DEFAULT_TEXT_DIRECTION;
margin: mxPoint | null=null;
unrotatedBoundingBox: mxRectangle | null=null;
flipH: boolean=false;
flipV: boolean=false;
@ -213,7 +215,7 @@ class mxText extends mxShape {
*
* Contains the last rendered text value. Used for caching.
*/
lastValue: string | null = null;
lastValue: string | HTMLElement | SVGGElement | null = null;
/**
* Variable: cacheEnabled
@ -298,10 +300,10 @@ class mxText extends mxShape {
// Handles trailing newlines to make sure they are visible in rendering output
val =
!mxUtils.isNode(this.value) && this.replaceLinefeeds && fmt === 'html'
? val.replace(/\n/g, '<br/>')
? (<string>val).replace(/\n/g, '<br/>')
: val;
let dir = this.textDirection;
let dir: string | null = this.textDirection;
if (dir === mxConstants.TEXT_DIRECTION_AUTO && !realHtml) {
dir = this.getAutoDirection();
@ -346,6 +348,7 @@ class mxText extends mxShape {
(mxUtils.isNode(this.value) ||
this.dialect === mxConstants.DIALECT_STRICTHTML)
) {
// @ts-ignore
if (this.node.nodeName === 'DIV') {
this.redrawHtmlShape();
this.updateBoundingBox();
@ -393,8 +396,8 @@ class mxText extends mxShape {
this.spacingBottom = 2;
this.spacingLeft = 2;
this.horizontal = true;
delete this.background;
delete this.border;
this.background = null;
this.border = null;
this.textDirection = mxConstants.DEFAULT_TEXT_DIRECTION;
this.margin = null;
}
@ -502,8 +505,8 @@ class mxText extends mxShape {
this.updateMargin();
}
this.flipV = null;
this.flipH = null;
this.flipV = false;
this.flipH = false;
}
/**
@ -517,7 +520,7 @@ class mxText extends mxShape {
getAutoDirection() {
// Looks for strong (directional) characters
const tmp = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec(
this.value
<string>this.value
);
// Returns the direction defined by the character
@ -537,9 +540,11 @@ class mxText extends mxShape {
if (result != null) {
// Rendered with no foreignObject
if (result.ownerSVGElement == null) {
// @ts-ignore
result = this.node.firstChild.firstChild;
} else {
// Innermost DIV that contains the actual content
// @ts-ignore
result = result.firstChild.firstChild.firstChild.firstChild.firstChild;
}
}
@ -591,12 +596,16 @@ class mxText extends mxShape {
node.firstChild.firstChild.nodeName === 'foreignObject'
) {
// Uses second inner DIV for font metrics
// @ts-ignore
node = node.firstChild.firstChild.firstChild.firstChild;
// @ts-ignore
oh = node.offsetHeight * this.scale;
if (this.overflow === 'width') {
// @ts-ignore
ow = this.boundingBox.width;
} else {
// @ts-ignore
ow = node.offsetWidth * this.scale;
}
} else {
@ -632,12 +641,14 @@ class mxText extends mxShape {
}
if (this.boundingBox != null) {
const margin = <mxRectangle>this.margin;
if (rot !== 0) {
// Accounts for pre-rotated x and y
const bbox = <mxRectangle>mxUtils.getBoundingBox(
new mxRectangle(
this.margin.x * this.boundingBox.width,
this.margin.y * this.boundingBox.height,
margin.x * this.boundingBox.width,
margin.y * this.boundingBox.height,
this.boundingBox.width,
this.boundingBox.height
),
@ -647,17 +658,17 @@ class mxText extends mxShape {
this.unrotatedBoundingBox = mxRectangle.fromRectangle(this.boundingBox);
this.unrotatedBoundingBox.x +=
this.margin.x * this.unrotatedBoundingBox.width;
margin.x * this.unrotatedBoundingBox.width;
this.unrotatedBoundingBox.y +=
this.margin.y * this.unrotatedBoundingBox.height;
margin.y * this.unrotatedBoundingBox.height;
this.boundingBox.x += bbox.x;
this.boundingBox.y += bbox.y;
this.boundingBox.width = bbox.width;
this.boundingBox.height = bbox.height;
} else {
this.boundingBox.x += this.margin.x * this.boundingBox.width;
this.boundingBox.y += this.margin.y * this.boundingBox.height;
this.boundingBox.x += margin.x * this.boundingBox.width;
this.boundingBox.y += margin.y * this.boundingBox.height;
this.unrotatedBoundingBox = null;
}
}
@ -693,6 +704,7 @@ class mxText extends mxShape {
return (
!this.horizontal &&
this.state != null &&
// @ts-ignore
this.state.view.graph.model.isVertex(this.state.cell)
);
}
@ -702,7 +714,11 @@ class mxText extends mxShape {
*
* Sets the state of the canvas for drawing the shape.
*/
configureCanvas(c, x, y, w, h) {
configureCanvas(c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number) {
super.configureCanvas(c, x, y, w, h);
c.setFontColor(this.color);
@ -796,6 +812,8 @@ class mxText extends mxShape {
`position: absolute; left: ${Math.round(this.bounds.x)}px; ` +
`top: ${Math.round(this.bounds.y)}px; pointer-events: none; `;
const block = this.getTextCss();
const margin = <mxPoint>this.margin;
const node = <SVGGElement>this.node;
mxSvgCanvas2D.createCss(
w + 2,
@ -810,13 +828,20 @@ class mxText extends mxShape {
flex,
block,
this.scale,
(dx, dy, flex, item, block, ofl) => {
(
dx: number,
dy: number,
flex: string,
item: string,
block: string,
ofl: string
) => {
const r = this.getTextRotation();
let tr =
(this.scale !== 1 ? `scale(${this.scale}) ` : '') +
(r !== 0 ? `rotate(${r}deg) ` : '') +
(this.margin.x !== 0 || this.margin.y !== 0
? `translate(${this.margin.x * 100}%,${this.margin.y * 100}%)`
(margin.x !== 0 || margin.y !== 0
? `translate(${margin.x * 100}%,${margin.y * 100}%)`
: '');
if (tr !== '') {
@ -834,22 +859,25 @@ class mxText extends mxShape {
}
}
if (this.opacity < 100) {
block += `opacity: ${this.opacity / 100}; `;
if (<number>this.opacity < 100) {
block += `opacity: ${<number>this.opacity / 100}; `;
}
this.node.setAttribute('style', flex);
node.setAttribute('style', flex);
const html = mxUtils.isNode(this.value)
// @ts-ignore
? this.value.outerHTML
: this.getHtmlValue();
if (this.node.firstChild == null) {
this.node.innerHTML = `<div><div>${html}</div></div>`;
if (node.firstChild == null) {
node.innerHTML = `<div><div>${html}</div></div>`;
}
this.node.firstChild.firstChild.setAttribute('style', block);
this.node.firstChild.setAttribute('style', item);
// @ts-ignore
node.firstChild.firstChild.setAttribute('style', block);
// @ts-ignore
node.firstChild.setAttribute('style', item);
}
);
}
@ -859,8 +887,9 @@ class mxText extends mxShape {
*
* Sets the inner HTML of the given element to the <value>.
*/
updateInnerHtml(elt) {
updateInnerHtml(elt: HTMLElement) {
if (mxUtils.isNode(this.value)) {
// @ts-ignore
elt.innerHTML = this.value.outerHTML;
} else {
let val = this.value;
@ -885,9 +914,11 @@ class mxText extends mxShape {
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
updateValue() {
const node = <SVGGElement>this.node;
if (mxUtils.isNode(this.value)) {
this.node.innerHTML = '';
this.node.appendChild(this.value);
node.innerHTML = '';
node.appendChild(<HTMLElement | SVGGElement>this.value);
} else {
let val = this.value;
@ -909,11 +940,11 @@ class mxText extends mxShape {
if (this.overflow === 'fill' || this.overflow === 'width') {
if (bg != null) {
this.node.style.backgroundColor = bg;
node.style.backgroundColor = bg;
}
if (bd != null) {
this.node.style.border = `1px solid ${bd}`;
node.style.border = `1px solid ${bd}`;
}
} else {
let css = '';
@ -937,10 +968,10 @@ class mxText extends mxShape {
`padding-bottom:1px;padding-right:1px;line-height:${lh}">${val}</div>`;
}
this.node.innerHTML = val;
node.innerHTML = val;
// Sets text direction
const divs = this.node.getElementsByTagName('div');
const divs = node.getElementsByTagName('div');
if (divs.length > 0) {
let dir = this.textDirection;
@ -969,9 +1000,10 @@ class mxText extends mxShape {
*
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
updateFont(node) {
updateFont(node: HTMLElement | SVGGElement) {
const { style } = node;
// @ts-ignore
style.lineHeight = mxConstants.ABSOLUTE_LINE_HEIGHT
? `${this.size * mxConstants.LINE_HEIGHT}px`
: mxConstants.LINE_HEIGHT;
@ -1061,6 +1093,7 @@ class mxText extends mxShape {
sizeDiv.firstChild != null &&
sizeDiv.firstChild.nodeName === 'DIV'
) {
// @ts-ignore
sizeDiv = sizeDiv.firstChild;
if (node.style.wordWrap === 'break-word') {
@ -1072,7 +1105,7 @@ class mxText extends mxShape {
// Workaround for text measuring in hidden containers
if (tmp === 0) {
const prev = node.parentNode;
const prev = <HTMLElement>node.parentNode;
node.style.visibility = 'hidden';
document.body.appendChild(node);
tmp = sizeDiv.offsetWidth;

2
src/mxgraph/shape/mxTriangle.ts
View File

@ -9,7 +9,7 @@ import mxActor from './mxActor';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
import mxAbstractCanvas2D from '../util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from "../util/canvas/mxSvgCanvas2D";
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
class mxTriangle extends mxActor {
/**

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

@ -5,7 +5,7 @@
*/
import mxActor from '../mxActor';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import mxRectangle from "../../util/datatypes/mxRectangle";
import mxRectangle from '../../util/datatypes/mxRectangle';
/**
* Class: mxCloud
@ -29,10 +29,12 @@ import mxRectangle from "../../util/datatypes/mxRectangle";
* 1. This is stored in <strokewidth>.
*/
class mxCloud extends mxActor {
constructor(bounds: mxRectangle,
constructor(
bounds: mxRectangle,
fill: string,
stroke: string,
strokewidth: number=1) {
strokewidth: number = 1
) {
super();
this.bounds = bounds;
this.fill = fill;

15
src/mxgraph/shape/node/mxCylinder.ts
View File

@ -7,8 +7,8 @@ import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
import mxRectangle from "../../util/datatypes/mxRectangle";
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
import mxRectangle from '../../util/datatypes/mxRectangle';
/**
* Class: mxCylinder
@ -33,10 +33,12 @@ import mxRectangle from "../../util/datatypes/mxRectangle";
* 1. This is stored in <strokewidth>.
*/
class mxCylinder extends mxShape {
constructor(bounds: mxRectangle,
constructor(
bounds: mxRectangle,
fill: string,
stroke: string,
strokewidth: number=1) {
strokewidth: number = 1
) {
super();
this.bounds = bounds;
this.fill = fill;
@ -93,10 +95,7 @@ class mxCylinder extends mxShape {
*
* Returns the cylinder size.
*/
getCylinderSize(x: number,
y: number,
w: number,
h: number): number {
getCylinderSize(x: number, y: number, w: number, h: number): number {
return Math.min(this.maxHeight, Math.round(h / 5));
}

8
src/mxgraph/shape/node/mxDoubleEllipse.ts
View File

@ -9,7 +9,7 @@ import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
/**
* Class: mxDoubleEllipse
@ -55,10 +55,12 @@ import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
class mxDoubleEllipse extends mxShape {
strokewidth: number;
constructor(bounds: mxRectangle,
constructor(
bounds: mxRectangle,
fill: string,
stroke: string,
strokewidth: number=1) {
strokewidth: number = 1
) {
super();
this.bounds = bounds;
this.fill = fill;

10
src/mxgraph/shape/node/mxEllipse.ts
View File

@ -5,8 +5,8 @@
*/
import mxShape from '../mxShape';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
import mxRectangle from "../../util/datatypes/mxRectangle";
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
import mxRectangle from '../../util/datatypes/mxRectangle';
/**
* Class: mxEllipse
@ -29,10 +29,12 @@ import mxRectangle from "../../util/datatypes/mxRectangle";
* 1. This is stored in <strokewidth>.
*/
class mxEllipse extends mxShape {
constructor(bounds: mxRectangle,
constructor(
bounds: mxRectangle,
fill: string,
stroke: string,
strokewidth: number=1) {
strokewidth: number = 1
) {
super();
this.bounds = bounds;
this.fill = fill;

10
src/mxgraph/shape/node/mxHexagon.ts
View File

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

6
src/mxgraph/shape/node/mxImageShape.ts
View File

@ -9,7 +9,8 @@ import mxConstants from '../../util/mxConstants';
import mxRectangleShape from './mxRectangleShape';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxCellState from '../../util/datatypes/mxCellState';
import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
import mxCellOverlay from '../../view/cell/mxCellOverlay';
/**
* Class: mxImageShape
@ -54,6 +55,9 @@ class mxImageShape extends mxRectangleShape {
image: string;
// Used in mxCellRenderer
overlay: mxCellOverlay | null = null;
/**
* Variable: preserveImageAspect
*

4
src/mxgraph/shape/node/mxRectangleShape.ts
View File

@ -9,7 +9,7 @@ import mxUtils from '../../util/mxUtils';
import mxShape from '../mxShape';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
/**
* Class: mxRectangleShape
@ -33,7 +33,7 @@ import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
*/
class mxRectangleShape extends mxShape {
constructor(
bounds: mxRectangle | null=null,
bounds: mxRectangle | null = null,
fill: string | null = '#FFFFFF',
stroke: string | null = '#000000',
strokewidth: number = 1

2
src/mxgraph/shape/node/mxRhombus.ts
View File

@ -9,7 +9,7 @@ import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
/**
* Class: mxRhombus

6
src/mxgraph/util/datatypes/mxCellState.ts
View File

@ -12,8 +12,12 @@ import mxGraphView from '../../view/graph/mxGraphView';
import mxShape from '../../shape/mxShape';
import mxText from '../../shape/mxText';
import mxGraph from "../../view/graph/mxGraph";
import mxDictionary from "./mxDictionary";
class mxCellState extends mxRectangle {
// referenced in mxCellRenderer
node: any;
// TODO: Document me!!
cellBounds: mxRectangle | null = null;
@ -25,7 +29,7 @@ class mxCellState extends mxRectangle {
control: mxShape | null = null;
// Used by mxCellRenderer's createCellOverlays()
overlays: any[] | null = null;
overlays: mxDictionary | null = null;
/**
* Variable: view

3
src/mxgraph/util/datatypes/mxPoint.js
View File

@ -5,7 +5,6 @@
*/
import mxUtils from '../mxUtils';
import mxConstants from '../mxConstants';
class mxPoint {
/**
@ -33,11 +32,9 @@ class mxPoint {
* coordinates are given, then the default values for <x> and <y> are used.
*/
constructor(x, y) {
if (x !== mxConstants.DO_NOTHING) {
this.x = x != null ? x : 0;
this.y = y != null ? y : 0;
}
}
get x() {
return this._x || 0;

18
src/mxgraph/util/datatypes/mxRectangle.js
View File

@ -16,7 +16,6 @@
*/
import mxPoint from './mxPoint';
import mxConstants from '../mxConstants';
class mxRectangle extends mxPoint {
/**
@ -36,12 +35,10 @@ class mxRectangle extends mxPoint {
constructor(x, y, width, height) {
super(x, y, width, height);
if (x !== mxConstants.DO_NOTHING) {
// replace super of mxPoint
this.width = width != null ? width : 0;
this.height = height != null ? height : 0;
}
}
/**
* Function: fromRectangle
@ -176,19 +173,4 @@ class mxRectangle extends mxPoint {
}
}
// HACK: Prevent dependency problems with mxConstants
// importing mxRectangle and vice-versa
mxConstants.PAGE_FORMAT_A4_PORTRAIT = new mxRectangle(
...mxConstants.PAGE_FORMAT_A4_PORTRAIT
);
mxConstants.PAGE_FORMAT_A4_LANDSCAPE = new mxRectangle(
...mxConstants.PAGE_FORMAT_A4_LANDSCAPE
);
mxConstants.PAGE_FORMAT_LETTER_PORTRAIT = new mxRectangle(
...mxConstants.PAGE_FORMAT_LETTER_PORTRAIT
);
mxConstants.PAGE_FORMAT_LETTER_LANDSCAPE = new mxRectangle(
...mxConstants.PAGE_FORMAT_LETTER_LANDSCAPE
);
export default mxRectangle;

9
src/mxgraph/util/mxConstants.js
View File

@ -3,6 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxRectangle from './datatypes/mxRectangle';
const mxConstants = {
DO_NOTHING: {},
@ -670,7 +671,7 @@ const mxConstants = {
* Defines the rectangle for the A4 portrait page format. The dimensions
* of this page format are 826x1169 pixels.
*/
PAGE_FORMAT_A4_PORTRAIT: [0, 0, 827, 1169],
PAGE_FORMAT_A4_PORTRAIT: new mxRectangle(0, 0, 827, 1169),
/**
* Variable: PAGE_FORMAT_A4_PORTRAIT
@ -678,7 +679,7 @@ const mxConstants = {
* Defines the rectangle for the A4 portrait page format. The dimensions
* of this page format are 826x1169 pixels.
*/
PAGE_FORMAT_A4_LANDSCAPE: [0, 0, 1169, 827],
PAGE_FORMAT_A4_LANDSCAPE: new mxRectangle(0, 0, 1169, 827),
/**
* Variable: PAGE_FORMAT_LETTER_PORTRAIT
@ -686,7 +687,7 @@ const mxConstants = {
* Defines the rectangle for the Letter portrait page format. The
* dimensions of this page format are 850x1100 pixels.
*/
PAGE_FORMAT_LETTER_PORTRAIT: [0, 0, 850, 1100],
PAGE_FORMAT_LETTER_PORTRAIT: new mxRectangle(0, 0, 850, 1100),
/**
* Variable: PAGE_FORMAT_LETTER_PORTRAIT
@ -694,7 +695,7 @@ const mxConstants = {
* Defines the rectangle for the Letter portrait page format. The dimensions
* of this page format are 850x1100 pixels.
*/
PAGE_FORMAT_LETTER_LANDSCAPE: [0, 0, 1100, 850],
PAGE_FORMAT_LETTER_LANDSCAPE: new mxRectangle(0, 0, 1100, 850),
/**
* Variable: NONE

29
src/mxgraph/view/cell/mxCell.ts
View File

@ -460,8 +460,7 @@ class mxCell {
* isSource - Boolean that specifies if the source or target terminal
* should be set.
*/
setTerminal(terminal: mxCell | null,
isSource: boolean): mxCell | null {
setTerminal(terminal: mxCell | null, isSource: boolean): mxCell | null {
if (isSource) {
this.source = terminal;
} else {
@ -519,9 +518,7 @@ class mxCell {
* index - Optional integer that specifies the index at which the child
* should be inserted into the child array.
*/
insert(child: mxCell | null=null,
index: number | null=null) {
insert(child: mxCell | null = null, index: number | null = null) {
if (child != null) {
if (index == null) {
index = this.getChildCount();
@ -626,9 +623,7 @@ class mxCell {
* edge - <mxCell> to be inserted into the edge array.
* isOutgoing - Boolean that specifies if the edge is outgoing.
*/
insertEdge(edge: mxCell | null,
isOutgoing: boolean) {
insertEdge(edge: mxCell | null, isOutgoing: boolean) {
if (edge != null) {
edge.removeFromTerminal(isOutgoing);
edge.setTerminal(this, isOutgoing);
@ -658,9 +653,7 @@ class mxCell {
* edge - <mxCell> to be removed from the edge array.
* isOutgoing - Boolean that specifies if the edge is outgoing.
*/
removeEdge(edge: mxCell | null,
isOutgoing: boolean=false): mxCell | null {
removeEdge(edge: mxCell | null, isOutgoing: boolean = false): mxCell | null {
if (edge != null) {
if (edge.getTerminal(!isOutgoing) !== this && this.edges != null) {
const index = this.getEdgeIndex(edge);
@ -703,11 +696,13 @@ class mxCell {
*/
hasAttribute(name: string): boolean {
const userObject = this.getValue();
return userObject != null &&
return (
userObject != null &&
(userObject.nodeType === mxConstants.NODETYPE_ELEMENT &&
userObject.hasAttribute
? userObject.hasAttribute(name)
: userObject.getAttribute(name) != null);
: userObject.getAttribute(name) != null)
);
}
/**
@ -722,9 +717,7 @@ class mxCell {
* defaultValue - Optional default value to use if the attribute has no
* value.
*/
getAttribute(name: string,
defaultValue: any): any {
getAttribute(name: string, defaultValue: any): any {
const userObject = this.getValue();
const val =
userObject != null && userObject.nodeType === mxConstants.NODETYPE_ELEMENT
@ -743,9 +736,7 @@ class mxCell {
* name - Name of the attribute whose value should be set.
* value - New value of the attribute.
*/
setAttribute(name: string,
value: any): void {
setAttribute(name: string, value: any): void {
const userObject = this.getValue();
if (
userObject != null &&

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

@ -189,7 +189,7 @@ class mxCellEditor {
*
* Reference to the event that was used to start editing.
*/
trigger: mxMouseEvent | null = null;
trigger: mxMouseEvent | MouseEvent | null = null;
/**
* Variable: modified
@ -778,7 +778,7 @@ class mxCellEditor {
* cell - <mxCell> to start editing.
* trigger - Optional mouse event that triggered the editor.
*/
startEditing(cell: mxCell, trigger: mxMouseEvent | null = null): void {
startEditing(cell: mxCell, trigger: mxMouseEvent | MouseEvent | null = null): void {
this.stopEditing(true);
this.align = null;

294
src/mxgraph/view/cell/mxCellRenderer.ts
View File

@ -34,8 +34,41 @@ import mxShape from '../../shape/mxShape';
import mxCellState from '../../util/datatypes/mxCellState';
import mxCell from './mxCell';
import mxGraphModel from "../graph/mxGraphModel";
import mxCellOverlay from "./mxCellOverlay";
/**
* Class: mxCellRenderer
*
* Renders cells into a document object model. The <defaultShapes> is a global
* map of shapename, constructor pairs that is used in all instances. You can
* get a list of all available shape names using the following code.
*
* In general the cell renderer is in charge of creating, redrawing and
* destroying the shape and label associated with a cell state, as well as
* some other graphical objects, namely controls and overlays. The shape
* hieararchy in the display (ie. the hierarchy in which the DOM nodes
* appear in the document) does not reflect the cell hierarchy. The shapes
* are a (flat) sequence of shapes and labels inside the draw pane of the
* graph view, with some exceptions, namely the HTML labels being placed
* directly inside the graph container for certain browsers.
*
* (code)
* mxLog.show();
* for (var i in mxCellRenderer.defaultShapes)
* {
* mxLog.debug(i);
* }
* (end)
*
* Constructor: mxCellRenderer
*
* Constructs a new cell renderer with the following built-in shapes:
* arrow, rectangle, ellipse, rhombus, image, line, label, cylinder,
* swimlane, connector, actor and cloud.
*/
class mxCellRenderer {
constructor() {}
/**
* Variable: defaultShapes
*
@ -43,7 +76,7 @@ class mxCellRenderer {
* known to all instances of this class. For adding new shapes you should
* use the static <mxCellRenderer.registerShape> function.
*/
static defaultShapes = {};
static defaultShapes: { [key: string]: typeof mxShape; } = {};
/**
* Variable: defaultEdgeShape
@ -104,38 +137,6 @@ class mxCellRenderer {
*/
forceControlClickHandler: boolean = false;
/**
* Class: mxCellRenderer
*
* Renders cells into a document object model. The <defaultShapes> is a global
* map of shapename, constructor pairs that is used in all instances. You can
* get a list of all available shape names using the following code.
*
* In general the cell renderer is in charge of creating, redrawing and
* destroying the shape and label associated with a cell state, as well as
* some other graphical objects, namely controls and overlays. The shape
* hieararchy in the display (ie. the hierarchy in which the DOM nodes
* appear in the document) does not reflect the cell hierarchy. The shapes
* are a (flat) sequence of shapes and labels inside the draw pane of the
* graph view, with some exceptions, namely the HTML labels being placed
* directly inside the graph container for certain browsers.
*
* (code)
* mxLog.show();
* for (var i in mxCellRenderer.defaultShapes)
* {
* mxLog.debug(i);
* }
* (end)
*
* Constructor: mxCellRenderer
*
* Constructs a new cell renderer with the following built-in shapes:
* arrow, rectangle, ellipse, rhombus, image, line, label, cylinder,
* swimlane, connector, actor and cloud.
*/
constructor() {}
/**
* Function: registerShape
*
@ -153,7 +154,7 @@ class mxCellRenderer {
* key - String representing the shape name.
* shape - Constructor of the <mxShape> subclass.
*/
static registerShape = (key, shape) => {
static registerShape(key: string, shape: typeof mxShape) {
mxCellRenderer.defaultShapes[key] = shape;
};
@ -168,9 +169,9 @@ class mxCellRenderer {
* state - <mxCellState> for which the shape should be initialized.
*/
initializeShape(state: mxCellState) {
state.shape.dialect = state.view.graph.dialect;
(<mxShape>state.shape).dialect = state.view.graph.dialect;
this.configureShape(state);
state.shape.init(state.view.getDrawPane());
(<mxShape>state.shape).init(state.view.getDrawPane());
}
/**
@ -182,7 +183,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be created.
*/
createShape(state: mxCellState): mxShape {
createShape(state: mxCellState): mxShape | null {
let shape = null;
if (state.style != null) {
@ -210,9 +211,10 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the indicator shape should be created.
*/
createIndicatorShape(state: mxCellState): mxShape {
createIndicatorShape(state: mxCellState): void {
// @ts-ignore
state.shape.indicatorShape = this.getShape(
state.view.graph.getIndicatorShape(state)
<string>state.view.graph.getIndicatorShape(state)
);
}
@ -222,6 +224,7 @@ class mxCellRenderer {
* Returns the shape for the given name from <defaultShapes>.
*/
getShape(name: string): typeof mxShape {
// @ts-ignore
return name != null ? mxCellRenderer.defaultShapes[name] : null;
}
@ -233,9 +236,9 @@ class mxCellRenderer {
getShapeConstructor(state: mxCellState) {
let ctor = this.getShape(state.style[mxConstants.STYLE_SHAPE]);
if (ctor == null) {
ctor = state.view.graph.getModel().isEdge(state.cell)
ctor = <typeof mxShape>(state.view.graph.getModel().isEdge(state.cell)
? this.defaultEdgeShape
: this.defaultVertexShape;
: this.defaultVertexShape);
}
return ctor;
}
@ -250,18 +253,14 @@ class mxCellRenderer {
* state - <mxCellState> for which the shape should be configured.
*/
configureShape(state: mxCellState) {
state.shape.apply(state);
state.shape.image = state.view.graph.getImage(state);
state.shape.indicatorColor = state.view.graph.getIndicatorColor(state);
state.shape.indicatorStrokeColor =
state.style[mxConstants.STYLE_INDICATOR_STROKECOLOR];
state.shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
state
);
state.shape.indicatorDirection =
state.style[mxConstants.STYLE_INDICATOR_DIRECTION];
state.shape.indicatorImage = state.view.graph.getIndicatorImage(state);
const shape = <any>state.shape;
shape.apply(state);
shape.image = state.view.graph.getImage(state);
shape.indicatorColor = state.view.graph.getIndicatorColor(state);
shape.indicatorStrokeColor = state.style[mxConstants.STYLE_INDICATOR_STROKECOLOR];
shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(state);
shape.indicatorDirection = state.style[mxConstants.STYLE_INDICATOR_DIRECTION];
shape.indicatorImage = state.view.graph.getIndicatorImage(state);
this.postConfigureShape(state);
}
@ -319,50 +318,59 @@ class mxCellRenderer {
* Resolves special keywords 'inherit', 'indicated' and 'swimlane' and sets
* the respective color on the shape.
*/
resolveColor(state, field, key) {
resolveColor(state: mxCellState, field: string, key: string) {
const shape =
key === mxConstants.STYLE_FONTCOLOR ? state.text : state.shape;
if (shape != null) {
const { graph } = state.view;
// @ts-ignore
const value = shape[field];
let referenced = null;
if (value === 'inherit') {
// @ts-ignore
referenced = graph.model.getParent(state.cell);
} else if (value === 'swimlane') {
// @ts-ignore
shape[field] =
key === mxConstants.STYLE_STROKECOLOR ||
key === mxConstants.STYLE_FONTCOLOR
? '#000000'
: '#ffffff';
// @ts-ignore
if (graph.model.getTerminal(state.cell, false) != null) {
// @ts-ignore
referenced = graph.model.getTerminal(state.cell, false);
} else {
referenced = state.cell;
}
referenced = graph.getSwimlane(referenced);
referenced = graph.getSwimlane(<mxCell>referenced);
key = graph.swimlaneIndicatorColorAttribute;
} else if (value === 'indicated' && state.shape != null) {
// @ts-ignore
shape[field] = state.shape.indicatorColor;
} else if (
key !== mxConstants.STYLE_FILLCOLOR &&
value === mxConstants.STYLE_FILLCOLOR &&
state.shape != null
) {
// @ts-ignore
shape[field] = state.style[mxConstants.STYLE_FILLCOLOR];
} else if (
key !== mxConstants.STYLE_STROKECOLOR &&
value === mxConstants.STYLE_STROKECOLOR &&
state.shape != null
) {
// @ts-ignore
shape[field] = state.style[mxConstants.STYLE_STROKECOLOR];
}
if (referenced != null) {
const rstate = graph.getView().getState(referenced);
// @ts-ignore
shape[field] = null;
if (rstate != null) {
@ -370,8 +378,10 @@ class mxCellRenderer {
key === mxConstants.STYLE_FONTCOLOR ? rstate.text : rstate.shape;
if (rshape != null && field !== 'indicatorColor') {
// @ts-ignore
shape[field] = rshape[field];
} else {
// @ts-ignore
shape[field] = rstate.style[key];
}
}
@ -401,7 +411,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the label should be created.
*/
createLabel(state, value) {
createLabel(state: mxCellState, value: any) {
const { graph } = state.view;
const isEdge = graph.getModel().isEdge(state.cell);
@ -450,7 +460,7 @@ class mxCellRenderer {
// getCellAt for the subsequent mouseMoves and the final mouseUp.
let forceGetCell = false;
const getState = evt => {
const getState = (evt: Event | mxMouseEvent) => {
let result = state;
if (mxClient.IS_TOUCH || forceGetCell) {
@ -460,7 +470,7 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which
// consumes and executes the source function
const pt = mxUtils.convertPoint(graph.container, x, y);
result = graph.view.getState(graph.getCellAt(pt.x, pt.y));
result = <mxCellState>graph.view.getState(graph.getCellAt(pt.x, pt.y));
}
return result;
};
@ -468,7 +478,7 @@ class mxCellRenderer {
// TODO: Add handling for special touch device gestures
mxEvent.addGestureListeners(
state.text.node,
evt => {
(evt: mxMouseEvent) => {
if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
@ -479,7 +489,7 @@ class mxCellRenderer {
mxEvent.getSource(evt).nodeName === 'IMG';
}
},
evt => {
(evt: mxMouseEvent) => {
if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_MOVE,
@ -487,7 +497,7 @@ class mxCellRenderer {
);
}
},
evt => {
(evt: mxMouseEvent) => {
if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_UP,
@ -500,7 +510,7 @@ class mxCellRenderer {
// Uses double click timeout in mxGraph for quirks mode
if (graph.nativeDblClickEnabled) {
mxEvent.addListener(state.text.node, 'dblclick', evt => {
mxEvent.addListener(state.text.node, 'dblclick', (evt: MouseEvent) => {
if (this.isLabelEvent(state, evt)) {
graph.dblClick(evt, state.cell);
mxEvent.consume(evt);
@ -519,7 +529,7 @@ class mxCellRenderer {
*
* state - <mxCellState> whose label should be initialized.
*/
initializeLabel(state, shape) {
initializeLabel(state: mxCellState, shape: mxShape) {
if (
mxClient.IS_SVG &&
mxClient.NO_FO &&
@ -555,6 +565,7 @@ class mxCellRenderer {
if (shape == null) {
const tmp = new mxImageShape(
new mxRectangle(),
// @ts-ignore
overlays[i].image.src
);
tmp.dialect = state.view.graph.dialect;
@ -564,6 +575,7 @@ class mxCellRenderer {
this.installCellOverlayListeners(state, overlays[i], tmp);
if (overlays[i].cursor != null) {
// @ts-ignore
tmp.node.style.cursor = overlays[i].cursor;
}
@ -576,7 +588,7 @@ class mxCellRenderer {
// Removes unused
if (state.overlays != null) {
state.overlays.visit((id, shape) => {
state.overlays.visit((id: any, shape: { destroy: () => void; }) => {
shape.destroy();
});
}
@ -593,7 +605,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the overlay should be created.
* overlay - <mxImageShape> that represents the overlay.
*/
initializeOverlay(state, overlay) {
initializeOverlay(state: mxCellState, overlay: mxImageShape): void {
overlay.init(state.view.getOverlayPane());
}
@ -603,10 +615,12 @@ class mxCellRenderer {
* Installs the listeners for the given <mxCellState>, <mxCellOverlay> and
* <mxShape> that represents the overlay.
*/
installCellOverlayListeners(state, overlay, shape) {
installCellOverlayListeners(state: mxCellState,
overlay: mxCellOverlay,
shape: mxShape) {
const { graph } = state.view;
mxEvent.addListener(shape.node, 'click', function(evt) {
mxEvent.addListener(shape.node, 'click', (evt: Event) => {
if (graph.isEditing()) {
graph.stopEditing(!graph.isInvokesStopCellEditing());
}
@ -618,16 +632,16 @@ class mxCellRenderer {
mxEvent.addGestureListeners(
shape.node,
function(evt) {
(evt: Event) => {
mxEvent.consume(evt);
},
function(evt) {
(evt: Event) => {
graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, state));
}
);
if (mxClient.IS_TOUCH) {
mxEvent.addListener(shape.node, 'touchend', function(evt) {
mxEvent.addListener(shape.node, 'touchend', (evt: Event) => {
overlay.fireEvent(
new mxEventObject(mxEvent.CLICK, 'event', evt, 'cell', state.cell)
);
@ -680,10 +694,10 @@ class mxCellRenderer {
createControlClickHandler(state: mxCellState): Function {
const { graph } = state.view;
return evt => {
return (evt: mxEventObject) => {
if (this.forceControlClickHandler || graph.isEnabled()) {
const collapse = !graph.isCellCollapsed(state.cell);
graph.foldCells(collapse, false, [state.cell], null, evt);
graph.foldCells(collapse, false, [state.cell], false, evt);
mxEvent.consume(evt);
}
};
@ -701,7 +715,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: mxCellState,
control: mxShape,
handleEvents: boolean,
clickHandler: Function) {
const { graph } = state.view;
// In the special case where the label is in HTML and the display is SVG the image
@ -715,16 +733,18 @@ class mxCellRenderer {
if (isForceHtml) {
control.dialect = mxConstants.DIALECT_PREFERHTML;
control.init(graph.container);
// @ts-ignore
control.node.style.zIndex = 1;
} else {
control.init(state.view.getOverlayPane());
}
const node = control.innerNode || control.node;
const node = control.node;
// Workaround for missing click event on iOS is to check tolerance below
if (clickHandler != null && !mxClient.IS_IOS) {
if (graph.isEnabled()) {
// @ts-ignore
node.style.cursor = 'pointer';
}
@ -732,11 +752,11 @@ class mxCellRenderer {
}
if (handleEvents) {
let first = null;
let first: mxPoint | null = null;
mxEvent.addGestureListeners(
node,
function(evt) {
(evt: Event) => {
first = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
@ -744,13 +764,13 @@ class mxCellRenderer {
);
mxEvent.consume(evt);
},
function(evt) {
(evt: Event) => {
graph.fireMouseEvent(
mxEvent.MOUSE_MOVE,
new mxMouseEvent(evt, state)
);
},
function(evt) {
(evt: Event) => {
graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt, state));
mxEvent.consume(evt);
}
@ -758,6 +778,7 @@ class mxCellRenderer {
// Uses capture phase for event interception to stop bubble phase
if (clickHandler != null && mxClient.IS_IOS) {
// @ts-ignore
node.addEventListener(
'touchend',
evt => {
@ -792,7 +813,7 @@ class mxCellRenderer {
* state - <mxCellState> whose shape fired the event.
* evt - Mouse event which was fired.
*/
isShapeEvent(state, evt) {
isShapeEvent(state: mxCellState, evt: mxMouseEvent | MouseEvent) {
return true;
}
@ -807,7 +828,7 @@ class mxCellRenderer {
* state - <mxCellState> whose label fired the event.
* evt - Mouse event which was fired.
*/
isLabelEvent(state, evt) {
isLabelEvent(state: mxCellState, evt: mxMouseEvent | MouseEvent) {
return true;
}
@ -826,7 +847,7 @@ class mxCellRenderer {
// Workaround for touch devices routing all events for a mouse
// gesture (down, move, up) via the initial DOM node. Same for
// HTML images in all IE versions (VML images are working).
const getState = evt => {
const getState = (evt: Event) => {
let result = state;
if (
@ -840,15 +861,16 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which
// consumes and executes the source function
const pt = mxUtils.convertPoint(graph.container, x, y);
result = graph.view.getState(graph.getCellAt(pt.x, pt.y));
result = <mxCellState>graph.view.getState(graph.getCellAt(pt.x, pt.y));
}
return result;
};
mxEvent.addGestureListeners(
// @ts-ignore
state.shape.node,
evt => {
(evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
@ -856,15 +878,15 @@ class mxCellRenderer {
);
}
},
mxUtils.bind(this, evt => {
(evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_MOVE,
new mxMouseEvent(evt, getState(evt))
);
}
}),
evt => {
},
(evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_UP,
@ -876,6 +898,7 @@ class mxCellRenderer {
// Uses double click timeout in mxGraph for quirks mode
if (graph.nativeDblClickEnabled) {
// @ts-ignore
mxEvent.addListener(state.shape.node, 'dblclick', evt => {
if (this.isShapeEvent(state, evt)) {
graph.dblClick(evt, state.cell);
@ -894,7 +917,7 @@ class mxCellRenderer {
*
* state - <mxCellState> whose label should be redrawn.
*/
redrawLabel(state, forced) {
redrawLabel(state: mxCellState, forced: boolean) {
const { graph } = state.view;
const value = this.getLabelValue(state);
const wrapping = graph.isWrapping(state.cell);
@ -946,7 +969,7 @@ class mxCellRenderer {
state.text.apply(state);
// Special case where value is obtained via hook in graph
state.text.valign = graph.getVerticalAlign(state);
state.text.valign = <string>graph.getVerticalAlign(state);
}
const bounds = this.getLabelBounds(state);
@ -956,9 +979,9 @@ class mxCellRenderer {
if (
forced ||
state.text.value !== value ||
state.text.isWrapping !== wrapping ||
state.text.wrap !== wrapping ||
state.text.overflow !== overflow ||
state.text.isClipping !== clipping ||
state.text.clipped !== clipping ||
state.text.scale !== nextScale ||
state.text.dialect !== dialect ||
state.text.bounds == null ||
@ -973,8 +996,10 @@ class mxCellRenderer {
state.text.overflow = overflow;
// Preserves visible state
// @ts-ignore
const vis = state.text.node.style.visibility;
this.redrawLabelShape(state.text);
// @ts-ignore
state.text.node.style.visibility = vis;
}
}
@ -990,8 +1015,8 @@ class mxCellRenderer {
* state - <mxCellState> whose label should be checked.
* shape - <mxText> shape to be checked.
*/
isTextShapeInvalid(state: mxCellState, shape) {
function check(property, stylename, defaultValue) {
isTextShapeInvalid(state: mxCellState, shape: mxText): boolean {
function check(property: string, stylename: string, defaultValue: any) {
let result = false;
// Workaround for spacing added to directional spacing
@ -1002,9 +1027,11 @@ class mxCellRenderer {
stylename === 'spacingLeft'
) {
result =
parseFloat(shape[property]) - parseFloat(shape.spacing) !==
// @ts-ignore
parseFloat(String(shape[property])) - parseFloat(String(shape.spacing)) !==
(state.style[stylename] || defaultValue);
} else {
// @ts-ignore
result = shape[property] !== (state.style[stylename] || defaultValue);
}
@ -1032,8 +1059,8 @@ class mxCellRenderer {
check('spacingBottom', mxConstants.STYLE_SPACING_BOTTOM, 0) ||
check('spacingLeft', mxConstants.STYLE_SPACING_LEFT, 0) ||
check('horizontal', mxConstants.STYLE_HORIZONTAL, true) ||
check('background', mxConstants.STYLE_LABEL_BACKGROUNDCOLOR) ||
check('border', mxConstants.STYLE_LABEL_BORDERCOLOR) ||
check('background', mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, null) ||
check('border', mxConstants.STYLE_LABEL_BORDERCOLOR, null) ||
check('opacity', mxConstants.STYLE_TEXT_OPACITY, 100) ||
check(
'textDirection',
@ -1088,6 +1115,7 @@ class mxCellRenderer {
);
if (isEdge) {
// @ts-ignore
const spacing = state.text.getSpacing();
bounds.x += spacing.x * scale;
bounds.y += spacing.y * scale;
@ -1100,6 +1128,7 @@ class mxCellRenderer {
}
} else {
// Inverts label position
// @ts-ignore
if (state.text.isPaintBoundsInverted()) {
const tmp = bounds.x;
bounds.x = bounds.y;
@ -1114,6 +1143,7 @@ class mxCellRenderer {
bounds.height = Math.max(1, state.height);
}
// @ts-ignore
if (state.text.isPaintBoundsInverted()) {
// Rotates around center of state
const t = (state.width - state.height) / 2;
@ -1174,7 +1204,9 @@ class mxCellRenderer {
* bounds - <mxRectangle> the rectangle to be rotated.
*/
rotateLabelBounds(state: mxCellState, bounds: mxRectangle) {
// @ts-ignore
bounds.y -= state.text.margin.y * bounds.height;
// @ts-ignore
bounds.x -= state.text.margin.x * bounds.width;
if (
@ -1183,6 +1215,7 @@ class mxCellRenderer {
state.style[mxConstants.STYLE_OVERFLOW] !== 'width')
) {
const s = state.view.scale;
// @ts-ignore
const spacing = state.text.getSpacing();
bounds.x += spacing.x * s;
bounds.y += spacing.y * s;
@ -1207,6 +1240,7 @@ class mxCellRenderer {
0,
bounds.width -
(hpos === mxConstants.ALIGN_CENTER && lw == null
// @ts-ignore
? state.text.spacingLeft * s + state.text.spacingRight * s
: 0)
);
@ -1214,17 +1248,20 @@ class mxCellRenderer {
0,
bounds.height -
(vpos === mxConstants.ALIGN_MIDDLE
// @ts-ignore
? state.text.spacingTop * s + state.text.spacingBottom * s
: 0)
);
}
// @ts-ignore
const theta = state.text.getTextRotation();
// Only needed if rotated around another center
if (
theta !== 0 &&
state != null &&
// @ts-ignore
state.view.graph.model.isVertex(state.cell)
) {
const cx = state.getCenterX();
@ -1254,7 +1291,7 @@ class mxCellRenderer {
*
* state - <mxCellState> whose overlays should be redrawn.
*/
redrawCellOverlays(state, forced) {
redrawCellOverlays(state: mxCellState, forced: boolean=false) {
this.createCellOverlays(state);
if (state.overlays != null) {
@ -1266,7 +1303,8 @@ class mxCellRenderer {
const cos = Math.cos(rad);
const sin = Math.sin(rad);
state.overlays.visit((id, shape) => {
state.overlays.visit((id: string, shape: mxShape) => {
// @ts-ignore
const bounds = shape.overlay.getBounds(state);
if (!state.view.graph.getModel().isEdge(state.cell)) {
@ -1311,19 +1349,22 @@ class mxCellRenderer {
*
* state - <mxCellState> whose control should be redrawn.
*/
redrawControl(state, forced) {
redrawControl(state: mxCellState, forced: boolean=false) {
const image = state.view.graph.getFoldingImage(state);
if (state.control != null && image != null) {
const bounds = this.getControlBounds(state, image.width, image.height);
const r = this.legacyControlPosition
? mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0)
// @ts-ignore
: state.shape.getTextRotation();
const s = state.view.scale;
if (
forced ||
state.control.scale !== s ||
// @ts-ignore
!state.control.bounds.equals(bounds) ||
state.control.rotation !== r
) {
@ -1342,7 +1383,7 @@ class mxCellRenderer {
* Returns the bounds to be used to draw the control (folding icon) of the
* given state.
*/
getControlBounds(state, w, h) {
getControlBounds(state: mxCellState, w: number, h: number): mxRectangle | null {
if (state.control != null) {
const s = state.view.scale;
let cx = state.getCenterX();
@ -1411,60 +1452,77 @@ class mxCellRenderer {
* htmlNode - Node in the graph container after which the shapes should be inserted that
* will not go into the <drawPane> (eg. HTML labels without foreignObjects).
*/
insertStateAfter(state, node, htmlNode) {
insertStateAfter(state: mxCellState,
node: HTMLElement | SVGElement | null,
htmlNode: HTMLElement | SVGElement | null) {
const shapes = this.getShapesForState(state);
for (let i = 0; i < shapes.length; i += 1) {
// @ts-ignore
if (shapes[i] != null && shapes[i].node != null) {
const html =
// @ts-ignore
shapes[i].node.parentNode !== state.view.getDrawPane() &&
// @ts-ignore
shapes[i].node.parentNode !== state.view.getOverlayPane();
const temp = html ? htmlNode : node;
// @ts-ignore
if (temp != null && temp.nextSibling !== shapes[i].node) {
if (temp.nextSibling == null) {
// @ts-ignore
temp.parentNode.appendChild(shapes[i].node);
} else {
// @ts-ignore
temp.parentNode.insertBefore(shapes[i].node, temp.nextSibling);
}
} else if (temp == null) {
// Special case: First HTML node should be first sibling after canvas
if (shapes[i].node.parentNode === state.view.graph.container) {
// @ts-ignore
const shapeNode: HTMLElement = <HTMLElement>shapes[i].node;
if (shapeNode.parentNode === state.view.graph.container) {
let { canvas } = state.view;
while (
canvas != null &&
canvas.parentNode !== state.view.graph.container
) {
// @ts-ignore
canvas = canvas.parentNode;
}
if (canvas != null && canvas.nextSibling != null) {
if (canvas.nextSibling !== shapes[i].node) {
shapes[i].node.parentNode.insertBefore(
shapes[i].node,
if (canvas.nextSibling !== shapeNode) {
// @ts-ignore
shapeNode.parentNode.insertBefore(
shapeNode,
canvas.nextSibling
);
}
} else {
shapes[i].node.parentNode.appendChild(shapes[i].node);
// @ts-ignore
shapeNode.parentNode.appendChild(shapeNode);
}
} else if (
shapes[i].node.parentNode != null &&
shapes[i].node.parentNode.firstChild != null &&
shapes[i].node.parentNode.firstChild != shapes[i].node
shapeNode.parentNode != null &&
shapeNode.parentNode.firstChild != null &&
shapeNode.parentNode.firstChild != shapeNode
) {
// Inserts the node as the first child of the parent to implement the order
shapes[i].node.parentNode.insertBefore(
shapes[i].node,
shapes[i].node.parentNode.firstChild
shapeNode.parentNode.insertBefore(
shapeNode,
shapeNode.parentNode.firstChild
);
}
}
if (html) {
// @ts-ignore
htmlNode = shapes[i].node;
} else {
// @ts-ignore
node = shapes[i].node;
}
}
@ -1567,6 +1625,7 @@ class mxCellRenderer {
this.installListeners(state);
// Forces a refresh of the handler if one exists
// @ts-ignore
state.view.graph.selectionCellsHandler.updateHandler(state);
}
} else if (
@ -1578,6 +1637,7 @@ class mxCellRenderer {
state.shape.resetStyles();
this.configureShape(state);
// LATER: Ignore update for realtime to fix reset of current gesture
// @ts-ignore
state.view.graph.selectionCellsHandler.updateHandler(state);
force = true;
}
@ -1586,7 +1646,7 @@ class mxCellRenderer {
if (
state.shape != null &&
state.shape.indicatorShape !=
this.getShape(state.view.graph.getIndicatorShape(state))
this.getShape(<string>state.view.graph.getIndicatorShape(state))
) {
if (state.shape.indicator != null) {
state.shape.indicator.destroy();
@ -1680,7 +1740,7 @@ class mxCellRenderer {
}
if (state.overlays != null) {
state.overlays.visit((id, shape) => {
state.overlays.visit((id: string, shape: mxShape) => {
shape.destroy();
});
@ -1699,14 +1759,20 @@ class mxCellRenderer {
}
// Adds default shapes into the default shapes array
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_ELLIPSE, mxEllipse);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_RHOMBUS, mxRhombus);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_CYLINDER, mxCylinder);
mxCellRenderer.registerShape(mxConstants.SHAPE_CONNECTOR, mxConnector);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_ACTOR, mxActor);
mxCellRenderer.registerShape(mxConstants.SHAPE_TRIANGLE, mxTriangle);
mxCellRenderer.registerShape(mxConstants.SHAPE_HEXAGON, mxHexagon);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_CLOUD, mxCloud);
mxCellRenderer.registerShape(mxConstants.SHAPE_LINE, mxLine);
mxCellRenderer.registerShape(mxConstants.SHAPE_ARROW, mxArrow);
@ -1714,8 +1780,10 @@ mxCellRenderer.registerShape(
mxConstants.SHAPE_ARROW_CONNECTOR,
mxArrowConnector
);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_DOUBLE_ELLIPSE, mxDoubleEllipse);
mxCellRenderer.registerShape(mxConstants.SHAPE_SWIMLANE, mxSwimlane);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_IMAGE, mxImageShape);
mxCellRenderer.registerShape(mxConstants.SHAPE_LABEL, mxLabel);

12
src/mxgraph/view/connection/mxConnectionConstraint.ts
View File

@ -61,11 +61,13 @@ class mxConnectionConstraint {
* perimeter - Optional boolean that specifies if the fixed point should be
* projected onto the perimeter of the terminal. Default is true.
*/
constructor(point: mxPoint | null=null,
perimeter: boolean=true,
name: string | null=null,
dx: number | null=null,
dy: number | null=null) {
constructor(
point: mxPoint | null = null,
perimeter: boolean = true,
name: string | null = null,
dx: number | null = null,
dy: number | null = null
) {
this.point = point;
this.perimeter = perimeter != null ? perimeter : true;
this.name = name;

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

@ -9094,6 +9094,7 @@ class mxGraph extends mxEventSource {
// @ts-ignore
(node === shape.node || node.parentNode === shape.node)
) {
// @ts-ignore
tip = shape.overlay.toString();
}
});
@ -9423,7 +9424,7 @@ class mxGraph extends mxEventSource {
*
* state - <mxCellState> whose indicator shape should be returned.
*/
getIndicatorShape(state: mxCellState): mxShape | null {
getIndicatorShape(state: mxCellState): string | null {
return state != null && state.style != null
? state.style[mxConstants.STYLE_INDICATOR_SHAPE]
: null;
@ -11090,7 +11091,7 @@ class mxGraph extends mxEventSource {
*
* cell - <mxCell> for which the ancestor swimlane should be returned.
*/
getSwimlane(cell: mxCell): mxCell | null {
getSwimlane(cell: mxCell | null=null): mxCell | null {
while (cell != null && !this.isSwimlane(cell)) {
cell = <mxCell>this.getModel().getParent(cell);
}

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

@ -31,7 +31,63 @@ import mxGeometry from "../../util/datatypes/mxGeometry";
import mxConnectionConstraint from "../connection/mxConnectionConstraint";
import mxPopupMenuHandler from "../../handler/mxPopupMenuHandler";
/**
* Class: mxGraphView
*
* Extends <mxEventSource> to implement a view for a graph. This class is in
* charge of computing the absolute coordinates for the relative child
* geometries, the points for perimeters and edge styles and keeping them
* cached in <mxCellStates> for faster retrieval. The states are updated
* whenever the model or the view state (translate, scale) changes. The scale
* and translate are honoured in the bounds.
*
* Event: mxEvent.UNDO
*
* Fires after the root was changed in <setCurrentRoot>. The <code>edit</code>
* property contains the <mxUndoableEdit> which contains the
* <mxCurrentRootChange>.
*
* Event: mxEvent.SCALE_AND_TRANSLATE
*
* Fires after the scale and translate have been changed in <scaleAndTranslate>.
* The <code>scale</code>, <code>previousScale</code>, <code>translate</code>
* and <code>previousTranslate</code> properties contain the new and previous
* scale and translate, respectively.
*
* Event: mxEvent.SCALE
*
* Fires after the scale was changed in <setScale>. The <code>scale</code> and
* <code>previousScale</code> properties contain the new and previous scale.
*
* Event: mxEvent.TRANSLATE
*
* Fires after the translate was changed in <setTranslate>. The
* <code>translate</code> and <code>previousTranslate</code> properties contain
* the new and previous value for translate.
*
* Event: mxEvent.DOWN and mxEvent.UP
*
* Fire if the current root is changed by executing an <mxCurrentRootChange>.
* The event name depends on the location of the root in the cell hierarchy
* with respect to the current root. The <code>root</code> and
* <code>previous</code> properties contain the new and previous root,
* respectively.
*
* Constructor: mxGraphView
*
* Constructs a new view for the given <mxGraph>.
*
* Parameters:
*
* graph - Reference to the enclosing <mxGraph>.
*/
class mxGraphView extends mxEventSource {
constructor(graph: mxGraph) {
super();
this.graph = graph;
}
// TODO: Document me!
backgroundImage: mxImageShape | null=null;
@ -138,89 +194,31 @@ class mxGraphView extends mxEventSource {
*
* During validation, this contains the last DOM node that was processed.
*/
lastNode: HTMLElement | null = null;
lastNode: HTMLElement | SVGElement | null = null;
/**
* Variable: lastHtmlNode
*
* During validation, this contains the last HTML DOM node that was processed.
*/
lastHtmlNode: HTMLElement | null = null;
lastHtmlNode: HTMLElement | SVGElement | null = null;
/**
* Variable: lastForegroundNode
*
* During validation, this contains the last edge's DOM node that was processed.
*/
lastForegroundNode: HTMLElement | null = null;
lastForegroundNode: HTMLElement | SVGElement | null = null;
/**
* Variable: lastForegroundHtmlNode
*
* During validation, this contains the last edge HTML DOM node that was processed.
*/
lastForegroundHtmlNode: HTMLElement | null = null;
lastForegroundHtmlNode: HTMLElement | SVGElement | null = null;
/**
* Class: mxGraphView
*
* Extends <mxEventSource> to implement a view for a graph. This class is in
* charge of computing the absolute coordinates for the relative child
* geometries, the points for perimeters and edge styles and keeping them
* cached in <mxCellStates> for faster retrieval. The states are updated
* whenever the model or the view state (translate, scale) changes. The scale
* and translate are honoured in the bounds.
*
* Event: mxEvent.UNDO
*
* Fires after the root was changed in <setCurrentRoot>. The <code>edit</code>
* property contains the <mxUndoableEdit> which contains the
* <mxCurrentRootChange>.
*
* Event: mxEvent.SCALE_AND_TRANSLATE
*
* Fires after the scale and translate have been changed in <scaleAndTranslate>.
* The <code>scale</code>, <code>previousScale</code>, <code>translate</code>
* and <code>previousTranslate</code> properties contain the new and previous
* scale and translate, respectively.
*
* Event: mxEvent.SCALE
*
* Fires after the scale was changed in <setScale>. The <code>scale</code> and
* <code>previousScale</code> properties contain the new and previous scale.
*
* Event: mxEvent.TRANSLATE
*
* Fires after the translate was changed in <setTranslate>. The
* <code>translate</code> and <code>previousTranslate</code> properties contain
* the new and previous value for translate.
*
* Event: mxEvent.DOWN and mxEvent.UP
*
* Fire if the current root is changed by executing an <mxCurrentRootChange>.
* The event name depends on the location of the root in the cell hierarchy
* with respect to the current root. The <code>root</code> and
* <code>previous</code> properties contain the new and previous root,
* respectively.
*
* Constructor: mxGraphView
*
* Constructs a new view for the given <mxGraph>.
*
* Parameters:
*
* graph - Reference to the enclosing <mxGraph>.
*/
constructor(graph: mxGraph) {
super();
this.graph = graph;
}
// Backwards compatibility getters/setters
/**
* Function: get graphBounds
* Function: getGraphBounds
*
* Returns the <mxRectangle> that caches the scales and translated bounds of the current view.
*/
@ -238,7 +236,7 @@ class mxGraphView extends mxEventSource {
}
/**
* Function: get scale
* Function: getScale
*
* Returns the <scale>. Default is 1 (100%).
*/
@ -663,11 +661,6 @@ class mxGraphView extends mxEventSource {
mxLog.leave('mxGraphView.validate', t0);
}
// TODO: Document me!!
get emptyBounds() {
return this.getEmptyBounds();
}
/**
* Function: getEmptyBounds
*
@ -858,11 +851,6 @@ class mxGraphView extends mxEventSource {
}
}
// TODO: Document me!!
get backgroundPageBounds(): mxRectangle {
return this.getBackgroundPageBounds();
}
/**
* Function: getBackgroundPageBounds
*

3
src/mxgraph/view/graph/mxOutline.ts
View File

@ -602,7 +602,8 @@ class mxOutline {
: null;
this.zoom =
me.isSource(this.sizer) ||
(hit != null && mxUtils.intersects(shape.bounds, hit));
// @ts-ignore
(hit != null && mxUtils.intersects(this.sizer.bounds, hit));
this.startX = me.getX();
this.startY = me.getY();
this.active = true;

11
src/pages/PageTabs.js
View File

@ -13,11 +13,11 @@ const PageTabs = ({ curPageURL, children }) => {
['/labels', 'Labels'],
['/layout', 'Layout'],
['/misc', 'Miscellaneous'],
//['/printing', 'Printing'],
// ['/printing', 'Printing'],
['/shapes_stencils', 'Shapes/stencils'],
['/styles', 'Styles'],
['/toolbars', 'Toolbars'],
//['/windows', 'Windows'],
// ['/windows', 'Windows'],
['/xml_json', 'XML/JSON'],
['/zoom_offpage', 'Zoom/offpage'],
];
@ -41,7 +41,12 @@ const PageTabs = ({ curPageURL, children }) => {
}}
>
<h1>mxGraph Reloaded Examples</h1>
<div style={{textAlign: "right"}}>See also the <a href="https://github.com/mcyph/mxgraph" style={{color: "blue"}}>GitHub repo</a></div>
<div style={{ textAlign: 'right' }}>
See also the{' '}
<a href="https://github.com/mcyph/mxgraph" style={{ color: 'blue' }}>
GitHub repo
</a>
</div>
<ul className="pagetabs">{tabs}</ul>
{children}
</div>

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

@ -84,9 +84,7 @@ class ExtendCanvas extends React.Component {
* page count.
*/
getPageLayout() {
const size = this.pageVisible
? this.getPageSize()
: scrollTileSize;
const size = this.pageVisible ? this.getPageSize() : scrollTileSize;
const bounds = this.getGraphBounds();
if (bounds.width === 0 || bounds.height === 0) {
@ -172,7 +170,7 @@ class ExtendCanvas extends React.Component {
}
// Creates the graph inside the given container
const graph = this.graph = new MyCustomGraph(this.el);
const graph = (this.graph = new MyCustomGraph(this.el));
graph.panningHandler.ignoreCell = true;
graph.setPanning(true);

2
src/pages/backgrounds/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import Grid from './Grid';
import Preview from '../Previews';
import ExtendCanvas from './ExtendCanvas';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Backgrounds() {
return (

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

@ -34,7 +34,7 @@ class HelloWorld extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Create a sample graph in the DOM node with the specified ID.
@ -69,7 +69,7 @@ class HelloWorld extends React.Component {
target: vertex2,
});
});
};
}
}
export default HelloWorld;

16
src/pages/basic/index.js
View File

@ -1,9 +1,15 @@
import React from 'react';
import HelloWorld from "./HelloWorld";
import Preview from "../Previews";
import PageTabs from "../PageTabs";
import HelloWorld from './HelloWorld';
import Preview from '../Previews';
import PageTabs from '../PageTabs';
export default function _Basic() {
{/* <Preview sourceKey="Template" content={<Template />} /> */}
return <PageTabs curPageURL="/basic"><Preview sourceKey="HelloWorld" content={<HelloWorld />} /></PageTabs>;
{
/* <Preview sourceKey="Template" content={<Template />} /> */
}
return (
<PageTabs curPageURL="/basic">
<Preview sourceKey="HelloWorld" content={<HelloWorld />} />
</PageTabs>
);
}

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

@ -12,8 +12,8 @@ import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionCo
import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
import mxPolyline from '../../mxgraph/shape/edge/mxPolyline';
import mxCellState from '../../mxgraph/util/datatypes/mxCellState';
import mxGeometry from "../../mxgraph/util/datatypes/mxGeometry";
import mxConnectionHandler from "../../mxgraph/handler/mxConnectionHandler";
import mxGeometry from '../../mxgraph/util/datatypes/mxGeometry';
import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
class Anchors extends React.Component {
constructor(props) {
@ -41,7 +41,7 @@ class Anchors extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Disables the built-in context menu

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

@ -40,7 +40,7 @@ class FixedPoints extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Snaps to fixed points
@ -259,7 +259,7 @@ class FixedPoints extends React.Component {
return result;
};
*/
};
}
}
export default FixedPoints;

2
src/pages/connections/index.js
View File

@ -6,7 +6,7 @@ import FixedPoints from './FixedPoints';
import HelloPort from './HelloPort';
import Orthogonal from './Orthogonal';
import PortRefs from './PortRefs';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Connections() {
return (

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

@ -35,7 +35,7 @@ class DragSource extends React.Component {
/>
</>
);
};
}
componentDidMount() {
class MyCustomGuide extends mxGuide {
@ -183,7 +183,7 @@ class DragSource extends React.Component {
// Restores original drag icon while outside of graph
ds.createDragElement = mxDragSource.prototype.createDragElement;
};
}
// NOTE: To enable cross-document DnD (eg. between frames),
// the following methods need to be overridden:

2
src/pages/dnd_copypaste/index.js
View File

@ -3,7 +3,7 @@ import Preview from '../Previews';
import Clipboard from './Clipboard';
import DragSource from './DragSource';
import Drop from './Drop';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _DnDCopyPaste() {
return (

12
src/pages/editing/index.js
View File

@ -1,8 +1,12 @@
import React from 'react';
import Preview from "../Previews";
import Editing from "./Editing";
import PageTabs from "../PageTabs";
import Preview from '../Previews';
import Editing from './Editing';
import PageTabs from '../PageTabs';
export default function _Editing() {
return <PageTabs curPageURL="/editing"><Preview sourceKey="Editing" content={<Editing />} /></PageTabs>;
return (
<PageTabs curPageURL="/editing">
<Preview sourceKey="Editing" content={<Editing />} />
</PageTabs>
);
}

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

@ -33,7 +33,7 @@ class Animation extends React.Component {
/>
</>
);
};
}
componentDidMount() {
const graph = new mxGraph(this.el);
@ -88,7 +88,7 @@ class Animation extends React.Component {
state.shape.node
.getElementsByTagName('path')[1]
.setAttribute('class', 'flow');
};
}
}
export default Animation;

2
src/pages/effects/index.js
View File

@ -3,7 +3,7 @@ import Animation from './Animation';
import Preview from '../Previews';
import Morph from './Morph';
import Overlays from './Overlays';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function Effects() {
return (

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

@ -37,7 +37,7 @@ class Boundary extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Disables the built-in context menu
@ -231,7 +231,7 @@ class Boundary extends React.Component {
v3.geometry.offset = new mxPoint(-10, -10);
v3.geometry.relative = true;
});
};
}
}
export default Boundary;

4
src/pages/events/index.js
View File

@ -1,8 +1,8 @@
import React from 'react';
import Boundary from './Boundary';
import Preview from '../Previews';
import Events from "./Events";
import PageTabs from "../PageTabs";
import Events from './Events';
import PageTabs from '../PageTabs';
export default function _Events() {
return (

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

@ -42,7 +42,7 @@ class Control extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Specifies the URL and size of the new control
@ -197,7 +197,7 @@ class Control extends React.Component {
graph.zoomOut();
})
);
};
}
}
export default Control;

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

@ -37,7 +37,7 @@ class FixedIcon extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Overrides the image bounds code to change the position
@ -95,7 +95,7 @@ class FixedIcon extends React.Component {
// Updates the display
graph.getModel().endUpdate();
}
};
}
}
export default FixedIcon;

2
src/pages/icons_images/index.js
View File

@ -7,7 +7,7 @@ import HoverIcons from './HoverIcons';
import Images from './Images';
import Indicators from './Indicators';
import Markers from './Markers';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Backgrounds() {
return (

4
src/pages/index.js
View File

@ -1,8 +1,8 @@
import Head from 'next/head';
import Link from 'next/link';
import styles from '../styles/Home.module.css';
import PageTabs from "./PageTabs";
import Basic from "./basic";
import PageTabs from './PageTabs';
import Basic from './basic';
export default function Home() {
return <Basic />;

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

@ -5,7 +5,7 @@ import Perimeter from './Perimeter';
import SecondLabel from './SecondLabel';
import Wrapping from './Wrapping';
import Labels from './Labels';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Labels() {
return (

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

@ -34,7 +34,7 @@ class Constituent extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Disables the built-in context menu

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

@ -36,7 +36,7 @@ class Folding extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Enables crisp rendering of rectangles in SVG
@ -151,7 +151,7 @@ class Folding extends React.Component {
// Updates the display
graph.getModel().endUpdate();
}
};
}
}
export default Folding;

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

@ -11,7 +11,7 @@ import OrgChart from './OrgChart';
import RadialTreeLayout from './RadialTreeLayout';
import SwimLanes from './SwimLanes';
import Tree from './Tree';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Layout() {
return (

2
src/pages/misc/index.js
View File

@ -7,7 +7,7 @@ import Permissions from './Permissions';
import Thread from './Thread';
import Validation from './Validation';
import Visibility from './Visibility';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Misc() {
return (

6
src/pages/printing/index.js
View File

@ -1,8 +1,10 @@
import React from 'react';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Printing() {
return (
<PageTabs curPageURL="/printing">{/* <Preview sourceKey="PageBreaks" content={<PageBreaks />} /> */}</PageTabs>
<PageTabs curPageURL="/printing">
{/* <Preview sourceKey="PageBreaks" content={<PageBreaks />} /> */}
</PageTabs>
);
}

6
src/pages/shapes_stencils/index.js
View File

@ -1,14 +1,14 @@
import React from 'react';
import Preview from '../Previews';
import Shape from './Shape';
import Stencils from "./Stencils";
import PageTabs from "../PageTabs";
import Stencils from './Stencils';
import PageTabs from '../PageTabs';
export default function _ShapesStencils() {
return (
<PageTabs curPageURL="/shapes_stencils">
<Preview sourceKey="Shape" content={<Shape />} />
{/*<Preview sourceKey="Stencils" content={<Stencils />} />*/}
{/* <Preview sourceKey="Stencils" content={<Stencils />} /> */}
</PageTabs>
);
}

2
src/pages/styles/HoverStyle.js
View File

@ -7,7 +7,7 @@ import React from 'react';
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 mxUtils from '../../mxgraph/util/mxUtils';
class HoverStyle extends React.Component {
constructor(props) {

2
src/pages/styles/index.js
View File

@ -3,7 +3,7 @@ import Preview from '../Previews';
import DynamicStyle from './DynamicStyle';
import HoverStyle from './HoverStyle';
import Stylesheet from './Stylesheet';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Styles() {
return (

2
src/pages/toolbars/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import Preview from '../Previews';
import DynamicToolbar from './DynamicToolbar';
import Toolbar from './Toolbar';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _Toolbars() {
return (

12
src/pages/windows/index.js
View File

@ -1,8 +1,12 @@
import React from 'react';
import Windows from "./Windows";
import Preview from "../Previews";
import PageTabs from "../PageTabs";
import Windows from './Windows';
import Preview from '../Previews';
import PageTabs from '../PageTabs';
export default function _Windows() {
return <PageTabs curPageURL="/windows"><Preview sourceKey="Windows" content={<Windows />} /></PageTabs>;
return (
<PageTabs curPageURL="/windows">
<Preview sourceKey="Windows" content={<Windows />} />
</PageTabs>
);
}

2
src/pages/xml_json/index.js
View File

@ -3,7 +3,7 @@ import Preview from '../Previews';
import JsonData from './JsonData';
import Resources from './Resources';
import UserObject from './UserObject';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _XMLJSON() {
return (

2
src/pages/zoom_offpage/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import Preview from '../Previews';
import LOD from './LOD';
import OffPage from './OffPage';
import PageTabs from "../PageTabs";
import PageTabs from '../PageTabs';
export default function _ZoomOffpage() {
return (

52
src/public/editors/js/app.js
View File

@ -4,50 +4,38 @@
* Defines the startup sequence of the application.
*/
{
/**
* Constructs a new application (returns an mxEditor instance)
*/
function createEditor(config)
{
function createEditor(config) {
let editor = null;
let hideSplash = function()
{
const hideSplash = function() {
// Fades-out the splash screen
let splash = document.getElementById('splash');
const splash = document.getElementById('splash');
if (splash != null)
{
try
{
if (splash != null) {
try {
mxEvent.release(splash);
mxEffects.fadeOut(splash, 100, true);
}
catch (e)
{
} catch (e) {
splash.parentNode.removeChild(splash);
}
}
};
try
{
if (!mxClient.isBrowserSupported())
{
try {
if (!mxClient.isBrowserSupported()) {
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
} else {
mxObjectCodec.allowEval = true;
let node = mxUtils.load(config).getDocumentElement();
const node = mxUtils.load(config).getDocumentElement();
editor = new mxEditor(node);
mxObjectCodec.allowEval = false;
// Adds active border for panning inside the container
editor.graph.createPanningManager = function()
{
let pm = new mxPanningManager(this);
editor.graph.createPanningManager = function() {
const pm = new mxPanningManager(this);
pm.border = 30;
return pm;
@ -57,10 +45,9 @@
editor.graph.timerAutoScroll = true;
// Updates the window title after opening new files
let title = document.title;
let funct = function(sender)
{
document.title = title + ' - ' + sender.getTitle();
const { title } = document;
const funct = function(sender) {
document.title = `${title} - ${sender.getTitle()}`;
};
editor.addListener(mxEvent.OPEN, funct);
@ -71,22 +58,19 @@
funct(editor);
// Displays version in statusbar
editor.setStatus('mxGraph '+mxClient.VERSION);
editor.setStatus(`mxGraph ${mxClient.VERSION}`);
// Shows the application
hideSplash();
}
}
catch (e)
{
} catch (e) {
hideSplash();
// Shows an error message if the editor cannot start
mxUtils.alert('Cannot start application: ' + e.message);
mxUtils.alert(`Cannot start application: ${e.message}`);
throw e; // for debugging
}
return editor;
}
}

1
src/tsconfig.json
View File

@ -6,6 +6,7 @@
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react-native",
"module": "es2020",
"lib": ["es2020", "dom"],
"moduleResolution": "node",
"noEmit": true,