refactoring to clean up interfaces

bin/canvas-async.d.ts

@@ -1,11 +1,12 @@
-import { RoughCanvas } from './canvas';
-import { Config, Options, Drawable } from './core';
+import { Config, Options, ResolvedOptions, Drawable } from './core';
 import { RoughGeneratorAsync } from './generator-async';
 import { Point } from './geometry';
-export declare class RoughCanvasAsync extends RoughCanvas {
+import { RoughCanvasBase } from './canvas-base';
+export declare class RoughCanvasAsync extends RoughCanvasBase {
     private genAsync;
     constructor(canvas: HTMLCanvasElement, config?: Config);
     readonly generator: RoughGeneratorAsync;
+    getDefaultOptions(): ResolvedOptions;
     line(x1: number, y1: number, x2: number, y2: number, options?: Options): Promise<Drawable>;
     rectangle(x: number, y: number, width: number, height: number, options?: Options): Promise<Drawable>;
     ellipse(x: number, y: number, width: number, height: number, options?: Options): Promise<Drawable>;

bin/canvas-async.js

@@ -1,63 +1,56 @@
-import { RoughCanvas } from './canvas';
 import { RoughGeneratorAsync } from './generator-async';
-export class RoughCanvasAsync extends RoughCanvas {
+import { RoughCanvasBase } from './canvas-base';
+export class RoughCanvasAsync extends RoughCanvasBase {
     constructor(canvas, config) {
-        super(canvas, config);
+        super(canvas);
         this.genAsync = new RoughGeneratorAsync(config || null, this.canvas);
     }
-    // @ts-ignore
     get generator() {
         return this.genAsync;
     }
-    // @ts-ignore
+    getDefaultOptions() {
+        return this.genAsync.defaultOptions;
+    }
     async line(x1, y1, x2, y2, options) {
         const d = await this.genAsync.line(x1, y1, x2, y2, options);
         this.draw(d);
         return d;
     }
-    // @ts-ignore
     async rectangle(x, y, width, height, options) {
         const d = await this.genAsync.rectangle(x, y, width, height, options);
         this.draw(d);
         return d;
     }
-    // @ts-ignore
     async ellipse(x, y, width, height, options) {
         const d = await this.genAsync.ellipse(x, y, width, height, options);
         this.draw(d);
         return d;
     }
-    // @ts-ignore
     async circle(x, y, diameter, options) {
         const d = await this.genAsync.circle(x, y, diameter, options);
         this.draw(d);
         return d;
     }
-    // @ts-ignore
     async linearPath(points, options) {
         const d = await this.genAsync.linearPath(points, options);
         this.draw(d);
         return d;
     }
-    // @ts-ignore
     async polygon(points, options) {
         const d = await this.genAsync.polygon(points, options);
         this.draw(d);
         return d;
     }
-    // @ts-ignore
     async arc(x, y, width, height, start, stop, closed = false, options) {
         const d = await this.genAsync.arc(x, y, width, height, start, stop, closed, options);
         this.draw(d);
         return d;
     }
-    // @ts-ignore
     async curve(points, options) {
         const d = await this.genAsync.curve(points, options);
         this.draw(d);
         return d;
     }
-    // @ts-ignore
     async path(d, options) {
         const drawing = await this.genAsync.path(d, options);
         this.draw(drawing);

bin/canvas-base.d.ts

@@ -0,0 +1,13 @@
+import { ResolvedOptions, Drawable } from './core';
+import { RoughRenderer } from './renderer';
+export declare abstract class RoughCanvasBase {
+    protected canvas: HTMLCanvasElement;
+    protected ctx: CanvasRenderingContext2D;
+    constructor(canvas: HTMLCanvasElement);
+    static createRenderer(): RoughRenderer;
+    abstract getDefaultOptions(): ResolvedOptions;
+    draw(drawable: Drawable): void;
+    private computeBBox;
+    private fillSketch;
+    private _drawToContext;
+}

bin/canvas-base.js

@@ -0,0 +1,128 @@
+import { RoughRenderer } from './renderer';
+const hasDocument = typeof document !== 'undefined';
+export class RoughCanvasBase {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = this.canvas.getContext('2d');
+    }
+    static createRenderer() {
+        return new RoughRenderer();
+    }
+    draw(drawable) {
+        const sets = drawable.sets || [];
+        const o = drawable.options || this.getDefaultOptions();
+        const ctx = this.ctx;
+        for (const drawing of sets) {
+            switch (drawing.type) {
+                case 'path':
+                    ctx.save();
+                    ctx.strokeStyle = o.stroke;
+                    ctx.lineWidth = o.strokeWidth;
+                    this._drawToContext(ctx, drawing);
+                    ctx.restore();
+                    break;
+                case 'fillPath':
+                    ctx.save();
+                    ctx.fillStyle = o.fill || '';
+                    this._drawToContext(ctx, drawing);
+                    ctx.restore();
+                    break;
+                case 'fillSketch':
+                    this.fillSketch(ctx, drawing, o);
+                    break;
+                case 'path2Dfill': {
+                    this.ctx.save();
+                    this.ctx.fillStyle = o.fill || '';
+                    const p2d = new Path2D(drawing.path);
+                    this.ctx.fill(p2d);
+                    this.ctx.restore();
+                    break;
+                }
+                case 'path2Dpattern': {
+                    const doc = this.canvas.ownerDocument || (hasDocument && document);
+                    if (doc) {
+                        const size = drawing.size;
+                        const hcanvas = doc.createElement('canvas');
+                        const hcontext = hcanvas.getContext('2d');
+                        const bbox = this.computeBBox(drawing.path);
+                        if (bbox && (bbox.width || bbox.height)) {
+                            hcanvas.width = this.canvas.width;
+                            hcanvas.height = this.canvas.height;
+                            hcontext.translate(bbox.x || 0, bbox.y || 0);
+                        }
+                        else {
+                            hcanvas.width = size[0];
+                            hcanvas.height = size[1];
+                        }
+                        this.fillSketch(hcontext, drawing, o);
+                        this.ctx.save();
+                        this.ctx.fillStyle = this.ctx.createPattern(hcanvas, 'repeat');
+                        const p2d = new Path2D(drawing.path);
+                        this.ctx.fill(p2d);
+                        this.ctx.restore();
+                    }
+                    else {
+                        console.error('Cannot render path2Dpattern. No defs/document defined.');
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    computeBBox(d) {
+        if (hasDocument) {
+            try {
+                const ns = 'http://www.w3.org/2000/svg';
+                const svg = document.createElementNS(ns, 'svg');
+                svg.setAttribute('width', '0');
+                svg.setAttribute('height', '0');
+                const pathNode = self.document.createElementNS(ns, 'path');
+                pathNode.setAttribute('d', d);
+                svg.appendChild(pathNode);
+                document.body.appendChild(svg);
+                const bbox = pathNode.getBBox();
+                document.body.removeChild(svg);
+                return bbox;
+            }
+            catch (err) { }
+        }
+        return null;
+    }
+    fillSketch(ctx, drawing, o) {
+        let fweight = o.fillWeight;
+        if (fweight < 0) {
+            fweight = o.strokeWidth / 2;
+        }
+        ctx.save();
+        ctx.strokeStyle = o.fill || '';
+        ctx.lineWidth = fweight;
+        this._drawToContext(ctx, drawing);
+        ctx.restore();
+    }
+    _drawToContext(ctx, drawing) {
+        ctx.beginPath();
+        for (const item of drawing.ops) {
+            const data = item.data;
+            switch (item.op) {
+                case 'move':
+                    ctx.moveTo(data[0], data[1]);
+                    break;
+                case 'bcurveTo':
+                    ctx.bezierCurveTo(data[0], data[1], data[2], data[3], data[4], data[5]);
+                    break;
+                case 'qcurveTo':
+                    ctx.quadraticCurveTo(data[0], data[1], data[2], data[3]);
+                    break;
+                case 'lineTo':
+                    ctx.lineTo(data[0], data[1]);
+                    break;
+            }
+        }
+        if (drawing.type === 'fillPath') {
+            ctx.fill();
+        }
+        else {
+            ctx.stroke();
+        }
+    }
+}

bin/canvas.d.ts

@@ -1,14 +1,12 @@
-import { Config, Options, Drawable } from './core';
+import { Config, Options, ResolvedOptions, Drawable } from './core';
 import { RoughGenerator } from './generator';
-import { RoughRenderer } from './renderer';
 import { Point } from './geometry';
-export declare class RoughCanvas {
-    protected canvas: HTMLCanvasElement;
-    protected ctx: CanvasRenderingContext2D;
+import { RoughCanvasBase } from './canvas-base';
+export declare class RoughCanvas extends RoughCanvasBase {
     private gen;
     constructor(canvas: HTMLCanvasElement, config?: Config);
     readonly generator: RoughGenerator;
-    static createRenderer(): RoughRenderer;
+    getDefaultOptions(): ResolvedOptions;
     line(x1: number, y1: number, x2: number, y2: number, options?: Options): Drawable;
     rectangle(x: number, y: number, width: number, height: number, options?: Options): Drawable;
     ellipse(x: number, y: number, width: number, height: number, options?: Options): Drawable;
@@ -18,8 +16,4 @@ export declare class RoughCanvas {
     arc(x: number, y: number, width: number, height: number, start: number, stop: number, closed?: boolean, options?: Options): Drawable;
     curve(points: Point[], options?: Options): Drawable;
     path(d: string, options?: Options): Drawable;
-    draw(drawable: Drawable): void;
-    private computeBBox;
-    private fillSketch;
-    private _drawToContext;
 }