VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(examples): Port to v3 stage 2

Browse source
This commit is contained in:
joostdecock 2022-09-11 14:25:25 +02:00
parent c20f06cc94
commit b14db2f1d2
9 changed files with 223 additions and 404 deletions
Download patch file Download diff file Expand all files Collapse all files

44
designs/examples/src/docs.mjs
View file

@ -2,9 +2,7 @@ import { box } from './shared.mjs'
export const docs_coords = { export const docs_coords = {
name: 'examples.box_coords', name: 'examples.box_coords',
draft: part => { draft: ({ Point, points, paths, Path, part }) => {
const { Point, points, paths, Path } = part.shorthand()
points.origin = new Point(10, 10) points.origin = new Point(10, 10)
points.x = new Point(100, 10) points.x = new Point(100, 10)
points.y = new Point(10, 50) points.y = new Point(10, 50)
@ -19,17 +17,15 @@ export const docs_coords = {
.attr('marker-end', 'url(#dimensionTo)') .attr('marker-end', 'url(#dimensionTo)')
return box(part, 100, 50) return box(part, 100, 50)
} },
} }
export const docs_overview = { export const docs_overview = {
name: 'examples.docs_overview', name: 'examples.docs_overview',
draft: part => { draft: ({ Point, points, Path, paths, options, part }) => {
const { Point, points, Path, paths, options } = part.shorthand()
/** /**
* Returs the value passed to it randomized with a given tolerance * Returs the value passed to it randomized with a given tolerance
*/ */
const about = (value, tolerance = 5) => { const about = (value, tolerance = 5) => {
let randomized = (tolerance / 100) * Math.random() * value let randomized = (tolerance / 100) * Math.random() * value
let fixed = (1 - tolerance / 100) * value let fixed = (1 - tolerance / 100) * value
@ -38,20 +34,20 @@ export const docs_overview = {
} }
/** /**
* like about, but also randomly makes value negative * like about, but also randomly makes value negative
* This is for degrees * This is for degrees
*/ */
const nabout = (value, tolerance = 5) => { const nabout = (value, tolerance = 5) => {
if (Math.random() > 0.5) return about(value, tolerance) if (Math.random() > 0.5) return about(value, tolerance)
else return -1 * about(value, tolerance) else return -1 * about(value, tolerance)
} }
/** /**
* Draws a w*h box that's randomized by tolerance to give it * Draws a w*h box that's randomized by tolerance to give it
* that hand-drawn look. * that hand-drawn look.
* *
* Returns a Path object * Returns a Path object
*/ */
const box = (name, origin, width, height, tolerance = 10) => { const box = (name, origin, width, height, tolerance = 10) => {
let base = height let base = height
if (width < height) base = width if (width < height) base = width
@ -119,9 +115,9 @@ export const docs_overview = {
} }
/** /**
* Draws an arrow from to * Draws an arrow from to
* Returns a Path object * Returns a Path object
*/ */
const arrow = (name, text = '', tolerance = 10) => { const arrow = (name, text = '', tolerance = 10) => {
let from = points[name + 'From'] let from = points[name + 'From']
let to = points[name + 'To'] let to = points[name + 'To']
@ -295,7 +291,10 @@ export const docs_overview = {
drawBox('settings', -100, 6, 40, 20) drawBox('settings', -100, 6, 40, 20)
drawBox('draft', 80, 3, 20, 25) drawBox('draft', 80, 3, 20, 25)
points.arrow1From = points.settingsTopRight.shiftFractionTowards(points.settingsBottomRight, 0.5) points.arrow1From = points.settingsTopRight.shiftFractionTowards(
points.settingsBottomRight,
0.5
)
points.arrow1To = points.PatternTopLeft.shiftFractionTowards(points.PatternBottomLeft, 0.5) points.arrow1To = points.PatternTopLeft.shiftFractionTowards(points.PatternBottomLeft, 0.5)
paths.arrow1 = arrow('arrow1') paths.arrow1 = arrow('arrow1')
points.arrow2From = points.PatternTopRight.shiftFractionTowards(points.PatternBottomRight, 0.5) points.arrow2From = points.PatternTopRight.shiftFractionTowards(points.PatternBottomRight, 0.5)
@ -318,6 +317,5 @@ export const docs_overview = {
.attr('class', 'hidden') .attr('class', 'hidden')
return part return part
} },
} }

14
designs/examples/src/index.mjs
View file

@ -2,7 +2,6 @@ import { Design } from '@freesewing/core'
import { pluginBundle } from '@freesewing/plugin-bundle' import { pluginBundle } from '@freesewing/plugin-bundle'
import { gorePlugin } from '@freesewing/plugin-gore' import { gorePlugin } from '@freesewing/plugin-gore'
import { data } from '../data.mjs' import { data } from '../data.mjs'
import config from '../config/'
// Path API // Path API
import { import {
@ -68,7 +67,7 @@ import {
utils_curvesintersect, utils_curvesintersect,
utils_pointonbeam, utils_pointonbeam,
utils_pointonline, utils_pointonline,
utils_pointoncurve , utils_pointoncurve,
utils_circlesintersect, utils_circlesintersect,
utils_beamintersectscircle, utils_beamintersectscircle,
utils_lineintersectscircle, utils_lineintersectscircle,
@ -116,12 +115,10 @@ import { settings_sa } from './settings.mjs'
// Docs illustrations // Docs illustrations
import { docs_coords, docs_overview } from './docs.mjs' import { docs_coords, docs_overview } from './docs.mjs'
// Setup our new design // Setup our new design
const Examples = new Design({ const Examples = new Design({
data, data,
parts: [ parts: [
// Path API // Path API
path__curve, path__curve,
path_attr, path_attr,
@ -183,7 +180,7 @@ const Examples = new Design({
utils_curvesintersect, utils_curvesintersect,
utils_pointonbeam, utils_pointonbeam,
utils_pointonline, utils_pointonline,
utils_pointoncurve , utils_pointoncurve,
utils_circlesintersect, utils_circlesintersect,
utils_beamintersectscircle, utils_beamintersectscircle,
utils_lineintersectscircle, utils_lineintersectscircle,
@ -220,7 +217,7 @@ const Examples = new Design({
snippet_snapstud, snippet_snapstud,
snippet_logo, snippet_logo,
], ],
plugins: [ pluginBundle, gorePlugin ], plugins: [pluginBundle, gorePlugin],
}) })
// Named exports // Named exports
@ -286,7 +283,7 @@ export {
utils_curvesintersect, utils_curvesintersect,
utils_pointonbeam, utils_pointonbeam,
utils_pointonline, utils_pointonline,
utils_pointoncurve , utils_pointoncurve,
utils_circlesintersect, utils_circlesintersect,
utils_beamintersectscircle, utils_beamintersectscircle,
utils_lineintersectscircle, utils_lineintersectscircle,
@ -322,6 +319,5 @@ export {
snippet_snapsocket, snippet_snapsocket,
snippet_snapstud, snippet_snapstud,
snippet_logo, snippet_logo,
Examples Examples,
} }

195
designs/examples/src/path.mjs
View file

@ -2,9 +2,7 @@ import { box } from './shared.mjs'
export const path__curve = { export const path__curve = {
name: 'examples.path__curve', name: 'examples.path__curve',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.from = new Point(5, 20) points.from = new Point(5, 20)
points.cp2 = new Point(60, 30) points.cp2 = new Point(60, 30)
points.to = new Point(90, 20) points.to = new Point(90, 20)
@ -16,14 +14,12 @@ export const path__curve = {
.attr('data-text-class', 'text-sm center fill-note') .attr('data-text-class', 'text-sm center fill-note')
return box(part, 100, 25) return box(part, 100, 25)
} },
} }
export const path_attr = { export const path_attr = {
name: 'examples.path_attr', name: 'examples.path_attr',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.B = new Point(10, 50) points.B = new Point(10, 50)
points.BCp2 = new Point(40, 10) points.BCp2 = new Point(40, 10)
points.C = new Point(90, 30) points.C = new Point(90, 30)
@ -37,21 +33,22 @@ export const path_attr = {
.attr('data-text-class', 'text-xs center') .attr('data-text-class', 'text-xs center')
return part return part
} },
} }
export const path_clone = { export const path_clone = {
name: 'examples.path_clone', name: 'examples.path_clone',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30) points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30) points.CCp1 = new Point(50, -30)
paths.example = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
paths.clone = paths.example paths.clone = paths.example
.clone() .clone()
@ -59,15 +56,12 @@ export const path_clone = {
.attr('style', 'stroke-opacity: 0.5') .attr('style', 'stroke-opacity: 0.5')
return part return part
} },
} }
export const path_close = { export const path_close = {
name: 'examples.path_close', name: 'examples.path_close',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.from = new Point(10, 20) points.from = new Point(10, 20)
points.cp2 = new Point(60, 30) points.cp2 = new Point(60, 30)
points.to = new Point(90, 20) points.to = new Point(90, 20)
@ -81,15 +75,12 @@ export const path_close = {
.attr('data-text-class', 'text-sm right fill-note') .attr('data-text-class', 'text-sm right fill-note')
return box(part, 100, 25) return box(part, 100, 25)
} },
} }
export const path_curve = { export const path_curve = {
name: 'examples.path_curve', name: 'examples.path_curve',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.from = new Point(10, 20) points.from = new Point(10, 20)
points.cp1 = new Point(40, 0) points.cp1 = new Point(40, 0)
points.cp2 = new Point(60, 30) points.cp2 = new Point(60, 30)
@ -102,14 +93,12 @@ export const path_curve = {
.attr('data-text-class', 'text-sm center fill-note') .attr('data-text-class', 'text-sm center fill-note')
return box(part, 100, 25) return box(part, 100, 25)
} },
} }
export const path_curve_ = { export const path_curve_ = {
name: 'examples.path_curve_', name: 'examples.path_curve_',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.from = new Point(10, 20) points.from = new Point(10, 20)
points.cp1 = new Point(40, 0) points.cp1 = new Point(40, 0)
points.to = new Point(90, 20) points.to = new Point(90, 20)
@ -121,14 +110,12 @@ export const path_curve_ = {
.attr('data-text-class', 'text-sm center fill-note') .attr('data-text-class', 'text-sm center fill-note')
return box(part, 100, 25) return box(part, 100, 25)
} },
} }
export const path_divide = { export const path_divide = {
name: 'examples.path_divide', name: 'examples.path_divide',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.A = new Point(55, 40) points.A = new Point(55, 40)
points.B = new Point(10, 70) points.B = new Point(10, 70)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -152,14 +139,12 @@ export const path_divide = {
} }
return part return part
} },
} }
export const path_edge = { export const path_edge = {
name: 'examples.path_edge', name: 'examples.path_edge',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -188,14 +173,12 @@ export const path_edge = {
snippets[i] = new Snippet('notch', paths.demo.edge(i)) snippets[i] = new Snippet('notch', paths.demo.edge(i))
return part return part
} },
} }
export const path_end = { export const path_end = {
name: 'examples.path_end', name: 'examples.path_end',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -207,15 +190,12 @@ export const path_end = {
snippets.end = new Snippet('notch', paths.demo.end()) snippets.end = new Snippet('notch', paths.demo.end())
return part return part
} },
} }
export const path_intersects = { export const path_intersects = {
name: 'examples.path_intersects', name: 'examples.path_intersects',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -248,14 +228,12 @@ export const path_intersects = {
} }
return part return part
} },
} }
export const path_intersectsx = { export const path_intersectsx = {
name: 'examples.path_intersectsx', name: 'examples.path_intersectsx',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(95, 50) points.A = new Point(95, 50)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -280,14 +258,12 @@ export const path_intersectsx = {
} }
return part return part
} },
} }
export const path_intersectsy = { export const path_intersectsy = {
name: 'examples.path_intersectsy', name: 'examples.path_intersectsy',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(55, 40) points.A = new Point(55, 40)
points.B = new Point(10, 70) points.B = new Point(10, 70)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -311,15 +287,12 @@ export const path_intersectsy = {
} }
return part return part
} },
} }
export const path_join = { export const path_join = {
name: 'examples.path_join', name: 'examples.path_join',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -339,21 +312,22 @@ export const path_join = {
.attr('style', 'stroke-opacity: 0.5') .attr('style', 'stroke-opacity: 0.5')
return part return part
} },
} }
export const path_length = { export const path_length = {
name: 'examples.path_length', name: 'examples.path_length',
draft: part => { draft: ({ Point, points, Path, paths, macro, part }) => {
const { Point, points, Path, paths, macro } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30) points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30) points.CCp1 = new Point(50, -30)
paths.example = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
macro('pd', { macro('pd', {
path: paths.example, path: paths.example,
@ -371,14 +345,12 @@ export const path_length = {
}) })
return part return part
} },
} }
export const path_line = { export const path_line = {
name: 'examples.path_line', name: 'examples.path_line',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.from = new Point(10, 10) points.from = new Point(10, 10)
points.to = new Point(90, 10) points.to = new Point(90, 10)
@ -389,14 +361,12 @@ export const path_line = {
.attr('data-text-class', 'text-sm center fill-note') .attr('data-text-class', 'text-sm center fill-note')
return box(part, 100, 15) return box(part, 100, 15)
} },
} }
export const path_move = { export const path_move = {
name: 'examples.path_move', name: 'examples.path_move',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.to = new Point(50, 10) points.to = new Point(50, 10)
.attr('data-text', 'Path.move()') .attr('data-text', 'Path.move()')
.attr('data-text-class', 'fill-note center') .attr('data-text-class', 'fill-note center')
@ -404,15 +374,13 @@ export const path_move = {
paths.noline = new Path().move(points.to) paths.noline = new Path().move(points.to)
return box(part, 100, 15) return box(part, 100, 15)
} },
} }
export const path_noop = { export const path_noop = {
name: 'examples.path_noop', name: 'examples.path_noop',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand() points.left = new Point(10, 10)
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10) points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50) points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10) points.dartRight = new Point(60, 10)
@ -425,23 +393,16 @@ export const path_noop = {
.line(points.right) .line(points.right)
paths.withDart = paths.without paths.withDart = paths.without
.insop( .insop('dart', new Path().line(points.dartTip).line(points.dartRight))
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;') .attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
return part return part
} },
} }
export const path_offset = { export const path_offset = {
name: 'examples.path_offset', name: 'examples.path_offset',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -466,14 +427,12 @@ export const path_offset = {
.attr('class', 'canvas') .attr('class', 'canvas')
return part return part
} },
} }
export const path_ops = { export const path_ops = {
name: 'examples.path_ops', name: 'examples.path_ops',
draft: part => { draft: ({ Point, points, Path, paths, options, part }) => {
const { Point, points, Path, paths, options } = part.shorthand()
const textClasses = (label) => const textClasses = (label) =>
options.focus === label ? 'center text-xs fill-note' : 'center text-xs' options.focus === label ? 'center text-xs fill-note' : 'center text-xs'
@ -522,14 +481,12 @@ export const path_ops = {
paths.example = paths.line.join(paths.curve).join(paths._curve).join(paths.curve_).close() paths.example = paths.line.join(paths.curve).join(paths._curve).join(paths.curve_).close()
return part return part
} },
} }
export const path_reverse = { export const path_reverse = {
name: 'examples.path_reverse', name: 'examples.path_reverse',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30) points.C = new Point(90, 30)
@ -547,21 +504,22 @@ export const path_reverse = {
.attr('data-text-class', 'text-xs fill-lining') .attr('data-text-class', 'text-xs fill-lining')
return part return part
} },
} }
export const path_shiftalong = { export const path_shiftalong = {
name: 'examples.path_shiftalong', name: 'examples.path_shiftalong',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30) points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30) points.CCp1 = new Point(50, -30)
paths.example = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
points.x1 = paths.example points.x1 = paths.example
.shiftAlong(20) .shiftAlong(20)
@ -578,21 +536,22 @@ export const path_shiftalong = {
snippets.x2 = new Snippet('notch', points.x2) snippets.x2 = new Snippet('notch', points.x2)
return part return part
} },
} }
export const path_shiftfractionalong = { export const path_shiftfractionalong = {
name: 'examples.path_shiftfractionalong', name: 'examples.path_shiftfractionalong',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30) points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30) points.CCp1 = new Point(50, -30)
paths.example = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
points.x1 = paths.example points.x1 = paths.example
.shiftFractionAlong(0.2) .shiftFractionAlong(0.2)
@ -609,14 +568,12 @@ export const path_shiftfractionalong = {
snippets.x2 = new Snippet('notch', points.x2) snippets.x2 = new Snippet('notch', points.x2)
return part return part
} },
} }
export const path_split = { export const path_split = {
name: 'examples.path_split', name: 'examples.path_split',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -641,32 +598,31 @@ export const path_split = {
} }
return part return part
} },
} }
export const path_start = { export const path_start = {
name: 'examples.path_start', name: 'examples.path_start',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => {
const { Point, points, Path, paths, Snippet, snippets } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30) points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30) points.CCp1 = new Point(50, -30)
paths.example = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
snippets.start = new Snippet('notch', paths.example.start()) snippets.start = new Snippet('notch', paths.example.start())
return part return part
} },
} }
export const path_translate = { export const path_translate = {
name: 'examples.path_translate', name: 'examples.path_translate',
draft: part => { draft: ({ Point, points, Path, paths, macro, part }) => {
const { Point, points, Path, paths, macro } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -691,14 +647,12 @@ export const path_translate = {
}) })
return part return part
} },
} }
export const path_trim = { export const path_trim = {
name: 'examples.path_trim', name: 'examples.path_trim',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.center = new Point(0, 0) points.center = new Point(0, 0)
points.base = new Point(0, 10) points.base = new Point(0, 10)
points.tip = new Point(0, 50) points.tip = new Point(0, 50)
@ -731,6 +685,5 @@ export const path_trim = {
.attr('class', 'various stroke-xl') .attr('class', 'various stroke-xl')
.attr('style', 'stroke-opacity: 0.5;') .attr('style', 'stroke-opacity: 0.5;')
return part return part
} },
} }

97
designs/examples/src/plugins.mjs
View file

@ -2,9 +2,7 @@ import { box } from './shared.mjs'
export const plugin_banner = { export const plugin_banner = {
name: 'examples.plugin_banner', name: 'examples.plugin_banner',
draft: part => { draft: ({ points, Point, paths, Path, macro, part }) => {
const { points, Point, paths, Path, macro } = part.shorthand()
points.from = new Point(0, 0) points.from = new Point(0, 0)
points.to = new Point(320, 0) points.to = new Point(320, 0)
@ -19,15 +17,12 @@ export const plugin_banner = {
paths.box = new Path().move(new Point(0, -20)).line(new Point(0, 20)).attr('class', 'hidden') paths.box = new Path().move(new Point(0, -20)).line(new Point(0, 20)).attr('class', 'hidden')
return part return part
} },
} }
export const plugin_bartack = { export const plugin_bartack = {
name: 'examples.plugin_bartack', name: 'examples.plugin_bartack',
draft: part => { draft: ({ Point, points, macro, part }) => {
const { Point, points, macro } = part.shorthand()
points.a = new Point(15, 15) points.a = new Point(15, 15)
macro('bartack', { macro('bartack', {
@ -37,14 +32,12 @@ export const plugin_bartack = {
}) })
return box(part, 60, 30) return box(part, 60, 30)
} },
} }
export const plugin_bartackalong = { export const plugin_bartackalong = {
name: 'examples.plugin_bartackalong', name: 'examples.plugin_bartackalong',
draft: part => { draft: ({ Point, Path, points, paths, macro, part }) => {
const { Point, Path, points, paths, macro } = part.shorthand()
points.a = new Point(15, 15) points.a = new Point(15, 15)
points.b = new Point(20, 20) points.b = new Point(20, 20)
points.c = new Point(30, 20) points.c = new Point(30, 20)
@ -64,14 +57,12 @@ export const plugin_bartackalong = {
}) })
return box(part, 60, 30) return box(part, 60, 30)
} },
} }
export const plugin_bartackfractionalong = { export const plugin_bartackfractionalong = {
name: 'examples.plugin_bartackfractionalong', name: 'examples.plugin_bartackfractionalong',
draft: part => { draft: ({ Point, Path, points, paths, macro, part }) => {
const { Point, Path, points, paths, macro } = part.shorthand()
points.a = new Point(15, 15) points.a = new Point(15, 15)
points.b = new Point(20, 20) points.b = new Point(20, 20)
points.c = new Point(30, 20) points.c = new Point(30, 20)
@ -93,14 +84,12 @@ export const plugin_bartackfractionalong = {
}) })
return box(part, 60, 30) return box(part, 60, 30)
} },
} }
export const plugin_buttons = { export const plugin_buttons = {
name: 'examples.plugin_buttons', name: 'examples.plugin_buttons',
draft: part => { draft: ({ Point, snippets, Snippet, part }) => {
const { Point, snippets, Snippet } = part.shorthand()
snippets.button = new Snippet('button', new Point(20, 10)) snippets.button = new Snippet('button', new Point(20, 10))
snippets.buttonhole = new Snippet('buttonhole', new Point(40, 10)) snippets.buttonhole = new Snippet('buttonhole', new Point(40, 10))
snippets.buttonholeStart = new Snippet('buttonhole-start', new Point(60, 10)) snippets.buttonholeStart = new Snippet('buttonhole-start', new Point(60, 10))
@ -109,14 +98,12 @@ export const plugin_buttons = {
snippets.snapFemale = new Snippet('snap-socket', new Point(120, 10)) snippets.snapFemale = new Snippet('snap-socket', new Point(120, 10))
return box(part, 140, 20) return box(part, 140, 20)
} },
} }
export const plugin_cutonfold = { export const plugin_cutonfold = {
name: 'examples.plugin_cutonfold', name: 'examples.plugin_cutonfold',
draft: part => { draft: ({ Point, points, Path, paths, macro, part }) => {
const { Point, points, Path, paths, macro } = part.shorthand()
points.topLeft = new Point(0, 0) points.topLeft = new Point(0, 0)
points.topRight = new Point(150, 0) points.topRight = new Point(150, 0)
points.bottomRight = new Point(150, 30) points.bottomRight = new Point(150, 30)
@ -136,14 +123,12 @@ export const plugin_cutonfold = {
}) })
return part return part
} },
} }
export const plugin_dimension = { export const plugin_dimension = {
name: 'examples.plugin_dimension', name: 'examples.plugin_dimension',
draft: part => { draft: ({ Point, points, Path, paths, macro, part }) => {
const { Point, points, Path, paths, macro } = part.shorthand()
points.A = new Point(0, 0) points.A = new Point(0, 0)
points.B = new Point(0, 100) points.B = new Point(0, 100)
points.C = new Point(50, 100) points.C = new Point(50, 100)
@ -189,14 +174,12 @@ export const plugin_dimension = {
}) })
return part return part
} },
} }
export const plugin_gore = { export const plugin_gore = {
name: 'examples.plugin_gore', name: 'examples.plugin_gore',
draft: part => { draft: ({ Point, points, macro, part }) => {
const { Point, points, macro } = part.shorthand()
points.anchor = new Point(0, 0) points.anchor = new Point(0, 0)
macro('gore', { macro('gore', {
@ -208,14 +191,12 @@ export const plugin_gore = {
}) })
return part return part
} },
} }
export const plugin_grainline = { export const plugin_grainline = {
name: 'examples.plugin_grainline', name: 'examples.plugin_grainline',
draft: part => { draft: ({ Point, points, macro, part }) => {
const { Point, points, macro } = part.shorthand()
points.grainlineFrom = new Point(10, 10) points.grainlineFrom = new Point(10, 10)
points.grainlineTo = new Point(100, 10) points.grainlineTo = new Point(100, 10)
@ -225,26 +206,23 @@ export const plugin_grainline = {
}) })
return box(part, 110, 15) return box(part, 110, 15)
} },
} }
export const plugin_logo = { export const plugin_logo = {
name: 'examples.plugin_logo', name: 'examples.plugin_logo',
draft: part => { draft: ({ points, Point, snippets, Snippet, part }) => {
const { points, Point, snippets, Snippet } = part.shorthand()
points.anchor = new Point(50, 25) points.anchor = new Point(50, 25)
snippets.logo = new Snippet('logo', points.anchor).attr('data-scale', 0.666) snippets.logo = new Snippet('logo', points.anchor).attr('data-scale', 0.666)
return box(part, 100, 35) return box(part, 100, 35)
} },
} }
export const plugin_mirror = { export const plugin_mirror = {
name: 'examples.plugin_mirror', name: 'examples.plugin_mirror',
draft: part => { draft: ({ Point, Path, points, paths, macro, part }) => {
const { Point, Path, points, paths, macro } = part.shorthand()
points.a = new Point(5, 5) points.a = new Point(5, 5)
points.b = new Point(45, 30) points.b = new Point(45, 30)
points.c = new Point(5, 30) points.c = new Point(5, 30)
@ -265,26 +243,22 @@ export const plugin_mirror = {
}) })
return box(part, 100, 40) return box(part, 100, 40)
} },
} }
export const plugin_notches = { export const plugin_notches = {
name: 'examples.plugin_notches', name: 'examples.plugin_notches',
draft: part => { draft: ({ Point, snippets, Snippet, part }) => {
const { Point, snippets, Snippet } = part.shorthand()
snippets.notch = new Snippet('notch', new Point(60, 10)) snippets.notch = new Snippet('notch', new Point(60, 10))
snippets.bnotch = new Snippet('bnotch', new Point(80, 10)) snippets.bnotch = new Snippet('bnotch', new Point(80, 10))
return box(part, 140, 20) return box(part, 140, 20)
} },
} }
export const plugin_round = { export const plugin_round = {
name: 'examples.plugin_round', name: 'examples.plugin_round',
draft: part => { draft: ({ Point, points, Path, paths, macro, part }) => {
const { Point, points, Path, paths, macro } = part.shorthand()
points.topLeft = new Point(0, 0) points.topLeft = new Point(0, 0)
points.bottomLeft = new Point(0, 30) points.bottomLeft = new Point(0, 30)
points.topRight = new Point(100, 0) points.topRight = new Point(100, 0)
@ -316,14 +290,12 @@ export const plugin_round = {
}) })
return part return part
} },
} }
export const plugin_scalebox = { export const plugin_scalebox = {
name: 'examples.plugin_scalebox', name: 'examples.plugin_scalebox',
draft: part => { draft: ({ Point, points, macro, part }) => {
const { Point, points, macro } = part.shorthand()
points.anchor1 = new Point(0, 0) points.anchor1 = new Point(0, 0)
points.anchor2 = new Point(70, 0) points.anchor2 = new Point(70, 0)
@ -331,14 +303,12 @@ export const plugin_scalebox = {
macro('miniscale', { at: points.anchor2 }) macro('miniscale', { at: points.anchor2 })
return part return part
} },
} }
export const plugin_sprinkle = { export const plugin_sprinkle = {
name: 'examples.plugin_sprinkle', name: 'examples.plugin_sprinkle',
draft: part => { draft: ({ Point, points, macro, part }) => {
const { Point, points, macro } = part.shorthand()
points.a = new Point(10, 10) points.a = new Point(10, 10)
points.b = new Point(20, 15) points.b = new Point(20, 15)
points.c = new Point(30, 10) points.c = new Point(30, 10)
@ -355,14 +325,12 @@ export const plugin_sprinkle = {
}) })
return box(part, 100, 25) return box(part, 100, 25)
} },
} }
export const plugin_title = { export const plugin_title = {
name: 'examples.plugin_title', name: 'examples.plugin_title',
draft: part => { draft: ({ Point, points, macro, part }) => {
const { Point, points, macro } = part.shorthand()
points.title = new Point(90, 45) points.title = new Point(90, 45)
macro('title', { macro('title', {
@ -373,6 +341,5 @@ export const plugin_title = {
}) })
return box(part, 200, 70) return box(part, 200, 70)
} },
} }

103
designs/examples/src/point.mjs
View file

@ -2,9 +2,7 @@ import { box } from './shared.mjs'
export const point_angle = { export const point_angle = {
name: 'examples.point_angle', name: 'examples.point_angle',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.sun = new Point(10, 5) points.sun = new Point(10, 5)
points.moon = points.sun.shift(-15, 70) points.moon = points.sun.shift(-15, 70)
points.text = points.sun points.text = points.sun
@ -15,27 +13,23 @@ export const point_angle = {
paths.line = new Path().move(points.sun).line(points.moon).attr('class', 'dashed') paths.line = new Path().move(points.sun).line(points.moon).attr('class', 'dashed')
return part return part
} },
} }
export const point_attr = { export const point_attr = {
name: 'examples.point_attr', name: 'examples.point_attr',
draft: part => { draft: ({ Point, points, part }) => {
const { Point, points } = part.shorthand()
points.anchor = new Point(100, 25) points.anchor = new Point(100, 25)
.attr('data-text', 'supportFreesewingBecomeAPatron') .attr('data-text', 'supportFreesewingBecomeAPatron')
.attr('data-text-class', 'center') .attr('data-text-class', 'center')
return box(part, 200, 50) return box(part, 200, 50)
} },
} }
export const point_clone = { export const point_clone = {
name: 'examples.point_clone', name: 'examples.point_clone',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.A = new Point(25, 25) points.A = new Point(25, 25)
.attr('data-text', 'Point A') .attr('data-text', 'Point A')
.attr('data-text-class', 'text-xl') .attr('data-text-class', 'text-xl')
@ -45,28 +39,24 @@ export const point_clone = {
snippets.x = new Snippet('notch', points.A) snippets.x = new Snippet('notch', points.A)
return box(part) return box(part)
} },
} }
export const point_copy = { export const point_copy = {
name: 'examples.point_copy', name: 'examples.point_copy',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.A = new Point(50, 25).attr('data-text', 'Point A').attr('data-text-class', 'text-xl') points.A = new Point(50, 25).attr('data-text', 'Point A').attr('data-text-class', 'text-xl')
points.B = points.A.copy().attr('data-text', 'Point B') points.B = points.A.copy().attr('data-text', 'Point B')
snippets.x = new Snippet('notch', points.A) snippets.x = new Snippet('notch', points.A)
return box(part) return box(part)
} },
} }
export const point_dist = { export const point_dist = {
name: 'examples.point_dist', name: 'examples.point_dist',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.from = new Point(10, 10) points.from = new Point(10, 10)
points.to = new Point(80, 70) points.to = new Point(80, 70)
@ -78,14 +68,12 @@ export const point_dist = {
paths.line = new Path().move(points.from).line(points.to).attr('class', 'dashed') paths.line = new Path().move(points.from).line(points.to).attr('class', 'dashed')
return part return part
} },
} }
export const point_dx = { export const point_dx = {
name: 'examples.point_dx', name: 'examples.point_dx',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.from = new Point(10, 10) points.from = new Point(10, 10)
points.to = new Point(80, 70) points.to = new Point(80, 70)
@ -104,14 +92,12 @@ export const point_dx = {
paths.line_dy = new Path().move(points.to).line(points.totop).attr('class', 'dashed') paths.line_dy = new Path().move(points.to).line(points.totop).attr('class', 'dashed')
return part return part
} },
} }
export const point_dy = { export const point_dy = {
name: 'examples.point_dy', name: 'examples.point_dy',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.from = new Point(10, 10) points.from = new Point(10, 10)
points.to = new Point(80, 70) points.to = new Point(80, 70)
@ -129,14 +115,12 @@ export const point_dy = {
paths.line_dy = new Path().move(points.to).line(points.totop).attr('class', 'dashed') paths.line_dy = new Path().move(points.to).line(points.totop).attr('class', 'dashed')
return part return part
} },
} }
export const point_flipx = { export const point_flipx = {
name: 'examples.point_flipy', name: 'examples.point_flipy',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.top = new Point(50, 10) points.top = new Point(50, 10)
points.out1 = new Point(70, 30) points.out1 = new Point(70, 30)
points.in1 = new Point(55, 35) points.in1 = new Point(55, 35)
@ -178,14 +162,12 @@ export const point_flipx = {
paths.mirror = new Path().move(points.top).line(points.bottom).attr('class', 'note dashed') paths.mirror = new Path().move(points.top).line(points.bottom).attr('class', 'note dashed')
return part return part
} },
} }
export const point_flipy = { export const point_flipy = {
name: 'examples.point_flipy', name: 'examples.point_flipy',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.start = new Point(0, 50) points.start = new Point(0, 50)
points.churchTowerWallLeft = new Point(10, 50) points.churchTowerWallLeft = new Point(10, 50)
points.churchTowerRoofLeft = new Point(10, 30) points.churchTowerRoofLeft = new Point(10, 30)
@ -253,14 +235,12 @@ export const point_flipy = {
.attr('class', 'note dashed') .attr('class', 'note dashed')
return part return part
} },
} }
export const point_rotate = { export const point_rotate = {
name: 'examples.point_rotate', name: 'examples.point_rotate',
draft: part => { draft: ({ Point, points, Path, paths, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.sun = new Point(40, 40) points.sun = new Point(40, 40)
points.moon = new Point(70, 40) points.moon = new Point(70, 40)
let step = 360 / 36 let step = 360 / 36
@ -271,14 +251,12 @@ export const point_rotate = {
} }
return part return part
} },
} }
export const point_shift = { export const point_shift = {
name: 'examples.point_shift', name: 'examples.point_shift',
draft: part => { draft: ({ Point, points, macro, part }) => {
const { Point, points, macro } = part.shorthand()
points.A = new Point(90, 40).attr('data-text', 'Point A').attr('data-text-class', 'right') points.A = new Point(90, 40).attr('data-text', 'Point A').attr('data-text-class', 'right')
points.B = points.A.shift(155, 70) points.B = points.A.shift(155, 70)
.attr('data-text', 'Point B is point A shifted 7cm\nat a 155 degree angle') .attr('data-text', 'Point B is point A shifted 7cm\nat a 155 degree angle')
@ -291,14 +269,12 @@ export const point_shift = {
}) })
return box(part, 100, 45) return box(part, 100, 45)
} },
} }
export const point_shiftfractiontowards = { export const point_shiftfractiontowards = {
name: 'examples.point_shiftfractiontowards', name: 'examples.point_shiftfractiontowards',
draft: part => { draft: ({ Point, points, Path, paths, macro, part }) => {
const { Point, points, Path, paths, macro } = part.shorthand()
points.A = new Point(90, 70).attr('data-text', 'Point A') points.A = new Point(90, 70).attr('data-text', 'Point A')
points.B = new Point(10, 10).attr('data-text', 'Point B') points.B = new Point(10, 10).attr('data-text', 'Point B')
points.C = points.A.shiftFractionTowards(points.B, 0.5) points.C = points.A.shiftFractionTowards(points.B, 0.5)
@ -321,14 +297,12 @@ export const point_shiftfractiontowards = {
}) })
return part return part
} },
} }
export const point_shiftoutwards = { export const point_shiftoutwards = {
name: 'examples.point_shiftoutwards', name: 'examples.point_shiftoutwards',
draft: part => { draft: ({ Point, points, Path, paths, macro, part }) => {
const { Point, points, Path, paths, macro } = part.shorthand()
points.A = new Point(90, 70).attr('data-text', 'Point A') points.A = new Point(90, 70).attr('data-text', 'Point A')
points.B = new Point(30, 30).attr('data-text', 'Point B') points.B = new Point(30, 30).attr('data-text', 'Point B')
points.C = points.A.shiftOutwards(points.B, 30) points.C = points.A.shiftOutwards(points.B, 30)
@ -344,14 +318,12 @@ export const point_shiftoutwards = {
}) })
return box(part, 110, 75) return box(part, 110, 75)
} },
} }
export const point_shifttowards = { export const point_shifttowards = {
name: 'examples.point_shifttowards', name: 'examples.point_shifttowards',
draft: part => { draft: ({ Point, points, Path, paths, macro, part }) => {
const { Point, points, Path, paths, macro } = part.shorthand()
points.A = new Point(90, 70).attr('data-text', 'Point A') points.A = new Point(90, 70).attr('data-text', 'Point A')
points.B = new Point(10, 10).attr('data-text', 'Point B') points.B = new Point(10, 10).attr('data-text', 'Point B')
points.C = points.A.shiftTowards(points.B, 35) points.C = points.A.shiftTowards(points.B, 35)
@ -368,14 +340,12 @@ export const point_shifttowards = {
}) })
return box(part, 110, 80) return box(part, 110, 80)
} },
} }
export const point_sitson = { export const point_sitson = {
name: 'examples.point_sitson', name: 'examples.point_sitson',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
let s let s
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
points[`a${i}`] = new Point(i * 10, 40) points[`a${i}`] = new Point(i * 10, 40)
@ -387,14 +357,12 @@ export const point_sitson = {
} }
return box(part) return box(part)
} },
} }
export const point_sitsroughlyon = { export const point_sitsroughlyon = {
name: 'examples.point_sitsroughlyon', name: 'examples.point_sitsroughlyon',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
box(part) box(part)
let s let s
@ -408,14 +376,12 @@ export const point_sitsroughlyon = {
} }
return part return part
} },
} }
export const point_translate = { export const point_translate = {
name: 'examples.point_translate', name: 'examples.point_translate',
draft: part => { draft: ({ Point, points, macro, part }) => {
const { Point, points, macro } = part.shorthand()
points.A = new Point(20, 20).attr('data-text', 'Point A') points.A = new Point(20, 20).attr('data-text', 'Point A')
points.B = points.A.translate(120, 60) points.B = points.A.translate(120, 60)
.attr('data-text', 'Point B is point A with a\ntranslate(120, 60)\ntransform applied') .attr('data-text', 'Point B is point A with a\ntranslate(120, 60)\ntransform applied')
@ -431,6 +397,5 @@ export const point_translate = {
}) })
return box(part, 150, 85) return box(part, 150, 85)
} },
} }

7
designs/examples/src/settings.mjs
View file

@ -1,8 +1,6 @@
export const settings_sa = { export const settings_sa = {
name: 'examples.settings_sa', name: 'examples.settings_sa',
draft: part => { draft: ({ Point, points, Path, path, part }) => {
const { Point, points, Path, paths } = part.shorthand()
points.A = new Point(45, 60) points.A = new Point(45, 60)
points.B = new Point(10, 30) points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20) points.BCp2 = new Point(40, 20)
@ -20,6 +18,5 @@ export const settings_sa = {
paths.offset = paths.example.offset(-10).attr('class', 'fabric sa') paths.offset = paths.example.offset(-10).attr('class', 'fabric sa')
return part return part
} },
} }

19
designs/examples/src/snippet.mjs
View file

@ -2,9 +2,7 @@ import { box } from './shared.mjs'
export const snippet = { export const snippet = {
name: 'examples.snippet', name: 'examples.snippet',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor1 = new Point(20, 15) points.anchor1 = new Point(20, 15)
points.anchor2 = new Point(50, 15) points.anchor2 = new Point(50, 15)
points.anchor3 = new Point(80, 15) points.anchor3 = new Point(80, 15)
@ -13,34 +11,29 @@ export const snippet = {
snippets.demo3 = new Snippet('logo', points.anchor3).attr('data-scale', 0.5) snippets.demo3 = new Snippet('logo', points.anchor3).attr('data-scale', 0.5)
return box(part) return box(part)
} },
} }
export const snippet_attr = { export const snippet_attr = {
name: 'examples.snippet_attr', name: 'examples.snippet_attr',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 15) points.anchor = new Point(50, 15)
snippets.demo = new Snippet('logo', points.anchor) snippets.demo = new Snippet('logo', points.anchor)
.attr('data-scale', 0.8) .attr('data-scale', 0.8)
.attr('data-rotate', 180) .attr('data-rotate', 180)
return box(part) return box(part)
} },
} }
export const snippet_clone = { export const snippet_clone = {
name: 'examples.snippet_clone', name: 'examples.snippet_clone',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(35, 35) points.anchor = new Point(35, 35)
snippets.demo = new Snippet('logo', points.anchor).attr('style', 'color: #f006') snippets.demo = new Snippet('logo', points.anchor).attr('style', 'color: #f006')
snippets.clone = snippets.demo.clone().attr('data-scale', 0.5) snippets.clone = snippets.demo.clone().attr('data-scale', 0.5)
return box(part) return box(part)
} },
} }

57
designs/examples/src/snippets.mjs
View file

@ -2,109 +2,90 @@ import { box } from './shared.mjs'
export const snippet_bnotch = { export const snippet_bnotch = {
name: 'examples.snippet_bnotch', name: 'examples.snippet_bnotch',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 5) points.anchor = new Point(50, 5)
snippets.demo = new Snippet('bnotch', points.anchor) snippets.demo = new Snippet('bnotch', points.anchor)
return box(part, 100, 10) return box(part, 100, 10)
} },
} }
export const snippet_button = { export const snippet_button = {
name: 'examples.snippet_button', name: 'examples.snippet_button',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 5) points.anchor = new Point(50, 5)
snippets.demo = new Snippet('button', points.anchor) snippets.demo = new Snippet('button', points.anchor)
return box(part, 100, 10) return box(part, 100, 10)
} },
} }
export const snippet_buttonholeend = { export const snippet_buttonholeend = {
name: 'examples.snippet_buttonholeend', name: 'examples.snippet_buttonholeend',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 0) points.anchor = new Point(50, 0)
snippets.demo = new Snippet('buttonhole-end', points.anchor) snippets.demo = new Snippet('buttonhole-end', points.anchor)
return box(part, 100, 10) return box(part, 100, 10)
} },
} }
export const snippet_buttonholestart = { export const snippet_buttonholestart = {
name: 'examples.snippet_buttonholestart', name: 'examples.snippet_buttonholestart',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 10) points.anchor = new Point(50, 10)
snippets.demo = new Snippet('buttonhole-start', points.anchor) snippets.demo = new Snippet('buttonhole-start', points.anchor)
return box(part, 100, 10) return box(part, 100, 10)
} },
} }
export const snippet_buttonhole = { export const snippet_buttonhole = {
name: 'examples.snippet_buttonhole', name: 'examples.snippet_buttonhole',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 5) points.anchor = new Point(50, 5)
snippets.demo = new Snippet('buttonhole', points.anchor) snippets.demo = new Snippet('buttonhole', points.anchor)
return box(part, 100, 10) return box(part, 100, 10)
} },
} }
export const snippet_logo = { export const snippet_logo = {
name: 'examples.snippet_logo', name: 'examples.snippet_logo',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 35) points.anchor = new Point(50, 35)
snippets.demo = new Snippet('logo', points.anchor) snippets.demo = new Snippet('logo', points.anchor)
return box(part, 100, 50) return box(part, 100, 50)
} },
} }
export const snippet_notch = { export const snippet_notch = {
name: 'examples.snippet_notch', name: 'examples.snippet_notch',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 5) points.anchor = new Point(50, 5)
snippets.demo = new Snippet('notch', points.anchor) snippets.demo = new Snippet('notch', points.anchor)
return box(part, 100, 10) return box(part, 100, 10)
} },
} }
export const snippet_snapsocket = { export const snippet_snapsocket = {
name: 'examples.snippet_snapsocket', name: 'examples.snippet_snapsocket',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 5) points.anchor = new Point(50, 5)
snippets.demo = new Snippet('snap-socket', points.anchor) snippets.demo = new Snippet('snap-socket', points.anchor)
return box(part, 100, 10) return box(part, 100, 10)
} },
} }
export const snippet_snapstud = { export const snippet_snapstud = {
name: 'examples.snippet_snapstud', name: 'examples.snippet_snapstud',
draft: part => { draft: ({ Point, points, Snippet, snippets, part }) => {
const { Point, points, Snippet, snippets } = part.shorthand()
points.anchor = new Point(50, 5) points.anchor = new Point(50, 5)
snippets.demo = new Snippet('snap-stud', points.anchor) snippets.demo = new Snippet('snap-stud', points.anchor)
return box(part, 100, 10) return box(part, 100, 10)
} },
} }

91
designs/examples/src/utils.mjs
View file

@ -2,9 +2,7 @@ import { box } from './shared.mjs'
export const utils_beamintersectscircle = { export const utils_beamintersectscircle = {
name: 'examples.utils_beamintersectscircle', name: 'examples.utils_beamintersectscircle',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(95, 45).attr('data-circle', 35).attr('data-circle-class', 'fabric') points.A = new Point(95, 45).attr('data-circle', 35).attr('data-circle-class', 'fabric')
points.B = new Point(55, 50) points.B = new Point(55, 50)
points.C = new Point(75, 30) points.C = new Point(75, 30)
@ -45,14 +43,12 @@ export const utils_beamintersectscircle = {
snippets.second3 = new Snippet('notch', intersections3[1]) snippets.second3 = new Snippet('notch', intersections3[1])
return box(part, 200, 80) return box(part, 200, 80)
} },
} }
export const utils_beamintersectsx = { export const utils_beamintersectsx = {
name: 'examples.utils_beamintersectsx', name: 'examples.utils_beamintersectsx',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(10, 10) points.A = new Point(10, 10)
points.B = new Point(90, 30) points.B = new Point(90, 30)
@ -66,14 +62,12 @@ export const utils_beamintersectsx = {
.attr('class', 'note dashed') .attr('class', 'note dashed')
return part return part
} },
} }
export const utils_beamintersectsy = { export const utils_beamintersectsy = {
name: 'examples.utils_beamintersectsy', name: 'examples.utils_beamintersectsy',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(10, 10) points.A = new Point(10, 10)
points.B = new Point(50, 40) points.B = new Point(50, 40)
@ -87,14 +81,12 @@ export const utils_beamintersectsy = {
.attr('class', 'note dashed') .attr('class', 'note dashed')
return part return part
} },
} }
export const utils_beamsintersect = { export const utils_beamsintersect = {
name: 'examples.utils_beamsintersect', name: 'examples.utils_beamsintersect',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(10, 10) points.A = new Point(10, 10)
points.B = new Point(50, 40) points.B = new Point(50, 40)
points.C = new Point(45, 20) points.C = new Point(45, 20)
@ -106,14 +98,12 @@ export const utils_beamsintersect = {
snippets.x = new Snippet('notch', utils.beamsIntersect(points.A, points.B, points.C, points.D)) snippets.x = new Snippet('notch', utils.beamsIntersect(points.A, points.B, points.C, points.D))
return part return part
} },
} }
export const utils_circlesintersect = { export const utils_circlesintersect = {
name: 'examples.utils_circlesintersect', name: 'examples.utils_circlesintersect',
draft: part => { draft: ({ Point, points, Snippet, snippets, utils, part }) => {
const { Point, points, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(10, 10).attr('data-circle', 15).attr('data-circle-class', 'fabric') points.A = new Point(10, 10).attr('data-circle', 15).attr('data-circle-class', 'fabric')
points.B = new Point(30, 30).attr('data-circle', 35).attr('data-circle-class', 'fabric') points.B = new Point(30, 30).attr('data-circle', 35).attr('data-circle-class', 'fabric')
points.C = new Point(90, 10).attr('data-circle', 15).attr('data-circle-class', 'various') points.C = new Point(90, 10).attr('data-circle', 15).attr('data-circle-class', 'various')
@ -139,14 +129,12 @@ export const utils_circlesintersect = {
snippets.second2 = new Snippet('notch', intersections2[1]) snippets.second2 = new Snippet('notch', intersections2[1])
return part return part
} },
} }
export const utils_curveintersectsx = { export const utils_curveintersectsx = {
name: 'examples.utils_curveintersectsx', name: 'examples.utils_curveintersectsx',
draft: part => { draft: ({ Point, points, Path, paths, utils, snippets, Snippet, part }) => {
const { Point, points, Path, paths, utils, snippets, Snippet } = part.shorthand()
points.start = new Point(10, 15) points.start = new Point(10, 15)
points.cp1 = new Point(80, 10) points.cp1 = new Point(80, 10)
points.cp2 = new Point(-50, 80) points.cp2 = new Point(-50, 80)
@ -172,14 +160,12 @@ export const utils_curveintersectsx = {
snippets[p.y] = new Snippet('notch', p) snippets[p.y] = new Snippet('notch', p)
return part return part
} },
} }
export const utils_curveintersectsy = { export const utils_curveintersectsy = {
name: 'examples.utils_curveintersectsy', name: 'examples.utils_curveintersectsy',
draft: part => { draft: ({ Point, points, Path, paths, utils, snippets, Snippet, part }) => {
const { Point, points, Path, paths, utils, snippets, Snippet } = part.shorthand()
points.start = new Point(10, 45) points.start = new Point(10, 45)
points.cp1 = new Point(50, 10) points.cp1 = new Point(50, 10)
points.cp2 = new Point(0, 80) points.cp2 = new Point(0, 80)
@ -205,14 +191,12 @@ export const utils_curveintersectsy = {
snippets[p.x] = new Snippet('notch', p) snippets[p.x] = new Snippet('notch', p)
return part return part
} },
} }
export const utils_curvesintersect = { export const utils_curvesintersect = {
name: 'examples.utils_curvesintersect', name: 'examples.utils_curvesintersect',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(10, 10) points.A = new Point(10, 10)
points.Acp = new Point(310, 40) points.Acp = new Point(310, 40)
points.B = new Point(110, 70) points.B = new Point(110, 70)
@ -239,14 +223,12 @@ export const utils_curvesintersect = {
} }
return part return part
} },
} }
export const utils_lineintersectscircle = { export const utils_lineintersectscircle = {
name: 'examples.utils_lineintersectscircle', name: 'examples.utils_lineintersectscircle',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(95, 45).attr('data-circle', 35).attr('data-circle-class', 'fabric') points.A = new Point(95, 45).attr('data-circle', 35).attr('data-circle-class', 'fabric')
points.B = new Point(55, 50) points.B = new Point(55, 50)
points.C = new Point(75, 30) points.C = new Point(75, 30)
@ -286,14 +268,12 @@ export const utils_lineintersectscircle = {
snippets.second3 = new Snippet('notch', intersections3[1]) snippets.second3 = new Snippet('notch', intersections3[1])
return box(part, 200, 80) return box(part, 200, 80)
} },
} }
export const utils_lineintersectscurve = { export const utils_lineintersectscurve = {
name: 'examples.utils_lineintersectscurve', name: 'examples.utils_lineintersectscurve',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(10, 10) points.A = new Point(10, 10)
points.Acp = new Point(310, 40) points.Acp = new Point(310, 40)
points.B = new Point(110, 70) points.B = new Point(110, 70)
@ -315,14 +295,12 @@ export const utils_lineintersectscurve = {
} }
return part return part
} },
} }
export const utils_linesintersect = { export const utils_linesintersect = {
name: 'examples.utils_linesintersect', name: 'examples.utils_linesintersect',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.A = new Point(10, 10) points.A = new Point(10, 10)
points.B = new Point(50, 40) points.B = new Point(50, 40)
points.C = new Point(15, 30) points.C = new Point(15, 30)
@ -334,14 +312,12 @@ export const utils_linesintersect = {
snippets.X = new Snippet('notch', utils.linesIntersect(points.A, points.B, points.C, points.D)) snippets.X = new Snippet('notch', utils.linesIntersect(points.A, points.B, points.C, points.D))
return part return part
} },
} }
export const utils_pointonbeam = { export const utils_pointonbeam = {
name: 'examples.utils_pointonbeam', name: 'examples.utils_pointonbeam',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.from1 = new Point(10, 10) points.from1 = new Point(10, 10)
points.to1 = new Point(90, 60) points.to1 = new Point(90, 60)
points.from2 = new Point(10, 30) points.from2 = new Point(10, 30)
@ -371,14 +347,12 @@ export const utils_pointonbeam = {
paths.lne2 = new Path().move(points.to2).line(points.b2).attr('class', 'fabric dashed') paths.lne2 = new Path().move(points.to2).line(points.b2).attr('class', 'fabric dashed')
return part return part
} },
} }
export const utils_pointoncurve = { export const utils_pointoncurve = {
name: 'examples.utils_pointoncurve', name: 'examples.utils_pointoncurve',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.start = new Point(10, 10) points.start = new Point(10, 10)
points.cp1 = new Point(90, 10) points.cp1 = new Point(90, 10)
points.cp2 = new Point(10, 60) points.cp2 = new Point(10, 60)
@ -403,14 +377,12 @@ export const utils_pointoncurve = {
.attr('class', 'fabric stroke-lg') .attr('class', 'fabric stroke-lg')
return part return part
} },
} }
export const utils_pointonline = { export const utils_pointonline = {
name: 'examples.utils_pointonline', name: 'examples.utils_pointonline',
draft: part => { draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand()
points.from1 = new Point(10, 10) points.from1 = new Point(10, 10)
points.to1 = new Point(90, 60) points.to1 = new Point(90, 60)
points.from2 = new Point(10, 30) points.from2 = new Point(10, 30)
@ -440,14 +412,12 @@ export const utils_pointonline = {
paths.lne2 = new Path().move(points.to2).line(points.b2).attr('class', 'fabric dashed') paths.lne2 = new Path().move(points.to2).line(points.b2).attr('class', 'fabric dashed')
return part return part
} },
} }
export const utils_splitcurve = { export const utils_splitcurve = {
name: 'examples.utils_splitcurve', name: 'examples.utils_splitcurve',
draft: part => { draft: ({ Point, points, Path, paths, utils, part }) => {
const { Point, points, Path, paths, utils } = part.shorthand()
points.from = new Point(40, 10) points.from = new Point(40, 10)
points.to = new Point(40, 80) points.to = new Point(40, 80)
paths.line = new Path().move(points.from).line(points.to).attr('class', 'lining dashed') paths.line = new Path().move(points.from).line(points.to).attr('class', 'lining dashed')
@ -471,6 +441,5 @@ export const utils_splitcurve = {
} }
return part return part
} },
} }