Browse Source

Fix blocking text element

main
Steve Ruiz 4 years ago
parent
commit
1b9e8857e0

+ 1
- 0
components/canvas/canvas.tsx View File

46
 
46
 
47
 const MainSVG = styled('svg', {
47
 const MainSVG = styled('svg', {
48
   position: 'fixed',
48
   position: 'fixed',
49
+  overflow: 'hidden',
49
   top: 0,
50
   top: 0,
50
   left: 0,
51
   left: 0,
51
   width: '100%',
52
   width: '100%',

+ 1
- 0
components/canvas/shape.tsx View File

67
             height={bounds.height}
67
             height={bounds.height}
68
             strokeWidth={1.5}
68
             strokeWidth={1.5}
69
             variant={'ghost'}
69
             variant={'ghost'}
70
+            onDoubleClick={() => console.log('aux')}
70
             {...events}
71
             {...events}
71
           />
72
           />
72
         ) : (
73
         ) : (

+ 9
- 8
components/editor.tsx View File

2
 import useLoadOnMount from 'hooks/useLoadOnMount'
2
 import useLoadOnMount from 'hooks/useLoadOnMount'
3
 import Canvas from './canvas/canvas'
3
 import Canvas from './canvas/canvas'
4
 import StatusBar from './status-bar'
4
 import StatusBar from './status-bar'
5
-import CodePanel from './code-panel/code-panel'
6
-import ControlsPanel from './controls-panel/controls-panel'
7
 import ToolsPanel from './tools-panel/tools-panel'
5
 import ToolsPanel from './tools-panel/tools-panel'
8
 import StylePanel from './style-panel/style-panel'
6
 import StylePanel from './style-panel/style-panel'
9
-import { useSelector } from 'state'
10
 import styled from 'styles'
7
 import styled from 'styles'
11
 import PagePanel from './page-panel/page-panel'
8
 import PagePanel from './page-panel/page-panel'
12
-import ContextMenu from './canvas/context-menu/context-menu'
9
+import dynamic from 'next/dynamic'
10
+import ControlsPanel from './controls-panel/controls-panel'
11
+// import { useSelector } from 'state'
12
+// const CodePanel = dynamic(() => import('./code-panel/code-panel'))
13
 
13
 
14
 export default function Editor() {
14
 export default function Editor() {
15
   useKeyboardEvents()
15
   useKeyboardEvents()
16
   useLoadOnMount()
16
   useLoadOnMount()
17
 
17
 
18
-  const hasControls = useSelector(
19
-    (s) => Object.keys(s.data.codeControls).length > 0
20
-  )
18
+  // const hasControls = useSelector(
19
+  //   (s) => Object.keys(s.data.codeControls).length > 0
20
+  // )
21
 
21
 
22
   return (
22
   return (
23
     <Layout>
23
     <Layout>
24
-      <CodePanel />
24
+      {/* <CodePanel /> */}
25
       <PagePanel />
25
       <PagePanel />
26
       <Spacer />
26
       <Spacer />
27
       <StylePanel />
27
       <StylePanel />
38
 
38
 
39
 const Layout = styled('main', {
39
 const Layout = styled('main', {
40
   position: 'fixed',
40
   position: 'fixed',
41
+  overflow: 'hidden',
41
   top: 0,
42
   top: 0,
42
   left: 0,
43
   left: 0,
43
   bottom: 0,
44
   bottom: 0,

+ 9
- 9
hooks/useCanvasEvents.ts View File

24
     }
24
     }
25
   }, [])
25
   }, [])
26
 
26
 
27
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
28
-    if (isMobile()) {
29
-      if (e.touches.length === 2) {
30
-        state.send('TOUCH_UNDO')
31
-      } else state.send('TOUCHED_CANVAS')
32
-    }
33
-  }, [])
34
-
35
   const handlePointerMove = useCallback((e: React.PointerEvent) => {
27
   const handlePointerMove = useCallback((e: React.PointerEvent) => {
36
     if (!inputs.canAccept(e.pointerId)) return
28
     if (!inputs.canAccept(e.pointerId)) return
37
 
29
 
66
     state.send('STOPPED_POINTING', { id: 'canvas', ...inputs.pointerUp(e) })
58
     state.send('STOPPED_POINTING', { id: 'canvas', ...inputs.pointerUp(e) })
67
   }, [])
59
   }, [])
68
 
60
 
61
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
62
+    // if (isMobile()) {
63
+    //   if (e.touches.length === 2) {
64
+    //     state.send('TOUCH_UNDO')
65
+    //   } else state.send('TOUCHED_CANVAS')
66
+    // }
67
+  }, [])
68
+
69
   return {
69
   return {
70
     onPointerDown: handlePointerDown,
70
     onPointerDown: handlePointerDown,
71
-    onTouchStart: handleTouchStart,
72
     onPointerMove: handlePointerMove,
71
     onPointerMove: handlePointerMove,
73
     onPointerUp: handlePointerUp,
72
     onPointerUp: handlePointerUp,
73
+    onTouchStart: handleTouchStart,
74
   }
74
   }
75
 }
75
 }

+ 7
- 0
lib/shape-utils/text.tsx View File

28
   top: '-500px',
28
   top: '-500px',
29
   left: '0px',
29
   left: '0px',
30
   zIndex: '9999',
30
   zIndex: '9999',
31
+  pointerEvents: 'none',
31
 })
32
 })
32
 
33
 
33
 mdiv.tabIndex = -1
34
 mdiv.tabIndex = -1
118
             autoComplete="false"
119
             autoComplete="false"
119
             autoCapitalize="false"
120
             autoCapitalize="false"
120
             autoCorrect="false"
121
             autoCorrect="false"
122
+            autoSave="false"
123
+            placeholder=""
124
+            name="text"
121
             autoFocus={isMobile() ? true : false}
125
             autoFocus={isMobile() ? true : false}
122
             onFocus={handleFocus}
126
             onFocus={handleFocus}
123
             onBlur={handleBlur}
127
             onBlur={handleBlur}
236
   overflow: 'hidden',
240
   overflow: 'hidden',
237
   pointerEvents: 'none',
241
   pointerEvents: 'none',
238
   userSelect: 'none',
242
   userSelect: 'none',
243
+  WebkitUserSelect: 'none',
239
   display: 'inline-block',
244
   display: 'inline-block',
240
 })
245
 })
241
 
246
 
242
 const StyledTextArea = styled('textarea', {
247
 const StyledTextArea = styled('textarea', {
248
+  zIndex: 1,
243
   width: '100%',
249
   width: '100%',
244
   height: '100%',
250
   height: '100%',
245
   border: 'none',
251
   border: 'none',
256
   display: 'inline-block',
262
   display: 'inline-block',
257
   userSelect: 'text',
263
   userSelect: 'text',
258
   WebkitUserSelect: 'text',
264
   WebkitUserSelect: 'text',
265
+  WebkitTouchCallout: 'none',
259
 })
266
 })

+ 15
- 16
state/inputs.tsx View File

7
 
7
 
8
 class Inputs {
8
 class Inputs {
9
   activePointerId?: number
9
   activePointerId?: number
10
-  lastPointerUpTime = 0
10
+  pointerUpTime = 0
11
   points: Record<string, PointerInfo> = {}
11
   points: Record<string, PointerInfo> = {}
12
-  lastPointer: PointerInfo
12
+  pointer: PointerInfo
13
 
13
 
14
   touchStart(e: TouchEvent | React.TouchEvent, target: string) {
14
   touchStart(e: TouchEvent | React.TouchEvent, target: string) {
15
     const { shiftKey, ctrlKey, metaKey, altKey } = e
15
     const { shiftKey, ctrlKey, metaKey, altKey } = e
16
+    e.preventDefault()
16
 
17
 
17
     const touch = e.changedTouches[0]
18
     const touch = e.changedTouches[0]
18
 
19
 
31
     this.points[touch.identifier] = info
32
     this.points[touch.identifier] = info
32
     this.activePointerId = touch.identifier
33
     this.activePointerId = touch.identifier
33
 
34
 
34
-    this.lastPointer = info
35
+    this.pointer = info
35
     return info
36
     return info
36
   }
37
   }
37
 
38
 
38
   touchMove(e: TouchEvent | React.TouchEvent) {
39
   touchMove(e: TouchEvent | React.TouchEvent) {
39
     const { shiftKey, ctrlKey, metaKey, altKey } = e
40
     const { shiftKey, ctrlKey, metaKey, altKey } = e
41
+    e.preventDefault()
40
 
42
 
41
     const touch = e.changedTouches[0]
43
     const touch = e.changedTouches[0]
42
 
44
 
57
       this.points[touch.identifier] = info
59
       this.points[touch.identifier] = info
58
     }
60
     }
59
 
61
 
60
-    this.lastPointer = info
62
+    this.pointer = info
61
     return info
63
     return info
62
   }
64
   }
63
 
65
 
79
     this.points[e.pointerId] = info
81
     this.points[e.pointerId] = info
80
     this.activePointerId = e.pointerId
82
     this.activePointerId = e.pointerId
81
 
83
 
82
-    this.lastPointer = info
84
+    this.pointer = info
83
     return info
85
     return info
84
   }
86
   }
85
 
87
 
98
       altKey,
100
       altKey,
99
     }
101
     }
100
 
102
 
101
-    this.lastPointer = info
103
+    this.pointer = info
102
     return info
104
     return info
103
   }
105
   }
104
 
106
 
122
       this.points[e.pointerId] = info
124
       this.points[e.pointerId] = info
123
     }
125
     }
124
 
126
 
125
-    this.lastPointer = info
127
+    this.pointer = info
128
+
126
     return info
129
     return info
127
   }
130
   }
128
 
131
 
146
     delete this.activePointerId
149
     delete this.activePointerId
147
 
150
 
148
     if (vec.dist(info.origin, info.point) < 8) {
151
     if (vec.dist(info.origin, info.point) < 8) {
149
-      this.lastPointerUpTime = Date.now()
152
+      this.pointerUpTime = Date.now()
150
     }
153
     }
151
 
154
 
152
-    this.lastPointer = info
155
+    this.pointer = info
153
     return info
156
     return info
154
   }
157
   }
155
 
158
 
165
   }
168
   }
166
 
169
 
167
   isDoubleClick() {
170
   isDoubleClick() {
168
-    if (!this.lastPointer) return
171
+    if (!this.pointer) return
169
 
172
 
170
-    const { origin, point } = this.lastPointer
173
+    const { origin, point } = this.pointer
171
 
174
 
172
     return (
175
     return (
173
-      Date.now() - this.lastPointerUpTime < DOUBLE_CLICK_DURATION &&
176
+      Date.now() - this.pointerUpTime < DOUBLE_CLICK_DURATION &&
174
       vec.dist(origin, point) < 8
177
       vec.dist(origin, point) < 8
175
     )
178
     )
176
   }
179
   }
177
-
178
-  get pointer() {
179
-    return this.points[Object.keys(this.points)[0]]
180
-  }
181
 }
180
 }
182
 
181
 
183
 export default new Inputs()
182
 export default new Inputs()

+ 1
- 29
state/state.ts View File

427
                 // MOVED_POINTER: 'updateBrushSession', using hacks.fastBrushSelect
427
                 // MOVED_POINTER: 'updateBrushSession', using hacks.fastBrushSelect
428
                 PANNED_CAMERA: 'updateBrushSession',
428
                 PANNED_CAMERA: 'updateBrushSession',
429
                 STOPPED_POINTING: { to: 'selecting' },
429
                 STOPPED_POINTING: { to: 'selecting' },
430
+                STARTED_PINCHING: { to: 'pinching' },
430
                 CANCELLED: { do: 'cancelSession', to: 'selecting' },
431
                 CANCELLED: { do: 'cancelSession', to: 'selecting' },
431
               },
432
               },
432
             },
433
             },
478
               to: 'pinching.toolPinching',
479
               to: 'pinching.toolPinching',
479
             },
480
             },
480
             TOGGLED_TOOL_LOCK: 'toggleToolLock',
481
             TOGGLED_TOOL_LOCK: 'toggleToolLock',
481
-            SELECTED_SELECT_TOOL: { to: 'selecting' },
482
-            SELECTED_DRAW_TOOL: { unless: 'isReadOnly', to: 'draw' },
483
-            SELECTED_ARROW_TOOL: { unless: 'isReadOnly', to: 'arrow' },
484
-            SELECTED_DOT_TOOL: { unless: 'isReadOnly', to: 'dot' },
485
-            SELECTED_CIRCLE_TOOL: { unless: 'isReadOnly', to: 'circle' },
486
-            SELECTED_ELLIPSE_TOOL: { unless: 'isReadOnly', to: 'ellipse' },
487
-            SELECTED_RAY_TOOL: { unless: 'isReadOnly', to: 'ray' },
488
-            SELECTED_LINE_TOOL: { unless: 'isReadOnly', to: 'line' },
489
-            SELECTED_POLYLINE_TOOL: { unless: 'isReadOnly', to: 'polyline' },
490
-            SELECTED_RECTANGLE_TOOL: { unless: 'isReadOnly', to: 'rectangle' },
491
-            ZOOMED_CAMERA: {
492
-              do: 'zoomCamera',
493
-            },
494
-            PANNED_CAMERA: {
495
-              do: 'panCamera',
496
-            },
497
-            ZOOMED_TO_ACTUAL: {
498
-              if: 'hasSelection',
499
-              do: 'zoomCameraToSelectionActual',
500
-              else: 'zoomCameraToActual',
501
-            },
502
-            ZOOMED_TO_SELECTION: {
503
-              if: 'hasSelection',
504
-              do: 'zoomCameraToSelection',
505
-            },
506
-            ZOOMED_TO_FIT: ['zoomCameraToFit', 'zoomCameraToActual'],
507
-            ZOOMED_IN: 'zoomIn',
508
-            ZOOMED_OUT: 'zoomOut',
509
-            RESET_CAMERA: 'resetCamera',
510
           },
482
           },
511
           states: {
483
           states: {
512
             draw: {
484
             draw: {

Loading…
Cancel
Save