@luceosports/play-rendering 1.10.7 → 1.10.10

package/package.json

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

package/src/layers/ShapeControlPointLayer.js

@@ -0,0 +1,26 @@
+const BaseLayer = require('./base/BaseLayer');
+
+class ShapeControlPointLayer extends BaseLayer {
+  apply() {
+    this.ctx.save();
+
+    this.ctx.fillStyle = 'blue';
+
+    this.playData.shapes.forEach(({ id, color, location, rectWrapPoints }) => {
+      if (this.options.shapeSelectedId !== id) return;
+      if (color.alpha === 0) return;
+
+      this.ctx.translate(location.x, location.y);
+
+      rectWrapPoints.forEach(point => {
+        this.ctx.beginPath();
+        this.ctx.arc(point.x, point.y, 0.4, 0, Math.PI * 2, true);
+        this.ctx.fill();
+      });
+    });
+
+    this.ctx.restore();
+  }
+}
+
+module.exports = ShapeControlPointLayer;

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

@@ -28,23 +28,33 @@ class InternalShapeLayer extends InternalBaseLayer {
     const b = Math.ceil(blue * 255);
 
     this.ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    this.ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    this.ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 1)`;
   }
 
   drawShapeWrapPoints() {
     if (!DEBUG_WRAP_POINTS) return;
 
-    const { rectWrapPoints } = this.shape;
+    const { rectWrapPoints, location } = this.shape;
+
+    this.ctx.fillStyle = 'red';
+
+    this.ctx.translate(location.x, location.y);
 
     rectWrapPoints.forEach(point => {
       this.ctx.beginPath();
-      this.ctx.arc(point.x, point.y, 0.5, 0, Math.PI * 2);
-      this.ctx.stroke();
+      this.ctx.arc(point.x, point.y, 0.4, 0, Math.PI * 2);
       this.ctx.fill();
     });
   }
 
   drawShape() {
+    this.ctx.save();
+    this.drawShapeLogic();
+    if (this.shape.showBorder) this.ctx.stroke();
+    this.ctx.restore();
+  }
+
+  drawShapeLogic() {
     // Override this function in a subclass
   }
 }

package/src/layers/shape/layers/CircleShapeLayer.js

@@ -1,14 +1,13 @@
 const InternalShapeLayer = require('../base/InternalShapeLayer');
 
 class CircleShapeLayer extends InternalShapeLayer {
-  drawShape() {
+  drawShapeLogic() {
     const { location, scale, outerCircleRadius } = this.shape;
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
     this.ctx.translate(location.x, location.y);
     this.ctx.scale(scale.x, scale.y);
     this.ctx.beginPath();
     this.ctx.arc(0, 0, outerCircleRadius, 0, Math.PI * 2);
-    this.ctx.stroke();
     this.ctx.fill();
   }
 }

package/src/layers/shape/layers/ConeShapeLayer.js

@@ -1,8 +1,10 @@
 const InternalShapeLayer = require('../base/InternalShapeLayer');
 
 class ConeShapeLayer extends InternalShapeLayer {
-  drawShape() {
-    const { location, scale, outerCircleRadius } = this.shape;
+  drawShapeLogic() {
+    const { location, color, scale, outerCircleRadius } = this.shape;
+    if (color.alpha === 0) return;
+
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
     this.ctx.translate(location.x, location.y);
     this.ctx.scale(scale.x, scale.y);

package/src/layers/shape/layers/SquareShapeLayer.js

@@ -1,7 +1,7 @@
 const InternalShapeLayer = require('../base/InternalShapeLayer');
 
 class SquareShapeLayer extends InternalShapeLayer {
-  drawShape() {
+  drawShapeLogic() {
     const { location, scale, outerCircleRadius } = this.shape;
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
     this.ctx.translate(location.x, location.y);
@@ -10,7 +10,6 @@ class SquareShapeLayer extends InternalShapeLayer {
     this.ctx.beginPath();
     this.ctx.rect(-outerCircleRadius / 2, -outerCircleRadius / 2, outerCircleRadius, outerCircleRadius);
 
-    this.ctx.stroke();
     this.ctx.fill();
   }
 }

package/src/layers/shape/layers/TriangleShapeLayer.js

@@ -1,7 +1,7 @@
 const InternalShapeLayer = require('../base/InternalShapeLayer');
 
 class TriangleShapeLayer extends InternalShapeLayer {
-  drawShape() {
+  drawShapeLogic() {
     const { location, scale, shapeControlPoints: triangle } = this.shape;
 
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
@@ -15,7 +15,6 @@ class TriangleShapeLayer extends InternalShapeLayer {
     this.ctx.lineTo(triangle[2].x, triangle[2].y);
     this.ctx.lineTo(triangle[0].x, triangle[0].y);
 
-    this.ctx.stroke();
     this.ctx.fill();
   }
 }

package/src/models/Frame.js

@@ -7,6 +7,7 @@ const LineLayer = require('../layers/LineLayer');
 const PlayerLayer = require('../layers/PlayerLayer');
 const ShapeLayer = require('../layers/ShapeLayer');
 const LineControlPointLayer = require('../layers/LineControlPointLayer');
+const ShapeControlPointLayer = require('../layers/ShapeControlPointLayer');
 const Line = require('./Line');
 const Player = require('./Player');
 const ShapeModels = require('./ShapeModels');
@@ -216,6 +217,7 @@ class Frame {
     new LineLayer(this.ctx, frameData).apply();
     new PlayerLayer(this.ctx, frameData).apply();
     new LineControlPointLayer(this.ctx, frameData).apply();
+    new ShapeControlPointLayer(this.ctx, frameData).apply();
 
     // console.timeEnd('draw');
 

package/src/models/Play.js

@@ -16,6 +16,7 @@ class Play {
       linesDisplayOnMoveOnly = true,
       linesHiddenIds = [],
       linesSelectedIds = [],
+      shapeSelectedId = null,
       playersHiddenPositions = [],
       background = '',
       watermark = null,
@@ -35,6 +36,7 @@ class Play {
       linesDisplayOnMoveOnly,
       linesHiddenIds,
       linesSelectedIds,
+      shapeSelectedId,
       playersHiddenPositions,
       background,
       watermark,

package/src/models/Shape.js

@@ -21,11 +21,15 @@ class Shape extends Model {
     return this._getAttr('type');
   }
 
+  get showBorder() {
+    return this._getAttr('showBorder');
+  }
+
   get outerCircleRadius() {
     return 10;
   }
 
-  get rectWrapPoints() {
+  get rectWrapPointsPure() {
     const topLeft = { x: -this.outerCircleRadius / 2, y: -this.outerCircleRadius / 2 };
     const topRight = { x: this.outerCircleRadius / 2, y: -this.outerCircleRadius / 2 };
     const botRight = { x: this.outerCircleRadius / 2, y: this.outerCircleRadius / 2 };
@@ -33,9 +37,15 @@ class Shape extends Model {
     return [topLeft, topRight, botRight, botLeft];
   }
 
+  get rectWrapPoints() {
+    return this.rectWrapPointsPure.map(point => {
+      return { x: point.x * this.scale.x, y: point.y * this.scale.y };
+    });
+  }
+
   get rectWrapPointsTranslated() {
     return this.rectWrapPoints.map(point => {
-      return { x: point.x * this.scale.x + this.location.x, y: point.y * this.scale.y + this.location.y };
+      return { x: point.x + this.location.x, y: point.y + this.location.y };
     });
   }
 

package/src/models/ShapeModels/CircleShape.js

@@ -5,7 +5,7 @@ class CircleShape extends Shape {
     return 5;
   }
 
-  get rectWrapPoints() {
+  get rectWrapPointsPure() {
     const topLeft = { x: -this.outerCircleRadius, y: -this.outerCircleRadius };
     const topRight = { x: this.outerCircleRadius, y: -this.outerCircleRadius };
     const botRight = { x: this.outerCircleRadius, y: this.outerCircleRadius };

package/src/models/ShapeModels/ConeShape.js

@@ -6,7 +6,7 @@ class ConeShape extends Shape {
   }
 
   get shapeControlPoints() {
-    return this.rectWrapPoints;
+    return this.rectWrapPointsPure;
   }
 }
 

package/src/models/ShapeModels/SquareShape.js

@@ -6,7 +6,7 @@ class SquareShape extends Shape {
   }
 
   get shapeControlPoints() {
-    return this.rectWrapPoints;
+    return this.rectWrapPointsPure;
   }
 }
 

package/src/models/ShapeModels/TriangleShape.js

@@ -14,7 +14,7 @@ class TriangleShape extends Shape {
     ];
   }
 
-  get rectWrapPoints() {
+  get rectWrapPointsPure() {
     const [topPoint, botLeft, botRight] = this.shapeControlPoints;
     const topLeft = { x: botLeft.x, y: topPoint.y };
     const topRight = { x: botRight.x, y: topPoint.y };