@luceosports/play-rendering 1.10.9 → 1.10.12

package/index.js

@@ -3,5 +3,7 @@ module.exports.Frame = require('./src/models/Frame');
 module.exports.Animation = require('./src/models/Animation');
 module.exports.Line = require('./src/models/Line');
 module.exports.Player = require('./src/models/Player');
+module.exports.Shape = require('./src/models/Shape');
+module.exports.ShapeModels = require('./src/models/ShapeModels');
 module.exports.LineDrawingMath = require('./src/math/LineDrawingMath');
 module.exports.Bezier = require('./src/math/Bezier').Bezier;

package/package.json

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

package/src/layers/ShapeControlPointLayer.js

@@ -6,13 +6,11 @@ class ShapeControlPointLayer extends BaseLayer {
 
     this.ctx.fillStyle = 'blue';
 
-    this.playData.shapes.forEach(({ id, color, location, rectWrapPoints }) => {
+    this.playData.shapes.forEach(({ id, color, rectWrapPointsTranslated }) => {
       if (this.options.shapeSelectedId !== id) return;
       if (color.alpha === 0) return;
 
-      this.ctx.translate(location.x, location.y);
-
-      rectWrapPoints.forEach(point => {
+      rectWrapPointsTranslated.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/shape/base/InternalShapeLayer.js

@@ -28,25 +28,35 @@ 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}, 1)`;
+    this.ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${alpha ? 1 : 0})`;
   }
 
   drawShapeWrapPoints() {
     if (!DEBUG_WRAP_POINTS) return;
 
-    const { rectWrapPoints } = this.shape;
+    const { rectWrapPointsTranslated } = this.shape;
+    const rectWrapCenter = this.shape.rectWrapCenterTranslated(rectWrapPointsTranslated);
 
-    rectWrapPoints.forEach(point => {
+    this.ctx.fillStyle = 'red';
+
+    [...rectWrapPointsTranslated, rectWrapCenter].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.drawShapeBorder();
+    this.ctx.restore();
+  }
+
+  drawShapeBorder() {
+    if (this.shape.showBorder) {
+      this.ctx.stroke();
+    }
   }
 
   drawShapeLogic() {

package/src/models/Shape.js

@@ -1,5 +1,10 @@
 const Model = require('./Base/InternalFrameModel');
 
+const WRAP_POINT_TOP_LEFT_INDEX = 0;
+const WRAP_POINT_TOP_RIGHT_INDEX = 1;
+const WRAP_POINT_BOT_RIGHT_INDEX = 2;
+const WRAP_POINT_BOT_LEFT_INDEX = 3;
+
 class Shape extends Model {
   get id() {
     return this._getAttr('id');
@@ -29,7 +34,7 @@ class Shape extends Model {
     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 };
@@ -37,9 +42,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 };
     });
   }
 
@@ -48,10 +59,57 @@ class Shape extends Model {
     return [];
   }
 
+  rectWrapCenterTranslated([topLeft, topRight, botRight]) {
+    return {
+      x: (topLeft.x + topRight.x) / 2,
+      y: (topRight.y + botRight.y) / 2
+    };
+  }
+
   rectWrapperContains({ x, y }) {
     const [topLeft, topRight, botRight] = this.rectWrapPointsTranslated;
     return topLeft.x <= x && x <= topRight.x && topLeft.y <= y && y <= botRight.y;
   }
+
+  computeShapeAreaForPointAtIndex(newPoint, newIndex) {
+    const [topLeftOrig, topRightOrig, botRightOrig] = this.rectWrapPointsTranslated;
+    const [topLeft, topRight, botRight] = this.computeRectWrapPointsTranslatedForPointAtIndex(newPoint, newIndex);
+
+    const scale = {
+      x: (Math.abs(topLeft.x - topRight.x) * this.scale.x) / Math.abs(topLeftOrig.x - topRightOrig.x),
+      y: (Math.abs(topRight.y - botRight.y) * this.scale.y) / Math.abs(topRightOrig.y - botRightOrig.y)
+    };
+
+    return { scale, location: this.rectWrapCenterTranslated([topLeft, topRight, botRight]) };
+  }
+
+  computeRectWrapPointsTranslatedForPointAtIndex(newPoint, newIndex) {
+    const newWrapPointsTranslated = this.rectWrapPointsTranslated.map((point, index) =>
+      newIndex === index ? newPoint : point
+    );
+
+    if (newIndex === WRAP_POINT_TOP_LEFT_INDEX) {
+      newWrapPointsTranslated[WRAP_POINT_TOP_RIGHT_INDEX].y = newPoint.y;
+      newWrapPointsTranslated[WRAP_POINT_BOT_LEFT_INDEX].x = newPoint.x;
+    }
+
+    if (newIndex === WRAP_POINT_TOP_RIGHT_INDEX) {
+      newWrapPointsTranslated[WRAP_POINT_TOP_LEFT_INDEX].y = newPoint.y;
+      newWrapPointsTranslated[WRAP_POINT_BOT_RIGHT_INDEX].x = newPoint.x;
+    }
+
+    if (newIndex === WRAP_POINT_BOT_RIGHT_INDEX) {
+      newWrapPointsTranslated[WRAP_POINT_TOP_RIGHT_INDEX].x = newPoint.x;
+      newWrapPointsTranslated[WRAP_POINT_BOT_LEFT_INDEX].y = newPoint.y;
+    }
+
+    if (newIndex === WRAP_POINT_BOT_LEFT_INDEX) {
+      newWrapPointsTranslated[WRAP_POINT_TOP_LEFT_INDEX].x = newPoint.x;
+      newWrapPointsTranslated[WRAP_POINT_BOT_RIGHT_INDEX].y = newPoint.y;
+    }
+
+    return newWrapPointsTranslated;
+  }
 }
 
 module.exports = Shape;

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,12 +14,26 @@ 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 };
     return [topLeft, topRight, botRight, botLeft];
   }
+
+  rectWrapCenterTranslated([topLeft, topRight]) {
+    const [topPoint] = this.shapeControlPoints;
+
+    const topPointTranslated = {
+      x: topPoint.x + this.location.x,
+      y: topPoint.y + this.location.y
+    };
+
+    return {
+      x: (topLeft.x + topRight.x) / 2,
+      y: topPointTranslated.y + this.outerCircleRadius
+    };
+  }
 }
 
 module.exports = TriangleShape;