From b14db2f1d255cccc3c3636e67416a167f6b6e95c Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 11 Sep 2022 14:25:25 +0200 Subject: [PATCH] chore(examples): Port to v3 stage 2 --- designs/examples/src/docs.mjs | 44 ++++--- designs/examples/src/index.mjs | 14 +-- designs/examples/src/path.mjs | 195 ++++++++++++------------------ designs/examples/src/plugins.mjs | 97 +++++---------- designs/examples/src/point.mjs | 103 ++++++---------- designs/examples/src/settings.mjs | 7 +- designs/examples/src/snippet.mjs | 19 +-- designs/examples/src/snippets.mjs | 57 +++------ designs/examples/src/utils.mjs | 91 +++++--------- 9 files changed, 223 insertions(+), 404 deletions(-) diff --git a/designs/examples/src/docs.mjs b/designs/examples/src/docs.mjs index 6eb2f5c28a5..e00000a3d42 100644 --- a/designs/examples/src/docs.mjs +++ b/designs/examples/src/docs.mjs @@ -2,9 +2,7 @@ import { box } from './shared.mjs' export const docs_coords = { name: 'examples.box_coords', - draft: part => { - const { Point, points, paths, Path } = part.shorthand() - + draft: ({ Point, points, paths, Path, part }) => { points.origin = new Point(10, 10) points.x = new Point(100, 10) points.y = new Point(10, 50) @@ -19,17 +17,15 @@ export const docs_coords = { .attr('marker-end', 'url(#dimensionTo)') return box(part, 100, 50) - } + }, } export const docs_overview = { name: 'examples.docs_overview', - draft: part => { - const { Point, points, Path, paths, options } = part.shorthand() - + draft: ({ Point, points, Path, paths, options, part }) => { /** - * 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) => { let randomized = (tolerance / 100) * Math.random() * value let fixed = (1 - tolerance / 100) * value @@ -38,20 +34,20 @@ export const docs_overview = { } /** - * like about, but also randomly makes value negative - * This is for degrees - */ + * like about, but also randomly makes value negative + * This is for degrees + */ const nabout = (value, tolerance = 5) => { if (Math.random() > 0.5) return about(value, tolerance) else return -1 * about(value, tolerance) } /** - * Draws a w*h box that's randomized by tolerance to give it - * that hand-drawn look. - * - * Returns a Path object - */ + * Draws a w*h box that's randomized by tolerance to give it + * that hand-drawn look. + * + * Returns a Path object + */ const box = (name, origin, width, height, tolerance = 10) => { let base = height if (width < height) base = width @@ -119,9 +115,9 @@ export const docs_overview = { } /** - * Draws an arrow from to - * Returns a Path object - */ + * Draws an arrow from to + * Returns a Path object + */ const arrow = (name, text = '', tolerance = 10) => { let from = points[name + 'From'] let to = points[name + 'To'] @@ -295,7 +291,10 @@ export const docs_overview = { drawBox('settings', -100, 6, 40, 20) 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) paths.arrow1 = arrow('arrow1') points.arrow2From = points.PatternTopRight.shiftFractionTowards(points.PatternBottomRight, 0.5) @@ -318,6 +317,5 @@ export const docs_overview = { .attr('class', 'hidden') return part - } + }, } - diff --git a/designs/examples/src/index.mjs b/designs/examples/src/index.mjs index 8e8081fc96e..aeb6149af4a 100644 --- a/designs/examples/src/index.mjs +++ b/designs/examples/src/index.mjs @@ -2,7 +2,6 @@ import { Design } from '@freesewing/core' import { pluginBundle } from '@freesewing/plugin-bundle' import { gorePlugin } from '@freesewing/plugin-gore' import { data } from '../data.mjs' -import config from '../config/' // Path API import { @@ -68,7 +67,7 @@ import { utils_curvesintersect, utils_pointonbeam, utils_pointonline, - utils_pointoncurve , + utils_pointoncurve, utils_circlesintersect, utils_beamintersectscircle, utils_lineintersectscircle, @@ -116,12 +115,10 @@ import { settings_sa } from './settings.mjs' // Docs illustrations import { docs_coords, docs_overview } from './docs.mjs' - // Setup our new design const Examples = new Design({ data, parts: [ - // Path API path__curve, path_attr, @@ -183,7 +180,7 @@ const Examples = new Design({ utils_curvesintersect, utils_pointonbeam, utils_pointonline, - utils_pointoncurve , + utils_pointoncurve, utils_circlesintersect, utils_beamintersectscircle, utils_lineintersectscircle, @@ -220,7 +217,7 @@ const Examples = new Design({ snippet_snapstud, snippet_logo, ], - plugins: [ pluginBundle, gorePlugin ], + plugins: [pluginBundle, gorePlugin], }) // Named exports @@ -286,7 +283,7 @@ export { utils_curvesintersect, utils_pointonbeam, utils_pointonline, - utils_pointoncurve , + utils_pointoncurve, utils_circlesintersect, utils_beamintersectscircle, utils_lineintersectscircle, @@ -322,6 +319,5 @@ export { snippet_snapsocket, snippet_snapstud, snippet_logo, - Examples + Examples, } - diff --git a/designs/examples/src/path.mjs b/designs/examples/src/path.mjs index 66601276487..3ced231626f 100644 --- a/designs/examples/src/path.mjs +++ b/designs/examples/src/path.mjs @@ -2,9 +2,7 @@ import { box } from './shared.mjs' export const path__curve = { name: 'examples.path__curve', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.from = new Point(5, 20) points.cp2 = new Point(60, 30) points.to = new Point(90, 20) @@ -16,14 +14,12 @@ export const path__curve = { .attr('data-text-class', 'text-sm center fill-note') return box(part, 100, 25) - } + }, } export const path_attr = { name: 'examples.path_attr', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.B = new Point(10, 50) points.BCp2 = new Point(40, 10) points.C = new Point(90, 30) @@ -37,21 +33,22 @@ export const path_attr = { .attr('data-text-class', 'text-xs center') return part - } + }, } export const path_clone = { name: 'examples.path_clone', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) points.C = new Point(90, 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 .clone() @@ -59,15 +56,12 @@ export const path_clone = { .attr('style', 'stroke-opacity: 0.5') return part - } + }, } - export const path_close = { name: 'examples.path_close', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.from = new Point(10, 20) points.cp2 = new Point(60, 30) points.to = new Point(90, 20) @@ -81,15 +75,12 @@ export const path_close = { .attr('data-text-class', 'text-sm right fill-note') return box(part, 100, 25) - } + }, } - export const path_curve = { name: 'examples.path_curve', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.from = new Point(10, 20) points.cp1 = new Point(40, 0) points.cp2 = new Point(60, 30) @@ -102,14 +93,12 @@ export const path_curve = { .attr('data-text-class', 'text-sm center fill-note') return box(part, 100, 25) - } + }, } export const path_curve_ = { name: 'examples.path_curve_', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.from = new Point(10, 20) points.cp1 = new Point(40, 0) points.to = new Point(90, 20) @@ -121,14 +110,12 @@ export const path_curve_ = { .attr('data-text-class', 'text-sm center fill-note') return box(part, 100, 25) - } + }, } export const path_divide = { name: 'examples.path_divide', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.A = new Point(55, 40) points.B = new Point(10, 70) points.BCp2 = new Point(40, 20) @@ -152,14 +139,12 @@ export const path_divide = { } return part - } + }, } export const path_edge = { name: 'examples.path_edge', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -188,14 +173,12 @@ export const path_edge = { snippets[i] = new Snippet('notch', paths.demo.edge(i)) return part - } + }, } export const path_end = { name: 'examples.path_end', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -207,15 +190,12 @@ export const path_end = { snippets.end = new Snippet('notch', paths.demo.end()) return part - } + }, } - export const path_intersects = { name: 'examples.path_intersects', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -248,14 +228,12 @@ export const path_intersects = { } return part - } + }, } export const path_intersectsx = { name: 'examples.path_intersectsx', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(95, 50) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -280,14 +258,12 @@ export const path_intersectsx = { } return part - } + }, } export const path_intersectsy = { name: 'examples.path_intersectsy', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(55, 40) points.B = new Point(10, 70) points.BCp2 = new Point(40, 20) @@ -311,15 +287,12 @@ export const path_intersectsy = { } return part - } + }, } - export const path_join = { name: 'examples.path_join', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -339,21 +312,22 @@ export const path_join = { .attr('style', 'stroke-opacity: 0.5') return part - } + }, } export const path_length = { name: 'examples.path_length', - draft: part => { - const { Point, points, Path, paths, macro } = part.shorthand() - + draft: ({ Point, points, Path, paths, macro, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) points.C = new Point(90, 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', { path: paths.example, @@ -371,14 +345,12 @@ export const path_length = { }) return part - } + }, } export const path_line = { name: 'examples.path_line', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.from = new Point(10, 10) points.to = new Point(90, 10) @@ -389,14 +361,12 @@ export const path_line = { .attr('data-text-class', 'text-sm center fill-note') return box(part, 100, 15) - } + }, } export const path_move = { name: 'examples.path_move', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.to = new Point(50, 10) .attr('data-text', 'Path.move()') .attr('data-text-class', 'fill-note center') @@ -404,15 +374,13 @@ export const path_move = { paths.noline = new Path().move(points.to) return box(part, 100, 15) - } + }, } export const path_noop = { name: 'examples.path_noop', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - - points.left = new Point(10,10) + draft: ({ Point, points, Path, paths, part }) => { + points.left = new Point(10, 10) points.dartLeft = new Point(40, 10) points.dartTip = new Point(50, 50) points.dartRight = new Point(60, 10) @@ -425,23 +393,16 @@ export const path_noop = { .line(points.right) paths.withDart = paths.without - .insop( - 'dart', - new Path() - .line(points.dartTip) - .line(points.dartRight) - ) + .insop('dart', new Path().line(points.dartTip).line(points.dartRight)) .attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;') return part - } + }, } export const path_offset = { name: 'examples.path_offset', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -466,14 +427,12 @@ export const path_offset = { .attr('class', 'canvas') return part - } + }, } export const path_ops = { name: 'examples.path_ops', - draft: part => { - const { Point, points, Path, paths, options } = part.shorthand() - + draft: ({ Point, points, Path, paths, options, part }) => { const textClasses = (label) => 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() return part - } + }, } export const path_reverse = { name: 'examples.path_reverse', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) points.C = new Point(90, 30) @@ -547,21 +504,22 @@ export const path_reverse = { .attr('data-text-class', 'text-xs fill-lining') return part - } + }, } export const path_shiftalong = { name: 'examples.path_shiftalong', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) points.C = new Point(90, 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 .shiftAlong(20) @@ -578,21 +536,22 @@ export const path_shiftalong = { snippets.x2 = new Snippet('notch', points.x2) return part - } + }, } export const path_shiftfractionalong = { name: 'examples.path_shiftfractionalong', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) points.C = new Point(90, 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 .shiftFractionAlong(0.2) @@ -609,14 +568,12 @@ export const path_shiftfractionalong = { snippets.x2 = new Snippet('notch', points.x2) return part - } + }, } export const path_split = { name: 'examples.path_split', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -641,32 +598,31 @@ export const path_split = { } return part - } + }, } export const path_start = { name: 'examples.path_start', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) points.C = new Point(90, 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()) return part - } + }, } export const path_translate = { name: 'examples.path_translate', - draft: part => { - const { Point, points, Path, paths, macro } = part.shorthand() - + draft: ({ Point, points, Path, paths, macro, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -691,14 +647,12 @@ export const path_translate = { }) return part - } + }, } export const path_trim = { name: 'examples.path_trim', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.center = new Point(0, 0) points.base = new Point(0, 10) points.tip = new Point(0, 50) @@ -731,6 +685,5 @@ export const path_trim = { .attr('class', 'various stroke-xl') .attr('style', 'stroke-opacity: 0.5;') return part - } + }, } - diff --git a/designs/examples/src/plugins.mjs b/designs/examples/src/plugins.mjs index 6cf3fe116a2..10faf4655f3 100644 --- a/designs/examples/src/plugins.mjs +++ b/designs/examples/src/plugins.mjs @@ -2,9 +2,7 @@ import { box } from './shared.mjs' export const plugin_banner = { name: 'examples.plugin_banner', - draft: part => { - const { points, Point, paths, Path, macro } = part.shorthand() - + draft: ({ points, Point, paths, Path, macro, part }) => { points.from = new Point(0, 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') return part - } + }, } - export const plugin_bartack = { name: 'examples.plugin_bartack', - draft: part => { - const { Point, points, macro } = part.shorthand() - + draft: ({ Point, points, macro, part }) => { points.a = new Point(15, 15) macro('bartack', { @@ -37,14 +32,12 @@ export const plugin_bartack = { }) return box(part, 60, 30) - } + }, } export const plugin_bartackalong = { name: 'examples.plugin_bartackalong', - draft: part => { - const { Point, Path, points, paths, macro } = part.shorthand() - + draft: ({ Point, Path, points, paths, macro, part }) => { points.a = new Point(15, 15) points.b = new Point(20, 20) points.c = new Point(30, 20) @@ -64,14 +57,12 @@ export const plugin_bartackalong = { }) return box(part, 60, 30) - } + }, } export const plugin_bartackfractionalong = { name: 'examples.plugin_bartackfractionalong', - draft: part => { - const { Point, Path, points, paths, macro } = part.shorthand() - + draft: ({ Point, Path, points, paths, macro, part }) => { points.a = new Point(15, 15) points.b = new Point(20, 20) points.c = new Point(30, 20) @@ -93,14 +84,12 @@ export const plugin_bartackfractionalong = { }) return box(part, 60, 30) - } + }, } export const plugin_buttons = { name: 'examples.plugin_buttons', - draft: part => { - const { Point, snippets, Snippet } = part.shorthand() - + draft: ({ Point, snippets, Snippet, part }) => { snippets.button = new Snippet('button', new Point(20, 10)) snippets.buttonhole = new Snippet('buttonhole', new Point(40, 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)) return box(part, 140, 20) - } + }, } export const plugin_cutonfold = { name: 'examples.plugin_cutonfold', - draft: part => { - const { Point, points, Path, paths, macro } = part.shorthand() - + draft: ({ Point, points, Path, paths, macro, part }) => { points.topLeft = new Point(0, 0) points.topRight = new Point(150, 0) points.bottomRight = new Point(150, 30) @@ -136,14 +123,12 @@ export const plugin_cutonfold = { }) return part - } + }, } export const plugin_dimension = { name: 'examples.plugin_dimension', - draft: part => { - const { Point, points, Path, paths, macro } = part.shorthand() - + draft: ({ Point, points, Path, paths, macro, part }) => { points.A = new Point(0, 0) points.B = new Point(0, 100) points.C = new Point(50, 100) @@ -189,14 +174,12 @@ export const plugin_dimension = { }) return part - } + }, } export const plugin_gore = { name: 'examples.plugin_gore', - draft: part => { - const { Point, points, macro } = part.shorthand() - + draft: ({ Point, points, macro, part }) => { points.anchor = new Point(0, 0) macro('gore', { @@ -208,14 +191,12 @@ export const plugin_gore = { }) return part - } + }, } export const plugin_grainline = { name: 'examples.plugin_grainline', - draft: part => { - const { Point, points, macro } = part.shorthand() - + draft: ({ Point, points, macro, part }) => { points.grainlineFrom = new Point(10, 10) points.grainlineTo = new Point(100, 10) @@ -225,26 +206,23 @@ export const plugin_grainline = { }) return box(part, 110, 15) - } + }, } export const plugin_logo = { name: 'examples.plugin_logo', - draft: part => { - const { points, Point, snippets, Snippet } = part.shorthand() + draft: ({ points, Point, snippets, Snippet, part }) => { points.anchor = new Point(50, 25) snippets.logo = new Snippet('logo', points.anchor).attr('data-scale', 0.666) return box(part, 100, 35) - } + }, } export const plugin_mirror = { name: 'examples.plugin_mirror', - draft: part => { - const { Point, Path, points, paths, macro } = part.shorthand() - + draft: ({ Point, Path, points, paths, macro, part }) => { points.a = new Point(5, 5) points.b = new Point(45, 30) points.c = new Point(5, 30) @@ -265,26 +243,22 @@ export const plugin_mirror = { }) return box(part, 100, 40) - } + }, } export const plugin_notches = { name: 'examples.plugin_notches', - draft: part => { - const { Point, snippets, Snippet } = part.shorthand() - + draft: ({ Point, snippets, Snippet, part }) => { snippets.notch = new Snippet('notch', new Point(60, 10)) snippets.bnotch = new Snippet('bnotch', new Point(80, 10)) return box(part, 140, 20) - } + }, } export const plugin_round = { name: 'examples.plugin_round', - draft: part => { - const { Point, points, Path, paths, macro } = part.shorthand() - + draft: ({ Point, points, Path, paths, macro, part }) => { points.topLeft = new Point(0, 0) points.bottomLeft = new Point(0, 30) points.topRight = new Point(100, 0) @@ -316,14 +290,12 @@ export const plugin_round = { }) return part - } + }, } export const plugin_scalebox = { name: 'examples.plugin_scalebox', - draft: part => { - const { Point, points, macro } = part.shorthand() - + draft: ({ Point, points, macro, part }) => { points.anchor1 = new Point(0, 0) points.anchor2 = new Point(70, 0) @@ -331,14 +303,12 @@ export const plugin_scalebox = { macro('miniscale', { at: points.anchor2 }) return part - } + }, } export const plugin_sprinkle = { name: 'examples.plugin_sprinkle', - draft: part => { - const { Point, points, macro } = part.shorthand() - + draft: ({ Point, points, macro, part }) => { points.a = new Point(10, 10) points.b = new Point(20, 15) points.c = new Point(30, 10) @@ -355,14 +325,12 @@ export const plugin_sprinkle = { }) return box(part, 100, 25) - } + }, } export const plugin_title = { name: 'examples.plugin_title', - draft: part => { - const { Point, points, macro } = part.shorthand() - + draft: ({ Point, points, macro, part }) => { points.title = new Point(90, 45) macro('title', { @@ -373,6 +341,5 @@ export const plugin_title = { }) return box(part, 200, 70) - } + }, } - diff --git a/designs/examples/src/point.mjs b/designs/examples/src/point.mjs index 8af7916f422..3d77c190c89 100644 --- a/designs/examples/src/point.mjs +++ b/designs/examples/src/point.mjs @@ -2,9 +2,7 @@ import { box } from './shared.mjs' export const point_angle = { name: 'examples.point_angle', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.sun = new Point(10, 5) points.moon = points.sun.shift(-15, 70) 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') return part - } + }, } export const point_attr = { name: 'examples.point_attr', - draft: part => { - const { Point, points } = part.shorthand() - + draft: ({ Point, points, part }) => { points.anchor = new Point(100, 25) .attr('data-text', 'supportFreesewingBecomeAPatron') .attr('data-text-class', 'center') return box(part, 200, 50) - } + }, } export const point_clone = { name: 'examples.point_clone', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.A = new Point(25, 25) .attr('data-text', 'Point A') .attr('data-text-class', 'text-xl') @@ -45,28 +39,24 @@ export const point_clone = { snippets.x = new Snippet('notch', points.A) return box(part) - } + }, } export const point_copy = { name: 'examples.point_copy', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { 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') snippets.x = new Snippet('notch', points.A) return box(part) - } + }, } export const point_dist = { name: 'examples.point_dist', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.from = new Point(10, 10) 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') return part - } + }, } export const point_dx = { name: 'examples.point_dx', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.from = new Point(10, 10) 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') return part - } + }, } export const point_dy = { name: 'examples.point_dy', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.from = new Point(10, 10) 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') return part - } + }, } export const point_flipx = { name: 'examples.point_flipy', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.top = new Point(50, 10) points.out1 = new Point(70, 30) 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') return part - } + }, } export const point_flipy = { name: 'examples.point_flipy', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.start = new Point(0, 50) points.churchTowerWallLeft = new Point(10, 50) points.churchTowerRoofLeft = new Point(10, 30) @@ -253,14 +235,12 @@ export const point_flipy = { .attr('class', 'note dashed') return part - } + }, } export const point_rotate = { name: 'examples.point_rotate', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, paths, part }) => { points.sun = new Point(40, 40) points.moon = new Point(70, 40) let step = 360 / 36 @@ -271,14 +251,12 @@ export const point_rotate = { } return part - } + }, } export const point_shift = { name: 'examples.point_shift', - draft: part => { - const { Point, points, macro } = part.shorthand() - + draft: ({ Point, points, macro, part }) => { points.A = new Point(90, 40).attr('data-text', 'Point A').attr('data-text-class', 'right') points.B = points.A.shift(155, 70) .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) - } + }, } export const point_shiftfractiontowards = { name: 'examples.point_shiftfractiontowards', - draft: part => { - const { Point, points, Path, paths, macro } = part.shorthand() - + draft: ({ Point, points, Path, paths, macro, part }) => { points.A = new Point(90, 70).attr('data-text', 'Point A') points.B = new Point(10, 10).attr('data-text', 'Point B') points.C = points.A.shiftFractionTowards(points.B, 0.5) @@ -321,14 +297,12 @@ export const point_shiftfractiontowards = { }) return part - } + }, } export const point_shiftoutwards = { name: 'examples.point_shiftoutwards', - draft: part => { - const { Point, points, Path, paths, macro } = part.shorthand() - + draft: ({ Point, points, Path, paths, macro, part }) => { points.A = new Point(90, 70).attr('data-text', 'Point A') points.B = new Point(30, 30).attr('data-text', 'Point B') points.C = points.A.shiftOutwards(points.B, 30) @@ -344,14 +318,12 @@ export const point_shiftoutwards = { }) return box(part, 110, 75) - } + }, } export const point_shifttowards = { name: 'examples.point_shifttowards', - draft: part => { - const { Point, points, Path, paths, macro } = part.shorthand() - + draft: ({ Point, points, Path, paths, macro, part }) => { points.A = new Point(90, 70).attr('data-text', 'Point A') points.B = new Point(10, 10).attr('data-text', 'Point B') points.C = points.A.shiftTowards(points.B, 35) @@ -368,14 +340,12 @@ export const point_shifttowards = { }) return box(part, 110, 80) - } + }, } export const point_sitson = { name: 'examples.point_sitson', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { let s for (let i = 0; i < 10; i++) { points[`a${i}`] = new Point(i * 10, 40) @@ -387,14 +357,12 @@ export const point_sitson = { } return box(part) - } + }, } export const point_sitsroughlyon = { name: 'examples.point_sitsroughlyon', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { box(part) let s @@ -408,14 +376,12 @@ export const point_sitsroughlyon = { } return part - } + }, } export const point_translate = { name: 'examples.point_translate', - draft: part => { - const { Point, points, macro } = part.shorthand() - + draft: ({ Point, points, macro, part }) => { points.A = new Point(20, 20).attr('data-text', 'Point A') points.B = points.A.translate(120, 60) .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) - } + }, } - diff --git a/designs/examples/src/settings.mjs b/designs/examples/src/settings.mjs index 3e4c5d16aaf..686351ed158 100644 --- a/designs/examples/src/settings.mjs +++ b/designs/examples/src/settings.mjs @@ -1,8 +1,6 @@ export const settings_sa = { name: 'examples.settings_sa', - draft: part => { - const { Point, points, Path, paths } = part.shorthand() - + draft: ({ Point, points, Path, path, part }) => { points.A = new Point(45, 60) points.B = new Point(10, 30) points.BCp2 = new Point(40, 20) @@ -20,6 +18,5 @@ export const settings_sa = { paths.offset = paths.example.offset(-10).attr('class', 'fabric sa') return part - } + }, } - diff --git a/designs/examples/src/snippet.mjs b/designs/examples/src/snippet.mjs index ae6fa4f6eda..152a6635f07 100644 --- a/designs/examples/src/snippet.mjs +++ b/designs/examples/src/snippet.mjs @@ -2,9 +2,7 @@ import { box } from './shared.mjs' export const snippet = { name: 'examples.snippet', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor1 = new Point(20, 15) points.anchor2 = new Point(50, 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) return box(part) - } + }, } export const snippet_attr = { name: 'examples.snippet_attr', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 15) snippets.demo = new Snippet('logo', points.anchor) .attr('data-scale', 0.8) .attr('data-rotate', 180) return box(part) - } + }, } export const snippet_clone = { name: 'examples.snippet_clone', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(35, 35) snippets.demo = new Snippet('logo', points.anchor).attr('style', 'color: #f006') snippets.clone = snippets.demo.clone().attr('data-scale', 0.5) return box(part) - } + }, } - diff --git a/designs/examples/src/snippets.mjs b/designs/examples/src/snippets.mjs index 2e8651b75e0..95c2e3d3ea4 100644 --- a/designs/examples/src/snippets.mjs +++ b/designs/examples/src/snippets.mjs @@ -2,109 +2,90 @@ import { box } from './shared.mjs' export const snippet_bnotch = { name: 'examples.snippet_bnotch', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 5) snippets.demo = new Snippet('bnotch', points.anchor) return box(part, 100, 10) - } + }, } -export const snippet_button = { +export const snippet_button = { name: 'examples.snippet_button', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 5) snippets.demo = new Snippet('button', points.anchor) return box(part, 100, 10) - } + }, } export const snippet_buttonholeend = { name: 'examples.snippet_buttonholeend', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 0) snippets.demo = new Snippet('buttonhole-end', points.anchor) return box(part, 100, 10) - } + }, } export const snippet_buttonholestart = { name: 'examples.snippet_buttonholestart', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 10) snippets.demo = new Snippet('buttonhole-start', points.anchor) return box(part, 100, 10) - } + }, } export const snippet_buttonhole = { name: 'examples.snippet_buttonhole', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 5) snippets.demo = new Snippet('buttonhole', points.anchor) return box(part, 100, 10) - } + }, } export const snippet_logo = { name: 'examples.snippet_logo', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 35) snippets.demo = new Snippet('logo', points.anchor) return box(part, 100, 50) - } + }, } export const snippet_notch = { name: 'examples.snippet_notch', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 5) snippets.demo = new Snippet('notch', points.anchor) return box(part, 100, 10) - } + }, } export const snippet_snapsocket = { name: 'examples.snippet_snapsocket', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 5) snippets.demo = new Snippet('snap-socket', points.anchor) return box(part, 100, 10) - } + }, } export const snippet_snapstud = { name: 'examples.snippet_snapstud', - draft: part => { - const { Point, points, Snippet, snippets } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, part }) => { points.anchor = new Point(50, 5) snippets.demo = new Snippet('snap-stud', points.anchor) return box(part, 100, 10) - } + }, } - diff --git a/designs/examples/src/utils.mjs b/designs/examples/src/utils.mjs index ce65cff4f9b..201fa7d40f0 100644 --- a/designs/examples/src/utils.mjs +++ b/designs/examples/src/utils.mjs @@ -2,9 +2,7 @@ import { box } from './shared.mjs' export const utils_beamintersectscircle = { name: 'examples.utils_beamintersectscircle', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.A = new Point(95, 45).attr('data-circle', 35).attr('data-circle-class', 'fabric') points.B = new Point(55, 50) points.C = new Point(75, 30) @@ -45,14 +43,12 @@ export const utils_beamintersectscircle = { snippets.second3 = new Snippet('notch', intersections3[1]) return box(part, 200, 80) - } + }, } export const utils_beamintersectsx = { name: 'examples.utils_beamintersectsx', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.A = new Point(10, 10) points.B = new Point(90, 30) @@ -66,14 +62,12 @@ export const utils_beamintersectsx = { .attr('class', 'note dashed') return part - } + }, } export const utils_beamintersectsy = { name: 'examples.utils_beamintersectsy', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.A = new Point(10, 10) points.B = new Point(50, 40) @@ -87,14 +81,12 @@ export const utils_beamintersectsy = { .attr('class', 'note dashed') return part - } + }, } export const utils_beamsintersect = { name: 'examples.utils_beamsintersect', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.A = new Point(10, 10) points.B = new Point(50, 40) 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)) return part - } + }, } export const utils_circlesintersect = { name: 'examples.utils_circlesintersect', - draft: part => { - const { Point, points, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Snippet, snippets, utils, part }) => { 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.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]) return part - } + }, } export const utils_curveintersectsx = { name: 'examples.utils_curveintersectsx', - draft: part => { - const { Point, points, Path, paths, utils, snippets, Snippet } = part.shorthand() - + draft: ({ Point, points, Path, paths, utils, snippets, Snippet, part }) => { points.start = new Point(10, 15) points.cp1 = new Point(80, 10) points.cp2 = new Point(-50, 80) @@ -172,14 +160,12 @@ export const utils_curveintersectsx = { snippets[p.y] = new Snippet('notch', p) return part - } + }, } export const utils_curveintersectsy = { name: 'examples.utils_curveintersectsy', - draft: part => { - const { Point, points, Path, paths, utils, snippets, Snippet } = part.shorthand() - + draft: ({ Point, points, Path, paths, utils, snippets, Snippet, part }) => { points.start = new Point(10, 45) points.cp1 = new Point(50, 10) points.cp2 = new Point(0, 80) @@ -205,14 +191,12 @@ export const utils_curveintersectsy = { snippets[p.x] = new Snippet('notch', p) return part - } + }, } export const utils_curvesintersect = { name: 'examples.utils_curvesintersect', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.A = new Point(10, 10) points.Acp = new Point(310, 40) points.B = new Point(110, 70) @@ -239,14 +223,12 @@ export const utils_curvesintersect = { } return part - } + }, } export const utils_lineintersectscircle = { name: 'examples.utils_lineintersectscircle', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.A = new Point(95, 45).attr('data-circle', 35).attr('data-circle-class', 'fabric') points.B = new Point(55, 50) points.C = new Point(75, 30) @@ -286,14 +268,12 @@ export const utils_lineintersectscircle = { snippets.second3 = new Snippet('notch', intersections3[1]) return box(part, 200, 80) - } + }, } export const utils_lineintersectscurve = { name: 'examples.utils_lineintersectscurve', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.A = new Point(10, 10) points.Acp = new Point(310, 40) points.B = new Point(110, 70) @@ -315,14 +295,12 @@ export const utils_lineintersectscurve = { } return part - } + }, } export const utils_linesintersect = { name: 'examples.utils_linesintersect', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.A = new Point(10, 10) points.B = new Point(50, 40) 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)) return part - } + }, } export const utils_pointonbeam = { name: 'examples.utils_pointonbeam', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.from1 = new Point(10, 10) points.to1 = new Point(90, 60) 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') return part - } + }, } export const utils_pointoncurve = { name: 'examples.utils_pointoncurve', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.start = new Point(10, 10) points.cp1 = new Point(90, 10) points.cp2 = new Point(10, 60) @@ -403,14 +377,12 @@ export const utils_pointoncurve = { .attr('class', 'fabric stroke-lg') return part - } + }, } export const utils_pointonline = { name: 'examples.utils_pointonline', - draft: part => { - const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, Snippet, snippets, utils, part }) => { points.from1 = new Point(10, 10) points.to1 = new Point(90, 60) 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') return part - } + }, } export const utils_splitcurve = { name: 'examples.utils_splitcurve', - draft: part => { - const { Point, points, Path, paths, utils } = part.shorthand() - + draft: ({ Point, points, Path, paths, utils, part }) => { points.from = new Point(40, 10) points.to = new Point(40, 80) paths.line = new Path().move(points.from).line(points.to).attr('class', 'lining dashed') @@ -471,6 +441,5 @@ export const utils_splitcurve = { } return part - } + }, } -