troika-2d - npm Package Compare versions

Comparing version 0.15.3 to 0.15.6

dist/troika-2d.esm.js

@@ -456,3 +456,3 @@ import { PointerEventTarget, utils, WorldBaseFacade, ReactCanvasBase } from 'troika-core';
    */
-  World2DFacade.prototype.getFacadesAtEvent = function getFacadesAtEvent (e) {
+  World2DFacade.prototype.getFacadesAtEvent = function getFacadesAtEvent (e, filterFn) {
     var canvasRect = e.target.getBoundingClientRect(); //e.target is the canvas
@@ -465,3 +465,3 @@ var x = e.clientX - canvasRect.left;
     traverseInZOrder(this.getChildByKey('bg'), function (facade) {
-      if (facade.hitTest(x, y)) {
+      if ((!filterFn || filterFn(facade)) && facade.hitTest(x, y)) {
         if (!hits) { hits = Object.create(null); }
@@ -468,0 +468,0 @@ hits[facade.$facadeId] = {

dist/troika-2d.umd.js

@@ -460,3 +460,3 @@ (function (global, factory) {
      */
-    World2DFacade.prototype.getFacadesAtEvent = function getFacadesAtEvent (e) {
+    World2DFacade.prototype.getFacadesAtEvent = function getFacadesAtEvent (e, filterFn) {
       var canvasRect = e.target.getBoundingClientRect(); //e.target is the canvas
@@ -469,3 +469,3 @@ var x = e.clientX - canvasRect.left;
       traverseInZOrder(this.getChildByKey('bg'), function (facade) {
-        if (facade.hitTest(x, y)) {
+        if ((!filterFn || filterFn(facade)) && facade.hitTest(x, y)) {
           if (!hits) { hits = Object.create(null); }
@@ -472,0 +472,0 @@ hits[facade.$facadeId] = {

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

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

package.json

 {
   "name": "troika-2d",
-  "version": "0.15.3",
+  "version": "0.15.6",
   "description": "Troika 2D",
@@ -18,5 +18,5 @@ "author": "Jason Johnston <[e-mail]>",
   "dependencies": {
-    "troika-core": "^0.15.3"
+    "troika-core": "^0.15.6"
   },
-  "gitHead": "5286e414c66aa8c471091aaaea28c08b86bed0f6"
+  "gitHead": "13acfe60f037e5156d7b29940ea87c66b3e71ead"
 }

src/facade/World2DFacade.js

@@ -117,3 +117,3 @@ import { WorldBaseFacade } from 'troika-core'
    */
-  getFacadesAtEvent(e) {
+  getFacadesAtEvent(e, filterFn) {
     const canvasRect = e.target.getBoundingClientRect() //e.target is the canvas
@@ -126,3 +126,3 @@ let x = e.clientX - canvasRect.left
     traverseInZOrder(this.getChildByKey('bg'), facade => {
-      if (facade.hitTest(x, y)) {
+      if ((!filterFn || filterFn(facade)) && facade.hitTest(x, y)) {
         if (!hits) hits = Object.create(null)
@@ -129,0 +129,0 @@ hits[facade.$facadeId] = {

No alert changes

Improved metrics

Total package byte prevSize

56900

increased by0.26%

Dependency changes

• Updatedtroika-core@^0.15.6