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>.
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
using a <mxCellRenderer> based on the appearance defined in <mxStylesheet>.
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
*/
import mxEvent from '../util/event/mxEvent';
import mxEventObject from '../util/event/mxEventObject';
import mxKeyHandler from '../handler/mxKeyHandler';
import InternalEvent from '../view/event/InternalEvent';
import EventObject from '../view/event/EventObject';
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}.
@ -24,7 +24,7 @@ import mxKeyHandler from '../handler/mxKeyHandler';
*
* @Keycodes
* 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 {
constructor(editor) {
@ -40,7 +40,7 @@ class mxDefaultKeyHandler {
this.handler.escape = evt => {
old.apply(this, [editor]);
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
* Type definitions from the typed-mxgraph project
*/
import { getTextContent } from '../util/mxDomUtils';
import mxResources from '../util/mxResources';
import { getTextContent } from '../util/DomUtils';
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.
@ -165,7 +165,7 @@ class mxDefaultPopupMenu {
if (condition == null || conditions[condition]) {
let as = item.getAttribute('as');
as = mxResources.get(as) || as;
as = Resources.get(as) || as;
const funct = eval(getTextContent(item));
const action = item.getAttribute('action');
let icon = item.getAttribute('icon');

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

@ -7,11 +7,11 @@
import mxClient from '../mxClient';
import mxToolbar from '../util/gui/mxToolbar';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxUtils from '../util/mxUtils';
import mxEvent from '../util/event/mxEvent';
import { getClientX, getClientY } from '../util/mxEventUtils';
import { makeDraggable } from '../util/mxGestureUtils';
import Geometry from '../view/geometry/Geometry';
import utils from '../util/Utils';
import InternalEvent from '../view/event/InternalEvent';
import { getClientX, getClientY } from '../util/EventUtils';
import { makeDraggable } from '../util/GestureUtils';
/**
* 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
// selected in the toolbar
this.toolbar.addListener(mxEvent.SELECT, (sender, evt) => {
this.toolbar.addListener(InternalEvent.SELECT, (sender, evt) => {
const funct = evt.getProperty('function');
if (funct != null) {
@ -110,8 +110,8 @@ class mxDefaultToolbar {
}
};
this.editor.graph.addListener(mxEvent.DOUBLE_CLICK, this.resetHandler);
this.editor.addListener(mxEvent.ESCAPE, this.resetHandler);
this.editor.graph.addListener(InternalEvent.DOUBLE_CLICK, this.resetHandler);
this.editor.addListener(InternalEvent.ESCAPE, this.resetHandler);
}
}
@ -262,7 +262,7 @@ class mxDefaultToolbar {
}
this.toolbar.resetMode();
mxEvent.consume(evt);
InternalEvent.consume(evt);
};
const img = this.toolbar.addMode(
@ -334,7 +334,7 @@ class mxDefaultToolbar {
if (graph.canImportCell(vertex)) {
const x = getClientX(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
if (
@ -400,7 +400,7 @@ class mxDefaultToolbar {
edge = this.editor.createEdge(source, vertex);
if (edge.getGeometry() == null) {
const edgeGeometry = new mxGeometry();
const edgeGeometry = new Geometry();
edgeGeometry.relative = true;
model.setGeometry(edge, edgeGeometry);
@ -438,7 +438,7 @@ class mxDefaultToolbar {
sprite.style.height = `${2 * img.offsetHeight}px`;
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 mxUndoManager from '../util/undo/mxUndoManager';
import mxUndoManager from '../util/mxUndoManager';
import mxDefaultKeyHandler from './mxDefaultKeyHandler';
import mxEventSource from '../util/event/mxEventSource';
import mxResources from '../util/mxResources';
import EventSource from '../view/event/EventSource';
import Resources from '../util/Resources';
import mxClient from '../mxClient';
import mxCompactTreeLayout from '../layout/mxCompactTreeLayout';
import mxCompactTreeLayout from '../view/layout/layout/mxCompactTreeLayout';
import mxDefaultToolbar from './mxDefaultToolbar';
import mxStackLayout from '../layout/mxStackLayout';
import mxEventObject from '../util/event/mxEventObject';
import mxUtils from '../util/mxUtils';
import mxCodec from '../serialization/mxCodec';
import mxStackLayout from '../view/layout/layout/mxStackLayout';
import EventObject from '../view/event/EventObject';
import utils from '../util/Utils';
import mxCodec from '../util/serialization/mxCodec';
import mxWindow, { error } from '../util/gui/mxWindow';
import mxForm from '../util/gui/mxForm';
import mxOutline from '../view/graph/mxOutline';
import mxCell from '../view/cell/mxCell';
import mxGeometry from '../util/datatypes/mxGeometry';
import Outline from '../view/Outline';
import Cell from '../view/cell/datatypes/Cell';
import Geometry from '../view/geometry/Geometry';
import {
ALIGN_BOTTOM,
ALIGN_CENTER,
@ -30,19 +30,19 @@ import {
FONT_BOLD,
FONT_ITALIC,
FONT_UNDERLINE,
} from '../util/mxConstants';
import mxGraph from '../view/graph/mxGraph';
import mxSwimlaneManager from '../view/graph/mxSwimlaneManager';
import mxLayoutManager from '../view/graph/mxLayoutManager';
import mxRubberband from '../handler/mxRubberband';
import mxEvent from '../util/event/mxEvent';
import mxRootChange from '../atomic_changes/mxRootChange';
import mxValueChange from '../atomic_changes/mxValueChange';
import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
import mxPrintPreview from '../view/graph/mxPrintPreview';
} from '../util/Constants';
import graph from '../view/Graph';
import SwimlaneManager from '../view/layout/SwimlaneManager';
import LayoutManager from '../view/layout/LayoutManager';
import mxRubberband from '../view/selection/mxRubberband';
import InternalEvent from '../view/event/InternalEvent';
import RootChange from '../view/model/RootChange';
import ValueChange from '../view/cell/ValueChange';
import CellAttributeChange from '../view/cell/CellAttributeChange';
import PrintPreview from '../view/printing/PrintPreview';
import mxClipboard from '../util/storage/mxClipboard';
import mxLog from '../util/gui/mxLog';
import { isNode } from '../util/mxDomUtils';
import { isNode } from '../util/DomUtils';
/**
* 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
* adds {@link actions}, I/O using {@link mxCodec}, auto-layout using {@link mxLayoutManager},
* Extends {@link EventSource} to implement an application wrapper for a graph that
* adds {@link actions}, I/O using {@link mxCodec}, auto-layout using {@link LayoutManager},
* command history using {@link undoManager}, and standard dialogs and widgets, eg.
* properties, help, outline, toolbar, and popupmenu. It also adds {@link templates}
* 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
* 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
* action in {@link action}. Alternatively, the entry in the config file's popupmenu
* 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
* 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
* 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
* 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
@ -405,9 +405,9 @@ if (mxLoadResources) {
* ```
*
* @class mxEditor
* @extends mxEventSource
* @extends EventSource
*/
class mxEditor extends mxEventSource {
class mxEditor extends EventSource {
constructor(config) {
super();
@ -508,14 +508,14 @@ class mxEditor extends mxEventSource {
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.
*/
// outline: any;
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}.
*/
// graph: mxGraph;
@ -523,7 +523,7 @@ class mxEditor extends mxEventSource {
/**
* 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
*/
// graphRenderHint: any;
@ -990,12 +990,12 @@ class mxEditor extends mxEventSource {
});
this.addAction('print', (editor) => {
const preview = new mxPrintPreview(editor.graph, 1);
const preview = new PrintPreview(editor.graph, 1);
preview.open();
});
this.addAction('show', (editor) => {
mxUtils.show(editor.graph, null, 10, 10);
utils.show(editor.graph, null, 10, 10);
});
this.addAction('exportImage', (editor) => {
@ -1004,10 +1004,10 @@ class mxEditor extends mxEventSource {
if (url == null || mxClient.IS_LOCAL) {
editor.execute('show');
} else {
const node = mxUtils.getViewXml(editor.graph, 1);
const xml = mxUtils.getXml(node, '\n');
const node = utils.getViewXml(editor.graph, 1);
const xml = utils.getXml(node, '\n');
mxUtils.submit(
utils.submit(
url,
`${editor.postParameterName}=${encodeURIComponent(xml)}`,
document,
@ -1291,7 +1291,7 @@ class mxEditor extends mxEventSource {
const scale =
parseFloat(
prompt(
mxResources.get(editor.askZoomResource) || editor.askZoomResource,
Resources.get(editor.askZoomResource) || editor.askZoomResource,
current
)
) / 100;
@ -1455,11 +1455,11 @@ class mxEditor extends mxEventSource {
/**
* Creates the {@link graph} for the editor. The graph is created with no
* container and is initialized from {@link setGraphContainer}.
* @returns mxGraph instance
* @returns graph instance
*/
// createGraph(): mxGraph;
createGraph() {
const graph = new mxGraph(null, null, this.graphRenderHint);
const graph = new graph(null, null, this.graphRenderHint);
// Enables rubberband, tooltips, panning
graph.setTooltips(true);
@ -1506,11 +1506,11 @@ class mxEditor extends mxEventSource {
/**
* Sets the graph's container using [@link mxGraph.init}.
* @param graph
* @returns mxSwimlaneManager instance
* @returns SwimlaneManager instance
*/
// createSwimlaneManager(graph: any): mxSwimlaneManager;
createSwimlaneManager(graph) {
const swimlaneMgr = new mxSwimlaneManager(graph, false);
const swimlaneMgr = new SwimlaneManager(graph, false);
swimlaneMgr.isHorizontal = () => {
return this.horizontalFlow;
@ -1527,11 +1527,11 @@ class mxEditor extends mxEventSource {
* Creates a layout manager for the swimlane and diagram layouts, that
* is, the locally defined inter and intraswimlane layouts.
* @param graph
* @returns mxLayoutManager instance
* @returns LayoutManager instance
*/
// createLayoutManager(graph: any): mxLayoutManager;
createLayoutManager(graph) {
const layoutMgr = new mxLayoutManager(graph);
const layoutMgr = new LayoutManager(graph);
const self = this; // closure
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
*/
// setGraphContainer(container: any): void;
@ -1588,20 +1588,20 @@ class mxEditor extends mxEventSource {
// Disables the context menu
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.
* @param graph
*/
// installDblClickHandler(graph: any): void;
installDblClickHandler(graph) {
// 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');
if (cell != null && graph.isEnabled() && this.dblClickAction != null) {
@ -1622,8 +1622,8 @@ class mxEditor extends mxEventSource {
this.undoManager.undoableEditHappened(edit);
};
graph.getModel().addListener(mxEvent.UNDO, listener);
graph.getView().addListener(mxEvent.UNDO, listener);
graph.getModel().addListener(InternalEvent.UNDO, listener);
graph.getView().addListener(InternalEvent.UNDO, listener);
// Keeps the selection state in sync
const undoHandler = (sender, evt) => {
@ -1631,8 +1631,8 @@ class mxEditor extends mxEventSource {
graph.setSelectionCells(graph.getSelectionCellsForChanges(changes));
};
this.undoManager.addListener(mxEvent.UNDO, undoHandler);
this.undoManager.addListener(mxEvent.REDO, undoHandler);
this.undoManager.addListener(InternalEvent.UNDO, undoHandler);
this.undoManager.addListener(InternalEvent.REDO, undoHandler);
}
/**
@ -1642,11 +1642,11 @@ class mxEditor extends mxEventSource {
// installDrillHandler(graph: any): void;
installDrillHandler(graph) {
const listener = (sender) => {
this.fireEvent(new mxEventObject(mxEvent.ROOT));
this.fireEvent(new EventObject(InternalEvent.ROOT));
};
graph.getView().addListener(mxEvent.DOWN, listener);
graph.getView().addListener(mxEvent.UP, listener);
graph.getView().addListener(InternalEvent.DOWN, listener);
graph.getView().addListener(InternalEvent.UP, listener);
}
/**
@ -1674,19 +1674,19 @@ class mxEditor extends mxEventSource {
const change = changes[i];
if (
change instanceof mxRootChange ||
(change instanceof mxValueChange &&
change instanceof RootChange ||
(change instanceof ValueChange &&
change.cell === this.graph.model.root) ||
(change instanceof mxCellAttributeChange &&
(change instanceof CellAttributeChange &&
change.cell === this.graph.model.root)
) {
this.fireEvent(new mxEventObject(mxEvent.ROOT));
this.fireEvent(new EventObject(InternalEvent.ROOT));
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
// when files are saved
this.addListener(mxEvent.SAVE, () => {
this.addListener(InternalEvent.SAVE, () => {
const tstamp = new Date().toLocaleString();
this.setStatus(
`${
mxResources.get(this.lastSavedResource) || this.lastSavedResource
Resources.get(this.lastSavedResource) || this.lastSavedResource
}: ${tstamp}`
);
});
// Updates the statusbar to display the filename
// when new files are opened
this.addListener(mxEvent.OPEN, () => {
this.addListener(InternalEvent.OPEN, () => {
this.setStatus(
`${
mxResources.get(this.currentFileResource) ||
Resources.get(this.currentFileResource) ||
this.currentFileResource
}: ${this.filename}`
);
@ -1836,7 +1836,7 @@ class mxEditor extends mxEventSource {
*/
// setTitleContainer(container: any): void;
setTitleContainer(container) {
this.addListener(mxEvent.ROOT, (sender) => {
this.addListener(InternalEvent.ROOT, (sender) => {
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() {
@ -1907,7 +1907,7 @@ class mxEditor extends mxEventSource {
/**
* 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.
*/
// groupCells(): any;
@ -1920,7 +1920,7 @@ class mxEditor extends mxEventSource {
/**
* Creates and returns a clone of {@link defaultGroup} to be used
* as a new group cell in {@link group}.
* @returns mxCell
* @returns Cell
*/
// createGroup(): mxCell;
createGroup() {
@ -1952,11 +1952,11 @@ class mxEditor extends mxEventSource {
// open(filename: string): void;
open(filename) {
if (filename != null) {
const xml = mxUtils.load(filename).getXml();
const xml = utils.load(filename).getXml();
this.readGraphModel(xml.documentElement);
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
* 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
* displayed using {@link mxUtils.popup}. Exceptions should be handled as
* displayed using {@link utils.popup}. Exceptions should be handled as
* follows:
*
* @example
@ -2009,7 +2009,7 @@ class mxEditor extends mxEventSource {
}
// 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);
}
mxUtils.post(url, `${this.postParameterName}=${data}`, (req) => {
utils.post(url, `${this.postParameterName}=${data}`, (req) => {
this.fireEvent(
new mxEventObject(
mxEvent.POST,
new EventObject(
InternalEvent.POST,
'request',
req,
'url',
@ -2076,7 +2076,7 @@ class mxEditor extends mxEventSource {
const enc = new mxCodec();
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
this.graph.stopEditing(true);
const offset = mxUtils.getOffset(this.graph.container);
const offset = utils.getOffset(this.graph.container);
let x = offset.x + 10;
let { y } = offset;
@ -2174,7 +2174,7 @@ class mxEditor extends mxEventSource {
// Displays the contents in a window and stores a reference to the
// window for later hiding of the window
this.properties = new mxWindow(
mxResources.get(this.propertiesResource) || this.propertiesResource,
Resources.get(this.propertiesResource) || this.propertiesResource,
node,
x,
y,
@ -2290,7 +2290,7 @@ class mxEditor extends mxEventSource {
// model, which will also make the change
// part of the current transaction
for (let i = 0; i < attrs.length; i += 1) {
const edit = new mxCellAttributeChange(
const edit = new CellAttributeChange(
cell,
attrs[i].nodeName,
texts[i].value
@ -2365,7 +2365,7 @@ class mxEditor extends mxEventSource {
div.style.paddingLeft = '20px';
const w = document.body.clientWidth;
const wnd = new mxWindow(
mxResources.get(this.tasksResource) || this.tasksResource,
Resources.get(this.tasksResource) || this.tasksResource,
div,
w - 220,
this.tasksTop,
@ -2378,14 +2378,14 @@ class mxEditor extends mxEventSource {
// of the tasks window on every change of the
// model, selection or root.
const funct = (sender) => {
mxEvent.release(div);
InternalEvent.release(div);
div.innerHTML = '';
this.createTasks(div);
};
this.graph.getModel().addListener(mxEvent.CHANGE, funct);
this.graph.getSelectionModel().addListener(mxEvent.CHANGE, funct);
this.graph.addListener(mxEvent.ROOT, funct);
this.graph.getModel().addListener(InternalEvent.CHANGE, funct);
this.graph.getSelectionModel().addListener(InternalEvent.CHANGE, funct);
this.graph.addListener(InternalEvent.ROOT, funct);
// Assigns the icon to the tasks window
if (this.tasksWindowImage != null) {
@ -2407,7 +2407,7 @@ class mxEditor extends mxEventSource {
refreshTasks(div) {
if (this.tasks != null) {
const div = this.tasks.content;
mxEvent.release(div);
InternalEvent.release(div);
div.innerHTML = '';
this.createTasks(div);
}
@ -2437,7 +2437,7 @@ class mxEditor extends mxEventSource {
showHelp(tasks) {
if (this.help == null) {
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('width', '100%');
frame.setAttribute('frameBorder', '0');
@ -2448,7 +2448,7 @@ class mxEditor extends mxEventSource {
document.body.clientHeight || document.documentElement.clientHeight;
const wnd = new mxWindow(
mxResources.get(this.helpResource) || this.helpResource,
Resources.get(this.helpResource) || this.helpResource,
frame,
(w - this.helpWidth) / 2,
(h - this.helpHeight) / 3,
@ -2472,10 +2472,10 @@ class mxEditor extends mxEventSource {
frame.setAttribute('height', `${h - 26}px`);
};
wnd.addListener(mxEvent.RESIZE_END, handler);
wnd.addListener(mxEvent.MAXIMIZE, handler);
wnd.addListener(mxEvent.NORMALIZE, handler);
wnd.addListener(mxEvent.SHOW, handler);
wnd.addListener(InternalEvent.RESIZE_END, handler);
wnd.addListener(InternalEvent.MAXIMIZE, handler);
wnd.addListener(InternalEvent.NORMALIZE, handler);
wnd.addListener(InternalEvent.SHOW, handler);
}
this.help = wnd;
@ -2486,7 +2486,7 @@ class mxEditor extends mxEventSource {
/**
* 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() {
@ -2503,7 +2503,7 @@ class mxEditor extends mxEventSource {
div.style.cursor = 'move';
const wnd = new mxWindow(
mxResources.get(this.outlineResource) || this.outlineResource,
Resources.get(this.outlineResource) || this.outlineResource,
div,
600,
480,
@ -2514,17 +2514,17 @@ class mxEditor extends mxEventSource {
// Creates the outline in the specified div
// 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.setResizable(true);
wnd.destroyOnClose = false;
wnd.addListener(mxEvent.RESIZE_END, () => {
wnd.addListener(InternalEvent.RESIZE_END, () => {
outline.update();
});
this.outline = wnd;
this.outline.outline = outline;
this.outline.Outline = outline;
}
// Finally shows the outline
@ -2584,10 +2584,10 @@ class mxEditor extends mxEventSource {
const model = this.graph.getModel();
e = model.cloneCell(this.defaultEdge);
} else {
e = new mxCell('');
e = new Cell('');
e.setEdge(true);
const geo = new mxGeometry();
const geo = new Geometry();
geo.relative = true;
e.setGeometry(geo);
}
@ -2714,8 +2714,8 @@ class mxEditor extends mxEventSource {
this.cycleAttribute(vertex);
this.fireEvent(
new mxEventObject(
mxEvent.BEFORE_ADD_VERTEX,
new EventObject(
InternalEvent.BEFORE_ADD_VERTEX,
'vertex',
vertex,
'parent',
@ -2730,7 +2730,7 @@ class mxEditor extends mxEventSource {
if (vertex != null) {
this.graph.constrainChild(vertex);
this.fireEvent(new mxEventObject(mxEvent.ADD_VERTEX, 'vertex', vertex));
this.fireEvent(new EventObject(InternalEvent.ADD_VERTEX, 'vertex', vertex));
}
} finally {
model.endUpdate();
@ -2740,7 +2740,7 @@ class mxEditor extends mxEventSource {
this.graph.setSelectionCell(vertex);
this.graph.scrollCellToVisible(vertex);
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 mxCellAttributeChange from './atomic_changes/mxCellAttributeChange';
import mxChildChange from './atomic_changes/mxChildChange';
import mxCollapseChange from './atomic_changes/mxCollapseChange';
import mxCurrentRootChange from './atomic_changes/mxCurrentRootChange';
import mxGeometryChange from './atomic_changes/mxGeometryChange';
import mxRootChange from './atomic_changes/mxRootChange';
import mxSelectionChange from './atomic_changes/mxSelectionChange';
import mxStyleChange from './atomic_changes/mxStyleChange';
import mxTerminalChange from './atomic_changes/mxTerminalChange';
import mxValueChange from './atomic_changes/mxValueChange';
import mxVisibleChange from './atomic_changes/mxVisibleChange';
import CellAttributeChange from './view/cell/CellAttributeChange';
import ChildChange from './view/model/ChildChange';
import CollapseChange from './view/folding/CollapseChange';
import CurrentRootChange from './view/view/CurrentRootChange';
import GeometryChange from './view/geometry/GeometryChange';
import RootChange from './view/model/RootChange';
import SelectionChange from './view/selection/SelectionChange';
import StyleChange from './view/style/StyleChange';
import TerminalChange from './view/cell/edge/TerminalChange';
import ValueChange from './view/cell/ValueChange';
import VisibleChange from './view/style/VisibleChange';
import mxDefaultKeyHandler from './editor/mxDefaultKeyHandler';
import mxDefaultPopupMenu from './editor/mxDefaultPopupMenu';
import mxDefaultToolbar from './editor/mxDefaultToolbar';
import mxEditor from './editor/mxEditor';
import mxCellHighlight from './handler/mxCellHighlight';
import mxCellMarker from './handler/mxCellMarker';
import mxCellTracker from './handler/mxCellTracker';
import mxConnectionHandler from './handler/mxConnectionHandler';
import mxConstraintHandler from './handler/mxConstraintHandler';
import mxEdgeHandler from './handler/mxEdgeHandler';
import mxEdgeSegmentHandler from './handler/mxEdgeSegmentHandler';
import mxElbowEdgeHandler from './handler/mxElbowEdgeHandler';
import mxGraphHandler from './handler/mxGraphHandler';
import mxHandle from './handler/mxHandle';
import mxKeyHandler from './handler/mxKeyHandler';
import mxPanningHandler from './handler/mxPanningHandler';
import mxPopupMenuHandler from './handler/mxPopupMenuHandler';
import mxRubberband from './handler/mxRubberband';
import mxSelectionCellsHandler from './handler/mxSelectionCellsHandler';
import mxTooltipHandler from './handler/mxTooltipHandler';
import mxVertexHandler from './handler/mxVertexHandler';
import mxCellHighlight from './view/selection/mxCellHighlight';
import CellMarker from './view/cell/CellMarker';
import mxCellTracker from './view/event/mxCellTracker';
import mxConnectionHandler from './view/connection/mxConnectionHandler';
import mxConstraintHandler from './view/connection/mxConstraintHandler';
import mxEdgeHandler from './view/cell/edge/mxEdgeHandler';
import mxEdgeSegmentHandler from './view/cell/edge/mxEdgeSegmentHandler';
import mxElbowEdgeHandler from './view/cell/edge/mxElbowEdgeHandler';
import GraphHandler from './view/GraphHandler';
import mxHandle from './view/cell/edge/mxHandle';
import mxKeyHandler from './view/event/mxKeyHandler';
import PanningHandler from './view/panning/PanningHandler';
import PopupMenuHandler from './view/popups_menus/PopupMenuHandler';
import mxRubberband from './view/selection/mxRubberband';
import mxSelectionCellsHandler from './view/selection/mxSelectionCellsHandler';
import TooltipHandler from './view/popups_menus/TooltipHandler';
import mxVertexHandler from './view/cell/vertex/mxVertexHandler';
import mxCircleLayout from './layout/mxCircleLayout';
import mxCompactTreeLayout from './layout/mxCompactTreeLayout';
import mxCompositeLayout from './layout/mxCompositeLayout';
import mxEdgeLabelLayout from './layout/mxEdgeLabelLayout';
import mxFastOrganicLayout from './layout/mxFastOrganicLayout';
import mxGraphLayout from './layout/mxGraphLayout';
import mxParallelEdgeLayout from './layout/mxParallelEdgeLayout';
import mxPartitionLayout from './layout/mxPartitionLayout';
import mxRadialTreeLayout from './layout/mxRadialTreeLayout';
import mxStackLayout from './layout/mxStackLayout';
import mxCircleLayout from './view/layout/layout/mxCircleLayout';
import mxCompactTreeLayout from './view/layout/layout/mxCompactTreeLayout';
import mxCompositeLayout from './view/layout/layout/mxCompositeLayout';
import mxEdgeLabelLayout from './view/layout/layout/mxEdgeLabelLayout';
import mxFastOrganicLayout from './view/layout/layout/mxFastOrganicLayout';
import mxGraphLayout from './view/layout/layout/mxGraphLayout';
import mxParallelEdgeLayout from './view/layout/layout/mxParallelEdgeLayout';
import mxPartitionLayout from './view/layout/layout/mxPartitionLayout';
import mxRadialTreeLayout from './view/layout/layout/mxRadialTreeLayout';
import mxStackLayout from './view/layout/layout/mxStackLayout';
import mxHierarchicalEdgeStyle from './layout/hierarchical/mxHierarchicalEdgeStyle';
import mxHierarchicalLayout from './layout/hierarchical/mxHierarchicalLayout';
import mxSwimlaneLayout from './layout/hierarchical/mxSwimlaneLayout';
import mxHierarchicalEdgeStyle from './view/layout/layout/hierarchical/mxHierarchicalEdgeStyle';
import mxHierarchicalLayout from './view/layout/layout/hierarchical/mxHierarchicalLayout';
import mxSwimlaneLayout from './view/layout/layout/hierarchical/mxSwimlaneLayout';
import mxGraphAbstractHierarchyCell from './layout/hierarchical/model/mxGraphAbstractHierarchyCell';
import mxGraphHierarchyEdge from './layout/hierarchical/model/mxGraphHierarchyEdge';
import mxGraphHierarchyModel from './layout/hierarchical/model/mxGraphHierarchyModel';
import mxGraphHierarchyNode from './layout/hierarchical/model/mxGraphHierarchyNode';
import mxSwimlaneModel from './layout/hierarchical/model/mxSwimlaneModel';
import mxGraphAbstractHierarchyCell from './view/layout/layout/hierarchical/model/mxGraphAbstractHierarchyCell';
import mxGraphHierarchyEdge from './view/layout/layout/hierarchical/model/mxGraphHierarchyEdge';
import mxGraphHierarchyModel from './view/layout/layout/hierarchical/model/mxGraphHierarchyModel';
import mxGraphHierarchyNode from './view/layout/layout/hierarchical/model/mxGraphHierarchyNode';
import mxSwimlaneModel from './view/layout/layout/hierarchical/model/mxSwimlaneModel';
import mxCoordinateAssignment from './layout/hierarchical/stage/mxCoordinateAssignment';
import mxHierarchicalLayoutStage from './layout/hierarchical/stage/mxHierarchicalLayoutStage';
import mxMedianHybridCrossingReduction from './layout/hierarchical/stage/mxMedianHybridCrossingReduction';
import mxMinimumCycleRemover from './layout/hierarchical/stage/mxMinimumCycleRemover';
import mxSwimlaneOrdering from './layout/hierarchical/stage/mxSwimlaneOrdering';
import mxCoordinateAssignment from './view/layout/layout/hierarchical/stage/mxCoordinateAssignment';
import mxHierarchicalLayoutStage from './view/layout/layout/hierarchical/stage/mxHierarchicalLayoutStage';
import mxMedianHybridCrossingReduction from './view/layout/layout/hierarchical/stage/mxMedianHybridCrossingReduction';
import mxMinimumCycleRemover from './view/layout/layout/hierarchical/stage/mxMinimumCycleRemover';
import mxSwimlaneOrdering from './view/layout/layout/hierarchical/stage/mxSwimlaneOrdering';
import mxCellCodec from './serialization/mxCellCodec';
import mxChildChangeCodec from './serialization/mxChildChangeCodec';
import mxCodec from './serialization/mxCodec';
import mxCodecRegistry from './serialization/mxCodecRegistry';
import mxDefaultKeyHandlerCodec from './serialization/mxDefaultKeyHandlerCodec';
import mxDefaultPopupMenuCodec from './serialization/mxDefaultPopupMenuCodec';
import mxDefaultToolbarCodec from './serialization/mxDefaultToolbarCodec';
import mxEditorCodec from './serialization/mxEditorCodec';
import mxGenericChangeCodec from './serialization/mxGenericChangeCodec';
import mxGraphCodec from './serialization/mxGraphCodec';
import mxGraphViewCodec from './serialization/mxGraphViewCodec';
import mxModelCodec from './serialization/mxModelCodec';
import mxObjectCodec from './serialization/mxObjectCodec';
import mxRootChangeCodec from './serialization/mxRootChangeCodec';
import mxStylesheetCodec from './serialization/mxStylesheetCodec';
import mxTerminalChangeCodec from './serialization/mxTerminalChangeCodec';
import mxCellCodec from './util/serialization/mxCellCodec';
import mxChildChangeCodec from './util/serialization/mxChildChangeCodec';
import mxCodec from './util/serialization/mxCodec';
import mxCodecRegistry from './util/serialization/mxCodecRegistry';
import mxDefaultKeyHandlerCodec from './util/serialization/mxDefaultKeyHandlerCodec';
import mxDefaultPopupMenuCodec from './util/serialization/mxDefaultPopupMenuCodec';
import mxDefaultToolbarCodec from './util/serialization/mxDefaultToolbarCodec';
import mxEditorCodec from './util/serialization/mxEditorCodec';
import mxGenericChangeCodec from './util/serialization/mxGenericChangeCodec';
import mxGraphCodec from './util/serialization/mxGraphCodec';
import mxGraphViewCodec from './util/serialization/mxGraphViewCodec';
import mxModelCodec from './util/serialization/mxModelCodec';
import mxObjectCodec from './util/serialization/mxObjectCodec';
import mxRootChangeCodec from './util/serialization/mxRootChangeCodec';
import mxStylesheetCodec from './util/serialization/mxStylesheetCodec';
import mxTerminalChangeCodec from './util/serialization/mxTerminalChangeCodec';
import mxActor from './shape/mxActor';
import mxLabel from './shape/mxLabel';
import mxShape from './shape/mxShape';
import mxSwimlane from './shape/mxSwimlane';
import mxText from './shape/mxText';
import mxTriangle from './shape/mxTriangle';
import Actor from './view/geometry/shape/Actor';
import Label from './view/geometry/shape/Label';
import Shape from './view/geometry/shape/Shape';
import Swimlane from './view/geometry/shape/Swimlane';
import mxText from './view/geometry/shape/mxText';
import Triangle from './view/geometry/shape/Triangle';
import mxArrow from './shape/edge/mxArrow';
import mxArrowConnector from './shape/edge/mxArrowConnector';
import mxConnector from './shape/edge/mxConnector';
import mxLine from './shape/edge/mxLine';
import mxMarker from './shape/edge/mxMarker';
import mxPolyline from './shape/edge/mxPolyline';
import mxArrow from './view/geometry/shape/edge/mxArrow';
import mxArrowConnector from './view/geometry/shape/edge/mxArrowConnector';
import mxConnector from './view/geometry/shape/edge/mxConnector';
import mxLine from './view/geometry/shape/edge/mxLine';
import mxMarker from './view/geometry/shape/edge/mxMarker';
import mxPolyline from './view/geometry/shape/edge/mxPolyline';
import mxCloud from './shape/node/mxCloud';
import mxCylinder from './shape/node/mxCylinder';
import mxDoubleEllipse from './shape/node/mxDoubleEllipse';
import mxEllipse from './shape/node/mxEllipse';
import mxHexagon from './shape/node/mxHexagon';
import mxImageShape from './shape/node/mxImageShape';
import mxRectangleShape from './shape/node/mxRectangleShape';
import mxRhombus from './shape/node/mxRhombus';
import mxStencil from './shape/node/mxStencil';
import mxStencilRegistry from './shape/node/mxStencilRegistry';
import Cloud from './view/geometry/shape/node/Cloud';
import Cylinder from './view/geometry/shape/node/Cylinder';
import DoubleEllipse from './view/geometry/shape/node/DoubleEllipse';
import Ellipse from './view/geometry/shape/node/Ellipse';
import Hexagon from './view/geometry/shape/node/Hexagon';
import ImageShape from './view/geometry/shape/node/ImageShape';
import RectangleShape from './view/geometry/shape/node/RectangleShape';
import Rhombus from './view/geometry/shape/node/Rhombus';
import Stencil from './view/geometry/shape/node/Stencil';
import StencilRegistry from './view/geometry/shape/node/StencilRegistry';
import * as mxConstants from './util/mxConstants';
import mxGuide from './util/mxGuide';
import mxResources from './util/mxResources';
import mxUtils from './util/mxUtils';
import * as mxCloneUtils from './util/mxCloneUtils';
import * as mxDomUtils from './util/mxDomUtils';
import * as mxEventUtils from './util/mxEventUtils';
import * as mxGestureUtils from './util/mxGestureUtils';
import * as mxStringUtils from './util/mxStringUtils';
import * as mxXmlUtils from './util/mxXmlUtils';
import * as mxConstants from './util/Constants';
import mxGuide from './util/Guide';
import Resources from './util/Resources';
import utils from './util/Utils';
import * as mxCloneUtils from './util/CloneUtils';
import * as mxDomUtils from './util/DomUtils';
import * as mxEventUtils from './util/EventUtils';
import * as mxGestureUtils from './util/GestureUtils';
import * as mxStringUtils from './util/StringUtils';
import * as mxXmlUtils from './util/XmlUtils';
import mxAnimation from './util/animate/mxAnimation';
import mxEffects from './util/animate/mxEffects';
@ -123,27 +123,27 @@ import mxAbstractCanvas2D from './util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from './util/canvas/mxSvgCanvas2D';
import mxXmlCanvas2D from './util/canvas/mxXmlCanvas2D';
import mxDictionary from './util/datatypes/mxDictionary';
import mxGeometry from './util/datatypes/mxGeometry';
import mxObjectIdentity from './util/datatypes/mxObjectIdentity';
import mxPoint from './util/datatypes/mxPoint';
import mxRectangle from './util/datatypes/mxRectangle';
import mxDictionary from './util/mxDictionary';
import Geometry from './view/geometry/Geometry';
import mxObjectIdentity from './util/mxObjectIdentity';
import Point from './view/geometry/Point';
import Rectangle from './view/geometry/Rectangle';
import mxEdgeStyle from './util/datatypes/style/mxEdgeStyle';
import mxPerimeter from './util/datatypes/style/mxPerimeter';
import mxStyleRegistry from './util/datatypes/style/mxStyleRegistry';
import mxStylesheet from './util/datatypes/style/mxStylesheet';
import EdgeStyle from './view/style/EdgeStyle';
import Perimeter from './view/style/Perimeter';
import StyleRegistry from './view/style/StyleRegistry';
import Stylesheet from './view/style/Stylesheet';
import mxDivResizer from './util/dom/mxDivResizer';
import * as mxDomHelpers from './util/dom/mxDomHelpers';
import mxDragSource from './util/drag_pan/mxDragSource';
import mxPanningManager from './util/drag_pan/mxPanningManager';
import DragSource from './view/drag_drop/DragSource';
import PanningManager from './view/panning/PanningManager';
import mxEvent from './util/event/mxEvent';
import mxEventObject from './util/event/mxEventObject';
import mxEventSource from './util/event/mxEventSource';
import mxMouseEvent from './util/event/mxMouseEvent';
import InternalEvent from './view/event/InternalEvent';
import EventObject from './view/event/EventObject';
import EventSource from './view/event/EventSource';
import InternalMouseEvent from './view/event/InternalMouseEvent';
import mxForm from './util/gui/mxForm';
import mxLog from './util/gui/mxLog';
@ -151,9 +151,9 @@ import mxPopupMenu from './util/gui/mxPopupMenu';
import mxToolbar from './util/gui/mxToolbar';
import mxWindow from './util/gui/mxWindow';
import mxImage from './util/image/mxImage';
import mxImageBundle from './util/image/mxImageBundle';
import mxImageExport from './util/image/mxImageExport';
import Image from './view/image/Image';
import ImageBundle from './view/image/ImageBundle';
import ImageExport from './view/image/ImageExport';
import mxUrlConverter from './util/network/mxUrlConverter';
import mxXmlRequest from './util/network/mxXmlRequest';
@ -161,29 +161,29 @@ import mxXmlRequest from './util/network/mxXmlRequest';
import mxAutoSaveManager from './util/storage/mxAutoSaveManager';
import mxClipboard from './util/storage/mxClipboard';
import mxUndoableEdit from './util/undo/mxUndoableEdit';
import mxUndoManager from './util/undo/mxUndoManager';
import mxUndoableEdit from './view/model/mxUndoableEdit';
import mxUndoManager from './util/mxUndoManager';
import mxCell from './view/cell/mxCell';
import mxCellEditor from './view/cell/mxCellEditor';
import mxCellOverlay from './view/cell/mxCellOverlay';
import mxCellPath from './view/cell/mxCellPath';
import mxCellRenderer from './view/cell/mxCellRenderer';
import mxCellState from './view/cell/mxCellState';
import mxCellStatePreview from './view/cell/mxCellStatePreview';
import mxTemporaryCellStates from './view/cell/mxTemporaryCellStates';
import Cell from './view/cell/datatypes/Cell';
import CellEditor from './view/editing/CellEditor';
import CellOverlay from './view/cell/CellOverlay';
import CellPath from './view/cell/datatypes/CellPath';
import CellRenderer from './view/cell/CellRenderer';
import CellState from './view/cell/datatypes/CellState';
import CellStatePreview from './view/cell/CellStatePreview';
import TemporaryCellStates from './view/cell/TemporaryCellStates';
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 mxGraphModel from './view/graph/mxGraphModel';
import mxGraphSelectionModel from './view/graph/mxGraphSelectionModel';
import mxGraphView from './view/graph/mxGraphView';
import mxLayoutManager from './view/graph/mxLayoutManager';
import mxOutline from './view/graph/mxOutline';
import mxPrintPreview from './view/graph/mxPrintPreview';
import mxSwimlaneManager from './view/graph/mxSwimlaneManager';
import graph from './view/Graph';
import Model from './view/model/Model';
import mxGraphSelectionModel from './view/selection/mxGraphSelectionModel';
import GraphView from './view/view/GraphView';
import LayoutManager from './view/layout/LayoutManager';
import Outline from './view/Outline';
import PrintPreview from './view/printing/PrintPreview';
import SwimlaneManager from './view/layout/SwimlaneManager';
import '../css/common.css';
@ -192,60 +192,60 @@ export default {
mxLog,
mxObjectIdentity,
mxDictionary,
mxResources,
mxPoint,
mxRectangle,
mxResources: Resources,
mxPoint: Point,
mxRectangle: Rectangle,
mxEffects,
mxUtils,
mxUtils: utils,
mxConstants,
mxEventObject,
mxMouseEvent,
mxEventSource,
mxEvent,
mxEventObject: EventObject,
mxMouseEvent: InternalMouseEvent,
mxEventSource: EventSource,
mxEvent: InternalEvent,
mxXmlRequest,
mxClipboard,
mxWindow,
mxForm,
mxImage,
mxImage: Image,
mxDivResizer,
mxDragSource,
mxDragSource: DragSource,
mxToolbar,
mxUndoableEdit,
mxUndoManager,
mxUrlConverter,
mxPanningManager,
mxPanningManager: PanningManager,
mxPopupMenu,
mxAutoSaveManager,
mxAnimation,
mxMorphing,
mxImageBundle,
mxImageExport,
mxImageBundle: ImageBundle,
mxImageExport: ImageExport,
mxAbstractCanvas2D,
mxXmlCanvas2D,
mxSvgCanvas2D,
mxGuide,
mxShape,
mxStencil,
mxStencilRegistry,
mxShape: Shape,
mxStencil: Stencil,
mxStencilRegistry: StencilRegistry,
mxMarker,
mxActor,
mxCloud,
mxRectangleShape,
mxEllipse,
mxDoubleEllipse,
mxRhombus,
mxActor: Actor,
mxCloud: Cloud,
mxRectangleShape: RectangleShape,
mxEllipse: Ellipse,
mxDoubleEllipse: DoubleEllipse,
mxRhombus: Rhombus,
mxPolyline,
mxArrow,
mxArrowConnector,
mxText,
mxTriangle,
mxHexagon,
mxTriangle: Triangle,
mxHexagon: Hexagon,
mxLine,
mxImageShape,
mxLabel,
mxCylinder,
mxImageShape: ImageShape,
mxLabel: Label,
mxCylinder: Cylinder,
mxConnector,
mxSwimlane,
mxSwimlane: Swimlane,
mxGraphLayout,
mxStackLayout,
mxPartitionLayout,
@ -268,33 +268,33 @@ export default {
mxSwimlaneOrdering,
mxHierarchicalLayout,
mxSwimlaneLayout,
mxGraphModel,
mxCell,
mxGeometry,
mxCellPath,
mxPerimeter,
mxPrintPreview,
mxStylesheet,
mxCellState,
mxGraphModel: Model,
mxCell: Cell,
mxGeometry: Geometry,
mxCellPath: CellPath,
mxPerimeter: Perimeter,
mxPrintPreview: PrintPreview,
mxStylesheet: Stylesheet,
mxCellState: CellState,
mxGraphSelectionModel,
mxCellEditor,
mxCellRenderer,
mxEdgeStyle,
mxStyleRegistry,
mxGraphView,
mxGraph,
mxCellOverlay,
mxOutline,
mxMultiplicity,
mxLayoutManager,
mxSwimlaneManager,
mxTemporaryCellStates,
mxCellStatePreview,
mxCellEditor: CellEditor,
mxCellRenderer: CellRenderer,
mxEdgeStyle: EdgeStyle,
mxStyleRegistry: StyleRegistry,
mxGraphView: GraphView,
mxGraph: graph,
mxCellOverlay: CellOverlay,
mxOutline: Outline,
mxMultiplicity: Multiplicity,
mxLayoutManager: LayoutManager,
mxSwimlaneManager: SwimlaneManager,
mxTemporaryCellStates: TemporaryCellStates,
mxCellStatePreview: CellStatePreview,
mxConnectionConstraint,
mxGraphHandler,
mxPanningHandler,
mxPopupMenuHandler,
mxCellMarker,
mxGraphHandler: GraphHandler,
mxPanningHandler: PanningHandler,
mxPopupMenuHandler: PopupMenuHandler,
mxCellMarker: CellMarker,
mxSelectionCellsHandler,
mxConnectionHandler,
mxConstraintHandler,
@ -305,7 +305,7 @@ export default {
mxElbowEdgeHandler,
mxEdgeSegmentHandler,
mxKeyHandler,
mxTooltipHandler,
mxTooltipHandler: TooltipHandler,
mxCellTracker,
mxCellHighlight,
mxDefaultKeyHandler,
@ -335,15 +335,15 @@ export default {
mxStringUtils,
mxXmlUtils,
mxDomHelpers,
mxCellAttributeChange,
mxChildChange,
mxCollapseChange,
mxCurrentRootChange,
mxGeometryChange,
mxRootChange,
mxSelectionChange,
mxStyleChange,
mxTerminalChange,
mxValueChange,
mxVisibleChange,
mxCellAttributeChange: CellAttributeChange,
mxChildChange: ChildChange,
mxCollapseChange: CollapseChange,
mxCurrentRootChange: CurrentRootChange,
mxGeometryChange: GeometryChange,
mxRootChange: RootChange,
mxSelectionChange: SelectionChange,
mxStyleChange: StyleChange,
mxTerminalChange: TerminalChange,
mxValueChange: ValueChange,
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 = {
[id: string]: mxCell;
[id: string]: Cell;
};
export type FilterFunction = (cell: mxCell) => boolean;
export type FilterFunction = (cell: Cell) => boolean;
export type UndoableChange = {
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

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

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 mxPoint from './datatypes/mxPoint';
import { TOOLTIP_VERTICAL_OFFSET } from './mxConstants';
import DragSource from '../view/drag_drop/DragSource';
import Point from '../view/geometry/Point';
import { TOOLTIP_VERTICAL_OFFSET } from './Constants';
/**
* Function: makeDraggable
@ -82,8 +82,8 @@ export const makeDraggable = (
highlightDropTargets,
getDropTarget
) => {
const dragSource = new mxDragSource(element, funct);
dragSource.dragOffset = new mxPoint(
const dragSource = new DragSource(element, funct);
dragSource.dragOffset = new Point(
dx != null ? dx : 0,
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
*/
import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './mxConstants';
import mxPoint from './datatypes/mxPoint';
import mxPolyline from '../shape/edge/mxPolyline';
import mxCellState from '../view/cell/mxCellState';
import mxShape from '../shape/mxShape';
import mxRectangle from './datatypes/mxRectangle';
import mxGraph from '../view/graph/mxGraph';
import mxEventObject from './event/mxEventObject';
import mxGraphView from '../view/graph/mxGraphView';
import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './Constants';
import Point from '../view/geometry/Point';
import mxPolyline from '../view/geometry/shape/edge/mxPolyline';
import CellState from '../view/cell/datatypes/CellState';
import Shape from '../view/geometry/shape/Shape';
import Rectangle from '../view/geometry/Rectangle';
import graph from '../view/Graph';
import EventObject from '../view/event/EventObject';
import GraphView from '../view/view/GraphView';
/**
* Class: mxGuide
@ -24,8 +24,8 @@ import mxGraphView from '../view/graph/mxGraphView';
*
* Constructs a new guide object.
*/
class mxGuide {
constructor(graph: mxGraph, states: mxCellState[]) {
class Guide {
constructor(graph: graph, states: CellState[]) {
this.graph = graph;
this.setStates(states);
}
@ -36,7 +36,7 @@ class mxGuide {
* Reference to the enclosing <mxGraph> instance.
*/
// graph: mxGraph;
graph: mxGraph;
graph: graph;
/**
* Variable: states
@ -44,7 +44,7 @@ class mxGuide {
* Contains the <mxCellStates> that are used for alignment.
*/
// states: mxCellState[];
states: mxCellState[] | null = null;
states: CellState[] | null = null;
/**
* Variable: horizontal
@ -68,7 +68,7 @@ class mxGuide {
* Holds the <mxShape> for the horizontal guide.
*/
// guideX: mxShape;
guideX: mxShape | null = null;
guideX: Shape | null = null;
/**
* Variable: vertical
@ -76,7 +76,7 @@ class mxGuide {
* Holds the <mxShape> for the vertical guide.
*/
// guideY: mxShape;
guideY: mxShape | null = null;
guideY: Shape | null = null;
/**
* Variable: rounded
@ -98,7 +98,7 @@ class mxGuide {
* Sets the <mxCellStates> that should be used for alignment.
*/
// setStates(states: mxCellState[]): void;
setStates(states: mxCellState[]): void {
setStates(states: CellState[]): void {
this.states = states;
}
@ -109,7 +109,7 @@ class mxGuide {
* implementation always returns true.
*/
// isEnabledForEvent(evt: Event): boolean;
isEnabledForEvent(evt: mxEventObject | null = null): boolean {
isEnabledForEvent(evt: EventObject | null = null): boolean {
return true;
}
@ -118,8 +118,7 @@ class mxGuide {
*
* Returns the tolerance for the guides. Default value is gridSize / 2.
*/
// getGuideTolerance(): number;
getGuideTolerance(gridEnabled: boolean = false) {
getGuideTolerance(gridEnabled: boolean = false): number {
return gridEnabled && this.graph.gridEnabled
? this.graph.gridSize / 2
: this.tolerance;
@ -136,8 +135,7 @@ class mxGuide {
*
* horizontal - Boolean that specifies which guide should be created.
*/
// createGuideShape(horizontal: boolean): mxPolyline;
createGuideShape(horizontal: boolean = false) {
createGuideShape(horizontal: boolean = false): mxPolyline {
// TODO: Should vertical guides be supported here?? ============================
const guide = new mxPolyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH);
guide.isDashed = true;
@ -148,8 +146,7 @@ class mxGuide {
* Returns true if the given state should be ignored.
* @param state
*/
// isStateIgnored(state: mxCellState): boolean;
isStateIgnored(state: mxCellState | null = null) {
isStateIgnored(state: CellState | null = null): boolean {
return false;
}
@ -158,13 +155,12 @@ class mxGuide {
*
* Moves the <bounds> by the given <mxPoint> and returnt the snapped point.
*/
// move(bounds: mxRectangle, delta: mxPoint, gridEnabled: boolean, clone: boolean): mxPoint;
move(
bounds: mxRectangle | null = null,
delta: mxPoint,
bounds: Rectangle | null = null,
delta: Point,
gridEnabled: boolean = false,
clone: boolean = false
) {
): Point {
if (
this.states != null &&
(this.horizontal || this.vertical) &&
@ -177,10 +173,10 @@ class mxGuide {
b.x += delta.x;
b.y += delta.y;
let overrideX = false;
let stateX: mxCellState | null = null;
let stateX: CellState | null = null;
let valueX = null;
let overrideY = false;
let stateY: mxCellState | null = null;
let stateY: CellState | null = null;
let valueY = null;
let ttX = tt;
let ttY = tt;
@ -192,7 +188,7 @@ class mxGuide {
const middle = b.getCenterY();
// 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;
if (centerAlign && Math.abs(x - center) < ttX) {
@ -231,7 +227,7 @@ class mxGuide {
};
// 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;
if (centerAlign && Math.abs(y - middle) < ttY) {
@ -323,13 +319,13 @@ class mxGuide {
if (minY != null && maxY != null) {
this.guideX.points = [
new mxPoint(valueX, minY),
new mxPoint(valueX, maxY),
new Point(valueX, minY),
new Point(valueX, maxY),
];
} else {
this.guideX.points = [
new mxPoint(valueX, -this.graph.panDy),
new mxPoint(valueX, c.scrollHeight - 3 - this.graph.panDy),
new Point(valueX, -this.graph.panDy),
new Point(valueX, c.scrollHeight - 3 - this.graph.panDy),
];
}
@ -355,13 +351,13 @@ class mxGuide {
if (minX != null && maxX != null) {
this.guideY.points = [
new mxPoint(minX, valueY),
new mxPoint(maxX, valueY),
new Point(minX, valueY),
new Point(maxX, valueY),
];
} else {
this.guideY.points = [
new mxPoint(-this.graph.panDx, valueY),
new mxPoint(c.scrollWidth - 3 - this.graph.panDx, valueY),
new Point(-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)
*/
getDelta(
bounds: mxRectangle,
stateX: mxCellState | null = null,
bounds: Rectangle,
stateX: CellState | null = null,
dx: number,
stateY: mxCellState | null = null,
stateY: CellState | null = null,
dy: number
): mxPoint {
const s = (<mxGraphView>this.graph.view).scale;
): Point {
const s = (<GraphView>this.graph.view).scale;
if (this.rounded || (stateX != null && stateX.cell == null)) {
dx = Math.round((bounds.x + dx) / s) * s - bounds.x;
}
if (this.rounded || (stateY != null && stateY.cell == null)) {
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.
*/
// 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;
}
@ -411,7 +408,6 @@ class mxGuide {
*
* Hides all current guides.
*/
// hide(): void;
hide(): void {
this.setVisible(false);
}
@ -421,7 +417,6 @@ class mxGuide {
*
* Shows or hides the current guides.
*/
// setVisible(visible: boolean): void;
setVisible(visible: boolean): void {
if (this.guideX != null) {
(<SVGElement>this.guideX.node).style.visibility = visible
@ -440,7 +435,6 @@ class mxGuide {
*
* Destroys all resources that this object uses.
*/
// destroy(): void;
destroy(): void {
if (this.guideX != null) {
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
*/
import mxClient from '../mxClient';
import { NONE } from './mxConstants';
import { NONE } from './Constants';
/**
* Class: mxResources
@ -58,7 +58,7 @@ import { NONE } from './mxConstants';
* To load these files asynchronously, set <mxLoadResources> to false
* before loading mxClient.js and use <mxResources.loadResources> instead.
*/
const mxResources = {
const Resources = {
/*
* Variable: resources
*
@ -129,10 +129,10 @@ const mxResources = {
*/
getDefaultBundle: (basename, lan) => {
if (
mxResources.loadDefaultBundle ||
!mxResources.isLanguageSupported(lan)
Resources.loadDefaultBundle ||
!Resources.isLanguageSupported(lan)
) {
return basename + (mxResources.extension ?? mxClient.mxResourceExtension);
return basename + (Resources.extension ?? mxClient.mxResourceExtension);
}
return null;
},
@ -167,12 +167,12 @@ const mxResources = {
}
if (
mxResources.loadSpecialBundle &&
mxResources.isLanguageSupported(lan) &&
Resources.loadSpecialBundle &&
Resources.isLanguageSupported(lan) &&
lan != mxClient.defaultLanguage
) {
return `${basename}_${lan}${
mxResources.extension ?? mxClient.mxResourceExtension
Resources.extension ?? mxClient.mxResourceExtension
}`;
}
return null;
@ -209,16 +209,16 @@ const mxResources = {
: NONE;
if (lan !== NONE) {
const defaultBundle = mxResources.getDefaultBundle(basename, lan);
const specialBundle = mxResources.getSpecialBundle(basename, lan);
const defaultBundle = Resources.getDefaultBundle(basename, lan);
const specialBundle = Resources.getSpecialBundle(basename, lan);
const loadSpecialBundle = () => {
if (specialBundle != null) {
if (callback) {
mxUtils.get(
utils.get(
specialBundle,
(req) => {
mxResources.parse(req.getText());
Resources.parse(req.getText());
callback();
},
() => {
@ -227,10 +227,10 @@ const mxResources = {
);
} else {
try {
const req = mxUtils.load(specialBundle);
const req = utils.load(specialBundle);
if (req.isReady()) {
mxResources.parse(req.getText());
Resources.parse(req.getText());
}
} catch (e) {
// ignore
@ -243,10 +243,10 @@ const mxResources = {
if (defaultBundle != null) {
if (callback) {
mxUtils.get(
utils.get(
defaultBundle,
(req) => {
mxResources.parse(req.getText());
Resources.parse(req.getText());
loadSpecialBundle();
},
() => {
@ -255,10 +255,10 @@ const mxResources = {
);
} else {
try {
const req = mxUtils.load(defaultBundle);
const req = utils.load(defaultBundle);
if (req.isReady()) {
mxResources.parse(req.getText());
Resources.parse(req.getText());
}
loadSpecialBundle();
@ -299,9 +299,9 @@ const mxResources = {
if (this.resourcesEncoded) {
value = value.replace(/\\(?=u[a-fA-F\d]{4})/g, '%');
mxResources.resources[key] = unescape(value);
Resources.resources[key] = unescape(value);
} else {
mxResources.resources[key] = value;
Resources.resources[key] = value;
}
}
}
@ -337,7 +337,7 @@ const mxResources = {
* defaultValue - Optional string that specifies the default return value.
*/
get: (key, params, defaultValue) => {
let value = mxResources.resources[key];
let value = Resources.resources[key];
// Applies the default value if no resource was found
if (value == null) {
@ -346,7 +346,7 @@ const mxResources = {
// Replaces the placeholders with the values in the array
if (value != null && params != null) {
value = mxResources.replacePlaceholders(value, params);
value = Resources.replacePlaceholders(value, params);
}
return value;
@ -401,10 +401,10 @@ const mxResources = {
* callback - Callback function for asynchronous loading.
*/
loadResources: (callback) => {
mxResources.add(`${mxClient.basePath}/resources/editor`, null, () => {
mxResources.add(`${mxClient.basePath}/resources/graph`, null, callback);
Resources.add(`${mxClient.basePath}/resources/editor`, null, () => {
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 { getTextContent } from './mxDomUtils';
import { NODETYPE_TEXT } from './Constants';
import { getTextContent } from './DomUtils';
/**
* Function: ltrim

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

@ -29,17 +29,17 @@ import {
NODETYPE_ELEMENT,
NONE,
PAGE_FORMAT_A4_PORTRAIT,
} from './mxConstants';
import mxPoint from './datatypes/mxPoint';
import mxDictionary from './datatypes/mxDictionary';
import mxCellPath from '../view/cell/mxCellPath';
import mxRectangle from './datatypes/mxRectangle';
import { getFunctionName } from './mxStringUtils';
import { getOuterHtml } from './mxDomUtils';
import mxCellState from '../view/cell/mxCellState';
import mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import mxGraph from '../view/graph/mxGraph';
} from './Constants';
import Point from '../view/geometry/Point';
import mxDictionary from './mxDictionary';
import CellPath from '../view/cell/datatypes/CellPath';
import Rectangle from '../view/geometry/Rectangle';
import { getFunctionName } from './StringUtils';
import { getOuterHtml } from './DomUtils';
import CellState from '../view/cell/datatypes/CellState';
import Cell from '../view/cell/datatypes/Cell';
import Model from '../view/model/Model';
import graph from '../view/Graph';
import type {
CellStateStyles,
@ -47,7 +47,7 @@ import type {
StyleProperties,
StyleValue,
} from '../types';
import mxCellArray from "../view/cell/mxCellArray";
import CellArray from "../view/cell/datatypes/CellArray";
/**
* Class: mxUtils
@ -65,7 +65,7 @@ import mxCellArray from "../view/cell/mxCellArray";
* mxUtils.error('Browser is not supported!', 200, false);
* (end)
*/
const mxUtils = {
const utils = {
/* Variable: errorResource
*
* Specifies the resource key for the title of the error window. If the
@ -282,14 +282,14 @@ export const getDocumentSize = () => {
const d = document.documentElement;
try {
return new mxRectangle(
return new Rectangle(
0,
0,
b.clientWidth ?? d.clientWidth,
Math.max(b.clientHeight ?? 0, d.clientHeight)
);
} 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.
* 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)) {
return false;
}
@ -668,9 +668,9 @@ export const arcToCurves = (
* rotation center is given then the center of rect is used.
*/
export const getBoundingBox = (
rect: mxRectangle | null,
rect: Rectangle | null,
rotation: number,
cx: mxPoint | null = null
cx: Point | null = null
) => {
let result = null;
@ -682,22 +682,22 @@ export const getBoundingBox = (
cx =
cx != null
? 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 p2 = new mxPoint(rect.x + rect.width, rect.y);
let p3 = new mxPoint(p2.x, rect.y + rect.height);
let p4 = new mxPoint(rect.x, p3.y);
let p1 = new Point(rect.x, rect.y);
let p2 = new Point(rect.x + rect.width, rect.y);
let p3 = new Point(p2.x, rect.y + rect.height);
let p4 = new Point(rect.x, p3.y);
p1 = getRotatedPoint(p1, cos, sin, cx);
p2 = getRotatedPoint(p2, cos, sin, cx);
p3 = getRotatedPoint(p3, cos, sin, cx);
p4 = getRotatedPoint(p4, cos, sin, cx);
result = new mxRectangle(p1.x, p1.y, 0, 0);
result.add(new mxRectangle(p2.x, p2.y, 0, 0));
result.add(new mxRectangle(p3.x, p3.y, 0, 0));
result.add(new mxRectangle(p4.x, p4.y, 0, 0));
result = new Rectangle(p1.x, p1.y, 0, 0);
result.add(new Rectangle(p2.x, p2.y, 0, 0));
result.add(new Rectangle(p3.x, p3.y, 0, 0));
result.add(new Rectangle(p4.x, p4.y, 0, 0));
}
return result;
@ -709,10 +709,10 @@ export const getBoundingBox = (
* Rotates the given point by the given cos and sin.
*/
export const getRotatedPoint = (
pt: mxPoint,
pt: Point,
cos: number,
sin: number,
c = new mxPoint()
c = new Point()
) => {
const x = pt.x - c.x;
const y = pt.y - c.y;
@ -720,7 +720,7 @@ export const getRotatedPoint = (
const x1 = x * cos - y * 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.
*/
export const getPortConstraints = (
terminal: mxCellState,
edge: mxCellState,
terminal: CellState,
edge: CellState,
source: boolean,
defaultValue: any
) => {
@ -877,7 +877,7 @@ export const reversePortConstraints = (constraint: number) => {
* the specified coordinate pair.
*/
export const findNearestSegment = (
state: mxCellState,
state: CellState,
x: number,
y: number
) => {
@ -913,8 +913,8 @@ export const findNearestSegment = (
* rectangle according to the respective styles in style.
*/
export const getDirectedBounds = (
rect: mxRectangle,
m: mxRectangle,
rect: Rectangle,
m: Rectangle,
style: CellStateStyles | null,
flipH: boolean,
flipV: boolean
@ -946,7 +946,7 @@ export const getDirectedBounds = (
m.height = tmp;
}
const m2 = mxRectangle.fromRectangle(m);
const m2 = Rectangle.fromRectangle(m);
if (d === DIRECTION_SOUTH) {
m2.y = m.x;
@ -965,7 +965,7 @@ export const getDirectedBounds = (
m2.height = m.x;
}
return new mxRectangle(
return new Rectangle(
rect.x + m2.x,
rect.y + m2.y,
rect.width - m2.width - m2.x,
@ -980,9 +980,9 @@ export const getDirectedBounds = (
* points and the line between center and point.
*/
export const getPerimeterPoint = (
pts: mxPoint[],
center: mxPoint,
point: mxPoint
pts: Point[],
center: Point,
point: Point
) => {
let min = null;
@ -1024,9 +1024,9 @@ export const getPerimeterPoint = (
* p2 - <mxPoint> that represents the second point of the segment.
*/
export const rectangleIntersectsSegment = (
bounds: mxRectangle,
p1: mxPoint,
p2: mxPoint
bounds: Rectangle,
p1: Point,
p2: Point
) => {
const top = bounds.y;
const left = bounds.x;
@ -1102,7 +1102,7 @@ export const rectangleIntersectsSegment = (
* x - X-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 (
bounds.x <= 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.
* 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 th = a.height;
let rw = b.width;
@ -1164,7 +1164,7 @@ export const intersects = (a: mxRectangle, b: mxRectangle) => {
* max - Optional max size of the hostpot.
*/
export const intersectsHotspot = (
state: mxCellState,
state: CellState,
x: number,
y: number,
hotspot: number,
@ -1201,14 +1201,14 @@ export const intersectsHotspot = (
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);
if (alpha != 0) {
const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha);
const cx = new mxPoint(state.getCenterX(), state.getCenterY());
const pt = getRotatedPoint(new mxPoint(x, y), cos, sin, cx);
const cx = new Point(state.getCenterX(), state.getCenterY());
const pt = getRotatedPoint(new Point(x, y), cos, sin, cx);
x = pt.x;
y = pt.y;
}
@ -1265,7 +1265,7 @@ export const getOffset = (container: HTMLElement, scrollOffset = false) => {
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)
.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 b = doc.body;
const d = doc.documentElement;
const result = new mxPoint();
const result = new Point();
let fixed = false;
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.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 y = y0 + ua * (y1 - y0);
return new mxPoint(x, y);
return new Point(x, y);
}
// No intersection
@ -1625,25 +1625,25 @@ export const createImage = (src: string) => {
* Sorts the given cells according to the order in the cell hierarchy.
* Ascending is optional and defaults to true.
*/
export const sortCells = (cells: mxCellArray, ascending = true): mxCellArray => {
const lookup = new mxDictionary<mxCell, string[]>();
export const sortCells = (cells: CellArray, ascending = true): CellArray => {
const lookup = new mxDictionary<Cell, string[]>();
cells.sort((o1, o2) => {
let p1 = lookup.get(o1);
if (p1 == null) {
p1 = mxCellPath.create(o1).split(mxCellPath.PATH_SEPARATOR);
p1 = CellPath.create(o1).split(CellPath.PATH_SEPARATOR);
lookup.put(o1, p1);
}
let p2 = lookup.get(o2);
if (p2 == null) {
p2 = mxCellPath.create(o2).split(mxCellPath.PATH_SEPARATOR);
p2 = CellPath.create(o2).split(CellPath.PATH_SEPARATOR);
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;
});
@ -1787,14 +1787,14 @@ export const removeAllStylenames = (style: string) => {
*
* Parameters:
*
* model - <mxGraphModel> to execute the transaction in.
* model - <Transactions> to execute the transaction in.
* cells - Array of <mxCells> to be updated.
* key - Key of the style to be changed.
* value - New value for the given key.
*/
export const setCellStyles = (
model: mxGraphModel,
cells: mxCell[],
model: Model,
cells: Cell[],
key: string,
value: any
) => {
@ -1890,15 +1890,15 @@ export const setStyle = (style: string | null, key: string, value: any) => {
*
* Parameters:
*
* model - <mxGraphModel> that contains the cells.
* model - <Transactions> that contains the cells.
* cells - Array of <mxCells> to change the style for.
* key - Key of the style to be changed.
* flag - Integer for the bit to be changed.
* value - Optional boolean value for the flag.
*/
export const setCellStyleFlags = (
model: mxGraphModel,
cells: mxCell[],
model: Model,
cells: Cell[],
key: string,
flag: number,
value: boolean
@ -2009,7 +2009,7 @@ export const getAlignmentAsPoint = (align: string, valign: string) => {
dy = -1;
}
return new mxPoint(dx, dy);
return new Point(dx, dy);
};
/**
@ -2093,7 +2093,7 @@ export const getSizeForString = (
document.body.appendChild(div);
// 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);
return size;
@ -2117,8 +2117,8 @@ export const getSizeForString = (
*/
export const getScaleForPageCount = (
pageCount: number,
graph: mxGraph,
pageFormat?: mxRectangle,
graph: graph,
pageFormat?: Rectangle,
border = 0
) => {
if (pageCount < 1) {
@ -2130,7 +2130,7 @@ export const getScaleForPageCount = (
pageFormat =
pageFormat != null
? pageFormat
: new mxRectangle(...PAGE_FORMAT_A4_PORTRAIT);
: new Rectangle(...PAGE_FORMAT_A4_PORTRAIT);
const availablePageWidth = pageFormat.width - border * 2;
const availablePageHeight = pageFormat.height - border * 2;
@ -2257,7 +2257,7 @@ export const getScaleForPageCount = (
* h - Optional height of the graph view.
*/
export const show = (
graph: mxGraph,
graph: graph,
doc: Document,
x0 = 0,
y0 = 0,
@ -2375,7 +2375,7 @@ export const show = (
*
* graph - <mxGraph> to be printed.
*/
export const printScreen = (graph: mxGraph) => {
export const printScreen = (graph: graph) => {
const wnd = window.open();
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) =>
!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 mxTemporaryCellStates from '../view/cell/mxTemporaryCellStates';
import mxCodec from '../serialization/mxCodec';
import { DIALECT_SVG, NS_SVG } from './mxConstants';
import Point from '../view/geometry/Point';
import TemporaryCellStates from '../view/cell/TemporaryCellStates';
import mxCodec from './serialization/mxCodec';
import { DIALECT_SVG, NS_SVG } from './Constants';
/**
* Function: createXmlDocument
@ -14,7 +14,7 @@ export const createXmlDocument = () => {
if (document.implementation && document.implementation.createDocument) {
doc = document.implementation.createDocument('', '', null);
} else if ('ActiveXObject' in window) {
doc = mxUtils.createMsXmlDocument();
doc = utils.createMsXmlDocument();
}
return doc;
@ -46,11 +46,11 @@ export const createMsXmlDocument = () => {
*
* (code)
* 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">'+
* '<mxCell style="strokeColor=blue;fillColor=red" parent="1" vertex="1">'+
* '<mxGeometry x="10" y="10" width="80" height="30" as="geometry"/>'+
* '</mxCell></MyObject></root></mxGraphModel>');
* '</mxCell></MyObject></root></Transactions>');
* (end)
*
* Parameters:
@ -106,10 +106,10 @@ export const getViewXml = (graph, scale, cells, x0, y0) => {
// Resets the translation
const translate = view.getTranslate();
view.translate = new mxPoint(x0, y0);
view.translate = new Point(x0, y0);
// 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 {
const enc = new mxCodec();
@ -195,14 +195,14 @@ export const getPrettyXml = (node, tab, indent, newline, ns) => {
if (node.nodeType === NODETYPE_DOCUMENT) {
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) {
let tmp = node.firstChild;
if (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;
}
}
@ -247,7 +247,7 @@ export const getPrettyXml = (node, tab, indent, newline, ns) => {
while (tmp != null) {
result.push(
mxUtils.getPrettyXml(tmp, tab, indent + tab, newline, ns)
utils.getPrettyXml(tmp, tab, indent + tab, newline, ns)
);
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
* Type definitions from the typed-mxgraph project
*/
import mxEventSource from '../event/mxEventSource';
import mxEventObject from '../event/mxEventObject';
import mxEvent from '../event/mxEvent';
import EventSource from '../../view/event/EventSource';
import EventObject from '../../view/event/EventObject';
import InternalEvent from '../../view/event/InternalEvent';
/**
* Implements a basic animation in JavaScript.
*
* @class mxAnimation
* @extends {mxEventSource}
* @extends {EventSource}
*/
class mxAnimation extends mxEventSource {
class mxAnimation extends EventSource {
constructor(delay) {
super();
this.delay = delay != null ? delay : 20;
@ -60,7 +60,7 @@ class mxAnimation extends mxEventSource {
*/
// updateAnimation(): void;
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) {
window.clearInterval(this.thread);
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
* Type definitions from the typed-mxgraph project
*/
import mxUtils from '../mxUtils';
import mxGeometryChange from '../../atomic_changes/mxGeometryChange';
import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
import mxValueChange from '../../atomic_changes/mxValueChange';
import mxChildChange from '../../atomic_changes/mxChildChange';
import mxStyleChange from '../../atomic_changes/mxStyleChange';
import utils from '../Utils';
import GeometryChange from '../../view/geometry/GeometryChange';
import TerminalChange from '../../view/cell/edge/TerminalChange';
import ValueChange from '../../view/cell/ValueChange';
import ChildChange from '../../view/model/ChildChange';
import StyleChange from '../../view/style/StyleChange';
/**
* Provides animation effects.
@ -50,11 +50,11 @@ class mxEffects {
const change = changes[i];
if (
change instanceof mxGeometryChange ||
change instanceof mxTerminalChange ||
change instanceof mxValueChange ||
change instanceof mxChildChange ||
change instanceof mxStyleChange
change instanceof GeometryChange ||
change instanceof TerminalChange ||
change instanceof ValueChange ||
change instanceof ChildChange ||
change instanceof StyleChange
) {
const state = graph
.getView()
@ -64,10 +64,10 @@ class mxEffects {
isRequired = true;
if (
change.constructor !== mxGeometryChange ||
change.constructor !== GeometryChange ||
change.cell.isEdge()
) {
mxUtils.setOpacity(state.shape.node, (100 * step) / maxStep);
utils.setOpacity(state.shape.node, (100 * step) / maxStep);
} else {
const { scale } = graph.getView();
@ -133,7 +133,7 @@ class mxEffects {
const childState = graph.getView().getState(child);
if (childState != null) {
mxUtils.setOpacity(childState.shape.node, opacity);
utils.setOpacity(childState.shape.node, opacity);
mxEffects.cascadeOpacity(graph, child, opacity);
}
}
@ -146,7 +146,7 @@ class mxEffects {
const edgeState = graph.getView().getState(edges[i]);
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;
mxUtils.setOpacity(node, opacity);
utils.setOpacity(node, opacity);
if (isEnabled || isEnabled == null) {
const f = () => {
opacity = Math.max(opacity - step, 0);
mxUtils.setOpacity(node, opacity);
utils.setOpacity(node, opacity);
if (opacity > 0) {
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
* Type definitions from the typed-mxgraph project
*/
import mxPoint from '../datatypes/mxPoint';
import mxCellStatePreview from '../../view/cell/mxCellStatePreview';
import Point from '../../view/geometry/Point';
import CellStatePreview from '../../view/cell/CellStatePreview';
import mxAnimation from './mxAnimation';
/**
@ -98,7 +98,7 @@ class mxMorphing extends mxAnimation {
*/
updateAnimation() {
super.updateAnimation();
const move = new mxCellStatePreview(this.graph);
const move = new CellStatePreview(this.graph);
if (this.cells != null) {
// Animates the given cells individually without recursion
@ -191,7 +191,7 @@ class mxMorphing extends mxAnimation {
const x = state.x / scale - translate.x;
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) {
const t = this.graph.view.getTranslate();
result = new mxPoint(-t.x, -t.y);
result = new Point(-t.x, -t.y);
}
return result;

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

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import { arcToCurves, getRotatedPoint } from '../mxUtils';
import { arcToCurves, getRotatedPoint } from '../Utils';
import {
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
@ -13,10 +13,10 @@ import {
SHADOW_OFFSET_X,
SHADOW_OFFSET_Y,
SHADOW_OPACITY,
} from '../mxConstants';
} from '../Constants';
import mxUrlConverter from '../network/mxUrlConverter';
import mxPoint from '../datatypes/mxPoint';
import { clone } from '../mxCloneUtils';
import Point from '../../view/geometry/Point';
import { clone } from '../CloneUtils';
import type { CanvasState, ColorValue } from '../../types';
@ -228,10 +228,10 @@ class mxAbstractCanvas2D {
const rad = theta * (Math.PI / 180);
return getRotatedPoint(
new mxPoint(x, y),
new Point(x, y),
Math.cos(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
*/
import { getAlignmentAsPoint, isNotNullish } from '../mxUtils';
import { getAlignmentAsPoint, isNotNullish } from '../Utils';
import mxClient from '../../mxClient';
import {
ABSOLUTE_LINE_HEIGHT,
@ -29,12 +29,12 @@ import {
NS_SVG,
NS_XLINK,
WORD_WRAP,
} from '../mxConstants';
import mxRectangle from '../datatypes/mxRectangle';
} from '../Constants';
import Rectangle from '../../view/geometry/Rectangle';
import mxAbstractCanvas2D from './mxAbstractCanvas2D';
import { parseXml } from '../mxXmlUtils';
import { importNodeImplementation, isNode, write } from '../mxDomUtils';
import { htmlEntities, trim } from '../mxStringUtils';
import { parseXml } from '../XmlUtils';
import { importNodeImplementation, isNode, write } from '../DomUtils';
import { htmlEntities, trim } from '../StringUtils';
import {
AlignValue,
ColorValue,
@ -1769,7 +1769,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
y -= h;
}
bbox = new mxRectangle(
bbox = new Rectangle(
(x + 1) * s.scale,
y * s.scale,
(w - 2) * s.scale,
@ -1779,7 +1779,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// Uses getBBox only if inside document for correct size
try {
bbox = node.getBBox();
bbox = new mxRectangle(
bbox = new Rectangle(
bbox.x,
bbox.y + 1,
bbox.width,
@ -1833,7 +1833,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
y -= h;
}
bbox = new mxRectangle(
bbox = new Rectangle(
(x + 1) * s.scale,
(y + 2) * 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_Y,
SHADOW_OPACITY,
} from '../mxConstants';
import { getOuterHtml } from '../mxDomUtils';
} from '../Constants';
import { getOuterHtml } from '../DomUtils';
/**
* Class: mxXmlCanvas2D

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

@ -36,7 +36,7 @@ class mxDivResizer {
}
this.div = div;
const style = mxUtils.getCurrentStyle(div);
const style = utils.getCurrentStyle(div);
if (style != null) {
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 { write } from "../mxDomUtils";
import InternalEvent from "../../view/event/InternalEvent";
import { write } from "../DomUtils";
/**
* Function: linkAction
@ -78,7 +78,7 @@ export const link = (parent, text, funct, pad) => {
a.style.paddingLeft = `${pad}px`;
}
mxEvent.addListener(a, 'click', funct);
InternalEvent.addListener(a, 'click', funct);
write(a, text);
if (parent != null) {
@ -114,7 +114,7 @@ export const button = (label, funct, doc) => {
const button = doc.createElement('button');
write(button, label);
mxEvent.addListener(button, 'click', evt => {
InternalEvent.addListener(button, 'click', evt => {
funct(evt);
});

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

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

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

@ -6,9 +6,9 @@
*/
import mxClient from '../../mxClient';
import mxEvent from '../event/mxEvent';
import { getInnerHtml, write } from '../mxDomUtils';
import mxUtils from '../mxUtils';
import InternalEvent from '../../view/event/InternalEvent';
import { getInnerHtml, write } from '../DomUtils';
import utils from '../Utils';
import mxWindow, { popup } from './mxWindow';
/**
@ -92,7 +92,7 @@ class mxLog {
mxLog.addButton('Copy', function (evt) {
try {
mxUtils.copy(mxLog.textarea.value);
utils.copy(mxLog.textarea.value);
} catch (err) {
alert(err);
}
@ -152,9 +152,9 @@ class mxLog {
)}px`;
};
mxLog.window.addListener(mxEvent.RESIZE_END, resizeHandler);
mxLog.window.addListener(mxEvent.MAXIMIZE, resizeHandler);
mxLog.window.addListener(mxEvent.NORMALIZE, resizeHandler);
mxLog.window.addListener(InternalEvent.RESIZE_END, resizeHandler);
mxLog.window.addListener(InternalEvent.MAXIMIZE, resizeHandler);
mxLog.window.addListener(InternalEvent.NORMALIZE, resizeHandler);
mxLog.textarea.style.height = '92px';
}
@ -199,7 +199,7 @@ class mxLog {
*/
// static info(): void;
static info() {
mxLog.writeln(mxUtils.toString(navigator));
mxLog.writeln(utils.toString(navigator));
}
/**
@ -209,7 +209,7 @@ class mxLog {
static addButton(lab, funct) {
const button = document.createElement('button');
write(button, lab);
mxEvent.addListener(button, 'click', funct);
InternalEvent.addListener(button, 'click', funct);
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
* Type definitions from the typed-mxgraph project
*/
import mxEventSource from '../event/mxEventSource';
import mxUtils from '../mxUtils';
import mxEventObject from '../event/mxEventObject';
import EventSource from '../../view/event/EventSource';
import utils from '../Utils';
import EventObject from '../../view/event/EventObject';
import mxClient from '../../mxClient';
import mxEvent from '../event/mxEvent';
import { write } from '../mxDomUtils';
import { isLeftMouseButton } from '../mxEventUtils';
import InternalEvent from '../../view/event/InternalEvent';
import { write } from '../DomUtils';
import { isLeftMouseButton } from '../EventUtils';
/**
* Class: mxPopupMenu
@ -38,7 +38,7 @@ import { isLeftMouseButton } from '../mxEventUtils';
*
* Fires after the menu has been shown in <popup>.
*/
class mxPopupMenu extends mxEventSource {
class mxPopupMenu extends EventSource {
constructor(factoryMethod) {
super();
this.factoryMethod = factoryMethod;
@ -70,7 +70,7 @@ class mxPopupMenu extends mxEventSource {
this.div.appendChild(this.table);
// 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) {
let currentSelection = null;
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
tr,
evt => {
this.eventReceiver = tr;
@ -290,7 +290,7 @@ class mxPopupMenu extends mxEventSource {
}
}
mxEvent.consume(evt);
InternalEvent.consume(evt);
},
evt => {
if (parent.activeRow != tr && parent.activeRow != parent) {
@ -338,13 +338,13 @@ class mxPopupMenu extends mxEventSource {
}
this.eventReceiver = null;
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
);
// Resets hover style because TR in IE doesn't have hover
if (!noHover) {
mxEvent.addListener(tr, 'mouseout', evt => {
InternalEvent.addListener(tr, 'mouseout', evt => {
tr.className = 'mxPopupMenuItem';
});
}
@ -418,7 +418,7 @@ class mxPopupMenu extends mxEventSource {
// Moves the submenu to the left side if there is no space
const left = parseInt(row.div.offsetLeft);
const width = parseInt(row.div.offsetWidth);
const offset = mxUtils.getDocumentScrollOrigin(document);
const offset = utils.getDocumentScrollOrigin(document);
const b = document.body;
const d = document.documentElement;
@ -432,7 +432,7 @@ class mxPopupMenu extends mxEventSource {
)}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
while (this.tbody.firstChild != null) {
mxEvent.release(this.tbody.firstChild);
InternalEvent.release(this.tbody.firstChild);
this.tbody.removeChild(this.tbody.firstChild);
}
@ -508,7 +508,7 @@ class mxPopupMenu extends mxEventSource {
if (this.itemCount > 0) {
this.showMenu();
this.fireEvent(new mxEventObject(mxEvent.SHOW));
this.fireEvent(new EventObject(InternalEvent.SHOW));
}
}
}
@ -532,7 +532,7 @@ class mxPopupMenu extends mxEventSource {
showMenu() {
// Fits the div inside the viewport
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.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() {
if (this.div != null) {
mxEvent.release(this.div);
InternalEvent.release(this.div);
if (this.div.parentNode != null) {
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
*/
import mxUtils from '../mxUtils';
import mxEvent from '../event/mxEvent';
import mxPoint from '../datatypes/mxPoint';
import utils from '../Utils';
import InternalEvent from '../../view/event/InternalEvent';
import Point from '../../view/geometry/Point';
import mxPopupMenu from './mxPopupMenu';
import mxEventSource from '../event/mxEventSource';
import mxEventObject from '../event/mxEventObject';
import EventSource from '../../view/event/EventSource';
import EventObject from '../../view/event/EventObject';
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,
@ -24,9 +24,9 @@ import { write, writeln } from '../mxDomUtils';
* property contains the function that was selected in <selectMode>.
*
* @class mxToolbar
* @extends {mxEventSource}
* @extends {EventSource}
*/
class mxToolbar extends mxEventSource {
class mxToolbar extends EventSource {
constructor(container) {
super();
this.container = container;
@ -102,10 +102,10 @@ class mxToolbar extends mxEventSource {
// Invokes the function on a click on the toolbar item
if (funct != null) {
mxEvent.addListener(img, 'click', funct);
InternalEvent.addListener(img, 'click', funct);
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
// while it is being clicked with the mouse
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
img,
evt => {
if (pressedIcon != null) {
@ -146,7 +146,7 @@ class mxToolbar extends mxEventSource {
this.currentImg = img;
this.menu.factoryMethod = factoryMethod;
const point = new mxPoint(
const point = new Point(
img.offsetLeft,
img.offsetTop + img.offsetHeight
);
@ -169,7 +169,7 @@ class mxToolbar extends mxEventSource {
mouseHandler
);
mxEvent.addListener(img, 'mouseout', mouseHandler);
InternalEvent.addListener(img, 'mouseout', mouseHandler);
return img;
}
@ -209,7 +209,7 @@ class mxToolbar extends mxEventSource {
select.className = style || 'mxToolbarCombo';
this.addOption(select, title, null);
mxEvent.addListener(select, 'change', evt => {
InternalEvent.addListener(select, 'change', evt => {
const value = select.options[select.selectedIndex];
select.selectedIndex = 0;
@ -266,7 +266,7 @@ class mxToolbar extends mxEventSource {
img.setAttribute('title', title);
}
mxEvent.addListener(img, 'click', evt => {
InternalEvent.addListener(img, 'click', evt => {
let tmp = this.selectedMode.altIcon;
if (tmp != null) {
@ -291,7 +291,7 @@ class mxToolbar extends mxEventSource {
img.className = `${img.initialClassName}Selected`;
}
this.fireEvent(new mxEventObject(mxEvent.SELECT));
this.fireEvent(new EventObject(InternalEvent.SELECT));
funct();
});
@ -333,12 +333,12 @@ class mxToolbar extends mxEventSource {
}
if (this.enabled && toggle) {
mxEvent.addListener(img, 'click', evt => {
InternalEvent.addListener(img, 'click', evt => {
this.selectMode(img, funct);
this.noReset = false;
});
mxEvent.addListener(img, 'dblclick', evt => {
InternalEvent.addListener(img, 'dblclick', evt => {
this.selectMode(img, funct);
this.noReset = true;
});
@ -384,7 +384,7 @@ class mxToolbar extends mxEventSource {
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() {
mxUtils.br(this.container);
utils.br(this.container);
}
/**
@ -440,7 +440,7 @@ class mxToolbar extends mxEventSource {
*/
// destroy(): void;
destroy() {
mxEvent.release(this.container);
InternalEvent.release(this.container);
this.container = null;
this.defaultMode = 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
*/
import mxRectangle from '../datatypes/mxRectangle';
import mxEventObject from '../event/mxEventObject';
import mxEventSource from '../event/mxEventSource';
import mxUtils from '../mxUtils';
import mxEvent from '../event/mxEvent';
import Rectangle from '../../view/geometry/Rectangle';
import EventObject from '../../view/event/EventObject';
import EventSource from '../../view/event/EventSource';
import utils from '../Utils';
import InternalEvent from '../../view/event/InternalEvent';
import mxClient from '../../mxClient';
import { NODETYPE_TEXT } from '../mxConstants';
import { br, write } from '../mxDomUtils';
import mxResources from '../mxResources';
import { getClientX, getClientY } from '../mxEventUtils';
import { htmlEntities } from '../mxStringUtils';
import { NODETYPE_TEXT } from '../Constants';
import { br, write } from '../DomUtils';
import Resources from '../Resources';
import { getClientX, getClientY } from '../EventUtils';
import { htmlEntities } from '../StringUtils';
/**
* Basic window inside a document.
@ -165,9 +165,9 @@ import { htmlEntities } from '../mxStringUtils';
* Fires before the window is destroyed. This event has no properties.
*
* @class mxWindow
* @extends mxEventSource
* @extends EventSource
*/
class mxWindow extends mxEventSource {
class mxWindow extends EventSource {
constructor(
title,
content,
@ -281,8 +281,8 @@ class mxWindow extends mxEventSource {
this.activate();
};
mxEvent.addGestureListeners(this.title, activator);
mxEvent.addGestureListeners(this.table, activator);
InternalEvent.addGestureListeners(this.title, activator);
InternalEvent.addGestureListeners(this.table, activator);
this.hide();
}
@ -328,7 +328,7 @@ class mxWindow extends mxEventSource {
* Default is (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
@ -396,7 +396,7 @@ class mxWindow extends mxEventSource {
// activate(): void;
activate() {
if (mxWindow.activeWindow !== this) {
const style = mxUtils.getCurrentStyle(this.getElement());
const style = utils.getCurrentStyle(this.getElement());
const index = style != null ? style.zIndex : 3;
if (mxWindow.activeWindow) {
@ -412,7 +412,7 @@ class mxWindow extends mxEventSource {
mxWindow.activeWindow = this;
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() {
mxUtils.fit(this.div);
utils.fit(this.div);
}
/**
@ -485,9 +485,9 @@ class mxWindow extends mxEventSource {
width = this.div.offsetWidth;
height = this.div.offsetHeight;
mxEvent.addGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new mxEventObject(mxEvent.RESIZE_START, 'event', evt));
mxEvent.consume(evt);
InternalEvent.addGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new EventObject(InternalEvent.RESIZE_START, 'event', evt));
InternalEvent.consume(evt);
};
// Adds a temporary pair of listeners to intercept
@ -499,8 +499,8 @@ class mxWindow extends mxEventSource {
this.setSize(width + dx, height + dy);
this.fireEvent(new mxEventObject(mxEvent.RESIZE, 'event', evt));
mxEvent.consume(evt);
this.fireEvent(new EventObject(InternalEvent.RESIZE, 'event', evt));
InternalEvent.consume(evt);
}
};
@ -508,18 +508,18 @@ class mxWindow extends mxEventSource {
if (startX != null && startY != null) {
startX = null;
startY = null;
mxEvent.removeGestureListeners(
InternalEvent.removeGestureListeners(
document,
null,
dragHandler,
dropHandler
);
this.fireEvent(new mxEventObject(mxEvent.RESIZE_END, 'event', evt));
mxEvent.consume(evt);
this.fireEvent(new EventObject(InternalEvent.RESIZE_END, 'event', evt));
InternalEvent.consume(evt);
}
};
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
this.resize,
start,
dragHandler,
@ -571,7 +571,7 @@ class mxWindow extends mxEventSource {
*/
// getMinimumSize(): mxRectangle;
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.fireEvent(new mxEventObject(mxEvent.MINIMIZE, 'event', evt));
this.fireEvent(new EventObject(InternalEvent.MINIMIZE, 'event', evt));
} else {
minimized = false;
@ -638,13 +638,13 @@ class mxWindow extends mxEventSource {
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';
}
const style = mxUtils.getCurrentStyle(this.contentWrapper);
const style = utils.getCurrentStyle(this.contentWrapper);
if (style.overflow === 'auto' || this.resize != null) {
this.contentWrapper.style.height = `${
@ -724,7 +724,7 @@ class mxWindow extends mxEventSource {
}px`;
}
this.fireEvent(new mxEventObject(mxEvent.MAXIMIZE, 'event', evt));
this.fireEvent(new EventObject(InternalEvent.MAXIMIZE, 'event', evt));
} else {
maximized = false;
@ -740,7 +740,7 @@ class mxWindow extends mxEventSource {
this.div.style.height = height;
this.div.style.width = width;
const style = mxUtils.getCurrentStyle(this.contentWrapper);
const style = utils.getCurrentStyle(this.contentWrapper);
if (style.overflow === 'auto' || this.resize != null) {
this.contentWrapper.style.height = `${
@ -757,15 +757,15 @@ class mxWindow extends mxEventSource {
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);
mxEvent.addListener(this.title, 'dblclick', funct);
InternalEvent.addGestureListeners(this.maximize, funct);
InternalEvent.addListener(this.title, 'dblclick', funct);
}
/**
@ -775,7 +775,7 @@ class mxWindow extends mxEventSource {
installMoveHandler() {
this.title.style.cursor = 'move';
mxEvent.addGestureListeners(this.title, (evt) => {
InternalEvent.addGestureListeners(this.title, (evt) => {
const startX = getClientX(evt);
const startY = getClientY(evt);
const x = this.getX();
@ -787,24 +787,24 @@ class mxWindow extends mxEventSource {
const dx = getClientX(evt) - startX;
const dy = getClientY(evt) - startY;
this.setLocation(x + dx, y + dy);
this.fireEvent(new mxEventObject(mxEvent.MOVE, 'event', evt));
mxEvent.consume(evt);
this.fireEvent(new EventObject(InternalEvent.MOVE, 'event', evt));
InternalEvent.consume(evt);
};
const dropHandler = (evt) => {
mxEvent.removeGestureListeners(
InternalEvent.removeGestureListeners(
document,
null,
dragHandler,
dropHandler
);
this.fireEvent(new mxEventObject(mxEvent.MOVE_END, 'event', evt));
mxEvent.consume(evt);
this.fireEvent(new EventObject(InternalEvent.MOVE_END, 'event', evt));
InternalEvent.consume(evt);
};
mxEvent.addGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new mxEventObject(mxEvent.MOVE_START, 'event', evt));
mxEvent.consume(evt);
InternalEvent.addGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new EventObject(InternalEvent.MOVE_START, 'event', evt));
InternalEvent.consume(evt);
});
// Disables built-in pan and zoom in IE10 and later
@ -854,8 +854,8 @@ class mxWindow extends mxEventSource {
this.buttons.appendChild(this.closeImg);
mxEvent.addGestureListeners(this.closeImg, (evt) => {
this.fireEvent(new mxEventObject(mxEvent.CLOSE, 'event', evt));
InternalEvent.addGestureListeners(this.closeImg, (evt) => {
this.fireEvent(new EventObject(InternalEvent.CLOSE, 'event', evt));
if (this.destroyOnClose) {
this.destroy();
@ -863,7 +863,7 @@ class mxWindow extends mxEventSource {
this.setVisible(false);
}
mxEvent.consume(evt);
InternalEvent.consume(evt);
});
}
@ -933,7 +933,7 @@ class mxWindow extends mxEventSource {
this.div.style.display = '';
this.activate();
const style = mxUtils.getCurrentStyle(this.contentWrapper);
const style = utils.getCurrentStyle(this.contentWrapper);
if (
(style.overflow == 'auto' || this.resize != null) &&
@ -946,7 +946,7 @@ class mxWindow extends mxEventSource {
}px`;
}
this.fireEvent(new mxEventObject(mxEvent.SHOW));
this.fireEvent(new EventObject(InternalEvent.SHOW));
}
/**
@ -955,7 +955,7 @@ class mxWindow extends mxEventSource {
// hide(): void;
hide() {
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() {
this.fireEvent(new mxEventObject(mxEvent.DESTROY));
this.fireEvent(new EventObject(InternalEvent.DESTROY));
if (this.div != null) {
mxEvent.release(this.div);
InternalEvent.release(this.div);
this.div.parentNode.removeChild(this.div);
this.div = null;
}
@ -1060,7 +1060,7 @@ export const error = (message, width, close, icon) => {
div.style.padding = '20px';
const img = document.createElement('img');
img.setAttribute('src', icon || mxUtils.errorImage);
img.setAttribute('src', icon || utils.errorImage);
img.setAttribute('valign', 'bottom');
img.style.verticalAlign = 'middle';
div.appendChild(img);
@ -1073,7 +1073,7 @@ export const error = (message, width, close, icon) => {
const w = document.body.clientWidth;
const h = document.body.clientHeight || document.documentElement.clientHeight;
const warn = new mxWindow(
mxResources.get(mxUtils.errorResource) || mxUtils.errorResource,
Resources.get(utils.errorResource) || utils.errorResource,
div,
(w - width) / 2,
h / 4,
@ -1091,13 +1091,13 @@ export const error = (message, width, close, icon) => {
button.setAttribute('style', 'float:right');
mxEvent.addListener(button, 'click', (evt) => {
InternalEvent.addListener(button, 'click', (evt) => {
warn.destroy();
});
write(
button,
mxResources.get(mxUtils.closeResource) || mxUtils.closeResource
Resources.get(utils.closeResource) || utils.closeResource
);
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
*/
import { getFunctionName } from '../mxStringUtils';
import { isNullish } from '../mxUtils';
import { getFunctionName } from './StringUtils';
import { isNullish } from './Utils';
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
*/
import mxEvent from '../event/mxEvent';
import mxEventObject from '../event/mxEventObject';
import mxEventSource from '../event/mxEventSource';
import InternalEvent from '../view/event/InternalEvent';
import EventObject from '../view/event/EventObject';
import EventSource from '../view/event/EventSource';
/**
* @class mxUndoManager
@ -52,7 +52,7 @@ import mxEventSource from '../event/mxEventSource';
* The code creates a function that informs the undoManager
* of an undoable edit and binds it to the undo event of
* {@link mxGraphModel} and {@link mxGraphView} using
* {@link mxEventSource.addListener}.
* {@link EventSource.addListener}.
*
* ### Event: mxEvent.CLEAR
*
@ -73,7 +73,7 @@ import mxEventSource from '../event/mxEventSource';
* Fires after an undoable edit was added to the history. The `edit`
* property contains the {@link mxUndoableEdit} that was added.
*/
class mxUndoManager extends mxEventSource {
class mxUndoManager extends EventSource {
constructor(size) {
super();
this.size = size != null ? size : 100;
@ -115,7 +115,7 @@ class mxUndoManager extends mxEventSource {
clear() {
this.history = [];
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();
if (edit.isSignificant()) {
this.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));
this.fireEvent(new EventObject(InternalEvent.UNDO, 'edit', edit));
break;
}
}
@ -162,7 +162,7 @@ class mxUndoManager extends mxEventSource {
edit.redo();
if (edit.isSignificant()) {
this.fireEvent(new mxEventObject(mxEvent.REDO, 'edit', edit));
this.fireEvent(new EventObject(InternalEvent.REDO, 'edit', edit));
break;
}
}
@ -181,7 +181,7 @@ class mxUndoManager extends mxEventSource {
this.history.push(undoableEdit);
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, draw.io AG
*/
import { write } from '../mxDomUtils';
import { parseXml } from '../mxXmlUtils';
import { write } from '../DomUtils';
import { parseXml } from '../XmlUtils';
/**
* 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
*/
import mxCell from '../view/cell/mxCell';
import Cell from '../../view/cell/datatypes/Cell';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import { removeWhitespace } from '../util/mxStringUtils';
import { importNode } from '../util/mxDomUtils';
import { NODETYPE_ELEMENT } from '../Constants';
import { removeWhitespace } from '../StringUtils';
import { importNode } from '../DomUtils';
/**
* Class: mxCellCodec
@ -54,7 +54,7 @@ import { importNode } from '../util/mxDomUtils';
class mxCellCodec extends mxObjectCodec {
constructor() {
super(
new mxCell(),
new Cell(),
['children', 'edges', 'overlays', 'mxTransient'],
['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
*/
import mxChildChange from '../atomic_changes/mxChildChange';
import ChildChange from '../../view/model/ChildChange';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import { NODETYPE_ELEMENT } from '../Constants';
/**
* Class: mxChildChangeCodec
@ -31,7 +31,7 @@ import { NODETYPE_ELEMENT } from '../util/mxConstants';
class mxChildChangeCodec extends mxObjectCodec {
constructor() {
super(
new mxChildChange(),
new ChildChange(),
['model', 'child', 'previousIndex'],
['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
*/
import mxCellPath from '../view/cell/mxCellPath';
import CellPath from '../../view/cell/datatypes/CellPath';
import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import mxCell from '../view/cell/mxCell';
import mxLog from '../util/gui/mxLog';
import { getFunctionName } from '../util/mxStringUtils';
import { importNode, isNode } from '../util/mxDomUtils';
import { NODETYPE_ELEMENT } from '../Constants';
import Cell from '../../view/cell/datatypes/Cell';
import mxLog from '../gui/mxLog';
import { getFunctionName } from '../StringUtils';
import { importNode, isNode } from '../DomUtils';
const createXmlDocument = () => {
// Put here from '../util/mxXmlUtils' to eliminate circular dependency
@ -20,7 +20,7 @@ const createXmlDocument = () => {
if (document.implementation && document.implementation.createDocument) {
doc = document.implementation.createDocument('', '', null);
} else if ('ActiveXObject' in window) {
doc = mxUtils.createMsXmlDocument();
doc = utils.createMsXmlDocument();
}
return doc;
@ -279,9 +279,9 @@ class mxCodec {
/**
* Returns the ID of the specified object. This implementation
* calls {@link reference} first and if that returns null handles
* the object as an {@link mxCell} by returning their IDs using
* {@link mxCell.getId}. If no ID exists for the given cell, then
* an on-the-fly ID is generated using {@link mxCellPath.create}.
* the object as an {@link Cell} by returning their IDs using
* {@link Cell.getId}. If no ID exists for the given cell, then
* an on-the-fly ID is generated using {@link CellPath.create}.
*
* @param obj Object to return the ID for.
*/
@ -292,12 +292,12 @@ class mxCodec {
if (obj != null) {
id = this.reference(obj);
if (id == null && obj instanceof mxCell) {
if (id == null && obj instanceof Cell) {
id = obj.getId();
if (id == null) {
// Uses an on-the-fly Id
id = mxCellPath.create(obj);
id = CellPath.create(obj);
if (id.length === 0) {
id = 'root';
@ -444,7 +444,7 @@ class mxCodec {
* Decodes cells that have been encoded using inversion, ie.
* where the user object is the enclosing node in the XML,
* 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.
*
* @param node XML node that contains the cell data.
@ -477,7 +477,7 @@ class mxCodec {
}
if (!this.isCellCodec(decoder)) {
decoder = mxCodecRegistry.getCodec(mxCell);
decoder = mxCodecRegistry.getCodec(Cell);
}
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.
*
* ```javascript
* var codec = new mxObjectCodec(new mxGraphModel());
* var codec = new mxObjectCodec(new Transactions());
* ```
*
* 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 mxDefaultKeyHandler from '../editor/mxDefaultKeyHandler';
import mxDefaultKeyHandler from '../../editor/mxDefaultKeyHandler';
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
*/
import mxDefaultPopupMenu from '../editor/mxDefaultPopupMenu';
import mxDefaultPopupMenu from '../../editor/mxDefaultPopupMenu';
import mxCodecRegistry from './mxCodecRegistry';
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 mxDefaultToolbar from '../editor/mxDefaultToolbar';
import mxDefaultToolbar from '../../editor/mxDefaultToolbar';
import mxCodecRegistry from './mxCodecRegistry';
import { getChildNodes, getTextContent } from '../util/mxDomUtils';
import { getClientX, getClientY } from '../util/mxEventUtils';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import { getChildNodes, getTextContent } from '../DomUtils';
import { getClientX, getClientY } from '../EventUtils';
import { NODETYPE_ELEMENT } from '../Constants';
/**
* Class: mxDefaultToolbarCodec
@ -142,7 +142,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
into.toolbar.addLine();
} else if (node.nodeName === 'add') {
let as = node.getAttribute('as');
as = mxResources.get(as) || as;
as = Resources.get(as) || as;
const icon = node.getAttribute('icon');
const pressedIcon = node.getAttribute('pressedIcon');
const action = node.getAttribute('action');
@ -242,7 +242,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
// is made in the corresponding combobox.
mxEvent.addListener(select, 'change', () => {
into.toolbar.selectMode(img, (evt) => {
const pt = mxUtils.convertPoint(
const pt = utils.convertPoint(
editor.graph.container,
getClientX(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
*/
import mxEditor from '../editor/mxEditor';
import mxWindow from '../util/gui/mxWindow';
import mxEditor from '../../editor/mxEditor';
import mxWindow from '../gui/mxWindow';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
import { getChildNodes } from '../util/mxDomUtils';
import { getChildNodes } from '../DomUtils';
/**
* Class: mxEditorCodec
@ -165,7 +165,7 @@ class mxEditorCodec extends mxObjectCodec {
element.style.cssText = style;
const wnd = new mxWindow(
mxResources.get(as) || as,
Resources.get(as) || as,
element,
x,
y,
@ -190,7 +190,7 @@ class mxEditorCodec extends mxObjectCodec {
editor.setMapContainer(element);
}
} else if (tmp.nodeName === 'resource') {
mxResources.add(tmp.getAttribute('basename'));
Resources.add(tmp.getAttribute('basename'));
} else if (tmp.nodeName === 'stylesheet') {
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 mxValueChange from '../atomic_changes/mxValueChange';
import mxStyleChange from '../atomic_changes/mxStyleChange';
import mxGeometryChange from '../atomic_changes/mxGeometryChange';
import mxCollapseChange from '../atomic_changes/mxCollapseChange';
import mxVisibleChange from '../atomic_changes/mxVisibleChange';
import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
import ValueChange from '../../view/cell/ValueChange';
import StyleChange from '../../view/style/StyleChange';
import GeometryChange from '../../view/geometry/GeometryChange';
import CollapseChange from '../../view/folding/CollapseChange';
import VisibleChange from '../../view/style/VisibleChange';
import CellAttributeChange from '../../view/cell/CellAttributeChange';
import mxCodecRegistry from './mxCodecRegistry';
import { isNode } from '../util/mxDomUtils';
import { isNode } from '../DomUtils';
/**
* Class: mxGenericChangeCodec
@ -67,22 +67,22 @@ class mxGenericChangeCodec extends mxObjectCodec {
// Registers the codecs
mxCodecRegistry.register(
new mxGenericChangeCodec(new mxValueChange(), 'value')
new mxGenericChangeCodec(new ValueChange(), 'value')
);
mxCodecRegistry.register(
new mxGenericChangeCodec(new mxStyleChange(), 'style')
new mxGenericChangeCodec(new StyleChange(), 'style')
);
mxCodecRegistry.register(
new mxGenericChangeCodec(new mxGeometryChange(), 'geometry')
new mxGenericChangeCodec(new GeometryChange(), 'geometry')
);
mxCodecRegistry.register(
new mxGenericChangeCodec(new mxCollapseChange(), 'collapsed')
new mxGenericChangeCodec(new CollapseChange(), 'collapsed')
);
mxCodecRegistry.register(
new mxGenericChangeCodec(new mxVisibleChange(), 'visible')
new mxGenericChangeCodec(new VisibleChange(), 'visible')
);
mxCodecRegistry.register(
new mxGenericChangeCodec(new mxCellAttributeChange(), 'value')
new mxGenericChangeCodec(new CellAttributeChange(), 'value')
);
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
*/
import mxGraph from '../view/graph/mxGraph';
import graph from '../../view/Graph';
import mxCodecRegistry from './mxCodecRegistry';
import mxObjectCodec from './mxObjectCodec';
@ -28,7 +28,7 @@ import mxObjectCodec from './mxObjectCodec';
*/
class mxGraphCodec extends mxObjectCodec {
constructor() {
super(new mxGraph(), [
super(new graph(), [
'graphListeners',
'eventListeners',
'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
*/
import mxGraphView from '../view/graph/mxGraphView';
import GraphView from '../../view/view/GraphView';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
@ -41,9 +41,9 @@ class mxGraphViewCodec extends mxObjectCodec {
* Recursively encodes the specifed cell. Uses layer
* as the default nodename. If the cell's parent is
* 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
* <mxGraphModel.isVertex> returns true for the cell,
* <Transactions.isVertex> returns true for the cell,
* then vertex is used for the nodename.
*
* <mxGraph.getLabel> is used to create the label
@ -107,7 +107,7 @@ class mxGraphViewCodec extends mxObjectCodec {
// Tries to turn objects and functions into strings
if (typeof value === 'function' && typeof value === 'object') {
value = mxStyleRegistry.getName(value);
value = StyleRegistry.getName(value);
}
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
*/
import mxGraphModel from '../view/graph/mxGraphModel';
import Model from '../../view/model/Model';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
/**
* 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>
* and the <mxCodecRegistry>.
*/
class mxModelCodec extends mxObjectCodec {
constructor() {
super(new mxGraphModel());
super(new Model());
}
/**
* 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
* 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
*/
import mxObjectIdentity from '../util/datatypes/mxObjectIdentity';
import mxLog from '../util/gui/mxLog';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxPoint from '../util/datatypes/mxPoint';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
import { getTextContent } from '../util/mxDomUtils';
import mxObjectIdentity from '../mxObjectIdentity';
import mxLog from '../gui/mxLog';
import Geometry from '../../view/geometry/Geometry';
import Point from '../../view/geometry/Point';
import { NODETYPE_ELEMENT } from '../Constants';
import utils from '../Utils';
import { getTextContent } from '../DomUtils';
/**
* Generic codec for JavaScript objects that implements a mapping between
@ -398,7 +398,7 @@ class mxObjectCodec {
const value = obj[name];
if (value != null && !this.isExcluded(obj, name, value, true)) {
if (mxUtils.isInteger(name)) {
if (utils.isInteger(name)) {
name = null;
}
@ -570,14 +570,14 @@ class mxObjectCodec {
isNumericAttribute(dec, attr, obj) {
// Handles known numeric attributes for generic objects
const result =
(obj.constructor === mxGeometry &&
(obj.constructor === Geometry &&
(attr.name === 'x' ||
attr.name === 'y' ||
attr.name === 'width' ||
attr.name === 'height')) ||
(obj.constructor === mxPoint &&
(obj.constructor === Point &&
(attr.name === 'x' || attr.name === 'y')) ||
mxUtils.isNumeric(attr.value);
utils.isNumeric(attr.value);
return result;
}
@ -637,7 +637,7 @@ class mxObjectCodec {
* - If the object is an array and the variable name is empty then the
* value or child object is appended to the array.
* - 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
* is defined, the default mechanism is used, allowing to override/add
@ -880,7 +880,7 @@ class mxObjectCodec {
const name = node.getAttribute('name');
if (name != null) {
try {
const xml = mxUtils.load(name).getDocumentElement();
const xml = utils.load(name).getDocumentElement();
if (xml != null) {
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
*/
import mxRootChange from '../atomic_changes/mxRootChange';
import RootChange from '../../view/model/RootChange';
import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import { NODETYPE_ELEMENT } from '../Constants';
import mxObjectCodec from './mxObjectCodec';
/**
@ -25,7 +25,7 @@ import mxObjectCodec from './mxObjectCodec';
*/
class mxRootChangeCodec extends mxObjectCodec {
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
*/
import mxStylesheet from '../util/datatypes/style/mxStylesheet';
import mxUtils from '../util/mxUtils';
import Stylesheet from '../../view/style/Stylesheet';
import utils from '../Utils';
import mxCodecRegistry from './mxCodecRegistry';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import mxLog from '../util/gui/mxLog';
import mxStyleRegistry from '../util/datatypes/style/mxStyleRegistry';
import { NODETYPE_ELEMENT } from '../Constants';
import mxLog from '../gui/mxLog';
import StyleRegistry from '../../view/style/StyleRegistry';
import mxObjectCodec from './mxObjectCodec';
import { getTextContent } from '../util/mxDomUtils';
import { getTextContent } from '../DomUtils';
/**
* Class: mxStylesheetCodec
@ -23,7 +23,7 @@ import { getTextContent } from '../util/mxDomUtils';
*/
class mxStylesheetCodec extends mxObjectCodec {
constructor() {
super(new mxStylesheet());
super(new Stylesheet());
}
/**
@ -145,7 +145,7 @@ class mxStylesheetCodec extends mxObjectCodec {
if (as != null) {
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 (extend != null) {
@ -176,7 +176,7 @@ class mxStylesheetCodec extends mxObjectCodec {
} else {
value = entry.getAttribute('value');
if (mxUtils.isNumeric(value)) {
if (utils.isNumeric(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 mxTerminalChange from '../atomic_changes/mxTerminalChange';
import TerminalChange from '../../view/cell/edge/TerminalChange';
import mxCodecRegistry from './mxCodecRegistry';
/**
@ -28,7 +28,7 @@ import mxCodecRegistry from './mxCodecRegistry';
*/
class mxTerminalChangeCodec extends mxObjectCodec {
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
* 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
@ -21,9 +21,9 @@ import mxEventSource from '../event/mxEventSource';
* ```
*
* @class mxAutoSaveManager
* @extends mxEventSource
* @extends EventSource
*/
class mxAutoSaveManager extends mxEventSource {
class mxAutoSaveManager extends EventSource {
constructor(graph) {
super();

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

@ -5,9 +5,9 @@
* Type definitions from the typed-mxgraph project
*/
import mxGraph from '../../view/graph/mxGraph';
import mxGraphModel from "../../view/graph/mxGraphModel";
import mxCellArray from "../../view/cell/mxCellArray";
import graph from '../../view/Graph';
import Model from "../../view/model/Model";
import CellArray from "../../view/cell/datatypes/CellArray";
/**
* @class
@ -25,8 +25,8 @@ import mxCellArray from "../../view/cell/mxCellArray";
* This copies the selection cells from the graph to the clipboard and
* pastes them into graph2.
*
* For fine-grained control of the clipboard data the {@link mxGraph.canExportCell}
* and {@link mxGraph.canImportCell} functions can be overridden.
* For fine-grained control of the clipboard data the {@link graph.canExportCell}
* and {@link graph.canImportCell} functions can be overridden.
*
* To restore previous parents for pasted cells, the implementation for
* {@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.
*/
static cells: mxCellArray | null = null;
static cells: CellArray | null = null;
/**
* 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;
}
/**
* Returns the cells in the clipboard.
*/
static getCells(): mxCellArray | null {
static getCells(): CellArray | null {
return mxClipboard.cells;
}
@ -124,10 +124,10 @@ class mxClipboard {
* If cells is null then the selection cells of the graph will
* 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.
*/
static cut(graph: mxGraph, cells?: mxCellArray | null): mxCellArray | null {
static cut(graph: graph, cells?: CellArray | null): CellArray | null {
cells = mxClipboard.copy(graph, cells);
mxClipboard.insertCount = 0;
mxClipboard.removeCells(graph, cells);
@ -139,10 +139,10 @@ class mxClipboard {
* Hook to remove the given cells from the given graph after
* 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.
*/
static removeCells(graph: mxGraph, cells: mxCellArray | null): void {
static removeCells(graph: graph, cells: CellArray | null): void {
graph.removeCells(cells);
}
@ -151,14 +151,14 @@ class mxClipboard {
* graph to {@link cells}. Returns the original array of cells that has
* 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.
*/
static copy(graph: mxGraph, cells?: mxCellArray | null): mxCellArray | null {
static copy(graph: graph, cells?: CellArray | null): CellArray | null {
cells = cells || graph.getSelectionCells();
const result = (<mxCellArray>graph.getExportableCells(cells)).getTopmostCells();
const result = (<CellArray>graph.getExportableCells(cells)).getTopmostCells();
mxClipboard.insertCount = 1;
mxClipboard.setCells(graph.cloneCells(<mxCellArray>result));
mxClipboard.setCells(graph.cloneCells(<CellArray>result));
return result;
}
@ -169,12 +169,12 @@ class mxClipboard {
* are no longer in the graph or invisible then the
* cells are added to the graph's default or into the
* 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.
*
* @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;
if (!mxClipboard.isEmpty()) {
@ -186,7 +186,7 @@ class mxClipboard {
// Increments the counter and selects the inserted cells
mxClipboard.insertCount++;
graph.setSelectionCells(<mxCellArray>cells);
graph.setSelectionCells(<CellArray>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 mxEvent from '../util/event/mxEvent';
import mxUtils from '../util/mxUtils';
import mxRectangleShape from '../shape/node/mxRectangleShape';
import mxGuide from '../util/mxGuide';
import mxPoint from '../util/datatypes/mxPoint';
import InternalEvent from './event/InternalEvent';
import utils from '../util/Utils';
import RectangleShape from './geometry/shape/node/RectangleShape';
import mxGuide from '../util/Guide';
import Point from './geometry/Point';
import {
CURSOR_MOVABLE_EDGE,
CURSOR_MOVABLE_VERTEX,
@ -19,16 +19,16 @@ import {
DROP_TARGET_COLOR,
INVALID_CONNECT_TARGET_COLOR,
VALID_COLOR,
} from '../util/mxConstants';
import mxDictionary from '../util/datatypes/mxDictionary';
import mxCellHighlight from './mxCellHighlight';
import mxRectangle from '../util/datatypes/mxRectangle';
} from '../util/Constants';
import mxDictionary from '../util/mxDictionary';
import mxCellHighlight from './selection/mxCellHighlight';
import Rectangle from './geometry/Rectangle';
import {
getClientX,
getClientY,
isAltDown,
isMultiTouchEvent,
} from '../util/mxEventUtils';
} from '../util/EventUtils';
/**
* Class: mxGraphHandler
@ -50,7 +50,7 @@ import {
*
* graph - Reference to the enclosing <mxGraph>.
*/
class mxGraphHandler {
class GraphHandler {
constructor(graph) {
this.graph = graph;
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
this.escapeHandler = (sender, evt) => {
this.reset();
};
this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
this.graph.addListener(InternalEvent.ESCAPE, this.escapeHandler);
// Updates the preview box for remote changes
this.refreshHandler = (sender, evt) => {
@ -116,8 +116,8 @@ class mxGraphHandler {
}, 0);
};
this.graph.getModel().addListener(mxEvent.CHANGE, this.refreshHandler);
this.graph.addListener(mxEvent.REFRESH, this.refreshHandler);
this.graph.getModel().addListener(InternalEvent.CHANGE, this.refreshHandler);
this.graph.addListener(InternalEvent.REFRESH, this.refreshHandler);
this.keyHandler = (e) => {
if (
@ -140,8 +140,8 @@ class mxGraphHandler {
};
if (typeof document !== 'undefined') {
mxEvent.addListener(document, 'keydown', this.keyHandler);
mxEvent.addListener(document, 'keyup', this.keyHandler);
InternalEvent.addListener(document, 'keydown', this.keyHandler);
InternalEvent.addListener(document, 'keyup', this.keyHandler);
}
}
@ -663,7 +663,7 @@ class mxGraphHandler {
}
this.cellWasClicked = true;
this.consumeMouseEvent(mxEvent.MOUSE_DOWN, me);
this.consumeMouseEvent(InternalEvent.MOUSE_DOWN, me);
}
}
}
@ -788,7 +788,7 @@ class mxGraphHandler {
}
if (result == null) {
result = mxRectangle.fromRectangle(bbox);
result = Rectangle.fromRectangle(bbox);
} else {
result.add(bbox);
}
@ -807,7 +807,7 @@ class mxGraphHandler {
*/
// createPreviewShape(bounds: mxRectangle): mxRectangleShape;
createPreviewShape(bounds) {
const shape = new mxRectangleShape(bounds, null, this.previewColor);
const shape = new RectangleShape(bounds, null, this.previewColor);
shape.isDashed = true;
if (this.htmlPreview) {
@ -844,7 +844,7 @@ class mxGraphHandler {
// start(cell: mxCell, x: number, y: number): void;
start(cell, x, y, cells) {
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.bounds = this.graph.getView().getBounds(this.cells);
this.pBounds = this.getPreviewBounds(this.cells);
@ -962,13 +962,13 @@ class mxGraphHandler {
*/
// getDelta(me: mxMouseEvent): mxPoint;
getDelta(me) {
const point = mxUtils.convertPoint(
const point = utils.convertPoint(
this.graph.container,
me.getX(),
me.getY()
);
return new mxPoint(
return new point(
point.x - this.first.x - this.graph.panDx,
point.y - this.first.y - this.graph.panDy
);
@ -1163,12 +1163,12 @@ class mxGraphHandler {
}
this.updateHint(me);
this.consumeMouseEvent(mxEvent.MOUSE_MOVE, me);
this.consumeMouseEvent(InternalEvent.MOUSE_MOVE, me);
// Cancels the bubbling of events to the container so
// that the droptarget is not reset due to an mouseMove
// fired on the container with no associated state.
mxEvent.consume(me.getEvent());
InternalEvent.consume(me.getEvent());
} else if (
(this.isMoveEnabled() || this.isCloneEnabled()) &&
this.updateCursor &&
@ -1225,7 +1225,7 @@ class mxGraphHandler {
// updatePreviewShape(): void;
updatePreviewShape() {
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.y + this.currentDy),
this.pBounds.width,
@ -1340,7 +1340,7 @@ class mxGraphHandler {
for (let j = 0; j < geometry.points.length; j++) {
if (geometry.points[j] != null) {
points.push(
new mxPoint(
new Point(
geometry.points[j].x + dx / s,
geometry.points[j].y + dy / s
)
@ -1356,7 +1356,7 @@ class mxGraphHandler {
if (source == null || !this.isCellMoving(source.cell)) {
const pt0 = pts[0];
state.setAbsoluteTerminalPoint(
new mxPoint(pt0.x + dx, pt0.y + dy),
new Point(pt0.x + dx, pt0.y + dy),
true
);
source = null;
@ -1372,7 +1372,7 @@ class mxGraphHandler {
if (target == null || !this.isCellMoving(target.cell)) {
const ptn = pts[pts.length - 1];
state.setAbsoluteTerminalPoint(
new mxPoint(ptn.x + dx, ptn.y + dy),
new Point(ptn.x + dx, ptn.y + dy),
false
);
target = null;
@ -1648,7 +1648,7 @@ class mxGraphHandler {
// Consumes the event if a cell was initially clicked
if (this.cellWasClicked) {
this.consumeMouseEvent(mxEvent.MOUSE_UP, me);
this.consumeMouseEvent(InternalEvent.MOUSE_UP, me);
}
this.reset();
@ -1702,23 +1702,23 @@ class mxGraphHandler {
const pState = this.graph.getView().getState(parent);
if (pState != null) {
let pt = mxUtils.convertPoint(
let pt = utils.convertPoint(
this.graph.container,
getClientX(evt),
getClientY(evt)
);
const alpha = mxUtils.toRadians(
mxUtils.getValue(pState.style, 'rotation') || 0
const alpha = utils.toRadians(
utils.getValue(pState.style, 'rotation') || 0
);
if (alpha !== 0) {
const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha);
const cx = new mxPoint(pState.getCenterX(), pState.getCenterY());
pt = mxUtils.getRotatedPoint(pt, cos, sin, cx);
const cx = new Point(pState.getCenterX(), pState.getCenterY());
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;
}
mxEvent.removeListener(document, 'keydown', this.keyHandler);
mxEvent.removeListener(document, 'keyup', this.keyHandler);
InternalEvent.removeListener(document, 'keydown', this.keyHandler);
InternalEvent.removeListener(document, 'keyup', this.keyHandler);
this.destroyShapes();
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
*/
import mxMouseEvent from '../../util/event/mxMouseEvent';
import InternalMouseEvent from './event/InternalMouseEvent';
import {
OUTLINE_COLOR,
OUTLINE_HANDLE_FILLCOLOR,
OUTLINE_HANDLE_STROKECOLOR,
OUTLINE_STROKEWIDTH,
} from '../../util/mxConstants';
import mxPoint from '../../util/datatypes/mxPoint';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxRectangleShape from '../../shape/node/mxRectangleShape';
import mxGraph from './mxGraph';
import mxImageShape from '../../shape/node/mxImageShape';
import mxEvent from '../../util/event/mxEvent';
import mxUtils from '../../util/mxUtils';
import mxImage from '../../util/image/mxImage';
import mxEventObject from '../../util/event/mxEventObject';
import { getSource, isMouseEvent } from '../../util/mxEventUtils';
import mxEventSource from "../../util/event/mxEventSource";
} from '../util/Constants';
import Point from './geometry/Point';
import Rectangle from './geometry/Rectangle';
import RectangleShape from './geometry/shape/node/RectangleShape';
import graph from './Graph';
import ImageShape from './geometry/shape/node/ImageShape';
import InternalEvent from './event/InternalEvent';
import utils from '../util/Utils';
import Image from './image/Image';
import EventObject from './event/EventObject';
import { getSource, isMouseEvent } from '../util/EventUtils';
import EventSource from "./event/EventSource";
/**
* @class mxOutline
* @class Outline
*
* Implements an outline (aka overview) for a graph. Set {@link updateOnPan} to true
* to enable updates while the source graph is panning.
@ -70,8 +70,8 @@ import mxEventSource from "../../util/event/mxEventSource";
* }
* ```
*/
class mxOutline {
constructor(source: mxGraph, container: HTMLElement | null = null) {
class Outline {
constructor(source: graph, container: HTMLElement | null = null) {
this.source = source;
if (container != null) {
@ -102,45 +102,45 @@ class mxOutline {
this.outline.labelsVisible = this.labelsVisible;
this.outline.setEnabled(false);
this.updateHandler = (sender: any, evt: mxEventObject) => {
this.updateHandler = (sender: any, evt: EventObject) => {
if (!this.suspended && !this.active) {
this.update();
}
};
// 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);
// Adds listeners to keep the outline in sync with the source graph
const view = this.source.getView();
view.addListener(mxEvent.SCALE, this.updateHandler);
view.addListener(mxEvent.TRANSLATE, this.updateHandler);
view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.updateHandler);
view.addListener(mxEvent.DOWN, this.updateHandler);
view.addListener(mxEvent.UP, this.updateHandler);
view.addListener(InternalEvent.SCALE, this.updateHandler);
view.addListener(InternalEvent.TRANSLATE, this.updateHandler);
view.addListener(InternalEvent.SCALE_AND_TRANSLATE, this.updateHandler);
view.addListener(InternalEvent.DOWN, this.updateHandler);
view.addListener(InternalEvent.UP, this.updateHandler);
// 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) {
(<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
this.refreshHandler = (sender: any) => {
const outline = <mxGraph>this.outline;
const outline = <graph>this.outline;
outline.setStylesheet(this.source.getStylesheet());
outline.refresh();
};
this.source.addListener(mxEvent.REFRESH, this.refreshHandler);
this.source.addListener(InternalEvent.REFRESH, this.refreshHandler);
// Creates the blue rectangle for the viewport
this.bounds = new mxRectangle(0, 0, 0, 0);
this.selectionBorder = new mxRectangleShape(
this.bounds = new Rectangle(0, 0, 0, 0);
this.selectionBorder = new RectangleShape(
this.bounds,
null,
OUTLINE_COLOR,
@ -158,22 +158,22 @@ class mxOutline {
const t = getSource(evt);
const redirect = (evt: Event) => {
const outline = <mxGraph>this.outline;
outline.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt));
const outline = <graph>this.outline;
outline.fireMouseEvent(InternalEvent.MOUSE_MOVE, new InternalMouseEvent(evt));
};
var redirect2 = (evt: Event) => {
const outline = <mxGraph>this.outline;
mxEvent.removeGestureListeners(t, null, redirect, redirect2);
outline.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt));
const outline = <graph>this.outline;
InternalEvent.removeGestureListeners(t, null, redirect, redirect2);
outline.fireMouseEvent(InternalEvent.MOUSE_UP, new InternalMouseEvent(evt));
};
const outline = <mxGraph>this.outline;
mxEvent.addGestureListeners(t, null, redirect, redirect2);
outline.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt));
const outline = <graph>this.outline;
InternalEvent.addGestureListeners(t, null, redirect, redirect2);
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)
const sizer = (this.sizer = this.createSizer());
@ -185,7 +185,7 @@ class mxOutline {
sizerNode.style.cursor = 'nwse-resize';
}
mxEvent.addGestureListeners(this.sizer.node, handler);
InternalEvent.addGestureListeners(this.sizer.node, handler);
selectionBorderNode.style.display = this.showViewport ? '' : 'none';
sizerNode.style.display = selectionBorderNode.style.display;
@ -195,9 +195,9 @@ class mxOutline {
}
// TODO: Document me!!
sizer: mxRectangleShape | null = null;
sizer: RectangleShape | null = null;
selectionBorder: mxRectangleShape | null = null;
selectionBorder: RectangleShape | null = null;
updateHandler: Function | null = null;
@ -207,7 +207,7 @@ class mxOutline {
active: boolean | null = null;
bounds: mxRectangle | null = null;
bounds: Rectangle | null = null;
zoom: boolean = false;
@ -222,14 +222,14 @@ class mxOutline {
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.
@ -268,17 +268,17 @@ class mxOutline {
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.
* @default false
*/
updateOnPan: boolean = false;
/**
* Optional {@link mxImage} to be used for the sizer.
* Optional {@link Image} to be used for the sizer.
* @default null
*/
sizerImage: mxImage | null = null;
sizerImage: Image | null = null;
/**
* Minimum scale to be used.
@ -307,10 +307,10 @@ class mxOutline {
suspended: boolean = false;
/**
* Creates the {@link mxGraph} used in the outline.
* Creates the {@link graph} used in the outline.
*/
createGraph(container: HTMLElement): mxGraph {
const graph = new mxGraph(
createGraph(container: HTMLElement): graph {
const graph = new graph(
container,
this.source.getModel(),
this.graphRenderHint,
@ -361,19 +361,19 @@ class mxOutline {
* Creates the shape used as the sizer.
*/
// createSizer(): mxShape;
createSizer(): mxRectangleShape {
const outline = <mxGraph>this.outline;
createSizer(): RectangleShape {
const outline = <graph>this.outline;
if (this.sizerImage != null) {
const sizer = new mxImageShape(
new mxRectangle(0, 0, this.sizerImage.width, this.sizerImage.height),
const sizer = new ImageShape(
new Rectangle(0, 0, this.sizerImage.width, this.sizerImage.height),
this.sizerImage.src
);
sizer.dialect = outline.dialect;
return sizer;
}
const sizer = new mxRectangleShape(
new mxRectangle(0, 0, this.sizerSize, this.sizerSize),
const sizer = new RectangleShape(
new Rectangle(0, 0, this.sizerSize, this.sizerSize),
OUTLINE_HANDLE_FILLCOLOR,
OUTLINE_HANDLE_STROKECOLOR
);
@ -384,8 +384,8 @@ class mxOutline {
/**
* Returns the size of the source container.
*/
getSourceContainerSize(): mxRectangle {
return new mxRectangle(
getSourceContainerSize(): Rectangle {
return new Rectangle(
0,
0,
(<HTMLElement>this.source.container).scrollWidth,
@ -396,7 +396,7 @@ class mxOutline {
/**
* Returns the offset for drawing the outline graph.
*/
getOutlineOffset(scale?: number): mxPoint | null {
getOutlineOffset(scale?: number): Point | null {
// TODO: Should number -> mxPoint?
return null;
}
@ -404,7 +404,7 @@ class mxOutline {
/**
* Returns the offset for drawing the outline graph.
*/
getSourceGraphBounds(): mxRectangle {
getSourceGraphBounds(): Rectangle {
return this.source.getGraphBounds();
}
@ -420,14 +420,14 @@ class mxOutline {
) {
const sourceScale = this.source.view.scale;
const scaledGraphBounds = this.getSourceGraphBounds();
const unscaledGraphBounds = new mxRectangle(
const unscaledGraphBounds = new Rectangle(
scaledGraphBounds.x / sourceScale + this.source.panDx,
scaledGraphBounds.y / sourceScale + this.source.panDy,
scaledGraphBounds.width / sourceScale,
scaledGraphBounds.height / sourceScale
);
const unscaledFinderBounds = new mxRectangle(
const unscaledFinderBounds = new Rectangle(
0,
0,
this.source.container.clientWidth / sourceScale,
@ -503,7 +503,7 @@ class mxOutline {
const { container } = this.source;
// 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.y - t.y - this.source.panDy) / scale3,
container.clientWidth / scale2,
@ -516,8 +516,8 @@ class mxOutline {
this.bounds.y +=
(this.source.container.scrollTop * navView.scale) / scale;
const selectionBorder = <mxRectangleShape>this.selectionBorder;
let b = <mxRectangle>selectionBorder.bounds;
const selectionBorder = <RectangleShape>this.selectionBorder;
let b = <Rectangle>selectionBorder.bounds;
if (
b.x !== this.bounds.x ||
@ -530,9 +530,9 @@ class mxOutline {
}
// Updates the bounds of the zoom handle at the bottom right
const sizer = <mxRectangleShape>this.sizer;
b = <mxRectangle>sizer.bounds;
const b2 = new mxRectangle(
const sizer = <RectangleShape>this.sizer;
b = <Rectangle>sizer.bounds;
const b2 = new Rectangle(
this.bounds.x + this.bounds.width - b.width / 2,
this.bounds.y + this.bounds.height - b.height / 2,
b.width,
@ -563,12 +563,12 @@ class mxOutline {
/**
* 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) {
const tol = !isMouseEvent(me.getEvent()) ? this.source.tolerance : 0;
const hit =
tol > 0
? new mxRectangle(
? new Rectangle(
me.getGraphX() - tol,
me.getGraphY() - tol,
2 * tol,
@ -578,7 +578,7 @@ class mxOutline {
this.zoom =
me.isSource(this.sizer) ||
// @ts-ignore
(hit != null && mxUtils.intersects(this.sizer.bounds, hit));
(hit != null && utils.intersects(this.sizer.bounds, hit));
this.startX = me.getX();
this.startY = me.getY();
this.active = true;
@ -586,7 +586,7 @@ class mxOutline {
if (
this.source.useScrollbarsForPanning &&
mxUtils.hasScrollbars(this.source.container)
utils.hasScrollbars(this.source.container)
) {
this.dx0 = sourceContainer.scrollLeft;
this.dy0 = sourceContainer.scrollTop;
@ -603,15 +603,15 @@ class mxOutline {
* Handles the event by previewing the viewrect in {@link graph} and updating the
* rectangle that represents the viewrect in the outline.
*/
mouseMove(sender: mxEventSource, me: mxMouseEvent): void {
mouseMove(sender: EventSource, me: InternalMouseEvent): void {
if (this.active) {
const myBounds = <mxRectangle>this.bounds;
const sizer = <mxRectangleShape>this.sizer;
const myBounds = <Rectangle>this.bounds;
const sizer = <RectangleShape>this.sizer;
const sizerNode = <SVGGElement>sizer.node;
const selectionBorder = <mxRectangleShape>this.selectionBorder;
const selectionBorder = <RectangleShape>this.selectionBorder;
const selectionBorderNode = <SVGGElement>selectionBorder.node;
const source = <mxGraph>this.source;
const outline = <mxGraph>this.outline;
const source = <graph>this.source;
const outline = <graph>this.outline;
selectionBorderNode.style.display = this.showViewport ? '' : 'none';
sizerNode.style.display = selectionBorderNode.style.display;
@ -624,7 +624,7 @@ class mxOutline {
if (!this.zoom) {
// Previews the panning on the source graph
const { scale } = outline.getView();
bounds = new mxRectangle(
bounds = new Rectangle(
myBounds.x + dx,
myBounds.y + dy,
myBounds.width,
@ -639,11 +639,11 @@ class mxOutline {
source.panGraph(-dx - <number>this.dx0, -dy - <number>this.dy0);
} else {
// Does *not* preview zooming on the source graph
const { container } = <mxGraph>this.source;
const { container } = <graph>this.source;
// @ts-ignore
const viewRatio = container.clientWidth / container.clientHeight;
dy = dx / viewRatio;
bounds = new mxRectangle(
bounds = new Rectangle(
myBounds.x,
myBounds.y,
Math.max(1, myBounds.width + dx),
@ -654,8 +654,8 @@ class mxOutline {
}
// Updates the zoom handle
const b = <mxRectangle>sizer.bounds;
sizer.bounds = new mxRectangle(
const b = <Rectangle>sizer.bounds;
sizer.bounds = new Rectangle(
bounds.x + bounds.width - b.width / 2,
bounds.y + bounds.height - b.height / 2,
b.width,
@ -691,8 +691,8 @@ class mxOutline {
* };
* ```
*/
getTranslateForEvent(me: mxMouseEvent): mxPoint {
return new mxPoint(
getTranslateForEvent(me: InternalMouseEvent): Point {
return new Point(
me.getX() - <number>this.startX,
me.getY() - <number>this.startY
);
@ -701,14 +701,14 @@ class mxOutline {
/**
* 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) {
const delta = this.getTranslateForEvent(me);
let dx = delta.x;
let dy = delta.y;
const source = <mxGraph>this.source;
const outline = <mxGraph>this.outline;
const selectionBorder = <mxRectangleShape>this.selectionBorder;
const source = <graph>this.source;
const outline = <graph>this.outline;
const selectionBorder = <RectangleShape>this.selectionBorder;
if (Math.abs(dx) > 0 || Math.abs(dy) > 0) {
if (!this.zoom) {
@ -716,7 +716,7 @@ class mxOutline {
// has no scrollbars
if (
!source.useScrollbarsForPanning ||
!mxUtils.hasScrollbars(source.container)
!utils.hasScrollbars(source.container)
) {
source.panGraph(0, 0);
dx /= outline.getView().scale;
@ -726,7 +726,7 @@ class mxOutline {
}
} else {
// Applies the new zoom
const w = (<mxRectangle>selectionBorder.bounds).width;
const w = (<Rectangle>selectionBorder.bounds).width;
const { scale } = source.getView();
source.zoomTo(
Math.max(this.minScale, scale - (dx * scale) / w),
@ -753,7 +753,7 @@ class mxOutline {
this.source.removeListener(this.refreshHandler);
this.source.getModel().removeListener(this.updateHandler);
this.source.getView().removeListener(this.updateHandler);
mxEvent.removeListener(
InternalEvent.removeListener(
this.source.container,
'scroll',
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 mxCell from '../view/cell/mxCell';
import { isNullish } from '../../util/Utils';
import Cell from './datatypes/Cell';
import type { UndoableChange } from '../types';
import type { UndoableChange } from '../../types';
/**
* Class: mxCellAttributeChange
@ -33,15 +33,15 @@ import type { UndoableChange } from '../types';
* Constructor: mxCellAttributeChange
*
* 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 {
cell: mxCell;
class CellAttributeChange implements UndoableChange {
cell: Cell;
attribute: string;
value: any;
previous: any;
constructor(cell: mxCell, attribute: string, value: any) {
constructor(cell: Cell, attribute: string, value: any) {
this.cell = cell;
this.attribute = attribute;
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
* Type definitions from the typed-mxgraph project
*/
import mxEventSource from '../util/event/mxEventSource';
import EventSource from '../event/EventSource';
import {
DEFAULT_HOTSPOT,
DEFAULT_INVALID_COLOR,
DEFAULT_VALID_COLOR,
MAX_HOTSPOT_SIZE,
MIN_HOTSPOT_SIZE,
} from '../util/mxConstants';
import mxCellHighlight from './mxCellHighlight';
import mxEventObject from '../util/event/mxEventObject';
import mxEvent from '../util/event/mxEvent';
import mxUtils from '../util/mxUtils';
import mxGraph from '../view/graph/mxGraph';
import { ColorValue } from '../types';
import mxCellState from '../view/cell/mxCellState';
import mxMouseEvent from '../util/event/mxMouseEvent';
import mxCell from '../view/cell/mxCell';
} from '../../util/Constants';
import mxCellHighlight from '../selection/mxCellHighlight';
import EventObject from '../event/EventObject';
import InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils';
import graph from '../Graph';
import { ColorValue } from '../../types';
import CellState from './datatypes/CellState';
import InternalMouseEvent from '../event/InternalMouseEvent';
import Cell from './datatypes/Cell';
/**
* Class: mxCellMarker
@ -62,9 +62,9 @@ import mxCell from '../view/cell/mxCell';
* given coordinate pair. A value of 0 means always highlight. Default is
* <mxConstants.DEFAULT_HOTSPOT>.
*/
class mxCellMarker extends mxEventSource {
class CellMarker extends EventSource {
constructor(
graph: mxGraph,
graph: graph,
validColor: ColorValue = DEFAULT_VALID_COLOR,
invalidColor: ColorValue = DEFAULT_INVALID_COLOR,
hotspot: number = DEFAULT_HOTSPOT
@ -83,7 +83,7 @@ class mxCellMarker extends mxEventSource {
*
* Reference to the enclosing <mxGraph>.
*/
graph: mxGraph;
graph: graph;
/**
* Variable: enabled
@ -135,14 +135,14 @@ class mxCellMarker extends mxEventSource {
*
* Holds the marked <mxCellState> if it is valid.
*/
validState: mxCellState | null = null;
validState: CellState | null = null;
/**
* Variable: markedState
*
* Holds the marked <mxCellState>.
*/
markedState: mxCellState | null = null;
markedState: CellState | null = null;
highlight: mxCellHighlight;
@ -257,7 +257,7 @@ class mxCellMarker extends mxEventSource {
* regardless of the marker color. The state is returned regardless of the
* marker color and valid state.
*/
process(me: mxMouseEvent) {
process(me: InternalMouseEvent) {
let state = null;
if (this.isEnabled()) {
@ -274,8 +274,8 @@ class mxCellMarker extends mxEventSource {
* Sets and marks the current valid state.
*/
setCurrentState(
state: mxCellState,
me: mxMouseEvent,
state: CellState,
me: InternalMouseEvent,
color: ColorValue = null
) {
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.
*/
markCell(cell: mxCell, color: ColorValue) {
markCell(cell: Cell, color: ColorValue) {
const state = this.graph.getView().getState(cell);
if (state) {
@ -323,7 +323,7 @@ class mxCellMarker extends mxEventSource {
mark() {
this.highlight.setHighlightColor(this.currentColor);
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, me) {
if (this.hotspotEnabled) {
return mxUtils.intersectsHotspot(
return utils.intersectsHotspot(
state,
me.getGraphX(),
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
*/
import mxPoint from '../../util/datatypes/mxPoint';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxEventSource from '../../util/event/mxEventSource';
import mxImage from '../../util/image/mxImage';
import mxCellState from "./mxCellState";
import Point from '../geometry/Point';
import Rectangle from '../geometry/Rectangle';
import EventSource from '../event/EventSource';
import Image from '../image/Image';
import CellState from "./datatypes/CellState";
/**
* Class: mxCellOverlay
@ -65,12 +65,12 @@ import mxCellState from "./mxCellState";
* values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>
* (default).
*/
class mxCellOverlay extends mxEventSource {
constructor(image: mxImage,
class CellOverlay extends EventSource {
constructor(image: Image,
tooltip: string | null=null,
align: string='right',
verticalAlign: string='bottom',
offset: mxPoint=new mxPoint(),
offset: Point=new Point(),
cursor: string='help') {
super();
@ -85,15 +85,13 @@ class mxCellOverlay extends mxEventSource {
*
* Holds the <mxImage> to be used as the icon.
*/
// image: mxImage;
image: mxImage | null = null;
image: Image | null = null;
/**
* Variable: tooltip
*
* Holds the optional string to be used as the tooltip.
*/
// tooltip?: string;
tooltip?: string | null = null;
/**
@ -103,7 +101,6 @@ class mxCellOverlay extends mxEventSource {
* <mxConstants.ALIGN_RIGHT>. For edges, the overlay always appears in the
* center of the edge.
*/
// align: string;
align: 'left' | 'center' | 'right' = 'right';
/**
@ -113,7 +110,6 @@ class mxCellOverlay extends mxEventSource {
* <mxConstants.ALIGN_BOTTOM>. For edges, the overlay always appears in the
* center of the edge.
*/
// verticalAlign: string;
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
* current scale.
*/
// offset: mxPoint;
offset: mxPoint = new mxPoint();
offset: Point = new Point();
/**
* Variable: cursor
*
* Holds the cursor for the overlay. Default is 'help'.
*/
// cursor: string;
cursor: string = 'help';
/**
@ -139,7 +133,6 @@ class mxCellOverlay extends mxEventSource {
* 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.
*/
// defaultOverlap: number;
defaultOverlap: number = 0.5;
/**
@ -175,18 +168,17 @@ class mxCellOverlay extends mxEventSource {
* state - <mxCellState> that represents the current state of the
* associated cell.
*/
// getBounds(state: mxCellState): mxRectangle;
getBounds(state: mxCellState) {
getBounds(state: CellState): Rectangle {
const isEdge = state.cell.isEdge();
const s = state.view.scale;
let pt = null;
const image = <mxImage>this.image;
const image = <Image>this.image;
const w = image.width;
const h = image.height;
if (isEdge) {
const pts = <mxPoint[]>state.absolutePoints;
const pts = <Point[]>state.absolutePoints;
if (pts.length % 2 === 1) {
pt = pts[Math.floor(pts.length / 2)];
@ -194,10 +186,10 @@ class mxCellOverlay extends mxEventSource {
const idx = pts.length / 2;
const p0 = pts[idx - 1];
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 {
pt = new mxPoint();
pt = new Point();
if (this.align === 'left') {
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.y - (h * this.defaultOverlap - this.offset.y) * s),
w * s,
@ -234,10 +226,9 @@ class mxCellOverlay extends mxEventSource {
* Returns the textual representation of the overlay to be used as the
* tooltip. This implementation returns <tooltip>.
*/
// toString(): string;
toString() {
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
*/
import mxRectangleShape from '../../shape/node/mxRectangleShape';
import mxEllipse from '../../shape/node/mxEllipse';
import mxRhombus from '../../shape/node/mxRhombus';
import mxCylinder from '../../shape/node/mxCylinder';
import mxConnector from '../../shape/edge/mxConnector';
import mxActor from '../../shape/mxActor';
import mxTriangle from '../../shape/mxTriangle';
import mxHexagon from '../../shape/node/mxHexagon';
import mxCloud from '../../shape/node/mxCloud';
import mxLine from '../../shape/edge/mxLine';
import mxArrow from '../../shape/edge/mxArrow';
import mxArrowConnector from '../../shape/edge/mxArrowConnector';
import mxDoubleEllipse from '../../shape/node/mxDoubleEllipse';
import mxSwimlane from '../../shape/mxSwimlane';
import mxImageShape from '../../shape/node/mxImageShape';
import mxLabel from '../../shape/mxLabel';
import mxText from '../../shape/mxText';
import RectangleShape from '../geometry/shape/node/RectangleShape';
import Ellipse from '../geometry/shape/node/Ellipse';
import Rhombus from '../geometry/shape/node/Rhombus';
import Cylinder from '../geometry/shape/node/Cylinder';
import mxConnector from '../geometry/shape/edge/mxConnector';
import Actor from '../geometry/shape/Actor';
import Triangle from '../geometry/shape/Triangle';
import Hexagon from '../geometry/shape/node/Hexagon';
import Cloud from '../geometry/shape/node/Cloud';
import mxLine from '../geometry/shape/edge/mxLine';
import mxArrow from '../geometry/shape/edge/mxArrow';
import mxArrowConnector from '../geometry/shape/edge/mxArrowConnector';
import DoubleEllipse from '../geometry/shape/node/DoubleEllipse';
import Swimlane from '../geometry/shape/Swimlane';
import ImageShape from '../geometry/shape/node/ImageShape';
import Label from '../geometry/shape/Label';
import mxText from '../geometry/shape/mxText';
import {
ALIGN_CENTER,
ALIGN_MIDDLE,
@ -46,23 +46,23 @@ import {
SHAPE_RHOMBUS,
SHAPE_SWIMLANE,
SHAPE_TRIANGLE,
} from '../../util/mxConstants';
import mxUtils, { convertPoint, getValue } from '../../util/mxUtils';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxStencilRegistry from '../../shape/node/mxStencilRegistry';
import mxEvent from '../../util/event/mxEvent';
} from '../../util/Constants';
import utils, { convertPoint, getValue } from '../../util/Utils';
import Rectangle from '../geometry/Rectangle';
import StencilRegistry from '../geometry/shape/node/StencilRegistry';
import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient';
import mxMouseEvent from '../../util/event/mxMouseEvent';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxEventObject from '../../util/event/mxEventObject';
import mxPoint from '../../util/datatypes/mxPoint';
import mxShape from '../../shape/mxShape';
import mxCellState from './mxCellState';
import mxCell from './mxCell';
import mxGraphModel from '../graph/mxGraphModel';
import mxCellOverlay from './mxCellOverlay';
import { getClientX, getClientY, getSource } from '../../util/mxEventUtils';
import { isNode } from '../../util/mxDomUtils';
import InternalMouseEvent from '../event/InternalMouseEvent';
import mxDictionary from '../../util/mxDictionary';
import EventObject from '../event/EventObject';
import Point from '../geometry/Point';
import Shape from '../geometry/shape/Shape';
import CellState from './datatypes/CellState';
import Cell from './datatypes/Cell';
import Model from '../model/Model';
import CellOverlay from './CellOverlay';
import { getClientX, getClientY, getSource } from '../../util/EventUtils';
import { isNode } from '../../util/DomUtils';
/**
* Class: mxCellRenderer
@ -94,7 +94,7 @@ import { isNode } from '../../util/mxDomUtils';
* arrow, rectangle, ellipse, rhombus, image, line, label, cylinder,
* swimlane, connector, actor and cloud.
*/
class mxCellRenderer {
class CellRenderer {
constructor() {}
/**
@ -104,21 +104,21 @@ class mxCellRenderer {
* known to all instances of this class. For adding new shapes you should
* use the static <mxCellRenderer.registerShape> function.
*/
static defaultShapes: { [key: string]: typeof mxShape } = {};
static defaultShapes: { [key: string]: typeof Shape } = {};
/**
* Variable: defaultEdgeShape
*
* Defines the default shape for edges. Default is <mxConnector>.
*/
defaultEdgeShape: typeof mxShape = mxConnector;
defaultEdgeShape: typeof Shape = mxConnector;
/**
* Variable: defaultVertexShape
*
* Defines the default shape for vertices. Default is <mxRectangleShape>.
*/
defaultVertexShape: typeof mxRectangleShape = mxRectangleShape;
defaultVertexShape: typeof RectangleShape = RectangleShape;
/**
* Variable: defaultTextShape
@ -173,10 +173,10 @@ class mxCellRenderer {
* ```
*
* @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) {
mxCellRenderer.defaultShapes[key] = shape;
static registerShape(key: string, shape: typeof Shape) {
CellRenderer.defaultShapes[key] = shape;
}
/**
@ -189,7 +189,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be initialized.
*/
initializeShape(state: mxCellState) {
initializeShape(state: CellState) {
if (state.shape) {
state.shape.dialect = state.view.graph.dialect;
this.configureShape(state);
@ -206,15 +206,15 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be created.
*/
createShape(state: mxCellState) {
createShape(state: CellState) {
let shape = null;
// Checks if there is a stencil for the name and creates
// 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) {
shape = new mxShape(stencil);
shape = new Shape(stencil);
} else {
const ctor = this.getShapeConstructor(state);
shape = new ctor();
@ -232,7 +232,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the indicator shape should be created.
*/
createIndicatorShape(state: mxCellState) {
createIndicatorShape(state: CellState) {
if (state.shape) {
state.shape.indicatorShape = this.getShape(
state.view.graph.getIndicatorShape(state)
@ -246,7 +246,7 @@ class mxCellRenderer {
* Returns the shape for the given name from <defaultShapes>.
*/
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.
*/
getShapeConstructor(state: mxCellState) {
getShapeConstructor(state: CellState) {
let ctor = this.getShape(state.style.shape);
if (!ctor) {
ctor = <typeof mxShape>(
ctor = <typeof Shape>(
(state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape)
);
}
@ -275,7 +275,7 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be configured.
*/
configureShape(state: mxCellState) {
configureShape(state: CellState) {
const shape = state.shape;
if (shape) {
@ -301,7 +301,7 @@ class mxCellRenderer {
* and gradient color keys.
*/
// postConfigureShape(state: mxCellState): void;
postConfigureShape(state: mxCellState) {
postConfigureShape(state: CellState) {
if (state.shape != null) {
this.resolveColor(state, 'indicatorGradientColor', 'gradientColor');
this.resolveColor(state, 'indicatorColor', 'fillColor');
@ -318,7 +318,7 @@ class mxCellRenderer {
* the respective color on the shape.
*/
// checkPlaceholderStyles(state: mxCellState): boolean;
checkPlaceholderStyles(state: mxCellState) {
checkPlaceholderStyles(state: CellState) {
// LATER: Check if the color has actually changed
if (state.style != null) {
const values = ['inherit', 'swimlane', 'indicated'];
@ -340,7 +340,7 @@ class mxCellRenderer {
* the respective color on the shape.
*/
// 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;
if (shape != null) {
@ -365,7 +365,7 @@ class mxCellRenderer {
referenced = state.cell;
}
referenced = graph.getSwimlane(<mxCell>referenced);
referenced = graph.getSwimlane(<Cell>referenced);
key = graph.swimlaneIndicatorColorAttribute;
} else if (value === 'indicated' && state.shape != null) {
// @ts-ignore
@ -416,7 +416,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the label should be created.
*/
// getLabelValue(state: mxCellState): string;
getLabelValue(state: mxCellState) {
getLabelValue(state: CellState) {
return state.view.graph.getLabel(state.cell);
}
@ -430,7 +430,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the label should be created.
*/
// createLabel(state: mxCellState, value: string): void;
createLabel(state: mxCellState, value: any) {
createLabel(state: CellState, value: any) {
const { graph } = state.view;
const isEdge = state.cell.isEdge();
@ -441,7 +441,7 @@ class mxCellRenderer {
state.text = new this.defaultTextShape(
value,
new mxRectangle(),
new Rectangle(),
state.style.align || ALIGN_CENTER,
graph.getVerticalAlign(state),
state.style.fontColor,
@ -478,7 +478,7 @@ class mxCellRenderer {
// getCellAt for the subsequent mouseMoves and the final mouseUp.
let forceGetCell = false;
const getState = (evt: Event | mxMouseEvent) => {
const getState = (evt: Event | InternalMouseEvent) => {
let result = state;
if (mxClient.IS_TOUCH || forceGetCell) {
@ -488,7 +488,7 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which
// consumes and executes the source function
const pt = convertPoint(graph.container, x, y);
result = <mxCellState>(
result = <CellState>(
graph.view.getState(graph.getCellAt(pt.x, pt.y))
);
}
@ -496,32 +496,32 @@ class mxCellRenderer {
};
// TODO: Add handling for special touch device gestures
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
state.text.node,
(evt: mxMouseEvent) => {
(evt: InternalMouseEvent) => {
if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
new mxMouseEvent(evt, state)
InternalEvent.MOUSE_DOWN,
new InternalMouseEvent(evt, state)
);
forceGetCell =
graph.dialect !== DIALECT_SVG &&
getSource(evt).nodeName === 'IMG';
}
},
(evt: mxMouseEvent) => {
(evt: InternalMouseEvent) => {
if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_MOVE,
new mxMouseEvent(evt, getState(evt))
InternalEvent.MOUSE_MOVE,
new InternalMouseEvent(evt, getState(evt))
);
}
},
(evt: mxMouseEvent) => {
(evt: InternalMouseEvent) => {
if (this.isLabelEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_UP,
new mxMouseEvent(evt, getState(evt))
InternalEvent.MOUSE_UP,
new InternalMouseEvent(evt, getState(evt))
);
forceGetCell = false;
}
@ -530,10 +530,10 @@ class mxCellRenderer {
// Uses double click timeout in mxGraph for quirks mode
if (graph.nativeDblClickEnabled) {
mxEvent.addListener(state.text.node, 'dblclick', (evt: MouseEvent) => {
InternalEvent.addListener(state.text.node, 'dblclick', (evt: MouseEvent) => {
if (this.isLabelEvent(state, evt)) {
graph.dblClick(evt, state.cell);
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
});
}
@ -550,7 +550,7 @@ class mxCellRenderer {
* state - <mxCellState> whose label should be initialized.
*/
// 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) {
shape.init(state.view.graph.container);
} else {
@ -568,7 +568,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the overlay should be created.
*/
// createCellOverlays(state: mxCellState): void;
createCellOverlays(state: mxCellState) {
createCellOverlays(state: CellState) {
const { graph } = state.view;
const overlays = graph.getCellOverlays(state.cell);
let dict = null;
@ -581,8 +581,8 @@ class mxCellRenderer {
state.overlays != null ? state.overlays.remove(overlays[i]) : null;
if (shape == null) {
const tmp = new mxImageShape(
new mxRectangle(),
const tmp = new ImageShape(
new Rectangle(),
// @ts-ignore
overlays[i].image.src
);
@ -624,7 +624,7 @@ class mxCellRenderer {
* overlay - <mxImageShape> that represents the overlay.
*/
// initializeOverlay(state: mxCellState, overlay: mxImageShape): void;
initializeOverlay(state: mxCellState, overlay: mxImageShape): void {
initializeOverlay(state: CellState, overlay: ImageShape): void {
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
state: CellState,
overlay: CellOverlay,
shape: Shape
) {
const { graph } = state.view;
mxEvent.addListener(shape.node, 'click', (evt: Event) => {
InternalEvent.addListener(shape.node, 'click', (evt: Event) => {
if (graph.isEditing()) {
graph.stopEditing(!graph.isInvokesStopCellEditing());
}
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,
(evt: Event) => {
mxEvent.consume(evt);
InternalEvent.consume(evt);
},
(evt: Event) => {
graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, state));
graph.fireMouseEvent(InternalEvent.MOUSE_MOVE, new InternalMouseEvent(evt, state));
}
);
if (mxClient.IS_TOUCH) {
mxEvent.addListener(shape.node, 'touchend', (evt: Event) => {
InternalEvent.addListener(shape.node, 'touchend', (evt: Event) => {
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.
*/
// createControl(state: mxCellState): void;
createControl(state: mxCellState) {
createControl(state: CellState) {
const { graph } = state.view;
const image = graph.getFoldingImage(state);
if (graph.foldingEnabled && image != null) {
if (state.control == null) {
const b = new mxRectangle(0, 0, image.width, image.height);
state.control = new mxImageShape(b, image.src);
const b = new Rectangle(0, 0, image.width, image.height);
state.control = new ImageShape(b, image.src);
state.control.preserveImageAspect = false;
state.control.dialect = graph.dialect;
@ -715,14 +715,14 @@ class mxCellRenderer {
* state - <mxCellState> whose control click handler should be returned.
*/
// createControlClickHandler(state: mxCellState): void;
createControlClickHandler(state: mxCellState): Function {
createControlClickHandler(state: CellState): Function {
const { graph } = state.view;
return (evt: mxEventObject) => {
return (evt: EventObject) => {
if (this.forceControlClickHandler || graph.isEnabled()) {
const collapse = !state.cell.isCollapsed();
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,
state: CellState,
control: Shape,
handleEvents: boolean,
clickHandler: Function
) {
@ -774,31 +774,31 @@ class mxCellRenderer {
node.style.cursor = 'pointer';
}
mxEvent.addListener(node, 'click', clickHandler);
InternalEvent.addListener(node, 'click', clickHandler);
}
if (handleEvents) {
let first: mxPoint | null = null;
let first: Point | null = null;
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
node,
(evt: Event) => {
first = new mxPoint(getClientX(evt), getClientY(evt));
first = new Point(getClientX(evt), getClientY(evt));
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
new mxMouseEvent(evt, state)
InternalEvent.MOUSE_DOWN,
new InternalMouseEvent(evt, state)
);
mxEvent.consume(evt);
InternalEvent.consume(evt);
},
(evt: Event) => {
graph.fireMouseEvent(
mxEvent.MOUSE_MOVE,
new mxMouseEvent(evt, state)
InternalEvent.MOUSE_MOVE,
new InternalMouseEvent(evt, state)
);
},
(evt: Event) => {
graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt, state));
mxEvent.consume(evt);
graph.fireMouseEvent(InternalEvent.MOUSE_UP, new InternalMouseEvent(evt, state));
InternalEvent.consume(evt);
}
);
@ -816,7 +816,7 @@ class mxCellRenderer {
Math.abs(first.y - getClientY(evt)) < tol
) {
clickHandler.call(clickHandler, evt);
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
}
},
@ -840,7 +840,7 @@ class mxCellRenderer {
* evt - Mouse event which was fired.
*/
// isShapeEvent(state: mxCellState, evt: MouseEvent): boolean;
isShapeEvent(state: mxCellState, evt: mxMouseEvent | MouseEvent) {
isShapeEvent(state: CellState, evt: InternalMouseEvent | MouseEvent) {
return true;
}
@ -856,7 +856,7 @@ class mxCellRenderer {
* evt - Mouse event which was fired.
*/
// isLabelEvent(state: mxCellState, evt: MouseEvent): boolean;
isLabelEvent(state: mxCellState, evt: mxMouseEvent | MouseEvent) {
isLabelEvent(state: CellState, evt: InternalMouseEvent | MouseEvent) {
return true;
}
@ -870,7 +870,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the event listeners should be isntalled.
*/
// installListeners(state: mxCellState): void;
installListeners(state: mxCellState) {
installListeners(state: CellState) {
const { graph } = state.view;
// Workaround for touch devices routing all events for a mouse
@ -889,36 +889,36 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which
// consumes and executes the source function
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;
};
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
// @ts-ignore
state.shape.node,
(evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
new mxMouseEvent(evt, state)
InternalEvent.MOUSE_DOWN,
new InternalMouseEvent(evt, state)
);
}
},
(evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_MOVE,
new mxMouseEvent(evt, getState(evt))
InternalEvent.MOUSE_MOVE,
new InternalMouseEvent(evt, getState(evt))
);
}
},
(evt: MouseEvent) => {
if (this.isShapeEvent(state, evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_UP,
new mxMouseEvent(evt, getState(evt))
InternalEvent.MOUSE_UP,
new InternalMouseEvent(evt, getState(evt))
);
}
}
@ -927,10 +927,10 @@ class mxCellRenderer {
// Uses double click timeout in mxGraph for quirks mode
if (graph.nativeDblClickEnabled) {
// @ts-ignore
mxEvent.addListener(state.shape.node, 'dblclick', (evt) => {
InternalEvent.addListener(state.shape.node, 'dblclick', (evt) => {
if (this.isShapeEvent(state, evt)) {
graph.dblClick(evt, state.cell);
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
});
}
@ -946,7 +946,7 @@ class mxCellRenderer {
* state - <mxCellState> whose label should be redrawn.
*/
// redrawLabel(state: mxCellState, forced?: boolean): void;
redrawLabel(state: mxCellState, forced: boolean) {
redrawLabel(state: CellState, forced: boolean) {
const { graph } = state.view;
const value = this.getLabelValue(state);
const wrapping = graph.isWrapping(state.cell);
@ -1043,7 +1043,7 @@ class mxCellRenderer {
* shape - <mxText> shape to be checked.
*/
// 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) {
let result = false;
@ -1097,7 +1097,7 @@ class mxCellRenderer {
* shape - <mxText> shape to be redrawn.
*/
// redrawLabelShape(shape: mxText): void;
redrawLabelShape(shape: mxShape): void {
redrawLabelShape(shape: Shape): void {
shape.redraw();
}
@ -1111,7 +1111,7 @@ class mxCellRenderer {
* state - <mxCellState> whose label scale should be returned.
*/
// getTextScale(state: mxCellState): number;
getTextScale(state: mxCellState): number {
getTextScale(state: CellState): number {
return state.view.scale;
}
@ -1125,11 +1125,11 @@ class mxCellRenderer {
* state - <mxCellState> whose label bounds should be returned.
*/
// getLabelBounds(state: mxCellState): mxRectangle;
getLabelBounds(state: mxCellState): mxRectangle {
getLabelBounds(state: CellState): Rectangle {
const { graph } = state.view;
const { scale } = state.view;
const isEdge = state.cell.isEdge();
let bounds = new mxRectangle(
let bounds = new Rectangle(
state.absoluteOffset.x,
state.absoluteOffset.y
);
@ -1209,7 +1209,7 @@ class mxCellRenderer {
* bounds - <mxRectangle> the rectangle to be rotated.
*/
// rotateLabelBounds(state: mxCellState, bounds: mxRectangle): void;
rotateLabelBounds(state: mxCellState, bounds: mxRectangle) {
rotateLabelBounds(state: CellState, bounds: Rectangle) {
// @ts-ignore
bounds.y -= state.text.margin.y * bounds.height;
// @ts-ignore
@ -1263,10 +1263,10 @@ class mxCellRenderer {
if (bounds.x !== cx || bounds.y !== cy) {
const rad = theta * (Math.PI / 180);
const pt = getRotatedPoint(
new mxPoint(bounds.x, bounds.y),
new Point(bounds.x, bounds.y),
Math.cos(rad),
Math.sin(rad),
new mxPoint(cx, cy)
new Point(cx, cy)
);
bounds.x = pt.x;
@ -1285,7 +1285,7 @@ class mxCellRenderer {
* state - <mxCellState> whose overlays should be redrawn.
*/
// redrawCellOverlays(state: mxCellState, forced?: boolean): void;
redrawCellOverlays(state: mxCellState, forced: boolean = false) {
redrawCellOverlays(state: CellState, forced: boolean = false) {
this.createCellOverlays(state);
if (state.overlays != null) {
@ -1294,7 +1294,7 @@ class mxCellRenderer {
const cos = Math.cos(rad);
const sin = Math.sin(rad);
state.overlays.visit((id: string, shape: mxShape) => {
state.overlays.visit((id: string, shape: Shape) => {
// @ts-ignore
const bounds = shape.overlay.getBounds(state);
@ -1304,10 +1304,10 @@ class mxCellRenderer {
let cy = bounds.getCenterY();
const point = getRotatedPoint(
new mxPoint(cx, cy),
new Point(cx, cy),
cos,
sin,
new mxPoint(state.getCenterX(), state.getCenterY())
new Point(state.getCenterX(), state.getCenterY())
);
cx = point.x;
@ -1341,7 +1341,7 @@ class mxCellRenderer {
* state - <mxCellState> whose control should be redrawn.
*/
// 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);
if (state.control != null && image != null) {
@ -1377,10 +1377,10 @@ class mxCellRenderer {
*/
// getControlBounds(state: mxCellState, w: number, h: number): mxRectangle;
getControlBounds(
state: mxCellState,
state: CellState,
w: number,
h: number
): mxRectangle | null {
): Rectangle | null {
if (state.control != null) {
const s = state.view.scale;
let cx = state.getCenterX();
@ -1408,10 +1408,10 @@ class mxCellRenderer {
const sin = Math.sin(rad);
const point = getRotatedPoint(
new mxPoint(cx, cy),
new Point(cx, cy),
cos,
sin,
new mxPoint(state.getCenterX(), state.getCenterY())
new Point(state.getCenterX(), state.getCenterY())
);
cx = point.x;
cy = point.y;
@ -1420,13 +1420,13 @@ class mxCellRenderer {
}
return state.cell.isEdge()
? new mxRectangle(
? new Rectangle(
Math.round(cx - (w / 2) * s),
Math.round(cy - (h / 2) * s),
Math.round(w * s),
Math.round(h * s)
)
: new mxRectangle(
: new Rectangle(
Math.round(cx - (w / 2) * s),
Math.round(cy - (h / 2) * s),
Math.round(w * s),
@ -1451,7 +1451,7 @@ class mxCellRenderer {
*/
// insertStateAfter(state: mxCellState, node: Element, htmlNode: HTMLElement): void;
insertStateAfter(
state: mxCellState,
state: CellState,
node: HTMLElement | SVGElement | null,
htmlNode: HTMLElement | SVGElement | null
) {
@ -1542,8 +1542,8 @@ class mxCellRenderer {
*/
// getShapesForState(state: mxCellState): mxShape[];
getShapesForState(
state: mxCellState
): [mxShape | null, mxText | null, mxShape | null] {
state: CellState
): [Shape | null, mxText | null, Shape | null] {
return [state.shape, state.text, state.control];
}
@ -1565,7 +1565,7 @@ class mxCellRenderer {
*/
// redraw(state: mxCellState, force?: boolean, rendering?: boolean): void;
redraw(
state: mxCellState,
state: CellState,
force: boolean = false,
rendering: boolean = true
): void {
@ -1589,7 +1589,7 @@ class mxCellRenderer {
*/
// redrawShape(state: mxCellState, force?: boolean, rendering?: boolean): void;
redrawShape(
state: mxCellState,
state: CellState,
force: boolean = false,
rendering: boolean = true
): boolean {
@ -1674,7 +1674,7 @@ class mxCellRenderer {
state.shape.bounds = null;
} else {
state.shape.points = null;
state.shape.bounds = new mxRectangle(
state.shape.bounds = new Rectangle(
state.x,
state.y,
state.width,
@ -1703,7 +1703,7 @@ class mxCellRenderer {
* Invokes redraw on the shape of the given state.
*/
// doRedrawShape(state: mxCellState): void;
doRedrawShape(state: mxCellState) {
doRedrawShape(state: CellState) {
state.shape?.redraw();
}
@ -1713,7 +1713,7 @@ class mxCellRenderer {
* Returns true if the given shape must be repainted.
*/
// isShapeInvalid(state: mxCellState, shape: mxShape): boolean;
isShapeInvalid(state: mxCellState, shape: mxShape): boolean {
isShapeInvalid(state: CellState, shape: Shape): boolean {
return (
shape.bounds == null ||
shape.scale !== state.view.scale ||
@ -1733,7 +1733,7 @@ class mxCellRenderer {
* state - <mxCellState> for which the shapes should be destroyed.
*/
// destroy(state: mxCellState): void;
destroy(state: mxCellState) {
destroy(state: CellState) {
if (state.shape != null) {
if (state.text != null) {
state.text.destroy();
@ -1741,7 +1741,7 @@ class mxCellRenderer {
}
if (state.overlays != null) {
state.overlays.visit((id: string, shape: mxShape) => {
state.overlays.visit((id: string, shape: Shape) => {
shape.destroy();
});
@ -1761,28 +1761,28 @@ class mxCellRenderer {
// Adds default shapes into the default shapes array
// @ts-ignore
mxCellRenderer.registerShape(SHAPE_RECTANGLE, mxRectangleShape);
CellRenderer.registerShape(SHAPE_RECTANGLE, RectangleShape);
// @ts-ignore
mxCellRenderer.registerShape(SHAPE_ELLIPSE, mxEllipse);
CellRenderer.registerShape(SHAPE_ELLIPSE, Ellipse);
// @ts-ignore
mxCellRenderer.registerShape(SHAPE_RHOMBUS, mxRhombus);
CellRenderer.registerShape(SHAPE_RHOMBUS, Rhombus);
// @ts-ignore
mxCellRenderer.registerShape(SHAPE_CYLINDER, mxCylinder);
mxCellRenderer.registerShape(SHAPE_CONNECTOR, mxConnector);
CellRenderer.registerShape(SHAPE_CYLINDER, mxCylinder);
CellRenderer.registerShape(SHAPE_CONNECTOR, mxConnector);
// @ts-ignore
mxCellRenderer.registerShape(SHAPE_ACTOR, mxActor);
mxCellRenderer.registerShape(SHAPE_TRIANGLE, mxTriangle);
mxCellRenderer.registerShape(SHAPE_HEXAGON, mxHexagon);
CellRenderer.registerShape(SHAPE_ACTOR, Actor);
CellRenderer.registerShape(SHAPE_TRIANGLE, Triangle);
CellRenderer.registerShape(SHAPE_HEXAGON, Hexagon);
// @ts-ignore
mxCellRenderer.registerShape(SHAPE_CLOUD, mxCloud);
mxCellRenderer.registerShape(SHAPE_LINE, mxLine);
mxCellRenderer.registerShape(SHAPE_ARROW, mxArrow);
mxCellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, mxArrowConnector);
CellRenderer.registerShape(SHAPE_CLOUD, Cloud);
CellRenderer.registerShape(SHAPE_LINE, mxLine);
CellRenderer.registerShape(SHAPE_ARROW, mxArrow);
CellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, mxArrowConnector);
// @ts-ignore
mxCellRenderer.registerShape(SHAPE_DOUBLE_ELLIPSE, mxDoubleEllipse);
mxCellRenderer.registerShape(SHAPE_SWIMLANE, mxSwimlane);
CellRenderer.registerShape(SHAPE_DOUBLE_ELLIPSE, DoubleEllipse);
CellRenderer.registerShape(SHAPE_SWIMLANE, Swimlane);
// @ts-ignore
mxCellRenderer.registerShape(SHAPE_IMAGE, mxImageShape);
mxCellRenderer.registerShape(SHAPE_LABEL, mxLabel);
CellRenderer.registerShape(SHAPE_IMAGE, ImageShape);
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
*/
import mxPoint from '../../util/datatypes/mxPoint';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxCellState from './mxCellState';
import mxCell from './mxCell';
import mxGraph from '../graph/mxGraph';
import mxGraphView from "../graph/mxGraphView";
import Point from '../geometry/Point';
import mxDictionary from '../../util/mxDictionary';
import CellState from './datatypes/CellState';
import Cell from './datatypes/Cell';
import graph from '../Graph';
import GraphView from "../view/GraphView";
/**
*
* @class mxCellStatePreview
* @class CellStatePreview
*
* Implements a live preview for moving cells.
*/
class mxCellStatePreview {
constructor(graph: mxGraph) {
class CellStatePreview {
constructor(graph: graph) {
this.deltas = new mxDictionary();
this.graph = graph;
}
@ -28,7 +28,7 @@ class mxCellStatePreview {
* Reference to the enclosing <mxGraph>.
*/
// graph: mxGraph;
graph: mxGraph;
graph: graph;
/**
* Reference to the enclosing <mxGraph>.
@ -53,7 +53,7 @@ class mxCellStatePreview {
/**
*
*
* @param {mxCellState} state
* @param {CellState} state
* @param {number} dx
* @param {number} dy
* @param {boolean} add
@ -63,17 +63,17 @@ class mxCellStatePreview {
*/
// moveState(state: mxCellState, dx: number, dy: number, add: boolean, includeEdges: boolean): mxPoint;
moveState(
state: mxCellState,
state: CellState,
dx: number,
dy: number,
add: boolean = true,
includeEdges: boolean = true
): mxPoint {
): Point {
let delta = this.deltas.get(state.cell);
if (delta == null) {
// 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.count++;
} else if (add) {
@ -115,13 +115,13 @@ class mxCellStatePreview {
/**
*
*
* @param {mxCellState} state
* @param {CellState} state
* @param {number} dx
* @param {number} dy
* @memberof mxCellStatePreview
*/
// 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) {
const model = this.graph.getModel();
@ -146,7 +146,7 @@ class mxCellStatePreview {
for (let i = 0; i < childCount; i += 1) {
this.translateState(
<mxCellState>(state.view).getState(state.cell.getChildAt(i)),
<CellState>(state.view).getState(state.cell.getChildAt(i)),
dx,
dy
);
@ -157,7 +157,7 @@ class mxCellStatePreview {
/**
*
*
* @param {mxCellState} state
* @param {CellState} state
* @param {number} dx
* @param {number} dy
* @param {Function} visitor
@ -165,7 +165,7 @@ class mxCellStatePreview {
*/
// revalidateState(state: mxCellState, dx: number, dy: number, visitor: Function): void;
revalidateState(
state: mxCellState | null = null,
state: CellState | null = null,
dx: number,
dy: number,
visitor: Function | null = null
@ -179,8 +179,8 @@ class mxCellStatePreview {
state.view.updateCellState(state);
}
const geo = (<mxCell>state.cell).getGeometry();
const pState = state.view.getState(<mxCell>state.cell.getParent());
const geo = (<Cell>state.cell).getGeometry();
const pState = state.view.getState(<Cell>state.cell.getParent());
// Moves selection vertices which are relative
if (
@ -219,16 +219,16 @@ class mxCellStatePreview {
/**
*
*
* @param {mxCellState} state
* @param {CellState} state
* @memberof mxCellStatePreview
*/
// addEdges(state: mxCellState): void;
addEdges(state: mxCellState): void {
addEdges(state: CellState): void {
const model = this.graph.getModel();
const edgeCount = state.cell.getEdgeCount();
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) {
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.
*/
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxGraphView from '../graph/mxGraphView';
import mxCell from './mxCell';
import mxCellState from './mxCellState';
import mxShape from "../../shape/mxShape";
import mxGraph from "../graph/mxGraph";
import Rectangle from '../geometry/Rectangle';
import mxDictionary from '../../util/mxDictionary';
import GraphView from '../view/GraphView';
import Cell from './datatypes/Cell';
import CellState from './datatypes/CellState';
import Shape from "../geometry/shape/Shape";
import graph from "../Graph";
class mxTemporaryCellStates {
class TemporaryCellStates {
constructor(
view: mxGraphView,
view: GraphView,
scale: number = 1,
cells: mxCell[],
cells: Cell[],
isCellVisibleFn: Function | null = null,
getLinkForCellState: Function | null = null
) {
@ -31,14 +31,14 @@ class mxTemporaryCellStates {
this.oldBounds = view.getGraphBounds();
this.oldStates = view.getStates();
this.oldScale = view.getScale();
this.oldDoRedrawShape = (<mxGraph>view.graph).cellRenderer.doRedrawShape;
this.oldDoRedrawShape = (<graph>view.graph).cellRenderer.doRedrawShape;
const self = this;
// Overrides doRedrawShape and paint shape to add links on shapes
if (getLinkForCellState != null) {
(<mxGraph>view.graph).cellRenderer.doRedrawShape = (state: mxCellState) => {
const shape = <mxShape>state?.shape;
(<graph>view.graph).cellRenderer.doRedrawShape = (state: CellState) => {
const shape = <Shape>state?.shape;
const oldPaint = shape.paint;
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;
};
}
@ -77,7 +77,7 @@ class mxTemporaryCellStates {
// the model so that the original cells are not modified
for (const cell of cells) {
const bounds = view.getBoundingBox(
view.validateCellState(<mxCell>view.validateCell(<mxCell>cell))
view.validateCellState(<Cell>view.validateCell(<Cell>cell))
);
if (bbox == null) {
bbox = bounds;
@ -85,7 +85,7 @@ class mxTemporaryCellStates {
bbox.add(bounds);
}
}
view.setGraphBounds(bbox || new mxRectangle());
view.setGraphBounds(bbox || new Rectangle());
}
}
@ -112,7 +112,7 @@ class mxTemporaryCellStates {
* @default 0
*/
// oldBounds: number;
oldBounds: mxRectangle | null = null;
oldBounds: Rectangle | null = null;
/**
* Holds the height of the rectangle.
@ -130,7 +130,7 @@ class mxTemporaryCellStates {
const view = <mxGraphView>this.view;
view.setScale(this.oldScale);
view.setStates(this.oldStates);
view.setGraphBounds(<mxRectangle>this.oldBounds);
view.setGraphBounds(<Rectangle>this.oldBounds);
// @ts-ignore
view.validateCellState = <Function>this.oldValidateCellState;
// @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 mxGraphModel from '../view/graph/mxGraphModel';
import Cell from './datatypes/Cell';
import Model from '../model/Model';
import type { UndoableChange } from '../types';
import type { UndoableChange } from '../../types';
/**
* 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
* specified model.
*
* @class mxValueChange
* @class ValueChange
*/
class mxValueChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
class ValueChange implements UndoableChange {
model: Model;
cell: Cell;
value: unknown;
previous: unknown;
constructor(model: mxGraphModel, cell: mxCell, value: unknown) {
constructor(model: Model, cell: Cell, value: unknown) {
this.model = model;
this.cell = cell;
this.value = value;
@ -26,7 +26,7 @@ class mxValueChange implements UndoableChange {
/**
* Changes the value of {@link cell}` to {@link previous}` using
* <mxGraphModel.valueForCellChanged>.
* <Transactions.valueForCellChanged>.
*/
execute() {
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
*/
import { NODETYPE_ELEMENT } from '../../util/mxConstants';
import mxGeometry from '../../util/datatypes/mxGeometry';
import mxCellOverlay from './mxCellOverlay';
import { clone } from '../../util/mxCloneUtils';
import mxPoint from '../../util/datatypes/mxPoint';
import mxCellPath from './mxCellPath';
import mxCellArray from "./mxCellArray";
import { isNotNullish } from '../../util/mxUtils';
import { NODETYPE_ELEMENT } from '../../../util/Constants';
import Geometry from '../../geometry/Geometry';
import CellOverlay from '../CellOverlay';
import { clone } from '../../../util/CloneUtils';
import Point from '../../geometry/Point';
import CellPath from './CellPath';
import CellArray from "./CellArray";
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
@ -32,8 +32,8 @@ import type { FilterFunction } from '../../types';
* graph.insertVertex(graph.getDefaultParent(), null, node, 40, 40, 80, 30);
* ```
*
* For the label to work, {@link mxGraph.convertValueToString} and
* {@link mxGraph.cellLabelChanged} should be overridden as follows:
* For the label to work, {@link graph.convertValueToString} and
* {@link graph.cellLabelChanged} should be overridden as follows:
*
* @example
* ```javascript
@ -59,12 +59,12 @@ import type { FilterFunction } from '../../types';
* cellLabelChanged.apply(this, arguments);
* };
* ```
* @class mxCell
* @class Cell
*/
class mxCell {
class Cell {
constructor(
value: any = null,
geometry: mxGeometry | null = null,
geometry: Geometry | null = null,
style: string | null = null
) {
this.value = value;
@ -77,8 +77,8 @@ class mxCell {
}
// TODO: Document me!!!
getChildren(): mxCellArray {
return this.children || new mxCellArray();
getChildren(): CellArray {
return this.children || new CellArray();
}
// TODO: Document me!
@ -88,7 +88,7 @@ class mxCell {
onInit: (() => void) | null = null;
// used by addCellOverlay() of mxGraph
overlays: mxCellOverlay[] | null = [];
overlays: CellOverlay[] | null = [];
/**
* Holds the Id. Default is null.
@ -103,7 +103,7 @@ class mxCell {
/**
* 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
@ -139,27 +139,27 @@ class mxCell {
/**
* Reference to the parent cell.
*/
parent: mxCell | null = null;
parent: Cell | null = null;
/**
* Reference to the source terminal.
*/
source: mxCell | null = null;
source: Cell | null = null;
/**
* Reference to the target terminal.
*/
target: mxCell | null = null;
target: Cell | null = null;
/**
* Holds the child cells.
*/
children: mxCellArray = new mxCellArray();
children: CellArray = new CellArray();
/**
* Holds the edges.
*/
edges: mxCellArray = new mxCellArray();
edges: CellArray = new CellArray();
/**
* 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>.
*/
getGeometry(): mxGeometry | null {
getGeometry(): Geometry | null {
return this.geometry;
}
/**
* Sets the <mxGeometry> to be used as the <geometry>.
*/
setGeometry(geometry: mxGeometry | null) {
setGeometry(geometry: Geometry | null) {
this.geometry = geometry;
}
@ -343,8 +343,8 @@ class mxCell {
/**
* Returns the cell's parent.
*/
getParent(): mxCell {
return <mxCell>this.parent;
getParent(): Cell {
return <Cell>this.parent;
}
/**
@ -354,7 +354,7 @@ class mxCell {
*
* @param parent<mxCell> that represents the new parent.
*/
setParent(parent: mxCell | null) {
setParent(parent: Cell | null) {
this.parent = parent;
}
@ -373,11 +373,11 @@ class mxCell {
/**
* 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
* should be set.
*/
setTerminal(terminal: mxCell | null, isSource: boolean) {
setTerminal(terminal: Cell | null, isSource: boolean) {
if (isSource) {
this.source = terminal;
} else {
@ -401,7 +401,7 @@ class mxCell {
*
* @param childChild whose index should be returned.
*/
getIndex(child: mxCell | null) {
getIndex(child: Cell | null) {
if (child === null) return -1;
return this.children.indexOf(child);
}
@ -413,7 +413,7 @@ class mxCell {
*
* @param indexInteger that specifies the child to be returned.
*/
getChildAt(index: number): mxCell {
getChildAt(index: number): Cell {
return this.children[index];
}
@ -429,7 +429,7 @@ class mxCell {
* @param indexOptional integer that specifies the index at which the child
* should be inserted into the child array.
*/
insert(child: mxCell, index?: number): mxCell | null {
insert(child: Cell, index?: number): Cell | null {
if (index === undefined) {
index = this.getChildCount();
@ -456,7 +456,7 @@ class mxCell {
* @param indexInteger that specifies the index of the child to be
* removed.
*/
remove(index: number): mxCell | null {
remove(index: number): Cell | null {
let child = null;
if (index >= 0) {
@ -494,7 +494,7 @@ class mxCell {
*
* @param edge<mxCell> whose index in <edges> should be returned.
*/
getEdgeIndex(edge: mxCell) {
getEdgeIndex(edge: Cell) {
return this.edges.indexOf(edge);
}
@ -518,7 +518,7 @@ class mxCell {
* @param edge <mxCell> to be inserted into the edge array.
* @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.setTerminal(this, isOutgoing);
@ -542,7 +542,7 @@ class mxCell {
* @param edge<mxCell> to be removed from the edge array.
* @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.getTerminal(!isOutgoing) !== this && this.edges != null) {
const index = this.getEdgeIndex(edge);
@ -631,7 +631,7 @@ class mxCell {
* the user object. All fields in <mxTransient> are ignored
* during the cloning.
*/
clone(): mxCell {
clone(): Cell {
const c = clone(this, this.mxTransient);
c.setValue(this.cloneValue());
return c;
@ -655,17 +655,17 @@ class mxCell {
/**
* 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
let path = mxCellPath.create(cell2);
let path = CellPath.create(cell2);
if (path.length > 0) {
// Bubbles through the ancestors of the first
// cell to find the nearest common ancestor.
let cell: mxCell | null = this;
let current: string | null = mxCellPath.create(cell);
let cell: Cell | null = this;
let current: string | null = CellPath.create(cell);
// Inverts arguments
if (path.length < current.length) {
@ -676,14 +676,14 @@ class mxCell {
}
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
if (path.indexOf(current + mxCellPath.PATH_SEPARATOR) === 0 && parent) {
if (path.indexOf(current + CellPath.PATH_SEPARATOR) === 0 && parent) {
return cell;
}
current = mxCellPath.getParentPath(current);
current = CellPath.getParentPath(current);
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 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) {
child = child.getParent();
}
@ -708,14 +708,14 @@ class mxCell {
/**
* Returns the child vertices of the given parent.
*/
getChildVertices(): mxCellArray {
getChildVertices(): CellArray {
return this.getChildCells(true, false);
}
/**
* Returns the child edges of the given parent.
*/
getChildEdges(): mxCellArray {
getChildEdges(): CellArray {
return this.getChildCells(false, true);
}
@ -728,9 +728,9 @@ class mxCell {
* @param edges Boolean indicating if child edges should be returned.
* Default is false.
*/
getChildCells(vertices: boolean = false, edges: boolean = false): mxCellArray {
getChildCells(vertices: boolean = false, edges: boolean = false): CellArray {
const childCount = this.getChildCount();
const result = new mxCellArray();
const result = new CellArray();
for (let i = 0; i < childCount; i += 1) {
const child = this.getChildAt(i);
@ -753,11 +753,11 @@ class mxCell {
*
* @param outgoing Boolean that specifies if the number of outgoing or
* 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(
outgoing: boolean,
ignoredEdge: mxCell | null = null) {
ignoredEdge: Cell | null = null) {
let count = 0;
const edgeCount = this.getEdgeCount();
@ -774,27 +774,27 @@ class mxCell {
/**
* Returns all edges of the given cell without loops.
*/
getConnections(): mxCellArray {
getConnections(): CellArray {
return this.getEdges(true, true, false);
}
/**
* Returns the incoming edges of the given cell without loops.
*/
getIncomingEdges(): mxCellArray {
getIncomingEdges(): CellArray {
return this.getEdges(true, false, false);
}
/**
* Returns the outgoing edges of the given cell without loops.
*/
getOutgoingEdges(): mxCellArray {
getOutgoingEdges(): CellArray {
return this.getEdges(false, true, false);
}
/**
* 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
* the given cell are returned including loops.
*
@ -809,9 +809,9 @@ class mxCell {
incoming: boolean = true,
outgoing: boolean = true,
includeLoops: boolean = true
): mxCellArray {
): CellArray {
const edgeCount = this.getEdgeCount();
const result = new mxCellArray();
const result = new CellArray();
for (let i = 0; i < edgeCount; i += 1) {
const edge = this.getEdgeAt(i);
@ -832,10 +832,10 @@ class mxCell {
/**
* Returns the absolute, accumulated origin for the children inside the
* given parent as an {@link mxPoint}.
* given parent as an {@link Point}.
*/
getOrigin(): mxPoint {
let result = new mxPoint();
getOrigin(): Point {
let result = new Point();
const parent = this.getParent();
if (parent) {
@ -857,7 +857,7 @@ class mxCell {
/**
* Returns all descendants of the given cell and the cell itself in an array.
*/
getDescendants(): mxCellArray {
getDescendants(): CellArray {
return this.filterDescendants(null);
}
@ -877,12 +877,12 @@ class mxCell {
* 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.
*/
filterDescendants(filter: FilterFunction | null): mxCellArray {
filterDescendants(filter: FilterFunction | null): CellArray {
// 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
// and adds it to the result array
@ -894,7 +894,7 @@ class mxCell {
const childCount = this.getChildCount();
for (let i = 0; i < childCount; i += 1) {
const child = this.getChildAt(i);
result = new mxCellArray(...result.concat(child.filterDescendants(filter)));
result = new CellArray(...result.concat(child.filterDescendants(filter)));
}
return result;
@ -903,9 +903,9 @@ class mxCell {
/**
* Returns the root of the model or the topmost parent of the given cell.
*/
getRoot(): mxCell {
let root: mxCell = this;
let cell: mxCell = this;
getRoot(): Cell {
let root: Cell = this;
let cell: Cell = this;
while (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 mxDictionary from "../../util/datatypes/mxDictionary";
import mxObjectIdentity from "../../util/datatypes/mxObjectIdentity";
import Cell from "./Cell";
import mxDictionary from "../../../util/mxDictionary";
import mxObjectIdentity from "../../../util/mxObjectIdentity";
class mxCellArray extends Array<mxCell> {
class CellArray extends Array<Cell> {
// @ts-ignore
constructor(...items: mxCell[] | mxCellArray) {
constructor(...items: Cell[] | CellArray) {
super(...items);
}
// @ts-ignore
concat(items: any): mxCellArray {
return new mxCellArray(...super.concat(items));
concat(items: any): CellArray {
return new CellArray(...super.concat(items));
}
// @ts-ignore
splice(arg0: number, ...args: any): mxCellArray {
return new mxCellArray(...super.splice(arg0, ...args));
splice(arg0: number, ...args: any): CellArray {
return new CellArray(...super.splice(arg0, ...args));
}
// @ts-ignore
slice(...args: any): mxCellArray {
return new mxCellArray(...super.slice(...args));
slice(...args: any): CellArray {
return new CellArray(...super.slice(...args));
}
// @ts-ignore
map(arg0: any, ...args: any): mxCellArray {
return new mxCellArray(...<mxCell[]>super.map(arg0, ...args));
map(arg0: any, ...args: any): CellArray {
return new CellArray(...<Cell[]>super.map(arg0, ...args));
}
// @ts-ignore
filter(arg0: any, ...args: any): mxCellArray {
return new mxCellArray(...<mxCell[]>super.filter(arg0, ...args));
filter(arg0: any, ...args: any): CellArray {
return new CellArray(...<Cell[]>super.filter(arg0, ...args));
}
/**
* Returns the cells from the given array where the given filter function
* returns true.
*/
filterCells(filter: Function): mxCellArray {
let result = new mxCellArray();
filterCells(filter: Function): CellArray {
let result = new CellArray();
for (let i = 0; i < this.length; i += 1) {
if (filter(this[i])) {
@ -51,19 +51,19 @@ class mxCellArray extends Array<mxCell> {
/**
* Returns all opposite vertices wrt terminal for the given edges, only
* 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
* in the result. Default is true.
* @param targets Boolean that specifies if target terminals should be contained
* in the result. Default is true.
*/
getOpposites(terminal: mxCell,
getOpposites(terminal: Cell,
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) {
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
* 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.
*/
getTopmostCells(): mxCellArray {
getTopmostCells(): CellArray {
const dict = new mxDictionary();
const tmp = new mxCellArray();
const tmp = new CellArray();
for (let i = 0; i < this.length; i += 1) {
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
* for the given array of cells.
*/
getParents(): mxCell[] {
getParents(): Cell[] {
const parents = [];
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
* each cell. Connections are restored based if the corresponding
* cell is contained in the passed in array.
@ -158,9 +158,9 @@ class mxCellArray extends Array<mxCell> {
* @param mapping Optional mapping for existing clones.
*/
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) {
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) {
if (clones[i] != null) {
this.restoreClone(<mxCell>clones[i], this[i], mapping);
this.restoreClone(<Cell>clones[i], this[i], mapping);
}
}
return clones;
@ -179,9 +179,9 @@ class mxCellArray extends Array<mxCell> {
*
* @private
*/
cloneCellImpl(cell: mxCell,
cloneCellImpl(cell: Cell,
mapping: any={},
includeChildren: boolean): mxCell {
includeChildren: boolean): Cell {
const ident = <string>mxObjectIdentity.get(cell);
let clone = mapping ? mapping[ident] : null;
@ -195,7 +195,7 @@ class mxCellArray extends Array<mxCell> {
for (let i = 0; i < childCount; i += 1) {
const cloneChild = this.cloneCellImpl(
<mxCell>cell.getChildAt(i),
<Cell>cell.getChildAt(i),
mapping,
true
);
@ -212,8 +212,8 @@ class mxCellArray extends Array<mxCell> {
*
* @private
*/
restoreClone(clone: mxCell,
cell: mxCell,
restoreClone(clone: Cell,
cell: Cell,
mapping: any): void {
const source = cell.getTerminal(true);
@ -236,12 +236,12 @@ class mxCellArray extends Array<mxCell> {
const childCount = clone.getChildCount();
for (let i = 0; i < childCount; i += 1) {
this.restoreClone(
<mxCell>clone.getChildAt(i),
<mxCell>cell.getChildAt(i),
<Cell>clone.getChildAt(i),
<Cell>cell.getChildAt(i),
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
* Type definitions from the typed-mxgraph project
*/
import mxCell from './mxCell';
import Cell from './Cell';
/**
* Implements a mechanism for temporary cell Ids.
* @class mxCellPath
* @class CellPath
*/
class mxCellPath {
class CellPath {
constructor() {
throw new Error("Static class can't be instantiated!");
}
@ -29,13 +29,13 @@ class mxCellPath {
*
* cell - Cell whose path should be returned.
*/
static create(cell: mxCell): string {
static create(cell: Cell): string {
let result = '';
let parent = cell.getParent();
while (parent) {
const index = parent.getIndex(cell);
result = index + mxCellPath.PATH_SEPARATOR + result;
result = index + CellPath.PATH_SEPARATOR + result;
cell = parent;
parent = cell.getParent();
@ -58,7 +58,7 @@ class mxCellPath {
* path - Path whose parent path should be returned.
*/
static getParentPath(path: string) {
const index = path.lastIndexOf(mxCellPath.PATH_SEPARATOR);
const index = path.lastIndexOf(CellPath.PATH_SEPARATOR);
if (index >= 0) {
return path.substring(0, index);
@ -79,10 +79,10 @@ class mxCellPath {
* root - Root cell of the path to be resolved.
* path - String that defines the path.
*/
static resolve(root: mxCell, path: string) {
let parent: mxCell | null = root;
static resolve(root: Cell, path: string) {
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) {
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
*/
import mxPoint from '../../util/datatypes/mxPoint';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxCell from './mxCell';
import mxGraphView from '../graph/mxGraphView';
import mxShape from '../../shape/mxShape';
import mxText from '../../shape/mxText';
import mxDictionary from '../../util/datatypes/mxDictionary';
import Point from '../../geometry/Point';
import Rectangle from '../../geometry/Rectangle';
import Cell from './Cell';
import GraphView from '../../view/GraphView';
import Shape from '../../geometry/shape/Shape';
import mxText from '../../geometry/shape/mxText';
import mxDictionary from '../../../util/mxDictionary';
import type { CellStateStyles } from '../../types';
import type { CellStateStyles } from '../../../types';
/**
* Class: mxCellState
@ -40,47 +40,47 @@ import type { CellStateStyles } from '../../types';
* cell - <mxCell> that this state represents.
* style - Array of key, value pairs that constitute the style.
*/
class mxCellState extends mxRectangle {
constructor(view: mxGraphView, cell: mxCell, style: CellStateStyles) {
class CellState extends Rectangle {
constructor(view: GraphView, cell: Cell, style: CellStateStyles) {
super();
this.view = view;
this.cell = cell;
this.style = style ?? {};
this.origin = new mxPoint();
this.absoluteOffset = new mxPoint();
this.origin = new Point();
this.absoluteOffset = new Point();
}
// referenced in mxCellRenderer
node: HTMLElement | null = null;
// 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()
control: mxShape | null = null;
control: Shape | null = null;
// Used by mxCellRenderer's createCellOverlays()
overlays: mxDictionary<mxCell, mxShape> | null = null;
overlays: mxDictionary<Cell, Shape> | null = null;
/**
* Variable: view
*
* Reference to the enclosing <mxGraphView>.
*/
view: mxGraphView;
view: GraphView;
/**
* Variable: cell
*
* Reference to the <mxCell> that is represented by this state.
*/
cell: mxCell;
cell: Cell;
/**
* Variable: style
@ -110,7 +110,7 @@ class mxCellState extends mxRectangle {
* <mxPoint> that holds the origin for all child cells. Default is a new
* empty <mxPoint>.
*/
origin: mxPoint;
origin: Point;
/**
* Variable: absolutePoints
@ -118,7 +118,7 @@ class mxCellState extends mxRectangle {
* Holds an array of <mxPoints> that represent the absolute points of an
* edge.
*/
absolutePoints: (mxPoint | null)[] = [];
absolutePoints: (Point | null)[] = [];
/**
* Variable: absoluteOffset
@ -127,21 +127,21 @@ class mxCellState extends mxRectangle {
* absolute coordinates of the label position. For vertices, this is the
* offset of the label relative to the top, left corner of the vertex.
*/
absoluteOffset: mxPoint;
absoluteOffset: Point;
/**
* Variable: visibleSourceState
*
* Caches the visible source terminal state.
*/
visibleSourceState: mxCellState | null = null;
visibleSourceState: CellState | null = null;
/**
* Variable: visibleTargetState
*
* Caches the visible target terminal state.
*/
visibleTargetState: mxCellState | null = null;
visibleTargetState: CellState | null = null;
/**
* Variable: terminalDistance
@ -170,7 +170,7 @@ class mxCellState extends mxRectangle {
*
* Holds the <mxShape> that represents the cell graphically.
*/
shape: mxShape | null = null;
shape: Shape | null = null;
/**
* Variable: text
@ -207,7 +207,7 @@ class mxCellState extends mxRectangle {
*/
getPerimeterBounds(
border: number = 0,
bounds: mxRectangle = new mxRectangle(
bounds: Rectangle = new Rectangle(
this.x,
this.y,
this.width,
@ -251,7 +251,7 @@ class mxCellState extends mxRectangle {
* isSource - Boolean that specifies if the first or last point should
* be assigned.
*/
setAbsoluteTerminalPoint(point: mxPoint, isSource = false) {
setAbsoluteTerminalPoint(point: Point, isSource = false) {
if (isSource) {
if (this.absolutePoints.length === 0) {
this.absolutePoints.push(point);
@ -307,7 +307,7 @@ class mxCellState extends mxRectangle {
* source - Boolean that specifies if the source or target state should be
* returned.
*/
getVisibleTerminalState(source = false): mxCellState | null {
getVisibleTerminalState(source = false): CellState | null {
return source ? this.visibleSourceState : this.visibleTargetState;
}
@ -321,7 +321,7 @@ class mxCellState extends mxRectangle {
* terminalState - <mxCellState> that represents the terminal.
* source - Boolean that specifies if the source or target state should be set.
*/
setVisibleTerminalState(terminalState: mxCellState, source = false) {
setVisibleTerminalState(terminalState: CellState, source = false) {
if (source) {
this.visibleSourceState = terminalState;
} else {
@ -359,13 +359,13 @@ class mxCellState extends mxRectangle {
const tr = view.translate;
const s = view.scale;
this.cellBounds = new mxRectangle(
this.cellBounds = new Rectangle(
this.x / s - tr.x,
this.y / s - tr.y,
this.width / s,
this.height / s
);
this.paintBounds = mxRectangle.fromRectangle(this.cellBounds);
this.paintBounds = Rectangle.fromRectangle(this.cellBounds);
if (this.shape && this.shape.isPaintBoundsInverted()) {
this.paintBounds.rotate90();
@ -377,7 +377,7 @@ class mxCellState extends mxRectangle {
*
* Copies all fields from the given state to this state.
*/
setState(state: mxCellState) {
setState(state: CellState) {
this.view = state.view;
this.cell = state.cell;
this.style = state.style;
@ -402,7 +402,7 @@ class mxCellState extends mxRectangle {
* Returns a clone of this <mxPoint>.
*/
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
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.
*/
isLoop(state: mxCellState) {
isLoop(state: CellState) {
const src = this.getVisibleTerminalState(true);
const trg = this.getVisibleTerminalState(false);
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 mxGraphModel from '../view/graph/mxGraphModel';
import Cell from '../datatypes/Cell';
import Model from '../../model/Model';
import type { UndoableChange } from '../types';
import type { UndoableChange } from '../../../types';
/**
* 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
* specified model.
*/
class mxTerminalChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
terminal: mxCell | null;
previous: mxCell | null;
class TerminalChange implements UndoableChange {
model: Model;
cell: Cell;
terminal: Cell | null;
previous: Cell | null;
source: boolean;
constructor(
model: mxGraphModel,
cell: mxCell,
terminal: mxCell | null,
model: Model,
cell: Cell,
terminal: Cell | null,
source: boolean
) {
this.model = model;
@ -33,7 +33,7 @@ class mxTerminalChange implements UndoableChange {
/**
* Changes the terminal of {@link cell}` to {@link previous}` using
* <mxGraphModel.terminalForCellChanged>.
* <Transactions.terminalForCellChanged>.
*/
execute() {
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
* Type definitions from the typed-mxgraph project
*/
import mxCellMarker from './mxCellMarker';
import mxPoint from '../util/datatypes/mxPoint';
import CellMarker from '../CellMarker';
import Point from '../../geometry/Point';
import {
CONNECT_HANDLE_FILLCOLOR,
CURSOR_BEND_HANDLE,
@ -30,23 +30,23 @@ import {
NONE,
OUTLINE_HIGHLIGHT_COLOR,
OUTLINE_HIGHLIGHT_STROKEWIDTH,
} from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
import mxImageShape from '../shape/node/mxImageShape';
import mxRectangleShape from '../shape/node/mxRectangleShape';
import mxConnectionConstraint from '../view/connection/mxConnectionConstraint';
import mxEvent from '../util/event/mxEvent';
import mxConstraintHandler from './mxConstraintHandler';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxClient from '../mxClient';
import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle';
} from '../../../util/Constants';
import utils from '../../../util/Utils';
import ImageShape from '../../geometry/shape/node/ImageShape';
import RectangleShape from '../../geometry/shape/node/RectangleShape';
import mxConnectionConstraint from '../../connection/mxConnectionConstraint';
import InternalEvent from '../../event/InternalEvent';
import mxConstraintHandler from '../../connection/mxConstraintHandler';
import Rectangle from '../../geometry/Rectangle';
import mxClient from '../../../mxClient';
import EdgeStyle from '../../style/EdgeStyle';
import {
getClientX,
getClientY,
isAltDown,
isMouseEvent,
isShiftDown,
} from '../util/mxEventUtils';
} from '../../../util/EventUtils';
/**
* 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.height !== pstate.height)
) {
this.parentHighlight.bounds = mxRectangle.fromRectangle(pstate);
this.parentHighlight.bounds = Rectangle.fromRectangle(pstate);
this.parentHighlight.redraw();
}
} else {
@ -388,7 +388,7 @@ class mxEdgeHandler {
this.shape.init(this.graph.getView().getOverlayPane());
this.shape.pointerEvents = false;
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
this.preferHtml =
@ -431,7 +431,7 @@ class mxEdgeHandler {
}
// Adds a rectangular handle for the label position
this.label = new mxPoint(
this.label = new Point(
this.state.absoluteOffset.x,
this.state.absoluteOffset.y
);
@ -469,7 +469,7 @@ class mxEdgeHandler {
(this.state.style.edge == null ||
this.state.style.edge === NONE ||
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) {
const shape = new mxRectangleShape(
mxRectangle.fromRectangle(bounds),
const shape = new RectangleShape(
Rectangle.fromRectangle(bounds),
null,
this.getSelectionColor()
);
@ -611,7 +611,7 @@ class mxEdgeHandler {
createMarker() {
const self = this; // closure
class MyMarker extends mxCellMarker {
class MyMarker extends CellMarker {
// Only returns edges if they are connectable and never returns
// the edge that is currently being modified
getCell = (me) => {
@ -732,7 +732,7 @@ class mxEdgeHandler {
bends.push(bend);
if (!terminal) {
this.points.push(new mxPoint(0, 0));
this.points.push(new Point(0, 0));
bend.node.style.visibility = 'hidden';
}
})(i);
@ -812,8 +812,8 @@ class mxEdgeHandler {
// createHandleShape(index: number): mxRectangleShape;
createHandleShape(index) {
if (this.handleImage != null) {
const shape = new mxImageShape(
new mxRectangle(0, 0, this.handleImage.width, this.handleImage.height),
const shape = new ImageShape(
new Rectangle(0, 0, this.handleImage.width, this.handleImage.height),
this.handleImage.src
);
@ -828,8 +828,8 @@ class mxEdgeHandler {
s -= 1;
}
return new mxRectangleShape(
new mxRectangle(0, 0, s, s),
return new RectangleShape(
new Rectangle(0, 0, s, s),
HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR
);
@ -843,8 +843,8 @@ class mxEdgeHandler {
// createLabelHandleShape(): mxRectangleShape;
createLabelHandleShape() {
if (this.labelHandleImage != null) {
const shape = new mxImageShape(
new mxRectangle(
const shape = new ImageShape(
new Rectangle(
0,
0,
this.labelHandleImage.width,
@ -859,8 +859,8 @@ class mxEdgeHandler {
return shape;
}
const s = LABEL_HANDLE_SIZE;
return new mxRectangleShape(
new mxRectangle(0, 0, s, s),
return new RectangleShape(
new Rectangle(0, 0, s, s),
LABEL_HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR
);
@ -886,7 +886,7 @@ class mxEdgeHandler {
bend.init(this.graph.getView().getOverlayPane());
}
mxEvent.redirectMouseEvents(
InternalEvent.redirectMouseEvents(
bend.node,
this.graph,
this.state,
@ -915,7 +915,7 @@ class mxEdgeHandler {
const tol = !isMouseEvent(me.getEvent()) ? this.tolerance : 1;
const hit =
this.allowHandleBoundsCheck && tol > 0
? new mxRectangle(
? new Rectangle(
me.getGraphX() - tol,
me.getGraphY() - tol,
2 * tol,
@ -931,7 +931,7 @@ class mxEdgeHandler {
shape.node.style.display !== 'none' &&
shape.node.style.visibility !== 'hidden' &&
(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 dy = me.getGraphY() - shape.bounds.getCenterY();
@ -952,13 +952,13 @@ class mxEdgeHandler {
for (let i = this.customHandles.length - 1; i >= 0; i--) {
if (checkShape(this.customHandles[i].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)) {
result = mxEvent.LABEL_HANDLE;
result = InternalEvent.LABEL_HANDLE;
}
if (this.bends != null) {
@ -972,7 +972,7 @@ class mxEdgeHandler {
if (this.virtualBends != null && this.isAddVirtualBendEvent(me)) {
for (let i = 0; i < this.virtualBends.length; i += 1) {
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) {
const b = this.bends[handle].bounds;
this.snapPoint = new mxPoint(b.getCenterX(), b.getCenterY());
this.snapPoint = new Point(b.getCenterX(), b.getCenterY());
}
if (
@ -1032,12 +1032,12 @@ class mxEdgeHandler {
if (this.removeEnabled && this.isRemovePointEvent(me.getEvent())) {
this.removePoint(this.state, handle);
} else if (
handle !== mxEvent.LABEL_HANDLE ||
handle !== InternalEvent.LABEL_HANDLE ||
this.graph.isLabelMovable(me.getCell())
) {
if (handle <= mxEvent.VIRTUAL_HANDLE) {
mxUtils.setOpacity(
this.virtualBends[mxEvent.VIRTUAL_HANDLE - handle].node,
if (handle <= InternalEvent.VIRTUAL_HANDLE) {
utils.setOpacity(
this.virtualBends[InternalEvent.VIRTUAL_HANDLE - handle].node,
100
);
}
@ -1062,7 +1062,7 @@ class mxEdgeHandler {
this.isSource = this.bends == null ? false : index === 0;
this.isTarget =
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) {
const { cell } = this.state;
@ -1082,12 +1082,12 @@ class mxEdgeHandler {
// Hides other custom handles
if (
this.index <= mxEvent.CUSTOM_HANDLE &&
this.index > mxEvent.VIRTUAL_HANDLE
this.index <= InternalEvent.CUSTOM_HANDLE &&
this.index > InternalEvent.VIRTUAL_HANDLE
) {
if (this.customHandles != null) {
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);
}
}
@ -1161,7 +1161,7 @@ class mxEdgeHandler {
getPointForEvent(me) {
const view = this.graph.getView();
const { scale } = view;
const point = new mxPoint(
const point = new Point(
this.roundLength(me.getGraphX() / scale) * scale,
this.roundLength(me.getGraphY() / scale) * scale
);
@ -1191,7 +1191,7 @@ class mxEdgeHandler {
const snapToTerminal = (terminal) => {
if (terminal != null) {
snapToPoint(
new mxPoint(
new point(
view.getRoutingCenterX(terminal),
view.getRoutingCenterY(terminal)
)
@ -1323,7 +1323,7 @@ class mxEdgeHandler {
getPreviewPoints(pt, me) {
const geometry = this.state.cell.getGeometry();
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;
if (!this.isSource && !this.isTarget) {
@ -1333,8 +1333,8 @@ class mxEdgeHandler {
points = [point];
} else {
// Adds point from virtual bend
if (this.index <= mxEvent.VIRTUAL_HANDLE) {
points.splice(mxEvent.VIRTUAL_HANDLE - this.index, 0, point);
if (this.index <= InternalEvent.VIRTUAL_HANDLE) {
points.splice(InternalEvent.VIRTUAL_HANDLE - this.index, 0, point);
}
// Removes point if dragged on terminal point
@ -1343,9 +1343,9 @@ class mxEdgeHandler {
if (i !== this.index) {
const bend = this.bends[i];
if (bend != null && mxUtils.contains(bend.bounds, pt.x, pt.y)) {
if (this.index <= mxEvent.VIRTUAL_HANDLE) {
points.splice(mxEvent.VIRTUAL_HANDLE - this.index, 1);
if (bend != null && utils.contains(bend.bounds, pt.x, pt.y)) {
if (this.index <= InternalEvent.VIRTUAL_HANDLE) {
points.splice(InternalEvent.VIRTUAL_HANDLE - this.index, 1);
} else {
points.splice(this.index - 1, 1);
}
@ -1377,7 +1377,7 @@ class mxEdgeHandler {
// Checks if point is not fixed
if (c == null || this.graph.getConnectionPoint(src, c) == null) {
abs[0] = new mxPoint(
abs[0] = new point(
src.view.getRoutingCenterX(src),
src.view.getRoutingCenterY(src)
);
@ -1395,7 +1395,7 @@ class mxEdgeHandler {
// Checks if point is not fixed
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.getRoutingCenterY(trg)
);
@ -1406,7 +1406,7 @@ class mxEdgeHandler {
if (
idx > 0 &&
idx < abs.length - 1 &&
mxUtils.ptSegDistSq(
utils.ptSegDistSq(
abs[idx - 1].x,
abs[idx - 1].y,
abs[idx + 1].x,
@ -1426,7 +1426,7 @@ class mxEdgeHandler {
}
// Updates existing point
if (result == null && this.index > mxEvent.VIRTUAL_HANDLE) {
if (result == null && this.index > InternalEvent.VIRTUAL_HANDLE) {
points[this.index - 1] = point;
}
}
@ -1445,7 +1445,7 @@ class mxEdgeHandler {
*/
// isOutlineConnectEvent(me: mxMouseEvent): boolean;
isOutlineConnectEvent(me) {
const offset = mxUtils.getOffset(this.graph.container);
const offset = utils.getOffset(this.graph.container);
const evt = me.getEvent();
const clientX = getClientX(evt);
@ -1504,7 +1504,7 @@ class mxEdgeHandler {
// 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
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);
@ -1623,15 +1623,15 @@ class mxEdgeHandler {
}
if (
this.index <= mxEvent.CUSTOM_HANDLE &&
this.index > mxEvent.VIRTUAL_HANDLE
this.index <= InternalEvent.CUSTOM_HANDLE &&
this.index > InternalEvent.VIRTUAL_HANDLE
) {
if (this.customHandles != null) {
this.customHandles[mxEvent.CUSTOM_HANDLE - this.index].processEvent(
this.customHandles[InternalEvent.CUSTOM_HANDLE - this.index].processEvent(
me
);
this.customHandles[
mxEvent.CUSTOM_HANDLE - this.index
InternalEvent.CUSTOM_HANDLE - this.index
].positionChanged();
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
// in highlight.isHighlightAt (which uses comonentFromPoint)
this.drawPreview();
mxEvent.consume(me.getEvent());
InternalEvent.consume(me.getEvent());
me.consume();
}
}
@ -1746,15 +1746,15 @@ class mxEdgeHandler {
this.graph.validationAlert(this.error);
}
} else if (
index <= mxEvent.CUSTOM_HANDLE &&
index > mxEvent.VIRTUAL_HANDLE
index <= InternalEvent.CUSTOM_HANDLE &&
index > InternalEvent.VIRTUAL_HANDLE
) {
if (this.customHandles != null) {
const model = this.graph.getModel();
model.beginUpdate();
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) {
this.shape.apply(this.state);
@ -1986,9 +1986,9 @@ class mxEdgeHandler {
// Resets the offset inside the geometry to find the offset
// from the resulting point
geometry.offset = new mxPoint(0, 0);
geometry.offset = new Point(0, 0);
pt = this.graph.view.getPoint(edgeState, geometry);
geometry.offset = new mxPoint(
geometry.offset = new Point(
Math.round((x - pt.x) / scale),
Math.round((y - pt.y) / scale)
);
@ -2001,7 +2001,7 @@ class mxEdgeHandler {
const cx = p0.x + (pe.x - p0.x) / 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((y - cy) / scale)
);
@ -2132,7 +2132,7 @@ class mxEdgeHandler {
*/
// addPoint(state: mxCellState, evt: Event): void;
addPoint(state, evt) {
const pt = mxUtils.convertPoint(
const pt = utils.convertPoint(
this.graph.container,
getClientX(evt),
getClientY(evt)
@ -2140,7 +2140,7 @@ class mxEdgeHandler {
const gridEnabled = this.graph.isGridEnabledEvent(evt);
this.convertPoint(pt, gridEnabled);
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, x, y) {
let geo = state.cell.getGeometry();
const pt = new mxPoint(x, y);
const pt = new Point(x, y);
if (geo != null) {
geo = geo.clone();
const t = this.graph.view.translate;
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();
if (parent.isVertex()) {
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,
pt.x * s + offset.x,
pt.y * s + offset.y
@ -2280,11 +2280,11 @@ class mxEdgeHandler {
// Updates the handle for the label position
let b = this.labelShape.bounds;
this.label = new mxPoint(
this.label = new Point(
this.state.absoluteOffset.x,
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.y - b.height / 2),
b.width,
@ -2304,7 +2304,7 @@ class mxEdgeHandler {
const y0 = p0.y;
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(y0 - b.height / 2),
b.width,
@ -2323,7 +2323,7 @@ class mxEdgeHandler {
const bn = this.bends.length - 1;
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(yn - b.height / 2),
b.width,
@ -2352,14 +2352,14 @@ class mxEdgeHandler {
b = this.virtualBends[i];
const x = last.x + (pt.x - last.x) / 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(y - b.bounds.height / 2),
b.bounds.width,
b.bounds.height
);
b.redraw();
mxUtils.setOpacity(b.node, this.virtualBendOpacity);
utils.setOpacity(b.node, this.virtualBendOpacity);
last = pt;
if (this.manageLabelHandle) {
@ -2452,7 +2452,7 @@ class mxEdgeHandler {
const b = this.bends[i].bounds;
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(y - b.height / 2),
b.width,
@ -2464,11 +2464,11 @@ class mxEdgeHandler {
} else if (
this.handleImage == null &&
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 h = HANDLE_SIZE + 3;
this.bends[i].bounds = new mxRectangle(
this.bends[i].bounds = new Rectangle(
Math.round(x - w / 2),
Math.round(y - h / 2),
w,
@ -2496,7 +2496,7 @@ class mxEdgeHandler {
if (this.labelShape != null) {
const b2 = this.labelShape.bounds;
if (mxUtils.intersects(b, b2)) {
if (utils.intersects(b, b2)) {
if (b.getCenterY() < b2.getCenterY()) {
b2.y = b.y + b.height;
} else {
@ -2516,7 +2516,7 @@ class mxEdgeHandler {
try {
if (this.isLabel) {
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.y - b.height / 2),
b.width,
@ -2531,7 +2531,7 @@ class mxEdgeHandler {
if (
this.shape != null &&
!mxUtils.equalPoints(this.shape.points, this.abspoints)
!utils.equalPoints(this.shape.points, this.abspoints)
) {
this.shape.apply(this.state);
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
* Type definitions from the typed-mxgraph project
*/
import mxPoint from '../util/datatypes/mxPoint';
import { CURSOR_TERMINAL_HANDLE } from '../util/mxConstants';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxUtils from '../util/mxUtils';
import Point from '../../geometry/Point';
import { CURSOR_TERMINAL_HANDLE } from '../../../util/Constants';
import Rectangle from '../../geometry/Rectangle';
import utils from '../../../util/Utils';
import mxElbowEdgeHandler from './mxElbowEdgeHandler';
class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
@ -42,8 +42,8 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
pts = [
pts[0],
new mxPoint(cx, cy),
new mxPoint(cx, cy),
new Point(cx, cy),
new Point(cx, cy),
pts[pts.length - 1],
];
}
@ -100,8 +100,8 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
const y = result[0].y * scale + tr.y;
if (
(source != null && mxUtils.contains(source, x, y)) ||
(target != null && mxUtils.contains(target, x, y))
(source != null && utils.contains(source, x, y)) ||
(target != null && utils.contains(target, x, y))
) {
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;
@ -288,7 +288,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
!this.isSource &&
!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');
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) {
const cx = pts[0].x + (pts[pts.length - 1].x - pts[0].x) / 2;
pts[1] = new mxPoint(cx, pts[1].y);
pts[2] = new mxPoint(cx, pts[2].y);
pts[1] = new Point(cx, pts[1].y);
pts[2] = new Point(cx, pts[2].y);
} else {
const cy = pts[0].y + (pts[pts.length - 1].y - pts[0].y) / 2;
pts[1] = new mxPoint(pts[1].x, cy);
pts[2] = new mxPoint(pts[2].x, cy);
pts[1] = new Point(pts[1].x, cy);
pts[2] = new Point(pts[2].x, cy);
}
}
@ -385,12 +385,12 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
if (this.bends[i + 1] != null) {
p0 = pts[i];
pe = pts[i + 1];
const pt = new mxPoint(
const pt = new Point(
p0.x + (pe.x - p0.x) / 2,
p0.y + (pe.y - p0.y) / 2
);
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.y - b.height / 2),
b.width,
@ -405,8 +405,8 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
}
if (straight) {
mxUtils.setOpacity(this.bends[1].node, this.virtualBendOpacity);
mxUtils.setOpacity(this.bends[3].node, this.virtualBendOpacity);
utils.setOpacity(this.bends[1].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,
ELBOW_VERTICAL,
HANDLE_SIZE,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxPoint from '../util/datatypes/mxPoint';
import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle';
import mxResources from '../util/mxResources';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxUtils from '../util/mxUtils';
import mxClient from '../mxClient';
import { isConsumed } from '../util/mxEventUtils';
} from '../../../util/Constants';
import InternalEvent from '../../event/InternalEvent';
import Point from '../../geometry/Point';
import EdgeStyle from '../../style/EdgeStyle';
import Resources from '../../../util/Resources';
import Rectangle from '../../geometry/Rectangle';
import utils from '../../../util/Utils';
import mxClient from '../../../mxClient';
import { isConsumed } from '../../../util/EventUtils';
/**
* Class: mxElbowEdgeHandler
@ -80,12 +80,12 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
this.createVirtualBend((evt) => {
if (!isConsumed(evt) && this.flipEnabled) {
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
bend = this.createHandleShape(2);
@ -147,7 +147,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
(node === this.bends[1].node || node.parentNode === this.bends[1].node)
) {
tip = this.doubleClickOrientationResource;
tip = mxResources.get(tip) || tip; // translate
tip = Resources.get(tip) || tip; // translate
}
return tip;
@ -206,9 +206,9 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
}
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 {
pt = new mxPoint(
pt = new Point(
this.graph.getView().scale *
(pt.x + this.graph.getView().translate.x + this.state.origin.x),
this.graph.getView().scale *
@ -221,7 +221,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
const b = this.bends[1].bounds;
let w = b.width;
let h = b.height;
let bounds = new mxRectangle(
let bounds = new Rectangle(
Math.round(pt.x - w / 2),
Math.round(pt.y - h / 2),
w,
@ -233,11 +233,11 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
} else if (
this.handleImage == null &&
this.labelShape.visible &&
mxUtils.intersects(bounds, this.labelShape.bounds)
utils.intersects(bounds, this.labelShape.bounds)
) {
w = HANDLE_SIZE + 3;
h = HANDLE_SIZE + 3;
bounds = new mxRectangle(
bounds = new Rectangle(
Math.floor(pt.x - w / 2),
Math.floor(pt.y - h / 2),
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
*/
import mxUtils from '../util/mxUtils';
import mxPoint from '../util/datatypes/mxPoint';
import mxImageShape from '../shape/node/mxImageShape';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxRectangleShape from '../shape/node/mxRectangleShape';
import utils from '../../../util/Utils';
import Point from '../../geometry/Point';
import ImageShape from '../../geometry/shape/node/ImageShape';
import Rectangle from '../../geometry/Rectangle';
import RectangleShape from '../../geometry/shape/node/RectangleShape';
import {
DIALECT_STRICTHTML,
DIALECT_SVG,
HANDLE_FILLCOLOR,
HANDLE_SIZE,
HANDLE_STROKECOLOR,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
} from '../../../util/Constants';
import InternalEvent from '../../event/InternalEvent';
/**
* Implements a single custom handle for vertices.
@ -85,7 +85,7 @@ class mxHandle {
processEvent(me) {
const { scale } = this.graph.view;
const tr = this.graph.view.translate;
let pt = new mxPoint(
let pt = new Point(
me.getGraphX() / scale - tr.x,
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
const alpha1 = -mxUtils.toRadians(this.getRotation());
const alpha2 = -mxUtils.toRadians(this.getTotalRotation()) - alpha1;
const alpha1 = -utils.toRadians(this.getRotation());
const alpha2 = -utils.toRadians(this.getTotalRotation()) - alpha1;
pt = this.flipPoint(
this.rotatePoint(
this.snapPoint(
@ -162,8 +162,8 @@ class mxHandle {
const html = this.isHtmlRequired();
if (this.image != null) {
this.shape = new mxImageShape(
new mxRectangle(0, 0, this.image.width, this.image.height),
this.shape = new ImageShape(
new Rectangle(0, 0, this.image.width, this.image.height),
this.image.src
);
this.shape.preserveImageAspect = false;
@ -179,9 +179,9 @@ class mxHandle {
*/
// createShape(html: any): mxShape;
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;
}
@ -214,7 +214,7 @@ class mxHandle {
let pt = this.getPosition(this.state.getPaintBounds());
if (pt != null) {
const alpha = mxUtils.toRadians(this.getTotalRotation());
const alpha = utils.toRadians(this.getTotalRotation());
pt = this.rotatePoint(this.flipPoint(pt), alpha);
const { scale } = this.graph.view;
@ -250,11 +250,11 @@ class mxHandle {
// rotatePoint(pt: mxPoint, alpha: boolean): mxPoint;
rotatePoint(pt, alpha) {
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 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
* Type definitions from the typed-mxgraph project
*/
import mxRectangle from '../util/datatypes/mxRectangle';
import Rectangle from '../../geometry/Rectangle';
import {
CURSOR_LABEL_HANDLE,
CURSOR_MOVABLE_VERTEX,
@ -19,15 +19,15 @@ import {
VERTEX_SELECTION_COLOR,
VERTEX_SELECTION_DASHED,
VERTEX_SELECTION_STROKEWIDTH,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxRectangleShape from '../shape/node/mxRectangleShape';
import mxImageShape from '../shape/node/mxImageShape';
import mxEllipse from '../shape/node/mxEllipse';
import mxPoint from '../util/datatypes/mxPoint';
import mxUtils from '../util/mxUtils';
import mxClient from '../mxClient';
import { isMouseEvent, isShiftDown } from '../util/mxEventUtils';
} from '../../../util/Constants';
import InternalEvent from '../../event/InternalEvent';
import RectangleShape from '../../geometry/shape/node/RectangleShape';
import ImageShape from '../../geometry/shape/node/ImageShape';
import Ellipse from '../../geometry/shape/node/Ellipse';
import Point from '../../geometry/Point';
import utils from '../../../util/Utils';
import mxClient from '../../../mxClient';
import { isMouseEvent, isShiftDown } from '../../../util/EventUtils';
/**
* Class: mxVertexHandler
@ -65,7 +65,7 @@ class mxVertexHandler {
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() {
this.graph = this.state.view.graph;
this.selectionBounds = this.getSelectionBounds(this.state);
this.bounds = new mxRectangle(
this.bounds = new Rectangle(
this.selectionBounds.x,
this.selectionBounds.y,
this.selectionBounds.width,
@ -251,7 +251,7 @@ class mxVertexHandler {
this.state.style.rotation || '0'
);
this.selectionBorder.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents(
InternalEvent.redirectMouseEvents(
this.selectionBorder.node,
this.graph,
this.state
@ -302,7 +302,7 @@ class mxVertexHandler {
// Marks this as the label handle for getHandleForEvent
this.labelShape = this.createSizer(
CURSOR_LABEL_HANDLE,
mxEvent.LABEL_HANDLE,
InternalEvent.LABEL_HANDLE,
LABEL_HANDLE_SIZE,
LABEL_HANDLE_FILLCOLOR
);
@ -316,7 +316,7 @@ class mxVertexHandler {
) {
this.labelShape = this.createSizer(
CURSOR_MOVABLE_VERTEX,
mxEvent.LABEL_HANDLE,
InternalEvent.LABEL_HANDLE,
null,
LABEL_HANDLE_FILLCOLOR
);
@ -328,7 +328,7 @@ class mxVertexHandler {
if (this.isRotationHandleVisible()) {
this.rotationShape = this.createSizer(
this.rotationCursor,
mxEvent.ROTATION_HANDLE,
InternalEvent.ROTATION_HANDLE,
HANDLE_SIZE + 3,
HANDLE_FILLCOLOR
);
@ -427,7 +427,7 @@ class mxVertexHandler {
*/
// getSelectionBounds(state: mxCellState): mxRectangle;
getSelectionBounds(state) {
return new mxRectangle(
return new Rectangle(
Math.round(state.x),
Math.round(state.y),
Math.round(state.width),
@ -452,8 +452,8 @@ class mxVertexHandler {
*/
// createSelectionShape(bounds: mxRectangle): mxRectangleShape;
createSelectionShape(bounds) {
const shape = new mxRectangleShape(
mxRectangle.fromRectangle(bounds),
const shape = new RectangleShape(
Rectangle.fromRectangle(bounds),
null,
this.getSelectionColor()
);
@ -503,7 +503,7 @@ class mxVertexHandler {
createSizer(cursor, index, size, fillColor) {
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);
if (
@ -521,7 +521,7 @@ class mxVertexHandler {
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()) {
sizer.setCursor(cursor);
@ -555,27 +555,27 @@ class mxVertexHandler {
// createSizerShape(bounds: mxRectangle, index: number, fillColor: string): mxShape;
createSizerShape(bounds, index, fillColor) {
if (this.handleImage != null) {
bounds = new mxRectangle(
bounds = new Rectangle(
bounds.x,
bounds.y,
this.handleImage.width,
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
shape.preserveImageAspect = false;
return shape;
}
if (index === mxEvent.ROTATION_HANDLE) {
return new mxEllipse(
if (index === InternalEvent.ROTATION_HANDLE) {
return new Ellipse(
bounds,
fillColor || HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR
);
}
return new mxRectangleShape(
return new RectangleShape(
bounds,
fillColor || HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR
@ -613,7 +613,7 @@ class mxVertexHandler {
const tol = !isMouseEvent(me.getEvent()) ? this.tolerance : 1;
const hit =
this.allowHandleBoundsCheck && tol > 0
? new mxRectangle(
? new Rectangle(
me.getGraphX() - tol,
me.getGraphY() - tol,
2 * tol,
@ -624,13 +624,13 @@ class mxVertexHandler {
const checkShape = (shape) => {
const st =
shape != null &&
shape.constructor !== mxImageShape &&
shape.constructor !== ImageShape &&
this.allowHandleBoundsCheck
? shape.strokewidth + shape.svgStrokeTolerance
: null;
const real =
st != null
? new mxRectangle(
? new Rectangle(
me.getGraphX() - Math.floor(st / 2),
me.getGraphY() - Math.floor(st / 2),
st,
@ -642,17 +642,17 @@ class mxVertexHandler {
shape != null &&
(me.isSource(shape) ||
(real != null &&
mxUtils.intersects(shape.bounds, real) &&
utils.intersects(shape.bounds, real) &&
shape.node.style.display !== 'none' &&
shape.node.style.visibility !== 'hidden'))
);
};
if (checkShape(this.rotationShape)) {
return mxEvent.ROTATION_HANDLE;
return InternalEvent.ROTATION_HANDLE;
}
if (checkShape(this.labelShape)) {
return mxEvent.LABEL_HANDLE;
return InternalEvent.LABEL_HANDLE;
}
if (this.sizers != null) {
@ -668,7 +668,7 @@ class mxVertexHandler {
for (let i = this.customHandles.length - 1; i >= 0; i--) {
if (checkShape(this.customHandles[i].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.startY = y;
if (this.index <= mxEvent.CUSTOM_HANDLE && this.isGhostPreview()) {
if (this.index <= InternalEvent.CUSTOM_HANDLE && this.isGhostPreview()) {
this.ghostPreview = this.createGhostPreview();
} else {
// Saves reference to parent state
@ -754,7 +754,7 @@ class mxVertexHandler {
// Creates a preview that can be on top of any HTML label
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
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
const pos = this.getRotationHandlePosition();
@ -792,17 +792,17 @@ class mxVertexHandler {
if (this.livePreviewActive) {
this.hideSizers();
if (index === mxEvent.ROTATION_HANDLE) {
if (index === InternalEvent.ROTATION_HANDLE) {
this.rotationShape.node.style.display = '';
} else if (index === mxEvent.LABEL_HANDLE) {
} else if (index === InternalEvent.LABEL_HANDLE) {
this.labelShape.node.style.display = '';
} else if (this.sizers != null && this.sizers[index] != null) {
this.sizers[index].node.style.display = '';
} else if (
index <= mxEvent.CUSTOM_HANDLE &&
index <= InternalEvent.CUSTOM_HANDLE &&
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
@ -940,13 +940,13 @@ class mxVertexHandler {
this.checkTolerance(me);
if (!this.inTolerance) {
if (this.index <= mxEvent.CUSTOM_HANDLE) {
if (this.index <= InternalEvent.CUSTOM_HANDLE) {
if (this.customHandles != null) {
this.customHandles[mxEvent.CUSTOM_HANDLE - this.index].processEvent(
this.customHandles[InternalEvent.CUSTOM_HANDLE - this.index].processEvent(
me
);
this.customHandles[
mxEvent.CUSTOM_HANDLE - this.index
InternalEvent.CUSTOM_HANDLE - this.index
].active = true;
if (this.ghostPreview != null) {
@ -968,14 +968,14 @@ class mxVertexHandler {
}
this.customHandles[
mxEvent.CUSTOM_HANDLE - this.index
InternalEvent.CUSTOM_HANDLE - this.index
].positionChanged();
}
}
} else if (this.index === mxEvent.LABEL_HANDLE) {
} else if (this.index === InternalEvent.LABEL_HANDLE) {
this.moveLabel(me);
} else {
if (this.index === mxEvent.ROTATION_HANDLE) {
if (this.index === InternalEvent.ROTATION_HANDLE) {
this.rotateVertex(me);
} else {
this.resizeVertex(me);
@ -1009,7 +1009,7 @@ class mxVertexHandler {
*/
// moveLabel(me: mxMouseEvent): void;
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 { scale } = this.graph.view;
@ -1032,7 +1032,7 @@ class mxVertexHandler {
*/
// rotateVertex(me: mxMouseEvent): void;
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 dy = this.state.y + this.state.height / 2 - point.y;
this.currentAlpha =
@ -1079,9 +1079,9 @@ class mxVertexHandler {
*/
// resizeVertex(me: mxMouseEvent): void;
resizeVertex(me) {
const ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY());
const alpha = mxUtils.toRadians(this.state.style.rotation || '0');
const point = new mxPoint(me.getGraphX(), me.getGraphY());
const ct = new point(this.state.getCenterX(), this.state.getCenterY());
const alpha = utils.toRadians(this.state.style.rotation || '0');
const point = new Point(me.getGraphX(), me.getGraphY());
const tr = this.graph.view.translate;
const { scale } = this.graph.view;
let cos = Math.cos(-alpha);
@ -1105,7 +1105,7 @@ class mxVertexHandler {
this.index,
this.graph.isGridEnabledEvent(me.getEvent()),
1,
new mxPoint(0, 0),
new point(0, 0),
this.isConstrainedEvent(me),
this.isCenteredEvent(this.state, me)
);
@ -1116,7 +1116,7 @@ class mxVertexHandler {
// Handles child cells
if (max != null && this.parentState != null) {
max = mxRectangle.fromRectangle(max);
max = Rectangle.fromRectangle(max);
max.x -= (this.parentState.x - tr.x * 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);
if (overlap > 0) {
tmp = mxRectangle.fromRectangle(tmp);
tmp = Rectangle.fromRectangle(tmp);
tmp.x -= tmp.width * overlap;
tmp.y -= tmp.height * overlap;
@ -1140,7 +1140,7 @@ class mxVertexHandler {
if (max == null) {
max = tmp;
} else {
max = mxRectangle.fromRectangle(max);
max = Rectangle.fromRectangle(max);
max.intersect(tmp);
}
}
@ -1182,7 +1182,7 @@ class mxVertexHandler {
}
const old = this.bounds;
this.bounds = new mxRectangle(
this.bounds = new Rectangle(
(this.parentState != null ? this.parentState.x : tr.x * scale) +
this.unscaledBounds.x * scale,
(this.parentState != null ? this.parentState.y : tr.y * scale) +
@ -1199,7 +1199,7 @@ class mxVertexHandler {
cos = Math.cos(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;
dy = c2.y - ct.y;
@ -1268,7 +1268,7 @@ class mxVertexHandler {
// Temporarily changes size and origin
this.state.x = this.bounds.x;
this.state.y = this.bounds.y;
this.state.origin = new mxPoint(
this.state.origin = new Point(
this.state.x / scale - tr.x,
this.state.y / scale - tr.y
);
@ -1277,7 +1277,7 @@ class mxVertexHandler {
// Redraws cell and handles
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
this.state.absoluteOffset.x = 0;
@ -1352,7 +1352,7 @@ class mxVertexHandler {
// mouseUp(sender: any, me: mxMouseEvent): void;
mouseUp(sender, me) {
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;
this.index = null;
@ -1364,27 +1364,27 @@ class mxVertexHandler {
this.graph.getModel().beginUpdate();
try {
if (index <= mxEvent.CUSTOM_HANDLE) {
if (index <= InternalEvent.CUSTOM_HANDLE) {
if (this.customHandles != null) {
// Creates style before changing cell state
const style = this.state.view.graph.getCellStyle(this.state.cell);
this.customHandles[mxEvent.CUSTOM_HANDLE - index].active = false;
this.customHandles[mxEvent.CUSTOM_HANDLE - index].execute(me);
this.customHandles[InternalEvent.CUSTOM_HANDLE - index].active = false;
this.customHandles[InternalEvent.CUSTOM_HANDLE - index].execute(me);
// Sets style and apply on shape to force repaint and
// check if execute has removed custom handles
if (
this.customHandles != null &&
this.customHandles[mxEvent.CUSTOM_HANDLE - index] != null
this.customHandles[InternalEvent.CUSTOM_HANDLE - index] != null
) {
this.state.style = style;
this.customHandles[
mxEvent.CUSTOM_HANDLE - index
InternalEvent.CUSTOM_HANDLE - index
].positionChanged();
}
}
} else if (index === mxEvent.ROTATION_HANDLE) {
} else if (index === InternalEvent.ROTATION_HANDLE) {
if (this.currentAlpha != null) {
const delta =
this.currentAlpha - (this.state.style.rotation || 0);
@ -1397,7 +1397,7 @@ class mxVertexHandler {
}
} else {
const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent());
const alpha = mxUtils.toRadians(
const alpha = utils.toRadians(
this.state.style.rotation || '0'
);
const cos = Math.cos(-alpha);
@ -1484,7 +1484,7 @@ class mxVertexHandler {
if (pgeo != null && !parent.isEdge()) {
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);
}
@ -1560,7 +1560,7 @@ class mxVertexHandler {
if (this.selectionBorder != null) {
this.selectionBorder.node.style.display = 'inline';
this.selectionBounds = this.getSelectionBounds(this.state);
this.bounds = new mxRectangle(
this.bounds = new Rectangle(
this.selectionBounds.x,
this.selectionBounds.y,
this.selectionBounds.width,
@ -1587,15 +1587,15 @@ class mxVertexHandler {
let geo = cell.getGeometry();
if (geo != null) {
if (index === mxEvent.LABEL_HANDLE) {
const alpha = -mxUtils.toRadians(
if (index === InternalEvent.LABEL_HANDLE) {
const alpha = -utils.toRadians(
this.state.style.rotation || '0'
);
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const { scale } = this.graph.view;
const pt = mxUtils.getRotatedPoint(
new mxPoint(
const pt = utils.getRotatedPoint(
new Point(
Math.round(
(this.labelShape.bounds.getCenterX() - this.startX) / scale
),
@ -1722,8 +1722,8 @@ class mxVertexHandler {
y = this.graph.snap(y / scale) * scale;
}
const rect = new mxRectangle(bounds.x, bounds.y, 0, 0);
rect.add(new mxRectangle(x, y, 0, 0));
const rect = new Rectangle(bounds.x, bounds.y, 0, 0);
rect.add(new Rectangle(x, y, 0, 0));
return rect;
}
@ -1820,7 +1820,7 @@ class mxVertexHandler {
height = Math.abs(height);
}
const result = new mxRectangle(
const result = new Rectangle(
left + tr.x * scale,
top + tr.y * scale,
width,
@ -1853,7 +1853,7 @@ class mxVertexHandler {
// redraw(): void;
redraw(ignoreHandles) {
this.selectionBounds = this.getSelectionBounds(this.state);
this.bounds = new mxRectangle(
this.bounds = new Rectangle(
this.selectionBounds.x,
this.selectionBounds.y,
this.selectionBounds.width,
@ -1872,7 +1872,7 @@ class mxVertexHandler {
// getHandlePadding(): mxPoint;
getHandlePadding() {
// 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;
if (
@ -1952,7 +1952,7 @@ class mxVertexHandler {
this.verticalOffset = padding.y;
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.width += this.horizontalOffset;
@ -1999,63 +1999,63 @@ class mxVertexHandler {
'w-resize',
];
const alpha = mxUtils.toRadians(
const alpha = utils.toRadians(
this.state.style.rotation || '0'
);
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const da = Math.round((alpha * 4) / Math.PI);
const ct = new mxPoint(s.getCenterX(), s.getCenterY());
let pt = mxUtils.getRotatedPoint(new mxPoint(s.x, s.y), cos, sin, ct);
const ct = new Point(s.getCenterX(), s.getCenterY());
let pt = utils.getRotatedPoint(new Point(s.x, s.y), cos, sin, ct);
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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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);
} else if (this.state.width >= 2 && this.state.height >= 2) {
this.moveSizerTo(
@ -2070,7 +2070,7 @@ class mxVertexHandler {
}
if (this.rotationShape != null) {
const alpha = mxUtils.toRadians(
const alpha = utils.toRadians(
this.currentAlpha != null
? this.currentAlpha
: this.state.style.rotation || '0'
@ -2078,8 +2078,8 @@ class mxVertexHandler {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY());
const pt = mxUtils.getRotatedPoint(
const ct = new Point(this.state.getCenterX(), this.state.getCenterY());
const pt = utils.getRotatedPoint(
this.getRotationHandlePosition(),
cos,
sin,
@ -2128,7 +2128,7 @@ class mxVertexHandler {
*/
// getRotationHandlePosition(): mxPoint;
getRotationHandlePosition() {
return new mxPoint(
return new Point(
this.bounds.x + this.bounds.width / 2,
this.bounds.y + this.rotationHandleVSpacing
);
@ -2167,7 +2167,7 @@ class mxVertexHandler {
b.width !== pstate.width ||
b.height !== pstate.height)
) {
this.parentHighlight.bounds = mxRectangle.fromRectangle(pstate);
this.parentHighlight.bounds = Rectangle.fromRectangle(pstate);
this.parentHighlight.redraw();
}
} 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
*/
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.
@ -13,7 +13,7 @@ import mxPoint from '../../util/datatypes/mxPoint';
*/
class mxConnectionConstraint {
constructor(
point: mxPoint | null = null,
point: Point | null = null,
perimeter: boolean = true,
name: string | null = null,
dx: number | null = null,
@ -32,7 +32,7 @@ class mxConnectionConstraint {
* <mxPoint> that specifies the fixed location of the connection point.
*/
// point: mxPoint;
point: mxPoint | null = null;
point: Point | null = null;
/**
* 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, Gaudenz Alder
*/
import mxGeometry from '../util/datatypes/mxGeometry';
import mxCell from '../view/cell/mxCell';
import mxPoint from '../util/datatypes/mxPoint';
import mxEventObject from '../util/event/mxEventObject';
import mxEvent from '../util/event/mxEvent';
import Geometry from '../geometry/Geometry';
import Cell from '../cell/datatypes/Cell';
import Point from '../geometry/Point';
import EventObject from '../event/EventObject';
import InternalEvent from '../event/InternalEvent';
import {
CURSOR_CONNECT,
DEFAULT_VALID_COLOR,
@ -18,28 +18,28 @@ import {
OUTLINE_HIGHLIGHT_STROKEWIDTH,
TOOLTIP_VERTICAL_OFFSET,
VALID_COLOR,
} from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
import mxMouseEvent from '../util/event/mxMouseEvent';
import mxImageShape from '../shape/node/mxImageShape';
import mxCellMarker from './mxCellMarker';
} from '../../util/Constants';
import utils from '../../util/Utils';
import InternalMouseEvent from '../event/InternalMouseEvent';
import ImageShape from '../geometry/shape/node/ImageShape';
import CellMarker from '../cell/CellMarker';
import mxConstraintHandler from './mxConstraintHandler';
import mxPolyline from '../shape/edge/mxPolyline';
import mxEventSource from '../util/event/mxEventSource';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxLog from '../util/gui/mxLog';
import mxPolyline from '../geometry/shape/edge/mxPolyline';
import EventSource from '../event/EventSource';
import Rectangle from '../geometry/Rectangle';
import mxLog from '../../util/gui/mxLog';
import {
getClientX,
getClientY,
isAltDown,
isConsumed,
isShiftDown,
} from '../util/mxEventUtils';
import mxGraph from '../view/graph/mxGraph';
import mxImage from '../util/image/mxImage';
import mxCellState from '../view/cell/mxCellState';
} from '../../util/EventUtils';
import graph from '../Graph';
import Image from '../image/Image';
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
@ -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
* 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
* the port IDs, use <mxGraphModel.getCell>.
* the port IDs, use <Transactions.getCell>.
*
* (code)
* 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
* the <mxCell> that represents the new edge.
*/
class mxConnectionHandler extends mxEventSource {
constructor(graph: mxGraph, factoryMethod: FactoryMethod | null = null) {
class mxConnectionHandler extends EventSource {
constructor(graph: graph, factoryMethod: FactoryMethod | null = null) {
super();
this.graph = graph;
@ -210,7 +210,7 @@ class mxConnectionHandler extends mxEventSource {
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>.
*/
// graph: mxGraph;
graph: mxGraph;
graph: graph;
/**
* Variable: factoryMethod
@ -257,7 +257,7 @@ class mxConnectionHandler extends mxEventSource {
* is used in <createIcons>. Default is null.
*/
connectImage: mxImage | null = null;
connectImage: Image | null = null;
/**
* Variable: targetConnectImage
@ -298,7 +298,7 @@ class mxConnectionHandler extends mxEventSource {
*
* Holds the <mxTerminalMarker> used for finding source and target cells.
*/
marker: mxCellMarker;
marker: CellMarker;
/**
* Variable: constraintHandler
@ -339,7 +339,7 @@ class mxConnectionHandler extends mxEventSource {
* Holds the <mxPoint> where the mouseDown took place while the handler is
* active.
*/
first: mxPoint | null = null;
first: Point | null = null;
/**
* Variable: connectIconOffset
@ -349,7 +349,7 @@ class mxConnectionHandler extends mxEventSource {
* Note that placing the icon under the mouse pointer with an
* offset of (0,0) will affect hit detection.
*/
connectIconOffset = new mxPoint(0, TOOLTIP_VERTICAL_OFFSET);
connectIconOffset = new Point(0, TOOLTIP_VERTICAL_OFFSET);
/**
* Variable: edgeState
@ -357,7 +357,7 @@ class mxConnectionHandler extends mxEventSource {
* Optional <mxCellState> that represents the preview edge while the
* handler is active. This is created in <createEdgeState>.
*/
edgeState: mxCellState | null = null;
edgeState: CellState | null = null;
/**
* Variable: changeHandler
@ -466,11 +466,11 @@ class mxConnectionHandler extends mxEventSource {
* released.
*/
isInsertBefore(
edge: mxCell,
source: mxCell,
target: mxCell,
edge: Cell,
source: Cell,
target: Cell,
evt: MouseEvent,
dropTarget: mxCell
dropTarget: Cell
) {
return this.insertBeforeSource && source !== target;
}
@ -515,7 +515,7 @@ class mxConnectionHandler extends mxEventSource {
shape.pointerEvents = false;
shape.isDashed = true;
shape.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents(shape.node, this.graph, null);
InternalEvent.redirectMouseEvents(shape.node, this.graph, null);
}
return shape;
@ -551,21 +551,21 @@ class mxConnectionHandler extends mxEventSource {
}
};
this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler);
this.graph.getView().addListener(mxEvent.SCALE, this.changeHandler);
this.graph.getView().addListener(mxEvent.TRANSLATE, this.changeHandler);
this.graph.getModel().addListener(InternalEvent.CHANGE, this.changeHandler);
this.graph.getView().addListener(InternalEvent.SCALE, this.changeHandler);
this.graph.getView().addListener(InternalEvent.TRANSLATE, this.changeHandler);
this.graph
.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
this.drillHandler = (sender) => {
this.reset();
};
this.graph.addListener(mxEvent.START_EDITING, this.drillHandler);
this.graph.getView().addListener(mxEvent.DOWN, this.drillHandler);
this.graph.getView().addListener(mxEvent.UP, this.drillHandler);
this.graph.addListener(InternalEvent.START_EDITING, this.drillHandler);
this.graph.getView().addListener(InternalEvent.DOWN, 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
* disable floating connections. This implementation returns true.
*/
isConnectableCell(cell: mxCell) {
isConnectableCell(cell: Cell) {
return true;
}
@ -586,7 +586,7 @@ class mxConnectionHandler extends mxEventSource {
createMarker() {
const self = this;
class MyCellMarker extends mxCellMarker {
class MyCellMarker extends CellMarker {
hotspotEnabled = true;
// 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, x, y, edgeState) {
this.previous = state;
this.first = new mxPoint(x, y);
this.first = new Point(x, y);
this.edgeState = edgeState != null ? edgeState : this.createEdgeState(null);
// Marks the source state
@ -695,7 +695,7 @@ class mxConnectionHandler extends mxEventSource {
this.marker.markedState = state;
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
// connect-icon appears behind the selection border and the selection
// border consumes the events before the icon gets a chance
const bounds = new mxRectangle(0, 0, image.width, image.height);
const icon = new mxImageShape(bounds, image.src, null, null, 0);
const bounds = new Rectangle(0, 0, image.width, image.height);
const icon = new ImageShape(bounds, image.src, null, null, 0);
icon.preserveImageAspect = false;
if (this.isMoveIconToFrontForState(state)) {
@ -852,13 +852,13 @@ class mxConnectionHandler extends mxEventSource {
if (!isConsumed(evt)) {
this.icon = icon;
this.graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
new mxMouseEvent(evt, getState())
InternalEvent.MOUSE_DOWN,
new InternalMouseEvent(evt, getState())
);
}
};
mxEvent.redirectMouseEvents(icon.node, this.graph, getState, mouseDown);
InternalEvent.redirectMouseEvents(icon.node, this.graph, getState, mouseDown);
icons.push(icon);
this.redrawIcons(icons, this.iconState);
@ -909,21 +909,21 @@ class mxConnectionHandler extends mxEventSource {
cx = size.width !== 0 ? state.x + (size.width * scale) / 2 : cx;
cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy;
const alpha = mxUtils.toRadians(
mxUtils.getValue(state.style, 'rotation') || 0
const alpha = utils.toRadians(
utils.getValue(state.style, 'rotation') || 0
);
if (alpha !== 0) {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const ct = new mxPoint(state.getCenterX(), state.getCenterY());
const pt = mxUtils.getRotatedPoint(new mxPoint(cx, cy), cos, sin, ct);
const ct = new Point(state.getCenterX(), state.getCenterY());
const pt = utils.getRotatedPoint(new Point(cx, cy), cos, sin, ct);
cx = pt.x;
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();
} else {
// 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);
@ -1012,7 +1012,7 @@ class mxConnectionHandler extends mxEventSource {
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();
}
@ -1063,7 +1063,7 @@ class mxConnectionHandler extends mxEventSource {
*/
// isOutlineConnectEvent(me: mxMouseEvent): boolean;
isOutlineConnectEvent(me) {
const offset = mxUtils.getOffset(this.graph.container);
const offset = utils.getOffset(this.graph.container);
const evt = me.getEvent();
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
// in which case the grid is ignored and mouse point is used instead
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(
@ -1262,7 +1262,7 @@ class mxConnectionHandler extends mxEventSource {
const tmp =
this.sourceConstraint != null
? 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) {
point.x = tmp.x;
@ -1295,11 +1295,11 @@ class mxConnectionHandler extends mxEventSource {
const view = this.graph.getView();
const { scale } = view;
const tr = view.translate;
let point = new mxPoint(me.getGraphX(), me.getGraphY());
let point = new Point(me.getGraphX(), me.getGraphY());
this.error = null;
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.y / scale - tr.y) + tr.y) * scale
);
@ -1360,7 +1360,7 @@ class mxConnectionHandler extends mxEventSource {
this.selectedIcon.bounds.x = pos.x;
this.selectedIcon.bounds.y = pos.y;
} else {
const bounds = new mxRectangle(
const bounds = new Rectangle(
me.getGraphX() + this.connectIconOffset.x,
me.getGraphY() + this.connectIconOffset.y,
w,
@ -1481,7 +1481,7 @@ class mxConnectionHandler extends mxEventSource {
this.graph.container.style.cursor = this.cursor;
}
mxEvent.consume(me.getEvent());
InternalEvent.consume(me.getEvent());
me.consume();
} else if (!this.isEnabled() || !this.graph.isEnabled()) {
this.constraintHandler.reset();
@ -1635,7 +1635,7 @@ class mxConnectionHandler extends mxEventSource {
const next =
this.waypoints != null && this.waypoints.length > 0
? 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(
view.getPerimeterBounds(state),
this.edgeState,
@ -1647,7 +1647,7 @@ class mxConnectionHandler extends mxEventSource {
result = tmp;
}
} else {
result = new mxPoint(state.getCenterX(), state.getCenterY());
result = new Point(state.getCenterX(), state.getCenterY());
}
return result;
@ -1670,15 +1670,15 @@ class mxConnectionHandler extends mxEventSource {
let result = null;
const { view } = 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) {
const theta = mxUtils.getValue(state.style, 'rotation', 0);
const theta = utils.getValue(state.style, 'rotation', 0);
const rad = -theta * (Math.PI / 180);
if (theta !== 0) {
next = mxUtils.getRotatedPoint(
new mxPoint(next.x, next.y),
next = utils.getRotatedPoint(
new Point(next.x, next.y),
Math.cos(rad),
Math.sin(rad),
c
@ -1694,8 +1694,8 @@ class mxConnectionHandler extends mxEventSource {
if (tmp != null) {
if (theta !== 0) {
tmp = mxUtils.getRotatedPoint(
new mxPoint(tmp.x, tmp.y),
tmp = utils.getRotatedPoint(
new Point(tmp.x, tmp.y),
Math.cos(-rad),
Math.sin(-rad),
c
@ -1748,7 +1748,7 @@ class mxConnectionHandler extends mxEventSource {
*/
// addWaypointForEvent(me: mxMouseEvent): void;
addWaypointForEvent(me) {
let point = mxUtils.convertPoint(
let point = utils.convertPoint(
this.graph.container,
me.getX(),
me.getY()
@ -1766,7 +1766,7 @@ class mxConnectionHandler extends mxEventSource {
}
const { scale } = this.graph.view;
point = new mxPoint(
point = new point(
this.graph.snap(me.getGraphX() / scale) * scale,
this.graph.snap(me.getGraphY() / scale) * scale
);
@ -1891,7 +1891,7 @@ class mxConnectionHandler extends mxEventSource {
this.mouseDownCounter = 0;
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();
if (geo == null) {
geo = new mxGeometry();
geo = new Geometry();
geo.relative = true;
model.setGeometry(edge, geo);
@ -2109,7 +2109,7 @@ class mxConnectionHandler extends mxEventSource {
for (let i = 0; i < this.waypoints.length; i += 1) {
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 pt =
this.originalPoint != null
? new mxPoint(
? new Point(
this.originalPoint.x / s - t.x,
this.originalPoint.y / s - t.y
)
: new mxPoint(
: new Point(
this.currentPoint.x / s - t.x,
this.currentPoint.y / s - t.y
);
@ -2132,8 +2132,8 @@ class mxConnectionHandler extends mxEventSource {
}
this.fireEvent(
new mxEventObject(
mxEvent.CONNECT,
new EventObject(
InternalEvent.CONNECT,
'cell',
edge,
'terminal',
@ -2217,7 +2217,7 @@ class mxConnectionHandler extends mxEventSource {
if (geo != null) {
const t = this.graph.view.translate;
const s = this.graph.view.scale;
const point = new mxPoint(
const point = new Point(
this.currentPoint.x / s - t.x,
this.currentPoint.y / s - t.y
);
@ -2285,11 +2285,11 @@ class mxConnectionHandler extends mxEventSource {
}
if (edge == null) {
edge = new mxCell(value || '');
edge = new Cell(value || '');
edge.setEdge(true);
edge.setStyle(style);
const geo = new mxGeometry();
const geo = new Geometry();
geo.relative = true;
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
* Type definitions from the typed-mxgraph project
*/
import mxImage from '../util/image/mxImage';
import mxClient from '../mxClient';
import Image from '../image/Image';
import mxClient from '../../mxClient';
import {
DEFAULT_VALID_COLOR,
DIALECT_MIXEDHTML,
@ -13,13 +13,13 @@ import {
HIGHLIGHT_OPACITY,
HIGHLIGHT_SIZE,
HIGHLIGHT_STROKEWIDTH,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxUtils from '../util/mxUtils';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxImageShape from '../shape/node/mxImageShape';
import mxRectangleShape from '../shape/node/mxRectangleShape';
import { isShiftDown } from '../util/mxEventUtils';
} from '../../util/Constants';
import InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils';
import Rectangle from '../geometry/Rectangle';
import ImageShape from '../geometry/shape/node/ImageShape';
import RectangleShape from '../geometry/shape/node/RectangleShape';
import { isShiftDown } from '../../util/EventUtils';
/**
* 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.view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.resetHandler);
this.graph.view.addListener(mxEvent.TRANSLATE, this.resetHandler);
this.graph.view.addListener(mxEvent.SCALE, this.resetHandler);
this.graph.addListener(mxEvent.ROOT, this.resetHandler);
this.graph.model.addListener(InternalEvent.CHANGE, this.resetHandler);
this.graph.view.addListener(InternalEvent.SCALE_AND_TRANSLATE, this.resetHandler);
this.graph.view.addListener(InternalEvent.TRANSLATE, this.resetHandler);
this.graph.view.addListener(InternalEvent.SCALE, 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 = new mxImage(`${mxClient.imageBasePath}/point.gif`, 5, 5);
pointImage = new Image(`${mxClient.imageBasePath}/point.gif`, 5, 5);
/**
* Reference to the enclosing {@link mxGraph}.
@ -240,7 +240,7 @@ class mxConstraintHandler {
this.reset();
};
mxEvent.addListener(
InternalEvent.addListener(
this.graph.container,
'mouseleave',
this.resetHandler
@ -250,8 +250,8 @@ class mxConstraintHandler {
const tol = this.getTolerance(me);
const x = point != null ? point.x : me.getGraphX();
const y = point != null ? point.y : me.getGraphY();
const grid = new mxRectangle(x - tol, y - tol, 2 * tol, 2 * tol);
const mouse = new mxRectangle(
const grid = new Rectangle(x - tol, y - tol, 2 * tol, 2 * tol);
const mouse = new Rectangle(
me.getGraphX() - tol,
me.getGraphY() - tol,
2 * tol,
@ -266,7 +266,7 @@ class mxConstraintHandler {
this.currentFocus == null ||
state != null ||
!this.currentFocus.cell.isVertex() ||
!mxUtils.intersects(this.currentFocusArea, mouse)) &&
!utils.intersects(this.currentFocusArea, mouse)) &&
state !== this.currentFocus
) {
this.currentFocusArea = null;
@ -325,7 +325,7 @@ class mxConstraintHandler {
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;
@ -358,7 +358,7 @@ class mxConstraintHandler {
) {
const state = this.graph.view.getState(this.currentFocus.cell);
this.currentFocus = state;
this.currentFocusArea = new mxRectangle(
this.currentFocusArea = new Rectangle(
state.x,
state.y,
state.width,
@ -369,7 +369,7 @@ class mxConstraintHandler {
const cp = this.graph.getConnectionPoint(state, this.constraints[i]);
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.y - img.height / 2),
img.width,
@ -402,7 +402,7 @@ class mxConstraintHandler {
// Only uses cells which have constraints
if (this.constraints != null) {
this.currentFocus = state;
this.currentFocusArea = new mxRectangle(
this.currentFocusArea = new Rectangle(
state.x,
state.y,
state.width,
@ -426,13 +426,13 @@ class mxConstraintHandler {
const img = this.getImageForConstraint(state, this.constraints[i], cp);
const { src } = img;
const bounds = new mxRectangle(
const bounds = new Rectangle(
Math.round(cp.x - img.width / 2),
Math.round(cp.y - img.height / 2),
img.width,
img.height
);
const icon = new mxImageShape(bounds, src);
const icon = new ImageShape(bounds, src);
icon.dialect =
this.graph.dialect !== DIALECT_SVG ? DIALECT_MIXEDHTML : DIALECT_SVG;
icon.preserveImageAspect = false;
@ -452,7 +452,7 @@ class mxConstraintHandler {
icon.redraw();
mxEvent.redirectMouseEvents(icon.node, this.graph, getState);
InternalEvent.redirectMouseEvents(icon.node, this.graph, getState);
this.currentFocusArea.add(icon.bounds);
this.focusIcons.push(icon);
this.focusPoints.push(cp);
@ -472,7 +472,7 @@ class mxConstraintHandler {
*/
// createHighlightShape(): mxShape;
createHighlightShape() {
const hl = new mxRectangleShape(
const hl = new RectangleShape(
null,
this.highlightColor,
this.highlightColor,
@ -488,7 +488,7 @@ class mxConstraintHandler {
*/
// intersects(icon: mxShape, mouse: mxRectangle, source: mxCell, existingEdge: mxCell): boolean;
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) {
mxEvent.removeListener(
InternalEvent.removeListener(
this.graph.container,
'mouseleave',
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
* Type definitions from the typed-mxgraph project
*/
import mxRectangle from '../datatypes/mxRectangle';
import mxCellHighlight from '../../handler/mxCellHighlight';
import mxUtils from '../mxUtils';
import mxEvent from '../event/mxEvent';
import Rectangle from '../geometry/Rectangle';
import mxCellHighlight from '../selection/mxCellHighlight';
import utils from '../../util/Utils';
import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient';
import mxGuide from '../mxGuide';
import { DROP_TARGET_COLOR } from '../mxConstants';
import mxPoint from '../datatypes/mxPoint';
import mxGuide from '../../util/Guide';
import { DROP_TARGET_COLOR } from '../../util/Constants';
import Point from '../geometry/Point';
import {
getClientX,
getClientY,
@ -20,10 +20,10 @@ import {
isMouseEvent,
isPenEvent,
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
* 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.
*
*/
class mxDragSource {
class DragSource {
constructor(element, dropHandler) {
this.element = element;
this.dropHandler = dropHandler;
// Handles a drag gesture on the element
mxEvent.addGestureListeners(element, (evt) => {
InternalEvent.addGestureListeners(element, (evt) => {
this.mouseDown(evt);
});
// Prevents native drag and drop
mxEvent.addListener(element, 'dragstart', (evt) => {
mxEvent.consume(evt);
InternalEvent.addListener(element, 'dragstart', (evt) => {
InternalEvent.consume(evt);
});
this.eventConsumer = (sender, evt) => {
const evtName = evt.getProperty('eventName');
const me = evt.getProperty('event');
if (evtName !== mxEvent.MOUSE_DOWN) {
if (evtName !== InternalEvent.MOUSE_DOWN) {
me.consume();
}
};
@ -71,7 +71,7 @@ class mxDragSource {
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 = null;
@ -84,7 +84,7 @@ class mxDragSource {
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 = null;
@ -309,7 +309,7 @@ class mxDragSource {
this.startDrag(evt);
this.mouseMoveHandler = this.mouseMove.bind(this);
this.mouseUpHandler = this.mouseUp.bind(this);
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
document,
null,
this.mouseMoveHandler,
@ -318,7 +318,7 @@ class mxDragSource {
if (mxClient.IS_TOUCH && !isMouseEvent(evt)) {
this.eventSource = getSource(evt);
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
this.eventSource,
null,
this.mouseMoveHandler,
@ -336,7 +336,7 @@ class mxDragSource {
this.dragElement = this.createDragElement(evt);
this.dragElement.style.position = 'absolute';
this.dragElement.style.zIndex = this.dragElementZIndex;
mxUtils.setOpacity(this.dragElement, this.dragElementOpacity);
utils.setOpacity(this.dragElement, this.dragElementOpacity);
if (this.checkEventSource && mxClient.IS_SVG) {
this.dragElement.style.pointerEvents = 'none';
@ -385,8 +385,8 @@ class mxDragSource {
graphContainsEvent(graph, evt) {
const x = getClientX(evt);
const y = getClientY(evt);
const offset = mxUtils.getOffset(graph.container);
const origin = mxUtils.getScrollOrigin();
const offset = utils.getOffset(graph.container);
const origin = utils.getScrollOrigin();
let elt = this.getElementForEvent(evt);
if (this.checkEventSource) {
@ -454,7 +454,7 @@ class mxDragSource {
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.top = `${y + offset.y}px`;
@ -462,7 +462,7 @@ class mxDragSource {
this.dragElement.style.visibility = 'hidden';
}
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
/**
@ -492,7 +492,7 @@ class mxDragSource {
this.stopDrag();
this.removeListeners();
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
/**
@ -501,7 +501,7 @@ class mxDragSource {
// removeListeners(): void;
removeListeners() {
if (this.eventSource != null) {
mxEvent.removeGestureListeners(
InternalEvent.removeGestureListeners(
this.eventSource,
null,
this.mouseMoveHandler,
@ -510,7 +510,7 @@ class mxDragSource {
this.eventSource = null;
}
mxEvent.removeGestureListeners(
InternalEvent.removeGestureListeners(
document,
null,
this.mouseMoveHandler,
@ -550,7 +550,7 @@ class mxDragSource {
}
// 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, evt) {
const offset = mxUtils.getOffset(graph.container);
const origin = mxUtils.getScrollOrigin(graph.container);
const offset = utils.getOffset(graph.container);
const origin = utils.getScrollOrigin(graph.container);
let x = getClientX(evt) - offset.x + origin.x - graph.panDx;
let y = getClientY(evt) - offset.y + origin.y - graph.panDy;
@ -626,8 +626,8 @@ class mxDragSource {
// LATER: HTML preview appears smaller than SVG preview
const w = parseInt(this.previewElement.style.width);
const h = parseInt(this.previewElement.style.height);
const bounds = new mxRectangle(0, 0, w, h);
let delta = new mxPoint(x, y);
const bounds = new Rectangle(0, 0, w, h);
let delta = new Point(x, y);
delta = this.currentGuide.move(bounds, delta, gridEnabled, true);
hideGuide = false;
x = delta.x;
@ -654,7 +654,7 @@ class mxDragSource {
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
*/
import mxUtils from '../../util/mxUtils';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxEvent from '../../util/event/mxEvent';
import utils, {getAlignmentAsPoint, getValue } from '../../util/Utils';
import Rectangle from '../geometry/Rectangle';
import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient';
import {
ABSOLUTE_LINE_HEIGHT,
@ -24,26 +24,26 @@ import {
FONT_UNDERLINE,
LINE_HEIGHT,
WORD_WRAP,
} from '../../util/mxConstants';
import mxText from '../../shape/mxText';
import mxGraph from '../graph/mxGraph';
import mxCell from './mxCell';
import mxMouseEvent from '../../util/event/mxMouseEvent';
import mxCellState from './mxCellState';
import mxShape from '../../shape/mxShape';
import mxEventObject from '../../util/event/mxEventObject';
import { extractTextWithWhitespace, isNode } from '../../util/mxDomUtils';
} from '../../util/Constants';
import mxText from '../geometry/shape/mxText';
import graph from '../Graph';
import Cell from '../cell/datatypes/Cell';
import InternalMouseEvent from '../event/InternalMouseEvent';
import CellState from '../cell/datatypes/CellState';
import Shape from '../geometry/shape/Shape';
import EventObject from '../event/EventObject';
import { extractTextWithWhitespace, isNode } from '../../util/DomUtils';
import {
htmlEntities,
replaceTrailingNewlines,
} from '../../util/mxStringUtils';
} from '../../util/StringUtils';
import {
getSource,
isConsumed,
isControlDown,
isMetaDown,
isShiftDown,
} from '../../util/mxEventUtils';
} from '../../util/EventUtils';
/**
* Class: mxCellEditor
@ -151,8 +151,8 @@ import {
*
* graph - Reference to the enclosing <mxGraph>.
*/
class mxCellEditor {
constructor(graph: mxGraph) {
class CellEditor {
constructor(graph: graph) {
this.graph = graph;
// Stops editing after zoom changes
@ -172,9 +172,9 @@ class mxCellEditor {
}
};
this.graph.view.addListener(mxEvent.SCALE, this.zoomHandler);
this.graph.view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.zoomHandler);
this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler);
this.graph.view.addListener(InternalEvent.SCALE, this.zoomHandler);
this.graph.view.addListener(InternalEvent.SCALE_AND_TRANSLATE, this.zoomHandler);
this.graph.getModel().addListener(InternalEvent.CHANGE, this.changeHandler);
}
// TODO: Document me!
@ -184,7 +184,7 @@ class mxCellEditor {
clearOnChange: boolean = false;
bounds: mxRectangle | null = null;
bounds: Rectangle | null = null;
resizeThread: number | null = null;
@ -196,7 +196,7 @@ class mxCellEditor {
* Reference to the enclosing <mxGraph>.
*/
// graph: mxGraph;
graph: mxGraph;
graph: graph;
/**
* Variable: textarea
@ -213,7 +213,7 @@ class mxCellEditor {
* Reference to the <mxCell> that is currently being edited.
*/
// editingCell: mxCell;
editingCell: mxCell | null = null;
editingCell: Cell | null = null;
/**
* Variable: trigger
@ -221,7 +221,7 @@ class mxCellEditor {
* Reference to the event that was used to start editing.
*/
// trigger: MouseEvent;
trigger: mxMouseEvent | MouseEvent | null = null;
trigger: InternalMouseEvent | MouseEvent | null = null;
/**
* Variable: modified
@ -293,7 +293,7 @@ class mxCellEditor {
* Defines the minimum width and height to be used in <resize>. Default is 0x20px.
*/
// minResize: mxRectangle;
minResize: mxRectangle = new mxRectangle(0, 20);
minResize: Rectangle = new Rectangle(0, 20);
/**
* Variable: wordWrapPadding
@ -356,8 +356,8 @@ class mxCellEditor {
* Called in <stopEditing> if cancel is false to invoke <mxGraph.labelChanged>.
*/
// applyValue(state: mxCellState, value: string): void;
applyValue(state: mxCellState, value: any): void {
this.graph.labelChanged(state.cell, value, <mxMouseEvent>this.trigger);
applyValue(state: CellState, value: any): void {
this.graph.labelChanged(state.cell, value, <InternalMouseEvent>this.trigger);
}
/**
@ -380,7 +380,7 @@ class mxCellEditor {
* Gets the initial editing value for the given cell.
*/
// getInitialValue(state: mxCellState, trigger: Event): string;
getInitialValue(state: mxCellState, trigger: mxEventObject | mxMouseEvent) {
getInitialValue(state: CellState, trigger: EventObject | InternalMouseEvent) {
let result = htmlEntities(
<string>this.graph.getEditingValue(state.cell, trigger),
false
@ -395,7 +395,7 @@ class mxCellEditor {
* Returns the current editing value.
*/
// getCurrentValue(state: mxCellState): string;
getCurrentValue(state: mxCellState) {
getCurrentValue(state: CellState) {
// @ts-ignore
return extractTextWithWhitespace(this.textarea.childNodes);
}
@ -425,27 +425,27 @@ class mxCellEditor {
installListeners(elt: HTMLElement) {
// Applies value if text is dragged
// LATER: Gesture mouse events ignored for starting move
mxEvent.addListener(elt, 'dragstart', (evt: Event) => {
InternalEvent.addListener(elt, 'dragstart', (evt: Event) => {
this.graph.stopEditing(false);
mxEvent.consume(evt);
InternalEvent.consume(evt);
});
// Applies value if focus is lost
mxEvent.addListener(elt, 'blur', (evt: Event) => {
InternalEvent.addListener(elt, 'blur', (evt: Event) => {
if (this.blurEnabled) {
this.focusLost();
}
});
// Updates modified state and handles placeholder text
mxEvent.addListener(elt, 'keydown', (evt: KeyboardEvent) => {
InternalEvent.addListener(elt, 'keydown', (evt: KeyboardEvent) => {
if (!isConsumed(evt)) {
if (this.isStopEditingEvent(evt)) {
this.graph.stopEditing(false);
mxEvent.consume(evt);
InternalEvent.consume(evt);
} else if (evt.keyCode === 27 /* Escape */) {
this.graph.stopEditing(this.isCancelEditingKeyEvent(evt));
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
}
});
@ -468,8 +468,8 @@ class mxCellEditor {
}
};
mxEvent.addListener(elt, 'keypress', keypressHandler);
mxEvent.addListener(elt, 'paste', keypressHandler);
InternalEvent.addListener(elt, 'keypress', keypressHandler);
InternalEvent.addListener(elt, 'paste', keypressHandler);
// Handler for updating the empty label text value after a change
const keyupHandler = (evt: KeyboardEvent) => {
@ -489,9 +489,9 @@ class mxCellEditor {
}
};
mxEvent.addListener(elt, 'input', keyupHandler);
mxEvent.addListener(elt, 'cut', keyupHandler);
mxEvent.addListener(elt, 'paste', keyupHandler);
InternalEvent.addListener(elt, 'input', keyupHandler);
InternalEvent.addListener(elt, 'cut', keyupHandler);
InternalEvent.addListener(elt, 'paste', keyupHandler);
// Adds automatic resizing of the textbox while typing using input, keyup and/or DOM change events
const evtName = 'input';
@ -511,10 +511,10 @@ class mxCellEditor {
}
};
mxEvent.addListener(elt, evtName, resizeHandler);
mxEvent.addListener(window, 'resize', resizeHandler);
mxEvent.addListener(elt, 'cut', resizeHandler);
mxEvent.addListener(elt, 'paste', resizeHandler);
InternalEvent.addListener(elt, evtName, resizeHandler);
InternalEvent.addListener(window, 'resize', resizeHandler);
InternalEvent.addListener(elt, 'cut', 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.
*/
// isEventSource(evt: Event): boolean;
isEventSource(evt: Event): boolean {
return getSource(evt) === this.textarea;
}
@ -550,7 +549,6 @@ class mxCellEditor {
*
* Returns <modified>.
*/
// resize(): void;
resize(): void {
const state = this.graph.getView().getState(this.editingCell);
@ -563,7 +561,7 @@ class mxCellEditor {
if (!this.autoSize || state.style.overflow === 'fill') {
// 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.bounds.width / scale
)}px`;
@ -603,19 +601,19 @@ class mxCellEditor {
}
}
} 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;
if (m == null) {
m = mxUtils.getAlignmentAsPoint(
m = getAlignmentAsPoint(
this.align ||
mxUtils.getValue(state.style, 'align', ALIGN_CENTER),
mxUtils.getValue(state.style, 'verticalAlign', ALIGN_MIDDLE)
getValue(state.style, 'align', ALIGN_CENTER),
getValue(state.style, 'verticalAlign', ALIGN_MIDDLE)
);
}
if (isEdge) {
this.bounds = new mxRectangle(
this.bounds = new Rectangle(
state.absoluteOffset.x,
state.absoluteOffset.y,
0,
@ -628,13 +626,13 @@ class mxCellEditor {
this.bounds.x += m.x * tmp;
}
} else {
let bounds = mxRectangle.fromRectangle(state);
let hpos = mxUtils.getValue(
let bounds = Rectangle.fromRectangle(state);
let hpos = utils.getValue(
state.style,
'labelPosition',
ALIGN_CENTER
);
let vpos = mxUtils.getValue(
let vpos = utils.getValue(
state.style,
'verticalLabelPosition',
ALIGN_MIDDLE
@ -684,7 +682,7 @@ class mxCellEditor {
? state.style.verticalLabelPosition
: 'middle';
bounds = new mxRectangle(
bounds = new Rectangle(
bounds.x + spacingLeft,
bounds.y + spacingTop,
bounds.width -
@ -696,7 +694,7 @@ class mxCellEditor {
);
}
this.bounds = new mxRectangle(
this.bounds = new Rectangle(
bounds.x + state.absoluteOffset.x,
bounds.y + state.absoluteOffset.y,
bounds.width,
@ -759,12 +757,12 @@ class mxCellEditor {
)}px`;
}
mxUtils.setPrefixedStyle(
utils.setPrefixedStyle(
this.textarea.style,
'transformOrigin',
'0px 0px'
);
mxUtils.setPrefixedStyle(
utils.setPrefixedStyle(
this.textarea.style,
'transform',
`scale(${scale},${scale})${
@ -791,7 +789,7 @@ class mxCellEditor {
* always returns null.
*/
// getBackgroundColor(state: mxCellState): string;
getBackgroundColor(state: mxCellState): string | null {
getBackgroundColor(state: CellState): string | null {
return null;
}
@ -807,8 +805,8 @@ class mxCellEditor {
*/
// startEditing(cell: mxCell, trigger?: MouseEvent): void;
startEditing(
cell: mxCell,
trigger: mxMouseEvent | MouseEvent | null = null
cell: Cell,
trigger: InternalMouseEvent | MouseEvent | null = null
): void {
this.stopEditing(true);
this.align = null;
@ -833,8 +831,8 @@ class mxCellEditor {
state.style.fontFamily != null
? state.style.fontFamily
: DEFAULT_FONTFAMILY;
const color = mxUtils.getValue(state.style, 'fontColor', 'black');
const align = mxUtils.getValue(state.style, 'align', ALIGN_LEFT);
const color = utils.getValue(state.style, 'fontColor', 'black');
const align = utils.getValue(state.style, 'align', ALIGN_LEFT);
const bold = (state.style.fontStyle || 0) & FONT_BOLD;
const italic = (state.style.fontStyle || 0) & FONT_ITALIC;
@ -885,7 +883,7 @@ class mxCellEditor {
// Sets the initial editing value
textarea.innerHTML =
this.getInitialValue(state, <mxMouseEvent>trigger) || '';
this.getInitialValue(state, <InternalMouseEvent>trigger) || '';
this.initialValue = textarea.innerHTML;
// 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
mxEvent.release(this.textarea);
InternalEvent.release(this.textarea);
this.textarea = null;
this.align = null;
}
@ -1055,7 +1053,7 @@ class mxCellEditor {
* edited.
*/
// isHideLabel(state: mxCellState): boolean;
isHideLabel(state: mxCellState | null = null): boolean {
isHideLabel(state: CellState | null = null): boolean {
return true;
}
@ -1065,11 +1063,11 @@ class mxCellEditor {
* Returns the minimum width and height for editing the given state.
*/
// getMinimumSize(state: mxCellState): mxRectangle;
getMinimumSize(state: mxCellState): mxRectangle {
getMinimumSize(state: CellState): Rectangle {
const { scale } = this.graph.getView();
const textarea = <HTMLElement>this.textarea;
return new mxRectangle(
return new Rectangle(
0,
0,
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.
*/
// getEditorBounds(state: mxCellState): mxRectangle;
getEditorBounds(state: mxCellState): mxRectangle | null {
getEditorBounds(state: CellState): Rectangle | null {
const isEdge = state.cell.isEdge();
const { scale } = this.graph.getView();
const minSize = this.getMinimumSize(state);
@ -1096,8 +1094,8 @@ class mxCellEditor {
state.view.graph.cellRenderer.legacySpacing &&
state.style.overflow === 'fill'
) {
result = (<mxShape>state.shape).getLabelBounds(
mxRectangle.fromRectangle(state)
result = (<Shape>state.shape).getLabelBounds(
Rectangle.fromRectangle(state)
);
} else {
// @ts-ignore
@ -1119,7 +1117,7 @@ class mxCellEditor {
scale +
spacing;
result = new mxRectangle(
result = new Rectangle(
state.x,
state.y,
Math.max(minWidth, state.width - spacingLeft - spacingRight),
@ -1178,7 +1176,7 @@ class mxCellEditor {
// Applies the horizontal and vertical label positions
if (state.cell.isVertex()) {
const horizontal: string = <string>(
mxUtils.getStringValue(
utils.getStringValue(
state.style,
'labelPosition',
ALIGN_CENTER
@ -1204,7 +1202,7 @@ class mxCellEditor {
}
}
return new mxRectangle(
return new Rectangle(
Math.round(result.x),
Math.round(result.y),
Math.round(result.width),
@ -1225,7 +1223,7 @@ class mxCellEditor {
* returned.
*/
// getEmptyLabelText(cell: mxCell): string;
getEmptyLabelText(cell: mxCell | null = null): string {
getEmptyLabelText(cell: Cell | null = null): string {
return this.emptyLabelText || '';
}
@ -1236,7 +1234,7 @@ class mxCellEditor {
* being edited.
*/
// getEditingCell(): mxCell;
getEditingCell(): mxCell | null {
getEditingCell(): Cell | null {
return this.editingCell;
}
@ -1248,7 +1246,7 @@ class mxCellEditor {
// destroy(): void;
destroy(): void {
if (this.textarea != null) {
mxEvent.release(this.textarea);
InternalEvent.release(this.textarea);
if (this.textarea.parentNode != null) {
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)
* (end)
*/
class mxEventObject {
class EventObject {
constructor(name: string, ...args: any[]) {
this.name = name;
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
*/
import mxEventObject from './mxEventObject';
import EventObject from './EventObject';
/**
* Class: mxEventSource
@ -22,14 +22,14 @@ import mxEventObject from './mxEventObject';
*
* Known Subclasses:
*
* <mxGraphModel>, <mxGraph>, <mxGraphView>, <mxEditor>, <mxCellOverlay>,
* <Transactions>, <mxGraph>, <mxGraphView>, <mxEditor>, <mxCellOverlay>,
* <mxToolbar>, <mxWindow>
*
* Constructor: mxEventSource
*
* Constructs a new event source.
*/
class mxEventSource {
class EventSource {
constructor(eventSource) {
this.setEventSource(eventSource);
}
@ -161,7 +161,7 @@ class mxEventSource {
fireEvent(evt, sender) {
if (this.eventListeners != null && this.isEventsEnabled()) {
if (evt == null) {
evt = new mxEventObject();
evt = new EventObject();
}
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
* Type definitions from the typed-mxgraph project
*/
import mxMouseEvent from './mxMouseEvent';
import InternalMouseEvent from './InternalMouseEvent';
import mxClient from '../../mxClient';
import { isConsumed, isMouseEvent } from '../mxEventUtils';
import mxGraph from '../../view/graph/mxGraph';
import mxCellState from '../../view/cell/mxCellState';
import { isConsumed, isMouseEvent } from '../../util/EventUtils';
import graph from '../Graph';
import CellState from '../cell/datatypes/CellState';
type Listener = {
name: string;
@ -49,10 +49,10 @@ try {
}
/**
* @class mxEvent
* @class InternalEvent
*
* 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:
*
@ -62,7 +62,7 @@ try {
* the last reference is removed in the JavaScript code, typically when the
* referenced DOM node is removed from the DOM.
*/
class mxEvent {
class InternalEvent {
/**
* 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
@ -123,7 +123,7 @@ class mxEvent {
if (list) {
while (list.length > 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
) {
if (startListener) {
mxEvent.addListener(
InternalEvent.addListener(
node,
mxClient.IS_POINTER ? 'pointerdown' : 'mousedown',
startListener
@ -152,7 +152,7 @@ class mxEvent {
}
if (moveListener) {
mxEvent.addListener(
InternalEvent.addListener(
node,
mxClient.IS_POINTER ? 'pointermove' : 'mousemove',
moveListener
@ -160,7 +160,7 @@ class mxEvent {
}
if (endListener) {
mxEvent.addListener(
InternalEvent.addListener(
node,
mxClient.IS_POINTER ? 'pointerup' : 'mouseup',
endListener
@ -169,15 +169,15 @@ class mxEvent {
if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) {
if (startListener) {
mxEvent.addListener(node, 'touchstart', startListener);
InternalEvent.addListener(node, 'touchstart', startListener);
}
if (moveListener) {
mxEvent.addListener(node, 'touchmove', moveListener);
InternalEvent.addListener(node, 'touchmove', moveListener);
}
if (endListener) {
mxEvent.addListener(node, 'touchend', endListener);
InternalEvent.addListener(node, 'touchend', endListener);
}
}
}
@ -195,7 +195,7 @@ class mxEvent {
endListener: EventListener | null
) {
if (startListener) {
mxEvent.removeListener(
InternalEvent.removeListener(
node,
mxClient.IS_POINTER ? 'pointerdown' : 'mousedown',
startListener
@ -203,7 +203,7 @@ class mxEvent {
}
if (moveListener) {
mxEvent.removeListener(
InternalEvent.removeListener(
node,
mxClient.IS_POINTER ? 'pointermove' : 'mousemove',
moveListener
@ -211,7 +211,7 @@ class mxEvent {
}
if (endListener) {
mxEvent.removeListener(
InternalEvent.removeListener(
node,
mxClient.IS_POINTER ? 'pointerup' : 'mouseup',
endListener
@ -220,15 +220,15 @@ class mxEvent {
if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) {
if (startListener) {
mxEvent.removeListener(node, 'touchstart', startListener);
InternalEvent.removeListener(node, 'touchstart', startListener);
}
if (moveListener) {
mxEvent.removeListener(node, 'touchmove', moveListener);
InternalEvent.removeListener(node, 'touchmove', moveListener);
}
if (endListener) {
mxEvent.removeListener(node, 'touchend', endListener);
InternalEvent.removeListener(node, 'touchend', endListener);
}
}
}
@ -245,8 +245,8 @@ class mxEvent {
*/
static redirectMouseEvents(
node: Listenable,
graph: mxGraph,
state: mxCellState | ((evt: Event) => mxCellState) | null = null,
graph: graph,
state: CellState | ((evt: Event) => CellState) | null = null,
down: EventListener | null = null,
move: EventListener | null = null,
up: EventListener | null = null,
@ -256,15 +256,15 @@ class mxEvent {
return typeof state === 'function' ? state(evt) : state;
};
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
node,
(evt) => {
if (down) {
down(evt);
} else if (!isConsumed(evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
new mxMouseEvent(evt, getState(evt))
InternalEvent.MOUSE_DOWN,
new InternalMouseEvent(evt, getState(evt))
);
}
},
@ -273,8 +273,8 @@ class mxEvent {
move(evt);
} else if (!isConsumed(evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_MOVE,
new mxMouseEvent(evt, getState(evt))
InternalEvent.MOUSE_MOVE,
new InternalMouseEvent(evt, getState(evt))
);
}
},
@ -283,14 +283,14 @@ class mxEvent {
up(evt);
} else if (!isConsumed(evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_UP,
new mxMouseEvent(evt, getState(evt))
InternalEvent.MOUSE_UP,
new InternalMouseEvent(evt, getState(evt))
);
}
}
);
mxEvent.addListener(node, 'dblclick', (evt) => {
InternalEvent.addListener(node, 'dblclick', (evt) => {
if (dblClick) {
dblClick(evt);
} else if (!isConsumed(evt)) {
@ -308,13 +308,13 @@ class mxEvent {
static release(element: Listenable | null) {
try {
if (element) {
mxEvent.removeAllListeners(element);
InternalEvent.removeAllListeners(element);
if ('childNodes' in element) {
const children = element.childNodes;
const childCount = children.length;
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) {
let scale = 1;
mxEvent.addListener(target, 'gesturestart', (evt) => {
mxEvent.consume(evt);
InternalEvent.addListener(target, 'gesturestart', (evt) => {
InternalEvent.consume(evt);
scale = 1;
});
mxEvent.addListener(target, 'gesturechange', ((evt: GestureEvent) => {
mxEvent.consume(evt);
InternalEvent.addListener(target, 'gesturechange', ((evt: GestureEvent) => {
InternalEvent.consume(evt);
if (typeof evt.scale === 'number') {
const diff = scale - evt.scale;
@ -393,8 +393,8 @@ class mxEvent {
}
}) as EventListener);
mxEvent.addListener(target, 'gestureend', (evt) => {
mxEvent.consume(evt);
InternalEvent.addListener(target, 'gestureend', (evt) => {
InternalEvent.consume(evt);
});
} else {
let evtCache: EventCache = [];
@ -402,7 +402,7 @@ class mxEvent {
let dy0 = 0;
// Adds basic listeners for graph event dispatching
mxEvent.addGestureListeners(
InternalEvent.addGestureListeners(
target,
((evt: GestureEvent) => {
if (!isMouseEvent(evt) && evt.pointerId != null) {
@ -426,8 +426,8 @@ class mxEvent {
const ty = Math.abs(dy - dy0);
if (
tx > mxEvent.PINCH_THRESHOLD ||
ty > mxEvent.PINCH_THRESHOLD
tx > InternalEvent.PINCH_THRESHOLD ||
ty > InternalEvent.PINCH_THRESHOLD
) {
const cx =
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.
*/
static disableContextMenu(element: Listenable) {
mxEvent.addListener(element, 'contextmenu', (evt) => {
InternalEvent.addListener(element, 'contextmenu', (evt) => {
if (evt.preventDefault) {
evt.preventDefault();
}
@ -1034,4 +1034,4 @@ class mxEvent {
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
* Type definitions from the typed-mxgraph project
*/
import {getClientX, getClientY, getSource, isMouseEvent, isPopupTrigger} from '../mxEventUtils';
import { isAncestorNode } from '../mxDomUtils';
import {getClientX, getClientY, getSource, isMouseEvent, isPopupTrigger} from '../../util/EventUtils';
import { isAncestorNode } from '../../util/DomUtils';
/**
* Class: mxMouseEvent
@ -41,7 +41,7 @@ import { isAncestorNode } from '../mxDomUtils';
* state - Optional <mxCellState> under the mouse.
*
*/
class mxMouseEvent {
class InternalMouseEvent {
constructor(evt, state) {
this.evt = evt;
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
* Type definitions from the typed-mxgraph project
*/
import mxCellMarker from './mxCellMarker';
import CellMarker from '../cell/CellMarker';
/**
* 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) {
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
*/
import mxEvent from '../util/event/mxEvent';
import { isAncestorNode } from '../util/mxDomUtils';
import { getSource, isAltDown, isConsumed, isControlDown as _isControlDown, isShiftDown } from '../util/mxEventUtils';
import InternalEvent from './InternalEvent';
import { isAncestorNode } from '../../util/DomUtils';
import { getSource, isAltDown, isConsumed, isControlDown as _isControlDown, isShiftDown } from '../../util/EventUtils';
/**
* Class: mxKeyHandler
@ -87,7 +87,7 @@ class mxKeyHandler {
};
// 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) {
boundFunction(evt);
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
}
}
@ -388,7 +388,7 @@ class mxKeyHandler {
*/
destroy() {
if (this.target != null && this.keydownHandler != null) {
mxEvent.removeListener(this.target, 'keydown', this.keydownHandler);
InternalEvent.removeListener(this.target, 'keydown', this.keydownHandler);
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 mxGraphModel from '../view/graph/mxGraphModel';
import Cell from '../cell/datatypes/Cell';
import Model from '../model/Model';
import type { UndoableChange } from '../types';
import type { UndoableChange } from '../../types';
/**
* Class: mxCollapseChange
@ -13,13 +13,13 @@ import type { UndoableChange } from '../types';
* Constructs a change of a collapsed state in the
* specified model.
*/
class mxCollapseChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
class CollapseChange implements UndoableChange {
model: Model;
cell: Cell;
collapsed: boolean;
previous: boolean;
constructor(model: mxGraphModel, cell: mxCell, collapsed: boolean) {
constructor(model: Model, cell: Cell, collapsed: boolean) {
this.model = model;
this.cell = cell;
this.collapsed = collapsed;
@ -30,7 +30,7 @@ class mxCollapseChange implements UndoableChange {
* Function: execute
*
* Changes the collapsed state of {@link cell}` to {@link previous}` using
* <mxGraphModel.collapsedStateForCellChanged>.
* <Transactions.collapsedStateForCellChanged>.
*/
execute() {
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
*/
import mxPoint from './mxPoint';
import mxRectangle from './mxRectangle';
import mxUtils, { equalPoints, getRotatedPoint, toRadians } from '../mxUtils';
import { clone } from '../mxCloneUtils';
import Point from './Point';
import Rectangle from './Rectangle';
import utils, { equalPoints, getRotatedPoint, toRadians } from '../../util/Utils';
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
* 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
* 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
* resized, the the {@link mxGraph.resizeEdgesOnMove} and
* {@link mxGraph.resetEdgesOnResize} may be used.
* resized, the the {@link graph.resizeEdgesOnMove} and
* {@link graph.resetEdgesOnResize} may be used.
*
* ### 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
* 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
* 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.
*
* 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
* defines the absolute offset for the label inside the vertex or group.
*/
class mxGeometry extends mxRectangle {
class Geometry extends Rectangle {
constructor(
x: number = 0,
y: number = 0,
@ -94,21 +94,21 @@ class mxGeometry extends mxRectangle {
*
* @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
* 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
* ignored. Default is null.
*/
targetPoint: mxPoint | null = null;
targetPoint: Point | null = null;
/**
* 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
* a non-null value. Default is null.
*/
points: mxPoint[] = [];
points: Point[] = [];
/**
* 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
* 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
@ -153,7 +153,7 @@ class mxGeometry extends mxRectangle {
*/
swap() {
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.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.
*
* @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.
*
* @param {Point} point to be used as the new source or target point.
* @param {Boolean} isSource that specifies if the source or target point should be set.
*/
setTerminalPoint(point: mxPoint, isSource: boolean) {
setTerminalPoint(point: Point, isSource: boolean) {
if (isSource) {
this.sourcePoint = point;
} else {
@ -198,16 +198,16 @@ class mxGeometry extends mxRectangle {
* translated if {@link relative} is false.
*
* @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 cos = Math.cos(rad);
const sin = Math.sin(rad);
// Rotates the geometry
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);
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.
*/
equals(geom: mxGeometry | null) {
equals(geom: Geometry | null) {
if (!geom) return false;
return (
@ -348,8 +348,8 @@ class mxGeometry extends mxRectangle {
}
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 mxCell from '../view/cell/mxCell';
import mxGraphModel from '../view/graph/mxGraphModel';
import Geometry from './Geometry';
import Cell from '../cell/datatypes/Cell';
import Model from '../model/Model';
import type { UndoableChange } from '../types';
import type { UndoableChange } from '../../types';
/**
* Class: mxGeometryChange
@ -14,13 +14,13 @@ import type { UndoableChange } from '../types';
* Constructs a change of a geometry in the
* specified model.
*/
class mxGeometryChange implements UndoableChange {
model: mxGraphModel;
cell: mxCell;
geometry: mxGeometry | null;
previous: mxGeometry | null;
class GeometryChange implements UndoableChange {
model: Model;
cell: Cell;
geometry: Geometry | null;
previous: Geometry | null;
constructor(model: mxGraphModel, cell: mxCell, geometry: mxGeometry | null) {
constructor(model: Model, cell: Cell, geometry: Geometry | null) {
this.model = model;
this.cell = cell;
this.geometry = geometry;
@ -31,7 +31,7 @@ class mxGeometryChange implements UndoableChange {
* Function: execute
*
* Changes the geometry of {@link cell}` ro {@link previous}` using
* <mxGraphModel.geometryForCellChanged>.
* <Transactions.geometryForCellChanged>.
*/
execute() {
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
* coordinates are given, then the default values for <x> and <y> are used.
*/
class mxPoint {
class Point {
constructor(x: number = 0, y: number = 0) {
this.x = x;
this.y = y;
@ -60,7 +60,7 @@ class mxPoint {
*
* Returns true if the given object equals this point.
*/
equals(p: mxPoint | null) {
equals(p: Point | null) {
if (!p) return false;
return p.x === this.x && p.y === this.y;
@ -72,8 +72,8 @@ class mxPoint {
* Returns a clone of this <mxPoint>.
*/
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
*/
import mxPoint from './mxPoint';
import Point from './Point';
/**
* Class: mxRectangle
@ -18,7 +18,7 @@ import mxPoint from './mxPoint';
* Constructs a new rectangle for the optional parameters. If no parameters
* are given then the respective default values are used.
*/
class mxRectangle extends mxPoint {
class Rectangle extends Point {
constructor(
x: 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.
*/
static fromRectangle = (rect: mxRectangle) => {
return new mxRectangle(rect.x, rect.y, rect.width, rect.height);
static fromRectangle = (rect: Rectangle) => {
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.
*/
add(rect: mxRectangle) {
add(rect: Rectangle) {
const minX = Math.min(this.x, rect.x);
const minY = Math.min(this.y, rect.y);
const maxX = Math.max(this.x + this.width, rect.x + rect.width);
@ -127,7 +127,7 @@ class mxRectangle extends mxPoint {
*
* Changes this rectangle to where it overlaps with the given rectangle.
*/
intersect(rect: mxRectangle) {
intersect(rect: Rectangle) {
const r1 = this.x + this.width;
const r2 = rect.x + rect.width;
@ -160,7 +160,7 @@ class mxRectangle extends mxPoint {
* Returns the top, left corner as a new <mxPoint>.
*/
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.
*/
equals(rect: mxRectangle | null) {
equals(rect: Rectangle | null) {
if (!rect) return false;
return (
@ -195,8 +195,8 @@ class mxRectangle extends mxPoint {
}
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
* Type definitions from the typed-mxgraph project
*/
import mxRectangle from '../util/datatypes/mxRectangle';
import mxShape from './mxShape';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
import Rectangle from '../Rectangle';
import Shape from './Shape';
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.
*
* 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
* ```javascript
@ -31,9 +31,9 @@ import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
* }
* ```
*/
class mxActor extends mxShape {
class Actor extends Shape {
constructor(
bounds: mxRectangle | null = null,
bounds: Rectangle | null = null,
fill: string | null = null,
stroke: string | null = null,
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
* Type definitions from the typed-mxgraph project
*/
import mxRectangle from '../util/datatypes/mxRectangle';
import Rectangle from '../Rectangle';
import {
ALIGN_BOTTOM,
ALIGN_CENTER,
@ -13,9 +13,9 @@ import {
ALIGN_RIGHT,
ALIGN_TOP,
DEFAULT_IMAGESIZE,
} from '../util/mxConstants';
import mxRectangleShape from './node/mxRectangleShape';
import mxUtils from '../util/mxUtils';
} from '../../../util/Constants';
import RectangleShape from './node/RectangleShape';
import utils from '../../../util/Utils';
/**
* Class: mxLabel
@ -37,7 +37,7 @@ import mxUtils from '../util/mxUtils';
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
class mxLabel extends mxRectangleShape {
class Label extends RectangleShape {
constructor(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, y, w, h) {
const align = mxUtils.getValue(this.style, 'imageAlign', ALIGN_LEFT);
const valign = mxUtils.getValue(
const align = utils.getValue(this.style, 'imageAlign', ALIGN_LEFT);
const valign = utils.getValue(
this.style,
'verticalAlign',
ALIGN_MIDDLE
);
const width = mxUtils.getNumber(
const width = utils.getNumber(
this.style,
'imageWidth',
DEFAULT_IMAGESIZE
);
const height = mxUtils.getNumber(
const height = utils.getNumber(
this.style,
'imageHeight',
DEFAULT_IMAGESIZE
);
const spacing =
mxUtils.getNumber(this.style, 'spacing', this.spacing) + 5;
utils.getNumber(this.style, 'spacing', this.spacing) + 5;
if (align === ALIGN_CENTER) {
x += (w - width) / 2;
@ -202,7 +202,7 @@ class mxLabel extends mxRectangleShape {
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} w
* @param {number} h
* @returns {mxRectangle}
* @returns {Rectangle}
*/
// getIndicatorBounds(x: number, y: number, w: number, h: number): mxRectangle;
getIndicatorBounds(x, y, w, h) {
const align = mxUtils.getValue(this.style, 'imageAlign', ALIGN_LEFT);
const valign = mxUtils.getValue(
const align = utils.getValue(this.style, 'imageAlign', ALIGN_LEFT);
const valign = utils.getValue(
this.style,
'verticalAlign',
ALIGN_MIDDLE
);
const width = mxUtils.getNumber(
const width = utils.getNumber(
this.style,
'indicatorWidth',
this.indicatorSize
);
const height = mxUtils.getNumber(
const height = utils.getNumber(
this.style,
'indicatorHeight',
this.indicatorSize
@ -279,7 +279,7 @@ class mxLabel extends mxRectangleShape {
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