Merge pull request #72 from pshihn/dev

Typescript port

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "external-helpers"
+  ]
+}

.gitignore

@@ -1,4 +1,4 @@
 .cache
 .DS_Store
-z
-node_modules
+node_modules
+z

bin/canvas-async.d.ts

@@ -0,0 +1,18 @@
+import { RoughCanvas } from './canvas';
+import { Config, Options, Drawable } from './core';
+import { RoughGeneratorAsync } from './generator-async';
+import { Point } from './geometry';
+export declare class RoughCanvasAsync extends RoughCanvas {
+    private genAsync;
+    constructor(canvas: HTMLCanvasElement, config?: Config);
+    readonly generator: RoughGeneratorAsync;
+    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>;
+    circle(x: number, y: number, diameter: number, options?: Options): Promise<Drawable>;
+    linearPath(points: Point[], options?: Options): Promise<Drawable>;
+    polygon(points: Point[], options?: Options): Promise<Drawable>;
+    arc(x: number, y: number, width: number, height: number, start: number, stop: number, closed?: boolean, options?: Options): Promise<Drawable>;
+    curve(points: Point[], options?: Options): Promise<Drawable>;
+    path(d: string, options?: Options): Promise<Drawable>;
+}

bin/canvas-async.js

@@ -0,0 +1,66 @@
+import { RoughCanvas } from './canvas';
+import { RoughGeneratorAsync } from './generator-async';
+export class RoughCanvasAsync extends RoughCanvas {
+    constructor(canvas, config) {
+        super(canvas, config);
+        this.genAsync = new RoughGeneratorAsync(config || null, this.canvas);
+    }
+    // @ts-ignore
+    get generator() {
+        return this.genAsync;
+    }
+    // @ts-ignore
+    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);
+        return drawing;
+    }
+}

bin/canvas.d.ts

@@ -0,0 +1,25 @@
+import { Config, Options, 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;
+    private gen;
+    constructor(canvas: HTMLCanvasElement, config?: Config);
+    readonly generator: RoughGenerator;
+    static createRenderer(): RoughRenderer;
+    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;
+    circle(x: number, y: number, diameter: number, options?: Options): Drawable;
+    linearPath(points: Point[], options?: Options): Drawable;
+    polygon(points: Point[], options?: Options): Drawable;
+    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;
+}

bin/canvas.js

@@ -0,0 +1,174 @@
+import { RoughGenerator } from './generator';
+import { RoughRenderer } from './renderer';
+const hasDocument = typeof document !== 'undefined';
+export class RoughCanvas {
+    constructor(canvas, config) {
+        this.canvas = canvas;
+        this.ctx = this.canvas.getContext('2d');
+        this.gen = new RoughGenerator(config || null, this.canvas);
+    }
+    get generator() {
+        return this.gen;
+    }
+    static createRenderer() {
+        return new RoughRenderer();
+    }
+    line(x1, y1, x2, y2, options) {
+        const d = this.gen.line(x1, y1, x2, y2, options);
+        this.draw(d);
+        return d;
+    }
+    rectangle(x, y, width, height, options) {
+        const d = this.gen.rectangle(x, y, width, height, options);
+        this.draw(d);
+        return d;
+    }
+    ellipse(x, y, width, height, options) {
+        const d = this.gen.ellipse(x, y, width, height, options);
+        this.draw(d);
+        return d;
+    }
+    circle(x, y, diameter, options) {
+        const d = this.gen.circle(x, y, diameter, options);
+        this.draw(d);
+        return d;
+    }
+    linearPath(points, options) {
+        const d = this.gen.linearPath(points, options);
+        this.draw(d);
+        return d;
+    }
+    polygon(points, options) {
+        const d = this.gen.polygon(points, options);
+        this.draw(d);
+        return d;
+    }
+    arc(x, y, width, height, start, stop, closed = false, options) {
+        const d = this.gen.arc(x, y, width, height, start, stop, closed, options);
+        this.draw(d);
+        return d;
+    }
+    curve(points, options) {
+        const d = this.gen.curve(points, options);
+        this.draw(d);
+        return d;
+    }
+    path(d, options) {
+        const drawing = this.gen.path(d, options);
+        this.draw(drawing);
+        return drawing;
+    }
+    draw(drawable) {
+        const sets = drawable.sets || [];
+        const o = drawable.options || this.gen.defaultOptions;
+        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': {
+                    if (hasDocument) {
+                        const size = drawing.size;
+                        const hcanvas = document.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();
+                    }
+                    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/common/core.d.ts

@@ -0,0 +1,29 @@
+export interface Options {
+    maxRandomnessOffset: number;
+    roughness: number;
+    bowing: number;
+    stroke: string;
+    strokeWidth: number;
+    curveTightness: number;
+    curveStepCount: number;
+    fill: string | null;
+    fillStyle: string;
+    fillWeight: number;
+    hachureAngle: number;
+    hachureGap: number;
+}
+export declare type OpType = 'move' | 'bcurveTo' | 'lineTo';
+export declare type OpSetType = 'path' | 'fillPath' | 'fillSketch';
+export interface Op {
+    op: OpType;
+    data: number[];
+}
+export interface OpSet {
+    type: OpSetType;
+    ops: Op[];
+}
+export interface Drawable {
+    shape: string;
+    options: Options;
+    sets: OpSet[];
+}

bin/common/geometry.d.ts

@@ -0,0 +1,7 @@
+export declare type Point = [number, number];
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}