chore(examples): Ported to v3
This commit is contained in:
Joost De Cock
parent
6abbf0240c
commit
fa14ad0fa3
100 changed files with 2858 additions and 2442 deletions
323
designs/examples/src/docs.mjs
Normal file
323
designs/examples/src/docs.mjs
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
328
designs/examples/src/index.mjs
Normal file
328
designs/examples/src/index.mjs
Normal file
|
|
@ -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
|
||||
}
|
||||
|
||||
736
designs/examples/src/path.mjs
Normal file
736
designs/examples/src/path.mjs
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
378
designs/examples/src/plugins.mjs
Normal file
378
designs/examples/src/plugins.mjs
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
436
designs/examples/src/point.mjs
Normal file
436
designs/examples/src/point.mjs
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
25
designs/examples/src/settings.mjs
Normal file
25
designs/examples/src/settings.mjs
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
46
designs/examples/src/snippet.mjs
Normal file
46
designs/examples/src/snippet.mjs
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
110
designs/examples/src/snippets.mjs
Normal file
110
designs/examples/src/snippets.mjs
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
476
designs/examples/src/utils.mjs
Normal file
476
designs/examples/src/utils.mjs
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue