From fa14ad0fa32d3709fd45b22c1b31861d04552e89 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Tue, 30 Aug 2022 18:21:50 +0200 Subject: [PATCH] chore(examples): Ported to v3 --- designs/examples/src/docs.mjs | 323 ++++++++ designs/examples/src/docs_coords.js | 20 - designs/examples/src/docs_overview.js | 295 ------- designs/examples/src/index.js | 205 ----- designs/examples/src/index.mjs | 328 ++++++++ designs/examples/src/path.mjs | 736 ++++++++++++++++++ designs/examples/src/path__curve.js | 17 - designs/examples/src/path_attr.js | 17 - designs/examples/src/path_clone.js | 18 - designs/examples/src/path_close.js | 19 - designs/examples/src/path_curve.js | 18 - designs/examples/src/path_curve_.js | 17 - designs/examples/src/path_divide.js | 27 - designs/examples/src/path_edge.js | 32 - designs/examples/src/path_end.js | 15 - designs/examples/src/path_intersects.js | 36 - designs/examples/src/path_intersectsx.js | 28 - designs/examples/src/path_intersectsy.js | 27 - designs/examples/src/path_join.js | 23 - designs/examples/src/path_length.js | 28 - designs/examples/src/path_line.js | 16 - designs/examples/src/path_move.js | 13 - designs/examples/src/path_noop.js | 26 - designs/examples/src/path_offset.js | 28 - designs/examples/src/path_ops.js | 52 -- designs/examples/src/path_reverse.js | 21 - designs/examples/src/path_shiftalong.js | 27 - .../examples/src/path_shiftfractionalong.js | 27 - designs/examples/src/path_split.js | 28 - designs/examples/src/path_start.js | 14 - designs/examples/src/path_translate.js | 28 - designs/examples/src/path_trim.js | 36 - designs/examples/src/plugin_banner.js | 20 - designs/examples/src/plugin_bartack.js | 15 - designs/examples/src/plugin_bartackalong.js | 25 - .../src/plugin_bartackfractionalong.js | 27 - designs/examples/src/plugin_buttons.js | 14 - designs/examples/src/plugin_cutonfold.js | 23 - designs/examples/src/plugin_dimension.js | 49 -- designs/examples/src/plugin_gore.js | 15 - designs/examples/src/plugin_grainline.js | 15 - designs/examples/src/plugin_logo.js | 10 - designs/examples/src/plugin_mirror.js | 26 - designs/examples/src/plugin_notches.js | 10 - designs/examples/src/plugin_round.js | 35 - designs/examples/src/plugin_scalebox.js | 11 - designs/examples/src/plugin_sprinkle.js | 22 - designs/examples/src/plugin_title.js | 16 - designs/examples/src/plugins.mjs | 378 +++++++++ designs/examples/src/point.mjs | 436 +++++++++++ designs/examples/src/point_angle.js | 14 - designs/examples/src/point_attr.js | 11 - designs/examples/src/point_clone.js | 15 - designs/examples/src/point_copy.js | 12 - designs/examples/src/point_dist.js | 15 - designs/examples/src/point_dx.js | 22 - designs/examples/src/point_dy.js | 21 - designs/examples/src/point_flipx.js | 45 -- designs/examples/src/point_flipy.js | 71 -- designs/examples/src/point_rotate.js | 14 - designs/examples/src/point_shift.js | 18 - .../src/point_shiftfractiontowards.js | 26 - designs/examples/src/point_shiftoutwards.js | 21 - designs/examples/src/point_shifttowards.js | 22 - designs/examples/src/point_sitson.js | 17 - designs/examples/src/point_sitsroughlyon.js | 19 - designs/examples/src/point_translate.js | 21 - designs/examples/src/settings.mjs | 25 + designs/examples/src/settings_sa.js | 21 - .../examples/src/{shared.js => shared.mjs} | 0 designs/examples/src/snippet.js | 14 - designs/examples/src/snippet.mjs | 46 ++ designs/examples/src/snippet_attr.js | 12 - designs/examples/src/snippet_clone.js | 12 - designs/examples/src/snippets.mjs | 110 +++ designs/examples/src/snippets_bnotch.js | 10 - designs/examples/src/snippets_button.js | 10 - .../examples/src/snippets_buttonhole-end.js | 10 - .../examples/src/snippets_buttonhole-start.js | 10 - designs/examples/src/snippets_buttonhole.js | 10 - designs/examples/src/snippets_logo.js | 10 - designs/examples/src/snippets_notch.js | 10 - designs/examples/src/snippets_snapsocket.js | 10 - designs/examples/src/snippets_snapstud.js | 10 - designs/examples/src/utils.mjs | 476 +++++++++++ .../src/utils_beamintersectscircle.js | 46 -- designs/examples/src/utils_beamintersectsx.js | 17 - designs/examples/src/utils_beamintersectsy.js | 17 - designs/examples/src/utils_beamsintersect.js | 15 - .../examples/src/utils_circlesintersect.js | 29 - .../examples/src/utils_curveintersectsx.js | 29 - .../examples/src/utils_curveintersectsy.js | 29 - designs/examples/src/utils_curvesintersect.js | 30 - .../src/utils_lineintersectscircle.js | 45 -- .../examples/src/utils_lineintersectscurve.js | 25 - designs/examples/src/utils_linesintersect.js | 15 - designs/examples/src/utils_pointonbeam.js | 33 - designs/examples/src/utils_pointoncurve.js | 28 - designs/examples/src/utils_pointonline.js | 33 - designs/examples/src/utils_splitcurve.js | 27 - 100 files changed, 2858 insertions(+), 2442 deletions(-) create mode 100644 designs/examples/src/docs.mjs delete mode 100644 designs/examples/src/docs_coords.js delete mode 100644 designs/examples/src/docs_overview.js delete mode 100644 designs/examples/src/index.js create mode 100644 designs/examples/src/index.mjs create mode 100644 designs/examples/src/path.mjs delete mode 100644 designs/examples/src/path__curve.js delete mode 100644 designs/examples/src/path_attr.js delete mode 100644 designs/examples/src/path_clone.js delete mode 100644 designs/examples/src/path_close.js delete mode 100644 designs/examples/src/path_curve.js delete mode 100644 designs/examples/src/path_curve_.js delete mode 100644 designs/examples/src/path_divide.js delete mode 100644 designs/examples/src/path_edge.js delete mode 100644 designs/examples/src/path_end.js delete mode 100644 designs/examples/src/path_intersects.js delete mode 100644 designs/examples/src/path_intersectsx.js delete mode 100644 designs/examples/src/path_intersectsy.js delete mode 100644 designs/examples/src/path_join.js delete mode 100644 designs/examples/src/path_length.js delete mode 100644 designs/examples/src/path_line.js delete mode 100644 designs/examples/src/path_move.js delete mode 100644 designs/examples/src/path_noop.js delete mode 100644 designs/examples/src/path_offset.js delete mode 100644 designs/examples/src/path_ops.js delete mode 100644 designs/examples/src/path_reverse.js delete mode 100644 designs/examples/src/path_shiftalong.js delete mode 100644 designs/examples/src/path_shiftfractionalong.js delete mode 100644 designs/examples/src/path_split.js delete mode 100644 designs/examples/src/path_start.js delete mode 100644 designs/examples/src/path_translate.js delete mode 100644 designs/examples/src/path_trim.js delete mode 100644 designs/examples/src/plugin_banner.js delete mode 100644 designs/examples/src/plugin_bartack.js delete mode 100644 designs/examples/src/plugin_bartackalong.js delete mode 100644 designs/examples/src/plugin_bartackfractionalong.js delete mode 100644 designs/examples/src/plugin_buttons.js delete mode 100644 designs/examples/src/plugin_cutonfold.js delete mode 100644 designs/examples/src/plugin_dimension.js delete mode 100644 designs/examples/src/plugin_gore.js delete mode 100644 designs/examples/src/plugin_grainline.js delete mode 100644 designs/examples/src/plugin_logo.js delete mode 100644 designs/examples/src/plugin_mirror.js delete mode 100644 designs/examples/src/plugin_notches.js delete mode 100644 designs/examples/src/plugin_round.js delete mode 100644 designs/examples/src/plugin_scalebox.js delete mode 100644 designs/examples/src/plugin_sprinkle.js delete mode 100644 designs/examples/src/plugin_title.js create mode 100644 designs/examples/src/plugins.mjs create mode 100644 designs/examples/src/point.mjs delete mode 100644 designs/examples/src/point_angle.js delete mode 100644 designs/examples/src/point_attr.js delete mode 100644 designs/examples/src/point_clone.js delete mode 100644 designs/examples/src/point_copy.js delete mode 100644 designs/examples/src/point_dist.js delete mode 100644 designs/examples/src/point_dx.js delete mode 100644 designs/examples/src/point_dy.js delete mode 100644 designs/examples/src/point_flipx.js delete mode 100644 designs/examples/src/point_flipy.js delete mode 100644 designs/examples/src/point_rotate.js delete mode 100644 designs/examples/src/point_shift.js delete mode 100644 designs/examples/src/point_shiftfractiontowards.js delete mode 100644 designs/examples/src/point_shiftoutwards.js delete mode 100644 designs/examples/src/point_shifttowards.js delete mode 100644 designs/examples/src/point_sitson.js delete mode 100644 designs/examples/src/point_sitsroughlyon.js delete mode 100644 designs/examples/src/point_translate.js create mode 100644 designs/examples/src/settings.mjs delete mode 100644 designs/examples/src/settings_sa.js rename designs/examples/src/{shared.js => shared.mjs} (100%) delete mode 100644 designs/examples/src/snippet.js create mode 100644 designs/examples/src/snippet.mjs delete mode 100644 designs/examples/src/snippet_attr.js delete mode 100644 designs/examples/src/snippet_clone.js create mode 100644 designs/examples/src/snippets.mjs delete mode 100644 designs/examples/src/snippets_bnotch.js delete mode 100644 designs/examples/src/snippets_button.js delete mode 100644 designs/examples/src/snippets_buttonhole-end.js delete mode 100644 designs/examples/src/snippets_buttonhole-start.js delete mode 100644 designs/examples/src/snippets_buttonhole.js delete mode 100644 designs/examples/src/snippets_logo.js delete mode 100644 designs/examples/src/snippets_notch.js delete mode 100644 designs/examples/src/snippets_snapsocket.js delete mode 100644 designs/examples/src/snippets_snapstud.js create mode 100644 designs/examples/src/utils.mjs delete mode 100644 designs/examples/src/utils_beamintersectscircle.js delete mode 100644 designs/examples/src/utils_beamintersectsx.js delete mode 100644 designs/examples/src/utils_beamintersectsy.js delete mode 100644 designs/examples/src/utils_beamsintersect.js delete mode 100644 designs/examples/src/utils_circlesintersect.js delete mode 100644 designs/examples/src/utils_curveintersectsx.js delete mode 100644 designs/examples/src/utils_curveintersectsy.js delete mode 100644 designs/examples/src/utils_curvesintersect.js delete mode 100644 designs/examples/src/utils_lineintersectscircle.js delete mode 100644 designs/examples/src/utils_lineintersectscurve.js delete mode 100644 designs/examples/src/utils_linesintersect.js delete mode 100644 designs/examples/src/utils_pointonbeam.js delete mode 100644 designs/examples/src/utils_pointoncurve.js delete mode 100644 designs/examples/src/utils_pointonline.js delete mode 100644 designs/examples/src/utils_splitcurve.js diff --git a/designs/examples/src/docs.mjs b/designs/examples/src/docs.mjs new file mode 100644 index 00000000000..6eb2f5c28a5 --- /dev/null +++ b/designs/examples/src/docs.mjs @@ -0,0 +1,323 @@ +import { box } from './shared.mjs' + +export const docs_coords = { + name: 'examples.box_coords', + draft: part => { + const { Point, points, paths, Path } = part.shorthand() + + points.origin = new Point(10, 10) + points.x = new Point(100, 10) + points.y = new Point(10, 50) + points.textX = points.x.shift(135, 2).attr('data-text', 'X') + points.textY = points.y.shift(180, 5).attr('data-text', 'Y') + paths.coords = new Path() + .move(points.y) + .line(points.origin) + .line(points.x) + .attr('class', 'mark') + .attr('marker-start', 'url(#dimensionFrom)') + .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() + + /** + * 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 + + return fixed + randomized + } + + /** + * 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 + */ + const box = (name, origin, width, height, tolerance = 10) => { + let base = height + if (width < height) base = width + let t = base * (tolerance / 100) + points[name + 'TopLeft'] = new Point(about(origin.x, t), about(origin.y, t)) + points[name + 'BottomLeft'] = new Point(about(origin.x, t), about(origin.y + height, t)) + points[name + 'BottomRight'] = new Point( + about(origin.x + width, t), + about(origin.y + height, t) + ) + points[name + 'TopRight'] = new Point(about(origin.x + width, t), about(origin.y, t)) + points[name + 'Mid'] = points[name + 'TopLeft'].shiftFractionTowards( + points[name + 'BottomRight'], + 0.5 + ) + points[name + 'Mid'].y += 3 + + let f = 0.3 + let r = tolerance / 2 + points[name + 'TopLeftCp1'] = points[name + 'TopLeft'] + .shiftFractionTowards(points[name + 'BottomLeft'], about(f)) + .rotate(nabout(r), points[name + 'TopLeft']) + points[name + 'TopLeftCp2'] = points[name + 'TopLeft'] + .shiftFractionTowards(points[name + 'TopRight'], about(f)) + .rotate(nabout(r), points[name + 'TopLeft']) + points[name + 'BottomLeftCp1'] = points[name + 'BottomLeft'] + .shiftFractionTowards(points[name + 'TopLeft'], about(f)) + .rotate(nabout(r), points[name + 'BottomLeft']) + points[name + 'BottomLeftCp2'] = points[name + 'BottomLeft'] + .shiftFractionTowards(points[name + 'BottomRight'], about(f)) + .rotate(nabout(r), points[name + 'BottomLeft']) + points[name + 'BottomRightCp1'] = points[name + 'BottomRight'] + .shiftFractionTowards(points[name + 'BottomLeft'], about(f)) + .rotate(nabout(r), points[name + 'BottomRight']) + points[name + 'BottomRightCp2'] = points[name + 'BottomRight'] + .shiftFractionTowards(points[name + 'TopRight'], about(f)) + .rotate(nabout(r), points[name + 'BottomRight']) + points[name + 'TopRightCp1'] = points[name + 'TopRight'] + .shiftFractionTowards(points[name + 'BottomRight'], about(f)) + .rotate(nabout(r), points[name + 'TopRight']) + points[name + 'TopRightCp2'] = points[name + 'TopRight'] + .shiftFractionTowards(points[name + 'TopLeft'], about(f)) + .rotate(nabout(r), points[name + 'TopRight']) + + return new Path() + .move(points[name + 'TopLeft']) + .curve( + points[name + 'TopLeftCp1'], + points[name + 'BottomLeftCp1'], + points[name + 'BottomLeft'] + ) + .curve( + points[name + 'BottomLeftCp2'], + points[name + 'BottomRightCp1'], + points[name + 'BottomRight'] + ) + .curve( + points[name + 'BottomRightCp2'], + points[name + 'TopRightCp1'], + points[name + 'TopRight'] + ) + .curve(points[name + 'TopRightCp2'], points[name + 'TopLeftCp2'], points[name + 'TopLeft']) + .close() + .attr('class', options.focus === name ? 'note' : 'fabric') + } + + /** + * 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'] + from = from.shiftTowards(to, 3) + to = to.shiftTowards(from, 3) + let base = from.dist(to) + let t = base * (tolerance / 100) + from.x = about(from.x, t) + from.x = about(from.x, t) + to.x = about(to.x, t) + to.x = about(to.x, t) + let f = 0.3 + let r = tolerance / 2 + points[name + 'FromCp'] = from.shiftFractionTowards(to, about(f)).rotate(nabout(r), from) + points[name + 'ToCp'] = to.shiftFractionTowards(from, about(f)).rotate(nabout(r), to) + points[name + 'Tip1'] = to.shiftTowards(from, about(3.8)).rotate(about(15), to) + points[name + 'Tip2'] = to.shiftTowards(from, about(3.5)).rotate(about(-15), to) + let path = new Path() + .move(from) + .curve(points[name + 'FromCp'], points[name + 'ToCp'], to) + .move(points[name + 'Tip1']) + .line(to) + .line(points[name + 'Tip2']) + .attr('class', 'fabric') + if (options.focus === name) path = path.attr('class', 'note') + if (text) + return path + .attr('data-text', ' ' + text) + .attr('data-text-class', 'scribble') + .attr('data-text-class', options.focus === name ? 'fill-note' : '') + else return path + } + + const drawBox = (name, x, y, width, height, tolerance = 5, text = true) => { + points[name + 'Origin'] = new Point(x, y) + paths[name] = box(name, points[name + 'Origin'], width, height, tolerance) + if (text) { + points[name + 'Mid'].attr('data-text', name).attr('data-text-class', 'center scribble') + if (options.focus === name) points[name + 'Mid'].attr('data-text-class', 'fill-note') + } + } + + const svgLogo = (anchor, size = 1) => { + points.svg15 = anchor + .shift(45, 4 * size) + .attr('data-circle', 1.2 * size) + .attr('data-circle-class', 'fill-fabric') + points.svg3 = anchor + .shift(0, 4 * size) + .attr('data-circle', 1.2 * size) + .attr('data-circle-class', 'fill-fabric') + points.svg45 = anchor + .shift(-45, 4 * size) + .attr('data-circle', 1.2 * size) + .attr('data-circle-class', 'fill-fabric') + points.svg6 = anchor + .shift(-90, 4 * size) + .attr('data-circle', 1.2 * size) + .attr('data-circle-class', 'fill-fabric') + points.svg75 = anchor + .shift(-135, 4 * size) + .attr('data-circle', 1.2 * size) + .attr('data-circle-class', 'fill-fabric') + points.svg9 = anchor + .shift(180, 4 * size) + .attr('data-circle', 1.2 * size) + .attr('data-circle-class', 'fill-fabric') + points.svg105 = anchor + .shift(135, 4 * size) + .attr('data-circle', 1.2 * size) + .attr('data-circle-class', 'fill-fabric') + points.svg12 = anchor + .shift(90, 4 * size) + .attr('data-circle', 1.2 * size) + .attr('data-circle-class', 'fill-fabric') + points.svgText = anchor + .clone() + .attr('data-text', 'SVG') + .attr('data-text-class', 'text-xl scribble') + points.svgText.x += size * 7 + points.svgText.y += 6 + paths.svgLogo = new Path() + .move(points.svg15) + .line(points.svg75) + .move(points.svg3) + .line(points.svg9) + .move(points.svg45) + .line(points.svg105) + .move(points.svg6) + .line(points.svg12) + .attr('class', 'stroke-l') + } + const reactLogo = (anchor, size = 1) => { + h = 3 * size + w = 6 * size + points.reactTop1 = anchor.shift(45, w) + points.reactBottom1 = anchor.shift(-135, w) + points.reactTop1Cp1 = points.reactTop1.shift(135, h) + points.reactTop1Cp2 = points.reactTop1.shift(-45, h) + points.reactBottom1Cp1 = points.reactBottom1.shift(135, h) + points.reactBottom1Cp2 = points.reactBottom1.shift(-45, h) + points.reactTop2 = points.reactTop1.rotate(60, anchor) + points.reactBottom2 = points.reactBottom1.rotate(60, anchor) + points.reactTop2Cp1 = points.reactTop1Cp1.rotate(60, anchor) + points.reactTop2Cp2 = points.reactTop1Cp2.rotate(60, anchor) + points.reactBottom2Cp1 = points.reactBottom1Cp1.rotate(60, anchor) + points.reactBottom2Cp2 = points.reactBottom1Cp2.rotate(60, anchor) + points.reactTop3 = points.reactTop1.rotate(-60, anchor) + points.reactBottom3 = points.reactBottom1.rotate(-60, anchor) + points.reactTop3Cp1 = points.reactTop1Cp1.rotate(-60, anchor) + points.reactTop3Cp2 = points.reactTop1Cp2.rotate(-60, anchor) + points.reactBottom3Cp1 = points.reactBottom1Cp1.rotate(-60, anchor) + points.reactBottom3Cp2 = points.reactBottom1Cp2.rotate(-60, anchor) + points.svgLogo = anchor + .clone() + .attr('data-circle', 1 * size) + .attr('data-circle-class', 'fill-fabric') + points.reactText = anchor + .clone() + .attr('data-text', 'React') + .attr('data-text-class', 'text-xl scribble') + points.reactText.x += size * 7 + points.reactText.y += 6 + + paths.reactLogo = new Path() + .move(points.reactTop1) + .curve(points.reactTop1Cp1, points.reactBottom1Cp1, points.reactBottom1) + .curve(points.reactBottom1Cp2, points.reactTop1Cp2, points.reactTop1) + .close() + .move(points.reactTop2) + .curve(points.reactTop2Cp1, points.reactBottom2Cp1, points.reactBottom2) + .curve(points.reactBottom2Cp2, points.reactTop2Cp2, points.reactTop2) + .close() + .move(points.reactTop3) + .curve(points.reactTop3Cp1, points.reactBottom3Cp1, points.reactBottom3) + .curve(points.reactBottom3Cp2, points.reactTop3Cp2, points.reactTop3) + .close() + } + + // Other parts first so they're behind + drawBox('Part4', 4, -19, 40, 65, 5, false) + drawBox('Part3', 1, -16, 40, 65, 5, false) + drawBox('Part2', -2, -13, 40, 65, 5, false) + drawBox('Part', -5, -10, 40, 65, 5) + paths.Part4.attr('class', 'fill-bg') + paths.Part3.attr('class', 'fill-bg') + paths.Part2.attr('class', 'fill-bg') + paths.Part.attr('class', 'fill-bg') + points.PartMid.y = points.PartTopLeft.y + 9 + let x = 0 + let y = 0 + let w = 30 + let h = 15 + drawBox('Points', x, y, w, h) + y += 18 + drawBox('Paths', x, y, w, h) + y += 18 + drawBox('Snippets', x, y, w, h) + x = -35 + y = -3 + w = 25 + h = 20 + drawBox('config', x, y, w, h) + y += 23 + drawBox('Store', x, y, w, h) + x = -40 + y = -30 + drawBox('Pattern', x, y, 90, 90) + points.PatternMid.y = points.PatternTopLeft.y + 9 + + drawBox('settings', -100, 6, 40, 20) + drawBox('draft', 80, 3, 20, 25) + + 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) + points.arrow2To = points.draftTopLeft.shiftFractionTowards(points.draftBottomLeft, 0.5) + paths.arrow2 = arrow('arrow2', 'draft()') + + svgLogo(points.draftMid.shift(70, 50)) + reactLogo(points.draftMid.shift(-80, 36)) + + points.arrow3From = points.draftTopLeft.shiftFractionTowards(points.draftTopRight, 0.5) + points.arrow3To = points.svgText.clone() + paths.arrow3 = arrow('arrow3', 'render()') + points.arrow4From = points.draftBottomLeft.shiftFractionTowards(points.draftBottomRight, 0.5) + points.arrow4To = points.reactText.clone().shift(40, 15) + paths.arrow4 = arrow('arrow4') + + paths.extend = new Path() + .move(points.draftTopRight) + .line(points.draftTopRight.shift(0, 40)) + .attr('class', 'hidden') + + return part + } +} + diff --git a/designs/examples/src/docs_coords.js b/designs/examples/src/docs_coords.js deleted file mode 100644 index a573613ef5b..00000000000 --- a/designs/examples/src/docs_coords.js +++ /dev/null @@ -1,20 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, paths, Path } = part.shorthand() - - points.origin = new Point(10, 10) - points.x = new Point(100, 10) - points.y = new Point(10, 50) - points.textX = points.x.shift(135, 2).attr('data-text', 'X') - points.textY = points.y.shift(180, 5).attr('data-text', 'Y') - paths.coords = new Path() - .move(points.y) - .line(points.origin) - .line(points.x) - .attr('class', 'mark') - .attr('marker-start', 'url(#dimensionFrom)') - .attr('marker-end', 'url(#dimensionTo)') - - return box(part, 100, 50) -} diff --git a/designs/examples/src/docs_overview.js b/designs/examples/src/docs_overview.js deleted file mode 100644 index 23f8e6e7f92..00000000000 --- a/designs/examples/src/docs_overview.js +++ /dev/null @@ -1,295 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, options } = part.shorthand() - - /** - * 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 - - return fixed + randomized - } - - /** - * 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 - */ - const box = (name, origin, width, height, tolerance = 10) => { - let base = height - if (width < height) base = width - let t = base * (tolerance / 100) - points[name + 'TopLeft'] = new Point(about(origin.x, t), about(origin.y, t)) - points[name + 'BottomLeft'] = new Point(about(origin.x, t), about(origin.y + height, t)) - points[name + 'BottomRight'] = new Point( - about(origin.x + width, t), - about(origin.y + height, t) - ) - points[name + 'TopRight'] = new Point(about(origin.x + width, t), about(origin.y, t)) - points[name + 'Mid'] = points[name + 'TopLeft'].shiftFractionTowards( - points[name + 'BottomRight'], - 0.5 - ) - points[name + 'Mid'].y += 3 - - let f = 0.3 - let r = tolerance / 2 - points[name + 'TopLeftCp1'] = points[name + 'TopLeft'] - .shiftFractionTowards(points[name + 'BottomLeft'], about(f)) - .rotate(nabout(r), points[name + 'TopLeft']) - points[name + 'TopLeftCp2'] = points[name + 'TopLeft'] - .shiftFractionTowards(points[name + 'TopRight'], about(f)) - .rotate(nabout(r), points[name + 'TopLeft']) - points[name + 'BottomLeftCp1'] = points[name + 'BottomLeft'] - .shiftFractionTowards(points[name + 'TopLeft'], about(f)) - .rotate(nabout(r), points[name + 'BottomLeft']) - points[name + 'BottomLeftCp2'] = points[name + 'BottomLeft'] - .shiftFractionTowards(points[name + 'BottomRight'], about(f)) - .rotate(nabout(r), points[name + 'BottomLeft']) - points[name + 'BottomRightCp1'] = points[name + 'BottomRight'] - .shiftFractionTowards(points[name + 'BottomLeft'], about(f)) - .rotate(nabout(r), points[name + 'BottomRight']) - points[name + 'BottomRightCp2'] = points[name + 'BottomRight'] - .shiftFractionTowards(points[name + 'TopRight'], about(f)) - .rotate(nabout(r), points[name + 'BottomRight']) - points[name + 'TopRightCp1'] = points[name + 'TopRight'] - .shiftFractionTowards(points[name + 'BottomRight'], about(f)) - .rotate(nabout(r), points[name + 'TopRight']) - points[name + 'TopRightCp2'] = points[name + 'TopRight'] - .shiftFractionTowards(points[name + 'TopLeft'], about(f)) - .rotate(nabout(r), points[name + 'TopRight']) - - return new Path() - .move(points[name + 'TopLeft']) - .curve( - points[name + 'TopLeftCp1'], - points[name + 'BottomLeftCp1'], - points[name + 'BottomLeft'] - ) - .curve( - points[name + 'BottomLeftCp2'], - points[name + 'BottomRightCp1'], - points[name + 'BottomRight'] - ) - .curve( - points[name + 'BottomRightCp2'], - points[name + 'TopRightCp1'], - points[name + 'TopRight'] - ) - .curve(points[name + 'TopRightCp2'], points[name + 'TopLeftCp2'], points[name + 'TopLeft']) - .close() - .attr('class', options.focus === name ? 'note' : 'fabric') - } - - /** - * 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'] - from = from.shiftTowards(to, 3) - to = to.shiftTowards(from, 3) - let base = from.dist(to) - let t = base * (tolerance / 100) - from.x = about(from.x, t) - from.x = about(from.x, t) - to.x = about(to.x, t) - to.x = about(to.x, t) - let f = 0.3 - let r = tolerance / 2 - points[name + 'FromCp'] = from.shiftFractionTowards(to, about(f)).rotate(nabout(r), from) - points[name + 'ToCp'] = to.shiftFractionTowards(from, about(f)).rotate(nabout(r), to) - points[name + 'Tip1'] = to.shiftTowards(from, about(3.8)).rotate(about(15), to) - points[name + 'Tip2'] = to.shiftTowards(from, about(3.5)).rotate(about(-15), to) - let path = new Path() - .move(from) - .curve(points[name + 'FromCp'], points[name + 'ToCp'], to) - .move(points[name + 'Tip1']) - .line(to) - .line(points[name + 'Tip2']) - .attr('class', 'fabric') - if (options.focus === name) path = path.attr('class', 'note') - if (text) - return path - .attr('data-text', ' ' + text) - .attr('data-text-class', 'scribble') - .attr('data-text-class', options.focus === name ? 'fill-note' : '') - else return path - } - - const drawBox = (name, x, y, width, height, tolerance = 5, text = true) => { - points[name + 'Origin'] = new Point(x, y) - paths[name] = box(name, points[name + 'Origin'], width, height, tolerance) - if (text) { - points[name + 'Mid'].attr('data-text', name).attr('data-text-class', 'center scribble') - if (options.focus === name) points[name + 'Mid'].attr('data-text-class', 'fill-note') - } - } - - const svgLogo = (anchor, size = 1) => { - points.svg15 = anchor - .shift(45, 4 * size) - .attr('data-circle', 1.2 * size) - .attr('data-circle-class', 'fill-fabric') - points.svg3 = anchor - .shift(0, 4 * size) - .attr('data-circle', 1.2 * size) - .attr('data-circle-class', 'fill-fabric') - points.svg45 = anchor - .shift(-45, 4 * size) - .attr('data-circle', 1.2 * size) - .attr('data-circle-class', 'fill-fabric') - points.svg6 = anchor - .shift(-90, 4 * size) - .attr('data-circle', 1.2 * size) - .attr('data-circle-class', 'fill-fabric') - points.svg75 = anchor - .shift(-135, 4 * size) - .attr('data-circle', 1.2 * size) - .attr('data-circle-class', 'fill-fabric') - points.svg9 = anchor - .shift(180, 4 * size) - .attr('data-circle', 1.2 * size) - .attr('data-circle-class', 'fill-fabric') - points.svg105 = anchor - .shift(135, 4 * size) - .attr('data-circle', 1.2 * size) - .attr('data-circle-class', 'fill-fabric') - points.svg12 = anchor - .shift(90, 4 * size) - .attr('data-circle', 1.2 * size) - .attr('data-circle-class', 'fill-fabric') - points.svgText = anchor - .clone() - .attr('data-text', 'SVG') - .attr('data-text-class', 'text-xl scribble') - points.svgText.x += size * 7 - points.svgText.y += 6 - paths.svgLogo = new Path() - .move(points.svg15) - .line(points.svg75) - .move(points.svg3) - .line(points.svg9) - .move(points.svg45) - .line(points.svg105) - .move(points.svg6) - .line(points.svg12) - .attr('class', 'stroke-l') - } - const reactLogo = (anchor, size = 1) => { - h = 3 * size - w = 6 * size - points.reactTop1 = anchor.shift(45, w) - points.reactBottom1 = anchor.shift(-135, w) - points.reactTop1Cp1 = points.reactTop1.shift(135, h) - points.reactTop1Cp2 = points.reactTop1.shift(-45, h) - points.reactBottom1Cp1 = points.reactBottom1.shift(135, h) - points.reactBottom1Cp2 = points.reactBottom1.shift(-45, h) - points.reactTop2 = points.reactTop1.rotate(60, anchor) - points.reactBottom2 = points.reactBottom1.rotate(60, anchor) - points.reactTop2Cp1 = points.reactTop1Cp1.rotate(60, anchor) - points.reactTop2Cp2 = points.reactTop1Cp2.rotate(60, anchor) - points.reactBottom2Cp1 = points.reactBottom1Cp1.rotate(60, anchor) - points.reactBottom2Cp2 = points.reactBottom1Cp2.rotate(60, anchor) - points.reactTop3 = points.reactTop1.rotate(-60, anchor) - points.reactBottom3 = points.reactBottom1.rotate(-60, anchor) - points.reactTop3Cp1 = points.reactTop1Cp1.rotate(-60, anchor) - points.reactTop3Cp2 = points.reactTop1Cp2.rotate(-60, anchor) - points.reactBottom3Cp1 = points.reactBottom1Cp1.rotate(-60, anchor) - points.reactBottom3Cp2 = points.reactBottom1Cp2.rotate(-60, anchor) - points.svgLogo = anchor - .clone() - .attr('data-circle', 1 * size) - .attr('data-circle-class', 'fill-fabric') - points.reactText = anchor - .clone() - .attr('data-text', 'React') - .attr('data-text-class', 'text-xl scribble') - points.reactText.x += size * 7 - points.reactText.y += 6 - - paths.reactLogo = new Path() - .move(points.reactTop1) - .curve(points.reactTop1Cp1, points.reactBottom1Cp1, points.reactBottom1) - .curve(points.reactBottom1Cp2, points.reactTop1Cp2, points.reactTop1) - .close() - .move(points.reactTop2) - .curve(points.reactTop2Cp1, points.reactBottom2Cp1, points.reactBottom2) - .curve(points.reactBottom2Cp2, points.reactTop2Cp2, points.reactTop2) - .close() - .move(points.reactTop3) - .curve(points.reactTop3Cp1, points.reactBottom3Cp1, points.reactBottom3) - .curve(points.reactBottom3Cp2, points.reactTop3Cp2, points.reactTop3) - .close() - } - - // Other parts first so they're behind - drawBox('Part4', 4, -19, 40, 65, 5, false) - drawBox('Part3', 1, -16, 40, 65, 5, false) - drawBox('Part2', -2, -13, 40, 65, 5, false) - drawBox('Part', -5, -10, 40, 65, 5) - paths.Part4.attr('class', 'fill-bg') - paths.Part3.attr('class', 'fill-bg') - paths.Part2.attr('class', 'fill-bg') - paths.Part.attr('class', 'fill-bg') - points.PartMid.y = points.PartTopLeft.y + 9 - let x = 0 - let y = 0 - let w = 30 - let h = 15 - drawBox('Points', x, y, w, h) - y += 18 - drawBox('Paths', x, y, w, h) - y += 18 - drawBox('Snippets', x, y, w, h) - x = -35 - y = -3 - w = 25 - h = 20 - drawBox('config', x, y, w, h) - y += 23 - drawBox('Store', x, y, w, h) - x = -40 - y = -30 - drawBox('Pattern', x, y, 90, 90) - points.PatternMid.y = points.PatternTopLeft.y + 9 - - drawBox('settings', -100, 6, 40, 20) - drawBox('draft', 80, 3, 20, 25) - - 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) - points.arrow2To = points.draftTopLeft.shiftFractionTowards(points.draftBottomLeft, 0.5) - paths.arrow2 = arrow('arrow2', 'draft()') - - svgLogo(points.draftMid.shift(70, 50)) - reactLogo(points.draftMid.shift(-80, 36)) - - points.arrow3From = points.draftTopLeft.shiftFractionTowards(points.draftTopRight, 0.5) - points.arrow3To = points.svgText.clone() - paths.arrow3 = arrow('arrow3', 'render()') - points.arrow4From = points.draftBottomLeft.shiftFractionTowards(points.draftBottomRight, 0.5) - points.arrow4To = points.reactText.clone().shift(40, 15) - paths.arrow4 = arrow('arrow4') - - paths.extend = new Path() - .move(points.draftTopRight) - .line(points.draftTopRight.shift(0, 40)) - .attr('class', 'hidden') - - return part -} diff --git a/designs/examples/src/index.js b/designs/examples/src/index.js deleted file mode 100644 index ee874a8ffd5..00000000000 --- a/designs/examples/src/index.js +++ /dev/null @@ -1,205 +0,0 @@ -import freesewing from '@freesewing/core' -import pluginBundle from '@freesewing/plugin-bundle' -import mirrorPlugin from '@freesewing/plugin-mirror' -import gorePlugin from '@freesewing/plugin-gore' -import config from '../config/' -// Path API -import draftPath_move from './path_move' -import draftPath_line from './path_line' -import draftPath_curve from './path_curve' -import draftPath__curve from './path__curve' -import draftPath_curve_ from './path_curve_' -import draftPath_close from './path_close' -import draftPath_ops from './path_ops' -import draftPath_attr from './path_attr' -import draftPath_clone from './path_clone' -import draftPath_divide from './path_divide' -import draftPath_edge from './path_edge' -import draftPath_end from './path_end' -import draftPath_intersects from './path_intersects' -import draftPath_intersectsx from './path_intersectsx' -import draftPath_intersectsy from './path_intersectsy' -import draftPath_join from './path_join' -import draftPath_length from './path_length' -import draftPath_noop from './path_noop' -import draftPath_offset from './path_offset' -import draftPath_reverse from './path_reverse' -import draftPath_shiftalong from './path_shiftalong' -import draftPath_shiftfractionalong from './path_shiftfractionalong' -import draftPath_split from './path_split' -import draftPath_start from './path_start' -import draftPath_translate from './path_translate' -import draftPath_trim from './path_trim' -// Plugins -import draftPlugin_banner from './plugin_banner' -import draftPlugin_bartack from './plugin_bartack' -import draftPlugin_bartackalong from './plugin_bartackalong' -import draftPlugin_bartackfractionalong from './plugin_bartackfractionalong' -import draftPlugin_buttons from './plugin_buttons' -import draftPlugin_cutonfold from './plugin_cutonfold' -import draftPlugin_dimension from './plugin_dimension' -import draftPlugin_gore from './plugin_gore' -import draftPlugin_grainline from './plugin_grainline' -import draftPlugin_logo from './plugin_logo' -import draftPlugin_mirror from './plugin_mirror' -import draftPlugin_notches from './plugin_notches' -import draftPlugin_round from './plugin_round' -import draftPlugin_sprinkle from './plugin_sprinkle' -import draftPlugin_scalebox from './plugin_scalebox' -import draftPlugin_title from './plugin_title' -// Point API -import draftPoint_angle from './point_angle' -import draftPoint_attr from './point_attr' -import draftPoint_clone from './point_clone' -import draftPoint_copy from './point_copy' -import draftPoint_dist from './point_dist' -import draftPoint_dx from './point_dx' -import draftPoint_dy from './point_dy' -import draftPoint_flipx from './point_flipx' -import draftPoint_flipy from './point_flipy' -import draftPoint_shift from './point_shift' -import draftPoint_shiftfractiontowards from './point_shiftfractiontowards' -import draftPoint_shifttowards from './point_shifttowards' -import draftPoint_shiftoutwards from './point_shiftoutwards' -import draftPoint_sitson from './point_sitson' -import draftPoint_sitsroughlyon from './point_sitsroughlyon' -import draftPoint_rotate from './point_rotate' -import draftPoint_translate from './point_translate' -// Utils API -import draftUtils_linesintersect from './utils_linesintersect' -import draftUtils_beamsintersect from './utils_beamsintersect' -import draftUtils_beamintersectsx from './utils_beamintersectsx' -import draftUtils_beamintersectsy from './utils_beamintersectsy' -import draftUtils_lineintersectscurve from './utils_lineintersectscurve' -import draftUtils_curvesintersect from './utils_curvesintersect' -import draftUtils_pointonbeam from './utils_pointonbeam' -import draftUtils_pointonline from './utils_pointonline' -import draftUtils_pointoncurve from './utils_pointoncurve' -import draftUtils_circlesintersect from './utils_circlesintersect' -import draftUtils_beamintersectscircle from './utils_beamintersectscircle' -import draftUtils_lineintersectscircle from './utils_lineintersectscircle' -import draftUtils_curveintersectsx from './utils_curveintersectsx' -import draftUtils_curveintersectsy from './utils_curveintersectsy' -import draftUtils_splitcurve from './utils_splitcurve' -// Various -import draftSettings_sa from './settings_sa' -import draftSnippet from './snippet' -import draftSnippet_attr from './snippet_attr' -import draftSnippet_clone from './snippet_clone' -import draftSnippets_bnotch from './snippets_bnotch' -import draftSnippets_notch from './snippets_notch' -import draftSnippets_button from './snippets_button' -import draftSnippets_buttonhole from './snippets_buttonhole' -import draftSnippets_buttonhole_start from './snippets_buttonhole-start' -import draftSnippets_buttonhole_end from './snippets_buttonhole-end' -import draftSnippets_snapsocket from './snippets_snapsocket' -import draftSnippets_snapstud from './snippets_snapstud' -import draftSnippets_logo from './snippets_logo' -// Docs illustrations -import draftDocs_overview from './docs_overview' -import draftDocs_coords from './docs_coords' - -// Create design -const Examples = new freesewing.Design(config, [pluginBundle, gorePlugin, mirrorPlugin]) - -// Attach draft methods to prototype -const methods = { - draftPath_move, - draftPath_line, - draftPath_curve, - draftPath__curve, - draftPath_curve_, - draftPath_close, - draftPath_ops, - draftPath_attr, - draftPath_clone, - draftPath_divide, - draftPath_edge, - draftPath_end, - draftPath_intersects, - draftPath_intersectsx, - draftPath_intersectsy, - draftPath_join, - draftPath_length, - draftPath_noop, - draftPath_offset, - draftPath_reverse, - draftPath_shiftalong, - draftPath_shiftfractionalong, - draftPath_split, - draftPath_start, - draftPath_translate, - draftPath_trim, - draftPlugin_banner, - draftPlugin_bartack, - draftPlugin_bartackalong, - draftPlugin_bartackfractionalong, - draftPlugin_buttons, - draftPlugin_cutonfold, - draftPlugin_dimension, - draftPlugin_gore, - draftPlugin_grainline, - draftPlugin_logo, - draftPlugin_mirror, - draftPlugin_notches, - draftPlugin_round, - draftPlugin_scalebox, - draftPlugin_sprinkle, - draftPlugin_title, - draftPoint_angle, - draftPoint_attr, - draftPoint_clone, - draftPoint_copy, - draftPoint_dist, - draftPoint_dx, - draftPoint_dy, - draftPoint_flipx, - draftPoint_flipy, - draftPoint_shift, - draftPoint_shiftfractiontowards, - draftPoint_shifttowards, - draftPoint_shiftoutwards, - draftPoint_sitson, - draftPoint_sitsroughlyon, - draftPoint_rotate, - draftPoint_translate, - draftSettings_sa, - draftSnippet, - draftSnippet_attr, - draftSnippet_clone, - draftSnippets_bnotch, - draftSnippets_notch, - draftSnippets_button, - draftSnippets_buttonhole, - draftSnippets_buttonhole_start, - draftSnippets_buttonhole_end, - draftSnippets_snapsocket, - draftSnippets_snapstud, - draftSnippets_logo, - draftUtils_linesintersect, - draftUtils_beamsintersect, - draftUtils_beamintersectsx, - draftUtils_beamintersectsy, - draftUtils_lineintersectscurve, - draftUtils_curvesintersect, - draftUtils_pointonbeam, - draftUtils_pointonline, - draftUtils_pointoncurve, - draftUtils_circlesintersect, - draftUtils_beamintersectscircle, - draftUtils_lineintersectscircle, - draftUtils_curveintersectsx, - draftUtils_curveintersectsy, - draftUtils_splitcurve, - draftDocs_overview, - draftDocs_coords, -} - -for (let m of Object.keys(methods)) Examples.prototype[m] = methods[m] - -// Named exports -export { config, Examples } - -// Default export -export default Examples - diff --git a/designs/examples/src/index.mjs b/designs/examples/src/index.mjs new file mode 100644 index 00000000000..92eac90cc4f --- /dev/null +++ b/designs/examples/src/index.mjs @@ -0,0 +1,328 @@ +import { Design } from '@freesewing/core' +import { pluginBundle } from '@freesewing/plugin-bundle' +import { gorePlugin } from '@freesewing/plugin-gore' +import { name, version } from '../pkg.mjs' +import config from '../config/' + +// Path API +import { + path__curve, + path_attr, + path_move, + path_line, + path_curve, + path_curve_, + path_close, + path_ops, + path_clone, + path_divide, + path_edge, + path_end, + path_intersects, + path_intersectsx, + path_intersectsy, + path_join, + path_length, + path_noop, + path_offset, + path_reverse, + path_shiftalong, + path_shiftfractionalong, + path_split, + path_start, + path_translate, + path_trim, +} from './path.mjs' + +// Point API +import { + point_angle, + point_attr, + point_clone, + point_copy, + point_dist, + point_dx, + point_dy, + point_flipx, + point_flipy, + point_shift, + point_shiftfractiontowards, + point_shifttowards, + point_shiftoutwards, + point_sitson, + point_sitsroughlyon, + point_rotate, + point_translate, +} from './point.mjs' + +// Snippet API +import { snippet, snippet_attr, snippet_clone } from './snippet.mjs' + +// Utils API +import { + utils_linesintersect, + utils_beamsintersect, + utils_beamintersectsx, + utils_beamintersectsy, + utils_lineintersectscurve, + utils_curvesintersect, + utils_pointonbeam, + utils_pointonline, + utils_pointoncurve , + utils_circlesintersect, + utils_beamintersectscircle, + utils_lineintersectscircle, + utils_curveintersectsx, + utils_curveintersectsy, + utils_splitcurve, +} from './utils.mjs' + +// Plugins +import { + plugin_banner, + plugin_bartack, + plugin_bartackalong, + plugin_bartackfractionalong, + plugin_buttons, + plugin_cutonfold, + plugin_dimension, + plugin_gore, + plugin_grainline, + plugin_logo, + plugin_mirror, + plugin_notches, + plugin_round, + plugin_sprinkle, + plugin_scalebox, + plugin_title, +} from './plugins.mjs' + +// Snippets +import { + snippet_bnotch, + snippet_notch, + snippet_button, + snippet_buttonhole, + snippet_buttonholestart, + snippet_buttonholeend, + snippet_snapsocket, + snippet_snapstud, + snippet_logo, +} from './snippets.mjs' + +// Settings +import { settings_sa } from './settings.mjs' + +// Docs illustrations +import { docs_coords, docs_overview } from './docs.mjs' + + +// Setup our new design +const Examples = new Design({ + name, + version, + parts: [ + + // Path API + path__curve, + path_attr, + path_move, + path_line, + path_curve, + path_curve_, + path_close, + path_ops, + path_clone, + path_divide, + path_edge, + path_end, + path_intersects, + path_intersectsx, + path_intersectsy, + path_join, + path_length, + path_noop, + path_offset, + path_reverse, + path_shiftalong, + path_shiftfractionalong, + path_split, + path_start, + path_translate, + path_trim, + + // Point API + point_angle, + point_attr, + point_clone, + point_copy, + point_dist, + point_dx, + point_dy, + point_flipx, + point_flipy, + point_shift, + point_shiftfractiontowards, + point_shifttowards, + point_shiftoutwards, + point_sitson, + point_sitsroughlyon, + point_rotate, + point_translate, + + // Snippet API + snippet, + snippet_attr, + snippet_clone, + + // Utils API + utils_linesintersect, + utils_beamsintersect, + utils_beamintersectsx, + utils_beamintersectsy, + utils_lineintersectscurve, + utils_curvesintersect, + utils_pointonbeam, + utils_pointonline, + utils_pointoncurve , + utils_circlesintersect, + utils_beamintersectscircle, + utils_lineintersectscircle, + utils_curveintersectsx, + utils_curveintersectsy, + utils_splitcurve, + + // Plugins + plugin_banner, + plugin_bartack, + plugin_bartackalong, + plugin_bartackfractionalong, + plugin_buttons, + plugin_cutonfold, + plugin_dimension, + plugin_gore, + plugin_grainline, + plugin_logo, + plugin_mirror, + plugin_notches, + plugin_round, + plugin_sprinkle, + plugin_scalebox, + plugin_title, + + // Snippets + snippet_bnotch, + snippet_notch, + snippet_button, + snippet_buttonhole, + snippet_buttonholestart, + snippet_buttonholeend, + snippet_snapsocket, + snippet_snapstud, + snippet_logo, + ], + plugins: [ pluginBundle, gorePlugin ], +}) + +// Named exports +export { + // Path API + path__curve, + path_attr, + path_move, + path_line, + path_curve, + path_curve_, + path_close, + path_ops, + path_clone, + path_divide, + path_edge, + path_end, + path_intersects, + path_intersectsx, + path_intersectsy, + path_join, + path_length, + path_noop, + path_offset, + path_reverse, + path_shiftalong, + path_shiftfractionalong, + path_split, + path_start, + path_translate, + path_trim, + + // Point API + point_angle, + point_attr, + point_clone, + point_copy, + point_dist, + point_dx, + point_dy, + point_flipx, + point_flipy, + point_shift, + point_shiftfractiontowards, + point_shifttowards, + point_shiftoutwards, + point_sitson, + point_sitsroughlyon, + point_rotate, + point_translate, + + // Snippet API + snippet, + snippet_attr, + snippet_clone, + + // Utils API + utils_linesintersect, + utils_beamsintersect, + utils_beamintersectsx, + utils_beamintersectsy, + utils_lineintersectscurve, + utils_curvesintersect, + utils_pointonbeam, + utils_pointonline, + utils_pointoncurve , + utils_circlesintersect, + utils_beamintersectscircle, + utils_lineintersectscircle, + utils_curveintersectsx, + utils_curveintersectsy, + utils_splitcurve, + + // Plugins + plugin_banner, + plugin_bartack, + plugin_bartackalong, + plugin_bartackfractionalong, + plugin_buttons, + plugin_cutonfold, + plugin_dimension, + plugin_gore, + plugin_grainline, + plugin_logo, + plugin_mirror, + plugin_notches, + plugin_round, + plugin_sprinkle, + plugin_scalebox, + plugin_title, + + // Snippets + snippet_bnotch, + snippet_notch, + snippet_button, + snippet_buttonhole, + snippet_buttonholestart, + snippet_buttonholeend, + snippet_snapsocket, + snippet_snapstud, + snippet_logo, + Examples +} + diff --git a/designs/examples/src/path.mjs b/designs/examples/src/path.mjs new file mode 100644 index 00000000000..66601276487 --- /dev/null +++ b/designs/examples/src/path.mjs @@ -0,0 +1,736 @@ +import { box } from './shared.mjs' + +export const path__curve = { + name: 'examples.path__curve', + draft: part => { + const { Point, points, Path, paths } = part.shorthand() + + points.from = new Point(5, 20) + points.cp2 = new Point(60, 30) + points.to = new Point(90, 20) + + paths.line = new Path() + .move(points.from) + ._curve(points.cp2, points.to) + .attr('data-text', '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() + + points.B = new Point(10, 50) + points.BCp2 = new Point(40, 10) + points.C = new Point(90, 30) + points.CCp1 = new Point(50, 90) + + paths.example = new Path() + .move(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .attr('class', 'canvas') + .attr('data-text', 'supportFreesewingBecomeAPatron') + .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() + + 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.clone = paths.example + .clone() + .attr('class', 'note lashed stroke-l') + .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() + + points.from = new Point(10, 20) + points.cp2 = new Point(60, 30) + points.to = new Point(90, 20) + + paths.line = new Path() + .move(points.from) + ._curve(points.cp2, points.to) + .close() + .reverse() // To keep text from being upside-down + .attr('data-text', '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() + + points.from = new Point(10, 20) + points.cp1 = new Point(40, 0) + points.cp2 = new Point(60, 30) + points.to = new Point(90, 20) + + paths.line = new Path() + .move(points.from) + .curve(points.cp1, points.cp2, points.to) + .attr('data-text', '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() + + points.from = new Point(10, 20) + points.cp1 = new Point(40, 0) + points.to = new Point(90, 20) + + paths.line = new Path() + .move(points.from) + .curve_(points.cp1, points.to) + .attr('data-text', '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() + + points.A = new Point(55, 40) + points.B = new Point(10, 70) + points.BCp2 = new Point(40, 20) + points.C = new Point(90, 60) + points.CCp1 = new Point(50, -30) + points.D = new Point(50, 80) + points.DCp1 = new Point(140, 50) + + paths.example = new Path() + .move(points.A) + .line(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .curve(points.DCp1, points.DCp1, points.D) + .close() + + let style = 'stroke-width: 4; stroke-opacity: 0.5;' + let i = 0 + for (let p of paths.example.divide()) { + i++ + paths[i] = p.attr('style', style).attr('style', `stroke: hsl(${i * 70}, 100%, 50%)`) + } + + return part + } +} + +export const path_edge = { + name: 'examples.path_edge', + draft: part => { + const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() + + 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) + points.D = new Point(-60, 90) + points.E = new Point(90, 190) + + paths.demo = new Path() + .move(points.A) + .line(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .curve(points.E, points.D, points.A) + .close() + + for (let i of [ + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + 'top', + 'left', + 'bottom', + 'right', + ]) + 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() + + 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.demo = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) + + 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() + + 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) + points.D = new Point(50, 130) + points.DCp1 = new Point(150, 30) + + points._A = new Point(55, 40) + points._B = new Point(0, 55) + points._BCp2 = new Point(40, -20) + points._C = new Point(90, 40) + points._CCp1 = new Point(50, -30) + points._D = new Point(40, 120) + points._DCp1 = new Point(180, 40) + + paths.demo1 = new Path() + .move(points.A) + .line(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .curve(points.DCp1, points.DCp1, points.D) + paths.demo2 = new Path() + .move(points._A) + .line(points._B) + .curve(points._BCp2, points._CCp1, points._C) + .curve(points._DCp1, points._DCp1, points._D) + + for (let p of paths.demo1.intersects(paths.demo2)) { + snippets[part.getId()] = new Snippet('notch', p) + } + + return part + } +} + +export const path_intersectsx = { + name: 'examples.path_intersectsx', + draft: part => { + const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() + + points.A = new Point(95, 50) + points.B = new Point(10, 30) + points.BCp2 = new Point(40, 20) + points.C = new Point(90, 30) + points.CCp1 = new Point(50, -30) + points.D = new Point(50, 130) + points.DCp1 = new Point(150, 30) + + points.top = new Point(60, -10) + points.bot = new Point(60, 140) + + paths.line = new Path().move(points.top).line(points.bot).attr('class', 'lining dashed') + + paths.demo = new Path() + .move(points.A) + .line(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .curve(points.DCp1, points.DCp1, points.D) + + for (let p of paths.demo.intersectsX(60)) { + snippets[part.getId()] = new Snippet('notch', p) + } + + return part + } +} + +export const path_intersectsy = { + name: 'examples.path_intersectsy', + draft: part => { + const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() + + points.A = new Point(55, 40) + points.B = new Point(10, 70) + points.BCp2 = new Point(40, 20) + points.C = new Point(90, 60) + points.CCp1 = new Point(50, -30) + points.D = new Point(50, 80) + points.DCp1 = new Point(140, 50) + + points.top = new Point(10, 58) + points.bot = new Point(130, 58) + + paths.line = new Path().move(points.top).line(points.bot).attr('class', 'lining dashed') + + paths.demo = new Path() + .move(points.A) + .line(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .curve(points.DCp1, points.DCp1, points.D) + for (let p of paths.demo.intersectsY(58)) { + snippets[part.getId()] = new Snippet('notch', p) + } + + return part + } +} + + +export const path_join = { + name: 'examples.path_join', + draft: part => { + const { Point, points, Path, paths } = part.shorthand() + + 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.path1 = new Path().move(points.A).line(points.B).attr('class', 'various') + + paths.path2 = new Path() + .move(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .attr('class', 'canvas') + + paths.joint = paths.path1 + .join(paths.path2) + .attr('class', 'note lashed stroke-l') + .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() + + 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) + + macro('pd', { + path: paths.example, + d: -20, + }) + + macro('pd', { + path: new Path().move(points.B).line(points.A), + d: 10, + }) + + macro('pd', { + path: new Path().move(points.B).curve(points.BCp2, points.CCp1, points.C), + d: -10, + }) + + return part + } +} + +export const path_line = { + name: 'examples.path_line', + draft: part => { + const { Point, points, Path, paths } = part.shorthand() + + points.from = new Point(10, 10) + points.to = new Point(90, 10) + + paths.line = new Path() + .move(points.from) + .line(points.to) + .attr('data-text', '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() + + points.to = new Point(50, 10) + .attr('data-text', 'Path.move()') + .attr('data-text-class', 'fill-note center') + + 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) + points.dartLeft = new Point(40, 10) + points.dartTip = new Point(50, 50) + points.dartRight = new Point(60, 10) + points.right = new Point(90, 10) + + paths.without = new Path() + .move(points.left) + .line(points.dartLeft) + .noop('dart') + .line(points.right) + + paths.withDart = paths.without + .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() + + 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) + .line(points.A) + .close() + + paths.offset = paths.example.offset(-10).attr('class', 'interfacing') + + paths.lineOffset = new Path().move(points.A).line(points.B).offset(-5).attr('class', 'various') + + paths.curveOffset = new Path() + .move(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .offset(-5) + .attr('class', 'canvas') + + return part + } +} + +export const path_ops = { + name: 'examples.path_ops', + draft: part => { + const { Point, points, Path, paths, options } = part.shorthand() + + const textClasses = (label) => + options.focus === label ? 'center text-xs fill-note' : 'center text-xs' + + points.A = new Point(10, 10) + .attr('data-text', 'Path.move()') + .attr('data-text-class', textClasses('move')) + points.B = new Point(70, 30) + points.BCp2 = new Point(40, 10) + points.C = new Point(90, -50) + points.CCp1 = new Point(125, -30) + points.D = new Point(20, -50) + points.DCp = new Point(40, 0) + points.E = new Point(-20, -20) + points.ECp = new Point(-20, -50) + + paths.line = new Path() + .move(points.A) + .line(points.B) + .attr('data-text', 'Path.line()') + .attr('data-text-class', textClasses('line')) + + paths.curve = new Path() + .move(points.B) + .curve(points.BCp2, points.CCp1, points.C) + .attr('data-text', 'Path.curve()') + .attr('data-text-class', textClasses('curve')) + + paths._curve = new Path() + .move(points.C) + ._curve(points.DCp, points.D) + .attr('data-text', 'Path._curve()') + .attr('data-text-class', textClasses('_curve')) + + paths.curve_ = new Path() + .move(points.D) + .curve_(points.ECp, points.E) + .attr('data-text', 'Path.curve_()') + .attr('data-text-class', textClasses('curve_')) + + paths.close = new Path() + .move(points.E) + .line(points.A) + .attr('data-text', 'Path.close()') + .attr('data-text-class', textClasses('close')) + + 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() + + 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.B) + .curve(points.BCp2, points.CCp1, points.C) + .attr('data-text', 'freesewingIsMadeByJoostDeCockAndContributors') + .attr('data-text-class', 'text-xs fill-note') + + paths.reverse = paths.example + .reverse() + .attr('data-text', 'freesewingIsMadeByJoostDeCockAndContributors') + .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() + + 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) + + points.x1 = paths.example + .shiftAlong(20) + .attr('data-text', '2cm') + .attr('data-text-class', 'center fill-note') + .attr('data-text-lineheight', 6) + points.x2 = paths.example + .shiftAlong(90) + .attr('data-text', '9cm') + .attr('data-text-class', 'center fill-note') + .attr('data-text-lineheight', 6) + + snippets.x1 = new Snippet('notch', points.x1) + 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() + + 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) + + points.x1 = paths.example + .shiftFractionAlong(0.2) + .attr('data-text', '20%') + .attr('data-text-class', 'center fill-note') + .attr('data-text-lineheight', 6) + points.x2 = paths.example + .shiftFractionAlong(0.9) + .attr('data-text', '90%') + .attr('data-text-class', 'center fill-note') + .attr('data-text-lineheight', 6) + + snippets.xl = new Snippet('notch', points.x1) + 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() + + 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) + points.D = new Point(50, 130) + points.DCp1 = new Point(150, 30) + + paths.demo = new Path() + .move(points.D) + .curve(points.DCp1, points.DCp1, points.C) + .curve(points.CCp1, points.BCp2, points.B) + .line(points.A) + + points.split = paths.demo.shiftFractionAlong(0.75) + snippets.x = new Snippet('x', points.split) + + let style = 'stroke-width: 3; stroke-opacity: 0.5;' + let halves = paths.demo.split(points.split) + for (let i in halves) { + paths[i] = halves[i].attr('style', style).attr('style', `stroke: hsl(${i * 70}, 100%, 50%)`) + } + + return part + } +} + +export const path_start = { + name: 'examples.path_start', + draft: part => { + const { Point, points, Path, paths, Snippet, snippets } = part.shorthand() + + 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) + + 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() + + 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.A = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) + + paths.B = paths.A.translate(60, 30) + + points.step1 = points.B.shift(0, 60) + points.step2 = points.step1.shift(-90, 30) + macro('ld', { + from: points.B, + to: points.step1, + noStartMarker: true, + }) + macro('ld', { + from: points.step1, + to: points.step2, + noStartMarker: true, + }) + + return part + } +} + +export const path_trim = { + name: 'examples.path_trim', + draft: part => { + const { Point, points, Path, paths } = part.shorthand() + + points.center = new Point(0, 0) + points.base = new Point(0, 10) + points.tip = new Point(0, 50) + points.tipCpRight = new Point(30, 50) + points.tipCpLeft = new Point(-30, 50) + paths.example = new Path().move(points.base) + for (let i = 0; i < 4; i++) { + points['base' + i] = points.base.rotate(60 * i, points.center) + points['tip' + i] = points.tip.rotate(60 * i, points.center) + points['tipCpRight' + i] = points.tipCpRight.rotate(60 * i, points.center) + points['tipCpLeft' + i] = points.tipCpLeft.rotate(60 * i, points.center) + if (i < 2) { + paths.example + .line(points['base' + i]) + .curve(points['base' + i], points['tipCpLeft' + i], points['tip' + i]) + .curve(points['tipCpRight' + i], points['base' + i], points['base' + i]) + } else { + paths.example + .line(points['base' + i]) + .line(points['tip' + i]) + .line(points['tipCpRight' + i]) + .line(points['base' + i]) + } + } + + paths.offset = paths.example.offset(10).attr('class', 'lining dotted stroke-sm') + + paths.trimmed = paths.offset + .trim() + .attr('class', 'various stroke-xl') + .attr('style', 'stroke-opacity: 0.5;') + return part + } +} + diff --git a/designs/examples/src/path__curve.js b/designs/examples/src/path__curve.js deleted file mode 100644 index 770c610c9c5..00000000000 --- a/designs/examples/src/path__curve.js +++ /dev/null @@ -1,17 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.from = new Point(5, 20) - points.cp2 = new Point(60, 30) - points.to = new Point(90, 20) - - paths.line = new Path() - .move(points.from) - ._curve(points.cp2, points.to) - .attr('data-text', 'Path._curve()') - .attr('data-text-class', 'text-sm center fill-note') - - return box(part, 100, 25) -} diff --git a/designs/examples/src/path_attr.js b/designs/examples/src/path_attr.js deleted file mode 100644 index 141e0501b54..00000000000 --- a/designs/examples/src/path_attr.js +++ /dev/null @@ -1,17 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.B = new Point(10, 50) - points.BCp2 = new Point(40, 10) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, 90) - - paths.example = new Path() - .move(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .attr('class', 'canvas') - .attr('data-text', 'supportFreesewingBecomeAPatron') - .attr('data-text-class', 'text-xs center') - - return part -} diff --git a/designs/examples/src/path_clone.js b/designs/examples/src/path_clone.js deleted file mode 100644 index 90ea833ba04..00000000000 --- a/designs/examples/src/path_clone.js +++ /dev/null @@ -1,18 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - 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.clone = paths.example - .clone() - .attr('class', 'note lashed stroke-l') - .attr('style', 'stroke-opacity: 0.5') - - return part -} diff --git a/designs/examples/src/path_close.js b/designs/examples/src/path_close.js deleted file mode 100644 index 8abab31ed89..00000000000 --- a/designs/examples/src/path_close.js +++ /dev/null @@ -1,19 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.from = new Point(10, 20) - points.cp2 = new Point(60, 30) - points.to = new Point(90, 20) - - paths.line = new Path() - .move(points.from) - ._curve(points.cp2, points.to) - .close() - .reverse() // To keep text from being upside-down - .attr('data-text', 'Path._close()') - .attr('data-text-class', 'text-sm right fill-note') - - return box(part, 100, 25) -} diff --git a/designs/examples/src/path_curve.js b/designs/examples/src/path_curve.js deleted file mode 100644 index cedffb582d4..00000000000 --- a/designs/examples/src/path_curve.js +++ /dev/null @@ -1,18 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.from = new Point(10, 20) - points.cp1 = new Point(40, 0) - points.cp2 = new Point(60, 30) - points.to = new Point(90, 20) - - paths.line = new Path() - .move(points.from) - .curve(points.cp1, points.cp2, points.to) - .attr('data-text', 'Path.curve()') - .attr('data-text-class', 'text-sm center fill-note') - - return box(part, 100, 25) -} diff --git a/designs/examples/src/path_curve_.js b/designs/examples/src/path_curve_.js deleted file mode 100644 index f5f54d77ce2..00000000000 --- a/designs/examples/src/path_curve_.js +++ /dev/null @@ -1,17 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.from = new Point(10, 20) - points.cp1 = new Point(40, 0) - points.to = new Point(90, 20) - - paths.line = new Path() - .move(points.from) - .curve_(points.cp1, points.to) - .attr('data-text', 'Path.curve_()') - .attr('data-text-class', 'text-sm center fill-note') - - return box(part, 100, 25) -} diff --git a/designs/examples/src/path_divide.js b/designs/examples/src/path_divide.js deleted file mode 100644 index 0fd6ea116ab..00000000000 --- a/designs/examples/src/path_divide.js +++ /dev/null @@ -1,27 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.A = new Point(55, 40) - points.B = new Point(10, 70) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 60) - points.CCp1 = new Point(50, -30) - points.D = new Point(50, 80) - points.DCp1 = new Point(140, 50) - - paths.example = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .curve(points.DCp1, points.DCp1, points.D) - .close() - - let style = 'stroke-width: 4; stroke-opacity: 0.5;' - let i = 0 - for (let p of paths.example.divide()) { - i++ - paths[i] = p.attr('style', style).attr('style', `stroke: hsl(${i * 70}, 100%, 50%)`) - } - - return part -} diff --git a/designs/examples/src/path_edge.js b/designs/examples/src/path_edge.js deleted file mode 100644 index b77b1df7e0a..00000000000 --- a/designs/examples/src/path_edge.js +++ /dev/null @@ -1,32 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - 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) - points.D = new Point(-60, 90) - points.E = new Point(90, 190) - - paths.demo = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .curve(points.E, points.D, points.A) - .close() - - for (let i of [ - 'topLeft', - 'topRight', - 'bottomLeft', - 'bottomRight', - 'top', - 'left', - 'bottom', - 'right', - ]) - snippets[i] = new Snippet('notch', paths.demo.edge(i)) - - return part -} diff --git a/designs/examples/src/path_end.js b/designs/examples/src/path_end.js deleted file mode 100644 index 8885feb0958..00000000000 --- a/designs/examples/src/path_end.js +++ /dev/null @@ -1,15 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - 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.demo = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) - - snippets.end = new Snippet('notch', paths.demo.end()) - - return part -} diff --git a/designs/examples/src/path_intersects.js b/designs/examples/src/path_intersects.js deleted file mode 100644 index 9522f3aa44d..00000000000 --- a/designs/examples/src/path_intersects.js +++ /dev/null @@ -1,36 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - 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) - points.D = new Point(50, 130) - points.DCp1 = new Point(150, 30) - - points._A = new Point(55, 40) - points._B = new Point(0, 55) - points._BCp2 = new Point(40, -20) - points._C = new Point(90, 40) - points._CCp1 = new Point(50, -30) - points._D = new Point(40, 120) - points._DCp1 = new Point(180, 40) - - paths.demo1 = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .curve(points.DCp1, points.DCp1, points.D) - paths.demo2 = new Path() - .move(points._A) - .line(points._B) - .curve(points._BCp2, points._CCp1, points._C) - .curve(points._DCp1, points._DCp1, points._D) - - for (let p of paths.demo1.intersects(paths.demo2)) { - snippets[part.getId()] = new Snippet('notch', p) - } - - return part -} diff --git a/designs/examples/src/path_intersectsx.js b/designs/examples/src/path_intersectsx.js deleted file mode 100644 index 7ea6990ebb2..00000000000 --- a/designs/examples/src/path_intersectsx.js +++ /dev/null @@ -1,28 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - points.A = new Point(95, 50) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - points.D = new Point(50, 130) - points.DCp1 = new Point(150, 30) - - points.top = new Point(60, -10) - points.bot = new Point(60, 140) - - paths.line = new Path().move(points.top).line(points.bot).attr('class', 'lining dashed') - - paths.demo = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .curve(points.DCp1, points.DCp1, points.D) - - for (let p of paths.demo.intersectsX(60)) { - snippets[part.getId()] = new Snippet('notch', p) - } - - return part -} diff --git a/designs/examples/src/path_intersectsy.js b/designs/examples/src/path_intersectsy.js deleted file mode 100644 index 7e0c1215d7b..00000000000 --- a/designs/examples/src/path_intersectsy.js +++ /dev/null @@ -1,27 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - points.A = new Point(55, 40) - points.B = new Point(10, 70) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 60) - points.CCp1 = new Point(50, -30) - points.D = new Point(50, 80) - points.DCp1 = new Point(140, 50) - - points.top = new Point(10, 58) - points.bot = new Point(130, 58) - - paths.line = new Path().move(points.top).line(points.bot).attr('class', 'lining dashed') - - paths.demo = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .curve(points.DCp1, points.DCp1, points.D) - for (let p of paths.demo.intersectsY(58)) { - snippets[part.getId()] = new Snippet('notch', p) - } - - return part -} diff --git a/designs/examples/src/path_join.js b/designs/examples/src/path_join.js deleted file mode 100644 index 54e445b708a..00000000000 --- a/designs/examples/src/path_join.js +++ /dev/null @@ -1,23 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - 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.path1 = new Path().move(points.A).line(points.B).attr('class', 'various') - - paths.path2 = new Path() - .move(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .attr('class', 'canvas') - - paths.joint = paths.path1 - .join(paths.path2) - .attr('class', 'note lashed stroke-l') - .attr('style', 'stroke-opacity: 0.5') - - return part -} diff --git a/designs/examples/src/path_length.js b/designs/examples/src/path_length.js deleted file mode 100644 index 103c2b21667..00000000000 --- a/designs/examples/src/path_length.js +++ /dev/null @@ -1,28 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, macro } = part.shorthand() - - 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) - - macro('pd', { - path: paths.example, - d: -20, - }) - - macro('pd', { - path: new Path().move(points.B).line(points.A), - d: 10, - }) - - macro('pd', { - path: new Path().move(points.B).curve(points.BCp2, points.CCp1, points.C), - d: -10, - }) - - return part -} diff --git a/designs/examples/src/path_line.js b/designs/examples/src/path_line.js deleted file mode 100644 index ed2c7750bd3..00000000000 --- a/designs/examples/src/path_line.js +++ /dev/null @@ -1,16 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.from = new Point(10, 10) - points.to = new Point(90, 10) - - paths.line = new Path() - .move(points.from) - .line(points.to) - .attr('data-text', 'Path.line()') - .attr('data-text-class', 'text-sm center fill-note') - - return box(part, 100, 15) -} diff --git a/designs/examples/src/path_move.js b/designs/examples/src/path_move.js deleted file mode 100644 index 28d8c6dc667..00000000000 --- a/designs/examples/src/path_move.js +++ /dev/null @@ -1,13 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.to = new Point(50, 10) - .attr('data-text', 'Path.move()') - .attr('data-text-class', 'fill-note center') - - paths.noline = new Path().move(points.to) - - return box(part, 100, 15) -} diff --git a/designs/examples/src/path_noop.js b/designs/examples/src/path_noop.js deleted file mode 100644 index 4697520f64d..00000000000 --- a/designs/examples/src/path_noop.js +++ /dev/null @@ -1,26 +0,0 @@ -export default (part) => { - const { Point, points, Path, paths } = part.shorthand() - - points.left = new Point(10,10) - points.dartLeft = new Point(40, 10) - points.dartTip = new Point(50, 50) - points.dartRight = new Point(60, 10) - points.right = new Point(90, 10) - - paths.without = new Path() - .move(points.left) - .line(points.dartLeft) - .noop('dart') - .line(points.right) - - paths.withDart = paths.without - .insop( - 'dart', - new Path() - .line(points.dartTip) - .line(points.dartRight) - ) - .attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;') - - return part -} diff --git a/designs/examples/src/path_offset.js b/designs/examples/src/path_offset.js deleted file mode 100644 index e50ac0ce6ba..00000000000 --- a/designs/examples/src/path_offset.js +++ /dev/null @@ -1,28 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - 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) - .line(points.A) - .close() - - paths.offset = paths.example.offset(-10).attr('class', 'interfacing') - - paths.lineOffset = new Path().move(points.A).line(points.B).offset(-5).attr('class', 'various') - - paths.curveOffset = new Path() - .move(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .offset(-5) - .attr('class', 'canvas') - - return part -} diff --git a/designs/examples/src/path_ops.js b/designs/examples/src/path_ops.js deleted file mode 100644 index 3b7a679fc63..00000000000 --- a/designs/examples/src/path_ops.js +++ /dev/null @@ -1,52 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, options } = part.shorthand() - - const textClasses = (label) => - options.focus === label ? 'center text-xs fill-note' : 'center text-xs' - - points.A = new Point(10, 10) - .attr('data-text', 'Path.move()') - .attr('data-text-class', textClasses('move')) - points.B = new Point(70, 30) - points.BCp2 = new Point(40, 10) - points.C = new Point(90, -50) - points.CCp1 = new Point(125, -30) - points.D = new Point(20, -50) - points.DCp = new Point(40, 0) - points.E = new Point(-20, -20) - points.ECp = new Point(-20, -50) - - paths.line = new Path() - .move(points.A) - .line(points.B) - .attr('data-text', 'Path.line()') - .attr('data-text-class', textClasses('line')) - - paths.curve = new Path() - .move(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .attr('data-text', 'Path.curve()') - .attr('data-text-class', textClasses('curve')) - - paths._curve = new Path() - .move(points.C) - ._curve(points.DCp, points.D) - .attr('data-text', 'Path._curve()') - .attr('data-text-class', textClasses('_curve')) - - paths.curve_ = new Path() - .move(points.D) - .curve_(points.ECp, points.E) - .attr('data-text', 'Path.curve_()') - .attr('data-text-class', textClasses('curve_')) - - paths.close = new Path() - .move(points.E) - .line(points.A) - .attr('data-text', 'Path.close()') - .attr('data-text-class', textClasses('close')) - - paths.example = paths.line.join(paths.curve).join(paths._curve).join(paths.curve_).close() - - return part -} diff --git a/designs/examples/src/path_reverse.js b/designs/examples/src/path_reverse.js deleted file mode 100644 index fad3da5be6d..00000000000 --- a/designs/examples/src/path_reverse.js +++ /dev/null @@ -1,21 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - 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.B) - .curve(points.BCp2, points.CCp1, points.C) - .attr('data-text', 'freesewingIsMadeByJoostDeCockAndContributors') - .attr('data-text-class', 'text-xs fill-note') - - paths.reverse = paths.example - .reverse() - .attr('data-text', 'freesewingIsMadeByJoostDeCockAndContributors') - .attr('data-text-class', 'text-xs fill-lining') - - return part -} diff --git a/designs/examples/src/path_shiftalong.js b/designs/examples/src/path_shiftalong.js deleted file mode 100644 index b94758d3b9a..00000000000 --- a/designs/examples/src/path_shiftalong.js +++ /dev/null @@ -1,27 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - 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) - - points.x1 = paths.example - .shiftAlong(20) - .attr('data-text', '2cm') - .attr('data-text-class', 'center fill-note') - .attr('data-text-lineheight', 6) - points.x2 = paths.example - .shiftAlong(90) - .attr('data-text', '9cm') - .attr('data-text-class', 'center fill-note') - .attr('data-text-lineheight', 6) - - snippets.x1 = new Snippet('notch', points.x1) - snippets.x2 = new Snippet('notch', points.x2) - - return part -} diff --git a/designs/examples/src/path_shiftfractionalong.js b/designs/examples/src/path_shiftfractionalong.js deleted file mode 100644 index d4ebe5d8672..00000000000 --- a/designs/examples/src/path_shiftfractionalong.js +++ /dev/null @@ -1,27 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - 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) - - points.x1 = paths.example - .shiftFractionAlong(0.2) - .attr('data-text', '20%') - .attr('data-text-class', 'center fill-note') - .attr('data-text-lineheight', 6) - points.x2 = paths.example - .shiftFractionAlong(0.9) - .attr('data-text', '90%') - .attr('data-text-class', 'center fill-note') - .attr('data-text-lineheight', 6) - - snippets.xl = new Snippet('notch', points.x1) - snippets.x2 = new Snippet('notch', points.x2) - - return part -} diff --git a/designs/examples/src/path_split.js b/designs/examples/src/path_split.js deleted file mode 100644 index eaf3d7ee2ac..00000000000 --- a/designs/examples/src/path_split.js +++ /dev/null @@ -1,28 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - 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) - points.D = new Point(50, 130) - points.DCp1 = new Point(150, 30) - - paths.demo = new Path() - .move(points.D) - .curve(points.DCp1, points.DCp1, points.C) - .curve(points.CCp1, points.BCp2, points.B) - .line(points.A) - - points.split = paths.demo.shiftFractionAlong(0.75) - snippets.x = new Snippet('x', points.split) - - let style = 'stroke-width: 3; stroke-opacity: 0.5;' - let halves = paths.demo.split(points.split) - for (let i in halves) { - paths[i] = halves[i].attr('style', style).attr('style', `stroke: hsl(${i * 70}, 100%, 50%)`) - } - - return part -} diff --git a/designs/examples/src/path_start.js b/designs/examples/src/path_start.js deleted file mode 100644 index af502e1e5b2..00000000000 --- a/designs/examples/src/path_start.js +++ /dev/null @@ -1,14 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets } = part.shorthand() - - 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) - - snippets.start = new Snippet('notch', paths.example.start()) - return part -} diff --git a/designs/examples/src/path_translate.js b/designs/examples/src/path_translate.js deleted file mode 100644 index 2fdfb1068d4..00000000000 --- a/designs/examples/src/path_translate.js +++ /dev/null @@ -1,28 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, macro } = part.shorthand() - - 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.A = new Path().move(points.A).line(points.B).curve(points.BCp2, points.CCp1, points.C) - - paths.B = paths.A.translate(60, 30) - - points.step1 = points.B.shift(0, 60) - points.step2 = points.step1.shift(-90, 30) - macro('ld', { - from: points.B, - to: points.step1, - noStartMarker: true, - }) - macro('ld', { - from: points.step1, - to: points.step2, - noStartMarker: true, - }) - - return part -} diff --git a/designs/examples/src/path_trim.js b/designs/examples/src/path_trim.js deleted file mode 100644 index 60c18623f7c..00000000000 --- a/designs/examples/src/path_trim.js +++ /dev/null @@ -1,36 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.center = new Point(0, 0) - points.base = new Point(0, 10) - points.tip = new Point(0, 50) - points.tipCpRight = new Point(30, 50) - points.tipCpLeft = new Point(-30, 50) - paths.example = new Path().move(points.base) - for (let i = 0; i < 4; i++) { - points['base' + i] = points.base.rotate(60 * i, points.center) - points['tip' + i] = points.tip.rotate(60 * i, points.center) - points['tipCpRight' + i] = points.tipCpRight.rotate(60 * i, points.center) - points['tipCpLeft' + i] = points.tipCpLeft.rotate(60 * i, points.center) - if (i < 2) { - paths.example - .line(points['base' + i]) - .curve(points['base' + i], points['tipCpLeft' + i], points['tip' + i]) - .curve(points['tipCpRight' + i], points['base' + i], points['base' + i]) - } else { - paths.example - .line(points['base' + i]) - .line(points['tip' + i]) - .line(points['tipCpRight' + i]) - .line(points['base' + i]) - } - } - - paths.offset = paths.example.offset(10).attr('class', 'lining dotted stroke-sm') - - paths.trimmed = paths.offset - .trim() - .attr('class', 'various stroke-xl') - .attr('style', 'stroke-opacity: 0.5;') - return part -} diff --git a/designs/examples/src/plugin_banner.js b/designs/examples/src/plugin_banner.js deleted file mode 100644 index 06ad2173f9c..00000000000 --- a/designs/examples/src/plugin_banner.js +++ /dev/null @@ -1,20 +0,0 @@ -const draftPluginBanner = (part) => { - const { points, Point, paths, Path, macro } = part.shorthand() - - points.from = new Point(0, 0) - points.to = new Point(320, 0) - - paths.banner = new Path().move(points.from).line(points.to) - - macro('banner', { - path: 'banner', - text: 'banner plugin', - }) - - // Prevent clipping of text - paths.box = new Path().move(new Point(0, -20)).line(new Point(0, 20)).attr('class', 'hidden') - - return part -} - -export default draftPluginBanner diff --git a/designs/examples/src/plugin_bartack.js b/designs/examples/src/plugin_bartack.js deleted file mode 100644 index e9b39e4b407..00000000000 --- a/designs/examples/src/plugin_bartack.js +++ /dev/null @@ -1,15 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, macro } = part.shorthand() - - points.a = new Point(15, 15) - - macro('bartack', { - anchor: points.a, - angle: 30, - length: 15, - }) - - return box(part, 60, 30) -} diff --git a/designs/examples/src/plugin_bartackalong.js b/designs/examples/src/plugin_bartackalong.js deleted file mode 100644 index 0d7d4ce06ff..00000000000 --- a/designs/examples/src/plugin_bartackalong.js +++ /dev/null @@ -1,25 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, Path, points, paths, macro } = part.shorthand() - - points.a = new Point(15, 15) - points.b = new Point(20, 20) - points.c = new Point(30, 20) - points.d = new Point(35, 15) - points.e = new Point(20, 10) - points.f = new Point(30, 10) - - paths.a = new Path().move(points.a).curve(points.b, points.c, points.d).setRender(false) - - macro('bartackAlong', { - path: paths.a, - }) - - macro('sprinkle', { - snippet: 'notch', - on: ['e', 'f'], - }) - - return box(part, 60, 30) -} diff --git a/designs/examples/src/plugin_bartackfractionalong.js b/designs/examples/src/plugin_bartackfractionalong.js deleted file mode 100644 index 0aac511e5c1..00000000000 --- a/designs/examples/src/plugin_bartackfractionalong.js +++ /dev/null @@ -1,27 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, Path, points, paths, macro } = part.shorthand() - - points.a = new Point(15, 15) - points.b = new Point(20, 20) - points.c = new Point(30, 20) - points.d = new Point(35, 15) - points.e = new Point(20, 10) - points.f = new Point(30, 10) - - paths.a = new Path().move(points.a).curve(points.b, points.c, points.d).setRender(false) - - macro('bartackFractionAlong', { - path: paths.a, - start: 0.2, - end: 0.8, - }) - - macro('sprinkle', { - snippet: 'notch', - on: ['e', 'f'], - }) - - return box(part, 60, 30) -} diff --git a/designs/examples/src/plugin_buttons.js b/designs/examples/src/plugin_buttons.js deleted file mode 100644 index 3345f261a5c..00000000000 --- a/designs/examples/src/plugin_buttons.js +++ /dev/null @@ -1,14 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, snippets, Snippet } = part.shorthand() - - 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)) - snippets.buttonholeEnd = new Snippet('buttonhole-end', new Point(80, 10)) - snippets.snapMale = new Snippet('snap-stud', new Point(100, 10)) - snippets.snapFemale = new Snippet('snap-socket', new Point(120, 10)) - - return box(part, 140, 20) -} diff --git a/designs/examples/src/plugin_cutonfold.js b/designs/examples/src/plugin_cutonfold.js deleted file mode 100644 index 6b5c13b3ee2..00000000000 --- a/designs/examples/src/plugin_cutonfold.js +++ /dev/null @@ -1,23 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, macro } = part.shorthand() - - points.topLeft = new Point(0, 0) - points.topRight = new Point(150, 0) - points.bottomRight = new Point(150, 30) - points.bottomLeft = new Point(0, 30) - - paths.box = new Path() - .move(points.topLeft) - .line(points.topRight) - .line(points.bottomRight) - .line(points.bottomLeft) - .close() - - macro('cutonfold', { - from: points.bottomLeft, - to: points.bottomRight, - grainline: true, - }) - - return part -} diff --git a/designs/examples/src/plugin_dimension.js b/designs/examples/src/plugin_dimension.js deleted file mode 100644 index 435b26aa80f..00000000000 --- a/designs/examples/src/plugin_dimension.js +++ /dev/null @@ -1,49 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, macro } = part.shorthand() - - points.A = new Point(0, 0) - points.B = new Point(0, 100) - points.C = new Point(50, 100) - points.D = new Point(100, 50) - points.DCp1 = new Point(100, 0) - - paths.box = new Path() - .move(points.A) - .line(points.B) - .line(points.C) - .line(points.D) - .curve(points.DCp1, points.A, points.A) - .close() - - macro('vd', { - from: points.A, - to: points.B, - x: points.A.x - 15, - }) - - macro('hd', { - from: points.B, - to: points.C, - y: points.B.y + 15, - }) - - macro('ld', { - from: points.C, - to: points.D, - d: -15, - }) - - macro('ld', { - from: points.C, - to: points.D, - d: -30, - text: 'Custom text', - }) - - macro('pd', { - path: new Path().move(points.A).curve(points.A, points.DCp1, points.D), - d: -15, - }) - - return part -} diff --git a/designs/examples/src/plugin_gore.js b/designs/examples/src/plugin_gore.js deleted file mode 100644 index c0b7e0b9930..00000000000 --- a/designs/examples/src/plugin_gore.js +++ /dev/null @@ -1,15 +0,0 @@ -export default (part) => { - const { Point, points, macro } = part.shorthand() - - points.anchor = new Point(0, 0) - - macro('gore', { - from: points.anchor, - radius: 60, - gores: 5, - extraLength: 20, - render: true, - }) - - return part -} diff --git a/designs/examples/src/plugin_grainline.js b/designs/examples/src/plugin_grainline.js deleted file mode 100644 index c660d1141b8..00000000000 --- a/designs/examples/src/plugin_grainline.js +++ /dev/null @@ -1,15 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, macro } = part.shorthand() - - points.grainlineFrom = new Point(10, 10) - points.grainlineTo = new Point(100, 10) - - macro('grainline', { - from: points.grainlineFrom, - to: points.grainlineTo, - }) - - return box(part, 110, 15) -} diff --git a/designs/examples/src/plugin_logo.js b/designs/examples/src/plugin_logo.js deleted file mode 100644 index 546118774a4..00000000000 --- a/designs/examples/src/plugin_logo.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { points, Point, snippets, Snippet } = part.shorthand() - points.anchor = new Point(50, 25) - - snippets.logo = new Snippet('logo', points.anchor).attr('data-scale', 0.666) - - return box(part, 100, 35) -} diff --git a/designs/examples/src/plugin_mirror.js b/designs/examples/src/plugin_mirror.js deleted file mode 100644 index 221e0e7a173..00000000000 --- a/designs/examples/src/plugin_mirror.js +++ /dev/null @@ -1,26 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, Path, points, paths, macro } = part.shorthand() - - points.a = new Point(5, 5) - points.b = new Point(45, 30) - points.c = new Point(5, 30) - points.d = new Point(45, 5) - points.mid = new Point(25, 15) - - paths.a = new Path().move(points.a).curve(points.b, points.c, points.d) - - macro('mirror', { - mirror: [points.b, points.d], - points: [points.mid], - paths: [paths.a], - }) - - macro('sprinkle', { - snippet: 'notch', - on: ['mid', 'mirroredMid'], - }) - - return box(part, 100, 40) -} diff --git a/designs/examples/src/plugin_notches.js b/designs/examples/src/plugin_notches.js deleted file mode 100644 index 995e8facfdf..00000000000 --- a/designs/examples/src/plugin_notches.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, snippets, Snippet } = part.shorthand() - - snippets.notch = new Snippet('notch', new Point(60, 10)) - snippets.bnotch = new Snippet('bnotch', new Point(80, 10)) - - return box(part, 140, 20) -} diff --git a/designs/examples/src/plugin_round.js b/designs/examples/src/plugin_round.js deleted file mode 100644 index 92bca867ef7..00000000000 --- a/designs/examples/src/plugin_round.js +++ /dev/null @@ -1,35 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, macro } = part.shorthand() - - points.topLeft = new Point(0, 0) - points.bottomLeft = new Point(0, 30) - points.topRight = new Point(100, 0) - points.bottomRight = new Point(100, 30) - - paths.demo = new Path() - .move(points.topLeft) - .line(points.bottomLeft) - .line(points.bottomRight) - .line(points.topRight) - .close() - .attr('class', 'note dashed') - - macro('round', { - from: points.topLeft, - to: points.bottomRight, - via: points.bottomLeft, - radius: 10, - prefix: 'bl', - render: true, - }) - macro('round', { - from: points.bottomRight, - to: points.topLeft, - via: points.topRight, - radius: 20, - prefix: 'tr', - render: true, - }) - - return part -} diff --git a/designs/examples/src/plugin_scalebox.js b/designs/examples/src/plugin_scalebox.js deleted file mode 100644 index 425dc5bf20a..00000000000 --- a/designs/examples/src/plugin_scalebox.js +++ /dev/null @@ -1,11 +0,0 @@ -export default (part) => { - let { Point, points, macro } = part.shorthand() - - points.anchor1 = new Point(0, 0) - points.anchor2 = new Point(70, 0) - - macro('scalebox', { at: points.anchor1 }) - macro('miniscale', { at: points.anchor2 }) - - return part -} diff --git a/designs/examples/src/plugin_sprinkle.js b/designs/examples/src/plugin_sprinkle.js deleted file mode 100644 index 1fcf834b7b0..00000000000 --- a/designs/examples/src/plugin_sprinkle.js +++ /dev/null @@ -1,22 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, macro } = part.shorthand() - - points.a = new Point(10, 10) - points.b = new Point(20, 15) - points.c = new Point(30, 10) - points.d = new Point(40, 15) - points.e = new Point(50, 10) - points.f = new Point(60, 15) - points.g = new Point(70, 10) - points.h = new Point(80, 15) - points.i = new Point(90, 10) - - macro('sprinkle', { - snippet: 'button', - on: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], - }) - - return box(part, 100, 25) -} diff --git a/designs/examples/src/plugin_title.js b/designs/examples/src/plugin_title.js deleted file mode 100644 index 18bdecb41a8..00000000000 --- a/designs/examples/src/plugin_title.js +++ /dev/null @@ -1,16 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, macro } = part.shorthand() - - points.title = new Point(90, 45) - - macro('title', { - at: points.title, - nr: 4, - title: 'sleeve', - prefix: 'test', - }) - - return box(part, 200, 70) -} diff --git a/designs/examples/src/plugins.mjs b/designs/examples/src/plugins.mjs new file mode 100644 index 00000000000..6cf3fe116a2 --- /dev/null +++ b/designs/examples/src/plugins.mjs @@ -0,0 +1,378 @@ +import { box } from './shared.mjs' + +export const plugin_banner = { + name: 'examples.plugin_banner', + draft: part => { + const { points, Point, paths, Path, macro } = part.shorthand() + + points.from = new Point(0, 0) + points.to = new Point(320, 0) + + paths.banner = new Path().move(points.from).line(points.to) + + macro('banner', { + path: 'banner', + text: 'banner plugin', + }) + + // Prevent clipping of text + 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() + + points.a = new Point(15, 15) + + macro('bartack', { + anchor: points.a, + angle: 30, + length: 15, + }) + + return box(part, 60, 30) + } +} + +export const plugin_bartackalong = { + name: 'examples.plugin_bartackalong', + draft: part => { + const { Point, Path, points, paths, macro } = part.shorthand() + + points.a = new Point(15, 15) + points.b = new Point(20, 20) + points.c = new Point(30, 20) + points.d = new Point(35, 15) + points.e = new Point(20, 10) + points.f = new Point(30, 10) + + paths.a = new Path().move(points.a).curve(points.b, points.c, points.d).setRender(false) + + macro('bartackAlong', { + path: paths.a, + }) + + macro('sprinkle', { + snippet: 'notch', + on: ['e', 'f'], + }) + + return box(part, 60, 30) + } +} + +export const plugin_bartackfractionalong = { + name: 'examples.plugin_bartackfractionalong', + draft: part => { + const { Point, Path, points, paths, macro } = part.shorthand() + + points.a = new Point(15, 15) + points.b = new Point(20, 20) + points.c = new Point(30, 20) + points.d = new Point(35, 15) + points.e = new Point(20, 10) + points.f = new Point(30, 10) + + paths.a = new Path().move(points.a).curve(points.b, points.c, points.d).setRender(false) + + macro('bartackFractionAlong', { + path: paths.a, + start: 0.2, + end: 0.8, + }) + + macro('sprinkle', { + snippet: 'notch', + on: ['e', 'f'], + }) + + return box(part, 60, 30) + } +} + +export const plugin_buttons = { + name: 'examples.plugin_buttons', + draft: part => { + const { Point, snippets, Snippet } = part.shorthand() + + 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)) + snippets.buttonholeEnd = new Snippet('buttonhole-end', new Point(80, 10)) + snippets.snapMale = new Snippet('snap-stud', new Point(100, 10)) + 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() + + points.topLeft = new Point(0, 0) + points.topRight = new Point(150, 0) + points.bottomRight = new Point(150, 30) + points.bottomLeft = new Point(0, 30) + + paths.box = new Path() + .move(points.topLeft) + .line(points.topRight) + .line(points.bottomRight) + .line(points.bottomLeft) + .close() + + macro('cutonfold', { + from: points.bottomLeft, + to: points.bottomRight, + grainline: true, + }) + + return part + } +} + +export const plugin_dimension = { + name: 'examples.plugin_dimension', + draft: part => { + const { Point, points, Path, paths, macro } = part.shorthand() + + points.A = new Point(0, 0) + points.B = new Point(0, 100) + points.C = new Point(50, 100) + points.D = new Point(100, 50) + points.DCp1 = new Point(100, 0) + + paths.box = new Path() + .move(points.A) + .line(points.B) + .line(points.C) + .line(points.D) + .curve(points.DCp1, points.A, points.A) + .close() + + macro('vd', { + from: points.A, + to: points.B, + x: points.A.x - 15, + }) + + macro('hd', { + from: points.B, + to: points.C, + y: points.B.y + 15, + }) + + macro('ld', { + from: points.C, + to: points.D, + d: -15, + }) + + macro('ld', { + from: points.C, + to: points.D, + d: -30, + text: 'Custom text', + }) + + macro('pd', { + path: new Path().move(points.A).curve(points.A, points.DCp1, points.D), + d: -15, + }) + + return part + } +} + +export const plugin_gore = { + name: 'examples.plugin_gore', + draft: part => { + const { Point, points, macro } = part.shorthand() + + points.anchor = new Point(0, 0) + + macro('gore', { + from: points.anchor, + radius: 60, + gores: 5, + extraLength: 20, + render: true, + }) + + return part + } +} + +export const plugin_grainline = { + name: 'examples.plugin_grainline', + draft: part => { + const { Point, points, macro } = part.shorthand() + + points.grainlineFrom = new Point(10, 10) + points.grainlineTo = new Point(100, 10) + + macro('grainline', { + from: points.grainlineFrom, + to: points.grainlineTo, + }) + + return box(part, 110, 15) + } +} + +export const plugin_logo = { + name: 'examples.plugin_logo', + draft: part => { + const { points, Point, snippets, Snippet } = part.shorthand() + 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() + + points.a = new Point(5, 5) + points.b = new Point(45, 30) + points.c = new Point(5, 30) + points.d = new Point(45, 5) + points.mid = new Point(25, 15) + + paths.a = new Path().move(points.a).curve(points.b, points.c, points.d) + + macro('mirror', { + mirror: [points.b, points.d], + points: [points.mid], + paths: [paths.a], + }) + + macro('sprinkle', { + snippet: 'notch', + on: ['mid', 'mirroredMid'], + }) + + return box(part, 100, 40) + } +} + +export const plugin_notches = { + name: 'examples.plugin_notches', + draft: part => { + const { Point, snippets, Snippet } = part.shorthand() + + 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() + + points.topLeft = new Point(0, 0) + points.bottomLeft = new Point(0, 30) + points.topRight = new Point(100, 0) + points.bottomRight = new Point(100, 30) + + paths.demo = new Path() + .move(points.topLeft) + .line(points.bottomLeft) + .line(points.bottomRight) + .line(points.topRight) + .close() + .attr('class', 'note dashed') + + macro('round', { + from: points.topLeft, + to: points.bottomRight, + via: points.bottomLeft, + radius: 10, + prefix: 'bl', + render: true, + }) + macro('round', { + from: points.bottomRight, + to: points.topLeft, + via: points.topRight, + radius: 20, + prefix: 'tr', + render: true, + }) + + return part + } +} + +export const plugin_scalebox = { + name: 'examples.plugin_scalebox', + draft: part => { + const { Point, points, macro } = part.shorthand() + + points.anchor1 = new Point(0, 0) + points.anchor2 = new Point(70, 0) + + macro('scalebox', { at: points.anchor1 }) + macro('miniscale', { at: points.anchor2 }) + + return part + } +} + +export const plugin_sprinkle = { + name: 'examples.plugin_sprinkle', + draft: part => { + const { Point, points, macro } = part.shorthand() + + points.a = new Point(10, 10) + points.b = new Point(20, 15) + points.c = new Point(30, 10) + points.d = new Point(40, 15) + points.e = new Point(50, 10) + points.f = new Point(60, 15) + points.g = new Point(70, 10) + points.h = new Point(80, 15) + points.i = new Point(90, 10) + + macro('sprinkle', { + snippet: 'button', + on: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], + }) + + return box(part, 100, 25) + } +} + +export const plugin_title = { + name: 'examples.plugin_title', + draft: part => { + const { Point, points, macro } = part.shorthand() + + points.title = new Point(90, 45) + + macro('title', { + at: points.title, + nr: 4, + title: 'sleeve', + prefix: 'test', + }) + + return box(part, 200, 70) + } +} + diff --git a/designs/examples/src/point.mjs b/designs/examples/src/point.mjs new file mode 100644 index 00000000000..8af7916f422 --- /dev/null +++ b/designs/examples/src/point.mjs @@ -0,0 +1,436 @@ +import { box } from './shared.mjs' + +export const point_angle = { + name: 'examples.point_angle', + draft: part => { + const { Point, points, Path, paths } = part.shorthand() + + points.sun = new Point(10, 5) + points.moon = points.sun.shift(-15, 70) + points.text = points.sun + .shiftFractionTowards(points.moon, 0.8) + .attr('data-text', points.sun.angle(points.moon) + '°') + .attr('data-text-class', 'text-sm fill-note center') + + 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() + + 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() + + points.A = new Point(25, 25) + .attr('data-text', 'Point A') + .attr('data-text-class', 'text-xl') + .attr('data-text-fill-opacity', '0.5') + points.B = points.A.clone().attr('data-text', 'Point B') + + 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() + + 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() + + points.from = new Point(10, 10) + points.to = new Point(80, 70) + + points.text = points.from + .shiftFractionTowards(points.to, 0.6) + .attr('data-text', points.from.dist(points.to) + 'mm') + .attr('data-text-class', 'text-sm fill-note center') + + 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() + + points.from = new Point(10, 10) + points.to = new Point(80, 70) + + paths.line = new Path().move(points.from).line(points.to).attr('class', 'dashed') + + points.totop = points.from.shift(0, points.from.dx(points.to)) + + points.text_dx = points.from + .shiftFractionTowards(points.totop, 0.6) + .shiftFractionTowards(points.to, 0.1) + .attr('data-text', points.from.dx(points.to) + 'mm') + .attr('data-text-class', 'text-sm fill-note center') + + paths.line_dx = new Path().move(points.from).line(points.totop).attr('class', 'dashed') + + 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() + + points.from = new Point(10, 10) + points.to = new Point(80, 70) + + paths.line = new Path().move(points.from).line(points.to).attr('class', 'dashed') + + points.totop = points.from.shift(0, points.from.dx(points.to)) + + paths.line_dx = new Path().move(points.from).line(points.totop).attr('class', 'dashed') + + points.text_dy = points.totop + .shiftFractionTowards(points.to, 0.4) + .attr('data-text', points.from.dy(points.to) + 'mm') + .attr('data-text-class', 'text-sm fill-note right') + + 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() + + points.top = new Point(50, 10) + points.out1 = new Point(70, 30) + points.in1 = new Point(55, 35) + points.out2 = new Point(75, 50) + points.in2 = new Point(60, 55) + points.out3 = new Point(80, 70) + points.in3 = new Point(55, 70) + points.trunkOut = new Point(55, 80) + points.trunkIn = new Point(50, 80) + + points._out1 = points.out1.flipX(points.top) + points._in1 = points.in1.flipX(points.top) + points._out2 = points.out2.flipX(points.top) + points._in2 = points.in2.flipX(points.top) + points._out3 = points.out3.flipX(points.top) + points._in3 = points.in3.flipX(points.top) + points._trunkOut = points.trunkOut.flipX(points.top) + + points.bottom = new Point(50, 80) + + paths.tree = new Path() + .move(points.top) + .line(points.out1) + .line(points.in1) + .line(points.out2) + .line(points.in2) + .line(points.out3) + .line(points.in3) + .line(points.trunkOut) + .line(points._trunkOut) + .line(points._in3) + .line(points._out3) + .line(points._in2) + .line(points._out2) + .line(points._in1) + .line(points._out1) + .close() + + 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() + + points.start = new Point(0, 50) + points.churchTowerWallLeft = new Point(10, 50) + points.churchTowerRoofLeft = new Point(10, 30) + points.churchTowerTop = new Point(15, 10) + points.churchTowerRoofRight = new Point(20, 30) + points.churchRoofRight = new Point(50, 30) + points.churchWallRight = new Point(50, 50) + points.houseWallLeft = new Point(65, 50) + points.houseRoofLeft = new Point(65, 35) + points.houseRoofTop = new Point(75, 25) + points.houseRoofRight = new Point(85, 35) + points.houseWallRight = new Point(85, 50) + points.end = new Point(95, 50) + + points.mirror = new Point(0, 60) + points.mirrorLineEnd = new Point(95, 60) + + points._start = points.start.flipY(points.mirror) + points._churchTowerWallLeft = points.churchTowerWallLeft.flipY(points.mirror) + points._churchTowerRoofLeft = points.churchTowerRoofLeft.flipY(points.mirror) + points._churchTowerTop = points.churchTowerTop.flipY(points.mirror) + points._churchTowerRoofRight = points.churchTowerRoofRight.flipY(points.mirror) + points._churchRoofRight = points.churchRoofRight.flipY(points.mirror) + points._churchWallRight = points.churchWallRight.flipY(points.mirror) + points._houseWallLeft = points.houseWallLeft.flipY(points.mirror) + points._houseRoofLeft = points.houseRoofLeft.flipY(points.mirror) + points._houseRoofTop = points.houseRoofTop.flipY(points.mirror) + points._houseRoofRight = points.houseRoofRight.flipY(points.mirror) + points._houseWallRight = points.houseWallRight.flipY(points.mirror) + points._end = points.end.flipY(points.mirror) + + paths.skylineTop = new Path() + .move(points.start) + .line(points.churchTowerWallLeft) + .line(points.churchTowerRoofLeft) + .line(points.churchTowerTop) + .line(points.churchTowerRoofRight) + .line(points.churchRoofRight) + .line(points.churchWallRight) + .line(points.houseWallLeft) + .line(points.houseRoofLeft) + .line(points.houseRoofTop) + .line(points.houseRoofRight) + .line(points.houseWallRight) + .line(points.end) + + paths.skylineBottom = new Path() + .move(points._start) + .line(points._churchTowerWallLeft) + .line(points._churchTowerRoofLeft) + .line(points._churchTowerTop) + .line(points._churchTowerRoofRight) + .line(points._churchRoofRight) + .line(points._churchWallRight) + .line(points._houseWallLeft) + .line(points._houseRoofLeft) + .line(points._houseRoofTop) + .line(points._houseRoofRight) + .line(points._houseWallRight) + .line(points._end) + + paths.mirrorLine = new Path() + .move(points.mirror) + .line(points.mirrorLineEnd) + .attr('class', 'note dashed') + + return part + } +} + +export const point_rotate = { + name: 'examples.point_rotate', + draft: part => { + const { Point, points, Path, paths } = part.shorthand() + + points.sun = new Point(40, 40) + points.moon = new Point(70, 40) + let step = 360 / 36 + for (let i = 1; i < 37; i++) { + let angle = step * i + points[`moon${i}`] = points.moon.rotate(angle, points.sun) + paths[`moon${i}`] = new Path().move(points.sun).line(points[`moon${i}`]) + } + + return part + } +} + +export const point_shift = { + name: 'examples.point_shift', + draft: part => { + const { Point, points, macro } = part.shorthand() + + 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') + .attr('data-text-lineheight', 6) + + macro('ld', { + from: points.B, + to: points.A, + d: -10, + }) + + return box(part, 100, 45) + } +} + +export const point_shiftfractiontowards = { + name: 'examples.point_shiftfractiontowards', + draft: part => { + const { Point, points, Path, paths, macro } = part.shorthand() + + 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) + .attr('data-text', 'Point C is point A shifted 50%\nin the direction of point B') + .attr('data-text-class', 'center') + .attr('data-text-lineheight', 6) + + paths.direction = new Path().move(points.A).line(points.B).attr('class', 'note dashed') + + macro('ld', { + from: points.C, + to: points.A, + d: -10, + }) + + macro('ld', { + from: points.B, + to: points.A, + d: 20, + }) + + return part + } +} + +export const point_shiftoutwards = { + name: 'examples.point_shiftoutwards', + draft: part => { + const { Point, points, Path, paths, macro } = part.shorthand() + + 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) + .attr('data-text', 'Point C is point A shifted 3cm\nbeyond point B') + .attr('data-text-lineheight', 6) + + paths.direction = new Path().move(points.A).line(points.C).attr('class', 'note dashed') + + macro('ld', { + from: points.C, + to: points.B, + d: -10, + }) + + return box(part, 110, 75) + } +} + +export const point_shifttowards = { + name: 'examples.point_shifttowards', + draft: part => { + const { Point, points, Path, paths, macro } = part.shorthand() + + 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) + .attr('data-text', 'Point C is point A shifted 3.5cm\nin the direction of point B') + .attr('data-text-class', 'center') + .attr('data-text-lineheight', 6) + + paths.direction = new Path().move(points.A).line(points.B).attr('class', 'note dashed') + + macro('ld', { + from: points.C, + to: points.A, + d: -10, + }) + + return box(part, 110, 80) + } +} + +export const point_sitson = { + name: 'examples.point_sitson', + draft: part => { + const { Point, points, Snippet, snippets } = part.shorthand() + + let s + for (let i = 0; i < 10; i++) { + points[`a${i}`] = new Point(i * 10, 40) + points[`b${i}`] = new Point(i * 10, i * 8) + if (points[`a${i}`].sitsOn(points[`b${i}`])) s = 'notch' + else s = 'bnotch' + snippets[`b${i}`] = new Snippet(s, points[`b${i}`]) + snippets[`a${i}`] = new Snippet(s, points[`a${i}`]) + } + + return box(part) + } +} + +export const point_sitsroughlyon = { + name: 'examples.point_sitsroughlyon', + draft: part => { + const { Point, points, Snippet, snippets } = part.shorthand() + + box(part) + + let s + for (let i = 0; i < 10; i++) { + points[`a${i}`] = new Point(i * 10, 40) + points[`b${i}`] = new Point(i * 10, i * 8) + if (points[`a${i}`].sitsRoughlyOn(points[`b${i}`])) s = 'notch' + else s = 'bnotch' + snippets[`b${i}`] = new Snippet(s, points[`b${i}`]) + snippets[`a${i}`] = new Snippet(s, points[`a${i}`]) + } + + return part + } +} + +export const point_translate = { + name: 'examples.point_translate', + draft: part => { + const { Point, points, macro } = part.shorthand() + + 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') + .attr('data-text-class', 'right') + .attr('data-text-dy', -6) + .attr('data-text-lineheight', 6) + + macro('ld', { + from: points.A, + to: points.B, + text: 'translate(120,60)', + noStartMarker: true, + }) + + return box(part, 150, 85) + } +} + diff --git a/designs/examples/src/point_angle.js b/designs/examples/src/point_angle.js deleted file mode 100644 index cc8861f739e..00000000000 --- a/designs/examples/src/point_angle.js +++ /dev/null @@ -1,14 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.sun = new Point(10, 5) - points.moon = points.sun.shift(-15, 70) - points.text = points.sun - .shiftFractionTowards(points.moon, 0.8) - .attr('data-text', points.sun.angle(points.moon) + '°') - .attr('data-text-class', 'text-sm fill-note center') - - paths.line = new Path().move(points.sun).line(points.moon).attr('class', 'dashed') - - return part -} diff --git a/designs/examples/src/point_attr.js b/designs/examples/src/point_attr.js deleted file mode 100644 index bd0af28b3a2..00000000000 --- a/designs/examples/src/point_attr.js +++ /dev/null @@ -1,11 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points } = part.shorthand() - - points.anchor = new Point(100, 25) - .attr('data-text', 'supportFreesewingBecomeAPatron') - .attr('data-text-class', 'center') - - return box(part, 200, 50) -} diff --git a/designs/examples/src/point_clone.js b/designs/examples/src/point_clone.js deleted file mode 100644 index 9706d31fd05..00000000000 --- a/designs/examples/src/point_clone.js +++ /dev/null @@ -1,15 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.A = new Point(25, 25) - .attr('data-text', 'Point A') - .attr('data-text-class', 'text-xl') - .attr('data-text-fill-opacity', '0.5') - points.B = points.A.clone().attr('data-text', 'Point B') - - snippets.x = new Snippet('notch', points.A) - - return box(part) -} diff --git a/designs/examples/src/point_copy.js b/designs/examples/src/point_copy.js deleted file mode 100644 index 06310e9ccee..00000000000 --- a/designs/examples/src/point_copy.js +++ /dev/null @@ -1,12 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - 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) -} diff --git a/designs/examples/src/point_dist.js b/designs/examples/src/point_dist.js deleted file mode 100644 index 0df2430e443..00000000000 --- a/designs/examples/src/point_dist.js +++ /dev/null @@ -1,15 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.from = new Point(10, 10) - points.to = new Point(80, 70) - - points.text = points.from - .shiftFractionTowards(points.to, 0.6) - .attr('data-text', points.from.dist(points.to) + 'mm') - .attr('data-text-class', 'text-sm fill-note center') - - paths.line = new Path().move(points.from).line(points.to).attr('class', 'dashed') - - return part -} diff --git a/designs/examples/src/point_dx.js b/designs/examples/src/point_dx.js deleted file mode 100644 index 0b639ce8f63..00000000000 --- a/designs/examples/src/point_dx.js +++ /dev/null @@ -1,22 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.from = new Point(10, 10) - points.to = new Point(80, 70) - - paths.line = new Path().move(points.from).line(points.to).attr('class', 'dashed') - - points.totop = points.from.shift(0, points.from.dx(points.to)) - - points.text_dx = points.from - .shiftFractionTowards(points.totop, 0.6) - .shiftFractionTowards(points.to, 0.1) - .attr('data-text', points.from.dx(points.to) + 'mm') - .attr('data-text-class', 'text-sm fill-note center') - - paths.line_dx = new Path().move(points.from).line(points.totop).attr('class', 'dashed') - - paths.line_dy = new Path().move(points.to).line(points.totop).attr('class', 'dashed') - - return part -} diff --git a/designs/examples/src/point_dy.js b/designs/examples/src/point_dy.js deleted file mode 100644 index a9ce9abe939..00000000000 --- a/designs/examples/src/point_dy.js +++ /dev/null @@ -1,21 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.from = new Point(10, 10) - points.to = new Point(80, 70) - - paths.line = new Path().move(points.from).line(points.to).attr('class', 'dashed') - - points.totop = points.from.shift(0, points.from.dx(points.to)) - - paths.line_dx = new Path().move(points.from).line(points.totop).attr('class', 'dashed') - - points.text_dy = points.totop - .shiftFractionTowards(points.to, 0.4) - .attr('data-text', points.from.dy(points.to) + 'mm') - .attr('data-text-class', 'text-sm fill-note right') - - paths.line_dy = new Path().move(points.to).line(points.totop).attr('class', 'dashed') - - return part -} diff --git a/designs/examples/src/point_flipx.js b/designs/examples/src/point_flipx.js deleted file mode 100644 index a1a9061d8d2..00000000000 --- a/designs/examples/src/point_flipx.js +++ /dev/null @@ -1,45 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.top = new Point(50, 10) - points.out1 = new Point(70, 30) - points.in1 = new Point(55, 35) - points.out2 = new Point(75, 50) - points.in2 = new Point(60, 55) - points.out3 = new Point(80, 70) - points.in3 = new Point(55, 70) - points.trunkOut = new Point(55, 80) - points.trunkIn = new Point(50, 80) - - points._out1 = points.out1.flipX(points.top) - points._in1 = points.in1.flipX(points.top) - points._out2 = points.out2.flipX(points.top) - points._in2 = points.in2.flipX(points.top) - points._out3 = points.out3.flipX(points.top) - points._in3 = points.in3.flipX(points.top) - points._trunkOut = points.trunkOut.flipX(points.top) - - points.bottom = new Point(50, 80) - - paths.tree = new Path() - .move(points.top) - .line(points.out1) - .line(points.in1) - .line(points.out2) - .line(points.in2) - .line(points.out3) - .line(points.in3) - .line(points.trunkOut) - .line(points._trunkOut) - .line(points._in3) - .line(points._out3) - .line(points._in2) - .line(points._out2) - .line(points._in1) - .line(points._out1) - .close() - - paths.mirror = new Path().move(points.top).line(points.bottom).attr('class', 'note dashed') - - return part -} diff --git a/designs/examples/src/point_flipy.js b/designs/examples/src/point_flipy.js deleted file mode 100644 index 1fa64fc1946..00000000000 --- a/designs/examples/src/point_flipy.js +++ /dev/null @@ -1,71 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.start = new Point(0, 50) - points.churchTowerWallLeft = new Point(10, 50) - points.churchTowerRoofLeft = new Point(10, 30) - points.churchTowerTop = new Point(15, 10) - points.churchTowerRoofRight = new Point(20, 30) - points.churchRoofRight = new Point(50, 30) - points.churchWallRight = new Point(50, 50) - points.houseWallLeft = new Point(65, 50) - points.houseRoofLeft = new Point(65, 35) - points.houseRoofTop = new Point(75, 25) - points.houseRoofRight = new Point(85, 35) - points.houseWallRight = new Point(85, 50) - points.end = new Point(95, 50) - - points.mirror = new Point(0, 60) - points.mirrorLineEnd = new Point(95, 60) - - points._start = points.start.flipY(points.mirror) - points._churchTowerWallLeft = points.churchTowerWallLeft.flipY(points.mirror) - points._churchTowerRoofLeft = points.churchTowerRoofLeft.flipY(points.mirror) - points._churchTowerTop = points.churchTowerTop.flipY(points.mirror) - points._churchTowerRoofRight = points.churchTowerRoofRight.flipY(points.mirror) - points._churchRoofRight = points.churchRoofRight.flipY(points.mirror) - points._churchWallRight = points.churchWallRight.flipY(points.mirror) - points._houseWallLeft = points.houseWallLeft.flipY(points.mirror) - points._houseRoofLeft = points.houseRoofLeft.flipY(points.mirror) - points._houseRoofTop = points.houseRoofTop.flipY(points.mirror) - points._houseRoofRight = points.houseRoofRight.flipY(points.mirror) - points._houseWallRight = points.houseWallRight.flipY(points.mirror) - points._end = points.end.flipY(points.mirror) - - paths.skylineTop = new Path() - .move(points.start) - .line(points.churchTowerWallLeft) - .line(points.churchTowerRoofLeft) - .line(points.churchTowerTop) - .line(points.churchTowerRoofRight) - .line(points.churchRoofRight) - .line(points.churchWallRight) - .line(points.houseWallLeft) - .line(points.houseRoofLeft) - .line(points.houseRoofTop) - .line(points.houseRoofRight) - .line(points.houseWallRight) - .line(points.end) - - paths.skylineBottom = new Path() - .move(points._start) - .line(points._churchTowerWallLeft) - .line(points._churchTowerRoofLeft) - .line(points._churchTowerTop) - .line(points._churchTowerRoofRight) - .line(points._churchRoofRight) - .line(points._churchWallRight) - .line(points._houseWallLeft) - .line(points._houseRoofLeft) - .line(points._houseRoofTop) - .line(points._houseRoofRight) - .line(points._houseWallRight) - .line(points._end) - - paths.mirrorLine = new Path() - .move(points.mirror) - .line(points.mirrorLineEnd) - .attr('class', 'note dashed') - - return part -} diff --git a/designs/examples/src/point_rotate.js b/designs/examples/src/point_rotate.js deleted file mode 100644 index 9648202a1e4..00000000000 --- a/designs/examples/src/point_rotate.js +++ /dev/null @@ -1,14 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - points.sun = new Point(40, 40) - points.moon = new Point(70, 40) - let step = 360 / 36 - for (let i = 1; i < 37; i++) { - let angle = step * i - points[`moon${i}`] = points.moon.rotate(angle, points.sun) - paths[`moon${i}`] = new Path().move(points.sun).line(points[`moon${i}`]) - } - - return part -} diff --git a/designs/examples/src/point_shift.js b/designs/examples/src/point_shift.js deleted file mode 100644 index 503962ff107..00000000000 --- a/designs/examples/src/point_shift.js +++ /dev/null @@ -1,18 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, macro } = part.shorthand() - - 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') - .attr('data-text-lineheight', 6) - - macro('ld', { - from: points.B, - to: points.A, - d: -10, - }) - - return box(part, 100, 45) -} diff --git a/designs/examples/src/point_shiftfractiontowards.js b/designs/examples/src/point_shiftfractiontowards.js deleted file mode 100644 index 66838f262c7..00000000000 --- a/designs/examples/src/point_shiftfractiontowards.js +++ /dev/null @@ -1,26 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, macro } = part.shorthand() - - 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) - .attr('data-text', 'Point C is point A shifted 50%\nin the direction of point B') - .attr('data-text-class', 'center') - .attr('data-text-lineheight', 6) - - paths.direction = new Path().move(points.A).line(points.B).attr('class', 'note dashed') - - macro('ld', { - from: points.C, - to: points.A, - d: -10, - }) - - macro('ld', { - from: points.B, - to: points.A, - d: 20, - }) - - return part -} diff --git a/designs/examples/src/point_shiftoutwards.js b/designs/examples/src/point_shiftoutwards.js deleted file mode 100644 index c430c15d60b..00000000000 --- a/designs/examples/src/point_shiftoutwards.js +++ /dev/null @@ -1,21 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Path, paths, macro } = part.shorthand() - - 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) - .attr('data-text', 'Point C is point A shifted 3cm\nbeyond point B') - .attr('data-text-lineheight', 6) - - paths.direction = new Path().move(points.A).line(points.C).attr('class', 'note dashed') - - macro('ld', { - from: points.C, - to: points.B, - d: -10, - }) - - return box(part, 110, 75) -} diff --git a/designs/examples/src/point_shifttowards.js b/designs/examples/src/point_shifttowards.js deleted file mode 100644 index 181b2a272ac..00000000000 --- a/designs/examples/src/point_shifttowards.js +++ /dev/null @@ -1,22 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Path, paths, macro } = part.shorthand() - - 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) - .attr('data-text', 'Point C is point A shifted 3.5cm\nin the direction of point B') - .attr('data-text-class', 'center') - .attr('data-text-lineheight', 6) - - paths.direction = new Path().move(points.A).line(points.B).attr('class', 'note dashed') - - macro('ld', { - from: points.C, - to: points.A, - d: -10, - }) - - return box(part, 110, 80) -} diff --git a/designs/examples/src/point_sitson.js b/designs/examples/src/point_sitson.js deleted file mode 100644 index 4622aef6a3c..00000000000 --- a/designs/examples/src/point_sitson.js +++ /dev/null @@ -1,17 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - let s - for (let i = 0; i < 10; i++) { - points[`a${i}`] = new Point(i * 10, 40) - points[`b${i}`] = new Point(i * 10, i * 8) - if (points[`a${i}`].sitsOn(points[`b${i}`])) s = 'notch' - else s = 'bnotch' - snippets[`b${i}`] = new Snippet(s, points[`b${i}`]) - snippets[`a${i}`] = new Snippet(s, points[`a${i}`]) - } - - return box(part) -} diff --git a/designs/examples/src/point_sitsroughlyon.js b/designs/examples/src/point_sitsroughlyon.js deleted file mode 100644 index bfd76b657af..00000000000 --- a/designs/examples/src/point_sitsroughlyon.js +++ /dev/null @@ -1,19 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - box(part) - - let s - for (let i = 0; i < 10; i++) { - points[`a${i}`] = new Point(i * 10, 40) - points[`b${i}`] = new Point(i * 10, i * 8) - if (points[`a${i}`].sitsRoughlyOn(points[`b${i}`])) s = 'notch' - else s = 'bnotch' - snippets[`b${i}`] = new Snippet(s, points[`b${i}`]) - snippets[`a${i}`] = new Snippet(s, points[`a${i}`]) - } - - return part -} diff --git a/designs/examples/src/point_translate.js b/designs/examples/src/point_translate.js deleted file mode 100644 index abed95760b8..00000000000 --- a/designs/examples/src/point_translate.js +++ /dev/null @@ -1,21 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, macro } = part.shorthand() - - 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') - .attr('data-text-class', 'right') - .attr('data-text-dy', -6) - .attr('data-text-lineheight', 6) - - macro('ld', { - from: points.A, - to: points.B, - text: 'translate(120,60)', - noStartMarker: true, - }) - - return box(part, 150, 85) -} diff --git a/designs/examples/src/settings.mjs b/designs/examples/src/settings.mjs new file mode 100644 index 00000000000..3e4c5d16aaf --- /dev/null +++ b/designs/examples/src/settings.mjs @@ -0,0 +1,25 @@ +export const settings_sa = { + name: 'examples.settings_sa', + draft: part => { + const { Point, points, Path, paths } = part.shorthand() + + 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) + .line(points.A) + .close() + .attr('class', 'fabric') + + paths.offset = paths.example.offset(-10).attr('class', 'fabric sa') + + return part + } +} + diff --git a/designs/examples/src/settings_sa.js b/designs/examples/src/settings_sa.js deleted file mode 100644 index 4ac425f5fb2..00000000000 --- a/designs/examples/src/settings_sa.js +++ /dev/null @@ -1,21 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths } = part.shorthand() - - 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) - .line(points.A) - .close() - .attr('class', 'fabric') - - paths.offset = paths.example.offset(-10).attr('class', 'fabric sa') - - return part -} diff --git a/designs/examples/src/shared.js b/designs/examples/src/shared.mjs similarity index 100% rename from designs/examples/src/shared.js rename to designs/examples/src/shared.mjs diff --git a/designs/examples/src/snippet.js b/designs/examples/src/snippet.js deleted file mode 100644 index 586610e79d5..00000000000 --- a/designs/examples/src/snippet.js +++ /dev/null @@ -1,14 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor1 = new Point(20, 15) - points.anchor2 = new Point(50, 15) - points.anchor3 = new Point(80, 15) - snippets.demo1 = new Snippet('button', points.anchor1) - snippets.demo2 = new Snippet('buttonhole', points.anchor2) - snippets.demo3 = new Snippet('logo', points.anchor3).attr('data-scale', 0.5) - - return box(part) -} diff --git a/designs/examples/src/snippet.mjs b/designs/examples/src/snippet.mjs new file mode 100644 index 00000000000..ae6fa4f6eda --- /dev/null +++ b/designs/examples/src/snippet.mjs @@ -0,0 +1,46 @@ +import { box } from './shared.mjs' + +export const snippet = { + name: 'examples.snippet', + draft: part => { + const { Point, points, Snippet, snippets } = part.shorthand() + + points.anchor1 = new Point(20, 15) + points.anchor2 = new Point(50, 15) + points.anchor3 = new Point(80, 15) + snippets.demo1 = new Snippet('button', points.anchor1) + snippets.demo2 = new Snippet('buttonhole', points.anchor2) + 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() + + 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() + + 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/snippet_attr.js b/designs/examples/src/snippet_attr.js deleted file mode 100644 index 9e0c2c15263..00000000000 --- a/designs/examples/src/snippet_attr.js +++ /dev/null @@ -1,12 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - 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) -} diff --git a/designs/examples/src/snippet_clone.js b/designs/examples/src/snippet_clone.js deleted file mode 100644 index baa56e708ec..00000000000 --- a/designs/examples/src/snippet_clone.js +++ /dev/null @@ -1,12 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - 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 new file mode 100644 index 00000000000..2e8651b75e0 --- /dev/null +++ b/designs/examples/src/snippets.mjs @@ -0,0 +1,110 @@ +import { box } from './shared.mjs' + +export const snippet_bnotch = { + name: 'examples.snippet_bnotch', + draft: part => { + const { Point, points, Snippet, snippets } = part.shorthand() + + points.anchor = new Point(50, 5) + snippets.demo = new Snippet('bnotch', points.anchor) + + return box(part, 100, 10) + } +} + +export const snippet_button = { + name: 'examples.snippet_button', + draft: part => { + const { Point, points, Snippet, snippets } = part.shorthand() + + 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() + + 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() + + 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() + + 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() + + 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() + + 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() + + 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() + + 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/snippets_bnotch.js b/designs/examples/src/snippets_bnotch.js deleted file mode 100644 index b5478c467e6..00000000000 --- a/designs/examples/src/snippets_bnotch.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor = new Point(50, 5) - snippets.demo = new Snippet('bnotch', points.anchor) - - return box(part, 100, 10) -} diff --git a/designs/examples/src/snippets_button.js b/designs/examples/src/snippets_button.js deleted file mode 100644 index 8c15ebedf78..00000000000 --- a/designs/examples/src/snippets_button.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor = new Point(50, 5) - snippets.demo = new Snippet('button', points.anchor) - - return box(part, 100, 10) -} diff --git a/designs/examples/src/snippets_buttonhole-end.js b/designs/examples/src/snippets_buttonhole-end.js deleted file mode 100644 index 0ca7c409b5e..00000000000 --- a/designs/examples/src/snippets_buttonhole-end.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor = new Point(50, 0) - snippets.demo = new Snippet('buttonhole-end', points.anchor) - - return box(part, 100, 10) -} diff --git a/designs/examples/src/snippets_buttonhole-start.js b/designs/examples/src/snippets_buttonhole-start.js deleted file mode 100644 index b8189cd76aa..00000000000 --- a/designs/examples/src/snippets_buttonhole-start.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor = new Point(50, 10) - snippets.demo = new Snippet('buttonhole-start', points.anchor) - - return box(part, 100, 10) -} diff --git a/designs/examples/src/snippets_buttonhole.js b/designs/examples/src/snippets_buttonhole.js deleted file mode 100644 index 4e9c9f3d571..00000000000 --- a/designs/examples/src/snippets_buttonhole.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor = new Point(50, 5) - snippets.demo = new Snippet('buttonhole', points.anchor) - - return box(part, 100, 10) -} diff --git a/designs/examples/src/snippets_logo.js b/designs/examples/src/snippets_logo.js deleted file mode 100644 index 56953e2b49d..00000000000 --- a/designs/examples/src/snippets_logo.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor = new Point(50, 35) - snippets.demo = new Snippet('logo', points.anchor) - - return box(part, 100, 50) -} diff --git a/designs/examples/src/snippets_notch.js b/designs/examples/src/snippets_notch.js deleted file mode 100644 index 1e97eb548db..00000000000 --- a/designs/examples/src/snippets_notch.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor = new Point(50, 5) - snippets.demo = new Snippet('notch', points.anchor) - - return box(part, 100, 10) -} diff --git a/designs/examples/src/snippets_snapsocket.js b/designs/examples/src/snippets_snapsocket.js deleted file mode 100644 index 03e1c10f9b1..00000000000 --- a/designs/examples/src/snippets_snapsocket.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - points.anchor = new Point(50, 5) - snippets.demo = new Snippet('snap-socket', points.anchor) - - return box(part, 100, 10) -} diff --git a/designs/examples/src/snippets_snapstud.js b/designs/examples/src/snippets_snapstud.js deleted file mode 100644 index b4918077261..00000000000 --- a/designs/examples/src/snippets_snapstud.js +++ /dev/null @@ -1,10 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { Point, points, Snippet, snippets } = part.shorthand() - - 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 new file mode 100644 index 00000000000..ce65cff4f9b --- /dev/null +++ b/designs/examples/src/utils.mjs @@ -0,0 +1,476 @@ +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() + + 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) + points.D = new Point(55, 65) + points.E = new Point(115, 5) + points.F = new Point(65, 75) + points.G = new Point(125, 15) + + paths.line1 = new Path().move(points.B).line(points.C) + paths.line2 = new Path().move(points.D).line(points.E) + paths.line3 = new Path().move(points.F).line(points.G) + + let intersections1 = utils.beamIntersectsCircle( + points.A, + points.A.attributes.get('data-circle'), + points.B, + points.C + ) + let intersections2 = utils.beamIntersectsCircle( + points.A, + points.A.attributes.get('data-circle'), + points.D, + points.E, + 'y' + ) + let intersections3 = utils.beamIntersectsCircle( + points.A, + points.A.attributes.get('data-circle'), + points.F, + points.G + ) + + snippets.first1 = new Snippet('bnotch', intersections1[0]) + snippets.second1 = new Snippet('notch', intersections1[1]) + snippets.first2 = new Snippet('bnotch', intersections2[0]) + snippets.second2 = new Snippet('notch', intersections2[1]) + snippets.first3 = new Snippet('bnotch', intersections3[0]) + 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() + + points.A = new Point(10, 10) + points.B = new Point(90, 30) + + paths.AB = new Path().move(points.A).line(points.B) + + snippets.x = new Snippet('notch', utils.beamIntersectsX(points.A, points.B, 40)) + + paths.help = new Path() + .move(new Point(40, 5)) + .line(new Point(40, 35)) + .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() + + points.A = new Point(10, 10) + points.B = new Point(50, 40) + + paths.AB = new Path().move(points.A).line(points.B) + + snippets.x = new Snippet('notch', utils.beamIntersectsY(points.A, points.B, 30)) + + paths.help = new Path() + .move(new Point(0, 30)) + .line(new Point(50, 30)) + .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() + + points.A = new Point(10, 10) + points.B = new Point(50, 40) + points.C = new Point(45, 20) + points.D = new Point(60, 15) + + paths.AB = new Path().move(points.A).line(points.B) + paths.CD = new Path().move(points.C).line(points.D) + + 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() + + 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') + points.D = new Point(110, 30).attr('data-circle', 35).attr('data-circle-class', 'various') + + let intersections1 = utils.circlesIntersect( + points.A, + points.A.attributes.get('data-circle'), + points.B, + points.B.attributes.get('data-circle') + ) + let intersections2 = utils.circlesIntersect( + points.C, + points.C.attributes.get('data-circle'), + points.D, + points.D.attributes.get('data-circle'), + 'y' + ) + + snippets.first1 = new Snippet('bnotch', intersections1[0]) + snippets.second1 = new Snippet('notch', intersections1[1]) + snippets.first2 = new Snippet('bnotch', intersections2[0]) + 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() + + points.start = new Point(10, 15) + points.cp1 = new Point(80, 10) + points.cp2 = new Point(-50, 80) + points.end = new Point(110, 70) + + paths.curve = new Path().move(points.start).curve(points.cp1, points.cp2, points.end) + + for (let x of [30, 40]) { + points['from' + x] = new Point(x, 10) + points['to' + x] = new Point(x, 80) + paths['line' + x] = new Path() + .move(points['from' + x]) + .line(points['to' + x]) + .attr('class', 'lining dashed') + } + + snippets.i40 = new Snippet( + 'notch', + utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 40) + ) + + for (let p of utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 30)) + 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() + + points.start = new Point(10, 45) + points.cp1 = new Point(50, 10) + points.cp2 = new Point(0, 80) + points.end = new Point(110, 70) + + paths.curve = new Path().move(points.start).curve(points.cp1, points.cp2, points.end) + + for (let y of [40, 50]) { + points['from' + y] = new Point(10, y) + points['to' + y] = new Point(110, y) + paths['line' + y] = new Path() + .move(points['from' + y]) + .line(points['to' + y]) + .attr('class', 'lining dashed') + } + + snippets.i50 = new Snippet( + 'notch', + utils.curveIntersectsY(points.start, points.cp1, points.cp2, points.end, 50) + ) + + for (let p of utils.curveIntersectsY(points.start, points.cp1, points.cp2, points.end, 40)) + 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() + + points.A = new Point(10, 10) + points.Acp = new Point(310, 40) + points.B = new Point(110, 70) + points.Bcp = new Point(-210, 40) + + points.C = new Point(20, -5) + points.Ccp = new Point(60, 300) + points.D = new Point(100, 85) + points.Dcp = new Point(70, -220) + paths.curveA = new Path().move(points.A).curve(points.Acp, points.Bcp, points.B) + paths.curveB = new Path().move(points.C).curve(points.Ccp, points.Dcp, points.D) + + for (let p of utils.curvesIntersect( + points.A, + points.Acp, + points.Bcp, + points.B, + points.C, + points.Ccp, + points.Dcp, + points.D + )) { + snippets[part.getId()] = new Snippet('notch', p) + } + + return part + } +} + +export const utils_lineintersectscircle = { + name: 'examples.utils_lineintersectscircle', + draft: 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.B = new Point(55, 50) + points.C = new Point(75, 30) + + points.D = new Point(55, 65) + points.E = new Point(115, 5) + points.F = new Point(65, 75) + points.G = new Point(125, 15) + + paths.line1 = new Path().move(points.B).line(points.C) + paths.line2 = new Path().move(points.D).line(points.E) + paths.line3 = new Path().move(points.F).line(points.G) + + let intersections1 = utils.lineIntersectsCircle( + points.A, + points.A.attributes.get('data-circle'), + points.B, + points.C + ) + let intersections2 = utils.lineIntersectsCircle( + points.A, + points.A.attributes.get('data-circle'), + points.D, + points.E, + 'y' + ) + let intersections3 = utils.lineIntersectsCircle( + points.A, + points.A.attributes.get('data-circle'), + points.F, + points.G + ) + snippets.first1 = new Snippet('bnotch', intersections1[0]) + snippets.first2 = new Snippet('bnotch', intersections2[0]) + snippets.second2 = new Snippet('notch', intersections2[1]) + snippets.first3 = new Snippet('bnotch', intersections3[0]) + 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() + + points.A = new Point(10, 10) + points.Acp = new Point(310, 40) + points.B = new Point(110, 70) + points.Bcp = new Point(-210, 40) + points.E = new Point(20, -5) + points.D = new Point(100, 85) + paths.curve = new Path().move(points.A).curve(points.Acp, points.Bcp, points.B) + paths.line = new Path().move(points.E).line(points.D) + + for (let p of utils.lineIntersectsCurve( + points.D, + points.E, + points.A, + points.Acp, + points.Bcp, + points.B + )) { + snippets[part.getId()] = new Snippet('notch', p) + } + + return part + } +} + +export const utils_linesintersect = { + name: 'examples.utils_linesintersect', + draft: part => { + const { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() + + points.A = new Point(10, 10) + points.B = new Point(50, 40) + points.C = new Point(15, 30) + points.D = new Point(60, 15) + + paths.AB = new Path().move(points.A).line(points.B) + paths.CD = new Path().move(points.C).line(points.D) + + 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() + + points.from1 = new Point(10, 10) + points.to1 = new Point(90, 60) + points.from2 = new Point(10, 30) + points.to2 = new Point(90, 80) + points.b1 = new Point(170, 110) + points.b2 = new Point(170, 130) + + let scatter = [] + for (let i = 1; i < 36; i++) { + for (let j = 1; j < 27; j++) { + scatter.push(new Point(i * 10, j * 10)) + } + } + let snippet + for (let point of scatter) { + if (utils.pointOnBeam(points.from1, points.to1, point)) snippet = 'notch' + else snippet = 'bnotch' + snippets[part.getId()] = new Snippet(snippet, point) + if (utils.pointOnBeam(points.from2, points.to2, point, 0.01)) { + snippet = 'notch' + } else snippet = 'bnotch' + snippets[part.getId()] = new Snippet(snippet, point) + } + paths.line1 = new Path().move(points.from1).line(points.to1).attr('class', 'fabric stroke-lg') + paths.lne1 = new Path().move(points.to1).line(points.b1).attr('class', 'fabric dashed') + paths.line2 = new Path().move(points.from2).line(points.to2).attr('class', 'fabric stroke-lg') + 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() + + points.start = new Point(10, 10) + points.cp1 = new Point(90, 10) + points.cp2 = new Point(10, 60) + points.end = new Point(90, 60) + + let scatter = [] + for (let i = 1; i < 19; i++) { + for (let j = 1; j < 14; j++) { + scatter.push(new Point(i * 10, j * 10)) + } + } + let snippet + for (let point of scatter) { + if (utils.pointOnCurve(points.start, points.cp1, points.cp2, points.end, point)) { + snippet = 'notch' + } else snippet = 'bnotch' + snippets[part.getId()] = new Snippet(snippet, point) + } + paths.curve = new Path() + .move(points.start) + .curve(points.cp1, points.cp2, points.end) + .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() + + points.from1 = new Point(10, 10) + points.to1 = new Point(90, 60) + points.from2 = new Point(10, 30) + points.to2 = new Point(90, 80) + points.b1 = new Point(170, 110) + points.b2 = new Point(170, 130) + + let scatter = [] + for (let i = 1; i < 36; i++) { + for (let j = 1; j < 27; j++) { + scatter.push(new Point(i * 10, j * 10)) + } + } + let snippet + for (let point of scatter) { + if (utils.pointOnLine(points.from1, points.to1, point)) snippet = 'notch' + else snippet = 'bnotch' + snippets[part.getId()] = new Snippet(snippet, point) + if (utils.pointOnLine(points.from2, points.to2, point, 0.01)) { + snippet = 'notch' + } else snippet = 'bnotch' + snippets[part.getId()] = new Snippet(snippet, point) + } + paths.line1 = new Path().move(points.from1).line(points.to1).attr('class', 'fabric stroke-lg') + paths.lne1 = new Path().move(points.to1).line(points.b1).attr('class', 'fabric dashed') + paths.line2 = new Path().move(points.from2).line(points.to2).attr('class', 'fabric stroke-lg') + 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() + + 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') + + points.start = new Point(10, 15) + points.cp1 = new Point(80, 10) + points.cp2 = new Point(-50, 80) + points.end = new Point(110, 70) + + points.i40 = utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 40) + + let parts = utils.splitCurve(points.start, points.cp1, points.cp2, points.end, points.i40) + + let colors = ['lining', 'interfacing'] + for (let p of parts) { + let color = colors.pop() + paths[color] = new Path() + .move(p.start) + .curve(p.cp1, p.cp2, p.end) + .attr('class', 'stroke-xl ' + color) + } + + return part + } +} + diff --git a/designs/examples/src/utils_beamintersectscircle.js b/designs/examples/src/utils_beamintersectscircle.js deleted file mode 100644 index 691ede57e1a..00000000000 --- a/designs/examples/src/utils_beamintersectscircle.js +++ /dev/null @@ -1,46 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { 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.B = new Point(55, 50) - points.C = new Point(75, 30) - points.D = new Point(55, 65) - points.E = new Point(115, 5) - points.F = new Point(65, 75) - points.G = new Point(125, 15) - - paths.line1 = new Path().move(points.B).line(points.C) - paths.line2 = new Path().move(points.D).line(points.E) - paths.line3 = new Path().move(points.F).line(points.G) - - let intersections1 = utils.beamIntersectsCircle( - points.A, - points.A.attributes.get('data-circle'), - points.B, - points.C - ) - let intersections2 = utils.beamIntersectsCircle( - points.A, - points.A.attributes.get('data-circle'), - points.D, - points.E, - 'y' - ) - let intersections3 = utils.beamIntersectsCircle( - points.A, - points.A.attributes.get('data-circle'), - points.F, - points.G - ) - - snippets.first1 = new Snippet('bnotch', intersections1[0]) - snippets.second1 = new Snippet('notch', intersections1[1]) - snippets.first2 = new Snippet('bnotch', intersections2[0]) - snippets.second2 = new Snippet('notch', intersections2[1]) - snippets.first3 = new Snippet('bnotch', intersections3[0]) - snippets.second3 = new Snippet('notch', intersections3[1]) - - return box(part, 200, 80) -} diff --git a/designs/examples/src/utils_beamintersectsx.js b/designs/examples/src/utils_beamintersectsx.js deleted file mode 100644 index 5e7f0248a44..00000000000 --- a/designs/examples/src/utils_beamintersectsx.js +++ /dev/null @@ -1,17 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.A = new Point(10, 10) - points.B = new Point(90, 30) - - paths.AB = new Path().move(points.A).line(points.B) - - snippets.x = new Snippet('notch', utils.beamIntersectsX(points.A, points.B, 40)) - - paths.help = new Path() - .move(new Point(40, 5)) - .line(new Point(40, 35)) - .attr('class', 'note dashed') - - return part -} diff --git a/designs/examples/src/utils_beamintersectsy.js b/designs/examples/src/utils_beamintersectsy.js deleted file mode 100644 index 16c44a12603..00000000000 --- a/designs/examples/src/utils_beamintersectsy.js +++ /dev/null @@ -1,17 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.A = new Point(10, 10) - points.B = new Point(50, 40) - - paths.AB = new Path().move(points.A).line(points.B) - - snippets.x = new Snippet('notch', utils.beamIntersectsY(points.A, points.B, 30)) - - paths.help = new Path() - .move(new Point(0, 30)) - .line(new Point(50, 30)) - .attr('class', 'note dashed') - - return part -} diff --git a/designs/examples/src/utils_beamsintersect.js b/designs/examples/src/utils_beamsintersect.js deleted file mode 100644 index 6ea9dbec414..00000000000 --- a/designs/examples/src/utils_beamsintersect.js +++ /dev/null @@ -1,15 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.A = new Point(10, 10) - points.B = new Point(50, 40) - points.C = new Point(45, 20) - points.D = new Point(60, 15) - - paths.AB = new Path().move(points.A).line(points.B) - paths.CD = new Path().move(points.C).line(points.D) - - snippets.x = new Snippet('notch', utils.beamsIntersect(points.A, points.B, points.C, points.D)) - - return part -} diff --git a/designs/examples/src/utils_circlesintersect.js b/designs/examples/src/utils_circlesintersect.js deleted file mode 100644 index 86f15c0a94d..00000000000 --- a/designs/examples/src/utils_circlesintersect.js +++ /dev/null @@ -1,29 +0,0 @@ -export default (part) => { - let { Point, points, Snippet, snippets, utils } = part.shorthand() - - 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') - points.D = new Point(110, 30).attr('data-circle', 35).attr('data-circle-class', 'various') - - let intersections1 = utils.circlesIntersect( - points.A, - points.A.attributes.get('data-circle'), - points.B, - points.B.attributes.get('data-circle') - ) - let intersections2 = utils.circlesIntersect( - points.C, - points.C.attributes.get('data-circle'), - points.D, - points.D.attributes.get('data-circle'), - 'y' - ) - - snippets.first1 = new Snippet('bnotch', intersections1[0]) - snippets.second1 = new Snippet('notch', intersections1[1]) - snippets.first2 = new Snippet('bnotch', intersections2[0]) - snippets.second2 = new Snippet('notch', intersections2[1]) - - return part -} diff --git a/designs/examples/src/utils_curveintersectsx.js b/designs/examples/src/utils_curveintersectsx.js deleted file mode 100644 index 09eaffdf546..00000000000 --- a/designs/examples/src/utils_curveintersectsx.js +++ /dev/null @@ -1,29 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, utils, snippets, Snippet } = part.shorthand() - - points.start = new Point(10, 15) - points.cp1 = new Point(80, 10) - points.cp2 = new Point(-50, 80) - points.end = new Point(110, 70) - - paths.curve = new Path().move(points.start).curve(points.cp1, points.cp2, points.end) - - for (let x of [30, 40]) { - points['from' + x] = new Point(x, 10) - points['to' + x] = new Point(x, 80) - paths['line' + x] = new Path() - .move(points['from' + x]) - .line(points['to' + x]) - .attr('class', 'lining dashed') - } - - snippets.i40 = new Snippet( - 'notch', - utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 40) - ) - - for (let p of utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 30)) - snippets[p.y] = new Snippet('notch', p) - - return part -} diff --git a/designs/examples/src/utils_curveintersectsy.js b/designs/examples/src/utils_curveintersectsy.js deleted file mode 100644 index bc5e7fc82c0..00000000000 --- a/designs/examples/src/utils_curveintersectsy.js +++ /dev/null @@ -1,29 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, utils, snippets, Snippet } = part.shorthand() - - points.start = new Point(10, 45) - points.cp1 = new Point(50, 10) - points.cp2 = new Point(0, 80) - points.end = new Point(110, 70) - - paths.curve = new Path().move(points.start).curve(points.cp1, points.cp2, points.end) - - for (let y of [40, 50]) { - points['from' + y] = new Point(10, y) - points['to' + y] = new Point(110, y) - paths['line' + y] = new Path() - .move(points['from' + y]) - .line(points['to' + y]) - .attr('class', 'lining dashed') - } - - snippets.i50 = new Snippet( - 'notch', - utils.curveIntersectsY(points.start, points.cp1, points.cp2, points.end, 50) - ) - - for (let p of utils.curveIntersectsY(points.start, points.cp1, points.cp2, points.end, 40)) - snippets[p.x] = new Snippet('notch', p) - - return part -} diff --git a/designs/examples/src/utils_curvesintersect.js b/designs/examples/src/utils_curvesintersect.js deleted file mode 100644 index 76472b0b2f8..00000000000 --- a/designs/examples/src/utils_curvesintersect.js +++ /dev/null @@ -1,30 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.A = new Point(10, 10) - points.Acp = new Point(310, 40) - points.B = new Point(110, 70) - points.Bcp = new Point(-210, 40) - - points.C = new Point(20, -5) - points.Ccp = new Point(60, 300) - points.D = new Point(100, 85) - points.Dcp = new Point(70, -220) - paths.curveA = new Path().move(points.A).curve(points.Acp, points.Bcp, points.B) - paths.curveB = new Path().move(points.C).curve(points.Ccp, points.Dcp, points.D) - - for (let p of utils.curvesIntersect( - points.A, - points.Acp, - points.Bcp, - points.B, - points.C, - points.Ccp, - points.Dcp, - points.D - )) { - snippets[part.getId()] = new Snippet('notch', p) - } - - return part -} diff --git a/designs/examples/src/utils_lineintersectscircle.js b/designs/examples/src/utils_lineintersectscircle.js deleted file mode 100644 index a40e8ae6322..00000000000 --- a/designs/examples/src/utils_lineintersectscircle.js +++ /dev/null @@ -1,45 +0,0 @@ -import { box } from './shared' - -export default (part) => { - let { 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.B = new Point(55, 50) - points.C = new Point(75, 30) - - points.D = new Point(55, 65) - points.E = new Point(115, 5) - points.F = new Point(65, 75) - points.G = new Point(125, 15) - - paths.line1 = new Path().move(points.B).line(points.C) - paths.line2 = new Path().move(points.D).line(points.E) - paths.line3 = new Path().move(points.F).line(points.G) - - let intersections1 = utils.lineIntersectsCircle( - points.A, - points.A.attributes.get('data-circle'), - points.B, - points.C - ) - let intersections2 = utils.lineIntersectsCircle( - points.A, - points.A.attributes.get('data-circle'), - points.D, - points.E, - 'y' - ) - let intersections3 = utils.lineIntersectsCircle( - points.A, - points.A.attributes.get('data-circle'), - points.F, - points.G - ) - snippets.first1 = new Snippet('bnotch', intersections1[0]) - snippets.first2 = new Snippet('bnotch', intersections2[0]) - snippets.second2 = new Snippet('notch', intersections2[1]) - snippets.first3 = new Snippet('bnotch', intersections3[0]) - snippets.second3 = new Snippet('notch', intersections3[1]) - - return box(part, 200, 80) -} diff --git a/designs/examples/src/utils_lineintersectscurve.js b/designs/examples/src/utils_lineintersectscurve.js deleted file mode 100644 index 9f099a08d56..00000000000 --- a/designs/examples/src/utils_lineintersectscurve.js +++ /dev/null @@ -1,25 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.A = new Point(10, 10) - points.Acp = new Point(310, 40) - points.B = new Point(110, 70) - points.Bcp = new Point(-210, 40) - points.E = new Point(20, -5) - points.D = new Point(100, 85) - paths.curve = new Path().move(points.A).curve(points.Acp, points.Bcp, points.B) - paths.line = new Path().move(points.E).line(points.D) - - for (let p of utils.lineIntersectsCurve( - points.D, - points.E, - points.A, - points.Acp, - points.Bcp, - points.B - )) { - snippets[part.getId()] = new Snippet('notch', p) - } - - return part -} diff --git a/designs/examples/src/utils_linesintersect.js b/designs/examples/src/utils_linesintersect.js deleted file mode 100644 index 308270a6759..00000000000 --- a/designs/examples/src/utils_linesintersect.js +++ /dev/null @@ -1,15 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.A = new Point(10, 10) - points.B = new Point(50, 40) - points.C = new Point(15, 30) - points.D = new Point(60, 15) - - paths.AB = new Path().move(points.A).line(points.B) - paths.CD = new Path().move(points.C).line(points.D) - - snippets.X = new Snippet('notch', utils.linesIntersect(points.A, points.B, points.C, points.D)) - - return part -} diff --git a/designs/examples/src/utils_pointonbeam.js b/designs/examples/src/utils_pointonbeam.js deleted file mode 100644 index 70d876c0859..00000000000 --- a/designs/examples/src/utils_pointonbeam.js +++ /dev/null @@ -1,33 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.from1 = new Point(10, 10) - points.to1 = new Point(90, 60) - points.from2 = new Point(10, 30) - points.to2 = new Point(90, 80) - points.b1 = new Point(170, 110) - points.b2 = new Point(170, 130) - - let scatter = [] - for (let i = 1; i < 36; i++) { - for (let j = 1; j < 27; j++) { - scatter.push(new Point(i * 10, j * 10)) - } - } - let snippet - for (let point of scatter) { - if (utils.pointOnBeam(points.from1, points.to1, point)) snippet = 'notch' - else snippet = 'bnotch' - snippets[part.getId()] = new Snippet(snippet, point) - if (utils.pointOnBeam(points.from2, points.to2, point, 0.01)) { - snippet = 'notch' - } else snippet = 'bnotch' - snippets[part.getId()] = new Snippet(snippet, point) - } - paths.line1 = new Path().move(points.from1).line(points.to1).attr('class', 'fabric stroke-lg') - paths.lne1 = new Path().move(points.to1).line(points.b1).attr('class', 'fabric dashed') - paths.line2 = new Path().move(points.from2).line(points.to2).attr('class', 'fabric stroke-lg') - paths.lne2 = new Path().move(points.to2).line(points.b2).attr('class', 'fabric dashed') - - return part -} diff --git a/designs/examples/src/utils_pointoncurve.js b/designs/examples/src/utils_pointoncurve.js deleted file mode 100644 index a05846e0d69..00000000000 --- a/designs/examples/src/utils_pointoncurve.js +++ /dev/null @@ -1,28 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.start = new Point(10, 10) - points.cp1 = new Point(90, 10) - points.cp2 = new Point(10, 60) - points.end = new Point(90, 60) - - let scatter = [] - for (let i = 1; i < 19; i++) { - for (let j = 1; j < 14; j++) { - scatter.push(new Point(i * 10, j * 10)) - } - } - let snippet - for (let point of scatter) { - if (utils.pointOnCurve(points.start, points.cp1, points.cp2, points.end, point)) { - snippet = 'notch' - } else snippet = 'bnotch' - snippets[part.getId()] = new Snippet(snippet, point) - } - paths.curve = new Path() - .move(points.start) - .curve(points.cp1, points.cp2, points.end) - .attr('class', 'fabric stroke-lg') - - return part -} diff --git a/designs/examples/src/utils_pointonline.js b/designs/examples/src/utils_pointonline.js deleted file mode 100644 index 03228b99b22..00000000000 --- a/designs/examples/src/utils_pointonline.js +++ /dev/null @@ -1,33 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, Snippet, snippets, utils } = part.shorthand() - - points.from1 = new Point(10, 10) - points.to1 = new Point(90, 60) - points.from2 = new Point(10, 30) - points.to2 = new Point(90, 80) - points.b1 = new Point(170, 110) - points.b2 = new Point(170, 130) - - let scatter = [] - for (let i = 1; i < 36; i++) { - for (let j = 1; j < 27; j++) { - scatter.push(new Point(i * 10, j * 10)) - } - } - let snippet - for (let point of scatter) { - if (utils.pointOnLine(points.from1, points.to1, point)) snippet = 'notch' - else snippet = 'bnotch' - snippets[part.getId()] = new Snippet(snippet, point) - if (utils.pointOnLine(points.from2, points.to2, point, 0.01)) { - snippet = 'notch' - } else snippet = 'bnotch' - snippets[part.getId()] = new Snippet(snippet, point) - } - paths.line1 = new Path().move(points.from1).line(points.to1).attr('class', 'fabric stroke-lg') - paths.lne1 = new Path().move(points.to1).line(points.b1).attr('class', 'fabric dashed') - paths.line2 = new Path().move(points.from2).line(points.to2).attr('class', 'fabric stroke-lg') - paths.lne2 = new Path().move(points.to2).line(points.b2).attr('class', 'fabric dashed') - - return part -} diff --git a/designs/examples/src/utils_splitcurve.js b/designs/examples/src/utils_splitcurve.js deleted file mode 100644 index 8a77ec7b2a4..00000000000 --- a/designs/examples/src/utils_splitcurve.js +++ /dev/null @@ -1,27 +0,0 @@ -export default (part) => { - let { Point, points, Path, paths, utils } = part.shorthand() - - 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') - - points.start = new Point(10, 15) - points.cp1 = new Point(80, 10) - points.cp2 = new Point(-50, 80) - points.end = new Point(110, 70) - - points.i40 = utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 40) - - let parts = utils.splitCurve(points.start, points.cp1, points.cp2, points.end, points.i40) - - let colors = ['lining', 'interfacing'] - for (let p of parts) { - let color = colors.pop() - paths[color] = new Path() - .move(p.start) - .curve(p.cp1, p.cp2, p.end) - .attr('class', 'stroke-xl ' + color) - } - - return part -}