From fd21dbe3d9d25c83d9b458b6e51261c71b62a243 Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Sat, 20 Mar 2021 00:22:34 +1100 Subject: [PATCH] manual js syntax updates --- javascript/src/js/shape/mxActor.js | 155 ++++++++-------- javascript/src/js/shape/mxArrow.js | 209 +++++++++++---------- javascript/src/js/shape/mxCloud.js | 96 +++++----- javascript/src/js/shape/mxConnector.js | 241 ++++++++++++------------- javascript/src/js/shape/mxCylinder.js | 204 ++++++++++----------- javascript/src/js/shape/mxTriangle.js | 71 ++++---- 6 files changed, 474 insertions(+), 502 deletions(-) diff --git a/javascript/src/js/shape/mxActor.js b/javascript/src/js/shape/mxActor.js index 3f4edadb0..b80a37c5d 100644 --- a/javascript/src/js/shape/mxActor.js +++ b/javascript/src/js/shape/mxActor.js @@ -2,85 +2,82 @@ * Copyright (c) 2006-2015, JGraph Ltd * Copyright (c) 2006-2015, Gaudenz Alder */ -/** - * Class: mxActor - * - * Extends to implement an actor shape. If a custom shape with one - * filled area is needed, then this shape's 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 in - * . - * - * Constructor: mxActor - * - * Constructs a new actor shape. - * - * Parameters: - * - * bounds - that defines the bounds. This is stored in - * . - * fill - String that defines the fill color. This is stored in . - * stroke - String that defines the stroke color. This is stored in . - * strokewidth - Optional integer that defines the stroke width. Default is - * 1. This is stored in . - */ -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 to implement an actor shape. If a custom shape with one + * filled area is needed, then this shape's 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 in + * . + * + * Constructor: mxActor + * + * Constructs a new actor shape. + * + * Parameters: + * + * bounds - that defines the bounds. This is stored in + * . + * fill - String that defines the fill color. This is stored in . + * stroke - String that defines the stroke color. This is stored in . + * strokewidth - Optional integer that defines the stroke width. Default is + * 1. This is stored in . + */ + 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; diff --git a/javascript/src/js/shape/mxArrow.js b/javascript/src/js/shape/mxArrow.js index c97172e8b..0d69a5a32 100644 --- a/javascript/src/js/shape/mxArrow.js +++ b/javascript/src/js/shape/mxArrow.js @@ -2,114 +2,111 @@ * Copyright (c) 2006-2015, JGraph Ltd * Copyright (c) 2006-2015, Gaudenz Alder */ -/** - * Class: mxArrow - * - * Extends to implement an arrow shape. (The shape - * is used to represent edges, not vertices.) - * This shape is registered under - * in . - * - * Constructor: mxArrow - * - * Constructs a new arrow shape. - * - * Parameters: - * - * points - Array of that define the points. This is stored in - * . - * fill - String that defines the fill color. This is stored in . - * stroke - String that defines the stroke color. This is stored in . - * strokewidth - Optional integer that defines the stroke width. Default is - * 1. This is stored in . - * arrowWidth - Optional integer that defines the arrow width. Default is - * . This is stored in . - * spacing - Optional integer that defines the spacing between the arrow shape - * and its endpoints. Default is . This is stored in - * . - * endSize - Optional integer that defines the size of the arrowhead. Default - * is . This is stored in . - */ -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 to implement an arrow shape. (The shape + * is used to represent edges, not vertices.) + * This shape is registered under + * in . + * + * Constructor: mxArrow + * + * Constructs a new arrow shape. + * + * Parameters: + * + * points - Array of that define the points. This is stored in + * . + * fill - String that defines the fill color. This is stored in . + * stroke - String that defines the stroke color. This is stored in . + * strokewidth - Optional integer that defines the stroke width. Default is + * 1. This is stored in . + * arrowWidth - Optional integer that defines the arrow width. Default is + * . This is stored in . + * spacing - Optional integer that defines the spacing between the arrow shape + * and its endpoints. Default is . This is stored in + * . + * endSize - Optional integer that defines the size of the arrowhead. Default + * is . This is stored in . + */ + 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; diff --git a/javascript/src/js/shape/mxCloud.js b/javascript/src/js/shape/mxCloud.js index f3e49c649..2000749cf 100644 --- a/javascript/src/js/shape/mxCloud.js +++ b/javascript/src/js/shape/mxCloud.js @@ -2,54 +2,52 @@ * Copyright (c) 2006-2015, JGraph Ltd * Copyright (c) 2006-2015, Gaudenz Alder */ -/** - * Class: mxCloud - * - * Extends to implement a cloud shape. - * - * This shape is registered under in - * . - * - * Constructor: mxCloud - * - * Constructs a new cloud shape. - * - * Parameters: - * - * bounds - that defines the bounds. This is stored in - * . - * fill - String that defines the fill color. This is stored in . - * stroke - String that defines the stroke color. This is stored in . - * strokewidth - Optional integer that defines the stroke width. Default is - * 1. This is stored in . - */ -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 to implement a cloud shape. + * + * This shape is registered under in + * . + * + * Constructor: mxCloud + * + * Constructs a new cloud shape. + * + * Parameters: + * + * bounds - that defines the bounds. This is stored in + * . + * fill - String that defines the fill color. This is stored in . + * stroke - String that defines the stroke color. This is stored in . + * strokewidth - Optional integer that defines the stroke width. Default is + * 1. This is stored in . + */ + 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; diff --git a/javascript/src/js/shape/mxConnector.js b/javascript/src/js/shape/mxConnector.js index de9127342..8b44e0626 100644 --- a/javascript/src/js/shape/mxConnector.js +++ b/javascript/src/js/shape/mxConnector.js @@ -2,148 +2,137 @@ * Copyright (c) 2006-2015, JGraph Ltd * Copyright (c) 2006-2015, Gaudenz Alder */ -/** - * Class: mxConnector - * - * Extends to implement a connector shape. The connector - * shape allows for arrow heads on either side. - * - * This shape is registered under in - * . - * - * Constructor: mxConnector - * - * Constructs a new connector shape. - * - * Parameters: - * - * points - Array of that define the points. This is stored in - * . - * stroke - String that defines the stroke color. This is stored in . - * Default is 'black'. - * strokewidth - Optional integer that defines the stroke width. Default is - * 1. This is stored in . - */ -function mxConnector(points, stroke, strokewidth) -{ - mxPolyline.call(this, points, stroke, strokewidth); -}; -/** - * Extends mxPolyline. - */ -mxUtils.extend(mxConnector, mxPolyline); - -/** - * Function: updateBoundingBox - * - * Updates the for this shape using and - * and stores the result in . - */ -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 to implement a connector shape. The connector + * shape allows for arrow heads on either side. + * + * This shape is registered under in + * . + * + * Constructor: mxConnector + * + * Constructs a new connector shape. + * + * Parameters: + * + * points - Array of that define the points. This is stored in + * . + * stroke - String that defines the stroke color. This is stored in . + * Default is 'black'. + * strokewidth - Optional integer that defines the stroke width. Default is + * 1. This is stored in . + */ + constructor(points, stroke, strokewidth) { + super(points, stroke, strokewidth); } - if (targetMarker != null) - { - targetMarker(); - } -}; + /** + * Function: updateBoundingBox + * + * Updates the for this shape using and + * and stores the result in . + */ + 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; diff --git a/javascript/src/js/shape/mxCylinder.js b/javascript/src/js/shape/mxCylinder.js index 37802cdcc..aaa93d03a 100644 --- a/javascript/src/js/shape/mxCylinder.js +++ b/javascript/src/js/shape/mxCylinder.js @@ -2,117 +2,109 @@ * Copyright (c) 2006-2015, JGraph Ltd * Copyright (c) 2006-2015, Gaudenz Alder */ -/** - * Class: mxCylinder - * - * Extends to implement an cylinder shape. If a - * custom shape with one filled area and an overlay path is - * needed, then this shape's should be overridden. - * This shape is registered under - * in . - * - * Constructor: mxCylinder - * - * Constructs a new cylinder shape. - * - * Parameters: - * - * bounds - that defines the bounds. This is stored in - * . - * fill - String that defines the fill color. This is stored in . - * stroke - String that defines the stroke color. This is stored in . - * strokewidth - Optional integer that defines the stroke width. Default is - * 1. This is stored in . - */ -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 to implement an cylinder shape. If a + * custom shape with one filled area and an overlay path is + * needed, then this shape's should be overridden. + * This shape is registered under + * in . + * + * Constructor: mxCylinder + * + * Constructs a new cylinder shape. + * + * Parameters: + * + * bounds - that defines the bounds. This is stored in + * . + * fill - String that defines the fill color. This is stored in . + * stroke - String that defines the stroke color. This is stored in . + * strokewidth - Optional integer that defines the stroke width. Default is + * 1. This is stored in . + */ + 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; diff --git a/javascript/src/js/shape/mxTriangle.js b/javascript/src/js/shape/mxTriangle.js index 58f5986f5..58de01c9d 100644 --- a/javascript/src/js/shape/mxTriangle.js +++ b/javascript/src/js/shape/mxTriangle.js @@ -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;