Starts implementing locked shapes

components/canvas/bounds/bounding-box.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Edge, Corner } from 'types'
 import { useSelector } from 'state'
-import { getSelectedShapes, isMobile } from 'utils/utils'
+import { getPage, getSelectedShapes, isMobile } from 'utils/utils'
 
 import CenterHandle from './center-handle'
 import CornerHandle from './corner-handle'
@@ -13,10 +13,18 @@ export default function Bounds() {
   const isSelecting = useSelector((s) => s.isIn('selecting'))
   const zoom = useSelector((s) => s.data.camera.zoom)
   const bounds = useSelector((s) => s.values.selectedBounds)
+
   const rotation = useSelector(({ data }) =>
     data.selectedIds.size === 1 ? getSelectedShapes(data)[0].rotation : 0
   )
 
+  const isAllLocked = useSelector((s) => {
+    const page = getPage(s.data)
+    return Array.from(s.data.selectedIds.values()).every(
+      (id) => page.shapes[id].isLocked
+    )
+  })
+
   if (!bounds) return null
   if (!isSelecting) return null
 
@@ -31,16 +39,28 @@ export default function Bounds() {
         ${(bounds.minY + bounds.maxY) / 2})
         translate(${bounds.minX},${bounds.minY})`}
     >
-      <CenterHandle bounds={bounds} />
-      <EdgeHandle size={size} bounds={bounds} edge={Edge.Top} />
-      <EdgeHandle size={size} bounds={bounds} edge={Edge.Right} />
-      <EdgeHandle size={size} bounds={bounds} edge={Edge.Bottom} />
-      <EdgeHandle size={size} bounds={bounds} edge={Edge.Left} />
-      <CornerHandle size={size} bounds={bounds} corner={Corner.TopLeft} />
-      <CornerHandle size={size} bounds={bounds} corner={Corner.TopRight} />
-      <CornerHandle size={size} bounds={bounds} corner={Corner.BottomRight} />
-      <CornerHandle size={size} bounds={bounds} corner={Corner.BottomLeft} />
-      <RotateHandle size={size} bounds={bounds} />
+      <CenterHandle bounds={bounds} isLocked={isAllLocked} />
+      {!isAllLocked && (
+        <>
+          <EdgeHandle size={size} bounds={bounds} edge={Edge.Top} />
+          <EdgeHandle size={size} bounds={bounds} edge={Edge.Right} />
+          <EdgeHandle size={size} bounds={bounds} edge={Edge.Bottom} />
+          <EdgeHandle size={size} bounds={bounds} edge={Edge.Left} />
+          <CornerHandle size={size} bounds={bounds} corner={Corner.TopLeft} />
+          <CornerHandle size={size} bounds={bounds} corner={Corner.TopRight} />
+          <CornerHandle
+            size={size}
+            bounds={bounds}
+            corner={Corner.BottomRight}
+          />
+          <CornerHandle
+            size={size}
+            bounds={bounds}
+            corner={Corner.BottomLeft}
+          />
+          <RotateHandle size={size} bounds={bounds} />
+        </>
+      )}
     </g>
   )
 }

components/canvas/bounds/center-handle.tsx

@@ -1,18 +1,34 @@
-import styled from "styles"
-import { Bounds } from "types"
+import styled from 'styles'
+import { Bounds } from 'types'
 
-export default function CenterHandle({ bounds }: { bounds: Bounds }) {
+export default function CenterHandle({
+  bounds,
+  isLocked,
+}: {
+  bounds: Bounds
+  isLocked: boolean
+}) {
   return (
     <StyledBounds
       width={bounds.width}
       height={bounds.height}
       pointerEvents="none"
+      isLocked={isLocked}
     />
   )
 }
 
-const StyledBounds = styled("rect", {
-  fill: "none",
-  stroke: "$bounds",
+const StyledBounds = styled('rect', {
+  fill: 'none',
+  stroke: '$bounds',
   zStrokeWidth: 2,
+
+  variants: {
+    isLocked: {
+      true: {
+        zStrokeWidth: 1,
+        zDash: 2,
+      },
+    },
+  },
 })

components/canvas/selected.tsx

@@ -43,6 +43,7 @@ export function ShapeOutline({ id }: { id: string }) {
       as="use"
       href={'#' + id}
       transform={transform}
+      isLocked={shape.isLocked}
       {...events}
     />
   )
@@ -55,4 +56,13 @@ const Indicator = styled('path', {
   stroke: '$selected',
   fill: 'transparent',
   pointerEvents: 'all',
+
+  variants: {
+    isLocked: {
+      true: {
+        zDash: 2,
+      },
+      false: {},
+    },
+  },
 })