@qy_better_lib/hooks 0.1.10 → 0.2.1

package/lib/use-image/index.js

@@ -1,72 +1,192 @@
-import z from "./canvastoDataURL.js";
-import { EImageType as h, checkImageType as j } from "./type.js";
-import L from "./dataURLtoFile.js";
-import N from "./dataURLtoImage.js";
-import R from "./filetoDataURL.js";
-import U from "./imagetoCanvas.js";
-async function B(t, a = {}) {
-  if (!(t instanceof Blob))
-    throw new Error(
-      "compress(): First arg must be a Blob object or a File object."
-    );
-  if (typeof a != "object" && (a = Object.assign({
-    quality: a
-  })), a.quality = Number(a.quality), Number.isNaN(a.quality))
-    return t;
-  const e = await R(t);
-  let i = e.split(",")[0].match(/:(.*?);/)?.[1], m = h.JPEG;
-  j(a.type) && (m = a.type, i = a.type);
-  const o = await N(e), p = await U(o, Object.assign({}, a)), y = await z(p, a.quality, m), s = await L(y, i);
-  return s.size > t.size ? t : s;
-}
-async function M(t, a = {}) {
-  if (!(t instanceof Blob))
-    throw new Error(
-      "compressAccurately(): First arg must be a Blob object or a File object."
+import { download_file, to_base64, compress_image } from "@qy_better_lib/core";
+import { EImageType } from "./type.js";
+function use_image() {
+  function check_image_type(type) {
+    return Object.values(EImageType).includes(type);
+  }
+  async function canvas_to_data_url(canvas, quality = 0.92, type = EImageType.JPEG) {
+    if (!check_image_type(type)) {
+      type = EImageType.JPEG;
+    }
+    return canvas.toDataURL(type, quality);
+  }
+  async function canvas_to_file(canvas, file_name = "image", quality = 0.92, type = EImageType.JPEG) {
+    const data_url = await canvas_to_data_url(canvas, quality, type);
+    return data_url_to_file(data_url, type, file_name);
+  }
+  async function data_url_to_file(data_url, type = EImageType.JPEG, file_name = "image") {
+    if (!check_image_type(type)) {
+      type = EImageType.JPEG;
+    }
+    const arr = data_url.split(",");
+    const mime = arr[0].match(/:(.*?);/)?.[1] || type;
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    const extension = mime.split("/")[1];
+    const full_name = `${file_name}.${extension}`;
+    return new File([u8arr], full_name, { type: mime });
+  }
+  async function data_url_to_image(data_url) {
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => resolve(image);
+      image.onerror = reject;
+      image.src = data_url;
+    });
+  }
+  function download_file$1(blob, file_name = "download") {
+    const url = URL.createObjectURL(blob);
+    download_file({ path: url, name: file_name });
+    URL.revokeObjectURL(url);
+  }
+  async function file_to_data_url(file) {
+    const result = await to_base64(file);
+    if (!result) {
+      throw new Error("转换文件为DataURL失败");
+    }
+    return result;
+  }
+  async function image_to_canvas(image, config = {}) {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("创建Canvas上下文失败");
+    }
+    const width = config.width || image.width;
+    const height = config.height || image.height;
+    const scale = config.scale || 1;
+    canvas.width = width * scale;
+    canvas.height = height * scale;
+    context.scale(scale, scale);
+    context.drawImage(image, 0, 0, width, height);
+    return canvas;
+  }
+  async function url_to_blob(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`获取图片失败: ${response.statusText}`);
+    }
+    return response.blob();
+  }
+  async function url_to_image(url) {
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => resolve(image);
+      image.onerror = reject;
+      image.src = url;
+    });
+  }
+  async function compress(file, config = {}) {
+    if (!(file instanceof Blob)) {
+      throw new Error("compress(): 第一个参数必须是Blob对象或File对象");
+    }
+    const quality = Math.max(0, Math.min(1, isNaN(Number(config.quality)) ? 0.92 : Number(config.quality)));
+    config.quality = quality;
+    const data_url = await file_to_data_url(file);
+    const original_mime = data_url.split(",")[0].match(/:(.*?);/)?.[1];
+    let mime = EImageType.JPEG;
+    if (check_image_type(config.type)) {
+      mime = config.type;
+    }
+    const image = await data_url_to_image(data_url);
+    const canvas = await image_to_canvas(image, config);
+    const compress_data_url = await canvas_to_data_url(canvas, config.quality, mime);
+    const compress_file = await data_url_to_file(compress_data_url, original_mime || mime);
+    if (compress_file.size > file.size) {
+      return file;
+    }
+    return compress_file;
+  }
+  async function compress_accurately(file, config = {}) {
+    if (!(file instanceof Blob)) {
+      throw new Error("compressAccurately(): 第一个参数必须是Blob对象或File对象");
+    }
+    const size = Math.max(0, isNaN(Number(config.size)) ? 0 : Number(config.size));
+    config.size = size;
+    const accuracy = Math.max(0.8, Math.min(0.99, isNaN(Number(config.accuracy)) ? 0.95 : Number(config.accuracy)));
+    config.accuracy = accuracy;
+    if (isNaN(config.size)) {
+      return file;
+    }
+    if (config.size * 1024 > file.size) {
+      return file;
+    }
+    if (!config.accuracy || config.accuracy < 0.8 || config.accuracy > 0.99) {
+      config.accuracy = 0.95;
+    }
+    const result_size = {
+      max: config.size * (2 - config.accuracy) * 1024,
+      accurate: config.size * 1024,
+      min: config.size * config.accuracy * 1024
+    };
+    const data_url = await file_to_data_url(file);
+    const original_mime = data_url.split(",")[0].match(/:(.*?);/)?.[1];
+    let mime = EImageType.JPEG;
+    if (check_image_type(config.type)) {
+      mime = config.type;
+    }
+    const image = await data_url_to_image(data_url);
+    const canvas = await image_to_canvas(image, config);
+    const proportion = 0.75;
+    let image_quality = 1;
+    let compress_data_url = "";
+    const temp_data_urls = [];
+    for (let x = 1; x <= 7; x++) {
+      compress_data_url = await canvas_to_data_url(canvas, image_quality, mime);
+      const calculation_size = compress_data_url.length * proportion;
+      if (x === 7) {
+        if (result_size.max < calculation_size || result_size.min > calculation_size) {
+          compress_data_url = [compress_data_url, ...temp_data_urls].filter(Boolean).sort(
+            (a, b) => Math.abs(a.length * proportion - result_size.accurate) - Math.abs(b.length * proportion - result_size.accurate)
+          )[0];
+        }
+        break;
+      }
+      if (result_size.max < calculation_size) {
+        temp_data_urls[1] = compress_data_url;
+        image_quality -= 0.5 ** (x + 1);
+      } else if (result_size.min > calculation_size) {
+        temp_data_urls[0] = compress_data_url;
+        image_quality += 0.5 ** (x + 1);
+      } else {
+        break;
+      }
+    }
+    const compress_file = await data_url_to_file(
+      compress_data_url,
+      original_mime || mime
     );
-  if (typeof a != "object" && (a = Object.assign({
-    size: a
-  })), a.size = Number(a.size), Number.isNaN(a.size) || a.size * 1024 > t.size)
-    return t;
-  a.accuracy = Number(a.accuracy), (!a.accuracy || a.accuracy < 0.8 || a.accuracy > 0.99) && (a.accuracy = 0.95);
-  const e = {
-    max: a.size * (2 - a.accuracy) * 1024,
-    accurate: a.size * 1024,
-    min: a.size * a.accuracy * 1024
-  }, i = await R(t);
-  let m = i.split(",")[0].match(/:(.*?);/)?.[1], o = h.JPEG;
-  j(a.type) && (o = a.type, m = a.type);
-  const p = await N(i), y = await U(p, Object.assign({}, a)), s = 0.75;
-  let l = 1, r;
-  const b = new Array(2);
-  for (let c = 1; c <= 7; c++) {
-    r = await z(y, l, o);
-    const u = r.length * s;
-    if (c === 7) {
-      (e.max < u || e.min > u) && (r = [r, ...b].filter((n) => n).sort(
-        (n, F) => Math.abs(n.length * s - e.accurate) - Math.abs(F.length * s - e.accurate)
-      )[0]);
-      break;
-    }
-    if (e.max < u)
-      b[1] = r, l -= 0.5 ** (c + 1);
-    else if (e.min > u)
-      b[0] = r, l += 0.5 ** (c + 1);
-    else
-      break;
+    if (compress_file.size > file.size) {
+      return file;
+    }
+    return compress_file;
+  }
+  async function compress_image$1(file, max_width = 800, max_height = 800, quality = 0.8) {
+    return compress_image(file, max_width, max_height, quality);
   }
-  const w = await L(
-    r,
-    m
-  );
-  return w.size > t.size ? t : w;
+  return {
+    // 压缩功能
+    compress,
+    compress_accurately,
+    compress_image: compress_image$1,
+    // 转换功能
+    canvas_to_data_url,
+    canvas_to_file,
+    data_url_to_file,
+    data_url_to_image,
+    file_to_data_url,
+    image_to_canvas,
+    url_to_blob,
+    url_to_image,
+    // 工具功能
+    download_file: download_file$1
+  };
 }
 export {
-  z as canvastoDataURL,
-  B as compress,
-  M as compressAccurately,
-  L as dataURLtoFile,
-  N as dataURLtoImage,
-  R as filetoDataURL,
-  U as imagetoCanvas
+  EImageType,
+  use_image
 };

package/lib/use-image/type.d.ts

@@ -1,9 +1,9 @@
 export declare enum EImageType {
-    "PNG" = "image/png",
-    "JPEG" = "image/jpeg",
-    "GIF" = "image/gif"
+    PNG = "image/png",
+    JPEG = "image/jpeg",
+    GIF = "image/gif"
 }
-interface IBaseConfig {
+export interface IBaseConfig {
     [key: string]: any;
 }
 export interface Image2CanvasConfig extends IBaseConfig {
@@ -12,14 +12,12 @@ export interface Image2CanvasConfig extends IBaseConfig {
     scale?: number;
     orientation?: number;
 }
-export interface ICompressConfig extends Image2CanvasConfig {
+export type ICompressConfig = Image2CanvasConfig & {
     quality?: number;
     type?: EImageType;
-}
-export interface compressAccuratelyConfig extends Image2CanvasConfig {
+};
+export type CompressAccuratelyConfig = Image2CanvasConfig & {
     size?: number;
     accuracy?: number;
     type?: EImageType;
-}
-export declare function checkImageType(type: EImageType): boolean;
-export {};
+};

package/lib/use-image/type.js

@@ -1,8 +1,9 @@
-var i = /* @__PURE__ */ ((e) => (e.PNG = "image/png", e.JPEG = "image/jpeg", e.GIF = "image/gif", e))(i || {});
-function a(e) {
-  return ["image/png", "image/jpeg", "image/gif"].some((g) => g === e);
-}
+var EImageType = /* @__PURE__ */ ((EImageType2) => {
+  EImageType2["PNG"] = "image/png";
+  EImageType2["JPEG"] = "image/jpeg";
+  EImageType2["GIF"] = "image/gif";
+  return EImageType2;
+})(EImageType || {});
 export {
-  i as EImageType,
-  a as checkImageType
+  EImageType
 };

package/lib/use-layout-flow/index.d.ts

@@ -1,45 +1,19 @@
-import { Cell, Node, Options, Edge } from '@antv/x6';
-interface LayoutFlow {
-    /**画布配置 */
-    option: Partial<Options.Manual>;
-    /**数据属性配置 */
-    props?: LayoutFlowProp;
-}
-type LayoutFlowProp = {
-    key: string | number;
-    children: string;
-};
-/**自动排布配置 */
-export type LayoutFlowNodeOption = {
-    /**节点宽度 */
-    node_w: number;
-    /**节点高度 */
-    node_h: number;
-    /**节点间距 */
-    nodesep: number;
-    /**层间距 */
-    ranksep: number;
-};
-/**自动排布类型 */
-type LayoutDirection = 'LR' | 'RL' | 'TB' | 'BT';
-type EventOption = {
-    [name: string]: (args: Record<string, any>) => void;
-};
-type CustomElementOption = {
-    nodes: Record<string, any>;
-    edges: Record<string, any>;
-};
-/**自动排布流程 */
-export declare function useLayoutFlow(options: LayoutFlow): {
-    init: (container: HTMLElement) => void;
-    add_graph_elements: (elements: Cell[]) => void;
-    layout: (cfg: LayoutFlowNodeOption, dir?: LayoutDirection) => void;
+import { LayoutFlow, LayoutFlowNodeOption, LayoutDirection, EventOption, CustomElementOption } from './type';
+/**
+ * 自动排布流程
+ * @param options 布局配置选项
+ * @returns 流程布局方法
+ * @description 适用于需要自动布局的流程图场景，支持多种布局方向和自定义元素
+ */
+export declare function use_layout_flow(options: LayoutFlow): {
+    init: (container: HTMLElement) => Promise<boolean>;
+    add_graph_elements: (elements: any[]) => void;
+    layout: (cfg: LayoutFlowNodeOption, dir?: LayoutDirection) => Promise<boolean>;
     center_content: (padding: number) => void;
-    createNodes: (node_options: Node.Metadata[]) => Node[];
-    createEdges: (edge_options: Edge.Metadata[]) => Edge[];
+    create_nodes: (node_options: any[]) => any[];
+    create_edges: (edge_options: any[]) => any[];
     register_event: (event_options: EventOption) => void;
-    register_custom_elements: (el_options: CustomElementOption) => void;
+    register_custom_elements: (el_options: CustomElementOption) => Promise<boolean>;
     get_nodes: () => any;
     clear: () => void;
 };
-export {};

package/lib/use-layout-flow/index.js

@@ -0,0 +1,284 @@
+import { deep_assign } from "@qy_better_lib/core";
+function use_layout_flow(options) {
+  let graph = void 0;
+  let Graph;
+  let dagre;
+  async function load_dependencies() {
+    try {
+      if (!Graph || !dagre) {
+        const x6Module = await import("@antv/x6");
+        Graph = x6Module.Graph;
+        const dagreModule = await import("dagre");
+        dagre = dagreModule.default || dagreModule;
+      }
+      return true;
+    } catch (error) {
+      console.error("加载依赖失败:", error);
+      console.error("请安装必要的依赖: npm install @antv/x6 dagre");
+      return false;
+    }
+  }
+  const default_option = {
+    panning: true,
+    // 画布可拖动
+    interacting: false,
+    // 边、节点是否可以拖动大小调整等
+    mousewheel: {
+      enabled: true
+      // 开启滚轮交互
+    },
+    scaling: { min: 0.1, max: 10 }
+  };
+  async function init(container) {
+    if (!container) {
+      throw new Error("init(): 容器元素不能为空");
+    }
+    if (!await load_dependencies()) {
+      return false;
+    }
+    const flow_options = deep_assign(default_option, options);
+    try {
+      graph = new Graph({ container, ...flow_options });
+      return true;
+    } catch (error) {
+      console.error("初始化画布失败:", error);
+      return false;
+    }
+  }
+  function check_graph_initialized() {
+    if (!graph) {
+      console.error("错误：画布未初始化，请先调用 init() 方法");
+      return false;
+    }
+    return true;
+  }
+  function add_graph_elements(elements) {
+    if (!check_graph_initialized()) return;
+    if (!Array.isArray(elements)) {
+      console.error("错误：elements 参数必须是数组");
+      return;
+    }
+    graph.resetCells(elements);
+  }
+  function build_dag_graph(nodes, edges, cfg, dir) {
+    const { node_w, node_h, nodesep, ranksep } = cfg;
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({ rankdir: dir, nodesep, ranksep });
+    g.setDefaultEdgeLabel(() => ({}));
+    const width = node_w;
+    const height = node_h;
+    nodes.forEach((node) => {
+      g.setNode(node.id, { width, height });
+    });
+    edges.forEach((edge) => {
+      const source = edge.getSource();
+      const target = edge.getTarget();
+      if (source && target && source.cell && target.cell) {
+        g.setEdge(source.cell, target.cell);
+      }
+    });
+    return g;
+  }
+  function update_node_positions(g) {
+    g.nodes().forEach((id) => {
+      const node = graph.getCellById(id);
+      if (node) {
+        const pos = g.node(id);
+        node.position(pos.x, pos.y);
+      }
+    });
+  }
+  function update_edge_vertices(edges, dir) {
+    edges.forEach((edge) => {
+      try {
+        const source = edge.getSourceNode();
+        const target = edge.getTargetNode();
+        if (!source || !target) return;
+        const source_bbox = source.getBBox();
+        const target_bbox = target.getBBox();
+        if ((dir === "LR" || dir === "RL") && source_bbox.y !== target_bbox.y) {
+          const gap = dir === "LR" ? target_bbox.x - source_bbox.x - source_bbox.width : -source_bbox.x + target_bbox.x + target_bbox.width;
+          const fix = dir === "LR" ? source_bbox.width : 0;
+          const x = source_bbox.x + fix + gap / 2;
+          edge.setVertices([
+            { x, y: source_bbox.center.y },
+            { x, y: target_bbox.center.y }
+          ]);
+        } else if ((dir === "TB" || dir === "BT") && source_bbox.x !== target_bbox.x) {
+          const gap = dir === "TB" ? target_bbox.y - source_bbox.y - source_bbox.height : -source_bbox.y + target_bbox.y + target_bbox.height;
+          const fix = dir === "TB" ? source_bbox.height : 0;
+          const y = source_bbox.y + fix + gap / 2;
+          edge.setVertices([
+            { x: source_bbox.center.x, y },
+            { x: target_bbox.center.x, y }
+          ]);
+        } else {
+          edge.setVertices([]);
+        }
+      } catch (error) {
+        console.error("处理边布局时出错:", error);
+      }
+    });
+  }
+  async function layout(cfg, dir = "LR") {
+    if (!check_graph_initialized()) return false;
+    if (!cfg) {
+      console.error("错误：布局配置不能为空");
+      return false;
+    }
+    if (!await load_dependencies()) {
+      return false;
+    }
+    const { node_w, node_h, nodesep, ranksep } = cfg;
+    if (typeof node_w !== "number" || node_w <= 0 || typeof node_h !== "number" || node_h <= 0 || typeof nodesep !== "number" || nodesep < 0 || typeof ranksep !== "number" || ranksep < 0) {
+      console.error("错误：布局配置参数必须为正数");
+      return false;
+    }
+    const valid_directions = ["LR", "RL", "TB", "BT"];
+    if (!valid_directions.includes(dir)) {
+      console.error("错误：无效的布局方向，支持的方向：LR, RL, TB, BT");
+      return false;
+    }
+    try {
+      const nodes = graph.getNodes();
+      const edges = graph.getEdges();
+      const g = build_dag_graph(nodes, edges, cfg, dir);
+      dagre.layout(g);
+      update_node_positions(g);
+      update_edge_vertices(edges, dir);
+      return true;
+    } catch (error) {
+      console.error("执行布局时出错:", error);
+      return false;
+    }
+  }
+  function center_content(padding) {
+    if (!check_graph_initialized()) return;
+    if (typeof padding !== "number" || padding < 0) {
+      console.error("错误：padding 参数必须为非负数");
+      return;
+    }
+    graph.zoomToFit({ padding, maxScale: 1.2 });
+    graph.centerContent();
+  }
+  function create_nodes(node_options) {
+    if (!check_graph_initialized()) return [];
+    if (!Array.isArray(node_options)) {
+      console.error("错误：node_options 参数必须是数组");
+      return [];
+    }
+    const nodes = [];
+    node_options.forEach((option) => {
+      if (option) {
+        try {
+          const node = graph.createNode(option);
+          nodes.push(node);
+        } catch (error) {
+          console.error("创建节点时出错:", error);
+        }
+      }
+    });
+    return nodes;
+  }
+  function create_edges(edge_options) {
+    if (!check_graph_initialized()) return [];
+    if (!Array.isArray(edge_options)) {
+      console.error("错误：edge_options 参数必须是数组");
+      return [];
+    }
+    const edges = [];
+    edge_options.forEach((option) => {
+      if (option && option.source_id && option.target_id) {
+        try {
+          const edge = graph.createEdge({
+            shape: option.shape,
+            source: { cell: option.source_id },
+            target: { cell: option.target_id }
+          });
+          edges.push(edge);
+        } catch (error) {
+          console.error("创建边时出错:", error);
+        }
+      }
+    });
+    return edges;
+  }
+  function register_event(event_options) {
+    if (!check_graph_initialized()) return;
+    if (!event_options || typeof event_options !== "object") {
+      console.error("错误：event_options 参数必须是对象");
+      return;
+    }
+    Object.keys(event_options).forEach((key) => {
+      const option = event_options[key];
+      if (typeof option === "function") {
+        event_options[key] = add_event_param(option, "g", graph);
+        graph.on(key, event_options[key]);
+      } else {
+        console.error(`错误：事件 ${key} 的处理函数必须是函数`);
+      }
+    });
+    function add_event_param(original_func, add_param, param_val) {
+      return function(...args) {
+        args[0][add_param] = param_val;
+        return original_func.apply(this, args);
+      };
+    }
+  }
+  async function register_custom_elements(el_options) {
+    if (!el_options || typeof el_options !== "object") {
+      console.error("错误：el_options 参数必须是对象");
+      return false;
+    }
+    if (!await load_dependencies()) {
+      return false;
+    }
+    if (el_options.nodes && typeof el_options.nodes === "object") {
+      Object.keys(el_options.nodes).forEach((key) => {
+        const option = el_options.nodes[key];
+        if (option) {
+          try {
+            Graph.registerNode(key, option, true);
+          } catch (error) {
+            console.error(`注册自定义节点 ${key} 时出错:`, error);
+          }
+        }
+      });
+    }
+    if (el_options.edges && typeof el_options.edges === "object") {
+      Object.keys(el_options.edges).forEach((key) => {
+        const option = el_options.edges[key];
+        if (option) {
+          try {
+            Graph.registerEdge(key, option, true);
+          } catch (error) {
+            console.error(`注册自定义边 ${key} 时出错:`, error);
+          }
+        }
+      });
+    }
+    return true;
+  }
+  function get_nodes() {
+    if (!check_graph_initialized()) return [];
+    return graph.getNodes();
+  }
+  function clear() {
+    graph && graph.clearCells();
+  }
+  return {
+    init,
+    add_graph_elements,
+    layout,
+    center_content,
+    create_nodes,
+    create_edges,
+    register_event,
+    register_custom_elements,
+    get_nodes,
+    clear
+  };
+}
+export {
+  use_layout_flow
+};