From 846f20335c925f951e20493bd4b3d5e2a5f5de0f Mon Sep 17 00:00:00 2001 From: Junsik Shim Date: Tue, 4 May 2021 23:29:44 +0900 Subject: [PATCH] Converted js files to ts. --- .../{mxDictionary.js => mxDictionary.ts} | 16 +- .../{mxGeometry.js => mxGeometry.ts} | 138 +++----- ...xObjectIdentity.js => mxObjectIdentity.ts} | 11 +- .../util/datatypes/{mxPoint.js => mxPoint.ts} | 40 +-- .../{mxRectangle.js => mxRectangle.ts} | 113 +++---- .../src/util/event/{mxEvent.js => mxEvent.ts} | 294 +++++++----------- packages/core/src/view/graph/mxGraph.ts | 72 ++--- packages/core/src/view/graph/mxGraphView.ts | 89 +++--- 8 files changed, 334 insertions(+), 439 deletions(-) rename packages/core/src/util/datatypes/{mxDictionary.js => mxDictionary.ts} (91%) rename packages/core/src/util/datatypes/{mxGeometry.js => mxGeometry.ts} (78%) rename packages/core/src/util/datatypes/{mxObjectIdentity.js => mxObjectIdentity.ts} (87%) rename packages/core/src/util/datatypes/{mxPoint.js => mxPoint.ts} (64%) rename packages/core/src/util/datatypes/{mxRectangle.js => mxRectangle.ts} (61%) rename packages/core/src/util/event/{mxEvent.js => mxEvent.ts} (76%) diff --git a/packages/core/src/util/datatypes/mxDictionary.js b/packages/core/src/util/datatypes/mxDictionary.ts similarity index 91% rename from packages/core/src/util/datatypes/mxDictionary.js rename to packages/core/src/util/datatypes/mxDictionary.ts index aa6aaa25f..37f4e2b84 100644 --- a/packages/core/src/util/datatypes/mxDictionary.js +++ b/packages/core/src/util/datatypes/mxDictionary.ts @@ -7,6 +7,12 @@ import mxObjectIdentity from './mxObjectIdentity'; +type Dictionary = { + [key: string]: any; +}; + +type Visitor = (key: any, value: any) => void; + /** * Class: mxDictionary * @@ -27,7 +33,7 @@ class mxDictionary { * * Stores the (key, value) pairs in this dictionary. */ - map = null; + map: Dictionary = {}; /** * Function: clear @@ -43,7 +49,7 @@ class mxDictionary { * * Returns the value for the given key. */ - get(key) { + get(key: any) { const id = mxObjectIdentity.get(key); return this.map[id]; @@ -55,7 +61,7 @@ class mxDictionary { * Stores the value under the given key and returns the previous * value for that key. */ - put(key, value) { + put(key: any, value: any) { const id = mxObjectIdentity.get(key); const previous = this.map[id]; this.map[id] = value; @@ -69,7 +75,7 @@ class mxDictionary { * Removes the value for the given key and returns the value that * has been removed. */ - remove(key) { + remove(key: any) { const id = mxObjectIdentity.get(key); const previous = this.map[id]; delete this.map[id]; @@ -118,7 +124,7 @@ class mxDictionary { * * visitor - A function that takes the key and value as arguments. */ - visit(visitor) { + visit(visitor: Visitor) { for (const key in this.map) { visitor(key, this.map[key]); } diff --git a/packages/core/src/util/datatypes/mxGeometry.js b/packages/core/src/util/datatypes/mxGeometry.ts similarity index 78% rename from packages/core/src/util/datatypes/mxGeometry.js rename to packages/core/src/util/datatypes/mxGeometry.ts index 5328c3698..5e0365f85 100644 --- a/packages/core/src/util/datatypes/mxGeometry.js +++ b/packages/core/src/util/datatypes/mxGeometry.ts @@ -74,14 +74,18 @@ import { clone } from '../mxCloneUtils'; * defines the absolute offset for the label inside the vertex or group. */ class mxGeometry extends mxRectangle { - constructor(x, y, width, height) { + constructor( + x: number = 0, + y: number = 0, + width: number = 0, + height: number = 0 + ) { super(x, y, width, height); } /** * Global switch to translate the points in translate. Default is true. */ - // TRANSLATE_CONTROL_POINTS: boolean; TRANSLATE_CONTROL_POINTS = true; /** @@ -90,24 +94,21 @@ class mxGeometry extends mxRectangle { * * @see {@link swap} */ - // alternateBounds: mxRectangle; - alternateBounds = null; + alternateBounds: mxRectangle | null = null; /** * Defines the source {@link mxPoint} of the edge. This is used if the * corresponding edge does not have a source vertex. Otherwise it is * ignored. Default is null. */ - // sourcePoint: mxPoint; - sourcePoint = null; + sourcePoint: mxPoint | null = null; /** * Defines the target {@link mxPoint} of the edge. This is used if the * corresponding edge does not have a target vertex. Otherwise it is * ignored. Default is null. */ - // targetPoint: mxPoint; - targetPoint = null; + targetPoint: mxPoint | null = null; /** * Array of {@link mxPoints} which specifies the control points along the edge. @@ -115,8 +116,7 @@ class mxGeometry extends mxRectangle { * use {@link targetPoint} and {@link sourcePoint} or set the terminals of the edge to * a non-null value. Default is null. */ - // points: Array; - points = null; + points: mxPoint[] = []; /** * For edges, this holds the offset (in pixels) from the position defined @@ -125,8 +125,7 @@ class mxGeometry extends mxRectangle { * coordinates. For absolute geometries (for vertices), this defines the * offset for the label. Default is null. */ - // offset: mxPoint; - offset = null; + offset: mxPoint | null = null; /** * Specifies if the coordinates in the geometry are to be interpreted as @@ -141,7 +140,6 @@ class mxGeometry extends mxRectangle { * * Default is false. */ - // relative: boolean; relative = false; /** @@ -153,9 +151,8 @@ class mxGeometry extends mxRectangle { * calling this method and setting the geometry of the cell using * {@link mxGraphModel.setGeometry}. */ - // swap(): void; swap() { - if (this.alternateBounds != null) { + if (this.alternateBounds) { const old = new mxRectangle(this.x, this.y, this.width, this.height); this.x = this.alternateBounds.x; @@ -173,8 +170,7 @@ class mxGeometry extends mxRectangle { * * @param {Boolean} isSource that specifies if the source or target point should be returned. */ - // getTerminalPoint(isSource: boolean): mxPoint; - getTerminalPoint(isSource) { + getTerminalPoint(isSource: boolean) { return isSource ? this.sourcePoint : this.targetPoint; } @@ -185,8 +181,7 @@ class mxGeometry extends mxRectangle { * @param {Point} point to be used as the new source or target point. * @param {Boolean} isSource that specifies if the source or target point should be set. */ - // setTerminalPoint(point: mxPoint, isSource: boolean): mxPoint; - setTerminalPoint(point, isSource) { + setTerminalPoint(point: mxPoint, isSource: boolean) { if (isSource) { this.sourcePoint = point; } else { @@ -205,8 +200,7 @@ class mxGeometry extends mxRectangle { * @param {Number} angle that specifies the rotation angle in degrees. * @param {mxPoint} cx that specifies the center of the rotation. */ - // rotate(angle: number, cx: mxPoint): void; - rotate(angle, cx) { + rotate(angle: number, cx: mxPoint) { const rad = mxUtils.toRadians(angle); const cos = Math.cos(rad); const sin = Math.sin(rad); @@ -221,23 +215,23 @@ class mxGeometry extends mxRectangle { } // Rotates the source point - if (this.sourcePoint != null) { + if (this.sourcePoint) { const pt = mxUtils.getRotatedPoint(this.sourcePoint, cos, sin, cx); this.sourcePoint.x = Math.round(pt.x); this.sourcePoint.y = Math.round(pt.y); } // Translates the target point - if (this.targetPoint != null) { + if (this.targetPoint) { const pt = mxUtils.getRotatedPoint(this.targetPoint, cos, sin, cx); this.targetPoint.x = Math.round(pt.x); this.targetPoint.y = Math.round(pt.y); } // Translate the control points - if (this.points != null) { + if (this.points) { for (let i = 0; i < this.points.length; i += 1) { - if (this.points[i] != null) { + if (this.points[i]) { const pt = mxUtils.getRotatedPoint(this.points[i], cos, sin, cx); this.points[i].x = Math.round(pt.x); this.points[i].y = Math.round(pt.y); @@ -246,34 +240,6 @@ class mxGeometry extends mxRectangle { } } - get width() { - return this._width || 0; - } - - set width(width) { - width = parseFloat(width); - - // `null` is used as a default value, so comment this out for now. - // if (Number.isNaN(width)) { - // throw new Error('Invalid width supplied'); - // } - this._width = width; - } - - get height() { - return this._height || 0; - } - - set height(height) { - height = parseFloat(height); - - // `null` is used as a default value, so comment this out for now. - // if (Number.isNaN(height)) { - // throw new Error('Invalid height supplied'); - // } - this._height = height; - } - /** * Translates the geometry by the specified amount. That is, {@link x} and {@link y} of the * geometry, the {@link sourcePoint}, {@link targetPoint} and all {@link points} are translated @@ -284,11 +250,7 @@ class mxGeometry extends mxRectangle { * @param {Number} dx that specifies the x-coordinate of the translation. * @param {Number} dy that specifies the y-coordinate of the translation. */ - // translate(dx: number, dy: number): void; - translate(dx, dy) { - dx = parseFloat(dx); - dy = parseFloat(dy); - + translate(dx: number, dy: number) { // Translates the geometry if (!this.relative) { this.x += dx; @@ -296,21 +258,21 @@ class mxGeometry extends mxRectangle { } // Translates the source point - if (this.sourcePoint != null) { + if (this.sourcePoint) { this.sourcePoint.x = this.sourcePoint.x + dx; this.sourcePoint.y = this.sourcePoint.y + dy; } // Translates the target point - if (this.targetPoint != null) { + if (this.targetPoint) { this.targetPoint.x = this.targetPoint.x + dx; this.targetPoint.y = this.targetPoint.y + dy; } // Translate the control points - if (this.TRANSLATE_CONTROL_POINTS && this.points != null) { + if (this.TRANSLATE_CONTROL_POINTS && this.points) { for (let i = 0; i < this.points.length; i += 1) { - if (this.points[i] != null) { + if (this.points[i]) { this.points[i].x = this.points[i].x + dx; this.points[i].y = this.points[i].y + dy; } @@ -329,30 +291,24 @@ class mxGeometry extends mxRectangle { * @param {Number} sy that specifies the vertical scale factor. * @param {Optional} fixedAspect boolean to keep the aspect ratio fixed. */ - // scale(sx: number, sy: number, fixedAspect: boolean): void; - scale(sx, sy, fixedAspect) { - sx = parseFloat(sx); - sy = parseFloat(sy); - + scale(sx: number, sy: number, fixedAspect: boolean) { // Translates the source point - if (this.sourcePoint != null) { + if (this.sourcePoint) { this.sourcePoint.x = this.sourcePoint.x * sx; this.sourcePoint.y = this.sourcePoint.y * sy; } // Translates the target point - if (this.targetPoint != null) { + if (this.targetPoint) { this.targetPoint.x = this.targetPoint.x * sx; this.targetPoint.y = this.targetPoint.y * sy; } // Translate the control points - if (this.points != null) { - for (let i = 0; i < this.points.length; i += 1) { - if (this.points[i] != null) { - this.points[i].x = this.points[i].x * sx; - this.points[i].y = this.points[i].y * sy; - } + for (let i = 0; i < this.points.length; i += 1) { + if (this.points[i]) { + this.points[i].x = this.points[i].x * sx; + this.points[i].y = this.points[i].y * sy; } } @@ -373,25 +329,21 @@ class mxGeometry extends mxRectangle { /** * Returns true if the given object equals this geometry. */ - // equals(obj: mxGeometry): boolean; - equals(obj) { + equals(geom: mxGeometry | null) { + if (!geom) return false; + return ( - super.equals(obj) && - this.relative === obj.relative && - ((this.sourcePoint == null && obj.sourcePoint == null) || - (this.sourcePoint != null && - this.sourcePoint.equals(obj.sourcePoint))) && - ((this.targetPoint == null && obj.targetPoint == null) || - (this.targetPoint != null && - this.targetPoint.equals(obj.targetPoint))) && - ((this.points == null && obj.points == null) || - (this.points != null && - mxUtils.equalPoints(this.points, obj.points))) && - ((this.alternateBounds == null && obj.alternateBounds == null) || - (this.alternateBounds != null && - this.alternateBounds.equals(obj.alternateBounds))) && - ((this.offset == null && obj.offset == null) || - (this.offset != null && this.offset.equals(obj.offset))) + super.equals(geom) && + this.relative === geom.relative && + ((this.sourcePoint === null && geom.sourcePoint === null) || + !!this.sourcePoint?.equals(geom.sourcePoint)) && + ((this.targetPoint === null && geom.targetPoint === null) || + !!this.targetPoint?.equals(geom.targetPoint)) && + mxUtils.equalPoints(this.points, geom.points) && + ((this.alternateBounds === null && geom.alternateBounds === null) || + !!this.alternateBounds?.equals(geom.alternateBounds)) && + ((this.offset === null && geom.offset === null) || + !!this.offset?.equals(geom.offset)) ); } diff --git a/packages/core/src/util/datatypes/mxObjectIdentity.js b/packages/core/src/util/datatypes/mxObjectIdentity.ts similarity index 87% rename from packages/core/src/util/datatypes/mxObjectIdentity.js rename to packages/core/src/util/datatypes/mxObjectIdentity.ts index 9cc9405b1..5ab9e72b6 100644 --- a/packages/core/src/util/datatypes/mxObjectIdentity.js +++ b/packages/core/src/util/datatypes/mxObjectIdentity.ts @@ -27,17 +27,15 @@ class mxObjectIdentity { /** * Current counter. */ - // static counter: number; static counter = 0; /** * Returns the ID for the given object or function or null if no object * is specified. */ - // static get(obj: any): any; - static get(obj) { - if (obj != null) { - if (obj[mxObjectIdentity.FIELD_NAME] == null) { + static get(obj: any) { + if (obj) { + if (!(mxObjectIdentity.FIELD_NAME in obj)) { if (typeof obj === 'object') { const ctor = getFunctionName(obj.constructor); obj[ @@ -59,8 +57,7 @@ class mxObjectIdentity { /** * Deletes the ID from the given object or function. */ - // static clear(obj: any): void; - static clear(obj) { + static clear(obj: any) { if (typeof obj === 'object' || typeof obj === 'function') { delete obj[mxObjectIdentity.FIELD_NAME]; } diff --git a/packages/core/src/util/datatypes/mxPoint.js b/packages/core/src/util/datatypes/mxPoint.ts similarity index 64% rename from packages/core/src/util/datatypes/mxPoint.js rename to packages/core/src/util/datatypes/mxPoint.ts index 7c44c1f69..5302b08a4 100644 --- a/packages/core/src/util/datatypes/mxPoint.js +++ b/packages/core/src/util/datatypes/mxPoint.ts @@ -16,9 +16,9 @@ * coordinates are given, then the default values for and are used. */ class mxPoint { - constructor(x, y) { - this.x = x != null ? x : 0; - this.y = y != null ? y : 0; + constructor(x: number = 0, y: number = 0) { + this.x = x; + this.y = y; } /** @@ -26,38 +26,32 @@ class mxPoint { * * Holds the x-coordinate of the point. Default is 0. */ - // x: number; - _x = null; + _x = 0; /** * Variable: y * * Holds the y-coordinate of the point. Default is 0. */ - // y: number; - _y = null; + _y = 0; get x() { - return this._x || 0; + return this._x; } - set x(x) { - x = parseFloat(x); - if (Number.isNaN(x)) { - throw new Error('Invalid x supplied'); - } + set x(x: number) { + if (Number.isNaN(x)) throw new Error('Invalid x supplied.'); + this._x = x; } get y() { - return this._y || 0; + return this._y; } - set y(y) { - y = parseFloat(y); - if (Number.isNaN(y)) { - throw new Error('Invalid y supplied'); - } + set y(y: number) { + if (Number.isNaN(y)) throw new Error('Invalid y supplied.'); + this._y = y; } @@ -66,9 +60,10 @@ class mxPoint { * * Returns true if the given object equals this point. */ - // equals(obj: mxPoint): boolean; - equals(obj) { - return obj != null && obj.x == this.x && obj.y == this.y; + equals(p: mxPoint | null) { + if (!p) return false; + + return p.x === this.x && p.y === this.y; } /** @@ -76,7 +71,6 @@ class mxPoint { * * Returns a clone of this . */ - // clone(): mxPoint; clone() { return new mxPoint(this.x, this.y); } diff --git a/packages/core/src/util/datatypes/mxRectangle.js b/packages/core/src/util/datatypes/mxRectangle.ts similarity index 61% rename from packages/core/src/util/datatypes/mxRectangle.js rename to packages/core/src/util/datatypes/mxRectangle.ts index 8d630f0d2..4ea379a21 100644 --- a/packages/core/src/util/datatypes/mxRectangle.js +++ b/packages/core/src/util/datatypes/mxRectangle.ts @@ -19,12 +19,17 @@ import mxPoint from './mxPoint'; * are given then the respective default values are used. */ class mxRectangle extends mxPoint { - constructor(x, y, width, height) { + constructor( + x: number = 0, + y: number = 0, + width: number = 0, + height: number = 0 + ) { super(x, y); // replace super of mxPoint - this.width = width != null ? width : 0; - this.height = height != null ? height : 0; + this.width = width; + this.height = height; } /** @@ -32,24 +37,41 @@ class mxRectangle extends mxPoint { * * Holds the width of the rectangle. Default is 0. */ - // width: number; - width = null; + _width = 0; /** * Variable: height * * Holds the height of the rectangle. Default is 0. */ - // height: number; - height = null; + _height = 0; + + get width() { + return this._width; + } + + set width(width: number) { + if (Number.isNaN(width)) throw new Error('Invalid width supplied.'); + + this._width = width; + } + + get height() { + return this._height; + } + + set height(height: number) { + if (Number.isNaN(height)) throw new Error('Invalid height supplied.'); + + this._height = height; + } /** * Function: fromRectangle * * Returns a new which is a copy of the given rectangle. */ - // static fromRectangle(rect: mxRectangle): mxRectangle; - static fromRectangle = rect => { + static fromRectangle = (rect: mxRectangle) => { return new mxRectangle(rect.x, rect.y, rect.width, rect.height); }; @@ -58,12 +80,11 @@ class mxRectangle extends mxPoint { * * Sets this rectangle to the specified values */ - // setRect(x: number, y: number, w: number, h: number): void; - setRect(x, y, w, h) { + setRect(x: number, y: number, width: number, height: number) { this.x = x; this.y = y; - this.width = w; - this.height = h; + this.width = width; + this.height = height; } /** @@ -71,7 +92,6 @@ class mxRectangle extends mxPoint { * * Returns the x-coordinate of the center point. */ - // getCenterX(): number; getCenterX() { return this.x + this.width / 2; } @@ -81,7 +101,6 @@ class mxRectangle extends mxPoint { * * Returns the y-coordinate of the center point. */ - // getCenterY(): number; getCenterY() { return this.y + this.height / 2; } @@ -91,19 +110,16 @@ class mxRectangle extends mxPoint { * * Adds the given rectangle to this rectangle. */ - // add(rect: mxRectangle): void; - add(rect) { - if (rect != null) { - const minX = Math.min(this.x, rect.x); - const minY = Math.min(this.y, rect.y); - const maxX = Math.max(this.x + this.width, rect.x + rect.width); - const maxY = Math.max(this.y + this.height, rect.y + rect.height); + add(rect: mxRectangle) { + const minX = Math.min(this.x, rect.x); + const minY = Math.min(this.y, rect.y); + const maxX = Math.max(this.x + this.width, rect.x + rect.width); + const maxY = Math.max(this.y + this.height, rect.y + rect.height); - this.x = minX; - this.y = minY; - this.width = maxX - minX; - this.height = maxY - minY; - } + this.x = minX; + this.y = minY; + this.width = maxX - minX; + this.height = maxY - minY; } /** @@ -111,20 +127,17 @@ class mxRectangle extends mxPoint { * * Changes this rectangle to where it overlaps with the given rectangle. */ - // intersect(rect: mxRectangle): void; - intersect(rect) { - if (rect != null) { - const r1 = this.x + this.width; - const r2 = rect.x + rect.width; + intersect(rect: mxRectangle) { + const r1 = this.x + this.width; + const r2 = rect.x + rect.width; - const b1 = this.y + this.height; - const b2 = rect.y + rect.height; + const b1 = this.y + this.height; + const b2 = rect.y + rect.height; - this.x = Math.max(this.x, rect.x); - this.y = Math.max(this.y, rect.y); - this.width = Math.min(r1, r2) - this.x; - this.height = Math.min(b1, b2) - this.y; - } + this.x = Math.max(this.x, rect.x); + this.y = Math.max(this.y, rect.y); + this.width = Math.min(r1, r2) - this.x; + this.height = Math.min(b1, b2) - this.y; } /** @@ -134,14 +147,11 @@ class mxRectangle extends mxPoint { * the given amount from the x- and y-coordinates and adds twice the amount * to the width and height. */ - // grow(amount: number): void; - grow(amount) { + grow(amount: number) { this.x -= amount; this.y -= amount; this.width += 2 * amount; this.height += 2 * amount; - - return this; } /** @@ -149,7 +159,6 @@ class mxRectangle extends mxPoint { * * Returns the top, left corner as a new . */ - // getPoint(): mxPoint; getPoint() { return new mxPoint(this.x, this.y); } @@ -159,11 +168,11 @@ class mxRectangle extends mxPoint { * * Rotates this rectangle by 90 degree around its center point. */ - // rotate90(): void; rotate90() { const t = (this.width - this.height) / 2; this.x += t; this.y -= t; + const tmp = this.width; this.width = this.height; this.height = tmp; @@ -174,14 +183,14 @@ class mxRectangle extends mxPoint { * * Returns true if the given object equals this rectangle. */ - // equals(obj: mxRectangle): boolean; - equals(obj) { + equals(rect: mxRectangle | null) { + if (!rect) return false; + return ( - obj != null && - obj.x === this.x && - obj.y === this.y && - obj.width === this.width && - obj.height === this.height + rect.x === this.x && + rect.y === this.y && + rect.width === this.width && + rect.height === this.height ); } diff --git a/packages/core/src/util/event/mxEvent.js b/packages/core/src/util/event/mxEvent.ts similarity index 76% rename from packages/core/src/util/event/mxEvent.js rename to packages/core/src/util/event/mxEvent.ts index 7989849d2..35143a786 100644 --- a/packages/core/src/util/event/mxEvent.js +++ b/packages/core/src/util/event/mxEvent.ts @@ -7,6 +7,27 @@ import mxMouseEvent from './mxMouseEvent'; import mxClient from '../../mxClient'; import { isConsumed, isMouseEvent } from '../mxEventUtils'; +import mxGraph from '../../view/graph/mxGraph'; +import mxCellState from '../../view/cell/mxCellState'; + +type Listener = { + name: string; + f: EventListener; +}; + +type ListenerTarget = { + mxListenerList?: Listener[]; +}; + +type Listenable = (Node | Window) & ListenerTarget; + +type GestureEvent = Event & + MouseEvent & { + scale?: number; + pointerId?: number; + }; + +type EventCache = GestureEvent[]; // Checks if passive event listeners are supported // see https://github.com/Modernizr/Modernizr/issues/1894 @@ -48,15 +69,21 @@ class mxEvent { * to a given execution scope. */ // static addListener(element: Node | Window, eventName: string, funct: Function): void; - static addListener(element, eventName, funct) { + static addListener( + element: Listenable, + eventName: string, + funct: EventListener + ) { element.addEventListener( eventName, funct, supportsPassive ? { passive: false } : false ); - if (element.mxListenerList == null) { + + if (!element.mxListenerList) { element.mxListenerList = []; } + const entry = { name: eventName, f: funct }; element.mxListenerList.push(entry); } @@ -65,10 +92,14 @@ class mxEvent { * Removes the specified listener from the given element. */ // static removeListener(element: Node | Window, eventName: string, funct: Function): void; - static removeListener(element, eventName, funct) { + static removeListener( + element: Listenable, + eventName: string, + funct: EventListener + ) { element.removeEventListener(eventName, funct, false); - if (element.mxListenerList != null) { + if (element.mxListenerList) { const listenerCount = element.mxListenerList.length; for (let i = 0; i < listenerCount; i += 1) { @@ -79,9 +110,6 @@ class mxEvent { break; } } - if (element.mxListenerList.length === 0) { - element.mxListenerList = null; - } } } @@ -89,10 +117,10 @@ class mxEvent { * Removes all listeners from the given element. */ // static removeAllListeners(element: Node | Window): void; - static removeAllListeners(element) { + static removeAllListeners(element: Listenable) { const list = element.mxListenerList; - if (list != null) { + if (list) { while (list.length > 0) { const entry = list[0]; mxEvent.removeListener(element, entry.name, entry.f); @@ -109,8 +137,13 @@ class mxEvent { * is false and is true then the respective touch events * will be registered as well as the mouse events. */ - static addGestureListeners(node, startListener, moveListener, endListener) { - if (startListener != null) { + static addGestureListeners( + node: Listenable, + startListener: EventListener | null, + moveListener: EventListener | null, + endListener: EventListener | null + ) { + if (startListener) { mxEvent.addListener( node, mxClient.IS_POINTER ? 'pointerdown' : 'mousedown', @@ -118,7 +151,7 @@ class mxEvent { ); } - if (moveListener != null) { + if (moveListener) { mxEvent.addListener( node, mxClient.IS_POINTER ? 'pointermove' : 'mousemove', @@ -126,7 +159,7 @@ class mxEvent { ); } - if (endListener != null) { + if (endListener) { mxEvent.addListener( node, mxClient.IS_POINTER ? 'pointerup' : 'mouseup', @@ -135,15 +168,15 @@ class mxEvent { } if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) { - if (startListener != null) { + if (startListener) { mxEvent.addListener(node, 'touchstart', startListener); } - if (moveListener != null) { + if (moveListener) { mxEvent.addListener(node, 'touchmove', moveListener); } - if (endListener != null) { + if (endListener) { mxEvent.addListener(node, 'touchend', endListener); } } @@ -156,12 +189,12 @@ class mxEvent { * respective touch events if is true. */ static removeGestureListeners( - node, - startListener, - moveListener, - endListener + node: Listenable, + startListener: EventListener | null, + moveListener: EventListener | null, + endListener: EventListener | null ) { - if (startListener != null) { + if (startListener) { mxEvent.removeListener( node, mxClient.IS_POINTER ? 'pointerdown' : 'mousedown', @@ -169,7 +202,7 @@ class mxEvent { ); } - if (moveListener != null) { + if (moveListener) { mxEvent.removeListener( node, mxClient.IS_POINTER ? 'pointermove' : 'mousemove', @@ -177,7 +210,7 @@ class mxEvent { ); } - if (endListener != null) { + if (endListener) { mxEvent.removeListener( node, mxClient.IS_POINTER ? 'pointerup' : 'mouseup', @@ -186,15 +219,15 @@ class mxEvent { } if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) { - if (startListener != null) { + if (startListener) { mxEvent.removeListener(node, 'touchstart', startListener); } - if (moveListener != null) { + if (moveListener) { mxEvent.removeListener(node, 'touchmove', moveListener); } - if (endListener != null) { + if (endListener) { mxEvent.removeListener(node, 'touchend', endListener); } } @@ -210,15 +243,23 @@ class mxEvent { * functions that take the trigger event as arguments and replace the * default behaviour. */ - static redirectMouseEvents(node, graph, state, down, move, up, dblClick) { - const getState = evt => { + static redirectMouseEvents( + node: Listenable, + graph: mxGraph, + state: mxCellState | ((evt: Event) => mxCellState), + down: EventListener | null, + move: EventListener | null, + up: EventListener | null, + dblClick: EventListener | null + ) { + const getState = (evt: Event) => { return typeof state === 'function' ? state(evt) : state; }; mxEvent.addGestureListeners( node, - evt => { - if (down != null) { + (evt) => { + if (down) { down(evt); } else if (!isConsumed(evt)) { graph.fireMouseEvent( @@ -227,8 +268,8 @@ class mxEvent { ); } }, - evt => { - if (move != null) { + (evt) => { + if (move) { move(evt); } else if (!isConsumed(evt)) { graph.fireMouseEvent( @@ -237,8 +278,8 @@ class mxEvent { ); } }, - evt => { - if (up != null) { + (evt) => { + if (up) { up(evt); } else if (!isConsumed(evt)) { graph.fireMouseEvent( @@ -249,12 +290,12 @@ class mxEvent { } ); - mxEvent.addListener(node, 'dblclick', evt => { - if (dblClick != null) { + mxEvent.addListener(node, 'dblclick', (evt) => { + if (dblClick) { dblClick(evt); } else if (!isConsumed(evt)) { const tmp = getState(evt); - graph.dblClick(evt, tmp != null ? tmp.cell : null); + graph.dblClick(evt as MouseEvent, tmp?.cell); } }); } @@ -264,14 +305,13 @@ class mxEvent { * * @param element DOM node to remove the listeners from. */ - // static release(element: Node | Window): void; - static release(element) { + static release(element: Listenable | null) { try { - if (element != null) { + if (element) { mxEvent.removeAllListeners(element); - const children = element.childNodes; - if (children != null) { + if ('childNodes' in element) { + const children = element.childNodes; const childCount = children.length; for (let i = 0; i < childCount; i += 1) { mxEvent.release(children[i]); @@ -307,17 +347,18 @@ class mxEvent { * @param target Target for installing the listener in Google Chrome. See * https://www.chromestatus.com/features/6662647093133312. */ - // static addMouseWheelListener(funct: (event: Event, up: boolean) => void, target?: Node | Window): void; - static addMouseWheelListener(funct, target) { + static addMouseWheelListener( + funct: ( + event: Event, + up: boolean, + force?: boolean, + cx?: number, + cy?: number + ) => void, + target: Listenable + ) { if (funct != null) { - const wheelHandler = evt => { - // IE does not give an event object but the - // global event object is the mousewheel event - // at this point in time. - if (evt == null) { - evt = window.event; - } - + const wheelHandler = (evt: WheelEvent) => { // To prevent window zoom on trackpad pinch if (evt.ctrlKey) { evt.preventDefault(); @@ -334,38 +375,41 @@ class mxEvent { if (mxClient.IS_SF && !mxClient.IS_TOUCH) { let scale = 1; - mxEvent.addListener(target, 'gesturestart', evt => { + mxEvent.addListener(target, 'gesturestart', (evt) => { mxEvent.consume(evt); scale = 1; }); - mxEvent.addListener(target, 'gesturechange', evt => { + mxEvent.addListener(target, 'gesturechange', ((evt: GestureEvent) => { mxEvent.consume(evt); - const diff = scale - evt.scale; - if (Math.abs(diff) > 0.2) { - funct(evt, diff < 0, true); - scale = evt.scale; + if (typeof evt.scale === 'number') { + const diff = scale - evt.scale; + + if (Math.abs(diff) > 0.2) { + funct(evt, diff < 0, true); + scale = evt.scale; + } } - }); + }) as EventListener); - mxEvent.addListener(target, 'gestureend', evt => { + mxEvent.addListener(target, 'gestureend', (evt) => { mxEvent.consume(evt); }); } else { - let evtCache = []; + let evtCache: EventCache = []; let dx0 = 0; let dy0 = 0; // Adds basic listeners for graph event dispatching mxEvent.addGestureListeners( target, - evt => { + ((evt: GestureEvent) => { if (!isMouseEvent(evt) && evt.pointerId != null) { evtCache.push(evt); } - }, - evt => { + }) as EventListener, + ((evt: GestureEvent) => { if (!isMouseEvent(evt) && evtCache.length == 2) { // Find this event in the cache and update its record with this event for (let i = 0; i < evtCache.length; i += 1) { @@ -399,8 +443,8 @@ class mxEvent { dy0 = dy; } } - }, - evt => { + }) as EventListener, + (evt) => { evtCache = []; dx0 = 0; dy0 = 0; @@ -408,16 +452,15 @@ class mxEvent { ); } - mxEvent.addListener(target, 'wheel', wheelHandler); + mxEvent.addListener(target, 'wheel', wheelHandler as EventListener); } } /** * Disables the context menu for the given element. */ - // static disableContextMenu(element: Node): void; - static disableContextMenu(element) { - mxEvent.addListener(element, 'contextmenu', evt => { + static disableContextMenu(element: Listenable) { + mxEvent.addListener(element, 'contextmenu', (evt) => { if (evt.preventDefault) { evt.preventDefault(); } @@ -434,11 +477,11 @@ class mxEvent { * @param {boolean} [stopPropagation=true] Option boolean to stop event propagation. Default is * true. */ - // static consume(evt: Event, preventDefault?: boolean, stopPropagation?: boolean): void; - static consume(evt, preventDefault, stopPropagation) { - preventDefault = preventDefault != null ? preventDefault : true; - stopPropagation = stopPropagation != null ? stopPropagation : true; - + static consume( + evt: Event, + preventDefault: boolean = true, + stopPropagation: boolean = true + ) { if (preventDefault) { if (evt.preventDefault) { if (stopPropagation) { @@ -452,6 +495,7 @@ class mxEvent { } // Opera + // @ts-ignore This is a non-standard property. evt.isConsumed = true; // Other browsers @@ -469,7 +513,6 @@ class mxEvent { * value that does not interfere with any possible handle indices. * @default -1 */ - // static LABEL_HANDLE: -1; static LABEL_HANDLE = -1; /** @@ -477,7 +520,6 @@ class mxEvent { * negative value that does not interfere with any possible handle indices. * @default -2 */ - // static ROTATION_HANDLE: -2; static ROTATION_HANDLE = -2; /** @@ -486,7 +528,6 @@ class mxEvent { * custom handle. * @default -100 */ - // static CUSTOM_HANDLE: -100; static CUSTOM_HANDLE = -100; /** @@ -498,7 +539,6 @@ class mxEvent { * * @default -100000 */ - // static VIRTUAL_HANDLE: -100000; static VIRTUAL_HANDLE = -100000; // @@ -508,577 +548,481 @@ class mxEvent { /** * Specifies the event name for mouseDown. */ - // static MOUSE_DOWN: 'mouseDown'; static MOUSE_DOWN = 'mouseDown'; /** * Specifies the event name for mouseMove. */ - // static MOUSE_MOVE: 'mouseMove'; static MOUSE_MOVE = 'mouseMove'; /** * Specifies the event name for mouseUp. */ - // static MOUSE_UP: 'mouseUp'; static MOUSE_UP = 'mouseUp'; /** * Specifies the event name for activate. */ - // static ACTIVATE: 'activate'; static ACTIVATE = 'activate'; /** * Specifies the event name for resizeStart. */ - // static RESIZE_START: 'resizeStart'; static RESIZE_START = 'resizeStart'; /** * Specifies the event name for resize. */ - // static RESIZE: 'resize'; static RESIZE = 'resize'; /** * Specifies the event name for resizeEnd. */ - // static RESIZE_END: 'resizeEnd'; static RESIZE_END = 'resizeEnd'; /** * Specifies the event name for moveStart. */ - // static MOVE_START: 'moveStart'; static MOVE_START = 'moveStart'; /** * Specifies the event name for move. */ - // static MOVE: 'move'; static MOVE = 'move'; /** * Specifies the event name for moveEnd. */ - // static MOVE_END: 'moveEnd'; static MOVE_END = 'moveEnd'; /** * Specifies the event name for panStart. */ - // static PAN_START: 'panStart'; static PAN_START = 'panStart'; /** * Specifies the event name for pan. */ - // static PAN: 'pan'; static PAN = 'pan'; /** * Specifies the event name for panEnd. */ - // static PAN_END: 'panEnd'; static PAN_END = 'panEnd'; /** * Specifies the event name for minimize. */ - // static MINIMIZE: 'minimize'; static MINIMIZE = 'minimize'; /** * Specifies the event name for normalize. */ - // static NORMALIZE: 'normalize'; static NORMALIZE = 'normalize'; /** * Specifies the event name for maximize. */ - // static MAXIMIZE: 'maximize'; static MAXIMIZE = 'maximize'; /** * Specifies the event name for hide. */ - // static HIDE: 'hide'; static HIDE = 'hide'; /** * Specifies the event name for show. */ - // static SHOW: 'show'; static SHOW = 'show'; /** * Specifies the event name for close. */ - // static CLOSE: 'close'; static CLOSE = 'close'; /** * Specifies the event name for destroy. */ - // static DESTROY: 'destroy'; static DESTROY = 'destroy'; /** * Specifies the event name for refresh. */ - // static REFRESH: 'refresh'; static REFRESH = 'refresh'; /** * Specifies the event name for size. */ - // static SIZE: 'size'; static SIZE = 'size'; /** * Specifies the event name for select. */ - // static SELECT: 'select'; static SELECT = 'select'; /** * Specifies the event name for fired. */ - // static FIRED: 'fired'; static FIRED = 'fired'; /** * Specifies the event name for fireMouseEvent. */ - // static FIRE_MOUSE_EVENT: 'fireMouseEvent'; static FIRE_MOUSE_EVENT = 'fireMouseEvent'; /** * Specifies the event name for gesture. */ - // static GESTURE: 'gesture'; static GESTURE = 'gesture'; /** * Specifies the event name for tapAndHold. */ - // static TAP_AND_HOLD: 'tapAndHold'; static TAP_AND_HOLD = 'tapAndHold'; /** * Specifies the event name for get. */ - // static GET: 'get'; static GET = 'get'; /** * Specifies the event name for receive. */ - // static RECEIVE: 'receive'; static RECEIVE = 'receive'; /** * Specifies the event name for connect. */ - // static CONNECT: 'connect'; static CONNECT = 'connect'; /** * Specifies the event name for disconnect. */ - // static DISCONNECT: 'disconnect'; static DISCONNECT = 'disconnect'; /** * Specifies the event name for suspend. */ - // static SUSPEND: 'suspend'; static SUSPEND = 'suspend'; /** * Specifies the event name for suspend. */ - // static RESUME: 'resume'; static RESUME = 'resume'; /** * Specifies the event name for mark. */ - // static MARK: 'mark'; static MARK = 'mark'; /** * Specifies the event name for root. */ - // static ROOT: 'root'; static ROOT = 'root'; /** * Specifies the event name for post. */ - // static POST: 'post'; static POST = 'post'; /** * Specifies the event name for open. */ - // static OPEN: 'open'; static OPEN = 'open'; /** * Specifies the event name for open. */ - // static SAVE: 'save'; static SAVE = 'save'; /** * Specifies the event name for beforeAddVertex. */ - // static BEFORE_ADD_VERTEX: 'beforeAddVertex'; static BEFORE_ADD_VERTEX = 'beforeAddVertex'; /** * Specifies the event name for addVertex. */ - // static ADD_VERTEX: 'addVertex'; static ADD_VERTEX = 'addVertex'; /** * Specifies the event name for afterAddVertex. */ - // static AFTER_ADD_VERTEX: 'afterAddVertex'; static AFTER_ADD_VERTEX = 'afterAddVertex'; /** * Specifies the event name for done. */ - // static DONE: 'done'; static DONE = 'done'; /** * Specifies the event name for execute. */ - // static EXECUTE: 'execute'; static EXECUTE = 'execute'; /** * Specifies the event name for executed. */ - // static EXECUTED: 'executed'; static EXECUTED = 'executed'; /** * Specifies the event name for beginUpdate. */ - // static BEGIN_UPDATE: 'beginUpdate'; static BEGIN_UPDATE = 'beginUpdate'; /** * Specifies the event name for startEdit. */ - // static START_EDIT: 'startEdit'; static START_EDIT = 'startEdit'; /** * Specifies the event name for endUpdate. */ - // static END_UPDATE: 'endUpdate'; static END_UPDATE = 'endUpdate'; /** * Specifies the event name for endEdit. */ - // static END_EDIT: 'endEdit'; static END_EDIT = 'endEdit'; /** * Specifies the event name for beforeUndo. */ - // static BEFORE_UNDO: 'beforeUndo'; static BEFORE_UNDO = 'beforeUndo'; /** * Specifies the event name for undo. */ - // static UNDO: 'undo'; static UNDO = 'undo'; /** * Specifies the event name for redo. */ - // static REDO: 'redo'; static REDO = 'redo'; /** * Specifies the event name for change. */ - // static CHANGE: 'change'; static CHANGE = 'change'; /** * Specifies the event name for notify. */ - // static NOTIFY: 'notify'; static NOTIFY = 'notify'; /** * Specifies the event name for layoutCells. */ - // static LAYOUT_CELLS: 'layoutCells'; static LAYOUT_CELLS = 'layoutCells'; /** * Specifies the event name for click. */ - // static CLICK: 'click'; static CLICK = 'click'; /** * Specifies the event name for scale. */ - // static SCALE: 'scale'; static SCALE = 'scale'; /** * Specifies the event name for translate. */ - // static TRANSLATE: 'translate'; static TRANSLATE = 'translate'; /** * Specifies the event name for scaleAndTranslate. */ - // static SCALE_AND_TRANSLATE: 'scaleAndTranslate'; static SCALE_AND_TRANSLATE = 'scaleAndTranslate'; /** * Specifies the event name for up. */ - // static UP: 'up'; static UP = 'up'; /** * Specifies the event name for down. */ - // static DOWN: 'down'; static DOWN = 'down'; /** * Specifies the event name for add. */ - // static ADD: 'add'; static ADD = 'add'; /** * Specifies the event name for remove. */ - // static REMOVE: 'remove'; static REMOVE = 'remove'; /** * Specifies the event name for clear. */ - // static CLEAR: 'clear'; static CLEAR = 'clear'; /** * Specifies the event name for addCells. */ - // static ADD_CELLS: 'addCells'; static ADD_CELLS = 'addCells'; /** * Specifies the event name for cellsAdded. */ - // static CELLS_ADDED: 'cellsAdded'; static CELLS_ADDED = 'cellsAdded'; /** * Specifies the event name for moveCells. */ - // static MOVE_CELLS: 'moveCells'; static MOVE_CELLS = 'moveCells'; /** * Specifies the event name for cellsMoved. */ - // static CELLS_MOVED: 'cellsMoved'; static CELLS_MOVED = 'cellsMoved'; /** * Specifies the event name for resizeCells. */ - // static RESIZE_CELLS: 'resizeCells'; static RESIZE_CELLS = 'resizeCells'; /** * Specifies the event name for cellsResized. */ - // static CELLS_RESIZED: 'cellsResized'; static CELLS_RESIZED = 'cellsResized'; /** * Specifies the event name for toggleCells. */ - // static TOGGLE_CELLS: 'toggleCells'; static TOGGLE_CELLS = 'toggleCells'; /** * Specifies the event name for cellsToggled. */ - // static CELLS_TOGGLED: 'cellsToggled'; static CELLS_TOGGLED = 'cellsToggled'; /** * Specifies the event name for orderCells. */ - // static ORDER_CELLS: 'orderCells'; static ORDER_CELLS = 'orderCells'; /** * Specifies the event name for cellsOrdered. */ - // static CELLS_ORDERED: 'cellsOrdered'; static CELLS_ORDERED = 'cellsOrdered'; /** * Specifies the event name for removeCells. */ - // static REMOVE_CELLS: 'removeCells'; static REMOVE_CELLS = 'removeCells'; /** * Specifies the event name for cellsRemoved. */ - // static CELLS_REMOVED: 'cellsRemoved'; static CELLS_REMOVED = 'cellsRemoved'; /** * Specifies the event name for groupCells. */ - // static GROUP_CELLS: 'groupCells'; static GROUP_CELLS = 'groupCells'; /** * Specifies the event name for ungroupCells. */ - // static UNGROUP_CELLS: 'ungroupCells'; static UNGROUP_CELLS = 'ungroupCells'; /** * Specifies the event name for removeCellsFromParent. */ - // static REMOVE_CELLS_FROM_PARENT: 'removeCellsFromParent'; static REMOVE_CELLS_FROM_PARENT = 'removeCellsFromParent'; /** * Specifies the event name for foldCells. */ - // static FOLD_CELLS: 'foldCells'; static FOLD_CELLS = 'foldCells'; /** * Specifies the event name for cellsFolded. */ - // static CELLS_FOLDED: 'cellsFolded'; static CELLS_FOLDED = 'cellsFolded'; /** * Specifies the event name for alignCells. */ - // static ALIGN_CELLS: 'alignCells'; static ALIGN_CELLS = 'alignCells'; /** * Specifies the event name for labelChanged. */ - // static LABEL_CHANGED: 'labelChanged'; static LABEL_CHANGED = 'labelChanged'; /** * Specifies the event name for connectCell. */ - // static CONNECT_CELL: 'connectCell'; static CONNECT_CELL = 'connectCell'; /** * Specifies the event name for cellConnected. */ - // static CELL_CONNECTED: 'cellConnected'; static CELL_CONNECTED = 'cellConnected'; /** * Specifies the event name for splitEdge. */ - // static SPLIT_EDGE: 'splitEdge'; static SPLIT_EDGE = 'splitEdge'; /** * Specifies the event name for flipEdge. */ - // static FLIP_EDGE: 'flipEdge'; static FLIP_EDGE = 'flipEdge'; /** * Specifies the event name for startEditing. */ - // static START_EDITING: 'startEditing'; static START_EDITING = 'startEditing'; /** * Specifies the event name for editingStarted. */ - // static EDITING_STARTED: 'editingStarted'; static EDITING_STARTED = 'editingStarted'; /** * Specifies the event name for editingStopped. */ - // static EDITING_STOPPED: 'editingStopped'; static EDITING_STOPPED = 'editingStopped'; /** * Specifies the event name for addOverlay. */ - // static ADD_OVERLAY: 'addOverlay'; static ADD_OVERLAY = 'addOverlay'; /** * Specifies the event name for removeOverlay. */ - // static REMOVE_OVERLAY: 'removeOverlay'; static REMOVE_OVERLAY = 'removeOverlay'; /** * Specifies the event name for updateCellSize. */ - // static UPDATE_CELL_SIZE: 'updateCellSize'; static UPDATE_CELL_SIZE = 'updateCellSize'; /** * Specifies the event name for escape. */ - // static ESCAPE: 'escape'; static ESCAPE = 'escape'; /** * Specifies the event name for doubleClick. */ - // static DOUBLE_CLICK: 'doubleClick'; static DOUBLE_CLICK = 'doubleClick'; /** * Specifies the event name for start. */ - // static START: 'start'; static START = 'start'; /** * Specifies the event name for reset. */ - // static RESET: 'reset'; static RESET = 'reset'; /** diff --git a/packages/core/src/view/graph/mxGraph.ts b/packages/core/src/view/graph/mxGraph.ts index 8b2872dc5..a86150336 100644 --- a/packages/core/src/view/graph/mxGraph.ts +++ b/packages/core/src/view/graph/mxGraph.ts @@ -113,7 +113,6 @@ import { STYLE_WHITE_SPACE, } from '../../util/mxConstants'; import mxMultiplicity from '../connection/mxMultiplicity'; - import mxChildChange from '../../atomic_changes/mxChildChange'; import mxGeometryChange from '../../atomic_changes/mxGeometryChange'; import mxRootChange from '../../atomic_changes/mxRootChange'; @@ -227,7 +226,7 @@ class mxGraph extends mxEventSource { this.sizeDidChange(); // Hides tooltips and resets tooltip timer if mouse leaves container - mxEvent.addListener(container, 'mouseleave', (evt: MouseEvent) => { + mxEvent.addListener(container, 'mouseleave', ((evt: MouseEvent) => { if ( this.tooltipHandler != null && this.tooltipHandler.div != null && @@ -235,7 +234,7 @@ class mxGraph extends mxEventSource { ) { this.tooltipHandler.hide(); } - }); + }) as EventListener); } // TODO: Document me! @@ -260,8 +259,8 @@ class mxGraph extends mxEventSource { lastMouseY: number | null = null; isMouseTrigger: boolean | null = null; ignoreMouseEvents: boolean | null = null; - mouseMoveRedirect: Function | null = null; - mouseUpRedirect: Function | null = null; + mouseMoveRedirect: EventListener | null = null; + mouseUpRedirect: EventListener | null = null; lastEvent: any; // FIXME: Check if this can be more specific - DOM events or mxEventObjects! horizontalPageBreaks: any[] | null = null; verticalPageBreaks: any[] | null = null; @@ -1731,7 +1730,7 @@ class mxGraph extends mxEventSource { // Adds a handler for single mouseclicks to select the cell if (isSelect) { - overlay.addListener(mxEvent.CLICK, (sender: any, evt: mxMouseEvent) => { + overlay.addListener(mxEvent.CLICK, (sender: any, evt: MouseEvent) => { if (this.isEnabled()) { this.setSelectionCell(cell); } @@ -1801,10 +1800,7 @@ class mxGraph extends mxEventSource { * @param evt Optional mouse event that triggered the editor. */ // getEditingValue(cell: mxCell, evt: MouseEvent): string; - getEditingValue( - cell: mxCell, - evt: mxEventObject | mxMouseEvent - ): string | null { + getEditingValue(cell: mxCell, evt: MouseEvent): string | null { return this.convertValueToString(cell); } @@ -1832,11 +1828,7 @@ class mxGraph extends mxEventSource { * @param evt Optional event that triggered the change. */ // labelChanged(cell: mxCell, value: any, evt?: MouseEvent): mxCell; - labelChanged( - cell: mxCell, - value: any, - evt: mxMouseEvent | mxEventObject - ): mxCell { + labelChanged(cell: mxCell, value: any, evt: MouseEvent): mxCell { this.getModel().beginUpdate(); try { const old = cell.value; @@ -1907,7 +1899,7 @@ class mxGraph extends mxEventSource { * @param evt Mouseevent that represents the keystroke. */ // escape(evt?: MouseEvent): void; - escape(evt: mxMouseEvent): void { + escape(evt: MouseEvent): void { this.fireEvent(new mxEventObject(mxEvent.ESCAPE, 'event', evt)); } @@ -5322,7 +5314,7 @@ class mxGraph extends mxEventSource { dx: number, dy: number, target: mxCell | null = null, - evt: mxMouseEvent | null = null, + evt: MouseEvent, mapping: any = {} ): mxCell[] | null { return this.moveCells(cells, dx, dy, true, target, evt, mapping); @@ -5359,7 +5351,7 @@ class mxGraph extends mxEventSource { dy: number, clone: boolean = false, target: mxCell | null = null, - evt: mxMouseEvent | null = null, + evt: MouseEvent | null = null, mapping: any = null ): mxCell[] | null { dx = dx != null ? dx : 0; @@ -5596,8 +5588,8 @@ class mxGraph extends mxEventSource { if (geometry.offset == null) { geometry.offset = new mxPoint(dx, dy); } else { - geometry.offset.x = parseFloat(geometry.offset.x) + dx; - geometry.offset.y = parseFloat(geometry.offset.y) + dy; + geometry.offset.x += dx; + geometry.offset.y += dy; } } this.getModel().setGeometry(cell, geometry); @@ -6680,7 +6672,7 @@ class mxGraph extends mxEventSource { ); if (result != null) { - result.add(tmp); + if (tmp) result.add(tmp); } else { result = tmp; } @@ -7551,7 +7543,7 @@ class mxGraph extends mxEventSource { * returns true if control is pressed. */ // isCloneEvent(evt: MouseEvent): boolean; - isCloneEvent(evt: mxEventObject | mxMouseEvent): boolean { + isCloneEvent(evt: MouseEvent): boolean { return isControlDown(evt); } @@ -7561,7 +7553,7 @@ class mxGraph extends mxEventSource { * implementation returns false; */ // isTransparentClickEvent(evt: MouseEvent): boolean; - isTransparentClickEvent(evt: mxEventObject | mxMouseEvent): boolean { + isTransparentClickEvent(evt: MouseEvent): boolean { return false; } @@ -7571,7 +7563,7 @@ class mxGraph extends mxEventSource { * pressed on any other platform. */ // isToggleEvent(evt: MouseEvent): boolean; - isToggleEvent(evt: mxEventObject | mxMouseEvent): boolean { + isToggleEvent(evt: MouseEvent): boolean { return mxClient.IS_MAC ? isMetaDown(evt) : isControlDown(evt); } @@ -7579,7 +7571,7 @@ class mxGraph extends mxEventSource { * Returns true if the given mouse event should be aligned to the grid. */ // isGridEnabledEvent(evt: MouseEvent): boolean; - isGridEnabledEvent(evt: mxEventObject | mxMouseEvent): boolean { + isGridEnabledEvent(evt: MouseEvent): boolean { return evt != null && !isAltDown(evt); } @@ -7587,7 +7579,7 @@ class mxGraph extends mxEventSource { * Returns true if the given mouse event should be aligned to the grid. */ // isConstrainedEvent(evt: MouseEvent): boolean; - isConstrainedEvent(evt: mxEventObject | mxMouseEvent): boolean { + isConstrainedEvent(evt: MouseEvent): boolean { return isShiftDown(evt); } @@ -7596,7 +7588,7 @@ class mxGraph extends mxEventSource { * made. This implementation returns false. */ // isIgnoreTerminalEvent(evt: MouseEvent): boolean; - isIgnoreTerminalEvent(evt: mxEventObject | mxMouseEvent): boolean { + isIgnoreTerminalEvent(evt: MouseEvent): boolean { return false; } @@ -9683,7 +9675,7 @@ class mxGraph extends mxEventSource { * @param evt Mouseevent that triggered the invocation. */ // isValidDropTarget(cell: mxCell, cells: mxCell[], evt: Event): boolean; - isValidDropTarget(cell: mxCell, cells: mxCell[], evt: mxMouseEvent): boolean { + isValidDropTarget(cell: mxCell, cells: mxCell[], evt: MouseEvent): boolean { return ( cell != null && ((this.isSplitEnabled() && this.isSplitTarget(cell, cells, evt)) || @@ -9702,7 +9694,7 @@ class mxGraph extends mxEventSource { * @param evt Mouseevent that triggered the invocation. */ // isSplitTarget(target: mxCell, cells: mxCell[], evt: Event): boolean; - isSplitTarget(target: mxCell, cells: mxCell[], evt: mxMouseEvent): boolean { + isSplitTarget(target: mxCell, cells: mxCell[], evt: MouseEvent): boolean { if ( target.isEdge() && cells != null && @@ -9739,7 +9731,7 @@ class mxGraph extends mxEventSource { // getDropTarget(cells: mxCell[], evt: Event, cell: mxCell, clone?: boolean): mxCell; getDropTarget( cells: mxCell[], - evt: mxMouseEvent, + evt: MouseEvent, cell: mxCell | null = null, clone: boolean = false ): mxCell | null { @@ -10341,7 +10333,7 @@ class mxGraph extends mxEventSource { * offset by half of the {@link gridSize}. Default is `true`. */ // getPointForEvent(evt: MouseEvent, addOffset: boolean): mxPoint; - getPointForEvent(evt: mxMouseEvent, addOffset: boolean = true) { + getPointForEvent(evt: MouseEvent, addOffset: boolean = true) { const p = mxUtils.convertPoint( this.container, getClientX(evt), @@ -10766,7 +10758,7 @@ class mxGraph extends mxEventSource { * @param evt Mouseevent that triggered the selection. */ // selectRegion(rect: mxRectangle, evt: Event): mxCell[]; - selectRegion(rect: mxRectangle, evt: mxMouseEvent): mxCell[] | null { + selectRegion(rect: mxRectangle, evt: MouseEvent): mxCell[] | null { const cells = this.getCells(rect.x, rect.y, rect.width, rect.height); this.selectCellsForEvent(cells, evt); return cells; @@ -10954,7 +10946,7 @@ class mxGraph extends mxEventSource { * @param cell {@link mxCell} to be selected. * @param evt Optional mouseevent that triggered the selection. */ - selectCellForEvent(cell: mxCell, evt: mxMouseEvent): void { + selectCellForEvent(cell: mxCell, evt: MouseEvent): void { const isSelected = this.isCellSelected(cell); if (this.isToggleEvent(evt)) { @@ -10977,7 +10969,7 @@ class mxGraph extends mxEventSource { * @param evt Optional mouseevent that triggered the selection. */ // selectCellsForEvent(cells: mxCell[], evt?: MouseEvent): void; - selectCellsForEvent(cells: mxCell[], evt: mxMouseEvent) { + selectCellsForEvent(cells: mxCell[], evt: MouseEvent) { if (this.isToggleEvent(evt)) { this.addSelectionCells(cells); } else { @@ -11010,7 +11002,7 @@ class mxGraph extends mxEventSource { const edgeStyle = this.getView().getEdgeStyle( state, - geo != null ? geo.points : null, + geo != null ? geo.points : [], source, target ); @@ -11155,7 +11147,7 @@ class mxGraph extends mxEventSource { * Returns the state for the given touch event. */ // getStateForTouchEvent(evt: MouseEvent | TouchEvent): mxCellState; - getStateForTouchEvent(evt: mxMouseEvent) { + getStateForTouchEvent(evt: MouseEvent) { const x = getClientX(evt); const y = getClientY(evt); @@ -11208,18 +11200,18 @@ class mxGraph extends mxEventSource { ) { this.eventSource = me.getSource(); - this.mouseMoveRedirect = (evt: mxMouseEvent) => { + this.mouseMoveRedirect = ((evt: MouseEvent) => { this.fireMouseEvent( mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, this.getStateForTouchEvent(evt)) ); - }; - this.mouseUpRedirect = (evt: mxMouseEvent) => { + }) as EventListener; + this.mouseUpRedirect = ((evt: MouseEvent) => { this.fireMouseEvent( mxEvent.MOUSE_UP, new mxMouseEvent(evt, this.getStateForTouchEvent(evt)) ); - }; + }) as EventListener; mxEvent.addGestureListeners( this.eventSource, diff --git a/packages/core/src/view/graph/mxGraphView.ts b/packages/core/src/view/graph/mxGraphView.ts index 6b4aee5cd..f1b1fcb5e 100644 --- a/packages/core/src/view/graph/mxGraphView.ts +++ b/packages/core/src/view/graph/mxGraphView.ts @@ -623,6 +623,7 @@ class mxGraphView extends mxEventSource { ) ) ); + this.setGraphBounds( graphBounds != null ? graphBounds : this.getEmptyBounds() ); @@ -765,41 +766,41 @@ class mxGraphView extends mxEventSource { this.backgroundPageShape.init(this.backgroundPane); this.backgroundPageShape.redraw(); - // Adds listener for double click handling on background - if (graph.nativeDblClickEnabled) { - mxEvent.addListener( - this.backgroundPageShape.node, - 'dblclick', - (evt: MouseEvent) => { + if (this.backgroundPageShape.node) { + // Adds listener for double click handling on background + if (graph.nativeDblClickEnabled) { + mxEvent.addListener(this.backgroundPageShape.node, 'dblclick', (( + evt: MouseEvent + ) => { graph.dblClick(evt); + }) as EventListener); + } + + // Adds basic listeners for graph event dispatching outside of the + // container and finishing the handling of a single gesture + mxEvent.addGestureListeners( + this.backgroundPageShape.node, + (evt: Event) => { + graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt)); + }, + (evt: Event) => { + // Hides the tooltip if mouse is outside container + if ( + graph.tooltipHandler != null && + graph.tooltipHandler.isHideOnHover() + ) { + graph.tooltipHandler.hide(); + } + + if (graph.isMouseDown && !isConsumed(evt)) { + graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt)); + } + }, + (evt: Event) => { + graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt)); } ); } - - // Adds basic listeners for graph event dispatching outside of the - // container and finishing the handling of a single gesture - mxEvent.addGestureListeners( - this.backgroundPageShape.node, - (evt: Event) => { - graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt)); - }, - (evt: Event) => { - // Hides the tooltip if mouse is outside container - if ( - graph.tooltipHandler != null && - graph.tooltipHandler.isHideOnHover() - ) { - graph.tooltipHandler.hide(); - } - - if (graph.isMouseDown && !isConsumed(evt)) { - graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt)); - } - }, - (evt: Event) => { - graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt)); - } - ); } else { this.backgroundPageShape.scale = this.scale; this.backgroundPageShape.bounds = bounds; @@ -2332,20 +2333,20 @@ class mxGraphView extends mxEventSource { // Support for touch device gestures (eg. pinch to zoom) // Double-tap handling is implemented in mxGraph.fireMouseEvent if (mxClient.IS_TOUCH) { - mxEvent.addListener(container, 'gesturestart', (evt: MouseEvent) => { + mxEvent.addListener(container, 'gesturestart', ((evt: MouseEvent) => { graph.fireGestureEvent(evt); mxEvent.consume(evt); - }); + }) as EventListener); - mxEvent.addListener(container, 'gesturechange', (evt: MouseEvent) => { + mxEvent.addListener(container, 'gesturechange', ((evt: MouseEvent) => { graph.fireGestureEvent(evt); mxEvent.consume(evt); - }); + }) as EventListener); - mxEvent.addListener(container, 'gestureend', (evt: MouseEvent) => { + mxEvent.addListener(container, 'gestureend', ((evt: MouseEvent) => { graph.fireGestureEvent(evt); mxEvent.consume(evt); - }); + }) as EventListener); } // Fires event only for one pointer per gesture @@ -2354,7 +2355,7 @@ class mxGraphView extends mxEventSource { // Adds basic listeners for graph event dispatching mxEvent.addGestureListeners( container, - (evt: MouseEvent) => { + ((evt: MouseEvent) => { // Condition to avoid scrollbar events starting a rubberband selection if ( this.isContainerEvent(evt) && @@ -2364,7 +2365,7 @@ class mxGraphView extends mxEventSource { // @ts-ignore pointerId = evt.pointerId; } - }, + }) as EventListener, (evt: Event) => { if ( this.isContainerEvent(evt) && @@ -2386,11 +2387,11 @@ class mxGraphView extends mxEventSource { // Adds listener for double click handling on background, this does always // use native event handler, we assume that the DOM of the background // does not change during the double click - mxEvent.addListener(container, 'dblclick', (evt: MouseEvent) => { + mxEvent.addListener(container, 'dblclick', ((evt: MouseEvent) => { if (this.isContainerEvent(evt)) { graph.dblClick(evt); } - }); + }) as EventListener); // Workaround for touch events which started on some DOM node // on top of the container, in which case the cells under the @@ -2564,7 +2565,7 @@ class mxGraphView extends mxEventSource { this.moveHandler, this.endHandler ); - mxEvent.release((this.graph).container); + mxEvent.release(this.graph.container); root.parentNode.removeChild(root); this.moveHandler = null; @@ -2577,8 +2578,8 @@ class mxGraphView extends mxEventSource { } } - endHandler: Function | null = null; - moveHandler: Function | null = null; + endHandler: EventListener | null = null; + moveHandler: EventListener | null = null; } export default mxGraphView;