@luceosports/play-rendering 1.10.11 → 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.11",
+  "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

@@ -34,13 +34,12 @@ class InternalShapeLayer extends InternalBaseLayer {
   drawShapeWrapPoints() {
     if (!DEBUG_WRAP_POINTS) return;
 
-    const { rectWrapPoints, location } = this.shape;
+    const { rectWrapPointsTranslated } = this.shape;
+    const rectWrapCenter = this.shape.rectWrapCenterTranslated(rectWrapPointsTranslated);
 
     this.ctx.fillStyle = 'red';
 
-    this.ctx.translate(location.x, location.y);
-
-    rectWrapPoints.forEach(point => {
+    [...rectWrapPointsTranslated, rectWrapCenter].forEach(point => {
       this.ctx.beginPath();
       this.ctx.arc(point.x, point.y, 0.4, 0, Math.PI * 2);
       this.ctx.fill();

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');
@@ -54,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/TriangleShape.js

@@ -20,6 +20,20 @@ class TriangleShape extends Shape {
     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;