pure-canvas - npm Package Compare versions

Comparing version 0.5.20 to 0.6.0

lib/Empty.js

@@ -11,3 +11,3 @@ "use strict";
     intersection({ x, y }) {
-        return null;
+        return undefined;
     }
@@ -14,0 +14,0 @@ }

lib/Image.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const NodeFixedBounds_1 = require("./NodeFixedBounds");
+const util_1 = require("./util");
 class Image extends NodeFixedBounds_1.default {
@@ -31,3 +32,3 @@ constructor({ x = 0, y = 0, width, height, image }) {
                 hitCanvas.height = height;
-                const hitContext = hitCanvas.getContext('2d');
+                const hitContext = util_1.getSafeContext(hitCanvas);
                 try {
@@ -34,0 +35,0 @@ hitContext.drawImage(image, 0, 0, width, height);

lib/LayerCached.js

@@ -5,2 +5,3 @@ "use strict";
 const TreeManager_1 = require("./TreeManager");
+const util_1 = require("./util");
 class LayerCached extends Layer_1.default {
@@ -54,3 +55,3 @@ constructor({ clipRegion } = {}) {
             cache.height = height;
-            const cacheContext = cache.getContext('2d');
+            const cacheContext = util_1.getSafeContext(cache);
             if (!this.indexFinished) {
@@ -64,4 +65,4 @@ this.treeManager = new TreeManager_1.default();
             let zIndex = 0;
-            let nextChild;
-            let next;
+            let nextChild = null;
+            let next = null;
             let first = true;
@@ -97,3 +98,3 @@ let last = false;
                         }
-                        if (next && next()) {
+                        if (next && nextChild && next()) {
                             next(cacheContext);
@@ -100,0 +101,0 @@ if (!this.indexFinished) {

lib/NodeBase.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const util_1 = require("./util");
 class NodeBase {
@@ -9,3 +10,3 @@ toImage() {
         canvas.height = maxY - minY;
-        const context = canvas.getContext('2d');
+        const context = util_1.getSafeContext(canvas);
         context.translate(-minX, -minY);
@@ -12,0 +13,0 @@ this.draw(context);

lib/Stage.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const eventemitter3_1 = require("eventemitter3");
+const util_1 = require("./util");
 class Stage extends eventemitter3_1.EventEmitter {
@@ -20,3 +21,3 @@ constructor(canvas) {
         this.canvas = canvas;
-        this.context = canvas.getContext('2d');
+        this.context = util_1.getSafeContext(canvas);
         this.canvas.addEventListener('mousedown', this.handleMouseDown);
@@ -59,19 +60,21 @@ this.canvas.addEventListener('mousemove', this.handleMouseMove);
     renderAsynchronous(maxBatchTime = 10) {
-        const that = this;
-        const next = this.node.steps();
-        let done = false;
-        (function batch() {
-            if (that.nonBlockingTimeoutId) {
-                window.clearTimeout(that.nonBlockingTimeoutId);
-            }
-            const deadline = performance.now() + maxBatchTime;
-            while (!done && performance.now() < deadline) {
-                done = next();
-            }
-            that.context.clearRect(0, 0, that.canvas.width, that.canvas.height);
-            next(that.context);
-            if (!done) {
-                that.nonBlockingTimeoutId = window.setTimeout(batch, 0);
-            }
-        })();
+        if (this.node) {
+            const that = this;
+            const next = this.node.steps();
+            let done = false;
+            (function batch() {
+                if (that.nonBlockingTimeoutId) {
+                    window.clearTimeout(that.nonBlockingTimeoutId);
+                }
+                const deadline = performance.now() + maxBatchTime;
+                while (!done && performance.now() < deadline) {
+                    done = next();
+                }
+                that.context.clearRect(0, 0, that.canvas.width, that.canvas.height);
+                next(that.context);
+                if (!done) {
+                    that.nonBlockingTimeoutId = window.setTimeout(batch, 0);
+                }
+            })();
+        }
     }
@@ -78,0 +81,0 @@ get node() {

lib/Text.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const NodeFixedBounds_1 = require("./NodeFixedBounds");
+const util_1 = require("./util");
 const measurementCanvas = document.createElement('canvas');
 measurementCanvas.width = 0;
 measurementCanvas.height = 0;
-const measurementContext = measurementCanvas.getContext('2d');
+const measurementContext = util_1.getSafeContext(measurementCanvas);
 function measureWidth(font, text) {
@@ -9,0 +10,0 @@ measurementContext.font = font;

package.json

 {
   "name": "pure-canvas",
-  "version": "0.5.20",
+  "version": "0.6.0",
   "description": "TODO",
-  "main": "lib/index.js",
+  "main": "lib/Stage.js",
+  "types": "lib/Stage.d.ts",
   "scripts": {
     "build": "tsc --project tsconfig.build.json",
     "test": "tsc test/index.ts",
-    "examples": "webpack-dev-server --config webpack.config.js --content-base dist/ --hot --inline --host 0.0.0.0 --port 8888"
+    "examples": "webpack-dev-server --config webpack.config.js --content-base dist/ --hot --inline --host 0.0.0.0 --port 8080"
   },
@@ -28,11 +29,11 @@ "repository": {
     "@types/rbush": "^2.0.2",
-    "@types/react": "^15.0.38",
-    "@types/react-dom": "^15.5.1",
+    "@types/react": "^15.5.6",
+    "@types/react-dom": "^15.5.6",
+    "awesome-typescript-loader": "^3.2.3",
     "circular-dependency-plugin": "^3.0.0",
     "html-webpack-plugin": "^2.24.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^15.5.6",
+    "react-dom": "^15.5.6",
     "source-map-loader": "^0.1.5",
-    "ts-loader": "^1.0.0",
-    "typescript": "^2.4.1",
+    "typescript": "^2.5.3",
     "url-loader": "^0.5.7",
@@ -39,0 +40,0 @@ "webpack": "^1.13.3",

src/Circle.ts

@@ -57,3 +57,3 @@ import Node, {Bounds, Point} from './Node';
 
-    intersection({x, y}: Point): Node {
+    intersection({x, y}: Point): Node | undefined {
         const {x: ox, y: oy, radius, lineWidth} = this;
@@ -60,0 +60,0 @@ if ((x - ox) ** 2 + (y - oy) ** 2 <= (radius + lineWidth / 2) ** 2) {

src/Empty.ts

@@ -12,4 +12,4 @@ import Node, {Point} from './Node';
 
-    intersection({x, y}: Point): Node {
-        return null;
+    intersection({x, y}: Point): Node | undefined {
+        return undefined;
     }
@@ -16,0 +16,0 @@ }

src/Image.ts

 import Node, {Point} from './Node';
 import NodeFixedBounds from './NodeFixedBounds';
+import {getSafeContext} from './util';
 
@@ -38,3 +39,3 @@ export interface ImageParameters {
 
-    intersection({x, y}: Point): Node {
+    intersection({x, y}: Point): Node | undefined {
         const {x: ox, y: oy, width, height, image} = this;
@@ -49,3 +50,3 @@ const rx = Math.round(x - ox);
                 hitCanvas.height = height;
-                const hitContext: CanvasRenderingContext2D = hitCanvas.getContext('2d');
+                const hitContext: CanvasRenderingContext2D = getSafeContext(hitCanvas);
                 try {
@@ -52,0 +53,0 @@ hitContext.drawImage(image, 0, 0, width, height);

src/Layer.ts

@@ -62,3 +62,3 @@ import Node, {Point, Bounds} from './Node';
 
-    intersection(point: Point): Node {
+    intersection(point: Point): Node | undefined {
         // Visit children in reverse order: the ones drawn last must be checked first
@@ -65,0 +65,0 @@ for (const child of Array.from(this.children).reverse()) {

src/LayerCached.ts

@@ -6,2 +6,3 @@ import Node, {Point, Bounds} from './Node';
 import NodeIndexable from './NodeIndexable';
+import {getSafeContext} from './util';
 
@@ -69,3 +70,3 @@ export default class LayerCached extends Layer {
             cache.height = height;
-            const cacheContext = cache.getContext('2d');
+            const cacheContext = getSafeContext(cache);
             if (!this.indexFinished) {
@@ -80,4 +81,4 @@ this.treeManager = new TreeManager();
             let zIndex = 0;
-            let nextChild: IteratorResult<NodeIndexable>;
-            let next: (context?: CanvasRenderingContext2D) => boolean;
+            let nextChild: IteratorResult<NodeIndexable> | null = null;
+            let next: ((context?: CanvasRenderingContext2D) => boolean) | null = null;
             let first: boolean = true;
@@ -110,3 +111,3 @@ let last: boolean = false;
                         }
-                        if (next && next()) {
+                        if (next && nextChild && next()) {
                             next(cacheContext);
@@ -134,3 +135,3 @@ if (!this.indexFinished) {
 
-    intersection(point: Point): Node {
+    intersection(point: Point): Node | undefined {
         if (!this.treeManager) {
@@ -137,0 +138,0 @@ this.treeManager = new TreeManager();

src/Line.ts

@@ -61,3 +61,3 @@ import Node, {Bounds, Point} from './Node';
 
-    intersection({x, y}: Point): Node {
+    intersection({x, y}: Point): Node | undefined {
         const {x1, y1, x2, y2, lineWidth} = this;
@@ -64,0 +64,0 @@ const distance2 = (x2 - x1) ** 2 + (y2 - y1) ** 2;

src/LineString.ts

@@ -65,3 +65,3 @@ import Node, {Bounds, Point} from './Node';
 
-    intersection({x, y}: Point): Node {
+    intersection({x, y}: Point): Node | undefined {
         const {points, lineWidth} = this;
@@ -68,0 +68,0 @@

src/Node.ts

@@ -20,3 +20,3 @@ export interface Bounds {
 
-    intersection(point: Point): Node;
+    intersection(point: Point): Node | undefined;
 
@@ -23,0 +23,0 @@ toImage(): HTMLCanvasElement;

src/NodeBase.ts

 import Node, {Bounds, Point} from './Node';
 import NodeIndexable from './NodeIndexable';
 import Transformer from './Transformer';
+import {getSafeContext} from './util';
 
@@ -12,3 +13,3 @@ abstract class NodeBase implements NodeIndexable {
 
-    abstract intersection(point: Point): Node;
+    abstract intersection(point: Point): Node | undefined;
 
@@ -20,3 +21,3 @@ toImage(): HTMLCanvasElement {
         canvas.height = maxY - minY;
-        const context = canvas.getContext('2d');
+        const context = getSafeContext(canvas);
         context.translate(-minX, -minY);
@@ -23,0 +24,0 @@ this.draw(context);

src/NodeLeaf.ts

@@ -12,3 +12,3 @@ import Node, {Point, Bounds} from './Node';
 
-    abstract intersection(point: Point): Node;
+    abstract intersection(point: Point): Node | undefined;
 
@@ -15,0 +15,0 @@ constructor() {

src/Polygon.ts

@@ -79,3 +79,3 @@ import Node, {Bounds, Point} from './Node';
 
-    intersection({x, y}: Point): Node {
+    intersection({x, y}: Point): Node | undefined {
         const {points, lineWidth} = this;
@@ -82,0 +82,0 @@ const vertices: Array<Point> = [];

src/Rectangle.ts

@@ -61,3 +61,3 @@ import Node, {Bounds, Point} from './Node';
 
-    intersection({x: px, y: py}: Point): Node {
+    intersection({x: px, y: py}: Point): Node | undefined {
         const {minX, minY, maxX, maxY} = this.getBounds();
@@ -64,0 +64,0 @@ if (minX <= px && px <= maxX && minY <= py && py <= maxY) {

src/Scale.ts

@@ -33,3 +33,3 @@ import Node, {Bounds, Point} from './Node';
 
-    intersection(point: Point): Node {
+    intersection(point: Point): Node | undefined {
         const scaledPoint = {x: point.x / this._x, y: point.y / this._y};
@@ -36,0 +36,0 @@ return super.intersection(scaledPoint);

src/Stage.ts

 import {EventEmitter} from 'eventemitter3';
 import Node from './Node';
+import {getSafeContext} from './util';
 
@@ -16,3 +17,3 @@ export default class Stage extends EventEmitter {
         this.canvas = canvas;
-        this.context = canvas.getContext('2d');
+        this.context = getSafeContext(canvas);
 
@@ -42,3 +43,3 @@ this.canvas.addEventListener('mousedown', this.handleMouseDown);
         let didSearch: boolean = false;
-        let result: Node = undefined;
+        let result: Node | undefined = undefined;
         this.emit(name, () => {
@@ -78,31 +79,33 @@ if (!didSearch && this.internalNode) {
     renderAsynchronous(maxBatchTime: number = 10): void {
-        const that = this;
-        const next = this.node.steps();
-        let done = false;
+        if (this.node) {
+            const that = this;
+            const next = this.node.steps();
+            let done = false;
 
-        (function batch() {
-            if (that.nonBlockingTimeoutId) {
-                window.clearTimeout(that.nonBlockingTimeoutId);
-            }
+            (function batch() {
+                if (that.nonBlockingTimeoutId) {
+                    window.clearTimeout(that.nonBlockingTimeoutId);
+                }
 
-            const deadline = performance.now() + maxBatchTime;
-            while (!done && performance.now() < deadline) {
-                done = next();
-            }
+                const deadline = performance.now() + maxBatchTime;
+                while (!done && performance.now() < deadline) {
+                    done = next();
+                }
 
-            that.context.clearRect(0, 0, that.canvas.width, that.canvas.height);
-            next(that.context);
-            if (!done) {
-                that.nonBlockingTimeoutId = window.setTimeout(batch, 0);
-            }
-        })();
+                that.context.clearRect(0, 0, that.canvas.width, that.canvas.height);
+                next(that.context);
+                if (!done) {
+                    that.nonBlockingTimeoutId = window.setTimeout(batch, 0);
+                }
+            })();
+        }
     }
 
-    get node(): Node {
+    get node(): Node | undefined {
         return this.internalNode;
     }
 
-    set node(value: Node) {
+    set node(value: Node | undefined) {
         this.internalNode = value;
     }
 };

src/Text.ts

 import Node, {Bounds, Point} from './Node';
 import NodeFixedBounds from './NodeFixedBounds';
+import {getSafeContext} from './util';
 
@@ -7,3 +8,3 @@ const measurementCanvas = document.createElement('canvas');
 measurementCanvas.height = 0;
-const measurementContext = measurementCanvas.getContext('2d');
+const measurementContext = getSafeContext(measurementCanvas);
 
@@ -92,3 +93,3 @@ function measureWidth(font: string, text: string): number {
 
-    intersection({x: px, y: py}: Point): Node {
+    intersection({x: px, y: py}: Point): Node | undefined {
         const {minX, minY, maxX, maxY} = this.getBounds();
@@ -95,0 +96,0 @@ if (minX <= px && px <= maxX && minY <= py && py <= maxY) {

src/Transform.ts

@@ -43,3 +43,3 @@ import Node, {Bounds, Point} from './Node';
 
-    intersection(point: Point): Node {
+    intersection(point: Point): Node | undefined {
         const untransformedPoint = this.untransform(point);
@@ -46,0 +46,0 @@ return super.intersection(untransformedPoint);

src/Translate.ts

@@ -33,3 +33,3 @@ import Node, {Bounds, Point} from './Node';
 
-    intersection(point: Point): Node {
+    intersection(point: Point): Node | undefined {
         const translatedPoint = {x: point.x - this._x, y: point.y - this._y};
@@ -36,0 +36,0 @@ return super.intersection(translatedPoint);

src/TreeManager.ts

@@ -30,3 +30,3 @@ import * as rbush from 'rbush';
 
-    intersection(point: Point): Node {
+    intersection(point: Point): Node | undefined {
         const results = this.tree
@@ -33,0 +33,0 @@ .search({minX: point.x, minY: point.y, maxX: point.x, maxY: point.y})

tsconfig.build.json

 {
   "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "es6",
+    "module": "commonjs",
+    "lib": [
+      "es2015",
+      "es2016",
+      "es2017",
+      "dom"
+    ],
+    "strict": true,
+    "sourceMap": true,
+    "declaration": true,
+    "allowSyntheticDefaultImports": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "declarationDir": "lib",
     "outDir": "lib",
-    "sourceMap": true,
     "noImplicitAny": true,
-    "module": "commonjs",
-    "target": "es6",
-    "jsx": "react"
+    "typeRoots": [
+      "node_modules/@types"
+    ]
   },
@@ -10,0 +25,0 @@ "include": [

tsconfig.examples.json

@@ -7,2 +7,8 @@ {
     "module": "commonjs",
+    "lib": [
+      "es2015",
+      "es2016",
+      "es2017",
+      "dom"
+    ],
     "target": "es6",
@@ -9,0 +15,0 @@ "jsx": "react"

webpack.config.js

@@ -19,3 +19,3 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
             {test: /\.svg$/, loader: 'url'},
-            {test: /\.tsx?$/, loader: 'ts-loader'}
+            {test: /\.tsx?$/, loader: 'awesome-typescript-loader?configFileName=tsconfig.examples.json'}
         ],
@@ -27,6 +27,2 @@ preLoaders: [
 
-    ts: {
-        configFileName: 'tsconfig.examples.json'
-    },
-
     plugins: [
@@ -33,0 +29,0 @@ new HtmlWebpackPlugin({

No alert changes

Improved metrics

Total package byte prevSize

236965

increased by10.35%

Number of package files

124

increased by27.84%

Lines of code

3106

increased by16.81%

No dependency changes