Improves hover appearance

components/canvas/shape.tsx

@@ -36,7 +36,13 @@ function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
       transform={transform}
       {...events}
     >
-      {isSelecting && <HoverIndicator as="use" href={'#' + id} />}
+      {isSelecting && (
+        <HoverIndicator
+          as="use"
+          href={'#' + id}
+          strokeWidth={+shape.style.strokeWidth + 8}
+        />
+      )}
       <StyledShape id={id} style={shape.style} />
       {/* 
       <text
@@ -102,7 +108,8 @@ const StyledGroup = styled('g', {
         [`& ${HoverIndicator}`]: {
           opacity: '1',
           stroke: '$hint',
-          zStrokeWidth: [8, 4],
+          fill: '$hint',
+          // zStrokeWidth: [8, 4],
         },
       },
     },
@@ -113,7 +120,8 @@ const StyledGroup = styled('g', {
         [`& ${HoverIndicator}`]: {
           opacity: '1',
           stroke: '$hint',
-          zStrokeWidth: [6, 3],
+          fill: '$hint',
+          // zStrokeWidth: [6, 3],
         },
       },
     },
@@ -124,7 +132,8 @@ const StyledGroup = styled('g', {
         [`& ${HoverIndicator}`]: {
           opacity: '1',
           stroke: '$hint',
-          zStrokeWidth: [8, 4],
+          fill: '$hint',
+          // zStrokeWidth: [8, 4],
         },
       },
     },

components/toolbar.tsx

@@ -1,6 +1,6 @@
 import state, { useSelector } from 'state'
 import styled from 'styles'
-import { Lock, Menu, Unlock } from 'react-feather'
+import { Lock, Menu, RotateCcw, RotateCw, Unlock } from 'react-feather'
 import { IconButton } from './shared'
 
 export default function Toolbar() {
@@ -86,8 +86,12 @@ export default function Toolbar() {
         <Button onClick={() => state.send('RESET_CAMERA')}>Reset Camera</Button>
       </Section>
       <Section>
-        <Button onClick={() => state.send('UNDO')}>Undo</Button>
-        <Button onClick={() => state.send('REDO')}>Redo</Button>
+        <Button title="Undo" onClick={() => state.send('UNDO')}>
+          <RotateCcw />
+        </Button>
+        <Button title="Redo" onClick={() => state.send('REDO')}>
+          <RotateCw />
+        </Button>
       </Section>
     </ToolbarContainer>
   )

lib/shape-utils/draw.tsx

@@ -12,7 +12,7 @@ import {
   translateBounds,
 } from 'utils/utils'
 
-const pathCache = new WeakMap<number[][], string>([])
+const pathCache = new WeakMap<DrawShape, string>([])
 
 const draw = registerShapeUtils<DrawShape>({
   boundsCache: new WeakMap([]),
@@ -40,27 +40,27 @@ const draw = registerShapeUtils<DrawShape>({
   },
 
   render(shape) {
-    const { id, point, points, style } = shape
+    const { id, points, style } = shape
 
-    if (!pathCache.has(points)) {
+    if (!pathCache.has(shape)) {
       if (points.length < 2) {
-        const left = vec.add(point, [6, 0])
+        const left = [+style.strokeWidth, 0]
         let d: number[][] = []
         for (let i = 0; i < 10; i++) {
-          d.push(vec.rotWith(left, point, i * ((Math.PI * 2) / 8)))
+          d.push(vec.rotWith(left, [0, 0], i * ((Math.PI * 2) / 8)))
         }
-        pathCache.set(points, getSvgPathFromStroke(d))
+        pathCache.set(shape, getSvgPathFromStroke(d))
       } else {
         pathCache.set(
-          points,
+          shape,
           getSvgPathFromStroke(
-            getStroke(points, { size: Number(style.strokeWidth) * 2 })
+            getStroke(points, { size: +style.strokeWidth * 2 })
           )
         )
       }
     }
 
-    return <path id={id} d={pathCache.get(points)} />
+    return <path id={id} d={pathCache.get(shape)} />
   },
 
   applyStyles(shape, style) {
@@ -95,7 +95,9 @@ const draw = registerShapeUtils<DrawShape>({
 
     for (let i = 1; i < shape.points.length; i++) {
       let curr = shape.points[i]
-      if (vec.distanceToLineSegment(prev, curr, pt) < 4) {
+      if (
+        vec.distanceToLineSegment(prev, curr, pt) < +shape.style.strokeWidth
+      ) {
         return true
       }
       prev = curr

state/state.ts

@@ -274,6 +274,7 @@ const state = createState({
         },
         usingTool: {
           initial: 'draw',
+          onEnter: 'clearSelectedIds',
           states: {
             draw: {
               initial: 'creating',
@@ -281,6 +282,11 @@ const state = createState({
                 creating: {
                   on: {
                     CANCELLED: { to: 'selecting' },
+                    POINTED_SHAPE: {
+                      get: 'newDraw',
+                      do: 'createShape',
+                      to: 'draw.editing',
+                    },
                     POINTED_CANVAS: {
                       get: 'newDraw',
                       do: 'createShape',
@@ -313,6 +319,11 @@ const state = createState({
                 creating: {
                   on: {
                     CANCELLED: { to: 'selecting' },
+                    POINTED_SHAPE: {
+                      get: 'newDot',
+                      do: 'createShape',
+                      to: 'dot.editing',
+                    },
                     POINTED_CANVAS: {
                       get: 'newDot',
                       do: 'createShape',
@@ -364,6 +375,9 @@ const state = createState({
                 creating: {
                   on: {
                     CANCELLED: { to: 'selecting' },
+                    POINTED_SHAPE: {
+                      to: 'circle.editing',
+                    },
                     POINTED_CANVAS: {
                       to: 'circle.editing',
                     },
@@ -418,6 +432,9 @@ const state = createState({
                 creating: {
                   on: {
                     CANCELLED: { to: 'selecting' },
+                    POINTED_SHAPE: {
+                      to: 'rectangle.editing',
+                    },
                     POINTED_CANVAS: {
                       to: 'rectangle.editing',
                     },
@@ -445,6 +462,11 @@ const state = createState({
                 creating: {
                   on: {
                     CANCELLED: { to: 'selecting' },
+                    POINTED_SHAPE: {
+                      get: 'newRay',
+                      do: 'createShape',
+                      to: 'ray.editing',
+                    },
                     POINTED_CANVAS: {
                       get: 'newRay',
                       do: 'createShape',
@@ -470,6 +492,11 @@ const state = createState({
                 creating: {
                   on: {
                     CANCELLED: { to: 'selecting' },
+                    POINTED_SHAPE: {
+                      get: 'newLine',
+                      do: 'createShape',
+                      to: 'line.editing',
+                    },
                     POINTED_CANVAS: {
                       get: 'newLine',
                       do: 'createShape',

styles/stitches.config.ts

@@ -45,22 +45,21 @@ const { styled, global, css, theme, getCssString } = createCss({
   utils: {
     zStrokeWidth: () => (value: number | number[]) => {
       if (Array.isArray(value)) {
+        // const [val, min, max] = value
+        // return {
+        //   strokeWidth:
+        //     min !== undefined && max !== undefined
+        //       ? `clamp(${min}px, (calc(${val}px / var(--camera-zoom))), ${max}px)`
+        //       : min !== undefined
+        //       ? `min(${min}px, calc(${val}px / var(--camera-zoom)))`
+        //       : `calc(${val}px / var(--camera-zoom))`,
+        // }
+
         return {
           strokeWidth: `calc(${value[0]}px / var(--camera-zoom))`,
         }
       }
 
-      // const [val, min, max] = value
-      // return {
-      //   strokeWidth:
-      //     min !== undefined && max !== undefined
-      //       ? `clamp(${min}, ${val} / var(--camera-zoom), ${max})`
-      //       : min !== undefined
-      //       ? `min(${min}, ${val} / var(--camera-zoom))`
-      //       : `calc(${val} / var(--camera-zoom))`,
-      // }
-      // }
-
       return {
         strokeWidth: `calc(${value}px / var(--camera-zoom))`,
       }