Fix blocking text element

components/canvas/canvas.tsx

 
 const MainSVG = styled('svg', {
   position: 'fixed',
+  overflow: 'hidden',
   top: 0,
   left: 0,
   width: '100%',

components/canvas/shape.tsx

             height={bounds.height}
             strokeWidth={1.5}
             variant={'ghost'}
+            onDoubleClick={() => console.log('aux')}
             {...events}
           />
         ) : (

components/editor.tsx

 import useLoadOnMount from 'hooks/useLoadOnMount'
 import Canvas from './canvas/canvas'
 import StatusBar from './status-bar'
-import CodePanel from './code-panel/code-panel'
-import ControlsPanel from './controls-panel/controls-panel'
 import ToolsPanel from './tools-panel/tools-panel'
 import StylePanel from './style-panel/style-panel'
-import { useSelector } from 'state'
 import styled from 'styles'
 import PagePanel from './page-panel/page-panel'
-import ContextMenu from './canvas/context-menu/context-menu'
+import dynamic from 'next/dynamic'
+import ControlsPanel from './controls-panel/controls-panel'
+// import { useSelector } from 'state'
+// const CodePanel = dynamic(() => import('./code-panel/code-panel'))
 
 export default function Editor() {
   useKeyboardEvents()
   useLoadOnMount()
 
-  const hasControls = useSelector(
-    (s) => Object.keys(s.data.codeControls).length > 0
-  )
+  // const hasControls = useSelector(
+  //   (s) => Object.keys(s.data.codeControls).length > 0
+  // )
 
   return (
     <Layout>
-      <CodePanel />
+      {/* <CodePanel /> */}
       <PagePanel />
       <Spacer />
       <StylePanel />
 
 const Layout = styled('main', {
   position: 'fixed',
+  overflow: 'hidden',
   top: 0,
   left: 0,
   bottom: 0,

hooks/useCanvasEvents.ts

     }
   }, [])
 
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    if (isMobile()) {
-      if (e.touches.length === 2) {
-        state.send('TOUCH_UNDO')
-      } else state.send('TOUCHED_CANVAS')
-    }
-  }, [])
-
   const handlePointerMove = useCallback((e: React.PointerEvent) => {
     if (!inputs.canAccept(e.pointerId)) return
 
     state.send('STOPPED_POINTING', { id: 'canvas', ...inputs.pointerUp(e) })
   }, [])
 
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    // if (isMobile()) {
+    //   if (e.touches.length === 2) {
+    //     state.send('TOUCH_UNDO')
+    //   } else state.send('TOUCHED_CANVAS')
+    // }
+  }, [])
+
   return {
     onPointerDown: handlePointerDown,
-    onTouchStart: handleTouchStart,
     onPointerMove: handlePointerMove,
     onPointerUp: handlePointerUp,
+    onTouchStart: handleTouchStart,
   }
 }

lib/shape-utils/text.tsx

   top: '-500px',
   left: '0px',
   zIndex: '9999',
+  pointerEvents: 'none',
 })
 
 mdiv.tabIndex = -1
             autoComplete="false"
             autoCapitalize="false"
             autoCorrect="false"
+            autoSave="false"
+            placeholder=""
+            name="text"
             autoFocus={isMobile() ? true : false}
             onFocus={handleFocus}
             onBlur={handleBlur}
   overflow: 'hidden',
   pointerEvents: 'none',
   userSelect: 'none',
+  WebkitUserSelect: 'none',
   display: 'inline-block',
 })
 
 const StyledTextArea = styled('textarea', {
+  zIndex: 1,
   width: '100%',
   height: '100%',
   border: 'none',
   display: 'inline-block',
   userSelect: 'text',
   WebkitUserSelect: 'text',
+  WebkitTouchCallout: 'none',
 })

state/inputs.tsx

 
 class Inputs {
   activePointerId?: number
-  lastPointerUpTime = 0
+  pointerUpTime = 0
   points: Record<string, PointerInfo> = {}
-  lastPointer: PointerInfo
+  pointer: PointerInfo
 
   touchStart(e: TouchEvent | React.TouchEvent, target: string) {
     const { shiftKey, ctrlKey, metaKey, altKey } = e
+    e.preventDefault()
 
     const touch = e.changedTouches[0]
 
     this.points[touch.identifier] = info
     this.activePointerId = touch.identifier
 
-    this.lastPointer = info
+    this.pointer = info
     return info
   }
 
   touchMove(e: TouchEvent | React.TouchEvent) {
     const { shiftKey, ctrlKey, metaKey, altKey } = e
+    e.preventDefault()
 
     const touch = e.changedTouches[0]
 
       this.points[touch.identifier] = info
     }
 
-    this.lastPointer = info
+    this.pointer = info
     return info
   }
 
     this.points[e.pointerId] = info
     this.activePointerId = e.pointerId
 
-    this.lastPointer = info
+    this.pointer = info
     return info
   }
 
       altKey,
     }
 
-    this.lastPointer = info
+    this.pointer = info
     return info
   }
 
       this.points[e.pointerId] = info
     }
 
-    this.lastPointer = info
+    this.pointer = info
+
     return info
   }
 
     delete this.activePointerId
 
     if (vec.dist(info.origin, info.point) < 8) {
-      this.lastPointerUpTime = Date.now()
+      this.pointerUpTime = Date.now()
     }
 
-    this.lastPointer = info
+    this.pointer = info
     return info
   }
 
   }
 
   isDoubleClick() {
-    if (!this.lastPointer) return
+    if (!this.pointer) return
 
-    const { origin, point } = this.lastPointer
+    const { origin, point } = this.pointer
 
     return (
-      Date.now() - this.lastPointerUpTime < DOUBLE_CLICK_DURATION &&
+      Date.now() - this.pointerUpTime < DOUBLE_CLICK_DURATION &&
       vec.dist(origin, point) < 8
     )
   }
-
-  get pointer() {
-    return this.points[Object.keys(this.points)[0]]
-  }
 }
 
 export default new Inputs()

state/state.ts

                 // MOVED_POINTER: 'updateBrushSession', using hacks.fastBrushSelect
                 PANNED_CAMERA: 'updateBrushSession',
                 STOPPED_POINTING: { to: 'selecting' },
+                STARTED_PINCHING: { to: 'pinching' },
                 CANCELLED: { do: 'cancelSession', to: 'selecting' },
               },
             },
               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: {