Improves behavior with locked shapes

hooks/useZoomEvents.ts

@@ -20,10 +20,6 @@ export default function useZoomEvents() {
         if (event.ctrlKey) {
           const { point } = inputs.wheel(event as WheelEvent)
           fastZoomUpdate(point, delta[1])
-          // state.send('ZOOMED_CAMERA', {
-          //   delta: delta[1],
-          //   ...inputs.wheel(event as WheelEvent),
-          // })
           return
         }
 
@@ -60,13 +56,6 @@ export default function useZoomEvents() {
           angleDelta
         )
 
-        // state.send('PINCHED', {
-        //   delta: vec.sub(rPinchPoint.current, origin),
-        //   point: origin,
-        //   distanceDelta,
-        //   angleDelta,
-        // })
-
         rPinchDa.current = da
         rPinchPoint.current = origin
       },

lib/shape-utils/arrow.tsx

@@ -1,7 +1,6 @@
 import { uniqueId } from 'utils/utils'
 import vec from 'utils/vec'
 import {
-  ease,
   getSvgPathFromStroke,
   rng,
   getBoundsFromPoints,
@@ -151,18 +150,7 @@ const arrow = registerShapeUtils<ArrowShape>({
       body = <path d={path} />
     }
 
-    return (
-      <g id={id}>
-        {body}
-        {/* <circle
-          cx={start.point[0]}
-          cy={start.point[1]}
-          r={Math.max(4, +style.strokeWidth)}
-          fill={style.stroke}
-          strokeDasharray="none"
-        /> */}
-      </g>
-    )
+    return <g id={id}>{body}</g>
   },
 
   rotateBy(shape, delta) {
@@ -379,7 +367,7 @@ function getBendPoint(shape: ArrowShape) {
 
   const dist = vec.dist(start.point, end.point)
   const midPoint = vec.med(start.point, end.point)
-  const bendDist = (dist / 2) * shape.bend * Math.min(1, dist / 128)
+  const bendDist = (dist / 2) * shape.bend
   const u = vec.uni(vec.vec(start.point, end.point))
 
   return Math.abs(bendDist) < 10
@@ -430,10 +418,9 @@ function getResizeOffset(a: Bounds, b: Bounds) {
 
 function renderPath(shape: ArrowShape, endAngle = 0) {
   const { style, id } = shape
-  const { start, end, bend } = shape.handles
+  const { start, end } = shape.handles
 
   const getRandom = rng(id)
-  const offsetA = getRandom()
 
   const strokeWidth = +getShapeStyle(style).strokeWidth * 2
 

state/commands/delete-selected.ts

@@ -5,7 +5,9 @@ import { Data, ShapeType } from 'types'
 import {
   getDocumentBranch,
   getPage,
+  getPageState,
   getSelectedIds,
+  getSelectedShapes,
   setSelectedIds,
   setToArray,
   updateParents,
@@ -16,8 +18,11 @@ import { getShapeUtils } from 'lib/shape-utils'
 export default function deleteSelected(data: Data) {
   const { currentPageId } = data
 
-  const selectedIds = getSelectedIds(data)
-  const selectedIdsArr = setToArray(selectedIds)
+  const selectedShapes = getSelectedShapes(data)
+
+  const selectedIdsArr = selectedShapes
+    .filter((shape) => !shape.isLocked)
+    .map((shape) => shape.id)
 
   const page = getPage(current(data))
 
@@ -25,7 +30,9 @@ export default function deleteSelected(data: Data) {
     .flatMap((id) => getDocumentBranch(data, id))
     .map((id) => page.shapes[id])
 
-  selectedIds.clear()
+  const remainingIds = selectedShapes
+    .filter((shape) => shape.isLocked)
+    .map((shape) => shape.id)
 
   history.execute(
     data,
@@ -62,7 +69,7 @@ export default function deleteSelected(data: Data) {
           delete page.shapes[shape.id]
         }
 
-        setSelectedIds(data, [])
+        setSelectedIds(data, remainingIds)
       },
       undo(data) {
         const page = getPage(data, currentPageId)

state/commands/distribute.ts

@@ -12,7 +12,9 @@ import { getShapeUtils } from 'lib/shape-utils'
 export default function distributeCommand(data: Data, type: DistributeType) {
   const { currentPageId } = data
 
-  const selectedShapes = getSelectedShapes(data)
+  const selectedShapes = getSelectedShapes(data).filter(
+    (shape) => !shape.isLocked
+  )
 
   const entries = selectedShapes.map(
     (shape) => [shape.id, getShapeUtils(shape).getBounds(shape)] as const

state/commands/edit.ts

@@ -15,7 +15,7 @@ export default function handleCommand(
     new Command({
       name: 'edited_shape',
       category: 'canvas',
-      do(data, isInitial) {
+      do(data) {
         const { initialShape, currentPageId } = after
 
         const page = getPage(data, currentPageId)

state/commands/reset-bounds.ts

@@ -17,6 +17,7 @@ export default function resetBoundsCommand(data: Data) {
       category: 'canvas',
       do(data) {
         getSelectedShapes(data).forEach((shape) => {
+          if (shape.isLocked) return
           getShapeUtils(shape).onBoundsReset(shape)
         })
 
@@ -25,6 +26,7 @@ export default function resetBoundsCommand(data: Data) {
       undo(data) {
         const page = getPage(data)
         getSelectedShapes(data).forEach((shape) => {
+          if (shape.isLocked) return
           page.shapes[shape.id] = initialShapes[shape.id]
         })
 

state/commands/rotate-ccw.ts

@@ -67,6 +67,7 @@ export default function rotateCcwCommand(data: Data) {
 
         for (let id in nextShapes) {
           const shape = shapes[id]
+          if (shape.isLocked) continue
 
           getShapeUtils(shape)
             .setProperty(shape, 'rotation', nextShapes[id].rotation)
@@ -82,6 +83,9 @@ export default function rotateCcwCommand(data: Data) {
           const { point, rotation } = initialShapes[id]
 
           const shape = shapes[id]
+
+          if (shape.isLocked) continue
+
           const utils = getShapeUtils(shape)
           utils
             .setProperty(shape, 'rotation', rotation)

state/commands/toggle.ts

@@ -19,7 +19,7 @@ export default function toggleCommand(
   history.execute(
     data,
     new Command({
-      name: 'hide_shapes',
+      name: 'toggle_shape_prop',
       category: 'canvas',
       do(data) {
         const { shapes } = getPage(data, currentPageId)

state/state.ts

@@ -911,7 +911,7 @@ const state = createState({
       return data.isReadOnly
     },
     canEditSelectedShape(data, payload, result: Shape) {
-      return getShapeUtils(result).canEdit
+      return getShapeUtils(result).canEdit && !result.isLocked
     },
     distanceImpliesDrag(data, payload: PointerInfo) {
       return vec.dist2(payload.origin, payload.point) > 8