troika-2d - npm Package Compare versions

Comparing version 0.42.0 to 0.43.0

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+# [0.43.0](https://github.com/protectwise/troika/compare/v0.42.0...v0.43.0) (2021-09-20)
+
+**Note:** Version bump only for package troika-2d
+
+
+
+
+
+
 # [0.42.0](https://github.com/protectwise/troika/compare/v0.41.2...v0.42.0) (2021-05-17)
@@ -8,0 +17,0 @@

dist/troika-2d.esm.js

@@ -0,0 +0,0 @@ import { PointerEventTarget, utils, WorldBaseFacade, ReactCanvasBase } from 'troika-core';

dist/troika-2d.umd.js

@@ -21,3 +21,3 @@ (function (global, factory) {
 
-  var hitTestContext = document.createElement('canvas').getContext('2d');
+  const hitTestContext = document.createElement('canvas').getContext('2d');
   hitTestContext.save();
@@ -44,3 +44,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() {
@@ -65,4 +65,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;
@@ -77,3 +77,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];
@@ -83,9 +83,9 @@ }
 
-  var _worldMatrixVersion = 0;
+  let _worldMatrixVersion = 0;
 
 
 
-  var Object2DFacade = /*@__PURE__*/(function (PointerEventTarget) {
-    function Object2DFacade(parent) {
-      PointerEventTarget.call(this, parent);
+  class Object2DFacade extends troikaCore.PointerEventTarget {
+    constructor(parent) {
+      super(parent);
 
@@ -109,10 +109,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();
+    }
 
@@ -125,4 +121,4 @@ /**
      */
-    Object2DFacade.prototype.render = function render (ctx) {
-    };
+    render(ctx) {
+    }
 
@@ -137,5 +133,5 @@ /**
      */
-    Object2DFacade.prototype.updateMatrices = function updateMatrices () {
-      var parentObj2D = this._parentObject2DFacade;
-      var needsWorldMatrixUpdate;
+    updateMatrices() {
+      let parentObj2D = this._parentObject2DFacade;
+      let needsWorldMatrixUpdate;
       if (this._matrixChanged) {
@@ -157,14 +153,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;
@@ -176,9 +167,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]);
@@ -190,10 +181,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 {
@@ -203,25 +191,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;
-  }(troikaCore.PointerEventTarget));
-
-  var proto = Object2DFacade.prototype;
+  const proto = Object2DFacade.prototype;
   proto.isObject2D = true;
@@ -235,9 +221,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) {
@@ -256,14 +242,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));
-
   /**
@@ -274,5 +252,5 @@ * 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);
 
@@ -299,25 +277,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;
@@ -328,7 +292,5 @@ context.textBaseline = this.textBaseline;
       context.fillText(this.text, 0, 0);
-    };
+    }
+  }
 
-    return Text2DFacade;
-  }(Object2DFacade));
-
   // Defaults
@@ -356,5 +318,5 @@ troikaCore.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) {
@@ -369,3 +331,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);
@@ -377,12 +339,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) {
@@ -392,10 +346,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;
@@ -405,5 +357,5 @@
 
-  var World2DFacade = /*@__PURE__*/(function (WorldBaseFacade) {
-    function World2DFacade(canvas) {
-      WorldBaseFacade.call(this, canvas);
+  class World2DFacade extends troikaCore.WorldBaseFacade {
+    constructor(canvas) {
+      super(canvas);
       this._context = canvas.getContext('2d');
@@ -413,7 +365,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.describeChildren = function describeChildren () {
+    describeChildren() {
       return {
@@ -428,11 +376,9 @@ key: 'bg',
       }
-    };
+    }
 
-    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;
 
@@ -447,8 +393,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]);
@@ -461,3 +407,3 @@
       });
-    };
+    }
 
@@ -468,7 +414,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 {
@@ -480,3 +424,3 @@ x: x,
       }
-    };
+    }
 
@@ -487,12 +431,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] = {
@@ -506,8 +450,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
@@ -517,19 +461,8 @@ if (e.target === e.currentTarget) {
       }
-    };
-
-    return World2DFacade;
-  }(troikaCore.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__default['default'].Component {
+    render() {
+      const {props} = this;
       return React__default['default'].createElement(
@@ -547,7 +480,5 @@ troikaCore.ReactCanvasBase,
       )
-    };
+    }
+  }
 
-    return Canvas2D;
-  }(React__default['default'].Component));
-
   Canvas2D.displayName = 'Canvas2D';
@@ -554,0 +485,0 @@

dist/troika-2d.umd.min.js

@@ -1,15 +0,12 @@
-'use strict';(function(d,e){"object"===typeof exports&&"undefined"!==typeof module?e(exports,require("troika-core"),require("react"),require("prop-types")):"function"===typeof define&&define.amd?define(["exports","troika-core","react","prop-types"],e):(d="undefined"!==typeof globalThis?globalThis:d||self,e(d.troika_2d={},d.troika_core,d.React,d.PropTypes))})(this,function(d,e,k,l){function t(b){return b&&"object"===typeof b&&"default"in b?b:{"default":b}}function n(b,a){var c="\u27a4"+b;Object.defineProperty(m.prototype,
-b,{get:function(){return c in this?this[c]:a},set:function(a){this[c]!==a&&(this[c]=a,this._matrixChanged=!0)}})}function y(b,a){return b.z-a.z}function q(b,a){a&&a(b);var c=[],p=!1;b.forEachChildObject2D(function(a){!p&&c.length&&a.z!==c[0].z&&(p=!0);c.push(a)});p&&c.sort(y);b=0;for(var z=c.length;b<z;b++)q(c[b],a)}var u=t(k);k=t(l);var g=document.createElement("canvas").getContext("2d");g.save();g.startHitTesting=function(b,a){this._x=b;this._y=a;this.didHit=!1;this.restore();this.save()};g.fill=
-function(){this.isPointInPath(this._x,this._y)&&(this.didHit=!0)};var A="isPointIn"+("function"===typeof CanvasRenderingContext2D.prototype.isPointInStroke?"Stroke":"Path");g.stroke=function(){this[A](this._x,this._y)&&(this.didHit=!0)};g.fillRect=function(b,a,c,p){this.beginPath();this.rect(b,a,c,p);this.fill()};g.strokeRect=function(b,a,c,p){this.beginPath();this.rect(b,a,c,p);this.stroke()};var B=0,m=function(b){function a(c){for(b.call(this,c);c&&!c.isObject2D;)c=c.parent;c&&(c._childObjects2D[this.$facadeId]=
-this);this._parentObject2DFacade=c;this._childObjects2D=Object.create(null);this.transformMatrix=[1,0,0,1,0,0];this.worldTransformMatrix=[1,0,0,1,0,0]}b&&(a.__proto__=b);a.prototype=Object.create(b&&b.prototype);a.prototype.constructor=a;a.prototype.afterUpdate=function(){this.updateMatrices();b.prototype.afterUpdate.call(this)};a.prototype.render=function(c){};a.prototype.updateMatrices=function(){var c=this._parentObject2DFacade;if(this._matrixChanged){this._updateLocalMatrix();this._matrixChanged=
-!1;var a=!0}else a=c&&c._worldMatrixVersion>this._worldMatrixVersion;if(a){if(c){c=c.worldTransformMatrix;var b=this.transformMatrix;a=this.worldTransformMatrix;var f=c[0],d=c[1],h=c[2],e=c[3],g=b[0],k=b[1],l=b[2],m=b[3],n=b[4];b=b[5];a[0]=f*g+h*k;a[1]=d*g+e*k;a[2]=f*l+h*m;a[3]=d*l+e*m;a[4]=f*n+h*b+c[4];a[5]=d*n+e*b+c[5]}else for(c=this.transformMatrix,a=this.worldTransformMatrix,f=0;6>f;f++)a[f]=c[f];this._worldMatrixVersion=++B}};a.prototype._updateLocalMatrix=function(){var c=this.transformMatrix,
-a=this.x,b=this.y,f=this.rotate,d=this.scaleX,h=this.scaleY,e=0===f?1:Math.cos(f);f=0===f?0:Math.sin(f);c[0]=d*e;c[1]=d*f;c[2]=h*-f;c[3]=h*e;c[4]=a;c[5]=b};a.prototype.hitTest=function(c,a){g.startHitTesting(c,a);this.updateMatrices();c=this.worldTransformMatrix;g.setTransform(c[0],c[1],c[2],c[3],c[4],c[5]);this.render(g);return g.didHit};a.prototype.getProjectedPosition=function(c,a){void 0===c&&(c=0);void 0===a&&(a=0);this.updateMatrices();var b=this.worldTransformMatrix;return{x:0===c?b[4]:c*b[0]+
-a*b[2]+b[4],y:0===a?b[5]:c*b[1]+a*b[3]+b[5]}};a.prototype.forEachChildObject2D=function(c){var a=this._childObjects2D,b;for(b in a)c(a[b])};a.prototype.destructor=function(){var c=this._parentObject2DFacade;c&&delete c._childObjects2D[this.$facadeId];b.prototype.destructor.call(this)};return a}(e.PointerEventTarget);l=m.prototype;l.isObject2D=!0;l.z=0;l._worldMatrixVersion=-1;n("x",0);n("y",0);n("rotate",0);n("scaleX",1);n("scaleY",1);l=function(b){function a(){b.apply(this,arguments)}b&&(a.__proto__=
-b);a.prototype=Object.create(b&&b.prototype);return a.prototype.constructor=a}(m);var C=function(b){function a(c){b.call(this,c);this.html=null;this.exact=!1;this.notifyWorld("addHtmlOverlay",this)}b&&(a.__proto__=b);a.prototype=Object.create(b&&b.prototype);a.prototype.constructor=a;a.prototype.destructor=function(){this.notifyWorld("removeHtmlOverlay",this);b.prototype.destructor.call(this)};return a}(m),v=function(b){function a(){b.apply(this,arguments)}b&&(a.__proto__=b);a.prototype=Object.create(b&&
-b.prototype);a.prototype.constructor=a;a.prototype.render=function(c){c.font=this.fontStyle+" "+this.fontWeight+" "+this.fontStretch+" "+this.fontSize+" "+this.fontFamily;c.textAlign=this.textAlign;c.textBaseline=this.textBaseline;c.fillStyle=this.color;c.globalAlpha=this.opacity;c.fillText(this.text,0,0)};return a}(m);e.utils.assign(v.prototype,{color:"#fff",fontFamily:"sans-serif",fontSize:"12px",fontStretch:"",fontStyle:"",fontWeight:"",textAlign:"start",textBaseline:"alphabetic",text:"",opacity:1});
-var w=function(b){function a(){b.apply(this,arguments)}b&&(a.__proto__=b);a.prototype=Object.create(b&&b.prototype);a.prototype.constructor=a;a.prototype.render=function(c){null!=this.color&&(c.fillStyle=this.color,c.fillRect(0,0,this.width,this.height))};a.prototype.hitTest=function(c,a){return!0};return a}(m);w.prototype.z=-Infinity;var x=function(b){function a(c){b.call(this,c);this._context=c.getContext("2d");this._onBgClick=this._onBgClick.bind(this)}b&&(a.__proto__=b);a.prototype=Object.create(b&&
-b.prototype);a.prototype.constructor=a;a.prototype.describeChildren=function(){return{key:"bg",facade:w,color:this.backgroundColor,width:this.width,height:this.height,onClick:this.onBackgroundClick?this._onBgClick:null,children:this.objects}};a.prototype.doRender=function(){var c=this._element,a=this._context,b=this.height,d=this.pixelRatio||window.devicePixelRatio||1;c.width=this.width*d;c.height=b*d;a.setTransform(d,0,0,d,0,0);c=this.getChildByKey("bg");q(c,function(c){a.save();var b=c.worldTransformMatrix;
-a.transform(b[0],b[1],b[2],b[3],b[4],b[5]);c.render(a);a.restore()})};a.prototype.getFacadeUserSpaceXYZ=function(c){var a=c.getProjectedPosition(0,0);c=c.z;return{x:a.x,y:a.y,z:1<c?1/c:1-c}};a.prototype.getFacadesAtEvent=function(a,b){var c=a.target.getBoundingClientRect(),d=a.clientX-c.left,e=a.clientY-c.top,h=null,g=0;q(this.getChildByKey("bg"),function(a){b&&!b(a)||!a.hitTest(d,e)||(h||(h=Object.create(null)),h[a.$facadeId]={facade:a,distance:g--})});h&&(h=Object.keys(h).map(function(a){return h[a]}));
-return h};a.prototype._onBgClick=function(a){if(a.target===a.currentTarget)this.onBackgroundClick(a)};return a}(e.WorldBaseFacade),r=function(b){function a(){b.apply(this,arguments)}b&&(a.__proto__=b);a.prototype=Object.create(b&&b.prototype);a.prototype.constructor=a;a.prototype.render=function(){var a=this.props;return u["default"].createElement(e.ReactCanvasBase,e.utils.assign({},a,{worldFacade:a.worldFacade||x,worldProps:e.utils.assign({},{backgroundColor:a.backgroundColor,onBackgroundClick:a.onBackgroundClick,
-objects:a.objects},a.worldProps)}),a.children)};return a}(u["default"].Component);r.displayName="Canvas2D";r.propTypes=e.utils.assignIf({backgroundColor:k["default"].any,objects:k["default"].oneOfType([k["default"].array,k["default"].object]).isRequired,onBackgroundClick:k["default"].func},e.ReactCanvasBase.commonPropTypes);Object.defineProperty(d,"Facade",{enumerable:!0,get:function(){return e.Facade}});Object.defineProperty(d,"ListFacade",{enumerable:!0,get:function(){return e.ListFacade}});Object.defineProperty(d,
-"ParentFacade",{enumerable:!0,get:function(){return e.ParentFacade}});d.Canvas2D=r;d.Group2DFacade=l;d.HtmlOverlay2DFacade=C;d.Object2DFacade=m;d.Text2DFacade=v;d.World2DFacade=x;Object.defineProperty(d,"__esModule",{value:!0})})
+'use strict';(function(d,g){"object"===typeof exports&&"undefined"!==typeof module?g(exports,require("troika-core"),require("react"),require("prop-types")):"function"===typeof define&&define.amd?define(["exports","troika-core","react","prop-types"],g):(d="undefined"!==typeof globalThis?globalThis:d||self,g(d.troika_2d={},d.troika_core,d.React,d.PropTypes))})(this,function(d,g,h,l){function t(a){return a&&"object"===typeof a&&"default"in a?a:{"default":a}}function m(a,c){let b="\u27a4"+a;Object.defineProperty(k.prototype,
+a,{get(){return b in this?this[b]:c},set(a){this[b]!==a&&(this[b]=a,this._matrixChanged=!0)}})}function y(a,c){return a.z-c.z}function p(a,c){c&&c(a);let b=[],e=!1;a.forEachChildObject2D(a=>{!e&&b.length&&a.z!==b[0].z&&(e=!0);b.push(a)});e&&b.sort(y);for(let a=0,e=b.length;a<e;a++)p(b[a],c)}var u=t(h);h=t(l);let f=document.createElement("canvas").getContext("2d");f.save();f.startHitTesting=function(a,c){this._x=a;this._y=c;this.didHit=!1;this.restore();this.save()};f.fill=function(){this.isPointInPath(this._x,
+this._y)&&(this.didHit=!0)};let z=`isPointIn${"function"===typeof CanvasRenderingContext2D.prototype.isPointInStroke?"Stroke":"Path"}`;f.stroke=function(){this[z](this._x,this._y)&&(this.didHit=!0)};f.fillRect=function(a,c,b,e){this.beginPath();this.rect(a,c,b,e);this.fill()};f.strokeRect=function(a,c,b,e){this.beginPath();this.rect(a,c,b,e);this.stroke()};let A=0;class k extends g.PointerEventTarget{constructor(a){for(super(a);a&&!a.isObject2D;)a=a.parent;a&&(a._childObjects2D[this.$facadeId]=this);
+this._parentObject2DFacade=a;this._childObjects2D=Object.create(null);this.transformMatrix=[1,0,0,1,0,0];this.worldTransformMatrix=[1,0,0,1,0,0]}afterUpdate(){this.updateMatrices();super.afterUpdate()}render(a){}updateMatrices(){var a=this._parentObject2DFacade;if(this._matrixChanged){this._updateLocalMatrix();this._matrixChanged=!1;var c=!0}else c=a&&a._worldMatrixVersion>this._worldMatrixVersion;if(c){if(a){{a=a.worldTransformMatrix;var b=this.transformMatrix;c=this.worldTransformMatrix;var e=a[0];
+let d=a[1],q=a[2],g=a[3],n=b[0],f=b[1],h=b[2],k=b[3],l=b[4];b=b[5];c[0]=e*n+q*f;c[1]=d*n+g*f;c[2]=e*h+q*k;c[3]=d*h+g*k;c[4]=e*l+q*b+a[4];c[5]=d*l+g*b+a[5]}}else for(a=this.transformMatrix,c=this.worldTransformMatrix,e=0;6>e;e++)c[e]=a[e];this._worldMatrixVersion=++A}}_updateLocalMatrix(){let a=this.transformMatrix,{x:c,y:b,rotate:e,scaleX:d,scaleY:g}=this,f=0===e?1:Math.cos(e),n=0===e?0:Math.sin(e);a[0]=d*f;a[1]=d*n;a[2]=g*-n;a[3]=g*f;a[4]=c;a[5]=b}hitTest(a,c){f.startHitTesting(a,c);this.updateMatrices();
+a=this.worldTransformMatrix;f.setTransform(a[0],a[1],a[2],a[3],a[4],a[5]);this.render(f);return f.didHit}getProjectedPosition(a=0,c=0){this.updateMatrices();let b=this.worldTransformMatrix;return{x:0===a?b[4]:a*b[0]+c*b[2]+b[4],y:0===c?b[5]:a*b[1]+c*b[3]+b[5]}}forEachChildObject2D(a){let c=this._childObjects2D;for(let b in c)a(c[b])}destructor(){let a=this._parentObject2DFacade;a&&delete a._childObjects2D[this.$facadeId];super.destructor()}}l=k.prototype;l.isObject2D=!0;l.z=0;l._worldMatrixVersion=
+-1;m("x",0);m("y",0);m("rotate",0);m("scaleX",1);m("scaleY",1);class B extends k{}class C extends k{constructor(a){super(a);this.html=null;this.exact=!1;this.notifyWorld("addHtmlOverlay",this)}destructor(){this.notifyWorld("removeHtmlOverlay",this);super.destructor()}}class v extends k{render(a){a.font=`${this.fontStyle} ${this.fontWeight} ${this.fontStretch} ${this.fontSize} ${this.fontFamily}`;a.textAlign=this.textAlign;a.textBaseline=this.textBaseline;a.fillStyle=this.color;a.globalAlpha=this.opacity;
+a.fillText(this.text,0,0)}}g.utils.assign(v.prototype,{color:"#fff",fontFamily:"sans-serif",fontSize:"12px",fontStretch:"",fontStyle:"",fontWeight:"",textAlign:"start",textBaseline:"alphabetic",text:"",opacity:1});class w extends k{render(a){null!=this.color&&(a.fillStyle=this.color,a.fillRect(0,0,this.width,this.height))}hitTest(a,c){return!0}}w.prototype.z=-Infinity;class x extends g.WorldBaseFacade{constructor(a){super(a);this._context=a.getContext("2d");this._onBgClick=this._onBgClick.bind(this)}describeChildren(){return{key:"bg",
+facade:w,color:this.backgroundColor,width:this.width,height:this.height,onClick:this.onBackgroundClick?this._onBgClick:null,children:this.objects}}doRender(){var a=this._element;let c=this._context,{width:b,height:e}=this,d=this.pixelRatio||window.devicePixelRatio||1;a.width=b*d;a.height=e*d;c.setTransform(d,0,0,d,0,0);a=this.getChildByKey("bg");p(a,a=>{c.save();let b=a.worldTransformMatrix;c.transform(b[0],b[1],b[2],b[3],b[4],b[5]);a.render(c);c.restore()})}getFacadeUserSpaceXYZ(a){let {x:c,y:b}=
+a.getProjectedPosition(0,0);a=a.z;return{x:c,y:b,z:1<a?1/a:1-a}}getFacadesAtEvent(a,c){let b=a.target.getBoundingClientRect(),d=a.clientX-b.left,g=a.clientY-b.top,f=null,h=0;p(this.getChildByKey("bg"),a=>{c&&!c(a)||!a.hitTest(d,g)||(f||(f=Object.create(null)),f[a.$facadeId]={facade:a,distance:h--})});f&&(f=Object.keys(f).map(a=>f[a]));return f}_onBgClick(a){if(a.target===a.currentTarget)this.onBackgroundClick(a)}}class r extends u["default"].Component{render(){let {props:a}=this;return u["default"].createElement(g.ReactCanvasBase,
+g.utils.assign({},a,{worldFacade:a.worldFacade||x,worldProps:g.utils.assign({},{backgroundColor:a.backgroundColor,onBackgroundClick:a.onBackgroundClick,objects:a.objects},a.worldProps)}),a.children)}}r.displayName="Canvas2D";r.propTypes=g.utils.assignIf({backgroundColor:h["default"].any,objects:h["default"].oneOfType([h["default"].array,h["default"].object]).isRequired,onBackgroundClick:h["default"].func},g.ReactCanvasBase.commonPropTypes);Object.defineProperty(d,"Facade",{enumerable:!0,get:function(){return g.Facade}});
+Object.defineProperty(d,"ListFacade",{enumerable:!0,get:function(){return g.ListFacade}});Object.defineProperty(d,"ParentFacade",{enumerable:!0,get:function(){return g.ParentFacade}});d.Canvas2D=r;d.Group2DFacade=B;d.HtmlOverlay2DFacade=C;d.Object2DFacade=k;d.Text2DFacade=v;d.World2DFacade=x;Object.defineProperty(d,"__esModule",{value:!0})})

package.json

 {
   "name": "troika-2d",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "Troika 2D",
@@ -17,5 +17,5 @@ "author": "Jason Johnston <[e-mail]>",
   "dependencies": {
-    "troika-core": "^0.42.0"
+    "troika-core": "^0.43.0"
   },
-  "gitHead": "0f7129cd43fc58f5c6a5f6f20f2d0941f9f36510"
+  "gitHead": "497fa534d015bc8f746c7d00ec7bfde1df92f491"
 }

README.md

@@ -0,0 +0,0 @@ # `troika-2d`

src/facade/Group2DFacade.js

@@ -0,0 +0,0 @@ import Object2DFacade from './Object2DFacade.js'

src/facade/HtmlOverlay2DFacade.js

@@ -0,0 +0,0 @@ import Object2DFacade from './Object2DFacade.js'

src/facade/Object2DFacade.js

@@ -0,0 +0,0 @@ import { PointerEventTarget } from 'troika-core'

src/facade/Text2DFacade.js

@@ -0,0 +0,0 @@ import { utils } from 'troika-core'

src/facade/World2DFacade.js

@@ -0,0 +0,0 @@ import { WorldBaseFacade } from 'troika-core'

src/HitTestContext.js

@@ -0,0 +0,0 @@ /**

src/index.js

@@ -0,0 +0,0 @@ // Troika 2D exports

src/react/Canvas2D.js

@@ -0,0 +0,0 @@ import React from 'react'

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

54337

decreased by-5.86%

Lines of code

1252

decreased by-4.28%

Dependency changes

• + Addedtroika-animation@0.43.0(transitive)

• + Addedtroika-core@0.43.0(transitive)

• - Removedtroika-animation@0.42.0(transitive)

• - Removedtroika-core@0.42.0(transitive)

• Updatedtroika-core@^0.43.0