manual js syntax updates
mcyph
parent
a3b84ee3c9
commit
fd21dbe3d9
|
|
@ -2,85 +2,82 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||
*/
|
||||
/**
|
||||
* Class: mxActor
|
||||
*
|
||||
* Extends <mxShape> to implement an actor shape. If a custom shape with one
|
||||
* filled area is needed, then this shape's <redrawPath> should be overridden.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* (code)
|
||||
* function SampleShape() { }
|
||||
*
|
||||
* SampleShape.prototype = new mxActor();
|
||||
* constructor = vsAseShape;
|
||||
*
|
||||
* mxCellRenderer.registerShape('sample', SampleShape);
|
||||
* redrawPath = (path, x, y, w, h)=>
|
||||
* {
|
||||
* path.moveTo(0, 0);
|
||||
* path.lineTo(w, h);
|
||||
* // ...
|
||||
* path.close();
|
||||
* }
|
||||
* (end)
|
||||
*
|
||||
* This shape is registered under <mxConstants.SHAPE_ACTOR> in
|
||||
* <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxActor
|
||||
*
|
||||
* Constructs a new actor 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 mxActor(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(mxActor, mxShape);
|
||||
class mxActor extends mxShape {
|
||||
/**
|
||||
* Class: mxActor
|
||||
*
|
||||
* Extends <mxShape> to implement an actor shape. If a custom shape with one
|
||||
* filled area is needed, then this shape's <redrawPath> should be overridden.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* (code)
|
||||
* function SampleShape() { }
|
||||
*
|
||||
* SampleShape.prototype = new mxActor();
|
||||
* constructor = vsAseShape;
|
||||
*
|
||||
* mxCellRenderer.registerShape('sample', SampleShape);
|
||||
* redrawPath = (path, x, y, w, h)=>
|
||||
* {
|
||||
* path.moveTo(0, 0);
|
||||
* path.lineTo(w, h);
|
||||
* // ...
|
||||
* path.close();
|
||||
* }
|
||||
* (end)
|
||||
*
|
||||
* This shape is registered under <mxConstants.SHAPE_ACTOR> in
|
||||
* <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxActor
|
||||
*
|
||||
* Constructs a new actor 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
|
||||
*
|
||||
* Redirects to redrawPath for subclasses to work.
|
||||
*/
|
||||
paintVertexShape = (c, x, y, w, h)=>
|
||||
{
|
||||
c.translate(x, y);
|
||||
c.begin();
|
||||
this.redrawPath(c, x, y, w, h);
|
||||
c.fillAndStroke();
|
||||
};
|
||||
/**
|
||||
* Function: paintVertexShape
|
||||
*
|
||||
* Redirects to redrawPath for subclasses to work.
|
||||
*/
|
||||
paintVertexShape = (c, x, y, w, h) => {
|
||||
c.translate(x, y);
|
||||
c.begin();
|
||||
this.redrawPath(c, x, y, w, h);
|
||||
c.fillAndStroke();
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: redrawPath
|
||||
*
|
||||
* Draws the path for this shape.
|
||||
*/
|
||||
redrawPath = (c, x, y, w, h)=>
|
||||
{
|
||||
var width = w/3;
|
||||
c.moveTo(0, h);
|
||||
c.curveTo(0, 3 * h / 5, 0, 2 * h / 5, w / 2, 2 * h / 5);
|
||||
c.curveTo(w / 2 - width, 2 * h / 5, w / 2 - width, 0, w / 2, 0);
|
||||
c.curveTo(w / 2 + width, 0, w / 2 + width, 2 * h / 5, w / 2, 2 * h / 5);
|
||||
c.curveTo(w, 2 * h / 5, w, 3 * h / 5, w, h);
|
||||
c.close();
|
||||
};
|
||||
/**
|
||||
* Function: redrawPath
|
||||
*
|
||||
* Draws the path for this shape.
|
||||
*/
|
||||
redrawPath = (c, x, y, w, h) => {
|
||||
var width = w / 3;
|
||||
c.moveTo(0, h);
|
||||
c.curveTo(0, 3 * h / 5, 0, 2 * h / 5, w / 2, 2 * h / 5);
|
||||
c.curveTo(w / 2 - width, 2 * h / 5, w / 2 - width, 0, w / 2, 0);
|
||||
c.curveTo(w / 2 + width, 0, w / 2 + width, 2 * h / 5, w / 2, 2 * h / 5);
|
||||
c.curveTo(w, 2 * h / 5, w, 3 * h / 5, w, h);
|
||||
c.close();
|
||||
};
|
||||
}
|
||||
|
||||
export default mxActor;
|
||||
|
|
|
|||
|
|
@ -2,114 +2,111 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||
*/
|
||||
/**
|
||||
* Class: mxArrow
|
||||
*
|
||||
* Extends <mxShape> to implement an arrow shape. (The shape
|
||||
* is used to represent edges, not vertices.)
|
||||
* This shape is registered under <mxConstants.SHAPE_ARROW>
|
||||
* in <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxArrow
|
||||
*
|
||||
* Constructs a new arrow shape.
|
||||
*
|
||||
* Parameters:
|
||||
*
|
||||
* points - Array of <mxPoints> that define the points. This is stored in
|
||||
* <mxShape.points>.
|
||||
* 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>.
|
||||
* arrowWidth - Optional integer that defines the arrow width. Default is
|
||||
* <mxConstants.ARROW_WIDTH>. This is stored in <arrowWidth>.
|
||||
* spacing - Optional integer that defines the spacing between the arrow shape
|
||||
* and its endpoints. Default is <mxConstants.ARROW_SPACING>. This is stored in
|
||||
* <spacing>.
|
||||
* endSize - Optional integer that defines the size of the arrowhead. Default
|
||||
* is <mxConstants.ARROW_SIZE>. This is stored in <endSize>.
|
||||
*/
|
||||
function mxArrow(points, fill, stroke, strokewidth, arrowWidth, spacing, endSize)
|
||||
{
|
||||
mxShape.call(this);
|
||||
this.points = points;
|
||||
this.fill = fill;
|
||||
this.stroke = stroke;
|
||||
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
|
||||
this.arrowWidth = (arrowWidth != null) ? arrowWidth : mxConstants.ARROW_WIDTH;
|
||||
this.spacing = (spacing != null) ? spacing : mxConstants.ARROW_SPACING;
|
||||
this.endSize = (endSize != null) ? endSize : mxConstants.ARROW_SIZE;
|
||||
};
|
||||
|
||||
/**
|
||||
* Extends mxShape.
|
||||
*/
|
||||
mxUtils.extend(mxArrow, mxShape);
|
||||
class mxArrow extends mxShape {
|
||||
/**
|
||||
* Class: mxArrow
|
||||
*
|
||||
* Extends <mxShape> to implement an arrow shape. (The shape
|
||||
* is used to represent edges, not vertices.)
|
||||
* This shape is registered under <mxConstants.SHAPE_ARROW>
|
||||
* in <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxArrow
|
||||
*
|
||||
* Constructs a new arrow shape.
|
||||
*
|
||||
* Parameters:
|
||||
*
|
||||
* points - Array of <mxPoints> that define the points. This is stored in
|
||||
* <mxShape.points>.
|
||||
* 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>.
|
||||
* arrowWidth - Optional integer that defines the arrow width. Default is
|
||||
* <mxConstants.ARROW_WIDTH>. This is stored in <arrowWidth>.
|
||||
* spacing - Optional integer that defines the spacing between the arrow shape
|
||||
* and its endpoints. Default is <mxConstants.ARROW_SPACING>. This is stored in
|
||||
* <spacing>.
|
||||
* endSize - Optional integer that defines the size of the arrowhead. Default
|
||||
* is <mxConstants.ARROW_SIZE>. This is stored in <endSize>.
|
||||
*/
|
||||
constructor(points, fill, stroke, strokewidth, arrowWidth, spacing, endSize) {
|
||||
super();
|
||||
this.points = points;
|
||||
this.fill = fill;
|
||||
this.stroke = stroke;
|
||||
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
|
||||
this.arrowWidth = (arrowWidth != null) ? arrowWidth : mxConstants.ARROW_WIDTH;
|
||||
this.spacing = (spacing != null) ? spacing : mxConstants.ARROW_SPACING;
|
||||
this.endSize = (endSize != null) ? endSize : mxConstants.ARROW_SIZE;
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: augmentBoundingBox
|
||||
*
|
||||
* Augments the bounding box with the edge width and markers.
|
||||
*/
|
||||
augmentBoundingBox = (bbox)=>
|
||||
{
|
||||
augmentBoundingBox.apply(this, arguments);
|
||||
|
||||
var w = Math.max(this.arrowWidth, this.endSize);
|
||||
bbox.grow((w / 2 + this.strokewidth) * this.scale);
|
||||
};
|
||||
/**
|
||||
* Function: augmentBoundingBox
|
||||
*
|
||||
* Augments the bounding box with the edge width and markers.
|
||||
*/
|
||||
augmentBoundingBox = (bbox) => {
|
||||
super.augmentBoundingBox.apply(bbox);
|
||||
|
||||
/**
|
||||
* Function: paintEdgeShape
|
||||
*
|
||||
* Paints the line shape.
|
||||
*/
|
||||
paintEdgeShape = (c, pts)=>
|
||||
{
|
||||
// Geometry of arrow
|
||||
var spacing = mxConstants.ARROW_SPACING;
|
||||
var width = mxConstants.ARROW_WIDTH;
|
||||
var arrow = mxConstants.ARROW_SIZE;
|
||||
var w = Math.max(this.arrowWidth, this.endSize);
|
||||
bbox.grow((w / 2 + this.strokewidth) * this.scale);
|
||||
};
|
||||
|
||||
// Base vector (between end points)
|
||||
var p0 = pts[0];
|
||||
var pe = pts[pts.length - 1];
|
||||
var dx = pe.x - p0.x;
|
||||
var dy = pe.y - p0.y;
|
||||
var dist = Math.sqrt(dx * dx + dy * dy);
|
||||
var length = dist - 2 * spacing - arrow;
|
||||
|
||||
// Computes the norm and the inverse norm
|
||||
var nx = dx / dist;
|
||||
var ny = dy / dist;
|
||||
var basex = length * nx;
|
||||
var basey = length * ny;
|
||||
var floorx = width * ny/3;
|
||||
var floory = -width * nx/3;
|
||||
|
||||
// Computes points
|
||||
var p0x = p0.x - floorx / 2 + spacing * nx;
|
||||
var p0y = p0.y - floory / 2 + spacing * ny;
|
||||
var p1x = p0x + floorx;
|
||||
var p1y = p0y + floory;
|
||||
var p2x = p1x + basex;
|
||||
var p2y = p1y + basey;
|
||||
var p3x = p2x + floorx;
|
||||
var p3y = p2y + floory;
|
||||
// p4 not necessary
|
||||
var p5x = p3x - 3 * floorx;
|
||||
var p5y = p3y - 3 * floory;
|
||||
|
||||
c.begin();
|
||||
c.moveTo(p0x, p0y);
|
||||
c.lineTo(p1x, p1y);
|
||||
c.lineTo(p2x, p2y);
|
||||
c.lineTo(p3x, p3y);
|
||||
c.lineTo(pe.x - spacing * nx, pe.y - spacing * ny);
|
||||
c.lineTo(p5x, p5y);
|
||||
c.lineTo(p5x + floorx, p5y + floory);
|
||||
c.close();
|
||||
/**
|
||||
* Function: paintEdgeShape
|
||||
*
|
||||
* Paints the line shape.
|
||||
*/
|
||||
paintEdgeShape = (c, pts) => {
|
||||
// Geometry of arrow
|
||||
var spacing = mxConstants.ARROW_SPACING;
|
||||
var width = mxConstants.ARROW_WIDTH;
|
||||
var arrow = mxConstants.ARROW_SIZE;
|
||||
|
||||
c.fillAndStroke();
|
||||
};
|
||||
// Base vector (between end points)
|
||||
var p0 = pts[0];
|
||||
var pe = pts[pts.length - 1];
|
||||
var dx = pe.x - p0.x;
|
||||
var dy = pe.y - p0.y;
|
||||
var dist = Math.sqrt(dx * dx + dy * dy);
|
||||
var length = dist - 2 * spacing - arrow;
|
||||
|
||||
// Computes the norm and the inverse norm
|
||||
var nx = dx / dist;
|
||||
var ny = dy / dist;
|
||||
var basex = length * nx;
|
||||
var basey = length * ny;
|
||||
var floorx = width * ny / 3;
|
||||
var floory = -width * nx / 3;
|
||||
|
||||
// Computes points
|
||||
var p0x = p0.x - floorx / 2 + spacing * nx;
|
||||
var p0y = p0.y - floory / 2 + spacing * ny;
|
||||
var p1x = p0x + floorx;
|
||||
var p1y = p0y + floory;
|
||||
var p2x = p1x + basex;
|
||||
var p2y = p1y + basey;
|
||||
var p3x = p2x + floorx;
|
||||
var p3y = p2y + floory;
|
||||
// p4 not necessary
|
||||
var p5x = p3x - 3 * floorx;
|
||||
var p5y = p3y - 3 * floory;
|
||||
|
||||
c.begin();
|
||||
c.moveTo(p0x, p0y);
|
||||
c.lineTo(p1x, p1y);
|
||||
c.lineTo(p2x, p2y);
|
||||
c.lineTo(p3x, p3y);
|
||||
c.lineTo(pe.x - spacing * nx, pe.y - spacing * ny);
|
||||
c.lineTo(p5x, p5y);
|
||||
c.lineTo(p5x + floorx, p5y + floory);
|
||||
c.close();
|
||||
|
||||
c.fillAndStroke();
|
||||
};
|
||||
}
|
||||
|
||||
export default mxArrow;
|
||||
|
|
|
|||
|
|
@ -2,54 +2,52 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||
*/
|
||||
/**
|
||||
* Class: mxCloud
|
||||
*
|
||||
* Extends <mxActor> to implement a cloud shape.
|
||||
*
|
||||
* This shape is registered under <mxConstants.SHAPE_CLOUD> in
|
||||
* <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxCloud
|
||||
*
|
||||
* Constructs a new cloud 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 mxCloud(bounds, fill, stroke, strokewidth)
|
||||
{
|
||||
mxActor.call(this);
|
||||
this.bounds = bounds;
|
||||
this.fill = fill;
|
||||
this.stroke = stroke;
|
||||
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Extends mxActor.
|
||||
*/
|
||||
mxUtils.extend(mxCloud, mxActor);
|
||||
class mxCloud extends mxActor {
|
||||
/**
|
||||
* Class: mxCloud
|
||||
*
|
||||
* Extends <mxActor> to implement a cloud shape.
|
||||
*
|
||||
* This shape is registered under <mxConstants.SHAPE_CLOUD> in
|
||||
* <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxCloud
|
||||
*
|
||||
* Constructs a new cloud 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: redrawPath
|
||||
*
|
||||
* Draws the path for this shape.
|
||||
*/
|
||||
redrawPath = (c, x, y, w, h)=>
|
||||
{
|
||||
c.moveTo(0.25 * w, 0.25 * h);
|
||||
c.curveTo(0.05 * w, 0.25 * h, 0, 0.5 * h, 0.16 * w, 0.55 * h);
|
||||
c.curveTo(0, 0.66 * h, 0.18 * w, 0.9 * h, 0.31 * w, 0.8 * h);
|
||||
c.curveTo(0.4 * w, h, 0.7 * w, h, 0.8 * w, 0.8 * h);
|
||||
c.curveTo(w, 0.8 * h, w, 0.6 * h, 0.875 * w, 0.5 * h);
|
||||
c.curveTo(w, 0.3 * h, 0.8 * w, 0.1 * h, 0.625 * w, 0.2 * h);
|
||||
c.curveTo(0.5 * w, 0.05 * h, 0.3 * w, 0.05 * h, 0.25 * w, 0.25 * h);
|
||||
c.close();
|
||||
};
|
||||
/**
|
||||
* Function: redrawPath
|
||||
*
|
||||
* Draws the path for this shape.
|
||||
*/
|
||||
redrawPath = (c, x, y, w, h) => {
|
||||
c.moveTo(0.25 * w, 0.25 * h);
|
||||
c.curveTo(0.05 * w, 0.25 * h, 0, 0.5 * h, 0.16 * w, 0.55 * h);
|
||||
c.curveTo(0, 0.66 * h, 0.18 * w, 0.9 * h, 0.31 * w, 0.8 * h);
|
||||
c.curveTo(0.4 * w, h, 0.7 * w, h, 0.8 * w, 0.8 * h);
|
||||
c.curveTo(w, 0.8 * h, w, 0.6 * h, 0.875 * w, 0.5 * h);
|
||||
c.curveTo(w, 0.3 * h, 0.8 * w, 0.1 * h, 0.625 * w, 0.2 * h);
|
||||
c.curveTo(0.5 * w, 0.05 * h, 0.3 * w, 0.05 * h, 0.25 * w, 0.25 * h);
|
||||
c.close();
|
||||
};
|
||||
}
|
||||
|
||||
export default mxCloud;
|
||||
|
|
|
|||
|
|
@ -2,148 +2,137 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||
*/
|
||||
/**
|
||||
* Class: mxConnector
|
||||
*
|
||||
* Extends <mxShape> to implement a connector shape. The connector
|
||||
* shape allows for arrow heads on either side.
|
||||
*
|
||||
* This shape is registered under <mxConstants.SHAPE_CONNECTOR> in
|
||||
* <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxConnector
|
||||
*
|
||||
* Constructs a new connector shape.
|
||||
*
|
||||
* Parameters:
|
||||
*
|
||||
* points - Array of <mxPoints> that define the points. This is stored in
|
||||
* <mxShape.points>.
|
||||
* stroke - String that defines the stroke color. This is stored in <stroke>.
|
||||
* Default is 'black'.
|
||||
* strokewidth - Optional integer that defines the stroke width. Default is
|
||||
* 1. This is stored in <strokewidth>.
|
||||
*/
|
||||
function mxConnector(points, stroke, strokewidth)
|
||||
{
|
||||
mxPolyline.call(this, points, stroke, strokewidth);
|
||||
};
|
||||
|
||||
/**
|
||||
* Extends mxPolyline.
|
||||
*/
|
||||
mxUtils.extend(mxConnector, mxPolyline);
|
||||
|
||||
/**
|
||||
* Function: updateBoundingBox
|
||||
*
|
||||
* Updates the <boundingBox> for this shape using <createBoundingBox> and
|
||||
* <augmentBoundingBox> and stores the result in <boundingBox>.
|
||||
*/
|
||||
updateBoundingBox = ()=>
|
||||
{
|
||||
this.useSvgBoundingBox = this.style != null && this.style[mxConstants.STYLE_CURVED] == 1;
|
||||
updateBoundingBox.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: paintEdgeShape
|
||||
*
|
||||
* Paints the line shape.
|
||||
*/
|
||||
paintEdgeShape = (c, pts)=>
|
||||
{
|
||||
// The indirection via functions for markers is needed in
|
||||
// order to apply the offsets before painting the line and
|
||||
// paint the markers after painting the line.
|
||||
var sourceMarker = this.createMarker(c, pts, true);
|
||||
var targetMarker = this.createMarker(c, pts, false);
|
||||
|
||||
paintEdgeShape.apply(this, arguments);
|
||||
|
||||
// Disables shadows, dashed styles and fixes fill color for markers
|
||||
c.setFillColor(this.stroke);
|
||||
c.setShadow(false);
|
||||
c.setDashed(false);
|
||||
|
||||
if (sourceMarker != null)
|
||||
{
|
||||
sourceMarker();
|
||||
class mxConnector extends mxPolyLine {
|
||||
/**
|
||||
* Class: mxConnector
|
||||
*
|
||||
* Extends <mxShape> to implement a connector shape. The connector
|
||||
* shape allows for arrow heads on either side.
|
||||
*
|
||||
* This shape is registered under <mxConstants.SHAPE_CONNECTOR> in
|
||||
* <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxConnector
|
||||
*
|
||||
* Constructs a new connector shape.
|
||||
*
|
||||
* Parameters:
|
||||
*
|
||||
* points - Array of <mxPoints> that define the points. This is stored in
|
||||
* <mxShape.points>.
|
||||
* stroke - String that defines the stroke color. This is stored in <stroke>.
|
||||
* Default is 'black'.
|
||||
* strokewidth - Optional integer that defines the stroke width. Default is
|
||||
* 1. This is stored in <strokewidth>.
|
||||
*/
|
||||
constructor(points, stroke, strokewidth) {
|
||||
super(points, stroke, strokewidth);
|
||||
}
|
||||
|
||||
if (targetMarker != null)
|
||||
{
|
||||
targetMarker();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Function: updateBoundingBox
|
||||
*
|
||||
* Updates the <boundingBox> for this shape using <createBoundingBox> and
|
||||
* <augmentBoundingBox> and stores the result in <boundingBox>.
|
||||
*/
|
||||
updateBoundingBox = () => {
|
||||
this.useSvgBoundingBox = this.style != null && this.style[mxConstants.STYLE_CURVED] === 1;
|
||||
updateBoundingBox.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: createMarker
|
||||
*
|
||||
* Prepares the marker by adding offsets in pts and returning a function to
|
||||
* paint the marker.
|
||||
*/
|
||||
createMarker = (c, pts, source)=>
|
||||
{
|
||||
var result = null;
|
||||
var n = pts.length;
|
||||
var type = mxUtils.getValue(this.style, (source) ? mxConstants.STYLE_STARTARROW : mxConstants.STYLE_ENDARROW);
|
||||
var p0 = (source) ? pts[1] : pts[n - 2];
|
||||
var pe = (source) ? pts[0] : pts[n - 1];
|
||||
/**
|
||||
* Function: paintEdgeShape
|
||||
*
|
||||
* Paints the line shape.
|
||||
*/
|
||||
paintEdgeShape = (c, pts) => {
|
||||
// The indirection via functions for markers is needed in
|
||||
// order to apply the offsets before painting the line and
|
||||
// paint the markers after painting the line.
|
||||
var sourceMarker = this.createMarker(c, pts, true);
|
||||
var targetMarker = this.createMarker(c, pts, false);
|
||||
|
||||
if (type != null && p0 != null && pe != null)
|
||||
{
|
||||
var count = 1;
|
||||
super.paintEdgeShape(c, pts);
|
||||
|
||||
// Uses next non-overlapping point
|
||||
while (count < n - 1 && Math.round(p0.x - pe.x) == 0 && Math.round(p0.y - pe.y) == 0)
|
||||
{
|
||||
p0 = (source) ? pts[1 + count] : pts[n - 2 - count];
|
||||
count++;
|
||||
// Disables shadows, dashed styles and fixes fill color for markers
|
||||
c.setFillColor(this.stroke);
|
||||
c.setShadow(false);
|
||||
c.setDashed(false);
|
||||
|
||||
if (sourceMarker != null) {
|
||||
sourceMarker();
|
||||
}
|
||||
|
||||
// Computes the norm and the inverse norm
|
||||
var dx = pe.x - p0.x;
|
||||
var dy = pe.y - p0.y;
|
||||
if (targetMarker != null) {
|
||||
targetMarker();
|
||||
}
|
||||
};
|
||||
|
||||
var dist = Math.max(1, Math.sqrt(dx * dx + dy * dy));
|
||||
/**
|
||||
* Function: createMarker
|
||||
*
|
||||
* Prepares the marker by adding offsets in pts and returning a function to
|
||||
* paint the marker.
|
||||
*/
|
||||
createMarker = (c, pts, source) => {
|
||||
var result = null;
|
||||
var n = pts.length;
|
||||
var type = mxUtils.getValue(this.style, (source) ? mxConstants.STYLE_STARTARROW : mxConstants.STYLE_ENDARROW);
|
||||
var p0 = (source) ? pts[1] : pts[n - 2];
|
||||
var pe = (source) ? pts[0] : pts[n - 1];
|
||||
|
||||
var unitX = dx / dist;
|
||||
var unitY = dy / dist;
|
||||
if (type != null && p0 != null && pe != null) {
|
||||
var count = 1;
|
||||
|
||||
var size = mxUtils.getNumber(this.style, (source) ? mxConstants.STYLE_STARTSIZE : mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE);
|
||||
// Uses next non-overlapping point
|
||||
while (count < n - 1 && Math.round(p0.x - pe.x) === 0 && Math.round(p0.y - pe.y) === 0) {
|
||||
p0 = (source) ? pts[1 + count] : pts[n - 2 - count];
|
||||
count++;
|
||||
}
|
||||
|
||||
// Allow for stroke width in the end point used and the
|
||||
// orthogonal vectors describing the direction of the marker
|
||||
var filled = this.style[(source) ? mxConstants.STYLE_STARTFILL : mxConstants.STYLE_ENDFILL] != 0;
|
||||
// Computes the norm and the inverse norm
|
||||
var dx = pe.x - p0.x;
|
||||
var dy = pe.y - p0.y;
|
||||
|
||||
result = mxMarker.createMarker(c, this, type, pe, unitX, unitY, size, source, this.strokewidth, filled);
|
||||
}
|
||||
var dist = Math.max(1, Math.sqrt(dx * dx + dy * dy));
|
||||
|
||||
return result;
|
||||
};
|
||||
var unitX = dx / dist;
|
||||
var unitY = dy / dist;
|
||||
|
||||
/**
|
||||
* Function: augmentBoundingBox
|
||||
*
|
||||
* Augments the bounding box with the strokewidth and shadow offsets.
|
||||
*/
|
||||
augmentBoundingBox = (bbox)=>
|
||||
{
|
||||
augmentBoundingBox.apply(this, arguments);
|
||||
var size = mxUtils.getNumber(this.style, (source) ? mxConstants.STYLE_STARTSIZE : mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE);
|
||||
|
||||
// Adds marker sizes
|
||||
var size = 0;
|
||||
// Allow for stroke width in the end point used and the
|
||||
// orthogonal vectors describing the direction of the marker
|
||||
var filled = this.style[(source) ? mxConstants.STYLE_STARTFILL : mxConstants.STYLE_ENDFILL] !== 0;
|
||||
|
||||
if (mxUtils.getValue(this.style, mxConstants.STYLE_STARTARROW, mxConstants.NONE) != mxConstants.NONE)
|
||||
{
|
||||
size = mxUtils.getNumber(this.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE) + 1;
|
||||
}
|
||||
result = mxMarker.createMarker(c, this, type, pe, unitX, unitY, size, source, this.strokewidth, filled);
|
||||
}
|
||||
|
||||
if (mxUtils.getValue(this.style, mxConstants.STYLE_ENDARROW, mxConstants.NONE) != mxConstants.NONE)
|
||||
{
|
||||
size = Math.max(size, mxUtils.getNumber(this.style, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE)) + 1;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
bbox.grow(size * this.scale);
|
||||
};
|
||||
/**
|
||||
* Function: augmentBoundingBox
|
||||
*
|
||||
* Augments the bounding box with the strokewidth and shadow offsets.
|
||||
*/
|
||||
augmentBoundingBox = (bbox) => {
|
||||
super.augmentBoundingBox(bbox);
|
||||
|
||||
// Adds marker sizes
|
||||
var size = 0;
|
||||
|
||||
if (mxUtils.getValue(this.style, mxConstants.STYLE_STARTARROW, mxConstants.NONE) !== mxConstants.NONE) {
|
||||
size = mxUtils.getNumber(this.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE) + 1;
|
||||
}
|
||||
|
||||
if (mxUtils.getValue(this.style, mxConstants.STYLE_ENDARROW, mxConstants.NONE) !== mxConstants.NONE) {
|
||||
size = Math.max(size, mxUtils.getNumber(this.style, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE)) + 1;
|
||||
}
|
||||
|
||||
bbox.grow(size * this.scale);
|
||||
};
|
||||
}
|
||||
|
||||
export default mxConnector;
|
||||
|
|
|
|||
|
|
@ -2,117 +2,109 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||
*/
|
||||
/**
|
||||
* Class: mxCylinder
|
||||
*
|
||||
* Extends <mxShape> to implement an cylinder shape. If a
|
||||
* custom shape with one filled area and an overlay path is
|
||||
* needed, then this shape's <redrawPath> should be overridden.
|
||||
* This shape is registered under <mxConstants.SHAPE_CYLINDER>
|
||||
* in <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxCylinder
|
||||
*
|
||||
* Constructs a new cylinder 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 mxCylinder(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(mxCylinder, mxShape);
|
||||
class mxCylinder extends mxShape {
|
||||
/**
|
||||
* Variable: maxHeight
|
||||
*
|
||||
* Defines the maximum height of the top and bottom part
|
||||
* of the cylinder shape.
|
||||
*/
|
||||
maxHeight = 40;
|
||||
|
||||
/**
|
||||
* Variable: maxHeight
|
||||
*
|
||||
* Defines the maximum height of the top and bottom part
|
||||
* of the cylinder shape.
|
||||
*/
|
||||
maxHeight = 40;
|
||||
/**
|
||||
* Variable: svgStrokeTolerance
|
||||
*
|
||||
* Sets stroke tolerance to 0 for SVG.
|
||||
*/
|
||||
svgStrokeTolerance = 0;
|
||||
|
||||
/**
|
||||
* Variable: svgStrokeTolerance
|
||||
*
|
||||
* Sets stroke tolerance to 0 for SVG.
|
||||
*/
|
||||
svgStrokeTolerance = 0;
|
||||
/**
|
||||
* Class: mxCylinder
|
||||
*
|
||||
* Extends <mxShape> to implement an cylinder shape. If a
|
||||
* custom shape with one filled area and an overlay path is
|
||||
* needed, then this shape's <redrawPath> should be overridden.
|
||||
* This shape is registered under <mxConstants.SHAPE_CYLINDER>
|
||||
* in <mxCellRenderer>.
|
||||
*
|
||||
* Constructor: mxCylinder
|
||||
*
|
||||
* Constructs a new cylinder 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
|
||||
*
|
||||
* Redirects to redrawPath for subclasses to work.
|
||||
*/
|
||||
paintVertexShape = (c, x, y, w, h)=>
|
||||
{
|
||||
c.translate(x, y);
|
||||
c.begin();
|
||||
this.redrawPath(c, x, y, w, h, false);
|
||||
c.fillAndStroke();
|
||||
|
||||
if (!this.outline || this.style == null || mxUtils.getValue(
|
||||
this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0)
|
||||
{
|
||||
c.setShadow(false);
|
||||
/**
|
||||
* Function: paintVertexShape
|
||||
*
|
||||
* Redirects to redrawPath for subclasses to work.
|
||||
*/
|
||||
paintVertexShape = (c, x, y, w, h) => {
|
||||
c.translate(x, y);
|
||||
c.begin();
|
||||
this.redrawPath(c, x, y, w, h, true);
|
||||
c.stroke();
|
||||
}
|
||||
};
|
||||
this.redrawPath(c, x, y, w, h, false);
|
||||
c.fillAndStroke();
|
||||
|
||||
/**
|
||||
* Function: getCylinderSize
|
||||
*
|
||||
* Returns the cylinder size.
|
||||
*/
|
||||
getCylinderSize = (x, y, w, h)=>
|
||||
{
|
||||
return Math.min(this.maxHeight, Math.round(h / 5));
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: redrawPath
|
||||
*
|
||||
* Draws the path for this shape.
|
||||
*/
|
||||
redrawPath = (c, x, y, w, h, isForeground)=>
|
||||
{
|
||||
var dy = this.getCylinderSize(x, y, w, h);
|
||||
|
||||
if ((isForeground && this.fill != null) || (!isForeground && this.fill == null))
|
||||
{
|
||||
c.moveTo(0, dy);
|
||||
c.curveTo(0, 2 * dy, w, 2 * dy, w, dy);
|
||||
|
||||
// Needs separate shapes for correct hit-detection
|
||||
if (!isForeground)
|
||||
{
|
||||
c.stroke();
|
||||
if (!this.outline || this.style == null || mxUtils.getValue(
|
||||
this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0) {
|
||||
c.setShadow(false);
|
||||
c.begin();
|
||||
this.redrawPath(c, x, y, w, h, true);
|
||||
c.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
if (!isForeground)
|
||||
{
|
||||
c.moveTo(0, dy);
|
||||
c.curveTo(0, -dy / 3, w, -dy / 3, w, dy);
|
||||
c.lineTo(w, h - dy);
|
||||
c.curveTo(w, h + dy / 3, 0, h + dy / 3, 0, h - dy);
|
||||
c.close();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: getCylinderSize
|
||||
*
|
||||
* Returns the cylinder size.
|
||||
*/
|
||||
getCylinderSize = (x, y, w, h) => {
|
||||
return Math.min(this.maxHeight, Math.round(h / 5));
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: redrawPath
|
||||
*
|
||||
* Draws the path for this shape.
|
||||
*/
|
||||
redrawPath = (c, x, y, w, h, isForeground) => {
|
||||
var dy = this.getCylinderSize(x, y, w, h);
|
||||
|
||||
if ((isForeground && this.fill != null) || (!isForeground && this.fill == null)) {
|
||||
c.moveTo(0, dy);
|
||||
c.curveTo(0, 2 * dy, w, 2 * dy, w, dy);
|
||||
|
||||
// Needs separate shapes for correct hit-detection
|
||||
if (!isForeground) {
|
||||
c.stroke();
|
||||
c.begin();
|
||||
}
|
||||
}
|
||||
|
||||
if (!isForeground) {
|
||||
c.moveTo(0, dy);
|
||||
c.curveTo(0, -dy / 3, w, -dy / 3, w, dy);
|
||||
c.lineTo(w, h - dy);
|
||||
c.curveTo(w, h + dy / 3, 0, h + dy / 3, 0, h - dy);
|
||||
c.close();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default mxCylinder;
|
||||
|
|
|
|||
|
|
@ -2,42 +2,41 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||
*/
|
||||
/**
|
||||
* Class: mxTriangle
|
||||
*
|
||||
* Implementation of the triangle shape.
|
||||
*
|
||||
* Constructor: mxTriangle
|
||||
*
|
||||
* Constructs a new triangle shape.
|
||||
*/
|
||||
function mxTriangle()
|
||||
{
|
||||
mxActor.call(this);
|
||||
};
|
||||
|
||||
/**
|
||||
* Extends mxActor.
|
||||
*/
|
||||
mxUtils.extend(mxTriangle, mxActor);
|
||||
import mxPoint from "FIXME";
|
||||
|
||||
/**
|
||||
* Function: isRoundable
|
||||
*
|
||||
* Adds roundable support.
|
||||
*/
|
||||
isRoundable = ()=>
|
||||
{
|
||||
return true;
|
||||
};
|
||||
class mxTriangle extends mxActor {
|
||||
/**
|
||||
* Class: mxTriangle
|
||||
*
|
||||
* Implementation of the triangle shape.
|
||||
*
|
||||
* Constructor: mxTriangle
|
||||
*
|
||||
* Constructs a new triangle 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, 0), new mxPoint(w, 0.5 * h), new mxPoint(0, h)], this.isRounded, arcSize, true);
|
||||
};
|
||||
/**
|
||||
* Function: isRoundable
|
||||
*
|
||||
* Adds roundable support.
|
||||
*/
|
||||
isRoundable = () => {
|
||||
return 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, 0), new mxPoint(w, 0.5 * h), new mxPoint(0, h)], this.isRounded, arcSize, true);
|
||||
};
|
||||
}
|
||||
|
||||
export default mxTriangle;
|
||||
|
|
|
|||
Loading…
Reference in New Issue