@luceosports/play-rendering 1.18.4 → 1.18.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "1.18.4",
+  "version": "1.18.6",
   "description": "",
   "main": "dist/play-rendering.js",
   "scripts": {
@@ -26,7 +26,7 @@
     "@commitlint/cli": "^13.2.0",
     "@commitlint/config-angular": "^13.2.0",
     "babel-loader": "^8.1.0",
-    "canvas": "^2.6.1",
+    "canvas": "^2.11.2",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-config-node": "^4.0.0",

package/src/layers/line/layers/ShotLineLayer.js

@@ -3,20 +3,19 @@ const ActionLineLayer = require('../base/ActionLineLayer');
 class ShotLineLayer extends ActionLineLayer {
   drawLineCap() {
     if (this.allowDrawLineCap()) {
-      const cp1 = this.line.firstLinePartControlPoint;
-      const cp2 = this.line.lastLinePartControlPoint;
+      const lastPoint = this.line.lastLinePartControlPoint;
 
       // Make arrow tip point a bit longer by adding small vector
       const addVector = { x: 0.6, y: 0 };
-      const alpha = this.angleBetweenTwoPoints(cp1, cp2);
+      const alpha = this.angleBetweenLastTwoPoints();
       const sameAngleAddVector = {
         x: Math.cos(alpha) * addVector.x - Math.sin(alpha) * addVector.y,
         y: Math.sin(alpha) * addVector.x - Math.cos(alpha) * addVector.y
       };
 
       const courtArrowTipPoint = {
-        x: cp2.x + sameAngleAddVector.x,
-        y: cp2.y + sameAngleAddVector.y
+        x: lastPoint.x + sameAngleAddVector.x,
+        y: lastPoint.y + sameAngleAddVector.y
       };
       this.drawArrowLineCap(courtArrowTipPoint);
     }
@@ -24,32 +23,65 @@ class ShotLineLayer extends ActionLineLayer {
 
   setLineOptions() {
     this.ctx.lineWidth = this.lineWidth * 0.7;
+  }
+
+  drawLineFromControlPoints() {
+    this.ctx.save();
+
+    this.setLineOptions();
 
-    const lineParts = [...this.line.getLineParts()];
+    this.ctx.lineJoin = 'round';
 
-    this.line.setLinePartsAdjusted([]);
+    this.getProcessedLinePaths().forEach(linePart => {
+      this.ctx.save();
 
-    lineParts.forEach(lp => {
-      const cp = lp.controlPoints;
+      if (linePart.alpha) {
+        this.setColor(linePart.alpha); // setting color for each line path (animation)
+      }
+
+      this.ctx.beginPath();
+
+      const cp = linePart.controlPoints;
 
       const offsets = [-0.3, 0.3];
       offsets.forEach(offset => {
-        const [dx, dy] = [cp[0].x - cp[1].x, cp[0].y - cp[1].y];
+        const [dx, dy] = [cp[0].x - cp[cp.length - 1].x, cp[0].y - cp[cp.length - 1].y];
         const scale = offset / (dx * dx + dy * dy) ** 0.5;
         const [ox, oy] = [-dy * scale, dx * scale];
 
-        this.ctx.moveTo(ox + cp[0].x, oy + cp[0].y);
-        this.ctx.lineTo(ox + cp[1].x, oy + cp[1].y);
-
-        this.line.addLinePartAdjusted({
-          ...lp,
-          controlPoints: [
-            { x: cp[0].x + ox, y: cp[0].y + oy },
-            { x: cp[1].x + ox, y: cp[1].y + oy }
-          ]
+        const cpProcessed = cp.map(point => {
+          return {
+            x: point.x + ox,
+            y: point.y + oy
+          };
         });
+
+        this.ctx.moveTo(cpProcessed[0].x, cpProcessed[0].y);
+
+        if (cp.length === 2) {
+          this.ctx.lineTo(cpProcessed[1].x, cpProcessed[1].y);
+        }
+        if (cp.length === 3) {
+          this.ctx.quadraticCurveTo(cpProcessed[1].x, cpProcessed[1].y, cpProcessed[2].x, cpProcessed[2].y);
+        }
+        if (cp.length === 4) {
+          this.ctx.bezierCurveTo(
+            cpProcessed[1].x,
+            cpProcessed[1].y,
+            cpProcessed[2].x,
+            cpProcessed[2].y,
+            cpProcessed[3].x,
+            cpProcessed[3].y
+          );
+        }
+
+        this.ctx.stroke();
       });
+
+      this.ctx.restore();
     });
+
+    this.ctx.restore();
   }
 }