pure-canvas - npm Package Compare versions

Comparing version 0.4.6 to 0.5.0

lib/Layer.js

@@ -76,5 +76,6 @@ "use strict";
             if (child.isHitEnabled()) {
-                child.index(action, zIndex++);
+                zIndex = child.index(action, zIndex) + 1;
             }
         }
+        return zIndex;
     };
@@ -81,0 +82,0 @@ Layer.prototype.isHitEnabled = function () {

lib/LayerCached.js

@@ -8,2 +8,4 @@ "use strict";
 var Layer_1 = require('./Layer');
+var TreeManager_1 = require('./TreeManager');
+var emptyTransformers = [];
 var LayerCached = (function (_super) {
@@ -15,2 +17,3 @@ __extends(LayerCached, _super);
         this.caching = false;
+        this.indexing = false;
         this.clipRegion = clipRegion;
@@ -77,2 +80,20 @@ }
     };
+    LayerCached.prototype.index = function (action, zIndex) {
+        if (this.indexing) {
+            return _super.prototype.index.call(this, action, zIndex);
+        }
+        else {
+            action(this, zIndex, emptyTransformers);
+            return zIndex;
+        }
+    };
+    LayerCached.prototype.intersection = function (point) {
+        if (!this.treeManager) {
+            this.indexing = true;
+            this.treeManager = new TreeManager_1.default(this);
+            this.treeManager.reindex();
+            this.indexing = false;
+        }
+        return this.treeManager.intersection(point);
+    };
     return LayerCached;
@@ -79,0 +100,0 @@ }(Layer_1.default));

lib/NodeLeaf.js

@@ -21,2 +21,3 @@ "use strict";
         action(this, zIndex, emptyTransformers);
+        return zIndex;
     };
@@ -23,0 +24,0 @@ NodeLeaf.prototype.isHitEnabled = function () {

lib/Stage.js

@@ -9,3 +9,3 @@ "use strict";
 var Layer_1 = require('./Layer');
-var rbush = require('rbush');
+var TreeManager_1 = require('./TreeManager');
 var Stage = (function (_super) {
@@ -17,3 +17,3 @@ __extends(Stage, _super);
         this.internalLayer = new Layer_1.default();
-        this.tree = rbush();
+        this.treeManager = new TreeManager_1.default(this.internalLayer);
         this.handleMouseDown = function (event) {
@@ -59,12 +59,4 @@ _this.emitHitEvent('mousedown', event);
             if (!didSearch) {
-                var point_1 = _this.eventToElementCoordinate(event);
-                var results = _this.tree
-                    .search({ minX: point_1.x, minY: point_1.y, maxX: point_1.x, maxY: point_1.y })
-                    .sort(function (a, b) { return b.zIndex - a.zIndex; })
-                    .map(function (indexedNode) {
-                    var untransformedPoint = indexedNode.transformers.reduceRight(function (point, transformer) { return transformer.untransform(point); }, point_1);
-                    return indexedNode.node.intersection(untransformedPoint);
-                })
-                    .filter(Boolean);
-                result = results[0];
+                var point = _this.eventToElementCoordinate(event);
+                result = _this.treeManager.intersection(point);
                 didSearch = true;
@@ -106,19 +98,3 @@ }
     Stage.prototype.index = function () {
-        var _this = this;
-        this.tree.clear();
-        this.internalLayer.index(function (node, zIndex, transformers) {
-            var bounds = node.getBounds();
-            var _a = transformers.reduce(function (point, transformer) { return transformer.transform(point); }, { x: bounds.minX, y: bounds.minY }), x1 = _a.x, y1 = _a.y;
-            var _b = transformers.reduce(function (point, transformer) { return transformer.transform(point); }, { x: bounds.maxX, y: bounds.maxY }), x2 = _b.x, y2 = _b.y;
-            var _c = transformers.reduce(function (point, transformer) { return transformer.transform(point); }, { x: bounds.minX, y: bounds.maxY }), x3 = _c.x, y3 = _c.y;
-            var _d = transformers.reduce(function (point, transformer) { return transformer.transform(point); }, { x: bounds.maxX, y: bounds.minY }), x4 = _d.x, y4 = _d.y;
-            var minX = Math.min(x1, x2, x3, x4);
-            var minY = Math.min(y1, y2, y3, y4);
-            var maxX = Math.max(x1, x2, x3, x4);
-            var maxY = Math.max(y1, y2, y3, y4);
-            _this.tree.insert({
-                minX: minX, minY: minY, maxX: maxX, maxY: maxY,
-                transformers: transformers, node: node, zIndex: zIndex
-            });
-        }, 0);
+        this.treeManager.reindex();
     };
@@ -125,0 +101,0 @@ Stage.prototype.add = function (node) {

lib/Transformer.js

@@ -26,3 +26,3 @@ "use strict";
         var _this = this;
-        _super.prototype.index.call(this, function (node, zIndex, transformers) {
+        return _super.prototype.index.call(this, function (node, zIndex, transformers) {
             action(node, zIndex, transformers.concat([_this]));
@@ -29,0 +29,0 @@ }, zIndex);

package.json

 {
   "name": "pure-canvas",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "TODO",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/Layer.ts

@@ -74,8 +74,9 @@ import Node, {Point, Bounds} from './Node';
 
-    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): void {
+    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): number {
         for (const child of this.children) {
             if (child.isHitEnabled()) {
-                child.index(action, zIndex++);
+                zIndex = child.index(action, zIndex) + 1;
             }
         }
+        return zIndex;
     }
@@ -82,0 +83,0 @@

src/LayerCached.ts

@@ -1,7 +0,13 @@
-import {Bounds} from './Node';
+import Node, {Bounds, Point} from './Node';
 import Layer from './Layer';
+import Transformer from './Transformer';
+import TreeManager from './TreeManager';
 
+const emptyTransformers: Array<Transformer> = [];
+
 export default class LayerCached extends Layer {
     private caching: boolean = false;
 
+    private indexing: boolean = false;
+
     private cache: HTMLCanvasElement;
@@ -11,2 +17,4 @@
 
+    private treeManager: TreeManager;
+
     constructor({clipRegion}: {clipRegion?: Bounds} = {}) {
@@ -76,2 +84,22 @@ super();
     }
+
+    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): number {
+        if (this.indexing) {
+            return super.index(action, zIndex);
+        } else {
+            action(this, zIndex, emptyTransformers);
+            return zIndex;
+        }
+    }
+
+    intersection(point: Point): Node {
+        if (!this.treeManager) {
+            this.indexing = true;
+            this.treeManager = new TreeManager(this);
+            this.treeManager.reindex();
+            this.indexing = false;
+        }
+
+        return this.treeManager.intersection(point);
+    }
 };

src/NodeBasic.ts

@@ -26,3 +26,3 @@ import Node, {Bounds, Point} from './Node';
 
-    abstract index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): void;
+    abstract index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): number;
 
@@ -29,0 +29,0 @@ abstract isHitEnabled(): boolean;

src/NodeIndexable.ts

@@ -5,5 +5,5 @@ import Node from './Node';
 interface NodeIndexable extends Node {
-    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): void;
+    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): number;
 }
 
 export default NodeIndexable;

src/NodeLeaf.ts

@@ -20,4 +20,5 @@ import Node, {Point, Bounds} from './Node';
 
-    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): void {
+    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): number {
         action(this, zIndex, emptyTransformers);
+        return zIndex;
     }
@@ -24,0 +25,0 @@

src/Stage.ts

@@ -1,15 +0,8 @@
-import Node, {Point} from './Node';
+import {EventEmitter} from 'eventemitter3';
+import Node from './Node';
 import NodeIndexable from './NodeIndexable';
 import NodeCollection from './NodeCollection';
-import Transformer from './Transformer';
-import {EventEmitter} from 'eventemitter3';
 import Layer from './Layer';
-import * as rbush from 'rbush';
+import TreeManager from './TreeManager';
 
-interface IndexedNode extends rbush.BBox {
-    transformers: Array<Transformer>;
-    node: Node;
-    zIndex: number;
-}
-
 export default class Stage extends EventEmitter implements NodeCollection {
@@ -22,3 +15,3 @@ private canvas: HTMLCanvasElement;
 
-    private tree: rbush.RBush<IndexedNode> = rbush<IndexedNode>();
+    private treeManager: TreeManager = new TreeManager(this.internalLayer);
 
@@ -57,11 +50,3 @@ constructor(canvas: HTMLCanvasElement) {
                 const point = this.eventToElementCoordinate(event);
-                const results = this.tree
-                    .search({minX: point.x, minY: point.y, maxX: point.x, maxY: point.y})
-                    .sort((a: IndexedNode, b: IndexedNode) => b.zIndex - a.zIndex)
-                    .map((indexedNode: IndexedNode) => {
-                        const untransformedPoint = indexedNode.transformers.reduceRight((point: Point, transformer: Transformer) => transformer.untransform(point), point);
-                        return indexedNode.node.intersection(untransformedPoint);
-                    })
-                    .filter(Boolean);
-                result = results[0];
+                result = this.treeManager.intersection(point);
                 didSearch = true;
@@ -119,18 +104,3 @@ }
     index(): void {
-        this.tree.clear();
-        this.internalLayer.index((node: Node, zIndex: number, transformers: Array<Transformer>) => {
-            const bounds = node.getBounds();
-            const {x: x1, y: y1} = transformers.reduce((point: Point, transformer: Transformer) => transformer.transform(point), {x: bounds.minX, y: bounds.minY});
-            const {x: x2, y: y2} = transformers.reduce((point: Point, transformer: Transformer) => transformer.transform(point), {x: bounds.maxX, y: bounds.maxY});
-            const {x: x3, y: y3} = transformers.reduce((point: Point, transformer: Transformer) => transformer.transform(point), {x: bounds.minX, y: bounds.maxY});
-            const {x: x4, y: y4} = transformers.reduce((point: Point, transformer: Transformer) => transformer.transform(point), {x: bounds.maxX, y: bounds.minY});
-            const minX = Math.min(x1, x2, x3, x4);
-            const minY = Math.min(y1, y2, y3, y4);
-            const maxX = Math.max(x1, x2, x3, x4);
-            const maxY = Math.max(y1, y2, y3, y4);
-            this.tree.insert({
-                minX, minY, maxX, maxY,
-                transformers, node, zIndex
-            });
-        }, 0);
+        this.treeManager.reindex();
     }
@@ -137,0 +107,0 @@

src/Transformer.ts

@@ -25,4 +25,4 @@ import Node, {Point} from './Node';
 
-    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): void {
-        super.index((node: Node, zIndex: number, transformers: Array<Transformer>) => {
+    index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): number {
+        return super.index((node: Node, zIndex: number, transformers: Array<Transformer>) => {
             action(node, zIndex, [...transformers, this]);
@@ -29,0 +29,0 @@ }, zIndex);

No alert changes

Improved metrics

Total package byte prevSize

207428

increased by3.94%

Number of package files

88

increased by7.32%

Lines of code

2578

increased by3.62%

No dependency changes