323 lines
7.8 KiB
TypeScript
323 lines
7.8 KiB
TypeScript
import { v4 as uuid } from 'uuid'
|
|
import * as vec from 'utils/vec'
|
|
import * as svg from 'utils/svg'
|
|
import { ArrowShape, ShapeHandle, ShapeType } from 'types'
|
|
import { registerShapeUtils } from './index'
|
|
import { circleFromThreePoints, clamp, getSweep } from 'utils/utils'
|
|
import { boundsContained } from 'utils/bounds'
|
|
import { intersectCircleBounds } from 'utils/intersections'
|
|
import { getBoundsFromPoints, translateBounds } from 'utils/utils'
|
|
import { pointInCircle } from 'utils/hitTests'
|
|
|
|
const ctpCache = new WeakMap<ArrowShape['handles'], number[]>()
|
|
|
|
const arrow = registerShapeUtils<ArrowShape>({
|
|
boundsCache: new WeakMap([]),
|
|
|
|
create(props) {
|
|
const {
|
|
point = [0, 0],
|
|
points = [
|
|
[0, 0],
|
|
[0, 1],
|
|
],
|
|
handles = {
|
|
start: {
|
|
id: 'start',
|
|
index: 0,
|
|
point: [0, 0],
|
|
},
|
|
end: {
|
|
id: 'end',
|
|
index: 1,
|
|
point: [1, 1],
|
|
},
|
|
bend: {
|
|
id: 'bend',
|
|
index: 2,
|
|
point: [0.5, 0.5],
|
|
},
|
|
},
|
|
} = props
|
|
|
|
return {
|
|
id: uuid(),
|
|
type: ShapeType.Arrow,
|
|
isGenerated: false,
|
|
name: 'Arrow',
|
|
parentId: 'page0',
|
|
childIndex: 0,
|
|
point,
|
|
rotation: 0,
|
|
isAspectRatioLocked: false,
|
|
isLocked: false,
|
|
isHidden: false,
|
|
bend: 0,
|
|
points,
|
|
handles,
|
|
decorations: {
|
|
start: null,
|
|
end: null,
|
|
middle: null,
|
|
},
|
|
...props,
|
|
style: {
|
|
strokeWidth: 2,
|
|
...props.style,
|
|
fill: 'none',
|
|
},
|
|
}
|
|
},
|
|
|
|
render({ id, bend, points, handles, style }) {
|
|
const { start, end, bend: _bend } = handles
|
|
|
|
const arrowDist = vec.dist(start.point, end.point)
|
|
const bendDist = arrowDist * bend
|
|
|
|
const showCircle = Math.abs(bendDist) > 20
|
|
|
|
const v = vec.rot(
|
|
vec.mul(
|
|
vec.neg(vec.uni(vec.sub(points[1], points[0]))),
|
|
Math.min(arrowDist / 2, 16 + +style.strokeWidth * 2)
|
|
),
|
|
showCircle ? (bend * Math.PI) / 2 : 0
|
|
)
|
|
const b = vec.add(points[1], vec.rot(v, Math.PI / 6))
|
|
const c = vec.add(points[1], vec.rot(v, -(Math.PI / 6)))
|
|
|
|
if (showCircle && !ctpCache.has(handles)) {
|
|
ctpCache.set(
|
|
handles,
|
|
circleFromThreePoints(start.point, end.point, _bend.point)
|
|
)
|
|
}
|
|
|
|
const circle = showCircle && ctpCache.get(handles)
|
|
|
|
return (
|
|
<g id={id}>
|
|
{circle ? (
|
|
<path
|
|
d={[
|
|
'M',
|
|
start.point[0],
|
|
start.point[1],
|
|
'A',
|
|
circle[2],
|
|
circle[2],
|
|
0,
|
|
0,
|
|
bend < 0 ? 0 : 1,
|
|
end.point[0],
|
|
end.point[1],
|
|
].join(' ')}
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
/>
|
|
) : (
|
|
<polyline
|
|
points={[start.point, end.point].join(' ')}
|
|
strokeLinecap="round"
|
|
/>
|
|
)}
|
|
<circle
|
|
cx={start.point[0]}
|
|
cy={start.point[1]}
|
|
r={+style.strokeWidth}
|
|
fill={style.stroke}
|
|
/>
|
|
<polyline
|
|
points={[b, points[1], c].join()}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
fill="none"
|
|
/>
|
|
</g>
|
|
)
|
|
},
|
|
|
|
applyStyles(shape, style) {
|
|
Object.assign(shape.style, style)
|
|
return this
|
|
},
|
|
|
|
getBounds(shape) {
|
|
if (!this.boundsCache.has(shape)) {
|
|
this.boundsCache.set(shape, getBoundsFromPoints(shape.points))
|
|
}
|
|
|
|
return translateBounds(this.boundsCache.get(shape), shape.point)
|
|
},
|
|
|
|
getRotatedBounds(shape) {
|
|
return this.getBounds(shape)
|
|
},
|
|
|
|
getCenter(shape) {
|
|
const bounds = this.getBounds(shape)
|
|
return [bounds.minX + bounds.width / 2, bounds.minY + bounds.height / 2]
|
|
},
|
|
|
|
hitTest(shape, point) {
|
|
const { start, end, bend } = shape.handles
|
|
if (shape.bend === 0) {
|
|
return (
|
|
vec.distanceToLineSegment(
|
|
start.point,
|
|
end.point,
|
|
vec.sub(point, shape.point)
|
|
) < 4
|
|
)
|
|
}
|
|
|
|
if (!ctpCache.has(shape.handles)) {
|
|
ctpCache.set(
|
|
shape.handles,
|
|
circleFromThreePoints(start.point, end.point, bend.point)
|
|
)
|
|
}
|
|
|
|
const [cx, cy, r] = ctpCache.get(shape.handles)
|
|
|
|
return !pointInCircle(point, vec.add(shape.point, [cx, cy]), r - 4)
|
|
},
|
|
|
|
hitTestBounds(this, shape, brushBounds) {
|
|
const shapeBounds = this.getBounds(shape)
|
|
return (
|
|
boundsContained(shapeBounds, brushBounds) ||
|
|
intersectCircleBounds(shape.point, 4, brushBounds).length > 0
|
|
)
|
|
},
|
|
|
|
rotateTo(shape, rotation) {
|
|
// const rot = rotation - shape.rotation
|
|
// const center = this.getCenter(shape)
|
|
// shape.points = shape.points.map((pt) => vec.rotWith(pt, shape.point, rot))
|
|
shape.rotation = rotation
|
|
return this
|
|
},
|
|
|
|
translateTo(shape, point) {
|
|
shape.point = vec.toPrecision(point)
|
|
return this
|
|
},
|
|
|
|
transform(shape, bounds, { initialShape, scaleX, scaleY }) {
|
|
const initialShapeBounds = this.getBounds(initialShape)
|
|
|
|
// console.log([...shape.point], [bounds.minX, bounds.minY])
|
|
|
|
shape.point = [bounds.minX, bounds.minY]
|
|
|
|
shape.points = shape.points.map((_, i) => {
|
|
const [x, y] = initialShape.points[i]
|
|
let nw = x / initialShapeBounds.width
|
|
let nh = y / initialShapeBounds.height
|
|
|
|
if (i === 1) {
|
|
let [x0, y0] = initialShape.points[0]
|
|
if (x0 === x) nw = 1
|
|
if (y0 === y) nh = 1
|
|
}
|
|
|
|
return [
|
|
bounds.width * (scaleX < 0 ? 1 - nw : nw),
|
|
bounds.height * (scaleY < 0 ? 1 - nh : nh),
|
|
]
|
|
})
|
|
|
|
const { start, end, bend } = shape.handles
|
|
|
|
start.point = shape.points[0]
|
|
end.point = shape.points[1]
|
|
|
|
// start.point[0] = initialShape.handles.start.point[0] * scaleX
|
|
// end.point[0] = initialShape.handles.end.point[0] * scaleX
|
|
|
|
// start.point[1] = initialShape.handles.start.point[1] * scaleY
|
|
// end.point[1] = initialShape.handles.end.point[1] * scaleY
|
|
|
|
const bendDist = (vec.dist(start.point, end.point) / 2) * shape.bend
|
|
const midPoint = vec.med(start.point, end.point)
|
|
const u = vec.uni(vec.vec(start.point, end.point))
|
|
|
|
bend.point =
|
|
Math.abs(bendDist) > 10
|
|
? vec.add(midPoint, vec.mul(vec.per(u), bendDist))
|
|
: midPoint
|
|
|
|
shape.points = [shape.handles.start.point, shape.handles.end.point]
|
|
|
|
return this
|
|
},
|
|
|
|
transformSingle(shape, bounds, info) {
|
|
this.transform(shape, bounds, info)
|
|
return this
|
|
},
|
|
|
|
setProperty(shape, prop, value) {
|
|
shape[prop] = value
|
|
return this
|
|
},
|
|
|
|
onHandleMove(shape, handles) {
|
|
const { start, end, bend } = shape.handles
|
|
|
|
for (let id in handles) {
|
|
const handle = handles[id]
|
|
|
|
shape.handles[handle.id] = handle
|
|
|
|
if (handle.index < 2) {
|
|
shape.points[handle.index] = handle.point
|
|
}
|
|
|
|
const dist = vec.dist(start.point, end.point)
|
|
|
|
if (handle.id === 'bend') {
|
|
const distance = vec.distanceToLineSegment(
|
|
start.point,
|
|
end.point,
|
|
handle.point,
|
|
true
|
|
)
|
|
shape.bend = clamp(distance / (dist / 2), -1, 1)
|
|
if (!vec.clockwise(start.point, bend.point, end.point)) shape.bend *= -1
|
|
}
|
|
}
|
|
|
|
const dist = vec.dist(start.point, end.point)
|
|
const midPoint = vec.med(start.point, end.point)
|
|
const bendDist = (dist / 2) * shape.bend
|
|
const u = vec.uni(vec.vec(start.point, end.point))
|
|
|
|
bend.point =
|
|
Math.abs(bendDist) > 10
|
|
? vec.add(midPoint, vec.mul(vec.per(u), bendDist))
|
|
: midPoint
|
|
|
|
return this
|
|
},
|
|
|
|
canTransform: true,
|
|
canChangeAspectRatio: true,
|
|
})
|
|
|
|
export default arrow
|
|
|
|
function getArrowArcPath(
|
|
cx: number,
|
|
cy: number,
|
|
r: number,
|
|
start: number[],
|
|
end: number[]
|
|
) {
|
|
return `
|
|
A ${r},${r},0,
|
|
${getSweep([cx, cy], start, end) > 0 ? '1' : '0'},
|
|
0,${end[0]},${end[1]}`
|
|
}
|