update: 更新HTML工具逻辑

packages/core/src/customs/html.ts

@@ -63,7 +63,6 @@ export class Html extends Konva.Shape {
     const attrs = tr.decompose();
 
     this.htmlDiv.style.position = 'absolute';
-    this.htmlDiv.style.zIndex = '10';
     this.htmlDiv.style.top = '0px';
     this.htmlDiv.style.left = '0px';
     this.htmlDiv.style.width = `${this.width() * attrs.scaleX}px`;

packages/tools/src/html/index.ts

@@ -1,7 +1,65 @@
-import { Tool } from '@pictode/core';
+import { Html, HtmlConfig, Tool, ToolEvent, ToolHooks, util } from '@pictode/core';
+
+export type HtmlToolConfig = Partial<HtmlConfig>;
+
+export interface HtmlToolOptions {
+  config?: HtmlToolConfig;
+  hooks?: ToolHooks;
+}
 
 export class HtmlTool implements Tool {
   public name: string = 'htmlTool';
+  public config?: HtmlToolConfig;
+  public hooks?: ToolHooks;
+  private html: Html | null = null;
+  private startPointer: util.Point = new util.Point(0, 0);
+
+  constructor({ config, hooks }: HtmlToolOptions) {
+    this.config = config;
+    this.hooks = hooks;
+  }
+
+  public mousedown({ app }: ToolEvent) {
+    if (this.html) {
+      return;
+    }
+    this.startPointer.clone(app.pointer);
+    this.html = new Html({
+      strokeScaleEnabled: false,
+      ...this.config,
+    });
+    this.html.setPosition(this.startPointer);
+    this.html.width(0);
+    this.html.height(0);
+    app.add(this.html);
+    this.hooks?.onStartDrawing?.(app, this.html);
+  }
+
+  public mousemove({ app }: ToolEvent) {
+    if (!this.html) {
+      return;
+    }
+    this.html.setPosition(
+      new util.Point(Math.min(this.startPointer.x, app.pointer.x), Math.min(this.startPointer.y, app.pointer.y))
+    );
+    this.html.width(Math.abs(app.pointer.x - this.startPointer.x));
+    this.html.height(Math.abs(app.pointer.y - this.startPointer.y));
+    app.render();
+  }
+
+  public mouseup({ app, pointer }: ToolEvent) {
+    if (!this.html) {
+      return;
+    }
+    if (this.startPointer.eq(pointer)) {
+      this.html?.destroy();
+      this.html = null;
+      return;
+    }
+    this.hooks?.onCompleteDrawing?.(app, this.html);
+    this.html = null;
+    this.startPointer.setXY(0, 0);
+  }
 }
 
 export default HtmlTool;

pictode/index.html

@@ -19,9 +19,9 @@
   <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>
   <script
-    src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_28449_48.34f83713a1d0bd3fb2ca87c936cccf2e.js"></script>
+    src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_28449_49.76219aa4ea73a3e03149f65887885ad7.js"></script>
   <script
-    src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_28449_48.34f83713a1d0bd3fb2ca87c936cccf2e.es5.js"></script>
+    src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_28449_49.76219aa4ea73a3e03149f65887885ad7.es5.js"></script>
 </body>
 
 </html>

pictode/src/locales/index.ts

@@ -15,6 +15,7 @@ export const languages = [
 ];
 
 export const i18n = createI18n({
+  globalInjection: true,
   legacy: false,
   locale: navigator.language,
   messages: languages.reduce((messages, { value, message }) => ({ ...messages, [value]: message }), {}),

pictode/src/view/canvas/components/Tools.vue

@@ -6,6 +6,7 @@ import {
   DrawingTool,
   EllipseTool,
   EraserTool,
+  HtmlTool,
   ImageTool,
   LineTool,
   RectTool,
@@ -28,6 +29,17 @@ interface ToolInfo {
   tool: Tool | (() => Tool | Promise<Tool>);
 }
 
+const getTestElement = (): HTMLElement => {
+  const testElement = document.createElement('iframe');
+  testElement.src = 'https://www.python100.com/html/83349.html';
+
+  // 添加一些样式以进行可视化测试
+  testElement.style.width = '100%';
+  testElement.style.height = '100%';
+  testElement.style.boxSizing = 'border-box';
+  return testElement;
+};
+
 const selectTool = new SelectTool({
   hooks: {
     onActive(app) {
@@ -67,6 +79,30 @@ const tools: ToolInfo[] = [
         },
       }),
   },
+  {
+    icon: 'html',
+    name: 'htmlTool',
+    title: 'html',
+    tool: () =>
+      new HtmlTool({
+        config: {
+          content: getTestElement(),
+        },
+        hooks: {
+          onActive(app) {
+            app.containerElement.style.cursor = 'crosshair';
+            app.cancelSelect();
+          },
+          onInactive(app) {
+            app.containerElement.style.cursor = `default`;
+          },
+          onCompleteDrawing(app, node) {
+            currentTool.value = selectTool.name;
+            nextTick(() => app.select(node));
+          },
+        },
+      }),
+  },
   {
     icon: 'oval',
     name: 'ellipseTool',

pictode/src/view/canvas/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
-import { Html } from '@pictode/core';
 import { useCommandComponent } from '@pictode/vue-aide';
 
 import Button from '@/components/Button.vue';
@@ -33,24 +32,6 @@ const displayScale = computed<string>(() => {
 
 const hotKeyList = useCommandComponent(HotKeyList);
 
-const testElement = document.createElement('iframe');
-testElement.src = 'https://www.python100.com/html/83349.html';
-
-// 添加一些样式以进行可视化测试
-testElement.style.width = '100%';
-testElement.style.height = '100%';
-testElement.style.boxSizing = 'border-box';
-
-const htmlContainer = new Html({
-  x: 10,
-  y: 20,
-  width: 500,
-  height: 500,
-  content: testElement,
-});
-
-app._add(htmlContainer);
-
 const onClickZoomIn = () => {
   app.scaleTo(scale.value + app.config.mousewheel.factor);
 };
@@ -84,7 +65,8 @@ onMounted(() => {
       <section class="row-start-1 col-start-2 justify-self-stretch">
         <Tools
           class="pointer-events-auto w-full rounded-lg p-2 ring-1 ring-slate-950 dark:ring-navyBlue-100 bg-white dark:bg-navyBlue-200"
-        ></Tools>
+        >
+        </Tools>
       </section>
       <section class="row-start-1 col-start-3 justify-self-end">
         <div
@@ -129,7 +111,8 @@ onMounted(() => {
       <section class="row-start-2 col-start-3 justify-self-end">
         <PropertyPanel
           class="p-4 w-56 shadow-md rounded-lg ring-1 ring-slate-950 dark:ring-navyBlue-100 bg-white dark:bg-navyBlue-200 pointer-events-auto"
-        ></PropertyPanel>
+        >
+        </PropertyPanel>
       </section>
       <section class="row-start-3 col-start-1 justify-self-start flex flex-row gap-2">
         <div