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

manual js syntax updates

development
mcyph 2021-03-20 08:55:04 +11:00
parent fd21dbe3d9
commit 0b8e1695f8
16 changed files with 6086 additions and 6779 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
javascript/src/js/editor/mxDefaultKeyHandler.js
View File

@ -6,47 +6,6 @@
import mxKeyHandler from "../handler/mxKeyHandler";
import mxEventObject from "../util/mxEventObject";
/**
* Class: mxDefaultKeyHandler
*
* Binds keycodes to actionnames in an editor. This aggregates an internal
* <handler> and extends the implementation of <mxKeyHandler.escape> to not
* only cancel the editing, but also hide the properties dialog and fire an
* <mxEditor.escape> event via <editor>. An instance of this class is created
* by <mxEditor> and stored in <mxEditor.keyHandler>.
*
* Example:
*
* Bind the delete key to the delete action in an existing editor.
*
* (code)
* let keyHandler = new mxDefaultKeyHandler(editor);
* keyHandler.bindAction(46, 'delete');
* (end)
*
* Codec:
*
* This class uses the <mxDefaultKeyHandlerCodec> to read configuration
* data into an existing instance. See <mxDefaultKeyHandlerCodec> for a
* description of the configuration format.
*
* Keycodes:
*
* See <mxKeyHandler>.
*
* An <mxEvent.ESCAPE> event is fired via the editor if the escape key is
* pressed.
*
* Constructor: mxDefaultKeyHandler
*
* Constructs a new default key handler for the <mxEditor.graph> in the
* given <mxEditor>. (The editor may be null if a prototypical instance for
* a <mxDefaultKeyHandlerCodec> is created.)
*
* Parameters:
*
* editor - Reference to the enclosing <mxEditor>.
*/
class mxDefaultKeyHandler {
/**
* Variable: editor
@ -62,6 +21,47 @@ class mxDefaultKeyHandler {
*/
handler = null;
/**
* Class: mxDefaultKeyHandler
*
* Binds keycodes to actionnames in an editor. This aggregates an internal
* <handler> and extends the implementation of <mxKeyHandler.escape> to not
* only cancel the editing, but also hide the properties dialog and fire an
* <mxEditor.escape> event via <editor>. An instance of this class is created
* by <mxEditor> and stored in <mxEditor.keyHandler>.
*
* Example:
*
* Bind the delete key to the delete action in an existing editor.
*
* (code)
* let keyHandler = new mxDefaultKeyHandler(editor);
* keyHandler.bindAction(46, 'delete');
* (end)
*
* Codec:
*
* This class uses the <mxDefaultKeyHandlerCodec> to read configuration
* data into an existing instance. See <mxDefaultKeyHandlerCodec> for a
* description of the configuration format.
*
* Keycodes:
*
* See <mxKeyHandler>.
*
* An <mxEvent.ESCAPE> event is fired via the editor if the escape key is
* pressed.
*
* Constructor: mxDefaultKeyHandler
*
* Constructs a new default key handler for the <mxEditor.graph> in the
* given <mxEditor>. (The editor may be null if a prototypical instance for
* a <mxDefaultKeyHandlerCodec> is created.)
*
* Parameters:
*
* editor - Reference to the enclosing <mxEditor>.
*/
constructor(editor) {
if (editor != null) {
this.editor = editor;

1465
javascript/src/js/model/mxCell.js
View File

File diff suppressed because it is too large Load Diff

6
javascript/src/js/model/mxCellPath.js
View File

@ -146,12 +146,12 @@ var mxCellPath =
}
// Compares path length if both paths are equal to this point
if (comp == 0)
if (comp === 0)
{
var t1 = p1.length;
var t2 = p2.length;
if (t1 != t2)
if (t1 !== t2)
{
comp = (t1 > t2) ? 1 : -1;
}
@ -161,3 +161,5 @@ var mxCellPath =
}
};
export default mxCellPath;

733
javascript/src/js/model/mxGeometry.js
View File

@ -2,414 +2,385 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxGeometry
*
* Extends <mxRectangle> to represent the geometry of a cell.
*
* For vertices, the geometry consists of the x- and y-location, and the width
* and height. For edges, the geometry consists of the optional terminal- and
* control points. The terminal points are only required if an edge is
* unconnected, and are stored in the <sourcePoint> and <targetPoint>
* variables, respectively.
*
* Example:
*
* If an edge is unconnected, that is, it has no source or target terminal,
* then a geometry with terminal points for a new edge can be defined as
* follows.
*
* (code)
* geometry.setTerminalPoint(new mxPoint(x1, y1), true);
* geometry.points = [new mxPoint(x2, y2)];
* geometry.setTerminalPoint(new mxPoint(x3, y3), false);
* (end)
*
* Control points are used regardless of the connected state of an edge and may
* be ignored or interpreted differently depending on the edge's <mxEdgeStyle>.
*
* To disable automatic reset of control points after a cell has been moved or
* resized, the the <mxGraph.resizeEdgesOnMove> and
* <mxGraph.resetEdgesOnResize> may be used.
*
* Edge Labels:
*
* Using the x- and y-coordinates of a cell's geometry, it is possible to
* position the label on edges on a specific location on the actual edge shape
* as it appears on the screen. The x-coordinate of an edge's geometry is used
* to describe the distance from the center of the edge from -1 to 1 with 0
* being the center of the edge and the default value. The y-coordinate of an
* edge's geometry is used to describe the absolute, orthogonal distance in
* pixels from that point. In addition, the <mxGeometry.offset> is used as an
* absolute offset vector from the resulting point.
*
* This coordinate system is applied if <relative> is true, otherwise the
* offset defines the absolute vector from the edge's center point to the
* label and the values for <x> and <y> are ignored.
*
* The width and height parameter for edge geometries can be used to set the
* label width and height (eg. for word wrapping).
*
* Ports:
*
* The term "port" refers to a relatively positioned, connectable child cell,
* which is used to specify the connection between the parent and another cell
* in the graph. Ports are typically modeled as vertices with relative
* geometries.
*
* Offsets:
*
* The <offset> field is interpreted in 3 different ways, depending on the cell
* and the geometry. For edges, the offset defines the absolute offset for the
* edge label. For relative geometries, the offset defines the absolute offset
* for the origin (top, left corner) of the vertex, otherwise the offset
* defines the absolute offset for the label inside the vertex or group.
*
* Constructor: mxGeometry
*
* Constructs a new object to describe the size and location of a vertex or
* the control points of an edge.
*/
function mxGeometry(x, y, width, height)
{
mxRectangle.call(this, x, y, width, height);
};
/**
* Extends mxRectangle.
*/
mxGeometry.prototype = new mxRectangle();
constructor = mxGeometry;
import mxPoint from "FIXME";
import mxRectangle from "FIXME";
/**
* Variable: TRANSLATE_CONTROL_POINTS
*
* Global switch to translate the points in translate. Default is true.
*/
TRANSLATE_CONTROL_POINTS = true;
class mxGeometry extends mxRectangle {
/**
* Variable: TRANSLATE_CONTROL_POINTS
*
* Global switch to translate the points in translate. Default is true.
*/
TRANSLATE_CONTROL_POINTS = true;
/**
* Variable: alternateBounds
*
* Stores alternate values for x, y, width and height in a rectangle. See
* <swap> to exchange the values. Default is null.
*/
alternateBounds = null;
/**
* Variable: alternateBounds
*
* Stores alternate values for x, y, width and height in a rectangle. See
* <swap> to exchange the values. Default is null.
*/
alternateBounds = null;
/**
* Variable: sourcePoint
*
* Defines the source <mxPoint> of the edge. This is used if the
* corresponding edge does not have a source vertex. Otherwise it is
* ignored. Default is null.
*/
sourcePoint = null;
/**
* Variable: sourcePoint
*
* Defines the source <mxPoint> of the edge. This is used if the
* corresponding edge does not have a source vertex. Otherwise it is
* ignored. Default is null.
*/
sourcePoint = null;
/**
* Variable: targetPoint
*
* Defines the target <mxPoint> of the edge. This is used if the
* corresponding edge does not have a target vertex. Otherwise it is
* ignored. Default is null.
*/
targetPoint = null;
/**
* Variable: targetPoint
*
* Defines the target <mxPoint> of the edge. This is used if the
* corresponding edge does not have a target vertex. Otherwise it is
* ignored. Default is null.
*/
targetPoint = null;
/**
* Variable: points
*
* Array of <mxPoints> which specifies the control points along the edge.
* These points are the intermediate points on the edge, for the endpoints
* use <targetPoint> and <sourcePoint> or set the terminals of the edge to
* a non-null value. Default is null.
*/
points = null;
/**
* Variable: points
*
* Array of <mxPoints> which specifies the control points along the edge.
* These points are the intermediate points on the edge, for the endpoints
* use <targetPoint> and <sourcePoint> or set the terminals of the edge to
* a non-null value. Default is null.
*/
points = null;
/**
* Variable: offset
*
* For edges, this holds the offset (in pixels) from the position defined
* by <x> and <y> on the edge. For relative geometries (for vertices), this
* defines the absolute offset from the point defined by the relative
* coordinates. For absolute geometries (for vertices), this defines the
* offset for the label. Default is null.
*/
offset = null;
/**
* Variable: offset
*
* For edges, this holds the offset (in pixels) from the position defined
* by <x> and <y> on the edge. For relative geometries (for vertices), this
* defines the absolute offset from the point defined by the relative
* coordinates. For absolute geometries (for vertices), this defines the
* offset for the label. Default is null.
*/
offset = null;
/**
* Variable: relative
*
* Specifies if the coordinates in the geometry are to be interpreted as
* relative coordinates. For edges, this is used to define the location of
* the edge label relative to the edge as rendered on the display. For
* vertices, this specifies the relative location inside the bounds of the
* parent cell.
*
* If this is false, then the coordinates are relative to the origin of the
* parent cell or, for edges, the edge label position is relative to the
* center of the edge as rendered on screen.
*
* Default is false.
*/
relative = false;
/**
* Variable: relative
*
* Specifies if the coordinates in the geometry are to be interpreted as
* relative coordinates. For edges, this is used to define the location of
* the edge label relative to the edge as rendered on the display. For
* vertices, this specifies the relative location inside the bounds of the
* parent cell.
*
* If this is false, then the coordinates are relative to the origin of the
* parent cell or, for edges, the edge label position is relative to the
* center of the edge as rendered on screen.
*
* Default is false.
*/
relative = false;
/**
* Function: swap
*
* Swaps the x, y, width and height with the values stored in
* <alternateBounds> and puts the previous values into <alternateBounds> as
* a rectangle. This operation is carried-out in-place, that is, using the
* existing geometry instance. If this operation is called during a graph
* model transactional change, then the geometry should be cloned before
* calling this method and setting the geometry of the cell using
* <mxGraphModel.setGeometry>.
*/
swap = ()=>
{
if (this.alternateBounds != null)
{
var old = new mxRectangle(
this.x, this.y, this.width, this.height);
/**
* Class: mxGeometry
*
* Extends <mxRectangle> to represent the geometry of a cell.
*
* For vertices, the geometry consists of the x- and y-location, and the width
* and height. For edges, the geometry consists of the optional terminal- and
* control points. The terminal points are only required if an edge is
* unconnected, and are stored in the <sourcePoint> and <targetPoint>
* variables, respectively.
*
* Example:
*
* If an edge is unconnected, that is, it has no source or target terminal,
* then a geometry with terminal points for a new edge can be defined as
* follows.
*
* (code)
* geometry.setTerminalPoint(new mxPoint(x1, y1), true);
* geometry.points = [new mxPoint(x2, y2)];
* geometry.setTerminalPoint(new mxPoint(x3, y3), false);
* (end)
*
* Control points are used regardless of the connected state of an edge and may
* be ignored or interpreted differently depending on the edge's <mxEdgeStyle>.
*
* To disable automatic reset of control points after a cell has been moved or
* resized, the the <mxGraph.resizeEdgesOnMove> and
* <mxGraph.resetEdgesOnResize> may be used.
*
* Edge Labels:
*
* Using the x- and y-coordinates of a cell's geometry, it is possible to
* position the label on edges on a specific location on the actual edge shape
* as it appears on the screen. The x-coordinate of an edge's geometry is used
* to describe the distance from the center of the edge from -1 to 1 with 0
* being the center of the edge and the default value. The y-coordinate of an
* edge's geometry is used to describe the absolute, orthogonal distance in
* pixels from that point. In addition, the <mxGeometry.offset> is used as an
* absolute offset vector from the resulting point.
*
* This coordinate system is applied if <relative> is true, otherwise the
* offset defines the absolute vector from the edge's center point to the
* label and the values for <x> and <y> are ignored.
*
* The width and height parameter for edge geometries can be used to set the
* label width and height (eg. for word wrapping).
*
* Ports:
*
* The term "port" refers to a relatively positioned, connectable child cell,
* which is used to specify the connection between the parent and another cell
* in the graph. Ports are typically modeled as vertices with relative
* geometries.
*
* Offsets:
*
* The <offset> field is interpreted in 3 different ways, depending on the cell
* and the geometry. For edges, the offset defines the absolute offset for the
* edge label. For relative geometries, the offset defines the absolute offset
* for the origin (top, left corner) of the vertex, otherwise the offset
* defines the absolute offset for the label inside the vertex or group.
*
* Constructor: mxGeometry
*
* Constructs a new object to describe the size and location of a vertex or
* the control points of an edge.
*/
constructor(x, y, width, height) {
super(x, y, width, height);
};
this.x = this.alternateBounds.x;
this.y = this.alternateBounds.y;
this.width = this.alternateBounds.width;
this.height = this.alternateBounds.height;
/**
* Function: swap
*
* Swaps the x, y, width and height with the values stored in
* <alternateBounds> and puts the previous values into <alternateBounds> as
* a rectangle. This operation is carried-out in-place, that is, using the
* existing geometry instance. If this operation is called during a graph
* model transactional change, then the geometry should be cloned before
* calling this method and setting the geometry of the cell using
* <mxGraphModel.setGeometry>.
*/
swap = () => {
if (this.alternateBounds != null) {
var old = new mxRectangle(
this.x, this.y, this.width, this.height);
this.alternateBounds = old;
}
};
this.x = this.alternateBounds.x;
this.y = this.alternateBounds.y;
this.width = this.alternateBounds.width;
this.height = this.alternateBounds.height;
/**
* Function: getTerminalPoint
*
* Returns the <mxPoint> representing the source or target point of this
* edge. This is only used if the edge has no source or target vertex.
*
* Parameters:
*
* isSource - Boolean that specifies if the source or target point
* should be returned.
*/
getTerminalPoint = (isSource)=>
{
return (isSource) ? this.sourcePoint : this.targetPoint;
};
this.alternateBounds = old;
}
};
/**
* Function: setTerminalPoint
*
* Sets the <sourcePoint> or <targetPoint> to the given <mxPoint> and
* returns the new point.
*
* Parameters:
*
* point - Point to be used as the new source or target point.
* isSource - Boolean that specifies if the source or target point
* should be set.
*/
setTerminalPoint = (point, isSource)=>
{
if (isSource)
{
this.sourcePoint = point;
}
else
{
this.targetPoint = point;
}
return point;
};
/**
* Function: getTerminalPoint
*
* Returns the <mxPoint> representing the source or target point of this
* edge. This is only used if the edge has no source or target vertex.
*
* Parameters:
*
* isSource - Boolean that specifies if the source or target point
* should be returned.
*/
getTerminalPoint = (isSource) => {
return (isSource) ? this.sourcePoint : this.targetPoint;
};
/**
* Function: rotate
*
* Rotates the geometry by the given angle around the given center. That is,
* <x> and <y> of the geometry, the <sourcePoint>, <targetPoint> and all
* <points> are translated by the given amount. <x> and <y> are only
* translated if <relative> is false.
*
* Parameters:
*
* angle - Number that specifies the rotation angle in degrees.
* cx - <mxPoint> that specifies the center of the rotation.
*/
rotate = (angle, cx)=>
{
var rad = mxUtils.toRadians(angle);
var cos = Math.cos(rad);
var sin = Math.sin(rad);
// Rotates the geometry
if (!this.relative)
{
var ct = new mxPoint(this.getCenterX(), this.getCenterY());
var pt = mxUtils.getRotatedPoint(ct, cos, sin, cx);
this.x = Math.round(pt.x - this.width / 2);
this.y = Math.round(pt.y - this.height / 2);
}
/**
* Function: setTerminalPoint
*
* Sets the <sourcePoint> or <targetPoint> to the given <mxPoint> and
* returns the new point.
*
* Parameters:
*
* point - Point to be used as the new source or target point.
* isSource - Boolean that specifies if the source or target point
* should be set.
*/
setTerminalPoint = (point, isSource) => {
if (isSource) {
this.sourcePoint = point;
} else {
this.targetPoint = point;
}
// Rotates the source point
if (this.sourcePoint != null)
{
var pt = mxUtils.getRotatedPoint(this.sourcePoint, cos, sin, cx);
this.sourcePoint.x = Math.round(pt.x);
this.sourcePoint.y = Math.round(pt.y);
}
// Translates the target point
if (this.targetPoint != null)
{
var pt = mxUtils.getRotatedPoint(this.targetPoint, cos, sin, cx);
this.targetPoint.x = Math.round(pt.x);
this.targetPoint.y = Math.round(pt.y);
}
// Translate the control points
if (this.points != null)
{
for (var i = 0; i < this.points.length; i++)
{
if (this.points[i] != null)
{
var pt = mxUtils.getRotatedPoint(this.points[i], cos, sin, cx);
this.points[i].x = Math.round(pt.x);
this.points[i].y = Math.round(pt.y);
return point;
};
/**
* Function: rotate
*
* Rotates the geometry by the given angle around the given center. That is,
* <x> and <y> of the geometry, the <sourcePoint>, <targetPoint> and all
* <points> are translated by the given amount. <x> and <y> are only
* translated if <relative> is false.
*
* Parameters:
*
* angle - Number that specifies the rotation angle in degrees.
* cx - <mxPoint> that specifies the center of the rotation.
*/
rotate = (angle, cx) => {
var rad = mxUtils.toRadians(angle);
var cos = Math.cos(rad);
var sin = Math.sin(rad);
// Rotates the geometry
if (!this.relative) {
var ct = new mxPoint(this.getCenterX(), this.getCenterY());
var pt = mxUtils.getRotatedPoint(ct, cos, sin, cx);
this.x = Math.round(pt.x - this.width / 2);
this.y = Math.round(pt.y - this.height / 2);
}
// Rotates the source point
if (this.sourcePoint != null) {
var pt = mxUtils.getRotatedPoint(this.sourcePoint, cos, sin, cx);
this.sourcePoint.x = Math.round(pt.x);
this.sourcePoint.y = Math.round(pt.y);
}
// Translates the target point
if (this.targetPoint != null) {
var pt = mxUtils.getRotatedPoint(this.targetPoint, cos, sin, cx);
this.targetPoint.x = Math.round(pt.x);
this.targetPoint.y = Math.round(pt.y);
}
// Translate the control points
if (this.points != null) {
for (var i = 0; i < this.points.length; i++) {
if (this.points[i] != null) {
var pt = mxUtils.getRotatedPoint(this.points[i], cos, sin, cx);
this.points[i].x = Math.round(pt.x);
this.points[i].y = Math.round(pt.y);
}
}
}
}
};
};
/**
* Function: translate
*
* Translates the geometry by the specified amount. That is, <x> and <y> of the
* geometry, the <sourcePoint>, <targetPoint> and all <points> are translated
* by the given amount. <x> and <y> are only translated if <relative> is false.
* If <TRANSLATE_CONTROL_POINTS> is false, then <points> are not modified by
* this function.
*
* Parameters:
*
* dx - Number that specifies the x-coordinate of the translation.
* dy - Number that specifies the y-coordinate of the translation.
*/
translate = (dx, dy)=>
{
dx = parseFloat(dx);
dy = parseFloat(dy);
// Translates the geometry
if (!this.relative)
{
this.x = parseFloat(this.x) + dx;
this.y = parseFloat(this.y) + dy;
}
/**
* Function: translate
*
* Translates the geometry by the specified amount. That is, <x> and <y> of the
* geometry, the <sourcePoint>, <targetPoint> and all <points> are translated
* by the given amount. <x> and <y> are only translated if <relative> is false.
* If <TRANSLATE_CONTROL_POINTS> is false, then <points> are not modified by
* this function.
*
* Parameters:
*
* dx - Number that specifies the x-coordinate of the translation.
* dy - Number that specifies the y-coordinate of the translation.
*/
translate = (dx, dy) => {
dx = parseFloat(dx);
dy = parseFloat(dy);
// Translates the source point
if (this.sourcePoint != null)
{
this.sourcePoint.x = parseFloat(this.sourcePoint.x) + dx;
this.sourcePoint.y = parseFloat(this.sourcePoint.y) + dy;
}
// Translates the target point
if (this.targetPoint != null)
{
this.targetPoint.x = parseFloat(this.targetPoint.x) + dx;
this.targetPoint.y = parseFloat(this.targetPoint.y) + dy;
}
// Translates the geometry
if (!this.relative) {
this.x = parseFloat(this.x) + dx;
this.y = parseFloat(this.y) + dy;
}
// Translate the control points
if (this.TRANSLATE_CONTROL_POINTS && this.points != null)
{
for (var i = 0; i < this.points.length; i++)
{
if (this.points[i] != null)
{
this.points[i].x = parseFloat(this.points[i].x) + dx;
this.points[i].y = parseFloat(this.points[i].y) + dy;
// Translates the source point
if (this.sourcePoint != null) {
this.sourcePoint.x = parseFloat(this.sourcePoint.x) + dx;
this.sourcePoint.y = parseFloat(this.sourcePoint.y) + dy;
}
// Translates the target point
if (this.targetPoint != null) {
this.targetPoint.x = parseFloat(this.targetPoint.x) + dx;
this.targetPoint.y = parseFloat(this.targetPoint.y) + dy;
}
// Translate the control points
if (this.TRANSLATE_CONTROL_POINTS && this.points != null) {
for (var i = 0; i < this.points.length; i++) {
if (this.points[i] != null) {
this.points[i].x = parseFloat(this.points[i].x) + dx;
this.points[i].y = parseFloat(this.points[i].y) + dy;
}
}
}
}
};
};
/**
* Function: scale
*
* Scales the geometry by the given amount. That is, <x> and <y> of the
* geometry, the <sourcePoint>, <targetPoint> and all <points> are scaled
* by the given amount. <x>, <y>, <width> and <height> are only scaled if
* <relative> is false. If <fixedAspect> is true, then the smaller value
* is used to scale the width and the height.
*
* Parameters:
*
* sx - Number that specifies the horizontal scale factor.
* sy - Number that specifies the vertical scale factor.
* fixedAspect - Optional boolean to keep the aspect ratio fixed.
*/
scale = (sx, sy, fixedAspect)=>
{
sx = parseFloat(sx);
sy = parseFloat(sy);
/**
* Function: scale
*
* Scales the geometry by the given amount. That is, <x> and <y> of the
* geometry, the <sourcePoint>, <targetPoint> and all <points> are scaled
* by the given amount. <x>, <y>, <width> and <height> are only scaled if
* <relative> is false. If <fixedAspect> is true, then the smaller value
* is used to scale the width and the height.
*
* Parameters:
*
* sx - Number that specifies the horizontal scale factor.
* sy - Number that specifies the vertical scale factor.
* fixedAspect - Optional boolean to keep the aspect ratio fixed.
*/
scale = (sx, sy, fixedAspect) => {
sx = parseFloat(sx);
sy = parseFloat(sy);
// Translates the source point
if (this.sourcePoint != null)
{
this.sourcePoint.x = parseFloat(this.sourcePoint.x) * sx;
this.sourcePoint.y = parseFloat(this.sourcePoint.y) * sy;
}
// Translates the target point
if (this.targetPoint != null)
{
this.targetPoint.x = parseFloat(this.targetPoint.x) * sx;
this.targetPoint.y = parseFloat(this.targetPoint.y) * sy;
}
// Translates the source point
if (this.sourcePoint != null) {
this.sourcePoint.x = parseFloat(this.sourcePoint.x) * sx;
this.sourcePoint.y = parseFloat(this.sourcePoint.y) * sy;
}
// Translate the control points
if (this.points != null)
{
for (var i = 0; i < this.points.length; i++)
{
if (this.points[i] != null)
{
this.points[i].x = parseFloat(this.points[i].x) * sx;
this.points[i].y = parseFloat(this.points[i].y) * sy;
// Translates the target point
if (this.targetPoint != null) {
this.targetPoint.x = parseFloat(this.targetPoint.x) * sx;
this.targetPoint.y = parseFloat(this.targetPoint.y) * sy;
}
// Translate the control points
if (this.points != null) {
for (var i = 0; i < this.points.length; i++) {
if (this.points[i] != null) {
this.points[i].x = parseFloat(this.points[i].x) * sx;
this.points[i].y = parseFloat(this.points[i].y) * sy;
}
}
}
}
// Translates the geometry
if (!this.relative)
{
this.x = parseFloat(this.x) * sx;
this.y = parseFloat(this.y) * sy;
if (fixedAspect)
{
sy = sx = Math.min(sx, sy);
// Translates the geometry
if (!this.relative) {
this.x = parseFloat(this.x) * sx;
this.y = parseFloat(this.y) * sy;
if (fixedAspect) {
sy = sx = Math.min(sx, sy);
}
this.width = parseFloat(this.width) * sx;
this.height = parseFloat(this.height) * sy;
}
this.width = parseFloat(this.width) * sx;
this.height = parseFloat(this.height) * sy;
}
};
};
/**
* Function: equals
*
* Returns true if the given object equals this geometry.
*/
equals = (obj)=>
{
return equals.apply(this, arguments) &&
this.relative == obj.relative &&
((this.sourcePoint == null && obj.sourcePoint == null) || (this.sourcePoint != null && this.sourcePoint.equals(obj.sourcePoint))) &&
((this.targetPoint == null && obj.targetPoint == null) || (this.targetPoint != null && this.targetPoint.equals(obj.targetPoint))) &&
((this.points == null && obj.points == null) || (this.points != null && mxUtils.equalPoints(this.points, obj.points))) &&
((this.alternateBounds == null && obj.alternateBounds == null) || (this.alternateBounds != null && this.alternateBounds.equals(obj.alternateBounds))) &&
((this.offset == null && obj.offset == null) || (this.offset != null && this.offset.equals(obj.offset)));
};
/**
* Function: equals
*
* Returns true if the given object equals this geometry.
*/
equals = (obj) => {
return equals.apply(this, arguments) &&
this.relative == obj.relative &&
((this.sourcePoint == null && obj.sourcePoint == null) || (this.sourcePoint != null && this.sourcePoint.equals(obj.sourcePoint))) &&
((this.targetPoint == null && obj.targetPoint == null) || (this.targetPoint != null && this.targetPoint.equals(obj.targetPoint))) &&
((this.points == null && obj.points == null) || (this.points != null && mxUtils.equalPoints(this.points, obj.points))) &&
((this.alternateBounds == null && obj.alternateBounds == null) || (this.alternateBounds != null && this.alternateBounds.equals(obj.alternateBounds))) &&
((this.offset == null && obj.offset == null) || (this.offset != null && this.offset.equals(obj.offset)));
};
}
export default mxGeometry;

4593
javascript/src/js/model/mxGraphModel.js
View File

File diff suppressed because it is too large Load Diff

202
javascript/src/js/shape/mxDoubleEllipse.js
View File

@ -2,113 +2,109 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxDoubleEllipse
*
* Extends <mxShape> to implement a double ellipse shape. This shape is
* registered under <mxConstants.SHAPE_DOUBLE_ELLIPSE> in <mxCellRenderer>.
* Use the following override to only fill the inner ellipse in this shape:
*
* (code)
* paintVertexShape = (c, x, y, w, h)=>
* {
* c.ellipse(x, y, w, h);
* c.stroke();
*
* var inset = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
* x += inset;
* y += inset;
* w -= 2 * inset;
* h -= 2 * inset;
*
* if (w > 0 && h > 0)
* {
* c.ellipse(x, y, w, h);
* }
*
* c.fillAndStroke();
* };
* (end)
*
* Constructor: mxDoubleEllipse
*
* Constructs a new ellipse shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxDoubleEllipse(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxDoubleEllipse, mxShape);
import mxRectangle from "FIXME";
/**
* Variable: vmlScale
*
* Scale for improving the precision of VML rendering. Default is 10.
*/
vmlScale = 10;
class mxDoubleEllipse extends mxShape {
/**
* Variable: vmlScale
*
* Scale for improving the precision of VML rendering. Default is 10.
*/
vmlScale = 10;
/**
* Function: paintBackground
*
* Paints the background.
*/
paintBackground = (c, x, y, w, h)=>
{
c.ellipse(x, y, w, h);
c.fillAndStroke();
};
/**
* Class: mxDoubleEllipse
*
* Extends <mxShape> to implement a double ellipse shape. This shape is
* registered under <mxConstants.SHAPE_DOUBLE_ELLIPSE> in <mxCellRenderer>.
* Use the following override to only fill the inner ellipse in this shape:
*
* (code)
* paintVertexShape = (c, x, y, w, h)=>
* {
* c.ellipse(x, y, w, h);
* c.stroke();
*
* var inset = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
* x += inset;
* y += inset;
* w -= 2 * inset;
* h -= 2 * inset;
*
* if (w > 0 && h > 0)
* {
* c.ellipse(x, y, w, h);
* }
*
* c.fillAndStroke();
* };
* (end)
*
* Constructor: mxDoubleEllipse
*
* Constructs a new ellipse shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(bounds, fill, stroke, strokewidth) {
super();
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Function: paintForeground
*
* Paints the foreground.
*/
paintForeground = (c, x, y, w, h)=>
{
if (!this.outline)
{
var margin = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
x += margin;
y += margin;
w -= 2 * margin;
h -= 2 * margin;
// FIXME: Rounding issues in IE8 standards mode (not in 1.x)
if (w > 0 && h > 0)
{
c.ellipse(x, y, w, h);
/**
* Function: paintBackground
*
* Paints the background.
*/
paintBackground = (c, x, y, w, h) => {
c.ellipse(x, y, w, h);
c.fillAndStroke();
};
/**
* Function: paintForeground
*
* Paints the foreground.
*/
paintForeground = (c, x, y, w, h) => {
if (!this.outline) {
var margin = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
x += margin;
y += margin;
w -= 2 * margin;
h -= 2 * margin;
// FIXME: Rounding issues in IE8 standards mode (not in 1.x)
if (w > 0 && h > 0) {
c.ellipse(x, y, w, h);
}
c.stroke();
}
c.stroke();
}
};
};
/**
* Function: getLabelBounds
*
* Returns the bounds for the label.
*/
getLabelBounds = (rect)=>
{
var margin = (mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth,
Math.min(rect.width / 5 / this.scale, rect.height / 5 / this.scale)))) * this.scale;
/**
* Function: getLabelBounds
*
* Returns the bounds for the label.
*/
getLabelBounds = (rect) => {
var margin = (mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth,
Math.min(rect.width / 5 / this.scale, rect.height / 5 / this.scale)))) * this.scale;
return new mxRectangle(rect.x + margin, rect.y + margin, rect.width - 2 * margin, rect.height - 2 * margin);
};
return new mxRectangle(rect.x + margin, rect.y + margin, rect.width - 2 * margin, rect.height - 2 * margin);
};
}
export default mxDoubleEllipse;

82
javascript/src/js/shape/mxEllipse.js
View File

@ -2,47 +2,45 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxEllipse
*
* Extends <mxShape> to implement an ellipse shape.
* This shape is registered under <mxConstants.SHAPE_ELLIPSE>
* in <mxCellRenderer>.
*
* Constructor: mxEllipse
*
* Constructs a new ellipse shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxEllipse(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxEllipse, mxShape);
class mxEllipse extends mxShape {
/**
* Class: mxEllipse
*
* Extends <mxShape> to implement an ellipse shape.
* This shape is registered under <mxConstants.SHAPE_ELLIPSE>
* in <mxCellRenderer>.
*
* Constructor: mxEllipse
*
* Constructs a new ellipse shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(bounds, fill, stroke, strokewidth) {
super();
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
}
/**
* Function: paintVertexShape
*
* Paints the ellipse shape.
*/
paintVertexShape = (c, x, y, w, h)=>
{
c.ellipse(x, y, w, h);
c.fillAndStroke();
};
/**
* Function: paintVertexShape
*
* Paints the ellipse shape.
*/
paintVertexShape = (c, x, y, w, h) => {
c.ellipse(x, y, w, h);
c.fillAndStroke();
};
}
export default mxEllipse;

54
javascript/src/js/shape/mxHexagon.js
View File

@ -2,33 +2,31 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxHexagon
*
* Implementation of the hexagon shape.
*
* Constructor: mxHexagon
*
* Constructs a new hexagon shape.
*/
function mxHexagon()
{
mxActor.call(this);
};
/**
* Extends mxActor.
*/
mxUtils.extend(mxHexagon, mxActor);
class mxHexagon extends mxActor {
/**
* Class: mxHexagon
*
* Implementation of the hexagon shape.
*
* Constructor: mxHexagon
*
* Constructs a new hexagon shape.
*/
constructor() {
super();
}
/**
* Function: redrawPath
*
* Draws the path for this shape.
*/
redrawPath = (c, x, y, w, h)=>
{
var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0.25 * w, 0), new mxPoint(0.75 * w, 0), new mxPoint(w, 0.5 * h), new mxPoint(0.75 * w, h),
new mxPoint(0.25 * w, h), new mxPoint(0, 0.5 * h)], this.isRounded, arcSize, true);
};
/**
* Function: redrawPath
*
* Draws the path for this shape.
*/
redrawPath = (c, x, y, w, h) => {
var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0.25 * w, 0), new mxPoint(0.75 * w, 0), new mxPoint(w, 0.5 * h), new mxPoint(0.75 * w, h),
new mxPoint(0.25 * w, h), new mxPoint(0, 0.5 * h)], this.isRounded, arcSize, true);
};
}
export default mxHexagon;

420
javascript/src/js/shape/mxImageShape.js
View File

@ -2,242 +2,214 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxImageShape
*
* Extends <mxShape> to implement an image shape. This shape is registered
* under <mxConstants.SHAPE_IMAGE> in <mxCellRenderer>.
*
* Constructor: mxImageShape
*
* Constructs a new image shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* image - String that specifies the URL of the image. This is stored in
* <image>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 0. This is stored in <strokewidth>.
*/
function mxImageShape(bounds, image, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.image = image;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.shadow = false;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxImageShape, mxRectangleShape);
class mxImageShape extends mxRectangleShape {
/**
* Class: mxImageShape
*
* Extends <mxShape> to implement an image shape. This shape is registered
* under <mxConstants.SHAPE_IMAGE> in <mxCellRenderer>.
*
* Constructor: mxImageShape
*
* Constructs a new image shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* image - String that specifies the URL of the image. This is stored in
* <image>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 0. This is stored in <strokewidth>.
*/
constructor(bounds, image, fill, stroke, strokewidth) {
super();
this.bounds = bounds;
this.image = image;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.shadow = false;
};
/**
* Variable: preserveImageAspect
*
* Switch to preserve image aspect. Default is true.
*/
preserveImageAspect = true;
/**
* Variable: preserveImageAspect
*
* Switch to preserve image aspect. Default is true.
*/
preserveImageAspect = true;
/**
* Function: getSvgScreenOffset
*
* Disables offset in IE9 for crisper image output.
*/
getSvgScreenOffset = ()=>
{
return 0;
};
/**
* Function: getSvgScreenOffset
*
* Disables offset in IE9 for crisper image output.
*/
getSvgScreenOffset = () => {
return 0;
};
/**
* Function: apply
*
* Overrides <mxShape.apply> to replace the fill and stroke colors with the
* respective values from <mxConstants.STYLE_IMAGE_BACKGROUND> and
* <mxConstants.STYLE_IMAGE_BORDER>.
*
* Applies the style of the given <mxCellState> to the shape. This
* implementation assigns the following styles to local fields:
*
* - <mxConstants.STYLE_IMAGE_BACKGROUND> => fill
* - <mxConstants.STYLE_IMAGE_BORDER> => stroke
*
* Parameters:
*
* state - <mxCellState> of the corresponding cell.
*/
apply = (state)=>
{
apply.apply(this, arguments);
this.fill = null;
this.stroke = null;
this.gradient = null;
if (this.style != null)
{
this.preserveImageAspect = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_ASPECT, 1) == 1;
// Legacy support for imageFlipH/V
this.flipH = this.flipH || mxUtils.getValue(this.style, 'imageFlipH', 0) == 1;
this.flipV = this.flipV || mxUtils.getValue(this.style, 'imageFlipV', 0) == 1;
}
};
/**
* Function: apply
*
* Overrides <mxShape.apply> to replace the fill and stroke colors with the
* respective values from <mxConstants.STYLE_IMAGE_BACKGROUND> and
* <mxConstants.STYLE_IMAGE_BORDER>.
*
* Applies the style of the given <mxCellState> to the shape. This
* implementation assigns the following styles to local fields:
*
* - <mxConstants.STYLE_IMAGE_BACKGROUND> => fill
* - <mxConstants.STYLE_IMAGE_BORDER> => stroke
*
* Parameters:
*
* state - <mxCellState> of the corresponding cell.
*/
apply = (state) => {
apply.apply(this, arguments);
/**
* Function: isHtmlAllowed
*
* Returns true if HTML is allowed for this shape. This implementation always
* returns false.
*/
isHtmlAllowed = ()=>
{
return !this.preserveImageAspect;
};
this.fill = null;
this.stroke = null;
this.gradient = null;
/**
* Function: createHtml
*
* Creates and returns the HTML DOM node(s) to represent
* this shape. This implementation falls back to <createVml>
* so that the HTML creation is optional.
*/
createHtml = ()=>
{
var node = document.createElement('div');
node.style.position = 'absolute';
if (this.style != null) {
this.preserveImageAspect = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_ASPECT, 1) === 1;
return node;
};
/**
* Function: isRoundable
*
* Disables inherited roundable support.
*/
isRoundable = (c, x, y, w, h)=>
{
return false;
};
/**
* Function: paintVertexShape
*
* Generic background painting implementation.
*/
paintVertexShape = (c, x, y, w, h)=>
{
if (this.image != null)
{
var fill = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BACKGROUND, null);
var stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, null);
if (fill != null)
{
// Stroke rendering required for shadow
c.setFillColor(fill);
c.setStrokeColor(stroke);
c.rect(x, y, w, h);
c.fillAndStroke();
// Legacy support for imageFlipH/V
this.flipH = this.flipH || mxUtils.getValue(this.style, 'imageFlipH', 0) === 1;
this.flipV = this.flipV || mxUtils.getValue(this.style, 'imageFlipV', 0) === 1;
}
};
// FlipH/V are implicit via mxShape.updateTransform
c.image(x, y, w, h, this.image, this.preserveImageAspect, false, false);
var stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, null);
if (stroke != null)
{
c.setShadow(false);
c.setStrokeColor(stroke);
c.rect(x, y, w, h);
c.stroke();
}
}
else
{
paintBackground.apply(this, arguments);
}
};
/**
* Function: isHtmlAllowed
*
* Returns true if HTML is allowed for this shape. This implementation always
* returns false.
*/
isHtmlAllowed = () => {
return !this.preserveImageAspect;
};
/**
* Function: redraw
*
* Overrides <mxShape.redraw> to preserve the aspect ratio of images.
*/
redrawHtmlShape = ()=>
{
this.node.style.left = Math.round(this.bounds.x) + 'px';
this.node.style.top = Math.round(this.bounds.y) + 'px';
this.node.style.width = Math.max(0, Math.round(this.bounds.width)) + 'px';
this.node.style.height = Math.max(0, Math.round(this.bounds.height)) + 'px';
this.node.innerHTML = '';
/**
* Function: createHtml
*
* Creates and returns the HTML DOM node(s) to represent
* this shape. This implementation falls back to <createVml>
* so that the HTML creation is optional.
*/
createHtml = () => {
var node = document.createElement('div');
node.style.position = 'absolute';
if (this.image != null)
{
var fill = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BACKGROUND, '');
var stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, '');
this.node.style.backgroundColor = fill;
this.node.style.borderColor = stroke;
// VML image supports PNG in IE6
var useVml = mxClient.IS_IE6 || ((document.documentMode == null || document.documentMode <= 8) && this.rotation != 0);
var img = document.createElement((useVml) ? mxClient.VML_PREFIX + ':image' : 'img');
img.setAttribute('border', '0');
img.style.position = 'absolute';
img.src = this.image;
return node;
};
var filter = (this.opacity < 100) ? 'alpha(opacity=' + this.opacity + ')' : '';
this.node.style.filter = filter;
if (this.flipH && this.flipV)
{
filter += 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
}
else if (this.flipH)
{
filter += 'progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
}
else if (this.flipV)
{
filter += 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
}
/**
* Function: isRoundable
*
* Disables inherited roundable support.
*/
isRoundable = (c, x, y, w, h) => {
return false;
};
if (img.style.filter != filter)
{
img.style.filter = filter;
}
/**
* Function: paintVertexShape
*
* Generic background painting implementation.
*/
paintVertexShape = (c, x, y, w, h) => {
if (this.image != null) {
var fill = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BACKGROUND, null);
var stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, null);
if (img.nodeName == 'image')
{
img.style.rotation = this.rotation;
}
else if (this.rotation != 0)
{
// LATER: Add flipV/H support
mxUtils.setPrefixedStyle(img.style, 'transform', 'rotate(' + this.rotation + 'deg)');
}
else
{
mxUtils.setPrefixedStyle(img.style, 'transform', '');
}
if (fill != null) {
// Stroke rendering required for shadow
c.setFillColor(fill);
c.setStrokeColor(stroke);
c.rect(x, y, w, h);
c.fillAndStroke();
}
// Known problem: IE clips top line of image for certain angles
img.style.width = this.node.style.width;
img.style.height = this.node.style.height;
this.node.style.backgroundImage = '';
this.node.appendChild(img);
}
else
{
this.setTransparentBackgroundImage(this.node);
}
};
// FlipH/V are implicit via mxShape.updateTransform
c.image(x, y, w, h, this.image, this.preserveImageAspect, false, false);
var stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, null);
if (stroke != null) {
c.setShadow(false);
c.setStrokeColor(stroke);
c.rect(x, y, w, h);
c.stroke();
}
} else {
paintBackground.apply(this, arguments);
}
};
/**
* Function: redraw
*
* Overrides <mxShape.redraw> to preserve the aspect ratio of images.
*/
redrawHtmlShape = () => {
this.node.style.left = Math.round(this.bounds.x) + 'px';
this.node.style.top = Math.round(this.bounds.y) + 'px';
this.node.style.width = Math.max(0, Math.round(this.bounds.width)) + 'px';
this.node.style.height = Math.max(0, Math.round(this.bounds.height)) + 'px';
this.node.innerHTML = '';
if (this.image != null) {
var fill = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BACKGROUND, '');
var stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, '');
this.node.style.backgroundColor = fill;
this.node.style.borderColor = stroke;
// VML image supports PNG in IE6
var useVml = mxClient.IS_IE6 || ((document.documentMode == null || document.documentMode <= 8) && this.rotation !== 0);
var img = document.createElement((useVml) ? mxClient.VML_PREFIX + ':image' : 'img');
img.setAttribute('border', '0');
img.style.position = 'absolute';
img.src = this.image;
var filter = (this.opacity < 100) ? 'alpha(opacity=' + this.opacity + ')' : '';
this.node.style.filter = filter;
if (this.flipH && this.flipV) {
filter += 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
} else if (this.flipH) {
filter += 'progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
} else if (this.flipV) {
filter += 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
}
if (img.style.filter != filter) {
img.style.filter = filter;
}
if (img.nodeName === 'image') {
img.style.rotation = this.rotation;
} else if (this.rotation !== 0) {
// LATER: Add flipV/H support
mxUtils.setPrefixedStyle(img.style, 'transform', 'rotate(' + this.rotation + 'deg)');
} else {
mxUtils.setPrefixedStyle(img.style, 'transform', '');
}
// Known problem: IE clips top line of image for certain angles
img.style.width = this.node.style.width;
img.style.height = this.node.style.height;
this.node.style.backgroundImage = '';
this.node.appendChild(img);
} else {
this.setTransparentBackgroundImage(this.node);
}
};
}
export default mxImageShape;

119
javascript/src/js/shape/mxLine.js
View File

@ -2,68 +2,63 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxLine
*
* Extends <mxShape> to implement a horizontal line shape.
* This shape is registered under <mxConstants.SHAPE_LINE> in
* <mxCellRenderer>.
*
* Constructor: mxLine
*
* Constructs a new line shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* stroke - String that defines the stroke color. Default is 'black'. This is
* stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxLine(bounds, stroke, strokewidth, vertical)
{
mxShape.call(this);
this.bounds = bounds;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.vertical = (vertical != null) ? vertical : this.vertical;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxLine, mxShape);
/**
* Function: vertical
*
* Whether to paint a vertical line.
*/
vertical = false;
/**
* Function: paintVertexShape
*
* Redirects to redrawPath for subclasses to work.
*/
paintVertexShape = (c, x, y, w, h)=>
{
c.begin();
if (this.vertical)
{
var mid = x + w / 2;
c.moveTo(mid, y);
c.lineTo(mid, y + h);
}
else
{
var mid = y + h / 2;
c.moveTo(x, mid);
c.lineTo(x + w, mid);
class mxLine extends mxShape {
/**
* Class: mxLine
*
* Extends <mxShape> to implement a horizontal line shape.
* This shape is registered under <mxConstants.SHAPE_LINE> in
* <mxCellRenderer>.
*
* Constructor: mxLine
*
* Constructs a new line shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* stroke - String that defines the stroke color. Default is 'black'. This is
* stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(bounds, stroke, strokewidth, vertical) {
super();
this.bounds = bounds;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.vertical = (vertical != null) ? vertical : this.vertical;
}
c.stroke();
};
/**
* Function: vertical
*
* Whether to paint a vertical line.
*/
vertical = false;
/**
* Function: paintVertexShape
*
* Redirects to redrawPath for subclasses to work.
*/
paintVertexShape = (c, x, y, w, h) => {
c.begin();
if (this.vertical) {
var mid = x + w / 2;
c.moveTo(mid, y);
c.lineTo(mid, y + h);
} else {
var mid = y + h / 2;
c.moveTo(x, mid);
c.lineTo(x + w, mid);
}
c.stroke();
};
}
export default mxLine;

231
javascript/src/js/shape/mxPolyline.js
View File

@ -2,131 +2,120 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxPolyline
*
* Extends <mxShape> to implement a polyline (a line with multiple points).
* This shape is registered under <mxConstants.SHAPE_POLYLINE> in
* <mxCellRenderer>.
*
* Constructor: mxPolyline
*
* Constructs a new polyline shape.
*
* Parameters:
*
* points - Array of <mxPoints> that define the points. This is stored in
* <mxShape.points>.
* stroke - String that defines the stroke color. Default is 'black'. This is
* stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxPolyline(points, stroke, strokewidth)
{
mxShape.call(this);
this.points = points;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxPolyline, mxShape);
class mxPolyline extends mxShape {
/**
* Class: mxPolyline
*
* Extends <mxShape> to implement a polyline (a line with multiple points).
* This shape is registered under <mxConstants.SHAPE_POLYLINE> in
* <mxCellRenderer>.
*
* Constructor: mxPolyline
*
* Constructs a new polyline shape.
*
* Parameters:
*
* points - Array of <mxPoints> that define the points. This is stored in
* <mxShape.points>.
* stroke - String that defines the stroke color. Default is 'black'. This is
* stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(points, stroke, strokewidth) {
super();
this.points = points;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Function: getRotation
*
* Returns 0.
*/
getRotation = ()=>
{
return 0;
};
/**
* Function: getRotation
*
* Returns 0.
*/
getRotation = () => {
return 0;
};
/**
* Function: getShapeRotation
*
* Returns 0.
*/
getShapeRotation = ()=>
{
return 0;
};
/**
* Function: getShapeRotation
*
* Returns 0.
*/
getShapeRotation = () => {
return 0;
};
/**
* Function: isPaintBoundsInverted
*
* Returns false.
*/
isPaintBoundsInverted = ()=>
{
return false;
};
/**
* Function: isPaintBoundsInverted
*
* Returns false.
*/
isPaintBoundsInverted = () => {
return false;
};
/**
* Function: paintEdgeShape
*
* Paints the line shape.
*/
paintEdgeShape = (c, pts)=>
{
var prev = c.pointerEventsValue;
c.pointerEventsValue = 'stroke';
if (this.style == null || this.style[mxConstants.STYLE_CURVED] != 1)
{
this.paintLine(c, pts, this.isRounded);
}
else
{
this.paintCurvedLine(c, pts);
}
c.pointerEventsValue = prev;
};
/**
* Function: paintEdgeShape
*
* Paints the line shape.
*/
paintEdgeShape = (c, pts) => {
var prev = c.pointerEventsValue;
c.pointerEventsValue = 'stroke';
/**
* Function: paintLine
*
* Paints the line shape.
*/
paintLine = (c, pts, rounded)=>
{
var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
c.begin();
this.addPoints(c, pts, rounded, arcSize, false);
c.stroke();
};
if (this.style == null || this.style[mxConstants.STYLE_CURVED] != 1) {
this.paintLine(c, pts, this.isRounded);
} else {
this.paintCurvedLine(c, pts);
}
/**
* Function: paintCurvedLine
*
* Paints a curved line.
*/
paintCurvedLine = (c, pts)=>
{
c.begin();
var pt = pts[0];
var n = pts.length;
c.moveTo(pt.x, pt.y);
for (var i = 1; i < n - 2; i++)
{
var p0 = pts[i];
var p1 = pts[i + 1];
var ix = (p0.x + p1.x) / 2;
var iy = (p0.y + p1.y) / 2;
c.quadTo(p0.x, p0.y, ix, iy);
}
var p0 = pts[n - 2];
var p1 = pts[n - 1];
c.quadTo(p0.x, p0.y, p1.x, p1.y);
c.stroke();
};
c.pointerEventsValue = prev;
};
/**
* Function: paintLine
*
* Paints the line shape.
*/
paintLine = (c, pts, rounded) => {
var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
c.begin();
this.addPoints(c, pts, rounded, arcSize, false);
c.stroke();
};
/**
* Function: paintCurvedLine
*
* Paints a curved line.
*/
paintCurvedLine = (c, pts) => {
c.begin();
var pt = pts[0];
var n = pts.length;
c.moveTo(pt.x, pt.y);
for (var i = 1; i < n - 2; i++) {
var p0 = pts[i];
var p1 = pts[i + 1];
var ix = (p0.x + p1.x) / 2;
var iy = (p0.y + p1.y) / 2;
c.quadTo(p0.x, p0.y, ix, iy);
}
var p0 = pts[n - 2];
var p1 = pts[n - 1];
c.quadTo(p0.x, p0.y, p1.x, p1.y);
c.stroke();
};
}
export default mxPolyline;

214
javascript/src/js/shape/mxRectangleShape.js
View File

@ -2,126 +2,110 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxRectangleShape
*
* Extends <mxShape> to implement a rectangle shape.
* This shape is registered under <mxConstants.SHAPE_RECTANGLE>
* in <mxCellRenderer>.
*
* Constructor: mxRectangleShape
*
* Constructs a new rectangle shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxRectangleShape(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxRectangleShape, mxShape);
class mxRectangleShape extends mxShape {
/**
* Class: mxRectangleShape
*
* Extends <mxShape> to implement a rectangle shape.
* This shape is registered under <mxConstants.SHAPE_RECTANGLE>
* in <mxCellRenderer>.
*
* Constructor: mxRectangleShape
*
* Constructs a new rectangle shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(bounds, fill, stroke, strokewidth) {
super();
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Function: isHtmlAllowed
*
* Returns true for non-rounded, non-rotated shapes with no glass gradient.
*/
isHtmlAllowed = ()=>
{
var events = true;
if (this.style != null)
{
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
}
return !this.isRounded && !this.glass && this.rotation == 0 && (events ||
(this.fill != null && this.fill != mxConstants.NONE));
};
/**
* Function: isHtmlAllowed
*
* Returns true for non-rounded, non-rotated shapes with no glass gradient.
*/
isHtmlAllowed = () => {
var events = true;
/**
* Function: paintBackground
*
* Generic background painting implementation.
*/
paintBackground = (c, x, y, w, h)=>
{
var events = true;
if (this.style != null)
{
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
}
if (events || (this.fill != null && this.fill != mxConstants.NONE) ||
(this.stroke != null && this.stroke != mxConstants.NONE))
{
if (!events && (this.fill == null || this.fill == mxConstants.NONE))
{
c.pointerEvents = false;
if (this.style != null) {
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
}
if (this.isRounded)
{
var r = 0;
if (mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
{
r = Math.min(w / 2, Math.min(h / 2, mxUtils.getValue(this.style,
mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2));
return !this.isRounded && !this.glass && this.rotation == 0 && (events ||
(this.fill != null && this.fill != mxConstants.NONE));
};
/**
* Function: paintBackground
*
* Generic background painting implementation.
*/
paintBackground = (c, x, y, w, h) => {
var events = true;
if (this.style != null) {
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
}
if (events || (this.fill != null && this.fill != mxConstants.NONE) ||
(this.stroke != null && this.stroke != mxConstants.NONE)) {
if (!events && (this.fill == null || this.fill == mxConstants.NONE)) {
c.pointerEvents = false;
}
else
{
var f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
r = Math.min(w * f, h * f);
if (this.isRounded) {
var r = 0;
if (mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1') {
r = Math.min(w / 2, Math.min(h / 2, mxUtils.getValue(this.style,
mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2));
} else {
var f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
r = Math.min(w * f, h * f);
}
c.roundrect(x, y, w, h, r, r);
} else {
c.rect(x, y, w, h);
}
c.roundrect(x, y, w, h, r, r);
}
else
{
c.rect(x, y, w, h);
}
c.fillAndStroke();
}
};
/**
* Function: isRoundable
*
* Adds roundable support.
*/
isRoundable = (c, x, y, w, h)=>
{
return true;
};
c.fillAndStroke();
}
};
/**
* Function: paintForeground
*
* Generic background painting implementation.
*/
paintForeground = (c, x, y, w, h)=>
{
if (this.glass && !this.outline && this.fill != null && this.fill != mxConstants.NONE)
{
this.paintGlassEffect(c, x, y, w, h, this.getArcSize(w + this.strokewidth, h + this.strokewidth));
}
};
/**
* Function: isRoundable
*
* Adds roundable support.
*/
isRoundable = (c, x, y, w, h) => {
return true;
};
/**
* Function: paintForeground
*
* Generic background painting implementation.
*/
paintForeground = (c, x, y, w, h) => {
if (this.glass && !this.outline && this.fill != null && this.fill != mxConstants.NONE) {
this.paintGlassEffect(c, x, y, w, h, this.getArcSize(w + this.strokewidth, h + this.strokewidth));
}
};
}
export default mxRectangleShape;

111
javascript/src/js/shape/mxRhombus.js
View File

@ -2,63 +2,60 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxRhombus
*
* Extends <mxShape> to implement a rhombus (aka diamond) shape.
* This shape is registered under <mxConstants.SHAPE_RHOMBUS>
* in <mxCellRenderer>.
*
* Constructor: mxRhombus
*
* Constructs a new rhombus shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxRhombus(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxRhombus, mxShape);
class mxRhombus extends mxShape {
/**
* Class: mxRhombus
*
* Extends <mxShape> to implement a rhombus (aka diamond) shape.
* This shape is registered under <mxConstants.SHAPE_RHOMBUS>
* in <mxCellRenderer>.
*
* Constructor: mxRhombus
*
* Constructs a new rhombus shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(bounds, fill, stroke, strokewidth) {
super();
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
}
/**
* Function: isRoundable
*
* Adds roundable support.
*/
isRoundable = ()=>
{
return true;
};
/**
* Function: isRoundable
*
* Adds roundable support.
*/
isRoundable = () => {
return true;
};
/**
* Function: paintVertexShape
*
* Generic painting implementation.
*/
paintVertexShape = (c, x, y, w, h)=>
{
var hw = w / 2;
var hh = h / 2;
var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
c.begin();
this.addPoints(c, [new mxPoint(x + hw, y), new mxPoint(x + w, y + hh), new mxPoint(x + hw, y + h),
new mxPoint(x, y + hh)], this.isRounded, arcSize, true);
c.fillAndStroke();
};
/**
* Function: paintVertexShape
*
* Generic painting implementation.
*/
paintVertexShape = (c, x, y, w, h) => {
var hw = w / 2;
var hh = h / 2;
var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
c.begin();
this.addPoints(c, [new mxPoint(x + hw, y), new mxPoint(x + w, y + hh), new mxPoint(x + hw, y + h),
new mxPoint(x, y + hh)], this.isRounded, arcSize, true);
c.fillAndStroke();
};
}
export default mxRhombus;

3041
javascript/src/js/shape/mxShape.js
View File

File diff suppressed because it is too large Load Diff

1510
javascript/src/js/shape/mxStencil.js
View File

File diff suppressed because it is too large Load Diff

2
javascript/src/js/shape/mxStencilRegistry.js
View File

@ -51,3 +51,5 @@ var mxStencilRegistry =
}
};
export default mxStencilRegistry;