Merge pull request #83 from pshihn/optional-options

Optional options
rough-stuff · Jul 14, 2018 · 938faec · 938faec
2 parents 3acd388 + 9953dd0
commit 938faec
Show file tree

Hide file tree

Showing 33 changed files with 158 additions and 137 deletions.
diff --git a/bin/core.d.ts b/bin/core.d.ts
@@ -10,19 +10,32 @@ export interface DrawingSurface {
     height: number | SVGAnimatedLength;
 }
 export interface Options {
+    maxRandomnessOffset?: number;
+    roughness?: number;
+    bowing?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    curveTightness?: number;
+    curveStepCount?: number;
+    fill?: string;
+    fillStyle?: string;
+    fillWeight?: number;
+    hachureAngle?: number;
+    hachureGap?: number;
+    simplification?: number;
+}
+export interface ResolvedOptions extends 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;
-    simplification?: number;
 }
 export declare type OpType = 'move' | 'bcurveTo' | 'lineTo' | 'qcurveTo';
 export declare type OpSetType = 'path' | 'fillPath' | 'fillSketch' | 'path2Dfill' | 'path2Dpattern';
@@ -38,7 +51,7 @@ export interface OpSet {
 }
 export interface Drawable {
     shape: string;
-    options: Options;
+    options: ResolvedOptions;
     sets: OpSet[];
 }
 export interface PathInfo {

diff --git a/bin/fillers/dot-filler.d.ts b/bin/fillers/dot-filler.d.ts
@@ -1,10 +1,10 @@
 import { PatternFiller, RenderHelper } from './filler-interface';
-import { Options, OpSet } from '../core';
+import { ResolvedOptions, OpSet } from '../core';
 import { Point } from '../geometry';
 export declare class DotFiller implements PatternFiller {
     renderer: RenderHelper;
     constructor(renderer: RenderHelper);
-    fillPolygon(points: Point[], o: Options): OpSet;
-    fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet;
+    fillPolygon(points: Point[], o: ResolvedOptions): OpSet;
+    fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet;
     private dotsOnLines;
 }
diff --git a/bin/fillers/filler-interface.d.ts b/bin/fillers/filler-interface.d.ts
@@ -1,11 +1,11 @@
-import { Options, OpSet, Op } from '../core';
+import { ResolvedOptions, OpSet, Op } from '../core';
 import { Point } from '../geometry';
 export interface PatternFiller {
-    fillPolygon(points: Point[], o: Options): OpSet;
-    fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet;
+    fillPolygon(points: Point[], o: ResolvedOptions): OpSet;
+    fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet;
 }
 export interface RenderHelper {
-    doubleLine(x1: number, y1: number, x2: number, y2: number, o: Options): Op[];
-    getOffset(min: number, max: number, ops: Options): number;
-    ellipse(x: number, y: number, width: number, height: number, o: Options): OpSet;
+    doubleLine(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): Op[];
+    getOffset(min: number, max: number, ops: ResolvedOptions): number;
+    ellipse(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet;
 }
diff --git a/bin/fillers/filler-utils.d.ts b/bin/fillers/filler-utils.d.ts
@@ -1,8 +1,8 @@
 import { Point, Line } from '../geometry';
-import { Options } from '../core';
+import { ResolvedOptions } from '../core';
 import { RenderHelper } from './filler-interface';
 export declare function lineLength(line: Line): number;
 export declare function getIntersectingLines(line: number[], points: Point[]): Point[];
 export declare function affine(x: number, y: number, cx: number, cy: number, sinAnglePrime: number, cosAnglePrime: number, R: number): Point;
-export declare function hachureLinesForPolygon(points: Point[], o: Options): Line[];
-export declare function hachureLinesForEllipse(cx: number, cy: number, width: number, height: number, o: Options, renderer: RenderHelper): Line[];
+export declare function hachureLinesForPolygon(points: Point[], o: ResolvedOptions): Line[];
+export declare function hachureLinesForEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions, renderer: RenderHelper): Line[];
diff --git a/bin/fillers/filler.d.ts b/bin/fillers/filler.d.ts
@@ -1,3 +1,3 @@
-import { Options } from '../core';
+import { ResolvedOptions } from '../core';
 import { PatternFiller, RenderHelper } from './filler-interface';
-export declare function getFiller(renderer: RenderHelper, o: Options): PatternFiller;
+export declare function getFiller(renderer: RenderHelper, o: ResolvedOptions): PatternFiller;
diff --git a/bin/fillers/hachure-filler.d.ts b/bin/fillers/hachure-filler.d.ts
@@ -1,12 +1,12 @@
 import { PatternFiller, RenderHelper } from './filler-interface';
-import { Options, OpSet } from '../core';
+import { ResolvedOptions, OpSet } from '../core';
 import { Point } from '../geometry';
 export declare class HachureFiller implements PatternFiller {
     renderer: RenderHelper;
     constructor(renderer: RenderHelper);
-    fillPolygon(points: Point[], o: Options): OpSet;
-    fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet;
-    protected _fillPolygon(points: Point[], o: Options, connectEnds?: boolean): OpSet;
-    protected _fillEllipse(cx: number, cy: number, width: number, height: number, o: Options, connectEnds?: boolean): OpSet;
+    fillPolygon(points: Point[], o: ResolvedOptions): OpSet;
+    fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet;
+    protected _fillPolygon(points: Point[], o: ResolvedOptions, connectEnds?: boolean): OpSet;
+    protected _fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions, connectEnds?: boolean): OpSet;
     private renderLines;
 }
diff --git a/bin/fillers/hatch-filler.d.ts b/bin/fillers/hatch-filler.d.ts
@@ -1,7 +1,7 @@
 import { HachureFiller } from './hachure-filler';
-import { Options, OpSet } from '../core';
+import { ResolvedOptions, OpSet } from '../core';
 import { Point } from '../geometry';
 export declare class HatchFiller extends HachureFiller {
-    fillPolygon(points: Point[], o: Options): OpSet;
-    fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet;
+    fillPolygon(points: Point[], o: ResolvedOptions): OpSet;
+    fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet;
 }
diff --git a/bin/fillers/zigzag-filler.d.ts b/bin/fillers/zigzag-filler.d.ts
@@ -1,7 +1,7 @@
 import { HachureFiller } from './hachure-filler';
-import { Options, OpSet } from '../core';
+import { ResolvedOptions, OpSet } from '../core';
 import { Point } from '../geometry';
 export declare class ZigZagFiller extends HachureFiller {
-    fillPolygon(points: Point[], o: Options): OpSet;
-    fillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet;
+    fillPolygon(points: Point[], o: ResolvedOptions): OpSet;
+    fillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet;
 }
diff --git a/bin/generator.d.ts b/bin/generator.d.ts
@@ -1,14 +1,14 @@
 import { RoughRenderer } from './renderer.js';
-import { Config, DrawingSurface, Options, Drawable, OpSet, PathInfo } from './core';
+import { Config, DrawingSurface, Options, ResolvedOptions, Drawable, OpSet, PathInfo } from './core';
 import { Point } from './geometry.js';
 export declare class RoughGenerator {
     private config;
     private surface;
     private renderer;
-    defaultOptions: Options;
+    defaultOptions: ResolvedOptions;
     constructor(config: Config | null, surface: DrawingSurface);
-    protected _options(options?: Options): Options;
-    protected _drawable(shape: string, sets: OpSet[], options: Options): Drawable;
+    protected _options(options?: Options): ResolvedOptions;
+    protected _drawable(shape: string, sets: OpSet[], options: ResolvedOptions): Drawable;
     protected readonly lib: RoughRenderer;
     private getCanvasSize;
     protected computePolygonSize(points: Point[]): Point;

diff --git a/bin/generator.js b/bin/generator.js
@@ -10,7 +10,6 @@ export class RoughGenerator {
             strokeWidth: 1,
             curveTightness: 0,
             curveStepCount: 9,
-            fill: null,
             fillStyle: 'hachure',
             fillWeight: -1,
             hachureAngle: -41,

diff --git a/bin/renderer.d.ts b/bin/renderer.d.ts
@@ -1,20 +1,20 @@
-import { Options, OpSet, Op } from './core';
+import { ResolvedOptions, OpSet, Op } from './core';
 import { Point } from './geometry';
 export declare class RoughRenderer {
-    line(x1: number, y1: number, x2: number, y2: number, o: Options): OpSet;
-    linearPath(points: Point[], close: boolean, o: Options): OpSet;
-    polygon(points: Point[], o: Options): OpSet;
-    rectangle(x: number, y: number, width: number, height: number, o: Options): OpSet;
-    curve(points: Point[], o: Options): OpSet;
-    ellipse(x: number, y: number, width: number, height: number, o: Options): OpSet;
-    arc(x: number, y: number, width: number, height: number, start: number, stop: number, closed: boolean, roughClosure: boolean, o: Options): OpSet;
-    svgPath(path: string, o: Options): OpSet;
-    solidFillPolygon(points: Point[], o: Options): OpSet;
-    patternFillPolygon(points: Point[], o: Options): OpSet;
-    patternFillEllipse(cx: number, cy: number, width: number, height: number, o: Options): OpSet;
-    patternFillArc(x: number, y: number, width: number, height: number, start: number, stop: number, o: Options): OpSet;
-    getOffset(min: number, max: number, ops: Options): number;
-    doubleLine(x1: number, y1: number, x2: number, y2: number, o: Options): Op[];
+    line(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): OpSet;
+    linearPath(points: Point[], close: boolean, o: ResolvedOptions): OpSet;
+    polygon(points: Point[], o: ResolvedOptions): OpSet;
+    rectangle(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet;
+    curve(points: Point[], o: ResolvedOptions): OpSet;
+    ellipse(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet;
+    arc(x: number, y: number, width: number, height: number, start: number, stop: number, closed: boolean, roughClosure: boolean, o: ResolvedOptions): OpSet;
+    svgPath(path: string, o: ResolvedOptions): OpSet;
+    solidFillPolygon(points: Point[], o: ResolvedOptions): OpSet;
+    patternFillPolygon(points: Point[], o: ResolvedOptions): OpSet;
+    patternFillEllipse(cx: number, cy: number, width: number, height: number, o: ResolvedOptions): OpSet;
+    patternFillArc(x: number, y: number, width: number, height: number, start: number, stop: number, o: ResolvedOptions): OpSet;
+    getOffset(min: number, max: number, ops: ResolvedOptions): number;
+    doubleLine(x1: number, y1: number, x2: number, y2: number, o: ResolvedOptions): Op[];
     private _line;
     private _curve;
     private _ellipse;

diff --git a/bin/svg.js b/bin/svg.js
@@ -85,7 +85,7 @@ export class RoughSVG {
                     path.setAttribute('d', this.opsToPath(drawing));
                     path.style.stroke = 'none';
                     path.style.strokeWidth = '0';
-                    path.style.fill = o.fill;
+                    path.style.fill = o.fill || null;
                     break;
                 }
                 case 'fillSketch': {
@@ -97,7 +97,7 @@ export class RoughSVG {
                     path.setAttribute('d', drawing.path || '');
                     path.style.stroke = 'none';
                     path.style.strokeWidth = '0';
-                    path.style.fill = o.fill;
+                    path.style.fill = o.fill || null;
                     break;
                 }
                 case 'path2Dpattern': {
@@ -144,7 +144,7 @@ export class RoughSVG {
         }
         const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
         path.setAttribute('d', this.opsToPath(drawing));
-        path.style.stroke = o.fill;
+        path.style.stroke = o.fill || null;
         path.style.strokeWidth = fweight + '';
         path.style.fill = 'none';
         return path;

diff --git a/dist/rough.es5.js b/dist/rough.es5.js
@@ -1717,7 +1717,6 @@ var rough = (function () {
               strokeWidth: 1,
               curveTightness: 0,
               curveStepCount: 9,
-              fill: null,
               fillStyle: 'hachure',
               fillWeight: -1,
               hachureAngle: -41,
@@ -2704,7 +2703,7 @@ var rough = (function () {
                                   path.setAttribute('d', this.opsToPath(drawing));
                                   path.style.stroke = 'none';
                                   path.style.strokeWidth = '0';
-                                  path.style.fill = o.fill;
+                                  path.style.fill = o.fill || null;
                                   break;
                               }
                           case 'fillSketch':
@@ -2718,7 +2717,7 @@ var rough = (function () {
                                   path.setAttribute('d', drawing.path || '');
                                   path.style.stroke = 'none';
                                   path.style.strokeWidth = '0';
-                                  path.style.fill = o.fill;
+                                  path.style.fill = o.fill || null;
                                   break;
                               }
                           case 'path2Dpattern':
@@ -2784,7 +2783,7 @@ var rough = (function () {
               }
               var path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
               path.setAttribute('d', this.opsToPath(drawing));
-              path.style.stroke = o.fill;
+              path.style.stroke = o.fill || null;
               path.style.strokeWidth = fweight + '';
               path.style.fill = 'none';
               return path;

diff --git a/dist/rough.es5.min.js b/dist/rough.es5.min.js
diff --git a/dist/rough.js b/dist/rough.js
@@ -1462,7 +1462,6 @@ var rough = (function () {
                 strokeWidth: 1,
                 curveTightness: 0,
                 curveStepCount: 9,
-                fill: null,
                 fillStyle: 'hachure',
                 fillWeight: -1,
                 hachureAngle: -41,
@@ -2218,7 +2217,7 @@ var rough = (function () {
                         path.setAttribute('d', this.opsToPath(drawing));
                         path.style.stroke = 'none';
                         path.style.strokeWidth = '0';
-                        path.style.fill = o.fill;
+                        path.style.fill = o.fill || null;
                         break;
                     }
                     case 'fillSketch': {
@@ -2230,7 +2229,7 @@ var rough = (function () {
                         path.setAttribute('d', drawing.path || '');
                         path.style.stroke = 'none';
                         path.style.strokeWidth = '0';
-                        path.style.fill = o.fill;
+                        path.style.fill = o.fill || null;
                         break;
                     }
                     case 'path2Dpattern': {
@@ -2277,7 +2276,7 @@ var rough = (function () {
             }
             const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
             path.setAttribute('d', this.opsToPath(drawing));
-            path.style.stroke = o.fill;
+            path.style.stroke = o.fill || null;
             path.style.strokeWidth = fweight + '';
             path.style.fill = 'none';
             return path;

diff --git a/dist/rough.min.js b/dist/rough.min.js
diff --git a/dist/rough.umd.es5.js b/dist/rough.umd.es5.js
@@ -1720,7 +1720,6 @@
               strokeWidth: 1,
               curveTightness: 0,
               curveStepCount: 9,
-              fill: null,
               fillStyle: 'hachure',
               fillWeight: -1,
               hachureAngle: -41,
@@ -2707,7 +2706,7 @@
                                   path.setAttribute('d', this.opsToPath(drawing));
                                   path.style.stroke = 'none';
                                   path.style.strokeWidth = '0';
-                                  path.style.fill = o.fill;
+                                  path.style.fill = o.fill || null;
                                   break;
                               }
                           case 'fillSketch':
@@ -2721,7 +2720,7 @@
                                   path.setAttribute('d', drawing.path || '');
                                   path.style.stroke = 'none';
                                   path.style.strokeWidth = '0';
-                                  path.style.fill = o.fill;
+                                  path.style.fill = o.fill || null;
                                   break;
                               }
                           case 'path2Dpattern':
@@ -2787,7 +2786,7 @@
               }
               var path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
               path.setAttribute('d', this.opsToPath(drawing));
-              path.style.stroke = o.fill;
+              path.style.stroke = o.fill || null;
               path.style.strokeWidth = fweight + '';
               path.style.fill = 'none';
               return path;

diff --git a/dist/rough.umd.es5.min.js b/dist/rough.umd.es5.min.js
diff --git a/dist/rough.umd.js b/dist/rough.umd.js
@@ -1465,7 +1465,6 @@
                 strokeWidth: 1,
                 curveTightness: 0,
                 curveStepCount: 9,
-                fill: null,
                 fillStyle: 'hachure',
                 fillWeight: -1,
                 hachureAngle: -41,
@@ -2221,7 +2220,7 @@
                         path.setAttribute('d', this.opsToPath(drawing));
                         path.style.stroke = 'none';
                         path.style.strokeWidth = '0';
-                        path.style.fill = o.fill;
+                        path.style.fill = o.fill || null;
                         break;
                     }
                     case 'fillSketch': {
@@ -2233,7 +2232,7 @@
                         path.setAttribute('d', drawing.path || '');
                         path.style.stroke = 'none';
                         path.style.strokeWidth = '0';
-                        path.style.fill = o.fill;
+                        path.style.fill = o.fill || null;
                         break;
                     }
                     case 'path2Dpattern': {
@@ -2280,7 +2279,7 @@
             }
             const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
             path.setAttribute('d', this.opsToPath(drawing));
-            path.style.stroke = o.fill;
+            path.style.stroke = o.fill || null;
             path.style.strokeWidth = fweight + '';
             path.style.fill = 'none';
             return path;

diff --git a/dist/rough.umd.min.js b/dist/rough.umd.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "roughjs",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Create graphics using HTML Canvas or SVG with a hand-drawn, sketchy, appearance.",
   "main": "dist/rough.umd.js",
   "module": "bin/rough.js",

diff --git a/src/canvas.ts b/src/canvas.ts
@@ -1,4 +1,4 @@
-import { Config, Options, Drawable, OpSet } from './core';
+import { Config, Options, ResolvedOptions, Drawable, OpSet } from './core';
 import { RoughGenerator } from './generator';
 import { RoughRenderer } from './renderer';
 import { Point } from './geometry';
@@ -157,7 +157,7 @@ export class RoughCanvas {
     return null;
   }
 
-  private fillSketch(ctx: CanvasRenderingContext2D, drawing: OpSet, o: Options) {
+  private fillSketch(ctx: CanvasRenderingContext2D, drawing: OpSet, o: ResolvedOptions) {
     let fweight = o.fillWeight;
     if (fweight < 0) {
       fweight = o.strokeWidth / 2;