chore(examples): Removed unused examples
This commit is contained in:
Joost De Cock
parent
82abdf2901
commit
8f86ce8c26
3 changed files with 2 additions and 1406 deletions
|
|
@ -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
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -3,120 +3,9 @@ import { pluginBundle } from '@freesewing/plugin-bundle'
|
||||||
import { gorePlugin } from '@freesewing/plugin-gore'
|
import { gorePlugin } from '@freesewing/plugin-gore'
|
||||||
import { data } from '../data.mjs'
|
import { data } from '../data.mjs'
|
||||||
|
|
||||||
// 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
|
// Snippet API
|
||||||
import { snippet, snippet_attr, snippet_clone } from './snippet.mjs'
|
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
|
// Stacks
|
||||||
import {
|
import {
|
||||||
stacks_top,
|
stacks_top,
|
||||||
|
|
@ -131,119 +20,10 @@ import {
|
||||||
// Settings
|
// Settings
|
||||||
import { settings_sa } from './settings.mjs'
|
import { settings_sa } from './settings.mjs'
|
||||||
|
|
||||||
// Docs illustrations
|
|
||||||
import { docs_coords, docs_overview } from './docs.mjs'
|
|
||||||
|
|
||||||
// Setup our new design
|
// Setup our new design
|
||||||
const Examples = new Design({
|
const Examples = new Design({
|
||||||
data,
|
data,
|
||||||
parts: [
|
parts: [
|
||||||
// Path API
|
|
||||||
path__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
|
||||||
stacks_top,
|
stacks_top,
|
||||||
stacks_left,
|
stacks_left,
|
||||||
|
|
@ -255,122 +35,12 @@ const Examples = new Design({
|
||||||
|
|
||||||
// Settings
|
// Settings
|
||||||
settings_sa,
|
settings_sa,
|
||||||
|
|
||||||
// Docs
|
|
||||||
docs_coords,
|
|
||||||
docs_overview,
|
|
||||||
],
|
],
|
||||||
plugins: [pluginBundle, gorePlugin],
|
plugins: [pluginBundle, gorePlugin],
|
||||||
})
|
})
|
||||||
|
|
||||||
// Named exports
|
// Named exports
|
||||||
export {
|
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
|
||||||
stacks_top,
|
stacks_top,
|
||||||
stacks_left,
|
stacks_left,
|
||||||
|
|
@ -380,8 +50,7 @@ export {
|
||||||
stacks_rightEye,
|
stacks_rightEye,
|
||||||
stacks_mouth,
|
stacks_mouth,
|
||||||
|
|
||||||
// Docs
|
// Settings
|
||||||
docs_coords,
|
settings_sa,
|
||||||
docs_overview,
|
|
||||||
Examples,
|
Examples,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
},
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue