improves touch events when drawing

This commit is contained in:
Steve Ruiz 2021-05-30 14:20:25 +01:00
parent 76a4ccdfcb
commit 2af0d7b3a7
3 changed files with 13 additions and 8 deletions

View file

@ -18,10 +18,10 @@ export default function Page() {
const isSelecting = useSelector((s) => s.isIn('selecting'))
return (
<>
<g pointerEvents={isSelecting ? 'all' : 'none'}>
{currentPageShapeIds.map((shapeId) => (
<Shape key={shapeId} id={shapeId} isSelecting={isSelecting} />
))}
</>
</g>
)
}

View file

@ -33,9 +33,10 @@ export function ShapeOutline({ id }: { id: string }) {
if (!shape) return null
const transform = `
rotate(${shape.rotation * (180 / Math.PI)},
${getShapeUtils(shape).getCenter(shape)})
translate(${shape.point})`
rotate(${shape.rotation * (180 / Math.PI)},
${getShapeUtils(shape).getCenter(shape)})
translate(${shape.point})
`
return (
<Indicator

View file

@ -8,7 +8,6 @@ import getStroke from 'perfect-freehand'
import {
getBoundsCenter,
getBoundsFromPoints,
getRotatedCorners,
getSvgPathFromStroke,
translateBounds,
} from 'utils/utils'
@ -27,7 +26,7 @@ const draw = registerShapeUtils<DrawShape>({
parentId: 'page0',
childIndex: 0,
point: [0, 0],
points: [[0, 0]],
points: [],
rotation: 0,
isAspectRatioLocked: false,
isLocked: false,
@ -50,7 +49,12 @@ const draw = registerShapeUtils<DrawShape>({
pathCache.set(
points,
getSvgPathFromStroke(
getStroke(points, { size: +style.strokeWidth * 2, thinning: 0.9 })
getStroke(points, {
size: +style.strokeWidth * 2,
thinning: 0.9,
end: { taper: 100 },
start: { taper: 100 },
})
)
)
}