feat: 修改默认需求

public/icons/cad-chuang.svg

@@ -1 +1,7 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192 416v32h640v-32h192v192H0v-192h192z m640 128H192v32h640v-32z m0-64H192v32h640v-32z" fill="#8a8a8a" /></svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M192 416v32h640v-32h192v192H0v-192h192z m640 128H192v32h640v-32z m0-64H192v32h640v-32z"
+    fill="#000000" />
+</svg>

src/core/components/text/index.ts

@@ -105,8 +105,8 @@ export const getWidth = (data: TextData, scaleX: number) => {
   if ("width" in data) {
     width = Math.max(data.width! * scaleX, minWidth);
   } else {
-    console.log(minWidth)
-    width = Math.max(minWidth * scaleX, minWidth);
+    const len = Math.max(...data.content.split('\n').map(item => item.length))
+    width = Math.max(minWidth * scaleX * len, minWidth);
   }
   return width;
 };

src/core/components/text/text.vue

@@ -107,7 +107,9 @@ const { shape, tData, data, operateMenus, describes } = useComponentStatus<
 watch(
   () => data.value.fontSize,
   () => {
-    data.value.width = getWidth(data.value, 1);
+    if (data.value.width) {
+      data.value.width = getWidth(data.value, 1);
+    }
     const $shape = shape.value?.getNode();
     $shape && $shape.fire("bound-change");
     $shape?.draw();

src/core/hook/use-global-vars.ts

@@ -26,6 +26,7 @@ import { Shape, ShapeConfig } from "konva/lib/Shape";
 import { ElLoading } from "element-plus";
 import { PropertyDescribes } from "../html-mount/propertys/index.ts";
 import { ShapeType } from "@/index.ts";
+import { isEditableElement } from "@/utils/dom.ts";
 
 export const useRendererInstance = () => {
   let instance = getCurrentInstance()!;
@@ -269,7 +270,7 @@ export const useDownKeys = installGlobalVar(() => {
   }
   const cleanup = mergeFuns(
     listener(window, "keydown", (ev) => {
-      if (ev.target === document.body) {
+      if (!isEditableElement(ev.target as HTMLElement)) {
         keyKeys.add(ev.key);
         evHandler(ev, keyKeys)
       }

src/core/hook/use-paste.ts

@@ -1,32 +1,39 @@
 import { listener } from "@/utils/event";
 import { installGlobalVar, stackVar, useStage } from "./use-global-vars";
 import { Pos } from "@/utils/math";
+import { isEditableElement } from "@/utils/dom";
 
 type PasteHandlers = Record<
   string,
-  | { handler: (position: Pos, data: string, meta: string) => void; type: "string" }
+  | {
+      handler: (position: Pos, data: string, meta: string) => void;
+      type: "string";
+    }
   | { handler: (position: Pos, data: File, meta: string) => void; type: "file" }
 >;
 export const usePaste = installGlobalVar(() => {
   const stage = useStage();
   const handlers = stackVar<PasteHandlers>({});
   const pasteHandler = (ev: ClipboardEvent) => {
+    if (isEditableElement(ev.target as HTMLElement)) {
+      return;
+    }
     const pos = stage.value?.getNode().pointerPos;
     const clipboardData = ev.clipboardData;
     if (!clipboardData || !pos) return;
 
     ev.preventDefault();
     for (const item of clipboardData.items) {
-      const handMetas = Object.keys(handlers.value)
+      const handMetas = Object.keys(handlers.value);
       for (const handMeta of handMetas) {
         if (item.type.includes(handMeta)) {
-          const handleItem = handlers.value[handMeta]
-          if (handleItem.type === 'file') {
-            const file = item.getAsFile()
-            file && handleItem.handler(pos, file, item.type)
+          const handleItem = handlers.value[handMeta];
+          if (handleItem.type === "file") {
+            const file = item.getAsFile();
+            file && handleItem.handler(pos, file, item.type);
           } else {
             item.getAsString((str) => {
-              str.trim() && handleItem.handler(pos, str.trim(), item.type)
+              str.trim() && handleItem.handler(pos, str.trim(), item.type);
             });
           }
         }
@@ -34,11 +41,11 @@ export const usePaste = installGlobalVar(() => {
     }
   };
 
-  const stop = listener(window, "paste", pasteHandler)
+  const stop = listener(window, "paste", pasteHandler);
   return {
     var: handlers,
     onDestroy: () => {
-      stop()
-    }
+      stop();
+    },
   };
 });

src/core/hook/use-status.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, watchEffect } from "vue";
+import { computed, reactive } from "vue";
 import { installGlobalVar, stackVar, useDownKeys, useStage } from "./use-global-vars";
 import { Mode } from "@/constant/mode";
 

src/utils/dom.ts

@@ -114,3 +114,33 @@ export const grayscaleImage = (
     }, format);
   });
 };
+
+export const isEditableElement = (target: HTMLElement): boolean => {
+  // 检查常规输入元素
+  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName.toUpperCase())) {
+    return true;
+  }
+  
+  // 检查可编辑的div或其他元素
+  if (target.isContentEditable) {
+    return true;
+  }
+  
+  // 检查角色属性为文本输入的元素
+  const role = target.getAttribute('role');
+  if (role === 'textbox' || role === 'textarea') {
+    return true;
+  }
+  
+  // 检查是否是富文本编辑器中的元素
+  let parent = target.parentElement;
+  while (parent) {
+    if (parent.isContentEditable) {
+      return true;
+    }
+    parent = parent.parentElement;
+  }
+  
+  return false;
+}
+