@chenyomi/leafer-htmltext-editor 1.0.0 → 1.0.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/TextEditTool/index.d.ts +2 -1
- package/dist/TextEditTool/index.d.ts.map +1 -1
- package/dist/TextEditTool/index.js +43 -69
- package/dist/TextEditTool/utils.d.ts.map +1 -1
- package/dist/TextEditTool/utils.js +96 -13
- package/dist/TextEditor.d.ts +9 -6
- package/dist/TextEditor.d.ts.map +1 -1
- package/dist/TextEditor.js +65 -63
- package/dist/esm/TextEditTool/index.d.ts +2 -1
- package/dist/esm/TextEditTool/index.d.ts.map +1 -1
- package/dist/esm/TextEditTool/index.js +45 -71
- package/dist/esm/TextEditTool/utils.d.ts.map +1 -1
- package/dist/esm/TextEditTool/utils.js +96 -13
- package/dist/esm/TextEditor.d.ts +9 -6
- package/dist/esm/TextEditor.d.ts.map +1 -1
- package/dist/esm/TextEditor.js +65 -63
- package/dist/esm/index.d.ts +17 -6
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/utils.d.ts +1 -1
- package/dist/esm/utils.d.ts.map +1 -1
- package/dist/esm/utils.js +29 -48
- package/dist/index.d.ts +17 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +134 -77
- package/dist/index.js +168 -87
- package/dist/utils.d.ts +1 -1
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +29 -48
- package/package.json +3 -3
- package/src/TextEditTool/index.ts +78 -84
- package/src/TextEditTool/utils.ts +101 -29
- package/src/TextEditor.ts +103 -90
- package/src/index.ts +145 -83
- package/src/utils.ts +140 -178
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { EditTool } from
|
|
1
|
+
import { EditTool } from "@leafer-in/editor";
|
|
2
2
|
export declare class TextEditTool extends EditTool {
|
|
3
3
|
get tag(): string;
|
|
4
4
|
quill: any;
|
|
5
5
|
private _dragRAF;
|
|
6
6
|
private updateBoxDebounced;
|
|
7
7
|
constructor(editor: any);
|
|
8
|
+
private debounce;
|
|
8
9
|
addEvent(): void;
|
|
9
10
|
onLoad(): void;
|
|
10
11
|
private isUpdatingPoints;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TextEditTool/index.ts"],"names":[],"mappings":"AAQA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TextEditTool/index.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,QAAQ,EAGT,MAAM,mBAAmB,CAAC;AAK3B,qBAEa,YAAa,SAAQ,QAAQ;IAExC,IAAW,GAAG,WAEb;IACM,KAAK,EAAE,GAAG,CAAQ;IACzB,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,kBAAkB,CAAsB;gBAEpC,MAAM,EAAE,GAAG;IAQvB,OAAO,CAAC,QAAQ;IAgBT,QAAQ,IAAI,IAAI;IA2BhB,MAAM,IAAI,IAAI;IA0BrB,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,WAAW,CAAK;IACjB,oBAAoB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAQrC,QAAQ,IAAI,IAAI;IAgBhB,QAAQ,IAAI,IAAI;IAMhB,SAAS,IAAI,IAAI;CACzB"}
|
|
@@ -10,21 +10,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|
|
10
10
|
};
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.TextEditTool = void 0;
|
|
13
|
-
const leafer_ui_1 = require("leafer-ui");
|
|
14
13
|
const editor_1 = require("@leafer-in/editor");
|
|
14
|
+
const leafer_ui_1 = require("leafer-ui");
|
|
15
|
+
const index_1 = require("../index");
|
|
15
16
|
const utils_1 = require("../utils");
|
|
16
|
-
const TextEditor_1 = require("../TextEditor");
|
|
17
|
-
function debounce(func, wait) {
|
|
18
|
-
let timeout = null;
|
|
19
|
-
return function (...args) {
|
|
20
|
-
if (timeout)
|
|
21
|
-
clearTimeout(timeout);
|
|
22
|
-
timeout = setTimeout(() => func.apply(this, args), wait);
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
17
|
let TextEditTool = class TextEditTool extends editor_1.EditTool {
|
|
26
18
|
get tag() {
|
|
27
|
-
return
|
|
19
|
+
return "TextEditTool";
|
|
28
20
|
}
|
|
29
21
|
constructor(editor) {
|
|
30
22
|
super(editor);
|
|
@@ -33,101 +25,83 @@ let TextEditTool = class TextEditTool extends editor_1.EditTool {
|
|
|
33
25
|
this.isUpdatingPoints = false;
|
|
34
26
|
this.curveAmount = 0;
|
|
35
27
|
this.eventIds = [];
|
|
36
|
-
this.updateBoxDebounced = debounce((text) => {
|
|
28
|
+
this.updateBoxDebounced = this.debounce((text) => {
|
|
37
29
|
(0, utils_1.updataHtmlText)(text);
|
|
38
30
|
}, 300);
|
|
39
31
|
}
|
|
32
|
+
debounce(func, wait) {
|
|
33
|
+
let timeout = null;
|
|
34
|
+
return ((...args) => {
|
|
35
|
+
if (timeout !== null) {
|
|
36
|
+
window.clearTimeout(timeout);
|
|
37
|
+
}
|
|
38
|
+
timeout = window.setTimeout(() => func.apply(this, args), wait);
|
|
39
|
+
});
|
|
40
|
+
}
|
|
40
41
|
addEvent() {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const text = this.editor.element.findOne('HTMLText');
|
|
44
|
-
if (!text)
|
|
45
|
-
return;
|
|
42
|
+
const { editor } = index_1.quillManager.getCanvas();
|
|
43
|
+
const text = editor._target.findOne("HTMLText");
|
|
46
44
|
const { scaleX, scaleY } = text.worldTransform;
|
|
47
45
|
const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
48
|
-
const div = document.querySelector(
|
|
49
|
-
if (!div)
|
|
50
|
-
return;
|
|
46
|
+
const div = document.querySelector("#textInnerEditor");
|
|
51
47
|
const { style } = div;
|
|
52
48
|
this.eventIds = [
|
|
53
|
-
|
|
54
|
-
if (!text.data)
|
|
55
|
-
text.data = {};
|
|
49
|
+
editor.on_(editor_1.EditorScaleEvent.SCALE, (e) => {
|
|
56
50
|
if (!text.data.canChangeBox) {
|
|
57
51
|
text.data.canChangeBox = true;
|
|
58
52
|
}
|
|
59
|
-
if (text.data.canChangeBox
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
style.width = parentWidth * zoomScale + 'px';
|
|
63
|
-
style.height = 'auto';
|
|
64
|
-
}
|
|
53
|
+
if (text.data.canChangeBox) {
|
|
54
|
+
style.width = text.parent.width * zoomScale + "px";
|
|
55
|
+
style.height = "auto";
|
|
65
56
|
}
|
|
66
57
|
this.updateBoxDebounced(text);
|
|
67
58
|
}),
|
|
68
|
-
|
|
69
|
-
if (!text.parent
|
|
70
|
-
|
|
59
|
+
editor.on_(leafer_ui_1.PointerEvent.DOUBLE_TAP, () => {
|
|
60
|
+
if (!text.parent.locked) {
|
|
61
|
+
editor.openInnerEditor(text, true);
|
|
71
62
|
}
|
|
72
|
-
})
|
|
63
|
+
}),
|
|
73
64
|
];
|
|
74
65
|
}
|
|
75
66
|
onLoad() {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const text = this.editor.element.findOne('HTMLText');
|
|
79
|
-
if (!text)
|
|
80
|
-
return;
|
|
67
|
+
const { editor } = index_1.quillManager.getCanvas();
|
|
68
|
+
const text = editor._target.findOne("HTMLText");
|
|
81
69
|
const { scaleX, scaleY } = text.worldTransform;
|
|
82
70
|
const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
83
71
|
this.addEvent();
|
|
84
|
-
this.
|
|
85
|
-
this.quill
|
|
86
|
-
|
|
87
|
-
this.quill.clipboard.dangerouslyPasteHTML(text.text);
|
|
88
|
-
}
|
|
89
|
-
const div = document.querySelector('#textInnerEditor');
|
|
90
|
-
if (!div)
|
|
91
|
-
return;
|
|
72
|
+
this.quill = index_1.quillManager.getQuill();
|
|
73
|
+
this.quill.clipboard.dangerouslyPasteHTML(text.text);
|
|
74
|
+
const div = document.querySelector("#textInnerEditor");
|
|
92
75
|
const { style } = div;
|
|
93
|
-
if (text.data
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
if (parentWidth !== undefined) {
|
|
97
|
-
style.width = parentWidth * zoomScale + 'px';
|
|
98
|
-
}
|
|
99
|
-
if (parentHeight !== undefined) {
|
|
100
|
-
style.height = parentHeight * zoomScale + 'px';
|
|
101
|
-
}
|
|
76
|
+
if (text.data.canChangeBox) {
|
|
77
|
+
style.width = text.parent.width * zoomScale + "px";
|
|
78
|
+
style.height = text.parent.height * zoomScale + "px";
|
|
102
79
|
}
|
|
103
80
|
else {
|
|
104
|
-
style.width =
|
|
105
|
-
style.height =
|
|
81
|
+
style.width = "auto";
|
|
82
|
+
style.height = "auto";
|
|
106
83
|
}
|
|
107
84
|
}
|
|
108
85
|
updateChangeBoxBound(text) {
|
|
109
|
-
|
|
86
|
+
text &&
|
|
110
87
|
text.set({
|
|
111
88
|
width: text.__layout.boxBounds.width,
|
|
112
|
-
height: text.__layout.boxBounds.height
|
|
89
|
+
height: text.__layout.boxBounds.height,
|
|
113
90
|
});
|
|
114
|
-
}
|
|
115
91
|
}
|
|
116
92
|
onUpdate() {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
const
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
const el = this.editor.element;
|
|
123
|
-
console.log('文本bound更新');
|
|
124
|
-
if (this.curveAmount === text.curveAmount)
|
|
93
|
+
const { editor } = index_1.quillManager.getCanvas();
|
|
94
|
+
const text = editor._target.findOne("HTMLText");
|
|
95
|
+
const el = editor._target;
|
|
96
|
+
console.log("文本bound更新");
|
|
97
|
+
if (this.curveAmount == text.curveAmount)
|
|
125
98
|
return;
|
|
126
99
|
if (this.isUpdatingPoints)
|
|
127
100
|
return;
|
|
128
101
|
}
|
|
129
102
|
onUnload() {
|
|
130
|
-
|
|
103
|
+
const { editor } = index_1.quillManager.getCanvas();
|
|
104
|
+
editor.off_(this.eventIds);
|
|
131
105
|
}
|
|
132
106
|
onDestroy() { }
|
|
133
107
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TextEditTool/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAM1E;AAED,eAAO,MAAM,eAAe,GAAI,SAAS,GAAG,EAAE,IAAI,OAAO,SAsExD,CAAA;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TextEditTool/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAM1E;AAED,eAAO,MAAM,eAAe,GAAI,SAAS,GAAG,EAAE,IAAI,OAAO,SAsExD,CAAA;AAgKD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMnD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjD;AAED,eAAO,MAAM,iBAAiB,UAAgC,CAAA;AAE9D,eAAO,MAAM,eAAe,UAA8B,CAAA;AAuB1D,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAM9C"}
|
|
@@ -5,8 +5,8 @@ exports.getArcRadius = getArcRadius;
|
|
|
5
5
|
exports.toSuperscript = toSuperscript;
|
|
6
6
|
exports.toSubscript = toSubscript;
|
|
7
7
|
exports.toNormal = toNormal;
|
|
8
|
-
const leafer_ui_1 = require("leafer-ui");
|
|
9
8
|
const html_1 = require("@leafer-in/html");
|
|
9
|
+
const leafer_ui_1 = require("leafer-ui");
|
|
10
10
|
function getArcRadius(fontSize, curveAmount) {
|
|
11
11
|
if (curveAmount === 0)
|
|
12
12
|
return Infinity;
|
|
@@ -83,20 +83,103 @@ const handleShowCurve = (element, op) => {
|
|
|
83
83
|
};
|
|
84
84
|
exports.handleShowCurve = handleShowCurve;
|
|
85
85
|
const baseSuperscript = {
|
|
86
|
-
'0': '⁰',
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
'
|
|
86
|
+
'0': '⁰',
|
|
87
|
+
'1': '¹',
|
|
88
|
+
'2': '²',
|
|
89
|
+
'3': '³',
|
|
90
|
+
'4': '⁴',
|
|
91
|
+
'5': '⁵',
|
|
92
|
+
'6': '⁶',
|
|
93
|
+
'7': '⁷',
|
|
94
|
+
'8': '⁸',
|
|
95
|
+
'9': '⁹',
|
|
96
|
+
a: 'ᵃ',
|
|
97
|
+
b: 'ᵇ',
|
|
98
|
+
c: 'ᶜ',
|
|
99
|
+
d: 'ᵈ',
|
|
100
|
+
e: 'ᵉ',
|
|
101
|
+
f: 'ᶠ',
|
|
102
|
+
g: 'ᵍ',
|
|
103
|
+
h: 'ʰ',
|
|
104
|
+
i: 'ⁱ',
|
|
105
|
+
j: 'ʲ',
|
|
106
|
+
k: 'ᵏ',
|
|
107
|
+
l: 'ˡ',
|
|
108
|
+
m: 'ᵐ',
|
|
109
|
+
n: 'ⁿ',
|
|
110
|
+
o: 'ᵒ',
|
|
111
|
+
p: 'ᵖ',
|
|
112
|
+
r: 'ʳ',
|
|
113
|
+
s: 'ˢ',
|
|
114
|
+
t: 'ᵗ',
|
|
115
|
+
u: 'ᵘ',
|
|
116
|
+
v: 'ᵛ',
|
|
117
|
+
w: 'ʷ',
|
|
118
|
+
x: 'ˣ',
|
|
119
|
+
y: 'ʸ',
|
|
120
|
+
z: 'ᶻ',
|
|
121
|
+
A: 'ᴬ',
|
|
122
|
+
B: 'ᴮ',
|
|
123
|
+
D: 'ᴰ',
|
|
124
|
+
E: 'ᴱ',
|
|
125
|
+
G: 'ᴳ',
|
|
126
|
+
H: 'ᴴ',
|
|
127
|
+
I: 'ᴵ',
|
|
128
|
+
J: 'ᴶ',
|
|
129
|
+
K: 'ᴷ',
|
|
130
|
+
L: 'ᴸ',
|
|
131
|
+
M: 'ᴹ',
|
|
132
|
+
N: 'ᴺ',
|
|
133
|
+
O: 'ᴼ',
|
|
134
|
+
P: 'ᴾ',
|
|
135
|
+
R: 'ᴿ',
|
|
136
|
+
T: 'ᵀ',
|
|
137
|
+
U: 'ᵁ',
|
|
138
|
+
W: 'ᵂ',
|
|
139
|
+
'+': '⁺',
|
|
140
|
+
'-': '⁻',
|
|
141
|
+
'=': '⁼',
|
|
142
|
+
'(': '⁽',
|
|
143
|
+
')': '⁾'
|
|
93
144
|
};
|
|
94
145
|
const baseSubscript = {
|
|
95
|
-
'0': '₀',
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
'
|
|
99
|
-
'
|
|
146
|
+
'0': '₀',
|
|
147
|
+
'1': '₁',
|
|
148
|
+
'2': '₂',
|
|
149
|
+
'3': '₃',
|
|
150
|
+
'4': '₄',
|
|
151
|
+
'5': '₅',
|
|
152
|
+
'6': '₆',
|
|
153
|
+
'7': '₇',
|
|
154
|
+
'8': '₈',
|
|
155
|
+
'9': '₉',
|
|
156
|
+
a: 'ₐ',
|
|
157
|
+
e: 'ₑ',
|
|
158
|
+
h: 'ₕ',
|
|
159
|
+
i: 'ᵢ',
|
|
160
|
+
j: 'ⱼ',
|
|
161
|
+
k: 'ₖ',
|
|
162
|
+
l: 'ₗ',
|
|
163
|
+
m: 'ₘ',
|
|
164
|
+
n: 'ₙ',
|
|
165
|
+
o: 'ₒ',
|
|
166
|
+
p: 'ₚ',
|
|
167
|
+
r: 'ᵣ',
|
|
168
|
+
s: 'ₛ',
|
|
169
|
+
t: 'ₜ',
|
|
170
|
+
u: 'ᵤ',
|
|
171
|
+
v: 'ᵥ',
|
|
172
|
+
x: 'ₓ',
|
|
173
|
+
'+': '₊',
|
|
174
|
+
'-': '₋',
|
|
175
|
+
'=': '₌',
|
|
176
|
+
'(': '₍',
|
|
177
|
+
')': '₎',
|
|
178
|
+
β: 'ᵦ',
|
|
179
|
+
γ: 'ᵧ',
|
|
180
|
+
ρ: 'ᵨ',
|
|
181
|
+
φ: 'ᵩ',
|
|
182
|
+
χ: 'ᵪ'
|
|
100
183
|
};
|
|
101
184
|
function invertMap(map) {
|
|
102
185
|
const inv = {};
|
package/dist/TextEditor.d.ts
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
import { IText, IEventListenerId } from "@leafer-in/interface";
|
|
2
1
|
import { InnerEditor } from "@leafer-in/editor";
|
|
3
2
|
export declare class TextEditor extends InnerEditor {
|
|
4
|
-
static quill: any;
|
|
5
3
|
get tag(): string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
editDom: HTMLDivElement | undefined;
|
|
4
|
+
editTarget: any;
|
|
5
|
+
editDom: any;
|
|
9
6
|
config: {
|
|
10
7
|
selectAll: boolean;
|
|
11
8
|
};
|
|
12
|
-
eventIds:
|
|
9
|
+
eventIds: any[];
|
|
13
10
|
protected selectText: {
|
|
14
11
|
start: number;
|
|
15
12
|
end: number;
|
|
@@ -17,6 +14,12 @@ export declare class TextEditor extends InnerEditor {
|
|
|
17
14
|
} | undefined;
|
|
18
15
|
protected inBody: boolean | undefined;
|
|
19
16
|
protected isHTMLText: boolean | undefined;
|
|
17
|
+
protected _keyEvent: boolean | undefined;
|
|
18
|
+
quill: any;
|
|
19
|
+
isComposing: boolean;
|
|
20
|
+
private misspelledWords;
|
|
21
|
+
private overlay;
|
|
22
|
+
private get isOASystem();
|
|
20
23
|
onLoad(): void;
|
|
21
24
|
private onSelectionChange;
|
|
22
25
|
private onInput;
|
package/dist/TextEditor.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../src/TextEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../src/TextEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAuB,MAAM,mBAAmB,CAAC;AAKrE,qBACa,UAAW,SAAQ,WAAW;IACzC,IAAW,GAAG,WAEb;IACc,UAAU,EAAE,GAAG,CAAC;IAExB,OAAO,EAAE,GAAG,CAAC;IACb,MAAM;;MAEX;IAEK,QAAQ,EAAE,GAAG,EAAE,CAAM;IAE5B,SAAS,CAAC,UAAU,EAChB;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAC5C,SAAS,CAAa;IAC1B,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAa;IAClD,SAAS,CAAC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAa;IACtD,SAAS,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAa;IAC9C,KAAK,EAAE,GAAG,CAAQ;IAClB,WAAW,EAAE,OAAO,CAAS;IAGpC,OAAO,CAAC,eAAe,CAIf;IACR,OAAO,CAAC,OAAO,CAA+B;IAG9C,OAAO,KAAK,UAAU,GAErB;IACM,MAAM,IAAI,IAAI;IA2FrB,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,OAAO,CAUb;IAEK,QAAQ;IA0Bf,OAAO,CAAC,gBAAgB,CAAS;IAC1B,QAAQ,IAAI,IAAI;CAsCxB"}
|
package/dist/TextEditor.js
CHANGED
|
@@ -5,23 +5,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
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;
|
|
6
6
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
7
7
|
};
|
|
8
|
-
var TextEditor_1;
|
|
9
8
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
9
|
exports.TextEditor = void 0;
|
|
11
|
-
const core_1 = require("@leafer-ui/core");
|
|
12
10
|
const editor_1 = require("@leafer-in/editor");
|
|
11
|
+
const core_1 = require("@leafer-ui/core");
|
|
12
|
+
const _1 = require(".");
|
|
13
13
|
const utils_1 = require("./utils");
|
|
14
|
-
let TextEditor =
|
|
14
|
+
let TextEditor = class TextEditor extends editor_1.InnerEditor {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
17
|
this.config = {
|
|
18
18
|
selectAll: false,
|
|
19
19
|
};
|
|
20
20
|
this.eventIds = [];
|
|
21
|
+
this.selectText = undefined;
|
|
22
|
+
this.inBody = undefined;
|
|
23
|
+
this.isHTMLText = undefined;
|
|
24
|
+
this._keyEvent = undefined;
|
|
25
|
+
this.quill = null;
|
|
26
|
+
this.isComposing = false;
|
|
27
|
+
this.misspelledWords = [];
|
|
28
|
+
this.overlay = null;
|
|
21
29
|
this.onSelectionChange = async (e) => {
|
|
22
30
|
e && localStorage.setItem("selection-change", JSON.stringify(e));
|
|
23
31
|
};
|
|
24
32
|
this.onInput = async () => {
|
|
33
|
+
const { editDom } = this;
|
|
34
|
+
console.log("onInput");
|
|
25
35
|
(0, utils_1.updataHtmlText)(this.editTarget);
|
|
26
36
|
};
|
|
27
37
|
this.isUpdatingPoints = false;
|
|
@@ -29,26 +39,22 @@ let TextEditor = TextEditor_1 = class TextEditor extends editor_1.InnerEditor {
|
|
|
29
39
|
get tag() {
|
|
30
40
|
return "TextEditor";
|
|
31
41
|
}
|
|
42
|
+
get isOASystem() {
|
|
43
|
+
return window.location.host.includes("oa");
|
|
44
|
+
}
|
|
32
45
|
onLoad() {
|
|
33
46
|
const { editor } = this;
|
|
34
47
|
const { config } = editor.app;
|
|
35
48
|
const text = this.editTarget;
|
|
36
49
|
const { scaleX, scaleY } = text.worldTransform;
|
|
37
50
|
const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
38
|
-
this.quill = TextEditor_1.quill;
|
|
39
51
|
this.isHTMLText = !(text instanceof Text);
|
|
52
|
+
this._keyEvent = config.keyEvent;
|
|
40
53
|
config.keyEvent = false;
|
|
41
|
-
const
|
|
42
|
-
if (!element || !(element instanceof HTMLDivElement)) {
|
|
43
|
-
console.error("Cannot find #textInnerEditor element or it's not a div");
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
const div = (this.editDom = element);
|
|
54
|
+
const div = (this.editDom = document.querySelector("#textInnerEditor"));
|
|
47
55
|
const { style } = div;
|
|
48
56
|
style.visibility = "visible";
|
|
49
|
-
if (text.data
|
|
50
|
-
text.parent?.width !== undefined &&
|
|
51
|
-
text.parent?.height !== undefined) {
|
|
57
|
+
if (text.data.canChangeBox) {
|
|
52
58
|
style.width = text.parent.width * zoomScale + "px";
|
|
53
59
|
style.height = text.parent.height * zoomScale + "px";
|
|
54
60
|
}
|
|
@@ -57,51 +63,44 @@ let TextEditor = TextEditor_1 = class TextEditor extends editor_1.InnerEditor {
|
|
|
57
63
|
style.height = "auto";
|
|
58
64
|
}
|
|
59
65
|
style.outline = "solid #8499EF";
|
|
60
|
-
if (text.data
|
|
66
|
+
if (text.data.textData.fontSize) {
|
|
61
67
|
div.style.fontSize = `${text.data.textData.fontSize * zoomScale}px`;
|
|
62
68
|
}
|
|
63
|
-
if (text.data
|
|
69
|
+
if (text.data.textData.fontFamily) {
|
|
64
70
|
div.style.fontFamily = `${text.data.textData.fontFamily}`;
|
|
65
71
|
}
|
|
66
|
-
if (text.data
|
|
72
|
+
if (text.data.textData.lineHeight) {
|
|
67
73
|
div.style.lineHeight = text.data.textData.lineHeight;
|
|
68
74
|
}
|
|
69
|
-
if (text.data
|
|
75
|
+
if (text.data.textData.letterSpacing) {
|
|
70
76
|
div.style.letterSpacing = `${text.data.textData.letterSpacing}px`;
|
|
71
77
|
}
|
|
72
|
-
if (text.data
|
|
78
|
+
if (text.data.textData.textShadow) {
|
|
73
79
|
div.style.textShadow = `${text.data.textData.textShadow}`;
|
|
74
80
|
}
|
|
75
81
|
else {
|
|
76
82
|
div.style.textShadow = "none";
|
|
77
83
|
}
|
|
78
|
-
if (text.data
|
|
84
|
+
if (text.data.textData.alignContent) {
|
|
79
85
|
const qlEditor = div.querySelector(".ql-editor");
|
|
80
|
-
|
|
81
|
-
qlEditor.style.alignContent = `${text.data.textData.alignContent}`;
|
|
82
|
-
}
|
|
86
|
+
qlEditor.style.alignContent = `${text.data.textData.alignContent}`;
|
|
83
87
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
94
|
-
else {
|
|
95
|
-
this.quill.setSelection(0, this.quill.getLength() - 1);
|
|
96
|
-
}
|
|
97
|
-
this.quill.on("text-change", this.onInput);
|
|
98
|
-
this.quill.on("selection-change", this.onSelectionChange);
|
|
88
|
+
this.quill = _1.quillManager.getQuill();
|
|
89
|
+
this.quill.clipboard.dangerouslyPasteHTML(text.text);
|
|
90
|
+
if (text.parent.children[0].tag.includes("Shape")) {
|
|
91
|
+
style.width = text.parent.width * zoomScale + "px";
|
|
92
|
+
style.left = "0px";
|
|
93
|
+
this.quill.formatLine(0, this.quill.getLength(), "align", "center");
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
this.quill.setSelection(0, this.quill.getLength() - 1);
|
|
99
97
|
}
|
|
98
|
+
this.quill.on("text-change", this.onInput);
|
|
99
|
+
this.quill.on("selection-change", this.onSelectionChange);
|
|
100
100
|
localStorage.removeItem("selection-change");
|
|
101
101
|
this.eventIds = [
|
|
102
102
|
editor.app.on_(core_1.PointerEvent.DOWN, (e) => {
|
|
103
|
-
let { target } = e.origin;
|
|
104
|
-
let find = false;
|
|
103
|
+
let { target } = e.origin, find = false;
|
|
105
104
|
while (target) {
|
|
106
105
|
if (target === div)
|
|
107
106
|
find = true;
|
|
@@ -116,27 +115,20 @@ let TextEditor = TextEditor_1 = class TextEditor extends editor_1.InnerEditor {
|
|
|
116
115
|
}
|
|
117
116
|
onUpdate() {
|
|
118
117
|
const { editTarget: text } = this;
|
|
119
|
-
if (!text.parent?.__local)
|
|
120
|
-
return;
|
|
121
118
|
const { scaleX, scaleY } = text.worldTransform;
|
|
122
119
|
const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
let height = local.height || 0;
|
|
126
|
-
width *= zoomScale;
|
|
127
|
-
height *= zoomScale;
|
|
120
|
+
let { width, height } = text.parent.__local;
|
|
121
|
+
((width *= zoomScale), (height *= zoomScale));
|
|
128
122
|
const { x, y } = this.inBody
|
|
129
123
|
? text.app.clientBounds
|
|
130
|
-
:
|
|
124
|
+
: text.app.tree.clientBounds;
|
|
131
125
|
const { a, b, c, d, e, f } = new core_1.Matrix(text.worldTransform)
|
|
132
126
|
.scale(1 / zoomScale)
|
|
133
127
|
.translateInner(0, 0);
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
style.top = y + "px";
|
|
139
|
-
}
|
|
128
|
+
const { style } = this.editDom;
|
|
129
|
+
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
|
|
130
|
+
style.left = x + "px";
|
|
131
|
+
style.top = y + "px";
|
|
140
132
|
text.set({
|
|
141
133
|
visible: false,
|
|
142
134
|
});
|
|
@@ -145,22 +137,32 @@ let TextEditor = TextEditor_1 = class TextEditor extends editor_1.InnerEditor {
|
|
|
145
137
|
const { editTarget: text, editor, editDom: dom } = this;
|
|
146
138
|
if (text) {
|
|
147
139
|
this.onInput();
|
|
140
|
+
if (editor.app)
|
|
141
|
+
editor.app.config.keyEvent = this._keyEvent;
|
|
148
142
|
editor.off_(this.eventIds);
|
|
149
|
-
|
|
150
|
-
this.editDom.style.visibility = "hidden";
|
|
151
|
-
}
|
|
143
|
+
this.editDom.style.visibility = "hidden";
|
|
152
144
|
this.eventIds = [];
|
|
153
145
|
}
|
|
154
|
-
text.
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
146
|
+
if (text.parent &&
|
|
147
|
+
text.parent.name == "Text" &&
|
|
148
|
+
text.parent.children.some((e) => e.tag === "Box")) {
|
|
149
|
+
text.parent.findOne("Box").opacity = 1;
|
|
150
|
+
text.visible = false;
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
text.set({
|
|
154
|
+
visible: true,
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
if (this.quill.getLength() === 1 && text.parent.name === "Text") {
|
|
158
|
+
text.parent.remove();
|
|
160
159
|
}
|
|
160
|
+
console.log("onUnload");
|
|
161
|
+
this.quill.off("text-change", this.onInput);
|
|
162
|
+
this.quill.off("selection-change", this.onSelectionChange);
|
|
161
163
|
}
|
|
162
164
|
};
|
|
163
165
|
exports.TextEditor = TextEditor;
|
|
164
|
-
exports.TextEditor = TextEditor =
|
|
166
|
+
exports.TextEditor = TextEditor = __decorate([
|
|
165
167
|
(0, editor_1.registerInnerEditor)()
|
|
166
168
|
], TextEditor);
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { EditTool } from
|
|
1
|
+
import { EditTool } from "@leafer-in/editor";
|
|
2
2
|
export declare class TextEditTool extends EditTool {
|
|
3
3
|
get tag(): string;
|
|
4
4
|
quill: any;
|
|
5
5
|
private _dragRAF;
|
|
6
6
|
private updateBoxDebounced;
|
|
7
7
|
constructor(editor: any);
|
|
8
|
+
private debounce;
|
|
8
9
|
addEvent(): void;
|
|
9
10
|
onLoad(): void;
|
|
10
11
|
private isUpdatingPoints;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextEditTool/index.ts"],"names":[],"mappings":"AAQA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextEditTool/index.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,QAAQ,EAGT,MAAM,mBAAmB,CAAC;AAK3B,qBAEa,YAAa,SAAQ,QAAQ;IAExC,IAAW,GAAG,WAEb;IACM,KAAK,EAAE,GAAG,CAAQ;IACzB,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,kBAAkB,CAAsB;gBAEpC,MAAM,EAAE,GAAG;IAQvB,OAAO,CAAC,QAAQ;IAgBT,QAAQ,IAAI,IAAI;IA2BhB,MAAM,IAAI,IAAI;IA0BrB,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,WAAW,CAAK;IACjB,oBAAoB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAQrC,QAAQ,IAAI,IAAI;IAgBhB,QAAQ,IAAI,IAAI;IAMhB,SAAS,IAAI,IAAI;CACzB"}
|