aldehyde 0.2.489 → 0.2.491

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

@@ -1,89 +1,89 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { AlignType } from '../types';
-import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
-
-// 工具栏对齐
-
-export class AlignTool {
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-
-  getAlignRect(node: Konva.Node | Konva.Transformer) {
-    const stageState = this.render.getStageState();
-    let width = 0, height = 0, x = 0, y = 0;
-    const result = node.getClientRect();
-    // 转为 逻辑觉尺寸
-    [width, height, x, y] = [
-      this.render.toStageValue(result.width),
-      this.render.toStageValue(result.height),
-      this.render.toStageValue(result.x - stageState.x),
-      this.render.toStageValue(result.y - stageState.y)
-    ];
-    return { width, height, x, y };
-  }
-
-  // 对齐参考点
-  getAlignPoints(node?: Konva.Node | Konva.Transformer): { [index: string]: number } {
-    let width = 0, height = 0, x = 0, y = 0;
-    if (node !== void 0) {
-      // 选择器 / 基于节点 逻辑觉尺寸
-      const rect = this.getAlignRect(node);
-      [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
-    } else {   // 默认为选择器
-      return this.getAlignPoints(this.render.transformer);
-    }
-    return {
-      Middle: x + width / 2,
-      Left: x,
-      Right: x + width,
-      Center: y + height / 2,
-      Top: y,
-      Bottom: y + height
-    };
-  }
-
-  align(type: AlignType, target?: Konva.Node) {
-    // 对齐参考点（所有）
-    const points = this.getAlignPoints(target);
-    // 对齐参考点
-    const point = points[type];
-    // 需要移动的节点
-    const nodes = this.render.transformer.nodes().filter((node) => node !== target);
-    // 移动逻辑
-    for (const node of nodes) {
-      // 逻辑觉尺寸
-      const rect = this.getAlignRect(node);
-      const [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
-      switch (type) {
-        case "Middle":
-        case "Left":
-        case "Right":
-          {
-            const cx = type === "Middle" ? x + width / 2 : type === "Left" ? x : x + width;
-            node.x(node.x() + (point - cx));
-          }
-          break;
-        case "Center":
-        case "Top":
-        case "Bottom":
-          {
-            const cy = type === "Center" ? y + height / 2 : type === "Top" ? y : y + height;
-            node.y(node.y() + (point - cy));
-          }
-          break;
-      }
-    }
-    // 更新历史
-    this.render.updateHistory();
-    // 重绘
-    this.render.redraw([
-      GraphDraw.NAME,
-      LinkDraw.NAME,
-      RulerDraw.NAME,
-      PreviewDraw.NAME
-    ]);
-  }
-}
+import Konva from 'konva';
+import { Render } from '../index';
+import { AlignType } from '../types';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
+
+// 工具栏对齐
+
+export class AlignTool {
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  getAlignRect(node: Konva.Node | Konva.Transformer) {
+    const stageState = this.render.getStageState();
+    let width = 0, height = 0, x = 0, y = 0;
+    const result = node.getClientRect();
+    // 转为 逻辑觉尺寸
+    [width, height, x, y] = [
+      this.render.toStageValue(result.width),
+      this.render.toStageValue(result.height),
+      this.render.toStageValue(result.x - stageState.x),
+      this.render.toStageValue(result.y - stageState.y)
+    ];
+    return { width, height, x, y };
+  }
+
+  // 对齐参考点
+  getAlignPoints(node?: Konva.Node | Konva.Transformer): { [index: string]: number } {
+    let width = 0, height = 0, x = 0, y = 0;
+    if (node !== void 0) {
+      // 选择器 / 基于节点 逻辑觉尺寸
+      const rect = this.getAlignRect(node);
+      [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
+    } else {   // 默认为选择器
+      return this.getAlignPoints(this.render.transformer);
+    }
+    return {
+      Middle: x + width / 2,
+      Left: x,
+      Right: x + width,
+      Center: y + height / 2,
+      Top: y,
+      Bottom: y + height
+    };
+  }
+
+  align(type: AlignType, target?: Konva.Node) {
+    // 对齐参考点（所有）
+    const points = this.getAlignPoints(target);
+    // 对齐参考点
+    const point = points[type];
+    // 需要移动的节点
+    const nodes = this.render.transformer.nodes().filter((node) => node !== target);
+    // 移动逻辑
+    for (const node of nodes) {
+      // 逻辑觉尺寸
+      const rect = this.getAlignRect(node);
+      const [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
+      switch (type) {
+        case "Middle":
+        case "Left":
+        case "Right":
+          {
+            const cx = type === "Middle" ? x + width / 2 : type === "Left" ? x : x + width;
+            node.x(node.x() + (point - cx));
+          }
+          break;
+        case "Center":
+        case "Top":
+        case "Bottom":
+          {
+            const cy = type === "Center" ? y + height / 2 : type === "Top" ? y : y + height;
+            node.y(node.y() + (point - cy));
+          }
+          break;
+      }
+    }
+    // 更新历史
+    this.render.updateHistory();
+    // 重绘
+    this.render.redraw([
+      GraphDraw.NAME,
+      LinkDraw.NAME,
+      RulerDraw.NAME,
+      PreviewDraw.NAME
+    ]);
+  }
+}

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();
+    }
+  }
+}