@leafer-in/text-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/text-editor.cjs +196 -1
- package/dist/text-editor.esm.js +196 -1
- package/dist/text-editor.esm.min.js +1 -1
- package/dist/text-editor.js +199 -1
- package/dist/text-editor.min.cjs +1 -1
- package/dist/text-editor.min.js +1 -1
- package/package.json +5 -5
package/dist/text-editor.cjs
CHANGED
|
@@ -1 +1,196 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var core = require('@leafer-ui/core');
|
|
4
|
+
var editor = require('@leafer-in/editor');
|
|
5
|
+
|
|
6
|
+
/******************************************************************************
|
|
7
|
+
Copyright (c) Microsoft Corporation.
|
|
8
|
+
|
|
9
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
10
|
+
purpose with or without fee is hereby granted.
|
|
11
|
+
|
|
12
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
13
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
14
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
15
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
16
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
17
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
18
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
19
|
+
***************************************************************************** */
|
|
20
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
function __decorate(decorators, target, key, desc) {
|
|
24
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
25
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
26
|
+
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;
|
|
27
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
31
|
+
var e = new Error(message);
|
|
32
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const textCaseMap = {
|
|
36
|
+
'none': 'none',
|
|
37
|
+
'title': 'capitalize',
|
|
38
|
+
'upper': 'uppercase',
|
|
39
|
+
'lower': 'lowercase',
|
|
40
|
+
'small-caps': 'small-caps'
|
|
41
|
+
};
|
|
42
|
+
const verticalAlignMap = {
|
|
43
|
+
'top': 'flex-start',
|
|
44
|
+
'middle': 'center',
|
|
45
|
+
'bottom': 'flex-end'
|
|
46
|
+
};
|
|
47
|
+
function updateStyle(textDom, text, textScale) {
|
|
48
|
+
const { style } = textDom;
|
|
49
|
+
const { fill, padding, textWrap, textOverflow, textDecoration } = text;
|
|
50
|
+
style.fontFamily = text.fontFamily;
|
|
51
|
+
style.fontSize = text.fontSize * textScale + 'px';
|
|
52
|
+
setFill(style, fill);
|
|
53
|
+
style.fontStyle = text.italic ? 'italic' : 'normal';
|
|
54
|
+
style.fontWeight = text.fontWeight;
|
|
55
|
+
style.textDecoration = textDecoration === 'delete' ? 'line-through' : textDecoration;
|
|
56
|
+
style.textTransform = textCaseMap[text.textCase];
|
|
57
|
+
style.textAlign = text.textAlign;
|
|
58
|
+
style.display = 'flex';
|
|
59
|
+
style.flexDirection = 'column';
|
|
60
|
+
style.justifyContent = verticalAlignMap[text.verticalAlign];
|
|
61
|
+
style.lineHeight = (text.__.__lineHeight || 0) * textScale + 'px';
|
|
62
|
+
style.letterSpacing = (text.__.__letterSpacing || 0) * textScale + 'px';
|
|
63
|
+
if (textWrap === 'none') {
|
|
64
|
+
style.whiteSpace = 'nowrap';
|
|
65
|
+
}
|
|
66
|
+
else if (textWrap === 'break') {
|
|
67
|
+
style.wordBreak = 'break-all';
|
|
68
|
+
}
|
|
69
|
+
style.textIndent = (text.paraIndent || 0) * textScale + 'px';
|
|
70
|
+
style.padding = padding instanceof Array ? padding.map(item => item * textScale + 'px').join(' ') : (padding || 0) * textScale + 'px';
|
|
71
|
+
style.textOverflow = textOverflow === 'show' ? '' : (textOverflow === 'hide' ? 'clip' : textOverflow);
|
|
72
|
+
}
|
|
73
|
+
function setFill(style, fill) {
|
|
74
|
+
let color = 'black';
|
|
75
|
+
if (fill instanceof Array)
|
|
76
|
+
fill = fill[0];
|
|
77
|
+
if (typeof fill === 'object') {
|
|
78
|
+
switch (fill.type) {
|
|
79
|
+
case 'solid':
|
|
80
|
+
color = core.ColorConvert.string(fill.color);
|
|
81
|
+
break;
|
|
82
|
+
case 'image':
|
|
83
|
+
break;
|
|
84
|
+
case 'linear':
|
|
85
|
+
case 'radial':
|
|
86
|
+
case 'angular':
|
|
87
|
+
const stop = fill.stops[0];
|
|
88
|
+
color = core.ColorConvert.string(typeof stop === 'string' ? stop : stop.color);
|
|
89
|
+
break;
|
|
90
|
+
default:
|
|
91
|
+
if (fill.r !== undefined)
|
|
92
|
+
color = core.ColorConvert.string(fill);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
color = fill;
|
|
97
|
+
}
|
|
98
|
+
style.color = color;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
exports.TextEditor = class TextEditor extends editor.InnerEditor {
|
|
102
|
+
constructor() {
|
|
103
|
+
super(...arguments);
|
|
104
|
+
this.config = {
|
|
105
|
+
selectAll: true
|
|
106
|
+
};
|
|
107
|
+
this.eventIds = [];
|
|
108
|
+
}
|
|
109
|
+
get tag() { return 'TextEditor'; }
|
|
110
|
+
onLoad() {
|
|
111
|
+
const { editor } = this;
|
|
112
|
+
const { config } = editor.app;
|
|
113
|
+
this._keyEvent = config.keyEvent;
|
|
114
|
+
config.keyEvent = false;
|
|
115
|
+
const text = this.editTarget;
|
|
116
|
+
text.visible = false;
|
|
117
|
+
const div = this.editDom = document.createElement('div');
|
|
118
|
+
const { style } = div;
|
|
119
|
+
div.contentEditable = 'true';
|
|
120
|
+
div.innerText = text.text;
|
|
121
|
+
style.position = 'fixed';
|
|
122
|
+
style.transformOrigin = 'left top';
|
|
123
|
+
style.boxSizing = 'border-box';
|
|
124
|
+
const { scaleX, scaleY } = text.worldTransform;
|
|
125
|
+
this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
126
|
+
const fontSize = text.fontSize * this.textScale;
|
|
127
|
+
if (fontSize < 12)
|
|
128
|
+
this.textScale *= 12 / fontSize;
|
|
129
|
+
editor.app.view.appendChild(div);
|
|
130
|
+
this.eventIds = [
|
|
131
|
+
editor.app.on_(core.PointerEvent.DOWN, (e) => { if (e.origin.target !== div)
|
|
132
|
+
editor.closeInnerEditor(); })
|
|
133
|
+
];
|
|
134
|
+
this.onFocus = this.onFocus.bind(this);
|
|
135
|
+
this.onInput = this.onInput.bind(this);
|
|
136
|
+
this.onUpdate = this.onUpdate.bind(this);
|
|
137
|
+
this.onEscape = this.onEscape.bind(this);
|
|
138
|
+
div.addEventListener("focus", this.onFocus);
|
|
139
|
+
div.addEventListener("input", this.onInput);
|
|
140
|
+
window.addEventListener('keydown', this.onEscape);
|
|
141
|
+
window.addEventListener('scroll', this.onUpdate);
|
|
142
|
+
const selection = window.getSelection();
|
|
143
|
+
const range = document.createRange();
|
|
144
|
+
if (this.config.selectAll) {
|
|
145
|
+
range.selectNodeContents(div);
|
|
146
|
+
}
|
|
147
|
+
else {
|
|
148
|
+
const node = div.childNodes[0];
|
|
149
|
+
range.setStartAfter(node);
|
|
150
|
+
range.setEndAfter(node);
|
|
151
|
+
range.collapse(true);
|
|
152
|
+
}
|
|
153
|
+
selection.removeAllRanges();
|
|
154
|
+
selection.addRange(range);
|
|
155
|
+
}
|
|
156
|
+
onInput() {
|
|
157
|
+
this.editTarget.text = this.editDom.innerText.replace(/\n\n/, '\n');
|
|
158
|
+
}
|
|
159
|
+
onFocus() {
|
|
160
|
+
this.editDom.style.outline = 'none';
|
|
161
|
+
}
|
|
162
|
+
onEscape(e) {
|
|
163
|
+
if (e.code === 'Escape')
|
|
164
|
+
this.editor.closeInnerEditor();
|
|
165
|
+
}
|
|
166
|
+
onUpdate() {
|
|
167
|
+
const { editTarget: text, textScale } = this;
|
|
168
|
+
const { style } = this.editDom;
|
|
169
|
+
const { x, y } = text.app.tree.clientBounds;
|
|
170
|
+
const { a, b, c, d, e, f } = new core.Matrix(text.worldTransform).scale(1 / textScale);
|
|
171
|
+
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
|
|
172
|
+
style.left = x - window.scrollX + 'px';
|
|
173
|
+
style.top = y - window.scrollY + 'px';
|
|
174
|
+
style.width = text.width * textScale + (text.__.__autoWidth ? 20 : 0) + 'px';
|
|
175
|
+
style.height = text.height * textScale + (text.__.__autoHeight ? 20 : 0) + 'px';
|
|
176
|
+
updateStyle(this.editDom, text, this.textScale);
|
|
177
|
+
}
|
|
178
|
+
onUnload() {
|
|
179
|
+
const { editTarget: text, editor, editDom: dom } = this;
|
|
180
|
+
if (text) {
|
|
181
|
+
this.onInput();
|
|
182
|
+
text.visible = true;
|
|
183
|
+
editor.app.config.keyEvent = this._keyEvent;
|
|
184
|
+
editor.off_(this.eventIds);
|
|
185
|
+
dom.removeEventListener("focus", this.onFocus);
|
|
186
|
+
dom.removeEventListener("input", this.onInput);
|
|
187
|
+
window.removeEventListener('keydown', this.onEscape);
|
|
188
|
+
window.removeEventListener('scroll', this.onUpdate);
|
|
189
|
+
dom.remove();
|
|
190
|
+
this.editDom = this.eventIds = undefined;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
};
|
|
194
|
+
exports.TextEditor = __decorate([
|
|
195
|
+
editor.registerInnerEditor()
|
|
196
|
+
], exports.TextEditor);
|
package/dist/text-editor.esm.js
CHANGED
|
@@ -1 +1,196 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import { ColorConvert, PointerEvent, Matrix } from '@leafer-ui/core';
|
|
2
|
+
import { registerInnerEditor, InnerEditor } from '@leafer-in/editor';
|
|
3
|
+
|
|
4
|
+
/******************************************************************************
|
|
5
|
+
Copyright (c) Microsoft Corporation.
|
|
6
|
+
|
|
7
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
8
|
+
purpose with or without fee is hereby granted.
|
|
9
|
+
|
|
10
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
11
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
12
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
13
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
14
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
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 */
|
|
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;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const textCaseMap = {
|
|
34
|
+
'none': 'none',
|
|
35
|
+
'title': 'capitalize',
|
|
36
|
+
'upper': 'uppercase',
|
|
37
|
+
'lower': 'lowercase',
|
|
38
|
+
'small-caps': 'small-caps'
|
|
39
|
+
};
|
|
40
|
+
const verticalAlignMap = {
|
|
41
|
+
'top': 'flex-start',
|
|
42
|
+
'middle': 'center',
|
|
43
|
+
'bottom': 'flex-end'
|
|
44
|
+
};
|
|
45
|
+
function updateStyle(textDom, text, textScale) {
|
|
46
|
+
const { style } = textDom;
|
|
47
|
+
const { fill, padding, textWrap, textOverflow, textDecoration } = text;
|
|
48
|
+
style.fontFamily = text.fontFamily;
|
|
49
|
+
style.fontSize = text.fontSize * textScale + 'px';
|
|
50
|
+
setFill(style, fill);
|
|
51
|
+
style.fontStyle = text.italic ? 'italic' : 'normal';
|
|
52
|
+
style.fontWeight = text.fontWeight;
|
|
53
|
+
style.textDecoration = textDecoration === 'delete' ? 'line-through' : textDecoration;
|
|
54
|
+
style.textTransform = textCaseMap[text.textCase];
|
|
55
|
+
style.textAlign = text.textAlign;
|
|
56
|
+
style.display = 'flex';
|
|
57
|
+
style.flexDirection = 'column';
|
|
58
|
+
style.justifyContent = verticalAlignMap[text.verticalAlign];
|
|
59
|
+
style.lineHeight = (text.__.__lineHeight || 0) * textScale + 'px';
|
|
60
|
+
style.letterSpacing = (text.__.__letterSpacing || 0) * textScale + 'px';
|
|
61
|
+
if (textWrap === 'none') {
|
|
62
|
+
style.whiteSpace = 'nowrap';
|
|
63
|
+
}
|
|
64
|
+
else if (textWrap === 'break') {
|
|
65
|
+
style.wordBreak = 'break-all';
|
|
66
|
+
}
|
|
67
|
+
style.textIndent = (text.paraIndent || 0) * textScale + 'px';
|
|
68
|
+
style.padding = padding instanceof Array ? padding.map(item => item * textScale + 'px').join(' ') : (padding || 0) * textScale + 'px';
|
|
69
|
+
style.textOverflow = textOverflow === 'show' ? '' : (textOverflow === 'hide' ? 'clip' : textOverflow);
|
|
70
|
+
}
|
|
71
|
+
function setFill(style, fill) {
|
|
72
|
+
let color = 'black';
|
|
73
|
+
if (fill instanceof Array)
|
|
74
|
+
fill = fill[0];
|
|
75
|
+
if (typeof fill === 'object') {
|
|
76
|
+
switch (fill.type) {
|
|
77
|
+
case 'solid':
|
|
78
|
+
color = ColorConvert.string(fill.color);
|
|
79
|
+
break;
|
|
80
|
+
case 'image':
|
|
81
|
+
break;
|
|
82
|
+
case 'linear':
|
|
83
|
+
case 'radial':
|
|
84
|
+
case 'angular':
|
|
85
|
+
const stop = fill.stops[0];
|
|
86
|
+
color = ColorConvert.string(typeof stop === 'string' ? stop : stop.color);
|
|
87
|
+
break;
|
|
88
|
+
default:
|
|
89
|
+
if (fill.r !== undefined)
|
|
90
|
+
color = ColorConvert.string(fill);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
color = fill;
|
|
95
|
+
}
|
|
96
|
+
style.color = color;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
let TextEditor = class TextEditor extends InnerEditor {
|
|
100
|
+
constructor() {
|
|
101
|
+
super(...arguments);
|
|
102
|
+
this.config = {
|
|
103
|
+
selectAll: true
|
|
104
|
+
};
|
|
105
|
+
this.eventIds = [];
|
|
106
|
+
}
|
|
107
|
+
get tag() { return 'TextEditor'; }
|
|
108
|
+
onLoad() {
|
|
109
|
+
const { editor } = this;
|
|
110
|
+
const { config } = editor.app;
|
|
111
|
+
this._keyEvent = config.keyEvent;
|
|
112
|
+
config.keyEvent = false;
|
|
113
|
+
const text = this.editTarget;
|
|
114
|
+
text.visible = false;
|
|
115
|
+
const div = this.editDom = document.createElement('div');
|
|
116
|
+
const { style } = div;
|
|
117
|
+
div.contentEditable = 'true';
|
|
118
|
+
div.innerText = text.text;
|
|
119
|
+
style.position = 'fixed';
|
|
120
|
+
style.transformOrigin = 'left top';
|
|
121
|
+
style.boxSizing = 'border-box';
|
|
122
|
+
const { scaleX, scaleY } = text.worldTransform;
|
|
123
|
+
this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
124
|
+
const fontSize = text.fontSize * this.textScale;
|
|
125
|
+
if (fontSize < 12)
|
|
126
|
+
this.textScale *= 12 / fontSize;
|
|
127
|
+
editor.app.view.appendChild(div);
|
|
128
|
+
this.eventIds = [
|
|
129
|
+
editor.app.on_(PointerEvent.DOWN, (e) => { if (e.origin.target !== div)
|
|
130
|
+
editor.closeInnerEditor(); })
|
|
131
|
+
];
|
|
132
|
+
this.onFocus = this.onFocus.bind(this);
|
|
133
|
+
this.onInput = this.onInput.bind(this);
|
|
134
|
+
this.onUpdate = this.onUpdate.bind(this);
|
|
135
|
+
this.onEscape = this.onEscape.bind(this);
|
|
136
|
+
div.addEventListener("focus", this.onFocus);
|
|
137
|
+
div.addEventListener("input", this.onInput);
|
|
138
|
+
window.addEventListener('keydown', this.onEscape);
|
|
139
|
+
window.addEventListener('scroll', this.onUpdate);
|
|
140
|
+
const selection = window.getSelection();
|
|
141
|
+
const range = document.createRange();
|
|
142
|
+
if (this.config.selectAll) {
|
|
143
|
+
range.selectNodeContents(div);
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
const node = div.childNodes[0];
|
|
147
|
+
range.setStartAfter(node);
|
|
148
|
+
range.setEndAfter(node);
|
|
149
|
+
range.collapse(true);
|
|
150
|
+
}
|
|
151
|
+
selection.removeAllRanges();
|
|
152
|
+
selection.addRange(range);
|
|
153
|
+
}
|
|
154
|
+
onInput() {
|
|
155
|
+
this.editTarget.text = this.editDom.innerText.replace(/\n\n/, '\n');
|
|
156
|
+
}
|
|
157
|
+
onFocus() {
|
|
158
|
+
this.editDom.style.outline = 'none';
|
|
159
|
+
}
|
|
160
|
+
onEscape(e) {
|
|
161
|
+
if (e.code === 'Escape')
|
|
162
|
+
this.editor.closeInnerEditor();
|
|
163
|
+
}
|
|
164
|
+
onUpdate() {
|
|
165
|
+
const { editTarget: text, textScale } = this;
|
|
166
|
+
const { style } = this.editDom;
|
|
167
|
+
const { x, y } = text.app.tree.clientBounds;
|
|
168
|
+
const { a, b, c, d, e, f } = new Matrix(text.worldTransform).scale(1 / textScale);
|
|
169
|
+
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
|
|
170
|
+
style.left = x - window.scrollX + 'px';
|
|
171
|
+
style.top = y - window.scrollY + 'px';
|
|
172
|
+
style.width = text.width * textScale + (text.__.__autoWidth ? 20 : 0) + 'px';
|
|
173
|
+
style.height = text.height * textScale + (text.__.__autoHeight ? 20 : 0) + 'px';
|
|
174
|
+
updateStyle(this.editDom, text, this.textScale);
|
|
175
|
+
}
|
|
176
|
+
onUnload() {
|
|
177
|
+
const { editTarget: text, editor, editDom: dom } = this;
|
|
178
|
+
if (text) {
|
|
179
|
+
this.onInput();
|
|
180
|
+
text.visible = true;
|
|
181
|
+
editor.app.config.keyEvent = this._keyEvent;
|
|
182
|
+
editor.off_(this.eventIds);
|
|
183
|
+
dom.removeEventListener("focus", this.onFocus);
|
|
184
|
+
dom.removeEventListener("input", this.onInput);
|
|
185
|
+
window.removeEventListener('keydown', this.onEscape);
|
|
186
|
+
window.removeEventListener('scroll', this.onUpdate);
|
|
187
|
+
dom.remove();
|
|
188
|
+
this.editDom = this.eventIds = undefined;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
TextEditor = __decorate([
|
|
193
|
+
registerInnerEditor()
|
|
194
|
+
], TextEditor);
|
|
195
|
+
|
|
196
|
+
export { TextEditor };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{ColorConvert as e,PointerEvent as t,Matrix as n}from"@leafer-ui/core";import{registerInnerEditor as o,InnerEditor as i}from"@leafer-in/editor";"function"==typeof SuppressedError&&SuppressedError;const s={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},r={top:"flex-start",middle:"center",bottom:"flex-end"};function a(t,n,o){const{style:i}=t,{fill:a,padding:l,textWrap:c,textOverflow:d,textDecoration:p}=n;i.fontFamily=n.fontFamily,i.fontSize=n.fontSize*o+"px",function(t,n){let o="black";n instanceof Array&&(n=n[0]);if("object"==typeof n)switch(n.type){case"solid":o=e.string(n.color);break;case"image":break;case"linear":case"radial":case"angular":const t=n.stops[0];o=e.string("string"==typeof t?t:t.color);break;default:void 0!==n.r&&(o=e.string(n))}else o=n;t.color=o}(i,a),i.fontStyle=n.italic?"italic":"normal",i.fontWeight=n.fontWeight,i.textDecoration="delete"===p?"line-through":p,i.textTransform=s[n.textCase],i.textAlign=n.textAlign,i.display="flex",i.flexDirection="column",i.justifyContent=r[n.verticalAlign],i.lineHeight=(n.__.__lineHeight||0)*o+"px",i.letterSpacing=(n.__.__letterSpacing||0)*o+"px","none"===c?i.whiteSpace="nowrap":"break"===c&&(i.wordBreak="break-all"),i.textIndent=(n.paraIndent||0)*o+"px",i.padding=l instanceof Array?l.map((e=>e*o+"px")).join(" "):(l||0)*o+"px",i.textOverflow="show"===d?"":"hide"===d?"clip":d}let l=class extends i{constructor(){super(...arguments),this.config={selectAll:!0},this.eventIds=[]}get tag(){return"TextEditor"}onLoad(){const{editor:e}=this,{config:n}=e.app;this._keyEvent=n.keyEvent,n.keyEvent=!1;const o=this.editTarget;o.visible=!1;const i=this.editDom=document.createElement("div"),{style:s}=i;i.contentEditable="true",i.innerText=o.text,s.position="fixed",s.transformOrigin="left top",s.boxSizing="border-box";const{scaleX:r,scaleY:a}=o.worldTransform;this.textScale=Math.max(Math.abs(r),Math.abs(a));const l=o.fontSize*this.textScale;l<12&&(this.textScale*=12/l),e.app.view.appendChild(i),this.eventIds=[e.app.on_(t.DOWN,(t=>{t.origin.target!==i&&e.closeInnerEditor()}))],this.onFocus=this.onFocus.bind(this),this.onInput=this.onInput.bind(this),this.onUpdate=this.onUpdate.bind(this),this.onEscape=this.onEscape.bind(this),i.addEventListener("focus",this.onFocus),i.addEventListener("input",this.onInput),window.addEventListener("keydown",this.onEscape),window.addEventListener("scroll",this.onUpdate);const c=window.getSelection(),d=document.createRange();if(this.config.selectAll)d.selectNodeContents(i);else{const e=i.childNodes[0];d.setStartAfter(e),d.setEndAfter(e),d.collapse(!0)}c.removeAllRanges(),c.addRange(d)}onInput(){this.editTarget.text=this.editDom.innerText.replace(/\n\n/,"\n")}onFocus(){this.editDom.style.outline="none"}onEscape(e){"Escape"===e.code&&this.editor.closeInnerEditor()}onUpdate(){const{editTarget:e,textScale:t}=this,{style:o}=this.editDom,{x:i,y:s}=e.app.tree.clientBounds,{a:r,b:l,c:c,d:d,e:p,f:h}=new n(e.worldTransform).scale(1/t);o.transform=`matrix(${r},${l},${c},${d},${p},${h})`,o.left=i-window.scrollX+"px",o.top=s-window.scrollY+"px",o.width=e.width*t+(e.__.__autoWidth?20:0)+"px",o.height=e.height*t+(e.__.__autoHeight?20:0)+"px",a(this.editDom,e,this.textScale)}onUnload(){const{editTarget:e,editor:t,editDom:n}=this;e&&(this.onInput(),e.visible=!0,t.app.config.keyEvent=this._keyEvent,t.off_(this.eventIds),n.removeEventListener("focus",this.onFocus),n.removeEventListener("input",this.onInput),window.removeEventListener("keydown",this.onEscape),window.removeEventListener("scroll",this.onUpdate),n.remove(),this.editDom=this.eventIds=void 0)}};l=function(e,t,n,o){var i,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,n,r):i(t,n))||r);return s>3&&r&&Object.defineProperty(t,n,r),r}([o()],l);export{l as TextEditor};
|
package/dist/text-editor.js
CHANGED
|
@@ -1 +1,199 @@
|
|
|
1
|
-
this.LeaferIN
|
|
1
|
+
this.LeaferIN = this.LeaferIN || {};
|
|
2
|
+
this.LeaferIN.textEditor = (function (exports, core, editor) {
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
/******************************************************************************
|
|
6
|
+
Copyright (c) Microsoft Corporation.
|
|
7
|
+
|
|
8
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
9
|
+
purpose with or without fee is hereby granted.
|
|
10
|
+
|
|
11
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
12
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
13
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
14
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
15
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
16
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
17
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
18
|
+
***************************************************************************** */
|
|
19
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
function __decorate(decorators, target, key, desc) {
|
|
23
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
24
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
25
|
+
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;
|
|
26
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
30
|
+
var e = new Error(message);
|
|
31
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const textCaseMap = {
|
|
35
|
+
'none': 'none',
|
|
36
|
+
'title': 'capitalize',
|
|
37
|
+
'upper': 'uppercase',
|
|
38
|
+
'lower': 'lowercase',
|
|
39
|
+
'small-caps': 'small-caps'
|
|
40
|
+
};
|
|
41
|
+
const verticalAlignMap = {
|
|
42
|
+
'top': 'flex-start',
|
|
43
|
+
'middle': 'center',
|
|
44
|
+
'bottom': 'flex-end'
|
|
45
|
+
};
|
|
46
|
+
function updateStyle(textDom, text, textScale) {
|
|
47
|
+
const { style } = textDom;
|
|
48
|
+
const { fill, padding, textWrap, textOverflow, textDecoration } = text;
|
|
49
|
+
style.fontFamily = text.fontFamily;
|
|
50
|
+
style.fontSize = text.fontSize * textScale + 'px';
|
|
51
|
+
setFill(style, fill);
|
|
52
|
+
style.fontStyle = text.italic ? 'italic' : 'normal';
|
|
53
|
+
style.fontWeight = text.fontWeight;
|
|
54
|
+
style.textDecoration = textDecoration === 'delete' ? 'line-through' : textDecoration;
|
|
55
|
+
style.textTransform = textCaseMap[text.textCase];
|
|
56
|
+
style.textAlign = text.textAlign;
|
|
57
|
+
style.display = 'flex';
|
|
58
|
+
style.flexDirection = 'column';
|
|
59
|
+
style.justifyContent = verticalAlignMap[text.verticalAlign];
|
|
60
|
+
style.lineHeight = (text.__.__lineHeight || 0) * textScale + 'px';
|
|
61
|
+
style.letterSpacing = (text.__.__letterSpacing || 0) * textScale + 'px';
|
|
62
|
+
if (textWrap === 'none') {
|
|
63
|
+
style.whiteSpace = 'nowrap';
|
|
64
|
+
}
|
|
65
|
+
else if (textWrap === 'break') {
|
|
66
|
+
style.wordBreak = 'break-all';
|
|
67
|
+
}
|
|
68
|
+
style.textIndent = (text.paraIndent || 0) * textScale + 'px';
|
|
69
|
+
style.padding = padding instanceof Array ? padding.map(item => item * textScale + 'px').join(' ') : (padding || 0) * textScale + 'px';
|
|
70
|
+
style.textOverflow = textOverflow === 'show' ? '' : (textOverflow === 'hide' ? 'clip' : textOverflow);
|
|
71
|
+
}
|
|
72
|
+
function setFill(style, fill) {
|
|
73
|
+
let color = 'black';
|
|
74
|
+
if (fill instanceof Array)
|
|
75
|
+
fill = fill[0];
|
|
76
|
+
if (typeof fill === 'object') {
|
|
77
|
+
switch (fill.type) {
|
|
78
|
+
case 'solid':
|
|
79
|
+
color = core.ColorConvert.string(fill.color);
|
|
80
|
+
break;
|
|
81
|
+
case 'image':
|
|
82
|
+
break;
|
|
83
|
+
case 'linear':
|
|
84
|
+
case 'radial':
|
|
85
|
+
case 'angular':
|
|
86
|
+
const stop = fill.stops[0];
|
|
87
|
+
color = core.ColorConvert.string(typeof stop === 'string' ? stop : stop.color);
|
|
88
|
+
break;
|
|
89
|
+
default:
|
|
90
|
+
if (fill.r !== undefined)
|
|
91
|
+
color = core.ColorConvert.string(fill);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
else {
|
|
95
|
+
color = fill;
|
|
96
|
+
}
|
|
97
|
+
style.color = color;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
exports.TextEditor = class TextEditor extends editor.InnerEditor {
|
|
101
|
+
constructor() {
|
|
102
|
+
super(...arguments);
|
|
103
|
+
this.config = {
|
|
104
|
+
selectAll: true
|
|
105
|
+
};
|
|
106
|
+
this.eventIds = [];
|
|
107
|
+
}
|
|
108
|
+
get tag() { return 'TextEditor'; }
|
|
109
|
+
onLoad() {
|
|
110
|
+
const { editor } = this;
|
|
111
|
+
const { config } = editor.app;
|
|
112
|
+
this._keyEvent = config.keyEvent;
|
|
113
|
+
config.keyEvent = false;
|
|
114
|
+
const text = this.editTarget;
|
|
115
|
+
text.visible = false;
|
|
116
|
+
const div = this.editDom = document.createElement('div');
|
|
117
|
+
const { style } = div;
|
|
118
|
+
div.contentEditable = 'true';
|
|
119
|
+
div.innerText = text.text;
|
|
120
|
+
style.position = 'fixed';
|
|
121
|
+
style.transformOrigin = 'left top';
|
|
122
|
+
style.boxSizing = 'border-box';
|
|
123
|
+
const { scaleX, scaleY } = text.worldTransform;
|
|
124
|
+
this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
125
|
+
const fontSize = text.fontSize * this.textScale;
|
|
126
|
+
if (fontSize < 12)
|
|
127
|
+
this.textScale *= 12 / fontSize;
|
|
128
|
+
editor.app.view.appendChild(div);
|
|
129
|
+
this.eventIds = [
|
|
130
|
+
editor.app.on_(core.PointerEvent.DOWN, (e) => { if (e.origin.target !== div)
|
|
131
|
+
editor.closeInnerEditor(); })
|
|
132
|
+
];
|
|
133
|
+
this.onFocus = this.onFocus.bind(this);
|
|
134
|
+
this.onInput = this.onInput.bind(this);
|
|
135
|
+
this.onUpdate = this.onUpdate.bind(this);
|
|
136
|
+
this.onEscape = this.onEscape.bind(this);
|
|
137
|
+
div.addEventListener("focus", this.onFocus);
|
|
138
|
+
div.addEventListener("input", this.onInput);
|
|
139
|
+
window.addEventListener('keydown', this.onEscape);
|
|
140
|
+
window.addEventListener('scroll', this.onUpdate);
|
|
141
|
+
const selection = window.getSelection();
|
|
142
|
+
const range = document.createRange();
|
|
143
|
+
if (this.config.selectAll) {
|
|
144
|
+
range.selectNodeContents(div);
|
|
145
|
+
}
|
|
146
|
+
else {
|
|
147
|
+
const node = div.childNodes[0];
|
|
148
|
+
range.setStartAfter(node);
|
|
149
|
+
range.setEndAfter(node);
|
|
150
|
+
range.collapse(true);
|
|
151
|
+
}
|
|
152
|
+
selection.removeAllRanges();
|
|
153
|
+
selection.addRange(range);
|
|
154
|
+
}
|
|
155
|
+
onInput() {
|
|
156
|
+
this.editTarget.text = this.editDom.innerText.replace(/\n\n/, '\n');
|
|
157
|
+
}
|
|
158
|
+
onFocus() {
|
|
159
|
+
this.editDom.style.outline = 'none';
|
|
160
|
+
}
|
|
161
|
+
onEscape(e) {
|
|
162
|
+
if (e.code === 'Escape')
|
|
163
|
+
this.editor.closeInnerEditor();
|
|
164
|
+
}
|
|
165
|
+
onUpdate() {
|
|
166
|
+
const { editTarget: text, textScale } = this;
|
|
167
|
+
const { style } = this.editDom;
|
|
168
|
+
const { x, y } = text.app.tree.clientBounds;
|
|
169
|
+
const { a, b, c, d, e, f } = new core.Matrix(text.worldTransform).scale(1 / textScale);
|
|
170
|
+
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
|
|
171
|
+
style.left = x - window.scrollX + 'px';
|
|
172
|
+
style.top = y - window.scrollY + 'px';
|
|
173
|
+
style.width = text.width * textScale + (text.__.__autoWidth ? 20 : 0) + 'px';
|
|
174
|
+
style.height = text.height * textScale + (text.__.__autoHeight ? 20 : 0) + 'px';
|
|
175
|
+
updateStyle(this.editDom, text, this.textScale);
|
|
176
|
+
}
|
|
177
|
+
onUnload() {
|
|
178
|
+
const { editTarget: text, editor, editDom: dom } = this;
|
|
179
|
+
if (text) {
|
|
180
|
+
this.onInput();
|
|
181
|
+
text.visible = true;
|
|
182
|
+
editor.app.config.keyEvent = this._keyEvent;
|
|
183
|
+
editor.off_(this.eventIds);
|
|
184
|
+
dom.removeEventListener("focus", this.onFocus);
|
|
185
|
+
dom.removeEventListener("input", this.onInput);
|
|
186
|
+
window.removeEventListener('keydown', this.onEscape);
|
|
187
|
+
window.removeEventListener('scroll', this.onUpdate);
|
|
188
|
+
dom.remove();
|
|
189
|
+
this.editDom = this.eventIds = undefined;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
};
|
|
193
|
+
exports.TextEditor = __decorate([
|
|
194
|
+
editor.registerInnerEditor()
|
|
195
|
+
], exports.TextEditor);
|
|
196
|
+
|
|
197
|
+
return exports;
|
|
198
|
+
|
|
199
|
+
})({}, LeaferUI, LeaferIN.editor);
|
package/dist/text-editor.min.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@leafer-ui/core"),t=require("@leafer-in/editor");"function"==typeof SuppressedError&&SuppressedError;const n={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},o={top:"flex-start",middle:"center",bottom:"flex-end"}
|
|
1
|
+
"use strict";var e=require("@leafer-ui/core"),t=require("@leafer-in/editor");"function"==typeof SuppressedError&&SuppressedError;const n={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},o={top:"flex-start",middle:"center",bottom:"flex-end"};function i(t,i,s){const{style:r}=t,{fill:a,padding:l,textWrap:c,textOverflow:d,textDecoration:p}=i;r.fontFamily=i.fontFamily,r.fontSize=i.fontSize*s+"px",function(t,n){let o="black";n instanceof Array&&(n=n[0]);if("object"==typeof n)switch(n.type){case"solid":o=e.ColorConvert.string(n.color);break;case"image":break;case"linear":case"radial":case"angular":const t=n.stops[0];o=e.ColorConvert.string("string"==typeof t?t:t.color);break;default:void 0!==n.r&&(o=e.ColorConvert.string(n))}else o=n;t.color=o}(r,a),r.fontStyle=i.italic?"italic":"normal",r.fontWeight=i.fontWeight,r.textDecoration="delete"===p?"line-through":p,r.textTransform=n[i.textCase],r.textAlign=i.textAlign,r.display="flex",r.flexDirection="column",r.justifyContent=o[i.verticalAlign],r.lineHeight=(i.__.__lineHeight||0)*s+"px",r.letterSpacing=(i.__.__letterSpacing||0)*s+"px","none"===c?r.whiteSpace="nowrap":"break"===c&&(r.wordBreak="break-all"),r.textIndent=(i.paraIndent||0)*s+"px",r.padding=l instanceof Array?l.map((e=>e*s+"px")).join(" "):(l||0)*s+"px",r.textOverflow="show"===d?"":"hide"===d?"clip":d}exports.TextEditor=class extends t.InnerEditor{constructor(){super(...arguments),this.config={selectAll:!0},this.eventIds=[]}get tag(){return"TextEditor"}onLoad(){const{editor:t}=this,{config:n}=t.app;this._keyEvent=n.keyEvent,n.keyEvent=!1;const o=this.editTarget;o.visible=!1;const i=this.editDom=document.createElement("div"),{style:s}=i;i.contentEditable="true",i.innerText=o.text,s.position="fixed",s.transformOrigin="left top",s.boxSizing="border-box";const{scaleX:r,scaleY:a}=o.worldTransform;this.textScale=Math.max(Math.abs(r),Math.abs(a));const l=o.fontSize*this.textScale;l<12&&(this.textScale*=12/l),t.app.view.appendChild(i),this.eventIds=[t.app.on_(e.PointerEvent.DOWN,(e=>{e.origin.target!==i&&t.closeInnerEditor()}))],this.onFocus=this.onFocus.bind(this),this.onInput=this.onInput.bind(this),this.onUpdate=this.onUpdate.bind(this),this.onEscape=this.onEscape.bind(this),i.addEventListener("focus",this.onFocus),i.addEventListener("input",this.onInput),window.addEventListener("keydown",this.onEscape),window.addEventListener("scroll",this.onUpdate);const c=window.getSelection(),d=document.createRange();if(this.config.selectAll)d.selectNodeContents(i);else{const e=i.childNodes[0];d.setStartAfter(e),d.setEndAfter(e),d.collapse(!0)}c.removeAllRanges(),c.addRange(d)}onInput(){this.editTarget.text=this.editDom.innerText.replace(/\n\n/,"\n")}onFocus(){this.editDom.style.outline="none"}onEscape(e){"Escape"===e.code&&this.editor.closeInnerEditor()}onUpdate(){const{editTarget:t,textScale:n}=this,{style:o}=this.editDom,{x:s,y:r}=t.app.tree.clientBounds,{a:a,b:l,c:c,d:d,e:p,f:h}=new e.Matrix(t.worldTransform).scale(1/n);o.transform=`matrix(${a},${l},${c},${d},${p},${h})`,o.left=s-window.scrollX+"px",o.top=r-window.scrollY+"px",o.width=t.width*n+(t.__.__autoWidth?20:0)+"px",o.height=t.height*n+(t.__.__autoHeight?20:0)+"px",i(this.editDom,t,this.textScale)}onUnload(){const{editTarget:e,editor:t,editDom:n}=this;e&&(this.onInput(),e.visible=!0,t.app.config.keyEvent=this._keyEvent,t.off_(this.eventIds),n.removeEventListener("focus",this.onFocus),n.removeEventListener("input",this.onInput),window.removeEventListener("keydown",this.onEscape),window.removeEventListener("scroll",this.onUpdate),n.remove(),this.editDom=this.eventIds=void 0)}},exports.TextEditor=function(e,t,n,o){var i,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,n,r):i(t,n))||r);return s>3&&r&&Object.defineProperty(t,n,r),r}([t.registerInnerEditor()],exports.TextEditor);
|
package/dist/text-editor.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.textEditor=function(e,t,n){"use strict";"function"==typeof SuppressedError&&SuppressedError;const o={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},i={top:"flex-start",middle:"center",bottom:"flex-end"}
|
|
1
|
+
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.textEditor=function(e,t,n){"use strict";"function"==typeof SuppressedError&&SuppressedError;const o={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},i={top:"flex-start",middle:"center",bottom:"flex-end"};function s(e,n,s){const{style:r}=e,{fill:a,padding:l,textWrap:c,textOverflow:d,textDecoration:p}=n;r.fontFamily=n.fontFamily,r.fontSize=n.fontSize*s+"px",function(e,n){let o="black";n instanceof Array&&(n=n[0]);if("object"==typeof n)switch(n.type){case"solid":o=t.ColorConvert.string(n.color);break;case"image":break;case"linear":case"radial":case"angular":const e=n.stops[0];o=t.ColorConvert.string("string"==typeof e?e:e.color);break;default:void 0!==n.r&&(o=t.ColorConvert.string(n))}else o=n;e.color=o}(r,a),r.fontStyle=n.italic?"italic":"normal",r.fontWeight=n.fontWeight,r.textDecoration="delete"===p?"line-through":p,r.textTransform=o[n.textCase],r.textAlign=n.textAlign,r.display="flex",r.flexDirection="column",r.justifyContent=i[n.verticalAlign],r.lineHeight=(n.__.__lineHeight||0)*s+"px",r.letterSpacing=(n.__.__letterSpacing||0)*s+"px","none"===c?r.whiteSpace="nowrap":"break"===c&&(r.wordBreak="break-all"),r.textIndent=(n.paraIndent||0)*s+"px",r.padding=l instanceof Array?l.map((e=>e*s+"px")).join(" "):(l||0)*s+"px",r.textOverflow="show"===d?"":"hide"===d?"clip":d}return e.TextEditor=class extends n.InnerEditor{constructor(){super(...arguments),this.config={selectAll:!0},this.eventIds=[]}get tag(){return"TextEditor"}onLoad(){const{editor:e}=this,{config:n}=e.app;this._keyEvent=n.keyEvent,n.keyEvent=!1;const o=this.editTarget;o.visible=!1;const i=this.editDom=document.createElement("div"),{style:s}=i;i.contentEditable="true",i.innerText=o.text,s.position="fixed",s.transformOrigin="left top",s.boxSizing="border-box";const{scaleX:r,scaleY:a}=o.worldTransform;this.textScale=Math.max(Math.abs(r),Math.abs(a));const l=o.fontSize*this.textScale;l<12&&(this.textScale*=12/l),e.app.view.appendChild(i),this.eventIds=[e.app.on_(t.PointerEvent.DOWN,(t=>{t.origin.target!==i&&e.closeInnerEditor()}))],this.onFocus=this.onFocus.bind(this),this.onInput=this.onInput.bind(this),this.onUpdate=this.onUpdate.bind(this),this.onEscape=this.onEscape.bind(this),i.addEventListener("focus",this.onFocus),i.addEventListener("input",this.onInput),window.addEventListener("keydown",this.onEscape),window.addEventListener("scroll",this.onUpdate);const c=window.getSelection(),d=document.createRange();if(this.config.selectAll)d.selectNodeContents(i);else{const e=i.childNodes[0];d.setStartAfter(e),d.setEndAfter(e),d.collapse(!0)}c.removeAllRanges(),c.addRange(d)}onInput(){this.editTarget.text=this.editDom.innerText.replace(/\n\n/,"\n")}onFocus(){this.editDom.style.outline="none"}onEscape(e){"Escape"===e.code&&this.editor.closeInnerEditor()}onUpdate(){const{editTarget:e,textScale:n}=this,{style:o}=this.editDom,{x:i,y:r}=e.app.tree.clientBounds,{a:a,b:l,c:c,d:d,e:p,f:h}=new t.Matrix(e.worldTransform).scale(1/n);o.transform=`matrix(${a},${l},${c},${d},${p},${h})`,o.left=i-window.scrollX+"px",o.top=r-window.scrollY+"px",o.width=e.width*n+(e.__.__autoWidth?20:0)+"px",o.height=e.height*n+(e.__.__autoHeight?20:0)+"px",s(this.editDom,e,this.textScale)}onUnload(){const{editTarget:e,editor:t,editDom:n}=this;e&&(this.onInput(),e.visible=!0,t.app.config.keyEvent=this._keyEvent,t.off_(this.eventIds),n.removeEventListener("focus",this.onFocus),n.removeEventListener("input",this.onInput),window.removeEventListener("keydown",this.onEscape),window.removeEventListener("scroll",this.onUpdate),n.remove(),this.editDom=this.eventIds=void 0)}},e.TextEditor=function(e,t,n,o){var i,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,n,r):i(t,n))||r);return s>3&&r&&Object.defineProperty(t,n,r),r}([n.registerInnerEditor()],e.TextEditor),e}({},LeaferUI,LeaferIN.editor);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafer-in/text-editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "@leafer-in/text-editor",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"leaferjs"
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@leafer-ui/core": "1.0.
|
|
31
|
-
"@leafer-in/editor": "1.0.
|
|
32
|
-
"@leafer-ui/interface": "1.0.
|
|
33
|
-
"@leafer-in/interface": "1.0.
|
|
30
|
+
"@leafer-ui/core": "1.0.1",
|
|
31
|
+
"@leafer-in/editor": "1.0.1",
|
|
32
|
+
"@leafer-ui/interface": "1.0.1",
|
|
33
|
+
"@leafer-in/interface": "1.0.1"
|
|
34
34
|
}
|
|
35
35
|
}
|