@chenyomi/leafer-htmltext-editor 1.0.0

package/dist/TextEditor.js

@@ -0,0 +1,166 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TextEditor_1;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextEditor = void 0;
+const core_1 = require("@leafer-ui/core");
+const editor_1 = require("@leafer-in/editor");
+const utils_1 = require("./utils");
+let TextEditor = TextEditor_1 = class TextEditor extends editor_1.InnerEditor {
+    constructor() {
+        super(...arguments);
+        this.config = {
+            selectAll: false,
+        };
+        this.eventIds = [];
+        this.onSelectionChange = async (e) => {
+            e && localStorage.setItem("selection-change", JSON.stringify(e));
+        };
+        this.onInput = async () => {
+            (0, utils_1.updataHtmlText)(this.editTarget);
+        };
+        this.isUpdatingPoints = false;
+    }
+    get tag() {
+        return "TextEditor";
+    }
+    onLoad() {
+        const { editor } = this;
+        const { config } = editor.app;
+        const text = this.editTarget;
+        const { scaleX, scaleY } = text.worldTransform;
+        const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+        this.quill = TextEditor_1.quill;
+        this.isHTMLText = !(text instanceof Text);
+        config.keyEvent = false;
+        const element = document.querySelector("#textInnerEditor");
+        if (!element || !(element instanceof HTMLDivElement)) {
+            console.error("Cannot find #textInnerEditor element or it's not a div");
+            return;
+        }
+        const div = (this.editDom = element);
+        const { style } = div;
+        style.visibility = "visible";
+        if (text.data?.canChangeBox &&
+            text.parent?.width !== undefined &&
+            text.parent?.height !== undefined) {
+            style.width = text.parent.width * zoomScale + "px";
+            style.height = text.parent.height * zoomScale + "px";
+        }
+        else {
+            style.width = "auto";
+            style.height = "auto";
+        }
+        style.outline = "solid #8499EF";
+        if (text.data?.textData?.fontSize) {
+            div.style.fontSize = `${text.data.textData.fontSize * zoomScale}px`;
+        }
+        if (text.data?.textData?.fontFamily) {
+            div.style.fontFamily = `${text.data.textData.fontFamily}`;
+        }
+        if (text.data?.textData?.lineHeight) {
+            div.style.lineHeight = text.data.textData.lineHeight;
+        }
+        if (text.data?.textData?.letterSpacing) {
+            div.style.letterSpacing = `${text.data.textData.letterSpacing}px`;
+        }
+        if (text.data?.textData?.textShadow) {
+            div.style.textShadow = `${text.data.textData.textShadow}`;
+        }
+        else {
+            div.style.textShadow = "none";
+        }
+        if (text.data?.textData?.alignContent) {
+            const qlEditor = div.querySelector(".ql-editor");
+            if (qlEditor) {
+                qlEditor.style.alignContent = `${text.data.textData.alignContent}`;
+            }
+        }
+        if (this.quill) {
+            this.quill.clipboard.dangerouslyPasteHTML(text.text);
+            if (text.parent?.children?.[0]?.tag?.includes("Shape")) {
+                const parentWidth = text.parent.width;
+                if (parentWidth !== undefined) {
+                    style.width = parentWidth * zoomScale + "px";
+                    style.left = "0px";
+                }
+                this.quill.formatLine(0, this.quill.getLength(), "align", "center");
+            }
+            else {
+                this.quill.setSelection(0, this.quill.getLength() - 1);
+            }
+            this.quill.on("text-change", this.onInput);
+            this.quill.on("selection-change", this.onSelectionChange);
+        }
+        localStorage.removeItem("selection-change");
+        this.eventIds = [
+            editor.app.on_(core_1.PointerEvent.DOWN, (e) => {
+                let { target } = e.origin;
+                let find = false;
+                while (target) {
+                    if (target === div)
+                        find = true;
+                    target = target.parentElement;
+                }
+                if (!find) {
+                    editor.closeInnerEditor();
+                    editor.cancel();
+                }
+            }),
+        ];
+    }
+    onUpdate() {
+        const { editTarget: text } = this;
+        if (!text.parent?.__local)
+            return;
+        const { scaleX, scaleY } = text.worldTransform;
+        const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+        const local = text.parent.__local;
+        let width = local.width || 0;
+        let height = local.height || 0;
+        width *= zoomScale;
+        height *= zoomScale;
+        const { x, y } = this.inBody
+            ? text.app.clientBounds
+            : (text.app.tree?.clientBounds || { x: 0, y: 0 });
+        const { a, b, c, d, e, f } = new core_1.Matrix(text.worldTransform)
+            .scale(1 / zoomScale)
+            .translateInner(0, 0);
+        if (this.editDom) {
+            const { style } = this.editDom;
+            style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
+            style.left = x + "px";
+            style.top = y + "px";
+        }
+        text.set({
+            visible: false,
+        });
+    }
+    onUnload() {
+        const { editTarget: text, editor, editDom: dom } = this;
+        if (text) {
+            this.onInput();
+            editor.off_(this.eventIds);
+            if (this.editDom) {
+                this.editDom.style.visibility = "hidden";
+            }
+            this.eventIds = [];
+        }
+        text.set({
+            visible: true,
+        });
+        if (this.quill) {
+            this.quill.off("text-change", this.onInput);
+            this.quill.off("selection-change", this.onSelectionChange);
+        }
+    }
+};
+exports.TextEditor = TextEditor;
+exports.TextEditor = TextEditor = TextEditor_1 = __decorate([
+    (0, editor_1.registerInnerEditor)()
+], TextEditor);

package/dist/esm/TextEditTool/index.d.ts

@@ -0,0 +1,17 @@
+import { EditTool } from '@leafer-in/editor';
+export declare class TextEditTool extends EditTool {
+    get tag(): string;
+    quill: any;
+    private _dragRAF;
+    private updateBoxDebounced;
+    constructor(editor: any);
+    addEvent(): void;
+    onLoad(): void;
+    private isUpdatingPoints;
+    private curveAmount;
+    updateChangeBoxBound(text: any): void;
+    onUpdate(): void;
+    onUnload(): void;
+    onDestroy(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/TextEditTool/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextEditTool/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAA+D,MAAM,mBAAmB,CAAC;AAa1G,qBACa,YAAa,SAAQ,QAAQ;IACxC,IAAW,GAAG,WAEb;IAEM,KAAK,EAAE,GAAG,CAAQ;IACzB,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,kBAAkB,CAAsB;gBAEpC,MAAM,EAAE,GAAG;IAQhB,QAAQ,IAAI,IAAI;IAqChB,MAAM,IAAI,IAAI;IAqCrB,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,WAAW,CAAK;IAEjB,oBAAoB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IASrC,QAAQ,IAAI,IAAI;IAchB,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;CACzB"}

package/dist/esm/TextEditTool/index.js

@@ -0,0 +1,135 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { PointerEvent } from 'leafer-ui';
+import { EditTool, registerEditTool, EditorScaleEvent } from '@leafer-in/editor';
+import { updataHtmlText } from '../utils';
+import { TextEditor } from '../TextEditor';
+function debounce(func, wait) {
+    let timeout = null;
+    return function (...args) {
+        if (timeout)
+            clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+}
+let TextEditTool = class TextEditTool extends EditTool {
+    get tag() {
+        return 'TextEditTool';
+    }
+    constructor(editor) {
+        super(editor);
+        this.quill = null;
+        this._dragRAF = null;
+        this.isUpdatingPoints = false;
+        this.curveAmount = 0;
+        this.eventIds = [];
+        this.updateBoxDebounced = debounce((text) => {
+            updataHtmlText(text);
+        }, 300);
+    }
+    addEvent() {
+        if (!this.editor?.element)
+            return;
+        const text = this.editor.element.findOne('HTMLText');
+        if (!text)
+            return;
+        const { scaleX, scaleY } = text.worldTransform;
+        const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+        const div = document.querySelector('#textInnerEditor');
+        if (!div)
+            return;
+        const { style } = div;
+        this.eventIds = [
+            this.editor.on_(EditorScaleEvent.SCALE, (e) => {
+                if (!text.data)
+                    text.data = {};
+                if (!text.data.canChangeBox) {
+                    text.data.canChangeBox = true;
+                }
+                if (text.data.canChangeBox && text.parent) {
+                    const parentWidth = text.parent.width;
+                    if (parentWidth !== undefined) {
+                        style.width = parentWidth * zoomScale + 'px';
+                        style.height = 'auto';
+                    }
+                }
+                this.updateBoxDebounced(text);
+            }),
+            this.editor.on_(PointerEvent.DOUBLE_TAP, () => {
+                if (!text.parent?.locked) {
+                    this.editor.openInnerEditor(text, true);
+                }
+            })
+        ];
+    }
+    onLoad() {
+        if (!this.editor?.element)
+            return;
+        const text = this.editor.element.findOne('HTMLText');
+        if (!text)
+            return;
+        const { scaleX, scaleY } = text.worldTransform;
+        const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+        this.addEvent();
+        this.editBox.add(this.view);
+        this.quill = TextEditor.quill;
+        if (this.quill && text.text) {
+            this.quill.clipboard.dangerouslyPasteHTML(text.text);
+        }
+        const div = document.querySelector('#textInnerEditor');
+        if (!div)
+            return;
+        const { style } = div;
+        if (text.data?.canChangeBox && text.parent) {
+            const parentWidth = text.parent.width;
+            const parentHeight = text.parent.height;
+            if (parentWidth !== undefined) {
+                style.width = parentWidth * zoomScale + 'px';
+            }
+            if (parentHeight !== undefined) {
+                style.height = parentHeight * zoomScale + 'px';
+            }
+        }
+        else {
+            style.width = 'auto';
+            style.height = 'auto';
+        }
+    }
+    updateChangeBoxBound(text) {
+        if (text && text.__layout?.boxBounds) {
+            text.set({
+                width: text.__layout.boxBounds.width,
+                height: text.__layout.boxBounds.height
+            });
+        }
+    }
+    onUpdate() {
+        if (!this.editor?.element)
+            return;
+        const text = this.editor.element.findOne('HTMLText');
+        if (!text)
+            return;
+        const el = this.editor.element;
+        console.log('文本bound更新');
+        if (this.curveAmount === text.curveAmount)
+            return;
+        if (this.isUpdatingPoints)
+            return;
+    }
+    onUnload() {
+        this.editor.off_(this.eventIds);
+    }
+    onDestroy() { }
+};
+TextEditTool = __decorate([
+    registerEditTool(),
+    __metadata("design:paramtypes", [Object])
+], TextEditTool);
+export { TextEditTool };

package/dist/esm/TextEditTool/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function getArcRadius(fontSize: number, curveAmount: number): number;
+export declare const handleShowCurve: (element: any, op: boolean) => void;
+export declare function toSuperscript(input: string): string;
+export declare function toSubscript(input: string): string;
+export declare const superscriptMapVal: string[];
+export declare const subscriptMapVal: string[];
+export declare function toNormal(input: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/esm/TextEditTool/utils.d.ts.map

@@ -0,0 +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;AAmFD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMnD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjD;AAGD,eAAO,MAAM,iBAAiB,UAAgC,CAAA;AAE9D,eAAO,MAAM,eAAe,UAA8B,CAAA;AA0B1D,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAM9C"}

package/dist/esm/TextEditTool/utils.js

@@ -0,0 +1,165 @@
+import { Box, Path } from 'leafer-ui';
+import { HTMLText } from '@leafer-in/html';
+export function getArcRadius(fontSize, curveAmount) {
+    if (curveAmount === 0)
+        return Infinity;
+    const theta = (330 * fontSize * 72) / 96;
+    const radius = theta / Math.abs(curveAmount);
+    return radius;
+}
+export const handleShowCurve = (element, op) => {
+    const box = element.findOne('Box');
+    box && element.remove(box);
+    const text = element.findOne('HTMLText');
+    const { boxBounds, x, y } = text;
+    const { width } = boxBounds;
+    if (!text.curveAmount) {
+        text.opacity = 1;
+        text.visible = true;
+        return;
+    }
+    text.text = text.text.replace(/\u200B/g, '').replace(/<br\s*\/?>/gi, '\n');
+    text.opacity = 0;
+    const radius = getArcRadius(text.fontSize, text.curveAmount);
+    const C = 2 * Math.PI * radius;
+    const dis = text.text.length + 2;
+    const tW = width / dis;
+    let startW = 0;
+    if (C > tW * text.text.length) {
+        startW = (C - tW * text.text.length) / 2;
+    }
+    const startWPr = (startW * 360) / C;
+    const group = new Box({
+        x: 0,
+        y: 0,
+        editable: false,
+        resizeChildren: true
+    });
+    let path;
+    const offsetK = text.fontSize * text.lineHeight.value || 0;
+    const offsetY = text.curveAmount > 0 ? radius + offsetK : -radius;
+    if (text.curveAmount > 0) {
+        path = `G ${x + width / 2} ${offsetY} ${radius} ${radius} 90 ${startWPr} ${360 - startWPr} 0`;
+    }
+    else {
+        const a = 180 - startWPr;
+        path = `G ${x + width / 2} ${offsetY} ${radius} ${radius} 90 ${a} ${-a} 1`;
+    }
+    const pathLine = new Path({
+        x: 0,
+        y: 0,
+        motionPath: true,
+        editable: false,
+        path: path
+    });
+    group.add(pathLine);
+    group.set({
+        opacity: op ? 0.2 : 1
+    });
+    Array.from(text.text).forEach((ch, i) => {
+        const str = new HTMLText({
+            text: ch,
+            around: text.curveAmount > 0 ? 'bottom' : 'top',
+            fontSize: text.fontSize,
+            fontFamily: text.fontFamily,
+            fontWeight: text.fontWeight,
+            motion: i * tW + tW / 2,
+            textDecoration: text.textDecoration,
+            textCase: text.textCase,
+            textAlign: text.textAlign,
+            motionRotation: text.curveAmount > 0 ? 3 : -2,
+            fill: text.fill
+        });
+        group.add(str);
+    });
+    element.add(group);
+};
+const baseSuperscript = {
+    '0': '⁰', '1': '¹', '2': '²', '3': '³', '4': '⁴', '5': '⁵', '6': '⁶', '7': '⁷', '8': '⁸', '9': '⁹',
+    a: 'ᵃ', b: 'ᵇ', c: 'ᶜ', d: 'ᵈ', e: 'ᵉ', f: 'ᶠ', g: 'ᵍ', h: 'ʰ', i: 'ⁱ', j: 'ʲ', k: 'ᵏ',
+    l: 'ˡ', m: 'ᵐ', n: 'ⁿ', o: 'ᵒ', p: 'ᵖ', r: 'ʳ', s: 'ˢ', t: 'ᵗ', u: 'ᵘ', v: 'ᵛ', w: 'ʷ',
+    x: 'ˣ', y: 'ʸ', z: 'ᶻ',
+    A: 'ᴬ', B: 'ᴮ', D: 'ᴰ', E: 'ᴱ', G: 'ᴳ', H: 'ᴴ', I: 'ᴵ', J: 'ᴶ', K: 'ᴷ', L: 'ᴸ', M: 'ᴹ',
+    N: 'ᴺ', O: 'ᴼ', P: 'ᴾ', R: 'ᴿ', T: 'ᵀ', U: 'ᵁ', W: 'ᵂ',
+    '+': '⁺', '-': '⁻', '=': '⁼', '(': '⁽', ')': '⁾'
+};
+const baseSubscript = {
+    '0': '₀', '1': '₁', '2': '₂', '3': '₃', '4': '₄', '5': '₅', '6': '₆', '7': '₇', '8': '₈', '9': '₉',
+    a: 'ₐ', e: 'ₑ', h: 'ₕ', i: 'ᵢ', j: 'ⱼ', k: 'ₖ', l: 'ₗ', m: 'ₘ', n: 'ₙ', o: 'ₒ', p: 'ₚ',
+    r: 'ᵣ', s: 'ₛ', t: 'ₜ', u: 'ᵤ', v: 'ᵥ', x: 'ₓ',
+    '+': '₊', '-': '₋', '=': '₌', '(': '₍', ')': '₎',
+    'β': 'ᵦ', 'γ': 'ᵧ', 'ρ': 'ᵨ', 'φ': 'ᵩ', 'χ': 'ᵪ'
+};
+function invertMap(map) {
+    const inv = {};
+    for (const k in map) {
+        inv[map[k]] = map[k];
+    }
+    return inv;
+}
+const knownSupers = invertMap(baseSuperscript);
+const knownSubs = invertMap(baseSubscript);
+function buildSuperscriptMap(baseSup, baseSub) {
+    const out = {};
+    for (const k in baseSup)
+        out[k] = baseSup[k];
+    for (const base in baseSub) {
+        const subChar = baseSub[base];
+        if (base in baseSup)
+            out[subChar] = baseSup[base];
+    }
+    for (const supChar in knownSupers)
+        out[supChar] = supChar;
+    return out;
+}
+function buildSubscriptMap(baseSup, baseSub) {
+    const out = {};
+    for (const k in baseSub)
+        out[k] = baseSub[k];
+    for (const base in baseSup) {
+        const supChar = baseSup[base];
+        if (base in baseSub)
+            out[supChar] = baseSub[base];
+    }
+    for (const subChar in knownSubs)
+        out[subChar] = subChar;
+    return out;
+}
+const superscriptMap = buildSuperscriptMap(baseSuperscript, baseSubscript);
+const subscriptMap = buildSubscriptMap(baseSuperscript, baseSubscript);
+export function toSuperscript(input) {
+    let out = '';
+    for (const ch of input) {
+        out += superscriptMap[ch] ?? ch;
+    }
+    return out;
+}
+export function toSubscript(input) {
+    let out = '';
+    for (const ch of input) {
+        out += subscriptMap[ch] ?? ch;
+    }
+    return out;
+}
+export const superscriptMapVal = Object.values(superscriptMap);
+export const subscriptMapVal = Object.values(subscriptMap);
+function buildNormalMap(baseSup, baseSub) {
+    const normal = {};
+    for (const base in baseSup) {
+        const supChar = baseSup[base];
+        normal[supChar] = base;
+    }
+    for (const base in baseSub) {
+        const subChar = baseSub[base];
+        normal[subChar] = base;
+    }
+    return normal;
+}
+const normalMap = buildNormalMap(baseSuperscript, baseSubscript);
+export function toNormal(input) {
+    let out = '';
+    for (const ch of input) {
+        out += normalMap[ch] ?? ch;
+    }
+    return out;
+}

package/dist/esm/TextEditor.d.ts

@@ -0,0 +1,27 @@
+import { IText, IEventListenerId } from "@leafer-in/interface";
+import { InnerEditor } from "@leafer-in/editor";
+export declare class TextEditor extends InnerEditor {
+    static quill: any;
+    get tag(): string;
+    quill: any;
+    editTarget: IText;
+    editDom: HTMLDivElement | undefined;
+    config: {
+        selectAll: boolean;
+    };
+    eventIds: IEventListenerId[];
+    protected selectText: {
+        start: number;
+        end: number;
+        text: string;
+    } | undefined;
+    protected inBody: boolean | undefined;
+    protected isHTMLText: boolean | undefined;
+    onLoad(): void;
+    private onSelectionChange;
+    private onInput;
+    onUpdate(): void;
+    private isUpdatingPoints;
+    onUnload(): void;
+}
+//# sourceMappingURL=TextEditor.d.ts.map

package/dist/esm/TextEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../src/TextEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAuB,MAAM,mBAAmB,CAAC;AAMrE,qBACa,UAAW,SAAQ,WAAW;IACzC,OAAc,KAAK,EAAE,GAAG,CAAC;IAEzB,IAAW,GAAG,WAEb;IAEM,KAAK,EAAE,GAAG,CAAC;IACH,UAAU,EAAE,KAAK,CAAC;IAE1B,OAAO,EAAE,cAAc,GAAG,SAAS,CAAC;IACpC,MAAM;;MAEX;IAEK,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAEzC,SAAS,CAAC,UAAU,EAChB;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAC5C,SAAS,CAAC;IACd,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,SAAS,CAAC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAEnC,MAAM,IAAI,IAAI;IAoGrB,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,OAAO,CAGb;IAEK,QAAQ;IAkCf,OAAO,CAAC,gBAAgB,CAAS;IAE1B,QAAQ,IAAI,IAAI;CAsBxB"}