浏览代码

Fixes text on mobile (iOS)

main
Steve Ruiz 4 年前
父节点
当前提交
5f71f5c38b
共有 4 个文件被更改,包括 21 次插入5 次删除
  1. 5
    1
      components/canvas/shape.tsx
  2. 11
    1
      hooks/useShapeEvents.ts
  3. 4
    2
      lib/shape-utils/text.tsx
  4. 1
    1
      state/state.ts

+ 5
- 1
components/canvas/shape.tsx 查看文件

@@ -27,7 +27,11 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps) {
27 27
 
28 28
   useEffect(() => {
29 29
     if (isEditing) {
30
-      setTimeout(() => rFocusable.current?.focus(), 0)
30
+      setTimeout(() => {
31
+        const elm = rFocusable.current
32
+        if (!elm) return
33
+        elm.focus()
34
+      }, 0)
31 35
     }
32 36
   }, [isEditing])
33 37
 

+ 11
- 1
hooks/useShapeEvents.ts 查看文件

@@ -1,4 +1,4 @@
1
-import { MutableRefObject, useCallback, useRef } from 'react'
1
+import React, { MutableRefObject, useCallback, useRef } from 'react'
2 2
 import state from 'state'
3 3
 import inputs from 'state/inputs'
4 4
 
@@ -76,11 +76,21 @@ export default function useShapeEvents(
76 76
     [id]
77 77
   )
78 78
 
79
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
80
+    e.preventDefault()
81
+  }, [])
82
+
83
+  const handleTouchEnd = useCallback((e: React.TouchEvent) => {
84
+    e.preventDefault()
85
+  }, [])
86
+
79 87
   return {
80 88
     onPointerDown: handlePointerDown,
81 89
     onPointerUp: handlePointerUp,
82 90
     onPointerEnter: handlePointerEnter,
83 91
     onPointerMove: handlePointerMove,
84 92
     onPointerLeave: handlePointerLeave,
93
+    onTouchStart: handleTouchStart,
94
+    onTouchEnd: handleTouchEnd,
85 95
   }
86 96
 }

+ 4
- 2
lib/shape-utils/text.tsx 查看文件

@@ -1,4 +1,4 @@
1
-import { uniqueId } from 'utils/utils'
1
+import { uniqueId, isMobile } from 'utils/utils'
2 2
 import vec from 'utils/vec'
3 3
 import { TextShape, ShapeType, FontSize, SizeStyle } from 'types'
4 4
 import { registerShapeUtils } from './index'
@@ -118,6 +118,7 @@ const text = registerShapeUtils<TextShape>({
118 118
             autoComplete="false"
119 119
             autoCapitalize="false"
120 120
             autoCorrect="false"
121
+            autoFocus={isMobile() ? true : false}
121 122
             onFocus={handleFocus}
122 123
             onBlur={handleBlur}
123 124
             onKeyDown={handleKeyDown}
@@ -236,7 +237,6 @@ const StyledText = styled('div', {
236 237
   pointerEvents: 'none',
237 238
   userSelect: 'none',
238 239
   display: 'inline-block',
239
-  position: 'relative',
240 240
 })
241 241
 
242 242
 const StyledTextArea = styled('textarea', {
@@ -254,4 +254,6 @@ const StyledTextArea = styled('textarea', {
254 254
   pointerEvents: 'all',
255 255
   backfaceVisibility: 'hidden',
256 256
   display: 'inline-block',
257
+  userSelect: 'text',
258
+  WebkitUserSelect: 'text',
257 259
 })

+ 1
- 1
state/state.ts 查看文件

@@ -114,7 +114,7 @@ const initialData: Data = {
114 114
 const state = createState({
115 115
   data: initialData,
116 116
   on: {
117
-    UNMOUNTED: [{ unless: 'isReadOnly', do: 'forceSave' }, { to: 'loading' }],
117
+    UNMOUNTED: { to: 'loading' },
118 118
   },
119 119
   initial: 'loading',
120 120
   states: {

正在加载...
取消
保存