aldehyde 0.2.516 → 0.2.518

package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts

@@ -1,154 +1,154 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { PreviewDraw } from '../draws';
-
-const gifler = (window as any).gifler;
-
-export class AssetTool {
-  private render: Render;
-  // 同一个 svgXML 内容只转一次 Blob，避免重复创建 Blob URL
-  private svgBlobCache: Map<string, string> = new Map();
-  // 同地址 svg 只 fetch 一次，避免重复网络请求
-  private svgRawCache: Map<string, string> = new Map();
-
-  constructor(render: Render) {
-    this.render = render;
-  }
-
-  // 加载 svg xml（带 Blob 缓存）
-  loadSvgXML(svgXML: string) {
-    let url = this.svgBlobCache.get(svgXML);
-    if (!url) {
-      const blob = new Blob([svgXML], { type: 'image/svg+xml' });
-      url = URL.createObjectURL(blob);
-      this.svgBlobCache.set(svgXML, url);
-    }
-    return new Promise<Konva.Image>((resolve) => {
-      Konva.Image.fromURL(url, (imageNode) => {
-        imageNode.setAttrs({ svgXML } as any);
-        resolve(imageNode);
-      });
-    });
-  }
-
-  // 加载 svg（带 fetch 缓存 + Blob 缓存）
-  async loadSvg(src: string) {
-    let rawSvg = this.svgRawCache.get(src);
-    if (!rawSvg) {
-      rawSvg = await (await fetch(src)).text();
-      this.svgRawCache.set(src, rawSvg);
-    }
-    const svgXML = this.render.setSvgXMLSettings(rawSvg, this.render.getAssetSettings());
-    return this.loadSvgXML(svgXML);
-  }
-
-  // 加载 gif
-  async loadGif(src: string) {
-    return new Promise<Konva.Image>((resolve) => {
-      const img = document.createElement('img');
-      img.onload = () => {
-        const canvas = document.createElement('canvas');
-        canvas.width = img.naturalWidth;
-        canvas.height = img.naturalHeight;
-        const gif = gifler(src);
-        gif.frames(canvas, (ctx: CanvasRenderingContext2D, frame: any) => {
-          ctx.drawImage(frame.buffer, frame.x, frame.y);
-          this.render.layer.draw();
-          // 更新预览（layer）
-          this.render.draws[PreviewDraw.NAME]?.layer.draw();
-        });
-        img.remove();
-        // TODO: 拖动 gif 素材产生大量 JS event listeners
-        resolve(new Konva.Image({ image: canvas, gif: src }));
-      }
-      img.src = src;
-    });
-  }
-
-  // 加载图片
-  async loadImg(src: string) {
-    return new Promise<Konva.Image>((resolve) => {
-      Konva.Image.fromURL(src, (imageNode) => {
-        imageNode.setAttrs({ src } as any);
-        resolve(imageNode);
-      });
-    });
-  }
-
-  // 加载节点 json
-  async loadJson(src: string) {
-    try {
-      // 读取 json内容
-      const json = JSON.parse(await (await fetch(src)).text());
-      // 子素材
-      const assets = json.children;
-      // 刷新id
-      this.render.linkTool.jsonIdCover(assets);
-      // 生成空白 stage+layer
-      const stageEmpty = new Konva.Stage({ container: document.createElement('div') });
-      const layerEmpty = new Konva.Layer();
-      stageEmpty.add(layerEmpty);
-      // 空白 json 根
-      const jsonRoot = JSON.parse(stageEmpty.toJSON());
-      jsonRoot.children[0].children = [json];
-      // 重新加载 stage
-      const stageReload = Konva.Node.create(JSON.stringify(jsonRoot), document.createElement('div'));
-      // 目标 group（即 json 转化后的节点）
-      const groupTarget = stageReload.children[0].children[0] as Konva.Group;
-      // 释放内存
-      stageEmpty.destroy();
-      groupTarget.remove();
-      stageReload.destroy();
-      // 深度遍历加载子素材
-      const nodes: {
-        target: Konva.Stage | Konva.Layer | Konva.Group | Konva.Node
-        parent?: Konva.Stage | Konva.Layer | Konva.Group | Konva.Node
-      }[] = [{ target: groupTarget }];
-      while (nodes.length > 0) {
-        const item = nodes.shift();
-        if (item) {
-          const node = item.target;
-          if (node instanceof Konva.Image) {
-            if (node.attrs.svgXML) {
-              const n = await this.loadSvgXML(node.attrs.svgXML);
-              n.listening(false);
-              node.parent?.add(n);
-              node.remove();
-            } else if (node.attrs.gif) {
-              const n = await this.loadGif(node.attrs.gif);
-              n.listening(false);
-              node.parent?.add(n);
-              node.remove();
-            } else if (node.attrs.src) {
-              const n = await this.loadImg(node.attrs.src);
-              n.listening(false);
-              node.parent?.add(n);
-              node.remove();
-            }
-          }
-          if (node instanceof Konva.Stage || node instanceof Konva.Layer || node instanceof Konva.Group) {
-            nodes.push(
-              ...node.getChildren().map((o) => ({
-                target: o,
-                parent: node
-              }))
-            );
-          }
-        }
-      }
-
-      // 作用：点击空白区域可选择
-      const clickMask = new Konva.Rect({
-        id: 'click-mask',
-        width: groupTarget.width(),
-        height: groupTarget.height()
-      });
-      groupTarget.add(clickMask);
-      clickMask.zIndex(1)
-      return groupTarget;
-    } catch (e) {
-      console.error(e);
-      return new Konva.Group();
-    }
-  }
-}
+import Konva from 'konva';
+import { Render } from '../index';
+import { PreviewDraw } from '../draws';
+
+const gifler = (window as any).gifler;
+
+export class AssetTool {
+  private render: Render;
+  // 同一个 svgXML 内容只转一次 Blob，避免重复创建 Blob URL
+  private svgBlobCache: Map<string, string> = new Map();
+  // 同地址 svg 只 fetch 一次，避免重复网络请求
+  private svgRawCache: Map<string, string> = new Map();
+
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  // 加载 svg xml（带 Blob 缓存）
+  loadSvgXML(svgXML: string) {
+    let url = this.svgBlobCache.get(svgXML);
+    if (!url) {
+      const blob = new Blob([svgXML], { type: 'image/svg+xml' });
+      url = URL.createObjectURL(blob);
+      this.svgBlobCache.set(svgXML, url);
+    }
+    return new Promise<Konva.Image>((resolve) => {
+      Konva.Image.fromURL(url, (imageNode) => {
+        imageNode.setAttrs({ svgXML } as any);
+        resolve(imageNode);
+      });
+    });
+  }
+
+  // 加载 svg（带 fetch 缓存 + Blob 缓存）
+  async loadSvg(src: string) {
+    let rawSvg = this.svgRawCache.get(src);
+    if (!rawSvg) {
+      rawSvg = await (await fetch(src)).text();
+      this.svgRawCache.set(src, rawSvg);
+    }
+    const svgXML = this.render.setSvgXMLSettings(rawSvg, this.render.getAssetSettings());
+    return this.loadSvgXML(svgXML);
+  }
+
+  // 加载 gif
+  async loadGif(src: string) {
+    return new Promise<Konva.Image>((resolve) => {
+      const img = document.createElement('img');
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        const gif = gifler(src);
+        gif.frames(canvas, (ctx: CanvasRenderingContext2D, frame: any) => {
+          ctx.drawImage(frame.buffer, frame.x, frame.y);
+          this.render.layer.draw();
+          // 更新预览（layer）
+          this.render.draws[PreviewDraw.NAME]?.layer.draw();
+        });
+        img.remove();
+        // TODO: 拖动 gif 素材产生大量 JS event listeners
+        resolve(new Konva.Image({ image: canvas, gif: src }));
+      }
+      img.src = src;
+    });
+  }
+
+  // 加载图片
+  async loadImg(src: string) {
+    return new Promise<Konva.Image>((resolve) => {
+      Konva.Image.fromURL(src, (imageNode) => {
+        imageNode.setAttrs({ src } as any);
+        resolve(imageNode);
+      });
+    });
+  }
+
+  // 加载节点 json
+  async loadJson(src: string) {
+    try {
+      // 读取 json内容
+      const json = JSON.parse(await (await fetch(src)).text());
+      // 子素材
+      const assets = json.children;
+      // 刷新id
+      this.render.linkTool.jsonIdCover(assets);
+      // 生成空白 stage+layer
+      const stageEmpty = new Konva.Stage({ container: document.createElement('div') });
+      const layerEmpty = new Konva.Layer();
+      stageEmpty.add(layerEmpty);
+      // 空白 json 根
+      const jsonRoot = JSON.parse(stageEmpty.toJSON());
+      jsonRoot.children[0].children = [json];
+      // 重新加载 stage
+      const stageReload = Konva.Node.create(JSON.stringify(jsonRoot), document.createElement('div'));
+      // 目标 group（即 json 转化后的节点）
+      const groupTarget = stageReload.children[0].children[0] as Konva.Group;
+      // 释放内存
+      stageEmpty.destroy();
+      groupTarget.remove();
+      stageReload.destroy();
+      // 深度遍历加载子素材
+      const nodes: {
+        target: Konva.Stage | Konva.Layer | Konva.Group | Konva.Node
+        parent?: Konva.Stage | Konva.Layer | Konva.Group | Konva.Node
+      }[] = [{ target: groupTarget }];
+      while (nodes.length > 0) {
+        const item = nodes.shift();
+        if (item) {
+          const node = item.target;
+          if (node instanceof Konva.Image) {
+            if (node.attrs.svgXML) {
+              const n = await this.loadSvgXML(node.attrs.svgXML);
+              n.listening(false);
+              node.parent?.add(n);
+              node.remove();
+            } else if (node.attrs.gif) {
+              const n = await this.loadGif(node.attrs.gif);
+              n.listening(false);
+              node.parent?.add(n);
+              node.remove();
+            } else if (node.attrs.src) {
+              const n = await this.loadImg(node.attrs.src);
+              n.listening(false);
+              node.parent?.add(n);
+              node.remove();
+            }
+          }
+          if (node instanceof Konva.Stage || node instanceof Konva.Layer || node instanceof Konva.Group) {
+            nodes.push(
+              ...node.getChildren().map((o) => ({
+                target: o,
+                parent: node
+              }))
+            );
+          }
+        }
+      }
+
+      // 作用：点击空白区域可选择
+      const clickMask = new Konva.Rect({
+        id: 'click-mask',
+        width: groupTarget.width(),
+        height: groupTarget.height()
+      });
+      groupTarget.add(clickMask);
+      clickMask.zIndex(1)
+      return groupTarget;
+    } catch (e) {
+      console.error(e);
+      return new Konva.Group();
+    }
+  }
+}