Adds zoom controls

components/canvas/shape.tsx

@@ -43,39 +43,32 @@ function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
           strokeWidth={+shape.style.strokeWidth + 8}
         />
       )}
-      <StyledShape id={id} style={shape.style} />
-      {/* 
-      <text
-        y={4}
-        x={4}
-        fontSize={18}
-        fill="black"
-        stroke="none"
-        alignmentBaseline="text-before-edge"
-        pointerEvents="none"
-      >
-        {center.toString()}
-      </text> */}
+      {!shape.isHidden && <StyledShape id={id} style={shape.style} />}
     </StyledGroup>
   )
 }
 
 const StyledShape = memo(
   ({ id, style }: { id: string; style: ShapeStyles }) => {
-    return (
-      <MainShape
-        as="use"
-        href={'#' + id}
-        {...style}
-        // css={{ zStrokeWidth: Number(style.strokeWidth) }}
-      />
-    )
+    return <use href={'#' + id} {...style} />
   }
 )
 
-const MainShape = styled('use', {
-  // zStrokeWidth: 1,
-})
+function Label({ text }: { text: string }) {
+  return (
+    <text
+      y={4}
+      x={4}
+      fontSize={18}
+      fill="black"
+      stroke="none"
+      alignmentBaseline="text-before-edge"
+      pointerEvents="none"
+    >
+      {text}
+    </text>
+  )
+}
 
 const HoverIndicator = styled('path', {
   fill: 'none',

components/style-panel/color-picker.tsx

@@ -29,10 +29,7 @@ export default function ColorPicker({ label, color, colors, onChange }: Props) {
 
 function ColorIcon({ color }: { color: string }) {
   return (
-    <Square
-      fill={color}
-      strokeDasharray={color === 'transparent' ? '2, 3' : 'none'}
-    />
+    <Square fill={color} strokeDasharray={color === 'none' ? '2, 3' : 'none'} />
   )
 }
 

components/style-panel/style-panel.tsx

@@ -145,12 +145,6 @@ function SelectedShapeStyles({}: {}) {
           >
             <RotateCounterClockwiseIcon />
           </IconButton>
-          <IconButton
-            disabled={!hasSelection}
-            onClick={() => state.send('DELETED')}
-          >
-            <TrashIcon />
-          </IconButton>
           <IconButton
             disabled={!hasSelection}
             onClick={() => state.send('TOGGLED_SHAPE_HIDE')}
@@ -169,6 +163,12 @@ function SelectedShapeStyles({}: {}) {
           >
             {isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
           </IconButton>
+          <IconButton
+            disabled={!hasSelection}
+            onClick={() => state.send('DELETED')}
+          >
+            <TrashIcon />
+          </IconButton>
         </ButtonsRow>
       </Content>
     </Panel.Layout>

components/tools-panel/tools-panel.tsx

@@ -16,6 +16,7 @@ import React from 'react'
 import state, { useSelector } from 'state'
 import styled from 'styles'
 import { ShapeType } from 'types'
+import Zoom from './zoom'
 
 const selectSelectTool = () => state.send('SELECTED_SELECT_TOOL')
 const selectDrawTool = () => state.send('SELECTED_DRAW_TOOL')
@@ -49,6 +50,7 @@ export default function ToolsPanel() {
 
   return (
     <OuterContainer>
+      <Zoom />
       <Container>
         <IconButton
           name="select"
@@ -131,7 +133,10 @@ export default function ToolsPanel() {
   )
 }
 
+const Spacer = styled('div', { flexGrow: 2 })
+
 const OuterContainer = styled('div', {
+  position: 'relative',
   gridArea: 'tools',
   padding: '0 8px 12px 8px',
   height: '100%',

components/tools-panel/zoom.tsx

@@ -0,0 +1,59 @@
+import { ZoomInIcon, ZoomOutIcon } from '@radix-ui/react-icons'
+import { IconButton } from 'components/shared'
+import state, { useSelector } from 'state'
+import styled from 'styles'
+
+const zoomIn = () => state.send('ZOOMED_IN')
+const zoomOut = () => state.send('ZOOMED_OUT')
+const zoomToFit = () => state.send('ZOOMED_TO_FIT')
+const zoomToActual = () => state.send('ZOOMED_TO_ACTUAL')
+
+export default function Zoom() {
+  return (
+    <Container>
+      <IconButton onClick={zoomOut}>
+        <ZoomOutIcon />
+      </IconButton>
+      <IconButton onClick={zoomIn}>
+        <ZoomInIcon />
+      </IconButton>
+      <ZoomCounter />
+    </Container>
+  )
+}
+
+function ZoomCounter() {
+  const camera = useSelector((s) => s.data.camera)
+  return (
+    <ZoomButton onClick={zoomToActual} onDoubleClick={zoomToFit}>
+      {Math.round(camera.zoom * 100)}%
+    </ZoomButton>
+  )
+}
+
+const Container = styled('div', {
+  position: 'absolute',
+  bottom: 12,
+  left: 12,
+  backgroundColor: '$panel',
+  borderRadius: '4px',
+  overflow: 'hidden',
+  alignSelf: 'flex-end',
+  border: '1px solid $border',
+  pointerEvents: 'all',
+  userSelect: 'none',
+  zIndex: 200,
+  boxShadow: '0px 2px 12px rgba(0,0,0,.08)',
+  display: 'flex',
+  padding: 4,
+
+  '& svg': {
+    strokeWidth: 0,
+  },
+})
+
+const ZoomButton = styled(IconButton, {
+  fontSize: '$0',
+  padding: 8,
+  width: 44,
+})

hooks/useKeyboardEvents.ts

@@ -27,6 +27,18 @@ export default function useKeyboardEvents() {
           state.send('NUDGED', { delta: [-1, 0], ...getKeyboardEventInfo(e) })
           break
         }
+        case '=': {
+          if (e.metaKey) {
+            state.send('ZOOMED_IN')
+          }
+          break
+        }
+        case '-': {
+          if (e.metaKey) {
+            state.send('ZOOMED_OUT')
+          }
+          break
+        }
         case '!': {
           // Shift + 1
           if (e.shiftKey) {

lib/shape-utils/draw.tsx

@@ -12,7 +12,7 @@ import {
   translateBounds,
 } from 'utils/utils'
 
-const pathCache = new WeakMap<DrawShape, string>([])
+const pathCache = new WeakMap<DrawShape['points'], string>([])
 
 const draw = registerShapeUtils<DrawShape>({
   boundsCache: new WeakMap([]),
@@ -45,25 +45,20 @@ const draw = registerShapeUtils<DrawShape>({
   render(shape) {
     const { id, points, style } = shape
 
-    if (!pathCache.has(shape)) {
-      if (points.length < 2) {
-        const left = [+style.strokeWidth, 0]
-        let d: number[][] = []
-        for (let i = 0; i < 10; i++) {
-          d.push(vec.rotWith(left, [0, 0], i * ((Math.PI * 2) / 8)))
-        }
-        pathCache.set(shape, getSvgPathFromStroke(d))
-      } else {
-        pathCache.set(
-          shape,
-          getSvgPathFromStroke(
-            getStroke(points, { size: +style.strokeWidth * 2, thinning: 0.9 })
-          )
+    if (!pathCache.has(points)) {
+      pathCache.set(
+        points,
+        getSvgPathFromStroke(
+          getStroke(points, { size: +style.strokeWidth * 2, thinning: 0.9 })
         )
-      }
+      )
+    }
+
+    if (points.length < 2) {
+      return <circle id={id} r={+style.strokeWidth * 0.618} />
     }
 
-    return <path id={id} d={pathCache.get(shape)} />
+    return <path id={id} d={pathCache.get(points)} />
   },
 
   applyStyles(shape, style) {

lib/shape-utils/ellipse.tsx

@@ -124,6 +124,8 @@ const ellipse = registerShapeUtils<EllipseShape>({
   },
 
   transform(shape, bounds, { scaleX, scaleY, initialShape }) {
+    // TODO: Locked aspect ratio transform
+
     shape.point = [bounds.minX, bounds.minY]
     shape.radiusX = bounds.width / 2
     shape.radiusY = bounds.height / 2

lib/shape-utils/rectangle.tsx

@@ -110,7 +110,7 @@ const rectangle = registerShapeUtils<RectangleShape>({
   },
 
   transform(shape, bounds, { initialShape, transformOrigin, scaleX, scaleY }) {
-    if (shape.rotation === 0) {
+    if (shape.rotation === 0 && !shape.isAspectRatioLocked) {
       shape.size = [bounds.width, bounds.height]
       shape.point = [bounds.minX, bounds.minY]
     } else {

state/commands/move.ts

@@ -1,8 +1,8 @@
-import Command from "./command"
-import history from "../history"
-import { Data, MoveType, Shape } from "types"
-import { forceIntegerChildIndices, getChildren, getPage } from "utils/utils"
-import { getShapeUtils } from "lib/shape-utils"
+import Command from './command'
+import history from '../history'
+import { Data, MoveType, Shape } from 'types'
+import { forceIntegerChildIndices, getChildren, getPage } from 'utils/utils'
+import { getShapeUtils } from 'lib/shape-utils'
 
 export default function moveCommand(data: Data, type: MoveType) {
   const { currentPageId } = data
@@ -18,8 +18,8 @@ export default function moveCommand(data: Data, type: MoveType) {
   history.execute(
     data,
     new Command({
-      name: "move_shapes",
-      category: "canvas",
+      name: 'move_shapes',
+      category: 'canvas',
       manualSelection: true,
       do(data) {
         const page = getPage(data, currentPageId)
@@ -77,7 +77,11 @@ export default function moveCommand(data: Data, type: MoveType) {
 
         for (let id of selectedIds) {
           const shape = page.shapes[id]
-          getShapeUtils(shape).setChildIndex(shape, initialIndices[id])
+          getShapeUtils(shape).setProperty(
+            shape,
+            'childIndex',
+            initialIndices[id]
+          )
         }
       },
     })
@@ -96,7 +100,7 @@ function moveToFront(shapes: Shape[], siblings: Shape[]) {
   const startIndex = Math.ceil(diff[0].childIndex) + 1
 
   shapes.forEach((shape, i) =>
-    getShapeUtils(shape).setChildIndex(shape, startIndex + i)
+    getShapeUtils(shape).setProperty(shape, 'childIndex', startIndex + i)
   )
 }
 
@@ -114,7 +118,11 @@ function moveToBack(shapes: Shape[], siblings: Shape[]) {
   const step = startIndex / (shapes.length + 1)
 
   shapes.forEach((shape, i) =>
-    getShapeUtils(shape).setChildIndex(shape, startIndex - (i + 1) * step)
+    getShapeUtils(shape).setProperty(
+      shape,
+      'childIndex',
+      startIndex - (i + 1) * step
+    )
   )
 }
 
@@ -138,7 +146,7 @@ function moveForward(shape: Shape, siblings: Shape[], visited: Set<string>) {
         : Math.ceil(nextSibling.childIndex + 1)
     }
 
-    getShapeUtils(shape).setChildIndex(shape, nextIndex)
+    getShapeUtils(shape).setProperty(shape, 'childIndex', nextIndex)
 
     siblings.sort((a, b) => a.childIndex - b.childIndex)
   }
@@ -164,7 +172,7 @@ function moveBackward(shape: Shape, siblings: Shape[], visited: Set<string>) {
         : nextSibling.childIndex / 2
     }
 
-    getShapeUtils(shape).setChildIndex(shape, nextIndex)
+    getShapeUtils(shape).setProperty(shape, 'childIndex', nextIndex)
 
     siblings.sort((a, b) => a.childIndex - b.childIndex)
   }

state/sessions/transform-session.ts

@@ -32,7 +32,7 @@ export default class TransformSession extends BaseSession {
   update(data: Data, point: number[], isAspectRatioLocked = false) {
     const { transformType } = this
 
-    const { shapeBounds, initialBounds } = this.snapshot
+    const { shapeBounds, initialBounds, isAllAspectRatioLocked } = this.snapshot
 
     const { shapes } = getPage(data)
 
@@ -41,7 +41,7 @@ export default class TransformSession extends BaseSession {
       transformType,
       vec.vec(this.origin, point),
       data.boundsRotation,
-      isAspectRatioLocked
+      isAspectRatioLocked || isAllAspectRatioLocked
     )
 
     this.scaleX = newBoundingBox.scaleX
@@ -115,6 +115,10 @@ export function getTransformSnapshot(data: Data, transformType: Edge | Corner) {
 
   const hasUnlockedShapes = initialShapes.length > 0
 
+  const isAllAspectRatioLocked = initialShapes.every(
+    (shape) => shape.isAspectRatioLocked
+  )
+
   const shapesBounds = Object.fromEntries(
     initialShapes.map((shape) => [
       shape.id,
@@ -133,6 +137,7 @@ export function getTransformSnapshot(data: Data, transformType: Edge | Corner) {
   return {
     type: transformType,
     hasUnlockedShapes,
+    isAllAspectRatioLocked,
     currentPageId,
     initialBounds: commonBounds,
     shapeBounds: Object.fromEntries(

state/state.ts

@@ -75,6 +75,19 @@ const state = createState({
     PANNED_CAMERA: {
       do: 'panCamera',
     },
+    ZOOMED_TO_ACTUAL: {
+      if: 'hasSelection',
+      do: 'zoomCameraToSelectionActual',
+      else: 'zoomCameraToActual',
+    },
+    ZOOMED_TO_SELECTION: {
+      if: 'hasSelection',
+      do: 'zoomCameraToSelection',
+    },
+    ZOOMED_TO_FIT: ['zoomCameraToFit', 'zoomCameraToActual'],
+    ZOOMED_IN: 'zoomIn',
+    ZOOMED_OUT: 'zoomOut',
+    RESET_CAMERA: 'resetCamera',
     TOGGLED_SHAPE_LOCK: { if: 'hasSelection', do: 'lockSelection' },
     TOGGLED_SHAPE_HIDE: { if: 'hasSelection', do: 'hideSelection' },
     TOGGLED_SHAPE_ASPECT_LOCK: {
@@ -93,17 +106,6 @@ const state = createState({
     TOGGLED_CODE_PANEL_OPEN: 'toggleCodePanel',
     TOGGLED_STYLE_PANEL_OPEN: 'toggleStylePanel',
     CHANGED_STYLE: ['updateStyles', 'applyStylesToSelection'],
-    RESET_CAMERA: 'resetCamera',
-    ZOOMED_TO_FIT: 'zoomCameraToFit',
-    ZOOMED_TO_SELECTION: {
-      if: 'hasSelection',
-      do: 'zoomCameraToSelection',
-    },
-    ZOOMED_TO_ACTUAL: {
-      if: 'hasSelection',
-      do: 'zoomCameraToSelectionActual',
-      else: 'zoomCameraToActual',
-    },
     SELECTED_ALL: { to: 'selecting', do: 'selectAll' },
     NUDGED: { do: 'nudgeSelection' },
     USED_PEN_DEVICE: 'enablePenLock',
@@ -115,11 +117,6 @@ const state = createState({
       on: {
         MOUNTED: [
           'restoreSavedData',
-          {
-            if: 'hasSelection',
-            do: 'zoomCameraToSelectionActual',
-            else: ['zoomCameraToFit', 'zoomCameraToActual'],
-          },
           {
             to: 'ready',
           },
@@ -127,6 +124,12 @@ const state = createState({
       },
     },
     ready: {
+      onEnter: {
+        wait: 0.01,
+        if: 'hasSelection',
+        do: 'zoomCameraToSelectionActual',
+        else: ['zoomCameraToFit', 'zoomCameraToActual'],
+      },
       on: {
         UNMOUNTED: [
           { unless: 'isReadOnly', do: 'forceSave' },
@@ -141,7 +144,7 @@ const state = createState({
             UNDO: 'undo',
             REDO: 'redo',
             SAVED_CODE: 'saveCode',
-            DELETED: 'deleteSelectedIds',
+            DELETED: 'deleteSelection',
             STARTED_PINCHING: { to: 'pinching' },
             INCREASED_CODE_FONT_SIZE: 'increaseCodeFontSize',
             DECREASED_CODE_FONT_SIZE: 'decreaseCodeFontSize',
@@ -282,6 +285,9 @@ const state = createState({
         usingTool: {
           initial: 'draw',
           onEnter: 'clearSelectedIds',
+          on: {
+            TOGGLED_TOOL_LOCK: 'toggleToolLock',
+          },
           states: {
             draw: {
               initial: 'creating',
@@ -311,7 +317,7 @@ const state = createState({
                       to: 'draw.creating',
                     },
                     CANCELLED: {
-                      do: ['cancelSession', 'deleteSelectedIds'],
+                      do: ['cancelSession', 'deleteSelection'],
                       to: 'selecting',
                     },
                     MOVED_POINTER: 'updateDrawSession',
@@ -351,7 +357,7 @@ const state = createState({
                       },
                     ],
                     CANCELLED: {
-                      do: ['cancelSession', 'deleteSelectedIds'],
+                      do: ['cancelSession', 'deleteSelection'],
                       to: 'selecting',
                     },
                   },
@@ -537,7 +543,7 @@ const state = createState({
               },
             ],
             CANCELLED: {
-              do: ['cancelSession', 'deleteSelectedIds'],
+              do: ['cancelSession', 'deleteSelection'],
               to: 'selecting',
             },
           },
@@ -849,14 +855,35 @@ const state = createState({
     aspectLockSelection(data) {
       commands.toggle(data, 'isAspectRatioLocked')
     },
+    deleteSelection(data) {
+      commands.deleteSelected(data)
+    },
 
     /* --------------------- Camera --------------------- */
 
-    resetCamera(data) {
-      data.camera.zoom = 1
-      data.camera.point = [window.innerWidth / 2, window.innerHeight / 2]
+    zoomIn(data) {
+      const { camera } = data
+      const i = Math.round((camera.zoom * 100) / 25)
+      const center = [window.innerWidth / 2, window.innerHeight / 2]
 
-      document.documentElement.style.setProperty('--camera-zoom', '1')
+      const p0 = screenToWorld(center, data)
+      camera.zoom = Math.min(3, (i + 1) * 0.25)
+      const p1 = screenToWorld(center, data)
+      camera.point = vec.add(camera.point, vec.sub(p1, p0))
+
+      setZoomCSS(camera.zoom)
+    },
+    zoomOut(data) {
+      const { camera } = data
+      const i = Math.round((camera.zoom * 100) / 25)
+      const center = [window.innerWidth / 2, window.innerHeight / 2]
+
+      const p0 = screenToWorld(center, data)
+      camera.zoom = Math.max(0.1, (i - 1) * 0.25)
+      const p1 = screenToWorld(center, data)
+      camera.point = vec.add(camera.point, vec.sub(p1, p0))
+
+      setZoomCSS(camera.zoom)
     },
     zoomCameraToActual(data) {
       const { camera } = data
@@ -967,8 +994,11 @@ const state = createState({
 
       setZoomCSS(camera.zoom)
     },
-    deleteSelectedIds(data) {
-      commands.deleteSelected(data)
+    resetCamera(data) {
+      data.camera.zoom = 1
+      data.camera.point = [window.innerWidth / 2, window.innerHeight / 2]
+
+      document.documentElement.style.setProperty('--camera-zoom', '1')
     },
 
     /* ---------------------- History ---------------------- */

utils/utils.ts

@@ -1487,7 +1487,7 @@ export function getChildIndexBelow(
 export function forceIntegerChildIndices(shapes: Shape[]) {
   for (let i = 0; i < shapes.length; i++) {
     const shape = shapes[i]
-    getShapeUtils(shape).setChildIndex(shape, i + 1)
+    getShapeUtils(shape).setProperty(shape, 'childIndex', i + 1)
   }
 }
 export function setZoomCSS(zoom: number) {