@luceosports/play-rendering 1.12.0 → 1.12.2

package/package.json

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

package/src/layers/line/layers/DribbleLineLayer.js

@@ -1,7 +1,7 @@
 const _ = require('lodash');
 const common = require('../../../helpers/common');
 const ActionLineLayer = require('../base/ActionLineLayer');
-const Bezier = require('../../../math/Bezier');
+const DribbleLineTrait = require('../../../traits/DribbleLineTrait');
 
 class DribbleLineLayer extends ActionLineLayer {
   drawLineCap() {
@@ -10,64 +10,25 @@ class DribbleLineLayer extends ActionLineLayer {
 
   setLineOptions() {
     const lineParts = [...this.line.getLineParts()];
+    const dribbleLineParts = this.convertLinePartsToDribble(lineParts);
     this.line.setLinePartsAdjusted([]);
-    lineParts.forEach((lp, lpIndex) => {
-      const controlPoints = Array(4);
-      lp.controlPoints.forEach((cp, index) => {
-        controlPoints[index] = cp;
-      });
-      const bez = new Bezier.Bezier(controlPoints[0], controlPoints[1], controlPoints[2], controlPoints[3]);
-
-      const bezVector = [];
-      let index = 0;
-      const step = 1 / bez.length;
-      while (index <= 1) {
-        bezVector.push({ x: bez.mx(index), y: bez.my(index), time: index }); // setting time for animation alpha processing
-        index += step;
-      }
-
-      const bezPathsArr = [];
-      let tempPath = [];
-      for (let i = 0; i < bezVector.length; i++) {
-        tempPath.push(bezVector[i]);
-        if (tempPath.length > 1) {
-          bezPathsArr.push(tempPath);
-          tempPath = [bezVector[i]];
-        }
-      }
-
-      const amplitudeCf = 1.2;
-      bezPathsArr.forEach(([firstPoint, lastPoint], ind) => {
-        const vector = { x: (lastPoint.x - firstPoint.x) * amplitudeCf, y: (lastPoint.y - firstPoint.y) * amplitudeCf };
-
-        const vectorMidPoint = { x: (firstPoint.x + lastPoint.x) / 2, y: (firstPoint.y + lastPoint.y) / 2 };
-
-        let perpVector = { x: -vector.y, y: vector.x };
-        if (ind % 2) {
-          perpVector = { x: vector.y, y: -vector.x };
-        }
-        const midPoint = { x: vectorMidPoint.x + perpVector.x, y: vectorMidPoint.y + perpVector.y };
-
-        let cp = [firstPoint, midPoint, lastPoint];
-        if (lineParts.length === 1 || lpIndex === lineParts.length - 1) {
-          if (ind === bezPathsArr.length - 1) {
-            cp = [firstPoint, lastPoint];
+    dribbleLineParts.forEach(lp => {
+      const { controlPoints, lpIndex } = lp;
+      const [firstPoint] = controlPoints;
+      let alpha = lineParts[lpIndex].alpha || this.line.color.alpha;
+      if (this.options.animationGlobalProgress) {
+        const [start, end] = this.line.animationKeyTimeChunks[lpIndex];
+        if (_.inRange(this.options.animationGlobalProgress, start, end)) {
+          if (common.animationProgress(this.options.animationGlobalProgress, start, end) > firstPoint.time) {
+            alpha = 0.1;
           }
         }
-
-        let alpha = lp.alpha || this.line.color.alpha;
-        if (this.options.animationGlobalProgress) {
-          const [start, end] = this.line.animationKeyTimeChunks[lpIndex];
-          if (_.inRange(this.options.animationGlobalProgress, start, end)) {
-            if (common.animationProgress(this.options.animationGlobalProgress, start, end) > firstPoint.time) {
-              alpha = 0.1;
-            }
-          }
-        }
-        this.line.addLinePartAdjusted({ ...lp, controlPoints: cp, alpha });
-      });
+      }
+      this.line.addLinePartAdjusted({ ...lp, controlPoints, alpha });
     });
   }
 }
 
+Object.assign(DribbleLineLayer.prototype, DribbleLineTrait);
+
 module.exports = DribbleLineLayer;

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

@@ -1,6 +1,7 @@
 const InternalLineShapeLayer = require('./base/InternalLineShapeLayer');
+const DribbleLineTrait = require('../../../../traits/DribbleLineTrait');
 
-class CutLineShapeLayer extends InternalLineShapeLayer {
+class DribbleLineShapeLayer extends InternalLineShapeLayer {
   drawLine() {
     this.drawLineFromControlPoints();
   }
@@ -8,6 +9,12 @@ class CutLineShapeLayer extends InternalLineShapeLayer {
   drawLineCap() {
     this.drawArrowLineCap();
   }
+
+  getProcessedLinePaths() {
+    return this.convertLinePartsToDribble([this.shape.linePart]);
+  }
 }
 
-module.exports = CutLineShapeLayer;
+Object.assign(DribbleLineShapeLayer.prototype, DribbleLineTrait);
+
+module.exports = DribbleLineShapeLayer;

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

@@ -0,0 +1,17 @@
+const InternalLineShapeLayer = require('./base/InternalLineShapeLayer');
+
+class PassLineShapeLayer extends InternalLineShapeLayer {
+  drawLine() {
+    this.drawLineFromControlPoints();
+  }
+
+  drawLineCap() {
+    this.drawArrowLineCap();
+  }
+
+  setLineOptions() {
+    this.ctx.setLineDash([1, 0.5]);
+  }
+}
+
+module.exports = PassLineShapeLayer;

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

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

package/src/traits/DribbleLineTrait.js

@@ -0,0 +1,57 @@
+const Bezier = require('../math/Bezier');
+
+module.exports = {
+  convertLinePartsToDribble(lineParts) {
+    const processedLineParts = [];
+
+    lineParts.forEach((lp, lpIndex) => {
+      const bezierPoints = Array(4);
+      lp.controlPoints.forEach((cp, index) => {
+        bezierPoints[index] = cp;
+      });
+      const bez = new Bezier.Bezier(bezierPoints[0], bezierPoints[1], bezierPoints[2], bezierPoints[3]);
+
+      const bezVector = [];
+      let index = 0;
+      const step = 1 / bez.length;
+      while (index <= 1) {
+        bezVector.push({ x: bez.mx(index), y: bez.my(index), time: index }); // setting time for animation alpha processing
+        index += step;
+      }
+
+      const bezPathsArr = [];
+      let tempPath = [];
+      for (let i = 0; i < bezVector.length; i++) {
+        tempPath.push(bezVector[i]);
+        if (tempPath.length > 1) {
+          bezPathsArr.push(tempPath);
+          tempPath = [bezVector[i]];
+        }
+      }
+
+      const amplitudeCf = 1.2;
+      bezPathsArr.forEach(([firstPoint, lastPoint], ind) => {
+        const vector = { x: (lastPoint.x - firstPoint.x) * amplitudeCf, y: (lastPoint.y - firstPoint.y) * amplitudeCf };
+
+        const vectorMidPoint = { x: (firstPoint.x + lastPoint.x) / 2, y: (firstPoint.y + lastPoint.y) / 2 };
+
+        let perpVector = { x: -vector.y, y: vector.x };
+        if (ind % 2) {
+          perpVector = { x: vector.y, y: -vector.x };
+        }
+        const midPoint = { x: vectorMidPoint.x + perpVector.x, y: vectorMidPoint.y + perpVector.y };
+
+        let controlPoints = [firstPoint, midPoint, lastPoint];
+        if (lineParts.length === 1 || lpIndex === lineParts.length - 1) {
+          if (ind === bezPathsArr.length - 1) {
+            controlPoints = [firstPoint, lastPoint];
+          }
+        }
+
+        processedLineParts.push({ controlPoints, lpIndex });
+      });
+    });
+
+    return processedLineParts;
+  }
+};

package/src/traits/LineDrawOperationsTrait.js

@@ -19,7 +19,8 @@ module.exports = {
       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
+        // 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) {