Merge pull request #32 from tldraw/cleanup

Refactor shape rendering

components/canvas/bounds/bounding-box.tsx

@@ -11,7 +11,9 @@ import RotateHandle from './rotate-handle'
 export default function Bounds(): JSX.Element {
   const isBrushing = useSelector((s) => s.isIn('brushSelecting'))
 
-  const isSelecting = useSelector((s) => s.isIn('selecting'))
+  const shouldDisplay = useSelector((s) =>
+    s.isInAny('selecting', 'selectPinching')
+  )
 
   const zoom = useSelector((s) => tld.getCurrentCamera(s.data).zoom)
 
@@ -38,7 +40,7 @@ export default function Bounds(): JSX.Element {
 
   if (!bounds) return null
 
-  if (!isSelecting) return null
+  if (!shouldDisplay) return null
 
   if (isSingleHandles) return null
 

components/canvas/defs.tsx

@@ -1,47 +1,39 @@
-import { getShapeUtils } from 'state/shape-utils'
 import React from 'react'
 import { useSelector } from 'state'
 import tld from 'utils/tld'
 import { DotCircle, Handle } from './misc'
-import useShape from 'hooks/useShape'
-import useShapesToRender from 'hooks/useShapesToRender'
 import styled from 'styles'
 
 export default function Defs(): JSX.Element {
-  const shapeIdsToRender = useShapesToRender()
-
   return (
     <defs>
       <DotCircle id="dot" r={4} />
       <Handle id="handle" r={4} />
       <ExpandDef />
-      <ShadowDef />
+      <HoverDef />
-      {shapeIdsToRender.map((id) => (
-        <Def key={id} id={id} />
-      ))}
     </defs>
   )
 }
 
-function Def({ id }: { id: string }) {
-  const shape = useShape(id)
-  if (!shape) return null
-  return getShapeUtils(shape).render(shape, { isEditing: false })
-}
-
 function ExpandDef() {
   const zoom = useSelector((s) => tld.getCurrentCamera(s.data).zoom)
   return (
     <filter id="expand">
-      <feMorphology operator="dilate" radius={2 / zoom} />
+      <feMorphology operator="dilate" radius={0.5 / zoom} />
     </filter>
   )
 }
 
-function ShadowDef() {
+function HoverDef() {
   return (
     <filter id="hover">
-      <StyledShadow dx="0" dy="0" stdDeviation="1.2" floodOpacity="1" />
+      <StyledShadow
+        dx="2"
+        dy="2"
+        stdDeviation="0.5"
+        floodOpacity="1"
+        floodColor="blue"
+      />
     </filter>
   )
 }

components/canvas/page.tsx

@@ -1,33 +1,121 @@
 import { useSelector } from 'state'
-import Shape from './shape'
+import tld from 'utils/tld'
-import HoveredShape from './hovered-shape'
+import { Data, Shape, ShapeType } from 'types'
-import usePageShapes from 'hooks/usePageShapes'
+import { getShapeUtils } from 'state/shape-utils'
+import { boundsCollide, boundsContain } from 'utils'
+import ShapeComponent from './shape'
 
 /* 
-On each state change, compare node ids of all shapes
+On each state change, populate a tree structure with all of
-on the current page. Kind of expensive but only happens
+the shapes that we need to render..
-here; and still cheaper than any other pattern I've found.
 */
 
+interface Node {
+  shape: Shape
+  children: Node[]
+  isEditing: boolean
+  isHovered: boolean
+  isSelected: boolean
+  isCurrentParent: boolean
+}
+
 export default function Page(): JSX.Element {
-  const showHovers = useSelector((s) =>
+  // Get a tree of shapes to render
-    s.isInAny('selecting', 'text', 'editingShape')
+  const shapeTree = useSelector((s) => {
+    // Get the shapes that fit into the current viewport
+
+    const viewport = tld.getViewport(s.data)
+
+    const shapesToShow = s.values.currentShapes.filter((shape) => {
+      const shapeBounds = getShapeUtils(shape).getBounds(shape)
+
+      return (
+        shape.type === ShapeType.Ray ||
+        shape.type === ShapeType.Line ||
+        boundsContain(viewport, shapeBounds) ||
+        boundsCollide(viewport, shapeBounds)
+      )
+    })
+
+    // Should we allow shapes to be hovered?
+    const allowHovers = s.isInAny('selecting', 'text', 'editingShape')
+
+    // Populate the shape tree
+    const tree: Node[] = []
+
+    shapesToShow.forEach((shape) =>
+      addToTree(s.data, s.values.selectedIds, allowHovers, tree, shape)
     )
 
-  const visiblePageShapeIds = usePageShapes()
+    return tree
-
-  const hoveredShapeId = useSelector((s) => {
-    return visiblePageShapeIds.find((id) => id === s.data.hoveredId)
   })
 
   return (
-    <g pointerEvents={showHovers ? 'all' : 'none'}>
+    <>
-      {showHovers && hoveredShapeId && (
+      {shapeTree.map((node) => (
-        <HoveredShape key={hoveredShapeId} id={hoveredShapeId} />
+        <ShapeNode key={node.shape.id} node={node} />
-      )}
-      {visiblePageShapeIds.map((id) => (
-        <Shape key={id} id={id} />
       ))}
-    </g>
+    </>
   )
 }
+
+interface ShapeNodeProps {
+  node: Node
+  parentPoint?: number[]
+}
+
+const ShapeNode = ({
+  node: { shape, children, isEditing, isHovered, isSelected, isCurrentParent },
+}: ShapeNodeProps) => {
+  return (
+    <>
+      <ShapeComponent
+        shape={shape}
+        isEditing={isEditing}
+        isHovered={isHovered}
+        isSelected={isSelected}
+        isCurrentParent={isCurrentParent}
+      />
+      {children.map((childNode) => (
+        <ShapeNode key={childNode.shape.id} node={childNode} />
+      ))}
+    </>
+  )
+}
+
+/**
+ * Populate the shape tree. This helper is recursive and only one call is needed.
+ *
+ * ### Example
+ *
+ *```ts
+ * addDataToTree(data, selectedIds, allowHovers, branch, shape)
+ *```
+ */
+function addToTree(
+  data: Data,
+  selectedIds: string[],
+  allowHovers: boolean,
+  branch: Node[],
+  shape: Shape
+): void {
+  const node = {
+    shape,
+    children: [],
+    isHovered: data.hoveredId === shape.id,
+    isCurrentParent: data.currentParentId === shape.id,
+    isEditing: data.editingId === shape.id,
+    isSelected: selectedIds.includes(shape.id),
+  }
+
+  branch.push(node)
+
+  if (shape.children) {
+    shape.children
+      .map((id) => tld.getShape(data, id))
+      .sort((a, b) => a.childIndex - b.childIndex)
+      .forEach((shape) => {
+        addToTree(data, selectedIds, allowHovers, node.children, shape)
+      })
+  }
+}

components/canvas/shape.tsx

@@ -1,224 +1,112 @@
-import React, { useRef, memo, useEffect } from 'react'
-import state, { useSelector } from 'state'
-import styled from 'styles'
-import { getShapeUtils } from 'state/shape-utils'
-import { deepCompareArrays } from 'utils'
-import tld from 'utils/tld'
 import useShapeEvents from 'hooks/useShapeEvents'
-import useShape from 'hooks/useShape'
+import { Shape as _Shape, ShapeType, TextShape } from 'types'
-import vec from 'utils/vec'
+import { getShapeUtils } from 'state/shape-utils'
-import { getShapeStyle } from 'state/shape-styles'
+import { shallowEqual } from 'utils'
+import { memo, useRef } from 'react'
 
 interface ShapeProps {
-  id: string
+  shape: _Shape
+  isEditing: boolean
+  isHovered: boolean
+  isSelected: boolean
+  isCurrentParent: boolean
 }
 
-function Shape({ id }: ShapeProps): JSX.Element {
+const Shape = memo(
+  ({
+    shape,
+    isEditing,
+    isHovered,
+    isSelected,
+    isCurrentParent,
+  }: ShapeProps) => {
     const rGroup = useRef<SVGGElement>(null)
+    const events = useShapeEvents(shape.id, isCurrentParent, rGroup)
+    const utils = getShapeUtils(shape)
 
-  const isHidden = useSelector((s) => {
+    const center = utils.getCenter(shape)
-    const shape = tld.getShape(s.data, id)
-    if (shape === undefined) return true
-    return shape?.isHidden
-  })
-
-  const children = useSelector((s) => {
-    const shape = tld.getShape(s.data, id)
-    if (shape === undefined) return []
-    return shape?.children
-  })
-
-  const strokeWidth = useSelector((s) => {
-    const shape = tld.getShape(s.data, id)
-    if (shape === undefined) return 0
-    const style = getShapeStyle(shape?.style)
-    return +style.strokeWidth
-  })
-
-  const transform = useSelector((s) => {
-    const shape = tld.getShape(s.data, id)
-    if (shape === undefined) return ''
-    const center = getShapeUtils(shape).getCenter(shape)
     const rotation = shape.rotation * (180 / Math.PI)
-    const parentPoint = tld.getShape(s.data, shape.parentId)?.point || [0, 0]
+    const transform = `
-
-    return `
-      translate(${vec.neg(parentPoint)})
     rotate(${rotation}, ${center})
     translate(${shape.point})
     `
-  })
-
-  const isCurrentParent = useSelector((s) => {
-    return s.data.currentParentId === id
-  })
-
-  const events = useShapeEvents(id, isCurrentParent, rGroup)
-
-  const shape = tld.getShape(state.data, id)
-
-  if (!shape) {
-    console.warn('Could not find that shape:', id)
-    return null
-  }
-
-  // From here on, not reactive—if we're here, we can trust that the
-  // shape in state is a shape with changes that we need to render.
-
-  const { isParent, isForeignObject, canStyleFill } = getShapeUtils(shape)
 
     return (
-    <StyledGroup
+      <g
-      id={id + '-group'}
         ref={rGroup}
+        id={shape.id}
         transform={transform}
-      isCurrentParent={isCurrentParent}
+        filter={isHovered ? 'url(#expand)' : 'none'}
         {...events}
       >
-      {isForeignObject ? (
+        {isEditing && shape.type === ShapeType.Text ? (
-        <ForeignObjectHover id={id} />
+          <EditingTextShape shape={shape} />
         ) : (
-        <EventSoak
+          <RenderedShape
-          as="use"
+            shape={shape}
-          href={'#' + id}
+            isEditing={isEditing}
-          strokeWidth={strokeWidth + 8}
+            isHovered={isHovered}
-          variant={canStyleFill ? 'filled' : 'hollow'}
+            isSelected={isSelected}
+            isCurrentParent={isCurrentParent}
           />
         )}
-
+      </g>
-      {!isHidden &&
-        (isForeignObject ? (
-          <ForeignObjectRender id={id} />
-        ) : (
-          <RealShape id={id} isParent={isParent} strokeWidth={strokeWidth} />
-        ))}
-
-      {isParent &&
-        children.map((shapeId) => <Shape key={shapeId} id={shapeId} />)}
-    </StyledGroup>
     )
+  },
+  shallowEqual
+)
+
+export default Shape
+
+interface RenderedShapeProps {
+  shape: _Shape
+  isEditing: boolean
+  isHovered: boolean
+  isSelected: boolean
+  isCurrentParent: boolean
 }
 
-export default memo(Shape)
+const RenderedShape = memo(
-
+  function RenderedShape({
-interface RealShapeProps {
+    shape,
-  id: string
+    isEditing,
-  isParent: boolean
+    isHovered,
-  strokeWidth: number
+    isSelected,
-}
+    isCurrentParent,
-
+  }: RenderedShapeProps) {
-const RealShape = memo(function RealShape({
+    return getShapeUtils(shape).render(shape, {
-  id,
+      isEditing,
-  isParent,
+      isHovered,
-  strokeWidth,
+      isSelected,
-}: RealShapeProps) {
+      isCurrentParent,
-  return (
+    })
-    <StyledShape
+  },
-      as="use"
+  (prev, next) => {
-      data-shy={isParent}
+    if (
-      href={'#' + id}
+      prev.isEditing !== next.isEditing ||
-      strokeWidth={strokeWidth}
+      prev.isHovered !== next.isHovered ||
-    />
+      prev.isSelected !== next.isSelected ||
-  )
+      prev.isCurrentParent !== next.isCurrentParent
-})
+    ) {
-
+      return false
-const ForeignObjectHover = memo(function ForeignObjectHover({
-  id,
-}: {
-  id: string
-}) {
-  const size = useSelector((s) => {
-    const shape = tld.getPage(s.data).shapes[id]
-    if (shape === undefined) return [0, 0]
-    const bounds = getShapeUtils(shape).getBounds(shape)
-
-    return [bounds.width, bounds.height]
-  }, deepCompareArrays)
-
-  return (
-    <EventSoak
-      as="rect"
-      width={size[0]}
-      height={size[1]}
-      strokeWidth={1.5}
-      variant={'ghost'}
-    />
-  )
-})
-
-const ForeignObjectRender = memo(function ForeignObjectRender({
-  id,
-}: {
-  id: string
-}) {
-  const shape = useShape(id)
-
-  const rFocusable = useRef<HTMLTextAreaElement>(null)
-
-  const isEditing = useSelector((s) => s.data.editingId === id)
-
-  useEffect(() => {
-    if (isEditing) {
-      setTimeout(() => {
-        const elm = rFocusable.current
-        if (!elm) return
-        elm.focus()
-      }, 0)
     }
-  }, [isEditing])
 
-  if (shape === undefined) return null
+    if (next.shape !== prev.shape) {
+      return !getShapeUtils(next.shape).shouldRender(next.shape, prev.shape)
+    }
 
-  return getShapeUtils(shape).render(shape, { isEditing, ref: rFocusable })
+    return true
-})
+  }
+)
 
-const StyledShape = styled('path', {
+function EditingTextShape({ shape }: { shape: TextShape }) {
-  strokeLinecap: 'round',
+  const ref = useRef<HTMLTextAreaElement>(null)
-  strokeLinejoin: 'round',
-  pointerEvents: 'none',
-})
 
-const EventSoak = styled('use', {
+  return getShapeUtils(shape).render(shape, {
-  opacity: 0,
+    ref,
-  strokeLinecap: 'round',
+    isEditing: true,
-  strokeLinejoin: 'round',
+    isHovered: false,
-  variants: {
+    isSelected: false,
-    variant: {
+    isCurrentParent: false,
-      ghost: {
+  })
-        pointerEvents: 'all',
+}
-        filter: 'none',
-        opacity: 0,
-      },
-      hollow: {
-        pointerEvents: 'stroke',
-      },
-      filled: {
-        pointerEvents: 'all',
-      },
-    },
-  },
-})
-
-const StyledGroup = styled('g', {
-  outline: 'none',
-
-  '& > *[data-shy=true]': {
-    opacity: 0,
-  },
-
-  '&:hover': {
-    '& > *[data-shy=true]': {
-      opacity: 1,
-    },
-  },
-
-  variants: {
-    isCurrentParent: {
-      true: {
-        '& > *[data-shy=true]': {
-          opacity: 1,
-        },
-      },
-    },
-  },
-})

hooks/useCanvasEvents.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { MutableRefObject, useCallback } from 'react'
+import { MutableRefObject, useCallback, useEffect } from 'react'
 import state from 'state'
 import {
   fastBrushSelect,
@@ -74,6 +74,19 @@ export default function useCanvasEvents(
     // }
   }, [])
 
+  // Send event on iOS when a user presses the "Done" key while editing a text element
+  useEffect(() => {
+    function handleFocusOut() {
+      state.send('BLURRED_EDITING_SHAPE')
+    }
+
+    document.addEventListener('focusout', handleFocusOut)
+
+    return () => {
+      document.removeEventListener('focusout', handleFocusOut)
+    }
+  }, [])
+
   return {
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,

hooks/usePageShapes.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import state, { useSelector } from 'state'
 import { getShapeUtils } from 'state/shape-utils'
-import { PageState, Bounds, ShapeType } from 'types'
+import { PageState, Bounds, ShapeType, Shape } from 'types'
 import {
   boundsCollide,
   boundsContain,
@@ -12,7 +12,7 @@ import tld from 'utils/tld'
 
 const viewportCache = new WeakMap<PageState, Bounds>()
 
-export default function usePageShapes(): string[] {
+export default function usePageShapes(): Shape[] {
   // Reset the viewport cache when the window resizes
   useEffect(() => {
     const handleResize = debounce(() => state.send('RESIZED_WINDOW'), 32)
@@ -35,8 +35,7 @@ export default function usePageShapes(): string[] {
 
     const viewport = viewportCache.get(pageState)
 
-    const shapesToShow = s.values.currentShapes
+    const shapesToShow = s.values.currentShapes.filter((shape) => {
-      .filter((shape) => {
       if (shape.type === ShapeType.Ray || shape.type === ShapeType.Line) {
         return true
       }
@@ -47,7 +46,6 @@ export default function usePageShapes(): string[] {
         boundsCollide(viewport, shapeBounds)
       )
     })
-      .map((shape) => shape.id)
 
     return shapesToShow
   }, deepCompareArrays)

state/commands/change-page.ts

@@ -1,6 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
+import tld from 'utils/tld'
 import storage from 'state/storage'
 
 export default function changePage(data: Data, toPageId: string): void {
@@ -17,11 +18,15 @@ export default function changePage(data: Data, toPageId: string): void {
         storage.loadPage(data, data.document.id, toPageId)
         data.currentPageId = toPageId
         data.currentParentId = toPageId
+
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
       undo(data) {
         storage.loadPage(data, data.document.id, fromPageId)
         data.currentPageId = fromPageId
         data.currentParentId = fromPageId
+
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
     })
   )

state/commands/create-page.ts

@@ -2,6 +2,7 @@ import Command from './command'
 import history from '../history'
 import { Data, Page, PageState } from 'types'
 import { uniqueId } from 'utils/utils'
+import tld from 'utils/tld'
 import storage from 'state/storage'
 
 export default function createPage(data: Data, goToPage = true): void {
@@ -25,6 +26,7 @@ export default function createPage(data: Data, goToPage = true): void {
 
         storage.savePage(data, data.document.id, page.id)
         storage.saveDocumentToLocalStorage(data)
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
       undo(data) {
         const { page, currentPageId } = snapshot
@@ -32,6 +34,7 @@ export default function createPage(data: Data, goToPage = true): void {
         delete data.pageStates[page.id]
         data.currentPageId = currentPageId
         storage.saveDocumentToLocalStorage(data)
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
     })
   )

state/commands/move-to-page.ts

@@ -87,6 +87,8 @@ export default function moveToPageCommand(data: Data, newPageId: string): void {
 
         // Move to the new page
         data.currentPageId = toPageId
+
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
       undo(data) {
         const fromPageId = newPageId
@@ -141,6 +143,8 @@ export default function moveToPageCommand(data: Data, newPageId: string): void {
         tld.setSelectedIds(data, [...selectedIds])
 
         data.currentPageId = toPageId
+
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
     })
   )

state/hacks.ts

@@ -90,6 +90,8 @@ export function fastZoomUpdate(point: number[], delta: number): void {
 
   data.pageStates[data.currentPageId].camera = deepClone(camera)
 
+  tld.setZoomCSS(camera.zoom)
+
   state.forceData(freeze(data))
 }
 
@@ -116,6 +118,8 @@ export function fastPinchCamera(
 
   data.pageStates[data.currentPageId] = { ...pageState }
 
+  tld.setZoomCSS(camera.zoom)
+
   state.forceData(freeze(data))
 }
 

state/shape-styles.ts

@@ -77,5 +77,5 @@ export const defaultStyle: ShapeStyles = {
   color: ColorStyle.Black,
   size: SizeStyle.Medium,
   isFilled: false,
-  dash: DashStyle.Solid,
+  dash: DashStyle.Draw,
 }

state/shape-utils/arrow.tsx

@@ -7,7 +7,6 @@ import {
   getBoundsFromPoints,
   translateBounds,
   pointInBounds,
-  pointInCircle,
   circleFromThreePoints,
   isAngleBetween,
   getPerfectDashProps,
@@ -103,7 +102,7 @@ const arrow = registerShapeUtils<ArrowShape>({
   },
 
   render(shape) {
-    const { id, bend, handles, style } = shape
+    const { bend, handles, style } = shape
     const { start, end, bend: _bend } = handles
 
     const isStraightLine =
@@ -146,11 +145,11 @@ const arrow = registerShapeUtils<ArrowShape>({
           <path
             d={path}
             fill="none"
-            stroke="transparent"
             strokeWidth={Math.max(8, strokeWidth * 2)}
             strokeDasharray="none"
             strokeDashoffset="none"
             strokeLinecap="round"
+            strokeLinejoin="round"
           />
           <path
             d={path}
@@ -160,6 +159,7 @@ const arrow = registerShapeUtils<ArrowShape>({
             strokeDasharray={strokeDasharray}
             strokeDashoffset={strokeDashoffset}
             strokeLinecap="round"
+            strokeLinejoin="round"
           />
         </>
       )
@@ -206,6 +206,7 @@ const arrow = registerShapeUtils<ArrowShape>({
             strokeDasharray="none"
             strokeDashoffset="none"
             strokeLinecap="round"
+            strokeLinejoin="round"
           />
           <path
             d={path}
@@ -215,22 +216,28 @@ const arrow = registerShapeUtils<ArrowShape>({
             strokeDasharray={strokeDasharray}
             strokeDashoffset={strokeDashoffset}
             strokeLinecap="round"
-          ></path>
+            strokeLinejoin="round"
+          />
         </>
       )
     }
 
+    const sw = strokeWidth * 1.618
+
     return (
-      <g id={id}>
+      <g pointerEvents="all">
         {shaftPath}
         {shape.decorations.start === Decoration.Arrow && (
           <path
             d={getArrowHeadPath(shape, start.point, insetStart)}
             fill="none"
             stroke={styles.stroke}
-            strokeWidth={strokeWidth * 1.618}
+            strokeWidth={sw}
             strokeDashoffset="none"
             strokeDasharray="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            pointerEvents="stroke"
           />
         )}
         {shape.decorations.end === Decoration.Arrow && (
@@ -238,9 +245,12 @@ const arrow = registerShapeUtils<ArrowShape>({
             d={getArrowHeadPath(shape, end.point, insetEnd)}
             fill="none"
             stroke={styles.stroke}
-            strokeWidth={strokeWidth * 1.618}
+            strokeWidth={sw}
             strokeDashoffset="none"
             strokeDasharray="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            pointerEvents="stroke"
           />
         )}
       </g>
@@ -302,21 +312,8 @@ const arrow = registerShapeUtils<ArrowShape>({
     return vec.add(shape.point, vec.med(start.point, end.point))
   },
 
-  hitTest(shape, point) {
+  hitTest() {
-    const { start, end } = shape.handles
+    return true
-    if (shape.bend === 0) {
-      return (
-        vec.distanceToLineSegment(
-          start.point,
-          end.point,
-          vec.sub(point, shape.point)
-        ) < 4
-      )
-    }
-
-    const [cx, cy, r] = getCtp(shape)
-
-    return !pointInCircle(point, vec.add(shape.point, [cx, cy]), r - 4)
   },
 
   hitTestBounds(this, shape, brushBounds) {

state/shape-utils/dot.tsx

@@ -20,13 +20,9 @@ const dot = registerShapeUtils<DotShape>({
   },
 
   render(shape) {
-    const { id } = shape
-
     const styles = getShapeStyle(shape.style)
 
-    return (
+    return <use href="#dot" stroke={styles.stroke} fill={styles.stroke} />
-      <use id={id} href="#dot" stroke={styles.stroke} fill={styles.stroke} />
-    )
   },
 
   getBounds(shape) {

state/shape-utils/draw.tsx

@@ -40,29 +40,32 @@ const draw = registerShapeUtils<DrawShape>({
     return shape.points !== prev.points || shape.style !== prev.style
   },
 
-  render(shape) {
+  render(shape, { isHovered }) {
-    const { id, points, style } = shape
+    const { points, style } = shape
 
     const styles = getShapeStyle(style)
 
     const strokeWidth = +styles.strokeWidth
 
     const shouldFill =
+      style.isFilled &&
       points.length > 3 &&
       vec.dist(points[0], points[points.length - 1]) < +styles.strokeWidth * 2
 
     // For very short lines, draw a point instead of a line
 
     if (points.length > 0 && points.length < 3) {
+      const sw = strokeWidth * 0.618
+
       return (
-        <g id={id}>
         <circle
           r={strokeWidth * 0.618}
           fill={styles.stroke}
           stroke={styles.stroke}
-            strokeWidth={styles.strokeWidth}
+          strokeWidth={sw}
+          pointerEvents="all"
+          filter={isHovered ? 'url(#expand)' : 'none'}
         />
-        </g>
       )
     }
 
@@ -78,13 +81,15 @@ const draw = registerShapeUtils<DrawShape>({
       })
 
       return (
-        <g id={id}>
+        <>
           {shouldFill && (
             <path
               d={polygonPathData}
-              strokeWidth="0"
               stroke="none"
               fill={styles.fill}
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              pointerEvents="fill"
             />
           )}
           <path
@@ -92,8 +97,12 @@ const draw = registerShapeUtils<DrawShape>({
             fill={styles.stroke}
             stroke={styles.stroke}
             strokeWidth={strokeWidth}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+            pointerEvents="all"
+            filter={isHovered ? 'url(#expand)' : 'none'}
           />
-        </g>
+        </>
       )
     }
 
@@ -119,25 +128,32 @@ const draw = registerShapeUtils<DrawShape>({
 
     const path = simplePathCache.get(points)
 
+    const sw = strokeWidth * 1.618
+
     return (
-      <g id={id}>
+      <>
-        {style.dash !== DashStyle.Solid && (
-          <path
-            d={path}
-            fill="transparent"
-            stroke="transparent"
-            strokeWidth={strokeWidth * 2}
-          />
-        )}
         <path
           d={path}
           fill={shouldFill ? styles.fill : 'none'}
+          stroke="transparent"
+          strokeWidth={Math.min(4, strokeWidth * 2)}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          pointerEvents={shouldFill ? 'all' : 'stroke'}
+        />
+        <path
+          d={path}
+          fill="transparent"
           stroke={styles.stroke}
-          strokeWidth={strokeWidth * 1.618}
+          strokeWidth={sw}
           strokeDasharray={strokeDasharray}
           strokeDashoffset={strokeDashoffset}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          pointerEvents="stroke"
+          filter={isHovered ? 'url(#expand)' : 'none'}
         />
-      </g>
+      </>
     )
   },
 
@@ -160,13 +176,8 @@ const draw = registerShapeUtils<DrawShape>({
     return getBoundsCenter(this.getBounds(shape))
   },
 
-  hitTest(shape, point) {
+  hitTest() {
-    const pt = vec.sub(point, shape.point)
+    return true
-    const min = +getShapeStyle(shape.style).strokeWidth
-    return shape.points.some(
-      (curr, i) =>
-        i > 0 && vec.distanceToLineSegment(shape.points[i - 1], curr, pt) < min
-    )
   },
 
   hitTestBounds(this, shape, brushBounds) {

state/shape-utils/ellipse.tsx

@@ -43,7 +43,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
   },
 
   render(shape) {
-    const { id, radiusX, radiusY, style } = shape
+    const { radiusX, radiusY, style } = shape
     const styles = getShapeStyle(style)
     const strokeWidth = +styles.strokeWidth
 
@@ -58,25 +58,26 @@ const ellipse = registerShapeUtils<EllipseShape>({
       const path = pathCache.get(shape)
 
       return (
-        <g id={id}>
+        <>
           {style.isFilled && (
             <ellipse
-              id={id}
               cx={radiusX}
               cy={radiusY}
               rx={rx}
               ry={ry}
               stroke="none"
               fill={styles.fill}
+              pointerEvents="fill"
             />
           )}
           <path
             d={path}
             fill={styles.stroke}
             stroke={styles.stroke}
-            strokeWidth={styles.strokeWidth}
+            strokeWidth={strokeWidth}
+            pointerEvents="all"
           />
-        </g>
+        </>
       )
     }
 
@@ -92,21 +93,21 @@ const ellipse = registerShapeUtils<EllipseShape>({
       4
     )
 
+    const sw = strokeWidth * 1.618
+
     return (
-      <g id={id}>
       <ellipse
-          id={id}
         cx={radiusX}
         cy={radiusY}
         rx={rx}
         ry={ry}
         fill={styles.fill}
         stroke={styles.stroke}
-          strokeWidth={strokeWidth * 1.618}
+        strokeWidth={sw}
         strokeDasharray={strokeDasharray}
         strokeDashoffset={strokeDashoffset}
+        pointerEvents={style.isFilled ? 'all' : 'stroke'}
       />
-      </g>
     )
   },
 

state/shape-utils/group.tsx

@@ -26,11 +26,10 @@ const group = registerShapeUtils<GroupShape>({
   },
 
   render(shape) {
-    const { id, size } = shape
+    const { size } = shape
 
     return (
       <StyledGroupShape
-        id={id}
         width={size[0]}
         height={size[1]}
         data-shy={true}

state/shape-utils/line.tsx

@@ -26,7 +26,7 @@ const line = registerShapeUtils<LineShape>({
     return shape.direction !== prev.direction || shape.style !== prev.style
   },
 
-  render(shape) {
+  render(shape, { isHovered }) {
     const { id, direction } = shape
     const [x1, y1] = vec.add([0, 0], vec.mul(direction, 10000))
     const [x2, y2] = vec.sub([0, 0], vec.mul(direction, 10000))
@@ -34,7 +34,7 @@ const line = registerShapeUtils<LineShape>({
     const styles = getShapeStyle(shape.style)
 
     return (
-      <g id={id}>
+      <g id={id} filter={isHovered ? 'url(#expand)' : 'none'}>
         <ThinLine x1={x1} y1={y1} x2={x2} y2={y2} stroke={styles.stroke} />
         <circle r={4} fill="transparent" />
         <use href="#dot" fill="black" />

state/shape-utils/polyline.tsx

@@ -29,17 +29,19 @@ const polyline = registerShapeUtils<PolylineShape>({
     return shape.points !== prev.points || shape.style !== prev.style
   },
   render(shape) {
-    const { id, points } = shape
+    const { points, style } = shape
 
-    const styles = getShapeStyle(shape.style)
+    const styles = getShapeStyle(style)
 
     return (
       <polyline
-        id={id}
         points={points.toString()}
         stroke={styles.stroke}
-        strokeWidth={styles.strokeWidth}
+        strokeWidth={styles.strokeWidth * 1.618}
         fill={shape.style.isFilled ? styles.fill : 'none'}
+        pointerEvents={style.isFilled ? 'all' : 'stroke'}
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     )
   },
@@ -61,19 +63,8 @@ const polyline = registerShapeUtils<PolylineShape>({
     return [bounds.minX + bounds.width / 2, bounds.minY + bounds.height / 2]
   },
 
-  hitTest(shape, point) {
+  hitTest() {
-    const pt = vec.sub(point, shape.point)
-    let prev = shape.points[0]
-
-    for (let i = 1; i < shape.points.length; i++) {
-      const curr = shape.points[i]
-      if (vec.distanceToLineSegment(prev, curr, pt) < 4) {
     return true
-      }
-      prev = curr
-    }
-
-    return false
   },
 
   hitTestBounds(this, shape, brushBounds) {
@@ -125,7 +116,7 @@ const polyline = registerShapeUtils<PolylineShape>({
 
   canTransform: true,
   canChangeAspectRatio: true,
-  canStyleFill: false,
+  canStyleFill: true,
 })
 
 export default polyline

state/shape-utils/ray.tsx

@@ -26,18 +26,18 @@ const ray = registerShapeUtils<RayShape>({
     return shape.direction !== prev.direction || shape.style !== prev.style
   },
   render(shape) {
-    const { id, direction } = shape
+    const { direction } = shape
 
     const styles = getShapeStyle(shape.style)
 
     const [x2, y2] = vec.add([0, 0], vec.mul(direction, 10000))
 
     return (
-      <g id={id}>
+      <>
         <ThinLine x1={0} y1={0} x2={x2} y2={y2} stroke={styles.stroke} />
         <circle r={4} fill="transparent" />
         <use href="#dot" />
-      </g>
+      </>
     )
   },
 

state/shape-utils/rectangle.tsx

@@ -28,7 +28,7 @@ const rectangle = registerShapeUtils<RectangleShape>({
     return shape.size !== prev.size || shape.style !== prev.style
   },
 
-  render(shape) {
+  render(shape, { isHovered }) {
     const { id, size, radius, style } = shape
     const styles = getShapeStyle(style)
     const strokeWidth = +styles.strokeWidth
@@ -39,7 +39,8 @@ const rectangle = registerShapeUtils<RectangleShape>({
       })
 
       return (
-        <g id={id}>
+        <>
+          {style.isFilled && (
             <rect
               rx={radius}
               ry={radius}
@@ -51,13 +52,16 @@ const rectangle = registerShapeUtils<RectangleShape>({
               fill={styles.fill}
               stroke={styles.stroke}
             />
+          )}
           <path
             d={pathData}
             fill={styles.stroke}
             stroke={styles.stroke}
             strokeWidth={styles.strokeWidth}
+            filter={isHovered ? 'url(#expand)' : 'none'}
+            pointerEvents={style.isFilled ? 'all' : 'stroke'}
           />
-        </g>
+        </>
       )
     }
 
@@ -97,17 +101,21 @@ const rectangle = registerShapeUtils<RectangleShape>({
     })
 
     return (
-      <g id={id}>
+      <>
         <rect
           x={sw / 2}
           y={sw / 2}
           width={w}
           height={h}
           fill={styles.fill}
-          stroke="none"
+          stroke="transparent"
+          strokeWidth={sw}
+          pointerEvents={style.isFilled ? 'all' : 'stroke'}
         />
+        <g filter={isHovered ? 'url(#expand)' : 'none'} pointerEvents="stroke">
           {paths}
         </g>
+      </>
     )
   },
 

state/shape-utils/text.tsx

@@ -1,4 +1,4 @@
-import { uniqueId, isMobile, getFromCache } from 'utils/utils'
+import { uniqueId, getFromCache } from 'utils/utils'
 import vec from 'utils/vec'
 import TextAreaUtils from 'utils/text-area'
 import { TextShape, ShapeType } from 'types'
@@ -106,7 +106,13 @@ const text = registerShapeUtils<TextShape>({
       }
     }
 
-    function handleBlur() {
+    function handleBlur(e: React.FocusEvent<HTMLTextAreaElement>) {
+      if (isEditing) {
+        e.currentTarget.focus()
+        e.currentTarget.select()
+        return
+      }
+
       setTimeout(() => state.send('BLURRED_EDITING_SHAPE', { id }), 0)
     }
 
@@ -115,22 +121,18 @@ const text = registerShapeUtils<TextShape>({
       state.send('FOCUSED_EDITING_SHAPE', { id })
     }
 
-    function handlePointerDown(e: React.PointerEvent<HTMLTextAreaElement>) {
+    function handlePointerDown() {
-      if (e.currentTarget.selectionEnd !== 0) {
+      if (ref.current.selectionEnd !== 0) {
-        e.currentTarget.selectionEnd = 0
+        ref.current.selectionEnd = 0
       }
     }
 
     const fontSize = getFontSize(shape.style.size) * shape.scale
     const lineHeight = fontSize * 1.4
 
-    if (ref === undefined) {
-      throw Error('This component should receive a ref.')
-    }
-
     if (!isEditing) {
       return (
-        <g id={id} pointerEvents="none">
+        <>
           {text.split('\n').map((str, i) => (
             <text
               key={i}
@@ -138,13 +140,13 @@ const text = registerShapeUtils<TextShape>({
               y={4 + fontSize / 2 + i * lineHeight}
               fontFamily="Verveine Regular"
               fontStyle="normal"
-              fontWeight="regular"
+              fontWeight="500"
               fontSize={fontSize}
               width={bounds.width}
               height={bounds.height}
               fill={styles.stroke}
               color={styles.stroke}
-              stroke={styles.stroke}
+              stroke="none"
               xmlSpace="preserve"
               dominantBaseline="mathematical"
               alignmentBaseline="mathematical"
@@ -152,15 +154,20 @@ const text = registerShapeUtils<TextShape>({
               {str}
             </text>
           ))}
-        </g>
+        </>
       )
     }
+
+    if (ref === undefined) {
+      throw Error('This component should receive a ref when editing.')
+    }
+
     return (
       <foreignObject
-        id={id}
         width={bounds.width}
         height={bounds.height}
         pointerEvents="none"
+        onPointerDown={(e) => e.stopPropagation()}
       >
         <StyledTextArea
           ref={ref as React.RefObject<HTMLTextAreaElement>}
@@ -177,7 +184,7 @@ const text = registerShapeUtils<TextShape>({
           autoSave="false"
           placeholder=""
           color={styles.stroke}
-          autoFocus={!!isMobile()}
+          autoFocus={true}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onKeyDown={handleKeyDown}
@@ -287,6 +294,7 @@ const StyledTextArea = styled('textarea', {
   minWidth: 1,
   lineHeight: 1.4,
   outline: 0,
+  fontWeight: '500',
   backgroundColor: '$boundsBg',
   overflow: 'hidden',
   pointerEvents: 'all',

state/state.ts

@@ -663,16 +663,8 @@ const state = createState({
           onExit: ['completeSession', 'clearEditingId'],
           on: {
             EDITED_SHAPE: { do: 'updateEditSession' },
-            BLURRED_EDITING_SHAPE: [
+            POINTED_SHAPE: [
-              { unless: 'isEditingShape' },
               {
-                get: 'editingShape',
-                if: 'shouldDeleteShape',
-                do: ['cancelSession', 'deleteSelection'],
-              },
-              { to: 'selecting' },
-            ],
-            POINTED_SHAPE: {
                 unless: 'isPointingEditingShape',
                 if: 'isPointingTextShape',
                 do: [
@@ -685,12 +677,31 @@ const state = createState({
                   'startEditSession',
                 ],
               },
-            CANCELLED: [
+            ],
+            BLURRED_EDITING_SHAPE: [
               {
+                unless: 'isEditingShape',
                 get: 'editingShape',
                 if: 'shouldDeleteShape',
-                do: 'breakSession',
+                do: ['cancelSession', 'deleteSelection'],
-                else: 'cancelSession',
+              },
+              { to: 'selecting' },
+            ],
+            POINTED_CANVAS: [
+              {
+                unless: 'isEditingShape',
+                get: 'editingShape',
+                if: 'shouldDeleteShape',
+                do: ['cancelSession', 'deleteSelection'],
+              },
+              { to: 'selecting' },
+            ],
+            CANCELLED: [
+              {
+                unless: 'isEditingShape',
+                get: 'editingShape',
+                if: 'shouldDeleteShape',
+                do: ['cancelSession', 'deleteSelection'],
               },
               { to: 'selecting' },
             ],

types.ts

@@ -607,8 +607,11 @@ export interface ShapeUtility<K extends Shape> {
   render(
     this: ShapeUtility<K>,
     shape: K,
-    info: {
+    info?: {
-      isEditing: boolean
+      isEditing?: boolean
+      isHovered?: boolean
+      isSelected?: boolean
+      isCurrentParent?: boolean
       ref?: React.MutableRefObject<HTMLTextAreaElement>
     }
   ): JSX.Element

utils/utils.ts

@@ -65,6 +65,43 @@ export function decompress(s: string): string {
   return s
 }
 
+/**
+ * Get whether two objects are shallowly equal.
+ *
+ * ### Example
+ *
+ *```ts
+ * shallowEqual(objA, objB) // true
+ *```
+ */
+export function shallowEqual(
+  objA: Record<string, unknown>,
+  objB: Record<string, unknown>
+): boolean {
+  if (objA === objB) return true
+
+  if (!objA || !objB) return false
+
+  const aKeys = Object.keys(objA)
+  const bKeys = Object.keys(objB)
+  const len = aKeys.length
+
+  if (bKeys.length !== len) return false
+
+  for (let i = 0; i < len; i++) {
+    const key = aKeys[i]
+
+    if (
+      objA[key] !== objB[key] ||
+      !Object.prototype.hasOwnProperty.call(objB, key)
+    ) {
+      return false
+    }
+  }
+
+  return true
+}
+
 /**
  * Recursively clone an object or array.
  * @param obj