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

Merge pull request #27 from junsikshim/development 

Removed mxUtils' indexOf(), bind(), and forEach().
development
Dave Morrissey 2021-04-30 22:41:48 +10:00 committed by GitHub
parent cf437a9b6f 6658ff658f
commit e976ab30dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
100 changed files with 5828 additions and 6012 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -104,11 +104,11 @@ class mxDefaultToolbar {
});
// Resets the selected tool after a doubleclick or escape keystroke
this.resetHandler = mxUtils.bind(this, () => {
this.resetHandler = () => {
if (this.toolbar != null) {
this.toolbar.resetMode(true);
}
});
};
this.editor.graph.addListener(mxEvent.DOUBLE_CLICK, this.resetHandler);
this.editor.addListener(mxEvent.ESCAPE, this.resetHandler);
@ -176,9 +176,9 @@ class mxDefaultToolbar {
*/
// addActionOption(combo: HTMLElement, title: string, action: string): void;
addActionOption(combo, title, action) {
const clickHandler = mxUtils.bind(this, () => {
const clickHandler = () => {
this.editor.execute(action);
});
};
this.addOption(combo, title, clickHandler);
}
@ -241,7 +241,7 @@ class mxDefaultToolbar {
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, () => {
const factory = () => {
if (typeof ptype === 'function') {
return ptype();
}
@ -250,7 +250,7 @@ class mxDefaultToolbar {
}
return null;
});
};
// Defines the function for a click event on the graph
// after this item has been selected in the toolbar
@ -428,7 +428,7 @@ class mxDefaultToolbar {
sprite.setAttribute('src', img.getAttribute('src'));
// Handles delayed loading of the images
const loader = mxUtils.bind(this, evt => {
const loader = evt => {
// Preview uses the image node with double size. Later this can be
// changed to use a separate preview and guides, but for this the
// dropHandler must use the additional x- and y-arguments and the
@ -439,7 +439,7 @@ class mxDefaultToolbar {
makeDraggable(img, this.editor.graph, dropHandler, sprite);
mxEvent.removeListener(sprite, 'load', loader);
});
};
}
/**

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

@ -20,7 +20,20 @@ import mxForm from '../util/gui/mxForm';
import mxOutline from '../view/graph/mxOutline';
import mxCell from '../view/cell/mxCell';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxConstants from '../util/mxConstants';
import {
ALIGN_BOTTOM,
ALIGN_CENTER,
ALIGN_LEFT,
ALIGN_MIDDLE,
ALIGN_RIGHT,
ALIGN_TOP,
FONT_BOLD,
FONT_ITALIC,
FONT_UNDERLINE,
STYLE_ALIGN,
STYLE_FONTSTYLE,
STYLE_VERTICAL_ALIGN,
} from '../util/mxConstants';
import mxGraph from '../view/graph/mxGraph';
import mxSwimlaneManager from '../view/graph/mxSwimlaneManager';
import mxLayoutManager from '../view/graph/mxLayoutManager';
@ -975,20 +988,20 @@ class mxEditor extends mxEventSource {
*/
// addActions(): void;
addActions() {
this.addAction('save', editor => {
this.addAction('save', (editor) => {
editor.save();
});
this.addAction('print', editor => {
this.addAction('print', (editor) => {
const preview = new mxPrintPreview(editor.graph, 1);
preview.open();
});
this.addAction('show', editor => {
this.addAction('show', (editor) => {
mxUtils.show(editor.graph, null, 10, 10);
});
this.addAction('exportImage', editor => {
this.addAction('exportImage', (editor) => {
const url = editor.getUrlImage();
if (url == null || mxClient.IS_LOCAL) {
@ -1006,77 +1019,77 @@ class mxEditor extends mxEventSource {
}
});
this.addAction('refresh', editor => {
this.addAction('refresh', (editor) => {
editor.graph.refresh();
});
this.addAction('cut', editor => {
this.addAction('cut', (editor) => {
if (editor.graph.isEnabled()) {
mxClipboard.cut(editor.graph);
}
});
this.addAction('copy', editor => {
this.addAction('copy', (editor) => {
if (editor.graph.isEnabled()) {
mxClipboard.copy(editor.graph);
}
});
this.addAction('paste', editor => {
this.addAction('paste', (editor) => {
if (editor.graph.isEnabled()) {
mxClipboard.paste(editor.graph);
}
});
this.addAction('delete', editor => {
this.addAction('delete', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.removeCells();
}
});
this.addAction('group', editor => {
this.addAction('group', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.setSelectionCell(editor.groupCells());
}
});
this.addAction('ungroup', editor => {
this.addAction('ungroup', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.setSelectionCells(editor.graph.ungroupCells());
}
});
this.addAction('removeFromParent', editor => {
this.addAction('removeFromParent', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.removeCellsFromParent();
}
});
this.addAction('undo', editor => {
this.addAction('undo', (editor) => {
if (editor.graph.isEnabled()) {
editor.undo();
}
});
this.addAction('redo', editor => {
this.addAction('redo', (editor) => {
if (editor.graph.isEnabled()) {
editor.redo();
}
});
this.addAction('zoomIn', editor => {
this.addAction('zoomIn', (editor) => {
editor.graph.zoomIn();
});
this.addAction('zoomOut', editor => {
this.addAction('zoomOut', (editor) => {
editor.graph.zoomOut();
});
this.addAction('actualSize', editor => {
this.addAction('actualSize', (editor) => {
editor.graph.zoomActual();
});
this.addAction('fit', editor => {
this.addAction('fit', (editor) => {
editor.graph.fit();
});
@ -1084,25 +1097,25 @@ class mxEditor extends mxEventSource {
editor.showProperties(cell);
});
this.addAction('selectAll', editor => {
this.addAction('selectAll', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.selectAll();
}
});
this.addAction('selectNone', editor => {
this.addAction('selectNone', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.clearSelection();
}
});
this.addAction('selectVertices', editor => {
this.addAction('selectVertices', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.selectVertices();
}
});
this.addAction('selectEdges', editor => {
this.addAction('selectEdges', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.selectEdges();
}
@ -1130,180 +1143,153 @@ class mxEditor extends mxEventSource {
editor.graph.enterGroup(cell);
});
this.addAction('exitGroup', editor => {
this.addAction('exitGroup', (editor) => {
editor.graph.exitGroup();
});
this.addAction('home', editor => {
this.addAction('home', (editor) => {
editor.graph.home();
});
this.addAction('selectPrevious', editor => {
this.addAction('selectPrevious', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.selectPreviousCell();
}
});
this.addAction('selectNext', editor => {
this.addAction('selectNext', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.selectNextCell();
}
});
this.addAction('selectParent', editor => {
this.addAction('selectParent', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.selectParentCell();
}
});
this.addAction('selectChild', editor => {
this.addAction('selectChild', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.selectChildCell();
}
});
this.addAction('collapse', editor => {
this.addAction('collapse', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.foldCells(true);
}
});
this.addAction('collapseAll', editor => {
this.addAction('collapseAll', (editor) => {
if (editor.graph.isEnabled()) {
const cells = editor.graph.getChildVertices();
editor.graph.foldCells(true, false, cells);
}
});
this.addAction('expand', editor => {
this.addAction('expand', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.foldCells(false);
}
});
this.addAction('expandAll', editor => {
this.addAction('expandAll', (editor) => {
if (editor.graph.isEnabled()) {
const cells = editor.graph.getChildVertices();
editor.graph.foldCells(false, false, cells);
}
});
this.addAction('bold', editor => {
this.addAction('bold', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.toggleCellStyleFlags(
mxConstants.STYLE_FONTSTYLE,
mxConstants.FONT_BOLD
);
editor.graph.toggleCellStyleFlags(STYLE_FONTSTYLE, FONT_BOLD);
}
});
this.addAction('italic', editor => {
this.addAction('italic', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.toggleCellStyleFlags(
mxConstants.STYLE_FONTSTYLE,
mxConstants.FONT_ITALIC
);
editor.graph.toggleCellStyleFlags(STYLE_FONTSTYLE, FONT_ITALIC);
}
});
this.addAction('underline', editor => {
this.addAction('underline', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.toggleCellStyleFlags(
mxConstants.STYLE_FONTSTYLE,
mxConstants.FONT_UNDERLINE
);
editor.graph.toggleCellStyleFlags(STYLE_FONTSTYLE, FONT_UNDERLINE);
}
});
this.addAction('alignCellsLeft', editor => {
this.addAction('alignCellsLeft', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.alignCells(mxConstants.ALIGN_LEFT);
editor.graph.alignCells(ALIGN_LEFT);
}
});
this.addAction('alignCellsCenter', editor => {
this.addAction('alignCellsCenter', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.alignCells(mxConstants.ALIGN_CENTER);
editor.graph.alignCells(ALIGN_CENTER);
}
});
this.addAction('alignCellsRight', editor => {
this.addAction('alignCellsRight', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.alignCells(mxConstants.ALIGN_RIGHT);
editor.graph.alignCells(ALIGN_RIGHT);
}
});
this.addAction('alignCellsTop', editor => {
this.addAction('alignCellsTop', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.alignCells(mxConstants.ALIGN_TOP);
editor.graph.alignCells(ALIGN_TOP);
}
});
this.addAction('alignCellsMiddle', editor => {
this.addAction('alignCellsMiddle', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.alignCells(mxConstants.ALIGN_MIDDLE);
editor.graph.alignCells(ALIGN_MIDDLE);
}
});
this.addAction('alignCellsBottom', editor => {
this.addAction('alignCellsBottom', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.alignCells(mxConstants.ALIGN_BOTTOM);
editor.graph.alignCells(ALIGN_BOTTOM);
}
});
this.addAction('alignFontLeft', editor => {
editor.graph.setCellStyles(
mxConstants.STYLE_ALIGN,
mxConstants.ALIGN_LEFT
);
this.addAction('alignFontLeft', (editor) => {
editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_LEFT);
});
this.addAction('alignFontCenter', editor => {
this.addAction('alignFontCenter', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(
mxConstants.STYLE_ALIGN,
mxConstants.ALIGN_CENTER
);
editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_CENTER);
}
});
this.addAction('alignFontRight', editor => {
this.addAction('alignFontRight', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(
mxConstants.STYLE_ALIGN,
mxConstants.ALIGN_RIGHT
);
editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_RIGHT);
}
});
this.addAction('alignFontTop', editor => {
this.addAction('alignFontTop', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(
mxConstants.STYLE_VERTICAL_ALIGN,
mxConstants.ALIGN_TOP
);
editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_TOP);
}
});
this.addAction('alignFontMiddle', editor => {
this.addAction('alignFontMiddle', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(
mxConstants.STYLE_VERTICAL_ALIGN,
mxConstants.ALIGN_MIDDLE
);
editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_MIDDLE);
}
});
this.addAction('alignFontBottom', editor => {
this.addAction('alignFontBottom', (editor) => {
if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(
mxConstants.STYLE_VERTICAL_ALIGN,
mxConstants.ALIGN_BOTTOM
);
editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_BOTTOM);
}
});
this.addAction('zoom', editor => {
this.addAction('zoom', (editor) => {
const current = editor.graph.getView().scale * 100;
const scale =
parseFloat(
@ -1318,7 +1304,7 @@ class mxEditor extends mxEventSource {
}
});
this.addAction('toggleTasks', editor => {
this.addAction('toggleTasks', (editor) => {
if (editor.tasks != null) {
editor.tasks.setVisible(!editor.tasks.isVisible());
} else {
@ -1326,7 +1312,7 @@ class mxEditor extends mxEventSource {
}
});
this.addAction('toggleHelp', editor => {
this.addAction('toggleHelp', (editor) => {
if (editor.help != null) {
editor.help.setVisible(!editor.help.isVisible());
} else {
@ -1334,7 +1320,7 @@ class mxEditor extends mxEventSource {
}
});
this.addAction('toggleOutline', editor => {
this.addAction('toggleOutline', (editor) => {
if (editor.outline == null) {
editor.showOutline();
} else {
@ -1342,7 +1328,7 @@ class mxEditor extends mxEventSource {
}
});
this.addAction('toggleConsole', editor => {
this.addAction('toggleConsole', (editor) => {
mxLog.setVisible(!mxLog.isVisible());
});
}
@ -1529,9 +1515,9 @@ class mxEditor extends mxEventSource {
createSwimlaneManager(graph) {
const swimlaneMgr = new mxSwimlaneManager(graph, false);
swimlaneMgr.isHorizontal = mxUtils.bind(this, () => {
swimlaneMgr.isHorizontal = () => {
return this.horizontalFlow;
});
};
swimlaneMgr.isEnabled = () => {
return this.maintainSwimlanes;
@ -1551,7 +1537,7 @@ class mxEditor extends mxEventSource {
const layoutMgr = new mxLayoutManager(graph);
const self = this; // closure
layoutMgr.getLayout = cell => {
layoutMgr.getLayout = (cell) => {
let layout = null;
const model = self.graph.getModel();
@ -1572,8 +1558,7 @@ class mxEditor extends mxEventSource {
// lazy created in createDiagramLayout.
else if (
self.layoutDiagram &&
(graph.isValidRoot(cell) ||
cell.getParent().getParent() == null)
(graph.isValidRoot(cell) || cell.getParent().getParent() == null)
) {
if (self.diagramLayout == null) {
self.diagramLayout = self.createDiagramLayout();
@ -1619,17 +1604,14 @@ class mxEditor extends mxEventSource {
// installDblClickHandler(graph: any): void;
installDblClickHandler(graph) {
// Installs a listener for double click events
graph.addListener(
mxEvent.DOUBLE_CLICK,
mxUtils.bind(this, (sender, evt) => {
graph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {
const cell = evt.getProperty('cell');
if (cell != null && graph.isEnabled() && this.dblClickAction != null) {
this.execute(this.dblClickAction, cell);
evt.consume();
}
})
);
});
}
/**
@ -1662,9 +1644,9 @@ class mxEditor extends mxEventSource {
*/
// installDrillHandler(graph: any): void;
installDrillHandler(graph) {
const listener = mxUtils.bind(this, sender => {
const listener = (sender) => {
this.fireEvent(new mxEventObject(mxEvent.ROOT));
});
};
graph.getView().addListener(mxEvent.DOWN, listener);
graph.getView().addListener(mxEvent.UP, listener);
@ -1768,7 +1750,7 @@ class mxEditor extends mxEventSource {
);
// Overrides isIgnored to only take into account swimlanes
layout.isVertexIgnored = cell => {
layout.isVertexIgnored = (cell) => {
return !layout.graph.isSwimlane(cell);
};
@ -1817,23 +1799,23 @@ class mxEditor extends mxEventSource {
// Prints the last saved time in the status bar
// when files are saved
this.addListener(
mxEvent.SAVE,
mxUtils.bind(this, () => {
this.addListener(mxEvent.SAVE, () => {
const tstamp = new Date().toLocaleString();
this.setStatus(
`${mxResources.get(this.lastSavedResource) ||
this.lastSavedResource}: ${tstamp}`
);
})
`${
mxResources.get(this.lastSavedResource) || this.lastSavedResource
}: ${tstamp}`
);
});
// Updates the statusbar to display the filename
// when new files are opened
this.addListener(mxEvent.OPEN, () => {
this.setStatus(
`${mxResources.get(this.currentFileResource) ||
this.currentFileResource}: ${this.filename}`
`${
mxResources.get(this.currentFileResource) ||
this.currentFileResource
}: ${this.filename}`
);
});
}
@ -1857,12 +1839,9 @@ class mxEditor extends mxEventSource {
*/
// setTitleContainer(container: any): void;
setTitleContainer(container) {
this.addListener(
mxEvent.ROOT,
mxUtils.bind(this, sender => {
this.addListener(mxEvent.ROOT, (sender) => {
container.innerHTML = this.getTitle();
})
);
});
}
/**
@ -1890,10 +1869,7 @@ class mxEditor extends mxEventSource {
const { graph } = this;
let cell = graph.getCurrentRoot();
while (
cell != null &&
cell.getParent().getParent() != null
) {
while (cell != null && cell.getParent().getParent() != null) {
// Append each label of a valid root
if (graph.isValidRoot(cell)) {
title = ` > ${graph.convertValueToString(cell)}${title}`;
@ -2068,7 +2044,7 @@ class mxEditor extends mxEventSource {
data = encodeURIComponent(data);
}
mxUtils.post(url, `${this.postParameterName}=${data}`, req => {
mxUtils.post(url, `${this.postParameterName}=${data}`, (req) => {
this.fireEvent(
new mxEventObject(
mxEvent.POST,
@ -2286,7 +2262,7 @@ class mxEditor extends mxEventSource {
// Defines the function to be executed when the
// OK button is pressed in the dialog
const okFunction = mxUtils.bind(this, () => {
const okFunction = () => {
// Hides the dialog
this.hideProperties();
@ -2335,7 +2311,7 @@ class mxEditor extends mxEventSource {
} finally {
model.endUpdate();
}
});
};
// Defines the function to be executed when the
// Cancel button is pressed in the dialog
@ -2404,11 +2380,11 @@ class mxEditor extends mxEventSource {
// Installs a function to update the contents
// of the tasks window on every change of the
// model, selection or root.
const funct = mxUtils.bind(this, sender => {
const funct = (sender) => {
mxEvent.release(div);
div.innerHTML = '';
this.createTasks(div);
});
};
this.graph.getModel().addListener(mxEvent.CHANGE, funct);
this.graph.getSelectionModel().addListener(mxEvent.CHANGE, funct);
@ -2494,7 +2470,7 @@ class mxEditor extends mxEventSource {
// Workaround for ignored iframe height 100% in FF
if (mxClient.IS_NS) {
const handler = sender => {
const handler = (sender) => {
const h = wnd.div.offsetHeight;
frame.setAttribute('height', `${h - 26}px`);
};

43
packages/core/src/handler/mxCellHighlight.ts
View File

@ -4,7 +4,13 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import mxConstants from '../util/mxConstants';
import {
DEFAULT_VALID_COLOR,
DIALECT_SVG,
HIGHLIGHT_OPACITY,
HIGHLIGHT_STROKEWIDTH,
STYLE_ROTATION,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxCellState from '../view/cell/mxCellState';
@ -23,8 +29,8 @@ import mxShape from '../shape/mxShape';
class mxCellHighlight {
constructor(
graph: mxGraph | null = null,
highlightColor: string = mxConstants.DEFAULT_VALID_COLOR,
strokeWidth: number = mxConstants.HIGHLIGHT_STROKEWIDTH,
highlightColor: string = DEFAULT_VALID_COLOR,
strokeWidth: number = HIGHLIGHT_STROKEWIDTH,
dashed: boolean = false
) {
if (graph != null) {
@ -32,7 +38,7 @@ class mxCellHighlight {
this.highlightColor = highlightColor;
this.strokeWidth = strokeWidth;
this.dashed = dashed;
this.opacity = mxConstants.HIGHLIGHT_OPACITY;
this.opacity = HIGHLIGHT_OPACITY;
// Updates the marker if the graph changes
this.repaintHandler = () => {
@ -68,17 +74,17 @@ class mxCellHighlight {
}
// TODO: Document me!!
highlightColor: string | null=null;
highlightColor: string | null = null;
strokeWidth: number | null=null;
strokeWidth: number | null = null;
dashed: boolean=false;
dashed: boolean = false;
opacity: number=100;
opacity: number = 100;
repaintHandler: Function | null=null;
repaintHandler: Function | null = null;
shape: mxShape | null=null;
shape: mxShape | null = null;
/**
* Specifies if the highlights should appear on top of everything else in the overlay pane.
@ -157,7 +163,9 @@ class mxCellHighlight {
*/
// createShape(): mxShape;
createShape(): mxShape {
const shape = <mxShape>(<mxGraph>this.graph).cellRenderer.createShape(<mxCellState>this.state);
const shape = <mxShape>(
(<mxGraph>this.graph).cellRenderer.createShape(<mxCellState>this.state)
);
shape.svgStrokeTolerance = (<mxGraph>this.graph).tolerance;
shape.points = (<mxCellState>this.state).absolutePoints;
@ -167,11 +175,11 @@ class mxCellHighlight {
shape.isDashed = this.dashed;
shape.isShadow = false;
shape.dialect = mxConstants.DIALECT_SVG;
shape.dialect = DIALECT_SVG;
shape.init((<mxGraph>this.graph).getView().getOverlayPane());
mxEvent.redirectMouseEvents(shape.node, this.graph, this.state);
if ((<mxGraph>this.graph).dialect !== mxConstants.DIALECT_SVG) {
if ((<mxGraph>this.graph).dialect !== DIALECT_SVG) {
shape.pointerEvents = false;
} else {
shape.svgPointerEvents = 'stroke';
@ -208,10 +216,9 @@ class mxCellHighlight {
this.state.width + 2 * this.spacing,
this.state.height + 2 * this.spacing
);
this.shape.rotation = Number(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
);
this.shape.strokewidth = <number>this.getStrokeWidth() / this.state.view.scale;
this.shape.rotation = Number(this.state.style[STYLE_ROTATION] || '0');
this.shape.strokewidth =
<number>this.getStrokeWidth() / this.state.view.scale;
this.shape.outline = true;
}
@ -236,7 +243,7 @@ class mxCellHighlight {
* Marks the <markedState> and fires a <mark> event.
*/
// highlight(state: mxCellState): void;
highlight(state: mxCellState | null=null): void {
highlight(state: mxCellState | null = null): void {
if (this.state !== state) {
if (this.shape != null) {
this.shape.destroy();

21
packages/core/src/handler/mxCellMarker.js
View File

@ -5,7 +5,13 @@
* Type definitions from the typed-mxgraph project
*/
import mxEventSource from '../util/event/mxEventSource';
import mxConstants from '../util/mxConstants';
import {
DEFAULT_HOTSPOT,
DEFAULT_INVALID_COLOR,
DEFAULT_VALID_COLOR,
MAX_HOTSPOT_SIZE,
MIN_HOTSPOT_SIZE,
} from '../util/mxConstants';
import mxCellHighlight from './mxCellHighlight';
import mxEventObject from '../util/event/mxEventObject';
import mxEvent from '../util/event/mxEvent';
@ -57,11 +63,10 @@ class mxCellMarker extends mxEventSource {
if (graph != null) {
this.graph = graph;
this.validColor =
validColor != null ? validColor : mxConstants.DEFAULT_VALID_COLOR;
this.validColor = validColor != null ? validColor : DEFAULT_VALID_COLOR;
this.invalidColor =
invalidColor != null ? invalidColor : mxConstants.DEFAULT_INVALID_COLOR;
this.hotspot = hotspot != null ? hotspot : mxConstants.DEFAULT_HOTSPOT;
invalidColor != null ? invalidColor : DEFAULT_INVALID_COLOR;
this.hotspot = hotspot != null ? hotspot : DEFAULT_HOTSPOT;
this.highlight = new mxCellHighlight(graph);
}
@ -92,7 +97,7 @@ class mxCellMarker extends mxEventSource {
* mxConstants.DEFAULT_HOTSPOT.
*/
// hotspot: number;
hotspot = mxConstants.DEFAULT_HOTSPOT;
hotspot = DEFAULT_HOTSPOT;
/**
* Variable: hotspotEnabled
@ -420,8 +425,8 @@ class mxCellMarker extends mxEventSource {
me.getGraphX(),
me.getGraphY(),
this.hotspot,
mxConstants.MIN_HOTSPOT_SIZE,
mxConstants.MAX_HOTSPOT_SIZE
MIN_HOTSPOT_SIZE,
MAX_HOTSPOT_SIZE
);
}

98
packages/core/src/handler/mxConnectionHandler.js
View File

@ -7,7 +7,23 @@ import mxCell from '../view/cell/mxCell';
import mxPoint from '../util/datatypes/mxPoint';
import mxEventObject from '../util/event/mxEventObject';
import mxEvent from '../util/event/mxEvent';
import mxConstants from '../util/mxConstants';
import {
CURSOR_CONNECT,
DEFAULT_VALID_COLOR,
DIALECT_STRICTHTML,
DIALECT_SVG,
HIGHLIGHT_STROKEWIDTH,
INVALID_COLOR,
OUTLINE_HIGHLIGHT_COLOR,
OUTLINE_HIGHLIGHT_STROKEWIDTH,
STYLE_ENTRY_X,
STYLE_ENTRY_Y,
STYLE_EXIT_X,
STYLE_EXIT_Y,
STYLE_ROTATION,
TOOLTIP_VERTICAL_OFFSET,
VALID_COLOR,
} from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
import mxMouseEvent from '../util/event/mxMouseEvent';
import mxImageShape from '../shape/node/mxImageShape';
@ -17,7 +33,13 @@ import mxPolyline from '../shape/edge/mxPolyline';
import mxEventSource from '../util/event/mxEventSource';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxLog from '../util/gui/mxLog';
import { getClientX, getClientY, isAltDown, isConsumed, isShiftDown } from '../util/mxEventUtils';
import {
getClientX,
getClientY,
isAltDown,
isConsumed,
isShiftDown,
} from '../util/mxEventUtils';
/**
* Class: mxConnectionHandler
@ -341,7 +363,7 @@ class mxConnectionHandler extends mxEventSource {
* offset of (0,0) will affect hit detection.
*/
// connectIconOffset: mxPoint;
connectIconOffset = new mxPoint(0, mxConstants.TOOLTIP_VERTICAL_OFFSET);
connectIconOffset = new mxPoint(0, TOOLTIP_VERTICAL_OFFSET);
/**
* Variable: edgeState
@ -503,8 +525,8 @@ class mxConnectionHandler extends mxEventSource {
const shape =
this.livePreview && this.edgeState != null
? this.graph.cellRenderer.createShape(this.edgeState)
: new mxPolyline([], mxConstants.INVALID_COLOR);
shape.dialect = mxConstants.DIALECT_SVG;
: new mxPolyline([], INVALID_COLOR);
shape.dialect = DIALECT_SVG;
shape.scale = this.graph.view.scale;
shape.pointerEvents = false;
shape.isDashed = true;
@ -528,7 +550,7 @@ class mxConnectionHandler extends mxEventSource {
this.constraintHandler = new mxConstraintHandler(this.graph);
// Redraws the icons if the graph changes
this.changeHandler = mxUtils.bind(this, sender => {
this.changeHandler = (sender) => {
if (this.iconState != null) {
this.iconState = this.graph.getView().getState(this.iconState.cell);
}
@ -542,7 +564,7 @@ class mxConnectionHandler extends mxEventSource {
) {
this.reset();
}
});
};
this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler);
this.graph.getView().addListener(mxEvent.SCALE, this.changeHandler);
@ -552,7 +574,7 @@ class mxConnectionHandler extends mxEventSource {
.addListener(mxEvent.SCALE_AND_TRANSLATE, this.changeHandler);
// Removes the icon if we step into/up or start editing
this.drillHandler = sender => {
this.drillHandler = (sender) => {
this.reset();
};
@ -586,7 +608,7 @@ class mxConnectionHandler extends mxEventSource {
// Overrides to return cell at location only if valid (so that
// there is no highlight for invalid cells)
getCell = me => {
getCell = (me) => {
let cell = super.getCell(me);
self.error = null;
@ -599,10 +621,7 @@ class mxConnectionHandler extends mxEventSource {
if (cell != null && !cell.isConnectable()) {
const parent = self.cell.getParent();
if (
parent.isVertex() &&
parent.isConnectable()
) {
if (parent.isVertex() && parent.isConnectable()) {
cell = parent;
}
}
@ -649,7 +668,7 @@ class mxConnectionHandler extends mxEventSource {
};
// Sets the highlight color according to validateConnection
isValidState = state => {
isValidState = (state) => {
if (self.isConnecting()) {
return self.error == null;
}
@ -823,10 +842,10 @@ class mxConnectionHandler extends mxEventSource {
icon.preserveImageAspect = false;
if (this.isMoveIconToFrontForState(state)) {
icon.dialect = mxConstants.DIALECT_STRICTHTML;
icon.dialect = DIALECT_STRICTHTML;
icon.init(this.graph.container);
} else {
icon.dialect = mxConstants.DIALECT_SVG;
icon.dialect = DIALECT_SVG;
icon.init(this.graph.getView().getOverlayPane());
// Move the icon back in the overlay pane
@ -838,7 +857,7 @@ class mxConnectionHandler extends mxEventSource {
}
}
icon.node.style.cursor = mxConstants.CURSOR_CONNECT;
icon.node.style.cursor = CURSOR_CONNECT;
// Events transparency
const getState = () => {
@ -846,7 +865,7 @@ class mxConnectionHandler extends mxEventSource {
};
// Updates the local icon before firing the mouse down event.
const mouseDown = evt => {
const mouseDown = (evt) => {
if (!isConsumed(evt)) {
this.icon = icon;
this.graph.fireMouseEvent(
@ -908,7 +927,7 @@ class mxConnectionHandler extends mxEventSource {
cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy;
const alpha = mxUtils.toRadians(
mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION) || 0
mxUtils.getValue(state.style, STYLE_ROTATION) || 0
);
if (alpha !== 0) {
@ -1196,10 +1215,9 @@ class mxConnectionHandler extends mxEventSource {
this.constraintHandler.currentConstraint != null &&
this.constraintHandler.currentFocus != null
) {
this.marker.highlight.shape.stroke =
mxConstants.OUTLINE_HIGHLIGHT_COLOR;
this.marker.highlight.shape.stroke = OUTLINE_HIGHLIGHT_COLOR;
this.marker.highlight.shape.strokewidth =
mxConstants.OUTLINE_HIGHLIGHT_STROKEWIDTH / s / s;
OUTLINE_HIGHLIGHT_STROKEWIDTH / s / s;
this.marker.highlight.repaint();
} else if (this.marker.hasValidState()) {
// Handles special case where actual end point of edge and current mouse point
@ -1212,12 +1230,11 @@ class mxConnectionHandler extends mxEventSource {
this.marker.highlight.shape.stroke = 'transparent';
this.currentState = null;
} else {
this.marker.highlight.shape.stroke =
mxConstants.DEFAULT_VALID_COLOR;
this.marker.highlight.shape.stroke = DEFAULT_VALID_COLOR;
}
this.marker.highlight.shape.strokewidth =
mxConstants.HIGHLIGHT_STROKEWIDTH / s / s;
HIGHLIGHT_STROKEWIDTH / s / s;
this.marker.highlight.repaint();
}
}
@ -1500,7 +1517,7 @@ class mxConnectionHandler extends mxEventSource {
this.icons = this.createIcons(this.currentState);
if (this.icons == null) {
this.currentState.setCursor(mxConstants.CURSOR_CONNECT);
this.currentState.setCursor(CURSOR_CONNECT);
me.consume();
}
}
@ -1548,20 +1565,16 @@ class mxConnectionHandler extends mxEventSource {
updateEdgeState(current, constraint) {
// TODO: Use generic method for writing constraint to style
if (this.sourceConstraint != null && this.sourceConstraint.point != null) {
this.edgeState.style[
mxConstants.STYLE_EXIT_X
] = this.sourceConstraint.point.x;
this.edgeState.style[
mxConstants.STYLE_EXIT_Y
] = this.sourceConstraint.point.y;
this.edgeState.style[STYLE_EXIT_X] = this.sourceConstraint.point.x;
this.edgeState.style[STYLE_EXIT_Y] = this.sourceConstraint.point.y;
}
if (constraint != null && constraint.point != null) {
this.edgeState.style[mxConstants.STYLE_ENTRY_X] = constraint.point.x;
this.edgeState.style[mxConstants.STYLE_ENTRY_Y] = constraint.point.y;
this.edgeState.style[STYLE_ENTRY_X] = constraint.point.x;
this.edgeState.style[STYLE_ENTRY_Y] = constraint.point.y;
} else {
delete this.edgeState.style[mxConstants.STYLE_ENTRY_X];
delete this.edgeState.style[mxConstants.STYLE_ENTRY_Y];
delete this.edgeState.style[STYLE_ENTRY_X];
delete this.edgeState.style[STYLE_ENTRY_Y];
}
this.edgeState.absolutePoints = [
@ -1677,11 +1690,7 @@ class mxConnectionHandler extends mxEventSource {
const c = new mxPoint(state.getCenterX(), state.getCenterY());
if (sourcePerimeter != null) {
const theta = mxUtils.getValue(
state.style,
mxConstants.STYLE_ROTATION,
0
);
const theta = mxUtils.getValue(state.style, STYLE_ROTATION, 0);
const rad = -theta * (Math.PI / 180);
if (theta !== 0) {
@ -1944,7 +1953,7 @@ class mxConnectionHandler extends mxEventSource {
*/
// getEdgeColor(valid: boolean): string;
getEdgeColor(valid) {
return valid ? mxConstants.VALID_COLOR : mxConstants.INVALID_COLOR;
return valid ? VALID_COLOR : INVALID_COLOR;
}
/**
@ -2006,10 +2015,7 @@ class mxConnectionHandler extends mxEventSource {
// Disables edges as drop targets if the target cell was created
// FIXME: Should not shift if vertex was aligned (same in Java)
if (
dropTarget == null ||
!dropTarget.isEdge()
) {
if (dropTarget == null || !dropTarget.isEdge()) {
const pstate = this.graph.getView().getState(dropTarget);
if (pstate != null) {

38
packages/core/src/handler/mxConstraintHandler.js
View File

@ -6,7 +6,14 @@
*/
import mxImage from '../util/image/mxImage';
import mxClient from '../mxClient';
import mxConstants from '../util/mxConstants';
import {
DEFAULT_VALID_COLOR,
DIALECT_MIXEDHTML,
DIALECT_SVG,
HIGHLIGHT_OPACITY,
HIGHLIGHT_SIZE,
HIGHLIGHT_STROKEWIDTH,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxUtils from '../util/mxUtils';
import mxRectangle from '../util/datatypes/mxRectangle';
@ -63,10 +70,10 @@ class mxConstraintHandler {
enabled = true;
/**
* Specifies the color for the highlight. Default is {@link mxConstants.DEFAULT_VALID_COLOR}.
* Specifies the color for the highlight. Default is {@link DEFAULT_VALID_COLOR}.
*/
// highlightColor: string;
highlightColor = mxConstants.DEFAULT_VALID_COLOR;
highlightColor = DEFAULT_VALID_COLOR;
/**
* Returns true if events are handled. This implementation
@ -208,10 +215,7 @@ class mxConstraintHandler {
if (cell != null && !cell.isConnectable()) {
const parent = cell.getParent();
if (
parent.isVertex() &&
parent.isConnectable()
) {
if (parent.isVertex() && parent.isConnectable()) {
cell = parent;
}
}
@ -232,9 +236,9 @@ class mxConstraintHandler {
if (this.isEnabled() && !this.isEventIgnored(me)) {
// Lazy installation of mouseleave handler
if (this.mouseleaveHandler == null && this.graph.container != null) {
this.mouseleaveHandler = mxUtils.bind(this, () => {
this.mouseleaveHandler = () => {
this.reset();
});
};
mxEvent.addListener(
this.graph.container,
@ -305,13 +309,13 @@ class mxConstraintHandler {
minDistSq = tmp;
tmp = this.focusIcons[i].bounds.clone();
tmp.grow(mxConstants.HIGHLIGHT_SIZE + 1);
tmp.grow(HIGHLIGHT_SIZE + 1);
tmp.width -= 1;
tmp.height -= 1;
if (this.focusHighlight == null) {
const hl = this.createHighlightShape();
hl.dialect = mxConstants.DIALECT_SVG;
hl.dialect = DIALECT_SVG;
hl.pointerEvents = false;
hl.init(this.graph.getView().getOverlayPane());
@ -430,9 +434,7 @@ class mxConstraintHandler {
);
const icon = new mxImageShape(bounds, src);
icon.dialect =
this.graph.dialect !== mxConstants.DIALECT_SVG
? mxConstants.DIALECT_MIXEDHTML
: mxConstants.DIALECT_SVG;
this.graph.dialect !== DIALECT_SVG ? DIALECT_MIXEDHTML : DIALECT_SVG;
icon.preserveImageAspect = false;
icon.init(this.graph.getView().getDecoratorPane());
@ -444,9 +446,9 @@ class mxConstraintHandler {
);
}
const getState = mxUtils.bind(this, () => {
const getState = () => {
return this.currentFocus != null ? this.currentFocus : state;
});
};
icon.redraw();
@ -474,9 +476,9 @@ class mxConstraintHandler {
null,
this.highlightColor,
this.highlightColor,
mxConstants.HIGHLIGHT_STROKEWIDTH
HIGHLIGHT_STROKEWIDTH
);
hl.opacity = mxConstants.HIGHLIGHT_OPACITY;
hl.opacity = HIGHLIGHT_OPACITY;
return hl;
}

173
packages/core/src/handler/mxEdgeHandler.js
View File

@ -6,7 +6,39 @@
*/
import mxCellMarker from './mxCellMarker';
import mxPoint from '../util/datatypes/mxPoint';
import mxConstants from '../util/mxConstants';
import {
CONNECT_HANDLE_FILLCOLOR,
CURSOR_BEND_HANDLE,
CURSOR_LABEL_HANDLE,
CURSOR_MOVABLE_EDGE,
CURSOR_TERMINAL_HANDLE,
CURSOR_VIRTUAL_BEND_HANDLE,
DEFAULT_VALID_COLOR,
DIALECT_MIXEDHTML,
DIALECT_STRICTHTML,
DIALECT_SVG,
EDGE_SELECTION_COLOR,
EDGE_SELECTION_DASHED,
EDGE_SELECTION_STROKEWIDTH,
HANDLE_FILLCOLOR,
HANDLE_SIZE,
HANDLE_STROKECOLOR,
HIGHLIGHT_STROKEWIDTH,
LABEL_HANDLE_FILLCOLOR,
LABEL_HANDLE_SIZE,
LOCKED_HANDLE_FILLCOLOR,
NONE,
OUTLINE_HIGHLIGHT_COLOR,
OUTLINE_HIGHLIGHT_STROKEWIDTH,
STYLE_EDGE,
STYLE_ENTRY_X,
STYLE_ENTRY_Y,
STYLE_EXIT_X,
STYLE_EXIT_Y,
STYLE_NOEDGESTYLE,
STYLE_ROTATION,
STYLE_SHAPE,
} from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
import mxImageShape from '../shape/node/mxImageShape';
import mxRectangleShape from '../shape/node/mxRectangleShape';
@ -16,7 +48,13 @@ import mxConstraintHandler from './mxConstraintHandler';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxClient from '../mxClient';
import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle';
import { getClientX, getClientY, isAltDown, isMouseEvent, isShiftDown } from '../util/mxEventUtils';
import {
getClientX,
getClientY,
isAltDown,
isMouseEvent,
isShiftDown,
} from '../util/mxEventUtils';
/**
* Graph event handler that reconnects edges and modifies control points and the edge
@ -272,9 +310,7 @@ class mxEdgeHandler {
* always returns true.
*/
isParentHighlightVisible() {
return !this.graph.isCellSelected(
this.state.cell.getParent()
);
return !this.graph.isCellSelected(this.state.cell.getParent());
}
/**
@ -321,10 +357,10 @@ class mxEdgeHandler {
) {
this.parentHighlight = this.createParentHighlightShape(pstate);
// VML dialect required here for event transparency in IE
this.parentHighlight.dialect = mxConstants.DIALECT_SVG;
this.parentHighlight.dialect = DIALECT_SVG;
this.parentHighlight.pointerEvents = false;
this.parentHighlight.rotation = Number(
pstate.style[mxConstants.STYLE_ROTATION] || '0'
pstate.style[STYLE_ROTATION] || '0'
);
this.parentHighlight.init(this.graph.getView().getOverlayPane());
this.parentHighlight.redraw();
@ -356,12 +392,10 @@ class mxEdgeHandler {
this.abspoints = this.getSelectionPoints(this.state);
this.shape = this.createSelectionShape(this.abspoints);
this.shape.dialect =
this.graph.dialect !== mxConstants.DIALECT_SVG
? mxConstants.DIALECT_MIXEDHTML
: mxConstants.DIALECT_SVG;
this.graph.dialect !== DIALECT_SVG ? DIALECT_MIXEDHTML : DIALECT_SVG;
this.shape.init(this.graph.getView().getOverlayPane());
this.shape.pointerEvents = false;
this.shape.setCursor(mxConstants.CURSOR_MOVABLE_EDGE);
this.shape.setCursor(CURSOR_MOVABLE_EDGE);
mxEvent.redirectMouseEvents(this.shape.node, this.graph, this.state);
// Updates preferHtml
@ -411,7 +445,7 @@ class mxEdgeHandler {
);
this.labelShape = this.createLabelHandleShape();
this.initBend(this.labelShape);
this.labelShape.setCursor(mxConstants.CURSOR_LABEL_HANDLE);
this.labelShape.setCursor(CURSOR_LABEL_HANDLE);
this.customHandles = this.createCustomHandles();
@ -440,11 +474,10 @@ class mxEdgeHandler {
isVirtualBendsEnabled(evt) {
return (
this.virtualBendsEnabled &&
(this.state.style[mxConstants.STYLE_EDGE] == null ||
this.state.style[mxConstants.STYLE_EDGE] === mxConstants.NONE ||
this.state.style[mxConstants.STYLE_NOEDGESTYLE] === 1) &&
mxUtils.getValue(this.state.style, mxConstants.STYLE_SHAPE, null) !=
'arrow'
(this.state.style[STYLE_EDGE] == null ||
this.state.style[STYLE_EDGE] === NONE ||
this.state.style[STYLE_NOEDGESTYLE] === 1) &&
mxUtils.getValue(this.state.style, STYLE_SHAPE, null) != 'arrow'
);
}
@ -533,7 +566,7 @@ class mxEdgeHandler {
*/
// getSelectionColor(): string;
getSelectionColor() {
return mxConstants.EDGE_SELECTION_COLOR;
return EDGE_SELECTION_COLOR;
}
/**
@ -543,7 +576,7 @@ class mxEdgeHandler {
*/
// getSelectionStrokeWidth(): number;
getSelectionStrokeWidth() {
return mxConstants.EDGE_SELECTION_STROKEWIDTH;
return EDGE_SELECTION_STROKEWIDTH;
}
/**
@ -553,7 +586,7 @@ class mxEdgeHandler {
*/
// isSelectionDashed(): boolean;
isSelectionDashed() {
return mxConstants.EDGE_SELECTION_DASHED;
return EDGE_SELECTION_DASHED;
}
/**
@ -589,7 +622,7 @@ class mxEdgeHandler {
class MyMarker extends mxCellMarker {
// Only returns edges if they are connectable and never returns
// the edge that is currently being modified
getCell = me => {
getCell = (me) => {
let cell = super.getCell(me);
// Checks for cell at preview point (with grid)
@ -604,10 +637,7 @@ class mxEdgeHandler {
if (cell != null && !cell.isConnectable()) {
const parent = cell.getParent();
if (
parent.isVertex() &&
parent.isConnectable()
) {
if (parent.isVertex() && parent.isConnectable()) {
cell = parent;
}
}
@ -624,9 +654,7 @@ class mxEdgeHandler {
)) ||
!self.isConnectableCell(cell) ||
cell === self.state.cell ||
(cell != null &&
!self.graph.connectableEdges &&
cell.isEdge()) ||
(cell != null && !self.graph.connectableEdges && cell.isEdge()) ||
model.isAncestor(self.state.cell, cell)
) {
cell = null;
@ -639,13 +667,11 @@ class mxEdgeHandler {
};
// Sets the highlight color according to validateConnection
isValidState = state => {
isValidState = (state) => {
const model = self.graph.getModel();
const other = self.graph.view.getTerminalPort(
state,
self.graph.view.getState(
self.state.cell.getTerminal(!self.isSource)
),
self.graph.view.getState(self.state.cell.getTerminal(!self.isSource)),
!self.isSource
);
const otherCell = other != null ? other.cell : null;
@ -697,7 +723,7 @@ class mxEdgeHandler {
const terminal = source || target;
if (terminal || this.graph.isCellBendable(cell)) {
(index => {
((index) => {
const bend = this.createHandleShape(index);
this.initBend(bend, () => {
if (this.dblClickRemoveEnabled) {
@ -707,9 +733,7 @@ class mxEdgeHandler {
if (this.isHandleEnabled(i)) {
bend.setCursor(
terminal
? mxConstants.CURSOR_TERMINAL_HANDLE
: mxConstants.CURSOR_BEND_HANDLE
terminal ? CURSOR_TERMINAL_HANDLE : CURSOR_BEND_HANDLE
);
}
@ -741,9 +765,9 @@ class mxEdgeHandler {
if (this.graph.isCellBendable(cell)) {
for (let i = 1; i < this.abspoints.length; i += 1) {
mxUtils.bind(this, bend => {
((bend) => {
this.initBend(bend);
bend.setCursor(mxConstants.CURSOR_VIRTUAL_BEND_HANDLE);
bend.setCursor(CURSOR_VIRTUAL_BEND_HANDLE);
bends.push(bend);
})(this.createHandleShape());
}
@ -806,7 +830,7 @@ class mxEdgeHandler {
return shape;
}
let s = mxConstants.HANDLE_SIZE;
let s = HANDLE_SIZE;
if (this.preferHtml) {
s -= 1;
@ -814,8 +838,8 @@ class mxEdgeHandler {
return new mxRectangleShape(
new mxRectangle(0, 0, s, s),
mxConstants.HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR
);
}
@ -842,11 +866,11 @@ class mxEdgeHandler {
return shape;
}
const s = mxConstants.LABEL_HANDLE_SIZE;
const s = LABEL_HANDLE_SIZE;
return new mxRectangleShape(
new mxRectangle(0, 0, s, s),
mxConstants.LABEL_HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
LABEL_HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR
);
}
@ -862,13 +886,11 @@ class mxEdgeHandler {
// initBend(bend: mxShape, dblClick: (evt: Event) => void): boolean;
initBend(bend, dblClick) {
if (this.preferHtml) {
bend.dialect = mxConstants.DIALECT_STRICTHTML;
bend.dialect = DIALECT_STRICTHTML;
bend.init(this.graph.container);
} else {
bend.dialect =
this.graph.dialect !== mxConstants.DIALECT_SVG
? mxConstants.DIALECT_MIXEDHTML
: mxConstants.DIALECT_SVG;
this.graph.dialect !== DIALECT_SVG ? DIALECT_MIXEDHTML : DIALECT_SVG;
bend.init(this.graph.getView().getOverlayPane());
}
@ -1157,7 +1179,7 @@ class mxEdgeHandler {
let overrideY = false;
if (tt > 0 && this.isSnapToTerminalsEvent(me)) {
const snapToPoint = pt => {
const snapToPoint = (pt) => {
if (pt != null) {
const { x } = pt;
if (Math.abs(point.x - x) < tt) {
@ -1174,7 +1196,7 @@ class mxEdgeHandler {
};
// Temporary function
const snapToTerminal = terminal => {
const snapToTerminal = (terminal) => {
if (terminal != null) {
snapToPoint(
new mxPoint(
@ -1251,9 +1273,7 @@ class mxEdgeHandler {
const model = this.graph.getModel();
const other = this.graph.view.getTerminalPort(
this.state,
this.graph.view.getState(
this.state.cell.getTerminal(!this.isSource)
),
this.graph.view.getState(this.state.cell.getTerminal(!this.isSource)),
!this.isSource
);
const otherCell = other != null ? other.cell : null;
@ -1516,19 +1536,18 @@ class mxEdgeHandler {
this.constraintHandler.currentFocus != null
) {
this.marker.highlight.shape.stroke = outline
? mxConstants.OUTLINE_HIGHLIGHT_COLOR
? OUTLINE_HIGHLIGHT_COLOR
: 'transparent';
this.marker.highlight.shape.strokewidth =
mxConstants.OUTLINE_HIGHLIGHT_STROKEWIDTH / s / s;
OUTLINE_HIGHLIGHT_STROKEWIDTH / s / s;
this.marker.highlight.repaint();
} else if (this.marker.hasValidState()) {
this.marker.highlight.shape.stroke =
me.getCell().isConnectable() &&
this.marker.getValidState() !== me.getState()
? 'transparent'
: mxConstants.DEFAULT_VALID_COLOR;
this.marker.highlight.shape.strokewidth =
mxConstants.HIGHLIGHT_STROKEWIDTH / s / s;
: DEFAULT_VALID_COLOR;
this.marker.highlight.shape.strokewidth = HIGHLIGHT_STROKEWIDTH / s / s;
this.marker.highlight.repaint();
}
}
@ -1541,19 +1560,13 @@ class mxEdgeHandler {
if (this.isSource || this.isTarget) {
if (constraint != null && constraint.point != null) {
edge.style[
this.isSource ? mxConstants.STYLE_EXIT_X : mxConstants.STYLE_ENTRY_X
] = constraint.point.x;
edge.style[
this.isSource ? mxConstants.STYLE_EXIT_Y : mxConstants.STYLE_ENTRY_Y
] = constraint.point.y;
edge.style[this.isSource ? STYLE_EXIT_X : STYLE_ENTRY_X] =
constraint.point.x;
edge.style[this.isSource ? STYLE_EXIT_Y : STYLE_ENTRY_Y] =
constraint.point.y;
} else {
delete edge.style[
this.isSource ? mxConstants.STYLE_EXIT_X : mxConstants.STYLE_ENTRY_X
];
delete edge.style[
this.isSource ? mxConstants.STYLE_EXIT_Y : mxConstants.STYLE_ENTRY_Y
];
delete edge.style[this.isSource ? STYLE_EXIT_X : STYLE_ENTRY_X];
delete edge.style[this.isSource ? STYLE_EXIT_Y : STYLE_ENTRY_Y];
}
}
@ -1820,9 +1833,7 @@ class mxEdgeHandler {
pt.y / this.graph.view.scale - this.graph.view.translate.y
);
const pstate = this.graph
.getView()
.getState(edge.getParent());
const pstate = this.graph.getView().getState(edge.getParent());
if (pstate != null) {
pt.x -= pstate.origin.x;
@ -1903,7 +1914,7 @@ class mxEdgeHandler {
}
}
this.setPreviewColor(mxConstants.EDGE_SELECTION_COLOR);
this.setPreviewColor(EDGE_SELECTION_COLOR);
this.removeHint();
this.redraw();
}
@ -1945,9 +1956,7 @@ class mxEdgeHandler {
point.x = Math.round(point.x / scale - tr.x);
point.y = Math.round(point.y / scale - tr.y);
const pstate = this.graph
.getView()
.getState(this.state.cell.getParent());
const pstate = this.graph.getView().getState(this.state.cell.getParent());
if (pstate != null) {
point.x -= pstate.origin.x;
@ -2213,19 +2222,19 @@ class mxEdgeHandler {
const isSource = index === 0;
const { cell } = this.state;
const terminal = cell.getTerminal(isSource);
let color = mxConstants.HANDLE_FILLCOLOR;
let color = HANDLE_FILLCOLOR;
if (
(terminal != null &&
!this.graph.isCellDisconnectable(cell, terminal, isSource)) ||
(terminal == null && !this.graph.isTerminalPointMovable(cell, isSource))
) {
color = mxConstants.LOCKED_HANDLE_FILLCOLOR;
color = LOCKED_HANDLE_FILLCOLOR;
} else if (
terminal != null &&
this.graph.isCellDisconnectable(cell, terminal, isSource)
) {
color = mxConstants.CONNECT_HANDLE_FILLCOLOR;
color = CONNECT_HANDLE_FILLCOLOR;
}
return color;
@ -2465,8 +2474,8 @@ class mxEdgeHandler {
this.labelShape.visible &&
mxUtils.intersects(this.bends[i].bounds, this.labelShape.bounds)
) {
const w = mxConstants.HANDLE_SIZE + 3;
const h = mxConstants.HANDLE_SIZE + 3;
const w = HANDLE_SIZE + 3;
const h = HANDLE_SIZE + 3;
this.bends[i].bounds = new mxRectangle(
Math.round(x - w / 2),
Math.round(y - h / 2),

6
packages/core/src/handler/mxEdgeSegmentHandler.js
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import mxPoint from '../util/datatypes/mxPoint';
import mxConstants from '../util/mxConstants';
import { CURSOR_TERMINAL_HANDLE } from '../util/mxConstants';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxUtils from '../util/mxUtils';
import mxElbowEdgeHandler from './mxElbowEdgeHandler';
@ -303,7 +303,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
// Source
let bend = this.createHandleShape(0);
this.initBend(bend);
bend.setCursor(mxConstants.CURSOR_TERMINAL_HANDLE);
bend.setCursor(CURSOR_TERMINAL_HANDLE);
bends.push(bend);
const pts = this.getCurrentPoints();
@ -332,7 +332,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
// Target
bend = this.createHandleShape(pts.length);
this.initBend(bend);
bend.setCursor(mxConstants.CURSOR_TERMINAL_HANDLE);
bend.setCursor(CURSOR_TERMINAL_HANDLE);
bends.push(bend);
return bends;

35
packages/core/src/handler/mxElbowEdgeHandler.js
View File

@ -5,7 +5,15 @@
* Type definitions from the typed-mxgraph project
*/
import mxEdgeHandler from './mxEdgeHandler';
import mxConstants from '../util/mxConstants';
import {
CURSOR_TERMINAL_HANDLE,
EDGESTYLE_ELBOW,
EDGESTYLE_TOPTOBOTTOM,
ELBOW_VERTICAL,
HANDLE_SIZE,
STYLE_EDGE,
STYLE_ELBOW,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxPoint from '../util/datatypes/mxPoint';
import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle';
@ -66,12 +74,12 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
// Source
let bend = this.createHandleShape(0);
this.initBend(bend);
bend.setCursor(mxConstants.CURSOR_TERMINAL_HANDLE);
bend.setCursor(CURSOR_TERMINAL_HANDLE);
bends.push(bend);
// Virtual
bends.push(
this.createVirtualBend(evt => {
this.createVirtualBend((evt) => {
if (!isConsumed(evt) && this.flipEnabled) {
this.graph.flipEdge(this.state.cell, evt);
mxEvent.consume(evt);
@ -84,7 +92,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
// Target
bend = this.createHandleShape(2);
this.initBend(bend);
bend.setCursor(mxConstants.CURSOR_TERMINAL_HANDLE);
bend.setCursor(CURSOR_TERMINAL_HANDLE);
bends.push(bend);
return bends;
@ -117,16 +125,11 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
*/
// getCursorForBend(): string;
getCursorForBend() {
return this.state.style[mxConstants.STYLE_EDGE] ===
mxEdgeStyle.TopToBottom ||
this.state.style[mxConstants.STYLE_EDGE] ===
mxConstants.EDGESTYLE_TOPTOBOTTOM ||
((this.state.style[mxConstants.STYLE_EDGE] ===
mxEdgeStyle.ElbowConnector ||
this.state.style[mxConstants.STYLE_EDGE] ===
mxConstants.EDGESTYLE_ELBOW) &&
this.state.style[mxConstants.STYLE_ELBOW] ===
mxConstants.ELBOW_VERTICAL)
return this.state.style[STYLE_EDGE] === mxEdgeStyle.TopToBottom ||
this.state.style[STYLE_EDGE] === EDGESTYLE_TOPTOBOTTOM ||
((this.state.style[STYLE_EDGE] === mxEdgeStyle.ElbowConnector ||
this.state.style[STYLE_EDGE] === EDGESTYLE_ELBOW) &&
this.state.style[STYLE_ELBOW] === ELBOW_VERTICAL)
? 'row-resize'
: 'col-resize';
}
@ -234,8 +237,8 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
this.labelShape.visible &&
mxUtils.intersects(bounds, this.labelShape.bounds)
) {
w = mxConstants.HANDLE_SIZE + 3;
h = mxConstants.HANDLE_SIZE + 3;
w = HANDLE_SIZE + 3;
h = HANDLE_SIZE + 3;
bounds = new mxRectangle(
Math.floor(pt.x - w / 2),
Math.floor(pt.y - h / 2),

90
packages/core/src/handler/mxGraphHandler.js
View File

@ -11,11 +11,25 @@ import mxUtils from '../util/mxUtils';
import mxRectangleShape from '../shape/node/mxRectangleShape';
import mxGuide from '../util/mxGuide';
import mxPoint from '../util/datatypes/mxPoint';
import mxConstants from '../util/mxConstants';
import {
CURSOR_MOVABLE_EDGE,
CURSOR_MOVABLE_VERTEX,
DIALECT_STRICTHTML,
DIALECT_SVG,
DROP_TARGET_COLOR,
INVALID_CONNECT_TARGET_COLOR,
STYLE_ROTATION,
VALID_COLOR,
} from '../util/mxConstants';
import mxDictionary from '../util/datatypes/mxDictionary';
import mxCellHighlight from './mxCellHighlight';
import mxRectangle from '../util/datatypes/mxRectangle';
import { getClientX, getClientY, isAltDown, isMultiTouchEvent } from '../util/mxEventUtils';
import {
getClientX,
getClientY,
isAltDown,
isMultiTouchEvent,
} from '../util/mxEventUtils';
/**
* Class: mxGraphHandler
@ -53,9 +67,9 @@ class mxGraphHandler {
this.graph.addListener(mxEvent.PAN, this.panHandler);
// Handles escape keystrokes
this.escapeHandler = mxUtils.bind(this, (sender, evt) => {
this.escapeHandler = (sender, evt) => {
this.reset();
});
};
this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
@ -67,8 +81,7 @@ class mxGraphHandler {
}
// Waits for the states and handlers to be updated
this.refreshThread = window.setTimeout(
mxUtils.bind(this, () => {
this.refreshThread = window.setTimeout(() => {
this.refreshThread = null;
if (this.first != null && !this.suspended) {
@ -101,15 +114,13 @@ class mxGraphHandler {
}
}
}
}),
0
);
}, 0);
};
this.graph.getModel().addListener(mxEvent.CHANGE, this.refreshHandler);
this.graph.addListener(mxEvent.REFRESH, this.refreshHandler);
this.keyHandler = e => {
this.keyHandler = (e) => {
if (
this.graph.container != null &&
this.graph.container.style.visibility !== 'hidden' &&
@ -461,9 +472,7 @@ class mxGraphHandler {
const parent = cell.getParent();
if (immediate) {
const geo = cell.isEdge()
? null
: cell.getGeometry();
const geo = cell.isEdge() ? null : cell.getGeometry();
return (
!this.graph.isSiblingSelected(cell) &&
@ -491,8 +500,7 @@ class mxGraphHandler {
let state = me.getState();
if (
(!this.graph.isToggleEvent(me.getEvent()) ||
!isAltDown(me.getEvent())) &&
(!this.graph.isToggleEvent(me.getEvent()) || !isAltDown(me.getEvent())) &&
state != null &&
!this.graph.isCellSelected(state.cell)
) {
@ -506,9 +514,7 @@ class mxGraphHandler {
this.isPropagateSelectionCell(state.cell, true, me)
) {
state = next;
next = this.graph.view.getState(
state.cell.getParent()
);
next = this.graph.view.getState(state.cell.getParent());
}
}
@ -522,10 +528,7 @@ class mxGraphHandler {
*/
// isDelayedSelection(cell: mxCell, me: mxMouseEvent): boolean;
isDelayedSelection(cell, me) {
if (
!this.graph.isToggleEvent(me.getEvent()) ||
!isAltDown(me.getEvent())
) {
if (!this.graph.isToggleEvent(me.getEvent()) || !isAltDown(me.getEvent())) {
while (cell != null) {
if (this.graph.selectionCellsHandler.isHandled(cell)) {
return this.graph.cellEditor.getEditingCell() != cell;
@ -535,10 +538,7 @@ class mxGraphHandler {
}
}
return (
this.graph.isToggleEvent(me.getEvent()) &&
!isAltDown(me.getEvent())
);
return this.graph.isToggleEvent(me.getEvent()) && !isAltDown(me.getEvent());
}
/**
@ -679,14 +679,14 @@ class mxGraphHandler {
const parent = this.graph.getDefaultParent();
const model = this.graph.getModel();
const filter = mxUtils.bind(this, cell => {
const filter = (cell) => {
return (
this.graph.view.getState(cell) != null &&
cell.isVertex() &&
cell.getGeometry() != null &&
!cell.getGeometry().relative
);
});
};
return this.graph.view.getCellStates(
model.filterDescendants(filter, parent)
@ -812,13 +812,13 @@ class mxGraphHandler {
shape.isDashed = true;
if (this.htmlPreview) {
shape.dialect = mxConstants.DIALECT_STRICTHTML;
shape.dialect = DIALECT_STRICTHTML;
shape.init(this.graph.container);
} else {
// Makes sure to use either VML or SVG shapes in order to implement
// event-transparency on the background area of the rectangle since
// HTML shapes do not let mouseevents through even when transparent
shape.dialect = mxConstants.DIALECT_SVG;
shape.dialect = DIALECT_SVG;
shape.init(this.graph.getView().getOverlayPane());
shape.pointerEvents = false;
@ -877,7 +877,7 @@ class mxGraphHandler {
}
}
this.guide.isStateIgnored = state => {
this.guide.isStateIgnored = (state) => {
const p = state.cell.getParent();
return (
@ -886,8 +886,7 @@ class mxGraphHandler {
(state.cell !== (this.target || parent) &&
!ignore &&
!connected.get(state) &&
(this.target == null ||
this.target.getChildCount() >= 2) &&
(this.target == null || this.target.getChildCount() >= 2) &&
p !== (this.target || parent)))
);
};
@ -1071,7 +1070,7 @@ class mxGraphHandler {
if (this.highlight == null) {
this.highlight = new mxCellHighlight(
this.graph,
mxConstants.DROP_TARGET_COLOR,
DROP_TARGET_COLOR,
3
);
}
@ -1097,7 +1096,7 @@ class mxGraphHandler {
if (state != null && (clone || this.isValidDropTarget(target, me))) {
if (this.target !== target) {
this.target = target;
this.setHighlightColor(mxConstants.DROP_TARGET_COLOR);
this.setHighlightColor(DROP_TARGET_COLOR);
}
highlight = true;
@ -1116,9 +1115,7 @@ class mxGraphHandler {
if (state != null) {
const error = graph.getEdgeValidationError(null, this.cell, cell);
const color =
error == null
? mxConstants.VALID_COLOR
: mxConstants.INVALID_CONNECT_TARGET_COLOR;
error == null ? VALID_COLOR : INVALID_CONNECT_TARGET_COLOR;
this.setHighlightColor(color);
highlight = true;
}
@ -1188,9 +1185,9 @@ class mxGraphHandler {
graph.isCellMovable(me.getCell())
) {
if (me.getCell().isEdge()) {
cursor = mxConstants.CURSOR_MOVABLE_EDGE;
cursor = CURSOR_MOVABLE_EDGE;
} else {
cursor = mxConstants.CURSOR_MOVABLE_VERTEX;
cursor = CURSOR_MOVABLE_VERTEX;
}
}
@ -1249,8 +1246,7 @@ class mxGraphHandler {
const states = [];
if (this.allCells != null) {
this.allCells.visit(
mxUtils.bind(this, (key, state) => {
this.allCells.visit((key, state) => {
const realState = this.graph.view.getState(state.cell);
// Checks if cell was removed or replaced
@ -1324,8 +1320,7 @@ class mxGraphHandler {
}
}
}
})
);
});
}
// Resets the handler if everything was removed
@ -1606,7 +1601,7 @@ class mxGraphHandler {
cell.isConnectable() &&
graph.isEdgeValid(null, this.cell, cell)
) {
alert("CONNECT")
alert('CONNECT');
graph.connectionHandler.connect(this.cell, cell, me.getEvent());
} else {
const clone =
@ -1714,7 +1709,7 @@ class mxGraphHandler {
getClientY(evt)
);
const alpha = mxUtils.toRadians(
mxUtils.getValue(pState.style, mxConstants.STYLE_ROTATION) || 0
mxUtils.getValue(pState.style, STYLE_ROTATION) || 0
);
if (alpha !== 0) {
@ -1820,8 +1815,7 @@ class mxGraphHandler {
return (
state != null &&
(state.cell.isEdge() ||
state.cell.isVertex()) &&
(state.cell.isEdge() || state.cell.isVertex()) &&
this.graph.isCellDeletable(state.cell) &&
state.cell.getChildCount() === 0 &&
this.graph.isTransparentState(state)

27
packages/core/src/handler/mxHandle.js
View File

@ -10,7 +10,13 @@ import mxPoint from '../util/datatypes/mxPoint';
import mxImageShape from '../shape/node/mxImageShape';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxRectangleShape from '../shape/node/mxRectangleShape';
import mxConstants from '../util/mxConstants';
import {
DIALECT_STRICTHTML,
DIALECT_SVG,
HANDLE_FILLCOLOR,
HANDLE_SIZE,
HANDLE_STROKECOLOR,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
/**
@ -173,18 +179,9 @@ class mxHandle {
*/
// createShape(html: any): mxShape;
createShape(html) {
const bounds = new mxRectangle(
0,
0,
mxConstants.HANDLE_SIZE,
mxConstants.HANDLE_SIZE
);
const bounds = new mxRectangle(0, 0, HANDLE_SIZE, HANDLE_SIZE);
return new mxRectangleShape(
bounds,
mxConstants.HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
);
return new mxRectangleShape(bounds, HANDLE_FILLCOLOR, HANDLE_STROKECOLOR);
}
/**
@ -193,13 +190,11 @@ class mxHandle {
// initShape(html: any): void;
initShape(html) {
if (html && this.shape.isHtmlAllowed()) {
this.shape.dialect = mxConstants.DIALECT_STRICTHTML;
this.shape.dialect = DIALECT_STRICTHTML;
this.shape.init(this.graph.container);
} else {
this.shape.dialect =
this.graph.dialect !== mxConstants.DIALECT_SVG
? mxConstants.DIALECT_MIXEDHTML
: mxConstants.DIALECT_SVG;
this.graph.dialect !== DIALECT_SVG ? DIALECT_MIXEDHTML : DIALECT_SVG;
if (this.cursor != null) {
this.shape.init(this.graph.getView().getOverlayPane());

1
packages/core/src/handler/mxKeyHandler.js
View File

@ -8,7 +8,6 @@
import mxEvent from '../util/event/mxEvent';
import { isAncestorNode } from '../util/mxDomUtils';
import { getSource, isAltDown, isConsumed, isControlDown as _isControlDown, isShiftDown } from '../util/mxEventUtils';
import mxUtils from '../util/mxUtils';
/**
* Class: mxKeyHandler

4
packages/core/src/handler/mxPanningHandler.js
View File

@ -66,7 +66,7 @@ class mxPanningHandler extends mxEventSource {
);
// Handles pinch gestures
this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
this.gestureHandler = (sender, eo) => {
if (this.isPinchEnabled()) {
const evt = eo.getProperty('event');
@ -86,7 +86,7 @@ class mxPanningHandler extends mxEventSource {
this.zoomGraph(evt);
}
}
});
};
this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);

4
packages/core/src/handler/mxPopupMenuHandler.js
View File

@ -110,9 +110,9 @@ class mxPopupMenuHandler extends mxPopupMenu {
// the context menu
mxEvent.addGestureListeners(
this.div,
mxUtils.bind(this, evt => {
evt => {
this.graph.tooltipHandler.hide();
})
}
);
}

8
packages/core/src/handler/mxRubberband.js
View File

@ -44,9 +44,9 @@ class mxRubberband {
);
// Repaints the marquee after autoscroll
this.panHandler = mxUtils.bind(this, () => {
this.panHandler = () => {
this.repaint();
});
};
this.graph.addListener(mxEvent.PAN, this.panHandler);
@ -185,9 +185,9 @@ class mxRubberband {
return me;
}
this.dragHandler = mxUtils.bind(this, evt => {
this.dragHandler = evt => {
this.mouseMove(this.graph, createMouseEvent(evt));
});
};
this.dropHandler = evt => {
this.mouseUp(this.graph, createMouseEvent(evt));

4
packages/core/src/handler/mxSelectionCellsHandler.js
View File

@ -201,12 +201,12 @@ class mxSelectionCellsHandler extends mxEventSource {
// Destroys unused handlers
oldHandlers.visit(
mxUtils.bind(this, (key, handler) => {
(key, handler) => {
this.fireEvent(
new mxEventObject(mxEvent.REMOVE, 'state', handler.state)
);
handler.destroy();
})
}
);
// Creates new handlers and updates parent highlight on existing handlers

8
packages/core/src/handler/mxTooltipHandler.js
View File

@ -6,7 +6,7 @@
*/
import mxEvent from '../util/event/mxEvent';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
import { TOOLTIP_VERTICAL_OFFSET } from '../util/mxConstants';
import { getSource, isMouseEvent } from '../util/mxEventUtils';
import { isNode } from '../util/mxDomUtils';
@ -156,7 +156,7 @@ class mxTooltipHandler {
document.body.appendChild(this.div);
mxEvent.addGestureListeners(this.div, evt => {
mxEvent.addGestureListeners(this.div, (evt) => {
const source = getSource(evt);
if (source.nodeName !== 'A') {
@ -326,9 +326,7 @@ class mxTooltipHandler {
this.div.style.zIndex = this.zIndex;
this.div.style.left = `${x + origin.x}px`;
this.div.style.top = `${y +
mxConstants.TOOLTIP_VERTICAL_OFFSET +
origin.y}px`;
this.div.style.top = `${y + TOOLTIP_VERTICAL_OFFSET + origin.y}px`;
if (!isNode(tip)) {
this.div.innerHTML = tip.replace(/\n/g, '<br>');

112
packages/core/src/handler/mxVertexHandler.js
View File

@ -5,7 +5,23 @@
* Type definitions from the typed-mxgraph project
*/
import mxRectangle from '../util/datatypes/mxRectangle';
import mxConstants from '../util/mxConstants';
import {
CURSOR_LABEL_HANDLE,
CURSOR_MOVABLE_VERTEX,
DIALECT_MIXEDHTML,
DIALECT_STRICTHTML,
DIALECT_SVG,
HANDLE_FILLCOLOR,
HANDLE_SIZE,
HANDLE_STROKECOLOR,
LABEL_HANDLE_FILLCOLOR,
LABEL_HANDLE_SIZE,
STYLE_ASPECT,
STYLE_ROTATION,
VERTEX_SELECTION_COLOR,
VERTEX_SELECTION_DASHED,
VERTEX_SELECTION_STROKEWIDTH,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxRectangleShape from '../shape/node/mxRectangleShape';
import mxImageShape from '../shape/node/mxImageShape';
@ -231,10 +247,10 @@ class mxVertexHandler {
);
this.selectionBorder = this.createSelectionShape(this.bounds);
// VML dialect required here for event transparency in IE
this.selectionBorder.dialect = mxConstants.DIALECT_SVG;
this.selectionBorder.dialect = DIALECT_SVG;
this.selectionBorder.pointerEvents = false;
this.selectionBorder.rotation = Number(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
this.state.style[STYLE_ROTATION] || '0'
);
this.selectionBorder.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents(
@ -244,7 +260,7 @@ class mxVertexHandler {
);
if (this.graph.isCellMovable(this.state.cell)) {
this.selectionBorder.setCursor(mxConstants.CURSOR_MOVABLE_VERTEX);
this.selectionBorder.setCursor(CURSOR_MOVABLE_VERTEX);
}
// Adds the sizer handles
@ -287,10 +303,10 @@ class mxVertexHandler {
) {
// Marks this as the label handle for getHandleForEvent
this.labelShape = this.createSizer(
mxConstants.CURSOR_LABEL_HANDLE,
CURSOR_LABEL_HANDLE,
mxEvent.LABEL_HANDLE,
mxConstants.LABEL_HANDLE_SIZE,
mxConstants.LABEL_HANDLE_FILLCOLOR
LABEL_HANDLE_SIZE,
LABEL_HANDLE_FILLCOLOR
);
this.sizers.push(this.labelShape);
}
@ -301,10 +317,10 @@ class mxVertexHandler {
this.state.height < 2
) {
this.labelShape = this.createSizer(
mxConstants.CURSOR_MOVABLE_VERTEX,
CURSOR_MOVABLE_VERTEX,
mxEvent.LABEL_HANDLE,
null,
mxConstants.LABEL_HANDLE_FILLCOLOR
LABEL_HANDLE_FILLCOLOR
);
this.sizers.push(this.labelShape);
}
@ -315,8 +331,8 @@ class mxVertexHandler {
this.rotationShape = this.createSizer(
this.rotationCursor,
mxEvent.ROTATION_HANDLE,
mxConstants.HANDLE_SIZE + 3,
mxConstants.HANDLE_FILLCOLOR
HANDLE_SIZE + 3,
HANDLE_FILLCOLOR
);
this.sizers.push(this.rotationShape);
}
@ -353,8 +369,7 @@ class mxVertexHandler {
// isConstrainedEvent(me: mxMouseEvent): boolean;
isConstrainedEvent(me) {
return (
isShiftDown(me.getEvent()) ||
this.state.style[mxConstants.STYLE_ASPECT] === 'fixed'
isShiftDown(me.getEvent()) || this.state.style[STYLE_ASPECT] === 'fixed'
);
}
@ -457,7 +472,7 @@ class mxVertexHandler {
*/
// getSelectionColor(): string;
getSelectionColor() {
return mxConstants.VERTEX_SELECTION_COLOR;
return VERTEX_SELECTION_COLOR;
}
/**
@ -467,7 +482,7 @@ class mxVertexHandler {
*/
// getSelectionStrokeWidth(): number;
getSelectionStrokeWidth() {
return mxConstants.VERTEX_SELECTION_STROKEWIDTH;
return VERTEX_SELECTION_STROKEWIDTH;
}
/**
@ -477,7 +492,7 @@ class mxVertexHandler {
*/
// isSelectionDashed(): boolean;
isSelectionDashed() {
return mxConstants.VERTEX_SELECTION_DASHED;
return VERTEX_SELECTION_DASHED;
}
/**
@ -488,7 +503,7 @@ class mxVertexHandler {
*/
// createSizer(cursor: string, index: number, size: number, fillColor: string): mxRectangleShape;
createSizer(cursor, index, size, fillColor) {
size = size || mxConstants.HANDLE_SIZE;
size = size || HANDLE_SIZE;
const bounds = new mxRectangle(0, 0, size, size);
const sizer = this.createSizerShape(bounds, index, fillColor);
@ -500,13 +515,11 @@ class mxVertexHandler {
) {
sizer.bounds.height -= 1;
sizer.bounds.width -= 1;
sizer.dialect = mxConstants.DIALECT_STRICTHTML;
sizer.dialect = DIALECT_STRICTHTML;
sizer.init(this.graph.container);
} else {
sizer.dialect =
this.graph.dialect !== mxConstants.DIALECT_SVG
? mxConstants.DIALECT_MIXEDHTML
: mxConstants.DIALECT_SVG;
this.graph.dialect !== DIALECT_SVG ? DIALECT_MIXEDHTML : DIALECT_SVG;
sizer.init(this.graph.getView().getOverlayPane());
}
@ -560,14 +573,14 @@ class mxVertexHandler {
if (index === mxEvent.ROTATION_HANDLE) {
return new mxEllipse(
bounds,
fillColor || mxConstants.HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
fillColor || HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR
);
}
return new mxRectangleShape(
bounds,
fillColor || mxConstants.HANDLE_FILLCOLOR,
mxConstants.HANDLE_STROKECOLOR
fillColor || HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR
);
}
@ -610,7 +623,7 @@ class mxVertexHandler {
)
: null;
const checkShape = shape => {
const checkShape = (shape) => {
const st =
shape != null &&
shape.constructor !== mxImageShape &&
@ -719,8 +732,7 @@ class mxVertexHandler {
start(x, y, index) {
if (this.selectionBorder != null) {
this.livePreviewActive =
this.livePreview &&
this.state.cell.getChildCount() === 0;
this.livePreview && this.state.cell.getChildCount() === 0;
this.inTolerance = true;
this.childOffsetX = 0;
this.childOffsetY = 0;
@ -753,15 +765,15 @@ class mxVertexHandler {
if (
!(
mxClient.IS_SVG &&
Number(this.state.style[mxConstants.STYLE_ROTATION] || '0') !== 0
Number(this.state.style[STYLE_ROTATION] || '0') !== 0
) &&
this.state.text != null &&
this.state.text.node.parentNode === this.graph.container
) {
this.preview.dialect = mxConstants.DIALECT_STRICTHTML;
this.preview.dialect = DIALECT_STRICTHTML;
this.preview.init(this.graph.container);
} else {
this.preview.dialect = mxConstants.DIALECT_SVG;
this.preview.dialect = DIALECT_SVG;
this.preview.init(this.graph.view.getOverlayPane());
}
}
@ -1070,9 +1082,7 @@ class mxVertexHandler {
// resizeVertex(me: mxMouseEvent): void;
resizeVertex(me) {
const ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY());
const alpha = mxUtils.toRadians(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
);
const alpha = mxUtils.toRadians(this.state.style[STYLE_ROTATION] || '0');
const point = new mxPoint(me.getGraphX(), me.getGraphY());
const tr = this.graph.view.translate;
const { scale } = this.graph.view;
@ -1222,10 +1232,7 @@ class mxVertexHandler {
this.unscaledBounds.height = this.roundLength(this.unscaledBounds.height);
// Shifts the children according to parent offset
if (
!this.state.cell.isCollapsed() &&
(dx3 !== 0 || dy3 !== 0)
) {
if (!this.state.cell.isCollapsed() && (dx3 !== 0 || dy3 !== 0)) {
this.childOffsetX = this.state.x - this.bounds.x + dx5;
this.childOffsetY = this.state.y - this.bounds.y + dy5;
} else {
@ -1382,8 +1389,7 @@ class mxVertexHandler {
} else if (index === mxEvent.ROTATION_HANDLE) {
if (this.currentAlpha != null) {
const delta =
this.currentAlpha -
(this.state.style[mxConstants.STYLE_ROTATION] || 0);
this.currentAlpha - (this.state.style[STYLE_ROTATION] || 0);
if (delta !== 0) {
this.rotateCell(this.state.cell, delta);
@ -1394,7 +1400,7 @@ class mxVertexHandler {
} else {
const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent());
const alpha = mxUtils.toRadians(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
this.state.style[STYLE_ROTATION] || '0'
);
const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha);
@ -1469,8 +1475,8 @@ class mxVertexHandler {
if (cell.isVertex() || cell.isEdge()) {
if (!cell.isEdge()) {
const style = this.graph.getCurrentCellStyle(cell);
const total = (style[mxConstants.STYLE_ROTATION] || 0) + angle;
this.graph.setCellStyles(mxConstants.STYLE_ROTATION, total, [cell]);
const total = (style[STYLE_ROTATION] || 0) + angle;
this.graph.setCellStyles(STYLE_ROTATION, total, [cell]);
}
let geo = cell.getGeometry();
@ -1585,7 +1591,7 @@ class mxVertexHandler {
if (geo != null) {
if (index === mxEvent.LABEL_HANDLE) {
const alpha = -mxUtils.toRadians(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
this.state.style[STYLE_ROTATION] || '0'
);
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
@ -1996,7 +2002,7 @@ class mxVertexHandler {
];
const alpha = mxUtils.toRadians(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
this.state.style[STYLE_ROTATION] || '0'
);
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
@ -2069,7 +2075,7 @@ class mxVertexHandler {
const alpha = mxUtils.toRadians(
this.currentAlpha != null
? this.currentAlpha
: this.state.style[mxConstants.STYLE_ROTATION] || '0'
: this.state.style[STYLE_ROTATION] || '0'
);
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
@ -2095,7 +2101,7 @@ class mxVertexHandler {
if (this.selectionBorder != null) {
this.selectionBorder.rotation = Number(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
this.state.style[STYLE_ROTATION] || '0'
);
}
@ -2137,9 +2143,7 @@ class mxVertexHandler {
* always returns true.
*/
isParentHighlightVisible() {
return !this.graph.isCellSelected(
this.state.cell.getParent()
);
return !this.graph.isCellSelected(this.state.cell.getParent());
}
/**
@ -2187,10 +2191,10 @@ class mxVertexHandler {
) {
this.parentHighlight = this.createParentHighlightShape(pstate);
// VML dialect required here for event transparency in IE
this.parentHighlight.dialect = mxConstants.DIALECT_SVG;
this.parentHighlight.dialect = DIALECT_SVG;
this.parentHighlight.pointerEvents = false;
this.parentHighlight.rotation = Number(
pstate.style[mxConstants.STYLE_ROTATION] || '0'
pstate.style[STYLE_ROTATION] || '0'
);
this.parentHighlight.init(this.graph.getView().getOverlayPane());
this.parentHighlight.redraw();
@ -2220,9 +2224,7 @@ class mxVertexHandler {
);
}
this.preview.rotation = Number(
this.state.style[mxConstants.STYLE_ROTATION] || '0'
);
this.preview.rotation = Number(this.state.style[STYLE_ROTATION] || '0');
this.preview.redraw();
}

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

@ -104,7 +104,7 @@ import mxRhombus from './shape/node/mxRhombus';
import mxStencil from './shape/node/mxStencil';
import mxStencilRegistry from './shape/node/mxStencilRegistry';
import mxConstants from './util/mxConstants';
import * as mxConstants from './util/mxConstants';
import mxGuide from './util/mxGuide';
import mxResources from './util/mxResources';
import mxUtils from './util/mxUtils';
@ -345,5 +345,5 @@ export default {
mxStyleChange,
mxTerminalChange,
mxValueChange,
mxVisibleChange
mxVisibleChange,
};

15
packages/core/src/layout/hierarchical/model/mxGraphHierarchyModel.js
View File

@ -8,7 +8,6 @@
import mxDictionary from '../../../util/datatypes/mxDictionary';
import mxGraphHierarchyNode from './mxGraphHierarchyNode';
import mxGraphHierarchyEdge from './mxGraphHierarchyEdge';
import mxUtils from '../../../util/mxUtils';
/**
* Class: mxGraphHierarchyModel
@ -94,12 +93,7 @@ class mxGraphHierarchyModel {
internalTargetCell.connectsAsTarget = [];
}
if (
mxUtils.indexOf(
internalTargetCell.connectsAsTarget,
internalEdge
) < 0
) {
if (internalTargetCell.connectsAsTarget.indexOf(internalEdge) < 0) {
internalTargetCell.connectsAsTarget.push(internalEdge);
}
}
@ -259,12 +253,7 @@ class mxGraphHierarchyModel {
internalEdge.source = internalVertices[i];
if (
mxUtils.indexOf(
internalVertices[i].connectsAsSource,
internalEdge
) < 0
) {
if (internalVertices[i].connectsAsSource.indexOf(internalEdge) < 0) {
internalVertices[i].connectsAsSource.push(internalEdge);
}
}

14
packages/core/src/layout/hierarchical/model/mxSwimlaneModel.js
View File

@ -93,12 +93,7 @@ class mxSwimlaneModel {
internalTargetCell.connectsAsTarget = [];
}
if (
mxUtils.indexOf(
internalTargetCell.connectsAsTarget,
internalEdge
) < 0
) {
if (internalTargetCell.connectsAsTarget.indexOf(internalEdge) < 0) {
internalTargetCell.connectsAsTarget.push(internalEdge);
}
}
@ -274,12 +269,7 @@ class mxSwimlaneModel {
internalEdge.source = internalVertices[i];
if (
mxUtils.indexOf(
internalVertices[i].connectsAsSource,
internalEdge
) < 0
) {
if (internalVertices[i].connectsAsSource.indexOf(internalEdge) < 0) {
internalVertices[i].connectsAsSource.push(internalEdge);
}
}

18
packages/core/src/layout/hierarchical/mxHierarchicalLayout.js
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import mxGraphLayout from '../mxGraphLayout';
import mxConstants from '../../util/mxConstants';
import { DIRECTION_NORTH } from '../../util/mxConstants';
import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxGraphHierarchyModel from './model/mxGraphHierarchyModel';
@ -34,8 +34,7 @@ import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
class mxHierarchicalLayout extends mxGraphLayout {
constructor(graph, orientation, deterministic) {
super(graph);
this.orientation =
orientation != null ? orientation : mxConstants.DIRECTION_NORTH;
this.orientation = orientation != null ? orientation : DIRECTION_NORTH;
this.deterministic = deterministic != null ? deterministic : true;
}
@ -114,7 +113,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* The position of the root node(s) relative to the laid out graph in.
* Default is <mxConstants.DIRECTION_NORTH>.
*/
orientation = mxConstants.DIRECTION_NORTH;
orientation = DIRECTION_NORTH;
/**
* Variable: fineTuning
@ -574,18 +573,11 @@ class mxHierarchicalLayout extends mxGraphLayout {
filterDescendants(cell, result) {
const { model } = this.graph;
if (
cell.isVertex() &&
cell !== this.parent &&
cell.isVisible()
) {
if (cell.isVertex() && cell !== this.parent && cell.isVisible()) {
result[mxObjectIdentity.get(cell)] = cell;
}
if (
this.traverseAncestors ||
(cell === this.parent && cell.isVisible())
) {
if (this.traverseAncestors || (cell === this.parent && cell.isVisible())) {
const childCount = cell.getChildCount();
for (let i = 0; i < childCount; i += 1) {

12
packages/core/src/layout/hierarchical/mxSwimlaneLayout.js
View File

@ -6,7 +6,7 @@
*/
import mxGraphLayout from '../mxGraphLayout';
import mxConstants from '../../util/mxConstants';
import { DIRECTION_NORTH } from '../../util/mxConstants';
import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxRectangle from '../../util/datatypes/mxRectangle';
@ -36,8 +36,7 @@ import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
class mxSwimlaneLayout extends mxGraphLayout {
constructor(graph, orientation, deterministic) {
super(graph);
this.orientation =
orientation != null ? orientation : mxConstants.DIRECTION_NORTH;
this.orientation = orientation != null ? orientation : DIRECTION_NORTH;
this.deterministic = deterministic != null ? deterministic : true;
}
@ -130,7 +129,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* The position of the root node(s) relative to the laid out graph in.
* Default is <mxConstants.DIRECTION_NORTH>.
*/
orientation = mxConstants.DIRECTION_NORTH;
orientation = DIRECTION_NORTH;
/**
* Variable: fineTuning
@ -718,10 +717,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
result[mxObjectIdentity.get(cell)] = cell;
}
if (
this.traverseAncestors ||
(cell === this.parent && cell.isVisible())
) {
if (this.traverseAncestors || (cell === this.parent && cell.isVisible())) {
const childCount = cell.getChildCount();
for (let i = 0; i < childCount; i += 1) {

41
packages/core/src/layout/hierarchical/stage/mxCoordinateAssignment.js
View File

@ -5,7 +5,12 @@
* Type definitions from the typed-mxgraph project
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import mxConstants from '../../../util/mxConstants';
import {
DIRECTION_EAST,
DIRECTION_NORTH,
DIRECTION_SOUTH,
DIRECTION_WEST,
} from '../../../util/mxConstants';
import mxLog from '../../../util/gui/mxLog';
import WeightedCellSorter from '../../WeightedCellSorter';
import mxDictionary from '../../../util/datatypes/mxDictionary';
@ -133,7 +138,7 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
* The position of the root ( start ) node(s) relative to the rest of the
* laid out graph. Default is <mxConstants.DIRECTION_NORTH>.
*/
orientation = mxConstants.DIRECTION_NORTH;
orientation = DIRECTION_NORTH;
/**
* Variable: initialX
@ -791,8 +796,8 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
if (bounds != null) {
if (
this.orientation === mxConstants.DIRECTION_NORTH ||
this.orientation === mxConstants.DIRECTION_SOUTH
this.orientation === DIRECTION_NORTH ||
this.orientation === DIRECTION_SOUTH
) {
node.width = bounds.width;
node.height = bounds.height;
@ -871,8 +876,8 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
if (bounds != null) {
if (
this.orientation === mxConstants.DIRECTION_NORTH ||
this.orientation === mxConstants.DIRECTION_SOUTH
this.orientation === DIRECTION_NORTH ||
this.orientation === DIRECTION_SOUTH
) {
node.width = bounds.width;
node.height = bounds.height;
@ -926,8 +931,8 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
lastRankMaxCellHeight = maxCellHeight;
if (
this.orientation === mxConstants.DIRECTION_NORTH ||
this.orientation === mxConstants.DIRECTION_WEST
this.orientation === DIRECTION_NORTH ||
this.orientation === DIRECTION_WEST
) {
y += distanceToNextRank;
} else {
@ -1329,8 +1334,8 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
const source = cell.isReversed ? cell.target.cell : cell.source.cell;
const { graph } = this.layout;
const layoutReversed =
this.orientation === mxConstants.DIRECTION_EAST ||
this.orientation === mxConstants.DIRECTION_SOUTH;
this.orientation === DIRECTION_EAST ||
this.orientation === DIRECTION_SOUTH;
for (let i = 0; i < cell.edges.length; i += 1) {
const realEdge = cell.edges[i];
@ -1389,8 +1394,8 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
if (
this.orientation === mxConstants.DIRECTION_NORTH ||
this.orientation === mxConstants.DIRECTION_SOUTH
this.orientation === DIRECTION_NORTH ||
this.orientation === DIRECTION_SOUTH
) {
newPoints.push(new mxPoint(x, y));
@ -1446,8 +1451,8 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
if (
this.orientation === mxConstants.DIRECTION_NORTH ||
this.orientation === mxConstants.DIRECTION_SOUTH
this.orientation === DIRECTION_NORTH ||
this.orientation === DIRECTION_SOUTH
) {
newPoints.push(new mxPoint(positionX, topChannelY));
newPoints.push(new mxPoint(positionX, bottomChannelY));
@ -1497,8 +1502,8 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
}
if (
this.orientation === mxConstants.DIRECTION_NORTH ||
this.orientation === mxConstants.DIRECTION_SOUTH
this.orientation === DIRECTION_NORTH ||
this.orientation === DIRECTION_SOUTH
) {
if (this.layout.edgeStyle === mxHierarchicalEdgeStyle.CURVE) {
newPoints.push(new mxPoint(x, y - jetty));
@ -1561,8 +1566,8 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
);
if (
this.orientation === mxConstants.DIRECTION_NORTH ||
this.orientation === mxConstants.DIRECTION_SOUTH
this.orientation === DIRECTION_NORTH ||
this.orientation === DIRECTION_SOUTH
) {
this.layout.setVertexLocation(realCell, positionX, positionY);
} else {

15
packages/core/src/layout/mxGraphLayout.js
View File

@ -9,7 +9,7 @@ import mxDictionary from '../util/datatypes/mxDictionary';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxPoint from '../util/datatypes/mxPoint';
import mxConstants from '../util/mxConstants';
import { STYLE_NOEDGESTYLE, STYLE_ORTHOGONAL } from '../util/mxConstants';
/**
* @class mxGraphLayout
@ -212,10 +212,7 @@ class mxGraphLayout {
*/
// isVertexIgnored(vertex: mxCell): boolean;
isVertexIgnored(vertex) {
return (
!vertex.isVertex() ||
!vertex.isVisible()
);
return !vertex.isVertex() || !vertex.isVisible();
}
/**
@ -241,9 +238,7 @@ class mxGraphLayout {
*/
// setEdgeStyleEnabled(edge: mxCell, value: any): void;
setEdgeStyleEnabled(edge, value) {
this.graph.setCellStyles(mxConstants.STYLE_NOEDGESTYLE, value ? '0' : '1', [
edge,
]);
this.graph.setCellStyles(STYLE_NOEDGESTYLE, value ? '0' : '1', [edge]);
}
/**
@ -251,9 +246,7 @@ class mxGraphLayout {
*/
// setOrthogonalEdge(edge: mxCell, value: any): void;
setOrthogonalEdge(edge, value) {
this.graph.setCellStyles(mxConstants.STYLE_ORTHOGONAL, value ? '1' : '0', [
edge,
]);
this.graph.setCellStyles(STYLE_ORTHOGONAL, value ? '1' : '0', [edge]);
}
/**

20
packages/core/src/layout/mxStackLayout.js
View File

@ -7,7 +7,12 @@
import mxGraphLayout from './mxGraphLayout';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
import {
DEFAULT_STARTSIZE,
STYLE_HORIZONTAL,
STYLE_STARTSIZE,
STYLE_STROKEWIDTH,
} from '../util/mxConstants';
/**
* Class: mxStackLayout
@ -311,11 +316,10 @@ class mxStackLayout extends mxGraphLayout {
const style = this.graph.getCellStyle(parent);
let start = mxUtils.getNumber(
style,
mxConstants.STYLE_STARTSIZE,
mxConstants.DEFAULT_STARTSIZE
STYLE_STARTSIZE,
DEFAULT_STARTSIZE
);
const horz =
mxUtils.getValue(style, mxConstants.STYLE_HORIZONTAL, true) == 1;
const horz = mxUtils.getValue(style, STYLE_HORIZONTAL, true) == 1;
if (pgeo != null) {
if (horz) {
@ -377,11 +381,7 @@ class mxStackLayout extends mxGraphLayout {
if (!this.borderCollapse) {
const childStyle = this.graph.getCellStyle(child);
sw = mxUtils.getNumber(
childStyle,
mxConstants.STYLE_STROKEWIDTH,
1
);
sw = mxUtils.getNumber(childStyle, STYLE_STROKEWIDTH, 1);
}
if (last != null) {

12
packages/core/src/serialization/mxCellCodec.js
View File

@ -8,8 +8,7 @@
import mxCell from '../view/cell/mxCell';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import { removeWhitespace } from '../util/mxStringUtils';
import { importNode } from '../util/mxDomUtils';
@ -87,9 +86,7 @@ class mxCellCodec extends mxObjectCodec {
isExcluded(obj, attr, value, isWrite) {
return (
super.isExcluded(obj, attr, value, isWrite) ||
(isWrite &&
attr === 'value' &&
value.nodeType === mxConstants.NODETYPE_ELEMENT)
(isWrite && attr === 'value' && value.nodeType === NODETYPE_ELEMENT)
);
}
@ -100,10 +97,7 @@ class mxCellCodec extends mxObjectCodec {
* XML of the user object (inversion).
*/
afterEncode(enc, obj, node) {
if (
obj.value != null &&
obj.value.nodeType === mxConstants.NODETYPE_ELEMENT
) {
if (obj.value != null && obj.value.nodeType === NODETYPE_ELEMENT) {
// Wraps the graphical annotation up in the user object (inversion)
// by putting the result of the default encoding into a clone of the
// user object (node type 1) and returning this cloned user object.

9
packages/core/src/serialization/mxChildChangeCodec.js
View File

@ -8,8 +8,7 @@
import mxChildChange from '../atomic_changes/mxChildChange';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
/**
* Class: mxChildChangeCodec
@ -50,7 +49,7 @@ class mxChildChangeCodec extends mxObjectCodec {
if (attr === 'child' && (!isWrite || obj.model.contains(obj.previous))) {
return true;
}
return mxUtils.indexOf(this.idrefs, attr) >= 0;
return this.idrefs.indexOf(attr) >= 0;
}
/**
@ -99,7 +98,7 @@ class mxChildChangeCodec extends mxObjectCodec {
beforeDecode(dec, node, obj) {
if (
node.firstChild != null &&
node.firstChild.nodeType === mxConstants.NODETYPE_ELEMENT
node.firstChild.nodeType === NODETYPE_ELEMENT
) {
// Makes sure the original node isn't modified
node = node.cloneNode(true);
@ -114,7 +113,7 @@ class mxChildChangeCodec extends mxObjectCodec {
while (tmp != null) {
tmp2 = tmp.nextSibling;
if (tmp.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (tmp.nodeType === NODETYPE_ELEMENT) {
// Ignores all existing cells because those do not need to
// be re-inserted into the model. Since the encoded version
// of these cells contains the new parent, this would leave

12
packages/core/src/serialization/mxCodec.js
View File

@ -7,7 +7,7 @@
import mxCellPath from '../view/cell/mxCellPath';
import mxCodecRegistry from './mxCodecRegistry';
import mxConstants from '../util/mxConstants';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import mxCell from '../view/cell/mxCell';
import mxLog from '../util/gui/mxLog';
import { getFunctionName } from '../util/mxStringUtils';
@ -256,7 +256,7 @@ class mxCodec {
*/
// addElement(node: Node): void;
addElement(node) {
if (node.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (node.nodeType === NODETYPE_ELEMENT) {
const id = node.getAttribute('id');
if (id != null) {
@ -350,9 +350,7 @@ class mxCodec {
node = importNode(this.document, obj, true);
} else {
mxLog.warn(
`mxCodec.encode: No codec for ${getFunctionName(
obj.constructor
)}`
`mxCodec.encode: No codec for ${getFunctionName(obj.constructor)}`
);
}
}
@ -377,7 +375,7 @@ class mxCodec {
this.updateElements();
let obj = null;
if (node != null && node.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (node != null && node.nodeType === NODETYPE_ELEMENT) {
let ctor = null;
try {
@ -460,7 +458,7 @@ class mxCodec {
restoreStructures = restoreStructures != null ? restoreStructures : true;
let cell = null;
if (node != null && node.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (node != null && node.nodeType === NODETYPE_ELEMENT) {
// Tries to find a codec for the given node name. If that does
// not return a codec then the node is the user object (an XML node
// that contains the mxCell, aka inversion).

5
packages/core/src/serialization/mxDefaultToolbarCodec.js
View File

@ -10,6 +10,7 @@ import mxDefaultToolbar from '../editor/mxDefaultToolbar';
import mxCodecRegistry from './mxCodecRegistry';
import { getChildNodes, getTextContent } from '../util/mxDomUtils';
import { getClientX, getClientY } from '../util/mxEventUtils';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
/**
* Class: mxDefaultToolbarCodec
@ -131,7 +132,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
node = node.firstChild;
while (node != null) {
if (node.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (node.nodeType === NODETYPE_ELEMENT) {
if (!this.processInclude(dec, node, into)) {
if (node.nodeName === 'separator') {
into.addSeparator();
@ -240,7 +241,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
// Selects the toolbar icon if a selection change
// is made in the corresponding combobox.
mxEvent.addListener(select, 'change', () => {
into.toolbar.selectMode(img, evt => {
into.toolbar.selectMode(img, (evt) => {
const pt = mxUtils.convertPoint(
editor.graph.container,
getClientX(evt),

1
packages/core/src/serialization/mxGenericChangeCodec.js
View File

@ -13,7 +13,6 @@ import mxCollapseChange from '../atomic_changes/mxCollapseChange';
import mxVisibleChange from '../atomic_changes/mxVisibleChange';
import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
import mxCodecRegistry from './mxCodecRegistry';
import mxUtils from '../util/mxUtils';
import { isNode } from '../util/mxDomUtils';
/**

9
packages/core/src/serialization/mxObjectCodec.js
View File

@ -9,7 +9,7 @@ import mxObjectIdentity from '../util/datatypes/mxObjectIdentity';
import mxLog from '../util/gui/mxLog';
import mxGeometry from '../util/datatypes/mxGeometry';
import mxPoint from '../util/datatypes/mxPoint';
import mxConstants from '../util/mxConstants';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
import { getTextContent } from '../util/mxDomUtils';
@ -313,8 +313,7 @@ class mxObjectCodec {
// isExcluded(obj: any, attr: string, value: any, write?: boolean): boolean;
isExcluded(obj, attr, value, write) {
return (
attr == mxObjectIdentity.FIELD_NAME ||
mxUtils.indexOf(this.exclude, attr) >= 0
attr == mxObjectIdentity.FIELD_NAME || this.exclude.indexOf(attr) >= 0
);
}
@ -331,7 +330,7 @@ class mxObjectCodec {
*/
// isReference(obj: any, attr: string, value: any, write?: boolean): boolean;
isReference(obj, attr, value, write) {
return mxUtils.indexOf(this.idrefs, attr) >= 0;
return this.idrefs.indexOf(attr) >= 0;
}
/**
@ -783,7 +782,7 @@ class mxObjectCodec {
const tmp = child.nextSibling;
if (
child.nodeType === mxConstants.NODETYPE_ELEMENT &&
child.nodeType === NODETYPE_ELEMENT &&
!this.processInclude(dec, child, obj)
) {
this.decodeChild(dec, child, obj);

4
packages/core/src/serialization/mxRootChangeCodec.js
View File

@ -7,7 +7,7 @@
import mxRootChange from '../atomic_changes/mxRootChange';
import mxCodecRegistry from './mxCodecRegistry';
import mxConstants from '../util/mxConstants';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import mxObjectCodec from './mxObjectCodec';
/**
@ -48,7 +48,7 @@ class mxRootChangeCodec extends mxObjectCodec {
beforeDecode(dec, node, obj) {
if (
node.firstChild != null &&
node.firstChild.nodeType === mxConstants.NODETYPE_ELEMENT
node.firstChild.nodeType === NODETYPE_ELEMENT
) {
// Makes sure the original node isn't modified
node = node.cloneNode(true);

4
packages/core/src/serialization/mxStylesheetCodec.js
View File

@ -8,7 +8,7 @@
import mxStylesheet from '../util/datatypes/style/mxStylesheet';
import mxUtils from '../util/mxUtils';
import mxCodecRegistry from './mxCodecRegistry';
import mxConstants from '../util/mxConstants';
import { NODETYPE_ELEMENT } from '../util/mxConstants';
import mxLog from '../util/gui/mxLog';
import mxStyleRegistry from '../util/datatypes/style/mxStyleRegistry';
import mxObjectCodec from './mxObjectCodec';
@ -160,7 +160,7 @@ class mxStylesheetCodec extends mxObjectCodec {
let entry = node.firstChild;
while (entry != null) {
if (entry.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (entry.nodeType === NODETYPE_ELEMENT) {
const key = entry.getAttribute('as');
if (entry.nodeName === 'add') {

14
packages/core/src/shape/edge/mxArrow.js
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import { ARROW_SIZE, ARROW_SPACING, ARROW_WIDTH } from '../../util/mxConstants';
/**
* Extends {@link mxShape} to implement an arrow shape. The shape is used to represent edges, not vertices.
@ -19,9 +19,9 @@ class mxArrow extends mxShape {
this.fill = fill;
this.stroke = stroke;
this.strokewidth = strokewidth != null ? strokewidth : 1;
this.arrowWidth = arrowWidth != null ? arrowWidth : mxConstants.ARROW_WIDTH;
this.spacing = spacing != null ? spacing : mxConstants.ARROW_SPACING;
this.endSize = endSize != null ? endSize : mxConstants.ARROW_SIZE;
this.arrowWidth = arrowWidth != null ? arrowWidth : ARROW_WIDTH;
this.spacing = spacing != null ? spacing : ARROW_SPACING;
this.endSize = endSize != null ? endSize : ARROW_SIZE;
}
/**
@ -41,9 +41,9 @@ class mxArrow extends mxShape {
// paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void;
paintEdgeShape(c, pts) {
// Geometry of arrow
const spacing = mxConstants.ARROW_SPACING;
const width = mxConstants.ARROW_WIDTH;
const arrow = mxConstants.ARROW_SIZE;
const spacing = ARROW_SPACING;
const width = ARROW_WIDTH;
const arrow = ARROW_SIZE;
// Base vector (between end points)
const p0 = pts[0];

62
packages/core/src/shape/edge/mxArrowConnector.js
View File

@ -5,7 +5,17 @@
* Type definitions from the typed-mxgraph project
*/
import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import {
ARROW_SIZE,
ARROW_SPACING,
ARROW_WIDTH,
NONE,
STYLE_ENDARROW,
STYLE_ENDSIZE,
STYLE_STARTARROW,
STYLE_STARTSIZE,
STYLE_STROKEWIDTH,
} from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
/**
@ -21,10 +31,10 @@ class mxArrowConnector extends mxShape {
this.fill = fill;
this.stroke = stroke;
this.strokewidth = strokewidth != null ? strokewidth : 1;
this.arrowWidth = arrowWidth != null ? arrowWidth : mxConstants.ARROW_WIDTH;
this.arrowSpacing = spacing != null ? spacing : mxConstants.ARROW_SPACING;
this.startSize = mxConstants.ARROW_SIZE / 5;
this.endSize = endSize != null ? endSize : mxConstants.ARROW_SIZE / 5;
this.arrowWidth = arrowWidth != null ? arrowWidth : ARROW_WIDTH;
this.arrowSpacing = spacing != null ? spacing : ARROW_SPACING;
this.startSize = ARROW_SIZE / 5;
this.endSize = endSize != null ? endSize : ARROW_SIZE / 5;
}
/**
@ -49,7 +59,7 @@ class mxArrowConnector extends mxShape {
// resetStyles(): void;
resetStyles() {
super.resetStyles();
this.arrowSpacing = mxConstants.ARROW_SPACING;
this.arrowSpacing = ARROW_SPACING;
}
/**
@ -61,17 +71,9 @@ class mxArrowConnector extends mxShape {
if (this.style != null) {
this.startSize =
mxUtils.getNumber(
this.style,
mxConstants.STYLE_STARTSIZE,
mxConstants.ARROW_SIZE / 5
) * 3;
mxUtils.getNumber(this.style, STYLE_STARTSIZE, ARROW_SIZE / 5) * 3;
this.endSize =
mxUtils.getNumber(
this.style,
mxConstants.STYLE_ENDSIZE,
mxConstants.ARROW_SIZE / 5
) * 3;
mxUtils.getNumber(this.style, STYLE_ENDSIZE, ARROW_SIZE / 5) * 3;
}
}
@ -106,11 +108,7 @@ class mxArrowConnector extends mxShape {
if (this.outline) {
strokeWidth = Math.max(
1,
mxUtils.getNumber(
this.style,
mxConstants.STYLE_STROKEWIDTH,
this.strokewidth
)
mxUtils.getNumber(this.style, STYLE_STROKEWIDTH, this.strokewidth)
);
}
@ -459,7 +457,7 @@ class mxArrowConnector extends mxShape {
*/
// getStartArrowWidth(): number;
getStartArrowWidth() {
return mxConstants.ARROW_WIDTH;
return ARROW_WIDTH;
}
/**
@ -467,7 +465,7 @@ class mxArrowConnector extends mxShape {
*/
// getEndArrowWidth(): number;
getEndArrowWidth() {
return mxConstants.ARROW_WIDTH;
return ARROW_WIDTH;
}
/**
@ -475,7 +473,7 @@ class mxArrowConnector extends mxShape {
*/
// getEdgeWidth(): number;
getEdgeWidth() {
return mxConstants.ARROW_WIDTH / 3;
return ARROW_WIDTH / 3;
}
/**
@ -491,13 +489,7 @@ class mxArrowConnector extends mxShape {
*/
// isMarkerStart(): boolean;
isMarkerStart() {
return (
mxUtils.getValue(
this.style,
mxConstants.STYLE_STARTARROW,
mxConstants.NONE
) !== mxConstants.NONE
);
return mxUtils.getValue(this.style, STYLE_STARTARROW, NONE) !== NONE;
}
/**
@ -505,13 +497,7 @@ class mxArrowConnector extends mxShape {
*/
// isMarkerEnd(): boolean;
isMarkerEnd() {
return (
mxUtils.getValue(
this.style,
mxConstants.STYLE_ENDARROW,
mxConstants.NONE
) !== mxConstants.NONE
);
return mxUtils.getValue(this.style, STYLE_ENDARROW, NONE) !== NONE;
}
}

53
packages/core/src/shape/edge/mxConnector.js
View File

@ -4,7 +4,17 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import mxConstants from '../../util/mxConstants';
import {
DEFAULT_MARKERSIZE,
NONE,
STYLE_CURVED,
STYLE_ENDARROW,
STYLE_ENDFILL,
STYLE_ENDSIZE,
STYLE_STARTARROW,
STYLE_STARTFILL,
STYLE_STARTSIZE,
} from '../../util/mxConstants';
import mxPolyline from './mxPolyline';
import mxUtils from '../../util/mxUtils';
import mxMarker from './mxMarker';
@ -29,7 +39,7 @@ class mxConnector extends mxPolyline {
// updateBoundingBox(): void;
updateBoundingBox() {
this.useSvgBoundingBox =
this.style != null && this.style[mxConstants.STYLE_CURVED] === 1;
this.style != null && this.style[STYLE_CURVED] === 1;
super.updateBoundingBox();
}
@ -69,7 +79,7 @@ class mxConnector extends mxPolyline {
const n = pts.length;
const type = mxUtils.getValue(
this.style,
source ? mxConstants.STYLE_STARTARROW : mxConstants.STYLE_ENDARROW
source ? STYLE_STARTARROW : STYLE_ENDARROW
);
let p0 = source ? pts[1] : pts[n - 2];
const pe = source ? pts[0] : pts[n - 1];
@ -98,16 +108,13 @@ class mxConnector extends mxPolyline {
const size = mxUtils.getNumber(
this.style,
source ? mxConstants.STYLE_STARTSIZE : mxConstants.STYLE_ENDSIZE,
mxConstants.DEFAULT_MARKERSIZE
source ? STYLE_STARTSIZE : STYLE_ENDSIZE,
DEFAULT_MARKERSIZE
);
// Allow for stroke width in the end point used and the
// orthogonal vectors describing the direction of the marker
const filled =
this.style[
source ? mxConstants.STYLE_STARTFILL : mxConstants.STYLE_ENDFILL
] !== 0;
const filled = this.style[source ? STYLE_STARTFILL : STYLE_ENDFILL] !== 0;
result = mxMarker.createMarker(
c,
@ -136,36 +143,16 @@ class mxConnector extends mxPolyline {
// Adds marker sizes
let size = 0;
if (
mxUtils.getValue(
this.style,
mxConstants.STYLE_STARTARROW,
mxConstants.NONE
) !== mxConstants.NONE
) {
if (mxUtils.getValue(this.style, STYLE_STARTARROW, NONE) !== NONE) {
size =
mxUtils.getNumber(
this.style,
mxConstants.STYLE_STARTSIZE,
mxConstants.DEFAULT_MARKERSIZE
) + 1;
mxUtils.getNumber(this.style, STYLE_STARTSIZE, DEFAULT_MARKERSIZE) + 1;
}
if (
mxUtils.getValue(
this.style,
mxConstants.STYLE_ENDARROW,
mxConstants.NONE
) !== mxConstants.NONE
) {
if (mxUtils.getValue(this.style, STYLE_ENDARROW, NONE) !== NONE) {
size =
Math.max(
size,
mxUtils.getNumber(
this.style,
mxConstants.STYLE_ENDSIZE,
mxConstants.DEFAULT_MARKERSIZE
)
mxUtils.getNumber(this.style, STYLE_ENDSIZE, DEFAULT_MARKERSIZE)
) + 1;
}

20
packages/core/src/shape/edge/mxMarker.js
View File

@ -4,7 +4,11 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import mxConstants from '../../util/mxConstants';
import {
ARROW_CLASSIC,
ARROW_CLASSIC_THIN,
ARROW_DIAMOND,
} from '../../util/mxConstants';
/**
* A static class that implements all markers for VML and SVG using a registry.
@ -86,10 +90,7 @@ class mxMarker {
pt.y -= endOffsetY;
const f =
type !== mxConstants.ARROW_CLASSIC &&
type !== mxConstants.ARROW_CLASSIC_THIN
? 1
: 3 / 4;
type !== ARROW_CLASSIC && type !== ARROW_CLASSIC_THIN ? 1 : 3 / 4;
pe.x += -unitX * f - endOffsetX;
pe.y += -unitY * f - endOffsetY;
@ -101,10 +102,7 @@ class mxMarker {
pt.y - unitY + unitX / widthFactor
);
if (
type === mxConstants.ARROW_CLASSIC ||
type === mxConstants.ARROW_CLASSIC_THIN
) {
if (type === ARROW_CLASSIC || type === ARROW_CLASSIC_THIN) {
canvas.lineTo(pt.x - (unitX * 3) / 4, pt.y - (unitY * 3) / 4);
}
@ -216,7 +214,7 @@ class mxMarker {
// only half the strokewidth is processed ). Or 0.9862 for thin diamond.
// Note these values and the tk variable below are dependent, update
// both together (saves trig hard coding it).
const swFactor = type === mxConstants.ARROW_DIAMOND ? 0.7071 : 0.9862;
const swFactor = type === ARROW_DIAMOND ? 0.7071 : 0.9862;
const endOffsetX = unitX * sw * swFactor;
const endOffsetY = unitY * sw * swFactor;
@ -231,7 +229,7 @@ class mxMarker {
pe.y += -unitY - endOffsetY;
// thickness factor for diamond
const tk = type === mxConstants.ARROW_DIAMOND ? 2 : 3.4;
const tk = type === ARROW_DIAMOND ? 2 : 3.4;
return () => {
canvas.begin();

14
packages/core/src/shape/edge/mxPolyline.js
View File

@ -5,7 +5,11 @@
* Type definitions from the typed-mxgraph project
*/
import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import {
LINE_ARCSIZE,
STYLE_ARCSIZE,
STYLE_CURVED,
} from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
/**
@ -68,7 +72,7 @@ class mxPolyline extends mxShape {
const prev = c.pointerEventsValue;
c.pointerEventsValue = 'stroke';
if (this.style == null || this.style[mxConstants.STYLE_CURVED] != 1) {
if (this.style == null || this.style[STYLE_CURVED] != 1) {
this.paintLine(c, pts, this.isRounded);
} else {
this.paintCurvedLine(c, pts);
@ -83,11 +87,7 @@ class mxPolyline extends mxShape {
// paintLine(c: mxAbstractCanvas2D, pts: Array<mxPoint>, rounded?: boolean): void;
paintLine(c, pts, rounded) {
const arcSize =
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.LINE_ARCSIZE
) / 2;
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
c.begin();
this.addPoints(c, pts, rounded, arcSize, false);
c.stroke();

70
packages/core/src/shape/mxLabel.js
View File

@ -5,7 +5,22 @@
* Type definitions from the typed-mxgraph project
*/
import mxRectangle from '../util/datatypes/mxRectangle';
import mxConstants from '../util/mxConstants';
import {
ALIGN_BOTTOM,
ALIGN_CENTER,
ALIGN_LEFT,
ALIGN_MIDDLE,
ALIGN_RIGHT,
ALIGN_TOP,
DEFAULT_IMAGESIZE,
STYLE_IMAGE_ALIGN,
STYLE_IMAGE_HEIGHT,
STYLE_IMAGE_VERTICAL_ALIGN,
STYLE_IMAGE_WIDTH,
STYLE_INDICATOR_HEIGHT,
STYLE_INDICATOR_WIDTH,
STYLE_SPACING,
} from '../util/mxConstants';
import mxRectangleShape from './node/mxRectangleShape';
import mxUtils from '../util/mxUtils';
@ -39,7 +54,7 @@ class mxLabel extends mxRectangleShape {
* @default mxConstants.DEFAULT_IMAGESIZE
*/
// imageSize: number;
imageSize = mxConstants.DEFAULT_IMAGESIZE;
imageSize = DEFAULT_IMAGESIZE;
/**
* Default value for image spacing
@ -157,42 +172,37 @@ class mxLabel extends mxRectangleShape {
*/
// getImageBounds(x: number, y: number, w: number, h: number): mxRectangle;
getImageBounds(x, y, w, h) {
const align = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_ALIGN,
mxConstants.ALIGN_LEFT
);
const align = mxUtils.getValue(this.style, STYLE_IMAGE_ALIGN, ALIGN_LEFT);
const valign = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_VERTICAL_ALIGN,
mxConstants.ALIGN_MIDDLE
STYLE_IMAGE_VERTICAL_ALIGN,
ALIGN_MIDDLE
);
const width = mxUtils.getNumber(
this.style,
mxConstants.STYLE_IMAGE_WIDTH,
mxConstants.DEFAULT_IMAGESIZE
STYLE_IMAGE_WIDTH,
DEFAULT_IMAGESIZE
);
const height = mxUtils.getNumber(
this.style,
mxConstants.STYLE_IMAGE_HEIGHT,
mxConstants.DEFAULT_IMAGESIZE
STYLE_IMAGE_HEIGHT,
DEFAULT_IMAGESIZE
);
const spacing =
mxUtils.getNumber(this.style, mxConstants.STYLE_SPACING, this.spacing) +
5;
mxUtils.getNumber(this.style, STYLE_SPACING, this.spacing) + 5;
if (align === mxConstants.ALIGN_CENTER) {
if (align === ALIGN_CENTER) {
x += (w - width) / 2;
} else if (align === mxConstants.ALIGN_RIGHT) {
} else if (align === ALIGN_RIGHT) {
x += w - width - spacing;
} // default is left
else {
x += spacing;
}
if (valign === mxConstants.ALIGN_TOP) {
if (valign === ALIGN_TOP) {
y += spacing;
} else if (valign === mxConstants.ALIGN_BOTTOM) {
} else if (valign === ALIGN_BOTTOM) {
y += h - height - spacing;
} // default is middle
else {
@ -240,40 +250,36 @@ class mxLabel extends mxRectangleShape {
*/
// getIndicatorBounds(x: number, y: number, w: number, h: number): mxRectangle;
getIndicatorBounds(x, y, w, h) {
const align = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_ALIGN,
mxConstants.ALIGN_LEFT
);
const align = mxUtils.getValue(this.style, STYLE_IMAGE_ALIGN, ALIGN_LEFT);
const valign = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_VERTICAL_ALIGN,
mxConstants.ALIGN_MIDDLE
STYLE_IMAGE_VERTICAL_ALIGN,
ALIGN_MIDDLE
);
const width = mxUtils.getNumber(
this.style,
mxConstants.STYLE_INDICATOR_WIDTH,
STYLE_INDICATOR_WIDTH,
this.indicatorSize
);
const height = mxUtils.getNumber(
this.style,
mxConstants.STYLE_INDICATOR_HEIGHT,
STYLE_INDICATOR_HEIGHT,
this.indicatorSize
);
const spacing = this.spacing + 5;
if (align === mxConstants.ALIGN_RIGHT) {
if (align === ALIGN_RIGHT) {
x += w - width - spacing;
} else if (align === mxConstants.ALIGN_CENTER) {
} else if (align === ALIGN_CENTER) {
x += (w - width) / 2;
} // default is left
else {
x += spacing;
}
if (valign === mxConstants.ALIGN_BOTTOM) {
if (valign === ALIGN_BOTTOM) {
y += h - height - spacing;
} else if (valign === mxConstants.ALIGN_TOP) {
} else if (valign === ALIGN_TOP) {
y += spacing;
} // default is middle
else {

202
packages/core/src/shape/mxShape.ts
View File

@ -6,14 +6,32 @@
*/
import mxRectangle from '../util/datatypes/mxRectangle';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
import {
DIRECTION_EAST,
DIRECTION_NORTH,
DIRECTION_SOUTH,
DIRECTION_WEST,
LINE_ARCSIZE,
NONE,
RECTANGLE_ROUNDING_FACTOR,
SHADOW_OFFSET_X,
SHADOW_OFFSET_Y,
STYLE_ABSOLUTE_ARCSIZE,
STYLE_ARCSIZE,
STYLE_BACKGROUND_OUTLINE,
STYLE_DIRECTION,
STYLE_FIX_DASH,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_HORIZONTAL,
} from '../util/mxConstants';
import mxPoint from '../util/datatypes/mxPoint';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
import mxEvent from '../util/event/mxEvent';
import mxClient from '../mxClient';
import mxCellState from '../view/cell/mxCellState';
import mxStencil from './node/mxStencil';
import mxCellOverlay from "../view/cell/mxCellOverlay";
import mxCellOverlay from '../view/cell/mxCellOverlay';
const toBool = (i: any): boolean => {
if (i === 0) return false;
@ -69,7 +87,7 @@ const toBool = (i: any): boolean => {
* ```
*/
class mxShape {
constructor(stencil: mxStencil | null=null) {
constructor(stencil: mxStencil | null = null) {
if (stencil) {
this.stencil = stencil;
}
@ -115,14 +133,14 @@ class mxShape {
// TODO: Document me!!
// Assigned in mxCellRenderer
preserveImageAspect: boolean=false;
overlay: mxCellOverlay | null=null;
indicator: mxShape | null=null;
indicatorShape: typeof mxShape | null=null;
preserveImageAspect: boolean = false;
overlay: mxCellOverlay | null = null;
indicator: mxShape | null = null;
indicatorShape: typeof mxShape | null = null;
// Assigned in mxCellHighlight
opacity: number=100;
isDashed: boolean=false;
opacity: number = 100;
isDashed: boolean = false;
fill: string | null = null;
@ -371,7 +389,7 @@ class mxShape {
*/
// create(container: Element): Element;
create(container: SVGElement | HTMLElement | null): SVGGElement {
return document.createElementNS("http://www.w3.org/2000/svg", "g");
return document.createElementNS('http://www.w3.org/2000/svg', 'g');
}
/**
@ -455,17 +473,13 @@ class mxShape {
*/
// getLabelBounds(rect: mxRectangle): mxRectangle;
getLabelBounds(rect: mxRectangle): mxRectangle {
const d = mxUtils.getValue(
this.style,
mxConstants.STYLE_DIRECTION,
mxConstants.DIRECTION_EAST
);
const d = mxUtils.getValue(this.style, STYLE_DIRECTION, DIRECTION_EAST);
let bounds = rect.clone();
// Normalizes argument for getLabelMargins hook
if (
d !== mxConstants.DIRECTION_SOUTH &&
d !== mxConstants.DIRECTION_NORTH &&
d !== DIRECTION_SOUTH &&
d !== DIRECTION_NORTH &&
this.state != null &&
this.state.text != null &&
this.state.text.isPaintBoundsInverted()
@ -479,12 +493,8 @@ class mxShape {
if (labelMargins != null) {
labelMargins = <mxRectangle>(<mxRectangle>labelMargins).clone();
let flipH = toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPH, false)
);
let flipV = toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPV, false)
);
let flipH = toBool(mxUtils.getValue(this.style, STYLE_FLIPH, false));
let flipV = toBool(mxUtils.getValue(this.style, STYLE_FLIPV, false));
// Handles special case for vertical labels
if (
@ -612,7 +622,10 @@ class mxShape {
const off = this.getSvgScreenOffset();
if (off !== 0) {
(<SVGGElement>this.node).setAttribute('transform', `translate(${off},${off})`);
(<SVGGElement>this.node).setAttribute(
'transform',
`translate(${off},${off})`
);
} else {
(<SVGGElement>this.node).removeAttribute('transform');
}
@ -621,7 +634,7 @@ class mxShape {
if (!this.antiAlias) {
// Rounds all numbers in the SVG output to integers
canvas.format = value => {
canvas.format = (value) => {
return Math.round(parseFloat(value));
};
}
@ -718,12 +731,7 @@ class mxShape {
(this.stencil != null && this.stencilPointerEvents)
) {
const bb = this.createBoundingBox();
bg = this.createTransparentSvgRectangle(
bb.x,
bb.y,
bb.width,
bb.height
);
bg = this.createTransparentSvgRectangle(bb.x, bb.y, bb.width, bb.height);
(<SVGGElement>this.node).appendChild(bg);
}
@ -766,11 +774,13 @@ class mxShape {
* Sets the state of the canvas for drawing the shape.
*/
// configureCanvas(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
configureCanvas(c: mxSvgCanvas2D,
configureCanvas(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number) {
h: number
) {
let dash = null;
if (this.style != null) {
@ -791,9 +801,7 @@ class mxShape {
c.setDashed(
this.isDashed,
this.style != null
? toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_FIX_DASH, false)
)
? toBool(mxUtils.getValue(this.style, STYLE_FIX_DASH, false))
: false
);
}
@ -804,9 +812,9 @@ class mxShape {
if (
this.fill != null &&
this.fill !== mxConstants.NONE &&
this.fill !== NONE &&
this.gradient &&
this.gradient !== mxConstants.NONE
this.gradient !== NONE
) {
const b = this.getGradientBounds(c, x, y, w, h);
c.setGradient(
@ -831,11 +839,13 @@ class mxShape {
* Returns the bounding box for the gradient box for this shape.
*/
// getGradientBounds(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): mxRectangle;
getGradientBounds(c: mxSvgCanvas2D,
getGradientBounds(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number) {
h: number
) {
return new mxRectangle(x, y, w, h);
}
@ -845,11 +855,13 @@ class mxShape {
* Sets the scale and rotation on the given canvas.
*/
// updateTransform(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
updateTransform(c: mxSvgCanvas2D,
updateTransform(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number) {
h: number
) {
// 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.
@ -869,22 +881,20 @@ class mxShape {
* Paints the vertex shape.
*/
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape(c: mxSvgCanvas2D,
paintVertexShape(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number) {
h: number
) {
this.paintBackground(c, x, y, w, h);
if (
!this.outline ||
this.style == null ||
toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_BACKGROUND_OUTLINE,
0
) === false
mxUtils.getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) === false
)
) {
c.setShadow(false);
@ -898,21 +908,25 @@ class mxShape {
* Hook for subclassers. This implementation is empty.
*/
// paintBackground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintBackground(c: mxSvgCanvas2D,
paintBackground(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number) {}
h: number
) {}
/**
* Hook for subclassers. This implementation is empty.
*/
// paintForeground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintForeground(c: mxSvgCanvas2D,
paintForeground(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number) {}
h: number
) {}
/**
* Function: paintEdgeShape
@ -920,8 +934,7 @@ class mxShape {
* Hook for subclassers. This implementation is empty.
*/
// paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void;
paintEdgeShape(c: mxSvgCanvas2D,
pts: mxPoint[]): void {}
paintEdgeShape(c: mxSvgCanvas2D, pts: mxPoint[]): void {}
/**
* Function: getArcSize
@ -932,20 +945,12 @@ class mxShape {
getArcSize(w: number, h: number): number {
let r = 0;
if (
toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0)
)
) {
if (toBool(mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0))) {
r = Math.min(
w / 2,
Math.min(
h / 2,
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.LINE_ARCSIZE
) / 2
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
)
);
} else {
@ -953,8 +958,8 @@ class mxShape {
String(
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100
STYLE_ARCSIZE,
RECTANGLE_ROUNDING_FACTOR * 100
) / 100
)
);
@ -969,12 +974,14 @@ class mxShape {
* Paints the glass gradient effect.
*/
// paintGlassEffect(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number, arc: number): void;
paintGlassEffect(c: mxSvgCanvas2D,
paintGlassEffect(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number,
arc: number): void {
arc: number
): void {
const sw = Math.ceil(<number>this.strokewidth / 2);
const size = 0.4;
@ -1005,14 +1012,15 @@ class mxShape {
*
* Paints the given points with rounded corners.
*/
addPoints(c: mxSvgCanvas2D,
pts: mxPoint[] | null=null,
rounded: boolean=false,
addPoints(
c: mxSvgCanvas2D,
pts: mxPoint[] | null = null,
rounded: boolean = false,
arcSize: number,
close: boolean=false,
exclude: number[] | null=null,
initialMove: boolean=true) {
close: boolean = false,
exclude: number[] | null = null,
initialMove: boolean = true
) {
if (pts != null && pts.length > 0) {
const pe = pts[pts.length - 1];
@ -1045,7 +1053,7 @@ class mxShape {
if (
rounded &&
(dx !== 0 || dy !== 0) &&
(exclude == null || mxUtils.indexOf(exclude, i - 1) < 0)
(exclude == null || exclude.indexOf(i - 1) < 0)
) {
// Draws a line from the last point to the current
// point with a spacing of size off the current point
@ -1218,8 +1226,8 @@ class mxShape {
}
if (
this.direction === mxConstants.DIRECTION_NORTH ||
this.direction === mxConstants.DIRECTION_SOUTH
this.direction === DIRECTION_NORTH ||
this.direction === DIRECTION_SOUTH
) {
const tmp = this.flipH;
this.flipH = this.flipV;
@ -1233,13 +1241,13 @@ class mxShape {
);
this.glass = toBool(ifNotNullElse(this.style.glass, this.glass));
if (this.fill === mxConstants.NONE) {
if (this.fill === NONE) {
this.fill = null;
}
if (this.gradient === mxConstants.NONE) {
if (this.gradient === NONE) {
this.gradient = null;
}
if (this.stroke === mxConstants.NONE) {
if (this.stroke === NONE) {
this.stroke = null;
}
}
@ -1346,8 +1354,8 @@ class mxShape {
const bb = (<mxRectangle>this.bounds).clone();
if (
(this.stencil != null &&
(this.direction === mxConstants.DIRECTION_NORTH ||
this.direction === mxConstants.DIRECTION_SOUTH)) ||
(this.direction === DIRECTION_NORTH ||
this.direction === DIRECTION_SOUTH)) ||
this.isPaintBoundsInverted()
) {
bb.rotate90();
@ -1361,8 +1369,8 @@ class mxShape {
// augmentBoundingBox(bbox: mxRectangle): void;
augmentBoundingBox(bbox: mxRectangle): void {
if (this.isShadow) {
bbox.width += Math.ceil(mxConstants.SHADOW_OFFSET_X * this.scale);
bbox.height += Math.ceil(mxConstants.SHADOW_OFFSET_Y * this.scale);
bbox.width += Math.ceil(SHADOW_OFFSET_X * this.scale);
bbox.height += Math.ceil(SHADOW_OFFSET_Y * this.scale);
}
// Adds strokeWidth
bbox.grow((<number>this.strokewidth * this.scale) / 2);
@ -1378,8 +1386,7 @@ class mxShape {
// Stencil implements inversion via aspect
return (
this.stencil == null &&
(this.direction === mxConstants.DIRECTION_NORTH ||
this.direction === mxConstants.DIRECTION_SOUTH)
(this.direction === DIRECTION_NORTH || this.direction === DIRECTION_SOUTH)
);
}
@ -1401,9 +1408,7 @@ class mxShape {
// getTextRotation(): number;
getTextRotation(): number {
let rot = this.getRotation();
if (
!toBool(mxUtils.getValue(this.style, mxConstants.STYLE_HORIZONTAL, 1))
) {
if (!toBool(mxUtils.getValue(this.style, STYLE_HORIZONTAL, 1))) {
rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
}
return rot;
@ -1418,11 +1423,11 @@ class mxShape {
getShapeRotation(): number {
let rot = this.getRotation();
if (this.direction != null) {
if (this.direction === mxConstants.DIRECTION_NORTH) {
if (this.direction === DIRECTION_NORTH) {
rot += 270;
} else if (this.direction === mxConstants.DIRECTION_WEST) {
} else if (this.direction === DIRECTION_WEST) {
rot += 180;
} else if (this.direction === mxConstants.DIRECTION_SOUTH) {
} else if (this.direction === DIRECTION_SOUTH) {
rot += 90;
}
}
@ -1435,12 +1440,13 @@ class mxShape {
* Adds a transparent rectangle that catches all events.
*/
// createTransparentSvgRectangle(x: number, y: number, w: number, h: number): Element;
createTransparentSvgRectangle(x: number,
createTransparentSvgRectangle(
x: number,
y: number,
w: number,
h: number): SVGElement {
const rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
h: number
): SVGElement {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', String(x));
rect.setAttribute('y', String(y));
rect.setAttribute('width', String(w));

113
packages/core/src/shape/mxSwimlane.js
View File

@ -6,7 +6,25 @@
*/
import mxShape from './mxShape';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxConstants from '../util/mxConstants';
import {
DEFAULT_STARTSIZE,
DIRECTION_NORTH,
DIRECTION_SOUTH,
DIRECTION_WEST,
LINE_ARCSIZE,
NONE,
RECTANGLE_ROUNDING_FACTOR,
STYLE_ABSOLUTE_ARCSIZE,
STYLE_ARCSIZE,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_HORIZONTAL,
STYLE_POINTER_EVENTS,
STYLE_SEPARATORCOLOR,
STYLE_STARTSIZE,
STYLE_SWIMLANE_FILLCOLOR,
STYLE_SWIMLANE_LINE,
} from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
/**
@ -63,11 +81,7 @@ class mxSwimlane extends mxShape {
getTitleSize() {
return Math.max(
0,
mxUtils.getValue(
this.style,
mxConstants.STYLE_STARTSIZE,
mxConstants.DEFAULT_STARTSIZE
)
mxUtils.getValue(this.style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
);
}
@ -80,25 +94,24 @@ class mxSwimlane extends mxShape {
const bounds = new mxRectangle(rect.x, rect.y, rect.width, rect.height);
const horizontal = this.isHorizontal();
const flipH = mxUtils.getValue(this.style, mxConstants.STYLE_FLIPH, 0) == 1;
const flipV = mxUtils.getValue(this.style, mxConstants.STYLE_FLIPV, 0) == 1;
const flipH = mxUtils.getValue(this.style, STYLE_FLIPH, 0) == 1;
const flipV = mxUtils.getValue(this.style, STYLE_FLIPV, 0) == 1;
// East is default
const shapeVertical =
this.direction === mxConstants.DIRECTION_NORTH ||
this.direction === mxConstants.DIRECTION_SOUTH;
this.direction === DIRECTION_NORTH || this.direction === DIRECTION_SOUTH;
const realHorizontal = horizontal == !shapeVertical;
const realFlipH =
!realHorizontal &&
flipH !=
(this.direction === mxConstants.DIRECTION_SOUTH ||
this.direction === mxConstants.DIRECTION_WEST);
(this.direction === DIRECTION_SOUTH ||
this.direction === DIRECTION_WEST);
const realFlipV =
realHorizontal &&
flipV !=
(this.direction === mxConstants.DIRECTION_SOUTH ||
this.direction === mxConstants.DIRECTION_WEST);
(this.direction === DIRECTION_SOUTH ||
this.direction === DIRECTION_WEST);
// Shape is horizontal
if (!shapeVertical) {
@ -143,26 +156,20 @@ class mxSwimlane extends mxShape {
* Returns the arcsize for the swimlane.
*/
getSwimlaneArcSize(w, h, start) {
if (
mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1'
) {
if (mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0) == '1') {
return Math.min(
w / 2,
Math.min(
h / 2,
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.LINE_ARCSIZE
) / 2
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
)
);
}
const f =
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100
STYLE_ARCSIZE,
RECTANGLE_ROUNDING_FACTOR * 100
) / 100;
return start * f * 3;
@ -173,7 +180,7 @@ class mxSwimlane extends mxShape {
*/
// isHorizontal(): boolean;
isHorizontal() {
return mxUtils.getValue(this.style, mxConstants.STYLE_HORIZONTAL, 1) == 1;
return mxUtils.getValue(this.style, STYLE_HORIZONTAL, 1) == 1;
}
/**
@ -182,13 +189,9 @@ class mxSwimlane extends mxShape {
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape(c, x, y, w, h) {
let start = this.getTitleSize();
const fill = mxUtils.getValue(
this.style,
mxConstants.STYLE_SWIMLANE_FILLCOLOR,
mxConstants.NONE
);
const fill = mxUtils.getValue(this.style, STYLE_SWIMLANE_FILLCOLOR, NONE);
const swimlaneLine =
mxUtils.getValue(this.style, mxConstants.STYLE_SWIMLANE_LINE, 1) == 1;
mxUtils.getValue(this.style, STYLE_SWIMLANE_LINE, 1) == 1;
let r = 0;
if (this.isHorizontal()) {
@ -207,11 +210,7 @@ class mxSwimlane extends mxShape {
this.paintRoundedSwimlane(c, x, y, w, h, start, r, fill, swimlaneLine);
}
const sep = mxUtils.getValue(
this.style,
mxConstants.STYLE_SEPARATORCOLOR,
mxConstants.NONE
);
const sep = mxUtils.getValue(this.style, STYLE_SEPARATORCOLOR, NONE);
this.paintSeparator(c, x, y, w, h, start, sep);
if (this.image != null) {
@ -245,12 +244,10 @@ class mxSwimlane extends mxShape {
let events = true;
if (this.style != null) {
events =
mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') ==
'1';
events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
}
if (!events && (this.fill == null || this.fill === mxConstants.NONE)) {
if (!events && (this.fill == null || this.fill === NONE)) {
c.pointerEvents = false;
}
@ -262,11 +259,11 @@ class mxSwimlane extends mxShape {
c.fillAndStroke();
if (start < h) {
if (fill === mxConstants.NONE || !events) {
if (fill === NONE || !events) {
c.pointerEvents = false;
}
if (fill !== mxConstants.NONE) {
if (fill !== NONE) {
c.setFillColor(fill);
}
@ -276,7 +273,7 @@ class mxSwimlane extends mxShape {
c.lineTo(w, h);
c.lineTo(w, start);
if (fill === mxConstants.NONE) {
if (fill === NONE) {
c.stroke();
} else {
c.fillAndStroke();
@ -290,11 +287,11 @@ class mxSwimlane extends mxShape {
c.fillAndStroke();
if (start < w) {
if (fill === mxConstants.NONE || !events) {
if (fill === NONE || !events) {
c.pointerEvents = false;
}
if (fill !== mxConstants.NONE) {
if (fill !== NONE) {
c.setFillColor(fill);
}
@ -304,7 +301,7 @@ class mxSwimlane extends mxShape {
c.lineTo(w, h);
c.lineTo(start, h);
if (fill === mxConstants.NONE) {
if (fill === NONE) {
c.stroke();
} else {
c.fillAndStroke();
@ -313,7 +310,7 @@ class mxSwimlane extends mxShape {
}
if (swimlaneLine) {
this.paintDivider(c, x, y, w, h, start, fill === mxConstants.NONE);
this.paintDivider(c, x, y, w, h, start, fill === NONE);
}
}
@ -328,12 +325,10 @@ class mxSwimlane extends mxShape {
let events = true;
if (this.style != null) {
events =
mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') ==
'1';
events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
}
if (!events && (this.fill == null || this.fill === mxConstants.NONE)) {
if (!events && (this.fill == null || this.fill === NONE)) {
c.pointerEvents = false;
}
@ -347,11 +342,11 @@ class mxSwimlane extends mxShape {
c.fillAndStroke();
if (start < h) {
if (fill === mxConstants.NONE || !events) {
if (fill === NONE || !events) {
c.pointerEvents = false;
}
if (fill !== mxConstants.NONE) {
if (fill !== NONE) {
c.setFillColor(fill);
}
@ -363,7 +358,7 @@ class mxSwimlane extends mxShape {
c.quadTo(w, h, w, h - r);
c.lineTo(w, start);
if (fill === mxConstants.NONE) {
if (fill === NONE) {
c.stroke();
} else {
c.fillAndStroke();
@ -379,11 +374,11 @@ class mxSwimlane extends mxShape {
c.fillAndStroke();
if (start < w) {
if (fill === mxConstants.NONE || !events) {
if (fill === NONE || !events) {
c.pointerEvents = false;
}
if (fill !== mxConstants.NONE) {
if (fill !== NONE) {
c.setFillColor(fill);
}
@ -395,7 +390,7 @@ class mxSwimlane extends mxShape {
c.quadTo(w, 0, w - r, 0);
c.lineTo(start, 0);
if (fill === mxConstants.NONE) {
if (fill === NONE) {
c.stroke();
} else {
c.fillAndStroke();
@ -404,7 +399,7 @@ class mxSwimlane extends mxShape {
}
if (swimlaneLine) {
this.paintDivider(c, x, y, w, h, start, fill === mxConstants.NONE);
this.paintDivider(c, x, y, w, h, start, fill === NONE);
}
}
@ -437,7 +432,7 @@ class mxSwimlane extends mxShape {
* Paints the vertical or horizontal separator line between swimlanes.
*/
paintSeparator(c, x, y, w, h, start, color) {
if (color !== mxConstants.NONE) {
if (color !== NONE) {
c.setStrokeColor(color);
c.setDashed(true);
c.begin();

354
packages/core/src/shape/mxText.ts
View File

@ -6,14 +6,56 @@
*/
import mxClient from '../mxClient';
import mxConstants from '../util/mxConstants';
import {
ABSOLUTE_LINE_HEIGHT,
ALIGN_BOTTOM,
ALIGN_CENTER,
ALIGN_MIDDLE,
ALIGN_RIGHT,
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
DEFAULT_FONTSTYLE,
DEFAULT_TEXT_DIRECTION,
DIALECT_STRICTHTML,
FONT_BOLD,
FONT_ITALIC,
FONT_STRIKETHROUGH,
FONT_UNDERLINE,
LINE_HEIGHT,
NONE,
STYLE_ALIGN,
STYLE_FONTCOLOR,
STYLE_FONTFAMILY,
STYLE_FONTSIZE,
STYLE_HORIZONTAL,
STYLE_LABEL_BACKGROUNDCOLOR,
STYLE_LABEL_BORDERCOLOR,
STYLE_LABEL_POSITION,
STYLE_SPACING,
STYLE_SPACING_BOTTOM,
STYLE_SPACING_LEFT,
STYLE_SPACING_RIGHT,
STYLE_SPACING_TOP,
STYLE_TEXT_DIRECTION,
STYLE_TEXT_OPACITY,
STYLE_VERTICAL_ALIGN,
STYLE_VERTICAL_LABEL_POSITION,
TEXT_DIRECTION_AUTO,
TEXT_DIRECTION_LTR,
TEXT_DIRECTION_RTL,
WORD_WRAP,
} from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
import mxPoint from '../util/datatypes/mxPoint';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
import mxShape from './mxShape';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxCellState from '../view/cell/mxCellState';
import { htmlEntities, replaceTrailingNewlines, trim } from '../util/mxStringUtils';
import {
htmlEntities,
replaceTrailingNewlines,
trim,
} from '../util/mxStringUtils';
import { isNode } from '../util/mxDomUtils';
/**
@ -31,28 +73,28 @@ class mxText extends mxShape {
constructor(
value: string,
bounds: mxRectangle,
align: string=mxConstants.ALIGN_CENTER,
valign: string | null=mxConstants.ALIGN_MIDDLE,
color: string='black',
family: string=mxConstants.DEFAULT_FONTFAMILY,
size: number=mxConstants.DEFAULT_FONTSIZE,
fontStyle: number=mxConstants.DEFAULT_FONTSTYLE,
spacing: number=2,
spacingTop: number=0,
spacingRight: number=0,
spacingBottom: number=0,
spacingLeft: number=0,
horizontal: boolean=true,
background: string | null=null,
border: string | null=null,
wrap: boolean=false,
clipped: boolean=false,
overflow: string='visible',
labelPadding: number=0,
textDirection: string=mxConstants.DEFAULT_TEXT_DIRECTION
align: string = ALIGN_CENTER,
valign: string | null = ALIGN_MIDDLE,
color: string = 'black',
family: string = DEFAULT_FONTFAMILY,
size: number = DEFAULT_FONTSIZE,
fontStyle: number = DEFAULT_FONTSTYLE,
spacing: number = 2,
spacingTop: number = 0,
spacingRight: number = 0,
spacingBottom: number = 0,
spacingLeft: number = 0,
horizontal: boolean = true,
background: string | null = null,
border: string | null = null,
wrap: boolean = false,
clipped: boolean = false,
overflow: string = 'visible',
labelPadding: number = 0,
textDirection: string = DEFAULT_TEXT_DIRECTION
) {
super();
valign = valign != null ? valign : mxConstants.ALIGN_MIDDLE;
valign = valign != null ? valign : ALIGN_MIDDLE;
this.value = value;
this.bounds = bounds;
@ -63,10 +105,14 @@ class mxText extends mxShape {
this.size = size;
this.fontStyle = fontStyle;
this.spacing = parseInt(String(spacing || 2));
this.spacingTop = parseInt(String(spacing || 2)) + parseInt(String(spacingTop || 0));
this.spacingRight = parseInt(String(spacing || 2)) + parseInt(String(spacingRight || 0));
this.spacingBottom = parseInt(String(spacing || 2)) + parseInt(String(spacingBottom || 0));
this.spacingLeft = parseInt(String(spacing || 2)) + parseInt(String(spacingLeft || 0));
this.spacingTop =
parseInt(String(spacing || 2)) + parseInt(String(spacingTop || 0));
this.spacingRight =
parseInt(String(spacing || 2)) + parseInt(String(spacingRight || 0));
this.spacingBottom =
parseInt(String(spacing || 2)) + parseInt(String(spacingBottom || 0));
this.spacingLeft =
parseInt(String(spacing || 2)) + parseInt(String(spacingLeft || 0));
this.horizontal = horizontal;
this.background = background;
this.border = border;
@ -82,29 +128,29 @@ class mxText extends mxShape {
// TODO: Document me!
value: string | HTMLElement | SVGGElement | null;
bounds: mxRectangle;
align: string=mxConstants.ALIGN_CENTER;
valign: string=mxConstants.ALIGN_MIDDLE;
color: string='black';
family: string=mxConstants.DEFAULT_FONTFAMILY;
size: number=mxConstants.DEFAULT_FONTSIZE;
fontStyle: number=mxConstants.DEFAULT_FONTSTYLE;
spacing: number=2;
spacingTop: number=0;
spacingRight: number=0;
spacingBottom: number=0;
spacingLeft: number=0;
horizontal: boolean=true;
background: string | null=null;
border: string | null=null;
wrap: boolean=false;
clipped: boolean=false;
overflow: string='visible';
labelPadding: number=0;
textDirection: string=mxConstants.DEFAULT_TEXT_DIRECTION;
margin: mxPoint | null=null;
unrotatedBoundingBox: mxRectangle | null=null;
flipH: boolean=false;
flipV: boolean=false;
align: string = ALIGN_CENTER;
valign: string = ALIGN_MIDDLE;
color: string = 'black';
family: string = DEFAULT_FONTFAMILY;
size: number = DEFAULT_FONTSIZE;
fontStyle: number = DEFAULT_FONTSTYLE;
spacing: number = 2;
spacingTop: number = 0;
spacingRight: number = 0;
spacingBottom: number = 0;
spacingLeft: number = 0;
horizontal: boolean = true;
background: string | null = null;
border: string | null = null;
wrap: boolean = false;
clipped: boolean = false;
overflow: string = 'visible';
labelPadding: number = 0;
textDirection: string = DEFAULT_TEXT_DIRECTION;
margin: mxPoint | null = null;
unrotatedBoundingBox: mxRectangle | null = null;
flipH: boolean = false;
flipV: boolean = false;
/**
* Variable: baseSpacingTop
@ -257,8 +303,7 @@ class mxText extends mxShape {
} else {
// Checks if text contains HTML markup
const realHtml =
isNode(this.value) ||
this.dialect === mxConstants.DIALECT_STRICTHTML;
isNode(this.value) || this.dialect === DIALECT_STRICTHTML;
// Always renders labels as HTML in VML
const fmt = realHtml ? 'html' : '';
@ -281,14 +326,11 @@ class mxText extends mxShape {
let dir: string | null = this.textDirection;
if (dir === mxConstants.TEXT_DIRECTION_AUTO && !realHtml) {
if (dir === TEXT_DIRECTION_AUTO && !realHtml) {
dir = this.getAutoDirection();
}
if (
dir !== mxConstants.TEXT_DIRECTION_LTR &&
dir !== mxConstants.TEXT_DIRECTION_RTL
) {
if (dir !== TEXT_DIRECTION_LTR && dir !== TEXT_DIRECTION_RTL) {
dir = null;
}
@ -322,8 +364,7 @@ class mxText extends mxShape {
this.checkBounds() &&
this.cacheEnabled &&
this.lastValue === this.value &&
(isNode(this.value) ||
this.dialect === mxConstants.DIALECT_STRICTHTML)
(isNode(this.value) || this.dialect === DIALECT_STRICTHTML)
) {
// @ts-ignore
if (this.node.nodeName === 'DIV') {
@ -342,10 +383,7 @@ class mxText extends mxShape {
} else {
super.redraw();
if (
isNode(this.value) ||
this.dialect === mxConstants.DIALECT_STRICTHTML
) {
if (isNode(this.value) || this.dialect === DIALECT_STRICTHTML) {
this.lastValue = this.value;
} else {
this.lastValue = null;
@ -363,11 +401,11 @@ class mxText extends mxShape {
super.resetStyles();
this.color = 'black';
this.align = mxConstants.ALIGN_CENTER;
this.valign = mxConstants.ALIGN_MIDDLE;
this.family = mxConstants.DEFAULT_FONTFAMILY;
this.size = mxConstants.DEFAULT_FONTSIZE;
this.fontStyle = mxConstants.DEFAULT_FONTSTYLE;
this.align = ALIGN_CENTER;
this.valign = ALIGN_MIDDLE;
this.family = DEFAULT_FONTFAMILY;
this.size = DEFAULT_FONTSIZE;
this.fontStyle = DEFAULT_FONTSTYLE;
this.spacing = 2;
this.spacingTop = 2;
this.spacingRight = 2;
@ -376,7 +414,7 @@ class mxText extends mxShape {
this.horizontal = true;
this.background = null;
this.border = null;
this.textDirection = mxConstants.DEFAULT_TEXT_DIRECTION;
this.textDirection = DEFAULT_TEXT_DIRECTION;
this.margin = null;
}
@ -396,47 +434,27 @@ class mxText extends mxShape {
if (this.style != null) {
this.fontStyle = this.style.fontStyle || this.fontStyle;
this.family = mxUtils.getValue(
this.style,
mxConstants.STYLE_FONTFAMILY,
this.family
);
this.size = mxUtils.getValue(
this.style,
mxConstants.STYLE_FONTSIZE,
this.size
);
this.color = mxUtils.getValue(
this.style,
mxConstants.STYLE_FONTCOLOR,
this.color
);
this.align = mxUtils.getValue(
this.style,
mxConstants.STYLE_ALIGN,
this.align
);
this.family = mxUtils.getValue(this.style, STYLE_FONTFAMILY, this.family);
this.size = mxUtils.getValue(this.style, STYLE_FONTSIZE, this.size);
this.color = mxUtils.getValue(this.style, STYLE_FONTCOLOR, this.color);
this.align = mxUtils.getValue(this.style, STYLE_ALIGN, this.align);
this.valign = mxUtils.getValue(
this.style,
mxConstants.STYLE_VERTICAL_ALIGN,
STYLE_VERTICAL_ALIGN,
this.valign
);
this.spacing = parseInt(
mxUtils.getValue(this.style, mxConstants.STYLE_SPACING, this.spacing)
mxUtils.getValue(this.style, STYLE_SPACING, this.spacing)
);
this.spacingTop =
parseInt(
mxUtils.getValue(
this.style,
mxConstants.STYLE_SPACING_TOP,
this.spacingTop - old
)
mxUtils.getValue(this.style, STYLE_SPACING_TOP, this.spacingTop - old)
) + this.spacing;
this.spacingRight =
parseInt(
mxUtils.getValue(
this.style,
mxConstants.STYLE_SPACING_RIGHT,
STYLE_SPACING_RIGHT,
this.spacingRight - old
)
) + this.spacing;
@ -444,7 +462,7 @@ class mxText extends mxShape {
parseInt(
mxUtils.getValue(
this.style,
mxConstants.STYLE_SPACING_BOTTOM,
STYLE_SPACING_BOTTOM,
this.spacingBottom - old
)
) + this.spacing;
@ -452,35 +470,31 @@ class mxText extends mxShape {
parseInt(
mxUtils.getValue(
this.style,
mxConstants.STYLE_SPACING_LEFT,
STYLE_SPACING_LEFT,
this.spacingLeft - old
)
) + this.spacing;
this.horizontal = mxUtils.getValue(
this.style,
mxConstants.STYLE_HORIZONTAL,
STYLE_HORIZONTAL,
this.horizontal
);
this.background = mxUtils.getValue(
this.style,
mxConstants.STYLE_LABEL_BACKGROUNDCOLOR,
STYLE_LABEL_BACKGROUNDCOLOR,
this.background
);
this.border = mxUtils.getValue(
this.style,
mxConstants.STYLE_LABEL_BORDERCOLOR,
STYLE_LABEL_BORDERCOLOR,
this.border
);
this.textDirection = mxUtils.getValue(
this.style,
mxConstants.STYLE_TEXT_DIRECTION,
mxConstants.DEFAULT_TEXT_DIRECTION
);
this.opacity = mxUtils.getValue(
this.style,
mxConstants.STYLE_TEXT_OPACITY,
100
STYLE_TEXT_DIRECTION,
DEFAULT_TEXT_DIRECTION
);
this.opacity = mxUtils.getValue(this.style, STYLE_TEXT_OPACITY, 100);
this.updateMargin();
}
@ -505,8 +519,8 @@ class mxText extends mxShape {
// Returns the direction defined by the character
return tmp != null && tmp.length > 0 && tmp[0] > 'z'
? mxConstants.TEXT_DIRECTION_RTL
: mxConstants.TEXT_DIRECTION_LTR;
? TEXT_DIRECTION_RTL
: TEXT_DIRECTION_LTR;
}
/**
@ -544,18 +558,14 @@ class mxText extends mxShape {
const h =
this.style != null
? mxUtils.getValue(
this.style,
mxConstants.STYLE_LABEL_POSITION,
mxConstants.ALIGN_CENTER
)
? mxUtils.getValue(this.style, STYLE_LABEL_POSITION, ALIGN_CENTER)
: null;
const v =
this.style != null
? mxUtils.getValue(
this.style,
mxConstants.STYLE_VERTICAL_LABEL_POSITION,
mxConstants.ALIGN_MIDDLE
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
)
: null;
@ -565,8 +575,8 @@ class mxText extends mxShape {
this.overflow !== 'fill' &&
(!this.clipped ||
!this.ignoreClippedStringSize ||
h !== mxConstants.ALIGN_CENTER ||
v !== mxConstants.ALIGN_MIDDLE)
h !== ALIGN_CENTER ||
v !== ALIGN_MIDDLE)
) {
let ow = null;
let oh = null;
@ -594,10 +604,7 @@ class mxText extends mxShape {
const b = node.getBBox();
// Workaround for bounding box of empty string
if (
typeof this.value === 'string' &&
trim(this.value)?.length == 0
) {
if (typeof this.value === 'string' && trim(this.value)?.length == 0) {
this.boundingBox = null;
} else if (b.width === 0 && b.height === 0) {
this.boundingBox = null;
@ -626,7 +633,8 @@ class mxText extends mxShape {
if (rot !== 0) {
// Accounts for pre-rotated x and y
const bbox = <mxRectangle>mxUtils.getBoundingBox(
const bbox = <mxRectangle>(
mxUtils.getBoundingBox(
new mxRectangle(
margin.x * this.boundingBox.width,
margin.y * this.boundingBox.height,
@ -635,6 +643,7 @@ class mxText extends mxShape {
),
rot,
new mxPoint(0, 0)
)
);
this.unrotatedBoundingBox = mxRectangle.fromRectangle(this.boundingBox);
@ -699,11 +708,13 @@ class mxText extends mxShape {
* Sets the state of the canvas for drawing the shape.
*/
// configureCanvas(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
configureCanvas(c: mxSvgCanvas2D,
configureCanvas(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number) {
h: number
) {
super.configureCanvas(c, x, y, w, h);
c.setFontColor(this.color);
@ -722,7 +733,7 @@ class mxText extends mxShape {
getHtmlValue() {
let val = this.value as string;
if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
if (this.dialect !== DIALECT_STRICTHTML) {
// @ts-ignore
val = htmlEntities(val, false);
}
@ -740,9 +751,9 @@ class mxText extends mxShape {
* Private helper function to create SVG elements
*/
getTextCss() {
const lh = mxConstants.ABSOLUTE_LINE_HEIGHT
? `${this.size * mxConstants.LINE_HEIGHT}px`
: mxConstants.LINE_HEIGHT;
const lh = ABSOLUTE_LINE_HEIGHT
? `${this.size * LINE_HEIGHT}px`
: LINE_HEIGHT;
let css =
`display: inline-block; font-size: ${this.size}px; ` +
@ -752,30 +763,21 @@ class mxText extends mxShape {
this.pointerEvents ? 'all' : 'none'
}; `;
if ((this.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
if ((this.fontStyle & FONT_BOLD) === FONT_BOLD) {
css += 'font-weight: bold; ';
}
if (
(this.fontStyle & mxConstants.FONT_ITALIC) ===
mxConstants.FONT_ITALIC
) {
if ((this.fontStyle & FONT_ITALIC) === FONT_ITALIC) {
css += 'font-style: italic; ';
}
const deco = [];
if (
(this.fontStyle & mxConstants.FONT_UNDERLINE) ===
mxConstants.FONT_UNDERLINE
) {
if ((this.fontStyle & FONT_UNDERLINE) === FONT_UNDERLINE) {
deco.push('underline');
}
if (
(this.fontStyle & mxConstants.FONT_STRIKETHROUGH) ===
mxConstants.FONT_STRIKETHROUGH
) {
if ((this.fontStyle & FONT_STRIKETHROUGH) === FONT_STRIKETHROUGH) {
deco.push('line-through');
}
@ -853,8 +855,8 @@ class mxText extends mxShape {
node.setAttribute('style', flex);
const html = isNode(this.value)
// @ts-ignore
? this.value.outerHTML
? // @ts-ignore
this.value.outerHTML
: this.getHtmlValue();
if (node.firstChild == null) {
@ -882,7 +884,7 @@ class mxText extends mxShape {
} else {
let val = this.value as string;
if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
if (this.dialect !== DIALECT_STRICTHTML) {
// LATER: Can be cached in updateValue
val = htmlEntities(<string>val, false);
}
@ -911,7 +913,7 @@ class mxText extends mxShape {
} else {
let val = this.value as string;
if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
if (this.dialect !== DIALECT_STRICTHTML) {
val = htmlEntities(<string>val, false);
}
@ -919,13 +921,11 @@ class mxText extends mxShape {
val = replaceTrailingNewlines(val, '<div><br></div>');
val = this.replaceLinefeeds ? val.replace(/\n/g, '<br/>') : val;
const bg =
this.background != null && this.background !== mxConstants.NONE
this.background != null && this.background !== NONE
? this.background
: null;
const bd =
this.border != null && this.border !== mxConstants.NONE
? this.border
: null;
this.border != null && this.border !== NONE ? this.border : null;
if (this.overflow === 'fill' || this.overflow === 'width') {
if (bg != null) {
@ -949,9 +949,9 @@ class mxText extends mxShape {
// Wrapper DIV for background, zoom needed for inline in quirks
// and to measure wrapped font sizes in all browsers
// FIXME: Background size in quirks mode for wrapped text
const lh = mxConstants.ABSOLUTE_LINE_HEIGHT
? `${this.size * mxConstants.LINE_HEIGHT}px`
: mxConstants.LINE_HEIGHT;
const lh = ABSOLUTE_LINE_HEIGHT
? `${this.size * LINE_HEIGHT}px`
: LINE_HEIGHT;
val =
`<div style="zoom:1;${css}display:inline-block;_display:inline;text-decoration:inherit;` +
`padding-bottom:1px;padding-right:1px;line-height:${lh}">${val}</div>`;
@ -966,16 +966,13 @@ class mxText extends mxShape {
let dir = this.textDirection;
if (
dir === mxConstants.TEXT_DIRECTION_AUTO &&
this.dialect !== mxConstants.DIALECT_STRICTHTML
dir === TEXT_DIRECTION_AUTO &&
this.dialect !== DIALECT_STRICTHTML
) {
dir = this.getAutoDirection();
}
if (
dir === mxConstants.TEXT_DIRECTION_LTR ||
dir === mxConstants.TEXT_DIRECTION_RTL
) {
if (dir === TEXT_DIRECTION_LTR || dir === TEXT_DIRECTION_RTL) {
divs[divs.length - 1].setAttribute('dir', dir);
} else {
divs[divs.length - 1].removeAttribute('dir');
@ -994,24 +991,21 @@ class mxText extends mxShape {
const { style } = node;
// @ts-ignore
style.lineHeight = mxConstants.ABSOLUTE_LINE_HEIGHT
? `${this.size * mxConstants.LINE_HEIGHT}px`
: mxConstants.LINE_HEIGHT;
style.lineHeight = ABSOLUTE_LINE_HEIGHT
? `${this.size * LINE_HEIGHT}px`
: LINE_HEIGHT;
style.fontSize = `${this.size}px`;
style.fontFamily = this.family;
style.verticalAlign = 'top';
style.color = this.color;
if ((this.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
if ((this.fontStyle & FONT_BOLD) === FONT_BOLD) {
style.fontWeight = 'bold';
} else {
style.fontWeight = '';
}
if (
(this.fontStyle & mxConstants.FONT_ITALIC) ===
mxConstants.FONT_ITALIC
) {
if ((this.fontStyle & FONT_ITALIC) === FONT_ITALIC) {
style.fontStyle = 'italic';
} else {
style.fontStyle = '';
@ -1019,25 +1013,19 @@ class mxText extends mxShape {
const txtDecor = [];
if (
(this.fontStyle & mxConstants.FONT_UNDERLINE) ===
mxConstants.FONT_UNDERLINE
) {
if ((this.fontStyle & FONT_UNDERLINE) === FONT_UNDERLINE) {
txtDecor.push('underline');
}
if (
(this.fontStyle & mxConstants.FONT_STRIKETHROUGH) ===
mxConstants.FONT_STRIKETHROUGH
) {
if ((this.fontStyle & FONT_STRIKETHROUGH) === FONT_STRIKETHROUGH) {
txtDecor.push('line-through');
}
style.textDecoration = txtDecor.join(' ');
if (this.align === mxConstants.ALIGN_CENTER) {
if (this.align === ALIGN_CENTER) {
style.textAlign = 'center';
} else if (this.align === mxConstants.ALIGN_RIGHT) {
} else if (this.align === ALIGN_RIGHT) {
style.textAlign = 'right';
} else {
style.textAlign = 'left';
@ -1073,7 +1061,7 @@ class mxText extends mxShape {
}
if (this.wrap && w > 0) {
style.wordWrap = mxConstants.WORD_WRAP;
style.wordWrap = WORD_WRAP;
style.whiteSpace = 'normal';
style.width = `${w}px`;
@ -1137,17 +1125,17 @@ class mxText extends mxShape {
let dx = 0;
let dy = 0;
if (this.align === mxConstants.ALIGN_CENTER) {
if (this.align === ALIGN_CENTER) {
dx = (this.spacingLeft - this.spacingRight) / 2;
} else if (this.align === mxConstants.ALIGN_RIGHT) {
} else if (this.align === ALIGN_RIGHT) {
dx = -this.spacingRight - this.baseSpacingRight;
} else {
dx = this.spacingLeft + this.baseSpacingLeft;
}
if (this.valign === mxConstants.ALIGN_MIDDLE) {
if (this.valign === ALIGN_MIDDLE) {
dy = (this.spacingTop - this.spacingBottom) / 2;
} else if (this.valign === mxConstants.ALIGN_BOTTOM) {
} else if (this.valign === ALIGN_BOTTOM) {
dy = -this.spacingBottom - this.baseSpacingBottom;
} else {
dy = this.spacingTop + this.baseSpacingTop;

8
packages/core/src/shape/mxTriangle.ts
View File

@ -8,7 +8,7 @@
import mxPoint from '../util/datatypes/mxPoint';
import mxActor from './mxActor';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
import { LINE_ARCSIZE, STYLE_ARCSIZE } from '../util/mxConstants';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
/**
@ -47,11 +47,7 @@ class mxTriangle extends mxActor {
h: number
): void {
const arcSize: number =
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.LINE_ARCSIZE
) / 2;
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
this.addPoints(
c,

4
packages/core/src/shape/node/mxCylinder.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import { STYLE_BACKGROUND_OUTLINE } from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
@ -62,7 +62,7 @@ class mxCylinder extends mxShape {
if (
!this.outline ||
this.style == null ||
mxUtils.getValue(this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0
mxUtils.getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) == 0
) {
c.setShadow(false);
c.begin();

6
packages/core/src/shape/node/mxDoubleEllipse.ts
View File

@ -7,7 +7,7 @@
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxShape from '../mxShape';
import mxConstants from '../../util/mxConstants';
import { STYLE_MARGIN } from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
@ -84,7 +84,7 @@ class mxDoubleEllipse extends mxShape {
if (!this.outline) {
const margin = mxUtils.getValue(
this.style,
mxConstants.STYLE_MARGIN,
STYLE_MARGIN,
Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5))
);
x += margin;
@ -109,7 +109,7 @@ class mxDoubleEllipse extends mxShape {
const margin =
mxUtils.getValue(
this.style,
mxConstants.STYLE_MARGIN,
STYLE_MARGIN,
Math.min(
3 + this.strokewidth,
Math.min(rect.width / 5 / this.scale, rect.height / 5 / this.scale)

8
packages/core/src/shape/node/mxHexagon.ts
View File

@ -7,7 +7,7 @@
import mxActor from '../mxActor';
import mxPoint from '../../util/datatypes/mxPoint';
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import { LINE_ARCSIZE, STYLE_ARCSIZE } from '../../util/mxConstants';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
/**
@ -31,11 +31,7 @@ class mxHexagon extends mxActor {
// redrawPath(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) {
const arcSize =
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.LINE_ARCSIZE
) / 2;
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
this.addPoints(
c,
[

26
packages/core/src/shape/node/mxImageShape.ts
View File

@ -6,7 +6,11 @@
*/
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import {
STYLE_IMAGE_ASPECT,
STYLE_IMAGE_BACKGROUND,
STYLE_IMAGE_BORDER,
} from '../../util/mxConstants';
import mxRectangleShape from './mxRectangleShape';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxCellState from '../../view/cell/mxCellState';
@ -83,7 +87,7 @@ class mxImageShape extends mxRectangleShape {
if (this.style != null) {
this.preserveImageAspect =
mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_ASPECT, 1) == 1;
mxUtils.getNumber(this.style, STYLE_IMAGE_ASPECT, 1) == 1;
// Legacy support for imageFlipH/V
this.flipH =
@ -140,16 +144,8 @@ class mxImageShape extends mxRectangleShape {
h: number
) {
if (this.image != null) {
const fill = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_BACKGROUND,
null
);
let stroke = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_BORDER,
null
);
const fill = mxUtils.getValue(this.style, STYLE_IMAGE_BACKGROUND, null);
let stroke = mxUtils.getValue(this.style, STYLE_IMAGE_BORDER, null);
if (fill != null) {
// Stroke rendering required for shadow
@ -162,11 +158,7 @@ class mxImageShape extends mxRectangleShape {
// FlipH/V are implicit via mxShape.updateTransform
c.image(x, y, w, h, this.image, this.preserveImageAspect, false, false);
stroke = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_BORDER,
null
);
stroke = mxUtils.getValue(this.style, STYLE_IMAGE_BORDER, null);
if (stroke != null) {
c.setShadow(false);

42
packages/core/src/shape/node/mxRectangleShape.ts
View File

@ -5,7 +5,14 @@
* Type definitions from the typed-mxgraph project
*/
import mxConstants from '../../util/mxConstants';
import {
LINE_ARCSIZE,
NONE,
RECTANGLE_ROUNDING_FACTOR,
STYLE_ABSOLUTE_ARCSIZE,
STYLE_ARCSIZE,
STYLE_POINTER_EVENTS,
} from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxShape from '../mxShape';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
@ -43,16 +50,14 @@ class mxRectangleShape extends mxShape {
let events = true;
if (this.style != null) {
events =
mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') ==
'1';
events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
}
return (
!this.isRounded &&
!this.glass &&
this.rotation === 0 &&
(events || (this.fill != null && this.fill !== mxConstants.NONE))
(events || (this.fill != null && this.fill !== NONE))
);
}
@ -70,44 +75,35 @@ class mxRectangleShape extends mxShape {
let events = true;
if (this.style != null) {
events =
mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') ==
'1';
events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
}
if (
events ||
(this.fill != null && this.fill !== mxConstants.NONE) ||
(this.stroke != null && this.stroke !== mxConstants.NONE)
(this.fill != null && this.fill !== NONE) ||
(this.stroke != null && this.stroke !== NONE)
) {
if (!events && (this.fill == null || this.fill === mxConstants.NONE)) {
if (!events && (this.fill == null || this.fill === NONE)) {
c.pointerEvents = false;
}
if (this.isRounded) {
let r = 0;
if (
mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) ==
'1'
) {
if (mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0) == '1') {
r = Math.min(
w / 2,
Math.min(
h / 2,
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.LINE_ARCSIZE
) / 2
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
)
);
} else {
const f =
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100
STYLE_ARCSIZE,
RECTANGLE_ROUNDING_FACTOR * 100
) / 100;
r = Math.min(w * f, h * f);
}
@ -150,7 +146,7 @@ class mxRectangleShape extends mxShape {
this.glass &&
!this.outline &&
this.fill != null &&
this.fill !== mxConstants.NONE
this.fill !== NONE
) {
this.paintGlassEffect(
c,

8
packages/core/src/shape/node/mxRhombus.ts
View File

@ -7,7 +7,7 @@
import mxShape from '../mxShape';
import mxPoint from '../../util/datatypes/mxPoint';
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import { LINE_ARCSIZE, STYLE_ARCSIZE } from '../../util/mxConstants';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
@ -59,11 +59,7 @@ class mxRhombus extends mxShape {
const hh = h / 2;
const arcSize =
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.LINE_ARCSIZE
) / 2;
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
c.begin();
this.addPoints(
c,

52
packages/core/src/shape/node/mxStencil.js
View File

@ -10,7 +10,19 @@ import mxRectangle from '../../util/datatypes/mxRectangle';
import mxShape from '../mxShape';
import mxResources from '../../util/mxResources';
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import {
DIRECTION_NORTH,
DIRECTION_SOUTH,
NODETYPE_ELEMENT,
NONE,
RECTANGLE_ROUNDING_FACTOR,
STYLE_BACKGROUND_OUTLINE,
STYLE_DIRECTION,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_POINTER_EVENTS,
STYLE_STROKEWIDTH,
} from '../../util/mxConstants';
import mxStencilRegistry from './mxStencilRegistry';
import { getChildNodes, getTextContent } from '../../util/mxDomUtils';
@ -236,28 +248,21 @@ class mxStencil extends mxShape {
// (start, segment, end blocks), pluggable markers, how to implement
// swimlanes (title area) with this API, add icon, horizontal/vertical
// label, indicator for all shapes, rotation
const direction = mxUtils.getValue(
shape.style,
mxConstants.STYLE_DIRECTION,
null
);
const direction = mxUtils.getValue(shape.style, STYLE_DIRECTION, null);
const aspect = this.computeAspect(shape.style, x, y, w, h, direction);
const minScale = Math.min(aspect.width, aspect.height);
const sw =
this.strokewidth == 'inherit'
? Number(
mxUtils.getNumber(shape.style, mxConstants.STYLE_STROKEWIDTH, 1)
)
? Number(mxUtils.getNumber(shape.style, STYLE_STROKEWIDTH, 1))
: Number(this.strokewidth) * minScale;
canvas.setStrokeWidth(sw);
// Draws a transparent rectangle for catching events
if (
shape.style != null &&
mxUtils.getValue(shape.style, mxConstants.STYLE_POINTER_EVENTS, '0') ==
'1'
mxUtils.getValue(shape.style, STYLE_POINTER_EVENTS, '0') == '1'
) {
canvas.setStrokeColor(mxConstants.NONE);
canvas.setStrokeColor(NONE);
canvas.rect(x, y, w, h);
canvas.stroke();
canvas.setStrokeColor(shape.stroke);
@ -287,11 +292,7 @@ class mxStencil extends mxShape {
true,
!shape.outline ||
shape.style == null ||
mxUtils.getValue(
shape.style,
mxConstants.STYLE_BACKGROUND_OUTLINE,
0
) == 0
mxUtils.getValue(shape.style, STYLE_BACKGROUND_OUTLINE, 0) == 0
);
// Restores stack for unequal count of save/restore calls
@ -310,7 +311,7 @@ class mxStencil extends mxShape {
let tmp = node.firstChild;
while (tmp != null) {
if (tmp.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (tmp.nodeType === NODETYPE_ELEMENT) {
this.drawNode(canvas, shape, tmp, aspect, disableShadow, paint);
}
@ -340,8 +341,7 @@ class mxStencil extends mxShape {
let sy = h / this.h0;
const inverse =
direction === mxConstants.DIRECTION_NORTH ||
direction === mxConstants.DIRECTION_SOUTH;
direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH;
if (inverse) {
sy = w / this.h0;
@ -404,7 +404,7 @@ class mxStencil extends mxShape {
let childNode = node.firstChild;
while (childNode != null) {
if (childNode.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (childNode.nodeType === NODETYPE_ELEMENT) {
const childName = childNode.nodeName;
if (childName === 'move' || childName === 'line') {
@ -452,7 +452,7 @@ class mxStencil extends mxShape {
let childNode = node.firstChild;
while (childNode != null) {
if (childNode.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (childNode.nodeType === NODETYPE_ELEMENT) {
this.drawNode(
canvas,
shape,
@ -515,7 +515,7 @@ class mxStencil extends mxShape {
let arcsize = Number(node.getAttribute('arcsize'));
if (arcsize === 0) {
arcsize = mxConstants.RECTANGLE_ROUNDING_FACTOR * 100;
arcsize = RECTANGLE_ROUNDING_FACTOR * 100;
}
const w = Number(node.getAttribute('w')) * sx;
@ -562,10 +562,8 @@ class mxStencil extends mxShape {
const dr = shape.rotation;
// Depends on flipping
const flipH =
mxUtils.getValue(shape.style, mxConstants.STYLE_FLIPH, 0) == 1;
const flipV =
mxUtils.getValue(shape.style, mxConstants.STYLE_FLIPV, 0) == 1;
const flipH = mxUtils.getValue(shape.style, STYLE_FLIPH, 0) == 1;
const flipV = mxUtils.getValue(shape.style, STYLE_FLIPV, 0) == 1;
if (flipH && flipV) {
rotation -= dr;

34
packages/core/src/util/canvas/mxAbstractCanvas2D.js
View File

@ -5,7 +5,15 @@
* Type definitions from the typed-mxgraph project
*/
import mxUtils from '../mxUtils';
import mxConstants from '../mxConstants';
import {
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
NONE,
SHADOWCOLOR,
SHADOW_OFFSET_X,
SHADOW_OFFSET_Y,
SHADOW_OPACITY,
} from '../mxConstants';
import mxUrlConverter from '../network/mxUrlConverter';
import mxPoint from '../datatypes/mxPoint';
@ -162,14 +170,14 @@ class mxAbstractCanvas2D {
fontColor: '#000000',
fontBackgroundColor: null,
fontBorderColor: null,
fontSize: mxConstants.DEFAULT_FONTSIZE,
fontFamily: mxConstants.DEFAULT_FONTFAMILY,
fontSize: DEFAULT_FONTSIZE,
fontFamily: DEFAULT_FONTFAMILY,
fontStyle: 0,
shadow: false,
shadowColor: mxConstants.SHADOWCOLOR,
shadowAlpha: mxConstants.SHADOW_OPACITY,
shadowDx: mxConstants.SHADOW_OFFSET_X,
shadowDy: mxConstants.SHADOW_OFFSET_Y,
shadowColor: SHADOWCOLOR,
shadowAlpha: SHADOW_OPACITY,
shadowDx: SHADOW_OFFSET_X,
shadowDy: SHADOW_OFFSET_Y,
rotation: 0,
rotationCx: 0,
rotationCy: 0,
@ -316,7 +324,7 @@ class mxAbstractCanvas2D {
* Sets the current fill color.
*/
setFillColor(value) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -344,7 +352,7 @@ class mxAbstractCanvas2D {
* Sets the current stroke color.
*/
setStrokeColor(value) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -412,7 +420,7 @@ class mxAbstractCanvas2D {
* Sets the current font color.
*/
setFontColor(value) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -425,7 +433,7 @@ class mxAbstractCanvas2D {
* Sets the current font background color.
*/
setFontBackgroundColor(value) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -438,7 +446,7 @@ class mxAbstractCanvas2D {
* Sets the current font border color.
*/
setFontBorderColor(value) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -491,7 +499,7 @@ class mxAbstractCanvas2D {
* Enables or disables and configures the current shadow.
*/
setShadowColor(value) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}

176
packages/core/src/util/canvas/mxSvgCanvas2D.js
View File

@ -7,10 +7,32 @@
import mxUtils from '../mxUtils';
import mxClient from '../../mxClient';
import mxConstants from '../mxConstants';
import {
ABSOLUTE_LINE_HEIGHT,
ALIGN_BOTTOM,
ALIGN_CENTER,
ALIGN_LEFT,
ALIGN_MIDDLE,
ALIGN_RIGHT,
ALIGN_TOP,
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
DIRECTION_EAST,
DIRECTION_NORTH,
DIRECTION_SOUTH,
DIRECTION_WEST,
FONT_BOLD,
FONT_ITALIC,
FONT_STRIKETHROUGH,
FONT_UNDERLINE,
LINE_HEIGHT,
NS_SVG,
NS_XLINK,
WORD_WRAP,
} from '../mxConstants';
import mxRectangle from '../datatypes/mxRectangle';
import mxAbstractCanvas2D from './mxAbstractCanvas2D';
import {parseXml} from '../mxXmlUtils';
import { parseXml } from '../mxXmlUtils';
import { importNodeImplementation, isNode, write } from '../mxDomUtils';
import { htmlEntities, trim } from '../mxStringUtils';
@ -255,11 +277,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
callback
) => {
let item = `box-sizing: border-box; font-size: 0; text-align: ${
align === mxConstants.ALIGN_LEFT
? 'left'
: align === mxConstants.ALIGN_RIGHT
? 'right'
: 'center'
align === ALIGN_LEFT ? 'left' : align === ALIGN_RIGHT ? 'right' : 'center'
}; `;
const pt = mxUtils.getAlignmentAsPoint(align, valign);
let ofl = 'overflow: hidden; ';
@ -308,7 +326,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
if (wrap && w > 0) {
block += `white-space: normal; word-wrap: ${mxConstants.WORD_WRAP}; `;
block += `white-space: normal; word-wrap: ${WORD_WRAP}; `;
fw = `width: ${Math.round(w)}px; `;
if (ofl != '' && overflow !== 'fill') {
@ -369,7 +387,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
style.setAttribute('type', 'text/css');
write(
style,
`svg{font-family:${mxConstants.DEFAULT_FONTFAMILY};font-size:${mxConstants.DEFAULT_FONTSIZE};fill:none;stroke-miterlimit:10}`
`svg{font-family:${DEFAULT_FONTFAMILY};font-size:${DEFAULT_FONTSIZE};fill:none;stroke-miterlimit:10}`
);
return style;
@ -382,7 +400,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
createElement(tagName, namespace) {
if (this.root.ownerDocument.createElementNS != null) {
return this.root.ownerDocument.createElementNS(
namespace || mxConstants.NS_SVG,
namespace || NS_SVG,
tagName
);
}
@ -456,16 +474,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
const s = this.state;
if (text != null && s.fontSize > 0) {
const dy =
valign === mxConstants.ALIGN_TOP
? 1
: valign === mxConstants.ALIGN_BOTTOM
? 0
: 0.3;
const dy = valign === ALIGN_TOP ? 1 : valign === ALIGN_BOTTOM ? 0 : 0.3;
const anchor =
align === mxConstants.ALIGN_RIGHT
align === ALIGN_RIGHT
? 'end'
: align === mxConstants.ALIGN_LEFT
: align === ALIGN_LEFT
? 'start'
: 'middle';
@ -481,27 +494,21 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
alt.setAttribute('text-anchor', anchor);
}
if ((s.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
if ((s.fontStyle & FONT_BOLD) === FONT_BOLD) {
alt.setAttribute('font-weight', 'bold');
}
if ((s.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
if ((s.fontStyle & FONT_ITALIC) === FONT_ITALIC) {
alt.setAttribute('font-style', 'italic');
}
const txtDecor = [];
if (
(s.fontStyle & mxConstants.FONT_UNDERLINE) ===
mxConstants.FONT_UNDERLINE
) {
if ((s.fontStyle & FONT_UNDERLINE) === FONT_UNDERLINE) {
txtDecor.push('underline');
}
if (
(s.fontStyle & mxConstants.FONT_STRIKETHROUGH) ===
mxConstants.FONT_STRIKETHROUGH
) {
if ((s.fontStyle & FONT_STRIKETHROUGH) === FONT_STRIKETHROUGH) {
txtDecor.push('line-through');
}
@ -538,18 +545,18 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// Wrong gradient directions possible?
let dir = null;
if (direction == null || direction === mxConstants.DIRECTION_SOUTH) {
if (direction == null || direction === DIRECTION_SOUTH) {
dir = 's';
} else if (direction === mxConstants.DIRECTION_EAST) {
} else if (direction === DIRECTION_EAST) {
dir = 'e';
} else {
const tmp = start;
start = end;
end = tmp;
if (direction === mxConstants.DIRECTION_NORTH) {
if (direction === DIRECTION_NORTH) {
dir = 's';
} else if (direction === mxConstants.DIRECTION_WEST) {
} else if (direction === DIRECTION_WEST) {
dir = 'e';
}
}
@ -617,13 +624,13 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
gradient.setAttribute('x2', '0%');
gradient.setAttribute('y2', '0%');
if (direction == null || direction === mxConstants.DIRECTION_SOUTH) {
if (direction == null || direction === DIRECTION_SOUTH) {
gradient.setAttribute('y2', '100%');
} else if (direction === mxConstants.DIRECTION_EAST) {
} else if (direction === DIRECTION_EAST) {
gradient.setAttribute('x2', '100%');
} else if (direction === mxConstants.DIRECTION_NORTH) {
} else if (direction === DIRECTION_NORTH) {
gradient.setAttribute('y1', '100%');
} else if (direction === mxConstants.DIRECTION_WEST) {
} else if (direction === DIRECTION_WEST) {
gradient.setAttribute('x1', '100%');
}
@ -915,7 +922,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
if (node.setAttributeNS == null || this.root.ownerDocument !== document) {
node.setAttribute('xlink:href', link);
} else {
node.setAttributeNS(mxConstants.NS_XLINK, 'xlink:href', link);
node.setAttributeNS(NS_XLINK, 'xlink:href', link);
}
this.root.appendChild(node);
@ -1053,7 +1060,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
if (node.setAttributeNS == null) {
node.setAttribute('xlink:href', src);
} else {
node.setAttributeNS(mxConstants.NS_XLINK, 'xlink:href', src);
node.setAttributeNS(NS_XLINK, 'xlink:href', src);
}
if (!aspect) {
@ -1307,16 +1314,16 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
: null,
this.state.fontBorderColor != null ? this.state.fontBorderColor : null,
`display: flex; align-items: unsafe ${
valign === mxConstants.ALIGN_TOP
valign === ALIGN_TOP
? 'flex-start'
: valign === mxConstants.ALIGN_BOTTOM
: valign === ALIGN_BOTTOM
? 'flex-end'
: 'center'
}; ` +
`justify-content: unsafe ${
align === mxConstants.ALIGN_LEFT
align === ALIGN_LEFT
? 'flex-start'
: align === mxConstants.ALIGN_RIGHT
: align === ALIGN_RIGHT
? 'flex-end'
: 'center'
}; `,
@ -1390,9 +1397,9 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// getTextCss(): string;
getTextCss() {
const s = this.state;
const lh = mxConstants.ABSOLUTE_LINE_HEIGHT
? `${s.fontSize * mxConstants.LINE_HEIGHT}px`
: mxConstants.LINE_HEIGHT * this.lineHeightCorrection;
const lh = ABSOLUTE_LINE_HEIGHT
? `${s.fontSize * LINE_HEIGHT}px`
: LINE_HEIGHT * this.lineHeightCorrection;
let css =
`display: inline-block; font-size: ${s.fontSize}px; ` +
`font-family: ${s.fontFamily}; color: ${
@ -1401,27 +1408,21 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
this.pointerEvents ? this.pointerEventsValue : 'none'
}; `;
if ((s.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
if ((s.fontStyle & FONT_BOLD) === FONT_BOLD) {
css += 'font-weight: bold; ';
}
if ((s.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
if ((s.fontStyle & FONT_ITALIC) === FONT_ITALIC) {
css += 'font-style: italic; ';
}
const deco = [];
if (
(s.fontStyle & mxConstants.FONT_UNDERLINE) ===
mxConstants.FONT_UNDERLINE
) {
if ((s.fontStyle & FONT_UNDERLINE) === FONT_UNDERLINE) {
deco.push('underline');
}
if (
(s.fontStyle & mxConstants.FONT_STRIKETHROUGH) ===
mxConstants.FONT_STRIKETHROUGH
) {
if ((s.fontStyle & FONT_STRIKETHROUGH) === FONT_STRIKETHROUGH) {
deco.push('line-through');
}
@ -1585,16 +1586,16 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let cx = x;
let cy = y;
if (align === mxConstants.ALIGN_CENTER) {
if (align === ALIGN_CENTER) {
cx -= w / 2;
} else if (align === mxConstants.ALIGN_RIGHT) {
} else if (align === ALIGN_RIGHT) {
cx -= w;
}
if (overflow !== 'fill') {
if (valign === mxConstants.ALIGN_MIDDLE) {
if (valign === ALIGN_MIDDLE) {
cy -= h / 2;
} else if (valign === mxConstants.ALIGN_BOTTOM) {
} else if (valign === ALIGN_BOTTOM) {
cy -= h;
}
}
@ -1629,9 +1630,9 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// Default is left
const anchor =
align === mxConstants.ALIGN_RIGHT
align === ALIGN_RIGHT
? 'end'
: align === mxConstants.ALIGN_CENTER
: align === ALIGN_CENTER
? 'middle'
: 'start';
@ -1640,7 +1641,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
node.setAttribute('text-anchor', anchor);
}
if (!this.styleEnabled || size !== mxConstants.DEFAULT_FONTSIZE) {
if (!this.styleEnabled || size !== DEFAULT_FONTSIZE) {
node.setAttribute('font-size', `${size * s.scale}px`);
}
@ -1653,12 +1654,12 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
const lines = str.split('\n');
const lh = Math.round(size * mxConstants.LINE_HEIGHT);
const lh = Math.round(size * LINE_HEIGHT);
const textHeight = size + (lines.length - 1) * lh;
let cy = y + size - 1;
if (valign === mxConstants.ALIGN_MIDDLE) {
if (valign === ALIGN_MIDDLE) {
if (overflow === 'fill') {
cy -= h / 2;
} else {
@ -1668,7 +1669,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
: textHeight) / 2;
cy -= dy;
}
} else if (valign === mxConstants.ALIGN_BOTTOM) {
} else if (valign === ALIGN_BOTTOM) {
if (overflow === 'fill') {
cy -= h;
} else {
@ -1719,31 +1720,25 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
node.setAttribute('fill', s.fontColor);
if (!this.styleEnabled || s.fontFamily !== mxConstants.DEFAULT_FONTFAMILY) {
if (!this.styleEnabled || s.fontFamily !== DEFAULT_FONTFAMILY) {
node.setAttribute('font-family', s.fontFamily);
}
if ((s.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
if ((s.fontStyle & FONT_BOLD) === FONT_BOLD) {
node.setAttribute('font-weight', 'bold');
}
if ((s.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
if ((s.fontStyle & FONT_ITALIC) === FONT_ITALIC) {
node.setAttribute('font-style', 'italic');
}
const txtDecor = [];
if (
(s.fontStyle & mxConstants.FONT_UNDERLINE) ===
mxConstants.FONT_UNDERLINE
) {
if ((s.fontStyle & FONT_UNDERLINE) === FONT_UNDERLINE) {
txtDecor.push('underline');
}
if (
(s.fontStyle & mxConstants.FONT_STRIKETHROUGH) ===
mxConstants.FONT_STRIKETHROUGH
) {
if ((s.fontStyle & FONT_STRIKETHROUGH) === FONT_STRIKETHROUGH) {
txtDecor.push('line-through');
}
@ -1764,15 +1759,15 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let bbox = null;
if (overflow === 'fill' || overflow === 'width') {
if (align === mxConstants.ALIGN_CENTER) {
if (align === ALIGN_CENTER) {
x -= w / 2;
} else if (align === mxConstants.ALIGN_RIGHT) {
} else if (align === ALIGN_RIGHT) {
x -= w;
}
if (valign === mxConstants.ALIGN_MIDDLE) {
if (valign === ALIGN_MIDDLE) {
y -= h / 2;
} else if (valign === mxConstants.ALIGN_BOTTOM) {
} else if (valign === ALIGN_BOTTOM) {
y -= h;
}
@ -1802,9 +1797,9 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
const div = document.createElement('div');
// Wrapping and clipping can be ignored here
div.style.lineHeight = mxConstants.ABSOLUTE_LINE_HEIGHT
? `${s.fontSize * mxConstants.LINE_HEIGHT}px`
: mxConstants.LINE_HEIGHT;
div.style.lineHeight = ABSOLUTE_LINE_HEIGHT
? `${s.fontSize * LINE_HEIGHT}px`
: LINE_HEIGHT;
div.style.fontSize = `${s.fontSize}px`;
div.style.fontFamily = s.fontFamily;
div.style.whiteSpace = 'nowrap';
@ -1812,14 +1807,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
div.style.visibility = 'hidden';
div.style.display = 'inline-block';
if ((s.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
if ((s.fontStyle & FONT_BOLD) === FONT_BOLD) {
div.style.fontWeight = 'bold';
}
if (
(s.fontStyle & mxConstants.FONT_ITALIC) ===
mxConstants.FONT_ITALIC
) {
if ((s.fontStyle & FONT_ITALIC) === FONT_ITALIC) {
div.style.fontStyle = 'italic';
}
@ -1831,15 +1823,15 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
const h = div.offsetHeight;
div.parentNode.removeChild(div);
if (align === mxConstants.ALIGN_CENTER) {
if (align === ALIGN_CENTER) {
x -= w / 2;
} else if (align === mxConstants.ALIGN_RIGHT) {
} else if (align === ALIGN_RIGHT) {
x -= w;
}
if (valign === mxConstants.ALIGN_MIDDLE) {
if (valign === ALIGN_MIDDLE) {
y -= h / 2;
} else if (valign === mxConstants.ALIGN_BOTTOM) {
} else if (valign === ALIGN_BOTTOM) {
y -= h;
}

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

@ -5,8 +5,15 @@
* Type definitions from the typed-mxgraph project
*/
import mxAbstractCanvas2D from './mxAbstractCanvas2D';
import mxConstants from '../mxConstants';
import mxUtils from '../mxUtils';
import {
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
NONE,
SHADOWCOLOR,
SHADOW_OFFSET_X,
SHADOW_OFFSET_Y,
SHADOW_OPACITY,
} from '../mxConstants';
import { getOuterHtml } from '../mxDomUtils';
/**
@ -73,25 +80,25 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
// Writes font defaults
elem = this.createElement('fontfamily');
elem.setAttribute('family', mxConstants.DEFAULT_FONTFAMILY);
elem.setAttribute('family', DEFAULT_FONTFAMILY);
this.root.appendChild(elem);
elem = this.createElement('fontsize');
elem.setAttribute('size', mxConstants.DEFAULT_FONTSIZE);
elem.setAttribute('size', DEFAULT_FONTSIZE);
this.root.appendChild(elem);
// Writes shadow defaults
elem = this.createElement('shadowcolor');
elem.setAttribute('color', mxConstants.SHADOWCOLOR);
elem.setAttribute('color', SHADOWCOLOR);
this.root.appendChild(elem);
elem = this.createElement('shadowalpha');
elem.setAttribute('alpha', mxConstants.SHADOW_OPACITY);
elem.setAttribute('alpha', SHADOW_OPACITY);
this.root.appendChild(elem);
elem = this.createElement('shadowoffset');
elem.setAttribute('dx', mxConstants.SHADOW_OFFSET_X);
elem.setAttribute('dy', mxConstants.SHADOW_OFFSET_Y);
elem.setAttribute('dx', SHADOW_OFFSET_X);
elem.setAttribute('dy', SHADOW_OFFSET_Y);
this.root.appendChild(elem);
}
@ -250,7 +257,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/
// setFillColor(value: string): void;
setFillColor(value) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -262,7 +269,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
}
const elem = this.createElement('fillcolor');
elem.setAttribute('color', value != null ? value : mxConstants.NONE);
elem.setAttribute('color', value != null ? value : NONE);
this.root.appendChild(elem);
}
@ -322,7 +329,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/
// setStrokeColor(value: string): void;
setStrokeColor(value) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -334,7 +341,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
}
const elem = this.createElement('strokecolor');
elem.setAttribute('color', value != null ? value : mxConstants.NONE);
elem.setAttribute('color', value != null ? value : NONE);
this.root.appendChild(elem);
}
@ -478,7 +485,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
// setFontColor(value: string): void;
setFontColor(value) {
if (this.textEnabled) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -490,7 +497,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
}
const elem = this.createElement('fontcolor');
elem.setAttribute('color', value != null ? value : mxConstants.NONE);
elem.setAttribute('color', value != null ? value : NONE);
this.root.appendChild(elem);
}
}
@ -503,7 +510,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
// setFontBackgroundColor(value: string): void;
setFontBackgroundColor(value) {
if (this.textEnabled) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -515,7 +522,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
}
const elem = this.createElement('fontbackgroundcolor');
elem.setAttribute('color', value != null ? value : mxConstants.NONE);
elem.setAttribute('color', value != null ? value : NONE);
this.root.appendChild(elem);
}
}
@ -528,7 +535,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
// setFontBorderColor(value: string): void;
setFontBorderColor(value) {
if (this.textEnabled) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -540,7 +547,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
}
const elem = this.createElement('fontbordercolor');
elem.setAttribute('color', value != null ? value : mxConstants.NONE);
elem.setAttribute('color', value != null ? value : NONE);
this.root.appendChild(elem);
}
}
@ -644,7 +651,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
// setShadowColor(value: string): void;
setShadowColor(value) {
if (this.compressed) {
if (value === mxConstants.NONE) {
if (value === NONE) {
value = null;
}
@ -656,7 +663,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
}
const elem = this.createElement('shadowcolor');
elem.setAttribute('color', value != null ? value : mxConstants.NONE);
elem.setAttribute('color', value != null ? value : NONE);
this.root.appendChild(elem);
}

171
packages/core/src/util/datatypes/style/mxEdgeStyle.js
View File

@ -8,7 +8,33 @@
import mxUtils from '../../mxUtils';
import mxPoint from '../mxPoint';
import mxCellState from '../../../view/cell/mxCellState';
import mxConstants from '../../mxConstants';
import {
DEFAULT_MARKERSIZE,
DIRECTION_EAST,
DIRECTION_MASK_ALL,
DIRECTION_MASK_EAST,
DIRECTION_MASK_NONE,
DIRECTION_MASK_NORTH,
DIRECTION_MASK_SOUTH,
DIRECTION_MASK_WEST,
DIRECTION_NORTH,
DIRECTION_SOUTH,
DIRECTION_WEST,
ELBOW_VERTICAL,
ENTITY_SEGMENT,
NONE,
STYLE_DIRECTION,
STYLE_ELBOW,
STYLE_ENDARROW,
STYLE_ENDSIZE,
STYLE_JETTY_SIZE,
STYLE_ROTATION,
STYLE_SEGMENT,
STYLE_SOURCE_JETTY_SIZE,
STYLE_STARTARROW,
STYLE_STARTSIZE,
STYLE_TARGET_JETTY_SIZE,
} from '../../mxConstants';
import mxRectangle from '../mxRectangle';
/**
@ -108,11 +134,7 @@ class mxEdgeStyle {
const { view } = state;
const { graph } = view;
const segment =
mxUtils.getValue(
state.style,
mxConstants.STYLE_SEGMENT,
mxConstants.ENTITY_SEGMENT
) * view.scale;
mxUtils.getValue(state.style, STYLE_SEGMENT, ENTITY_SEGMENT) * view.scale;
const pts = state.absolutePoints;
const p0 = pts[0];
@ -141,15 +163,14 @@ class mxEdgeStyle {
source,
state,
true,
mxConstants.DIRECTION_MASK_NONE
DIRECTION_MASK_NONE
);
if (
constraint !== mxConstants.DIRECTION_MASK_NONE &&
constraint !==
mxConstants.DIRECTION_MASK_WEST + mxConstants.DIRECTION_MASK_EAST
constraint !== DIRECTION_MASK_NONE &&
constraint !== DIRECTION_MASK_WEST + DIRECTION_MASK_EAST
) {
isSourceLeft = constraint === mxConstants.DIRECTION_MASK_WEST;
isSourceLeft = constraint === DIRECTION_MASK_WEST;
}
} else {
return;
@ -178,15 +199,14 @@ class mxEdgeStyle {
target,
state,
false,
mxConstants.DIRECTION_MASK_NONE
DIRECTION_MASK_NONE
);
if (
constraint !== mxConstants.DIRECTION_MASK_NONE &&
constraint !=
mxConstants.DIRECTION_MASK_WEST + mxConstants.DIRECTION_MASK_EAST
constraint !== DIRECTION_MASK_NONE &&
constraint != DIRECTION_MASK_WEST + DIRECTION_MASK_EAST
) {
isTargetLeft = constraint === mxConstants.DIRECTION_MASK_WEST;
isTargetLeft = constraint === DIRECTION_MASK_WEST;
}
}
@ -269,21 +289,15 @@ class mxEdgeStyle {
let dy = 0;
const seg =
mxUtils.getValue(
state.style,
mxConstants.STYLE_SEGMENT,
graph.gridSize
) * view.scale;
mxUtils.getValue(state.style, STYLE_SEGMENT, graph.gridSize) *
view.scale;
const dir = mxUtils.getValue(
state.style,
mxConstants.STYLE_DIRECTION,
mxConstants.DIRECTION_WEST
STYLE_DIRECTION,
DIRECTION_WEST
);
if (
dir === mxConstants.DIRECTION_NORTH ||
dir === mxConstants.DIRECTION_SOUTH
) {
if (dir === DIRECTION_NORTH || dir === DIRECTION_SOUTH) {
x = view.getRoutingCenterX(source);
dx = seg;
} else {
@ -295,11 +309,11 @@ class mxEdgeStyle {
if (pt != null) {
x = pt.x;
dy = Math.max(Math.abs(y - pt.y), dy);
} else if (dir === mxConstants.DIRECTION_NORTH) {
} else if (dir === DIRECTION_NORTH) {
y = source.y - 2 * dx;
} else if (dir === mxConstants.DIRECTION_SOUTH) {
} else if (dir === DIRECTION_SOUTH) {
y = source.y + source.height + 2 * dx;
} else if (dir === mxConstants.DIRECTION_EAST) {
} else if (dir === DIRECTION_EAST) {
x = source.x - 2 * dy;
} else {
x = source.x + source.width + 2 * dy;
@ -371,8 +385,7 @@ class mxEdgeStyle {
if (
!horizontal &&
(vertical ||
state.style[mxConstants.STYLE_ELBOW] === mxConstants.ELBOW_VERTICAL)
(vertical || state.style[STYLE_ELBOW] === ELBOW_VERTICAL)
) {
mxEdgeStyle.TopToBottom(state, source, target, points, result);
} else {
@ -952,29 +965,23 @@ class mxEdgeStyle {
static getJettySize(state, isSource) {
let value = mxUtils.getValue(
state.style,
isSource
? mxConstants.STYLE_SOURCE_JETTY_SIZE
: mxConstants.STYLE_TARGET_JETTY_SIZE,
mxUtils.getValue(
state.style,
mxConstants.STYLE_JETTY_SIZE,
mxEdgeStyle.orthBuffer
)
isSource ? STYLE_SOURCE_JETTY_SIZE : STYLE_TARGET_JETTY_SIZE,
mxUtils.getValue(state.style, STYLE_JETTY_SIZE, mxEdgeStyle.orthBuffer)
);
if (value === 'auto') {
// Computes the automatic jetty size
const type = mxUtils.getValue(
state.style,
isSource ? mxConstants.STYLE_STARTARROW : mxConstants.STYLE_ENDARROW,
mxConstants.NONE
isSource ? STYLE_STARTARROW : STYLE_ENDARROW,
NONE
);
if (type !== mxConstants.NONE) {
if (type !== NONE) {
const size = mxUtils.getNumber(
state.style,
isSource ? mxConstants.STYLE_STARTSIZE : mxConstants.STYLE_ENDSIZE,
mxConstants.DEFAULT_MARKERSIZE
isSource ? STYLE_STARTSIZE : STYLE_ENDSIZE,
DEFAULT_MARKERSIZE
);
value =
Math.max(
@ -1075,10 +1082,8 @@ class mxEdgeStyle {
result
) {
const { graph } = state.view;
const sourceEdge =
source == null ? false : source.cell.isEdge();
const targetEdge =
target == null ? false : target.cell.isEdge();
const sourceEdge = source == null ? false : source.cell.isEdge();
const targetEdge = target == null ? false : target.cell.isEdge();
const pts = mxEdgeStyle.scalePointArray(
state.absolutePoints,
@ -1145,10 +1150,7 @@ class mxEdgeStyle {
// Determine the side(s) of the source and target vertices
// that the edge may connect to
// portConstraint [source, target]
const portConstraint = [
mxConstants.DIRECTION_MASK_ALL,
mxConstants.DIRECTION_MASK_ALL,
];
const portConstraint = [DIRECTION_MASK_ALL, DIRECTION_MASK_ALL];
let rotation = 0;
if (source != null) {
@ -1156,9 +1158,9 @@ class mxEdgeStyle {
source,
state,
true,
mxConstants.DIRECTION_MASK_ALL
DIRECTION_MASK_ALL
);
rotation = mxUtils.getValue(source.style, mxConstants.STYLE_ROTATION, 0);
rotation = mxUtils.getValue(source.style, STYLE_ROTATION, 0);
// console.log('source rotation', rotation);
@ -1179,9 +1181,9 @@ class mxEdgeStyle {
target,
state,
false,
mxConstants.DIRECTION_MASK_ALL
DIRECTION_MASK_ALL
);
rotation = mxUtils.getValue(target.style, mxConstants.STYLE_ROTATION, 0);
rotation = mxUtils.getValue(target.style, STYLE_ROTATION, 0);
// console.log('target rotation', rotation);
@ -1268,17 +1270,17 @@ class mxEdgeStyle {
constraint[i][0] = (currentTerm.x - geo[i][0]) / geo[i][2];
if (Math.abs(currentTerm.x - geo[i][0]) <= 1) {
dir[i] = mxConstants.DIRECTION_MASK_WEST;
dir[i] = DIRECTION_MASK_WEST;
} else if (Math.abs(currentTerm.x - geo[i][0] - geo[i][2]) <= 1) {
dir[i] = mxConstants.DIRECTION_MASK_EAST;
dir[i] = DIRECTION_MASK_EAST;
}
constraint[i][1] = (currentTerm.y - geo[i][1]) / geo[i][3];
if (Math.abs(currentTerm.y - geo[i][1]) <= 1) {
dir[i] = mxConstants.DIRECTION_MASK_NORTH;
dir[i] = DIRECTION_MASK_NORTH;
} else if (Math.abs(currentTerm.y - geo[i][1] - geo[i][3]) <= 1) {
dir[i] = mxConstants.DIRECTION_MASK_SOUTH;
dir[i] = DIRECTION_MASK_SOUTH;
}
}
@ -1320,12 +1322,12 @@ class mxEdgeStyle {
horPref[0] =
sourceLeftDist >= sourceRightDist
? mxConstants.DIRECTION_MASK_WEST
: mxConstants.DIRECTION_MASK_EAST;
? DIRECTION_MASK_WEST
: DIRECTION_MASK_EAST;
vertPref[0] =
sourceTopDist >= sourceBottomDist
? mxConstants.DIRECTION_MASK_NORTH
: mxConstants.DIRECTION_MASK_SOUTH;
? DIRECTION_MASK_NORTH
: DIRECTION_MASK_SOUTH;
horPref[1] = mxUtils.reversePortConstraints(horPref[0]);
vertPref[1] = mxUtils.reversePortConstraints(vertPref[0]);
@ -1431,10 +1433,10 @@ class mxEdgeStyle {
dir[i] = dirPref[i] & 0xf;
if (
portConstraint[i] === mxConstants.DIRECTION_MASK_WEST ||
portConstraint[i] === mxConstants.DIRECTION_MASK_NORTH ||
portConstraint[i] === mxConstants.DIRECTION_MASK_EAST ||
portConstraint[i] === mxConstants.DIRECTION_MASK_SOUTH
portConstraint[i] === DIRECTION_MASK_WEST ||
portConstraint[i] === DIRECTION_MASK_NORTH ||
portConstraint[i] === DIRECTION_MASK_EAST ||
portConstraint[i] === DIRECTION_MASK_SOUTH
) {
dir[i] = portConstraint[i];
}
@ -1443,8 +1445,8 @@ class mxEdgeStyle {
//= =============================================================
// End of source and target direction determination
let sourceIndex = dir[0] === mxConstants.DIRECTION_MASK_EAST ? 3 : dir[0];
let targetIndex = dir[1] === mxConstants.DIRECTION_MASK_EAST ? 3 : dir[1];
let sourceIndex = dir[0] === DIRECTION_MASK_EAST ? 3 : dir[0];
let targetIndex = dir[1] === DIRECTION_MASK_EAST ? 3 : dir[1];
sourceIndex -= quad;
targetIndex -= quad;
@ -1466,19 +1468,19 @@ class mxEdgeStyle {
mxEdgeStyle.wayPoints1[0][1] = geo[0][1];
switch (dir[0]) {
case mxConstants.DIRECTION_MASK_WEST:
case DIRECTION_MASK_WEST:
mxEdgeStyle.wayPoints1[0][0] -= sourceBuffer;
mxEdgeStyle.wayPoints1[0][1] += constraint[0][1] * geo[0][3];
break;
case mxConstants.DIRECTION_MASK_SOUTH:
case DIRECTION_MASK_SOUTH:
mxEdgeStyle.wayPoints1[0][0] += constraint[0][0] * geo[0][2];
mxEdgeStyle.wayPoints1[0][1] += geo[0][3] + sourceBuffer;
break;
case mxConstants.DIRECTION_MASK_EAST:
case DIRECTION_MASK_EAST:
mxEdgeStyle.wayPoints1[0][0] += geo[0][2] + sourceBuffer;
mxEdgeStyle.wayPoints1[0][1] += constraint[0][1] * geo[0][3];
break;
case mxConstants.DIRECTION_MASK_NORTH:
case DIRECTION_MASK_NORTH:
mxEdgeStyle.wayPoints1[0][0] += constraint[0][0] * geo[0][2];
mxEdgeStyle.wayPoints1[0][1] -= sourceBuffer;
break;
@ -1488,11 +1490,7 @@ class mxEdgeStyle {
// Orientation, 0 horizontal, 1 vertical
let lastOrientation =
(dir[0] &
(mxConstants.DIRECTION_MASK_EAST | mxConstants.DIRECTION_MASK_WEST)) >
0
? 0
: 1;
(dir[0] & (DIRECTION_MASK_EAST | DIRECTION_MASK_WEST)) > 0 ? 0 : 1;
const initialOrientation = lastOrientation;
let currentOrientation = 0;
@ -1502,7 +1500,7 @@ class mxEdgeStyle {
// Rotate the index of this direction by the quad
// to get the real direction
let directionIndex =
nextDirection === mxConstants.DIRECTION_MASK_EAST ? 3 : nextDirection;
nextDirection === DIRECTION_MASK_EAST ? 3 : nextDirection;
directionIndex += quad;
@ -1598,12 +1596,7 @@ class mxEdgeStyle {
// number of turns (points), different requires
// odd.
const targetOrientation =
(dir[1] &
(mxConstants.DIRECTION_MASK_EAST |
mxConstants.DIRECTION_MASK_WEST)) >
0
? 0
: 1;
(dir[1] & (DIRECTION_MASK_EAST | DIRECTION_MASK_WEST)) > 0 ? 0 : 1;
const sameOrient = targetOrientation === initialOrientation ? 0 : 1;
// (currentIndex + 1) % 2 is 0 for even number of points,
@ -1642,8 +1635,8 @@ class mxEdgeStyle {
}
static getRoutePattern(dir, quad, dx, dy) {
let sourceIndex = dir[0] === mxConstants.DIRECTION_MASK_EAST ? 3 : dir[0];
let targetIndex = dir[1] === mxConstants.DIRECTION_MASK_EAST ? 3 : dir[1];
let sourceIndex = dir[0] === DIRECTION_MASK_EAST ? 3 : dir[0];
let targetIndex = dir[1] === DIRECTION_MASK_EAST ? 3 : dir[1];
sourceIndex -= quad;
targetIndex -= quad;

54
packages/core/src/util/datatypes/style/mxPerimeter.ts
View File

@ -7,7 +7,13 @@
import mxUtils from '../../mxUtils';
import mxPoint from '../mxPoint';
import mxConstants from '../../mxConstants';
import {
DIRECTION_EAST,
DIRECTION_NORTH,
DIRECTION_SOUTH,
DIRECTION_WEST,
STYLE_DIRECTION,
} from '../../mxConstants';
import mxRectangle from '../mxRectangle';
import mxCellState from '../../../view/cell/mxCellState';
@ -308,11 +314,9 @@ class mxPerimeter {
next: mxPoint,
orthogonal: boolean = false
): mxPoint | null {
const direction =
vertex != null ? vertex.style[mxConstants.STYLE_DIRECTION] : null;
const direction = vertex != null ? vertex.style[STYLE_DIRECTION] : null;
const vertical =
direction === mxConstants.DIRECTION_NORTH ||
direction === mxConstants.DIRECTION_SOUTH;
direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH;
const { x } = bounds;
const { y } = bounds;
@ -326,14 +330,14 @@ class mxPerimeter {
let corner = new mxPoint(x + w, cy);
let end = new mxPoint(x, y + h);
if (direction === mxConstants.DIRECTION_NORTH) {
if (direction === DIRECTION_NORTH) {
start = end;
corner = new mxPoint(cx, y);
end = new mxPoint(x + w, y + h);
} else if (direction === mxConstants.DIRECTION_SOUTH) {
} else if (direction === DIRECTION_SOUTH) {
corner = new mxPoint(cx, y + h);
end = new mxPoint(x + w, y);
} else if (direction === mxConstants.DIRECTION_WEST) {
} else if (direction === DIRECTION_WEST) {
start = new mxPoint(x + w, y);
corner = new mxPoint(x, cy);
end = new mxPoint(x + w, y + h);
@ -347,10 +351,7 @@ class mxPerimeter {
let base = false;
if (
direction === mxConstants.DIRECTION_NORTH ||
direction === mxConstants.DIRECTION_WEST
) {
if (direction === DIRECTION_NORTH || direction === DIRECTION_WEST) {
base = alpha > -t && alpha < t;
} else {
base = alpha < -Math.PI + t || alpha > Math.PI - t;
@ -369,11 +370,11 @@ class mxPerimeter {
} else {
result = new mxPoint(start.x, next.y);
}
} else if (direction === mxConstants.DIRECTION_NORTH) {
} else if (direction === DIRECTION_NORTH) {
result = new mxPoint(x + w / 2 + (h * Math.tan(alpha)) / 2, y + h);
} else if (direction === mxConstants.DIRECTION_SOUTH) {
} else if (direction === DIRECTION_SOUTH) {
result = new mxPoint(x + w / 2 - (h * Math.tan(alpha)) / 2, y);
} else if (direction === mxConstants.DIRECTION_WEST) {
} else if (direction === DIRECTION_WEST) {
result = new mxPoint(x + w, y + h / 2 + (w * Math.tan(alpha)) / 2);
} else {
result = new mxPoint(x, y + h / 2 - (w * Math.tan(alpha)) / 2);
@ -383,19 +384,11 @@ class mxPerimeter {
const pt = new mxPoint(cx, cy);
if (next.y >= y && next.y <= y + h) {
pt.x = vertical
? cx
: direction === mxConstants.DIRECTION_WEST
? x + w
: x;
pt.x = vertical ? cx : direction === DIRECTION_WEST ? x + w : x;
pt.y = next.y;
} else if (next.x >= x && next.x <= x + w) {
pt.x = next.x;
pt.y = !vertical
? cy
: direction === mxConstants.DIRECTION_NORTH
? y + h
: y;
pt.y = !vertical ? cy : direction === DIRECTION_NORTH ? y + h : y;
}
// Compute angle
@ -470,15 +463,10 @@ class mxPerimeter {
const direction =
vertex != null
? mxUtils.getValue(
vertex.style,
mxConstants.STYLE_DIRECTION,
mxConstants.DIRECTION_EAST
)
: mxConstants.DIRECTION_EAST;
? mxUtils.getValue(vertex.style, STYLE_DIRECTION, DIRECTION_EAST)
: DIRECTION_EAST;
const vertical =
direction === mxConstants.DIRECTION_NORTH ||
direction === mxConstants.DIRECTION_SOUTH;
direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH;
let a = new mxPoint();
let b = new mxPoint();

72
packages/core/src/util/datatypes/style/mxStyleRegistry.ts
View File

@ -5,7 +5,20 @@
* Type definitions from the typed-mxgraph project
*/
import mxConstants from '../../mxConstants';
import {
EDGESTYLE_ELBOW,
EDGESTYLE_ENTITY_RELATION,
EDGESTYLE_LOOP,
EDGESTYLE_ORTHOGONAL,
EDGESTYLE_SEGMENT,
EDGESTYLE_SIDETOSIDE,
EDGESTYLE_TOPTOBOTTOM,
PERIMETER_ELLIPSE,
PERIMETER_HEXAGON,
PERIMETER_RECTANGLE,
PERIMETER_RHOMBUS,
PERIMETER_TRIANGLE,
} from '../../mxConstants';
import mxEdgeStyle from './mxEdgeStyle';
import mxPerimeter from './mxPerimeter';
@ -56,51 +69,18 @@ class mxStyleRegistry {
}
}
mxStyleRegistry.putValue(
mxConstants.EDGESTYLE_ELBOW,
mxEdgeStyle.ElbowConnector
);
mxStyleRegistry.putValue(
mxConstants.EDGESTYLE_ENTITY_RELATION,
mxEdgeStyle.EntityRelation
);
mxStyleRegistry.putValue(mxConstants.EDGESTYLE_LOOP, mxEdgeStyle.Loop);
mxStyleRegistry.putValue(
mxConstants.EDGESTYLE_SIDETOSIDE,
mxEdgeStyle.SideToSide
);
mxStyleRegistry.putValue(
mxConstants.EDGESTYLE_TOPTOBOTTOM,
mxEdgeStyle.TopToBottom
);
mxStyleRegistry.putValue(
mxConstants.EDGESTYLE_ORTHOGONAL,
mxEdgeStyle.OrthConnector
);
mxStyleRegistry.putValue(
mxConstants.EDGESTYLE_SEGMENT,
mxEdgeStyle.SegmentConnector
);
mxStyleRegistry.putValue(EDGESTYLE_ELBOW, mxEdgeStyle.ElbowConnector);
mxStyleRegistry.putValue(EDGESTYLE_ENTITY_RELATION, mxEdgeStyle.EntityRelation);
mxStyleRegistry.putValue(EDGESTYLE_LOOP, mxEdgeStyle.Loop);
mxStyleRegistry.putValue(EDGESTYLE_SIDETOSIDE, mxEdgeStyle.SideToSide);
mxStyleRegistry.putValue(EDGESTYLE_TOPTOBOTTOM, mxEdgeStyle.TopToBottom);
mxStyleRegistry.putValue(EDGESTYLE_ORTHOGONAL, mxEdgeStyle.OrthConnector);
mxStyleRegistry.putValue(EDGESTYLE_SEGMENT, mxEdgeStyle.SegmentConnector);
mxStyleRegistry.putValue(
mxConstants.PERIMETER_ELLIPSE,
mxPerimeter.EllipsePerimeter
);
mxStyleRegistry.putValue(
mxConstants.PERIMETER_RECTANGLE,
mxPerimeter.RectanglePerimeter
);
mxStyleRegistry.putValue(
mxConstants.PERIMETER_RHOMBUS,
mxPerimeter.RhombusPerimeter
);
mxStyleRegistry.putValue(
mxConstants.PERIMETER_TRIANGLE,
mxPerimeter.TrianglePerimeter
);
mxStyleRegistry.putValue(
mxConstants.PERIMETER_HEXAGON,
mxPerimeter.HexagonPerimeter
);
mxStyleRegistry.putValue(PERIMETER_ELLIPSE, mxPerimeter.EllipsePerimeter);
mxStyleRegistry.putValue(PERIMETER_RECTANGLE, mxPerimeter.RectanglePerimeter);
mxStyleRegistry.putValue(PERIMETER_RHOMBUS, mxPerimeter.RhombusPerimeter);
mxStyleRegistry.putValue(PERIMETER_TRIANGLE, mxPerimeter.TrianglePerimeter);
mxStyleRegistry.putValue(PERIMETER_HEXAGON, mxPerimeter.HexagonPerimeter);
export default mxStyleRegistry;

45
packages/core/src/util/datatypes/style/mxStylesheet.js
View File

@ -4,7 +4,22 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import mxConstants from '../../mxConstants';
import {
ALIGN_CENTER,
ALIGN_MIDDLE,
ARROW_CLASSIC,
NONE,
SHAPE_CONNECTOR,
SHAPE_RECTANGLE,
STYLE_ALIGN,
STYLE_ENDARROW,
STYLE_FILLCOLOR,
STYLE_FONTCOLOR,
STYLE_PERIMETER,
STYLE_SHAPE,
STYLE_STROKECOLOR,
STYLE_VERTICAL_ALIGN,
} from '../../mxConstants';
import mxPerimeter from './mxPerimeter';
import mxUtils from '../../mxUtils';
import { clone } from '../../mxCloneUtils';
@ -79,13 +94,13 @@ class mxStylesheet {
// createDefaultVertexStyle(): StyleMap;
createDefaultVertexStyle() {
const style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_FILLCOLOR] = '#C3D9FF';
style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
style[mxConstants.STYLE_FONTCOLOR] = '#774400';
style[STYLE_SHAPE] = SHAPE_RECTANGLE;
style[STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[STYLE_VERTICAL_ALIGN] = ALIGN_MIDDLE;
style[STYLE_ALIGN] = ALIGN_CENTER;
style[STYLE_FILLCOLOR] = '#C3D9FF';
style[STYLE_STROKECOLOR] = '#6482B9';
style[STYLE_FONTCOLOR] = '#774400';
return style;
}
@ -95,12 +110,12 @@ class mxStylesheet {
// createDefaultEdgeStyle(): StyleMap;
createDefaultEdgeStyle() {
const style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
style[mxConstants.STYLE_FONTCOLOR] = '#446299';
style[STYLE_SHAPE] = SHAPE_CONNECTOR;
style[STYLE_ENDARROW] = ARROW_CLASSIC;
style[STYLE_VERTICAL_ALIGN] = ALIGN_MIDDLE;
style[STYLE_ALIGN] = ALIGN_CENTER;
style[STYLE_STROKECOLOR] = '#6482B9';
style[STYLE_FONTCOLOR] = '#446299';
return style;
}
@ -205,7 +220,7 @@ class mxStylesheet {
const key = tmp.substring(0, pos);
const value = tmp.substring(pos + 1);
if (value === mxConstants.NONE) {
if (value === NONE) {
delete style[key];
} else if (mxUtils.isNumeric(value)) {
style[key] = parseFloat(value);

32
packages/core/src/util/drag_pan/mxDragSource.js
View File

@ -10,9 +10,17 @@ import mxUtils from '../mxUtils';
import mxEvent from '../event/mxEvent';
import mxClient from '../../mxClient';
import mxGuide from '../mxGuide';
import mxConstants from '../mxConstants';
import { DROP_TARGET_COLOR } from '../mxConstants';
import mxPoint from '../datatypes/mxPoint';
import { getClientX, getClientY, getSource, isConsumed, isMouseEvent, isPenEvent, isTouchEvent } from '../mxEventUtils';
import {
getClientX,
getClientY,
getSource,
isConsumed,
isMouseEvent,
isPenEvent,
isTouchEvent,
} from '../mxEventUtils';
/**
* @class mxDragSource
@ -30,12 +38,12 @@ class mxDragSource {
this.dropHandler = dropHandler;
// Handles a drag gesture on the element
mxEvent.addGestureListeners(element, evt => {
mxEvent.addGestureListeners(element, (evt) => {
this.mouseDown(evt);
});
// Prevents native drag and drop
mxEvent.addListener(element, 'dragstart', evt => {
mxEvent.addListener(element, 'dragstart', (evt) => {
mxEvent.consume(evt);
});
@ -297,11 +305,7 @@ class mxDragSource {
*/
// mouseDown(evt: mxMouseEvent): void;
mouseDown(evt) {
if (
this.enabled &&
!isConsumed(evt) &&
this.mouseMoveHandler == null
) {
if (this.enabled && !isConsumed(evt) && this.mouseMoveHandler == null) {
this.startDrag(evt);
this.mouseMoveHandler = this.mouseMove.bind(this);
this.mouseUpHandler = this.mouseUp.bind(this);
@ -370,10 +374,7 @@ class mxDragSource {
// getElementForEvent(evt: Event): Element;
getElementForEvent(evt) {
return isTouchEvent(evt) || isPenEvent(evt)
? document.elementFromPoint(
getClientX(evt),
getClientY(evt)
)
? document.elementFromPoint(getClientX(evt), getClientY(evt))
: getSource(evt);
}
@ -545,10 +546,7 @@ class mxDragSource {
}
if (this.highlightDropTargets) {
this.currentHighlight = new mxCellHighlight(
graph,
mxConstants.DROP_TARGET_COLOR
);
this.currentHighlight = new mxCellHighlight(graph, DROP_TARGET_COLOR);
}
// Consumes all events in the current graph before they are fired

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

@ -11,7 +11,7 @@ import mxEventSource from '../event/mxEventSource';
import mxUtils from '../mxUtils';
import mxEvent from '../event/mxEvent';
import mxClient from '../../mxClient';
import mxConstants from '../mxConstants';
import { NODETYPE_TEXT } from '../mxConstants';
import { br, write } from '../mxDomUtils';
import mxResources from '../mxResources';
import { getClientX, getClientY } from '../mxEventUtils';
@ -277,7 +277,7 @@ class mxWindow extends mxEventSource {
this.div.appendChild(this.table);
// Puts the window on top of other windows when clicked
const activator = evt => {
const activator = (evt) => {
this.activate();
};
@ -361,7 +361,7 @@ class mxWindow extends mxEventSource {
while (child != null) {
const next = child.nextSibling;
if (child.nodeType === mxConstants.NODETYPE_TEXT) {
if (child.nodeType === NODETYPE_TEXT) {
child.parentNode.removeChild(child);
}
@ -474,7 +474,7 @@ class mxWindow extends mxEventSource {
let width = null;
let height = null;
const start = evt => {
const start = (evt) => {
// LATER: pointerdown starting on border of resize does start
// the drag operation but does not fire consecutive events via
// one of the listeners below (does pan instead).
@ -492,7 +492,7 @@ class mxWindow extends mxEventSource {
// Adds a temporary pair of listeners to intercept
// the gesture event in the document
let dragHandler = evt => {
let dragHandler = (evt) => {
if (startX != null && startY != null) {
const dx = getClientX(evt) - startX;
const dy = getClientY(evt) - startY;
@ -504,7 +504,7 @@ class mxWindow extends mxEventSource {
}
};
let dropHandler = evt => {
let dropHandler = (evt) => {
if (startX != null && startY != null) {
startX = null;
startY = null;
@ -549,9 +549,11 @@ class mxWindow extends mxEventSource {
this.table.style.width = `${width}px`;
this.table.style.height = `${height}px`;
this.contentWrapper.style.height = `${this.div.offsetHeight -
this.contentWrapper.style.height = `${
this.div.offsetHeight -
this.title.offsetHeight -
this.contentHeightCorrection}px`;
this.contentHeightCorrection
}px`;
}
/**
@ -591,7 +593,7 @@ class mxWindow extends mxEventSource {
let maxDisplay = null;
let height = null;
const funct = evt => {
const funct = (evt) => {
this.activate();
if (!minimized) {
@ -676,7 +678,7 @@ class mxWindow extends mxEventSource {
let width = null;
let minDisplay = null;
const funct = evt => {
const funct = (evt) => {
this.activate();
if (this.maximize.style.display !== 'none') {
@ -715,9 +717,11 @@ class mxWindow extends mxEventSource {
const style = mxUtils.getCurrentStyle(this.contentWrapper);
if (style.overflow === 'auto' || this.resize != null) {
this.contentWrapper.style.height = `${this.div.offsetHeight -
this.contentWrapper.style.height = `${
this.div.offsetHeight -
this.title.offsetHeight -
this.contentHeightCorrection}px`;
this.contentHeightCorrection
}px`;
}
this.fireEvent(new mxEventObject(mxEvent.MAXIMIZE, 'event', evt));
@ -739,9 +743,11 @@ class mxWindow extends mxEventSource {
const style = mxUtils.getCurrentStyle(this.contentWrapper);
if (style.overflow === 'auto' || this.resize != null) {
this.contentWrapper.style.height = `${this.div.offsetHeight -
this.contentWrapper.style.height = `${
this.div.offsetHeight -
this.title.offsetHeight -
this.contentHeightCorrection}px`;
this.contentHeightCorrection
}px`;
}
this.table.style.height = height;
@ -769,7 +775,7 @@ class mxWindow extends mxEventSource {
installMoveHandler() {
this.title.style.cursor = 'move';
mxEvent.addGestureListeners(this.title, evt => {
mxEvent.addGestureListeners(this.title, (evt) => {
const startX = getClientX(evt);
const startY = getClientY(evt);
const x = this.getX();
@ -777,7 +783,7 @@ class mxWindow extends mxEventSource {
// Adds a temporary pair of listeners to intercept
// the gesture event in the document
const dragHandler = evt => {
const dragHandler = (evt) => {
const dx = getClientX(evt) - startX;
const dy = getClientY(evt) - startY;
this.setLocation(x + dx, y + dy);
@ -785,7 +791,7 @@ class mxWindow extends mxEventSource {
mxEvent.consume(evt);
};
const dropHandler = evt => {
const dropHandler = (evt) => {
mxEvent.removeGestureListeners(
document,
null,
@ -848,7 +854,7 @@ class mxWindow extends mxEventSource {
this.buttons.appendChild(this.closeImg);
mxEvent.addGestureListeners(this.closeImg, evt => {
mxEvent.addGestureListeners(this.closeImg, (evt) => {
this.fireEvent(new mxEventObject(mxEvent.CLOSE, 'event', evt));
if (this.destroyOnClose) {
@ -933,9 +939,11 @@ class mxWindow extends mxEventSource {
(style.overflow == 'auto' || this.resize != null) &&
this.contentWrapper.style.display != 'none'
) {
this.contentWrapper.style.height = `${this.div.offsetHeight -
this.contentWrapper.style.height = `${
this.div.offsetHeight -
this.title.offsetHeight -
this.contentHeightCorrection}px`;
this.contentHeightCorrection
}px`;
}
this.fireEvent(new mxEventObject(mxEvent.SHOW));
@ -1063,8 +1071,7 @@ export const error = (message, width, close, icon) => {
write(div, message);
const w = document.body.clientWidth;
const h =
document.body.clientHeight || document.documentElement.clientHeight;
const h = document.body.clientHeight || document.documentElement.clientHeight;
const warn = new mxWindow(
mxResources.get(mxUtils.errorResource) || mxUtils.errorResource,
div,
@ -1084,7 +1091,7 @@ export const error = (message, width, close, icon) => {
button.setAttribute('style', 'float:right');
mxEvent.addListener(button, 'click', evt => {
mxEvent.addListener(button, 'click', (evt) => {
warn.destroy();
});

1117
packages/core/src/util/mxConstants.js
View File

File diff suppressed because it is too large Load Diff

26
packages/core/src/util/mxDomUtils.js
View File

@ -1,3 +1,5 @@
import { NODETYPE_ELEMENT } from './mxConstants';
/**
* Function: extractTextWithWhitespace
*
@ -7,7 +9,7 @@
*
* elems - DOM nodes to return the text for.
*/
export const extractTextWithWhitespace = elems => {
export const extractTextWithWhitespace = (elems) => {
// Known block elements for handling linefeeds (list is not complete)
const blocks = [
'BLOCKQUOTE',
@ -56,10 +58,7 @@ export const extractTextWithWhitespace = elems => {
doExtract(elem.childNodes);
}
if (
i < elts.length - 1 &&
blocks.indexOf(elts[i + 1].nodeName) >= 0
) {
if (i < elts.length - 1 && blocks.indexOf(elts[i + 1].nodeName) >= 0) {
ret.push('\n');
}
}
@ -80,7 +79,7 @@ export const extractTextWithWhitespace = elems => {
*
* node - DOM node to return the text content for.
*/
export const getTextContent = node => {
export const getTextContent = (node) => {
return node != null
? node[node.textContent === undefined ? 'text' : 'textContent']
: '';
@ -115,7 +114,7 @@ export const setTextContent = (node, text) => {
*
* node - DOM node to return the inner HTML for.
*/
export const getInnerHtml = node => {
export const getInnerHtml = (node) => {
if (node != null) {
const serializer = new XMLSerializer();
return serializer.serializeToString(node);
@ -135,7 +134,7 @@ export const getInnerHtml = node => {
*
* node - DOM node to return the outer HTML for.
*/
export const getOuterHtml = node => {
export const getOuterHtml = (node) => {
if (node != null) {
const serializer = new XMLSerializer();
return serializer.serializeToString(node);
@ -255,8 +254,7 @@ export const isNode = (value, nodeName, attributeName, attributeValue) => {
if (
value != null &&
!isNaN(value.nodeType) &&
(nodeName == null ||
value.nodeName.toLowerCase() == nodeName.toLowerCase())
(nodeName == null || value.nodeName.toLowerCase() == nodeName.toLowerCase())
) {
return (
attributeName == null ||
@ -305,7 +303,7 @@ export const isAncestorNode = (ancestor, child) => {
* <mxConstants.NODETYPE_ELEMENT>.
*/
export const getChildNodes = (node, nodeType) => {
nodeType = nodeType || mxConstants.NODETYPE_ELEMENT;
nodeType = nodeType || NODETYPE_ELEMENT;
const children = [];
let tmp = node.firstChild;
@ -366,11 +364,7 @@ export const importNodeImplementation = (doc, node, allChildren) => {
if (allChildren && node.childNodes && node.childNodes.length > 0) {
for (let i = 0; i < node.childNodes.length; i += 1) {
newNode.appendChild(
importNodeImplementation(
doc,
node.childNodes[i],
allChildren
)
importNodeImplementation(doc, node.childNodes[i], allChildren)
);
}
}

8
packages/core/src/util/mxGestureUtils.js
View File

@ -1,6 +1,6 @@
import mxDragSource from './drag_pan/mxDragSource';
import mxPoint from './datatypes/mxPoint';
import mxConstants from './mxConstants';
import { TOOLTIP_VERTICAL_OFFSET } from './mxConstants';
/**
* Function: makeDraggable
@ -85,7 +85,7 @@ export const makeDraggable = (
const dragSource = new mxDragSource(element, funct);
dragSource.dragOffset = new mxPoint(
dx != null ? dx : 0,
dy != null ? dy : mxConstants.TOOLTIP_VERTICAL_OFFSET
dy != null ? dy : TOOLTIP_VERTICAL_OFFSET
);
dragSource.autoscroll = autoscroll;
@ -103,7 +103,7 @@ export const makeDraggable = (
}
// Overrides function to get current graph
dragSource.getGraphForEvent = evt => {
dragSource.getGraphForEvent = (evt) => {
return typeof graphF === 'function' ? graphF(evt) : graphF;
};
@ -114,7 +114,7 @@ export const makeDraggable = (
};
if (scalePreview) {
dragSource.createPreviewElement = graph => {
dragSource.createPreviewElement = (graph) => {
const elt = dragElement.cloneNode(true);
const w = parseInt(elt.style.width);

26
packages/core/src/util/mxGuide.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import mxConstants from './mxConstants';
import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './mxConstants';
import mxPoint from './datatypes/mxPoint';
import mxPolyline from '../shape/edge/mxPolyline';
import mxCellState from '../view/cell/mxCellState';
@ -13,7 +13,7 @@ import mxShape from '../shape/mxShape';
import mxRectangle from './datatypes/mxRectangle';
import mxGraph from '../view/graph/mxGraph';
import mxEventObject from './event/mxEventObject';
import mxGraphView from "../view/graph/mxGraphView";
import mxGraphView from '../view/graph/mxGraphView';
/**
* Class: mxGuide
@ -119,7 +119,7 @@ class mxGuide {
* Returns the tolerance for the guides. Default value is gridSize / 2.
*/
// getGuideTolerance(): number;
getGuideTolerance(gridEnabled: boolean=false) {
getGuideTolerance(gridEnabled: boolean = false) {
return gridEnabled && this.graph.gridEnabled
? this.graph.gridSize / 2
: this.tolerance;
@ -139,11 +139,7 @@ class mxGuide {
// createGuideShape(horizontal: boolean): mxPolyline;
createGuideShape(horizontal: boolean = false) {
// TODO: Should vertical guides be supported here?? ============================
const guide = new mxPolyline(
[],
mxConstants.GUIDE_COLOR,
mxConstants.GUIDE_STROKEWIDTH
);
const guide = new mxPolyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH);
guide.isDashed = true;
return guide;
}
@ -225,7 +221,7 @@ class mxGuide {
// Makes sure to use SVG shapes in order to implement
// event-transparency on the background area of the rectangle since
// HTML shapes do not let mouseevents through even when transparent
this.guideX.dialect = mxConstants.DIALECT_SVG;
this.guideX.dialect = DIALECT_SVG;
this.guideX.pointerEvents = false;
this.guideX.init(this.graph.getView().getOverlayPane());
}
@ -264,7 +260,7 @@ class mxGuide {
// Makes sure to use SVG shapes in order to implement
// event-transparency on the background area of the rectangle since
// HTML shapes do not let mouseevents through even when transparent
this.guideY.dialect = mxConstants.DIALECT_SVG;
this.guideY.dialect = DIALECT_SVG;
this.guideY.pointerEvents = false;
this.guideY.init(this.graph.getView().getOverlayPane());
}
@ -407,7 +403,7 @@ class mxGuide {
*/
// getGuideColor(state: mxCellState, horizontal: any): string;
getGuideColor(state: mxCellState | null, horizontal: boolean | null): string {
return mxConstants.GUIDE_COLOR;
return GUIDE_COLOR;
}
/**
@ -428,10 +424,14 @@ class mxGuide {
// setVisible(visible: boolean): void;
setVisible(visible: boolean): void {
if (this.guideX != null) {
(<SVGElement>this.guideX.node).style.visibility = visible ? 'visible' : 'hidden';
(<SVGElement>this.guideX.node).style.visibility = visible
? 'visible'
: 'hidden';
}
if (this.guideY != null) {
(<SVGElement>this.guideY.node).style.visibility = visible ? 'visible' : 'hidden';
(<SVGElement>this.guideY.node).style.visibility = visible
? 'visible'
: 'hidden';
}
}

22
packages/core/src/util/mxResources.js
View File

@ -3,7 +3,7 @@
* Copyright (c) 2006-2016, Gaudenz Alder
*/
import mxClient from '../mxClient';
import mxConstants from './mxConstants';
import { NONE } from './mxConstants';
/**
* Class: mxResources
@ -107,9 +107,9 @@ const mxResources = {
*
* lan - The current language.
*/
isLanguageSupported: lan => {
isLanguageSupported: (lan) => {
if (mxClient.languages != null) {
return mxUtils.indexOf(mxClient.languages, lan) >= 0;
return mxClient.languages.indexOf(lan) >= 0;
}
return true;
@ -171,7 +171,9 @@ const mxResources = {
mxResources.isLanguageSupported(lan) &&
lan != mxClient.defaultLanguage
) {
return `${basename}_${lan}${(mxResources.extension ?? mxClient.mxResourceExtension)}`;
return `${basename}_${lan}${
mxResources.extension ?? mxClient.mxResourceExtension
}`;
}
return null;
},
@ -204,9 +206,9 @@ const mxResources = {
? lan
: mxClient.language != null
? mxClient.language.toLowerCase()
: mxConstants.NONE;
: NONE;
if (lan !== mxConstants.NONE) {
if (lan !== NONE) {
const defaultBundle = mxResources.getDefaultBundle(basename, lan);
const specialBundle = mxResources.getSpecialBundle(basename, lan);
@ -215,7 +217,7 @@ const mxResources = {
if (callback) {
mxUtils.get(
specialBundle,
req => {
(req) => {
mxResources.parse(req.getText());
callback();
},
@ -243,7 +245,7 @@ const mxResources = {
if (callback) {
mxUtils.get(
defaultBundle,
req => {
(req) => {
mxResources.parse(req.getText());
loadSpecialBundle();
},
@ -277,7 +279,7 @@ const mxResources = {
* Parses the key, value pairs in the specified
* text and stores them as local resources.
*/
parse: text => {
parse: (text) => {
if (text != null) {
const lines = text.split('\n');
@ -398,7 +400,7 @@ const mxResources = {
*
* callback - Callback function for asynchronous loading.
*/
loadResources: callback => {
loadResources: (callback) => {
mxResources.add(`${mxClient.basePath}/resources/editor`, null, () => {
mxResources.add(`${mxClient.basePath}/resources/graph`, null, callback);
});

19
packages/core/src/util/mxStringUtils.ts
View File

@ -1,5 +1,5 @@
import mxConstants from "./mxConstants";
import { getTextContent } from "./mxDomUtils";
import { NODETYPE_TEXT } from './mxConstants';
import { getTextContent } from './mxDomUtils';
/**
* Function: ltrim
@ -14,9 +14,8 @@ import { getTextContent } from "./mxDomUtils";
* - "\0" (ASCII 0 (0x00)), the NUL-byte
* - "\x0B" (ASCII 11 (0x0B)), a vertical tab
*/
export const ltrim = (str: string | null, chars: string = '\\s') => str != null
? str.replace(new RegExp(`^[${chars}]+`, 'g'), '')
: null;
export const ltrim = (str: string | null, chars: string = '\\s') =>
str != null ? str.replace(new RegExp(`^[${chars}]+`, 'g'), '') : null;
/**
* Function: rtrim
@ -31,9 +30,8 @@ export const ltrim = (str: string | null, chars: string = '\\s') => str != null
* - "\0" (ASCII 0 (0x00)), the NUL-byte
* - "\x0B" (ASCII 11 (0x0B)), a vertical tab
*/
export const rtrim = (str: string | null, chars: string = '\\s') => str != null
? str.replace(new RegExp(`[${chars}]+$`, 'g'), '')
: null;
export const rtrim = (str: string | null, chars: string = '\\s') =>
str != null ? str.replace(new RegExp(`[${chars}]+$`, 'g'), '') : null;
/**
* Function: trim
@ -49,7 +47,8 @@ export const rtrim = (str: string | null, chars: string = '\\s') => str != null
* - "\0" (ASCII 0 (0x00)), the NUL-byte
* - "\x0B" (ASCII 11 (0x0B)), a vertical tab
*/
export const trim = (str: string | null, chars?: string) => ltrim(rtrim(str, chars), chars);
export const trim = (str: string | null, chars?: string) =>
ltrim(rtrim(str, chars), chars);
/**
* Function: getFunctionName
@ -117,7 +116,7 @@ export const replaceTrailingNewlines = (str: string, pattern: string) => {
export const removeWhitespace = (node: HTMLElement, before: boolean) => {
let tmp = before ? node.previousSibling : node.nextSibling;
while (tmp != null && tmp.nodeType === mxConstants.NODETYPE_TEXT) {
while (tmp != null && tmp.nodeType === NODETYPE_TEXT) {
const next = before ? tmp.previousSibling : tmp.nextSibling;
const text = getTextContent(tmp);

303
packages/core/src/util/mxUtils.js
View File

@ -5,7 +5,46 @@
* Type definitions from the typed-mxgraph project
*/
import mxClient from '../mxClient';
import mxConstants from './mxConstants';
import {
ALIGN_BOTTOM,
ALIGN_LEFT,
ALIGN_RIGHT,
ALIGN_TOP,
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
DIRECTION_EAST,
DIRECTION_MASK_EAST,
DIRECTION_MASK_NONE,
DIRECTION_MASK_NORTH,
DIRECTION_MASK_SOUTH,
DIRECTION_MASK_WEST,
DIRECTION_NORTH,
DIRECTION_SOUTH,
DIRECTION_WEST,
FONT_BOLD,
FONT_ITALIC,
FONT_STRIKETHROUGH,
FONT_UNDERLINE,
LINE_HEIGHT,
NODETYPE_CDATA,
NODETYPE_COMMENT,
NODETYPE_DOCUMENT,
NODETYPE_DOCUMENT_FRAGMENT,
NODETYPE_ELEMENT,
NODETYPE_TEXT,
NONE,
PAGE_FORMAT_A4_PORTRAIT,
STYLE_DIRECTION,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_HORIZONTAL,
STYLE_PORT_CONSTRAINT,
STYLE_PORT_CONSTRAINT_ROTATION,
STYLE_ROTATION,
STYLE_SOURCE_PORT_CONSTRAINT,
STYLE_STARTSIZE,
STYLE_TARGET_PORT_CONSTRAINT,
} from './mxConstants';
import mxPoint from './datatypes/mxPoint';
import mxDictionary from './datatypes/mxDictionary';
import mxCellPath from '../view/cell/mxCellPath';
@ -64,7 +103,7 @@ const mxUtils = {
*
* element - DOM node to remove the cursor style from.
*/
removeCursors: element => {
removeCursors: (element) => {
if (element.style != null) {
element.style.cursor = '';
}
@ -89,7 +128,7 @@ const mxUtils = {
*
* element - DOM node whose current style should be returned.
*/
getCurrentStyle: element => {
getCurrentStyle: (element) => {
return element != null ? window.getComputedStyle(element, '') : null;
},
@ -99,7 +138,7 @@ const mxUtils = {
* Parses the given CSS numeric value adding handling for the values thin,
* medium and thick (2, 4 and 6).
*/
parseCssNumber: value => {
parseCssNumber: (value) => {
if (value === 'thin') {
value = '2';
} else if (value === 'medium') {
@ -154,7 +193,7 @@ const mxUtils = {
*
* node - DOM node whose style should be checked for scrollbars.
*/
hasScrollbars: node => {
hasScrollbars: (node) => {
const style = mxUtils.getCurrentStyle(node);
return (
@ -163,17 +202,6 @@ const mxUtils = {
);
},
/**
* Function: bind
*
* Returns a wrapper function that locks the execution scope of the given
* function to the specified scope. Inside funct, the "this" keyword
* becomes a reference to that scope.
*/
bind: (scope, funct) => {
return funct.bind(scope);
},
/**
* Function: findNode
*
@ -181,7 +209,7 @@ const mxUtils = {
* This implementation does not use XPath.
*/
findNode: (node, attr, value) => {
if (node.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (node.nodeType === NODETYPE_ELEMENT) {
const tmp = node.getAttribute(attr);
if (tmp != null && tmp == value) {
return node;
@ -200,50 +228,6 @@ const mxUtils = {
return null;
},
/**
* Function: indexOf
*
* Returns the index of obj in array or -1 if the array does not contain
* the given object.
*
* Parameters:
*
* array - Array to check for the given obj.
* obj - Object to find in the given array.
*/
indexOf: (array, obj) => {
if (array != null && obj != null) {
for (let i = 0; i < array.length; i += 1) {
if (array[i] == obj) {
return i;
}
}
}
return -1;
},
/**
* Function: forEach
*
* Calls the given function for each element of the given array and returns
* the array.
*
* Parameters:
*
* array - Array that contains the elements.
* fn - Function to be called for each object.
*/
forEach: (array, fn) => {
if (array != null && fn != null) {
for (let i = 0; i < array.length; i += 1) {
fn(array[i]);
}
}
return array;
},
/**
* Function: remove
*
@ -265,12 +249,12 @@ const mxUtils = {
let result = null;
if (typeof array === 'object') {
let index = mxUtils.indexOf(array, obj);
let index = array.indexOf(obj);
while (index >= 0) {
array.splice(index, 1);
result = obj;
index = mxUtils.indexOf(array, obj);
index = array.indexOf(obj);
}
}
@ -350,11 +334,11 @@ const mxUtils = {
}
}
if (node.nodeType === mxConstants.NODETYPE_DOCUMENT) {
if (node.nodeType === NODETYPE_DOCUMENT) {
result.push(
mxUtils.getPrettyXml(node.documentElement, tab, indent, newline, ns)
);
} else if (node.nodeType === mxConstants.NODETYPE_DOCUMENT_FRAGMENT) {
} else if (node.nodeType === NODETYPE_DOCUMENT_FRAGMENT) {
let tmp = node.firstChild;
if (tmp != null) {
@ -363,19 +347,19 @@ const mxUtils = {
tmp = tmp.nextSibling;
}
}
} else if (node.nodeType === mxConstants.NODETYPE_COMMENT) {
} else if (node.nodeType === NODETYPE_COMMENT) {
const value = getTextContent(node);
if (value.length > 0) {
result.push(`${indent}<!--${value}-->${newline}`);
}
} else if (node.nodeType === mxConstants.NODETYPE_TEXT) {
} else if (node.nodeType === NODETYPE_TEXT) {
const value = trim(getTextContent(node));
if (value.length > 0) {
result.push(indent + htmlEntities(value, false) + newline);
}
} else if (node.nodeType === mxConstants.NODETYPE_CDATA) {
} else if (node.nodeType === NODETYPE_CDATA) {
const value = getTextContent(node);
if (value.length > 0) {
@ -426,7 +410,7 @@ const mxUtils = {
* background can be used in IE8 standards mode (native IE8 only) to pass
* events through the node.
*/
addTransparentBackgroundFilter: node => {
addTransparentBackgroundFilter: (node) => {
node.style.filter += `progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${mxClient.imageBasePath}/transparent.gif', sizingMethod='scale')`;
},
@ -457,7 +441,7 @@ const mxUtils = {
* Makes sure the given node is inside the visible area of the window. This
* is done by setting the left and top in the style.
*/
fit: node => {
fit: (node) => {
const ds = mxUtils.getDocumentSize();
const left = parseInt(node.offsetLeft);
const width = parseInt(node.offsetWidth);
@ -574,7 +558,7 @@ const mxUtils = {
if (value == null) {
value = defaultValue;
} else if (value === mxConstants.NONE) {
} else if (value === NONE) {
value = null;
}
@ -663,7 +647,7 @@ const mxUtils = {
*
* Removes all duplicates from the given array.
*/
removeDuplicates: arr => {
removeDuplicates: (arr) => {
const dict = new mxDictionary();
const result = [];
@ -682,7 +666,7 @@ const mxUtils = {
*
* Returns true if the given value is of type number and isNaN returns true.
*/
isNaN: value => {
isNaN: (value) => {
return typeof value === 'number' && isNaN(value);
},
@ -695,7 +679,7 @@ const mxUtils = {
*
* obj - Object to return the string representation for.
*/
toString: obj => {
toString: (obj) => {
let output = '';
for (const i in obj) {
@ -723,7 +707,7 @@ const mxUtils = {
*
* Converts the given degree to radians.
*/
toRadians: deg => {
toRadians: (deg) => {
return (Math.PI * deg) / 180;
},
@ -732,7 +716,7 @@ const mxUtils = {
*
* Converts the given radians to degree.
*/
toDegree: rad => {
toDegree: (rad) => {
return (rad * 180) / Math.PI;
},
@ -921,12 +905,10 @@ const mxUtils = {
getPortConstraints: (terminal, edge, source, defaultValue) => {
const value = mxUtils.getValue(
terminal.style,
mxConstants.STYLE_PORT_CONSTRAINT,
STYLE_PORT_CONSTRAINT,
mxUtils.getValue(
edge.style,
source
? mxConstants.STYLE_SOURCE_PORT_CONSTRAINT
: mxConstants.STYLE_TARGET_PORT_CONSTRAINT,
source ? STYLE_SOURCE_PORT_CONSTRAINT : STYLE_TARGET_PORT_CONSTRAINT,
null
)
);
@ -935,20 +917,16 @@ const mxUtils = {
return defaultValue;
}
const directions = value.toString();
let returnValue = mxConstants.DIRECTION_MASK_NONE;
let returnValue = DIRECTION_MASK_NONE;
const constraintRotationEnabled = mxUtils.getValue(
terminal.style,
mxConstants.STYLE_PORT_CONSTRAINT_ROTATION,
STYLE_PORT_CONSTRAINT_ROTATION,
0
);
let rotation = 0;
if (constraintRotationEnabled == 1) {
rotation = mxUtils.getValue(
terminal.style,
mxConstants.STYLE_ROTATION,
0
);
rotation = mxUtils.getValue(terminal.style, STYLE_ROTATION, 0);
}
let quad = 0;
@ -967,67 +945,67 @@ const mxUtils = {
}
}
if (directions.indexOf(mxConstants.DIRECTION_NORTH) >= 0) {
if (directions.indexOf(DIRECTION_NORTH) >= 0) {
switch (quad) {
case 0:
returnValue |= mxConstants.DIRECTION_MASK_NORTH;
returnValue |= DIRECTION_MASK_NORTH;
break;
case 1:
returnValue |= mxConstants.DIRECTION_MASK_EAST;
returnValue |= DIRECTION_MASK_EAST;
break;
case 2:
returnValue |= mxConstants.DIRECTION_MASK_SOUTH;
returnValue |= DIRECTION_MASK_SOUTH;
break;
case 3:
returnValue |= mxConstants.DIRECTION_MASK_WEST;
returnValue |= DIRECTION_MASK_WEST;
break;
}
}
if (directions.indexOf(mxConstants.DIRECTION_WEST) >= 0) {
if (directions.indexOf(DIRECTION_WEST) >= 0) {
switch (quad) {
case 0:
returnValue |= mxConstants.DIRECTION_MASK_WEST;
returnValue |= DIRECTION_MASK_WEST;
break;
case 1:
returnValue |= mxConstants.DIRECTION_MASK_NORTH;
returnValue |= DIRECTION_MASK_NORTH;
break;
case 2:
returnValue |= mxConstants.DIRECTION_MASK_EAST;
returnValue |= DIRECTION_MASK_EAST;
break;
case 3:
returnValue |= mxConstants.DIRECTION_MASK_SOUTH;
returnValue |= DIRECTION_MASK_SOUTH;
break;
}
}
if (directions.indexOf(mxConstants.DIRECTION_SOUTH) >= 0) {
if (directions.indexOf(DIRECTION_SOUTH) >= 0) {
switch (quad) {
case 0:
returnValue |= mxConstants.DIRECTION_MASK_SOUTH;
returnValue |= DIRECTION_MASK_SOUTH;
break;
case 1:
returnValue |= mxConstants.DIRECTION_MASK_WEST;
returnValue |= DIRECTION_MASK_WEST;
break;
case 2:
returnValue |= mxConstants.DIRECTION_MASK_NORTH;
returnValue |= DIRECTION_MASK_NORTH;
break;
case 3:
returnValue |= mxConstants.DIRECTION_MASK_EAST;
returnValue |= DIRECTION_MASK_EAST;
break;
}
}
if (directions.indexOf(mxConstants.DIRECTION_EAST) >= 0) {
if (directions.indexOf(DIRECTION_EAST) >= 0) {
switch (quad) {
case 0:
returnValue |= mxConstants.DIRECTION_MASK_EAST;
returnValue |= DIRECTION_MASK_EAST;
break;
case 1:
returnValue |= mxConstants.DIRECTION_MASK_SOUTH;
returnValue |= DIRECTION_MASK_SOUTH;
break;
case 2:
returnValue |= mxConstants.DIRECTION_MASK_WEST;
returnValue |= DIRECTION_MASK_WEST;
break;
case 3:
returnValue |= mxConstants.DIRECTION_MASK_NORTH;
returnValue |= DIRECTION_MASK_NORTH;
break;
}
}
@ -1041,13 +1019,13 @@ const mxUtils = {
* Reverse the port constraint bitmask. For example, north | east
* becomes south | west
*/
reversePortConstraints: constraint => {
reversePortConstraints: (constraint) => {
let result = 0;
result = (constraint & mxConstants.DIRECTION_MASK_WEST) << 3;
result |= (constraint & mxConstants.DIRECTION_MASK_NORTH) << 1;
result |= (constraint & mxConstants.DIRECTION_MASK_SOUTH) >> 1;
result |= (constraint & mxConstants.DIRECTION_MASK_EAST) >> 3;
result = (constraint & DIRECTION_MASK_WEST) << 3;
result |= (constraint & DIRECTION_MASK_NORTH) << 1;
result |= (constraint & DIRECTION_MASK_SOUTH) >> 1;
result |= (constraint & DIRECTION_MASK_EAST) >> 3;
return result;
},
@ -1095,19 +1073,9 @@ const mxUtils = {
* rectangle according to the respective styles in style.
*/
getDirectedBounds(rect, m, style, flipH, flipV) {
const d = mxUtils.getValue(
style,
mxConstants.STYLE_DIRECTION,
mxConstants.DIRECTION_EAST
);
flipH =
flipH != null
? flipH
: mxUtils.getValue(style, mxConstants.STYLE_FLIPH, false);
flipV =
flipV != null
? flipV
: mxUtils.getValue(style, mxConstants.STYLE_FLIPV, false);
const d = mxUtils.getValue(style, STYLE_DIRECTION, DIRECTION_EAST);
flipH = flipH != null ? flipH : mxUtils.getValue(style, STYLE_FLIPH, false);
flipV = flipV != null ? flipV : mxUtils.getValue(style, STYLE_FLIPV, false);
m.x = Math.round(Math.max(0, Math.min(rect.width, m.x)));
m.y = Math.round(Math.max(0, Math.min(rect.height, m.y)));
@ -1115,11 +1083,8 @@ const mxUtils = {
m.height = Math.round(Math.max(0, Math.min(rect.height, m.height)));
if (
(flipV &&
(d === mxConstants.DIRECTION_SOUTH ||
d === mxConstants.DIRECTION_NORTH)) ||
(flipH &&
(d === mxConstants.DIRECTION_EAST || d === mxConstants.DIRECTION_WEST))
(flipV && (d === DIRECTION_SOUTH || d === DIRECTION_NORTH)) ||
(flipH && (d === DIRECTION_EAST || d === DIRECTION_WEST))
) {
const tmp = m.x;
m.x = m.width;
@ -1127,11 +1092,8 @@ const mxUtils = {
}
if (
(flipH &&
(d === mxConstants.DIRECTION_SOUTH ||
d === mxConstants.DIRECTION_NORTH)) ||
(flipV &&
(d === mxConstants.DIRECTION_EAST || d === mxConstants.DIRECTION_WEST))
(flipH && (d === DIRECTION_SOUTH || d === DIRECTION_NORTH)) ||
(flipV && (d === DIRECTION_EAST || d === DIRECTION_WEST))
) {
const tmp = m.y;
m.y = m.height;
@ -1140,17 +1102,17 @@ const mxUtils = {
const m2 = mxRectangle.fromRectangle(m);
if (d === mxConstants.DIRECTION_SOUTH) {
if (d === DIRECTION_SOUTH) {
m2.y = m.x;
m2.x = m.height;
m2.width = m.y;
m2.height = m.width;
} else if (d === mxConstants.DIRECTION_WEST) {
} else if (d === DIRECTION_WEST) {
m2.y = m.height;
m2.x = m.width;
m2.width = m.x;
m2.height = m.y;
} else if (d === mxConstants.DIRECTION_NORTH) {
} else if (d === DIRECTION_NORTH) {
m2.y = m.width;
m2.x = m.y;
m2.width = m.height;
@ -1359,11 +1321,10 @@ const mxUtils = {
let h = state.height;
const start =
mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE) *
state.view.scale;
mxUtils.getValue(state.style, STYLE_STARTSIZE) * state.view.scale;
if (start > 0) {
if (mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, true)) {
if (mxUtils.getValue(state.style, STYLE_HORIZONTAL, true)) {
cy = state.y + start / 2;
h = start;
} else {
@ -1382,7 +1343,7 @@ const mxUtils = {
const rect = new mxRectangle(cx - w / 2, cy - h / 2, w, h);
const alpha = mxUtils.toRadians(
mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION) || 0
mxUtils.getValue(state.style, STYLE_ROTATION) || 0
);
if (alpha != 0) {
@ -1455,7 +1416,7 @@ const mxUtils = {
* Returns the scroll origin of the given document or the current document
* if no document is given.
*/
getDocumentScrollOrigin: doc => {
getDocumentScrollOrigin: (doc) => {
const wnd = doc.defaultView || doc.parentWindow;
const x =
@ -1563,7 +1524,7 @@ const mxUtils = {
*
* n - String representing the possibly numeric value.
*/
isNumeric: n => {
isNumeric: (n) => {
return (
!isNaN(parseFloat(n)) &&
isFinite(n) &&
@ -1580,7 +1541,7 @@ const mxUtils = {
*
* n - String representing the possibly numeric value.
*/
isInteger: n => {
isInteger: (n) => {
return String(parseInt(n)) === String(n);
},
@ -1766,7 +1727,7 @@ const mxUtils = {
*
* src - URL that points to the image to be displayed.
*/
createImage: src => {
createImage: (src) => {
let imageNode = null;
imageNode = document.createElement('img');
imageNode.setAttribute('src', src);
@ -1816,7 +1777,7 @@ const mxUtils = {
*
* style - String of the form [(stylename|key=value);].
*/
getStylename: style => {
getStylename: (style) => {
if (style != null) {
const pairs = style.split(';');
const stylename = pairs[0];
@ -1839,7 +1800,7 @@ const mxUtils = {
*
* style - String of the form [(stylename|key=value);].
*/
getStylenames: style => {
getStylenames: (style) => {
const result = [];
if (style != null) {
@ -1927,7 +1888,7 @@ const mxUtils = {
* Removes all stylenames from the given style and returns the updated
* style.
*/
removeAllStylenames: style => {
removeAllStylenames: (style) => {
const result = [];
if (style != null) {
@ -1963,11 +1924,7 @@ const mxUtils = {
try {
for (let i = 0; i < cells.length; i += 1) {
if (cells[i] != null) {
const style = mxUtils.setStyle(
cells[i].getStyle(),
key,
value
);
const style = mxUtils.setStyle(cells[i].getStyle(), key, value);
model.setStyle(cells[i], style);
}
}
@ -2152,16 +2109,16 @@ const mxUtils = {
let dy = -0.5;
// Horizontal alignment
if (align === mxConstants.ALIGN_LEFT) {
if (align === ALIGN_LEFT) {
dx = 0;
} else if (align === mxConstants.ALIGN_RIGHT) {
} else if (align === ALIGN_RIGHT) {
dx = -1;
}
// Vertical alignment
if (valign === mxConstants.ALIGN_TOP) {
if (valign === ALIGN_TOP) {
dy = 0;
} else if (valign === mxConstants.ALIGN_BOTTOM) {
} else if (valign === ALIGN_BOTTOM) {
dy = -1;
}
@ -2194,41 +2151,32 @@ const mxUtils = {
* fontStyle - Optional font style.
*/
getSizeForString: (text, fontSize, fontFamily, textWidth, fontStyle) => {
fontSize = fontSize != null ? fontSize : mxConstants.DEFAULT_FONTSIZE;
fontFamily =
fontFamily != null ? fontFamily : mxConstants.DEFAULT_FONTFAMILY;
fontSize = fontSize != null ? fontSize : DEFAULT_FONTSIZE;
fontFamily = fontFamily != null ? fontFamily : DEFAULT_FONTFAMILY;
const div = document.createElement('div');
// Sets the font size and family
div.style.fontFamily = fontFamily;
div.style.fontSize = `${Math.round(fontSize)}px`;
div.style.lineHeight = `${Math.round(
fontSize * mxConstants.LINE_HEIGHT
)}px`;
div.style.lineHeight = `${Math.round(fontSize * LINE_HEIGHT)}px`;
// Sets the font style
if (fontStyle != null) {
if ((fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
if ((fontStyle & FONT_BOLD) === FONT_BOLD) {
div.style.fontWeight = 'bold';
}
if ((fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
if ((fontStyle & FONT_ITALIC) === FONT_ITALIC) {
div.style.fontStyle = 'italic';
}
const txtDecor = [];
if (
(fontStyle & mxConstants.FONT_UNDERLINE) ==
mxConstants.FONT_UNDERLINE
) {
if ((fontStyle & FONT_UNDERLINE) == FONT_UNDERLINE) {
txtDecor.push('underline');
}
if (
(fontStyle & mxConstants.FONT_STRIKETHROUGH) ==
mxConstants.FONT_STRIKETHROUGH
) {
if ((fontStyle & FONT_STRIKETHROUGH) == FONT_STRIKETHROUGH) {
txtDecor.push('line-through');
}
@ -2283,8 +2231,7 @@ const mxUtils = {
return 1;
}
pageFormat =
pageFormat != null ? pageFormat : mxConstants.PAGE_FORMAT_A4_PORTRAIT;
pageFormat = pageFormat != null ? pageFormat : PAGE_FORMAT_A4_PORTRAIT;
border = border != null ? border : 0;
const availablePageWidth = pageFormat.width - border * 2;
@ -2519,7 +2466,7 @@ const mxUtils = {
*
* graph - <mxGraph> to be printed.
*/
printScreen: graph => {
printScreen: (graph) => {
const wnd = window.open();
const bounds = graph.getGraphBounds();
mxUtils.show(graph, wnd.document);
@ -2537,7 +2484,7 @@ const mxUtils = {
} else {
print();
}
}
},
};
export default mxUtils;

9
packages/core/src/util/mxXmlUtils.js
View File

@ -1,6 +1,7 @@
import mxPoint from './datatypes/mxPoint';
import mxTemporaryCellStates from '../view/cell/mxTemporaryCellStates';
import mxCodec from '../serialization/mxCodec';
import { DIALECT_SVG, NS_SVG } from './mxConstants';
/**
* Function: createXmlDocument
@ -56,7 +57,7 @@ export const createMsXmlDocument = () => {
*
* xml - String that contains the XML data.
*/
export const parseXml = xml => {
export const parseXml = (xml) => {
const parser = new DOMParser();
return parser.parseFromString(xml, 'text/xml');
};
@ -87,12 +88,12 @@ export const getViewXml = (graph, scale, cells, x0, y0) => {
const { drawPane } = view;
const { overlayPane } = view;
if (graph.dialect === mxConstants.DIALECT_SVG) {
view.drawPane = document.createElementNS(mxConstants.NS_SVG, 'g');
if (graph.dialect === DIALECT_SVG) {
view.drawPane = document.createElementNS(NS_SVG, 'g');
view.canvas.appendChild(view.drawPane);
// Redirects cell overlays into temporary container
view.overlayPane = document.createElementNS(mxConstants.NS_SVG, 'g');
view.overlayPane = document.createElementNS(NS_SVG, 'g');
view.canvas.appendChild(view.overlayPane);
} else {
view.drawPane = view.drawPane.cloneNode(false);

46
packages/core/src/view/cell/mxCell.ts
View File

@ -5,13 +5,12 @@
* Type definitions from the typed-mxgraph project
*/
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import { NODETYPE_ELEMENT } from '../../util/mxConstants';
import mxGeometry from '../../util/datatypes/mxGeometry';
import mxCellOverlay from './mxCellOverlay';
import { clone } from '../../util/mxCloneUtils';
import mxPoint from "../../util/datatypes/mxPoint";
import mxCellPath from "./mxCellPath";
import mxPoint from '../../util/datatypes/mxPoint';
import mxCellPath from './mxCellPath';
/**
* Cells are the elements of the graph model. They represent the state
@ -438,7 +437,8 @@ class mxCell {
*/
// getIndex(child: mxCell): number;
getIndex(child: mxCell | null): number {
return mxUtils.indexOf(this.children, child);
if (child === null || !this.children) return -1;
return this.children.indexOf(child);
}
/**
@ -540,7 +540,8 @@ class mxCell {
*/
// getEdgeIndex(edge: mxCell): number;
getEdgeIndex(edge: mxCell): number {
return mxUtils.indexOf(this.edges, edge);
if (!this.edges) return -1;
return this.edges.indexOf(edge);
}
/**
@ -573,7 +574,7 @@ class mxCell {
if (
this.edges == null ||
edge.getTerminal(!isOutgoing) !== this ||
mxUtils.indexOf(this.edges, edge) < 0
this.edges.indexOf(edge) < 0
) {
if (this.edges == null) {
this.edges = [];
@ -636,8 +637,7 @@ class mxCell {
const userObject = this.getValue();
return (
userObject != null &&
(userObject.nodeType === mxConstants.NODETYPE_ELEMENT &&
userObject.hasAttribute
(userObject.nodeType === NODETYPE_ELEMENT && userObject.hasAttribute
? userObject.hasAttribute(name)
: userObject.getAttribute(name) != null)
);
@ -657,7 +657,7 @@ class mxCell {
getAttribute(name: string, defaultValue: any): any {
const userObject = this.getValue();
const val =
userObject != null && userObject.nodeType === mxConstants.NODETYPE_ELEMENT
userObject != null && userObject.nodeType === NODETYPE_ELEMENT
? userObject.getAttribute(name)
: null;
return val != null ? val : defaultValue;
@ -674,10 +674,7 @@ class mxCell {
// setAttribute(name: string, value: any): void;
setAttribute(name: string, value: any): void {
const userObject = this.getValue();
if (
userObject != null &&
userObject.nodeType === mxConstants.NODETYPE_ELEMENT
) {
if (userObject != null && userObject.nodeType === NODETYPE_ELEMENT) {
userObject.setAttribute(name, value);
}
}
@ -717,7 +714,6 @@ class mxCell {
*/
// getNearestCommonAncestor(cell1: mxCell, cell2: mxCell): mxCell;
getNearestCommonAncestor(cell2: mxCell | null): mxCell | null {
// Creates the cell path for the second cell
let path = mxCellPath.create(<mxCell>cell2);
@ -762,7 +758,6 @@ class mxCell {
*/
// isAncestor(parent: mxCell, child: mxCell): boolean;
isAncestor(child: mxCell | null): boolean {
while (child != null && child !== this) {
child = <mxCell>child.getParent();
}
@ -795,9 +790,7 @@ class mxCell {
* Default is false.
*/
// getChildCells(parent: mxCell, vertices: boolean, edges: boolean): Array<mxCell>;
getChildCells(vertices: boolean=false,
edges: boolean=false): mxCell[] {
getChildCells(vertices: boolean = false, edges: boolean = false): mxCell[] {
const childCount = this.getChildCount();
const result = [];
@ -824,8 +817,10 @@ class mxCell {
* @param {mxCell} ignoredEdge that represents an edge to be ignored.
*/
// getDirectedEdgeCount(cell: mxCell, outgoing: boolean, ignoredEdge: boolean): number;
getDirectedEdgeCount(outgoing: boolean,
ignoredEdge: mxCell | null=null): number {
getDirectedEdgeCount(
outgoing: boolean,
ignoredEdge: mxCell | null = null
): number {
let count = 0;
const edgeCount = this.getEdgeCount();
@ -876,10 +871,11 @@ class mxCell {
* Default is true.
*/
// getEdges(cell: mxCell, incoming?: boolean, outgoing?: boolean, includeLoops?: boolean): Array<mxCell>;
getEdges(incoming: boolean=true,
outgoing: boolean=true,
includeLoops: boolean=true) {
getEdges(
incoming: boolean = true,
outgoing: boolean = true,
includeLoops: boolean = true
) {
const edgeCount = this.getEdgeCount();
const result = [];

201
packages/core/src/view/cell/mxCellEditor.ts
View File

@ -9,17 +9,48 @@ import mxUtils from '../../util/mxUtils';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxEvent from '../../util/event/mxEvent';
import mxClient from '../../mxClient';
import mxConstants from '../../util/mxConstants';
import {
ABSOLUTE_LINE_HEIGHT,
ALIGN_CENTER,
ALIGN_LEFT,
ALIGN_MIDDLE,
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
DEFAULT_TEXT_DIRECTION,
DIALECT_STRICTHTML,
FONT_BOLD,
FONT_ITALIC,
FONT_STRIKETHROUGH,
FONT_UNDERLINE,
LINE_HEIGHT,
STYLE_ALIGN,
STYLE_FONTCOLOR,
STYLE_LABEL_POSITION,
STYLE_LABEL_WIDTH,
STYLE_OVERFLOW,
STYLE_VERTICAL_ALIGN,
STYLE_VERTICAL_LABEL_POSITION,
WORD_WRAP,
} from '../../util/mxConstants';
import mxText from '../../shape/mxText';
import mxGraph from '../graph/mxGraph';
import mxCell from './mxCell';
import mxMouseEvent from '../../util/event/mxMouseEvent';
import mxCellState from './mxCellState';
import mxShape from "../../shape/mxShape";
import mxEventObject from "../../util/event/mxEventObject";
import {extractTextWithWhitespace, isNode} from '../../util/mxDomUtils';
import { htmlEntities, replaceTrailingNewlines } from '../../util/mxStringUtils';
import { getSource, isConsumed, isControlDown, isMetaDown, isShiftDown } from '../../util/mxEventUtils';
import mxShape from '../../shape/mxShape';
import mxEventObject from '../../util/event/mxEventObject';
import { extractTextWithWhitespace, isNode } from '../../util/mxDomUtils';
import {
htmlEntities,
replaceTrailingNewlines,
} from '../../util/mxStringUtils';
import {
getSource,
isConsumed,
isControlDown,
isMetaDown,
isShiftDown,
} from '../../util/mxEventUtils';
/**
* Class: mxCellEditor
@ -401,25 +432,17 @@ class mxCellEditor {
installListeners(elt: HTMLElement) {
// Applies value if text is dragged
// LATER: Gesture mouse events ignored for starting move
mxEvent.addListener(
elt,
'dragstart',
(evt: Event) => {
mxEvent.addListener(elt, 'dragstart', (evt: Event) => {
this.graph.stopEditing(false);
mxEvent.consume(evt);
}
);
});
// Applies value if focus is lost
mxEvent.addListener(
elt,
'blur',
(evt: Event) => {
mxEvent.addListener(elt, 'blur', (evt: Event) => {
if (this.blurEnabled) {
this.focusLost();
}
}
);
});
// Updates modified state and handles placeholder text
mxEvent.addListener(elt, 'keydown', (evt: KeyboardEvent) => {
@ -464,10 +487,7 @@ class mxCellEditor {
// In Safari and FF, an empty text is represented by <BR> which isn't enough to force a valid size
const textarea = <HTMLElement>this.textarea;
if (
textarea.innerHTML.length === 0 ||
textarea.innerHTML === '<br>'
) {
if (textarea.innerHTML.length === 0 || textarea.innerHTML === '<br>') {
textarea.innerHTML = this.getEmptyLabelText();
this.clearOnChange = textarea.innerHTML.length > 0;
} else {
@ -484,11 +504,7 @@ class mxCellEditor {
const evtName = 'input';
const resizeHandler = (evt: Event) => {
if (
this.editingCell != null &&
this.autoSize &&
!isConsumed(evt)
) {
if (this.editingCell != null && this.autoSize && !isConsumed(evt)) {
// Asynchronous is needed for keydown and shows better results for input events overall
// (ie non-blocking and cases where the offsetWidth/-Height was wrong at this time)
if (this.resizeThread != null) {
@ -578,13 +594,13 @@ class mxCellEditor {
(this.bounds.width >= 2 || this.bounds.height >= 2) &&
this.textarea.innerHTML !== this.getEmptyLabelText()
) {
this.textarea.style.wordWrap = mxConstants.WORD_WRAP;
this.textarea.style.wordWrap = WORD_WRAP;
this.textarea.style.whiteSpace = 'normal';
if (state.style.overflow !== 'fill') {
this.textarea.style.width = `${Math.round(
this.bounds.width / scale
) + this.wordWrapPadding}px`;
this.textarea.style.width = `${
Math.round(this.bounds.width / scale) + this.wordWrapPadding
}px`;
}
} else {
this.textarea.style.whiteSpace = 'nowrap';
@ -594,26 +610,14 @@ class mxCellEditor {
}
}
} else {
const lw = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_WIDTH,
null
);
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
m = state.text != null && this.align == null ? state.text.margin : null;
if (m == null) {
m = mxUtils.getAlignmentAsPoint(
this.align ||
mxUtils.getValue(
state.style,
mxConstants.STYLE_ALIGN,
mxConstants.ALIGN_CENTER
),
mxUtils.getValue(
state.style,
mxConstants.STYLE_VERTICAL_ALIGN,
mxConstants.ALIGN_MIDDLE
)
mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_CENTER),
mxUtils.getValue(state.style, STYLE_VERTICAL_ALIGN, ALIGN_MIDDLE)
);
}
@ -634,13 +638,13 @@ class mxCellEditor {
let bounds = mxRectangle.fromRectangle(state);
let hpos = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_POSITION,
mxConstants.ALIGN_CENTER
STYLE_LABEL_POSITION,
ALIGN_CENTER
);
let vpos = mxUtils.getValue(
state.style,
mxConstants.STYLE_VERTICAL_LABEL_POSITION,
mxConstants.ALIGN_MIDDLE
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
bounds =
@ -654,7 +658,7 @@ class mxCellEditor {
if (
!state.view.graph.cellRenderer.legacySpacing ||
state.style[mxConstants.STYLE_OVERFLOW] !== 'width'
state.style[STYLE_OVERFLOW] !== 'width'
) {
// @ts-ignore
const dummy = new mxText(); // FIXME!!!! ===================================================================================================
@ -691,13 +695,11 @@ class mxCellEditor {
bounds.x + spacingLeft,
bounds.y + spacingTop,
bounds.width -
(hpos === mxConstants.ALIGN_CENTER && lw == null
(hpos === ALIGN_CENTER && lw == null
? spacingLeft + spacingRight
: 0),
bounds.height -
(vpos === mxConstants.ALIGN_MIDDLE
? spacingTop + spacingBottom
: 0)
(vpos === ALIGN_MIDDLE ? spacingTop + spacingBottom : 0)
);
}
@ -717,7 +719,7 @@ class mxCellEditor {
(this.bounds.width >= 2 || this.bounds.height >= 2) &&
this.textarea.innerHTML !== this.getEmptyLabelText()
) {
this.textarea.style.wordWrap = mxConstants.WORD_WRAP;
this.textarea.style.wordWrap = WORD_WRAP;
this.textarea.style.whiteSpace = 'normal';
// Forces automatic reflow if text is removed from an oversize label and normal word wrap
@ -811,7 +813,10 @@ class mxCellEditor {
* trigger - Optional mouse event that triggered the editor.
*/
// startEditing(cell: mxCell, trigger?: MouseEvent): void;
startEditing(cell: mxCell, trigger: mxMouseEvent | MouseEvent | null = null): void {
startEditing(
cell: mxCell,
trigger: mxMouseEvent | MouseEvent | null = null
): void {
this.stopEditing(true);
this.align = null;
@ -830,39 +835,30 @@ class mxCellEditor {
// Configures the style of the in-place editor
const { scale } = this.graph.getView();
const size =
state.style.fontSize != null
? state.style.fontSize
: mxConstants.DEFAULT_FONTSIZE;
state.style.fontSize != null ? state.style.fontSize : DEFAULT_FONTSIZE;
const family =
state.style.fontFamily != null
? state.style.fontFamily
: mxConstants.DEFAULT_FONTFAMILY;
const color = mxUtils.getValue(
state.style,
mxConstants.STYLE_FONTCOLOR,
'black'
);
const align = mxUtils.getValue(
state.style,
mxConstants.STYLE_ALIGN,
mxConstants.ALIGN_LEFT
);
const bold = (state.style.fontStyle || 0) & mxConstants.FONT_BOLD;
const italic = (state.style.fontStyle || 0) & mxConstants.FONT_ITALIC;
: DEFAULT_FONTFAMILY;
const color = mxUtils.getValue(state.style, STYLE_FONTCOLOR, 'black');
const align = mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_LEFT);
const bold = (state.style.fontStyle || 0) & FONT_BOLD;
const italic = (state.style.fontStyle || 0) & FONT_ITALIC;
const txtDecor = [];
if ((state.style.fontStyle || 0) & mxConstants.FONT_UNDERLINE) {
if ((state.style.fontStyle || 0) & FONT_UNDERLINE) {
txtDecor.push('underline');
}
if ((state.style.fontStyle || 0) & mxConstants.FONT_STRIKETHROUGH) {
if ((state.style.fontStyle || 0) & FONT_STRIKETHROUGH) {
txtDecor.push('line-through');
}
const textarea = <HTMLElement>this.textarea;
textarea.style.lineHeight = mxConstants.ABSOLUTE_LINE_HEIGHT
? `${Math.round(size * mxConstants.LINE_HEIGHT)}px`
: String(mxConstants.LINE_HEIGHT);
textarea.style.backgroundColor = this.getBackgroundColor(state) || 'transparent';
textarea.style.lineHeight = ABSOLUTE_LINE_HEIGHT
? `${Math.round(size * LINE_HEIGHT)}px`
: String(LINE_HEIGHT);
textarea.style.backgroundColor =
this.getBackgroundColor(state) || 'transparent';
textarea.style.textDecoration = txtDecor.join(' ');
textarea.style.fontWeight = bold ? 'bold' : 'normal';
textarea.style.fontStyle = italic ? 'italic' : '';
@ -876,12 +872,12 @@ class mxCellEditor {
let dir = (this.textDirection =
state.style.textDirection != null
? state.style.textDirection
: mxConstants.DEFAULT_TEXT_DIRECTION);
: DEFAULT_TEXT_DIRECTION);
if (dir === 'auto') {
if (
state.text != null &&
state.text.dialect !== mxConstants.DIALECT_STRICTHTML &&
state.text.dialect !== DIALECT_STRICTHTML &&
!isNode(state.text.value)
) {
dir = state.text.getAutoDirection();
@ -895,21 +891,18 @@ class mxCellEditor {
}
// Sets the initial editing value
textarea.innerHTML = this.getInitialValue(state, <mxMouseEvent>trigger) || '';
textarea.innerHTML =
this.getInitialValue(state, <mxMouseEvent>trigger) || '';
this.initialValue = textarea.innerHTML;
// Uses an optional text value for empty labels which is cleared
// when the first keystroke appears. This makes it easier to see
// that a label is being edited even if the label is empty.
if (
textarea.innerHTML.length === 0 ||
textarea.innerHTML === '<br>'
) {
if (textarea.innerHTML.length === 0 || textarea.innerHTML === '<br>') {
textarea.innerHTML = <string>this.getEmptyLabelText();
this.clearOnChange = true;
} else {
this.clearOnChange =
textarea.innerHTML === this.getEmptyLabelText();
this.clearOnChange = textarea.innerHTML === this.getEmptyLabelText();
}
// @ts-ignore
@ -930,14 +923,11 @@ class mxCellEditor {
this.autoSize &&
// @ts-ignore
(this.graph.model.isEdge(state.cell) ||
state.style[mxConstants.STYLE_OVERFLOW] !== 'fill')
state.style[STYLE_OVERFLOW] !== 'fill')
) {
window.setTimeout(
mxUtils.bind(this, () => {
window.setTimeout(() => {
this.resize();
}),
0
);
}, 0);
}
this.resize();
@ -1037,9 +1027,7 @@ class mxCellEditor {
}
if (this.align != null) {
this.graph.setCellStyles(mxConstants.STYLE_ALIGN, this.align, [
state.cell,
]);
this.graph.setCellStyles(STYLE_ALIGN, this.align, [state.cell]);
}
} finally {
this.graph.getModel().endUpdate();
@ -1062,10 +1050,7 @@ class mxCellEditor {
// prepareTextarea(): void;
prepareTextarea(): void {
const textarea = <HTMLElement>this.textarea;
if (
textarea.lastChild != null &&
textarea.lastChild.nodeName === 'BR'
) {
if (textarea.lastChild != null && textarea.lastChild.nodeName === 'BR') {
textarea.removeChild(textarea.lastChild);
}
}
@ -1116,9 +1101,11 @@ class mxCellEditor {
if (
!isEdge &&
state.view.graph.cellRenderer.legacySpacing &&
state.style[mxConstants.STYLE_OVERFLOW] === 'fill'
state.style[STYLE_OVERFLOW] === 'fill'
) {
result = (<mxShape>state.shape).getLabelBounds(mxRectangle.fromRectangle(state));
result = (<mxShape>state.shape).getLabelBounds(
mxRectangle.fromRectangle(state)
);
} else {
// @ts-ignore
const dummy = new mxText(); // FIXME!!!! ===================================================================================================
@ -1197,10 +1184,12 @@ class mxCellEditor {
// Applies the horizontal and vertical label positions
if (state.cell.isVertex()) {
const horizontal: string = <string>mxUtils.getStringValue(
const horizontal: string = <string>(
mxUtils.getStringValue(
state.style,
mxConstants.STYLE_LABEL_POSITION,
mxConstants.ALIGN_CENTER
STYLE_LABEL_POSITION,
ALIGN_CENTER
)
);
if (horizontal === 'left') {

347
packages/core/src/view/cell/mxCellRenderer.ts
View File

@ -20,7 +20,60 @@ import mxSwimlane from '../../shape/mxSwimlane';
import mxImageShape from '../../shape/node/mxImageShape';
import mxLabel from '../../shape/mxLabel';
import mxText from '../../shape/mxText';
import mxConstants from '../../util/mxConstants';
import {
ALIGN_CENTER,
ALIGN_MIDDLE,
DEFAULT_FONTFAMILY,
DEFAULT_FONTSIZE,
DEFAULT_FONTSTYLE,
DEFAULT_TEXT_DIRECTION,
DIALECT_PREFERHTML,
DIALECT_STRICTHTML,
DIALECT_SVG,
SHAPE_ACTOR,
SHAPE_ARROW,
SHAPE_ARROW_CONNECTOR,
SHAPE_CLOUD,
SHAPE_CONNECTOR,
SHAPE_CYLINDER,
SHAPE_DOUBLE_ELLIPSE,
SHAPE_ELLIPSE,
SHAPE_HEXAGON,
SHAPE_IMAGE,
SHAPE_LABEL,
SHAPE_LINE,
SHAPE_RECTANGLE,
SHAPE_RHOMBUS,
SHAPE_SWIMLANE,
SHAPE_TRIANGLE,
STYLE_ALIGN,
STYLE_FILLCOLOR,
STYLE_FONTCOLOR,
STYLE_FONTFAMILY,
STYLE_FONTSIZE,
STYLE_FONTSTYLE,
STYLE_GRADIENTCOLOR,
STYLE_HORIZONTAL,
STYLE_INDICATOR_DIRECTION,
STYLE_INDICATOR_STROKECOLOR,
STYLE_LABEL_BACKGROUNDCOLOR,
STYLE_LABEL_BORDERCOLOR,
STYLE_LABEL_POSITION,
STYLE_LABEL_WIDTH,
STYLE_OVERFLOW,
STYLE_ROTATION,
STYLE_SHAPE,
STYLE_SPACING,
STYLE_SPACING_BOTTOM,
STYLE_SPACING_LEFT,
STYLE_SPACING_RIGHT,
STYLE_SPACING_TOP,
STYLE_STROKECOLOR,
STYLE_TEXT_DIRECTION,
STYLE_TEXT_OPACITY,
STYLE_VERTICAL_ALIGN,
STYLE_VERTICAL_LABEL_POSITION,
} from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxStencilRegistry from '../../shape/node/mxStencilRegistry';
@ -33,8 +86,8 @@ import mxPoint from '../../util/datatypes/mxPoint';
import mxShape from '../../shape/mxShape';
import mxCellState from './mxCellState';
import mxCell from './mxCell';
import mxGraphModel from "../graph/mxGraphModel";
import mxCellOverlay from "./mxCellOverlay";
import mxGraphModel from '../graph/mxGraphModel';
import mxCellOverlay from './mxCellOverlay';
import { getClientX, getClientY, getSource } from '../../util/mxEventUtils';
import { isNode } from '../../util/mxDomUtils';
@ -78,7 +131,7 @@ class mxCellRenderer {
* known to all instances of this class. For adding new shapes you should
* use the static <mxCellRenderer.registerShape> function.
*/
static defaultShapes: { [key: string]: typeof mxShape; } = {};
static defaultShapes: { [key: string]: typeof mxShape } = {};
/**
* Variable: defaultEdgeShape
@ -160,7 +213,7 @@ class mxCellRenderer {
// static registerShape(key: string, shape: new (...args: any) => mxShape): void;
static registerShape(key: string, shape: typeof mxShape) {
mxCellRenderer.defaultShapes[key] = shape;
};
}
/**
* Function: initializeShape
@ -195,9 +248,7 @@ class mxCellRenderer {
if (state.style != null) {
// Checks if there is a stencil for the name and creates
// a shape instance for the stencil if one exists
const stencil = mxStencilRegistry.getStencil(
state.style[mxConstants.STYLE_SHAPE]
);
const stencil = mxStencilRegistry.getStencil(state.style[STYLE_SHAPE]);
if (stencil != null) {
shape = new mxShape(stencil);
} else {
@ -243,11 +294,11 @@ class mxCellRenderer {
*/
// getShapeConstructor(state: mxCellState): any;
getShapeConstructor(state: mxCellState) {
let ctor = this.getShape(state.style[mxConstants.STYLE_SHAPE]);
let ctor = this.getShape(state.style[STYLE_SHAPE]);
if (ctor == null) {
ctor = <typeof mxShape>(state.cell.isEdge()
? this.defaultEdgeShape
: this.defaultVertexShape);
ctor = <typeof mxShape>(
(state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape)
);
}
return ctor;
}
@ -267,9 +318,11 @@ class mxCellRenderer {
shape.apply(state);
shape.image = state.view.graph.getImage(state);
shape.indicatorColor = state.view.graph.getIndicatorColor(state);
shape.indicatorStrokeColor = state.style[mxConstants.STYLE_INDICATOR_STROKECOLOR];
shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(state);
shape.indicatorDirection = state.style[mxConstants.STYLE_INDICATOR_DIRECTION];
shape.indicatorStrokeColor = state.style[STYLE_INDICATOR_STROKECOLOR];
shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
state
);
shape.indicatorDirection = state.style[STYLE_INDICATOR_DIRECTION];
shape.indicatorImage = state.view.graph.getIndicatorImage(state);
this.postConfigureShape(state);
}
@ -285,15 +338,11 @@ class mxCellRenderer {
// postConfigureShape(state: mxCellState): void;
postConfigureShape(state: mxCellState) {
if (state.shape != null) {
this.resolveColor(
state,
'indicatorGradientColor',
mxConstants.STYLE_GRADIENTCOLOR
);
this.resolveColor(state, 'indicatorColor', mxConstants.STYLE_FILLCOLOR);
this.resolveColor(state, 'gradient', mxConstants.STYLE_GRADIENTCOLOR);
this.resolveColor(state, 'stroke', mxConstants.STYLE_STROKECOLOR);
this.resolveColor(state, 'fill', mxConstants.STYLE_FILLCOLOR);
this.resolveColor(state, 'indicatorGradientColor', STYLE_GRADIENTCOLOR);
this.resolveColor(state, 'indicatorColor', STYLE_FILLCOLOR);
this.resolveColor(state, 'gradient', STYLE_GRADIENTCOLOR);
this.resolveColor(state, 'stroke', STYLE_STROKECOLOR);
this.resolveColor(state, 'fill', STYLE_FILLCOLOR);
}
}
@ -309,14 +358,14 @@ class mxCellRenderer {
if (state.style != null) {
const values = ['inherit', 'swimlane', 'indicated'];
const styles = [
mxConstants.STYLE_FILLCOLOR,
mxConstants.STYLE_STROKECOLOR,
mxConstants.STYLE_GRADIENTCOLOR,
mxConstants.STYLE_FONTCOLOR,
STYLE_FILLCOLOR,
STYLE_STROKECOLOR,
STYLE_GRADIENTCOLOR,
STYLE_FONTCOLOR,
];
for (let i = 0; i < styles.length; i += 1) {
if (mxUtils.indexOf(values, state.style[styles[i]]) >= 0) {
if (values.indexOf(state.style[styles[i]]) >= 0) {
return true;
}
}
@ -332,8 +381,7 @@ class mxCellRenderer {
*/
// resolveColor(state: mxCellState, field: string, key: string): void;
resolveColor(state: mxCellState, field: string, key: string) {
const shape =
key === mxConstants.STYLE_FONTCOLOR ? state.text : state.shape;
const shape = key === STYLE_FONTCOLOR ? state.text : state.shape;
if (shape != null) {
const { graph } = state.view;
@ -347,8 +395,7 @@ class mxCellRenderer {
} else if (value === 'swimlane') {
// @ts-ignore
shape[field] =
key === mxConstants.STYLE_STROKECOLOR ||
key === mxConstants.STYLE_FONTCOLOR
key === STYLE_STROKECOLOR || key === STYLE_FONTCOLOR
? '#000000'
: '#ffffff';
@ -366,19 +413,19 @@ class mxCellRenderer {
// @ts-ignore
shape[field] = state.shape.indicatorColor;
} else if (
key !== mxConstants.STYLE_FILLCOLOR &&
value === mxConstants.STYLE_FILLCOLOR &&
key !== STYLE_FILLCOLOR &&
value === STYLE_FILLCOLOR &&
state.shape != null
) {
// @ts-ignore
shape[field] = state.style[mxConstants.STYLE_FILLCOLOR];
shape[field] = state.style[STYLE_FILLCOLOR];
} else if (
key !== mxConstants.STYLE_STROKECOLOR &&
value === mxConstants.STYLE_STROKECOLOR &&
key !== STYLE_STROKECOLOR &&
value === STYLE_STROKECOLOR &&
state.shape != null
) {
// @ts-ignore
shape[field] = state.style[mxConstants.STYLE_STROKECOLOR];
shape[field] = state.style[STYLE_STROKECOLOR];
}
if (referenced != null) {
@ -387,8 +434,7 @@ class mxCellRenderer {
shape[field] = null;
if (rstate != null) {
const rshape =
key === mxConstants.STYLE_FONTCOLOR ? rstate.text : rstate.shape;
const rshape = key === STYLE_FONTCOLOR ? rstate.text : rstate.shape;
if (rshape != null && field !== 'indicatorColor') {
// @ts-ignore
@ -433,13 +479,12 @@ class mxCellRenderer {
if (state.style.fontSize > 0 || state.style.fontSize == null) {
// Avoids using DOM node for empty labels
const isForceHtml =
graph.isHtmlLabel(state.cell) ||
(value != null && isNode(value));
graph.isHtmlLabel(state.cell) || (value != null && isNode(value));
state.text = new this.defaultTextShape(
value,
new mxRectangle(),
state.style.align || mxConstants.ALIGN_CENTER,
state.style.align || ALIGN_CENTER,
graph.getVerticalAlign(state),
state.style.fontColor,
state.style.fontFamily,
@ -457,12 +502,12 @@ class mxCellRenderer {
graph.isLabelClipped(state.cell),
state.style.overflow,
state.style.labelPadding,
state.style.textDirection || mxConstants.DEFAULT_TEXT_DIRECTION
state.style.textDirection || DEFAULT_TEXT_DIRECTION
);
state.text.opacity =
state.style.textOpacity == null ? 100 : state.style.textOpacity;
state.text.dialect = isForceHtml
? mxConstants.DIALECT_STRICTHTML
? DIALECT_STRICTHTML
: state.view.graph.dialect;
state.text.style = state.style;
state.text.state = state;
@ -485,7 +530,9 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which
// consumes and executes the source function
const pt = mxUtils.convertPoint(graph.container, x, y);
result = <mxCellState>graph.view.getState(graph.getCellAt(pt.x, pt.y));
result = <mxCellState>(
graph.view.getState(graph.getCellAt(pt.x, pt.y))
);
}
return result;
};
@ -500,7 +547,7 @@ class mxCellRenderer {
new mxMouseEvent(evt, state)
);
forceGetCell =
graph.dialect !== mxConstants.DIALECT_SVG &&
graph.dialect !== DIALECT_SVG &&
getSource(evt).nodeName === 'IMG';
}
},
@ -546,11 +593,7 @@ class mxCellRenderer {
*/
// initializeLabel(state: mxCellState, shape: mxShape): void;
initializeLabel(state: mxCellState, shape: mxShape) {
if (
mxClient.IS_SVG &&
mxClient.NO_FO &&
shape.dialect !== mxConstants.DIALECT_SVG
) {
if (mxClient.IS_SVG && mxClient.NO_FO && shape.dialect !== DIALECT_SVG) {
shape.init(state.view.graph.container);
} else {
shape.init(state.view.getDrawPane());
@ -605,7 +648,7 @@ class mxCellRenderer {
// Removes unused
if (state.overlays != null) {
state.overlays.visit((id: any, shape: { destroy: () => void; }) => {
state.overlays.visit((id: any, shape: { destroy: () => void }) => {
shape.destroy();
});
}
@ -634,9 +677,11 @@ class mxCellRenderer {
* <mxShape> that represents the overlay.
*/
// installCellOverlayListeners(state: mxCellState, overlay: mxCellOverlay, shape: mxShape): void;
installCellOverlayListeners(state: mxCellState,
installCellOverlayListeners(
state: mxCellState,
overlay: mxCellOverlay,
shape: mxShape) {
shape: mxShape
) {
const { graph } = state.view;
mxEvent.addListener(shape.node, 'click', (evt: Event) => {
@ -737,11 +782,12 @@ class mxCellRenderer {
* clickHandler - Optional function to implement clicks on the control.
*/
// initControl(state: mxCellState, control: mxShape, handleEvents: boolean, clickHandler?: Function): Element;
initControl(state: mxCellState,
initControl(
state: mxCellState,
control: mxShape,
handleEvents: boolean,
clickHandler: Function) {
clickHandler: Function
) {
const { graph } = state.view;
// In the special case where the label is in HTML and the display is SVG the image
@ -750,10 +796,10 @@ class mxCellRenderer {
const isForceHtml =
graph.isHtmlLabel(state.cell) &&
mxClient.NO_FO &&
graph.dialect === mxConstants.DIALECT_SVG;
graph.dialect === DIALECT_SVG;
if (isForceHtml) {
control.dialect = mxConstants.DIALECT_PREFERHTML;
control.dialect = DIALECT_PREFERHTML;
control.init(graph.container);
// @ts-ignore
control.node.style.zIndex = 1;
@ -803,7 +849,7 @@ class mxCellRenderer {
// @ts-ignore
node.addEventListener(
'touchend',
evt => {
(evt) => {
if (first != null) {
const tol = graph.tolerance;
@ -876,8 +922,7 @@ class mxCellRenderer {
let result = state;
if (
(graph.dialect !== mxConstants.DIALECT_SVG &&
getSource(evt).nodeName === 'IMG') ||
(graph.dialect !== DIALECT_SVG && getSource(evt).nodeName === 'IMG') ||
mxClient.IS_TOUCH
) {
const x = getClientX(evt);
@ -924,7 +969,7 @@ class mxCellRenderer {
// Uses double click timeout in mxGraph for quirks mode
if (graph.nativeDblClickEnabled) {
// @ts-ignore
mxEvent.addListener(state.shape.node, 'dblclick', evt => {
mxEvent.addListener(state.shape.node, 'dblclick', (evt) => {
if (this.isShapeEvent(state, evt)) {
graph.dblClick(evt, state.cell);
mxEvent.consume(evt);
@ -951,10 +996,8 @@ class mxCellRenderer {
const isForceHtml =
state.view.graph.isHtmlLabel(state.cell) ||
(value != null && isNode(value));
const dialect = isForceHtml
? mxConstants.DIALECT_STRICTHTML
: state.view.graph.dialect;
const overflow = state.style[mxConstants.STYLE_OVERFLOW] || 'visible';
const dialect = isForceHtml ? DIALECT_STRICTHTML : state.view.graph.dialect;
const overflow = state.style[STYLE_OVERFLOW] || 'visible';
if (
state.text != null &&
@ -1000,7 +1043,7 @@ class mxCellRenderer {
const bounds = this.getLabelBounds(state);
const nextScale = this.getTextScale(state);
this.resolveColor(state, 'color', mxConstants.STYLE_FONTCOLOR);
this.resolveColor(state, 'color', STYLE_FONTCOLOR);
if (
forced ||
@ -1055,7 +1098,8 @@ class mxCellRenderer {
) {
result =
// @ts-ignore
parseFloat(String(shape[property])) - parseFloat(String(shape.spacing)) !==
parseFloat(String(shape[property])) -
parseFloat(String(shape.spacing)) !==
(state.style[stylename] || defaultValue);
} else {
// @ts-ignore
@ -1066,34 +1110,22 @@ class mxCellRenderer {
}
return (
check(
'fontStyle',
mxConstants.STYLE_FONTSTYLE,
mxConstants.DEFAULT_FONTSTYLE
) ||
check(
'family',
mxConstants.STYLE_FONTFAMILY,
mxConstants.DEFAULT_FONTFAMILY
) ||
check('size', mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE) ||
check('color', mxConstants.STYLE_FONTCOLOR, 'black') ||
check('align', mxConstants.STYLE_ALIGN, '') ||
check('valign', mxConstants.STYLE_VERTICAL_ALIGN, '') ||
check('spacing', mxConstants.STYLE_SPACING, 2) ||
check('spacingTop', mxConstants.STYLE_SPACING_TOP, 0) ||
check('spacingRight', mxConstants.STYLE_SPACING_RIGHT, 0) ||
check('spacingBottom', mxConstants.STYLE_SPACING_BOTTOM, 0) ||
check('spacingLeft', mxConstants.STYLE_SPACING_LEFT, 0) ||
check('horizontal', mxConstants.STYLE_HORIZONTAL, true) ||
check('background', mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, null) ||
check('border', mxConstants.STYLE_LABEL_BORDERCOLOR, null) ||
check('opacity', mxConstants.STYLE_TEXT_OPACITY, 100) ||
check(
'textDirection',
mxConstants.STYLE_TEXT_DIRECTION,
mxConstants.DEFAULT_TEXT_DIRECTION
)
check('fontStyle', STYLE_FONTSTYLE, DEFAULT_FONTSTYLE) ||
check('family', STYLE_FONTFAMILY, DEFAULT_FONTFAMILY) ||
check('size', STYLE_FONTSIZE, DEFAULT_FONTSIZE) ||
check('color', STYLE_FONTCOLOR, 'black') ||
check('align', STYLE_ALIGN, '') ||
check('valign', STYLE_VERTICAL_ALIGN, '') ||
check('spacing', STYLE_SPACING, 2) ||
check('spacingTop', STYLE_SPACING_TOP, 0) ||
check('spacingRight', STYLE_SPACING_RIGHT, 0) ||
check('spacingBottom', STYLE_SPACING_BOTTOM, 0) ||
check('spacingLeft', STYLE_SPACING_LEFT, 0) ||
check('horizontal', STYLE_HORIZONTAL, true) ||
check('background', STYLE_LABEL_BACKGROUNDCOLOR, null) ||
check('border', STYLE_LABEL_BORDERCOLOR, null) ||
check('opacity', STYLE_TEXT_OPACITY, 100) ||
check('textDirection', STYLE_TEXT_DIRECTION, DEFAULT_TEXT_DIRECTION)
);
}
@ -1188,29 +1220,22 @@ class mxCellRenderer {
if (state.shape != null) {
const hpos = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_POSITION,
mxConstants.ALIGN_CENTER
STYLE_LABEL_POSITION,
ALIGN_CENTER
);
const vpos = mxUtils.getValue(
state.style,
mxConstants.STYLE_VERTICAL_LABEL_POSITION,
mxConstants.ALIGN_MIDDLE
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
if (
hpos === mxConstants.ALIGN_CENTER &&
vpos === mxConstants.ALIGN_MIDDLE
) {
if (hpos === ALIGN_CENTER && vpos === ALIGN_MIDDLE) {
bounds = state.shape.getLabelBounds(bounds);
}
}
// Label width style overrides actual label width
const lw = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_WIDTH,
null
);
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
if (lw != null) {
bounds.width = parseFloat(lw) * scale;
@ -1242,8 +1267,8 @@ class mxCellRenderer {
if (
!this.legacySpacing ||
(state.style[mxConstants.STYLE_OVERFLOW] !== 'fill' &&
state.style[mxConstants.STYLE_OVERFLOW] !== 'width')
(state.style[STYLE_OVERFLOW] !== 'fill' &&
state.style[STYLE_OVERFLOW] !== 'width')
) {
const s = state.view.scale;
// @ts-ignore
@ -1253,34 +1278,30 @@ class mxCellRenderer {
const hpos = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_POSITION,
mxConstants.ALIGN_CENTER
STYLE_LABEL_POSITION,
ALIGN_CENTER
);
const vpos = mxUtils.getValue(
state.style,
mxConstants.STYLE_VERTICAL_LABEL_POSITION,
mxConstants.ALIGN_MIDDLE
);
const lw = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_WIDTH,
null
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
bounds.width = Math.max(
0,
bounds.width -
(hpos === mxConstants.ALIGN_CENTER && lw == null
// @ts-ignore
? state.text.spacingLeft * s + state.text.spacingRight * s
(hpos === ALIGN_CENTER && lw == null
? // @ts-ignore
state.text.spacingLeft * s + state.text.spacingRight * s
: 0)
);
bounds.height = Math.max(
0,
bounds.height -
(vpos === mxConstants.ALIGN_MIDDLE
// @ts-ignore
? state.text.spacingTop * s + state.text.spacingBottom * s
(vpos === ALIGN_MIDDLE
? // @ts-ignore
state.text.spacingTop * s + state.text.spacingBottom * s
: 0)
);
}
@ -1323,12 +1344,12 @@ class mxCellRenderer {
* state - <mxCellState> whose overlays should be redrawn.
*/
// redrawCellOverlays(state: mxCellState, forced?: boolean): void;
redrawCellOverlays(state: mxCellState, forced: boolean=false) {
redrawCellOverlays(state: mxCellState, forced: boolean = false) {
this.createCellOverlays(state);
if (state.overlays != null) {
const rot = mxUtils.mod(
mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0),
mxUtils.getValue(state.style, STYLE_ROTATION, 0),
90
);
const rad = mxUtils.toRadians(rot);
@ -1382,16 +1403,16 @@ class mxCellRenderer {
* state - <mxCellState> whose control should be redrawn.
*/
// redrawControl(state: mxCellState, forced?: boolean): void;
redrawControl(state: mxCellState, forced: boolean=false) {
redrawControl(state: mxCellState, forced: boolean = false) {
const image = state.view.graph.getFoldingImage(state);
if (state.control != null && image != null) {
const bounds = this.getControlBounds(state, image.width, image.height);
const r = this.legacyControlPosition
? mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0)
// @ts-ignore
: state.shape.getTextRotation();
? mxUtils.getValue(state.style, STYLE_ROTATION, 0)
: // @ts-ignore
state.shape.getTextRotation();
const s = state.view.scale;
if (
@ -1417,7 +1438,11 @@ class mxCellRenderer {
* given state.
*/
// getControlBounds(state: mxCellState, w: number, h: number): mxRectangle;
getControlBounds(state: mxCellState, w: number, h: number): mxRectangle | null {
getControlBounds(
state: mxCellState,
w: number,
h: number
): mxRectangle | null {
if (state.control != null) {
const s = state.view.scale;
let cx = state.getCenterX();
@ -1432,7 +1457,7 @@ class mxCellRenderer {
let rot = state.shape.getShapeRotation();
if (this.legacyControlPosition) {
rot = mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0);
rot = mxUtils.getValue(state.style, STYLE_ROTATION, 0);
} else if (state.shape.isPaintBoundsInverted()) {
const t = (state.width - state.height) / 2;
cx += t;
@ -1487,10 +1512,11 @@ class mxCellRenderer {
* will not go into the <drawPane> (eg. HTML labels without foreignObjects).
*/
// insertStateAfter(state: mxCellState, node: Element, htmlNode: HTMLElement): void;
insertStateAfter(state: mxCellState,
insertStateAfter(
state: mxCellState,
node: HTMLElement | SVGElement | null,
htmlNode: HTMLElement | SVGElement | null) {
htmlNode: HTMLElement | SVGElement | null
) {
const shapes = this.getShapesForState(state);
for (let i = 0; i < shapes.length; i += 1) {
@ -1638,8 +1664,7 @@ class mxCellRenderer {
state.shape != null &&
state.shape.style != null &&
state.style != null &&
state.shape.style[mxConstants.STYLE_SHAPE] !==
state.style[mxConstants.STYLE_SHAPE]
state.shape.style[STYLE_SHAPE] !== state.style[STYLE_SHAPE]
) {
state.shape.destroy();
state.shape = null;
@ -1752,8 +1777,7 @@ class mxCellRenderer {
* Returns true if the given shape must be repainted.
*/
// isShapeInvalid(state: mxCellState, shape: mxShape): boolean;
isShapeInvalid(state: mxCellState,
shape: mxShape): boolean {
isShapeInvalid(state: mxCellState, shape: mxShape): boolean {
return (
shape.bounds == null ||
shape.scale !== state.view.scale ||
@ -1801,31 +1825,28 @@ class mxCellRenderer {
// Adds default shapes into the default shapes array
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);
mxCellRenderer.registerShape(SHAPE_RECTANGLE, mxRectangleShape);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_ELLIPSE, mxEllipse);
mxCellRenderer.registerShape(SHAPE_ELLIPSE, mxEllipse);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_RHOMBUS, mxRhombus);
mxCellRenderer.registerShape(SHAPE_RHOMBUS, mxRhombus);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_CYLINDER, mxCylinder);
mxCellRenderer.registerShape(mxConstants.SHAPE_CONNECTOR, mxConnector);
mxCellRenderer.registerShape(SHAPE_CYLINDER, mxCylinder);
mxCellRenderer.registerShape(SHAPE_CONNECTOR, mxConnector);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_ACTOR, mxActor);
mxCellRenderer.registerShape(mxConstants.SHAPE_TRIANGLE, mxTriangle);
mxCellRenderer.registerShape(mxConstants.SHAPE_HEXAGON, mxHexagon);
mxCellRenderer.registerShape(SHAPE_ACTOR, mxActor);
mxCellRenderer.registerShape(SHAPE_TRIANGLE, mxTriangle);
mxCellRenderer.registerShape(SHAPE_HEXAGON, mxHexagon);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_CLOUD, mxCloud);
mxCellRenderer.registerShape(mxConstants.SHAPE_LINE, mxLine);
mxCellRenderer.registerShape(mxConstants.SHAPE_ARROW, mxArrow);
mxCellRenderer.registerShape(
mxConstants.SHAPE_ARROW_CONNECTOR,
mxArrowConnector
);
mxCellRenderer.registerShape(SHAPE_CLOUD, mxCloud);
mxCellRenderer.registerShape(SHAPE_LINE, mxLine);
mxCellRenderer.registerShape(SHAPE_ARROW, mxArrow);
mxCellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, mxArrowConnector);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_DOUBLE_ELLIPSE, mxDoubleEllipse);
mxCellRenderer.registerShape(mxConstants.SHAPE_SWIMLANE, mxSwimlane);
mxCellRenderer.registerShape(SHAPE_DOUBLE_ELLIPSE, mxDoubleEllipse);
mxCellRenderer.registerShape(SHAPE_SWIMLANE, mxSwimlane);
// @ts-ignore
mxCellRenderer.registerShape(mxConstants.SHAPE_IMAGE, mxImageShape);
mxCellRenderer.registerShape(mxConstants.SHAPE_LABEL, mxLabel);
mxCellRenderer.registerShape(SHAPE_IMAGE, mxImageShape);
mxCellRenderer.registerShape(SHAPE_LABEL, mxLabel);
export default mxCellRenderer;

2
packages/core/src/view/connection/mxMultiplicity.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import mxUtils from '../../util/mxUtils';
import mxResources from '../../util/mxResources';
import { isNode } from '../../util/mxDomUtils';

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

File diff suppressed because it is too large Load Diff

3
packages/core/src/view/graph/mxGraphModel.ts
View File

@ -7,14 +7,11 @@
import mxEventSource from '../../util/event/mxEventSource';
import mxUndoableEdit from '../../util/undo/mxUndoableEdit';
import mxCellPath from '../cell/mxCellPath';
import mxDictionary from '../../util/datatypes/mxDictionary';
import mxObjectIdentity from '../../util/datatypes/mxObjectIdentity';
import mxCell from '../cell/mxCell';
import mxUtils from '../../util/mxUtils';
import mxEventObject from '../../util/event/mxEventObject';
import mxEvent from '../../util/event/mxEvent';
import mxPoint from '../../util/datatypes/mxPoint';
import mxChildChange from '../../atomic_changes/mxChildChange';
import mxCollapseChange from '../../atomic_changes/mxCollapseChange';
import mxGeometryChange from '../../atomic_changes/mxGeometryChange';

5
packages/core/src/view/graph/mxGraphSelectionModel.ts
View File

@ -9,7 +9,6 @@ import mxUndoableEdit from '../../util/undo/mxUndoableEdit';
import mxEventSource from '../../util/event/mxEventSource';
import mxEventObject from '../../util/event/mxEventObject';
import mxClient from '../../mxClient';
import mxUtils from '../../util/mxUtils';
import mxSelectionChange from '../../atomic_changes/mxSelectionChange';
import mxEvent from '../../util/event/mxEvent';
import mxCell from '../cell/mxCell';
@ -113,7 +112,7 @@ class mxGraphSelectionModel extends mxEventSource {
// isSelected(cell: mxCell): boolean;
isSelected(cell: mxCell): boolean {
if (cell != null) {
return mxUtils.indexOf(this.cells, cell) >= 0;
return this.cells.indexOf(cell) >= 0;
}
return false;
}
@ -302,7 +301,7 @@ class mxGraphSelectionModel extends mxEventSource {
// cellRemoved(cell: mxCell): void;
cellRemoved(cell: mxCell): void {
if (cell != null) {
const index = mxUtils.indexOf(this.cells, cell);
const index = this.cells.indexOf(cell);
if (index >= 0) {
this.cells.splice(index, 1);
}

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

@ -11,7 +11,33 @@ import mxDictionary from '../../util/datatypes/mxDictionary';
import mxEventSource from '../../util/event/mxEventSource';
import mxEventObject from '../../util/event/mxEventObject';
import mxRectangleShape from '../../shape/node/mxRectangleShape';
import mxConstants from '../../util/mxConstants';
import {
ALIGN_BOTTOM,
ALIGN_CENTER,
ALIGN_LEFT,
ALIGN_MIDDLE,
ALIGN_RIGHT,
ALIGN_TOP,
STYLE_ALIGN,
STYLE_EDGE,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_LABEL_POSITION,
STYLE_LABEL_WIDTH,
STYLE_LOOP,
STYLE_NOEDGESTYLE,
STYLE_ORTHOGONAL_LOOP,
STYLE_PERIMETER,
STYLE_PERIMETER_SPACING,
STYLE_ROTATION,
STYLE_ROUTING_CENTER_X,
STYLE_ROUTING_CENTER_Y,
STYLE_SOURCE_PERIMETER_SPACING,
STYLE_SOURCE_PORT,
STYLE_TARGET_PERIMETER_SPACING,
STYLE_TARGET_PORT,
STYLE_VERTICAL_LABEL_POSITION,
} from '../../util/mxConstants';
import mxClient from '../../mxClient';
import mxEvent from '../../util/event/mxEvent';
import mxUtils from '../../util/mxUtils';
@ -28,10 +54,15 @@ import mxImage from '../../util/image/mxImage';
import mxCurrentRootChange from '../../atomic_changes/mxCurrentRootChange';
import mxGraphModel from './mxGraphModel';
import mxShape from '../../shape/mxShape';
import mxGeometry from "../../util/datatypes/mxGeometry";
import mxConnectionConstraint from "../connection/mxConnectionConstraint";
import mxPopupMenuHandler from "../../handler/mxPopupMenuHandler";
import { getClientX, getClientY, getSource, isConsumed } from '../../util/mxEventUtils';
import mxGeometry from '../../util/datatypes/mxGeometry';
import mxConnectionConstraint from '../connection/mxConnectionConstraint';
import mxPopupMenuHandler from '../../handler/mxPopupMenuHandler';
import {
getClientX,
getClientY,
getSource,
isConsumed,
} from '../../util/mxEventUtils';
import { clone } from '../../util/mxCloneUtils';
/**
@ -85,21 +116,21 @@ class mxGraphView extends mxEventSource {
}
// TODO: Document me!
backgroundImage: mxImageShape | null=null;
backgroundImage: mxImageShape | null = null;
backgroundPageShape: mxShape | null=null;
backgroundPageShape: mxShape | null = null;
EMPTY_POINT: mxPoint = new mxPoint();
canvas: SVGElement | null=null;
canvas: SVGElement | null = null;
backgroundPane: SVGElement | null=null;
backgroundPane: SVGElement | null = null;
drawPane: SVGElement | null=null;
drawPane: SVGElement | null = null;
overlayPane: SVGElement | null=null;
overlayPane: SVGElement | null = null;
decoratorPane: SVGElement | null=null;
decoratorPane: SVGElement | null = null;
/**
* Specifies the resource key for the status message after a long operation.
@ -420,10 +451,7 @@ class mxGraphView extends mxEventSource {
* @param dy Y-coordinate of the translation.
*/
// scaleAndTranslate(scale: number, dx: number, dy: number): void;
scaleAndTranslate(scale: number,
dx: number,
dy: number): void {
scaleAndTranslate(scale: number, dx: number, dy: number): void {
const previousScale = this.scale;
const previousTranslate = new mxPoint(this.translate.x, this.translate.y);
@ -497,7 +525,7 @@ class mxGraphView extends mxEventSource {
*/
// clear(cell: mxCell, force?: boolean, recurse?: boolean): void;
clear(
cell: mxCell=<mxCell>(<mxGraph>this.graph).getModel().getRoot(),
cell: mxCell = <mxCell>(<mxGraph>this.graph).getModel().getRoot(),
force: boolean = false,
recurse: boolean = true
) {
@ -573,7 +601,7 @@ class mxGraphView extends mxEventSource {
* Default is {@link currentRoot} or the root of the model.
*/
// validate(cell?: mxCell): void;
validate(cell: mxCell | null=null) {
validate(cell: mxCell | null = null) {
const t0 = mxLog.enter('mxGraphView.validate');
window.status =
mxResources.get(this.updatingDocumentResource) ||
@ -583,13 +611,17 @@ class mxGraphView extends mxEventSource {
const graphBounds = this.getBoundingBox(
this.validateCellState(
<mxCell>this.validateCell(
<mxCell>(cell ||
<mxCell>(
this.validateCell(
<mxCell>(
(cell ||
(this.currentRoot != null
? this.currentRoot
: (<mxGraph>this.graph).getModel().getRoot()))
)
)
)
)
);
this.setGraphBounds(
graphBounds != null ? graphBounds : this.getEmptyBounds()
@ -623,7 +655,10 @@ class mxGraphView extends mxEventSource {
* Default is true.
*/
// getBoundingBox(state: mxCellState, recurse: boolean): mxRectangle;
getBoundingBox(state: mxCellState | null = null, recurse: boolean = true): mxRectangle | null {
getBoundingBox(
state: mxCellState | null = null,
recurse: boolean = true
): mxRectangle | null {
let bbox = null;
if (state != null) {
@ -746,10 +781,7 @@ class mxGraphView extends mxEventSource {
mxEvent.addGestureListeners(
this.backgroundPageShape.node,
(evt: Event) => {
graph.fireMouseEvent(
mxEvent.MOUSE_DOWN,
new mxMouseEvent(evt)
);
graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt));
},
(evt: Event) => {
// Hides the tooltip if mouse is outside container
@ -761,10 +793,7 @@ class mxGraphView extends mxEventSource {
}
if (graph.isMouseDown && !isConsumed(evt)) {
graph.fireMouseEvent(
mxEvent.MOUSE_MOVE,
new mxMouseEvent(evt)
);
graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt));
}
},
(evt: Event) => {
@ -843,9 +872,7 @@ class mxGraphView extends mxEventSource {
* is true.
*/
// validateCell(cell: mxCell, visible?: boolean): void;
validateCell(cell: mxCell,
visible: boolean = true): mxCell | null {
validateCell(cell: mxCell, visible: boolean = true): mxCell | null {
visible = visible && cell.isVisible();
const state = this.getState(cell, visible);
@ -858,8 +885,7 @@ class mxGraphView extends mxEventSource {
for (let i = 0; i < childCount; i += 1) {
this.validateCell(
<mxCell>cell.getChildAt(i),
visible &&
(!cell.isCollapsed() || cell === this.currentRoot)
visible && (!cell.isCollapsed() || cell === this.currentRoot)
);
}
}
@ -875,7 +901,6 @@ class mxGraphView extends mxEventSource {
*/
// validateCellState(cell: mxCell, recurse?: boolean): void;
validateCellState(cell: mxCell, recurse: boolean = true): mxCellState | null {
let state: mxCellState | null = null;
if (cell != null) {
@ -888,7 +913,9 @@ class mxGraphView extends mxEventSource {
state.invalid = false;
if (state.style == null || state.invalidStyle) {
state.style = (<mxGraph>this.graph).getCellStyle(<mxCell>state.cell);
state.style = (<mxGraph>this.graph).getCellStyle(
<mxCell>state.cell
);
state.invalidStyle = false;
}
@ -897,11 +924,21 @@ class mxGraphView extends mxEventSource {
}
state.setVisibleTerminalState(
<mxCellState>this.validateCellState(<mxCell>this.getVisibleTerminal(cell, true), false),
<mxCellState>(
this.validateCellState(
<mxCell>this.getVisibleTerminal(cell, true),
false
)
),
true
);
state.setVisibleTerminalState(
<mxCellState>this.validateCellState(<mxCell>this.getVisibleTerminal(cell, false), false),
<mxCellState>(
this.validateCellState(
<mxCell>this.getVisibleTerminal(cell, false),
false
)
),
false
);
@ -909,7 +946,11 @@ class mxGraphView extends mxEventSource {
// Repaint happens immediately after the cell is validated
if (cell !== this.currentRoot && !state.invalid) {
(<mxGraph>this.graph).cellRenderer.redraw(state, false, this.isRendering());
(<mxGraph>this.graph).cellRenderer.redraw(
state,
false,
this.isRendering()
);
// Handles changes to invertex paintbounds after update of rendering shape
state.updateCachedBounds();
@ -939,7 +980,6 @@ class mxGraphView extends mxEventSource {
*/
// updateCellState(state: mxCellState): void;
updateCellState(state: mxCellState) {
const absoluteOffset = <mxPoint>state.absoluteOffset;
const origin = <mxPoint>state.origin;
@ -958,7 +998,9 @@ class mxGraphView extends mxEventSource {
origin.y += (<mxPoint>pState.origin).y;
}
let offset = (<mxGraph>this.graph).getChildOffsetForCell(<mxCell>state.cell);
let offset = (<mxGraph>this.graph).getChildOffsetForCell(
<mxCell>state.cell
);
if (offset != null) {
origin.x += offset.x;
@ -969,7 +1011,9 @@ class mxGraphView extends mxEventSource {
if (geo != null) {
if (!state.cell.isEdge()) {
offset = <mxPoint>(geo.offset != null ? geo.offset : this.EMPTY_POINT);
offset = <mxPoint>(
(geo.offset != null ? geo.offset : this.EMPTY_POINT)
);
if (geo.relative && pState != null) {
if (pState.cell.isEdge()) {
@ -977,9 +1021,13 @@ class mxGraphView extends mxEventSource {
if (origin != null) {
origin.x +=
origin.x / this.scale - (<mxPoint>pState.origin).x - this.translate.x;
origin.x / this.scale -
(<mxPoint>pState.origin).x -
this.translate.x;
origin.y +=
origin.y / this.scale - (<mxPoint>pState.origin).y - this.translate.y;
origin.y / this.scale -
(<mxPoint>pState.origin).y -
this.translate.y;
}
} else {
origin.x += geo.x * <number>pState.unscaledWidth + offset.x;
@ -1028,16 +1076,12 @@ class mxGraphView extends mxEventSource {
* Validates the given cell state.
*/
// updateVertexState(state: mxCellState, geo: mxGeometry): void;
updateVertexState(state: mxCellState,
geo: mxGeometry) {
updateVertexState(state: mxCellState, geo: mxGeometry) {
const model = (<mxGraph>this.graph).getModel();
const pState = this.getState(state.cell.getParent());
if (geo.relative && pState != null && !pState.cell.isEdge()) {
const alpha = mxUtils.toRadians(
pState.style[mxConstants.STYLE_ROTATION] || '0'
);
const alpha = mxUtils.toRadians(pState.style[STYLE_ROTATION] || '0');
if (alpha !== 0) {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
@ -1056,9 +1100,7 @@ class mxGraphView extends mxEventSource {
* Validates the given cell state.
*/
// updateEdgeState(state: mxCellState, geo: mxGeometry): void;
updateEdgeState(state: mxCellState,
geo: mxGeometry) {
updateEdgeState(state: mxCellState, geo: mxGeometry) {
const source = <mxCellState>state.getVisibleTerminalState(true);
const target = <mxCellState>state.getVisibleTerminalState(false);
@ -1066,11 +1108,9 @@ class mxGraphView extends mxEventSource {
// as such edges are invalid and produce NPEs in the edge styles.
// Also removes connected edges that have no visible terminals.
if (
(state.cell.getTerminal(true) != null &&
source == null) ||
(state.cell.getTerminal(true) != null && source == null) ||
(source == null && geo.getTerminalPoint(true) == null) ||
(state.cell.getTerminal(false) != null &&
target == null) ||
(state.cell.getTerminal(false) != null && target == null) ||
(target == null && geo.getTerminalPoint(false) == null)
) {
this.clear(state.cell, true);
@ -1106,18 +1146,10 @@ class mxGraphView extends mxEventSource {
*/
// updateVertexLabelOffset(state: mxCellState): void;
updateVertexLabelOffset(state: mxCellState) {
const h = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_POSITION,
mxConstants.ALIGN_CENTER
);
const h = mxUtils.getValue(state.style, STYLE_LABEL_POSITION, ALIGN_CENTER);
if (h === mxConstants.ALIGN_LEFT) {
let lw = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_WIDTH,
null
);
if (h === ALIGN_LEFT) {
let lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
if (lw != null) {
lw *= this.scale;
@ -1127,28 +1159,20 @@ class mxGraphView extends mxEventSource {
// @ts-ignore
state.absoluteOffset.x -= lw;
} else if (h === mxConstants.ALIGN_RIGHT) {
} else if (h === ALIGN_RIGHT) {
// @ts-ignore
state.absoluteOffset.x += state.width;
} else if (h === mxConstants.ALIGN_CENTER) {
const lw = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_WIDTH,
null
);
} else if (h === ALIGN_CENTER) {
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
if (lw != null) {
// Aligns text block with given width inside the vertex width
const align = mxUtils.getValue(
state.style,
mxConstants.STYLE_ALIGN,
mxConstants.ALIGN_CENTER
);
const align = mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_CENTER);
let dx = 0;
if (align === mxConstants.ALIGN_CENTER) {
if (align === ALIGN_CENTER) {
dx = 0.5;
} else if (align === mxConstants.ALIGN_RIGHT) {
} else if (align === ALIGN_RIGHT) {
dx = 1;
}
@ -1161,14 +1185,14 @@ class mxGraphView extends mxEventSource {
const v = mxUtils.getValue(
state.style,
mxConstants.STYLE_VERTICAL_LABEL_POSITION,
mxConstants.ALIGN_MIDDLE
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
if (v === mxConstants.ALIGN_TOP) {
if (v === ALIGN_TOP) {
// @ts-ignore
state.absoluteOffset.y -= state.height;
} else if (v === mxConstants.ALIGN_BOTTOM) {
} else if (v === ALIGN_BOTTOM) {
// @ts-ignore
state.absoluteOffset.y += state.height;
}
@ -1193,21 +1217,15 @@ class mxGraphView extends mxEventSource {
*/
// stateValidated(state: mxCellState): void;
stateValidated(state: mxCellState): void {
const graph = (<mxGraph>this.graph);
const graph = <mxGraph>this.graph;
const fg =
(state.cell.isEdge() &&
graph.keepEdgesInForeground) ||
(state.cell.isVertex() &&
graph.keepEdgesInBackground);
(state.cell.isEdge() && graph.keepEdgesInForeground) ||
(state.cell.isVertex() && graph.keepEdgesInBackground);
const htmlNode = fg
? this.lastForegroundHtmlNode || this.lastHtmlNode
: this.lastHtmlNode;
const node = fg ? this.lastForegroundNode || this.lastNode : this.lastNode;
const result = graph.cellRenderer.insertStateAfter(
state,
node,
htmlNode
);
const result = graph.cellRenderer.insertStateAfter(state, node, htmlNode);
if (fg) {
this.lastForegroundHtmlNode = result[1];
@ -1227,9 +1245,11 @@ class mxGraphView extends mxEventSource {
* @param target {@link mxCellState} which represents the target terminal.
*/
// updateFixedTerminalPoints(edge: mxCellState, source: mxCellState, target: mxCellState): void;
updateFixedTerminalPoints(edge: mxCellState,
updateFixedTerminalPoints(
edge: mxCellState,
source: mxCellState,
target: mxCellState): void {
target: mxCellState
): void {
this.updateFixedTerminalPoint(
edge,
source,
@ -1256,12 +1276,12 @@ class mxGraphView extends mxEventSource {
* source - Boolean that specifies if the terminal is the source.
* constraint - <mxConnectionConstraint> that specifies the connection.
*/
updateFixedTerminalPoint(edge: mxCellState,
updateFixedTerminalPoint(
edge: mxCellState,
terminal: mxCellState,
source: boolean,
constraint: mxConnectionConstraint) {
constraint: mxConnectionConstraint
) {
edge.setAbsoluteTerminalPoint(
<mxPoint>this.getFixedTerminalPoint(edge, terminal, source, constraint),
source
@ -1280,14 +1300,20 @@ class mxGraphView extends mxEventSource {
* source - Boolean that specifies if the terminal is the source.
* constraint - <mxConnectionConstraint> that specifies the connection.
*/
getFixedTerminalPoint(edge: mxCellState,
getFixedTerminalPoint(
edge: mxCellState,
terminal: mxCellState,
source: boolean,
constraint: mxConnectionConstraint): mxPoint | null {
constraint: mxConnectionConstraint
): mxPoint | null {
let pt = null;
if (constraint != null) {
pt = (<mxGraph>this.graph).getConnectionPoint(terminal, constraint, false); // FIXME Rounding introduced bugs when calculating label positions -> , this.graph.isOrthogonal(edge));
pt = (<mxGraph>this.graph).getConnectionPoint(
terminal,
constraint,
false
); // FIXME Rounding introduced bugs when calculating label positions -> , this.graph.isOrthogonal(edge));
}
if (pt == null && terminal == null) {
@ -1354,11 +1380,12 @@ class mxGraphView extends mxEventSource {
* @param target {@link mxCellState} that represents the target terminal.
*/
// updatePoints(edge: mxCellState, points: mxPoint[], source: mxCellState, target: mxCellState): void;
updatePoints(edge: mxCellState,
updatePoints(
edge: mxCellState,
points: mxPoint[],
source: mxCellState,
target: mxCellState) {
target: mxCellState
) {
if (edge != null) {
const pts = [];
pts.push((<mxPoint[]>edge.absolutePoints)[0]);
@ -1412,10 +1439,11 @@ class mxGraphView extends mxEventSource {
* Transforms the given control point to an absolute point.
*/
// transformControlPoint(state: mxCellState, pt: mxPoint): mxPoint;
transformControlPoint(state: mxCellState,
transformControlPoint(
state: mxCellState,
pt: mxPoint,
ignoreScale: boolean=false): mxPoint | null {
ignoreScale: boolean = false
): mxPoint | null {
if (state != null && pt != null) {
const orig = <mxPoint>state.origin;
const scale = ignoreScale ? 1 : this.scale;
@ -1434,21 +1462,26 @@ class mxGraphView extends mxEventSource {
* returns true if the given edge is a loop and does not
*/
// isLoopStyleEnabled(edge: mxCellState, points: mxPoint[], source: mxCellState, target: mxCellState): boolean;
isLoopStyleEnabled(edge: mxCellState,
points: mxPoint[]=[],
source: mxCellState | null=null,
target: mxCellState | null=null): boolean {
const sc = (<mxGraph>this.graph).getConnectionConstraint(edge, source, true);
const tc = (<mxGraph>this.graph).getConnectionConstraint(edge, target, false);
isLoopStyleEnabled(
edge: mxCellState,
points: mxPoint[] = [],
source: mxCellState | null = null,
target: mxCellState | null = null
): boolean {
const sc = (<mxGraph>this.graph).getConnectionConstraint(
edge,
source,
true
);
const tc = (<mxGraph>this.graph).getConnectionConstraint(
edge,
target,
false
);
if (
(points == null || points.length < 2) &&
(!mxUtils.getValue(
edge.style,
mxConstants.STYLE_ORTHOGONAL_LOOP,
false
) ||
(!mxUtils.getValue(edge.style, STYLE_ORTHOGONAL_LOOP, false) ||
((sc == null || sc.point == null) && (tc == null || tc.point == null)))
) {
return source != null && source === target;
@ -1460,19 +1493,20 @@ class mxGraphView extends mxEventSource {
* Returns the edge style function to be used to render the given edge state.
*/
// getEdgeStyle(edge: mxCellState, points: mxPoint[], source: mxCellState, target: mxCellState): any;
getEdgeStyle(edge: mxCellState,
points: mxPoint[]=[],
source: mxCellState | null=null,
target: mxCellState | null=null): any {
getEdgeStyle(
edge: mxCellState,
points: mxPoint[] = [],
source: mxCellState | null = null,
target: mxCellState | null = null
): any {
let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target)
? mxUtils.getValue(
edge.style,
mxConstants.STYLE_LOOP,
STYLE_LOOP,
(<mxGraph>this.graph).defaultLoopStyle
)
: !mxUtils.getValue(edge.style, mxConstants.STYLE_NOEDGESTYLE, false)
? edge.style[mxConstants.STYLE_EDGE]
: !mxUtils.getValue(edge.style, STYLE_NOEDGESTYLE, false)
? edge.style[STYLE_EDGE]
: null;
// Converts string values to objects
@ -1499,9 +1533,11 @@ class mxGraphView extends mxEventSource {
* @param target {@link mxCellState} that represents the target terminal.
*/
// updateFloatingTerminalPoints(state: mxCellState, source: mxCellState, target: mxCellState): void;
updateFloatingTerminalPoints(state: mxCellState,
updateFloatingTerminalPoints(
state: mxCellState,
source: mxCellState,
target: mxCellState) {
target: mxCellState
) {
const pts = <mxPoint[]>state.absolutePoints;
const p0 = pts[0];
const pe = pts[pts.length - 1];
@ -1525,11 +1561,12 @@ class mxGraphView extends mxEventSource {
* @param source Boolean indicating if start is the source terminal state.
*/
// updateFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): void;
updateFloatingTerminalPoint(edge: mxCellState,
updateFloatingTerminalPoint(
edge: mxCellState,
start: mxCellState,
end: mxCellState,
source: boolean) {
source: boolean
) {
edge.setAbsoluteTerminalPoint(
<mxPoint>this.getFloatingTerminalPoint(edge, start, end, source),
source
@ -1546,18 +1583,17 @@ class mxGraphView extends mxEventSource {
* @param source Boolean indicating if start is the source terminal state.
*/
// getFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): mxPoint;
getFloatingTerminalPoint(edge: mxCellState,
getFloatingTerminalPoint(
edge: mxCellState,
start: mxCellState,
end: mxCellState,
source: boolean): mxPoint | null {
source: boolean
): mxPoint | null {
start = <mxCellState>this.getTerminalPort(edge, start, source);
let next = this.getNextPoint(edge, end, source);
const orth = (<mxGraph>this.graph).isOrthogonal(edge);
const alpha = mxUtils.toRadians(
Number(start.style[mxConstants.STYLE_ROTATION] || '0')
);
const alpha = mxUtils.toRadians(Number(start.style[STYLE_ROTATION] || '0'));
const center = new mxPoint(start.getCenterX(), start.getCenterY());
if (alpha !== 0) {
@ -1566,17 +1602,18 @@ class mxGraphView extends mxEventSource {
next = mxUtils.getRotatedPoint(next, cos, sin, center);
}
let border = parseFloat(
edge.style[mxConstants.STYLE_PERIMETER_SPACING] || 0
);
let border = parseFloat(edge.style[STYLE_PERIMETER_SPACING] || 0);
border += parseFloat(
edge.style[
source
? mxConstants.STYLE_SOURCE_PERIMETER_SPACING
: mxConstants.STYLE_TARGET_PERIMETER_SPACING
source ? STYLE_SOURCE_PERIMETER_SPACING : STYLE_TARGET_PERIMETER_SPACING
] || 0
);
let pt = this.getPerimeterPoint(start, <mxPoint>next, alpha === 0 && orth, border);
let pt = this.getPerimeterPoint(
start,
<mxPoint>next,
alpha === 0 && orth,
border
);
if (alpha !== 0) {
const cos = Math.cos(alpha);
@ -1596,17 +1633,19 @@ class mxGraphView extends mxEventSource {
* @param source Boolean indicating if the given terminal is the source terminal.
*/
// getTerminalPort(state: mxCellState, terminal: mxCellState, source: boolean): mxCellState;
getTerminalPort(state: mxCellState,
getTerminalPort(
state: mxCellState,
terminal: mxCellState,
source: boolean=false): mxCellState | null {
const key = source
? mxConstants.STYLE_SOURCE_PORT
: mxConstants.STYLE_TARGET_PORT;
source: boolean = false
): mxCellState | null {
const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT;
const id = mxUtils.getValue(state.style, key);
if (id != null) {
const tmp = this.getState((<mxGraph>this.graph).getModel().getCell(id), false);
const tmp = this.getState(
(<mxGraph>this.graph).getModel().getCell(id),
false
);
// Only uses ports where a cell state exists
if (tmp != null) {
@ -1629,10 +1668,12 @@ class mxGraphView extends mxEventSource {
* @param border Optional border between the perimeter and the shape.
*/
// getPerimeterPoint(terminal: mxCellState, next: mxPoint, orthogonal: boolean, border: number): mxPoint;
getPerimeterPoint(terminal: mxCellState,
getPerimeterPoint(
terminal: mxCellState,
next: mxPoint,
orthogonal: boolean,
border: number=0) {
border: number = 0
) {
let point = null;
if (terminal != null) {
@ -1647,10 +1688,8 @@ class mxGraphView extends mxEventSource {
let flipV = false;
if (terminal.cell.isVertex()) {
flipH =
mxUtils.getValue(terminal.style, mxConstants.STYLE_FLIPH, 0) == 1;
flipV =
mxUtils.getValue(terminal.style, mxConstants.STYLE_FLIPV, 0) == 1;
flipH = mxUtils.getValue(terminal.style, STYLE_FLIPH, 0) == 1;
flipV = mxUtils.getValue(terminal.style, STYLE_FLIPV, 0) == 1;
// Legacy support for stencilFlipH/V
if (terminal.shape != null && terminal.shape.stencil != null) {
@ -1699,7 +1738,7 @@ class mxGraphView extends mxEventSource {
getRoutingCenterX(state: mxCellState) {
const f =
state.style != null
? parseFloat(state.style[mxConstants.STYLE_ROUTING_CENTER_X]) || 0
? parseFloat(state.style[STYLE_ROUTING_CENTER_X]) || 0
: 0;
return state.getCenterX() + f * state.width;
}
@ -1711,7 +1750,7 @@ class mxGraphView extends mxEventSource {
getRoutingCenterY(state: mxCellState) {
const f =
state.style != null
? parseFloat(state.style[mxConstants.STYLE_ROUTING_CENTER_Y]) || 0
? parseFloat(state.style[STYLE_ROUTING_CENTER_Y]) || 0
: 0;
return state.getCenterY() + f * state.height;
}
@ -1762,9 +1801,7 @@ class mxGraphView extends mxEventSource {
border: number = 0
): mxRectangle | null {
if (terminal != null) {
border += parseFloat(
terminal.style[mxConstants.STYLE_PERIMETER_SPACING] || 0
);
border += parseFloat(terminal.style[STYLE_PERIMETER_SPACING] || 0);
}
return (<mxCellState>terminal).getPerimeterBounds(border * this.scale);
}
@ -1774,7 +1811,7 @@ class mxGraphView extends mxEventSource {
*/
// getPerimeterFunction(state: mxCellState): any;
getPerimeterFunction(state: mxCellState): Function | null {
let perimeter = state.style[mxConstants.STYLE_PERIMETER];
let perimeter = state.style[STYLE_PERIMETER];
// Converts string values to objects
if (typeof perimeter === 'string') {
@ -1801,10 +1838,11 @@ class mxGraphView extends mxEventSource {
* should be returned.
*/
// getNextPoint(edge: mxCellState, opposite: mxCellState, source: boolean): mxPoint;
getNextPoint(edge: mxCellState,
getNextPoint(
edge: mxCellState,
opposite: mxCellState | null,
source: boolean=false): mxPoint | null {
source: boolean = false
): mxPoint | null {
const pts = edge.absolutePoints;
let point = null;
@ -1830,9 +1868,7 @@ class mxGraphView extends mxEventSource {
* should be returned.
*/
// getVisibleTerminal(edge: mxCell, source: boolean): mxCell;
getVisibleTerminal(edge: mxCell,
source: boolean) {
getVisibleTerminal(edge: mxCell, source: boolean) {
const model = (<mxGraph>this.graph).getModel();
let result = edge.getTerminal(source);
let best = result;
@ -1931,8 +1967,7 @@ class mxGraphView extends mxEventSource {
* @param geometry {@link mxGeometry} that represents the relative location.
*/
// getPoint(state: mxCellState, geometry: mxGeometry): mxPoint;
getPoint(state: mxCellState,
geometry: mxGeometry | null=null): mxPoint {
getPoint(state: mxCellState, geometry: mxGeometry | null = null): mxPoint {
let x = state.getCenterX();
let y = state.getCenterY();
@ -1997,15 +2032,12 @@ class mxGraphView extends mxEventSource {
* @param y Specifies the y-coordinate of the absolute label location.
*/
// getRelativePoint(edgeState: mxCellState, x: number, y: number): mxPoint;
getRelativePoint(edgeState: mxCellState,
x: number,
y: number) {
getRelativePoint(edgeState: mxCellState, x: number, y: number) {
const model = (<mxGraph>this.graph).getModel();
const geometry = edgeState.cell.getGeometry();
if (geometry != null) {
const absolutePoints = (<mxPoint[]>edgeState.absolutePoints);
const absolutePoints = <mxPoint[]>edgeState.absolutePoints;
const pointCount = absolutePoints.length;
if (geometry.relative && pointCount > 1) {
@ -2152,19 +2184,13 @@ class mxGraphView extends mxEventSource {
* if it does not yet exist. Default is false.
*/
// getState(cell: mxCell, create?: boolean): mxCellState;
getState(cell: mxCell | null=null,
create: boolean=false) {
getState(cell: mxCell | null = null, create: boolean = false) {
let state: mxCellState | null = null;
if (cell != null) {
state = this.states.get(cell);
if (
create &&
(state == null || this.updateStyle) &&
cell.isVisible()
) {
if (create && (state == null || this.updateStyle) && cell.isVisible()) {
if (state == null) {
state = this.createState(cell);
this.states.put(cell, state);
@ -2227,7 +2253,11 @@ class mxGraphView extends mxEventSource {
*/
// createState(cell: mxCell): mxCellState;
createState(cell: mxCell): mxCellState {
return new mxCellState(this, cell, (<mxGraph>this.graph).getCellStyle(cell));
return new mxCellState(
this,
cell,
(<mxGraph>this.graph).getCellStyle(cell)
);
}
/**
@ -2356,15 +2386,11 @@ class mxGraphView extends mxEventSource {
// Adds listener for double click handling on background, this does always
// use native event handler, we assume that the DOM of the background
// does not change during the double click
mxEvent.addListener(
container,
'dblclick',
(evt: MouseEvent) => {
mxEvent.addListener(container, 'dblclick', (evt: MouseEvent) => {
if (this.isContainerEvent(evt)) {
graph.dblClick(evt);
}
}
);
});
// Workaround for touch events which started on some DOM node
// on top of the container, in which case the cells under the
@ -2382,7 +2408,9 @@ class mxGraphView extends mxEventSource {
// Dispatches the drop event to the graph which
// consumes and executes the source function
const pt = mxUtils.convertPoint(container, x, y);
state = (<mxGraphView>graph.view).getState(graph.getCellAt(pt.x, pt.y));
state = (<mxGraphView>graph.view).getState(
graph.getCellAt(pt.x, pt.y)
);
}
return state;
@ -2453,23 +2481,35 @@ class mxGraphView extends mxEventSource {
// createSvg(): Element;
createSvg() {
const { container } = <mxGraph>this.graph;
const canvas = this.canvas = document.createElementNS("http://www.w3.org/2000/svg", 'g');
const canvas = (this.canvas = document.createElementNS(
'http://www.w3.org/2000/svg',
'g'
));
// For background image
this.backgroundPane = document.createElementNS("http://www.w3.org/2000/svg", 'g');
this.backgroundPane = document.createElementNS(
'http://www.w3.org/2000/svg',
'g'
);
canvas.appendChild(this.backgroundPane);
// Adds two layers (background is early feature)
this.drawPane = document.createElementNS("http://www.w3.org/2000/svg", 'g');
this.drawPane = document.createElementNS('http://www.w3.org/2000/svg', 'g');
canvas.appendChild(this.drawPane);
this.overlayPane = document.createElementNS("http://www.w3.org/2000/svg", 'g');
this.overlayPane = document.createElementNS(
'http://www.w3.org/2000/svg',
'g'
);
canvas.appendChild(this.overlayPane);
this.decoratorPane = document.createElementNS("http://www.w3.org/2000/svg", 'g');
this.decoratorPane = document.createElementNS(
'http://www.w3.org/2000/svg',
'g'
);
canvas.appendChild(this.decoratorPane);
const root = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
root.style.left = '0px';
root.style.top = '0px';
root.style.width = '100%';
@ -2509,7 +2549,8 @@ class mxGraphView extends mxEventSource {
*/
// destroy(): void;
destroy() {
let root: SVGElement | null = this.canvas != null ? this.canvas.ownerSVGElement : null;
let root: SVGElement | null =
this.canvas != null ? this.canvas.ownerSVGElement : null;
if (root == null) {
root = this.canvas;
@ -2536,8 +2577,8 @@ class mxGraphView extends mxEventSource {
}
}
endHandler: Function | null=null;
moveHandler: Function | null=null;
endHandler: Function | null = null;
moveHandler: Function | null = null;
}
export default mxGraphView;

63
packages/core/src/view/graph/mxOutline.ts
View File

@ -6,7 +6,12 @@
*/
import mxMouseEvent from '../../util/event/mxMouseEvent';
import mxConstants from '../../util/mxConstants';
import {
OUTLINE_COLOR,
OUTLINE_HANDLE_FILLCOLOR,
OUTLINE_HANDLE_STROKECOLOR,
OUTLINE_STROKEWIDTH,
} from '../../util/mxConstants';
import mxPoint from '../../util/datatypes/mxPoint';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxRectangleShape from '../../shape/node/mxRectangleShape';
@ -15,7 +20,7 @@ import mxImageShape from '../../shape/node/mxImageShape';
import mxEvent from '../../util/event/mxEvent';
import mxUtils from '../../util/mxUtils';
import mxImage from '../../util/image/mxImage';
import mxEventObject from "../../util/event/mxEventObject";
import mxEventObject from '../../util/event/mxEventObject';
import { getSource, isMouseEvent } from '../../util/mxEventUtils';
/**
@ -82,11 +87,11 @@ class mxOutline {
// Do not repaint when suspended
const outlineGraphModelChanged = this.outline.graphModelChanged;
this.outline.graphModelChanged = mxUtils.bind(this, (changes: any) => {
this.outline.graphModelChanged = (changes: any) => {
if (!this.suspended && this.outline != null) {
outlineGraphModelChanged.apply(this.outline, [changes]);
}
});
};
// Enable faster painting in SVG
//const node = <SVGElement>this.outline.getView().getCanvas().parentNode;
@ -138,8 +143,8 @@ class mxOutline {
this.selectionBorder = new mxRectangleShape(
this.bounds,
null,
mxConstants.OUTLINE_COLOR,
mxConstants.OUTLINE_STROKEWIDTH
OUTLINE_COLOR,
OUTLINE_STROKEWIDTH
);
this.selectionBorder.dialect = this.outline.dialect;
this.selectionBorder.init(this.outline.getView().getOverlayPane());
@ -171,7 +176,7 @@ class mxOutline {
mxEvent.addGestureListeners(this.selectionBorder.node, handler);
// Creates a small blue rectangle for sizing (sizer handle)
const sizer = this.sizer = this.createSizer();
const sizer = (this.sizer = this.createSizer());
const sizerNode = <SVGGElement>sizer.node;
sizer.init(this.outline.getView().getOverlayPane());
@ -190,31 +195,31 @@ class mxOutline {
}
// TODO: Document me!!
sizer: mxRectangleShape | null=null;
sizer: mxRectangleShape | null = null;
selectionBorder: mxRectangleShape | null=null;
selectionBorder: mxRectangleShape | null = null;
updateHandler: Function | null=null;
updateHandler: Function | null = null;
refreshHandler: Function | null=null;
refreshHandler: Function | null = null;
panHandler: Function | null=null;
panHandler: Function | null = null;
active: boolean | null=null;
active: boolean | null = null;
bounds: mxRectangle | null=null;
bounds: mxRectangle | null = null;
zoom: boolean=false;
zoom: boolean = false;
startX: number | null=null;
startX: number | null = null;
startY: number | null=null;
startY: number | null = null;
dx0: number | null=null;
dx0: number | null = null;
dy0: number | null=null;
dy0: number | null = null;
index: number | null=null;
index: number | null = null;
/**
* Reference to the source {@link mxGraph}.
@ -226,7 +231,7 @@ class mxOutline {
* Reference to the {@link mxGraph} that renders the outline.
*/
// outline: mxGraph;
outline: mxGraph | null=null;
outline: mxGraph | null = null;
/**
* Renderhint to be used for the outline graph.
@ -385,8 +390,8 @@ class mxOutline {
const sizer = new mxRectangleShape(
new mxRectangle(0, 0, this.sizerSize, this.sizerSize),
mxConstants.OUTLINE_HANDLE_FILLCOLOR,
mxConstants.OUTLINE_HANDLE_STROKECOLOR
OUTLINE_HANDLE_FILLCOLOR,
OUTLINE_HANDLE_STROKECOLOR
);
sizer.dialect = outline.dialect;
return sizer;
@ -409,7 +414,8 @@ class mxOutline {
* Returns the offset for drawing the outline graph.
*/
// getOutlineOffset(scale?: number): mxPoint;
getOutlineOffset(scale: number): mxPoint | null { // TODO: Should number -> mxPoint?
getOutlineOffset(scale: number): mxPoint | null {
// TODO: Should number -> mxPoint?
return null;
}
@ -580,9 +586,7 @@ class mxOutline {
// mouseDown(sender: mxEventSource, me: mxMouseEvent): void;
mouseDown(sender: any, me: mxMouseEvent) {
if (this.enabled && this.showViewport) {
const tol = !isMouseEvent(me.getEvent())
? this.source.tolerance
: 0;
const tol = !isMouseEvent(me.getEvent()) ? this.source.tolerance : 0;
const hit =
tol > 0
? new mxRectangle(
@ -711,7 +715,10 @@ class mxOutline {
*/
// getTranslateForEvent(me: mxMouseEvent): mxPoint;
getTranslateForEvent(me: mxMouseEvent) {
return new mxPoint(me.getX() - <number>this.startX, me.getY() - <number>this.startY);
return new mxPoint(
me.getX() - <number>this.startX,
me.getY() - <number>this.startY
);
}
/**

10
packages/core/src/view/graph/mxPrintPreview.js
View File

@ -9,7 +9,7 @@ import mxTemporaryCellStates from '../cell/mxTemporaryCellStates';
import mxEvent from '../../util/event/mxEvent';
import mxClient from '../../mxClient';
import mxUtils from '../../util/mxUtils';
import mxConstants from '../../util/mxConstants';
import { DIALECT_SVG } from '../../util/mxConstants';
import { write } from '../../util/mxDomUtils';
/**
@ -563,13 +563,13 @@ class mxPrintPreview {
this.pageFormat.height,
0,
0,
mxUtils.bind(this, div => {
(div) => {
this.addGraphFragment(-dx, -dy, this.scale, pageNum, div, clip);
if (this.printBackgroundImage) {
this.insertBackgroundImage(div, -dx, -dy);
}
}),
},
pageNum
);
@ -853,7 +853,7 @@ class mxPrintPreview {
const overlayPane = view.getOverlayPane();
const realScale = scale;
if (this.graph.dialect === mxConstants.DIALECT_SVG) {
if (this.graph.dialect === DIALECT_SVG) {
view.createSvg();
// Uses CSS transform for scaling
@ -933,7 +933,7 @@ class mxPrintPreview {
// Creates the temporary cell states in the view and
// draws them onto the temporary DOM nodes in the view
const cells = [this.getRoot()];
temp = new mxTemporaryCellStates(view, scale, cells, null, state => {
temp = new mxTemporaryCellStates(view, scale, cells, null, (state) => {
return this.getLinkForCellState(state);
});
} finally {

27
packages/core/src/view/graph/mxSwimlaneManager.ts
View File

@ -8,12 +8,12 @@
import mxEventSource from '../../util/event/mxEventSource';
import mxUtils from '../../util/mxUtils';
import mxEvent from '../../util/event/mxEvent';
import mxConstants from '../../util/mxConstants';
import { STYLE_HORIZONTAL } from '../../util/mxConstants';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxGraph from './mxGraph';
import mxEventObject from "../../util/event/mxEventObject";
import mxCell from "../cell/mxCell";
import mxGeometry from "../../util/datatypes/mxGeometry";
import mxEventObject from '../../util/event/mxEventObject';
import mxCell from '../cell/mxCell';
import mxGeometry from '../../util/datatypes/mxGeometry';
/**
* @class mxSwimlaneManager
@ -37,17 +37,17 @@ class mxSwimlaneManager extends mxEventSource {
this.addEnabled = addEnabled;
this.resizeEnabled = resizeEnabled;
this.addHandler = mxUtils.bind(this, (sender: any, evt: mxEventObject) => {
this.addHandler = (sender: any, evt: mxEventObject) => {
if (this.isEnabled() && this.isAddEnabled()) {
this.cellsAdded(evt.getProperty('cells'));
}
});
};
this.resizeHandler = mxUtils.bind(this, (sender: any, evt: mxEventObject) => {
this.resizeHandler = (sender: any, evt: mxEventObject) => {
if (this.isEnabled() && this.isResizeEnabled()) {
this.cellsResized(evt.getProperty('cells'));
}
});
};
this.setGraph(graph);
}
@ -198,7 +198,7 @@ class mxSwimlaneManager extends mxEventSource {
*/
// isSwimlaneIgnored(swimlane: mxCell): boolean;
isSwimlaneIgnored(swimlane: mxCell): boolean {
return !((<mxGraph>this.getGraph()).isSwimlane(swimlane));
return !(<mxGraph>this.getGraph()).isSwimlane(swimlane);
}
/**
@ -209,7 +209,7 @@ class mxSwimlaneManager extends mxEventSource {
isCellHorizontal(cell: mxCell): boolean {
if ((<mxGraph>this.graph).isSwimlane(cell)) {
const style = (<mxGraph>this.graph).getCellStyle(cell);
return mxUtils.getValue(style, mxConstants.STYLE_HORIZONTAL, 1) == 1;
return mxUtils.getValue(style, STYLE_HORIZONTAL, 1) == 1;
}
return !this.isHorizontal();
}
@ -329,11 +329,12 @@ class mxSwimlaneManager extends mxEventSource {
* @param swimlane {@link mxCell} whose size has changed.
*/
// resizeSwimlane(swimlane: mxCell, w: number, h: number, parentHorizontal: boolean): void;
resizeSwimlane(swimlane: mxCell,
resizeSwimlane(
swimlane: mxCell,
w: number,
h: number,
parentHorizontal: boolean): void {
parentHorizontal: boolean
): void {
const model = (<mxGraph>this.graph).getModel();
model.beginUpdate();

20
packages/html/stories/Clipboard.stories.js
View File

@ -156,7 +156,7 @@ const Template = ({ label, ...args }) => {
mxEvent.addListener(
textInput,
'copy',
mxUtils.bind(this, function(evt) {
(evt) => {
if (graph.isEnabled() && !graph.isSelectionEmpty()) {
copyCells(
graph,
@ -167,20 +167,20 @@ const Template = ({ label, ...args }) => {
dx = 0;
dy = 0;
}
})
}
);
// Handles cut event by removing cells putting XML into text input
mxEvent.addListener(
textInput,
'cut',
mxUtils.bind(this, function(evt) {
(evt) => {
if (graph.isEnabled() && !graph.isSelectionEmpty()) {
copyCells(graph, graph.removeCells());
dx = -gs;
dy = -gs;
}
})
}
);
// Merges XML into existing graph and layers
@ -282,15 +282,13 @@ const Template = ({ label, ...args }) => {
if (provider != null) {
data =
mxUtils.indexOf(provider.types, 'text/html') >= 0
provider.types.indexOf('text/html') >= 0
? provider.getData('text/html')
: null;
if (
mxUtils.indexOf(
provider.types,
'text/plain' && (data == null || data.length === 0)
)
provider.types.indexOf('text/plain')
&& (data == null || data.length === 0)
) {
data = provider.getData('text/plain');
}
@ -315,9 +313,9 @@ const Template = ({ label, ...args }) => {
} else {
// Timeout for new value to appear
window.setTimeout(
mxUtils.bind(this, function() {
() => {
pasteText(textInput.value);
}),
},
0
);
}

1
packages/html/stories/Collapse.stories.js
View File

@ -12,7 +12,6 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxGraphModel,
mxRectangle
} = mxgraph;

3
packages/html/stories/ContextIcons.stories.js
View File

@ -18,9 +18,6 @@ const Template = ({ label, ...args }) => {
mxGraph,
mxEvent,
mxRubberband,
mxConnectionHandler,
mxConnectionConstraint,
mxGeometry,
mxEventUtils,
mxUtils,
mxVertexHandler

1
packages/html/stories/Control.stories.js
View File

@ -22,7 +22,6 @@ const Template = ({ label, ...args }) => {
mxImageShape,
mxRectangle,
mxCellRenderer,
mxUtils,
mxImage
} = mxgraph;

6
packages/html/stories/Drop.stories.js
View File

@ -20,14 +20,8 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxDomUtils,
mxRubberband,
mxDragSource,
mxUtils,
mxGestureUtils,
mxEdgeHandler,
mxGraphHandler,
mxGuide,
mxEventUtils,
mxEvent,
mxClient

3
packages/html/stories/DynamicStyle.stories.js
View File

@ -18,8 +18,7 @@ const Template = ({ label, ...args }) => {
mxGraph,
mxUtils,
mxConstants,
mxRubberband,
mxStencilRegistry
mxRubberband
} = mxgraph;
const container = document.createElement('div');

1
packages/html/stories/EdgeTolerance.stories.js
View File

@ -12,7 +12,6 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxUtils
} = mxgraph;

1
packages/html/stories/Editing.stories.js
View File

@ -12,7 +12,6 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxKeyHandler,
mxUtils,
mxDomUtils,

5
packages/html/stories/FileIO.stories.js
View File

@ -12,11 +12,6 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRectangleShape,
mxDomHelpers,
mxText,
mxPoint,
mxRectangle,
mxConstants
} = mxgraph;

3
packages/html/stories/FixedIcons.stories.js
View File

@ -16,10 +16,7 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxDomHelpers,
mxImageShape,
mxRectangle,
mxConstants,
mxUtils,

18
packages/html/stories/HelloWorld.stories.js
View File

@ -8,17 +8,17 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {mxGraph, mxEvent, mxRubberband} = mxgraph;
const { mxGraph, mxEvent, mxRubberband } = mxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -28,13 +28,11 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) mxEvent.disableContextMenu(container);
const graph = new mxGraph(container);
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new mxRubberband(graph);
const parent = graph.getDefaultParent();
@ -64,6 +62,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});

3
packages/html/stories/HierarchicalLayout.stories.js
View File

@ -21,14 +21,11 @@ const Template = ({ label, ...args }) => {
const {
mxGraph,
mxDomUtils,
mxDomHelpers,
mxCellRenderer,
mxFastOrganicLayout,
mxHierarchicalLayout,
mxPerimeter,
mxEvent,
mxRubberband,
mxUtils,
mxConstants
} = mxgraph;

2
packages/html/stories/HoverStyle.stories.js
View File

@ -16,10 +16,8 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxUtils,
mxConstants,
mxRubberband,
mxStencilRegistry,
mxCloneUtils
} = mxgraph;

3
packages/html/stories/Images.stories.js
View File

@ -12,13 +12,10 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxCloneUtils,
mxImage,
mxRectangle,
mxConstants,
mxUtils,
mxPerimeter
} = mxgraph;

1
packages/html/stories/JsonData.stories.js
View File

@ -17,7 +17,6 @@ const Template = ({ label, ...args }) => {
mxDomHelpers,
mxCodecRegistry,
mxEvent,
mxWindow,
mxClient,
mxCodec,
mxDomUtils,

9
packages/html/stories/LabelPosition.stories.js
View File

@ -11,14 +11,7 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEdgeHandler,
mxGraphHandler,
mxCellRenderer,
mxMarker,
mxCylinder,
mxArrow,
mxPoint
mxGraph
} = mxgraph;
const container = document.createElement('div');

8
packages/html/stories/OrgChart.stories.js
View File

@ -309,9 +309,9 @@ const Template = ({ label, ...args }) => {
overlay.align = mxConstants.ALIGN_CENTER;
overlay.addListener(
mxEvent.CLICK,
mxUtils.bind(this, function(sender, evt) {
(sender, evt) => {
addChild(graph, cell);
})
}
);
graph.addCellOverlay(cell, overlay);
@ -327,9 +327,9 @@ const Template = ({ label, ...args }) => {
overlay.verticalAlign = mxConstants.ALIGN_TOP;
overlay.addListener(
mxEvent.CLICK,
mxUtils.bind(this, function(sender, evt) {
(sender, evt) => {
deleteSubtree(graph, cell);
})
}
);
graph.addCellOverlay(cell, overlay);

1
packages/html/stories/Overlays.stories.js
View File

@ -12,7 +12,6 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxDomHelpers,
mxCellOverlay,
mxEvent,
mxCellTracker,

4
packages/html/stories/SwimLanes.stories.js
View File

@ -14,7 +14,6 @@ const Template = ({ label, ...args }) => {
mxEditor,
mxConnectionHandler,
mxImage,
mxUtils,
mxPerimeter,
mxPoint,
mxConstants,
@ -23,8 +22,7 @@ const Template = ({ label, ...args }) => {
mxEvent,
mxSwimlaneManager,
mxStackLayout,
mxLayoutManager,
mxGraphModel
mxLayoutManager
} = mxgraph;
const container = document.createElement('div');

1
packages/html/stories/UserObject.stories.js
View File

@ -17,7 +17,6 @@ const Template = ({ label, ...args }) => {
mxDomHelpers,
mxKeyHandler,
mxEvent,
mxWindow,
mxXmlUtils,
mxCodec,
mxConstants,

5
packages/html/stories/Wrapping.stories.js
View File

@ -11,10 +11,7 @@ export default {
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxGraphView,
mxUtils
mxGraph
} = mxgraph;
const container = document.createElement('div');