Fix selection on text element

This commit is contained in:
Steve Ruiz 2021-09-24 12:34:30 +01:00
parent 639f2412d1
commit 3eb09d1eb1
3 changed files with 635 additions and 57 deletions

View file

@ -0,0 +1,561 @@
{
"id": "doc",
"pages": {
"page": {
"id": "page",
"name": "Page 1",
"childIndex": 1,
"shapes": {
"58343232-2843-48ff-214c-f801ba274f24": {
"id": "58343232-2843-48ff-214c-f801ba274f24",
"type": "rectangle",
"name": "Rectangle",
"parentId": "page",
"childIndex": 1,
"point": [
653.82,
158.58
],
"size": [
146.33,
213.43
],
"rotation": 0,
"style": {
"color": "Green",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"a755e702-548c-4ae3-0f62-307ced48d060": {
"id": "a755e702-548c-4ae3-0f62-307ced48d060",
"type": "ellipse",
"name": "Ellipse",
"parentId": "page",
"childIndex": 2,
"point": [
316.64,
164.11
],
"radius": [
73.7000000000001,
74.86500000000002
],
"rotation": 0,
"style": {
"color": "Blue",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"2ac5ddca-0fdd-4744-3c5b-dc63d9804993": {
"id": "2ac5ddca-0fdd-4744-3c5b-dc63d9804993",
"type": "rectangle",
"name": "Rectangle",
"parentId": "page",
"childIndex": 2,
"point": [
495.88,
466.31
],
"size": [
149.87,
134.37
],
"rotation": 0,
"style": {
"color": "Red",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"8f7c6768-8124-427f-0795-5b11b8e55cb3": {
"id": "8f7c6768-8124-427f-0795-5b11b8e55cb3",
"type": "arrow",
"name": "Arrow",
"parentId": "page",
"childIndex": 3,
"point": [
663.96,
388.01
],
"rotation": 0,
"bend": 0,
"handles": {
"start": {
"id": "start",
"index": 0,
"point": [
0,
66.018
],
"canBind": true,
"bindingId": "37f1f650-7368-41df-2489-b980efab5b7d"
},
"end": {
"id": "end",
"index": 1,
"point": [
37.531,
0
],
"canBind": true,
"bindingId": "284b2bbb-92eb-4f2b-255d-4b5a78e8a991"
},
"bend": {
"id": "bend",
"index": 2,
"point": [
18.765,
33.009
]
}
},
"decorations": {
"end": "Arrow"
},
"style": {
"color": "Black",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"10e6dade-7fab-42f8-0fc3-2091f8b5cb1f": {
"id": "10e6dade-7fab-42f8-0fc3-2091f8b5cb1f",
"type": "arrow",
"name": "Arrow",
"parentId": "page",
"childIndex": 4,
"point": [
479.98,
235.6
],
"rotation": 0,
"bend": 0,
"handles": {
"start": {
"id": "start",
"index": 0,
"point": [
157.84,
18.972
],
"canBind": true,
"bindingId": "500844a2-1dc9-4f58-0837-1a0caf446604"
},
"end": {
"id": "end",
"index": 1,
"point": [
0,
0
],
"canBind": true,
"bindingId": "a9c71649-7729-47c5-0e3c-37455ecd837c"
},
"bend": {
"id": "bend",
"index": 2,
"point": [
78.921,
9.4859
]
}
},
"decorations": {
"end": "Arrow"
},
"style": {
"color": "Black",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"0ef85012-7e75-4fdf-119f-18e615609335": {
"id": "0ef85012-7e75-4fdf-119f-18e615609335",
"type": "arrow",
"name": "Arrow",
"parentId": "page",
"childIndex": 5,
"point": [
414.98,
326.35
],
"rotation": 0,
"bend": 0,
"handles": {
"start": {
"id": "start",
"index": 0,
"point": [
0,
0
],
"canBind": true,
"bindingId": "aea8ac9a-0527-47ea-1d50-43862270759a"
},
"end": {
"id": "end",
"index": 1,
"point": [
74.457,
123.96
],
"canBind": true,
"bindingId": "be4cee5e-484d-4908-1079-a93aba785bd1"
},
"bend": {
"id": "bend",
"index": 2,
"point": [
37.228,
61.982
]
}
},
"decorations": {
"end": "Arrow"
},
"style": {
"color": "Black",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
}
},
"bindings": {
"284b2bbb-92eb-4f2b-255d-4b5a78e8a991": {
"id": "284b2bbb-92eb-4f2b-255d-4b5a78e8a991",
"type": "arrow",
"fromId": "8f7c6768-8124-427f-0795-5b11b8e55cb3",
"handleId": "end",
"toId": "58343232-2843-48ff-214c-f801ba274f24",
"point": [
0.67161,
0.5518
],
"distance": 16
},
"37f1f650-7368-41df-2489-b980efab5b7d": {
"id": "37f1f650-7368-41df-2489-b980efab5b7d",
"type": "arrow",
"fromId": "8f7c6768-8124-427f-0795-5b11b8e55cb3",
"handleId": "start",
"toId": "2ac5ddca-0fdd-4744-3c5b-dc63d9804993",
"point": [
0.68144,
0.58126
],
"distance": 18.210000000000036
},
"a9c71649-7729-47c5-0e3c-37455ecd837c": {
"id": "a9c71649-7729-47c5-0e3c-37455ecd837c",
"type": "arrow",
"fromId": "10e6dade-7fab-42f8-0fc3-2091f8b5cb1f",
"handleId": "end",
"toId": "a755e702-548c-4ae3-0f62-307ced48d060",
"point": [
0.84807,
0.4752
],
"distance": 16
},
"500844a2-1dc9-4f58-0837-1a0caf446604": {
"id": "500844a2-1dc9-4f58-0837-1a0caf446604",
"type": "arrow",
"fromId": "10e6dade-7fab-42f8-0fc3-2091f8b5cb1f",
"handleId": "start",
"toId": "58343232-2843-48ff-214c-f801ba274f24",
"point": [
0.5,
0.5
],
"distance": 16
},
"be4cee5e-484d-4908-1079-a93aba785bd1": {
"id": "be4cee5e-484d-4908-1079-a93aba785bd1",
"type": "arrow",
"fromId": "0ef85012-7e75-4fdf-119f-18e615609335",
"handleId": "end",
"toId": "2ac5ddca-0fdd-4744-3c5b-dc63d9804993",
"point": [
0.38339,
0.55439
],
"distance": 16
},
"aea8ac9a-0527-47ea-1d50-43862270759a": {
"id": "aea8ac9a-0527-47ea-1d50-43862270759a",
"type": "arrow",
"fromId": "0ef85012-7e75-4fdf-119f-18e615609335",
"handleId": "start",
"toId": "a755e702-548c-4ae3-0f62-307ced48d060",
"point": [
0.57016,
0.83242
],
"distance": 16
}
}
},
"page1": {
"id": "page1",
"shapes": {
"fa7a50a0-00d3-432c-3e97-585a9d97b6c6": {
"id": "fa7a50a0-00d3-432c-3e97-585a9d97b6c6",
"type": "rectangle",
"name": "Rectangle",
"parentId": "page1",
"childIndex": 1,
"point": [
1757.9,
912.27
],
"size": [
92.549,
78.049
],
"rotation": 0,
"radius": 0,
"style": {
"color": "Indigo",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"76a961f3-9cad-4a44-3790-74d8e46c918b": {
"id": "76a961f3-9cad-4a44-3790-74d8e46c918b",
"type": "rectangle",
"name": "Rectangle",
"parentId": "page1",
"childIndex": 2,
"point": [
2054.6,
956.4
],
"size": [
53.205,
136.52
],
"rotation": 0,
"radius": 0,
"style": {
"color": "Red",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"5e9a929d-6fa4-4176-3f60-9a0d206a986b": {
"id": "5e9a929d-6fa4-4176-3f60-9a0d206a986b",
"type": "ellipse",
"name": "Ellipse",
"parentId": "page1",
"childIndex": 3,
"point": [
1821.3,
1044.1
],
"radius": [
34.65772824556598,
39.066377761684635
],
"rotation": 0,
"style": {
"color": "Green",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"d6e6f6a8-8472-4a05-352e-3749bc75f487": {
"id": "d6e6f6a8-8472-4a05-352e-3749bc75f487",
"type": "arrow",
"name": "Arrow",
"parentId": "page1",
"childIndex": 4,
"point": [
1873.779,
968.915
],
"rotation": 0,
"bend": 0,
"handles": {
"start": {
"id": "start",
"index": 0,
"point": [
71.321,
20.225
],
"canBind": true
},
"end": {
"id": "end",
"index": 1,
"point": [
-8.5265e-14,
2.1316e-14
],
"canBind": true
},
"bend": {
"id": "bend",
"index": 2,
"point": [
35.661,
10.112
]
}
},
"decorations": {
"end": "Arrow"
},
"style": {
"color": "Black",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"ede2b8f7-2ce0-4b79-2770-a5d5b174f7d4": {
"id": "ede2b8f7-2ce0-4b79-2770-a5d5b174f7d4",
"type": "arrow",
"name": "Arrow",
"parentId": "page1",
"childIndex": 5,
"point": [
1781.2,
1003.8
],
"rotation": 0,
"bend": 0,
"handles": {
"start": {
"id": "start",
"index": 0,
"point": [
0,
0
],
"canBind": true
},
"end": {
"id": "end",
"index": 1,
"point": [
25.925,
43.226
],
"canBind": true
},
"bend": {
"id": "bend",
"index": 2,
"point": [
12.963,
21.613
]
}
},
"decorations": {
"end": "Arrow"
},
"style": {
"color": "Black",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
},
"8edca8a7-0c6d-414b-0ff0-e00c32733b46": {
"id": "8edca8a7-0c6d-414b-0ff0-e00c32733b46",
"type": "arrow",
"name": "Arrow",
"parentId": "page1",
"childIndex": 6,
"point": [
1912.9,
1065.7669999999998
],
"rotation": 0,
"bend": 0,
"handles": {
"start": {
"id": "start",
"index": 0,
"point": [
0,
12.333
],
"canBind": true
},
"end": {
"id": "end",
"index": 1,
"point": [
36.712,
8.3489e-14
],
"canBind": true
},
"bend": {
"id": "bend",
"index": 2,
"point": [
18.356,
6.1665
]
}
},
"decorations": {
"end": "Arrow"
},
"style": {
"color": "Black",
"size": "Medium",
"isFilled": true,
"dash": "Draw"
}
}
},
"bindings": {},
"name": "Page 2"
}
},
"pageStates": {
"page": {
"id": "page",
"selectedIds": [],
"camera": {
"point": [
-257,
-61
],
"zoom": 1
},
"editingId": null
},
"page1": {
"id": "page1",
"selectedIds": [
"76a961f3-9cad-4a44-3790-74d8e46c918b"
],
"camera": {
"point": [
-1620.9073790458274,
-841.1990943476605
],
"zoom": 1.5319298689588086
},
"currentParentId": "page1"
}
}
}

View file

@ -147,43 +147,50 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
elm.focus()
elm.select()
})
} else {
const elm = rInput.current!
elm.setSelectionRange(0, 0)
}
}, [isEditing])
return (
<HTMLContainer ref={ref} {...events}>
<div className={wrapper({ isEditing })} onPointerDown={handlePointerDown}>
<textarea
className={textArea({ isEditing, isBinding })}
ref={rInput}
<div
className={innerWrapper()}
style={{
font,
color: styles.stroke,
userSelect: isEditing ? 'all' : 'none',
}}
name="text"
defaultValue={text}
tabIndex={-1}
autoComplete="false"
autoCapitalize="false"
autoCorrect="false"
autoSave="false"
placeholder=""
color={styles.stroke}
onFocus={handleFocus}
onBlur={handleBlur}
onChange={handleChange}
onKeyDown={handleKeyDown}
onPointerDown={handlePointerDown}
autoFocus={isEditing}
readOnly={!isEditing}
wrap="off"
dir="auto"
datatype="wysiwyg"
/>
>
{isEditing ? (
<textarea
className={textArea({ isBinding })}
ref={rInput}
style={{
font,
color: styles.stroke,
}}
name="text"
defaultValue={text}
tabIndex={-1}
autoComplete="false"
autoCapitalize="false"
autoCorrect="false"
autoSave="false"
placeholder=""
color={styles.stroke}
onFocus={handleFocus}
onBlur={handleBlur}
onChange={handleChange}
onKeyDown={handleKeyDown}
onPointerDown={handlePointerDown}
autoFocus
wrap="off"
dir="auto"
datatype="wysiwyg"
/>
) : (
text
)}
</div>
</div>
</HTMLContainer>
)
@ -297,58 +304,68 @@ const wrapper = css({
isEditing: {
false: {
pointerEvents: 'all',
userSelect: 'all',
},
true: {
pointerEvents: 'none',
userSelect: 'none',
},
},
},
})
const textArea = css({
const innerWrapper = css({
position: 'absolute',
top: 'var(--tl-padding)',
left: 'var(--tl-padding)',
zIndex: 1,
width: 'calc(100% - (var(--tl-padding) * 2))',
height: 'calc(100% - (var(--tl-padding) * 2))',
border: 'none',
padding: '4px',
whiteSpace: 'pre',
alignmentBaseline: 'mathematical',
dominantBaseline: 'mathematical',
resize: 'none',
zIndex: 1,
minHeight: 1,
minWidth: 1,
lineHeight: 1.4,
letterSpacing: LETTER_SPACING,
outline: 0,
fontWeight: '500',
overflow: 'hidden',
backfaceVisibility: 'hidden',
display: 'inline-block',
WebkitUserSelect: 'text',
userSelect: 'none',
pointerEvents: 'none',
WebkitUserSelect: 'none',
WebkitTouchCallout: 'none',
variants: {
isBinding: {
false: {},
true: {
background: '$boundsBg',
},
},
isEditing: {
false: {
pointerEvents: 'none',
userSelect: 'none',
background: 'none',
WebkitUserSelect: 'none',
},
true: {
pointerEvents: 'all',
userSelect: 'text',
background: '$boundsBg',
WebkitUserSelect: 'text',
},
isEditing: {
false: {},
true: {
pointerEvents: 'all',
background: '$boundsBg',
userSelect: 'text',
WebkitUserSelect: 'text',
},
},
})
const textArea = css({
position: 'absolute',
top: 0,
left: 0,
zIndex: 1,
width: '100%',
height: '100%',
border: 'none',
padding: '4px',
whiteSpace: 'pre',
resize: 'none',
minHeight: 'inherit',
minWidth: 'inherit',
lineHeight: 'inherit',
letterSpacing: 'inherit',
outline: 0,
fontWeight: 'inherit',
overflow: 'hidden',
backfaceVisibility: 'hidden',
display: 'inline-block',
pointerEvents: 'all',
background: '$boundsBg',
userSelect: 'text',
WebkitUserSelect: 'text',
})