@leafer-in/text-editor 1.0.4 → 1.0.6
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 +39 -20
- package/dist/text-editor.esm.js +39 -20
- package/dist/text-editor.esm.min.js +1 -1
- package/dist/text-editor.js +39 -20
- package/dist/text-editor.min.cjs +1 -1
- package/dist/text-editor.min.js +1 -1
- package/package.json +8 -8
- package/src/TextEditor.ts +46 -24
package/dist/text-editor.cjs
CHANGED
|
@@ -121,18 +121,7 @@ exports.TextEditor = class TextEditor extends editor.InnerEditor {
|
|
|
121
121
|
style.position = 'fixed';
|
|
122
122
|
style.transformOrigin = 'left top';
|
|
123
123
|
style.boxSizing = 'border-box';
|
|
124
|
-
|
|
125
|
-
div.innerHTML = text.text;
|
|
126
|
-
this.textScale = 1;
|
|
127
|
-
}
|
|
128
|
-
else {
|
|
129
|
-
div.innerText = text.text;
|
|
130
|
-
const { scaleX, scaleY } = text.worldTransform;
|
|
131
|
-
this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
132
|
-
const fontSize = text.fontSize * this.textScale;
|
|
133
|
-
if (fontSize < 12)
|
|
134
|
-
this.textScale *= 12 / fontSize;
|
|
135
|
-
}
|
|
124
|
+
this.isHTMLText ? div.innerHTML = text.text : div.innerText = text.text;
|
|
136
125
|
const { view } = editor.app;
|
|
137
126
|
(this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : view.appendChild(div);
|
|
138
127
|
this.eventIds = [
|
|
@@ -181,16 +170,46 @@ exports.TextEditor = class TextEditor extends editor.InnerEditor {
|
|
|
181
170
|
this.editor.closeInnerEditor();
|
|
182
171
|
}
|
|
183
172
|
onUpdate() {
|
|
184
|
-
const { editTarget: text
|
|
185
|
-
|
|
186
|
-
|
|
173
|
+
const { editTarget: text } = this;
|
|
174
|
+
let textScale = 1;
|
|
175
|
+
if (!this.isHTMLText) {
|
|
176
|
+
const { scaleX, scaleY } = text.worldTransform;
|
|
177
|
+
textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
178
|
+
const fontSize = text.fontSize * textScale;
|
|
179
|
+
if (fontSize < 12)
|
|
180
|
+
textScale *= 12 / text.fontSize;
|
|
181
|
+
}
|
|
182
|
+
this.textScale = textScale;
|
|
187
183
|
const { a, b, c, d, e, f } = new core.Matrix(text.worldTransform).scale(1 / textScale);
|
|
184
|
+
let { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
|
|
185
|
+
let { width, height } = text;
|
|
186
|
+
x -= window.scrollX, y -= window.scrollY, width *= textScale, height *= textScale;
|
|
187
|
+
const data = text.__;
|
|
188
|
+
if (data.__autoWidth && data.autoSizeAlign) {
|
|
189
|
+
width += 20;
|
|
190
|
+
switch (data.textAlign) {
|
|
191
|
+
case 'center':
|
|
192
|
+
x -= width / 2;
|
|
193
|
+
break;
|
|
194
|
+
case 'right': x -= width;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
if (data.__autoHeight && data.autoSizeAlign) {
|
|
198
|
+
height += 20;
|
|
199
|
+
switch (data.verticalAlign) {
|
|
200
|
+
case 'middle':
|
|
201
|
+
y -= height / 2;
|
|
202
|
+
break;
|
|
203
|
+
case 'bottom': y -= height;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
const { style } = this.editDom;
|
|
188
207
|
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
|
|
189
|
-
style.left = x
|
|
190
|
-
style.top = y
|
|
191
|
-
style.width =
|
|
192
|
-
style.height =
|
|
193
|
-
this.isHTMLText || updateStyle(this.editDom, text,
|
|
208
|
+
style.left = x + 'px';
|
|
209
|
+
style.top = y + 'px';
|
|
210
|
+
style.width = width + 'px';
|
|
211
|
+
style.height = height + 'px';
|
|
212
|
+
this.isHTMLText || updateStyle(this.editDom, text, textScale);
|
|
194
213
|
}
|
|
195
214
|
onUnload() {
|
|
196
215
|
const { editTarget: text, editor, editDom: dom } = this;
|
package/dist/text-editor.esm.js
CHANGED
|
@@ -119,18 +119,7 @@ let TextEditor = class TextEditor extends InnerEditor {
|
|
|
119
119
|
style.position = 'fixed';
|
|
120
120
|
style.transformOrigin = 'left top';
|
|
121
121
|
style.boxSizing = 'border-box';
|
|
122
|
-
|
|
123
|
-
div.innerHTML = text.text;
|
|
124
|
-
this.textScale = 1;
|
|
125
|
-
}
|
|
126
|
-
else {
|
|
127
|
-
div.innerText = text.text;
|
|
128
|
-
const { scaleX, scaleY } = text.worldTransform;
|
|
129
|
-
this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
130
|
-
const fontSize = text.fontSize * this.textScale;
|
|
131
|
-
if (fontSize < 12)
|
|
132
|
-
this.textScale *= 12 / fontSize;
|
|
133
|
-
}
|
|
122
|
+
this.isHTMLText ? div.innerHTML = text.text : div.innerText = text.text;
|
|
134
123
|
const { view } = editor.app;
|
|
135
124
|
(this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : view.appendChild(div);
|
|
136
125
|
this.eventIds = [
|
|
@@ -179,16 +168,46 @@ let TextEditor = class TextEditor extends InnerEditor {
|
|
|
179
168
|
this.editor.closeInnerEditor();
|
|
180
169
|
}
|
|
181
170
|
onUpdate() {
|
|
182
|
-
const { editTarget: text
|
|
183
|
-
|
|
184
|
-
|
|
171
|
+
const { editTarget: text } = this;
|
|
172
|
+
let textScale = 1;
|
|
173
|
+
if (!this.isHTMLText) {
|
|
174
|
+
const { scaleX, scaleY } = text.worldTransform;
|
|
175
|
+
textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
176
|
+
const fontSize = text.fontSize * textScale;
|
|
177
|
+
if (fontSize < 12)
|
|
178
|
+
textScale *= 12 / text.fontSize;
|
|
179
|
+
}
|
|
180
|
+
this.textScale = textScale;
|
|
185
181
|
const { a, b, c, d, e, f } = new Matrix(text.worldTransform).scale(1 / textScale);
|
|
182
|
+
let { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
|
|
183
|
+
let { width, height } = text;
|
|
184
|
+
x -= window.scrollX, y -= window.scrollY, width *= textScale, height *= textScale;
|
|
185
|
+
const data = text.__;
|
|
186
|
+
if (data.__autoWidth && data.autoSizeAlign) {
|
|
187
|
+
width += 20;
|
|
188
|
+
switch (data.textAlign) {
|
|
189
|
+
case 'center':
|
|
190
|
+
x -= width / 2;
|
|
191
|
+
break;
|
|
192
|
+
case 'right': x -= width;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
if (data.__autoHeight && data.autoSizeAlign) {
|
|
196
|
+
height += 20;
|
|
197
|
+
switch (data.verticalAlign) {
|
|
198
|
+
case 'middle':
|
|
199
|
+
y -= height / 2;
|
|
200
|
+
break;
|
|
201
|
+
case 'bottom': y -= height;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
const { style } = this.editDom;
|
|
186
205
|
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
|
|
187
|
-
style.left = x
|
|
188
|
-
style.top = y
|
|
189
|
-
style.width =
|
|
190
|
-
style.height =
|
|
191
|
-
this.isHTMLText || updateStyle(this.editDom, text,
|
|
206
|
+
style.left = x + 'px';
|
|
207
|
+
style.top = y + 'px';
|
|
208
|
+
style.width = width + 'px';
|
|
209
|
+
style.height = height + 'px';
|
|
210
|
+
this.isHTMLText || updateStyle(this.editDom, text, textScale);
|
|
192
211
|
}
|
|
193
212
|
onUnload() {
|
|
194
213
|
const { editTarget: text, editor, editDom: dom } = this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ColorConvert as e,Text as t,PointerEvent as n,Matrix as i}from"@leafer-ui/core";import{registerInnerEditor as o,InnerEditor as s}from"@leafer-in/editor";"function"==typeof SuppressedError&&SuppressedError;const r={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},a={top:"flex-start",middle:"center",bottom:"flex-end"};function l(t,n,i){const{style:o}=t,{fill:s,padding:l,textWrap:c,textOverflow:d,textDecoration:p}=n;o.fontFamily=n.fontFamily,o.fontSize=n.fontSize*i+"px",function(t,n){let i="black";n instanceof Array&&(n=n[0]);if("object"==typeof n)switch(n.type){case"solid":i=e.string(n.color);break;case"image":break;case"linear":case"radial":case"angular":const t=n.stops[0];i=e.string("string"==typeof t?t:t.color);break;default:void 0!==n.r&&(i=e.string(n))}else i=n;t.color=i}(o,s),o.fontStyle=n.italic?"italic":"normal",o.fontWeight=n.fontWeight,o.textDecoration="delete"===p?"line-through":p,o.textTransform=r[n.textCase],o.textAlign=n.textAlign,o.display="flex",o.flexDirection="column",o.justifyContent=a[n.verticalAlign],o.lineHeight=(n.__.__lineHeight||0)*i+"px",o.letterSpacing=(n.__.__letterSpacing||0)*i+"px","none"===c?o.whiteSpace="nowrap":"break"===c&&(o.wordBreak="break-all"),o.textIndent=(n.paraIndent||0)*i+"px",o.padding=l instanceof Array?l.map((e=>e*i+"px")).join(" "):(l||0)*i+"px",o.textOverflow="show"===d?"":"hide"===d?"clip":d}let c=class extends s{constructor(){super(...arguments),this.config={selectAll:!0},this.eventIds=[]}get tag(){return"TextEditor"}onLoad(){const{editor:e}=this,{config:i}=e.app,o=this.editTarget;o.visible=!1,this.isHTMLText=!(o instanceof t),this._keyEvent=i.keyEvent,i.keyEvent=!1;const s=this.editDom=document.createElement("div"),{style:r}=s;
|
|
1
|
+
import{ColorConvert as e,Text as t,PointerEvent as n,Matrix as i}from"@leafer-ui/core";import{registerInnerEditor as o,InnerEditor as s}from"@leafer-in/editor";"function"==typeof SuppressedError&&SuppressedError;const r={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},a={top:"flex-start",middle:"center",bottom:"flex-end"};function l(t,n,i){const{style:o}=t,{fill:s,padding:l,textWrap:c,textOverflow:d,textDecoration:p}=n;o.fontFamily=n.fontFamily,o.fontSize=n.fontSize*i+"px",function(t,n){let i="black";n instanceof Array&&(n=n[0]);if("object"==typeof n)switch(n.type){case"solid":i=e.string(n.color);break;case"image":break;case"linear":case"radial":case"angular":const t=n.stops[0];i=e.string("string"==typeof t?t:t.color);break;default:void 0!==n.r&&(i=e.string(n))}else i=n;t.color=i}(o,s),o.fontStyle=n.italic?"italic":"normal",o.fontWeight=n.fontWeight,o.textDecoration="delete"===p?"line-through":p,o.textTransform=r[n.textCase],o.textAlign=n.textAlign,o.display="flex",o.flexDirection="column",o.justifyContent=a[n.verticalAlign],o.lineHeight=(n.__.__lineHeight||0)*i+"px",o.letterSpacing=(n.__.__letterSpacing||0)*i+"px","none"===c?o.whiteSpace="nowrap":"break"===c&&(o.wordBreak="break-all"),o.textIndent=(n.paraIndent||0)*i+"px",o.padding=l instanceof Array?l.map((e=>e*i+"px")).join(" "):(l||0)*i+"px",o.textOverflow="show"===d?"":"hide"===d?"clip":d}let c=class extends s{constructor(){super(...arguments),this.config={selectAll:!0},this.eventIds=[]}get tag(){return"TextEditor"}onLoad(){const{editor:e}=this,{config:i}=e.app,o=this.editTarget;o.visible=!1,this.isHTMLText=!(o instanceof t),this._keyEvent=i.keyEvent,i.keyEvent=!1;const s=this.editDom=document.createElement("div"),{style:r}=s;s.contentEditable="true",r.position="fixed",r.transformOrigin="left top",r.boxSizing="border-box",this.isHTMLText?s.innerHTML=o.text:s.innerText=o.text;const{view:a}=e.app;(this.inBody=a instanceof HTMLCanvasElement)?document.body.appendChild(s):a.appendChild(s),this.eventIds=[e.app.on_(n.DOWN,(t=>{let n,{target:i}=t.origin;for(;i;)i===s&&(n=!0),i=i.parentElement;n||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),s.addEventListener("focus",this.onFocus),s.addEventListener("input",this.onInput),window.addEventListener("keydown",this.onEscape),window.addEventListener("scroll",this.onUpdate);const l=window.getSelection(),c=document.createRange();if(this.config.selectAll)c.selectNodeContents(s);else{const e=s.childNodes[0];c.setStartAfter(e),c.setEndAfter(e),c.collapse(!0)}l.removeAllRanges(),l.addRange(c)}onInput(){const{editDom:e}=this;this.editTarget.text=this.isHTMLText?e.innerHTML:e.innerText.replace(/\n\n/,"\n")}onFocus(){this.editDom.style.outline="none"}onEscape(e){"Escape"===e.code&&this.editor.closeInnerEditor()}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;const{a:n,b:o,c:s,d:r,e:a,f:c}=new i(e.worldTransform).scale(1/t);let{x:d,y:p}=this.inBody?e.app.clientBounds:e.app.tree.clientBounds,{width:h,height:f}=e;d-=window.scrollX,p-=window.scrollY,h*=t,f*=t;const g=e.__;if(g.__autoWidth&&g.autoSizeAlign)switch(h+=20,g.textAlign){case"center":d-=h/2;break;case"right":d-=h}if(g.__autoHeight&&g.autoSizeAlign)switch(f+=20,g.verticalAlign){case"middle":p-=f/2;break;case"bottom":p-=f}const{style:u}=this.editDom;u.transform=`matrix(${n},${o},${s},${r},${a},${c})`,u.left=d+"px",u.top=p+"px",u.width=h+"px",u.height=f+"px",this.isHTMLText||l(this.editDom,e,t)}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)}};c=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}([o()],c);export{c as TextEditor};
|
package/dist/text-editor.js
CHANGED
|
@@ -120,18 +120,7 @@ this.LeaferIN.textEditor = (function (exports, core, editor) {
|
|
|
120
120
|
style.position = 'fixed';
|
|
121
121
|
style.transformOrigin = 'left top';
|
|
122
122
|
style.boxSizing = 'border-box';
|
|
123
|
-
|
|
124
|
-
div.innerHTML = text.text;
|
|
125
|
-
this.textScale = 1;
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
div.innerText = text.text;
|
|
129
|
-
const { scaleX, scaleY } = text.worldTransform;
|
|
130
|
-
this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
131
|
-
const fontSize = text.fontSize * this.textScale;
|
|
132
|
-
if (fontSize < 12)
|
|
133
|
-
this.textScale *= 12 / fontSize;
|
|
134
|
-
}
|
|
123
|
+
this.isHTMLText ? div.innerHTML = text.text : div.innerText = text.text;
|
|
135
124
|
const { view } = editor.app;
|
|
136
125
|
(this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : view.appendChild(div);
|
|
137
126
|
this.eventIds = [
|
|
@@ -180,16 +169,46 @@ this.LeaferIN.textEditor = (function (exports, core, editor) {
|
|
|
180
169
|
this.editor.closeInnerEditor();
|
|
181
170
|
}
|
|
182
171
|
onUpdate() {
|
|
183
|
-
const { editTarget: text
|
|
184
|
-
|
|
185
|
-
|
|
172
|
+
const { editTarget: text } = this;
|
|
173
|
+
let textScale = 1;
|
|
174
|
+
if (!this.isHTMLText) {
|
|
175
|
+
const { scaleX, scaleY } = text.worldTransform;
|
|
176
|
+
textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
|
|
177
|
+
const fontSize = text.fontSize * textScale;
|
|
178
|
+
if (fontSize < 12)
|
|
179
|
+
textScale *= 12 / text.fontSize;
|
|
180
|
+
}
|
|
181
|
+
this.textScale = textScale;
|
|
186
182
|
const { a, b, c, d, e, f } = new core.Matrix(text.worldTransform).scale(1 / textScale);
|
|
183
|
+
let { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
|
|
184
|
+
let { width, height } = text;
|
|
185
|
+
x -= window.scrollX, y -= window.scrollY, width *= textScale, height *= textScale;
|
|
186
|
+
const data = text.__;
|
|
187
|
+
if (data.__autoWidth && data.autoSizeAlign) {
|
|
188
|
+
width += 20;
|
|
189
|
+
switch (data.textAlign) {
|
|
190
|
+
case 'center':
|
|
191
|
+
x -= width / 2;
|
|
192
|
+
break;
|
|
193
|
+
case 'right': x -= width;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
if (data.__autoHeight && data.autoSizeAlign) {
|
|
197
|
+
height += 20;
|
|
198
|
+
switch (data.verticalAlign) {
|
|
199
|
+
case 'middle':
|
|
200
|
+
y -= height / 2;
|
|
201
|
+
break;
|
|
202
|
+
case 'bottom': y -= height;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
const { style } = this.editDom;
|
|
187
206
|
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
|
|
188
|
-
style.left = x
|
|
189
|
-
style.top = y
|
|
190
|
-
style.width =
|
|
191
|
-
style.height =
|
|
192
|
-
this.isHTMLText || updateStyle(this.editDom, text,
|
|
207
|
+
style.left = x + 'px';
|
|
208
|
+
style.top = y + 'px';
|
|
209
|
+
style.width = width + 'px';
|
|
210
|
+
style.height = height + 'px';
|
|
211
|
+
this.isHTMLText || updateStyle(this.editDom, text, textScale);
|
|
193
212
|
}
|
|
194
213
|
onUnload() {
|
|
195
214
|
const { editTarget: text, editor, editDom: dom } = this;
|
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"},i={top:"flex-start",middle:"center",bottom:"flex-end"};function o(t,o,s){const{style:r}=t,{fill:a,padding:l,textWrap:c,textOverflow:d,textDecoration:p}=o;r.fontFamily=o.fontFamily,r.fontSize=o.fontSize*s+"px",function(t,n){let i="black";n instanceof Array&&(n=n[0]);if("object"==typeof n)switch(n.type){case"solid":i=e.ColorConvert.string(n.color);break;case"image":break;case"linear":case"radial":case"angular":const t=n.stops[0];i=e.ColorConvert.string("string"==typeof t?t:t.color);break;default:void 0!==n.r&&(i=e.ColorConvert.string(n))}else i=n;t.color=i}(r,a),r.fontStyle=o.italic?"italic":"normal",r.fontWeight=o.fontWeight,r.textDecoration="delete"===p?"line-through":p,r.textTransform=n[o.textCase],r.textAlign=o.textAlign,r.display="flex",r.flexDirection="column",r.justifyContent=i[o.verticalAlign],r.lineHeight=(o.__.__lineHeight||0)*s+"px",r.letterSpacing=(o.__.__letterSpacing||0)*s+"px","none"===c?r.whiteSpace="nowrap":"break"===c&&(r.wordBreak="break-all"),r.textIndent=(o.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,i=this.editTarget;i.visible=!1,this.isHTMLText=!(i instanceof e.Text),this._keyEvent=n.keyEvent,n.keyEvent=!1;const o=this.editDom=document.createElement("div"),{style:s}=o;
|
|
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"},i={top:"flex-start",middle:"center",bottom:"flex-end"};function o(t,o,s){const{style:r}=t,{fill:a,padding:l,textWrap:c,textOverflow:d,textDecoration:p}=o;r.fontFamily=o.fontFamily,r.fontSize=o.fontSize*s+"px",function(t,n){let i="black";n instanceof Array&&(n=n[0]);if("object"==typeof n)switch(n.type){case"solid":i=e.ColorConvert.string(n.color);break;case"image":break;case"linear":case"radial":case"angular":const t=n.stops[0];i=e.ColorConvert.string("string"==typeof t?t:t.color);break;default:void 0!==n.r&&(i=e.ColorConvert.string(n))}else i=n;t.color=i}(r,a),r.fontStyle=o.italic?"italic":"normal",r.fontWeight=o.fontWeight,r.textDecoration="delete"===p?"line-through":p,r.textTransform=n[o.textCase],r.textAlign=o.textAlign,r.display="flex",r.flexDirection="column",r.justifyContent=i[o.verticalAlign],r.lineHeight=(o.__.__lineHeight||0)*s+"px",r.letterSpacing=(o.__.__letterSpacing||0)*s+"px","none"===c?r.whiteSpace="nowrap":"break"===c&&(r.wordBreak="break-all"),r.textIndent=(o.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,i=this.editTarget;i.visible=!1,this.isHTMLText=!(i instanceof e.Text),this._keyEvent=n.keyEvent,n.keyEvent=!1;const o=this.editDom=document.createElement("div"),{style:s}=o;o.contentEditable="true",s.position="fixed",s.transformOrigin="left top",s.boxSizing="border-box",this.isHTMLText?o.innerHTML=i.text:o.innerText=i.text;const{view:r}=t.app;(this.inBody=r instanceof HTMLCanvasElement)?document.body.appendChild(o):r.appendChild(o),this.eventIds=[t.app.on_(e.PointerEvent.DOWN,(e=>{let n,{target:i}=e.origin;for(;i;)i===o&&(n=!0),i=i.parentElement;n||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),o.addEventListener("focus",this.onFocus),o.addEventListener("input",this.onInput),window.addEventListener("keydown",this.onEscape),window.addEventListener("scroll",this.onUpdate);const a=window.getSelection(),l=document.createRange();if(this.config.selectAll)l.selectNodeContents(o);else{const e=o.childNodes[0];l.setStartAfter(e),l.setEndAfter(e),l.collapse(!0)}a.removeAllRanges(),a.addRange(l)}onInput(){const{editDom:e}=this;this.editTarget.text=this.isHTMLText?e.innerHTML:e.innerText.replace(/\n\n/,"\n")}onFocus(){this.editDom.style.outline="none"}onEscape(e){"Escape"===e.code&&this.editor.closeInnerEditor()}onUpdate(){const{editTarget:t}=this;let n=1;if(!this.isHTMLText){const{scaleX:e,scaleY:i}=t.worldTransform;n=Math.max(Math.abs(e),Math.abs(i));t.fontSize*n<12&&(n*=12/t.fontSize)}this.textScale=n;const{a:i,b:s,c:r,d:a,e:l,f:c}=new e.Matrix(t.worldTransform).scale(1/n);let{x:d,y:p}=this.inBody?t.app.clientBounds:t.app.tree.clientBounds,{width:h,height:f}=t;d-=window.scrollX,p-=window.scrollY,h*=n,f*=n;const x=t.__;if(x.__autoWidth&&x.autoSizeAlign)switch(h+=20,x.textAlign){case"center":d-=h/2;break;case"right":d-=h}if(x.__autoHeight&&x.autoSizeAlign)switch(f+=20,x.verticalAlign){case"middle":p-=f/2;break;case"bottom":p-=f}const{style:u}=this.editDom;u.transform=`matrix(${i},${s},${r},${a},${l},${c})`,u.left=d+"px",u.top=p+"px",u.width=h+"px",u.height=f+"px",this.isHTMLText||o(this.editDom,t,n)}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,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}([t.registerInnerEditor()],exports.TextEditor);
|
package/dist/text-editor.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.textEditor=function(t,
|
|
1
|
+
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.textEditor=function(e,t,n){"use strict";"function"==typeof SuppressedError&&SuppressedError;const i={none:"none",title:"capitalize",upper:"uppercase",lower:"lowercase","small-caps":"small-caps"},o={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 i="black";n instanceof Array&&(n=n[0]);if("object"==typeof n)switch(n.type){case"solid":i=t.ColorConvert.string(n.color);break;case"image":break;case"linear":case"radial":case"angular":const e=n.stops[0];i=t.ColorConvert.string("string"==typeof e?e:e.color);break;default:void 0!==n.r&&(i=t.ColorConvert.string(n))}else i=n;e.color=i}(r,a),r.fontStyle=n.italic?"italic":"normal",r.fontWeight=n.fontWeight,r.textDecoration="delete"===p?"line-through":p,r.textTransform=i[n.textCase],r.textAlign=n.textAlign,r.display="flex",r.flexDirection="column",r.justifyContent=o[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,i=this.editTarget;i.visible=!1,this.isHTMLText=!(i instanceof t.Text),this._keyEvent=n.keyEvent,n.keyEvent=!1;const o=this.editDom=document.createElement("div"),{style:s}=o;o.contentEditable="true",s.position="fixed",s.transformOrigin="left top",s.boxSizing="border-box",this.isHTMLText?o.innerHTML=i.text:o.innerText=i.text;const{view:r}=e.app;(this.inBody=r instanceof HTMLCanvasElement)?document.body.appendChild(o):r.appendChild(o),this.eventIds=[e.app.on_(t.PointerEvent.DOWN,(t=>{let n,{target:i}=t.origin;for(;i;)i===o&&(n=!0),i=i.parentElement;n||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),o.addEventListener("focus",this.onFocus),o.addEventListener("input",this.onInput),window.addEventListener("keydown",this.onEscape),window.addEventListener("scroll",this.onUpdate);const a=window.getSelection(),l=document.createRange();if(this.config.selectAll)l.selectNodeContents(o);else{const e=o.childNodes[0];l.setStartAfter(e),l.setEndAfter(e),l.collapse(!0)}a.removeAllRanges(),a.addRange(l)}onInput(){const{editDom:e}=this;this.editTarget.text=this.isHTMLText?e.innerHTML:e.innerText.replace(/\n\n/,"\n")}onFocus(){this.editDom.style.outline="none"}onEscape(e){"Escape"===e.code&&this.editor.closeInnerEditor()}onUpdate(){const{editTarget:e}=this;let n=1;if(!this.isHTMLText){const{scaleX:t,scaleY:i}=e.worldTransform;n=Math.max(Math.abs(t),Math.abs(i));e.fontSize*n<12&&(n*=12/e.fontSize)}this.textScale=n;const{a:i,b:o,c:r,d:a,e:l,f:c}=new t.Matrix(e.worldTransform).scale(1/n);let{x:d,y:p}=this.inBody?e.app.clientBounds:e.app.tree.clientBounds,{width:h,height:f}=e;d-=window.scrollX,p-=window.scrollY,h*=n,f*=n;const x=e.__;if(x.__autoWidth&&x.autoSizeAlign)switch(h+=20,x.textAlign){case"center":d-=h/2;break;case"right":d-=h}if(x.__autoHeight&&x.autoSizeAlign)switch(f+=20,x.verticalAlign){case"middle":p-=f/2;break;case"bottom":p-=f}const{style:g}=this.editDom;g.transform=`matrix(${i},${o},${r},${a},${l},${c})`,g.left=d+"px",g.top=p+"px",g.width=h+"px",g.height=f+"px",this.isHTMLText||s(this.editDom,e,n)}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,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}([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.6",
|
|
4
4
|
"description": "@leafer-in/text-editor",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
],
|
|
22
22
|
"repository": {
|
|
23
23
|
"type": "git",
|
|
24
|
-
"url": "https://github.com/leaferjs/in.git"
|
|
24
|
+
"url": "https://github.com/leaferjs/leafer-in.git"
|
|
25
25
|
},
|
|
26
|
-
"homepage": "https://github.com/leaferjs/in/tree/main/packages/text-editor",
|
|
27
|
-
"bugs": "https://github.com/leaferjs/in/issues",
|
|
26
|
+
"homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/text-editor",
|
|
27
|
+
"bugs": "https://github.com/leaferjs/leafer-in/issues",
|
|
28
28
|
"keywords": [
|
|
29
29
|
"leafer text-editor",
|
|
30
30
|
"leafer-text-editor",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"leaferjs"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@leafer-ui/core": "^1.0.
|
|
38
|
-
"@leafer-in/editor": "^1.0.
|
|
39
|
-
"@leafer-ui/interface": "^1.0.
|
|
40
|
-
"@leafer-in/interface": "^1.0.
|
|
37
|
+
"@leafer-ui/core": "^1.0.6",
|
|
38
|
+
"@leafer-in/editor": "^1.0.6",
|
|
39
|
+
"@leafer-ui/interface": "^1.0.6",
|
|
40
|
+
"@leafer-in/interface": "^1.0.6"
|
|
41
41
|
}
|
|
42
42
|
}
|
package/src/TextEditor.ts
CHANGED
|
@@ -41,22 +41,7 @@ export class TextEditor extends InnerEditor {
|
|
|
41
41
|
style.transformOrigin = 'left top'
|
|
42
42
|
style.boxSizing = 'border-box'
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
div.innerHTML = text.text
|
|
47
|
-
this.textScale = 1
|
|
48
|
-
|
|
49
|
-
} else {
|
|
50
|
-
|
|
51
|
-
div.innerText = text.text
|
|
52
|
-
|
|
53
|
-
const { scaleX, scaleY } = text.worldTransform
|
|
54
|
-
this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY))
|
|
55
|
-
|
|
56
|
-
const fontSize = text.fontSize * this.textScale
|
|
57
|
-
if (fontSize < 12) this.textScale *= 12 / fontSize
|
|
58
|
-
|
|
59
|
-
}
|
|
44
|
+
this.isHTMLText ? div.innerHTML = text.text : div.innerText = text.text
|
|
60
45
|
|
|
61
46
|
const { view } = editor.app;
|
|
62
47
|
(this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : (view as HTMLDivElement).appendChild(div)
|
|
@@ -117,17 +102,54 @@ export class TextEditor extends InnerEditor {
|
|
|
117
102
|
}
|
|
118
103
|
|
|
119
104
|
public onUpdate() {
|
|
120
|
-
const { editTarget: text
|
|
121
|
-
|
|
122
|
-
|
|
105
|
+
const { editTarget: text } = this
|
|
106
|
+
|
|
107
|
+
// get text scale
|
|
108
|
+
let textScale = 1
|
|
109
|
+
|
|
110
|
+
if (!this.isHTMLText) {
|
|
111
|
+
const { scaleX, scaleY } = text.worldTransform
|
|
112
|
+
textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY))
|
|
113
|
+
|
|
114
|
+
const fontSize = text.fontSize * textScale
|
|
115
|
+
if (fontSize < 12) textScale *= 12 / text.fontSize
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
this.textScale = textScale
|
|
119
|
+
|
|
120
|
+
// layout
|
|
123
121
|
const { a, b, c, d, e, f } = new Matrix(text.worldTransform).scale(1 / textScale)
|
|
122
|
+
let { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds
|
|
123
|
+
let { width, height } = text
|
|
124
|
+
|
|
125
|
+
x -= window.scrollX, y -= window.scrollY, width *= textScale, height *= textScale
|
|
126
|
+
|
|
127
|
+
const data = text.__
|
|
124
128
|
|
|
129
|
+
if (data.__autoWidth && data.autoSizeAlign) {
|
|
130
|
+
width += 20 // 加大一点防止换行
|
|
131
|
+
switch (data.textAlign) {
|
|
132
|
+
case 'center': x -= width / 2; break
|
|
133
|
+
case 'right': x -= width
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
if (data.__autoHeight && data.autoSizeAlign) {
|
|
138
|
+
height += 20
|
|
139
|
+
switch (data.verticalAlign) {
|
|
140
|
+
case 'middle': y -= height / 2; break
|
|
141
|
+
case 'bottom': y -= height
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
const { style } = this.editDom
|
|
125
146
|
style.transform = `matrix(${a},${b},${c},${d},${e},${f})`
|
|
126
|
-
style.left = x
|
|
127
|
-
style.top = y
|
|
128
|
-
style.width =
|
|
129
|
-
style.height =
|
|
130
|
-
|
|
147
|
+
style.left = x + 'px'
|
|
148
|
+
style.top = y + 'px'
|
|
149
|
+
style.width = width + 'px'
|
|
150
|
+
style.height = height + 'px'
|
|
151
|
+
|
|
152
|
+
this.isHTMLText || updateStyle(this.editDom, text, textScale)
|
|
131
153
|
}
|
|
132
154
|
|
|
133
155
|
public onUnload(): void {
|