Merge branch 'main' of https://github.com/steveruizok/code-slate into main

.prettierrc

+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

components/canvas/bounds/bounding-box.tsx

-import * as React from "react"
-import { Edge, Corner } from "types"
-import { useSelector } from "state"
-import { getSelectedShapes, isMobile } from "utils/utils"
+import * as React from 'react'
+import { Edge, Corner } from 'types'
+import { useSelector } from 'state'
+import { getSelectedShapes, isMobile } from 'utils/utils'
 
-import CenterHandle from "./center-handle"
-import CornerHandle from "./corner-handle"
-import EdgeHandle from "./edge-handle"
-import RotateHandle from "./rotate-handle"
+import CenterHandle from './center-handle'
+import CornerHandle from './corner-handle'
+import EdgeHandle from './edge-handle'
+import RotateHandle from './rotate-handle'
+import Selected from '../selected'
 
 export default function Bounds() {
-  const isBrushing = useSelector((s) => s.isIn("brushSelecting"))
-  const isSelecting = useSelector((s) => s.isIn("selecting"))
+  const isBrushing = useSelector((s) => s.isIn('brushSelecting'))
+  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 }) =>
   if (!bounds) return null
   if (!isSelecting) return null
 
-  const size = (isMobile().any ? 16 : 8) / zoom // Touch target size
+  const size = (isMobile().any ? 12 : 8) / zoom // Touch target size
 
   return (
     <g
-      pointerEvents={isBrushing ? "none" : "all"}
+      pointerEvents={isBrushing ? 'none' : 'all'}
       transform={`
         rotate(${rotation * (180 / Math.PI)}, 
         ${(bounds.minX + bounds.maxX) / 2}, 
         ${(bounds.minY + bounds.maxY) / 2})
         translate(${bounds.minX},${bounds.minY})`}
     >
+      <Selected bounds={bounds} />
       <CenterHandle bounds={bounds} />
       <EdgeHandle size={size} bounds={bounds} edge={Edge.Top} />
       <EdgeHandle size={size} bounds={bounds} edge={Edge.Right} />

components/canvas/canvas.tsx

-import styled from "styles"
-import React, { useCallback, useRef } from "react"
-import useZoomEvents from "hooks/useZoomEvents"
-import useCamera from "hooks/useCamera"
-import Page from "./page"
-import Brush from "./brush"
-import state from "state"
-import Bounds from "./bounds/bounding-box"
-import BoundsBg from "./bounds/bounds-bg"
-import inputs from "state/inputs"
+import styled from 'styles'
+import state from 'state'
+import inputs from 'state/inputs'
+import React, { useCallback, useRef } from 'react'
+import useZoomEvents from 'hooks/useZoomEvents'
+import useCamera from 'hooks/useCamera'
+import Defs from './defs'
+import Page from './page'
+import Brush from './brush'
+import Bounds from './bounds/bounding-box'
+import BoundsBg from './bounds/bounds-bg'
 
 export default function Canvas() {
   const rCanvas = useRef<SVGSVGElement>(null)
 
   const handlePointerDown = useCallback((e: React.PointerEvent) => {
     rCanvas.current.setPointerCapture(e.pointerId)
-    state.send("POINTED_CANVAS", inputs.pointerDown(e, "canvas"))
+    state.send('POINTED_CANVAS', inputs.pointerDown(e, 'canvas'))
   }, [])
 
   const handlePointerMove = useCallback((e: React.PointerEvent) => {
-    state.send("MOVED_POINTER", inputs.pointerMove(e))
+    state.send('MOVED_POINTER', inputs.pointerMove(e))
   }, [])
 
   const handlePointerUp = useCallback((e: React.PointerEvent) => {
     rCanvas.current.releasePointerCapture(e.pointerId)
-    state.send("STOPPED_POINTING", { id: "canvas", ...inputs.pointerUp(e) })
+    state.send('STOPPED_POINTING', { id: 'canvas', ...inputs.pointerUp(e) })
   }, [])
 
   return (
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
     >
+      <Defs />
       <MainGroup ref={rGroup}>
         <BoundsBg />
         <Page />
   )
 }
 
-const MainSVG = styled("svg", {
-  position: "fixed",
+const MainSVG = styled('svg', {
+  position: 'fixed',
   top: 0,
   left: 0,
-  width: "100%",
-  height: "100%",
-  touchAction: "none",
+  width: '100%',
+  height: '100%',
+  touchAction: 'none',
   zIndex: 100,
 
-  "& *": {
-    userSelect: "none",
+  '& *': {
+    userSelect: 'none',
   },
 })
 
-const MainGroup = styled("g", {})
+const MainGroup = styled('g', {})

components/canvas/defs.tsx

+import { getShapeUtils } from "lib/shape-utils"
+import { useSelector } from "state"
+import { deepCompareArrays, getPage } from "utils/utils"
+
+export default function Defs() {
+  const currentPageShapeIds = useSelector(({ data }) => {
+    return Object.values(getPage(data).shapes)
+      .sort((a, b) => a.childIndex - b.childIndex)
+      .map((shape) => shape.id)
+  }, deepCompareArrays)
+
+  return (
+    <defs>
+      {currentPageShapeIds.map((id) => (
+        <Def key={id} id={id} />
+      ))}
+    </defs>
+  )
+}
+
+export function Def({ id }: { id: string }) {
+  const shape = useSelector(({ data }) => getPage(data).shapes[id])
+
+  return getShapeUtils(shape).render(shape)
+}

components/canvas/page.tsx

-import { useSelector } from "state"
-import { deepCompareArrays, getPage } from "utils/utils"
-import Shape from "./shape"
+import { useSelector } from 'state'
+import { deepCompareArrays, getPage } from 'utils/utils'
+import Shape from './shape'
 
 /* 
 On each state change, compare node ids of all shapes
       .map((shape) => shape.id)
   }, deepCompareArrays)
 
+  const isSelecting = useSelector((s) => s.isIn('selecting'))
+
   return (
     <>
       {currentPageShapeIds.map((shapeId) => (
-        <Shape key={shapeId} id={shapeId} />
+        <Shape key={shapeId} id={shapeId} isSelecting={isSelecting} />
       ))}
     </>
   )

components/canvas/selected.tsx

+import styled from 'styles'
+import { useSelector } from 'state'
+import {
+  deepCompareArrays,
+  getBoundsCenter,
+  getPage,
+  getSelectedShapes,
+} from 'utils/utils'
+import * as vec from 'utils/vec'
+import { getShapeUtils } from 'lib/shape-utils'
+import { Bounds } from 'types'
+import useShapeEvents from 'hooks/useShapeEvents'
+import { useRef } from 'react'
+
+export default function Selected({ bounds }: { bounds: Bounds }) {
+  const currentPageShapeIds = useSelector(({ data }) => {
+    return Array.from(data.selectedIds.values())
+  }, deepCompareArrays)
+
+  return (
+    <g>
+      {currentPageShapeIds.map((id) => (
+        <ShapeOutline key={id} id={id} bounds={bounds} />
+      ))}
+    </g>
+  )
+}
+
+export function ShapeOutline({ id, bounds }: { id: string; bounds: Bounds }) {
+  const rIndicator = useRef<SVGUseElement>(null)
+
+  const shape = useSelector(({ data }) => getPage(data).shapes[id])
+
+  const shapeBounds = getShapeUtils(shape).getBounds(shape)
+
+  const events = useShapeEvents(id, rIndicator)
+
+  return (
+    <Indicator
+      ref={rIndicator}
+      as="use"
+      href={'#' + id}
+      transform={`rotate(${shape.rotation * (180 / Math.PI)},${getBoundsCenter(
+        shapeBounds
+      )}) translate(${vec.sub(shape.point, [bounds.minX, bounds.minY])})`}
+      {...events}
+    />
+  )
+}
+
+const Indicator = styled('path', {
+  zStrokeWidth: 1,
+  strokeLineCap: 'round',
+  strokeLinejoin: 'round',
+  stroke: '$selected',
+  fill: 'transparent',
+  pointerEvents: 'all',
+})

components/canvas/shape.tsx

-import React, { useCallback, useRef, memo } from "react"
-import state, { useSelector } from "state"
-import inputs from "state/inputs"
-import styled from "styles"
-import { getShapeUtils } from "lib/shape-utils"
-import { getPage } from "utils/utils"
-
-function Shape({ id }: { id: string }) {
-  const rGroup = useRef<SVGGElement>(null)
-
+import React, { useCallback, useRef, memo } from 'react'
+import state, { useSelector } from 'state'
+import inputs from 'state/inputs'
+import styled from 'styles'
+import { getShapeUtils } from 'lib/shape-utils'
+import { getPage } from 'utils/utils'
+import { ShapeStyles } from 'types'
+
+function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
   const isHovered = useSelector((state) => state.data.hoveredId === id)
 
   const isSelected = useSelector((state) => state.values.selectedIds.has(id))
 
   const shape = useSelector(({ data }) => getPage(data).shapes[id])
 
+  const rGroup = useRef<SVGGElement>(null)
+
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
       e.stopPropagation()
       rGroup.current.setPointerCapture(e.pointerId)
-      state.send("POINTED_SHAPE", inputs.pointerDown(e, id))
+      state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
     },
     [id]
   )
     (e: React.PointerEvent) => {
       e.stopPropagation()
       rGroup.current.releasePointerCapture(e.pointerId)
-      state.send("STOPPED_POINTING", inputs.pointerUp(e))
+      state.send('STOPPED_POINTING', inputs.pointerUp(e))
     },
     [id]
   )
 
   const handlePointerEnter = useCallback(
     (e: React.PointerEvent) => {
-      state.send("HOVERED_SHAPE", inputs.pointerEnter(e, id))
+      state.send('HOVERED_SHAPE', inputs.pointerEnter(e, id))
     },
     [id, shape]
   )
 
   const handlePointerMove = useCallback(
     (e: React.PointerEvent) => {
-      state.send("MOVED_OVER_SHAPE", inputs.pointerEnter(e, id))
+      state.send('MOVED_OVER_SHAPE', inputs.pointerEnter(e, id))
     },
     [id, shape]
   )
 
   const handlePointerLeave = useCallback(
-    () => state.send("UNHOVERED_SHAPE", { target: id }),
+    () => state.send('UNHOVERED_SHAPE', { target: id }),
     [id]
   )
 
       onPointerLeave={handlePointerLeave}
       onPointerMove={handlePointerMove}
     >
-      <defs>{getShapeUtils(shape).render(shape)}</defs>
-      <HoverIndicator as="use" xlinkHref={"#" + id} />
-      <MainShape as="use" xlinkHref={"#" + id} {...shape.style} />
-      <Indicator as="use" xlinkHref={"#" + id} />
+      {isSelecting && <HoverIndicator as="use" href={'#' + id} />}
+      <StyledShape id={id} style={shape.style} />
     </StyledGroup>
   )
 }
 
-const MainShape = styled("use", {
-  zStrokeWidth: 1,
-})
+const StyledShape = memo(
+  ({ id, style }: { id: string; style: ShapeStyles }) => {
+    return <MainShape as="use" href={'#' + id} {...style} />
+  }
+)
 
-const Indicator = styled("path", {
-  fill: "none",
-  stroke: "transparent",
+const MainShape = styled('use', {
   zStrokeWidth: 1,
-  pointerEvents: "none",
-  strokeLineCap: "round",
-  strokeLinejoin: "round",
 })
 
-const HoverIndicator = styled("path", {
-  fill: "none",
-  stroke: "transparent",
-  pointerEvents: "all",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  transform: "all .2s",
+const HoverIndicator = styled('path', {
+  fill: 'none',
+  stroke: 'transparent',
+  pointerEvents: 'all',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  transform: 'all .2s',
 })
 
-const StyledGroup = styled("g", {
+const StyledGroup = styled('g', {
   [`& ${HoverIndicator}`]: {
-    opacity: "0",
+    opacity: '0',
   },
   variants: {
     isSelected: {
-      true: {
-        [`& ${Indicator}`]: {
-          stroke: "$selected",
-        },
-      },
+      true: {},
       false: {},
     },
     isHovered: {
       isHovered: true,
       css: {
         [`& ${HoverIndicator}`]: {
-          opacity: "1",
-          stroke: "$hint",
+          opacity: '1',
+          stroke: '$hint',
           zStrokeWidth: [8, 4],
         },
       },
       isHovered: false,
       css: {
         [`& ${HoverIndicator}`]: {
-          opacity: "1",
-          stroke: "$hint",
+          opacity: '1',
+          stroke: '$hint',
           zStrokeWidth: [6, 3],
         },
       },
       isHovered: true,
       css: {
         [`& ${HoverIndicator}`]: {
-          opacity: "1",
-          stroke: "$hint",
+          opacity: '1',
+          stroke: '$hint',
           zStrokeWidth: [8, 4],
         },
       },
   ],
 })
 
-export { Indicator, HoverIndicator }
+export { HoverIndicator }
 
 export default memo(Shape)

hooks/useShapeEvents.ts

+import { MutableRefObject, useCallback } from 'react'
+import state from 'state'
+import inputs from 'state/inputs'
+
+export default function useShapeEvents(
+  id: string,
+  rGroup: MutableRefObject<SVGElement>
+) {
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.stopPropagation()
+      rGroup.current.setPointerCapture(e.pointerId)
+      state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
+    },
+    [id]
+  )
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      e.stopPropagation()
+      rGroup.current.releasePointerCapture(e.pointerId)
+      state.send('STOPPED_POINTING', inputs.pointerUp(e))
+    },
+    [id]
+  )
+
+  const handlePointerEnter = useCallback(
+    (e: React.PointerEvent) => {
+      state.send('HOVERED_SHAPE', inputs.pointerEnter(e, id))
+    },
+    [id]
+  )
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      state.send('MOVED_OVER_SHAPE', inputs.pointerEnter(e, id))
+    },
+    [id]
+  )
+
+  const handlePointerLeave = useCallback(
+    () => state.send('UNHOVERED_SHAPE', { target: id }),
+    [id]
+  )
+
+  return {
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp,
+    onPointerEnter: handlePointerEnter,
+    onPointerMove: handlePointerMove,
+    onPointerLeave: handlePointerLeave,
+  }
+}

hooks/useZoomEvents.ts

 import state from "state"
 import inputs from "state/inputs"
 import * as vec from "utils/vec"
+import { usePinch } from "react-use-gesture"
 
 /**
  * Capture zoom gestures (pinches, wheels and pans) and send to the state.
     }
   }, [ref])
 
-  return {}
+  const rPinchDa = useRef<number[] | undefined>(undefined)
+  const rPinchAngle = useRef<number>(undefined)
+  const rPinchPoint = useRef<number[] | undefined>(undefined)
+
+  const bind = usePinch(({ pinching, da, origin }) => {
+    if (!pinching) {
+      state.send("STOPPED_PINCHING")
+      rPinchDa.current = undefined
+      rPinchPoint.current = undefined
+      return
+    }
+
+    if (rPinchPoint.current === undefined) {
+      state.send("STARTED_PINCHING")
+      rPinchDa.current = da
+      rPinchPoint.current = origin
+    }
+
+    const [distanceDelta, angleDelta] = vec.sub(rPinchDa.current, da)
+
+    state.send("PINCHED", {
+      delta: vec.sub(rPinchPoint.current, origin),
+      point: origin,
+      distanceDelta,
+      angleDelta,
+    })
+
+    rPinchDa.current = da
+    rPinchPoint.current = origin
+  })
+
+  return { ...bind() }
 }

lib/shape-utils/draw.tsx

-import { v4 as uuid } from "uuid"
-import * as vec from "utils/vec"
-import { DrawShape, ShapeType } from "types"
-import { registerShapeUtils } from "./index"
-import { intersectPolylineBounds } from "utils/intersections"
-import { boundsContainPolygon } from "utils/bounds"
-import getStroke from "perfect-freehand"
+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { DrawShape, ShapeType } from 'types'
+import { registerShapeUtils } from './index'
+import { intersectPolylineBounds } from 'utils/intersections'
+import { boundsContainPolygon } from 'utils/bounds'
+import getStroke from 'perfect-freehand'
 import {
   getBoundsFromPoints,
   getSvgPathFromStroke,
   translateBounds,
-} from "utils/utils"
-import { DotCircle } from "components/canvas/misc"
-import { shades } from "lib/colors"
+} from 'utils/utils'
+import { DotCircle } from 'components/canvas/misc'
+import { shades } from 'lib/colors'
 
-const pathCache = new WeakMap<DrawShape, string>([])
+const pathCache = new WeakMap<number[][], string>([])
 
 const draw = registerShapeUtils<DrawShape>({
   boundsCache: new WeakMap([]),
       id: uuid(),
       type: ShapeType.Draw,
       isGenerated: false,
-      name: "Draw",
-      parentId: "page0",
+      name: 'Draw',
+      parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
       points: [[0, 0]],
       ...props,
       style: {
         strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
         ...props.style,
-        stroke: "transparent",
+        stroke: 'transparent',
       },
     }
   },
     const { id, point, points } = shape
 
     if (points.length < 2) {
-      return <DotCircle cx={point[0]} cy={point[1]} r={3} />
+      return <DotCircle id={id} cx={point[0]} cy={point[1]} r={3} />
     }
 
-    if (!pathCache.has(shape)) {
-      pathCache.set(shape, getSvgPathFromStroke(getStroke(points)))
+    if (!pathCache.has(points)) {
+      pathCache.set(points, getSvgPathFromStroke(getStroke(points)))
     }
 
-    return <path id={id} d={pathCache.get(shape)} />
+    return <path id={id} d={pathCache.get(points)} />
   },
 
   applyStyles(shape, style) {
     Object.assign(shape.style, style)
-    shape.style.fill = "transparent"
     return this
   },
 

package.json

     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-feather": "^2.0.9",
+    "react-use-gesture": "^9.1.3",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

state/sessions/draw-session.ts

-import { current } from "immer"
-import { Data, DrawShape } from "types"
-import BaseSession from "./base-session"
-import { getShapeUtils } from "lib/shape-utils"
-import { getPage, simplify } from "utils/utils"
-import * as vec from "utils/vec"
-import commands from "state/commands"
+import { current } from 'immer'
+import { Data, DrawShape } from 'types'
+import BaseSession from './base-session'
+import { getShapeUtils } from 'lib/shape-utils'
+import { getPage, simplify } from 'utils/utils'
+import * as vec from 'utils/vec'
+import commands from 'state/commands'
 
 export default class BrushSession extends BaseSession {
   origin: number[]
   update = (data: Data, point: number[]) => {
     const { shapeId } = this
 
-    const lp = vec.med(this.previous, point)
+    const lp = vec.med(this.previous, vec.toPrecision(point))
     this.points.push(vec.sub(lp, this.origin))
     this.previous = lp
 
   }
 
   complete = (data: Data) => {
-    commands.draw(
-      data,
-      this.shapeId,
-      this.snapshot.points,
-      simplify(this.points, 0.1 / data.camera.zoom).map(([x, y]) => [
-        Math.trunc(x * 100) / 100,
-        Math.trunc(y * 100) / 100,
-      ])
-    )
+    commands.draw(data, this.shapeId, this.snapshot.points, this.points)
   }
 }
 

state/state.ts

             STRETCHED: "stretchSelection",
             DISTRIBUTED: "distributeSelection",
             MOVED: "moveSelection",
+            STARTED_PINCHING: { to: "pinching" },
           },
           initial: "notPointing",
           states: {
             },
           },
         },
+        pinching: {
+          on: {
+            STOPPED_PINCHING: { to: "selecting" },
+            PINCHED: { do: "pinchCamera" },
+          },
+        },
         draw: {
           initial: "creating",
           states: {
 
       setZoomCSS(camera.zoom)
     },
-    panCamera(data, payload: { delta: number[]; point: number[] }) {
+    panCamera(data, payload: { delta: number[] }) {
       const { camera } = data
-      data.camera.point = vec.sub(
-        camera.point,
-        vec.div(payload.delta, camera.zoom)
-      )
+      camera.point = vec.sub(camera.point, vec.div(payload.delta, camera.zoom))
+    },
+    pinchCamera(
+      data,
+      payload: {
+        delta: number[]
+        distanceDelta: number
+        angleDelta: number
+        point: number[]
+      }
+    ) {
+      const { camera } = data
+
+      camera.point = vec.sub(camera.point, vec.div(payload.delta, camera.zoom))
+
+      const next = camera.zoom - (payload.distanceDelta / 300) * camera.zoom
+
+      const p0 = screenToWorld(payload.point, data)
+      camera.zoom = clamp(next, 0.1, 3)
+      const p1 = screenToWorld(payload.point, data)
+      camera.point = vec.add(camera.point, vec.sub(p1, p0))
+
+      setZoomCSS(camera.zoom)
     },
     deleteSelectedIds(data) {
       commands.deleteSelected(data)

styles/stitches.config.ts

     zStrokeWidth: () => (value: number | number[]) => {
       if (Array.isArray(value)) {
         return {
-          strokeWidth: `calc(${value[0]} / var(--camera-zoom))`,
+          strokeWidth: `calc(${value[0]}px / var(--camera-zoom))`,
         }
       }
 
       // }
 
       return {
-        strokeWidth: `calc(${value} / var(--camera-zoom))`,
+        strokeWidth: `calc(${value}px / var(--camera-zoom))`,
       }
     },
   },

utils/vec.ts

 export function clamp(n: number, min: number): number
 export function clamp(n: number, min: number, max: number): number
 export function clamp(n: number, min: number, max?: number): number {
-  return Math.max(min, typeof max !== "undefined" ? Math.min(n, max) : n)
+  return Math.max(min, typeof max !== 'undefined' ? Math.min(n, max) : n)
 }
 
 /**
 export function nudge(A: number[], B: number[], d: number) {
   return add(A, mul(uni(vec(A, B)), d))
 }
+
+/**
+ * Round a vector to a precision length.
+ * @param a
+ * @param n
+ */
+export function toPrecision(a: number[], n = 3) {
+  return [+a[0].toPrecision(n), +a[1].toPrecision(n)]
+}

yarn.lock

     invariant "^2.2.4"
     tslib "^1.0.0"
 
+react-use-gesture@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-9.1.3.tgz#92bd143e4f58e69bd424514a5bfccba2a1d62ec0"
+  integrity sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==
+
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"