Fix selection on text element
This commit is contained in:
Steve Ruiz
parent
639f2412d1
commit
3eb09d1eb1
3 changed files with 635 additions and 57 deletions
Binary file not shown.
561
packages/dev/src/assets/local.tldr
Normal file
561
packages/dev/src/assets/local.tldr
Normal 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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -147,22 +147,26 @@ 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}>
|
||||
<div
|
||||
className={innerWrapper()}
|
||||
style={{
|
||||
font,
|
||||
color: styles.stroke,
|
||||
}}
|
||||
>
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
className={textArea({ isEditing, isBinding })}
|
||||
className={textArea({ isBinding })}
|
||||
ref={rInput}
|
||||
style={{
|
||||
font,
|
||||
color: styles.stroke,
|
||||
userSelect: isEditing ? 'all' : 'none',
|
||||
}}
|
||||
name="text"
|
||||
defaultValue={text}
|
||||
|
|
@ -178,12 +182,15 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
|
|||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPointerDown={handlePointerDown}
|
||||
autoFocus={isEditing}
|
||||
readOnly={!isEditing}
|
||||
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: {
|
||||
isEditing: {
|
||||
false: {},
|
||||
true: {
|
||||
background: '$boundsBg',
|
||||
},
|
||||
},
|
||||
isEditing: {
|
||||
false: {
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
background: 'none',
|
||||
WebkitUserSelect: 'none',
|
||||
},
|
||||
true: {
|
||||
pointerEvents: 'all',
|
||||
userSelect: 'text',
|
||||
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',
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue