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

replaced fn() => {} syntax with fn() class function syntax to fix "this" binding

development
mcyph 2021-03-23 11:27:48 +11:00
parent ff2f1c49ce
commit af8338c077
138 changed files with 4083 additions and 4114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/mxgraph/editor/mxDefaultKeyHandler.js
View File

@ -96,7 +96,7 @@ class mxDefaultKeyHandler {
* control - Optional boolean that specifies if control must be pressed.
* Default is false.
*/
bindAction = (code, action, control) => {
bindAction(code, action, control) {
const keyHandler = () => {
this.editor.execute(action);
};
@ -108,7 +108,7 @@ class mxDefaultKeyHandler {
// Binds the function to the normal keycode
this.handler.bindKey(code, keyHandler);
}
};
}
/**
* Function: destroy
@ -117,10 +117,10 @@ class mxDefaultKeyHandler {
* not need to be called, the <handler> is destroyed automatically when the
* window unloads (in IE) by <mxEditor>.
*/
destroy = () => {
destroy() {
this.handler.destroy();
this.handler = null;
};
}
}
export default mxDefaultKeyHandler;

18
src/mxgraph/editor/mxDefaultPopupMenu.js
View File

@ -155,14 +155,14 @@ class mxDefaultPopupMenu {
* cell - Optional <mxCell> which is under the mousepointer.
* evt - Optional mouse event which triggered the menu.
*/
createMenu = (editor, menu, cell, evt) => {
createMenu(editor, menu, cell, evt) {
if (this.config != null) {
const conditions = this.createConditions(editor, cell, evt);
const item = this.config.firstChild;
this.addItems(editor, menu, cell, evt, conditions, item, null);
}
};
}
/**
* Function: addItems
@ -179,7 +179,7 @@ class mxDefaultPopupMenu {
* item - XML node that represents the current menu item.
* parent - DOM node that represents the parent menu item.
*/
addItems = (editor, menu, cell, evt, conditions, item, parent) => {
addItems(editor, menu, cell, evt, conditions, item, parent) {
let addSeparator = false;
while (item != null) {
@ -233,7 +233,7 @@ class mxDefaultPopupMenu {
item = item.nextSibling;
}
};
}
/**
* Function: addAction
@ -256,7 +256,7 @@ class mxDefaultPopupMenu {
* enabled - Optional boolean that specifies if the menu item is enabled.
* Default is true.
*/
addAction = (
addAction(
menu,
editor,
lab,
@ -267,7 +267,7 @@ class mxDefaultPopupMenu {
parent,
iconCls,
enabled
) => {
) {
const clickHandler = evt => {
if (typeof funct === 'function') {
funct.call(editor, editor, cell, evt);
@ -277,14 +277,14 @@ class mxDefaultPopupMenu {
}
};
return menu.addItem(lab, icon, clickHandler, parent, iconCls, enabled);
};
}
/**
* Function: createConditions
*
* Evaluates the default conditions for the given context.
*/
createConditions = (editor, cell, evt) => {
createConditions(editor, cell, evt) {
// Creates array with conditions
const model = editor.graph.getModel();
const childCount = model.getChildCount(cell);
@ -318,7 +318,7 @@ class mxDefaultPopupMenu {
}
return conditions;
};
}
}
export default mxDefaultPopupMenu;

58
src/mxgraph/editor/mxDefaultToolbar.js
View File

@ -8,7 +8,7 @@ import mxClient from '../mxClient';
import mxToolbar from '../util/mxToolbar';
import mxGeometry from '../model/mxGeometry';
import mxUtils from '../util/mxUtils';
import mxEvent from "../util/mxEvent";
import mxEvent from '../util/mxEvent';
class mxDefaultToolbar {
/**
@ -105,7 +105,7 @@ class mxDefaultToolbar {
*
* container - DOM node that contains the toolbar.
*/
init = container => {
init(container) {
if (container != null) {
this.toolbar = new mxToolbar(container);
@ -134,7 +134,7 @@ class mxDefaultToolbar {
this.editor.graph.addListener(mxEvent.DOUBLE_CLICK, this.resetHandler);
this.editor.addListener(mxEvent.ESCAPE, this.resetHandler);
}
};
}
/**
* Function: addItem
@ -149,14 +149,14 @@ class mxDefaultToolbar {
* action - Name of the action to execute when the item is clicked.
* pressed - Optional URL of the icon for the pressed state.
*/
addItem = (title, icon, action, pressed) => {
addItem(title, icon, action, pressed) {
const clickHandler = () => {
if (action != null && action.length > 0) {
this.editor.execute(action);
}
};
return this.toolbar.addItem(title, icon, clickHandler, pressed);
};
}
/**
* Function: addSeparator
@ -168,10 +168,10 @@ class mxDefaultToolbar {
* icon - Optional URL of the icon that represents the vertical separator.
* Default is <mxClient.imageBasePath> + '/separator.gif'.
*/
addSeparator = icon => {
addSeparator(icon) {
icon = icon || `${mxClient.imageBasePath}/separator.gif`;
this.toolbar.addSeparator(icon);
};
}
/**
* Function: addCombo
@ -179,9 +179,9 @@ class mxDefaultToolbar {
* Helper method to invoke <mxToolbar.addCombo> on <toolbar> and return the
* resulting DOM node.
*/
addCombo = () => {
addCombo() {
return this.toolbar.addCombo();
};
}
/**
* Function: addActionCombo
@ -193,9 +193,9 @@ class mxDefaultToolbar {
*
* title - String that represents the title of the combo.
*/
addActionCombo = title => {
addActionCombo(title) {
return this.toolbar.addActionCombo(title);
};
}
/**
* Function: addActionOption
@ -210,13 +210,13 @@ class mxDefaultToolbar {
* title - String that represents the title of the combo.
* action - Name of the action to execute in <editor>.
*/
addActionOption = (combo, title, action) => {
addActionOption(combo, title, action) {
const clickHandler = mxUtils.bind(this, () => {
this.editor.execute(action);
});
this.addOption(combo, title, clickHandler);
};
}
/**
* Function: addOption
@ -230,9 +230,9 @@ class mxDefaultToolbar {
* title - String that represents the title of the combo.
* value - Object that represents the value of the option.
*/
addOption = (combo, title, value) => {
addOption(combo, title, value) {
return this.toolbar.addOption(combo, title, value);
};
}
/**
* Function: addMode
@ -251,7 +251,7 @@ class mxDefaultToolbar {
* first and only argument that is executed after the mode has been
* selected.
*/
addMode = (title, icon, mode, pressed, funct) => {
addMode(title, icon, mode, pressed, funct) {
const clickHandler = () => {
this.editor.setMode(mode);
@ -260,7 +260,7 @@ class mxDefaultToolbar {
}
};
return this.toolbar.addSwitchMode(title, icon, clickHandler, pressed);
};
}
/**
* Function: addPrototype
@ -283,7 +283,7 @@ class mxDefaultToolbar {
* toggle - Optional boolean that specifies if the item can be toggled.
* Default is true.
*/
addPrototype = (title, icon, ptype, pressed, insert, toggle) => {
addPrototype(title, icon, ptype, pressed, insert, toggle) {
// Creates a wrapper function that is in charge of constructing
// the new cell instance to be inserted into the graph
const factory = mxUtils.bind(this, () => {
@ -328,7 +328,7 @@ class mxDefaultToolbar {
this.installDropHandler(img, dropHandler);
return img;
};
}
/**
* Function: drop
@ -343,7 +343,7 @@ class mxDefaultToolbar {
* evt - Mouse event that represents the drop.
* target - Optional <mxCell> that represents the drop target.
*/
drop = (vertex, evt, target) => {
drop(vertex, evt, target) {
const { graph } = this.editor;
const model = graph.getModel();
@ -363,7 +363,7 @@ class mxDefaultToolbar {
} else {
this.connect(vertex, evt, target);
}
};
}
/**
* Function: insert
@ -377,7 +377,7 @@ class mxDefaultToolbar {
* evt - Mouse event that represents the drop.
* parent - Optional <mxCell> that represents the parent.
*/
insert = (vertex, evt, target) => {
insert(vertex, evt, target) {
const { graph } = this.editor;
if (graph.canImportCell(vertex)) {
@ -396,7 +396,7 @@ class mxDefaultToolbar {
}
return null;
};
}
/**
* Function: connect
@ -407,7 +407,7 @@ class mxDefaultToolbar {
* evt - Mouse event that represents the drop.
* source - Optional <mxCell> that represents the source terminal.
*/
connect = (vertex, evt, source) => {
connect(vertex, evt, source) {
const { graph } = this.editor;
const model = graph.getModel();
@ -464,7 +464,7 @@ class mxDefaultToolbar {
graph.setSelectionCells([vertex, edge]);
graph.scrollCellToVisible(vertex);
}
};
}
/**
* Function: installDropHandler
@ -477,7 +477,7 @@ class mxDefaultToolbar {
* img - DOM node that represents the image.
* dropHandler - Function that handles a drop of the image.
*/
installDropHandler = (img, dropHandler) => {
installDropHandler(img, dropHandler) {
const sprite = document.createElement('img');
sprite.setAttribute('src', img.getAttribute('src'));
@ -494,7 +494,7 @@ class mxDefaultToolbar {
mxUtils.makeDraggable(img, this.editor.graph, dropHandler, sprite);
mxEvent.removeListener(sprite, 'load', loader);
});
};
}
/**
* Function: destroy
@ -504,7 +504,7 @@ class mxDefaultToolbar {
* <toolbar> is destroyed automatically when the window unloads (in IE) by
* <mxEditor>.
*/
destroy = () => {
destroy() {
if (this.resetHandler != null) {
this.editor.graph.removeListener('dblclick', this.resetHandler);
this.editor.removeListener('escape', this.resetHandler);
@ -515,7 +515,7 @@ class mxDefaultToolbar {
this.toolbar.destroy();
this.toolbar = null;
}
};
}
}
export default mxDefaultToolbar;

238
src/mxgraph/editor/mxEditor.js
View File

@ -29,9 +29,9 @@ import mxEvent from '../util/mxEvent';
import mxRootChange from '../model/atomic_changes/mxRootChange';
import mxValueChange from '../model/atomic_changes/mxValueChange';
import mxCellAttributeChange from '../model/atomic_changes/mxCellAttributeChange';
import mxPrintPreview from "../view/mxPrintPreview";
import mxClipboard from "../util/mxClipboard";
import mxLog from "../util/mxLog";
import mxPrintPreview from '../view/mxPrintPreview';
import mxClipboard from '../util/mxClipboard';
import mxLog from '../util/mxLog';
/**
* Installs the required language resources at class
@ -929,18 +929,18 @@ class mxEditor extends mxEventSource {
*
* Returns <modified>.
*/
isModified = () => {
isModified() {
return this.modified;
};
}
/**
* Function: setModified
*
* Sets <modified> to the specified boolean value.
*/
setModified = value => {
setModified(value) {
this.modified = value;
};
}
/**
* Function: addActions
@ -1001,7 +1001,7 @@ class mxEditor extends mxEventSource {
* toggleOutline - Shows or hides the outline window.
* toggleConsole - Shows or hides the console window.
*/
addActions = () => {
addActions() {
this.addAction('save', editor => {
editor.save();
});
@ -1372,7 +1372,7 @@ class mxEditor extends mxEventSource {
this.addAction('toggleConsole', editor => {
mxLog.setVisible(!mxLog.isVisible());
});
};
}
/**
* Function: configure
@ -1389,7 +1389,7 @@ class mxEditor extends mxEventSource {
*
* node - XML node that contains the configuration.
*/
configure = node => {
configure(node) {
if (node != null) {
// Creates a decoder for the XML data
// and uses it to configure the editor
@ -1400,7 +1400,7 @@ class mxEditor extends mxEventSource {
// command history
this.resetHistory();
}
};
}
/**
* Function: resetFirstTime
@ -1408,22 +1408,22 @@ class mxEditor extends mxEventSource {
* Resets the cookie that is used to remember if the editor has already
* been used.
*/
resetFirstTime = () => {
resetFirstTime() {
document.cookie =
'mxgraph=seen; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/';
};
}
/**
* Function: resetHistory
*
* Resets the command history, modified state and counters.
*/
resetHistory = () => {
resetHistory() {
this.lastSnapshot = new Date().getTime();
this.undoManager.clear();
this.ignoredChanges = 0;
this.setModified(false);
};
}
/**
* Function: addAction
@ -1447,9 +1447,9 @@ class mxEditor extends mxEventSource {
* });
* (end)
*/
addAction = (actionname, funct) => {
addAction(actionname, funct) {
this.actions[actionname] = funct;
};
}
/**
* Function: execute
@ -1467,7 +1467,7 @@ class mxEditor extends mxEventSource {
* editor.execute("showProperties", cell);
* (end)
*/
execute = (actionname, cell, evt) => {
execute(actionname, cell, evt) {
const action = this.actions[actionname];
if (action != null) {
@ -1486,25 +1486,25 @@ class mxEditor extends mxEventSource {
} else {
mxUtils.error(`Cannot find action ${actionname}`, 280, true);
}
};
}
/**
* Function: addTemplate
*
* Adds the specified template under the given name in <templates>.
*/
addTemplate = (name, template) => {
addTemplate(name, template) {
this.templates[name] = template;
};
}
/**
* Function: getTemplate
*
* Returns the template for the given name.
*/
getTemplate = name => {
getTemplate(name) {
return this.templates[name];
};
}
/**
* Function: createGraph
@ -1512,7 +1512,7 @@ class mxEditor extends mxEventSource {
* Creates the <graph> for the editor. The graph is created with no
* container and is initialized from <setGraphContainer>.
*/
createGraph = () => {
createGraph() {
const graph = new mxGraph(null, null, this.graphRenderHint);
// Enables rubberband, tooltips, panning
@ -1555,14 +1555,14 @@ class mxEditor extends mxEventSource {
this.createLayoutManager(graph);
return graph;
};
}
/**
* Function: createSwimlaneManager
*
* Sets the graph's container using <mxGraph.init>.
*/
createSwimlaneManager = graph => {
createSwimlaneManager(graph) {
const swimlaneMgr = new mxSwimlaneManager(graph, false);
swimlaneMgr.isHorizontal = mxUtils.bind(this, () => {
@ -1574,7 +1574,7 @@ class mxEditor extends mxEventSource {
};
return swimlaneMgr;
};
}
/**
* Function: createLayoutManager
@ -1582,7 +1582,7 @@ class mxEditor extends mxEventSource {
* Creates a layout manager for the swimlane and diagram layouts, that
* is, the locally defined inter- and intraswimlane layouts.
*/
createLayoutManager = graph => {
createLayoutManager(graph) {
const layoutMgr = new mxLayoutManager(graph);
const self = this; // closure
@ -1622,14 +1622,14 @@ class mxEditor extends mxEventSource {
};
return layoutMgr;
};
}
/**
* Function: setGraphContainer
*
* Sets the graph's container using <mxGraph.init>.
*/
setGraphContainer = container => {
setGraphContainer(container) {
if (this.graph.container == null) {
// Creates the graph instance inside the given container and render hint
// this.graph = new mxGraph(container, null, this.graphRenderHint);
@ -1644,7 +1644,7 @@ class mxEditor extends mxEventSource {
mxEvent.disableContextMenu(container);
}
}
};
}
/**
* Function: installDblClickHandler
@ -1652,7 +1652,7 @@ class mxEditor extends mxEventSource {
* Overrides <mxGraph.dblClick> to invoke <dblClickAction>
* on a cell and reset the selection tool in the toolbar.
*/
installDblClickHandler = graph => {
installDblClickHandler(graph) {
// Installs a listener for double click events
graph.addListener(
mxEvent.DOUBLE_CLICK,
@ -1665,14 +1665,14 @@ class mxEditor extends mxEventSource {
}
})
);
};
}
/**
* Function: installUndoHandler
*
* Adds the <undoManager> to the graph model and the view.
*/
installUndoHandler = graph => {
installUndoHandler(graph) {
const listener = (sender, evt) => {
const edit = evt.getProperty('edit');
this.undoManager.undoableEditHappened(edit);
@ -1689,21 +1689,21 @@ class mxEditor extends mxEventSource {
this.undoManager.addListener(mxEvent.UNDO, undoHandler);
this.undoManager.addListener(mxEvent.REDO, undoHandler);
};
}
/**
* Function: installDrillHandler
*
* Installs listeners for dispatching the <root> event.
*/
installDrillHandler = graph => {
installDrillHandler(graph) {
const listener = mxUtils.bind(this, sender => {
this.fireEvent(new mxEventObject(mxEvent.ROOT));
});
graph.getView().addListener(mxEvent.DOWN, listener);
graph.getView().addListener(mxEvent.UP, listener);
};
}
/**
* Function: installChangeHandler
@ -1712,7 +1712,7 @@ class mxEditor extends mxEventSource {
* the graph. On each change of the root, this implementation
* fires a <root> event.
*/
installChangeHandler = graph => {
installChangeHandler(graph) {
const listener = (sender, evt) => {
// Updates the modified state
this.setModified(true);
@ -1743,7 +1743,7 @@ class mxEditor extends mxEventSource {
};
graph.getModel().addListener(mxEvent.CHANGE, listener);
};
}
/**
* Function: installInsertHandler
@ -1751,7 +1751,7 @@ class mxEditor extends mxEventSource {
* Installs the handler for invoking <insertFunction> if
* one is defined.
*/
installInsertHandler = graph => {
installInsertHandler(graph) {
const self = this; // closure
const insertHandler = {
mouseDown: (sender, me) => {
@ -1785,7 +1785,7 @@ class mxEditor extends mxEventSource {
};
graph.addMouseListener(insertHandler);
};
}
/**
* Function: createDiagramLayout
@ -1793,7 +1793,7 @@ class mxEditor extends mxEventSource {
* Creates the layout instance used to layout the
* swimlanes in the diagram.
*/
createDiagramLayout = () => {
createDiagramLayout() {
const gs = this.graph.gridSize;
const layout = new mxStackLayout(
this.graph,
@ -1809,7 +1809,7 @@ class mxEditor extends mxEventSource {
};
return layout;
};
}
/**
* Function: createSwimlaneLayout
@ -1817,27 +1817,27 @@ class mxEditor extends mxEventSource {
* Creates the layout instance used to layout the
* children of each swimlane.
*/
createSwimlaneLayout = () => {
createSwimlaneLayout() {
return new mxCompactTreeLayout(this.graph, this.horizontalFlow);
};
}
/**
* Function: createToolbar
*
* Creates the <toolbar> with no container.
*/
createToolbar = () => {
createToolbar() {
return new mxDefaultToolbar(null, this);
};
}
/**
* Function: setToolbarContainer
*
* Initializes the toolbar for the given container.
*/
setToolbarContainer = container => {
setToolbarContainer(container) {
this.toolbar.init(container);
};
}
/**
* Function: setStatusContainer
@ -1852,7 +1852,7 @@ class mxEditor extends mxEventSource {
*
* container - DOM node that will contain the statusbar.
*/
setStatusContainer = container => {
setStatusContainer(container) {
if (this.status == null) {
this.status = container;
@ -1878,7 +1878,7 @@ class mxEditor extends mxEventSource {
);
});
}
};
}
/**
* Function: setStatus
@ -1890,11 +1890,11 @@ class mxEditor extends mxEventSource {
* message - String the specified the message to
* be displayed.
*/
setStatus = message => {
setStatus(message) {
if (this.status != null && message != null) {
this.status.innerHTML = message;
}
};
}
/**
* Function: setTitleContainer
@ -1906,14 +1906,14 @@ class mxEditor extends mxEventSource {
*
* container - DOM node that will contain the title.
*/
setTitleContainer = container => {
setTitleContainer(container) {
this.addListener(
mxEvent.ROOT,
mxUtils.bind(this, sender => {
container.innerHTML = this.getTitle();
})
);
};
}
/**
* Function: treeLayout
@ -1928,12 +1928,12 @@ class mxEditor extends mxEventSource {
* horizontal - Optional boolean to specify the tree's
* orientation. Default is true.
*/
treeLayout = (cell, horizontal) => {
treeLayout(cell, horizontal) {
if (cell != null) {
const layout = new mxCompactTreeLayout(this.graph, horizontal);
layout.execute(cell);
}
};
}
/**
* Function: getTitle
@ -1941,7 +1941,7 @@ class mxEditor extends mxEventSource {
* Returns the string value for the current root of the
* diagram.
*/
getTitle = () => {
getTitle() {
let title = '';
const { graph } = this;
let cell = graph.getCurrentRoot();
@ -1961,7 +1961,7 @@ class mxEditor extends mxEventSource {
const prefix = this.getRootTitle();
return prefix + title;
};
}
/**
* Function: getRootTitle
@ -1969,28 +1969,28 @@ class mxEditor extends mxEventSource {
* Returns the string value of the root cell in
* <mxGraph.model>.
*/
getRootTitle = () => {
getRootTitle() {
const root = this.graph.getModel().getRoot();
return this.graph.convertValueToString(root);
};
}
/**
* Function: undo
*
* Undo the last change in <graph>.
*/
undo = () => {
undo() {
this.undoManager.undo();
};
}
/**
* Function: redo
*
* Redo the last change in <graph>.
*/
redo = () => {
redo() {
this.undoManager.redo();
};
}
/**
* Function: groupCells
@ -1999,11 +1999,11 @@ class mxEditor extends mxEventSource {
* <mxGraph.groupCells>, using the grid size of the graph as the spacing
* in the group's content area.
*/
groupCells = () => {
groupCells() {
const border =
this.groupBorderSize != null ? this.groupBorderSize : this.graph.gridSize;
return this.graph.groupCells(this.createGroup(), border);
};
}
/**
* Function: createGroup
@ -2011,11 +2011,11 @@ class mxEditor extends mxEventSource {
* Creates and returns a clone of <defaultGroup> to be used
* as a new group cell in <group>.
*/
createGroup = () => {
createGroup() {
const model = this.graph.getModel();
return model.cloneCell(this.defaultGroup);
};
}
/**
* Function: open
@ -2040,7 +2040,7 @@ class mxEditor extends mxEventSource {
*
* filename - URL of the file to be opened.
*/
open = filename => {
open(filename) {
if (filename != null) {
const xml = mxUtils.load(filename).getXml();
this.readGraphModel(xml.documentElement);
@ -2048,7 +2048,7 @@ class mxEditor extends mxEventSource {
this.fireEvent(new mxEventObject(mxEvent.OPEN, 'filename', filename));
}
};
}
/**
* Function: readGraphModel
@ -2056,11 +2056,11 @@ class mxEditor extends mxEventSource {
* Reads the specified XML node into the existing graph model and resets
* the command history and modified state.
*/
readGraphModel = node => {
readGraphModel(node) {
const dec = new mxCodec(node.ownerDocument);
dec.decode(node, this.graph.getModel());
this.resetHistory();
};
}
/**
* Function: save
@ -2082,7 +2082,7 @@ class mxEditor extends mxEventSource {
* }
* (end)
*/
save = (url, linefeed) => {
save(url, linefeed) {
// Gets the URL to post the data to
url = url || this.getUrlPost();
@ -2097,7 +2097,7 @@ class mxEditor extends mxEventSource {
// Dispatches a save event
this.fireEvent(new mxEventObject(mxEvent.SAVE, 'url', url));
};
}
/**
* Function: postDiagram
@ -2121,7 +2121,7 @@ class mxEditor extends mxEventSource {
* });
* (end)
*/
postDiagram = (url, data) => {
postDiagram(url, data) {
if (this.escapePostData) {
data = encodeURIComponent(data);
}
@ -2139,7 +2139,7 @@ class mxEditor extends mxEventSource {
)
);
});
};
}
/**
* Function: writeGraphModel
@ -2159,13 +2159,13 @@ class mxEditor extends mxEventSource {
* linefeed - Optional character to be used as the linefeed. Default is
* <linefeed>.
*/
writeGraphModel = linefeed => {
writeGraphModel(linefeed) {
linefeed = linefeed != null ? linefeed : this.linefeed;
const enc = new mxCodec();
const node = enc.encode(this.graph.getModel());
return mxUtils.getXml(node, linefeed);
};
}
/**
* Function: getUrlPost
@ -2174,9 +2174,9 @@ class mxEditor extends mxEventSource {
* in <save>. The default implementation returns <urlPost>,
* adding <code>?draft=true</code>.
*/
getUrlPost = () => {
getUrlPost() {
return this.urlPost;
};
}
/**
* Function: getUrlImage
@ -2187,9 +2187,9 @@ class mxEditor extends mxEventSource {
* in the image action to create an image. This implementation
* returns <urlImage>.
*/
getUrlImage = () => {
getUrlImage() {
return this.urlImage;
};
}
/**
* Function: swapStyles
@ -2197,7 +2197,7 @@ class mxEditor extends mxEventSource {
* Swaps the styles for the given names in the graph's
* stylesheet and refreshes the graph.
*/
swapStyles = (first, second) => {
swapStyles(first, second) {
const style = this.graph.getStylesheet().styles[second];
this.graph
.getView()
@ -2205,7 +2205,7 @@ class mxEditor extends mxEventSource {
.putCellStyle(second, this.graph.getStylesheet().styles[first]);
this.graph.getStylesheet().putCellStyle(first, style);
this.graph.refresh();
};
}
/**
* Function: showProperties
@ -2214,7 +2214,7 @@ class mxEditor extends mxEventSource {
* cell. The content area of the dialog is created using
* <createProperties>.
*/
showProperties = cell => {
showProperties(cell) {
cell = cell || this.graph.getSelectionCell();
// Uses the root node for the properties dialog
@ -2274,16 +2274,16 @@ class mxEditor extends mxEventSource {
this.properties.setVisible(true);
}
}
};
}
/**
* Function: isPropertiesVisible
*
* Returns true if the properties dialog is currently visible.
*/
isPropertiesVisible = () => {
isPropertiesVisible() {
return this.properties != null;
};
}
/**
* Function: createProperties
@ -2293,7 +2293,7 @@ class mxEditor extends mxEventSource {
* works for user objects that are XML nodes and display all the
* node attributes in a form.
*/
createProperties = cell => {
createProperties(cell) {
const model = this.graph.getModel();
const value = model.getValue(cell);
@ -2414,19 +2414,19 @@ class mxEditor extends mxEventSource {
}
return null;
};
}
/**
* Function: hideProperties
*
* Hides the properties dialog.
*/
hideProperties = () => {
hideProperties() {
if (this.properties != null) {
this.properties.destroy();
this.properties = null;
}
};
}
/**
* Function: showTasks
@ -2450,7 +2450,7 @@ class mxEditor extends mxEventSource {
* };
* (end)
*/
showTasks = () => {
showTasks() {
if (this.tasks == null) {
const div = document.createElement('div');
div.style.padding = '4px';
@ -2489,21 +2489,21 @@ class mxEditor extends mxEventSource {
}
this.tasks.setVisible(true);
};
}
/**
* Function: refreshTasks
*
* Updates the contents of the tasks window using <createTasks>.
*/
refreshTasks = div => {
refreshTasks(div) {
if (this.tasks != null) {
const div = this.tasks.content;
mxEvent.release(div);
div.innerHTML = '';
this.createTasks(div);
}
};
}
/**
* Function: createTasks
@ -2514,9 +2514,9 @@ class mxEditor extends mxEventSource {
* is a possible change of state in the editor.
* Default implementation is empty.
*/
createTasks = div => {
createTasks(div) {
// override
};
}
/**
* Function: showHelp
@ -2526,7 +2526,7 @@ class mxEditor extends mxEventSource {
* for the <code>urlHelp</code> key or <urlHelp> if the resource
* is undefined.
*/
showHelp = tasks => {
showHelp(tasks) {
if (this.help == null) {
const frame = document.createElement('iframe');
frame.setAttribute('src', mxResources.get('urlHelp') || this.urlHelp);
@ -2574,7 +2574,7 @@ class mxEditor extends mxEventSource {
}
this.help.setVisible(true);
};
}
/**
* Function: showOutline
@ -2582,7 +2582,7 @@ class mxEditor extends mxEventSource {
* Shows the outline window. If the window does not exist, then it is
* created using an <mxOutline>.
*/
showOutline = () => {
showOutline() {
const create = this.outline == null;
if (create) {
@ -2623,7 +2623,7 @@ class mxEditor extends mxEventSource {
// Finally shows the outline
this.outline.setVisible(true);
this.outline.outline.update(true);
};
}
/**
* Function: setMode
@ -2637,7 +2637,7 @@ class mxEditor extends mxEventSource {
* connections if mouse over cell hotspot. See <mxConnectionHandler>.
* pan - Pans using the left mouse button, new connections are disabled.
*/
setMode = modename => {
setMode(modename) {
if (modename === 'select') {
this.graph.panningHandler.useLeftButtonForPanning = false;
this.graph.setConnectable(false);
@ -2648,7 +2648,7 @@ class mxEditor extends mxEventSource {
this.graph.panningHandler.useLeftButtonForPanning = true;
this.graph.setConnectable(false);
}
};
}
/**
* Function: createPopupMenu
@ -2657,9 +2657,9 @@ class mxEditor extends mxEventSource {
* panning handler. The redirection is setup in
* <setToolbarContainer>.
*/
createPopupMenu = (menu, cell, evt) => {
createPopupMenu(menu, cell, evt) {
this.popupHandler.createMenu(this, menu, cell, evt);
};
}
/**
* Function: createEdge
@ -2669,7 +2669,7 @@ class mxEditor extends mxEventSource {
* edge will be overridden with the value returned by
* <getEdgeStyle>.
*/
createEdge = (source, target) => {
createEdge(source, target) {
// Clones the defaultedge prototype
let e = null;
@ -2693,7 +2693,7 @@ class mxEditor extends mxEventSource {
}
return e;
};
}
/**
* Function: getEdgeStyle
@ -2702,9 +2702,9 @@ class mxEditor extends mxEventSource {
* The function is used in <createEdge> when new edges
* are created in the graph.
*/
getEdgeStyle = () => {
getEdgeStyle() {
return this.defaultEdgeStyle;
};
}
/**
* Function: consumeCycleAttribute
@ -2713,7 +2713,7 @@ class mxEditor extends mxEventSource {
* or null, if not attribute should be used in the
* specified cell.
*/
consumeCycleAttribute = cell => {
consumeCycleAttribute(cell) {
return this.cycleAttributeValues != null &&
this.cycleAttributeValues.length > 0 &&
this.graph.isSwimlane(cell)
@ -2721,7 +2721,7 @@ class mxEditor extends mxEventSource {
this.cycleAttributeIndex++ % this.cycleAttributeValues.length
]
: null;
};
}
/**
* Function: cycleAttribute
@ -2730,7 +2730,7 @@ class mxEditor extends mxEventSource {
* as the value for the <cycleAttributeName> key in
* the given cell's style.
*/
cycleAttribute = cell => {
cycleAttribute(cell) {
if (this.cycleAttributeName != null) {
const value = this.consumeCycleAttribute(cell);
@ -2738,7 +2738,7 @@ class mxEditor extends mxEventSource {
cell.setStyle(`${cell.getStyle()};${this.cycleAttributeName}=${value}`);
}
}
};
}
/**
* Function: addVertex
@ -2746,7 +2746,7 @@ class mxEditor extends mxEventSource {
* Adds the given vertex as a child of parent at the specified
* x and y coordinate and fires an <addVertex> event.
*/
addVertex = (parent, vertex, x, y) => {
addVertex(parent, vertex, x, y) {
const model = this.graph.getModel();
while (parent != null && !this.graph.isValidDropTarget(parent)) {
@ -2838,7 +2838,7 @@ class mxEditor extends mxEventSource {
}
return vertex;
};
}
/**
* Function: destroy
@ -2847,7 +2847,7 @@ class mxEditor extends mxEventSource {
* normally need to be called, it is called automatically when the window
* unloads.
*/
destroy = () => {
destroy() {
if (!this.destroyed) {
this.destroyed = true;
@ -2882,7 +2882,7 @@ class mxEditor extends mxEventSource {
this.status = null;
this.templates = null;
}
};
}
}
export default mxEditor;

38
src/mxgraph/handler/mxCellHighlight.js
View File

@ -5,7 +5,7 @@
*/
import mxConstants from '../util/mxConstants';
import mxEvent from '../util/mxEvent';
import mxRectangle from "../util/mxRectangle";
import mxRectangle from '../util/mxRectangle';
class mxCellHighlight {
/**
@ -113,20 +113,20 @@ class mxCellHighlight {
*
* color - String that represents the new highlight color.
*/
setHighlightColor = color => {
setHighlightColor(color) {
this.highlightColor = color;
if (this.shape != null) {
this.shape.stroke = color;
}
};
}
/**
* Function: drawHighlight
*
* Creates and returns the highlight shape for the given state.
*/
drawHighlight = () => {
drawHighlight() {
this.shape = this.createShape();
this.repaint();
@ -139,14 +139,14 @@ class mxCellHighlight {
this.shape.node.parentNode.firstChild
);
}
};
}
/**
* Function: createShape
*
* Creates and returns the highlight shape for the given state.
*/
createShape = () => {
createShape() {
const shape = this.graph.cellRenderer.createShape(this.state);
shape.svgStrokeTolerance = this.graph.tolerance;
@ -168,23 +168,23 @@ class mxCellHighlight {
}
return shape;
};
}
/**
* Function: getStrokeWidth
*
* Returns the stroke width.
*/
getStrokeWidth = state => {
getStrokeWidth(state) {
return this.strokeWidth;
};
}
/**
* Function: repaint
*
* Updates the highlight after a change of the model or view.
*/
repaint = () => {
repaint() {
if (this.state != null && this.shape != null) {
this.shape.scale = this.state.view.scale;
@ -213,23 +213,23 @@ class mxCellHighlight {
this.shape.redraw();
}
};
}
/**
* Function: hide
*
* Resets the state of the cell marker.
*/
hide = () => {
hide() {
this.highlight(null);
};
}
/**
* Function: mark
*
* Marks the <markedState> and fires a <mark> event.
*/
highlight = state => {
highlight(state) {
if (this.state !== state) {
if (this.shape != null) {
this.shape.destroy();
@ -242,14 +242,14 @@ class mxCellHighlight {
this.drawHighlight();
}
}
};
}
/**
* Function: isHighlightAt
*
* Returns true if this highlight is at the given position.
*/
isHighlightAt = (x, y) => {
isHighlightAt(x, y) {
let hit = false;
if (this.shape != null && document.elementFromPoint != null) {
@ -266,14 +266,14 @@ class mxCellHighlight {
}
return hit;
};
}
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = () => {
destroy() {
this.graph.getView().removeListener(this.resetHandler);
this.graph.getView().removeListener(this.repaintHandler);
this.graph.getModel().removeListener(this.repaintHandler);
@ -282,7 +282,7 @@ class mxCellHighlight {
this.shape.destroy();
this.shape = null;
}
};
}
}
export default mxCellHighlight;

88
src/mxgraph/handler/mxCellMarker.js
View File

@ -7,8 +7,8 @@ import mxEventSource from '../util/mxEventSource';
import mxConstants from '../util/mxConstants';
import mxCellHighlight from './mxCellHighlight';
import mxEventObject from '../util/mxEventObject';
import mxEvent from "../util/mxEvent";
import mxUtils from "../util/mxUtils";
import mxEvent from '../util/mxEvent';
import mxUtils from '../util/mxUtils';
class mxCellMarker extends mxEventSource {
/**
@ -142,9 +142,9 @@ class mxCellMarker extends mxEventSource {
*
* enabled - Boolean that specifies the new enabled state.
*/
setEnabled = enabled => {
setEnabled(enabled) {
this.enabled = enabled;
};
}
/**
* Function: isEnabled
@ -152,86 +152,86 @@ class mxCellMarker extends mxEventSource {
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setHotspot
*
* Sets the <hotspot>.
*/
setHotspot = hotspot => {
setHotspot(hotspot) {
this.hotspot = hotspot;
};
}
/**
* Function: getHotspot
*
* Returns the <hotspot>.
*/
getHotspot = () => {
getHotspot() {
return this.hotspot;
};
}
/**
* Function: setHotspotEnabled
*
* Specifies whether the hotspot should be used in <intersects>.
*/
setHotspotEnabled = enabled => {
setHotspotEnabled(enabled) {
this.hotspotEnabled = enabled;
};
}
/**
* Function: isHotspotEnabled
*
* Returns true if hotspot is used in <intersects>.
*/
isHotspotEnabled = () => {
isHotspotEnabled() {
return this.hotspotEnabled;
};
}
/**
* Function: hasValidState
*
* Returns true if <validState> is not null.
*/
hasValidState = () => {
hasValidState() {
return this.validState != null;
};
}
/**
* Function: getValidState
*
* Returns the <validState>.
*/
getValidState = () => {
getValidState() {
return this.validState;
};
}
/**
* Function: getMarkedState
*
* Returns the <markedState>.
*/
getMarkedState = () => {
getMarkedState() {
return this.markedState;
};
}
/**
* Function: reset
*
* Resets the state of the cell marker.
*/
reset = () => {
reset() {
this.validState = null;
if (this.markedState != null) {
this.markedState = null;
this.unmark();
}
};
}
/**
* Function: process
@ -243,7 +243,7 @@ class mxCellMarker extends mxEventSource {
* regardless of the marker color. The state is returned regardless of the
* marker color and valid state.
*/
process = me => {
process(me) {
let state = null;
if (this.isEnabled()) {
@ -252,14 +252,14 @@ class mxCellMarker extends mxEventSource {
}
return state;
};
}
/**
* Function: setCurrentState
*
* Sets and marks the current valid state.
*/
setCurrentState = (state, me, color) => {
setCurrentState(state, me, color) {
const isValid = state != null ? this.isValidState(state) : false;
color =
color != null
@ -283,14 +283,14 @@ class mxCellMarker extends mxEventSource {
this.unmark();
}
}
};
}
/**
* Function: markCell
*
* Marks the given cell using the given color, or <validColor> if no color is specified.
*/
markCell = (cell, color) => {
markCell(cell, color) {
const state = this.graph.getView().getState(cell);
if (state != null) {
@ -298,27 +298,27 @@ class mxCellMarker extends mxEventSource {
this.markedState = state;
this.mark();
}
};
}
/**
* Function: mark
*
* Marks the <markedState> and fires a <mark> event.
*/
mark = () => {
mark() {
this.highlight.setHighlightColor(this.currentColor);
this.highlight.highlight(this.markedState);
this.fireEvent(new mxEventObject(mxEvent.MARK, 'state', this.markedState));
};
}
/**
* Function: unmark
*
* Hides the marker and fires a <mark> event.
*/
unmark = () => {
unmark() {
this.mark();
};
}
/**
* Function: isValidState
@ -327,9 +327,9 @@ class mxCellMarker extends mxEventSource {
* returns true, then the state is stored in <validState>. The return value
* of this method is used as the argument for <getMarkerColor>.
*/
isValidState = state => {
isValidState(state) {
return true;
};
}
/**
* Function: getMarkerColor
@ -337,9 +337,9 @@ class mxCellMarker extends mxEventSource {
* Returns the valid- or invalidColor depending on the value of isValid.
* The given <mxCellState> is ignored by this implementation.
*/
getMarkerColor = (evt, state, isValid) => {
getMarkerColor(evt, state, isValid) {
return isValid ? this.validColor : this.invalidColor;
};
}
/**
* Function: getState
@ -347,13 +347,13 @@ class mxCellMarker extends mxEventSource {
* Uses <getCell>, <getStateToMark> and <intersects> to return the
* <mxCellState> for the given <mxMouseEvent>.
*/
getState = me => {
getState(me) {
const view = this.graph.getView();
const cell = this.getCell(me);
const state = this.getStateToMark(view.getState(cell));
return state != null && this.intersects(state, me) ? state : null;
};
}
/**
* Function: getCell
@ -363,7 +363,7 @@ class mxCellMarker extends mxEventSource {
*/
getCell(me) {
return me.getCell();
};
}
/**
* Function: getStateToMark
@ -371,9 +371,9 @@ class mxCellMarker extends mxEventSource {
* Returns the <mxCellState> to be marked for the given <mxCellState> under
* the mouse. This returns the given state.
*/
getStateToMark = state => {
getStateToMark(state) {
return state;
};
}
/**
* Function: intersects
@ -382,7 +382,7 @@ class mxCellMarker extends mxEventSource {
* This returns true if the <hotspot> is 0 or the coordinates are inside
* the hotspot for the given cell state.
*/
intersects = (state, me) => {
intersects(state, me) {
if (this.hotspotEnabled) {
return mxUtils.intersectsHotspot(
state,
@ -395,7 +395,7 @@ class mxCellMarker extends mxEventSource {
}
return true;
};
}
/**
* Function: destroy
@ -406,7 +406,7 @@ class mxCellMarker extends mxEventSource {
this.graph.getView().removeListener(this.resetHandler);
this.graph.getModel().removeListener(this.resetHandler);
this.highlight.destroy();
};
}
}
export default mxCellMarker;

14
src/mxgraph/handler/mxCellTracker.js
View File

@ -3,7 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxCellMarker from "./mxCellMarker";
import mxCellMarker from './mxCellMarker';
class mxCellTracker extends mxCellMarker {
/**
@ -91,7 +91,7 @@ class mxCellTracker extends mxCellMarker {
*
* Ignores the event. The event is not consumed.
*/
mouseDown = (sender, me) => {};
mouseDown(sender, me) {}
/**
* Function: mouseMove
@ -99,18 +99,18 @@ class mxCellTracker extends mxCellMarker {
* Handles the event by highlighting the cell under the mousepointer if it
* is over the hotspot region of the cell.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
if (this.isEnabled()) {
this.process(me);
}
};
}
/**
* Function: mouseUp
*
* Handles the event by reseting the highlight.
*/
mouseUp = (sender, me) => {};
mouseUp(sender, me) {}
/**
* Function: destroy
@ -119,14 +119,14 @@ class mxCellTracker extends mxCellMarker {
* normally need to be called. It is called automatically when the window
* unloads.
*/
destroy = () => {
destroy() {
if (!this.destroyed) {
this.destroyed = true;
this.graph.removeMouseListener(this);
super.destroy();
}
};
}
}
export default mxCellTracker;

202
src/mxgraph/handler/mxConnectionHandler.js
View File

@ -16,7 +16,7 @@ import mxConstraintHandler from './mxConstraintHandler';
import mxPolyline from '../shape/mxPolyline';
import mxEventSource from '../util/mxEventSource';
import mxRectangle from '../util/mxRectangle';
import mxLog from "../util/mxLog";
import mxLog from '../util/mxLog';
class mxConnectionHandler extends mxEventSource {
/**
@ -403,9 +403,9 @@ class mxConnectionHandler extends mxEventSource {
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
@ -417,9 +417,9 @@ class mxConnectionHandler extends mxEventSource {
*
* enabled - Boolean that specifies the new enabled state.
*/
setEnabled = enabled => {
setEnabled(enabled) {
this.enabled = enabled;
};
}
/**
* Function: isInsertBefore
@ -435,9 +435,9 @@ class mxConnectionHandler extends mxEventSource {
* dropTarget - <mxCell> that represents the cell under the mouse when it was
* released.
*/
isInsertBefore = (edge, source, target, evt, dropTarget) => {
isInsertBefore(edge, source, target, evt, dropTarget) {
return this.insertBeforeSource && source !== target;
};
}
/**
* Function: isCreateTarget
@ -448,25 +448,25 @@ class mxConnectionHandler extends mxEventSource {
*
* evt - Current active native pointer event.
*/
isCreateTarget = evt => {
isCreateTarget(evt) {
return this.createTarget;
};
}
/**
* Function: setCreateTarget
*
* Sets <createTarget>.
*/
setCreateTarget = value => {
setCreateTarget(value) {
this.createTarget = value;
};
}
/**
* Function: createShape
*
* Creates the preview shape for new connections.
*/
createShape = () => {
createShape() {
// Creates the edge preview
const shape =
this.livePreview && this.edgeState != null
@ -480,7 +480,7 @@ class mxConnectionHandler extends mxEventSource {
mxEvent.redirectMouseEvents(shape.node, this.graph, null);
return shape;
};
}
/**
* Function: init
@ -489,7 +489,7 @@ class mxConnectionHandler extends mxEventSource {
* be invoked if <mxGraph.container> is assigned after the connection
* handler has been created.
*/
init = () => {
init() {
this.graph.addMouseListener(this);
this.marker = this.createMarker();
this.constraintHandler = new mxConstraintHandler(this.graph);
@ -526,7 +526,7 @@ class mxConnectionHandler extends mxEventSource {
this.graph.addListener(mxEvent.START_EDITING, this.drillHandler);
this.graph.getView().addListener(mxEvent.DOWN, this.drillHandler);
this.graph.getView().addListener(mxEvent.UP, this.drillHandler);
};
}
/**
* Function: isConnectableCell
@ -534,16 +534,16 @@ 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 => {
isConnectableCell(cell) {
return true;
};
}
/**
* Function: createMarker
*
* Creates and returns the <mxCellMarker> used in <marker>.
*/
createMarker = () => {
createMarker() {
const self = this;
class MyCellMarker extends mxCellMarker {
@ -640,14 +640,14 @@ class mxConnectionHandler extends mxEventSource {
}
return new MyCellMarker(this.graph);
};
}
/**
* Function: start
*
* Starts a new connection for the given state and coordinates.
*/
start = (state, x, y, edgeState) => {
start(state, x, y, edgeState) {
this.previous = state;
this.first = new mxPoint(x, y);
this.edgeState = edgeState != null ? edgeState : this.createEdgeState(null);
@ -658,7 +658,7 @@ class mxConnectionHandler extends mxEventSource {
this.marker.mark();
this.fireEvent(new mxEventObject(mxEvent.START, 'state', this.previous));
};
}
/**
* Function: isConnecting
@ -666,9 +666,9 @@ class mxConnectionHandler extends mxEventSource {
* Returns true if the source terminal has been clicked and a new
* connection is currently being previewed.
*/
isConnecting = () => {
isConnecting() {
return this.first != null && this.shape != null;
};
}
/**
* Function: isValidSource
@ -680,9 +680,9 @@ class mxConnectionHandler extends mxEventSource {
* cell - <mxCell> that represents the source terminal.
* me - <mxMouseEvent> that is associated with this call.
*/
isValidSource = (cell, me) => {
isValidSource(cell, me) {
return this.graph.isValidSource(cell);
};
}
/**
* Function: isValidTarget
@ -695,9 +695,9 @@ class mxConnectionHandler extends mxEventSource {
*
* cell - <mxCell> that represents the target terminal.
*/
isValidTarget = cell => {
isValidTarget(cell) {
return true;
};
}
/**
* Function: validateConnection
@ -711,13 +711,13 @@ class mxConnectionHandler extends mxEventSource {
* source - <mxCell> that represents the source terminal.
* target - <mxCell> that represents the target terminal.
*/
validateConnection = (source, target) => {
validateConnection(source, target) {
if (!this.isValidTarget(target)) {
return '';
}
return this.graph.getEdgeValidationError(null, source, target);
};
}
/**
* Function: getConnectImage
@ -729,9 +729,9 @@ class mxConnectionHandler extends mxEventSource {
*
* state - <mxCellState> whose connect image should be returned.
*/
getConnectImage = state => {
getConnectImage(state) {
return this.connectImage;
};
}
/**
* Function: isMoveIconToFrontForState
@ -743,7 +743,7 @@ class mxConnectionHandler extends mxEventSource {
*
* state - <mxCellState> whose connect icons should be returned.
*/
isMoveIconToFrontForState = state => {
isMoveIconToFrontForState(state) {
if (
state.text != null &&
state.text.node.parentNode === this.graph.container
@ -752,7 +752,7 @@ class mxConnectionHandler extends mxEventSource {
}
return this.moveIconFront;
};
}
/**
* Function: createIcons
@ -764,7 +764,7 @@ class mxConnectionHandler extends mxEventSource {
*
* state - <mxCellState> whose connect icons should be returned.
*/
createIcons = state => {
createIcons(state) {
const image = this.getConnectImage(state);
if (image != null && state != null) {
@ -822,7 +822,7 @@ class mxConnectionHandler extends mxEventSource {
}
return null;
};
}
/**
* Function: redrawIcons
@ -833,14 +833,14 @@ class mxConnectionHandler extends mxEventSource {
*
* icons - Optional array of <mxImageShapes> to be redrawn.
*/
redrawIcons = (icons, state) => {
redrawIcons(icons, state) {
if (icons != null && icons[0] != null && state != null) {
const pos = this.getIconPosition(icons[0], state);
icons[0].bounds.x = pos.x;
icons[0].bounds.y = pos.y;
icons[0].redraw();
}
};
}
/**
* Function: getIconPosition
@ -852,7 +852,7 @@ class mxConnectionHandler extends mxEventSource {
* icon - The connect icon of <mxImageShape> with the mouse.
* state - <mxCellState> under the mouse.
*/
getIconPosition = (icon, state) => {
getIconPosition(icon, state) {
const { scale } = this.graph.getView();
let cx = state.getCenterX();
let cy = state.getCenterY();
@ -878,14 +878,14 @@ class mxConnectionHandler extends mxEventSource {
}
return new mxPoint(cx - icon.bounds.width / 2, cy - icon.bounds.height / 2);
};
}
/**
* Function: destroyIcons
*
* Destroys the connect icons and resets the respective state.
*/
destroyIcons = () => {
destroyIcons() {
if (this.icons != null) {
for (let i = 0; i < this.icons.length; i += 1) {
this.icons[i].destroy();
@ -896,7 +896,7 @@ class mxConnectionHandler extends mxEventSource {
this.selectedIcon = null;
this.iconState = null;
}
};
}
/**
* Function: isStartEvent
@ -907,7 +907,7 @@ class mxConnectionHandler extends mxEventSource {
* <constraintHandler> are not null, or <previous> and <error> are not null and
* <icons> is null or <icons> and <icon> are not null.
*/
isStartEvent = me => {
isStartEvent(me) {
return (
(this.constraintHandler.currentFocus !== null &&
this.constraintHandler.currentConstraint !== null) ||
@ -915,14 +915,14 @@ class mxConnectionHandler extends mxEventSource {
this.error === null &&
(this.icons === null || this.icon !== null))
);
};
}
/**
* Function: mouseDown
*
* Handles the event by initiating a new connection.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
this.mouseDownCounter += 1;
if (
@ -970,7 +970,7 @@ class mxConnectionHandler extends mxEventSource {
this.selectedIcon = this.icon;
this.icon = null;
};
}
/**
* Function: isImmediateConnectSource
@ -979,9 +979,9 @@ class mxConnectionHandler extends mxEventSource {
* connecting. This implementation returns true if the state is not movable
* in the graph.
*/
isImmediateConnectSource = state => {
isImmediateConnectSource(state) {
return !this.graph.isCellMovable(state.cell);
};
}
/**
* Function: createEdgeState
@ -1000,9 +1000,9 @@ class mxConnectionHandler extends mxEventSource {
* };
* (end)
*/
createEdgeState = me => {
createEdgeState(me) {
return null;
};
}
/**
* Function: isOutlineConnectEvent
@ -1010,7 +1010,7 @@ class mxConnectionHandler extends mxEventSource {
* Returns true if <outlineConnect> is true and the source of the event is the outline shape
* or shift is pressed.
*/
isOutlineConnectEvent = me => {
isOutlineConnectEvent(me) {
const offset = mxUtils.getOffset(this.graph.container);
const evt = me.getEvent();
@ -1036,7 +1036,7 @@ class mxConnectionHandler extends mxEventSource {
me.getState() == null &&
this.marker.highlight.isHighlightAt(gridX, gridY)))
);
};
}
/**
* Function: updateCurrentState
@ -1044,7 +1044,7 @@ class mxConnectionHandler extends mxEventSource {
* Updates the current state for a given mouse move event by using
* the <marker>.
*/
updateCurrentState = (me, point) => {
updateCurrentState(me, point) {
this.constraintHandler.update(
me,
this.first == null,
@ -1172,7 +1172,7 @@ class mxConnectionHandler extends mxEventSource {
}
}
}
};
}
/**
* Function: isCellEnabled
@ -1180,22 +1180,22 @@ class mxConnectionHandler extends mxEventSource {
* Returns true if the given cell allows new connections to be created. This implementation
* always returns true.
*/
isCellEnabled = cell => {
isCellEnabled(cell) {
return true;
};
}
/**
* Function: convertWaypoint
*
* Converts the given point from screen coordinates to model coordinates.
*/
convertWaypoint = point => {
convertWaypoint(point) {
const scale = this.graph.getView().getScale();
const tr = this.graph.getView().getTranslate();
point.x = point.x / scale - tr.x;
point.y = point.y / scale - tr.y;
};
}
/**
* Function: snapToPreview
@ -1203,7 +1203,7 @@ class mxConnectionHandler extends mxEventSource {
* Called to snap the given point to the current preview. This snaps to the
* first point of the preview if alt is not pressed.
*/
snapToPreview = (me, point) => {
snapToPreview(me, point) {
if (!mxEvent.isAltDown(me.getEvent()) && this.previous != null) {
const tol = (this.graph.gridSize * this.graph.view.scale) / 2;
const tmp =
@ -1219,7 +1219,7 @@ class mxConnectionHandler extends mxEventSource {
point.y = tmp.y;
}
}
};
}
/**
* Function: mouseMove
@ -1227,7 +1227,7 @@ class mxConnectionHandler extends mxEventSource {
* Handles the event by updating the preview edge or by highlighting
* a possible source or target terminal.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
if (
!me.isConsumed() &&
(this.ignoreMouseDown || this.first != null || !this.graph.isMouseDown)
@ -1483,14 +1483,14 @@ class mxConnectionHandler extends mxEventSource {
} else {
this.constraintHandler.reset();
}
};
}
/**
* Function: updateEdgeState
*
* Updates <edgeState>.
*/
updateEdgeState = (current, constraint) => {
updateEdgeState(current, constraint) {
// TODO: Use generic method for writing constraint to style
if (this.sourceConstraint != null && this.sourceConstraint.point != null) {
this.edgeState.style[
@ -1562,7 +1562,7 @@ class mxConnectionHandler extends mxEventSource {
this.previous,
this.currentState
);
};
}
/**
* Function: getTargetPerimeterPoint
@ -1574,7 +1574,7 @@ class mxConnectionHandler extends mxEventSource {
* state - <mxCellState> that represents the target cell state.
* me - <mxMouseEvent> that represents the mouse move.
*/
getTargetPerimeterPoint = (state, me) => {
getTargetPerimeterPoint(state, me) {
let result = null;
const { view } = state;
const targetPerimeter = view.getPerimeterFunction(state);
@ -1599,7 +1599,7 @@ class mxConnectionHandler extends mxEventSource {
}
return result;
};
}
/**
* Function: getSourcePerimeterPoint
@ -1613,7 +1613,7 @@ class mxConnectionHandler extends mxEventSource {
* next - <mxPoint> that represents the next point along the previewed edge.
* me - <mxMouseEvent> that represents the mouse move.
*/
getSourcePerimeterPoint = (state, next, me) => {
getSourcePerimeterPoint(state, next, me) {
let result = null;
const { view } = state;
const sourcePerimeter = view.getPerimeterFunction(state);
@ -1660,7 +1660,7 @@ class mxConnectionHandler extends mxEventSource {
}
return result;
};
}
/**
* Function: updateIcons
@ -1674,9 +1674,9 @@ class mxConnectionHandler extends mxEventSource {
* icons - Array of currently displayed icons.
* me - <mxMouseEvent> that contains the mouse event.
*/
updateIcons = (state, icons, me) => {
updateIcons(state, icons, me) {
// empty
};
}
/**
* Function: isStopEvent
@ -1686,16 +1686,16 @@ class mxConnectionHandler extends mxEventSource {
* called if <waypointsEnabled> is true. This implemtation returns true
* if there is a cell state in the given event.
*/
isStopEvent = me => {
isStopEvent(me) {
return me.getState() != null;
};
}
/**
* Function: addWaypoint
*
* Adds the waypoint for the given event to <waypoints>.
*/
addWaypointForEvent = me => {
addWaypointForEvent(me) {
let point = mxUtils.convertPoint(
this.graph.container,
me.getX(),
@ -1720,7 +1720,7 @@ class mxConnectionHandler extends mxEventSource {
);
this.waypoints.push(point);
}
};
}
/**
* Function: checkConstraints
@ -1729,7 +1729,7 @@ class mxConnectionHandler extends mxEventSource {
* implementation returns true if the constraints are not pointing to the
* same fixed connection point.
*/
checkConstraints = (c1, c2) => {
checkConstraints(c1, c2) {
return (
c1 == null ||
c2 == null ||
@ -1740,14 +1740,14 @@ class mxConnectionHandler extends mxEventSource {
c1.dy !== c2.dy ||
c1.perimeter !== c2.perimeter
);
};
}
/**
* Function: mouseUp
*
* Handles the event by inserting the new connection.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
if (!me.isConsumed() && this.isConnecting()) {
if (this.waypointsEnabled && !this.isStopEvent(me)) {
this.addWaypointForEvent(me);
@ -1807,14 +1807,14 @@ class mxConnectionHandler extends mxEventSource {
if (this.first != null) {
this.reset();
}
};
}
/**
* Function: reset
*
* Resets the state of this handler.
*/
reset = () => {
reset() {
if (this.shape != null) {
this.shape.destroy();
this.shape = null;
@ -1838,7 +1838,7 @@ class mxConnectionHandler extends mxEventSource {
this.first = null;
this.fireEvent(new mxEventObject(mxEvent.RESET));
};
}
/**
* Function: drawPreview
@ -1846,10 +1846,10 @@ class mxConnectionHandler extends mxEventSource {
* Redraws the preview edge using the color and width returned by
* <getEdgeColor> and <getEdgeWidth>.
*/
drawPreview = () => {
drawPreview() {
this.updatePreview(this.error == null);
this.shape.redraw();
};
}
/**
* Function: getEdgeColor
@ -1862,10 +1862,10 @@ class mxConnectionHandler extends mxEventSource {
* valid - Boolean indicating if the color for a valid edge should be
* returned.
*/
updatePreview = valid => {
updatePreview(valid) {
this.shape.strokewidth = this.getEdgeWidth(valid);
this.shape.stroke = this.getEdgeColor(valid);
};
}
/**
* Function: getEdgeColor
@ -1878,9 +1878,9 @@ class mxConnectionHandler extends mxEventSource {
* valid - Boolean indicating if the color for a valid edge should be
* returned.
*/
getEdgeColor = valid => {
getEdgeColor(valid) {
return valid ? mxConstants.VALID_COLOR : mxConstants.INVALID_COLOR;
};
}
/**
* Function: getEdgeWidth
@ -1893,9 +1893,9 @@ class mxConnectionHandler extends mxEventSource {
* valid - Boolean indicating if the width for a valid edge should be
* returned.
*/
getEdgeWidth = valid => {
getEdgeWidth(valid) {
return valid ? 3 : 1;
};
}
/**
* Function: connect
@ -1911,7 +1911,7 @@ class mxConnectionHandler extends mxEventSource {
* dropTarget - <mxCell> that represents the cell under the mouse when it was
* released.
*/
connect = (source, target, evt, dropTarget) => {
connect(source, target, evt, dropTarget) {
if (
target != null ||
this.isCreateTarget(evt) ||
@ -2102,7 +2102,7 @@ class mxConnectionHandler extends mxEventSource {
this.selectCells(edge, terminalInserted ? target : null);
}
}
};
}
/**
* Function: selectCells
@ -2110,9 +2110,9 @@ class mxConnectionHandler extends mxEventSource {
* Selects the given edge after adding a new connection. The target argument
* contains the target vertex if one has been inserted.
*/
selectCells = (edge, target) => {
selectCells(edge, target) {
this.graph.setSelectionCell(edge);
};
}
/**
* Function: insertEdge
@ -2121,7 +2121,7 @@ class mxConnectionHandler extends mxEventSource {
* implementation does only use <createEdge> if <factoryMethod> is defined,
* otherwise <mxGraph.insertEdge> will be used.
*/
insertEdge = (parent, id, value, source, target, style) => {
insertEdge(parent, id, value, source, target, style) {
if (this.factoryMethod == null) {
return this.graph.insertEdge(parent, id, value, source, target, style);
}
@ -2129,7 +2129,7 @@ class mxConnectionHandler extends mxEventSource {
edge = this.graph.addEdge(edge, parent, source, target);
return edge;
};
}
/**
* Function: createTargetVertex
@ -2143,7 +2143,7 @@ class mxConnectionHandler extends mxEventSource {
* evt - Mousedown event of the connect gesture.
* source - <mxCell> that represents the source terminal.
*/
createTargetVertex = (evt, source) => {
createTargetVertex(evt, source) {
// Uses the first non-relative source
let geo = this.graph.getCellGeometry(source);
@ -2187,18 +2187,18 @@ class mxConnectionHandler extends mxEventSource {
}
return clone;
};
}
/**
* Function: getAlignmentTolerance
*
* Returns the tolerance for aligning new targets to sources. This returns the grid size / 2.
*/
getAlignmentTolerance = evt => {
getAlignmentTolerance(evt) {
return this.graph.isGridEnabled()
? this.graph.gridSize / 2
: this.graph.tolerance;
};
}
/**
* Function: createEdge
@ -2215,7 +2215,7 @@ class mxConnectionHandler extends mxEventSource {
* target - <mxCell> that represents the target terminal.
* style - Optional style from the preview edge.
*/
createEdge = (value, source, target, style) => {
createEdge(value, source, target, style) {
let edge = null;
// Creates a new edge using the factoryMethod
@ -2234,7 +2234,7 @@ class mxConnectionHandler extends mxEventSource {
}
return edge;
};
}
/**
* Function: destroy
@ -2243,7 +2243,7 @@ class mxConnectionHandler extends mxEventSource {
* called on all instances. It is called automatically for the built-in
* instance created for each <mxGraph>.
*/
destroy = () => {
destroy() {
this.graph.removeMouseListener(this);
if (this.shape != null) {
@ -2277,7 +2277,7 @@ class mxConnectionHandler extends mxEventSource {
this.graph.removeListener(this.escapeHandler);
this.escapeHandler = null;
}
};
}
}
export default mxConnectionHandler;

78
src/mxgraph/handler/mxConstraintHandler.js
View File

@ -7,10 +7,10 @@ import mxImage from '../util/mxImage';
import mxClient from '../mxClient';
import mxConstants from '../util/mxConstants';
import mxEvent from '../util/mxEvent';
import mxUtils from "../util/mxUtils";
import mxRectangle from "../util/mxRectangle";
import mxImageShape from "../shape/mxImageShape";
import mxRectangleShape from "../shape/mxRectangleShape";
import mxUtils from '../util/mxUtils';
import mxRectangle from '../util/mxRectangle';
import mxImageShape from '../shape/mxImageShape';
import mxRectangleShape from '../shape/mxRectangleShape';
class mxConstraintHandler {
/**
@ -87,9 +87,9 @@ class mxConstraintHandler {
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
@ -101,16 +101,16 @@ class mxConstraintHandler {
*
* enabled - Boolean that specifies the new enabled state.
*/
setEnabled = enabled => {
setEnabled(enabled) {
this.enabled = enabled;
};
}
/**
* Function: reset
*
* Resets the state of this handler.
*/
reset = () => {
reset() {
if (this.focusIcons != null) {
for (let i = 0; i < this.focusIcons.length; i += 1) {
this.focusIcons[i].destroy();
@ -129,7 +129,7 @@ class mxConstraintHandler {
this.currentPoint = null;
this.currentFocus = null;
this.focusPoints = null;
};
}
/**
* Function: getTolerance
@ -141,18 +141,18 @@ class mxConstraintHandler {
*
* me - <mxMouseEvent> whose tolerance should be returned.
*/
getTolerance = me => {
getTolerance(me) {
return this.graph.getTolerance();
};
}
/**
* Function: getImageForConstraint
*
* Returns the tolerance to be used for intersecting connection points.
*/
getImageForConstraint = (state, constraint, point) => {
getImageForConstraint(state, constraint, point) {
return this.pointImage;
};
}
/**
* Function: isEventIgnored
@ -160,25 +160,25 @@ class mxConstraintHandler {
* Returns true if the given <mxMouseEvent> should be ignored in <update>. This
* implementation always returns false.
*/
isEventIgnored = (me, source) => {
isEventIgnored(me, source) {
return false;
};
}
/**
* Function: isStateIgnored
*
* Returns true if the given state should be ignored. This always returns false.
*/
isStateIgnored = (state, source) => {
isStateIgnored(state, source) {
return false;
};
}
/**
* Function: destroyIcons
*
* Destroys the <focusIcons> if they exist.
*/
destroyIcons = () => {
destroyIcons() {
if (this.focusIcons != null) {
for (let i = 0; i < this.focusIcons.length; i += 1) {
this.focusIcons[i].destroy();
@ -187,19 +187,19 @@ class mxConstraintHandler {
this.focusIcons = null;
this.focusPoints = null;
}
};
}
/**
* Function: destroyFocusHighlight
*
* Destroys the <focusHighlight> if one exists.
*/
destroyFocusHighlight = () => {
destroyFocusHighlight() {
if (this.focusHighlight != null) {
this.focusHighlight.destroy();
this.focusHighlight = null;
}
};
}
/**
* Function: isKeepFocusEvent
@ -207,16 +207,16 @@ class mxConstraintHandler {
* Returns true if the current focused state should not be changed for the given event.
* This returns true if shift and alt are pressed.
*/
isKeepFocusEvent = me => {
isKeepFocusEvent(me) {
return mxEvent.isShiftDown(me.getEvent());
};
}
/**
* Function: getCellForEvent
*
* Returns the cell for the given event.
*/
getCellForEvent = (me, point) => {
getCellForEvent(me, point) {
let cell = me.getCell();
// Gets cell under actual point if different from event location
@ -241,7 +241,7 @@ class mxConstraintHandler {
}
return this.graph.isCellLocked(cell) ? null : cell;
};
}
/**
* Function: update
@ -249,7 +249,7 @@ class mxConstraintHandler {
* Updates the state of this handler based on the given <mxMouseEvent>.
* Source is a boolean indicating if the cell is a source or target.
*/
update = (me, source, existingEdge, point) => {
update(me, source, existingEdge, point) {
if (this.isEnabled() && !this.isEventIgnored(me)) {
// Lazy installation of mouseleave handler
if (this.mouseleaveHandler == null && this.graph.container != null) {
@ -332,7 +332,7 @@ class mxConstraintHandler {
if (this.focusHighlight == null) {
const hl = this.createHighlightShape();
hl.dialect = mxConstants.DIALECT_SVG
hl.dialect = mxConstants.DIALECT_SVG;
hl.pointerEvents = false;
hl.init(this.graph.getView().getOverlayPane());
@ -359,7 +359,7 @@ class mxConstraintHandler {
this.currentFocus = null;
this.currentPoint = null;
}
};
}
/**
* Function: redraw
@ -368,7 +368,7 @@ class mxConstraintHandler {
* the handler is not enabled then the outline is painted, but the constraints
* are ignored.
*/
redraw = () => {
redraw() {
if (
this.currentFocus != null &&
this.constraints != null &&
@ -399,7 +399,7 @@ class mxConstraintHandler {
this.focusPoints[i] = cp;
}
}
};
}
/**
* Function: setFocus
@ -408,7 +408,7 @@ class mxConstraintHandler {
* the handler is not enabled then the outline is painted, but the constraints
* are ignored.
*/
setFocus = (me, state, source) => {
setFocus(me, state, source) {
this.constraints =
state != null &&
!this.isStateIgnored(state, source) &&
@ -484,7 +484,7 @@ class mxConstraintHandler {
this.destroyIcons();
this.destroyFocusHighlight();
}
};
}
/**
* Function: createHighlightShape
@ -493,7 +493,7 @@ class mxConstraintHandler {
*
* Returns true if the given icon intersects the given point.
*/
createHighlightShape = () => {
createHighlightShape() {
const hl = new mxRectangleShape(
null,
this.highlightColor,
@ -503,23 +503,23 @@ class mxConstraintHandler {
hl.opacity = mxConstants.HIGHLIGHT_OPACITY;
return hl;
};
}
/**
* Function: intersects
*
* Returns true if the given icon intersects the given rectangle.
*/
intersects = (icon, mouse, source, existingEdge) => {
intersects(icon, mouse, source, existingEdge) {
return mxUtils.intersects(icon.bounds, mouse);
};
}
/**
* Function: destroy
*
* Destroy this handler.
*/
destroy = () => {
destroy() {
this.reset();
if (this.resetHandler != null) {
@ -537,7 +537,7 @@ class mxConstraintHandler {
);
this.mouseleaveHandler = null;
}
};
}
}
export default mxConstraintHandler;

264
src/mxgraph/handler/mxEdgeHandler.js
View File

@ -14,7 +14,7 @@ import mxEvent from '../util/mxEvent';
import mxConstraintHandler from './mxConstraintHandler';
import mxRectangle from '../util/mxRectangle';
import mxClient from '../mxClient';
import mxEdgeStyle from "../view/mxEdgeStyle";
import mxEdgeStyle from '../view/mxEdgeStyle';
class mxEdgeHandler {
/**
@ -208,18 +208,18 @@ class mxEdgeHandler {
* Returns true if the parent highlight should be visible. This implementation
* always returns true.
*/
isParentHighlightVisible = () => {
isParentHighlightVisible() {
return !this.graph.isCellSelected(
this.graph.model.getParent(this.state.cell)
);
};
}
/**
* Function: updateParentHighlight
*
* Updates the highlight of the parent if <parentHighlightEnabled> is true.
*/
updateParentHighlight = () => {
updateParentHighlight() {
if (!this.isDestroyed()) {
const visible = this.isParentHighlightVisible();
const parent = this.graph.model.getParent(this.state.cell);
@ -271,7 +271,7 @@ class mxEdgeHandler {
}
}
}
};
}
/**
* Class: mxEdgeHandler
@ -326,7 +326,7 @@ class mxEdgeHandler {
*
* Initializes the shapes required for this edge handler.
*/
init = () => {
init() {
this.graph = this.state.view.graph;
this.marker = this.createMarker();
this.constraintHandler = new mxConstraintHandler(this.graph);
@ -377,7 +377,10 @@ class mxEdgeHandler {
// Creates bends for the non-routed absolute points
// or bends that don't correspond to points
if (this.graph.getSelectionCount() < this.graph.graphHandler.maxCells || this.graph.graphHandler.maxCells <= 0) {
if (
this.graph.getSelectionCount() < this.graph.graphHandler.maxCells ||
this.graph.graphHandler.maxCells <= 0
) {
this.bends = this.createBends();
if (this.isVirtualBendsEnabled()) {
@ -398,16 +401,16 @@ class mxEdgeHandler {
this.updateParentHighlight();
this.redraw();
};
}
/**
* Function: createCustomHandles
*
* Returns an array of custom handles. This implementation returns null.
*/
createCustomHandles = () => {
createCustomHandles() {
return null;
};
}
/**
* Function: isVirtualBendsEnabled
@ -416,7 +419,7 @@ class mxEdgeHandler {
* <virtualBendsEnabled> is true and the current style allows and
* renders custom waypoints.
*/
isVirtualBendsEnabled = evt => {
isVirtualBendsEnabled(evt) {
return (
this.virtualBendsEnabled &&
(this.state.style[mxConstants.STYLE_EDGE] == null ||
@ -425,7 +428,7 @@ class mxEdgeHandler {
mxUtils.getValue(this.state.style, mxConstants.STYLE_SHAPE, null) !==
'arrow'
);
};
}
/**
* Function: isCellEnabled
@ -433,9 +436,9 @@ class mxEdgeHandler {
* Returns true if the given cell allows new connections to be created. This implementation
* always returns true.
*/
isCellEnabled = cell => {
isCellEnabled(cell) {
return true;
};
}
/**
* Function: isAddPointEvent
@ -443,9 +446,9 @@ class mxEdgeHandler {
* Returns true if the given event is a trigger to add a new point. This
* implementation returns true if shift is pressed.
*/
isAddPointEvent = evt => {
isAddPointEvent(evt) {
return mxEvent.isShiftDown(evt);
};
}
/**
* Function: isRemovePointEvent
@ -453,25 +456,25 @@ class mxEdgeHandler {
* Returns true if the given event is a trigger to remove a point. This
* implementation returns true if shift is pressed.
*/
isRemovePointEvent = evt => {
isRemovePointEvent(evt) {
return mxEvent.isShiftDown(evt);
};
}
/**
* Function: getSelectionPoints
*
* Returns the list of points that defines the selection stroke.
*/
getSelectionPoints = state => {
getSelectionPoints(state) {
return state.absolutePoints;
};
}
/**
* Function: createParentHighlightShape
*
* Creates the shape used to draw the selection border.
*/
createParentHighlightShape = bounds => {
createParentHighlightShape(bounds) {
const shape = new mxRectangleShape(
mxRectangle.fromRectangle(bounds),
null,
@ -481,14 +484,14 @@ class mxEdgeHandler {
shape.isDashed = this.isSelectionDashed();
return shape;
};
}
/**
* Function: createSelectionShape
*
* Creates the shape used to draw the selection border.
*/
createSelectionShape = points => {
createSelectionShape(points) {
const shape = new this.state.shape.constructor();
shape.outline = true;
shape.apply(this.state);
@ -498,34 +501,34 @@ class mxEdgeHandler {
shape.isShadow = false;
return shape;
};
}
/**
* Function: getSelectionColor
*
* Returns <mxConstants.EDGE_SELECTION_COLOR>.
*/
getSelectionColor = () => {
getSelectionColor() {
return mxConstants.EDGE_SELECTION_COLOR;
};
}
/**
* Function: getSelectionStrokeWidth
*
* Returns <mxConstants.EDGE_SELECTION_STROKEWIDTH>.
*/
getSelectionStrokeWidth = () => {
getSelectionStrokeWidth() {
return mxConstants.EDGE_SELECTION_STROKEWIDTH;
};
}
/**
* Function: isSelectionDashed
*
* Returns <mxConstants.EDGE_SELECTION_DASHED>.
*/
isSelectionDashed = () => {
isSelectionDashed() {
return mxConstants.EDGE_SELECTION_DASHED;
};
}
/**
* Function: isConnectableCell
@ -533,25 +536,25 @@ class mxEdgeHandler {
* Returns true if the given cell is connectable. This is a hook to
* disable floating connections. This implementation returns true.
*/
isConnectableCell = cell => {
isConnectableCell(cell) {
return true;
};
}
/**
* Function: getCellAt
*
* Creates and returns the <mxCellMarker> used in <marker>.
*/
getCellAt = (x, y) => {
getCellAt(x, y) {
return !this.outlineConnect ? this.graph.getCellAt(x, y) : null;
};
}
/**
* Function: createMarker
*
* Creates and returns the <mxCellMarker> used in <marker>.
*/
createMarker = () => {
createMarker() {
const self = this; // closure
class MyMarker extends mxCellMarker {
@ -628,7 +631,7 @@ class mxEdgeHandler {
}
return new MyMarker(this.graph);
};
}
/**
* Function: validateConnection
@ -642,9 +645,9 @@ class mxEdgeHandler {
* source - <mxCell> that represents the source terminal.
* target - <mxCell> that represents the target terminal.
*/
validateConnection = (source, target) => {
validateConnection(source, target) {
return this.graph.getEdgeValidationError(this.state.cell, source, target);
};
}
/**
* Function: createBends
@ -652,7 +655,7 @@ class mxEdgeHandler {
* Creates and returns the bends used for modifying the edge. This is
* typically an array of <mxRectangleShapes>.
*/
createBends = () => {
createBends() {
const { cell } = this.state;
const bends = [];
@ -691,7 +694,7 @@ class mxEdgeHandler {
}
return bends;
};
}
/**
* Function: createVirtualBends
@ -699,7 +702,7 @@ class mxEdgeHandler {
* Creates and returns the bends used for modifying the edge. This is
* typically an array of <mxRectangleShapes>.
*/
createVirtualBends = () => {
createVirtualBends() {
const { cell } = this.state;
const last = this.abspoints[0];
const bends = [];
@ -715,23 +718,23 @@ class mxEdgeHandler {
}
return bends;
};
}
/**
* Function: isHandleEnabled
*
* Creates the shape used to display the given bend.
*/
isHandleEnabled = index => {
isHandleEnabled(index) {
return true;
};
}
/**
* Function: isHandleVisible
*
* Returns true if the handle at the given index is visible.
*/
isHandleVisible = index => {
isHandleVisible(index) {
const source = this.state.getVisibleTerminalState(true);
const target = this.state.getVisibleTerminalState(false);
const geo = this.graph.getCellGeometry(this.state.cell);
@ -745,7 +748,7 @@ class mxEdgeHandler {
index === 0 ||
index === this.abspoints.length - 1
);
};
}
/**
* Function: createHandleShape
@ -756,7 +759,7 @@ class mxEdgeHandler {
* returned if support for HTML labels with not foreign objects is required.
* Index if null for virtual handles.
*/
createHandleShape = index => {
createHandleShape(index) {
if (this.handleImage != null) {
const shape = new mxImageShape(
new mxRectangle(0, 0, this.handleImage.width, this.handleImage.height),
@ -779,14 +782,14 @@ class mxEdgeHandler {
mxConstants.HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
);
};
}
/**
* Function: createLabelHandleShape
*
* Creates the shape used to display the the label handle.
*/
createLabelHandleShape = () => {
createLabelHandleShape() {
if (this.labelHandleImage != null) {
const shape = new mxImageShape(
new mxRectangle(
@ -809,7 +812,7 @@ class mxEdgeHandler {
mxConstants.LABEL_HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
);
};
}
/**
* Function: initBend
@ -820,7 +823,7 @@ class mxEdgeHandler {
*
* bend - <mxShape> that represents the bend to be initialized.
*/
initBend = (bend, dblClick) => {
initBend(bend, dblClick) {
if (this.preferHtml) {
bend.dialect = mxConstants.DIALECT_STRICTHTML;
bend.init(this.graph.container);
@ -845,14 +848,14 @@ class mxEdgeHandler {
if (mxClient.IS_TOUCH) {
bend.node.setAttribute('pointer-events', 'none');
}
};
}
/**
* Function: getHandleForEvent
*
* Returns the index of the handle for the given event.
*/
getHandleForEvent = me => {
getHandleForEvent(me) {
let result = null;
if (this.state != null) {
@ -924,7 +927,7 @@ class mxEdgeHandler {
}
return result;
};
}
/**
* Function: isAddVirtualBendEvent
@ -932,9 +935,9 @@ class mxEdgeHandler {
* Returns true if the given event allows virtual bends to be added. This
* implementation returns true.
*/
isAddVirtualBendEvent = me => {
isAddVirtualBendEvent(me) {
return true;
};
}
/**
* Function: isCustomHandleEvent
@ -942,9 +945,9 @@ class mxEdgeHandler {
* Returns true if the given event allows custom handles to be changed. This
* implementation returns true.
*/
isCustomHandleEvent = me => {
isCustomHandleEvent(me) {
return true;
};
}
/**
* Function: mouseDown
@ -955,7 +958,7 @@ class mxEdgeHandler {
* control point. The source and target points are used for reconnecting
* the edge.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
const handle = this.getHandleForEvent(me);
if (this.bends != null && this.bends[handle] != null) {
@ -989,14 +992,14 @@ class mxEdgeHandler {
me.consume();
}
};
}
/**
* Function: start
*
* Starts the handling of the mouse gesture.
*/
start = (x, y, index) => {
start(x, y, index) {
this.startX = x;
this.startY = y;
@ -1034,16 +1037,16 @@ class mxEdgeHandler {
}
}
}
};
}
/**
* Function: clonePreviewState
*
* Returns a clone of the current preview state for the given point and terminal.
*/
clonePreviewState = (point, terminal) => {
clonePreviewState(point, terminal) {
return this.state.clone();
};
}
/**
* Function: getSnapToTerminalTolerance
@ -1051,48 +1054,48 @@ class mxEdgeHandler {
* Returns the tolerance for the guides. Default value is
* gridSize * scale / 2.
*/
getSnapToTerminalTolerance = () => {
getSnapToTerminalTolerance() {
return (this.graph.gridSize * this.graph.view.scale) / 2;
};
}
/**
* Function: updateHint
*
* Hook for subclassers do show details while the handler is active.
*/
updateHint = (me, point) => {};
updateHint(me, point) {}
/**
* Function: removeHint
*
* Hooks for subclassers to hide details when the handler gets inactive.
*/
removeHint = () => {};
removeHint() {}
/**
* Function: roundLength
*
* Hook for rounding the unscaled width or height. This uses Math.round.
*/
roundLength = length => {
roundLength(length) {
return Math.round(length);
};
}
/**
* Function: isSnapToTerminalsEvent
*
* Returns true if <snapToTerminals> is true and if alt is not pressed.
*/
isSnapToTerminalsEvent = me => {
isSnapToTerminalsEvent(me) {
return this.snapToTerminals && !mxEvent.isAltDown(me.getEvent());
};
}
/**
* Function: getPointForEvent
*
* Returns the point for the given event.
*/
getPointForEvent = me => {
getPointForEvent(me) {
const view = this.graph.getView();
const { scale } = view;
const point = new mxPoint(
@ -1105,7 +1108,6 @@ class mxEdgeHandler {
let overrideY = false;
if (tt > 0 && this.isSnapToTerminalsEvent(me)) {
const snapToPoint = pt => {
if (pt != null) {
const { x } = pt;
@ -1157,14 +1159,14 @@ class mxEdgeHandler {
}
return point;
};
}
/**
* Function: getPreviewTerminalState
*
* Updates the given preview state taking into account the state of the constraint handler.
*/
getPreviewTerminalState = me => {
getPreviewTerminalState(me) {
this.constraintHandler.update(
me,
this.isSource,
@ -1243,7 +1245,7 @@ class mxEdgeHandler {
this.marker.reset();
return null;
};
}
/**
* Function: getPreviewPoints
@ -1255,7 +1257,7 @@ class mxEdgeHandler {
* pt - <mxPoint> that contains the current pointer position.
* me - Optional <mxMouseEvent> that contains the current event.
*/
getPreviewPoints = (pt, me) => {
getPreviewPoints(pt, me) {
const geometry = this.graph.getCellGeometry(this.state.cell);
let points = geometry.points != null ? geometry.points.slice() : null;
const point = new mxPoint(pt.x, pt.y);
@ -1370,7 +1372,7 @@ class mxEdgeHandler {
}
return result != null ? result : points;
};
}
/**
* Function: isOutlineConnectEvent
@ -1378,7 +1380,7 @@ class mxEdgeHandler {
* Returns true if <outlineConnect> is true and the source of the event is the outline shape
* or shift is pressed.
*/
isOutlineConnectEvent = me => {
isOutlineConnectEvent(me) {
const offset = mxUtils.getOffset(this.graph.container);
const evt = me.getEvent();
@ -1404,14 +1406,14 @@ class mxEdgeHandler {
me.getState() == null &&
this.marker.highlight.isHighlightAt(gridX, gridY)))
);
};
}
/**
* Function: updatePreviewState
*
* Updates the given preview state taking into account the state of the constraint handler.
*/
updatePreviewState = (edge, point, terminalState, me, outline) => {
updatePreviewState(edge, point, terminalState, me, outline) {
// Computes the points for the edge style and terminals
const sourceState = this.isSource
? terminalState
@ -1534,14 +1536,14 @@ class mxEdgeHandler {
edge.view.updatePoints(edge, this.points, sourceState, targetState);
edge.view.updateFloatingTerminalPoints(edge, sourceState, targetState);
};
}
/**
* Function: mouseMove
*
* Handles the event by updating the preview.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
if (this.index != null && this.marker != null) {
this.currentPoint = this.getPointForEvent(me);
this.error = null;
@ -1651,7 +1653,7 @@ class mxEdgeHandler {
mxEvent.consume(me.getEvent());
me.consume();
}
};
}
/**
* Function: mouseUp
@ -1659,7 +1661,7 @@ class mxEdgeHandler {
* Handles the event to applying the previewed changes on the edge by
* using <moveLabel>, <connect> or <changePoints>.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
// Workaround for wrong event source in Webkit
if (this.index != null && this.marker != null) {
if (this.shape != null && this.shape.node != null) {
@ -1802,14 +1804,14 @@ class mxEdgeHandler {
me.consume();
}
};
}
/**
* Function: reset
*
* Resets the state of this handler.
*/
reset = () => {
reset() {
if (this.active) {
this.refresh();
}
@ -1849,18 +1851,18 @@ class mxEdgeHandler {
this.setPreviewColor(mxConstants.EDGE_SELECTION_COLOR);
this.removeHint();
this.redraw();
};
}
/**
* Function: setPreviewColor
*
* Sets the color of the preview to the given value.
*/
setPreviewColor = color => {
setPreviewColor(color) {
if (this.shape != null) {
this.shape.stroke = color;
}
};
}
/**
* Function: convertPoint
@ -1874,7 +1876,7 @@ class mxEdgeHandler {
* point - <mxPoint> to be converted.
* gridEnabled - Boolean that specifies if the grid should be applied.
*/
convertPoint = (point, gridEnabled) => {
convertPoint(point, gridEnabled) {
const scale = this.graph.getView().getScale();
const tr = this.graph.getView().getTranslate();
@ -1896,7 +1898,7 @@ class mxEdgeHandler {
}
return point;
};
}
/**
* Function: moveLabel
@ -1909,7 +1911,7 @@ class mxEdgeHandler {
* x - Integer that specifies the x-coordinate of the new location.
* y - Integer that specifies the y-coordinate of the new location.
*/
moveLabel = (edgeState, x, y) => {
moveLabel(edgeState, x, y) {
const model = this.graph.getModel();
let geometry = model.getGeometry(edgeState.cell);
@ -1951,7 +1953,7 @@ class mxEdgeHandler {
model.setGeometry(edgeState.cell, geometry);
}
};
}
/**
* Function: connect
@ -1969,7 +1971,7 @@ class mxEdgeHandler {
* the old edge.
* me - <mxMouseEvent> that contains the mouse up event.
*/
connect = (edge, terminal, isSource, isClone, me) => {
connect(edge, terminal, isSource, isClone, me) {
const model = this.graph.getModel();
const parent = model.getParent(edge);
@ -1987,14 +1989,14 @@ class mxEdgeHandler {
}
return edge;
};
}
/**
* Function: changeTerminalPoint
*
* Changes the terminal point of the given edge.
*/
changeTerminalPoint = (edge, point, isSource, clone) => {
changeTerminalPoint(edge, point, isSource, clone) {
const model = this.graph.getModel();
model.beginUpdate();
@ -2025,14 +2027,14 @@ class mxEdgeHandler {
}
return edge;
};
}
/**
* Function: changePoints
*
* Changes the control points of the given edge in the graph model.
*/
changePoints = (edge, points, clone) => {
changePoints(edge, points, clone) {
const model = this.graph.getModel();
model.beginUpdate();
try {
@ -2059,14 +2061,14 @@ class mxEdgeHandler {
}
return edge;
};
}
/**
* Function: addPoint
*
* Adds a control point for the given state and event.
*/
addPoint = (state, evt) => {
addPoint(state, evt) {
const pt = mxUtils.convertPoint(
this.graph.container,
mxEvent.getClientX(evt),
@ -2076,14 +2078,14 @@ class mxEdgeHandler {
this.convertPoint(pt, gridEnabled);
this.addPointAt(state, pt.x, pt.y);
mxEvent.consume(evt);
};
}
/**
* Function: addPointAt
*
* Adds a control point at the given point.
*/
addPointAt = (state, x, y) => {
addPointAt(state, x, y) {
let geo = this.graph.getCellGeometry(state.cell);
const pt = new mxPoint(x, y);
@ -2116,14 +2118,14 @@ class mxEdgeHandler {
this.refresh();
this.redraw();
}
};
}
/**
* Function: removePoint
*
* Removes the control point at the given index from the given state.
*/
removePoint = (state, index) => {
removePoint(state, index) {
if (index > 0 && index < this.abspoints.length - 1) {
let geo = this.graph.getCellGeometry(this.state.cell);
@ -2135,14 +2137,14 @@ class mxEdgeHandler {
this.redraw();
}
}
};
}
/**
* Function: getHandleFillColor
*
* Returns the fillcolor for the handle at the given index.
*/
getHandleFillColor = index => {
getHandleFillColor(index) {
const isSource = index === 0;
const { cell } = this.state;
const terminal = this.graph.getModel().getTerminal(cell, isSource);
@ -2162,14 +2164,14 @@ class mxEdgeHandler {
}
return color;
};
}
/**
* Function: redraw
*
* Redraws the preview, and the bends- and label control points.
*/
redraw = ignoreHandles => {
redraw(ignoreHandles) {
if (this.state != null) {
this.abspoints = this.state.absolutePoints.slice();
const g = this.graph.getModel().getGeometry(this.state.cell);
@ -2198,14 +2200,14 @@ class mxEdgeHandler {
this.redrawHandles();
}
}
};
}
/**
* Function: redrawHandles
*
* Redraws the handles.
*/
redrawHandles = () => {
redrawHandles() {
const { cell } = this.state;
// Updates the handle for the label position
@ -2319,25 +2321,25 @@ class mxEdgeHandler {
: 'hidden';
}
}
};
}
/**
* Function: isCustomHandleVisible
*
* Returns true if the given custom handle is visible.
*/
isCustomHandleVisible = handle => {
isCustomHandleVisible(handle) {
return (
!this.graph.isEditing() && this.state.view.graph.getSelectionCount() === 1
);
};
}
/**
* Function: hideHandles
*
* Shortcut to <hideSizers>.
*/
setHandlesVisible = visible => {
setHandlesVisible(visible) {
if (this.bends != null) {
for (let i = 0; i < this.bends.length; i += 1) {
this.bends[i].node.style.display = visible ? '' : 'none';
@ -2359,7 +2361,7 @@ class mxEdgeHandler {
this.customHandles[i].setVisible(visible);
}
}
};
}
/**
* Function: redrawInnerBends
@ -2371,7 +2373,7 @@ class mxEdgeHandler {
* p0 - <mxPoint> that represents the location of the first point.
* pe - <mxPoint> that represents the location of the last point.
*/
redrawInnerBends = (p0, pe) => {
redrawInnerBends(p0, pe) {
for (let i = 1; i < this.bends.length - 1; i += 1) {
if (this.bends[i] != null) {
if (this.abspoints[i] != null) {
@ -2411,7 +2413,7 @@ class mxEdgeHandler {
}
}
}
};
}
/**
* Function: checkLabelHandle
@ -2419,7 +2421,7 @@ class mxEdgeHandler {
* Checks if the label handle intersects the given bounds and moves it if it
* intersects.
*/
checkLabelHandle = b => {
checkLabelHandle(b) {
if (this.labelShape != null) {
const b2 = this.labelShape.bounds;
@ -2431,14 +2433,14 @@ class mxEdgeHandler {
}
}
}
};
}
/**
* Function: drawPreview
*
* Redraws the preview.
*/
drawPreview = () => {
drawPreview() {
try {
if (this.isLabel) {
const b = this.labelShape.bounds;
@ -2474,14 +2476,14 @@ class mxEdgeHandler {
} catch (e) {
// ignore
}
};
}
/**
* Function: refresh
*
* Refreshes the bends of this handler.
*/
refresh = () => {
refresh() {
if (this.state != null) {
this.abspoints = this.getSelectionPoints(this.state);
this.points = [];
@ -2510,23 +2512,23 @@ class mxEdgeHandler {
this.labelShape.node.parentNode.appendChild(this.labelShape.node);
}
}
};
}
/**
* Function: isDestroyed
*
* Returns true if <destroy> was called.
*/
isDestroyed = () => {
isDestroyed() {
return this.shape == null;
};
}
/**
* Function: destroyBends
*
* Destroys all elements in <bends>.
*/
destroyBends = bends => {
destroyBends(bends) {
if (bends != null) {
for (let i = 0; i < bends.length; i += 1) {
if (bends[i] != null) {
@ -2534,7 +2536,7 @@ class mxEdgeHandler {
}
}
}
};
}
/**
* Function: destroy
@ -2543,7 +2545,7 @@ class mxEdgeHandler {
* normally not need to be called as handlers are destroyed automatically
* when the corresponding cell is deselected.
*/
destroy = () => {
destroy() {
if (this.escapeHandler != null) {
this.state.view.graph.removeListener(this.escapeHandler);
this.escapeHandler = null;
@ -2591,7 +2593,7 @@ class mxEdgeHandler {
this.bends = null;
this.removeHint();
};
}
}
export default mxEdgeHandler;

36
src/mxgraph/handler/mxEdgeSegmentHandler.js
View File

@ -20,7 +20,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
*
* Returns the current absolute points.
*/
getCurrentPoints = () => {
getCurrentPoints() {
let pts = this.state.absolutePoints;
if (pts != null) {
@ -48,14 +48,14 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
}
return pts;
};
}
/**
* Function: getPreviewPoints
*
* Updates the given preview state taking into account the state of the constraint handler.
*/
getPreviewPoints = point => {
getPreviewPoints(point) {
if (this.isSource || this.isTarget) {
return super.getPreviewPoints(point);
}
@ -105,14 +105,14 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
}
return result;
};
}
/**
* Function: updatePreviewState
*
* Overridden to perform optimization of the edge style result.
*/
updatePreviewState = (edge, point, terminalState, me) => {
updatePreviewState(edge, point, terminalState, me) {
super.updatePreviewState(edge, point, terminalState, me);
// Checks and corrects preview by running edge style again
@ -203,12 +203,12 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
edge.view.updatePoints(edge, this.points, source, target);
edge.view.updateFloatingTerminalPoints(edge, source, target);
}
};
}
/**
* Overriden to merge edge segments.
*/
connect = (edge, terminal, isSource, isClone, me) => {
connect(edge, terminal, isSource, isClone, me) {
const model = this.graph.getModel();
let geo = model.getGeometry(edge);
let result = null;
@ -256,23 +256,23 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
}
return edge;
};
}
/**
* Function: getTooltipForNode
*
* Returns no tooltips.
*/
getTooltipForNode = node => {
getTooltipForNode(node) {
return null;
};
}
/**
* Function: start
*
* Starts the handling of the mouse gesture.
*/
start = (x, y, index) => {
start(x, y, index) {
super.start(x, y, index);
if (
@ -283,14 +283,14 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
) {
mxUtils.setOpacity(this.bends[index].node, 100);
}
};
}
/**
* Function: createBends
*
* Adds custom bends for the center of each segment.
*/
createBends = () => {
createBends() {
const bends = [];
// Source
@ -329,24 +329,24 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
bends.push(bend);
return bends;
};
}
/**
* Function: redraw
*
* Overridden to invoke <refresh> before the redraw.
*/
redraw = () => {
redraw() {
this.refresh();
super.redraw();
};
}
/**
* Function: redrawInnerBends
*
* Updates the position of the custom bends.
*/
redrawInnerBends = (p0, pe) => {
redrawInnerBends(p0, pe) {
if (this.graph.isCellBendable(this.state.cell)) {
const pts = this.getCurrentPoints();
@ -401,7 +401,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
}
}
}
};
}
}
export default mxEdgeSegmentHandler;

40
src/mxgraph/handler/mxElbowEdgeHandler.js
View File

@ -4,14 +4,14 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxEdgeHandler from './mxEdgeHandler';
import mxConstants from "../util/mxConstants";
import mxEvent from "../util/mxEvent";
import mxPoint from "../util/mxPoint";
import mxEdgeStyle from "../view/mxEdgeStyle";
import mxResources from "../util/mxResources";
import mxRectangle from "../util/mxRectangle";
import mxUtils from "../util/mxUtils";
import mxClient from "../mxClient";
import mxConstants from '../util/mxConstants';
import mxEvent from '../util/mxEvent';
import mxPoint from '../util/mxPoint';
import mxEdgeStyle from '../view/mxEdgeStyle';
import mxResources from '../util/mxResources';
import mxRectangle from '../util/mxRectangle';
import mxUtils from '../util/mxUtils';
import mxClient from '../mxClient';
class mxElbowEdgeHandler extends mxEdgeHandler {
/**
@ -56,7 +56,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
*
* Overrides <mxEdgeHandler.createBends> to create custom bends.
*/
createBends = () => {
createBends() {
const bends = [];
// Source
@ -84,7 +84,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
bends.push(bend);
return bends;
};
}
/**
* Function: createVirtualBend
@ -92,7 +92,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
* Creates a virtual bend that supports double clicking and calls
* <mxGraph.flipEdge>.
*/
createVirtualBend = dblClickHandler => {
createVirtualBend(dblClickHandler) {
const bend = this.createHandleShape();
this.initBend(bend, dblClickHandler);
@ -103,14 +103,14 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
}
return bend;
};
}
/**
* Function: getCursorForBend
*
* Returns the cursor to be used for the bend.
*/
getCursorForBend = () => {
getCursorForBend() {
return this.state.style[mxConstants.STYLE_EDGE] ===
mxEdgeStyle.TopToBottom ||
this.state.style[mxConstants.STYLE_EDGE] ===
@ -123,14 +123,14 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
mxConstants.ELBOW_VERTICAL)
? 'row-resize'
: 'col-resize';
};
}
/**
* Function: getTooltipForNode
*
* Returns the tooltip for the given node.
*/
getTooltipForNode = node => {
getTooltipForNode(node) {
let tip = null;
if (
@ -143,7 +143,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
}
return tip;
};
}
/**
* Function: convertPoint
@ -156,7 +156,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
* point - <mxPoint> to be converted.
* gridEnabled - Boolean that specifies if the grid should be applied.
*/
convertPoint = (point, gridEnabled) => {
convertPoint(point, gridEnabled) {
const scale = this.graph.getView().getScale();
const tr = this.graph.getView().getTranslate();
const { origin } = this.state;
@ -170,7 +170,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
point.y = Math.round(point.y / scale - tr.y - origin.y);
return point;
};
}
/**
* Function: redrawInnerBends
@ -182,7 +182,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
* p0 - <mxPoint> that represents the location of the first point.
* pe - <mxPoint> that represents the location of the last point.
*/
redrawInnerBends = (p0, pe) => {
redrawInnerBends(p0, pe) {
const g = this.graph.getModel().getGeometry(this.state.cell);
const pts = this.state.absolutePoints;
let pt = null;
@ -241,7 +241,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
if (this.manageLabelHandle) {
this.checkLabelHandle(this.bends[1].bounds);
}
};
}
}
export default mxElbowEdgeHandler;

200
src/mxgraph/handler/mxGraphHandler.js
View File

@ -327,27 +327,27 @@ class mxGraphHandler {
*
* Returns <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
*
* Sets <enabled>.
*/
setEnabled = value => {
setEnabled(value) {
this.enabled = value;
};
}
/**
* Function: isCloneEnabled
*
* Returns <cloneEnabled>.
*/
isCloneEnabled = () => {
isCloneEnabled() {
return this.cloneEnabled;
};
}
/**
* Function: setCloneEnabled
@ -358,63 +358,63 @@ class mxGraphHandler {
*
* value - Boolean that specifies the new clone enabled state.
*/
setCloneEnabled = value => {
setCloneEnabled(value) {
this.cloneEnabled = value;
};
}
/**
* Function: isMoveEnabled
*
* Returns <moveEnabled>.
*/
isMoveEnabled = () => {
isMoveEnabled() {
return this.moveEnabled;
};
}
/**
* Function: setMoveEnabled
*
* Sets <moveEnabled>.
*/
setMoveEnabled = value => {
setMoveEnabled(value) {
this.moveEnabled = value;
};
}
/**
* Function: isSelectEnabled
*
* Returns <selectEnabled>.
*/
isSelectEnabled = () => {
isSelectEnabled() {
return this.selectEnabled;
};
}
/**
* Function: setSelectEnabled
*
* Sets <selectEnabled>.
*/
setSelectEnabled = value => {
setSelectEnabled(value) {
this.selectEnabled = value;
};
}
/**
* Function: isRemoveCellsFromParent
*
* Returns <removeCellsFromParent>.
*/
isRemoveCellsFromParent = () => {
isRemoveCellsFromParent() {
return this.removeCellsFromParent;
};
}
/**
* Function: setRemoveCellsFromParent
*
* Sets <removeCellsFromParent>.
*/
setRemoveCellsFromParent = value => {
setRemoveCellsFromParent(value) {
this.removeCellsFromParent = value;
};
}
/**
* Function: isPropagateSelectionCell
@ -422,7 +422,7 @@ class mxGraphHandler {
* Returns true if the given cell and parent should propagate
* selection state to the parent.
*/
isPropagateSelectionCell = (cell, immediate, me) => {
isPropagateSelectionCell(cell, immediate, me) {
const parent = this.graph.model.getParent(cell);
if (immediate) {
@ -444,7 +444,7 @@ class mxGraphHandler {
(this.graph.isToggleEvent(me.getEvent()) ||
!this.graph.isCellSelected(parent))
);
};
}
/**
* Function: getInitialCellForEvent
@ -452,7 +452,7 @@ class mxGraphHandler {
* Hook to return initial cell for the given event. This returns
* the topmost cell that is not a swimlane or is selected.
*/
getInitialCellForEvent = me => {
getInitialCellForEvent(me) {
let state = me.getState();
if (
@ -478,14 +478,14 @@ class mxGraphHandler {
}
return state != null ? state.cell : null;
};
}
/**
* Function: isDelayedSelection
*
* Returns true if the cell or one of its ancestors is selected.
*/
isDelayedSelection = (cell, me) => {
isDelayedSelection(cell, me) {
if (
!this.graph.isToggleEvent(me.getEvent()) ||
!mxEvent.isAltDown(me.getEvent())
@ -503,14 +503,14 @@ class mxGraphHandler {
this.graph.isToggleEvent(me.getEvent()) &&
!mxEvent.isAltDown(me.getEvent())
);
};
}
/**
* Function: selectDelayed
*
* Implements the delayed selection for the given mouse event.
*/
selectDelayed = me => {
selectDelayed(me) {
if (!this.graph.popupMenuHandler.isPopupTrigger(me)) {
let cell = me.getCell();
@ -520,14 +520,14 @@ class mxGraphHandler {
this.selectCellForEvent(cell, me);
}
};
}
/**
* Function: selectCellForEvent
*
* Selects the given cell for the given <mxMouseEvent>.
*/
selectCellForEvent = (cell, me) => {
selectCellForEvent(cell, me) {
const state = this.graph.view.getState(cell);
if (state != null) {
@ -556,7 +556,7 @@ class mxGraphHandler {
}
return cell;
};
}
/**
* Function: consumeMouseEvent
@ -577,9 +577,9 @@ class mxGraphHandler {
* }
* </code>
*/
consumeMouseEvent = (evtName, me) => {
consumeMouseEvent(evtName, me) {
me.consume();
};
}
/**
* Function: mouseDown
@ -588,7 +588,7 @@ class mxGraphHandler {
* it. By consuming the event all subsequent events of the gesture are
* redirected to this handler.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
if (
!me.isConsumed() &&
this.isEnabled() &&
@ -628,14 +628,14 @@ class mxGraphHandler {
this.consumeMouseEvent(mxEvent.MOUSE_DOWN, me);
}
}
};
}
/**
* Function: getGuideStates
*
* Creates an array of cell states which should be used as guides.
*/
getGuideStates = () => {
getGuideStates() {
const parent = this.graph.getDefaultParent();
const model = this.graph.getModel();
@ -651,7 +651,7 @@ class mxGraphHandler {
return this.graph.view.getCellStates(
model.filterDescendants(filter, parent)
);
};
}
/**
* Function: getCells
@ -665,12 +665,12 @@ class mxGraphHandler {
*
* initialCell - <mxCell> that triggered this handler.
*/
getCells = initialCell => {
getCells(initialCell) {
if (!this.delayedSelection && this.graph.isCellMovable(initialCell)) {
return [initialCell];
}
return this.graph.getMovableCells(this.graph.getSelectionCells());
};
}
/**
* Function: getPreviewBounds
@ -678,7 +678,7 @@ class mxGraphHandler {
* Returns the <mxRectangle> used as the preview bounds for
* moving the given cells.
*/
getPreviewBounds = cells => {
getPreviewBounds(cells) {
const bounds = this.getBoundingBox(cells);
if (bounds != null) {
@ -709,7 +709,7 @@ class mxGraphHandler {
}
return bounds;
};
}
/**
* Function: getBoundingBox
@ -724,7 +724,7 @@ class mxGraphHandler {
*
* cells - Array of <mxCells> whose bounding box should be returned.
*/
getBoundingBox = cells => {
getBoundingBox(cells) {
let result = null;
if (cells != null && cells.length > 0) {
@ -756,14 +756,14 @@ class mxGraphHandler {
}
return result;
};
}
/**
* Function: createPreviewShape
*
* Creates the shape used to draw the preview for the given bounds.
*/
createPreviewShape = bounds => {
createPreviewShape(bounds) {
const shape = new mxRectangleShape(bounds, null, this.previewColor);
shape.isDashed = true;
@ -787,14 +787,14 @@ class mxGraphHandler {
}
return shape;
};
}
/**
* Function: start
*
* Starts the handling of the mouse gesture.
*/
start = (cell, x, y, cells) => {
start(cell, x, y, cells) {
this.cell = cell;
this.first = mxUtils.convertPoint(this.graph.container, x, y);
this.cells = cells != null ? cells : this.getCells(this.cell);
@ -843,14 +843,14 @@ class mxGraphHandler {
);
};
}
};
}
/**
* Function: addStates
*
* Adds the states for the given cell recursively to the given dictionary.
*/
addStates = (cell, dict) => {
addStates(cell, dict) {
const state = this.graph.view.getState(cell);
let count = 0;
@ -866,16 +866,16 @@ class mxGraphHandler {
}
return count;
};
}
/**
* Function: isCellMoving
*
* Returns true if the given cell is currently being moved.
*/
isCellMoving = cell => {
isCellMoving(cell) {
return this.allCells.get(cell) != null;
};
}
/**
* Function: useGuidesForEvent
@ -883,26 +883,26 @@ class mxGraphHandler {
* Returns true if the guides should be used for the given <mxMouseEvent>.
* This implementation returns <mxGuide.isEnabledForEvent>.
*/
useGuidesForEvent = me => {
useGuidesForEvent(me) {
return this.guide != null
? this.guide.isEnabledForEvent(me.getEvent()) &&
!this.graph.isConstrainedEvent(me.getEvent())
: true;
};
}
/**
* Function: snap
*
* Snaps the given vector to the grid and returns the given mxPoint instance.
*/
snap = vector => {
snap(vector) {
const scale = this.scaleGrid ? this.graph.view.scale : 1;
vector.x = this.graph.snap(vector.x / scale) * scale;
vector.y = this.graph.snap(vector.y / scale) * scale;
return vector;
};
}
/**
* Function: getDelta
@ -910,7 +910,7 @@ class mxGraphHandler {
* Returns an <mxPoint> that represents the vector for moving the cells
* for the given <mxMouseEvent>.
*/
getDelta = me => {
getDelta(me) {
const point = mxUtils.convertPoint(
this.graph.container,
me.getX(),
@ -921,21 +921,21 @@ class mxGraphHandler {
point.x - this.first.x - this.graph.panDx,
point.y - this.first.y - this.graph.panDy
);
};
}
/**
* Function: updateHint
*
* Hook for subclassers do show details while the handler is active.
*/
updateHint = me => {};
updateHint(me) {}
/**
* Function: removeHint
*
* Hooks for subclassers to hide details when the handler gets inactive.
*/
removeHint = () => {};
removeHint() {}
/**
* Function: roundLength
@ -944,25 +944,25 @@ class mxGraphHandler {
* numbers coming in should be rounded if no half steps are allowed (ie for non
* aligned standard moving where pixel steps should be preferred).
*/
roundLength = length => {
roundLength(length) {
return Math.round(length * 100) / 100;
};
}
/**
* Function: isValidDropTarget
*
* Returns true if the given cell is a valid drop target.
*/
isValidDropTarget = (target, me) => {
isValidDropTarget(target, me) {
return this.graph.model.getParent(this.cell) !== target;
};
}
/**
* Function: checkPreview
*
* Updates the preview if cloning state has changed.
*/
checkPreview = () => {
checkPreview() {
if (this.livePreviewActive && this.cloning) {
this.resetLivePreview();
this.livePreviewActive = false;
@ -978,7 +978,7 @@ class mxGraphHandler {
} else if (!this.livePreviewUsed && this.shape == null) {
this.shape = this.createPreviewShape(this.bounds);
}
};
}
/**
* Function: mouseMove
@ -986,7 +986,7 @@ class mxGraphHandler {
* Handles the event by highlighting possible drop targets and updating the
* preview.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
const { graph } = this;
if (
@ -1145,14 +1145,14 @@ class mxGraphHandler {
me.sourceState.setCursor(cursor);
}
}
};
}
/**
* Function: updatePreview
*
* Updates the bounds of the preview shape.
*/
updatePreview = remote => {
updatePreview(remote) {
if (this.livePreviewUsed && !remote) {
if (this.cells != null) {
this.setHandlesVisibleForCells(
@ -1164,14 +1164,14 @@ class mxGraphHandler {
} else {
this.updatePreviewShape();
}
};
}
/**
* Function: updatePreviewShape
*
* Updates the bounds of the preview shape.
*/
updatePreviewShape = () => {
updatePreviewShape() {
if (this.shape != null && this.pBounds != null) {
this.shape.bounds = new mxRectangle(
Math.round(this.pBounds.x + this.currentDx),
@ -1181,14 +1181,14 @@ class mxGraphHandler {
);
this.shape.redraw();
}
};
}
/**
* Function: updateLivePreview
*
* Updates the bounds of the preview shape.
*/
updateLivePreview = (dx, dy) => {
updateLivePreview(dx, dy) {
if (!this.suspended) {
const states = [];
@ -1352,14 +1352,14 @@ class mxGraphHandler {
this.resetPreviewStates(states);
}
}
};
}
/**
* Function: redrawHandles
*
* Redraws the preview shape for the given states array.
*/
redrawHandles = states => {
redrawHandles(states) {
for (let i = 0; i < states.length; i += 1) {
const handler = this.graph.selectionCellsHandler.getHandler(
states[i][0].cell
@ -1369,25 +1369,25 @@ class mxGraphHandler {
handler.redraw(true);
}
}
};
}
/**
* Function: resetPreviewStates
*
* Resets the given preview states array.
*/
resetPreviewStates = states => {
resetPreviewStates(states) {
for (let i = 0; i < states.length; i += 1) {
states[i][0].setState(states[i][1]);
}
};
}
/**
* Function: suspend
*
* Suspends the livew preview.
*/
suspend = () => {
suspend() {
if (!this.suspended) {
if (this.livePreviewUsed) {
this.updateLivePreview(0, 0);
@ -1403,14 +1403,14 @@ class mxGraphHandler {
this.suspended = true;
}
};
}
/**
* Function: resume
*
* Suspends the livew preview.
*/
resume = () => {
resume() {
if (this.suspended) {
this.suspended = null;
@ -1426,14 +1426,14 @@ class mxGraphHandler {
this.guide.setVisible(true);
}
}
};
}
/**
* Function: resetLivePreview
*
* Resets the livew preview.
*/
resetLivePreview = () => {
resetLivePreview() {
if (this.allCells != null) {
this.allCells.visit((key, state) => {
// Restores event handling
@ -1473,7 +1473,7 @@ class mxGraphHandler {
// Repaints all invalid states
this.graph.view.validate();
}
};
}
/**
* Function: setHandlesVisibleForCells
@ -1486,7 +1486,7 @@ class mxGraphHandler {
* visible - Boolean that specifies if the handles should be visible.
* force - Forces an update of the handler regardless of the last used value.
*/
setHandlesVisibleForCells = (cells, visible, force) => {
setHandlesVisibleForCells(cells, visible, force) {
if (force || this.handlesVisible !== visible) {
this.handlesVisible = visible;
@ -1502,7 +1502,7 @@ class mxGraphHandler {
}
}
}
};
}
/**
* Function: setHighlightColor
@ -1513,18 +1513,18 @@ class mxGraphHandler {
*
* color - String that represents the new highlight color.
*/
setHighlightColor = color => {
setHighlightColor(color) {
if (this.highlight != null) {
this.highlight.setHighlightColor(color);
}
};
}
/**
* Function: mouseUp
*
* Handles the event by applying the changes to the selection cells.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
if (!me.isConsumed()) {
if (this.livePreviewUsed) {
this.resetLivePreview();
@ -1598,14 +1598,14 @@ class mxGraphHandler {
}
this.reset();
};
}
/**
* Function: reset
*
* Resets the state of this handler.
*/
reset = () => {
reset() {
if (this.livePreviewUsed) {
this.resetLivePreview();
this.setHandlesVisibleForCells(
@ -1633,7 +1633,7 @@ class mxGraphHandler {
this.first = null;
this.cells = null;
this.cell = null;
};
}
/**
* Function: shouldRemoveCellsFromParent
@ -1641,7 +1641,7 @@ class mxGraphHandler {
* Returns true if the given cells should be removed from the parent for the specified
* mousereleased event.
*/
shouldRemoveCellsFromParent = (parent, cells, evt) => {
shouldRemoveCellsFromParent(parent, cells, evt) {
if (this.graph.getModel().isVertex(parent)) {
const pState = this.graph.getView().getState(parent);
@ -1667,14 +1667,14 @@ class mxGraphHandler {
}
return false;
};
}
/**
* Function: moveCells
*
* Moves the given cells by the specified amount.
*/
moveCells = (cells, dx, dy, clone, target, evt) => {
moveCells(cells, dx, dy, clone, target, evt) {
if (clone) {
cells = this.graph.getCloneableCells(cells);
}
@ -1745,14 +1745,14 @@ class mxGraphHandler {
if (this.isSelectEnabled() && this.scrollOnMove) {
this.graph.scrollCellToVisible(cells[0]);
}
};
}
/**
* Function: shouldRemoveParent
*
* Returns true if the given parent should be removed after removal of child cells.
*/
shouldRemoveParent = parent => {
shouldRemoveParent(parent) {
const state = this.graph.view.getState(parent);
return (
@ -1763,14 +1763,14 @@ class mxGraphHandler {
this.graph.model.getChildCount(state.cell) === 0 &&
this.graph.isTransparentState(state)
);
};
}
/**
* Function: destroyShapes
*
* Destroy the preview and highlight shapes.
*/
destroyShapes = () => {
destroyShapes() {
// Destroys the preview dashed rectangle
if (this.shape != null) {
this.shape.destroy();
@ -1787,14 +1787,14 @@ class mxGraphHandler {
this.highlight.destroy();
this.highlight = null;
}
};
}
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = () => {
destroy() {
this.graph.removeMouseListener(this);
this.graph.removeListener(this.panHandler);
@ -1814,7 +1814,7 @@ class mxGraphHandler {
this.destroyShapes();
this.removeHint();
};
}
}
export default mxGraphHandler;

84
src/mxgraph/handler/mxHandle.js
View File

@ -4,13 +4,13 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxUtils from "../util/mxUtils";
import mxPoint from "../util/mxPoint";
import mxImageShape from "../shape/mxImageShape";
import mxRectangle from "../util/mxRectangle";
import mxRectangleShape from "../shape/mxRectangleShape";
import mxConstants from "../util/mxConstants";
import mxEvent from "../util/mxEvent";
import mxUtils from '../util/mxUtils';
import mxPoint from '../util/mxPoint';
import mxImageShape from '../shape/mxImageShape';
import mxRectangle from '../util/mxRectangle';
import mxRectangleShape from '../shape/mxRectangleShape';
import mxConstants from '../util/mxConstants';
import mxEvent from '../util/mxEvent';
class mxHandle {
/**
@ -61,37 +61,37 @@ class mxHandle {
*
* Hook for subclassers to return the current position of the handle.
*/
getPosition = bounds => {};
getPosition(bounds) {}
/**
* Function: setPosition
*
* Hooks for subclassers to update the style in the <state>.
*/
setPosition = (bounds, pt, me) => {};
setPosition(bounds, pt, me) {}
/**
* Function: execute
*
* Hook for subclassers to execute the handle.
*/
execute = me => {};
execute(me) {}
/**
* Function: copyStyle
*
* Sets the cell style with the given name to the corresponding value in <state>.
*/
copyStyle = key => {
copyStyle(key) {
this.graph.setCellStyles(key, this.state.style[key], [this.state.cell]);
};
}
/**
* Function: processEvent
*
* Processes the given <mxMouseEvent> and invokes <setPosition>.
*/
processEvent = me => {
processEvent(me) {
const { scale } = this.graph.view;
const tr = this.graph.view.translate;
let pt = new mxPoint(
@ -119,7 +119,7 @@ class mxHandle {
);
this.setPosition(this.state.getPaintBounds(), pt, me);
this.redraw();
};
}
/**
* Function: positionChanged
@ -127,7 +127,7 @@ class mxHandle {
* Should be called after <setPosition> in <processEvent>.
* This repaints the state using <mxCellRenderer>.
*/
positionChanged = () => {
positionChanged() {
if (this.state.text != null) {
this.state.text.apply(this.state);
}
@ -137,20 +137,20 @@ class mxHandle {
}
this.graph.cellRenderer.redraw(this.state, true);
};
}
/**
* Function: getRotation
*
* Returns the rotation defined in the style of the cell.
*/
getRotation = () => {
getRotation() {
if (this.state.shape != null) {
return this.state.shape.getRotation();
}
return 0;
};
}
/**
* Function: getTotalRotation
@ -158,20 +158,20 @@ class mxHandle {
* Returns the rotation from the style and the rotation from the direction of
* the cell.
*/
getTotalRotation = () => {
getTotalRotation() {
if (this.state.shape != null) {
return this.state.shape.getShapeRotation();
}
return 0;
};
}
/**
* Function: init
*
* Creates and initializes the shapes required for this handle.
*/
init = () => {
init() {
const html = this.isHtmlRequired();
if (this.image != null) {
@ -185,14 +185,14 @@ class mxHandle {
}
this.initShape(html);
};
}
/**
* Function: createShape
*
* Creates and returns the shape for this handle.
*/
createShape = html => {
createShape(html) {
const bounds = new mxRectangle(
0,
0,
@ -205,14 +205,14 @@ class mxHandle {
mxConstants.HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
);
};
}
/**
* Function: initShape
*
* Initializes <shape> and sets its cursor.
*/
initShape = html => {
initShape(html) {
if (html && this.shape.isHtmlAllowed()) {
this.shape.dialect = mxConstants.DIALECT_STRICTHTML;
this.shape.init(this.graph.container);
@ -229,14 +229,14 @@ class mxHandle {
mxEvent.redirectMouseEvents(this.shape.node, this.graph, this.state);
this.shape.node.style.cursor = this.cursor;
};
}
/**
* Function: redraw
*
* Renders the shape for this handle.
*/
redraw = () => {
redraw() {
if (this.shape != null && this.state.shape != null) {
let pt = this.getPosition(this.state.getPaintBounds());
@ -257,7 +257,7 @@ class mxHandle {
this.shape.redraw();
}
}
};
}
/**
* Function: isHtmlRequired
@ -265,33 +265,33 @@ class mxHandle {
* Returns true if this handle should be rendered in HTML. This returns true if
* the text node is in the graph container.
*/
isHtmlRequired = () => {
isHtmlRequired() {
return (
this.state.text != null &&
this.state.text.node.parentNode === this.graph.container
);
};
}
/**
* Function: rotatePoint
*
* Rotates the point by the given angle.
*/
rotatePoint = (pt, alpha) => {
rotatePoint(pt, alpha) {
const bounds = this.state.getCellBounds();
const cx = new mxPoint(bounds.getCenterX(), bounds.getCenterY());
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
return mxUtils.getRotatedPoint(pt, cos, sin, cx);
};
}
/**
* Function: flipPoint
*
* Flips the given point vertically and/or horizontally.
*/
flipPoint = pt => {
flipPoint(pt) {
if (this.state.shape != null) {
const bounds = this.state.getCellBounds();
@ -305,7 +305,7 @@ class mxHandle {
}
return pt;
};
}
/**
* Function: snapPoint
@ -313,48 +313,48 @@ class mxHandle {
* Snaps the given point to the grid if ignore is false. This modifies
* the given point in-place and also returns it.
*/
snapPoint = (pt, ignore) => {
snapPoint(pt, ignore) {
if (!ignore) {
pt.x = this.graph.snap(pt.x);
pt.y = this.graph.snap(pt.y);
}
return pt;
};
}
/**
* Function: setVisible
*
* Shows or hides this handle.
*/
setVisible = visible => {
setVisible(visible) {
if (this.shape != null && this.shape.node != null) {
this.shape.node.style.display = visible ? '' : 'none';
}
};
}
/**
* Function: reset
*
* Resets the state of this handle by setting its visibility to true.
*/
reset = () => {
reset() {
this.setVisible(true);
this.state.style = this.graph.getCellStyle(this.state.cell);
this.positionChanged();
};
}
/**
* Function: destroy
*
* Destroys this handle.
*/
destroy = () => {
destroy() {
if (this.shape != null) {
this.shape.destroy();
this.shape = null;
}
};
}
}
export default mxHandle;

60
src/mxgraph/handler/mxKeyHandler.js
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxEvent from "../util/mxEvent";
import mxUtils from "../util/mxUtils";
import mxEvent from '../util/mxEvent';
import mxUtils from '../util/mxUtils';
class mxKeyHandler {
/**
@ -145,9 +145,9 @@ class mxKeyHandler {
* Returns true if events are handled. This implementation returns
* <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
@ -158,9 +158,9 @@ class mxKeyHandler {
*
* enabled - Boolean that specifies the new enabled state.
*/
setEnabled = enabled => {
setEnabled(enabled) {
this.enabled = enabled;
};
}
/**
* Function: bindKey
@ -173,9 +173,9 @@ class mxKeyHandler {
* code - Integer that specifies the keycode.
* funct - JavaScript function that takes the key event as an argument.
*/
bindKey = (code, funct) => {
bindKey(code, funct) {
this.normalKeys[code] = funct;
};
}
/**
* Function: bindShiftKey
@ -188,9 +188,9 @@ class mxKeyHandler {
* code - Integer that specifies the keycode.
* funct - JavaScript function that takes the key event as an argument.
*/
bindShiftKey = (code, funct) => {
bindShiftKey(code, funct) {
this.shiftKeys[code] = funct;
};
}
/**
* Function: bindControlKey
@ -203,9 +203,9 @@ class mxKeyHandler {
* code - Integer that specifies the keycode.
* funct - JavaScript function that takes the key event as an argument.
*/
bindControlKey = (code, funct) => {
bindControlKey(code, funct) {
this.controlKeys[code] = funct;
};
}
/**
* Function: bindControlShiftKey
@ -218,9 +218,9 @@ class mxKeyHandler {
* code - Integer that specifies the keycode.
* funct - JavaScript function that takes the key event as an argument.
*/
bindControlShiftKey = (code, funct) => {
bindControlShiftKey(code, funct) {
this.controlShiftKeys[code] = funct;
};
}
/**
* Function: isControlDown
@ -231,9 +231,9 @@ class mxKeyHandler {
*
* evt - Key event whose control key pressed state should be returned.
*/
isControlDown = evt => {
isControlDown(evt) {
return mxEvent.isControlDown(evt);
};
}
/**
* Function: getFunction
@ -245,7 +245,7 @@ class mxKeyHandler {
*
* evt - Key event whose associated function should be returned.
*/
getFunction = evt => {
getFunction(evt) {
if (evt != null && !mxEvent.isAltDown(evt)) {
if (this.isControlDown(evt)) {
if (mxEvent.isShiftDown(evt)) {
@ -260,7 +260,7 @@ class mxKeyHandler {
}
return null;
};
}
/**
* Function: isGraphEvent
@ -274,7 +274,7 @@ class mxKeyHandler {
*
* evt - Key event that represents the keystroke.
*/
isGraphEvent = evt => {
isGraphEvent(evt) {
const source = mxEvent.getSource(evt);
// Accepts events from the target object or
@ -290,7 +290,7 @@ class mxKeyHandler {
// Accepts events from inside the container
return mxUtils.isAncestorNode(this.graph.container, source);
};
}
/**
* Function: keyDown
@ -304,7 +304,7 @@ class mxKeyHandler {
*
* evt - Key event that represents the keystroke.
*/
keyDown = evt => {
keyDown(evt) {
if (this.isEnabledForEvent(evt)) {
// Cancels the editing if escape is pressed
if (evt.keyCode === 27 /* Escape */) {
@ -321,7 +321,7 @@ class mxKeyHandler {
}
}
}
};
}
/**
* Function: isEnabledForEvent
@ -336,14 +336,14 @@ class mxKeyHandler {
*
* evt - Key event that represents the keystroke.
*/
isEnabledForEvent = evt => {
isEnabledForEvent(evt) {
return (
this.graph.isEnabled() &&
!mxEvent.isConsumed(evt) &&
this.isGraphEvent(evt) &&
this.isEnabled()
);
};
}
/**
* Function: isEventIgnored
@ -355,9 +355,9 @@ class mxKeyHandler {
*
* evt - Key event that represents the keystroke.
*/
isEventIgnored = evt => {
isEventIgnored(evt) {
return this.graph.isEditing();
};
}
/**
* Function: escape
@ -371,11 +371,11 @@ class mxKeyHandler {
* evt - Key event that represents the keystroke. Possible keycode in this
* case is 27 (ESCAPE).
*/
escape = evt => {
escape(evt) {
if (this.graph.isEscapeEnabled()) {
this.graph.escape(evt);
}
};
}
/**
* Function: destroy
@ -384,14 +384,14 @@ class mxKeyHandler {
* normally not need to be called, it is called automatically when the
* window unloads (in IE).
*/
destroy = () => {
destroy() {
if (this.target != null && this.keydownHandler != null) {
mxEvent.removeListener(this.target, 'keydown', this.keydownHandler);
this.keydownHandler = null;
}
this.target = null;
};
}
}
export default mxKeyHandler;

64
src/mxgraph/handler/mxPanningHandler.js
View File

@ -205,45 +205,45 @@ class mxPanningHandler extends mxEventSource {
*
* Returns true if the handler is currently active.
*/
isActive = () => {
isActive() {
return this.active || this.initialScale != null;
};
}
/**
* Function: isPanningEnabled
*
* Returns <panningEnabled>.
*/
isPanningEnabled = () => {
isPanningEnabled() {
return this.panningEnabled;
};
}
/**
* Function: setPanningEnabled
*
* Sets <panningEnabled>.
*/
setPanningEnabled = value => {
setPanningEnabled(value) {
this.panningEnabled = value;
};
}
/**
* Function: isPinchEnabled
*
* Returns <pinchEnabled>.
*/
isPinchEnabled = () => {
isPinchEnabled() {
return this.pinchEnabled;
};
}
/**
* Function: setPinchEnabled
*
* Sets <pinchEnabled>.
*/
setPinchEnabled = value => {
setPinchEnabled(value) {
this.pinchEnabled = value;
};
}
/**
* Function: isPanningTrigger
@ -252,7 +252,7 @@ class mxPanningHandler extends mxEventSource {
* given cell. This returns true if control-shift is pressed or if
* <usePopupTrigger> is true and the event is a popup trigger.
*/
isPanningTrigger = me => {
isPanningTrigger(me) {
const evt = me.getEvent();
return (
@ -262,7 +262,7 @@ class mxPanningHandler extends mxEventSource {
(mxEvent.isControlDown(evt) && mxEvent.isShiftDown(evt)) ||
(this.usePopupTrigger && mxEvent.isPopupTrigger(evt))
);
};
}
/**
* Function: isForcePanningEvent
@ -271,9 +271,9 @@ class mxPanningHandler extends mxEventSource {
* implementation always returns true if <ignoreCell> is true or for
* multi touch events.
*/
isForcePanningEvent = me => {
isForcePanningEvent(me) {
return this.ignoreCell || mxEvent.isMultiTouchEvent(me.getEvent());
};
}
/**
* Function: mouseDown
@ -281,7 +281,7 @@ class mxPanningHandler extends mxEventSource {
* Handles the event by initiating the panning. By consuming the event all
* subsequent events of the gesture are redirected to this handler.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
this.mouseDownEvent = me;
if (
@ -293,14 +293,14 @@ class mxPanningHandler extends mxEventSource {
this.start(me);
this.consumePanningTrigger(me);
}
};
}
/**
* Function: start
*
* Starts panning at the given event.
*/
start = me => {
start(me) {
this.dx0 = -this.graph.container.scrollLeft;
this.dy0 = -this.graph.container.scrollTop;
@ -311,7 +311,7 @@ class mxPanningHandler extends mxEventSource {
this.dy = null;
this.panningTrigger = true;
};
}
/**
* Function: consumePanningTrigger
@ -341,16 +341,16 @@ class mxPanningHandler extends mxEventSource {
* };
* (end)
*/
consumePanningTrigger = me => {
consumePanningTrigger(me) {
me.consume();
};
}
/**
* Function: mouseMove
*
* Handles the event by updating the panning on the graph.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
this.dx = me.getX() - this.startX;
this.dy = me.getY() - this.startY;
@ -383,7 +383,7 @@ class mxPanningHandler extends mxEventSource {
if (this.active || this.panningTrigger) {
me.consume();
}
};
}
/**
* Function: mouseUp
@ -391,7 +391,7 @@ class mxPanningHandler extends mxEventSource {
* Handles the event by setting the translation on the view or showing the
* popupmenu.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
if (this.active) {
if (this.dx != null && this.dy != null) {
// Ignores if scrollbars have been used for panning
@ -412,14 +412,14 @@ class mxPanningHandler extends mxEventSource {
}
this.reset();
};
}
/**
* Function: zoomGraph
*
* Zooms the graph to the given value and consumed the event if needed.
*/
zoomGraph = evt => {
zoomGraph(evt) {
let value = Math.round(this.initialScale * evt.scale * 100) / 100;
if (this.minScale != null) {
@ -434,41 +434,41 @@ class mxPanningHandler extends mxEventSource {
this.graph.zoomTo(value);
mxEvent.consume(evt);
}
};
}
/**
* Function: reset
*
* Resets the state of this handler.
*/
reset = () => {
reset() {
this.panningTrigger = false;
this.mouseDownEvent = null;
this.active = false;
this.dx = null;
this.dy = null;
};
}
/**
* Function: panGraph
*
* Pans <graph> by the given amount.
*/
panGraph = (dx, dy) => {
panGraph(dx, dy) {
this.graph.getView().setTranslate(dx, dy);
};
}
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = () => {
destroy() {
this.graph.removeMouseListener(this);
this.graph.removeListener(this.forcePanningHandler);
this.graph.removeListener(this.gestureHandler);
mxEvent.removeListener(document, 'mouseup', this.mouseUpListener);
};
}
}
export default mxPanningHandler;

28
src/mxgraph/handler/mxPopupMenuHandler.js
View File

@ -92,7 +92,7 @@ class mxPopupMenuHandler extends mxPopupMenu {
*
* Initializes the shapes required for this vertex handler.
*/
init = () => {
init() {
// Supercall
super.init();
@ -104,7 +104,7 @@ class mxPopupMenuHandler extends mxPopupMenu {
this.graph.tooltipHandler.hide();
})
);
};
}
/**
* Function: isSelectOnPopup
@ -112,9 +112,9 @@ class mxPopupMenuHandler extends mxPopupMenu {
* Hook for returning if a cell should be selected for a given <mxMouseEvent>.
* This implementation returns <selectOnPopup>.
*/
isSelectOnPopup = me => {
isSelectOnPopup(me) {
return this.selectOnPopup;
};
}
/**
* Function: mouseDown
@ -122,7 +122,7 @@ class mxPopupMenuHandler extends mxPopupMenu {
* Handles the event by initiating the panning. By consuming the event all
* subsequent events of the gesture are redirected to this handler.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
if (this.isEnabled() && !mxEvent.isMultiTouchEvent(me.getEvent())) {
// Hides the popupmenu if is is being displayed
this.hideMenu();
@ -133,14 +133,14 @@ class mxPopupMenuHandler extends mxPopupMenu {
this.popupTrigger = this.isPopupTrigger(me);
this.inTolerance = true;
}
};
}
/**
* Function: mouseMove
*
* Handles the event by updating the panning on the graph.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
// Popup trigger may change on mouseUp so ignore it
if (this.inTolerance && this.screenX != null && this.screenY != null) {
if (
@ -152,7 +152,7 @@ class mxPopupMenuHandler extends mxPopupMenu {
this.inTolerance = false;
}
}
};
}
/**
* Function: mouseUp
@ -160,7 +160,7 @@ class mxPopupMenuHandler extends mxPopupMenu {
* Handles the event by setting the translation on the view or showing the
* popupmenu.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
if (
this.popupTrigger &&
this.inTolerance &&
@ -198,29 +198,29 @@ class mxPopupMenuHandler extends mxPopupMenu {
this.popupTrigger = false;
this.inTolerance = false;
};
}
/**
* Function: getCellForPopupEvent
*
* Hook to return the cell for the mouse up popup trigger handling.
*/
getCellForPopupEvent = me => {
getCellForPopupEvent(me) {
return me.getCell();
};
}
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = () => {
destroy() {
this.graph.removeMouseListener(this);
this.graph.removeListener(this.gestureHandler);
// Supercall
super.destroy();
};
}
}
export default mxPopupMenuHandler;

56
src/mxgraph/handler/mxRubberband.js
View File

@ -127,9 +127,9 @@ class mxRubberband {
* Returns true if events are handled. This implementation returns
* <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
@ -137,9 +137,9 @@ class mxRubberband {
* Enables or disables event handling. This implementation updates
* <enabled>.
*/
setEnabled = enabled => {
setEnabled(enabled) {
this.enabled = enabled;
};
}
/**
* Function: isForceRubberbandEvent
@ -147,9 +147,9 @@ class mxRubberband {
* Returns true if the given <mxMouseEvent> should start rubberband selection.
* This implementation returns true if the alt key is pressed.
*/
isForceRubberbandEvent = me => {
isForceRubberbandEvent(me) {
return mxEvent.isAltDown(me.getEvent());
};
}
/**
* Function: mouseDown
@ -158,7 +158,7 @@ class mxRubberband {
* event all subsequent events of the gesture are redirected to this
* handler.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
if (
!me.isConsumed() &&
this.isEnabled() &&
@ -179,14 +179,14 @@ class mxRubberband {
// not selecting anything while we're rubberbanding.
me.consume(false);
}
};
}
/**
* Function: start
*
* Sets the start point for the rubberband selection.
*/
start = (x, y) => {
start(x, y) {
this.first = new mxPoint(x, y);
const { container } = this.graph;
@ -218,14 +218,14 @@ class mxRubberband {
this.dropHandler
);
}
};
}
/**
* Function: mouseMove
*
* Handles the event by updating therubberband selection.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
if (!me.isConsumed() && this.first != null) {
const origin = mxUtils.getScrollOrigin(this.graph.container);
const offset = mxUtils.getOffset(this.graph.container);
@ -250,14 +250,14 @@ class mxRubberband {
me.consume();
}
}
};
}
/**
* Function: createShape
*
* Creates the rubberband selection shape.
*/
createShape = () => {
createShape() {
if (this.sharedDiv == null) {
this.sharedDiv = document.createElement('div');
this.sharedDiv.className = 'mxRubberband';
@ -272,16 +272,16 @@ class mxRubberband {
}
return result;
};
}
/**
* Function: isActive
*
* Returns true if this handler is active.
*/
isActive = (sender, me) => {
isActive(sender, me) {
return this.div != null && this.div.style.display !== 'none';
};
}
/**
* Function: mouseUp
@ -289,7 +289,7 @@ class mxRubberband {
* Handles the event by selecting the region of the rubberband using
* <mxGraph.selectRegion>.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
const active = this.isActive();
this.reset();
@ -297,7 +297,7 @@ class mxRubberband {
this.execute(me.getEvent());
me.consume();
}
};
}
/**
* Function: execute
@ -305,17 +305,17 @@ class mxRubberband {
* Resets the state of this handler and selects the current region
* for the given event.
*/
execute = evt => {
execute(evt) {
const rect = new mxRectangle(this.x, this.y, this.width, this.height);
this.graph.selectRegion(rect, evt);
};
}
/**
* Function: reset
*
* Resets the state of the rubberband selection.
*/
reset = () => {
reset() {
if (this.div != null) {
if (mxClient.IS_SVG && this.fadeOut) {
const temp = this.div;
@ -344,26 +344,26 @@ class mxRubberband {
this.currentY = 0;
this.first = null;
this.div = null;
};
}
/**
* Function: update
*
* Sets <currentX> and <currentY> and calls <repaint>.
*/
update = (x, y) => {
update(x, y) {
this.currentX = x;
this.currentY = y;
this.repaint();
};
}
/**
* Function: repaint
*
* Computes the bounding box and updates the style of the <div>.
*/
repaint = () => {
repaint() {
if (this.div != null) {
const x = this.currentX - this.graph.panDx;
const y = this.currentY - this.graph.panDy;
@ -381,7 +381,7 @@ class mxRubberband {
this.div.style.width = `${Math.max(1, this.width)}px`;
this.div.style.height = `${Math.max(1, this.height)}px`;
}
};
}
/**
* Function: destroy
@ -390,7 +390,7 @@ class mxRubberband {
* normally not need to be called, it is called automatically when the
* window unloads.
*/
destroy = () => {
destroy() {
if (!this.destroyed) {
this.destroyed = true;
this.graph.removeMouseListener(this);
@ -402,7 +402,7 @@ class mxRubberband {
this.sharedDiv = null;
}
}
};
}
}
export default mxRubberband;

52
src/mxgraph/handler/mxSelectionCellsHandler.js
View File

@ -98,63 +98,63 @@ class mxSelectionCellsHandler extends mxEventSource {
*
* Returns <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
*
* Sets <enabled>.
*/
setEnabled = value => {
setEnabled(value) {
this.enabled = value;
};
}
/**
* Function: getHandler
*
* Returns the handler for the given cell.
*/
getHandler = cell => {
getHandler(cell) {
return this.handlers.get(cell);
};
}
/**
* Function: isHandled
*
* Returns true if the given cell has a handler.
*/
isHandled = cell => {
isHandled(cell) {
return this.getHandler(cell) != null;
};
}
/**
* Function: reset
*
* Resets all handlers.
*/
reset = () => {
reset() {
this.handlers.visit((key, handler) => {
handler.reset.apply(handler);
});
};
}
/**
* Function: getHandledSelectionCells
*
* Reloads or updates all handlers.
*/
getHandledSelectionCells = () => {
getHandledSelectionCells() {
return this.graph.getSelectionCells();
};
}
/**
* Function: refresh
*
* Reloads or updates all handlers.
*/
refresh = () => {
refresh() {
// Removes all existing handlers
const oldHandlers = this.handlers;
this.handlers = new mxDictionary();
@ -214,23 +214,23 @@ class mxSelectionCellsHandler extends mxEventSource {
}
}
}
};
}
/**
* Function: isHandlerActive
*
* Returns true if the given handler is active and should not be redrawn.
*/
isHandlerActive = handler => {
isHandlerActive(handler) {
return handler.index != null;
};
}
/**
* Function: updateHandler
*
* Updates the handler for the given shape if one exists.
*/
updateHandler = state => {
updateHandler(state) {
let handler = this.handlers.remove(state.cell);
if (handler != null) {
@ -250,14 +250,14 @@ class mxSelectionCellsHandler extends mxEventSource {
}
}
}
};
}
/**
* Function: mouseDown
*
* Redirects the given event to the handlers.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me];
@ -265,14 +265,14 @@ class mxSelectionCellsHandler extends mxEventSource {
handler.mouseDown.apply(handler, args);
});
}
};
}
/**
* Function: mouseMove
*
* Redirects the given event to the handlers.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me];
@ -280,14 +280,14 @@ class mxSelectionCellsHandler extends mxEventSource {
handler.mouseMove.apply(handler, args);
});
}
};
}
/**
* Function: mouseUp
*
* Redirects the given event to the handlers.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me];
@ -295,14 +295,14 @@ class mxSelectionCellsHandler extends mxEventSource {
handler.mouseUp.apply(handler, args);
});
}
};
}
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = () => {
destroy() {
this.graph.removeMouseListener(this);
if (this.refreshHandler != null) {
@ -311,7 +311,7 @@ class mxSelectionCellsHandler extends mxEventSource {
this.graph.getView().removeListener(this.refreshHandler);
this.refreshHandler = null;
}
};
}
}
export default mxSelectionCellsHandler;

64
src/mxgraph/handler/mxTooltipHandler.js
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxEvent from '../util/mxEvent';
import mxUtils from "../util/mxUtils";
import mxConstants from "../util/mxConstants";
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
class mxTooltipHandler {
/**
@ -96,9 +96,9 @@ class mxTooltipHandler {
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
@ -106,34 +106,34 @@ class mxTooltipHandler {
* Enables or disables event handling. This implementation
* updates <enabled>.
*/
setEnabled = enabled => {
setEnabled(enabled) {
this.enabled = enabled;
};
}
/**
* Function: isHideOnHover
*
* Returns <hideOnHover>.
*/
isHideOnHover = () => {
isHideOnHover() {
return this.hideOnHover;
};
}
/**
* Function: setHideOnHover
*
* Sets <hideOnHover>.
*/
setHideOnHover = value => {
setHideOnHover(value) {
this.hideOnHover = value;
};
}
/**
* Function: init
*
* Initializes the DOM nodes required for this tooltip handler.
*/
init = () => {
init() {
if (document.body != null) {
this.div = document.createElement('div');
this.div.className = 'mxTooltip';
@ -149,16 +149,16 @@ class mxTooltipHandler {
}
});
}
};
}
/**
* Function: getStateForEvent
*
* Returns the <mxCellState> to be used for showing a tooltip for this event.
*/
getStateForEvent = me => {
getStateForEvent(me) {
return me.getState();
};
}
/**
* Function: mouseDown
@ -167,17 +167,17 @@ class mxTooltipHandler {
* event all subsequent events of the gesture are redirected to this
* handler.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
this.reset(me, false);
this.hideTooltip();
};
}
/**
* Function: mouseMove
*
* Handles the event by updating the rubberband selection.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
if (me.getX() !== this.lastX || me.getY() !== this.lastY) {
this.reset(me, true);
const state = this.getStateForEvent(me);
@ -197,7 +197,7 @@ class mxTooltipHandler {
this.lastX = me.getX();
this.lastY = me.getY();
};
}
/**
* Function: mouseUp
@ -205,29 +205,29 @@ class mxTooltipHandler {
* Handles the event by resetting the tooltip timer or hiding the existing
* tooltip.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
this.reset(me, true);
this.hideTooltip();
};
}
/**
* Function: resetTimer
*
* Resets the timer.
*/
resetTimer = () => {
resetTimer() {
if (this.thread != null) {
window.clearTimeout(this.thread);
this.thread = null;
}
};
}
/**
* Function: reset
*
* Resets and/or restarts the timer to trigger the display of the tooltip.
*/
reset = (me, restart, state) => {
reset(me, restart, state) {
if (!this.ignoreTouchEvents || mxEvent.isMouseEvent(me.getEvent())) {
this.resetTimer();
state = state != null ? state : this.getStateForEvent(me);
@ -261,29 +261,29 @@ class mxTooltipHandler {
}, this.delay);
}
}
};
}
/**
* Function: hide
*
* Hides the tooltip and resets the timer.
*/
hide = () => {
hide() {
this.resetTimer();
this.hideTooltip();
};
}
/**
* Function: hideTooltip
*
* Hides the tooltip.
*/
hideTooltip = () => {
hideTooltip() {
if (this.div != null) {
this.div.style.visibility = 'hidden';
this.div.innerHTML = '';
}
};
}
/**
* Function: show
@ -291,7 +291,7 @@ class mxTooltipHandler {
* Shows the tooltip for the specified cell and optional index at the
* specified location (with a vertical offset of 10 pixels).
*/
show = (tip, x, y) => {
show(tip, x, y) {
if (!this.destroyed && tip != null && tip.length > 0) {
// Initializes the DOM nodes if required
if (this.div == null) {
@ -316,14 +316,14 @@ class mxTooltipHandler {
this.div.style.visibility = '';
mxUtils.fit(this.div);
}
};
}
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = () => {
destroy() {
if (!this.destroyed) {
this.graph.removeMouseListener(this);
mxEvent.release(this.div);
@ -335,7 +335,7 @@ class mxTooltipHandler {
this.destroyed = true;
this.div = null;
}
};
}
}
export default mxTooltipHandler;

242
src/mxgraph/handler/mxVertexHandler.js
View File

@ -10,9 +10,9 @@ import mxRectangleShape from '../shape/mxRectangleShape';
import mxImageShape from '../shape/mxImageShape';
import mxEllipse from '../shape/mxEllipse';
import mxPoint from '../util/mxPoint';
import mxUtils from "../util/mxUtils";
import mxClient from "../mxClient";
import mxGraphHandler from "./mxGraphHandler";
import mxUtils from '../util/mxUtils';
import mxClient from '../mxClient';
import mxGraphHandler from './mxGraphHandler';
class mxVertexHandler {
/**
@ -201,7 +201,7 @@ class mxVertexHandler {
*
* Initializes the shapes required for this vertex handler.
*/
init = () => {
init() {
this.graph = this.state.view.graph;
this.selectionBounds = this.getSelectionBounds(this.state);
this.bounds = new mxRectangle(
@ -229,7 +229,10 @@ class mxVertexHandler {
}
// Adds the sizer handles
if (this.graph.graphHandler.maxCells <= 0 || this.graph.getSelectionCount() < this.graph.graphHandler.maxCells) {
if (
this.graph.graphHandler.maxCells <= 0 ||
this.graph.getSelectionCount() < this.graph.graphHandler.maxCells
) {
const resizable = this.graph.isCellResizable(this.state.cell);
this.sizers = [];
@ -305,58 +308,59 @@ class mxVertexHandler {
if (this.constrainGroupByChildren) {
this.updateMinBounds();
}
};
}
/**
* Function: isRotationHandleVisible
*
* Returns true if the rotation handle should be showing.
*/
isRotationHandleVisible = () => {
isRotationHandleVisible() {
return (
this.graph.isEnabled() &&
this.rotationEnabled &&
this.graph.isCellRotatable(this.state.cell) &&
(this.graph.graphHandler.maxCells <= 0 || this.graph.getSelectionCount() < this.graph.graphHandler.maxCells)
(this.graph.graphHandler.maxCells <= 0 ||
this.graph.getSelectionCount() < this.graph.graphHandler.maxCells)
);
};
}
/**
* Function: isConstrainedEvent
*
* Returns true if the aspect ratio if the cell should be maintained.
*/
isConstrainedEvent = me => {
isConstrainedEvent(me) {
return (
mxEvent.isShiftDown(me.getEvent()) ||
this.state.style[mxConstants.STYLE_ASPECT] === 'fixed'
);
};
}
/**
* Function: isCenteredEvent
*
* Returns true if the center of the vertex should be maintained during the resize.
*/
isCenteredEvent = (state, me) => {
isCenteredEvent(state, me) {
return false;
};
}
/**
* Function: createCustomHandles
*
* Returns an array of custom handles. This implementation returns null.
*/
createCustomHandles = () => {
createCustomHandles() {
return null;
};
}
/**
* Function: updateMinBounds
*
* Initializes the shapes required for this vertex handler.
*/
updateMinBounds = () => {
updateMinBounds() {
const children = this.graph.getChildCells(this.state.cell);
if (children.length > 0) {
@ -376,7 +380,7 @@ class mxVertexHandler {
this.y0 = this.state.y / s - t.y;
}
}
};
}
/**
* Function: getSelectionBounds
@ -384,30 +388,30 @@ class mxVertexHandler {
* Returns the mxRectangle that defines the bounds of the selection
* border.
*/
getSelectionBounds = state => {
getSelectionBounds(state) {
return new mxRectangle(
Math.round(state.x),
Math.round(state.y),
Math.round(state.width),
Math.round(state.height)
);
};
}
/**
* Function: createParentHighlightShape
*
* Creates the shape used to draw the selection border.
*/
createParentHighlightShape = bounds => {
createParentHighlightShape(bounds) {
return this.createSelectionShape(bounds);
};
}
/**
* Function: createSelectionShape
*
* Creates the shape used to draw the selection border.
*/
createSelectionShape = bounds => {
createSelectionShape(bounds) {
const shape = new mxRectangleShape(
mxRectangle.fromRectangle(bounds),
null,
@ -417,34 +421,34 @@ class mxVertexHandler {
shape.isDashed = this.isSelectionDashed();
return shape;
};
}
/**
* Function: getSelectionColor
*
* Returns <mxConstants.VERTEX_SELECTION_COLOR>.
*/
getSelectionColor = () => {
getSelectionColor() {
return mxConstants.VERTEX_SELECTION_COLOR;
};
}
/**
* Function: getSelectionStrokeWidth
*
* Returns <mxConstants.VERTEX_SELECTION_STROKEWIDTH>.
*/
getSelectionStrokeWidth = () => {
getSelectionStrokeWidth() {
return mxConstants.VERTEX_SELECTION_STROKEWIDTH;
};
}
/**
* Function: isSelectionDashed
*
* Returns <mxConstants.VERTEX_SELECTION_DASHED>.
*/
isSelectionDashed = () => {
isSelectionDashed() {
return mxConstants.VERTEX_SELECTION_DASHED;
};
}
/**
* Function: createSizer
@ -452,7 +456,7 @@ class mxVertexHandler {
* Creates a sizer handle for the specified cursor and index and returns
* the new <mxRectangleShape> that represents the handle.
*/
createSizer = (cursor, index, size, fillColor) => {
createSizer(cursor, index, size, fillColor) {
size = size || mxConstants.HANDLE_SIZE;
const bounds = new mxRectangle(0, 0, size, size);
@ -486,7 +490,7 @@ class mxVertexHandler {
}
return sizer;
};
}
/**
* Function: isSizerVisible
@ -494,9 +498,9 @@ class mxVertexHandler {
* Returns true if the sizer for the given index is visible.
* This returns true for all given indices.
*/
isSizerVisible = index => {
isSizerVisible(index) {
return true;
};
}
/**
* Function: createSizerShape
@ -505,7 +509,7 @@ class mxVertexHandler {
* index. Only images and rectangles should be returned if support for HTML
* labels with not foreign objects is required.
*/
createSizerShape = (bounds, index, fillColor) => {
createSizerShape(bounds, index, fillColor) {
if (this.handleImage != null) {
bounds = new mxRectangle(
bounds.x,
@ -532,7 +536,7 @@ class mxVertexHandler {
fillColor || mxConstants.HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
);
};
}
/**
* Function: createBounds
@ -540,7 +544,7 @@ class mxVertexHandler {
* Helper method to create an <mxRectangle> around the given centerpoint
* with a width and height of 2*s or 6, if no s is given.
*/
moveSizerTo = (shape, x, y) => {
moveSizerTo(shape, x, y) {
if (shape != null) {
shape.bounds.x = Math.floor(x - shape.bounds.width / 2);
shape.bounds.y = Math.floor(y - shape.bounds.height / 2);
@ -550,7 +554,7 @@ class mxVertexHandler {
shape.redraw();
}
}
};
}
/**
* Function: getHandleForEvent
@ -558,7 +562,7 @@ class mxVertexHandler {
* Returns the index of the handle for the given event. This returns the index
* of the sizer from where the event originated or <mxEvent.LABEL_INDEX>.
*/
getHandleForEvent = me => {
getHandleForEvent(me) {
// Connection highlight may consume events before they reach sizer handle
const tol = !mxEvent.isMouseEvent(me.getEvent()) ? this.tolerance : 1;
const hit =
@ -624,7 +628,7 @@ class mxVertexHandler {
}
return null;
};
}
/**
* Function: isCustomHandleEvent
@ -632,9 +636,9 @@ class mxVertexHandler {
* Returns true if the given event allows custom handles to be changed. This
* implementation returns true.
*/
isCustomHandleEvent = me => {
isCustomHandleEvent(me) {
return true;
};
}
/**
* Function: mouseDown
@ -643,7 +647,7 @@ class mxVertexHandler {
* event all subsequent events of the gesture are redirected to this
* handler.
*/
mouseDown = (sender, me) => {
mouseDown(sender, me) {
if (!me.isConsumed() && this.graph.isEnabled()) {
const handle = this.getHandleForEvent(me);
@ -652,7 +656,7 @@ class mxVertexHandler {
me.consume();
}
}
};
}
/**
* Function: isLivePreviewBorder
@ -660,20 +664,20 @@ class mxVertexHandler {
* Called if <livePreview> is enabled to check if a border should be painted.
* This implementation returns true if the shape is transparent.
*/
isLivePreviewBorder = () => {
isLivePreviewBorder() {
return (
this.state.shape != null &&
this.state.shape.fill == null &&
this.state.shape.stroke == null
);
};
}
/**
* Function: start
*
* Starts the handling of the mouse gesture.
*/
start = (x, y, index) => {
start(x, y, index) {
if (this.selectionBorder != null) {
this.livePreviewActive =
this.livePreview &&
@ -768,14 +772,14 @@ class mxVertexHandler {
}
}
}
};
}
/**
* Function: createGhostPreview
*
* Starts the handling of the mouse gesture.
*/
createGhostPreview = () => {
createGhostPreview() {
const shape = this.graph.cellRenderer.createShape(this.state);
shape.init(this.graph.view.getOverlayPane());
shape.scale = this.state.view.scale;
@ -783,14 +787,14 @@ class mxVertexHandler {
shape.outline = true;
return shape;
};
}
/**
* Function: hideHandles
*
* Shortcut to <hideSizers>.
*/
setHandlesVisible = visible => {
setHandlesVisible(visible) {
this.handlesVisible = visible;
if (this.sizers != null) {
@ -804,7 +808,7 @@ class mxVertexHandler {
this.customHandles[i].setVisible(visible);
}
}
};
}
/**
* Function: hideSizers
@ -813,9 +817,9 @@ class mxVertexHandler {
*
* Starts the handling of the mouse gesture.
*/
hideSizers = () => {
hideSizers() {
this.setHandlesVisible(false);
};
}
/**
* Function: checkTolerance
@ -824,7 +828,7 @@ class mxVertexHandler {
* <mxGraph.tolerance>. If the event is a mouse event then the tolerance is
* ignored.
*/
checkTolerance = me => {
checkTolerance(me) {
if (this.inTolerance && this.startX != null && this.startY != null) {
if (
mxEvent.isMouseEvent(me.getEvent()) ||
@ -834,46 +838,46 @@ class mxVertexHandler {
this.inTolerance = false;
}
}
};
}
/**
* Function: updateHint
*
* Hook for subclassers do show details while the handler is active.
*/
updateHint = me => {};
updateHint(me) {}
/**
* Function: removeHint
*
* Hooks for subclassers to hide details when the handler gets inactive.
*/
removeHint = () => {};
removeHint() {}
/**
* Function: roundAngle
*
* Hook for rounding the angle. This uses Math.round.
*/
roundAngle = angle => {
roundAngle(angle) {
return Math.round(angle * 10) / 10;
};
}
/**
* Function: roundLength
*
* Hook for rounding the unscaled width or height. This uses Math.round.
*/
roundLength = length => {
roundLength(length) {
return Math.round(length * 100) / 100;
};
}
/**
* Function: mouseMove
*
* Handles the event by updating the preview.
*/
mouseMove = (sender, me) => {
mouseMove(sender, me) {
if (!me.isConsumed() && this.index != null) {
// Checks tolerance for ignoring single clicks
this.checkTolerance(me);
@ -930,23 +934,23 @@ class mxVertexHandler {
else if (!this.graph.isMouseDown && this.getHandleForEvent(me) != null) {
me.consume(false);
}
};
}
/**
* Function: isGhostPreview
*
* Returns true if a ghost preview should be used for custom handles.
*/
isGhostPreview = () => {
isGhostPreview() {
return this.state.view.graph.model.getChildCount(this.state.cell) > 0;
};
}
/**
* Function: moveLabel
*
* Moves the label.
*/
moveLabel = me => {
moveLabel(me) {
const point = new mxPoint(me.getGraphX(), me.getGraphY());
const tr = this.graph.view.translate;
const { scale } = this.graph.view;
@ -961,14 +965,14 @@ class mxVertexHandler {
? this.sizers.length - 2
: this.sizers.length - 1;
this.moveSizerTo(this.sizers[index], point.x, point.y);
};
}
/**
* Function: rotateVertex
*
* Rotates the vertex.
*/
rotateVertex = me => {
rotateVertex(me) {
const point = new mxPoint(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;
@ -1007,14 +1011,14 @@ class mxVertexHandler {
if (this.livePreviewActive) {
this.redrawHandles();
}
};
}
/**
* Function: resizeVertex
*
* Risizes the vertex.
*/
resizeVertex = me => {
resizeVertex(me) {
const ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY());
const alpha = mxUtils.toRadians(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
@ -1190,14 +1194,14 @@ class mxVertexHandler {
this.updateParentHighlight();
}
}
};
}
/**
* Function: updateLivePreview
*
* Repaints the live preview.
*/
updateLivePreview = me => {
updateLivePreview(me) {
// TODO: Apply child offset to children in live preview
const { scale } = this.graph.view;
const tr = this.graph.view.translate;
@ -1256,14 +1260,14 @@ class mxVertexHandler {
// Restores current state
this.state.setState(tempState);
};
}
/**
* Function: moveToFront
*
* Handles the event by applying the changes to the geometry.
*/
moveToFront = () => {
moveToFront() {
if (
(this.state.text != null &&
this.state.text.node != null &&
@ -1282,14 +1286,14 @@ class mxVertexHandler {
this.state.text.node.parentNode.appendChild(this.state.text.node);
}
}
};
}
/**
* Function: mouseUp
*
* Handles the event by applying the changes to the geometry.
*/
mouseUp = (sender, me) => {
mouseUp(sender, me) {
if (this.index != null && this.state != null) {
const point = new mxPoint(me.getGraphX(), me.getGraphY());
const { index } = this;
@ -1373,7 +1377,7 @@ class mxVertexHandler {
this.reset();
this.redrawHandles();
}
};
}
/**
* Function: isRecursiveResize
@ -1386,9 +1390,9 @@ class mxVertexHandler {
* the value of this state.
* me - the mouse event.
*/
isRecursiveResize = (state, me) => {
isRecursiveResize(state, me) {
return this.graph.isRecursiveResize(this.state);
};
}
/**
* Function: rotateClick
@ -1397,7 +1401,7 @@ class mxVertexHandler {
* This code is executed as part of the model transaction. This implementation
* is empty.
*/
rotateClick = () => {};
rotateClick() {}
/**
* Function: rotateCell
@ -1409,7 +1413,7 @@ class mxVertexHandler {
* cell - <mxCell> to be rotated.
* angle - Angle in degrees.
*/
rotateCell = (cell, angle, parent) => {
rotateCell(cell, angle, parent) {
if (angle !== 0) {
const model = this.graph.getModel();
@ -1442,14 +1446,14 @@ class mxVertexHandler {
}
}
}
};
}
/**
* Function: reset
*
* Resets the state of this handler.
*/
reset = () => {
reset() {
if (
this.sizers != null &&
this.index != null &&
@ -1517,7 +1521,7 @@ class mxVertexHandler {
this.handlesVisible = true;
this.unscaledBounds = null;
this.livePreviewActive = null;
};
}
/**
* Function: resizeCell
@ -1525,7 +1529,7 @@ class mxVertexHandler {
* Uses the given vector to change the bounds of the given cell
* in the graph using <mxGraph.resizeCell>.
*/
resizeCell = (cell, dx, dy, index, gridEnabled, constrained, recurse) => {
resizeCell(cell, dx, dy, index, gridEnabled, constrained, recurse) {
let geo = this.graph.model.getGeometry(cell);
if (geo != null) {
@ -1573,14 +1577,14 @@ class mxVertexHandler {
this.graph.resizeCell(cell, this.unscaledBounds, recurse);
}
}
};
}
/**
* Function: moveChildren
*
* Moves the children of the given cell by the given vector.
*/
moveChildren = (cell, dx, dy) => {
moveChildren(cell, dx, dy) {
const model = this.graph.getModel();
const childCount = model.getChildCount(cell);
@ -1594,7 +1598,7 @@ class mxVertexHandler {
model.setGeometry(child, geo);
}
}
};
}
/**
* Function: union
@ -1648,17 +1652,7 @@ class mxVertexHandler {
* };
* (end)
*/
union = (
bounds,
dx,
dy,
index,
gridEnabled,
scale,
tr,
constrained,
centered
) => {
union(bounds, dx, dy, index, gridEnabled, scale, tr, constrained, centered) {
gridEnabled =
gridEnabled != null
? gridEnabled && this.graph.gridEnabled
@ -1794,14 +1788,14 @@ class mxVertexHandler {
}
return result;
};
}
/**
* Function: redraw
*
* Redraws the handles and the preview.
*/
redraw = ignoreHandles => {
redraw(ignoreHandles) {
this.selectionBounds = this.getSelectionBounds(this.state);
this.bounds = new mxRectangle(
this.selectionBounds.x,
@ -1814,12 +1808,12 @@ class mxVertexHandler {
if (!ignoreHandles) {
this.redrawHandles();
}
};
}
/**
* Returns the padding to be used for drawing handles for the current <bounds>.
*/
getHandlePadding = () => {
getHandlePadding() {
// KNOWN: Tolerance depends on event type (eg. 0 for mouse events)
const result = new mxPoint(0, 0);
let tol = this.tolerance;
@ -1838,16 +1832,16 @@ class mxVertexHandler {
}
return result;
};
}
/**
* Function: getSizerBounds
*
* Returns the bounds used to paint the resize handles.
*/
getSizerBounds = () => {
getSizerBounds() {
return this.bounds;
};
}
/**
* Function: redrawHandles
@ -1867,7 +1861,7 @@ class mxVertexHandler {
* };
* (end)
*/
redrawHandles = () => {
redrawHandles() {
let s = this.getSizerBounds();
const tol = this.tolerance;
this.horizontalOffset = 0;
@ -2056,30 +2050,30 @@ class mxVertexHandler {
this.edgeHandlers[i].redraw();
}
}
};
}
/**
* Function: isCustomHandleVisible
*
* Returns true if the given custom handle is visible.
*/
isCustomHandleVisible = handle => {
isCustomHandleVisible(handle) {
return (
!this.graph.isEditing() && this.state.view.graph.getSelectionCount() === 1
);
};
}
/**
* Function: getRotationHandlePosition
*
* Returns an <mxPoint> that defines the rotation handle position.
*/
getRotationHandlePosition = () => {
getRotationHandlePosition() {
return new mxPoint(
this.bounds.x + this.bounds.width / 2,
this.bounds.y + this.rotationHandleVSpacing
);
};
}
/**
* Function: isParentHighlightVisible
@ -2087,18 +2081,18 @@ class mxVertexHandler {
* Returns true if the parent highlight should be visible. This implementation
* always returns true.
*/
isParentHighlightVisible = () => {
isParentHighlightVisible() {
return !this.graph.isCellSelected(
this.graph.model.getParent(this.state.cell)
);
};
}
/**
* Function: updateParentHighlight
*
* Updates the highlight of the parent if <parentHighlightEnabled> is true.
*/
updateParentHighlight = () => {
updateParentHighlight() {
if (!this.isDestroyed()) {
const visible = this.isParentHighlightVisible();
const parent = this.graph.model.getParent(this.state.cell);
@ -2150,14 +2144,14 @@ class mxVertexHandler {
}
}
}
};
}
/**
* Function: drawPreview
*
* Redraws the preview.
*/
drawPreview = () => {
drawPreview() {
if (this.preview != null) {
this.preview.bounds = this.bounds;
@ -2178,32 +2172,32 @@ class mxVertexHandler {
this.selectionBorder.bounds = this.getSelectionBorderBounds();
this.selectionBorder.redraw();
this.updateParentHighlight();
};
}
/**
* Function: getSelectionBorderBounds
*
* Returns the bounds for the selection border.
*/
getSelectionBorderBounds = () => {
getSelectionBorderBounds() {
return this.bounds;
};
}
/**
* Function: isDestroyed
*
* Returns true if this handler was destroyed or not initialized.
*/
isDestroyed = () => {
isDestroyed() {
return this.selectionBorder == null;
};
}
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = () => {
destroy() {
if (this.escapeHandler != null) {
this.state.view.graph.removeListener(this.escapeHandler);
this.escapeHandler = null;
@ -2254,7 +2248,7 @@ class mxVertexHandler {
this.customHandles = null;
}
};
}
}
export default mxVertexHandler;

9
src/mxgraph/index.txt
View File

@ -247,8 +247,7 @@ Functions:
follows.
(code)
isCellSelectable = (cell)=>
{
isCellSelectable(cell) {
let selectable = isSelectable.apply(this, arguments);
let geo = this.model.getGeometry(cell);
@ -263,8 +262,7 @@ Functions:
superclass as follows, which is another way of <20>subclassing<6E> in JavaScript.
(code)
isCellSelectable = (cell)=>
{
isCellSelectable(cell) {
let geo = this.model.getGeometry(cell);
return selectable &&
(geo == null ||
@ -280,8 +278,7 @@ Functions:
representation of the graph model:
(code)
getXml = ()=>
{
getXml() {
let enc = new mxCodec();
return enc.encode(this.getModel());
}

20
src/mxgraph/io/mxCellCodec.js
View File

@ -61,32 +61,32 @@ class mxCellCodec extends mxObjectCodec {
*
* Returns true since this is a cell codec.
*/
isCellCodec = () => {
isCellCodec() {
return true;
};
}
/**
* Overidden to disable conversion of value to number.
*/
isNumericAttribute = (dec, attr, obj) => {
isNumericAttribute(dec, attr, obj) {
return (
attr.nodeName !== 'value' && super.isNumericAttribute(dec, attr, obj)
);
};
}
/**
* Function: isExcluded
*
* Excludes user objects that are XML nodes.
*/
isExcluded = (obj, attr, value, isWrite) => {
isExcluded(obj, attr, value, isWrite) {
return (
super.isExcluded(obj, attr, value, isWrite) ||
(isWrite &&
attr === 'value' &&
value.nodeType === mxConstants.NODETYPE_ELEMENT)
);
};
}
/**
* Function: afterEncode
@ -94,7 +94,7 @@ class mxCellCodec extends mxObjectCodec {
* Encodes an <mxCell> and wraps the XML up inside the
* XML of the user object (inversion).
*/
afterEncode = (enc, obj, node) => {
afterEncode(enc, obj, node) {
if (
obj.value != null &&
obj.value.nodeType === mxConstants.NODETYPE_ELEMENT
@ -114,7 +114,7 @@ class mxCellCodec extends mxObjectCodec {
}
return node;
};
}
/**
* Function: beforeDecode
@ -122,7 +122,7 @@ class mxCellCodec extends mxObjectCodec {
* Decodes an <mxCell> and uses the enclosing XML node as
* the user object for the cell (inversion).
*/
beforeDecode = (dec, node, obj) => {
beforeDecode(dec, node, obj) {
let inner = node.cloneNode(true);
const classname = this.getName();
@ -180,7 +180,7 @@ class mxCellCodec extends mxObjectCodec {
}
return inner;
};
}
}
mxCodecRegistry.register(new mxCellCodec());

20
src/mxgraph/io/mxChildChangeCodec.js
View File

@ -43,20 +43,20 @@ class mxChildChangeCodec extends mxObjectCodec {
* child as an attribute rather than a child node, in
* which case it's always a reference.
*/
isReference = (obj, attr, value, isWrite) => {
isReference(obj, attr, value, isWrite) {
if (attr === 'child' && (!isWrite || obj.model.contains(obj.previous))) {
return true;
}
return mxUtils.indexOf(this.idrefs, attr) >= 0;
};
}
/**
* Function: isExcluded
*
* Excludes references to parent or previous if not in the model.
*/
isExcluded = (obj, attr, value, write) => {
isExcluded(obj, attr, value, write) {
return (
super.isExcluded(obj, attr, value, write) ||
(write &&
@ -64,7 +64,7 @@ class mxChildChangeCodec extends mxObjectCodec {
(attr === 'previous' || attr === 'parent') &&
!obj.model.contains(value))
);
};
}
/**
* Function: afterEncode
@ -72,7 +72,7 @@ class mxChildChangeCodec extends mxObjectCodec {
* Encodes the child recusively and adds the result
* to the given node.
*/
afterEncode = (enc, obj, node) => {
afterEncode(enc, obj, node) {
if (this.isReference(obj, 'child', obj.child, true)) {
// Encodes as reference (id)
node.setAttribute('child', enc.getId(obj.child));
@ -86,7 +86,7 @@ class mxChildChangeCodec extends mxObjectCodec {
}
return node;
};
}
/**
* Function: beforeDecode
@ -94,7 +94,7 @@ class mxChildChangeCodec extends mxObjectCodec {
* Decodes the any child nodes as using the respective
* codec from the registry.
*/
beforeDecode = (dec, node, obj) => {
beforeDecode(dec, node, obj) {
if (
node.firstChild != null &&
node.firstChild.nodeType === mxConstants.NODETYPE_ELEMENT
@ -134,14 +134,14 @@ class mxChildChangeCodec extends mxObjectCodec {
}
return node;
};
}
/**
* Function: afterDecode
*
* Restores object state in the child change.
*/
afterDecode = (dec, node, obj) => {
afterDecode(dec, node, obj) {
// Cells are decoded here after a complete transaction so the previous
// parent must be restored on the cell for the case where the cell was
// added. This is needed for the local model to identify the cell as a
@ -161,7 +161,7 @@ class mxChildChangeCodec extends mxObjectCodec {
}
return obj;
};
}
}
mxCodecRegistry.register(new mxChildChangeCodec());

60
src/mxgraph/io/mxCodec.js
View File

@ -160,11 +160,11 @@ class mxCodec {
* id - ID for the object to be associated with.
* obj - Object to be associated with the ID.
*/
putObject = (id, obj) => {
putObject(id, obj) {
this.objects[id] = obj;
return obj;
};
}
/**
* Function: getObject
@ -174,7 +174,7 @@ class mxCodec {
* object. If no object is found, then the element with the respective ID
* from the document is parsed using <decode>.
*/
getObject = id => {
getObject(id) {
let obj = null;
if (id != null) {
@ -194,7 +194,7 @@ class mxCodec {
}
return obj;
};
}
/**
* Function: lookup
@ -216,9 +216,9 @@ class mxCodec {
*
* id - ID of the object to be returned.
*/
lookup = id => {
lookup(id) {
return null;
};
}
/**
* Function: getElementById
@ -229,11 +229,11 @@ class mxCodec {
*
* id - String that contains the ID.
*/
getElementById = id => {
getElementById(id) {
this.updateElements();
return this.elements[id];
};
}
/**
* Function: updateElements
@ -244,7 +244,7 @@ class mxCodec {
*
* id - String that contains the ID.
*/
updateElements = () => {
updateElements() {
if (this.elements == null) {
this.elements = {};
@ -252,14 +252,14 @@ class mxCodec {
this.addElement(this.document.documentElement);
}
}
};
}
/**
* Function: addElement
*
* Adds the given element to <elements> if it has an ID.
*/
addElement = node => {
addElement(node) {
if (node.nodeType === mxConstants.NODETYPE_ELEMENT) {
const id = node.getAttribute('id');
@ -278,7 +278,7 @@ class mxCodec {
this.addElement(node);
node = node.nextSibling;
}
};
}
/**
* Function: getId
@ -293,7 +293,7 @@ class mxCodec {
*
* obj - Object to return the ID for.
*/
getId = obj => {
getId(obj) {
let id = null;
if (obj != null) {
@ -314,7 +314,7 @@ class mxCodec {
}
return id;
};
}
/**
* Function: reference
@ -337,9 +337,9 @@ class mxCodec {
*
* obj - Object whose ID should be returned.
*/
reference = obj => {
reference(obj) {
return null;
};
}
/**
* Function: encode
@ -351,7 +351,7 @@ class mxCodec {
*
* obj - Object to be encoded.
*/
encode = obj => {
encode(obj) {
let node = null;
if (obj != null && obj.constructor != null) {
@ -371,7 +371,7 @@ class mxCodec {
}
return node;
};
}
/**
* Function: decode
@ -389,7 +389,7 @@ class mxCodec {
* node - XML node to be decoded.
* into - Optional object to be decodec into.
*/
decode = (node, into) => {
decode(node, into) {
this.updateElements();
let obj = null;
@ -413,7 +413,7 @@ class mxCodec {
}
return obj;
};
}
/**
* Function: encodeCell
@ -435,7 +435,7 @@ class mxCodec {
* includeChildren - Optional boolean indicating if the
* function should include all descendents. Default is true.
*/
encodeCell = (cell, node, includeChildren) => {
encodeCell(cell, node, includeChildren) {
node.appendChild(this.encode(cell));
if (includeChildren == null || includeChildren) {
@ -445,7 +445,7 @@ class mxCodec {
this.encodeCell(cell.getChildAt(i), node);
}
}
};
}
/**
* Function: isCellCodec
@ -454,13 +454,13 @@ class mxCodec {
* <mxCellCodec.isCellCodec> to check if the codec is of the
* given type.
*/
isCellCodec = codec => {
isCellCodec(codec) {
if (codec != null && typeof codec.isCellCodec === 'function') {
return codec.isCellCodec();
}
return false;
};
}
/**
* Function: decodeCell
@ -479,7 +479,7 @@ class mxCodec {
* and insertEdge on the parent and terminals, respectively.
* Default is true.
*/
decodeCell = (node, restoreStructures) => {
decodeCell(node, restoreStructures) {
restoreStructures = restoreStructures != null ? restoreStructures : true;
let cell = null;
@ -513,14 +513,14 @@ class mxCodec {
}
return cell;
};
}
/**
* Function: insertIntoGraph
*
* Inserts the given cell into its parent and terminal cells.
*/
insertIntoGraph = cell => {
insertIntoGraph(cell) {
const { parent } = cell;
const source = cell.getTerminal(true);
const target = cell.getTerminal(false);
@ -545,7 +545,7 @@ class mxCodec {
if (target != null) {
target.insertEdge(cell, false);
}
};
}
/**
* Function: setAttribute
@ -560,11 +560,11 @@ class mxCodec {
* attributes - Attributename to be set.
* value - New value of the attribute.
*/
setAttribute = (node, attribute, value) => {
setAttribute(node, attribute, value) {
if (attribute != null && value != null) {
node.setAttribute(attribute, value);
}
};
}
}
export default mxCodec;

8
src/mxgraph/io/mxDefaultKeyHandlerCodec.js
View File

@ -26,9 +26,9 @@ class mxDefaultKeyHandlerCodec extends mxObjectCodec {
*
* Returns null.
*/
encode = (enc, obj) => {
encode(enc, obj) {
return null;
};
}
/**
* Function: decode
@ -62,7 +62,7 @@ class mxDefaultKeyHandlerCodec extends mxObjectCodec {
* See also: <mxDefaultKeyHandler.bindAction>,
* http://www.js-examples.com/page/tutorials__key_codes.html
*/
decode = (dec, node, into) => {
decode(dec, node, into) {
if (into != null) {
const { editor } = into;
node = node.firstChild;
@ -81,7 +81,7 @@ class mxDefaultKeyHandlerCodec extends mxObjectCodec {
}
return into;
};
}
}
mxCodecRegistry.register(new mxDefaultKeyHandlerCodec());

8
src/mxgraph/io/mxDefaultPopupMenuCodec.js
View File

@ -28,16 +28,16 @@ class mxDefaultPopupMenuCodec extends mxObjectCodec {
*
* Returns null.
*/
encode = (enc, obj) => {
encode(enc, obj) {
return null;
};
}
/**
* Function: decode
*
* Uses the given node as the config for <mxDefaultPopupMenu>.
*/
decode = (dec, node, into) => {
decode(dec, node, into) {
const inc = node.getElementsByTagName('include')[0];
if (inc != null) {
@ -47,7 +47,7 @@ class mxDefaultPopupMenuCodec extends mxObjectCodec {
}
return into;
};
}
}
mxCodecRegistry.register(new mxDefaultPopupMenuCodec());

8
src/mxgraph/io/mxDefaultToolbarCodec.js
View File

@ -26,9 +26,9 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
*
* Returns null.
*/
encode = (enc, obj) => {
encode(enc, obj) {
return null;
};
}
/**
* Function: decode
@ -122,7 +122,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
* </mxDefaultToolbar>
* (end)
*/
decode = (dec, node, into) => {
decode(dec, node, into) {
if (into != null) {
const { editor } = into;
node = node.firstChild;
@ -288,7 +288,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
}
return into;
};
}
}
mxCodecRegistry.register(new mxDefaultToolbarCodec());

16
src/mxgraph/io/mxEditorCodec.js
View File

@ -91,7 +91,7 @@ class mxEditorCodec extends mxObjectCodec {
* </ui>
* (end)
*/
afterDecode = (dec, node, obj) => {
afterDecode(dec, node, obj) {
// Assigns the specified templates for edges
const defaultEdge = node.getAttribute('defaultEdge');
@ -109,14 +109,14 @@ class mxEditorCodec extends mxObjectCodec {
}
return obj;
};
}
/**
* Function: decodeChild
*
* Overrides decode child to handle special child nodes.
*/
decodeChild = (dec, child, obj) => {
decodeChild(dec, child, obj) {
if (child.nodeName === 'Array') {
const role = child.getAttribute('as');
@ -130,14 +130,14 @@ class mxEditorCodec extends mxObjectCodec {
}
super.decodeChild.apply(this, [dec, child, obj]);
};
}
/**
* Function: decodeUi
*
* Decodes the ui elements from the given node.
*/
decodeUi = (dec, node, editor) => {
decodeUi(dec, node, editor) {
let tmp = node.firstChild;
while (tmp != null) {
if (tmp.nodeName === 'add') {
@ -195,14 +195,14 @@ class mxEditorCodec extends mxObjectCodec {
tmp = tmp.nextSibling;
}
};
}
/**
* Function: decodeTemplates
*
* Decodes the cells from the given node as templates.
*/
decodeTemplates = (dec, node, editor) => {
decodeTemplates(dec, node, editor) {
if (editor.templates == null) {
editor.templates = [];
}
@ -225,7 +225,7 @@ class mxEditorCodec extends mxObjectCodec {
editor.templates[name] = dec.decodeCell(child);
}
}
};
}
}
mxCodecRegistry.register(new mxEditorCodec());

4
src/mxgraph/io/mxGenericChangeCodec.js
View File

@ -51,7 +51,7 @@ class mxGenericChangeCodec extends mxObjectCodec {
*
* Restores the state by assigning the previous value.
*/
afterDecode = (dec, node, obj) => {
afterDecode(dec, node, obj) {
// Allows forward references in sessions. This is a workaround
// for the sequence of edits in mxGraph.moveCells and cellsAdded.
if (mxUtils.isNode(obj.cell)) {
@ -60,7 +60,7 @@ class mxGenericChangeCodec extends mxObjectCodec {
obj.previous = obj[this.variable];
return obj;
};
}
}
// Registers the codecs

8
src/mxgraph/io/mxGraphViewCodec.js
View File

@ -30,9 +30,9 @@ class mxGraphViewCodec extends mxObjectCodec {
* starting at the model's root. This returns the
* top-level graph node of the recursive encoding.
*/
encode = (enc, view) => {
encode(enc, view) {
return this.encodeCell(enc, view, view.graph.getModel().getRoot());
};
}
/**
* Function: encodeCell
@ -54,7 +54,7 @@ class mxGraphViewCodec extends mxObjectCodec {
* values from the cell style are added as attribute
* values to the node.
*/
encodeCell = (enc, view, cell) => {
encodeCell(enc, view, cell) {
const model = view.graph.getModel();
const state = view.getState(cell);
const parent = model.getParent(cell);
@ -167,7 +167,7 @@ class mxGraphViewCodec extends mxObjectCodec {
}
}
return node;
};
}
}
mxCodecRegistry.register(new mxGraphViewCodec());

12
src/mxgraph/io/mxModelCodec.js
View File

@ -27,24 +27,24 @@ class mxModelCodec extends mxObjectCodec {
* cell nodes as produced by the <mxCellCodec>. The sequence is
* wrapped-up in a node with the name root.
*/
encodeObject = (enc, obj, node) => {
encodeObject(enc, obj, node) {
const rootNode = enc.document.createElement('root');
enc.encodeCell(obj.getRoot(), rootNode);
node.appendChild(rootNode);
};
}
/**
* Function: decodeChild
*
* Overrides decode child to handle special child nodes.
*/
decodeChild = (dec, child, obj) => {
decodeChild(dec, child, obj) {
if (child.nodeName === 'root') {
this.decodeRoot(dec, child, obj);
} else {
decodeChild.apply(this, [dec, child, obj]);
}
};
}
/**
* Function: decodeRoot
@ -52,7 +52,7 @@ class mxModelCodec extends mxObjectCodec {
* Reads the cells into the graph model. All cells
* are children of the root element in the node.
*/
decodeRoot = (dec, root, model) => {
decodeRoot(dec, root, model) {
let rootCell = null;
let tmp = root.firstChild;
@ -70,7 +70,7 @@ class mxModelCodec extends mxObjectCodec {
if (rootCell != null) {
model.setRoot(rootCell);
}
};
}
}
mxCodecRegistry.register(new mxModelCodec());

120
src/mxgraph/io/mxObjectCodec.js
View File

@ -269,18 +269,18 @@ class mxObjectCodec {
* if that is different than what this returns. The default implementation
* returns the classname of the template class.
*/
getName = () => {
getName() {
return mxUtils.getFunctionName(this.template.constructor);
};
}
/**
* Function: cloneTemplate
*
* Returns a new instance of the template for this codec.
*/
cloneTemplate = () => {
cloneTemplate() {
return new this.template.constructor();
};
}
/**
* Function: getFieldName
@ -290,7 +290,7 @@ class mxObjectCodec {
* the input if there is no reverse mapping for the
* given name.
*/
getFieldName = attributename => {
getFieldName(attributename) {
if (attributename != null) {
const mapped = this.reverse[attributename];
@ -300,7 +300,7 @@ class mxObjectCodec {
}
return attributename;
};
}
/**
* Function: getAttributeName
@ -310,7 +310,7 @@ class mxObjectCodec {
* the input if there is no mapping for the
* given name.
*/
getAttributeName = fieldname => {
getAttributeName(fieldname) {
if (fieldname != null) {
const mapped = this.mapping[fieldname];
@ -320,7 +320,7 @@ class mxObjectCodec {
}
return fieldname;
};
}
/**
* Function: isExcluded
@ -337,12 +337,12 @@ class mxObjectCodec {
* write - Boolean indicating if the field is being encoded or decoded.
* Write is true if the field is being encoded, else it is being decoded.
*/
isExcluded = (obj, attr, value, write) => {
isExcluded(obj, attr, value, write) {
return (
attr == mxObjectIdentity.FIELD_NAME ||
mxUtils.indexOf(this.exclude, attr) >= 0
);
};
}
/**
* Function: isReference
@ -359,9 +359,9 @@ class mxObjectCodec {
* write - Boolean indicating if the field is being encoded or decoded.
* Write is true if the field is being encoded, else it is being decoded.
*/
isReference = (obj, attr, value, write) => {
isReference(obj, attr, value, write) {
return mxUtils.indexOf(this.idrefs, attr) >= 0;
};
}
/**
* Function: encode
@ -405,14 +405,14 @@ class mxObjectCodec {
* enc - <mxCodec> that controls the encoding process.
* obj - Object to be encoded.
*/
encode = (enc, obj) => {
encode(enc, obj) {
const node = enc.document.createElement(this.getName());
obj = this.beforeEncode(enc, obj, node);
this.encodeObject(enc, obj, node);
return this.afterEncode(enc, obj, node);
};
}
/**
* Function: encodeObject
@ -426,7 +426,7 @@ class mxObjectCodec {
* obj - Object to be encoded.
* node - XML node that contains the encoded object.
*/
encodeObject = (enc, obj, node) => {
encodeObject(enc, obj, node) {
enc.setAttribute(node, 'id', enc.getId(obj));
for (const i in obj) {
@ -441,7 +441,7 @@ class mxObjectCodec {
this.encodeValue(enc, obj, name, value, node);
}
}
};
}
/**
* Function: encodeValue
@ -458,7 +458,7 @@ class mxObjectCodec {
* value - Value of the property to be encoded.
* node - XML node that contains the encoded object.
*/
encodeValue = (enc, obj, name, value, node) => {
encodeValue(enc, obj, name, value, node) {
if (value != null) {
if (this.isReference(obj, name, value, true)) {
const tmp = enc.getId(value);
@ -482,7 +482,7 @@ class mxObjectCodec {
this.writeAttribute(enc, obj, name, value, node);
}
}
};
}
/**
* Function: writeAttribute
@ -490,20 +490,20 @@ class mxObjectCodec {
* Writes the given value into node using <writePrimitiveAttribute>
* or <writeComplexAttribute> depending on the type of the value.
*/
writeAttribute = (enc, obj, name, value, node) => {
writeAttribute(enc, obj, name, value, node) {
if (typeof value !== 'object' /* primitive type */) {
this.writePrimitiveAttribute(enc, obj, name, value, node);
} /* complex type */ else {
this.writeComplexAttribute(enc, obj, name, value, node);
}
};
}
/**
* Function: writePrimitiveAttribute
*
* Writes the given value as an attribute of the given node.
*/
writePrimitiveAttribute = (enc, obj, name, value, node) => {
writePrimitiveAttribute(enc, obj, name, value, node) {
value = this.convertAttributeToXml(enc, obj, name, value, node);
if (name == null) {
@ -519,14 +519,14 @@ class mxObjectCodec {
} else if (typeof value !== 'function') {
enc.setAttribute(node, name, value);
}
};
}
/**
* Function: writeComplexAttribute
*
* Writes the given value as a child node of the given node.
*/
writeComplexAttribute = (enc, obj, name, value, node) => {
writeComplexAttribute(enc, obj, name, value, node) {
const child = enc.encode(value);
if (child != null) {
@ -540,7 +540,7 @@ class mxObjectCodec {
`mxObjectCodec.encode: No node for ${this.getName()}.${name}: ${value}`
);
}
};
}
/**
* Function: convertAttributeToXml
@ -555,7 +555,7 @@ class mxObjectCodec {
* name - Name of the attribute to be converted.
* value - Value to be converted.
*/
convertAttributeToXml = (enc, obj, name, value) => {
convertAttributeToXml(enc, obj, name, value) {
// Makes sure to encode boolean values as numeric values
if (this.isBooleanAttribute(enc, obj, name, value)) {
// Checks if the value is true (do not use the value as is, because
@ -564,7 +564,7 @@ class mxObjectCodec {
}
return value;
};
}
/**
* Function: isBooleanAttribute
@ -578,11 +578,11 @@ class mxObjectCodec {
* name - Name of the attribute to be converted.
* value - Value of the attribute to be converted.
*/
isBooleanAttribute = (enc, obj, name, value) => {
isBooleanAttribute(enc, obj, name, value) {
return (
typeof value.length === 'undefined' && (value == true || value == false)
);
};
}
/**
* Function: convertAttributeFromXml
@ -596,7 +596,7 @@ class mxObjectCodec {
* attr - XML attribute to be converted.
* obj - Objec to convert the attribute for.
*/
convertAttributeFromXml = (dec, attr, obj) => {
convertAttributeFromXml(dec, attr, obj) {
let { value } = attr;
if (this.isNumericAttribute(dec, attr, obj)) {
@ -608,7 +608,7 @@ class mxObjectCodec {
}
return value;
};
}
/**
* Function: isNumericAttribute
@ -621,7 +621,7 @@ class mxObjectCodec {
* attr - XML attribute to be converted.
* obj - Objec to convert the attribute for.
*/
isNumericAttribute = (dec, attr, obj) => {
isNumericAttribute(dec, attr, obj) {
// Handles known numeric attributes for generic objects
const result =
(obj.constructor === mxGeometry &&
@ -634,7 +634,7 @@ class mxObjectCodec {
mxUtils.isNumeric(attr.value);
return result;
};
}
/**
* Function: beforeEncode
@ -650,9 +650,9 @@ class mxObjectCodec {
* obj - Object to be encoded.
* node - XML node to encode the object into.
*/
beforeEncode = (enc, obj, node) => {
beforeEncode(enc, obj, node) {
return obj;
};
}
/**
* Function: afterEncode
@ -669,9 +669,9 @@ class mxObjectCodec {
* obj - Object to be encoded.
* node - XML node that represents the default encoding.
*/
afterEncode = (enc, obj, node) => {
afterEncode(enc, obj, node) {
return node;
};
}
/**
* Function: decode
@ -727,7 +727,7 @@ class mxObjectCodec {
* node - XML node to be decoded.
* into - Optional objec to encode the node into.
*/
decode = (dec, node, into) => {
decode(dec, node, into) {
const id = node.getAttribute('id');
let obj = dec.objects[id];
@ -743,7 +743,7 @@ class mxObjectCodec {
this.decodeNode(dec, node, obj);
return this.afterDecode(dec, node, obj);
};
}
/**
* Function: decodeNode
@ -756,12 +756,12 @@ class mxObjectCodec {
* node - XML node to be decoded.
* obj - Objec to encode the node into.
*/
decodeNode = (dec, node, obj) => {
decodeNode(dec, node, obj) {
if (node != null) {
this.decodeAttributes(dec, node, obj);
this.decodeChildren(dec, node, obj);
}
};
}
/**
* Function: decodeAttributes
@ -774,7 +774,7 @@ class mxObjectCodec {
* node - XML node to be decoded.
* obj - Objec to encode the node into.
*/
decodeAttributes = (dec, node, obj) => {
decodeAttributes(dec, node, obj) {
const attrs = node.attributes;
if (attrs != null) {
@ -782,7 +782,7 @@ class mxObjectCodec {
this.decodeAttribute(dec, attrs[i], obj);
}
}
};
}
/**
* Function: isIgnoredAttribute
@ -796,9 +796,9 @@ class mxObjectCodec {
* attr - XML attribute to be decoded.
* obj - Objec to encode the attribute into.
*/
isIgnoredAttribute = (dec, attr, obj) => {
isIgnoredAttribute(dec, attr, obj) {
return attr.nodeName === 'as' || attr.nodeName === 'id';
};
}
/**
* Function: decodeAttribute
@ -811,7 +811,7 @@ class mxObjectCodec {
* attr - XML attribute to be decoded.
* obj - Objec to encode the attribute into.
*/
decodeAttribute = (dec, attr, obj) => {
decodeAttribute(dec, attr, obj) {
if (!this.isIgnoredAttribute(dec, attr, obj)) {
const name = attr.nodeName;
@ -840,7 +840,7 @@ class mxObjectCodec {
obj[name] = value;
}
}
};
}
/**
* Function: decodeChildren
@ -853,7 +853,7 @@ class mxObjectCodec {
* node - XML node to be decoded.
* obj - Objec to encode the node into.
*/
decodeChildren = (dec, node, obj) => {
decodeChildren(dec, node, obj) {
let child = node.firstChild;
while (child != null) {
@ -868,7 +868,7 @@ class mxObjectCodec {
child = tmp;
}
};
}
/**
* Function: decodeChild
@ -881,7 +881,7 @@ class mxObjectCodec {
* child - XML child element to be decoded.
* obj - Objec to encode the node into.
*/
decodeChild = (dec, child, obj) => {
decodeChild(dec, child, obj) {
const fieldname = this.getFieldName(child.getAttribute('as'));
if (fieldname == null || !this.isExcluded(obj, fieldname, child, false)) {
@ -904,7 +904,7 @@ class mxObjectCodec {
throw new Error(`${e.message} for ${child.nodeName}`);
}
}
};
}
/**
* Function: getFieldTemplate
@ -916,7 +916,7 @@ class mxObjectCodec {
* required to override this to return the correct collection instance
* based on the encoded child.
*/
getFieldTemplate = (obj, fieldname, child) => {
getFieldTemplate(obj, fieldname, child) {
let template = obj[fieldname];
// Non-empty arrays are replaced completely
@ -925,7 +925,7 @@ class mxObjectCodec {
}
return template;
};
}
/**
* Function: addObjectValue
@ -937,7 +937,7 @@ class mxObjectCodec {
* collection. For strongly typed languages it may be required to
* override this with the correct code to add an entry to an object.
*/
addObjectValue = (obj, fieldname, value, template) => {
addObjectValue(obj, fieldname, value, template) {
if (value != null && value !== template) {
if (fieldname != null && fieldname.length > 0) {
obj[fieldname] = value;
@ -946,7 +946,7 @@ class mxObjectCodec {
}
// mxLog.debug('Decoded '+mxUtils.getFunctionName(obj.constructor)+'.'+fieldname+': '+value);
}
};
}
/**
* Function: processInclude
@ -961,7 +961,7 @@ class mxObjectCodec {
* node - XML node to be checked.
* into - Optional object to pass-thru to the codec.
*/
processInclude = (dec, node, into) => {
processInclude(dec, node, into) {
if (node.nodeName === 'include') {
const name = node.getAttribute('name');
@ -981,7 +981,7 @@ class mxObjectCodec {
}
return false;
};
}
/**
* Function: beforeDecode
@ -1001,9 +1001,9 @@ class mxObjectCodec {
* node - XML node to be decoded.
* obj - Object to encode the node into.
*/
beforeDecode = (dec, node, obj) => {
beforeDecode(dec, node, obj) {
return node;
};
}
/**
* Function: afterDecode
@ -1019,9 +1019,9 @@ class mxObjectCodec {
* node - XML node to be decoded.
* obj - Object that represents the default decoding.
*/
afterDecode = (dec, node, obj) => {
afterDecode(dec, node, obj) {
return obj;
};
}
}
export default mxObjectCodec;

14
src/mxgraph/io/mxRootChangeCodec.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxRootChange from 'FIXME';
import mxRootChange from '../model/atomic_changes/mxRootChange';
import mxCodecRegistry from './mxCodecRegistry';
class mxRootChangeCodec extends mxObjectCodec {
@ -30,11 +30,11 @@ class mxRootChangeCodec extends mxObjectCodec {
*
* Encodes the child recursively.
*/
afterEncode = (enc, obj, node) => {
afterEncode(enc, obj, node) {
enc.encodeCell(obj.root, node);
return node;
};
}
/**
* Function: beforeDecode
@ -42,7 +42,7 @@ class mxRootChangeCodec extends mxObjectCodec {
* Decodes the optional children as cells
* using the respective decoder.
*/
beforeDecode = (dec, node, obj) => {
beforeDecode(dec, node, obj) {
if (
node.firstChild != null &&
node.firstChild.nodeType === mxConstants.NODETYPE_ELEMENT
@ -66,18 +66,18 @@ class mxRootChangeCodec extends mxObjectCodec {
}
return node;
};
}
/**
* Function: afterDecode
*
* Restores the state by assigning the previous value.
*/
afterDecode = (dec, node, obj) => {
afterDecode(dec, node, obj) {
obj.previous = obj.root;
return obj;
};
}
}
mxCodecRegistry.register(new mxRootChangeCodec());

12
src/mxgraph/io/mxStylesheetCodec.js
View File

@ -35,7 +35,7 @@ class mxStylesheetCodec extends mxObjectCodec {
* Encodes a stylesheet. See <decode> for a description of the
* format.
*/
encode = (enc, obj) => {
encode(enc, obj) {
const node = enc.document.createElement(this.getName());
for (const i in obj.styles) {
@ -63,14 +63,14 @@ class mxStylesheetCodec extends mxObjectCodec {
}
return node;
};
}
/**
* Function: getStringValue
*
* Returns the string for encoding the given value.
*/
getStringValue = (key, value) => {
getStringValue(key, value) {
const type = typeof value;
if (type === 'function') {
@ -80,7 +80,7 @@ class mxStylesheetCodec extends mxObjectCodec {
}
return value;
};
}
/**
* Function: decode
@ -123,7 +123,7 @@ class mxStylesheetCodec extends mxObjectCodec {
* </mxStylesheet>
* (end)
*/
decode = (dec, node, into) => {
decode(dec, node, into) {
const obj = into || new this.template.constructor();
const id = node.getAttribute('id');
@ -194,7 +194,7 @@ class mxStylesheetCodec extends mxObjectCodec {
}
return obj;
};
}
}
mxCodecRegistry.register(new mxStylesheetCodec());

4
src/mxgraph/io/mxTerminalChangeCodec.js
View File

@ -34,11 +34,11 @@ class mxTerminalChangeCodec extends mxObjectCodec {
*
* Restores the state by assigning the previous value.
*/
afterDecode = (dec, node, obj) => {
afterDecode(dec, node, obj) {
obj.previous = obj.terminal;
return obj;
};
}
}
mxCodecRegistry.register(new mxTerminalChangeCodec());

4
src/mxgraph/layout/WeightedCellSorter.js
View File

@ -55,7 +55,7 @@ class WeightedCellSorter {
*
* Compares two WeightedCellSorters.
*/
compare = (a, b) => {
compare(a, b) {
if (a != null && b != null) {
if (b.weightedValue > a.weightedValue) {
return -1;
@ -69,7 +69,7 @@ class WeightedCellSorter {
return 1;
}
return 0;
};
}
}
export default WeightedCellSorter;

36
src/mxgraph/layout/hierarchical/model/mxGraphAbstractHierarchyCell.js
View File

@ -93,74 +93,74 @@ class mxGraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer up
*/
getNextLayerConnectedCells = layer => {
getNextLayerConnectedCells(layer) {
return null;
};
}
/**
* Function: getPreviousLayerConnectedCells
*
* Returns the cells this cell connects to on the next layer down
*/
getPreviousLayerConnectedCells = layer => {
getPreviousLayerConnectedCells(layer) {
return null;
};
}
/**
* Function: isEdge
*
* Returns whether or not this cell is an edge
*/
isEdge = () => {
isEdge() {
return false;
};
}
/**
* Function: isVertex
*
* Returns whether or not this cell is a node
*/
isVertex = () => {
isVertex() {
return false;
};
}
/**
* Function: getGeneralPurposeVariable
*
* Gets the value of temp for the specified layer
*/
getGeneralPurposeVariable = layer => {
getGeneralPurposeVariable(layer) {
return null;
};
}
/**
* Function: setGeneralPurposeVariable
*
* Set the value of temp for the specified layer
*/
setGeneralPurposeVariable = (layer, value) => {
setGeneralPurposeVariable(layer, value) {
return null;
};
}
/**
* Function: setX
*
* Set the value of x for the specified layer
*/
setX = (layer, value) => {
setX(layer, value) {
if (this.isVertex()) {
this.x[0] = value;
} else if (this.isEdge()) {
this.x[layer - this.minRank - 1] = value;
}
};
}
/**
* Function: getX
*
* Gets the value of x on the specified layer
*/
getX = layer => {
getX(layer) {
if (this.isVertex()) {
return this.x[0];
}
@ -169,20 +169,20 @@ class mxGraphAbstractHierarchyCell {
}
return 0.0;
};
}
/**
* Function: setY
*
* Set the value of y for the specified layer
*/
setY = (layer, value) => {
setY(layer, value) {
if (this.isVertex()) {
this.y[0] = value;
} else if (this.isEdge()) {
this.y[layer - this.minRank - 1] = value;
}
};
}
}
export default mxGraphAbstractHierarchyCell;

32
src/mxgraph/layout/hierarchical/model/mxGraphHierarchyEdge.js
View File

@ -3,8 +3,8 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxGraphAbstractHierarchyCell from "./mxGraphAbstractHierarchyCell";
import mxObjectIdentity from "../../../util/mxObjectIdentity";
import mxGraphAbstractHierarchyCell from './mxGraphAbstractHierarchyCell';
import mxObjectIdentity from '../../../util/mxObjectIdentity';
class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
/**
@ -72,19 +72,19 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
*
* Inverts the direction of this internal edge(s)
*/
invert = layer => {
invert(layer) {
const temp = this.source;
this.source = this.target;
this.target = temp;
this.isReversed = !this.isReversed;
};
}
/**
* Function: getNextLayerConnectedCells
*
* Returns the cells this cell connects to on the next layer up
*/
getNextLayerConnectedCells = layer => {
getNextLayerConnectedCells(layer) {
if (this.nextLayerConnectedCells == null) {
this.nextLayerConnectedCells = [];
@ -100,14 +100,14 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
}
return this.nextLayerConnectedCells[layer - this.minRank - 1];
};
}
/**
* Function: getPreviousLayerConnectedCells
*
* Returns the cells this cell connects to on the next layer down
*/
getPreviousLayerConnectedCells = layer => {
getPreviousLayerConnectedCells(layer) {
if (this.previousLayerConnectedCells == null) {
this.previousLayerConnectedCells = [];
@ -123,47 +123,47 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
}
return this.previousLayerConnectedCells[layer - this.minRank - 1];
};
}
/**
* Function: isEdge
*
* Returns true.
*/
isEdge = () => {
isEdge() {
return true;
};
}
/**
* Function: getGeneralPurposeVariable
*
* Gets the value of temp for the specified layer
*/
getGeneralPurposeVariable = layer => {
getGeneralPurposeVariable(layer) {
return this.temp[layer - this.minRank - 1];
};
}
/**
* Function: setGeneralPurposeVariable
*
* Set the value of temp for the specified layer
*/
setGeneralPurposeVariable = (layer, value) => {
setGeneralPurposeVariable(layer, value) {
this.temp[layer - this.minRank - 1] = value;
};
}
/**
* Function: getCoreCell
*
* Gets the first core edge associated with this wrapper
*/
getCoreCell = () => {
getCoreCell() {
if (this.edges != null && this.edges.length > 0) {
return this.edges[0];
}
return null;
};
}
}
export default mxGraphHierarchyEdge;

28
src/mxgraph/layout/hierarchical/model/mxGraphHierarchyModel.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxDictionary from "../../../util/mxDictionary";
import mxDictionary from '../../../util/mxDictionary';
class mxGraphHierarchyModel {
/**
@ -186,7 +186,7 @@ class mxGraphHierarchyModel {
* internalVertices - The array of <mxGraphHierarchyNodes> to have their
* information filled in using the real vertices.
*/
createInternalCells = (layout, vertices, internalVertices) => {
createInternalCells(layout, vertices, internalVertices) {
const graph = layout.getGraph();
// Create internal edges
@ -270,7 +270,7 @@ class mxGraphHierarchyModel {
// Ensure temp variable is cleared from any previous use
internalVertices[i].temp[0] = 0;
}
};
}
/**
* Function: initialRank
@ -279,7 +279,7 @@ class mxGraphHierarchyModel {
* or sinks and working through each node in the relevant edge direction.
* Starting at the sinks is basically a longest path layering algorithm.
*/
initialRank = () => {
initialRank() {
const startNodes = [];
if (this.roots != null) {
@ -404,7 +404,7 @@ class mxGraphHierarchyModel {
// Reset the maxRank to that which would be expected for a from-sink
// scan
this.maxRank = this.SOURCESCANSTARTRANK - this.maxRank;
};
}
/**
* Function: fixRanks
@ -412,7 +412,7 @@ class mxGraphHierarchyModel {
* Fixes the layer assignments to the values stored in the nodes. Also needs
* to create dummy nodes for edges that cross layers.
*/
fixRanks = () => {
fixRanks() {
const rankList = [];
this.ranks = [];
@ -472,7 +472,7 @@ class mxGraphHierarchyModel {
false,
null
);
};
}
/**
* Function: visit
@ -485,7 +485,7 @@ class mxGraphHierarchyModel {
* trackAncestors - Whether or not the search is to keep track all nodes
* directly above this one in the search path.
*/
visit = (visitor, dfsRoots, trackAncestors, seenNodes) => {
visit(visitor, dfsRoots, trackAncestors, seenNodes) {
// Run dfs through on all roots
if (dfsRoots != null) {
for (let i = 0; i < dfsRoots.length; i += 1) {
@ -519,7 +519,7 @@ class mxGraphHierarchyModel {
this.dfsCount++;
}
};
}
/**
* Function: dfs
@ -537,7 +537,7 @@ class mxGraphHierarchyModel {
* ancestor node of the current node
* layer - the layer on the dfs tree ( not the same as the model ranks )
*/
dfs = (parent, root, connectingEdge, visitor, seen, layer) => {
dfs(parent, root, connectingEdge, visitor, seen, layer) {
if (root != null) {
const rootId = root.id;
@ -561,7 +561,7 @@ class mxGraphHierarchyModel {
visitor(parent, root, connectingEdge, layer, 1);
}
}
};
}
/**
* Function: extendedDfs
@ -583,7 +583,7 @@ class mxGraphHierarchyModel {
* childHash - the new hash code for this node
* layer - the layer on the dfs tree ( not the same as the model ranks )
*/
extendedDfs = (
extendedDfs(
parent,
root,
connectingEdge,
@ -592,7 +592,7 @@ class mxGraphHierarchyModel {
ancestors,
childHash,
layer
) => {
) {
// Explanation of custom hash set. Previously, the ancestors variable
// was passed through the dfs as a HashSet. The ancestors were copied
// into a new HashSet and when the new child was processed it was also
@ -658,7 +658,7 @@ class mxGraphHierarchyModel {
visitor(parent, root, connectingEdge, layer, 1);
}
}
};
}
}
export default mxGraphHierarchyModel;

36
src/mxgraph/layout/hierarchical/model/mxGraphHierarchyNode.js
View File

@ -3,8 +3,8 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxGraphAbstractHierarchyCell from "./mxGraphAbstractHierarchyCell";
import mxObjectIdentity from "../../../util/mxObjectIdentity";
import mxGraphAbstractHierarchyCell from './mxGraphAbstractHierarchyCell';
import mxObjectIdentity from '../../../util/mxObjectIdentity';
class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
/**
@ -69,16 +69,16 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* Returns the integer value of the layer that this node resides in
*/
getRankValue = layer => {
getRankValue(layer) {
return this.maxRank;
};
}
/**
* Function: getNextLayerConnectedCells
*
* Returns the cells this cell connects to on the next layer up
*/
getNextLayerConnectedCells = layer => {
getNextLayerConnectedCells(layer) {
if (this.nextLayerConnectedCells == null) {
this.nextLayerConnectedCells = [];
this.nextLayerConnectedCells[0] = [];
@ -98,14 +98,14 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
}
return this.nextLayerConnectedCells[0];
};
}
/**
* Function: getPreviousLayerConnectedCells
*
* Returns the cells this cell connects to on the next layer down
*/
getPreviousLayerConnectedCells = layer => {
getPreviousLayerConnectedCells(layer) {
if (this.previousLayerConnectedCells == null) {
this.previousLayerConnectedCells = [];
this.previousLayerConnectedCells[0] = [];
@ -124,39 +124,39 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
}
return this.previousLayerConnectedCells[0];
};
}
/**
* Function: isVertex
*
* Returns true.
*/
isVertex = () => {
isVertex() {
return true;
};
}
/**
* Function: getGeneralPurposeVariable
*
* Gets the value of temp for the specified layer
*/
getGeneralPurposeVariable = layer => {
getGeneralPurposeVariable(layer) {
return this.temp[0];
};
}
/**
* Function: setGeneralPurposeVariable
*
* Set the value of temp for the specified layer
*/
setGeneralPurposeVariable = (layer, value) => {
setGeneralPurposeVariable(layer, value) {
this.temp[0] = value;
};
}
/**
* Function: isAncestor
*/
isAncestor = otherNode => {
isAncestor(otherNode) {
// Firstly, the hash code of this node needs to be shorter than the
// other node
if (
@ -187,16 +187,16 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
}
return false;
};
}
/**
* Function: getCoreCell
*
* Gets the core vertex associated with this wrapper
*/
getCoreCell = () => {
getCoreCell() {
return this.cell;
};
}
}
export default mxGraphHierarchyNode;

38
src/mxgraph/layout/hierarchical/model/mxSwimlaneModel.js
View File

@ -3,10 +3,10 @@
* Copyright (c) 2006-2018, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxUtils from "../../../util/mxUtils";
import mxGraphHierarchyNode from "./mxGraphHierarchyNode";
import mxGraphHierarchyEdge from "./mxGraphHierarchyEdge";
import mxCellPath from "../../../model/mxCellPath";
import mxUtils from '../../../util/mxUtils';
import mxGraphHierarchyNode from './mxGraphHierarchyNode';
import mxGraphHierarchyEdge from './mxGraphHierarchyEdge';
import mxCellPath from '../../../model/mxCellPath';
class mxSwimlaneModel {
/**
@ -195,7 +195,7 @@ class mxSwimlaneModel {
* internalVertices - The array of <mxGraphHierarchyNodes> to have their
* information filled in using the real vertices.
*/
createInternalCells = (layout, vertices, internalVertices) => {
createInternalCells(layout, vertices, internalVertices) {
const graph = layout.getGraph();
const { swimlanes } = layout;
@ -288,7 +288,7 @@ class mxSwimlaneModel {
// Ensure temp variable is cleared from any previous use
internalVertices[i].temp[0] = 0;
}
};
}
/**
* Function: initialRank
@ -297,7 +297,7 @@ class mxSwimlaneModel {
* or sinks and working through each node in the relevant edge direction.
* Starting at the sinks is basically a longest path layering algorithm.
*/
initialRank = () => {
initialRank() {
this.ranksPerGroup = [];
const startNodes = [];
@ -446,7 +446,7 @@ class mxSwimlaneModel {
// currentMaxLayer = internalNode.temp[0];
// }
// }
};
}
/**
* Function: maxChainDfs
@ -466,7 +466,7 @@ class mxSwimlaneModel {
* chainCount - the number of edges in the chain of vertices going through
* the current swimlane
*/
maxChainDfs = (parent, root, connectingEdge, seen, chainCount) => {
maxChainDfs(parent, root, connectingEdge, seen, chainCount) {
if (root != null) {
const rootId = mxCellPath.create(root.cell);
@ -511,7 +511,7 @@ class mxSwimlaneModel {
}
}
}
};
}
/**
* Function: fixRanks
@ -519,7 +519,7 @@ class mxSwimlaneModel {
* Fixes the layer assignments to the values stored in the nodes. Also needs
* to create dummy nodes for edges that cross layers.
*/
fixRanks = () => {
fixRanks() {
const rankList = [];
this.ranks = [];
@ -579,7 +579,7 @@ class mxSwimlaneModel {
false,
null
);
};
}
/**
* Function: visit
@ -592,7 +592,7 @@ class mxSwimlaneModel {
* trackAncestors - Whether or not the search is to keep track all nodes
* directly above this one in the search path.
*/
visit = (visitor, dfsRoots, trackAncestors, seenNodes) => {
visit(visitor, dfsRoots, trackAncestors, seenNodes) {
// Run dfs through on all roots
if (dfsRoots != null) {
for (let i = 0; i < dfsRoots.length; i += 1) {
@ -626,7 +626,7 @@ class mxSwimlaneModel {
this.dfsCount += 1;
}
};
}
/**
* Function: dfs
@ -644,7 +644,7 @@ class mxSwimlaneModel {
* ancestor node of the current node
* layer - the layer on the dfs tree ( not the same as the model ranks )
*/
dfs = (parent, root, connectingEdge, visitor, seen, layer) => {
dfs(parent, root, connectingEdge, visitor, seen, layer) {
if (root != null) {
const rootId = root.id;
@ -668,7 +668,7 @@ class mxSwimlaneModel {
visitor(parent, root, connectingEdge, layer, 1);
}
}
};
}
/**
* Function: extendedDfs
@ -690,7 +690,7 @@ class mxSwimlaneModel {
* childHash - the new hash code for this node
* layer - the layer on the dfs tree ( not the same as the model ranks )
*/
extendedDfs = (
extendedDfs(
parent,
root,
connectingEdge,
@ -699,7 +699,7 @@ class mxSwimlaneModel {
ancestors,
childHash,
layer
) => {
) {
// Explanation of custom hash set. Previously, the ancestors variable
// was passed through the dfs as a HashSet. The ancestors were copied
// into a new HashSet and when the new child was processed it was also
@ -789,7 +789,7 @@ class mxSwimlaneModel {
visitor(parent, root, connectingEdge, layer, 1);
}
}
};
}
}
export default mxSwimlaneModel;

76
src/mxgraph/layout/hierarchical/mxHierarchicalLayout.js
View File

@ -3,15 +3,15 @@
* Copyright (c) 2006-2018, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxGraphLayout from "../mxGraphLayout";
import mxConstants from "../../util/mxConstants";
import mxHierarchicalEdgeStyle from "./mxHierarchicalEdgeStyle";
import mxDictionary from "../../util/mxDictionary";
import mxGraphHierarchyModel from "./model/mxGraphHierarchyModel";
import mxObjectIdentity from "../../util/mxObjectIdentity";
import mxMinimumCycleRemover from "./stage/mxMinimumCycleRemover";
import mxMedianHybridCrossingReduction from "./stage/mxMedianHybridCrossingReduction";
import mxCoordinateAssignment from "./stage/mxCoordinateAssignment";
import mxGraphLayout from '../mxGraphLayout';
import mxConstants from '../../util/mxConstants';
import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle';
import mxDictionary from '../../util/mxDictionary';
import mxGraphHierarchyModel from './model/mxGraphHierarchyModel';
import mxObjectIdentity from '../../util/mxObjectIdentity';
import mxMinimumCycleRemover from './stage/mxMinimumCycleRemover';
import mxMedianHybridCrossingReduction from './stage/mxMedianHybridCrossingReduction';
import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
class mxHierarchicalLayout extends mxGraphLayout {
/**
@ -191,9 +191,9 @@ class mxHierarchicalLayout extends mxGraphLayout {
*
* Returns the internal <mxGraphHierarchyModel> for this layout algorithm.
*/
getModel = () => {
getModel() {
return this.model;
};
}
/**
* Function: execute
@ -205,7 +205,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* parent - Parent <mxCell> that contains the children to be laid out.
* roots - Optional starting roots of the layout.
*/
execute = (parent, roots) => {
execute(parent, roots) {
this.parent = parent;
const { model } = this.graph;
this.edgesCache = new mxDictionary();
@ -286,7 +286,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
} finally {
model.endUpdate();
}
};
}
/**
* Function: findRoots
@ -302,7 +302,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* parent - <mxCell> whose children should be checked.
* vertices - array of vertices to limit search to
*/
findRoots = (parent, vertices) => {
findRoots(parent, vertices) {
const roots = [];
if (parent != null && vertices != null) {
@ -347,7 +347,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
}
return roots;
};
}
/**
* Function: getEdges
@ -358,7 +358,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
*
* cell - <mxCell> whose edges should be returned.
*/
getEdges = cell => {
getEdges(cell) {
const cachedEdges = this.edgesCache.get(cell);
if (cachedEdges != null) {
@ -404,7 +404,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
this.edgesCache.put(cell, result);
return result;
};
}
/**
* Function: getVisibleTerminal
@ -416,7 +416,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* edge - <mxCell> whose edges should be returned.
* source - Boolean that specifies whether the source or target terminal is to be returned
*/
getVisibleTerminal = (edge, source) => {
getVisibleTerminal(edge, source) {
let terminalCache = this.edgesTargetTermCache;
if (source) {
@ -452,7 +452,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
}
return terminal;
};
}
/**
* Function: run
@ -462,7 +462,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* routing changes made. It runs each stage of the layout that has been
* created.
*/
run = parent => {
run(parent) {
// Separate out unconnected hierarchies
const hierarchyVertices = [];
const allVertexSet = [];
@ -565,14 +565,14 @@ class mxHierarchicalLayout extends mxGraphLayout {
this.crossingStage(parent);
initialX = this.placementStage(initialX, parent);
}
};
}
/**
* Function: filterDescendants
*
* Creates an array of descendant cells
*/
filterDescendants = (cell, result) => {
filterDescendants(cell, result) {
const { model } = this.graph;
if (
@ -599,7 +599,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
}
}
}
};
}
/**
* Function: isPort
@ -611,12 +611,12 @@ class mxHierarchicalLayout extends mxGraphLayout {
*
* cell - <mxCell> that represents the port.
*/
isPort = cell => {
isPort(cell) {
if (cell != null && cell.geometry != null) {
return cell.geometry.relative;
}
return false;
};
}
/**
* Function: getEdgesBetween
@ -630,7 +630,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* target -
* directed -
*/
getEdgesBetween = (source, target, directed) => {
getEdgesBetween(source, target, directed) {
directed = directed != null ? directed : false;
const edges = this.getEdges(source);
const result = [];
@ -650,7 +650,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
}
return result;
};
}
/**
* Traverses the (directed) graph invoking the given function for each
@ -668,7 +668,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* null for the first step of the traversal.
* allVertices - Array of cell paths for the visited cells.
*/
traverse = (
traverse(
vertex,
directed,
edge,
@ -676,7 +676,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
currentComp,
hierarchyVertices,
filledVertexSet
) => {
) {
if (vertex != null && allVertices != null) {
// Has this vertex been seen before in any traversal
// And if the filled vertex set is populated, only
@ -766,44 +766,44 @@ class mxHierarchicalLayout extends mxGraphLayout {
}
return currentComp;
};
}
/**
* Function: cycleStage
*
* Executes the cycle stage using mxMinimumCycleRemover.
*/
cycleStage = parent => {
cycleStage(parent) {
const cycleStage = new mxMinimumCycleRemover(this);
cycleStage.execute(parent);
};
}
/**
* Function: layeringStage
*
* Implements first stage of a Sugiyama layout.
*/
layeringStage = () => {
layeringStage() {
this.model.initialRank();
this.model.fixRanks();
};
}
/**
* Function: crossingStage
*
* Executes the crossing stage using mxMedianHybridCrossingReduction.
*/
crossingStage = parent => {
crossingStage(parent) {
const crossingStage = new mxMedianHybridCrossingReduction(this);
crossingStage.execute(parent);
};
}
/**
* Function: placementStage
*
* Executes the placement stage using mxCoordinateAssignment.
*/
placementStage = (initialX, parent) => {
placementStage(initialX, parent) {
const placementStage = new mxCoordinateAssignment(
this,
this.intraCellSpacing,
@ -816,7 +816,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
placementStage.execute(parent);
return placementStage.limitX + this.interHierarchySpacing;
};
}
}
export default mxHierarchicalLayout;

82
src/mxgraph/layout/hierarchical/mxSwimlaneLayout.js
View File

@ -4,16 +4,16 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxGraphLayout from "../mxGraphLayout";
import mxConstants from "../../util/mxConstants";
import mxHierarchicalEdgeStyle from "./mxHierarchicalEdgeStyle";
import mxDictionary from "../../util/mxDictionary";
import mxRectangle from "../../util/mxRectangle";
import mxSwimlaneModel from "./model/mxSwimlaneModel";
import mxObjectIdentity from "../../util/mxObjectIdentity";
import mxSwimlaneOrdering from "./stage/mxSwimlaneOrdering";
import mxMedianHybridCrossingReduction from "./stage/mxMedianHybridCrossingReduction";
import mxCoordinateAssignment from "./stage/mxCoordinateAssignment";
import mxGraphLayout from '../mxGraphLayout';
import mxConstants from '../../util/mxConstants';
import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle';
import mxDictionary from '../../util/mxDictionary';
import mxRectangle from '../../util/mxRectangle';
import mxSwimlaneModel from './model/mxSwimlaneModel';
import mxObjectIdentity from '../../util/mxObjectIdentity';
import mxSwimlaneOrdering from './stage/mxSwimlaneOrdering';
import mxMedianHybridCrossingReduction from './stage/mxMedianHybridCrossingReduction';
import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
class mxSwimlaneLayout extends mxGraphLayout {
/**
@ -206,9 +206,9 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* Returns the internal <mxSwimlaneModel> for this layout algorithm.
*/
getModel = () => {
getModel() {
return this.model;
};
}
/**
* Function: execute
@ -220,7 +220,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* parent - Parent <mxCell> that contains the children to be laid out.
* swimlanes - Ordered array of swimlanes to be laid out
*/
execute = (parent, swimlanes) => {
execute(parent, swimlanes) {
this.parent = parent;
const { model } = this.graph;
this.edgesCache = new mxDictionary();
@ -309,7 +309,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
} finally {
model.endUpdate();
}
};
}
/**
* Function: updateGroupBounds
@ -318,7 +318,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* all child vertices.
*
*/
updateGroupBounds = () => {
updateGroupBounds() {
// Get all vertices and edge in the layout
const cells = [];
const { model } = this;
@ -398,7 +398,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
this.graph.moveCells(children, -x, geo.y - y);
}
}
};
}
/**
* Function: findRoots
@ -414,7 +414,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* parent - <mxCell> whose children should be checked.
* vertices - array of vertices to limit search to
*/
findRoots = (parent, vertices) => {
findRoots(parent, vertices) {
const roots = [];
if (parent != null && vertices != null) {
@ -469,7 +469,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
}
return roots;
};
}
/**
* Function: getEdges
@ -480,7 +480,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* cell - <mxCell> whose edges should be returned.
*/
getEdges = cell => {
getEdges(cell) {
const cachedEdges = this.edgesCache.get(cell);
if (cachedEdges != null) {
@ -534,7 +534,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
this.edgesCache.put(cell, result);
return result;
};
}
/**
* Function: getVisibleTerminal
@ -546,7 +546,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* edge - <mxCell> whose edges should be returned.
* source - Boolean that specifies whether the source or target terminal is to be returned
*/
getVisibleTerminal = (edge, source) => {
getVisibleTerminal(edge, source) {
let terminalCache = this.edgesTargetTermCache;
if (source) {
@ -582,7 +582,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
}
return terminal;
};
}
/**
* Function: run
@ -592,7 +592,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* routing changes made. It runs each stage of the layout that has been
* created.
*/
run = parent => {
run(parent) {
// Separate out unconnected hierarchies
const hierarchyVertices = [];
const allVertexSet = Object();
@ -700,14 +700,14 @@ class mxSwimlaneLayout extends mxGraphLayout {
this.crossingStage(parent);
this.placementStage(0, parent);
};
}
/**
* Function: filterDescendants
*
* Creates an array of descendant cells
*/
filterDescendants = (cell, result) => {
filterDescendants(cell, result) {
const { model } = this.graph;
if (
@ -735,7 +735,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
}
}
}
};
}
/**
* Function: isPort
@ -747,13 +747,13 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* cell - <mxCell> that represents the port.
*/
isPort = cell => {
isPort(cell) {
if (cell.geometry.relative) {
return true;
}
return false;
};
}
/**
* Function: getEdgesBetween
@ -767,7 +767,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* target -
* directed -
*/
getEdgesBetween = (source, target, directed) => {
getEdgesBetween(source, target, directed) {
directed = directed != null ? directed : false;
const edges = this.getEdges(source);
const result = [];
@ -787,7 +787,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
}
return result;
};
}
/**
* Traverses the (directed) graph invoking the given function for each
@ -806,7 +806,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* allVertices - Array of cell paths for the visited cells.
* swimlaneIndex - the laid out order index of the swimlane vertex is contained in
*/
traverse = (
traverse(
vertex,
directed,
edge,
@ -815,7 +815,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
hierarchyVertices,
filledVertexSet,
swimlaneIndex
) => {
) {
if (vertex != null && allVertices != null) {
// Has this vertex been seen before in any traversal
// And if the filled vertex set is populated, only
@ -903,44 +903,44 @@ class mxSwimlaneLayout extends mxGraphLayout {
}
return currentComp;
};
}
/**
* Function: cycleStage
*
* Executes the cycle stage using mxMinimumCycleRemover.
*/
cycleStage = parent => {
cycleStage(parent) {
const cycleStage = new mxSwimlaneOrdering(this);
cycleStage.execute(parent);
};
}
/**
* Function: layeringStage
*
* Implements first stage of a Sugiyama layout.
*/
layeringStage = () => {
layeringStage() {
this.model.initialRank();
this.model.fixRanks();
};
}
/**
* Function: crossingStage
*
* Executes the crossing stage using mxMedianHybridCrossingReduction.
*/
crossingStage = parent => {
crossingStage(parent) {
const crossingStage = new mxMedianHybridCrossingReduction(this);
crossingStage.execute(parent);
};
}
/**
* Function: placementStage
*
* Executes the placement stage using mxCoordinateAssignment.
*/
placementStage = (initialX, parent) => {
placementStage(initialX, parent) {
const placementStage = new mxCoordinateAssignment(
this,
this.intraCellSpacing,
@ -953,7 +953,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
placementStage.execute(parent);
return placementStage.limitX + this.interHierarchySpacing;
};
}
}
export default mxSwimlaneLayout;

4
src/mxgraph/layout/hierarchical/stage/MedianCellSorter.js
View File

@ -8,7 +8,7 @@ class MedianCellSorter {
*
* Compares two MedianCellSorters.
*/
compare = (a, b) => {
compare(a, b) {
if (a != null && b != null) {
if (b.medianValue > a.medianValue) {
return -1;
@ -19,7 +19,7 @@ class MedianCellSorter {
return 0;
}
return 0;
};
}
}
export default MedianCellSorter;

80
src/mxgraph/layout/hierarchical/stage/mxCoordinateAssignment.js
View File

@ -4,12 +4,12 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import mxConstants from "../../../util/mxConstants";
import mxLog from "../../../util/mxLog";
import WeightedCellSorter from "../../WeightedCellSorter";
import mxDictionary from "../../../util/mxDictionary";
import mxPoint from "../../../util/mxPoint";
import mxHierarchicalEdgeStyle from "../mxHierarchicalEdgeStyle";
import mxConstants from '../../../util/mxConstants';
import mxLog from '../../../util/mxLog';
import WeightedCellSorter from '../../WeightedCellSorter';
import mxDictionary from '../../../util/mxDictionary';
import mxPoint from '../../../util/mxPoint';
import mxHierarchicalEdgeStyle from '../mxHierarchicalEdgeStyle';
class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
/**
@ -229,7 +229,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
/**
* Utility method to display current positions
*/
printStatus = () => {
printStatus() {
const model = this.layout.getModel();
mxLog.show();
@ -248,14 +248,14 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
mxLog.writeln('====================================');
};
}
/**
* Function: execute
*
* A basic horizontal coordinate assignment algorithm
*/
execute = parent => {
execute(parent) {
this.jettyPositions = Object();
const model = this.layout.getModel();
this.currentXDelta = 0.0;
@ -313,14 +313,14 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
this.setCellLocations(this.layout.getGraph(), model);
};
}
/**
* Function: minNode
*
* Performs one median positioning sweep in both directions
*/
minNode = model => {
minNode(model) {
// Queue all nodes
const nodeList = [];
@ -476,7 +476,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
cellWrapper.visited = false;
count += 1;
}
};
}
/**
* Function: medianPos
@ -488,7 +488,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* i - the iteration of the whole process
* model - an internal model of the hierarchical layout
*/
medianPos = (i, model) => {
medianPos(i, model) {
// Reverse sweep direction each time through this method
const downwardSweep = i % 2 === 0;
@ -501,7 +501,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
this.rankMedianPosition(j + 1, model, j);
}
}
};
}
/**
* Function: rankMedianPosition
@ -515,7 +515,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* nextRankValue - the layer number whose connected cels are to be laid out
* relative to
*/
rankMedianPosition = (rankValue, model, nextRankValue) => {
rankMedianPosition(rankValue, model, nextRankValue) {
const rank = model.ranks[rankValue];
// Form an array of the order in which the cell are to be processed
@ -661,7 +661,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
weightedValues[i].visited = true;
}
};
}
/**
* Function: calculatedWeightedValue
@ -674,7 +674,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* currentCell - the cell whose weight is to be calculated
* collection - the cells the specified cell is connected to
*/
calculatedWeightedValue = (currentCell, collection) => {
calculatedWeightedValue(currentCell, collection) {
let totalWeight = 0;
for (let i = 0; i < collection.length; i += 1) {
@ -690,7 +690,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
return totalWeight;
};
}
/**
* Function: medianXValue
@ -703,7 +703,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* connectedCells - the cells the candidate connects to on this level
* rankValue - the layer number of this rank
*/
medianXValue = (connectedCells, rankValue) => {
medianXValue(connectedCells, rankValue) {
if (connectedCells.length === 0) {
return 0;
}
@ -727,7 +727,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
const rightMedian = medianValues[medianPoint];
return (leftMedian + rightMedian) / 2;
};
}
/**
* Function: initialCoords
@ -741,7 +741,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* facade - the facade describing the input graph
* model - an internal model of the hierarchical layout
*/
initialCoords = (facade, model) => {
initialCoords(facade, model) {
this.calculateWidestRank(facade, model);
// Sweep up and down from the widest rank
@ -756,7 +756,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
this.rankCoordinates(i, facade, model);
}
}
};
}
/**
* Function: rankCoordinates
@ -772,7 +772,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* graph - the facade describing the input graph
* model - an internal model of the hierarchical layout
*/
rankCoordinates = (rankValue, graph, model) => {
rankCoordinates(rankValue, graph, model) {
const rank = model.ranks[rankValue];
let maxY = 0.0;
let localX =
@ -829,7 +829,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
if (boundsWarning == true) {
mxLog.warn('At least one cell has no bounds');
}
};
}
/**
* Function: calculateWidestRank
@ -842,7 +842,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* graph - the facade describing the input graph
* model - an internal model of the hierarchical layout
*/
calculateWidestRank = (graph, model) => {
calculateWidestRank(graph, model) {
// Starting y co-ordinate
let y = -this.interRankCellSpacing;
@ -938,7 +938,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
cell.setY(rankValue, y);
}
}
};
}
/**
* Function: minPath
@ -951,7 +951,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* graph - the facade describing the input graph
* model - an internal model of the hierarchical layout
*/
minPath = (graph, model) => {
minPath(graph, model) {
// Work down and up each edge with at least 2 control points
// trying to straighten each one out. If the same number of
// straight segments are formed in both directions, the
@ -1050,7 +1050,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
}
}
};
}
/**
* Function: repositionValid
@ -1065,7 +1065,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* rank - the layer of the cell
* position - the x position being sought
*/
repositionValid = (model, cell, rank, position) => {
repositionValid(model, cell, rank, position) {
const rankArray = model.ranks[rank];
let rankIndex = -1;
@ -1114,7 +1114,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
return rightLimit >= position;
}
return true;
};
}
/**
* Function: setCellLocations
@ -1127,7 +1127,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* graph - the input graph
* model - the layout model
*/
setCellLocations = (graph, model) => {
setCellLocations(graph, model) {
this.rankTopY = [];
this.rankBottomY = [];
@ -1161,7 +1161,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
for (let i = 0; i < edges.length; i += 1) {
this.setEdgePosition(edges[i]);
}
};
}
/**
* Function: localEdgeProcessing
@ -1172,7 +1172,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
*
* model - the layout model
*/
localEdgeProcessing = model => {
localEdgeProcessing(model) {
// Iterate through each vertex, look at the edges connected in
// both directions.
for (let rankIndex = 0; rankIndex < model.ranks.length; rankIndex += 1) {
@ -1299,14 +1299,14 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
}
}
};
}
/**
* Function: setEdgePosition
*
* Fixes the control points
*/
setEdgePosition = cell => {
setEdgePosition(cell) {
// For parallel edges we need to seperate out the points a
// little
let offsetX = 0;
@ -1533,7 +1533,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
cell.temp[0] = 101207;
}
};
}
/**
* Function: setVertexLocation
@ -1544,7 +1544,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
*
* cell - the vertex to position
*/
setVertexLocation = cell => {
setVertexLocation(cell) {
const realCell = cell.cell;
const positionX = cell.x[0] - cell.width / 2;
const positionY = cell.y[0] - cell.height / 2;
@ -1568,7 +1568,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
this.limitX = Math.max(this.limitX, positionX + cell.width);
};
}
/**
* Function: processReversedEdge
@ -1580,9 +1580,9 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* edge - the hierarchical model edge
* realEdge - the real edge in the graph
*/
processReversedEdge = (graph, model) => {
processReversedEdge(graph, model) {
// hook for subclassers
};
}
}
export default mxCoordinateAssignment;

2
src/mxgraph/layout/hierarchical/stage/mxHierarchicalLayoutStage.js
View File

@ -25,7 +25,7 @@ class mxHierarchicalLayoutStage {
* and creates the resulting laid out graph within that facade for further
* use.
*/
execute = parent => {};
execute(parent) {}
}
export default mxHierarchicalLayoutStage;

30
src/mxgraph/layout/hierarchical/stage/mxMedianHybridCrossingReduction.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import MedianCellSorter from "./MedianCellSorter";
import MedianCellSorter from './MedianCellSorter';
class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
/**
@ -107,7 +107,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
* Performs a vertex ordering within ranks as described by Gansner et al
* 1993
*/
execute = parent => {
execute(parent) {
const model = this.layout.getModel();
// Stores initial ordering as being the best one found so far
@ -181,7 +181,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
}
model.ranks = ranks;
};
}
/**
* Function: calculateCrossings
@ -194,7 +194,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
*
* model - the internal model describing the hierarchy
*/
calculateCrossings = model => {
calculateCrossings(model) {
const numRanks = model.ranks.length;
let totalCrossings = 0;
@ -203,7 +203,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
}
return totalCrossings;
};
}
/**
* Function: calculateRankCrossing
@ -217,7 +217,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
* i - the topmost rank of the pair ( higher rank value )
* model - the internal model describing the hierarchy
*/
calculateRankCrossing = (i, model) => {
calculateRankCrossing(i, model) {
let totalCrossings = 0;
const rank = model.ranks[i];
const previousRank = model.ranks[i - 1];
@ -282,7 +282,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
}
return totalCrossings;
};
}
/**
* Function: transpose
@ -295,7 +295,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
* mainLoopIteration - the iteration number of the main loop
* model - the internal model describing the hierarchy
*/
transpose = (mainLoopIteration, model) => {
transpose(mainLoopIteration, model) {
let improved = true;
// Track the number of iterations in case of looping
@ -450,7 +450,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
}
}
}
};
}
/**
* Function: weightedMedian
@ -463,7 +463,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
* iteration - the iteration number of the main loop
* model - the internal model describing the hierarchy
*/
weightedMedian = (iteration, model) => {
weightedMedian(iteration, model) {
// Reverse sweep direction each time through this method
const downwardSweep = iteration % 2 === 0;
if (downwardSweep) {
@ -475,7 +475,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
this.medianRank(j, downwardSweep);
}
}
};
}
/**
* Function: medianRank
@ -488,7 +488,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
* rankValue - the layer number of this rank
* downwardSweep - whether or not this is a downward sweep through the graph
*/
medianRank = (rankValue, downwardSweep) => {
medianRank(rankValue, downwardSweep) {
const numCellsForRank = this.nestedBestRanks[rankValue].length;
const medianValues = [];
const reservedPositions = [];
@ -546,7 +546,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
cell.setGeneralPurposeVariable(rankValue, i);
}
}
};
}
/**
* Function: medianValue
@ -561,7 +561,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
* specified cell
* rankValue - the rank that the connected cell lie upon
*/
medianValue = (connectedCells, rankValue) => {
medianValue(connectedCells, rankValue) {
const medianValues = [];
let arrayCount = 0;
@ -593,7 +593,7 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
medianValues[medianPoint] * leftMedian) /
(leftMedian + rightMedian)
);
};
}
}
export default mxMedianHybridCrossingReduction;

6
src/mxgraph/layout/hierarchical/stage/mxMinimumCycleRemover.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import mxUtils from "../../../util/mxUtils";
import mxUtils from '../../../util/mxUtils';
class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
/**
@ -37,7 +37,7 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
* and creates the resulting laid out graph within that facade for further
* use.
*/
execute = parent => {
execute(parent) {
const model = this.layout.getModel();
const seenNodes = {};
const unseenNodesArray = model.vertexMapper.getValues();
@ -107,7 +107,7 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
true,
seenNodesCopy
);
};
}
}
export default mxMinimumCycleRemover;

8
src/mxgraph/layout/hierarchical/stage/mxSwimlaneOrdering.js
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import mxUtils from "../../../util/mxUtils";
import mxCellPath from "../../../model/mxCellPath";
import mxUtils from '../../../util/mxUtils';
import mxCellPath from '../../../model/mxCellPath';
class mxSwimlaneOrdering extends mxHierarchicalLayoutStage {
/**
@ -38,7 +38,7 @@ class mxSwimlaneOrdering extends mxHierarchicalLayoutStage {
* and creates the resulting laid out graph within that facade for further
* use.
*/
execute = parent => {
execute(parent) {
const model = this.layout.getModel();
const seenNodes = {};
const unseenNodes = mxUtils.clone(model.vertexMapper, null, true);
@ -97,7 +97,7 @@ class mxSwimlaneOrdering extends mxHierarchicalLayoutStage {
true,
null
);
};
}
}
export default mxSwimlaneOrdering;

14
src/mxgraph/layout/mxCircleLayout.js
View File

@ -3,7 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxGraphLayout from "./mxGraphLayout";
import mxGraphLayout from './mxGraphLayout';
class mxCircleLayout extends mxGraphLayout {
/**
@ -87,7 +87,7 @@ class mxCircleLayout extends mxGraphLayout {
*
* Implements <mxGraphLayout.execute>.
*/
execute = parent => {
execute(parent) {
const model = this.graph.getModel();
// Moves the vertices to build a circle. Makes sure the
@ -146,7 +146,7 @@ class mxCircleLayout extends mxGraphLayout {
} finally {
model.endUpdate();
}
};
}
/**
* Function: getRadius
@ -154,9 +154,9 @@ class mxCircleLayout extends mxGraphLayout {
* Returns the radius to be used for the given vertex count. Max is the maximum
* width or height of all vertices in the layout.
*/
getRadius = (count, max) => {
getRadius(count, max) {
return Math.max((count * max) / Math.PI, this.radius);
};
}
/**
* Function: circle
@ -165,7 +165,7 @@ class mxCircleLayout extends mxGraphLayout {
* of vertices and the given radius. This is called from
* <execute>.
*/
circle = (vertices, r, left, top) => {
circle(vertices, r, left, top) {
const vertexCount = vertices.length;
const phi = (2 * Math.PI) / vertexCount;
@ -178,7 +178,7 @@ class mxCircleLayout extends mxGraphLayout {
);
}
}
};
}
}
export default mxCircleLayout;

98
src/mxgraph/layout/mxCompactTreeLayout.js
View File

@ -4,9 +4,9 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxDictionary from "../util/mxDictionary";
import mxPoint from "../util/mxPoint";
import mxGraphLayout from "./mxGraphLayout";
import mxDictionary from '../util/mxDictionary';
import mxPoint from '../util/mxPoint';
import mxGraphLayout from './mxGraphLayout';
class mxCompactTreeLayout extends mxGraphLayout {
/**
@ -231,21 +231,21 @@ class mxCompactTreeLayout extends mxGraphLayout {
*
* vertex - <mxCell> whose ignored state should be returned.
*/
isVertexIgnored = vertex => {
isVertexIgnored(vertex) {
return (
super.isVertexIgnored(vertex) ||
this.graph.getConnections(vertex).length == 0
);
};
}
/**
* Function: isHorizontal
*
* Returns <horizontal>.
*/
isHorizontal = () => {
isHorizontal() {
return this.horizontal;
};
}
/**
* Function: execute
@ -262,7 +262,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* root - Optional <mxCell> that will be used as the root of the tree.
* Overrides <root> if specified.
*/
execute = (parent, root) => {
execute(parent, root) {
this.parent = parent;
const model = this.graph.getModel();
@ -407,14 +407,14 @@ class mxCompactTreeLayout extends mxGraphLayout {
model.endUpdate();
}
}
};
}
/**
* Function: moveNode
*
* Moves the specified node and all of its children by the given amount.
*/
moveNode = (node, dx, dy) => {
moveNode(node, dx, dy) {
node.x += dx;
node.y += dy;
this.apply(node);
@ -425,14 +425,14 @@ class mxCompactTreeLayout extends mxGraphLayout {
this.moveNode(child, dx, dy);
child = child.next;
}
};
}
/**
* Function: sortOutgoingEdges
*
* Called if <sortEdges> is true to sort the array of outgoing edges in place.
*/
sortOutgoingEdges = (source, edges) => {
sortOutgoingEdges(source, edges) {
const lookup = new mxDictionary();
edges.sort((e1, e2) => {
@ -454,7 +454,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
return mxCellPath.compare(p1, p2);
});
};
}
/**
* Function: findRankHeights
@ -462,7 +462,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Stores the maximum height (relative to the layout
* direction) of cells in each rank
*/
findRankHeights = (node, rank) => {
findRankHeights(node, rank) {
if (
this.maxRankHeight[rank] == null ||
this.maxRankHeight[rank] < node.height
@ -476,7 +476,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
this.findRankHeights(child, rank + 1);
child = child.next;
}
};
}
/**
* Function: setCellHeights
@ -484,7 +484,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Set the cells heights (relative to the layout
* direction) when the tops of each rank are to be aligned
*/
setCellHeights = (node, rank) => {
setCellHeights(node, rank) {
if (
this.maxRankHeight[rank] != null &&
this.maxRankHeight[rank] > node.height
@ -498,7 +498,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
this.setCellHeights(child, rank + 1);
child = child.next;
}
};
}
/**
* Function: dfs
@ -507,7 +507,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Makes sure the specified parent is never left by the
* algorithm.
*/
dfs = (cell, parent) => {
dfs(cell, parent) {
const id = mxCellPath.create(cell);
let node = null;
@ -571,7 +571,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
}
return node;
};
}
/**
* Function: layout
@ -579,7 +579,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm
* at the given node.
*/
layout = node => {
layout(node) {
if (node != null) {
let { child } = node;
@ -594,12 +594,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
this.layoutLeaf(node);
}
}
};
}
/**
* Function: horizontalLayout
*/
horizontalLayout = (node, x0, y0, bounds) => {
horizontalLayout(node, x0, y0, bounds) {
node.x += x0 + node.offsetX;
node.y += y0 + node.offsetY;
bounds = this.apply(node, bounds);
@ -623,12 +623,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
}
return bounds;
};
}
/**
* Function: verticalLayout
*/
verticalLayout = (node, parent, x0, y0, bounds) => {
verticalLayout(node, parent, x0, y0, bounds) {
node.x += x0 + node.offsetY;
node.y += y0 + node.offsetX;
bounds = this.apply(node, bounds);
@ -653,12 +653,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
}
return bounds;
};
}
/**
* Function: attachParent
*/
attachParent = (node, height) => {
attachParent(node, height) {
const x = this.nodeDistance + this.levelDistance;
const y2 = (height - node.width) / 2 - this.nodeDistance;
const y1 = y2 + node.width + 2 * this.nodeDistance - height;
@ -676,12 +676,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
0,
this.createLine(x, y2, node.contour.lowerHead)
);
};
}
/**
* Function: layoutLeaf
*/
layoutLeaf = node => {
layoutLeaf(node) {
const dist = 2 * this.nodeDistance;
node.contour.upperTail = this.createLine(node.height + dist, 0);
@ -692,12 +692,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
0,
node.contour.lowerTail
);
};
}
/**
* Function: join
*/
join = node => {
join(node) {
const dist = 2 * this.nodeDistance;
let { child } = node;
@ -716,12 +716,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
}
return sum;
};
}
/**
* Function: merge
*/
merge = (p1, p2) => {
merge(p1, p2) {
let x = 0;
let y = 0;
let total = 0;
@ -760,12 +760,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
p1.lowerHead = p2.lowerHead;
return total;
};
}
/**
* Function: offset
*/
offset = (p1, p2, a1, a2, b1, b2) => {
offset(p1, p2, a1, a2, b1, b2) {
let d = 0;
if (b1 <= p1 || p1 + a1 <= 0) {
@ -798,12 +798,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
return d;
}
return 0;
};
}
/**
* Function: bridge
*/
bridge = (line1, x1, y1, line2, x2, y2) => {
bridge(line1, x1, y1, line2, x2, y2) {
const dx = x2 + line2.dx - x1;
let dy = 0;
let s = 0;
@ -819,12 +819,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
line1.next = this.createLine(0, y2 + line2.dy - dy - y1, r);
return r;
};
}
/**
* Function: createNode
*/
createNode = cell => {
createNode(cell) {
const node = {};
node.cell = cell;
node.x = 0;
@ -849,12 +849,12 @@ class mxCompactTreeLayout extends mxGraphLayout {
node.contour = {};
return node;
};
}
/**
* Function: apply
*/
apply = (node, bounds) => {
apply(node, bounds) {
const model = this.graph.getModel();
const { cell } = node;
let g = model.getGeometry(cell);
@ -887,19 +887,19 @@ class mxCompactTreeLayout extends mxGraphLayout {
}
return bounds;
};
}
/**
* Function: createLine
*/
createLine = (dx, dy, next) => {
createLine(dx, dy, next) {
const line = {};
line.dx = dx;
line.dy = dy;
line.next = next;
return line;
};
}
/**
* Function: adjustParents
@ -908,7 +908,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* implementation adjusts the group to just fit around the children with
* a padding.
*/
adjustParents = () => {
adjustParents() {
const tmp = [];
for (const id in this.parentsChanged) {
@ -923,14 +923,14 @@ class mxCompactTreeLayout extends mxGraphLayout {
this.groupPaddingBottom,
this.groupPaddingLeft
);
};
}
/**
* Function: localEdgeProcessing
*
* Moves the specified node and all of its children by the given amount.
*/
localEdgeProcessing = node => {
localEdgeProcessing(node) {
this.processNodeOutgoing(node);
let { child } = node;
@ -938,14 +938,14 @@ class mxCompactTreeLayout extends mxGraphLayout {
this.localEdgeProcessing(child);
child = child.next;
}
};
}
/**
* Function: processNodeOutgoing
*
* Separates the x position of edges as they connect to vertices
*/
processNodeOutgoing = node => {
processNodeOutgoing(node) {
let { child } = node;
const parentCell = node.cell;
@ -1038,7 +1038,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
maxYOffset = Math.max(maxYOffset, currentYOffset);
}
};
}
}
export default mxCompactTreeLayout;

10
src/mxgraph/layout/mxCompositeLayout.js
View File

@ -3,7 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxGraphLayout from "./mxGraphLayout";
import mxGraphLayout from './mxGraphLayout';
class mxCompositeLayout extends mxGraphLayout {
/**
@ -61,13 +61,13 @@ class mxCompositeLayout extends mxGraphLayout {
* Implements <mxGraphLayout.moveCell> by calling move on <master> or the first
* layout in <layouts>.
*/
moveCell = (cell, x, y) => {
moveCell(cell, x, y) {
if (this.master != null) {
this.master.moveCell.apply(this.master, [cell, x, y]);
} else {
this.layouts[0].moveCell.apply(this.layouts[0], [cell, x, y]);
}
};
}
/**
* Function: execute
@ -75,7 +75,7 @@ class mxCompositeLayout extends mxGraphLayout {
* Implements <mxGraphLayout.execute> by executing all <layouts> in a
* single transaction.
*/
execute = parent => {
execute(parent) {
const model = this.graph.getModel();
model.beginUpdate();
@ -86,7 +86,7 @@ class mxCompositeLayout extends mxGraphLayout {
} finally {
model.endUpdate();
}
};
}
}
export default mxCompositeLayout;

18
src/mxgraph/layout/mxEdgeLabelLayout.js
View File

@ -4,9 +4,9 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxPoint from "../util/mxPoint";
import mxGraphLayout from "./mxGraphLayout";
import mxUtils from "../util/mxUtils";
import mxPoint from '../util/mxPoint';
import mxGraphLayout from './mxGraphLayout';
import mxUtils from '../util/mxUtils';
class mxEdgeLabelLayout extends mxGraphLayout {
/**
@ -41,7 +41,7 @@ class mxEdgeLabelLayout extends mxGraphLayout {
*
* Implements <mxGraphLayout.execute>.
*/
execute = parent => {
execute(parent) {
const { view } = this.graph;
const model = this.graph.getModel();
@ -64,14 +64,14 @@ class mxEdgeLabelLayout extends mxGraphLayout {
}
this.placeLabels(vertices, edges);
};
}
/**
* Function: placeLabels
*
* Places the labels of the given edges.
*/
placeLabels = (v, e) => {
placeLabels(v, e) {
const model = this.graph.getModel();
// Moves the vertices to build a circle. Makes sure the
@ -99,14 +99,14 @@ class mxEdgeLabelLayout extends mxGraphLayout {
} finally {
model.endUpdate();
}
};
}
/**
* Function: avoid
*
* Places the labels of the given edges.
*/
avoid = (edge, vertex) => {
avoid(edge, vertex) {
const model = this.graph.getModel();
const labRect = edge.text.boundingBox;
@ -142,7 +142,7 @@ class mxEdgeLabelLayout extends mxGraphLayout {
model.setGeometry(edge.cell, g);
}
}
};
}
}
export default mxEdgeLabelLayout;

26
src/mxgraph/layout/mxFastOrganicLayout.js
View File

@ -3,7 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxObjectIdentity from "../util/mxObjectIdentity";
import mxObjectIdentity from '../util/mxObjectIdentity';
import mxGraphLayout from './mxGraphLayout';
class mxFastOrganicLayout extends mxGraphLayout {
@ -201,12 +201,12 @@ class mxFastOrganicLayout extends mxGraphLayout {
*
* vertex - <mxCell> whose ignored state should be returned.
*/
isVertexIgnored = vertex => {
isVertexIgnored(vertex) {
return (
super.isVertexIgnored(vertex) ||
this.graph.getConnections(vertex).length === 0
);
};
}
/**
* Function: execute
@ -214,7 +214,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
* Implements <mxGraphLayout.execute>. This operates on all children of the
* given parent where <isVertexIgnored> returns false.
*/
execute = parent => {
execute(parent) {
const model = this.graph.getModel();
this.vertexArray = [];
let cells = this.graph.getChildVertices(parent);
@ -393,7 +393,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
} finally {
model.endUpdate();
}
};
}
/**
* Function: calcPositions
@ -402,7 +402,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
* local cache of cell positions. Limits the displacement to the current
* temperature.
*/
calcPositions = () => {
calcPositions() {
for (let index = 0; index < this.vertexArray.length; index += 1) {
if (this.isMoveable[index]) {
// Get the distance of displacement for this node for this
@ -435,7 +435,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
this.cellLocation[index][1] += newYDisp;
}
}
};
}
/**
* Function: calcAttraction
@ -443,7 +443,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
* Calculates the attractive forces between all laid out nodes linked by
* edges
*/
calcAttraction = () => {
calcAttraction() {
// Check the neighbours of each vertex and calculate the attractive
// force of the edge connecting them
for (let i = 0; i < this.vertexArray.length; i += 1) {
@ -481,14 +481,14 @@ class mxFastOrganicLayout extends mxGraphLayout {
}
}
}
};
}
/**
* Function: calcRepulsion
*
* Calculates the repulsive forces between all laid out nodes
*/
calcRepulsion = () => {
calcRepulsion() {
const vertexCount = this.vertexArray.length;
for (let i = 0; i < vertexCount; i += 1) {
@ -537,7 +537,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
}
}
}
};
}
/**
* Function: reduceTemperature
@ -545,10 +545,10 @@ class mxFastOrganicLayout extends mxGraphLayout {
* Reduces the temperature of the layout from an initial setting in a linear
* fashion to zero.
*/
reduceTemperature = () => {
reduceTemperature() {
this.temperature =
this.initialTemp * (1.0 - this.iteration / this.maxIterations);
};
}
}
export default mxFastOrganicLayout;

72
src/mxgraph/layout/mxGraphLayout.js
View File

@ -4,11 +4,11 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxDictionary from "../util/mxDictionary";
import mxDictionary from '../util/mxDictionary';
import mxRectangle from '../util/mxRectangle';
import mxGeometry from "../model/mxGeometry";
import mxPoint from "../util/mxPoint";
import mxConstants from "../util/mxConstants";
import mxGeometry from '../model/mxGeometry';
import mxPoint from '../util/mxPoint';
import mxConstants from '../util/mxConstants';
class mxGraphLayout {
/**
@ -74,7 +74,7 @@ class mxGraphLayout {
* x - X-coordinate of the new cell location.
* y - Y-coordinate of the new cell location.
*/
moveCell = (cell, x, y) => {};
moveCell(cell, x, y) {}
/**
* Function: resizeCell
@ -89,7 +89,7 @@ class mxGraphLayout {
* cell - <mxCell> which has been moved.
* bounds - <mxRectangle> that represents the new cell bounds.
*/
resizeCell = (cell, bounds) => {};
resizeCell(cell, bounds) {}
/**
* Function: execute
@ -100,16 +100,16 @@ class mxGraphLayout {
*
* parent - <mxCell> whose children should be layed out.
*/
execute = parent => {};
execute(parent) {}
/**
* Function: getGraph
*
* Returns the graph that this layout operates on.
*/
getGraph = () => {
getGraph() {
return this.graph;
};
}
/**
* Function: getConstraint
@ -128,9 +128,9 @@ class mxGraphLayout {
* source - Optional boolean that specifies if the connection is incoming
* or outgoing. Default is null.
*/
getConstraint = (key, cell, edge, source) => {
getConstraint(key, cell, edge, source) {
return this.graph.getCurrentCellStyle(cell)[key];
};
}
/**
* Function: traverse
@ -163,7 +163,7 @@ class mxGraphLayout {
* null for the first step of the traversal.
* visited - Optional <mxDictionary> of cell paths for the visited cells.
*/
traverse = (vertex, directed, func, edge, visited) => {
traverse(vertex, directed, func, edge, visited) {
if (func != null && vertex != null) {
directed = directed != null ? directed : true;
visited = visited || new mxDictionary();
@ -189,7 +189,7 @@ class mxGraphLayout {
}
}
}
};
}
/**
* Function: isAncestor
@ -202,7 +202,7 @@ class mxGraphLayout {
* child - <mxCell> that specifies the child.
* traverseAncestors - boolean whether to
*/
isAncestor = (parent, child, traverseAncestors) => {
isAncestor(parent, child, traverseAncestors) {
if (!traverseAncestors) {
return this.graph.model.getParent(child) === parent;
}
@ -216,7 +216,7 @@ class mxGraphLayout {
}
return child === parent;
};
}
/**
* Function: isVertexMovable
@ -229,9 +229,9 @@ class mxGraphLayout {
*
* cell - <mxCell> whose movable state should be returned.
*/
isVertexMovable = cell => {
isVertexMovable(cell) {
return this.graph.isCellMovable(cell);
};
}
/**
* Function: isVertexIgnored
@ -243,12 +243,12 @@ class mxGraphLayout {
*
* vertex - <mxCell> whose ignored state should be returned.
*/
isVertexIgnored = vertex => {
isVertexIgnored(vertex) {
return (
!this.graph.getModel().isVertex(vertex) ||
!this.graph.isCellVisible(vertex)
);
};
}
/**
* Function: isEdgeIgnored
@ -260,7 +260,7 @@ class mxGraphLayout {
*
* cell - <mxCell> whose ignored state should be returned.
*/
isEdgeIgnored = edge => {
isEdgeIgnored(edge) {
const model = this.graph.getModel();
return (
@ -269,29 +269,29 @@ class mxGraphLayout {
model.getTerminal(edge, true) == null ||
model.getTerminal(edge, false) == null
);
};
}
/**
* Function: setEdgeStyleEnabled
*
* Disables or enables the edge style of the given edge.
*/
setEdgeStyleEnabled = (edge, value) => {
setEdgeStyleEnabled(edge, value) {
this.graph.setCellStyles(mxConstants.STYLE_NOEDGESTYLE, value ? '0' : '1', [
edge,
]);
};
}
/**
* Function: setOrthogonalEdge
*
* Disables or enables orthogonal end segments of the given edge.
*/
setOrthogonalEdge = (edge, value) => {
setOrthogonalEdge(edge, value) {
this.graph.setCellStyles(mxConstants.STYLE_ORTHOGONAL, value ? '1' : '0', [
edge,
]);
};
}
/**
* Function: getParentOffset
@ -299,7 +299,7 @@ class mxGraphLayout {
* Determines the offset of the given parent to the parent
* of the layout
*/
getParentOffset = parent => {
getParentOffset(parent) {
const result = new mxPoint();
if (parent != null && parent !== this.parent) {
@ -320,7 +320,7 @@ class mxGraphLayout {
}
return result;
};
}
/**
* Function: setEdgePoints
@ -328,7 +328,7 @@ class mxGraphLayout {
* Replaces the array of mxPoints in the geometry of the given edge
* with the given array of mxPoints.
*/
setEdgePoints = (edge, points) => {
setEdgePoints(edge, points) {
if (edge != null) {
const { model } = this.graph;
let geometry = model.getGeometry(edge);
@ -354,7 +354,7 @@ class mxGraphLayout {
geometry.points = points;
model.setGeometry(edge, geometry);
}
};
}
/**
* Function: setVertexLocation
@ -371,7 +371,7 @@ class mxGraphLayout {
* x - Integer that defines the x-coordinate of the new location.
* y - Integer that defines the y-coordinate of the new location.
*/
setVertexLocation = (cell, x, y) => {
setVertexLocation(cell, x, y) {
const model = this.graph.getModel();
let geometry = model.getGeometry(cell);
let result = null;
@ -425,7 +425,7 @@ class mxGraphLayout {
}
return result;
};
}
/**
* Function: getVertexBounds
@ -433,7 +433,7 @@ class mxGraphLayout {
* Returns an <mxRectangle> that defines the bounds of the given cell or
* the bounding box if <useBoundingBox> is true.
*/
getVertexBounds = cell => {
getVertexBounds(cell) {
let geo = this.graph.getModel().getGeometry(cell);
// Checks for oversize label bounding box and corrects
@ -478,21 +478,21 @@ class mxGraphLayout {
}
return new mxRectangle(geo.x, geo.y, geo.width, geo.height);
};
}
/**
* Function: arrangeGroups
*
* Shortcut to <mxGraph.updateGroupBounds> with moveGroup set to true.
*/
arrangeGroups = (
arrangeGroups(
cells,
border,
topBorder,
rightBorder,
bottomBorder,
leftBorder
) => {
) {
return this.graph.updateGroupBounds(
cells,
border,
@ -502,7 +502,7 @@ class mxGraphLayout {
bottomBorder,
leftBorder
);
};
}
}
export default mxGraphLayout;

26
src/mxgraph/layout/mxParallelEdgeLayout.js
View File

@ -4,9 +4,9 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxPoint from "../util/mxPoint";
import mxGraphLayout from "./mxGraphLayout";
import mxObjectIdentity from "../util/mxObjectIdentity";
import mxPoint from '../util/mxPoint';
import mxGraphLayout from './mxGraphLayout';
import mxObjectIdentity from '../util/mxObjectIdentity';
class mxParallelEdgeLayout extends mxGraphLayout {
/**
@ -76,7 +76,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
*
* Implements <mxGraphLayout.execute>.
*/
execute = (parent, cells) => {
execute(parent, cells) {
const lookup = this.findParallels(parent, cells);
this.graph.model.beginUpdate();
@ -91,14 +91,14 @@ class mxParallelEdgeLayout extends mxGraphLayout {
} finally {
this.graph.model.endUpdate();
}
};
}
/**
* Function: findParallels
*
* Finds the parallel edges in the given parent.
*/
findParallels = (parent, cells) => {
findParallels(parent, cells) {
const lookup = [];
const addCell = cell => {
@ -129,7 +129,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
}
return lookup;
};
}
/**
* Function: getEdgeId
@ -138,7 +138,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* edge direction and is built using the visible terminal of the given
* edge.
*/
getEdgeId = edge => {
getEdgeId(edge) {
const view = this.graph.getView();
// Cannot used cached visible terminal because this could be triggered in BEFORE_UNDO
@ -172,14 +172,14 @@ class mxParallelEdgeLayout extends mxGraphLayout {
}
return null;
};
}
/**
* Function: layout
*
* Lays out the parallel edges in the given array.
*/
layout = parallels => {
layout(parallels) {
const edge = parallels[0];
const view = this.graph.getView();
const model = this.graph.getModel();
@ -228,18 +228,18 @@ class mxParallelEdgeLayout extends mxGraphLayout {
}
}
}
};
}
/**
* Function: route
*
* Routes the given edge via the given point.
*/
route = (edge, x, y) => {
route(edge, x, y) {
if (this.graph.isCellMovable(edge)) {
this.setEdgePoints(edge, [new mxPoint(x, y)]);
}
};
}
}
export default mxParallelEdgeLayout;

12
src/mxgraph/layout/mxPartitionLayout.js
View File

@ -73,16 +73,16 @@ class mxPartitionLayout extends mxGraphLayout {
*
* Returns <horizontal>.
*/
isHorizontal = () => {
isHorizontal() {
return this.horizontal;
};
}
/**
* Function: moveCell
*
* Implements <mxGraphLayout.moveCell>.
*/
moveCell = (cell, x, y) => {
moveCell(cell, x, y) {
const model = this.graph.getModel();
const parent = model.getParent(cell);
@ -114,7 +114,7 @@ class mxPartitionLayout extends mxGraphLayout {
model.add(parent, cell, idx);
}
};
}
/**
* Function: execute
@ -122,7 +122,7 @@ class mxPartitionLayout extends mxGraphLayout {
* Implements <mxGraphLayout.execute>. All children where <isVertexIgnored>
* returns false and <isVertexMovable> returns true are modified.
*/
execute = parent => {
execute(parent) {
const horizontal = this.isHorizontal();
const model = this.graph.getModel();
let pgeo = model.getGeometry(parent);
@ -212,7 +212,7 @@ class mxPartitionLayout extends mxGraphLayout {
}
}
}
};
}
}
export default mxPartitionLayout;

12
src/mxgraph/layout/mxRadialTreeLayout.js
View File

@ -130,12 +130,12 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
*
* vertex - <mxCell> whose ignored state should be returned.
*/
isVertexIgnored = vertex => {
isVertexIgnored(vertex) {
return (
super.isVertexIgnored(vertex) ||
this.graph.getConnections(vertex).length === 0
);
};
}
/**
* Function: execute
@ -151,7 +151,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
* parent - <mxCell> whose children should be laid out.
* root - Optional <mxCell> that will be used as the root of the tree.
*/
execute = (parent, root) => {
execute(parent, root) {
this.parent = parent;
this.useBoundingBox = false;
@ -254,7 +254,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
);
}
}
};
}
/**
* Function: calcRowDims
@ -266,7 +266,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
* row - Array of internal nodes, the children of which are to be processed.
* rowNum - Integer indicating which row is being processed.
*/
calcRowDims = (row, rowNum) => {
calcRowDims(row, rowNum) {
if (row == null || row.length === 0) {
return;
}
@ -315,7 +315,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
if (rowHasChildren) {
this.calcRowDims(this.row[rowNum], rowNum + 1);
}
};
}
}
export default mxRadialTreeLayout;

40
src/mxgraph/layout/mxStackLayout.js
View File

@ -3,10 +3,10 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxGraphLayout from "./mxGraphLayout";
import mxRectangle from "../util/mxRectangle";
import mxUtils from "../util/mxUtils";
import mxConstants from "../util/mxConstants";
import mxGraphLayout from './mxGraphLayout';
import mxRectangle from '../util/mxRectangle';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
class mxStackLayout extends mxGraphLayout {
/**
@ -173,16 +173,16 @@ class mxStackLayout extends mxGraphLayout {
*
* Returns <horizontal>.
*/
isHorizontal = () => {
isHorizontal() {
return this.horizontal;
};
}
/**
* Function: moveCell
*
* Implements <mxGraphLayout.moveCell>.
*/
moveCell = (cell, x, y) => {
moveCell(cell, x, y) {
const model = this.graph.getModel();
const parent = model.getParent(cell);
const horizontal = this.isHorizontal();
@ -226,7 +226,7 @@ class mxStackLayout extends mxGraphLayout {
model.add(parent, cell, idx);
}
};
}
/**
* Function: getParentSize
@ -234,7 +234,7 @@ class mxStackLayout extends mxGraphLayout {
* Returns the size for the parent container or the size of the graph
* container if the parent is a layer or the root of the model.
*/
getParentSize = parent => {
getParentSize(parent) {
const model = this.graph.getModel();
let pgeo = model.getGeometry(parent);
@ -252,14 +252,14 @@ class mxStackLayout extends mxGraphLayout {
}
return pgeo;
};
}
/**
* Function: getLayoutCells
*
* Returns the cells to be layouted.
*/
getLayoutCells = parent => {
getLayoutCells(parent) {
const model = this.graph.getModel();
const childCount = model.getChildCount(parent);
const cells = [];
@ -292,14 +292,14 @@ class mxStackLayout extends mxGraphLayout {
}
return cells;
};
}
/**
* Function: snap
*
* Snaps the given value to the grid size.
*/
snap = value => {
snap(value) {
if (this.gridSize != null && this.gridSize > 0) {
value = Math.max(value, this.gridSize);
@ -310,7 +310,7 @@ class mxStackLayout extends mxGraphLayout {
}
return value;
};
}
/**
* Function: execute
@ -320,7 +320,7 @@ class mxStackLayout extends mxGraphLayout {
* Only children where <isVertexIgnored> returns false are taken into
* account.
*/
execute = parent => {
execute(parent) {
if (parent != null) {
const pgeo = this.getParentSize(parent);
const horizontal = this.isHorizontal();
@ -515,7 +515,7 @@ class mxStackLayout extends mxGraphLayout {
model.endUpdate();
}
}
};
}
/**
* Function: setChildGeometry
@ -527,7 +527,7 @@ class mxStackLayout extends mxGraphLayout {
* child - The given child of <mxCell>.
* geo - The specific geometry of <mxGeometry>.
*/
setChildGeometry = (child, geo) => {
setChildGeometry(child, geo) {
const geo2 = this.graph.getCellGeometry(child);
if (
@ -539,7 +539,7 @@ class mxStackLayout extends mxGraphLayout {
) {
this.graph.getModel().setGeometry(child, geo);
}
};
}
/**
* Function: updateParentGeometry
@ -552,7 +552,7 @@ class mxStackLayout extends mxGraphLayout {
* pgeo - The new <mxGeometry> for parent.
* last - The last <mxGeometry>.
*/
updateParentGeometry = (parent, pgeo, last) => {
updateParentGeometry(parent, pgeo, last) {
const horizontal = this.isHorizontal();
const model = this.graph.getModel();
@ -584,7 +584,7 @@ class mxStackLayout extends mxGraphLayout {
) {
model.setGeometry(parent, pgeo2);
}
};
}
}
export default mxStackLayout;

4
src/mxgraph/model/atomic_changes/mxCellAttributeChange.js
View File

@ -44,7 +44,7 @@ class mxCellAttributeChange {
* Changes the attribute of the cell's user object by
* using <mxCell.setAttribute>.
*/
execute = () => {
execute() {
if (this.cell != null) {
const tmp = this.cell.getAttribute(this.attribute);
@ -56,7 +56,7 @@ class mxCellAttributeChange {
this.previous = tmp;
}
};
}
}
export default mxCellAttributeChange;

8
src/mxgraph/model/atomic_changes/mxChildChange.js
View File

@ -26,7 +26,7 @@ class mxChildChange {
* removes or restores the cell's
* connections.
*/
execute = () => {
execute() {
if (this.child != null) {
let tmp = this.model.getParent(this.child);
const tmp2 = tmp != null ? tmp.getIndex(this.child) : 0;
@ -50,7 +50,7 @@ class mxChildChange {
this.index = this.previousIndex;
this.previousIndex = tmp2;
}
};
}
/**
* Function: disconnect
@ -59,7 +59,7 @@ class mxChildChange {
* terminals and stores the previous terminal in the
* cell's terminals.
*/
connect = (cell, isConnect) => {
connect(cell, isConnect) {
isConnect = isConnect != null ? isConnect : true;
const source = cell.getTerminal(true);
@ -89,7 +89,7 @@ class mxChildChange {
for (let i = 0; i < childCount; i += 1) {
this.connect(this.model.getChildAt(cell, i), isConnect);
}
};
}
}
export default mxChildChange;

4
src/mxgraph/model/atomic_changes/mxCollapseChange.js
View File

@ -22,7 +22,7 @@ class mxCollapseChange {
* Changes the collapsed state of <cell> to <previous> using
* <mxGraphModel.collapsedStateForCellChanged>.
*/
execute = () => {
execute() {
if (this.cell != null) {
this.collapsed = this.previous;
this.previous = this.model.collapsedStateForCellChanged(
@ -30,7 +30,7 @@ class mxCollapseChange {
this.previous
);
}
};
}
}
export default mxCollapseChange;

4
src/mxgraph/model/atomic_changes/mxGeometryChange.js
View File

@ -22,7 +22,7 @@ class mxGeometryChange {
* Changes the geometry of <cell> ro <previous> using
* <mxGraphModel.geometryForCellChanged>.
*/
execute = () => {
execute() {
if (this.cell != null) {
this.geometry = this.previous;
this.previous = this.model.geometryForCellChanged(
@ -30,7 +30,7 @@ class mxGeometryChange {
this.previous
);
}
};
}
}
export default mxGeometryChange;

4
src/mxgraph/model/atomic_changes/mxRootChange.js
View File

@ -21,10 +21,10 @@ class mxRootChange {
* Carries out a change of the root using
* <mxGraphModel.rootChanged>.
*/
execute = () => {
execute() {
this.root = this.previous;
this.previous = this.model.rootChanged(this.previous);
};
}
}
export default mxRootChange;

4
src/mxgraph/model/atomic_changes/mxStyleChange.js
View File

@ -22,12 +22,12 @@ class mxStyleChange {
* Changes the style of <cell> to <previous> using
* <mxGraphModel.styleForCellChanged>.
*/
execute = () => {
execute() {
if (this.cell != null) {
this.style = this.previous;
this.previous = this.model.styleForCellChanged(this.cell, this.previous);
}
};
}
}
export default mxStyleChange;

4
src/mxgraph/model/atomic_changes/mxTerminalChange.js
View File

@ -23,7 +23,7 @@ class mxTerminalChange {
* Changes the terminal of <cell> to <previous> using
* <mxGraphModel.terminalForCellChanged>.
*/
execute = () => {
execute() {
if (this.cell != null) {
this.terminal = this.previous;
this.previous = this.model.terminalForCellChanged(
@ -32,7 +32,7 @@ class mxTerminalChange {
this.source
);
}
};
}
}
export default mxTerminalChange;

4
src/mxgraph/model/atomic_changes/mxValueChange.js
View File

@ -22,11 +22,11 @@ class mxValueChange {
* Changes the value of <cell> to <previous> using
* <mxGraphModel.valueForCellChanged>.
*/
execute = () => {
execute() {
if (this.cell != null) {
this.value = this.previous;
this.previous = this.model.valueForCellChanged(this.cell, this.previous);
}
};
}
}
export default mxValueChange;

4
src/mxgraph/model/atomic_changes/mxVisibleChange.js
View File

@ -22,7 +22,7 @@ class mxVisibleChange {
* Changes the visible state of <cell> to <previous> using
* <mxGraphModel.visibleStateForCellChanged>.
*/
execute = () => {
execute() {
if (this.cell != null) {
this.visible = this.previous;
this.previous = this.model.visibleStateForCellChanged(
@ -30,7 +30,7 @@ class mxVisibleChange {
this.previous
);
}
};
}
}
export default mxVisibleChange;

160
src/mxgraph/model/mxCell.js
View File

@ -203,18 +203,18 @@ class mxCell {
*
* Returns the Id of the cell as a string.
*/
getId = () => {
getId() {
return this.id;
};
}
/**
* Function: setId
*
* Sets the Id of the cell to the given string.
*/
setId = id => {
setId(id) {
this.id = id;
};
}
/**
* Function: getValue
@ -222,9 +222,9 @@ class mxCell {
* Returns the user object of the cell. The user
* object is stored in <value>.
*/
getValue = () => {
getValue() {
return this.value;
};
}
/**
* Function: setValue
@ -232,9 +232,9 @@ class mxCell {
* Sets the user object of the cell. The user object
* is stored in <value>.
*/
setValue = value => {
setValue(value) {
this.value = value;
};
}
/**
* Function: valueChanged
@ -244,57 +244,57 @@ class mxCell {
* replaces the user object with the given value and
* returns the old user object.
*/
valueChanged = newValue => {
valueChanged(newValue) {
const previous = this.getValue();
this.setValue(newValue);
return previous;
};
}
/**
* Function: getGeometry
*
* Returns the <mxGeometry> that describes the <geometry>.
*/
getGeometry = () => {
getGeometry() {
return this.geometry;
};
}
/**
* Function: setGeometry
*
* Sets the <mxGeometry> to be used as the <geometry>.
*/
setGeometry = geometry => {
setGeometry(geometry) {
this.geometry = geometry;
};
}
/**
* Function: getStyle
*
* Returns a string that describes the <style>.
*/
getStyle = () => {
getStyle() {
return this.style;
};
}
/**
* Function: setStyle
*
* Sets the string to be used as the <style>.
*/
setStyle = style => {
setStyle(style) {
this.style = style;
};
}
/**
* Function: isVertex
*
* Returns true if the cell is a vertex.
*/
isVertex = () => {
isVertex() {
return this.vertex != 0;
};
}
/**
* Function: setVertex
@ -306,18 +306,18 @@ class mxCell {
*
* vertex - Boolean that specifies if the cell is a vertex.
*/
setVertex = vertex => {
setVertex(vertex) {
this.vertex = vertex;
};
}
/**
* Function: isEdge
*
* Returns true if the cell is an edge.
*/
isEdge = () => {
isEdge() {
return this.edge != 0;
};
}
/**
* Function: setEdge
@ -329,18 +329,18 @@ class mxCell {
*
* edge - Boolean that specifies if the cell is an edge.
*/
setEdge = edge => {
setEdge(edge) {
this.edge = edge;
};
}
/**
* Function: isConnectable
*
* Returns true if the cell is connectable.
*/
isConnectable = () => {
isConnectable() {
return this.connectable != 0;
};
}
/**
* Function: setConnectable
@ -351,18 +351,18 @@ class mxCell {
*
* connectable - Boolean that specifies the new connectable state.
*/
setConnectable = connectable => {
setConnectable(connectable) {
this.connectable = connectable;
};
}
/**
* Function: isVisible
*
* Returns true if the cell is visibile.
*/
isVisible = () => {
isVisible() {
return this.visible != 0;
};
}
/**
* Function: setVisible
@ -373,18 +373,18 @@ class mxCell {
*
* visible - Boolean that specifies the new visible state.
*/
setVisible = visible => {
setVisible(visible) {
this.visible = visible;
};
}
/**
* Function: isCollapsed
*
* Returns true if the cell is collapsed.
*/
isCollapsed = () => {
isCollapsed() {
return this.collapsed != 0;
};
}
/**
* Function: setCollapsed
@ -395,18 +395,18 @@ class mxCell {
*
* collapsed - Boolean that specifies the new collapsed state.
*/
setCollapsed = collapsed => {
setCollapsed(collapsed) {
this.collapsed = collapsed;
};
}
/**
* Function: getParent
*
* Returns the cell's parent.
*/
getParent = () => {
getParent() {
return this.parent;
};
}
/**
* Function: setParent
@ -417,9 +417,9 @@ class mxCell {
*
* parent - <mxCell> that represents the new parent.
*/
setParent = parent => {
setParent(parent) {
this.parent = parent;
};
}
/**
* Function: getTerminal
@ -431,9 +431,9 @@ class mxCell {
* source - Boolean that specifies if the source terminal should be
* returned.
*/
getTerminal = source => {
getTerminal(source) {
return source ? this.source : this.target;
};
}
/**
* Function: setTerminal
@ -446,7 +446,7 @@ class mxCell {
* isSource - Boolean that specifies if the source or target terminal
* should be set.
*/
setTerminal = (terminal, isSource) => {
setTerminal(terminal, isSource) {
if (isSource) {
this.source = terminal;
} else {
@ -454,16 +454,16 @@ class mxCell {
}
return terminal;
};
}
/**
* Function: getChildCount
*
* Returns the number of child cells.
*/
getChildCount = () => {
getChildCount() {
return this.children == null ? 0 : this.children.length;
};
}
/**
* Function: getIndex
@ -474,9 +474,9 @@ class mxCell {
*
* child - Child whose index should be returned.
*/
getIndex = child => {
getIndex(child) {
return mxUtils.indexOf(this.children, child);
};
}
/**
* Function: getChildAt
@ -487,9 +487,9 @@ class mxCell {
*
* index - Integer that specifies the child to be returned.
*/
getChildAt = index => {
getChildAt(index) {
return this.children == null ? null : this.children[index];
};
}
/**
* Function: insert
@ -505,7 +505,7 @@ class mxCell {
* index - Optional integer that specifies the index at which the child
* should be inserted into the child array.
*/
insert = (child, index) => {
insert(child, index) {
if (child != null) {
if (index == null) {
index = this.getChildCount();
@ -527,7 +527,7 @@ class mxCell {
}
return child;
};
}
/**
* Function: remove
@ -541,7 +541,7 @@ class mxCell {
* index - Integer that specifies the index of the child to be
* removed.
*/
remove = index => {
remove(index) {
let child = null;
if (this.children != null && index >= 0) {
@ -554,28 +554,28 @@ class mxCell {
}
return child;
};
}
/**
* Function: removeFromParent
*
* Removes the cell from its parent.
*/
removeFromParent = () => {
removeFromParent() {
if (this.parent != null) {
const index = this.parent.getIndex(this);
this.parent.remove(index);
}
};
}
/**
* Function: getEdgeCount
*
* Returns the number of edges in the edge array.
*/
getEdgeCount = () => {
getEdgeCount() {
return this.edges == null ? 0 : this.edges.length;
};
}
/**
* Function: getEdgeIndex
@ -586,9 +586,9 @@ class mxCell {
*
* edge - <mxCell> whose index in <edges> should be returned.
*/
getEdgeIndex = edge => {
getEdgeIndex(edge) {
return mxUtils.indexOf(this.edges, edge);
};
}
/**
* Function: getEdgeAt
@ -599,9 +599,9 @@ class mxCell {
*
* index - Integer that specifies the index of the edge to be returned.
*/
getEdgeAt = index => {
getEdgeAt(index) {
return this.edges == null ? null : this.edges[index];
};
}
/**
* Function: insertEdge
@ -614,7 +614,7 @@ class mxCell {
* edge - <mxCell> to be inserted into the edge array.
* isOutgoing - Boolean that specifies if the edge is outgoing.
*/
insertEdge = (edge, isOutgoing) => {
insertEdge(edge, isOutgoing) {
if (edge != null) {
edge.removeFromTerminal(isOutgoing);
edge.setTerminal(this, isOutgoing);
@ -633,7 +633,7 @@ class mxCell {
}
return edge;
};
}
/**
* Function: removeEdge
@ -646,7 +646,7 @@ class mxCell {
* edge - <mxCell> to be removed from the edge array.
* isOutgoing - Boolean that specifies if the edge is outgoing.
*/
removeEdge = (edge, isOutgoing) => {
removeEdge(edge, isOutgoing) {
if (edge != null) {
if (edge.getTerminal(!isOutgoing) != this && this.edges != null) {
const index = this.getEdgeIndex(edge);
@ -660,7 +660,7 @@ class mxCell {
}
return edge;
};
}
/**
* Function: removeFromTerminal
@ -672,13 +672,13 @@ class mxCell {
* isSource - Boolean that specifies if the edge should be removed from its
* source or target terminal.
*/
removeFromTerminal = isSource => {
removeFromTerminal(isSource) {
const terminal = this.getTerminal(isSource);
if (terminal != null) {
terminal.removeEdge(this, isSource);
}
};
}
/**
* Function: hasAttribute
@ -690,7 +690,7 @@ class mxCell {
*
* name - Name of the attribute.
*/
hasAttribute = name => {
hasAttribute(name) {
const userObject = this.getValue();
return userObject != null &&
@ -698,7 +698,7 @@ class mxCell {
userObject.hasAttribute
? userObject.hasAttribute(name)
: userObject.getAttribute(name) != null;
};
}
/**
* Function: getAttribute
@ -712,7 +712,7 @@ class mxCell {
* defaultValue - Optional default value to use if the attribute has no
* value.
*/
getAttribute = (name, defaultValue) => {
getAttribute(name, defaultValue) {
const userObject = this.getValue();
const val =
@ -721,7 +721,7 @@ class mxCell {
: null;
return val != null ? val : defaultValue;
};
}
/**
* Function: setAttribute
@ -733,7 +733,7 @@ class mxCell {
* name - Name of the attribute whose value should be set.
* value - New value of the attribute.
*/
setAttribute = (name, value) => {
setAttribute(name, value) {
const userObject = this.getValue();
if (
@ -742,7 +742,7 @@ class mxCell {
) {
userObject.setAttribute(name, value);
}
};
}
/**
* Function: clone
@ -751,19 +751,19 @@ class mxCell {
* the user object. All fields in <mxTransient> are ignored
* during the cloning.
*/
clone = () => {
clone() {
const clone = mxUtils.clone(this, this.mxTransient);
clone.setValue(this.cloneValue());
return clone;
};
}
/**
* Function: cloneValue
*
* Returns a clone of the cell's user object.
*/
cloneValue = () => {
cloneValue() {
let value = this.getValue();
if (value != null) {
@ -775,7 +775,7 @@ class mxCell {
}
return value;
};
}
}
export default mxCell;

26
src/mxgraph/model/mxGeometry.js
View File

@ -174,7 +174,7 @@ class mxGeometry extends mxRectangle {
this.alternateBounds = old;
}
};
}
/**
* Function: getTerminalPoint
@ -189,7 +189,7 @@ class mxGeometry extends mxRectangle {
*/
getTerminalPoint(isSource) {
return isSource ? this.sourcePoint : this.targetPoint;
};
}
/**
* Function: setTerminalPoint
@ -211,7 +211,7 @@ class mxGeometry extends mxRectangle {
}
return point;
};
}
/**
* Function: rotate
@ -264,7 +264,7 @@ class mxGeometry extends mxRectangle {
}
}
}
};
}
get width() {
return this._width || 0;
@ -310,8 +310,8 @@ class mxGeometry extends mxRectangle {
// Translates the geometry
if (!this.relative) {
this.x = this.x + dx;
this.y = this.y + dy;
this.x += dx;
this.y += dy;
}
// Translates the source point
@ -335,7 +335,7 @@ class mxGeometry extends mxRectangle {
}
}
}
};
}
/**
* Function: scale
@ -380,17 +380,17 @@ class mxGeometry extends mxRectangle {
// Translates the geometry
if (!this.relative) {
this.x = this.x * sx;
this.y = this.y * sy;
this.x *= sx;
this.y *= sy;
if (fixedAspect) {
sy = sx = Math.min(sx, sy);
}
this.width = this.width * sx;
this.height = this.height * sy;
this.width *= sx;
this.height *= sy;
}
};
}
/**
* Function: equals
@ -416,7 +416,7 @@ class mxGeometry extends mxRectangle {
((this.offset == null && obj.offset == null) ||
(this.offset != null && this.offset.equals(obj.offset)))
);
};
}
}
export default mxGeometry;

304
src/mxgraph/model/mxGraphModel.js
View File

File diff suppressed because it is too large Load Diff

8
src/mxgraph/shape/mxActor.js
View File

@ -59,19 +59,19 @@ class mxActor extends mxShape {
*
* Redirects to redrawPath for subclasses to work.
*/
paintVertexShape = (c, x, y, w, h) => {
paintVertexShape(c, x, y, w, h) {
c.translate(x, y);
c.begin();
this.redrawPath(c, x, y, w, h);
c.fillAndStroke();
};
}
/**
* Function: redrawPath
*
* Draws the path for this shape.
*/
redrawPath = (c, x, y, w, h) => {
redrawPath(c, x, y, w, h) {
const width = w / 3;
c.moveTo(0, h);
c.curveTo(0, (3 * h) / 5, 0, (2 * h) / 5, w / 2, (2 * h) / 5);
@ -79,7 +79,7 @@ class mxActor extends mxShape {
c.curveTo(w / 2 + width, 0, w / 2 + width, (2 * h) / 5, w / 2, (2 * h) / 5);
c.curveTo(w, (2 * h) / 5, w, (3 * h) / 5, w, h);
c.close();
};
}
}
export default mxActor;

8
src/mxgraph/shape/mxArrow.js
View File

@ -50,19 +50,19 @@ class mxArrow extends mxShape {
*
* Augments the bounding box with the edge width and markers.
*/
augmentBoundingBox = bbox => {
augmentBoundingBox(bbox) {
super.augmentBoundingBox.apply(bbox);
const w = Math.max(this.arrowWidth, this.endSize);
bbox.grow((w / 2 + this.strokewidth) * this.scale);
};
}
/**
* Function: paintEdgeShape
*
* Paints the line shape.
*/
paintEdgeShape = (c, pts) => {
paintEdgeShape(c, pts) {
// Geometry of arrow
const spacing = mxConstants.ARROW_SPACING;
const width = mxConstants.ARROW_WIDTH;
@ -108,7 +108,7 @@ class mxArrow extends mxShape {
c.close();
c.fillAndStroke();
};
}
}
export default mxArrow;

54
src/mxgraph/shape/mxArrowConnector.js
View File

@ -61,24 +61,24 @@ class mxArrowConnector extends mxShape {
*
* Hook for subclassers.
*/
isRoundable = () => {
isRoundable() {
return true;
};
}
/**
* Variable: resetStyles
*
* Overrides mxShape to reset spacing.
*/
resetStyles = () => {
resetStyles() {
super.resetStyles();
this.arrowSpacing = mxConstants.ARROW_SPACING;
};
}
/**
* Overrides apply to get smooth transition from default start- and endsize.
*/
apply = state => {
apply(state) {
super.apply(state);
if (this.style != null) {
@ -95,14 +95,14 @@ class mxArrowConnector extends mxShape {
mxConstants.ARROW_SIZE / 5
) * 3;
}
};
}
/**
* Function: augmentBoundingBox
*
* Augments the bounding box with the edge width and markers.
*/
augmentBoundingBox = bbox => {
augmentBoundingBox(bbox) {
super.augmentBoundingBox(bbox);
let w = this.getEdgeWidth();
@ -116,14 +116,14 @@ class mxArrowConnector extends mxShape {
}
bbox.grow((w / 2 + this.strokewidth) * this.scale);
};
}
/**
* Function: paintEdgeShape
*
* Paints the line shape.
*/
paintEdgeShape = (c, pts) => {
paintEdgeShape(c, pts) {
// Geometry of arrow
let strokeWidth = this.strokewidth;
@ -426,14 +426,14 @@ class mxArrowConnector extends mxShape {
c.end();
}
}
};
}
/**
* Function: paintMarker
*
* Paints the marker.
*/
paintMarker = (
paintMarker(
c,
ptX,
ptY,
@ -444,7 +444,7 @@ class mxArrowConnector extends mxShape {
edgeWidth,
spacing,
initialMove
) => {
) {
const widthArrowRatio = edgeWidth / arrowWidth;
const orthx = (edgeWidth * ny) / 2;
const orthy = (-edgeWidth * nx) / 2;
@ -468,59 +468,59 @@ class mxArrowConnector extends mxShape {
ptY + orthy / widthArrowRatio + spaceY
);
c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY);
};
}
/**
* Function: isArrowRounded
*
* Returns wether the arrow is rounded
*/
isArrowRounded = () => {
isArrowRounded() {
return this.isRounded;
};
}
/**
* Function: getStartArrowWidth
*
* Returns the width of the start arrow
*/
getStartArrowWidth = () => {
getStartArrowWidth() {
return mxConstants.ARROW_WIDTH;
};
}
/**
* Function: getEndArrowWidth
*
* Returns the width of the end arrow
*/
getEndArrowWidth = () => {
getEndArrowWidth() {
return mxConstants.ARROW_WIDTH;
};
}
/**
* Function: getEdgeWidth
*
* Returns the width of the body of the edge
*/
getEdgeWidth = () => {
getEdgeWidth() {
return mxConstants.ARROW_WIDTH / 3;
};
}
/**
* Function: isOpenEnded
*
* Returns whether the ends of the shape are drawn
*/
isOpenEnded = () => {
isOpenEnded() {
return false;
};
}
/**
* Function: isMarkerStart
*
* Returns whether the start marker is drawn
*/
isMarkerStart = () => {
isMarkerStart() {
return (
mxUtils.getValue(
this.style,
@ -528,14 +528,14 @@ class mxArrowConnector extends mxShape {
mxConstants.NONE
) !== mxConstants.NONE
);
};
}
/**
* Function: isMarkerEnd
*
* Returns whether the end marker is drawn
*/
isMarkerEnd = () => {
isMarkerEnd() {
return (
mxUtils.getValue(
this.style,
@ -543,7 +543,7 @@ class mxArrowConnector extends mxShape {
mxConstants.NONE
) !== mxConstants.NONE
);
};
}
}
export default mxArrowConnector;

4
src/mxgraph/shape/mxCloud.js
View File

@ -40,7 +40,7 @@ class mxCloud extends mxActor {
*
* Draws the path for this shape.
*/
redrawPath = (c, x, y, w, h) => {
redrawPath(c, x, y, w, h) {
c.moveTo(0.25 * w, 0.25 * h);
c.curveTo(0.05 * w, 0.25 * h, 0, 0.5 * h, 0.16 * w, 0.55 * h);
c.curveTo(0, 0.66 * h, 0.18 * w, 0.9 * h, 0.31 * w, 0.8 * h);
@ -49,7 +49,7 @@ class mxCloud extends mxActor {
c.curveTo(w, 0.3 * h, 0.8 * w, 0.1 * h, 0.625 * w, 0.2 * h);
c.curveTo(0.5 * w, 0.05 * h, 0.3 * w, 0.05 * h, 0.25 * w, 0.25 * h);
c.close();
};
}
}
export default mxCloud;

16
src/mxgraph/shape/mxConnector.js
View File

@ -41,18 +41,18 @@ class mxConnector extends mxPolyline {
* Updates the <boundingBox> for this shape using <createBoundingBox> and
* <augmentBoundingBox> and stores the result in <boundingBox>.
*/
updateBoundingBox = () => {
updateBoundingBox() {
this.useSvgBoundingBox =
this.style != null && this.style[mxConstants.STYLE_CURVED] === 1;
super.updateBoundingBox();
};
}
/**
* Function: paintEdgeShape
*
* Paints the line shape.
*/
paintEdgeShape = (c, pts) => {
paintEdgeShape(c, pts) {
// The indirection via functions for markers is needed in
// order to apply the offsets before painting the line and
// paint the markers after painting the line.
@ -73,7 +73,7 @@ class mxConnector extends mxPolyline {
if (targetMarker != null) {
targetMarker();
}
};
}
/**
* Function: createMarker
@ -81,7 +81,7 @@ class mxConnector extends mxPolyline {
* Prepares the marker by adding offsets in pts and returning a function to
* paint the marker.
*/
createMarker = (c, pts, source) => {
createMarker(c, pts, source) {
let result = null;
const n = pts.length;
const type = mxUtils.getValue(
@ -141,14 +141,14 @@ class mxConnector extends mxPolyline {
}
return result;
};
}
/**
* Function: augmentBoundingBox
*
* Augments the bounding box with the strokewidth and shadow offsets.
*/
augmentBoundingBox = bbox => {
augmentBoundingBox(bbox) {
super.augmentBoundingBox(bbox);
// Adds marker sizes
@ -188,7 +188,7 @@ class mxConnector extends mxPolyline {
}
bbox.grow(size * this.scale);
};
}
}
export default mxConnector;

12
src/mxgraph/shape/mxCylinder.js
View File

@ -58,7 +58,7 @@ class mxCylinder extends mxShape {
*
* Redirects to redrawPath for subclasses to work.
*/
paintVertexShape = (c, x, y, w, h) => {
paintVertexShape(c, x, y, w, h) {
c.translate(x, y);
c.begin();
this.redrawPath(c, x, y, w, h, false);
@ -74,23 +74,23 @@ class mxCylinder extends mxShape {
this.redrawPath(c, x, y, w, h, true);
c.stroke();
}
};
}
/**
* Function: getCylinderSize
*
* Returns the cylinder size.
*/
getCylinderSize = (x, y, w, h) => {
getCylinderSize(x, y, w, h) {
return Math.min(this.maxHeight, Math.round(h / 5));
};
}
/**
* Function: redrawPath
*
* Draws the path for this shape.
*/
redrawPath = (c, x, y, w, h, isForeground) => {
redrawPath(c, x, y, w, h, isForeground) {
const dy = this.getCylinderSize(x, y, w, h);
if (
@ -114,7 +114,7 @@ class mxCylinder extends mxShape {
c.curveTo(w, h + dy / 3, 0, h + dy / 3, 0, h - dy);
c.close();
}
};
}
}
export default mxCylinder;

12
src/mxgraph/shape/mxDoubleEllipse.js
View File

@ -64,17 +64,17 @@ class mxDoubleEllipse extends mxShape {
*
* Paints the background.
*/
paintBackground = (c, x, y, w, h) => {
paintBackground(c, x, y, w, h) {
c.ellipse(x, y, w, h);
c.fillAndStroke();
};
}
/**
* Function: paintForeground
*
* Paints the foreground.
*/
paintForeground = (c, x, y, w, h) => {
paintForeground(c, x, y, w, h) {
if (!this.outline) {
const margin = mxUtils.getValue(
this.style,
@ -93,14 +93,14 @@ class mxDoubleEllipse extends mxShape {
c.stroke();
}
};
}
/**
* Function: getLabelBounds
*
* Returns the bounds for the label.
*/
getLabelBounds = rect => {
getLabelBounds(rect) {
const margin =
mxUtils.getValue(
this.style,
@ -117,7 +117,7 @@ class mxDoubleEllipse extends mxShape {
rect.width - 2 * margin,
rect.height - 2 * margin
);
};
}
}
export default mxDoubleEllipse;

4
src/mxgraph/shape/mxEllipse.js
View File

@ -39,10 +39,10 @@ class mxEllipse extends mxShape {
*
* Paints the ellipse shape.
*/
paintVertexShape = (c, x, y, w, h) => {
paintVertexShape(c, x, y, w, h) {
c.ellipse(x, y, w, h);
c.fillAndStroke();
};
}
}
export default mxEllipse;

4
src/mxgraph/shape/mxHexagon.js
View File

@ -27,7 +27,7 @@ class mxHexagon extends mxActor {
*
* Draws the path for this shape.
*/
redrawPath = (c, x, y, w, h) => {
redrawPath(c, x, y, w, h) {
const arcSize =
mxUtils.getValue(
this.style,
@ -48,7 +48,7 @@ class mxHexagon extends mxActor {
arcSize,
true
);
};
}
}
export default mxHexagon;

28
src/mxgraph/shape/mxImageShape.js
View File

@ -52,9 +52,9 @@ class mxImageShape extends mxRectangleShape {
*
* Disables offset in IE9 for crisper image output.
*/
getSvgScreenOffset = () => {
getSvgScreenOffset() {
return 0;
};
}
/**
* Function: apply
@ -73,7 +73,7 @@ class mxImageShape extends mxRectangleShape {
*
* state - <mxCellState> of the corresponding cell.
*/
apply = state => {
apply(state) {
super.apply(state);
this.fill = null;
@ -90,7 +90,7 @@ class mxImageShape extends mxRectangleShape {
this.flipV =
this.flipV || mxUtils.getValue(this.style, 'imageFlipV', 0) === 1;
}
};
}
/**
* Function: isHtmlAllowed
@ -98,9 +98,9 @@ class mxImageShape extends mxRectangleShape {
* Returns true if HTML is allowed for this shape. This implementation always
* returns false.
*/
isHtmlAllowed = () => {
isHtmlAllowed() {
return !this.preserveImageAspect;
};
}
/**
* Function: createHtml
@ -109,28 +109,28 @@ class mxImageShape extends mxRectangleShape {
* this shape. This implementation falls back to <createVml>
* so that the HTML creation is optional.
*/
createHtml = () => {
createHtml() {
const node = document.createElement('div');
node.style.position = 'absolute';
return node;
};
}
/**
* Function: isRoundable
*
* Disables inherited roundable support.
*/
isRoundable = (c, x, y, w, h) => {
isRoundable(c, x, y, w, h) {
return false;
};
}
/**
* Function: paintVertexShape
*
* Generic background painting implementation.
*/
paintVertexShape = (c, x, y, w, h) => {
paintVertexShape(c, x, y, w, h) {
if (this.image != null) {
const fill = mxUtils.getValue(
this.style,
@ -169,14 +169,14 @@ class mxImageShape extends mxRectangleShape {
} else {
this.paintBackground(c, x, y, w, h);
}
};
}
/**
* Function: redraw
*
* Overrides <mxShape.redraw> to preserve the aspect ratio of images.
*/
redrawHtmlShape = () => {
redrawHtmlShape() {
this.node.style.left = `${Math.round(this.bounds.x)}px`;
this.node.style.top = `${Math.round(this.bounds.y)}px`;
this.node.style.width = `${Math.max(0, Math.round(this.bounds.width))}px`;
@ -241,7 +241,7 @@ class mxImageShape extends mxRectangleShape {
} else {
this.setTransparentBackgroundImage(this.node);
}
};
}
}
export default mxImageShape;

36
src/mxgraph/shape/mxLabel.js
View File

@ -66,7 +66,7 @@ class mxLabel extends mxRectangleShape {
*
* Initializes the shape and the <indicator>.
*/
init = container => {
init(container) {
super.init(container);
if (this.indicatorShape != null) {
@ -74,7 +74,7 @@ class mxLabel extends mxRectangleShape {
this.indicator.dialect = this.dialect;
this.indicator.init(this.node);
}
};
}
/**
* Function: redraw
@ -82,7 +82,7 @@ class mxLabel extends mxRectangleShape {
* Reconfigures this shape. This will update the colors of the indicator
* and reconfigure it if required.
*/
redraw = () => {
redraw() {
if (this.indicator != null) {
this.indicator.fill = this.indicatorColor;
this.indicator.stroke = this.indicatorStrokeColor;
@ -91,7 +91,7 @@ class mxLabel extends mxRectangleShape {
this.indicator.redraw();
}
super.redraw();
};
}
/**
* Function: isHtmlAllowed
@ -99,31 +99,31 @@ class mxLabel extends mxRectangleShape {
* Returns true for non-rounded, non-rotated shapes with no glass gradient and
* no indicator shape.
*/
isHtmlAllowed = () => {
isHtmlAllowed() {
return (
super.isHtmlAllowed() &&
this.indicatorColor == null &&
this.indicatorShape == null
);
};
}
/**
* Function: paintForeground
*
* Generic background painting implementation.
*/
paintForeground = (c, x, y, w, h) => {
paintForeground(c, x, y, w, h) {
this.paintImage(c, x, y, w, h);
this.paintIndicator(c, x, y, w, h);
super.paintForeground(c, x, y, w, h);
};
}
/**
* Function: paintImage
*
* Generic background painting implementation.
*/
paintImage = (c, x, y, w, h) => {
paintImage(c, x, y, w, h) {
if (this.image != null) {
const bounds = this.getImageBounds(x, y, w, h);
c.image(
@ -137,14 +137,14 @@ class mxLabel extends mxRectangleShape {
false
);
}
};
}
/**
* Function: getImageBounds
*
* Generic background painting implementation.
*/
getImageBounds = (x, y, w, h) => {
getImageBounds(x, y, w, h) {
const align = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_ALIGN,
@ -188,14 +188,14 @@ class mxLabel extends mxRectangleShape {
}
return new mxRectangle(x, y, width, height);
};
}
/**
* Function: paintIndicator
*
* Generic background painting implementation.
*/
paintIndicator = (c, x, y, w, h) => {
paintIndicator(c, x, y, w, h) {
if (this.indicator != null) {
this.indicator.bounds = this.getIndicatorBounds(x, y, w, h);
this.indicator.paint(c);
@ -212,14 +212,14 @@ class mxLabel extends mxRectangleShape {
false
);
}
};
}
/**
* Function: getIndicatorBounds
*
* Generic background painting implementation.
*/
getIndicatorBounds = (x, y, w, h) => {
getIndicatorBounds(x, y, w, h) {
const align = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_ALIGN,
@ -261,14 +261,14 @@ class mxLabel extends mxRectangleShape {
}
return new mxRectangle(x, y, width, height);
};
}
/**
* Function: redrawHtmlShape
*
* Generic background painting implementation.
*/
redrawHtmlShape = () => {
redrawHtmlShape() {
super.redrawHtmlShape();
// Removes all children
@ -299,7 +299,7 @@ class mxLabel extends mxRectangleShape {
this.node.appendChild(node);
}
};
}
}
export default mxLabel;

4
src/mxgraph/shape/mxLine.js
View File

@ -46,7 +46,7 @@ class mxLine extends mxShape {
*
* Redirects to redrawPath for subclasses to work.
*/
paintVertexShape = (c, x, y, w, h) => {
paintVertexShape(c, x, y, w, h) {
c.begin();
if (this.vertical) {
@ -60,7 +60,7 @@ class mxLine extends mxShape {
}
c.stroke();
};
}
}
export default mxLine;

20
src/mxgraph/shape/mxPolyline.js
View File

@ -40,27 +40,27 @@ class mxPolyline extends mxShape {
*
* Returns 0.
*/
getRotation = () => {
getRotation() {
return 0;
};
}
/**
* Function: getShapeRotation
*
* Returns 0.
*/
getShapeRotation = () => {
getShapeRotation() {
return 0;
};
}
/**
* Function: isPaintBoundsInverted
*
* Returns false.
*/
isPaintBoundsInverted = () => {
isPaintBoundsInverted() {
return false;
};
}
/**
* Function: paintEdgeShape
@ -85,7 +85,7 @@ class mxPolyline extends mxShape {
*
* Paints the line shape.
*/
paintLine = (c, pts, rounded) => {
paintLine(c, pts, rounded) {
const arcSize =
mxUtils.getValue(
this.style,
@ -95,14 +95,14 @@ class mxPolyline extends mxShape {
c.begin();
this.addPoints(c, pts, rounded, arcSize, false);
c.stroke();
};
}
/**
* Function: paintCurvedLine
*
* Paints a curved line.
*/
paintCurvedLine = (c, pts) => {
paintCurvedLine(c, pts) {
c.begin();
const pt = pts[0];
@ -124,7 +124,7 @@ class mxPolyline extends mxShape {
c.quadTo(p0.x, p0.y, p1.x, p1.y);
c.stroke();
};
}
}
export default mxPolyline;

16
src/mxgraph/shape/mxRectangleShape.js
View File

@ -42,7 +42,7 @@ class mxRectangleShape extends mxShape {
*
* Returns true for non-rounded, non-rotated shapes with no glass gradient.
*/
isHtmlAllowed = () => {
isHtmlAllowed() {
let events = true;
if (this.style != null) {
@ -57,14 +57,14 @@ class mxRectangleShape extends mxShape {
this.rotation == 0 &&
(events || (this.fill != null && this.fill != mxConstants.NONE))
);
};
}
/**
* Function: paintBackground
*
* Generic background painting implementation.
*/
paintBackground = (c, x, y, w, h) => {
paintBackground(c, x, y, w, h) {
let events = true;
if (this.style != null) {
@ -117,23 +117,23 @@ class mxRectangleShape extends mxShape {
c.fillAndStroke();
}
};
}
/**
* Function: isRoundable
*
* Adds roundable support.
*/
isRoundable = (c, x, y, w, h) => {
isRoundable(c, x, y, w, h) {
return true;
};
}
/**
* Function: paintForeground
*
* Generic background painting implementation.
*/
paintForeground = (c, x, y, w, h) => {
paintForeground(c, x, y, w, h) {
if (
this.glass &&
!this.outline &&
@ -149,7 +149,7 @@ class mxRectangleShape extends mxShape {
this.getArcSize(w + this.strokewidth, h + this.strokewidth)
);
}
};
}
}
export default mxRectangleShape;

8
src/mxgraph/shape/mxRhombus.js
View File

@ -40,16 +40,16 @@ class mxRhombus extends mxShape {
*
* Adds roundable support.
*/
isRoundable = () => {
isRoundable() {
return true;
};
}
/**
* Function: paintVertexShape
*
* Generic painting implementation.
*/
paintVertexShape = (c, x, y, w, h) => {
paintVertexShape(c, x, y, w, h) {
const hw = w / 2;
const hh = h / 2;
@ -73,7 +73,7 @@ class mxRhombus extends mxShape {
true
);
c.fillAndStroke();
};
}
}
export default mxRhombus;

217
src/mxgraph/shape/mxShape.js
View File

@ -9,7 +9,7 @@ import mxConstants from '../util/mxConstants';
import mxPoint from '../util/mxPoint';
import mxSvgCanvas2D from '../util/mxSvgCanvas2D';
import mxEvent from '../util/mxEvent';
import mxClient from "../mxClient";
import mxClient from '../mxClient';
const toBool = i => {
if (i === 0) return false;
@ -238,7 +238,7 @@ class mxShape {
*
* container - DOM node that will contain the shape.
*/
init = container => {
init(container) {
if (this.node == null) {
this.node = this.create(container);
@ -246,14 +246,14 @@ class mxShape {
container.appendChild(this.node);
}
}
};
}
/**
* Function: initStyles
*
* Sets the styles to their default values.
*/
initStyles = container => {
initStyles(container) {
this.strokewidth = 1;
this.rotation = 0;
this.opacity = 100;
@ -261,7 +261,7 @@ class mxShape {
this.strokeOpacity = 100;
this.flipH = false;
this.flipV = false;
};
}
/**
* Function: isHtmlAllowed
@ -269,16 +269,16 @@ class mxShape {
* Returns true if HTML is allowed for this shape. This implementation always
* returns false.
*/
isHtmlAllowed = () => {
isHtmlAllowed() {
return false;
};
}
/**
* Function: getSvgScreenOffset
*
* Returns 0, or 0.5 if <strokewidth> % 2 == 1.
*/
getSvgScreenOffset = () => {
getSvgScreenOffset() {
const sw =
this.stencil && this.stencil.strokewidth !== 'inherit'
? Number(this.stencil.strokewidth)
@ -287,7 +287,7 @@ class mxShape {
return mxUtils.mod(Math.max(1, Math.round(sw * this.scale)), 2) === 1
? 0.5
: 0;
};
}
/**
* Function: create
@ -301,7 +301,7 @@ class mxShape {
*
* container - DOM node that will contain the shape.
*/
create = container => {
create(container) {
let node = null;
if (container != null && container.ownerSVGElement != null) {
@ -311,16 +311,16 @@ class mxShape {
}
return node;
};
}
/**
* Function: createSvg
*
* Creates and returns the SVG node(s) to represent this shape.
*/
createSvg = () => {
createSvg() {
return document.createElementNS(mxConstants.NS_SVG, 'g');
};
}
/**
* Function: createHtml
@ -329,12 +329,12 @@ class mxShape {
* this shape. This implementation falls back to <createVml>
* so that the HTML creation is optional.
*/
createHtml = () => {
createHtml() {
const node = document.createElement('div');
node.style.position = 'absolute';
return node;
};
}
/**
* Function: reconfigure
@ -342,9 +342,9 @@ class mxShape {
* Reconfigures this shape. This will update the colors etc in
* addition to the bounds or points.
*/
reconfigure = () => {
reconfigure() {
this.redraw();
};
}
/**
* Function: redraw
@ -376,7 +376,7 @@ class mxShape {
*
* Removes all child nodes and resets all CSS.
*/
clear = () => {
clear() {
if (this.node.ownerSVGElement != null) {
while (this.node.lastChild != null) {
this.node.removeChild(this.node.lastChild);
@ -387,18 +387,23 @@ class mxShape {
}`;
this.node.innerHTML = '';
}
};
}
/**
* Function: updateBoundsFromPoints
*
* Updates the bounds based on the points.
*/
updateBoundsFromPoints = () => {
updateBoundsFromPoints() {
const pts = this.points;
if (pts != null && pts.length > 0 && pts[0] != null) {
this.bounds = new mxRectangle(Math.round(pts[0].x), Math.round(pts[0].y), 1, 1);
this.bounds = new mxRectangle(
Math.round(pts[0].x),
Math.round(pts[0].y),
1,
1
);
for (let i = 1; i < this.points.length; i += 1) {
if (pts[i] != null) {
@ -408,7 +413,7 @@ class mxShape {
}
}
}
};
}
/**
* Function: getLabelBounds
@ -417,7 +422,7 @@ class mxShape {
* given scaled and translated bounds of the shape. This method should not
* change the rectangle in-place. This implementation returns the given rect.
*/
getLabelBounds = rect => {
getLabelBounds(rect) {
const d = mxUtils.getValue(
this.style,
mxConstants.STYLE_DIRECTION,
@ -474,7 +479,7 @@ class mxShape {
return r;
}
return rect;
};
}
/**
* Function: getLabelMargins
@ -483,16 +488,16 @@ class mxShape {
* computing the label bounds as an <mxRectangle>, where the bottom and right
* margin are defined in the width and height of the rectangle, respectively.
*/
getLabelMargins = rect => {
getLabelMargins(rect) {
return null;
};
}
/**
* Function: checkBounds
*
* Returns true if the bounds are not null and all of its variables are numeric.
*/
checkBounds = () => {
checkBounds() {
return (
!Number.isNaN(this.scale) &&
Number.isFinite(this.scale) &&
@ -505,14 +510,14 @@ class mxShape {
this.bounds.width > 0 &&
this.bounds.height > 0
);
};
}
/**
* Function: redrawShape
*
* Updates the SVG shape.
*/
redrawShape = () => {
redrawShape() {
const canvas = this.createCanvas();
if (canvas != null) {
@ -530,14 +535,14 @@ class mxShape {
this.destroyCanvas(canvas);
}
};
}
/**
* Function: createCanvas
*
* Creates a new canvas for drawing this shape. May return null.
*/
createCanvas = () => {
createCanvas() {
let canvas = null;
// LATER: Check if reusing existing DOM nodes improves performance
@ -562,14 +567,14 @@ class mxShape {
}
return canvas;
};
}
/**
* Function: createSvgCanvas
*
* Creates and returns an <mxSvgCanvas2D> for rendering this shape.
*/
createSvgCanvas = () => {
createSvgCanvas() {
const canvas = new mxSvgCanvas2D(this.node, false);
canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0;
canvas.pointerEventsValue = this.svgPointerEvents;
@ -591,26 +596,26 @@ class mxShape {
}
return canvas;
};
}
/**
* Function: redrawHtml
*
* Allow optimization by replacing VML with HTML.
*/
redrawHtmlShape = () => {
redrawHtmlShape() {
// LATER: Refactor methods
this.updateHtmlBounds(this.node);
this.updateHtmlFilters(this.node);
this.updateHtmlColors(this.node);
};
}
/**
* Function: updateHtmlFilters
*
* Allow optimization by replacing VML with HTML.
*/
updateHtmlFilters = node => {
updateHtmlFilters(node) {
let f = '';
if (this.opacity < 100) {
@ -661,14 +666,14 @@ class mxShape {
}
node.style.filter = f;
};
}
/**
* Function: updateHtmlColors
*
* Allow optimization by replacing VML with HTML.
*/
updateHtmlColors = node => {
updateHtmlColors(node) {
let color = this.stroke;
if (color != null && color !== mxConstants.NONE) {
@ -700,14 +705,14 @@ class mxShape {
} else {
this.setTransparentBackgroundImage(node);
}
};
}
/**
* Function: updateHtmlBounds
*
* Allow optimization by replacing VML with HTML.
*/
updateHtmlBounds = node => {
updateHtmlBounds(node) {
let sw =
document.documentMode >= 9 ? 0 : Math.ceil(this.strokewidth * this.scale);
node.style.borderWidth = `${Math.max(1, sw)}px`;
@ -722,7 +727,7 @@ class mxShape {
node.style.width = `${Math.round(Math.max(0, this.bounds.width + sw))}px`;
node.style.height = `${Math.round(Math.max(0, this.bounds.height + sw))}px`;
};
}
/**
* Function: destroyCanvas
@ -730,7 +735,7 @@ class mxShape {
* Destroys the given canvas which was used for drawing. This implementation
* increments the reference counts on all shared gradients used in the canvas.
*/
destroyCanvas = canvas => {
destroyCanvas(canvas) {
// Manages reference counts
if (canvas instanceof mxSvgCanvas2D) {
// Increments ref counts
@ -745,28 +750,28 @@ class mxShape {
this.releaseSvgGradients(this.oldGradients);
this.oldGradients = canvas.gradients;
}
};
}
/**
* Function: beforePaint
*
* Invoked before paint is called.
*/
beforePaint = c => {};
beforePaint(c) {}
/**
* Function: afterPaint
*
* Invokes after paint was called.
*/
afterPaint = c => {};
afterPaint(c) {}
/**
* Function: paint
*
* Generic rendering code.
*/
paint = c => {
paint(c) {
let strokeDrawn = false;
if (c != null && this.outline) {
@ -869,7 +874,7 @@ class mxShape {
c.rect(x, y, w, h);
c.stroke();
}
};
}
/**
* Function: configureCanvas
@ -936,16 +941,16 @@ class mxShape {
*
* Returns the bounding box for the gradient box for this shape.
*/
getGradientBounds = (c, x, y, w, h) => {
getGradientBounds(c, x, y, w, h) {
return new mxRectangle(x, y, w, h);
};
}
/**
* Function: updateTransform
*
* Sets the scale and rotation on the given canvas.
*/
updateTransform = (c, x, y, w, h) => {
updateTransform(c, x, y, w, h) {
// NOTE: Currently, scale is implemented in state and canvas. This will
// move to canvas in a later version, so that the states are unscaled
// and untranslated and do not need an update after zooming or panning.
@ -957,14 +962,14 @@ class mxShape {
x + w / 2,
y + h / 2
);
};
}
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
paintVertexShape = (c, x, y, w, h) => {
paintVertexShape(c, x, y, w, h) {
this.paintBackground(c, x, y, w, h);
if (
@ -981,38 +986,42 @@ class mxShape {
c.setShadow(false);
this.paintForeground(c, x, y, w, h);
}
};
}
/**
* Function: paintBackground
*
* Hook for subclassers. This implementation is empty.
*/
paintBackground = (c, x, y, w, h) => {};
paintBackground(c, x, y, w, h) {}
/**
* Function: paintForeground
*
* Hook for subclassers. This implementation is empty.
*/
paintForeground = (c, x, y, w, h) => {};
paintForeground(c, x, y, w, h) {}
/**
* Function: paintEdgeShape
*
* Hook for subclassers. This implementation is empty.
*/
paintEdgeShape = (c, pts) => {};
paintEdgeShape(c, pts) {}
/**
* Function: getArcSize
*
* Returns the arc size for the given dimension.
*/
getArcSize = (w, h) => {
getArcSize(w, h) {
let r = 0;
if (toBool(mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0))) {
if (
toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0)
)
) {
r = Math.min(
w / 2,
Math.min(
@ -1036,14 +1045,14 @@ class mxShape {
}
return r;
};
}
/**
* Function: paintGlassEffect
*
* Paints the glass gradient effect.
*/
paintGlassEffect = (c, x, y, w, h, arc) => {
paintGlassEffect(c, x, y, w, h, arc) {
const sw = Math.ceil(this.strokewidth / 2);
const size = 0.4;
@ -1067,14 +1076,14 @@ class mxShape {
c.close();
c.fill();
};
}
/**
* Function: addPoints
*
* Paints the given points with rounded corners.
*/
addPoints = (c, pts, rounded, arcSize, close, exclude, initialMove) => {
addPoints(c, pts, rounded, arcSize, close, exclude, initialMove) {
if (pts != null && pts.length > 0) {
initialMove = initialMove != null ? initialMove : true;
const pe = pts[pts.length - 1];
@ -1162,7 +1171,7 @@ class mxShape {
c.lineTo(pe.x, pe.y);
}
}
};
}
/**
* Function: resetStyles
@ -1316,7 +1325,7 @@ class mxShape {
this.flipH = toBool(
mxUtils.getValue(this.style, 'stencilFlipH', 0) || this.flipH
);
this.flipV =toBool(
this.flipV = toBool(
mxUtils.getValue(this.style, 'stencilFlipV', 0) || this.flipV
);
}
@ -1331,29 +1340,17 @@ class mxShape {
}
this.isShadow = toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_SHADOW,
this.isShadow
));
mxUtils.getValue(this.style, mxConstants.STYLE_SHADOW, this.isShadow)
);
this.isDashed = toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_DASHED,
this.isDashed
));
mxUtils.getValue(this.style, mxConstants.STYLE_DASHED, this.isDashed)
);
this.isRounded = toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_ROUNDED,
this.isRounded
));
mxUtils.getValue(this.style, mxConstants.STYLE_ROUNDED, this.isRounded)
);
this.glass = toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_GLASS,
this.glass
));
mxUtils.getValue(this.style, mxConstants.STYLE_GLASS, this.glass)
);
if (this.fill === mxConstants.NONE) {
this.fill = null;
@ -1376,7 +1373,7 @@ class mxShape {
*
* cursor - The cursor to be used.
*/
setCursor = cursor => {
setCursor(cursor) {
if (cursor == null) {
cursor = '';
}
@ -1386,25 +1383,25 @@ class mxShape {
if (this.node != null) {
this.node.style.cursor = cursor;
}
};
}
/**
* Function: getCursor
*
* Returns the current cursor.
*/
getCursor = () => {
getCursor() {
return this.cursor;
};
}
/**
* Function: isRoundable
*
* Hook for subclassers.
*/
isRoundable = () => {
isRoundable() {
return false;
};
}
/**
* Function: updateBoundingBox
@ -1458,7 +1455,7 @@ class mxShape {
* Returns a new rectangle that represents the bounding box of the bare shape
* with no shadows or strokewidths.
*/
createBoundingBox = () => {
createBoundingBox() {
const bb = this.bounds.clone();
if (
@ -1471,7 +1468,7 @@ class mxShape {
}
return bb;
};
}
/**
* Function: augmentBoundingBox
@ -1493,47 +1490,47 @@ class mxShape {
*
* Returns true if the bounds should be inverted.
*/
isPaintBoundsInverted = () => {
isPaintBoundsInverted() {
// Stencil implements inversion via aspect
return (
this.stencil == null &&
(this.direction === mxConstants.DIRECTION_NORTH ||
this.direction === mxConstants.DIRECTION_SOUTH)
);
};
}
/**
* Function: getRotation
*
* Returns the rotation from the style.
*/
getRotation = () => {
getRotation() {
return this.rotation != null ? this.rotation : 0;
};
}
/**
* Function: getTextRotation
*
* Returns the rotation for the text label.
*/
getTextRotation = () => {
getTextRotation() {
let rot = this.getRotation();
if (
!toBool(mxUtils.getValue(this.style, mxConstants.STYLE_HORIZONTAL, 1))
) {
rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
}
return rot;
};
}
/**
* Function: getShapeRotation
*
* Returns the actual rotation of the shape.
*/
getShapeRotation = () => {
getShapeRotation() {
let rot = this.getRotation();
if (this.direction != null) {
@ -1547,14 +1544,14 @@ class mxShape {
}
return rot;
};
}
/**
* Function: createTransparentSvgRectangle
*
* Adds a transparent rectangle that catches all events.
*/
createTransparentSvgRectangle = (x, y, w, h) => {
createTransparentSvgRectangle(x, y, w, h) {
const rect = document.createElementNS(mxConstants.NS_SVG, 'rect');
rect.setAttribute('x', x);
rect.setAttribute('y', y);
@ -1565,7 +1562,7 @@ class mxShape {
rect.setAttribute('pointer-events', 'all');
return rect;
};
}
/**
* Function: setTransparentBackgroundImage
@ -1574,16 +1571,16 @@ class mxShape {
*
* Paints the line shape.
*/
setTransparentBackgroundImage = node => {
setTransparentBackgroundImage(node) {
node.style.backgroundImage = `url('${mxClient.imageBasePath}/transparent.gif')`;
};
}
/**
* Function: releaseSvgGradients
*
* Paints the line shape.
*/
releaseSvgGradients = grads => {
releaseSvgGradients(grads) {
if (grads != null) {
for (const key in grads) {
const gradient = grads[key];
@ -1597,7 +1594,7 @@ class mxShape {
}
}
}
};
}
/**
* Function: destroy
@ -1605,7 +1602,7 @@ class mxShape {
* Destroys the shape by removing it from the DOM and releasing the DOM
* node associated with the shape using <mxEvent.release>.
*/
destroy = () => {
destroy() {
if (this.node != null) {
mxEvent.release(this.node);
@ -1619,7 +1616,7 @@ class mxShape {
// Decrements refCount and removes unused
this.releaseSvgGradients(this.oldGradients);
this.oldGradients = null;
};
}
}
export default mxShape;

47
src/mxgraph/shape/mxStencil.js
View File

@ -293,7 +293,7 @@ class mxStencil extends mxShape {
*
* Reads <w0>, <h0>, <aspect>, <bgNodes> and <fgNodes> from <desc>.
*/
parseDescription = () => {
parseDescription() {
// LATER: Preprocess nodes for faster painting
this.fgNode = this.desc.getElementsByTagName('foreground')[0];
this.bgNode = this.desc.getElementsByTagName('background')[0];
@ -312,7 +312,7 @@ class mxStencil extends mxShape {
// by the minimum scaling that is used to draw the shape (sx, sy).
const sw = this.desc.getAttribute('strokewidth');
this.strokewidth = sw != null ? sw : '1';
};
}
/**
* Function: parseConstraints
@ -320,7 +320,7 @@ class mxStencil extends mxShape {
* Reads the constraints from <desc> into <constraints> using
* <parseConstraint>.
*/
parseConstraints = () => {
parseConstraints() {
const conns = this.desc.getElementsByTagName('connections')[0];
if (conns != null) {
@ -334,21 +334,21 @@ class mxStencil extends mxShape {
}
}
}
};
}
/**
* Function: parseConstraint
*
* Parses the given XML node and returns its <mxConnectionConstraint>.
*/
parseConstraint = node => {
parseConstraint(node) {
const x = Number(node.getAttribute('x'));
const y = Number(node.getAttribute('y'));
const perimeter = node.getAttribute('perimeter') == '1';
const name = node.getAttribute('name');
return new mxConnectionConstraint(new mxPoint(x, y), perimeter, name);
};
}
/**
* Function: evaluateTextAttribute
@ -357,7 +357,7 @@ class mxStencil extends mxShape {
* is used as a key to <mxResources.get> if the localized attribute in the text
* node is 1 or if <defaultLocalized> is true.
*/
evaluateTextAttribute = (node, attribute, shape) => {
evaluateTextAttribute(node, attribute, shape) {
let result = this.evaluateAttribute(node, attribute, shape);
const loc = node.getAttribute('localized');
@ -366,7 +366,7 @@ class mxStencil extends mxShape {
}
return result;
};
}
/**
* Function: evaluateAttribute
@ -376,7 +376,7 @@ class mxStencil extends mxShape {
* a function it is invoked with <shape> as the only argument and the return
* value is used as the attribute value to be returned.
*/
evaluateAttribute = (node, attribute, shape) => {
evaluateAttribute(node, attribute, shape) {
let result = node.getAttribute(attribute);
if (result == null) {
@ -392,14 +392,14 @@ class mxStencil extends mxShape {
}
return result;
};
}
/**
* Function: drawShape
*
* Draws this stencil inside the given bounds.
*/
drawShape = (canvas, shape, x, y, w, h) => {
drawShape(canvas, shape, x, y, w, h) {
const stack = canvas.states.slice();
// TODO: Internal structure (array of special structs?), relative and absolute
@ -470,25 +470,14 @@ class mxStencil extends mxShape {
if (canvas.states.length != stack.length) {
canvas.states = stack;
}
};
}
/**
* Function: drawChildren
*
* Draws this stencil inside the given bounds.
*/
drawChildren = (
canvas,
shape,
x,
y,
w,
h,
node,
aspect,
disableShadow,
paint
) => {
drawChildren(canvas, shape, x, y, w, h, node, aspect, disableShadow, paint) {
if (node != null && w > 0 && h > 0) {
let tmp = node.firstChild;
@ -500,7 +489,7 @@ class mxStencil extends mxShape {
tmp = tmp.nextSibling;
}
}
};
}
/**
* Function: computeAspect
@ -515,7 +504,7 @@ class mxStencil extends mxShape {
* bounds - <mxRectangle> that should contain the stencil.
* direction - Optional direction of the shape to be darwn.
*/
computeAspect = (shape, x, y, w, h, direction) => {
computeAspect(shape, x, y, w, h, direction) {
let x0 = x;
let y0 = y;
let sx = w / this.w0;
@ -550,14 +539,14 @@ class mxStencil extends mxShape {
}
return new mxRectangle(x0, y0, sx, sy);
};
}
/**
* Function: drawNode
*
* Draws this stencil inside the given bounds.
*/
drawNode = (canvas, shape, node, aspect, disableShadow, paint) => {
drawNode(canvas, shape, node, aspect, disableShadow, paint) {
const name = node.nodeName;
const x0 = aspect.x;
const y0 = aspect.y;
@ -847,7 +836,7 @@ class mxStencil extends mxShape {
canvas.setShadow(false);
}
}
};
}
}
export default mxStencil;

48
src/mxgraph/shape/mxSwimlane.js
View File

@ -54,16 +54,16 @@ class mxSwimlane extends mxShape {
*
* Adds roundable support.
*/
isRoundable = (c, x, y, w, h) => {
isRoundable(c, x, y, w, h) {
return true;
};
}
/**
* Function: getTitleSize
*
* Returns the title size.
*/
getTitleSize = () => {
getTitleSize() {
return Math.max(
0,
mxUtils.getValue(
@ -72,14 +72,14 @@ class mxSwimlane extends mxShape {
mxConstants.DEFAULT_STARTSIZE
)
);
};
}
/**
* Function: getLabelBounds
*
* Returns the bounding box for the label.
*/
getLabelBounds = rect => {
getLabelBounds(rect) {
const start = this.getTitleSize();
const bounds = new mxRectangle(rect.x, rect.y, rect.width, rect.height);
const horizontal = this.isHorizontal();
@ -124,14 +124,14 @@ class mxSwimlane extends mxShape {
}
return bounds;
};
}
/**
* Function: getGradientBounds
*
* Returns the bounding box for the gradient box for this shape.
*/
getGradientBounds = (c, x, y, w, h) => {
getGradientBounds(c, x, y, w, h) {
let start = this.getTitleSize();
if (this.isHorizontal()) {
@ -140,14 +140,14 @@ class mxSwimlane extends mxShape {
}
start = Math.min(start, w);
return new mxRectangle(x, y, start, h);
};
}
/**
* Function: getSwimlaneArcSize
*
* Returns the arcsize for the swimlane.
*/
getSwimlaneArcSize = (w, h, start) => {
getSwimlaneArcSize(w, h, start) {
if (
mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1'
) {
@ -171,23 +171,23 @@ class mxSwimlane extends mxShape {
) / 100;
return start * f * 3;
};
}
/**
* Function: isHorizontal
*
* Paints the swimlane vertex shape.
*/
isHorizontal = () => {
isHorizontal() {
return mxUtils.getValue(this.style, mxConstants.STYLE_HORIZONTAL, 1) == 1;
};
}
/**
* Function: paintVertexShape
*
* Paints the swimlane vertex shape.
*/
paintVertexShape = (c, x, y, w, h) => {
paintVertexShape(c, x, y, w, h) {
let start = this.getTitleSize();
const fill = mxUtils.getValue(
this.style,
@ -239,14 +239,14 @@ class mxSwimlane extends mxShape {
c.setShadow(false);
this.paintGlassEffect(c, 0, 0, w, start, r);
}
};
}
/**
* Function: paintSwimlane
*
* Paints the swimlane vertex shape.
*/
paintSwimlane = (c, x, y, w, h, start, fill, swimlaneLine) => {
paintSwimlane(c, x, y, w, h, start, fill, swimlaneLine) {
c.begin();
let events = true;
@ -322,14 +322,14 @@ class mxSwimlane extends mxShape {
if (swimlaneLine) {
this.paintDivider(c, x, y, w, h, start, fill == mxConstants.NONE);
}
};
}
/**
* Function: paintRoundedSwimlane
*
* Paints the swimlane vertex shape.
*/
paintRoundedSwimlane = (c, x, y, w, h, start, r, fill, swimlaneLine) => {
paintRoundedSwimlane(c, x, y, w, h, start, r, fill, swimlaneLine) {
c.begin();
let events = true;
@ -413,14 +413,14 @@ class mxSwimlane extends mxShape {
if (swimlaneLine) {
this.paintDivider(c, x, y, w, h, start, fill == mxConstants.NONE);
}
};
}
/**
* Function: paintDivider
*
* Paints the divider between swimlane title and content area.
*/
paintDivider = (c, x, y, w, h, start, shadow) => {
paintDivider(c, x, y, w, h, start, shadow) {
if (!shadow) {
c.setShadow(false);
}
@ -436,14 +436,14 @@ class mxSwimlane extends mxShape {
}
c.stroke();
};
}
/**
* Function: paintSeparator
*
* Paints the vertical or horizontal separator line between swimlanes.
*/
paintSeparator = (c, x, y, w, h, start, color) => {
paintSeparator(c, x, y, w, h, start, color) {
if (color != mxConstants.NONE) {
c.setStrokeColor(color);
c.setDashed(true);
@ -460,14 +460,14 @@ class mxSwimlane extends mxShape {
c.stroke();
c.setDashed(false);
}
};
}
/**
* Function: getImageBounds
*
* Paints the swimlane vertex shape.
*/
getImageBounds = (x, y, w, h) => {
getImageBounds(x, y, w, h) {
if (this.isHorizontal()) {
return new mxRectangle(
x + w - this.imageSize,
@ -477,7 +477,7 @@ class mxSwimlane extends mxShape {
);
}
return new mxRectangle(x, y, this.imageSize, this.imageSize);
};
}
}
export default mxSwimlane;

106
src/mxgraph/shape/mxText.js
View File

@ -10,7 +10,7 @@ import mxUtils from '../util/mxUtils';
import mxPoint from '../util/mxPoint';
import mxSvgCanvas2D from '../util/mxSvgCanvas2D';
import mxShape from './mxShape';
import mxRectangle from "../util/mxRectangle";
import mxRectangle from '../util/mxRectangle';
class mxText extends mxShape {
/**
@ -210,25 +210,25 @@ class mxText extends mxShape {
* Returns true if HTML is allowed for this shape. This implementation returns
* true if the browser is not in IE8 standards mode.
*/
isHtmlAllowed = () => {
isHtmlAllowed() {
return document.documentMode !== 8 || mxClient.IS_EM;
};
}
/**
* Function: getSvgScreenOffset
*
* Disables offset in IE9 for crisper image output.
*/
getSvgScreenOffset = () => {
getSvgScreenOffset() {
return 0;
};
}
/**
* Function: checkBounds
*
* Returns true if the bounds are not null and all of its variables are numeric.
*/
checkBounds = () => {
checkBounds() {
return (
!isNaN(this.scale) &&
isFinite(this.scale) &&
@ -239,14 +239,14 @@ class mxText extends mxShape {
!isNaN(this.bounds.width) &&
!isNaN(this.bounds.height)
);
};
}
/**
* Function: paint
*
* Generic rendering code.
*/
paint = (c, update) => {
paint(c, update) {
// Scale is passed-through to canvas
const s = this.scale;
const x = this.bounds.x / s;
@ -324,14 +324,14 @@ class mxText extends mxShape {
dir
);
}
};
}
/**
* Function: redraw
*
* Renders the text using the given DOM nodes.
*/
redraw = () => {
redraw() {
if (
this.visible &&
this.checkBounds() &&
@ -380,14 +380,14 @@ class mxText extends mxShape {
this.lastValue = null;
}
}
};
}
/**
* Function: resetStyles
*
* Resets all styles.
*/
resetStyles = () => {
resetStyles() {
super.resetStyles();
this.color = 'black';
@ -406,7 +406,7 @@ class mxText extends mxShape {
delete this.border;
this.textDirection = mxConstants.DEFAULT_TEXT_DIRECTION;
delete this.margin;
};
}
/**
* Function: apply
@ -417,7 +417,7 @@ class mxText extends mxShape {
*
* state - <mxCellState> of the corresponding cell.
*/
apply = state => {
apply(state) {
const old = this.spacing;
super.apply(state);
@ -517,7 +517,7 @@ class mxText extends mxShape {
this.flipV = null;
this.flipH = null;
};
}
/**
* Function: getAutoDirection
@ -527,7 +527,7 @@ class mxText extends mxShape {
* depending on the contents of <value>. This is not invoked for HTML, wrapped
* content or if <value> is a DOM node.
*/
getAutoDirection = () => {
getAutoDirection() {
// Looks for strong (directional) characters
const tmp = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec(
this.value
@ -537,14 +537,14 @@ class mxText extends mxShape {
return tmp != null && tmp.length > 0 && tmp[0] > 'z'
? mxConstants.TEXT_DIRECTION_RTL
: mxConstants.TEXT_DIRECTION_LTR;
};
}
/**
* Function: getContentNode
*
* Returns the node that contains the rendered input.
*/
getContentNode = () => {
getContentNode() {
let result = this.node;
if (result != null) {
@ -558,14 +558,14 @@ class mxText extends mxShape {
}
return result;
};
}
/**
* Function: updateBoundingBox
*
* Updates the <boundingBox> for this shape using the given node and position.
*/
updateBoundingBox = () => {
updateBoundingBox() {
let { node } = this;
this.boundingBox = this.bounds.clone();
const rot = this.getTextRotation();
@ -710,27 +710,27 @@ class mxText extends mxShape {
this.unrotatedBoundingBox = null;
}
}
};
}
/**
* Function: getShapeRotation
*
* Returns 0 to avoid using rotation in the canvas via updateTransform.
*/
getShapeRotation = () => {
getShapeRotation() {
return 0;
};
}
/**
* Function: getTextRotation
*
* Returns the rotation for the text label of the corresponding shape.
*/
getTextRotation = () => {
getTextRotation() {
return this.state != null && this.state.shape != null
? this.state.shape.getTextRotation()
: 0;
};
}
/**
* Function: isPaintBoundsInverted
@ -738,20 +738,20 @@ class mxText extends mxShape {
* Inverts the bounds if <mxShape.isBoundsInverted> returns true or if the
* horizontal style is false.
*/
isPaintBoundsInverted = () => {
isPaintBoundsInverted() {
return (
!this.horizontal &&
this.state != null &&
this.state.view.graph.model.isVertex(this.state.cell)
);
};
}
/**
* Function: configureCanvas
*
* Sets the state of the canvas for drawing the shape.
*/
configureCanvas = (c, x, y, w, h) => {
configureCanvas(c, x, y, w, h) {
super.configureCanvas(c, x, y, w, h);
c.setFontColor(this.color);
@ -760,14 +760,14 @@ class mxText extends mxShape {
c.setFontFamily(this.family);
c.setFontSize(this.size);
c.setFontStyle(this.fontStyle);
};
}
/**
* Function: getHtmlValue
*
* Private helper function to create SVG elements
*/
getHtmlValue = () => {
getHtmlValue() {
let val = this.value;
if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
@ -779,14 +779,14 @@ class mxText extends mxShape {
val = this.replaceLinefeeds ? val.replace(/\n/g, '<br/>') : val;
return val;
};
}
/**
* Function: getTextCss
*
* Private helper function to create SVG elements
*/
getTextCss = () => {
getTextCss() {
const lh = mxConstants.ABSOLUTE_LINE_HEIGHT
? `${this.size * mxConstants.LINE_HEIGHT}px`
: mxConstants.LINE_HEIGHT;
@ -831,14 +831,14 @@ class mxText extends mxShape {
}
return css;
};
}
/**
* Function: redrawHtmlShape
*
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
redrawHtmlShape = () => {
redrawHtmlShape() {
if (mxClient.IS_SVG) {
this.redrawHtmlShapeWithCss3();
} else {
@ -862,14 +862,14 @@ class mxText extends mxShape {
this.updateHtmlTransform();
}
};
}
/**
* Function: redrawHtmlShapeWithCss3
*
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
redrawHtmlShapeWithCss3 = () => {
redrawHtmlShapeWithCss3() {
const w = Math.max(0, Math.round(this.bounds.width / this.scale));
const h = Math.max(0, Math.round(this.bounds.height / this.scale));
const flex =
@ -932,14 +932,14 @@ class mxText extends mxShape {
this.node.firstChild.setAttribute('style', item);
}
);
};
}
/**
* Function: updateHtmlTransform
*
* Returns the spacing as an <mxPoint>.
*/
updateHtmlTransform = () => {
updateHtmlTransform() {
const theta = this.getTextRotation();
const { style } = this.node;
const dx = this.margin.x;
@ -982,14 +982,14 @@ class mxText extends mxShape {
} else {
style.opacity = '';
}
};
}
/**
* Function: updateInnerHtml
*
* Sets the inner HTML of the given element to the <value>.
*/
updateInnerHtml = elt => {
updateInnerHtml(elt) {
if (mxUtils.isNode(this.value)) {
elt.innerHTML = this.value.outerHTML;
} else {
@ -1007,14 +1007,14 @@ class mxText extends mxShape {
elt.innerHTML = val;
}
};
}
/**
* Function: updateHtmlFilter
*
* Rotated text rendering quality is bad for IE9 quirks/IE8 standards
*/
updateHtmlFilter = () => {
updateHtmlFilter() {
const { style } = this.node;
const dx = this.margin.x;
let dy = this.margin.y;
@ -1160,14 +1160,14 @@ class mxText extends mxShape {
style.zoom = s;
style.left = `${Math.round(this.bounds.x + left_fix - w / 2)}px`;
style.top = `${Math.round(this.bounds.y + top_fix - h / 2 + dy)}px`;
};
}
/**
* Function: updateValue
*
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
updateValue = () => {
updateValue() {
if (mxUtils.isNode(this.value)) {
this.node.innerHTML = '';
this.node.appendChild(this.value);
@ -1245,14 +1245,14 @@ class mxText extends mxShape {
}
}
}
};
}
/**
* Function: updateFont
*
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
updateFont = node => {
updateFont(node) {
const { style } = node;
style.lineHeight = mxConstants.ABSOLUTE_LINE_HEIGHT
@ -1303,14 +1303,14 @@ class mxText extends mxShape {
} else {
style.textAlign = 'left';
}
};
}
/**
* Function: updateSize
*
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
updateSize = (node, enableWrap) => {
updateSize(node, enableWrap) {
const w = Math.max(0, Math.round(this.bounds.width / this.scale));
const h = Math.max(0, Math.round(this.bounds.height / this.scale));
const { style } = node;
@ -1374,23 +1374,23 @@ class mxText extends mxShape {
} else {
style.whiteSpace = 'nowrap';
}
};
}
/**
* Function: getMargin
*
* Returns the spacing as an <mxPoint>.
*/
updateMargin = () => {
updateMargin() {
this.margin = mxUtils.getAlignmentAsPoint(this.align, this.valign);
};
}
/**
* Function: getSpacing
*
* Returns the spacing as an <mxPoint>.
*/
getSpacing = () => {
getSpacing() {
let dx = 0;
let dy = 0;
@ -1411,7 +1411,7 @@ class mxText extends mxShape {
}
return new mxPoint(dx, dy);
};
}
}
export default mxText;

8
src/mxgraph/shape/mxTriangle.js
View File

@ -28,16 +28,16 @@ class mxTriangle extends mxActor {
*
* Adds roundable support.
*/
isRoundable = () => {
isRoundable() {
return true;
};
}
/**
* Function: redrawPath
*
* Draws the path for this shape.
*/
redrawPath = (c, x, y, w, h) => {
redrawPath(c, x, y, w, h) {
const arcSize =
mxUtils.getValue(
this.style,
@ -51,7 +51,7 @@ class mxTriangle extends mxActor {
arcSize,
true
);
};
}
}
export default mxTriangle;

154
src/mxgraph/util/mxAbstractCanvas2D.js
View File

@ -118,9 +118,9 @@ class mxAbstractCanvas2D {
*
* Create a new <mxUrlConverter> and returns it.
*/
createUrlConverter = () => {
createUrlConverter() {
return new mxUrlConverter();
};
}
/**
* Function: reset
@ -137,7 +137,7 @@ class mxAbstractCanvas2D {
*
* Creates the state of the this canvas.
*/
createState = () => {
createState() {
return {
dx: 0,
dy: 0,
@ -173,16 +173,16 @@ class mxAbstractCanvas2D {
rotationCx: 0,
rotationCy: 0,
};
};
}
/**
* Function: format
*
* Rounds all numbers to integers.
*/
format = value => {
format(value) {
return Math.round(parseFloat(value));
};
}
/**
* Function: addOp
@ -212,7 +212,7 @@ class mxAbstractCanvas2D {
*
* Rotates the given point and returns the result as an <mxPoint>.
*/
rotatePoint = (x, y, theta, cx, cy) => {
rotatePoint(x, y, theta, cx, cy) {
const rad = theta * (Math.PI / 180);
return mxUtils.getRotatedPoint(
@ -221,300 +221,300 @@ class mxAbstractCanvas2D {
Math.sin(rad),
new mxPoint(cx, cy)
);
};
}
/**
* Function: save
*
* Saves the current state.
*/
save = () => {
save() {
this.states.push(this.state);
this.state = mxUtils.clone(this.state);
};
}
/**
* Function: restore
*
* Restores the current state.
*/
restore = () => {
restore() {
if (this.states.length > 0) {
this.state = this.states.pop();
}
};
}
/**
* Function: setLink
*
* Sets the current link. Hook for subclassers.
*/
setLink = link => {
setLink(link) {
// nop
};
}
/**
* Function: scale
*
* Scales the current state.
*/
scale = value => {
scale(value) {
this.state.scale *= value;
this.state.strokeWidth *= value;
};
}
/**
* Function: translate
*
* Translates the current state.
*/
translate = (dx, dy) => {
translate(dx, dy) {
this.state.dx += dx;
this.state.dy += dy;
};
}
/**
* Function: rotate
*
* Rotates the current state.
*/
rotate = (theta, flipH, flipV, cx, cy) => {
rotate(theta, flipH, flipV, cx, cy) {
// nop
};
}
/**
* Function: setAlpha
*
* Sets the current alpha.
*/
setAlpha = value => {
setAlpha(value) {
this.state.alpha = value;
};
}
/**
* Function: setFillAlpha
*
* Sets the current solid fill alpha.
*/
setFillAlpha = value => {
setFillAlpha(value) {
this.state.fillAlpha = value;
};
}
/**
* Function: setStrokeAlpha
*
* Sets the current stroke alpha.
*/
setStrokeAlpha = value => {
setStrokeAlpha(value) {
this.state.strokeAlpha = value;
};
}
/**
* Function: setFillColor
*
* Sets the current fill color.
*/
setFillColor = value => {
setFillColor(value) {
if (value === mxConstants.NONE) {
value = null;
}
this.state.fillColor = value;
this.state.gradientColor = null;
};
}
/**
* Function: setGradient
*
* Sets the current gradient.
*/
setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
setGradient(color1, color2, x, y, w, h, direction, alpha1, alpha2) {
const s = this.state;
s.fillColor = color1;
s.gradientFillAlpha = alpha1 != null ? alpha1 : 1;
s.gradientColor = color2;
s.gradientAlpha = alpha2 != null ? alpha2 : 1;
s.gradientDirection = direction;
};
}
/**
* Function: setStrokeColor
*
* Sets the current stroke color.
*/
setStrokeColor = value => {
setStrokeColor(value) {
if (value === mxConstants.NONE) {
value = null;
}
this.state.strokeColor = value;
};
}
/**
* Function: setStrokeWidth
*
* Sets the current stroke width.
*/
setStrokeWidth = value => {
setStrokeWidth(value) {
this.state.strokeWidth = value;
};
}
/**
* Function: setDashed
*
* Enables or disables dashed lines.
*/
setDashed = (value, fixDash) => {
setDashed(value, fixDash) {
this.state.dashed = value;
this.state.fixDash = fixDash;
};
}
/**
* Function: setDashPattern
*
* Sets the current dash pattern.
*/
setDashPattern = value => {
setDashPattern(value) {
this.state.dashPattern = value;
};
}
/**
* Function: setLineCap
*
* Sets the current line cap.
*/
setLineCap = value => {
setLineCap(value) {
this.state.lineCap = value;
};
}
/**
* Function: setLineJoin
*
* Sets the current line join.
*/
setLineJoin = value => {
setLineJoin(value) {
this.state.lineJoin = value;
};
}
/**
* Function: setMiterLimit
*
* Sets the current miter limit.
*/
setMiterLimit = value => {
setMiterLimit(value) {
this.state.miterLimit = value;
};
}
/**
* Function: setFontColor
*
* Sets the current font color.
*/
setFontColor = value => {
setFontColor(value) {
if (value === mxConstants.NONE) {
value = null;
}
this.state.fontColor = value;
};
}
/**
* Function: setFontBackgroundColor
*
* Sets the current font background color.
*/
setFontBackgroundColor = value => {
setFontBackgroundColor(value) {
if (value === mxConstants.NONE) {
value = null;
}
this.state.fontBackgroundColor = value;
};
}
/**
* Function: setFontBorderColor
*
* Sets the current font border color.
*/
setFontBorderColor = value => {
setFontBorderColor(value) {
if (value === mxConstants.NONE) {
value = null;
}
this.state.fontBorderColor = value;
};
}
/**
* Function: setFontSize
*
* Sets the current font size.
*/
setFontSize = value => {
setFontSize(value) {
this.state.fontSize = parseFloat(value);
};
}
/**
* Function: setFontFamily
*
* Sets the current font family.
*/
setFontFamily = value => {
setFontFamily(value) {
this.state.fontFamily = value;
};
}
/**
* Function: setFontStyle
*
* Sets the current font style.
*/
setFontStyle = value => {
setFontStyle(value) {
if (value == null) {
value = 0;
}
this.state.fontStyle = value;
};
}
/**
* Function: setShadow
*
* Enables or disables and configures the current shadow.
*/
setShadow = enabled => {
setShadow(enabled) {
this.state.shadow = enabled;
};
}
/**
* Function: setShadowColor
*
* Enables or disables and configures the current shadow.
*/
setShadowColor = value => {
setShadowColor(value) {
if (value === mxConstants.NONE) {
value = null;
}
this.state.shadowColor = value;
};
}
/**
* Function: setShadowAlpha
*
* Enables or disables and configures the current shadow.
*/
setShadowAlpha = value => {
setShadowAlpha(value) {
this.state.shadowAlpha = value;
};
}
/**
* Function: setShadowOffset
*
* Enables or disables and configures the current shadow.
*/
setShadowOffset = (dx, dy) => {
setShadowOffset(dx, dy) {
this.state.shadowDx = dx;
this.state.shadowDy = dy;
};
}
/**
* Function: begin
@ -532,36 +532,36 @@ class mxAbstractCanvas2D {
*
* Moves the current path the given coordinates.
*/
moveTo = (x, y) => {
moveTo(x, y) {
this.addOp(this.moveOp, x, y);
};
}
/**
* Function: lineTo
*
* Draws a line to the given coordinates. Uses moveTo with the op argument.
*/
lineTo = (x, y) => {
lineTo(x, y) {
this.addOp(this.lineOp, x, y);
};
}
/**
* Function: quadTo
*
* Adds a quadratic curve to the current path.
*/
quadTo = (x1, y1, x2, y2) => {
quadTo(x1, y1, x2, y2) {
this.addOp(this.quadOp, x1, y1, x2, y2);
};
}
/**
* Function: curveTo
*
* Adds a bezier curve to the current path.
*/
curveTo = (x1, y1, x2, y2, x3, y3) => {
curveTo(x1, y1, x2, y2, x3, y3) {
this.addOp(this.curveOp, x1, y1, x2, y2, x3, y3);
};
}
/**
* Function: arcTo
@ -569,7 +569,7 @@ class mxAbstractCanvas2D {
* Adds the given arc to the current path. This is a synthetic operation that
* is broken down into curves.
*/
arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y) => {
arcTo(rx, ry, angle, largeArcFlag, sweepFlag, x, y) {
const curves = mxUtils.arcToCurves(
this.lastX,
this.lastY,
@ -594,23 +594,23 @@ class mxAbstractCanvas2D {
);
}
}
};
}
/**
* Function: close
*
* Closes the current path.
*/
close = (x1, y1, x2, y2, x3, y3) => {
close(x1, y1, x2, y2, x3, y3) {
this.addOp(this.closeOp);
};
}
/**
* Function: end
*
* Empty implementation for backwards compatibility. This will be removed.
*/
end = () => {};
end() {}
}
export default mxAbstractCanvas2D;

16
src/mxgraph/util/mxAnimation.js
View File

@ -47,23 +47,23 @@ class mxAnimation extends mxEventSource {
*
* Returns true if the animation is running.
*/
isRunning = () => {
isRunning() {
return this.thread != null;
};
}
/**
* Function: startAnimation
*
* Starts the animation by repeatedly invoking updateAnimation.
*/
startAnimation = () => {
startAnimation() {
if (this.thread == null) {
this.thread = window.setInterval(
this.updateAnimation.bind(this),
this.delay
);
}
};
}
/**
* Function: updateAnimation
@ -72,22 +72,22 @@ class mxAnimation extends mxEventSource {
* when finished, startAnimation to resume. This is called whenever the
* timer fires and fires an mxEvent.EXECUTE event with no properties.
*/
updateAnimation = () => {
updateAnimation() {
this.fireEvent(new mxEventObject(mxEvent.EXECUTE));
};
}
/**
* Function: stopAnimation
*
* Stops the animation by deleting the timer and fires an <mxEvent.DONE>.
*/
stopAnimation = () => {
stopAnimation() {
if (this.thread != null) {
window.clearInterval(this.thread);
this.thread = null;
this.fireEvent(new mxEventObject(mxEvent.DONE));
}
};
}
}
export default mxAnimation;

28
src/mxgraph/util/mxAutoSaveManager.js
View File

@ -115,9 +115,9 @@ class mxAutoSaveManager extends mxEventSource {
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
@ -129,16 +129,16 @@ class mxAutoSaveManager extends mxEventSource {
*
* enabled - Boolean that specifies the new enabled state.
*/
setEnabled = value => {
setEnabled(value) {
this.enabled = value;
};
}
/**
* Function: setGraph
*
* Sets the graph that the layouts operate on.
*/
setGraph = graph => {
setGraph(graph) {
if (this.graph != null) {
this.graph.getModel().removeListener(this.changeHandler);
}
@ -148,23 +148,23 @@ class mxAutoSaveManager extends mxEventSource {
if (this.graph != null) {
this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler);
}
};
}
/**
* Function: save
*
* Empty hook that is called if the graph should be saved.
*/
save = () => {
save() {
// empty
};
}
/**
* Function: graphModelChanged
*
* Invoked when the graph model has changed.
*/
graphModelChanged = changes => {
graphModelChanged(changes) {
const now = new Date().getTime();
const dt = (now - this.lastSnapshot) / 1000;
@ -179,26 +179,26 @@ class mxAutoSaveManager extends mxEventSource {
// Increments the number of ignored changes
this.ignoredChanges++;
}
};
}
/**
* Function: reset
*
* Resets all counters.
*/
reset = () => {
reset() {
this.lastSnapshot = new Date().getTime();
this.ignoredChanges = 0;
};
}
/**
* Function: destroy
*
* Removes all handlers from the <graph> and deletes the reference to it.
*/
destroy = () => {
destroy() {
this.setGraph(null);
};
}
}
export default mxAutoSaveManager;

28
src/mxgraph/util/mxDictionary.js
View File

@ -33,20 +33,20 @@ class mxDictionary {
*
* Clears the dictionary.
*/
clear = () => {
clear() {
this.map = {};
};
}
/**
* Function: get
*
* Returns the value for the given key.
*/
get = key => {
get(key) {
const id = mxObjectIdentity.get(key);
return this.map[id];
};
}
/**
* Function: put
@ -54,13 +54,13 @@ class mxDictionary {
* Stores the value under the given key and returns the previous
* value for that key.
*/
put = (key, value) => {
put(key, value) {
const id = mxObjectIdentity.get(key);
const previous = this.map[id];
this.map[id] = value;
return previous;
};
}
/**
* Function: remove
@ -68,20 +68,20 @@ class mxDictionary {
* Removes the value for the given key and returns the value that
* has been removed.
*/
remove = key => {
remove(key) {
const id = mxObjectIdentity.get(key);
const previous = this.map[id];
delete this.map[id];
return previous;
};
}
/**
* Function: getKeys
*
* Returns all keys as an array.
*/
getKeys = () => {
getKeys() {
const result = [];
for (const key in this.map) {
@ -89,14 +89,14 @@ class mxDictionary {
}
return result;
};
}
/**
* Function: getValues
*
* Returns all values as an array.
*/
getValues = () => {
getValues() {
const result = [];
for (const key in this.map) {
@ -104,7 +104,7 @@ class mxDictionary {
}
return result;
};
}
/**
* Function: visit
@ -117,11 +117,11 @@ class mxDictionary {
*
* visitor - A function that takes the key and value as arguments.
*/
visit = visitor => {
visit(visitor) {
for (const key in this.map) {
visitor(key, this.map[key]);
}
};
}
}
export default mxDictionary;

12
src/mxgraph/util/mxDivResizer.js
View File

@ -91,7 +91,7 @@ class mxDivResizer {
*
* Updates the style of the DIV after the window has been resized.
*/
resize = () => {
resize() {
const w = this.getDocumentWidth();
const h = this.getDocumentHeight();
@ -121,7 +121,7 @@ class mxDivResizer {
) {
this.div.style.height = `${h - t - b}px`;
}
};
}
/**
* Function: getDocumentWidth
@ -129,9 +129,9 @@ class mxDivResizer {
* Hook for subclassers to return the width of the document (without
* scrollbars).
*/
getDocumentWidth = () => {
getDocumentWidth() {
return document.body.clientWidth;
};
}
/**
* Function: getDocumentHeight
@ -139,9 +139,9 @@ class mxDivResizer {
* Hook for subclassers to return the height of the document (without
* scrollbars).
*/
getDocumentHeight = () => {
getDocumentHeight() {
return document.body.clientHeight;
};
}
}
export default mxDivResizer;

100
src/mxgraph/util/mxDragSource.js
View File

@ -186,54 +186,54 @@ class mxDragSource {
*
* Returns <enabled>.
*/
isEnabled = () => {
isEnabled() {
return this.enabled;
};
}
/**
* Function: setEnabled
*
* Sets <enabled>.
*/
setEnabled = value => {
setEnabled(value) {
this.enabled = value;
};
}
/**
* Function: isGuidesEnabled
*
* Returns <guidesEnabled>.
*/
isGuidesEnabled = () => {
isGuidesEnabled() {
return this.guidesEnabled;
};
}
/**
* Function: setGuidesEnabled
*
* Sets <guidesEnabled>.
*/
setGuidesEnabled = value => {
setGuidesEnabled(value) {
this.guidesEnabled = value;
};
}
/**
* Function: isGridEnabled
*
* Returns <gridEnabled>.
*/
isGridEnabled = () => {
isGridEnabled() {
return this.gridEnabled;
};
}
/**
* Function: setGridEnabled
*
* Sets <gridEnabled>.
*/
setGridEnabled = value => {
setGridEnabled(value) {
this.gridEnabled = value;
};
}
/**
* Function: getGraphForEvent
@ -241,9 +241,9 @@ class mxDragSource {
* Returns the graph for the given mouse event. This implementation returns
* null.
*/
getGraphForEvent = evt => {
getGraphForEvent(evt) {
return null;
};
}
/**
* Function: getDropTarget
@ -251,9 +251,9 @@ class mxDragSource {
* Returns the drop target for the given graph and coordinates. This
* implementation uses <mxGraph.getCellAt>.
*/
getDropTarget = (graph, x, y, evt) => {
getDropTarget(graph, x, y, evt) {
return graph.getCellAt(x, y);
};
}
/**
* Function: createDragElement
@ -261,9 +261,9 @@ class mxDragSource {
* Creates and returns a clone of the <dragElementPrototype> or the <element>
* if the former is not defined.
*/
createDragElement = evt => {
createDragElement(evt) {
return this.element.cloneNode(true);
};
}
/**
* Function: createPreviewElement
@ -271,25 +271,25 @@ class mxDragSource {
* Creates and returns an element which can be used as a preview in the given
* graph.
*/
createPreviewElement = graph => {
createPreviewElement(graph) {
return null;
};
}
/**
* Function: isActive
*
* Returns true if this drag source is active.
*/
isActive = () => {
isActive() {
return this.mouseMoveHandler != null;
};
}
/**
* Function: reset
*
* Stops and removes everything and restores the state of the object.
*/
reset = () => {
reset() {
if (this.currentGraph != null) {
this.dragExit(this.currentGraph);
this.currentGraph = null;
@ -298,7 +298,7 @@ class mxDragSource {
this.removeDragElement();
this.removeListeners();
this.stopDrag();
};
}
/**
* Function: mouseDown
@ -321,7 +321,7 @@ class mxDragSource {
* };
* (end)
*/
mouseDown = evt => {
mouseDown(evt) {
if (
this.enabled &&
!mxEvent.isConsumed(evt) &&
@ -347,14 +347,14 @@ class mxDragSource {
);
}
}
};
}
/**
* Function: startDrag
*
* Creates the <dragElement> using <createDragElement>.
*/
startDrag = evt => {
startDrag(evt) {
this.dragElement = this.createDragElement(evt);
this.dragElement.style.position = 'absolute';
this.dragElement.style.zIndex = this.dragElementZIndex;
@ -363,26 +363,26 @@ class mxDragSource {
if (this.checkEventSource && mxClient.IS_SVG) {
this.dragElement.style.pointerEvents = 'none';
}
};
}
/**
* Function: stopDrag
*
* Invokes <removeDragElement>.
*/
stopDrag = () => {
stopDrag() {
// LATER: This used to have a mouse event. If that is still needed we need to add another
// final call to the DnD protocol to add a cleanup step in the case of escape press, which
// is not associated with a mouse event and which currently calles this method.
this.removeDragElement();
};
}
/**
* Function: removeDragElement
*
* Removes and destroys the <dragElement>.
*/
removeDragElement = () => {
removeDragElement() {
if (this.dragElement != null) {
if (this.dragElement.parentNode != null) {
this.dragElement.parentNode.removeChild(this.dragElement);
@ -390,28 +390,28 @@ class mxDragSource {
this.dragElement = null;
}
};
}
/**
* Function: getElementForEvent
*
* Returns the topmost element under the given event.
*/
getElementForEvent = evt => {
getElementForEvent(evt) {
return mxEvent.isTouchEvent(evt) || mxEvent.isPenEvent(evt)
? document.elementFromPoint(
mxEvent.getClientX(evt),
mxEvent.getClientY(evt)
)
: mxEvent.getSource(evt);
};
}
/**
* Function: graphContainsEvent
*
* Returns true if the given graph contains the given event.
*/
graphContainsEvent = (graph, evt) => {
graphContainsEvent(graph, evt) {
const x = mxEvent.getClientX(evt);
const y = mxEvent.getClientY(evt);
const offset = mxUtils.getOffset(graph.container);
@ -432,7 +432,7 @@ class mxDragSource {
x <= offset.x - origin.x + graph.container.offsetWidth &&
y <= offset.y - origin.y + graph.container.offsetHeight
);
};
}
/**
* Function: mouseMove
@ -441,7 +441,7 @@ class mxDragSource {
* <currentGraph>, calling <dragEnter> and <dragExit> on the new and old graph,
* respectively, and invokes <dragOver> if <currentGraph> is not null.
*/
mouseMove = evt => {
mouseMove(evt) {
let graph = this.getGraphForEvent(evt);
// Checks if event is inside the bounds of the graph container
@ -493,7 +493,7 @@ class mxDragSource {
}
mxEvent.consume(evt);
};
}
/**
* Function: mouseUp
@ -501,7 +501,7 @@ class mxDragSource {
* Processes the mouse up event and invokes <drop>, <dragExit> and <stopDrag>
* as required.
*/
mouseUp = evt => {
mouseUp(evt) {
if (this.currentGraph != null) {
if (
this.currentPoint != null &&
@ -524,14 +524,14 @@ class mxDragSource {
this.removeListeners();
mxEvent.consume(evt);
};
}
/**
* Function: removeListeners
*
* Actives the given graph as a drop target.
*/
removeListeners = () => {
removeListeners() {
if (this.eventSource != null) {
mxEvent.removeGestureListeners(
this.eventSource,
@ -550,14 +550,14 @@ class mxDragSource {
);
this.mouseMoveHandler = null;
this.mouseUpHandler = null;
};
}
/**
* Function: dragEnter
*
* Actives the given graph as a drop target.
*/
dragEnter = (graph, evt) => {
dragEnter(graph, evt) {
graph.isMouseDown = true;
graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
this.previewElement = this.createPreviewElement(graph);
@ -587,14 +587,14 @@ class mxDragSource {
// Consumes all events in the current graph before they are fired
graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.eventConsumer);
};
}
/**
* Function: dragExit
*
* Deactivates the given graph as a drop target.
*/
dragExit = (graph, evt) => {
dragExit(graph, evt) {
this.currentDropTarget = null;
this.currentPoint = null;
graph.isMouseDown = false;
@ -619,7 +619,7 @@ class mxDragSource {
this.currentHighlight.destroy();
this.currentHighlight = null;
}
};
}
/**
* Function: dragOver
@ -627,7 +627,7 @@ class mxDragSource {
* Implements autoscroll, updates the <currentPoint>, highlights any drop
* targets and updates the preview.
*/
dragOver = (graph, evt) => {
dragOver(graph, evt) {
const offset = mxUtils.getOffset(graph.container);
const origin = mxUtils.getScrollOrigin(graph.container);
let x = mxEvent.getClientX(evt) - offset.x + origin.x - graph.panDx;
@ -693,7 +693,7 @@ class mxDragSource {
}
this.currentPoint = new mxPoint(x, y);
};
}
/**
* Function: drop
@ -701,7 +701,7 @@ class mxDragSource {
* Returns the drop target for the given graph and coordinates. This
* implementation uses <mxGraph.getCellAt>.
*/
drop = (graph, evt, dropTarget, x, y) => {
drop(graph, evt, dropTarget, x, y) {
this.dropHandler(graph, evt, dropTarget, x, y);
// Had to move this to after the insert because it will
@ -711,7 +711,7 @@ class mxDragSource {
if (graph.container.style.visibility !== 'hidden') {
graph.container.focus();
}
};
}
}
export default mxDragSource;

20
src/mxgraph/util/mxEventObject.js
View File

@ -65,45 +65,45 @@ class mxEventObject {
*
* Returns <name>.
*/
getName = () => {
getName() {
return this.name;
};
}
/**
* Function: getProperties
*
* Returns <properties>.
*/
getProperties = () => {
getProperties() {
return this.properties;
};
}
/**
* Function: getProperty
*
* Returns the property for the given key.
*/
getProperty = key => {
getProperty(key) {
return this.properties[key];
};
}
/**
* Function: isConsumed
*
* Returns true if the event has been consumed.
*/
isConsumed = () => {
isConsumed() {
return this.consumed;
};
}
/**
* Function: consume
*
* Consumes the event.
*/
consume = () => {
consume() {
this.consumed = true;
};
}
}
export default mxEventObject;

28
src/mxgraph/util/mxEventSource.js
View File

@ -61,36 +61,36 @@ class mxEventSource {
*
* Returns <eventsEnabled>.
*/
isEventsEnabled = () => {
isEventsEnabled() {
return this.eventsEnabled;
};
}
/**
* Function: setEventsEnabled
*
* Sets <eventsEnabled>.
*/
setEventsEnabled = value => {
setEventsEnabled(value) {
this.eventsEnabled = value;
};
}
/**
* Function: getEventSource
*
* Returns <eventSource>.
*/
getEventSource = () => {
getEventSource() {
return this.eventSource;
};
}
/**
* Function: setEventSource
*
* Sets <eventSource>.
*/
setEventSource = value => {
setEventSource(value) {
this.eventSource = value;
};
}
/**
* Function: addListener
@ -100,21 +100,21 @@ class mxEventSource {
*
* The parameters of the listener are the sender and an <mxEventObject>.
*/
addListener = (name, funct) => {
addListener(name, funct) {
if (this.eventListeners == null) {
this.eventListeners = [];
}
this.eventListeners.push(name);
this.eventListeners.push(funct);
};
}
/**
* Function: removeListener
*
* Removes all occurrences of the given listener from <eventListeners>.
*/
removeListener = funct => {
removeListener(funct) {
if (this.eventListeners != null) {
let i = 0;
@ -126,7 +126,7 @@ class mxEventSource {
}
}
}
};
}
/**
* Function: fireEvent
@ -147,7 +147,7 @@ class mxEventSource {
* sender - Optional sender to be passed to the listener. Default value is
* the return value of <getEventSource>.
*/
fireEvent = (evt, sender) => {
fireEvent(evt, sender) {
if (this.eventListeners != null && this.isEventsEnabled()) {
if (evt == null) {
evt = new mxEventObject();
@ -171,7 +171,7 @@ class mxEventSource {
}
}
}
};
}
}
export default mxEventSource;

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