@luceosports/play-rendering 1.11.21 → 1.12.1

package/src/traits/LineDrawOperationsTrait.js

@@ -0,0 +1,123 @@
+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) {
+        // TODO refactor next line to avoid access to line/shape model
+        if ((this.line || this.shape).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
+  }
+};