Adds most of text feature, except creation

components/canvas/bounds/bounding-box.tsx

 import CornerHandle from './corner-handle'
 import EdgeHandle from './edge-handle'
 import RotateHandle from './rotate-handle'
-import Handles from './handles'
 
 export default function Bounds() {
   const isBrushing = useSelector((s) => s.isIn('brushSelecting'))

components/canvas/bounds/bounds-bg.tsx

-import { useCallback, useRef } from 'react'
+import { useRef } from 'react'
 import state, { useSelector } from 'state'
 import inputs from 'state/inputs'
 import styled from 'styles'
   if (!inputs.canAccept(e.pointerId)) return
   e.stopPropagation()
   e.currentTarget.setPointerCapture(e.pointerId)
+  const info = inputs.pointerDown(e, 'bounds')
 
   if (e.button === 0) {
-    state.send('POINTED_BOUNDS', inputs.pointerDown(e, 'bounds'))
+    state.send('POINTED_BOUNDS', info)
   } else if (e.button === 2) {
-    state.send('RIGHT_POINTED', inputs.pointerDown(e, 'bounds'))
+    state.send('RIGHT_POINTED', info)
   }
 }
 

components/canvas/bounds/center-handle.tsx

 const StyledBounds = styled('rect', {
   fill: 'none',
   stroke: '$bounds',
-  zStrokeWidth: 2,
+  zStrokeWidth: 1.5,
 
   variants: {
     isLocked: {
       true: {
-        zStrokeWidth: 1,
+        zStrokeWidth: 1.5,
         zDash: 2,
       },
     },

components/canvas/bounds/corner-handle.tsx

-import useHandleEvents from 'hooks/useBoundsHandleEvents'
+import useBoundsEvents from 'hooks/useBoundsEvents'
 import styled from 'styles'
 import { Corner, Bounds } from 'types'
 
   bounds: Bounds
   corner: Corner
 }) {
-  const events = useHandleEvents(corner)
+  const events = useBoundsEvents(corner)
 
   const isTop = corner === Corner.TopLeft || corner === Corner.TopRight
   const isLeft = corner === Corner.TopLeft || corner === Corner.BottomLeft
 const StyledCornerInner = styled('rect', {
   stroke: '$bounds',
   fill: '#fff',
-  zStrokeWidth: 2,
+  zStrokeWidth: 1.5,
 })

components/canvas/bounds/edge-handle.tsx

-import useHandleEvents from 'hooks/useBoundsHandleEvents'
+import useBoundsEvents from 'hooks/useBoundsEvents'
 import styled from 'styles'
 import { Edge, Bounds } from 'types'
 
   bounds: Bounds
   edge: Edge
 }) {
-  const events = useHandleEvents(edge)
+  const events = useBoundsEvents(edge)
 
   const isHorizontal = edge === Edge.Top || edge === Edge.Bottom
   const isFarEdge = edge === Edge.Right || edge === Edge.Bottom

components/canvas/bounds/rotate-handle.tsx

-import useHandleEvents from 'hooks/useBoundsHandleEvents'
+import useHandleEvents from 'hooks/useBoundsEvents'
 import styled from 'styles'
 import { Bounds } from 'types'
 
 const StyledRotateHandle = styled('circle', {
   stroke: '$bounds',
   fill: '#fff',
-  zStrokeWidth: 2,
+  zStrokeWidth: 1.5,
   cursor: 'grab',
 })

components/canvas/defs.tsx

 
   const currentPageShapeIds = useSelector(({ data }) => {
     return Object.values(getPage(data).shapes)
+      .filter(Boolean)
+      .filter((shape) => !getShapeUtils(shape).isForeignObject)
       .sort((a, b) => a.childIndex - b.childIndex)
       .map((shape) => shape.id)
   }, deepCompareArrays)
 
 const Def = memo(function Def({ id }: { id: string }) {
   const shape = useSelector((s) => getPage(s.data).shapes[id])
+
   if (!shape) return null
-  return getShapeUtils(shape).render(shape)
+  return getShapeUtils(shape).render(shape, { isEditing: false })
 })

components/canvas/page.tsx

         [window.innerWidth, window.innerHeight],
         s.data
       )
+
       viewportCache.set(pageState, {
         minX,
         minY,

components/canvas/shape.tsx

 import React, { useRef, memo } from 'react'
-import { useSelector } from 'state'
+import state, { useSelector } from 'state'
 import styled from 'styles'
 import { getShapeUtils } from 'lib/shape-utils'
 import { getBoundsCenter, getPage } from 'utils/utils'
 function Shape({ id, isSelecting, parentPoint }: ShapeProps) {
   const shape = useSelector((s) => getPage(s.data).shapes[id])
 
+  const isEditing = useSelector((s) => s.data.editingId === id)
+
   const rGroup = useRef<SVGGElement>(null)
 
-  const events = useShapeEvents(id, shape?.type === ShapeType.Group, rGroup)
+  const events = useShapeEvents(id, getShapeUtils(shape)?.isParent, rGroup)
 
   // This is a problem with deleted shapes. The hooks in this component
   // may sometimes run before the hook in the Page component, which means
   // detects the change and pulls this component.
   if (!shape) return null
 
-  const isGroup = shape.type === ShapeType.Group
+  const utils = getShapeUtils(shape)
+  const style = getShapeStyle(shape.style)
+  const shapeUtils = getShapeUtils(shape)
+  const { isShy, isParent, isForeignObject } = shapeUtils
 
-  const center = getShapeUtils(shape).getCenter(shape)
+  const bounds = shapeUtils.getBounds(shape)
+  const center = shapeUtils.getCenter(shape)
   const rotation = shape.rotation * (180 / Math.PI)
 
   const transform = `
   translate(${shape.point})
   `
 
-  const style = getShapeStyle(shape.style)
-
   return (
-    <StyledGroup ref={rGroup} transform={transform}>
-      {isSelecting && !isGroup && (
-        <HoverIndicator
-          as="use"
-          href={'#' + id}
-          strokeWidth={+style.strokeWidth + 4}
-          variant={getShapeUtils(shape).canStyleFill ? 'filled' : 'hollow'}
-          {...events}
-        />
-      )}
-
-      {!shape.isHidden && <RealShape isGroup={isGroup} id={id} style={style} />}
-      {isGroup &&
+    <StyledGroup
+      ref={rGroup}
+      transform={transform}
+      onBlur={() => state.send('BLURRED_SHAPE', { target: id })}
+    >
+      {isSelecting &&
+        !isShy &&
+        (isForeignObject ? (
+          <HoverIndicator
+            as="rect"
+            width={bounds.width}
+            height={bounds.height}
+            strokeWidth={1.5}
+            variant={'ghost'}
+            {...events}
+          />
+        ) : (
+          <HoverIndicator
+            as="use"
+            href={'#' + id}
+            strokeWidth={+style.strokeWidth + 4}
+            variant={getShapeUtils(shape).canStyleFill ? 'filled' : 'hollow'}
+            {...events}
+          />
+        ))}
+
+      {!shape.isHidden &&
+        (isForeignObject ? (
+          shapeUtils.render(shape, { isEditing })
+        ) : (
+          <RealShape
+            isParent={isParent}
+            id={id}
+            style={style}
+            isEditing={isEditing}
+          />
+        ))}
+
+      {isParent &&
         shape.children.map((shapeId) => (
           <Shape
             key={shapeId}
 }
 
 interface RealShapeProps {
-  isGroup: boolean
   id: string
   style: Partial<React.SVGProps<SVGUseElement>>
+  isParent: boolean
+  isEditing: boolean
 }
 
 const RealShape = memo(function RealShape({
-  isGroup,
   id,
   style,
+  isParent,
+  isEditing,
 }: RealShapeProps) {
-  return <StyledShape as="use" data-shy={isGroup} href={'#' + id} {...style} />
+  return <StyledShape as="use" data-shy={isParent} href={'#' + id} {...style} />
 })
 
 const StyledShape = styled('path', {
   stroke: '$selected',
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
-  transform: 'all .2s',
   fill: 'transparent',
   filter: 'url(#expand)',
   variants: {
     variant: {
+      ghost: {
+        pointerEvents: 'all',
+        filter: 'none',
+        opacity: 0,
+      },
       hollow: {
         pointerEvents: 'stroke',
       },

hooks/useBoundsHandleEvents.ts → hooks/useBoundsEvents.ts

-import { useCallback, useRef } from 'react'
+import { useCallback } from 'react'
 import inputs from 'state/inputs'
 import { Edge, Corner } from 'types'
 
 import state from '../state'
 
-export default function useBoundsHandleEvents(
-  handle: Edge | Corner | 'rotate'
-) {
+export default function useBoundsEvents(handle: Edge | Corner | 'rotate') {
   const onPointerDown = useCallback(
     (e) => {
-      if (e.buttons !== 1) return
       if (!inputs.canAccept(e.pointerId)) return
       e.stopPropagation()
       e.currentTarget.setPointerCapture(e.pointerId)
-      state.send('POINTED_BOUNDS_HANDLE', inputs.pointerDown(e, handle))
+
+      if (e.button === 0) {
+        const info = inputs.pointerDown(e, handle)
+
+        if (inputs.isDoubleClick() && !(info.altKey || info.metaKey)) {
+          state.send('DOUBLE_POINTED_BOUNDS_HANDLE', info)
+        }
+
+        state.send('POINTED_BOUNDS_HANDLE', info)
+      }
     },
     [handle]
   )

hooks/useKeyboardEvents.ts

 export default function useKeyboardEvents() {
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
-      if (metaKey(e) && !['i', 'r', 'j'].includes(e.key)) {
+      if (
+        metaKey(e) &&
+        ![
+          'a',
+          'i',
+          'r',
+          'j',
+          'ArrowLeft',
+          'ArrowRight',
+          'ArrowUp',
+          'ArrowDown',
+          'z',
+        ].includes(e.key)
+      ) {
         e.preventDefault()
       }
 

hooks/useShapeEvents.ts

 
 export default function useShapeEvents(
   id: string,
-  isGroup: boolean,
+  isParent: boolean,
   rGroup: MutableRefObject<SVGElement>
 ) {
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
-      if (isGroup) return
+      if (isParent) return
       if (!inputs.canAccept(e.pointerId)) return
       e.stopPropagation()
       rGroup.current.setPointerCapture(e.pointerId)
   const handlePointerEnter = useCallback(
     (e: React.PointerEvent) => {
       if (!inputs.canAccept(e.pointerId)) return
-      if (isGroup) {
+      if (isParent) {
         state.send('HOVERED_GROUP', inputs.pointerEnter(e, id))
       } else {
         state.send('HOVERED_SHAPE', inputs.pointerEnter(e, id))
     (e: React.PointerEvent) => {
       if (!inputs.canAccept(e.pointerId)) return
 
-      if (isGroup) {
+      if (isParent) {
         state.send('MOVED_OVER_GROUP', inputs.pointerEnter(e, id))
       } else {
         state.send('MOVED_OVER_SHAPE', inputs.pointerEnter(e, id))
   const handlePointerLeave = useCallback(
     (e: React.PointerEvent) => {
       if (!inputs.canAccept(e.pointerId)) return
-      if (isGroup) {
+      if (isParent) {
         state.send('UNHOVERED_GROUP', { target: id })
       } else {
         state.send('UNHOVERED_SHAPE', { target: id })

lib/code/ray.ts

       type: ShapeType.Ray,
       isGenerated: true,
       name: 'Ray',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       direction: [0, 1],

lib/shape-styles.ts

 import { SVGProps } from 'react'
-import { ColorStyle, DashStyle, Shape, ShapeStyles, SizeStyle } from 'types'
+import { ColorStyle, DashStyle, FontSize, ShapeStyles, SizeStyle } from 'types'
 
 export const strokes: Record<ColorStyle, string> = {
   [ColorStyle.White]: 'rgba(248, 249, 250, 1.000)',
   [DashStyle.Dotted]: (sw: number) => `0 ${sw * 1.5}`,
 }
 
+const fontSizes = {
+  [FontSize.Small]: 16,
+  [FontSize.Medium]: 28,
+  [FontSize.Large]: 32,
+  [FontSize.ExtraLarge]: 72,
+  auto: 'auto',
+}
+
 function getStrokeWidth(size: SizeStyle) {
   return strokeWidths[size]
 }
   return dashArrays[dash](strokeWidth)
 }
 
+export function getFontSize(size: FontSize) {
+  return fontSizes[size]
+}
+
+export function getFontStyle(size: FontSize, style: ShapeStyles) {
+  const fontSize = getFontSize(size)
+
+  return `${fontSize}px Verveine Regular`
+}
+
 export function getShapeStyle(
   style: ShapeStyles
 ): Partial<SVGProps<SVGUseElement>> {

lib/shape-utils/arrow.tsx

       type: ShapeType.Arrow,
       isGenerated: false,
       name: 'Arrow',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point,
       rotation: 0,

lib/shape-utils/circle.tsx

       type: ShapeType.Circle,
       isGenerated: false,
       name: 'Circle',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       rotation: 0,

lib/shape-utils/dot.tsx

       type: ShapeType.Dot,
       isGenerated: false,
       name: 'Dot',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       rotation: 0,

lib/shape-utils/draw.tsx

       type: ShapeType.Draw,
       isGenerated: false,
       name: 'Draw',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       points: [],

lib/shape-utils/ellipse.tsx

       type: ShapeType.Ellipse,
       isGenerated: false,
       name: 'Ellipse',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       radiusX: 1,

lib/shape-utils/group.tsx

 
 const group = registerShapeUtils<GroupShape>({
   boundsCache: new WeakMap([]),
+  isShy: true,
+  isParent: true,
 
   create(props) {
     return {
       type: ShapeType.Group,
       isGenerated: false,
       name: 'Group',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       size: [1, 1],

lib/shape-utils/index.tsx

   ShapeBinding,
   Mutable,
   ShapeByType,
-  Data,
 } from 'types'
 import * as vec from 'utils/vec'
 import {
 import draw from './draw'
 import arrow from './arrow'
 import group from './group'
+import text from './text'
 
 /*
 Shape Utiliies
   // Whether to show transform controls when this shape is selected.
   canTransform: boolean
 
-  // Whether the shape's aspect ratio can change
+  // Whether the shape's aspect ratio can change.
   canChangeAspectRatio: boolean
 
-  // Whether the shape's style can be filled
+  // Whether the shape's style can be filled.
   canStyleFill: boolean
 
+  // Whether the shape may be edited in an editing mode
+  canEdit: boolean
+
+  // Whether the shape is a foreign object.
+  isForeignObject: boolean
+
+  // Whether the shape can contain other shapes.
+  isParent: boolean
+
+  // Whether the shape is only shown when on hovered.
+  isShy: boolean
+
   // Create a new shape.
   create(props: Partial<K>): K
 
     handle: Partial<K['handles']>
   ): ShapeUtility<K>
 
+  // Respond when a user double clicks the shape's bounds.
+  onBoundsReset(this: ShapeUtility<K>, shape: Mutable<K>): ShapeUtility<K>
+
+  // Respond when a user double clicks the center of the shape.
+  onDoubleFocus(this: ShapeUtility<K>, shape: Mutable<K>): ShapeUtility<K>
+
   // Clean up changes when a session ends.
   onSessionComplete(this: ShapeUtility<K>, shape: Mutable<K>): ShapeUtility<K>
 
   // Render a shape to JSX.
-  render(this: ShapeUtility<K>, shape: K): JSX.Element
+  render(
+    this: ShapeUtility<K>,
+    shape: K,
+    info: { isEditing: boolean }
+  ): JSX.Element
 
   // Get the bounds of the a shape.
   getBounds(this: ShapeUtility<K>, shape: K): Bounds
 
   // Test whether bounds collide with or contain a shape.
   hitTestBounds(this: ShapeUtility<K>, shape: K, bounds: Bounds): boolean
+
+  getShouldDelete(this: ShapeUtility<K>, shape: K): boolean
 }
 
 // A mapping of shape types to shape utilities.
   [ShapeType.Ray]: ray,
   [ShapeType.Draw]: draw,
   [ShapeType.Arrow]: arrow,
-  [ShapeType.Text]: arrow,
+  [ShapeType.Text]: text,
   [ShapeType.Group]: group,
 }
 
  * @returns
  */
 export function getShapeUtils<T extends Shape>(shape: T): ShapeUtility<T> {
-  return shapeUtilityMap[shape.type] as ShapeUtility<T>
+  return shapeUtilityMap[shape?.type] as ShapeUtility<T>
 }
 
 function getDefaultShapeUtil<T extends Shape>(): ShapeUtility<T> {
     canTransform: true,
     canChangeAspectRatio: true,
     canStyleFill: true,
+    canEdit: false,
+    isShy: false,
+    isParent: false,
+    isForeignObject: false,
 
     create(props) {
       return {
         isGenerated: false,
         point: [0, 0],
         name: 'Shape',
-        parentId: 'page0',
+        parentId: 'page1',
         childIndex: 0,
         rotation: 0,
         isAspectRatioLocked: false,
       return this
     },
 
+    onDoubleFocus() {
+      return this
+    },
+
+    onBoundsReset() {
+      return this
+    },
+
     onSessionComplete() {
       return this
     },
       Object.assign(shape.style, style)
       return this
     },
+
+    getShouldDelete(shape) {
+      return false
+    },
   }
 }
 

lib/shape-utils/line.tsx

       type: ShapeType.Line,
       isGenerated: false,
       name: 'Line',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       direction: [0, 0],

lib/shape-utils/polyline.tsx

       type: ShapeType.Polyline,
       isGenerated: false,
       name: 'Polyline',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       points: [[0, 0]],

lib/shape-utils/ray.tsx

       type: ShapeType.Ray,
       isGenerated: false,
       name: 'Ray',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       direction: [0, 1],

lib/shape-utils/rectangle.tsx

       type: ShapeType.Rectangle,
       isGenerated: false,
       name: 'Rectangle',
-      parentId: 'page0',
+      parentId: 'page1',
       childIndex: 0,
       point: [0, 0],
       size: [1, 1],

lib/shape-utils/text.tsx

+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { TextShape, ShapeType, FontSize } from 'types'
+import { registerShapeUtils } from './index'
+import { defaultStyle, getFontStyle, getShapeStyle } from 'lib/shape-styles'
+import styled from 'styles'
+import state from 'state'
+import { useEffect, useRef } from 'react'
+
+// A div used for measurement
+
+if (document.getElementById('__textMeasure')) {
+  document.getElementById('__textMeasure').remove()
+}
+
+const mdiv = document.createElement('pre')
+mdiv.id = '__textMeasure'
+mdiv.style.whiteSpace = 'pre'
+mdiv.style.width = 'auto'
+mdiv.style.border = '1px solid red'
+mdiv.style.padding = '4px'
+mdiv.style.margin = '0px'
+mdiv.style.opacity = '0'
+mdiv.style.position = 'absolute'
+mdiv.style.top = '-500px'
+mdiv.style.left = '0px'
+mdiv.style.zIndex = '9999'
+document.body.appendChild(mdiv)
+
+const text = registerShapeUtils<TextShape>({
+  isForeignObject: true,
+  canChangeAspectRatio: false,
+  canEdit: true,
+
+  boundsCache: new WeakMap([]),
+
+  create(props) {
+    return {
+      id: uuid(),
+      seed: Math.random(),
+      type: ShapeType.Text,
+      isGenerated: false,
+      name: 'Text',
+      parentId: 'page1',
+      childIndex: 0,
+      point: [0, 0],
+      rotation: 0,
+      isAspectRatioLocked: false,
+      isLocked: false,
+      isHidden: false,
+      style: defaultStyle,
+      text: '',
+      size: 'auto',
+      fontSize: FontSize.Medium,
+      ...props,
+    }
+  },
+
+  render(shape, { isEditing }) {
+    const { id, text, style } = shape
+    const styles = getShapeStyle(style)
+
+    const font = getFontStyle(shape.fontSize, shape.style)
+    const bounds = this.getBounds(shape)
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      state.send('EDITED_SHAPE', { change: { text: e.currentTarget.value } })
+    }
+
+    return (
+      <foreignObject
+        id={id}
+        x={0}
+        y={0}
+        width={bounds.width}
+        height={bounds.height}
+        pointerEvents="none"
+      >
+        <StyledText
+          key={id}
+          style={{
+            font,
+            color: styles.fill,
+          }}
+          value={text}
+          onChange={handleChange}
+          isEditing={isEditing}
+          onFocus={(e) => e.currentTarget.select()}
+        />
+      </foreignObject>
+    )
+  },
+
+  getBounds(shape) {
+    const [minX, minY] = shape.point
+    let width: number
+    let height: number
+
+    if (shape.size === 'auto') {
+      // Calculate a size by rendering text into a div
+      mdiv.innerHTML = shape.text + '&nbsp;'
+      mdiv.style.font = getFontStyle(shape.fontSize, shape.style)
+      ;[width, height] = [mdiv.offsetWidth, mdiv.offsetHeight]
+    } else {
+      // Use the shape's explicit size for width and height.
+      ;[width, height] = shape.size
+    }
+
+    return {
+      minX,
+      maxX: minX + width,
+      minY,
+      maxY: minY + height,
+      width,
+      height,
+    }
+  },
+
+  hitTest(shape, test) {
+    return true
+  },
+
+  transform(shape, bounds, { initialShape, transformOrigin, scaleX, scaleY }) {
+    if (shape.rotation === 0 && !shape.isAspectRatioLocked) {
+      shape.size = [bounds.width, bounds.height]
+      shape.point = [bounds.minX, bounds.minY]
+    } else {
+      if (initialShape.size === 'auto') return
+
+      shape.size = vec.mul(
+        initialShape.size,
+        Math.min(Math.abs(scaleX), Math.abs(scaleY))
+      )
+
+      shape.point = [
+        bounds.minX +
+          (bounds.width - shape.size[0]) *
+            (scaleX < 0 ? 1 - transformOrigin[0] : transformOrigin[0]),
+        bounds.minY +
+          (bounds.height - shape.size[1]) *
+            (scaleY < 0 ? 1 - transformOrigin[1] : transformOrigin[1]),
+      ]
+
+      shape.rotation =
+        (scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0)
+          ? -initialShape.rotation
+          : initialShape.rotation
+    }
+
+    return this
+  },
+
+  transformSingle(shape, bounds) {
+    shape.size = [bounds.width, bounds.height]
+    shape.point = [bounds.minX, bounds.minY]
+    return this
+  },
+
+  onBoundsReset(shape) {
+    shape.size = 'auto'
+    return this
+  },
+
+  getShouldDelete(shape) {
+    return shape.text.length === 0
+  },
+})
+
+export default text
+
+const StyledText = styled('textarea', {
+  width: '100%',
+  height: '100%',
+  border: 'none',
+  padding: '4px',
+  whiteSpace: 'pre',
+  resize: 'none',
+  minHeight: 1,
+  minWidth: 1,
+  outline: 'none',
+  backgroundColor: 'transparent',
+  overflow: 'hidden',
+
+  variants: {
+    isEditing: {
+      true: {
+        backgroundColor: '$boundsBg',
+        pointerEvents: 'all',
+      },
+    },
+  },
+})

public/vercel.svg

-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

state/commands/edit.ts

+import Command from './command'
+import history from '../history'
+import { Data } from 'types'
+import { getPage, getShape } from 'utils/utils'
+import { EditSnapshot } from 'state/sessions/edit-session'
+import { getShapeUtils } from 'lib/shape-utils'
+
+export default function handleCommand(
+  data: Data,
+  before: EditSnapshot,
+  after: EditSnapshot
+) {
+  history.execute(
+    data,
+    new Command({
+      name: 'edited_shape',
+      category: 'canvas',
+      do(data, isInitial) {
+        const { initialShape, currentPageId } = after
+
+        const page = getPage(data, currentPageId)
+
+        page.shapes[initialShape.id] = initialShape
+
+        const shape = page.shapes[initialShape.id]
+
+        if (getShapeUtils(shape).getShouldDelete(shape)) {
+          delete page.shapes[initialShape.id]
+        }
+      },
+      undo(data) {
+        const { initialShape, currentPageId } = before
+
+        const page = getPage(data, currentPageId)
+
+        page.shapes[initialShape.id] = initialShape
+      },
+    })
+  )
+}

state/commands/index.ts

 import transformSingle from './transform-single'
 import translate from './translate'
 import ungroup from './ungroup'
+import edit from './edit'
+import resetBounds from './reset-bounds'
 
 const commands = {
   align,
   distribute,
   draw,
   duplicate,
+  edit,
   generate,
   group,
   handle,
   move,
   moveToPage,
   nudge,
+  resetBounds,
   rotate,
   rotateCcw,
   stretch,

state/commands/reset-bounds.ts

+import Command from './command'
+import history from '../history'
+import { Data } from 'types'
+import { getPage, getSelectedShapes } from 'utils/utils'
+import { current } from 'immer'
+import { getShapeUtils } from 'lib/shape-utils'
+
+export default function resetBoundsCommand(data: Data) {
+  const initialShapes = Object.fromEntries(
+    getSelectedShapes(current(data)).map((shape) => [shape.id, shape])
+  )
+
+  history.execute(
+    data,
+    new Command({
+      name: 'reset_bounds',
+      category: 'canvas',
+      do(data) {
+        getSelectedShapes(data).forEach((shape) => {
+          getShapeUtils(shape).onBoundsReset(shape)
+        })
+      },
+      undo(data) {
+        const page = getPage(data)
+        getSelectedShapes(data).forEach((shape) => {
+          page.shapes[shape.id] = initialShapes[shape.id]
+        })
+      },
+    })
+  )
+}

state/data.ts

-import { Data, ShapeType } from 'types'
+import { Data, FontSize, ShapeType } from 'types'
 import shapeUtils from 'lib/shape-utils'
 
 export const defaultDocument: Data['document'] = {
   id: '0001',
-  name: 'My Document',
+  name: 'My Default Document',
   pages: {
     page1: {
       id: 'page1',
       name: 'Page 1',
       childIndex: 0,
       shapes: {
+        // textShape0: shapeUtils[ShapeType.Text].create({
+        //   id: 'textShape0',
+        //   point: [0, 0],
+        //   text: 'Short',
+        //   childIndex: 0,
+        // }),
+        // textShape1: shapeUtils[ShapeType.Text].create({
+        //   id: 'textShape1',
+        //   point: [100, 150],
+        //   fontSize: FontSize.Small,
+        //   text: 'Well, this is a pretty long title. I hope it all still works',
+        //   childIndex: 1,
+        // }),
+        // textShape2: shapeUtils[ShapeType.Text].create({
+        //   id: 'textShape2',
+        //   point: [100, 200],
+        //   fontSize: FontSize.Medium,
+        //   text: 'Well, this is a pretty long title. I hope it all still works',
+        //   childIndex: 2,
+        // }),
+        // textShape3: shapeUtils[ShapeType.Text].create({
+        //   id: 'textShape3',
+        //   point: [100, 250],
+        //   fontSize: FontSize.Large,
+        //   text: 'Well, this is a pretty long title. I hope it all still works',
+        //   childIndex: 3,
+        // }),
+        // textShape4: shapeUtils[ShapeType.Text].create({
+        //   id: 'textShape4',
+        //   point: [100, 300],
+        //   fontSize: FontSize.ExtraLarge,
+        //   text: 'Well, this is a pretty long title. I hope it all still works',
+        //   childIndex: 4,
+        // }),
         // arrowShape0: shapeUtils[ShapeType.Arrow].create({
         //   id: 'arrowShape0',
         //   point: [200, 200],

state/inputs.tsx

 import React from 'react'
 import { PointerInfo } from 'types'
+import * as vec from 'utils/vec'
 import { isDarwin, getPoint } from 'utils/utils'
 
 const DOUBLE_CLICK_DURATION = 300
 
 class Inputs {
   activePointerId?: number
-  lastPointerDownTime = 0
+  lastPointerUpTime = 0
   points: Record<string, PointerInfo> = {}
 
   touchStart(e: TouchEvent | React.TouchEvent, target: string) {
     return info
   }
 
-  pointerUp(e: PointerEvent | React.PointerEvent) {
+  pointerUp = (e: PointerEvent | React.PointerEvent) => {
     const { shiftKey, ctrlKey, metaKey, altKey } = e
 
     const prev = this.points[e.pointerId]
 
     delete this.points[e.pointerId]
     delete this.activePointerId
-    this.lastPointerDownTime = Date.now()
+
+    if (vec.dist(info.origin, info.point) < 8) {
+      this.lastPointerUpTime = Date.now()
+    }
 
     return info
   }
 
-  wheel(e: WheelEvent) {
+  wheel = (e: WheelEvent) => {
     const { shiftKey, ctrlKey, metaKey, altKey } = e
     return { point: getPoint(e), shiftKey, ctrlKey, metaKey, altKey }
   }
 
-  canAccept(pointerId: PointerEvent['pointerId']) {
+  canAccept = (pointerId: PointerEvent['pointerId']) => {
     return (
       this.activePointerId === undefined || this.activePointerId === pointerId
     )
   }
 
   isDoubleClick() {
-    return Date.now() - this.lastPointerDownTime < DOUBLE_CLICK_DURATION
+    const { origin, point } = this.pointer
+    return (
+      Date.now() - this.lastPointerUpTime < DOUBLE_CLICK_DURATION &&
+      vec.dist(origin, point) < 8
+    )
   }
 
   get pointer() {

state/sessions/edit-session.ts

+import { Data, LineShape, RayShape, Shape } from 'types'
+import * as vec from 'utils/vec'
+import BaseSession from './base-session'
+import commands from 'state/commands'
+import { current } from 'immer'
+import {
+  getPage,
+  getSelectedIds,
+  getSelectedShapes,
+  getShape,
+} from 'utils/utils'
+import { getShapeUtils } from 'lib/shape-utils'
+
+export default class EditSession extends BaseSession {
+  snapshot: EditSnapshot
+
+  constructor(data: Data) {
+    super(data)
+    this.snapshot = getEditSnapshot(data)
+  }
+
+  update(data: Data, change: Partial<Shape>) {
+    const initialShape = this.snapshot.initialShape
+    const shape = getShape(data, initialShape.id)
+    const utils = getShapeUtils(shape)
+    Object.entries(change).forEach(([key, value]) => {
+      utils.setProperty(shape, key as keyof Shape, value as Shape[keyof Shape])
+    })
+  }
+
+  cancel(data: Data) {
+    const initialShape = this.snapshot.initialShape
+    const page = getPage(data)
+    page.shapes[initialShape.id] = initialShape
+  }
+
+  complete(data: Data) {
+    commands.edit(data, this.snapshot, getEditSnapshot(data))
+  }
+}
+
+export function getEditSnapshot(data: Data) {
+  const initialShape = getSelectedShapes(current(data))[0]
+
+  return {
+    currentPageId: data.currentPageId,
+    initialShape,
+  }
+}
+
+export type EditSnapshot = ReturnType<typeof getEditSnapshot>

state/sessions/index.ts

 import TransformSingleSession from './transform-single-session'
 import TranslateSession from './translate-session'
 import HandleSession from './handle-session'
+import EditSession from './edit-session'
 
 export {
   ArrowSession,
   TransformSingleSession,
   TranslateSession,
   HandleSession,
+  EditSession,
 }

state/state.ts

   getCameraZoom,
   getSelectedIds,
   setSelectedIds,
+  getPageState,
 } from 'utils/utils'
 import {
   Data,
   DashStyle,
   SizeStyle,
   ColorStyle,
+  FontSize,
 } from 'types'
 import session from './session'
 import { pointInBounds } from 'utils/bounds'
     size: SizeStyle.Medium,
     color: ColorStyle.Black,
     dash: DashStyle.Solid,
+    fontSize: FontSize.Medium,
     isFilled: false,
   },
   activeTool: 'select',
   boundsRotation: 0,
   pointedId: null,
   hoveredId: null,
+  editingId: null,
   currentPageId: 'page1',
   currentParentId: 'page1',
   currentCodeFileId: 'file0',
         else: ['zoomCameraToFit', 'zoomCameraToActual'],
       },
       on: {
-        ZOOMED_CAMERA: {
-          do: 'zoomCamera',
-        },
-        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: {
           if: 'hasSelection',
           do: 'aspectLockSelection',
         },
-        SELECTED_SELECT_TOOL: { to: 'selecting' },
-        SELECTED_DRAW_TOOL: { unless: 'isReadOnly', to: 'draw' },
-        SELECTED_ARROW_TOOL: { unless: 'isReadOnly', to: 'arrow' },
-        SELECTED_DOT_TOOL: { unless: 'isReadOnly', to: 'dot' },
-        SELECTED_CIRCLE_TOOL: { unless: 'isReadOnly', to: 'circle' },
-        SELECTED_ELLIPSE_TOOL: { unless: 'isReadOnly', to: 'ellipse' },
-        SELECTED_RAY_TOOL: { unless: 'isReadOnly', to: 'ray' },
-        SELECTED_LINE_TOOL: { unless: 'isReadOnly', to: 'line' },
-        SELECTED_POLYLINE_TOOL: { unless: 'isReadOnly', to: 'polyline' },
-        SELECTED_RECTANGLE_TOOL: { unless: 'isReadOnly', to: 'rectangle' },
         TOGGLED_CODE_PANEL_OPEN: 'toggleCodePanel',
         TOGGLED_STYLE_PANEL_OPEN: 'toggleStylePanel',
         POINTED_CANVAS: ['closeStylePanel', 'clearCurrentParentId'],
         CHANGED_STYLE: ['updateStyles', 'applyStylesToSelection'],
-        SELECTED_ALL: { to: 'selecting', do: 'selectAll' },
-        NUDGED: { do: 'nudgeSelection' },
         USED_PEN_DEVICE: 'enablePenLock',
         DISABLED_PEN_LOCK: 'disablePenLock',
         CLEARED_PAGE: {
         CREATED_PAGE: ['clearSelectedIds', 'createPage'],
         DELETED_PAGE: { unless: 'hasOnlyOnePage', do: 'deletePage' },
         LOADED_FROM_FILE: 'loadDocumentFromJson',
+        PANNED_CAMERA: {
+          do: 'panCamera',
+        },
       },
       initial: 'selecting',
       states: {
               if: ['hasSelection', 'selectionIncludesGroups'],
               do: 'ungroupSelection',
             },
+            SELECTED_ALL: { to: 'selecting', do: 'selectAll' },
+            NUDGED: { do: 'nudgeSelection' },
+            SELECTED_SELECT_TOOL: { to: 'selecting' },
+            SELECTED_DRAW_TOOL: { unless: 'isReadOnly', to: 'draw' },
+            SELECTED_ARROW_TOOL: { unless: 'isReadOnly', to: 'arrow' },
+            SELECTED_DOT_TOOL: { unless: 'isReadOnly', to: 'dot' },
+            SELECTED_CIRCLE_TOOL: { unless: 'isReadOnly', to: 'circle' },
+            SELECTED_ELLIPSE_TOOL: { unless: 'isReadOnly', to: 'ellipse' },
+            SELECTED_RAY_TOOL: { unless: 'isReadOnly', to: 'ray' },
+            SELECTED_LINE_TOOL: { unless: 'isReadOnly', to: 'line' },
+            SELECTED_POLYLINE_TOOL: { unless: 'isReadOnly', to: 'polyline' },
+            SELECTED_RECTANGLE_TOOL: { unless: 'isReadOnly', to: 'rectangle' },
+            ZOOMED_CAMERA: {
+              do: 'zoomCamera',
+            },
+            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',
           },
           initial: 'notPointing',
           states: {
                   to: 'rotatingSelection',
                   else: { to: 'transformingSelection' },
                 },
+                STARTED_EDITING_SHAPE: {
+                  get: 'firstSelectedShape',
+                  if: ['hasSingleSelection', 'canEditSelectedShape'],
+                  do: 'setEditingId',
+                  to: 'editingShape',
+                },
+                DOUBLE_POINTED_BOUNDS_HANDLE: {
+                  if: 'hasSingleSelection',
+                  do: 'resetShapeBounds',
+                },
                 POINTED_HANDLE: { to: 'translatingHandles' },
                 MOVED_OVER_SHAPE: {
                   if: 'pointHitsShape',
                 },
                 UNHOVERED_SHAPE: 'clearHoveredId',
                 DOUBLE_POINTED_SHAPE: [
+                  'setPointedId',
+                  {
+                    if: 'isPointedShapeSelected',
+                    then: {
+                      get: 'firstSelectedShape',
+                      if: 'canEditSelectedShape',
+                      do: 'setEditingId',
+                      to: 'editingShape',
+                    },
+                  },
                   {
                     unless: 'isPressingShiftKey',
                     do: [
             },
           },
         },
+        editingShape: {
+          onEnter: 'startEditSession',
+          onExit: 'clearEditingId',
+          on: {
+            EDITED_SHAPE: { do: 'updateEditSession' },
+            BLURRED_SHAPE: { do: 'completeSession', to: 'selecting' },
+            CANCELLED: { do: 'cancelSession', to: 'selecting' },
+          },
+        },
         pinching: {
           on: {
             // Pinching uses hacks.fastPinchCamera
               to: 'pinching.toolPinching',
             },
             TOGGLED_TOOL_LOCK: 'toggleToolLock',
+            SELECTED_SELECT_TOOL: { to: 'selecting' },
+            SELECTED_DRAW_TOOL: { unless: 'isReadOnly', to: 'draw' },
+            SELECTED_ARROW_TOOL: { unless: 'isReadOnly', to: 'arrow' },
+            SELECTED_DOT_TOOL: { unless: 'isReadOnly', to: 'dot' },
+            SELECTED_CIRCLE_TOOL: { unless: 'isReadOnly', to: 'circle' },
+            SELECTED_ELLIPSE_TOOL: { unless: 'isReadOnly', to: 'ellipse' },
+            SELECTED_RAY_TOOL: { unless: 'isReadOnly', to: 'ray' },
+            SELECTED_LINE_TOOL: { unless: 'isReadOnly', to: 'line' },
+            SELECTED_POLYLINE_TOOL: { unless: 'isReadOnly', to: 'polyline' },
+            SELECTED_RECTANGLE_TOOL: { unless: 'isReadOnly', to: 'rectangle' },
+            ZOOMED_CAMERA: {
+              do: 'zoomCamera',
+            },
+            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',
           },
           states: {
             draw: {
     newRectangle() {
       return ShapeType.Rectangle
     },
+    firstSelectedShape(data) {
+      return getSelectedShapes(data)[0]
+    },
   },
   conditions: {
     isPointingCanvas(data, payload: PointerInfo) {
     isReadOnly(data) {
       return data.isReadOnly
     },
+    canEditSelectedShape(data, payload, result: Shape) {
+      return getShapeUtils(result).canEdit
+    },
     distanceImpliesDrag(data, payload: PointerInfo) {
       return vec.dist2(payload.origin, payload.point) > 8
     },
     hasSelection(data) {
       return getSelectedIds(data).size > 0
     },
+    hasSingleSelection(data) {
+      return getSelectedIds(data).size === 1
+    },
     hasMultipleSelection(data) {
       return getSelectedIds(data).size > 1
     },
       session.clear()
     },
 
+    // Editing
+    startEditSession(data) {
+      session.current = new Sessions.EditSession(data)
+    },
+    updateEditSession(data, payload: { change: Partial<Shape> }) {
+      session.current.update(data, payload.change)
+    },
+
     // Brushing
     startBrushSession(data, payload: PointerInfo) {
       session.current = new Sessions.BrushSession(
     ungroupSelection(data) {
       commands.ungroup(data)
     },
+    resetShapeBounds(data) {
+      commands.resetBounds(data)
+    },
+
+    /* --------------------- Editing -------------------- */
+
+    setEditingId(data) {
+      const selectedShape = getSelectedShapes(data)[0]
+      if (getShapeUtils(selectedShape).canEdit) {
+        data.editingId = selectedShape.id
+      }
+
+      getPageState(data).selectedIds = new Set([selectedShape.id])
+    },
+    clearEditingId(data) {
+      data.editingId = null
+    },
 
     /* ---------------------- Tool ---------------------- */
 
 
     /* ---------------------- Data ---------------------- */
 
+    restoreSavedData(data) {
+      storage.firstLoad(data)
+    },
+
     saveToFileSystem(data) {
       storage.saveToFileSystem(data)
     },
       storage.saveToLocalStorage(data)
     },
 
-    restoreSavedData(data) {
-      storage.firstLoad(data)
-    },
-
     clearBoundsRotation(data) {
       data.boundsRotation = 0
     },

state/storage.ts

 import * as fa from 'browser-fs-access'
 import { Data, Page, PageState, TLDocument } from 'types'
-import { lzw_decode, lzw_encode, setToArray } from 'utils/utils'
+import { decompress, compress, setToArray } from 'utils/utils'
 import state from './state'
 import { current } from 'immer'
 import { v4 as uuid } from 'uuid'
       return false
     }
 
-    const restoredData: any = JSON.parse(lzw_decode(savedData))
+    const restoredData: any = JSON.parse(decompress(savedData))
 
     this.load(data, restoredData)
   }
       )
 
       if (savedPage !== null) {
-        const restored: Page = JSON.parse(lzw_decode(savedPage))
+        const restored: Page = JSON.parse(decompress(savedPage))
         dataToSave.document.pages[pageId] = restored
       }
 
     // Save current data to local storage
     localStorage.setItem(
       storageId(fileId, 'document', fileId),
-      lzw_encode(dataToSave)
+      compress(dataToSave)
     )
   }
 
     const page = data.document.pages[pageId]
     const json = JSON.stringify(page)
 
-    localStorage.setItem(storageId(fileId, 'page', pageId), lzw_encode(json))
+    localStorage.setItem(storageId(fileId, 'page', pageId), compress(json))
 
     // Save page state
 
     const savedPage = localStorage.getItem(storageId(fileId, 'page', pageId))
 
     if (savedPage !== null) {
-      data.document.pages[pageId] = JSON.parse(lzw_decode(savedPage))
+      data.document.pages[pageId] = JSON.parse(decompress(savedPage))
     } else {
       data.document.pages[pageId] = {
         id: pageId,

styles/globals.css

-@import url("https://fonts.googleapis.com/css2?family=Recursive:wght@500;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@500;700&display=swap');
+@font-face {
+  font-family: 'Verveine Regular';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Verveine Regular'), url('/VerveineRegular.woff') format('woff');
+}

types.ts

     isToolLocked: boolean
     isPenLocked: boolean
   }
-  currentStyle: ShapeStyles
+  currentStyle: ShapeStyles & TextStyles
   activeTool: ShapeType | 'select'
   brush?: Bounds
   boundsRotation: number
   pointedId?: string
   hoveredId?: string
+  editingId?: string
   currentPageId: string
   currentParentId: string
   currentCodeFileId: string
   Dotted = 'Dotted',
 }
 
+export enum FontSize {
+  Small = 'Small',
+  Medium = 'Medium',
+  Large = 'Large',
+  ExtraLarge = 'ExtraLarge',
+}
+
 export type ShapeStyles = {
   color: ColorStyle
   size: SizeStyle
   isFilled: boolean
 }
 
+export type TextStyles = {
+  fontSize: FontSize
+}
+
 export interface BaseShape {
   id: string
   seed: number
 export interface TextShape extends BaseShape {
   type: ShapeType.Text
   text: string
+  size: number[] | 'auto'
+  fontSize: FontSize
 }
 
 export interface GroupShape extends BaseShape {

utils/utils.ts

   ]
 }
 
-export function lzw_encode(s: string) {
+export function compress(s: string) {
   return s
+
   const dict = {}
   const data = (s + '').split('')
 
 }
 
 // Decompress an LZW-encoded string
-export function lzw_decode(s: string) {
+export function decompress(s: string) {
   return s
 
   const dict = {}