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

started refactoring+reorganising core to not have mx prefix, and breaking up mxGraph into smaller classes for easier maintenance

development
mcyph 2021-06-06 14:23:36 +10:00
parent 11b3c1cf15
commit 8d16eafd80
183 changed files with 15376 additions and 15018 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/index.txt
View File

@ -10,7 +10,7 @@ Overview:
editor. The main class in this package is <mxEditor>. editor. The main class in this package is <mxEditor>.
The *view* and *model* packages implement the graph component, represented The *view* and *model* packages implement the graph component, represented
by <mxGraph>. It refers to a <mxGraphModel> which contains <mxCell>s and by <mxGraph>. It refers to a <Transactions> which contains <mxCell>s and
caches the state of the cells in a <mxGraphView>. The cells are painted caches the state of the cells in a <mxGraphView>. The cells are painted
using a <mxCellRenderer> based on the appearance defined in <mxStylesheet>. using a <mxCellRenderer> based on the appearance defined in <mxStylesheet>.
Undo history is implemented in <mxUndoManager>. To display an icon on the Undo history is implemented in <mxUndoManager>. To display an icon on the

37
packages/core/src/atomic_changes/mxRootChange.ts
View File

@ -1,37 +0,0 @@
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import type { UndoableChange } from '../types';
/**
* Action to change the root in a model.
*
* Constructor: mxRootChange
*
* Constructs a change of the root in the
* specified model.
*
* @class mxRootChange
*/
class mxRootChange implements UndoableChange {
model: mxGraphModel;
root: mxCell | null;
previous: mxCell | null;
constructor(model: mxGraphModel, root: mxCell | null) {
this.model = model;
this.root = root;
this.previous = root;
}
/**
* Carries out a change of the root using
* <mxGraphModel.rootChanged>.
*/
execute() {
this.root = this.previous;
this.previous = this.model.rootChanged(this.previous);
}
}
export default mxRootChange;

10
packages/core/src/editor/mxDefaultKeyHandler.js
View File

@ -5,9 +5,9 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../view/event/InternalEvent';
import mxEventObject from '../util/event/mxEventObject'; import EventObject from '../view/event/EventObject';
import mxKeyHandler from '../handler/mxKeyHandler'; import mxKeyHandler from '../view/event/mxKeyHandler';
/** /**
* Binds keycodes to actionnames in an editor. This aggregates an internal {@link handler} and extends the implementation of {@link mxKeyHandler.escape} to not only cancel the editing, but also hide the properties dialog and fire an <mxEditor.escape> event via {@link editor}. An instance of this class is created by {@link mxEditor} and stored in {@link mxEditor.keyHandler}. * Binds keycodes to actionnames in an editor. This aggregates an internal {@link handler} and extends the implementation of {@link mxKeyHandler.escape} to not only cancel the editing, but also hide the properties dialog and fire an <mxEditor.escape> event via {@link editor}. An instance of this class is created by {@link mxEditor} and stored in {@link mxEditor.keyHandler}.
@ -24,7 +24,7 @@ import mxKeyHandler from '../handler/mxKeyHandler';
* *
* @Keycodes * @Keycodes
* See {@link mxKeyHandler}. * See {@link mxKeyHandler}.
* An {@link mxEvent.ESCAPE} event is fired via the editor if the escape key is pressed. * An {@link InternalEvent.ESCAPE} event is fired via the editor if the escape key is pressed.
*/ */
class mxDefaultKeyHandler { class mxDefaultKeyHandler {
constructor(editor) { constructor(editor) {
@ -40,7 +40,7 @@ class mxDefaultKeyHandler {
this.handler.escape = evt => { this.handler.escape = evt => {
old.apply(this, [editor]); old.apply(this, [editor]);
editor.hideProperties(); editor.hideProperties();
editor.fireEvent(new mxEventObject(mxEvent.ESCAPE, 'event', evt)); editor.fireEvent(new EventObject(InternalEvent.ESCAPE, 'event', evt));
}; };
} }
} }

6
packages/core/src/editor/mxDefaultPopupMenu.js
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import { getTextContent } from '../util/mxDomUtils'; import { getTextContent } from '../util/DomUtils';
import mxResources from '../util/mxResources'; import Resources from '../util/Resources';
/** /**
* Creates popupmenus for mouse events. This object holds an XML node which is a description of the popup menu to be created. In {@link createMenu}, the configuration is applied to the context and the resulting menu items are added to the menu dynamically. See {@link createMenu} for a description of the configuration format. * Creates popupmenus for mouse events. This object holds an XML node which is a description of the popup menu to be created. In {@link createMenu}, the configuration is applied to the context and the resulting menu items are added to the menu dynamically. See {@link createMenu} for a description of the configuration format.
@ -165,7 +165,7 @@ class mxDefaultPopupMenu {
if (condition == null || conditions[condition]) { if (condition == null || conditions[condition]) {
let as = item.getAttribute('as'); let as = item.getAttribute('as');
as = mxResources.get(as) || as; as = Resources.get(as) || as;
const funct = eval(getTextContent(item)); const funct = eval(getTextContent(item));
const action = item.getAttribute('action'); const action = item.getAttribute('action');
let icon = item.getAttribute('icon'); let icon = item.getAttribute('icon');

24
packages/core/src/editor/mxDefaultToolbar.js
View File

@ -7,11 +7,11 @@
import mxClient from '../mxClient'; import mxClient from '../mxClient';
import mxToolbar from '../util/gui/mxToolbar'; import mxToolbar from '../util/gui/mxToolbar';
import mxGeometry from '../util/datatypes/mxGeometry'; import Geometry from '../view/geometry/Geometry';
import mxUtils from '../util/mxUtils'; import utils from '../util/Utils';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../view/event/InternalEvent';
import { getClientX, getClientY } from '../util/mxEventUtils'; import { getClientX, getClientY } from '../util/EventUtils';
import { makeDraggable } from '../util/mxGestureUtils'; import { makeDraggable } from '../util/GestureUtils';
/** /**
* Toolbar for the editor. This modifies the state of the graph * Toolbar for the editor. This modifies the state of the graph
@ -90,7 +90,7 @@ class mxDefaultToolbar {
// Installs the insert function in the editor if an item is // Installs the insert function in the editor if an item is
// selected in the toolbar // selected in the toolbar
this.toolbar.addListener(mxEvent.SELECT, (sender, evt) => { this.toolbar.addListener(InternalEvent.SELECT, (sender, evt) => {
const funct = evt.getProperty('function'); const funct = evt.getProperty('function');
if (funct != null) { if (funct != null) {
@ -110,8 +110,8 @@ class mxDefaultToolbar {
} }
}; };
this.editor.graph.addListener(mxEvent.DOUBLE_CLICK, this.resetHandler); this.editor.graph.addListener(InternalEvent.DOUBLE_CLICK, this.resetHandler);
this.editor.addListener(mxEvent.ESCAPE, this.resetHandler); this.editor.addListener(InternalEvent.ESCAPE, this.resetHandler);
} }
} }
@ -262,7 +262,7 @@ class mxDefaultToolbar {
} }
this.toolbar.resetMode(); this.toolbar.resetMode();
mxEvent.consume(evt); InternalEvent.consume(evt);
}; };
const img = this.toolbar.addMode( const img = this.toolbar.addMode(
@ -334,7 +334,7 @@ class mxDefaultToolbar {
if (graph.canImportCell(vertex)) { if (graph.canImportCell(vertex)) {
const x = getClientX(evt); const x = getClientX(evt);
const y = getClientY(evt); const y = getClientY(evt);
const pt = mxUtils.convertPoint(graph.container, x, y); const pt = utils.convertPoint(graph.container, x, y);
// Splits the target edge or inserts into target group // Splits the target edge or inserts into target group
if ( if (
@ -400,7 +400,7 @@ class mxDefaultToolbar {
edge = this.editor.createEdge(source, vertex); edge = this.editor.createEdge(source, vertex);
if (edge.getGeometry() == null) { if (edge.getGeometry() == null) {
const edgeGeometry = new mxGeometry(); const edgeGeometry = new Geometry();
edgeGeometry.relative = true; edgeGeometry.relative = true;
model.setGeometry(edge, edgeGeometry); model.setGeometry(edge, edgeGeometry);
@ -438,7 +438,7 @@ class mxDefaultToolbar {
sprite.style.height = `${2 * img.offsetHeight}px`; sprite.style.height = `${2 * img.offsetHeight}px`;
makeDraggable(img, this.editor.graph, dropHandler, sprite); makeDraggable(img, this.editor.graph, dropHandler, sprite);
mxEvent.removeListener(sprite, 'load', loader); InternalEvent.removeListener(sprite, 'load', loader);
}; };
} }

202
packages/core/src/editor/mxEditor.js
View File

@ -4,22 +4,22 @@
*/ */
import mxDefaultPopupMenu from './mxDefaultPopupMenu'; import mxDefaultPopupMenu from './mxDefaultPopupMenu';
import mxUndoManager from '../util/undo/mxUndoManager'; import mxUndoManager from '../util/mxUndoManager';
import mxDefaultKeyHandler from './mxDefaultKeyHandler'; import mxDefaultKeyHandler from './mxDefaultKeyHandler';
import mxEventSource from '../util/event/mxEventSource'; import EventSource from '../view/event/EventSource';
import mxResources from '../util/mxResources'; import Resources from '../util/Resources';
import mxClient from '../mxClient'; import mxClient from '../mxClient';
import mxCompactTreeLayout from '../layout/mxCompactTreeLayout'; import mxCompactTreeLayout from '../view/layout/layout/mxCompactTreeLayout';
import mxDefaultToolbar from './mxDefaultToolbar'; import mxDefaultToolbar from './mxDefaultToolbar';
import mxStackLayout from '../layout/mxStackLayout'; import mxStackLayout from '../view/layout/layout/mxStackLayout';
import mxEventObject from '../util/event/mxEventObject'; import EventObject from '../view/event/EventObject';
import mxUtils from '../util/mxUtils'; import utils from '../util/Utils';
import mxCodec from '../serialization/mxCodec'; import mxCodec from '../util/serialization/mxCodec';
import mxWindow, { error } from '../util/gui/mxWindow'; import mxWindow, { error } from '../util/gui/mxWindow';
import mxForm from '../util/gui/mxForm'; import mxForm from '../util/gui/mxForm';
import mxOutline from '../view/graph/mxOutline'; import Outline from '../view/Outline';
import mxCell from '../view/cell/mxCell'; import Cell from '../view/cell/datatypes/Cell';
import mxGeometry from '../util/datatypes/mxGeometry'; import Geometry from '../view/geometry/Geometry';
import { import {
ALIGN_BOTTOM, ALIGN_BOTTOM,
ALIGN_CENTER, ALIGN_CENTER,
@ -30,19 +30,19 @@ import {
FONT_BOLD, FONT_BOLD,
FONT_ITALIC, FONT_ITALIC,
FONT_UNDERLINE, FONT_UNDERLINE,
} from '../util/mxConstants'; } from '../util/Constants';
import mxGraph from '../view/graph/mxGraph'; import graph from '../view/Graph';
import mxSwimlaneManager from '../view/graph/mxSwimlaneManager'; import SwimlaneManager from '../view/layout/SwimlaneManager';
import mxLayoutManager from '../view/graph/mxLayoutManager'; import LayoutManager from '../view/layout/LayoutManager';
import mxRubberband from '../handler/mxRubberband'; import mxRubberband from '../view/selection/mxRubberband';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../view/event/InternalEvent';
import mxRootChange from '../atomic_changes/mxRootChange'; import RootChange from '../view/model/RootChange';
import mxValueChange from '../atomic_changes/mxValueChange'; import ValueChange from '../view/cell/ValueChange';
import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange'; import CellAttributeChange from '../view/cell/CellAttributeChange';
import mxPrintPreview from '../view/graph/mxPrintPreview'; import PrintPreview from '../view/printing/PrintPreview';
import mxClipboard from '../util/storage/mxClipboard'; import mxClipboard from '../util/storage/mxClipboard';
import mxLog from '../util/gui/mxLog'; import mxLog from '../util/gui/mxLog';
import { isNode } from '../util/mxDomUtils'; import { isNode } from '../util/DomUtils';
/** /**
* Installs the required language resources at class * Installs the required language resources at class
@ -57,8 +57,8 @@ if (mxLoadResources) {
*/ */
/** /**
* Extends {@link mxEventSource} to implement an application wrapper for a graph that * Extends {@link EventSource} to implement an application wrapper for a graph that
* adds {@link actions}, I/O using {@link mxCodec}, auto-layout using {@link mxLayoutManager}, * adds {@link actions}, I/O using {@link mxCodec}, auto-layout using {@link LayoutManager},
* command history using {@link undoManager}, and standard dialogs and widgets, eg. * command history using {@link undoManager}, and standard dialogs and widgets, eg.
* properties, help, outline, toolbar, and popupmenu. It also adds {@link templates} * properties, help, outline, toolbar, and popupmenu. It also adds {@link templates}
* to be used as cells in toolbars, auto-validation using the {@link validation} * to be used as cells in toolbars, auto-validation using the {@link validation}
@ -223,7 +223,7 @@ if (mxLoadResources) {
* *
* In the default implementation of {@link createProperties}, the user object's * In the default implementation of {@link createProperties}, the user object's
* attributes are put into a form for editing. Attributes are changed using * attributes are put into a form for editing. Attributes are changed using
* the {@link mxCellAttributeChange} action in the model. The dialog can be replaced * the {@link CellAttributeChange} action in the model. The dialog can be replaced
* by overriding the {@link createProperties} hook or by replacing the showProperties * by overriding the {@link createProperties} hook or by replacing the showProperties
* action in {@link action}. Alternatively, the entry in the config file's popupmenu * action in {@link action}. Alternatively, the entry in the config file's popupmenu
* section can be modified to invoke a different action. * section can be modified to invoke a different action.
@ -275,7 +275,7 @@ if (mxLoadResources) {
* For the IDs, there is an implicit behaviour in {@link mxCodec}: It moves the Id * For the IDs, there is an implicit behaviour in {@link mxCodec}: It moves the Id
* from the cell to the user object at encoding time and vice versa at decoding * from the cell to the user object at encoding time and vice versa at decoding
* time. For example, if the Task node from above has an id attribute, then * time. For example, if the Task node from above has an id attribute, then
* the {@link mxCell.id} of the corresponding cell will have this value. If there * the {@link Cell.id} of the corresponding cell will have this value. If there
* is no Id collision in the model, then the cell may be retrieved using this * is no Id collision in the model, then the cell may be retrieved using this
* Id with the {@link mxGraphModel.getCell} function. If there is a collision, a new * Id with the {@link mxGraphModel.getCell} function. If there is a collision, a new
* Id will be created for the cell using {@link mxGraphModel.createId}. At encoding * Id will be created for the cell using {@link mxGraphModel.createId}. At encoding
@ -405,9 +405,9 @@ if (mxLoadResources) {
* ``` * ```
* *
* @class mxEditor * @class mxEditor
* @extends mxEventSource * @extends EventSource
*/ */
class mxEditor extends mxEventSource { class mxEditor extends EventSource {
constructor(config) { constructor(config) {
super(); super();
@ -508,14 +508,14 @@ class mxEditor extends mxEventSource {
outlineResource = mxClient.language !== 'none' ? 'outline' : ''; outlineResource = mxClient.language !== 'none' ? 'outline' : '';
/** /**
* Reference to the {@link mxWindow} that contains the outline. The {@link mxOutline} * Reference to the {@link mxWindow} that contains the outline. The {@link outline}
* is stored in outline.outline. * is stored in outline.outline.
*/ */
// outline: any; // outline: any;
outline = null; outline = null;
/** /**
* Holds a {@link mxGraph} for displaying the diagram. The graph * Holds a {@link graph} for displaying the diagram. The graph
* is created in {@link setGraphContainer}. * is created in {@link setGraphContainer}.
*/ */
// graph: mxGraph; // graph: mxGraph;
@ -523,7 +523,7 @@ class mxEditor extends mxEventSource {
/** /**
* Holds the render hint used for creating the * Holds the render hint used for creating the
* graph in {@link setGraphContainer}. See {@link mxGraph}. Default is null. * graph in {@link setGraphContainer}. See {@link graph}. Default is null.
* @default null * @default null
*/ */
// graphRenderHint: any; // graphRenderHint: any;
@ -990,12 +990,12 @@ class mxEditor extends mxEventSource {
}); });
this.addAction('print', (editor) => { this.addAction('print', (editor) => {
const preview = new mxPrintPreview(editor.graph, 1); const preview = new PrintPreview(editor.graph, 1);
preview.open(); preview.open();
}); });
this.addAction('show', (editor) => { this.addAction('show', (editor) => {
mxUtils.show(editor.graph, null, 10, 10); utils.show(editor.graph, null, 10, 10);
}); });
this.addAction('exportImage', (editor) => { this.addAction('exportImage', (editor) => {
@ -1004,10 +1004,10 @@ class mxEditor extends mxEventSource {
if (url == null || mxClient.IS_LOCAL) { if (url == null || mxClient.IS_LOCAL) {
editor.execute('show'); editor.execute('show');
} else { } else {
const node = mxUtils.getViewXml(editor.graph, 1); const node = utils.getViewXml(editor.graph, 1);
const xml = mxUtils.getXml(node, '\n'); const xml = utils.getXml(node, '\n');
mxUtils.submit( utils.submit(
url, url,
`${editor.postParameterName}=${encodeURIComponent(xml)}`, `${editor.postParameterName}=${encodeURIComponent(xml)}`,
document, document,
@ -1291,7 +1291,7 @@ class mxEditor extends mxEventSource {
const scale = const scale =
parseFloat( parseFloat(
prompt( prompt(
mxResources.get(editor.askZoomResource) || editor.askZoomResource, Resources.get(editor.askZoomResource) || editor.askZoomResource,
current current
) )
) / 100; ) / 100;
@ -1455,11 +1455,11 @@ class mxEditor extends mxEventSource {
/** /**
* Creates the {@link graph} for the editor. The graph is created with no * Creates the {@link graph} for the editor. The graph is created with no
* container and is initialized from {@link setGraphContainer}. * container and is initialized from {@link setGraphContainer}.
* @returns mxGraph instance * @returns graph instance
*/ */
// createGraph(): mxGraph; // createGraph(): mxGraph;
createGraph() { createGraph() {
const graph = new mxGraph(null, null, this.graphRenderHint); const graph = new graph(null, null, this.graphRenderHint);
// Enables rubberband, tooltips, panning // Enables rubberband, tooltips, panning
graph.setTooltips(true); graph.setTooltips(true);
@ -1506,11 +1506,11 @@ class mxEditor extends mxEventSource {
/** /**
* Sets the graph's container using [@link mxGraph.init}. * Sets the graph's container using [@link mxGraph.init}.
* @param graph * @param graph
* @returns mxSwimlaneManager instance * @returns SwimlaneManager instance
*/ */
// createSwimlaneManager(graph: any): mxSwimlaneManager; // createSwimlaneManager(graph: any): mxSwimlaneManager;
createSwimlaneManager(graph) { createSwimlaneManager(graph) {
const swimlaneMgr = new mxSwimlaneManager(graph, false); const swimlaneMgr = new SwimlaneManager(graph, false);
swimlaneMgr.isHorizontal = () => { swimlaneMgr.isHorizontal = () => {
return this.horizontalFlow; return this.horizontalFlow;
@ -1527,11 +1527,11 @@ class mxEditor extends mxEventSource {
* Creates a layout manager for the swimlane and diagram layouts, that * Creates a layout manager for the swimlane and diagram layouts, that
* is, the locally defined inter and intraswimlane layouts. * is, the locally defined inter and intraswimlane layouts.
* @param graph * @param graph
* @returns mxLayoutManager instance * @returns LayoutManager instance
*/ */
// createLayoutManager(graph: any): mxLayoutManager; // createLayoutManager(graph: any): mxLayoutManager;
createLayoutManager(graph) { createLayoutManager(graph) {
const layoutMgr = new mxLayoutManager(graph); const layoutMgr = new LayoutManager(graph);
const self = this; // closure const self = this; // closure
layoutMgr.getLayout = (cell) => { layoutMgr.getLayout = (cell) => {
@ -1572,7 +1572,7 @@ class mxEditor extends mxEventSource {
} }
/** /**
* Sets the graph's container using {@link mxGraph.init}. * Sets the graph's container using {@link graph.init}.
* @param container * @param container
*/ */
// setGraphContainer(container: any): void; // setGraphContainer(container: any): void;
@ -1588,20 +1588,20 @@ class mxEditor extends mxEventSource {
// Disables the context menu // Disables the context menu
if (this.disableContextMenu) { if (this.disableContextMenu) {
mxEvent.disableContextMenu(container); InternalEvent.disableContextMenu(container);
} }
} }
} }
/** /**
* Overrides {@link mxGraph.dblClick} to invoke {@link dblClickAction} * Overrides {@link graph.dblClick} to invoke {@link dblClickAction}
* on a cell and reset the selection tool in the toolbar. * on a cell and reset the selection tool in the toolbar.
* @param graph * @param graph
*/ */
// installDblClickHandler(graph: any): void; // installDblClickHandler(graph: any): void;
installDblClickHandler(graph) { installDblClickHandler(graph) {
// Installs a listener for double click events // Installs a listener for double click events
graph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => { graph.addListener(InternalEvent.DOUBLE_CLICK, (sender, evt) => {
const cell = evt.getProperty('cell'); const cell = evt.getProperty('cell');
if (cell != null && graph.isEnabled() && this.dblClickAction != null) { if (cell != null && graph.isEnabled() && this.dblClickAction != null) {
@ -1622,8 +1622,8 @@ class mxEditor extends mxEventSource {
this.undoManager.undoableEditHappened(edit); this.undoManager.undoableEditHappened(edit);
}; };
graph.getModel().addListener(mxEvent.UNDO, listener); graph.getModel().addListener(InternalEvent.UNDO, listener);
graph.getView().addListener(mxEvent.UNDO, listener); graph.getView().addListener(InternalEvent.UNDO, listener);
// Keeps the selection state in sync // Keeps the selection state in sync
const undoHandler = (sender, evt) => { const undoHandler = (sender, evt) => {
@ -1631,8 +1631,8 @@ class mxEditor extends mxEventSource {
graph.setSelectionCells(graph.getSelectionCellsForChanges(changes)); graph.setSelectionCells(graph.getSelectionCellsForChanges(changes));
}; };
this.undoManager.addListener(mxEvent.UNDO, undoHandler); this.undoManager.addListener(InternalEvent.UNDO, undoHandler);
this.undoManager.addListener(mxEvent.REDO, undoHandler); this.undoManager.addListener(InternalEvent.REDO, undoHandler);
} }
/** /**
@ -1642,11 +1642,11 @@ class mxEditor extends mxEventSource {
// installDrillHandler(graph: any): void; // installDrillHandler(graph: any): void;
installDrillHandler(graph) { installDrillHandler(graph) {
const listener = (sender) => { const listener = (sender) => {
this.fireEvent(new mxEventObject(mxEvent.ROOT)); this.fireEvent(new EventObject(InternalEvent.ROOT));
}; };
graph.getView().addListener(mxEvent.DOWN, listener); graph.getView().addListener(InternalEvent.DOWN, listener);
graph.getView().addListener(mxEvent.UP, listener); graph.getView().addListener(InternalEvent.UP, listener);
} }
/** /**
@ -1674,19 +1674,19 @@ class mxEditor extends mxEventSource {
const change = changes[i]; const change = changes[i];
if ( if (
change instanceof mxRootChange || change instanceof RootChange ||
(change instanceof mxValueChange && (change instanceof ValueChange &&
change.cell === this.graph.model.root) || change.cell === this.graph.model.root) ||
(change instanceof mxCellAttributeChange && (change instanceof CellAttributeChange &&
change.cell === this.graph.model.root) change.cell === this.graph.model.root)
) { ) {
this.fireEvent(new mxEventObject(mxEvent.ROOT)); this.fireEvent(new EventObject(InternalEvent.ROOT));
break; break;
} }
} }
}; };
graph.getModel().addListener(mxEvent.CHANGE, listener); graph.getModel().addListener(InternalEvent.CHANGE, listener);
} }
/** /**
@ -1796,21 +1796,21 @@ class mxEditor extends mxEventSource {
// Prints the last saved time in the status bar // Prints the last saved time in the status bar
// when files are saved // when files are saved
this.addListener(mxEvent.SAVE, () => { this.addListener(InternalEvent.SAVE, () => {
const tstamp = new Date().toLocaleString(); const tstamp = new Date().toLocaleString();
this.setStatus( this.setStatus(
`${ `${
mxResources.get(this.lastSavedResource) || this.lastSavedResource Resources.get(this.lastSavedResource) || this.lastSavedResource
}: ${tstamp}` }: ${tstamp}`
); );
}); });
// Updates the statusbar to display the filename // Updates the statusbar to display the filename
// when new files are opened // when new files are opened
this.addListener(mxEvent.OPEN, () => { this.addListener(InternalEvent.OPEN, () => {
this.setStatus( this.setStatus(
`${ `${
mxResources.get(this.currentFileResource) || Resources.get(this.currentFileResource) ||
this.currentFileResource this.currentFileResource
}: ${this.filename}` }: ${this.filename}`
); );
@ -1836,7 +1836,7 @@ class mxEditor extends mxEventSource {
*/ */
// setTitleContainer(container: any): void; // setTitleContainer(container: any): void;
setTitleContainer(container) { setTitleContainer(container) {
this.addListener(mxEvent.ROOT, (sender) => { this.addListener(InternalEvent.ROOT, (sender) => {
container.innerHTML = this.getTitle(); container.innerHTML = this.getTitle();
}); });
} }
@ -1881,7 +1881,7 @@ class mxEditor extends mxEventSource {
} }
/** /**
* Returns the string value of the root cell in {@link mxGraph.model}. * Returns the string value of the root cell in {@link graph.model}.
*/ */
// getRootTitle(): string; // getRootTitle(): string;
getRootTitle() { getRootTitle() {
@ -1907,7 +1907,7 @@ class mxEditor extends mxEventSource {
/** /**
* Invokes {@link createGroup} to create a new group cell and the invokes * Invokes {@link createGroup} to create a new group cell and the invokes
* {@link mxGraph.groupCells}, using the grid size of the graph as the spacing * {@link graph.groupCells}, using the grid size of the graph as the spacing
* in the group's content area. * in the group's content area.
*/ */
// groupCells(): any; // groupCells(): any;
@ -1920,7 +1920,7 @@ class mxEditor extends mxEventSource {
/** /**
* Creates and returns a clone of {@link defaultGroup} to be used * Creates and returns a clone of {@link defaultGroup} to be used
* as a new group cell in {@link group}. * as a new group cell in {@link group}.
* @returns mxCell * @returns Cell
*/ */
// createGroup(): mxCell; // createGroup(): mxCell;
createGroup() { createGroup() {
@ -1952,11 +1952,11 @@ class mxEditor extends mxEventSource {
// open(filename: string): void; // open(filename: string): void;
open(filename) { open(filename) {
if (filename != null) { if (filename != null) {
const xml = mxUtils.load(filename).getXml(); const xml = utils.load(filename).getXml();
this.readGraphModel(xml.documentElement); this.readGraphModel(xml.documentElement);
this.filename = filename; this.filename = filename;
this.fireEvent(new mxEventObject(mxEvent.OPEN, 'filename', filename)); this.fireEvent(new EventObject(InternalEvent.OPEN, 'filename', filename));
} }
} }
@ -1976,7 +1976,7 @@ class mxEditor extends mxEventSource {
* Posts the string returned by {@link writeGraphModel} to the given URL or the * Posts the string returned by {@link writeGraphModel} to the given URL or the
* URL returned by {@link getUrlPost}. The actual posting is carried out by * URL returned by {@link getUrlPost}. The actual posting is carried out by
* {@link postDiagram}. If the URL is null then the resulting XML will be * {@link postDiagram}. If the URL is null then the resulting XML will be
* displayed using {@link mxUtils.popup}. Exceptions should be handled as * displayed using {@link utils.popup}. Exceptions should be handled as
* follows: * follows:
* *
* @example * @example
@ -2009,7 +2009,7 @@ class mxEditor extends mxEventSource {
} }
// Dispatches a save event // Dispatches a save event
this.fireEvent(new mxEventObject(mxEvent.SAVE, 'url', url)); this.fireEvent(new EventObject(InternalEvent.SAVE, 'url', url));
} }
/** /**
@ -2041,10 +2041,10 @@ class mxEditor extends mxEventSource {
data = encodeURIComponent(data); data = encodeURIComponent(data);
} }
mxUtils.post(url, `${this.postParameterName}=${data}`, (req) => { utils.post(url, `${this.postParameterName}=${data}`, (req) => {
this.fireEvent( this.fireEvent(
new mxEventObject( new EventObject(
mxEvent.POST, InternalEvent.POST,
'request', 'request',
req, req,
'url', 'url',
@ -2076,7 +2076,7 @@ class mxEditor extends mxEventSource {
const enc = new mxCodec(); const enc = new mxCodec();
const node = enc.encode(this.graph.getModel()); const node = enc.encode(this.graph.getModel());
return mxUtils.getXml(node, linefeed); return utils.getXml(node, linefeed);
} }
/** /**
@ -2144,7 +2144,7 @@ class mxEditor extends mxEventSource {
// graph and computes the location of the dialog // graph and computes the location of the dialog
this.graph.stopEditing(true); this.graph.stopEditing(true);
const offset = mxUtils.getOffset(this.graph.container); const offset = utils.getOffset(this.graph.container);
let x = offset.x + 10; let x = offset.x + 10;
let { y } = offset; let { y } = offset;
@ -2174,7 +2174,7 @@ class mxEditor extends mxEventSource {
// Displays the contents in a window and stores a reference to the // Displays the contents in a window and stores a reference to the
// window for later hiding of the window // window for later hiding of the window
this.properties = new mxWindow( this.properties = new mxWindow(
mxResources.get(this.propertiesResource) || this.propertiesResource, Resources.get(this.propertiesResource) || this.propertiesResource,
node, node,
x, x,
y, y,
@ -2290,7 +2290,7 @@ class mxEditor extends mxEventSource {
// model, which will also make the change // model, which will also make the change
// part of the current transaction // part of the current transaction
for (let i = 0; i < attrs.length; i += 1) { for (let i = 0; i < attrs.length; i += 1) {
const edit = new mxCellAttributeChange( const edit = new CellAttributeChange(
cell, cell,
attrs[i].nodeName, attrs[i].nodeName,
texts[i].value texts[i].value
@ -2365,7 +2365,7 @@ class mxEditor extends mxEventSource {
div.style.paddingLeft = '20px'; div.style.paddingLeft = '20px';
const w = document.body.clientWidth; const w = document.body.clientWidth;
const wnd = new mxWindow( const wnd = new mxWindow(
mxResources.get(this.tasksResource) || this.tasksResource, Resources.get(this.tasksResource) || this.tasksResource,
div, div,
w - 220, w - 220,
this.tasksTop, this.tasksTop,
@ -2378,14 +2378,14 @@ class mxEditor extends mxEventSource {
// of the tasks window on every change of the // of the tasks window on every change of the
// model, selection or root. // model, selection or root.
const funct = (sender) => { const funct = (sender) => {
mxEvent.release(div); InternalEvent.release(div);
div.innerHTML = ''; div.innerHTML = '';
this.createTasks(div); this.createTasks(div);
}; };
this.graph.getModel().addListener(mxEvent.CHANGE, funct); this.graph.getModel().addListener(InternalEvent.CHANGE, funct);
this.graph.getSelectionModel().addListener(mxEvent.CHANGE, funct); this.graph.getSelectionModel().addListener(InternalEvent.CHANGE, funct);
this.graph.addListener(mxEvent.ROOT, funct); this.graph.addListener(InternalEvent.ROOT, funct);
// Assigns the icon to the tasks window // Assigns the icon to the tasks window
if (this.tasksWindowImage != null) { if (this.tasksWindowImage != null) {
@ -2407,7 +2407,7 @@ class mxEditor extends mxEventSource {
refreshTasks(div) { refreshTasks(div) {
if (this.tasks != null) { if (this.tasks != null) {
const div = this.tasks.content; const div = this.tasks.content;
mxEvent.release(div); InternalEvent.release(div);
div.innerHTML = ''; div.innerHTML = '';
this.createTasks(div); this.createTasks(div);
} }
@ -2437,7 +2437,7 @@ class mxEditor extends mxEventSource {
showHelp(tasks) { showHelp(tasks) {
if (this.help == null) { if (this.help == null) {
const frame = document.createElement('iframe'); const frame = document.createElement('iframe');
frame.setAttribute('src', mxResources.get('urlHelp') || this.urlHelp); frame.setAttribute('src', Resources.get('urlHelp') || this.urlHelp);
frame.setAttribute('height', '100%'); frame.setAttribute('height', '100%');
frame.setAttribute('width', '100%'); frame.setAttribute('width', '100%');
frame.setAttribute('frameBorder', '0'); frame.setAttribute('frameBorder', '0');
@ -2448,7 +2448,7 @@ class mxEditor extends mxEventSource {
document.body.clientHeight || document.documentElement.clientHeight; document.body.clientHeight || document.documentElement.clientHeight;
const wnd = new mxWindow( const wnd = new mxWindow(
mxResources.get(this.helpResource) || this.helpResource, Resources.get(this.helpResource) || this.helpResource,
frame, frame,
(w - this.helpWidth) / 2, (w - this.helpWidth) / 2,
(h - this.helpHeight) / 3, (h - this.helpHeight) / 3,
@ -2472,10 +2472,10 @@ class mxEditor extends mxEventSource {
frame.setAttribute('height', `${h - 26}px`); frame.setAttribute('height', `${h - 26}px`);
}; };
wnd.addListener(mxEvent.RESIZE_END, handler); wnd.addListener(InternalEvent.RESIZE_END, handler);
wnd.addListener(mxEvent.MAXIMIZE, handler); wnd.addListener(InternalEvent.MAXIMIZE, handler);
wnd.addListener(mxEvent.NORMALIZE, handler); wnd.addListener(InternalEvent.NORMALIZE, handler);
wnd.addListener(mxEvent.SHOW, handler); wnd.addListener(InternalEvent.SHOW, handler);
} }
this.help = wnd; this.help = wnd;
@ -2486,7 +2486,7 @@ class mxEditor extends mxEventSource {
/** /**
* Shows the outline window. If the window does not exist, then it is * Shows the outline window. If the window does not exist, then it is
* created using an {@link mxOutline}. * created using an {@link outline}.
*/ */
// showOutline(): void; // showOutline(): void;
showOutline() { showOutline() {
@ -2503,7 +2503,7 @@ class mxEditor extends mxEventSource {
div.style.cursor = 'move'; div.style.cursor = 'move';
const wnd = new mxWindow( const wnd = new mxWindow(
mxResources.get(this.outlineResource) || this.outlineResource, Resources.get(this.outlineResource) || this.outlineResource,
div, div,
600, 600,
480, 480,
@ -2514,17 +2514,17 @@ class mxEditor extends mxEventSource {
// Creates the outline in the specified div // Creates the outline in the specified div
// and links it to the existing graph // and links it to the existing graph
const outline = new mxOutline(this.graph, div); const outline = new Outline(this.graph, div);
wnd.setClosable(true); wnd.setClosable(true);
wnd.setResizable(true); wnd.setResizable(true);
wnd.destroyOnClose = false; wnd.destroyOnClose = false;
wnd.addListener(mxEvent.RESIZE_END, () => { wnd.addListener(InternalEvent.RESIZE_END, () => {
outline.update(); outline.update();
}); });
this.outline = wnd; this.outline = wnd;
this.outline.outline = outline; this.outline.Outline = outline;
} }
// Finally shows the outline // Finally shows the outline
@ -2584,10 +2584,10 @@ class mxEditor extends mxEventSource {
const model = this.graph.getModel(); const model = this.graph.getModel();
e = model.cloneCell(this.defaultEdge); e = model.cloneCell(this.defaultEdge);
} else { } else {
e = new mxCell(''); e = new Cell('');
e.setEdge(true); e.setEdge(true);
const geo = new mxGeometry(); const geo = new Geometry();
geo.relative = true; geo.relative = true;
e.setGeometry(geo); e.setGeometry(geo);
} }
@ -2714,8 +2714,8 @@ class mxEditor extends mxEventSource {
this.cycleAttribute(vertex); this.cycleAttribute(vertex);
this.fireEvent( this.fireEvent(
new mxEventObject( new EventObject(
mxEvent.BEFORE_ADD_VERTEX, InternalEvent.BEFORE_ADD_VERTEX,
'vertex', 'vertex',
vertex, vertex,
'parent', 'parent',
@ -2730,7 +2730,7 @@ class mxEditor extends mxEventSource {
if (vertex != null) { if (vertex != null) {
this.graph.constrainChild(vertex); this.graph.constrainChild(vertex);
this.fireEvent(new mxEventObject(mxEvent.ADD_VERTEX, 'vertex', vertex)); this.fireEvent(new EventObject(InternalEvent.ADD_VERTEX, 'vertex', vertex));
} }
} finally { } finally {
model.endUpdate(); model.endUpdate();
@ -2740,7 +2740,7 @@ class mxEditor extends mxEventSource {
this.graph.setSelectionCell(vertex); this.graph.setSelectionCell(vertex);
this.graph.scrollCellToVisible(vertex); this.graph.scrollCellToVisible(vertex);
this.fireEvent( this.fireEvent(
new mxEventObject(mxEvent.AFTER_ADD_VERTEX, 'vertex', vertex) new EventObject(InternalEvent.AFTER_ADD_VERTEX, 'vertex', vertex)
); );
} }

402
packages/core/src/index.ts
View File

@ -1,119 +1,119 @@
import mxClient from './mxClient'; import mxClient from './mxClient';
import mxCellAttributeChange from './atomic_changes/mxCellAttributeChange'; import CellAttributeChange from './view/cell/CellAttributeChange';
import mxChildChange from './atomic_changes/mxChildChange'; import ChildChange from './view/model/ChildChange';
import mxCollapseChange from './atomic_changes/mxCollapseChange'; import CollapseChange from './view/folding/CollapseChange';
import mxCurrentRootChange from './atomic_changes/mxCurrentRootChange'; import CurrentRootChange from './view/view/CurrentRootChange';
import mxGeometryChange from './atomic_changes/mxGeometryChange'; import GeometryChange from './view/geometry/GeometryChange';
import mxRootChange from './atomic_changes/mxRootChange'; import RootChange from './view/model/RootChange';
import mxSelectionChange from './atomic_changes/mxSelectionChange'; import SelectionChange from './view/selection/SelectionChange';
import mxStyleChange from './atomic_changes/mxStyleChange'; import StyleChange from './view/style/StyleChange';
import mxTerminalChange from './atomic_changes/mxTerminalChange'; import TerminalChange from './view/cell/edge/TerminalChange';
import mxValueChange from './atomic_changes/mxValueChange'; import ValueChange from './view/cell/ValueChange';
import mxVisibleChange from './atomic_changes/mxVisibleChange'; import VisibleChange from './view/style/VisibleChange';
import mxDefaultKeyHandler from './editor/mxDefaultKeyHandler'; import mxDefaultKeyHandler from './editor/mxDefaultKeyHandler';
import mxDefaultPopupMenu from './editor/mxDefaultPopupMenu'; import mxDefaultPopupMenu from './editor/mxDefaultPopupMenu';
import mxDefaultToolbar from './editor/mxDefaultToolbar'; import mxDefaultToolbar from './editor/mxDefaultToolbar';
import mxEditor from './editor/mxEditor'; import mxEditor from './editor/mxEditor';
import mxCellHighlight from './handler/mxCellHighlight'; import mxCellHighlight from './view/selection/mxCellHighlight';
import mxCellMarker from './handler/mxCellMarker'; import CellMarker from './view/cell/CellMarker';
import mxCellTracker from './handler/mxCellTracker'; import mxCellTracker from './view/event/mxCellTracker';
import mxConnectionHandler from './handler/mxConnectionHandler'; import mxConnectionHandler from './view/connection/mxConnectionHandler';
import mxConstraintHandler from './handler/mxConstraintHandler'; import mxConstraintHandler from './view/connection/mxConstraintHandler';
import mxEdgeHandler from './handler/mxEdgeHandler'; import mxEdgeHandler from './view/cell/edge/mxEdgeHandler';
import mxEdgeSegmentHandler from './handler/mxEdgeSegmentHandler'; import mxEdgeSegmentHandler from './view/cell/edge/mxEdgeSegmentHandler';
import mxElbowEdgeHandler from './handler/mxElbowEdgeHandler'; import mxElbowEdgeHandler from './view/cell/edge/mxElbowEdgeHandler';
import mxGraphHandler from './handler/mxGraphHandler'; import GraphHandler from './view/GraphHandler';
import mxHandle from './handler/mxHandle'; import mxHandle from './view/cell/edge/mxHandle';
import mxKeyHandler from './handler/mxKeyHandler'; import mxKeyHandler from './view/event/mxKeyHandler';
import mxPanningHandler from './handler/mxPanningHandler'; import PanningHandler from './view/panning/PanningHandler';
import mxPopupMenuHandler from './handler/mxPopupMenuHandler'; import PopupMenuHandler from './view/popups_menus/PopupMenuHandler';
import mxRubberband from './handler/mxRubberband'; import mxRubberband from './view/selection/mxRubberband';
import mxSelectionCellsHandler from './handler/mxSelectionCellsHandler'; import mxSelectionCellsHandler from './view/selection/mxSelectionCellsHandler';
import mxTooltipHandler from './handler/mxTooltipHandler'; import TooltipHandler from './view/popups_menus/TooltipHandler';
import mxVertexHandler from './handler/mxVertexHandler'; import mxVertexHandler from './view/cell/vertex/mxVertexHandler';
import mxCircleLayout from './layout/mxCircleLayout'; import mxCircleLayout from './view/layout/layout/mxCircleLayout';
import mxCompactTreeLayout from './layout/mxCompactTreeLayout'; import mxCompactTreeLayout from './view/layout/layout/mxCompactTreeLayout';
import mxCompositeLayout from './layout/mxCompositeLayout'; import mxCompositeLayout from './view/layout/layout/mxCompositeLayout';
import mxEdgeLabelLayout from './layout/mxEdgeLabelLayout'; import mxEdgeLabelLayout from './view/layout/layout/mxEdgeLabelLayout';
import mxFastOrganicLayout from './layout/mxFastOrganicLayout'; import mxFastOrganicLayout from './view/layout/layout/mxFastOrganicLayout';
import mxGraphLayout from './layout/mxGraphLayout'; import mxGraphLayout from './view/layout/layout/mxGraphLayout';
import mxParallelEdgeLayout from './layout/mxParallelEdgeLayout'; import mxParallelEdgeLayout from './view/layout/layout/mxParallelEdgeLayout';
import mxPartitionLayout from './layout/mxPartitionLayout'; import mxPartitionLayout from './view/layout/layout/mxPartitionLayout';
import mxRadialTreeLayout from './layout/mxRadialTreeLayout'; import mxRadialTreeLayout from './view/layout/layout/mxRadialTreeLayout';
import mxStackLayout from './layout/mxStackLayout'; import mxStackLayout from './view/layout/layout/mxStackLayout';
import mxHierarchicalEdgeStyle from './layout/hierarchical/mxHierarchicalEdgeStyle'; import mxHierarchicalEdgeStyle from './view/layout/layout/hierarchical/mxHierarchicalEdgeStyle';
import mxHierarchicalLayout from './layout/hierarchical/mxHierarchicalLayout'; import mxHierarchicalLayout from './view/layout/layout/hierarchical/mxHierarchicalLayout';
import mxSwimlaneLayout from './layout/hierarchical/mxSwimlaneLayout'; import mxSwimlaneLayout from './view/layout/layout/hierarchical/mxSwimlaneLayout';
import mxGraphAbstractHierarchyCell from './layout/hierarchical/model/mxGraphAbstractHierarchyCell'; import mxGraphAbstractHierarchyCell from './view/layout/layout/hierarchical/model/mxGraphAbstractHierarchyCell';
import mxGraphHierarchyEdge from './layout/hierarchical/model/mxGraphHierarchyEdge'; import mxGraphHierarchyEdge from './view/layout/layout/hierarchical/model/mxGraphHierarchyEdge';
import mxGraphHierarchyModel from './layout/hierarchical/model/mxGraphHierarchyModel'; import mxGraphHierarchyModel from './view/layout/layout/hierarchical/model/mxGraphHierarchyModel';
import mxGraphHierarchyNode from './layout/hierarchical/model/mxGraphHierarchyNode'; import mxGraphHierarchyNode from './view/layout/layout/hierarchical/model/mxGraphHierarchyNode';
import mxSwimlaneModel from './layout/hierarchical/model/mxSwimlaneModel'; import mxSwimlaneModel from './view/layout/layout/hierarchical/model/mxSwimlaneModel';
import mxCoordinateAssignment from './layout/hierarchical/stage/mxCoordinateAssignment'; import mxCoordinateAssignment from './view/layout/layout/hierarchical/stage/mxCoordinateAssignment';
import mxHierarchicalLayoutStage from './layout/hierarchical/stage/mxHierarchicalLayoutStage'; import mxHierarchicalLayoutStage from './view/layout/layout/hierarchical/stage/mxHierarchicalLayoutStage';
import mxMedianHybridCrossingReduction from './layout/hierarchical/stage/mxMedianHybridCrossingReduction'; import mxMedianHybridCrossingReduction from './view/layout/layout/hierarchical/stage/mxMedianHybridCrossingReduction';
import mxMinimumCycleRemover from './layout/hierarchical/stage/mxMinimumCycleRemover'; import mxMinimumCycleRemover from './view/layout/layout/hierarchical/stage/mxMinimumCycleRemover';
import mxSwimlaneOrdering from './layout/hierarchical/stage/mxSwimlaneOrdering'; import mxSwimlaneOrdering from './view/layout/layout/hierarchical/stage/mxSwimlaneOrdering';
import mxCellCodec from './serialization/mxCellCodec'; import mxCellCodec from './util/serialization/mxCellCodec';
import mxChildChangeCodec from './serialization/mxChildChangeCodec'; import mxChildChangeCodec from './util/serialization/mxChildChangeCodec';
import mxCodec from './serialization/mxCodec'; import mxCodec from './util/serialization/mxCodec';
import mxCodecRegistry from './serialization/mxCodecRegistry'; import mxCodecRegistry from './util/serialization/mxCodecRegistry';
import mxDefaultKeyHandlerCodec from './serialization/mxDefaultKeyHandlerCodec'; import mxDefaultKeyHandlerCodec from './util/serialization/mxDefaultKeyHandlerCodec';
import mxDefaultPopupMenuCodec from './serialization/mxDefaultPopupMenuCodec'; import mxDefaultPopupMenuCodec from './util/serialization/mxDefaultPopupMenuCodec';
import mxDefaultToolbarCodec from './serialization/mxDefaultToolbarCodec'; import mxDefaultToolbarCodec from './util/serialization/mxDefaultToolbarCodec';
import mxEditorCodec from './serialization/mxEditorCodec'; import mxEditorCodec from './util/serialization/mxEditorCodec';
import mxGenericChangeCodec from './serialization/mxGenericChangeCodec'; import mxGenericChangeCodec from './util/serialization/mxGenericChangeCodec';
import mxGraphCodec from './serialization/mxGraphCodec'; import mxGraphCodec from './util/serialization/mxGraphCodec';
import mxGraphViewCodec from './serialization/mxGraphViewCodec'; import mxGraphViewCodec from './util/serialization/mxGraphViewCodec';
import mxModelCodec from './serialization/mxModelCodec'; import mxModelCodec from './util/serialization/mxModelCodec';
import mxObjectCodec from './serialization/mxObjectCodec'; import mxObjectCodec from './util/serialization/mxObjectCodec';
import mxRootChangeCodec from './serialization/mxRootChangeCodec'; import mxRootChangeCodec from './util/serialization/mxRootChangeCodec';
import mxStylesheetCodec from './serialization/mxStylesheetCodec'; import mxStylesheetCodec from './util/serialization/mxStylesheetCodec';
import mxTerminalChangeCodec from './serialization/mxTerminalChangeCodec'; import mxTerminalChangeCodec from './util/serialization/mxTerminalChangeCodec';
import mxActor from './shape/mxActor'; import Actor from './view/geometry/shape/Actor';
import mxLabel from './shape/mxLabel'; import Label from './view/geometry/shape/Label';
import mxShape from './shape/mxShape'; import Shape from './view/geometry/shape/Shape';
import mxSwimlane from './shape/mxSwimlane'; import Swimlane from './view/geometry/shape/Swimlane';
import mxText from './shape/mxText'; import mxText from './view/geometry/shape/mxText';
import mxTriangle from './shape/mxTriangle'; import Triangle from './view/geometry/shape/Triangle';
import mxArrow from './shape/edge/mxArrow'; import mxArrow from './view/geometry/shape/edge/mxArrow';
import mxArrowConnector from './shape/edge/mxArrowConnector'; import mxArrowConnector from './view/geometry/shape/edge/mxArrowConnector';
import mxConnector from './shape/edge/mxConnector'; import mxConnector from './view/geometry/shape/edge/mxConnector';
import mxLine from './shape/edge/mxLine'; import mxLine from './view/geometry/shape/edge/mxLine';
import mxMarker from './shape/edge/mxMarker'; import mxMarker from './view/geometry/shape/edge/mxMarker';
import mxPolyline from './shape/edge/mxPolyline'; import mxPolyline from './view/geometry/shape/edge/mxPolyline';
import mxCloud from './shape/node/mxCloud'; import Cloud from './view/geometry/shape/node/Cloud';
import mxCylinder from './shape/node/mxCylinder'; import Cylinder from './view/geometry/shape/node/Cylinder';
import mxDoubleEllipse from './shape/node/mxDoubleEllipse'; import DoubleEllipse from './view/geometry/shape/node/DoubleEllipse';
import mxEllipse from './shape/node/mxEllipse'; import Ellipse from './view/geometry/shape/node/Ellipse';
import mxHexagon from './shape/node/mxHexagon'; import Hexagon from './view/geometry/shape/node/Hexagon';
import mxImageShape from './shape/node/mxImageShape'; import ImageShape from './view/geometry/shape/node/ImageShape';
import mxRectangleShape from './shape/node/mxRectangleShape'; import RectangleShape from './view/geometry/shape/node/RectangleShape';
import mxRhombus from './shape/node/mxRhombus'; import Rhombus from './view/geometry/shape/node/Rhombus';
import mxStencil from './shape/node/mxStencil'; import Stencil from './view/geometry/shape/node/Stencil';
import mxStencilRegistry from './shape/node/mxStencilRegistry'; import StencilRegistry from './view/geometry/shape/node/StencilRegistry';
import * as mxConstants from './util/mxConstants'; import * as mxConstants from './util/Constants';
import mxGuide from './util/mxGuide'; import mxGuide from './util/Guide';
import mxResources from './util/mxResources'; import Resources from './util/Resources';
import mxUtils from './util/mxUtils'; import utils from './util/Utils';
import * as mxCloneUtils from './util/mxCloneUtils'; import * as mxCloneUtils from './util/CloneUtils';
import * as mxDomUtils from './util/mxDomUtils'; import * as mxDomUtils from './util/DomUtils';
import * as mxEventUtils from './util/mxEventUtils'; import * as mxEventUtils from './util/EventUtils';
import * as mxGestureUtils from './util/mxGestureUtils'; import * as mxGestureUtils from './util/GestureUtils';
import * as mxStringUtils from './util/mxStringUtils'; import * as mxStringUtils from './util/StringUtils';
import * as mxXmlUtils from './util/mxXmlUtils'; import * as mxXmlUtils from './util/XmlUtils';
import mxAnimation from './util/animate/mxAnimation'; import mxAnimation from './util/animate/mxAnimation';
import mxEffects from './util/animate/mxEffects'; import mxEffects from './util/animate/mxEffects';
@ -123,27 +123,27 @@ import mxAbstractCanvas2D from './util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from './util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from './util/canvas/mxSvgCanvas2D';
import mxXmlCanvas2D from './util/canvas/mxXmlCanvas2D'; import mxXmlCanvas2D from './util/canvas/mxXmlCanvas2D';
import mxDictionary from './util/datatypes/mxDictionary'; import mxDictionary from './util/mxDictionary';
import mxGeometry from './util/datatypes/mxGeometry'; import Geometry from './view/geometry/Geometry';
import mxObjectIdentity from './util/datatypes/mxObjectIdentity'; import mxObjectIdentity from './util/mxObjectIdentity';
import mxPoint from './util/datatypes/mxPoint'; import Point from './view/geometry/Point';
import mxRectangle from './util/datatypes/mxRectangle'; import Rectangle from './view/geometry/Rectangle';
import mxEdgeStyle from './util/datatypes/style/mxEdgeStyle'; import EdgeStyle from './view/style/EdgeStyle';
import mxPerimeter from './util/datatypes/style/mxPerimeter'; import Perimeter from './view/style/Perimeter';
import mxStyleRegistry from './util/datatypes/style/mxStyleRegistry'; import StyleRegistry from './view/style/StyleRegistry';
import mxStylesheet from './util/datatypes/style/mxStylesheet'; import Stylesheet from './view/style/Stylesheet';
import mxDivResizer from './util/dom/mxDivResizer'; import mxDivResizer from './util/dom/mxDivResizer';
import * as mxDomHelpers from './util/dom/mxDomHelpers'; import * as mxDomHelpers from './util/dom/mxDomHelpers';
import mxDragSource from './util/drag_pan/mxDragSource'; import DragSource from './view/drag_drop/DragSource';
import mxPanningManager from './util/drag_pan/mxPanningManager'; import PanningManager from './view/panning/PanningManager';
import mxEvent from './util/event/mxEvent'; import InternalEvent from './view/event/InternalEvent';
import mxEventObject from './util/event/mxEventObject'; import EventObject from './view/event/EventObject';
import mxEventSource from './util/event/mxEventSource'; import EventSource from './view/event/EventSource';
import mxMouseEvent from './util/event/mxMouseEvent'; import InternalMouseEvent from './view/event/InternalMouseEvent';
import mxForm from './util/gui/mxForm'; import mxForm from './util/gui/mxForm';
import mxLog from './util/gui/mxLog'; import mxLog from './util/gui/mxLog';
@ -151,9 +151,9 @@ import mxPopupMenu from './util/gui/mxPopupMenu';
import mxToolbar from './util/gui/mxToolbar'; import mxToolbar from './util/gui/mxToolbar';
import mxWindow from './util/gui/mxWindow'; import mxWindow from './util/gui/mxWindow';
import mxImage from './util/image/mxImage'; import Image from './view/image/Image';
import mxImageBundle from './util/image/mxImageBundle'; import ImageBundle from './view/image/ImageBundle';
import mxImageExport from './util/image/mxImageExport'; import ImageExport from './view/image/ImageExport';
import mxUrlConverter from './util/network/mxUrlConverter'; import mxUrlConverter from './util/network/mxUrlConverter';
import mxXmlRequest from './util/network/mxXmlRequest'; import mxXmlRequest from './util/network/mxXmlRequest';
@ -161,29 +161,29 @@ import mxXmlRequest from './util/network/mxXmlRequest';
import mxAutoSaveManager from './util/storage/mxAutoSaveManager'; import mxAutoSaveManager from './util/storage/mxAutoSaveManager';
import mxClipboard from './util/storage/mxClipboard'; import mxClipboard from './util/storage/mxClipboard';
import mxUndoableEdit from './util/undo/mxUndoableEdit'; import mxUndoableEdit from './view/model/mxUndoableEdit';
import mxUndoManager from './util/undo/mxUndoManager'; import mxUndoManager from './util/mxUndoManager';
import mxCell from './view/cell/mxCell'; import Cell from './view/cell/datatypes/Cell';
import mxCellEditor from './view/cell/mxCellEditor'; import CellEditor from './view/editing/CellEditor';
import mxCellOverlay from './view/cell/mxCellOverlay'; import CellOverlay from './view/cell/CellOverlay';
import mxCellPath from './view/cell/mxCellPath'; import CellPath from './view/cell/datatypes/CellPath';
import mxCellRenderer from './view/cell/mxCellRenderer'; import CellRenderer from './view/cell/CellRenderer';
import mxCellState from './view/cell/mxCellState'; import CellState from './view/cell/datatypes/CellState';
import mxCellStatePreview from './view/cell/mxCellStatePreview'; import CellStatePreview from './view/cell/CellStatePreview';
import mxTemporaryCellStates from './view/cell/mxTemporaryCellStates'; import TemporaryCellStates from './view/cell/TemporaryCellStates';
import mxConnectionConstraint from './view/connection/mxConnectionConstraint'; import mxConnectionConstraint from './view/connection/mxConnectionConstraint';
import mxMultiplicity from './view/connection/mxMultiplicity'; import Multiplicity from './view/validation/Multiplicity';
import mxGraph from './view/graph/mxGraph'; import graph from './view/Graph';
import mxGraphModel from './view/graph/mxGraphModel'; import Model from './view/model/Model';
import mxGraphSelectionModel from './view/graph/mxGraphSelectionModel'; import mxGraphSelectionModel from './view/selection/mxGraphSelectionModel';
import mxGraphView from './view/graph/mxGraphView'; import GraphView from './view/view/GraphView';
import mxLayoutManager from './view/graph/mxLayoutManager'; import LayoutManager from './view/layout/LayoutManager';
import mxOutline from './view/graph/mxOutline'; import Outline from './view/Outline';
import mxPrintPreview from './view/graph/mxPrintPreview'; import PrintPreview from './view/printing/PrintPreview';
import mxSwimlaneManager from './view/graph/mxSwimlaneManager'; import SwimlaneManager from './view/layout/SwimlaneManager';
import '../css/common.css'; import '../css/common.css';
@ -192,60 +192,60 @@ export default {
mxLog, mxLog,
mxObjectIdentity, mxObjectIdentity,
mxDictionary, mxDictionary,
mxResources, mxResources: Resources,
mxPoint, mxPoint: Point,
mxRectangle, mxRectangle: Rectangle,
mxEffects, mxEffects,
mxUtils, mxUtils: utils,
mxConstants, mxConstants,
mxEventObject, mxEventObject: EventObject,
mxMouseEvent, mxMouseEvent: InternalMouseEvent,
mxEventSource, mxEventSource: EventSource,
mxEvent, mxEvent: InternalEvent,
mxXmlRequest, mxXmlRequest,
mxClipboard, mxClipboard,
mxWindow, mxWindow,
mxForm, mxForm,
mxImage, mxImage: Image,
mxDivResizer, mxDivResizer,
mxDragSource, mxDragSource: DragSource,
mxToolbar, mxToolbar,
mxUndoableEdit, mxUndoableEdit,
mxUndoManager, mxUndoManager,
mxUrlConverter, mxUrlConverter,
mxPanningManager, mxPanningManager: PanningManager,
mxPopupMenu, mxPopupMenu,
mxAutoSaveManager, mxAutoSaveManager,
mxAnimation, mxAnimation,
mxMorphing, mxMorphing,
mxImageBundle, mxImageBundle: ImageBundle,
mxImageExport, mxImageExport: ImageExport,
mxAbstractCanvas2D, mxAbstractCanvas2D,
mxXmlCanvas2D, mxXmlCanvas2D,
mxSvgCanvas2D, mxSvgCanvas2D,
mxGuide, mxGuide,
mxShape, mxShape: Shape,
mxStencil, mxStencil: Stencil,
mxStencilRegistry, mxStencilRegistry: StencilRegistry,
mxMarker, mxMarker,
mxActor, mxActor: Actor,
mxCloud, mxCloud: Cloud,
mxRectangleShape, mxRectangleShape: RectangleShape,
mxEllipse, mxEllipse: Ellipse,
mxDoubleEllipse, mxDoubleEllipse: DoubleEllipse,
mxRhombus, mxRhombus: Rhombus,
mxPolyline, mxPolyline,
mxArrow, mxArrow,
mxArrowConnector, mxArrowConnector,
mxText, mxText,
mxTriangle, mxTriangle: Triangle,
mxHexagon, mxHexagon: Hexagon,
mxLine, mxLine,
mxImageShape, mxImageShape: ImageShape,
mxLabel, mxLabel: Label,
mxCylinder, mxCylinder: Cylinder,
mxConnector, mxConnector,
mxSwimlane, mxSwimlane: Swimlane,
mxGraphLayout, mxGraphLayout,
mxStackLayout, mxStackLayout,
mxPartitionLayout, mxPartitionLayout,
@ -268,33 +268,33 @@ export default {
mxSwimlaneOrdering, mxSwimlaneOrdering,
mxHierarchicalLayout, mxHierarchicalLayout,
mxSwimlaneLayout, mxSwimlaneLayout,
mxGraphModel, mxGraphModel: Model,
mxCell, mxCell: Cell,
mxGeometry, mxGeometry: Geometry,
mxCellPath, mxCellPath: CellPath,
mxPerimeter, mxPerimeter: Perimeter,
mxPrintPreview, mxPrintPreview: PrintPreview,
mxStylesheet, mxStylesheet: Stylesheet,
mxCellState, mxCellState: CellState,
mxGraphSelectionModel, mxGraphSelectionModel,
mxCellEditor, mxCellEditor: CellEditor,
mxCellRenderer, mxCellRenderer: CellRenderer,
mxEdgeStyle, mxEdgeStyle: EdgeStyle,
mxStyleRegistry, mxStyleRegistry: StyleRegistry,
mxGraphView, mxGraphView: GraphView,
mxGraph, mxGraph: graph,
mxCellOverlay, mxCellOverlay: CellOverlay,
mxOutline, mxOutline: Outline,
mxMultiplicity, mxMultiplicity: Multiplicity,
mxLayoutManager, mxLayoutManager: LayoutManager,
mxSwimlaneManager, mxSwimlaneManager: SwimlaneManager,
mxTemporaryCellStates, mxTemporaryCellStates: TemporaryCellStates,
mxCellStatePreview, mxCellStatePreview: CellStatePreview,
mxConnectionConstraint, mxConnectionConstraint,
mxGraphHandler, mxGraphHandler: GraphHandler,
mxPanningHandler, mxPanningHandler: PanningHandler,
mxPopupMenuHandler, mxPopupMenuHandler: PopupMenuHandler,
mxCellMarker, mxCellMarker: CellMarker,
mxSelectionCellsHandler, mxSelectionCellsHandler,
mxConnectionHandler, mxConnectionHandler,
mxConstraintHandler, mxConstraintHandler,
@ -305,7 +305,7 @@ export default {
mxElbowEdgeHandler, mxElbowEdgeHandler,
mxEdgeSegmentHandler, mxEdgeSegmentHandler,
mxKeyHandler, mxKeyHandler,
mxTooltipHandler, mxTooltipHandler: TooltipHandler,
mxCellTracker, mxCellTracker,
mxCellHighlight, mxCellHighlight,
mxDefaultKeyHandler, mxDefaultKeyHandler,
@ -335,15 +335,15 @@ export default {
mxStringUtils, mxStringUtils,
mxXmlUtils, mxXmlUtils,
mxDomHelpers, mxDomHelpers,
mxCellAttributeChange, mxCellAttributeChange: CellAttributeChange,
mxChildChange, mxChildChange: ChildChange,
mxCollapseChange, mxCollapseChange: CollapseChange,
mxCurrentRootChange, mxCurrentRootChange: CurrentRootChange,
mxGeometryChange, mxGeometryChange: GeometryChange,
mxRootChange, mxRootChange: RootChange,
mxSelectionChange, mxSelectionChange: SelectionChange,
mxStyleChange, mxStyleChange: StyleChange,
mxTerminalChange, mxTerminalChange: TerminalChange,
mxValueChange, mxValueChange: ValueChange,
mxVisibleChange, mxVisibleChange: VisibleChange,
}; };

6
packages/core/src/types.ts
View File

@ -1,10 +1,10 @@
import type mxCell from './view/cell/mxCell'; import type Cell from './view/cell/datatypes/Cell';
export type CellMap = { export type CellMap = {
[id: string]: mxCell; [id: string]: Cell;
}; };
export type FilterFunction = (cell: mxCell) => boolean; export type FilterFunction = (cell: Cell) => boolean;
export type UndoableChange = { export type UndoableChange = {
execute: () => void; execute: () => void;

2
packages/core/src/util/mxCloneUtils.js → packages/core/src/util/CloneUtils.js
View File

@ -1,4 +1,4 @@
import mxObjectIdentity from "./datatypes/mxObjectIdentity"; import mxObjectIdentity from "./mxObjectIdentity";
/** /**
* Function: clone * Function: clone

0
packages/core/src/util/mxConstants.ts → packages/core/src/util/Constants.ts
View File

2
packages/core/src/util/mxDomUtils.js → packages/core/src/util/DomUtils.js
View File

@ -1,4 +1,4 @@
import { NODETYPE_ELEMENT } from './mxConstants'; import { NODETYPE_ELEMENT } from './Constants';
/** /**
* Function: extractTextWithWhitespace * Function: extractTextWithWhitespace

0
packages/core/src/util/mxEventUtils.js → packages/core/src/util/EventUtils.js
View File

10
packages/core/src/util/mxGestureUtils.js → packages/core/src/util/GestureUtils.js
View File

@ -1,6 +1,6 @@
import mxDragSource from './drag_pan/mxDragSource'; import DragSource from '../view/drag_drop/DragSource';
import mxPoint from './datatypes/mxPoint'; import Point from '../view/geometry/Point';
import { TOOLTIP_VERTICAL_OFFSET } from './mxConstants'; import { TOOLTIP_VERTICAL_OFFSET } from './Constants';
/** /**
* Function: makeDraggable * Function: makeDraggable
@ -82,8 +82,8 @@ export const makeDraggable = (
highlightDropTargets, highlightDropTargets,
getDropTarget getDropTarget
) => { ) => {
const dragSource = new mxDragSource(element, funct); const dragSource = new DragSource(element, funct);
dragSource.dragOffset = new mxPoint( dragSource.dragOffset = new Point(
dx != null ? dx : 0, dx != null ? dx : 0,
dy != null ? dy : TOOLTIP_VERTICAL_OFFSET dy != null ? dy : TOOLTIP_VERTICAL_OFFSET
); );

94
packages/core/src/util/mxGuide.ts → packages/core/src/util/Guide.ts
View File

@ -5,15 +5,15 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './mxConstants'; import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './Constants';
import mxPoint from './datatypes/mxPoint'; import Point from '../view/geometry/Point';
import mxPolyline from '../shape/edge/mxPolyline'; import mxPolyline from '../view/geometry/shape/edge/mxPolyline';
import mxCellState from '../view/cell/mxCellState'; import CellState from '../view/cell/datatypes/CellState';
import mxShape from '../shape/mxShape'; import Shape from '../view/geometry/shape/Shape';
import mxRectangle from './datatypes/mxRectangle'; import Rectangle from '../view/geometry/Rectangle';
import mxGraph from '../view/graph/mxGraph'; import graph from '../view/Graph';
import mxEventObject from './event/mxEventObject'; import EventObject from '../view/event/EventObject';
import mxGraphView from '../view/graph/mxGraphView'; import GraphView from '../view/view/GraphView';
/** /**
* Class: mxGuide * Class: mxGuide
@ -24,8 +24,8 @@ import mxGraphView from '../view/graph/mxGraphView';
* *
* Constructs a new guide object. * Constructs a new guide object.
*/ */
class mxGuide { class Guide {
constructor(graph: mxGraph, states: mxCellState[]) { constructor(graph: graph, states: CellState[]) {
this.graph = graph; this.graph = graph;
this.setStates(states); this.setStates(states);
} }
@ -36,7 +36,7 @@ class mxGuide {
* Reference to the enclosing <mxGraph> instance. * Reference to the enclosing <mxGraph> instance.
*/ */
// graph: mxGraph; // graph: mxGraph;
graph: mxGraph; graph: graph;
/** /**
* Variable: states * Variable: states
@ -44,7 +44,7 @@ class mxGuide {
* Contains the <mxCellStates> that are used for alignment. * Contains the <mxCellStates> that are used for alignment.
*/ */
// states: mxCellState[]; // states: mxCellState[];
states: mxCellState[] | null = null; states: CellState[] | null = null;
/** /**
* Variable: horizontal * Variable: horizontal
@ -68,7 +68,7 @@ class mxGuide {
* Holds the <mxShape> for the horizontal guide. * Holds the <mxShape> for the horizontal guide.
*/ */
// guideX: mxShape; // guideX: mxShape;
guideX: mxShape | null = null; guideX: Shape | null = null;
/** /**
* Variable: vertical * Variable: vertical
@ -76,7 +76,7 @@ class mxGuide {
* Holds the <mxShape> for the vertical guide. * Holds the <mxShape> for the vertical guide.
*/ */
// guideY: mxShape; // guideY: mxShape;
guideY: mxShape | null = null; guideY: Shape | null = null;
/** /**
* Variable: rounded * Variable: rounded
@ -98,7 +98,7 @@ class mxGuide {
* Sets the <mxCellStates> that should be used for alignment. * Sets the <mxCellStates> that should be used for alignment.
*/ */
// setStates(states: mxCellState[]): void; // setStates(states: mxCellState[]): void;
setStates(states: mxCellState[]): void { setStates(states: CellState[]): void {
this.states = states; this.states = states;
} }
@ -109,7 +109,7 @@ class mxGuide {
* implementation always returns true. * implementation always returns true.
*/ */
// isEnabledForEvent(evt: Event): boolean; // isEnabledForEvent(evt: Event): boolean;
isEnabledForEvent(evt: mxEventObject | null = null): boolean { isEnabledForEvent(evt: EventObject | null = null): boolean {
return true; return true;
} }
@ -118,8 +118,7 @@ class mxGuide {
* *
* Returns the tolerance for the guides. Default value is gridSize / 2. * Returns the tolerance for the guides. Default value is gridSize / 2.
*/ */
// getGuideTolerance(): number; getGuideTolerance(gridEnabled: boolean = false): number {
getGuideTolerance(gridEnabled: boolean = false) {
return gridEnabled && this.graph.gridEnabled return gridEnabled && this.graph.gridEnabled
? this.graph.gridSize / 2 ? this.graph.gridSize / 2
: this.tolerance; : this.tolerance;
@ -136,8 +135,7 @@ class mxGuide {
* *
* horizontal - Boolean that specifies which guide should be created. * horizontal - Boolean that specifies which guide should be created.
*/ */
// createGuideShape(horizontal: boolean): mxPolyline; createGuideShape(horizontal: boolean = false): mxPolyline {
createGuideShape(horizontal: boolean = false) {
// TODO: Should vertical guides be supported here?? ============================ // TODO: Should vertical guides be supported here?? ============================
const guide = new mxPolyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH); const guide = new mxPolyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH);
guide.isDashed = true; guide.isDashed = true;
@ -148,8 +146,7 @@ class mxGuide {
* Returns true if the given state should be ignored. * Returns true if the given state should be ignored.
* @param state * @param state
*/ */
// isStateIgnored(state: mxCellState): boolean; isStateIgnored(state: CellState | null = null): boolean {
isStateIgnored(state: mxCellState | null = null) {
return false; return false;
} }
@ -158,13 +155,12 @@ class mxGuide {
* *
* Moves the <bounds> by the given <mxPoint> and returnt the snapped point. * Moves the <bounds> by the given <mxPoint> and returnt the snapped point.
*/ */
// move(bounds: mxRectangle, delta: mxPoint, gridEnabled: boolean, clone: boolean): mxPoint;
move( move(
bounds: mxRectangle | null = null, bounds: Rectangle | null = null,
delta: mxPoint, delta: Point,
gridEnabled: boolean = false, gridEnabled: boolean = false,
clone: boolean = false clone: boolean = false
) { ): Point {
if ( if (
this.states != null && this.states != null &&
(this.horizontal || this.vertical) && (this.horizontal || this.vertical) &&
@ -177,10 +173,10 @@ class mxGuide {
b.x += delta.x; b.x += delta.x;
b.y += delta.y; b.y += delta.y;
let overrideX = false; let overrideX = false;
let stateX: mxCellState | null = null; let stateX: CellState | null = null;
let valueX = null; let valueX = null;
let overrideY = false; let overrideY = false;
let stateY: mxCellState | null = null; let stateY: CellState | null = null;
let valueY = null; let valueY = null;
let ttX = tt; let ttX = tt;
let ttY = tt; let ttY = tt;
@ -192,7 +188,7 @@ class mxGuide {
const middle = b.getCenterY(); const middle = b.getCenterY();
// Snaps the left, center and right to the given x-coordinate // Snaps the left, center and right to the given x-coordinate
const snapX = (x: number, state: mxCellState, centerAlign: boolean) => { const snapX = (x: number, state: CellState, centerAlign: boolean) => {
let override = false; let override = false;
if (centerAlign && Math.abs(x - center) < ttX) { if (centerAlign && Math.abs(x - center) < ttX) {
@ -231,7 +227,7 @@ class mxGuide {
}; };
// Snaps the top, middle or bottom to the given y-coordinate // Snaps the top, middle or bottom to the given y-coordinate
const snapY = (y: number, state: mxCellState, centerAlign: boolean) => { const snapY = (y: number, state: CellState, centerAlign: boolean) => {
let override = false; let override = false;
if (centerAlign && Math.abs(y - middle) < ttY) { if (centerAlign && Math.abs(y - middle) < ttY) {
@ -323,13 +319,13 @@ class mxGuide {
if (minY != null && maxY != null) { if (minY != null && maxY != null) {
this.guideX.points = [ this.guideX.points = [
new mxPoint(valueX, minY), new Point(valueX, minY),
new mxPoint(valueX, maxY), new Point(valueX, maxY),
]; ];
} else { } else {
this.guideX.points = [ this.guideX.points = [
new mxPoint(valueX, -this.graph.panDy), new Point(valueX, -this.graph.panDy),
new mxPoint(valueX, c.scrollHeight - 3 - this.graph.panDy), new Point(valueX, c.scrollHeight - 3 - this.graph.panDy),
]; ];
} }
@ -355,13 +351,13 @@ class mxGuide {
if (minX != null && maxX != null) { if (minX != null && maxX != null) {
this.guideY.points = [ this.guideY.points = [
new mxPoint(minX, valueY), new Point(minX, valueY),
new mxPoint(maxX, valueY), new Point(maxX, valueY),
]; ];
} else { } else {
this.guideY.points = [ this.guideY.points = [
new mxPoint(-this.graph.panDx, valueY), new Point(-this.graph.panDx, valueY),
new mxPoint(c.scrollWidth - 3 - this.graph.panDx, valueY), new Point(c.scrollWidth - 3 - this.graph.panDx, valueY),
]; ];
} }
@ -380,20 +376,20 @@ class mxGuide {
* Rounds to pixels for virtual states (eg. page guides) * Rounds to pixels for virtual states (eg. page guides)
*/ */
getDelta( getDelta(
bounds: mxRectangle, bounds: Rectangle,
stateX: mxCellState | null = null, stateX: CellState | null = null,
dx: number, dx: number,
stateY: mxCellState | null = null, stateY: CellState | null = null,
dy: number dy: number
): mxPoint { ): Point {
const s = (<mxGraphView>this.graph.view).scale; const s = (<GraphView>this.graph.view).scale;
if (this.rounded || (stateX != null && stateX.cell == null)) { if (this.rounded || (stateX != null && stateX.cell == null)) {
dx = Math.round((bounds.x + dx) / s) * s - bounds.x; dx = Math.round((bounds.x + dx) / s) * s - bounds.x;
} }
if (this.rounded || (stateY != null && stateY.cell == null)) { if (this.rounded || (stateY != null && stateY.cell == null)) {
dy = Math.round((bounds.y + dy) / s) * s - bounds.y; dy = Math.round((bounds.y + dy) / s) * s - bounds.y;
} }
return new mxPoint(dx, dy); return new Point(dx, dy);
} }
/** /**
@ -402,7 +398,8 @@ class mxGuide {
* Hides all current guides. * Hides all current guides.
*/ */
// getGuideColor(state: mxCellState, horizontal: any): string; // getGuideColor(state: mxCellState, horizontal: any): string;
getGuideColor(state: mxCellState | null, horizontal: boolean | null): string { getGuideColor(state: CellState | null,
horizontal: boolean | null): string {
return GUIDE_COLOR; return GUIDE_COLOR;
} }
@ -411,7 +408,6 @@ class mxGuide {
* *
* Hides all current guides. * Hides all current guides.
*/ */
// hide(): void;
hide(): void { hide(): void {
this.setVisible(false); this.setVisible(false);
} }
@ -421,7 +417,6 @@ class mxGuide {
* *
* Shows or hides the current guides. * Shows or hides the current guides.
*/ */
// setVisible(visible: boolean): void;
setVisible(visible: boolean): void { setVisible(visible: boolean): void {
if (this.guideX != null) { if (this.guideX != null) {
(<SVGElement>this.guideX.node).style.visibility = visible (<SVGElement>this.guideX.node).style.visibility = visible
@ -440,7 +435,6 @@ class mxGuide {
* *
* Destroys all resources that this object uses. * Destroys all resources that this object uses.
*/ */
// destroy(): void;
destroy(): void { destroy(): void {
if (this.guideX != null) { if (this.guideX != null) {
this.guideX.destroy(); this.guideX.destroy();
@ -453,4 +447,4 @@ class mxGuide {
} }
} }
export default mxGuide; export default Guide;

50
packages/core/src/util/mxResources.js → packages/core/src/util/Resources.js
View File

@ -3,7 +3,7 @@
* Copyright (c) 2006-2016, Gaudenz Alder * Copyright (c) 2006-2016, Gaudenz Alder
*/ */
import mxClient from '../mxClient'; import mxClient from '../mxClient';
import { NONE } from './mxConstants'; import { NONE } from './Constants';
/** /**
* Class: mxResources * Class: mxResources
@ -58,7 +58,7 @@ import { NONE } from './mxConstants';
* To load these files asynchronously, set <mxLoadResources> to false * To load these files asynchronously, set <mxLoadResources> to false
* before loading mxClient.js and use <mxResources.loadResources> instead. * before loading mxClient.js and use <mxResources.loadResources> instead.
*/ */
const mxResources = { const Resources = {
/* /*
* Variable: resources * Variable: resources
* *
@ -129,10 +129,10 @@ const mxResources = {
*/ */
getDefaultBundle: (basename, lan) => { getDefaultBundle: (basename, lan) => {
if ( if (
mxResources.loadDefaultBundle || Resources.loadDefaultBundle ||
!mxResources.isLanguageSupported(lan) !Resources.isLanguageSupported(lan)
) { ) {
return basename + (mxResources.extension ?? mxClient.mxResourceExtension); return basename + (Resources.extension ?? mxClient.mxResourceExtension);
} }
return null; return null;
}, },
@ -167,12 +167,12 @@ const mxResources = {
} }
if ( if (
mxResources.loadSpecialBundle && Resources.loadSpecialBundle &&
mxResources.isLanguageSupported(lan) && Resources.isLanguageSupported(lan) &&
lan != mxClient.defaultLanguage lan != mxClient.defaultLanguage
) { ) {
return `${basename}_${lan}${ return `${basename}_${lan}${
mxResources.extension ?? mxClient.mxResourceExtension Resources.extension ?? mxClient.mxResourceExtension
}`; }`;
} }
return null; return null;
@ -209,16 +209,16 @@ const mxResources = {
: NONE; : NONE;
if (lan !== NONE) { if (lan !== NONE) {
const defaultBundle = mxResources.getDefaultBundle(basename, lan); const defaultBundle = Resources.getDefaultBundle(basename, lan);
const specialBundle = mxResources.getSpecialBundle(basename, lan); const specialBundle = Resources.getSpecialBundle(basename, lan);
const loadSpecialBundle = () => { const loadSpecialBundle = () => {
if (specialBundle != null) { if (specialBundle != null) {
if (callback) { if (callback) {
mxUtils.get( utils.get(
specialBundle, specialBundle,
(req) => { (req) => {
mxResources.parse(req.getText()); Resources.parse(req.getText());
callback(); callback();
}, },
() => { () => {
@ -227,10 +227,10 @@ const mxResources = {
); );
} else { } else {
try { try {
const req = mxUtils.load(specialBundle); const req = utils.load(specialBundle);
if (req.isReady()) { if (req.isReady()) {
mxResources.parse(req.getText()); Resources.parse(req.getText());
} }
} catch (e) { } catch (e) {
// ignore // ignore
@ -243,10 +243,10 @@ const mxResources = {
if (defaultBundle != null) { if (defaultBundle != null) {
if (callback) { if (callback) {
mxUtils.get( utils.get(
defaultBundle, defaultBundle,
(req) => { (req) => {
mxResources.parse(req.getText()); Resources.parse(req.getText());
loadSpecialBundle(); loadSpecialBundle();
}, },
() => { () => {
@ -255,10 +255,10 @@ const mxResources = {
); );
} else { } else {
try { try {
const req = mxUtils.load(defaultBundle); const req = utils.load(defaultBundle);
if (req.isReady()) { if (req.isReady()) {
mxResources.parse(req.getText()); Resources.parse(req.getText());
} }
loadSpecialBundle(); loadSpecialBundle();
@ -299,9 +299,9 @@ const mxResources = {
if (this.resourcesEncoded) { if (this.resourcesEncoded) {
value = value.replace(/\\(?=u[a-fA-F\d]{4})/g, '%'); value = value.replace(/\\(?=u[a-fA-F\d]{4})/g, '%');
mxResources.resources[key] = unescape(value); Resources.resources[key] = unescape(value);
} else { } else {
mxResources.resources[key] = value; Resources.resources[key] = value;
} }
} }
} }
@ -337,7 +337,7 @@ const mxResources = {
* defaultValue - Optional string that specifies the default return value. * defaultValue - Optional string that specifies the default return value.
*/ */
get: (key, params, defaultValue) => { get: (key, params, defaultValue) => {
let value = mxResources.resources[key]; let value = Resources.resources[key];
// Applies the default value if no resource was found // Applies the default value if no resource was found
if (value == null) { if (value == null) {
@ -346,7 +346,7 @@ const mxResources = {
// Replaces the placeholders with the values in the array // Replaces the placeholders with the values in the array
if (value != null && params != null) { if (value != null && params != null) {
value = mxResources.replacePlaceholders(value, params); value = Resources.replacePlaceholders(value, params);
} }
return value; return value;
@ -401,10 +401,10 @@ const mxResources = {
* callback - Callback function for asynchronous loading. * callback - Callback function for asynchronous loading.
*/ */
loadResources: (callback) => { loadResources: (callback) => {
mxResources.add(`${mxClient.basePath}/resources/editor`, null, () => { Resources.add(`${mxClient.basePath}/resources/editor`, null, () => {
mxResources.add(`${mxClient.basePath}/resources/graph`, null, callback); Resources.add(`${mxClient.basePath}/resources/graph`, null, callback);
}); });
}, },
}; };
export default mxResources; export default Resources;

4
packages/core/src/util/mxStringUtils.ts → packages/core/src/util/StringUtils.ts
View File

@ -1,5 +1,5 @@
import { NODETYPE_TEXT } from './mxConstants'; import { NODETYPE_TEXT } from './Constants';
import { getTextContent } from './mxDomUtils'; import { getTextContent } from './DomUtils';
/** /**
* Function: ltrim * Function: ltrim

146
packages/core/src/util/mxUtils.ts → packages/core/src/util/Utils.ts
View File

@ -29,17 +29,17 @@ import {
NODETYPE_ELEMENT, NODETYPE_ELEMENT,
NONE, NONE,
PAGE_FORMAT_A4_PORTRAIT, PAGE_FORMAT_A4_PORTRAIT,
} from './mxConstants'; } from './Constants';
import mxPoint from './datatypes/mxPoint'; import Point from '../view/geometry/Point';
import mxDictionary from './datatypes/mxDictionary'; import mxDictionary from './mxDictionary';
import mxCellPath from '../view/cell/mxCellPath'; import CellPath from '../view/cell/datatypes/CellPath';
import mxRectangle from './datatypes/mxRectangle'; import Rectangle from '../view/geometry/Rectangle';
import { getFunctionName } from './mxStringUtils'; import { getFunctionName } from './StringUtils';
import { getOuterHtml } from './mxDomUtils'; import { getOuterHtml } from './DomUtils';
import mxCellState from '../view/cell/mxCellState'; import CellState from '../view/cell/datatypes/CellState';
import mxCell from '../view/cell/mxCell'; import Cell from '../view/cell/datatypes/Cell';
import mxGraphModel from '../view/graph/mxGraphModel'; import Model from '../view/model/Model';
import mxGraph from '../view/graph/mxGraph'; import graph from '../view/Graph';
import type { import type {
CellStateStyles, CellStateStyles,
@ -47,7 +47,7 @@ import type {
StyleProperties, StyleProperties,
StyleValue, StyleValue,
} from '../types'; } from '../types';
import mxCellArray from "../view/cell/mxCellArray"; import CellArray from "../view/cell/datatypes/CellArray";
/** /**
* Class: mxUtils * Class: mxUtils
@ -65,7 +65,7 @@ import mxCellArray from "../view/cell/mxCellArray";
* mxUtils.error('Browser is not supported!', 200, false); * mxUtils.error('Browser is not supported!', 200, false);
* (end) * (end)
*/ */
const mxUtils = { const utils = {
/* Variable: errorResource /* Variable: errorResource
* *
* Specifies the resource key for the title of the error window. If the * Specifies the resource key for the title of the error window. If the
@ -282,14 +282,14 @@ export const getDocumentSize = () => {
const d = document.documentElement; const d = document.documentElement;
try { try {
return new mxRectangle( return new Rectangle(
0, 0,
0, 0,
b.clientWidth ?? d.clientWidth, b.clientWidth ?? d.clientWidth,
Math.max(b.clientHeight ?? 0, d.clientHeight) Math.max(b.clientHeight ?? 0, d.clientHeight)
); );
} catch (e) { } catch (e) {
return new mxRectangle(); return new Rectangle();
} }
}; };
@ -415,7 +415,7 @@ export const getColor = (array: any, key: string, defaultValue: any) => {
* a - Array of <mxPoints> to be compared. * a - Array of <mxPoints> to be compared.
* b - Array of <mxPoints> to be compared. * b - Array of <mxPoints> to be compared.
*/ */
export const equalPoints = (a: mxPoint[] | null, b: mxPoint[] | null) => { export const equalPoints = (a: Point[] | null, b: Point[] | null) => {
if ((!a && b) || (a && !b) || (a && b && a.length != b.length)) { if ((!a && b) || (a && !b) || (a && b && a.length != b.length)) {
return false; return false;
} }
@ -668,9 +668,9 @@ export const arcToCurves = (
* rotation center is given then the center of rect is used. * rotation center is given then the center of rect is used.
*/ */
export const getBoundingBox = ( export const getBoundingBox = (
rect: mxRectangle | null, rect: Rectangle | null,
rotation: number, rotation: number,
cx: mxPoint | null = null cx: Point | null = null
) => { ) => {
let result = null; let result = null;
@ -682,22 +682,22 @@ export const getBoundingBox = (
cx = cx =
cx != null cx != null
? cx ? cx
: new mxPoint(rect.x + rect.width / 2, rect.y + rect.height / 2); : new Point(rect.x + rect.width / 2, rect.y + rect.height / 2);
let p1 = new mxPoint(rect.x, rect.y); let p1 = new Point(rect.x, rect.y);
let p2 = new mxPoint(rect.x + rect.width, rect.y); let p2 = new Point(rect.x + rect.width, rect.y);
let p3 = new mxPoint(p2.x, rect.y + rect.height); let p3 = new Point(p2.x, rect.y + rect.height);
let p4 = new mxPoint(rect.x, p3.y); let p4 = new Point(rect.x, p3.y);
p1 = getRotatedPoint(p1, cos, sin, cx); p1 = getRotatedPoint(p1, cos, sin, cx);
p2 = getRotatedPoint(p2, cos, sin, cx); p2 = getRotatedPoint(p2, cos, sin, cx);
p3 = getRotatedPoint(p3, cos, sin, cx); p3 = getRotatedPoint(p3, cos, sin, cx);
p4 = getRotatedPoint(p4, cos, sin, cx); p4 = getRotatedPoint(p4, cos, sin, cx);
result = new mxRectangle(p1.x, p1.y, 0, 0); result = new Rectangle(p1.x, p1.y, 0, 0);
result.add(new mxRectangle(p2.x, p2.y, 0, 0)); result.add(new Rectangle(p2.x, p2.y, 0, 0));
result.add(new mxRectangle(p3.x, p3.y, 0, 0)); result.add(new Rectangle(p3.x, p3.y, 0, 0));
result.add(new mxRectangle(p4.x, p4.y, 0, 0)); result.add(new Rectangle(p4.x, p4.y, 0, 0));
} }
return result; return result;
@ -709,10 +709,10 @@ export const getBoundingBox = (
* Rotates the given point by the given cos and sin. * Rotates the given point by the given cos and sin.
*/ */
export const getRotatedPoint = ( export const getRotatedPoint = (
pt: mxPoint, pt: Point,
cos: number, cos: number,
sin: number, sin: number,
c = new mxPoint() c = new Point()
) => { ) => {
const x = pt.x - c.x; const x = pt.x - c.x;
const y = pt.y - c.y; const y = pt.y - c.y;
@ -720,7 +720,7 @@ export const getRotatedPoint = (
const x1 = x * cos - y * sin; const x1 = x * cos - y * sin;
const y1 = y * cos + x * sin; const y1 = y * cos + x * sin;
return new mxPoint(x1 + c.x, y1 + c.y); return new Point(x1 + c.x, y1 + c.y);
}; };
/** /**
@ -737,8 +737,8 @@ export const getRotatedPoint = (
* defaultValue - Default value to be returned. * defaultValue - Default value to be returned.
*/ */
export const getPortConstraints = ( export const getPortConstraints = (
terminal: mxCellState, terminal: CellState,
edge: mxCellState, edge: CellState,
source: boolean, source: boolean,
defaultValue: any defaultValue: any
) => { ) => {
@ -877,7 +877,7 @@ export const reversePortConstraints = (constraint: number) => {
* the specified coordinate pair. * the specified coordinate pair.
*/ */
export const findNearestSegment = ( export const findNearestSegment = (
state: mxCellState, state: CellState,
x: number, x: number,
y: number y: number
) => { ) => {
@ -913,8 +913,8 @@ export const findNearestSegment = (
* rectangle according to the respective styles in style. * rectangle according to the respective styles in style.
*/ */
export const getDirectedBounds = ( export const getDirectedBounds = (
rect: mxRectangle, rect: Rectangle,
m: mxRectangle, m: Rectangle,
style: CellStateStyles | null, style: CellStateStyles | null,
flipH: boolean, flipH: boolean,
flipV: boolean flipV: boolean
@ -946,7 +946,7 @@ export const getDirectedBounds = (
m.height = tmp; m.height = tmp;
} }
const m2 = mxRectangle.fromRectangle(m); const m2 = Rectangle.fromRectangle(m);
if (d === DIRECTION_SOUTH) { if (d === DIRECTION_SOUTH) {
m2.y = m.x; m2.y = m.x;
@ -965,7 +965,7 @@ export const getDirectedBounds = (
m2.height = m.x; m2.height = m.x;
} }
return new mxRectangle( return new Rectangle(
rect.x + m2.x, rect.x + m2.x,
rect.y + m2.y, rect.y + m2.y,
rect.width - m2.width - m2.x, rect.width - m2.width - m2.x,
@ -980,9 +980,9 @@ export const getDirectedBounds = (
* points and the line between center and point. * points and the line between center and point.
*/ */
export const getPerimeterPoint = ( export const getPerimeterPoint = (
pts: mxPoint[], pts: Point[],
center: mxPoint, center: Point,
point: mxPoint point: Point
) => { ) => {
let min = null; let min = null;
@ -1024,9 +1024,9 @@ export const getPerimeterPoint = (
* p2 - <mxPoint> that represents the second point of the segment. * p2 - <mxPoint> that represents the second point of the segment.
*/ */
export const rectangleIntersectsSegment = ( export const rectangleIntersectsSegment = (
bounds: mxRectangle, bounds: Rectangle,
p1: mxPoint, p1: Point,
p2: mxPoint p2: Point
) => { ) => {
const top = bounds.y; const top = bounds.y;
const left = bounds.x; const left = bounds.x;
@ -1102,7 +1102,7 @@ export const rectangleIntersectsSegment = (
* x - X-coordinate of the point. * x - X-coordinate of the point.
* y - Y-coordinate of the point. * y - Y-coordinate of the point.
*/ */
export const contains = (bounds: mxRectangle, x: number, y: number) => { export const contains = (bounds: Rectangle, x: number, y: number) => {
return ( return (
bounds.x <= x && bounds.x <= x &&
bounds.x + bounds.width >= x && bounds.x + bounds.width >= x &&
@ -1121,7 +1121,7 @@ export const contains = (bounds: mxRectangle, x: number, y: number) => {
* a - <mxRectangle> to be checked for intersection. * a - <mxRectangle> to be checked for intersection.
* b - <mxRectangle> to be checked for intersection. * b - <mxRectangle> to be checked for intersection.
*/ */
export const intersects = (a: mxRectangle, b: mxRectangle) => { export const intersects = (a: Rectangle, b: Rectangle) => {
let tw = a.width; let tw = a.width;
let th = a.height; let th = a.height;
let rw = b.width; let rw = b.width;
@ -1164,7 +1164,7 @@ export const intersects = (a: mxRectangle, b: mxRectangle) => {
* max - Optional max size of the hostpot. * max - Optional max size of the hostpot.
*/ */
export const intersectsHotspot = ( export const intersectsHotspot = (
state: mxCellState, state: CellState,
x: number, x: number,
y: number, y: number,
hotspot: number, hotspot: number,
@ -1201,14 +1201,14 @@ export const intersectsHotspot = (
h = Math.min(h, max); h = Math.min(h, max);
} }
const rect = new mxRectangle(cx - w / 2, cy - h / 2, w, h); const rect = new Rectangle(cx - w / 2, cy - h / 2, w, h);
const alpha = toRadians(getValue(state.style, 'rotation') || 0); const alpha = toRadians(getValue(state.style, 'rotation') || 0);
if (alpha != 0) { if (alpha != 0) {
const cos = Math.cos(-alpha); const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha); const sin = Math.sin(-alpha);
const cx = new mxPoint(state.getCenterX(), state.getCenterY()); const cx = new Point(state.getCenterX(), state.getCenterY());
const pt = getRotatedPoint(new mxPoint(x, y), cos, sin, cx); const pt = getRotatedPoint(new Point(x, y), cos, sin, cx);
x = pt.x; x = pt.x;
y = pt.y; y = pt.y;
} }
@ -1265,7 +1265,7 @@ export const getOffset = (container: HTMLElement, scrollOffset = false) => {
offsetTop += r.top; offsetTop += r.top;
} }
return new mxPoint(offsetLeft, offsetTop); return new Point(offsetLeft, offsetTop);
}; };
/** /**
@ -1289,7 +1289,7 @@ export const getDocumentScrollOrigin = (doc: Document) => {
: (document.documentElement || document.body.parentNode || document.body) : (document.documentElement || document.body.parentNode || document.body)
.scrollTop; .scrollTop;
return new mxPoint(x, y); return new Point(x, y);
}; };
/** /**
@ -1313,7 +1313,7 @@ export const getScrollOrigin = (
const doc = node != null ? node.ownerDocument : document; const doc = node != null ? node.ownerDocument : document;
const b = doc.body; const b = doc.body;
const d = doc.documentElement; const d = doc.documentElement;
const result = new mxPoint(); const result = new Point();
let fixed = false; let fixed = false;
while (node != null && node != b && node != d) { while (node != null && node != b && node != d) {
@ -1365,7 +1365,7 @@ export const convertPoint = (container: HTMLElement, x: number, y: number) => {
offset.x -= origin.x; offset.x -= origin.x;
offset.y -= origin.y; offset.y -= origin.y;
return new mxPoint(x - offset.x, y - offset.y); return new Point(x - offset.x, y - offset.y);
}; };
/** /**
@ -1448,7 +1448,7 @@ export const intersection = (
const x = x0 + ua * (x1 - x0); const x = x0 + ua * (x1 - x0);
const y = y0 + ua * (y1 - y0); const y = y0 + ua * (y1 - y0);
return new mxPoint(x, y); return new Point(x, y);
} }
// No intersection // No intersection
@ -1625,25 +1625,25 @@ export const createImage = (src: string) => {
* Sorts the given cells according to the order in the cell hierarchy. * Sorts the given cells according to the order in the cell hierarchy.
* Ascending is optional and defaults to true. * Ascending is optional and defaults to true.
*/ */
export const sortCells = (cells: mxCellArray, ascending = true): mxCellArray => { export const sortCells = (cells: CellArray, ascending = true): CellArray => {
const lookup = new mxDictionary<mxCell, string[]>(); const lookup = new mxDictionary<Cell, string[]>();
cells.sort((o1, o2) => { cells.sort((o1, o2) => {
let p1 = lookup.get(o1); let p1 = lookup.get(o1);
if (p1 == null) { if (p1 == null) {
p1 = mxCellPath.create(o1).split(mxCellPath.PATH_SEPARATOR); p1 = CellPath.create(o1).split(CellPath.PATH_SEPARATOR);
lookup.put(o1, p1); lookup.put(o1, p1);
} }
let p2 = lookup.get(o2); let p2 = lookup.get(o2);
if (p2 == null) { if (p2 == null) {
p2 = mxCellPath.create(o2).split(mxCellPath.PATH_SEPARATOR); p2 = CellPath.create(o2).split(CellPath.PATH_SEPARATOR);
lookup.put(o2, p2); lookup.put(o2, p2);
} }
const comp = mxCellPath.compare(p1, p2); const comp = CellPath.compare(p1, p2);
return comp == 0 ? 0 : comp > 0 == ascending ? 1 : -1; return comp == 0 ? 0 : comp > 0 == ascending ? 1 : -1;
}); });
@ -1787,14 +1787,14 @@ export const removeAllStylenames = (style: string) => {
* *
* Parameters: * Parameters:
* *
* model - <mxGraphModel> to execute the transaction in. * model - <Transactions> to execute the transaction in.
* cells - Array of <mxCells> to be updated. * cells - Array of <mxCells> to be updated.
* key - Key of the style to be changed. * key - Key of the style to be changed.
* value - New value for the given key. * value - New value for the given key.
*/ */
export const setCellStyles = ( export const setCellStyles = (
model: mxGraphModel, model: Model,
cells: mxCell[], cells: Cell[],
key: string, key: string,
value: any value: any
) => { ) => {
@ -1890,15 +1890,15 @@ export const setStyle = (style: string | null, key: string, value: any) => {
* *
* Parameters: * Parameters:
* *
* model - <mxGraphModel> that contains the cells. * model - <Transactions> that contains the cells.
* cells - Array of <mxCells> to change the style for. * cells - Array of <mxCells> to change the style for.
* key - Key of the style to be changed. * key - Key of the style to be changed.
* flag - Integer for the bit to be changed. * flag - Integer for the bit to be changed.
* value - Optional boolean value for the flag. * value - Optional boolean value for the flag.
*/ */
export const setCellStyleFlags = ( export const setCellStyleFlags = (
model: mxGraphModel, model: Model,
cells: mxCell[], cells: Cell[],
key: string, key: string,
flag: number, flag: number,
value: boolean value: boolean
@ -2009,7 +2009,7 @@ export const getAlignmentAsPoint = (align: string, valign: string) => {
dy = -1; dy = -1;
} }
return new mxPoint(dx, dy); return new Point(dx, dy);
}; };
/** /**
@ -2093,7 +2093,7 @@ export const getSizeForString = (
document.body.appendChild(div); document.body.appendChild(div);
// Gets the size and removes from DOM // Gets the size and removes from DOM
const size = new mxRectangle(0, 0, div.offsetWidth, div.offsetHeight); const size = new Rectangle(0, 0, div.offsetWidth, div.offsetHeight);
document.body.removeChild(div); document.body.removeChild(div);
return size; return size;
@ -2117,8 +2117,8 @@ export const getSizeForString = (
*/ */
export const getScaleForPageCount = ( export const getScaleForPageCount = (
pageCount: number, pageCount: number,
graph: mxGraph, graph: graph,
pageFormat?: mxRectangle, pageFormat?: Rectangle,
border = 0 border = 0
) => { ) => {
if (pageCount < 1) { if (pageCount < 1) {
@ -2130,7 +2130,7 @@ export const getScaleForPageCount = (
pageFormat = pageFormat =
pageFormat != null pageFormat != null
? pageFormat ? pageFormat
: new mxRectangle(...PAGE_FORMAT_A4_PORTRAIT); : new Rectangle(...PAGE_FORMAT_A4_PORTRAIT);
const availablePageWidth = pageFormat.width - border * 2; const availablePageWidth = pageFormat.width - border * 2;
const availablePageHeight = pageFormat.height - border * 2; const availablePageHeight = pageFormat.height - border * 2;
@ -2257,7 +2257,7 @@ export const getScaleForPageCount = (
* h - Optional height of the graph view. * h - Optional height of the graph view.
*/ */
export const show = ( export const show = (
graph: mxGraph, graph: graph,
doc: Document, doc: Document,
x0 = 0, x0 = 0,
y0 = 0, y0 = 0,
@ -2375,7 +2375,7 @@ export const show = (
* *
* graph - <mxGraph> to be printed. * graph - <mxGraph> to be printed.
*/ */
export const printScreen = (graph: mxGraph) => { export const printScreen = (graph: graph) => {
const wnd = window.open(); const wnd = window.open();
if (!wnd) return; if (!wnd) return;
@ -2403,4 +2403,4 @@ export const isNullish = (v: string | object | null | undefined | number) =>
export const isNotNullish = (v: string | object | null | undefined | number) => export const isNotNullish = (v: string | object | null | undefined | number) =>
!isNullish(v); !isNullish(v);
export default mxUtils; export default utils;

24
packages/core/src/util/mxXmlUtils.js → packages/core/src/util/XmlUtils.js
View File

@ -1,7 +1,7 @@
import mxPoint from './datatypes/mxPoint'; import Point from '../view/geometry/Point';
import mxTemporaryCellStates from '../view/cell/mxTemporaryCellStates'; import TemporaryCellStates from '../view/cell/TemporaryCellStates';
import mxCodec from '../serialization/mxCodec'; import mxCodec from './serialization/mxCodec';
import { DIALECT_SVG, NS_SVG } from './mxConstants'; import { DIALECT_SVG, NS_SVG } from './Constants';
/** /**
* Function: createXmlDocument * Function: createXmlDocument
@ -14,7 +14,7 @@ export const createXmlDocument = () => {
if (document.implementation && document.implementation.createDocument) { if (document.implementation && document.implementation.createDocument) {
doc = document.implementation.createDocument('', '', null); doc = document.implementation.createDocument('', '', null);
} else if ('ActiveXObject' in window) { } else if ('ActiveXObject' in window) {
doc = mxUtils.createMsXmlDocument(); doc = utils.createMsXmlDocument();
} }
return doc; return doc;
@ -46,11 +46,11 @@ export const createMsXmlDocument = () => {
* *
* (code) * (code)
* let doc = mxUtils.parseXml( * let doc = mxUtils.parseXml(
* '<mxGraphModel><root><MyDiagram id="0"><mxCell/></MyDiagram>'+ * '<Transactions><root><MyDiagram id="0"><mxCell/></MyDiagram>'+
* '<MyLayer id="1"><mxCell parent="0" /></MyLayer><MyObject id="2">'+ * '<MyLayer id="1"><mxCell parent="0" /></MyLayer><MyObject id="2">'+
* '<mxCell style="strokeColor=blue;fillColor=red" parent="1" vertex="1">'+ * '<mxCell style="strokeColor=blue;fillColor=red" parent="1" vertex="1">'+
* '<mxGeometry x="10" y="10" width="80" height="30" as="geometry"/>'+ * '<mxGeometry x="10" y="10" width="80" height="30" as="geometry"/>'+
* '</mxCell></MyObject></root></mxGraphModel>'); * '</mxCell></MyObject></root></Transactions>');
* (end) * (end)
* *
* Parameters: * Parameters:
@ -106,10 +106,10 @@ export const getViewXml = (graph, scale, cells, x0, y0) => {
// Resets the translation // Resets the translation
const translate = view.getTranslate(); const translate = view.getTranslate();
view.translate = new mxPoint(x0, y0); view.translate = new Point(x0, y0);
// Creates the temporary cell states in the view // Creates the temporary cell states in the view
const temp = new mxTemporaryCellStates(graph.getView(), scale, cells); const temp = new TemporaryCellStates(graph.getView(), scale, cells);
try { try {
const enc = new mxCodec(); const enc = new mxCodec();
@ -195,14 +195,14 @@ export const getPrettyXml = (node, tab, indent, newline, ns) => {
if (node.nodeType === NODETYPE_DOCUMENT) { if (node.nodeType === NODETYPE_DOCUMENT) {
result.push( result.push(
mxUtils.getPrettyXml(node.documentElement, tab, indent, newline, ns) utils.getPrettyXml(node.documentElement, tab, indent, newline, ns)
); );
} else if (node.nodeType === NODETYPE_DOCUMENT_FRAGMENT) { } else if (node.nodeType === NODETYPE_DOCUMENT_FRAGMENT) {
let tmp = node.firstChild; let tmp = node.firstChild;
if (tmp != null) { if (tmp != null) {
while (tmp != null) { while (tmp != null) {
result.push(mxUtils.getPrettyXml(tmp, tab, indent, newline, ns)); result.push(utils.getPrettyXml(tmp, tab, indent, newline, ns));
tmp = tmp.nextSibling; tmp = tmp.nextSibling;
} }
} }
@ -247,7 +247,7 @@ export const getPrettyXml = (node, tab, indent, newline, ns) => {
while (tmp != null) { while (tmp != null) {
result.push( result.push(
mxUtils.getPrettyXml(tmp, tab, indent + tab, newline, ns) utils.getPrettyXml(tmp, tab, indent + tab, newline, ns)
); );
tmp = tmp.nextSibling; tmp = tmp.nextSibling;
} }

14
packages/core/src/util/animate/mxAnimation.js
View File

@ -4,17 +4,17 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEventSource from '../event/mxEventSource'; import EventSource from '../../view/event/EventSource';
import mxEventObject from '../event/mxEventObject'; import EventObject from '../../view/event/EventObject';
import mxEvent from '../event/mxEvent'; import InternalEvent from '../../view/event/InternalEvent';
/** /**
* Implements a basic animation in JavaScript. * Implements a basic animation in JavaScript.
* *
* @class mxAnimation * @class mxAnimation
* @extends {mxEventSource} * @extends {EventSource}
*/ */
class mxAnimation extends mxEventSource { class mxAnimation extends EventSource {
constructor(delay) { constructor(delay) {
super(); super();
this.delay = delay != null ? delay : 20; this.delay = delay != null ? delay : 20;
@ -60,7 +60,7 @@ class mxAnimation extends mxEventSource {
*/ */
// updateAnimation(): void; // updateAnimation(): void;
updateAnimation() { updateAnimation() {
this.fireEvent(new mxEventObject(mxEvent.EXECUTE)); this.fireEvent(new EventObject(InternalEvent.EXECUTE));
} }
/** /**
@ -71,7 +71,7 @@ class mxAnimation extends mxEventSource {
if (this.thread != null) { if (this.thread != null) {
window.clearInterval(this.thread); window.clearInterval(this.thread);
this.thread = null; this.thread = null;
this.fireEvent(new mxEventObject(mxEvent.DONE)); this.fireEvent(new EventObject(InternalEvent.DONE));
} }
} }
} }

34
packages/core/src/util/animate/mxEffects.js
View File

@ -4,12 +4,12 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxUtils from '../mxUtils'; import utils from '../Utils';
import mxGeometryChange from '../../atomic_changes/mxGeometryChange'; import GeometryChange from '../../view/geometry/GeometryChange';
import mxTerminalChange from '../../atomic_changes/mxTerminalChange'; import TerminalChange from '../../view/cell/edge/TerminalChange';
import mxValueChange from '../../atomic_changes/mxValueChange'; import ValueChange from '../../view/cell/ValueChange';
import mxChildChange from '../../atomic_changes/mxChildChange'; import ChildChange from '../../view/model/ChildChange';
import mxStyleChange from '../../atomic_changes/mxStyleChange'; import StyleChange from '../../view/style/StyleChange';
/** /**
* Provides animation effects. * Provides animation effects.
@ -50,11 +50,11 @@ class mxEffects {
const change = changes[i]; const change = changes[i];
if ( if (
change instanceof mxGeometryChange || change instanceof GeometryChange ||
change instanceof mxTerminalChange || change instanceof TerminalChange ||
change instanceof mxValueChange || change instanceof ValueChange ||
change instanceof mxChildChange || change instanceof ChildChange ||
change instanceof mxStyleChange change instanceof StyleChange
) { ) {
const state = graph const state = graph
.getView() .getView()
@ -64,10 +64,10 @@ class mxEffects {
isRequired = true; isRequired = true;
if ( if (
change.constructor !== mxGeometryChange || change.constructor !== GeometryChange ||
change.cell.isEdge() change.cell.isEdge()
) { ) {
mxUtils.setOpacity(state.shape.node, (100 * step) / maxStep); utils.setOpacity(state.shape.node, (100 * step) / maxStep);
} else { } else {
const { scale } = graph.getView(); const { scale } = graph.getView();
@ -133,7 +133,7 @@ class mxEffects {
const childState = graph.getView().getState(child); const childState = graph.getView().getState(child);
if (childState != null) { if (childState != null) {
mxUtils.setOpacity(childState.shape.node, opacity); utils.setOpacity(childState.shape.node, opacity);
mxEffects.cascadeOpacity(graph, child, opacity); mxEffects.cascadeOpacity(graph, child, opacity);
} }
} }
@ -146,7 +146,7 @@ class mxEffects {
const edgeState = graph.getView().getState(edges[i]); const edgeState = graph.getView().getState(edges[i]);
if (edgeState != null) { if (edgeState != null) {
mxUtils.setOpacity(edgeState.shape.node, opacity); utils.setOpacity(edgeState.shape.node, opacity);
} }
} }
} }
@ -163,12 +163,12 @@ class mxEffects {
let opacity = from || 100; let opacity = from || 100;
mxUtils.setOpacity(node, opacity); utils.setOpacity(node, opacity);
if (isEnabled || isEnabled == null) { if (isEnabled || isEnabled == null) {
const f = () => { const f = () => {
opacity = Math.max(opacity - step, 0); opacity = Math.max(opacity - step, 0);
mxUtils.setOpacity(node, opacity); utils.setOpacity(node, opacity);
if (opacity > 0) { if (opacity > 0) {
window.setTimeout(f, delay); window.setTimeout(f, delay);

10
packages/core/src/util/animate/mxMorphing.js
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxPoint from '../datatypes/mxPoint'; import Point from '../../view/geometry/Point';
import mxCellStatePreview from '../../view/cell/mxCellStatePreview'; import CellStatePreview from '../../view/cell/CellStatePreview';
import mxAnimation from './mxAnimation'; import mxAnimation from './mxAnimation';
/** /**
@ -98,7 +98,7 @@ class mxMorphing extends mxAnimation {
*/ */
updateAnimation() { updateAnimation() {
super.updateAnimation(); super.updateAnimation();
const move = new mxCellStatePreview(this.graph); const move = new CellStatePreview(this.graph);
if (this.cells != null) { if (this.cells != null) {
// Animates the given cells individually without recursion // Animates the given cells individually without recursion
@ -191,7 +191,7 @@ class mxMorphing extends mxAnimation {
const x = state.x / scale - translate.x; const x = state.x / scale - translate.x;
const y = state.y / scale - translate.y; const y = state.y / scale - translate.y;
return new mxPoint((origin.x - x) * scale, (origin.y - y) * scale); return new Point((origin.x - x) * scale, (origin.y - y) * scale);
} }
/** /**
@ -227,7 +227,7 @@ class mxMorphing extends mxAnimation {
if (result == null) { if (result == null) {
const t = this.graph.view.getTranslate(); const t = this.graph.view.getTranslate();
result = new mxPoint(-t.x, -t.y); result = new Point(-t.x, -t.y);
} }
return result; return result;

12
packages/core/src/util/canvas/mxAbstractCanvas2D.ts
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import { arcToCurves, getRotatedPoint } from '../mxUtils'; import { arcToCurves, getRotatedPoint } from '../Utils';
import { import {
DEFAULT_FONTFAMILY, DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE, DEFAULT_FONTSIZE,
@ -13,10 +13,10 @@ import {
SHADOW_OFFSET_X, SHADOW_OFFSET_X,
SHADOW_OFFSET_Y, SHADOW_OFFSET_Y,
SHADOW_OPACITY, SHADOW_OPACITY,
} from '../mxConstants'; } from '../Constants';
import mxUrlConverter from '../network/mxUrlConverter'; import mxUrlConverter from '../network/mxUrlConverter';
import mxPoint from '../datatypes/mxPoint'; import Point from '../../view/geometry/Point';
import { clone } from '../mxCloneUtils'; import { clone } from '../CloneUtils';
import type { CanvasState, ColorValue } from '../../types'; import type { CanvasState, ColorValue } from '../../types';
@ -228,10 +228,10 @@ class mxAbstractCanvas2D {
const rad = theta * (Math.PI / 180); const rad = theta * (Math.PI / 180);
return getRotatedPoint( return getRotatedPoint(
new mxPoint(x, y), new Point(x, y),
Math.cos(rad), Math.cos(rad),
Math.sin(rad), Math.sin(rad),
new mxPoint(cx, cy) new Point(cx, cy)
); );
} }

18
packages/core/src/util/canvas/mxSvgCanvas2D.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import { getAlignmentAsPoint, isNotNullish } from '../mxUtils'; import { getAlignmentAsPoint, isNotNullish } from '../Utils';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import { import {
ABSOLUTE_LINE_HEIGHT, ABSOLUTE_LINE_HEIGHT,
@ -29,12 +29,12 @@ import {
NS_SVG, NS_SVG,
NS_XLINK, NS_XLINK,
WORD_WRAP, WORD_WRAP,
} from '../mxConstants'; } from '../Constants';
import mxRectangle from '../datatypes/mxRectangle'; import Rectangle from '../../view/geometry/Rectangle';
import mxAbstractCanvas2D from './mxAbstractCanvas2D'; import mxAbstractCanvas2D from './mxAbstractCanvas2D';
import { parseXml } from '../mxXmlUtils'; import { parseXml } from '../XmlUtils';
import { importNodeImplementation, isNode, write } from '../mxDomUtils'; import { importNodeImplementation, isNode, write } from '../DomUtils';
import { htmlEntities, trim } from '../mxStringUtils'; import { htmlEntities, trim } from '../StringUtils';
import { import {
AlignValue, AlignValue,
ColorValue, ColorValue,
@ -1769,7 +1769,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
y -= h; y -= h;
} }
bbox = new mxRectangle( bbox = new Rectangle(
(x + 1) * s.scale, (x + 1) * s.scale,
y * s.scale, y * s.scale,
(w - 2) * s.scale, (w - 2) * s.scale,
@ -1779,7 +1779,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// Uses getBBox only if inside document for correct size // Uses getBBox only if inside document for correct size
try { try {
bbox = node.getBBox(); bbox = node.getBBox();
bbox = new mxRectangle( bbox = new Rectangle(
bbox.x, bbox.x,
bbox.y + 1, bbox.y + 1,
bbox.width, bbox.width,
@ -1833,7 +1833,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
y -= h; y -= h;
} }
bbox = new mxRectangle( bbox = new Rectangle(
(x + 1) * s.scale, (x + 1) * s.scale,
(y + 2) * s.scale, (y + 2) * s.scale,
w * s.scale, w * s.scale,

4
packages/core/src/util/canvas/mxXmlCanvas2D.js
View File

@ -13,8 +13,8 @@ import {
SHADOW_OFFSET_X, SHADOW_OFFSET_X,
SHADOW_OFFSET_Y, SHADOW_OFFSET_Y,
SHADOW_OPACITY, SHADOW_OPACITY,
} from '../mxConstants'; } from '../Constants';
import { getOuterHtml } from '../mxDomUtils'; import { getOuterHtml } from '../DomUtils';
/** /**
* Class: mxXmlCanvas2D * Class: mxXmlCanvas2D

2
packages/core/src/util/dom/mxDivResizer.js
View File

@ -36,7 +36,7 @@ class mxDivResizer {
} }
this.div = div; this.div = div;
const style = mxUtils.getCurrentStyle(div); const style = utils.getCurrentStyle(div);
if (style != null) { if (style != null) {
this.resizeWidth = style.width == 'auto'; this.resizeWidth = style.width == 'auto';

8
packages/core/src/util/dom/mxDomHelpers.js
View File

@ -1,5 +1,5 @@
import mxEvent from "../event/mxEvent"; import InternalEvent from "../../view/event/InternalEvent";
import { write } from "../mxDomUtils"; import { write } from "../DomUtils";
/** /**
* Function: linkAction * Function: linkAction
@ -78,7 +78,7 @@ export const link = (parent, text, funct, pad) => {
a.style.paddingLeft = `${pad}px`; a.style.paddingLeft = `${pad}px`;
} }
mxEvent.addListener(a, 'click', funct); InternalEvent.addListener(a, 'click', funct);
write(a, text); write(a, text);
if (parent != null) { if (parent != null) {
@ -114,7 +114,7 @@ export const button = (label, funct, doc) => {
const button = doc.createElement('button'); const button = doc.createElement('button');
write(button, label); write(button, label);
mxEvent.addListener(button, 'click', evt => { InternalEvent.addListener(button, 'click', evt => {
funct(evt); funct(evt);
}); });

6
packages/core/src/util/gui/mxForm.js
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import { write, writeln } from "../mxDomUtils"; import { write, writeln } from "../DomUtils";
/** /**
* A simple class for creating HTML forms. * A simple class for creating HTML forms.
@ -55,7 +55,7 @@ class mxForm {
// Adds the ok button // Adds the ok button
let button = document.createElement('button'); let button = document.createElement('button');
write(button, mxResources.get('ok') || 'OK'); write(button, Resources.get('ok') || 'OK');
td.appendChild(button); td.appendChild(button);
mxEvent.addListener(button, 'click', () => { mxEvent.addListener(button, 'click', () => {
@ -64,7 +64,7 @@ class mxForm {
// Adds the cancel button // Adds the cancel button
button = document.createElement('button'); button = document.createElement('button');
write(button, mxResources.get('cancel') || 'Cancel'); write(button, Resources.get('cancel') || 'Cancel');
td.appendChild(button); td.appendChild(button);
mxEvent.addListener(button, 'click', () => { mxEvent.addListener(button, 'click', () => {

18
packages/core/src/util/gui/mxLog.js
View File

@ -6,9 +6,9 @@
*/ */
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import mxEvent from '../event/mxEvent'; import InternalEvent from '../../view/event/InternalEvent';
import { getInnerHtml, write } from '../mxDomUtils'; import { getInnerHtml, write } from '../DomUtils';
import mxUtils from '../mxUtils'; import utils from '../Utils';
import mxWindow, { popup } from './mxWindow'; import mxWindow, { popup } from './mxWindow';
/** /**
@ -92,7 +92,7 @@ class mxLog {
mxLog.addButton('Copy', function (evt) { mxLog.addButton('Copy', function (evt) {
try { try {
mxUtils.copy(mxLog.textarea.value); utils.copy(mxLog.textarea.value);
} catch (err) { } catch (err) {
alert(err); alert(err);
} }
@ -152,9 +152,9 @@ class mxLog {
)}px`; )}px`;
}; };
mxLog.window.addListener(mxEvent.RESIZE_END, resizeHandler); mxLog.window.addListener(InternalEvent.RESIZE_END, resizeHandler);
mxLog.window.addListener(mxEvent.MAXIMIZE, resizeHandler); mxLog.window.addListener(InternalEvent.MAXIMIZE, resizeHandler);
mxLog.window.addListener(mxEvent.NORMALIZE, resizeHandler); mxLog.window.addListener(InternalEvent.NORMALIZE, resizeHandler);
mxLog.textarea.style.height = '92px'; mxLog.textarea.style.height = '92px';
} }
@ -199,7 +199,7 @@ class mxLog {
*/ */
// static info(): void; // static info(): void;
static info() { static info() {
mxLog.writeln(mxUtils.toString(navigator)); mxLog.writeln(utils.toString(navigator));
} }
/** /**
@ -209,7 +209,7 @@ class mxLog {
static addButton(lab, funct) { static addButton(lab, funct) {
const button = document.createElement('button'); const button = document.createElement('button');
write(button, lab); write(button, lab);
mxEvent.addListener(button, 'click', funct); InternalEvent.addListener(button, 'click', funct);
mxLog.td.appendChild(button); mxLog.td.appendChild(button);
} }

38
packages/core/src/util/gui/mxPopupMenu.js
View File

@ -4,13 +4,13 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEventSource from '../event/mxEventSource'; import EventSource from '../../view/event/EventSource';
import mxUtils from '../mxUtils'; import utils from '../Utils';
import mxEventObject from '../event/mxEventObject'; import EventObject from '../../view/event/EventObject';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import mxEvent from '../event/mxEvent'; import InternalEvent from '../../view/event/InternalEvent';
import { write } from '../mxDomUtils'; import { write } from '../DomUtils';
import { isLeftMouseButton } from '../mxEventUtils'; import { isLeftMouseButton } from '../EventUtils';
/** /**
* Class: mxPopupMenu * Class: mxPopupMenu
@ -38,7 +38,7 @@ import { isLeftMouseButton } from '../mxEventUtils';
* *
* Fires after the menu has been shown in <popup>. * Fires after the menu has been shown in <popup>.
*/ */
class mxPopupMenu extends mxEventSource { class mxPopupMenu extends EventSource {
constructor(factoryMethod) { constructor(factoryMethod) {
super(); super();
this.factoryMethod = factoryMethod; this.factoryMethod = factoryMethod;
@ -70,7 +70,7 @@ class mxPopupMenu extends mxEventSource {
this.div.appendChild(this.table); this.div.appendChild(this.table);
// Disables the context menu on the outer div // Disables the context menu on the outer div
mxEvent.disableContextMenu(this.div); InternalEvent.disableContextMenu(this.div);
} }
/** /**
@ -271,7 +271,7 @@ class mxPopupMenu extends mxEventSource {
if (active != false && enabled != false) { if (active != false && enabled != false) {
let currentSelection = null; let currentSelection = null;
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
tr, tr,
evt => { evt => {
this.eventReceiver = tr; this.eventReceiver = tr;
@ -290,7 +290,7 @@ class mxPopupMenu extends mxEventSource {
} }
} }
mxEvent.consume(evt); InternalEvent.consume(evt);
}, },
evt => { evt => {
if (parent.activeRow != tr && parent.activeRow != parent) { if (parent.activeRow != tr && parent.activeRow != parent) {
@ -338,13 +338,13 @@ class mxPopupMenu extends mxEventSource {
} }
this.eventReceiver = null; this.eventReceiver = null;
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
); );
// Resets hover style because TR in IE doesn't have hover // Resets hover style because TR in IE doesn't have hover
if (!noHover) { if (!noHover) {
mxEvent.addListener(tr, 'mouseout', evt => { InternalEvent.addListener(tr, 'mouseout', evt => {
tr.className = 'mxPopupMenuItem'; tr.className = 'mxPopupMenuItem';
}); });
} }
@ -418,7 +418,7 @@ class mxPopupMenu extends mxEventSource {
// Moves the submenu to the left side if there is no space // Moves the submenu to the left side if there is no space
const left = parseInt(row.div.offsetLeft); const left = parseInt(row.div.offsetLeft);
const width = parseInt(row.div.offsetWidth); const width = parseInt(row.div.offsetWidth);
const offset = mxUtils.getDocumentScrollOrigin(document); const offset = utils.getDocumentScrollOrigin(document);
const b = document.body; const b = document.body;
const d = document.documentElement; const d = document.documentElement;
@ -432,7 +432,7 @@ class mxPopupMenu extends mxEventSource {
)}px`; )}px`;
} }
mxUtils.fit(row.div); utils.fit(row.div);
} }
} }
@ -499,7 +499,7 @@ class mxPopupMenu extends mxEventSource {
// Removes all child nodes from the existing menu // Removes all child nodes from the existing menu
while (this.tbody.firstChild != null) { while (this.tbody.firstChild != null) {
mxEvent.release(this.tbody.firstChild); InternalEvent.release(this.tbody.firstChild);
this.tbody.removeChild(this.tbody.firstChild); this.tbody.removeChild(this.tbody.firstChild);
} }
@ -508,7 +508,7 @@ class mxPopupMenu extends mxEventSource {
if (this.itemCount > 0) { if (this.itemCount > 0) {
this.showMenu(); this.showMenu();
this.fireEvent(new mxEventObject(mxEvent.SHOW)); this.fireEvent(new EventObject(InternalEvent.SHOW));
} }
} }
} }
@ -532,7 +532,7 @@ class mxPopupMenu extends mxEventSource {
showMenu() { showMenu() {
// Fits the div inside the viewport // Fits the div inside the viewport
document.body.appendChild(this.div); document.body.appendChild(this.div);
mxUtils.fit(this.div); utils.fit(this.div);
} }
/** /**
@ -549,7 +549,7 @@ class mxPopupMenu extends mxEventSource {
this.hideSubmenu(this); this.hideSubmenu(this);
this.containsItems = false; this.containsItems = false;
this.fireEvent(new mxEventObject(mxEvent.HIDE)); this.fireEvent(new EventObject(InternalEvent.HIDE));
} }
} }
@ -583,7 +583,7 @@ class mxPopupMenu extends mxEventSource {
// destroy(): void; // destroy(): void;
destroy() { destroy() {
if (this.div != null) { if (this.div != null) {
mxEvent.release(this.div); InternalEvent.release(this.div);
if (this.div.parentNode != null) { if (this.div.parentNode != null) {
this.div.parentNode.removeChild(this.div); this.div.parentNode.removeChild(this.div);

42
packages/core/src/util/gui/mxToolbar.js
View File

@ -5,14 +5,14 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxUtils from '../mxUtils'; import utils from '../Utils';
import mxEvent from '../event/mxEvent'; import InternalEvent from '../../view/event/InternalEvent';
import mxPoint from '../datatypes/mxPoint'; import Point from '../../view/geometry/Point';
import mxPopupMenu from './mxPopupMenu'; import mxPopupMenu from './mxPopupMenu';
import mxEventSource from '../event/mxEventSource'; import EventSource from '../../view/event/EventSource';
import mxEventObject from '../event/mxEventObject'; import EventObject from '../../view/event/EventObject';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import { write, writeln } from '../mxDomUtils'; import { write, writeln } from '../DomUtils';
/** /**
* Creates a toolbar inside a given DOM node. The toolbar may contain icons, * Creates a toolbar inside a given DOM node. The toolbar may contain icons,
@ -24,9 +24,9 @@ import { write, writeln } from '../mxDomUtils';
* property contains the function that was selected in <selectMode>. * property contains the function that was selected in <selectMode>.
* *
* @class mxToolbar * @class mxToolbar
* @extends {mxEventSource} * @extends {EventSource}
*/ */
class mxToolbar extends mxEventSource { class mxToolbar extends EventSource {
constructor(container) { constructor(container) {
super(); super();
this.container = container; this.container = container;
@ -102,10 +102,10 @@ class mxToolbar extends mxEventSource {
// Invokes the function on a click on the toolbar item // Invokes the function on a click on the toolbar item
if (funct != null) { if (funct != null) {
mxEvent.addListener(img, 'click', funct); InternalEvent.addListener(img, 'click', funct);
if (mxClient.IS_TOUCH) { if (mxClient.IS_TOUCH) {
mxEvent.addListener(img, 'touchend', funct); InternalEvent.addListener(img, 'touchend', funct);
} }
} }
@ -119,7 +119,7 @@ class mxToolbar extends mxEventSource {
// Highlights the toolbar item with a gray background // Highlights the toolbar item with a gray background
// while it is being clicked with the mouse // while it is being clicked with the mouse
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
img, img,
evt => { evt => {
if (pressedIcon != null) { if (pressedIcon != null) {
@ -146,7 +146,7 @@ class mxToolbar extends mxEventSource {
this.currentImg = img; this.currentImg = img;
this.menu.factoryMethod = factoryMethod; this.menu.factoryMethod = factoryMethod;
const point = new mxPoint( const point = new Point(
img.offsetLeft, img.offsetLeft,
img.offsetTop + img.offsetHeight img.offsetTop + img.offsetHeight
); );
@ -169,7 +169,7 @@ class mxToolbar extends mxEventSource {
mouseHandler mouseHandler
); );
mxEvent.addListener(img, 'mouseout', mouseHandler); InternalEvent.addListener(img, 'mouseout', mouseHandler);
return img; return img;
} }
@ -209,7 +209,7 @@ class mxToolbar extends mxEventSource {
select.className = style || 'mxToolbarCombo'; select.className = style || 'mxToolbarCombo';
this.addOption(select, title, null); this.addOption(select, title, null);
mxEvent.addListener(select, 'change', evt => { InternalEvent.addListener(select, 'change', evt => {
const value = select.options[select.selectedIndex]; const value = select.options[select.selectedIndex];
select.selectedIndex = 0; select.selectedIndex = 0;
@ -266,7 +266,7 @@ class mxToolbar extends mxEventSource {
img.setAttribute('title', title); img.setAttribute('title', title);
} }
mxEvent.addListener(img, 'click', evt => { InternalEvent.addListener(img, 'click', evt => {
let tmp = this.selectedMode.altIcon; let tmp = this.selectedMode.altIcon;
if (tmp != null) { if (tmp != null) {
@ -291,7 +291,7 @@ class mxToolbar extends mxEventSource {
img.className = `${img.initialClassName}Selected`; img.className = `${img.initialClassName}Selected`;
} }
this.fireEvent(new mxEventObject(mxEvent.SELECT)); this.fireEvent(new EventObject(InternalEvent.SELECT));
funct(); funct();
}); });
@ -333,12 +333,12 @@ class mxToolbar extends mxEventSource {
} }
if (this.enabled && toggle) { if (this.enabled && toggle) {
mxEvent.addListener(img, 'click', evt => { InternalEvent.addListener(img, 'click', evt => {
this.selectMode(img, funct); this.selectMode(img, funct);
this.noReset = false; this.noReset = false;
}); });
mxEvent.addListener(img, 'dblclick', evt => { InternalEvent.addListener(img, 'dblclick', evt => {
this.selectMode(img, funct); this.selectMode(img, funct);
this.noReset = true; this.noReset = true;
}); });
@ -384,7 +384,7 @@ class mxToolbar extends mxEventSource {
this.selectedMode.className = `${this.selectedMode.initialClassName}Selected`; this.selectedMode.className = `${this.selectedMode.initialClassName}Selected`;
} }
this.fireEvent(new mxEventObject(mxEvent.SELECT, 'function', funct)); this.fireEvent(new EventObject(InternalEvent.SELECT, 'function', funct));
} }
} }
@ -419,7 +419,7 @@ class mxToolbar extends mxEventSource {
*/ */
// addBreak(): void; // addBreak(): void;
addBreak() { addBreak() {
mxUtils.br(this.container); utils.br(this.container);
} }
/** /**
@ -440,7 +440,7 @@ class mxToolbar extends mxEventSource {
*/ */
// destroy(): void; // destroy(): void;
destroy() { destroy() {
mxEvent.release(this.container); InternalEvent.release(this.container);
this.container = null; this.container = null;
this.defaultMode = null; this.defaultMode = null;
this.defaultFunction = null; this.defaultFunction = null;

120
packages/core/src/util/gui/mxWindow.js
View File

@ -5,17 +5,17 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxRectangle from '../datatypes/mxRectangle'; import Rectangle from '../../view/geometry/Rectangle';
import mxEventObject from '../event/mxEventObject'; import EventObject from '../../view/event/EventObject';
import mxEventSource from '../event/mxEventSource'; import EventSource from '../../view/event/EventSource';
import mxUtils from '../mxUtils'; import utils from '../Utils';
import mxEvent from '../event/mxEvent'; import InternalEvent from '../../view/event/InternalEvent';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import { NODETYPE_TEXT } from '../mxConstants'; import { NODETYPE_TEXT } from '../Constants';
import { br, write } from '../mxDomUtils'; import { br, write } from '../DomUtils';
import mxResources from '../mxResources'; import Resources from '../Resources';
import { getClientX, getClientY } from '../mxEventUtils'; import { getClientX, getClientY } from '../EventUtils';
import { htmlEntities } from '../mxStringUtils'; import { htmlEntities } from '../StringUtils';
/** /**
* Basic window inside a document. * Basic window inside a document.
@ -165,9 +165,9 @@ import { htmlEntities } from '../mxStringUtils';
* Fires before the window is destroyed. This event has no properties. * Fires before the window is destroyed. This event has no properties.
* *
* @class mxWindow * @class mxWindow
* @extends mxEventSource * @extends EventSource
*/ */
class mxWindow extends mxEventSource { class mxWindow extends EventSource {
constructor( constructor(
title, title,
content, content,
@ -281,8 +281,8 @@ class mxWindow extends mxEventSource {
this.activate(); this.activate();
}; };
mxEvent.addGestureListeners(this.title, activator); InternalEvent.addGestureListeners(this.title, activator);
mxEvent.addGestureListeners(this.table, activator); InternalEvent.addGestureListeners(this.table, activator);
this.hide(); this.hide();
} }
@ -328,7 +328,7 @@ class mxWindow extends mxEventSource {
* Default is (50, 40). * Default is (50, 40).
*/ */
// minimumSize: mxRectangle; // = new mxRectangle(0, 0, 50, 40); // minimumSize: mxRectangle; // = new mxRectangle(0, 0, 50, 40);
minimumSize = new mxRectangle(0, 0, 50, 40); minimumSize = new Rectangle(0, 0, 50, 40);
/** /**
* Specifies if the window should be destroyed when it is closed. If this * Specifies if the window should be destroyed when it is closed. If this
@ -396,7 +396,7 @@ class mxWindow extends mxEventSource {
// activate(): void; // activate(): void;
activate() { activate() {
if (mxWindow.activeWindow !== this) { if (mxWindow.activeWindow !== this) {
const style = mxUtils.getCurrentStyle(this.getElement()); const style = utils.getCurrentStyle(this.getElement());
const index = style != null ? style.zIndex : 3; const index = style != null ? style.zIndex : 3;
if (mxWindow.activeWindow) { if (mxWindow.activeWindow) {
@ -412,7 +412,7 @@ class mxWindow extends mxEventSource {
mxWindow.activeWindow = this; mxWindow.activeWindow = this;
this.fireEvent( this.fireEvent(
new mxEventObject(mxEvent.ACTIVATE, 'previousWindow', previousWindow) new EventObject(InternalEvent.ACTIVATE, 'previousWindow', previousWindow)
); );
} }
} }
@ -430,7 +430,7 @@ class mxWindow extends mxEventSource {
*/ */
// fit(): void; // fit(): void;
fit() { fit() {
mxUtils.fit(this.div); utils.fit(this.div);
} }
/** /**
@ -485,9 +485,9 @@ class mxWindow extends mxEventSource {
width = this.div.offsetWidth; width = this.div.offsetWidth;
height = this.div.offsetHeight; height = this.div.offsetHeight;
mxEvent.addGestureListeners(document, null, dragHandler, dropHandler); InternalEvent.addGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new mxEventObject(mxEvent.RESIZE_START, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.RESIZE_START, 'event', evt));
mxEvent.consume(evt); InternalEvent.consume(evt);
}; };
// Adds a temporary pair of listeners to intercept // Adds a temporary pair of listeners to intercept
@ -499,8 +499,8 @@ class mxWindow extends mxEventSource {
this.setSize(width + dx, height + dy); this.setSize(width + dx, height + dy);
this.fireEvent(new mxEventObject(mxEvent.RESIZE, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.RESIZE, 'event', evt));
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
}; };
@ -508,18 +508,18 @@ class mxWindow extends mxEventSource {
if (startX != null && startY != null) { if (startX != null && startY != null) {
startX = null; startX = null;
startY = null; startY = null;
mxEvent.removeGestureListeners( InternalEvent.removeGestureListeners(
document, document,
null, null,
dragHandler, dragHandler,
dropHandler dropHandler
); );
this.fireEvent(new mxEventObject(mxEvent.RESIZE_END, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.RESIZE_END, 'event', evt));
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
}; };
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
this.resize, this.resize,
start, start,
dragHandler, dragHandler,
@ -571,7 +571,7 @@ class mxWindow extends mxEventSource {
*/ */
// getMinimumSize(): mxRectangle; // getMinimumSize(): mxRectangle;
getMinimumSize() { getMinimumSize() {
return new mxRectangle(0, 0, 0, this.title.offsetHeight); return new Rectangle(0, 0, 0, this.title.offsetHeight);
} }
/** /**
@ -623,7 +623,7 @@ class mxWindow extends mxEventSource {
this.resize.style.visibility = 'hidden'; this.resize.style.visibility = 'hidden';
} }
this.fireEvent(new mxEventObject(mxEvent.MINIMIZE, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.MINIMIZE, 'event', evt));
} else { } else {
minimized = false; minimized = false;
@ -638,13 +638,13 @@ class mxWindow extends mxEventSource {
this.resize.style.visibility = ''; this.resize.style.visibility = '';
} }
this.fireEvent(new mxEventObject(mxEvent.NORMALIZE, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.NORMALIZE, 'event', evt));
} }
mxEvent.consume(evt); InternalEvent.consume(evt);
}; };
mxEvent.addGestureListeners(this.minimize, funct); InternalEvent.addGestureListeners(this.minimize, funct);
} }
/** /**
@ -714,7 +714,7 @@ class mxWindow extends mxEventSource {
this.resize.style.visibility = 'hidden'; this.resize.style.visibility = 'hidden';
} }
const style = mxUtils.getCurrentStyle(this.contentWrapper); const style = utils.getCurrentStyle(this.contentWrapper);
if (style.overflow === 'auto' || this.resize != null) { if (style.overflow === 'auto' || this.resize != null) {
this.contentWrapper.style.height = `${ this.contentWrapper.style.height = `${
@ -724,7 +724,7 @@ class mxWindow extends mxEventSource {
}px`; }px`;
} }
this.fireEvent(new mxEventObject(mxEvent.MAXIMIZE, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.MAXIMIZE, 'event', evt));
} else { } else {
maximized = false; maximized = false;
@ -740,7 +740,7 @@ class mxWindow extends mxEventSource {
this.div.style.height = height; this.div.style.height = height;
this.div.style.width = width; this.div.style.width = width;
const style = mxUtils.getCurrentStyle(this.contentWrapper); const style = utils.getCurrentStyle(this.contentWrapper);
if (style.overflow === 'auto' || this.resize != null) { if (style.overflow === 'auto' || this.resize != null) {
this.contentWrapper.style.height = `${ this.contentWrapper.style.height = `${
@ -757,15 +757,15 @@ class mxWindow extends mxEventSource {
this.resize.style.visibility = ''; this.resize.style.visibility = '';
} }
this.fireEvent(new mxEventObject(mxEvent.NORMALIZE, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.NORMALIZE, 'event', evt));
} }
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
}; };
mxEvent.addGestureListeners(this.maximize, funct); InternalEvent.addGestureListeners(this.maximize, funct);
mxEvent.addListener(this.title, 'dblclick', funct); InternalEvent.addListener(this.title, 'dblclick', funct);
} }
/** /**
@ -775,7 +775,7 @@ class mxWindow extends mxEventSource {
installMoveHandler() { installMoveHandler() {
this.title.style.cursor = 'move'; this.title.style.cursor = 'move';
mxEvent.addGestureListeners(this.title, (evt) => { InternalEvent.addGestureListeners(this.title, (evt) => {
const startX = getClientX(evt); const startX = getClientX(evt);
const startY = getClientY(evt); const startY = getClientY(evt);
const x = this.getX(); const x = this.getX();
@ -787,24 +787,24 @@ class mxWindow extends mxEventSource {
const dx = getClientX(evt) - startX; const dx = getClientX(evt) - startX;
const dy = getClientY(evt) - startY; const dy = getClientY(evt) - startY;
this.setLocation(x + dx, y + dy); this.setLocation(x + dx, y + dy);
this.fireEvent(new mxEventObject(mxEvent.MOVE, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.MOVE, 'event', evt));
mxEvent.consume(evt); InternalEvent.consume(evt);
}; };
const dropHandler = (evt) => { const dropHandler = (evt) => {
mxEvent.removeGestureListeners( InternalEvent.removeGestureListeners(
document, document,
null, null,
dragHandler, dragHandler,
dropHandler dropHandler
); );
this.fireEvent(new mxEventObject(mxEvent.MOVE_END, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.MOVE_END, 'event', evt));
mxEvent.consume(evt); InternalEvent.consume(evt);
}; };
mxEvent.addGestureListeners(document, null, dragHandler, dropHandler); InternalEvent.addGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new mxEventObject(mxEvent.MOVE_START, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.MOVE_START, 'event', evt));
mxEvent.consume(evt); InternalEvent.consume(evt);
}); });
// Disables built-in pan and zoom in IE10 and later // Disables built-in pan and zoom in IE10 and later
@ -854,8 +854,8 @@ class mxWindow extends mxEventSource {
this.buttons.appendChild(this.closeImg); this.buttons.appendChild(this.closeImg);
mxEvent.addGestureListeners(this.closeImg, (evt) => { InternalEvent.addGestureListeners(this.closeImg, (evt) => {
this.fireEvent(new mxEventObject(mxEvent.CLOSE, 'event', evt)); this.fireEvent(new EventObject(InternalEvent.CLOSE, 'event', evt));
if (this.destroyOnClose) { if (this.destroyOnClose) {
this.destroy(); this.destroy();
@ -863,7 +863,7 @@ class mxWindow extends mxEventSource {
this.setVisible(false); this.setVisible(false);
} }
mxEvent.consume(evt); InternalEvent.consume(evt);
}); });
} }
@ -933,7 +933,7 @@ class mxWindow extends mxEventSource {
this.div.style.display = ''; this.div.style.display = '';
this.activate(); this.activate();
const style = mxUtils.getCurrentStyle(this.contentWrapper); const style = utils.getCurrentStyle(this.contentWrapper);
if ( if (
(style.overflow == 'auto' || this.resize != null) && (style.overflow == 'auto' || this.resize != null) &&
@ -946,7 +946,7 @@ class mxWindow extends mxEventSource {
}px`; }px`;
} }
this.fireEvent(new mxEventObject(mxEvent.SHOW)); this.fireEvent(new EventObject(InternalEvent.SHOW));
} }
/** /**
@ -955,7 +955,7 @@ class mxWindow extends mxEventSource {
// hide(): void; // hide(): void;
hide() { hide() {
this.div.style.display = 'none'; this.div.style.display = 'none';
this.fireEvent(new mxEventObject(mxEvent.HIDE)); this.fireEvent(new EventObject(InternalEvent.HIDE));
} }
/** /**
@ -964,10 +964,10 @@ class mxWindow extends mxEventSource {
*/ */
// destroy(): void; // destroy(): void;
destroy() { destroy() {
this.fireEvent(new mxEventObject(mxEvent.DESTROY)); this.fireEvent(new EventObject(InternalEvent.DESTROY));
if (this.div != null) { if (this.div != null) {
mxEvent.release(this.div); InternalEvent.release(this.div);
this.div.parentNode.removeChild(this.div); this.div.parentNode.removeChild(this.div);
this.div = null; this.div = null;
} }
@ -1060,7 +1060,7 @@ export const error = (message, width, close, icon) => {
div.style.padding = '20px'; div.style.padding = '20px';
const img = document.createElement('img'); const img = document.createElement('img');
img.setAttribute('src', icon || mxUtils.errorImage); img.setAttribute('src', icon || utils.errorImage);
img.setAttribute('valign', 'bottom'); img.setAttribute('valign', 'bottom');
img.style.verticalAlign = 'middle'; img.style.verticalAlign = 'middle';
div.appendChild(img); div.appendChild(img);
@ -1073,7 +1073,7 @@ export const error = (message, width, close, icon) => {
const w = document.body.clientWidth; const w = document.body.clientWidth;
const h = document.body.clientHeight || document.documentElement.clientHeight; const h = document.body.clientHeight || document.documentElement.clientHeight;
const warn = new mxWindow( const warn = new mxWindow(
mxResources.get(mxUtils.errorResource) || mxUtils.errorResource, Resources.get(utils.errorResource) || utils.errorResource,
div, div,
(w - width) / 2, (w - width) / 2,
h / 4, h / 4,
@ -1091,13 +1091,13 @@ export const error = (message, width, close, icon) => {
button.setAttribute('style', 'float:right'); button.setAttribute('style', 'float:right');
mxEvent.addListener(button, 'click', (evt) => { InternalEvent.addListener(button, 'click', (evt) => {
warn.destroy(); warn.destroy();
}); });
write( write(
button, button,
mxResources.get(mxUtils.closeResource) || mxUtils.closeResource Resources.get(utils.closeResource) || utils.closeResource
); );
tmp.appendChild(button); tmp.appendChild(button);

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

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

@ -5,8 +5,8 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import { getFunctionName } from '../mxStringUtils'; import { getFunctionName } from './StringUtils';
import { isNullish } from '../mxUtils'; import { isNullish } from './Utils';
const FIELD_NAME = 'mxObjectId'; const FIELD_NAME = 'mxObjectId';

18
packages/core/src/util/undo/mxUndoManager.js → packages/core/src/util/mxUndoManager.js
View File

@ -5,9 +5,9 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEvent from '../event/mxEvent'; import InternalEvent from '../view/event/InternalEvent';
import mxEventObject from '../event/mxEventObject'; import EventObject from '../view/event/EventObject';
import mxEventSource from '../event/mxEventSource'; import EventSource from '../view/event/EventSource';
/** /**
* @class mxUndoManager * @class mxUndoManager
@ -52,7 +52,7 @@ import mxEventSource from '../event/mxEventSource';
* The code creates a function that informs the undoManager * The code creates a function that informs the undoManager
* of an undoable edit and binds it to the undo event of * of an undoable edit and binds it to the undo event of
* {@link mxGraphModel} and {@link mxGraphView} using * {@link mxGraphModel} and {@link mxGraphView} using
* {@link mxEventSource.addListener}. * {@link EventSource.addListener}.
* *
* ### Event: mxEvent.CLEAR * ### Event: mxEvent.CLEAR
* *
@ -73,7 +73,7 @@ import mxEventSource from '../event/mxEventSource';
* Fires after an undoable edit was added to the history. The `edit` * Fires after an undoable edit was added to the history. The `edit`
* property contains the {@link mxUndoableEdit} that was added. * property contains the {@link mxUndoableEdit} that was added.
*/ */
class mxUndoManager extends mxEventSource { class mxUndoManager extends EventSource {
constructor(size) { constructor(size) {
super(); super();
this.size = size != null ? size : 100; this.size = size != null ? size : 100;
@ -115,7 +115,7 @@ class mxUndoManager extends mxEventSource {
clear() { clear() {
this.history = []; this.history = [];
this.indexOfNextAdd = 0; this.indexOfNextAdd = 0;
this.fireEvent(new mxEventObject(mxEvent.CLEAR)); this.fireEvent(new EventObject(InternalEvent.CLEAR));
} }
/** /**
@ -136,7 +136,7 @@ class mxUndoManager extends mxEventSource {
edit.undo(); edit.undo();
if (edit.isSignificant()) { if (edit.isSignificant()) {
this.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit)); this.fireEvent(new EventObject(InternalEvent.UNDO, 'edit', edit));
break; break;
} }
} }
@ -162,7 +162,7 @@ class mxUndoManager extends mxEventSource {
edit.redo(); edit.redo();
if (edit.isSignificant()) { if (edit.isSignificant()) {
this.fireEvent(new mxEventObject(mxEvent.REDO, 'edit', edit)); this.fireEvent(new EventObject(InternalEvent.REDO, 'edit', edit));
break; break;
} }
} }
@ -181,7 +181,7 @@ class mxUndoManager extends mxEventSource {
this.history.push(undoableEdit); this.history.push(undoableEdit);
this.indexOfNextAdd = this.history.length; this.indexOfNextAdd = this.history.length;
this.fireEvent(new mxEventObject(mxEvent.ADD, 'edit', undoableEdit)); this.fireEvent(new EventObject(InternalEvent.ADD, 'edit', undoableEdit));
} }
/** /**

4
packages/core/src/util/network/mxXmlRequest.js
View File

@ -2,8 +2,8 @@
* Copyright (c) 2006-2020, JGraph Ltd * Copyright (c) 2006-2020, JGraph Ltd
* Copyright (c) 2006-2020, draw.io AG * Copyright (c) 2006-2020, draw.io AG
*/ */
import { write } from '../mxDomUtils'; import { write } from '../DomUtils';
import { parseXml } from '../mxXmlUtils'; import { parseXml } from '../XmlUtils';
/** /**
* XML HTTP request wrapper. See also: {@link mxUtils.get}, {@link mxUtils.post} and * XML HTTP request wrapper. See also: {@link mxUtils.get}, {@link mxUtils.post} and

10
packages/core/src/serialization/mxCellCodec.js → packages/core/src/util/serialization/mxCellCodec.js
View File

@ -5,12 +5,12 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxCell from '../view/cell/mxCell'; import Cell from '../../view/cell/datatypes/Cell';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants'; import { NODETYPE_ELEMENT } from '../Constants';
import { removeWhitespace } from '../util/mxStringUtils'; import { removeWhitespace } from '../StringUtils';
import { importNode } from '../util/mxDomUtils'; import { importNode } from '../DomUtils';
/** /**
* Class: mxCellCodec * Class: mxCellCodec
@ -54,7 +54,7 @@ import { importNode } from '../util/mxDomUtils';
class mxCellCodec extends mxObjectCodec { class mxCellCodec extends mxObjectCodec {
constructor() { constructor() {
super( super(
new mxCell(), new Cell(),
['children', 'edges', 'overlays', 'mxTransient'], ['children', 'edges', 'overlays', 'mxTransient'],
['parent', 'source', 'target'] ['parent', 'source', 'target']
); );

6
packages/core/src/serialization/mxChildChangeCodec.js → packages/core/src/util/serialization/mxChildChangeCodec.js
View File

@ -5,10 +5,10 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxChildChange from '../atomic_changes/mxChildChange'; import ChildChange from '../../view/model/ChildChange';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants'; import { NODETYPE_ELEMENT } from '../Constants';
/** /**
* Class: mxChildChangeCodec * Class: mxChildChangeCodec
@ -31,7 +31,7 @@ import { NODETYPE_ELEMENT } from '../util/mxConstants';
class mxChildChangeCodec extends mxObjectCodec { class mxChildChangeCodec extends mxObjectCodec {
constructor() { constructor() {
super( super(
new mxChildChange(), new ChildChange(),
['model', 'child', 'previousIndex'], ['model', 'child', 'previousIndex'],
['parent', 'previous'] ['parent', 'previous']
); );

28
packages/core/src/serialization/mxCodec.js → packages/core/src/util/serialization/mxCodec.js
View File

@ -5,13 +5,13 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxCellPath from '../view/cell/mxCellPath'; import CellPath from '../../view/cell/datatypes/CellPath';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants'; import { NODETYPE_ELEMENT } from '../Constants';
import mxCell from '../view/cell/mxCell'; import Cell from '../../view/cell/datatypes/Cell';
import mxLog from '../util/gui/mxLog'; import mxLog from '../gui/mxLog';
import { getFunctionName } from '../util/mxStringUtils'; import { getFunctionName } from '../StringUtils';
import { importNode, isNode } from '../util/mxDomUtils'; import { importNode, isNode } from '../DomUtils';
const createXmlDocument = () => { const createXmlDocument = () => {
// Put here from '../util/mxXmlUtils' to eliminate circular dependency // Put here from '../util/mxXmlUtils' to eliminate circular dependency
@ -20,7 +20,7 @@ const createXmlDocument = () => {
if (document.implementation && document.implementation.createDocument) { if (document.implementation && document.implementation.createDocument) {
doc = document.implementation.createDocument('', '', null); doc = document.implementation.createDocument('', '', null);
} else if ('ActiveXObject' in window) { } else if ('ActiveXObject' in window) {
doc = mxUtils.createMsXmlDocument(); doc = utils.createMsXmlDocument();
} }
return doc; return doc;
@ -279,9 +279,9 @@ class mxCodec {
/** /**
* Returns the ID of the specified object. This implementation * Returns the ID of the specified object. This implementation
* calls {@link reference} first and if that returns null handles * calls {@link reference} first and if that returns null handles
* the object as an {@link mxCell} by returning their IDs using * the object as an {@link Cell} by returning their IDs using
* {@link mxCell.getId}. If no ID exists for the given cell, then * {@link Cell.getId}. If no ID exists for the given cell, then
* an on-the-fly ID is generated using {@link mxCellPath.create}. * an on-the-fly ID is generated using {@link CellPath.create}.
* *
* @param obj Object to return the ID for. * @param obj Object to return the ID for.
*/ */
@ -292,12 +292,12 @@ class mxCodec {
if (obj != null) { if (obj != null) {
id = this.reference(obj); id = this.reference(obj);
if (id == null && obj instanceof mxCell) { if (id == null && obj instanceof Cell) {
id = obj.getId(); id = obj.getId();
if (id == null) { if (id == null) {
// Uses an on-the-fly Id // Uses an on-the-fly Id
id = mxCellPath.create(obj); id = CellPath.create(obj);
if (id.length === 0) { if (id.length === 0) {
id = 'root'; id = 'root';
@ -444,7 +444,7 @@ class mxCodec {
* Decodes cells that have been encoded using inversion, ie. * Decodes cells that have been encoded using inversion, ie.
* where the user object is the enclosing node in the XML, * where the user object is the enclosing node in the XML,
* and restores the group and graph structure in the cells. * and restores the group and graph structure in the cells.
* Returns a new {@link mxCell} instance that represents the * Returns a new {@link Cell} instance that represents the
* given node. * given node.
* *
* @param node XML node that contains the cell data. * @param node XML node that contains the cell data.
@ -477,7 +477,7 @@ class mxCodec {
} }
if (!this.isCellCodec(decoder)) { if (!this.isCellCodec(decoder)) {
decoder = mxCodecRegistry.getCodec(mxCell); decoder = mxCodecRegistry.getCodec(Cell);
} }
cell = decoder.decode(this, node); cell = decoder.decode(this, node);

2
packages/core/src/serialization/mxCodecRegistry.js → packages/core/src/util/serialization/mxCodecRegistry.js
View File

@ -15,7 +15,7 @@ import mxObjectCodec from './mxObjectCodec';
* 1. Define a default codec with a new instance of the object to be handled. * 1. Define a default codec with a new instance of the object to be handled.
* *
* ```javascript * ```javascript
* var codec = new mxObjectCodec(new mxGraphModel()); * var codec = new mxObjectCodec(new Transactions());
* ``` * ```
* *
* 2. Define the functions required for encoding and decoding objects. * 2. Define the functions required for encoding and decoding objects.

2
packages/core/src/serialization/mxDefaultKeyHandlerCodec.js → packages/core/src/util/serialization/mxDefaultKeyHandlerCodec.js
View File

@ -6,7 +6,7 @@
*/ */
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxDefaultKeyHandler from '../editor/mxDefaultKeyHandler'; import mxDefaultKeyHandler from '../../editor/mxDefaultKeyHandler';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
/** /**

2
packages/core/src/serialization/mxDefaultPopupMenuCodec.js → packages/core/src/util/serialization/mxDefaultPopupMenuCodec.js
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxDefaultPopupMenu from '../editor/mxDefaultPopupMenu'; import mxDefaultPopupMenu from '../../editor/mxDefaultPopupMenu';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';

12
packages/core/src/serialization/mxDefaultToolbarCodec.js → packages/core/src/util/serialization/mxDefaultToolbarCodec.js
View File

@ -6,11 +6,11 @@
*/ */
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxDefaultToolbar from '../editor/mxDefaultToolbar'; import mxDefaultToolbar from '../../editor/mxDefaultToolbar';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import { getChildNodes, getTextContent } from '../util/mxDomUtils'; import { getChildNodes, getTextContent } from '../DomUtils';
import { getClientX, getClientY } from '../util/mxEventUtils'; import { getClientX, getClientY } from '../EventUtils';
import { NODETYPE_ELEMENT } from '../util/mxConstants'; import { NODETYPE_ELEMENT } from '../Constants';
/** /**
* Class: mxDefaultToolbarCodec * Class: mxDefaultToolbarCodec
@ -142,7 +142,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
into.toolbar.addLine(); into.toolbar.addLine();
} else if (node.nodeName === 'add') { } else if (node.nodeName === 'add') {
let as = node.getAttribute('as'); let as = node.getAttribute('as');
as = mxResources.get(as) || as; as = Resources.get(as) || as;
const icon = node.getAttribute('icon'); const icon = node.getAttribute('icon');
const pressedIcon = node.getAttribute('pressedIcon'); const pressedIcon = node.getAttribute('pressedIcon');
const action = node.getAttribute('action'); const action = node.getAttribute('action');
@ -242,7 +242,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
// is made in the corresponding combobox. // is made in the corresponding combobox.
mxEvent.addListener(select, 'change', () => { mxEvent.addListener(select, 'change', () => {
into.toolbar.selectMode(img, (evt) => { into.toolbar.selectMode(img, (evt) => {
const pt = mxUtils.convertPoint( const pt = utils.convertPoint(
editor.graph.container, editor.graph.container,
getClientX(evt), getClientX(evt),
getClientY(evt) getClientY(evt)

10
packages/core/src/serialization/mxEditorCodec.js → packages/core/src/util/serialization/mxEditorCodec.js
View File

@ -5,11 +5,11 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEditor from '../editor/mxEditor'; import mxEditor from '../../editor/mxEditor';
import mxWindow from '../util/gui/mxWindow'; import mxWindow from '../gui/mxWindow';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import { getChildNodes } from '../util/mxDomUtils'; import { getChildNodes } from '../DomUtils';
/** /**
* Class: mxEditorCodec * Class: mxEditorCodec
@ -165,7 +165,7 @@ class mxEditorCodec extends mxObjectCodec {
element.style.cssText = style; element.style.cssText = style;
const wnd = new mxWindow( const wnd = new mxWindow(
mxResources.get(as) || as, Resources.get(as) || as,
element, element,
x, x,
y, y,
@ -190,7 +190,7 @@ class mxEditorCodec extends mxObjectCodec {
editor.setMapContainer(element); editor.setMapContainer(element);
} }
} else if (tmp.nodeName === 'resource') { } else if (tmp.nodeName === 'resource') {
mxResources.add(tmp.getAttribute('basename')); Resources.add(tmp.getAttribute('basename'));
} else if (tmp.nodeName === 'stylesheet') { } else if (tmp.nodeName === 'stylesheet') {
mxClient.link('stylesheet', tmp.getAttribute('name')); mxClient.link('stylesheet', tmp.getAttribute('name'));
} }

26
packages/core/src/serialization/mxGenericChangeCodec.js → packages/core/src/util/serialization/mxGenericChangeCodec.js
View File

@ -6,14 +6,14 @@
*/ */
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxValueChange from '../atomic_changes/mxValueChange'; import ValueChange from '../../view/cell/ValueChange';
import mxStyleChange from '../atomic_changes/mxStyleChange'; import StyleChange from '../../view/style/StyleChange';
import mxGeometryChange from '../atomic_changes/mxGeometryChange'; import GeometryChange from '../../view/geometry/GeometryChange';
import mxCollapseChange from '../atomic_changes/mxCollapseChange'; import CollapseChange from '../../view/folding/CollapseChange';
import mxVisibleChange from '../atomic_changes/mxVisibleChange'; import VisibleChange from '../../view/style/VisibleChange';
import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange'; import CellAttributeChange from '../../view/cell/CellAttributeChange';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import { isNode } from '../util/mxDomUtils'; import { isNode } from '../DomUtils';
/** /**
* Class: mxGenericChangeCodec * Class: mxGenericChangeCodec
@ -67,22 +67,22 @@ class mxGenericChangeCodec extends mxObjectCodec {
// Registers the codecs // Registers the codecs
mxCodecRegistry.register( mxCodecRegistry.register(
new mxGenericChangeCodec(new mxValueChange(), 'value') new mxGenericChangeCodec(new ValueChange(), 'value')
); );
mxCodecRegistry.register( mxCodecRegistry.register(
new mxGenericChangeCodec(new mxStyleChange(), 'style') new mxGenericChangeCodec(new StyleChange(), 'style')
); );
mxCodecRegistry.register( mxCodecRegistry.register(
new mxGenericChangeCodec(new mxGeometryChange(), 'geometry') new mxGenericChangeCodec(new GeometryChange(), 'geometry')
); );
mxCodecRegistry.register( mxCodecRegistry.register(
new mxGenericChangeCodec(new mxCollapseChange(), 'collapsed') new mxGenericChangeCodec(new CollapseChange(), 'collapsed')
); );
mxCodecRegistry.register( mxCodecRegistry.register(
new mxGenericChangeCodec(new mxVisibleChange(), 'visible') new mxGenericChangeCodec(new VisibleChange(), 'visible')
); );
mxCodecRegistry.register( mxCodecRegistry.register(
new mxGenericChangeCodec(new mxCellAttributeChange(), 'value') new mxGenericChangeCodec(new CellAttributeChange(), 'value')
); );
export default mxGenericChangeCodec; export default mxGenericChangeCodec;

4
packages/core/src/serialization/mxGraphCodec.js → packages/core/src/util/serialization/mxGraphCodec.js
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraph from '../view/graph/mxGraph'; import graph from '../../view/Graph';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
@ -28,7 +28,7 @@ import mxObjectCodec from './mxObjectCodec';
*/ */
class mxGraphCodec extends mxObjectCodec { class mxGraphCodec extends mxObjectCodec {
constructor() { constructor() {
super(new mxGraph(), [ super(new graph(), [
'graphListeners', 'graphListeners',
'eventListeners', 'eventListeners',
'view', 'view',

8
packages/core/src/serialization/mxGraphViewCodec.js → packages/core/src/util/serialization/mxGraphViewCodec.js
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphView from '../view/graph/mxGraphView'; import GraphView from '../../view/view/GraphView';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
@ -41,9 +41,9 @@ class mxGraphViewCodec extends mxObjectCodec {
* Recursively encodes the specifed cell. Uses layer * Recursively encodes the specifed cell. Uses layer
* as the default nodename. If the cell's parent is * as the default nodename. If the cell's parent is
* null, then graph is used for the nodename. If * null, then graph is used for the nodename. If
* <mxGraphModel.isEdge> returns true for the cell, * <Transactions.isEdge> returns true for the cell,
* then edge is used for the nodename, else if * then edge is used for the nodename, else if
* <mxGraphModel.isVertex> returns true for the cell, * <Transactions.isVertex> returns true for the cell,
* then vertex is used for the nodename. * then vertex is used for the nodename.
* *
* <mxGraph.getLabel> is used to create the label * <mxGraph.getLabel> is used to create the label
@ -107,7 +107,7 @@ class mxGraphViewCodec extends mxObjectCodec {
// Tries to turn objects and functions into strings // Tries to turn objects and functions into strings
if (typeof value === 'function' && typeof value === 'object') { if (typeof value === 'function' && typeof value === 'object') {
value = mxStyleRegistry.getName(value); value = StyleRegistry.getName(value);
} }
if ( if (

8
packages/core/src/serialization/mxModelCodec.js → packages/core/src/util/serialization/mxModelCodec.js
View File

@ -5,26 +5,26 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphModel from '../view/graph/mxGraphModel'; import Model from '../../view/model/Model';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
/** /**
* Class: mxModelCodec * Class: mxModelCodec
* *
* Codec for <mxGraphModel>s. This class is created and registered * Codec for <Transactions>s. This class is created and registered
* dynamically at load time and used implicitly via <mxCodec> * dynamically at load time and used implicitly via <mxCodec>
* and the <mxCodecRegistry>. * and the <mxCodecRegistry>.
*/ */
class mxModelCodec extends mxObjectCodec { class mxModelCodec extends mxObjectCodec {
constructor() { constructor() {
super(new mxGraphModel()); super(new Model());
} }
/** /**
* Function: encodeObject * Function: encodeObject
* *
* Encodes the given <mxGraphModel> by writing a (flat) XML sequence of * Encodes the given <Transactions> by writing a (flat) XML sequence of
* cell nodes as produced by the <mxCellCodec>. The sequence is * cell nodes as produced by the <mxCellCodec>. The sequence is
* wrapped-up in a node with the name root. * wrapped-up in a node with the name root.
*/ */

26
packages/core/src/serialization/mxObjectCodec.js → packages/core/src/util/serialization/mxObjectCodec.js
View File

@ -5,13 +5,13 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxObjectIdentity from '../util/datatypes/mxObjectIdentity'; import mxObjectIdentity from '../mxObjectIdentity';
import mxLog from '../util/gui/mxLog'; import mxLog from '../gui/mxLog';
import mxGeometry from '../util/datatypes/mxGeometry'; import Geometry from '../../view/geometry/Geometry';
import mxPoint from '../util/datatypes/mxPoint'; import Point from '../../view/geometry/Point';
import { NODETYPE_ELEMENT } from '../util/mxConstants'; import { NODETYPE_ELEMENT } from '../Constants';
import mxUtils from '../util/mxUtils'; import utils from '../Utils';
import { getTextContent } from '../util/mxDomUtils'; import { getTextContent } from '../DomUtils';
/** /**
* Generic codec for JavaScript objects that implements a mapping between * Generic codec for JavaScript objects that implements a mapping between
@ -398,7 +398,7 @@ class mxObjectCodec {
const value = obj[name]; const value = obj[name];
if (value != null && !this.isExcluded(obj, name, value, true)) { if (value != null && !this.isExcluded(obj, name, value, true)) {
if (mxUtils.isInteger(name)) { if (utils.isInteger(name)) {
name = null; name = null;
} }
@ -570,14 +570,14 @@ class mxObjectCodec {
isNumericAttribute(dec, attr, obj) { isNumericAttribute(dec, attr, obj) {
// Handles known numeric attributes for generic objects // Handles known numeric attributes for generic objects
const result = const result =
(obj.constructor === mxGeometry && (obj.constructor === Geometry &&
(attr.name === 'x' || (attr.name === 'x' ||
attr.name === 'y' || attr.name === 'y' ||
attr.name === 'width' || attr.name === 'width' ||
attr.name === 'height')) || attr.name === 'height')) ||
(obj.constructor === mxPoint && (obj.constructor === Point &&
(attr.name === 'x' || attr.name === 'y')) || (attr.name === 'x' || attr.name === 'y')) ||
mxUtils.isNumeric(attr.value); utils.isNumeric(attr.value);
return result; return result;
} }
@ -637,7 +637,7 @@ class mxObjectCodec {
* - If the object is an array and the variable name is empty then the * - If the object is an array and the variable name is empty then the
* value or child object is appended to the array. * value or child object is appended to the array.
* - If an add child has no value or the object is not an array then * - If an add child has no value or the object is not an array then
* the child text content is evaluated using {@link mxUtils.eval}. * the child text content is evaluated using {@link utils.eval}.
* *
* For add nodes where the object is not an array and the variable name * For add nodes where the object is not an array and the variable name
* is defined, the default mechanism is used, allowing to override/add * is defined, the default mechanism is used, allowing to override/add
@ -880,7 +880,7 @@ class mxObjectCodec {
const name = node.getAttribute('name'); const name = node.getAttribute('name');
if (name != null) { if (name != null) {
try { try {
const xml = mxUtils.load(name).getDocumentElement(); const xml = utils.load(name).getDocumentElement();
if (xml != null) { if (xml != null) {
dec.decode(xml, into); dec.decode(xml, into);
} }

6
packages/core/src/serialization/mxRootChangeCodec.js → packages/core/src/util/serialization/mxRootChangeCodec.js
View File

@ -5,9 +5,9 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxRootChange from '../atomic_changes/mxRootChange'; import RootChange from '../../view/model/RootChange';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants'; import { NODETYPE_ELEMENT } from '../Constants';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
/** /**
@ -25,7 +25,7 @@ import mxObjectCodec from './mxObjectCodec';
*/ */
class mxRootChangeCodec extends mxObjectCodec { class mxRootChangeCodec extends mxObjectCodec {
constructor() { constructor() {
super(new mxRootChange(), ['model', 'previous', 'root']); super(new RootChange(), ['model', 'previous', 'root']);
} }
/** /**

18
packages/core/src/serialization/mxStylesheetCodec.js → packages/core/src/util/serialization/mxStylesheetCodec.js
View File

@ -5,14 +5,14 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxStylesheet from '../util/datatypes/style/mxStylesheet'; import Stylesheet from '../../view/style/Stylesheet';
import mxUtils from '../util/mxUtils'; import utils from '../Utils';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants'; import { NODETYPE_ELEMENT } from '../Constants';
import mxLog from '../util/gui/mxLog'; import mxLog from '../gui/mxLog';
import mxStyleRegistry from '../util/datatypes/style/mxStyleRegistry'; import StyleRegistry from '../../view/style/StyleRegistry';
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import { getTextContent } from '../util/mxDomUtils'; import { getTextContent } from '../DomUtils';
/** /**
* Class: mxStylesheetCodec * Class: mxStylesheetCodec
@ -23,7 +23,7 @@ import { getTextContent } from '../util/mxDomUtils';
*/ */
class mxStylesheetCodec extends mxObjectCodec { class mxStylesheetCodec extends mxObjectCodec {
constructor() { constructor() {
super(new mxStylesheet()); super(new Stylesheet());
} }
/** /**
@ -145,7 +145,7 @@ class mxStylesheetCodec extends mxObjectCodec {
if (as != null) { if (as != null) {
const extend = node.getAttribute('extend'); const extend = node.getAttribute('extend');
let style = extend != null ? mxUtils.clone(obj.styles[extend]) : null; let style = extend != null ? utils.clone(obj.styles[extend]) : null;
if (style == null) { if (style == null) {
if (extend != null) { if (extend != null) {
@ -176,7 +176,7 @@ class mxStylesheetCodec extends mxObjectCodec {
} else { } else {
value = entry.getAttribute('value'); value = entry.getAttribute('value');
if (mxUtils.isNumeric(value)) { if (utils.isNumeric(value)) {
value = parseFloat(value); value = parseFloat(value);
} }
} }

4
packages/core/src/serialization/mxTerminalChangeCodec.js → packages/core/src/util/serialization/mxTerminalChangeCodec.js
View File

@ -6,7 +6,7 @@
*/ */
import mxObjectCodec from './mxObjectCodec'; import mxObjectCodec from './mxObjectCodec';
import mxTerminalChange from '../atomic_changes/mxTerminalChange'; import TerminalChange from '../../view/cell/edge/TerminalChange';
import mxCodecRegistry from './mxCodecRegistry'; import mxCodecRegistry from './mxCodecRegistry';
/** /**
@ -28,7 +28,7 @@ import mxCodecRegistry from './mxCodecRegistry';
*/ */
class mxTerminalChangeCodec extends mxObjectCodec { class mxTerminalChangeCodec extends mxObjectCodec {
constructor() { constructor() {
super(new mxTerminalChange(), ['model', 'previous'], ['cell', 'terminal']); super(new TerminalChange(), ['model', 'previous'], ['cell', 'terminal']);
} }
/** /**

6
packages/core/src/util/storage/mxAutoSaveManager.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEventSource from '../event/mxEventSource'; import EventSource from '../../view/event/EventSource';
/** /**
* Manager for automatically saving diagrams. The <save> hook must be * Manager for automatically saving diagrams. The <save> hook must be
@ -21,9 +21,9 @@ import mxEventSource from '../event/mxEventSource';
* ``` * ```
* *
* @class mxAutoSaveManager * @class mxAutoSaveManager
* @extends mxEventSource * @extends EventSource
*/ */
class mxAutoSaveManager extends mxEventSource { class mxAutoSaveManager extends EventSource {
constructor(graph) { constructor(graph) {
super(); super();

40
packages/core/src/util/storage/mxClipboard.ts
View File

@ -5,9 +5,9 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraph from '../../view/graph/mxGraph'; import graph from '../../view/Graph';
import mxGraphModel from "../../view/graph/mxGraphModel"; import Model from "../../view/model/Model";
import mxCellArray from "../../view/cell/mxCellArray"; import CellArray from "../../view/cell/datatypes/CellArray";
/** /**
* @class * @class
@ -25,8 +25,8 @@ import mxCellArray from "../../view/cell/mxCellArray";
* This copies the selection cells from the graph to the clipboard and * This copies the selection cells from the graph to the clipboard and
* pastes them into graph2. * pastes them into graph2.
* *
* For fine-grained control of the clipboard data the {@link mxGraph.canExportCell} * For fine-grained control of the clipboard data the {@link graph.canExportCell}
* and {@link mxGraph.canImportCell} functions can be overridden. * and {@link graph.canImportCell} functions can be overridden.
* *
* To restore previous parents for pasted cells, the implementation for * To restore previous parents for pasted cells, the implementation for
* {@link copy} and {@link paste} can be changed as follows. * {@link copy} and {@link paste} can be changed as follows.
@ -96,19 +96,19 @@ class mxClipboard {
/** /**
* Holds the array of {@link mxCell} currently in the clipboard. * Holds the array of {@link mxCell} currently in the clipboard.
*/ */
static cells: mxCellArray | null = null; static cells: CellArray | null = null;
/** /**
* Sets the cells in the clipboard. Fires a {@link mxEvent.CHANGE} event. * Sets the cells in the clipboard. Fires a {@link mxEvent.CHANGE} event.
*/ */
static setCells(cells: mxCellArray | null): void { static setCells(cells: CellArray | null): void {
mxClipboard.cells = cells; mxClipboard.cells = cells;
} }
/** /**
* Returns the cells in the clipboard. * Returns the cells in the clipboard.
*/ */
static getCells(): mxCellArray | null { static getCells(): CellArray | null {
return mxClipboard.cells; return mxClipboard.cells;
} }
@ -124,10 +124,10 @@ class mxClipboard {
* If cells is null then the selection cells of the graph will * If cells is null then the selection cells of the graph will
* be used. Returns the cells that have been cut from the graph. * be used. Returns the cells that have been cut from the graph.
* *
* @param graph - {@link mxGraph} that contains the cells to be cut. * @param graph - {@link graph} that contains the cells to be cut.
* @param cells - Optional array of {@link mxCell} to be cut. * @param cells - Optional array of {@link mxCell} to be cut.
*/ */
static cut(graph: mxGraph, cells?: mxCellArray | null): mxCellArray | null { static cut(graph: graph, cells?: CellArray | null): CellArray | null {
cells = mxClipboard.copy(graph, cells); cells = mxClipboard.copy(graph, cells);
mxClipboard.insertCount = 0; mxClipboard.insertCount = 0;
mxClipboard.removeCells(graph, cells); mxClipboard.removeCells(graph, cells);
@ -139,10 +139,10 @@ class mxClipboard {
* Hook to remove the given cells from the given graph after * Hook to remove the given cells from the given graph after
* a cut operation. * a cut operation.
* *
* @param graph - {@link mxGraph} that contains the cells to be cut. * @param graph - {@link graph} that contains the cells to be cut.
* @param cells - Array of {@link mxCell} to be cut. * @param cells - Array of {@link mxCell} to be cut.
*/ */
static removeCells(graph: mxGraph, cells: mxCellArray | null): void { static removeCells(graph: graph, cells: CellArray | null): void {
graph.removeCells(cells); graph.removeCells(cells);
} }
@ -151,14 +151,14 @@ class mxClipboard {
* graph to {@link cells}. Returns the original array of cells that has * graph to {@link cells}. Returns the original array of cells that has
* been cloned. Descendants of cells in the array are ignored. * been cloned. Descendants of cells in the array are ignored.
* *
* @param graph - {@link mxGraph} that contains the cells to be copied. * @param graph - {@link graph} that contains the cells to be copied.
* @param cells - Optional array of {@link mxCell} to be copied. * @param cells - Optional array of {@link mxCell} to be copied.
*/ */
static copy(graph: mxGraph, cells?: mxCellArray | null): mxCellArray | null { static copy(graph: graph, cells?: CellArray | null): CellArray | null {
cells = cells || graph.getSelectionCells(); cells = cells || graph.getSelectionCells();
const result = (<mxCellArray>graph.getExportableCells(cells)).getTopmostCells(); const result = (<CellArray>graph.getExportableCells(cells)).getTopmostCells();
mxClipboard.insertCount = 1; mxClipboard.insertCount = 1;
mxClipboard.setCells(graph.cloneCells(<mxCellArray>result)); mxClipboard.setCells(graph.cloneCells(<CellArray>result));
return result; return result;
} }
@ -169,12 +169,12 @@ class mxClipboard {
* are no longer in the graph or invisible then the * are no longer in the graph or invisible then the
* cells are added to the graph's default or into the * cells are added to the graph's default or into the
* swimlane under the cell's new location if one exists. * swimlane under the cell's new location if one exists.
* The cells are added to the graph using {@link mxGraph.importCells} * The cells are added to the graph using {@link graph.importCells}
* and returned. * and returned.
* *
* @param graph - {@link mxGraph} to paste the {@link cells} into. * @param graph - {@link graph} to paste the {@link cells} into.
*/ */
static paste(graph: mxGraph): mxCellArray | null { static paste(graph: graph): CellArray | null {
let cells = null; let cells = null;
if (!mxClipboard.isEmpty()) { if (!mxClipboard.isEmpty()) {
@ -186,7 +186,7 @@ class mxClipboard {
// Increments the counter and selects the inserted cells // Increments the counter and selects the inserted cells
mxClipboard.insertCount++; mxClipboard.insertCount++;
graph.setSelectionCells(<mxCellArray>cells); graph.setSelectionCells(<CellArray>cells);
} }
return cells; return cells;

3653
packages/core/src/view/Graph.ts Normal file
View File

File diff suppressed because it is too large Load Diff

78
packages/core/src/handler/mxGraphHandler.js → packages/core/src/view/GraphHandler.js
View File

@ -6,11 +6,11 @@
*/ */
import mxClient from '../mxClient'; import mxClient from '../mxClient';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from './event/InternalEvent';
import mxUtils from '../util/mxUtils'; import utils from '../util/Utils';
import mxRectangleShape from '../shape/node/mxRectangleShape'; import RectangleShape from './geometry/shape/node/RectangleShape';
import mxGuide from '../util/mxGuide'; import mxGuide from '../util/Guide';
import mxPoint from '../util/datatypes/mxPoint'; import Point from './geometry/Point';
import { import {
CURSOR_MOVABLE_EDGE, CURSOR_MOVABLE_EDGE,
CURSOR_MOVABLE_VERTEX, CURSOR_MOVABLE_VERTEX,
@ -19,16 +19,16 @@ import {
DROP_TARGET_COLOR, DROP_TARGET_COLOR,
INVALID_CONNECT_TARGET_COLOR, INVALID_CONNECT_TARGET_COLOR,
VALID_COLOR, VALID_COLOR,
} from '../util/mxConstants'; } from '../util/Constants';
import mxDictionary from '../util/datatypes/mxDictionary'; import mxDictionary from '../util/mxDictionary';
import mxCellHighlight from './mxCellHighlight'; import mxCellHighlight from './selection/mxCellHighlight';
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from './geometry/Rectangle';
import { import {
getClientX, getClientX,
getClientY, getClientY,
isAltDown, isAltDown,
isMultiTouchEvent, isMultiTouchEvent,
} from '../util/mxEventUtils'; } from '../util/EventUtils';
/** /**
* Class: mxGraphHandler * Class: mxGraphHandler
@ -50,7 +50,7 @@ import {
* *
* graph - Reference to the enclosing <mxGraph>. * graph - Reference to the enclosing <mxGraph>.
*/ */
class mxGraphHandler { class GraphHandler {
constructor(graph) { constructor(graph) {
this.graph = graph; this.graph = graph;
this.graph.addMouseListener(this); this.graph.addMouseListener(this);
@ -63,14 +63,14 @@ class mxGraphHandler {
} }
}; };
this.graph.addListener(mxEvent.PAN, this.panHandler); this.graph.addListener(InternalEvent.PAN, this.panHandler);
// Handles escape keystrokes // Handles escape keystrokes
this.escapeHandler = (sender, evt) => { this.escapeHandler = (sender, evt) => {
this.reset(); this.reset();
}; };
this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler); this.graph.addListener(InternalEvent.ESCAPE, this.escapeHandler);
// Updates the preview box for remote changes // Updates the preview box for remote changes
this.refreshHandler = (sender, evt) => { this.refreshHandler = (sender, evt) => {
@ -116,8 +116,8 @@ class mxGraphHandler {
}, 0); }, 0);
}; };
this.graph.getModel().addListener(mxEvent.CHANGE, this.refreshHandler); this.graph.getModel().addListener(InternalEvent.CHANGE, this.refreshHandler);
this.graph.addListener(mxEvent.REFRESH, this.refreshHandler); this.graph.addListener(InternalEvent.REFRESH, this.refreshHandler);
this.keyHandler = (e) => { this.keyHandler = (e) => {
if ( if (
@ -140,8 +140,8 @@ class mxGraphHandler {
}; };
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
mxEvent.addListener(document, 'keydown', this.keyHandler); InternalEvent.addListener(document, 'keydown', this.keyHandler);
mxEvent.addListener(document, 'keyup', this.keyHandler); InternalEvent.addListener(document, 'keyup', this.keyHandler);
} }
} }
@ -663,7 +663,7 @@ class mxGraphHandler {
} }
this.cellWasClicked = true; this.cellWasClicked = true;
this.consumeMouseEvent(mxEvent.MOUSE_DOWN, me); this.consumeMouseEvent(InternalEvent.MOUSE_DOWN, me);
} }
} }
} }
@ -788,7 +788,7 @@ class mxGraphHandler {
} }
if (result == null) { if (result == null) {
result = mxRectangle.fromRectangle(bbox); result = Rectangle.fromRectangle(bbox);
} else { } else {
result.add(bbox); result.add(bbox);
} }
@ -807,7 +807,7 @@ class mxGraphHandler {
*/ */
// createPreviewShape(bounds: mxRectangle): mxRectangleShape; // createPreviewShape(bounds: mxRectangle): mxRectangleShape;
createPreviewShape(bounds) { createPreviewShape(bounds) {
const shape = new mxRectangleShape(bounds, null, this.previewColor); const shape = new RectangleShape(bounds, null, this.previewColor);
shape.isDashed = true; shape.isDashed = true;
if (this.htmlPreview) { if (this.htmlPreview) {
@ -844,7 +844,7 @@ class mxGraphHandler {
// start(cell: mxCell, x: number, y: number): void; // start(cell: mxCell, x: number, y: number): void;
start(cell, x, y, cells) { start(cell, x, y, cells) {
this.cell = cell; this.cell = cell;
this.first = mxUtils.convertPoint(this.graph.container, x, y); this.first = utils.convertPoint(this.graph.container, x, y);
this.cells = cells != null ? cells : this.getCells(this.cell); this.cells = cells != null ? cells : this.getCells(this.cell);
this.bounds = this.graph.getView().getBounds(this.cells); this.bounds = this.graph.getView().getBounds(this.cells);
this.pBounds = this.getPreviewBounds(this.cells); this.pBounds = this.getPreviewBounds(this.cells);
@ -962,13 +962,13 @@ class mxGraphHandler {
*/ */
// getDelta(me: mxMouseEvent): mxPoint; // getDelta(me: mxMouseEvent): mxPoint;
getDelta(me) { getDelta(me) {
const point = mxUtils.convertPoint( const point = utils.convertPoint(
this.graph.container, this.graph.container,
me.getX(), me.getX(),
me.getY() me.getY()
); );
return new mxPoint( return new point(
point.x - this.first.x - this.graph.panDx, point.x - this.first.x - this.graph.panDx,
point.y - this.first.y - this.graph.panDy point.y - this.first.y - this.graph.panDy
); );
@ -1163,12 +1163,12 @@ class mxGraphHandler {
} }
this.updateHint(me); this.updateHint(me);
this.consumeMouseEvent(mxEvent.MOUSE_MOVE, me); this.consumeMouseEvent(InternalEvent.MOUSE_MOVE, me);
// Cancels the bubbling of events to the container so // Cancels the bubbling of events to the container so
// that the droptarget is not reset due to an mouseMove // that the droptarget is not reset due to an mouseMove
// fired on the container with no associated state. // fired on the container with no associated state.
mxEvent.consume(me.getEvent()); InternalEvent.consume(me.getEvent());
} else if ( } else if (
(this.isMoveEnabled() || this.isCloneEnabled()) && (this.isMoveEnabled() || this.isCloneEnabled()) &&
this.updateCursor && this.updateCursor &&
@ -1225,7 +1225,7 @@ class mxGraphHandler {
// updatePreviewShape(): void; // updatePreviewShape(): void;
updatePreviewShape() { updatePreviewShape() {
if (this.shape != null && this.pBounds != null) { if (this.shape != null && this.pBounds != null) {
this.shape.bounds = new mxRectangle( this.shape.bounds = new Rectangle(
Math.round(this.pBounds.x + this.currentDx), Math.round(this.pBounds.x + this.currentDx),
Math.round(this.pBounds.y + this.currentDy), Math.round(this.pBounds.y + this.currentDy),
this.pBounds.width, this.pBounds.width,
@ -1340,7 +1340,7 @@ class mxGraphHandler {
for (let j = 0; j < geometry.points.length; j++) { for (let j = 0; j < geometry.points.length; j++) {
if (geometry.points[j] != null) { if (geometry.points[j] != null) {
points.push( points.push(
new mxPoint( new Point(
geometry.points[j].x + dx / s, geometry.points[j].x + dx / s,
geometry.points[j].y + dy / s geometry.points[j].y + dy / s
) )
@ -1356,7 +1356,7 @@ class mxGraphHandler {
if (source == null || !this.isCellMoving(source.cell)) { if (source == null || !this.isCellMoving(source.cell)) {
const pt0 = pts[0]; const pt0 = pts[0];
state.setAbsoluteTerminalPoint( state.setAbsoluteTerminalPoint(
new mxPoint(pt0.x + dx, pt0.y + dy), new Point(pt0.x + dx, pt0.y + dy),
true true
); );
source = null; source = null;
@ -1372,7 +1372,7 @@ class mxGraphHandler {
if (target == null || !this.isCellMoving(target.cell)) { if (target == null || !this.isCellMoving(target.cell)) {
const ptn = pts[pts.length - 1]; const ptn = pts[pts.length - 1];
state.setAbsoluteTerminalPoint( state.setAbsoluteTerminalPoint(
new mxPoint(ptn.x + dx, ptn.y + dy), new Point(ptn.x + dx, ptn.y + dy),
false false
); );
target = null; target = null;
@ -1648,7 +1648,7 @@ class mxGraphHandler {
// Consumes the event if a cell was initially clicked // Consumes the event if a cell was initially clicked
if (this.cellWasClicked) { if (this.cellWasClicked) {
this.consumeMouseEvent(mxEvent.MOUSE_UP, me); this.consumeMouseEvent(InternalEvent.MOUSE_UP, me);
} }
this.reset(); this.reset();
@ -1702,23 +1702,23 @@ class mxGraphHandler {
const pState = this.graph.getView().getState(parent); const pState = this.graph.getView().getState(parent);
if (pState != null) { if (pState != null) {
let pt = mxUtils.convertPoint( let pt = utils.convertPoint(
this.graph.container, this.graph.container,
getClientX(evt), getClientX(evt),
getClientY(evt) getClientY(evt)
); );
const alpha = mxUtils.toRadians( const alpha = utils.toRadians(
mxUtils.getValue(pState.style, 'rotation') || 0 utils.getValue(pState.style, 'rotation') || 0
); );
if (alpha !== 0) { if (alpha !== 0) {
const cos = Math.cos(-alpha); const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha); const sin = Math.sin(-alpha);
const cx = new mxPoint(pState.getCenterX(), pState.getCenterY()); const cx = new Point(pState.getCenterX(), pState.getCenterY());
pt = mxUtils.getRotatedPoint(pt, cos, sin, cx); pt = utils.getRotatedPoint(pt, cos, sin, cx);
} }
return !mxUtils.contains(pState, pt.x, pt.y); return !utils.contains(pState, pt.x, pt.y);
} }
} }
@ -1867,12 +1867,12 @@ class mxGraphHandler {
this.refreshHandler = null; this.refreshHandler = null;
} }
mxEvent.removeListener(document, 'keydown', this.keyHandler); InternalEvent.removeListener(document, 'keydown', this.keyHandler);
mxEvent.removeListener(document, 'keyup', this.keyHandler); InternalEvent.removeListener(document, 'keyup', this.keyHandler);
this.destroyShapes(); this.destroyShapes();
this.removeHint(); this.removeHint();
} }
} }
export default mxGraphHandler; export default GraphHandler;

192
packages/core/src/view/graph/mxOutline.ts → packages/core/src/view/Outline.ts
View File

@ -5,27 +5,27 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxMouseEvent from '../../util/event/mxMouseEvent'; import InternalMouseEvent from './event/InternalMouseEvent';
import { import {
OUTLINE_COLOR, OUTLINE_COLOR,
OUTLINE_HANDLE_FILLCOLOR, OUTLINE_HANDLE_FILLCOLOR,
OUTLINE_HANDLE_STROKECOLOR, OUTLINE_HANDLE_STROKECOLOR,
OUTLINE_STROKEWIDTH, OUTLINE_STROKEWIDTH,
} from '../../util/mxConstants'; } from '../util/Constants';
import mxPoint from '../../util/datatypes/mxPoint'; import Point from './geometry/Point';
import mxRectangle from '../../util/datatypes/mxRectangle'; import Rectangle from './geometry/Rectangle';
import mxRectangleShape from '../../shape/node/mxRectangleShape'; import RectangleShape from './geometry/shape/node/RectangleShape';
import mxGraph from './mxGraph'; import graph from './Graph';
import mxImageShape from '../../shape/node/mxImageShape'; import ImageShape from './geometry/shape/node/ImageShape';
import mxEvent from '../../util/event/mxEvent'; import InternalEvent from './event/InternalEvent';
import mxUtils from '../../util/mxUtils'; import utils from '../util/Utils';
import mxImage from '../../util/image/mxImage'; import Image from './image/Image';
import mxEventObject from '../../util/event/mxEventObject'; import EventObject from './event/EventObject';
import { getSource, isMouseEvent } from '../../util/mxEventUtils'; import { getSource, isMouseEvent } from '../util/EventUtils';
import mxEventSource from "../../util/event/mxEventSource"; import EventSource from "./event/EventSource";
/** /**
* @class mxOutline * @class Outline
* *
* Implements an outline (aka overview) for a graph. Set {@link updateOnPan} to true * Implements an outline (aka overview) for a graph. Set {@link updateOnPan} to true
* to enable updates while the source graph is panning. * to enable updates while the source graph is panning.
@ -70,8 +70,8 @@ import mxEventSource from "../../util/event/mxEventSource";
* } * }
* ``` * ```
*/ */
class mxOutline { class Outline {
constructor(source: mxGraph, container: HTMLElement | null = null) { constructor(source: graph, container: HTMLElement | null = null) {
this.source = source; this.source = source;
if (container != null) { if (container != null) {
@ -102,45 +102,45 @@ class mxOutline {
this.outline.labelsVisible = this.labelsVisible; this.outline.labelsVisible = this.labelsVisible;
this.outline.setEnabled(false); this.outline.setEnabled(false);
this.updateHandler = (sender: any, evt: mxEventObject) => { this.updateHandler = (sender: any, evt: EventObject) => {
if (!this.suspended && !this.active) { if (!this.suspended && !this.active) {
this.update(); this.update();
} }
}; };
// Updates the scale of the outline after a change of the main graph // Updates the scale of the outline after a change of the main graph
this.source.getModel().addListener(mxEvent.CHANGE, this.updateHandler); this.source.getModel().addListener(InternalEvent.CHANGE, this.updateHandler);
this.outline.addMouseListener(this); this.outline.addMouseListener(this);
// Adds listeners to keep the outline in sync with the source graph // Adds listeners to keep the outline in sync with the source graph
const view = this.source.getView(); const view = this.source.getView();
view.addListener(mxEvent.SCALE, this.updateHandler); view.addListener(InternalEvent.SCALE, this.updateHandler);
view.addListener(mxEvent.TRANSLATE, this.updateHandler); view.addListener(InternalEvent.TRANSLATE, this.updateHandler);
view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.updateHandler); view.addListener(InternalEvent.SCALE_AND_TRANSLATE, this.updateHandler);
view.addListener(mxEvent.DOWN, this.updateHandler); view.addListener(InternalEvent.DOWN, this.updateHandler);
view.addListener(mxEvent.UP, this.updateHandler); view.addListener(InternalEvent.UP, this.updateHandler);
// Updates blue rectangle on scroll // Updates blue rectangle on scroll
mxEvent.addListener(this.source.container, 'scroll', this.updateHandler); InternalEvent.addListener(this.source.container, 'scroll', this.updateHandler);
this.panHandler = (sender: any, evt: mxEventObject) => { this.panHandler = (sender: any, evt: EventObject) => {
if (this.updateOnPan) { if (this.updateOnPan) {
(<Function>this.updateHandler)(sender, evt); (<Function>this.updateHandler)(sender, evt);
} }
}; };
this.source.addListener(mxEvent.PAN, this.panHandler); this.source.addListener(InternalEvent.PAN, this.panHandler);
// Refreshes the graph in the outline after a refresh of the main graph // Refreshes the graph in the outline after a refresh of the main graph
this.refreshHandler = (sender: any) => { this.refreshHandler = (sender: any) => {
const outline = <mxGraph>this.outline; const outline = <graph>this.outline;
outline.setStylesheet(this.source.getStylesheet()); outline.setStylesheet(this.source.getStylesheet());
outline.refresh(); outline.refresh();
}; };
this.source.addListener(mxEvent.REFRESH, this.refreshHandler); this.source.addListener(InternalEvent.REFRESH, this.refreshHandler);
// Creates the blue rectangle for the viewport // Creates the blue rectangle for the viewport
this.bounds = new mxRectangle(0, 0, 0, 0); this.bounds = new Rectangle(0, 0, 0, 0);
this.selectionBorder = new mxRectangleShape( this.selectionBorder = new RectangleShape(
this.bounds, this.bounds,
null, null,
OUTLINE_COLOR, OUTLINE_COLOR,
@ -158,22 +158,22 @@ class mxOutline {
const t = getSource(evt); const t = getSource(evt);
const redirect = (evt: Event) => { const redirect = (evt: Event) => {
const outline = <mxGraph>this.outline; const outline = <graph>this.outline;
outline.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt)); outline.fireMouseEvent(InternalEvent.MOUSE_MOVE, new InternalMouseEvent(evt));
}; };
var redirect2 = (evt: Event) => { var redirect2 = (evt: Event) => {
const outline = <mxGraph>this.outline; const outline = <graph>this.outline;
mxEvent.removeGestureListeners(t, null, redirect, redirect2); InternalEvent.removeGestureListeners(t, null, redirect, redirect2);
outline.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt)); outline.fireMouseEvent(InternalEvent.MOUSE_UP, new InternalMouseEvent(evt));
}; };
const outline = <mxGraph>this.outline; const outline = <graph>this.outline;
mxEvent.addGestureListeners(t, null, redirect, redirect2); InternalEvent.addGestureListeners(t, null, redirect, redirect2);
outline.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt)); outline.fireMouseEvent(InternalEvent.MOUSE_DOWN, new InternalMouseEvent(evt));
}; };
mxEvent.addGestureListeners(this.selectionBorder.node, handler); InternalEvent.addGestureListeners(this.selectionBorder.node, handler);
// Creates a small blue rectangle for sizing (sizer handle) // Creates a small blue rectangle for sizing (sizer handle)
const sizer = (this.sizer = this.createSizer()); const sizer = (this.sizer = this.createSizer());
@ -185,7 +185,7 @@ class mxOutline {
sizerNode.style.cursor = 'nwse-resize'; sizerNode.style.cursor = 'nwse-resize';
} }
mxEvent.addGestureListeners(this.sizer.node, handler); InternalEvent.addGestureListeners(this.sizer.node, handler);
selectionBorderNode.style.display = this.showViewport ? '' : 'none'; selectionBorderNode.style.display = this.showViewport ? '' : 'none';
sizerNode.style.display = selectionBorderNode.style.display; sizerNode.style.display = selectionBorderNode.style.display;
@ -195,9 +195,9 @@ class mxOutline {
} }
// TODO: Document me!! // TODO: Document me!!
sizer: mxRectangleShape | null = null; sizer: RectangleShape | null = null;
selectionBorder: mxRectangleShape | null = null; selectionBorder: RectangleShape | null = null;
updateHandler: Function | null = null; updateHandler: Function | null = null;
@ -207,7 +207,7 @@ class mxOutline {
active: boolean | null = null; active: boolean | null = null;
bounds: mxRectangle | null = null; bounds: Rectangle | null = null;
zoom: boolean = false; zoom: boolean = false;
@ -222,14 +222,14 @@ class mxOutline {
index: number | null = null; index: number | null = null;
/** /**
* Reference to the source {@link mxGraph}. * Reference to the source {@link graph}.
*/ */
source: mxGraph; source: graph;
/** /**
* Reference to the {@link mxGraph} that renders the outline. * Reference to the {@link graph} that renders the outline.
*/ */
outline: mxGraph | null = null; outline: graph | null = null;
/** /**
* Renderhint to be used for the outline graph. * Renderhint to be used for the outline graph.
@ -268,17 +268,17 @@ class mxOutline {
labelsVisible: boolean = false; labelsVisible: boolean = false;
/** /**
* Specifies if {@link update} should be called for {@link mxEvent.PAN} in the source * Specifies if {@link update} should be called for {@link InternalEvent.PAN} in the source
* graph. * graph.
* @default false * @default false
*/ */
updateOnPan: boolean = false; updateOnPan: boolean = false;
/** /**
* Optional {@link mxImage} to be used for the sizer. * Optional {@link Image} to be used for the sizer.
* @default null * @default null
*/ */
sizerImage: mxImage | null = null; sizerImage: Image | null = null;
/** /**
* Minimum scale to be used. * Minimum scale to be used.
@ -307,10 +307,10 @@ class mxOutline {
suspended: boolean = false; suspended: boolean = false;
/** /**
* Creates the {@link mxGraph} used in the outline. * Creates the {@link graph} used in the outline.
*/ */
createGraph(container: HTMLElement): mxGraph { createGraph(container: HTMLElement): graph {
const graph = new mxGraph( const graph = new graph(
container, container,
this.source.getModel(), this.source.getModel(),
this.graphRenderHint, this.graphRenderHint,
@ -361,19 +361,19 @@ class mxOutline {
* Creates the shape used as the sizer. * Creates the shape used as the sizer.
*/ */
// createSizer(): mxShape; // createSizer(): mxShape;
createSizer(): mxRectangleShape { createSizer(): RectangleShape {
const outline = <mxGraph>this.outline; const outline = <graph>this.outline;
if (this.sizerImage != null) { if (this.sizerImage != null) {
const sizer = new mxImageShape( const sizer = new ImageShape(
new mxRectangle(0, 0, this.sizerImage.width, this.sizerImage.height), new Rectangle(0, 0, this.sizerImage.width, this.sizerImage.height),
this.sizerImage.src this.sizerImage.src
); );
sizer.dialect = outline.dialect; sizer.dialect = outline.dialect;
return sizer; return sizer;
} }
const sizer = new mxRectangleShape( const sizer = new RectangleShape(
new mxRectangle(0, 0, this.sizerSize, this.sizerSize), new Rectangle(0, 0, this.sizerSize, this.sizerSize),
OUTLINE_HANDLE_FILLCOLOR, OUTLINE_HANDLE_FILLCOLOR,
OUTLINE_HANDLE_STROKECOLOR OUTLINE_HANDLE_STROKECOLOR
); );
@ -384,8 +384,8 @@ class mxOutline {
/** /**
* Returns the size of the source container. * Returns the size of the source container.
*/ */
getSourceContainerSize(): mxRectangle { getSourceContainerSize(): Rectangle {
return new mxRectangle( return new Rectangle(
0, 0,
0, 0,
(<HTMLElement>this.source.container).scrollWidth, (<HTMLElement>this.source.container).scrollWidth,
@ -396,7 +396,7 @@ class mxOutline {
/** /**
* Returns the offset for drawing the outline graph. * Returns the offset for drawing the outline graph.
*/ */
getOutlineOffset(scale?: number): mxPoint | null { getOutlineOffset(scale?: number): Point | null {
// TODO: Should number -> mxPoint? // TODO: Should number -> mxPoint?
return null; return null;
} }
@ -404,7 +404,7 @@ class mxOutline {
/** /**
* Returns the offset for drawing the outline graph. * Returns the offset for drawing the outline graph.
*/ */
getSourceGraphBounds(): mxRectangle { getSourceGraphBounds(): Rectangle {
return this.source.getGraphBounds(); return this.source.getGraphBounds();
} }
@ -420,14 +420,14 @@ class mxOutline {
) { ) {
const sourceScale = this.source.view.scale; const sourceScale = this.source.view.scale;
const scaledGraphBounds = this.getSourceGraphBounds(); const scaledGraphBounds = this.getSourceGraphBounds();
const unscaledGraphBounds = new mxRectangle( const unscaledGraphBounds = new Rectangle(
scaledGraphBounds.x / sourceScale + this.source.panDx, scaledGraphBounds.x / sourceScale + this.source.panDx,
scaledGraphBounds.y / sourceScale + this.source.panDy, scaledGraphBounds.y / sourceScale + this.source.panDy,
scaledGraphBounds.width / sourceScale, scaledGraphBounds.width / sourceScale,
scaledGraphBounds.height / sourceScale scaledGraphBounds.height / sourceScale
); );
const unscaledFinderBounds = new mxRectangle( const unscaledFinderBounds = new Rectangle(
0, 0,
0, 0,
this.source.container.clientWidth / sourceScale, this.source.container.clientWidth / sourceScale,
@ -503,7 +503,7 @@ class mxOutline {
const { container } = this.source; const { container } = this.source;
// Updates the bounds of the viewrect in the navigation // Updates the bounds of the viewrect in the navigation
this.bounds = new mxRectangle( this.bounds = new Rectangle(
(t2.x - t.x - this.source.panDx) / scale3, (t2.x - t.x - this.source.panDx) / scale3,
(t2.y - t.y - this.source.panDy) / scale3, (t2.y - t.y - this.source.panDy) / scale3,
container.clientWidth / scale2, container.clientWidth / scale2,
@ -516,8 +516,8 @@ class mxOutline {
this.bounds.y += this.bounds.y +=
(this.source.container.scrollTop * navView.scale) / scale; (this.source.container.scrollTop * navView.scale) / scale;
const selectionBorder = <mxRectangleShape>this.selectionBorder; const selectionBorder = <RectangleShape>this.selectionBorder;
let b = <mxRectangle>selectionBorder.bounds; let b = <Rectangle>selectionBorder.bounds;
if ( if (
b.x !== this.bounds.x || b.x !== this.bounds.x ||
@ -530,9 +530,9 @@ class mxOutline {
} }
// Updates the bounds of the zoom handle at the bottom right // Updates the bounds of the zoom handle at the bottom right
const sizer = <mxRectangleShape>this.sizer; const sizer = <RectangleShape>this.sizer;
b = <mxRectangle>sizer.bounds; b = <Rectangle>sizer.bounds;
const b2 = new mxRectangle( const b2 = new Rectangle(
this.bounds.x + this.bounds.width - b.width / 2, this.bounds.x + this.bounds.width - b.width / 2,
this.bounds.y + this.bounds.height - b.height / 2, this.bounds.y + this.bounds.height - b.height / 2,
b.width, b.width,
@ -563,12 +563,12 @@ class mxOutline {
/** /**
* Handles the event by starting a translation or zoom. * Handles the event by starting a translation or zoom.
*/ */
mouseDown(sender: mxEventSource, me: mxMouseEvent): void { mouseDown(sender: EventSource, me: InternalMouseEvent): void {
if (this.enabled && this.showViewport) { if (this.enabled && this.showViewport) {
const tol = !isMouseEvent(me.getEvent()) ? this.source.tolerance : 0; const tol = !isMouseEvent(me.getEvent()) ? this.source.tolerance : 0;
const hit = const hit =
tol > 0 tol > 0
? new mxRectangle( ? new Rectangle(
me.getGraphX() - tol, me.getGraphX() - tol,
me.getGraphY() - tol, me.getGraphY() - tol,
2 * tol, 2 * tol,
@ -578,7 +578,7 @@ class mxOutline {
this.zoom = this.zoom =
me.isSource(this.sizer) || me.isSource(this.sizer) ||
// @ts-ignore // @ts-ignore
(hit != null && mxUtils.intersects(this.sizer.bounds, hit)); (hit != null && utils.intersects(this.sizer.bounds, hit));
this.startX = me.getX(); this.startX = me.getX();
this.startY = me.getY(); this.startY = me.getY();
this.active = true; this.active = true;
@ -586,7 +586,7 @@ class mxOutline {
if ( if (
this.source.useScrollbarsForPanning && this.source.useScrollbarsForPanning &&
mxUtils.hasScrollbars(this.source.container) utils.hasScrollbars(this.source.container)
) { ) {
this.dx0 = sourceContainer.scrollLeft; this.dx0 = sourceContainer.scrollLeft;
this.dy0 = sourceContainer.scrollTop; this.dy0 = sourceContainer.scrollTop;
@ -603,15 +603,15 @@ class mxOutline {
* Handles the event by previewing the viewrect in {@link graph} and updating the * Handles the event by previewing the viewrect in {@link graph} and updating the
* rectangle that represents the viewrect in the outline. * rectangle that represents the viewrect in the outline.
*/ */
mouseMove(sender: mxEventSource, me: mxMouseEvent): void { mouseMove(sender: EventSource, me: InternalMouseEvent): void {
if (this.active) { if (this.active) {
const myBounds = <mxRectangle>this.bounds; const myBounds = <Rectangle>this.bounds;
const sizer = <mxRectangleShape>this.sizer; const sizer = <RectangleShape>this.sizer;
const sizerNode = <SVGGElement>sizer.node; const sizerNode = <SVGGElement>sizer.node;
const selectionBorder = <mxRectangleShape>this.selectionBorder; const selectionBorder = <RectangleShape>this.selectionBorder;
const selectionBorderNode = <SVGGElement>selectionBorder.node; const selectionBorderNode = <SVGGElement>selectionBorder.node;
const source = <mxGraph>this.source; const source = <graph>this.source;
const outline = <mxGraph>this.outline; const outline = <graph>this.outline;
selectionBorderNode.style.display = this.showViewport ? '' : 'none'; selectionBorderNode.style.display = this.showViewport ? '' : 'none';
sizerNode.style.display = selectionBorderNode.style.display; sizerNode.style.display = selectionBorderNode.style.display;
@ -624,7 +624,7 @@ class mxOutline {
if (!this.zoom) { if (!this.zoom) {
// Previews the panning on the source graph // Previews the panning on the source graph
const { scale } = outline.getView(); const { scale } = outline.getView();
bounds = new mxRectangle( bounds = new Rectangle(
myBounds.x + dx, myBounds.x + dx,
myBounds.y + dy, myBounds.y + dy,
myBounds.width, myBounds.width,
@ -639,11 +639,11 @@ class mxOutline {
source.panGraph(-dx - <number>this.dx0, -dy - <number>this.dy0); source.panGraph(-dx - <number>this.dx0, -dy - <number>this.dy0);
} else { } else {
// Does *not* preview zooming on the source graph // Does *not* preview zooming on the source graph
const { container } = <mxGraph>this.source; const { container } = <graph>this.source;
// @ts-ignore // @ts-ignore
const viewRatio = container.clientWidth / container.clientHeight; const viewRatio = container.clientWidth / container.clientHeight;
dy = dx / viewRatio; dy = dx / viewRatio;
bounds = new mxRectangle( bounds = new Rectangle(
myBounds.x, myBounds.x,
myBounds.y, myBounds.y,
Math.max(1, myBounds.width + dx), Math.max(1, myBounds.width + dx),
@ -654,8 +654,8 @@ class mxOutline {
} }
// Updates the zoom handle // Updates the zoom handle
const b = <mxRectangle>sizer.bounds; const b = <Rectangle>sizer.bounds;
sizer.bounds = new mxRectangle( sizer.bounds = new Rectangle(
bounds.x + bounds.width - b.width / 2, bounds.x + bounds.width - b.width / 2,
bounds.y + bounds.height - b.height / 2, bounds.y + bounds.height - b.height / 2,
b.width, b.width,
@ -691,8 +691,8 @@ class mxOutline {
* }; * };
* ``` * ```
*/ */
getTranslateForEvent(me: mxMouseEvent): mxPoint { getTranslateForEvent(me: InternalMouseEvent): Point {
return new mxPoint( return new Point(
me.getX() - <number>this.startX, me.getX() - <number>this.startX,
me.getY() - <number>this.startY me.getY() - <number>this.startY
); );
@ -701,14 +701,14 @@ class mxOutline {
/** /**
* Handles the event by applying the translation or zoom to {@link graph}. * Handles the event by applying the translation or zoom to {@link graph}.
*/ */
mouseUp(sender: mxEventSource, me: mxMouseEvent): void { mouseUp(sender: EventSource, me: InternalMouseEvent): void {
if (this.active) { if (this.active) {
const delta = this.getTranslateForEvent(me); const delta = this.getTranslateForEvent(me);
let dx = delta.x; let dx = delta.x;
let dy = delta.y; let dy = delta.y;
const source = <mxGraph>this.source; const source = <graph>this.source;
const outline = <mxGraph>this.outline; const outline = <graph>this.outline;
const selectionBorder = <mxRectangleShape>this.selectionBorder; const selectionBorder = <RectangleShape>this.selectionBorder;
if (Math.abs(dx) > 0 || Math.abs(dy) > 0) { if (Math.abs(dx) > 0 || Math.abs(dy) > 0) {
if (!this.zoom) { if (!this.zoom) {
@ -716,7 +716,7 @@ class mxOutline {
// has no scrollbars // has no scrollbars
if ( if (
!source.useScrollbarsForPanning || !source.useScrollbarsForPanning ||
!mxUtils.hasScrollbars(source.container) !utils.hasScrollbars(source.container)
) { ) {
source.panGraph(0, 0); source.panGraph(0, 0);
dx /= outline.getView().scale; dx /= outline.getView().scale;
@ -726,7 +726,7 @@ class mxOutline {
} }
} else { } else {
// Applies the new zoom // Applies the new zoom
const w = (<mxRectangle>selectionBorder.bounds).width; const w = (<Rectangle>selectionBorder.bounds).width;
const { scale } = source.getView(); const { scale } = source.getView();
source.zoomTo( source.zoomTo(
Math.max(this.minScale, scale - (dx * scale) / w), Math.max(this.minScale, scale - (dx * scale) / w),
@ -753,7 +753,7 @@ class mxOutline {
this.source.removeListener(this.refreshHandler); this.source.removeListener(this.refreshHandler);
this.source.getModel().removeListener(this.updateHandler); this.source.getModel().removeListener(this.updateHandler);
this.source.getView().removeListener(this.updateHandler); this.source.getView().removeListener(this.updateHandler);
mxEvent.removeListener( InternalEvent.removeListener(
this.source.container, this.source.container,
'scroll', 'scroll',
this.updateHandler this.updateHandler
@ -780,4 +780,4 @@ class mxOutline {
} }
} }
export default mxOutline; export default Outline;

16
packages/core/src/atomic_changes/mxCellAttributeChange.ts → packages/core/src/view/cell/CellAttributeChange.ts
View File

@ -1,7 +1,7 @@
import { isNullish } from '../util/mxUtils'; import { isNullish } from '../../util/Utils';
import mxCell from '../view/cell/mxCell'; import Cell from './datatypes/Cell';
import type { UndoableChange } from '../types'; import type { UndoableChange } from '../../types';
/** /**
* Class: mxCellAttributeChange * Class: mxCellAttributeChange
@ -33,15 +33,15 @@ import type { UndoableChange } from '../types';
* Constructor: mxCellAttributeChange * Constructor: mxCellAttributeChange
* *
* Constructs a change of a attribute of the DOM node * Constructs a change of a attribute of the DOM node
* stored as the value of the given {@link mxCell}`. * stored as the value of the given {@link Cell}`.
*/ */
class mxCellAttributeChange implements UndoableChange { class CellAttributeChange implements UndoableChange {
cell: mxCell; cell: Cell;
attribute: string; attribute: string;
value: any; value: any;
previous: any; previous: any;
constructor(cell: mxCell, attribute: string, value: any) { constructor(cell: Cell, attribute: string, value: any) {
this.cell = cell; this.cell = cell;
this.attribute = attribute; this.attribute = attribute;
this.value = value; this.value = value;
@ -68,4 +68,4 @@ class mxCellAttributeChange implements UndoableChange {
} }
} }
export default mxCellAttributeChange; export default CellAttributeChange;

46
packages/core/src/handler/mxCellMarker.ts → packages/core/src/view/cell/CellMarker.ts
View File

@ -4,23 +4,23 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEventSource from '../util/event/mxEventSource'; import EventSource from '../event/EventSource';
import { import {
DEFAULT_HOTSPOT, DEFAULT_HOTSPOT,
DEFAULT_INVALID_COLOR, DEFAULT_INVALID_COLOR,
DEFAULT_VALID_COLOR, DEFAULT_VALID_COLOR,
MAX_HOTSPOT_SIZE, MAX_HOTSPOT_SIZE,
MIN_HOTSPOT_SIZE, MIN_HOTSPOT_SIZE,
} from '../util/mxConstants'; } from '../../util/Constants';
import mxCellHighlight from './mxCellHighlight'; import mxCellHighlight from '../selection/mxCellHighlight';
import mxEventObject from '../util/event/mxEventObject'; import EventObject from '../event/EventObject';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../event/InternalEvent';
import mxUtils from '../util/mxUtils'; import utils from '../../util/Utils';
import mxGraph from '../view/graph/mxGraph'; import graph from '../Graph';
import { ColorValue } from '../types'; import { ColorValue } from '../../types';
import mxCellState from '../view/cell/mxCellState'; import CellState from './datatypes/CellState';
import mxMouseEvent from '../util/event/mxMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
import mxCell from '../view/cell/mxCell'; import Cell from './datatypes/Cell';
/** /**
* Class: mxCellMarker * Class: mxCellMarker
@ -62,9 +62,9 @@ import mxCell from '../view/cell/mxCell';
* given coordinate pair. A value of 0 means always highlight. Default is * given coordinate pair. A value of 0 means always highlight. Default is
* <mxConstants.DEFAULT_HOTSPOT>. * <mxConstants.DEFAULT_HOTSPOT>.
*/ */
class mxCellMarker extends mxEventSource { class CellMarker extends EventSource {
constructor( constructor(
graph: mxGraph, graph: graph,
validColor: ColorValue = DEFAULT_VALID_COLOR, validColor: ColorValue = DEFAULT_VALID_COLOR,
invalidColor: ColorValue = DEFAULT_INVALID_COLOR, invalidColor: ColorValue = DEFAULT_INVALID_COLOR,
hotspot: number = DEFAULT_HOTSPOT hotspot: number = DEFAULT_HOTSPOT
@ -83,7 +83,7 @@ class mxCellMarker extends mxEventSource {
* *
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
*/ */
graph: mxGraph; graph: graph;
/** /**
* Variable: enabled * Variable: enabled
@ -135,14 +135,14 @@ class mxCellMarker extends mxEventSource {
* *
* Holds the marked <mxCellState> if it is valid. * Holds the marked <mxCellState> if it is valid.
*/ */
validState: mxCellState | null = null; validState: CellState | null = null;
/** /**
* Variable: markedState * Variable: markedState
* *
* Holds the marked <mxCellState>. * Holds the marked <mxCellState>.
*/ */
markedState: mxCellState | null = null; markedState: CellState | null = null;
highlight: mxCellHighlight; highlight: mxCellHighlight;
@ -257,7 +257,7 @@ class mxCellMarker extends mxEventSource {
* regardless of the marker color. The state is returned regardless of the * regardless of the marker color. The state is returned regardless of the
* marker color and valid state. * marker color and valid state.
*/ */
process(me: mxMouseEvent) { process(me: InternalMouseEvent) {
let state = null; let state = null;
if (this.isEnabled()) { if (this.isEnabled()) {
@ -274,8 +274,8 @@ class mxCellMarker extends mxEventSource {
* Sets and marks the current valid state. * Sets and marks the current valid state.
*/ */
setCurrentState( setCurrentState(
state: mxCellState, state: CellState,
me: mxMouseEvent, me: InternalMouseEvent,
color: ColorValue = null color: ColorValue = null
) { ) {
const isValid = state ? this.isValidState(state) : false; const isValid = state ? this.isValidState(state) : false;
@ -305,7 +305,7 @@ class mxCellMarker extends mxEventSource {
* *
* Marks the given cell using the given color, or <validColor> if no color is specified. * Marks the given cell using the given color, or <validColor> if no color is specified.
*/ */
markCell(cell: mxCell, color: ColorValue) { markCell(cell: Cell, color: ColorValue) {
const state = this.graph.getView().getState(cell); const state = this.graph.getView().getState(cell);
if (state) { if (state) {
@ -323,7 +323,7 @@ class mxCellMarker extends mxEventSource {
mark() { mark() {
this.highlight.setHighlightColor(this.currentColor); this.highlight.setHighlightColor(this.currentColor);
this.highlight.highlight(this.markedState); this.highlight.highlight(this.markedState);
this.fireEvent(new mxEventObject(mxEvent.MARK, 'state', this.markedState)); this.fireEvent(new EventObject(InternalEvent.MARK, 'state', this.markedState));
} }
/** /**
@ -406,7 +406,7 @@ class mxCellMarker extends mxEventSource {
// intersects(state: mxCellState, me: mxMouseEvent): boolean; // intersects(state: mxCellState, me: mxMouseEvent): boolean;
intersects(state, me) { intersects(state, me) {
if (this.hotspotEnabled) { if (this.hotspotEnabled) {
return mxUtils.intersectsHotspot( return utils.intersectsHotspot(
state, state,
me.getGraphX(), me.getGraphX(),
me.getGraphY(), me.getGraphY(),
@ -432,4 +432,4 @@ class mxCellMarker extends mxEventSource {
} }
} }
export default mxCellMarker; export default CellMarker;

43
packages/core/src/view/cell/mxCellOverlay.ts → packages/core/src/view/cell/CellOverlay.ts
View File

@ -5,11 +5,11 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxPoint from '../../util/datatypes/mxPoint'; import Point from '../geometry/Point';
import mxRectangle from '../../util/datatypes/mxRectangle'; import Rectangle from '../geometry/Rectangle';
import mxEventSource from '../../util/event/mxEventSource'; import EventSource from '../event/EventSource';
import mxImage from '../../util/image/mxImage'; import Image from '../image/Image';
import mxCellState from "./mxCellState"; import CellState from "./datatypes/CellState";
/** /**
* Class: mxCellOverlay * Class: mxCellOverlay
@ -65,12 +65,12 @@ import mxCellState from "./mxCellState";
* values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM> * values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>
* (default). * (default).
*/ */
class mxCellOverlay extends mxEventSource { class CellOverlay extends EventSource {
constructor(image: mxImage, constructor(image: Image,
tooltip: string | null=null, tooltip: string | null=null,
align: string='right', align: string='right',
verticalAlign: string='bottom', verticalAlign: string='bottom',
offset: mxPoint=new mxPoint(), offset: Point=new Point(),
cursor: string='help') { cursor: string='help') {
super(); super();
@ -85,15 +85,13 @@ class mxCellOverlay extends mxEventSource {
* *
* Holds the <mxImage> to be used as the icon. * Holds the <mxImage> to be used as the icon.
*/ */
// image: mxImage; image: Image | null = null;
image: mxImage | null = null;
/** /**
* Variable: tooltip * Variable: tooltip
* *
* Holds the optional string to be used as the tooltip. * Holds the optional string to be used as the tooltip.
*/ */
// tooltip?: string;
tooltip?: string | null = null; tooltip?: string | null = null;
/** /**
@ -103,7 +101,6 @@ class mxCellOverlay extends mxEventSource {
* <mxConstants.ALIGN_RIGHT>. For edges, the overlay always appears in the * <mxConstants.ALIGN_RIGHT>. For edges, the overlay always appears in the
* center of the edge. * center of the edge.
*/ */
// align: string;
align: 'left' | 'center' | 'right' = 'right'; align: 'left' | 'center' | 'right' = 'right';
/** /**
@ -113,7 +110,6 @@ class mxCellOverlay extends mxEventSource {
* <mxConstants.ALIGN_BOTTOM>. For edges, the overlay always appears in the * <mxConstants.ALIGN_BOTTOM>. For edges, the overlay always appears in the
* center of the edge. * center of the edge.
*/ */
// verticalAlign: string;
verticalAlign: 'top' | 'middle' | 'bottom' = 'bottom'; verticalAlign: 'top' | 'middle' | 'bottom' = 'bottom';
/** /**
@ -122,15 +118,13 @@ class mxCellOverlay extends mxEventSource {
* Holds the offset as an <mxPoint>. The offset will be scaled according to the * Holds the offset as an <mxPoint>. The offset will be scaled according to the
* current scale. * current scale.
*/ */
// offset: mxPoint; offset: Point = new Point();
offset: mxPoint = new mxPoint();
/** /**
* Variable: cursor * Variable: cursor
* *
* Holds the cursor for the overlay. Default is 'help'. * Holds the cursor for the overlay. Default is 'help'.
*/ */
// cursor: string;
cursor: string = 'help'; cursor: string = 'help';
/** /**
@ -139,7 +133,6 @@ class mxCellOverlay extends mxEventSource {
* Defines the overlapping for the overlay, that is, the proportional distance * Defines the overlapping for the overlay, that is, the proportional distance
* from the origin to the point defined by the alignment. Default is 0.5. * from the origin to the point defined by the alignment. Default is 0.5.
*/ */
// defaultOverlap: number;
defaultOverlap: number = 0.5; defaultOverlap: number = 0.5;
/** /**
@ -175,18 +168,17 @@ class mxCellOverlay extends mxEventSource {
* state - <mxCellState> that represents the current state of the * state - <mxCellState> that represents the current state of the
* associated cell. * associated cell.
*/ */
// getBounds(state: mxCellState): mxRectangle; getBounds(state: CellState): Rectangle {
getBounds(state: mxCellState) {
const isEdge = state.cell.isEdge(); const isEdge = state.cell.isEdge();
const s = state.view.scale; const s = state.view.scale;
let pt = null; let pt = null;
const image = <mxImage>this.image; const image = <Image>this.image;
const w = image.width; const w = image.width;
const h = image.height; const h = image.height;
if (isEdge) { if (isEdge) {
const pts = <mxPoint[]>state.absolutePoints; const pts = <Point[]>state.absolutePoints;
if (pts.length % 2 === 1) { if (pts.length % 2 === 1) {
pt = pts[Math.floor(pts.length / 2)]; pt = pts[Math.floor(pts.length / 2)];
@ -194,10 +186,10 @@ class mxCellOverlay extends mxEventSource {
const idx = pts.length / 2; const idx = pts.length / 2;
const p0 = pts[idx - 1]; const p0 = pts[idx - 1];
const p1 = pts[idx]; const p1 = pts[idx];
pt = new mxPoint(p0.x + (p1.x - p0.x) / 2, p0.y + (p1.y - p0.y) / 2); pt = new Point(p0.x + (p1.x - p0.x) / 2, p0.y + (p1.y - p0.y) / 2);
} }
} else { } else {
pt = new mxPoint(); pt = new Point();
if (this.align === 'left') { if (this.align === 'left') {
pt.x = state.x; pt.x = state.x;
@ -220,7 +212,7 @@ class mxCellOverlay extends mxEventSource {
} }
} }
return new mxRectangle( return new Rectangle(
Math.round(pt.x - (w * this.defaultOverlap - this.offset.x) * s), Math.round(pt.x - (w * this.defaultOverlap - this.offset.x) * s),
Math.round(pt.y - (h * this.defaultOverlap - this.offset.y) * s), Math.round(pt.y - (h * this.defaultOverlap - this.offset.y) * s),
w * s, w * s,
@ -234,10 +226,9 @@ class mxCellOverlay extends mxEventSource {
* Returns the textual representation of the overlay to be used as the * Returns the textual representation of the overlay to be used as the
* tooltip. This implementation returns <tooltip>. * tooltip. This implementation returns <tooltip>.
*/ */
// toString(): string;
toString() { toString() {
return this.tooltip; return this.tooltip;
} }
} }
export default mxCellOverlay; export default CellOverlay;

330
packages/core/src/view/cell/mxCellRenderer.ts → packages/core/src/view/cell/CellRenderer.ts
View File

@ -3,23 +3,23 @@
* Copyright (c) 2006-2017, Gaudenz Alder * Copyright (c) 2006-2017, Gaudenz Alder
*/ */
import mxRectangleShape from '../../shape/node/mxRectangleShape'; import RectangleShape from '../geometry/shape/node/RectangleShape';
import mxEllipse from '../../shape/node/mxEllipse'; import Ellipse from '../geometry/shape/node/Ellipse';
import mxRhombus from '../../shape/node/mxRhombus'; import Rhombus from '../geometry/shape/node/Rhombus';
import mxCylinder from '../../shape/node/mxCylinder'; import Cylinder from '../geometry/shape/node/Cylinder';
import mxConnector from '../../shape/edge/mxConnector'; import mxConnector from '../geometry/shape/edge/mxConnector';
import mxActor from '../../shape/mxActor'; import Actor from '../geometry/shape/Actor';
import mxTriangle from '../../shape/mxTriangle'; import Triangle from '../geometry/shape/Triangle';
import mxHexagon from '../../shape/node/mxHexagon'; import Hexagon from '../geometry/shape/node/Hexagon';
import mxCloud from '../../shape/node/mxCloud'; import Cloud from '../geometry/shape/node/Cloud';
import mxLine from '../../shape/edge/mxLine'; import mxLine from '../geometry/shape/edge/mxLine';
import mxArrow from '../../shape/edge/mxArrow'; import mxArrow from '../geometry/shape/edge/mxArrow';
import mxArrowConnector from '../../shape/edge/mxArrowConnector'; import mxArrowConnector from '../geometry/shape/edge/mxArrowConnector';
import mxDoubleEllipse from '../../shape/node/mxDoubleEllipse'; import DoubleEllipse from '../geometry/shape/node/DoubleEllipse';
import mxSwimlane from '../../shape/mxSwimlane'; import Swimlane from '../geometry/shape/Swimlane';
import mxImageShape from '../../shape/node/mxImageShape'; import ImageShape from '../geometry/shape/node/ImageShape';
import mxLabel from '../../shape/mxLabel'; import Label from '../geometry/shape/Label';
import mxText from '../../shape/mxText'; import mxText from '../geometry/shape/mxText';
import { import {
ALIGN_CENTER, ALIGN_CENTER,
ALIGN_MIDDLE, ALIGN_MIDDLE,
@ -46,23 +46,23 @@ import {
SHAPE_RHOMBUS, SHAPE_RHOMBUS,
SHAPE_SWIMLANE, SHAPE_SWIMLANE,
SHAPE_TRIANGLE, SHAPE_TRIANGLE,
} from '../../util/mxConstants'; } from '../../util/Constants';
import mxUtils, { convertPoint, getValue } from '../../util/mxUtils'; import utils, { convertPoint, getValue } from '../../util/Utils';
import mxRectangle from '../../util/datatypes/mxRectangle'; import Rectangle from '../geometry/Rectangle';
import mxStencilRegistry from '../../shape/node/mxStencilRegistry'; import StencilRegistry from '../geometry/shape/node/StencilRegistry';
import mxEvent from '../../util/event/mxEvent'; import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import mxMouseEvent from '../../util/event/mxMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
import mxDictionary from '../../util/datatypes/mxDictionary'; import mxDictionary from '../../util/mxDictionary';
import mxEventObject from '../../util/event/mxEventObject'; import EventObject from '../event/EventObject';
import mxPoint from '../../util/datatypes/mxPoint'; import Point from '../geometry/Point';
import mxShape from '../../shape/mxShape'; import Shape from '../geometry/shape/Shape';
import mxCellState from './mxCellState'; import CellState from './datatypes/CellState';
import mxCell from './mxCell'; import Cell from './datatypes/Cell';
import mxGraphModel from '../graph/mxGraphModel'; import Model from '../model/Model';
import mxCellOverlay from './mxCellOverlay'; import CellOverlay from './CellOverlay';
import { getClientX, getClientY, getSource } from '../../util/mxEventUtils'; import { getClientX, getClientY, getSource } from '../../util/EventUtils';
import { isNode } from '../../util/mxDomUtils'; import { isNode } from '../../util/DomUtils';
/** /**
* Class: mxCellRenderer * Class: mxCellRenderer
@ -94,7 +94,7 @@ import { isNode } from '../../util/mxDomUtils';
* arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, * arrow, rectangle, ellipse, rhombus, image, line, label, cylinder,
* swimlane, connector, actor and cloud. * swimlane, connector, actor and cloud.
*/ */
class mxCellRenderer { class CellRenderer {
constructor() {} constructor() {}
/** /**
@ -104,21 +104,21 @@ class mxCellRenderer {
* known to all instances of this class. For adding new shapes you should * known to all instances of this class. For adding new shapes you should
* use the static <mxCellRenderer.registerShape> function. * use the static <mxCellRenderer.registerShape> function.
*/ */
static defaultShapes: { [key: string]: typeof mxShape } = {}; static defaultShapes: { [key: string]: typeof Shape } = {};
/** /**
* Variable: defaultEdgeShape * Variable: defaultEdgeShape
* *
* Defines the default shape for edges. Default is <mxConnector>. * Defines the default shape for edges. Default is <mxConnector>.
*/ */
defaultEdgeShape: typeof mxShape = mxConnector; defaultEdgeShape: typeof Shape = mxConnector;
/** /**
* Variable: defaultVertexShape * Variable: defaultVertexShape
* *
* Defines the default shape for vertices. Default is <mxRectangleShape>. * Defines the default shape for vertices. Default is <mxRectangleShape>.
*/ */
defaultVertexShape: typeof mxRectangleShape = mxRectangleShape; defaultVertexShape: typeof RectangleShape = RectangleShape;
/** /**
* Variable: defaultTextShape * Variable: defaultTextShape
@ -173,10 +173,10 @@ class mxCellRenderer {
* ``` * ```
* *
* @param key the shape name. * @param key the shape name.
* @param shape constructor of the {@link mxShape} subclass. * @param shape constructor of the {@link Shape} subclass.
*/ */
static registerShape(key: string, shape: typeof mxShape) { static registerShape(key: string, shape: typeof Shape) {
mxCellRenderer.defaultShapes[key] = shape; CellRenderer.defaultShapes[key] = shape;
} }
/** /**
@ -189,7 +189,7 @@ class mxCellRenderer {
* *
* state - <mxCellState> for which the shape should be initialized. * state - <mxCellState> for which the shape should be initialized.
*/ */
initializeShape(state: mxCellState) { initializeShape(state: CellState) {
if (state.shape) { if (state.shape) {
state.shape.dialect = state.view.graph.dialect; state.shape.dialect = state.view.graph.dialect;
this.configureShape(state); this.configureShape(state);
@ -206,15 +206,15 @@ class mxCellRenderer {
* *
* state - <mxCellState> for which the shape should be created. * state - <mxCellState> for which the shape should be created.
*/ */
createShape(state: mxCellState) { createShape(state: CellState) {
let shape = null; let shape = null;
// Checks if there is a stencil for the name and creates // Checks if there is a stencil for the name and creates
// a shape instance for the stencil if one exists // a shape instance for the stencil if one exists
const stencil = mxStencilRegistry.getStencil(state.style.shape); const stencil = StencilRegistry.getStencil(state.style.shape);
if (stencil) { if (stencil) {
shape = new mxShape(stencil); shape = new Shape(stencil);
} else { } else {
const ctor = this.getShapeConstructor(state); const ctor = this.getShapeConstructor(state);
shape = new ctor(); shape = new ctor();
@ -232,7 +232,7 @@ class mxCellRenderer {
* *
* state - <mxCellState> for which the indicator shape should be created. * state - <mxCellState> for which the indicator shape should be created.
*/ */
createIndicatorShape(state: mxCellState) { createIndicatorShape(state: CellState) {
if (state.shape) { if (state.shape) {
state.shape.indicatorShape = this.getShape( state.shape.indicatorShape = this.getShape(
state.view.graph.getIndicatorShape(state) state.view.graph.getIndicatorShape(state)
@ -246,7 +246,7 @@ class mxCellRenderer {
* Returns the shape for the given name from <defaultShapes>. * Returns the shape for the given name from <defaultShapes>.
*/ */
getShape(name: string | null) { getShape(name: string | null) {
return name ? mxCellRenderer.defaultShapes[name] : null; return name ? CellRenderer.defaultShapes[name] : null;
} }
/** /**
@ -254,11 +254,11 @@ class mxCellRenderer {
* *
* Returns the constructor to be used for creating the shape. * Returns the constructor to be used for creating the shape.
*/ */
getShapeConstructor(state: mxCellState) { getShapeConstructor(state: CellState) {
let ctor = this.getShape(state.style.shape); let ctor = this.getShape(state.style.shape);
if (!ctor) { if (!ctor) {
ctor = <typeof mxShape>( ctor = <typeof Shape>(
(state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape) (state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape)
); );
} }
@ -275,7 +275,7 @@ class mxCellRenderer {
* *
* state - <mxCellState> for which the shape should be configured. * state - <mxCellState> for which the shape should be configured.
*/ */
configureShape(state: mxCellState) { configureShape(state: CellState) {
const shape = state.shape; const shape = state.shape;
if (shape) { if (shape) {
@ -301,7 +301,7 @@ class mxCellRenderer {
* and gradient color keys. * and gradient color keys.
*/ */
// postConfigureShape(state: mxCellState): void; // postConfigureShape(state: mxCellState): void;
postConfigureShape(state: mxCellState) { postConfigureShape(state: CellState) {
if (state.shape != null) { if (state.shape != null) {
this.resolveColor(state, 'indicatorGradientColor', 'gradientColor'); this.resolveColor(state, 'indicatorGradientColor', 'gradientColor');
this.resolveColor(state, 'indicatorColor', 'fillColor'); this.resolveColor(state, 'indicatorColor', 'fillColor');
@ -318,7 +318,7 @@ class mxCellRenderer {
* the respective color on the shape. * the respective color on the shape.
*/ */
// checkPlaceholderStyles(state: mxCellState): boolean; // checkPlaceholderStyles(state: mxCellState): boolean;
checkPlaceholderStyles(state: mxCellState) { checkPlaceholderStyles(state: CellState) {
// LATER: Check if the color has actually changed // LATER: Check if the color has actually changed
if (state.style != null) { if (state.style != null) {
const values = ['inherit', 'swimlane', 'indicated']; const values = ['inherit', 'swimlane', 'indicated'];
@ -340,7 +340,7 @@ class mxCellRenderer {
* the respective color on the shape. * the respective color on the shape.
*/ */
// resolveColor(state: mxCellState, field: string, key: string): void; // resolveColor(state: mxCellState, field: string, key: string): void;
resolveColor(state: mxCellState, field: string, key: string) { resolveColor(state: CellState, field: string, key: string) {
const shape = key === 'fontColor' ? state.text : state.shape; const shape = key === 'fontColor' ? state.text : state.shape;
if (shape != null) { if (shape != null) {
@ -365,7 +365,7 @@ class mxCellRenderer {
referenced = state.cell; referenced = state.cell;
} }
referenced = graph.getSwimlane(<mxCell>referenced); referenced = graph.getSwimlane(<Cell>referenced);
key = graph.swimlaneIndicatorColorAttribute; key = graph.swimlaneIndicatorColorAttribute;
} else if (value === 'indicated' && state.shape != null) { } else if (value === 'indicated' && state.shape != null) {
// @ts-ignore // @ts-ignore
@ -416,7 +416,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the label should be created. * state - <mxCellState> for which the label should be created.
*/ */
// getLabelValue(state: mxCellState): string; // getLabelValue(state: mxCellState): string;
getLabelValue(state: mxCellState) { getLabelValue(state: CellState) {
return state.view.graph.getLabel(state.cell); return state.view.graph.getLabel(state.cell);
} }
@ -430,7 +430,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the label should be created. * state - <mxCellState> for which the label should be created.
*/ */
// createLabel(state: mxCellState, value: string): void; // createLabel(state: mxCellState, value: string): void;
createLabel(state: mxCellState, value: any) { createLabel(state: CellState, value: any) {
const { graph } = state.view; const { graph } = state.view;
const isEdge = state.cell.isEdge(); const isEdge = state.cell.isEdge();
@ -441,7 +441,7 @@ class mxCellRenderer {
state.text = new this.defaultTextShape( state.text = new this.defaultTextShape(
value, value,
new mxRectangle(), new Rectangle(),
state.style.align || ALIGN_CENTER, state.style.align || ALIGN_CENTER,
graph.getVerticalAlign(state), graph.getVerticalAlign(state),
state.style.fontColor, state.style.fontColor,
@ -478,7 +478,7 @@ class mxCellRenderer {
// getCellAt for the subsequent mouseMoves and the final mouseUp. // getCellAt for the subsequent mouseMoves and the final mouseUp.
let forceGetCell = false; let forceGetCell = false;
const getState = (evt: Event | mxMouseEvent) => { const getState = (evt: Event | InternalMouseEvent) => {
let result = state; let result = state;
if (mxClient.IS_TOUCH || forceGetCell) { if (mxClient.IS_TOUCH || forceGetCell) {
@ -488,7 +488,7 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which // Dispatches the drop event to the graph which
// consumes and executes the source function // consumes and executes the source function
const pt = convertPoint(graph.container, x, y); const pt = convertPoint(graph.container, x, y);
result = <mxCellState>( result = <CellState>(
graph.view.getState(graph.getCellAt(pt.x, pt.y)) graph.view.getState(graph.getCellAt(pt.x, pt.y))
); );
} }
@ -496,32 +496,32 @@ class mxCellRenderer {
}; };
// TODO: Add handling for special touch device gestures // TODO: Add handling for special touch device gestures
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
state.text.node, state.text.node,
(evt: mxMouseEvent) => { (evt: InternalMouseEvent) => {
if (this.isLabelEvent(state, evt)) { if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_DOWN, InternalEvent.MOUSE_DOWN,
new mxMouseEvent(evt, state) new InternalMouseEvent(evt, state)
); );
forceGetCell = forceGetCell =
graph.dialect !== DIALECT_SVG && graph.dialect !== DIALECT_SVG &&
getSource(evt).nodeName === 'IMG'; getSource(evt).nodeName === 'IMG';
} }
}, },
(evt: mxMouseEvent) => { (evt: InternalMouseEvent) => {
if (this.isLabelEvent(state, evt)) { if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_MOVE, InternalEvent.MOUSE_MOVE,
new mxMouseEvent(evt, getState(evt)) new InternalMouseEvent(evt, getState(evt))
); );
} }
}, },
(evt: mxMouseEvent) => { (evt: InternalMouseEvent) => {
if (this.isLabelEvent(state, evt)) { if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_UP, InternalEvent.MOUSE_UP,
new mxMouseEvent(evt, getState(evt)) new InternalMouseEvent(evt, getState(evt))
); );
forceGetCell = false; forceGetCell = false;
} }
@ -530,10 +530,10 @@ class mxCellRenderer {
// Uses double click timeout in mxGraph for quirks mode // Uses double click timeout in mxGraph for quirks mode
if (graph.nativeDblClickEnabled) { if (graph.nativeDblClickEnabled) {
mxEvent.addListener(state.text.node, 'dblclick', (evt: MouseEvent) => { InternalEvent.addListener(state.text.node, 'dblclick', (evt: MouseEvent) => {
if (this.isLabelEvent(state, evt)) { if (this.isLabelEvent(state, evt)) {
graph.dblClick(evt, state.cell); graph.dblClick(evt, state.cell);
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
}); });
} }
@ -550,7 +550,7 @@ class mxCellRenderer {
* state - <mxCellState> whose label should be initialized. * state - <mxCellState> whose label should be initialized.
*/ */
// initializeLabel(state: mxCellState, shape: mxShape): void; // initializeLabel(state: mxCellState, shape: mxShape): void;
initializeLabel(state: mxCellState, shape: mxShape) { initializeLabel(state: CellState, shape: Shape) {
if (mxClient.IS_SVG && mxClient.NO_FO && shape.dialect !== DIALECT_SVG) { if (mxClient.IS_SVG && mxClient.NO_FO && shape.dialect !== DIALECT_SVG) {
shape.init(state.view.graph.container); shape.init(state.view.graph.container);
} else { } else {
@ -568,7 +568,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the overlay should be created. * state - <mxCellState> for which the overlay should be created.
*/ */
// createCellOverlays(state: mxCellState): void; // createCellOverlays(state: mxCellState): void;
createCellOverlays(state: mxCellState) { createCellOverlays(state: CellState) {
const { graph } = state.view; const { graph } = state.view;
const overlays = graph.getCellOverlays(state.cell); const overlays = graph.getCellOverlays(state.cell);
let dict = null; let dict = null;
@ -581,8 +581,8 @@ class mxCellRenderer {
state.overlays != null ? state.overlays.remove(overlays[i]) : null; state.overlays != null ? state.overlays.remove(overlays[i]) : null;
if (shape == null) { if (shape == null) {
const tmp = new mxImageShape( const tmp = new ImageShape(
new mxRectangle(), new Rectangle(),
// @ts-ignore // @ts-ignore
overlays[i].image.src overlays[i].image.src
); );
@ -624,7 +624,7 @@ class mxCellRenderer {
* overlay - <mxImageShape> that represents the overlay. * overlay - <mxImageShape> that represents the overlay.
*/ */
// initializeOverlay(state: mxCellState, overlay: mxImageShape): void; // initializeOverlay(state: mxCellState, overlay: mxImageShape): void;
initializeOverlay(state: mxCellState, overlay: mxImageShape): void { initializeOverlay(state: CellState, overlay: ImageShape): void {
overlay.init(state.view.getOverlayPane()); overlay.init(state.view.getOverlayPane());
} }
@ -636,36 +636,36 @@ class mxCellRenderer {
*/ */
// installCellOverlayListeners(state: mxCellState, overlay: mxCellOverlay, shape: mxShape): void; // installCellOverlayListeners(state: mxCellState, overlay: mxCellOverlay, shape: mxShape): void;
installCellOverlayListeners( installCellOverlayListeners(
state: mxCellState, state: CellState,
overlay: mxCellOverlay, overlay: CellOverlay,
shape: mxShape shape: Shape
) { ) {
const { graph } = state.view; const { graph } = state.view;
mxEvent.addListener(shape.node, 'click', (evt: Event) => { InternalEvent.addListener(shape.node, 'click', (evt: Event) => {
if (graph.isEditing()) { if (graph.isEditing()) {
graph.stopEditing(!graph.isInvokesStopCellEditing()); graph.stopEditing(!graph.isInvokesStopCellEditing());
} }
overlay.fireEvent( overlay.fireEvent(
new mxEventObject(mxEvent.CLICK, 'event', evt, 'cell', state.cell) new EventObject(InternalEvent.CLICK, 'event', evt, 'cell', state.cell)
); );
}); });
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
shape.node, shape.node,
(evt: Event) => { (evt: Event) => {
mxEvent.consume(evt); InternalEvent.consume(evt);
}, },
(evt: Event) => { (evt: Event) => {
graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, state)); graph.fireMouseEvent(InternalEvent.MOUSE_MOVE, new InternalMouseEvent(evt, state));
} }
); );
if (mxClient.IS_TOUCH) { if (mxClient.IS_TOUCH) {
mxEvent.addListener(shape.node, 'touchend', (evt: Event) => { InternalEvent.addListener(shape.node, 'touchend', (evt: Event) => {
overlay.fireEvent( overlay.fireEvent(
new mxEventObject(mxEvent.CLICK, 'event', evt, 'cell', state.cell) new EventObject(InternalEvent.CLICK, 'event', evt, 'cell', state.cell)
); );
}); });
} }
@ -681,14 +681,14 @@ class mxCellRenderer {
* state - <mxCellState> for which the control should be created. * state - <mxCellState> for which the control should be created.
*/ */
// createControl(state: mxCellState): void; // createControl(state: mxCellState): void;
createControl(state: mxCellState) { createControl(state: CellState) {
const { graph } = state.view; const { graph } = state.view;
const image = graph.getFoldingImage(state); const image = graph.getFoldingImage(state);
if (graph.foldingEnabled && image != null) { if (graph.foldingEnabled && image != null) {
if (state.control == null) { if (state.control == null) {
const b = new mxRectangle(0, 0, image.width, image.height); const b = new Rectangle(0, 0, image.width, image.height);
state.control = new mxImageShape(b, image.src); state.control = new ImageShape(b, image.src);
state.control.preserveImageAspect = false; state.control.preserveImageAspect = false;
state.control.dialect = graph.dialect; state.control.dialect = graph.dialect;
@ -715,14 +715,14 @@ class mxCellRenderer {
* state - <mxCellState> whose control click handler should be returned. * state - <mxCellState> whose control click handler should be returned.
*/ */
// createControlClickHandler(state: mxCellState): void; // createControlClickHandler(state: mxCellState): void;
createControlClickHandler(state: mxCellState): Function { createControlClickHandler(state: CellState): Function {
const { graph } = state.view; const { graph } = state.view;
return (evt: mxEventObject) => { return (evt: EventObject) => {
if (this.forceControlClickHandler || graph.isEnabled()) { if (this.forceControlClickHandler || graph.isEnabled()) {
const collapse = !state.cell.isCollapsed(); const collapse = !state.cell.isCollapsed();
graph.foldCells(collapse, false, [state.cell], false, evt); graph.foldCells(collapse, false, [state.cell], false, evt);
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
}; };
} }
@ -741,8 +741,8 @@ class mxCellRenderer {
*/ */
// initControl(state: mxCellState, control: mxShape, handleEvents: boolean, clickHandler?: Function): Element; // initControl(state: mxCellState, control: mxShape, handleEvents: boolean, clickHandler?: Function): Element;
initControl( initControl(
state: mxCellState, state: CellState,
control: mxShape, control: Shape,
handleEvents: boolean, handleEvents: boolean,
clickHandler: Function clickHandler: Function
) { ) {
@ -774,31 +774,31 @@ class mxCellRenderer {
node.style.cursor = 'pointer'; node.style.cursor = 'pointer';
} }
mxEvent.addListener(node, 'click', clickHandler); InternalEvent.addListener(node, 'click', clickHandler);
} }
if (handleEvents) { if (handleEvents) {
let first: mxPoint | null = null; let first: Point | null = null;
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
node, node,
(evt: Event) => { (evt: Event) => {
first = new mxPoint(getClientX(evt), getClientY(evt)); first = new Point(getClientX(evt), getClientY(evt));
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_DOWN, InternalEvent.MOUSE_DOWN,
new mxMouseEvent(evt, state) new InternalMouseEvent(evt, state)
); );
mxEvent.consume(evt); InternalEvent.consume(evt);
}, },
(evt: Event) => { (evt: Event) => {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_MOVE, InternalEvent.MOUSE_MOVE,
new mxMouseEvent(evt, state) new InternalMouseEvent(evt, state)
); );
}, },
(evt: Event) => { (evt: Event) => {
graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt, state)); graph.fireMouseEvent(InternalEvent.MOUSE_UP, new InternalMouseEvent(evt, state));
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
); );
@ -816,7 +816,7 @@ class mxCellRenderer {
Math.abs(first.y - getClientY(evt)) < tol Math.abs(first.y - getClientY(evt)) < tol
) { ) {
clickHandler.call(clickHandler, evt); clickHandler.call(clickHandler, evt);
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
} }
}, },
@ -840,7 +840,7 @@ class mxCellRenderer {
* evt - Mouse event which was fired. * evt - Mouse event which was fired.
*/ */
// isShapeEvent(state: mxCellState, evt: MouseEvent): boolean; // isShapeEvent(state: mxCellState, evt: MouseEvent): boolean;
isShapeEvent(state: mxCellState, evt: mxMouseEvent | MouseEvent) { isShapeEvent(state: CellState, evt: InternalMouseEvent | MouseEvent) {
return true; return true;
} }
@ -856,7 +856,7 @@ class mxCellRenderer {
* evt - Mouse event which was fired. * evt - Mouse event which was fired.
*/ */
// isLabelEvent(state: mxCellState, evt: MouseEvent): boolean; // isLabelEvent(state: mxCellState, evt: MouseEvent): boolean;
isLabelEvent(state: mxCellState, evt: mxMouseEvent | MouseEvent) { isLabelEvent(state: CellState, evt: InternalMouseEvent | MouseEvent) {
return true; return true;
} }
@ -870,7 +870,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the event listeners should be isntalled. * state - <mxCellState> for which the event listeners should be isntalled.
*/ */
// installListeners(state: mxCellState): void; // installListeners(state: mxCellState): void;
installListeners(state: mxCellState) { installListeners(state: CellState) {
const { graph } = state.view; const { graph } = state.view;
// Workaround for touch devices routing all events for a mouse // Workaround for touch devices routing all events for a mouse
@ -889,36 +889,36 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which // Dispatches the drop event to the graph which
// consumes and executes the source function // consumes and executes the source function
const pt = convertPoint(graph.container, x, y); const pt = convertPoint(graph.container, x, y);
result = <mxCellState>graph.view.getState(graph.getCellAt(pt.x, pt.y)); result = <CellState>graph.view.getState(graph.getCellAt(pt.x, pt.y));
} }
return result; return result;
}; };
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
// @ts-ignore // @ts-ignore
state.shape.node, state.shape.node,
(evt: MouseEvent) => { (evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) { if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_DOWN, InternalEvent.MOUSE_DOWN,
new mxMouseEvent(evt, state) new InternalMouseEvent(evt, state)
); );
} }
}, },
(evt: MouseEvent) => { (evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) { if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_MOVE, InternalEvent.MOUSE_MOVE,
new mxMouseEvent(evt, getState(evt)) new InternalMouseEvent(evt, getState(evt))
); );
} }
}, },
(evt: MouseEvent) => { (evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) { if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_UP, InternalEvent.MOUSE_UP,
new mxMouseEvent(evt, getState(evt)) new InternalMouseEvent(evt, getState(evt))
); );
} }
} }
@ -927,10 +927,10 @@ class mxCellRenderer {
// Uses double click timeout in mxGraph for quirks mode // Uses double click timeout in mxGraph for quirks mode
if (graph.nativeDblClickEnabled) { if (graph.nativeDblClickEnabled) {
// @ts-ignore // @ts-ignore
mxEvent.addListener(state.shape.node, 'dblclick', (evt) => { InternalEvent.addListener(state.shape.node, 'dblclick', (evt) => {
if (this.isShapeEvent(state, evt)) { if (this.isShapeEvent(state, evt)) {
graph.dblClick(evt, state.cell); graph.dblClick(evt, state.cell);
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
}); });
} }
@ -946,7 +946,7 @@ class mxCellRenderer {
* state - <mxCellState> whose label should be redrawn. * state - <mxCellState> whose label should be redrawn.
*/ */
// redrawLabel(state: mxCellState, forced?: boolean): void; // redrawLabel(state: mxCellState, forced?: boolean): void;
redrawLabel(state: mxCellState, forced: boolean) { redrawLabel(state: CellState, forced: boolean) {
const { graph } = state.view; const { graph } = state.view;
const value = this.getLabelValue(state); const value = this.getLabelValue(state);
const wrapping = graph.isWrapping(state.cell); const wrapping = graph.isWrapping(state.cell);
@ -1043,7 +1043,7 @@ class mxCellRenderer {
* shape - <mxText> shape to be checked. * shape - <mxText> shape to be checked.
*/ */
// isTextShapeInvalid(state: mxCellState, shape: mxText): boolean; // isTextShapeInvalid(state: mxCellState, shape: mxText): boolean;
isTextShapeInvalid(state: mxCellState, shape: mxText): boolean { isTextShapeInvalid(state: CellState, shape: mxText): boolean {
function check(property: string, stylename: string, defaultValue: any) { function check(property: string, stylename: string, defaultValue: any) {
let result = false; let result = false;
@ -1097,7 +1097,7 @@ class mxCellRenderer {
* shape - <mxText> shape to be redrawn. * shape - <mxText> shape to be redrawn.
*/ */
// redrawLabelShape(shape: mxText): void; // redrawLabelShape(shape: mxText): void;
redrawLabelShape(shape: mxShape): void { redrawLabelShape(shape: Shape): void {
shape.redraw(); shape.redraw();
} }
@ -1111,7 +1111,7 @@ class mxCellRenderer {
* state - <mxCellState> whose label scale should be returned. * state - <mxCellState> whose label scale should be returned.
*/ */
// getTextScale(state: mxCellState): number; // getTextScale(state: mxCellState): number;
getTextScale(state: mxCellState): number { getTextScale(state: CellState): number {
return state.view.scale; return state.view.scale;
} }
@ -1125,11 +1125,11 @@ class mxCellRenderer {
* state - <mxCellState> whose label bounds should be returned. * state - <mxCellState> whose label bounds should be returned.
*/ */
// getLabelBounds(state: mxCellState): mxRectangle; // getLabelBounds(state: mxCellState): mxRectangle;
getLabelBounds(state: mxCellState): mxRectangle { getLabelBounds(state: CellState): Rectangle {
const { graph } = state.view; const { graph } = state.view;
const { scale } = state.view; const { scale } = state.view;
const isEdge = state.cell.isEdge(); const isEdge = state.cell.isEdge();
let bounds = new mxRectangle( let bounds = new Rectangle(
state.absoluteOffset.x, state.absoluteOffset.x,
state.absoluteOffset.y state.absoluteOffset.y
); );
@ -1209,7 +1209,7 @@ class mxCellRenderer {
* bounds - <mxRectangle> the rectangle to be rotated. * bounds - <mxRectangle> the rectangle to be rotated.
*/ */
// rotateLabelBounds(state: mxCellState, bounds: mxRectangle): void; // rotateLabelBounds(state: mxCellState, bounds: mxRectangle): void;
rotateLabelBounds(state: mxCellState, bounds: mxRectangle) { rotateLabelBounds(state: CellState, bounds: Rectangle) {
// @ts-ignore // @ts-ignore
bounds.y -= state.text.margin.y * bounds.height; bounds.y -= state.text.margin.y * bounds.height;
// @ts-ignore // @ts-ignore
@ -1263,10 +1263,10 @@ class mxCellRenderer {
if (bounds.x !== cx || bounds.y !== cy) { if (bounds.x !== cx || bounds.y !== cy) {
const rad = theta * (Math.PI / 180); const rad = theta * (Math.PI / 180);
const pt = getRotatedPoint( const pt = getRotatedPoint(
new mxPoint(bounds.x, bounds.y), new Point(bounds.x, bounds.y),
Math.cos(rad), Math.cos(rad),
Math.sin(rad), Math.sin(rad),
new mxPoint(cx, cy) new Point(cx, cy)
); );
bounds.x = pt.x; bounds.x = pt.x;
@ -1285,7 +1285,7 @@ class mxCellRenderer {
* state - <mxCellState> whose overlays should be redrawn. * state - <mxCellState> whose overlays should be redrawn.
*/ */
// redrawCellOverlays(state: mxCellState, forced?: boolean): void; // redrawCellOverlays(state: mxCellState, forced?: boolean): void;
redrawCellOverlays(state: mxCellState, forced: boolean = false) { redrawCellOverlays(state: CellState, forced: boolean = false) {
this.createCellOverlays(state); this.createCellOverlays(state);
if (state.overlays != null) { if (state.overlays != null) {
@ -1294,7 +1294,7 @@ class mxCellRenderer {
const cos = Math.cos(rad); const cos = Math.cos(rad);
const sin = Math.sin(rad); const sin = Math.sin(rad);
state.overlays.visit((id: string, shape: mxShape) => { state.overlays.visit((id: string, shape: Shape) => {
// @ts-ignore // @ts-ignore
const bounds = shape.overlay.getBounds(state); const bounds = shape.overlay.getBounds(state);
@ -1304,10 +1304,10 @@ class mxCellRenderer {
let cy = bounds.getCenterY(); let cy = bounds.getCenterY();
const point = getRotatedPoint( const point = getRotatedPoint(
new mxPoint(cx, cy), new Point(cx, cy),
cos, cos,
sin, sin,
new mxPoint(state.getCenterX(), state.getCenterY()) new Point(state.getCenterX(), state.getCenterY())
); );
cx = point.x; cx = point.x;
@ -1341,7 +1341,7 @@ class mxCellRenderer {
* state - <mxCellState> whose control should be redrawn. * state - <mxCellState> whose control should be redrawn.
*/ */
// redrawControl(state: mxCellState, forced?: boolean): void; // redrawControl(state: mxCellState, forced?: boolean): void;
redrawControl(state: mxCellState, forced: boolean = false) { redrawControl(state: CellState, forced: boolean = false) {
const image = state.view.graph.getFoldingImage(state); const image = state.view.graph.getFoldingImage(state);
if (state.control != null && image != null) { if (state.control != null && image != null) {
@ -1377,10 +1377,10 @@ class mxCellRenderer {
*/ */
// getControlBounds(state: mxCellState, w: number, h: number): mxRectangle; // getControlBounds(state: mxCellState, w: number, h: number): mxRectangle;
getControlBounds( getControlBounds(
state: mxCellState, state: CellState,
w: number, w: number,
h: number h: number
): mxRectangle | null { ): Rectangle | null {
if (state.control != null) { if (state.control != null) {
const s = state.view.scale; const s = state.view.scale;
let cx = state.getCenterX(); let cx = state.getCenterX();
@ -1408,10 +1408,10 @@ class mxCellRenderer {
const sin = Math.sin(rad); const sin = Math.sin(rad);
const point = getRotatedPoint( const point = getRotatedPoint(
new mxPoint(cx, cy), new Point(cx, cy),
cos, cos,
sin, sin,
new mxPoint(state.getCenterX(), state.getCenterY()) new Point(state.getCenterX(), state.getCenterY())
); );
cx = point.x; cx = point.x;
cy = point.y; cy = point.y;
@ -1420,13 +1420,13 @@ class mxCellRenderer {
} }
return state.cell.isEdge() return state.cell.isEdge()
? new mxRectangle( ? new Rectangle(
Math.round(cx - (w / 2) * s), Math.round(cx - (w / 2) * s),
Math.round(cy - (h / 2) * s), Math.round(cy - (h / 2) * s),
Math.round(w * s), Math.round(w * s),
Math.round(h * s) Math.round(h * s)
) )
: new mxRectangle( : new Rectangle(
Math.round(cx - (w / 2) * s), Math.round(cx - (w / 2) * s),
Math.round(cy - (h / 2) * s), Math.round(cy - (h / 2) * s),
Math.round(w * s), Math.round(w * s),
@ -1451,7 +1451,7 @@ class mxCellRenderer {
*/ */
// insertStateAfter(state: mxCellState, node: Element, htmlNode: HTMLElement): void; // insertStateAfter(state: mxCellState, node: Element, htmlNode: HTMLElement): void;
insertStateAfter( insertStateAfter(
state: mxCellState, state: CellState,
node: HTMLElement | SVGElement | null, node: HTMLElement | SVGElement | null,
htmlNode: HTMLElement | SVGElement | null htmlNode: HTMLElement | SVGElement | null
) { ) {
@ -1542,8 +1542,8 @@ class mxCellRenderer {
*/ */
// getShapesForState(state: mxCellState): mxShape[]; // getShapesForState(state: mxCellState): mxShape[];
getShapesForState( getShapesForState(
state: mxCellState state: CellState
): [mxShape | null, mxText | null, mxShape | null] { ): [Shape | null, mxText | null, Shape | null] {
return [state.shape, state.text, state.control]; return [state.shape, state.text, state.control];
} }
@ -1565,7 +1565,7 @@ class mxCellRenderer {
*/ */
// redraw(state: mxCellState, force?: boolean, rendering?: boolean): void; // redraw(state: mxCellState, force?: boolean, rendering?: boolean): void;
redraw( redraw(
state: mxCellState, state: CellState,
force: boolean = false, force: boolean = false,
rendering: boolean = true rendering: boolean = true
): void { ): void {
@ -1589,7 +1589,7 @@ class mxCellRenderer {
*/ */
// redrawShape(state: mxCellState, force?: boolean, rendering?: boolean): void; // redrawShape(state: mxCellState, force?: boolean, rendering?: boolean): void;
redrawShape( redrawShape(
state: mxCellState, state: CellState,
force: boolean = false, force: boolean = false,
rendering: boolean = true rendering: boolean = true
): boolean { ): boolean {
@ -1674,7 +1674,7 @@ class mxCellRenderer {
state.shape.bounds = null; state.shape.bounds = null;
} else { } else {
state.shape.points = null; state.shape.points = null;
state.shape.bounds = new mxRectangle( state.shape.bounds = new Rectangle(
state.x, state.x,
state.y, state.y,
state.width, state.width,
@ -1703,7 +1703,7 @@ class mxCellRenderer {
* Invokes redraw on the shape of the given state. * Invokes redraw on the shape of the given state.
*/ */
// doRedrawShape(state: mxCellState): void; // doRedrawShape(state: mxCellState): void;
doRedrawShape(state: mxCellState) { doRedrawShape(state: CellState) {
state.shape?.redraw(); state.shape?.redraw();
} }
@ -1713,7 +1713,7 @@ class mxCellRenderer {
* Returns true if the given shape must be repainted. * Returns true if the given shape must be repainted.
*/ */
// isShapeInvalid(state: mxCellState, shape: mxShape): boolean; // isShapeInvalid(state: mxCellState, shape: mxShape): boolean;
isShapeInvalid(state: mxCellState, shape: mxShape): boolean { isShapeInvalid(state: CellState, shape: Shape): boolean {
return ( return (
shape.bounds == null || shape.bounds == null ||
shape.scale !== state.view.scale || shape.scale !== state.view.scale ||
@ -1733,7 +1733,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the shapes should be destroyed. * state - <mxCellState> for which the shapes should be destroyed.
*/ */
// destroy(state: mxCellState): void; // destroy(state: mxCellState): void;
destroy(state: mxCellState) { destroy(state: CellState) {
if (state.shape != null) { if (state.shape != null) {
if (state.text != null) { if (state.text != null) {
state.text.destroy(); state.text.destroy();
@ -1741,7 +1741,7 @@ class mxCellRenderer {
} }
if (state.overlays != null) { if (state.overlays != null) {
state.overlays.visit((id: string, shape: mxShape) => { state.overlays.visit((id: string, shape: Shape) => {
shape.destroy(); shape.destroy();
}); });
@ -1761,28 +1761,28 @@ class mxCellRenderer {
// Adds default shapes into the default shapes array // Adds default shapes into the default shapes array
// @ts-ignore // @ts-ignore
mxCellRenderer.registerShape(SHAPE_RECTANGLE, mxRectangleShape); CellRenderer.registerShape(SHAPE_RECTANGLE, RectangleShape);
// @ts-ignore // @ts-ignore
mxCellRenderer.registerShape(SHAPE_ELLIPSE, mxEllipse); CellRenderer.registerShape(SHAPE_ELLIPSE, Ellipse);
// @ts-ignore // @ts-ignore
mxCellRenderer.registerShape(SHAPE_RHOMBUS, mxRhombus); CellRenderer.registerShape(SHAPE_RHOMBUS, Rhombus);
// @ts-ignore // @ts-ignore
mxCellRenderer.registerShape(SHAPE_CYLINDER, mxCylinder); CellRenderer.registerShape(SHAPE_CYLINDER, mxCylinder);
mxCellRenderer.registerShape(SHAPE_CONNECTOR, mxConnector); CellRenderer.registerShape(SHAPE_CONNECTOR, mxConnector);
// @ts-ignore // @ts-ignore
mxCellRenderer.registerShape(SHAPE_ACTOR, mxActor); CellRenderer.registerShape(SHAPE_ACTOR, Actor);
mxCellRenderer.registerShape(SHAPE_TRIANGLE, mxTriangle); CellRenderer.registerShape(SHAPE_TRIANGLE, Triangle);
mxCellRenderer.registerShape(SHAPE_HEXAGON, mxHexagon); CellRenderer.registerShape(SHAPE_HEXAGON, Hexagon);
// @ts-ignore // @ts-ignore
mxCellRenderer.registerShape(SHAPE_CLOUD, mxCloud); CellRenderer.registerShape(SHAPE_CLOUD, Cloud);
mxCellRenderer.registerShape(SHAPE_LINE, mxLine); CellRenderer.registerShape(SHAPE_LINE, mxLine);
mxCellRenderer.registerShape(SHAPE_ARROW, mxArrow); CellRenderer.registerShape(SHAPE_ARROW, mxArrow);
mxCellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, mxArrowConnector); CellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, mxArrowConnector);
// @ts-ignore // @ts-ignore
mxCellRenderer.registerShape(SHAPE_DOUBLE_ELLIPSE, mxDoubleEllipse); CellRenderer.registerShape(SHAPE_DOUBLE_ELLIPSE, DoubleEllipse);
mxCellRenderer.registerShape(SHAPE_SWIMLANE, mxSwimlane); CellRenderer.registerShape(SHAPE_SWIMLANE, Swimlane);
// @ts-ignore // @ts-ignore
mxCellRenderer.registerShape(SHAPE_IMAGE, mxImageShape); CellRenderer.registerShape(SHAPE_IMAGE, ImageShape);
mxCellRenderer.registerShape(SHAPE_LABEL, mxLabel); CellRenderer.registerShape(SHAPE_LABEL, Label);
export default mxCellRenderer; export default CellRenderer;

50
packages/core/src/view/cell/mxCellStatePreview.ts → packages/core/src/view/cell/CellStatePreview.ts
View File

@ -5,21 +5,21 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxPoint from '../../util/datatypes/mxPoint'; import Point from '../geometry/Point';
import mxDictionary from '../../util/datatypes/mxDictionary'; import mxDictionary from '../../util/mxDictionary';
import mxCellState from './mxCellState'; import CellState from './datatypes/CellState';
import mxCell from './mxCell'; import Cell from './datatypes/Cell';
import mxGraph from '../graph/mxGraph'; import graph from '../Graph';
import mxGraphView from "../graph/mxGraphView"; import GraphView from "../view/GraphView";
/** /**
* *
* @class mxCellStatePreview * @class CellStatePreview
* *
* Implements a live preview for moving cells. * Implements a live preview for moving cells.
*/ */
class mxCellStatePreview { class CellStatePreview {
constructor(graph: mxGraph) { constructor(graph: graph) {
this.deltas = new mxDictionary(); this.deltas = new mxDictionary();
this.graph = graph; this.graph = graph;
} }
@ -28,7 +28,7 @@ class mxCellStatePreview {
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
*/ */
// graph: mxGraph; // graph: mxGraph;
graph: mxGraph; graph: graph;
/** /**
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
@ -53,7 +53,7 @@ class mxCellStatePreview {
/** /**
* *
* *
* @param {mxCellState} state * @param {CellState} state
* @param {number} dx * @param {number} dx
* @param {number} dy * @param {number} dy
* @param {boolean} add * @param {boolean} add
@ -63,17 +63,17 @@ class mxCellStatePreview {
*/ */
// moveState(state: mxCellState, dx: number, dy: number, add: boolean, includeEdges: boolean): mxPoint; // moveState(state: mxCellState, dx: number, dy: number, add: boolean, includeEdges: boolean): mxPoint;
moveState( moveState(
state: mxCellState, state: CellState,
dx: number, dx: number,
dy: number, dy: number,
add: boolean = true, add: boolean = true,
includeEdges: boolean = true includeEdges: boolean = true
): mxPoint { ): Point {
let delta = this.deltas.get(state.cell); let delta = this.deltas.get(state.cell);
if (delta == null) { if (delta == null) {
// Note: Deltas stores the point and the state since the key is a string. // Note: Deltas stores the point and the state since the key is a string.
delta = { point: new mxPoint(dx, dy), state }; delta = { point: new Point(dx, dy), state };
this.deltas.put(state.cell, delta); this.deltas.put(state.cell, delta);
this.count++; this.count++;
} else if (add) { } else if (add) {
@ -115,13 +115,13 @@ class mxCellStatePreview {
/** /**
* *
* *
* @param {mxCellState} state * @param {CellState} state
* @param {number} dx * @param {number} dx
* @param {number} dy * @param {number} dy
* @memberof mxCellStatePreview * @memberof mxCellStatePreview
*/ */
// translateState(state: mxCellState, dx: number, dy: number): void; // translateState(state: mxCellState, dx: number, dy: number): void;
translateState(state: mxCellState, dx: number, dy: number) { translateState(state: CellState, dx: number, dy: number) {
if (state != null) { if (state != null) {
const model = this.graph.getModel(); const model = this.graph.getModel();
@ -146,7 +146,7 @@ class mxCellStatePreview {
for (let i = 0; i < childCount; i += 1) { for (let i = 0; i < childCount; i += 1) {
this.translateState( this.translateState(
<mxCellState>(state.view).getState(state.cell.getChildAt(i)), <CellState>(state.view).getState(state.cell.getChildAt(i)),
dx, dx,
dy dy
); );
@ -157,7 +157,7 @@ class mxCellStatePreview {
/** /**
* *
* *
* @param {mxCellState} state * @param {CellState} state
* @param {number} dx * @param {number} dx
* @param {number} dy * @param {number} dy
* @param {Function} visitor * @param {Function} visitor
@ -165,7 +165,7 @@ class mxCellStatePreview {
*/ */
// revalidateState(state: mxCellState, dx: number, dy: number, visitor: Function): void; // revalidateState(state: mxCellState, dx: number, dy: number, visitor: Function): void;
revalidateState( revalidateState(
state: mxCellState | null = null, state: CellState | null = null,
dx: number, dx: number,
dy: number, dy: number,
visitor: Function | null = null visitor: Function | null = null
@ -179,8 +179,8 @@ class mxCellStatePreview {
state.view.updateCellState(state); state.view.updateCellState(state);
} }
const geo = (<mxCell>state.cell).getGeometry(); const geo = (<Cell>state.cell).getGeometry();
const pState = state.view.getState(<mxCell>state.cell.getParent()); const pState = state.view.getState(<Cell>state.cell.getParent());
// Moves selection vertices which are relative // Moves selection vertices which are relative
if ( if (
@ -219,16 +219,16 @@ class mxCellStatePreview {
/** /**
* *
* *
* @param {mxCellState} state * @param {CellState} state
* @memberof mxCellStatePreview * @memberof mxCellStatePreview
*/ */
// addEdges(state: mxCellState): void; // addEdges(state: mxCellState): void;
addEdges(state: mxCellState): void { addEdges(state: CellState): void {
const model = this.graph.getModel(); const model = this.graph.getModel();
const edgeCount = state.cell.getEdgeCount(); const edgeCount = state.cell.getEdgeCount();
for (let i = 0; i < edgeCount; i += 1) { for (let i = 0; i < edgeCount; i += 1) {
const s = state.view.getState(<mxCell>state.cell.getEdgeAt(i)); const s = state.view.getState(<Cell>state.cell.getEdgeAt(i));
if (s != null) { if (s != null) {
this.moveState(s, 0, 0); this.moveState(s, 0, 0);
@ -237,4 +237,4 @@ class mxCellStatePreview {
} }
} }
export default mxCellStatePreview; export default CellStatePreview;

2805
packages/core/src/view/cell/Cells.ts Normal file
View File

File diff suppressed because it is too large Load Diff

38
packages/core/src/view/cell/mxTemporaryCellStates.ts → packages/core/src/view/cell/TemporaryCellStates.ts
View File

@ -8,19 +8,19 @@
* Creates a temporary set of cell states. * Creates a temporary set of cell states.
*/ */
import mxRectangle from '../../util/datatypes/mxRectangle'; import Rectangle from '../geometry/Rectangle';
import mxDictionary from '../../util/datatypes/mxDictionary'; import mxDictionary from '../../util/mxDictionary';
import mxGraphView from '../graph/mxGraphView'; import GraphView from '../view/GraphView';
import mxCell from './mxCell'; import Cell from './datatypes/Cell';
import mxCellState from './mxCellState'; import CellState from './datatypes/CellState';
import mxShape from "../../shape/mxShape"; import Shape from "../geometry/shape/Shape";
import mxGraph from "../graph/mxGraph"; import graph from "../Graph";
class mxTemporaryCellStates { class TemporaryCellStates {
constructor( constructor(
view: mxGraphView, view: GraphView,
scale: number = 1, scale: number = 1,
cells: mxCell[], cells: Cell[],
isCellVisibleFn: Function | null = null, isCellVisibleFn: Function | null = null,
getLinkForCellState: Function | null = null getLinkForCellState: Function | null = null
) { ) {
@ -31,14 +31,14 @@ class mxTemporaryCellStates {
this.oldBounds = view.getGraphBounds(); this.oldBounds = view.getGraphBounds();
this.oldStates = view.getStates(); this.oldStates = view.getStates();
this.oldScale = view.getScale(); this.oldScale = view.getScale();
this.oldDoRedrawShape = (<mxGraph>view.graph).cellRenderer.doRedrawShape; this.oldDoRedrawShape = (<graph>view.graph).cellRenderer.doRedrawShape;
const self = this; const self = this;
// Overrides doRedrawShape and paint shape to add links on shapes // Overrides doRedrawShape and paint shape to add links on shapes
if (getLinkForCellState != null) { if (getLinkForCellState != null) {
(<mxGraph>view.graph).cellRenderer.doRedrawShape = (state: mxCellState) => { (<graph>view.graph).cellRenderer.doRedrawShape = (state: CellState) => {
const shape = <mxShape>state?.shape; const shape = <Shape>state?.shape;
const oldPaint = shape.paint; const oldPaint = shape.paint;
shape.paint = c => { shape.paint = c => {
@ -52,7 +52,7 @@ class mxTemporaryCellStates {
} }
}; };
(<Function>self.oldDoRedrawShape).apply((<mxGraph>view.graph).cellRenderer, [state]); (<Function>self.oldDoRedrawShape).apply((<graph>view.graph).cellRenderer, [state]);
shape.paint = oldPaint; shape.paint = oldPaint;
}; };
} }
@ -77,7 +77,7 @@ class mxTemporaryCellStates {
// the model so that the original cells are not modified // the model so that the original cells are not modified
for (const cell of cells) { for (const cell of cells) {
const bounds = view.getBoundingBox( const bounds = view.getBoundingBox(
view.validateCellState(<mxCell>view.validateCell(<mxCell>cell)) view.validateCellState(<Cell>view.validateCell(<Cell>cell))
); );
if (bbox == null) { if (bbox == null) {
bbox = bounds; bbox = bounds;
@ -85,7 +85,7 @@ class mxTemporaryCellStates {
bbox.add(bounds); bbox.add(bounds);
} }
} }
view.setGraphBounds(bbox || new mxRectangle()); view.setGraphBounds(bbox || new Rectangle());
} }
} }
@ -112,7 +112,7 @@ class mxTemporaryCellStates {
* @default 0 * @default 0
*/ */
// oldBounds: number; // oldBounds: number;
oldBounds: mxRectangle | null = null; oldBounds: Rectangle | null = null;
/** /**
* Holds the height of the rectangle. * Holds the height of the rectangle.
@ -130,7 +130,7 @@ class mxTemporaryCellStates {
const view = <mxGraphView>this.view; const view = <mxGraphView>this.view;
view.setScale(this.oldScale); view.setScale(this.oldScale);
view.setStates(this.oldStates); view.setStates(this.oldStates);
view.setGraphBounds(<mxRectangle>this.oldBounds); view.setGraphBounds(<Rectangle>this.oldBounds);
// @ts-ignore // @ts-ignore
view.validateCellState = <Function>this.oldValidateCellState; view.validateCellState = <Function>this.oldValidateCellState;
// @ts-ignore // @ts-ignore
@ -138,4 +138,4 @@ class mxTemporaryCellStates {
} }
} }
export default mxTemporaryCellStates; export default TemporaryCellStates;

150
packages/core/src/view/cell/TreeTraversal.ts Normal file
View File

@ -0,0 +1,150 @@
import Cell from "./datatypes/Cell";
import CellArray from "./datatypes/CellArray";
import mxDictionary from "../../util/mxDictionary";
import Graph from "../Graph";
class TreeTraversal {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/*****************************************************************************
* Group: Tree and traversal-related
*****************************************************************************/
/**
* Returns all children in the given parent which do not have incoming
* edges. If the result is empty then the with the greatest difference
* between incoming and outgoing edges is returned.
*
* @param parent {@link mxCell} whose children should be checked.
* @param isolate Optional boolean that specifies if edges should be ignored if
* the opposite end is not a child of the given parent cell. Default is
* false.
* @param invert Optional boolean that specifies if outgoing or incoming edges
* should be counted for a tree root. If false then outgoing edges will be
* counted. Default is `false`.
*/
findTreeRoots(
parent: Cell,
isolate: boolean = false,
invert: boolean = false
): CellArray {
const roots: CellArray = new CellArray();
if (parent != null) {
let best = null;
let maxDiff = 0;
for (const cell of parent.getChildren()) {
if (cell.isVertex() && cell.isVisible()) {
const conns = this.getConnections(cell, isolate ? parent : null);
let fanOut = 0;
let fanIn = 0;
for (let j = 0; j < conns.length; j++) {
const src = this.getView().getVisibleTerminal(conns[j], true);
if (src == cell) {
fanOut++;
} else {
fanIn++;
}
}
if (
(invert && fanOut == 0 && fanIn > 0) ||
(!invert && fanIn == 0 && fanOut > 0)
) {
roots.push(cell);
}
const diff = invert ? fanIn - fanOut : fanOut - fanIn;
if (diff > maxDiff) {
maxDiff = diff;
best = cell;
}
}
}
if (roots.length == 0 && best != null) {
roots.push(best);
}
}
return roots;
}
/**
* Function: traverse
*
* Traverses the (directed) graph invoking the given function for each
* visited vertex and edge. The function is invoked with the current vertex
* and the incoming edge as a parameter. This implementation makes sure
* each vertex is only visited once. The function may return false if the
* traversal should stop at the given vertex.
*
* Example:
*
* (code)
* mxLog.show();
* let cell = graph.getSelectionCell();
* graph.traverse(cell, false, (vertex, edge)=>
* {
* mxLog.debug(graph.getLabel(vertex));
* });
* (end)
*
* Parameters:
*
* vertex - <mxCell> that represents the vertex where the traversal starts.
* directed - Optional boolean indicating if edges should only be traversed
* from source to target. Default is true.
* func - Visitor function that takes the current vertex and the incoming
* edge as arguments. The traversal stops if the function returns false.
* edge - Optional <mxCell> that represents the incoming edge. This is
* null for the first step of the traversal.
* visited - Optional <mxDictionary> from cells to true for the visited cells.
* inverse - Optional boolean to traverse in inverse direction. Default is false.
* This is ignored if directed is false.
*/
traverse(
vertex: Cell | null = null,
directed: boolean = true,
func: Function | null = null,
edge: Cell | null = null,
visited: mxDictionary | null = null,
inverse: boolean = false
): void {
if (func != null && vertex != null) {
directed = directed != null ? directed : true;
inverse = inverse != null ? inverse : false;
visited = visited || new mxDictionary();
if (!visited.get(vertex)) {
visited.put(vertex, true);
const result = func(vertex, edge);
if (result == null || result) {
const edgeCount = vertex.getEdgeCount();
if (edgeCount > 0) {
for (let i = 0; i < edgeCount; i += 1) {
const e = <Cell>vertex.getEdgeAt(i);
const isSource = e.getTerminal(true) == vertex;
if (!directed || !inverse == isSource) {
const next = e.getTerminal(!isSource);
this.traverse(next, directed, func, e, visited, inverse);
}
}
}
}
}
}
}
}
export default TreeTraversal;

20
packages/core/src/atomic_changes/mxValueChange.ts → packages/core/src/view/cell/ValueChange.ts
View File

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

144
packages/core/src/view/cell/mxCell.ts → packages/core/src/view/cell/datatypes/Cell.ts
View File

@ -5,16 +5,16 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import { NODETYPE_ELEMENT } from '../../util/mxConstants'; import { NODETYPE_ELEMENT } from '../../../util/Constants';
import mxGeometry from '../../util/datatypes/mxGeometry'; import Geometry from '../../geometry/Geometry';
import mxCellOverlay from './mxCellOverlay'; import CellOverlay from '../CellOverlay';
import { clone } from '../../util/mxCloneUtils'; import { clone } from '../../../util/CloneUtils';
import mxPoint from '../../util/datatypes/mxPoint'; import Point from '../../geometry/Point';
import mxCellPath from './mxCellPath'; import CellPath from './CellPath';
import mxCellArray from "./mxCellArray"; import CellArray from "./CellArray";
import { isNotNullish } from '../../util/mxUtils'; import { isNotNullish } from '../../../util/Utils';
import type { FilterFunction } from '../../types'; import type { FilterFunction } from '../../../types';
/** /**
* Cells are the elements of the graph model. They represent the state * Cells are the elements of the graph model. They represent the state
@ -32,8 +32,8 @@ import type { FilterFunction } from '../../types';
* graph.insertVertex(graph.getDefaultParent(), null, node, 40, 40, 80, 30); * graph.insertVertex(graph.getDefaultParent(), null, node, 40, 40, 80, 30);
* ``` * ```
* *
* For the label to work, {@link mxGraph.convertValueToString} and * For the label to work, {@link graph.convertValueToString} and
* {@link mxGraph.cellLabelChanged} should be overridden as follows: * {@link graph.cellLabelChanged} should be overridden as follows:
* *
* @example * @example
* ```javascript * ```javascript
@ -59,12 +59,12 @@ import type { FilterFunction } from '../../types';
* cellLabelChanged.apply(this, arguments); * cellLabelChanged.apply(this, arguments);
* }; * };
* ``` * ```
* @class mxCell * @class Cell
*/ */
class mxCell { class Cell {
constructor( constructor(
value: any = null, value: any = null,
geometry: mxGeometry | null = null, geometry: Geometry | null = null,
style: string | null = null style: string | null = null
) { ) {
this.value = value; this.value = value;
@ -77,8 +77,8 @@ class mxCell {
} }
// TODO: Document me!!! // TODO: Document me!!!
getChildren(): mxCellArray { getChildren(): CellArray {
return this.children || new mxCellArray(); return this.children || new CellArray();
} }
// TODO: Document me! // TODO: Document me!
@ -88,7 +88,7 @@ class mxCell {
onInit: (() => void) | null = null; onInit: (() => void) | null = null;
// used by addCellOverlay() of mxGraph // used by addCellOverlay() of mxGraph
overlays: mxCellOverlay[] | null = []; overlays: CellOverlay[] | null = [];
/** /**
* Holds the Id. Default is null. * Holds the Id. Default is null.
@ -103,7 +103,7 @@ class mxCell {
/** /**
* Holds the <mxGeometry>. Default is null. * Holds the <mxGeometry>. Default is null.
*/ */
geometry: mxGeometry | null = null; geometry: Geometry | null = null;
/** /**
* Holds the style as a string of the form [(stylename|key=value);]. Default is * Holds the style as a string of the form [(stylename|key=value);]. Default is
@ -139,27 +139,27 @@ class mxCell {
/** /**
* Reference to the parent cell. * Reference to the parent cell.
*/ */
parent: mxCell | null = null; parent: Cell | null = null;
/** /**
* Reference to the source terminal. * Reference to the source terminal.
*/ */
source: mxCell | null = null; source: Cell | null = null;
/** /**
* Reference to the target terminal. * Reference to the target terminal.
*/ */
target: mxCell | null = null; target: Cell | null = null;
/** /**
* Holds the child cells. * Holds the child cells.
*/ */
children: mxCellArray = new mxCellArray(); children: CellArray = new CellArray();
/** /**
* Holds the edges. * Holds the edges.
*/ */
edges: mxCellArray = new mxCellArray(); edges: CellArray = new CellArray();
/** /**
* List of members that should not be cloned inside <clone>. This field is * List of members that should not be cloned inside <clone>. This field is
@ -223,14 +223,14 @@ class mxCell {
/** /**
* Returns the <mxGeometry> that describes the <geometry>. * Returns the <mxGeometry> that describes the <geometry>.
*/ */
getGeometry(): mxGeometry | null { getGeometry(): Geometry | null {
return this.geometry; return this.geometry;
} }
/** /**
* Sets the <mxGeometry> to be used as the <geometry>. * Sets the <mxGeometry> to be used as the <geometry>.
*/ */
setGeometry(geometry: mxGeometry | null) { setGeometry(geometry: Geometry | null) {
this.geometry = geometry; this.geometry = geometry;
} }
@ -343,8 +343,8 @@ class mxCell {
/** /**
* Returns the cell's parent. * Returns the cell's parent.
*/ */
getParent(): mxCell { getParent(): Cell {
return <mxCell>this.parent; return <Cell>this.parent;
} }
/** /**
@ -354,7 +354,7 @@ class mxCell {
* *
* @param parent<mxCell> that represents the new parent. * @param parent<mxCell> that represents the new parent.
*/ */
setParent(parent: mxCell | null) { setParent(parent: Cell | null) {
this.parent = parent; this.parent = parent;
} }
@ -373,11 +373,11 @@ class mxCell {
/** /**
* Sets the source or target terminal and returns the new terminal. * Sets the source or target terminal and returns the new terminal.
* *
* @param {mxCell} terminal mxCell that represents the new source or target terminal. * @param {Cell} terminal mxCell that represents the new source or target terminal.
* @param {boolean} isSource boolean that specifies if the source or target terminal * @param {boolean} isSource boolean that specifies if the source or target terminal
* should be set. * should be set.
*/ */
setTerminal(terminal: mxCell | null, isSource: boolean) { setTerminal(terminal: Cell | null, isSource: boolean) {
if (isSource) { if (isSource) {
this.source = terminal; this.source = terminal;
} else { } else {
@ -401,7 +401,7 @@ class mxCell {
* *
* @param childChild whose index should be returned. * @param childChild whose index should be returned.
*/ */
getIndex(child: mxCell | null) { getIndex(child: Cell | null) {
if (child === null) return -1; if (child === null) return -1;
return this.children.indexOf(child); return this.children.indexOf(child);
} }
@ -413,7 +413,7 @@ class mxCell {
* *
* @param indexInteger that specifies the child to be returned. * @param indexInteger that specifies the child to be returned.
*/ */
getChildAt(index: number): mxCell { getChildAt(index: number): Cell {
return this.children[index]; return this.children[index];
} }
@ -429,7 +429,7 @@ class mxCell {
* @param indexOptional integer that specifies the index at which the child * @param indexOptional integer that specifies the index at which the child
* should be inserted into the child array. * should be inserted into the child array.
*/ */
insert(child: mxCell, index?: number): mxCell | null { insert(child: Cell, index?: number): Cell | null {
if (index === undefined) { if (index === undefined) {
index = this.getChildCount(); index = this.getChildCount();
@ -456,7 +456,7 @@ class mxCell {
* @param indexInteger that specifies the index of the child to be * @param indexInteger that specifies the index of the child to be
* removed. * removed.
*/ */
remove(index: number): mxCell | null { remove(index: number): Cell | null {
let child = null; let child = null;
if (index >= 0) { if (index >= 0) {
@ -494,7 +494,7 @@ class mxCell {
* *
* @param edge<mxCell> whose index in <edges> should be returned. * @param edge<mxCell> whose index in <edges> should be returned.
*/ */
getEdgeIndex(edge: mxCell) { getEdgeIndex(edge: Cell) {
return this.edges.indexOf(edge); return this.edges.indexOf(edge);
} }
@ -518,7 +518,7 @@ class mxCell {
* @param edge <mxCell> to be inserted into the edge array. * @param edge <mxCell> to be inserted into the edge array.
* @param isOutgoing Boolean that specifies if the edge is outgoing. * @param isOutgoing Boolean that specifies if the edge is outgoing.
*/ */
insertEdge(edge: mxCell, isOutgoing: boolean = false) { insertEdge(edge: Cell, isOutgoing: boolean = false) {
edge.removeFromTerminal(isOutgoing); edge.removeFromTerminal(isOutgoing);
edge.setTerminal(this, isOutgoing); edge.setTerminal(this, isOutgoing);
@ -542,7 +542,7 @@ class mxCell {
* @param edge<mxCell> to be removed from the edge array. * @param edge<mxCell> to be removed from the edge array.
* @param isOutgoing Boolean that specifies if the edge is outgoing. * @param isOutgoing Boolean that specifies if the edge is outgoing.
*/ */
removeEdge(edge: mxCell | null, isOutgoing: boolean = false): mxCell | null { removeEdge(edge: Cell | null, isOutgoing: boolean = false): Cell | null {
if (edge != null) { if (edge != null) {
if (edge.getTerminal(!isOutgoing) !== this && this.edges != null) { if (edge.getTerminal(!isOutgoing) !== this && this.edges != null) {
const index = this.getEdgeIndex(edge); const index = this.getEdgeIndex(edge);
@ -631,7 +631,7 @@ class mxCell {
* the user object. All fields in <mxTransient> are ignored * the user object. All fields in <mxTransient> are ignored
* during the cloning. * during the cloning.
*/ */
clone(): mxCell { clone(): Cell {
const c = clone(this, this.mxTransient); const c = clone(this, this.mxTransient);
c.setValue(this.cloneValue()); c.setValue(this.cloneValue());
return c; return c;
@ -655,17 +655,17 @@ class mxCell {
/** /**
* Returns the nearest common ancestor for the specified cells to `this`. * Returns the nearest common ancestor for the specified cells to `this`.
* *
* @param {mxCell} cell2 that specifies the second cell in the tree. * @param {Cell} cell2 that specifies the second cell in the tree.
*/ */
getNearestCommonAncestor(cell2: mxCell): mxCell | null { getNearestCommonAncestor(cell2: Cell): Cell | null {
// Creates the cell path for the second cell // Creates the cell path for the second cell
let path = mxCellPath.create(cell2); let path = CellPath.create(cell2);
if (path.length > 0) { if (path.length > 0) {
// Bubbles through the ancestors of the first // Bubbles through the ancestors of the first
// cell to find the nearest common ancestor. // cell to find the nearest common ancestor.
let cell: mxCell | null = this; let cell: Cell | null = this;
let current: string | null = mxCellPath.create(cell); let current: string | null = CellPath.create(cell);
// Inverts arguments // Inverts arguments
if (path.length < current.length) { if (path.length < current.length) {
@ -676,14 +676,14 @@ class mxCell {
} }
while (cell && current) { while (cell && current) {
const parent: mxCell | null = cell.getParent(); const parent: Cell | null = cell.getParent();
// Checks if the cell path is equal to the beginning of the given cell path // Checks if the cell path is equal to the beginning of the given cell path
if (path.indexOf(current + mxCellPath.PATH_SEPARATOR) === 0 && parent) { if (path.indexOf(current + CellPath.PATH_SEPARATOR) === 0 && parent) {
return cell; return cell;
} }
current = mxCellPath.getParentPath(current); current = CellPath.getParentPath(current);
cell = parent; cell = parent;
} }
} }
@ -695,9 +695,9 @@ class mxCell {
* Returns true if the given parent is an ancestor of the given child. Note * Returns true if the given parent is an ancestor of the given child. Note
* returns true if child == parent. * returns true if child == parent.
* *
* @param {mxCell} child that specifies the child. * @param {Cell} child that specifies the child.
*/ */
isAncestor(child: mxCell | null) { isAncestor(child: Cell | null) {
while (child && child !== this) { while (child && child !== this) {
child = child.getParent(); child = child.getParent();
} }
@ -708,14 +708,14 @@ class mxCell {
/** /**
* Returns the child vertices of the given parent. * Returns the child vertices of the given parent.
*/ */
getChildVertices(): mxCellArray { getChildVertices(): CellArray {
return this.getChildCells(true, false); return this.getChildCells(true, false);
} }
/** /**
* Returns the child edges of the given parent. * Returns the child edges of the given parent.
*/ */
getChildEdges(): mxCellArray { getChildEdges(): CellArray {
return this.getChildCells(false, true); return this.getChildCells(false, true);
} }
@ -728,9 +728,9 @@ class mxCell {
* @param edges Boolean indicating if child edges should be returned. * @param edges Boolean indicating if child edges should be returned.
* Default is false. * Default is false.
*/ */
getChildCells(vertices: boolean = false, edges: boolean = false): mxCellArray { getChildCells(vertices: boolean = false, edges: boolean = false): CellArray {
const childCount = this.getChildCount(); const childCount = this.getChildCount();
const result = new mxCellArray(); const result = new CellArray();
for (let i = 0; i < childCount; i += 1) { for (let i = 0; i < childCount; i += 1) {
const child = this.getChildAt(i); const child = this.getChildAt(i);
@ -753,11 +753,11 @@ class mxCell {
* *
* @param outgoing Boolean that specifies if the number of outgoing or * @param outgoing Boolean that specifies if the number of outgoing or
* incoming edges should be returned. * incoming edges should be returned.
* @param {mxCell} ignoredEdge that represents an edge to be ignored. * @param {Cell} ignoredEdge that represents an edge to be ignored.
*/ */
getDirectedEdgeCount( getDirectedEdgeCount(
outgoing: boolean, outgoing: boolean,
ignoredEdge: mxCell | null = null) { ignoredEdge: Cell | null = null) {
let count = 0; let count = 0;
const edgeCount = this.getEdgeCount(); const edgeCount = this.getEdgeCount();
@ -774,27 +774,27 @@ class mxCell {
/** /**
* Returns all edges of the given cell without loops. * Returns all edges of the given cell without loops.
*/ */
getConnections(): mxCellArray { getConnections(): CellArray {
return this.getEdges(true, true, false); return this.getEdges(true, true, false);
} }
/** /**
* Returns the incoming edges of the given cell without loops. * Returns the incoming edges of the given cell without loops.
*/ */
getIncomingEdges(): mxCellArray { getIncomingEdges(): CellArray {
return this.getEdges(true, false, false); return this.getEdges(true, false, false);
} }
/** /**
* Returns the outgoing edges of the given cell without loops. * Returns the outgoing edges of the given cell without loops.
*/ */
getOutgoingEdges(): mxCellArray { getOutgoingEdges(): CellArray {
return this.getEdges(false, true, false); return this.getEdges(false, true, false);
} }
/** /**
* Returns all distinct edges connected to this cell as a new array of * Returns all distinct edges connected to this cell as a new array of
* {@link mxCell}. If at least one of incoming or outgoing is true, then loops * {@link Cell}. If at least one of incoming or outgoing is true, then loops
* are ignored, otherwise if both are false, then all edges connected to * are ignored, otherwise if both are false, then all edges connected to
* the given cell are returned including loops. * the given cell are returned including loops.
* *
@ -809,9 +809,9 @@ class mxCell {
incoming: boolean = true, incoming: boolean = true,
outgoing: boolean = true, outgoing: boolean = true,
includeLoops: boolean = true includeLoops: boolean = true
): mxCellArray { ): CellArray {
const edgeCount = this.getEdgeCount(); const edgeCount = this.getEdgeCount();
const result = new mxCellArray(); const result = new CellArray();
for (let i = 0; i < edgeCount; i += 1) { for (let i = 0; i < edgeCount; i += 1) {
const edge = this.getEdgeAt(i); const edge = this.getEdgeAt(i);
@ -832,10 +832,10 @@ class mxCell {
/** /**
* Returns the absolute, accumulated origin for the children inside the * Returns the absolute, accumulated origin for the children inside the
* given parent as an {@link mxPoint}. * given parent as an {@link Point}.
*/ */
getOrigin(): mxPoint { getOrigin(): Point {
let result = new mxPoint(); let result = new Point();
const parent = this.getParent(); const parent = this.getParent();
if (parent) { if (parent) {
@ -857,7 +857,7 @@ class mxCell {
/** /**
* Returns all descendants of the given cell and the cell itself in an array. * Returns all descendants of the given cell and the cell itself in an array.
*/ */
getDescendants(): mxCellArray { getDescendants(): CellArray {
return this.filterDescendants(null); return this.filterDescendants(null);
} }
@ -877,12 +877,12 @@ class mxCell {
* var vertices = model.filterDescendants(filter); * var vertices = model.filterDescendants(filter);
* ``` * ```
* *
* @param filter JavaScript function that takes an {@link mxCell} as an argument * @param filter JavaScript function that takes an {@link Cell} as an argument
* and returns a boolean. * and returns a boolean.
*/ */
filterDescendants(filter: FilterFunction | null): mxCellArray { filterDescendants(filter: FilterFunction | null): CellArray {
// Creates a new array for storing the result // Creates a new array for storing the result
let result = new mxCellArray(); let result = new CellArray();
// Checks if the filter returns true for the cell // Checks if the filter returns true for the cell
// and adds it to the result array // and adds it to the result array
@ -894,7 +894,7 @@ class mxCell {
const childCount = this.getChildCount(); const childCount = this.getChildCount();
for (let i = 0; i < childCount; i += 1) { for (let i = 0; i < childCount; i += 1) {
const child = this.getChildAt(i); const child = this.getChildAt(i);
result = new mxCellArray(...result.concat(child.filterDescendants(filter))); result = new CellArray(...result.concat(child.filterDescendants(filter)));
} }
return result; return result;
@ -903,9 +903,9 @@ class mxCell {
/** /**
* Returns the root of the model or the topmost parent of the given cell. * Returns the root of the model or the topmost parent of the given cell.
*/ */
getRoot(): mxCell { getRoot(): Cell {
let root: mxCell = this; let root: Cell = this;
let cell: mxCell = this; let cell: Cell = this;
while (cell) { while (cell) {
root = cell; root = cell;
@ -916,4 +916,4 @@ class mxCell {
} }
} }
export default mxCell; export default Cell;

76
packages/core/src/view/cell/mxCellArray.ts → packages/core/src/view/cell/datatypes/CellArray.ts
View File

@ -1,44 +1,44 @@
import mxCell from "./mxCell"; import Cell from "./Cell";
import mxDictionary from "../../util/datatypes/mxDictionary"; import mxDictionary from "../../../util/mxDictionary";
import mxObjectIdentity from "../../util/datatypes/mxObjectIdentity"; import mxObjectIdentity from "../../../util/mxObjectIdentity";
class mxCellArray extends Array<mxCell> { class CellArray extends Array<Cell> {
// @ts-ignore // @ts-ignore
constructor(...items: mxCell[] | mxCellArray) { constructor(...items: Cell[] | CellArray) {
super(...items); super(...items);
} }
// @ts-ignore // @ts-ignore
concat(items: any): mxCellArray { concat(items: any): CellArray {
return new mxCellArray(...super.concat(items)); return new CellArray(...super.concat(items));
} }
// @ts-ignore // @ts-ignore
splice(arg0: number, ...args: any): mxCellArray { splice(arg0: number, ...args: any): CellArray {
return new mxCellArray(...super.splice(arg0, ...args)); return new CellArray(...super.splice(arg0, ...args));
} }
// @ts-ignore // @ts-ignore
slice(...args: any): mxCellArray { slice(...args: any): CellArray {
return new mxCellArray(...super.slice(...args)); return new CellArray(...super.slice(...args));
} }
// @ts-ignore // @ts-ignore
map(arg0: any, ...args: any): mxCellArray { map(arg0: any, ...args: any): CellArray {
return new mxCellArray(...<mxCell[]>super.map(arg0, ...args)); return new CellArray(...<Cell[]>super.map(arg0, ...args));
} }
// @ts-ignore // @ts-ignore
filter(arg0: any, ...args: any): mxCellArray { filter(arg0: any, ...args: any): CellArray {
return new mxCellArray(...<mxCell[]>super.filter(arg0, ...args)); return new CellArray(...<Cell[]>super.filter(arg0, ...args));
} }
/** /**
* Returns the cells from the given array where the given filter function * Returns the cells from the given array where the given filter function
* returns true. * returns true.
*/ */
filterCells(filter: Function): mxCellArray { filterCells(filter: Function): CellArray {
let result = new mxCellArray(); let result = new CellArray();
for (let i = 0; i < this.length; i += 1) { for (let i = 0; i < this.length; i += 1) {
if (filter(this[i])) { if (filter(this[i])) {
@ -51,19 +51,19 @@ class mxCellArray extends Array<mxCell> {
/** /**
* Returns all opposite vertices wrt terminal for the given edges, only * Returns all opposite vertices wrt terminal for the given edges, only
* returning sources and/or targets as specified. The result is returned * returning sources and/or targets as specified. The result is returned
* as an array of {@link mxCell}. * as an array of {@link Cell}.
* *
* @param {mxCell} terminal that specifies the known end of the edges. * @param {Cell} terminal that specifies the known end of the edges.
* @param sources Boolean that specifies if source terminals should be contained * @param sources Boolean that specifies if source terminals should be contained
* in the result. Default is true. * in the result. Default is true.
* @param targets Boolean that specifies if target terminals should be contained * @param targets Boolean that specifies if target terminals should be contained
* in the result. Default is true. * in the result. Default is true.
*/ */
getOpposites(terminal: mxCell, getOpposites(terminal: Cell,
sources: boolean=true, sources: boolean=true,
targets: boolean=true): mxCellArray { targets: boolean=true): CellArray {
const terminals = new mxCellArray(); const terminals = new CellArray();
for (let i = 0; i < this.length; i += 1) { for (let i = 0; i < this.length; i += 1) {
const source = this[i].getTerminal(true); const source = this[i].getTerminal(true);
@ -98,12 +98,12 @@ class mxCellArray extends Array<mxCell> {
/** /**
* Returns the topmost cells of the hierarchy in an array that contains no * Returns the topmost cells of the hierarchy in an array that contains no
* descendants for each {@link mxCell} that it contains. Duplicates should be * descendants for each {@link Cell} that it contains. Duplicates should be
* removed in the cells array to improve performance. * removed in the cells array to improve performance.
*/ */
getTopmostCells(): mxCellArray { getTopmostCells(): CellArray {
const dict = new mxDictionary(); const dict = new mxDictionary();
const tmp = new mxCellArray(); const tmp = new CellArray();
for (let i = 0; i < this.length; i += 1) { for (let i = 0; i < this.length; i += 1) {
dict.put(this[i], true); dict.put(this[i], true);
@ -133,7 +133,7 @@ class mxCellArray extends Array<mxCell> {
* Returns an array that represents the set (no duplicates) of all parents * Returns an array that represents the set (no duplicates) of all parents
* for the given array of cells. * for the given array of cells.
*/ */
getParents(): mxCell[] { getParents(): Cell[] {
const parents = []; const parents = [];
const dict = new mxDictionary(); const dict = new mxDictionary();
@ -148,7 +148,7 @@ class mxCellArray extends Array<mxCell> {
} }
/** /**
* Returns an array of clones for the given array of {@link mxCell}`. * Returns an array of clones for the given array of {@link Cell}`.
* Depending on the value of includeChildren, a deep clone is created for * Depending on the value of includeChildren, a deep clone is created for
* each cell. Connections are restored based if the corresponding * each cell. Connections are restored based if the corresponding
* cell is contained in the passed in array. * cell is contained in the passed in array.
@ -158,9 +158,9 @@ class mxCellArray extends Array<mxCell> {
* @param mapping Optional mapping for existing clones. * @param mapping Optional mapping for existing clones.
*/ */
cloneCells(includeChildren: boolean=true, cloneCells(includeChildren: boolean=true,
mapping: any={}): mxCellArray { mapping: any={}): CellArray {
const clones: mxCellArray = new mxCellArray(); const clones: CellArray = new CellArray();
for (const cell of this) { for (const cell of this) {
clones.push(this.cloneCellImpl(cell, mapping, includeChildren)); clones.push(this.cloneCellImpl(cell, mapping, includeChildren));
@ -168,7 +168,7 @@ class mxCellArray extends Array<mxCell> {
for (let i = 0; i < clones.length; i += 1) { for (let i = 0; i < clones.length; i += 1) {
if (clones[i] != null) { if (clones[i] != null) {
this.restoreClone(<mxCell>clones[i], this[i], mapping); this.restoreClone(<Cell>clones[i], this[i], mapping);
} }
} }
return clones; return clones;
@ -179,9 +179,9 @@ class mxCellArray extends Array<mxCell> {
* *
* @private * @private
*/ */
cloneCellImpl(cell: mxCell, cloneCellImpl(cell: Cell,
mapping: any={}, mapping: any={},
includeChildren: boolean): mxCell { includeChildren: boolean): Cell {
const ident = <string>mxObjectIdentity.get(cell); const ident = <string>mxObjectIdentity.get(cell);
let clone = mapping ? mapping[ident] : null; let clone = mapping ? mapping[ident] : null;
@ -195,7 +195,7 @@ class mxCellArray extends Array<mxCell> {
for (let i = 0; i < childCount; i += 1) { for (let i = 0; i < childCount; i += 1) {
const cloneChild = this.cloneCellImpl( const cloneChild = this.cloneCellImpl(
<mxCell>cell.getChildAt(i), <Cell>cell.getChildAt(i),
mapping, mapping,
true true
); );
@ -212,8 +212,8 @@ class mxCellArray extends Array<mxCell> {
* *
* @private * @private
*/ */
restoreClone(clone: mxCell, restoreClone(clone: Cell,
cell: mxCell, cell: Cell,
mapping: any): void { mapping: any): void {
const source = cell.getTerminal(true); const source = cell.getTerminal(true);
@ -236,12 +236,12 @@ class mxCellArray extends Array<mxCell> {
const childCount = clone.getChildCount(); const childCount = clone.getChildCount();
for (let i = 0; i < childCount; i += 1) { for (let i = 0; i < childCount; i += 1) {
this.restoreClone( this.restoreClone(
<mxCell>clone.getChildAt(i), <Cell>clone.getChildAt(i),
<mxCell>cell.getChildAt(i), <Cell>cell.getChildAt(i),
mapping mapping
); );
} }
} }
} }
export default mxCellArray; export default CellArray;

20
packages/core/src/view/cell/mxCellPath.ts → packages/core/src/view/cell/datatypes/CellPath.ts
View File

@ -4,13 +4,13 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxCell from './mxCell'; import Cell from './Cell';
/** /**
* Implements a mechanism for temporary cell Ids. * Implements a mechanism for temporary cell Ids.
* @class mxCellPath * @class CellPath
*/ */
class mxCellPath { class CellPath {
constructor() { constructor() {
throw new Error("Static class can't be instantiated!"); throw new Error("Static class can't be instantiated!");
} }
@ -29,13 +29,13 @@ class mxCellPath {
* *
* cell - Cell whose path should be returned. * cell - Cell whose path should be returned.
*/ */
static create(cell: mxCell): string { static create(cell: Cell): string {
let result = ''; let result = '';
let parent = cell.getParent(); let parent = cell.getParent();
while (parent) { while (parent) {
const index = parent.getIndex(cell); const index = parent.getIndex(cell);
result = index + mxCellPath.PATH_SEPARATOR + result; result = index + CellPath.PATH_SEPARATOR + result;
cell = parent; cell = parent;
parent = cell.getParent(); parent = cell.getParent();
@ -58,7 +58,7 @@ class mxCellPath {
* path - Path whose parent path should be returned. * path - Path whose parent path should be returned.
*/ */
static getParentPath(path: string) { static getParentPath(path: string) {
const index = path.lastIndexOf(mxCellPath.PATH_SEPARATOR); const index = path.lastIndexOf(CellPath.PATH_SEPARATOR);
if (index >= 0) { if (index >= 0) {
return path.substring(0, index); return path.substring(0, index);
@ -79,10 +79,10 @@ class mxCellPath {
* root - Root cell of the path to be resolved. * root - Root cell of the path to be resolved.
* path - String that defines the path. * path - String that defines the path.
*/ */
static resolve(root: mxCell, path: string) { static resolve(root: Cell, path: string) {
let parent: mxCell | null = root; let parent: Cell | null = root;
const tokens = path.split(mxCellPath.PATH_SEPARATOR); const tokens = path.split(CellPath.PATH_SEPARATOR);
for (let i = 0; i < tokens.length; i += 1) { for (let i = 0; i < tokens.length; i += 1) {
parent = parent.getChildAt(parseInt(tokens[i])); parent = parent.getChildAt(parseInt(tokens[i]));
} }
@ -123,4 +123,4 @@ class mxCellPath {
} }
} }
export default mxCellPath; export default CellPath;

70
packages/core/src/view/cell/mxCellState.ts → packages/core/src/view/cell/datatypes/CellState.ts
View File

@ -5,15 +5,15 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxPoint from '../../util/datatypes/mxPoint'; import Point from '../../geometry/Point';
import mxRectangle from '../../util/datatypes/mxRectangle'; import Rectangle from '../../geometry/Rectangle';
import mxCell from './mxCell'; import Cell from './Cell';
import mxGraphView from '../graph/mxGraphView'; import GraphView from '../../view/GraphView';
import mxShape from '../../shape/mxShape'; import Shape from '../../geometry/shape/Shape';
import mxText from '../../shape/mxText'; import mxText from '../../geometry/shape/mxText';
import mxDictionary from '../../util/datatypes/mxDictionary'; import mxDictionary from '../../../util/mxDictionary';
import type { CellStateStyles } from '../../types'; import type { CellStateStyles } from '../../../types';
/** /**
* Class: mxCellState * Class: mxCellState
@ -40,47 +40,47 @@ import type { CellStateStyles } from '../../types';
* cell - <mxCell> that this state represents. * cell - <mxCell> that this state represents.
* style - Array of key, value pairs that constitute the style. * style - Array of key, value pairs that constitute the style.
*/ */
class mxCellState extends mxRectangle { class CellState extends Rectangle {
constructor(view: mxGraphView, cell: mxCell, style: CellStateStyles) { constructor(view: GraphView, cell: Cell, style: CellStateStyles) {
super(); super();
this.view = view; this.view = view;
this.cell = cell; this.cell = cell;
this.style = style ?? {}; this.style = style ?? {};
this.origin = new mxPoint(); this.origin = new Point();
this.absoluteOffset = new mxPoint(); this.absoluteOffset = new Point();
} }
// referenced in mxCellRenderer // referenced in mxCellRenderer
node: HTMLElement | null = null; node: HTMLElement | null = null;
// TODO: Document me!! // TODO: Document me!!
cellBounds: mxRectangle | null = null; cellBounds: Rectangle | null = null;
paintBounds: mxRectangle | null = null; paintBounds: Rectangle | null = null;
boundingBox: mxRectangle | null = null; boundingBox: Rectangle | null = null;
// Used by mxCellRenderer's createControl() // Used by mxCellRenderer's createControl()
control: mxShape | null = null; control: Shape | null = null;
// Used by mxCellRenderer's createCellOverlays() // Used by mxCellRenderer's createCellOverlays()
overlays: mxDictionary<mxCell, mxShape> | null = null; overlays: mxDictionary<Cell, Shape> | null = null;
/** /**
* Variable: view * Variable: view
* *
* Reference to the enclosing <mxGraphView>. * Reference to the enclosing <mxGraphView>.
*/ */
view: mxGraphView; view: GraphView;
/** /**
* Variable: cell * Variable: cell
* *
* Reference to the <mxCell> that is represented by this state. * Reference to the <mxCell> that is represented by this state.
*/ */
cell: mxCell; cell: Cell;
/** /**
* Variable: style * Variable: style
@ -110,7 +110,7 @@ class mxCellState extends mxRectangle {
* <mxPoint> that holds the origin for all child cells. Default is a new * <mxPoint> that holds the origin for all child cells. Default is a new
* empty <mxPoint>. * empty <mxPoint>.
*/ */
origin: mxPoint; origin: Point;
/** /**
* Variable: absolutePoints * Variable: absolutePoints
@ -118,7 +118,7 @@ class mxCellState extends mxRectangle {
* Holds an array of <mxPoints> that represent the absolute points of an * Holds an array of <mxPoints> that represent the absolute points of an
* edge. * edge.
*/ */
absolutePoints: (mxPoint | null)[] = []; absolutePoints: (Point | null)[] = [];
/** /**
* Variable: absoluteOffset * Variable: absoluteOffset
@ -127,21 +127,21 @@ class mxCellState extends mxRectangle {
* absolute coordinates of the label position. For vertices, this is the * absolute coordinates of the label position. For vertices, this is the
* offset of the label relative to the top, left corner of the vertex. * offset of the label relative to the top, left corner of the vertex.
*/ */
absoluteOffset: mxPoint; absoluteOffset: Point;
/** /**
* Variable: visibleSourceState * Variable: visibleSourceState
* *
* Caches the visible source terminal state. * Caches the visible source terminal state.
*/ */
visibleSourceState: mxCellState | null = null; visibleSourceState: CellState | null = null;
/** /**
* Variable: visibleTargetState * Variable: visibleTargetState
* *
* Caches the visible target terminal state. * Caches the visible target terminal state.
*/ */
visibleTargetState: mxCellState | null = null; visibleTargetState: CellState | null = null;
/** /**
* Variable: terminalDistance * Variable: terminalDistance
@ -170,7 +170,7 @@ class mxCellState extends mxRectangle {
* *
* Holds the <mxShape> that represents the cell graphically. * Holds the <mxShape> that represents the cell graphically.
*/ */
shape: mxShape | null = null; shape: Shape | null = null;
/** /**
* Variable: text * Variable: text
@ -207,7 +207,7 @@ class mxCellState extends mxRectangle {
*/ */
getPerimeterBounds( getPerimeterBounds(
border: number = 0, border: number = 0,
bounds: mxRectangle = new mxRectangle( bounds: Rectangle = new Rectangle(
this.x, this.x,
this.y, this.y,
this.width, this.width,
@ -251,7 +251,7 @@ class mxCellState extends mxRectangle {
* isSource - Boolean that specifies if the first or last point should * isSource - Boolean that specifies if the first or last point should
* be assigned. * be assigned.
*/ */
setAbsoluteTerminalPoint(point: mxPoint, isSource = false) { setAbsoluteTerminalPoint(point: Point, isSource = false) {
if (isSource) { if (isSource) {
if (this.absolutePoints.length === 0) { if (this.absolutePoints.length === 0) {
this.absolutePoints.push(point); this.absolutePoints.push(point);
@ -307,7 +307,7 @@ class mxCellState extends mxRectangle {
* source - Boolean that specifies if the source or target state should be * source - Boolean that specifies if the source or target state should be
* returned. * returned.
*/ */
getVisibleTerminalState(source = false): mxCellState | null { getVisibleTerminalState(source = false): CellState | null {
return source ? this.visibleSourceState : this.visibleTargetState; return source ? this.visibleSourceState : this.visibleTargetState;
} }
@ -321,7 +321,7 @@ class mxCellState extends mxRectangle {
* terminalState - <mxCellState> that represents the terminal. * terminalState - <mxCellState> that represents the terminal.
* source - Boolean that specifies if the source or target state should be set. * source - Boolean that specifies if the source or target state should be set.
*/ */
setVisibleTerminalState(terminalState: mxCellState, source = false) { setVisibleTerminalState(terminalState: CellState, source = false) {
if (source) { if (source) {
this.visibleSourceState = terminalState; this.visibleSourceState = terminalState;
} else { } else {
@ -359,13 +359,13 @@ class mxCellState extends mxRectangle {
const tr = view.translate; const tr = view.translate;
const s = view.scale; const s = view.scale;
this.cellBounds = new mxRectangle( this.cellBounds = new Rectangle(
this.x / s - tr.x, this.x / s - tr.x,
this.y / s - tr.y, this.y / s - tr.y,
this.width / s, this.width / s,
this.height / s this.height / s
); );
this.paintBounds = mxRectangle.fromRectangle(this.cellBounds); this.paintBounds = Rectangle.fromRectangle(this.cellBounds);
if (this.shape && this.shape.isPaintBoundsInverted()) { if (this.shape && this.shape.isPaintBoundsInverted()) {
this.paintBounds.rotate90(); this.paintBounds.rotate90();
@ -377,7 +377,7 @@ class mxCellState extends mxRectangle {
* *
* Copies all fields from the given state to this state. * Copies all fields from the given state to this state.
*/ */
setState(state: mxCellState) { setState(state: CellState) {
this.view = state.view; this.view = state.view;
this.cell = state.cell; this.cell = state.cell;
this.style = state.style; this.style = state.style;
@ -402,7 +402,7 @@ class mxCellState extends mxRectangle {
* Returns a clone of this <mxPoint>. * Returns a clone of this <mxPoint>.
*/ */
clone() { clone() {
const clone = new mxCellState(this.view, this.cell, this.style); const clone = new CellState(this.view, this.cell, this.style);
// Clones the absolute points // Clones the absolute points
for (let i = 0; i < this.absolutePoints.length; i += 1) { for (let i = 0; i < this.absolutePoints.length; i += 1) {
@ -449,11 +449,11 @@ class mxCellState extends mxRectangle {
* *
* @param state {@link mxCellState} that represents a potential loop. * @param state {@link mxCellState} that represents a potential loop.
*/ */
isLoop(state: mxCellState) { isLoop(state: CellState) {
const src = this.getVisibleTerminalState(true); const src = this.getVisibleTerminalState(true);
const trg = this.getVisibleTerminalState(false); const trg = this.getVisibleTerminalState(false);
return src && src === trg; return src && src === trg;
} }
} }
export default mxCellState; export default CellState;

597
packages/core/src/view/cell/edge/Edge.ts Normal file
View File

@ -0,0 +1,597 @@
import Cell from "../datatypes/Cell";
import CellArray from "../datatypes/CellArray";
import {
findNearestSegment,
removeDuplicates,
} from "../../../util/Utils";
import Geometry from "../../geometry/Geometry";
import EventObject from "../../event/EventObject";
import InternalEvent from "../../event/InternalEvent";
import mxDictionary from "../../../util/mxDictionary";
import Graph from "../../Graph";
class Edge {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/*****************************************************************************
* Group: Cell alignment and orientation
*****************************************************************************/
/**
* Toggles the style of the given edge between null (or empty) and
* {@link alternateEdgeStyle}. This method fires {@link InternalEvent.FLIP_EDGE} while the
* transaction is in progress. Returns the edge that was flipped.
*
* Here is an example that overrides this implementation to invert the
* value of {@link 'elbow'} without removing any existing styles.
*
* ```javascript
* graph.flipEdge = function(edge)
* {
* if (edge != null)
* {
* var style = this.getCurrentCellStyle(edge);
* var elbow = mxUtils.getValue(style, 'elbow',
* mxConstants.ELBOW_HORIZONTAL);
* var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
* mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
* this.setCellStyles('elbow', value, [edge]);
* }
* };
* ```
*
* @param edge {@link mxCell} whose style should be changed.
*/
// flipEdge(edge: mxCell): mxCell;
flipEdge(edge: Cell): Cell {
if (this.alternateEdgeStyle != null) {
this.getModel().beginUpdate();
try {
const style = edge.getStyle();
if (style == null || style.length === 0) {
this.getModel().setStyle(edge, this.alternateEdgeStyle);
} else {
this.getModel().setStyle(edge, null);
}
// Removes all existing control points
this.resetEdge(edge);
this.fireEvent(new EventObject(InternalEvent.FLIP_EDGE, 'edge', edge));
} finally {
this.getModel().endUpdate();
}
}
return edge;
}
/**
* Adds a new edge into the given parent {@link Cell} using value as the user
* object and the given source and target as the terminals of the new edge.
* The id and style are used for the respective properties of the new
* {@link Cell}, which is returned.
*
* @param parent {@link mxCell} that specifies the parent of the new edge.
* @param id Optional string that defines the Id of the new edge.
* @param value JavaScript object to be used as the user object.
* @param source {@link mxCell} that defines the source of the edge.
* @param target {@link mxCell} that defines the target of the edge.
* @param style Optional string that defines the cell style.
*/
// insertEdge(parent: mxCell, id: string | null, value: any, source: mxCell, target: mxCell, style?: string): mxCell;
insertEdge(...args: any[]): Cell {
let parent: Cell;
let id: string = '';
let value: any; // note me - can be a string or a class instance!!!
let source: Cell;
let target: Cell;
let style: string; // TODO: Also allow for an object or class instance??
if (args.length === 1) {
// If only a single parameter, treat as an object
// This syntax can be more readable
const params = args[0];
parent = params.parent;
id = params.id || '';
value = params.value || '';
source = params.source;
target = params.target;
style = params.style;
} else {
// otherwise treat as individual arguments
[parent, id, value, source, target, style] = args;
}
const edge = this.createEdge(parent, id, value, source, target, style);
return this.addEdge(edge, parent, source, target);
}
/**
* Hook method that creates the new edge for {@link insertEdge}. This
* implementation does not set the source and target of the edge, these
* are set when the edge is added to the model.
*
*/
// createEdge(parent: mxCell, id: string | null, value: any, source: mxCell, target: mxCell, style?: string): mxCell;
createEdge(
parent: Cell | null = null,
id: string,
value: any,
source: Cell | null = null,
target: Cell | null = null,
style: any
) {
// Creates the edge
const edge = new Cell(value, new Geometry(), style);
edge.setId(id);
edge.setEdge(true);
(<Geometry>edge.geometry).relative = true;
return edge;
}
/**
* Adds the edge to the parent and connects it to the given source and
* target terminals. This is a shortcut method. Returns the edge that was
* added.
*
* @param edge {@link mxCell} to be inserted into the given parent.
* @param parent {@link mxCell} that represents the new parent. If no parent is
* given then the default parent is used.
* @param source Optional {@link Cell} that represents the source terminal.
* @param target Optional {@link Cell} that represents the target terminal.
* @param index Optional index to insert the cells at. Default is 'to append'.
*/
addEdge(
edge: Cell,
parent: Cell | null = null,
source: Cell | null = null,
target: Cell | null = null,
index: number | null = null
): Cell {
return this.addCell(edge, parent, index, source, target);
}
/*****************************************************************************
* Group: Cell cloning, insertion and removal
*****************************************************************************/
/**
* Function: splitEdge
*
* Splits the given edge by adding the newEdge between the previous source
* and the given cell and reconnecting the source of the given edge to the
* given cell. This method fires <mxEvent.SPLIT_EDGE> while the transaction
* is in progress. Returns the new edge that was inserted.
*
* Parameters:
*
* edge - <mxCell> that represents the edge to be splitted.
* cells - <mxCells> that represents the cells to insert into the edge.
* newEdge - <mxCell> that represents the edge to be inserted.
* dx - Optional integer that specifies the vector to move the cells.
* dy - Optional integer that specifies the vector to move the cells.
* x - Integer that specifies the x-coordinate of the drop location.
* y - Integer that specifies the y-coordinate of the drop location.
* parent - Optional parent to insert the cell. If null the parent of
* the edge is used.
*/
splitEdge(
edge: Cell,
cells: CellArray,
newEdge: Cell,
dx: number = 0,
dy: number = 0,
x: number,
y: number,
parent: Cell | null = null
) {
parent = parent != null ? parent : edge.getParent();
const source = edge.getTerminal(true);
this.getModel().beginUpdate();
try {
if (newEdge == null) {
newEdge = <Cell>this.cloneCell(edge);
// Removes waypoints before/after new cell
const state = this.getView().getState(edge);
let geo = newEdge.getGeometry();
if (geo != null && geo.points != null && state != null) {
const t = this.getView().translate;
const s = this.getView().scale;
const idx = findNearestSegment(
state,
(dx + t.x) * s,
(dy + t.y) * s
);
geo.points = geo.points.slice(0, idx);
geo = <Geometry>edge.getGeometry();
if (geo != null && geo.points != null) {
geo = <Geometry>geo.clone();
geo.points = geo.points.slice(idx);
this.getModel().setGeometry(edge, geo);
}
}
}
this.cellsMoved(cells, dx, dy, false, false);
this.cellsAdded(
cells,
parent,
parent ? parent.getChildCount() : 0,
null,
null,
true
);
this.cellsAdded(
new CellArray(newEdge),
parent,
parent ? parent.getChildCount() : 0,
source,
cells[0],
false
);
this.cellConnected(edge, cells[0], true);
this.fireEvent(
new EventObject(
InternalEvent.SPLIT_EDGE,
'edge',
edge,
'cells',
cells,
'newEdge',
newEdge,
'dx',
dx,
'dy',
dy
)
);
} finally {
this.getModel().endUpdate();
}
return newEdge;
}
/*****************************************************************************
* Group: Folding
*****************************************************************************/
/**
* Returns an array with the given cells and all edges that are connected
* to a cell or one of its descendants.
*/
addAllEdges(cells: CellArray): CellArray {
const allCells = cells.slice();
return new CellArray(...removeDuplicates(allCells.concat(this.getAllEdges(cells))));
}
/**
* Returns all edges connected to the given cells or its descendants.
*/
getAllEdges(cells: CellArray | null): CellArray {
let edges: CellArray = new CellArray();
if (cells != null) {
for (let i = 0; i < cells.length; i += 1) {
const edgeCount = cells[i].getEdgeCount();
for (let j = 0; j < edgeCount; j++) {
edges.push(<Cell>cells[i].getEdgeAt(j));
}
// Recurses
const children = cells[i].getChildren();
edges = edges.concat(this.getAllEdges(<CellArray>children));
}
}
return edges;
}
/**
* Returns the visible incoming edges for the given cell. If the optional
* parent argument is specified, then only child edges of the given parent
* are returned.
*
* @param cell {@link mxCell} whose incoming edges should be returned.
* @param parent Optional parent of the opposite end for an edge to be
* returned.
*/
getIncomingEdges(cell: Cell,
parent: Cell | null = null): CellArray {
return this.getEdges(cell, parent, true, false, false);
}
/**
* Returns the visible outgoing edges for the given cell. If the optional
* parent argument is specified, then only child edges of the given parent
* are returned.
*
* @param cell {@link mxCell} whose outgoing edges should be returned.
* @param parent Optional parent of the opposite end for an edge to be
* returned.
*/
getOutgoingEdges(cell: Cell,
parent: Cell | null = null): CellArray {
return this.getEdges(cell, parent, false, true, false);
}
/**
* Function: getEdges
*
* Returns the incoming and/or outgoing edges for the given cell.
* If the optional parent argument is specified, then only edges are returned
* where the opposite is in the given parent cell. If at least one of incoming
* or outgoing is true, then loops are ignored, if both are false, then all
* edges connected to the given cell are returned including loops.
*
* Parameters:
*
* cell - <mxCell> whose edges should be returned.
* parent - Optional parent of the opposite end for an edge to be
* returned.
* incoming - Optional boolean that specifies if incoming edges should
* be included in the result. Default is true.
* outgoing - Optional boolean that specifies if outgoing edges should
* be included in the result. Default is true.
* includeLoops - Optional boolean that specifies if loops should be
* included in the result. Default is true.
* recurse - Optional boolean the specifies if the parent specified only
* need be an ancestral parent, true, or the direct parent, false.
* Default is false
*/
getEdges(
cell: Cell,
parent: Cell | null = null,
incoming: boolean = true,
outgoing: boolean = true,
includeLoops: boolean = true,
recurse: boolean = false
): CellArray {
let edges: CellArray = new CellArray();
const isCollapsed = cell.isCollapsed();
const childCount = cell.getChildCount();
for (let i = 0; i < childCount; i += 1) {
const child = cell.getChildAt(i);
if (isCollapsed || !(<Cell>child).isVisible()) {
edges = edges.concat((<Cell>child).getEdges(incoming, outgoing));
}
}
edges = edges.concat(
<CellArray>cell.getEdges(incoming, outgoing)
);
const result = new CellArray();
for (let i = 0; i < edges.length; i += 1) {
const state = this.getView().getState(edges[i]);
const source =
state != null
? state.getVisibleTerminal(true)
: this.getView().getVisibleTerminal(edges[i], true);
const target =
state != null
? state.getVisibleTerminal(false)
: this.getView().getVisibleTerminal(edges[i], false);
if (
(includeLoops && source == target) ||
(source != target &&
((incoming &&
target == cell &&
(parent == null ||
this.isValidAncestor(<Cell>source, parent, recurse))) ||
(outgoing &&
source == cell &&
(parent == null ||
this.isValidAncestor(<Cell>target, parent, recurse)))))
) {
result.push(edges[i]);
}
}
return result;
}
/*****************************************************************************
* Group: Cell retrieval
*****************************************************************************/
/**
* Returns the visible child edges of the given parent.
*
* @param parent {@link mxCell} whose child vertices should be returned.
*/
getChildEdges(parent: Cell): CellArray {
return this.getChildCells(parent, false, true);
}
/**
* Returns the edges between the given source and target. This takes into
* account collapsed and invisible cells and returns the connected edges
* as displayed on the screen.
*
* source -
* target -
* directed -
*/
getEdgesBetween(source: Cell, target: Cell, directed: boolean = false): CellArray {
const edges = this.getEdges(source);
const result = new CellArray();
// Checks if the edge is connected to the correct
// cell and returns the first match
for (let i = 0; i < edges.length; i += 1) {
const state = this.getView().getState(edges[i]);
const src =
state != null
? state.getVisibleTerminal(true)
: this.getView().getVisibleTerminal(edges[i], true);
const trg =
state != null
? state.getVisibleTerminal(false)
: this.getView().getVisibleTerminal(edges[i], false);
if (
(src == source && trg == target) ||
(!directed && src == target && trg == source)
) {
result.push(edges[i]);
}
}
return result;
}
/*****************************************************************************
* Group: Cell moving
*****************************************************************************/
/**
* Resets the control points of the edges that are connected to the given
* cells if not both ends of the edge are in the given cells array.
*
* @param cells Array of {@link Cell} for which the connected edges should be
* reset.
*/
resetEdges(cells: CellArray): void {
if (cells != null) {
// Prepares faster cells lookup
const dict = new mxDictionary();
for (let i = 0; i < cells.length; i += 1) {
dict.put(cells[i], true);
}
this.getModel().beginUpdate();
try {
for (let i = 0; i < cells.length; i += 1) {
const edges = cells[i].getEdges();
if (edges != null) {
for (let j = 0; j < edges.length; j++) {
const state = this.getView().getState(edges[j]);
const source =
state != null
? state.getVisibleTerminal(true)
: this.getView().getVisibleTerminal(edges[j], true);
const target =
state != null
? state.getVisibleTerminal(false)
: this.getView().getVisibleTerminal(edges[j], false);
// Checks if one of the terminals is not in the given array
if (!dict.get(source) || !dict.get(target)) {
this.resetEdge(<Cell>edges[j]);
}
}
}
this.resetEdges(cells[i].getChildren());
}
} finally {
this.getModel().endUpdate();
}
}
}
/**
* Resets the control points of the given edge.
*
* @param edge {@link mxCell} whose points should be reset.
*/
resetEdge(edge: Cell): Cell | null {
let geo = edge.getGeometry();
// Resets the control points
if (geo != null && geo.points != null && geo.points.length > 0) {
geo = <Geometry>geo.clone();
geo.points = [];
this.getModel().setGeometry(edge, geo);
}
return edge;
}
/*****************************************************************************
* Group: Graph Behaviour
*****************************************************************************/
/**
* Returns {@link edgeLabelsMovable}.
*/
isEdgeLabelsMovable(): boolean {
return this.edgeLabelsMovable;
}
/**
* Sets {@link edgeLabelsMovable}.
*/
setEdgeLabelsMovable(value: boolean): void {
this.edgeLabelsMovable = value;
}
/**
* Specifies if dangling edges are allowed, that is, if edges are allowed
* that do not have a source and/or target terminal defined.
*
* @param value Boolean indicating if dangling edges are allowed.
*/
setAllowDanglingEdges(value: boolean): void {
this.allowDanglingEdges = value;
}
/**
* Returns {@link allowDanglingEdges} as a boolean.
*/
isAllowDanglingEdges(): boolean {
return this.allowDanglingEdges;
}
/**
* Specifies if edges should be connectable.
*
* @param value Boolean indicating if edges should be connectable.
*/
setConnectableEdges(value: boolean): void {
this.connectableEdges = value;
}
/**
* Returns {@link connectableEdges} as a boolean.
*/
isConnectableEdges(): boolean {
return this.connectableEdges;
}
/**
* Specifies if edges should be inserted when cloned but not valid wrt.
* {@link getEdgeValidationError}. If false such edges will be silently ignored.
*
* @param value Boolean indicating if cloned invalid edges should be
* inserted into the graph or ignored.
*/
setCloneInvalidEdges(value: boolean): void {
this.cloneInvalidEdges = value;
}
/**
* Returns {@link cloneInvalidEdges} as a boolean.
*/
isCloneInvalidEdges(): boolean {
return this.cloneInvalidEdges;
}
}
export default Edge;

26
packages/core/src/atomic_changes/mxTerminalChange.ts → packages/core/src/view/cell/edge/TerminalChange.ts
View File

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

176
packages/core/src/handler/mxEdgeHandler.js → packages/core/src/view/cell/edge/mxEdgeHandler.js
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxCellMarker from './mxCellMarker'; import CellMarker from '../CellMarker';
import mxPoint from '../util/datatypes/mxPoint'; import Point from '../../geometry/Point';
import { import {
CONNECT_HANDLE_FILLCOLOR, CONNECT_HANDLE_FILLCOLOR,
CURSOR_BEND_HANDLE, CURSOR_BEND_HANDLE,
@ -30,23 +30,23 @@ import {
NONE, NONE,
OUTLINE_HIGHLIGHT_COLOR, OUTLINE_HIGHLIGHT_COLOR,
OUTLINE_HIGHLIGHT_STROKEWIDTH, OUTLINE_HIGHLIGHT_STROKEWIDTH,
} from '../util/mxConstants'; } from '../../../util/Constants';
import mxUtils from '../util/mxUtils'; import utils from '../../../util/Utils';
import mxImageShape from '../shape/node/mxImageShape'; import ImageShape from '../../geometry/shape/node/ImageShape';
import mxRectangleShape from '../shape/node/mxRectangleShape'; import RectangleShape from '../../geometry/shape/node/RectangleShape';
import mxConnectionConstraint from '../view/connection/mxConnectionConstraint'; import mxConnectionConstraint from '../../connection/mxConnectionConstraint';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../../event/InternalEvent';
import mxConstraintHandler from './mxConstraintHandler'; import mxConstraintHandler from '../../connection/mxConstraintHandler';
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../../geometry/Rectangle';
import mxClient from '../mxClient'; import mxClient from '../../../mxClient';
import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle'; import EdgeStyle from '../../style/EdgeStyle';
import { import {
getClientX, getClientX,
getClientY, getClientY,
isAltDown, isAltDown,
isMouseEvent, isMouseEvent,
isShiftDown, isShiftDown,
} from '../util/mxEventUtils'; } from '../../../util/EventUtils';
/** /**
* Graph event handler that reconnects edges and modifies control points and the edge * Graph event handler that reconnects edges and modifies control points and the edge
@ -82,7 +82,7 @@ class mxEdgeHandler {
} }
}; };
this.state.view.graph.addListener(mxEvent.ESCAPE, this.escapeHandler); this.state.view.graph.addListener(InternalEvent.ESCAPE, this.escapeHandler);
} }
} }
@ -327,7 +327,7 @@ class mxEdgeHandler {
b.width !== pstate.width || b.width !== pstate.width ||
b.height !== pstate.height) b.height !== pstate.height)
) { ) {
this.parentHighlight.bounds = mxRectangle.fromRectangle(pstate); this.parentHighlight.bounds = Rectangle.fromRectangle(pstate);
this.parentHighlight.redraw(); this.parentHighlight.redraw();
} }
} else { } else {
@ -388,7 +388,7 @@ class mxEdgeHandler {
this.shape.init(this.graph.getView().getOverlayPane()); this.shape.init(this.graph.getView().getOverlayPane());
this.shape.pointerEvents = false; this.shape.pointerEvents = false;
this.shape.setCursor(CURSOR_MOVABLE_EDGE); this.shape.setCursor(CURSOR_MOVABLE_EDGE);
mxEvent.redirectMouseEvents(this.shape.node, this.graph, this.state); InternalEvent.redirectMouseEvents(this.shape.node, this.graph, this.state);
// Updates preferHtml // Updates preferHtml
this.preferHtml = this.preferHtml =
@ -431,7 +431,7 @@ class mxEdgeHandler {
} }
// Adds a rectangular handle for the label position // Adds a rectangular handle for the label position
this.label = new mxPoint( this.label = new Point(
this.state.absoluteOffset.x, this.state.absoluteOffset.x,
this.state.absoluteOffset.y this.state.absoluteOffset.y
); );
@ -469,7 +469,7 @@ class mxEdgeHandler {
(this.state.style.edge == null || (this.state.style.edge == null ||
this.state.style.edge === NONE || this.state.style.edge === NONE ||
this.state.style.noEdgeStyle == 1) && this.state.style.noEdgeStyle == 1) &&
mxUtils.getValue(this.state.style, 'shape', null) != 'arrow' utils.getValue(this.state.style, 'shape', null) != 'arrow'
); );
} }
@ -522,8 +522,8 @@ class mxEdgeHandler {
*/ */
// createParentHighlightShape(bounds: mxRectangle): mxRectangleShape; // createParentHighlightShape(bounds: mxRectangle): mxRectangleShape;
createParentHighlightShape(bounds) { createParentHighlightShape(bounds) {
const shape = new mxRectangleShape( const shape = new RectangleShape(
mxRectangle.fromRectangle(bounds), Rectangle.fromRectangle(bounds),
null, null,
this.getSelectionColor() this.getSelectionColor()
); );
@ -611,7 +611,7 @@ class mxEdgeHandler {
createMarker() { createMarker() {
const self = this; // closure const self = this; // closure
class MyMarker extends mxCellMarker { class MyMarker extends CellMarker {
// Only returns edges if they are connectable and never returns // Only returns edges if they are connectable and never returns
// the edge that is currently being modified // the edge that is currently being modified
getCell = (me) => { getCell = (me) => {
@ -732,7 +732,7 @@ class mxEdgeHandler {
bends.push(bend); bends.push(bend);
if (!terminal) { if (!terminal) {
this.points.push(new mxPoint(0, 0)); this.points.push(new Point(0, 0));
bend.node.style.visibility = 'hidden'; bend.node.style.visibility = 'hidden';
} }
})(i); })(i);
@ -812,8 +812,8 @@ class mxEdgeHandler {
// createHandleShape(index: number): mxRectangleShape; // createHandleShape(index: number): mxRectangleShape;
createHandleShape(index) { createHandleShape(index) {
if (this.handleImage != null) { if (this.handleImage != null) {
const shape = new mxImageShape( const shape = new ImageShape(
new mxRectangle(0, 0, this.handleImage.width, this.handleImage.height), new Rectangle(0, 0, this.handleImage.width, this.handleImage.height),
this.handleImage.src this.handleImage.src
); );
@ -828,8 +828,8 @@ class mxEdgeHandler {
s -= 1; s -= 1;
} }
return new mxRectangleShape( return new RectangleShape(
new mxRectangle(0, 0, s, s), new Rectangle(0, 0, s, s),
HANDLE_FILLCOLOR, HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR HANDLE_STROKECOLOR
); );
@ -843,8 +843,8 @@ class mxEdgeHandler {
// createLabelHandleShape(): mxRectangleShape; // createLabelHandleShape(): mxRectangleShape;
createLabelHandleShape() { createLabelHandleShape() {
if (this.labelHandleImage != null) { if (this.labelHandleImage != null) {
const shape = new mxImageShape( const shape = new ImageShape(
new mxRectangle( new Rectangle(
0, 0,
0, 0,
this.labelHandleImage.width, this.labelHandleImage.width,
@ -859,8 +859,8 @@ class mxEdgeHandler {
return shape; return shape;
} }
const s = LABEL_HANDLE_SIZE; const s = LABEL_HANDLE_SIZE;
return new mxRectangleShape( return new RectangleShape(
new mxRectangle(0, 0, s, s), new Rectangle(0, 0, s, s),
LABEL_HANDLE_FILLCOLOR, LABEL_HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR HANDLE_STROKECOLOR
); );
@ -886,7 +886,7 @@ class mxEdgeHandler {
bend.init(this.graph.getView().getOverlayPane()); bend.init(this.graph.getView().getOverlayPane());
} }
mxEvent.redirectMouseEvents( InternalEvent.redirectMouseEvents(
bend.node, bend.node,
this.graph, this.graph,
this.state, this.state,
@ -915,7 +915,7 @@ class mxEdgeHandler {
const tol = !isMouseEvent(me.getEvent()) ? this.tolerance : 1; const tol = !isMouseEvent(me.getEvent()) ? this.tolerance : 1;
const hit = const hit =
this.allowHandleBoundsCheck && tol > 0 this.allowHandleBoundsCheck && tol > 0
? new mxRectangle( ? new Rectangle(
me.getGraphX() - tol, me.getGraphX() - tol,
me.getGraphY() - tol, me.getGraphY() - tol,
2 * tol, 2 * tol,
@ -931,7 +931,7 @@ class mxEdgeHandler {
shape.node.style.display !== 'none' && shape.node.style.display !== 'none' &&
shape.node.style.visibility !== 'hidden' && shape.node.style.visibility !== 'hidden' &&
(me.isSource(shape) || (me.isSource(shape) ||
(hit != null && mxUtils.intersects(shape.bounds, hit))) (hit != null && utils.intersects(shape.bounds, hit)))
) { ) {
const dx = me.getGraphX() - shape.bounds.getCenterX(); const dx = me.getGraphX() - shape.bounds.getCenterX();
const dy = me.getGraphY() - shape.bounds.getCenterY(); const dy = me.getGraphY() - shape.bounds.getCenterY();
@ -952,13 +952,13 @@ class mxEdgeHandler {
for (let i = this.customHandles.length - 1; i >= 0; i--) { for (let i = this.customHandles.length - 1; i >= 0; i--) {
if (checkShape(this.customHandles[i].shape)) { if (checkShape(this.customHandles[i].shape)) {
// LATER: Return reference to active shape // LATER: Return reference to active shape
return mxEvent.CUSTOM_HANDLE - i; return InternalEvent.CUSTOM_HANDLE - i;
} }
} }
} }
if (me.isSource(this.state.text) || checkShape(this.labelShape)) { if (me.isSource(this.state.text) || checkShape(this.labelShape)) {
result = mxEvent.LABEL_HANDLE; result = InternalEvent.LABEL_HANDLE;
} }
if (this.bends != null) { if (this.bends != null) {
@ -972,7 +972,7 @@ class mxEdgeHandler {
if (this.virtualBends != null && this.isAddVirtualBendEvent(me)) { if (this.virtualBends != null && this.isAddVirtualBendEvent(me)) {
for (let i = 0; i < this.virtualBends.length; i += 1) { for (let i = 0; i < this.virtualBends.length; i += 1) {
if (checkShape(this.virtualBends[i])) { if (checkShape(this.virtualBends[i])) {
result = mxEvent.VIRTUAL_HANDLE - i; result = InternalEvent.VIRTUAL_HANDLE - i;
} }
} }
} }
@ -1018,7 +1018,7 @@ class mxEdgeHandler {
if (this.bends != null && this.bends[handle] != null) { if (this.bends != null && this.bends[handle] != null) {
const b = this.bends[handle].bounds; const b = this.bends[handle].bounds;
this.snapPoint = new mxPoint(b.getCenterX(), b.getCenterY()); this.snapPoint = new Point(b.getCenterX(), b.getCenterY());
} }
if ( if (
@ -1032,12 +1032,12 @@ class mxEdgeHandler {
if (this.removeEnabled && this.isRemovePointEvent(me.getEvent())) { if (this.removeEnabled && this.isRemovePointEvent(me.getEvent())) {
this.removePoint(this.state, handle); this.removePoint(this.state, handle);
} else if ( } else if (
handle !== mxEvent.LABEL_HANDLE || handle !== InternalEvent.LABEL_HANDLE ||
this.graph.isLabelMovable(me.getCell()) this.graph.isLabelMovable(me.getCell())
) { ) {
if (handle <= mxEvent.VIRTUAL_HANDLE) { if (handle <= InternalEvent.VIRTUAL_HANDLE) {
mxUtils.setOpacity( utils.setOpacity(
this.virtualBends[mxEvent.VIRTUAL_HANDLE - handle].node, this.virtualBends[InternalEvent.VIRTUAL_HANDLE - handle].node,
100 100
); );
} }
@ -1062,7 +1062,7 @@ class mxEdgeHandler {
this.isSource = this.bends == null ? false : index === 0; this.isSource = this.bends == null ? false : index === 0;
this.isTarget = this.isTarget =
this.bends == null ? false : index === this.bends.length - 1; this.bends == null ? false : index === this.bends.length - 1;
this.isLabel = index === mxEvent.LABEL_HANDLE; this.isLabel = index === InternalEvent.LABEL_HANDLE;
if (this.isSource || this.isTarget) { if (this.isSource || this.isTarget) {
const { cell } = this.state; const { cell } = this.state;
@ -1082,12 +1082,12 @@ class mxEdgeHandler {
// Hides other custom handles // Hides other custom handles
if ( if (
this.index <= mxEvent.CUSTOM_HANDLE && this.index <= InternalEvent.CUSTOM_HANDLE &&
this.index > mxEvent.VIRTUAL_HANDLE this.index > InternalEvent.VIRTUAL_HANDLE
) { ) {
if (this.customHandles != null) { if (this.customHandles != null) {
for (let i = 0; i < this.customHandles.length; i += 1) { for (let i = 0; i < this.customHandles.length; i += 1) {
if (i !== mxEvent.CUSTOM_HANDLE - this.index) { if (i !== InternalEvent.CUSTOM_HANDLE - this.index) {
this.customHandles[i].setVisible(false); this.customHandles[i].setVisible(false);
} }
} }
@ -1161,7 +1161,7 @@ class mxEdgeHandler {
getPointForEvent(me) { getPointForEvent(me) {
const view = this.graph.getView(); const view = this.graph.getView();
const { scale } = view; const { scale } = view;
const point = new mxPoint( const point = new Point(
this.roundLength(me.getGraphX() / scale) * scale, this.roundLength(me.getGraphX() / scale) * scale,
this.roundLength(me.getGraphY() / scale) * scale this.roundLength(me.getGraphY() / scale) * scale
); );
@ -1191,7 +1191,7 @@ class mxEdgeHandler {
const snapToTerminal = (terminal) => { const snapToTerminal = (terminal) => {
if (terminal != null) { if (terminal != null) {
snapToPoint( snapToPoint(
new mxPoint( new point(
view.getRoutingCenterX(terminal), view.getRoutingCenterX(terminal),
view.getRoutingCenterY(terminal) view.getRoutingCenterY(terminal)
) )
@ -1323,7 +1323,7 @@ class mxEdgeHandler {
getPreviewPoints(pt, me) { getPreviewPoints(pt, me) {
const geometry = this.state.cell.getGeometry(); const geometry = this.state.cell.getGeometry();
let points = geometry.points != null ? geometry.points.slice() : null; let points = geometry.points != null ? geometry.points.slice() : null;
const point = new mxPoint(pt.x, pt.y); const point = new Point(pt.x, pt.y);
let result = null; let result = null;
if (!this.isSource && !this.isTarget) { if (!this.isSource && !this.isTarget) {
@ -1333,8 +1333,8 @@ class mxEdgeHandler {
points = [point]; points = [point];
} else { } else {
// Adds point from virtual bend // Adds point from virtual bend
if (this.index <= mxEvent.VIRTUAL_HANDLE) { if (this.index <= InternalEvent.VIRTUAL_HANDLE) {
points.splice(mxEvent.VIRTUAL_HANDLE - this.index, 0, point); points.splice(InternalEvent.VIRTUAL_HANDLE - this.index, 0, point);
} }
// Removes point if dragged on terminal point // Removes point if dragged on terminal point
@ -1343,9 +1343,9 @@ class mxEdgeHandler {
if (i !== this.index) { if (i !== this.index) {
const bend = this.bends[i]; const bend = this.bends[i];
if (bend != null && mxUtils.contains(bend.bounds, pt.x, pt.y)) { if (bend != null && utils.contains(bend.bounds, pt.x, pt.y)) {
if (this.index <= mxEvent.VIRTUAL_HANDLE) { if (this.index <= InternalEvent.VIRTUAL_HANDLE) {
points.splice(mxEvent.VIRTUAL_HANDLE - this.index, 1); points.splice(InternalEvent.VIRTUAL_HANDLE - this.index, 1);
} else { } else {
points.splice(this.index - 1, 1); points.splice(this.index - 1, 1);
} }
@ -1377,7 +1377,7 @@ class mxEdgeHandler {
// Checks if point is not fixed // Checks if point is not fixed
if (c == null || this.graph.getConnectionPoint(src, c) == null) { if (c == null || this.graph.getConnectionPoint(src, c) == null) {
abs[0] = new mxPoint( abs[0] = new point(
src.view.getRoutingCenterX(src), src.view.getRoutingCenterX(src),
src.view.getRoutingCenterY(src) src.view.getRoutingCenterY(src)
); );
@ -1395,7 +1395,7 @@ class mxEdgeHandler {
// Checks if point is not fixed // Checks if point is not fixed
if (c == null || this.graph.getConnectionPoint(trg, c) == null) { if (c == null || this.graph.getConnectionPoint(trg, c) == null) {
abs[abs.length - 1] = new mxPoint( abs[abs.length - 1] = new point(
trg.view.getRoutingCenterX(trg), trg.view.getRoutingCenterX(trg),
trg.view.getRoutingCenterY(trg) trg.view.getRoutingCenterY(trg)
); );
@ -1406,7 +1406,7 @@ class mxEdgeHandler {
if ( if (
idx > 0 && idx > 0 &&
idx < abs.length - 1 && idx < abs.length - 1 &&
mxUtils.ptSegDistSq( utils.ptSegDistSq(
abs[idx - 1].x, abs[idx - 1].x,
abs[idx - 1].y, abs[idx - 1].y,
abs[idx + 1].x, abs[idx + 1].x,
@ -1426,7 +1426,7 @@ class mxEdgeHandler {
} }
// Updates existing point // Updates existing point
if (result == null && this.index > mxEvent.VIRTUAL_HANDLE) { if (result == null && this.index > InternalEvent.VIRTUAL_HANDLE) {
points[this.index - 1] = point; points[this.index - 1] = point;
} }
} }
@ -1445,7 +1445,7 @@ class mxEdgeHandler {
*/ */
// isOutlineConnectEvent(me: mxMouseEvent): boolean; // isOutlineConnectEvent(me: mxMouseEvent): boolean;
isOutlineConnectEvent(me) { isOutlineConnectEvent(me) {
const offset = mxUtils.getOffset(this.graph.container); const offset = utils.getOffset(this.graph.container);
const evt = me.getEvent(); const evt = me.getEvent();
const clientX = getClientX(evt); const clientX = getClientX(evt);
@ -1504,7 +1504,7 @@ class mxEdgeHandler {
// Handles special case where mouse is on outline away from actual end point // Handles special case where mouse is on outline away from actual end point
// in which case the grid is ignored and mouse point is used instead // in which case the grid is ignored and mouse point is used instead
if (me.isSource(this.marker.highlight.shape)) { if (me.isSource(this.marker.highlight.shape)) {
point = new mxPoint(me.getGraphX(), me.getGraphY()); point = new point(me.getGraphX(), me.getGraphY());
} }
constraint = this.graph.getOutlineConstraint(point, terminalState, me); constraint = this.graph.getOutlineConstraint(point, terminalState, me);
@ -1623,15 +1623,15 @@ class mxEdgeHandler {
} }
if ( if (
this.index <= mxEvent.CUSTOM_HANDLE && this.index <= InternalEvent.CUSTOM_HANDLE &&
this.index > mxEvent.VIRTUAL_HANDLE this.index > InternalEvent.VIRTUAL_HANDLE
) { ) {
if (this.customHandles != null) { if (this.customHandles != null) {
this.customHandles[mxEvent.CUSTOM_HANDLE - this.index].processEvent( this.customHandles[InternalEvent.CUSTOM_HANDLE - this.index].processEvent(
me me
); );
this.customHandles[ this.customHandles[
mxEvent.CUSTOM_HANDLE - this.index InternalEvent.CUSTOM_HANDLE - this.index
].positionChanged(); ].positionChanged();
if (this.shape != null && this.shape.node != null) { if (this.shape != null && this.shape.node != null) {
@ -1708,7 +1708,7 @@ class mxEdgeHandler {
// we add an offset of gridSize to the hint to avoid problem with hit detection // we add an offset of gridSize to the hint to avoid problem with hit detection
// in highlight.isHighlightAt (which uses comonentFromPoint) // in highlight.isHighlightAt (which uses comonentFromPoint)
this.drawPreview(); this.drawPreview();
mxEvent.consume(me.getEvent()); InternalEvent.consume(me.getEvent());
me.consume(); me.consume();
} }
} }
@ -1746,15 +1746,15 @@ class mxEdgeHandler {
this.graph.validationAlert(this.error); this.graph.validationAlert(this.error);
} }
} else if ( } else if (
index <= mxEvent.CUSTOM_HANDLE && index <= InternalEvent.CUSTOM_HANDLE &&
index > mxEvent.VIRTUAL_HANDLE index > InternalEvent.VIRTUAL_HANDLE
) { ) {
if (this.customHandles != null) { if (this.customHandles != null) {
const model = this.graph.getModel(); const model = this.graph.getModel();
model.beginUpdate(); model.beginUpdate();
try { try {
this.customHandles[mxEvent.CUSTOM_HANDLE - index].execute(me); this.customHandles[InternalEvent.CUSTOM_HANDLE - index].execute(me);
if (this.shape != null && this.shape.node != null) { if (this.shape != null && this.shape.node != null) {
this.shape.apply(this.state); this.shape.apply(this.state);
@ -1986,9 +1986,9 @@ class mxEdgeHandler {
// Resets the offset inside the geometry to find the offset // Resets the offset inside the geometry to find the offset
// from the resulting point // from the resulting point
geometry.offset = new mxPoint(0, 0); geometry.offset = new Point(0, 0);
pt = this.graph.view.getPoint(edgeState, geometry); pt = this.graph.view.getPoint(edgeState, geometry);
geometry.offset = new mxPoint( geometry.offset = new Point(
Math.round((x - pt.x) / scale), Math.round((x - pt.x) / scale),
Math.round((y - pt.y) / scale) Math.round((y - pt.y) / scale)
); );
@ -2001,7 +2001,7 @@ class mxEdgeHandler {
const cx = p0.x + (pe.x - p0.x) / 2; const cx = p0.x + (pe.x - p0.x) / 2;
const cy = p0.y + (pe.y - p0.y) / 2; const cy = p0.y + (pe.y - p0.y) / 2;
geometry.offset = new mxPoint( geometry.offset = new Point(
Math.round((x - cx) / scale), Math.round((x - cx) / scale),
Math.round((y - cy) / scale) Math.round((y - cy) / scale)
); );
@ -2132,7 +2132,7 @@ class mxEdgeHandler {
*/ */
// addPoint(state: mxCellState, evt: Event): void; // addPoint(state: mxCellState, evt: Event): void;
addPoint(state, evt) { addPoint(state, evt) {
const pt = mxUtils.convertPoint( const pt = utils.convertPoint(
this.graph.container, this.graph.container,
getClientX(evt), getClientX(evt),
getClientY(evt) getClientY(evt)
@ -2140,7 +2140,7 @@ class mxEdgeHandler {
const gridEnabled = this.graph.isGridEnabledEvent(evt); const gridEnabled = this.graph.isGridEnabledEvent(evt);
this.convertPoint(pt, gridEnabled); this.convertPoint(pt, gridEnabled);
this.addPointAt(state, pt.x, pt.y); this.addPointAt(state, pt.x, pt.y);
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
/** /**
@ -2151,22 +2151,22 @@ class mxEdgeHandler {
// addPointAt(state: mxCellState, x: number, y: number): void; // addPointAt(state: mxCellState, x: number, y: number): void;
addPointAt(state, x, y) { addPointAt(state, x, y) {
let geo = state.cell.getGeometry(); let geo = state.cell.getGeometry();
const pt = new mxPoint(x, y); const pt = new Point(x, y);
if (geo != null) { if (geo != null) {
geo = geo.clone(); geo = geo.clone();
const t = this.graph.view.translate; const t = this.graph.view.translate;
const s = this.graph.view.scale; const s = this.graph.view.scale;
let offset = new mxPoint(t.x * s, t.y * s); let offset = new Point(t.x * s, t.y * s);
const parent = this.state.cell.getParent(); const parent = this.state.cell.getParent();
if (parent.isVertex()) { if (parent.isVertex()) {
const pState = this.graph.view.getState(parent); const pState = this.graph.view.getState(parent);
offset = new mxPoint(pState.x, pState.y); offset = new Point(pState.x, pState.y);
} }
const index = mxUtils.findNearestSegment( const index = utils.findNearestSegment(
state, state,
pt.x * s + offset.x, pt.x * s + offset.x,
pt.y * s + offset.y pt.y * s + offset.y
@ -2280,11 +2280,11 @@ class mxEdgeHandler {
// Updates the handle for the label position // Updates the handle for the label position
let b = this.labelShape.bounds; let b = this.labelShape.bounds;
this.label = new mxPoint( this.label = new Point(
this.state.absoluteOffset.x, this.state.absoluteOffset.x,
this.state.absoluteOffset.y this.state.absoluteOffset.y
); );
this.labelShape.bounds = new mxRectangle( this.labelShape.bounds = new Rectangle(
Math.round(this.label.x - b.width / 2), Math.round(this.label.x - b.width / 2),
Math.round(this.label.y - b.height / 2), Math.round(this.label.y - b.height / 2),
b.width, b.width,
@ -2304,7 +2304,7 @@ class mxEdgeHandler {
const y0 = p0.y; const y0 = p0.y;
b = this.bends[0].bounds; b = this.bends[0].bounds;
this.bends[0].bounds = new mxRectangle( this.bends[0].bounds = new Rectangle(
Math.floor(x0 - b.width / 2), Math.floor(x0 - b.width / 2),
Math.floor(y0 - b.height / 2), Math.floor(y0 - b.height / 2),
b.width, b.width,
@ -2323,7 +2323,7 @@ class mxEdgeHandler {
const bn = this.bends.length - 1; const bn = this.bends.length - 1;
b = this.bends[bn].bounds; b = this.bends[bn].bounds;
this.bends[bn].bounds = new mxRectangle( this.bends[bn].bounds = new Rectangle(
Math.floor(xn - b.width / 2), Math.floor(xn - b.width / 2),
Math.floor(yn - b.height / 2), Math.floor(yn - b.height / 2),
b.width, b.width,
@ -2352,14 +2352,14 @@ class mxEdgeHandler {
b = this.virtualBends[i]; b = this.virtualBends[i];
const x = last.x + (pt.x - last.x) / 2; const x = last.x + (pt.x - last.x) / 2;
const y = last.y + (pt.y - last.y) / 2; const y = last.y + (pt.y - last.y) / 2;
b.bounds = new mxRectangle( b.bounds = new Rectangle(
Math.floor(x - b.bounds.width / 2), Math.floor(x - b.bounds.width / 2),
Math.floor(y - b.bounds.height / 2), Math.floor(y - b.bounds.height / 2),
b.bounds.width, b.bounds.width,
b.bounds.height b.bounds.height
); );
b.redraw(); b.redraw();
mxUtils.setOpacity(b.node, this.virtualBendOpacity); utils.setOpacity(b.node, this.virtualBendOpacity);
last = pt; last = pt;
if (this.manageLabelHandle) { if (this.manageLabelHandle) {
@ -2452,7 +2452,7 @@ class mxEdgeHandler {
const b = this.bends[i].bounds; const b = this.bends[i].bounds;
this.bends[i].node.style.visibility = 'visible'; this.bends[i].node.style.visibility = 'visible';
this.bends[i].bounds = new mxRectangle( this.bends[i].bounds = new Rectangle(
Math.round(x - b.width / 2), Math.round(x - b.width / 2),
Math.round(y - b.height / 2), Math.round(y - b.height / 2),
b.width, b.width,
@ -2464,11 +2464,11 @@ class mxEdgeHandler {
} else if ( } else if (
this.handleImage == null && this.handleImage == null &&
this.labelShape.visible && this.labelShape.visible &&
mxUtils.intersects(this.bends[i].bounds, this.labelShape.bounds) utils.intersects(this.bends[i].bounds, this.labelShape.bounds)
) { ) {
const w = HANDLE_SIZE + 3; const w = HANDLE_SIZE + 3;
const h = HANDLE_SIZE + 3; const h = HANDLE_SIZE + 3;
this.bends[i].bounds = new mxRectangle( this.bends[i].bounds = new Rectangle(
Math.round(x - w / 2), Math.round(x - w / 2),
Math.round(y - h / 2), Math.round(y - h / 2),
w, w,
@ -2496,7 +2496,7 @@ class mxEdgeHandler {
if (this.labelShape != null) { if (this.labelShape != null) {
const b2 = this.labelShape.bounds; const b2 = this.labelShape.bounds;
if (mxUtils.intersects(b, b2)) { if (utils.intersects(b, b2)) {
if (b.getCenterY() < b2.getCenterY()) { if (b.getCenterY() < b2.getCenterY()) {
b2.y = b.y + b.height; b2.y = b.y + b.height;
} else { } else {
@ -2516,7 +2516,7 @@ class mxEdgeHandler {
try { try {
if (this.isLabel) { if (this.isLabel) {
const b = this.labelShape.bounds; const b = this.labelShape.bounds;
const bounds = new mxRectangle( const bounds = new Rectangle(
Math.round(this.label.x - b.width / 2), Math.round(this.label.x - b.width / 2),
Math.round(this.label.y - b.height / 2), Math.round(this.label.y - b.height / 2),
b.width, b.width,
@ -2531,7 +2531,7 @@ class mxEdgeHandler {
if ( if (
this.shape != null && this.shape != null &&
!mxUtils.equalPoints(this.shape.points, this.abspoints) !utils.equalPoints(this.shape.points, this.abspoints)
) { ) {
this.shape.apply(this.state); this.shape.apply(this.state);
this.shape.points = this.abspoints.slice(); this.shape.points = this.abspoints.slice();

38
packages/core/src/handler/mxEdgeSegmentHandler.js → packages/core/src/view/cell/edge/mxEdgeSegmentHandler.js
View File

@ -4,10 +4,10 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxPoint from '../util/datatypes/mxPoint'; import Point from '../../geometry/Point';
import { CURSOR_TERMINAL_HANDLE } from '../util/mxConstants'; import { CURSOR_TERMINAL_HANDLE } from '../../../util/Constants';
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../../geometry/Rectangle';
import mxUtils from '../util/mxUtils'; import utils from '../../../util/Utils';
import mxElbowEdgeHandler from './mxElbowEdgeHandler'; import mxElbowEdgeHandler from './mxElbowEdgeHandler';
class mxEdgeSegmentHandler extends mxElbowEdgeHandler { class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
@ -42,8 +42,8 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
pts = [ pts = [
pts[0], pts[0],
new mxPoint(cx, cy), new Point(cx, cy),
new mxPoint(cx, cy), new Point(cx, cy),
pts[pts.length - 1], pts[pts.length - 1],
]; ];
} }
@ -100,8 +100,8 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
const y = result[0].y * scale + tr.y; const y = result[0].y * scale + tr.y;
if ( if (
(source != null && mxUtils.contains(source, x, y)) || (source != null && utils.contains(source, x, y)) ||
(target != null && mxUtils.contains(target, x, y)) (target != null && utils.contains(target, x, y))
) { ) {
result = [point, point]; result = [point, point];
} }
@ -197,7 +197,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
} }
} }
result = [new mxPoint(point.x, y0), new mxPoint(point.x, ye)]; result = [new point(point.x, y0), new point(point.x, ye)];
} }
this.points = result; this.points = result;
@ -288,7 +288,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
!this.isSource && !this.isSource &&
!this.isTarget !this.isTarget
) { ) {
mxUtils.setOpacity(this.bends[index].node, 100); utils.setOpacity(this.bends[index].node, 100);
} }
} }
@ -325,7 +325,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
} }
bend.setCursor(horizontal ? 'col-resize' : 'row-resize'); bend.setCursor(horizontal ? 'col-resize' : 'row-resize');
this.points.push(new mxPoint(0, 0)); this.points.push(new Point(0, 0));
} }
} }
@ -372,12 +372,12 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
if (Math.round(pts[0].y - pts[pts.length - 1].y) === 0) { if (Math.round(pts[0].y - pts[pts.length - 1].y) === 0) {
const cx = pts[0].x + (pts[pts.length - 1].x - pts[0].x) / 2; const cx = pts[0].x + (pts[pts.length - 1].x - pts[0].x) / 2;
pts[1] = new mxPoint(cx, pts[1].y); pts[1] = new Point(cx, pts[1].y);
pts[2] = new mxPoint(cx, pts[2].y); pts[2] = new Point(cx, pts[2].y);
} else { } else {
const cy = pts[0].y + (pts[pts.length - 1].y - pts[0].y) / 2; const cy = pts[0].y + (pts[pts.length - 1].y - pts[0].y) / 2;
pts[1] = new mxPoint(pts[1].x, cy); pts[1] = new Point(pts[1].x, cy);
pts[2] = new mxPoint(pts[2].x, cy); pts[2] = new Point(pts[2].x, cy);
} }
} }
@ -385,12 +385,12 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
if (this.bends[i + 1] != null) { if (this.bends[i + 1] != null) {
p0 = pts[i]; p0 = pts[i];
pe = pts[i + 1]; pe = pts[i + 1];
const pt = new mxPoint( const pt = new Point(
p0.x + (pe.x - p0.x) / 2, p0.x + (pe.x - p0.x) / 2,
p0.y + (pe.y - p0.y) / 2 p0.y + (pe.y - p0.y) / 2
); );
const b = this.bends[i + 1].bounds; const b = this.bends[i + 1].bounds;
this.bends[i + 1].bounds = new mxRectangle( this.bends[i + 1].bounds = new Rectangle(
Math.floor(pt.x - b.width / 2), Math.floor(pt.x - b.width / 2),
Math.floor(pt.y - b.height / 2), Math.floor(pt.y - b.height / 2),
b.width, b.width,
@ -405,8 +405,8 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
} }
if (straight) { if (straight) {
mxUtils.setOpacity(this.bends[1].node, this.virtualBendOpacity); utils.setOpacity(this.bends[1].node, this.virtualBendOpacity);
mxUtils.setOpacity(this.bends[3].node, this.virtualBendOpacity); utils.setOpacity(this.bends[3].node, this.virtualBendOpacity);
} }
} }
} }

34
packages/core/src/handler/mxElbowEdgeHandler.js → packages/core/src/view/cell/edge/mxElbowEdgeHandler.js
View File

@ -11,15 +11,15 @@ import {
EDGESTYLE_TOPTOBOTTOM, EDGESTYLE_TOPTOBOTTOM,
ELBOW_VERTICAL, ELBOW_VERTICAL,
HANDLE_SIZE, HANDLE_SIZE,
} from '../util/mxConstants'; } from '../../../util/Constants';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../../event/InternalEvent';
import mxPoint from '../util/datatypes/mxPoint'; import Point from '../../geometry/Point';
import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle'; import EdgeStyle from '../../style/EdgeStyle';
import mxResources from '../util/mxResources'; import Resources from '../../../util/Resources';
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../../geometry/Rectangle';
import mxUtils from '../util/mxUtils'; import utils from '../../../util/Utils';
import mxClient from '../mxClient'; import mxClient from '../../../mxClient';
import { isConsumed } from '../util/mxEventUtils'; import { isConsumed } from '../../../util/EventUtils';
/** /**
* Class: mxElbowEdgeHandler * Class: mxElbowEdgeHandler
@ -80,12 +80,12 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
this.createVirtualBend((evt) => { this.createVirtualBend((evt) => {
if (!isConsumed(evt) && this.flipEnabled) { if (!isConsumed(evt) && this.flipEnabled) {
this.graph.flipEdge(this.state.cell, evt); this.graph.flipEdge(this.state.cell, evt);
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
}) })
); );
this.points.push(new mxPoint(0, 0)); this.points.push(new Point(0, 0));
// Target // Target
bend = this.createHandleShape(2); bend = this.createHandleShape(2);
@ -147,7 +147,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
(node === this.bends[1].node || node.parentNode === this.bends[1].node) (node === this.bends[1].node || node.parentNode === this.bends[1].node)
) { ) {
tip = this.doubleClickOrientationResource; tip = this.doubleClickOrientationResource;
tip = mxResources.get(tip) || tip; // translate tip = Resources.get(tip) || tip; // translate
} }
return tip; return tip;
@ -206,9 +206,9 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
} }
if (pt == null) { if (pt == null) {
pt = new mxPoint(p0.x + (pe.x - p0.x) / 2, p0.y + (pe.y - p0.y) / 2); pt = new Point(p0.x + (pe.x - p0.x) / 2, p0.y + (pe.y - p0.y) / 2);
} else { } else {
pt = new mxPoint( pt = new Point(
this.graph.getView().scale * this.graph.getView().scale *
(pt.x + this.graph.getView().translate.x + this.state.origin.x), (pt.x + this.graph.getView().translate.x + this.state.origin.x),
this.graph.getView().scale * this.graph.getView().scale *
@ -221,7 +221,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
const b = this.bends[1].bounds; const b = this.bends[1].bounds;
let w = b.width; let w = b.width;
let h = b.height; let h = b.height;
let bounds = new mxRectangle( let bounds = new Rectangle(
Math.round(pt.x - w / 2), Math.round(pt.x - w / 2),
Math.round(pt.y - h / 2), Math.round(pt.y - h / 2),
w, w,
@ -233,11 +233,11 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
} else if ( } else if (
this.handleImage == null && this.handleImage == null &&
this.labelShape.visible && this.labelShape.visible &&
mxUtils.intersects(bounds, this.labelShape.bounds) utils.intersects(bounds, this.labelShape.bounds)
) { ) {
w = HANDLE_SIZE + 3; w = HANDLE_SIZE + 3;
h = HANDLE_SIZE + 3; h = HANDLE_SIZE + 3;
bounds = new mxRectangle( bounds = new Rectangle(
Math.floor(pt.x - w / 2), Math.floor(pt.x - w / 2),
Math.floor(pt.y - h / 2), Math.floor(pt.y - h / 2),
w, w,

36
packages/core/src/handler/mxHandle.js → packages/core/src/view/cell/edge/mxHandle.js
View File

@ -5,19 +5,19 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxUtils from '../util/mxUtils'; import utils from '../../../util/Utils';
import mxPoint from '../util/datatypes/mxPoint'; import Point from '../../geometry/Point';
import mxImageShape from '../shape/node/mxImageShape'; import ImageShape from '../../geometry/shape/node/ImageShape';
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../../geometry/Rectangle';
import mxRectangleShape from '../shape/node/mxRectangleShape'; import RectangleShape from '../../geometry/shape/node/RectangleShape';
import { import {
DIALECT_STRICTHTML, DIALECT_STRICTHTML,
DIALECT_SVG, DIALECT_SVG,
HANDLE_FILLCOLOR, HANDLE_FILLCOLOR,
HANDLE_SIZE, HANDLE_SIZE,
HANDLE_STROKECOLOR, HANDLE_STROKECOLOR,
} from '../util/mxConstants'; } from '../../../util/Constants';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../../event/InternalEvent';
/** /**
* Implements a single custom handle for vertices. * Implements a single custom handle for vertices.
@ -85,7 +85,7 @@ class mxHandle {
processEvent(me) { processEvent(me) {
const { scale } = this.graph.view; const { scale } = this.graph.view;
const tr = this.graph.view.translate; const tr = this.graph.view.translate;
let pt = new mxPoint( let pt = new Point(
me.getGraphX() / scale - tr.x, me.getGraphX() / scale - tr.x,
me.getGraphY() / scale - tr.y me.getGraphY() / scale - tr.y
); );
@ -97,8 +97,8 @@ class mxHandle {
} }
// Snaps to grid for the rotated position then applies the rotation for the direction after that // Snaps to grid for the rotated position then applies the rotation for the direction after that
const alpha1 = -mxUtils.toRadians(this.getRotation()); const alpha1 = -utils.toRadians(this.getRotation());
const alpha2 = -mxUtils.toRadians(this.getTotalRotation()) - alpha1; const alpha2 = -utils.toRadians(this.getTotalRotation()) - alpha1;
pt = this.flipPoint( pt = this.flipPoint(
this.rotatePoint( this.rotatePoint(
this.snapPoint( this.snapPoint(
@ -162,8 +162,8 @@ class mxHandle {
const html = this.isHtmlRequired(); const html = this.isHtmlRequired();
if (this.image != null) { if (this.image != null) {
this.shape = new mxImageShape( this.shape = new ImageShape(
new mxRectangle(0, 0, this.image.width, this.image.height), new Rectangle(0, 0, this.image.width, this.image.height),
this.image.src this.image.src
); );
this.shape.preserveImageAspect = false; this.shape.preserveImageAspect = false;
@ -179,9 +179,9 @@ class mxHandle {
*/ */
// createShape(html: any): mxShape; // createShape(html: any): mxShape;
createShape(html) { createShape(html) {
const bounds = new mxRectangle(0, 0, HANDLE_SIZE, HANDLE_SIZE); const bounds = new Rectangle(0, 0, HANDLE_SIZE, HANDLE_SIZE);
return new mxRectangleShape(bounds, HANDLE_FILLCOLOR, HANDLE_STROKECOLOR); return new RectangleShape(bounds, HANDLE_FILLCOLOR, HANDLE_STROKECOLOR);
} }
/** /**
@ -201,7 +201,7 @@ class mxHandle {
} }
} }
mxEvent.redirectMouseEvents(this.shape.node, this.graph, this.state); InternalEvent.redirectMouseEvents(this.shape.node, this.graph, this.state);
this.shape.node.style.cursor = this.cursor; this.shape.node.style.cursor = this.cursor;
} }
@ -214,7 +214,7 @@ class mxHandle {
let pt = this.getPosition(this.state.getPaintBounds()); let pt = this.getPosition(this.state.getPaintBounds());
if (pt != null) { if (pt != null) {
const alpha = mxUtils.toRadians(this.getTotalRotation()); const alpha = utils.toRadians(this.getTotalRotation());
pt = this.rotatePoint(this.flipPoint(pt), alpha); pt = this.rotatePoint(this.flipPoint(pt), alpha);
const { scale } = this.graph.view; const { scale } = this.graph.view;
@ -250,11 +250,11 @@ class mxHandle {
// rotatePoint(pt: mxPoint, alpha: boolean): mxPoint; // rotatePoint(pt: mxPoint, alpha: boolean): mxPoint;
rotatePoint(pt, alpha) { rotatePoint(pt, alpha) {
const bounds = this.state.getCellBounds(); const bounds = this.state.getCellBounds();
const cx = new mxPoint(bounds.getCenterX(), bounds.getCenterY()); const cx = new Point(bounds.getCenterX(), bounds.getCenterY());
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
return mxUtils.getRotatedPoint(pt, cos, sin, cx); return utils.getRotatedPoint(pt, cos, sin, cx);
} }
/** /**

171
packages/core/src/view/cell/vertex/Vertex.ts Normal file
View File

@ -0,0 +1,171 @@
import Cell from "../datatypes/Cell";
import Geometry from "../../geometry/Geometry";
import CellArray from "../datatypes/CellArray";
class Vertex {
/**
* Specifies the return value for vertices in {@link isLabelMovable}.
* @default false
*/
vertexLabelsMovable: boolean = false;
/**
* Function: insertVertex
*
* Adds a new vertex into the given parent <mxCell> using value as the user
* object and the given coordinates as the <mxGeometry> of the new vertex.
* The id and style are used for the respective properties of the new
* <mxCell>, which is returned.
*
* When adding new vertices from a mouse event, one should take into
* account the offset of the graph container and the scale and translation
* of the view in order to find the correct unscaled, untranslated
* coordinates using <mxGraph.getPointForEvent> as follows:
*
* (code)
* let pt = graph.getPointForEvent(evt);
* let parent = graph.getDefaultParent();
* graph.insertVertex(parent, null,
* 'Hello, World!', x, y, 220, 30);
* (end)
*
* For adding image cells, the style parameter can be assigned as
*
* (code)
* stylename;image=imageUrl
* (end)
*
* See <mxGraph> for more information on using images.
*
* Parameters:
*
* parent - <mxCell> that specifies the parent of the new vertex.
* id - Optional string that defines the Id of the new vertex.
* value - Object to be used as the user object.
* x - Integer that defines the x coordinate of the vertex.
* y - Integer that defines the y coordinate of the vertex.
* width - Integer that defines the width of the vertex.
* height - Integer that defines the height of the vertex.
* style - Optional string that defines the cell style.
* relative - Optional boolean that specifies if the geometry is relative.
* Default is false.
* geometryClass - Optional class reference to a class derived from mxGeometry.
* This can be useful for defining custom constraints.
*/
insertVertex = (...args: any[]): Cell => {
let parent;
let id;
let value;
let x;
let y;
let width;
let height;
let style;
let relative;
let geometryClass;
if (args.length === 1) {
// If only a single parameter, treat as an object
// This syntax can be more readable
const params = args[0];
parent = params.parent;
id = params.id;
value = params.value;
x = 'x' in params ? params.x : params.position[0];
y = 'y' in params ? params.y : params.position[1];
width = 'width' in params ? params.width : params.size[0];
height = 'height' in params ? params.height : params.size[1];
style = params.style;
relative = params.relative;
geometryClass = params.geometryClass;
} else {
// Otherwise treat as arguments
[
parent,
id,
value,
x,
y,
width,
height,
style,
relative,
geometryClass,
] = args;
}
const vertex = this.createVertex(
parent,
id,
value,
x,
y,
width,
height,
style,
relative,
geometryClass
);
return this.addCell(vertex, parent);
};
/**
* Function: createVertex
*
* Hook method that creates the new vertex for <insertVertex>.
*/
createVertex(
parent: Cell,
id: string,
value: any,
x: number,
y: number,
width: number,
height: number,
style: any,
relative: boolean = false,
geometryClass: typeof Geometry = Geometry
) {
// Creates the geometry for the vertex
const geometry = new geometryClass(x, y, width, height);
geometry.relative = relative != null ? relative : false;
// Creates the vertex
const vertex = new Cell(value, geometry, style);
vertex.setId(id);
vertex.setVertex(true);
vertex.setConnectable(true);
return vertex;
}
/**
* Returns the visible child vertices of the given parent.
*
* @param parent {@link mxCell} whose children should be returned.
*/
getChildVertices(parent: Cell): CellArray {
return this.getChildCells(parent, true, false);
}
/*****************************************************************************
* Group: Graph Behaviour
*****************************************************************************/
/**
* Returns {@link vertexLabelsMovable}.
*/
isVertexLabelsMovable(): boolean {
return this.vertexLabelsMovable;
}
/**
* Sets {@link vertexLabelsMovable}.
*/
setVertexLabelsMovable(value: boolean): void {
this.vertexLabelsMovable = value;
}
}

206
packages/core/src/handler/mxVertexHandler.js → packages/core/src/view/cell/vertex/mxVertexHandler.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../../geometry/Rectangle';
import { import {
CURSOR_LABEL_HANDLE, CURSOR_LABEL_HANDLE,
CURSOR_MOVABLE_VERTEX, CURSOR_MOVABLE_VERTEX,
@ -19,15 +19,15 @@ import {
VERTEX_SELECTION_COLOR, VERTEX_SELECTION_COLOR,
VERTEX_SELECTION_DASHED, VERTEX_SELECTION_DASHED,
VERTEX_SELECTION_STROKEWIDTH, VERTEX_SELECTION_STROKEWIDTH,
} from '../util/mxConstants'; } from '../../../util/Constants';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../../event/InternalEvent';
import mxRectangleShape from '../shape/node/mxRectangleShape'; import RectangleShape from '../../geometry/shape/node/RectangleShape';
import mxImageShape from '../shape/node/mxImageShape'; import ImageShape from '../../geometry/shape/node/ImageShape';
import mxEllipse from '../shape/node/mxEllipse'; import Ellipse from '../../geometry/shape/node/Ellipse';
import mxPoint from '../util/datatypes/mxPoint'; import Point from '../../geometry/Point';
import mxUtils from '../util/mxUtils'; import utils from '../../../util/Utils';
import mxClient from '../mxClient'; import mxClient from '../../../mxClient';
import { isMouseEvent, isShiftDown } from '../util/mxEventUtils'; import { isMouseEvent, isShiftDown } from '../../../util/EventUtils';
/** /**
* Class: mxVertexHandler * Class: mxVertexHandler
@ -65,7 +65,7 @@ class mxVertexHandler {
this.reset(); this.reset();
}; };
this.state.view.graph.addListener(mxEvent.ESCAPE, this.escapeHandler); this.state.view.graph.addListener(InternalEvent.ESCAPE, this.escapeHandler);
} }
} }
@ -237,7 +237,7 @@ class mxVertexHandler {
init() { init() {
this.graph = this.state.view.graph; this.graph = this.state.view.graph;
this.selectionBounds = this.getSelectionBounds(this.state); this.selectionBounds = this.getSelectionBounds(this.state);
this.bounds = new mxRectangle( this.bounds = new Rectangle(
this.selectionBounds.x, this.selectionBounds.x,
this.selectionBounds.y, this.selectionBounds.y,
this.selectionBounds.width, this.selectionBounds.width,
@ -251,7 +251,7 @@ class mxVertexHandler {
this.state.style.rotation || '0' this.state.style.rotation || '0'
); );
this.selectionBorder.init(this.graph.getView().getOverlayPane()); this.selectionBorder.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents( InternalEvent.redirectMouseEvents(
this.selectionBorder.node, this.selectionBorder.node,
this.graph, this.graph,
this.state this.state
@ -302,7 +302,7 @@ class mxVertexHandler {
// Marks this as the label handle for getHandleForEvent // Marks this as the label handle for getHandleForEvent
this.labelShape = this.createSizer( this.labelShape = this.createSizer(
CURSOR_LABEL_HANDLE, CURSOR_LABEL_HANDLE,
mxEvent.LABEL_HANDLE, InternalEvent.LABEL_HANDLE,
LABEL_HANDLE_SIZE, LABEL_HANDLE_SIZE,
LABEL_HANDLE_FILLCOLOR LABEL_HANDLE_FILLCOLOR
); );
@ -316,7 +316,7 @@ class mxVertexHandler {
) { ) {
this.labelShape = this.createSizer( this.labelShape = this.createSizer(
CURSOR_MOVABLE_VERTEX, CURSOR_MOVABLE_VERTEX,
mxEvent.LABEL_HANDLE, InternalEvent.LABEL_HANDLE,
null, null,
LABEL_HANDLE_FILLCOLOR LABEL_HANDLE_FILLCOLOR
); );
@ -328,7 +328,7 @@ class mxVertexHandler {
if (this.isRotationHandleVisible()) { if (this.isRotationHandleVisible()) {
this.rotationShape = this.createSizer( this.rotationShape = this.createSizer(
this.rotationCursor, this.rotationCursor,
mxEvent.ROTATION_HANDLE, InternalEvent.ROTATION_HANDLE,
HANDLE_SIZE + 3, HANDLE_SIZE + 3,
HANDLE_FILLCOLOR HANDLE_FILLCOLOR
); );
@ -427,7 +427,7 @@ class mxVertexHandler {
*/ */
// getSelectionBounds(state: mxCellState): mxRectangle; // getSelectionBounds(state: mxCellState): mxRectangle;
getSelectionBounds(state) { getSelectionBounds(state) {
return new mxRectangle( return new Rectangle(
Math.round(state.x), Math.round(state.x),
Math.round(state.y), Math.round(state.y),
Math.round(state.width), Math.round(state.width),
@ -452,8 +452,8 @@ class mxVertexHandler {
*/ */
// createSelectionShape(bounds: mxRectangle): mxRectangleShape; // createSelectionShape(bounds: mxRectangle): mxRectangleShape;
createSelectionShape(bounds) { createSelectionShape(bounds) {
const shape = new mxRectangleShape( const shape = new RectangleShape(
mxRectangle.fromRectangle(bounds), Rectangle.fromRectangle(bounds),
null, null,
this.getSelectionColor() this.getSelectionColor()
); );
@ -503,7 +503,7 @@ class mxVertexHandler {
createSizer(cursor, index, size, fillColor) { createSizer(cursor, index, size, fillColor) {
size = size || HANDLE_SIZE; size = size || HANDLE_SIZE;
const bounds = new mxRectangle(0, 0, size, size); const bounds = new Rectangle(0, 0, size, size);
const sizer = this.createSizerShape(bounds, index, fillColor); const sizer = this.createSizerShape(bounds, index, fillColor);
if ( if (
@ -521,7 +521,7 @@ class mxVertexHandler {
sizer.init(this.graph.getView().getOverlayPane()); sizer.init(this.graph.getView().getOverlayPane());
} }
mxEvent.redirectMouseEvents(sizer.node, this.graph, this.state); InternalEvent.redirectMouseEvents(sizer.node, this.graph, this.state);
if (this.graph.isEnabled()) { if (this.graph.isEnabled()) {
sizer.setCursor(cursor); sizer.setCursor(cursor);
@ -555,27 +555,27 @@ class mxVertexHandler {
// createSizerShape(bounds: mxRectangle, index: number, fillColor: string): mxShape; // createSizerShape(bounds: mxRectangle, index: number, fillColor: string): mxShape;
createSizerShape(bounds, index, fillColor) { createSizerShape(bounds, index, fillColor) {
if (this.handleImage != null) { if (this.handleImage != null) {
bounds = new mxRectangle( bounds = new Rectangle(
bounds.x, bounds.x,
bounds.y, bounds.y,
this.handleImage.width, this.handleImage.width,
this.handleImage.height this.handleImage.height
); );
const shape = new mxImageShape(bounds, this.handleImage.src); const shape = new ImageShape(bounds, this.handleImage.src);
// Allows HTML rendering of the images // Allows HTML rendering of the images
shape.preserveImageAspect = false; shape.preserveImageAspect = false;
return shape; return shape;
} }
if (index === mxEvent.ROTATION_HANDLE) { if (index === InternalEvent.ROTATION_HANDLE) {
return new mxEllipse( return new Ellipse(
bounds, bounds,
fillColor || HANDLE_FILLCOLOR, fillColor || HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR HANDLE_STROKECOLOR
); );
} }
return new mxRectangleShape( return new RectangleShape(
bounds, bounds,
fillColor || HANDLE_FILLCOLOR, fillColor || HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR HANDLE_STROKECOLOR
@ -613,7 +613,7 @@ class mxVertexHandler {
const tol = !isMouseEvent(me.getEvent()) ? this.tolerance : 1; const tol = !isMouseEvent(me.getEvent()) ? this.tolerance : 1;
const hit = const hit =
this.allowHandleBoundsCheck && tol > 0 this.allowHandleBoundsCheck && tol > 0
? new mxRectangle( ? new Rectangle(
me.getGraphX() - tol, me.getGraphX() - tol,
me.getGraphY() - tol, me.getGraphY() - tol,
2 * tol, 2 * tol,
@ -624,13 +624,13 @@ class mxVertexHandler {
const checkShape = (shape) => { const checkShape = (shape) => {
const st = const st =
shape != null && shape != null &&
shape.constructor !== mxImageShape && shape.constructor !== ImageShape &&
this.allowHandleBoundsCheck this.allowHandleBoundsCheck
? shape.strokewidth + shape.svgStrokeTolerance ? shape.strokewidth + shape.svgStrokeTolerance
: null; : null;
const real = const real =
st != null st != null
? new mxRectangle( ? new Rectangle(
me.getGraphX() - Math.floor(st / 2), me.getGraphX() - Math.floor(st / 2),
me.getGraphY() - Math.floor(st / 2), me.getGraphY() - Math.floor(st / 2),
st, st,
@ -642,17 +642,17 @@ class mxVertexHandler {
shape != null && shape != null &&
(me.isSource(shape) || (me.isSource(shape) ||
(real != null && (real != null &&
mxUtils.intersects(shape.bounds, real) && utils.intersects(shape.bounds, real) &&
shape.node.style.display !== 'none' && shape.node.style.display !== 'none' &&
shape.node.style.visibility !== 'hidden')) shape.node.style.visibility !== 'hidden'))
); );
}; };
if (checkShape(this.rotationShape)) { if (checkShape(this.rotationShape)) {
return mxEvent.ROTATION_HANDLE; return InternalEvent.ROTATION_HANDLE;
} }
if (checkShape(this.labelShape)) { if (checkShape(this.labelShape)) {
return mxEvent.LABEL_HANDLE; return InternalEvent.LABEL_HANDLE;
} }
if (this.sizers != null) { if (this.sizers != null) {
@ -668,7 +668,7 @@ class mxVertexHandler {
for (let i = this.customHandles.length - 1; i >= 0; i--) { for (let i = this.customHandles.length - 1; i >= 0; i--) {
if (checkShape(this.customHandles[i].shape)) { if (checkShape(this.customHandles[i].shape)) {
// LATER: Return reference to active shape // LATER: Return reference to active shape
return mxEvent.CUSTOM_HANDLE - i; return InternalEvent.CUSTOM_HANDLE - i;
} }
} }
} }
@ -738,7 +738,7 @@ class mxVertexHandler {
this.startX = x; this.startX = x;
this.startY = y; this.startY = y;
if (this.index <= mxEvent.CUSTOM_HANDLE && this.isGhostPreview()) { if (this.index <= InternalEvent.CUSTOM_HANDLE && this.isGhostPreview()) {
this.ghostPreview = this.createGhostPreview(); this.ghostPreview = this.createGhostPreview();
} else { } else {
// Saves reference to parent state // Saves reference to parent state
@ -754,7 +754,7 @@ class mxVertexHandler {
// Creates a preview that can be on top of any HTML label // Creates a preview that can be on top of any HTML label
this.selectionBorder.node.style.display = this.selectionBorder.node.style.display =
index === mxEvent.ROTATION_HANDLE ? 'inline' : 'none'; index === InternalEvent.ROTATION_HANDLE ? 'inline' : 'none';
// Creates the border that represents the new bounds // Creates the border that represents the new bounds
if (!this.livePreviewActive || this.isLivePreviewBorder()) { if (!this.livePreviewActive || this.isLivePreviewBorder()) {
@ -776,7 +776,7 @@ class mxVertexHandler {
} }
} }
if (index === mxEvent.ROTATION_HANDLE) { if (index === InternalEvent.ROTATION_HANDLE) {
// With the rotation handle in a corner, need the angle and distance // With the rotation handle in a corner, need the angle and distance
const pos = this.getRotationHandlePosition(); const pos = this.getRotationHandlePosition();
@ -792,17 +792,17 @@ class mxVertexHandler {
if (this.livePreviewActive) { if (this.livePreviewActive) {
this.hideSizers(); this.hideSizers();
if (index === mxEvent.ROTATION_HANDLE) { if (index === InternalEvent.ROTATION_HANDLE) {
this.rotationShape.node.style.display = ''; this.rotationShape.node.style.display = '';
} else if (index === mxEvent.LABEL_HANDLE) { } else if (index === InternalEvent.LABEL_HANDLE) {
this.labelShape.node.style.display = ''; this.labelShape.node.style.display = '';
} else if (this.sizers != null && this.sizers[index] != null) { } else if (this.sizers != null && this.sizers[index] != null) {
this.sizers[index].node.style.display = ''; this.sizers[index].node.style.display = '';
} else if ( } else if (
index <= mxEvent.CUSTOM_HANDLE && index <= InternalEvent.CUSTOM_HANDLE &&
this.customHandles != null this.customHandles != null
) { ) {
this.customHandles[mxEvent.CUSTOM_HANDLE - index].setVisible(true); this.customHandles[InternalEvent.CUSTOM_HANDLE - index].setVisible(true);
} }
// Gets the array of connected edge handlers for redrawing // Gets the array of connected edge handlers for redrawing
@ -940,13 +940,13 @@ class mxVertexHandler {
this.checkTolerance(me); this.checkTolerance(me);
if (!this.inTolerance) { if (!this.inTolerance) {
if (this.index <= mxEvent.CUSTOM_HANDLE) { if (this.index <= InternalEvent.CUSTOM_HANDLE) {
if (this.customHandles != null) { if (this.customHandles != null) {
this.customHandles[mxEvent.CUSTOM_HANDLE - this.index].processEvent( this.customHandles[InternalEvent.CUSTOM_HANDLE - this.index].processEvent(
me me
); );
this.customHandles[ this.customHandles[
mxEvent.CUSTOM_HANDLE - this.index InternalEvent.CUSTOM_HANDLE - this.index
].active = true; ].active = true;
if (this.ghostPreview != null) { if (this.ghostPreview != null) {
@ -968,14 +968,14 @@ class mxVertexHandler {
} }
this.customHandles[ this.customHandles[
mxEvent.CUSTOM_HANDLE - this.index InternalEvent.CUSTOM_HANDLE - this.index
].positionChanged(); ].positionChanged();
} }
} }
} else if (this.index === mxEvent.LABEL_HANDLE) { } else if (this.index === InternalEvent.LABEL_HANDLE) {
this.moveLabel(me); this.moveLabel(me);
} else { } else {
if (this.index === mxEvent.ROTATION_HANDLE) { if (this.index === InternalEvent.ROTATION_HANDLE) {
this.rotateVertex(me); this.rotateVertex(me);
} else { } else {
this.resizeVertex(me); this.resizeVertex(me);
@ -1009,7 +1009,7 @@ class mxVertexHandler {
*/ */
// moveLabel(me: mxMouseEvent): void; // moveLabel(me: mxMouseEvent): void;
moveLabel(me) { moveLabel(me) {
const point = new mxPoint(me.getGraphX(), me.getGraphY()); const point = new Point(me.getGraphX(), me.getGraphY());
const tr = this.graph.view.translate; const tr = this.graph.view.translate;
const { scale } = this.graph.view; const { scale } = this.graph.view;
@ -1032,7 +1032,7 @@ class mxVertexHandler {
*/ */
// rotateVertex(me: mxMouseEvent): void; // rotateVertex(me: mxMouseEvent): void;
rotateVertex(me) { rotateVertex(me) {
const point = new mxPoint(me.getGraphX(), me.getGraphY()); const point = new Point(me.getGraphX(), me.getGraphY());
let dx = this.state.x + this.state.width / 2 - point.x; let dx = this.state.x + this.state.width / 2 - point.x;
let dy = this.state.y + this.state.height / 2 - point.y; let dy = this.state.y + this.state.height / 2 - point.y;
this.currentAlpha = this.currentAlpha =
@ -1079,9 +1079,9 @@ class mxVertexHandler {
*/ */
// resizeVertex(me: mxMouseEvent): void; // resizeVertex(me: mxMouseEvent): void;
resizeVertex(me) { resizeVertex(me) {
const ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY()); const ct = new point(this.state.getCenterX(), this.state.getCenterY());
const alpha = mxUtils.toRadians(this.state.style.rotation || '0'); const alpha = utils.toRadians(this.state.style.rotation || '0');
const point = new mxPoint(me.getGraphX(), me.getGraphY()); const point = new Point(me.getGraphX(), me.getGraphY());
const tr = this.graph.view.translate; const tr = this.graph.view.translate;
const { scale } = this.graph.view; const { scale } = this.graph.view;
let cos = Math.cos(-alpha); let cos = Math.cos(-alpha);
@ -1105,7 +1105,7 @@ class mxVertexHandler {
this.index, this.index,
this.graph.isGridEnabledEvent(me.getEvent()), this.graph.isGridEnabledEvent(me.getEvent()),
1, 1,
new mxPoint(0, 0), new point(0, 0),
this.isConstrainedEvent(me), this.isConstrainedEvent(me),
this.isCenteredEvent(this.state, me) this.isCenteredEvent(this.state, me)
); );
@ -1116,7 +1116,7 @@ class mxVertexHandler {
// Handles child cells // Handles child cells
if (max != null && this.parentState != null) { if (max != null && this.parentState != null) {
max = mxRectangle.fromRectangle(max); max = Rectangle.fromRectangle(max);
max.x -= (this.parentState.x - tr.x * scale) / scale; max.x -= (this.parentState.x - tr.x * scale) / scale;
max.y -= (this.parentState.y - tr.y * scale) / scale; max.y -= (this.parentState.y - tr.y * scale) / scale;
@ -1129,7 +1129,7 @@ class mxVertexHandler {
const overlap = this.graph.getOverlap(this.state.cell); const overlap = this.graph.getOverlap(this.state.cell);
if (overlap > 0) { if (overlap > 0) {
tmp = mxRectangle.fromRectangle(tmp); tmp = Rectangle.fromRectangle(tmp);
tmp.x -= tmp.width * overlap; tmp.x -= tmp.width * overlap;
tmp.y -= tmp.height * overlap; tmp.y -= tmp.height * overlap;
@ -1140,7 +1140,7 @@ class mxVertexHandler {
if (max == null) { if (max == null) {
max = tmp; max = tmp;
} else { } else {
max = mxRectangle.fromRectangle(max); max = Rectangle.fromRectangle(max);
max.intersect(tmp); max.intersect(tmp);
} }
} }
@ -1182,7 +1182,7 @@ class mxVertexHandler {
} }
const old = this.bounds; const old = this.bounds;
this.bounds = new mxRectangle( this.bounds = new Rectangle(
(this.parentState != null ? this.parentState.x : tr.x * scale) + (this.parentState != null ? this.parentState.x : tr.x * scale) +
this.unscaledBounds.x * scale, this.unscaledBounds.x * scale,
(this.parentState != null ? this.parentState.y : tr.y * scale) + (this.parentState != null ? this.parentState.y : tr.y * scale) +
@ -1199,7 +1199,7 @@ class mxVertexHandler {
cos = Math.cos(alpha); cos = Math.cos(alpha);
sin = Math.sin(alpha); sin = Math.sin(alpha);
const c2 = new mxPoint(this.bounds.getCenterX(), this.bounds.getCenterY()); const c2 = new point(this.bounds.getCenterX(), this.bounds.getCenterY());
dx = c2.x - ct.x; dx = c2.x - ct.x;
dy = c2.y - ct.y; dy = c2.y - ct.y;
@ -1268,7 +1268,7 @@ class mxVertexHandler {
// Temporarily changes size and origin // Temporarily changes size and origin
this.state.x = this.bounds.x; this.state.x = this.bounds.x;
this.state.y = this.bounds.y; this.state.y = this.bounds.y;
this.state.origin = new mxPoint( this.state.origin = new Point(
this.state.x / scale - tr.x, this.state.x / scale - tr.x,
this.state.y / scale - tr.y this.state.y / scale - tr.y
); );
@ -1277,7 +1277,7 @@ class mxVertexHandler {
// Redraws cell and handles // Redraws cell and handles
let off = this.state.absoluteOffset; let off = this.state.absoluteOffset;
off = new mxPoint(off.x, off.y); off = new Point(off.x, off.y);
// Required to store and reset absolute offset for updating label position // Required to store and reset absolute offset for updating label position
this.state.absoluteOffset.x = 0; this.state.absoluteOffset.x = 0;
@ -1352,7 +1352,7 @@ class mxVertexHandler {
// mouseUp(sender: any, me: mxMouseEvent): void; // mouseUp(sender: any, me: mxMouseEvent): void;
mouseUp(sender, me) { mouseUp(sender, me) {
if (this.index != null && this.state != null) { if (this.index != null && this.state != null) {
const point = new mxPoint(me.getGraphX(), me.getGraphY()); const point = new Point(me.getGraphX(), me.getGraphY());
const { index } = this; const { index } = this;
this.index = null; this.index = null;
@ -1364,27 +1364,27 @@ class mxVertexHandler {
this.graph.getModel().beginUpdate(); this.graph.getModel().beginUpdate();
try { try {
if (index <= mxEvent.CUSTOM_HANDLE) { if (index <= InternalEvent.CUSTOM_HANDLE) {
if (this.customHandles != null) { if (this.customHandles != null) {
// Creates style before changing cell state // Creates style before changing cell state
const style = this.state.view.graph.getCellStyle(this.state.cell); const style = this.state.view.graph.getCellStyle(this.state.cell);
this.customHandles[mxEvent.CUSTOM_HANDLE - index].active = false; this.customHandles[InternalEvent.CUSTOM_HANDLE - index].active = false;
this.customHandles[mxEvent.CUSTOM_HANDLE - index].execute(me); this.customHandles[InternalEvent.CUSTOM_HANDLE - index].execute(me);
// Sets style and apply on shape to force repaint and // Sets style and apply on shape to force repaint and
// check if execute has removed custom handles // check if execute has removed custom handles
if ( if (
this.customHandles != null && this.customHandles != null &&
this.customHandles[mxEvent.CUSTOM_HANDLE - index] != null this.customHandles[InternalEvent.CUSTOM_HANDLE - index] != null
) { ) {
this.state.style = style; this.state.style = style;
this.customHandles[ this.customHandles[
mxEvent.CUSTOM_HANDLE - index InternalEvent.CUSTOM_HANDLE - index
].positionChanged(); ].positionChanged();
} }
} }
} else if (index === mxEvent.ROTATION_HANDLE) { } else if (index === InternalEvent.ROTATION_HANDLE) {
if (this.currentAlpha != null) { if (this.currentAlpha != null) {
const delta = const delta =
this.currentAlpha - (this.state.style.rotation || 0); this.currentAlpha - (this.state.style.rotation || 0);
@ -1397,7 +1397,7 @@ class mxVertexHandler {
} }
} else { } else {
const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent()); const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent());
const alpha = mxUtils.toRadians( const alpha = utils.toRadians(
this.state.style.rotation || '0' this.state.style.rotation || '0'
); );
const cos = Math.cos(-alpha); const cos = Math.cos(-alpha);
@ -1484,7 +1484,7 @@ class mxVertexHandler {
if (pgeo != null && !parent.isEdge()) { if (pgeo != null && !parent.isEdge()) {
geo = geo.clone(); geo = geo.clone();
geo.rotate(angle, new mxPoint(pgeo.width / 2, pgeo.height / 2)); geo.rotate(angle, new Point(pgeo.width / 2, pgeo.height / 2));
model.setGeometry(cell, geo); model.setGeometry(cell, geo);
} }
@ -1560,7 +1560,7 @@ class mxVertexHandler {
if (this.selectionBorder != null) { if (this.selectionBorder != null) {
this.selectionBorder.node.style.display = 'inline'; this.selectionBorder.node.style.display = 'inline';
this.selectionBounds = this.getSelectionBounds(this.state); this.selectionBounds = this.getSelectionBounds(this.state);
this.bounds = new mxRectangle( this.bounds = new Rectangle(
this.selectionBounds.x, this.selectionBounds.x,
this.selectionBounds.y, this.selectionBounds.y,
this.selectionBounds.width, this.selectionBounds.width,
@ -1587,15 +1587,15 @@ class mxVertexHandler {
let geo = cell.getGeometry(); let geo = cell.getGeometry();
if (geo != null) { if (geo != null) {
if (index === mxEvent.LABEL_HANDLE) { if (index === InternalEvent.LABEL_HANDLE) {
const alpha = -mxUtils.toRadians( const alpha = -utils.toRadians(
this.state.style.rotation || '0' this.state.style.rotation || '0'
); );
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
const { scale } = this.graph.view; const { scale } = this.graph.view;
const pt = mxUtils.getRotatedPoint( const pt = utils.getRotatedPoint(
new mxPoint( new Point(
Math.round( Math.round(
(this.labelShape.bounds.getCenterX() - this.startX) / scale (this.labelShape.bounds.getCenterX() - this.startX) / scale
), ),
@ -1722,8 +1722,8 @@ class mxVertexHandler {
y = this.graph.snap(y / scale) * scale; y = this.graph.snap(y / scale) * scale;
} }
const rect = new mxRectangle(bounds.x, bounds.y, 0, 0); const rect = new Rectangle(bounds.x, bounds.y, 0, 0);
rect.add(new mxRectangle(x, y, 0, 0)); rect.add(new Rectangle(x, y, 0, 0));
return rect; return rect;
} }
@ -1820,7 +1820,7 @@ class mxVertexHandler {
height = Math.abs(height); height = Math.abs(height);
} }
const result = new mxRectangle( const result = new Rectangle(
left + tr.x * scale, left + tr.x * scale,
top + tr.y * scale, top + tr.y * scale,
width, width,
@ -1853,7 +1853,7 @@ class mxVertexHandler {
// redraw(): void; // redraw(): void;
redraw(ignoreHandles) { redraw(ignoreHandles) {
this.selectionBounds = this.getSelectionBounds(this.state); this.selectionBounds = this.getSelectionBounds(this.state);
this.bounds = new mxRectangle( this.bounds = new Rectangle(
this.selectionBounds.x, this.selectionBounds.x,
this.selectionBounds.y, this.selectionBounds.y,
this.selectionBounds.width, this.selectionBounds.width,
@ -1872,7 +1872,7 @@ class mxVertexHandler {
// getHandlePadding(): mxPoint; // getHandlePadding(): mxPoint;
getHandlePadding() { getHandlePadding() {
// KNOWN: Tolerance depends on event type (eg. 0 for mouse events) // KNOWN: Tolerance depends on event type (eg. 0 for mouse events)
const result = new mxPoint(0, 0); const result = new Point(0, 0);
let tol = this.tolerance; let tol = this.tolerance;
if ( if (
@ -1952,7 +1952,7 @@ class mxVertexHandler {
this.verticalOffset = padding.y; this.verticalOffset = padding.y;
if (this.horizontalOffset !== 0 || this.verticalOffset !== 0) { if (this.horizontalOffset !== 0 || this.verticalOffset !== 0) {
s = new mxRectangle(s.x, s.y, s.width, s.height); s = new Rectangle(s.x, s.y, s.width, s.height);
s.x -= this.horizontalOffset / 2; s.x -= this.horizontalOffset / 2;
s.width += this.horizontalOffset; s.width += this.horizontalOffset;
@ -1999,63 +1999,63 @@ class mxVertexHandler {
'w-resize', 'w-resize',
]; ];
const alpha = mxUtils.toRadians( const alpha = utils.toRadians(
this.state.style.rotation || '0' this.state.style.rotation || '0'
); );
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
const da = Math.round((alpha * 4) / Math.PI); const da = Math.round((alpha * 4) / Math.PI);
const ct = new mxPoint(s.getCenterX(), s.getCenterY()); const ct = new Point(s.getCenterX(), s.getCenterY());
let pt = mxUtils.getRotatedPoint(new mxPoint(s.x, s.y), cos, sin, ct); let pt = utils.getRotatedPoint(new Point(s.x, s.y), cos, sin, ct);
this.moveSizerTo(this.sizers[0], pt.x, pt.y); this.moveSizerTo(this.sizers[0], pt.x, pt.y);
this.sizers[0].setCursor(crs[mxUtils.mod(0 + da, crs.length)]); this.sizers[0].setCursor(crs[utils.mod(0 + da, crs.length)]);
pt.x = cx; pt.x = cx;
pt.y = s.y; pt.y = s.y;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); pt = utils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[1], pt.x, pt.y); this.moveSizerTo(this.sizers[1], pt.x, pt.y);
this.sizers[1].setCursor(crs[mxUtils.mod(1 + da, crs.length)]); this.sizers[1].setCursor(crs[utils.mod(1 + da, crs.length)]);
pt.x = r; pt.x = r;
pt.y = s.y; pt.y = s.y;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); pt = utils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[2], pt.x, pt.y); this.moveSizerTo(this.sizers[2], pt.x, pt.y);
this.sizers[2].setCursor(crs[mxUtils.mod(2 + da, crs.length)]); this.sizers[2].setCursor(crs[utils.mod(2 + da, crs.length)]);
pt.x = s.x; pt.x = s.x;
pt.y = cy; pt.y = cy;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); pt = utils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[3], pt.x, pt.y); this.moveSizerTo(this.sizers[3], pt.x, pt.y);
this.sizers[3].setCursor(crs[mxUtils.mod(7 + da, crs.length)]); this.sizers[3].setCursor(crs[utils.mod(7 + da, crs.length)]);
pt.x = r; pt.x = r;
pt.y = cy; pt.y = cy;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); pt = utils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[4], pt.x, pt.y); this.moveSizerTo(this.sizers[4], pt.x, pt.y);
this.sizers[4].setCursor(crs[mxUtils.mod(3 + da, crs.length)]); this.sizers[4].setCursor(crs[utils.mod(3 + da, crs.length)]);
pt.x = s.x; pt.x = s.x;
pt.y = b; pt.y = b;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); pt = utils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[5], pt.x, pt.y); this.moveSizerTo(this.sizers[5], pt.x, pt.y);
this.sizers[5].setCursor(crs[mxUtils.mod(6 + da, crs.length)]); this.sizers[5].setCursor(crs[utils.mod(6 + da, crs.length)]);
pt.x = cx; pt.x = cx;
pt.y = b; pt.y = b;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); pt = utils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[6], pt.x, pt.y); this.moveSizerTo(this.sizers[6], pt.x, pt.y);
this.sizers[6].setCursor(crs[mxUtils.mod(5 + da, crs.length)]); this.sizers[6].setCursor(crs[utils.mod(5 + da, crs.length)]);
pt.x = r; pt.x = r;
pt.y = b; pt.y = b;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); pt = utils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[7], pt.x, pt.y); this.moveSizerTo(this.sizers[7], pt.x, pt.y);
this.sizers[7].setCursor(crs[mxUtils.mod(4 + da, crs.length)]); this.sizers[7].setCursor(crs[utils.mod(4 + da, crs.length)]);
pt.x = cx + this.state.absoluteOffset.x; pt.x = cx + this.state.absoluteOffset.x;
pt.y = cy + this.state.absoluteOffset.y; pt.y = cy + this.state.absoluteOffset.y;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); pt = utils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[8], pt.x, pt.y); this.moveSizerTo(this.sizers[8], pt.x, pt.y);
} else if (this.state.width >= 2 && this.state.height >= 2) { } else if (this.state.width >= 2 && this.state.height >= 2) {
this.moveSizerTo( this.moveSizerTo(
@ -2070,7 +2070,7 @@ class mxVertexHandler {
} }
if (this.rotationShape != null) { if (this.rotationShape != null) {
const alpha = mxUtils.toRadians( const alpha = utils.toRadians(
this.currentAlpha != null this.currentAlpha != null
? this.currentAlpha ? this.currentAlpha
: this.state.style.rotation || '0' : this.state.style.rotation || '0'
@ -2078,8 +2078,8 @@ class mxVertexHandler {
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
const ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY()); const ct = new Point(this.state.getCenterX(), this.state.getCenterY());
const pt = mxUtils.getRotatedPoint( const pt = utils.getRotatedPoint(
this.getRotationHandlePosition(), this.getRotationHandlePosition(),
cos, cos,
sin, sin,
@ -2128,7 +2128,7 @@ class mxVertexHandler {
*/ */
// getRotationHandlePosition(): mxPoint; // getRotationHandlePosition(): mxPoint;
getRotationHandlePosition() { getRotationHandlePosition() {
return new mxPoint( return new Point(
this.bounds.x + this.bounds.width / 2, this.bounds.x + this.bounds.width / 2,
this.bounds.y + this.rotationHandleVSpacing this.bounds.y + this.rotationHandleVSpacing
); );
@ -2167,7 +2167,7 @@ class mxVertexHandler {
b.width !== pstate.width || b.width !== pstate.width ||
b.height !== pstate.height) b.height !== pstate.height)
) { ) {
this.parentHighlight.bounds = mxRectangle.fromRectangle(pstate); this.parentHighlight.bounds = Rectangle.fromRectangle(pstate);
this.parentHighlight.redraw(); this.parentHighlight.redraw();
} }
} else { } else {

648
packages/core/src/view/connection/Connections.ts Normal file
View File

@ -0,0 +1,648 @@
import Point from "../geometry/Point";
import CellState from "../cell/datatypes/CellState";
import InternalMouseEvent from "../event/InternalMouseEvent";
import mxConnectionConstraint from "./mxConnectionConstraint";
import Rectangle from "../geometry/Rectangle";
import {DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_WEST} from "../../util/Constants";
import utils, {getRotatedPoint, getValue, toRadians} from "../../util/Utils";
import Cell from "../cell/datatypes/Cell";
import CellArray from "../cell/datatypes/CellArray";
import EventObject from "../event/EventObject";
import InternalEvent from "../event/InternalEvent";
import mxDictionary from "../../util/mxDictionary";
import Geometry from "../geometry/Geometry";
import Graph from "../Graph";
class Connections {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/*****************************************************************************
* Group: Cell connecting and connection constraints
*****************************************************************************/
/**
* Returns the constraint used to connect to the outline of the given state.
*/
getOutlineConstraint(
point: Point,
terminalState: CellState,
me: InternalMouseEvent
): mxConnectionConstraint | null {
if (terminalState.shape != null) {
const bounds = <Rectangle>(
this.getView().getPerimeterBounds(terminalState)
);
const direction = terminalState.style.direction;
if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {
bounds.x += bounds.width / 2 - bounds.height / 2;
bounds.y += bounds.height / 2 - bounds.width / 2;
const tmp = bounds.width;
bounds.width = bounds.height;
bounds.height = tmp;
}
const alpha = toRadians(terminalState.shape.getShapeRotation());
if (alpha !== 0) {
const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha);
const ct = new point(bounds.getCenterX(), bounds.getCenterY());
point = getRotatedPoint(point, cos, sin, ct);
}
let sx = 1;
let sy = 1;
let dx = 0;
let dy = 0;
// LATER: Add flipping support for image shapes
if ((<Cell>terminalState.cell).isVertex()) {
let flipH = terminalState.style.flipH;
let flipV = terminalState.style.flipV;
// Legacy support for stencilFlipH/V
if (
terminalState.shape != null &&
terminalState.shape.stencil != null
) {
flipH =
getValue(terminalState.style, 'stencilFlipH', 0) == 1 ||
flipH;
flipV =
getValue(terminalState.style, 'stencilFlipV', 0) == 1 ||
flipV;
}
if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {
const tmp = flipH;
flipH = flipV;
flipV = tmp;
}
if (flipH) {
sx = -1;
dx = -bounds.width;
}
if (flipV) {
sy = -1;
dy = -bounds.height;
}
}
point = new point(
(point.x - bounds.x) * sx - dx + bounds.x,
(point.y - bounds.y) * sy - dy + bounds.y
);
const x =
bounds.width === 0
? 0
: Math.round(((point.x - bounds.x) * 1000) / bounds.width) / 1000;
const y =
bounds.height === 0
? 0
: Math.round(((point.y - bounds.y) * 1000) / bounds.height) / 1000;
return new mxConnectionConstraint(new point(x, y), false);
}
return null;
}
/**
* Returns an array of all {@link mxConnectionConstraints} for the given terminal. If
* the shape of the given terminal is a {@link mxStencilShape} then the constraints
* of the corresponding {@link mxStencil} are returned.
*
* @param terminal {@link mxCellState} that represents the terminal.
* @param source Boolean that specifies if the terminal is the source or target.
*/
getAllConnectionConstraints(
terminal: CellState,
source: boolean
): mxConnectionConstraint[] | null {
if (
terminal != null &&
terminal.shape != null &&
terminal.shape.stencil != null
) {
return terminal.shape.stencil.constraints;
}
return null;
}
/**
* Returns an {@link mxConnectionConstraint} that describes the given connection
* point. This result can then be passed to {@link getConnectionPoint}.
*
* @param edge {@link mxCellState} that represents the edge.
* @param terminal {@link mxCellState} that represents the terminal.
* @param source Boolean indicating if the terminal is the source or target.
*/
getConnectionConstraint(
edge: CellState,
terminal: CellState | null = null,
source: boolean = false
): mxConnectionConstraint {
let point = null;
// @ts-ignore
const x = <string>edge.style[source ? 'exitX' : 'entryX'];
if (x != null) {
// @ts-ignore
const y = <string>edge.style[source ? 'exitY' : 'entryY'];
if (y != null) {
point = new point(parseFloat(x), parseFloat(y));
}
}
let perimeter = false;
let dx = 0;
let dy = 0;
if (point != null) {
perimeter = getValue(
edge.style,
source ? 'exitPerimeter' : 'entryPerimeter',
true
);
// Add entry/exit offset
// @ts-ignore
dx = parseFloat(
<string>edge.style[source ? 'exitDx' : 'entryDx']
);
// @ts-ignore
dy = parseFloat(
<string>edge.style[source ? 'exitDy' : 'entryDy']
);
dx = Number.isFinite(dx) ? dx : 0;
dy = Number.isFinite(dy) ? dy : 0;
}
return new mxConnectionConstraint(point, perimeter, null, dx, dy);
}
/**
* Sets the {@link mxConnectionConstraint} that describes the given connection point.
* If no constraint is given then nothing is changed. To remove an existing
* constraint from the given edge, use an empty constraint instead.
*
* @param edge {@link mxCell} that represents the edge.
* @param terminal {@link mxCell} that represents the terminal.
* @param source Boolean indicating if the terminal is the source or target.
* @param constraint Optional {@link mxConnectionConstraint} to be used for this
* connection.
*/
setConnectionConstraint(
edge: Cell,
terminal: Cell,
source: boolean = false,
constraint: mxConnectionConstraint | null = null
): void {
if (constraint != null) {
this.getModel().beginUpdate();
try {
if (constraint == null || constraint.point == null) {
this.setCellStyles(source ? 'exitX' : 'entryX', null, new CellArray(edge));
this.setCellStyles(source ? 'exitY' : 'entryY', null, new CellArray(edge));
this.setCellStyles(source ? 'exitDx' : 'entryDx', null, new CellArray(edge));
this.setCellStyles(source ? 'exitDy' : 'entryDy', null, new CellArray(edge));
this.setCellStyles(
source ? 'exitPerimeter' : 'entryPerimeter',
null,
new CellArray(edge)
);
} else if (constraint.point != null) {
this.setCellStyles(
source ? 'exitX' : 'entryX',
constraint.point.x,
new CellArray(edge)
);
this.setCellStyles(
source ? 'exitY' : 'entryY',
constraint.point.y,
new CellArray(edge)
);
this.setCellStyles(
source ? 'exitDx' : 'entryDx',
constraint.dx,
new CellArray(edge)
);
this.setCellStyles(
source ? 'exitDy' : 'entryDy',
constraint.dy,
new CellArray(edge)
);
// Only writes 0 since 1 is default
if (!constraint.perimeter) {
this.setCellStyles(
source ? 'exitPerimeter' : 'entryPerimeter',
'0',
new CellArray(edge)
);
} else {
this.setCellStyles(
source ? 'exitPerimeter' : 'entryPerimeter',
null,
new CellArray(edge)
);
}
}
} finally {
this.getModel().endUpdate();
}
}
}
/**
* Returns the nearest point in the list of absolute points or the center
* of the opposite terminal.
*
* @param vertex {@link mxCellState} that represents the vertex.
* @param constraint {@link mxConnectionConstraint} that represents the connection point
* constraint as returned by {@link getConnectionConstraint}.
*/
getConnectionPoint(
vertex: CellState,
constraint: mxConnectionConstraint,
round: boolean = true
): Point {
let point = null;
if (vertex != null && constraint.point != null) {
const bounds = <Rectangle>this.getView().getPerimeterBounds(vertex);
const cx = new point(bounds.getCenterX(), bounds.getCenterY());
const direction = vertex.style.direction;
let r1 = 0;
// Bounds need to be rotated by 90 degrees for further computation
if (
direction != null &&
getValue(vertex.style, 'anchorPointDirection', 1) == 1
) {
if (direction === DIRECTION_NORTH) {
r1 += 270;
} else if (direction === DIRECTION_WEST) {
r1 += 180;
} else if (direction === DIRECTION_SOUTH) {
r1 += 90;
}
// Bounds need to be rotated by 90 degrees for further computation
if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {
bounds.rotate90();
}
}
const { scale } = this.view;
point = new point(
bounds.x +
constraint.point.x * bounds.width +
<number>constraint.dx * scale,
bounds.y +
constraint.point.y * bounds.height +
<number>constraint.dy * scale
);
// Rotation for direction before projection on perimeter
let r2 = vertex.style.rotation || 0;
if (constraint.perimeter) {
if (r1 !== 0) {
// Only 90 degrees steps possible here so no trig needed
let cos = 0;
let sin = 0;
if (r1 === 90) {
sin = 1;
} else if (r1 === 180) {
cos = -1;
} else if (r1 === 270) {
sin = -1;
}
point = getRotatedPoint(point, cos, sin, cx);
}
point = this.getView().getPerimeterPoint(vertex, point, false);
} else {
r2 += r1;
if ((<Cell>vertex.cell).isVertex()) {
let flipH = vertex.style.flipH == 1;
let flipV = vertex.style.flipV == 1;
// Legacy support for stencilFlipH/V
if (vertex.shape != null && vertex.shape.stencil != null) {
flipH =
utils.getValue(vertex.style, 'stencilFlipH', 0) == 1 || flipH;
flipV =
utils.getValue(vertex.style, 'stencilFlipV', 0) == 1 || flipV;
}
if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {
const temp = flipH;
flipH = flipV;
flipV = temp;
}
if (flipH) {
point.x = 2 * bounds.getCenterX() - point.x;
}
if (flipV) {
point.y = 2 * bounds.getCenterY() - point.y;
}
}
}
// Generic rotation after projection on perimeter
if (r2 !== 0 && point != null) {
const rad = toRadians(r2);
const cos = Math.cos(rad);
const sin = Math.sin(rad);
point = getRotatedPoint(point, cos, sin, cx);
}
}
if (round && point != null) {
point.x = Math.round(point.x);
point.y = Math.round(point.y);
}
return point;
}
/**
* Connects the specified end of the given edge to the given terminal
* using {@link cellConnected} and fires {@link InternalEvent.CONNECT_CELL} while the
* transaction is in progress. Returns the updated edge.
*
* @param edge {@link mxCell} whose terminal should be updated.
* @param terminal {@link mxCell} that represents the new terminal to be used.
* @param source Boolean indicating if the new terminal is the source or target.
* @param constraint Optional {@link mxConnectionConstraint} to be used for this
* connection.
*/
connectCell(
edge: Cell,
terminal: Cell,
source: boolean = false,
constraint: mxConnectionConstraint | null = null
): Cell {
this.getModel().beginUpdate();
try {
const previous = edge.getTerminal(source);
this.cellConnected(edge, terminal, source, constraint);
this.fireEvent(
new EventObject(
InternalEvent.CONNECT_CELL,
'edge',
edge,
'terminal',
terminal,
'source',
source,
'previous',
previous
)
);
} finally {
this.getModel().endUpdate();
}
return edge;
}
/**
* Sets the new terminal for the given edge and resets the edge points if
* {@link resetEdgesOnConnect} is true. This method fires
* {@link InternalEvent.CELL_CONNECTED} while the transaction is in progress.
*
* @param edge {@link mxCell} whose terminal should be updated.
* @param terminal {@link mxCell} that represents the new terminal to be used.
* @param source Boolean indicating if the new terminal is the source or target.
* @param constraint {@link mxConnectionConstraint} to be used for this connection.
*/
cellConnected(
edge: Cell,
terminal: Cell,
source: boolean = false,
constraint: mxConnectionConstraint | null = null
): void {
if (edge != null) {
this.getModel().beginUpdate();
try {
const previous = edge.getTerminal(source);
// Updates the constraint
this.setConnectionConstraint(edge, terminal, source, constraint);
// Checks if the new terminal is a port, uses the ID of the port in the
// style and the parent of the port as the actual terminal of the edge.
if (this.isPortsEnabled()) {
let id = null;
if (this.isPort(terminal)) {
id = terminal.getId();
terminal = <Cell>this.getTerminalForPort(terminal, source);
}
// Sets or resets all previous information for connecting to a child port
const key = source ? 'sourcePort' : 'targetPort';
this.setCellStyles(key, id, new CellArray(edge));
}
this.getModel().setTerminal(edge, terminal, source);
if (this.resetEdgesOnConnect) {
this.resetEdge(edge);
}
this.fireEvent(
new EventObject(
InternalEvent.CELL_CONNECTED,
'edge',
edge,
'terminal',
terminal,
'source',
source,
'previous',
previous
)
);
} finally {
this.getModel().endUpdate();
}
}
}
/**
* Disconnects the given edges from the terminals which are not in the
* given array.
*
* @param cells Array of {@link Cell} to be disconnected.
*/
disconnectGraph(cells: CellArray | null) {
if (cells != null) {
this.getModel().beginUpdate();
try {
const { scale } = this.view;
const tr = this.getView().translate;
// Fast lookup for finding cells in array
const dict = new mxDictionary();
for (let i = 0; i < cells.length; i += 1) {
dict.put(cells[i], true);
}
for (const cell of cells) {
if (cell.isEdge()) {
let geo = <Geometry>cell.getGeometry();
if (geo != null) {
const state = this.getView().getState(cell);
const pstate = <CellState>(
this.getView().getState(cell.getParent())
);
if (state != null && pstate != null) {
geo = geo.clone();
// @ts-ignore
const dx = -pstate.origin.x;
// @ts-ignore
const dy = -pstate.origin.y;
const pts = <Point[]>state.absolutePoints;
let src = cell.getTerminal(true);
if (src != null && this.isCellDisconnectable(cell, src, true)) {
while (src != null && !dict.get(src)) {
src = src.getParent();
}
if (src == null) {
geo.setTerminalPoint(
new Point(
pts[0].x / scale - tr.x + dx,
pts[0].y / scale - tr.y + dy
),
true
);
this.getModel().setTerminal(cell, null, true);
}
}
let trg = cell.getTerminal(false);
if (
trg != null &&
this.isCellDisconnectable(cell, trg, false)
) {
while (trg != null && !dict.get(trg)) {
trg = trg.getParent();
}
if (trg == null) {
const n = pts.length - 1;
geo.setTerminalPoint(
new Point(
<number>(<Point>pts[n]).x / scale - tr.x + dx,
<number>(<Point>pts[n]).y / scale - tr.y + dy
),
false
);
this.getModel().setTerminal(cell, null, false);
}
}
this.getModel().setGeometry(cell, geo);
}
}
}
}
} finally {
this.getModel().endUpdate();
}
}
}
/**
* Returns all visible edges connected to the given cell without loops.
*
* @param cell {@link mxCell} whose connections should be returned.
* @param parent Optional parent of the opposite end for a connection to be
* returned.
*/
getConnections(cell: Cell,
parent: Cell | null = null): CellArray {
return this.getEdges(cell, parent, true, true, false);
}
/**
* Returns true if the given cell should be kept inside the bounds of its
* parent according to the rules defined by {@link getOverlap} and
* {@link isAllowOverlapParent}. This implementation returns false for all children
* of edges and {@link isConstrainChildren} otherwise.
*
* @param cell {@link mxCell} that should be constrained.
*/
isConstrainChild(cell: Cell): boolean {
return (
this.isConstrainChildren() &&
!!cell.getParent() &&
!(<Cell>cell.getParent()).isEdge()
);
}
/**
* Returns {@link constrainChildren}.
*/
isConstrainChildren(): boolean {
return this.constrainChildren;
}
/**
* Sets {@link constrainChildren}.
*/
setConstrainChildren(value: boolean): void {
this.constrainChildren = value;
}
/**
* Returns {@link constrainRelativeChildren}.
*/
isConstrainRelativeChildren(): boolean {
return this.constrainRelativeChildren;
}
/**
* Sets {@link constrainRelativeChildren}.
*/
setConstrainRelativeChildren(value: boolean): void {
this.constrainRelativeChildren = value;
}
}
export default Connections;

6
packages/core/src/view/connection/mxConnectionConstraint.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxPoint from '../../util/datatypes/mxPoint'; import Point from '../geometry/Point';
/** /**
* Defines an object that contains the constraints about how to connect one side of an edge to its terminal. * Defines an object that contains the constraints about how to connect one side of an edge to its terminal.
@ -13,7 +13,7 @@ import mxPoint from '../../util/datatypes/mxPoint';
*/ */
class mxConnectionConstraint { class mxConnectionConstraint {
constructor( constructor(
point: mxPoint | null = null, point: Point | null = null,
perimeter: boolean = true, perimeter: boolean = true,
name: string | null = null, name: string | null = null,
dx: number | null = null, dx: number | null = null,
@ -32,7 +32,7 @@ class mxConnectionConstraint {
* <mxPoint> that specifies the fixed location of the connection point. * <mxPoint> that specifies the fixed location of the connection point.
*/ */
// point: mxPoint; // point: mxPoint;
point: mxPoint | null = null; point: Point | null = null;
/** /**
* Variable: perimeter * Variable: perimeter

168
packages/core/src/handler/mxConnectionHandler.ts → packages/core/src/view/connection/mxConnectionHandler.ts
View File

@ -2,11 +2,11 @@
* Copyright (c) 2006-2016, JGraph Ltd * Copyright (c) 2006-2016, JGraph Ltd
* Copyright (c) 2006-2016, Gaudenz Alder * Copyright (c) 2006-2016, Gaudenz Alder
*/ */
import mxGeometry from '../util/datatypes/mxGeometry'; import Geometry from '../geometry/Geometry';
import mxCell from '../view/cell/mxCell'; import Cell from '../cell/datatypes/Cell';
import mxPoint from '../util/datatypes/mxPoint'; import Point from '../geometry/Point';
import mxEventObject from '../util/event/mxEventObject'; import EventObject from '../event/EventObject';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../event/InternalEvent';
import { import {
CURSOR_CONNECT, CURSOR_CONNECT,
DEFAULT_VALID_COLOR, DEFAULT_VALID_COLOR,
@ -18,28 +18,28 @@ import {
OUTLINE_HIGHLIGHT_STROKEWIDTH, OUTLINE_HIGHLIGHT_STROKEWIDTH,
TOOLTIP_VERTICAL_OFFSET, TOOLTIP_VERTICAL_OFFSET,
VALID_COLOR, VALID_COLOR,
} from '../util/mxConstants'; } from '../../util/Constants';
import mxUtils from '../util/mxUtils'; import utils from '../../util/Utils';
import mxMouseEvent from '../util/event/mxMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
import mxImageShape from '../shape/node/mxImageShape'; import ImageShape from '../geometry/shape/node/ImageShape';
import mxCellMarker from './mxCellMarker'; import CellMarker from '../cell/CellMarker';
import mxConstraintHandler from './mxConstraintHandler'; import mxConstraintHandler from './mxConstraintHandler';
import mxPolyline from '../shape/edge/mxPolyline'; import mxPolyline from '../geometry/shape/edge/mxPolyline';
import mxEventSource from '../util/event/mxEventSource'; import EventSource from '../event/EventSource';
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../geometry/Rectangle';
import mxLog from '../util/gui/mxLog'; import mxLog from '../../util/gui/mxLog';
import { import {
getClientX, getClientX,
getClientY, getClientY,
isAltDown, isAltDown,
isConsumed, isConsumed,
isShiftDown, isShiftDown,
} from '../util/mxEventUtils'; } from '../../util/EventUtils';
import mxGraph from '../view/graph/mxGraph'; import graph from '../Graph';
import mxImage from '../util/image/mxImage'; import Image from '../image/Image';
import mxCellState from '../view/cell/mxCellState'; import CellState from '../cell/datatypes/CellState';
type FactoryMethod = (source: mxCell, target: mxCell, style?: string) => mxCell; type FactoryMethod = (source: Cell, target: Cell, style?: string) => Cell;
/** /**
* Class: mxConnectionHandler * Class: mxConnectionHandler
@ -159,7 +159,7 @@ type FactoryMethod = (source: mxCell, target: mxCell, style?: string) => mxCell;
* of the inserted edge. To print the source, target or any optional ports IDs that the * of the inserted edge. To print the source, target or any optional ports IDs that the
* edge is connected to, the following code can be used. To get more details about the * edge is connected to, the following code can be used. To get more details about the
* actual connection point, <mxGraph.getConnectionConstraint> can be used. To resolve * actual connection point, <mxGraph.getConnectionConstraint> can be used. To resolve
* the port IDs, use <mxGraphModel.getCell>. * the port IDs, use <Transactions.getCell>.
* *
* (code) * (code)
* graph.connectionHandler.addListener(mxEvent.CONNECT, (sender, evt)=> * graph.connectionHandler.addListener(mxEvent.CONNECT, (sender, evt)=>
@ -197,8 +197,8 @@ type FactoryMethod = (source: mxCell, target: mxCell, style?: string) => mxCell;
* optional cell style from the preview as the third argument. It returns * optional cell style from the preview as the third argument. It returns
* the <mxCell> that represents the new edge. * the <mxCell> that represents the new edge.
*/ */
class mxConnectionHandler extends mxEventSource { class mxConnectionHandler extends EventSource {
constructor(graph: mxGraph, factoryMethod: FactoryMethod | null = null) { constructor(graph: graph, factoryMethod: FactoryMethod | null = null) {
super(); super();
this.graph = graph; this.graph = graph;
@ -210,7 +210,7 @@ class mxConnectionHandler extends mxEventSource {
this.reset(); this.reset();
}; };
this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler); this.graph.addListener(InternalEvent.ESCAPE, this.escapeHandler);
} }
/** /**
@ -219,7 +219,7 @@ class mxConnectionHandler extends mxEventSource {
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
*/ */
// graph: mxGraph; // graph: mxGraph;
graph: mxGraph; graph: graph;
/** /**
* Variable: factoryMethod * Variable: factoryMethod
@ -257,7 +257,7 @@ class mxConnectionHandler extends mxEventSource {
* is used in <createIcons>. Default is null. * is used in <createIcons>. Default is null.
*/ */
connectImage: mxImage | null = null; connectImage: Image | null = null;
/** /**
* Variable: targetConnectImage * Variable: targetConnectImage
@ -298,7 +298,7 @@ class mxConnectionHandler extends mxEventSource {
* *
* Holds the <mxTerminalMarker> used for finding source and target cells. * Holds the <mxTerminalMarker> used for finding source and target cells.
*/ */
marker: mxCellMarker; marker: CellMarker;
/** /**
* Variable: constraintHandler * Variable: constraintHandler
@ -339,7 +339,7 @@ class mxConnectionHandler extends mxEventSource {
* Holds the <mxPoint> where the mouseDown took place while the handler is * Holds the <mxPoint> where the mouseDown took place while the handler is
* active. * active.
*/ */
first: mxPoint | null = null; first: Point | null = null;
/** /**
* Variable: connectIconOffset * Variable: connectIconOffset
@ -349,7 +349,7 @@ class mxConnectionHandler extends mxEventSource {
* Note that placing the icon under the mouse pointer with an * Note that placing the icon under the mouse pointer with an
* offset of (0,0) will affect hit detection. * offset of (0,0) will affect hit detection.
*/ */
connectIconOffset = new mxPoint(0, TOOLTIP_VERTICAL_OFFSET); connectIconOffset = new Point(0, TOOLTIP_VERTICAL_OFFSET);
/** /**
* Variable: edgeState * Variable: edgeState
@ -357,7 +357,7 @@ class mxConnectionHandler extends mxEventSource {
* Optional <mxCellState> that represents the preview edge while the * Optional <mxCellState> that represents the preview edge while the
* handler is active. This is created in <createEdgeState>. * handler is active. This is created in <createEdgeState>.
*/ */
edgeState: mxCellState | null = null; edgeState: CellState | null = null;
/** /**
* Variable: changeHandler * Variable: changeHandler
@ -466,11 +466,11 @@ class mxConnectionHandler extends mxEventSource {
* released. * released.
*/ */
isInsertBefore( isInsertBefore(
edge: mxCell, edge: Cell,
source: mxCell, source: Cell,
target: mxCell, target: Cell,
evt: MouseEvent, evt: MouseEvent,
dropTarget: mxCell dropTarget: Cell
) { ) {
return this.insertBeforeSource && source !== target; return this.insertBeforeSource && source !== target;
} }
@ -515,7 +515,7 @@ class mxConnectionHandler extends mxEventSource {
shape.pointerEvents = false; shape.pointerEvents = false;
shape.isDashed = true; shape.isDashed = true;
shape.init(this.graph.getView().getOverlayPane()); shape.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents(shape.node, this.graph, null); InternalEvent.redirectMouseEvents(shape.node, this.graph, null);
} }
return shape; return shape;
@ -551,21 +551,21 @@ class mxConnectionHandler extends mxEventSource {
} }
}; };
this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler); this.graph.getModel().addListener(InternalEvent.CHANGE, this.changeHandler);
this.graph.getView().addListener(mxEvent.SCALE, this.changeHandler); this.graph.getView().addListener(InternalEvent.SCALE, this.changeHandler);
this.graph.getView().addListener(mxEvent.TRANSLATE, this.changeHandler); this.graph.getView().addListener(InternalEvent.TRANSLATE, this.changeHandler);
this.graph this.graph
.getView() .getView()
.addListener(mxEvent.SCALE_AND_TRANSLATE, this.changeHandler); .addListener(InternalEvent.SCALE_AND_TRANSLATE, this.changeHandler);
// Removes the icon if we step into/up or start editing // Removes the icon if we step into/up or start editing
this.drillHandler = (sender) => { this.drillHandler = (sender) => {
this.reset(); this.reset();
}; };
this.graph.addListener(mxEvent.START_EDITING, this.drillHandler); this.graph.addListener(InternalEvent.START_EDITING, this.drillHandler);
this.graph.getView().addListener(mxEvent.DOWN, this.drillHandler); this.graph.getView().addListener(InternalEvent.DOWN, this.drillHandler);
this.graph.getView().addListener(mxEvent.UP, this.drillHandler); this.graph.getView().addListener(InternalEvent.UP, this.drillHandler);
} }
/** /**
@ -574,7 +574,7 @@ class mxConnectionHandler extends mxEventSource {
* Returns true if the given cell is connectable. This is a hook to * Returns true if the given cell is connectable. This is a hook to
* disable floating connections. This implementation returns true. * disable floating connections. This implementation returns true.
*/ */
isConnectableCell(cell: mxCell) { isConnectableCell(cell: Cell) {
return true; return true;
} }
@ -586,7 +586,7 @@ class mxConnectionHandler extends mxEventSource {
createMarker() { createMarker() {
const self = this; const self = this;
class MyCellMarker extends mxCellMarker { class MyCellMarker extends CellMarker {
hotspotEnabled = true; hotspotEnabled = true;
// Overrides to return cell at location only if valid (so that // Overrides to return cell at location only if valid (so that
@ -687,7 +687,7 @@ class mxConnectionHandler extends mxEventSource {
// start(state: mxCellState, x: number, y: number, edgeState: mxCellState): void; // start(state: mxCellState, x: number, y: number, edgeState: mxCellState): void;
start(state, x, y, edgeState) { start(state, x, y, edgeState) {
this.previous = state; this.previous = state;
this.first = new mxPoint(x, y); this.first = new Point(x, y);
this.edgeState = edgeState != null ? edgeState : this.createEdgeState(null); this.edgeState = edgeState != null ? edgeState : this.createEdgeState(null);
// Marks the source state // Marks the source state
@ -695,7 +695,7 @@ class mxConnectionHandler extends mxEventSource {
this.marker.markedState = state; this.marker.markedState = state;
this.marker.mark(); this.marker.mark();
this.fireEvent(new mxEventObject(mxEvent.START, 'state', this.previous)); this.fireEvent(new EventObject(InternalEvent.START, 'state', this.previous));
} }
/** /**
@ -820,8 +820,8 @@ class mxConnectionHandler extends mxEventSource {
// mouse move events in IE, must use VML and SVG instead even if the // mouse move events in IE, must use VML and SVG instead even if the
// connect-icon appears behind the selection border and the selection // connect-icon appears behind the selection border and the selection
// border consumes the events before the icon gets a chance // border consumes the events before the icon gets a chance
const bounds = new mxRectangle(0, 0, image.width, image.height); const bounds = new Rectangle(0, 0, image.width, image.height);
const icon = new mxImageShape(bounds, image.src, null, null, 0); const icon = new ImageShape(bounds, image.src, null, null, 0);
icon.preserveImageAspect = false; icon.preserveImageAspect = false;
if (this.isMoveIconToFrontForState(state)) { if (this.isMoveIconToFrontForState(state)) {
@ -852,13 +852,13 @@ class mxConnectionHandler extends mxEventSource {
if (!isConsumed(evt)) { if (!isConsumed(evt)) {
this.icon = icon; this.icon = icon;
this.graph.fireMouseEvent( this.graph.fireMouseEvent(
mxEvent.MOUSE_DOWN, InternalEvent.MOUSE_DOWN,
new mxMouseEvent(evt, getState()) new InternalMouseEvent(evt, getState())
); );
} }
}; };
mxEvent.redirectMouseEvents(icon.node, this.graph, getState, mouseDown); InternalEvent.redirectMouseEvents(icon.node, this.graph, getState, mouseDown);
icons.push(icon); icons.push(icon);
this.redrawIcons(icons, this.iconState); this.redrawIcons(icons, this.iconState);
@ -909,21 +909,21 @@ class mxConnectionHandler extends mxEventSource {
cx = size.width !== 0 ? state.x + (size.width * scale) / 2 : cx; cx = size.width !== 0 ? state.x + (size.width * scale) / 2 : cx;
cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy; cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy;
const alpha = mxUtils.toRadians( const alpha = utils.toRadians(
mxUtils.getValue(state.style, 'rotation') || 0 utils.getValue(state.style, 'rotation') || 0
); );
if (alpha !== 0) { if (alpha !== 0) {
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
const ct = new mxPoint(state.getCenterX(), state.getCenterY()); const ct = new Point(state.getCenterX(), state.getCenterY());
const pt = mxUtils.getRotatedPoint(new mxPoint(cx, cy), cos, sin, ct); const pt = utils.getRotatedPoint(new Point(cx, cy), cos, sin, ct);
cx = pt.x; cx = pt.x;
cy = pt.y; cy = pt.y;
} }
} }
return new mxPoint(cx - icon.bounds.width / 2, cy - icon.bounds.height / 2); return new Point(cx - icon.bounds.width / 2, cy - icon.bounds.height / 2);
} }
/** /**
@ -991,7 +991,7 @@ class mxConnectionHandler extends mxEventSource {
this.first = this.constraintHandler.currentPoint.clone(); this.first = this.constraintHandler.currentPoint.clone();
} else { } else {
// Stores the location of the initial mousedown // Stores the location of the initial mousedown
this.first = new mxPoint(me.getGraphX(), me.getGraphY()); this.first = new Point(me.getGraphX(), me.getGraphY());
} }
this.edgeState = this.createEdgeState(me); this.edgeState = this.createEdgeState(me);
@ -1012,7 +1012,7 @@ class mxConnectionHandler extends mxEventSource {
this.edgeState.cell.geometry.setTerminalPoint(pt, true); this.edgeState.cell.geometry.setTerminalPoint(pt, true);
} }
this.fireEvent(new mxEventObject(mxEvent.START, 'state', this.previous)); this.fireEvent(new EventObject(InternalEvent.START, 'state', this.previous));
me.consume(); me.consume();
} }
@ -1063,7 +1063,7 @@ class mxConnectionHandler extends mxEventSource {
*/ */
// isOutlineConnectEvent(me: mxMouseEvent): boolean; // isOutlineConnectEvent(me: mxMouseEvent): boolean;
isOutlineConnectEvent(me) { isOutlineConnectEvent(me) {
const offset = mxUtils.getOffset(this.graph.container); const offset = utils.getOffset(this.graph.container);
const evt = me.getEvent(); const evt = me.getEvent();
const clientX = getClientX(evt); const clientX = getClientX(evt);
@ -1174,7 +1174,7 @@ class mxConnectionHandler extends mxEventSource {
// Handles special case where mouse is on outline away from actual end point // Handles special case where mouse is on outline away from actual end point
// in which case the grid is ignored and mouse point is used instead // in which case the grid is ignored and mouse point is used instead
if (me.isSource(this.marker.highlight.shape)) { if (me.isSource(this.marker.highlight.shape)) {
point = new mxPoint(me.getGraphX(), me.getGraphY()); point = new point(me.getGraphX(), me.getGraphY());
} }
const constraint = this.graph.getOutlineConstraint( const constraint = this.graph.getOutlineConstraint(
@ -1262,7 +1262,7 @@ class mxConnectionHandler extends mxEventSource {
const tmp = const tmp =
this.sourceConstraint != null this.sourceConstraint != null
? this.first ? this.first
: new mxPoint(this.previous.getCenterX(), this.previous.getCenterY()); : new point(this.previous.getCenterX(), this.previous.getCenterY());
if (Math.abs(tmp.x - me.getGraphX()) < tol) { if (Math.abs(tmp.x - me.getGraphX()) < tol) {
point.x = tmp.x; point.x = tmp.x;
@ -1295,11 +1295,11 @@ class mxConnectionHandler extends mxEventSource {
const view = this.graph.getView(); const view = this.graph.getView();
const { scale } = view; const { scale } = view;
const tr = view.translate; const tr = view.translate;
let point = new mxPoint(me.getGraphX(), me.getGraphY()); let point = new Point(me.getGraphX(), me.getGraphY());
this.error = null; this.error = null;
if (this.graph.isGridEnabledEvent(me.getEvent())) { if (this.graph.isGridEnabledEvent(me.getEvent())) {
point = new mxPoint( point = new point(
(this.graph.snap(point.x / scale - tr.x) + tr.x) * scale, (this.graph.snap(point.x / scale - tr.x) + tr.x) * scale,
(this.graph.snap(point.y / scale - tr.y) + tr.y) * scale (this.graph.snap(point.y / scale - tr.y) + tr.y) * scale
); );
@ -1360,7 +1360,7 @@ class mxConnectionHandler extends mxEventSource {
this.selectedIcon.bounds.x = pos.x; this.selectedIcon.bounds.x = pos.x;
this.selectedIcon.bounds.y = pos.y; this.selectedIcon.bounds.y = pos.y;
} else { } else {
const bounds = new mxRectangle( const bounds = new Rectangle(
me.getGraphX() + this.connectIconOffset.x, me.getGraphX() + this.connectIconOffset.x,
me.getGraphY() + this.connectIconOffset.y, me.getGraphY() + this.connectIconOffset.y,
w, w,
@ -1481,7 +1481,7 @@ class mxConnectionHandler extends mxEventSource {
this.graph.container.style.cursor = this.cursor; this.graph.container.style.cursor = this.cursor;
} }
mxEvent.consume(me.getEvent()); InternalEvent.consume(me.getEvent());
me.consume(); me.consume();
} else if (!this.isEnabled() || !this.graph.isEnabled()) { } else if (!this.isEnabled() || !this.graph.isEnabled()) {
this.constraintHandler.reset(); this.constraintHandler.reset();
@ -1635,7 +1635,7 @@ class mxConnectionHandler extends mxEventSource {
const next = const next =
this.waypoints != null && this.waypoints.length > 0 this.waypoints != null && this.waypoints.length > 0
? this.waypoints[this.waypoints.length - 1] ? this.waypoints[this.waypoints.length - 1]
: new mxPoint(this.previous.getCenterX(), this.previous.getCenterY()); : new Point(this.previous.getCenterX(), this.previous.getCenterY());
const tmp = targetPerimeter( const tmp = targetPerimeter(
view.getPerimeterBounds(state), view.getPerimeterBounds(state),
this.edgeState, this.edgeState,
@ -1647,7 +1647,7 @@ class mxConnectionHandler extends mxEventSource {
result = tmp; result = tmp;
} }
} else { } else {
result = new mxPoint(state.getCenterX(), state.getCenterY()); result = new Point(state.getCenterX(), state.getCenterY());
} }
return result; return result;
@ -1670,15 +1670,15 @@ class mxConnectionHandler extends mxEventSource {
let result = null; let result = null;
const { view } = state; const { view } = state;
const sourcePerimeter = view.getPerimeterFunction(state); const sourcePerimeter = view.getPerimeterFunction(state);
const c = new mxPoint(state.getCenterX(), state.getCenterY()); const c = new Point(state.getCenterX(), state.getCenterY());
if (sourcePerimeter != null) { if (sourcePerimeter != null) {
const theta = mxUtils.getValue(state.style, 'rotation', 0); const theta = utils.getValue(state.style, 'rotation', 0);
const rad = -theta * (Math.PI / 180); const rad = -theta * (Math.PI / 180);
if (theta !== 0) { if (theta !== 0) {
next = mxUtils.getRotatedPoint( next = utils.getRotatedPoint(
new mxPoint(next.x, next.y), new Point(next.x, next.y),
Math.cos(rad), Math.cos(rad),
Math.sin(rad), Math.sin(rad),
c c
@ -1694,8 +1694,8 @@ class mxConnectionHandler extends mxEventSource {
if (tmp != null) { if (tmp != null) {
if (theta !== 0) { if (theta !== 0) {
tmp = mxUtils.getRotatedPoint( tmp = utils.getRotatedPoint(
new mxPoint(tmp.x, tmp.y), new Point(tmp.x, tmp.y),
Math.cos(-rad), Math.cos(-rad),
Math.sin(-rad), Math.sin(-rad),
c c
@ -1748,7 +1748,7 @@ class mxConnectionHandler extends mxEventSource {
*/ */
// addWaypointForEvent(me: mxMouseEvent): void; // addWaypointForEvent(me: mxMouseEvent): void;
addWaypointForEvent(me) { addWaypointForEvent(me) {
let point = mxUtils.convertPoint( let point = utils.convertPoint(
this.graph.container, this.graph.container,
me.getX(), me.getX(),
me.getY() me.getY()
@ -1766,7 +1766,7 @@ class mxConnectionHandler extends mxEventSource {
} }
const { scale } = this.graph.view; const { scale } = this.graph.view;
point = new mxPoint( point = new point(
this.graph.snap(me.getGraphX() / scale) * scale, this.graph.snap(me.getGraphX() / scale) * scale,
this.graph.snap(me.getGraphY() / scale) * scale this.graph.snap(me.getGraphY() / scale) * scale
); );
@ -1891,7 +1891,7 @@ class mxConnectionHandler extends mxEventSource {
this.mouseDownCounter = 0; this.mouseDownCounter = 0;
this.first = null; this.first = null;
this.fireEvent(new mxEventObject(mxEvent.RESET)); this.fireEvent(new EventObject(InternalEvent.RESET));
} }
/** /**
@ -2095,7 +2095,7 @@ class mxConnectionHandler extends mxEventSource {
let geo = edge.getGeometry(); let geo = edge.getGeometry();
if (geo == null) { if (geo == null) {
geo = new mxGeometry(); geo = new Geometry();
geo.relative = true; geo.relative = true;
model.setGeometry(edge, geo); model.setGeometry(edge, geo);
@ -2109,7 +2109,7 @@ class mxConnectionHandler extends mxEventSource {
for (let i = 0; i < this.waypoints.length; i += 1) { for (let i = 0; i < this.waypoints.length; i += 1) {
const pt = this.waypoints[i]; const pt = this.waypoints[i];
geo.points.push(new mxPoint(pt.x / s - tr.x, pt.y / s - tr.y)); geo.points.push(new Point(pt.x / s - tr.x, pt.y / s - tr.y));
} }
} }
@ -2118,11 +2118,11 @@ class mxConnectionHandler extends mxEventSource {
const s = this.graph.view.scale; const s = this.graph.view.scale;
const pt = const pt =
this.originalPoint != null this.originalPoint != null
? new mxPoint( ? new Point(
this.originalPoint.x / s - t.x, this.originalPoint.x / s - t.x,
this.originalPoint.y / s - t.y this.originalPoint.y / s - t.y
) )
: new mxPoint( : new Point(
this.currentPoint.x / s - t.x, this.currentPoint.x / s - t.x,
this.currentPoint.y / s - t.y this.currentPoint.y / s - t.y
); );
@ -2132,8 +2132,8 @@ class mxConnectionHandler extends mxEventSource {
} }
this.fireEvent( this.fireEvent(
new mxEventObject( new EventObject(
mxEvent.CONNECT, InternalEvent.CONNECT,
'cell', 'cell',
edge, edge,
'terminal', 'terminal',
@ -2217,7 +2217,7 @@ class mxConnectionHandler extends mxEventSource {
if (geo != null) { if (geo != null) {
const t = this.graph.view.translate; const t = this.graph.view.translate;
const s = this.graph.view.scale; const s = this.graph.view.scale;
const point = new mxPoint( const point = new Point(
this.currentPoint.x / s - t.x, this.currentPoint.x / s - t.x,
this.currentPoint.y / s - t.y this.currentPoint.y / s - t.y
); );
@ -2285,11 +2285,11 @@ class mxConnectionHandler extends mxEventSource {
} }
if (edge == null) { if (edge == null) {
edge = new mxCell(value || ''); edge = new Cell(value || '');
edge.setEdge(true); edge.setEdge(true);
edge.setStyle(style); edge.setStyle(style);
const geo = new mxGeometry(); const geo = new Geometry();
geo.relative = true; geo.relative = true;
edge.setGeometry(geo); edge.setGeometry(geo);
} }

60
packages/core/src/handler/mxConstraintHandler.js → packages/core/src/view/connection/mxConstraintHandler.js
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxImage from '../util/image/mxImage'; import Image from '../image/Image';
import mxClient from '../mxClient'; import mxClient from '../../mxClient';
import { import {
DEFAULT_VALID_COLOR, DEFAULT_VALID_COLOR,
DIALECT_MIXEDHTML, DIALECT_MIXEDHTML,
@ -13,13 +13,13 @@ import {
HIGHLIGHT_OPACITY, HIGHLIGHT_OPACITY,
HIGHLIGHT_SIZE, HIGHLIGHT_SIZE,
HIGHLIGHT_STROKEWIDTH, HIGHLIGHT_STROKEWIDTH,
} from '../util/mxConstants'; } from '../../util/Constants';
import mxEvent from '../util/event/mxEvent'; import InternalEvent from '../event/InternalEvent';
import mxUtils from '../util/mxUtils'; import utils from '../../util/Utils';
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../geometry/Rectangle';
import mxImageShape from '../shape/node/mxImageShape'; import ImageShape from '../geometry/shape/node/ImageShape';
import mxRectangleShape from '../shape/node/mxRectangleShape'; import RectangleShape from '../geometry/shape/node/RectangleShape';
import { isShiftDown } from '../util/mxEventUtils'; import { isShiftDown } from '../../util/EventUtils';
/** /**
* Handles constraints on connection targets. This class is in charge of * Handles constraints on connection targets. This class is in charge of
@ -44,18 +44,18 @@ class mxConstraintHandler {
} }
}; };
this.graph.model.addListener(mxEvent.CHANGE, this.resetHandler); this.graph.model.addListener(InternalEvent.CHANGE, this.resetHandler);
this.graph.view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.resetHandler); this.graph.view.addListener(InternalEvent.SCALE_AND_TRANSLATE, this.resetHandler);
this.graph.view.addListener(mxEvent.TRANSLATE, this.resetHandler); this.graph.view.addListener(InternalEvent.TRANSLATE, this.resetHandler);
this.graph.view.addListener(mxEvent.SCALE, this.resetHandler); this.graph.view.addListener(InternalEvent.SCALE, this.resetHandler);
this.graph.addListener(mxEvent.ROOT, this.resetHandler); this.graph.addListener(InternalEvent.ROOT, this.resetHandler);
} }
/** /**
* {@link mxImage} to be used as the image for fixed connection points. * {@link Image} to be used as the image for fixed connection points.
*/ */
// pointImage: mxImage; // pointImage: mxImage;
pointImage = new mxImage(`${mxClient.imageBasePath}/point.gif`, 5, 5); pointImage = new Image(`${mxClient.imageBasePath}/point.gif`, 5, 5);
/** /**
* Reference to the enclosing {@link mxGraph}. * Reference to the enclosing {@link mxGraph}.
@ -240,7 +240,7 @@ class mxConstraintHandler {
this.reset(); this.reset();
}; };
mxEvent.addListener( InternalEvent.addListener(
this.graph.container, this.graph.container,
'mouseleave', 'mouseleave',
this.resetHandler this.resetHandler
@ -250,8 +250,8 @@ class mxConstraintHandler {
const tol = this.getTolerance(me); const tol = this.getTolerance(me);
const x = point != null ? point.x : me.getGraphX(); const x = point != null ? point.x : me.getGraphX();
const y = point != null ? point.y : me.getGraphY(); const y = point != null ? point.y : me.getGraphY();
const grid = new mxRectangle(x - tol, y - tol, 2 * tol, 2 * tol); const grid = new Rectangle(x - tol, y - tol, 2 * tol, 2 * tol);
const mouse = new mxRectangle( const mouse = new Rectangle(
me.getGraphX() - tol, me.getGraphX() - tol,
me.getGraphY() - tol, me.getGraphY() - tol,
2 * tol, 2 * tol,
@ -266,7 +266,7 @@ class mxConstraintHandler {
this.currentFocus == null || this.currentFocus == null ||
state != null || state != null ||
!this.currentFocus.cell.isVertex() || !this.currentFocus.cell.isVertex() ||
!mxUtils.intersects(this.currentFocusArea, mouse)) && !utils.intersects(this.currentFocusArea, mouse)) &&
state !== this.currentFocus state !== this.currentFocus
) { ) {
this.currentFocusArea = null; this.currentFocusArea = null;
@ -325,7 +325,7 @@ class mxConstraintHandler {
return this.currentFocus != null ? this.currentFocus : state; return this.currentFocus != null ? this.currentFocus : state;
}; };
mxEvent.redirectMouseEvents(hl.node, this.graph, getState); InternalEvent.redirectMouseEvents(hl.node, this.graph, getState);
} }
this.focusHighlight.bounds = tmp; this.focusHighlight.bounds = tmp;
@ -358,7 +358,7 @@ class mxConstraintHandler {
) { ) {
const state = this.graph.view.getState(this.currentFocus.cell); const state = this.graph.view.getState(this.currentFocus.cell);
this.currentFocus = state; this.currentFocus = state;
this.currentFocusArea = new mxRectangle( this.currentFocusArea = new Rectangle(
state.x, state.x,
state.y, state.y,
state.width, state.width,
@ -369,7 +369,7 @@ class mxConstraintHandler {
const cp = this.graph.getConnectionPoint(state, this.constraints[i]); const cp = this.graph.getConnectionPoint(state, this.constraints[i]);
const img = this.getImageForConstraint(state, this.constraints[i], cp); const img = this.getImageForConstraint(state, this.constraints[i], cp);
const bounds = new mxRectangle( const bounds = new Rectangle(
Math.round(cp.x - img.width / 2), Math.round(cp.x - img.width / 2),
Math.round(cp.y - img.height / 2), Math.round(cp.y - img.height / 2),
img.width, img.width,
@ -402,7 +402,7 @@ class mxConstraintHandler {
// Only uses cells which have constraints // Only uses cells which have constraints
if (this.constraints != null) { if (this.constraints != null) {
this.currentFocus = state; this.currentFocus = state;
this.currentFocusArea = new mxRectangle( this.currentFocusArea = new Rectangle(
state.x, state.x,
state.y, state.y,
state.width, state.width,
@ -426,13 +426,13 @@ class mxConstraintHandler {
const img = this.getImageForConstraint(state, this.constraints[i], cp); const img = this.getImageForConstraint(state, this.constraints[i], cp);
const { src } = img; const { src } = img;
const bounds = new mxRectangle( const bounds = new Rectangle(
Math.round(cp.x - img.width / 2), Math.round(cp.x - img.width / 2),
Math.round(cp.y - img.height / 2), Math.round(cp.y - img.height / 2),
img.width, img.width,
img.height img.height
); );
const icon = new mxImageShape(bounds, src); const icon = new ImageShape(bounds, src);
icon.dialect = icon.dialect =
this.graph.dialect !== DIALECT_SVG ? DIALECT_MIXEDHTML : DIALECT_SVG; this.graph.dialect !== DIALECT_SVG ? DIALECT_MIXEDHTML : DIALECT_SVG;
icon.preserveImageAspect = false; icon.preserveImageAspect = false;
@ -452,7 +452,7 @@ class mxConstraintHandler {
icon.redraw(); icon.redraw();
mxEvent.redirectMouseEvents(icon.node, this.graph, getState); InternalEvent.redirectMouseEvents(icon.node, this.graph, getState);
this.currentFocusArea.add(icon.bounds); this.currentFocusArea.add(icon.bounds);
this.focusIcons.push(icon); this.focusIcons.push(icon);
this.focusPoints.push(cp); this.focusPoints.push(cp);
@ -472,7 +472,7 @@ class mxConstraintHandler {
*/ */
// createHighlightShape(): mxShape; // createHighlightShape(): mxShape;
createHighlightShape() { createHighlightShape() {
const hl = new mxRectangleShape( const hl = new RectangleShape(
null, null,
this.highlightColor, this.highlightColor,
this.highlightColor, this.highlightColor,
@ -488,7 +488,7 @@ class mxConstraintHandler {
*/ */
// intersects(icon: mxShape, mouse: mxRectangle, source: mxCell, existingEdge: mxCell): boolean; // intersects(icon: mxShape, mouse: mxRectangle, source: mxCell, existingEdge: mxCell): boolean;
intersects(icon, mouse, source, existingEdge) { intersects(icon, mouse, source, existingEdge) {
return mxUtils.intersects(icon.bounds, mouse); return utils.intersects(icon.bounds, mouse);
} }
/** /**
@ -506,7 +506,7 @@ class mxConstraintHandler {
} }
if (this.mouseleaveHandler != null && this.graph.container != null) { if (this.mouseleaveHandler != null && this.graph.container != null) {
mxEvent.removeListener( InternalEvent.removeListener(
this.graph.container, this.graph.container,
'mouseleave', 'mouseleave',
this.mouseleaveHandler this.mouseleaveHandler

66
packages/core/src/util/drag_pan/mxDragSource.js → packages/core/src/view/drag_drop/DragSource.js
View File

@ -4,14 +4,14 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxRectangle from '../datatypes/mxRectangle'; import Rectangle from '../geometry/Rectangle';
import mxCellHighlight from '../../handler/mxCellHighlight'; import mxCellHighlight from '../selection/mxCellHighlight';
import mxUtils from '../mxUtils'; import utils from '../../util/Utils';
import mxEvent from '../event/mxEvent'; import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import mxGuide from '../mxGuide'; import mxGuide from '../../util/Guide';
import { DROP_TARGET_COLOR } from '../mxConstants'; import { DROP_TARGET_COLOR } from '../../util/Constants';
import mxPoint from '../datatypes/mxPoint'; import Point from '../geometry/Point';
import { import {
getClientX, getClientX,
getClientY, getClientY,
@ -20,10 +20,10 @@ import {
isMouseEvent, isMouseEvent,
isPenEvent, isPenEvent,
isTouchEvent, isTouchEvent,
} from '../mxEventUtils'; } from '../../util/EventUtils';
/** /**
* @class mxDragSource * @class DragSource
* *
* Wrapper to create a drag source from a DOM element so that the element can * Wrapper to create a drag source from a DOM element so that the element can
* be dragged over a graph and dropped into the graph as a new cell. * be dragged over a graph and dropped into the graph as a new cell.
@ -32,26 +32,26 @@ import {
* available, so the preview and the dropHandler must match. * available, so the preview and the dropHandler must match.
* *
*/ */
class mxDragSource { class DragSource {
constructor(element, dropHandler) { constructor(element, dropHandler) {
this.element = element; this.element = element;
this.dropHandler = dropHandler; this.dropHandler = dropHandler;
// Handles a drag gesture on the element // Handles a drag gesture on the element
mxEvent.addGestureListeners(element, (evt) => { InternalEvent.addGestureListeners(element, (evt) => {
this.mouseDown(evt); this.mouseDown(evt);
}); });
// Prevents native drag and drop // Prevents native drag and drop
mxEvent.addListener(element, 'dragstart', (evt) => { InternalEvent.addListener(element, 'dragstart', (evt) => {
mxEvent.consume(evt); InternalEvent.consume(evt);
}); });
this.eventConsumer = (sender, evt) => { this.eventConsumer = (sender, evt) => {
const evtName = evt.getProperty('eventName'); const evtName = evt.getProperty('eventName');
const me = evt.getProperty('event'); const me = evt.getProperty('event');
if (evtName !== mxEvent.MOUSE_DOWN) { if (evtName !== InternalEvent.MOUSE_DOWN) {
me.consume(); me.consume();
} }
}; };
@ -71,7 +71,7 @@ class mxDragSource {
dropHandler = null; dropHandler = null;
/** /**
* {@link mxPoint} that specifies the offset of the {@link dragElement}. Default is null. * {@link Point} that specifies the offset of the {@link dragElement}. Default is null.
*/ */
// dragOffset: mxPoint; // dragOffset: mxPoint;
dragOffset = null; dragOffset = null;
@ -84,7 +84,7 @@ class mxDragSource {
dragElement = null; dragElement = null;
/** /**
* Optional {@link mxRectangle} that specifies the unscaled size of the preview. * Optional {@link Rectangle} that specifies the unscaled size of the preview.
*/ */
// previewElement: mxRectangle; // previewElement: mxRectangle;
previewElement = null; previewElement = null;
@ -309,7 +309,7 @@ class mxDragSource {
this.startDrag(evt); this.startDrag(evt);
this.mouseMoveHandler = this.mouseMove.bind(this); this.mouseMoveHandler = this.mouseMove.bind(this);
this.mouseUpHandler = this.mouseUp.bind(this); this.mouseUpHandler = this.mouseUp.bind(this);
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
document, document,
null, null,
this.mouseMoveHandler, this.mouseMoveHandler,
@ -318,7 +318,7 @@ class mxDragSource {
if (mxClient.IS_TOUCH && !isMouseEvent(evt)) { if (mxClient.IS_TOUCH && !isMouseEvent(evt)) {
this.eventSource = getSource(evt); this.eventSource = getSource(evt);
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
this.eventSource, this.eventSource,
null, null,
this.mouseMoveHandler, this.mouseMoveHandler,
@ -336,7 +336,7 @@ class mxDragSource {
this.dragElement = this.createDragElement(evt); this.dragElement = this.createDragElement(evt);
this.dragElement.style.position = 'absolute'; this.dragElement.style.position = 'absolute';
this.dragElement.style.zIndex = this.dragElementZIndex; this.dragElement.style.zIndex = this.dragElementZIndex;
mxUtils.setOpacity(this.dragElement, this.dragElementOpacity); utils.setOpacity(this.dragElement, this.dragElementOpacity);
if (this.checkEventSource && mxClient.IS_SVG) { if (this.checkEventSource && mxClient.IS_SVG) {
this.dragElement.style.pointerEvents = 'none'; this.dragElement.style.pointerEvents = 'none';
@ -385,8 +385,8 @@ class mxDragSource {
graphContainsEvent(graph, evt) { graphContainsEvent(graph, evt) {
const x = getClientX(evt); const x = getClientX(evt);
const y = getClientY(evt); const y = getClientY(evt);
const offset = mxUtils.getOffset(graph.container); const offset = utils.getOffset(graph.container);
const origin = mxUtils.getScrollOrigin(); const origin = utils.getScrollOrigin();
let elt = this.getElementForEvent(evt); let elt = this.getElementForEvent(evt);
if (this.checkEventSource) { if (this.checkEventSource) {
@ -454,7 +454,7 @@ class mxDragSource {
y += this.dragOffset.y; y += this.dragOffset.y;
} }
const offset = mxUtils.getDocumentScrollOrigin(document); const offset = utils.getDocumentScrollOrigin(document);
this.dragElement.style.left = `${x + offset.x}px`; this.dragElement.style.left = `${x + offset.x}px`;
this.dragElement.style.top = `${y + offset.y}px`; this.dragElement.style.top = `${y + offset.y}px`;
@ -462,7 +462,7 @@ class mxDragSource {
this.dragElement.style.visibility = 'hidden'; this.dragElement.style.visibility = 'hidden';
} }
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
/** /**
@ -492,7 +492,7 @@ class mxDragSource {
this.stopDrag(); this.stopDrag();
this.removeListeners(); this.removeListeners();
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
/** /**
@ -501,7 +501,7 @@ class mxDragSource {
// removeListeners(): void; // removeListeners(): void;
removeListeners() { removeListeners() {
if (this.eventSource != null) { if (this.eventSource != null) {
mxEvent.removeGestureListeners( InternalEvent.removeGestureListeners(
this.eventSource, this.eventSource,
null, null,
this.mouseMoveHandler, this.mouseMoveHandler,
@ -510,7 +510,7 @@ class mxDragSource {
this.eventSource = null; this.eventSource = null;
} }
mxEvent.removeGestureListeners( InternalEvent.removeGestureListeners(
document, document,
null, null,
this.mouseMoveHandler, this.mouseMoveHandler,
@ -550,7 +550,7 @@ class mxDragSource {
} }
// Consumes all events in the current graph before they are fired // Consumes all events in the current graph before they are fired
graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.eventConsumer); graph.addListener(InternalEvent.FIRE_MOUSE_EVENT, this.eventConsumer);
} }
/** /**
@ -590,8 +590,8 @@ class mxDragSource {
*/ */
// dragOver(graph: mxGraph, evt: Event): void; // dragOver(graph: mxGraph, evt: Event): void;
dragOver(graph, evt) { dragOver(graph, evt) {
const offset = mxUtils.getOffset(graph.container); const offset = utils.getOffset(graph.container);
const origin = mxUtils.getScrollOrigin(graph.container); const origin = utils.getScrollOrigin(graph.container);
let x = getClientX(evt) - offset.x + origin.x - graph.panDx; let x = getClientX(evt) - offset.x + origin.x - graph.panDx;
let y = getClientY(evt) - offset.y + origin.y - graph.panDy; let y = getClientY(evt) - offset.y + origin.y - graph.panDy;
@ -626,8 +626,8 @@ class mxDragSource {
// LATER: HTML preview appears smaller than SVG preview // LATER: HTML preview appears smaller than SVG preview
const w = parseInt(this.previewElement.style.width); const w = parseInt(this.previewElement.style.width);
const h = parseInt(this.previewElement.style.height); const h = parseInt(this.previewElement.style.height);
const bounds = new mxRectangle(0, 0, w, h); const bounds = new Rectangle(0, 0, w, h);
let delta = new mxPoint(x, y); let delta = new Point(x, y);
delta = this.currentGuide.move(bounds, delta, gridEnabled, true); delta = this.currentGuide.move(bounds, delta, gridEnabled, true);
hideGuide = false; hideGuide = false;
x = delta.x; x = delta.x;
@ -654,7 +654,7 @@ class mxDragSource {
this.previewElement.style.visibility = 'visible'; this.previewElement.style.visibility = 'visible';
} }
this.currentPoint = new mxPoint(x, y); this.currentPoint = new Point(x, y);
} }
/** /**
@ -675,4 +675,4 @@ class mxDragSource {
} }
} }
export default mxDragSource; export default DragSource;

23
packages/core/src/view/drag_drop/GraphDragDrop.ts Normal file
View File

@ -0,0 +1,23 @@
class GraphDragDrop {
/**
* Specifies if the graph should automatically scroll if the mouse goes near
* the container edge while dragging. This is only taken into account if the
* container has scrollbars.
*
* If you need this to work without scrollbars then set {@link ignoreScrollbars} to
* true. Please consult the {@link ignoreScrollbars} for details. In general, with
* no scrollbars, the use of {@link allowAutoPanning} is recommended.
* @default true
*/
autoScroll: boolean = true;
/**
* Specifies if the size of the graph should be automatically extended if the
* mouse goes near the container edge while dragging. This is only taken into
* account if the container has scrollbars. See {@link autoScroll}.
* @default true
*/
autoExtend: boolean = true;
}
export default GraphDragDrop;

154
packages/core/src/view/cell/mxCellEditor.ts → packages/core/src/view/editing/CellEditor.ts
View File

@ -5,9 +5,9 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxUtils from '../../util/mxUtils'; import utils, {getAlignmentAsPoint, getValue } from '../../util/Utils';
import mxRectangle from '../../util/datatypes/mxRectangle'; import Rectangle from '../geometry/Rectangle';
import mxEvent from '../../util/event/mxEvent'; import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import { import {
ABSOLUTE_LINE_HEIGHT, ABSOLUTE_LINE_HEIGHT,
@ -24,26 +24,26 @@ import {
FONT_UNDERLINE, FONT_UNDERLINE,
LINE_HEIGHT, LINE_HEIGHT,
WORD_WRAP, WORD_WRAP,
} from '../../util/mxConstants'; } from '../../util/Constants';
import mxText from '../../shape/mxText'; import mxText from '../geometry/shape/mxText';
import mxGraph from '../graph/mxGraph'; import graph from '../Graph';
import mxCell from './mxCell'; import Cell from '../cell/datatypes/Cell';
import mxMouseEvent from '../../util/event/mxMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
import mxCellState from './mxCellState'; import CellState from '../cell/datatypes/CellState';
import mxShape from '../../shape/mxShape'; import Shape from '../geometry/shape/Shape';
import mxEventObject from '../../util/event/mxEventObject'; import EventObject from '../event/EventObject';
import { extractTextWithWhitespace, isNode } from '../../util/mxDomUtils'; import { extractTextWithWhitespace, isNode } from '../../util/DomUtils';
import { import {
htmlEntities, htmlEntities,
replaceTrailingNewlines, replaceTrailingNewlines,
} from '../../util/mxStringUtils'; } from '../../util/StringUtils';
import { import {
getSource, getSource,
isConsumed, isConsumed,
isControlDown, isControlDown,
isMetaDown, isMetaDown,
isShiftDown, isShiftDown,
} from '../../util/mxEventUtils'; } from '../../util/EventUtils';
/** /**
* Class: mxCellEditor * Class: mxCellEditor
@ -151,8 +151,8 @@ import {
* *
* graph - Reference to the enclosing <mxGraph>. * graph - Reference to the enclosing <mxGraph>.
*/ */
class mxCellEditor { class CellEditor {
constructor(graph: mxGraph) { constructor(graph: graph) {
this.graph = graph; this.graph = graph;
// Stops editing after zoom changes // Stops editing after zoom changes
@ -172,9 +172,9 @@ class mxCellEditor {
} }
}; };
this.graph.view.addListener(mxEvent.SCALE, this.zoomHandler); this.graph.view.addListener(InternalEvent.SCALE, this.zoomHandler);
this.graph.view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.zoomHandler); this.graph.view.addListener(InternalEvent.SCALE_AND_TRANSLATE, this.zoomHandler);
this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler); this.graph.getModel().addListener(InternalEvent.CHANGE, this.changeHandler);
} }
// TODO: Document me! // TODO: Document me!
@ -184,7 +184,7 @@ class mxCellEditor {
clearOnChange: boolean = false; clearOnChange: boolean = false;
bounds: mxRectangle | null = null; bounds: Rectangle | null = null;
resizeThread: number | null = null; resizeThread: number | null = null;
@ -196,7 +196,7 @@ class mxCellEditor {
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
*/ */
// graph: mxGraph; // graph: mxGraph;
graph: mxGraph; graph: graph;
/** /**
* Variable: textarea * Variable: textarea
@ -213,7 +213,7 @@ class mxCellEditor {
* Reference to the <mxCell> that is currently being edited. * Reference to the <mxCell> that is currently being edited.
*/ */
// editingCell: mxCell; // editingCell: mxCell;
editingCell: mxCell | null = null; editingCell: Cell | null = null;
/** /**
* Variable: trigger * Variable: trigger
@ -221,7 +221,7 @@ class mxCellEditor {
* Reference to the event that was used to start editing. * Reference to the event that was used to start editing.
*/ */
// trigger: MouseEvent; // trigger: MouseEvent;
trigger: mxMouseEvent | MouseEvent | null = null; trigger: InternalMouseEvent | MouseEvent | null = null;
/** /**
* Variable: modified * Variable: modified
@ -293,7 +293,7 @@ class mxCellEditor {
* Defines the minimum width and height to be used in <resize>. Default is 0x20px. * Defines the minimum width and height to be used in <resize>. Default is 0x20px.
*/ */
// minResize: mxRectangle; // minResize: mxRectangle;
minResize: mxRectangle = new mxRectangle(0, 20); minResize: Rectangle = new Rectangle(0, 20);
/** /**
* Variable: wordWrapPadding * Variable: wordWrapPadding
@ -356,8 +356,8 @@ class mxCellEditor {
* Called in <stopEditing> if cancel is false to invoke <mxGraph.labelChanged>. * Called in <stopEditing> if cancel is false to invoke <mxGraph.labelChanged>.
*/ */
// applyValue(state: mxCellState, value: string): void; // applyValue(state: mxCellState, value: string): void;
applyValue(state: mxCellState, value: any): void { applyValue(state: CellState, value: any): void {
this.graph.labelChanged(state.cell, value, <mxMouseEvent>this.trigger); this.graph.labelChanged(state.cell, value, <InternalMouseEvent>this.trigger);
} }
/** /**
@ -380,7 +380,7 @@ class mxCellEditor {
* Gets the initial editing value for the given cell. * Gets the initial editing value for the given cell.
*/ */
// getInitialValue(state: mxCellState, trigger: Event): string; // getInitialValue(state: mxCellState, trigger: Event): string;
getInitialValue(state: mxCellState, trigger: mxEventObject | mxMouseEvent) { getInitialValue(state: CellState, trigger: EventObject | InternalMouseEvent) {
let result = htmlEntities( let result = htmlEntities(
<string>this.graph.getEditingValue(state.cell, trigger), <string>this.graph.getEditingValue(state.cell, trigger),
false false
@ -395,7 +395,7 @@ class mxCellEditor {
* Returns the current editing value. * Returns the current editing value.
*/ */
// getCurrentValue(state: mxCellState): string; // getCurrentValue(state: mxCellState): string;
getCurrentValue(state: mxCellState) { getCurrentValue(state: CellState) {
// @ts-ignore // @ts-ignore
return extractTextWithWhitespace(this.textarea.childNodes); return extractTextWithWhitespace(this.textarea.childNodes);
} }
@ -425,27 +425,27 @@ class mxCellEditor {
installListeners(elt: HTMLElement) { installListeners(elt: HTMLElement) {
// Applies value if text is dragged // Applies value if text is dragged
// LATER: Gesture mouse events ignored for starting move // LATER: Gesture mouse events ignored for starting move
mxEvent.addListener(elt, 'dragstart', (evt: Event) => { InternalEvent.addListener(elt, 'dragstart', (evt: Event) => {
this.graph.stopEditing(false); this.graph.stopEditing(false);
mxEvent.consume(evt); InternalEvent.consume(evt);
}); });
// Applies value if focus is lost // Applies value if focus is lost
mxEvent.addListener(elt, 'blur', (evt: Event) => { InternalEvent.addListener(elt, 'blur', (evt: Event) => {
if (this.blurEnabled) { if (this.blurEnabled) {
this.focusLost(); this.focusLost();
} }
}); });
// Updates modified state and handles placeholder text // Updates modified state and handles placeholder text
mxEvent.addListener(elt, 'keydown', (evt: KeyboardEvent) => { InternalEvent.addListener(elt, 'keydown', (evt: KeyboardEvent) => {
if (!isConsumed(evt)) { if (!isConsumed(evt)) {
if (this.isStopEditingEvent(evt)) { if (this.isStopEditingEvent(evt)) {
this.graph.stopEditing(false); this.graph.stopEditing(false);
mxEvent.consume(evt); InternalEvent.consume(evt);
} else if (evt.keyCode === 27 /* Escape */) { } else if (evt.keyCode === 27 /* Escape */) {
this.graph.stopEditing(this.isCancelEditingKeyEvent(evt)); this.graph.stopEditing(this.isCancelEditingKeyEvent(evt));
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
} }
}); });
@ -468,8 +468,8 @@ class mxCellEditor {
} }
}; };
mxEvent.addListener(elt, 'keypress', keypressHandler); InternalEvent.addListener(elt, 'keypress', keypressHandler);
mxEvent.addListener(elt, 'paste', keypressHandler); InternalEvent.addListener(elt, 'paste', keypressHandler);
// Handler for updating the empty label text value after a change // Handler for updating the empty label text value after a change
const keyupHandler = (evt: KeyboardEvent) => { const keyupHandler = (evt: KeyboardEvent) => {
@ -489,9 +489,9 @@ class mxCellEditor {
} }
}; };
mxEvent.addListener(elt, 'input', keyupHandler); InternalEvent.addListener(elt, 'input', keyupHandler);
mxEvent.addListener(elt, 'cut', keyupHandler); InternalEvent.addListener(elt, 'cut', keyupHandler);
mxEvent.addListener(elt, 'paste', keyupHandler); InternalEvent.addListener(elt, 'paste', keyupHandler);
// Adds automatic resizing of the textbox while typing using input, keyup and/or DOM change events // Adds automatic resizing of the textbox while typing using input, keyup and/or DOM change events
const evtName = 'input'; const evtName = 'input';
@ -511,10 +511,10 @@ class mxCellEditor {
} }
}; };
mxEvent.addListener(elt, evtName, resizeHandler); InternalEvent.addListener(elt, evtName, resizeHandler);
mxEvent.addListener(window, 'resize', resizeHandler); InternalEvent.addListener(window, 'resize', resizeHandler);
mxEvent.addListener(elt, 'cut', resizeHandler); InternalEvent.addListener(elt, 'cut', resizeHandler);
mxEvent.addListener(elt, 'paste', resizeHandler); InternalEvent.addListener(elt, 'paste', resizeHandler);
} }
/** /**
@ -540,7 +540,6 @@ class mxCellEditor {
* *
* Returns true if this editor is the source for the given native event. * Returns true if this editor is the source for the given native event.
*/ */
// isEventSource(evt: Event): boolean;
isEventSource(evt: Event): boolean { isEventSource(evt: Event): boolean {
return getSource(evt) === this.textarea; return getSource(evt) === this.textarea;
} }
@ -550,7 +549,6 @@ class mxCellEditor {
* *
* Returns <modified>. * Returns <modified>.
*/ */
// resize(): void;
resize(): void { resize(): void {
const state = this.graph.getView().getState(this.editingCell); const state = this.graph.getView().getState(this.editingCell);
@ -563,7 +561,7 @@ class mxCellEditor {
if (!this.autoSize || state.style.overflow === 'fill') { if (!this.autoSize || state.style.overflow === 'fill') {
// Specifies the bounds of the editor box // Specifies the bounds of the editor box
this.bounds = <mxRectangle>this.getEditorBounds(state); this.bounds = <Rectangle>this.getEditorBounds(state);
this.textarea.style.width = `${Math.round( this.textarea.style.width = `${Math.round(
this.bounds.width / scale this.bounds.width / scale
)}px`; )}px`;
@ -603,19 +601,19 @@ class mxCellEditor {
} }
} }
} else { } else {
const lw = mxUtils.getValue(state.style, 'labelWidth', null); const lw = getValue(state.style, 'labelWidth', null);
m = state.text != null && this.align == null ? state.text.margin : null; m = state.text != null && this.align == null ? state.text.margin : null;
if (m == null) { if (m == null) {
m = mxUtils.getAlignmentAsPoint( m = getAlignmentAsPoint(
this.align || this.align ||
mxUtils.getValue(state.style, 'align', ALIGN_CENTER), getValue(state.style, 'align', ALIGN_CENTER),
mxUtils.getValue(state.style, 'verticalAlign', ALIGN_MIDDLE) getValue(state.style, 'verticalAlign', ALIGN_MIDDLE)
); );
} }
if (isEdge) { if (isEdge) {
this.bounds = new mxRectangle( this.bounds = new Rectangle(
state.absoluteOffset.x, state.absoluteOffset.x,
state.absoluteOffset.y, state.absoluteOffset.y,
0, 0,
@ -628,13 +626,13 @@ class mxCellEditor {
this.bounds.x += m.x * tmp; this.bounds.x += m.x * tmp;
} }
} else { } else {
let bounds = mxRectangle.fromRectangle(state); let bounds = Rectangle.fromRectangle(state);
let hpos = mxUtils.getValue( let hpos = utils.getValue(
state.style, state.style,
'labelPosition', 'labelPosition',
ALIGN_CENTER ALIGN_CENTER
); );
let vpos = mxUtils.getValue( let vpos = utils.getValue(
state.style, state.style,
'verticalLabelPosition', 'verticalLabelPosition',
ALIGN_MIDDLE ALIGN_MIDDLE
@ -684,7 +682,7 @@ class mxCellEditor {
? state.style.verticalLabelPosition ? state.style.verticalLabelPosition
: 'middle'; : 'middle';
bounds = new mxRectangle( bounds = new Rectangle(
bounds.x + spacingLeft, bounds.x + spacingLeft,
bounds.y + spacingTop, bounds.y + spacingTop,
bounds.width - bounds.width -
@ -696,7 +694,7 @@ class mxCellEditor {
); );
} }
this.bounds = new mxRectangle( this.bounds = new Rectangle(
bounds.x + state.absoluteOffset.x, bounds.x + state.absoluteOffset.x,
bounds.y + state.absoluteOffset.y, bounds.y + state.absoluteOffset.y,
bounds.width, bounds.width,
@ -759,12 +757,12 @@ class mxCellEditor {
)}px`; )}px`;
} }
mxUtils.setPrefixedStyle( utils.setPrefixedStyle(
this.textarea.style, this.textarea.style,
'transformOrigin', 'transformOrigin',
'0px 0px' '0px 0px'
); );
mxUtils.setPrefixedStyle( utils.setPrefixedStyle(
this.textarea.style, this.textarea.style,
'transform', 'transform',
`scale(${scale},${scale})${ `scale(${scale},${scale})${
@ -791,7 +789,7 @@ class mxCellEditor {
* always returns null. * always returns null.
*/ */
// getBackgroundColor(state: mxCellState): string; // getBackgroundColor(state: mxCellState): string;
getBackgroundColor(state: mxCellState): string | null { getBackgroundColor(state: CellState): string | null {
return null; return null;
} }
@ -807,8 +805,8 @@ class mxCellEditor {
*/ */
// startEditing(cell: mxCell, trigger?: MouseEvent): void; // startEditing(cell: mxCell, trigger?: MouseEvent): void;
startEditing( startEditing(
cell: mxCell, cell: Cell,
trigger: mxMouseEvent | MouseEvent | null = null trigger: InternalMouseEvent | MouseEvent | null = null
): void { ): void {
this.stopEditing(true); this.stopEditing(true);
this.align = null; this.align = null;
@ -833,8 +831,8 @@ class mxCellEditor {
state.style.fontFamily != null state.style.fontFamily != null
? state.style.fontFamily ? state.style.fontFamily
: DEFAULT_FONTFAMILY; : DEFAULT_FONTFAMILY;
const color = mxUtils.getValue(state.style, 'fontColor', 'black'); const color = utils.getValue(state.style, 'fontColor', 'black');
const align = mxUtils.getValue(state.style, 'align', ALIGN_LEFT); const align = utils.getValue(state.style, 'align', ALIGN_LEFT);
const bold = (state.style.fontStyle || 0) & FONT_BOLD; const bold = (state.style.fontStyle || 0) & FONT_BOLD;
const italic = (state.style.fontStyle || 0) & FONT_ITALIC; const italic = (state.style.fontStyle || 0) & FONT_ITALIC;
@ -885,7 +883,7 @@ class mxCellEditor {
// Sets the initial editing value // Sets the initial editing value
textarea.innerHTML = textarea.innerHTML =
this.getInitialValue(state, <mxMouseEvent>trigger) || ''; this.getInitialValue(state, <InternalMouseEvent>trigger) || '';
this.initialValue = textarea.innerHTML; this.initialValue = textarea.innerHTML;
// Uses an optional text value for empty labels which is cleared // Uses an optional text value for empty labels which is cleared
@ -1028,7 +1026,7 @@ class mxCellEditor {
} }
// Forces new instance on next edit for undo history reset // Forces new instance on next edit for undo history reset
mxEvent.release(this.textarea); InternalEvent.release(this.textarea);
this.textarea = null; this.textarea = null;
this.align = null; this.align = null;
} }
@ -1055,7 +1053,7 @@ class mxCellEditor {
* edited. * edited.
*/ */
// isHideLabel(state: mxCellState): boolean; // isHideLabel(state: mxCellState): boolean;
isHideLabel(state: mxCellState | null = null): boolean { isHideLabel(state: CellState | null = null): boolean {
return true; return true;
} }
@ -1065,11 +1063,11 @@ class mxCellEditor {
* Returns the minimum width and height for editing the given state. * Returns the minimum width and height for editing the given state.
*/ */
// getMinimumSize(state: mxCellState): mxRectangle; // getMinimumSize(state: mxCellState): mxRectangle;
getMinimumSize(state: mxCellState): mxRectangle { getMinimumSize(state: CellState): Rectangle {
const { scale } = this.graph.getView(); const { scale } = this.graph.getView();
const textarea = <HTMLElement>this.textarea; const textarea = <HTMLElement>this.textarea;
return new mxRectangle( return new Rectangle(
0, 0,
0, 0,
state.text == null ? 30 : state.text.size * scale + 20, state.text == null ? 30 : state.text.size * scale + 20,
@ -1083,7 +1081,7 @@ class mxCellEditor {
* Returns the <mxRectangle> that defines the bounds of the editor. * Returns the <mxRectangle> that defines the bounds of the editor.
*/ */
// getEditorBounds(state: mxCellState): mxRectangle; // getEditorBounds(state: mxCellState): mxRectangle;
getEditorBounds(state: mxCellState): mxRectangle | null { getEditorBounds(state: CellState): Rectangle | null {
const isEdge = state.cell.isEdge(); const isEdge = state.cell.isEdge();
const { scale } = this.graph.getView(); const { scale } = this.graph.getView();
const minSize = this.getMinimumSize(state); const minSize = this.getMinimumSize(state);
@ -1096,8 +1094,8 @@ class mxCellEditor {
state.view.graph.cellRenderer.legacySpacing && state.view.graph.cellRenderer.legacySpacing &&
state.style.overflow === 'fill' state.style.overflow === 'fill'
) { ) {
result = (<mxShape>state.shape).getLabelBounds( result = (<Shape>state.shape).getLabelBounds(
mxRectangle.fromRectangle(state) Rectangle.fromRectangle(state)
); );
} else { } else {
// @ts-ignore // @ts-ignore
@ -1119,7 +1117,7 @@ class mxCellEditor {
scale + scale +
spacing; spacing;
result = new mxRectangle( result = new Rectangle(
state.x, state.x,
state.y, state.y,
Math.max(minWidth, state.width - spacingLeft - spacingRight), Math.max(minWidth, state.width - spacingLeft - spacingRight),
@ -1178,7 +1176,7 @@ class mxCellEditor {
// Applies the horizontal and vertical label positions // Applies the horizontal and vertical label positions
if (state.cell.isVertex()) { if (state.cell.isVertex()) {
const horizontal: string = <string>( const horizontal: string = <string>(
mxUtils.getStringValue( utils.getStringValue(
state.style, state.style,
'labelPosition', 'labelPosition',
ALIGN_CENTER ALIGN_CENTER
@ -1204,7 +1202,7 @@ class mxCellEditor {
} }
} }
return new mxRectangle( return new Rectangle(
Math.round(result.x), Math.round(result.x),
Math.round(result.y), Math.round(result.y),
Math.round(result.width), Math.round(result.width),
@ -1225,7 +1223,7 @@ class mxCellEditor {
* returned. * returned.
*/ */
// getEmptyLabelText(cell: mxCell): string; // getEmptyLabelText(cell: mxCell): string;
getEmptyLabelText(cell: mxCell | null = null): string { getEmptyLabelText(cell: Cell | null = null): string {
return this.emptyLabelText || ''; return this.emptyLabelText || '';
} }
@ -1236,7 +1234,7 @@ class mxCellEditor {
* being edited. * being edited.
*/ */
// getEditingCell(): mxCell; // getEditingCell(): mxCell;
getEditingCell(): mxCell | null { getEditingCell(): Cell | null {
return this.editingCell; return this.editingCell;
} }
@ -1248,7 +1246,7 @@ class mxCellEditor {
// destroy(): void; // destroy(): void;
destroy(): void { destroy(): void {
if (this.textarea != null) { if (this.textarea != null) {
mxEvent.release(this.textarea); InternalEvent.release(this.textarea);
if (this.textarea.parentNode != null) { if (this.textarea.parentNode != null) {
this.textarea.parentNode.removeChild(this.textarea); this.textarea.parentNode.removeChild(this.textarea);
} }
@ -1267,4 +1265,4 @@ class mxCellEditor {
} }
} }
export default mxCellEditor; export default CellEditor;

163
packages/core/src/view/editing/InPlaceEditing.ts Normal file
View File

@ -0,0 +1,163 @@
import Cell from "../cell/datatypes/Cell";
import {isMultiTouchEvent} from "../../util/EventUtils";
import EventObject from "../event/EventObject";
import InternalEvent from "../event/InternalEvent";
import CellEditor from "./CellEditor";
import InternalMouseEvent from "../event/InternalMouseEvent";
import Graph from "../Graph";
class InPlaceEditing {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/*****************************************************************************
* Group: Cell in-place editing
*****************************************************************************/
/**
* Calls {@link startEditingAtCell} using the given cell or the first selection
* cell.
*
* @param evt Optional mouse event that triggered the editing.
*/
startEditing(evt: MouseEvent): void {
this.startEditingAtCell(null, evt);
}
/**
* Fires a {@link startEditing} event and invokes {@link CellEditor.startEditing}
* on {@link editor}. After editing was started, a {@link editingStarted} event is
* fired.
*
* @param cell {@link mxCell} to start the in-place editor for.
* @param evt Optional mouse event that triggered the editing.
*/
startEditingAtCell(cell: Cell | null = null, evt: MouseEvent): void {
if (evt == null || !isMultiTouchEvent(evt)) {
if (cell == null) {
cell = this.getSelectionCell();
if (cell != null && !this.isCellEditable(cell)) {
cell = null;
}
}
if (cell != null) {
this.fireEvent(
new EventObject(InternalEvent.START_EDITING, 'cell', cell, 'event', evt)
);
(<CellEditor>this.cellEditor).startEditing(cell, evt);
this.fireEvent(
new EventObject(InternalEvent.EDITING_STARTED, 'cell', cell, 'event', evt)
);
}
}
}
/**
* Returns the initial value for in-place editing. This implementation
* returns {@link convertValueToString} for the given cell. If this function is
* overridden, then {@link Model.valueForCellChanged} should take care
* of correctly storing the actual new value inside the user object.
*
* @param cell {@link mxCell} for which the initial editing value should be returned.
* @param evt Optional mouse event that triggered the editor.
*/
getEditingValue(
cell: Cell,
evt: EventObject | InternalMouseEvent
): string | null {
return this.convertValueToString(cell);
}
/**
* Stops the current editing and fires a {@link editingStopped} event.
*
* @param cancel Boolean that specifies if the current editing value
* should be stored.
*/
stopEditing(cancel: boolean = false): void {
(<CellEditor>this.cellEditor).stopEditing(cancel);
this.fireEvent(
new EventObject(InternalEvent.EDITING_STOPPED, 'cancel', cancel)
);
}
/**
* Sets the label of the specified cell to the given value using
* {@link cellLabelChanged} and fires {@link InternalEvent.LABEL_CHANGED} while the
* transaction is in progress. Returns the cell whose label was changed.
*
* @param cell {@link mxCell} whose label should be changed.
* @param value New label to be assigned.
* @param evt Optional event that triggered the change.
*/
// labelChanged(cell: mxCell, value: any, evt?: MouseEvent): mxCell;
labelChanged(
cell: Cell,
value: any,
evt: InternalMouseEvent | EventObject
): Cell {
this.getModel().beginUpdate();
try {
const old = cell.value;
this.cellLabelChanged(cell, value, this.isAutoSizeCell(cell));
this.fireEvent(
new EventObject(
InternalEvent.LABEL_CHANGED,
'cell',
cell,
'value',
value,
'old',
old,
'event',
evt
)
);
} finally {
this.getModel().endUpdate();
}
return cell;
}
/**
* Sets the new label for a cell. If autoSize is true then
* {@link cellSizeUpdated} will be called.
*
* In the following example, the function is extended to map changes to
* attributes in an XML node, as shown in {@link convertValueToString}.
* Alternatively, the handling of this can be implemented as shown in
* {@link Model.valueForCellChanged} without the need to clone the
* user object.
*
* ```javascript
* var graphCellLabelChanged = graph.cellLabelChanged;
* graph.cellLabelChanged = function(cell, newValue, autoSize)
* {
* // Cloned for correct undo/redo
* var elt = cell.value.cloneNode(true);
* elt.setAttribute('label', newValue);
*
* newValue = elt;
* graphCellLabelChanged.apply(this, arguments);
* };
* ```
*
* @param cell {@link mxCell} whose label should be changed.
* @param value New label to be assigned.
* @param autoSize Boolean that specifies if {@link cellSizeUpdated} should be called.
*/
cellLabelChanged(cell: Cell, value: any, autoSize: boolean = false): void {
this.batchUpdate(() => {
this.getModel().setValue(cell, value);
if (autoSize) {
this.cellSizeUpdated(cell, false);
}
});
}
}
export default InPlaceEditing;

4
packages/core/src/util/event/mxEventObject.ts → packages/core/src/view/event/EventObject.ts
View File

@ -28,7 +28,7 @@
* new mxEventObject("eventName", key1, val1, .., keyN, valN) * new mxEventObject("eventName", key1, val1, .., keyN, valN)
* (end) * (end)
*/ */
class mxEventObject { class EventObject {
constructor(name: string, ...args: any[]) { constructor(name: string, ...args: any[]) {
this.name = name; this.name = name;
this.properties = []; this.properties = [];
@ -115,4 +115,4 @@ class mxEventObject {
} }
} }
export default mxEventObject; export default EventObject;

10
packages/core/src/util/event/mxEventSource.js → packages/core/src/view/event/EventSource.js
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEventObject from './mxEventObject'; import EventObject from './EventObject';
/** /**
* Class: mxEventSource * Class: mxEventSource
@ -22,14 +22,14 @@ import mxEventObject from './mxEventObject';
* *
* Known Subclasses: * Known Subclasses:
* *
* <mxGraphModel>, <mxGraph>, <mxGraphView>, <mxEditor>, <mxCellOverlay>, * <Transactions>, <mxGraph>, <mxGraphView>, <mxEditor>, <mxCellOverlay>,
* <mxToolbar>, <mxWindow> * <mxToolbar>, <mxWindow>
* *
* Constructor: mxEventSource * Constructor: mxEventSource
* *
* Constructs a new event source. * Constructs a new event source.
*/ */
class mxEventSource { class EventSource {
constructor(eventSource) { constructor(eventSource) {
this.setEventSource(eventSource); this.setEventSource(eventSource);
} }
@ -161,7 +161,7 @@ class mxEventSource {
fireEvent(evt, sender) { fireEvent(evt, sender) {
if (this.eventListeners != null && this.isEventsEnabled()) { if (this.eventListeners != null && this.isEventsEnabled()) {
if (evt == null) { if (evt == null) {
evt = new mxEventObject(); evt = new EventObject();
} }
if (sender == null) { if (sender == null) {
@ -185,4 +185,4 @@ class mxEventSource {
} }
} }
export default mxEventSource; export default EventSource;

1096
packages/core/src/view/event/GraphEvents.ts Normal file
View File

File diff suppressed because it is too large Load Diff

88
packages/core/src/util/event/mxEvent.ts → packages/core/src/view/event/InternalEvent.ts
View File

@ -4,11 +4,11 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxMouseEvent from './mxMouseEvent'; import InternalMouseEvent from './InternalMouseEvent';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import { isConsumed, isMouseEvent } from '../mxEventUtils'; import { isConsumed, isMouseEvent } from '../../util/EventUtils';
import mxGraph from '../../view/graph/mxGraph'; import graph from '../Graph';
import mxCellState from '../../view/cell/mxCellState'; import CellState from '../cell/datatypes/CellState';
type Listener = { type Listener = {
name: string; name: string;
@ -49,10 +49,10 @@ try {
} }
/** /**
* @class mxEvent * @class InternalEvent
* *
* Cross-browser DOM event support. For internal event handling, * Cross-browser DOM event support. For internal event handling,
* {@link mxEventSource} and the graph event dispatch loop in {@link mxGraph} are used. * {@link mxEventSource} and the graph event dispatch loop in {@link graph} are used.
* *
* ### Memory Leaks: * ### Memory Leaks:
* *
@ -62,7 +62,7 @@ try {
* the last reference is removed in the JavaScript code, typically when the * the last reference is removed in the JavaScript code, typically when the
* referenced DOM node is removed from the DOM. * referenced DOM node is removed from the DOM.
*/ */
class mxEvent { class InternalEvent {
/** /**
* Binds the function to the specified event on the given element. Use * Binds the function to the specified event on the given element. Use
* {@link mxUtils.bind} in order to bind the "this" keyword inside the function * {@link mxUtils.bind} in order to bind the "this" keyword inside the function
@ -123,7 +123,7 @@ class mxEvent {
if (list) { if (list) {
while (list.length > 0) { while (list.length > 0) {
const entry = list[0]; const entry = list[0];
mxEvent.removeListener(element, entry.name, entry.f); InternalEvent.removeListener(element, entry.name, entry.f);
} }
} }
} }
@ -144,7 +144,7 @@ class mxEvent {
endListener: EventListener | null endListener: EventListener | null
) { ) {
if (startListener) { if (startListener) {
mxEvent.addListener( InternalEvent.addListener(
node, node,
mxClient.IS_POINTER ? 'pointerdown' : 'mousedown', mxClient.IS_POINTER ? 'pointerdown' : 'mousedown',
startListener startListener
@ -152,7 +152,7 @@ class mxEvent {
} }
if (moveListener) { if (moveListener) {
mxEvent.addListener( InternalEvent.addListener(
node, node,
mxClient.IS_POINTER ? 'pointermove' : 'mousemove', mxClient.IS_POINTER ? 'pointermove' : 'mousemove',
moveListener moveListener
@ -160,7 +160,7 @@ class mxEvent {
} }
if (endListener) { if (endListener) {
mxEvent.addListener( InternalEvent.addListener(
node, node,
mxClient.IS_POINTER ? 'pointerup' : 'mouseup', mxClient.IS_POINTER ? 'pointerup' : 'mouseup',
endListener endListener
@ -169,15 +169,15 @@ class mxEvent {
if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) { if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) {
if (startListener) { if (startListener) {
mxEvent.addListener(node, 'touchstart', startListener); InternalEvent.addListener(node, 'touchstart', startListener);
} }
if (moveListener) { if (moveListener) {
mxEvent.addListener(node, 'touchmove', moveListener); InternalEvent.addListener(node, 'touchmove', moveListener);
} }
if (endListener) { if (endListener) {
mxEvent.addListener(node, 'touchend', endListener); InternalEvent.addListener(node, 'touchend', endListener);
} }
} }
} }
@ -195,7 +195,7 @@ class mxEvent {
endListener: EventListener | null endListener: EventListener | null
) { ) {
if (startListener) { if (startListener) {
mxEvent.removeListener( InternalEvent.removeListener(
node, node,
mxClient.IS_POINTER ? 'pointerdown' : 'mousedown', mxClient.IS_POINTER ? 'pointerdown' : 'mousedown',
startListener startListener
@ -203,7 +203,7 @@ class mxEvent {
} }
if (moveListener) { if (moveListener) {
mxEvent.removeListener( InternalEvent.removeListener(
node, node,
mxClient.IS_POINTER ? 'pointermove' : 'mousemove', mxClient.IS_POINTER ? 'pointermove' : 'mousemove',
moveListener moveListener
@ -211,7 +211,7 @@ class mxEvent {
} }
if (endListener) { if (endListener) {
mxEvent.removeListener( InternalEvent.removeListener(
node, node,
mxClient.IS_POINTER ? 'pointerup' : 'mouseup', mxClient.IS_POINTER ? 'pointerup' : 'mouseup',
endListener endListener
@ -220,15 +220,15 @@ class mxEvent {
if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) { if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) {
if (startListener) { if (startListener) {
mxEvent.removeListener(node, 'touchstart', startListener); InternalEvent.removeListener(node, 'touchstart', startListener);
} }
if (moveListener) { if (moveListener) {
mxEvent.removeListener(node, 'touchmove', moveListener); InternalEvent.removeListener(node, 'touchmove', moveListener);
} }
if (endListener) { if (endListener) {
mxEvent.removeListener(node, 'touchend', endListener); InternalEvent.removeListener(node, 'touchend', endListener);
} }
} }
} }
@ -245,8 +245,8 @@ class mxEvent {
*/ */
static redirectMouseEvents( static redirectMouseEvents(
node: Listenable, node: Listenable,
graph: mxGraph, graph: graph,
state: mxCellState | ((evt: Event) => mxCellState) | null = null, state: CellState | ((evt: Event) => CellState) | null = null,
down: EventListener | null = null, down: EventListener | null = null,
move: EventListener | null = null, move: EventListener | null = null,
up: EventListener | null = null, up: EventListener | null = null,
@ -256,15 +256,15 @@ class mxEvent {
return typeof state === 'function' ? state(evt) : state; return typeof state === 'function' ? state(evt) : state;
}; };
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
node, node,
(evt) => { (evt) => {
if (down) { if (down) {
down(evt); down(evt);
} else if (!isConsumed(evt)) { } else if (!isConsumed(evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_DOWN, InternalEvent.MOUSE_DOWN,
new mxMouseEvent(evt, getState(evt)) new InternalMouseEvent(evt, getState(evt))
); );
} }
}, },
@ -273,8 +273,8 @@ class mxEvent {
move(evt); move(evt);
} else if (!isConsumed(evt)) { } else if (!isConsumed(evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_MOVE, InternalEvent.MOUSE_MOVE,
new mxMouseEvent(evt, getState(evt)) new InternalMouseEvent(evt, getState(evt))
); );
} }
}, },
@ -283,14 +283,14 @@ class mxEvent {
up(evt); up(evt);
} else if (!isConsumed(evt)) { } else if (!isConsumed(evt)) {
graph.fireMouseEvent( graph.fireMouseEvent(
mxEvent.MOUSE_UP, InternalEvent.MOUSE_UP,
new mxMouseEvent(evt, getState(evt)) new InternalMouseEvent(evt, getState(evt))
); );
} }
} }
); );
mxEvent.addListener(node, 'dblclick', (evt) => { InternalEvent.addListener(node, 'dblclick', (evt) => {
if (dblClick) { if (dblClick) {
dblClick(evt); dblClick(evt);
} else if (!isConsumed(evt)) { } else if (!isConsumed(evt)) {
@ -308,13 +308,13 @@ class mxEvent {
static release(element: Listenable | null) { static release(element: Listenable | null) {
try { try {
if (element) { if (element) {
mxEvent.removeAllListeners(element); InternalEvent.removeAllListeners(element);
if ('childNodes' in element) { if ('childNodes' in element) {
const children = element.childNodes; const children = element.childNodes;
const childCount = children.length; const childCount = children.length;
for (let i = 0; i < childCount; i += 1) { for (let i = 0; i < childCount; i += 1) {
mxEvent.release(children[i]); InternalEvent.release(children[i]);
} }
} }
} }
@ -375,13 +375,13 @@ class mxEvent {
if (mxClient.IS_SF && !mxClient.IS_TOUCH) { if (mxClient.IS_SF && !mxClient.IS_TOUCH) {
let scale = 1; let scale = 1;
mxEvent.addListener(target, 'gesturestart', (evt) => { InternalEvent.addListener(target, 'gesturestart', (evt) => {
mxEvent.consume(evt); InternalEvent.consume(evt);
scale = 1; scale = 1;
}); });
mxEvent.addListener(target, 'gesturechange', ((evt: GestureEvent) => { InternalEvent.addListener(target, 'gesturechange', ((evt: GestureEvent) => {
mxEvent.consume(evt); InternalEvent.consume(evt);
if (typeof evt.scale === 'number') { if (typeof evt.scale === 'number') {
const diff = scale - evt.scale; const diff = scale - evt.scale;
@ -393,8 +393,8 @@ class mxEvent {
} }
}) as EventListener); }) as EventListener);
mxEvent.addListener(target, 'gestureend', (evt) => { InternalEvent.addListener(target, 'gestureend', (evt) => {
mxEvent.consume(evt); InternalEvent.consume(evt);
}); });
} else { } else {
let evtCache: EventCache = []; let evtCache: EventCache = [];
@ -402,7 +402,7 @@ class mxEvent {
let dy0 = 0; let dy0 = 0;
// Adds basic listeners for graph event dispatching // Adds basic listeners for graph event dispatching
mxEvent.addGestureListeners( InternalEvent.addGestureListeners(
target, target,
((evt: GestureEvent) => { ((evt: GestureEvent) => {
if (!isMouseEvent(evt) && evt.pointerId != null) { if (!isMouseEvent(evt) && evt.pointerId != null) {
@ -426,8 +426,8 @@ class mxEvent {
const ty = Math.abs(dy - dy0); const ty = Math.abs(dy - dy0);
if ( if (
tx > mxEvent.PINCH_THRESHOLD || tx > InternalEvent.PINCH_THRESHOLD ||
ty > mxEvent.PINCH_THRESHOLD ty > InternalEvent.PINCH_THRESHOLD
) { ) {
const cx = const cx =
evtCache[0].clientX + evtCache[0].clientX +
@ -452,7 +452,7 @@ class mxEvent {
); );
} }
mxEvent.addListener(target, 'wheel', wheelHandler as EventListener); InternalEvent.addListener(target, 'wheel', wheelHandler as EventListener);
} }
} }
@ -460,7 +460,7 @@ class mxEvent {
* Disables the context menu for the given element. * Disables the context menu for the given element.
*/ */
static disableContextMenu(element: Listenable) { static disableContextMenu(element: Listenable) {
mxEvent.addListener(element, 'contextmenu', (evt) => { InternalEvent.addListener(element, 'contextmenu', (evt) => {
if (evt.preventDefault) { if (evt.preventDefault) {
evt.preventDefault(); evt.preventDefault();
} }
@ -1034,4 +1034,4 @@ class mxEvent {
static PINCH_THRESHOLD = 10; static PINCH_THRESHOLD = 10;
} }
export default mxEvent; export default InternalEvent;

8
packages/core/src/util/event/mxMouseEvent.js → packages/core/src/view/event/InternalMouseEvent.js
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import {getClientX, getClientY, getSource, isMouseEvent, isPopupTrigger} from '../mxEventUtils'; import {getClientX, getClientY, getSource, isMouseEvent, isPopupTrigger} from '../../util/EventUtils';
import { isAncestorNode } from '../mxDomUtils'; import { isAncestorNode } from '../../util/DomUtils';
/** /**
* Class: mxMouseEvent * Class: mxMouseEvent
@ -41,7 +41,7 @@ import { isAncestorNode } from '../mxDomUtils';
* state - Optional <mxCellState> under the mouse. * state - Optional <mxCellState> under the mouse.
* *
*/ */
class mxMouseEvent { class InternalMouseEvent {
constructor(evt, state) { constructor(evt, state) {
this.evt = evt; this.evt = evt;
this.state = state; this.state = state;
@ -248,4 +248,4 @@ class mxMouseEvent {
} }
} }
export default mxMouseEvent; export default InternalMouseEvent;

4
packages/core/src/handler/mxCellTracker.js → packages/core/src/view/event/mxCellTracker.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxCellMarker from './mxCellMarker'; import CellMarker from '../cell/CellMarker';
/** /**
* Event handler that highlights cells * Event handler that highlights cells
@ -61,7 +61,7 @@ import mxCellMarker from './mxCellMarker';
* }); * });
* ``` * ```
*/ */
class mxCellTracker extends mxCellMarker { class mxCellTracker extends CellMarker {
constructor(graph, color, funct) { constructor(graph, color, funct) {
super(graph, color); super(graph, color);

12
packages/core/src/handler/mxKeyHandler.js → packages/core/src/view/event/mxKeyHandler.js
View File

@ -5,9 +5,9 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxEvent from '../util/event/mxEvent'; import InternalEvent from './InternalEvent';
import { isAncestorNode } from '../util/mxDomUtils'; import { isAncestorNode } from '../../util/DomUtils';
import { getSource, isAltDown, isConsumed, isControlDown as _isControlDown, isShiftDown } from '../util/mxEventUtils'; import { getSource, isAltDown, isConsumed, isControlDown as _isControlDown, isShiftDown } from '../../util/EventUtils';
/** /**
* Class: mxKeyHandler * Class: mxKeyHandler
@ -87,7 +87,7 @@ class mxKeyHandler {
}; };
// Installs the keystroke listener in the target // Installs the keystroke listener in the target
mxEvent.addListener(this.target, 'keydown', this.keydownHandler); InternalEvent.addListener(this.target, 'keydown', this.keydownHandler);
} }
} }
@ -319,7 +319,7 @@ class mxKeyHandler {
if (boundFunction != null) { if (boundFunction != null) {
boundFunction(evt); boundFunction(evt);
mxEvent.consume(evt); InternalEvent.consume(evt);
} }
} }
} }
@ -388,7 +388,7 @@ class mxKeyHandler {
*/ */
destroy() { destroy() {
if (this.target != null && this.keydownHandler != null) { if (this.target != null && this.keydownHandler != null) {
mxEvent.removeListener(this.target, 'keydown', this.keydownHandler); InternalEvent.removeListener(this.target, 'keydown', this.keydownHandler);
this.keydownHandler = null; this.keydownHandler = null;
} }

18
packages/core/src/atomic_changes/mxCollapseChange.ts → packages/core/src/view/folding/CollapseChange.ts
View File

@ -1,7 +1,7 @@
import mxCell from '../view/cell/mxCell'; import Cell from '../cell/datatypes/Cell';
import mxGraphModel from '../view/graph/mxGraphModel'; import Model from '../model/Model';
import type { UndoableChange } from '../types'; import type { UndoableChange } from '../../types';
/** /**
* Class: mxCollapseChange * Class: mxCollapseChange
@ -13,13 +13,13 @@ import type { UndoableChange } from '../types';
* Constructs a change of a collapsed state in the * Constructs a change of a collapsed state in the
* specified model. * specified model.
*/ */
class mxCollapseChange implements UndoableChange { class CollapseChange implements UndoableChange {
model: mxGraphModel; model: Model;
cell: mxCell; cell: Cell;
collapsed: boolean; collapsed: boolean;
previous: boolean; previous: boolean;
constructor(model: mxGraphModel, cell: mxCell, collapsed: boolean) { constructor(model: Model, cell: Cell, collapsed: boolean) {
this.model = model; this.model = model;
this.cell = cell; this.cell = cell;
this.collapsed = collapsed; this.collapsed = collapsed;
@ -30,7 +30,7 @@ class mxCollapseChange implements UndoableChange {
* Function: execute * Function: execute
* *
* Changes the collapsed state of {@link cell}` to {@link previous}` using * Changes the collapsed state of {@link cell}` to {@link previous}` using
* <mxGraphModel.collapsedStateForCellChanged>. * <Transactions.collapsedStateForCellChanged>.
*/ */
execute() { execute() {
this.collapsed = this.previous; this.collapsed = this.previous;
@ -41,4 +41,4 @@ class mxCollapseChange implements UndoableChange {
} }
} }
export default mxCollapseChange; export default CollapseChange;

298
packages/core/src/view/folding/GraphFolding.ts Normal file
View File

@ -0,0 +1,298 @@
import Image from "../image/Image";
import mxClient from "../../mxClient";
import Graph from "../Graph";
import CellState from "../cell/datatypes/CellState";
import Cell from "../cell/datatypes/Cell";
import CellArray from "../cell/datatypes/CellArray";
import EventObject from "../event/EventObject";
import InternalEvent from "../event/InternalEvent";
import Geometry from "../geometry/Geometry";
import {getValue, toRadians} from "../../util/Utils";
import Rectangle from "../geometry/Rectangle";
/**
* GraphFoldingOptions
*
* @memberof GraphFolding
* @typedef {object} GraphFoldingOptions
* @property {boolean} foldingEnabled Specifies if folding (collapse and expand
* via an image icon in the graph should be enabled).
* @property {Image} collapsedImage Specifies the {@link Image} to indicate a collapsed state.
* Default value is mxClient.imageBasePath + '/collapsed.gif'
* @property {Image} expandedImage Specifies the {@link Image} to indicate a expanded state.
* Default value is mxClient.imageBasePath + '/expanded.gif'
* @property {collapseToPreferredSize} Specifies if the cell size should be changed to the preferred size when
* a cell is first collapsed.
*/
type GraphFoldingOptions = {
foldingEnabled: boolean,
collapsedImage: Image,
expandedImage: Image,
collapseToPreferredSize: boolean,
};
class GraphFolding {
constructor(graph: Graph,
options: GraphFoldingOptions = {
foldingEnabled: true,
collapsedImage: new Image(`${mxClient.imageBasePath}/collapsed.gif`, 9, 9),
expandedImage: new Image(`${mxClient.imageBasePath}/expanded.gif`, 9, 9),
collapseToPreferredSize: true,
}) {
this.graph = graph;
this.options = options;
}
graph: Graph;
options: GraphFoldingOptions;
/**
*
* @default true
*/
/**
* Returns the cells which are movable in the given array of cells.
*/
getFoldableCells(
cells: CellArray,
collapse: boolean = false
): CellArray | null {
return this.graph.model.filterCells(cells, (cell: Cell) => {
return this.isCellFoldable(cell, collapse);
});
}
/**
* Returns true if the given cell is foldable. This implementation
* returns true if the cell has at least one child and its style
* does not specify {@link mxConstants.STYLE_FOLDABLE} to be 0.
*
* @param cell {@link mxCell} whose foldable state should be returned.
*/
// isCellFoldable(cell: mxCell, collapse: boolean): boolean;
isCellFoldable(cell: Cell, collapse: boolean = false): boolean {
const style = this.getCurrentCellStyle(cell);
return cell.getChildCount() > 0 && style.foldable != 0;
}
/**
* Returns the {@link Image} used to display the collapsed state of
* the specified cell state. This returns null for all edges.
*/
getFoldingImage(state: CellState): Image | null {
if (state != null && this.options.foldingEnabled && !state.cell.isEdge()) {
const tmp = (<Cell>state.cell).isCollapsed();
if (this.isCellFoldable(state.cell, !tmp)) {
return tmp ? this.options.collapsedImage : this.options.expandedImage;
}
}
return null;
}
/*****************************************************************************
* Group: Folding
*****************************************************************************/
/**
* Sets the collapsed state of the specified cells and all descendants
* if recurse is true. The change is carried out using {@link cellsFolded}.
* This method fires {@link InternalEvent.FOLD_CELLS} while the transaction is in
* progress. Returns the cells whose collapsed state was changed.
*
* @param collapse Boolean indicating the collapsed state to be assigned.
* @param recurse Optional boolean indicating if the collapsed state of all
* descendants should be set. Default is `false`.
* @param cells Array of {@link Cell} whose collapsed state should be set. If
* null is specified then the foldable selection cells are used.
* @param checkFoldable Optional boolean indicating of isCellFoldable should be
* checked. Default is `false`.
* @param evt Optional native event that triggered the invocation.
*/
// foldCells(collapse: boolean, recurse: boolean, cells: mxCellArray, checkFoldable?: boolean, evt?: Event): mxCellArray;
foldCells(
collapse: boolean = false,
recurse: boolean = false,
cells: CellArray | null = null,
checkFoldable: boolean = false,
evt: EventObject | null = null
): CellArray | null {
if (cells == null) {
cells = this.getFoldableCells(this.getSelectionCells(), collapse);
}
this.stopEditing(false);
this.graph.model.beginUpdate();
try {
this.cellsFolded(cells, collapse, recurse, checkFoldable);
this.fireEvent(
new EventObject(
InternalEvent.FOLD_CELLS,
'collapse',
collapse,
'recurse',
recurse,
'cells',
cells
)
);
} finally {
this.graph.model.endUpdate();
}
return cells;
}
/**
* Sets the collapsed state of the specified cells. This method fires
* {@link InternalEvent.CELLS_FOLDED} while the transaction is in progress. Returns the
* cells whose collapsed state was changed.
*
* @param cells Array of {@link Cell} whose collapsed state should be set.
* @param collapse Boolean indicating the collapsed state to be assigned.
* @param recurse Boolean indicating if the collapsed state of all descendants
* should be set.
* @param checkFoldable Optional boolean indicating of isCellFoldable should be
* checked. Default is `false`.
*/
// cellsFolded(cells: mxCellArray, collapse: boolean, recurse: boolean, checkFoldable?: boolean): void;
cellsFolded(
cells: CellArray | null = null,
collapse: boolean = false,
recurse: boolean = false,
checkFoldable: boolean = false
): void {
if (cells != null && cells.length > 0) {
this.graph.model.beginUpdate();
try {
for (let i = 0; i < cells.length; i += 1) {
if (
(!checkFoldable || this.isCellFoldable(cells[i], collapse)) &&
collapse !== cells[i].isCollapsed()
) {
this.graph.model.setCollapsed(cells[i], collapse);
this.swapBounds(cells[i], collapse);
if (this.isExtendParent(cells[i])) {
this.extendParent(cells[i]);
}
if (recurse) {
const children = cells[i].getChildren();
this.cellsFolded(children, collapse, recurse);
}
this.constrainChild(cells[i]);
}
}
this.graph.fireEvent(
new EventObject(
InternalEvent.CELLS_FOLDED,
'cells',
cells,
'collapse',
collapse,
'recurse',
recurse
)
);
} finally {
this.graph.model.endUpdate();
}
}
}
/**
* Swaps the alternate and the actual bounds in the geometry of the given
* cell invoking {@link updateAlternateBounds} before carrying out the swap.
*
* @param cell {@link mxCell} for which the bounds should be swapped.
* @param willCollapse Boolean indicating if the cell is going to be collapsed.
*/
// swapBounds(cell: mxCell, willCollapse: boolean): void;
swapBounds(cell: Cell, willCollapse: boolean = false): void {
let geo = cell.getGeometry();
if (geo != null) {
geo = <Geometry>geo.clone();
this.updateAlternateBounds(cell, geo, willCollapse);
geo.swap();
this.graph.model.setGeometry(cell, geo);
}
}
/**
* Updates or sets the alternate bounds in the given geometry for the given
* cell depending on whether the cell is going to be collapsed. If no
* alternate bounds are defined in the geometry and
* {@link collapseToPreferredSize} is true, then the preferred size is used for
* the alternate bounds. The top, left corner is always kept at the same
* location.
*
* @param cell {@link mxCell} for which the geometry is being udpated.
* @param g {@link mxGeometry} for which the alternate bounds should be updated.
* @param willCollapse Boolean indicating if the cell is going to be collapsed.
*/
// updateAlternateBounds(cell: mxCell, geo: mxGeometry, willCollapse: boolean): void;
updateAlternateBounds(
cell: Cell | null = null,
geo: Geometry | null = null,
willCollapse: boolean = false
): void {
if (cell != null && geo != null) {
const style = this.getCurrentCellStyle(cell);
if (geo.alternateBounds == null) {
let bounds = geo;
if (this.options.collapseToPreferredSize) {
const tmp = this.getPreferredSizeForCell(cell);
if (tmp != null) {
bounds = <Geometry>tmp;
const startSize = getValue(style, 'startSize');
if (startSize > 0) {
bounds.height = Math.max(bounds.height, startSize);
}
}
}
geo.alternateBounds = new Rectangle(
0,
0,
bounds.width,
bounds.height
);
}
if (geo.alternateBounds != null) {
geo.alternateBounds.x = geo.x;
geo.alternateBounds.y = geo.y;
const alpha = toRadians(style.rotation || 0);
if (alpha !== 0) {
const dx = geo.alternateBounds.getCenterX() - geo.getCenterX();
const dy = geo.alternateBounds.getCenterY() - geo.getCenterY();
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const dx2 = cos * dx - sin * dy;
const dy2 = sin * dx + cos * dy;
geo.alternateBounds.x += dx2 - dx;
geo.alternateBounds.y += dy2 - dy;
}
}
}
}
}
export default GraphFolding;

56
packages/core/src/util/datatypes/mxGeometry.ts → packages/core/src/view/geometry/Geometry.ts
View File

@ -5,15 +5,15 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxPoint from './mxPoint'; import Point from './Point';
import mxRectangle from './mxRectangle'; import Rectangle from './Rectangle';
import mxUtils, { equalPoints, getRotatedPoint, toRadians } from '../mxUtils'; import utils, { equalPoints, getRotatedPoint, toRadians } from '../../util/Utils';
import { clone } from '../mxCloneUtils'; import { clone } from '../../util/CloneUtils';
/** /**
* @class mxGeometry * @class Geometry
* *
* @extends {mxRectangle} * @extends {Rectangle}
* *
* For vertices, the geometry consists of the x- and y-location, and the width * For vertices, the geometry consists of the x- and y-location, and the width
* and height. For edges, the geometry consists of the optional terminal- and * and height. For edges, the geometry consists of the optional terminal- and
@ -34,11 +34,11 @@ import { clone } from '../mxCloneUtils';
* ``` * ```
* *
* Control points are used regardless of the connected state of an edge and may * Control points are used regardless of the connected state of an edge and may
* be ignored or interpreted differently depending on the edge's {@link mxEdgeStyle}. * be ignored or interpreted differently depending on the edge's {@link edgeStyle}.
* *
* To disable automatic reset of control points after a cell has been moved or * To disable automatic reset of control points after a cell has been moved or
* resized, the the {@link mxGraph.resizeEdgesOnMove} and * resized, the the {@link graph.resizeEdgesOnMove} and
* {@link mxGraph.resetEdgesOnResize} may be used. * {@link graph.resetEdgesOnResize} may be used.
* *
* ### Edge Labels * ### Edge Labels
* *
@ -48,7 +48,7 @@ import { clone } from '../mxCloneUtils';
* to describe the distance from the center of the edge from -1 to 1 with 0 * to describe the distance from the center of the edge from -1 to 1 with 0
* being the center of the edge and the default value. The y-coordinate of an * being the center of the edge and the default value. The y-coordinate of an
* edge's geometry is used to describe the absolute, orthogonal distance in * edge's geometry is used to describe the absolute, orthogonal distance in
* pixels from that point. In addition, the {@link mxGeometry.offset} is used as an * pixels from that point. In addition, the {@link Geometry.offset} is used as an
* absolute offset vector from the resulting point. * absolute offset vector from the resulting point.
* *
* This coordinate system is applied if {@link relative} is true, otherwise the * This coordinate system is applied if {@link relative} is true, otherwise the
@ -73,7 +73,7 @@ import { clone } from '../mxCloneUtils';
* for the origin (top, left corner) of the vertex, otherwise the offset * for the origin (top, left corner) of the vertex, otherwise the offset
* defines the absolute offset for the label inside the vertex or group. * defines the absolute offset for the label inside the vertex or group.
*/ */
class mxGeometry extends mxRectangle { class Geometry extends Rectangle {
constructor( constructor(
x: number = 0, x: number = 0,
y: number = 0, y: number = 0,
@ -94,21 +94,21 @@ class mxGeometry extends mxRectangle {
* *
* @see {@link swap} * @see {@link swap}
*/ */
alternateBounds: mxRectangle | null = null; alternateBounds: Rectangle | null = null;
/** /**
* Defines the source {@link mxPoint} of the edge. This is used if the * Defines the source {@link Point} of the edge. This is used if the
* corresponding edge does not have a source vertex. Otherwise it is * corresponding edge does not have a source vertex. Otherwise it is
* ignored. Default is null. * ignored. Default is null.
*/ */
sourcePoint: mxPoint | null = null; sourcePoint: Point | null = null;
/** /**
* Defines the target {@link mxPoint} of the edge. This is used if the * Defines the target {@link Point} of the edge. This is used if the
* corresponding edge does not have a target vertex. Otherwise it is * corresponding edge does not have a target vertex. Otherwise it is
* ignored. Default is null. * ignored. Default is null.
*/ */
targetPoint: mxPoint | null = null; targetPoint: Point | null = null;
/** /**
* Array of {@link mxPoints} which specifies the control points along the edge. * Array of {@link mxPoints} which specifies the control points along the edge.
@ -116,7 +116,7 @@ class mxGeometry extends mxRectangle {
* use {@link targetPoint} and {@link sourcePoint} or set the terminals of the edge to * use {@link targetPoint} and {@link sourcePoint} or set the terminals of the edge to
* a non-null value. Default is null. * a non-null value. Default is null.
*/ */
points: mxPoint[] = []; points: Point[] = [];
/** /**
* For edges, this holds the offset (in pixels) from the position defined * For edges, this holds the offset (in pixels) from the position defined
@ -125,7 +125,7 @@ class mxGeometry extends mxRectangle {
* coordinates. For absolute geometries (for vertices), this defines the * coordinates. For absolute geometries (for vertices), this defines the
* offset for the label. Default is null. * offset for the label. Default is null.
*/ */
offset: mxPoint | null = null; offset: Point | null = null;
/** /**
* Specifies if the coordinates in the geometry are to be interpreted as * Specifies if the coordinates in the geometry are to be interpreted as
@ -153,7 +153,7 @@ class mxGeometry extends mxRectangle {
*/ */
swap() { swap() {
if (this.alternateBounds) { if (this.alternateBounds) {
const old = new mxRectangle(this.x, this.y, this.width, this.height); const old = new Rectangle(this.x, this.y, this.width, this.height);
this.x = this.alternateBounds.x; this.x = this.alternateBounds.x;
this.y = this.alternateBounds.y; this.y = this.alternateBounds.y;
@ -165,7 +165,7 @@ class mxGeometry extends mxRectangle {
} }
/** /**
* Returns the {@link mxPoint} representing the source or target point of this * Returns the {@link Point} representing the source or target point of this
* edge. This is only used if the edge has no source or target vertex. * edge. This is only used if the edge has no source or target vertex.
* *
* @param {Boolean} isSource that specifies if the source or target point should be returned. * @param {Boolean} isSource that specifies if the source or target point should be returned.
@ -175,13 +175,13 @@ class mxGeometry extends mxRectangle {
} }
/** /**
* Sets the {@link sourcePoint} or {@link targetPoint} to the given {@link mxPoint} and * Sets the {@link sourcePoint} or {@link targetPoint} to the given {@link Point} and
* returns the new point. * returns the new point.
* *
* @param {Point} point to be used as the new source or target point. * @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. * @param {Boolean} isSource that specifies if the source or target point should be set.
*/ */
setTerminalPoint(point: mxPoint, isSource: boolean) { setTerminalPoint(point: Point, isSource: boolean) {
if (isSource) { if (isSource) {
this.sourcePoint = point; this.sourcePoint = point;
} else { } else {
@ -198,16 +198,16 @@ class mxGeometry extends mxRectangle {
* translated if {@link relative} is false. * translated if {@link relative} is false.
* *
* @param {Number} angle that specifies the rotation angle in degrees. * @param {Number} angle that specifies the rotation angle in degrees.
* @param {mxPoint} cx that specifies the center of the rotation. * @param {Point} cx that specifies the center of the rotation.
*/ */
rotate(angle: number, cx: mxPoint) { rotate(angle: number, cx: Point) {
const rad = toRadians(angle); const rad = toRadians(angle);
const cos = Math.cos(rad); const cos = Math.cos(rad);
const sin = Math.sin(rad); const sin = Math.sin(rad);
// Rotates the geometry // Rotates the geometry
if (!this.relative) { if (!this.relative) {
const ct = new mxPoint(this.getCenterX(), this.getCenterY()); const ct = new Point(this.getCenterX(), this.getCenterY());
const pt = getRotatedPoint(ct, cos, sin, cx); const pt = getRotatedPoint(ct, cos, sin, cx);
this.x = Math.round(pt.x - this.width / 2); this.x = Math.round(pt.x - this.width / 2);
@ -329,7 +329,7 @@ class mxGeometry extends mxRectangle {
/** /**
* Returns true if the given object equals this geometry. * Returns true if the given object equals this geometry.
*/ */
equals(geom: mxGeometry | null) { equals(geom: Geometry | null) {
if (!geom) return false; if (!geom) return false;
return ( return (
@ -348,8 +348,8 @@ class mxGeometry extends mxRectangle {
} }
clone() { clone() {
return clone(this) as mxGeometry; return clone(this) as Geometry;
} }
} }
export default mxGeometry; export default Geometry;

24
packages/core/src/atomic_changes/mxGeometryChange.ts → packages/core/src/view/geometry/GeometryChange.ts
View File

@ -1,8 +1,8 @@
import mxGeometry from '../util/datatypes/mxGeometry'; import Geometry from './Geometry';
import mxCell from '../view/cell/mxCell'; import Cell from '../cell/datatypes/Cell';
import mxGraphModel from '../view/graph/mxGraphModel'; import Model from '../model/Model';
import type { UndoableChange } from '../types'; import type { UndoableChange } from '../../types';
/** /**
* Class: mxGeometryChange * Class: mxGeometryChange
@ -14,13 +14,13 @@ import type { UndoableChange } from '../types';
* Constructs a change of a geometry in the * Constructs a change of a geometry in the
* specified model. * specified model.
*/ */
class mxGeometryChange implements UndoableChange { class GeometryChange implements UndoableChange {
model: mxGraphModel; model: Model;
cell: mxCell; cell: Cell;
geometry: mxGeometry | null; geometry: Geometry | null;
previous: mxGeometry | null; previous: Geometry | null;
constructor(model: mxGraphModel, cell: mxCell, geometry: mxGeometry | null) { constructor(model: Model, cell: Cell, geometry: Geometry | null) {
this.model = model; this.model = model;
this.cell = cell; this.cell = cell;
this.geometry = geometry; this.geometry = geometry;
@ -31,7 +31,7 @@ class mxGeometryChange implements UndoableChange {
* Function: execute * Function: execute
* *
* Changes the geometry of {@link cell}` ro {@link previous}` using * Changes the geometry of {@link cell}` ro {@link previous}` using
* <mxGraphModel.geometryForCellChanged>. * <Transactions.geometryForCellChanged>.
*/ */
execute() { execute() {
this.geometry = this.previous; this.geometry = this.previous;
@ -39,4 +39,4 @@ class mxGeometryChange implements UndoableChange {
} }
} }
export default mxGeometryChange; export default GeometryChange;

8
packages/core/src/util/datatypes/mxPoint.ts → packages/core/src/view/geometry/Point.ts
View File

@ -15,7 +15,7 @@
* Constructs a new point for the optional x and y coordinates. If no * Constructs a new point for the optional x and y coordinates. If no
* coordinates are given, then the default values for <x> and <y> are used. * coordinates are given, then the default values for <x> and <y> are used.
*/ */
class mxPoint { class Point {
constructor(x: number = 0, y: number = 0) { constructor(x: number = 0, y: number = 0) {
this.x = x; this.x = x;
this.y = y; this.y = y;
@ -60,7 +60,7 @@ class mxPoint {
* *
* Returns true if the given object equals this point. * Returns true if the given object equals this point.
*/ */
equals(p: mxPoint | null) { equals(p: Point | null) {
if (!p) return false; if (!p) return false;
return p.x === this.x && p.y === this.y; return p.x === this.x && p.y === this.y;
@ -72,8 +72,8 @@ class mxPoint {
* Returns a clone of this <mxPoint>. * Returns a clone of this <mxPoint>.
*/ */
clone() { clone() {
return new mxPoint(this.x, this.y); return new Point(this.x, this.y);
} }
} }
export default mxPoint; export default Point;

20
packages/core/src/util/datatypes/mxRectangle.ts → packages/core/src/view/geometry/Rectangle.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxPoint from './mxPoint'; import Point from './Point';
/** /**
* Class: mxRectangle * Class: mxRectangle
@ -18,7 +18,7 @@ import mxPoint from './mxPoint';
* Constructs a new rectangle for the optional parameters. If no parameters * Constructs a new rectangle for the optional parameters. If no parameters
* are given then the respective default values are used. * are given then the respective default values are used.
*/ */
class mxRectangle extends mxPoint { class Rectangle extends Point {
constructor( constructor(
x: number = 0, x: number = 0,
y: number = 0, y: number = 0,
@ -71,8 +71,8 @@ class mxRectangle extends mxPoint {
* *
* Returns a new <mxRectangle> which is a copy of the given rectangle. * Returns a new <mxRectangle> which is a copy of the given rectangle.
*/ */
static fromRectangle = (rect: mxRectangle) => { static fromRectangle = (rect: Rectangle) => {
return new mxRectangle(rect.x, rect.y, rect.width, rect.height); return new Rectangle(rect.x, rect.y, rect.width, rect.height);
}; };
/** /**
@ -110,7 +110,7 @@ class mxRectangle extends mxPoint {
* *
* Adds the given rectangle to this rectangle. * Adds the given rectangle to this rectangle.
*/ */
add(rect: mxRectangle) { add(rect: Rectangle) {
const minX = Math.min(this.x, rect.x); const minX = Math.min(this.x, rect.x);
const minY = Math.min(this.y, rect.y); const minY = Math.min(this.y, rect.y);
const maxX = Math.max(this.x + this.width, rect.x + rect.width); const maxX = Math.max(this.x + this.width, rect.x + rect.width);
@ -127,7 +127,7 @@ class mxRectangle extends mxPoint {
* *
* Changes this rectangle to where it overlaps with the given rectangle. * Changes this rectangle to where it overlaps with the given rectangle.
*/ */
intersect(rect: mxRectangle) { intersect(rect: Rectangle) {
const r1 = this.x + this.width; const r1 = this.x + this.width;
const r2 = rect.x + rect.width; const r2 = rect.x + rect.width;
@ -160,7 +160,7 @@ class mxRectangle extends mxPoint {
* Returns the top, left corner as a new <mxPoint>. * Returns the top, left corner as a new <mxPoint>.
*/ */
getPoint() { getPoint() {
return new mxPoint(this.x, this.y); return new Point(this.x, this.y);
} }
/** /**
@ -183,7 +183,7 @@ class mxRectangle extends mxPoint {
* *
* Returns true if the given object equals this rectangle. * Returns true if the given object equals this rectangle.
*/ */
equals(rect: mxRectangle | null) { equals(rect: Rectangle | null) {
if (!rect) return false; if (!rect) return false;
return ( return (
@ -195,8 +195,8 @@ class mxRectangle extends mxPoint {
} }
clone() { clone() {
return new mxRectangle(this.x, this.y, this.width, this.height); return new Rectangle(this.x, this.y, this.width, this.height);
} }
} }
export default mxRectangle; export default Rectangle;

16
packages/core/src/shape/mxActor.ts → packages/core/src/view/geometry/shape/Actor.ts
View File

@ -4,15 +4,15 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../Rectangle';
import mxShape from './mxShape'; import Shape from './Shape';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from '../../../util/canvas/mxSvgCanvas2D';
/** /**
* Extends {@link mxShape} to implement an actor shape. If a custom shape with one * Extends {@link Shape} to implement an actor shape. If a custom shape with one
* filled area is needed, then this shape's {@link redrawPath} method should be overridden. * filled area is needed, then this shape's {@link redrawPath} method should be overridden.
* *
* This shape is registered under {@link mxConstants.SHAPE_ACTOR} in {@link mxCellRenderer}. * This shape is registered under {@link mxConstants.SHAPE_ACTOR} in {@link cellRenderer}.
* *
* @example * @example
* ```javascript * ```javascript
@ -31,9 +31,9 @@ import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
* } * }
* ``` * ```
*/ */
class mxActor extends mxShape { class Actor extends Shape {
constructor( constructor(
bounds: mxRectangle | null = null, bounds: Rectangle | null = null,
fill: string | null = null, fill: string | null = null,
stroke: string | null = null, stroke: string | null = null,
strokewidth: number = 1 strokewidth: number = 1
@ -83,4 +83,4 @@ class mxActor extends mxShape {
} }
} }
export default mxActor; export default Actor;

36
packages/core/src/shape/mxLabel.js → packages/core/src/view/geometry/shape/Label.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxRectangle from '../util/datatypes/mxRectangle'; import Rectangle from '../Rectangle';
import { import {
ALIGN_BOTTOM, ALIGN_BOTTOM,
ALIGN_CENTER, ALIGN_CENTER,
@ -13,9 +13,9 @@ import {
ALIGN_RIGHT, ALIGN_RIGHT,
ALIGN_TOP, ALIGN_TOP,
DEFAULT_IMAGESIZE, DEFAULT_IMAGESIZE,
} from '../util/mxConstants'; } from '../../../util/Constants';
import mxRectangleShape from './node/mxRectangleShape'; import RectangleShape from './node/RectangleShape';
import mxUtils from '../util/mxUtils'; import utils from '../../../util/Utils';
/** /**
* Class: mxLabel * Class: mxLabel
@ -37,7 +37,7 @@ import mxUtils from '../util/mxUtils';
* strokewidth - Optional integer that defines the stroke width. Default is * strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>. * 1. This is stored in <strokewidth>.
*/ */
class mxLabel extends mxRectangleShape { class Label extends RectangleShape {
constructor(bounds, fill, stroke, strokewidth) { constructor(bounds, fill, stroke, strokewidth) {
super(bounds, fill, stroke, strokewidth); super(bounds, fill, stroke, strokewidth);
} }
@ -165,24 +165,24 @@ class mxLabel extends mxRectangleShape {
*/ */
// getImageBounds(x: number, y: number, w: number, h: number): mxRectangle; // getImageBounds(x: number, y: number, w: number, h: number): mxRectangle;
getImageBounds(x, y, w, h) { getImageBounds(x, y, w, h) {
const align = mxUtils.getValue(this.style, 'imageAlign', ALIGN_LEFT); const align = utils.getValue(this.style, 'imageAlign', ALIGN_LEFT);
const valign = mxUtils.getValue( const valign = utils.getValue(
this.style, this.style,
'verticalAlign', 'verticalAlign',
ALIGN_MIDDLE ALIGN_MIDDLE
); );
const width = mxUtils.getNumber( const width = utils.getNumber(
this.style, this.style,
'imageWidth', 'imageWidth',
DEFAULT_IMAGESIZE DEFAULT_IMAGESIZE
); );
const height = mxUtils.getNumber( const height = utils.getNumber(
this.style, this.style,
'imageHeight', 'imageHeight',
DEFAULT_IMAGESIZE DEFAULT_IMAGESIZE
); );
const spacing = const spacing =
mxUtils.getNumber(this.style, 'spacing', this.spacing) + 5; utils.getNumber(this.style, 'spacing', this.spacing) + 5;
if (align === ALIGN_CENTER) { if (align === ALIGN_CENTER) {
x += (w - width) / 2; x += (w - width) / 2;
@ -202,7 +202,7 @@ class mxLabel extends mxRectangleShape {
y += (h - height) / 2; y += (h - height) / 2;
} }
return new mxRectangle(x, y, width, height); return new Rectangle(x, y, width, height);
} }
/** /**
@ -239,22 +239,22 @@ class mxLabel extends mxRectangleShape {
* @param {number} y * @param {number} y
* @param {number} w * @param {number} w
* @param {number} h * @param {number} h
* @returns {mxRectangle} * @returns {Rectangle}
*/ */
// getIndicatorBounds(x: number, y: number, w: number, h: number): mxRectangle; // getIndicatorBounds(x: number, y: number, w: number, h: number): mxRectangle;
getIndicatorBounds(x, y, w, h) { getIndicatorBounds(x, y, w, h) {
const align = mxUtils.getValue(this.style, 'imageAlign', ALIGN_LEFT); const align = utils.getValue(this.style, 'imageAlign', ALIGN_LEFT);
const valign = mxUtils.getValue( const valign = utils.getValue(
this.style, this.style,
'verticalAlign', 'verticalAlign',
ALIGN_MIDDLE ALIGN_MIDDLE
); );
const width = mxUtils.getNumber( const width = utils.getNumber(
this.style, this.style,
'indicatorWidth', 'indicatorWidth',
this.indicatorSize this.indicatorSize
); );
const height = mxUtils.getNumber( const height = utils.getNumber(
this.style, this.style,
'indicatorHeight', 'indicatorHeight',
this.indicatorSize this.indicatorSize
@ -279,7 +279,7 @@ class mxLabel extends mxRectangleShape {
y += (h - height) / 2; y += (h - height) / 2;
} }
return new mxRectangle(x, y, width, height); return new Rectangle(x, y, width, height);
} }
/** /**
@ -320,4 +320,4 @@ class mxLabel extends mxRectangleShape {
} }
} }
export default mxLabel; export default Label;

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