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

code autoformat

development
mcyph 2021-03-20 22:07:21 +11:00
parent b490313420
commit 2edc6c838f
48 changed files with 4063 additions and 4678 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,7 +72,7 @@ class mxDefaultKeyHandler {
// the escape event via the editor instance
let old = this.handler.escape;
this.handler.escape = (evt)=>{
this.handler.escape = (evt) => {
old.apply(this, arguments);
editor.hideProperties();
editor.fireEvent(new mxEventObject(mxEvent.ESCAPE, 'event', evt));
@ -94,8 +94,8 @@ class mxDefaultKeyHandler {
* control - Optional boolean that specifies if control must be pressed.
* Default is false.
*/
bindAction=(code, action, control)=>{
let keyHandler = mxUtils.bind(this, ()=>{
bindAction = (code, action, control) => {
let keyHandler = mxUtils.bind(this, () => {
this.editor.execute(action);
});
@ -115,7 +115,7 @@ class mxDefaultKeyHandler {
* not need to be called, the <handler> is destroyed automatically when the
* window unloads (in IE) by <mxEditor>.
*/
destroy=()=>{
destroy = () => {
this.handler.destroy();
this.handler = null;
};

16
src/js/editor/mxDefaultPopupMenu.js
View File

@ -154,7 +154,7 @@ class mxDefaultPopupMenu {
* cell - Optional <mxCell> which is under the mousepointer.
* evt - Optional mouse event which triggered the menu.
*/
createMenu=(editor, menu, cell, evt)=>{
createMenu = (editor, menu, cell, evt) => {
if (this.config != null) {
let conditions = this.createConditions(editor, cell, evt);
let item = this.config.firstChild;
@ -178,7 +178,7 @@ class mxDefaultPopupMenu {
* item - XML node that represents the current menu item.
* parent - DOM node that represents the parent menu item.
*/
addItems=(editor, menu, cell, evt, conditions, item, parent)=>{
addItems = (editor, menu, cell, evt, conditions, item, parent) => {
let addSeparator = false;
while (item != null) {
@ -236,9 +236,9 @@ class mxDefaultPopupMenu {
* enabled - Optional boolean that specifies if the menu item is enabled.
* Default is true.
*/
addAction=(menu, editor, lab, icon, funct, action, cell, parent, iconCls, enabled)=>{
let clickHandler=(evt)=>{
if (typeof(funct) == 'function') {
addAction = (menu, editor, lab, icon, funct, action, cell, parent, iconCls, enabled) => {
let clickHandler = (evt) => {
if (typeof (funct) == 'function') {
funct.call(editor, editor, cell, evt);
}
if (action != null) {
@ -253,7 +253,7 @@ class mxDefaultPopupMenu {
*
* Evaluates the default conditions for the given context.
*/
createConditions=(editor, cell, evt)=>{
createConditions = (editor, cell, evt) => {
// Creates array with conditions
let model = editor.graph.getModel();
let childCount = model.getChildCount(cell);
@ -276,11 +276,11 @@ class mxDefaultPopupMenu {
// Evaluates dynamic conditions from config file
let condNodes = this.config.getElementsByTagName('condition');
for (let i=0; i<condNodes.length; i++) {
for (let i = 0; i < condNodes.length; i++) {
let funct = mxUtils.eval(mxUtils.getTextContent(condNodes[i]));
let name = condNodes[i].getAttribute('name');
if (name != null && typeof(funct) == 'function') {
if (name != null && typeof (funct) == 'function') {
conditions[name] = funct(editor, cell, evt);
}
}

59
src/js/editor/mxDefaultToolbar.js
View File

@ -103,17 +103,17 @@ class mxDefaultToolbar {
*
* container - DOM node that contains the toolbar.
*/
init=(container)=>{
init = (container) => {
if (container != null) {
this.toolbar = new mxToolbar(container);
// Installs the insert function in the editor if an item is
// selected in the toolbar
this.toolbar.addListener(mxEvent.SELECT, mxUtils.bind(this, (sender, evt)=>{
this.toolbar.addListener(mxEvent.SELECT, mxUtils.bind(this, (sender, evt) => {
let funct = evt.getProperty('function');
if (funct != null) {
this.editor.insertFunction = mxUtils.bind(this, ()=>{
this.editor.insertFunction = mxUtils.bind(this, () => {
funct.apply(this, arguments);
this.toolbar.resetMode();
});
@ -123,7 +123,7 @@ class mxDefaultToolbar {
}));
// Resets the selected tool after a doubleclick or escape keystroke
this.resetHandler = mxUtils.bind(this, ()=>{
this.resetHandler = mxUtils.bind(this, () => {
if (this.toolbar != null) {
this.toolbar.resetMode(true);
}
@ -147,8 +147,8 @@ class mxDefaultToolbar {
* action - Name of the action to execute when the item is clicked.
* pressed - Optional URL of the icon for the pressed state.
*/
addItem=(title, icon, action, pressed)=>{
let clickHandler = mxUtils.bind(this, ()=>{
addItem = (title, icon, action, pressed) => {
let clickHandler = mxUtils.bind(this, () => {
if (action != null && action.length > 0) {
this.editor.execute(action);
}
@ -167,7 +167,7 @@ class mxDefaultToolbar {
* icon - Optional URL of the icon that represents the vertical separator.
* Default is <mxClient.imageBasePath> + '/separator.gif'.
*/
addSeparator=(icon)=>{
addSeparator = (icon) => {
icon = icon || mxClient.imageBasePath + '/separator.gif';
this.toolbar.addSeparator(icon);
};
@ -178,7 +178,7 @@ class mxDefaultToolbar {
* Helper method to invoke <mxToolbar.addCombo> on <toolbar> and return the
* resulting DOM node.
*/
addCombo=()=>{
addCombo = () => {
return this.toolbar.addCombo();
};
@ -192,7 +192,7 @@ class mxDefaultToolbar {
*
* title - String that represents the title of the combo.
*/
addActionCombo=(title)=>{
addActionCombo = (title) => {
return this.toolbar.addActionCombo(title);
};
@ -209,8 +209,8 @@ class mxDefaultToolbar {
* title - String that represents the title of the combo.
* action - Name of the action to execute in <editor>.
*/
addActionOption=(combo, title, action)=>{
let clickHandler = mxUtils.bind(this, ()=>{
addActionOption = (combo, title, action) => {
let clickHandler = mxUtils.bind(this, () => {
this.editor.execute(action);
});
@ -229,7 +229,7 @@ class mxDefaultToolbar {
* title - String that represents the title of the combo.
* value - Object that represents the value of the option.
*/
addOption=(combo, title, value)=>{
addOption = (combo, title, value) => {
return this.toolbar.addOption(combo, title, value);
};
@ -250,8 +250,8 @@ class mxDefaultToolbar {
* first and only argument that is executed after the mode has been
* selected.
*/
addMode=(title, icon, mode, pressed, funct)=>{
let clickHandler = mxUtils.bind(this, ()=>{
addMode = (title, icon, mode, pressed, funct) => {
let clickHandler = mxUtils.bind(this, () => {
this.editor.setMode(mode);
if (funct != null) {
@ -283,14 +283,13 @@ class mxDefaultToolbar {
* toggle - Optional boolean that specifies if the item can be toggled.
* Default is true.
*/
addPrototype=(title, icon, ptype, pressed, insert, toggle)=>{
addPrototype = (title, icon, ptype, pressed, insert, toggle) => {
// Creates a wrapper function that is in charge of constructing
// the new cell instance to be inserted into the graph
let factory = mxUtils.bind(this, ()=>{
if (typeof(ptype) == 'function') {
let factory = mxUtils.bind(this, () => {
if (typeof (ptype) == 'function') {
return ptype();
}
else if (ptype != null) {
} else if (ptype != null) {
return this.editor.graph.cloneCell(ptype);
}
@ -299,8 +298,8 @@ class mxDefaultToolbar {
// Defines the function for a click event on the graph
// after this item has been selected in the toolbar
let clickHandler = mxUtils.bind(this, (evt, cell)=>{
if (typeof(insert) == 'function') {
let clickHandler = mxUtils.bind(this, (evt, cell) => {
if (typeof (insert) == 'function') {
insert(this.editor, factory(), evt, cell);
} else {
this.drop(factory(), evt, cell);
@ -314,7 +313,7 @@ class mxDefaultToolbar {
// Creates a wrapper function that calls the click handler without
// the graph argument
let dropHandler=(graph, evt, cell)=>{
let dropHandler = (graph, evt, cell) => {
clickHandler(evt, cell);
};
@ -336,7 +335,7 @@ class mxDefaultToolbar {
* evt - Mouse event that represents the drop.
* target - Optional <mxCell> that represents the drop target.
*/
drop=(vertex, evt, target)=>{
drop = (vertex, evt, target) => {
let graph = this.editor.graph;
let model = graph.getModel();
@ -346,7 +345,7 @@ class mxDefaultToolbar {
!graph.isCellConnectable(target)) {
while (target != null &&
!graph.isValidDropTarget(target, [vertex], evt)) {
!graph.isValidDropTarget(target, [vertex], evt)) {
target = model.getParent(target);
}
this.insert(vertex, evt, target);
@ -368,7 +367,7 @@ class mxDefaultToolbar {
* evt - Mouse event that represents the drop.
* parent - Optional <mxCell> that represents the parent.
*/
insert=(vertex, evt, target)=>{
insert = (vertex, evt, target) => {
let graph = this.editor.graph;
if (graph.canImportCell(vertex)) {
@ -397,7 +396,7 @@ class mxDefaultToolbar {
* evt - Mouse event that represents the drop.
* source - Optional <mxCell> that represents the source terminal.
*/
connect=(vertex, evt, source)=>{
connect = (vertex, evt, source) => {
let graph = this.editor.graph;
let model = graph.getModel();
@ -446,7 +445,7 @@ class mxDefaultToolbar {
}
graph.addEdge(edge, parent, source, vertex);
} finally {
model.endUpdate();
}
@ -467,12 +466,12 @@ class mxDefaultToolbar {
* img - DOM node that represents the image.
* dropHandler - Function that handles a drop of the image.
*/
installDropHandler=(img, dropHandler)=>{
installDropHandler = (img, dropHandler) => {
let sprite = document.createElement('img');
sprite.setAttribute('src', img.getAttribute('src'));
// Handles delayed loading of the images
let loader = mxUtils.bind(this, (evt)=> {
let loader = mxUtils.bind(this, (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
@ -495,7 +494,7 @@ class mxDefaultToolbar {
* <toolbar> is destroyed automatically when the window unloads (in IE) by
* <mxEditor>.
*/
destroy=()=>{
destroy = () => {
if (this.resetHandler != null) {
this.editor.graph.removeListener('dblclick', this.resetHandler);
this.editor.removeListener('escape', this.resetHandler);

1236
src/js/editor/mxEditor.js
View File

File diff suppressed because it is too large Load Diff

33
src/js/handler/mxEdgeHandler.js
View File

@ -188,6 +188,19 @@ class mxEdgeHandler {
* handle. Uses <checkLabelHandle> for checking and moving. Default is false.
*/
manageLabelHandle = false;
/**
* Function: isParentHighlightVisible
*
* Returns true if the parent highlight should be visible. This implementation
* always returns true.
*/
isParentHighlightVisible = isParentHighlightVisible;
/**
* Function: updateParentHighlight
*
* Updates the highlight of the parent if <parentHighlightEnabled> is true.
*/
updateParentHighlight = updateParentHighlight;
/**
* Class: mxEdgeHandler
@ -305,22 +318,6 @@ class mxEdgeHandler {
this.redraw();
};
/**
* Function: isParentHighlightVisible
*
* Returns true if the parent highlight should be visible. This implementation
* always returns true.
*/
isParentHighlightVisible = isParentHighlightVisible;
/**
* Function: updateParentHighlight
*
* Updates the highlight of the parent if <parentHighlightEnabled> is true.
*/
updateParentHighlight = updateParentHighlight;
/**
* Function: createCustomHandles
*
@ -956,7 +953,7 @@ class mxEdgeHandler {
snapToPoint.call(this, new mxPoint(view.getRoutingCenterX(terminal),
view.getRoutingCenterY(terminal)));
}
};
}
snapToTerminal.call(this, this.state.getVisibleTerminalState(true));
snapToTerminal.call(this, this.state.getVisibleTerminalState(false));
@ -1125,7 +1122,7 @@ class mxEdgeHandler {
points.splice(idx - 1, 1);
result = points;
}
};
}
// LATER: Check if other points can be removed if a segment is made straight
checkRemove(this.index, pt);

2
src/js/handler/mxRubberband.js
View File

@ -184,7 +184,7 @@ class mxRubberband {
me.graphY = pt.y;
return me;
};
}
this.dragHandler = mxUtils.bind(this, (evt) => {
this.mouseMove(this.graph, createMouseEvent(evt));

94
src/js/handler/mxTooltipHandler.js
View File

@ -4,6 +4,50 @@
*/
class mxTooltipHandler {
/**
* Variable: zIndex
*
* Specifies the zIndex for the tooltip and its shadow. Default is 10005.
*/
zIndex = 10005;
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
graph = null;
/**
* Variable: delay
*
* Delay to show the tooltip in milliseconds. Default is 500.
*/
delay = null;
/**
* Variable: ignoreTouchEvents
*
* Specifies if touch and pen events should be ignored. Default is true.
*/
ignoreTouchEvents = true;
/**
* Variable: hideOnHover
*
* Specifies if the tooltip should be hidden if the mouse is moved over the
* current cell. Default is false.
*/
hideOnHover = false;
/**
* Variable: destroyed
*
* True if this handler was destroyed using <destroy>.
*/
destroyed = false;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
enabled = true;
/**
* Class: mxTooltipHandler
*
@ -36,56 +80,6 @@ class mxTooltipHandler {
}
};
/**
* Variable: zIndex
*
* Specifies the zIndex for the tooltip and its shadow. Default is 10005.
*/
zIndex = 10005;
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
graph = null;
/**
* Variable: delay
*
* Delay to show the tooltip in milliseconds. Default is 500.
*/
delay = null;
/**
* Variable: ignoreTouchEvents
*
* Specifies if touch and pen events should be ignored. Default is true.
*/
ignoreTouchEvents = true;
/**
* Variable: hideOnHover
*
* Specifies if the tooltip should be hidden if the mouse is moved over the
* current cell. Default is false.
*/
hideOnHover = false;
/**
* Variable: destroyed
*
* True if this handler was destroyed using <destroy>.
*/
destroyed = false;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
enabled = true;
/**
* Function: isEnabled
*

894
src/js/handler/mxVertexHandler.js
View File

File diff suppressed because it is too large Load Diff

2
src/js/io/mxGenericChangeCodec.js
View File

@ -41,7 +41,7 @@ class mxGenericChangeCodec extends mxObjectCodec {
* variable - The fieldname for the change data.
*/
constructor(obj, variable) {
super(obj, ['model', 'previous'], ['cell']);
super(obj, ['model', 'previous'], ['cell']);
this.variable = variable;
}

2
src/js/io/mxGraphCodec.js
View File

@ -26,7 +26,7 @@ class mxGraphCodec extends mxObjectCodec {
*/
constructor() {
super(new mxGraph(), ['graphListeners', 'eventListeners', 'view', 'container',
'cellRenderer', 'editor', 'selection']);
'cellRenderer', 'editor', 'selection']);
}
}

12
src/js/layout/hierarchical/mxHierarchicalEdgeStyle.js
View File

@ -1,9 +1,9 @@
const mxHierarchicalEdgeStyle =
{
ORTHOGONAL: 1,
POLYLINE: 2,
STRAIGHT: 3,
CURVE: 4
};
{
ORTHOGONAL: 1,
POLYLINE: 2,
STRAIGHT: 3,
CURVE: 4
};
export default mxHierarchicalEdgeStyle;

2
src/js/layout/hierarchical/mxHierarchicalLayout.js
View File

@ -651,7 +651,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
for (var j = 0; j < edges.length; j++) {
if (j == i) {
continue;
} else {
var isSource2 = edgeIsSource[j];
var otherTerm = this.getVisibleTerminal(edges[j], !isSource2);

3
src/js/layout/hierarchical/stage/mxHierarchicalLayoutStage.js
View File

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

133
src/js/layout/hierarchical/stage/mxMedianHybridCrossingReduction.js
View File

@ -5,6 +5,68 @@
import mxHierarchicalLayoutStage from "./mxHierarchicalLayoutStage";
class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
/**
* Variable: layout
*
* Reference to the enclosing <mxHierarchicalLayout>.
*/
layout = null;
/**
* Variable: maxIterations
*
* The maximum number of iterations to perform whilst reducing edge
* crossings. Default is 24.
*/
maxIterations = 24;
/**
* Variable: nestedBestRanks
*
* Stores each rank as a collection of cells in the best order found for
* each layer so far
*/
nestedBestRanks = null;
/**
* Variable: currentBestCrossings
*
* The total number of crossings found in the best configuration so far
*/
currentBestCrossings = 0;
/**
* Variable: iterationsWithoutImprovement
*
* The total number of crossings found in the best configuration so far
*/
iterationsWithoutImprovement = 0;
/**
* Variable: maxNoImprovementIterations
*
* The total number of crossings found in the best configuration so far
*/
maxNoImprovementIterations = 2;
/**
* Class: MedianCellSorter
*
* A utility class used to track cells whilst sorting occurs on the median
* values. Does not violate (x.compareTo(y)==0) == (x.equals(y))
*
* Constructor: MedianCellSorter
*
* Constructs a new median cell sorter.
*/
function
/**
* Variable: medianValue
*
* The weighted value of the cell stored.
*/
medianValue = 0;
/**
* Variable: cell
*
* The cell whose median value is being calculated
*/
cell = false;
/**
* Class: mxMedianHybridCrossingReduction
*
@ -29,50 +91,6 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
this.layout = layout;
};
/**
* Variable: layout
*
* Reference to the enclosing <mxHierarchicalLayout>.
*/
layout = null;
/**
* Variable: maxIterations
*
* The maximum number of iterations to perform whilst reducing edge
* crossings. Default is 24.
*/
maxIterations = 24;
/**
* Variable: nestedBestRanks
*
* Stores each rank as a collection of cells in the best order found for
* each layer so far
*/
nestedBestRanks = null;
/**
* Variable: currentBestCrossings
*
* The total number of crossings found in the best configuration so far
*/
currentBestCrossings = 0;
/**
* Variable: iterationsWithoutImprovement
*
* The total number of crossings found in the best configuration so far
*/
iterationsWithoutImprovement = 0;
/**
* Variable: maxNoImprovementIterations
*
* The total number of crossings found in the best configuration so far
*/
maxNoImprovementIterations = 2;
/**
* Function: execute
*
@ -151,7 +169,6 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
model.ranks = ranks;
};
/**
* Function: calculateCrossings
*
@ -545,36 +562,10 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
}
};
/**
* Class: MedianCellSorter
*
* A utility class used to track cells whilst sorting occurs on the median
* values. Does not violate (x.compareTo(y)==0) == (x.equals(y))
*
* Constructor: MedianCellSorter
*
* Constructs a new median cell sorter.
*/
function
MedianCellSorter() {
// empty
};
/**
* Variable: medianValue
*
* The weighted value of the cell stored.
*/
medianValue = 0;
/**
* Variable: cell
*
* The cell whose median value is being calculated
*/
cell = false;
/**
* Function: compare
*

6
src/js/layout/mxCompositeLayout.js
View File

@ -3,7 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
*/
class mxCompositeLayout extends mxGraphLayout{
class mxCompositeLayout extends mxGraphLayout {
/**
* Variable: layouts
*
@ -59,7 +59,7 @@ class mxCompositeLayout extends mxGraphLayout{
* Implements <mxGraphLayout.moveCell> by calling move on <master> or the first
* layout in <layouts>.
*/
moveCell=(cell, x, y)=>{
moveCell = (cell, x, y) => {
if (this.master != null) {
this.master.moveCell.apply(this.master, arguments);
} else {
@ -73,7 +73,7 @@ class mxCompositeLayout extends mxGraphLayout{
* Implements <mxGraphLayout.execute> by executing all <layouts> in a
* single transaction.
*/
execute=(parent)=>{
execute = (parent) => {
var model = this.graph.getModel();
model.beginUpdate();

2
src/js/layout/mxGraphLayout.js
View File

@ -306,7 +306,7 @@ class mxGraphLayout {
result.y = result.y + parentGeo.y;
parent = model.getParent(parent);
;
parentGeo = model.getGeometry(parent);
}
}

2
src/js/layout/mxParallelEdgeLayout.js
View File

@ -164,7 +164,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
pts = tmp.join(',');
}
}
;
return ((src > trg) ? trg + '-' + src : src + '-' + trg) + pts;
}

68
src/js/layout/mxPartitionLayout.js
View File

@ -71,7 +71,7 @@ class mxPartitionLayout extends mxGraphLayout {
*
* Returns <horizontal>.
*/
isHorizontal=()=>{
isHorizontal = () => {
return this.horizontal;
};
@ -80,7 +80,7 @@ class mxPartitionLayout extends mxGraphLayout {
*
* Implements <mxGraphLayout.moveCell>.
*/
moveCell = (cell, x, y)=>{
moveCell = (cell, x, y) => {
var model = this.graph.getModel();
var parent = model.getParent(cell);
@ -92,17 +92,14 @@ class mxPartitionLayout extends mxGraphLayout {
// Finds index of the closest swimlane
// TODO: Take into account the orientation
for (i = 0; i < childCount; i++)
{
for (i = 0; i < childCount; i++) {
var child = model.getChildAt(parent, i);
var bounds = this.getVertexBounds(child);
if (bounds != null)
{
if (bounds != null) {
var tmp = bounds.x + bounds.width / 2;
if (last < x && tmp > x)
{
if (last < x && tmp > x) {
break;
}
@ -124,8 +121,7 @@ class mxPartitionLayout extends mxGraphLayout {
* Implements <mxGraphLayout.execute>. All children where <isVertexIgnored>
* returns false and <isVertexMovable> returns true are modified.
*/
execute = (parent)=>
{
execute = (parent) => {
var horizontal = this.isHorizontal();
var model = this.graph.getModel();
var pgeo = model.getGeometry(parent);
@ -134,43 +130,38 @@ class mxPartitionLayout extends mxGraphLayout {
// geometry or the current root of the view in which case the size
// of the graph's container will be used.
if (this.graph.container != null &&
((pgeo == null &&
model.isLayer(parent)) ||
parent == this.graph.getView().currentRoot))
{
((pgeo == null &&
model.isLayer(parent)) ||
parent == this.graph.getView().currentRoot)) {
var width = this.graph.container.offsetWidth - 1;
var height = this.graph.container.offsetHeight - 1;
pgeo = new mxRectangle(0, 0, width, height);
}
if (pgeo != null)
{
if (pgeo != null) {
var children = [];
var childCount = model.getChildCount(parent);
for (var i = 0; i < childCount; i++)
{
for (var i = 0; i < childCount; i++) {
var child = model.getChildAt(parent, i);
if (!this.isVertexIgnored(child) &&
this.isVertexMovable(child))
{
this.isVertexMovable(child)) {
children.push(child);
}
}
var n = children.length;
if (n > 0)
{
if (n > 0) {
var x0 = this.border;
var y0 = this.border;
var other = (horizontal) ? pgeo.height : pgeo.width;
other -= 2 * this.border;
var size = (this.graph.isSwimlane(parent)) ?
this.graph.getStartSize(parent) :
new mxRectangle();
this.graph.getStartSize(parent) :
new mxRectangle();
other -= (horizontal) ? size.height : size.width;
x0 = x0 + size.width;
@ -178,41 +169,32 @@ class mxPartitionLayout extends mxGraphLayout {
var tmp = this.border + (n - 1) * this.spacing;
var value = (horizontal) ?
((pgeo.width - x0 - tmp) / n) :
((pgeo.height - y0 - tmp) / n);
((pgeo.width - x0 - tmp) / n) :
((pgeo.height - y0 - tmp) / n);
// Avoids negative values, that is values where the sum of the
// spacing plus the border is larger then the available space
if (value > 0)
{
if (value > 0) {
model.beginUpdate();
try
{
for (var i = 0; i < n; i++)
{
try {
for (var i = 0; i < n; i++) {
var child = children[i];
var geo = model.getGeometry(child);
if (geo != null)
{
if (geo != null) {
geo = geo.clone();
geo.x = x0;
geo.y = y0;
if (horizontal)
{
if (this.resizeVertices)
{
if (horizontal) {
if (this.resizeVertices) {
geo.width = value;
geo.height = other;
}
x0 += value + this.spacing;
}
else
{
if (this.resizeVertices)
{
} else {
if (this.resizeVertices) {
geo.height = value;
geo.width = other;
}

246
src/js/model/mxGraphModel.js
View File

@ -4,50 +4,50 @@
*/
/**
* Class: mxGraphModel
*
*
* Extends <mxEventSource> to implement a graph model. The graph model acts as
* a wrapper around the cells which are in charge of storing the actual graph
* datastructure. The model acts as a transactional wrapper with event
* notification for all changes, whereas the cells contain the atomic
* operations for updating the actual datastructure.
*
*
* Layers:
*
*
* The cell hierarchy in the model must have a top-level root cell which
* contains the layers (typically one default layer), which in turn contain the
* top-level cells of the layers. This means each cell is contained in a layer.
* If no layers are required, then all new cells should be added to the default
* layer.
*
*
* Layers are useful for hiding and showing groups of cells, or for placing
* groups of cells on top of other cells in the display. To identify a layer,
* the <isLayer> function is used. It returns true if the parent of the given
* cell is the root of the model.
*
*
* Events:
*
*
* See events section for more details. There is a new set of events for
* tracking transactional changes as they happen. The events are called
* startEdit for the initial beginUpdate, executed for each executed change
* and endEdit for the terminal endUpdate. The executed event contains a
* property called change which represents the change after execution.
*
*
* Encoding the model:
*
*
* To encode a graph model, use the following code:
*
*
* (code)
* var enc = new mxCodec();
* var node = enc.encode(graph.getModel());
* (end)
*
*
* This will create an XML node that contains all the model information.
*
*
* Encoding and decoding changes:
*
*
* For the encoding of changes, a graph model listener is required that encodes
* each change from the given array of changes.
*
*
* (code)
* model.addListener(mxEvent.CHANGE, (sender, evt)=>
* {
@ -62,10 +62,10 @@
* // do something with the nodes
* });
* (end)
*
*
* For the decoding and execution of changes, the codec needs a lookup function
* that allows it to resolve cell IDs as follows:
*
*
* (code)
* var codec = new mxCodec();
* codec.lookup = (id)=>
@ -73,10 +73,10 @@
* return model.getCell(id);
* }
* (end)
*
*
* For each encoded change (represented by a node), the following code can be
* used to carry out the decoding and create a change object.
*
*
* (code)
* var changes = [];
* var change = codec.decode(node);
@ -84,13 +84,13 @@
* change.execute();
* changes.push(change);
* (end)
*
*
* The changes can then be dispatched using the model as follows.
*
*
* (code)
* var edit = new mxUndoableEdit(model, false);
* edit.changes = changes;
*
*
* edit.notify = ()=>
* {
* edit.source.fireEvent(new mxEventObject(mxEvent.CHANGE,
@ -98,7 +98,7 @@
* edit.source.fireEvent(new mxEventObject(mxEvent.NOTIFY,
* 'edit', edit, 'changes', edit.changes));
* }
*
*
* model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));
* model.fireEvent(new mxEventObject(mxEvent.CHANGE,
* 'edit', edit, 'changes', changes));
@ -112,9 +112,9 @@
* is <strong>deprecated</strong>, please use edit.changes instead.
*
* Example:
*
*
* For finding newly inserted cells, the following code can be used:
*
*
* (code)
* graph.model.addListener(mxEvent.CHANGE, (sender, evt)=>
* {
@ -133,23 +133,23 @@
* }
* });
* (end)
*
*
*
*
* Event: mxEvent.NOTIFY
*
* Same as <mxEvent.CHANGE>, this event can be used for classes that need to
* implement a sync mechanism between this model and, say, a remote model. In
* such a setup, only local changes should trigger a notify event and all
* changes should trigger a change event.
*
*
* Event: mxEvent.EXECUTE
*
*
* Fires between begin- and endUpdate and after an atomic change was executed
* in the model. The <code>change</code> property contains the atomic change
* that was executed.
*
*
* Event: mxEvent.EXECUTED
*
*
* Fires between START_EDIT and END_EDIT after an atomic change was executed.
* The <code>change</code> property contains the change that was executed.
*
@ -157,43 +157,120 @@
*
* Fires after the <updateLevel> was incremented in <beginUpdate>. This event
* contains no properties.
*
*
* Event: mxEvent.START_EDIT
*
* Fires after the <updateLevel> was changed from 0 to 1. This event
* contains no properties.
*
*
* Event: mxEvent.END_UPDATE
*
*
* Fires after the <updateLevel> was decreased in <endUpdate> but before any
* notification or change dispatching. The <code>edit</code> property contains
* the <currentEdit>.
*
*
* Event: mxEvent.END_EDIT
*
* Fires after the <updateLevel> was changed from 1 to 0. This event
* contains no properties.
*
*
* Event: mxEvent.BEFORE_UNDO
*
*
* Fires before the change is dispatched after the update level has reached 0
* in <endUpdate>. The <code>edit</code> property contains the <curreneEdit>.
*
*
* Event: mxEvent.UNDO
*
*
* Fires after the change was dispatched in <endUpdate>. The <code>edit</code>
* property contains the <currentEdit>.
*
*
* Constructor: mxGraphModel
*
*
* Constructs a new graph model. If no root is specified then a new root
* <mxCell> with a default layer is created.
*
*
* Parameters:
*
*
* root - <mxCell> that represents the root cell.
*/
class mxGraphModel extends mxEventSource {
/**
* Variable: root
*
* Holds the root cell, which in turn contains the cells that represent the
* layers of the diagram as child cells. That is, the actual elements of the
* diagram are supposed to live in the third generation of cells and below.
*/
root = null;
/**
* Variable: cells
*
* Maps from Ids to cells.
*/
cells = null;
/**
* Variable: maintainEdgeParent
*
* Specifies if edges should automatically be moved into the nearest common
* ancestor of their terminals. Default is true.
*/
maintainEdgeParent = true;
/**
* Variable: ignoreRelativeEdgeParent
*
* Specifies if relative edge parents should be ignored for finding the nearest
* common ancestors of an edge's terminals. Default is true.
*/
ignoreRelativeEdgeParent = true;
/**
* Variable: createIds
*
* Specifies if the model should automatically create Ids for new cells.
* Default is true.
*/
createIds = true;
/**
* Variable: prefix
*
* Defines the prefix of new Ids. Default is an empty string.
*/
prefix = '';
/**
* Variable: postfix
*
* Defines the postfix of new Ids. Default is an empty string.
*/
postfix = '';
/**
* Variable: nextId
*
* Specifies the next Id to be created. Initial value is 0.
*/
nextId = 0;
/**
* Variable: currentEdit
*
* Holds the changes for the current transaction. If the transaction is
* closed then a new object is created for this variable using
* <createUndoableEdit>.
*/
currentEdit = null;
/**
* Variable: updateLevel
*
* Counter for the depth of nested transactions. Each call to <beginUpdate>
* will increment this number and each call to <endUpdate> will decrement
* it. When the counter reaches 0, the transaction is closed and the
* respective events are fired. Initial value is 0.
*/
updateLevel = 0;
/**
* Variable: endingUpdate
*
* True if the program flow is currently inside endUpdate.
*/
endingUpdate = false;
constructor(root) {
// super not called
this.currentEdit = this.createUndoableEdit();
@ -205,93 +282,6 @@ class mxGraphModel extends mxEventSource {
}
};
/**
* Variable: root
*
* Holds the root cell, which in turn contains the cells that represent the
* layers of the diagram as child cells. That is, the actual elements of the
* diagram are supposed to live in the third generation of cells and below.
*/
root = null;
/**
* Variable: cells
*
* Maps from Ids to cells.
*/
cells = null;
/**
* Variable: maintainEdgeParent
*
* Specifies if edges should automatically be moved into the nearest common
* ancestor of their terminals. Default is true.
*/
maintainEdgeParent = true;
/**
* Variable: ignoreRelativeEdgeParent
*
* Specifies if relative edge parents should be ignored for finding the nearest
* common ancestors of an edge's terminals. Default is true.
*/
ignoreRelativeEdgeParent = true;
/**
* Variable: createIds
*
* Specifies if the model should automatically create Ids for new cells.
* Default is true.
*/
createIds = true;
/**
* Variable: prefix
*
* Defines the prefix of new Ids. Default is an empty string.
*/
prefix = '';
/**
* Variable: postfix
*
* Defines the postfix of new Ids. Default is an empty string.
*/
postfix = '';
/**
* Variable: nextId
*
* Specifies the next Id to be created. Initial value is 0.
*/
nextId = 0;
/**
* Variable: currentEdit
*
* Holds the changes for the current transaction. If the transaction is
* closed then a new object is created for this variable using
* <createUndoableEdit>.
*/
currentEdit = null;
/**
* Variable: updateLevel
*
* Counter for the depth of nested transactions. Each call to <beginUpdate>
* will increment this number and each call to <endUpdate> will decrement
* it. When the counter reaches 0, the transaction is closed and the
* respective events are fired. Initial value is 0.
*/
updateLevel = 0;
/**
* Variable: endingUpdate
*
* True if the program flow is currently inside endUpdate.
*/
endingUpdate = false;
/**
* Function: clear
*

179
src/js/mxClient.js
View File

@ -247,20 +247,6 @@ var mxClient = {
for (var i = 0; i < mxClient.defaultBundles.length; i++) {
mxResources.add(mxClient.defaultBundles[i], lan, callback);
}
},
/**
* Function: include
*
* Dynamically adds a script node to the document header.
*
* In production environments, the includes are resolved in the mxClient.js
* file to reduce the number of requests required for client startup. This
* function should only be used in development environments, but not in
* production systems.
*/
include: (src) => {
document.write('<script src="' + src + '"></script>');
}
};
@ -355,13 +341,11 @@ if (typeof(mxLoadStylesheets) == 'undefined') {
*/
if (typeof(mxBasePath) != 'undefined' && mxBasePath.length > 0) {
// Adds a trailing slash if required
if (mxBasePath.substring(mxBasePath.length - 1) == '/') {
if (mxBasePath.substring(mxBasePath.length - 1) === '/') {
mxBasePath = mxBasePath.substring(0, mxBasePath.length - 1);
}
mxClient.basePath = mxBasePath;
}
else {
} else {
mxClient.basePath = '.';
}
@ -384,13 +368,11 @@ else {
*/
if (typeof(mxImageBasePath) != 'undefined' && mxImageBasePath.length > 0) {
// Adds a trailing slash if required
if (mxImageBasePath.substring(mxImageBasePath.length - 1) == '/') {
if (mxImageBasePath.substring(mxImageBasePath.length - 1) === '/') {
mxImageBasePath = mxImageBasePath.substring(0, mxImageBasePath.length - 1);
}
mxClient.imageBasePath = mxImageBasePath;
}
else {
} else {
mxClient.imageBasePath = mxClient.basePath + '/images';
}
@ -451,8 +433,7 @@ else {
*/
if (typeof(mxDefaultLanguage) != 'undefined' && mxDefaultLanguage != null) {
mxClient.defaultLanguage = mxDefaultLanguage;
}
else {
} else {
mxClient.defaultLanguage = 'en';
}
@ -481,153 +462,3 @@ if (mxLoadStylesheets) {
if (typeof(mxLanguages) != 'undefined' && mxLanguages != null) {
mxClient.languages = mxLanguages;
}
// PREPROCESSOR-REMOVE-START
// If script is loaded via CommonJS, do not write <script> tags to the page
// for dependencies. These are already included in the build.
if (mxForceIncludes || !(typeof module === 'object' && module.exports != null))
{
// PREPROCESSOR-REMOVE-END
mxClient.include(mxClient.basePath+'/js/util/mxLog.js');
mxClient.include(mxClient.basePath+'/js/util/mxObjectIdentity.js');
mxClient.include(mxClient.basePath+'/js/util/mxDictionary.js');
mxClient.include(mxClient.basePath+'/js/util/mxResources.js');
mxClient.include(mxClient.basePath+'/js/util/mxPoint.js');
mxClient.include(mxClient.basePath+'/js/util/mxRectangle.js');
mxClient.include(mxClient.basePath+'/js/util/mxEffects.js');
mxClient.include(mxClient.basePath+'/js/util/mxUtils.js');
mxClient.include(mxClient.basePath+'/js/util/mxConstants.js');
mxClient.include(mxClient.basePath+'/js/util/mxEventObject.js');
mxClient.include(mxClient.basePath+'/js/util/mxMouseEvent.js');
mxClient.include(mxClient.basePath+'/js/util/mxEventSource.js');
mxClient.include(mxClient.basePath+'/js/util/mxEvent.js');
mxClient.include(mxClient.basePath+'/js/util/mxXmlRequest.js');
mxClient.include(mxClient.basePath+'/js/util/mxClipboard.js');
mxClient.include(mxClient.basePath+'/js/util/mxWindow.js');
mxClient.include(mxClient.basePath+'/js/util/mxForm.js');
mxClient.include(mxClient.basePath+'/js/util/mxImage.js');
mxClient.include(mxClient.basePath+'/js/util/mxDivResizer.js');
mxClient.include(mxClient.basePath+'/js/util/mxDragSource.js');
mxClient.include(mxClient.basePath+'/js/util/mxToolbar.js');
mxClient.include(mxClient.basePath+'/js/util/mxUndoableEdit.js');
mxClient.include(mxClient.basePath+'/js/util/mxUndoManager.js');
mxClient.include(mxClient.basePath+'/js/util/mxUrlConverter.js');
mxClient.include(mxClient.basePath+'/js/util/mxPanningManager.js');
mxClient.include(mxClient.basePath+'/js/util/mxPopupMenu.js');
mxClient.include(mxClient.basePath+'/js/util/mxAutoSaveManager.js');
mxClient.include(mxClient.basePath+'/js/util/mxAnimation.js');
mxClient.include(mxClient.basePath+'/js/util/mxMorphing.js');
mxClient.include(mxClient.basePath+'/js/util/mxImageBundle.js');
mxClient.include(mxClient.basePath+'/js/util/mxImageExport.js');
mxClient.include(mxClient.basePath+'/js/util/mxAbstractCanvas2D.js');
mxClient.include(mxClient.basePath+'/js/util/mxXmlCanvas2D.js');
mxClient.include(mxClient.basePath+'/js/util/mxSvgCanvas2D.js');
mxClient.include(mxClient.basePath+'/js/util/mxVmlCanvas2D.js');
mxClient.include(mxClient.basePath+'/js/util/mxGuide.js');
mxClient.include(mxClient.basePath+'/js/shape/mxShape.js');
mxClient.include(mxClient.basePath+'/js/shape/mxStencil.js');
mxClient.include(mxClient.basePath+'/js/shape/mxStencilRegistry.js');
mxClient.include(mxClient.basePath+'/js/shape/mxMarker.js');
mxClient.include(mxClient.basePath+'/js/shape/mxActor.js');
mxClient.include(mxClient.basePath+'/js/shape/mxCloud.js');
mxClient.include(mxClient.basePath+'/js/shape/mxRectangleShape.js');
mxClient.include(mxClient.basePath+'/js/shape/mxEllipse.js');
mxClient.include(mxClient.basePath+'/js/shape/mxDoubleEllipse.js');
mxClient.include(mxClient.basePath+'/js/shape/mxRhombus.js');
mxClient.include(mxClient.basePath+'/js/shape/mxPolyline.js');
mxClient.include(mxClient.basePath+'/js/shape/mxArrow.js');
mxClient.include(mxClient.basePath+'/js/shape/mxArrowConnector.js');
mxClient.include(mxClient.basePath+'/js/shape/mxText.js');
mxClient.include(mxClient.basePath+'/js/shape/mxTriangle.js');
mxClient.include(mxClient.basePath+'/js/shape/mxHexagon.js');
mxClient.include(mxClient.basePath+'/js/shape/mxLine.js');
mxClient.include(mxClient.basePath+'/js/shape/mxImageShape.js');
mxClient.include(mxClient.basePath+'/js/shape/mxLabel.js');
mxClient.include(mxClient.basePath+'/js/shape/mxCylinder.js');
mxClient.include(mxClient.basePath+'/js/shape/mxConnector.js');
mxClient.include(mxClient.basePath+'/js/shape/mxSwimlane.js');
mxClient.include(mxClient.basePath+'/js/layout/mxGraphLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxStackLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxPartitionLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxCompactTreeLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxRadialTreeLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxFastOrganicLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxCircleLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxParallelEdgeLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxCompositeLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/mxEdgeLabelLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/model/mxGraphAbstractHierarchyCell.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/model/mxGraphHierarchyNode.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/model/mxGraphHierarchyEdge.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/model/mxGraphHierarchyModel.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/model/mxSwimlaneModel.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/stage/mxHierarchicalLayoutStage.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/stage/mxMedianHybridCrossingReduction.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/stage/mxMinimumCycleRemover.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/stage/mxCoordinateAssignment.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/stage/mxSwimlaneOrdering.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/mxHierarchicalLayout.js');
mxClient.include(mxClient.basePath+'/js/layout/hierarchical/mxSwimlaneLayout.js');
mxClient.include(mxClient.basePath+'/js/model/mxGraphModel.js');
mxClient.include(mxClient.basePath+'/js/model/mxCell.js');
mxClient.include(mxClient.basePath+'/js/model/mxGeometry.js');
mxClient.include(mxClient.basePath+'/js/model/mxCellPath.js');
mxClient.include(mxClient.basePath+'/js/view/mxPerimeter.js');
mxClient.include(mxClient.basePath+'/js/view/mxPrintPreview.js');
mxClient.include(mxClient.basePath+'/js/view/mxStylesheet.js');
mxClient.include(mxClient.basePath+'/js/view/mxCellState.js');
mxClient.include(mxClient.basePath+'/js/view/mxGraphSelectionModel.js');
mxClient.include(mxClient.basePath+'/js/view/mxCellEditor.js');
mxClient.include(mxClient.basePath+'/js/view/mxCellRenderer.js');
mxClient.include(mxClient.basePath+'/js/view/mxEdgeStyle.js');
mxClient.include(mxClient.basePath+'/js/view/mxStyleRegistry.js');
mxClient.include(mxClient.basePath+'/js/view/mxGraphView.js');
mxClient.include(mxClient.basePath+'/js/view/mxGraph.js');
mxClient.include(mxClient.basePath+'/js/view/mxCellOverlay.js');
mxClient.include(mxClient.basePath+'/js/view/mxOutline.js');
mxClient.include(mxClient.basePath+'/js/view/mxMultiplicity.js');
mxClient.include(mxClient.basePath+'/js/view/mxLayoutManager.js');
mxClient.include(mxClient.basePath+'/js/view/mxSwimlaneManager.js');
mxClient.include(mxClient.basePath+'/js/view/mxTemporaryCellStates.js');
mxClient.include(mxClient.basePath+'/js/view/mxCellStatePreview.js');
mxClient.include(mxClient.basePath+'/js/view/mxConnectionConstraint.js');
mxClient.include(mxClient.basePath+'/js/handler/mxGraphHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxPanningHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxPopupMenuHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxCellMarker.js');
mxClient.include(mxClient.basePath+'/js/handler/mxSelectionCellsHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxConnectionHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxConstraintHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxRubberband.js');
mxClient.include(mxClient.basePath+'/js/handler/mxHandle.js');
mxClient.include(mxClient.basePath+'/js/handler/mxVertexHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxEdgeHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxElbowEdgeHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxEdgeSegmentHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxKeyHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxTooltipHandler.js');
mxClient.include(mxClient.basePath+'/js/handler/mxCellTracker.js');
mxClient.include(mxClient.basePath+'/js/handler/mxCellHighlight.js');
mxClient.include(mxClient.basePath+'/js/editor/mxDefaultKeyHandler.js');
mxClient.include(mxClient.basePath+'/js/editor/mxDefaultPopupMenu.js');
mxClient.include(mxClient.basePath+'/js/editor/mxDefaultToolbar.js');
mxClient.include(mxClient.basePath+'/js/editor/mxEditor.js');
mxClient.include(mxClient.basePath+'/js/io/mxCodecRegistry.js');
mxClient.include(mxClient.basePath+'/js/io/mxCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxObjectCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxCellCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxModelCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxRootChangeCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxChildChangeCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxTerminalChangeCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxGenericChangeCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxGraphCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxGraphViewCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxStylesheetCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxDefaultKeyHandlerCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxDefaultToolbarCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxDefaultPopupMenuCodec.js');
mxClient.include(mxClient.basePath+'/js/io/mxEditorCodec.js');
// PREPROCESSOR-REMOVE-START
}
// PREPROCESSOR-REMOVE-END

14
src/js/shape/mxImageShape.js
View File

@ -4,6 +4,13 @@
*/
class mxImageShape extends mxRectangleShape {
/**
* Variable: preserveImageAspect
*
* Switch to preserve image aspect. Default is true.
*/
preserveImageAspect = true;
/**
* Class: mxImageShape
*
@ -35,13 +42,6 @@ class mxImageShape extends mxRectangleShape {
this.shadow = false;
};
/**
* Variable: preserveImageAspect
*
* Switch to preserve image aspect. Default is true.
*/
preserveImageAspect = true;
/**
* Function: getSvgScreenOffset
*

138
src/js/shape/mxLabel.js
View File

@ -8,13 +8,13 @@
* Extends <mxShape> to implement an image shape with a label.
* This shape is registered under <mxConstants.SHAPE_LABEL> in
* <mxCellRenderer>.
*
*
* Constructor: mxLabel
*
* Constructs a new label shape.
*
*
* Parameters:
*
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
@ -22,10 +22,9 @@
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxLabel(bounds, fill, stroke, strokewidth)
{
function mxLabel(bounds, fill, stroke, strokewidth) {
mxRectangleShape.call(this, bounds, fill, stroke, strokewidth);
};
}
/**
* Extends mxShape.
@ -66,12 +65,10 @@ indicatorSpacing = 2;
*
* Initializes the shape and the <indicator>.
*/
init = (container)=>
{
init = (container) => {
init.apply(this, arguments);
if (this.indicatorShape != null)
{
if (this.indicatorShape != null) {
this.indicator = new this.indicatorShape();
this.indicator.dialect = this.dialect;
this.indicator.init(this.node);
@ -84,17 +81,15 @@ init = (container)=>
* Reconfigures this shape. This will update the colors of the indicator
* and reconfigure it if required.
*/
redraw = ()=>
{
if (this.indicator != null)
{
redraw = () => {
if (this.indicator != null) {
this.indicator.fill = this.indicatorColor;
this.indicator.stroke = this.indicatorStrokeColor;
this.indicator.gradient = this.indicatorGradientColor;
this.indicator.direction = this.indicatorDirection;
this.indicator.redraw();
}
redraw.apply(this, arguments);
};
@ -104,34 +99,30 @@ redraw = ()=>
* Returns true for non-rounded, non-rotated shapes with no glass gradient and
* no indicator shape.
*/
isHtmlAllowed = ()=>
{
isHtmlAllowed = () => {
return isHtmlAllowed.apply(this, arguments) &&
this.indicatorColor == null && this.indicatorShape == null;
this.indicatorColor == null && this.indicatorShape == null;
};
/**
* Function: paintForeground
*
*
* Generic background painting implementation.
*/
paintForeground = (c, x, y, w, h)=>
{
paintForeground = (c, x, y, w, h) => {
this.paintImage(c, x, y, w, h);
this.paintIndicator(c, x, y, w, h);
paintForeground.apply(this, arguments);
};
/**
* Function: paintImage
*
*
* Generic background painting implementation.
*/
paintImage = (c, x, y, w, h)=>
{
if (this.image != null)
{
paintImage = (c, x, y, w, h) => {
if (this.image != null) {
var bounds = this.getImageBounds(x, y, w, h);
c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.image, false, false, false);
}
@ -139,60 +130,47 @@ paintImage = (c, x, y, w, h)=>
/**
* Function: getImageBounds
*
*
* Generic background painting implementation.
*/
getImageBounds = (x, y, w, h)=>
{
getImageBounds = (x, y, w, h) => {
var align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
var valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
var width = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_WIDTH, mxConstants.DEFAULT_IMAGESIZE);
var height = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_HEIGHT, mxConstants.DEFAULT_IMAGESIZE);
var spacing = mxUtils.getNumber(this.style, mxConstants.STYLE_SPACING, this.spacing) + 5;
if (align == mxConstants.ALIGN_CENTER)
{
if (align == mxConstants.ALIGN_CENTER) {
x += (w - width) / 2;
}
else if (align == mxConstants.ALIGN_RIGHT)
{
} else if (align == mxConstants.ALIGN_RIGHT) {
x += w - width - spacing;
}
else // default is left
} else // default is left
{
x += spacing;
}
if (valign == mxConstants.ALIGN_TOP)
{
if (valign == mxConstants.ALIGN_TOP) {
y += spacing;
}
else if (valign == mxConstants.ALIGN_BOTTOM)
{
} else if (valign == mxConstants.ALIGN_BOTTOM) {
y += h - height - spacing;
}
else // default is middle
} else // default is middle
{
y += (h - height) / 2;
}
return new mxRectangle(x, y, width, height);
};
/**
* Function: paintIndicator
*
*
* Generic background painting implementation.
*/
paintIndicator = (c, x, y, w, h)=>
{
if (this.indicator != null)
{
paintIndicator = (c, x, y, w, h) => {
if (this.indicator != null) {
this.indicator.bounds = this.getIndicatorBounds(x, y, w, h);
this.indicator.paint(c);
}
else if (this.indicatorImage != null)
{
} else if (this.indicatorImage != null) {
var bounds = this.getIndicatorBounds(x, y, w, h);
c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.indicatorImage, false, false, false);
}
@ -200,66 +178,54 @@ paintIndicator = (c, x, y, w, h)=>
/**
* Function: getIndicatorBounds
*
*
* Generic background painting implementation.
*/
getIndicatorBounds = (x, y, w, h)=>
{
getIndicatorBounds = (x, y, w, h) => {
var align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
var valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
var width = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_WIDTH, this.indicatorSize);
var height = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_HEIGHT, this.indicatorSize);
var spacing = this.spacing + 5;
if (align == mxConstants.ALIGN_RIGHT)
{
var spacing = this.spacing + 5;
if (align == mxConstants.ALIGN_RIGHT) {
x += w - width - spacing;
}
else if (align == mxConstants.ALIGN_CENTER)
{
} else if (align == mxConstants.ALIGN_CENTER) {
x += (w - width) / 2;
}
else // default is left
} else // default is left
{
x += spacing;
}
if (valign == mxConstants.ALIGN_BOTTOM)
{
if (valign == mxConstants.ALIGN_BOTTOM) {
y += h - height - spacing;
}
else if (valign == mxConstants.ALIGN_TOP)
{
} else if (valign == mxConstants.ALIGN_TOP) {
y += spacing;
}
else // default is middle
} else // default is middle
{
y += (h - height) / 2;
}
return new mxRectangle(x, y, width, height);
};
/**
* Function: redrawHtmlShape
*
*
* Generic background painting implementation.
*/
redrawHtmlShape = ()=>
{
redrawHtmlShape = () => {
redrawHtmlShape.apply(this, arguments);
// Removes all children
while(this.node.hasChildNodes())
{
while (this.node.hasChildNodes()) {
this.node.removeChild(this.node.lastChild);
}
if (this.image != null)
{
if (this.image != null) {
var node = document.createElement('img');
node.style.position = 'relative';
node.setAttribute('border', '0');
var bounds = this.getImageBounds(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
bounds.x -= this.bounds.x;
bounds.y -= this.bounds.y;
@ -268,9 +234,9 @@ redrawHtmlShape = ()=>
node.style.top = Math.round(bounds.y) + 'px';
node.style.width = Math.round(bounds.width) + 'px';
node.style.height = Math.round(bounds.height) + 'px';
node.src = this.image;
this.node.appendChild(node);
}
};

14
src/js/shape/mxLine.js
View File

@ -4,6 +4,13 @@
*/
class mxLine extends mxShape {
/**
* Function: vertical
*
* Whether to paint a vertical line.
*/
vertical = false;
/**
* Class: mxLine
*
@ -32,13 +39,6 @@ class mxLine extends mxShape {
this.vertical = (vertical != null) ? vertical : this.vertical;
}
/**
* Function: vertical
*
* Whether to paint a vertical line.
*/
vertical = false;
/**
* Function: paintVertexShape
*

131
src/js/shape/mxMarker.js
View File

@ -3,55 +3,50 @@
* Copyright (c) 2006-2015, Gaudenz Alder
*/
var mxMarker =
{
/**
* Class: mxMarker
*
* A static class that implements all markers for VML and SVG using a
* registry. NOTE: The signatures in this class will change.
*
* Variable: markers
*
* Maps from markers names to functions to paint the markers.
*/
markers: [],
{
/**
* Class: mxMarker
*
* A static class that implements all markers for VML and SVG using a
* registry. NOTE: The signatures in this class will change.
*
* Variable: markers
*
* Maps from markers names to functions to paint the markers.
*/
markers: [],
/**
* Function: addMarker
*
* Adds a factory method that updates a given endpoint and returns a
* function to paint the marker onto the given canvas.
*/
addMarker: (type, funct)=>
{
mxMarker.markers[type] = funct;
},
/**
* Function: addMarker
*
* Adds a factory method that updates a given endpoint and returns a
* function to paint the marker onto the given canvas.
*/
addMarker: (type, funct) => {
mxMarker.markers[type] = funct;
},
/**
* Function: createMarker
*
* Returns a function to paint the given marker.
*/
createMarker: (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)=>
{
var funct = mxMarker.markers[type];
/**
* Function: createMarker
*
* Returns a function to paint the given marker.
*/
createMarker: (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
var funct = mxMarker.markers[type];
return (funct != null) ? funct(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) : null;
}
return (funct != null) ? funct(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) : null;
}
};
};
/**
* Adds the classic and block marker factory method.
*/
(()=>
{
function createArrow(widthFactor)
{
(() => {
function createArrow(widthFactor) {
widthFactor = (widthFactor != null) ? widthFactor : 2;
return (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)=>
{
return (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
// The angle of the forward facing arrow sides against the x axis is
// 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for
// only half the strokewidth is processed ).
@ -69,43 +64,36 @@ var mxMarker =
pe.x += -unitX * f - endOffsetX;
pe.y += -unitY * f - endOffsetY;
return ()=>
{
return () => {
canvas.begin();
canvas.moveTo(pt.x, pt.y);
canvas.lineTo(pt.x - unitX - unitY / widthFactor, pt.y - unitY + unitX / widthFactor);
if (type == mxConstants.ARROW_CLASSIC || type == mxConstants.ARROW_CLASSIC_THIN)
{
if (type == mxConstants.ARROW_CLASSIC || type == mxConstants.ARROW_CLASSIC_THIN) {
canvas.lineTo(pt.x - unitX * 3 / 4, pt.y - unitY * 3 / 4);
}
canvas.lineTo(pt.x + unitY / widthFactor - unitX, pt.y - unitY - unitX / widthFactor);
canvas.close();
if (filled)
{
if (filled) {
canvas.fillAndStroke();
}
else
{
} else {
canvas.stroke();
}
};
}
};
}
mxMarker.addMarker('classic', createArrow(2));
mxMarker.addMarker('classicThin', createArrow(3));
mxMarker.addMarker('block', createArrow(2));
mxMarker.addMarker('blockThin', createArrow(3));
function createOpenArrow(widthFactor)
{
function createOpenArrow(widthFactor) {
widthFactor = (widthFactor != null) ? widthFactor : 2;
return (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)=>
{
return (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
// The angle of the forward facing arrow sides against the x axis is
// 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for
// only half the strokewidth is processed ).
@ -122,8 +110,7 @@ var mxMarker =
pe.x += -endOffsetX * 2;
pe.y += -endOffsetY * 2;
return ()=>
{
return () => {
canvas.begin();
canvas.moveTo(pt.x - unitX - unitY / widthFactor, pt.y - unitY + unitX / widthFactor);
canvas.lineTo(pt.x, pt.y);
@ -131,42 +118,36 @@ var mxMarker =
canvas.stroke();
};
}
};
}
mxMarker.addMarker('open', createOpenArrow(2));
mxMarker.addMarker('openThin', createOpenArrow(3));
mxMarker.addMarker('oval', (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)=>
{
mxMarker.addMarker('oval', (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
var a = size / 2;
var pt = pe.clone();
pe.x -= unitX * a;
pe.y -= unitY * a;
return ()=>
{
return () => {
canvas.ellipse(pt.x - a, pt.y - a, size, size);
if (filled)
{
if (filled) {
canvas.fillAndStroke();
}
else
{
} else {
canvas.stroke();
}
};
});
function diamond(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)
{
function diamond(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
// The angle of the forward facing arrow sides against the x axis is
// 45 degrees, 1/sin(45) = 1.4142 / 2 = 0.7071 ( / 2 allows for
// 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).
var swFactor = (type == mxConstants.ARROW_DIAMOND) ? 0.7071 : 0.9862;
var swFactor = (type == mxConstants.ARROW_DIAMOND) ? 0.7071 : 0.9862;
var endOffsetX = unitX * sw * swFactor;
var endOffsetY = unitY * sw * swFactor;
@ -181,10 +162,9 @@ var mxMarker =
pe.y += -unitY - endOffsetY;
// thickness factor for diamond
var tk = ((type == mxConstants.ARROW_DIAMOND) ? 2 : 3.4);
var tk = ((type == mxConstants.ARROW_DIAMOND) ? 2 : 3.4);
return ()=>
{
return () => {
canvas.begin();
canvas.moveTo(pt.x, pt.y);
canvas.lineTo(pt.x - unitX / 2 - unitY / tk, pt.y + unitX / tk - unitY / 2);
@ -192,16 +172,13 @@ var mxMarker =
canvas.lineTo(pt.x - unitX / 2 + unitY / tk, pt.y - unitY / 2 - unitX / tk);
canvas.close();
if (filled)
{
if (filled) {
canvas.fillAndStroke();
}
else
{
} else {
canvas.stroke();
}
};
};
}
mxMarker.addMarker('diamond', diamond);
mxMarker.addMarker('diamondThin', diamond);

62
src/js/shape/mxStencilRegistry.js
View File

@ -1,14 +1,14 @@
/**
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*
*
* Code to add stencils.
*
*
* (code)
* var req = mxUtils.load('test/stencils.xml');
* var root = req.getDocumentElement();
* var shape = root.firstChild;
*
*
* while (shape != null)
* {
* if (shape.nodeType == mxConstants.NODETYPE_ELEMENT)
@ -21,35 +21,33 @@
* (end)
*/
var mxStencilRegistry =
{
/**
* Class: mxStencilRegistry
*
* A singleton class that provides a registry for stencils and the methods
* for painting those stencils onto a canvas or into a DOM.
*/
stencils: {},
/**
* Function: addStencil
*
* Adds the given <mxStencil>.
*/
addStencil: (name, stencil)=>
{
mxStencilRegistry.stencils[name] = stencil;
},
/**
* Function: getStencil
*
* Returns the <mxStencil> for the given name.
*/
getStencil: (name)=>
{
return mxStencilRegistry.stencils[name];
}
{
/**
* Class: mxStencilRegistry
*
* A singleton class that provides a registry for stencils and the methods
* for painting those stencils onto a canvas or into a DOM.
*/
stencils: {},
};
/**
* Function: addStencil
*
* Adds the given <mxStencil>.
*/
addStencil: (name, stencil) => {
mxStencilRegistry.stencils[name] = stencil;
},
/**
* Function: getStencil
*
* Returns the <mxStencil> for the given name.
*/
getStencil: (name) => {
return mxStencilRegistry.stencils[name];
}
};
export default mxStencilRegistry;

16
src/js/shape/mxSwimlane.js
View File

@ -4,6 +4,14 @@
*/
class mxSwimlane extends mxShape {
/**
* Variable: imageSize
*
* Default imagewidth and imageheight if an image but no imagewidth
* and imageheight are defined in the style. Value is 16.
*/
imageSize = 16;
/**
* Class: mxSwimlane
*
@ -37,14 +45,6 @@ class mxSwimlane extends mxShape {
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Variable: imageSize
*
* Default imagewidth and imageheight if an image but no imagewidth
* and imageheight are defined in the style. Value is 16.
*/
imageSize = 16;
/**
* Function: isRoundable
*

2
src/js/shape/mxText.js
View File

@ -1146,7 +1146,7 @@ class mxText extends mxShape {
dy = (this.spacingTop - this.spacingBottom) / 2;
} else if (this.valign == mxConstants.ALIGN_BOTTOM) {
dy = -this.spacingBottom - this.baseSpacingBottom;
;
} else {
dy = this.spacingTop + this.baseSpacingTop;
}

82
src/js/util/mxClipboard.js
View File

@ -5,11 +5,11 @@
var mxClipboard = {
/**
* Class: mxClipboard
*
*
* Singleton that implements a clipboard for graph cells.
*
* Example:
*
*
* (code)
* mxClipboard.copy(graph);
* mxClipboard.paste(graph2);
@ -17,13 +17,13 @@ var mxClipboard = {
*
* This copies the selection cells from the graph to the clipboard and
* pastes them into graph2.
*
*
* For fine-grained control of the clipboard data the <mxGraph.canExportCell>
* and <mxGraph.canImportCell> functions can be overridden.
*
*
* To restore previous parents for pasted cells, the implementation for
* <copy> and <paste> can be changed as follows.
*
*
* (code)
* mxClipboard.copy = (graph, cells)=>
* {
@ -42,7 +42,7 @@ var mxClipboard = {
*
* return result;
* };
*
*
* mxClipboard.paste = (graph)=>
* {
* if (!mxClipboard.isEmpty())
@ -72,9 +72,9 @@ var mxClipboard = {
* }
* };
* (end)
*
*
* Variable: STEPSIZE
*
*
* Defines the step size to offset the cells after each paste operation.
* Default is 10.
*/
@ -82,99 +82,93 @@ var mxClipboard = {
/**
* Variable: insertCount
*
*
* Counts the number of times the clipboard data has been inserted.
*/
insertCount: 1,
/**
* Variable: cells
*
*
* Holds the array of <mxCells> currently in the clipboard.
*/
cells: null,
/**
* Function: setCells
*
*
* Sets the cells in the clipboard. Fires a <mxEvent.CHANGE> event.
*/
setCells: (cells)=>
{
setCells: (cells) => {
mxClipboard.cells = cells;
},
/**
* Function: getCells
*
*
* Returns the cells in the clipboard.
*/
getCells: ()=>
{
getCells: () => {
return mxClipboard.cells;
},
/**
* Function: isEmpty
*
*
* Returns true if the clipboard currently has not data stored.
*/
isEmpty: ()=>
{
isEmpty: () => {
return mxClipboard.getCells() == null;
},
/**
* Function: cut
*
*
* Cuts the given array of <mxCells> from the specified graph.
* If cells is null then the selection cells of the graph will
* be used. Returns the cells that have been cut from the graph.
*
* Parameters:
*
*
* graph - <mxGraph> that contains the cells to be cut.
* cells - Optional array of <mxCells> to be cut.
*/
cut: (graph, cells)=>
{
cut: (graph, cells) => {
cells = mxClipboard.copy(graph, cells);
mxClipboard.insertCount = 0;
mxClipboard.removeCells(graph, cells);
return cells;
},
/**
* Function: removeCells
*
*
* Hook to remove the given cells from the given graph after
* a cut operation.
*
* Parameters:
*
*
* graph - <mxGraph> that contains the cells to be cut.
* cells - Array of <mxCells> to be cut.
*/
removeCells: (graph, cells)=>
{
removeCells: (graph, cells) => {
graph.removeCells(cells);
},
/**
* Function: copy
*
*
* Copies the given array of <mxCells> from the specified
* graph to <cells>. Returns the original array of cells that has
* been cloned. Descendants of cells in the array are ignored.
*
*
* Parameters:
*
*
* graph - <mxGraph> that contains the cells to be copied.
* cells - Optional array of <mxCells> to be copied.
*/
copy: (graph, cells)=>
{
copy: (graph, cells) => {
cells = cells || graph.getSelectionCells();
var result = graph.getExportableCells(graph.model.getTopmostCells(cells));
mxClipboard.insertCount = 1;
@ -185,7 +179,7 @@ var mxClipboard = {
/**
* Function: paste
*
*
* Pastes the <cells> into the specified graph restoring
* the relation to <parents>, if possible. If the parents
* are no longer in the graph or invisible then the
@ -193,27 +187,25 @@ var mxClipboard = {
* swimlane under the cell's new location if one exists.
* The cells are added to the graph using <mxGraph.importCells>
* and returned.
*
*
* Parameters:
*
*
* graph - <mxGraph> to paste the <cells> into.
*/
paste: (graph)=>
{
paste: (graph) => {
var cells = null;
if (!mxClipboard.isEmpty())
{
if (!mxClipboard.isEmpty()) {
cells = graph.getImportableCells(mxClipboard.getCells());
var delta = mxClipboard.insertCount * mxClipboard.STEPSIZE;
var parent = graph.getDefaultParent();
cells = graph.importCells(cells, delta, delta, parent);
// Increments the counter and selects the inserted cells
mxClipboard.insertCount++;
graph.setSelectionCells(cells);
}
return cells;
}
};

670
src/js/util/mxConstants.js
View File

File diff suppressed because it is too large Load Diff

10
src/js/util/mxDictionary.js
View File

@ -7,17 +7,13 @@
*
* A wrapper class for an associative array with object keys. Note: This
* implementation uses <mxObjectIdentitiy> to turn object keys into strings.
*
*
* Constructor: mxEventSource
*
* Constructs a new dictionary which allows object to be used as keys.
*/
class mxDictionary {
constructor() {
this.clear();
};
/**
* Function: map
*
@ -25,6 +21,10 @@ class mxDictionary {
*/
map = null;
constructor() {
this.clear();
};
/**
* Function: clear
*

54
src/js/util/mxDivResizer.js
View File

@ -4,13 +4,13 @@
*/
/**
* Class: mxDivResizer
*
*
* Maintains the size of a div element in Internet Explorer. This is a
* workaround for the right and bottom style being ignored in IE.
*
*
* If you need a div to cover the scrollwidth and -height of a document,
* then you can use this class as follows:
*
*
* (code)
* var resizer = new mxDivResizer(background);
* resizer.getDocumentHeight = ()=>
@ -23,21 +23,40 @@
* }
* resizer.resize();
* (end)
*
*
* Constructor: mxDivResizer
*
*
* Constructs an object that maintains the size of a div
* element when the window is being resized. This is only
* required for Internet Explorer as it ignores the respective
* stylesheet information for DIV elements.
*
*
* Parameters:
*
*
* div - Reference to the DOM node whose size should be maintained.
* container - Optional Container that contains the div. Default is the
* window.
*/
class mxDivResizer {
/**
* Function: resizeWidth
*
* Boolean specifying if the width should be updated.
*/
resizeWidth = true;
/**
* Function: resizeHeight
*
* Boolean specifying if the height should be updated.
*/
resizeHeight = true;
/**
* Function: handlingResize
*
* Boolean specifying if the width should be updated.
*/
handlingResize = false;
constructor(div, container) {
if (div.nodeName.toLowerCase() == 'div') {
if (container == null) {
@ -66,27 +85,6 @@ class mxDivResizer {
}
};
/**
* Function: resizeWidth
*
* Boolean specifying if the width should be updated.
*/
resizeWidth = true;
/**
* Function: resizeHeight
*
* Boolean specifying if the height should be updated.
*/
resizeHeight = true;
/**
* Function: handlingResize
*
* Boolean specifying if the width should be updated.
*/
handlingResize = false;
/**
* Function: resize
*

2986
src/js/util/mxEvent.js
View File

File diff suppressed because it is too large Load Diff

40
src/js/util/mxEventObject.js
View File

@ -4,6 +4,25 @@
*/
class mxEventObject {
/**
* Variable: name
*
* Holds the name.
*/
name = null;
/**
* Variable: properties
*
* Holds the properties as an associative array.
*/
properties = null;
/**
* Variable: consumed
*
* Holds the consumed state. Default is false.
*/
consumed = false;
/**
* Class: mxEventObject
*
@ -38,27 +57,6 @@ class mxEventObject {
}
};
/**
* Variable: name
*
* Holds the name.
*/
name = null;
/**
* Variable: properties
*
* Holds the properties as an associative array.
*/
properties = null;
/**
* Variable: consumed
*
* Holds the consumed state. Default is false.
*/
consumed = false;
/**
* Function: getName
*

25
src/js/util/mxGuide.js
View File

@ -6,66 +6,54 @@
* Class: mxGuide
*
* Implements the alignment of selection cells to other cells in the graph.
*
*
* Constructor: mxGuide
*
*
* Constructs a new guide object.
*/
class mxGuide {
constructor(graph, states) {
this.graph = graph;
this.setStates(states);
};
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph> instance.
*/
graph = null;
/**
* Variable: states
*
* Contains the <mxCellStates> that are used for alignment.
*/
states = null;
/**
* Variable: horizontal
*
* Specifies if horizontal guides are enabled. Default is true.
*/
horizontal = true;
/**
* Variable: vertical
*
* Specifies if vertical guides are enabled. Default is true.
*/
vertical = true;
/**
* Variable: guideX
*
* Holds the <mxShape> for the horizontal guide.
*/
guideX = null;
/**
* Variable: guideY
*
* Holds the <mxShape> for the vertical guide.
*/
guideY = null;
/**
* Variable: rounded
*
* Specifies if rounded coordinates should be used. Default is false.
*/
rounded = false;
/**
* Variable: tolerance
*
@ -73,6 +61,11 @@ class mxGuide {
*/
tolerance = 2;
constructor(graph, states) {
this.graph = graph;
this.setStates(states);
};
/**
* Function: setStates
*
@ -193,7 +186,7 @@ class mxGuide {
}
overrideX = overrideX || override;
};
}
// Snaps the top, middle or bottom to the given y-coordinate
function snapY(y, state, centerAlign) {
@ -233,7 +226,7 @@ class mxGuide {
}
overrideY = overrideY || override;
};
}
for (var i = 0; i < this.states.length; i++) {
var state = this.states[i];

3
src/js/util/mxImageExport.js
View File

@ -41,7 +41,8 @@ class mxImageExport {
*
* Constructs a new image export.
*/
constructor() {}
constructor() {
}
/**
* Function: drawState

27
src/js/util/mxPoint.js
View File

@ -6,6 +6,19 @@
import mxUtils from "../util/mxUtils";
class mxPoint {
/**
* Variable: x
*
* Holds the x-coordinate of the point. Default is 0.
*/
x = null;
/**
* Variable: y
*
* Holds the y-coordinate of the point. Default is 0.
*/
y = null;
/**
* Class: mxPoint
*
@ -21,20 +34,6 @@ class mxPoint {
this.y = (y != null) ? y : 0;
};
/**
* Variable: x
*
* Holds the x-coordinate of the point. Default is 0.
*/
x = null;
/**
* Variable: y
*
* Holds the y-coordinate of the point. Default is 0.
*/
y = null;
/**
* Function: equals
*

126
src/js/util/mxPopupMenu.js
View File

@ -7,6 +7,65 @@ import mxUtils from "./mxUtils";
import mxEventObject from "./mxEventObject";
class mxPopupMenu extends mxEventSource {
/**
* Variable: submenuImage
*
* URL of the image to be used for the submenu icon.
*/
submenuImage = mxClient.imageBasePath + '/submenu.gif';
/**
* Variable: zIndex
*
* Specifies the zIndex for the popupmenu and its shadow. Default is 10006.
*/
zIndex = 10006;
/**
* Variable: factoryMethod
*
* Function that is used to create the popup menu. The function takes the
* current panning handler, the <mxCell> under the mouse and the mouse
* event that triggered the call as arguments.
*/
factoryMethod = null;
/**
* Variable: useLeftButtonForPopup
*
* Specifies if popupmenus should be activated by clicking the left mouse
* button. Default is false.
*/
useLeftButtonForPopup = false;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
enabled = true;
/**
* Variable: itemCount
*
* Contains the number of times <addItem> has been called for a new menu.
*/
itemCount = 0;
/**
* Variable: autoExpand
*
* Specifies if submenus should be expanded on mouseover. Default is false.
*/
autoExpand = false;
/**
* Variable: smartSeparators
*
* Specifies if separators should only be added if a menu item follows them.
* Default is false.
*/
smartSeparators = false;
/**
* Variable: labels
*
* Specifies if any labels should be visible. Default is true.
*/
labels = true;
/**
* Class: mxPopupMenu
*
@ -42,73 +101,6 @@ class mxPopupMenu extends mxEventSource {
}
};
/**
* Variable: submenuImage
*
* URL of the image to be used for the submenu icon.
*/
submenuImage = mxClient.imageBasePath + '/submenu.gif';
/**
* Variable: zIndex
*
* Specifies the zIndex for the popupmenu and its shadow. Default is 10006.
*/
zIndex = 10006;
/**
* Variable: factoryMethod
*
* Function that is used to create the popup menu. The function takes the
* current panning handler, the <mxCell> under the mouse and the mouse
* event that triggered the call as arguments.
*/
factoryMethod = null;
/**
* Variable: useLeftButtonForPopup
*
* Specifies if popupmenus should be activated by clicking the left mouse
* button. Default is false.
*/
useLeftButtonForPopup = false;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
enabled = true;
/**
* Variable: itemCount
*
* Contains the number of times <addItem> has been called for a new menu.
*/
itemCount = 0;
/**
* Variable: autoExpand
*
* Specifies if submenus should be expanded on mouseover. Default is false.
*/
autoExpand = false;
/**
* Variable: smartSeparators
*
* Specifies if separators should only be added if a menu item follows them.
* Default is false.
*/
smartSeparators = false;
/**
* Variable: labels
*
* Specifies if any labels should be visible. Default is true.
*/
labels = true;
/**
* Function: init
*

39
src/js/util/mxRectangle.js
View File

@ -7,7 +7,7 @@
*
* Extends <mxPoint> to implement a 2-dimensional rectangle with double
* precision coordinates.
*
*
* Constructor: mxRectangle
*
* Constructs a new rectangle for the optional parameters. If no parameters
@ -17,6 +17,19 @@
import mxPoint from "./mxPoint";
class mxRectangle extends mxPoint {
/**
* Variable: width
*
* Holds the width of the rectangle. Default is 0.
*/
width = null;
/**
* Variable: height
*
* Holds the height of the rectangle. Default is 0.
*/
height = null;
constructor(x, y, width, height) {
super(x, y);
this.width = (width != null) ? width : 0;
@ -24,18 +37,13 @@ class mxRectangle extends mxPoint {
};
/**
* Variable: width
* Function: fromRectangle
*
* Holds the width of the rectangle. Default is 0.
* Returns a new <mxRectangle> which is a copy of the given rectangle.
*/
width = null;
/**
* Variable: height
*
* Holds the height of the rectangle. Default is 0.
*/
height = null;
static fromRectangle = (rect) => {
return new mxRectangle(rect.x, rect.y, rect.width, rect.height);
};
/**
* Function: setRect
@ -154,15 +162,6 @@ class mxRectangle extends mxPoint {
return obj != null && obj.x == this.x && obj.y == this.y &&
obj.width == this.width && obj.height == this.height;
};
/**
* Function: fromRectangle
*
* Returns a new <mxRectangle> which is a copy of the given rectangle.
*/
static fromRectangle = (rect) => {
return new mxRectangle(rect.x, rect.y, rect.width, rect.height);
};
}
export default mxRectangle;

787
src/js/util/mxResources.js
View File

@ -3,450 +3,387 @@
* Copyright (c) 2006-2016, Gaudenz Alder
*/
var mxResources =
{
/**
* Class: mxResources
*
* Implements internationalization. You can provide any number of
* resource files on the server using the following format for the
* filename: name[-en].properties. The en stands for any lowercase
* 2-character language shortcut (eg. de for german, fr for french).
*
* If the optional language extension is omitted, then the file is used as a
* default resource which is loaded in all cases. If a properties file for a
* specific language exists, then it is used to override the settings in the
* default resource. All entries in the file are of the form key=value. The
* values may then be accessed in code via <get>. Lines without
* equal signs in the properties files are ignored.
*
* Resource files may either be added programmatically using
* <add> or via a resource tag in the UI section of the
* editor configuration file, eg:
*
* (code)
* <mxEditor>
* <ui>
* <resource basename="examples/resources/mxWorkflow"/>
* (end)
*
* The above element will load examples/resources/mxWorkflow.properties as well
* as the language specific file for the current language, if it exists.
*
* Values may contain placeholders of the form {1}...{n} where each placeholder
* is replaced with the value of the corresponding array element in the params
* argument passed to <mxResources.get>. The placeholder {1} maps to the first
* element in the array (at index 0).
*
* See <mxClient.language> for more information on specifying the default
* language or disabling all loading of resources.
*
* Lines that start with a # sign will be ignored.
*
* Special characters
*
* To use unicode characters, use the standard notation (eg. \u8fd1) or %u as a
* prefix (eg. %u20AC will display a Euro sign). For normal hex encoded strings,
* use % as a prefix, eg. %F6 will display a "o umlaut" (&ouml;).
*
* See <resourcesEncoded> to disable this. If you disable this, make sure that
* your files are UTF-8 encoded.
*
* Asynchronous loading
*
* By default, the core adds two resource files synchronously at load time.
* To load these files asynchronously, set <mxLoadResources> to false
* before loading mxClient.js and use <mxResources.loadResources> instead.
*
* Variable: resources
*
* Object that maps from keys to values.
*/
resources: {},
/**
* Variable: extension
*
* Specifies the extension used for language files. Default is <mxResourceExtension>.
*/
extension: mxResourceExtension,
/**
* Variable: resourcesEncoded
*
* Specifies whether or not values in resource files are encoded with \u or
* percentage. Default is false.
*/
resourcesEncoded: false,
/**
* Variable: loadDefaultBundle
*
* Specifies if the default file for a given basename should be loaded.
* Default is true.
*/
loadDefaultBundle: true,
/**
* Variable: loadDefaultBundle
*
* Specifies if the specific language file file for a given basename should
* be loaded. Default is true.
*/
loadSpecialBundle: true,
/**
* Function: isLanguageSupported
*
* Hook for subclassers to disable support for a given language. This
* implementation returns true if lan is in <mxClient.languages>.
*
* Parameters:
*
* lan - The current language.
*/
isLanguageSupported: (lan)=>
{
if (mxClient.languages != null)
{
return mxUtils.indexOf(mxClient.languages, lan) >= 0;
}
return true;
},
/**
* Class: mxResources
*
* Implements internationalization. You can provide any number of
* resource files on the server using the following format for the
* filename: name[-en].properties. The en stands for any lowercase
* 2-character language shortcut (eg. de for german, fr for french).
*
* If the optional language extension is omitted, then the file is used as a
* default resource which is loaded in all cases. If a properties file for a
* specific language exists, then it is used to override the settings in the
* default resource. All entries in the file are of the form key=value. The
* values may then be accessed in code via <get>. Lines without
* equal signs in the properties files are ignored.
*
* Resource files may either be added programmatically using
* <add> or via a resource tag in the UI section of the
* editor configuration file, eg:
*
* (code)
* <mxEditor>
* <ui>
* <resource basename="examples/resources/mxWorkflow"/>
* (end)
*
* The above element will load examples/resources/mxWorkflow.properties as well
* as the language specific file for the current language, if it exists.
*
* Values may contain placeholders of the form {1}...{n} where each placeholder
* is replaced with the value of the corresponding array element in the params
* argument passed to <mxResources.get>. The placeholder {1} maps to the first
* element in the array (at index 0).
*
* See <mxClient.language> for more information on specifying the default
* language or disabling all loading of resources.
*
* Lines that start with a # sign will be ignored.
*
* Special characters
*
* To use unicode characters, use the standard notation (eg. \u8fd1) or %u as a
* prefix (eg. %u20AC will display a Euro sign). For normal hex encoded strings,
* use % as a prefix, eg. %F6 will display a "o umlaut" (&ouml;).
*
* See <resourcesEncoded> to disable this. If you disable this, make sure that
* your files are UTF-8 encoded.
*
* Asynchronous loading
*
* By default, the core adds two resource files synchronously at load time.
* To load these files asynchronously, set <mxLoadResources> to false
* before loading mxClient.js and use <mxResources.loadResources> instead.
*
* Variable: resources
*
* Object that maps from keys to values.
*/
resources: {},
/**
* Function: getDefaultBundle
*
* Hook for subclassers to return the URL for the special bundle. This
* implementation returns basename + <extension> or null if
* <loadDefaultBundle> is false.
*
* Parameters:
*
* basename - The basename for which the file should be loaded.
* lan - The current language.
*/
getDefaultBundle: (basename, lan)=>
{
if (mxResources.loadDefaultBundle || !mxResources.isLanguageSupported(lan))
{
return basename + mxResources.extension;
}
else
{
return null;
}
},
/**
* Variable: extension
*
* Specifies the extension used for language files. Default is <mxResourceExtension>.
*/
extension: mxResourceExtension,
/**
* Function: getSpecialBundle
*
* Hook for subclassers to return the URL for the special bundle. This
* implementation returns basename + '_' + lan + <extension> or null if
* <loadSpecialBundle> is false or lan equals <mxClient.defaultLanguage>.
*
* If <mxResources.languages> is not null and <mxClient.language> contains
* a dash, then this method checks if <isLanguageSupported> returns true
* for the full language (including the dash). If that returns false the
* first part of the language (up to the dash) will be tried as an extension.
*
* If <mxResources.language> is null then the first part of the language is
* used to maintain backwards compatibility.
*
* Parameters:
*
* basename - The basename for which the file should be loaded.
* lan - The language for which the file should be loaded.
*/
getSpecialBundle: (basename, lan)=>
{
if (mxClient.languages == null || !this.isLanguageSupported(lan))
{
var dash = lan.indexOf('-');
if (dash > 0)
{
lan = lan.substring(0, dash);
}
}
/**
* Variable: resourcesEncoded
*
* Specifies whether or not values in resource files are encoded with \u or
* percentage. Default is false.
*/
resourcesEncoded: false,
if (mxResources.loadSpecialBundle && mxResources.isLanguageSupported(lan) && lan != mxClient.defaultLanguage)
{
return basename + '_' + lan + mxResources.extension;
}
else
{
return null;
}
},
/**
* Variable: loadDefaultBundle
*
* Specifies if the default file for a given basename should be loaded.
* Default is true.
*/
loadDefaultBundle: true,
/**
* Function: add
*
* Adds the default and current language properties file for the specified
* basename. Existing keys are overridden as new files are added. If no
* callback is used then the request is synchronous.
*
* Example:
*
* At application startup, additional resources may be
* added using the following code:
*
* (code)
* mxResources.add('resources/editor');
* (end)
*
* Parameters:
*
* basename - The basename for which the file should be loaded.
* lan - The language for which the file should be loaded.
* callback - Optional callback for asynchronous loading.
*/
add: (basename, lan, callback)=>
{
lan = (lan != null) ? lan : ((mxClient.language != null) ?
mxClient.language.toLowerCase() : mxConstants.NONE);
if (lan != mxConstants.NONE)
{
var defaultBundle = mxResources.getDefaultBundle(basename, lan);
var specialBundle = mxResources.getSpecialBundle(basename, lan);
var loadSpecialBundle = ()=>
{
if (specialBundle != null)
{
if (callback)
{
mxUtils.get(specialBundle, (req)=>
{
mxResources.parse(req.getText());
callback();
}, ()=>
{
callback();
});
}
else
{
try
{
var req = mxUtils.load(specialBundle);
if (req.isReady())
{
mxResources.parse(req.getText());
}
}
catch (e)
{
// ignore
}
/**
* Variable: loadDefaultBundle
*
* Specifies if the specific language file file for a given basename should
* be loaded. Default is true.
*/
loadSpecialBundle: true,
/**
* Function: isLanguageSupported
*
* Hook for subclassers to disable support for a given language. This
* implementation returns true if lan is in <mxClient.languages>.
*
* Parameters:
*
* lan - The current language.
*/
isLanguageSupported: (lan) => {
if (mxClient.languages != null) {
return mxUtils.indexOf(mxClient.languages, lan) >= 0;
}
return true;
},
/**
* Function: getDefaultBundle
*
* Hook for subclassers to return the URL for the special bundle. This
* implementation returns basename + <extension> or null if
* <loadDefaultBundle> is false.
*
* Parameters:
*
* basename - The basename for which the file should be loaded.
* lan - The current language.
*/
getDefaultBundle: (basename, lan) => {
if (mxResources.loadDefaultBundle || !mxResources.isLanguageSupported(lan)) {
return basename + mxResources.extension;
} else {
return null;
}
},
/**
* Function: getSpecialBundle
*
* Hook for subclassers to return the URL for the special bundle. This
* implementation returns basename + '_' + lan + <extension> or null if
* <loadSpecialBundle> is false or lan equals <mxClient.defaultLanguage>.
*
* If <mxResources.languages> is not null and <mxClient.language> contains
* a dash, then this method checks if <isLanguageSupported> returns true
* for the full language (including the dash). If that returns false the
* first part of the language (up to the dash) will be tried as an extension.
*
* If <mxResources.language> is null then the first part of the language is
* used to maintain backwards compatibility.
*
* Parameters:
*
* basename - The basename for which the file should be loaded.
* lan - The language for which the file should be loaded.
*/
getSpecialBundle: (basename, lan) => {
if (mxClient.languages == null || !this.isLanguageSupported(lan)) {
var dash = lan.indexOf('-');
if (dash > 0) {
lan = lan.substring(0, dash);
}
}
else if (callback != null)
{
callback();
if (mxResources.loadSpecialBundle && mxResources.isLanguageSupported(lan) && lan != mxClient.defaultLanguage) {
return basename + '_' + lan + mxResources.extension;
} else {
return null;
}
}
if (defaultBundle != null)
{
if (callback)
{
mxUtils.get(defaultBundle, (req)=>
{
mxResources.parse(req.getText());
loadSpecialBundle();
}, ()=>
{
loadSpecialBundle();
});
}
else
{
try
{
var req = mxUtils.load(defaultBundle);
if (req.isReady())
{
},
/**
* Function: add
*
* Adds the default and current language properties file for the specified
* basename. Existing keys are overridden as new files are added. If no
* callback is used then the request is synchronous.
*
* Example:
*
* At application startup, additional resources may be
* added using the following code:
*
* (code)
* mxResources.add('resources/editor');
* (end)
*
* Parameters:
*
* basename - The basename for which the file should be loaded.
* lan - The language for which the file should be loaded.
* callback - Optional callback for asynchronous loading.
*/
add: (basename, lan, callback) => {
lan = (lan != null) ? lan : ((mxClient.language != null) ?
mxClient.language.toLowerCase() : mxConstants.NONE);
if (lan != mxConstants.NONE) {
var defaultBundle = mxResources.getDefaultBundle(basename, lan);
var specialBundle = mxResources.getSpecialBundle(basename, lan);
var loadSpecialBundle = () => {
if (specialBundle != null) {
if (callback) {
mxUtils.get(specialBundle, (req) => {
mxResources.parse(req.getText());
}
loadSpecialBundle();
}
catch (e)
{
// ignore
}
}
}
else
{
// Overlays the language specific file (_lan-extension)
loadSpecialBundle();
}
}
},
callback();
}, () => {
callback();
});
} else {
try {
var req = mxUtils.load(specialBundle);
/**
* Function: parse
*
* Parses the key, value pairs in the specified
* text and stores them as local resources.
*/
parse: (text)=>
{
if (text != null)
{
var lines = text.split('\n');
for (var i = 0; i < lines.length; i++)
{
if (lines[i].charAt(0) != '#')
{
var index = lines[i].indexOf('=');
if (index > 0)
{
var key = lines[i].substring(0, index);
var idx = lines[i].length;
if (lines[i].charCodeAt(idx - 1) == 13)
{
idx--;
if (req.isReady()) {
mxResources.parse(req.getText());
}
} catch (e) {
// ignore
}
}
} else if (callback != null) {
callback();
}
var value = lines[i].substring(index + 1, idx);
if (this.resourcesEncoded)
{
value = value.replace(/\\(?=u[a-fA-F\d]{4})/g,"%");
mxResources.resources[key] = unescape(value);
}
if (defaultBundle != null) {
if (callback) {
mxUtils.get(defaultBundle, (req) => {
mxResources.parse(req.getText());
loadSpecialBundle();
}, () => {
loadSpecialBundle();
});
} else {
try {
var req = mxUtils.load(defaultBundle);
if (req.isReady()) {
mxResources.parse(req.getText());
}
loadSpecialBundle();
} catch (e) {
// ignore
}
}
else
{
mxResources.resources[key] = value;
} else {
// Overlays the language specific file (_lan-extension)
loadSpecialBundle();
}
}
},
/**
* Function: parse
*
* Parses the key, value pairs in the specified
* text and stores them as local resources.
*/
parse: (text) => {
if (text != null) {
var lines = text.split('\n');
for (var i = 0; i < lines.length; i++) {
if (lines[i].charAt(0) != '#') {
var index = lines[i].indexOf('=');
if (index > 0) {
var key = lines[i].substring(0, index);
var idx = lines[i].length;
if (lines[i].charCodeAt(idx - 1) == 13) {
idx--;
}
var value = lines[i].substring(index + 1, idx);
if (this.resourcesEncoded) {
value = value.replace(/\\(?=u[a-fA-F\d]{4})/g, "%");
mxResources.resources[key] = unescape(value);
} else {
mxResources.resources[key] = value;
}
}
}
}
}
}
}
},
},
/**
* Function: get
*
* Returns the value for the specified resource key.
*
* Example:
* To read the value for 'welomeMessage', use the following:
* (code)
* var result = mxResources.get('welcomeMessage') || '';
* (end)
*
* This would require an entry of the following form in
* one of the English language resource files:
* (code)
* welcomeMessage=Welcome to mxGraph!
* (end)
*
* The part behind the || is the string value to be used if the given
* resource is not available.
*
* Parameters:
*
* key - String that represents the key of the resource to be returned.
* params - Array of the values for the placeholders of the form {1}...{n}
* to be replaced with in the resulting string.
* defaultValue - Optional string that specifies the default return value.
*/
get: (key, params, defaultValue)=>
{
var value = mxResources.resources[key];
// Applies the default value if no resource was found
if (value == null)
{
value = defaultValue;
}
// Replaces the placeholders with the values in the array
if (value != null && params != null)
{
value = mxResources.replacePlaceholders(value, params);
}
return value;
},
/**
* Function: get
*
* Returns the value for the specified resource key.
*
* Example:
* To read the value for 'welomeMessage', use the following:
* (code)
* var result = mxResources.get('welcomeMessage') || '';
* (end)
*
* This would require an entry of the following form in
* one of the English language resource files:
* (code)
* welcomeMessage=Welcome to mxGraph!
* (end)
*
* The part behind the || is the string value to be used if the given
* resource is not available.
*
* Parameters:
*
* key - String that represents the key of the resource to be returned.
* params - Array of the values for the placeholders of the form {1}...{n}
* to be replaced with in the resulting string.
* defaultValue - Optional string that specifies the default return value.
*/
get: (key, params, defaultValue) => {
var value = mxResources.resources[key];
/**
* Function: replacePlaceholders
*
* Replaces the given placeholders with the given parameters.
*
* Parameters:
*
* value - String that contains the placeholders.
* params - Array of the values for the placeholders of the form {1}...{n}
* to be replaced with in the resulting string.
*/
replacePlaceholders: (value, params)=>
{
var result = [];
var index = null;
for (var i = 0; i < value.length; i++)
{
var c = value.charAt(i);
if (c == '{')
{
index = '';
}
else if (index != null && c == '}')
{
index = parseInt(index)-1;
if (index >= 0 && index < params.length)
{
result.push(params[index]);
// Applies the default value if no resource was found
if (value == null) {
value = defaultValue;
}
index = null;
}
else if (index != null)
{
index += c;
}
else
{
result.push(c);
}
}
return result.join('');
},
/**
* Function: loadResources
*
* Loads all required resources asynchronously. Use this to load the graph and
* editor resources if <mxLoadResources> is false.
*
* Parameters:
*
* callback - Callback function for asynchronous loading.
*/
loadResources: (callback)=>
{
mxResources.add(mxClient.basePath+'/resources/editor', null, ()=>
{
mxResources.add(mxClient.basePath+'/resources/graph', null, callback);
});
}
// Replaces the placeholders with the values in the array
if (value != null && params != null) {
value = mxResources.replacePlaceholders(value, params);
}
};
return value;
},
/**
* Function: replacePlaceholders
*
* Replaces the given placeholders with the given parameters.
*
* Parameters:
*
* value - String that contains the placeholders.
* params - Array of the values for the placeholders of the form {1}...{n}
* to be replaced with in the resulting string.
*/
replacePlaceholders: (value, params) => {
var result = [];
var index = null;
for (var i = 0; i < value.length; i++) {
var c = value.charAt(i);
if (c == '{') {
index = '';
} else if (index != null && c == '}') {
index = parseInt(index) - 1;
if (index >= 0 && index < params.length) {
result.push(params[index]);
}
index = null;
} else if (index != null) {
index += c;
} else {
result.push(c);
}
}
return result.join('');
},
/**
* Function: loadResources
*
* Loads all required resources asynchronously. Use this to load the graph and
* editor resources if <mxLoadResources> is false.
*
* Parameters:
*
* callback - Callback function for asynchronous loading.
*/
loadResources: (callback) => {
mxResources.add(mxClient.basePath + '/resources/editor', null, () => {
mxResources.add(mxClient.basePath + '/resources/graph', null, callback);
});
}
};
export default mxResources;

141
src/js/util/mxSvgCanvas2D.js
View File

@ -10,6 +10,7 @@ import mxAbstractCanvas2D from "./mxAbstractCanvas2D";
/**
* Capability check for DOM parser and checks if base tag is used.
*/
/*
let mxSvgCanvas2useDomParser = typeof DOMParser === 'function' && typeof XMLSerializer === 'function';
@ -263,6 +264,76 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
};
/**
* Updates existing DOM nodes for text rendering.
*/
static createCss = (w, h, align, valign, wrap, overflow, clip, bg, border, flex, block, s, callback) => {
var item = 'box-sizing: border-box; font-size: 0; text-align: ' + ((align == mxConstants.ALIGN_LEFT) ? 'left' :
((align == mxConstants.ALIGN_RIGHT) ? 'right' : 'center')) + '; ';
var pt = mxUtils.getAlignmentAsPoint(align, valign);
var ofl = 'overflow: hidden; ';
var fw = 'width: 1px; ';
var fh = 'height: 1px; ';
var dx = pt.x * w;
var dy = pt.y * h;
if (clip) {
fw = 'width: ' + Math.round(w) + 'px; ';
item += 'max-height: ' + Math.round(h) + 'px; ';
dy = 0;
} else if (overflow == 'fill') {
fw = 'width: ' + Math.round(w) + 'px; ';
fh = 'height: ' + Math.round(h) + 'px; ';
block += 'width: 100%; height: 100%; ';
item += fw + fh;
} else if (overflow == 'width') {
fw = 'width: ' + Math.round(w) + 'px; ';
block += 'width: 100%; ';
item += fw;
dy = 0;
if (h > 0) {
item += 'max-height: ' + Math.round(h) + 'px; ';
}
} else {
ofl = '';
dy = 0;
}
var bgc = '';
if (bg != null) {
bgc += 'background-color: ' + bg + '; ';
}
if (border != null) {
bgc += 'border: 1px solid ' + border + '; ';
}
if (ofl == '' || clip) {
block += bgc;
} else {
item += bgc;
}
if (wrap && w > 0) {
block += 'white-space: normal; word-wrap: ' + mxConstants.WORD_WRAP + '; ';
fw = 'width: ' + Math.round(w) + 'px; ';
if (ofl != '' && overflow != 'fill') {
dy = 0;
}
} else {
block += 'white-space: nowrap; ';
if (ofl == '') {
dx = 0;
}
}
callback(dx, dy, flex + fw + fh, item + ofl, block, ofl);
};
/**
* Function: format
*
@ -1178,76 +1249,6 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}));
};
/**
* Updates existing DOM nodes for text rendering.
*/
static createCss = (w, h, align, valign, wrap, overflow, clip, bg, border, flex, block, s, callback) => {
var item = 'box-sizing: border-box; font-size: 0; text-align: ' + ((align == mxConstants.ALIGN_LEFT) ? 'left' :
((align == mxConstants.ALIGN_RIGHT) ? 'right' : 'center')) + '; ';
var pt = mxUtils.getAlignmentAsPoint(align, valign);
var ofl = 'overflow: hidden; ';
var fw = 'width: 1px; ';
var fh = 'height: 1px; ';
var dx = pt.x * w;
var dy = pt.y * h;
if (clip) {
fw = 'width: ' + Math.round(w) + 'px; ';
item += 'max-height: ' + Math.round(h) + 'px; ';
dy = 0;
} else if (overflow == 'fill') {
fw = 'width: ' + Math.round(w) + 'px; ';
fh = 'height: ' + Math.round(h) + 'px; ';
block += 'width: 100%; height: 100%; ';
item += fw + fh;
} else if (overflow == 'width') {
fw = 'width: ' + Math.round(w) + 'px; ';
block += 'width: 100%; ';
item += fw;
dy = 0;
if (h > 0) {
item += 'max-height: ' + Math.round(h) + 'px; ';
}
} else {
ofl = '';
dy = 0;
}
var bgc = '';
if (bg != null) {
bgc += 'background-color: ' + bg + '; ';
}
if (border != null) {
bgc += 'border: 1px solid ' + border + '; ';
}
if (ofl == '' || clip) {
block += bgc;
} else {
item += bgc;
}
if (wrap && w > 0) {
block += 'white-space: normal; word-wrap: ' + mxConstants.WORD_WRAP + '; ';
fw = 'width: ' + Math.round(w) + 'px; ';
if (ofl != '' && overflow != 'fill') {
dy = 0;
}
} else {
block += 'white-space: nowrap; ';
if (ofl == '') {
dx = 0;
}
}
callback(dx, dy, flex + fw + fh, item + ofl, block, ofl);
};
/**
* Function: getTextCss
*

40
src/js/util/mxUrlConverter.js
View File

@ -4,6 +4,25 @@
*/
class mxUrlConverter {
/**
* Variable: enabled
*
* Specifies if the converter is enabled. Default is true.
*/
enabled = true;
/**
* Variable: baseUrl
*
* Specifies the base URL to be used as a prefix for relative URLs.
*/
baseUrl = null;
/**
* Variable: baseDomain
*
* Specifies the base domain to be used as a prefix for absolute URLs.
*/
baseDomain = null;
/**
*
* Class: mxUrlConverter
@ -14,27 +33,6 @@ class mxUrlConverter {
// Empty constructor
};
/**
* Variable: enabled
*
* Specifies if the converter is enabled. Default is true.
*/
enabled = true;
/**
* Variable: baseUrl
*
* Specifies the base URL to be used as a prefix for relative URLs.
*/
baseUrl = null;
/**
* Variable: baseDomain
*
* Specifies the base domain to be used as a prefix for absolute URLs.
*/
baseDomain = null;
/**
* Function: updateBaseUrl
*

4
src/js/util/mxUtils.js
View File

@ -484,7 +484,7 @@ var mxUtils = {
break;
}
}
;
},
/**
@ -800,7 +800,7 @@ var mxUtils = {
}
}
}
};
}
doExtract(elems);

58
src/js/view/mxCellRenderer.js
View File

@ -20,8 +20,8 @@ import mxSwimlane from "FIXME";
import mxImageShape from "FIXME";
import mxLabel from "FIXME";
import mxText from "FIXME";
import mxUtils from "../util/mxUtils";
import mxConstants from "FIXME";
import mxUtils from "../util/mxUtils";
class mxCellRenderer {
/**
@ -32,50 +32,24 @@ class mxCellRenderer {
* use the static <mxCellRenderer.registerShape> function.
*/
static defaultShapes = {};
/**
* Function: registerShape
*
* Registers the given constructor under the specified key in this instance
* of the renderer.
*
* Example:
*
* (code)
* mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);
* (end)
*
* Parameters:
*
* key - String representing the shape name.
* shape - Constructor of the <mxShape> subclass.
*/
static registerShape = (key, shape) =>
{
mxCellRenderer.defaultShapes[key] = shape;
};
/**
* Variable: defaultEdgeShape
*
* Defines the default shape for edges. Default is <mxConnector>.
*/
defaultEdgeShape = mxConnector;
/**
* Variable: defaultVertexShape
*
* Defines the default shape for vertices. Default is <mxRectangleShape>.
*/
defaultVertexShape = mxRectangleShape;
/**
* Variable: defaultTextShape
*
* Defines the default shape for labels. Default is <mxText>.
*/
defaultTextShape = mxText;
/**
* Variable: legacyControlPosition
*
@ -83,7 +57,6 @@ class mxCellRenderer {
* orientation of a swimlane. Default is true.
*/
legacyControlPosition = true;
/**
* Variable: legacySpacing
*
@ -91,21 +64,18 @@ class mxCellRenderer {
* fill or width. Default is true for backwards compatiblity.
*/
legacySpacing = true;
/**
* Variable: antiAlias
*
* Anti-aliasing option for new shapes. Default is true.
*/
antiAlias = true;
/**
* Variable: minSvgStrokeWidth
*
* Minimum stroke width for SVG output.
*/
minSvgStrokeWidth = 1;
/**
* Variable: forceControlClickHandler
*
@ -144,7 +114,29 @@ class mxCellRenderer {
* arrow, rectangle, ellipse, rhombus, image, line, label, cylinder,
* swimlane, connector, actor and cloud.
*/
constructor() {}
constructor() {
}
/**
* Function: registerShape
*
* Registers the given constructor under the specified key in this instance
* of the renderer.
*
* Example:
*
* (code)
* mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);
* (end)
*
* Parameters:
*
* key - String representing the shape name.
* shape - Constructor of the <mxShape> subclass.
*/
static registerShape = (key, shape) => {
mxCellRenderer.defaultShapes[key] = shape;
};
/**
* Function: initializeShape
@ -892,7 +884,7 @@ class mxCellRenderer {
}
return result;
};
}
return check('fontStyle', mxConstants.STYLE_FONTSTYLE, mxConstants.DEFAULT_FONTSTYLE) ||
check('family', mxConstants.STYLE_FONTFAMILY, mxConstants.DEFAULT_FONTFAMILY) ||

2
src/js/view/mxEdgeStyle.js
View File

@ -529,7 +529,7 @@ var mxEdgeStyle = {
}
return lastPushed;
};
}
// Adds the first point
var pt = pts[0];

2
src/js/view/mxGraph.js
View File

@ -7,6 +7,7 @@ import mxImage from "../util/mxImage";
import mxEventObject from "../util/mxEventObject";
import mxEventSource from "../util/mxEventSource";
import mxEvent from "FIXME";
import mxEdgeStyle from "FIXME";
import mxRectangle from "../util/mxRectangle";
import mxPanningManager from "../util/mxPanningManager";
import mxTooltipHandler from "../util/mxTooltipHandler";
@ -25,7 +26,6 @@ import mxCellOverlay from "./mxCellOverlay";
import mxPoint from "../util/mxPoint";
import mxUtils from "../util/mxUtils";
import mxConnectionConstraint from "./mxConnectionConstraint";
import mxEdgeStyle from "FIXME";
class mxGraph extends mxEventSource {
/**

181
src/js/view/mxOutline.js
View File

@ -11,6 +11,91 @@ import mxMouseEvent from "FIXME";
import mxGraph from "./mxGraph";
class mxOutline {
/**
* Function: source
*
* Reference to the source <mxGraph>.
*/
source = null;
/**
* Function: outline
*
* Reference to the <mxGraph> that renders the outline.
*/
outline = null;
/**
* Function: graphRenderHint
*
* Renderhint to be used for the outline graph. Default is faster.
*/
graphRenderHint = mxConstants.RENDERING_HINT_FASTER;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
enabled = true;
/**
* Variable: showViewport
*
* Specifies a viewport rectangle should be shown. Default is true.
*/
showViewport = true;
/**
* Variable: border
*
* Border to be added at the bottom and right. Default is 10.
*/
border = 10;
/**
* Variable: enabled
*
* Specifies the size of the sizer handler. Default is 8.
*/
sizerSize = 8;
/**
* Variable: labelsVisible
*
* Specifies if labels should be visible in the outline. Default is false.
*/
labelsVisible = false;
/**
* Variable: updateOnPan
*
* Specifies if <update> should be called for <mxEvent.PAN> in the source
* graph. Default is false.
*/
updateOnPan = false;
/**
* Variable: sizerImage
*
* Optional <mxImage> to be used for the sizer. Default is null.
*/
sizerImage = null;
/**
* Variable: minScale
*
* Minimum scale to be used. Default is 0.0001.
*/
minScale = 0.0001;
/**
* Variable: suspended
*
* Optional boolean flag to suspend updates. Default is false. This flag will
* also suspend repaints of the outline. To toggle this switch, use the
* following code.
*
* (code)
* nav.suspended = !nav.suspended;
*
* if (!nav.suspended)
* {
* nav.update(true);
* }
* (end)
*/
suspended = false;
/**
* Class: mxOutline
*
@ -71,102 +156,6 @@ class mxOutline {
}
};
/**
* Function: source
*
* Reference to the source <mxGraph>.
*/
source = null;
/**
* Function: outline
*
* Reference to the <mxGraph> that renders the outline.
*/
outline = null;
/**
* Function: graphRenderHint
*
* Renderhint to be used for the outline graph. Default is faster.
*/
graphRenderHint = mxConstants.RENDERING_HINT_FASTER;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
enabled = true;
/**
* Variable: showViewport
*
* Specifies a viewport rectangle should be shown. Default is true.
*/
showViewport = true;
/**
* Variable: border
*
* Border to be added at the bottom and right. Default is 10.
*/
border = 10;
/**
* Variable: enabled
*
* Specifies the size of the sizer handler. Default is 8.
*/
sizerSize = 8;
/**
* Variable: labelsVisible
*
* Specifies if labels should be visible in the outline. Default is false.
*/
labelsVisible = false;
/**
* Variable: updateOnPan
*
* Specifies if <update> should be called for <mxEvent.PAN> in the source
* graph. Default is false.
*/
updateOnPan = false;
/**
* Variable: sizerImage
*
* Optional <mxImage> to be used for the sizer. Default is null.
*/
sizerImage = null;
/**
* Variable: minScale
*
* Minimum scale to be used. Default is 0.0001.
*/
minScale = 0.0001;
/**
* Variable: suspended
*
* Optional boolean flag to suspend updates. Default is false. This flag will
* also suspend repaints of the outline. To toggle this switch, use the
* following code.
*
* (code)
* nav.suspended = !nav.suspended;
*
* if (!nav.suspended)
* {
* nav.update(true);
* }
* (end)
*/
suspended = false;
/**
* Function: createGraph
*

86
src/js/view/mxStylesheet.js
View File

@ -51,13 +51,12 @@
*
* Constructs a new stylesheet and assigns default styles.
*/
function mxStylesheet()
{
function mxStylesheet() {
this.styles = {};
this.putDefaultVertexStyle(this.createDefaultVertexStyle());
this.putDefaultEdgeStyle(this.createDefaultEdgeStyle());
};
}
/**
* Function: styles
@ -73,8 +72,7 @@ FIXME;
*
* Creates and returns the default vertex style.
*/
createDefaultVertexStyle = ()=>
{
createDefaultVertexStyle = () => {
var style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
@ -93,8 +91,7 @@ createDefaultVertexStyle = ()=>
*
* Creates and returns the default edge style.
*/
createDefaultEdgeStyle = ()=>
{
createDefaultEdgeStyle = () => {
var style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
@ -116,8 +113,7 @@ createDefaultEdgeStyle = ()=>
* Parameters:
* style - Key, value pairs that define the style.
*/
putDefaultVertexStyle = (style)=>
{
putDefaultVertexStyle = (style) => {
this.putCellStyle('defaultVertex', style);
};
@ -126,8 +122,7 @@ putDefaultVertexStyle = (style)=>
*
* Sets the default style for edges using defaultEdge as the stylename.
*/
putDefaultEdgeStyle = (style)=>
{
putDefaultEdgeStyle = (style) => {
this.putCellStyle('defaultEdge', style);
};
@ -136,8 +131,7 @@ putDefaultEdgeStyle = (style)=>
*
* Returns the default style for vertices.
*/
getDefaultVertexStyle = ()=>
{
getDefaultVertexStyle = () => {
return this.styles['defaultVertex'];
};
@ -146,8 +140,7 @@ getDefaultVertexStyle = ()=>
*
* Sets the default style for edges.
*/
getDefaultEdgeStyle = ()=>
{
getDefaultEdgeStyle = () => {
return this.styles['defaultEdge'];
};
@ -188,8 +181,7 @@ getDefaultEdgeStyle = ()=>
* name - Name for the style to be stored.
* style - Key, value pairs that define the style.
*/
putCellStyle = (name, style)=>
{
putCellStyle = (name, style) => {
this.styles[name] = style;
};
@ -205,61 +197,45 @@ putCellStyle = (name, style)=>
* style.
* defaultStyle - Default style to be returned if no style can be found.
*/
getCellStyle = (name, defaultStyle)=>
{
getCellStyle = (name, defaultStyle) => {
var style = defaultStyle;
if (name != null && name.length > 0)
{
if (name != null && name.length > 0) {
var pairs = name.split(';');
if (style != null &&
name.charAt(0) != ';')
{
name.charAt(0) != ';') {
style = mxUtils.clone(style);
}
else
{
} else {
style = {};
}
// Parses each key, value pair into the existing style
for (var i = 0; i < pairs.length; i++)
{
var tmp = pairs[i];
var pos = tmp.indexOf('=');
for (var i = 0; i < pairs.length; i++) {
var tmp = pairs[i];
var pos = tmp.indexOf('=');
if (pos >= 0)
{
var key = tmp.substring(0, pos);
var value = tmp.substring(pos + 1);
if (pos >= 0) {
var key = tmp.substring(0, pos);
var value = tmp.substring(pos + 1);
if (value == mxConstants.NONE)
{
delete style[key];
}
else if (mxUtils.isNumeric(value))
{
style[key] = parseFloat(value);
}
else
{
style[key] = value;
}
}
else
{
// Merges the entries from a named style
if (value == mxConstants.NONE) {
delete style[key];
} else if (mxUtils.isNumeric(value)) {
style[key] = parseFloat(value);
} else {
style[key] = value;
}
} else {
// Merges the entries from a named style
var tmpStyle = this.styles[tmp];
if (tmpStyle != null)
{
for (var key in tmpStyle)
{
if (tmpStyle != null) {
for (var key in tmpStyle) {
style[key] = tmpStyle[key];
}
}
}
}
}
}

2
src/js/view/mxTemporaryCellStates.js
View File

@ -4,7 +4,7 @@
*/
/**
* Class: mxTemporaryCellStates
*
*
* Creates a temporary set of cell states.
*/