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);
});
};
}
/**

258
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) => {
const cell = evt.getProperty('cell');
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();
}
})
);
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, () => {
const tstamp = new Date().toLocaleString();
this.setStatus(
`${mxResources.get(this.lastSavedResource) ||
this.lastSavedResource}: ${tstamp}`
);
})
);
this.addListener(mxEvent.SAVE, () => {
const tstamp = new Date().toLocaleString();
this.setStatus(
`${
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 => {
container.innerHTML = this.getTitle();
})
);
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`);
};

51
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.
@ -139,14 +145,14 @@ class mxCellHighlight {
if (
!this.keepOnTop &&
// @ts-ignore
// @ts-ignore
this.shape.node.parentNode.firstChild !== this.shape.node
) {
// @ts-ignore
this.shape.node.parentNode.insertBefore(
// @ts-ignore
this.shape.node,
// @ts-ignore
// @ts-ignore
this.shape.node,
// @ts-ignore
this.shape.node.parentNode.firstChild
);
}
@ -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),

258
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,49 +81,46 @@ class mxGraphHandler {
}
// Waits for the states and handlers to be updated
this.refreshThread = window.setTimeout(
mxUtils.bind(this, () => {
this.refreshThread = null;
this.refreshThread = window.setTimeout(() => {
this.refreshThread = null;
if (this.first != null && !this.suspended) {
// Updates preview with no translate to compute bounding box
const dx = this.currentDx;
const dy = this.currentDy;
this.currentDx = 0;
this.currentDy = 0;
if (this.first != null && !this.suspended) {
// Updates preview with no translate to compute bounding box
const dx = this.currentDx;
const dy = this.currentDy;
this.currentDx = 0;
this.currentDy = 0;
this.updatePreview();
this.bounds = this.graph.getView().getBounds(this.cells);
this.pBounds = this.getPreviewBounds(this.cells);
if (this.pBounds == null && !this.livePreviewUsed) {
this.reset();
} else {
// Restores translate and updates preview
this.currentDx = dx;
this.currentDy = dy;
this.updatePreview();
this.bounds = this.graph.getView().getBounds(this.cells);
this.pBounds = this.getPreviewBounds(this.cells);
this.updateHint();
if (this.pBounds == null && !this.livePreviewUsed) {
this.reset();
} else {
// Restores translate and updates preview
this.currentDx = dx;
this.currentDy = dy;
if (this.livePreviewUsed) {
// Forces update to ignore last visible state
this.setHandlesVisibleForCells(
this.graph.selectionCellsHandler.getHandledSelectionCells(),
false,
true
);
this.updatePreview();
this.updateHint();
if (this.livePreviewUsed) {
// Forces update to ignore last visible state
this.setHandlesVisibleForCells(
this.graph.selectionCellsHandler.getHandledSelectionCells(),
false,
true
);
this.updatePreview();
}
}
}
}),
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,83 +1246,81 @@ class mxGraphHandler {
const states = [];
if (this.allCells != null) {
this.allCells.visit(
mxUtils.bind(this, (key, state) => {
const realState = this.graph.view.getState(state.cell);
this.allCells.visit((key, state) => {
const realState = this.graph.view.getState(state.cell);
// Checks if cell was removed or replaced
if (realState !== state) {
state.destroy();
// Checks if cell was removed or replaced
if (realState !== state) {
state.destroy();
if (realState != null) {
this.allCells.put(state.cell, realState);
} else {
this.allCells.remove(state.cell);
}
state = realState;
if (realState != null) {
this.allCells.put(state.cell, realState);
} else {
this.allCells.remove(state.cell);
}
if (state != null) {
// Saves current state
const tempState = state.clone();
states.push([state, tempState]);
state = realState;
}
// Makes transparent for events to detect drop targets
if (state.shape != null) {
if (state.shape.originalPointerEvents == null) {
state.shape.originalPointerEvents = state.shape.pointerEvents;
}
if (state != null) {
// Saves current state
const tempState = state.clone();
states.push([state, tempState]);
state.shape.pointerEvents = false;
if (state.text != null) {
if (state.text.originalPointerEvents == null) {
state.text.originalPointerEvents = state.text.pointerEvents;
}
state.text.pointerEvents = false;
}
// Makes transparent for events to detect drop targets
if (state.shape != null) {
if (state.shape.originalPointerEvents == null) {
state.shape.originalPointerEvents = state.shape.pointerEvents;
}
// Temporarily changes position
if (state.cell.isVertex()) {
state.x += dx;
state.y += dy;
state.shape.pointerEvents = false;
// Draws the live preview
if (!this.cloning) {
state.view.graph.cellRenderer.redraw(state, true);
// Forces redraw of connected edges after all states
// have been updated but avoids update of state
state.view.invalidate(state.cell);
state.invalid = false;
// Hides folding icon
if (state.control != null && state.control.node != null) {
state.control.node.style.visibility = 'hidden';
}
if (state.text != null) {
if (state.text.originalPointerEvents == null) {
state.text.originalPointerEvents = state.text.pointerEvents;
}
// Clone live preview may use text bounds
else if (state.text != null) {
state.text.updateBoundingBox();
// Fixes preview box for edge labels
if (state.text.boundingBox != null) {
state.text.boundingBox.x += dx;
state.text.boundingBox.y += dy;
}
state.text.pointerEvents = false;
}
}
if (state.text.unrotatedBoundingBox != null) {
state.text.unrotatedBoundingBox.x += dx;
state.text.unrotatedBoundingBox.y += dy;
}
// Temporarily changes position
if (state.cell.isVertex()) {
state.x += dx;
state.y += dy;
// Draws the live preview
if (!this.cloning) {
state.view.graph.cellRenderer.redraw(state, true);
// Forces redraw of connected edges after all states
// have been updated but avoids update of state
state.view.invalidate(state.cell);
state.invalid = false;
// Hides folding icon
if (state.control != null && state.control.node != null) {
state.control.node.style.visibility = 'hidden';
}
}
// Clone live preview may use text bounds
else if (state.text != null) {
state.text.updateBoundingBox();
// Fixes preview box for edge labels
if (state.text.boundingBox != null) {
state.text.boundingBox.x += dx;
state.text.boundingBox.y += dy;
}
if (state.text.unrotatedBoundingBox != null) {
state.text.unrotatedBoundingBox.x += dx;
state.text.unrotatedBoundingBox.y += dy;
}
}
}
})
);
}
});
}
// 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();
}

314
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';
@ -190,160 +190,160 @@ import '../css/common.css';
export default {
mxClient,
mxLog,
mxObjectIdentity,
mxDictionary,
mxResources,
mxPoint,
mxRectangle,
mxEffects,
mxUtils,
mxConstants,
mxEventObject,
mxMouseEvent,
mxEventSource,
mxEvent,
mxXmlRequest,
mxClipboard,
mxWindow,
mxForm,
mxImage,
mxDivResizer,
mxDragSource,
mxToolbar,
mxUndoableEdit,
mxUndoManager,
mxUrlConverter,
mxPanningManager,
mxPopupMenu,
mxAutoSaveManager,
mxAnimation,
mxMorphing,
mxImageBundle,
mxImageExport,
mxAbstractCanvas2D,
mxXmlCanvas2D,
mxSvgCanvas2D,
mxGuide,
mxShape,
mxStencil,
mxStencilRegistry,
mxMarker,
mxActor,
mxCloud,
mxRectangleShape,
mxEllipse,
mxDoubleEllipse,
mxRhombus,
mxPolyline,
mxArrow,
mxArrowConnector,
mxText,
mxTriangle,
mxHexagon,
mxLine,
mxImageShape,
mxLabel,
mxCylinder,
mxConnector,
mxSwimlane,
mxGraphLayout,
mxStackLayout,
mxPartitionLayout,
mxCompactTreeLayout,
mxRadialTreeLayout,
mxFastOrganicLayout,
mxCircleLayout,
mxParallelEdgeLayout,
mxCompositeLayout,
mxEdgeLabelLayout,
mxGraphAbstractHierarchyCell,
mxGraphHierarchyNode,
mxGraphHierarchyEdge,
mxGraphHierarchyModel,
mxSwimlaneModel,
mxHierarchicalLayoutStage,
mxMedianHybridCrossingReduction,
mxMinimumCycleRemover,
mxCoordinateAssignment,
mxSwimlaneOrdering,
mxHierarchicalLayout,
mxSwimlaneLayout,
mxGraphModel,
mxCell,
mxGeometry,
mxCellPath,
mxPerimeter,
mxPrintPreview,
mxStylesheet,
mxCellState,
mxGraphSelectionModel,
mxCellEditor,
mxCellRenderer,
mxEdgeStyle,
mxStyleRegistry,
mxGraphView,
mxGraph,
mxCellOverlay,
mxOutline,
mxMultiplicity,
mxLayoutManager,
mxSwimlaneManager,
mxTemporaryCellStates,
mxCellStatePreview,
mxConnectionConstraint,
mxGraphHandler,
mxPanningHandler,
mxPopupMenuHandler,
mxCellMarker,
mxSelectionCellsHandler,
mxConnectionHandler,
mxConstraintHandler,
mxRubberband,
mxHandle,
mxVertexHandler,
mxEdgeHandler,
mxElbowEdgeHandler,
mxEdgeSegmentHandler,
mxKeyHandler,
mxTooltipHandler,
mxCellTracker,
mxCellHighlight,
mxDefaultKeyHandler,
mxDefaultPopupMenu,
mxDefaultToolbar,
mxEditor,
mxCodecRegistry,
mxCodec,
mxObjectCodec,
mxCellCodec,
mxModelCodec,
mxRootChangeCodec,
mxChildChangeCodec,
mxTerminalChangeCodec,
mxGenericChangeCodec,
// mxGraphCodec,
// mxGraphViewCodec,
// mxStylesheetCodec,
// mxDefaultKeyHandlerCodec,
// mxDefaultToolbarCodec,
// mxDefaultPopupMenuCodec,
// mxEditorCodec,
mxCloneUtils,
mxDomUtils,
mxEventUtils,
mxGestureUtils,
mxStringUtils,
mxXmlUtils,
mxDomHelpers,
mxCellAttributeChange,
mxChildChange,
mxCollapseChange,
mxCurrentRootChange,
mxGeometryChange,
mxRootChange,
mxSelectionChange,
mxStyleChange,
mxTerminalChange,
mxValueChange,
mxVisibleChange
mxObjectIdentity,
mxDictionary,
mxResources,
mxPoint,
mxRectangle,
mxEffects,
mxUtils,
mxConstants,
mxEventObject,
mxMouseEvent,
mxEventSource,
mxEvent,
mxXmlRequest,
mxClipboard,
mxWindow,
mxForm,
mxImage,
mxDivResizer,
mxDragSource,
mxToolbar,
mxUndoableEdit,
mxUndoManager,
mxUrlConverter,
mxPanningManager,
mxPopupMenu,
mxAutoSaveManager,
mxAnimation,
mxMorphing,
mxImageBundle,
mxImageExport,
mxAbstractCanvas2D,
mxXmlCanvas2D,
mxSvgCanvas2D,
mxGuide,
mxShape,
mxStencil,
mxStencilRegistry,
mxMarker,
mxActor,
mxCloud,
mxRectangleShape,
mxEllipse,
mxDoubleEllipse,
mxRhombus,
mxPolyline,
mxArrow,
mxArrowConnector,
mxText,
mxTriangle,
mxHexagon,
mxLine,
mxImageShape,
mxLabel,
mxCylinder,
mxConnector,
mxSwimlane,
mxGraphLayout,
mxStackLayout,
mxPartitionLayout,
mxCompactTreeLayout,
mxRadialTreeLayout,
mxFastOrganicLayout,
mxCircleLayout,
mxParallelEdgeLayout,
mxCompositeLayout,
mxEdgeLabelLayout,
mxGraphAbstractHierarchyCell,
mxGraphHierarchyNode,
mxGraphHierarchyEdge,
mxGraphHierarchyModel,
mxSwimlaneModel,
mxHierarchicalLayoutStage,
mxMedianHybridCrossingReduction,
mxMinimumCycleRemover,
mxCoordinateAssignment,
mxSwimlaneOrdering,
mxHierarchicalLayout,
mxSwimlaneLayout,
mxGraphModel,
mxCell,
mxGeometry,
mxCellPath,
mxPerimeter,
mxPrintPreview,
mxStylesheet,
mxCellState,
mxGraphSelectionModel,
mxCellEditor,
mxCellRenderer,
mxEdgeStyle,
mxStyleRegistry,
mxGraphView,
mxGraph,
mxCellOverlay,
mxOutline,
mxMultiplicity,
mxLayoutManager,
mxSwimlaneManager,
mxTemporaryCellStates,
mxCellStatePreview,
mxConnectionConstraint,
mxGraphHandler,
mxPanningHandler,
mxPopupMenuHandler,
mxCellMarker,
mxSelectionCellsHandler,
mxConnectionHandler,
mxConstraintHandler,
mxRubberband,
mxHandle,
mxVertexHandler,
mxEdgeHandler,
mxElbowEdgeHandler,
mxEdgeSegmentHandler,
mxKeyHandler,
mxTooltipHandler,
mxCellTracker,
mxCellHighlight,
mxDefaultKeyHandler,
mxDefaultPopupMenu,
mxDefaultToolbar,
mxEditor,
mxCodecRegistry,
mxCodec,
mxObjectCodec,
mxCellCodec,
mxModelCodec,
mxRootChangeCodec,
mxChildChangeCodec,
mxTerminalChangeCodec,
mxGenericChangeCodec,
// mxGraphCodec,
// mxGraphViewCodec,
// mxStylesheetCodec,
// mxDefaultKeyHandlerCodec,
// mxDefaultToolbarCodec,
// mxDefaultPopupMenuCodec,
// mxEditorCodec,
mxCloneUtils,
mxDomUtils,
mxEventUtils,
mxGestureUtils,
mxStringUtils,
mxXmlUtils,
mxDomHelpers,
mxCellAttributeChange,
mxChildChange,
mxCollapseChange,
mxCurrentRootChange,
mxGeometryChange,
mxRootChange,
mxSelectionChange,
mxStyleChange,
mxTerminalChange,
mxValueChange,
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 {

252
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,
x: number,
y: number,
w: number,
h: number) {
configureCanvas(
c: mxSvgCanvas2D,
x: number,
y: number,
w: 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,
x: number,
y: number,
w: number,
h: number) {
getGradientBounds(
c: mxSvgCanvas2D,
x: number,
y: number,
w: 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,
x: number,
y: number,
w: number,
h: number) {
updateTransform(
c: mxSvgCanvas2D,
x: number,
y: number,
w: 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,
x: number,
y: number,
w: number,
h: number) {
paintVertexShape(
c: mxSvgCanvas2D,
x: number,
y: number,
w: 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,
x: number,
y: number,
w: number,
h: number) {}
paintBackground(
c: mxSvgCanvas2D,
x: number,
y: number,
w: 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,
x: number,
y: number,
w: number,
h: number) {}
paintForeground(
c: mxSvgCanvas2D,
x: number,
y: number,
w: 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,
x: number,
y: number,
w: number,
h: number,
arc: number): void {
paintGlassEffect(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number,
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,
arcSize: number,
close: boolean=false,
exclude: number[] | null=null,
initialMove: boolean=true) {
addPoints(
c: mxSvgCanvas2D,
pts: mxPoint[] | null = null,
rounded: boolean = false,
arcSize: number,
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,
y: number,
w: number,
h: number): SVGElement {
const rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
createTransparentSvgRectangle(
x: number,
y: number,
w: number,
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();

388
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,15 +633,17 @@ class mxText extends mxShape {
if (rot !== 0) {
// Accounts for pre-rotated x and y
const bbox = <mxRectangle>mxUtils.getBoundingBox(
new mxRectangle(
margin.x * this.boundingBox.width,
margin.y * this.boundingBox.height,
this.boundingBox.width,
this.boundingBox.height
),
rot,
new mxPoint(0, 0)
const bbox = <mxRectangle>(
mxUtils.getBoundingBox(
new mxRectangle(
margin.x * this.boundingBox.width,
margin.y * this.boundingBox.height,
this.boundingBox.width,
this.boundingBox.height
),
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,
x: number,
y: number,
w: number,
h: number) {
configureCanvas(
c: mxSvgCanvas2D,
x: number,
y: number,
w: 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');
}
@ -816,12 +818,12 @@ class mxText extends mxShape {
block,
this.scale,
(
dx: number,
dy: number,
flex: string,
item: string,
block: string,
ofl: string
dx: number,
dy: number,
flex: string,
item: string,
block: string,
ofl: string
) => {
const r = this.getTextRotation();
let tr =
@ -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();
});

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

File diff suppressed because it is too large Load Diff

28
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)
);
}
}
@ -404,4 +398,4 @@ export const clearSelection = () => {
window.getSelection().removeAllRanges();
}
}
};
};

10
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);
@ -128,4 +128,4 @@ export const makeDraggable = (
}
return dragSource;
};
};

30
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());
}
@ -320,7 +316,7 @@ class mxGuide {
minY = Math.min(bounds.y + delta.y - this.graph.panDy, stateX.y);
maxY = Math.max(
bounds.y + bounds.height + delta.y - this.graph.panDy,
// @ts-ignore
// @ts-ignore
stateX.y + stateX.height
);
}
@ -352,7 +348,7 @@ class mxGuide {
minX = Math.min(bounds.x + delta.x - this.graph.panDx, stateY.x);
maxX = Math.max(
bounds.x + bounds.width + delta.x - this.graph.panDx,
// @ts-ignore
// @ts-ignore
stateY.x + stateY.width
);
}
@ -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);
});

21
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);
@ -151,4 +150,4 @@ export const htmlEntities = (s: string, newline: boolean) => {
}
return s;
};
};

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;

11
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);
@ -124,4 +125,4 @@ export const getViewXml = (graph, scale, cells, x0, y0) => {
}
return result;
};
};

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 = [];

223
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
@ -141,8 +172,8 @@ class mxCellEditor {
// Handling of deleted cells while editing
this.changeHandler = (sender: any) => {
if (
this.editingCell != null &&
this.graph.getView().getState(this.editingCell, false) == null
this.editingCell != null &&
this.graph.getView().getState(this.editingCell, false) == null
) {
this.stopEditing(true);
}
@ -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) => {
this.graph.stopEditing(false);
mxEvent.consume(evt);
}
);
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) => {
if (this.blurEnabled) {
this.focusLost();
}
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) {
@ -520,7 +536,7 @@ class mxCellEditor {
return (
evt.keyCode === 113 /* F2 */ ||
(this.graph.isEnterStopsCellEditing() &&
evt.keyCode === 13 /* Enter */ &&
evt.keyCode === 13 /* Enter */ &&
!isControlDown(evt) &&
!isShiftDown(evt))
);
@ -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, () => {
this.resize();
}),
0
);
window.setTimeout(() => {
this.resize();
}, 0);
}
this.resize();
@ -949,7 +939,7 @@ class mxCellEditor {
if (
this.isSelectText() &&
textarea.innerHTML.length > 0 &&
textarea.innerHTML.length > 0 &&
(textarea.innerHTML !== this.getEmptyLabelText() ||
!this.clearOnChange)
) {
@ -1017,7 +1007,7 @@ class mxCellEditor {
if (
this.clearOnChange &&
textarea.innerHTML === this.getEmptyLabelText()
textarea.innerHTML === this.getEmptyLabelText()
) {
textarea.innerHTML = '';
this.clearOnChange = false;
@ -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(
state.style,
mxConstants.STYLE_LABEL_POSITION,
mxConstants.ALIGN_CENTER
const horizontal: string = <string>(
mxUtils.getStringValue(
state.style,
STYLE_LABEL_POSITION,
ALIGN_CENTER
)
);
if (horizontal === 'left') {

381
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());
@ -582,7 +625,7 @@ class mxCellRenderer {
if (shape == null) {
const tmp = new mxImageShape(
new mxRectangle(),
// @ts-ignore
// @ts-ignore
overlays[i].image.src
);
tmp.dialect = state.view.graph.dialect;
@ -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,
overlay: mxCellOverlay,
shape: mxShape) {
installCellOverlayListeners(
state: mxCellState,
overlay: mxCellOverlay,
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,
control: mxShape,
handleEvents: boolean,
clickHandler: Function) {
initControl(
state: mxCellState,
control: mxShape,
handleEvents: boolean,
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);
@ -893,7 +938,7 @@ class mxCellRenderer {
};
mxEvent.addGestureListeners(
// @ts-ignore
// @ts-ignore
state.shape.node,
(evt: MouseEvent) => {
if (this.isShapeEvent(state, 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 ||
@ -1054,8 +1097,9 @@ class mxCellRenderer {
stylename === 'spacingLeft'
) {
result =
// @ts-ignore
parseFloat(String(shape[property])) - parseFloat(String(shape.spacing)) !==
// @ts-ignore
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)
);
}
@ -1292,7 +1313,7 @@ class mxCellRenderer {
if (
theta !== 0 &&
state != null &&
// @ts-ignore
// @ts-ignore
state.view.graph.model.isVertex(state.cell)
) {
const cx = state.getCenterX();
@ -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,22 +1403,22 @@ 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 (
forced ||
state.control.scale !== s ||
// @ts-ignore
// @ts-ignore
!state.control.bounds.equals(bounds) ||
state.control.rotation !== r
) {
@ -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,19 +1512,20 @@ class mxCellRenderer {
* will not go into the <drawPane> (eg. HTML labels without foreignObjects).
*/
// insertStateAfter(state: mxCellState, node: Element, htmlNode: HTMLElement): void;
insertStateAfter(state: mxCellState,
node: HTMLElement | SVGElement | null,
htmlNode: HTMLElement | SVGElement | null) {
insertStateAfter(
state: mxCellState,
node: HTMLElement | SVGElement | null,
htmlNode: HTMLElement | SVGElement | null
) {
const shapes = this.getShapesForState(state);
for (let i = 0; i < shapes.length; i += 1) {
// @ts-ignore
if (shapes[i] != null && shapes[i].node != null) {
const html =
// @ts-ignore
// @ts-ignore
shapes[i].node.parentNode !== state.view.getDrawPane() &&
// @ts-ignore
// @ts-ignore
shapes[i].node.parentNode !== state.view.getOverlayPane();
const temp = html ? htmlNode : node;
@ -1532,7 +1558,7 @@ class mxCellRenderer {
if (canvas.nextSibling !== shapeNode) {
// @ts-ignore
shapeNode.parentNode.insertBefore(
shapeNode,
shapeNode,
canvas.nextSibling
);
}
@ -1541,14 +1567,14 @@ class mxCellRenderer {
shapeNode.parentNode.appendChild(shapeNode);
}
} else if (
shapeNode.parentNode != null &&
shapeNode.parentNode.firstChild != null &&
shapeNode.parentNode.firstChild != shapeNode
shapeNode.parentNode != null &&
shapeNode.parentNode.firstChild != null &&
shapeNode.parentNode.firstChild != shapeNode
) {
// Inserts the node as the first child of the parent to implement the order
shapeNode.parentNode.insertBefore(
shapeNode,
shapeNode.parentNode.firstChild
shapeNode,
shapeNode.parentNode.firstChild
);
}
}
@ -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';

1869
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);
}

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

File diff suppressed because it is too large Load Diff

81
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;
@ -136,10 +141,10 @@ class mxOutline {
// Creates the blue rectangle for the viewport
this.bounds = new mxRectangle(0, 0, 0, 0);
this.selectionBorder = new mxRectangleShape(
this.bounds,
null,
mxConstants.OUTLINE_COLOR,
mxConstants.OUTLINE_STROKEWIDTH
this.bounds,
null,
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(
@ -594,7 +598,7 @@ class mxOutline {
: null;
this.zoom =
me.isSource(this.sizer) ||
// @ts-ignore
// @ts-ignore
(hit != null && mxUtils.intersects(this.sizer.bounds, hit));
this.startX = me.getX();
this.startY = me.getY();
@ -643,10 +647,10 @@ class mxOutline {
// Previews the panning on the source graph
const { scale } = outline.getView();
bounds = new mxRectangle(
myBounds.x + dx,
myBounds.y + dy,
myBounds.width,
myBounds.height
myBounds.x + dx,
myBounds.y + dy,
myBounds.width,
myBounds.height
);
selectionBorder.bounds = bounds;
selectionBorder.redraw();
@ -662,8 +666,8 @@ class mxOutline {
const viewRatio = container.clientWidth / container.clientHeight;
dy = dx / viewRatio;
bounds = new mxRectangle(
myBounds.x,
myBounds.y,
myBounds.x,
myBounds.y,
Math.max(1, myBounds.width + dx),
Math.max(1, myBounds.height + dy)
);
@ -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 {

39
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
@ -26,10 +26,10 @@ import mxGeometry from "../../util/datatypes/mxGeometry";
*/
class mxSwimlaneManager extends mxEventSource {
constructor(
graph: mxGraph,
horizontal: boolean = true,
addEnabled: boolean = true,
resizeEnabled: boolean = true
graph: mxGraph,
horizontal: boolean = true,
addEnabled: boolean = true,
resizeEnabled: boolean = true
) {
super();
@ -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,
w: number,
h: number,
parentHorizontal: boolean): void {
resizeSwimlane(
swimlane: mxCell,
w: number,
h: number,
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,

20
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({});
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');