pure-canvas - npm Package Compare versions

Comparing version 0.1.11 to 0.2.0

lib/Layer.js

@@ -21,2 +21,8 @@ "use strict";
     };
+    Layer.prototype.drawDeferred = function (context, stepAccumulator, commitAccumulator) {
+        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            child.drawDeferred(context, stepAccumulator, commitAccumulator);
+        }
+    };
     Layer.prototype.getBounds = function () {
@@ -23,0 +29,0 @@ var minX = Number.POSITIVE_INFINITY;

lib/LayerCached.js

@@ -28,2 +28,28 @@ "use strict";
     };
+    LayerCached.prototype.drawDeferred = function (context, stepAccumulator, commitAccumulator) {
+        var _this = this;
+        var _a = this.getBounds(), minX = _a.minX, minY = _a.minY, maxX = _a.maxX, maxY = _a.maxY;
+        if (!this.cache) {
+            this.cache = document.createElement('canvas');
+            this.cache.width = maxX - minX;
+            this.cache.height = maxY - minY;
+            var cacheContext_1 = this.cache.getContext('2d');
+            var cacheStepAccumulator = [];
+            var cacheCommitAccumulator = [];
+            cacheStepAccumulator.push(function () { return cacheContext_1.translate(-minX, -minY); });
+            _super.prototype.drawDeferred.call(this, cacheContext_1, cacheStepAccumulator, cacheCommitAccumulator);
+            cacheStepAccumulator.push(function () { return cacheContext_1.translate(minX, minY); });
+            for (var _i = 0, cacheStepAccumulator_1 = cacheStepAccumulator; _i < cacheStepAccumulator_1.length; _i++) {
+                var cacheStep = cacheStepAccumulator_1[_i];
+                stepAccumulator.push(cacheStep);
+            }
+            for (var _b = 0, cacheCommitAccumulator_1 = cacheCommitAccumulator; _b < cacheCommitAccumulator_1.length; _b++) {
+                var cacheCommit = cacheCommitAccumulator_1[_b];
+                stepAccumulator.push(cacheCommit);
+            }
+        }
+        commitAccumulator.push(function () {
+            context.drawImage(_this.cache, minX, minY, maxX - minX, maxY - minY);
+        });
+    };
     return LayerCached;
@@ -30,0 +56,0 @@ }(Layer_1.default));

lib/NodeLeaf.js

@@ -15,2 +15,6 @@ "use strict";
     }
+    NodeLeaf.prototype.drawDeferred = function (context, stepAccumulator, commitAccumulator) {
+        var _this = this;
+        commitAccumulator.push(function () { return _this.draw(context); });
+    };
     NodeLeaf.prototype.index = function (action, zIndex) {
@@ -17,0 +21,0 @@ action(this, zIndex, emptyTransformers);

lib/Stage.js

@@ -73,6 +73,24 @@ "use strict";
     Stage.prototype.render = function () {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.internalLayer.draw(this.context);
-        this.index();
+        var _a = this.renderDeferred(), steps = _a.steps, commit = _a.commit;
+        for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
+            var step = steps_1[_i];
+            step();
+        }
+        commit();
     };
+    Stage.prototype.renderDeferred = function () {
+        var _this = this;
+        var stepAccumulator = [];
+        var commitAccumulator = [];
+        this.internalLayer.drawDeferred(this.context, stepAccumulator, commitAccumulator);
+        var commit = function () {
+            _this.context.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
+            for (var _i = 0, commitAccumulator_1 = commitAccumulator; _i < commitAccumulator_1.length; _i++) {
+                var commit_1 = commitAccumulator_1[_i];
+                commit_1();
+            }
+            _this.index();
+        };
+        return { steps: stepAccumulator, commit: commit };
+    };
     Stage.prototype.index = function () {
@@ -79,0 +97,0 @@ var _this = this;

lib/Transformer.js

@@ -13,2 +13,13 @@ "use strict";
     }
+    Transformer.prototype.draw = function (context) {
+        this.preDraw(context);
+        _super.prototype.draw.call(this, context);
+        this.postDraw(context);
+    };
+    Transformer.prototype.drawDeferred = function (context, stepAccumulator, commitAccumulator) {
+        var _this = this;
+        commitAccumulator.push(function () { return _this.preDraw(context); });
+        _super.prototype.drawDeferred.call(this, context, stepAccumulator, commitAccumulator);
+        commitAccumulator.push(function () { return _this.postDraw(context); });
+    };
     Transformer.prototype.index = function (action, zIndex) {
@@ -20,7 +31,2 @@ var _this = this;
     };
-    Transformer.prototype.draw = function (context) {
-        this.preDraw(context);
-        _super.prototype.draw.call(this, context);
-        this.postDraw(context);
-    };
     return Transformer;
@@ -27,0 +33,0 @@ }(Layer_1.default));

package.json

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

src/Layer.ts

@@ -18,2 +18,8 @@ import Node, {Point, Bounds} from './Node';
 
+    drawDeferred(context: CanvasRenderingContext2D, stepAccumulator: Array<() => void>, commitAccumulator: Array<() => void>): void {
+        for (const child of this.children) {
+            child.drawDeferred(context, stepAccumulator, commitAccumulator);
+        }
+    }
+
     getBounds(): Bounds {
@@ -20,0 +26,0 @@ let minX = Number.POSITIVE_INFINITY;

src/LayerCached.ts

@@ -21,2 +21,30 @@ import Layer from './Layer';
     }
+
+    drawDeferred(context: CanvasRenderingContext2D, stepAccumulator: Array<() => void>, commitAccumulator: Array<() => void>): void {
+        const {minX, minY, maxX, maxY} = this.getBounds();
+
+        if (!this.cache) {
+            this.cache = document.createElement('canvas');
+            this.cache.width = maxX - minX;
+            this.cache.height = maxY - minY;
+            const cacheContext = this.cache.getContext('2d');
+            const cacheStepAccumulator: Array<() => void> = [];
+            const cacheCommitAccumulator: Array<() => void> = [];
+
+            cacheStepAccumulator.push(() => cacheContext.translate(-minX, -minY));
+            super.drawDeferred(cacheContext, cacheStepAccumulator, cacheCommitAccumulator);
+            cacheStepAccumulator.push(() => cacheContext.translate(minX, minY));
+
+            for (const cacheStep of cacheStepAccumulator) {
+                stepAccumulator.push(cacheStep);
+            }
+            for (const cacheCommit of cacheCommitAccumulator) {
+                stepAccumulator.push(cacheCommit);
+            }
+        }
+
+        commitAccumulator.push(() => {
+            context.drawImage(this.cache, minX, minY, maxX - minX, maxY - minY);
+        });
+    }
 };

src/Node.ts

@@ -18,2 +18,4 @@ export interface Bounds {
 
+    drawDeferred(context: CanvasRenderingContext2D, stepAccumulator: Array<() => void>, commitAccumulator: Array<() => void>): void;
+
     intersection(point: Point): Node;
@@ -20,0 +22,0 @@

src/NodeBasic.ts

@@ -10,2 +10,4 @@ import Node, {Bounds, Point} from './Node';
 
+    abstract drawDeferred(context: CanvasRenderingContext2D, stepAccumulator: Array<() => void>, commitAccumulator: Array<() => void>): void;
+
     abstract intersection(point: Point): Node;
@@ -12,0 +14,0 @@

src/NodeLeaf.ts

@@ -16,2 +16,6 @@ import Node, {Point, Bounds} from './Node';
 
+    drawDeferred(context: CanvasRenderingContext2D, stepAccumulator: Array<() => void>, commitAccumulator: Array<() => void>): void {
+        commitAccumulator.push(() => this.draw(context));
+    }
+
     index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): void {
@@ -18,0 +22,0 @@ action(this, zIndex, emptyTransformers);

src/Stage.ts

@@ -88,7 +88,25 @@ import Node, {Point} from './Node';
     render(): void {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.internalLayer.draw(this.context);
-        this.index();
+        const {steps, commit} = this.renderDeferred();
+        for (const step of steps) {
+            step();
+        }
+        commit();
     }
 
+    renderDeferred(): {steps: Array<() => void>, commit: () => void} {
+        const stepAccumulator: Array<() => void> = [];
+        const commitAccumulator: Array<() => void> = [];
+        this.internalLayer.drawDeferred(this.context, stepAccumulator, commitAccumulator);
+
+        const commit = () => {
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            for (const commit of commitAccumulator) {
+                commit();
+            }
+            this.index();
+        };
+
+        return {steps: stepAccumulator, commit};
+    }
+
     index(): void {
@@ -95,0 +113,0 @@ this.tree.clear();

src/Transformer.ts

@@ -13,2 +13,14 @@ import Node, {Point} from './Node';
 
+    draw(context: CanvasRenderingContext2D): void {
+        this.preDraw(context);
+        super.draw(context);
+        this.postDraw(context);
+    }
+
+    drawDeferred(context: CanvasRenderingContext2D, stepAccumulator: Array<() => void>, commitAccumulator: Array<() => void>): void {
+        commitAccumulator.push(() => this.preDraw(context));
+        super.drawDeferred(context, stepAccumulator, commitAccumulator);
+        commitAccumulator.push(() => this.postDraw(context));
+    }
+
     index(action: (node: Node, zIndex: number, transformers: Array<Transformer>) => void, zIndex: number): void {
@@ -19,10 +31,4 @@ super.index((node: Node, zIndex: number, transformers: Array<Transformer>) => {
     }
-
-    draw(context: CanvasRenderingContext2D): void {
-        this.preDraw(context);
-        super.draw(context);
-        this.postDraw(context);
-    }
 }
 
 export default Transformer;

No alert changes

Improved metrics

Total package byte prevSize

169715

increased by29.29%

Lines of code

2007

increased by5.97%

No dependency changes