VSinerva/freesewing
1
0
Fork 0
Code Activity

Merge pull request #1 from joostdecock/js

Browse source 
🔥 bye bye TypeScript
This commit is contained in:
Joost De Cock 2018-07-23 16:21:40 +02:00 • committed by GitHub
commit 9934b54566
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 5421 additions and 1156 deletions
Download patch file Download diff file Expand all files Collapse all files

8
.eslintrc.js Normal file
View file

@ -0,0 +1,8 @@
module.exports = {
plugins: ["prettier"],
rules: {
"prettier/prettier": "error"
},
extends: "plugin:prettier/recommended",
parser: "babel-eslint"
};

2
.npmignore
View file

@ -1 +1 @@
lib/
dist/

3
README.md
View file

@ -6,8 +6,7 @@
</h4>
# freesewing
A port of [freesewing core](https://github.com/freesewing/core)
to node.js, using [TypeScript](https://www.typescriptlang.org/).
A port of [freesewing core](https://github.com/freesewing/core) to node.js.
> This is alpha code.

28
index.ts
View file

@ -1,28 +0,0 @@
import { Freesewing } from './lib/freesewing'
var freesewing = new Freesewing();
//svg.pre('loadStyle', function (next) {
// console.log('loadStyle hook');
// console.log(this.style);
// this.style= 'p {line-height: 1.21;}';
// console.log('logging in hook', this);
// next();
//});
//var p = new app.pattern({parts:['tst']});
//p.draft = function(){
// console.log('drafting in lib index');
//}
//p.draft();
//p.render();
export default freesewing;

53
lib/attributes.ts
View file

@ -1,53 +0,0 @@
export class Attributes {
list: any = {};
constructor(init?) {
for (let key in init) {
let val = init[key];
this.add(key, val);
}
return this;
}
/** Adds an attribute */
add(name: string, value: string): Attributes {
if(typeof this.list[name] === 'undefined') {
this.list[name] = [];
}
this.list[name].push(value);
return this;
}
/** Retrieves an attribute */
get(name: string): string {
if(typeof this.list[name] === 'undefined') return false;
else return this.list[name].join(' ');
}
/** Returns SVG code for attributes */
render(): string {
let svg = '';
for (let key in this.list) {
svg += ` ${key}="${this.list[key].join(' ')}"`;
}
return svg;
}
/** Returns SVG code for attributes with a fiven prefix
* typically used for data-text*/
renderIfPrefixIs(prefix:string = ''): string {
let svg = '';
let prefixLen = prefix.length;
for (let key in this.list) {
if(key.substr(0,prefixLen) === prefix) {
svg += ` ${key.substr(prefixLen)}="${this.list[key].join(' ')}"`;
}
}
return svg;
}
}

22
lib/freesewing.ts
View file

@ -1,22 +0,0 @@
import { Pattern } from './pattern'
import { Point } from './point'
import { Path } from './path'
import { Snippet } from './snippet'
import * as utils from './utils'
export class Freesewing {
version: string;
pattern: Pattern;
point: Point;
path: Path;
snippet: Snippet;
utils: utils;
constructor() {
this.version = '1.0.1';
this.pattern = Pattern;
this.point = Point;
this.path = Path;
this.snippet = Snippet;
this.utils = utils;
}
}

1
lib/hooks.d.ts vendored
View file

@ -1 +0,0 @@
declare module 'hooks';

24
lib/hooks.ts
View file

@ -1,24 +0,0 @@
export class Hooks {
hooks: object;
all: string[];
constructor(app) {
this._hooks = {};
this.all = ['preRenderSvg', 'postRenderSvg'];
}
list(hook): function[] {
if(typeof this._hooks[hook] === 'undefined') {
return false;
}
return this._hooks[hook];
}
attach (hook: string, obj: object): void {
if(typeof this._hooks[hook] === 'undefined') return;
for(let func of this._hooks[hook]) {
obj.pre(hook, func);
}
}
}

14
lib/option.ts
View file

@ -1,14 +0,0 @@
import { PatternOption } from './types'
export class Option {
id: string;
config: PatternOption;
val: number;
constructor(config: PatternOption) {
this.id = config.id;
this.config = config;
this.val = config.val;
return this;
}
}

41
lib/part.ts
View file

@ -1,41 +0,0 @@
import { Point } from './point'
import { Path } from './path'
import { Snippet } from './snippet'
import { Attributes } from './attributes'
import hooklib from 'hooks'
export class Part {
id: string;
render: boolean;
points: { [index: string]: Point; } = {};
paths: { [index: string]: Path; } = {};
snippets: { [index: string]: Snippet; } = {};
attributes = new Attributes();
// Expose constructors for macros
point: Point = Point;
path: Path = Path;
attr: Attribute = Attributes;
[propName: string]: any;
constructor(id: string) {
this.id = id;
this.render = (id.substr(0,1) === '_') ? false : true;
this.points.origin = new Point(0,0);
for(let k in hooklib) this[k] = hooklib[k];
return this;
}
macroRunner(args?) {
let self = this;
let data = args;
let method = function (key, data) {
let macro = `_macro_${key}`;
if(typeof self[macro] === 'function') {
self[macro](data);
}
}
return method;
}
}

76
lib/path.ts
View file

@ -1,76 +0,0 @@
import { Point } from './point'
import { Attributes } from './attributes'
export class Path {
render: boolean = true;
ops: {
type: "move" | "line" | "curve" | "close";
to?: Point;
cp1?: Point;
cp2?: Point;
}[] = [];
attributes: Attributes = new Attributes();
/** Adds a move operation to Point to */
move(to: Point): Path {
this.ops.push({type: "move", to});
return this;
}
/** Adds a line operation to Point to */
line(to: Point): Path {
this.ops.push({type: "line", to});
return this;
}
/** Adds a line operation to Point to */
curve(cp1: Point, cp2: Point, to: Point): Path {
this.ops.push({type: "curve", cp1, cp2, to});
return this;
}
/** Adds a close operation */
close(): Path {
this.ops.push({type: "close"});
return this;
}
/** Adds an attribute. This is here to make this call chainable in assignment */
attr(name, value): Path {
this.attributes.add(name, value);
return this;
}
/** Returns SVG pathstring for this path */
asPathstring() {
let d = '';
for(let op of this.ops) {
switch (op.type) {
case 'move':
d += `M ${op.to!.x},${op.to!.y}`;
break;
case 'line':
d += ` L ${op.to!.x},${op.to!.y}`;
break;
case 'curve':
d += ` C ${op.cp1!.x},${op.cp1!.y} ${op.cp2!.x},${op.cp2!.y} ${op.to!.x},${op.to!.y}`;
break;
case 'close':
d += ' z';
break;
default:
throw `${op.type} is not a valid path command`;
break;
}
}
return d;
}
}

111
lib/pattern.ts
View file

@ -1,111 +0,0 @@
import { PatternConfig, PatternOption } from './types'
import { Point } from './point'
import { Part } from './part'
import { Svg } from './svg'
import { Hooks } from './hooks'
import { Option } from './option'
import { Snippet } from './snippet'
import { Path } from './path'
export class Pattern {
config: PatternConfig;
svg: Svg;
parts: {
[index: string]: Part;
}
options: {[propName: string]: number};
values: {[propName: string]: any} = {};
settings: {[propName: string]: any} = {mode: 'draft', units: 'metric'};
hooks: Hooks;
snippet: Snippet;
path: Path;
context: any
hook: any;
constructor(config: PatternConfig) {
if(!config) {
throw "Could not create pattern: You need to provide a pattern config."
}
if(typeof config.parts === 'undefined' || !config.parts || config.parts.length < 1) {
throw "Could not create pattern: You should define at least one part in your pattern config";
}
this.config = config;
this.point = Point;
this.path = Path;
this.snippet = Snippet;
this.parts = {};
this.svg = new Svg(this);
this.hooks = new Hooks();
for (let id of config.parts) {
this.parts[id] = new Part(id);
}
this.options = {};
if(typeof config.options !== 'undefined' && config.options.length > 0) {
for (let conf of config.options) {
if(conf.type === 'percentage') this.options[conf.id] = conf.val/100;
else this.options[conf.id] = conf.val;
}
}
this.context = {
parts: this.parts,
options: this.options,
values: this.values,
config: this.config,
settings: this.settings
}
return this;
}
draft(): void {
throw Error('You have to implement the draft() method in your Pattern instance.');
}
render(): string {
this.hooks.attach('preRenderSvg', this.svg);
this.hooks.attach('postRenderSvg', this.svg);
//this.hooks.attach('insertText', this.svg);
return this.svg.render(this);
}
on(hook, method): void {
if(typeof this.hooks._hooks[hook] === 'undefined') {
this.hooks._hooks[hook] = [];
}
this.hooks._hooks[hook].push(method);
}
macro(key, method): void {
let name = `_macro_${key}`;
this.on(name, method);
for(let partId in this.parts) {
let part = this.parts[partId];
part[name] = () => null;
this.hooks.attach(name, part);
}
}
withPlugin(plugin: () => void): void {
if(plugin.hooks) this.loadPluginHooks(plugin);
if(plugin.macros) this.loadPluginMacros(plugin);
return this; // Make it chainable
}
loadPluginHooks(plugin: () => void): void {
for(let hook of this.hooks.all) {
if(typeof plugin.hooks[hook] === 'function') {
this.on(hook, plugin.hooks[hook]);
}
}
}
loadPluginMacros(plugin: () => void): void {
for(let macro in plugin.macros) {
if(typeof plugin.macros[macro] === 'function') {
this.macro(macro, plugin.macros[macro]);
}
}
}
}

17
lib/snippet.ts
View file

@ -1,17 +0,0 @@
import { Point } from './point'
import { Attributes } from './attributes'
export class Snippet {
anchor: Point;
def: string;
attributes: Attributes = new Attributes();
description: string | false;
constructor(def: string, anchor: Point, description: string | false = false) {
this.anchor = anchor;
this.def = def;
this.description = description;
return this;
}
}

251
lib/svg.ts
View file

@ -1,251 +0,0 @@
import { Part } from './part'
import { Path } from './path'
import { Snippet } from './snippet'
import { Pattern } from './pattern'
import { Attributes } from './attributes'
import hooklib from 'hooks'
import { Hooks } from './hooks'
export class Svg {
prefix: string;
body: string = '';
style: string = '';
script: string = '';
header: string = '';
footer: string = '';
defs: string = '';
attributes: Attributes = new Attributes();
tabs: number = 0;
freeId: number = 1;
svg: string = '';
openGroups: string[] = [];
hook: any;
hooks: string[];
pattern: Pattern;
constructor(pattern: Pattern) {
this.pattern = pattern; // Needed to expose pattern to hooks
this.prefix = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
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.hooks = ['preRenderSvg', 'postRenderSvg'];
for(let k in hooklib) this[k] = hooklib[k];
for(let k in this.hooks) this.hook(k, this[k]);
return this;
}
/** Method to attach preRenderSvg hooks on */
preRenderSvg(): void {}
/** Method to attach postRenderSvg hooks on */
postRenderSvg(): void {}
/** Renders a draft object as SVG */
render(pattern: Pattern): string {
this.preRenderSvg();
this.svg = this.prefix;
this.svg += this.renderComments(this.header);
this.svg += this.renderSvgTag(pattern);
this.svg += this.renderStyle();
this.svg += this.renderScript();
this.svg += this.renderDefs();
this.svg += this.openGroup('draftContainer');
for (let partId in pattern.parts) {
let part = pattern.parts[partId];
if (part.render) {
this.svg += this.openGroup(part.id, part.attributes);
this.svg += this.renderPart(part);
this.svg += this.closeGroup();
}
}
this.svg += this.closeGroup();
this.svg += this.nl()+'</svg>';
this.svg += this.renderComments(this.footer);
this.postRenderSvg();
return this.svg;
}
/** Returns SVG code for the opening SVG tag */
renderSvgTag(pattern: Pattern) {
let svg = '<svg';
this.indent();
svg += this.nl()+this.attributes.render();
this.outdent();
svg += this.nl()+'>'+this.nl();
return svg;
}
/** Returns SVG code for the style block */
renderStyle() {
let svg = '<style type="text/css"> <![CDATA[ ';
this.indent();
svg += this.nl()+this.style;
this.outdent();
svg += this.nl()+']]>'+this.nl()+'</style>'+this.nl();
return svg;
}
/** Returns SVG code for the script block */
renderScript() {
let svg = '<script type="text/javascript"> <![CDATA[';
this.indent();
svg += this.nl()+this.script;
this.outdent();
svg += this.nl()+']]>'+this.nl()+'</script>'+this.nl();
return svg;
}
/** Returns SVG code for the defs block */
renderDefs() {
let svg = '<defs id="defs">';
this.indent();
svg += this.nl()+this.defs;
this.outdent();
svg += this.nl()+'</defs>'+this.nl();
return svg;
}
/** Returns SVG code for a comment block */
renderComments(comments: string) {
return this.nl()+this.nl()+'<!--'+this.nl()+comments+this.nl()+'-->';
}
/** Returns SVG code for a Part object */
renderPart(part: Part): string {
let svg = '';
for (let key in part.paths) {
let path = part.paths[key];
if(path.render) svg += this.renderPath(path);
}
for (let key in part.points) {
if(part.points[key].attributes.get('data-text')) {
svg += this.renderPoint(part.points[key]);
}
}
for (let key in part.snippets) {
let snippet = part.snippets[key];
svg += this.renderSnippet(snippet);
}
return svg;
}
/** Returns SVG code for a Point object */
renderPoint(point: Point): string
{
let svg = ''
if(point.attributes.get('data-text')) svg += this.renderText(point);
return svg;
}
/** Returns SVG code for a Path object */
renderPath(path: Path): string
{
if(!path.attributes.get('id')) path.attributes.add('id', this.getUid());
path.attributes.add('d', path.asPathstring());
return `${this.nl()}<path ${path.attributes.render()} />${this.renderPathText(path)}`;
}
renderPathText(path: Path): string
{
let text = path.attributes.get('data-text');
if(!text) return false;
let attributes = path.attributes.renderIfPrefixIs('data-text-');
let svg = this.nl()+'<text>';
this.indent();
svg += `<textPath xlink:href="#${path.attributes.get('id')}" startOffset="50%"><tspan ${attributes}>${text}</tspan></textPath>`;
this.outdent();
svg += this.nl()+'</text>';
return svg;
}
renderText(point: Point): string
{
let text = point.attributes.get('data-text');
if(!text) return false;
point.attributes.add('data-text-x', point.x);
point.attributes.add('data-text-y', point.y);
let attributes = point.attributes.renderIfPrefixIs('data-text-');
let svg = `${this.nl()}<text ${point.attributes.renderIfPrefixIs('data-text-')}>`;
this.indent();
svg += `<tspan>${text}</tspan>`;
this.outdent();
svg += this.nl()+'</text>';
return svg;
}
/** Returns SVG code for a snippet */
renderSnippet(snippet: Snippet): string
{
let svg = this.nl();
svg += `<use x="${snippet.anchor.x}" y="${snippet.anchor.y}" `
svg += `xlink:href="#${snippet.def}" ${snippet.attributes.render()}>`;
if(snippet.description) {
svg += `<title>${snippet.description}</title>`;
}
svg += '</use>';
return svg;
}
/** Returns SVG code to open a group */
openGroup(id: string, attributes?: Attributes): string {
let svg = this.nl()+this.nl();
svg += `<!-- Start of group #${id} -->`;
svg += this.nl();
svg += `<g id="${id}">`;
this.indent();
this.openGroups.push(id);
return svg;
}
/** Returns SVG code to close a group */
closeGroup(): string {
this.outdent();
return `${this.nl()}</g>${this.nl()}<!-- end of group #${this.openGroups.pop()} -->`;
}
/** Returns a linebreak + identation */
nl(): string {
return "\n"+this.tab();
}
/** Returns indentation */
tab(): string {
let space = '';
for (let i = 0; i < this.tabs; i++) {
space += ' ';
}
return space;
}
/** Increases indentation by 1 */
indent(): void {
this.tabs += 1;
}
/** Decreases indentation by 1 */
outdent(): void {
this.tabs -= 1;
}
/** Returns an unused ID */
getUid() {
this.freeId += 1;
return ''+this.freeId;
}
}

74
lib/types.ts
View file

@ -1,74 +0,0 @@
export type context = {
settings: {[propName: string]: any};
options: {[propName: string]: any};
values: {[propName: string]: any};
}
/////////////////////////////////////////////////////////////
/*
export type PatternOptionType = "measure" | "percentage" | "angle" | "choice" | "constant";
export interface PatternOption {
id: string;
val: number;
type?: string;
onlyIf?: {
option: string;
oneOf: number[];
}
min?: number;
max?: number;
options?: {
[index: number]: string;
}
}
export interface PatternConfig {
parts: string[];
measurements: string[];
options: PatternOption[];
[propName: string]: any;
}
export type DraftMode = "sample" | "compare" | "draft";
export type CompareGroup = "men" | "women";
export type Units = "metric" | "imperial";
export interface DraftConfig {
mode: DraftMode;
units?: Units;
options: PatternOption[];
measurements?: {
[index:string]: number;
};
sa?: number;
scope?: string[];
theme?: string;
}
declare namespace Pattern {
export type OptionType = "measure" | "percentage" | "angle" | "choice" | "constant";
export interface Option {
id: string;
val: number;
type?: string;
onlyIf?: {
option: string;
oneOf: number[];
}
min?: number;
max?: number;
options?: {
[index: number]: string;
}
}
export interface Config {
parts: string[];
measurements: string[];
options: Option[];
[propName: string]: any;
}
}
*/

89
lib/utils.ts
View file

@ -1,89 +0,0 @@
import { Part } from './part'
import { Point } from './point'
import {context} from './types'
/** Rounds a value to PRECISION */
export function round(value: number): number {
return Math.round(value * 1e2) / 1e2;
}
/** Radians to degrees */
export function rad2deg(radians: number): number {
return radians * 57.29577951308232;
}
/** Degrees to radians */
export function deg2rad(degrees: number): number {
return degrees / 57.29577951308232;
}
/** Find intersection of two (endless) lines */
export function beamsCross(a1: Point, a2: Point, b1: Point, b2: Point): Point | false {
let slopeA = a1.slope(a2);
let slopeB = b1.slope(b2);
if(slopeA === slopeB) return false; // Parallel lines
if(a1.x === a2.x) return new Point(a1.x, slopeB * a1.x + (b1.y - (slopeB * b1.x))); // Vertical line A
else if(b1.x === b2.x) return new Point(b1.x, slopeA * b1.x + (a1.y - (slopeA * a1.x))); // Vertical line B
else {
// Swap points if line A or B goes from right to left
if(a1.x > a2.x) {
let tmp = a1.copy();
a1 = a2.copy();
a2 = tmp;
}
if(b1.x > b2.x) {
let tmp = b1.copy();
b1 = b2.copy();
b2 = tmp;
}
// Find y intercept
let iA = a1.y - (slopeA * a1.x);
let iB = b1.y - (slopeB * b1.x);
// Find intersection
let x = (iB - iA) / (slopeA - slopeB);
let y = slopeA * x + iA;
return new Point(x, y);
}
}
/** Find intersection of two line segments */
export function linesCross(a1: Point, a2: Point, b1: Point, b2: Point): Point | false {
let p = beamsCross(a1,a2,b1,b2);
if(p) {
let lenA = a1.dist(a2);
let lenB = b1.dist(b2);
let lenC = a1.dist(p) + p.dist(a2);
let lenD = b1.dist(p) + p.dist(b2);
if (round(lenA) == round(lenC) && round(lenB) == round(lenD)) return p;
}
return false;
}
/** Find where an (endless) line crosses a certain Y-value */
export function beamCrossesY(from: Point, to: Point, y: number) {
if(from.y === to.y) return false; // Horizontal line
let left = new Point(-10,y);
let right = new Point(10,y);
return beamsCross(from, to, left, right);
}
/** Returns an object with shorthand access for pattern design */
export function shorthand(part: Part, context: context): {} {
let final = (context.settings.mode === 'draft') ? true : false;
let paperless = (context.settings.paperless === true) ? true : false;
return {
measurements: context.settings.measurements || {},
options: context.options || {},
values: context.values || {},
points: part.points || {},
paths: part.paths || {},
snippets: part.snippets || {},
macro: part.macroRunner(),
final,
paperless
}
}

4894
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

55
package.json
View file

@ -1,13 +1,18 @@
{
"name": "freesewing",
"version": "0.3.3",
"version": "0.4.0",
"description": "A library for creating made-to-measure sewing patterns",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"main": "dist/module.js",
"unpkg": "dist/freesewing.min.js",
"scripts": {
"precommit": "npm run pretty && lint-staged",
"test": "mocha -r ts-node/register tests/*.test.js",
"build": "tsc",
"watch": "tsc -w --sourceMap"
"clean": "rimraf dist",
"pretty": "npx prettier --write \"src/*.js\"",
"lint": "eslint --fix \"src/*.js\"",
"browserbuild": "rollup -c rollup.browser.js",
"nodebuild": "rollup -c rollup.node.js",
"build": "npm run clean && npm run browserbuild && npm run nodebuild"
},
"repository": {
"type": "git",
@ -18,19 +23,45 @@
"bugs": {
"url": "https://github.com/joostdecock/freesewing/issues"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,json}": [
"prettier --write",
"git add"
]
},
"homepage": "https://github.com/joostdecock/freesewing#readme",
"dependencies": {
"bezier-js": "^2.2.13",
"hooks": "^0.3.2"
},
"devDependencies": {
"@types/bezier-js": "0.0.7",
"@types/chai": "^4.1.4",
"@types/mocha": "^5.2.4",
"@types/node": "^10.5.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"chai": "^4.1.2",
"eslint": "^5.2.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-prettier": "^2.6.2",
"husky": "^0.14.3",
"lint-staged": "^7.2.0",
"mocha": "^5.2.0",
"ts-node": "^7.0.0",
"typescript": "^2.9.2"
}
"prettier": "^1.13.7",
"rimraf": "^2.6.2",
"rollup-plugin-babel": "^3.0.7",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-filesize": "^4.0.1",
"rollup-plugin-json": "^3.0.0",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-terser": "^1.0.1"
},
"files": [
"dist/*",
"README.md",
"package-lock.json",
"package.json"
]
}

26
rollup.browser.js Normal file
View file

@ -0,0 +1,26 @@
import { terser } from "rollup-plugin-terser";
import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import json from "rollup-plugin-json";
export default {
input: "src/index.js",
output: {
file: "dist/freesewing.min.js",
format: "iife",
name: "freesewing",
banner: `/**\n * Freesewing\n * (c) ${new Date().getFullYear()} Joost De Cock\n * @license MIT\n */`
},
plugins: [
resolve({
browser: true
}),
json(),
commonjs(),
babel({
exclude: "node_modules/**"
}),
terser()
]
};

22
rollup.node.js Normal file
View file

@ -0,0 +1,22 @@
import filesize from "rollup-plugin-filesize";
import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";
import json from "rollup-plugin-json";
export default {
input: "src/index.js",
output: {
file: "dist/module.js",
format: "cjs"
},
plugins: [
resolve({
browser: false
}),
json(),
babel({
exclude: "node_modules/**"
}),
filesize()
]
};

52
src/attributes.js Normal file
View file

@ -0,0 +1,52 @@
function attributes(init = false) {
if (init) {
for (let key in init) {
let val = init[key];
this.add(key, val);
}
}
return this;
/** Adds an attribute */
this.prototype.add = function(name, value) {
if (typeof this.list[name] === "undefined") {
this.list[name] = [];
}
this.list[name].push(value);
return this;
};
/** Retrieves an attribute */
this.prototype.get = function(name) {
if (typeof this.list[name] === "undefined") return false;
else return this.list[name].join(" ");
};
/** Returns SVG code for attributes */
this.prototype.render = function() {
let svg = "";
for (let key in this.list) {
svg += ` ${key}="${this.list[key].join(" ")}"`;
}
return svg;
};
/** Returns SVG code for attributes with a fiven prefix
* typically used for data-text*/
this.prototype.renderIfPrefixIs = function(prefix = "") {
let svg = "";
let prefixLen = prefix.length;
for (let key in this.list) {
if (key.substr(0, prefixLen) === prefix) {
svg += ` ${key.substr(prefixLen)}="${this.list[key].join(" ")}"`;
}
}
return svg;
};
}
export default attributes;

19
src/hooks.js Normal file
View file

@ -0,0 +1,19 @@
export default function hooks() {
this._hooks = {};
this.all = ["preRenderSvg", "postRenderSvg", "insertText"];
this.prototype.list = function(hook) {
if (typeof this._hooks[hook] === "undefined") {
return false;
}
return this._hooks[hook];
};
this.prototype.attach = function(hook, obj) {
if (typeof this._hooks[hook] === "undefined") return;
for (let func of this._hooks[hook]) {
obj.pre(hook, func);
}
};
}

16
src/index.js Normal file
View file

@ -0,0 +1,16 @@
import pattern from "./pattern";
import point from "./point";
import path from "./path";
import snippet from "./snippet";
import * as utils from "./utils";
import { version } from "../package.json";
export default {
version: version,
pattern,
point,
path,
snippet,
utils
};

9
src/option.js Normal file
View file

@ -0,0 +1,9 @@
function option(config) {
this.id = config.id;
this.config = config;
this.val = config.val;
return this;
}
export default option;

32
src/part.js Normal file
View file

@ -0,0 +1,32 @@
import { macroName } from "./utils";
import point from "./point";
import * as hooklib from "hooks";
function part(id) {
attributes = new Attributes();
this.points = {};
this.paths = {};
this.snippets = {};
this.id = id;
this.render = id.substr(0, 1) === "_" ? false : true;
this.points.origin = new point(0, 0);
for (let k in hooklib) this[k] = hooklib[k];
return this;
this.prototype.macroRunner = function(args) {
let self = this;
let data = args;
let method = function(key, data) {
let macro = macroName(key);
if (typeof self[macro] === "function") {
self[macro](data);
}
};
return method;
};
}
export default part;

71
src/path.js Normal file
View file

@ -0,0 +1,71 @@
import attributes from "./attributes";
function path() {
this.render = true;
this.attributes = new attributes();
/** Adds a move operation to Point to */
this.prototype.move = function(to) {
this.ops.push({ type: "move", to });
return this;
};
/** Adds a line operation to Point to */
this.prototype.line = function(to) {
this.ops.push({ type: "line", to });
return this;
};
/** Adds a line operation to Point to */
this.prototype.curve = function(cp1, cp2, to) {
this.ops.push({ type: "curve", cp1, cp2, to });
return this;
};
/** Adds a close operation */
this.prototype.close = function() {
this.ops.push({ type: "close" });
return this;
};
/** Adds an attribute. This is here to make this call chainable in assignment */
this.prototype.attr = function(name, value) {
this.attributes.add(name, value);
return this;
};
/** Returns SVG pathstring for this path */
this.prototype.asPathstring = function() {
let d = "";
for (let op of this.ops) {
switch (op.type) {
case "move":
d += `M ${op.to.x},${op.to.y}`;
break;
case "line":
d += ` L ${op.to.x},${op.to.y}`;
break;
case "curve":
d += ` C ${op.cp1.x},${op.cp1.y} ${op.cp2.x},${op.cp2.y} ${op.to.x},${
op.to.y
}`;
break;
case "close":
d += " z";
break;
default:
throw `${op.type} is not a valid path command`;
break;
}
}
return d;
};
}
export default path;

115
src/pattern.js Normal file
View file

@ -0,0 +1,115 @@
import { macroName } from "./utils";
import part from "./part";
import svg from "./svg";
import hooks from "./hooks";
export default function pattern(config = false) {
// Allow no-config patterns
if (!config) {
this.config = {
parts: ["part"],
measurements: {},
options: {}
};
} else {
this.config = config;
}
if (
typeof config.parts === "undefined" ||
!config.parts ||
config.parts.length < 1
) {
throw "Could not create pattern: You should define at least one part in your pattern config";
}
// Constructors
this.point = point;
this.path = path;
this.snippet = snippet;
// Svg and hooks instance
this.svg = new svg(this);
this.hooks = new hooks();
// Data containers
this.values = {};
this.parts = {};
for (let id of config.parts) {
this.parts[id] = new part(id);
}
this.options = {};
if (typeof config.options !== "undefined" && config.options.length > 0) {
for (let conf of config.options) {
if (conf.type === "percentage") this.options[conf.id] = conf.val / 100;
else this.options[conf.id] = conf.val;
}
}
// Context object to pass around
this.context = {
parts: this.parts,
options: this.options,
values: this.values,
config: this.config
};
return this;
/**
* @throws Will throw an error when called
*/
this.prototype.draft = function() {
throw Error(
"You have to implement the draft() method in your Pattern instance."
);
};
this.prototype.render = function() {
this.hooks.attach("preRenderSvg", this.svg);
this.hooks.attach("postRenderSvg", this.svg);
//this.hooks.attach('insertText', this.svg);
return this.svg.render(this);
};
this.prototype.on = function(hook, method) {
if (typeof this.hooks._hooks[hook] === "undefined") {
this.hooks._hooks[hook] = [];
}
this.hooks._hooks[hook].push(method);
};
this.prototype.macro = function(key, method) {
let name = macroName(key);
this.on(name, method);
for (let partId in this.parts) {
let part = this.parts[partId];
part[name] = () => null;
this.hooks.attach(name, part);
}
};
this.prototype.withPlugin(plugin);
{
if (plugin.hooks) this.loadPluginHooks(plugin);
if (plugin.macros) this.loadPluginMacros(plugin);
return this;
}
this.prototype.loadPluginHooks = function(plugin) {
for (let hook of this.hooks.all) {
if (typeof plugin.hooks[hook] === "function") {
this.on(hook, plugin.hooks[hook]);
}
}
};
this.prototype.loadPluginMacros = function(plugin) {
for (let macro in plugin.macros) {
if (typeof plugin.macros[macro] === "function") {
this.macro(macro, plugin.macros[macro]);
}
}
};
}

104
lib/point.ts → src/point.js
View file

@ -1,108 +1,118 @@
import { round, rad2deg, deg2rad } from './utils';
import { Attributes } from './attributes'
import attributes from "./attributes";
export class Point {
x: number;
y: number;
attributes: Attributes = new Attributes();
function point(x, y) {
this.x = this.round(x);
this.y = this.round(y);
this.attributes = new attributes();
constructor(x: number, y: number) {
this.x = round(x);
this.y = round(y);
return this;
return this;
/** Rounds a value to PRECISION */
this.prototype.round = function(value) {
return Math.round(value * 1e2) / 1e2;
};
/** Radians to degrees */
this.prototype.rad2deg = function(radians) {
return radians * 57.29577951308232;
};
/** Degrees to radians */
this.prototype.deg2rad(degrees);
{
return degrees / 57.29577951308232;
}
/** Adds an attribute. This is here to make this call chainable in assignment */
attr(name: string, value: string): Point {
this.prototype.attr = function(name, value) {
this.attributes.add(name, value);
return this;
}
};
/** Returns the distance between this point and that point */
dist(that: Point): number {
this.prototype.dist = function(that) {
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 this.round(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)));
};
/** Returns slope of a line made by this point and that point */
slope(that: Point): number {
this.prototype.slope = function(that) {
return (that.y - this.y) / (that.x - this.x);
}
};
/** Returns the x-delta between this point and that point */
dx(that: Point): number {
this.prototype.dx = function(that) {
return that.x - this.x;
}
};
/** Returns the y-delta between this point and that point */
dy(that: Point): number {
this.prototype.dy = function(that) {
return that.y - this.y;
}
};
/** Returns the angle between this point and that point */
angle(that: Point): number {
this.prototype.angle = function(that) {
let rad = Math.atan2(-1 * this.dy(that), this.dx(that));
while (rad < 0) rad += 2 * Math.PI;
return rad2deg(rad);
}
return this.rad2deg(rad);
};
/** Rotate this point deg around that point */
rotate(deg: number, that: Point): Point {
this.prototype.rotate = function(deg, that) {
let radius = this.dist(that);
let angle = this.angle(that);
let x = that.x + radius * Math.cos(deg2rad(angle + deg)) * -1;
let y = that.y + radius * Math.sin(deg2rad(angle + deg));
let x = that.x + radius * Math.cos(this.deg2rad(angle + deg)) * -1;
let y = that.y + radius * Math.sin(this.deg2rad(angle + deg));
return new Point(x, y);
}
};
/** returns an identical copy of this point */
copy(): Point {
this.prototype.copy = function() {
return new Point(this.x, this.y);
}
};
/** checks whether this point is equal to that point */
equals(that: Point): boolean {
return (this.x === that.x && this.y === that.y) ? true : false;
}
this.prototype.equals = function(that) {
return this.x === that.x && this.y === that.y ? true : false;
};
/** Mirrors this point around X value of that point */
flipX(that: Point): Point
{
this.prototype.flipX = function(that) {
return new Point(that.x + this.dx(that), that.y);
}
};
/** Mirrors this point around Y value of that point */
flipY(that: Point): Point
{
this.prototype.flipY = function(that) {
return new Point(that.x, that.y + this.dy(that));
}
};
/** Shifts this point distance in the deg direction */
shift(deg: number, distance: number): Point {
this.prototype.shift = function(deg, distance) {
let p = this.copy();
p.x += distance;
return p.rotate(deg, this);
}
};
/** Shifts this point distance in the direction of that point */
shiftTowards(that: Point, distance: number): Point {
this.prototype.shiftTowards = function(that, distance) {
return this.shift(this.angle(that), distance);
}
};
/** Shifts this point fraction of the distance towards that point */
shiftFractionTowards(that: Point, fraction: number): Point {
this.prototype.shiftFractionTowards = function(that, fraction) {
return this.shiftTowards(that, this.dist(that) * fraction);
}
};
/** Shifts this point distance beyond that point */
shiftOutwards(that: Point, distance: number): Point {
this.prototype.shiftOutwards = function(that, distance) {
return this.shiftTowards(that, this.dist(that) + distance);
}
};
}
export default point;

12
src/snippet.js Normal file
View file

@ -0,0 +1,12 @@
import attributes from "./attributes";
function snippet(def, anchor, description = "") {
this.def = def;
this.anchor = anchor;
this.description = description;
this.attributes = new attributes();
return this;
}
export default snippet;

245
src/svg.js Normal file
View file

@ -0,0 +1,245 @@
import attributes from "./attributes";
import * as hooklib from "hooks";
import hooks from "./hooks";
function svg(pattern) {
this.body = "";
this.style = "";
this.script = "";
this.header = "";
this.footer = "";
this.defs = "";
this.pattern = pattern; // Needed to expose pattern to hooks
this.prefix = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
this.attributes = new attributes();
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.hooks = hooks.all;
for (let k in hooklib) this[k] = hooklib[k];
for (let k in this.hooks) this.hook(k, this[k]);
return this;
/** Method to attach preRenderSvg hooks on */
this.prototype.preRenderSvg = function() {};
/** Method to attach postRenderSvg hooks on */
this.prototype.postRenderSvg = function() {};
/** Method to attach insertText hooks on */
this.prototype.insertText = function() {};
/** Renders a draft object as SVG */
this.prototype.render = function(pattern) {
this.preRenderSvg();
this.svg = this.prefix;
this.svg += this.renderComments(this.header);
this.svg += this.renderSvgTag(pattern);
this.svg += this.renderStyle();
this.svg += this.renderScript();
this.svg += this.renderDefs();
this.svg += this.openGroup("draftContainer");
for (let partId in pattern.parts) {
let part = pattern.parts[partId];
if (part.render) {
this.svg += this.openGroup(part.id, part.attributes);
this.svg += this.renderPart(part);
this.svg += this.closeGroup();
}
}
this.svg += this.closeGroup();
this.svg += this.nl() + "</svg>";
this.svg += this.renderComments(this.footer);
this.postRenderSvg();
return this.svg;
};
/** Returns SVG code for the opening SVG tag */
this.prototype.renderSvgTag = funtion(pattern);
{
let svg = "<svg";
this.indent();
svg += this.nl() + this.attributes.render();
this.outdent();
svg += this.nl() + ">" + this.nl();
return svg;
}
/** Returns SVG code for the style block */
this.prototype.renderStyle = function() {
let svg = '<style type="text/css"> <![CDATA[ ';
this.indent();
svg += this.nl() + this.style;
this.outdent();
svg += this.nl() + "]]>" + this.nl() + "</style>" + this.nl();
return svg;
};
/** Returns SVG code for the script block */
this.prototype.renderScript = function() {
let svg = '<script type="text/javascript"> <![CDATA[';
this.indent();
svg += this.nl() + this.script;
this.outdent();
svg += this.nl() + "]]>" + this.nl() + "</script>" + this.nl();
return svg;
};
/** Returns SVG code for the defs block */
this.prototype.renderDefs = function() {
let svg = '<defs id="defs">';
this.indent();
svg += this.nl() + this.defs;
this.outdent();
svg += this.nl() + "</defs>" + this.nl();
return svg;
};
/** Returns SVG code for a comment block */
this.prototype.renderComments = function(comments) {
return (
this.nl() + this.nl() + "<!--" + this.nl() + comments + this.nl() + "-->"
);
};
/** Returns SVG code for a Part object */
this.prototype.renderPart = function(part) {
let svg = "";
for (let key in part.paths) {
let path = part.paths[key];
if (path.render) svg += this.renderPath(path);
}
for (let key in part.points) {
if (part.points[key].attributes.get("data-text")) {
svg += this.renderPoint(part.points[key]);
}
}
for (let key in part.snippets) {
let snippet = part.snippets[key];
svg += this.renderSnippet(snippet);
}
return svg;
};
/** Returns SVG code for a Point object */
this.prototype.renderPoint = function(point) {
let svg = "";
if (point.attributes.get("data-text")) svg += this.renderText(point);
return svg;
};
/** Returns SVG code for a Path object */
this.prototype.renderPath = function(path) {
if (!path.attributes.get("id")) path.attributes.add("id", this.getUid());
path.attributes.add("d", path.asPathstring());
return `${this.nl()}<path ${path.attributes.render()} />${this.renderPathText(
path
)}`;
};
this.prototype.renderPathText = function(path) {
let text = path.attributes.get("data-text");
if (!text) return false;
let attributes = path.attributes.renderIfPrefixIs("data-text-");
let svg = this.nl() + "<text>";
this.indent();
svg += `<textPath xlink:href="#${path.attributes.get(
"id"
)}" startOffset="50%"><tspan ${attributes}>${text}</tspan></textPath>`;
this.outdent();
svg += this.nl() + "</text>";
return svg;
};
this.prototype.renderText = function(point) {
let text = point.attributes.get("data-text");
if (!text) return false;
point.attributes.add("data-text-x", point.x);
point.attributes.add("data-text-y", point.y);
let attributes = point.attributes.renderIfPrefixIs("data-text-");
let svg = `${this.nl()}<text ${point.attributes.renderIfPrefixIs(
"data-text-"
)}>`;
this.indent();
svg += `<tspan>${text}</tspan>`;
this.outdent();
svg += this.nl() + "</text>";
return svg;
};
/** Returns SVG code for a snippet */
this.prototype.renderSnippet = function(snippet) {
let svg = this.nl();
svg += `<use x="${snippet.anchor.x}" y="${snippet.anchor.y}" `;
svg += `xlink:href="#${snippet.def}" ${snippet.attributes.render()}>`;
if (snippet.description) {
svg += `<title>${snippet.description}</title>`;
}
svg += "</use>";
return svg;
};
/** Returns SVG code to open a group */
this.prototype.openGroup = function(id) {
let svg = this.nl() + this.nl();
svg += `<!-- Start of group #${id} -->`;
svg += this.nl();
svg += `<g id="${id}">`;
this.indent();
this.openGroups.push(id);
return svg;
};
/** Returns SVG code to close a group */
this.prototype.closeGroup = function() {
this.outdent();
return `${this.nl()}</g>${this.nl()}<!-- end of group #${this.openGroups.pop()} -->`;
};
/** Returns a linebreak + identation */
this.prototype.nl = function() {
return "\n" + this.tab();
};
/** Returns indentation */
this.prototype.tab = function() {
let space = "";
for (let i = 0; i < this.tabs; i++) {
space += " ";
}
return space;
};
/** Increases indentation by 1 */
this.prototype.indent = function() {
this.tabs += 1;
};
/** Decreases indentation by 1 */
this.prototype.outdent = function() {
this.tabs -= 1;
};
/** Returns an unused ID */
this.prototype.getUid = function() {
this.freeId += 1;
return "" + this.freeId;
};
}
export default svg;

81
src/utils.js Normal file
View file

@ -0,0 +1,81 @@
import point from "./point";
/** Returns internal hook name for a macro */
export function macroName(name) {
return `_macro_${name}`;
}
/** Find intersection of two (endless) lines */
export function beamsCross(a1, a2, b1, b2) {
let slopeA = a1.slope(a2);
let slopeB = b1.slope(b2);
if (slopeA === slopeB) return false; // Parallel lines
if (a1.x === a2.x)
return new point(a1.x, slopeB * a1.x + (b1.y - slopeB * b1.x));
// Vertical line A
else if (b1.x === b2.x)
return new point(b1.x, slopeA * b1.x + (a1.y - slopeA * a1.x));
// Vertical line B
else {
// Swap points if line A or B goes from right to left
if (a1.x > a2.x) {
let tmp = a1.copy();
a1 = a2.copy();
a2 = tmp;
}
if (b1.x > b2.x) {
let tmp = b1.copy();
b1 = b2.copy();
b2 = tmp;
}
// Find y intercept
let iA = a1.y - slopeA * a1.x;
let iB = b1.y - slopeB * b1.x;
// Find intersection
let x = (iB - iA) / (slopeA - slopeB);
let y = slopeA * x + iA;
return new point(x, y);
}
}
/** Find intersection of two line segments */
export function linesCross(a1, a2, b1, b2) {
let p = beamsCross(a1, a2, b1, b2);
if (p) {
let lenA = a1.dist(a2);
let lenB = b1.dist(b2);
let lenC = a1.dist(p) + p.dist(a2);
let lenD = b1.dist(p) + p.dist(b2);
if (round(lenA) == round(lenC) && round(lenB) == round(lenD)) return p;
}
return false;
}
/** Find where an (endless) line crosses a certain Y-value */
export function beamCrossesY(from, to, y) {
if (from.y === to.y) return false; // Horizontal line
let left = new point(-10, y);
let right = new point(10, y);
return beamsCross(from, to, left, right);
}
/** Returns an object with shorthand access for pattern design */
export function shorthand(part, context) {
let final = context.settings.mode === "draft" ? true : false;
let paperless = context.settings.paperless === true ? true : false;
return {
measurements: context.settings.measurements || {},
options: context.options || {},
values: context.values || {},
points: part.points || {},
paths: part.paths || {},
snippets: part.snippets || {},
macro: part.macroRunner(),
final,
paperless
};
}

10
tsconfig.json
View file

@ -1,10 +0,0 @@
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
}
}