@duxweb/dvha-pro 1.0.24 → 1.0.25

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