Joost De Cock
GitHub
commit
9934b54566
32 changed files with 5421 additions and 1156 deletions
8
.eslintrc.js
Normal file
8
.eslintrc.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: ["prettier"],
|
||||||
|
rules: {
|
||||||
|
"prettier/prettier": "error"
|
||||||
|
},
|
||||||
|
extends: "plugin:prettier/recommended",
|
||||||
|
parser: "babel-eslint"
|
||||||
|
};
|
||||||
|
|
@ -1 +1 @@
|
||||||
lib/
|
dist/
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,7 @@
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
# freesewing
|
# freesewing
|
||||||
A port of [freesewing core](https://github.com/freesewing/core)
|
A port of [freesewing core](https://github.com/freesewing/core) to node.js.
|
||||||
to node.js, using [TypeScript](https://www.typescriptlang.org/).
|
|
||||||
|
|
||||||
> This is alpha code.
|
> This is alpha code.
|
||||||
|
|
||||||
|
|
|
||||||
28
index.ts
28
index.ts
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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
1
lib/hooks.d.ts
vendored
|
|
@ -1 +0,0 @@
|
||||||
declare module 'hooks';
|
|
||||||
24
lib/hooks.ts
24
lib/hooks.ts
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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
41
lib/part.ts
|
|
@ -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
76
lib/path.ts
|
|
@ -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
111
lib/pattern.ts
|
|
@ -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]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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
251
lib/svg.ts
|
|
@ -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
74
lib/types.ts
|
|
@ -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
89
lib/utils.ts
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
4886
package-lock.json
generated
4886
package-lock.json
generated
File diff suppressed because it is too large
Load diff
55
package.json
55
package.json
|
|
@ -1,13 +1,18 @@
|
||||||
{
|
{
|
||||||
"name": "freesewing",
|
"name": "freesewing",
|
||||||
"version": "0.3.3",
|
"version": "0.4.0",
|
||||||
"description": "A library for creating made-to-measure sewing patterns",
|
"description": "A library for creating made-to-measure sewing patterns",
|
||||||
"main": "dist/index.js",
|
"main": "dist/module.js",
|
||||||
"types": "dist/index.d.ts",
|
"unpkg": "dist/freesewing.min.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"precommit": "npm run pretty && lint-staged",
|
||||||
"test": "mocha -r ts-node/register tests/*.test.js",
|
"test": "mocha -r ts-node/register tests/*.test.js",
|
||||||
"build": "tsc",
|
"clean": "rimraf dist",
|
||||||
"watch": "tsc -w --sourceMap"
|
"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": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
@ -18,19 +23,45 @@
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/joostdecock/freesewing/issues"
|
"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",
|
"homepage": "https://github.com/joostdecock/freesewing#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bezier-js": "^2.2.13",
|
"bezier-js": "^2.2.13",
|
||||||
"hooks": "^0.3.2"
|
"hooks": "^0.3.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/bezier-js": "0.0.7",
|
"babel-core": "^6.26.3",
|
||||||
"@types/chai": "^4.1.4",
|
"babel-eslint": "^8.2.6",
|
||||||
"@types/mocha": "^5.2.4",
|
|
||||||
"@types/node": "^10.5.2",
|
|
||||||
"chai": "^4.1.2",
|
"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",
|
"mocha": "^5.2.0",
|
||||||
"ts-node": "^7.0.0",
|
"prettier": "^1.13.7",
|
||||||
"typescript": "^2.9.2"
|
"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
26
rollup.browser.js
Normal 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
22
rollup.node.js
Normal 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
52
src/attributes.js
Normal 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
19
src/hooks.js
Normal 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
16
src/index.js
Normal 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
9
src/option.js
Normal 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
32
src/part.js
Normal 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
71
src/path.js
Normal 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
115
src/pattern.js
Normal 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]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -1,108 +1,118 @@
|
||||||
import { round, rad2deg, deg2rad } from './utils';
|
import attributes from "./attributes";
|
||||||
import { Attributes } from './attributes'
|
|
||||||
|
|
||||||
export class Point {
|
function point(x, y) {
|
||||||
x: number;
|
this.x = this.round(x);
|
||||||
y: number;
|
this.y = this.round(y);
|
||||||
attributes: Attributes = new Attributes();
|
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 */
|
/** 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);
|
this.attributes.add(name, value);
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Returns the distance between this point and that point */
|
/** 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 dx = this.x - that.x;
|
||||||
let dy = this.y - that.y;
|
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 */
|
/** 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);
|
return (that.y - this.y) / (that.x - this.x);
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Returns the x-delta between this point and that point */
|
/** Returns the x-delta between this point and that point */
|
||||||
dx(that: Point): number {
|
this.prototype.dx = function(that) {
|
||||||
return that.x - this.x;
|
return that.x - this.x;
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Returns the y-delta between this point and that point */
|
/** Returns the y-delta between this point and that point */
|
||||||
dy(that: Point): number {
|
this.prototype.dy = function(that) {
|
||||||
return that.y - this.y;
|
return that.y - this.y;
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Returns the angle between this point and that point */
|
/** 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));
|
let rad = Math.atan2(-1 * this.dy(that), this.dx(that));
|
||||||
while (rad < 0) rad += 2 * Math.PI;
|
while (rad < 0) rad += 2 * Math.PI;
|
||||||
|
|
||||||
return rad2deg(rad);
|
return this.rad2deg(rad);
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Rotate this point deg around that point */
|
/** 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 radius = this.dist(that);
|
||||||
let angle = this.angle(that);
|
let angle = this.angle(that);
|
||||||
let x = that.x + radius * Math.cos(deg2rad(angle + deg)) * -1;
|
let x = that.x + radius * Math.cos(this.deg2rad(angle + deg)) * -1;
|
||||||
let y = that.y + radius * Math.sin(deg2rad(angle + deg));
|
let y = that.y + radius * Math.sin(this.deg2rad(angle + deg));
|
||||||
|
|
||||||
return new Point(x, y);
|
return new Point(x, y);
|
||||||
}
|
};
|
||||||
|
|
||||||
/** returns an identical copy of this point */
|
/** returns an identical copy of this point */
|
||||||
copy(): Point {
|
this.prototype.copy = function() {
|
||||||
return new Point(this.x, this.y);
|
return new Point(this.x, this.y);
|
||||||
}
|
};
|
||||||
|
|
||||||
/** checks whether this point is equal to that point */
|
/** checks whether this point is equal to that point */
|
||||||
equals(that: Point): boolean {
|
this.prototype.equals = function(that) {
|
||||||
return (this.x === that.x && this.y === that.y) ? true : false;
|
return this.x === that.x && this.y === that.y ? true : false;
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Mirrors this point around X value of that point */
|
/** 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);
|
return new Point(that.x + this.dx(that), that.y);
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Mirrors this point around Y value of that point */
|
/** 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));
|
return new Point(that.x, that.y + this.dy(that));
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Shifts this point distance in the deg direction */
|
/** Shifts this point distance in the deg direction */
|
||||||
shift(deg: number, distance: number): Point {
|
this.prototype.shift = function(deg, distance) {
|
||||||
let p = this.copy();
|
let p = this.copy();
|
||||||
p.x += distance;
|
p.x += distance;
|
||||||
|
|
||||||
return p.rotate(deg, this);
|
return p.rotate(deg, this);
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Shifts this point distance in the direction of that point */
|
/** 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);
|
return this.shift(this.angle(that), distance);
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Shifts this point fraction of the distance towards that point */
|
/** 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);
|
return this.shiftTowards(that, this.dist(that) * fraction);
|
||||||
}
|
};
|
||||||
|
|
||||||
/** Shifts this point distance beyond that point */
|
/** 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);
|
return this.shiftTowards(that, this.dist(that) + distance);
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default point;
|
||||||
12
src/snippet.js
Normal file
12
src/snippet.js
Normal 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
245
src/svg.js
Normal 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
81
src/utils.js
Normal 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
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es6",
|
|
||||||
"module": "commonjs",
|
|
||||||
"declaration": true,
|
|
||||||
"outDir": "./dist",
|
|
||||||
"strict": true,
|
|
||||||
"esModuleInterop": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue