🚧 Working on themes

config/config.ts

@@ -1,3 +0,0 @@
-export var config = {
-  precision: 2
-}

index.ts

@@ -1,13 +1,12 @@
 import { Pattern } from './lib/pattern'
 import { Point } from './lib/point'
 import { Path } from './lib/path'
-import { config } from './config/config'
+import themes from './lib/themes'
 import * as utils from './lib/utils'
 import bezier from 'bezier-js'
 
 var Freesewing = {
   version: '1.0.1',
-  config,
   pattern: Pattern,
   point: Point,
   path: Path,

lib/path.ts

@@ -3,10 +3,7 @@ import { Attributes } from './attributes'
 
 
 export class Path {
-  constructor() {
+  render: boolean = true;
-    return this;
-  }
-
   ops: {
       type: "move" | "line" | "curve" | "close";
       to?: Point;
@@ -69,10 +66,4 @@ export class Path {
     return d;
   }
 
-  /** Returns SVG code for this path */
-  render(): string {
-    this.attributes.add('d', this.asPathstring());
-    return `<path ${this.render()} />`;
-
-  }
 }

lib/pattern.ts

@@ -1,14 +1,18 @@
 import { PatternConfig, PatternOption } from './types'
 import { Part } from './part'
-import { Renderer } from './renderer'
+import { Svg } from './svg'
 import { Option } from './option'
+import themes from './themes'
+import { Theme } from './themes/theme'
 
 export class Pattern {
   config: PatternConfig;
+  svg: Svg = new Svg();
   parts: {
     [index: string]: Part;
   }
   options: {[propName: string]: number};
+  themes: {[index:string]: Theme} = themes;
 
   constructor(config: PatternConfig) {
     this.config = config;
@@ -31,8 +35,8 @@ export class Pattern {
     throw Error('You have to implement the draft() method in your Pattern instance.');
   }
 
-  render(pattern: Pattern): string {
+  render(): string {
-    let r = new Renderer();
+    let svg = new Svg();
-    return r.render(pattern);
+    return svg.render(this);
   }
 }

lib/point.ts

@@ -1,11 +1,10 @@
 import { round, rad2deg, deg2rad } from './utils';
-const PRECISION = 2;
 
 
 export class Point {
   x: number;
   y: number;
-
+  readonly PRECISION = 2;
 
   constructor(x: number, y: number) {
     this.x = round(x);
@@ -19,7 +18,7 @@ export class Point {
     let dx = this.x - that.x;
     let dy = this.y - that.y;
 
-    return round(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy,2)));
+    return round(Math.sqrt(Math.pow(dx, this.PRECISION) + Math.pow(dy, this.PRECISION)));
   }
 
   /** Returns slope of a line made by this point and that point */

lib/svg.ts

@@ -3,14 +3,27 @@ import { Path } from './path'
 import { Pattern } from './pattern'
 import { Attributes } from './attributes'
 
-export class Renderer {
+export class Svg {
-  svg = '';
+  prefix: string;
+  body: string = '';
+  style: string = '';
+  header: string = '';
+  footer: string = '';
+  defs: string = '';
+  attributes: Attributes = new Attributes();
   readonly TAB = '  ';
   tabs: number = 0;
   freeId: number = 1;
   openGroups: string[] = [];
 
   constructor() {
+    this.prefix = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
+    this.attributes.add
+    this.attributes.add("xmlns", "http://www.w3.org/2000/svg");
+    this.attributes.add("xmlns:svg", "http://www.w3.org/2000/svg");
+    this.attributes.add("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    this.attributes.add("xmlns:freesewing", "http://freesewing.org/namespaces/freesewing");
+
     return this;
   }
 
@@ -49,7 +62,8 @@ export class Renderer {
 
   /** Returns SVG code for a Path object */
   renderPath(path: Path): string {
-    return `${this.nl()}<path ${path.attributes.add('d', path.asPathstring()).render()} />`;
+    path.attributes.add('d', path.asPathstring());
+    return `${this.nl()}<path ${path.attributes.render()} />`;
   }
 
 

lib/themes.ts

@@ -0,0 +1,14 @@
+import { Draft } from './themes/draft'
+import { Paperless } from './themes/paperless'
+import { Sample } from './themes/sample'
+import { Compare } from './themes/compare'
+
+/** Standard themes that ship with freesewing */
+var themes = {
+  draft: new Draft(),
+  paperless: new Paperless(),
+  sample: new Sample(),
+  compare: new Compare()
+}
+
+export default themes;

lib/themes/compare.ts

@@ -0,0 +1,10 @@
+import { Sample } from './sample';
+
+export class Compare extends Sample {
+  constructor() {
+    super();
+    this.style += `
+      path.compare { fill: #000000; fill-opacity: 0.05; stroke: #000000; stroke-opacity:0.5; stroke-width: 1; stroke-linecap:round; stroke-linejoin:round; }
+      `;
+  }
+}

lib/themes/draft.ts

@@ -0,0 +1,3 @@
+import { Theme } from './theme';
+
+export class Draft extends Theme {}

lib/themes/paperless.ts

@@ -0,0 +1,30 @@
+import { Sample } from './sample';
+
+export class Paperless extends Sample {
+  constructor() {
+    super();
+    this.style += `
+      rect.grid{fill:none;stroke:#555;stroke-width:0.3;fill:url(#grid);}
+      path.gridline{stroke:#555;stroke-width:0.2;}
+      path.gridline-lg{stroke:#777;stroke-width:0.2;stroke-dasharray:1.5,1.5;}
+      path.gridline-sm{stroke:#999;stroke-width:0.1;}
+      path.gridline-xs{stroke:#999;stroke-width:0.1;stroke-dasharray:0.5,0.5;}
+      `;
+    this.defs += `
+      <pattern id="metric-grid" height="100" width="100" patternUnits="userSpaceOnUse" >
+        <path class="gridline-lg" d="M 0 0 L 0 100 L 100 100" />
+        <path class="gridline" d="M 50 0 L 50 100 M 0 50 L 100 50" />
+        <path class="gridline-sm" d="M 10 0 L 10 100 M 20 0 L 20 100 M 30 0 L 30 100 M 40 0 L 40 100 M 60 0 L 60 100 M 70 0 L 70 100 M 80 0 L 80 100 M 90 0 L 90 100" />
+        <path class="gridline-sm" d="M 0 10 L 100 10 M 0 20 L 100 20 M 0 30 L 100 30 M 0 40 L 100 40 M 0 60 L 100 60 M 0 70 L 100 70 M 0 80 L 100 80 M 0 90 L 100 90" />
+        <path class="gridline-xs" d="M 5 0 L 5 100 M 15 0 L 15 100 M 25 0 L 25 100 M 35 0 L 35 100 M 45 0 L 45 100 M 55 0 L 55 100 M 65 0 L 65 100 M 75 0 L 75 100 M 85 0 L 85 100 M 95 0 L 95 100" />
+        <path class="gridline-xs" d="M 0 5 L 100 5 M 0 15 L 100 15 M 0 25 L 100 25 M 0 35 L 100 35 M 0 45 L 100 45 M 0 55 L 100 55 M 0 65 L 100 65 M 0 75 L 100 75 M 0 85 L 100 85 M 0 95 L 100 95" />
+      </pattern>
+      <pattern id="imperial-grid" height="25.4" width="25.4" patternUnits="userSpaceOnUse" >
+        <path class="gridline-lg" d="M 0 0 L 0 25.4 L 25.4 25.4" />
+        <path class="gridline" d="M 12.7 0 L 12.7 25.4 M 0 12.7 L 25.4 12.7" />
+        <path class="gridline-sm" d="M 3.175 0 L 3.175 25.4 M 6.32 0 L 6.35 25.4 M 9.525 0 L 9.525 25.4 M 15.875 0 L 15.875 25.4 M 19.05 0 L 19.05 25.4 M 22.225 0 L 22.225 25.4" />
+        <path class="gridline-sm" d="M 0 3.175 L 25.4 3.175 M 0 6.32 L 25.4 6.35 M 0 9.525 L 25.4 9.525 M 0 15.875 L 25.4 15.875 M 0 19.05 L 25.4 19.05 M 0 22.225 L 25.4 22.225" />
+      </pattern>
+      `;
+  }
+}

lib/themes/sample.ts

@@ -0,0 +1,11 @@
+import { Theme } from './theme';
+
+export class Sample extends Theme {
+  constructor() {
+    super();
+    this.style += `
+      path { fill: none; stroke: #000000; stroke-opacity:1; stroke-width: 0.5; stroke-miterlimit:4; stroke-dashoffset:0; stroke-linecap:round; stroke-linejoin:round; }
+      path.hidden { fill: none; stroke: none; }
+      `;
+  }
+}