troika-2d - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

dist/troika-2d.esm.js

@@ -15,3 +15,3 @@ import { PointerEventTarget, utils, WorldBaseFacade, ReactCanvasBase } from 'troika-core';
 
-var hitTestContext = document.createElement('canvas').getContext('2d');
+const hitTestContext = document.createElement('canvas').getContext('2d');
 hitTestContext.save();
@@ -38,3 +38,3 @@
 
-var pointInStrokeMethod = "isPointIn" + (typeof CanvasRenderingContext2D.prototype.isPointInStroke === 'function' ? 'Stroke' : 'Path'); //Ugly fallback for IE
+const pointInStrokeMethod = `isPointIn${typeof CanvasRenderingContext2D.prototype.isPointInStroke === 'function' ? 'Stroke' : 'Path'}`; //Ugly fallback for IE
 hitTestContext.stroke = function() {
@@ -59,4 +59,4 @@ if (this[pointInStrokeMethod](this._x, this._y)) {
 function multiplyMatrices(a, b, target) {
-  var a0 = a[0], a1 = a[1], a2 = a[2], a3 = a[3];
-  var b0 = b[0], b1 = b[1], b2 = b[2], b3 = b[3], b4 = b[4], b5 = b[5];
+  let a0 = a[0], a1 = a[1], a2 = a[2], a3 = a[3];
+  let b0 = b[0], b1 = b[1], b2 = b[2], b3 = b[3], b4 = b[4], b5 = b[5];
   target[0] = a0 * b0 + a2 * b1;
@@ -71,3 +71,3 @@ target[1] = a1 * b0 + a3 * b1;
 function copyMatrix(fromMat, toMat) {
-  for (var i = 0; i < 6; i++) {
+  for (let i = 0; i < 6; i++) {
     toMat[i] = fromMat[i];
@@ -77,9 +77,9 @@ }
 
-var _worldMatrixVersion = 0;
+let _worldMatrixVersion = 0;
 
 
 
-var Object2DFacade = /*@__PURE__*/(function (PointerEventTarget) {
-  function Object2DFacade(parent) {
-    PointerEventTarget.call(this, parent);
+class Object2DFacade extends PointerEventTarget {
+  constructor(parent) {
+    super(parent);
 
@@ -103,10 +103,6 @@ // Find nearest Object2DFacade ancestor and add direct parent/child
 
-  if ( PointerEventTarget ) Object2DFacade.__proto__ = PointerEventTarget;
-  Object2DFacade.prototype = Object.create( PointerEventTarget && PointerEventTarget.prototype );
-  Object2DFacade.prototype.constructor = Object2DFacade;
-
-  Object2DFacade.prototype.afterUpdate = function afterUpdate () {
+  afterUpdate() {
     this.updateMatrices();
-    PointerEventTarget.prototype.afterUpdate.call(this);
-  };
+    super.afterUpdate();
+  }
 
@@ -119,4 +115,4 @@ /**
    */
-  Object2DFacade.prototype.render = function render (ctx) {
-  };
+  render(ctx) {
+  }
 
@@ -131,5 +127,5 @@ /**
    */
-  Object2DFacade.prototype.updateMatrices = function updateMatrices () {
-    var parentObj2D = this._parentObject2DFacade;
-    var needsWorldMatrixUpdate;
+  updateMatrices() {
+    let parentObj2D = this._parentObject2DFacade;
+    let needsWorldMatrixUpdate;
     if (this._matrixChanged) {
@@ -151,14 +147,9 @@ this._updateLocalMatrix();
     }
-  };
+  }
 
-  Object2DFacade.prototype._updateLocalMatrix = function _updateLocalMatrix () {
-    var mat = this.transformMatrix;
-    var ref = this;
-    var x = ref.x;
-    var y = ref.y;
-    var rotate = ref.rotate;
-    var scaleX = ref.scaleX;
-    var scaleY = ref.scaleY;
-    var cos = rotate === 0 ? 1 : Math.cos(rotate);
-    var sin = rotate === 0 ? 0 : Math.sin(rotate);
+  _updateLocalMatrix() {
+    let mat = this.transformMatrix;
+    let {x, y, rotate, scaleX, scaleY} = this;
+    let cos = rotate === 0 ? 1 : Math.cos(rotate);
+    let sin = rotate === 0 ? 0 : Math.sin(rotate);
     mat[0] = scaleX * cos;
@@ -170,9 +161,9 @@ mat[1] = scaleX * sin;
     mat[5] = y;
-  };
+  }
 
-  Object2DFacade.prototype.hitTest = function hitTest (x, y) {
+  hitTest(x, y) {
     hitTestContext.startHitTesting(x, y);
 
     this.updateMatrices();
-    var matrix = this.worldTransformMatrix;
+    let matrix = this.worldTransformMatrix;
     hitTestContext.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
@@ -184,10 +175,7 @@
     return hitTestContext.didHit
-  };
+  }
 
-  Object2DFacade.prototype.getProjectedPosition = function getProjectedPosition (x, y) {
-    if ( x === void 0 ) x=0;
-    if ( y === void 0 ) y=0;
-
+  getProjectedPosition(x=0, y=0) {
     this.updateMatrices();
-    var matrix = this.worldTransformMatrix;
+    let matrix = this.worldTransformMatrix;
     return {
@@ -197,25 +185,23 @@ x: x === 0 ? matrix[4] : x * matrix[0] + y * matrix[2] + matrix[4],
     }
-  };
+  }
 
   // Like forEachChild but only for the Object2D render tree - skips intermediates like Lists
   // and can include objects that have been removed but are still in their exitAnimation
-  Object2DFacade.prototype.forEachChildObject2D = function forEachChildObject2D (fn) {
-    var kids = this._childObjects2D;
-    for (var id in kids) {
+  forEachChildObject2D(fn) {
+    let kids = this._childObjects2D;
+    for (let id in kids) {
       fn(kids[id]);
     }
-  };
+  }
 
-  Object2DFacade.prototype.destructor = function destructor () {
-    var parentObj2D = this._parentObject2DFacade;
+  destructor() {
+    let parentObj2D = this._parentObject2DFacade;
     if (parentObj2D) {
       delete parentObj2D._childObjects2D[this.$facadeId];
     }
-    PointerEventTarget.prototype.destructor.call(this);
-  };
+    super.destructor();
+  }
+}
 
-  return Object2DFacade;
-}(PointerEventTarget));
-
-var proto = Object2DFacade.prototype;
+const proto = Object2DFacade.prototype;
 proto.isObject2D = true;
@@ -229,9 +215,9 @@ proto.z = 0;
 function defineTransformProp(prop, defaultValue) {
-  var privateProp = '➤' + prop;
+  let privateProp = '➤' + prop;
   Object.defineProperty(Object2DFacade.prototype, prop, {
-    get: function get() {
+    get() {
       return (privateProp in this) ? this[privateProp] : defaultValue
     },
-    set: function set(value) {
-      var lastVal = this[privateProp];
+    set(value) {
+      let lastVal = this[privateProp];
       if (lastVal !== value) {
@@ -250,14 +236,6 @@ this[privateProp] = value;
 
-var Group2DFacade = /*@__PURE__*/(function (Object2DFacade) {
-	function Group2DFacade () {
-		Object2DFacade.apply(this, arguments);
-	}if ( Object2DFacade ) Group2DFacade.__proto__ = Object2DFacade;
-	Group2DFacade.prototype = Object.create( Object2DFacade && Object2DFacade.prototype );
-	Group2DFacade.prototype.constructor = Group2DFacade;
+class Group2DFacade extends Object2DFacade {
 
-	
+}
 
-	return Group2DFacade;
-}(Object2DFacade));
-
 /**
@@ -268,9 +246,9 @@ * Defines a snippet of HTML content that will be positioned to line up with the object's
  */
-var HtmlOverlay2DFacade = /*@__PURE__*/(function (Object2DFacade) {
-  function HtmlOverlay2DFacade(parent) {
-    Object2DFacade.call(this, parent);
+class HtmlOverlay2DFacade extends Object2DFacade {
+  constructor(parent) {
+    super(parent);
 
     /**
      * Defines the HTML content to be rendered. The type/format of this value is dependent
-     * on the wrapping implementation; for example the Canvas2D.jsx React-based wrapper will
+     * on the wrapping implementation; for example the Canvas2D.js React-based wrapper will
      * expect a React element descriptor, while other wrappers might expect a HTML string.
@@ -293,25 +271,11 @@ *
 
-  if ( Object2DFacade ) HtmlOverlay2DFacade.__proto__ = Object2DFacade;
-  HtmlOverlay2DFacade.prototype = Object.create( Object2DFacade && Object2DFacade.prototype );
-  HtmlOverlay2DFacade.prototype.constructor = HtmlOverlay2DFacade;
-
-  HtmlOverlay2DFacade.prototype.destructor = function destructor () {
+  destructor() {
     this.notifyWorld('removeHtmlOverlay', this);
-    Object2DFacade.prototype.destructor.call(this);
-  };
-
-  return HtmlOverlay2DFacade;
-}(Object2DFacade));
-
-var Text2DFacade = /*@__PURE__*/(function (Object2DFacade) {
-  function Text2DFacade () {
-    Object2DFacade.apply(this, arguments);
+    super.destructor();
   }
+}
 
-  if ( Object2DFacade ) Text2DFacade.__proto__ = Object2DFacade;
-  Text2DFacade.prototype = Object.create( Object2DFacade && Object2DFacade.prototype );
-  Text2DFacade.prototype.constructor = Text2DFacade;
-
-  Text2DFacade.prototype.render = function render (context) {
-    context.font = (this.fontStyle) + " " + (this.fontWeight) + " " + (this.fontStretch) + " " + (this.fontSize) + " " + (this.fontFamily);
+class Text2DFacade extends Object2DFacade {
+  render(context) {
+    context.font = `${ this.fontStyle } ${ this.fontWeight } ${ this.fontStretch } ${ this.fontSize } ${ this.fontFamily }`;
     context.textAlign = this.textAlign;
@@ -322,7 +286,5 @@ context.textBaseline = this.textBaseline;
     context.fillText(this.text, 0, 0);
-  };
+  }
+}
 
-  return Text2DFacade;
-}(Object2DFacade));
-
 // Defaults
@@ -350,5 +312,5 @@ utils.assign(Text2DFacade.prototype, {
   // visit children, ordered by z
-  var kids = [];
-  var hasDifferentZs = false;
-  facade.forEachChildObject2D(function (kid) {
+  let kids = [];
+  let hasDifferentZs = false;
+  facade.forEachChildObject2D((kid) => {
     if (!hasDifferentZs && kids.length && kid.z !== kids[0].z) {
@@ -363,3 +325,3 @@ hasDifferentZs = true;
   }
-  for (var i = 0, len = kids.length; i < len; i++) {
+  for (let i = 0, len = kids.length; i < len; i++) {
     traverseInZOrder(kids[i], callback);
@@ -371,12 +333,4 @@ }
 
-var BackgroundFacade = /*@__PURE__*/(function (Object2DFacade) {
-  function BackgroundFacade () {
-    Object2DFacade.apply(this, arguments);
-  }
-
-  if ( Object2DFacade ) BackgroundFacade.__proto__ = Object2DFacade;
-  BackgroundFacade.prototype = Object.create( Object2DFacade && Object2DFacade.prototype );
-  BackgroundFacade.prototype.constructor = BackgroundFacade;
-
-  BackgroundFacade.prototype.render = function render (ctx) {
+class BackgroundFacade extends Object2DFacade {
+  render(ctx) {
     if (this.color != null) {
@@ -386,10 +340,8 @@ ctx.fillStyle = this.color;
     }
-  };
+  }
 
-  BackgroundFacade.prototype.hitTest = function hitTest (x, y) {
+  hitTest(x, y) {
     return true //always hits, but at furthest possible distance
-  };
-
-  return BackgroundFacade;
-}(Object2DFacade));
+  }
+}
 BackgroundFacade.prototype.z = -Infinity;
@@ -399,5 +351,5 @@
 
-var World2DFacade = /*@__PURE__*/(function (WorldBaseFacade) {
-  function World2DFacade(canvas) {
-    WorldBaseFacade.call(this, canvas);
+class World2DFacade extends WorldBaseFacade {
+  constructor(canvas) {
+    super(canvas);
     this._context = canvas.getContext('2d');
@@ -407,7 +359,3 @@ this._onBgClick = this._onBgClick.bind(this);
 
-  if ( WorldBaseFacade ) World2DFacade.__proto__ = WorldBaseFacade;
-  World2DFacade.prototype = Object.create( WorldBaseFacade && WorldBaseFacade.prototype );
-  World2DFacade.prototype.constructor = World2DFacade;
-
-  World2DFacade.prototype.afterUpdate = function afterUpdate () {
+  afterUpdate() {
     this.children = {
@@ -423,13 +371,11 @@ key: 'bg',
 
-    WorldBaseFacade.prototype.afterUpdate.call(this);
-  };
+    super.afterUpdate();
+  }
 
 
-  World2DFacade.prototype.doRender = function doRender () {
-    var canvas = this._element;
-    var ctx = this._context;
-    var ref = this;
-    var width = ref.width;
-    var height = ref.height;
-    var pixelRatio = this.pixelRatio || window.devicePixelRatio || 1;
+  doRender() {
+    let canvas = this._element;
+    let ctx = this._context;
+    let {width, height} = this;
+    let pixelRatio = this.pixelRatio || window.devicePixelRatio || 1;
 
@@ -444,8 +390,8 @@ // Clear canvas and set size
     // Walk tree in z order and render each Object2DFacade
-    var root = this.getChildByKey('bg');
-    traverseInZOrder(root, function (facade) {
+    let root = this.getChildByKey('bg');
+    traverseInZOrder(root, facade => {
       ctx.save();
 
       // update transform
-      var mat = facade.worldTransformMatrix;
+      let mat = facade.worldTransformMatrix;
       ctx.transform(mat[0], mat[1], mat[2], mat[3], mat[4], mat[5]);
@@ -458,3 +404,3 @@
     });
-  };
+  }
 
@@ -465,7 +411,5 @@
    */
-  World2DFacade.prototype.getFacadeUserSpaceXYZ = function getFacadeUserSpaceXYZ (facade) {
-    var ref = facade.getProjectedPosition(0, 0);
-    var x = ref.x;
-    var y = ref.y;
-    var z = facade.z;
+  getFacadeUserSpaceXYZ(facade) {
+    let {x, y} = facade.getProjectedPosition(0, 0);
+    let z = facade.z;
     return {
@@ -477,3 +421,3 @@ x: x,
     }
-  };
+  }
 
@@ -484,12 +428,12 @@ /**
    */
-  World2DFacade.prototype.getFacadesAtEvent = function getFacadesAtEvent (e, filterFn) {
-    var canvasRect = e.target.getBoundingClientRect(); //e.target is the canvas
-    var x = e.clientX - canvasRect.left;
-    var y = e.clientY - canvasRect.top;
-    var hits = null;
-    var distance = 0;
+  getFacadesAtEvent(e, filterFn) {
+    const canvasRect = e.target.getBoundingClientRect(); //e.target is the canvas
+    let x = e.clientX - canvasRect.left;
+    let y = e.clientY - canvasRect.top;
+    let hits = null;
+    let distance = 0;
 
-    traverseInZOrder(this.getChildByKey('bg'), function (facade) {
+    traverseInZOrder(this.getChildByKey('bg'), facade => {
       if ((!filterFn || filterFn(facade)) && facade.hitTest(x, y)) {
-        if (!hits) { hits = Object.create(null); }
+        if (!hits) hits = Object.create(null);
         hits[facade.$facadeId] = {
@@ -503,8 +447,8 @@ facade: facade,
     if (hits) {
-      hits = Object.keys(hits).map(function (id) { return hits[id]; });
+      hits = Object.keys(hits).map(id => hits[id]);
     }
     return hits
-  };
+  }
 
-  World2DFacade.prototype._onBgClick = function _onBgClick (e) {
+  _onBgClick(e) {
     // Ignore clicks that bubbled up
@@ -514,19 +458,8 @@ if (e.target === e.currentTarget) {
     }
-  };
-
-  return World2DFacade;
-}(WorldBaseFacade));
-
-var Canvas2D = /*@__PURE__*/(function (superclass) {
-  function Canvas2D () {
-    superclass.apply(this, arguments);
   }
+}
 
-  if ( superclass ) Canvas2D.__proto__ = superclass;
-  Canvas2D.prototype = Object.create( superclass && superclass.prototype );
-  Canvas2D.prototype.constructor = Canvas2D;
-
-  Canvas2D.prototype.render = function render () {
-    var ref = this;
-    var props = ref.props;
+class Canvas2D extends React.Component {
+  render() {
+    const {props} = this;
     return React.createElement(
@@ -544,7 +477,5 @@ ReactCanvasBase,
     )
-  };
+  }
+}
 
-  return Canvas2D;
-}(React.Component));
-
 Canvas2D.displayName = 'Canvas2D';
@@ -551,0 +482,0 @@

dist/troika-2d.umd.js

@@ -264,3 +264,3 @@ (function (global, factory) {
        * Defines the HTML content to be rendered. The type/format of this value is dependent
-       * on the wrapping implementation; for example the Canvas2D.jsx React-based wrapper will
+       * on the wrapping implementation; for example the Canvas2D.js React-based wrapper will
        * expect a React element descriptor, while other wrappers might expect a HTML string.
@@ -267,0 +267,0 @@ *

package.json

 {
   "name": "troika-2d",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Troika 2D",
@@ -18,5 +18,5 @@ "author": "Jason Johnston <[e-mail]>",
   "dependencies": {
-    "troika-core": "^0.16.0"
+    "troika-core": "^0.17.0"
   },
-  "gitHead": "b17e3967b2166f102cabc6cd4bf46f5a725a8910"
+  "gitHead": "31909f4beed23f5913aa380db1dd3c1802798b39"
 }

src/facade/Group2DFacade.js

@@ -1,2 +0,2 @@
-import Object2DFacade from './Object2DFacade'
+import Object2DFacade from './Object2DFacade.js'
 
@@ -3,0 +3,0 @@ class Group2DFacade extends Object2DFacade {

src/facade/HtmlOverlay2DFacade.js

@@ -1,2 +0,2 @@
-import Object2DFacade from './Object2DFacade'
+import Object2DFacade from './Object2DFacade.js'
 
@@ -15,3 +15,3 @@
      * Defines the HTML content to be rendered. The type/format of this value is dependent
-     * on the wrapping implementation; for example the Canvas2D.jsx React-based wrapper will
+     * on the wrapping implementation; for example the Canvas2D.js React-based wrapper will
      * expect a React element descriptor, while other wrappers might expect a HTML string.
@@ -18,0 +18,0 @@ *

src/facade/Object2DFacade.js

 import { PointerEventTarget } from 'troika-core'
-import hitTestContext from '../HitTestContext'
+import hitTestContext from '../HitTestContext.js'
 
@@ -4,0 +4,0 @@

src/facade/Text2DFacade.js

 import { utils } from 'troika-core'
-import Object2DFacade from './Object2DFacade'
+import Object2DFacade from './Object2DFacade.js'
 
@@ -4,0 +4,0 @@ class Text2DFacade extends Object2DFacade {

src/facade/World2DFacade.js

 import { WorldBaseFacade } from 'troika-core'
-import Object2DFacade from './Object2DFacade'
+import Object2DFacade from './Object2DFacade.js'
 
@@ -4,0 +4,0 @@ function byZ(a, b) {

src/index.js

@@ -11,5 +11,5 @@ // Troika 2D exports
 // React entry point
-export {default as Canvas2D} from './react/Canvas2D.jsx'
+export {default as Canvas2D} from './react/Canvas2D.js'
 
 // Convenience shortcuts for some common troika-core exports
 export {Facade, ListFacade, ParentFacade} from 'troika-core'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

53413

decreased by-6.43%

Lines of code

1309

decreased by-3.75%

Dependency changes

• + Addedtroika-animation@0.17.1(transitive)

• + Addedtroika-core@0.17.1(transitive)

• - Removedtroika-animation@0.16.0(transitive)

• - Removedtroika-core@0.16.0(transitive)

• Updatedtroika-core@^0.17.0