From 8f86ce8c2665c9a7f4182e0f5a46df69f860b6ee Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Wed, 12 Oct 2022 15:00:08 +0200 Subject: [PATCH] chore(examples): Removed unused examples --- designs/examples/src/docs.mjs | 321 -------------- designs/examples/src/index.mjs | 335 +-------------- designs/examples/src/path.mjs | 752 --------------------------------- 3 files changed, 2 insertions(+), 1406 deletions(-) delete mode 100644 designs/examples/src/docs.mjs delete mode 100644 designs/examples/src/path.mjs diff --git a/designs/examples/src/docs.mjs b/designs/examples/src/docs.mjs deleted file mode 100644 index e00000a3d42..00000000000 --- a/designs/examples/src/docs.mjs +++ /dev/null @@ -1,321 +0,0 @@ -import { box } from './shared.mjs' - -export const docs_coords = { - name: 'examples.box_coords', - draft: ({ Point, points, paths, Path, part }) => { - 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: ({ Point, points, Path, paths, options, part }) => { - /** - * 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.mjs b/designs/examples/src/index.mjs index 73e2d676f09..cb9b238c809 100644 --- a/designs/examples/src/index.mjs +++ b/designs/examples/src/index.mjs @@ -3,120 +3,9 @@ import { pluginBundle } from '@freesewing/plugin-bundle' import { gorePlugin } from '@freesewing/plugin-gore' import { data } from '../data.mjs' -// Path API -import { - path__curve, - path_addclass, - path_addtext, - 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_smurve, - path_smurve_, - path_split, - path_start, - path_translate, - path_trim, -} from './path.mjs' - -// Point API -import { - point_addcircle, - point_addtext, - point_angle, - point_attr, - point_clone, - point_copy, - point_dist, - point_dx, - point_dy, - point_flipx, - point_flipy, - point_setcircle, - point_settext, - 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' - // Stacks import { stacks_top, @@ -131,119 +20,10 @@ import { // 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({ data, parts: [ - // Path API - path__curve, - path_addclass, - path_addtext, - 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_smurve, - path_smurve_, - path_split, - path_start, - path_translate, - path_trim, - - // Point API - point_addcircle, - point_addtext, - point_angle, - point_attr, - point_clone, - point_copy, - point_dist, - point_dx, - point_dy, - point_flipx, - point_flipy, - point_setcircle, - point_settext, - 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, - // Stacks stacks_top, stacks_left, @@ -255,122 +35,12 @@ const Examples = new Design({ // Settings settings_sa, - - // Docs - docs_coords, - docs_overview, ], plugins: [pluginBundle, gorePlugin], }) // Named exports export { - // Path API - path__curve, - path_addclass, - path_addtext, - 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_smurve, - path_smurve_, - path_split, - path_start, - path_translate, - path_trim, - - // Point API - point_addcircle, - point_addtext, - point_angle, - point_attr, - point_clone, - point_copy, - point_dist, - point_dx, - point_dy, - point_flipx, - point_flipy, - point_setcircle, - point_settext, - 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, - // Stacks stacks_top, stacks_left, @@ -380,8 +50,7 @@ export { stacks_rightEye, stacks_mouth, - // Docs - docs_coords, - docs_overview, + // Settings + settings_sa, Examples, } diff --git a/designs/examples/src/path.mjs b/designs/examples/src/path.mjs deleted file mode 100644 index d3ce4366009..00000000000 --- a/designs/examples/src/path.mjs +++ /dev/null @@ -1,752 +0,0 @@ -import { box } from './shared.mjs' - -export const path__curve = { - name: 'examples.path__curve', - draft: ({ Point, points, Path, paths, part }) => { - 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_addclass = { - name: 'examples.path_addclass', - draft: ({ Point, points, Path, paths, part }) => { - points.from = new Point(5, 10) - points.to = new Point(95, 10) - - paths.line = new Path().move(points.from).line(points.to).addClass('note dashed') - - return box(part, 100, 20) - }, -} - -export const path_addtext = { - name: 'examples.path_addtext', - draft: ({ Point, points, Path, paths, part }) => { - points.from = new Point(5, 10) - points.to = new Point(95, 10) - - paths.line = new Path().move(points.from).line(points.to).addText('FreeSewing rocks') - - return box(part, 100, 20) - }, -} - -export const path_attr = { - name: 'examples.path_attr', - draft: ({ Point, points, Path, paths, part }) => { - 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: ({ Point, points, Path, paths, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.example = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - - paths.clone = paths.example - .clone() - .setClass('note lashed stroke-xl') - .attr('style', 'stroke-opacity: 0.5') - - return part - }, -} - -export const path_close = { - name: 'examples.path_close', - draft: ({ Point, points, Path, paths, part }) => { - 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 - .setText('Path._close()', 'text-sm right fill-note') - - return box(part, 100, 25) - }, -} - -export const path_curve = { - name: 'examples.path_curve', - draft: ({ Point, points, Path, paths, part }) => { - 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) - .setText('Path.curve()', 'text-sm center fill-note') - - return box(part, 100, 25) - }, -} - -export const path_curve_ = { - name: 'examples.path_curve_', - draft: ({ Point, points, Path, paths, part }) => { - 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: ({ Point, points, Path, paths, part }) => { - 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: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - 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: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.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: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - 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: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(95, 50) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - 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: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(55, 40) - points.B = new Point(10, 70) - points.BCp2 = new Point(40, 20) - 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: ({ Point, points, Path, paths, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.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: ({ Point, points, Path, paths, macro, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.example = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - - 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: ({ Point, points, Path, paths, part }) => { - 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: ({ Point, points, Path, paths, part }) => { - 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: ({ Point, points, Path, paths, part }) => { - points.left = new Point(10, 10) - points.dartLeft = new Point(40, 10) - points.dartTip = new Point(50, 50) - points.dartRight = new Point(60, 10) - 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: ({ Point, points, Path, paths, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.example = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - .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: ({ Point, points, Path, paths, options, part }) => { - 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: ({ Point, points, Path, paths, part }) => { - 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: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.example = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - - 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: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.example = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - - 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_smurve = { - name: 'examples.path_smurve', - draft: ({ Point, points, Path, paths, part }) => { - points.from = new Point(10, 20) - points.cp1 = new Point(40, 10) - points.cp2 = new Point(60, 30) - points.to = new Point(90, 20) - points.scp2 = new Point(140, 30) - points.sto = new Point(170, 20) - - paths.line = new Path() - .move(points.from) - .curve(points.cp1, points.cp2, points.to) - .smurve(points.scp2, points.sto) - .attr('data-text', 'Path.smurve()') - .attr('data-text-class', 'text-sm center fill-note') - - return box(part, 180, 40) - }, -} - -export const path_smurve_ = { - name: 'examples.path_smurve_', - draft: ({ Point, points, Path, paths, part }) => { - points.from = new Point(10, 20) - points.cp1 = new Point(40, 10) - points.cp2 = new Point(60, 30) - points.to = new Point(90, 20) - points.sto = new Point(170, 20) - - paths.line = new Path() - .move(points.from) - .curve(points.cp1, points.cp2, points.to) - .smurve_(points.sto) - .attr('data-text', 'Path.smurve_()') - .attr('data-text-class', 'text-sm center fill-note') - - return box(part, 180, 40) - }, -} - -export const path_split = { - name: 'examples.path_split', - draft: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - 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: ({ Point, points, Path, paths, Snippet, snippets, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.example = new Path() - .move(points.A) - .line(points.B) - .curve(points.BCp2, points.CCp1, points.C) - - snippets.start = new Snippet('notch', paths.example.start()) - return part - }, -} - -export const path_translate = { - name: 'examples.path_translate', - draft: ({ Point, points, Path, paths, macro, part }) => { - points.A = new Point(45, 60) - points.B = new Point(10, 30) - points.BCp2 = new Point(40, 20) - points.C = new Point(90, 30) - points.CCp1 = new Point(50, -30) - - paths.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: ({ Point, points, Path, paths, part }) => { - 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 - }, -}