@duxweb/dvha-pro 1.0.23 → 1.0.25

package/dist/esm/components/image/elements/circle.js

@@ -0,0 +1,127 @@
+import { Circle as c } from "fabric";
+const r = {
+  type: "circle",
+  name: "圆形",
+  icon: "i-tabler:circle",
+  category: "basic",
+  defaultProps: {
+    type: "circle",
+    left: 100,
+    top: 100,
+    width: 100,
+    height: 100,
+    angle: 0,
+    scaleX: 1,
+    scaleY: 1,
+    visible: !0,
+    locked: !1,
+    radius: 50,
+    fill: "#00ff00",
+    stroke: "",
+    strokeWidth: 0,
+    strokeDashArray: null,
+    opacity: 1,
+    label: ""
+  },
+  createFabricObject: (e) => {
+    const l = new c({
+      left: e.left,
+      top: e.top,
+      radius: e.radius,
+      fill: e.fill,
+      stroke: e.stroke || void 0,
+      strokeWidth: e.strokeWidth,
+      strokeDashArray: e.strokeDashArray,
+      angle: e.angle,
+      scaleX: e.scaleX,
+      scaleY: e.scaleY,
+      opacity: e.opacity,
+      visible: e.visible,
+      selectable: !e.locked,
+      evented: !e.locked,
+      strokeUniform: !0,
+      lockUniScaling: !0
+      // 强制等比例缩放，确保圆形始终占满容器
+    });
+    return l.label = e.label, l;
+  },
+  getPropsFromFabricObject: (e) => {
+    const l = e, t = l.scaleX || 1, i = l.scaleY || 1, a = Math.round((l.radius || 50) * Math.max(t, i));
+    return {
+      type: "circle",
+      left: Math.round(l.left || 0),
+      top: Math.round(l.top || 0),
+      width: a * 2,
+      height: a * 2,
+      angle: Math.round(l.angle || 0),
+      scaleX: 1,
+      // 始终重置为1，将缩放应用到实际尺寸
+      scaleY: 1,
+      // 始终重置为1，将缩放应用到实际尺寸
+      visible: l.visible !== !1,
+      locked: !l.selectable,
+      radius: a,
+      fill: l.fill || "#00ff00",
+      stroke: l.stroke || "",
+      strokeWidth: Math.round(l.strokeWidth || 0),
+      strokeDashArray: l.strokeDashArray || null,
+      opacity: l.opacity || 1,
+      label: l.label || ""
+    };
+  },
+  getToolbarControls: (e) => [
+    {
+      key: "label",
+      label: "标签",
+      type: "text",
+      value: e.label,
+      options: { placeholder: "请输入标签" }
+    },
+    {
+      key: "radius",
+      label: "半径",
+      type: "number",
+      value: e.radius,
+      options: { min: 1, max: 1e3, step: 1 }
+    },
+    {
+      key: "fill",
+      label: "填充颜色",
+      type: "color",
+      value: e.fill
+    },
+    {
+      key: "stroke",
+      label: "边框颜色",
+      type: "color",
+      value: e.stroke
+    },
+    {
+      key: "strokeWidth",
+      label: "边框宽度",
+      type: "number",
+      value: e.strokeWidth,
+      options: { min: 0, max: 50, step: 1 }
+    },
+    {
+      key: "opacity",
+      label: "透明度",
+      type: "slider",
+      value: e.opacity,
+      options: { min: 0, max: 1, step: 0.01 }
+    }
+  ],
+  onPropsChange: (e, l) => {
+    const t = l;
+    t.set({
+      radius: e.radius,
+      fill: e.fill,
+      stroke: e.stroke || void 0,
+      strokeWidth: e.strokeWidth,
+      opacity: e.opacity
+    }), t.label = e.label;
+  }
+};
+export {
+  r as default
+};

package/dist/esm/components/image/elements/image.js

@@ -0,0 +1,131 @@
+import { FabricImage as u } from "fabric";
+const y = {
+  type: "image",
+  name: "图片",
+  icon: "i-tabler:photo",
+  category: "basic",
+  defaultProps: {
+    id: "",
+    type: "image",
+    left: 100,
+    top: 100,
+    width: 200,
+    height: 200,
+    angle: 0,
+    scaleX: 1,
+    scaleY: 1,
+    visible: !0,
+    locked: !1,
+    src: "",
+    opacity: 1
+  },
+  createFabricObject: (e) => u.fromURL(e.src || "", {
+    crossOrigin: "anonymous"
+  }).then((a) => (a.set({
+    left: e.left,
+    top: e.top,
+    width: e.width,
+    height: e.height,
+    angle: e.angle,
+    opacity: e.opacity,
+    visible: e.visible,
+    selectable: !e.locked,
+    evented: !e.locked
+  }), a)),
+  getPropsFromFabricObject: (e) => {
+    const a = e, t = (a.width || 200) * (a.scaleX || 1), i = (a.height || 200) * (a.scaleY || 1);
+    return {
+      type: "image",
+      left: Math.round(a.left || 0),
+      top: Math.round(a.top || 0),
+      width: Math.round(t),
+      height: Math.round(i),
+      angle: Math.round(a.angle || 0),
+      scaleX: a.scaleX || 1,
+      scaleY: a.scaleY || 1,
+      visible: a.visible !== !1,
+      locked: !a.selectable,
+      src: a.getSrc() || "",
+      opacity: a.opacity || 1,
+      cropX: 0,
+      cropY: 0,
+      borderRadius: 0
+    };
+  },
+  getToolbarControls: (e) => [
+    {
+      key: "src",
+      label: "选择图片",
+      type: "image",
+      value: e.src,
+      options: { placeholder: "点击选择图片文件" }
+    },
+    {
+      key: "width",
+      label: "宽度",
+      type: "number",
+      value: e.width,
+      options: { min: 10, max: 2e3, step: 1 }
+    },
+    {
+      key: "height",
+      label: "高度",
+      type: "number",
+      value: e.height,
+      options: { min: 10, max: 2e3, step: 1 }
+    },
+    {
+      key: "opacity",
+      label: "透明度",
+      type: "slider",
+      value: e.opacity,
+      options: { min: 0, max: 1, step: 0.01 }
+    }
+  ],
+  onPropsChange: (e, a) => {
+    const t = a;
+    if (e.src && e.src !== (t.getSrc() || "")) {
+      t.setSrc(e.src, { crossOrigin: "anonymous" }).then(() => {
+        const c = t.getElement().width, l = t.getElement().height, n = t.canvas, g = n?.width || 800, r = n?.height || 600, b = g / c, m = r / l, s = Math.min(b, m, 1);
+        t.set({
+          left: e.left,
+          top: e.top,
+          width: c,
+          height: l,
+          scaleX: s,
+          scaleY: s,
+          angle: e.angle,
+          opacity: e.opacity,
+          visible: e.visible,
+          selectable: !e.locked,
+          evented: !e.locked
+        }), t.setCoords(), t.canvas?.renderAll(), t.canvas?.fire("object:modified", { target: t });
+      });
+      return;
+    }
+    if (!e.src) {
+      t.setSrc("").then(() => {
+        t.set({
+          width: 200,
+          height: 200
+        }), t.setCoords(), t.canvas?.renderAll(), t.canvas?.fire("object:modified", { target: t });
+      });
+      return;
+    }
+    const i = t.width || 200, o = t.height || 200, h = e.width / i, d = e.height / o;
+    t.set({
+      left: e.left,
+      top: e.top,
+      scaleX: h,
+      scaleY: d,
+      angle: e.angle,
+      opacity: e.opacity,
+      visible: e.visible,
+      selectable: !e.locked,
+      evented: !e.locked
+    }), t.setCoords(), t.canvas?.renderAll(), t.canvas?.fire("object:modified", { target: t });
+  }
+};
+export {
+  y as default
+};

package/dist/esm/components/image/elements/index.js

@@ -0,0 +1,46 @@
+import s from "./circle.js";
+import g from "./image.js";
+import n from "./rect.js";
+import m from "./text.js";
+class o {
+  elements = /* @__PURE__ */ new Map();
+  // 注册元素
+  register(e) {
+    this.elements.set(e.type, e);
+  }
+  // 批量注册元素
+  registerAll(e) {
+    e.forEach((t) => this.register(t));
+  }
+  // 获取元素配置
+  get(e) {
+    return this.elements.get(e) || null;
+  }
+  // 获取所有元素配置
+  getAll() {
+    return Array.from(this.elements.values());
+  }
+  // 根据分类获取元素配置
+  getByCategory(e) {
+    return this.getAll().filter((t) => t.category === e);
+  }
+  // 获取所有分类
+  getCategories() {
+    const e = new Set(this.getAll().map((t) => t.category));
+    return Array.from(e);
+  }
+}
+const l = new o();
+l.registerAll([
+  m,
+  n,
+  s,
+  g
+]);
+const f = l.getAll(), p = (r) => l.get(r), A = (r) => l.getByCategory(r);
+export {
+  f as elementConfigs,
+  l as elementRegistry,
+  p as getElementConfig,
+  A as getElementsByCategory
+};

package/dist/esm/components/image/elements/rect.js

@@ -0,0 +1,171 @@
+import { Rect as i } from "fabric";
+const o = {
+  type: "rect",
+  name: "矩形",
+  icon: "i-tabler:square",
+  category: "basic",
+  defaultProps: {
+    id: "",
+    type: "rect",
+    left: 100,
+    top: 100,
+    width: 100,
+    height: 100,
+    angle: 0,
+    scaleX: 1,
+    scaleY: 1,
+    visible: !0,
+    locked: !1,
+    fill: "#ff0000",
+    stroke: "",
+    strokeWidth: 0,
+    strokeDashArray: null,
+    rx: 0,
+    ry: 0,
+    opacity: 1,
+    label: ""
+  },
+  createFabricObject: (e) => {
+    const t = new i({
+      left: e.left,
+      top: e.top,
+      width: e.width,
+      height: e.height,
+      fill: e.fill,
+      stroke: e.stroke || void 0,
+      strokeWidth: e.strokeWidth,
+      strokeDashArray: e.strokeDashArray,
+      rx: e.rx,
+      ry: e.ry,
+      angle: e.angle,
+      scaleX: e.scaleX,
+      scaleY: e.scaleY,
+      opacity: e.opacity,
+      visible: e.visible,
+      selectable: !e.locked,
+      evented: !e.locked,
+      strokeUniform: !0,
+      // 支持等比例缩放：用户可以按住Shift键进行等比例缩放
+      uniformScaling: !1
+      // 默认不强制等比例，但支持Shift键等比例缩放
+    });
+    return t.setControlsVisibility({
+      mtr: !0,
+      // 旋转控制点
+      mt: !0,
+      // 顶部中间
+      mb: !0,
+      // 底部中间
+      ml: !0,
+      // 左侧中间
+      mr: !0,
+      // 右侧中间
+      tl: !0,
+      // 左上角 - 支持等比例缩放
+      tr: !0,
+      // 右上角 - 支持等比例缩放
+      bl: !0,
+      // 左下角 - 支持等比例缩放
+      br: !0
+      // 右下角 - 支持等比例缩放
+    }), t.label = e.label, t;
+  },
+  getPropsFromFabricObject: (e) => {
+    const t = e, l = t.scaleX || 1, a = t.scaleY || 1;
+    return {
+      type: "rect",
+      left: Math.round(t.left || 0),
+      top: Math.round(t.top || 0),
+      width: Math.round((t.width || 100) * l),
+      height: Math.round((t.height || 100) * a),
+      angle: Math.round(t.angle || 0),
+      scaleX: 1,
+      // 始终重置为1，将缩放应用到实际尺寸
+      scaleY: 1,
+      // 始终重置为1，将缩放应用到实际尺寸
+      visible: t.visible !== !1,
+      locked: !t.selectable,
+      fill: t.fill || "#ff0000",
+      stroke: t.stroke || "",
+      strokeWidth: Math.round(t.strokeWidth || 0),
+      strokeDashArray: t.strokeDashArray || null,
+      rx: Math.round(t.rx || 0),
+      ry: Math.round(t.ry || 0),
+      opacity: t.opacity || 1,
+      label: t.label || ""
+    };
+  },
+  getToolbarControls: (e) => [
+    {
+      key: "label",
+      label: "标签",
+      type: "text",
+      value: e.label,
+      options: { placeholder: "请输入标签" }
+    },
+    {
+      key: "width",
+      label: "宽度",
+      type: "number",
+      value: e.width,
+      options: { min: 1, max: 2e3, step: 1 }
+    },
+    {
+      key: "height",
+      label: "高度",
+      type: "number",
+      value: e.height,
+      options: { min: 1, max: 2e3, step: 1 }
+    },
+    {
+      key: "fill",
+      label: "填充颜色",
+      type: "color",
+      value: e.fill
+    },
+    {
+      key: "stroke",
+      label: "边框颜色",
+      type: "color",
+      value: e.stroke
+    },
+    {
+      key: "strokeWidth",
+      label: "边框宽度",
+      type: "number",
+      value: e.strokeWidth,
+      options: { min: 0, max: 50, step: 1 }
+    },
+    {
+      key: "rx",
+      label: "圆角半径",
+      type: "number",
+      value: e.rx,
+      options: { min: 0, max: 100, step: 1 }
+    },
+    {
+      key: "opacity",
+      label: "透明度",
+      type: "slider",
+      value: e.opacity,
+      options: { min: 0, max: 1, step: 0.01 }
+    }
+  ],
+  onPropsChange: (e, t) => {
+    const l = t;
+    l.set({
+      width: e.width,
+      height: e.height,
+      fill: e.fill,
+      stroke: e.stroke || void 0,
+      strokeWidth: e.strokeWidth,
+      rx: e.rx,
+      ry: e.rx,
+      // 让ry跟随rx
+      opacity: e.opacity
+    }), l.label = e.label;
+  }
+};
+export {
+  o as default
+};

package/dist/esm/components/image/elements/text.js

@@ -0,0 +1,206 @@
+import { Textbox as o } from "fabric";
+const c = {
+  type: "text",
+  name: "文本",
+  icon: "i-tabler:typography",
+  category: "basic",
+  defaultProps: {
+    id: "",
+    type: "text",
+    left: 100,
+    top: 100,
+    width: 200,
+    angle: 0,
+    scaleX: 1,
+    scaleY: 1,
+    visible: !0,
+    locked: !1,
+    text: "双击编辑文本",
+    fontSize: 20,
+    fontFamily: "Arial",
+    fill: "#000000",
+    textAlign: "left",
+    fontWeight: "normal",
+    fontStyle: "normal",
+    underline: !1,
+    linethrough: !1
+  },
+  createFabricObject: (e) => {
+    const t = new o(e.text, {
+      left: e.left,
+      top: e.top,
+      width: e.width,
+      angle: e.angle,
+      scaleX: e.scaleX,
+      scaleY: e.scaleY,
+      visible: e.visible,
+      selectable: !e.locked,
+      evented: !e.locked,
+      fontSize: e.fontSize,
+      fontFamily: e.fontFamily,
+      fill: e.fill,
+      textAlign: e.textAlign,
+      fontWeight: e.fontWeight,
+      fontStyle: e.fontStyle,
+      underline: e.underline,
+      linethrough: e.linethrough,
+      // 启用自动换行的关键配置
+      splitByGrapheme: !0,
+      // 锁定高度缩放，只允许宽度缩放
+      lockScalingY: !0,
+      // 禁用高度手柄
+      setControlsVisibility: {
+        mt: !1,
+        // 顶部中间
+        mb: !1
+        // 底部中间
+      }
+    });
+    let l = e.fontSize;
+    return t.on("mousedown", () => {
+      l = t.fontSize || 20;
+    }), t.on("scaling", () => {
+      const n = t.scaleX || 1, i = Math.round(l * n), a = Math.max(8, Math.min(200, i));
+      t.set({
+        fontSize: a,
+        scaleX: 1,
+        scaleY: 1
+      }), t.canvas?.requestRenderAll();
+    }), t.on("mousedblclick", () => {
+      t.enterEditing(), t.selectAll();
+    }), t;
+  },
+  getPropsFromFabricObject: (e) => {
+    const t = e;
+    return {
+      left: Math.round(t.left || 0),
+      top: Math.round(t.top || 0),
+      width: Math.round(t.width || 0),
+      angle: Math.round(t.angle || 0),
+      scaleX: t.scaleX || 1,
+      scaleY: t.scaleY || 1,
+      visible: t.visible !== !1,
+      locked: !t.selectable,
+      text: t.text || "",
+      fontSize: Math.round(t.fontSize || 20),
+      fontFamily: t.fontFamily || "Arial",
+      fill: t.fill,
+      textAlign: t.textAlign || "left",
+      fontWeight: t.fontWeight || "normal",
+      fontStyle: t.fontStyle || "normal",
+      underline: t.underline || !1,
+      linethrough: t.linethrough || !1
+    };
+  },
+  onPropsChange: (e, t) => {
+    t.set({
+      left: e.left,
+      top: e.top,
+      width: e.width,
+      angle: e.angle,
+      visible: e.visible,
+      selectable: !e.locked,
+      evented: !e.locked,
+      text: e.text,
+      fontSize: e.fontSize,
+      fontFamily: e.fontFamily,
+      fill: e.fill,
+      textAlign: e.textAlign,
+      fontWeight: e.fontWeight,
+      fontStyle: e.fontStyle,
+      underline: e.underline,
+      linethrough: e.linethrough
+    });
+  },
+  getToolbarControls: (e) => [
+    {
+      key: "text",
+      label: "文本内容",
+      type: "text",
+      value: e.text
+    },
+    {
+      key: "fontSize",
+      label: "字体大小",
+      type: "number",
+      value: e.fontSize,
+      options: {
+        min: 8,
+        max: 200,
+        step: 1
+      }
+    },
+    {
+      key: "fontFamily",
+      label: "字体",
+      type: "select",
+      value: e.fontFamily,
+      options: {
+        choices: [
+          { label: "Arial", value: "Arial" },
+          { label: "微软雅黑", value: "Microsoft YaHei" },
+          { label: "宋体", value: "SimSun" },
+          { label: "黑体", value: "SimHei" }
+        ]
+      }
+    },
+    {
+      key: "fill",
+      label: "颜色",
+      type: "color",
+      value: e.fill
+    },
+    {
+      key: "textAlign",
+      label: "对齐",
+      type: "select",
+      value: e.textAlign,
+      options: {
+        choices: [
+          { label: "左对齐", value: "left" },
+          { label: "居中", value: "center" },
+          { label: "右对齐", value: "right" }
+        ]
+      }
+    },
+    {
+      key: "fontWeight",
+      label: "粗体",
+      type: "select",
+      value: e.fontWeight,
+      options: {
+        choices: [
+          { label: "正常", value: "normal" },
+          { label: "粗体", value: "bold" }
+        ]
+      }
+    },
+    {
+      key: "fontStyle",
+      label: "斜体",
+      type: "select",
+      value: e.fontStyle,
+      options: {
+        choices: [
+          { label: "正常", value: "normal" },
+          { label: "斜体", value: "italic" }
+        ]
+      }
+    },
+    {
+      key: "underline",
+      label: "下划线",
+      type: "switch",
+      value: e.underline
+    },
+    {
+      key: "linethrough",
+      label: "删除线",
+      type: "switch",
+      value: e.linethrough
+    }
+  ]
+};
+export {
+  c as default
+};