pure-canvas - npm Package Compare versions

Comparing version 0.5.15 to 0.5.16

lib/Layer.js

@@ -5,7 +5,10 @@ "use strict";
 class Layer extends NodeBase_1.default {
-    constructor() {
+    constructor(children = []) {
         super();
         this.hitEnabled = true;
-        this.children = [];
+        this.children = children;
     }
+    setChildren(children) {
+        this.children = children;
+    }
     draw(context) {
@@ -17,3 +20,3 @@ for (const child of this.children) {
     steps() {
-        const generators = this.children.map((child) => child.steps());
+        const generators = Array.from(this.children).map((child) => child.steps());
         let index = 0;
@@ -27,3 +30,3 @@ return (context) => {
             else {
-                if (index < this.children.length) {
+                if (index < generators.length) {
                     if (generators[index]()) {
@@ -34,3 +37,3 @@ index += 1;
             }
-            return index >= this.children.length;
+            return index >= generators.length;
         };
@@ -52,23 +55,5 @@ }
     }
-    add(node) {
-        this.children.push(node);
-        return this.children.length - 1;
-    }
-    remove(a) {
-        if (typeof a === 'number') {
-            this.children.splice(a, 1);
-        }
-        else {
-            this.remove(this.children.indexOf(a));
-        }
-    }
-    removeAll() {
-        this.children = [];
-    }
-    count() {
-        return this.children.length;
-    }
     intersection(point) {
         // Visit children in reverse order: the ones drawn last must be checked first
-        for (const child of this.children.slice().reverse()) {
+        for (const child of Array.from(this.children).reverse()) {
             if (child.isHitEnabled()) {
@@ -75,0 +60,0 @@ const intersection = child.intersection(point);

lib/LayerCached.js

@@ -12,29 +12,14 @@ "use strict";
     }
-    invalidateAll() {
-        this.invalidateBuffer();
-        this.invalidateBounds();
-        this.invalidateIndex();
-    }
-    invalidateBuffer() {
-        this.cache = undefined;
-        this.generator = undefined;
-    }
-    invalidateIndex() {
-        this.treeManager = undefined;
-        this.indexFinished = false;
-    }
-    invalidateBounds() {
-        this.cachedBounds = undefined;
-    }
     getBounds() {
         if (!this.cachedBounds) {
             if (this.clipRegion) {
-                const { minX: clipMinX, minY: clipMinY, maxX: clipMaxX, maxY: clipMaxY } = this.clipRegion;
-                const { minX, minY, maxX, maxY } = super.getBounds();
-                this.cachedBounds = {
-                    minX: Math.max(minX, clipMinX),
-                    minY: Math.max(minY, clipMinY),
-                    maxX: Math.min(maxX, clipMaxX),
-                    maxY: Math.min(maxY, clipMaxY)
-                };
+                // const {minX: clipMinX, minY: clipMinY, maxX: clipMaxX, maxY: clipMaxY} = this.clipRegion;
+                // const {minX, minY, maxX, maxY} = super.getBounds();
+                // this.cachedBounds = {
+                //     minX: Math.max(minX, clipMinX),
+                //     minY: Math.max(minY, clipMinY),
+                //     maxX: Math.min(maxX, clipMaxX),
+                //     maxY: Math.min(maxY, clipMaxY)
+                // };
+                this.cachedBounds = this.clipRegion;
             }
@@ -76,5 +61,8 @@ else {
             };
+            const children = this.children[Symbol.iterator]();
             let zIndex = 0;
+            let nextChild;
             let next;
-            let index = 0;
+            let first = true;
+            let last = false;
             this.generator = (context) => {
@@ -93,26 +81,28 @@ if (this.cache) {
                         if (!next) {
-                            if (index === 0) {
+                            if (first) {
                                 cacheContext.translate(-minX, -minY);
+                                first = false;
                             }
-                            if (index < this.children.length) {
-                                next = this.children[index++].steps();
+                            nextChild = children.next();
+                            if (!nextChild.done) {
+                                next = nextChild.value.steps();
                             }
+                            else {
+                                cacheContext.translate(minX, minY);
+                                this.cache = cache;
+                                this.indexFinished = true;
+                            }
                         }
                         if (next && next()) {
                             next(cacheContext);
-                            next = null;
                             if (!this.indexFinished) {
-                                const child = this.children[index - 1];
-                                if (child.isHitEnabled()) {
-                                    zIndex = child.index(action, zIndex, []) + 1;
+                                if (nextChild.value.isHitEnabled()) {
+                                    zIndex = nextChild.value.index(action, zIndex, []) + 1;
                                 }
                             }
-                            if (index === this.children.length) {
-                                cacheContext.translate(minX, minY);
-                                this.cache = cache;
-                                this.indexFinished = true;
-                            }
+                            next = null;
+                            nextChild = null;
                         }
                     }
-                    return !next && index >= this.children.length;
+                    return !next && last;
                 }
@@ -128,3 +118,3 @@ };
     intersection(point) {
-        if (!this.indexFinished) {
+        if (!this.treeManager) {
             this.treeManager = new TreeManager_1.default();
@@ -144,19 +134,2 @@ const action = (node, zIndex, transformers) => {
     }
-    add(node) {
-        this.invalidateAll();
-        return super.add(node);
-    }
-    remove(a) {
-        this.invalidateAll();
-        super.remove(a);
-    }
-    removeAll() {
-        this.invalidateAll();
-        super.removeAll();
-    }
-    setClipRegion(clipRegion) {
-        this.invalidateBounds();
-        this.invalidateBuffer();
-        this.clipRegion = clipRegion;
-    }
 }
@@ -163,0 +136,0 @@ exports.default = LayerCached;

package.json

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

src/Layer.ts

 import Node, {Point, Bounds} from './Node';
-import NodeCollection from './NodeCollection';
 import NodeIndexable from './NodeIndexable';
@@ -7,11 +6,16 @@ import NodeBase from './NodeBase';
 
-class Layer extends NodeBase implements NodeCollection {
+class Layer extends NodeBase {
     private hitEnabled: boolean = true;
 
-    protected children: Array<NodeIndexable> = [];
+    protected children: Iterable<NodeIndexable>;
 
-    constructor() {
+    constructor(children: Iterable<NodeIndexable> = []) {
         super();
+        this.children = children;
     }
 
+    setChildren(children: Iterable<NodeIndexable>) {
+        this.children = children;
+    }
+
     draw(context: CanvasRenderingContext2D): void {
@@ -24,3 +28,3 @@ for (const child of this.children) {
     steps(): (context?: CanvasRenderingContext2D) => boolean {
-        const generators = this.children.map((child) => child.steps());
+        const generators = Array.from(this.children).map((child) => child.steps());
         let index = 0;
@@ -33,3 +37,3 @@ return (context) => {
             } else {
-                if (index < this.children.length) {
+                if (index < generators.length) {
                     if (generators[index]()) {
@@ -40,3 +44,3 @@ index += 1;
             }
-            return index >= this.children.length;
+            return index >= generators.length;
         };
@@ -62,26 +66,5 @@ }
 
-    add(node: NodeIndexable): number {
-        this.children.push(node);
-        return this.children.length - 1;
-    }
-
-    remove(a: number | NodeIndexable): void {
-        if (typeof a === 'number') {
-            this.children.splice(a, 1);
-        } else {
-            this.remove(this.children.indexOf(a));
-        }
-    }
-
-    removeAll(): void {
-        this.children = [];
-    }
-
-    count(): number {
-        return this.children.length;
-    }
-
     intersection(point: Point): Node {
         // Visit children in reverse order: the ones drawn last must be checked first
-        for (const child of this.children.slice().reverse()) {
+        for (const child of Array.from(this.children).reverse()) {
             if (child.isHitEnabled()) {
@@ -88,0 +71,0 @@ const intersection = child.intersection(point);

src/LayerCached.ts

@@ -13,3 +13,3 @@ import Node, {Point, Bounds} from './Node';
     private generator: (context?: CanvasRenderingContext2D) => boolean;
-    
+
     private treeManager: TreeManager;
@@ -28,33 +28,14 @@
 
-    invalidateAll(): void {
-        this.invalidateBuffer();
-        this.invalidateBounds();
-        this.invalidateIndex();
-    }
-
-    invalidateBuffer(): void {
-        this.cache = undefined;
-        this.generator = undefined;
-    }
-
-    invalidateIndex(): void {
-        this.treeManager = undefined;
-        this.indexFinished = false;
-    }
-
-    invalidateBounds(): void {
-        this.cachedBounds = undefined;
-    }
-
     getBounds(): Bounds {
         if (!this.cachedBounds) {
             if (this.clipRegion) {
-                const {minX: clipMinX, minY: clipMinY, maxX: clipMaxX, maxY: clipMaxY} = this.clipRegion;
-                const {minX, minY, maxX, maxY} = super.getBounds();
-                this.cachedBounds = {
-                    minX: Math.max(minX, clipMinX),
-                    minY: Math.max(minY, clipMinY),
-                    maxX: Math.min(maxX, clipMaxX),
-                    maxY: Math.min(maxY, clipMaxY)
-                };
+                // const {minX: clipMinX, minY: clipMinY, maxX: clipMaxX, maxY: clipMaxY} = this.clipRegion;
+                // const {minX, minY, maxX, maxY} = super.getBounds();
+                // this.cachedBounds = {
+                //     minX: Math.max(minX, clipMinX),
+                //     minY: Math.max(minY, clipMinY),
+                //     maxX: Math.min(maxX, clipMaxX),
+                //     maxY: Math.min(maxY, clipMaxY)
+                // };
+                this.cachedBounds = this.clipRegion;
             } else {
@@ -96,6 +77,9 @@ this.cachedBounds = super.getBounds();
             };
+
+            const children = this.children[Symbol.iterator]();
             let zIndex = 0;
-
+            let nextChild: IteratorResult<NodeIndexable>;
             let next: (context?: CanvasRenderingContext2D) => boolean;
-            let index: number = 0;
+            let first: boolean = true;
+            let last: boolean = false;
             this.generator = (context) => {
@@ -112,7 +96,13 @@ if (this.cache) {
                         if (!next) {
-                            if (index === 0) {
+                            if (first) {
                                 cacheContext.translate(-minX, -minY);
+                                first = false;
                             }
-                            if (index < this.children.length) {
-                                next = this.children[index++].steps();
+                            nextChild = children.next();
+                            if (!nextChild.done) {
+                                next = nextChild.value.steps();
+                            } else {
+                                cacheContext.translate(minX, minY);
+                                this.cache = cache;
+                                this.indexFinished = true;
                             }
@@ -122,19 +112,12 @@ }
                             next(cacheContext);
-                            next = null;
-
                             if (!this.indexFinished) {
-                                const child = this.children[index - 1];
-                                if (child.isHitEnabled()) {
-                                    zIndex = child.index(action, zIndex, []) + 1;
+                                if (nextChild.value.isHitEnabled()) {
+                                    zIndex = nextChild.value.index(action, zIndex, []) + 1;
                                 }
                             }
-
-                            if (index === this.children.length) {
-                                cacheContext.translate(minX, minY);
-                                this.cache = cache;
-                                this.indexFinished = true;
-                            }
+                            next = null;
+                            nextChild = null;
                         }
                     }
-                    return !next && index >= this.children.length;
+                    return !next && last;
                 }
@@ -152,3 +135,3 @@ };
     intersection(point: Point): Node {
-        if (!this.indexFinished) {
+        if (!this.treeManager) {
             this.treeManager = new TreeManager();
@@ -169,23 +152,2 @@ const action = (node: Node, zIndex: number, transformers: Array<Transformer>) => {
     }
-
-    add(node: NodeIndexable): number {
-        this.invalidateAll();
-        return super.add(node);
-    }
-
-    remove(a: number | NodeIndexable): void {
-        this.invalidateAll();
-        super.remove(a);
-    }
-
-    removeAll(): void {
-        this.invalidateAll();
-        super.removeAll();
-    }
-
-    setClipRegion(clipRegion: Bounds): void {
-        this.invalidateBounds();
-        this.invalidateBuffer();
-        this.clipRegion = clipRegion;
-    }
 };

No alert changes

Worsened metrics

Total package byte prevSize

192253

decreased by-1.46%

Number of package files

94

decreased by-1.05%

Lines of code

2477

decreased by-4.33%

No dependency changes