@luceosports/play-rendering 1.11.21 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "1.11.21",
+  "version": "1.12.0",
   "description": "",
   "main": "dist/play-rendering.js",
   "scripts": {

package/src/layers/ShapeControlPointLayer.js

@@ -6,11 +6,11 @@ class ShapeControlPointLayer extends BaseLayer {
 
     this.ctx.fillStyle = 'blue';
 
-    this.playData.shapes.forEach(({ id, color, rectWrapPointsTranslated }) => {
+    this.playData.shapes.forEach(({ id, color, controlPointsTranslated }) => {
       if (this.options.shapeSelectedId !== id) return;
       if (color.alpha === 0) return;
 
-      rectWrapPointsTranslated.forEach(point => {
+      controlPointsTranslated.forEach(point => {
         this.ctx.beginPath();
         this.ctx.arc(point.x, point.y, 0.4, 0, Math.PI * 2, true);
         this.ctx.fill();

package/src/layers/ShapeLayer.js

@@ -7,7 +7,10 @@ class ShapeLayer extends BaseLayer {
     this.ctx.save();
 
     this.playData.shapes.forEach(shape => {
-      const layerKey = `${_.capitalize(shape.type)}ShapeLayer`;
+      const shapeType = shape.type.match('LINE.')
+        ? `${_.capitalize(shape.type.replace('LINE.', ''))}Line`
+        : _.capitalize(shape.type);
+      const layerKey = `${shapeType}ShapeLayer`;
       if (shapeLayers[layerKey]) {
         new shapeLayers[layerKey](this, shape).apply();
       }

package/src/layers/line/base/InternalLineLayer.js

@@ -1,5 +1,6 @@
 const InternalBaseLayer = require('../../base/InternalBaseLayer');
 const LineDrawingMath = require('../../../math/LineDrawingMath');
+const LineDrawOperationsTrait = require('../../../traits/LineDrawOperationsTrait');
 
 class InternalLineLayer extends InternalBaseLayer {
   constructor(parentLayer, line) {
@@ -20,6 +21,31 @@ class InternalLineLayer extends InternalBaseLayer {
     this.drawLineCap();
   }
 
+  setColor(alphaOverride = null) {
+    let lineForPlayerInPosition = false;
+    if (this.options.position) {
+      const { playerPositionOrigin, playerPositionTerminus } = this.line.originalData;
+      if (playerPositionOrigin === this.options.position || playerPositionTerminus === this.options.position) {
+        lineForPlayerInPosition = true;
+      }
+    }
+
+    const { alpha, blue, green, red } = this.line.color;
+
+    const r = lineForPlayerInPosition ? 0 : Math.ceil(red * 255);
+    const g = lineForPlayerInPosition ? 0 : Math.ceil(green * 255);
+    const b = lineForPlayerInPosition ? 255 : Math.ceil(blue * 255);
+
+    const color = `rgba(${r}, ${g}, ${b}, ${alphaOverride || alpha})`;
+
+    this.ctx.fillStyle = color;
+    this.ctx.strokeStyle = color;
+  }
+
+  getProcessedLinePaths() {
+    return this.line.getLineParts();
+  }
+
   applyMasking() {
     this.line.getLineParts().forEach((lp, index) => {
       let lineControlPoints = lp.controlPoints;
@@ -54,144 +80,6 @@ class InternalLineLayer extends InternalBaseLayer {
     });
   }
 
-  setColor(alphaOverride = null) {
-    let lineForPlayerInPosition = false;
-    if (this.options.position) {
-      const { playerPositionOrigin, playerPositionTerminus } = this.line.originalData;
-      if (playerPositionOrigin === this.options.position || playerPositionTerminus === this.options.position) {
-        lineForPlayerInPosition = true;
-      }
-    }
-
-    const { alpha, blue, green, red } = this.line.color;
-
-    const r = lineForPlayerInPosition ? 0 : Math.ceil(red * 255);
-    const g = lineForPlayerInPosition ? 0 : Math.ceil(green * 255);
-    const b = lineForPlayerInPosition ? 255 : Math.ceil(blue * 255);
-
-    const color = `rgba(${r}, ${g}, ${b}, ${alphaOverride || alpha})`;
-
-    this.ctx.fillStyle = color;
-    this.ctx.strokeStyle = color;
-  }
-
-  drawLineFromControlPoints() {
-    this.ctx.save();
-
-    this.setLineOptions();
-
-    this.ctx.lineJoin = 'round';
-
-    this.getProcessedLinePaths().forEach(linePart => {
-      this.ctx.save();
-
-      if (linePart.alpha) {
-        this.setColor(linePart.alpha); // setting color for each line path (animation)
-      }
-
-      this.ctx.beginPath();
-
-      const cp = linePart.controlPoints;
-      this.ctx.moveTo(cp[0].x, cp[0].y);
-
-      if (cp.length === 2) {
-        if (this.line.type === 'DRIBBLE') this.ctx.lineCap = 'round'; // fix last straight line cap segment
-        this.ctx.lineTo(cp[1].x, cp[1].y);
-      }
-      if (cp.length === 3) {
-        this.ctx.quadraticCurveTo(cp[1].x, cp[1].y, cp[2].x, cp[2].y);
-      }
-      if (cp.length === 4) {
-        this.ctx.bezierCurveTo(cp[1].x, cp[1].y, cp[2].x, cp[2].y, cp[3].x, cp[3].y);
-      }
-
-      this.ctx.stroke();
-
-      this.ctx.restore();
-    });
-
-    this.ctx.restore();
-  }
-
-  drawArrowLineCap() {
-    this.ctx.save();
-
-    const arrowTipLength = 1.4;
-    const angle = this.angleBetweenLastTwoPoints();
-    const courtArrowTipPoint = this.arrowTipPoint();
-
-    const courtLineEndPoint = { x: courtArrowTipPoint.x - arrowTipLength / 1.3, y: courtArrowTipPoint.y };
-    const courtArrowEdgePoint1 = {
-      x: courtArrowTipPoint.x - arrowTipLength - arrowTipLength / 6.0,
-      y: courtArrowTipPoint.y - arrowTipLength / 2.0
-    };
-    const courtArrowEdgePoint2 = {
-      x: courtArrowTipPoint.x - arrowTipLength - arrowTipLength / 6.0,
-      y: courtArrowTipPoint.y + arrowTipLength / 2.0
-    };
-
-    this.ctx.beginPath();
-
-    this.ctx.translate(courtArrowTipPoint.x, courtArrowTipPoint.y);
-    this.ctx.rotate(angle);
-    this.ctx.translate(-courtArrowTipPoint.x, -courtArrowTipPoint.y);
-
-    this.ctx.moveTo(courtLineEndPoint.x, courtLineEndPoint.y);
-    this.ctx.lineTo(courtArrowEdgePoint1.x, courtArrowEdgePoint1.y);
-    this.ctx.lineTo(courtArrowTipPoint.x, courtArrowTipPoint.y);
-    this.ctx.lineTo(courtArrowEdgePoint2.x, courtArrowEdgePoint2.y);
-    this.ctx.lineTo(courtLineEndPoint.x, courtLineEndPoint.y);
-
-    this.ctx.fill();
-    this.ctx.stroke();
-
-    this.ctx.restore();
-  }
-
-  drawPerpendicularLineCap() {
-    this.drawPerpendicularLineAtCourtPoint(this.arrowTipPoint(), this.angleBetweenLastTwoPoints());
-  }
-
-  drawPerpendicularLineAtCourtPoint(courtPoint, angle) {
-    this.ctx.save();
-
-    const lineCapLength = 3.0;
-    const lineCapStartPoint = { x: courtPoint.x, y: courtPoint.y - lineCapLength / 2.0 };
-    const lineCapEndPoint = { x: courtPoint.x, y: courtPoint.y + lineCapLength / 2.0 };
-
-    this.ctx.beginPath();
-
-    this.ctx.translate(courtPoint.x, courtPoint.y);
-    this.ctx.rotate(angle);
-    this.ctx.translate(-courtPoint.x, -courtPoint.y);
-
-    this.ctx.moveTo(lineCapStartPoint.x, lineCapStartPoint.y);
-    this.ctx.lineTo(lineCapEndPoint.x, lineCapEndPoint.y);
-
-    this.ctx.fill();
-    this.ctx.stroke();
-
-    this.ctx.restore();
-  }
-
-  angleBetweenLastTwoPoints() {
-    const lastLinePart = [...this.getProcessedLinePaths()].pop();
-    const cp = lastLinePart.controlPoints;
-
-    const cpTo = cp[cp.length - 1];
-    const cpFrom = cp[cp.length - 2];
-
-    const dx = cpTo.x - cpFrom.x;
-    const dy = cpTo.y - cpFrom.y;
-    return Math.atan2(dy, dx);
-  }
-
-  arrowTipPoint() {
-    const lastLinePart = [...this.line.getLineParts()].pop();
-    const cp = lastLinePart.controlPoints;
-    return cp[cp.length - 1];
-  }
-
   setLineMasking() {
     // Right now we take care only about only one line part
     // Adjust line masking
@@ -246,10 +134,6 @@ class InternalLineLayer extends InternalBaseLayer {
     this.showMaskingDebug();
   }
 
-  getProcessedLinePaths() {
-    return this.line.getLineParts();
-  }
-
   showMaskingDebug() {
     if (this.debugMasking === false) return;
     this.ctx.save();
@@ -273,13 +157,11 @@ class InternalLineLayer extends InternalBaseLayer {
     this.ctx.restore();
   }
 
-  setLineOptions() {
-    // Override this method in a subclass
-  }
-
   drawLineCap() {
     // Override this method in a subclass
   }
 }
 
+Object.assign(InternalLineLayer.prototype, LineDrawOperationsTrait);
+
 module.exports = InternalLineLayer;

package/src/layers/shape/base/InternalShapeLayer.js

@@ -14,17 +14,21 @@ class InternalShapeLayer extends InternalBaseLayer {
 
   drawLogic() {
     const { location, scale, angleRad } = this.shape;
-    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
 
     this.ctx.translate(location.x, location.y);
     this.ctx.rotate(angleRad);
     this.ctx.scale(scale.x, scale.y);
 
+    this.setLineWidth();
     this.setColor();
     this.drawShape();
     this.drawShapeWrapPoints();
   }
 
+  setLineWidth() {
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
+  }
+
   setColor() {
     const { alpha, blue, green, red } = this.shape.color;
 

package/src/layers/shape/index.js

@@ -1,5 +1,6 @@
 // require all modules on the path and with the pattern defined
-const req = require.context('./layers/', true, /.js$/);
+const req = require.context('./layers/', false, /.js$/);
+const lineReq = require.context('./layers/line/', false, /.js$/);
 
 const modules = {};
 
@@ -8,4 +9,9 @@ req.keys().forEach(key => {
   modules[mname] = req(key);
 });
 
+lineReq.keys().forEach(key => {
+  const mname = key.replace('./', '').replace('.js', '');
+  modules[mname] = lineReq(key);
+});
+
 module.exports = modules;

package/src/layers/shape/layers/line/CutLineShapeLayer.js

@@ -0,0 +1,13 @@
+const InternalLineShapeLayer = require('./base/InternalLineShapeLayer');
+
+class CutLineShapeLayer extends InternalLineShapeLayer {
+  drawLine() {
+    this.drawLineFromControlPoints();
+  }
+
+  drawLineCap() {
+    this.drawArrowLineCap();
+  }
+}
+
+module.exports = CutLineShapeLayer;

package/src/layers/shape/layers/line/DribbleLineShapeLayer.js

@@ -0,0 +1,13 @@
+const InternalLineShapeLayer = require('./base/InternalLineShapeLayer');
+
+class CutLineShapeLayer extends InternalLineShapeLayer {
+  drawLine() {
+    this.drawLineFromControlPoints();
+  }
+
+  drawLineCap() {
+    this.drawArrowLineCap();
+  }
+}
+
+module.exports = CutLineShapeLayer;

package/src/layers/shape/layers/line/ScreenLineShapeLayer.js

@@ -0,0 +1,13 @@
+const InternalLineShapeLayer = require('./base/InternalLineShapeLayer');
+
+class ScreenLineShapeLayer extends InternalLineShapeLayer {
+  drawLine() {
+    this.drawLineFromControlPoints();
+  }
+
+  drawLineCap() {
+    this.drawPerpendicularLineCap();
+  }
+}
+
+module.exports = ScreenLineShapeLayer;

package/src/layers/shape/layers/line/base/InternalLineShapeLayer.js

@@ -0,0 +1,34 @@
+const InternalShapeLayer = require('../../../base/InternalShapeLayer');
+const LineDrawOperationsTrait = require('../../../../../traits/LineDrawOperationsTrait');
+
+class InternalLineShapeLayer extends InternalShapeLayer {
+  constructor(parentLayer, shape) {
+    super(parentLayer);
+    this.shape = shape;
+  }
+
+  setLineWidth() {
+    this.ctx.lineWidth = this.courtTypeConstants.LINE_WIDTH;
+  }
+
+  getProcessedLinePaths() {
+    return [this.shape.linePart];
+  }
+
+  drawShapeLogic() {
+    this.drawLine();
+    this.drawLineCap();
+  }
+
+  drawLine() {
+    // Override this method in a subclass
+  }
+
+  drawLineCap() {
+    // Override this method in a subclass
+  }
+}
+
+Object.assign(InternalLineShapeLayer.prototype, LineDrawOperationsTrait);
+
+module.exports = InternalLineShapeLayer;

package/src/math/LineDrawingMath.js

@@ -458,3 +458,99 @@ function controlPointsMatFromPoints(controlPoints) {
   });
   return math.matrix(controlPointsVec);
 }
+
+module.exports.bezierBoundingBox = function(controlPoints) {
+  if (controlPoints.length !== 4) {
+    throw new Error('bezierBoundingBox function supports only cubic bezier curves for now');
+  }
+  const bMinMax = cubicBezierMinMax(controlPoints);
+  return [
+    {
+      x: bMinMax.min.x,
+      y: bMinMax.min.y
+    },
+    {
+      x: bMinMax.max.x,
+      y: bMinMax.min.y
+    },
+    {
+      x: bMinMax.max.x,
+      y: bMinMax.max.y
+    },
+    {
+      x: bMinMax.min.x,
+      y: bMinMax.max.y
+    }
+  ];
+};
+
+function cubicBezierMinMax([p0, p1, p2, p3]) {
+  const tValues = [];
+  const xValues = [];
+  const yValues = [];
+  let a;
+  let b;
+  let c;
+  let t;
+  let t1;
+  let t2;
+  let b2ac;
+  let sqrtb2ac;
+  for (let i = 0; i < 2; ++i) {
+    if (i === 0) {
+      b = 6 * p0.x - 12 * p1.x + 6 * p2.x;
+      a = -3 * p0.x + 9 * p1.x - 9 * p2.x + 3 * p3.x;
+      c = 3 * p1.x - 3 * p0.x;
+    } else {
+      b = 6 * p0.y - 12 * p1.y + 6 * p2.y;
+      a = -3 * p0.y + 9 * p1.y - 9 * p2.y + 3 * p3.y;
+      c = 3 * p1.y - 3 * p0.y;
+    }
+    if (Math.abs(a) < 1e-12) {
+      if (Math.abs(b) < 1e-12) {
+        continue;
+      }
+      t = -c / b;
+      if (t > 0 && t < 1) {
+        tValues.push(t);
+      }
+      continue;
+    }
+    b2ac = b * b - 4 * c * a;
+    if (b2ac < 0) {
+      if (Math.abs(b2ac) < 1e-12) {
+        t = -b / (2 * a);
+        if (t > 0 && t < 1) {
+          tValues.push(t);
+        }
+      }
+      continue;
+    }
+    sqrtb2ac = Math.sqrt(b2ac);
+    t1 = (-b + sqrtb2ac) / (2 * a);
+    if (t1 > 0 && t1 < 1) {
+      tValues.push(t1);
+    }
+    t2 = (-b - sqrtb2ac) / (2 * a);
+    if (t2 > 0 && t2 < 1) {
+      tValues.push(t2);
+    }
+  }
+
+  let j = tValues.length;
+  let mt;
+  while (j--) {
+    t = tValues[j];
+    mt = 1 - t;
+    xValues[j] = mt * mt * mt * p0.x + 3 * mt * mt * t * p1.x + 3 * mt * t * t * p2.x + t * t * t * p3.x;
+    yValues[j] = mt * mt * mt * p0.y + 3 * mt * mt * t * p1.y + 3 * mt * t * t * p2.y + t * t * t * p3.y;
+  }
+
+  xValues.push(p0.x, p3.x);
+  yValues.push(p0.y, p3.y);
+
+  return {
+    min: { x: Math.min.apply(0, xValues), y: Math.min.apply(0, yValues) },
+    max: { x: Math.max.apply(0, xValues), y: Math.max.apply(0, yValues) }
+  };
+}

package/src/models/Shape.js

@@ -44,6 +44,10 @@ class Shape extends Model {
     return 10;
   }
 
+  get linePart() {
+    return this._getAttr('linePart');
+  }
+
   get rectWrapPointsPure() {
     const topLeft = { x: -this.outerCircleRadius / 2, y: -this.outerCircleRadius / 2 };
     const topRight = { x: this.outerCircleRadius / 2, y: -this.outerCircleRadius / 2 };
@@ -60,6 +64,10 @@ class Shape extends Model {
     });
   }
 
+  get controlPointsTranslated() {
+    return this.rectWrapPointsTranslated;
+  }
+
   get rectWrapAreaTranslated() {
     const [topLeft, topRight, botRight] = this.rectWrapPointsTranslated;
     const aDistance = distanceBetweenPoints(topLeft, topRight);
@@ -148,6 +156,11 @@ class Shape extends Model {
 
     return result.map(p => rotatePoint(p.x, p.y, this.location.x, this.location.y, this.angle));
   }
+
+  revertPointTranslation(point) {
+    const translated = { x: point.x - this.location.x, y: point.y - this.location.y };
+    return rotatePoint(translated.x, translated.y, 0, 0, -this.angle);
+  }
 }
 
 module.exports = Shape;

package/src/models/ShapeModels/LineShape.js

@@ -0,0 +1,20 @@
+const Shape = require('../Shape');
+const { rotatePoint } = require('../../helpers/common');
+const { bezierBoundingBox } = require('../../math/LineDrawingMath');
+
+class LineShape extends Shape {
+  get rectWrapPointsPure() {
+    const { controlPoints } = this.linePart;
+    return bezierBoundingBox(controlPoints);
+  }
+
+  get controlPointsTranslated() {
+    return this.linePart.controlPoints.map(point => {
+      const scaled = { x: point.x * this.scale.x, y: point.y * this.scale.y };
+      const rotated = rotatePoint(scaled.x, scaled.y, 0, 0, this.angle);
+      return { x: rotated.x + this.location.x, y: rotated.y + this.location.y };
+    });
+  }
+}
+
+module.exports = LineShape;

package/src/models/ShapeModels/index.js

@@ -1,5 +1,6 @@
 // require all modules on the path and with the pattern defined
 const req = require.context('./', true, /.js$/);
+const lineReq = require.context('./line', true, /.js$/);
 
 const modules = {};
 
@@ -9,4 +10,9 @@ req.keys().forEach(key => {
   modules[mname.toUpperCase()] = req(key);
 });
 
+lineReq.keys().forEach(key => {
+  const mname = key.replace('./', '').replace('LineShape.js', '');
+  modules[`LINE.${mname.toUpperCase()}`] = lineReq(key);
+});
+
 module.exports = modules;

package/src/models/ShapeModels/line/CutLineShape.js

@@ -0,0 +1,5 @@
+const LineShape = require('../LineShape');
+
+class CutLineShape extends LineShape {}
+
+module.exports = CutLineShape;

package/src/models/ShapeModels/line/DribbleLineShape.js

@@ -0,0 +1,5 @@
+const LineShape = require('../LineShape');
+
+class DribbleLineShape extends LineShape {}
+
+module.exports = DribbleLineShape;

package/src/models/ShapeModels/line/ScreenLineShape.js

@@ -0,0 +1,5 @@
+const LineShape = require('../LineShape');
+
+class ScreenLineShape extends LineShape {}
+
+module.exports = ScreenLineShape;

package/src/traits/LineDrawOperationsTrait.js

@@ -0,0 +1,122 @@
+module.exports = {
+  drawLineFromControlPoints() {
+    this.ctx.save();
+
+    this.setLineOptions();
+
+    this.ctx.lineJoin = 'round';
+
+    this.getProcessedLinePaths().forEach(linePart => {
+      this.ctx.save();
+
+      if (linePart.alpha) {
+        this.setColor(linePart.alpha); // setting color for each line path (animation)
+      }
+
+      this.ctx.beginPath();
+
+      const cp = linePart.controlPoints;
+      this.ctx.moveTo(cp[0].x, cp[0].y);
+
+      if (cp.length === 2) {
+        if (this.line.type === 'DRIBBLE') this.ctx.lineCap = 'round'; // fix last straight line cap segment
+        this.ctx.lineTo(cp[1].x, cp[1].y);
+      }
+      if (cp.length === 3) {
+        this.ctx.quadraticCurveTo(cp[1].x, cp[1].y, cp[2].x, cp[2].y);
+      }
+      if (cp.length === 4) {
+        this.ctx.bezierCurveTo(cp[1].x, cp[1].y, cp[2].x, cp[2].y, cp[3].x, cp[3].y);
+      }
+
+      this.ctx.stroke();
+
+      this.ctx.restore();
+    });
+
+    this.ctx.restore();
+  },
+
+  drawArrowLineCap() {
+    this.ctx.save();
+
+    const arrowTipLength = 1.4;
+    const angle = this.angleBetweenLastTwoPoints();
+    const courtArrowTipPoint = this.arrowTipPoint();
+
+    const courtLineEndPoint = { x: courtArrowTipPoint.x - arrowTipLength / 1.3, y: courtArrowTipPoint.y };
+    const courtArrowEdgePoint1 = {
+      x: courtArrowTipPoint.x - arrowTipLength - arrowTipLength / 6.0,
+      y: courtArrowTipPoint.y - arrowTipLength / 2.0
+    };
+    const courtArrowEdgePoint2 = {
+      x: courtArrowTipPoint.x - arrowTipLength - arrowTipLength / 6.0,
+      y: courtArrowTipPoint.y + arrowTipLength / 2.0
+    };
+
+    this.ctx.beginPath();
+
+    this.ctx.translate(courtArrowTipPoint.x, courtArrowTipPoint.y);
+    this.ctx.rotate(angle);
+    this.ctx.translate(-courtArrowTipPoint.x, -courtArrowTipPoint.y);
+
+    this.ctx.moveTo(courtLineEndPoint.x, courtLineEndPoint.y);
+    this.ctx.lineTo(courtArrowEdgePoint1.x, courtArrowEdgePoint1.y);
+    this.ctx.lineTo(courtArrowTipPoint.x, courtArrowTipPoint.y);
+    this.ctx.lineTo(courtArrowEdgePoint2.x, courtArrowEdgePoint2.y);
+    this.ctx.lineTo(courtLineEndPoint.x, courtLineEndPoint.y);
+
+    this.ctx.fill();
+    this.ctx.stroke();
+
+    this.ctx.restore();
+  },
+
+  drawPerpendicularLineCap() {
+    this.drawPerpendicularLineAtCourtPoint(this.arrowTipPoint(), this.angleBetweenLastTwoPoints());
+  },
+
+  drawPerpendicularLineAtCourtPoint(courtPoint, angle) {
+    this.ctx.save();
+
+    const lineCapLength = 3.0;
+    const lineCapStartPoint = { x: courtPoint.x, y: courtPoint.y - lineCapLength / 2.0 };
+    const lineCapEndPoint = { x: courtPoint.x, y: courtPoint.y + lineCapLength / 2.0 };
+
+    this.ctx.beginPath();
+
+    this.ctx.translate(courtPoint.x, courtPoint.y);
+    this.ctx.rotate(angle);
+    this.ctx.translate(-courtPoint.x, -courtPoint.y);
+
+    this.ctx.moveTo(lineCapStartPoint.x, lineCapStartPoint.y);
+    this.ctx.lineTo(lineCapEndPoint.x, lineCapEndPoint.y);
+
+    this.ctx.fill();
+    this.ctx.stroke();
+
+    this.ctx.restore();
+  },
+
+  angleBetweenLastTwoPoints() {
+    const lastLinePart = [...this.getProcessedLinePaths()].pop();
+    const cp = lastLinePart.controlPoints;
+
+    const cpTo = cp[cp.length - 1];
+    const cpFrom = cp[cp.length - 2];
+
+    const dx = cpTo.x - cpFrom.x;
+    const dy = cpTo.y - cpFrom.y;
+    return Math.atan2(dy, dx);
+  },
+
+  arrowTipPoint() {
+    const lastLinePart = [...this.getProcessedLinePaths()].pop();
+    const cp = lastLinePart.controlPoints;
+    return cp[cp.length - 1];
+  },
+
+  setLineOptions() {
+    // Override this method in a subclass
+  }
+};