@chenyomi/leafer-htmltext-editor 1.0.0 → 1.0.1

package/src/TextEditTool/index.ts

@@ -5,141 +5,135 @@
  * 作者: chenyomi
  */
 
-import { DragEvent, PointerEvent, WatchEvent } from 'leafer-ui';
-import { EditTool, Editor, registerEditTool, EditorScaleEvent, EditorMoveEvent } from '@leafer-in/editor';
-import { updataHtmlText } from '../utils';
-import { TextEditor } from '../TextEditor';
-
-// 简单的防抖函数实现
-function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
-  let timeout: ReturnType<typeof setTimeout> | null = null;
-  return function(this: any, ...args: Parameters<T>) {
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(this, args), wait);
-  };
-}
+// #图形编辑器 [自定义编辑工具]
+import {
+  EditTool,
+  EditorScaleEvent,
+  registerEditTool,
+} from "@leafer-in/editor";
+import { PointerEvent } from "leafer-ui";
+import { quillManager } from "../index";
+import { updataHtmlText } from "../utils";
 
 @registerEditTool()
+// 定义插件类，继承自 EditTool，处理矩形圆角编辑交互
 export class TextEditTool extends EditTool {
+  // 插件标识标签
   public get tag() {
-    return 'TextEditTool';
+    return "TextEditTool";
   }
-  
   public quill: any = null;
-  private _dragRAF: number | null = null;
+  private _dragRAF: number | null = null; // 用于 requestAnimationFrame 节流拖拽事件
   private updateBoxDebounced: (text: any) => void;
-  
+  // 构造函数，初始化控制点并加入视图
   constructor(editor: any) {
     super(editor);
-    this.eventIds = [];
-    this.updateBoxDebounced = debounce((text: any) => {
+    this.eventIds = []; // 存储事件绑定ID
+    this.updateBoxDebounced = this.debounce((text: any) => {
       updataHtmlText(text);
     }, 300);
   }
-  
+  // 自定义防抖函数替代 lodash/debounce
+  private debounce<T extends (...args: any[]) => any>(
+    func: T,
+    wait: number,
+  ): T {
+    let timeout: number | null = null;
+    return ((...args: any[]) => {
+      if (timeout !== null) {
+        window.clearTimeout(timeout);
+      }
+      timeout = window.setTimeout(
+        () => func.apply(this, args),
+        wait,
+      ) as unknown as number;
+    }) as T;
+  }
+  // 绑定事件
   public addEvent(): void {
-    if (!this.editor?.element) return;
-    
-    const text = this.editor.element.findOne('HTMLText');
-    if (!text) return;
-    
+    const { editor } = quillManager.getCanvas();
+    const text = editor._target.findOne("HTMLText");
     const { scaleX, scaleY } = text.worldTransform;
     const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
-    const div: any = document.querySelector('#textInnerEditor');
-    
-    if (!div) return;
-    
+    const div: any = document.querySelector("#textInnerEditor");
     const { style } = div;
-    
     this.eventIds = [
-      this.editor.on_(EditorScaleEvent.SCALE, (e: any) => {
-        if (!text.data) text.data = {};
+      editor.on_(EditorScaleEvent.SCALE, (e: any) => {
         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';
-          }
+        if (text.data.canChangeBox) {
+          style.width = text.parent.width * zoomScale + "px";
+          style.height = "auto";
         }
         this.updateBoxDebounced(text);
       }),
-      this.editor.on_(PointerEvent.DOUBLE_TAP, () => {
-        if (!text.parent?.locked) {
-          this.editor.openInnerEditor(text, true);
+      editor.on_(PointerEvent.DOUBLE_TAP, () => {
+        if (!text.parent.locked) {
+          editor.openInnerEditor(text, true);
         }
-      })
+      }),
     ];
   }
 
+  // 生命周期钩子：插件加载时绑定事件
   public onLoad(): void {
-    if (!this.editor?.element) return;
-    
-    const text: any = this.editor.element.findOne('HTMLText');
-    if (!text) return;
-    
+    const { editor } = quillManager.getCanvas();
+    const text: any = editor._target.findOne("HTMLText");
     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: any = document.querySelector('#textInnerEditor');
-    if (!div) return;
-    
+    this.quill = quillManager.getQuill();
+    this.quill.clipboard.dangerouslyPasteHTML(text.text);
+    const div: any = document.querySelector("#textInnerEditor");
     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';
-      }
+    if (text.data.canChangeBox) {
+      style.width = text.parent.width * zoomScale + "px";
+      style.height = text.parent.height * zoomScale + "px";
     } else {
-      style.width = 'auto';
-      style.height = 'auto';
+      style.width = "auto";
+      style.height = "auto";
     }
+    // 每次进来就恢复初始的 canChangeBox 和 自动的宽高
+    // text.set({
+    //   width: 0,
+    //   height: 0
+    // })
+    // text.data.canChangeBox = false
   }
 
   private isUpdatingPoints = false;
   private curveAmount = 0;
-  
   public updateChangeBoxBound(text: any): void {
-    if (text && text.__layout?.boxBounds) {
+    text &&
       text.set({
         width: text.__layout.boxBounds.width,
-        height: text.__layout.boxBounds.height
+        height: text.__layout.boxBounds.height,
       });
-    }
   }
-  
+  // 生命周期钩子：插件更新时，因为这是全局的生命周期所以判断一定要细致仔细
   public onUpdate(): void {
-    if (!this.editor?.element) return;
-    
-    const text = this.editor.element.findOne('HTMLText');
-    if (!text) return;
-    
-    const el = this.editor.element;
-    console.log('文本bound更新');
+    const { editor } = quillManager.getCanvas();
+    const text = editor._target.findOne("HTMLText");
+    const el = editor._target;
+    console.log("文本bound更新");
 
-    // 记录上一次的 curveAmount，只有变化时才触发
-    if (this.curveAmount === (text as any).curveAmount) return;
+    if (this.curveAmount == (text as any).curveAmount) return;
     if (this.isUpdatingPoints) return;
+    // 每次进来就恢复初始的 canChangeBox 和 自动的宽高
+    // text.set({
+    //   width: 0,
+    //   height: 0
+    // })
   }
 
+  // 生命周期钩子：插件卸载时解绑事件
   public onUnload(): void {
-    this.editor.off_(this.eventIds);
+    const { editor } = quillManager.getCanvas();
+    editor.off_(this.eventIds);
   }
 
+  // 生命周期钩子：销毁插件时清理资源
   public onDestroy(): void {}
 }

package/src/TextEditTool/utils.ts

@@ -1,5 +1,5 @@
-import { Text, Box, Path } from 'leafer-ui'
-import { HTMLText } from '@leafer-in/html' // 导入 html 插件
+import { HTMLText } from '@leafer-in/html'; // 导入 html 插件
+import { Box, Path } from 'leafer-ui'
 export function getArcRadius(fontSize: number, curveAmount: number): number {
   if (curveAmount === 0) return Infinity
   const theta = (330 * fontSize * 72) / 96
@@ -82,22 +82,105 @@ export const handleShowCurve = (element: any, op: boolean) => {
 
 // base 映射：只需把普通字符 -> 上标/下标（任意已有的上/下标字符）列出来一次
 const baseSuperscript: Record<string, string> = {
-  '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: 'ᵂ',
-  '+': '⁺', '-': '⁻', '=': '⁼', '(': '⁽', ')': '⁾'
+  '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: Record<string, string> = {
-  '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: 'ₓ',
-  '+': '₊', '-': '₋', '=': '₌', '(': '₍', ')': '₎',
+  '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: 'ₓ',
+  '+': '₊',
+  '-': '₋',
+  '=': '₌',
+  '(': '₍',
+  ')': '₎',
   // 常见希腊字母的下标形式（如需要可加入）
-  'β': 'ᵦ', 'γ': 'ᵧ', 'ρ': 'ᵨ', 'φ': 'ᵩ', 'χ': 'ᵪ'
+  β: 'ᵦ',
+  γ: 'ᵧ',
+  ρ: 'ᵨ',
+  φ: 'ᵩ',
+  χ: 'ᵪ'
 }
 
 // helper: 从 base 映射中收集所有已知上标/下标字符（用于反向映射）
@@ -110,13 +193,10 @@ function invertMap(map: Record<string, string>): Record<string, string> {
 }
 
 const knownSupers = invertMap(baseSuperscript) // '¹' -> '¹', 'ᵃ'->'ᵃ' ...
-const knownSubs = invertMap(baseSubscript)     // '₁' -> '₁', 'ₐ'->'ₐ' ...
+const knownSubs = invertMap(baseSubscript) // '₁' -> '₁', 'ₐ'->'ₐ' ...
 
 // 生成最终的“鲁棒”映射：接受普通字符、上标字符、下标字符，统一输出目标形式
-function buildSuperscriptMap(
-  baseSup: Record<string, string>,
-  baseSub: Record<string, string>
-): Record<string, string> {
+function buildSuperscriptMap(baseSup: Record<string, string>, baseSub: Record<string, string>): Record<string, string> {
   const out: Record<string, string> = {}
 
   // 普通字符 -> 上标
@@ -136,10 +216,7 @@ function buildSuperscriptMap(
   return out
 }
 
-function buildSubscriptMap(
-  baseSup: Record<string, string>,
-  baseSub: Record<string, string>
-): Record<string, string> {
+function buildSubscriptMap(baseSup: Record<string, string>, baseSub: Record<string, string>): Record<string, string> {
   const out: Record<string, string> = {}
 
   // 普通字符 -> 下标
@@ -177,16 +254,12 @@ export function toSubscript(input: string): string {
   return out
 }
 
-
 export const superscriptMapVal = Object.values(superscriptMap)
 
 export const subscriptMapVal = Object.values(subscriptMap)
 
 // 构建 normalMap：所有上标、下标字符 → 对应的普通 base 字符
-function buildNormalMap(
-  baseSup: Record<string, string>,
-  baseSub: Record<string, string>
-): Record<string, string> {
+function buildNormalMap(baseSup: Record<string, string>, baseSub: Record<string, string>): Record<string, string> {
   const normal: Record<string, string> = {}
 
   // 上标的 value → key（普通）
@@ -213,4 +286,3 @@ export function toNormal(input: string): string {
   }
   return out
 }
-