@leafer-in/text-editor 1.8.0 → 1.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/text-editor.cjs +132 -155
- package/dist/text-editor.esm.js +131 -154
- package/dist/text-editor.esm.min.js +1 -1
- package/dist/text-editor.esm.min.js.map +1 -1
- package/dist/text-editor.js +125 -160
- package/dist/text-editor.min.cjs +1 -1
- package/dist/text-editor.min.cjs.map +1 -1
- package/dist/text-editor.min.js +1 -1
- package/dist/text-editor.min.js.map +1 -1
- package/package.json +5 -5
- package/src/updateStyle.ts +7 -7
package/dist/text-editor.esm.js
CHANGED
|
@@ -1,107 +1,92 @@
|
|
|
1
|
-
import { ColorConvert, Text, PointerEvent, Matrix, Plugin } from
|
|
2
|
-
import { registerInnerEditor, InnerEditor } from '@leafer-in/editor';
|
|
1
|
+
import { isObject, ColorConvert, isArray, isUndefined, isString, Text, PointerEvent, Matrix, Plugin } from "@leafer-ui/core";
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
16
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
17
|
-
***************************************************************************** */
|
|
18
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
function __decorate(decorators, target, key, desc) {
|
|
22
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
23
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
24
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
25
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
29
|
-
var e = new Error(message);
|
|
30
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
3
|
+
import { registerInnerEditor, InnerEditor } from "@leafer-in/editor";
|
|
4
|
+
|
|
5
|
+
function __decorate(decorators, target, key, desc) {
|
|
6
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
7
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
8
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
|
|
12
|
+
var e = new Error(message);
|
|
13
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
31
14
|
};
|
|
32
15
|
|
|
33
16
|
const textCaseMap = {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
17
|
+
none: "none",
|
|
18
|
+
title: "capitalize",
|
|
19
|
+
upper: "uppercase",
|
|
20
|
+
lower: "lowercase",
|
|
21
|
+
"small-caps": "small-caps"
|
|
39
22
|
};
|
|
23
|
+
|
|
40
24
|
const verticalAlignMap = {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
25
|
+
top: "flex-start",
|
|
26
|
+
middle: "center",
|
|
27
|
+
bottom: "flex-end"
|
|
44
28
|
};
|
|
29
|
+
|
|
45
30
|
const textDecorationMap = {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
31
|
+
none: "none",
|
|
32
|
+
under: "underline",
|
|
33
|
+
delete: "line-through",
|
|
34
|
+
"under-delete": "underline line-through"
|
|
50
35
|
};
|
|
36
|
+
|
|
51
37
|
function updateStyle(textDom, text, textScale) {
|
|
52
|
-
const { style
|
|
53
|
-
const { fill, padding, textWrap, textOverflow, textDecoration } = text;
|
|
38
|
+
const {style: style} = textDom;
|
|
39
|
+
const {fill: fill, padding: padding, textWrap: textWrap, textOverflow: textOverflow, textDecoration: textDecoration} = text;
|
|
54
40
|
style.fontFamily = text.fontFamily;
|
|
55
|
-
style.fontSize = text.fontSize * textScale +
|
|
41
|
+
style.fontSize = text.fontSize * textScale + "px";
|
|
56
42
|
setFill(style, fill);
|
|
57
|
-
style.fontStyle = text.italic ?
|
|
43
|
+
style.fontStyle = text.italic ? "italic" : "normal";
|
|
58
44
|
style.fontWeight = text.fontWeight;
|
|
59
45
|
let decorationType;
|
|
60
|
-
if (
|
|
46
|
+
if (isObject(textDecoration)) {
|
|
61
47
|
decorationType = textDecoration.type;
|
|
62
|
-
if (textDecoration.color)
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
48
|
+
if (textDecoration.color) style.textDecorationColor = ColorConvert.string(textDecoration.color);
|
|
49
|
+
} else {
|
|
66
50
|
decorationType = textDecoration;
|
|
67
51
|
}
|
|
68
52
|
style.textDecoration = textDecorationMap[decorationType];
|
|
69
53
|
style.textTransform = textCaseMap[text.textCase];
|
|
70
|
-
style.textAlign = text.textAlign ===
|
|
71
|
-
style.display =
|
|
72
|
-
style.flexDirection =
|
|
54
|
+
style.textAlign = text.textAlign === "both" ? "justify" : text.textAlign;
|
|
55
|
+
style.display = "flex";
|
|
56
|
+
style.flexDirection = "column";
|
|
73
57
|
style.justifyContent = verticalAlignMap[text.verticalAlign];
|
|
74
|
-
style.lineHeight = (text.__.__lineHeight || 0) * textScale +
|
|
75
|
-
style.letterSpacing = (text.__.__letterSpacing || 0) * textScale +
|
|
76
|
-
style.whiteSpace =
|
|
77
|
-
style.wordBreak = textWrap ===
|
|
78
|
-
style.textIndent = (text.paraIndent || 0) * textScale +
|
|
79
|
-
style.padding = padding
|
|
80
|
-
style.textOverflow = textOverflow ===
|
|
58
|
+
style.lineHeight = (text.__.__lineHeight || 0) * textScale + "px";
|
|
59
|
+
style.letterSpacing = (text.__.__letterSpacing || 0) * textScale + "px";
|
|
60
|
+
style.whiteSpace = textWrap === "none" || text.__.__autoWidth ? "nowrap" : "normal";
|
|
61
|
+
style.wordBreak = textWrap === "break" ? "break-all" : "normal";
|
|
62
|
+
style.textIndent = (text.paraIndent || 0) * textScale + "px";
|
|
63
|
+
style.padding = isArray(padding) ? padding.map(item => item * textScale + "px").join(" ") : (padding || 0) * textScale + "px";
|
|
64
|
+
style.textOverflow = textOverflow === "show" ? "" : textOverflow === "hide" ? "clip" : textOverflow;
|
|
81
65
|
}
|
|
66
|
+
|
|
82
67
|
function setFill(style, fill) {
|
|
83
|
-
let color =
|
|
84
|
-
if (fill
|
|
85
|
-
|
|
86
|
-
if (typeof fill === 'object') {
|
|
68
|
+
let color = "black";
|
|
69
|
+
if (isArray(fill)) fill = fill[0];
|
|
70
|
+
if (isObject(fill)) {
|
|
87
71
|
switch (fill.type) {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
72
|
+
case "solid":
|
|
73
|
+
color = ColorConvert.string(fill.color);
|
|
74
|
+
break;
|
|
75
|
+
|
|
76
|
+
case "image":
|
|
77
|
+
break;
|
|
78
|
+
|
|
79
|
+
case "linear":
|
|
80
|
+
case "radial":
|
|
81
|
+
case "angular":
|
|
82
|
+
const stop = fill.stops[0];
|
|
83
|
+
color = ColorConvert.string(isString(stop) ? stop : stop.color);
|
|
84
|
+
break;
|
|
85
|
+
|
|
86
|
+
default:
|
|
87
|
+
if (!isUndefined(fill.r)) color = ColorConvert.string(fill);
|
|
102
88
|
}
|
|
103
|
-
}
|
|
104
|
-
else {
|
|
89
|
+
} else {
|
|
105
90
|
color = fill;
|
|
106
91
|
}
|
|
107
92
|
style.color = color;
|
|
@@ -115,36 +100,34 @@ let TextEditor = class TextEditor extends InnerEditor {
|
|
|
115
100
|
};
|
|
116
101
|
this.eventIds = [];
|
|
117
102
|
}
|
|
118
|
-
get tag() {
|
|
103
|
+
get tag() {
|
|
104
|
+
return "TextEditor";
|
|
105
|
+
}
|
|
119
106
|
onLoad() {
|
|
120
|
-
const { editor
|
|
121
|
-
const { config
|
|
107
|
+
const {editor: editor} = this;
|
|
108
|
+
const {config: config} = editor.app;
|
|
122
109
|
const text = this.editTarget;
|
|
123
110
|
text.textEditing = true;
|
|
124
111
|
this.isHTMLText = !(text instanceof Text);
|
|
125
112
|
this._keyEvent = config.keyEvent;
|
|
126
113
|
config.keyEvent = false;
|
|
127
|
-
const div = this.editDom = document.createElement(
|
|
128
|
-
const { style
|
|
129
|
-
div.contentEditable =
|
|
130
|
-
style.position =
|
|
131
|
-
style.transformOrigin =
|
|
132
|
-
style.boxSizing =
|
|
114
|
+
const div = this.editDom = document.createElement("div");
|
|
115
|
+
const {style: style} = div;
|
|
116
|
+
div.contentEditable = "true";
|
|
117
|
+
style.position = "fixed";
|
|
118
|
+
style.transformOrigin = "left top";
|
|
119
|
+
style.boxSizing = "border-box";
|
|
133
120
|
this.isHTMLText ? div.innerHTML = String(text.text) : div.innerText = String(text.text);
|
|
134
|
-
const { view
|
|
121
|
+
const {view: view} = editor.app;
|
|
135
122
|
(this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : view.appendChild(div);
|
|
136
|
-
this.eventIds = [
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
if (!find)
|
|
145
|
-
editor.closeInnerEditor();
|
|
146
|
-
})
|
|
147
|
-
];
|
|
123
|
+
this.eventIds = [ editor.app.on_(PointerEvent.DOWN, e => {
|
|
124
|
+
let {target: target} = e.origin, find;
|
|
125
|
+
while (target) {
|
|
126
|
+
if (target === div) find = true;
|
|
127
|
+
target = target.parentElement;
|
|
128
|
+
}
|
|
129
|
+
if (!find) editor.closeInnerEditor();
|
|
130
|
+
}) ];
|
|
148
131
|
this.onFocus = this.onFocus.bind(this);
|
|
149
132
|
this.onInput = this.onInput.bind(this);
|
|
150
133
|
this.onPaste = this.onPaste.bind(this);
|
|
@@ -153,14 +136,13 @@ let TextEditor = class TextEditor extends InnerEditor {
|
|
|
153
136
|
div.addEventListener("focus", this.onFocus);
|
|
154
137
|
div.addEventListener("input", this.onInput);
|
|
155
138
|
div.addEventListener("paste", this.onPaste);
|
|
156
|
-
window.addEventListener(
|
|
157
|
-
window.addEventListener(
|
|
139
|
+
window.addEventListener("keydown", this.onKeydown);
|
|
140
|
+
window.addEventListener("scroll", this.onUpdate);
|
|
158
141
|
const selection = window.getSelection();
|
|
159
142
|
const range = document.createRange();
|
|
160
143
|
if (this.config.selectAll) {
|
|
161
144
|
range.selectNodeContents(div);
|
|
162
|
-
}
|
|
163
|
-
else {
|
|
145
|
+
} else {
|
|
164
146
|
const node = div.childNodes[0];
|
|
165
147
|
range.setStartAfter(node);
|
|
166
148
|
range.setEndAfter(node);
|
|
@@ -170,19 +152,18 @@ let TextEditor = class TextEditor extends InnerEditor {
|
|
|
170
152
|
selection.addRange(range);
|
|
171
153
|
}
|
|
172
154
|
onInput() {
|
|
173
|
-
const { editDom
|
|
155
|
+
const {editDom: editDom} = this;
|
|
174
156
|
this.editTarget.text = this.isHTMLText ? editDom.innerHTML : editDom.innerText;
|
|
175
157
|
}
|
|
176
158
|
onFocus() {
|
|
177
|
-
this.editDom.style.outline =
|
|
159
|
+
this.editDom.style.outline = "none";
|
|
178
160
|
}
|
|
179
161
|
onKeydown(e) {
|
|
180
|
-
if (e.code ===
|
|
181
|
-
|
|
182
|
-
if (e.key === 'Enter') {
|
|
162
|
+
if (e.code === "Escape") this.editor.closeInnerEditor();
|
|
163
|
+
if (e.key === "Enter") {
|
|
183
164
|
e.preventDefault();
|
|
184
|
-
const br = document.createElement(
|
|
185
|
-
const zwsp = document.createTextNode(
|
|
165
|
+
const br = document.createElement("br");
|
|
166
|
+
const zwsp = document.createTextNode("");
|
|
186
167
|
const selection = window.getSelection();
|
|
187
168
|
const range = selection.getRangeAt(0);
|
|
188
169
|
range.deleteContents();
|
|
@@ -194,23 +175,19 @@ let TextEditor = class TextEditor extends InnerEditor {
|
|
|
194
175
|
}
|
|
195
176
|
}
|
|
196
177
|
onPaste(event) {
|
|
197
|
-
if (this.isHTMLText)
|
|
198
|
-
return;
|
|
178
|
+
if (this.isHTMLText) return;
|
|
199
179
|
event.preventDefault();
|
|
200
180
|
const clipboardData = event.clipboardData;
|
|
201
|
-
if (!clipboardData)
|
|
202
|
-
|
|
203
|
-
let text = clipboardData.getData('text/plain').replace(/\r\n?/g, '\n');
|
|
181
|
+
if (!clipboardData) return;
|
|
182
|
+
let text = clipboardData.getData("text/plain").replace(/\r\n?/g, "\n");
|
|
204
183
|
const selection = window.getSelection();
|
|
205
|
-
if (!selection || !selection.rangeCount)
|
|
206
|
-
return;
|
|
184
|
+
if (!selection || !selection.rangeCount) return;
|
|
207
185
|
const range = selection.getRangeAt(0);
|
|
208
186
|
range.deleteContents();
|
|
209
|
-
const lines = text.split(
|
|
187
|
+
const lines = text.split("\n");
|
|
210
188
|
const fragment = document.createDocumentFragment();
|
|
211
189
|
lines.forEach((line, index) => {
|
|
212
|
-
if (index > 0)
|
|
213
|
-
fragment.appendChild(document.createElement('br'));
|
|
190
|
+
if (index > 0) fragment.appendChild(document.createElement("br"));
|
|
214
191
|
fragment.appendChild(document.createTextNode(line));
|
|
215
192
|
});
|
|
216
193
|
range.insertNode(fragment);
|
|
@@ -220,27 +197,28 @@ let TextEditor = class TextEditor extends InnerEditor {
|
|
|
220
197
|
this.onInput();
|
|
221
198
|
}
|
|
222
199
|
onUpdate() {
|
|
223
|
-
const {
|
|
200
|
+
const {editTarget: text} = this;
|
|
224
201
|
let textScale = 1;
|
|
225
202
|
if (!this.isHTMLText) {
|
|
226
|
-
const { scaleX, scaleY } = text.worldTransform;
|
|
203
|
+
const {scaleX: scaleX, scaleY: scaleY} = text.worldTransform;
|
|
227
204
|
textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
228
205
|
const fontSize = text.fontSize * textScale;
|
|
229
|
-
if (fontSize < 12)
|
|
230
|
-
textScale *= 12 / text.fontSize;
|
|
206
|
+
if (fontSize < 12) textScale *= 12 / text.fontSize;
|
|
231
207
|
}
|
|
232
208
|
this.textScale = textScale;
|
|
233
|
-
let { width, height } = text, offsetX = 0, offsetY = 0;
|
|
209
|
+
let {width: width, height: height} = text, offsetX = 0, offsetY = 0;
|
|
234
210
|
width *= textScale, height *= textScale;
|
|
235
211
|
const data = text.__;
|
|
236
212
|
if (data.__autoWidth) {
|
|
237
213
|
width += 20;
|
|
238
214
|
if (data.autoSizeAlign) {
|
|
239
215
|
switch (data.textAlign) {
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
216
|
+
case "center":
|
|
217
|
+
offsetX = -width / 2;
|
|
218
|
+
break;
|
|
219
|
+
|
|
220
|
+
case "right":
|
|
221
|
+
offsetX = -width;
|
|
244
222
|
}
|
|
245
223
|
}
|
|
246
224
|
}
|
|
@@ -248,47 +226,46 @@ let TextEditor = class TextEditor extends InnerEditor {
|
|
|
248
226
|
height += 20;
|
|
249
227
|
if (data.autoSizeAlign) {
|
|
250
228
|
switch (data.verticalAlign) {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
229
|
+
case "middle":
|
|
230
|
+
offsetY = -height / 2;
|
|
231
|
+
break;
|
|
232
|
+
|
|
233
|
+
case "bottom":
|
|
234
|
+
offsetY = -height;
|
|
255
235
|
}
|
|
256
236
|
}
|
|
257
237
|
}
|
|
258
|
-
const { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
|
|
259
|
-
const { a, b, c, d, e, f } = new Matrix(text.worldTransform).scale(1 / textScale).translateInner(offsetX, offsetY);
|
|
260
|
-
const { style
|
|
238
|
+
const {x: x, y: y} = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
|
|
239
|
+
const {a: a, b: b, c: c, d: d, e: e, f: f} = new Matrix(text.worldTransform).scale(1 / textScale).translateInner(offsetX, offsetY);
|
|
240
|
+
const {style: style} = this.editDom;
|
|
261
241
|
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
|
|
262
|
-
style.left = x +
|
|
263
|
-
style.top = y +
|
|
264
|
-
style.width = width +
|
|
265
|
-
style.height = height +
|
|
242
|
+
style.left = x + "px";
|
|
243
|
+
style.top = y + "px";
|
|
244
|
+
style.width = width + "px";
|
|
245
|
+
style.height = height + "px";
|
|
266
246
|
this.isHTMLText || updateStyle(this.editDom, text, textScale);
|
|
267
247
|
}
|
|
268
248
|
onUnload() {
|
|
269
|
-
const {
|
|
249
|
+
const {editTarget: text, editor: editor, editDom: dom} = this;
|
|
270
250
|
if (text) {
|
|
271
251
|
this.onInput();
|
|
272
|
-
if (text.text ===
|
|
273
|
-
text.text = '';
|
|
252
|
+
if (text.text === "\n") text.text = "";
|
|
274
253
|
text.textEditing = undefined;
|
|
275
|
-
if (editor.app)
|
|
276
|
-
editor.app.config.keyEvent = this._keyEvent;
|
|
254
|
+
if (editor.app) editor.app.config.keyEvent = this._keyEvent;
|
|
277
255
|
editor.off_(this.eventIds);
|
|
278
256
|
dom.removeEventListener("focus", this.onFocus);
|
|
279
257
|
dom.removeEventListener("input", this.onInput);
|
|
280
258
|
dom.removeEventListener("paste", this.onPaste);
|
|
281
|
-
window.removeEventListener(
|
|
282
|
-
window.removeEventListener(
|
|
259
|
+
window.removeEventListener("keydown", this.onKeydown);
|
|
260
|
+
window.removeEventListener("scroll", this.onUpdate);
|
|
283
261
|
dom.remove();
|
|
284
262
|
this.editDom = this.eventIds = undefined;
|
|
285
263
|
}
|
|
286
264
|
}
|
|
287
265
|
};
|
|
288
|
-
TextEditor = __decorate([
|
|
289
|
-
registerInnerEditor()
|
|
290
|
-
], TextEditor);
|
|
291
266
|
|
|
292
|
-
|
|
267
|
+
TextEditor = __decorate([ registerInnerEditor() ], TextEditor);
|
|
268
|
+
|
|
269
|
+
Plugin.add("text-editor", "editor");
|
|
293
270
|
|
|
294
271
|
export { TextEditor };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{isObject as e,ColorConvert as t,isArray as n,isUndefined as i,isString as o,Text as s,PointerEvent as r,Matrix as a,Plugin as d}from"@leafer-ui/core";import{registerInnerEditor as l,InnerEditor as c}from"@leafer-in/editor";"function"==typeof SuppressedError&&SuppressedError;const p={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},h={top:"flex-start",middle:"center",bottom:"flex-end"},f={none:"none",under:"underline",delete:"line-through","under-delete":"underline line-through"};function u(s,r,a){const{style:d}=s,{fill:l,padding:c,textWrap:u,textOverflow:g,textDecoration:x}=r;let m;d.fontFamily=r.fontFamily,d.fontSize=r.fontSize*a+"px",function(s,r){let a="black";n(r)&&(r=r[0]);if(e(r))switch(r.type){case"solid":a=t.string(r.color);break;case"image":break;case"linear":case"radial":case"angular":const e=r.stops[0];a=t.string(o(e)?e:e.color);break;default:i(r.r)||(a=t.string(r))}else a=r;s.color=a}(d,l),d.fontStyle=r.italic?"italic":"normal",d.fontWeight=r.fontWeight,e(x)?(m=x.type,x.color&&(d.textDecorationColor=t.string(x.color))):m=x,d.textDecoration=f[m],d.textTransform=p[r.textCase],d.textAlign="both"===r.textAlign?"justify":r.textAlign,d.display="flex",d.flexDirection="column",d.justifyContent=h[r.verticalAlign],d.lineHeight=(r.__.__lineHeight||0)*a+"px",d.letterSpacing=(r.__.__letterSpacing||0)*a+"px",d.whiteSpace="none"===u||r.__.__autoWidth?"nowrap":"normal",d.wordBreak="break"===u?"break-all":"normal",d.textIndent=(r.paraIndent||0)*a+"px",d.padding=n(c)?c.map(e=>e*a+"px").join(" "):(c||0)*a+"px",d.textOverflow="show"===g?"":"hide"===g?"clip":g}let g=class extends c{constructor(){super(...arguments),this.config={selectAll:!0},this.eventIds=[]}get tag(){return"TextEditor"}onLoad(){const{editor:e}=this,{config:t}=e.app,n=this.editTarget;n.textEditing=!0,this.isHTMLText=!(n instanceof s),this._keyEvent=t.keyEvent,t.keyEvent=!1;const i=this.editDom=document.createElement("div"),{style:o}=i;i.contentEditable="true",o.position="fixed",o.transformOrigin="left top",o.boxSizing="border-box",this.isHTMLText?i.innerHTML=String(n.text):i.innerText=String(n.text);const{view:a}=e.app;(this.inBody=a instanceof HTMLCanvasElement)?document.body.appendChild(i):a.appendChild(i),this.eventIds=[e.app.on_(r.DOWN,t=>{let n,{target:o}=t.origin;for(;o;)o===i&&(n=!0),o=o.parentElement;n||e.closeInnerEditor()})],this.onFocus=this.onFocus.bind(this),this.onInput=this.onInput.bind(this),this.onPaste=this.onPaste.bind(this),this.onUpdate=this.onUpdate.bind(this),this.onKeydown=this.onKeydown.bind(this),i.addEventListener("focus",this.onFocus),i.addEventListener("input",this.onInput),i.addEventListener("paste",this.onPaste),window.addEventListener("keydown",this.onKeydown),window.addEventListener("scroll",this.onUpdate);const d=window.getSelection(),l=document.createRange();if(this.config.selectAll)l.selectNodeContents(i);else{const e=i.childNodes[0];l.setStartAfter(e),l.setEndAfter(e),l.collapse(!0)}d.removeAllRanges(),d.addRange(l)}onInput(){const{editDom:e}=this;this.editTarget.text=this.isHTMLText?e.innerHTML:e.innerText}onFocus(){this.editDom.style.outline="none"}onKeydown(e){if("Escape"===e.code&&this.editor.closeInnerEditor(),"Enter"===e.key){e.preventDefault();const t=document.createElement("br"),n=document.createTextNode(""),i=window.getSelection().getRangeAt(0);i.deleteContents(),i.insertNode(n),i.insertNode(t),i.setStartAfter(t),i.setEndAfter(t),this.onInput()}}onPaste(e){if(this.isHTMLText)return;e.preventDefault();const t=e.clipboardData;if(!t)return;let n=t.getData("text/plain").replace(/\r\n?/g,"\n");const i=window.getSelection();if(!i||!i.rangeCount)return;const o=i.getRangeAt(0);o.deleteContents();const s=n.split("\n"),r=document.createDocumentFragment();s.forEach((e,t)=>{t>0&&r.appendChild(document.createElement("br")),r.appendChild(document.createTextNode(e))}),o.insertNode(r),o.collapse(!1),i.removeAllRanges(),i.addRange(o),this.onInput()}onUpdate(){const{editTarget:e}=this;let t=1;if(!this.isHTMLText){const{scaleX:n,scaleY:i}=e.worldTransform;t=Math.max(Math.abs(n),Math.abs(i));e.fontSize*t<12&&(t*=12/e.fontSize)}this.textScale=t;let{width:n,height:i}=e,o=0,s=0;n*=t,i*=t;const r=e.__;if(r.__autoWidth&&(n+=20,r.autoSizeAlign))switch(r.textAlign){case"center":o=-n/2;break;case"right":o=-n}if(r.__autoHeight&&(i+=20,r.autoSizeAlign))switch(r.verticalAlign){case"middle":s=-i/2;break;case"bottom":s=-i}const{x:d,y:l}=this.inBody?e.app.clientBounds:e.app.tree.clientBounds,{a:c,b:p,c:h,d:f,e:g,f:x}=new a(e.worldTransform).scale(1/t).translateInner(o,s),{style:m}=this.editDom;m.transform=`matrix(${c},${p},${h},${f},${g},${x})`,m.left=d+"px",m.top=l+"px",m.width=n+"px",m.height=i+"px",this.isHTMLText||u(this.editDom,e,t)}onUnload(){const{editTarget:e,editor:t,editDom:n}=this;e&&(this.onInput(),"\n"===e.text&&(e.text=""),e.textEditing=void 0,t.app&&(t.app.config.keyEvent=this._keyEvent),t.off_(this.eventIds),n.removeEventListener("focus",this.onFocus),n.removeEventListener("input",this.onInput),n.removeEventListener("paste",this.onPaste),window.removeEventListener("keydown",this.onKeydown),window.removeEventListener("scroll",this.onUpdate),n.remove(),this.editDom=this.eventIds=void 0)}};g=function(e,t,n,i){var o,s=arguments.length,r=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(r=(s<3?o(r):s>3?o(t,n,r):o(t,n))||r);return s>3&&r&&Object.defineProperty(t,n,r),r}([l()],g),d.add("text-editor","editor");export{g as TextEditor};
|
|
2
2
|
//# sourceMappingURL=text-editor.esm.min.js.map
|