:contruction: Porting TS to JS
This commit is contained in:
joostdecock
parent
2dbebb87d6
commit
1f10829426
26 changed files with 1910 additions and 792 deletions
|
|
@ -1 +1 @@
|
|||
lib/
|
||||
dist/
|
||||
|
|
|
|||
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,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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
1763
package-lock.json
generated
1763
package-lock.json
generated
File diff suppressed because it is too large
Load diff
22
package.json
22
package.json
|
|
@ -2,12 +2,13 @@
|
|||
"name": "freesewing",
|
||||
"version": "0.3.3",
|
||||
"description": "A library for creating made-to-measure sewing patterns",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"test": "mocha -r ts-node/register tests/*.test.js",
|
||||
"build": "tsc",
|
||||
"watch": "tsc -w --sourceMap"
|
||||
"clean": "rimraf dist",
|
||||
"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",
|
||||
|
|
@ -24,13 +25,14 @@
|
|||
"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",
|
||||
"chai": "^4.1.2",
|
||||
"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-filesize": "^4.0.1",
|
||||
"rollup-plugin-node-resolve": "^3.3.0",
|
||||
"rollup-plugin-terser": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
21
rollup.browser.js
Normal file
21
rollup.browser.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { terser } from "rollup-plugin-terser";
|
||||
import babel from 'rollup-plugin-babel';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
|
||||
export default {
|
||||
input: 'src/index.js'
|
||||
, output: {
|
||||
file: 'dist/_bundle.js'
|
||||
, format: 'iife'
|
||||
, name: 'freesewing'
|
||||
}
|
||||
, plugins: [
|
||||
resolve({
|
||||
browser: true
|
||||
})
|
||||
, 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 { terser } from "rollup-plugin-terser";
|
||||
import babel from 'rollup-plugin-babel';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
|
||||
export default {
|
||||
input: 'src/index.js'
|
||||
, output: {
|
||||
file: 'dist/bundle.js'
|
||||
, format: 'cjs'
|
||||
}
|
||||
, plugins: [
|
||||
resolve({
|
||||
browser: false
|
||||
})
|
||||
, babel({
|
||||
exclude: 'node_modules/**'
|
||||
})
|
||||
, terser()
|
||||
, filesize()
|
||||
]
|
||||
};
|
||||
|
|
@ -1,34 +1,35 @@
|
|||
export class Attributes {
|
||||
list: any = {};
|
||||
|
||||
constructor(init?) {
|
||||
function attributes (init = false)
|
||||
{
|
||||
if(init) {
|
||||
for (let key in init) {
|
||||
let val = init[key];
|
||||
this.add(key, val);
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
/** Adds an attribute */
|
||||
add(name: string, value: string): Attributes {
|
||||
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 */
|
||||
get(name: string): string {
|
||||
this.prototype.get = function (name)
|
||||
{
|
||||
if(typeof this.list[name] === 'undefined') return false;
|
||||
else return this.list[name].join(' ');
|
||||
}
|
||||
|
||||
/** Returns SVG code for attributes */
|
||||
render(): string {
|
||||
this.prototype.render = function ()
|
||||
{
|
||||
let svg = '';
|
||||
for (let key in this.list) {
|
||||
svg += ` ${key}="${this.list[key].join(' ')}"`;
|
||||
|
|
@ -39,7 +40,8 @@ export class Attributes {
|
|||
|
||||
/** Returns SVG code for attributes with a fiven prefix
|
||||
* typically used for data-text*/
|
||||
renderIfPrefixIs(prefix:string = ''): string {
|
||||
this.prototype.renderIfPrefixIs = function (prefix = '')
|
||||
{
|
||||
let svg = '';
|
||||
let prefixLen = prefix.length;
|
||||
for (let key in this.list) {
|
||||
|
|
@ -51,3 +53,5 @@ export class Attributes {
|
|||
return svg;
|
||||
}
|
||||
}
|
||||
|
||||
export default attributes;
|
||||
22
src/hooks.js
Normal file
22
src/hooks.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
14
src/index.js
Normal file
14
src/index.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import pattern from './pattern'
|
||||
import point from './point'
|
||||
import path from './path'
|
||||
import snippet from './snippet'
|
||||
import * as utils from './utils'
|
||||
|
||||
export default {
|
||||
version: require('../package.json').version
|
||||
, pattern
|
||||
, point
|
||||
, path
|
||||
, snippet
|
||||
, utils
|
||||
}
|
||||
10
src/option.js
Normal file
10
src/option.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
function option (config)
|
||||
{
|
||||
this.id = config.id;
|
||||
this.config = config;
|
||||
this.val = config.val;
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
export default option;
|
||||
35
src/part.js
Normal file
35
src/part.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
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;
|
||||
|
|
@ -1,65 +1,64 @@
|
|||
import { Point } from './point'
|
||||
import { Attributes } from './attributes'
|
||||
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();
|
||||
function path ()
|
||||
{
|
||||
this.render = true;
|
||||
this.attributes = new attributes();
|
||||
|
||||
/** Adds a move operation to Point to */
|
||||
move(to: Point): Path {
|
||||
this.prototype.move = function (to)
|
||||
{
|
||||
this.ops.push({type: "move", to});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/** Adds a line operation to Point to */
|
||||
line(to: Point): Path {
|
||||
this.prototype.line = function (to)
|
||||
{
|
||||
this.ops.push({type: "line", to});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/** Adds a line operation to Point to */
|
||||
curve(cp1: Point, cp2: Point, to: Point): Path {
|
||||
this.prototype.curve = function (cp1, cp2, to)
|
||||
{
|
||||
this.ops.push({type: "curve", cp1, cp2, to});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/** Adds a close operation */
|
||||
close(): Path {
|
||||
this.prototype.close = function ()
|
||||
{
|
||||
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.prototype.attr = function (name, value)
|
||||
{
|
||||
this.attributes.add(name, value);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/** Returns SVG pathstring for this path */
|
||||
asPathstring() {
|
||||
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}`;
|
||||
d += `M ${op.to.x},${op.to.y}`;
|
||||
break;
|
||||
case 'line':
|
||||
d += ` L ${op.to!.x},${op.to!.y}`;
|
||||
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}`;
|
||||
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';
|
||||
|
|
@ -72,5 +71,6 @@ export class Path {
|
|||
|
||||
return d;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default path;
|
||||
116
src/pattern.js
Normal file
116
src/pattern.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
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,90 +1,113 @@
|
|||
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();
|
||||
|
||||
constructor(x: number, y: number) {
|
||||
this.x = round(x);
|
||||
this.y = round(y);
|
||||
function point (x, y)
|
||||
{
|
||||
this.x = this.round(x);
|
||||
this.y = this.round(y);
|
||||
this.attributes = new attributes();
|
||||
|
||||
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 {
|
||||
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;
|
||||
|
||||
|
|
@ -92,17 +115,22 @@ export class 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);
|
||||
}
|
||||
|
||||
/** 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;
|
||||
13
src/snippet.js
Normal file
13
src/snippet.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
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;
|
||||
|
|
@ -1,49 +1,39 @@
|
|||
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'
|
||||
import attributes from './attributes'
|
||||
import * as 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) {
|
||||
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 = ['preRenderSvg', 'postRenderSvg'];
|
||||
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 */
|
||||
preRenderSvg(): void {}
|
||||
this.prototype.preRenderSvg = function() {};
|
||||
|
||||
/** Method to attach postRenderSvg hooks on */
|
||||
postRenderSvg(): void {}
|
||||
this.prototype.postRenderSvg = function() {};
|
||||
|
||||
/** Method to attach insertText hooks on */
|
||||
this.prototype.insertText = function() {};
|
||||
|
||||
/** Renders a draft object as SVG */
|
||||
render(pattern: Pattern): string {
|
||||
this.prototype.render = function (pattern)
|
||||
{
|
||||
this.preRenderSvg();
|
||||
this.svg = this.prefix;
|
||||
this.svg += this.renderComments(this.header);
|
||||
|
|
@ -68,7 +58,8 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code for the opening SVG tag */
|
||||
renderSvgTag(pattern: Pattern) {
|
||||
this.prototype.renderSvgTag = funtion (pattern)
|
||||
{
|
||||
let svg = '<svg';
|
||||
this.indent();
|
||||
svg += this.nl()+this.attributes.render();
|
||||
|
|
@ -79,7 +70,8 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code for the style block */
|
||||
renderStyle() {
|
||||
this.prototype.renderStyle = function ()
|
||||
{
|
||||
let svg = '<style type="text/css"> <![CDATA[ ';
|
||||
this.indent();
|
||||
svg += this.nl()+this.style;
|
||||
|
|
@ -89,7 +81,8 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code for the script block */
|
||||
renderScript() {
|
||||
this.prototype.renderScript = function ()
|
||||
{
|
||||
let svg = '<script type="text/javascript"> <![CDATA[';
|
||||
this.indent();
|
||||
svg += this.nl()+this.script;
|
||||
|
|
@ -100,7 +93,8 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code for the defs block */
|
||||
renderDefs() {
|
||||
this.prototype.renderDefs = function ()
|
||||
{
|
||||
let svg = '<defs id="defs">';
|
||||
this.indent();
|
||||
svg += this.nl()+this.defs;
|
||||
|
|
@ -111,12 +105,14 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code for a comment block */
|
||||
renderComments(comments: string) {
|
||||
this.prototype.renderComments = function (comments)
|
||||
{
|
||||
return this.nl()+this.nl()+'<!--'+this.nl()+comments+this.nl()+'-->';
|
||||
}
|
||||
|
||||
/** Returns SVG code for a Part object */
|
||||
renderPart(part: Part): string {
|
||||
this.prototype.renderPart = function (part)
|
||||
{
|
||||
let svg = '';
|
||||
for (let key in part.paths) {
|
||||
let path = part.paths[key];
|
||||
|
|
@ -136,7 +132,7 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code for a Point object */
|
||||
renderPoint(point: Point): string
|
||||
this.prototype.renderPoint = function (point)
|
||||
{
|
||||
let svg = ''
|
||||
if(point.attributes.get('data-text')) svg += this.renderText(point);
|
||||
|
|
@ -145,7 +141,7 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code for a Path object */
|
||||
renderPath(path: Path): string
|
||||
this.prototype.renderPath = function (path)
|
||||
{
|
||||
if(!path.attributes.get('id')) path.attributes.add('id', this.getUid());
|
||||
path.attributes.add('d', path.asPathstring());
|
||||
|
|
@ -153,7 +149,7 @@ export class Svg {
|
|||
return `${this.nl()}<path ${path.attributes.render()} />${this.renderPathText(path)}`;
|
||||
}
|
||||
|
||||
renderPathText(path: Path): string
|
||||
this.prototype.renderPathText = function (path)
|
||||
{
|
||||
let text = path.attributes.get('data-text');
|
||||
if(!text) return false;
|
||||
|
|
@ -167,7 +163,7 @@ export class Svg {
|
|||
return svg;
|
||||
}
|
||||
|
||||
renderText(point: Point): string
|
||||
this.prototype.renderText = function (point)
|
||||
{
|
||||
let text = point.attributes.get('data-text');
|
||||
if(!text) return false;
|
||||
|
|
@ -185,7 +181,7 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code for a snippet */
|
||||
renderSnippet(snippet: Snippet): string
|
||||
this.prototype.renderSnippet = function (snippet)
|
||||
{
|
||||
let svg = this.nl();
|
||||
svg += `<use x="${snippet.anchor.x}" y="${snippet.anchor.y}" `
|
||||
|
|
@ -199,7 +195,8 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code to open a group */
|
||||
openGroup(id: string, attributes?: Attributes): string {
|
||||
this.prototype.openGroup = function (id)
|
||||
{
|
||||
let svg = this.nl()+this.nl();
|
||||
svg += `<!-- Start of group #${id} -->`;
|
||||
svg += this.nl();
|
||||
|
|
@ -211,19 +208,22 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Returns SVG code to close a group */
|
||||
closeGroup(): string {
|
||||
this.prototype.closeGroup = function ()
|
||||
{
|
||||
this.outdent();
|
||||
|
||||
return `${this.nl()}</g>${this.nl()}<!-- end of group #${this.openGroups.pop()} -->`;
|
||||
}
|
||||
|
||||
/** Returns a linebreak + identation */
|
||||
nl(): string {
|
||||
this.prototype.nl = function ()
|
||||
{
|
||||
return "\n"+this.tab();
|
||||
}
|
||||
|
||||
/** Returns indentation */
|
||||
tab(): string {
|
||||
this.prototype.tab = function ()
|
||||
{
|
||||
let space = '';
|
||||
for (let i = 0; i < this.tabs; i++) {
|
||||
space += ' ';
|
||||
|
|
@ -233,19 +233,24 @@ export class Svg {
|
|||
}
|
||||
|
||||
/** Increases indentation by 1 */
|
||||
indent(): void {
|
||||
this.prototype.indent = function ()
|
||||
{
|
||||
this.tabs += 1;
|
||||
}
|
||||
|
||||
/** Decreases indentation by 1 */
|
||||
outdent(): void {
|
||||
this.prototype.outdent = function ()
|
||||
{
|
||||
this.tabs -= 1;
|
||||
}
|
||||
|
||||
/** Returns an unused ID */
|
||||
getUid() {
|
||||
this.prototype.getUid = function ()
|
||||
{
|
||||
this.freeId += 1;
|
||||
|
||||
return ''+this.freeId;
|
||||
}
|
||||
}
|
||||
|
||||
export default svg;
|
||||
|
|
@ -1,30 +1,20 @@
|
|||
import { Part } from './part'
|
||||
import { Point } from './point'
|
||||
import {context} from './types'
|
||||
import point from './point'
|
||||
|
||||
/** 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;
|
||||
/** Returns internal hook name for a macro */
|
||||
export function macroName (name)
|
||||
{
|
||||
return `_macro_${name}`;
|
||||
}
|
||||
|
||||
/** Find intersection of two (endless) lines */
|
||||
export function beamsCross(a1: Point, a2: Point, b1: Point, b2: Point): Point | false {
|
||||
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
|
||||
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) {
|
||||
|
|
@ -45,12 +35,13 @@ export function beamsCross(a1: Point, a2: Point, b1: Point, b2: Point): Point |
|
|||
let x = (iB - iA) / (slopeA - slopeB);
|
||||
let y = slopeA * x + iA;
|
||||
|
||||
return new Point(x, y);
|
||||
return new point(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
/** Find intersection of two line segments */
|
||||
export function linesCross(a1: Point, a2: Point, b1: Point, b2: Point): Point | false {
|
||||
export function linesCross (a1, a2, b1, b2)
|
||||
{
|
||||
let p = beamsCross(a1,a2,b1,b2);
|
||||
if(p) {
|
||||
let lenA = a1.dist(a2);
|
||||
|
|
@ -63,16 +54,18 @@ export function linesCross(a1: Point, a2: Point, b1: Point, b2: Point): Point |
|
|||
}
|
||||
|
||||
/** Find where an (endless) line crosses a certain Y-value */
|
||||
export function beamCrossesY(from: Point, to: Point, y: number) {
|
||||
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);
|
||||
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): {} {
|
||||
export function shorthand(part, context)
|
||||
{
|
||||
let final = (context.settings.mode === 'draft') ? true : false;
|
||||
let paperless = (context.settings.paperless === true) ? true : false;
|
||||
return {
|
||||
|
|
@ -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