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

Converted js files to ts.

development
Junsik Shim 2021-05-04 23:29:44 +09:00
parent e976ab30dd
commit 846f20335c
8 changed files with 334 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/src/util/datatypes/mxDictionary.js → packages/core/src/util/datatypes/mxDictionary.ts
View File

@ -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]);
}

132
packages/core/src/util/datatypes/mxGeometry.js → packages/core/src/util/datatypes/mxGeometry.ts
View File

@ -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<mxPoint>;
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,32 +291,26 @@ 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) {
if (this.points[i]) {
this.points[i].x = this.points[i].x * sx;
this.points[i].y = this.points[i].y * sy;
}
}
}
// Translates the geometry
if (!this.relative) {
@ -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))
);
}

11
packages/core/src/util/datatypes/mxObjectIdentity.js → packages/core/src/util/datatypes/mxObjectIdentity.ts
View File

@ -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];
}

40
packages/core/src/util/datatypes/mxPoint.js → packages/core/src/util/datatypes/mxPoint.ts
View File

@ -16,9 +16,9 @@
* coordinates are given, then the default values for <x> and <y> 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 <mxPoint>.
*/
// clone(): mxPoint;
clone() {
return new mxPoint(this.x, this.y);
}

81
packages/core/src/util/datatypes/mxRectangle.js → packages/core/src/util/datatypes/mxRectangle.ts
View File

@ -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 <mxRectangle> 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,9 +110,7 @@ class mxRectangle extends mxPoint {
*
* Adds the given rectangle to this rectangle.
*/
// add(rect: mxRectangle): void;
add(rect) {
if (rect != null) {
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);
@ -104,16 +121,13 @@ class mxRectangle extends mxPoint {
this.width = maxX - minX;
this.height = maxY - minY;
}
}
/**
* Function: intersect
*
* Changes this rectangle to where it overlaps with the given rectangle.
*/
// intersect(rect: mxRectangle): void;
intersect(rect) {
if (rect != null) {
intersect(rect: mxRectangle) {
const r1 = this.x + this.width;
const r2 = rect.x + rect.width;
@ -125,7 +139,6 @@ class mxRectangle extends mxPoint {
this.width = Math.min(r1, r2) - this.x;
this.height = Math.min(b1, b2) - this.y;
}
}
/**
* Function: grow
@ -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 <mxPoint>.
*/
// 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
);
}

284
packages/core/src/util/event/mxEvent.js → packages/core/src/util/event/mxEvent.ts
View File

File diff suppressed because it is too large Load Diff

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

@ -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 : [],
<mxCellState>source,
<mxCellState>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,

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

@ -623,6 +623,7 @@ class mxGraphView extends mxEventSource {
)
)
);
this.setGraphBounds(
graphBounds != null ? graphBounds : this.getEmptyBounds()
);
@ -765,15 +766,14 @@ class mxGraphView extends mxEventSource {
this.backgroundPageShape.init(this.backgroundPane);
this.backgroundPageShape.redraw();
if (this.backgroundPageShape.node) {
// Adds listener for double click handling on background
if (graph.nativeDblClickEnabled) {
mxEvent.addListener(
this.backgroundPageShape.node,
'dblclick',
(evt: MouseEvent) => {
mxEvent.addListener(this.backgroundPageShape.node, 'dblclick', ((
evt: MouseEvent
) => {
graph.dblClick(evt);
}
);
}) as EventListener);
}
// Adds basic listeners for graph event dispatching outside of the
@ -800,6 +800,7 @@ class mxGraphView extends mxEventSource {
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((<mxGraph>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;