tldraw/lib/shape-utils/line.tsx

119 lines
2.4 KiB
TypeScript
Raw Normal View History

2021-05-28 20:30:27 +00:00
import { v4 as uuid } from 'uuid'
import * as vec from 'utils/vec'
import { LineShape, ShapeType } from 'types'
import { registerShapeUtils } from './index'
import { boundsContained } from 'utils/bounds'
import { intersectCircleBounds } from 'utils/intersections'
import { DotCircle, ThinLine } from 'components/canvas/misc'
2021-05-28 20:30:27 +00:00
import { translateBounds } from 'utils/utils'
import styled from 'styles'
2021-05-14 12:44:23 +00:00
2021-05-20 09:49:40 +00:00
const line = registerShapeUtils<LineShape>({
2021-05-14 12:44:23 +00:00
boundsCache: new WeakMap([]),
create(props) {
return {
id: uuid(),
type: ShapeType.Line,
2021-05-15 13:02:13 +00:00
isGenerated: false,
2021-05-28 20:30:27 +00:00
name: 'Line',
parentId: 'page0',
2021-05-14 12:44:23 +00:00
childIndex: 0,
point: [0, 0],
2021-05-14 21:05:21 +00:00
direction: [0, 0],
2021-05-14 12:44:23 +00:00
rotation: 0,
isAspectRatioLocked: false,
isLocked: false,
isHidden: false,
2021-05-15 17:11:08 +00:00
style: {
2021-05-28 20:30:27 +00:00
fill: '#c6cacb',
stroke: '#000',
2021-05-15 17:11:08 +00:00
},
2021-05-14 12:44:23 +00:00
...props,
}
},
2021-05-14 21:05:21 +00:00
render({ id, direction }) {
const [x1, y1] = vec.add([0, 0], vec.mul(direction, 10000))
const [x2, y2] = vec.sub([0, 0], vec.mul(direction, 10000))
2021-05-14 21:05:21 +00:00
return (
<g id={id}>
<ThinLine x1={x1} y1={y1} x2={x2} y2={y2} />
<DotCircle cx={0} cy={0} r={3} />
2021-05-14 21:05:21 +00:00
</g>
)
2021-05-14 12:44:23 +00:00
},
2021-05-26 10:34:10 +00:00
applyStyles(shape, style) {
Object.assign(shape.style, style)
return this
},
2021-05-14 12:44:23 +00:00
getBounds(shape) {
2021-05-18 08:32:20 +00:00
if (!this.boundsCache.has(shape)) {
const bounds = {
minX: 0,
maxX: 1,
minY: 0,
maxY: 1,
width: 1,
height: 1,
}
this.boundsCache.set(shape, bounds)
2021-05-14 12:44:23 +00:00
}
2021-05-18 08:32:20 +00:00
return translateBounds(this.boundsCache.get(shape), shape.point)
},
2021-05-14 12:44:23 +00:00
2021-05-18 08:32:20 +00:00
getRotatedBounds(shape) {
return this.getBounds(shape)
2021-05-14 12:44:23 +00:00
},
2021-05-17 21:27:18 +00:00
getCenter(shape) {
return shape.point
},
2021-05-14 12:44:23 +00:00
hitTest(shape, test) {
2021-05-14 22:56:41 +00:00
return true
2021-05-14 12:44:23 +00:00
},
hitTestBounds(this, shape, brushBounds) {
2021-05-15 13:02:13 +00:00
const shapeBounds = this.getBounds(shape)
return (
boundsContained(shapeBounds, brushBounds) ||
intersectCircleBounds(shape.point, 4, brushBounds).length > 0
)
2021-05-14 12:44:23 +00:00
},
2021-05-25 11:38:21 +00:00
rotateTo(shape) {
return this
2021-05-14 12:44:23 +00:00
},
2021-05-25 11:38:21 +00:00
translateTo(shape, point) {
2021-05-28 20:30:27 +00:00
shape.point = vec.toPrecision(point)
return this
2021-05-14 12:44:23 +00:00
},
transform(shape, bounds) {
2021-05-14 21:05:21 +00:00
shape.point = [bounds.minX, bounds.minY]
return this
2021-05-14 12:44:23 +00:00
},
2021-05-15 13:02:13 +00:00
2021-05-19 09:35:00 +00:00
transformSingle(shape, bounds, info) {
return this.transform(shape, bounds, info)
},
setProperty(shape, prop, value) {
shape[prop] = value
return this
},
2021-05-15 13:02:13 +00:00
canTransform: false,
2021-05-23 13:46:04 +00:00
canChangeAspectRatio: false,
2021-05-14 12:44:23 +00:00
})
export default line