Quellcode durchsuchen

Restores more simple text

main
Steve Ruiz vor 4 Jahren
Ursprung
Commit
3f35d2a245
1 geänderte Dateien mit 21 neuen und 46 gelöschten Zeilen
  1. 21
    46
      lib/shape-utils/text.tsx

+ 21
- 46
lib/shape-utils/text.tsx Datei anzeigen

1
 import { uniqueId } from 'utils/utils'
1
 import { uniqueId } from 'utils/utils'
2
+import vec from 'utils/vec'
2
 import { TextShape, ShapeType, FontSize } from 'types'
3
 import { TextShape, ShapeType, FontSize } from 'types'
3
 import { registerShapeUtils } from './index'
4
 import { registerShapeUtils } from './index'
4
-import {
5
-  defaultStyle,
6
-  getFontSize,
7
-  getFontStyle,
8
-  getShapeStyle,
9
-} from 'lib/shape-styles'
5
+import { defaultStyle, getFontStyle, getShapeStyle } from 'lib/shape-styles'
10
 import styled from 'styles'
6
 import styled from 'styles'
11
 import state from 'state'
7
 import state from 'state'
12
-import React from 'react'
8
+import { useEffect, useRef } from 'react'
9
+
10
+// A div used for measurement
13
 
11
 
14
 if (document.getElementById('__textMeasure')) {
12
 if (document.getElementById('__textMeasure')) {
15
   document.getElementById('__textMeasure').remove()
13
   document.getElementById('__textMeasure').remove()
18
 // A div used for measurement
16
 // A div used for measurement
19
 const mdiv = document.createElement('pre')
17
 const mdiv = document.createElement('pre')
20
 mdiv.id = '__textMeasure'
18
 mdiv.id = '__textMeasure'
21
-mdiv.style.whiteSpace = 'pre'
22
-mdiv.style.width = 'auto'
23
-mdiv.style.border = '1px solid red'
24
-mdiv.style.padding = '4px'
25
-mdiv.style.margin = '0px'
26
-mdiv.style.opacity = '0'
27
-mdiv.style.position = 'absolute'
28
-mdiv.style.top = '-500px'
29
-mdiv.style.left = '0px'
30
-mdiv.style.zIndex = '9999'
19
+
20
+Object.assign(mdiv.style, {
21
+  whiteSpace: 'pre',
22
+  width: 'auto',
23
+  border: '1px solid red',
24
+  padding: '4px',
25
+  margin: '0px',
26
+  opacity: '0',
27
+  position: 'absolute',
28
+  top: '-500px',
29
+  left: '0px',
30
+  zIndex: '9999',
31
+})
32
+
31
 mdiv.tabIndex = -1
33
 mdiv.tabIndex = -1
32
-mdiv.setAttribute('readonly', 'true')
34
+
33
 document.body.appendChild(mdiv)
35
 document.body.appendChild(mdiv)
34
 
36
 
35
 function normalizeText(text: string) {
37
 function normalizeText(text: string) {
95
       state.send('FOCUSED_EDITING_SHAPE')
97
       state.send('FOCUSED_EDITING_SHAPE')
96
     }
98
     }
97
 
99
 
98
-    const lineHeight = getFontSize(shape.fontSize) * shape.scale
99
-    const gap = lineHeight * 0.4
100
-
101
-    if (!isEditing) {
102
-      return (
103
-        <g id={id} pointerEvents="none">
104
-          {text.split('\n').map((str, i) => (
105
-            <text
106
-              key={i}
107
-              x={4}
108
-              y={4 + gap / 2 + i * (lineHeight + gap)}
109
-              style={{ font }}
110
-              width={bounds.width}
111
-              height={bounds.height}
112
-              dominant-baseline="hanging"
113
-            >
114
-              {str}
115
-            </text>
116
-          ))}
117
-        </g>
118
-      )
119
-    }
120
-
121
     return (
100
     return (
122
       <foreignObject
101
       <foreignObject
123
         id={id}
102
         id={id}
134
               font,
113
               font,
135
               color: styles.stroke,
114
               color: styles.stroke,
136
             }}
115
             }}
137
-            tabIndex={0}
138
             value={text}
116
             value={text}
117
+            tabIndex={0}
139
             autoComplete="false"
118
             autoComplete="false"
140
             autoCapitalize="false"
119
             autoCapitalize="false"
141
             autoCorrect="false"
120
             autoCorrect="false"
142
-            spellCheck="false"
143
             onFocus={handleFocus}
121
             onFocus={handleFocus}
144
             onBlur={handleBlur}
122
             onBlur={handleBlur}
145
             onKeyDown={handleKeyDown}
123
             onKeyDown={handleKeyDown}
146
             onChange={handleChange}
124
             onChange={handleChange}
147
-            dir="auto"
148
           />
125
           />
149
         ) : (
126
         ) : (
150
           <StyledText
127
           <StyledText
234
   overflow: 'hidden',
211
   overflow: 'hidden',
235
   pointerEvents: 'none',
212
   pointerEvents: 'none',
236
   userSelect: 'none',
213
   userSelect: 'none',
237
-  backfaceVisibility: 'hidden',
238
   display: 'inline-block',
214
   display: 'inline-block',
239
   position: 'relative',
215
   position: 'relative',
240
-  zIndex: 0,
241
 })
216
 })
242
 
217
 
243
 const StyledTextArea = styled('textarea', {
218
 const StyledTextArea = styled('textarea', {

Laden…
Abbrechen
Speichern