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

updates to js syntax

development
mcyph 2021-03-20 21:35:42 +11:00
parent fc98630dad
commit 8ed2f25c20
54 changed files with 28901 additions and 32873 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
* Copyright (c) 2006-2018, Gaudenz Alder
*/
import mxRectangle from "FIXME";
import mxRectangle from "../util/mxRectangle";
import mxDictionary from "FIXME";
class mxGraphLayout {

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

@ -3,7 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxRectangle from "FIXME";
import mxRectangle from "../util/mxRectangle";
class mxPartitionLayout extends mxGraphLayout {
/**

2
src/js/model/mxGeometry.js
View File

@ -4,7 +4,7 @@
*/
import mxPoint from "FIXME";
import mxRectangle from "FIXME";
import mxRectangle from "../util/mxRectangle";
class mxGeometry extends mxRectangle {
/**

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

@ -3,7 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxRectangle from "FIXME";
import mxRectangle from "../util/mxRectangle";
class mxDoubleEllipse extends mxShape {
/**

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

@ -3,7 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxRectangle from "FIXME";
import mxRectangle from "../util/mxRectangle";
import mxConnectionConstraint from "FIXME";
class mxStencil extends mxShape {

215
src/js/util/mxAbstractCanvas2D.js
View File

@ -2,28 +2,12 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxAbstractCanvas2D
*
* Base class for all canvases. A description of the public API is available in <mxXmlCanvas2D>.
* All color values of <mxConstants.NONE> will be converted to null in the state.
*
* Constructor: mxAbstractCanvas2D
*
* Constructs a new abstract canvas.
*/
function mxAbstractCanvas2D()
{
/**
* Variable: converter
*
* Holds the <mxUrlConverter> to convert image URLs.
*/
this.converter = this.createUrlConverter();
this.reset();
};
import mxUtils from "./mxUtils";
import mxConstants from "./mxConstants";
import mxUrlConverter from "./mxUrlConverter";
import mxPoint from "./mxPoint";
class mxAbstractCanvas2D {
/**
* Variable: state
*
@ -108,13 +92,33 @@ mxAbstractCanvas2closeOp = 'Z';
*/
mxAbstractCanvas2pointerEvents = false;
/**
* Class: mxAbstractCanvas2D
*
* Base class for all canvases. A description of the public API is available in <mxXmlCanvas2D>.
* All color values of <mxConstants.NONE> will be converted to null in the state.
*
* Constructor: mxAbstractCanvas2D
*
* Constructs a new abstract canvas.
*/
constructor() {
/**
* Variable: converter
*
* Holds the <mxUrlConverter> to convert image URLs.
*/
this.converter = this.createUrlConverter();
this.reset();
};
/**
* Function: createUrlConverter
*
* Create a new <mxUrlConverter> and returns it.
*/
mxAbstractCanvas2createUrlConverter = ()=>
{
mxAbstractCanvas2createUrlConverter = () => {
return new mxUrlConverter();
};
@ -123,8 +127,7 @@ mxAbstractCanvas2createUrlConverter = ()=>
*
* Resets the state of this canvas.
*/
mxAbstractCanvas2reset = ()=>
{
mxAbstractCanvas2reset = () => {
this.state = this.createState();
this.states = [];
};
@ -134,8 +137,7 @@ mxAbstractCanvas2reset = ()=>
*
* Creates the state of the this canvas.
*/
mxAbstractCanvas2createState = ()=>
{
mxAbstractCanvas2createState = () => {
return {
dx: 0,
dy: 0,
@ -178,8 +180,7 @@ mxAbstractCanvas2createState = ()=>
*
* Rounds all numbers to integers.
*/
mxAbstractCanvas2format = (value)=>
{
mxAbstractCanvas2format = (value) => {
return Math.round(parseFloat(value));
};
@ -188,18 +189,14 @@ mxAbstractCanvas2format = (value)=>
*
* Adds the given operation to the path.
*/
mxAbstractCanvas2addOp = ()=>
{
if (this.path != null)
{
mxAbstractCanvas2addOp = () => {
if (this.path != null) {
this.path.push(arguments[0]);
if (arguments.length > 2)
{
if (arguments.length > 2) {
var s = this.state;
for (var i = 2; i < arguments.length; i += 2)
{
for (var i = 2; i < arguments.length; i += 2) {
this.lastX = arguments[i - 1];
this.lastY = arguments[i];
@ -215,8 +212,7 @@ mxAbstractCanvas2addOp = ()=>
*
* Rotates the given point and returns the result as an <mxPoint>.
*/
mxAbstractCanvas2rotatePoint = (x, y, theta, cx, cy)=>
{
mxAbstractCanvas2rotatePoint = (x, y, theta, cx, cy) => {
var rad = theta * (Math.PI / 180);
return mxUtils.getRotatedPoint(new mxPoint(x, y), Math.cos(rad),
@ -228,8 +224,7 @@ mxAbstractCanvas2rotatePoint = (x, y, theta, cx, cy)=>
*
* Saves the current state.
*/
mxAbstractCanvas2save = ()=>
{
mxAbstractCanvas2save = () => {
this.states.push(this.state);
this.state = mxUtils.clone(this.state);
};
@ -239,10 +234,8 @@ mxAbstractCanvas2save = ()=>
*
* Restores the current state.
*/
mxAbstractCanvas2restore = ()=>
{
if (this.states.length > 0)
{
mxAbstractCanvas2restore = () => {
if (this.states.length > 0) {
this.state = this.states.pop();
}
};
@ -252,8 +245,7 @@ mxAbstractCanvas2restore = ()=>
*
* Sets the current link. Hook for subclassers.
*/
mxAbstractCanvas2setLink = (link)=>
{
mxAbstractCanvas2setLink = (link) => {
// nop
};
@ -262,8 +254,7 @@ mxAbstractCanvas2setLink = (link)=>
*
* Scales the current state.
*/
mxAbstractCanvas2scale = (value)=>
{
mxAbstractCanvas2scale = (value) => {
this.state.scale *= value;
this.state.strokeWidth *= value;
};
@ -273,8 +264,7 @@ mxAbstractCanvas2scale = (value)=>
*
* Translates the current state.
*/
mxAbstractCanvas2translate = (dx, dy)=>
{
mxAbstractCanvas2translate = (dx, dy) => {
this.state.dx += dx;
this.state.dy += dy;
};
@ -284,8 +274,7 @@ mxAbstractCanvas2translate = (dx, dy)=>
*
* Rotates the current state.
*/
mxAbstractCanvas2rotate = (theta, flipH, flipV, cx, cy)=>
{
mxAbstractCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
// nop
};
@ -294,8 +283,7 @@ mxAbstractCanvas2rotate = (theta, flipH, flipV, cx, cy)=>
*
* Sets the current alpha.
*/
mxAbstractCanvas2setAlpha = (value)=>
{
mxAbstractCanvas2setAlpha = (value) => {
this.state.alpha = value;
};
@ -304,8 +292,7 @@ mxAbstractCanvas2setAlpha = (value)=>
*
* Sets the current solid fill alpha.
*/
mxAbstractCanvas2setFillAlpha = (value)=>
{
mxAbstractCanvas2setFillAlpha = (value) => {
this.state.fillAlpha = value;
};
@ -314,8 +301,7 @@ mxAbstractCanvas2setFillAlpha = (value)=>
*
* Sets the current stroke alpha.
*/
mxAbstractCanvas2setStrokeAlpha = (value)=>
{
mxAbstractCanvas2setStrokeAlpha = (value) => {
this.state.strokeAlpha = value;
};
@ -324,10 +310,8 @@ mxAbstractCanvas2setStrokeAlpha = (value)=>
*
* Sets the current fill color.
*/
mxAbstractCanvas2setFillColor = (value)=>
{
if (value == mxConstants.NONE)
{
mxAbstractCanvas2setFillColor = (value) => {
if (value == mxConstants.NONE) {
value = null;
}
@ -340,8 +324,7 @@ mxAbstractCanvas2setFillColor = (value)=>
*
* Sets the current gradient.
*/
mxAbstractCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2)=>
{
mxAbstractCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
var s = this.state;
s.fillColor = color1;
s.gradientFillAlpha = (alpha1 != null) ? alpha1 : 1;
@ -355,10 +338,8 @@ mxAbstractCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, a
*
* Sets the current stroke color.
*/
mxAbstractCanvas2setStrokeColor = (value)=>
{
if (value == mxConstants.NONE)
{
mxAbstractCanvas2setStrokeColor = (value) => {
if (value == mxConstants.NONE) {
value = null;
}
@ -370,8 +351,7 @@ mxAbstractCanvas2setStrokeColor = (value)=>
*
* Sets the current stroke width.
*/
mxAbstractCanvas2setStrokeWidth = (value)=>
{
mxAbstractCanvas2setStrokeWidth = (value) => {
this.state.strokeWidth = value;
};
@ -380,8 +360,7 @@ mxAbstractCanvas2setStrokeWidth = (value)=>
*
* Enables or disables dashed lines.
*/
mxAbstractCanvas2setDashed = (value, fixDash)=>
{
mxAbstractCanvas2setDashed = (value, fixDash) => {
this.state.dashed = value;
this.state.fixDash = fixDash;
};
@ -391,8 +370,7 @@ mxAbstractCanvas2setDashed = (value, fixDash)=>
*
* Sets the current dash pattern.
*/
mxAbstractCanvas2setDashPattern = (value)=>
{
mxAbstractCanvas2setDashPattern = (value) => {
this.state.dashPattern = value;
};
@ -401,8 +379,7 @@ mxAbstractCanvas2setDashPattern = (value)=>
*
* Sets the current line cap.
*/
mxAbstractCanvas2setLineCap = (value)=>
{
mxAbstractCanvas2setLineCap = (value) => {
this.state.lineCap = value;
};
@ -411,8 +388,7 @@ mxAbstractCanvas2setLineCap = (value)=>
*
* Sets the current line join.
*/
mxAbstractCanvas2setLineJoin = (value)=>
{
mxAbstractCanvas2setLineJoin = (value) => {
this.state.lineJoin = value;
};
@ -421,8 +397,7 @@ mxAbstractCanvas2setLineJoin = (value)=>
*
* Sets the current miter limit.
*/
mxAbstractCanvas2setMiterLimit = (value)=>
{
mxAbstractCanvas2setMiterLimit = (value) => {
this.state.miterLimit = value;
};
@ -431,10 +406,8 @@ mxAbstractCanvas2setMiterLimit = (value)=>
*
* Sets the current font color.
*/
mxAbstractCanvas2setFontColor = (value)=>
{
if (value == mxConstants.NONE)
{
mxAbstractCanvas2setFontColor = (value) => {
if (value == mxConstants.NONE) {
value = null;
}
@ -446,10 +419,8 @@ mxAbstractCanvas2setFontColor = (value)=>
*
* Sets the current font background color.
*/
mxAbstractCanvas2setFontBackgroundColor = (value)=>
{
if (value == mxConstants.NONE)
{
mxAbstractCanvas2setFontBackgroundColor = (value) => {
if (value == mxConstants.NONE) {
value = null;
}
@ -461,10 +432,8 @@ mxAbstractCanvas2setFontBackgroundColor = (value)=>
*
* Sets the current font border color.
*/
mxAbstractCanvas2setFontBorderColor = (value)=>
{
if (value == mxConstants.NONE)
{
mxAbstractCanvas2setFontBorderColor = (value) => {
if (value == mxConstants.NONE) {
value = null;
}
@ -476,8 +445,7 @@ mxAbstractCanvas2setFontBorderColor = (value)=>
*
* Sets the current font size.
*/
mxAbstractCanvas2setFontSize = (value)=>
{
mxAbstractCanvas2setFontSize = (value) => {
this.state.fontSize = parseFloat(value);
};
@ -486,8 +454,7 @@ mxAbstractCanvas2setFontSize = (value)=>
*
* Sets the current font family.
*/
mxAbstractCanvas2setFontFamily = (value)=>
{
mxAbstractCanvas2setFontFamily = (value) => {
this.state.fontFamily = value;
};
@ -496,10 +463,8 @@ mxAbstractCanvas2setFontFamily = (value)=>
*
* Sets the current font style.
*/
mxAbstractCanvas2setFontStyle = (value)=>
{
if (value == null)
{
mxAbstractCanvas2setFontStyle = (value) => {
if (value == null) {
value = 0;
}
@ -511,8 +476,7 @@ mxAbstractCanvas2setFontStyle = (value)=>
*
* Enables or disables and configures the current shadow.
*/
mxAbstractCanvas2setShadow = (enabled)=>
{
mxAbstractCanvas2setShadow = (enabled) => {
this.state.shadow = enabled;
};
@ -521,10 +485,8 @@ mxAbstractCanvas2setShadow = (enabled)=>
*
* Enables or disables and configures the current shadow.
*/
mxAbstractCanvas2setShadowColor = (value)=>
{
if (value == mxConstants.NONE)
{
mxAbstractCanvas2setShadowColor = (value) => {
if (value == mxConstants.NONE) {
value = null;
}
@ -536,8 +498,7 @@ mxAbstractCanvas2setShadowColor = (value)=>
*
* Enables or disables and configures the current shadow.
*/
mxAbstractCanvas2setShadowAlpha = (value)=>
{
mxAbstractCanvas2setShadowAlpha = (value) => {
this.state.shadowAlpha = value;
};
@ -546,8 +507,7 @@ mxAbstractCanvas2setShadowAlpha = (value)=>
*
* Enables or disables and configures the current shadow.
*/
mxAbstractCanvas2setShadowOffset = (dx, dy)=>
{
mxAbstractCanvas2setShadowOffset = (dx, dy) => {
this.state.shadowDx = dx;
this.state.shadowDy = dy;
};
@ -557,8 +517,7 @@ mxAbstractCanvas2setShadowOffset = (dx, dy)=>
*
* Starts a new path.
*/
mxAbstractCanvas2begin = ()=>
{
mxAbstractCanvas2begin = () => {
this.lastX = 0;
this.lastY = 0;
this.path = [];
@ -569,8 +528,7 @@ mxAbstractCanvas2begin = ()=>
*
* Moves the current path the given coordinates.
*/
mxAbstractCanvas2moveTo = (x, y)=>
{
mxAbstractCanvas2moveTo = (x, y) => {
this.addOp(this.moveOp, x, y);
};
@ -579,8 +537,7 @@ mxAbstractCanvas2moveTo = (x, y)=>
*
* Draws a line to the given coordinates. Uses moveTo with the op argument.
*/
mxAbstractCanvas2lineTo = (x, y)=>
{
mxAbstractCanvas2lineTo = (x, y) => {
this.addOp(this.lineOp, x, y);
};
@ -589,8 +546,7 @@ mxAbstractCanvas2lineTo = (x, y)=>
*
* Adds a quadratic curve to the current path.
*/
mxAbstractCanvas2quadTo = (x1, y1, x2, y2)=>
{
mxAbstractCanvas2quadTo = (x1, y1, x2, y2) => {
this.addOp(this.quadOp, x1, y1, x2, y2);
};
@ -599,8 +555,7 @@ mxAbstractCanvas2quadTo = (x1, y1, x2, y2)=>
*
* Adds a bezier curve to the current path.
*/
mxAbstractCanvas2curveTo = (x1, y1, x2, y2, x3, y3)=>
{
mxAbstractCanvas2curveTo = (x1, y1, x2, y2, x3, y3) => {
this.addOp(this.curveOp, x1, y1, x2, y2, x3, y3);
};
@ -610,14 +565,11 @@ mxAbstractCanvas2curveTo = (x1, y1, x2, y2, x3, y3)=>
* Adds the given arc to the current path. This is a synthetic operation that
* is broken down into curves.
*/
mxAbstractCanvas2arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y)=>
{
mxAbstractCanvas2arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y) => {
var curves = mxUtils.arcToCurves(this.lastX, this.lastY, rx, ry, angle, largeArcFlag, sweepFlag, x, y);
if (curves != null)
{
for (var i = 0; i < curves.length; i += 6)
{
if (curves != null) {
for (var i = 0; i < curves.length; i += 6) {
this.curveTo(curves[i], curves[i + 1], curves[i + 2],
curves[i + 3], curves[i + 4], curves[i + 5]);
}
@ -629,8 +581,7 @@ mxAbstractCanvas2arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y)=>
*
* Closes the current path.
*/
mxAbstractCanvas2close = (x1, y1, x2, y2, x3, y3)=>
{
mxAbstractCanvas2close = (x1, y1, x2, y2, x3, y3) => {
this.addOp(this.closeOp);
};
@ -639,4 +590,8 @@ mxAbstractCanvas2close = (x1, y1, x2, y2, x3, y3)=>
*
* Empty implementation for backwards compatibility. This will be removed.
*/
mxAbstractCanvas2end = ()=> { };
mxAbstractCanvas2end = () => {
};
}
export default mxAbstractCanvas2D;

67
src/js/util/mxAnimation.js
View File

@ -2,31 +2,11 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
*
* Class: mxAnimation
*
* Implements a basic animation in JavaScript.
*
* Constructor: mxAnimation
*
* Constructs an animation.
*
* Parameters:
*
* graph - Reference to the enclosing <mxGraph>.
*/
function mxAnimation(delay)
{
this.delay = (delay != null) ? delay : 20;
};
/**
* Extends mxEventSource.
*/
mxAnimation.prototype = new mxEventSource();
constructor = mxAnimation;
import mxUtils from "./mxUtils";
import mxEventSource from "./mxEventSource";
import mxEventObject from "./mxEventObject";
class mxAnimation extends mxEventSource {
/**
* Variable: delay
*
@ -41,13 +21,30 @@ delay = null;
*/
thread = null;
/**
*
* Class: mxAnimation
*
* Implements a basic animation in JavaScript.
*
* Constructor: mxAnimation
*
* Constructs an animation.
*
* Parameters:
*
* graph - Reference to the enclosing <mxGraph>.
*/
constructor(delay) {
this.delay = (delay != null) ? delay : 20;
};
/**
* Function: isRunning
*
* Returns true if the animation is running.
*/
isRunning = ()=>
{
isRunning = () => {
return this.thread != null;
};
@ -56,10 +53,8 @@ isRunning = ()=>
*
* Starts the animation by repeatedly invoking updateAnimation.
*/
startAnimation = ()=>
{
if (this.thread == null)
{
startAnimation = () => {
if (this.thread == null) {
this.thread = window.setInterval(mxUtils.bind(this, this.updateAnimation), this.delay);
}
};
@ -71,8 +66,7 @@ startAnimation = ()=>
* when finished, startAnimation to resume. This is called whenever the
* timer fires and fires an mxEvent.EXECUTE event with no properties.
*/
updateAnimation = ()=>
{
updateAnimation = () => {
this.fireEvent(new mxEventObject(mxEvent.EXECUTE));
};
@ -81,12 +75,13 @@ updateAnimation = ()=>
*
* Stops the animation by deleting the timer and fires an <mxEvent.DONE>.
*/
stopAnimation = ()=>
{
if (this.thread != null)
{
stopAnimation = () => {
if (this.thread != null) {
window.clearInterval(this.thread);
this.thread = null;
this.fireEvent(new mxEventObject(mxEvent.DONE));
}
};
}
export default mxAnimation;

120
src/js/util/mxAutoSaveManager.js
View File

@ -2,51 +2,10 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxAutoSaveManager
*
* Manager for automatically saving diagrams. The <save> hook must be
* implemented.
*
* Example:
*
* (code)
* var mgr = new mxAutoSaveManager(editor.graph);
* mgr.save = ()=>
* {
* mxLog.show();
* mxLog.debug('save');
* };
* (end)
*
* Constructor: mxAutoSaveManager
*
* Constructs a new automatic layout for the given graph.
*
* Arguments:
*
* graph - Reference to the enclosing graph.
*/
function mxAutoSaveManager(graph)
{
// Notifies the manager of a change
this.changeHandler = mxUtils.bind(this, (sender, evt)=>
{
if (this.isEnabled())
{
this.graphModelChanged(evt.getProperty('edit').changes);
}
});
this.setGraph(graph);
};
/**
* Extends mxEventSource.
*/
mxAutoSaveManager.prototype = new mxEventSource();
constructor = mxAutoSaveManager;
import mxEventSource from "./mxEventSource";
import mxUtils from "./mxUtils";
class mxAutoSaveManager extends mxEventSource {
/**
* Variable: graph
*
@ -111,14 +70,49 @@ enabled = true;
*/
changeHandler = null;
/**
* Class: mxAutoSaveManager
*
* Manager for automatically saving diagrams. The <save> hook must be
* implemented.
*
* Example:
*
* (code)
* var mgr = new mxAutoSaveManager(editor.graph);
* mgr.save = ()=>
* {
* mxLog.show();
* mxLog.debug('save');
* };
* (end)
*
* Constructor: mxAutoSaveManager
*
* Constructs a new automatic layout for the given graph.
*
* Arguments:
*
* graph - Reference to the enclosing graph.
*/
constructor(graph) {
// Notifies the manager of a change
this.changeHandler = mxUtils.bind(this, (sender, evt) => {
if (this.isEnabled()) {
this.graphModelChanged(evt.getProperty('edit').changes);
}
});
this.setGraph(graph);
};
/**
* Function: isEnabled
*
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = ()=>
{
isEnabled = () => {
return this.enabled;
};
@ -132,8 +126,7 @@ isEnabled = ()=>
*
* enabled - Boolean that specifies the new enabled state.
*/
setEnabled = (value)=>
{
setEnabled = (value) => {
this.enabled = value;
};
@ -142,17 +135,14 @@ setEnabled = (value)=>
*
* Sets the graph that the layouts operate on.
*/
setGraph = (graph)=>
{
if (this.graph != null)
{
setGraph = (graph) => {
if (this.graph != null) {
this.graph.getModel().removeListener(this.changeHandler);
}
this.graph = graph;
if (this.graph != null)
{
if (this.graph != null) {
this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler);
}
};
@ -162,8 +152,7 @@ setGraph = (graph)=>
*
* Empty hook that is called if the graph should be saved.
*/
save = ()=>
{
save = () => {
// empty
};
@ -172,20 +161,16 @@ save = ()=>
*
* Invoked when the graph model has changed.
*/
graphModelChanged = (changes)=>
{
graphModelChanged = (changes) => {
var now = new Date().getTime();
var dt = (now - this.lastSnapshot) / 1000;
if (dt > this.autoSaveDelay ||
(this.ignoredChanges >= this.autoSaveThreshold &&
dt > this.autoSaveThrottle))
{
dt > this.autoSaveThrottle)) {
this.save();
this.reset();
}
else
{
} else {
// Increments the number of ignored changes
this.ignoredChanges++;
}
@ -196,8 +181,7 @@ graphModelChanged = (changes)=>
*
* Resets all counters.
*/
reset = ()=>
{
reset = () => {
this.lastSnapshot = new Date().getTime();
this.ignoredChanges = 0;
};
@ -207,7 +191,9 @@ reset = ()=>
*
* Removes all handlers from the <graph> and deletes the reference to it.
*/
destroy = ()=>
{
destroy = () => {
this.setGraph(null);
};
}
export default mxAutoSaveManager;

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

@ -2,8 +2,7 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
var mxClipboard =
{
var mxClipboard = {
/**
* Class: mxClipboard
*
@ -217,5 +216,6 @@ var mxClipboard =
return cells;
}
};
export default mxClipboard;

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

@ -2,8 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
var mxConstants =
{
var mxConstants = {
/**
* Class: mxConstants
*
@ -2336,3 +2336,5 @@
*/
PERIMETER_TRIANGLE: 'trianglePerimeter'
};
export default mxConstants;

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

@ -12,8 +12,9 @@
*
* Constructs a new dictionary which allows object to be used as keys.
*/
function mxDictionary()
{
class mxDictionary {
constructor() {
this.clear();
};
@ -29,8 +30,7 @@ map = null;
*
* Clears the dictionary.
*/
clear = ()=>
{
clear = () => {
this.map = {};
};
@ -39,8 +39,7 @@ clear = ()=>
*
* Returns the value for the given key.
*/
get = (key)=>
{
get = (key) => {
var id = mxObjectIdentity.get(key);
return this.map[id];
@ -52,8 +51,7 @@ get = (key)=>
* Stores the value under the given key and returns the previous
* value for that key.
*/
put = (key, value)=>
{
put = (key, value) => {
var id = mxObjectIdentity.get(key);
var previous = this.map[id];
this.map[id] = value;
@ -67,8 +65,7 @@ put = (key, value)=>
* Removes the value for the given key and returns the value that
* has been removed.
*/
remove = (key)=>
{
remove = (key) => {
var id = mxObjectIdentity.get(key);
var previous = this.map[id];
delete this.map[id];
@ -81,12 +78,10 @@ remove = (key)=>
*
* Returns all keys as an array.
*/
getKeys = ()=>
{
getKeys = () => {
var result = [];
for (var key in this.map)
{
for (var key in this.map) {
result.push(key);
}
@ -98,12 +93,10 @@ getKeys = ()=>
*
* Returns all values as an array.
*/
getValues = ()=>
{
getValues = () => {
var result = [];
for (var key in this.map)
{
for (var key in this.map) {
result.push(this.map[key]);
}
@ -121,10 +114,11 @@ getValues = ()=>
*
* visitor - A function that takes the key and value as arguments.
*/
visit = (visitor)=>
{
for (var key in this.map)
{
visit = (visitor) => {
for (var key in this.map) {
visitor(key, this.map[key]);
}
};
}
export default mxDictionary;

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

@ -37,29 +37,24 @@
* container - Optional Container that contains the div. Default is the
* window.
*/
function mxDivResizer(div, container)
{
if (div.nodeName.toLowerCase() == 'div')
{
if (container == null)
{
class mxDivResizer {
constructor(div, container) {
if (div.nodeName.toLowerCase() == 'div') {
if (container == null) {
container = window;
}
this.div = div;
var style = mxUtils.getCurrentStyle(div);
if (style != null)
{
if (style != null) {
this.resizeWidth = style.width == 'auto';
this.resizeHeight = style.height == 'auto';
}
mxEvent.addListener(container, 'resize',
mxUtils.bind(this, (evt)=>
{
if (!this.handlingResize)
{
mxUtils.bind(this, (evt) => {
if (!this.handlingResize) {
this.handlingResize = true;
this.resize();
this.handlingResize = false;
@ -97,8 +92,7 @@ handlingResize = false;
*
* Updates the style of the DIV after the window has been resized.
*/
resize = ()=>
{
resize = () => {
var w = this.getDocumentWidth();
var h = this.getDocumentHeight();
@ -112,8 +106,7 @@ resize = ()=>
!isNaN(r) &&
l >= 0 &&
r >= 0 &&
w - r - l > 0)
{
w - r - l > 0) {
this.div.style.width = (w - r - l) + 'px';
}
@ -122,8 +115,7 @@ resize = ()=>
!isNaN(b) &&
t >= 0 &&
b >= 0 &&
h - t - b > 0)
{
h - t - b > 0) {
this.div.style.height = (h - t - b) + 'px';
}
};
@ -134,8 +126,7 @@ resize = ()=>
* Hook for subclassers to return the width of the document (without
* scrollbars).
*/
getDocumentWidth = ()=>
{
getDocumentWidth = () => {
return document.body.clientWidth;
};
@ -145,7 +136,9 @@ getDocumentWidth = ()=>
* Hook for subclassers to return the height of the document (without
* scrollbars).
*/
getDocumentHeight = ()=>
{
getDocumentHeight = () => {
return document.body.clientHeight;
};
}
export default mxDivResizer;

270
src/js/util/mxDragSource.js
View File

@ -2,48 +2,11 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxDragSource
*
* Wrapper to create a drag source from a DOM element so that the element can
* be dragged over a graph and dropped into the graph as a new cell.
*
* Problem is that in the dropHandler the current preview location is not
* available, so the preview and the dropHandler must match.
*
* Constructor: mxDragSource
*
* Constructs a new drag source for the given element.
*/
function mxDragSource(element, dropHandler)
{
this.element = element;
this.dropHandler = dropHandler;
// Handles a drag gesture on the element
mxEvent.addGestureListeners(element, mxUtils.bind(this, (evt)=>
{
this.mouseDown(evt);
}));
// Prevents native drag and drop
mxEvent.addListener(element, 'dragstart', (evt)=>
{
mxEvent.consume(evt);
});
this.eventConsumer = (sender, evt)=>
{
var evtName = evt.getProperty('eventName');
var me = evt.getProperty('event');
if (evtName != mxEvent.MOUSE_DOWN)
{
me.consume();
}
};
};
import mxRectangle from "./mxRectangle";
import mxCellHighlight from "../handler/mxCellHighlight";
import mxUtils from "./mxUtils";
class mxDragSource {
/**
* Variable: element
*
@ -180,13 +143,49 @@ dragElementOpacity = 70;
*/
checkEventSource = true;
/**
* Class: mxDragSource
*
* Wrapper to create a drag source from a DOM element so that the element can
* be dragged over a graph and dropped into the graph as a new cell.
*
* Problem is that in the dropHandler the current preview location is not
* available, so the preview and the dropHandler must match.
*
* Constructor: mxDragSource
*
* Constructs a new drag source for the given element.
*/
constructor(element, dropHandler) {
this.element = element;
this.dropHandler = dropHandler;
// Handles a drag gesture on the element
mxEvent.addGestureListeners(element, mxUtils.bind(this, (evt) => {
this.mouseDown(evt);
}));
// Prevents native drag and drop
mxEvent.addListener(element, 'dragstart', (evt) => {
mxEvent.consume(evt);
});
this.eventConsumer = (sender, evt) => {
var evtName = evt.getProperty('eventName');
var me = evt.getProperty('event');
if (evtName != mxEvent.MOUSE_DOWN) {
me.consume();
}
};
};
/**
* Function: isEnabled
*
* Returns <enabled>.
*/
isEnabled = ()=>
{
isEnabled = () => {
return this.enabled;
};
@ -195,8 +194,7 @@ isEnabled = ()=>
*
* Sets <enabled>.
*/
setEnabled = (value)=>
{
setEnabled = (value) => {
this.enabled = value;
};
@ -205,8 +203,7 @@ setEnabled = (value)=>
*
* Returns <guidesEnabled>.
*/
isGuidesEnabled = ()=>
{
isGuidesEnabled = () => {
return this.guidesEnabled;
};
@ -215,8 +212,7 @@ isGuidesEnabled = ()=>
*
* Sets <guidesEnabled>.
*/
setGuidesEnabled = (value)=>
{
setGuidesEnabled = (value) => {
this.guidesEnabled = value;
};
@ -225,8 +221,7 @@ setGuidesEnabled = (value)=>
*
* Returns <gridEnabled>.
*/
isGridEnabled = ()=>
{
isGridEnabled = () => {
return this.gridEnabled;
};
@ -235,8 +230,7 @@ isGridEnabled = ()=>
*
* Sets <gridEnabled>.
*/
setGridEnabled = (value)=>
{
setGridEnabled = (value) => {
this.gridEnabled = value;
};
@ -246,8 +240,7 @@ setGridEnabled = (value)=>
* Returns the graph for the given mouse event. This implementation returns
* null.
*/
getGraphForEvent = (evt)=>
{
getGraphForEvent = (evt) => {
return null;
};
@ -257,8 +250,7 @@ getGraphForEvent = (evt)=>
* Returns the drop target for the given graph and coordinates. This
* implementation uses <mxGraph.getCellAt>.
*/
getDropTarget = (graph, x, y, evt)=>
{
getDropTarget = (graph, x, y, evt) => {
return graph.getCellAt(x, y);
};
@ -268,8 +260,7 @@ getDropTarget = (graph, x, y, evt)=>
* Creates and returns a clone of the <dragElementPrototype> or the <element>
* if the former is not defined.
*/
createDragElement = (evt)=>
{
createDragElement = (evt) => {
return this.element.cloneNode(true);
};
@ -279,8 +270,7 @@ createDragElement = (evt)=>
* Creates and returns an element which can be used as a preview in the given
* graph.
*/
createPreviewElement = (graph)=>
{
createPreviewElement = (graph) => {
return null;
};
@ -289,8 +279,7 @@ createPreviewElement = (graph)=>
*
* Returns true if this drag source is active.
*/
isActive = ()=>
{
isActive = () => {
return this.mouseMoveHandler != null;
};
@ -299,10 +288,8 @@ isActive = ()=>
*
* Stops and removes everything and restores the state of the object.
*/
reset = ()=>
{
if (this.currentGraph != null)
{
reset = () => {
if (this.currentGraph != null) {
this.dragExit(this.currentGraph);
this.currentGraph = null;
}
@ -333,17 +320,14 @@ reset = ()=>
* };
* (end)
*/
mouseDown = (evt)=>
{
if (this.enabled && !mxEvent.isConsumed(evt) && this.mouseMoveHandler == null)
{
mouseDown = (evt) => {
if (this.enabled && !mxEvent.isConsumed(evt) && this.mouseMoveHandler == null) {
this.startDrag(evt);
this.mouseMoveHandler = mxUtils.bind(this, this.mouseMove);
this.mouseUpHandler = mxUtils.bind(this, this.mouseUp);
mxEvent.addGestureListeners(document, null, this.mouseMoveHandler, this.mouseUpHandler);
if (mxClient.IS_TOUCH && !mxEvent.isMouseEvent(evt))
{
if (mxClient.IS_TOUCH && !mxEvent.isMouseEvent(evt)) {
this.eventSource = mxEvent.getSource(evt);
mxEvent.addGestureListeners(this.eventSource, null, this.mouseMoveHandler, this.mouseUpHandler);
}
@ -355,15 +339,13 @@ mouseDown = (evt)=>
*
* Creates the <dragElement> using <createDragElement>.
*/
startDrag = (evt)=>
{
startDrag = (evt) => {
this.dragElement = this.createDragElement(evt);
this.dragElement.style.position = 'absolute';
this.dragElement.style.zIndex = this.dragElementZIndex;
mxUtils.setOpacity(this.dragElement, this.dragElementOpacity);
if (this.checkEventSource && mxClient.IS_SVG)
{
if (this.checkEventSource && mxClient.IS_SVG) {
this.dragElement.style.pointerEvents = 'none';
}
};
@ -373,8 +355,7 @@ startDrag = (evt)=>
*
* Invokes <removeDragElement>.
*/
stopDrag = ()=>
{
stopDrag = () => {
// LATER: This used to have a mouse event. If that is still needed we need to add another
// final call to the DnD protocol to add a cleanup step in the case of escape press, which
// is not associated with a mouse event and which currently calles this method.
@ -386,12 +367,9 @@ stopDrag = ()=>
*
* Removes and destroys the <dragElement>.
*/
removeDragElement = ()=>
{
if (this.dragElement != null)
{
if (this.dragElement.parentNode != null)
{
removeDragElement = () => {
if (this.dragElement != null) {
if (this.dragElement.parentNode != null) {
this.dragElement.parentNode.removeChild(this.dragElement);
}
@ -404,8 +382,7 @@ removeDragElement = ()=>
*
* Returns the topmost element under the given event.
*/
getElementForEvent = (evt)=>
{
getElementForEvent = (evt) => {
return ((mxEvent.isTouchEvent(evt) || mxEvent.isPenEvent(evt)) ?
document.elementFromPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt)) :
mxEvent.getSource(evt));
@ -416,18 +393,15 @@ getElementForEvent = (evt)=>
*
* Returns true if the given graph contains the given event.
*/
graphContainsEvent = (graph, evt)=>
{
graphContainsEvent = (graph, evt) => {
var x = mxEvent.getClientX(evt);
var y = mxEvent.getClientY(evt);
var offset = mxUtils.getOffset(graph.container);
var origin = mxUtils.getScrollOrigin();
var elt = this.getElementForEvent(evt);
if (this.checkEventSource)
{
while (elt != null && elt != graph.container)
{
if (this.checkEventSource) {
while (elt != null && elt != graph.container) {
elt = elt.parentNode;
}
}
@ -445,50 +419,41 @@ graphContainsEvent = (graph, evt)=>
* <currentGraph>, calling <dragEnter> and <dragExit> on the new and old graph,
* respectively, and invokes <dragOver> if <currentGraph> is not null.
*/
mouseMove = (evt)=>
{
mouseMove = (evt) => {
var graph = this.getGraphForEvent(evt);
// Checks if event is inside the bounds of the graph container
if (graph != null && !this.graphContainsEvent(graph, evt))
{
if (graph != null && !this.graphContainsEvent(graph, evt)) {
graph = null;
}
if (graph != this.currentGraph)
{
if (this.currentGraph != null)
{
if (graph != this.currentGraph) {
if (this.currentGraph != null) {
this.dragExit(this.currentGraph, evt);
}
this.currentGraph = graph;
if (this.currentGraph != null)
{
if (this.currentGraph != null) {
this.dragEnter(this.currentGraph, evt);
}
}
if (this.currentGraph != null)
{
if (this.currentGraph != null) {
this.dragOver(this.currentGraph, evt);
}
if (this.dragElement != null && (this.previewElement == null || this.previewElement.style.visibility != 'visible'))
{
if (this.dragElement != null && (this.previewElement == null || this.previewElement.style.visibility != 'visible')) {
var x = mxEvent.getClientX(evt);
var y = mxEvent.getClientY(evt);
if (this.dragElement.parentNode == null)
{
if (this.dragElement.parentNode == null) {
document.body.appendChild(this.dragElement);
}
this.dragElement.style.visibility = 'visible';
if (this.dragOffset != null)
{
if (this.dragOffset != null) {
x += this.dragOffset.x;
y += this.dragOffset.y;
}
@ -497,9 +462,7 @@ mouseMove = (evt)=>
this.dragElement.style.left = (x + offset.x) + 'px';
this.dragElement.style.top = (y + offset.y) + 'px';
}
else if (this.dragElement != null)
{
} else if (this.dragElement != null) {
this.dragElement.style.visibility = 'hidden';
}
@ -512,13 +475,10 @@ mouseMove = (evt)=>
* Processes the mouse up event and invokes <drop>, <dragExit> and <stopDrag>
* as required.
*/
mouseUp = (evt)=>
{
if (this.currentGraph != null)
{
mouseUp = (evt) => {
if (this.currentGraph != null) {
if (this.currentPoint != null && (this.previewElement == null ||
this.previewElement.style.visibility != 'hidden'))
{
this.previewElement.style.visibility != 'hidden')) {
var scale = this.currentGraph.view.scale;
var tr = this.currentGraph.view.translate;
var x = this.currentPoint.x / scale - tr.x;
@ -542,10 +502,8 @@ mouseUp = (evt)=>
*
* Actives the given graph as a drop target.
*/
removeListeners = ()=>
{
if (this.eventSource != null)
{
removeListeners = () => {
if (this.eventSource != null) {
mxEvent.removeGestureListeners(this.eventSource, null, this.mouseMoveHandler, this.mouseUpHandler);
this.eventSource = null;
}
@ -560,25 +518,21 @@ removeListeners = ()=>
*
* Actives the given graph as a drop target.
*/
dragEnter = (graph, evt)=>
{
dragEnter = (graph, evt) => {
graph.isMouseDown = true;
graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
this.previewElement = this.createPreviewElement(graph);
if (this.previewElement != null && this.checkEventSource && mxClient.IS_SVG)
{
if (this.previewElement != null && this.checkEventSource && mxClient.IS_SVG) {
this.previewElement.style.pointerEvents = 'none';
}
// Guide is only needed if preview element is used
if (this.isGuidesEnabled() && this.previewElement != null)
{
if (this.isGuidesEnabled() && this.previewElement != null) {
this.currentGuide = new mxGuide(graph, graph.graphHandler.getGuideStates());
}
if (this.highlightDropTargets)
{
if (this.highlightDropTargets) {
this.currentHighlight = new mxCellHighlight(graph, mxConstants.DROP_TARGET_COLOR);
}
@ -591,8 +545,7 @@ dragEnter = (graph, evt)=>
*
* Deactivates the given graph as a drop target.
*/
dragExit = (graph, evt)=>
{
dragExit = (graph, evt) => {
this.currentDropTarget = null;
this.currentPoint = null;
graph.isMouseDown = false;
@ -600,24 +553,20 @@ dragExit = (graph, evt)=>
// Consumes all events in the current graph before they are fired
graph.removeListener(this.eventConsumer);
if (this.previewElement != null)
{
if (this.previewElement.parentNode != null)
{
if (this.previewElement != null) {
if (this.previewElement.parentNode != null) {
this.previewElement.parentNode.removeChild(this.previewElement);
}
this.previewElement = null;
}
if (this.currentGuide != null)
{
if (this.currentGuide != null) {
this.currentGuide.destroy();
this.currentGuide = null;
}
if (this.currentHighlight != null)
{
if (this.currentHighlight != null) {
this.currentHighlight.destroy();
this.currentHighlight = null;
}
@ -629,31 +578,26 @@ dragExit = (graph, evt)=>
* Implements autoscroll, updates the <currentPoint>, highlights any drop
* targets and updates the preview.
*/
dragOver = (graph, evt)=>
{
dragOver = (graph, evt) => {
var offset = mxUtils.getOffset(graph.container);
var origin = mxUtils.getScrollOrigin(graph.container);
var x = mxEvent.getClientX(evt) - offset.x + origin.x - graph.panDx;
var y = mxEvent.getClientY(evt) - offset.y + origin.y - graph.panDy;
if (graph.autoScroll && (this.autoscroll == null || this.autoscroll))
{
if (graph.autoScroll && (this.autoscroll == null || this.autoscroll)) {
graph.scrollPointToVisible(x, y, graph.autoExtend);
}
// Highlights the drop target under the mouse
if (this.currentHighlight != null && graph.isDropEnabled())
{
if (this.currentHighlight != null && graph.isDropEnabled()) {
this.currentDropTarget = this.getDropTarget(graph, x, y, evt);
var state = graph.getView().getState(this.currentDropTarget);
this.currentHighlight.highlight(state);
}
// Updates the location of the preview
if (this.previewElement != null)
{
if (this.previewElement.parentNode == null)
{
if (this.previewElement != null) {
if (this.previewElement.parentNode == null) {
graph.container.appendChild(this.previewElement);
this.previewElement.style.zIndex = '3';
@ -664,8 +608,7 @@ dragOver = (graph, evt)=>
var hideGuide = true;
// Grid and guides
if (this.currentGuide != null && this.currentGuide.isEnabledForEvent(evt))
{
if (this.currentGuide != null && this.currentGuide.isEnabledForEvent(evt)) {
// LATER: HTML preview appears smaller than SVG preview
var w = parseInt(this.previewElement.style.width);
var h = parseInt(this.previewElement.style.height);
@ -675,9 +618,7 @@ dragOver = (graph, evt)=>
hideGuide = false;
x = delta.x;
y = delta.y;
}
else if (gridEnabled)
{
} else if (gridEnabled) {
var scale = graph.view.scale;
var tr = graph.view.translate;
var off = graph.gridSize / 2;
@ -685,13 +626,11 @@ dragOver = (graph, evt)=>
y = (graph.snap(y / scale - tr.y - off) + tr.y) * scale;
}
if (this.currentGuide != null && hideGuide)
{
if (this.currentGuide != null && hideGuide) {
this.currentGuide.hide();
}
if (this.previewOffset != null)
{
if (this.previewOffset != null) {
x += this.previewOffset.x;
y += this.previewOffset.y;
}
@ -710,16 +649,17 @@ dragOver = (graph, evt)=>
* Returns the drop target for the given graph and coordinates. This
* implementation uses <mxGraph.getCellAt>.
*/
drop = (graph, evt, dropTarget, x, y)=>
{
drop = (graph, evt, dropTarget, x, y) => {
this.dropHandler.apply(this, arguments);
// Had to move this to after the insert because it will
// affect the scrollbars of the window in IE to try and
// make the complete container visible.
// LATER: Should be made optional.
if (graph.container.style.visibility != 'hidden')
{
if (graph.container.style.visibility != 'hidden') {
graph.container.focus();
}
};
}
export default mxDragSource;

87
src/js/util/mxEffects.js
View File

@ -2,9 +2,7 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
var mxEffects =
{
var mxEffects = {
/**
* Class: mxEffects
*
@ -37,37 +35,29 @@ var mxEffects =
* done - Optional function argument that is invoked after the
* last step of the animation.
*/
animateChanges: (graph, changes, done)=>
{
animateChanges: (graph, changes, done) => {
var maxStep = 10;
var step = 0;
var animate = ()=>
{
var animate = () => {
var isRequired = false;
for (var i = 0; i < changes.length; i++)
{
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
if (change instanceof mxGeometryChange ||
change instanceof mxTerminalChange ||
change instanceof mxValueChange ||
change instanceof mxChildChange ||
change instanceof mxStyleChange)
{
change instanceof mxStyleChange) {
var state = graph.getView().getState(change.cell || change.child, false);
if (state != null)
{
if (state != null) {
isRequired = true;
if (change.constructor != mxGeometryChange || graph.model.isEdge(change.cell))
{
if (change.constructor != mxGeometryChange || graph.model.isEdge(change.cell)) {
mxUtils.setOpacity(state.shape.node, 100 * step / maxStep);
}
else
{
} else {
var scale = graph.getView().scale;
var dx = (change.geometry.x - change.previous.x) * scale;
@ -76,15 +66,12 @@ var mxEffects =
var sx = (change.geometry.width - change.previous.width) * scale;
var sy = (change.geometry.height - change.previous.height) * scale;
if (step == 0)
{
if (step == 0) {
state.x -= dx;
state.y -= dy;
state.width -= sx;
state.height -= sy;
}
else
{
} else {
state.x += dx / maxStep;
state.y += dy / maxStep;
state.width += sx / maxStep;
@ -100,13 +87,10 @@ var mxEffects =
}
}
if (step < maxStep && isRequired)
{
if (step < maxStep && isRequired) {
step++;
window.setTimeout(animate, delay);
}
else if (done != null)
{
} else if (done != null) {
done();
}
};
@ -126,18 +110,15 @@ var mxEffects =
* cell - <mxCell> to set the opacity for.
* opacity - New value for the opacity in %.
*/
cascadeOpacity: (graph, cell, opacity)=>
{
cascadeOpacity: (graph, cell, opacity) => {
// Fades all children
var childCount = graph.model.getChildCount(cell);
for (var i=0; i<childCount; i++)
{
for (var i = 0; i < childCount; i++) {
var child = graph.model.getChildAt(cell, i);
var childState = graph.getView().getState(child);
if (childState != null)
{
if (childState != null) {
mxUtils.setOpacity(childState.shape.node, opacity);
mxEffects.cascadeOpacity(graph, child, opacity);
}
@ -146,14 +127,11 @@ var mxEffects =
// Fades all connected edges
var edges = graph.model.getEdges(cell);
if (edges != null)
{
for (var i=0; i<edges.length; i++)
{
if (edges != null) {
for (var i = 0; i < edges.length; i++) {
var edgeState = graph.getView().getState(edges[i]);
if (edgeState != null)
{
if (edgeState != null) {
mxUtils.setOpacity(edgeState.shape.node, opacity);
}
}
@ -165,8 +143,7 @@ var mxEffects =
*
* Asynchronous fade-out operation.
*/
fadeOut: (node, from, remove, step, delay, isEnabled)=>
{
fadeOut: (node, from, remove, step, delay, isEnabled) => {
step = step || 40;
delay = delay || 30;
@ -174,38 +151,30 @@ var mxEffects =
mxUtils.setOpacity(node, opacity);
if (isEnabled || isEnabled == null)
{
var f = ()=>
{
if (isEnabled || isEnabled == null) {
var f = () => {
opacity = Math.max(opacity - step, 0);
mxUtils.setOpacity(node, opacity);
if (opacity > 0)
{
if (opacity > 0) {
window.setTimeout(f, delay);
}
else
{
} else {
node.style.visibility = 'hidden';
if (remove && node.parentNode)
{
if (remove && node.parentNode) {
node.parentNode.removeChild(node);
}
}
};
window.setTimeout(f, delay);
}
else
{
} else {
node.style.visibility = 'hidden';
if (remove && node.parentNode)
{
if (remove && node.parentNode) {
node.parentNode.removeChild(node);
}
}
}
};
export default mxEffects;

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

@ -2,6 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
class mxEventObject {
/**
* Class: mxEventObject
*
@ -25,15 +27,12 @@
* new mxEventObject("eventName", key1, val1, .., keyN, valN)
* (end)
*/
function mxEventObject(name)
{
constructor(name) {
this.name = name;
this.properties = [];
for (var i = 1; i < arguments.length; i += 2)
{
if (arguments[i + 1] != null)
{
for (var i = 1; i < arguments.length; i += 2) {
if (arguments[i + 1] != null) {
this.properties[arguments[i]] = arguments[i + 1];
}
}
@ -65,8 +64,7 @@ consumed = false;
*
* Returns <name>.
*/
getName = ()=>
{
getName = () => {
return this.name;
};
@ -75,8 +73,7 @@ getName = ()=>
*
* Returns <properties>.
*/
getProperties = ()=>
{
getProperties = () => {
return this.properties;
};
@ -85,8 +82,7 @@ getProperties = ()=>
*
* Returns the property for the given key.
*/
getProperty = (key)=>
{
getProperty = (key) => {
return this.properties[key];
};
@ -95,8 +91,7 @@ getProperty = (key)=>
*
* Returns true if the event has been consumed.
*/
isConsumed = ()=>
{
isConsumed = () => {
return this.consumed;
};
@ -105,7 +100,9 @@ isConsumed = ()=>
*
* Consumes the event.
*/
consume = ()=>
{
consume = () => {
this.consumed = true;
};
}
export default mxEventObject;

113
src/js/util/mxEventSource.js
View File

@ -2,33 +2,10 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxEventSource
*
* Base class for objects that dispatch named events. To create a subclass that
* inherits from mxEventSource, the following code is used.
*
* (code)
* function MyClass() { };
*
* MyClass.prototype = new mxEventSource();
* constructor = MyClass;
* (end)
*
* Known Subclasses:
*
* <mxGraphModel>, <mxGraph>, <mxGraphView>, <mxEditor>, <mxCellOverlay>,
* <mxToolbar>, <mxWindow>
*
* Constructor: mxEventSource
*
* Constructs a new event source.
*/
function mxEventSource(eventSource)
{
this.setEventSource(eventSource);
};
import mxEventObject from "./mxEventObject";
class mxEventSource {
/**
* Variable: eventListeners
*
@ -52,13 +29,38 @@ eventsEnabled = true;
*/
eventSource = null;
/**
* Class: mxEventSource
*
* Base class for objects that dispatch named events. To create a subclass that
* inherits from mxEventSource, the following code is used.
*
* (code)
* function MyClass() { };
*
* MyClass.prototype = new mxEventSource();
* constructor = MyClass;
* (end)
*
* Known Subclasses:
*
* <mxGraphModel>, <mxGraph>, <mxGraphView>, <mxEditor>, <mxCellOverlay>,
* <mxToolbar>, <mxWindow>
*
* Constructor: mxEventSource
*
* Constructs a new event source.
*/
constructor(eventSource) {
this.setEventSource(eventSource);
};
/**
* Function: isEventsEnabled
*
* Returns <eventsEnabled>.
*/
isEventsEnabled = ()=>
{
isEventsEnabled = () => {
return this.eventsEnabled;
};
@ -67,8 +69,7 @@ isEventsEnabled = ()=>
*
* Sets <eventsEnabled>.
*/
setEventsEnabled = (value)=>
{
setEventsEnabled = (value) => {
this.eventsEnabled = value;
};
@ -77,8 +78,7 @@ setEventsEnabled = (value)=>
*
* Returns <eventSource>.
*/
getEventSource = ()=>
{
getEventSource = () => {
return this.eventSource;
};
@ -87,8 +87,7 @@ getEventSource = ()=>
*
* Sets <eventSource>.
*/
setEventSource = (value)=>
{
setEventSource = (value) => {
this.eventSource = value;
};
@ -100,10 +99,8 @@ setEventSource = (value)=>
*
* The parameters of the listener are the sender and an <mxEventObject>.
*/
addListener = (name, funct)=>
{
if (this.eventListeners == null)
{
addListener = (name, funct) => {
if (this.eventListeners == null) {
this.eventListeners = [];
}
@ -116,20 +113,14 @@ addListener = (name, funct)=>
*
* Removes all occurrences of the given listener from <eventListeners>.
*/
removeListener = (funct)=>
{
if (this.eventListeners != null)
{
removeListener = (funct) => {
if (this.eventListeners != null) {
var i = 0;
while (i < this.eventListeners.length)
{
if (this.eventListeners[i+1] == funct)
{
while (i < this.eventListeners.length) {
if (this.eventListeners[i + 1] == funct) {
this.eventListeners.splice(i, 2);
}
else
{
} else {
i += 2;
}
}
@ -155,35 +146,31 @@ removeListener = (funct)=>
* sender - Optional sender to be passed to the listener. Default value is
* the return value of <getEventSource>.
*/
fireEvent = (evt, sender)=>
{
if (this.eventListeners != null && this.isEventsEnabled())
{
if (evt == null)
{
fireEvent = (evt, sender) => {
if (this.eventListeners != null && this.isEventsEnabled()) {
if (evt == null) {
evt = new mxEventObject();
}
if (sender == null)
{
if (sender == null) {
sender = this.getEventSource();
}
if (sender == null)
{
if (sender == null) {
sender = this;
}
var args = [sender, evt];
for (var i = 0; i < this.eventListeners.length; i += 2)
{
for (var i = 0; i < this.eventListeners.length; i += 2) {
var listen = this.eventListeners[i];
if (listen == null || listen == evt.getName())
{
if (listen == null || listen == evt.getName()) {
this.eventListeners[i + 1].apply(this, args);
}
}
}
};
}
export default mxEventSource;

83
src/js/util/mxForm.js
View File

@ -2,24 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxForm
*
* A simple class for creating HTML forms.
*
* Constructor: mxForm
*
* Creates a HTML table using the specified classname.
*/
function mxForm(className)
{
this.table = document.createElement('table');
this.table.className = className;
this.body = document.createElement('tbody');
this.table.appendChild(this.body);
};
class mxForm {
/**
* Variable: table
*
@ -35,13 +19,29 @@ table = null;
*/
body = false;
/**
* Class: mxForm
*
* A simple class for creating HTML forms.
*
* Constructor: mxForm
*
* Creates a HTML table using the specified classname.
*/
constructor(className) {
this.table = document.createElement('table');
this.table.className = className;
this.body = document.createElement('tbody');
this.table.appendChild(this.body);
};
/**
* Function: getTable
*
* Returns the table that contains this form.
*/
getTable = ()=>
{
getTable = () => {
return this.table;
};
@ -51,8 +51,7 @@ getTable = ()=>
* Helper method to add an OK and Cancel button using the respective
* functions.
*/
addButtons = (okFunct, cancelFunct)=>
{
addButtons = (okFunct, cancelFunct) => {
var tr = document.createElement('tr');
var td = document.createElement('td');
tr.appendChild(td);
@ -63,8 +62,7 @@ addButtons = (okFunct, cancelFunct)=>
mxUtils.write(button, mxResources.get('ok') || 'OK');
td.appendChild(button);
mxEvent.addListener(button, 'click', ()=>
{
mxEvent.addListener(button, 'click', () => {
okFunct();
});
@ -73,8 +71,7 @@ addButtons = (okFunct, cancelFunct)=>
mxUtils.write(button, mxResources.get('cancel') || 'Cancel');
td.appendChild(button);
mxEvent.addListener(button, 'click', ()=>
{
mxEvent.addListener(button, 'click', () => {
cancelFunct();
});
@ -87,8 +84,7 @@ addButtons = (okFunct, cancelFunct)=>
*
* Adds an input for the given name, type and value and returns it.
*/
addText = (name, value, type)=>
{
addText = (name, value, type) => {
var input = document.createElement('input');
input.setAttribute('type', type || 'text');
@ -102,16 +98,14 @@ addText = (name, value, type)=>
*
* Adds a checkbox for the given name and value and returns the textfield.
*/
addCheckbox = (name, value)=>
{
addCheckbox = (name, value) => {
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
this.addField(name, input);
// IE can only change the checked value if the input is inside the DOM
if (value)
{
if (value) {
input.checked = true;
}
@ -123,12 +117,10 @@ addCheckbox = (name, value)=>
*
* Adds a textarea for the given name and value and returns the textarea.
*/
addTextarea = (name, value, rows)=>
{
addTextarea = (name, value, rows) => {
var input = document.createElement('textarea');
if (mxClient.IS_NS)
{
if (mxClient.IS_NS) {
rows--;
}
@ -143,17 +135,14 @@ addTextarea = (name, value, rows)=>
*
* Adds a combo for the given name and returns the combo.
*/
addCombo = (name, isMultiSelect, size)=>
{
addCombo = (name, isMultiSelect, size) => {
var select = document.createElement('select');
if (size != null)
{
if (size != null) {
select.setAttribute('size', size);
}
if (isMultiSelect)
{
if (isMultiSelect) {
select.setAttribute('multiple', 'true');
}
@ -165,15 +154,13 @@ addCombo = (name, isMultiSelect, size)=>
*
* Adds an option for the given label to the specified combo.
*/
addOption = (combo, label, value, isSelected)=>
{
addOption = (combo, label, value, isSelected) => {
var option = document.createElement('option');
mxUtils.writeln(option, label);
option.setAttribute('value', value);
if (isSelected)
{
if (isSelected) {
option.setAttribute('selected', isSelected);
}
@ -186,8 +173,7 @@ addOption = (combo, label, value, isSelected)=>
* Adds a new row with the name and the input field in two columns and
* returns the given input.
*/
addField = (name, input)=>
{
addField = (name, input) => {
var tr = document.createElement('tr');
var td = document.createElement('td');
mxUtils.write(td, name);
@ -200,3 +186,6 @@ addField = (name, input)=>
return input;
};
}
export default mxForm;

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

@ -11,8 +11,8 @@
*
* Constructs a new guide object.
*/
function mxGuide(graph, states)
{
class mxGuide {
constructor(graph, states) {
this.graph = graph;
this.setStates(states);
};
@ -78,8 +78,7 @@ tolerance = 2;
*
* Sets the <mxCellStates> that should be used for alignment.
*/
setStates = (states)=>
{
setStates = (states) => {
this.states = states;
};
@ -89,8 +88,7 @@ setStates = (states)=>
* Returns true if the guide should be enabled for the given native event. This
* implementation always returns true.
*/
isEnabledForEvent = (evt)=>
{
isEnabledForEvent = (evt) => {
return true;
};
@ -99,8 +97,7 @@ isEnabledForEvent = (evt)=>
*
* Returns the tolerance for the guides. Default value is gridSize / 2.
*/
getGuideTolerance = (gridEnabled)=>
{
getGuideTolerance = (gridEnabled) => {
return (gridEnabled && this.graph.gridEnabled) ? this.graph.gridSize / 2 : this.tolerance;
};
@ -115,8 +112,7 @@ getGuideTolerance = (gridEnabled)=>
*
* horizontal - Boolean that specifies which guide should be created.
*/
createGuideShape = (horizontal)=>
{
createGuideShape = (horizontal) => {
var guide = new mxPolyline([], mxConstants.GUIDE_COLOR, mxConstants.GUIDE_STROKEWIDTH);
guide.isDashed = true;
@ -128,8 +124,7 @@ createGuideShape = (horizontal)=>
*
* Returns true if the given state should be ignored.
*/
isStateIgnored = (state)=>
{
isStateIgnored = (state) => {
return false;
};
@ -138,10 +133,8 @@ isStateIgnored = (state)=>
*
* Moves the <bounds> by the given <mxPoint> and returnt the snapped point.
*/
move = (bounds, delta, gridEnabled, clone)=>
{
if (this.states != null && (this.horizontal || this.vertical) && bounds != null && delta != null)
{
move = (bounds, delta, gridEnabled, clone) => {
if (this.states != null && (this.horizontal || this.vertical) && bounds != null && delta != null) {
var scale = this.graph.getView().scale;
var tt = this.getGuideTolerance(gridEnabled) * scale;
var b = bounds.clone();
@ -163,39 +156,30 @@ move = (bounds, delta, gridEnabled, clone)=>
var middle = b.getCenterY();
// Snaps the left, center and right to the given x-coordinate
function snapX(x, state, centerAlign)
{
function snapX(x, state, centerAlign) {
var override = false;
if (centerAlign && Math.abs(x - center) < ttX)
{
if (centerAlign && Math.abs(x - center) < ttX) {
delta.x = x - bounds.getCenterX();
ttX = Math.abs(x - center);
override = true;
}
else if (!centerAlign)
{
if (Math.abs(x - left) < ttX)
{
} else if (!centerAlign) {
if (Math.abs(x - left) < ttX) {
delta.x = x - bounds.x;
ttX = Math.abs(x - left);
override = true;
}
else if (Math.abs(x - right) < ttX)
{
} else if (Math.abs(x - right) < ttX) {
delta.x = x - bounds.x - bounds.width;
ttX = Math.abs(x - right);
override = true;
}
}
if (override)
{
if (override) {
stateX = state;
valueX = x;
if (this.guideX == null)
{
if (this.guideX == null) {
this.guideX = this.createGuideShape(true);
// Makes sure to use either VML or SVG shapes in order to implement
@ -212,39 +196,30 @@ move = (bounds, delta, gridEnabled, clone)=>
};
// Snaps the top, middle or bottom to the given y-coordinate
function snapY(y, state, centerAlign)
{
function snapY(y, state, centerAlign) {
var override = false;
if (centerAlign && Math.abs(y - middle) < ttY)
{
if (centerAlign && Math.abs(y - middle) < ttY) {
delta.y = y - bounds.getCenterY();
ttY = Math.abs(y - middle);
override = true;
}
else if (!centerAlign)
{
if (Math.abs(y - top) < ttY)
{
} else if (!centerAlign) {
if (Math.abs(y - top) < ttY) {
delta.y = y - bounds.y;
ttY = Math.abs(y - top);
override = true;
}
else if (Math.abs(y - bottom) < ttY)
{
} else if (Math.abs(y - bottom) < ttY) {
delta.y = y - bounds.y - bounds.height;
ttY = Math.abs(y - bottom);
override = true;
}
}
if (override)
{
if (override) {
stateY = state;
valueY = y;
if (this.guideY == null)
{
if (this.guideY == null) {
this.guideY = this.createGuideShape(false);
// Makes sure to use either VML or SVG shapes in order to implement
@ -260,36 +235,30 @@ move = (bounds, delta, gridEnabled, clone)=>
overrideY = overrideY || override;
};
for (var i = 0; i < this.states.length; i++)
{
for (var i = 0; i < this.states.length; i++) {
var state = this.states[i];
if (state != null && !this.isStateIgnored(state))
{
if (state != null && !this.isStateIgnored(state)) {
// Align x
if (this.horizontal)
{
if (this.horizontal) {
snapX.call(this, state.getCenterX(), state, true);
snapX.call(this, state.x, state, false);
snapX.call(this, state.x + state.width, state, false);
// Aligns left and right of shape to center of page
if (state.cell == null)
{
if (state.cell == null) {
snapX.call(this, state.getCenterX(), state, false);
}
}
// Align y
if (this.vertical)
{
if (this.vertical) {
snapY.call(this, state.getCenterY(), state, true);
snapY.call(this, state.y, state, false);
snapY.call(this, state.y + state.height, state, false);
// Aligns left and right of shape to center of page
if (state.cell == null)
{
if (state.cell == null) {
snapY.call(this, state.getCenterY(), state, false);
}
}
@ -303,27 +272,20 @@ move = (bounds, delta, gridEnabled, clone)=>
// Redraws the guides
var c = this.graph.container;
if (!overrideX && this.guideX != null)
{
if (!overrideX && this.guideX != null) {
this.guideX.node.style.visibility = 'hidden';
}
else if (this.guideX != null)
{
} else if (this.guideX != null) {
var minY = null;
var maxY = null;
if (stateX != null && bounds != null)
{
if (stateX != null && bounds != null) {
minY = Math.min(bounds.y + delta.y - this.graph.panDy, stateX.y);
maxY = Math.max(bounds.y + bounds.height + delta.y - this.graph.panDy, stateX.y + stateX.height);
}
if (minY != null && maxY != null)
{
if (minY != null && maxY != null) {
this.guideX.points = [new mxPoint(valueX, minY), new mxPoint(valueX, maxY)];
}
else
{
} else {
this.guideX.points = [new mxPoint(valueX, -this.graph.panDy),
new mxPoint(valueX, c.scrollHeight - 3 - this.graph.panDy)];
}
@ -333,27 +295,20 @@ move = (bounds, delta, gridEnabled, clone)=>
this.guideX.redraw();
}
if (!overrideY && this.guideY != null)
{
if (!overrideY && this.guideY != null) {
this.guideY.node.style.visibility = 'hidden';
}
else if (this.guideY != null)
{
} else if (this.guideY != null) {
var minX = null;
var maxX = null;
if (stateY != null && bounds != null)
{
if (stateY != null && bounds != null) {
minX = Math.min(bounds.x + delta.x - this.graph.panDx, stateY.x);
maxX = Math.max(bounds.x + bounds.width + delta.x - this.graph.panDx, stateY.x + stateY.width);
}
if (minX != null && maxX != null)
{
if (minX != null && maxX != null) {
this.guideY.points = [new mxPoint(minX, valueY), new mxPoint(maxX, valueY)];
}
else
{
} else {
this.guideY.points = [new mxPoint(-this.graph.panDx, valueY),
new mxPoint(c.scrollWidth - 3 - this.graph.panDx, valueY)];
}
@ -372,17 +327,14 @@ move = (bounds, delta, gridEnabled, clone)=>
*
* Rounds to pixels for virtual states (eg. page guides)
*/
getDelta = (bounds, stateX, dx, stateY, dy)=>
{
getDelta = (bounds, stateX, dx, stateY, dy) => {
var s = this.graph.view.scale;
if (this.rounded || (stateX != null && stateX.cell == null))
{
if (this.rounded || (stateX != null && stateX.cell == null)) {
dx = Math.round((bounds.x + dx) / s) * s - bounds.x;
}
if (this.rounded || (stateY != null && stateY.cell == null))
{
if (this.rounded || (stateY != null && stateY.cell == null)) {
dy = Math.round((bounds.y + dy) / s) * s - bounds.y;
}
@ -394,8 +346,7 @@ getDelta = (bounds, stateX, dx, stateY, dy)=>
*
* Returns the color for the given state.
*/
getGuideColor = (state, horizontal)=>
{
getGuideColor = (state, horizontal) => {
return mxConstants.GUIDE_COLOR;
};
@ -404,8 +355,7 @@ getGuideColor = (state, horizontal)=>
*
* Hides all current guides.
*/
hide = ()=>
{
hide = () => {
this.setVisible(false);
};
@ -414,15 +364,12 @@ hide = ()=>
*
* Shows or hides the current guides.
*/
setVisible = (visible)=>
{
if (this.guideX != null)
{
setVisible = (visible) => {
if (this.guideX != null) {
this.guideX.node.style.visibility = (visible) ? 'visible' : 'hidden';
}
if (this.guideY != null)
{
if (this.guideY != null) {
this.guideY.node.style.visibility = (visible) ? 'visible' : 'hidden';
}
};
@ -432,17 +379,17 @@ setVisible = (visible)=>
*
* Destroys all resources that this object uses.
*/
destroy = ()=>
{
if (this.guideX != null)
{
destroy = () => {
if (this.guideX != null) {
this.guideX.destroy();
this.guideX = null;
}
if (this.guideY != null)
{
if (this.guideY != null) {
this.guideY.destroy();
this.guideY = null;
}
};
}
export default mxGuide;

34
src/js/util/mxImage.js
View File

@ -2,22 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxImage
*
* Encapsulates the URL, width and height of an image.
*
* Constructor: mxImage
*
* Constructs a new image.
*/
function mxImage(src, width, height)
{
this.src = src;
this.width = width;
this.height = height;
};
class mxImage {
/**
* Variable: src
*
@ -38,3 +24,21 @@ width = null;
* Integer that specifies the height of the image.
*/
height = null;
/**
* Class: mxImage
*
* Encapsulates the URL, width and height of an image.
*
* Constructor: mxImage
*
* Constructs a new image.
*/
constructor(src, width, height) {
this.src = src;
this.width = width;
this.height = height;
};
}
export default mxImage;

48
src/js/util/mxImageBundle.js
View File

@ -2,6 +2,22 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
class mxImageBundle {
/**
* Variable: images
*
* Maps from keys to images.
*/
images = null;
/**
* Variable: alt
*
* Specifies if the fallback representation should be returned.
*/
alt = null;
/**
* Class: mxImageBundle
*
@ -47,34 +63,18 @@
* support data URIs, but the maximum size is limited to 32 KB, which means
* all data URIs should be limited to 32 KB.
*/
function mxImageBundle(alt)
{
constructor(alt) {
this.images = [];
this.alt = (alt != null) ? alt : false;
};
/**
* Variable: images
*
* Maps from keys to images.
*/
images = null;
/**
* Variable: alt
*
* Specifies if the fallback representation should be returned.
*/
alt = null;
/**
* Function: putImage
*
* Adds the specified entry to the map. The entry is an object with a value and
* fallback property as specified in the arguments.
*/
putImage = (key, value, fallback)=>
{
putImage = (key, value, fallback) => {
this.images[key] = {value: value, fallback: fallback};
};
@ -85,19 +85,19 @@ putImage = (key, value, fallback)=>
* or fallback, depending on <alt>. The fallback is returned if
* <alt> is true, the value is returned otherwise.
*/
getImage = (key)=>
{
getImage = (key) => {
var result = null;
if (key != null)
{
if (key != null) {
var img = this.images[key];
if (img != null)
{
if (img != null) {
result = (this.alt) ? img.fallback : img.value;
}
}
return result;
};
}
export default mxImageBundle;

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

@ -2,6 +2,15 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
class mxImageExport {
/**
* Variable: includeOverlays
*
* Specifies if overlays should be included in the export. Default is false.
*/
includeOverlays = false;
/**
* Class: mxImageExport
*
@ -32,34 +41,22 @@
*
* Constructs a new image export.
*/
function mxImageExport() { };
/**
* Variable: includeOverlays
*
* Specifies if overlays should be included in the export. Default is false.
*/
includeOverlays = false;
constructor() {}
/**
* Function: drawState
*
* Draws the given state and all its descendants to the given canvas.
*/
drawState = (state, canvas)=>
{
if (state != null)
{
this.visitStatesRecursive(state, canvas, mxUtils.bind(this, ()=>
{
drawState = (state, canvas) => {
if (state != null) {
this.visitStatesRecursive(state, canvas, mxUtils.bind(this, () => {
this.drawCellState.apply(this, arguments);
}));
// Paints the overlays
if (this.includeOverlays)
{
this.visitStatesRecursive(state, canvas, mxUtils.bind(this, ()=>
{
if (this.includeOverlays) {
this.visitStatesRecursive(state, canvas, mxUtils.bind(this, () => {
this.drawOverlays.apply(this, arguments);
}));
}
@ -71,17 +68,14 @@ drawState = (state, canvas)=>
*
* Visits the given state and all its descendants to the given canvas recursively.
*/
visitStatesRecursive = (state, canvas, visitor)=>
{
if (state != null)
{
visitStatesRecursive = (state, canvas, visitor) => {
if (state != null) {
visitor(state, canvas);
var graph = state.view.graph;
var childCount = graph.model.getChildCount(state.cell);
for (var i = 0; i < childCount; i++)
{
for (var i = 0; i < childCount; i++) {
var childState = graph.view.getState(graph.model.getChildAt(state.cell, i));
this.visitStatesRecursive(childState, canvas, visitor);
}
@ -93,8 +87,7 @@ visitStatesRecursive = (state, canvas, visitor)=>
*
* Returns the link for the given cell state and canvas. This returns null.
*/
getLinkForCellState = (state, canvas)=>
{
getLinkForCellState = (state, canvas) => {
return null;
};
@ -103,13 +96,11 @@ getLinkForCellState = (state, canvas)=>
*
* Draws the given state to the given canvas.
*/
drawCellState = (state, canvas)=>
{
drawCellState = (state, canvas) => {
// Experimental feature
var link = this.getLinkForCellState(state, canvas);
if (link != null)
{
if (link != null) {
canvas.setLink(link);
}
@ -117,8 +108,7 @@ drawCellState = (state, canvas)=>
this.drawShape(state, canvas);
this.drawText(state, canvas);
if (link != null)
{
if (link != null) {
canvas.setLink(null);
}
};
@ -128,10 +118,8 @@ drawCellState = (state, canvas)=>
*
* Draws the shape of the given state.
*/
drawShape = (state, canvas)=>
{
if (state.shape instanceof mxShape && state.shape.checkBounds())
{
drawShape = (state, canvas) => {
if (state.shape instanceof mxShape && state.shape.checkBounds()) {
canvas.save();
state.shape.beforePaint(canvas);
@ -147,10 +135,8 @@ drawShape = (state, canvas)=>
*
* Draws the text of the given state.
*/
drawText = (state, canvas)=>
{
if (state.text != null && state.text.checkBounds())
{
drawText = (state, canvas) => {
if (state.text != null && state.text.checkBounds()) {
canvas.save();
state.text.beforePaint(canvas);
@ -167,17 +153,15 @@ drawText = (state, canvas)=>
* Draws the overlays for the given state. This is called if <includeOverlays>
* is true.
*/
drawOverlays = (state, canvas)=>
{
if (state.overlays != null)
{
state.overlays.visit((id, shape)=>
{
if (shape instanceof mxShape)
{
drawOverlays = (state, canvas) => {
if (state.overlays != null) {
state.overlays.visit((id, shape) => {
if (shape instanceof mxShape) {
shape.paint(canvas);
}
});
}
};
}
export default mxImageExport;

148
src/js/util/mxLog.js
View File

@ -2,8 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
var mxLog =
{
var mxLog = {
/**
* Class: mxLog
*
@ -53,10 +53,8 @@ var mxLog =
* point to a non-null value. This is called from within <setVisible> if the
* log has not yet been initialized.
*/
init: ()=>
{
if (mxLog.window == null && document.body != null)
{
init: () => {
if (mxLog.window == null && document.body != null) {
var title = mxLog.consoleName + ' - mxGraph ' + mxClient.VERSION;
// Creates a table that maintains the layout
@ -78,12 +76,9 @@ var mxLog =
mxLog.textarea.value = mxLog.buffer;
// Workaround for wrong width in standards mode
if (mxClient.IS_NS && document.compatMode != 'BackCompat')
{
if (mxClient.IS_NS && document.compatMode != 'BackCompat') {
mxLog.textarea.style.width = '99%';
}
else
{
} else {
mxLog.textarea.style.width = '100%';
}
@ -102,57 +97,42 @@ var mxLog =
table.appendChild(tbody);
// Adds various debugging buttons
mxLog.addButton('Info', function (evt)
{
mxLog.addButton('Info', function (evt) {
mxLog.info();
});
mxLog.addButton('DOM', function (evt)
{
mxLog.addButton('DOM', function (evt) {
var content = mxUtils.getInnerHtml(document.body);
mxLog.debug(content);
});
mxLog.addButton('Trace', function (evt)
{
mxLog.addButton('Trace', function (evt) {
mxLog.TRACE = !mxLog.TRACE;
if (mxLog.TRACE)
{
if (mxLog.TRACE) {
mxLog.debug('Tracing enabled');
}
else
{
} else {
mxLog.debug('Tracing disabled');
}
});
mxLog.addButton('Copy', function (evt)
{
try
{
mxLog.addButton('Copy', function (evt) {
try {
mxUtils.copy(mxLog.textarea.value);
}
catch (err)
{
} catch (err) {
mxUtils.alert(err);
}
});
mxLog.addButton('Show', function (evt)
{
try
{
mxLog.addButton('Show', function (evt) {
try {
mxUtils.popup(mxLog.textarea.value);
}
catch (err)
{
} catch (err) {
mxUtils.alert(err);
}
});
mxLog.addButton('Clear', function (evt)
{
mxLog.addButton('Clear', function (evt) {
mxLog.textarea.value = '';
});
@ -160,13 +140,10 @@ var mxLog =
var h = 0;
var w = 0;
if (typeof(window.innerWidth) === 'number')
{
if (typeof (window.innerWidth) === 'number') {
h = window.innerHeight;
w = window.innerWidth;
}
else
{
} else {
h = (document.documentElement.clientHeight || document.body.clientHeight);
w = document.body.clientWidth;
}
@ -180,12 +157,10 @@ var mxLog =
// Workaround for ignored textarea height in various setups
if ((mxClient.IS_NS && !mxClient.IS_GC &&
!mxClient.IS_SF && document.compatMode != 'BackCompat'))
{
!mxClient.IS_SF && document.compatMode != 'BackCompat')) {
var elt = mxLog.window.getElement();
var resizeHandler = (sender, evt)=>
{
var resizeHandler = (sender, evt) => {
mxLog.textarea.style.height = Math.max(0, elt.offsetHeight - 70) + 'px';
};
@ -203,8 +178,7 @@ var mxLog =
*
* Writes the current navigator information to the console.
*/
info: ()=>
{
info: () => {
mxLog.writeln(mxUtils.toString(navigator));
},
@ -213,8 +187,7 @@ var mxLog =
*
* Adds a button to the console using the given label and function.
*/
addButton: (lab, funct)=>
{
addButton: (lab, funct) => {
var button = document.createElement('button');
mxUtils.write(button, lab);
mxEvent.addListener(button, 'click', funct);
@ -226,10 +199,8 @@ var mxLog =
*
* Returns true if the console is visible.
*/
isVisible: ()=>
{
if (mxLog.window != null)
{
isVisible: () => {
if (mxLog.window != null) {
return mxLog.window.isVisible();
}
@ -242,8 +213,7 @@ var mxLog =
*
* Shows the console.
*/
show: ()=>
{
show: () => {
mxLog.setVisible(true);
},
@ -252,15 +222,12 @@ var mxLog =
*
* Shows or hides the console.
*/
setVisible: (visible)=>
{
if (mxLog.window == null)
{
setVisible: (visible) => {
if (mxLog.window == null) {
mxLog.init();
}
if (mxLog.window != null)
{
if (mxLog.window != null) {
mxLog.window.setVisible(visible);
}
},
@ -281,10 +248,8 @@ var mxLog =
* mxLog.leave('World!', t0);
* (end)
*/
enter: (string)=>
{
if (mxLog.TRACE)
{
enter: (string) => {
if (mxLog.TRACE) {
mxLog.writeln('Entering ' + string);
return new Date().getTime();
@ -299,10 +264,8 @@ var mxLog =
* between the current time and t0 in milliseconds.
* See <enter> for an example.
*/
leave: (string, t0)=>
{
if (mxLog.TRACE)
{
leave: (string, t0) => {
if (mxLog.TRACE) {
var dt = (t0 != 0) ? ' (' + (new Date().getTime() - t0) + ' ms)' : '';
mxLog.writeln('Leaving ' + string + dt);
}
@ -320,10 +283,8 @@ var mxLog =
* mxLog.debug('Hello, World!');
* (end)
*/
debug: ()=>
{
if (mxLog.DEBUG)
{
debug: () => {
if (mxLog.DEBUG) {
mxLog.writeln.apply(this, arguments);
}
},
@ -340,10 +301,8 @@ var mxLog =
* mxLog.warn('Hello, World!');
* (end)
*/
warn: ()=>
{
if (mxLog.WARN)
{
warn: () => {
if (mxLog.WARN) {
mxLog.writeln.apply(this, arguments);
}
},
@ -353,36 +312,29 @@ var mxLog =
*
* Adds the specified strings to the console.
*/
write: ()=>
{
write: () => {
var string = '';
for (var i = 0; i < arguments.length; i++)
{
for (var i = 0; i < arguments.length; i++) {
string += arguments[i];
if (i < arguments.length - 1)
{
if (i < arguments.length - 1) {
string += ' ';
}
}
if (mxLog.textarea != null)
{
if (mxLog.textarea != null) {
mxLog.textarea.value = mxLog.textarea.value + string;
// Workaround for no update in Presto 2.5.22 (Opera 10.5)
if (navigator.userAgent != null &&
navigator.userAgent.indexOf('Presto/2.5') >= 0)
{
navigator.userAgent.indexOf('Presto/2.5') >= 0) {
mxLog.textarea.style.visibility = 'hidden';
mxLog.textarea.style.visibility = 'visible';
}
mxLog.textarea.scrollTop = mxLog.textarea.scrollHeight;
}
else
{
} else {
mxLog.buffer += string;
}
},
@ -393,21 +345,19 @@ var mxLog =
* Adds the specified strings to the console, appending a linefeed at the
* end of each string.
*/
writeln: ()=>
{
writeln: () => {
var string = '';
for (var i = 0; i < arguments.length; i++)
{
for (var i = 0; i < arguments.length; i++) {
string += arguments[i];
if (i < arguments.length - 1)
{
if (i < arguments.length - 1) {
string += ' ';
}
}
mxLog.write(string + '\n');
}
};
export default mxLog;

162
src/js/util/mxMorphing.js
View File

@ -2,57 +2,10 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
*
* Class: mxMorphing
*
* Implements animation for morphing cells. Here is an example of
* using this class for animating the result of a layout algorithm:
*
* (code)
* graph.getModel().beginUpdate();
* try
* {
* var circleLayout = new mxCircleLayout(graph);
* circleLayout.execute(graph.getDefaultParent());
* }
* finally
* {
* var morph = new mxMorphing(graph);
* morph.addListener(mxEvent.DONE, ()=>
* {
* graph.getModel().endUpdate();
* });
*
* morph.startAnimation();
* }
* (end)
*
* Constructor: mxMorphing
*
* Constructs an animation.
*
* Parameters:
*
* graph - Reference to the enclosing <mxGraph>.
* steps - Optional number of steps in the morphing animation. Default is 6.
* ease - Optional easing constant for the animation. Default is 1.5.
* delay - Optional delay between the animation steps. Passed to <mxAnimation>.
*/
function mxMorphing(graph, steps, ease, delay)
{
mxAnimation.call(this, delay);
this.graph = graph;
this.steps = (steps != null) ? steps : 6;
this.ease = (ease != null) ? ease : 1.5;
};
/**
* Extends mxEventSource.
*/
mxMorphing.prototype = new mxAnimation();
constructor = mxMorphing;
import mxPoint from "./mxPoint";
import mxCellStatePreview from "../view/mxCellStatePreview";
class mxMorphing extends mxAnimation {
/**
* Variable: graph
*
@ -91,26 +44,65 @@ ease = null;
*/
cells = null;
/**
*
* Class: mxMorphing
*
* Implements animation for morphing cells. Here is an example of
* using this class for animating the result of a layout algorithm:
*
* (code)
* graph.getModel().beginUpdate();
* try
* {
* var circleLayout = new mxCircleLayout(graph);
* circleLayout.execute(graph.getDefaultParent());
* }
* finally
* {
* var morph = new mxMorphing(graph);
* morph.addListener(mxEvent.DONE, ()=>
* {
* graph.getModel().endUpdate();
* });
*
* morph.startAnimation();
* }
* (end)
*
* Constructor: mxMorphing
*
* Constructs an animation.
*
* Parameters:
*
* graph - Reference to the enclosing <mxGraph>.
* steps - Optional number of steps in the morphing animation. Default is 6.
* ease - Optional easing constant for the animation. Default is 1.5.
* delay - Optional delay between the animation steps. Passed to <mxAnimation>.
*/
constructor(graph, steps, ease, delay) {
super(delay);
this.graph = graph;
this.steps = (steps != null) ? steps : 6;
this.ease = (ease != null) ? ease : 1.5;
};
/**
* Function: updateAnimation
*
* Animation step.
*/
updateAnimation = ()=>
{
updateAnimation = () => {
updateAnimation.apply(this, arguments);
var move = new mxCellStatePreview(this.graph);
if (this.cells != null)
{
if (this.cells != null) {
// Animates the given cells individually without recursion
for (var i = 0; i < this.cells.length; i++)
{
for (var i = 0; i < this.cells.length; i++) {
this.animateCell(this.cells[i], move, false);
}
}
else
{
} else {
// Animates all changed cells by using recursion to find
// the changed cells but not for the animation itself
this.animateCell(this.graph.getModel().getRoot(), move, true);
@ -118,8 +110,7 @@ updateAnimation = ()=>
this.show(move);
if (move.isEmpty() || this.step++ >= this.steps)
{
if (move.isEmpty() || this.step++ >= this.steps) {
this.stopAnimation();
}
};
@ -129,8 +120,7 @@ updateAnimation = ()=>
*
* Shows the changes in the given <mxCellStatePreview>.
*/
show = (move)=>
{
show = (move) => {
move.show();
};
@ -139,19 +129,16 @@ show = (move)=>
*
* Animates the given cell state using <mxCellStatePreview.moveState>.
*/
animateCell = (cell, move, recurse)=>
{
animateCell = (cell, move, recurse) => {
var state = this.graph.getView().getState(cell);
var delta = null;
if (state != null)
{
if (state != null) {
// Moves the animated state from where it will be after the model
// change by subtracting the given delta vector from that location
delta = this.getDelta(state);
if (this.graph.getModel().isVertex(cell) && (delta.x != 0 || delta.y != 0))
{
if (this.graph.getModel().isVertex(cell) && (delta.x != 0 || delta.y != 0)) {
var translate = this.graph.view.getTranslate();
var scale = this.graph.view.getScale();
@ -162,12 +149,10 @@ animateCell = (cell, move, recurse)=>
}
}
if (recurse && !this.stopRecursion(state, delta))
{
if (recurse && !this.stopRecursion(state, delta)) {
var childCount = this.graph.getModel().getChildCount(cell);
for (var i = 0; i < childCount; i++)
{
for (var i = 0; i < childCount; i++) {
this.animateCell(this.graph.getModel().getChildAt(cell, i), move, recurse);
}
}
@ -179,8 +164,7 @@ animateCell = (cell, move, recurse)=>
* Returns true if the animation should not recursively find more
* deltas for children if the given parent state has been animated.
*/
stopRecursion = (state, delta)=>
{
stopRecursion = (state, delta) => {
return delta != null && (delta.x != 0 || delta.y != 0);
};
@ -190,8 +174,7 @@ stopRecursion = (state, delta)=>
* Returns the vector between the current rendered state and the future
* location of the state after the display will be updated.
*/
getDelta = (state)=>
{
getDelta = (state) => {
var origin = this.getOriginForCell(state.cell);
var translate = this.graph.getView().getTranslate();
var scale = this.graph.getView().getScale();
@ -208,42 +191,37 @@ getDelta = (state)=>
* by using caching inside this method as the result per cell never changes
* during the lifecycle of this object.
*/
getOriginForCell = (cell)=>
{
getOriginForCell = (cell) => {
var result = null;
if (cell != null)
{
if (cell != null) {
var parent = this.graph.getModel().getParent(cell);
var geo = this.graph.getCellGeometry(cell);
result = this.getOriginForCell(parent);
// TODO: Handle offsets
if (geo != null)
{
if (geo.relative)
{
if (geo != null) {
if (geo.relative) {
var pgeo = this.graph.getCellGeometry(parent);
if (pgeo != null)
{
if (pgeo != null) {
result.x += geo.x * pgeo.width;
result.y += geo.y * pgeo.height;
}
}
else
{
} else {
result.x += geo.x;
result.y += geo.y;
}
}
}
if (result == null)
{
if (result == null) {
var t = this.graph.view.getTranslate();
result = new mxPoint(-t.x, -t.y);
}
return result;
};
}
export default mxMorphing;

129
src/js/util/mxMouseEvent.js
View File

@ -2,47 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxMouseEvent
*
* Base class for all mouse events in mxGraph. A listener for this event should
* implement the following methods:
*
* (code)
* graph.addMouseListener(
* {
* mouseDown: (sender, evt)=>
* {
* mxLog.debug('mouseDown');
* },
* mouseMove: (sender, evt)=>
* {
* mxLog.debug('mouseMove');
* },
* mouseUp: (sender, evt)=>
* {
* mxLog.debug('mouseUp');
* }
* });
* (end)
*
* Constructor: mxMouseEvent
*
* Constructs a new event object for the given arguments.
*
* Parameters:
*
* evt - Native mouse event.
* state - Optional <mxCellState> under the mouse.
*
*/
function mxMouseEvent(evt, state)
{
this.evt = evt;
this.state = state;
this.sourceState = state;
};
class mxMouseEvent {
/**
* Variable: consumed
*
@ -88,13 +49,52 @@ state = null;
*/
sourceState = null;
/**
* Class: mxMouseEvent
*
* Base class for all mouse events in mxGraph. A listener for this event should
* implement the following methods:
*
* (code)
* graph.addMouseListener(
* {
* mouseDown: (sender, evt)=>
* {
* mxLog.debug('mouseDown');
* },
* mouseMove: (sender, evt)=>
* {
* mxLog.debug('mouseMove');
* },
* mouseUp: (sender, evt)=>
* {
* mxLog.debug('mouseUp');
* }
* });
* (end)
*
* Constructor: mxMouseEvent
*
* Constructs a new event object for the given arguments.
*
* Parameters:
*
* evt - Native mouse event.
* state - Optional <mxCellState> under the mouse.
*
*/
constructor(evt, state) {
this.evt = evt;
this.state = state;
this.sourceState = state;
};
/**
* Function: getEvent
*
* Returns <evt>.
*/
getEvent = ()=>
{
getEvent = () => {
return this.evt;
};
@ -103,8 +103,7 @@ getEvent = ()=>
*
* Returns the target DOM element using <mxEvent.getSource> for <evt>.
*/
getSource = ()=>
{
getSource = () => {
return mxEvent.getSource(this.evt);
};
@ -113,10 +112,8 @@ getSource = ()=>
*
* Returns true if the given <mxShape> is the source of <evt>.
*/
isSource = (shape)=>
{
if (shape != null)
{
isSource = (shape) => {
if (shape != null) {
return mxUtils.isAncestorNode(shape.node, this.getSource());
}
@ -128,8 +125,7 @@ isSource = (shape)=>
*
* Returns <evt.clientX>.
*/
getX = ()=>
{
getX = () => {
return mxEvent.getClientX(this.getEvent());
};
@ -138,8 +134,7 @@ getX = ()=>
*
* Returns <evt.clientY>.
*/
getY = ()=>
{
getY = () => {
return mxEvent.getClientY(this.getEvent());
};
@ -148,8 +143,7 @@ getY = ()=>
*
* Returns <graphX>.
*/
getGraphX = ()=>
{
getGraphX = () => {
return this.graphX;
};
@ -158,8 +152,7 @@ getGraphX = ()=>
*
* Returns <graphY>.
*/
getGraphY = ()=>
{
getGraphY = () => {
return this.graphY;
};
@ -168,8 +161,7 @@ getGraphY = ()=>
*
* Returns <state>.
*/
getState = ()=>
{
getState = () => {
return this.state;
};
@ -178,12 +170,10 @@ getState = ()=>
*
* Returns the <mxCell> in <state> is not null.
*/
getCell = ()=>
{
getCell = () => {
var state = this.getState();
if (state != null)
{
if (state != null) {
return state.cell;
}
@ -195,8 +185,7 @@ getCell = ()=>
*
* Returns true if the event is a popup trigger.
*/
isPopupTrigger = ()=>
{
isPopupTrigger = () => {
return mxEvent.isPopupTrigger(this.getEvent());
};
@ -205,8 +194,7 @@ isPopupTrigger = ()=>
*
* Returns <consumed>.
*/
isConsumed = ()=>
{
isConsumed = () => {
return this.consumed;
};
@ -223,16 +211,17 @@ isConsumed = ()=>
* preventDefault - Specifies if the native event should be canceled. Default
* is true.
*/
consume = (preventDefault)=>
{
consume = (preventDefault) => {
preventDefault = (preventDefault != null) ? preventDefault :
(this.evt.touches != null || mxEvent.isMouseEvent(this.evt));
if (preventDefault && this.evt.preventDefault)
{
if (preventDefault && this.evt.preventDefault) {
this.evt.preventDefault();
}
// Sets local consumed state
this.consumed = true;
};
}
export default mxMouseEvent;

29
src/js/util/mxObjectIdentity.js
View File

@ -2,8 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
var mxObjectIdentity =
{
var mxObjectIdentity = {
/**
* Class: mxObjectIdentity
*
@ -33,19 +33,13 @@ var mxObjectIdentity =
* Returns the ID for the given object or function or null if no object
* is specified.
*/
get: (obj)=>
{
if (obj != null)
{
if (obj[mxObjectIdentity.FIELD_NAME] == null)
{
if (typeof obj === 'object')
{
get: (obj) => {
if (obj != null) {
if (obj[mxObjectIdentity.FIELD_NAME] == null) {
if (typeof obj === 'object') {
var ctor = mxUtils.getFunctionName(obj.constructor);
obj[mxObjectIdentity.FIELD_NAME] = ctor + '#' + mxObjectIdentity.counter++;
}
else if (typeof obj === 'function')
{
} else if (typeof obj === 'function') {
obj[mxObjectIdentity.FIELD_NAME] = 'Function#' + mxObjectIdentity.counter++;
}
}
@ -61,12 +55,11 @@ var mxObjectIdentity =
*
* Deletes the ID from the given object or function.
*/
clear: (obj)=>
{
if (typeof(obj) === 'object' || typeof obj === 'function')
{
clear: (obj) => {
if (typeof (obj) === 'object' || typeof obj === 'function') {
delete obj[mxObjectIdentity.FIELD_NAME];
}
}
};
export default mxObjectIdentity;

423
src/js/util/mxPanningManager.js
View File

@ -2,240 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxPanningManager
*
* Implements a handler for panning.
*/
function mxPanningManager(graph)
{
this.thread = null;
this.active = false;
this.tdx = 0;
this.tdy = 0;
this.t0x = 0;
this.t0y = 0;
this.dx = 0;
this.dy = 0;
this.scrollbars = false;
this.scrollLeft = 0;
this.scrollTop = 0;
this.mouseListener =
{
mouseDown: (sender, me)=> { },
mouseMove: (sender, me)=> { },
mouseUp: mxUtils.bind(this, (sender, me)=>
{
if (this.active)
{
this.stop();
}
})
};
graph.addMouseListener(this.mouseListener);
this.mouseUpListener = mxUtils.bind(this, ()=>
{
if (this.active)
{
this.stop();
}
});
// Stops scrolling on every mouseup anywhere in the document
mxEvent.addListener(document, 'mouseup', this.mouseUpListener);
var createThread = mxUtils.bind(this, ()=>
{
this.scrollbars = mxUtils.hasScrollbars(graph.container);
this.scrollLeft = graph.container.scrollLeft;
this.scrollTop = graph.container.scrollTop;
return window.setInterval(mxUtils.bind(this, ()=>
{
this.tdx -= this.dx;
this.tdy -= this.dy;
if (this.scrollbars)
{
var left = -graph.container.scrollLeft - Math.ceil(this.dx);
var top = -graph.container.scrollTop - Math.ceil(this.dy);
graph.panGraph(left, top);
graph.panDx = this.scrollLeft - graph.container.scrollLeft;
graph.panDy = this.scrollTop - graph.container.scrollTop;
graph.fireEvent(new mxEventObject(mxEvent.PAN));
// TODO: Implement graph.autoExtend
}
else
{
graph.panGraph(this.getDx(), this.getDy());
}
}), this.delay);
});
this.isActive = ()=>
{
return active;
};
this.getDx = ()=>
{
return Math.round(this.tdx);
};
this.getDy = ()=>
{
return Math.round(this.tdy);
};
this.start = ()=>
{
this.t0x = graph.view.translate.x;
this.t0y = graph.view.translate.y;
this.active = true;
};
this.panTo = (x, y, w, h)=>
{
if (!this.active)
{
this.start();
}
this.scrollLeft = graph.container.scrollLeft;
this.scrollTop = graph.container.scrollTop;
w = (w != null) ? w : 0;
h = (h != null) ? h : 0;
var c = graph.container;
this.dx = x + w - c.scrollLeft - c.clientWidth;
if (this.dx < 0 && Math.abs(this.dx) < this.border)
{
this.dx = this.border + this.dx;
}
else if (this.handleMouseOut)
{
this.dx = Math.max(this.dx, 0);
}
else
{
this.dx = 0;
}
if (this.dx == 0)
{
this.dx = x - c.scrollLeft;
if (this.dx > 0 && this.dx < this.border)
{
this.dx = this.dx - this.border;
}
else if (this.handleMouseOut)
{
this.dx = Math.min(0, this.dx);
}
else
{
this.dx = 0;
}
}
this.dy = y + h - c.scrollTop - c.clientHeight;
if (this.dy < 0 && Math.abs(this.dy) < this.border)
{
this.dy = this.border + this.dy;
}
else if (this.handleMouseOut)
{
this.dy = Math.max(this.dy, 0);
}
else
{
this.dy = 0;
}
if (this.dy == 0)
{
this.dy = y - c.scrollTop;
if (this.dy > 0 && this.dy < this.border)
{
this.dy = this.dy - this.border;
}
else if (this.handleMouseOut)
{
this.dy = Math.min(0, this.dy);
}
else
{
this.dy = 0;
}
}
if (this.dx != 0 || this.dy != 0)
{
this.dx *= this.damper;
this.dy *= this.damper;
if (this.thread == null)
{
this.thread = createThread();
}
}
else if (this.thread != null)
{
window.clearInterval(this.thread);
this.thread = null;
}
};
this.stop = ()=>
{
if (this.active)
{
this.active = false;
if (this.thread != null)
{
window.clearInterval(this.thread);
this.thread = null;
}
this.tdx = 0;
this.tdy = 0;
if (!this.scrollbars)
{
var px = graph.panDx;
var py = graph.panDy;
if (px != 0 || py != 0)
{
graph.panGraph(0, 0);
graph.view.setTranslate(this.t0x + px / graph.view.scale, this.t0y + py / graph.view.scale);
}
}
else
{
graph.panDx = 0;
graph.panDy = 0;
graph.fireEvent(new mxEventObject(mxEvent.PAN));
}
}
};
this.destroy = ()=>
{
graph.removeMouseListener(this.mouseListener);
mxEvent.removeListener(document, 'mouseup', this.mouseUpListener);
};
};
class mxPanningManager {
/**
* Variable: damper
*
@ -263,3 +31,192 @@ handleMouseOut = true;
* Border to handle automatic panning inside the component. Default is 0 (disabled).
*/
border = 0;
/**
* Class: mxPanningManager
*
* Implements a handler for panning.
*/
constructor(graph) {
this.thread = null;
this.active = false;
this.tdx = 0;
this.tdy = 0;
this.t0x = 0;
this.t0y = 0;
this.dx = 0;
this.dy = 0;
this.scrollbars = false;
this.scrollLeft = 0;
this.scrollTop = 0;
this.mouseListener =
{
mouseDown: (sender, me) => {
},
mouseMove: (sender, me) => {
},
mouseUp: mxUtils.bind(this, (sender, me) => {
if (this.active) {
this.stop();
}
})
};
graph.addMouseListener(this.mouseListener);
this.mouseUpListener = mxUtils.bind(this, () => {
if (this.active) {
this.stop();
}
});
// Stops scrolling on every mouseup anywhere in the document
mxEvent.addListener(document, 'mouseup', this.mouseUpListener);
var createThread = mxUtils.bind(this, () => {
this.scrollbars = mxUtils.hasScrollbars(graph.container);
this.scrollLeft = graph.container.scrollLeft;
this.scrollTop = graph.container.scrollTop;
return window.setInterval(mxUtils.bind(this, () => {
this.tdx -= this.dx;
this.tdy -= this.dy;
if (this.scrollbars) {
var left = -graph.container.scrollLeft - Math.ceil(this.dx);
var top = -graph.container.scrollTop - Math.ceil(this.dy);
graph.panGraph(left, top);
graph.panDx = this.scrollLeft - graph.container.scrollLeft;
graph.panDy = this.scrollTop - graph.container.scrollTop;
graph.fireEvent(new mxEventObject(mxEvent.PAN));
// TODO: Implement graph.autoExtend
} else {
graph.panGraph(this.getDx(), this.getDy());
}
}), this.delay);
});
this.isActive = () => {
return active;
};
this.getDx = () => {
return Math.round(this.tdx);
};
this.getDy = () => {
return Math.round(this.tdy);
};
this.start = () => {
this.t0x = graph.view.translate.x;
this.t0y = graph.view.translate.y;
this.active = true;
};
this.panTo = (x, y, w, h) => {
if (!this.active) {
this.start();
}
this.scrollLeft = graph.container.scrollLeft;
this.scrollTop = graph.container.scrollTop;
w = (w != null) ? w : 0;
h = (h != null) ? h : 0;
var c = graph.container;
this.dx = x + w - c.scrollLeft - c.clientWidth;
if (this.dx < 0 && Math.abs(this.dx) < this.border) {
this.dx = this.border + this.dx;
} else if (this.handleMouseOut) {
this.dx = Math.max(this.dx, 0);
} else {
this.dx = 0;
}
if (this.dx == 0) {
this.dx = x - c.scrollLeft;
if (this.dx > 0 && this.dx < this.border) {
this.dx = this.dx - this.border;
} else if (this.handleMouseOut) {
this.dx = Math.min(0, this.dx);
} else {
this.dx = 0;
}
}
this.dy = y + h - c.scrollTop - c.clientHeight;
if (this.dy < 0 && Math.abs(this.dy) < this.border) {
this.dy = this.border + this.dy;
} else if (this.handleMouseOut) {
this.dy = Math.max(this.dy, 0);
} else {
this.dy = 0;
}
if (this.dy == 0) {
this.dy = y - c.scrollTop;
if (this.dy > 0 && this.dy < this.border) {
this.dy = this.dy - this.border;
} else if (this.handleMouseOut) {
this.dy = Math.min(0, this.dy);
} else {
this.dy = 0;
}
}
if (this.dx != 0 || this.dy != 0) {
this.dx *= this.damper;
this.dy *= this.damper;
if (this.thread == null) {
this.thread = createThread();
}
} else if (this.thread != null) {
window.clearInterval(this.thread);
this.thread = null;
}
};
this.stop = () => {
if (this.active) {
this.active = false;
if (this.thread != null) {
window.clearInterval(this.thread);
this.thread = null;
}
this.tdx = 0;
this.tdy = 0;
if (!this.scrollbars) {
var px = graph.panDx;
var py = graph.panDy;
if (px != 0 || py != 0) {
graph.panGraph(0, 0);
graph.view.setTranslate(this.t0x + px / graph.view.scale, this.t0y + py / graph.view.scale);
}
} else {
graph.panDx = 0;
graph.panDy = 0;
graph.fireEvent(new mxEventObject(mxEvent.PAN));
}
}
};
this.destroy = () => {
graph.removeMouseListener(this.mouseListener);
mxEvent.removeListener(document, 'mouseup', this.mouseUpListener);
};
};
}
export default mxPanningManager;

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

@ -2,6 +2,10 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxUtils from "../util/mxUtils";
class mxPoint {
/**
* Class: mxPoint
*
@ -12,8 +16,7 @@
* Constructs a new point for the optional x and y coordinates. If no
* coordinates are given, then the default values for <x> and <y> are used.
*/
function mxPoint(x, y)
{
constructor(x, y) {
this.x = (x != null) ? x : 0;
this.y = (y != null) ? y : 0;
};
@ -37,8 +40,7 @@ y = null;
*
* Returns true if the given object equals this point.
*/
equals = (obj)=>
{
equals = (obj) => {
return obj != null && obj.x == this.x && obj.y == this.y;
};
@ -47,8 +49,10 @@ equals = (obj)=>
*
* Returns a clone of this <mxPoint>.
*/
clone = ()=>
{
clone = () => {
// Handles subclasses as well
return mxUtils.clone(this);
};
}
export default mxPoint;

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

@ -2,6 +2,11 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxEventSource from "./mxEventSource";
import mxUtils from "./mxUtils";
import mxEventObject from "./mxEventObject";
class mxPopupMenu extends mxEventSource {
/**
* Class: mxPopupMenu
*
@ -28,22 +33,14 @@
*
* Fires after the menu has been shown in <popup>.
*/
function mxPopupMenu(factoryMethod)
{
constructor(factoryMethod) {
this.factoryMethod = factoryMethod;
if (factoryMethod != null)
{
if (factoryMethod != null) {
this.init();
}
};
/**
* Extends mxEventSource.
*/
mxPopupMenu.prototype = new mxEventSource();
constructor = mxPopupMenu;
/**
* Variable: submenuImage
*
@ -116,8 +113,7 @@ labels = true;
*
* Initializes the shapes required for this vertex handler.
*/
init = ()=>
{
init = () => {
// Adds the inner table
this.table = document.createElement('table');
this.table.className = 'mxPopupMenu';
@ -142,8 +138,7 @@ init = ()=>
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = ()=>
{
isEnabled = () => {
return this.enabled;
};
@ -153,8 +148,7 @@ isEnabled = ()=>
* Enables or disables event handling. This implementation
* updates <enabled>.
*/
setEnabled = (enabled)=>
{
setEnabled = (enabled) => {
this.enabled = enabled;
};
@ -168,8 +162,7 @@ setEnabled = (enabled)=>
*
* me - <mxMouseEvent> that represents the mouse event.
*/
isPopupTrigger = (me)=>
{
isPopupTrigger = (me) => {
return me.isPopupTrigger() || (this.useLeftButtonForPopup && mxEvent.isLeftMouseButton(me.getEvent()));
};
@ -194,16 +187,13 @@ isPopupTrigger = (me)=>
* Default is true.
* noHover - Optional boolean to disable hover state.
*/
addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
{
addItem = (title, image, funct, parent, iconCls, enabled, active, noHover) => {
parent = parent || this;
this.itemCount++;
// Smart separators only added if element contains items
if (parent.willAddSeparator)
{
if (parent.containsItems)
{
if (parent.willAddSeparator) {
if (parent.containsItems) {
this.addSeparator(parent, true);
}
@ -217,14 +207,11 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
col1.className = 'mxPopupMenuIcon';
// Adds the given image into the first column
if (image != null)
{
if (image != null) {
var img = document.createElement('img');
img.src = image;
col1.appendChild(img);
}
else if (iconCls != null)
{
} else if (iconCls != null) {
var div = document.createElement('div');
div.className = iconCls;
col1.appendChild(div);
@ -232,8 +219,7 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
tr.appendChild(col1);
if (this.labels)
{
if (this.labels) {
var col2 = document.createElement('td');
col2.className = 'mxPopupMenuItem' +
((enabled != null && !enabled) ? ' mxDisabled' : '');
@ -250,32 +236,26 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
tr.appendChild(col3);
if (parent.div == null)
{
if (parent.div == null) {
this.createSubmenu(parent);
}
}
parent.tbody.appendChild(tr);
if (active != false && enabled != false)
{
if (active != false && enabled != false) {
var currentSelection = null;
mxEvent.addGestureListeners(tr,
mxUtils.bind(this, (evt)=>
{
mxUtils.bind(this, (evt) => {
this.eventReceiver = tr;
if (parent.activeRow != tr && parent.activeRow != parent)
{
if (parent.activeRow != null && parent.activeRow.div.parentNode != null)
{
if (parent.activeRow != tr && parent.activeRow != parent) {
if (parent.activeRow != null && parent.activeRow.div.parentNode != null) {
this.hideSubmenu(parent);
}
if (tr.div != null)
{
if (tr.div != null) {
this.showSubmenu(parent, tr);
parent.activeRow = tr;
}
@ -283,57 +263,44 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
mxEvent.consume(evt);
}),
mxUtils.bind(this, (evt)=>
{
if (parent.activeRow != tr && parent.activeRow != parent)
{
if (parent.activeRow != null && parent.activeRow.div.parentNode != null)
{
mxUtils.bind(this, (evt) => {
if (parent.activeRow != tr && parent.activeRow != parent) {
if (parent.activeRow != null && parent.activeRow.div.parentNode != null) {
this.hideSubmenu(parent);
}
if (this.autoExpand && tr.div != null)
{
if (this.autoExpand && tr.div != null) {
this.showSubmenu(parent, tr);
parent.activeRow = tr;
}
}
// Sets hover style because TR in IE doesn't have hover
if (!noHover)
{
if (!noHover) {
tr.className = 'mxPopupMenuItemHover';
}
}),
mxUtils.bind(this, (evt)=>
{
mxUtils.bind(this, (evt) => {
// EventReceiver avoids clicks on a submenu item
// which has just been shown in the mousedown
if (this.eventReceiver == tr)
{
if (parent.activeRow != tr)
{
if (this.eventReceiver == tr) {
if (parent.activeRow != tr) {
this.hideMenu();
}
// Workaround for lost current selection in page because of focus in IE
if (currentSelection != null)
{
if (currentSelection != null) {
// Workaround for "unspecified error" in IE8 standards
try
{
try {
currentSelection.select();
}
catch (e)
{
} catch (e) {
// ignore
}
currentSelection = null;
}
if (funct != null)
{
if (funct != null) {
funct(evt);
}
}
@ -344,11 +311,9 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
);
// Resets hover style because TR in IE doesn't have hover
if (!noHover)
{
if (!noHover) {
mxEvent.addListener(tr, 'mouseout',
mxUtils.bind(this, (evt)=>
{
mxUtils.bind(this, (evt) => {
tr.className = 'mxPopupMenuItem';
})
);
@ -361,8 +326,7 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
/**
* Adds a checkmark to the given menuitem.
*/
addCheckmark = (item, img)=>
{
addCheckmark = (item, img) => {
var td = item.firstChild.nextSibling;
td.style.backgroundImage = 'url(\'' + img + '\')';
td.style.backgroundRepeat = 'no-repeat';
@ -380,8 +344,7 @@ addCheckmark = (item, img)=>
*
* parent - An item returned by <addItem>.
*/
createSubmenu = (parent)=>
{
createSubmenu = (parent) => {
parent.table = document.createElement('table');
parent.table.className = 'mxPopupMenu';
@ -410,10 +373,8 @@ createSubmenu = (parent)=>
*
* Shows the submenu inside the given parent row.
*/
showSubmenu = (parent, row)=>
{
if (row.div != null)
{
showSubmenu = (parent, row) => {
if (row.div != null) {
row.div.style.left = (parent.div.offsetLeft +
row.offsetLeft + row.offsetWidth - 1) + 'px';
row.div.style.top = (parent.div.offsetTop + row.offsetTop) + 'px';
@ -429,8 +390,7 @@ showSubmenu = (parent, row)=>
var right = offset.x + (b.clientWidth || d.clientWidth);
if (left + width > right)
{
if (left + width > right) {
row.div.style.left = Math.max(0, (parent.div.offsetLeft - width - 6)) + 'px';
}
@ -449,16 +409,12 @@ showSubmenu = (parent, row)=>
* parent - Optional item returned by <addItem>.
* force - Optional boolean to ignore <smartSeparators>. Default is false.
*/
addSeparator = (parent, force)=>
{
addSeparator = (parent, force) => {
parent = parent || this;
if (this.smartSeparators && !force)
{
if (this.smartSeparators && !force) {
parent.willAddSeparator = true;
}
else if (parent.tbody != null)
{
} else if (parent.tbody != null) {
parent.willAddSeparator = false;
var tr = document.createElement('tr');
@ -496,16 +452,13 @@ addSeparator = (parent, force)=>
* }
* (end)
*/
popup = (x, y, cell, evt)=>
{
if (this.div != null && this.tbody != null && this.factoryMethod != null)
{
popup = (x, y, cell, evt) => {
if (this.div != null && this.tbody != null && this.factoryMethod != null) {
this.div.style.left = x + 'px';
this.div.style.top = y + 'px';
// Removes all child nodes from the existing menu
while (this.tbody.firstChild != null)
{
while (this.tbody.firstChild != null) {
mxEvent.release(this.tbody.firstChild);
this.tbody.removeChild(this.tbody.firstChild);
}
@ -513,8 +466,7 @@ popup = (x, y, cell, evt)=>
this.itemCount = 0;
this.factoryMethod(this, cell, evt);
if (this.itemCount > 0)
{
if (this.itemCount > 0) {
this.showMenu();
this.fireEvent(new mxEventObject(mxEvent.SHOW));
}
@ -526,8 +478,7 @@ popup = (x, y, cell, evt)=>
*
* Returns true if the menu is showing.
*/
isMenuShowing = ()=>
{
isMenuShowing = () => {
return this.div != null && this.div.parentNode == document.body;
};
@ -536,8 +487,7 @@ isMenuShowing = ()=>
*
* Shows the menu.
*/
showMenu = ()=>
{
showMenu = () => {
// Fits the div inside the viewport
document.body.appendChild(this.div);
mxUtils.fit(this.div);
@ -548,12 +498,9 @@ showMenu = ()=>
*
* Removes the menu and all submenus.
*/
hideMenu = ()=>
{
if (this.div != null)
{
if (this.div.parentNode != null)
{
hideMenu = () => {
if (this.div != null) {
if (this.div.parentNode != null) {
this.div.parentNode.removeChild(this.div);
}
@ -572,14 +519,11 @@ hideMenu = ()=>
*
* parent - An item returned by <addItem>.
*/
hideSubmenu = (parent)=>
{
if (parent.activeRow != null)
{
hideSubmenu = (parent) => {
if (parent.activeRow != null) {
this.hideSubmenu(parent.activeRow);
if (parent.activeRow.div.parentNode != null)
{
if (parent.activeRow.div.parentNode != null) {
parent.activeRow.div.parentNode.removeChild(parent.activeRow.div);
}
@ -592,17 +536,17 @@ hideSubmenu = (parent)=>
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = ()=>
{
if (this.div != null)
{
destroy = () => {
if (this.div != null) {
mxEvent.release(this.div);
if (this.div.parentNode != null)
{
if (this.div.parentNode != null) {
this.div.parentNode.removeChild(this.div);
}
this.div = null;
}
};
}
export default mxPopupMenu;

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

@ -13,20 +13,16 @@
* Constructs a new rectangle for the optional parameters. If no parameters
* are given then the respective default values are used.
*/
function mxRectangle(x, y, width, height)
{
mxPoint.call(this, x, y);
import mxPoint from "./mxPoint";
class mxRectangle extends mxPoint {
constructor(x, y, width, height) {
super(x, y);
this.width = (width != null) ? width : 0;
this.height = (height != null) ? height : 0;
};
/**
* Extends mxPoint.
*/
mxRectangle.prototype = new mxPoint();
constructor = mxRectangle;
/**
* Variable: width
*
@ -46,8 +42,7 @@ height = null;
*
* Sets this rectangle to the specified values
*/
setRect = (x, y, w, h)=>
{
setRect = (x, y, w, h) => {
this.x = x;
this.y = y;
this.width = w;
@ -59,8 +54,7 @@ setRect = (x, y, w, h)=>
*
* Returns the x-coordinate of the center point.
*/
getCenterX = function ()
{
getCenterX = function () {
return this.x + this.width / 2;
};
@ -69,8 +63,7 @@ getCenterX = function ()
*
* Returns the y-coordinate of the center point.
*/
getCenterY = function ()
{
getCenterY = function () {
return this.y + this.height / 2;
};
@ -79,10 +72,8 @@ getCenterY = function ()
*
* Adds the given rectangle to this rectangle.
*/
add = (rect)=>
{
if (rect != null)
{
add = (rect) => {
if (rect != null) {
var minX = Math.min(this.x, rect.x);
var minY = Math.min(this.y, rect.y);
var maxX = Math.max(this.x + this.width, rect.x + rect.width);
@ -100,10 +91,8 @@ add = (rect)=>
*
* Changes this rectangle to where it overlaps with the given rectangle.
*/
intersect = (rect)=>
{
if (rect != null)
{
intersect = (rect) => {
if (rect != null) {
var r1 = this.x + this.width;
var r2 = rect.x + rect.width;
@ -124,8 +113,7 @@ intersect = (rect)=>
* the given amount from the x- and y-coordinates and adds twice the amount
* to the width and height.
*/
grow = (amount)=>
{
grow = (amount) => {
this.x -= amount;
this.y -= amount;
this.width += 2 * amount;
@ -139,8 +127,7 @@ grow = (amount)=>
*
* Returns the top, left corner as a new <mxPoint>.
*/
getPoint = ()=>
{
getPoint = () => {
return new mxPoint(this.x, this.y);
};
@ -149,8 +136,7 @@ getPoint = ()=>
*
* Rotates this rectangle by 90 degree around its center point.
*/
rotate90 = ()=>
{
rotate90 = () => {
var t = (this.width - this.height) / 2;
this.x += t;
this.y -= t;
@ -164,8 +150,7 @@ rotate90 = ()=>
*
* Returns true if the given object equals this rectangle.
*/
equals = (obj)=>
{
equals = (obj) => {
return obj != null && obj.x == this.x && obj.y == this.y &&
obj.width == this.width && obj.height == this.height;
};
@ -175,7 +160,9 @@ equals = (obj)=>
*
* Returns a new <mxRectangle> which is a copy of the given rectangle.
*/
mxRectangle.fromRectangle = (rect)=>
{
static fromRectangle = (rect) => {
return new mxRectangle(rect.x, rect.y, rect.width, rect.height);
};
}
export default mxRectangle;

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

@ -448,3 +448,5 @@ var mxResources =
}
};
export default mxResources;

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

File diff suppressed because it is too large Load Diff

230
src/js/util/mxToolbar.js
View File

@ -2,36 +2,14 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxToolbar
*
* Creates a toolbar inside a given DOM node. The toolbar may contain icons,
* buttons and combo boxes.
*
* Event: mxEvent.SELECT
*
* Fires when an item was selected in the toolbar. The <code>function</code>
* property contains the function that was selected in <selectMode>.
*
* Constructor: mxToolbar
*
* Constructs a toolbar in the specified container.
*
* Parameters:
*
* container - DOM node that contains the toolbar.
*/
function mxToolbar(container)
{
this.container = container;
};
/**
* Extends mxEventSource.
*/
mxToolbar.prototype = new mxEventSource();
constructor = mxToolbar;
import mxUtils from "./mxUtils";
import mxPoint from "./mxPoint";
import mxPopupMenu from "./mxPopupMenu";
import mxEventSource from "./mxEventSource";
import mxEventObject from "./mxEventObject";
class mxToolbar extends mxEventSource {
/**
* Variable: container
*
@ -69,6 +47,29 @@ noReset = false;
*/
updateDefaultMode = true;
/**
* Class: mxToolbar
*
* Creates a toolbar inside a given DOM node. The toolbar may contain icons,
* buttons and combo boxes.
*
* Event: mxEvent.SELECT
*
* Fires when an item was selected in the toolbar. The <code>function</code>
* property contains the function that was selected in <selectMode>.
*
* Constructor: mxToolbar
*
* Constructs a toolbar in the specified container.
*
* Parameters:
*
* container - DOM node that contains the toolbar.
*/
constructor(container) {
this.container = container;
};
/**
* Function: addItem
*
@ -87,22 +88,17 @@ updateDefaultMode = true;
* factoryMethod - Optional factory method for popup menu, eg.
* (menu, evt, cell)=> { menu.addItem('Hello, World!'); }
*/
addItem = (title, icon, funct, pressedIcon, style, factoryMethod)=>
{
addItem = (title, icon, funct, pressedIcon, style, factoryMethod) => {
var img = document.createElement((icon != null) ? 'img' : 'button');
var initialClassName = style || ((factoryMethod != null) ?
'mxToolbarMode' : 'mxToolbarItem');
img.className = initialClassName;
img.setAttribute('src', icon);
if (title != null)
{
if (icon != null)
{
if (title != null) {
if (icon != null) {
img.setAttribute('title', title);
}
else
{
} else {
mxUtils.write(img, title);
}
}
@ -110,59 +106,45 @@ addItem = (title, icon, funct, pressedIcon, style, factoryMethod)=>
this.container.appendChild(img);
// Invokes the function on a click on the toolbar item
if (funct != null)
{
if (funct != null) {
mxEvent.addListener(img, 'click', funct);
if (mxClient.IS_TOUCH)
{
if (mxClient.IS_TOUCH) {
mxEvent.addListener(img, 'touchend', funct);
}
}
var mouseHandler = mxUtils.bind(this, (evt)=>
{
if (pressedIcon != null)
{
var mouseHandler = mxUtils.bind(this, (evt) => {
if (pressedIcon != null) {
img.setAttribute('src', icon);
}
else
{
} else {
img.style.backgroundColor = '';
}
});
// Highlights the toolbar item with a gray background
// while it is being clicked with the mouse
mxEvent.addGestureListeners(img, mxUtils.bind(this, (evt)=>
{
if (pressedIcon != null)
{
mxEvent.addGestureListeners(img, mxUtils.bind(this, (evt) => {
if (pressedIcon != null) {
img.setAttribute('src', pressedIcon);
}
else
{
} else {
img.style.backgroundColor = 'gray';
}
// Popup Menu
if (factoryMethod != null)
{
if (this.menu == null)
{
if (factoryMethod != null) {
if (this.menu == null) {
this.menu = new mxPopupMenu();
this.menu.init();
}
var last = this.currentImg;
if (this.menu.isMenuShowing())
{
if (this.menu.isMenuShowing()) {
this.menu.hideMenu();
}
if (last != img)
{
if (last != img) {
// Redirects factory method to local factory method
this.currentImg = img;
this.menu.factoryMethod = factoryMethod;
@ -173,12 +155,10 @@ addItem = (title, icon, funct, pressedIcon, style, factoryMethod)=>
this.menu.popup(point.x, point.y, null, evt);
// Sets and overrides to restore classname
if (this.menu.isMenuShowing())
{
if (this.menu.isMenuShowing()) {
img.className = initialClassName + 'Selected';
this.menu.hideMenu = ()=>
{
this.menu.hideMenu = () => {
hideMenu.apply(this);
img.className = initialClassName;
this.currentImg = null;
@ -203,8 +183,7 @@ addItem = (title, icon, funct, pressedIcon, style, factoryMethod)=>
*
* style - Optional style classname. Default is mxToolbarCombo.
*/
addCombo = (style)=>
{
addCombo = (style) => {
var div = document.createElement('div');
div.style.display = 'inline';
div.className = 'mxToolbarComboContainer';
@ -230,19 +209,16 @@ addCombo = (style)=>
* title - String that specifies the title of the default element.
* style - Optional style classname. Default is mxToolbarCombo.
*/
addActionCombo = (title, style)=>
{
addActionCombo = (title, style) => {
var select = document.createElement('select');
select.className = style || 'mxToolbarCombo';
this.addOption(select, title, null);
mxEvent.addListener(select, 'change', (evt)=>
{
mxEvent.addListener(select, 'change', (evt) => {
var value = select.options[select.selectedIndex];
select.selectedIndex = 0;
if (value.funct != null)
{
if (value.funct != null) {
value.funct(evt);
}
});
@ -265,17 +241,13 @@ addActionCombo = (title, style)=>
* title - String that specifies the title of the option.
* value - Specifies the value associated with this option.
*/
addOption = (combo, title, value)=>
{
addOption = (combo, title, value) => {
var option = document.createElement('option');
mxUtils.writeln(option, title);
if (typeof(value) == 'function')
{
if (typeof (value) == 'function') {
option.funct = value;
}
else
{
} else {
option.setAttribute('value', value);
}
@ -291,35 +263,28 @@ addOption = (combo, title, value)=>
* be selected at a time. The currently selected item is the default item
* after a reset of the toolbar.
*/
addSwitchMode = (title, icon, funct, pressedIcon, style)=>
{
addSwitchMode = (title, icon, funct, pressedIcon, style) => {
var img = document.createElement('img');
img.initialClassName = style || 'mxToolbarMode';
img.className = img.initialClassName;
img.setAttribute('src', icon);
img.altIcon = pressedIcon;
if (title != null)
{
if (title != null) {
img.setAttribute('title', title);
}
mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt)=>
{
mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt) => {
var tmp = this.selectedMode.altIcon;
if (tmp != null)
{
if (tmp != null) {
this.selectedMode.altIcon = this.selectedMode.getAttribute('src');
this.selectedMode.setAttribute('src', tmp);
}
else
{
} else {
this.selectedMode.className = this.selectedMode.initialClassName;
}
if (this.updateDefaultMode)
{
if (this.updateDefaultMode) {
this.defaultMode = img;
}
@ -327,13 +292,10 @@ addSwitchMode = (title, icon, funct, pressedIcon, style)=>
var tmp = img.altIcon;
if (tmp != null)
{
if (tmp != null) {
img.altIcon = img.getAttribute('src');
img.setAttribute('src', tmp);
}
else
{
} else {
img.className = img.initialClassName + 'Selected';
}
@ -343,8 +305,7 @@ addSwitchMode = (title, icon, funct, pressedIcon, style)=>
this.container.appendChild(img);
if (this.defaultMode == null)
{
if (this.defaultMode == null) {
this.defaultMode = img;
// Function should fire only once so
@ -366,8 +327,7 @@ addSwitchMode = (title, icon, funct, pressedIcon, style)=>
* The function argument uses the following signature: funct(evt, cell) where
* evt is the native mouse event and cell is the cell under the mouse.
*/
addMode = (title, icon, funct, pressedIcon, style, toggle)=>
{
addMode = (title, icon, funct, pressedIcon, style, toggle) => {
toggle = (toggle != null) ? toggle : true;
var img = document.createElement((icon != null) ? 'img' : 'button');
@ -376,27 +336,22 @@ addMode = (title, icon, funct, pressedIcon, style, toggle)=>
img.setAttribute('src', icon);
img.altIcon = pressedIcon;
if (title != null)
{
if (title != null) {
img.setAttribute('title', title);
}
if (this.enabled && toggle)
{
mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt)=>
{
if (this.enabled && toggle) {
mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt) => {
this.selectMode(img, funct);
this.noReset = false;
}));
mxEvent.addListener(img, 'dblclick', mxUtils.bind(this, (evt)=>
{
mxEvent.addListener(img, 'dblclick', mxUtils.bind(this, (evt) => {
this.selectMode(img, funct);
this.noReset = true;
}));
if (this.defaultMode == null)
{
if (this.defaultMode == null) {
this.defaultMode = img;
this.defaultFunction = funct;
this.selectMode(img, funct);
@ -415,21 +370,15 @@ addMode = (title, icon, funct, pressedIcon, style, toggle)=>
* DOM node as selected. This function fires a select event with the given
* function as a parameter.
*/
selectMode = (domNode, funct)=>
{
if (this.selectedMode != domNode)
{
if (this.selectedMode != null)
{
selectMode = (domNode, funct) => {
if (this.selectedMode != domNode) {
if (this.selectedMode != null) {
var tmp = this.selectedMode.altIcon;
if (tmp != null)
{
if (tmp != null) {
this.selectedMode.altIcon = this.selectedMode.getAttribute('src');
this.selectedMode.setAttribute('src', tmp);
}
else
{
} else {
this.selectedMode.className = this.selectedMode.initialClassName;
}
}
@ -437,13 +386,10 @@ selectMode = (domNode, funct)=>
this.selectedMode = domNode;
var tmp = this.selectedMode.altIcon;
if (tmp != null)
{
if (tmp != null) {
this.selectedMode.altIcon = this.selectedMode.getAttribute('src');
this.selectedMode.setAttribute('src', tmp);
}
else
{
} else {
this.selectedMode.className = this.selectedMode.initialClassName + 'Selected';
}
@ -457,10 +403,8 @@ selectMode = (domNode, funct)=>
* Selects the default mode and resets the state of the previously selected
* mode.
*/
resetMode = (forced)=>
{
if ((forced || !this.noReset) && this.selectedMode != this.defaultMode)
{
resetMode = (forced) => {
if ((forced || !this.noReset) && this.selectedMode != this.defaultMode) {
// The last selected switch mode will be activated
// so the function was already executed and is
// no longer required here
@ -477,8 +421,7 @@ resetMode = (forced)=>
*
* icon - URL of the separator icon.
*/
addSeparator = (icon)=>
{
addSeparator = (icon) => {
return this.addItem(null, icon, null);
};
@ -487,8 +430,7 @@ addSeparator = (icon)=>
*
* Adds a break to the container.
*/
addBreak = ()=>
{
addBreak = () => {
mxUtils.br(this.container);
};
@ -497,8 +439,7 @@ addBreak = ()=>
*
* Adds a horizontal line to the container.
*/
addLine = ()=>
{
addLine = () => {
var hr = document.createElement('hr');
hr.style.marginRight = '6px';
@ -512,16 +453,17 @@ addLine = ()=>
*
* Removes the toolbar and all its associated resources.
*/
destroy = function ()
{
destroy = function () {
mxEvent.release(this.container);
this.container = null;
this.defaultMode = null;
this.defaultFunction = null;
this.selectedMode = null;
if (this.menu != null)
{
if (this.menu != null) {
this.menu.destroy();
}
};
}
export default mxToolbar;

106
src/js/util/mxUndoManager.js
View File

@ -2,6 +2,33 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxEventObject from "./mxEventObject";
import mxEventSource from "./mxEventSource";
class mxUndoManager extends mxEventSource {
/**
* Variable: size
*
* Maximum command history size. 0 means unlimited history. Default is
* 100.
*/
size = null;
/**
* Variable: history
*
* Array that contains the steps of the command history.
*/
history = null;
/**
* Variable: indexOfNextAdd
*
* Index of the element to be added next.
*/
indexOfNextAdd = 0;
/**
* Class: mxUndoManager
*
@ -70,47 +97,17 @@
* Constructs a new undo manager with the given history size. If no history
* size is given, then a default size of 100 steps is used.
*/
function mxUndoManager(size)
{
constructor(size) {
this.size = (size != null) ? size : 100;
this.clear();
};
/**
* Extends mxEventSource.
*/
mxUndoManager.prototype = new mxEventSource();
constructor = mxUndoManager;
/**
* Variable: size
*
* Maximum command history size. 0 means unlimited history. Default is
* 100.
*/
size = null;
/**
* Variable: history
*
* Array that contains the steps of the command history.
*/
history = null;
/**
* Variable: indexOfNextAdd
*
* Index of the element to be added next.
*/
indexOfNextAdd = 0;
/**
* Function: isEmpty
*
* Returns true if the history is empty.
*/
isEmpty = ()=>
{
isEmpty = () => {
return this.history.length == 0;
};
@ -119,8 +116,7 @@ isEmpty = ()=>
*
* Clears the command history.
*/
clear = ()=>
{
clear = () => {
this.history = [];
this.indexOfNextAdd = 0;
this.fireEvent(new mxEventObject(mxEvent.CLEAR));
@ -131,8 +127,7 @@ clear = ()=>
*
* Returns true if an undo is possible.
*/
canUndo = ()=>
{
canUndo = () => {
return this.indexOfNextAdd > 0;
};
@ -141,15 +136,12 @@ canUndo = ()=>
*
* Undoes the last change.
*/
undo = ()=>
{
while (this.indexOfNextAdd > 0)
{
undo = () => {
while (this.indexOfNextAdd > 0) {
var edit = this.history[--this.indexOfNextAdd];
edit.undo();
if (edit.isSignificant())
{
if (edit.isSignificant()) {
this.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));
break;
}
@ -161,8 +153,7 @@ undo = ()=>
*
* Returns true if a redo is possible.
*/
canRedo = ()=>
{
canRedo = () => {
return this.indexOfNextAdd < this.history.length;
};
@ -171,17 +162,14 @@ canRedo = ()=>
*
* Redoes the last change.
*/
redo = ()=>
{
redo = () => {
var n = this.history.length;
while (this.indexOfNextAdd < n)
{
while (this.indexOfNextAdd < n) {
var edit = this.history[this.indexOfNextAdd++];
edit.redo();
if (edit.isSignificant())
{
if (edit.isSignificant()) {
this.fireEvent(new mxEventObject(mxEvent.REDO, 'edit', edit));
break;
}
@ -193,13 +181,11 @@ redo = ()=>
*
* Method to be called to add new undoable edits to the <history>.
*/
undoableEditHappened = (undoableEdit)=>
{
undoableEditHappened = (undoableEdit) => {
this.trim();
if (this.size > 0 &&
this.size == this.history.length)
{
this.size == this.history.length) {
this.history.shift();
}
@ -214,16 +200,16 @@ undoableEditHappened = (undoableEdit)=>
* Removes all pending steps after <indexOfNextAdd> from the history,
* invoking die on each edit. This is called from <undoableEditHappened>.
*/
trim = ()=>
{
if (this.history.length > this.indexOfNextAdd)
{
trim = () => {
if (this.history.length > this.indexOfNextAdd) {
var edits = this.history.splice(this.indexOfNextAdd,
this.history.length - this.indexOfNextAdd);
for (var i = 0; i < edits.length; i++)
{
for (var i = 0; i < edits.length; i++) {
edits[i].die();
}
}
};
}
export default mxUndoManager;

134
src/js/util/mxUndoableEdit.js
View File

@ -2,6 +2,49 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxEvent from "./mxEvent";
import mxEventObject from "./mxEventObject";
class mxUndoableEdit {
/**
* Variable: source
*
* Specifies the source of the edit.
*/
source = null;
/**
* Variable: changes
*
* Array that contains the changes that make up this edit. The changes are
* expected to either have an undo and redo function, or an execute
* function. Default is an empty array.
*/
changes = null;
/**
* Variable: significant
*
* Specifies if the undoable change is significant.
* Default is true.
*/
significant = null;
/**
* Variable: undone
*
* Specifies if this edit has been undone. Default is false.
*/
undone = false;
/**
* Variable: redone
*
* Specifies if this edit has been redone. Default is false.
*/
redone = false;
/**
* Class: mxUndoableEdit
*
@ -46,58 +89,18 @@
*
* Constructs a new undoable edit for the given source.
*/
function mxUndoableEdit(source, significant)
{
constructor(source, significant) {
this.source = source;
this.changes = [];
this.significant = (significant != null) ? significant : true;
};
/**
* Variable: source
*
* Specifies the source of the edit.
*/
source = null;
/**
* Variable: changes
*
* Array that contains the changes that make up this edit. The changes are
* expected to either have an undo and redo function, or an execute
* function. Default is an empty array.
*/
changes = null;
/**
* Variable: significant
*
* Specifies if the undoable change is significant.
* Default is true.
*/
significant = null;
/**
* Variable: undone
*
* Specifies if this edit has been undone. Default is false.
*/
undone = false;
/**
* Variable: redone
*
* Specifies if this edit has been redone. Default is false.
*/
redone = false;
/**
* Function: isEmpty
*
* Returns true if the this edit contains no changes.
*/
isEmpty = ()=>
{
isEmpty = () => {
return this.changes.length == 0;
};
@ -106,8 +109,7 @@ isEmpty = ()=>
*
* Returns <significant>.
*/
isSignificant = ()=>
{
isSignificant = () => {
return this.significant;
};
@ -117,8 +119,7 @@ isSignificant = ()=>
* Adds the specified change to this edit. The change is an object that is
* expected to either have an undo and redo, or an execute function.
*/
add = (change)=>
{
add = (change) => {
this.changes.push(change);
};
@ -128,7 +129,8 @@ add = (change)=>
* Hook to notify any listeners of the changes after an <undo> or <redo>
* has been carried out. This implementation is empty.
*/
notify = ()=> { };
notify = () => {
};
/**
* Function: die
@ -136,30 +138,25 @@ notify = ()=> { };
* Hook to free resources after the edit has been removed from the command
* history. This implementation is empty.
*/
die = ()=> { };
die = () => {
};
/**
* Function: undo
*
* Undoes all changes in this edit.
*/
undo = ()=>
{
if (!this.undone)
{
undo = () => {
if (!this.undone) {
this.source.fireEvent(new mxEventObject(mxEvent.START_EDIT));
var count = this.changes.length;
for (var i = count - 1; i >= 0; i--)
{
for (var i = count - 1; i >= 0; i--) {
var change = this.changes[i];
if (change.execute != null)
{
if (change.execute != null) {
change.execute();
}
else if (change.undo != null)
{
} else if (change.undo != null) {
change.undo();
}
@ -180,23 +177,17 @@ undo = ()=>
*
* Redoes all changes in this edit.
*/
redo = ()=>
{
if (!this.redone)
{
redo = () => {
if (!this.redone) {
this.source.fireEvent(new mxEventObject(mxEvent.START_EDIT));
var count = this.changes.length;
for (var i = 0; i < count; i++)
{
for (var i = 0; i < count; i++) {
var change = this.changes[i];
if (change.execute != null)
{
if (change.execute != null) {
change.execute();
}
else if (change.redo != null)
{
} else if (change.redo != null) {
change.redo();
}
@ -211,3 +202,6 @@ redo = ()=>
this.notify();
};
}
export default mxUndoableEdit;

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

@ -2,14 +2,15 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
class mxUrlConverter {
/**
*
* Class: mxUrlConverter
*
* Converts relative and absolute URLs to absolute URLs with protocol and domain.
*/
var mxUrlConverter = ()=>
{
constructor() {
// Empty constructor
};
@ -39,15 +40,13 @@ baseDomain = null;
*
* Private helper function to update the base URL.
*/
updateBaseUrl = ()=>
{
updateBaseUrl = () => {
this.baseDomain = location.protocol + '//' + location.host;
this.baseUrl = this.baseDomain + location.pathname;
var tmp = this.baseUrl.lastIndexOf('/');
// Strips filename etc
if (tmp > 0)
{
if (tmp > 0) {
this.baseUrl = this.baseUrl.substring(0, tmp + 1);
}
};
@ -57,8 +56,7 @@ updateBaseUrl = ()=>
*
* Returns <enabled>.
*/
isEnabled = ()=>
{
isEnabled = () => {
return this.enabled;
};
@ -67,8 +65,7 @@ isEnabled = ()=>
*
* Sets <enabled>.
*/
setEnabled = (value)=>
{
setEnabled = (value) => {
this.enabled = value;
};
@ -77,8 +74,7 @@ setEnabled = (value)=>
*
* Returns <baseUrl>.
*/
getBaseUrl = ()=>
{
getBaseUrl = () => {
return this.baseUrl;
};
@ -87,8 +83,7 @@ getBaseUrl = ()=>
*
* Sets <baseUrl>.
*/
setBaseUrl = (value)=>
{
setBaseUrl = (value) => {
this.baseUrl = value;
};
@ -97,8 +92,7 @@ setBaseUrl = (value)=>
*
* Returns <baseDomain>.
*/
getBaseDomain = ()=>
{
getBaseDomain = () => {
return this.baseDomain;
};
@ -107,8 +101,7 @@ getBaseDomain = ()=>
*
* Sets <baseDomain>.
*/
setBaseDomain = (value)=>
{
setBaseDomain = (value) => {
this.baseDomain = value;
};
@ -117,8 +110,7 @@ setBaseDomain = (value)=>
*
* Returns true if the given URL is relative.
*/
isRelativeUrl = (url)=>
{
isRelativeUrl = (url) => {
return url != null && url.substring(0, 2) != '//' && url.substring(0, 7) != 'http://' &&
url.substring(0, 8) != 'https://' && url.substring(0, 10) != 'data:image' &&
url.substring(0, 7) != 'file://';
@ -130,24 +122,21 @@ isRelativeUrl = (url)=>
* Converts the given URL to an absolute URL with protol and domain.
* Relative URLs are first converted to absolute URLs.
*/
convert = (url)=>
{
if (this.isEnabled() && this.isRelativeUrl(url))
{
if (this.getBaseUrl() == null)
{
convert = (url) => {
if (this.isEnabled() && this.isRelativeUrl(url)) {
if (this.getBaseUrl() == null) {
this.updateBaseUrl();
}
if (url.charAt(0) == '/')
{
if (url.charAt(0) == '/') {
url = this.getBaseDomain() + url;
}
else
{
} else {
url = this.getBaseUrl() + url;
}
}
return url;
};
}
export default mxUrlConverter;

414
src/js/util/mxWindow.js
View File

@ -2,6 +2,85 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxRectangle from "./mxRectangle";
import mxEventObject from "./mxEventObject";
import mxEventSource from "./mxEventSource";
import mxUtils from "./mxUtils";
class mxWindow extends mxEventSource {
/**
* Variable: closeImage
*
* URL of the image to be used for the close icon in the titlebar.
*/
closeImage = mxClient.imageBasePath + '/close.gif';
/**
* Variable: minimizeImage
*
* URL of the image to be used for the minimize icon in the titlebar.
*/
minimizeImage = mxClient.imageBasePath + '/minimize.gif';
/**
* Variable: normalizeImage
*
* URL of the image to be used for the normalize icon in the titlebar.
*/
normalizeImage = mxClient.imageBasePath + '/normalize.gif';
/**
* Variable: maximizeImage
*
* URL of the image to be used for the maximize icon in the titlebar.
*/
maximizeImage = mxClient.imageBasePath + '/maximize.gif';
/**
* Variable: resizeImage
*
* URL of the image to be used for the resize icon.
*/
resizeImage = mxClient.imageBasePath + '/resize.gif';
/**
* Variable: visible
*
* Boolean flag that represents the visible state of the window.
*/
visible = false;
/**
* Variable: minimumSize
*
* <mxRectangle> that specifies the minimum width and height of the window.
* Default is (50, 40).
*/
minimumSize = new mxRectangle(0, 0, 50, 40);
/**
* Variable: destroyOnClose
*
* Specifies if the window should be destroyed when it is closed. If this
* is false then the window is hidden using <setVisible>. Default is true.
*/
destroyOnClose = true;
/**
* Variable: title
*
* Reference to the DOM node (TD) that contains the title.
*/
title = null;
/**
* Variable: content
*
* Reference to the DOM node that represents the window content.
*/
content = null;
/**
* Class: mxWindow
*
@ -185,10 +264,8 @@
* style - Optional base classname for the window elements. Default is
* mxWindow.
*/
function mxWindow(title, content, x, y, width, height, minimizable, movable, replaceNode, style)
{
if (content != null)
{
constructor(title, content, x, y, width, height, minimizable, movable, replaceNode, style) {
if (content != null) {
minimizable = (minimizable != null) ? minimizable : true;
this.content = content;
this.init(x, y, width, height, style);
@ -199,107 +276,24 @@ function mxWindow(title, content, x, y, width, height, minimizable, movable, rep
this.setMinimizable(minimizable);
this.setTitle(title);
if (movable == null || movable)
{
if (movable == null || movable) {
this.installMoveHandler();
}
if (replaceNode != null && replaceNode.parentNode != null)
{
if (replaceNode != null && replaceNode.parentNode != null) {
replaceNode.parentNode.replaceChild(this.div, replaceNode);
}
else
{
} else {
document.body.appendChild(this.div);
}
}
};
/**
* Extends mxEventSource.
*/
mxWindow.prototype = new mxEventSource();
constructor = mxWindow;
/**
* Variable: closeImage
*
* URL of the image to be used for the close icon in the titlebar.
*/
closeImage = mxClient.imageBasePath + '/close.gif';
/**
* Variable: minimizeImage
*
* URL of the image to be used for the minimize icon in the titlebar.
*/
minimizeImage = mxClient.imageBasePath + '/minimize.gif';
/**
* Variable: normalizeImage
*
* URL of the image to be used for the normalize icon in the titlebar.
*/
normalizeImage = mxClient.imageBasePath + '/normalize.gif';
/**
* Variable: maximizeImage
*
* URL of the image to be used for the maximize icon in the titlebar.
*/
maximizeImage = mxClient.imageBasePath + '/maximize.gif';
/**
* Variable: resizeImage
*
* URL of the image to be used for the resize icon.
*/
resizeImage = mxClient.imageBasePath + '/resize.gif';
/**
* Variable: visible
*
* Boolean flag that represents the visible state of the window.
*/
visible = false;
/**
* Variable: minimumSize
*
* <mxRectangle> that specifies the minimum width and height of the window.
* Default is (50, 40).
*/
minimumSize = new mxRectangle(0, 0, 50, 40);
/**
* Variable: destroyOnClose
*
* Specifies if the window should be destroyed when it is closed. If this
* is false then the window is hidden using <setVisible>. Default is true.
*/
destroyOnClose = true;
/**
* Variable: title
*
* Reference to the DOM node (TD) that contains the title.
*/
title = null;
/**
* Variable: content
*
* Reference to the DOM node that represents the window content.
*/
content = null;
/**
* Function: init
*
* Initializes the DOM tree that represents the window.
*/
init = (x, y, width, height, style)=>
{
init = (x, y, width, height, style) => {
style = (style != null) ? style : 'mxWindow';
this.div = document.createElement('div');
@ -311,20 +305,17 @@ init = (x, y, width, height, style)=>
this.table.className = style;
// Disables built-in pan and zoom in IE10 and later
if (mxClient.IS_POINTER)
{
if (mxClient.IS_POINTER) {
this.div.style.touchAction = 'none';
}
// Workaround for table size problems in FF
if (width != null)
{
if (width != null) {
this.div.style.width = width + 'px';
this.table.style.width = width + 'px';
}
if (height != null)
{
if (height != null) {
this.div.style.height = height + 'px';
this.table.style.height = height + 'px';
}
@ -358,8 +349,7 @@ init = (x, y, width, height, style)=>
// Workaround for div around div restricts height
// of inner div if outerdiv has hidden overflow
if (this.content.nodeName.toUpperCase() != 'DIV')
{
if (this.content.nodeName.toUpperCase() !== 'DIV') {
this.contentWrapper.style.height = '100%';
}
@ -371,8 +361,7 @@ init = (x, y, width, height, style)=>
this.div.appendChild(this.table);
// Puts the window on top of other windows when clicked
var activator = mxUtils.bind(this, (evt)=>
{
var activator = mxUtils.bind(this, (evt) => {
this.activate();
});
@ -388,17 +377,14 @@ init = (x, y, width, height, style)=>
* Sets the window title to the given string. HTML markup inside the title
* will be escaped.
*/
setTitle = (title)=>
{
setTitle = (title) => {
// Removes all text content nodes (normally just one)
var child = this.title.firstChild;
while (child != null)
{
while (child != null) {
var next = child.nextSibling;
if (child.nodeType == mxConstants.NODETYPE_TEXT)
{
if (child.nodeType === mxConstants.NODETYPE_TEXT) {
child.parentNode.removeChild(child);
}
@ -414,18 +400,13 @@ setTitle = (title)=>
*
* Sets if the window contents should be scrollable.
*/
setScrollable = (scrollable)=>
{
setScrollable = (scrollable) => {
// Workaround for hang in Presto 2.5.22 (Opera 10.5)
if (navigator.userAgent == null ||
navigator.userAgent.indexOf('Presto/2.5') < 0)
{
if (scrollable)
{
navigator.userAgent.indexOf('Presto/2.5') < 0) {
if (scrollable) {
this.contentWrapper.style.overflow = 'auto';
}
else
{
} else {
this.contentWrapper.style.overflow = 'hidden';
}
}
@ -436,19 +417,15 @@ setScrollable = (scrollable)=>
*
* Puts the window on top of all other windows.
*/
activate = ()=>
{
if (mxWindow.activeWindow != this)
{
activate = () => {
if (mxWindow.activeWindow !== this) {
var style = mxUtils.getCurrentStyle(this.getElement());
var index = (style != null) ? style.zIndex : 3;
if (mxWindow.activeWindow)
{
if (mxWindow.activeWindow) {
var elt = mxWindow.activeWindow.getElement();
if (elt != null && elt.style != null)
{
if (elt != null && elt.style != null) {
elt.style.zIndex = index;
}
}
@ -466,8 +443,7 @@ activate = ()=>
*
* Returuns the outermost DOM node that makes up the window.
*/
getElement = ()=>
{
getElement = () => {
return this.div;
};
@ -476,8 +452,7 @@ getElement = ()=>
*
* Makes sure the window is inside the client area of the window.
*/
fit = ()=>
{
fit = () => {
mxUtils.fit(this.div);
};
@ -486,10 +461,8 @@ fit = ()=>
*
* Returns true if the window is resizable.
*/
isResizable = ()=>
{
if (this.resize != null)
{
isResizable = () => {
if (this.resize != null) {
return this.resize.style.display != 'none';
}
@ -510,12 +483,9 @@ isResizable = ()=>
* }
* (end)
*/
setResizable = (resizable)=>
{
if (resizable)
{
if (this.resize == null)
{
setResizable = (resizable) => {
if (resizable) {
if (this.resize == null) {
this.resize = document.createElement('img');
this.resize.style.position = 'absolute';
this.resize.style.bottom = '2px';
@ -529,8 +499,7 @@ setResizable = (resizable)=>
var width = null;
var height = null;
var start = mxUtils.bind(this, (evt)=>
{
var start = mxUtils.bind(this, (evt) => {
// LATER: pointerdown starting on border of resize does start
// the drag operation but does not fire consecutive events via
// one of the listeners below (does pan instead).
@ -548,10 +517,8 @@ setResizable = (resizable)=>
// Adds a temporary pair of listeners to intercept
// the gesture event in the document
var dragHandler = mxUtils.bind(this, (evt)=>
{
if (startX != null && startY != null)
{
var dragHandler = mxUtils.bind(this, (evt) => {
if (startX != null && startY != null) {
var dx = mxEvent.getClientX(evt) - startX;
var dy = mxEvent.getClientY(evt) - startY;
@ -562,10 +529,8 @@ setResizable = (resizable)=>
}
});
var dropHandler = mxUtils.bind(this, (evt)=>
{
if (startX != null && startY != null)
{
var dropHandler = mxUtils.bind(this, (evt) => {
if (startX != null && startY != null) {
startX = null;
startY = null;
mxEvent.removeGestureListeners(document, null, dragHandler, dropHandler);
@ -576,14 +541,10 @@ setResizable = (resizable)=>
mxEvent.addGestureListeners(this.resize, start, dragHandler, dropHandler);
this.div.appendChild(this.resize);
}
else
{
} else {
this.resize.style.display = 'inline';
}
}
else if (this.resize != null)
{
} else if (this.resize != null) {
this.resize.style.display = 'none';
}
};
@ -593,8 +554,7 @@ setResizable = (resizable)=>
*
* Sets the size of the window.
*/
setSize = (width, height)=>
{
setSize = (width, height) => {
width = Math.max(this.minimumSize.width, width);
height = Math.max(this.minimumSize.height, height);
@ -614,8 +574,7 @@ setSize = (width, height)=>
*
* Sets if the window is minimizable.
*/
setMinimizable = (minimizable)=>
{
setMinimizable = (minimizable) => {
this.minimize.style.display = (minimizable) ? '' : 'none';
};
@ -626,8 +585,7 @@ setMinimizable = (minimizable)=>
* A width or height of 0 means keep the existing width or height. This
* implementation returns the height of the window title and keeps the width.
*/
getMinimumSize = ()=>
{
getMinimumSize = () => {
return new mxRectangle(0, 0, 0, this.title.offsetHeight);
};
@ -636,8 +594,7 @@ getMinimumSize = ()=>
*
* Installs the event listeners required for minimizing the window.
*/
installMinimizeHandler = ()=>
{
installMinimizeHandler = () => {
this.minimize = document.createElement('img');
this.minimize.setAttribute('src', this.minimizeImage);
@ -652,12 +609,10 @@ installMinimizeHandler = ()=>
var maxDisplay = null;
var height = null;
var funct = mxUtils.bind(this, (evt)=>
{
var funct = mxUtils.bind(this, (evt) => {
this.activate();
if (!minimized)
{
if (!minimized) {
minimized = true;
this.minimize.setAttribute('src', this.normalizeImage);
@ -670,27 +625,22 @@ installMinimizeHandler = ()=>
var minSize = this.getMinimumSize();
if (minSize.height > 0)
{
if (minSize.height > 0) {
this.div.style.height = minSize.height + 'px';
this.table.style.height = minSize.height + 'px';
}
if (minSize.width > 0)
{
if (minSize.width > 0) {
this.div.style.width = minSize.width + 'px';
this.table.style.width = minSize.width + 'px';
}
if (this.resize != null)
{
if (this.resize != null) {
this.resize.style.visibility = 'hidden';
}
this.fireEvent(new mxEventObject(mxEvent.MINIMIZE, 'event', evt));
}
else
{
} else {
minimized = false;
this.minimize.setAttribute('src', this.minimizeImage);
@ -700,8 +650,7 @@ installMinimizeHandler = ()=>
this.div.style.height = height;
this.table.style.height = height;
if (this.resize != null)
{
if (this.resize != null) {
this.resize.style.visibility = '';
}
@ -719,8 +668,7 @@ installMinimizeHandler = ()=>
*
* Sets if the window is maximizable.
*/
setMaximizable = (maximizable)=>
{
setMaximizable = (maximizable) => {
this.maximize.style.display = (maximizable) ? '' : 'none';
};
@ -729,8 +677,7 @@ setMaximizable = (maximizable)=>
*
* Installs the event listeners required for maximizing the window.
*/
installMaximizeHandler = ()=>
{
installMaximizeHandler = () => {
this.maximize = document.createElement('img');
this.maximize.setAttribute('src', this.maximizeImage);
@ -749,14 +696,11 @@ installMaximizeHandler = ()=>
var width = null;
var minDisplay = null;
var funct = mxUtils.bind(this, (evt)=>
{
var funct = mxUtils.bind(this, (evt) => {
this.activate();
if (this.maximize.style.display != 'none')
{
if (!maximized)
{
if (this.maximize.style.display != 'none') {
if (!maximized) {
maximized = true;
this.maximize.setAttribute('src', this.normalizeImage);
@ -781,23 +725,19 @@ installMaximizeHandler = ()=>
this.table.style.width = (document.body.clientWidth - 2) + 'px';
this.table.style.height = (docHeight - 2) + 'px';
if (this.resize != null)
{
if (this.resize != null) {
this.resize.style.visibility = 'hidden';
}
var style = mxUtils.getCurrentStyle(this.contentWrapper);
if (style.overflow == 'auto' || this.resize != null)
{
if (style.overflow == 'auto' || this.resize != null) {
this.contentWrapper.style.height = (this.div.offsetHeight -
this.title.offsetHeight - this.contentHeightCorrection) + 'px';
}
this.fireEvent(new mxEventObject(mxEvent.MAXIMIZE, 'event', evt));
}
else
{
} else {
maximized = false;
this.maximize.setAttribute('src', this.maximizeImage);
@ -814,8 +754,7 @@ installMaximizeHandler = ()=>
var style = mxUtils.getCurrentStyle(this.contentWrapper);
if (style.overflow == 'auto' || this.resize != null)
{
if (style.overflow == 'auto' || this.resize != null) {
this.contentWrapper.style.height = (this.div.offsetHeight -
this.title.offsetHeight - this.contentHeightCorrection) + 'px';
}
@ -823,8 +762,7 @@ installMaximizeHandler = ()=>
this.table.style.height = height;
this.table.style.width = width;
if (this.resize != null)
{
if (this.resize != null) {
this.resize.style.visibility = '';
}
@ -844,13 +782,11 @@ installMaximizeHandler = ()=>
*
* Installs the event listeners required for moving the window.
*/
installMoveHandler = ()=>
{
installMoveHandler = () => {
this.title.style.cursor = 'move';
mxEvent.addGestureListeners(this.title,
mxUtils.bind(this, (evt)=>
{
mxUtils.bind(this, (evt) => {
var startX = mxEvent.getClientX(evt);
var startY = mxEvent.getClientY(evt);
var x = this.getX();
@ -858,8 +794,7 @@ installMoveHandler = ()=>
// Adds a temporary pair of listeners to intercept
// the gesture event in the document
var dragHandler = mxUtils.bind(this, (evt)=>
{
var dragHandler = mxUtils.bind(this, (evt) => {
var dx = mxEvent.getClientX(evt) - startX;
var dy = mxEvent.getClientY(evt) - startY;
this.setLocation(x + dx, y + dy);
@ -867,8 +802,7 @@ installMoveHandler = ()=>
mxEvent.consume(evt);
});
var dropHandler = mxUtils.bind(this, (evt)=>
{
var dropHandler = mxUtils.bind(this, (evt) => {
mxEvent.removeGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new mxEventObject(mxEvent.MOVE_END, 'event', evt));
mxEvent.consume(evt);
@ -880,8 +814,7 @@ installMoveHandler = ()=>
}));
// Disables built-in pan and zoom in IE10 and later
if (mxClient.IS_POINTER)
{
if (mxClient.IS_POINTER) {
this.title.style.touchAction = 'none';
}
};
@ -891,8 +824,7 @@ installMoveHandler = ()=>
*
* Sets the upper, left corner of the window.
*/
setLocation = (x, y)=>
{
setLocation = (x, y) => {
this.div.style.left = x + 'px';
this.div.style.top = y + 'px';
};
@ -902,8 +834,7 @@ installMoveHandler = ()=>
*
* Returns the current position on the x-axis.
*/
getX = ()=>
{
getX = () => {
return parseInt(this.div.style.left);
};
@ -912,8 +843,7 @@ getX = ()=>
*
* Returns the current position on the y-axis.
*/
getY = ()=>
{
getY = () => {
return parseInt(this.div.style.top);
};
@ -923,8 +853,7 @@ getY = ()=>
* Adds the <closeImage> as a new image node in <closeImg> and installs the
* <close> event.
*/
installCloseHandler = ()=>
{
installCloseHandler = () => {
this.closeImg = document.createElement('img');
this.closeImg.setAttribute('src', this.closeImage);
@ -936,16 +865,12 @@ installCloseHandler = ()=>
this.buttons.appendChild(this.closeImg);
mxEvent.addGestureListeners(this.closeImg,
mxUtils.bind(this, (evt)=>
{
mxUtils.bind(this, (evt) => {
this.fireEvent(new mxEventObject(mxEvent.CLOSE, 'event', evt));
if (this.destroyOnClose)
{
if (this.destroyOnClose) {
this.destroy();
}
else
{
} else {
this.setVisible(false);
}
@ -962,8 +887,7 @@ installCloseHandler = ()=>
*
* image - URL of the image to be used.
*/
setImage = (image)=>
{
setImage = (image) => {
this.image = document.createElement('img');
this.image.setAttribute('src', image);
this.image.setAttribute('align', 'left');
@ -983,8 +907,7 @@ setImage = (image)=>
*
* closable - Boolean specifying if the window should be closable.
*/
setClosable = (closable)=>
{
setClosable = (closable) => {
this.closeImg.style.display = (closable) ? '' : 'none';
};
@ -993,10 +916,8 @@ setClosable = (closable)=>
*
* Returns true if the window is visible.
*/
isVisible = ()=>
{
if (this.div != null)
{
isVisible = () => {
if (this.div != null) {
return this.div.style.display != 'none';
}
@ -1012,16 +933,11 @@ isVisible = ()=>
*
* visible - Boolean indicating if the window should be made visible.
*/
setVisible = (visible)=>
{
if (this.div != null && this.isVisible() != visible)
{
if (visible)
{
setVisible = (visible) => {
if (this.div != null && this.isVisible() != visible) {
if (visible) {
this.show();
}
else
{
} else {
this.hide();
}
}
@ -1032,16 +948,14 @@ setVisible = (visible)=>
*
* Shows the window.
*/
show = ()=>
{
show = () => {
this.div.style.display = '';
this.activate();
var style = mxUtils.getCurrentStyle(this.contentWrapper);
if ((style.overflow == 'auto' || this.resize != null) &&
this.contentWrapper.style.display != 'none')
{
this.contentWrapper.style.display != 'none') {
this.contentWrapper.style.height = (this.div.offsetHeight -
this.title.offsetHeight - this.contentHeightCorrection) + 'px';
}
@ -1054,8 +968,7 @@ show = ()=>
*
* Hides the window.
*/
hide = ()=>
{
hide = () => {
this.div.style.display = 'none';
this.fireEvent(new mxEventObject(mxEvent.HIDE));
};
@ -1066,12 +979,10 @@ hide = ()=>
* Destroys the window and removes all associated resources. Fires a
* <destroy> event prior to destroying the window.
*/
destroy = ()=>
{
destroy = () => {
this.fireEvent(new mxEventObject(mxEvent.DESTROY));
if (this.div != null)
{
if (this.div != null) {
mxEvent.release(this.div);
this.div.parentNode.removeChild(this.div);
this.div = null;
@ -1081,3 +992,6 @@ destroy = ()=>
this.content = null;
this.contentWrapper = null;
};
}
export default mxWindow;

393
src/js/util/mxXmlCanvas2D.js
View File

@ -2,6 +2,23 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
class mxXmlCanvas2D extends mxAbstractCanvas2D {
/**
* Variable: textEnabled
*
* Specifies if text output should be enabled. Default is true.
*/
mxXmlCanvas2textEnabled = true;
/**
* Variable: compressed
*
* Specifies if the output should be compressed by removing redundant calls.
* Default is true.
*/
mxXmlCanvas2compressed = true;
/**
* Class: mxXmlCanvas2D
*
@ -28,9 +45,8 @@
*
* Constructs a new abstract canvas.
*/
function mxXmlCanvas2D(root)
{
mxAbstractCanvas2D.call(this);
constructor(root) {
super();
/**
* Variable: root
@ -43,33 +59,12 @@ function mxXmlCanvas2D(root)
this.writeDefaults();
};
/**
* Extends mxAbstractCanvas2D
*/
mxUtils.extend(mxXmlCanvas2D, mxAbstractCanvas2D);
/**
* Variable: textEnabled
*
* Specifies if text output should be enabled. Default is true.
*/
mxXmlCanvas2textEnabled = true;
/**
* Variable: compressed
*
* Specifies if the output should be compressed by removing redundant calls.
* Default is true.
*/
mxXmlCanvas2compressed = true;
/**
* Function: writeDefaults
*
* Writes the rendering defaults to <root>:
*/
mxXmlCanvas2writeDefaults = ()=>
{
mxXmlCanvas2writeDefaults = () => {
var elem;
// Writes font defaults
@ -101,8 +96,7 @@ mxXmlCanvas2writeDefaults = ()=>
*
* Returns a formatted number with 2 decimal places.
*/
mxXmlCanvas2format = (value)=>
{
mxXmlCanvas2format = (value) => {
return parseFloat(parseFloat(value).toFixed(2));
};
@ -111,8 +105,7 @@ mxXmlCanvas2format = (value)=>
*
* Creates the given element using the owner document of <root>.
*/
mxXmlCanvas2createElement = (name)=>
{
mxXmlCanvas2createElement = (name) => {
return this.root.ownerDocument.createElement(name);
};
@ -121,10 +114,8 @@ mxXmlCanvas2createElement = (name)=>
*
* Saves the drawing state.
*/
mxXmlCanvas2save = ()=>
{
if (this.compressed)
{
mxXmlCanvas2save = () => {
if (this.compressed) {
mxAbstractCanvas2save.apply(this, arguments);
}
@ -136,10 +127,8 @@ mxXmlCanvas2save = ()=>
*
* Restores the drawing state.
*/
mxXmlCanvas2restore = ()=>
{
if (this.compressed)
{
mxXmlCanvas2restore = () => {
if (this.compressed) {
mxAbstractCanvas2restore.apply(this, arguments);
}
@ -155,8 +144,7 @@ mxXmlCanvas2restore = ()=>
*
* scale - Number that represents the scale where 1 is equal to 100%.
*/
mxXmlCanvas2scale = (value)=>
{
mxXmlCanvas2scale = (value) => {
var elem = this.createElement('scale');
elem.setAttribute('scale', value);
this.root.appendChild(elem);
@ -172,8 +160,7 @@ mxXmlCanvas2scale = (value)=>
* dx - Number that specifies the horizontal translation.
* dy - Number that specifies the vertical translation.
*/
mxXmlCanvas2translate = (dx, dy)=>
{
mxXmlCanvas2translate = (dx, dy) => {
var elem = this.createElement('translate');
elem.setAttribute('dx', this.format(dx));
elem.setAttribute('dy', this.format(dy));
@ -194,12 +181,10 @@ mxXmlCanvas2translate = (dx, dy)=>
* cx - Number that represents the x-coordinate of the rotation center.
* cy - Number that represents the y-coordinate of the rotation center.
*/
mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy)=>
{
mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
var elem = this.createElement('rotate');
if (theta != 0 || flipH || flipV)
{
if (theta != 0 || flipH || flipV) {
elem.setAttribute('theta', this.format(theta));
elem.setAttribute('flipH', (flipH) ? '1' : '0');
elem.setAttribute('flipV', (flipV) ? '1' : '0');
@ -219,12 +204,9 @@ mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy)=>
* value - Number that represents the new alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setAlpha = (value)=>
{
if (this.compressed)
{
if (this.state.alpha == value)
{
mxXmlCanvas2setAlpha = (value) => {
if (this.compressed) {
if (this.state.alpha == value) {
return;
}
@ -246,12 +228,9 @@ mxXmlCanvas2setAlpha = (value)=>
* value - Number that represents the new fill alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setFillAlpha = (value)=>
{
if (this.compressed)
{
if (this.state.fillAlpha == value)
{
mxXmlCanvas2setFillAlpha = (value) => {
if (this.compressed) {
if (this.state.fillAlpha == value) {
return;
}
@ -273,12 +252,9 @@ mxXmlCanvas2setFillAlpha = (value)=>
* value - Number that represents the new stroke alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setStrokeAlpha = (value)=>
{
if (this.compressed)
{
if (this.state.strokeAlpha == value)
{
mxXmlCanvas2setStrokeAlpha = (value) => {
if (this.compressed) {
if (this.state.strokeAlpha == value) {
return;
}
@ -299,17 +275,13 @@ mxXmlCanvas2setStrokeAlpha = (value)=>
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setFillColor = (value)=>
{
if (value == mxConstants.NONE)
{
mxXmlCanvas2setFillColor = (value) => {
if (value == mxConstants.NONE) {
value = null;
}
if (this.compressed)
{
if (this.state.fillColor == value)
{
if (this.compressed) {
if (this.state.fillColor == value) {
return;
}
@ -341,10 +313,8 @@ mxXmlCanvas2setFillColor = (value)=>
* alpha2 - Optional alpha of the end color. Default is 1. Possible values
* are between 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2)=>
{
if (color1 != null && color2 != null)
{
mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
if (color1 != null && color2 != null) {
mxAbstractCanvas2setGradient.apply(this, arguments);
var elem = this.createElement('gradient');
@ -356,18 +326,15 @@ mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2
elem.setAttribute('h', this.format(h));
// Default direction is south
if (direction != null)
{
if (direction != null) {
elem.setAttribute('direction', direction);
}
if (alpha1 != null)
{
if (alpha1 != null) {
elem.setAttribute('alpha1', alpha1);
}
if (alpha2 != null)
{
if (alpha2 != null) {
elem.setAttribute('alpha2', alpha2);
}
@ -384,17 +351,13 @@ mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setStrokeColor = (value)=>
{
if (value == mxConstants.NONE)
{
mxXmlCanvas2setStrokeColor = (value) => {
if (value == mxConstants.NONE) {
value = null;
}
if (this.compressed)
{
if (this.state.strokeColor == value)
{
if (this.compressed) {
if (this.state.strokeColor == value) {
return;
}
@ -415,12 +378,9 @@ mxXmlCanvas2setStrokeColor = (value)=>
*
* value - Numeric representation of the stroke width.
*/
mxXmlCanvas2setStrokeWidth = (value)=>
{
if (this.compressed)
{
if (this.state.strokeWidth == value)
{
mxXmlCanvas2setStrokeWidth = (value) => {
if (this.compressed) {
if (this.state.strokeWidth == value) {
return;
}
@ -443,12 +403,9 @@ mxXmlCanvas2setStrokeWidth = (value)=>
* value - Boolean that specifies if the stroke width should be ignored
* for the dash pattern. Default is false.
*/
mxXmlCanvas2setDashed = (value, fixDash)=>
{
if (this.compressed)
{
if (this.state.dashed == value)
{
mxXmlCanvas2setDashed = (value, fixDash) => {
if (this.compressed) {
if (this.state.dashed == value) {
return;
}
@ -458,8 +415,7 @@ mxXmlCanvas2setDashed = (value, fixDash)=>
var elem = this.createElement('dashed');
elem.setAttribute('dashed', (value) ? '1' : '0');
if (fixDash != null)
{
if (fixDash != null) {
elem.setAttribute('fixDash', (fixDash) ? '1' : '0');
}
@ -478,12 +434,9 @@ mxXmlCanvas2setDashed = (value, fixDash)=>
* between the dashes. The lengths are relative to the line width - a length
* of 1 is equals to the line width.
*/
mxXmlCanvas2setDashPattern = (value)=>
{
if (this.compressed)
{
if (this.state.dashPattern == value)
{
mxXmlCanvas2setDashPattern = (value) => {
if (this.compressed) {
if (this.state.dashPattern == value) {
return;
}
@ -505,12 +458,9 @@ mxXmlCanvas2setDashPattern = (value)=>
* value - String that represents the line cap. Possible values are flat, round
* and square.
*/
mxXmlCanvas2setLineCap = (value)=>
{
if (this.compressed)
{
if (this.state.lineCap == value)
{
mxXmlCanvas2setLineCap = (value) => {
if (this.compressed) {
if (this.state.lineCap == value) {
return;
}
@ -532,12 +482,9 @@ mxXmlCanvas2setLineCap = (value)=>
* value - String that represents the line join. Possible values are miter,
* round and bevel.
*/
mxXmlCanvas2setLineJoin = (value)=>
{
if (this.compressed)
{
if (this.state.lineJoin == value)
{
mxXmlCanvas2setLineJoin = (value) => {
if (this.compressed) {
if (this.state.lineJoin == value) {
return;
}
@ -558,12 +505,9 @@ mxXmlCanvas2setLineJoin = (value)=>
*
* value - Number that represents the miter limit.
*/
mxXmlCanvas2setMiterLimit = (value)=>
{
if (this.compressed)
{
if (this.state.miterLimit == value)
{
mxXmlCanvas2setMiterLimit = (value) => {
if (this.compressed) {
if (this.state.miterLimit == value) {
return;
}
@ -584,19 +528,14 @@ mxXmlCanvas2setMiterLimit = (value)=>
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setFontColor = (value)=>
{
if (this.textEnabled)
{
if (value == mxConstants.NONE)
{
mxXmlCanvas2setFontColor = (value) => {
if (this.textEnabled) {
if (value == mxConstants.NONE) {
value = null;
}
if (this.compressed)
{
if (this.state.fontColor == value)
{
if (this.compressed) {
if (this.state.fontColor == value) {
return;
}
@ -618,19 +557,14 @@ mxXmlCanvas2setFontColor = (value)=>
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setFontBackgroundColor = (value)=>
{
if (this.textEnabled)
{
if (value == mxConstants.NONE)
{
mxXmlCanvas2setFontBackgroundColor = (value) => {
if (this.textEnabled) {
if (value == mxConstants.NONE) {
value = null;
}
if (this.compressed)
{
if (this.state.fontBackgroundColor == value)
{
if (this.compressed) {
if (this.state.fontBackgroundColor == value) {
return;
}
@ -652,19 +586,14 @@ mxXmlCanvas2setFontBackgroundColor = (value)=>
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setFontBorderColor = (value)=>
{
if (this.textEnabled)
{
if (value == mxConstants.NONE)
{
mxXmlCanvas2setFontBorderColor = (value) => {
if (this.textEnabled) {
if (value == mxConstants.NONE) {
value = null;
}
if (this.compressed)
{
if (this.state.fontBorderColor == value)
{
if (this.compressed) {
if (this.state.fontBorderColor == value) {
return;
}
@ -686,14 +615,10 @@ mxXmlCanvas2setFontBorderColor = (value)=>
*
* value - Numeric representation of the font size.
*/
mxXmlCanvas2setFontSize = (value)=>
{
if (this.textEnabled)
{
if (this.compressed)
{
if (this.state.fontSize == value)
{
mxXmlCanvas2setFontSize = (value) => {
if (this.textEnabled) {
if (this.compressed) {
if (this.state.fontSize == value) {
return;
}
@ -716,14 +641,10 @@ mxXmlCanvas2setFontSize = (value)=>
* value - String representation of the font family. This handles the same
* values as the CSS font-family property.
*/
mxXmlCanvas2setFontFamily = (value)=>
{
if (this.textEnabled)
{
if (this.compressed)
{
if (this.state.fontFamily == value)
{
mxXmlCanvas2setFontFamily = (value) => {
if (this.textEnabled) {
if (this.compressed) {
if (this.state.fontFamily == value) {
return;
}
@ -746,19 +667,14 @@ mxXmlCanvas2setFontFamily = (value)=>
* value - Numeric representation of the font family. This is the sum of the
* font styles from <mxConstants>.
*/
mxXmlCanvas2setFontStyle = (value)=>
{
if (this.textEnabled)
{
if (value == null)
{
mxXmlCanvas2setFontStyle = (value) => {
if (this.textEnabled) {
if (value == null) {
value = 0;
}
if (this.compressed)
{
if (this.state.fontStyle == value)
{
if (this.compressed) {
if (this.state.fontStyle == value) {
return;
}
@ -780,12 +696,9 @@ mxXmlCanvas2setFontStyle = (value)=>
*
* value - Boolean that specifies if shadows should be enabled.
*/
mxXmlCanvas2setShadow = (value)=>
{
if (this.compressed)
{
if (this.state.shadow == value)
{
mxXmlCanvas2setShadow = (value) => {
if (this.compressed) {
if (this.state.shadow == value) {
return;
}
@ -806,17 +719,13 @@ mxXmlCanvas2setShadow = (value)=>
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setShadowColor = (value)=>
{
if (this.compressed)
{
if (value == mxConstants.NONE)
{
mxXmlCanvas2setShadowColor = (value) => {
if (this.compressed) {
if (value == mxConstants.NONE) {
value = null;
}
if (this.state.shadowColor == value)
{
if (this.state.shadowColor == value) {
return;
}
@ -838,12 +747,9 @@ mxXmlCanvas2setShadowColor = (value)=>
* value - Number that represents the new alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setShadowAlpha = (value)=>
{
if (this.compressed)
{
if (this.state.shadowAlpha == value)
{
mxXmlCanvas2setShadowAlpha = (value) => {
if (this.compressed) {
if (this.state.shadowAlpha == value) {
return;
}
@ -866,12 +772,9 @@ mxXmlCanvas2setShadowAlpha = (value)=>
* dx - Number that represents the horizontal offset of the shadow.
* dy - Number that represents the vertical offset of the shadow.
*/
mxXmlCanvas2setShadowOffset = (dx, dy)=>
{
if (this.compressed)
{
if (this.state.shadowDx == dx && this.state.shadowDy == dy)
{
mxXmlCanvas2setShadowOffset = (dx, dy) => {
if (this.compressed) {
if (this.state.shadowDx == dx && this.state.shadowDy == dy) {
return;
}
@ -897,8 +800,7 @@ mxXmlCanvas2setShadowOffset = (dx, dy)=>
* w - Number that represents the width of the rectangle.
* h - Number that represents the height of the rectangle.
*/
mxXmlCanvas2rect = (x, y, w, h)=>
{
mxXmlCanvas2rect = (x, y, w, h) => {
var elem = this.createElement('rect');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -921,8 +823,7 @@ mxXmlCanvas2rect = (x, y, w, h)=>
* dx - Number that represents the horizontal rounding.
* dy - Number that represents the vertical rounding.
*/
mxXmlCanvas2roundrect = (x, y, w, h, dx, dy)=>
{
mxXmlCanvas2roundrect = (x, y, w, h, dx, dy) => {
var elem = this.createElement('roundrect');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -945,8 +846,7 @@ mxXmlCanvas2roundrect = (x, y, w, h, dx, dy)=>
* w - Number that represents the width of the ellipse.
* h - Number that represents the height of the ellipse.
*/
mxXmlCanvas2ellipse = (x, y, w, h)=>
{
mxXmlCanvas2ellipse = (x, y, w, h) => {
var elem = this.createElement('ellipse');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -971,8 +871,7 @@ mxXmlCanvas2ellipse = (x, y, w, h)=>
* flipH - Boolean indicating if the image should be flipped horizontally.
* flipV - Boolean indicating if the image should be flipped vertically.
*/
mxXmlCanvas2image = (x, y, w, h, src, aspect, flipH, flipV)=>
{
mxXmlCanvas2image = (x, y, w, h, src, aspect, flipH, flipV) => {
src = this.converter.convert(src);
// LATER: Add option for embedding images as base64.
@ -993,8 +892,7 @@ mxXmlCanvas2image = (x, y, w, h, src, aspect, flipH, flipV)=>
*
* Starts a new path and puts it into the drawing buffer.
*/
mxXmlCanvas2begin = ()=>
{
mxXmlCanvas2begin = () => {
this.root.appendChild(this.createElement('begin'));
this.lastX = 0;
this.lastY = 0;
@ -1010,8 +908,7 @@ mxXmlCanvas2begin = ()=>
* x - Number that represents the x-coordinate of the point.
* y - Number that represents the y-coordinate of the point.
*/
mxXmlCanvas2moveTo = (x, y)=>
{
mxXmlCanvas2moveTo = (x, y) => {
var elem = this.createElement('move');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -1030,8 +927,7 @@ mxXmlCanvas2moveTo = (x, y)=>
* x - Number that represents the x-coordinate of the endpoint.
* y - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2lineTo = (x, y)=>
{
mxXmlCanvas2lineTo = (x, y) => {
var elem = this.createElement('line');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -1052,8 +948,7 @@ mxXmlCanvas2lineTo = (x, y)=>
* x2 - Number that represents the x-coordinate of the endpoint.
* y2 - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2quadTo = (x1, y1, x2, y2)=>
{
mxXmlCanvas2quadTo = (x1, y1, x2, y2) => {
var elem = this.createElement('quad');
elem.setAttribute('x1', this.format(x1));
elem.setAttribute('y1', this.format(y1));
@ -1078,8 +973,7 @@ mxXmlCanvas2quadTo = (x1, y1, x2, y2)=>
* x3 - Number that represents the x-coordinate of the endpoint.
* y3 - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2curveTo = (x1, y1, x2, y2, x3, y3)=>
{
mxXmlCanvas2curveTo = (x1, y1, x2, y2, x3, y3) => {
var elem = this.createElement('curve');
elem.setAttribute('x1', this.format(x1));
elem.setAttribute('y1', this.format(y1));
@ -1097,8 +991,7 @@ mxXmlCanvas2curveTo = (x1, y1, x2, y2, x3, y3)=>
*
* Closes the current path.
*/
mxXmlCanvas2close = ()=>
{
mxXmlCanvas2close = () => {
this.root.appendChild(this.createElement('close'));
};
@ -1127,12 +1020,9 @@ mxXmlCanvas2close = ()=>
* rotation - Number that specifies the angle of the rotation around the anchor point of the text.
* dir - Optional string that specifies the text direction. Possible values are rtl and lrt.
*/
mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir)=>
{
if (this.textEnabled && str != null)
{
if (mxUtils.isNode(str))
{
mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir) => {
if (this.textEnabled && str != null) {
if (mxUtils.isNode(str)) {
str = mxUtils.getOuterHtml(str);
}
@ -1143,42 +1033,35 @@ mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip
elem.setAttribute('h', this.format(h));
elem.setAttribute('str', str);
if (align != null)
{
if (align != null) {
elem.setAttribute('align', align);
}
if (valign != null)
{
if (valign != null) {
elem.setAttribute('valign', valign);
}
elem.setAttribute('wrap', (wrap) ? '1' : '0');
if (format == null)
{
if (format == null) {
format = '';
}
elem.setAttribute('format', format);
if (overflow != null)
{
if (overflow != null) {
elem.setAttribute('overflow', overflow);
}
if (clip != null)
{
if (clip != null) {
elem.setAttribute('clip', (clip) ? '1' : '0');
}
if (rotation != null)
{
if (rotation != null) {
elem.setAttribute('rotation', rotation);
}
if (dir != null)
{
if (dir != null) {
elem.setAttribute('dir', dir);
}
@ -1191,8 +1074,7 @@ mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip
*
* Paints the outline of the current drawing buffer.
*/
mxXmlCanvas2stroke = ()=>
{
mxXmlCanvas2stroke = () => {
this.root.appendChild(this.createElement('stroke'));
};
@ -1201,8 +1083,7 @@ mxXmlCanvas2stroke = ()=>
*
* Fills the current drawing buffer.
*/
mxXmlCanvas2fill = ()=>
{
mxXmlCanvas2fill = () => {
this.root.appendChild(this.createElement('fill'));
};
@ -1211,7 +1092,9 @@ mxXmlCanvas2fill = ()=>
*
* Fills the current drawing buffer and its outline.
*/
mxXmlCanvas2fillAndStroke = ()=>
{
mxXmlCanvas2fillAndStroke = () => {
this.root.appendChild(this.createElement('fillstroke'));
};
}
export default mxXmlCanvas2D;

638
src/js/view/mxCellEditor.js
View File

File diff suppressed because it is too large Load Diff

180
src/js/view/mxCellOverlay.js
View File

@ -2,76 +2,11 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxCellOverlay
*
* Extends <mxEventSource> to implement a graph overlay, represented by an icon
* and a tooltip. Overlays can handle and fire <click> events and are added to
* the graph using <mxGraph.addCellOverlay>, and removed using
* <mxGraph.removeCellOverlay>, or <mxGraph.removeCellOverlays> to remove all overlays.
* The <mxGraph.getCellOverlays> function returns the array of overlays for a given
* cell in a graph. If multiple overlays exist for the same cell, then
* <getBounds> should be overridden in at least one of the overlays.
*
* Overlays appear on top of all cells in a special layer. If this is not
* desirable, then the image must be rendered as part of the shape or label of
* the cell instead.
*
* Example:
*
* The following adds a new overlays for a given vertex and selects the cell
* if the overlay is clicked.
*
* (code)
* var overlay = new mxCellOverlay(img, html);
* graph.addCellOverlay(vertex, overlay);
* overlay.addListener(mxEvent.CLICK, (sender, evt)=>
* {
* var cell = evt.getProperty('cell');
* graph.setSelectionCell(cell);
* });
* (end)
*
* For cell overlays to be printed use <mxPrintPreview.printOverlays>.
*
* Event: mxEvent.CLICK
*
* Fires when the user clicks on the overlay. The <code>event</code> property
* contains the corresponding mouse event and the <code>cell</code> property
* contains the cell. For touch devices this is fired if the element receives
* a touchend event.
*
* Constructor: mxCellOverlay
*
* Constructs a new overlay using the given image and tooltip.
*
* Parameters:
*
* image - <mxImage> that represents the icon to be displayed.
* tooltip - Optional string that specifies the tooltip.
* align - Optional horizontal alignment for the overlay. Possible
* values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT>
* (default).
* verticalAlign - Vertical alignment for the overlay. Possible
* values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>
* (default).
*/
function mxCellOverlay(image, tooltip, align, verticalAlign, offset, cursor)
{
this.image = image;
this.tooltip = tooltip;
this.align = (align != null) ? align : this.align;
this.verticalAlign = (verticalAlign != null) ? verticalAlign : this.verticalAlign;
this.offset = (offset != null) ? offset : new mxPoint();
this.cursor = (cursor != null) ? cursor : 'help';
};
/**
* Extends mxEventSource.
*/
mxCellOverlay.prototype = new mxEventSource();
constructor = mxCellOverlay;
import mxPoint from "FIXME";
import mxRectangle from "../util/mxRectangle";
class mxCellOverlay extends mxEventSource {
/**
* Variable: image
*
@ -127,6 +62,70 @@ cursor = null;
*/
defaultOverlap = 0.5;
/**
* Class: mxCellOverlay
*
* Extends <mxEventSource> to implement a graph overlay, represented by an icon
* and a tooltip. Overlays can handle and fire <click> events and are added to
* the graph using <mxGraph.addCellOverlay>, and removed using
* <mxGraph.removeCellOverlay>, or <mxGraph.removeCellOverlays> to remove all overlays.
* The <mxGraph.getCellOverlays> function returns the array of overlays for a given
* cell in a graph. If multiple overlays exist for the same cell, then
* <getBounds> should be overridden in at least one of the overlays.
*
* Overlays appear on top of all cells in a special layer. If this is not
* desirable, then the image must be rendered as part of the shape or label of
* the cell instead.
*
* Example:
*
* The following adds a new overlays for a given vertex and selects the cell
* if the overlay is clicked.
*
* (code)
* var overlay = new mxCellOverlay(img, html);
* graph.addCellOverlay(vertex, overlay);
* overlay.addListener(mxEvent.CLICK, (sender, evt)=>
* {
* var cell = evt.getProperty('cell');
* graph.setSelectionCell(cell);
* });
* (end)
*
* For cell overlays to be printed use <mxPrintPreview.printOverlays>.
*
* Event: mxEvent.CLICK
*
* Fires when the user clicks on the overlay. The <code>event</code> property
* contains the corresponding mouse event and the <code>cell</code> property
* contains the cell. For touch devices this is fired if the element receives
* a touchend event.
*
* Constructor: mxCellOverlay
*
* Constructs a new overlay using the given image and tooltip.
*
* Parameters:
*
* image - <mxImage> that represents the icon to be displayed.
* tooltip - Optional string that specifies the tooltip.
* align - Optional horizontal alignment for the overlay. Possible
* values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT>
* (default).
* verticalAlign - Vertical alignment for the overlay. Possible
* values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>
* (default).
*/
constructor(image, tooltip, align, verticalAlign, offset, cursor) {
// no super
this.image = image;
this.tooltip = tooltip;
this.align = (align != null) ? align : this.align;
this.verticalAlign = (verticalAlign != null) ? verticalAlign : this.verticalAlign;
this.offset = (offset != null) ? offset : new mxPoint();
this.cursor = (cursor != null) ? cursor : 'help';
};
/**
* Function: getBounds
*
@ -160,8 +159,7 @@ defaultOverlap = 0.5;
* state - <mxCellState> that represents the current state of the
* associated cell.
*/
getBounds = (state)=>
{
getBounds = (state) => {
var isEdge = state.view.graph.getModel().isEdge(state.cell);
var s = state.view.scale;
var pt = null;
@ -169,50 +167,34 @@ getBounds = (state)=>
var w = this.image.width;
var h = this.image.height;
if (isEdge)
{
if (isEdge) {
var pts = state.absolutePoints;
if (pts.length % 2 == 1)
{
if (pts.length % 2 === 1) {
pt = pts[Math.floor(pts.length / 2)];
}
else
{
} else {
var idx = pts.length / 2;
var p0 = pts[idx - 1];
var p1 = pts[idx];
pt = new mxPoint(p0.x + (p1.x - p0.x) / 2,
p0.y + (p1.y - p0.y) / 2);
}
}
else
{
} else {
pt = new mxPoint();
if (this.align == mxConstants.ALIGN_LEFT)
{
if (this.align === mxConstants.ALIGN_LEFT) {
pt.x = state.x;
}
else if (this.align == mxConstants.ALIGN_CENTER)
{
} else if (this.align === mxConstants.ALIGN_CENTER) {
pt.x = state.x + state.width / 2;
}
else
{
} else {
pt.x = state.x + state.width;
}
if (this.verticalAlign == mxConstants.ALIGN_TOP)
{
if (this.verticalAlign === mxConstants.ALIGN_TOP) {
pt.y = state.y;
}
else if (this.verticalAlign == mxConstants.ALIGN_MIDDLE)
{
} else if (this.verticalAlign === mxConstants.ALIGN_MIDDLE) {
pt.y = state.y + state.height / 2;
}
else
{
} else {
pt.y = state.y + state.height;
}
}
@ -227,7 +209,9 @@ getBounds = (state)=>
* Returns the textual representation of the overlay to be used as the
* tooltip. This implementation returns <tooltip>.
*/
toString = ()=>
{
toString = () => {
return this.tooltip;
};
}
export default mxCellOverlay;

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

File diff suppressed because it is too large Load Diff

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

@ -2,47 +2,11 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxCellState
*
* Represents the current state of a cell in a given <mxGraphView>.
*
* For edges, the edge label position is stored in <absoluteOffset>.
*
* The size for oversize labels can be retrieved using the boundingBox property
* of the <text> field as shown below.
*
* (code)
* var bbox = (state.text != null) ? state.text.boundingBox : null;
* (end)
*
* Constructor: mxCellState
*
* Constructs a new object that represents the current state of the given
* cell in the specified view.
*
* Parameters:
*
* view - <mxGraphView> that contains the state.
* cell - <mxCell> that this state represents.
* style - Array of key, value pairs that constitute the style.
*/
function mxCellState(view, cell, style)
{
this.view = view;
this.cell = cell;
this.style = (style != null) ? style : {};
this.origin = new mxPoint();
this.absoluteOffset = new mxPoint();
};
/**
* Extends mxRectangle.
*/
mxCellState.prototype = new mxRectangle();
constructor = mxCellState;
import mxPoint from "../util/mxPoint";
import mxRectangle from "../util/mxRectangle";
class mxCellState extends mxRectangle {
/**
* Variable: view
*
@ -169,6 +133,41 @@ unscaledWidth = null;
*/
unscaledHeight = null;
/**
* Class: mxCellState
*
* Represents the current state of a cell in a given <mxGraphView>.
*
* For edges, the edge label position is stored in <absoluteOffset>.
*
* The size for oversize labels can be retrieved using the boundingBox property
* of the <text> field as shown below.
*
* (code)
* var bbox = (state.text != null) ? state.text.boundingBox : null;
* (end)
*
* Constructor: mxCellState
*
* Constructs a new object that represents the current state of the given
* cell in the specified view.
*
* Parameters:
*
* view - <mxGraphView> that contains the state.
* cell - <mxCell> that this state represents.
* style - Array of key, value pairs that constitute the style.
*/
constructor(view, cell, style) {
// no super
this.view = view;
this.cell = cell;
this.style = (style != null) ? style : {};
this.origin = new mxPoint();
this.absoluteOffset = new mxPoint();
};
/**
* Function: getPerimeterBounds
*
@ -180,13 +179,11 @@ unscaledHeight = null;
* border - Optional border to be added around the perimeter bounds.
* bounds - Optional <mxRectangle> to be used as the initial bounds.
*/
getPerimeterBounds = (border, bounds)=>
{
getPerimeterBounds = (border, bounds) => {
border = border || 0;
bounds = (bounds != null) ? bounds : new mxRectangle(this.x, this.y, this.width, this.height);
if (this.shape != null && this.shape.stencil != null && this.shape.stencil.aspect == 'fixed')
{
if (this.shape != null && this.shape.stencil != null && this.shape.stencil.aspect === 'fixed') {
var aspect = this.shape.stencil.computeAspect(this.style, bounds.x, bounds.y, bounds.width, bounds.height);
bounds.x = aspect.x;
@ -195,8 +192,7 @@ getPerimeterBounds = (border, bounds)=>
bounds.height = this.shape.stencil.h0 * aspect.height;
}
if (border != 0)
{
if (border !== 0) {
bounds.grow(border);
}
@ -214,38 +210,25 @@ getPerimeterBounds = (border, bounds)=>
* isSource - Boolean that specifies if the first or last point should
* be assigned.
*/
setAbsoluteTerminalPoint = (point, isSource)=>
{
if (isSource)
{
if (this.absolutePoints == null)
{
setAbsoluteTerminalPoint = (point, isSource) => {
if (isSource) {
if (this.absolutePoints == null) {
this.absolutePoints = [];
}
if (this.absolutePoints.length == 0)
{
if (this.absolutePoints.length === 0) {
this.absolutePoints.push(point);
}
else
{
} else {
this.absolutePoints[0] = point;
}
}
else
{
if (this.absolutePoints == null)
{
} else {
if (this.absolutePoints == null) {
this.absolutePoints = [];
this.absolutePoints.push(null);
this.absolutePoints.push(point);
}
else if (this.absolutePoints.length == 1)
{
} else if (this.absolutePoints.length === 1) {
this.absolutePoints.push(point);
}
else
{
} else {
this.absolutePoints[this.absolutePoints.length - 1] = point;
}
}
@ -256,15 +239,12 @@ setAbsoluteTerminalPoint = (point, isSource)=>
*
* Sets the given cursor on the shape and text shape.
*/
setCursor = (cursor)=>
{
if (this.shape != null)
{
setCursor = (cursor) => {
if (this.shape != null) {
this.shape.setCursor(cursor);
}
if (this.text != null)
{
if (this.text != null) {
this.text.setCursor(cursor);
}
};
@ -279,8 +259,7 @@ setCursor = (cursor)=>
* source - Boolean that specifies if the source or target cell should be
* returned.
*/
getVisibleTerminal = (source)=>
{
getVisibleTerminal = (source) => {
var tmp = this.getVisibleTerminalState(source);
return (tmp != null) ? tmp.cell : null;
@ -296,8 +275,7 @@ getVisibleTerminal = (source)=>
* source - Boolean that specifies if the source or target state should be
* returned.
*/
getVisibleTerminalState = (source)=>
{
getVisibleTerminalState = (source) => {
return (source) ? this.visibleSourceState : this.visibleTargetState;
};
@ -311,14 +289,10 @@ getVisibleTerminalState = (source)=>
* terminalState - <mxCellState> that represents the terminal.
* source - Boolean that specifies if the source or target state should be set.
*/
setVisibleTerminalState = (terminalState, source)=>
{
if (source)
{
setVisibleTerminalState = (terminalState, source) => {
if (source) {
this.visibleSourceState = terminalState;
}
else
{
} else {
this.visibleTargetState = terminalState;
}
};
@ -328,8 +302,7 @@ setVisibleTerminalState = (terminalState, source)=>
*
* Returns the unscaled, untranslated bounds.
*/
getCellBounds = ()=>
{
getCellBounds = () => {
return this.cellBounds;
};
@ -340,8 +313,7 @@ getCellBounds = ()=>
* <getCellBounds> but with a 90 degree rotation if the shape's
* isPaintBoundsInverted returns true.
*/
getPaintBounds = ()=>
{
getPaintBounds = () => {
return this.paintBounds;
};
@ -350,15 +322,13 @@ getPaintBounds = ()=>
*
* Updates the cellBounds and paintBounds.
*/
updateCachedBounds = ()=>
{
updateCachedBounds = () => {
var tr = this.view.translate;
var s = this.view.scale;
this.cellBounds = new mxRectangle(this.x / s - tr.x, this.y / s - tr.y, this.width / s, this.height / s);
this.paintBounds = mxRectangle.fromRectangle(this.cellBounds);
if (this.shape != null && this.shape.isPaintBoundsInverted())
{
if (this.shape != null && this.shape.isPaintBoundsInverted()) {
this.paintBounds.rotate90();
}
};
@ -368,8 +338,7 @@ updateCachedBounds = ()=>
*
* Copies all fields from the given state to this state.
*/
setState = (state)=>
{
setState = (state) => {
this.view = state.view;
this.cell = state.cell;
this.style = state.style;
@ -393,33 +362,27 @@ setState = (state)=>
*
* Returns a clone of this <mxPoint>.
*/
clone = ()=>
{
clone = () => {
var clone = new mxCellState(this.view, this.cell, this.style);
// Clones the absolute points
if (this.absolutePoints != null)
{
if (this.absolutePoints != null) {
clone.absolutePoints = [];
for (var i = 0; i < this.absolutePoints.length; i++)
{
for (var i = 0; i < this.absolutePoints.length; i++) {
clone.absolutePoints[i] = this.absolutePoints[i].clone();
}
}
if (this.origin != null)
{
if (this.origin != null) {
clone.origin = this.origin.clone();
}
if (this.absoluteOffset != null)
{
if (this.absoluteOffset != null) {
clone.absoluteOffset = this.absoluteOffset.clone();
}
if (this.boundingBox != null)
{
if (this.boundingBox != null) {
clone.boundingBox = this.boundingBox.clone();
}
@ -441,7 +404,9 @@ clone = ()=>
*
* Destroys the state and all associated resources.
*/
destroy = ()=>
{
destroy = () => {
this.view.graph.cellRenderer.destroy(this);
};
}
export default mxCellState;

119
src/js/view/mxCellStatePreview.js
View File

@ -2,26 +2,12 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
*
* Class: mxCellStatePreview
*
* Implements a live preview for moving cells.
*
* Constructor: mxCellStatePreview
*
* Constructs a move preview for the given graph.
*
* Parameters:
*
* graph - Reference to the enclosing <mxGraph>.
*/
function mxCellStatePreview(graph)
{
this.deltas = new mxDictionary();
this.graph = graph;
};
import mxUtils from "../util/mxUtils";
import mxPoint from "../util/mxPoint";
import mxDictionary from "../util/mxDictionary";
class mxCellStatePreview {
/**
* Variable: graph
*
@ -43,46 +29,57 @@ deltas = null;
*/
count = 0;
/**
*
* Class: mxCellStatePreview
*
* Implements a live preview for moving cells.
*
* Constructor: mxCellStatePreview
*
* Constructs a move preview for the given graph.
*
* Parameters:
*
* graph - Reference to the enclosing <mxGraph>.
*/
constructor(graph) {
this.deltas = new mxDictionary();
this.graph = graph;
};
/**
* Function: isEmpty
*
* Returns true if this contains no entries.
*/
isEmpty = ()=>
{
return this.count == 0;
isEmpty = () => {
return this.count === 0;
};
/**
* Function: moveState
*/
moveState = (state, dx, dy, add, includeEdges)=>
{
moveState = (state, dx, dy, add, includeEdges) => {
add = (add != null) ? add : true;
includeEdges = (includeEdges != null) ? includeEdges : true;
var delta = this.deltas.get(state.cell);
if (delta == null)
{
if (delta == null) {
// Note: Deltas stores the point and the state since the key is a string.
delta = {point: new mxPoint(dx, dy), state: state};
this.deltas.put(state.cell, delta);
this.count++;
}
else if (add)
{
} else if (add) {
delta.point.x += dx;
delta.point.y += dy;
}
else
{
} else {
delta.point.x = dx;
delta.point.y = dy;
}
if (includeEdges)
{
if (includeEdges) {
this.addEdges(state);
}
@ -92,15 +89,12 @@ moveState = (state, dx, dy, add, includeEdges)=>
/**
* Function: show
*/
show = (visitor)=>
{
this.deltas.visit(mxUtils.bind(this, (key, delta)=>
{
show = (visitor) => {
this.deltas.visit(mxUtils.bind(this, (key, delta) => {
this.translateState(delta.state, delta.point.x, delta.point.y);
}));
this.deltas.visit(mxUtils.bind(this, (key, delta)=>
{
this.deltas.visit(mxUtils.bind(this, (key, delta) => {
this.revalidateState(delta.state, delta.point.x, delta.point.y, visitor);
}));
};
@ -108,22 +102,18 @@ show = (visitor)=>
/**
* Function: translateState
*/
translateState = (state, dx, dy)=>
{
if (state != null)
{
translateState = (state, dx, dy) => {
if (state != null) {
var model = this.graph.getModel();
if (model.isVertex(state.cell))
{
if (model.isVertex(state.cell)) {
state.view.updateCellState(state);
var geo = model.getGeometry(state.cell);
// Moves selection cells and non-relative vertices in
// the first phase so that edge terminal points will
// be updated in the second phase
if ((dx != 0 || dy != 0) && geo != null && (!geo.relative || this.deltas.get(state.cell) != null))
{
if ((dx != 0 || dy != 0) && geo != null && (!geo.relative || this.deltas.get(state.cell) != null)) {
state.x += dx;
state.y += dy;
}
@ -131,8 +121,7 @@ translateState = (state, dx, dy)=>
var childCount = model.getChildCount(state.cell);
for (var i = 0; i < childCount; i++)
{
for (var i = 0; i < childCount; i++) {
this.translateState(state.view.getState(model.getChildAt(state.cell, i)), dx, dy);
}
}
@ -141,16 +130,13 @@ translateState = (state, dx, dy)=>
/**
* Function: revalidateState
*/
revalidateState = (state, dx, dy, visitor)=>
{
if (state != null)
{
revalidateState = (state, dx, dy, visitor) => {
if (state != null) {
var model = this.graph.getModel();
// Updates the edge terminal points and restores the
// (relative) positions of any (relative) children
if (model.isEdge(state.cell))
{
if (model.isEdge(state.cell)) {
state.view.updateCellState(state);
}
@ -160,8 +146,7 @@ revalidateState = (state, dx, dy, visitor)=>
// Moves selection vertices which are relative
if ((dx != 0 || dy != 0) && geo != null && geo.relative &&
model.isVertex(state.cell) && (pState == null ||
model.isVertex(pState.cell) || this.deltas.get(state.cell) != null))
{
model.isVertex(pState.cell) || this.deltas.get(state.cell) != null)) {
state.x += dx;
state.y += dy;
}
@ -169,15 +154,13 @@ revalidateState = (state, dx, dy, visitor)=>
this.graph.cellRenderer.redraw(state);
// Invokes the visitor on the given state
if (visitor != null)
{
if (visitor != null) {
visitor(state);
}
var childCount = model.getChildCount(state.cell);
for (var i = 0; i < childCount; i++)
{
for (var i = 0; i < childCount; i++) {
this.revalidateState(this.graph.view.getState(model.getChildAt(state.cell, i)), dx, dy, visitor);
}
}
@ -186,18 +169,18 @@ revalidateState = (state, dx, dy, visitor)=>
/**
* Function: addEdges
*/
addEdges = (state)=>
{
addEdges = (state) => {
var model = this.graph.getModel();
var edgeCount = model.getEdgeCount(state.cell);
for (var i = 0; i < edgeCount; i++)
{
for (var i = 0; i < edgeCount; i++) {
var s = state.view.getState(model.getEdgeAt(state.cell, i));
if (s != null)
{
if (s != null) {
this.moveState(s, 0, 0);
}
}
};
}
export default mxCellStatePreview;

55
src/js/view/mxConnectionConstraint.js
View File

@ -2,33 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxConnectionConstraint
*
* Defines an object that contains the constraints about how to connect one
* side of an edge to its terminal.
*
* Constructor: mxConnectionConstraint
*
* Constructs a new connection constraint for the given point and boolean
* arguments.
*
* Parameters:
*
* point - Optional <mxPoint> that specifies the fixed location of the point
* in relative coordinates. Default is null.
* perimeter - Optional boolean that specifies if the fixed point should be
* projected onto the perimeter of the terminal. Default is true.
*/
function mxConnectionConstraint(point, perimeter, name, dx, dy)
{
this.point = point;
this.perimeter = (perimeter != null) ? perimeter : true;
this.name = name;
this.dx = dx? dx : 0;
this.dy = dy? dy : 0;
};
class mxConnectionConstraint {
/**
* Variable: point
*
@ -65,3 +40,31 @@ dx = null;
*/
dy = null;
/**
* Class: mxConnectionConstraint
*
* Defines an object that contains the constraints about how to connect one
* side of an edge to its terminal.
*
* Constructor: mxConnectionConstraint
*
* Constructs a new connection constraint for the given point and boolean
* arguments.
*
* Parameters:
*
* point - Optional <mxPoint> that specifies the fixed location of the point
* in relative coordinates. Default is null.
* perimeter - Optional boolean that specifies if the fixed point should be
* projected onto the perimeter of the terminal. Default is true.
*/
constructor(point, perimeter, name, dx, dy) {
this.point = point;
this.perimeter = (perimeter != null) ? perimeter : true;
this.name = name;
this.dx = dx ? dx : 0;
this.dy = dy ? dy : 0;
};
}
export default mxConnectionConstraint;

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

215
src/js/view/mxGraphSelectionModel.js
View File

@ -2,6 +2,45 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxUndoableEdit from "../util/mxUndoableEdit";
import mxEventSource from "../util/mxEventSource";
import mxEventObject from "../util/mxEventObject";
class mxGraphSelectionModel extends mxEventSource {
/**
* Variable: doneResource
*
* Specifies the resource key for the status message after a long operation.
* If the resource for this key does not exist then the value is used as
* the status message. Default is 'done'.
*/
doneResource = (mxClient.language != 'none') ? 'done' : '';
/**
* Variable: updatingSelectionResource
*
* Specifies the resource key for the status message while the selection is
* being updated. If the resource for this key does not exist then the
* value is used as the status message. Default is 'updatingSelection'.
*/
updatingSelectionResource = (mxClient.language != 'none') ? 'updatingSelection' : '';
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
graph = null;
/**
* Variable: singleSelection
*
* Specifies if only one selected item at a time is allowed.
* Default is false.
*/
singleSelection = false;
/**
* Class: mxGraphSelectionModel
*
@ -41,58 +80,17 @@
*
* graph - Reference to the enclosing <mxGraph>.
*/
function mxGraphSelectionModel(graph)
{
constructor(graph) {
this.graph = graph;
this.cells = [];
};
/**
* Extends mxEventSource.
*/
mxGraphSelectionModel.prototype = new mxEventSource();
constructor = mxGraphSelectionModel;
/**
* Variable: doneResource
*
* Specifies the resource key for the status message after a long operation.
* If the resource for this key does not exist then the value is used as
* the status message. Default is 'done'.
*/
doneResource = (mxClient.language != 'none') ? 'done' : '';
/**
* Variable: updatingSelectionResource
*
* Specifies the resource key for the status message while the selection is
* being updated. If the resource for this key does not exist then the
* value is used as the status message. Default is 'updatingSelection'.
*/
updatingSelectionResource = (mxClient.language != 'none') ? 'updatingSelection' : '';
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
graph = null;
/**
* Variable: singleSelection
*
* Specifies if only one selected item at a time is allowed.
* Default is false.
*/
singleSelection = false;
/**
* Function: isSingleSelection
*
* Returns <singleSelection> as a boolean.
*/
isSingleSelection = ()=>
{
isSingleSelection = () => {
return this.singleSelection;
};
@ -106,8 +104,7 @@ isSingleSelection = ()=>
* singleSelection - Boolean that specifies the new value for
* <singleSelection>.
*/
setSingleSelection = (singleSelection)=>
{
setSingleSelection = (singleSelection) => {
this.singleSelection = singleSelection;
};
@ -116,10 +113,8 @@ setSingleSelection = (singleSelection)=>
*
* Returns true if the given <mxCell> is selected.
*/
isSelected = (cell)=>
{
if (cell != null)
{
isSelected = (cell) => {
if (cell != null) {
return mxUtils.indexOf(this.cells, cell) >= 0;
}
@ -131,9 +126,8 @@ isSelected = (cell)=>
*
* Returns true if no cells are currently selected.
*/
isEmpty = ()=>
{
return this.cells.length == 0;
isEmpty = () => {
return this.cells.length === 0;
};
/**
@ -142,8 +136,7 @@ isEmpty = ()=>
* Clears the selection and fires a <change> event if the selection was not
* empty.
*/
clear = ()=>
{
clear = () => {
this.changeSelection(null, this.cells);
};
@ -156,10 +149,8 @@ clear = ()=>
*
* cell - <mxCell> to be selected.
*/
setCell = (cell)=>
{
if (cell != null)
{
setCell = (cell) => {
if (cell != null) {
this.setCells([cell]);
}
};
@ -173,21 +164,16 @@ setCell = (cell)=>
*
* cells - Array of <mxCells> to be selected.
*/
setCells = (cells)=>
{
if (cells != null)
{
if (this.singleSelection)
{
setCells = (cells) => {
if (cells != null) {
if (this.singleSelection) {
cells = [this.getFirstSelectableCell(cells)];
}
var tmp = [];
for (var i = 0; i < cells.length; i++)
{
if (this.graph.isCellSelectable(cells[i]))
{
for (var i = 0; i < cells.length; i++) {
if (this.graph.isCellSelectable(cells[i])) {
tmp.push(cells[i]);
}
}
@ -201,14 +187,10 @@ setCells = (cells)=>
*
* Returns the first selectable cell in the given array of cells.
*/
getFirstSelectableCell = (cells)=>
{
if (cells != null)
{
for (var i = 0; i < cells.length; i++)
{
if (this.graph.isCellSelectable(cells[i]))
{
getFirstSelectableCell = (cells) => {
if (cells != null) {
for (var i = 0; i < cells.length; i++) {
if (this.graph.isCellSelectable(cells[i])) {
return cells[i];
}
}
@ -226,10 +208,8 @@ getFirstSelectableCell = (cells)=>
*
* cell - <mxCell> to add to the selection.
*/
addCell = (cell)=>
{
if (cell != null)
{
addCell = (cell) => {
if (cell != null) {
this.addCells([cell]);
}
};
@ -244,25 +224,20 @@ addCell = (cell)=>
*
* cells - Array of <mxCells> to add to the selection.
*/
addCells = (cells)=>
{
if (cells != null)
{
addCells = (cells) => {
if (cells != null) {
var remove = null;
if (this.singleSelection)
{
if (this.singleSelection) {
remove = this.cells;
cells = [this.getFirstSelectableCell(cells)];
}
var tmp = [];
for (var i = 0; i < cells.length; i++)
{
for (var i = 0; i < cells.length; i++) {
if (!this.isSelected(cells[i]) &&
this.graph.isCellSelectable(cells[i]))
{
this.graph.isCellSelectable(cells[i])) {
tmp.push(cells[i]);
}
}
@ -281,10 +256,8 @@ addCells = (cells)=>
*
* cell - <mxCell> to remove from the selection.
*/
removeCell = (cell)=>
{
if (cell != null)
{
removeCell = (cell) => {
if (cell != null) {
this.removeCells([cell]);
}
};
@ -292,16 +265,12 @@ removeCell = (cell)=>
/**
* Function: removeCells
*/
removeCells = (cells)=>
{
if (cells != null)
{
removeCells = (cells) => {
if (cells != null) {
var tmp = [];
for (var i = 0; i < cells.length; i++)
{
if (this.isSelected(cells[i]))
{
for (var i = 0; i < cells.length; i++) {
if (this.isSelected(cells[i])) {
tmp.push(cells[i]);
}
}
@ -320,15 +289,13 @@ removeCells = (cells)=>
* added - Array of <mxCell> to add to the selection.
* remove - Array of <mxCell> to remove from the selection.
*/
changeSelection = (added, removed)=>
{
changeSelection = (added, removed) => {
if ((added != null &&
added.length > 0 &&
added[0] != null) ||
(removed != null &&
removed.length > 0 &&
removed[0] != null))
{
removed[0] != null)) {
var change = new mxSelectionChange(this, added, removed);
change.execute();
var edit = new mxUndoableEdit(this, false);
@ -347,11 +314,9 @@ changeSelection = (added, removed)=>
*
* cell - <mxCell> to add to the selection.
*/
cellAdded = (cell)=>
{
cellAdded = (cell) => {
if (cell != null &&
!this.isSelected(cell))
{
!this.isSelected(cell)) {
this.cells.push(cell);
}
};
@ -366,14 +331,11 @@ cellAdded = (cell)=>
*
* cell - <mxCell> to remove from the selection.
*/
cellRemoved = (cell)=>
{
if (cell != null)
{
cellRemoved = (cell) => {
if (cell != null) {
var index = mxUtils.indexOf(this.cells, cell);
if (index >= 0)
{
if (index >= 0) {
this.cells.splice(index, 1);
}
}
@ -388,8 +350,7 @@ cellRemoved = (cell)=>
*
* Constructs a change of the current root in the given view.
*/
function mxSelectionChange(selectionModel, added, removed)
{
mxSelectionChange = (selectionModel, added, removed) => {
this.selectionModel = selectionModel;
this.added = (added != null) ? added.slice() : null;
this.removed = (removed != null) ? removed.slice() : null;
@ -400,25 +361,20 @@ function mxSelectionChange(selectionModel, added, removed)
*
* Changes the current root of the view.
*/
execute = ()=>
{
execute = () => {
var t0 = mxLog.enter('mxSelectionChange.execute');
window.status = mxResources.get(
this.selectionModel.updatingSelectionResource) ||
this.selectionModel.updatingSelectionResource;
if (this.removed != null)
{
for (var i = 0; i < this.removed.length; i++)
{
if (this.removed != null) {
for (var i = 0; i < this.removed.length; i++) {
this.selectionModel.cellRemoved(this.removed[i]);
}
}
if (this.added != null)
{
for (var i = 0; i < this.added.length; i++)
{
if (this.added != null) {
for (var i = 0; i < this.added.length; i++) {
this.selectionModel.cellAdded(this.added[i]);
}
}
@ -434,3 +390,6 @@ execute = ()=>
this.selectionModel.fireEvent(new mxEventObject(mxEvent.CHANGE,
'added', this.added, 'removed', this.removed));
};
}
export default mxGraphSelectionModel;

1231
src/js/view/mxGraphView.js
View File

File diff suppressed because it is too large Load Diff

276
src/js/view/mxLayoutManager.js
View File

@ -2,76 +2,10 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxLayoutManager
*
* Implements a layout manager that runs a given layout after any changes to the graph:
*
* Example:
*
* (code)
* var layoutMgr = new mxLayoutManager(graph);
* layoutMgr.getLayout = (cell, eventName)=>
* {
* return layout;
* };
* (end)
*
* See <getLayout> for a description of the possible eventNames.
*
* Event: mxEvent.LAYOUT_CELLS
*
* Fires between begin- and endUpdate after all cells have been layouted in
* <layoutCells>. The <code>cells</code> property contains all cells that have
* been passed to <layoutCells>.
*
* Constructor: mxLayoutManager
*
* Constructs a new automatic layout for the given graph.
*
* Arguments:
*
* graph - Reference to the enclosing graph.
*/
function mxLayoutManager(graph)
{
// Executes the layout before the changes are dispatched
this.undoHandler = mxUtils.bind(this, (sender, evt)=>
{
if (this.isEnabled())
{
this.beforeUndo(evt.getProperty('edit'));
}
});
// Notifies the layout of a move operation inside a parent
this.moveHandler = mxUtils.bind(this, (sender, evt)=>
{
if (this.isEnabled())
{
this.cellsMoved(evt.getProperty('cells'), evt.getProperty('event'));
}
});
// Notifies the layout of a move operation inside a parent
this.resizeHandler = mxUtils.bind(this, (sender, evt)=>
{
if (this.isEnabled())
{
this.cellsResized(evt.getProperty('cells'), evt.getProperty('bounds'),
evt.getProperty('previous'));
}
});
this.setGraph(graph);
};
/**
* Extends mxEventSource.
*/
mxLayoutManager.prototype = new mxEventSource();
constructor = mxLayoutManager;
import mxEventSource from "../util/mxEventSource";
class mxLayoutManager extends mxEventSource {
/**
* Variable: graph
*
@ -115,14 +49,70 @@ moveHandler = null;
*/
resizeHandler = null;
/**
* Class: mxLayoutManager
*
* Implements a layout manager that runs a given layout after any changes to the graph:
*
* Example:
*
* (code)
* var layoutMgr = new mxLayoutManager(graph);
* layoutMgr.getLayout = (cell, eventName)=>
* {
* return layout;
* };
* (end)
*
* See <getLayout> for a description of the possible eventNames.
*
* Event: mxEvent.LAYOUT_CELLS
*
* Fires between begin- and endUpdate after all cells have been layouted in
* <layoutCells>. The <code>cells</code> property contains all cells that have
* been passed to <layoutCells>.
*
* Constructor: mxLayoutManager
*
* Constructs a new automatic layout for the given graph.
*
* Arguments:
*
* graph - Reference to the enclosing graph.
*/
constructor(graph) {
// Executes the layout before the changes are dispatched
this.undoHandler = (sender, evt) => {
if (this.isEnabled()) {
this.beforeUndo(evt.getProperty('edit'));
}
};
// Notifies the layout of a move operation inside a parent
this.moveHandler = (sender, evt) => {
if (this.isEnabled()) {
this.cellsMoved(evt.getProperty('cells'), evt.getProperty('event'));
}
};
// Notifies the layout of a move operation inside a parent
this.resizeHandler = (sender, evt) => {
if (this.isEnabled()) {
this.cellsResized(evt.getProperty('cells'), evt.getProperty('bounds'),
evt.getProperty('previous'));
}
};
this.setGraph(graph);
};
/**
* Function: isEnabled
*
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = ()=>
{
isEnabled = () => {
return this.enabled;
};
@ -136,8 +126,7 @@ isEnabled = ()=>
*
* enabled - Boolean that specifies the new enabled state.
*/
setEnabled = (enabled)=>
{
setEnabled = (enabled) => {
this.enabled = enabled;
};
@ -148,8 +137,7 @@ setEnabled = (enabled)=>
* should be executed whenever a cell layout (layout of the children of
* a cell) has been executed. This implementation returns <bubbling>.
*/
isBubbling = ()=>
{
isBubbling = () => {
return this.bubbling;
};
@ -158,8 +146,7 @@ isBubbling = ()=>
*
* Sets <bubbling>.
*/
setBubbling = (value)=>
{
setBubbling = (value) => {
this.bubbling = value;
};
@ -168,8 +155,7 @@ setBubbling = (value)=>
*
* Returns the graph that this layout operates on.
*/
getGraph = ()=>
{
getGraph = () => {
return this.graph;
};
@ -178,10 +164,8 @@ getGraph = ()=>
*
* Sets the graph that the layouts operate on.
*/
setGraph = (graph)=>
{
if (this.graph != null)
{
setGraph = (graph) => {
if (this.graph != null) {
var model = this.graph.getModel();
model.removeListener(this.undoHandler);
this.graph.removeListener(this.moveHandler);
@ -190,8 +174,7 @@ setGraph = (graph)=>
this.graph = graph;
if (this.graph != null)
{
if (this.graph != null) {
var model = this.graph.getModel();
model.addListener(mxEvent.BEFORE_UNDO, this.undoHandler);
this.graph.addListener(mxEvent.MOVE_CELLS, this.moveHandler);
@ -208,8 +191,7 @@ setGraph = (graph)=>
* <getLayout> will return a layout for the given cell for
* <mxEvent.BEGIN_UPDATE> or <mxEvent.END_UPDATE>.
*/
hasLayout = (cell)=>
{
hasLayout = (cell) => {
return this.getLayout(cell, mxEvent.LAYOUT_CELLS);
};
@ -224,8 +206,7 @@ hasLayout = (cell)=>
* check if a layout exists for the given cell. This is called
* from <hasLayout>.
*/
getLayout = (cell, eventName)=>
{
getLayout = (cell, eventName) => {
return null;
};
@ -239,8 +220,7 @@ getLayout = (cell, eventName)=>
* cell - Array of <mxCells> that have been moved.
* evt - Mouse event that represents the mousedown.
*/
beforeUndo = (undoableEdit)=>
{
beforeUndo = (undoableEdit) => {
this.executeLayoutForCells(this.getCellsForChanges(undoableEdit.changes));
};
@ -254,20 +234,16 @@ beforeUndo = (undoableEdit)=>
* cell - Array of <mxCells> that have been moved.
* evt - Mouse event that represents the mousedown.
*/
cellsMoved = (cells, evt)=>
{
if (cells != null && evt != null)
{
cellsMoved = (cells, evt) => {
if (cells != null && evt != null) {
var point = mxUtils.convertPoint(this.getGraph().container,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
var model = this.getGraph().getModel();
for (var i = 0; i < cells.length; i++)
{
for (var i = 0; i < cells.length; i++) {
var layout = this.getLayout(model.getParent(cells[i]), mxEvent.MOVE_CELLS);
if (layout != null)
{
if (layout != null) {
layout.moveCell(cells[i], point.x, point.y);
}
}
@ -284,18 +260,14 @@ cellsMoved = (cells, evt)=>
* cell - Array of <mxCells> that have been resized.
* bounds - <mxRectangle> taht represents the new bounds.
*/
cellsResized = (cells, bounds, prev)=>
{
if (cells != null && bounds != null)
{
cellsResized = (cells, bounds, prev) => {
if (cells != null && bounds != null) {
var model = this.getGraph().getModel();
for (var i = 0; i < cells.length; i++)
{
for (var i = 0; i < cells.length; i++) {
var layout = this.getLayout(model.getParent(cells[i]), mxEvent.RESIZE_CELLS);
if (layout != null)
{
if (layout != null) {
layout.resizeCell(cells[i], bounds[i], prev[i]);
}
}
@ -307,20 +279,15 @@ cellsResized = (cells, bounds, prev)=>
*
* Returns the cells for which a layout should be executed.
*/
getCellsForChanges = (changes)=>
{
getCellsForChanges = (changes) => {
var result = [];
for (var i = 0; i < changes.length; i++)
{
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
if (change instanceof mxRootChange)
{
if (change instanceof mxRootChange) {
return [];
}
else
{
} else {
result = result.concat(this.getCellsForChange(change));
}
}
@ -334,21 +301,15 @@ getCellsForChanges = (changes)=>
* Executes all layouts which have been scheduled during the
* changes.
*/
getCellsForChange = (change)=>
{
if (change instanceof mxChildChange)
{
getCellsForChange = (change) => {
if (change instanceof mxChildChange) {
return this.addCellsWithLayout(change.child,
this.addCellsWithLayout(change.previous));
}
else if (change instanceof mxTerminalChange ||
change instanceof mxGeometryChange)
{
} else if (change instanceof mxTerminalChange ||
change instanceof mxGeometryChange) {
return this.addCellsWithLayout(change.cell);
}
else if (change instanceof mxVisibleChange ||
change instanceof mxStyleChange)
{
} else if (change instanceof mxVisibleChange ||
change instanceof mxStyleChange) {
return this.addCellsWithLayout(change.cell);
}
@ -360,8 +321,7 @@ getCellsForChange = (change)=>
*
* Adds all ancestors of the given cell that have a layout.
*/
addCellsWithLayout = (cell, result)=>
{
addCellsWithLayout = (cell, result) => {
return this.addDescendantsWithLayout(cell,
this.addAncestorsWithLayout(cell, result));
};
@ -371,21 +331,17 @@ addCellsWithLayout = (cell, result)=>
*
* Adds all ancestors of the given cell that have a layout.
*/
addAncestorsWithLayout = (cell, result)=>
{
addAncestorsWithLayout = (cell, result) => {
result = (result != null) ? result : [];
if (cell != null)
{
if (cell != null) {
var layout = this.hasLayout(cell);
if (layout != null)
{
if (layout != null) {
result.push(cell);
}
if (this.isBubbling())
{
if (this.isBubbling()) {
var model = this.getGraph().getModel();
this.addAncestorsWithLayout(
model.getParent(cell), result);
@ -400,20 +356,16 @@ addAncestorsWithLayout = (cell, result)=>
*
* Adds all descendants of the given cell that have a layout.
*/
addDescendantsWithLayout = (cell, result)=>
{
addDescendantsWithLayout = (cell, result) => {
result = (result != null) ? result : [];
if (cell != null && this.hasLayout(cell))
{
if (cell != null && this.hasLayout(cell)) {
var model = this.getGraph().getModel();
for (var i = 0; i < model.getChildCount(cell); i++)
{
for (var i = 0; i < model.getChildCount(cell); i++) {
var child = model.getChildAt(cell, i);
if (this.hasLayout(child))
{
if (this.hasLayout(child)) {
result.push(child);
this.addDescendantsWithLayout(child, result);
}
@ -431,8 +383,7 @@ addDescendantsWithLayout = (cell, result)=>
* <mxEvent.BEGIN_UPDATE>, in the second phase layouts for parent cells are
* executed before layouts for child cells with <mxEvent.END_UPDATE>.
*/
executeLayoutForCells = (cells)=>
{
executeLayoutForCells = (cells) => {
var sorted = mxUtils.sortCells(cells, false);
this.layoutCells(sorted, true);
this.layoutCells(sorted.reverse(), false);
@ -443,31 +394,24 @@ executeLayoutForCells = (cells)=>
*
* Executes all layouts which have been scheduled during the changes.
*/
layoutCells = (cells, bubble)=>
{
if (cells.length > 0)
{
layoutCells = (cells, bubble) => {
if (cells.length > 0) {
// Invokes the layouts while removing duplicates
var model = this.getGraph().getModel();
model.beginUpdate();
try
{
try {
var last = null;
for (var i = 0; i < cells.length; i++)
{
if (cells[i] != model.getRoot() && cells[i] != last)
{
for (var i = 0; i < cells.length; i++) {
if (cells[i] != model.getRoot() && cells[i] != last) {
this.executeLayout(cells[i], bubble);
last = cells[i];
}
}
this.fireEvent(new mxEventObject(mxEvent.LAYOUT_CELLS, 'cells', cells));
}
finally
{
} finally {
model.endUpdate();
}
}
@ -478,13 +422,11 @@ layoutCells = (cells, bubble)=>
*
* Executes the given layout on the given parent.
*/
executeLayout = (cell, bubble)=>
{
executeLayout = (cell, bubble) => {
var layout = this.getLayout(cell, (bubble) ?
mxEvent.BEGIN_UPDATE : mxEvent.END_UPDATE);
if (layout != null)
{
if (layout != null) {
layout.execute(cell);
}
};
@ -494,7 +436,9 @@ executeLayout = (cell, bubble)=>
*
* Removes all handlers from the <graph> and deletes the reference to it.
*/
destroy = ()=>
{
destroy = () => {
this.setGraph(null);
};
}
export default mxLayoutManager;

166
src/js/view/mxMultiplicity.js
View File

@ -2,66 +2,8 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxMultiplicity
*
* Defines invalid connections along with the error messages that they produce.
* To add or remove rules on a graph, you must add/remove instances of this
* class to <mxGraph.multiplicities>.
*
* Example:
*
* (code)
* graph.multiplicities.push(new mxMultiplicity(
* true, 'rectangle', null, null, 0, 2, ['circle'],
* 'Only 2 targets allowed',
* 'Only circle targets allowed'));
* (end)
*
* Defines a rule where each rectangle must be connected to no more than 2
* circles and no other types of targets are allowed.
*
* Constructor: mxMultiplicity
*
* Instantiate class mxMultiplicity in order to describe allowed
* connections in a graph. Not all constraints can be enforced while
* editing, some must be checked at validation time. The <countError> and
* <typeError> are treated as resource keys in <mxResources>.
*
* Parameters:
*
* source - Boolean indicating if this rule applies to the source or target
* terminal.
* type - Type of the source or target terminal that this rule applies to.
* See <type> for more information.
* attr - Optional attribute name to match the source or target terminal.
* value - Optional attribute value to match the source or target terminal.
* min - Minimum number of edges for this rule. Default is 1.
* max - Maximum number of edges for this rule. n means infinite. Default
* is n.
* validNeighbors - Array of types of the opposite terminal for which this
* rule applies.
* countError - Error to be displayed for invalid number of edges.
* typeError - Error to be displayed for invalid opposite terminals.
* validNeighborsAllowed - Optional boolean indicating if the array of
* opposite types should be valid or invalid.
*/
function mxMultiplicity(source, type, attr, value, min, max,
validNeighbors, countError, typeError, validNeighborsAllowed)
{
this.source = source;
this.type = type;
this.attr = attr;
this.value = value;
this.min = (min != null) ? min : 0;
this.max = (max != null) ? max : 'n';
this.validNeighbors = validNeighbors;
this.countError = mxResources.get(countError) || countError;
this.typeError = mxResources.get(typeError) || typeError;
this.validNeighborsAllowed = (validNeighborsAllowed != null) ?
validNeighborsAllowed : true;
};
class mxMultiplicity {
/**
* Variable: type
*
@ -145,6 +87,65 @@ countError = null;
*/
typeError = null;
/**
* Class: mxMultiplicity
*
* Defines invalid connections along with the error messages that they produce.
* To add or remove rules on a graph, you must add/remove instances of this
* class to <mxGraph.multiplicities>.
*
* Example:
*
* (code)
* graph.multiplicities.push(new mxMultiplicity(
* true, 'rectangle', null, null, 0, 2, ['circle'],
* 'Only 2 targets allowed',
* 'Only circle targets allowed'));
* (end)
*
* Defines a rule where each rectangle must be connected to no more than 2
* circles and no other types of targets are allowed.
*
* Constructor: mxMultiplicity
*
* Instantiate class mxMultiplicity in order to describe allowed
* connections in a graph. Not all constraints can be enforced while
* editing, some must be checked at validation time. The <countError> and
* <typeError> are treated as resource keys in <mxResources>.
*
* Parameters:
*
* source - Boolean indicating if this rule applies to the source or target
* terminal.
* type - Type of the source or target terminal that this rule applies to.
* See <type> for more information.
* attr - Optional attribute name to match the source or target terminal.
* value - Optional attribute value to match the source or target terminal.
* min - Minimum number of edges for this rule. Default is 1.
* max - Maximum number of edges for this rule. n means infinite. Default
* is n.
* validNeighbors - Array of types of the opposite terminal for which this
* rule applies.
* countError - Error to be displayed for invalid number of edges.
* typeError - Error to be displayed for invalid opposite terminals.
* validNeighborsAllowed - Optional boolean indicating if the array of
* opposite types should be valid or invalid.
*/
constructor(source, type, attr, value, min, max,
validNeighbors, countError, typeError, validNeighborsAllowed) {
this.source = source;
this.type = type;
this.attr = attr;
this.value = value;
this.min = (min != null) ? min : 0;
this.max = (max != null) ? max : 'n';
this.validNeighbors = validNeighbors;
this.countError = mxResources.get(countError) || countError;
this.typeError = mxResources.get(typeError) || typeError;
this.validNeighborsAllowed = (validNeighborsAllowed != null) ?
validNeighborsAllowed : true;
};
/**
* Function: check
*
@ -160,26 +161,21 @@ typeError = null;
* sourceOut - Number of outgoing edges from the source terminal.
* targetIn - Number of incoming edges for the target terminal.
*/
check = (graph, edge, source, target, sourceOut, targetIn)=>
{
check = (graph, edge, source, target, sourceOut, targetIn) => {
var error = '';
if ((this.source && this.checkTerminal(graph, source, edge)) ||
(!this.source && this.checkTerminal(graph, target, edge)))
{
(!this.source && this.checkTerminal(graph, target, edge))) {
if (this.countError != null &&
((this.source && (this.max == 0 || (sourceOut >= this.max))) ||
(!this.source && (this.max == 0 || (targetIn >= this.max)))))
{
(!this.source && (this.max == 0 || (targetIn >= this.max))))) {
error += this.countError + '\n';
}
if (this.validNeighbors != null && this.typeError != null && this.validNeighbors.length > 0)
{
if (this.validNeighbors != null && this.typeError != null && this.validNeighbors.length > 0) {
var isValid = this.checkNeighbors(graph, edge, source, target);
if (!isValid)
{
if (!isValid) {
error += this.typeError + '\n';
}
}
@ -194,24 +190,19 @@ check = (graph, edge, source, target, sourceOut, targetIn)=>
* Checks if there are any valid neighbours in <validNeighbors>. This is only
* called if <validNeighbors> is a non-empty array.
*/
checkNeighbors = (graph, edge, source, target)=>
{
checkNeighbors = (graph, edge, source, target) => {
var sourceValue = graph.model.getValue(source);
var targetValue = graph.model.getValue(target);
var isValid = !this.validNeighborsAllowed;
var valid = this.validNeighbors;
for (var j = 0; j < valid.length; j++)
{
for (var j = 0; j < valid.length; j++) {
if (this.source &&
this.checkType(graph, targetValue, valid[j]))
{
this.checkType(graph, targetValue, valid[j])) {
isValid = this.validNeighborsAllowed;
break;
}
else if (!this.source &&
this.checkType(graph, sourceValue, valid[j]))
{
} else if (!this.source &&
this.checkType(graph, sourceValue, valid[j])) {
isValid = this.validNeighborsAllowed;
break;
}
@ -227,8 +218,7 @@ checkNeighbors = (graph, edge, source, target)=>
* given cell is the source or target of the given edge, depending on
* <source>. This implementation uses <checkType> on the terminal's value.
*/
checkTerminal = (graph, terminal, edge)=>
{
checkTerminal = (graph, terminal, edge) => {
var value = graph.model.getValue(terminal);
return this.checkType(graph, value, this.type, this.attr, this.value);
@ -239,19 +229,17 @@ checkTerminal = (graph, terminal, edge)=>
*
* Checks the type of the given value.
*/
checkType = (graph, value, type, attr, attrValue)=>
{
if (value != null)
{
checkType = (graph, value, type, attr, attrValue) => {
if (value != null) {
if (!isNaN(value.nodeType)) // Checks if value is a DOM node
{
return mxUtils.isNode(value, type, attr, attrValue);
}
else
{
} else {
return value == type;
}
}
return false;
};
}
export default mxMultiplicity;

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

@ -2,6 +2,15 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import mxConstants from "../util/mxConstants";
import mxPoint from "../util/mxPoint";
import mxRectangle from "../util/mxRectangle";
import mxRectangleShape from "../shape/mxRectangleShape";
import mxMouseEvent from "FIXME";
import mxGraph from "./mxGraph";
class mxOutline {
/**
* Class: mxOutline
*
@ -54,12 +63,10 @@
* source - <mxGraph> to create the outline for.
* container - DOM node that will contain the outline.
*/
function mxOutline(source, container)
{
constructor(source, container) {
this.source = source;
if (container != null)
{
if (container != null) {
this.init(container);
}
};
@ -165,8 +172,7 @@ suspended = false;
*
* Creates the <mxGraph> used in the outline.
*/
createGraph = (container)=>
{
createGraph = (container) => {
var graph = new mxGraph(container, this.source.getModel(), this.graphRenderHint, this.source.getStylesheet());
graph.foldingEnabled = false;
graph.autoScroll = false;
@ -179,23 +185,19 @@ createGraph = (container)=>
*
* Initializes the outline inside the given container.
*/
init = (container)=>
{
init = (container) => {
this.outline = this.createGraph(container);
// Do not repaint when suspended
var outlineGraphModelChanged = this.outline.graphModelChanged;
this.outline.graphModelChanged = mxUtils.bind(this, (changes)=>
{
if (!this.suspended && this.outline != null)
{
this.outline.graphModelChanged = mxUtils.bind(this, (changes) => {
if (!this.suspended && this.outline != null) {
outlineGraphModelChanged.apply(this.outline, arguments);
}
});
// Enables faster painting in SVG
if (mxClient.IS_SVG)
{
if (mxClient.IS_SVG) {
var node = this.outline.getView().getCanvas().parentNode;
node.setAttribute('shape-rendering', 'optimizeSpeed');
node.setAttribute('image-rendering', 'optimizeSpeed');
@ -205,10 +207,8 @@ init = (container)=>
this.outline.labelsVisible = this.labelsVisible;
this.outline.setEnabled(false);
this.updateHandler = mxUtils.bind(this, (sender, evt)=>
{
if (!this.suspended && !this.active)
{
this.updateHandler = mxUtils.bind(this, (sender, evt) => {
if (!this.suspended && !this.active) {
this.update();
}
});
@ -228,18 +228,15 @@ init = (container)=>
// Updates blue rectangle on scroll
mxEvent.addListener(this.source.container, 'scroll', this.updateHandler);
this.panHandler = mxUtils.bind(this, (sender)=>
{
if (this.updateOnPan)
{
this.panHandler = mxUtils.bind(this, (sender) => {
if (this.updateOnPan) {
this.updateHandler.apply(this, arguments);
}
});
this.source.addListener(mxEvent.PAN, this.panHandler);
// Refreshes the graph in the outline after a refresh of the main graph
this.refreshHandler = mxUtils.bind(this, (sender)=>
{
this.refreshHandler = mxUtils.bind(this, (sender) => {
this.outline.setStylesheet(this.source.getStylesheet());
this.outline.refresh();
});
@ -251,10 +248,8 @@ init = (container)=>
mxConstants.OUTLINE_COLOR, mxConstants.OUTLINE_STROKEWIDTH);
this.selectionBorder.dialect = this.outline.dialect;
if (this.forceVmlHandles)
{
this.selectionBorder.isHtmlAllowed = ()=>
{
if (this.forceVmlHandles) {
this.selectionBorder.isHtmlAllowed = () => {
return false;
};
}
@ -265,17 +260,14 @@ init = (container)=>
// complete gesture on the event target. This is needed because all the events
// are routed via the initial element even if that element is removed from the
// DOM, which happens when we repaint the selection border and zoom handles.
var handler = mxUtils.bind(this, (evt)=>
{
var handler = mxUtils.bind(this, (evt) => {
var t = mxEvent.getSource(evt);
var redirect = mxUtils.bind(this, (evt)=>
{
var redirect = mxUtils.bind(this, (evt) => {
this.outline.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt));
});
var redirect2 = mxUtils.bind(this, (evt)=>
{
var redirect2 = mxUtils.bind(this, (evt) => {
mxEvent.removeGestureListeners(t, null, redirect, redirect2);
this.outline.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt));
});
@ -289,18 +281,15 @@ init = (container)=>
// Creates a small blue rectangle for sizing (sizer handle)
this.sizer = this.createSizer();
if (this.forceVmlHandles)
{
this.sizer.isHtmlAllowed = ()=>
{
if (this.forceVmlHandles) {
this.sizer.isHtmlAllowed = () => {
return false;
};
}
this.sizer.init(this.outline.getView().getOverlayPane());
if (this.enabled)
{
if (this.enabled) {
this.sizer.node.style.cursor = 'nwse-resize';
}
@ -319,8 +308,7 @@ init = (container)=>
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = ()=>
{
isEnabled = () => {
return this.enabled;
};
@ -334,8 +322,7 @@ isEnabled = ()=>
*
* value - Boolean that specifies the new enabled state.
*/
setEnabled = (value)=>
{
setEnabled = (value) => {
this.enabled = value;
};
@ -349,8 +336,7 @@ setEnabled = (value)=>
*
* value - Boolean that specifies the new enabled state.
*/
setZoomEnabled = (value)=>
{
setZoomEnabled = (value) => {
this.sizer.node.style.visibility = (value) ? 'visible' : 'hidden';
};
@ -359,8 +345,7 @@ setZoomEnabled = (value)=>
*
* Invokes <update> and revalidate the outline. This method is deprecated.
*/
refresh = ()=>
{
refresh = () => {
this.update(true);
};
@ -369,17 +354,13 @@ refresh = ()=>
*
* Creates the shape used as the sizer.
*/
createSizer = ()=>
{
if (this.sizerImage != null)
{
createSizer = () => {
if (this.sizerImage != null) {
var sizer = new mxImageShape(new mxRectangle(0, 0, this.sizerImage.width, this.sizerImage.height), this.sizerImage.src);
sizer.dialect = this.outline.dialect;
return sizer;
}
else
{
} else {
var sizer = new mxRectangleShape(new mxRectangle(0, 0, this.sizerSize, this.sizerSize),
mxConstants.OUTLINE_HANDLE_FILLCOLOR, mxConstants.OUTLINE_HANDLE_STROKECOLOR);
sizer.dialect = this.outline.dialect;
@ -393,8 +374,7 @@ createSizer = ()=>
*
* Returns the size of the source container.
*/
getSourceContainerSize = ()=>
{
getSourceContainerSize = () => {
return new mxRectangle(0, 0, this.source.container.scrollWidth, this.source.container.scrollHeight);
};
@ -403,8 +383,7 @@ getSourceContainerSize = ()=>
*
* Returns the offset for drawing the outline graph.
*/
getOutlineOffset = (scale)=>
{
getOutlineOffset = (scale) => {
return null;
};
@ -413,8 +392,7 @@ getOutlineOffset = (scale)=>
*
* Returns the graph bound boxing of the source.
*/
getSourceGraphBounds = ()=>
{
getSourceGraphBounds = () => {
return this.source.getGraphBounds();
};
@ -423,11 +401,9 @@ getSourceGraphBounds = ()=>
*
* Updates the outline.
*/
update = (revalidate)=>
{
update = (revalidate) => {
if (this.source != null && this.source.container != null &&
this.outline != null && this.outline.container != null)
{
this.outline != null && this.outline.container != null) {
var sourceScale = this.source.view.scale;
var scaledGraphBounds = this.getSourceGraphBounds();
var unscaledGraphBounds = new mxRectangle(scaledGraphBounds.x / sourceScale + this.source.panDx,
@ -452,18 +428,15 @@ update = (revalidate)=>
var outlineScale = Math.min(availableWidth / completeWidth, availableHeight / completeHeight);
var scale = (isNaN(outlineScale)) ? this.minScale : Math.max(this.minScale, outlineScale);
if (scale > 0)
{
if (this.outline.getView().scale != scale)
{
if (scale > 0) {
if (this.outline.getView().scale != scale) {
this.outline.getView().scale = scale;
revalidate = true;
}
var navView = this.outline.getView();
if (navView.currentRoot != this.source.getView().currentRoot)
{
if (navView.currentRoot != this.source.getView().currentRoot) {
navView.setCurrentRoot(this.source.getView().currentRoot);
}
@ -473,23 +446,19 @@ update = (revalidate)=>
var off = this.getOutlineOffset(scale);
if (off != null)
{
if (off != null) {
tx += off.x;
ty += off.y;
}
if (unscaledGraphBounds.x < 0)
{
if (unscaledGraphBounds.x < 0) {
tx = tx - unscaledGraphBounds.x;
}
if (unscaledGraphBounds.y < 0)
{
if (unscaledGraphBounds.y < 0) {
ty = ty - unscaledGraphBounds.y;
}
if (navView.translate.x != tx || navView.translate.y != ty)
{
if (navView.translate.x != tx || navView.translate.y != ty) {
navView.translate.x = tx;
navView.translate.y = ty;
revalidate = true;
@ -515,8 +484,7 @@ update = (revalidate)=>
var b = this.selectionBorder.bounds;
if (b.x != this.bounds.x || b.y != this.bounds.y || b.width != this.bounds.width || b.height != this.bounds.height)
{
if (b.x != this.bounds.x || b.y != this.bounds.y || b.width != this.bounds.width || b.height != this.bounds.height) {
this.selectionBorder.bounds = this.bounds;
this.selectionBorder.redraw();
}
@ -526,19 +494,16 @@ update = (revalidate)=>
var b2 = new mxRectangle(this.bounds.x + this.bounds.width - b.width / 2,
this.bounds.y + this.bounds.height - b.height / 2, b.width, b.height);
if (b.x != b2.x || b.y != b2.y || b.width != b2.width || b.height != b2.height)
{
if (b.x != b2.x || b.y != b2.y || b.width != b2.width || b.height != b2.height) {
this.sizer.bounds = b2;
// Avoids update of visibility in redraw for VML
if (this.sizer.node.style.visibility != 'hidden')
{
if (this.sizer.node.style.visibility != 'hidden') {
this.sizer.redraw();
}
}
if (revalidate)
{
if (revalidate) {
this.outline.view.revalidate();
}
}
@ -550,10 +515,8 @@ update = (revalidate)=>
*
* Handles the event by starting a translation or zoom.
*/
mouseDown = (sender, me)=>
{
if (this.enabled && this.showViewport)
{
mouseDown = (sender, me) => {
if (this.enabled && this.showViewport) {
var tol = (!mxEvent.isMouseEvent(me.getEvent())) ? this.source.tolerance : 0;
var hit = (this.source.allowHandleBoundsCheck && tol > 0) ?
new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol) : null;
@ -562,13 +525,10 @@ mouseDown = (sender, me)=>
this.startY = me.getY();
this.active = true;
if (this.source.useScrollbarsForPanning && mxUtils.hasScrollbars(this.source.container))
{
if (this.source.useScrollbarsForPanning && mxUtils.hasScrollbars(this.source.container)) {
this.dx0 = this.source.container.scrollLeft;
this.dy0 = this.source.container.scrollTop;
}
else
{
} else {
this.dx0 = 0;
this.dy0 = 0;
}
@ -583,10 +543,8 @@ mouseDown = (sender, me)=>
* Handles the event by previewing the viewrect in <graph> and updating the
* rectangle that represents the viewrect in the outline.
*/
mouseMove = (sender, me)=>
{
if (this.active)
{
mouseMove = (sender, me) => {
if (this.active) {
this.selectionBorder.node.style.display = (this.showViewport) ? '' : 'none';
this.sizer.node.style.display = this.selectionBorder.node.style.display;
@ -595,8 +553,7 @@ mouseMove = (sender, me)=>
var dy = delta.y;
var bounds = null;
if (!this.zoom)
{
if (!this.zoom) {
// Previews the panning on the source graph
var scale = this.outline.getView().scale;
bounds = new mxRectangle(this.bounds.x + dx,
@ -608,9 +565,7 @@ mouseMove = (sender, me)=>
dy /= scale;
dy *= this.source.getView().scale;
this.source.panGraph(-dx - this.dx0, -dy - this.dy0);
}
else
{
} else {
// Does *not* preview zooming on the source graph
var container = this.source.container;
var viewRatio = container.clientWidth / container.clientHeight;
@ -631,8 +586,7 @@ mouseMove = (sender, me)=>
b.width, b.height);
// Avoids update of visibility in redraw for VML
if (this.sizer.node.style.visibility != 'hidden')
{
if (this.sizer.node.style.visibility != 'hidden') {
this.sizer.redraw();
}
@ -662,8 +616,7 @@ mouseMove = (sender, me)=>
* };
* (end)
*/
getTranslateForEvent = (me)=>
{
getTranslateForEvent = (me) => {
return new mxPoint(me.getX() - this.startX, me.getY() - this.startY);
};
@ -672,32 +625,25 @@ getTranslateForEvent = (me)=>
*
* Handles the event by applying the translation or zoom to <graph>.
*/
mouseUp = (sender, me)=>
{
if (this.active)
{
mouseUp = (sender, me) => {
if (this.active) {
var delta = this.getTranslateForEvent(me);
var dx = delta.x;
var dy = delta.y;
if (Math.abs(dx) > 0 || Math.abs(dy) > 0)
{
if (!this.zoom)
{
if (Math.abs(dx) > 0 || Math.abs(dy) > 0) {
if (!this.zoom) {
// Applies the new translation if the source
// has no scrollbars
if (!this.source.useScrollbarsForPanning ||
!mxUtils.hasScrollbars(this.source.container))
{
!mxUtils.hasScrollbars(this.source.container)) {
this.source.panGraph(0, 0);
dx /= this.outline.getView().scale;
dy /= this.outline.getView().scale;
var t = this.source.getView().translate;
this.source.getView().setTranslate(t.x - dx, t.y - dy);
}
}
else
{
} else {
// Applies the new zoom
var w = this.selectionBorder.bounds.width;
var scale = this.source.getView().scale;
@ -719,10 +665,8 @@ mouseUp = (sender, me)=>
*
* Destroy this outline and removes all listeners from <source>.
*/
destroy = ()=>
{
if (this.source != null)
{
destroy = () => {
if (this.source != null) {
this.source.removeListener(this.panHandler);
this.source.removeListener(this.refreshHandler);
this.source.getModel().removeListener(this.updateHandler);
@ -731,22 +675,22 @@ destroy = ()=>
this.source = null;
}
if (this.outline != null)
{
if (this.outline != null) {
this.outline.removeMouseListener(this);
this.outline.destroy();
this.outline = null;
}
if (this.selectionBorder != null)
{
if (this.selectionBorder != null) {
this.selectionBorder.destroy();
this.selectionBorder = null;
}
if (this.sizer != null)
{
if (this.sizer != null) {
this.sizer.destroy();
this.sizer = null;
}
};
}
export default mxOutline;

559
src/js/view/mxPerimeter.js
View File

@ -2,8 +2,11 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
var mxPerimeter =
{
import mxUtils from "../util/mxUtils";
import mxPoint from "../util/mxPoint";
var mxPerimeter = {
/**
* Class: mxPerimeter
*
@ -81,8 +84,7 @@ var mxPerimeter =
* of the perimeter and the line between the next and the center point is
* returned.
*/
RectanglePerimeter: function (bounds, vertex, next, orthogonal)
{
RectanglePerimeter: function (bounds, vertex, next, orthogonal) {
var cx = bounds.getCenterX();
var cy = bounds.getCenterY();
var dx = next.x - cx;
@ -94,57 +96,40 @@ var mxPerimeter =
var beta = pi2 - alpha;
var t = Math.atan2(bounds.height, bounds.width);
if (alpha < -pi + t || alpha > pi - t)
{
if (alpha < -pi + t || alpha > pi - t) {
// Left edge
p.x = bounds.x;
p.y = cy - bounds.width * Math.tan(alpha) / 2;
}
else if (alpha < -t)
{
} else if (alpha < -t) {
// Top Edge
p.y = bounds.y;
p.x = cx - bounds.height * Math.tan(beta) / 2;
}
else if (alpha < t)
{
} else if (alpha < t) {
// Right Edge
p.x = bounds.x + bounds.width;
p.y = cy + bounds.width * Math.tan(alpha) / 2;
}
else
{
} else {
// Bottom Edge
p.y = bounds.y + bounds.height;
p.x = cx + bounds.height * Math.tan(beta) / 2;
}
if (orthogonal)
{
if (orthogonal) {
if (next.x >= bounds.x &&
next.x <= bounds.x + bounds.width)
{
next.x <= bounds.x + bounds.width) {
p.x = next.x;
}
else if (next.y >= bounds.y &&
next.y <= bounds.y + bounds.height)
{
} else if (next.y >= bounds.y &&
next.y <= bounds.y + bounds.height) {
p.y = next.y;
}
if (next.x < bounds.x)
{
if (next.x < bounds.x) {
p.x = bounds.x;
}
else if (next.x > bounds.x + bounds.width)
{
} else if (next.x > bounds.x + bounds.width) {
p.x = bounds.x + bounds.width;
}
if (next.y < bounds.y)
{
if (next.y < bounds.y) {
p.y = bounds.y;
}
else if (next.y > bounds.y + bounds.height)
{
} else if (next.y > bounds.y + bounds.height) {
p.y = bounds.y + bounds.height;
}
}
@ -158,8 +143,7 @@ var mxPerimeter =
* Describes an elliptic perimeter. See <RectanglePerimeter>
* for a description of the parameters.
*/
EllipsePerimeter: function (bounds, vertex, next, orthogonal)
{
EllipsePerimeter: function (bounds, vertex, next, orthogonal) {
var x = bounds.x;
var y = bounds.y;
var a = bounds.width / 2;
@ -174,37 +158,29 @@ var mxPerimeter =
var dx = parseInt(px - cx);
var dy = parseInt(py - cy);
if (dx == 0 && dy != 0)
{
if (dx == 0 && dy != 0) {
return new mxPoint(cx, cy + b * dy / Math.abs(dy));
}
else if (dx == 0 && dy == 0)
{
} else if (dx == 0 && dy == 0) {
return new mxPoint(px, py);
}
if (orthogonal)
{
if (py >= y && py <= y + bounds.height)
{
if (orthogonal) {
if (py >= y && py <= y + bounds.height) {
var ty = py - cy;
var tx = Math.sqrt(a * a * (1 - (ty * ty) / (b * b))) || 0;
if (px <= x)
{
if (px <= x) {
tx = -tx;
}
return new mxPoint(cx + tx, py);
}
if (px >= x && px <= x + bounds.width)
{
if (px >= x && px <= x + bounds.width) {
var tx = px - cx;
var ty = Math.sqrt(b * b * (1 - (tx * tx) / (a * a))) || 0;
if (py <= y)
{
if (py <= y) {
ty = -ty;
}
@ -236,13 +212,10 @@ var mxPerimeter =
var xout = 0;
var yout = 0;
if (dist1 < dist2)
{
if (dist1 < dist2) {
xout = xout1;
yout = yout1;
}
else
{
} else {
xout = xout2;
yout = yout2;
}
@ -256,8 +229,7 @@ var mxPerimeter =
* Describes a rhombus (aka diamond) perimeter. See <RectanglePerimeter>
* for a description of the parameters.
*/
RhombusPerimeter: function (bounds, vertex, next, orthogonal)
{
RhombusPerimeter: function (bounds, vertex, next, orthogonal) {
var x = bounds.x;
var y = bounds.y;
var w = bounds.width;
@ -270,25 +242,16 @@ var mxPerimeter =
var py = next.y;
// Special case for intersecting the diamond's corners
if (cx == px)
{
if (cy > py)
{
if (cx == px) {
if (cy > py) {
return new mxPoint(cx, y); // top
}
else
{
} else {
return new mxPoint(cx, y + h); // bottom
}
}
else if (cy == py)
{
if (cx > px)
{
} else if (cy == py) {
if (cx > px) {
return new mxPoint(x, cy); // left
}
else
{
} else {
return new mxPoint(x + w, cy); // right
}
}
@ -296,37 +259,25 @@ var mxPerimeter =
var tx = cx;
var ty = cy;
if (orthogonal)
{
if (px >= x && px <= x + w)
{
if (orthogonal) {
if (px >= x && px <= x + w) {
tx = px;
}
else if (py >= y && py <= y + h)
{
} else if (py >= y && py <= y + h) {
ty = py;
}
}
// In which quadrant will the intersection be?
// set the slope and offset of the border line accordingly
if (px < cx)
{
if (py < cy)
{
if (px < cx) {
if (py < cy) {
return mxUtils.intersection(px, py, tx, ty, cx, y, x, cy);
}
else
{
} else {
return mxUtils.intersection(px, py, tx, ty, cx, y + h, x, cy);
}
}
else if (py < cy)
{
} else if (py < cy) {
return mxUtils.intersection(px, py, tx, ty, cx, y, x + w, cy);
}
else
{
} else {
return mxUtils.intersection(px, py, tx, ty, cx, y + h, x + w, cy);
}
},
@ -337,8 +288,7 @@ var mxPerimeter =
* Describes a triangle perimeter. See <RectanglePerimeter>
* for a description of the parameters.
*/
TrianglePerimeter: function (bounds, vertex, next, orthogonal)
{
TrianglePerimeter: function (bounds, vertex, next, orthogonal) {
var direction = (vertex != null) ?
vertex.style[mxConstants.STYLE_DIRECTION] : null;
var vertical = direction == mxConstants.DIRECTION_NORTH ||
@ -356,19 +306,14 @@ var mxPerimeter =
var corner = new mxPoint(x + w, cy);
var end = new mxPoint(x, y + h);
if (direction == mxConstants.DIRECTION_NORTH)
{
if (direction == mxConstants.DIRECTION_NORTH) {
start = end;
corner = new mxPoint(cx, y);
end = new mxPoint(x + w, y + h);
}
else if (direction == mxConstants.DIRECTION_SOUTH)
{
} else if (direction == mxConstants.DIRECTION_SOUTH) {
corner = new mxPoint(cx, y + h);
end = new mxPoint(x + w, y);
}
else if (direction == mxConstants.DIRECTION_WEST)
{
} else if (direction == mxConstants.DIRECTION_WEST) {
start = new mxPoint(x + w, y);
corner = new mxPoint(x, cy);
end = new mxPoint(x + w, y + h);
@ -383,70 +328,47 @@ var mxPerimeter =
var base = false;
if (direction == mxConstants.DIRECTION_NORTH ||
direction == mxConstants.DIRECTION_WEST)
{
direction == mxConstants.DIRECTION_WEST) {
base = alpha > -t && alpha < t;
}
else
{
} else {
base = alpha < -Math.PI + t || alpha > Math.PI - t;
}
var result = null;
if (base)
{
if (base) {
if (orthogonal && ((vertical && next.x >= start.x && next.x <= end.x) ||
(!vertical && next.y >= start.y && next.y <= end.y)))
{
if (vertical)
{
(!vertical && next.y >= start.y && next.y <= end.y))) {
if (vertical) {
result = new mxPoint(next.x, start.y);
}
else
{
} else {
result = new mxPoint(start.x, next.y);
}
}
else
{
if (direction == mxConstants.DIRECTION_NORTH)
{
} else {
if (direction == mxConstants.DIRECTION_NORTH) {
result = new mxPoint(x + w / 2 + h * Math.tan(alpha) / 2,
y + h);
}
else if (direction == mxConstants.DIRECTION_SOUTH)
{
} else if (direction == mxConstants.DIRECTION_SOUTH) {
result = new mxPoint(x + w / 2 - h * Math.tan(alpha) / 2,
y);
}
else if (direction == mxConstants.DIRECTION_WEST)
{
} else if (direction == mxConstants.DIRECTION_WEST) {
result = new mxPoint(x + w, y + h / 2 +
w * Math.tan(alpha) / 2);
}
else
{
} else {
result = new mxPoint(x, y + h / 2 -
w * Math.tan(alpha) / 2);
}
}
}
else
{
if (orthogonal)
{
} else {
if (orthogonal) {
var pt = new mxPoint(cx, cy);
if (next.y >= y && next.y <= y + h)
{
if (next.y >= y && next.y <= y + h) {
pt.x = (vertical) ? cx : (
(direction == mxConstants.DIRECTION_WEST) ?
x + w : x);
pt.y = next.y;
}
else if (next.x >= x && next.x <= x + w)
{
} else if (next.x >= x && next.x <= x + w) {
pt.x = next.x;
pt.y = (!vertical) ? cy : (
(direction == mxConstants.DIRECTION_NORTH) ?
@ -462,20 +384,16 @@ var mxPerimeter =
}
if ((vertical && next.x <= x + w / 2) ||
(!vertical && next.y <= y + h / 2))
{
(!vertical && next.y <= y + h / 2)) {
result = mxUtils.intersection(next.x, next.y, cx, cy,
start.x, start.y, corner.x, corner.y);
}
else
{
} else {
result = mxUtils.intersection(next.x, next.y, cx, cy,
corner.x, corner.y, end.x, end.y);
}
}
if (result == null)
{
if (result == null) {
result = new mxPoint(cx, cy);
}
@ -488,8 +406,7 @@ var mxPerimeter =
* Describes a hexagon perimeter. See <RectanglePerimeter>
* for a description of the parameters.
*/
HexagonPerimeter: function (bounds, vertex, next, orthogonal)
{
HexagonPerimeter: function (bounds, vertex, next, orthogonal) {
var x = bounds.x;
var y = bounds.y;
var w = bounds.width;
@ -517,224 +434,139 @@ var mxPerimeter =
//Only consider corrects quadrants for the orthogonal case.
if ((px < x) && (py < y) || (px < x) && (py > y + h)
|| (px > x + w) && (py < y) || (px > x + w) && (py > y + h))
{
|| (px > x + w) && (py < y) || (px > x + w) && (py > y + h)) {
orthogonal = false;
}
if (orthogonal)
{
if (vertical)
{
if (orthogonal) {
if (vertical) {
//Special cases where intersects with hexagon corners
if (px == cx)
{
if (py <= y)
{
if (px == cx) {
if (py <= y) {
return new mxPoint(cx, y);
}
else if (py >= y + h)
{
} else if (py >= y + h) {
return new mxPoint(cx, y + h);
}
}
else if (px < x)
{
if (py == y + h / 4)
{
} else if (px < x) {
if (py == y + h / 4) {
return new mxPoint(x, y + h / 4);
}
else if (py == y + 3 * h / 4)
{
} else if (py == y + 3 * h / 4) {
return new mxPoint(x, y + 3 * h / 4);
}
}
else if (px > x + w)
{
if (py == y + h / 4)
{
} else if (px > x + w) {
if (py == y + h / 4) {
return new mxPoint(x + w, y + h / 4);
} else if (py == y + 3 * h / 4) {
return new mxPoint(x + w, y + 3 * h / 4);
}
else if (py == y + 3 * h / 4)
{
} else if (px == x) {
if (py < cy) {
return new mxPoint(x, y + h / 4);
} else if (py > cy) {
return new mxPoint(x, y + 3 * h / 4);
}
} else if (px == x + w) {
if (py < cy) {
return new mxPoint(x + w, y + h / 4);
} else if (py > cy) {
return new mxPoint(x + w, y + 3 * h / 4);
}
}
else if (px == x)
{
if (py < cy)
{
return new mxPoint(x, y + h / 4);
}
else if (py > cy)
{
return new mxPoint(x, y + 3 * h / 4);
}
}
else if (px == x + w)
{
if (py < cy)
{
return new mxPoint(x + w, y + h / 4);
}
else if (py > cy)
{
return new mxPoint(x + w, y + 3 * h / 4);
}
}
if (py == y)
{
if (py == y) {
return new mxPoint(cx, y);
}
else if (py == y + h)
{
} else if (py == y + h) {
return new mxPoint(cx, y + h);
}
if (px < cx)
{
if ((py > y + h / 4) && (py < y + 3 * h / 4))
{
if (px < cx) {
if ((py > y + h / 4) && (py < y + 3 * h / 4)) {
a = new mxPoint(x, y);
b = new mxPoint(x, y + h);
}
else if (py < y + h / 4)
{
} else if (py < y + h / 4) {
a = new mxPoint(x - Math.floor(0.5 * w), y
+ Math.floor(0.5 * h));
b = new mxPoint(x + w, y - Math.floor(0.25 * h));
}
else if (py > y + 3 * h / 4)
{
} else if (py > y + 3 * h / 4) {
a = new mxPoint(x - Math.floor(0.5 * w), y
+ Math.floor(0.5 * h));
b = new mxPoint(x + w, y + Math.floor(1.25 * h));
}
}
else if (px > cx)
{
if ((py > y + h / 4) && (py < y + 3 * h / 4))
{
} else if (px > cx) {
if ((py > y + h / 4) && (py < y + 3 * h / 4)) {
a = new mxPoint(x + w, y);
b = new mxPoint(x + w, y + h);
}
else if (py < y + h / 4)
{
} else if (py < y + h / 4) {
a = new mxPoint(x, y - Math.floor(0.25 * h));
b = new mxPoint(x + Math.floor(1.5 * w), y
+ Math.floor(0.5 * h));
}
else if (py > y + 3 * h / 4)
{
} else if (py > y + 3 * h / 4) {
a = new mxPoint(x + Math.floor(1.5 * w), y
+ Math.floor(0.5 * h));
b = new mxPoint(x, y + Math.floor(1.25 * h));
}
}
}
else
{
} else {
//Special cases where intersects with hexagon corners
if (py == cy)
{
if (px <= x)
{
if (py == cy) {
if (px <= x) {
return new mxPoint(x, y + h / 2);
}
else if (px >= x + w)
{
} else if (px >= x + w) {
return new mxPoint(x + w, y + h / 2);
}
}
else if (py < y)
{
if (px == x + w / 4)
{
} else if (py < y) {
if (px == x + w / 4) {
return new mxPoint(x + w / 4, y);
}
else if (px == x + 3 * w / 4)
{
} else if (px == x + 3 * w / 4) {
return new mxPoint(x + 3 * w / 4, y);
}
}
else if (py > y + h)
{
if (px == x + w / 4)
{
} else if (py > y + h) {
if (px == x + w / 4) {
return new mxPoint(x + w / 4, y + h);
} else if (px == x + 3 * w / 4) {
return new mxPoint(x + 3 * w / 4, y + h);
}
else if (px == x + 3 * w / 4)
{
} else if (py == y) {
if (px < cx) {
return new mxPoint(x + w / 4, y);
} else if (px > cx) {
return new mxPoint(x + 3 * w / 4, y);
}
} else if (py == y + h) {
if (px < cx) {
return new mxPoint(x + w / 4, y + h);
} else if (py > cy) {
return new mxPoint(x + 3 * w / 4, y + h);
}
}
else if (py == y)
{
if (px < cx)
{
return new mxPoint(x + w / 4, y);
}
else if (px > cx)
{
return new mxPoint(x + 3 * w / 4, y);
}
}
else if (py == y + h)
{
if (px < cx)
{
return new mxPoint(x + w / 4, y + h);
}
else if (py > cy)
{
return new mxPoint(x + 3 * w / 4, y + h);
}
}
if (px == x)
{
if (px == x) {
return new mxPoint(x, cy);
}
else if (px == x + w)
{
} else if (px == x + w) {
return new mxPoint(x + w, cy);
}
if (py < cy)
{
if ((px > x + w / 4) && (px < x + 3 * w / 4))
{
if (py < cy) {
if ((px > x + w / 4) && (px < x + 3 * w / 4)) {
a = new mxPoint(x, y);
b = new mxPoint(x + w, y);
}
else if (px < x + w / 4)
{
} else if (px < x + w / 4) {
a = new mxPoint(x - Math.floor(0.25 * w), y + h);
b = new mxPoint(x + Math.floor(0.5 * w), y
- Math.floor(0.5 * h));
}
else if (px > x + 3 * w / 4)
{
} else if (px > x + 3 * w / 4) {
a = new mxPoint(x + Math.floor(0.5 * w), y
- Math.floor(0.5 * h));
b = new mxPoint(x + Math.floor(1.25 * w), y + h);
}
}
else if (py > cy)
{
if ((px > x + w / 4) && (px < x + 3 * w / 4))
{
} else if (py > cy) {
if ((px > x + w / 4) && (px < x + 3 * w / 4)) {
a = new mxPoint(x, y + h);
b = new mxPoint(x + w, y + h);
}
else if (px < x + w / 4)
{
} else if (px < x + w / 4) {
a = new mxPoint(x - Math.floor(0.25 * w), y);
b = new mxPoint(x + Math.floor(0.5 * w), y
+ Math.floor(1.5 * h));
}
else if (px > x + 3 * w / 4)
{
} else if (px > x + 3 * w / 4) {
a = new mxPoint(x + Math.floor(0.5 * w), y
+ Math.floor(1.5 * h));
b = new mxPoint(x + Math.floor(1.25 * w), y);
@ -745,163 +577,105 @@ var mxPerimeter =
var tx = cx;
var ty = cy;
if (px >= x && px <= x + w)
{
if (px >= x && px <= x + w) {
tx = px;
if (py < cy)
{
if (py < cy) {
ty = y + h;
}
else
{
} else {
ty = y;
}
}
else if (py >= y && py <= y + h)
{
} else if (py >= y && py <= y + h) {
ty = py;
if (px < cx)
{
if (px < cx) {
tx = x + w;
}
else
{
} else {
tx = x;
}
}
result = mxUtils.intersection(tx, ty, next.x, next.y, a.x, a.y, b.x, b.y);
}
else
{
if (vertical)
{
} else {
if (vertical) {
var beta = Math.atan2(h / 4, w / 2);
//Special cases where intersects with hexagon corners
if (alpha == beta)
{
if (alpha == beta) {
return new mxPoint(x + w, y + Math.floor(0.25 * h));
}
else if (alpha == pi2)
{
} else if (alpha == pi2) {
return new mxPoint(x + Math.floor(0.5 * w), y);
}
else if (alpha == (pi - beta))
{
} else if (alpha == (pi - beta)) {
return new mxPoint(x, y + Math.floor(0.25 * h));
}
else if (alpha == -beta)
{
} else if (alpha == -beta) {
return new mxPoint(x + w, y + Math.floor(0.75 * h));
}
else if (alpha == (-pi2))
{
} else if (alpha == (-pi2)) {
return new mxPoint(x + Math.floor(0.5 * w), y + h);
}
else if (alpha == (-pi + beta))
{
} else if (alpha == (-pi + beta)) {
return new mxPoint(x, y + Math.floor(0.75 * h));
}
if ((alpha < beta) && (alpha > -beta))
{
if ((alpha < beta) && (alpha > -beta)) {
a = new mxPoint(x + w, y);
b = new mxPoint(x + w, y + h);
}
else if ((alpha > beta) && (alpha < pi2))
{
} else if ((alpha > beta) && (alpha < pi2)) {
a = new mxPoint(x, y - Math.floor(0.25 * h));
b = new mxPoint(x + Math.floor(1.5 * w), y
+ Math.floor(0.5 * h));
}
else if ((alpha > pi2) && (alpha < (pi - beta)))
{
} else if ((alpha > pi2) && (alpha < (pi - beta))) {
a = new mxPoint(x - Math.floor(0.5 * w), y
+ Math.floor(0.5 * h));
b = new mxPoint(x + w, y - Math.floor(0.25 * h));
}
else if (((alpha > (pi - beta)) && (alpha <= pi))
|| ((alpha < (-pi + beta)) && (alpha >= -pi)))
{
} else if (((alpha > (pi - beta)) && (alpha <= pi))
|| ((alpha < (-pi + beta)) && (alpha >= -pi))) {
a = new mxPoint(x, y);
b = new mxPoint(x, y + h);
}
else if ((alpha < -beta) && (alpha > -pi2))
{
} else if ((alpha < -beta) && (alpha > -pi2)) {
a = new mxPoint(x + Math.floor(1.5 * w), y
+ Math.floor(0.5 * h));
b = new mxPoint(x, y + Math.floor(1.25 * h));
}
else if ((alpha < -pi2) && (alpha > (-pi + beta)))
{
} else if ((alpha < -pi2) && (alpha > (-pi + beta))) {
a = new mxPoint(x - Math.floor(0.5 * w), y
+ Math.floor(0.5 * h));
b = new mxPoint(x + w, y + Math.floor(1.25 * h));
}
}
else
{
} else {
var beta = Math.atan2(h / 2, w / 4);
//Special cases where intersects with hexagon corners
if (alpha == beta)
{
if (alpha == beta) {
return new mxPoint(x + Math.floor(0.75 * w), y);
}
else if (alpha == (pi - beta))
{
} else if (alpha == (pi - beta)) {
return new mxPoint(x + Math.floor(0.25 * w), y);
}
else if ((alpha == pi) || (alpha == -pi))
{
} else if ((alpha == pi) || (alpha == -pi)) {
return new mxPoint(x, y + Math.floor(0.5 * h));
}
else if (alpha == 0)
{
} else if (alpha == 0) {
return new mxPoint(x + w, y + Math.floor(0.5 * h));
}
else if (alpha == -beta)
{
} else if (alpha == -beta) {
return new mxPoint(x + Math.floor(0.75 * w), y + h);
}
else if (alpha == (-pi + beta))
{
} else if (alpha == (-pi + beta)) {
return new mxPoint(x + Math.floor(0.25 * w), y + h);
}
if ((alpha > 0) && (alpha < beta))
{
if ((alpha > 0) && (alpha < beta)) {
a = new mxPoint(x + Math.floor(0.5 * w), y
- Math.floor(0.5 * h));
b = new mxPoint(x + Math.floor(1.25 * w), y + h);
}
else if ((alpha > beta) && (alpha < (pi - beta)))
{
} else if ((alpha > beta) && (alpha < (pi - beta))) {
a = new mxPoint(x, y);
b = new mxPoint(x + w, y);
}
else if ((alpha > (pi - beta)) && (alpha < pi))
{
} else if ((alpha > (pi - beta)) && (alpha < pi)) {
a = new mxPoint(x - Math.floor(0.25 * w), y + h);
b = new mxPoint(x + Math.floor(0.5 * w), y
- Math.floor(0.5 * h));
}
else if ((alpha < 0) && (alpha > -beta))
{
} else if ((alpha < 0) && (alpha > -beta)) {
a = new mxPoint(x + Math.floor(0.5 * w), y
+ Math.floor(1.5 * h));
b = new mxPoint(x + Math.floor(1.25 * w), y);
}
else if ((alpha < -beta) && (alpha > (-pi + beta)))
{
} else if ((alpha < -beta) && (alpha > (-pi + beta))) {
a = new mxPoint(x, y + h);
b = new mxPoint(x + w, y + h);
}
else if ((alpha < (-pi + beta)) && (alpha > -pi))
{
} else if ((alpha < (-pi + beta)) && (alpha > -pi)) {
a = new mxPoint(x - Math.floor(0.25 * w), y);
b = new mxPoint(x + Math.floor(0.5 * w), y
+ Math.floor(1.5 * h));
@ -911,11 +685,12 @@ var mxPerimeter =
result = mxUtils.intersection(cx, cy, next.x, next.y, a.x, a.y, b.x, b.y);
}
if (result == null)
{
if (result == null) {
return new mxPoint(cx, cy);
}
return result;
}
};
export default mxPerimeter;

570
src/js/view/mxPrintPreview.js
View File

@ -2,6 +2,159 @@
* Copyright (c) 2006-2019, JGraph Ltd
* Copyright (c) 2006-2017, draw.io AG
*/
import mxPoint from "../util/mxPoint";
import mxRectangle from "../util/mxRectangle";
import mxTemporaryCellStates from "./mxTemporaryCellStates";
class mxPrintPreview {
/**
* Variable: graph
*
* Reference to the <mxGraph> that should be previewed.
*/
graph = null;
/**
* Variable: pageFormat
*
* Holds the <mxRectangle> that defines the page format.
*/
pageFormat = null;
/**
* Variable: scale
*
* Holds the scale of the print preview.
*/
scale = null;
/**
* Variable: border
*
* The border inset around each side of every page in the preview. This is set
* to 0 if autoOrigin is false.
*/
border = 0;
/**
* Variable: marginTop
*
* The margin at the top of the page (number). Default is 0.
*/
marginTop = 0;
/**
* Variable: marginBottom
*
* The margin at the bottom of the page (number). Default is 0.
*/
marginBottom = 0;
/**
* Variable: x0
*
* Holds the horizontal offset of the output.
*/
x0 = 0;
/**
* Variable: y0
*
* Holds the vertical offset of the output.
*/
y0 = 0;
/**
* Variable: autoOrigin
*
* Specifies if the origin should be automatically computed based on the top,
* left corner of the actual diagram contents. The required offset will be added
* to <x0> and <y0> in <open>. Default is true.
*/
autoOrigin = true;
/**
* Variable: printOverlays
*
* Specifies if overlays should be printed. Default is false.
*/
printOverlays = false;
/**
* Variable: printControls
*
* Specifies if controls (such as folding icons) should be printed. Default is
* false.
*/
printControls = false;
/**
* Variable: printBackgroundImage
*
* Specifies if the background image should be printed. Default is false.
*/
printBackgroundImage = false;
/**
* Variable: backgroundColor
*
* Holds the color value for the page background color. Default is #ffffff.
*/
backgroundColor = '#ffffff';
/**
* Variable: borderColor
*
* Holds the color value for the page border.
*/
borderColor = null;
/**
* Variable: title
*
* Holds the title of the preview window.
*/
title = null;
/**
* Variable: pageSelector
*
* Boolean that specifies if the page selector should be
* displayed. Default is true.
*/
pageSelector = null;
/**
* Variable: wnd
*
* Reference to the preview window.
*/
wnd = null;
/**
* Variable: targetWindow
*
* Assign any window here to redirect the rendering in <open>.
*/
targetWindow = null;
/**
* Variable: pageCount
*
* Holds the actual number of pages in the preview.
*/
pageCount = 0;
/**
* Variable: clipping
*
* Specifies is clipping should be used to avoid creating too many cell states
* in large diagrams. The bounding box of the cells in the original diagram is
* used if this is enabled. Default is true.
*/
clipping = true;
/**
* Class: mxPrintPreview
*
@ -172,8 +325,7 @@
* pageSelector - Optional boolean that specifies if the page selector
* should appear in the window with the print preview. Default is true.
*/
function mxPrintPreview(graph, scale, pageFormat, border, x0, y0, borderColor, title, pageSelector)
{
constructor(graph, scale, pageFormat, border, x0, y0, borderColor, title, pageSelector) {
this.graph = graph;
this.scale = (scale != null) ? scale : 1 / graph.pageScale;
this.border = (border != null) ? border : 0;
@ -185,160 +337,12 @@ function mxPrintPreview(graph, scale, pageFormat, border, x0, y0, borderColor, t
this.pageSelector = (pageSelector != null) ? pageSelector : true;
};
/**
* Variable: graph
*
* Reference to the <mxGraph> that should be previewed.
*/
graph = null;
/**
* Variable: pageFormat
*
* Holds the <mxRectangle> that defines the page format.
*/
pageFormat = null;
/**
* Variable: scale
*
* Holds the scale of the print preview.
*/
scale = null;
/**
* Variable: border
*
* The border inset around each side of every page in the preview. This is set
* to 0 if autoOrigin is false.
*/
border = 0;
/**
* Variable: marginTop
*
* The margin at the top of the page (number). Default is 0.
*/
marginTop = 0;
/**
* Variable: marginBottom
*
* The margin at the bottom of the page (number). Default is 0.
*/
marginBottom = 0;
/**
* Variable: x0
*
* Holds the horizontal offset of the output.
*/
x0 = 0;
/**
* Variable: y0
*
* Holds the vertical offset of the output.
*/
y0 = 0;
/**
* Variable: autoOrigin
*
* Specifies if the origin should be automatically computed based on the top,
* left corner of the actual diagram contents. The required offset will be added
* to <x0> and <y0> in <open>. Default is true.
*/
autoOrigin = true;
/**
* Variable: printOverlays
*
* Specifies if overlays should be printed. Default is false.
*/
printOverlays = false;
/**
* Variable: printControls
*
* Specifies if controls (such as folding icons) should be printed. Default is
* false.
*/
printControls = false;
/**
* Variable: printBackgroundImage
*
* Specifies if the background image should be printed. Default is false.
*/
printBackgroundImage = false;
/**
* Variable: backgroundColor
*
* Holds the color value for the page background color. Default is #ffffff.
*/
backgroundColor = '#ffffff';
/**
* Variable: borderColor
*
* Holds the color value for the page border.
*/
borderColor = null;
/**
* Variable: title
*
* Holds the title of the preview window.
*/
title = null;
/**
* Variable: pageSelector
*
* Boolean that specifies if the page selector should be
* displayed. Default is true.
*/
pageSelector = null;
/**
* Variable: wnd
*
* Reference to the preview window.
*/
wnd = null;
/**
* Variable: targetWindow
*
* Assign any window here to redirect the rendering in <open>.
*/
targetWindow = null;
/**
* Variable: pageCount
*
* Holds the actual number of pages in the preview.
*/
pageCount = 0;
/**
* Variable: clipping
*
* Specifies is clipping should be used to avoid creating too many cell states
* in large diagrams. The bounding box of the cells in the original diagram is
* used if this is enabled. Default is true.
*/
clipping = true;
/**
* Function: getWindow
*
* Returns <wnd>.
*/
getWindow = ()=>
{
getWindow = () => {
return this.wnd;
};
@ -349,8 +353,7 @@ getWindow = ()=>
* page. This implementation returns an X-UA meta tag for IE5 in quirks mode,
* IE8 in IE8 standards mode and edge in IE9 standards mode.
*/
getDoctype = ()=>
{
getDoctype = () => {
var dt = '';
return dt;
};
@ -366,8 +369,7 @@ getDoctype = ()=>
* targetWindow - Optional window that should be used for rendering. If
* this is specified then no HEAD tag, CSS and BODY tag will be written.
*/
appendGraph = (graph, scale, x0, y0, forcePageBreaks, keepOpen)=>
{
appendGraph = (graph, scale, x0, y0, forcePageBreaks, keepOpen) => {
this.graph = graph;
this.scale = (scale != null) ? scale : 1 / graph.pageScale;
this.x0 = x0;
@ -387,29 +389,23 @@ appendGraph = (graph, scale, x0, y0, forcePageBreaks, keepOpen)=>
* targetWindow - Optional window that should be used for rendering. If
* this is specified then no HEAD tag, CSS and BODY tag will be written.
*/
open = (css, targetWindow, forcePageBreaks, keepOpen)=>
{
open = (css, targetWindow, forcePageBreaks, keepOpen) => {
// Closing the window while the page is being rendered may cause an
// exception in IE. This and any other exceptions are simply ignored.
var previousInitializeOverlay = this.graph.cellRenderer.initializeOverlay;
var div = null;
try
{
try {
// Temporarily overrides the method to redirect rendering of overlays
// to the draw pane so that they are visible in the printout
if (this.printOverlays)
{
this.graph.cellRenderer.initializeOverlay = (state, overlay)=>
{
if (this.printOverlays) {
this.graph.cellRenderer.initializeOverlay = (state, overlay) => {
overlay.init(state.view.getDrawPane());
};
}
if (this.printControls)
{
this.graph.cellRenderer.initControl = (state, control, handleEvents, clickHandler)=>
{
if (this.printControls) {
this.graph.cellRenderer.initControl = (state, control, handleEvents, clickHandler) => {
control.dialect = state.view.graph.dialect;
control.init(state.view.getDrawPane());
};
@ -418,25 +414,21 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
this.wnd = (targetWindow != null) ? targetWindow : this.wnd;
var isNewWindow = false;
if (this.wnd == null)
{
if (this.wnd == null) {
isNewWindow = true;
this.wnd = window.open();
}
var doc = this.wnd.document;
if (isNewWindow)
{
if (isNewWindow) {
var dt = this.getDoctype();
if (dt != null && dt.length > 0)
{
if (dt != null && dt.length > 0) {
doc.writeln(dt);
}
if (document.compatMode === 'CSS1Compat')
{
if (document.compatMode === 'CSS1Compat') {
doc.writeln('<!DOCTYPE html>');
}
@ -455,8 +447,7 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
var tr = this.graph.getView().getTranslate();
// Uses the absolute origin with no offset for all printing
if (!this.autoOrigin)
{
if (!this.autoOrigin) {
this.x0 -= tr.x * this.scale;
this.y0 -= tr.y * this.scale;
bounds.width += bounds.x;
@ -482,20 +473,16 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
var vpages = Math.max(1, Math.ceil((bounds.height + this.y0) / availableHeight));
this.pageCount = hpages * vpages;
var writePageSelector = mxUtils.bind(this, ()=>
{
if (this.pageSelector && (vpages > 1 || hpages > 1))
{
var writePageSelector = mxUtils.bind(this, () => {
if (this.pageSelector && (vpages > 1 || hpages > 1)) {
var table = this.createPageSelector(vpages, hpages);
doc.body.appendChild(table);
}
});
var addPage = mxUtils.bind(this, (div, addBreak)=>
{
var addPage = mxUtils.bind(this, (div, addBreak) => {
// Border of the DIV (aka page) inside the document
if (this.borderColor != null)
{
if (this.borderColor != null) {
div.style.borderColor = this.borderColor;
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
@ -505,8 +492,7 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
// child selectors, eg. body > div { background: white; }
div.style.background = this.backgroundColor;
if (forcePageBreaks || addBreak)
{
if (forcePageBreaks || addBreak) {
div.style.pageBreakAfter = 'always';
}
@ -518,41 +504,33 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
// to create the complete page and then copy it over to the
// new window.document. This can be fixed later by using the
// ownerDocument of the container in mxShape and mxGraphView.
if (isNewWindow && mxClient.IS_EDGE)
{
if (isNewWindow && mxClient.IS_EDGE) {
// For some obscure reason, removing the DIV from the
// parent before fetching its outerHTML has missing
// fillcolor properties and fill children, so the div
// must be removed afterwards to keep the fillcolors.
doc.writeln(div.outerHTML);
div.parentNode.removeChild(div);
}
else if (mxClient.IS_EDGE)
{
} else if (mxClient.IS_EDGE) {
var clone = doc.createElement('div');
clone.innerHTML = div.outerHTML;
clone = clone.getElementsByTagName('div')[0];
doc.body.appendChild(clone);
div.parentNode.removeChild(div);
}
else
{
} else {
div.parentNode.removeChild(div);
doc.body.appendChild(div);
}
if (forcePageBreaks || addBreak)
{
if (forcePageBreaks || addBreak) {
this.addPageBreak(doc);
}
});
var cov = this.getCoverPages(this.pageFormat.width, this.pageFormat.height);
if (cov != null)
{
for (var i = 0; i < cov.length; i++)
{
if (cov != null) {
for (var i = 0; i < cov.length; i++) {
addPage(cov[i], true);
}
}
@ -561,15 +539,12 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
// Appends each page to the page output for printing, making
// sure there will be a page break after each page (ie. div)
for (var i = 0; i < vpages; i++)
{
for (var i = 0; i < vpages; i++) {
var dy = i * availableHeight / this.scale - this.y0 / this.scale +
(bounds.y - tr.y * currentScale) / currentScale;
for (var j = 0; j < hpages; j++)
{
if (this.wnd == null)
{
for (var j = 0; j < hpages; j++) {
if (this.wnd == null) {
return null;
}
@ -577,12 +552,10 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
(bounds.x - tr.x * currentScale) / currentScale;
var pageNum = i * hpages + j + 1;
var clip = new mxRectangle(dx, dy, availableWidth, availableHeight);
div = this.renderPage(this.pageFormat.width, this.pageFormat.height, 0, 0, mxUtils.bind(this, (div)=>
{
div = this.renderPage(this.pageFormat.width, this.pageFormat.height, 0, 0, mxUtils.bind(this, (div) => {
this.addGraphFragment(-dx, -dy, this.scale, pageNum, div, clip);
if (this.printBackgroundImage)
{
if (this.printBackgroundImage) {
this.insertBackgroundImage(div, -dx, -dy);
}
}), pageNum);
@ -594,32 +567,24 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
}
}
if (apx != null)
{
for (var i = 0; i < apx.length; i++)
{
if (apx != null) {
for (var i = 0; i < apx.length; i++) {
addPage(apx[i], i < apx.length - 1);
}
}
if (isNewWindow && !keepOpen)
{
if (isNewWindow && !keepOpen) {
this.closeDocument();
writePageSelector();
}
this.wnd.focus();
}
catch (e)
{
} catch (e) {
// Removes the DIV from the document in case of an error
if (div != null && div.parentNode != null)
{
if (div != null && div.parentNode != null) {
div.parentNode.removeChild(div);
}
}
finally
{
} finally {
this.graph.cellRenderer.initializeOverlay = previousInitializeOverlay;
}
@ -631,8 +596,7 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
*
* Adds a page break to the given document.
*/
addPageBreak = (doc)=>
{
addPageBreak = (doc) => {
var hr = doc.createElement('hr');
hr.className = 'mxPageBreak';
doc.body.appendChild(hr);
@ -643,12 +607,9 @@ addPageBreak = (doc)=>
*
* Writes the closing tags for body and page after calling <writePostfix>.
*/
closeDocument = ()=>
{
try
{
if (this.wnd != null && this.wnd.document != null)
{
closeDocument = () => {
try {
if (this.wnd != null && this.wnd.document != null) {
var doc = this.wnd.document;
this.writePostfix(doc);
@ -659,9 +620,7 @@ closeDocument = ()=>
// Removes all event handlers in the print output
mxEvent.release(doc.body);
}
}
catch (e)
{
} catch (e) {
// ignore any errors resulting from wnd no longer being available
}
};
@ -672,10 +631,8 @@ closeDocument = ()=>
* Writes the HEAD section into the given document, without the opening
* and closing HEAD tags.
*/
writeHead = (doc, css)=>
{
if (this.title != null)
{
writeHead = (doc, css) => {
if (this.title != null) {
doc.writeln('<title>' + this.title + '</title>');
}
@ -700,8 +657,7 @@ writeHead = (doc, css)=>
doc.writeln(' body.mxPage { background: gray; }');
doc.writeln('}');
if (css != null)
{
if (css != null) {
doc.writeln(css);
}
@ -713,8 +669,7 @@ writeHead = (doc, css)=>
*
* Called before closing the body of the page. This implementation is empty.
*/
writePostfix = (doc)=>
{
writePostfix = (doc) => {
// empty
};
@ -723,8 +678,7 @@ writePostfix = (doc)=>
*
* Creates the page selector table.
*/
createPageSelector = (vpages, hpages)=>
{
createPageSelector = (vpages, hpages) => {
var doc = this.wnd.document;
var table = doc.createElement('table');
table.className = 'mxPageSelector';
@ -732,20 +686,17 @@ createPageSelector = (vpages, hpages)=>
var tbody = doc.createElement('tbody');
for (var i = 0; i < vpages; i++)
{
for (var i = 0; i < vpages; i++) {
var row = doc.createElement('tr');
for (var j = 0; j < hpages; j++)
{
for (var j = 0; j < hpages; j++) {
var pageNum = i * hpages + j + 1;
var cell = doc.createElement('td');
var a = doc.createElement('a');
a.setAttribute('href', '#mxPage-' + pageNum);
// Workaround for FF where the anchor is appended to the URL of the original document
if (mxClient.IS_NS && !mxClient.IS_SF && !mxClient.IS_GC)
{
if (mxClient.IS_NS && !mxClient.IS_SF && !mxClient.IS_GC) {
var js = 'var page = document.getElementById(\'mxPage-' + pageNum + '\');page.scrollIntoView(true);event.preventDefault();';
a.setAttribute('onclick', js);
}
@ -780,18 +731,15 @@ createPageSelector = (vpages, hpages)=>
* Takes the inner div as the argument.
* pageNumber - Integer representing the page number.
*/
renderPage = (w, h, dx, dy, content, pageNumber)=>
{
renderPage = (w, h, dx, dy, content, pageNumber) => {
var doc = this.wnd.document;
var div = document.createElement('div');
var arg = null;
try
{
try {
// Workaround for ignored clipping in IE 9 standards
// when printing with page breaks and HTML labels.
if (dx != 0 || dy != 0)
{
if (dx != 0 || dy != 0) {
div.style.position = 'relative';
div.style.width = w + 'px';
div.style.height = h + 'px';
@ -816,8 +764,7 @@ renderPage = (w, h, dx, dy, content, pageNumber)=>
arg = viewport;
}
// FIXME: IE10/11 too many pages
else
{
else {
div.style.width = w + 'px';
div.style.height = h + 'px';
div.style.overflow = 'hidden';
@ -831,8 +778,7 @@ renderPage = (w, h, dx, dy, content, pageNumber)=>
innerDiv.style.top = this.border + 'px';
innerDiv.style.left = this.border + 'px';
if (this.graph.dialect == mxConstants.DIALECT_VML)
{
if (this.graph.dialect == mxConstants.DIALECT_VML) {
innerDiv.style.position = 'absolute';
}
@ -840,9 +786,7 @@ renderPage = (w, h, dx, dy, content, pageNumber)=>
document.body.appendChild(div);
arg = innerDiv;
}
}
catch (e)
{
} catch (e) {
div.parentNode.removeChild(div);
div = null;
@ -859,12 +803,10 @@ renderPage = (w, h, dx, dy, content, pageNumber)=>
*
* Returns the root cell for painting the graph.
*/
getRoot = ()=>
{
getRoot = () => {
var root = this.graph.view.currentRoot;
if (root == null)
{
if (root == null) {
root = this.graph.getModel().getRoot();
}
@ -878,8 +820,7 @@ getRoot = ()=>
* This returns true if foreignObject is supported and we're not in Safari
* as it has clipping bugs for transformed CSS content with foreignObjects.
*/
useCssTransforms = ()=>
{
useCssTransforms = () => {
return !mxClient.NO_FO && !mxClient.IS_SF;
};
@ -897,8 +838,7 @@ useCssTransforms = ()=>
* div - Div that contains the output.
* clip - Contains the clipping rectangle as an <mxRectangle>.
*/
addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
{
addGraphFragment = (dx, dy, scale, pageNumber, div, clip) => {
var view = this.graph.getView();
var previousContainer = this.graph.container;
this.graph.container = div;
@ -909,13 +849,11 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
var overlayPane = view.getOverlayPane();
var realScale = scale;
if (this.graph.dialect == mxConstants.DIALECT_SVG)
{
if (this.graph.dialect == mxConstants.DIALECT_SVG) {
view.createSvg();
// Uses CSS transform for scaling
if (this.useCssTransforms())
{
if (this.useCssTransforms()) {
var g = view.getDrawPane().parentNode;
var prev = g.getAttribute('transform');
g.setAttribute('transformOrigin', '0 0');
@ -926,13 +864,9 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
dx = 0;
dy = 0;
}
}
else if (this.graph.dialect == mxConstants.DIALECT_VML)
{
} else if (this.graph.dialect == mxConstants.DIALECT_VML) {
view.createVml();
}
else
{
} else {
view.createHtml();
}
@ -954,29 +888,24 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
var s = view.scale;
// Gets the transformed clip for intersection check below
if (this.clipping)
{
if (this.clipping) {
var tempClip = new mxRectangle((clip.x + translate.x) * s, (clip.y + translate.y) * s,
clip.width * s / realScale, clip.height * s / realScale);
// Checks clipping rectangle for speedup
// Must create terminal states for edge clipping even if terminal outside of clip
this.graph.cellRenderer.redraw = (state, force, rendering)=>
{
if (state != null)
{
this.graph.cellRenderer.redraw = (state, force, rendering) => {
if (state != null) {
// Gets original state from graph to find bounding box
var orig = states.get(state.cell);
if (orig != null)
{
if (orig != null) {
var bbox = view.getBoundingBox(orig, false);
// Stops rendering if outside clip for speedup but ignores
// edge labels where width and height is set to 0
if (bbox != null && bbox.width > 0 && bbox.height > 0 &&
!mxUtils.intersects(tempClip, bbox))
{
!mxUtils.intersects(tempClip, bbox)) {
return;
}
}
@ -988,29 +917,23 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
var temp = null;
try
{
try {
// Creates the temporary cell states in the view and
// draws them onto the temporary DOM nodes in the view
var cells = [this.getRoot()];
temp = new mxTemporaryCellStates(view, scale, cells, null, mxUtils.bind(this, (state)=>
{
temp = new mxTemporaryCellStates(view, scale, cells, null, mxUtils.bind(this, (state) => {
return this.getLinkForCellState(state);
}));
}
finally
{
} finally {
// Removes everything but the SVG node
var tmp = div.firstChild;
while (tmp != null)
{
while (tmp != null) {
var next = tmp.nextSibling;
var name = tmp.nodeName.toLowerCase();
// Note: Width and height are required in FF 11
if (name == 'svg')
{
if (name == 'svg') {
tmp.style.overflow = 'hidden';
tmp.style.position = 'relative';
tmp.style.top = this.marginTop + 'px';
@ -1020,8 +943,7 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
tmp.style.height = '';
}
// Tries to fetch all text labels and only text labels
else if (tmp.style.cursor != 'default' && name != 'div')
{
else if (tmp.style.cursor != 'default' && name != 'div') {
tmp.parentNode.removeChild(tmp);
}
@ -1029,12 +951,10 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
}
// Puts background image behind SVG output
if (this.printBackgroundImage)
{
if (this.printBackgroundImage) {
var svgs = div.getElementsByTagName('svg');
if (svgs.length > 0)
{
if (svgs.length > 0) {
svgs[0].style.position = 'absolute';
}
}
@ -1061,8 +981,7 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
*
* Returns the link for the given cell state. This returns null.
*/
getLinkForCellState = (state)=>
{
getLinkForCellState = (state) => {
return this.graph.getLinkForCell(state.cell);
};
@ -1071,12 +990,10 @@ getLinkForCellState = (state)=>
*
* Inserts the background image into the given div.
*/
insertBackgroundImage = (div, dx, dy)=>
{
insertBackgroundImage = (div, dx, dy) => {
var bg = this.graph.backgroundImage;
if (bg != null)
{
if (bg != null) {
var img = document.createElement('img');
img.style.position = 'absolute';
img.style.marginLeft = Math.round(dx * this.scale) + 'px';
@ -1094,8 +1011,7 @@ insertBackgroundImage = (div, dx, dy)=>
*
* Returns the pages to be added before the print output. This returns null.
*/
getCoverPages = ()=>
{
getCoverPages = () => {
return null;
};
@ -1104,8 +1020,7 @@ getCoverPages = ()=>
*
* Returns the pages to be added after the print output. This returns null.
*/
getAppendices = ()=>
{
getAppendices = () => {
return null;
};
@ -1118,12 +1033,10 @@ getAppendices = ()=>
*
* css - Optional CSS string to be used in the head section.
*/
print = (css)=>
{
print = (css) => {
var wnd = this.open(css);
if (wnd != null)
{
if (wnd != null) {
wnd.print();
}
};
@ -1133,11 +1046,12 @@ print = (css)=>
*
* Closes the print preview window.
*/
close = ()=>
{
if (this.wnd != null)
{
close = () => {
if (this.wnd != null) {
this.wnd.close();
this.wnd = null;
}
};
}
export default mxPrintPreview;

25
src/js/view/mxStyleRegistry.js
View File

@ -2,8 +2,10 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
var mxStyleRegistry =
{
import mxConstants from "../util/mxConstants";
var mxStyleRegistry = {
/**
* Class: mxStyleRegistry
*
@ -21,8 +23,7 @@ var mxStyleRegistry =
*
* Puts the given object into the registry under the given name.
*/
putValue: (name, obj)=>
{
putValue: (name, obj) => {
mxStyleRegistry.values[name] = obj;
},
@ -31,8 +32,7 @@ var mxStyleRegistry =
*
* Returns the value associated with the given name.
*/
getValue: (name)=>
{
getValue: (name) => {
return mxStyleRegistry.values[name];
},
@ -41,19 +41,14 @@ var mxStyleRegistry =
*
* Returns the name for the given value.
*/
getName: (value)=>
{
for (var key in mxStyleRegistry.values)
{
if (mxStyleRegistry.values[key] == value)
{
getName: (value) => {
for (var key in mxStyleRegistry.values) {
if (mxStyleRegistry.values[key] === value) {
return key;
}
}
return null;
}
};
mxStyleRegistry.putValue(mxConstants.EDGESTYLE_ELBOW, mxEdgeStyle.ElbowConnector);
@ -69,3 +64,5 @@ mxStyleRegistry.putValue(mxConstants.PERIMETER_RECTANGLE, mxPerimeter.RectangleP
mxStyleRegistry.putValue(mxConstants.PERIMETER_RHOMBUS, mxPerimeter.RhombusPerimeter);
mxStyleRegistry.putValue(mxConstants.PERIMETER_TRIANGLE, mxPerimeter.TrianglePerimeter);
mxStyleRegistry.putValue(mxConstants.PERIMETER_HEXAGON, mxPerimeter.HexagonPerimeter);
export default mxStyleRegistry;

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

@ -7,89 +7,11 @@
*
* Creates a temporary set of cell states.
*/
function mxTemporaryCellStates(view, scale, cells, isCellVisibleFn, getLinkForCellState)
{
scale = (scale != null) ? scale : 1;
this.view = view;
// Stores the previous state
this.oldValidateCellState = view.validateCellState;
this.oldBounds = view.getGraphBounds();
this.oldStates = view.getStates();
this.oldScale = view.getScale();
this.oldDoRedrawShape = view.graph.cellRenderer.doRedrawShape;
var self = this;
// Overrides doRedrawShape and paint shape to add links on shapes
if (getLinkForCellState != null)
{
view.graph.cellRenderer.doRedrawShape = (state)=>
{
var oldPaint = state.shape.paint;
state.shape.paint = (c)=>
{
var link = getLinkForCellState(state);
if (link != null)
{
c.setLink(link);
}
oldPaint.apply(this, arguments);
if (link != null)
{
c.setLink(null);
}
};
self.oldDoRedrawShape.apply(view.graph.cellRenderer, arguments);
state.shape.paint = oldPaint;
};
}
// Overrides validateCellState to ignore invisible cells
view.validateCellState = (cell, resurse)=>
{
if (cell == null || isCellVisibleFn == null || isCellVisibleFn(cell))
{
return self.oldValidateCellState.apply(view, arguments);
}
return null;
};
// Creates space for new states
view.setStates(new mxDictionary());
view.setScale(scale);
if (cells != null)
{
view.resetValidationState();
var bbox = null;
// Validates the vertices and edges without adding them to
// the model so that the original cells are not modified
for (var i = 0; i < cells.length; i++)
{
var bounds = view.getBoundingBox(view.validateCellState(view.validateCell(cells[i])));
if (bbox == null)
{
bbox = bounds;
}
else
{
bbox.add(bounds);
}
}
view.setGraphBounds(bbox || new mxRectangle());
}
};
import mxRectangle from "../util/mxRectangle";
import mxDictionary from "../util/mxDictionary";
class mxTemporaryCellStates {
/**
* Variable: view
*
@ -118,16 +40,88 @@ oldBounds = null;
*/
oldScale = null;
constructor(view, scale, cells, isCellVisibleFn, getLinkForCellState) {
scale = (scale != null) ? scale : 1;
this.view = view;
// Stores the previous state
this.oldValidateCellState = view.validateCellState;
this.oldBounds = view.getGraphBounds();
this.oldStates = view.getStates();
this.oldScale = view.getScale();
this.oldDoRedrawShape = view.graph.cellRenderer.doRedrawShape;
var self = this;
// Overrides doRedrawShape and paint shape to add links on shapes
if (getLinkForCellState != null) {
view.graph.cellRenderer.doRedrawShape = (state) => {
var oldPaint = state.shape.paint;
state.shape.paint = (c) => {
var link = getLinkForCellState(state);
if (link != null) {
c.setLink(link);
}
oldPaint.apply(this, arguments);
if (link != null) {
c.setLink(null);
}
};
self.oldDoRedrawShape.apply(view.graph.cellRenderer, arguments);
state.shape.paint = oldPaint;
};
}
// Overrides validateCellState to ignore invisible cells
view.validateCellState = (cell, resurse) => {
if (cell == null || isCellVisibleFn == null || isCellVisibleFn(cell)) {
return self.oldValidateCellState.apply(view, arguments);
}
return null;
};
// Creates space for new states
view.setStates(new mxDictionary());
view.setScale(scale);
if (cells != null) {
view.resetValidationState();
var bbox = null;
// Validates the vertices and edges without adding them to
// the model so that the original cells are not modified
for (var i = 0; i < cells.length; i++) {
var bounds = view.getBoundingBox(view.validateCellState(view.validateCell(cells[i])));
if (bbox == null) {
bbox = bounds;
} else {
bbox.add(bounds);
}
}
view.setGraphBounds(bbox || new mxRectangle());
}
};
/**
* Function: destroy
*
* Returns the top, left corner as a new <mxPoint>.
*/
destroy = ()=>
{
destroy = () => {
this.view.setScale(this.oldScale);
this.view.setStates(this.oldStates);
this.view.setGraphBounds(this.oldBounds);
this.view.validateCellState = this.oldValidateCellState;
this.view.graph.cellRenderer.doRedrawShape = this.oldDoRedrawShape;
};
}
export default mxTemporaryCellStates;