Fix blocking text element

components/canvas/canvas.tsx

@@ -46,6 +46,7 @@ export default function Canvas() {
 
 const MainSVG = styled('svg', {
   position: 'fixed',
+  overflow: 'hidden',
   top: 0,
   left: 0,
   width: '100%',

components/canvas/shape.tsx

@@ -67,6 +67,7 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps) {
             height={bounds.height}
             strokeWidth={1.5}
             variant={'ghost'}
+            onDoubleClick={() => console.log('aux')}
             {...events}
           />
         ) : (

components/editor.tsx

@@ -2,26 +2,26 @@ import useKeyboardEvents from 'hooks/useKeyboardEvents'
 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 />
@@ -38,6 +38,7 @@ const Spacer = styled('div', {
 
 const Layout = styled('main', {
   position: 'fixed',
+  overflow: 'hidden',
   top: 0,
   left: 0,
   bottom: 0,

hooks/useCanvasEvents.ts

@@ -24,14 +24,6 @@ export default function useCanvasEvents(
     }
   }, [])
 
-  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
 
@@ -66,10 +58,18 @@ export default function useCanvasEvents(
     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

@@ -28,6 +28,7 @@ Object.assign(mdiv.style, {
   top: '-500px',
   left: '0px',
   zIndex: '9999',
+  pointerEvents: 'none',
 })
 
 mdiv.tabIndex = -1
@@ -118,6 +119,9 @@ const text = registerShapeUtils<TextShape>({
             autoComplete="false"
             autoCapitalize="false"
             autoCorrect="false"
+            autoSave="false"
+            placeholder=""
+            name="text"
             autoFocus={isMobile() ? true : false}
             onFocus={handleFocus}
             onBlur={handleBlur}
@@ -236,10 +240,12 @@ const StyledText = styled('div', {
   overflow: 'hidden',
   pointerEvents: 'none',
   userSelect: 'none',
+  WebkitUserSelect: 'none',
   display: 'inline-block',
 })
 
 const StyledTextArea = styled('textarea', {
+  zIndex: 1,
   width: '100%',
   height: '100%',
   border: 'none',
@@ -256,4 +262,5 @@ const StyledTextArea = styled('textarea', {
   display: 'inline-block',
   userSelect: 'text',
   WebkitUserSelect: 'text',
+  WebkitTouchCallout: 'none',
 })

state/inputs.tsx

@@ -7,12 +7,13 @@ const DOUBLE_CLICK_DURATION = 300
 
 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]
 
@@ -31,12 +32,13 @@ class Inputs {
     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]
 
@@ -57,7 +59,7 @@ class Inputs {
       this.points[touch.identifier] = info
     }
 
-    this.lastPointer = info
+    this.pointer = info
     return info
   }
 
@@ -79,7 +81,7 @@ class Inputs {
     this.points[e.pointerId] = info
     this.activePointerId = e.pointerId
 
-    this.lastPointer = info
+    this.pointer = info
     return info
   }
 
@@ -98,7 +100,7 @@ class Inputs {
       altKey,
     }
 
-    this.lastPointer = info
+    this.pointer = info
     return info
   }
 
@@ -122,7 +124,8 @@ class Inputs {
       this.points[e.pointerId] = info
     }
 
-    this.lastPointer = info
+    this.pointer = info
+
     return info
   }
 
@@ -146,10 +149,10 @@ class Inputs {
     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
   }
 
@@ -165,19 +168,15 @@ class Inputs {
   }
 
   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

@@ -427,6 +427,7 @@ const state = createState({
                 // MOVED_POINTER: 'updateBrushSession', using hacks.fastBrushSelect
                 PANNED_CAMERA: 'updateBrushSession',
                 STOPPED_POINTING: { to: 'selecting' },
+                STARTED_PINCHING: { to: 'pinching' },
                 CANCELLED: { do: 'cancelSession', to: 'selecting' },
               },
             },
@@ -478,35 +479,6 @@ const state = createState({
               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: {