@duxweb/dvha-pro 1.0.24 → 1.0.26

package/dist/esm/components/posterEditor/pages/RightPanel.js

@@ -0,0 +1,422 @@
+import { defineComponent as v, createVNode as e, Fragment as u, createTextVNode as c, isVNode as s } from "vue";
+import { NButton as l, NTooltip as n, NInputNumber as o, NColorPicker as f } from "naive-ui";
+import "@duxweb/dvha-core";
+import "@vueuse/core";
+import "mime";
+import "vue-router";
+import "@overlastic/vue";
+import "clsx";
+import "vue-echarts";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
+import "vue-cropper";
+import "jinrishici";
+import "lodash-es";
+import "vue-draggable-plus";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+import "unocss/preset-wind4";
+import "@vee-validate/i18n/dist/locale/en.json";
+import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vee-validate";
+import "vue-command-palette";
+import "@duxweb/dvha-naiveui";
+import "../../../pages/page404.js";
+import "short-unique-id";
+import "aieditor";
+import "@iconify-json/tabler/icons.json";
+import "../elements/index.js";
+import "fabric";
+import { Panel as m } from "./Panel.js";
+import { PanelItem as a } from "./PanelItem.js";
+import "dayjs";
+import "@tanstack/vue-query";
+import "pinia";
+import { DuxImageUpload as b } from "../../upload/image.js";
+function C(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !s(t);
+}
+const ge = /* @__PURE__ */ v({
+  name: "RightPanel",
+  props: {
+    hasMultipleSelection: {
+      type: Boolean,
+      required: !0
+    },
+    selectedElementsCount: {
+      type: Number,
+      required: !0
+    },
+    currentElementData: {
+      type: Object
+    },
+    currentElementConfig: {
+      type: Object
+    },
+    canMoveUp: {
+      type: Boolean,
+      required: !0
+    },
+    canMoveDown: {
+      type: Boolean,
+      required: !0
+    },
+    canMoveToFront: {
+      type: Boolean,
+      required: !0
+    },
+    canMoveToBack: {
+      type: Boolean,
+      required: !0
+    },
+    canvasWidth: {
+      type: Number,
+      required: !0
+    },
+    canvasHeight: {
+      type: Number,
+      required: !0
+    },
+    canvasBackgroundColor: {
+      type: String,
+      required: !0
+    },
+    canvasBackgroundImage: {
+      type: String
+    },
+    onDeleteSelectedElements: {
+      type: Function,
+      required: !0
+    },
+    onAlignElements: {
+      type: Function,
+      required: !0
+    },
+    onUpdateElementProperty: {
+      type: Function,
+      required: !0
+    },
+    onUpdateCanvasSize: {
+      type: Function,
+      required: !0
+    },
+    onUpdateCanvasBackground: {
+      type: Function,
+      required: !0
+    },
+    onUpdateCanvasBackgroundImage: {
+      type: Function,
+      required: !0
+    },
+    onSaveData: {
+      type: Function,
+      required: !0
+    },
+    onExportJson: {
+      type: Function,
+      required: !0
+    },
+    onRenderToolbarControl: {
+      type: Function,
+      required: !0
+    },
+    onClearCanvas: {
+      type: Function,
+      required: !0
+    },
+    canvasScale: {
+      type: Number,
+      required: !0
+    }
+  },
+  setup(t) {
+    const g = () => {
+      if (t.hasMultipleSelection)
+        return e(m, {
+          title: "多选操作"
+        }, {
+          default: () => e(u, null, [e(a, {
+            title: "对齐"
+          }, {
+            default: () => [e("div", {
+              class: "grid grid-cols-4 gap-2"
+            }, [e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("left"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-align-left"
+                }, null)
+              }, null),
+              default: () => "左对齐"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("right"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-align-right"
+                }, null)
+              }, null),
+              default: () => "右对齐"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("top"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-align-top"
+                }, null)
+              }, null),
+              default: () => "顶部对齐"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("bottom"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-align-bottom"
+                }, null)
+              }, null),
+              default: () => "底部对齐"
+            })])]
+          }), e(a, {
+            title: "居中"
+          }, {
+            default: () => [e("div", {
+              class: "grid grid-cols-4 gap-2"
+            }, [e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("center-horizontal"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-align-center"
+                }, null)
+              }, null),
+              default: () => "水平居中"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("center-vertical"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-align-middle"
+                }, null)
+              }, null),
+              default: () => "垂直居中"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("distribute-horizontal"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-distribute-horizontal"
+                }, null)
+              }, null),
+              default: () => "水平分布"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("distribute-vertical"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-distribute-vertical"
+                }, null)
+              }, null),
+              default: () => "垂直分布"
+            })])]
+          })]),
+          footer: () => e(u, null, [e(l, {
+            block: !0,
+            onClick: t.onDeleteSelectedElements,
+            type: "error"
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:trash"
+            }, null),
+            default: () => "删除"
+          })])
+        });
+      if (t.currentElementData && t.currentElementConfig) {
+        const r = t.currentElementConfig.getToolbarControls(t.currentElementData);
+        return e(m, {
+          title: "元素设置"
+        }, {
+          default: () => e(u, null, [r.map((i) => {
+            let d;
+            return e(a, {
+              key: i.key,
+              title: i.label
+            }, C(d = t.onRenderToolbarControl(i)) ? d : {
+              default: () => [d]
+            });
+          }), e(a, {
+            title: "X"
+          }, {
+            default: () => [e(o, {
+              value: t.currentElementData?.left,
+              "onUpdate:value": (i) => t.onUpdateElementProperty(t.currentElementData.id, "left", i || 0)
+            }, null)]
+          }), e(a, {
+            title: "Y"
+          }, {
+            default: () => [e(o, {
+              value: t.currentElementData?.top,
+              "onUpdate:value": (i) => t.onUpdateElementProperty(t.currentElementData.id, "top", i || 0)
+            }, null)]
+          }), e(a, {
+            title: "角度"
+          }, {
+            default: () => [e(o, {
+              value: t.currentElementData?.angle,
+              min: -180,
+              max: 180,
+              "onUpdate:value": (i) => t.onUpdateElementProperty(t.currentElementData.id, "angle", i || 0)
+            }, null)]
+          }), e(a, {
+            title: "对齐"
+          }, {
+            default: () => [e("div", {
+              class: "grid grid-cols-3 gap-2"
+            }, [e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("center-horizontal"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-align-center"
+                }, null)
+              }, null),
+              default: () => "水平居中"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("center-vertical"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-align-middle"
+                }, null)
+              }, null),
+              default: () => "垂直居中"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                onClick: () => t.onAlignElements("center-both"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:layout-distribute-horizontal"
+                }, null)
+              }, null),
+              default: () => "居中"
+            })])]
+          }), e(a, {
+            title: "层级"
+          }, {
+            default: () => [e("div", {
+              class: "grid grid-cols-4 gap-2"
+            }, [e(n, null, {
+              trigger: () => e(l, {
+                disabled: !t.canMoveUp,
+                onClick: () => t.onAlignElements("move-up"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:arrow-narrow-up"
+                }, null)
+              }, null),
+              default: () => "上移一层"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                disabled: !t.canMoveDown,
+                onClick: () => t.onAlignElements("move-down"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:arrow-narrow-down"
+                }, null)
+              }, null),
+              default: () => "下移一层"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                disabled: !t.canMoveToFront,
+                onClick: () => t.onAlignElements("move-to-front"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:arrow-bar-to-up"
+                }, null)
+              }, null),
+              default: () => "移到最前"
+            }), e(n, null, {
+              trigger: () => e(l, {
+                disabled: !t.canMoveToBack,
+                onClick: () => t.onAlignElements("move-to-back"),
+                renderIcon: () => e("div", {
+                  class: "i-tabler:arrow-bar-to-down"
+                }, null)
+              }, null),
+              default: () => "移到最后"
+            })])]
+          })]),
+          footer: () => e(u, null, [e(l, {
+            block: !0,
+            onClick: t.onDeleteSelectedElements,
+            type: "error"
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:trash"
+            }, null),
+            default: () => "删除"
+          })])
+        });
+      } else
+        return e(m, {
+          title: "画布设置"
+        }, {
+          default: () => e(u, null, [e(a, {
+            title: "宽度"
+          }, {
+            default: () => [e(o, {
+              value: t.canvasWidth,
+              min: 100,
+              max: 2e3,
+              "onUpdate:value": (r) => t.onUpdateCanvasSize(r || 800, t.canvasHeight)
+            }, null)]
+          }), e(a, {
+            title: "高度"
+          }, {
+            default: () => [e(o, {
+              value: t.canvasHeight,
+              min: 100,
+              max: 2e3,
+              "onUpdate:value": (r) => t.onUpdateCanvasSize(t.canvasWidth, r || 600)
+            }, null)]
+          }), e(a, {
+            title: "背景颜色"
+          }, {
+            default: () => [e(f, {
+              value: t.canvasBackgroundColor,
+              "onUpdate:value": (r) => t.onUpdateCanvasBackground(r)
+            }, null)]
+          }), e(a, {
+            title: "背景图片"
+          }, {
+            default: () => [e(b, {
+              value: t.canvasBackgroundImage || "",
+              onUpdateValue: (r) => t.onUpdateCanvasBackgroundImage(typeof r == "string" ? r : Array.isArray(r) && r[0] || "")
+            }, null)]
+          })]),
+          footer: () => e(u, null, [e(l, {
+            type: "primary",
+            block: !0,
+            onClick: t.onSaveData
+          }, {
+            default: () => [c("保存")]
+          }), e(l, {
+            block: !0,
+            onClick: t.onExportJson
+          }, {
+            default: () => [c("导出 JSON")]
+          }), e(l, {
+            block: !0,
+            onClick: t.onClearCanvas
+          }, {
+            default: () => [c("清空画布")]
+          })])
+        });
+    };
+    return () => e("div", {
+      class: "w-60 bg-default border-l border-default"
+    }, [g()]);
+  }
+});
+export {
+  ge as RightPanel
+};

package/dist/esm/components/posterEditor/posterEditor.js

@@ -0,0 +1,228 @@
+import { defineComponent as T, ref as m, watch as F, onMounted as H, onUnmounted as R, createVNode as a } from "vue";
+import { NSlider as V, NSwitch as W, NSelect as z, NColorPicker as A, NInputNumber as J, NInput as j } from "naive-ui";
+import { DuxCard as L } from "../card/card.js";
+import "clsx";
+import "@duxweb/dvha-core";
+import "@vueuse/core";
+import "mime";
+import "vue-router";
+import "@overlastic/vue";
+import "vue-echarts";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
+import "vue-cropper";
+import "jinrishici";
+import "lodash-es";
+import "vue-draggable-plus";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+import "unocss/preset-wind4";
+import "@vee-validate/i18n/dist/locale/en.json";
+import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vee-validate";
+import "vue-command-palette";
+import "@duxweb/dvha-naiveui";
+import "../../pages/page404.js";
+import "short-unique-id";
+import "aieditor";
+import "@iconify-json/tabler/icons.json";
+import "./elements/index.js";
+import { usePosterEditor as q } from "./hooks/usePosterEditor.js";
+import { CanvasRuler as G } from "./components/CanvasRuler.js";
+import { LeftToolbar as K } from "./pages/LeftToolbar.js";
+import { RightPanel as O } from "./pages/RightPanel.js";
+import "dayjs";
+import "@tanstack/vue-query";
+import "pinia";
+import { DuxImageUpload as Q } from "../upload/image.js";
+const Ge = /* @__PURE__ */ T({
+  name: "DuxPosterEditor",
+  props: {
+    data: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: Number,
+      default: 750
+    },
+    height: {
+      type: Number,
+      default: 1e3
+    },
+    backgroundColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    backgroundImage: {
+      type: String,
+      default: ""
+    },
+    onDataUpdate: Function,
+    onSave: Function
+  },
+  setup(n) {
+    const r = m(), l = m(), {
+      initCanvas: s,
+      destroy: v,
+      setCallbacks: c,
+      addElement: g,
+      deleteSelectedElements: f,
+      updateElementProperty: u,
+      alignElements: h,
+      canMoveUp: C,
+      canMoveDown: b,
+      canMoveToFront: k,
+      canMoveToBack: x,
+      clearCanvas: E,
+      loadData: p,
+      canvasData: o,
+      selectedElements: S,
+      canvasScale: d,
+      currentElementData: i,
+      currentElementConfig: U,
+      hasMultipleSelection: w,
+      updateCanvasSettings: y,
+      updateCanvasBackground: D,
+      updateCanvasBackgroundImage: M,
+      saveData: I,
+      exportJson: N
+    } = q({
+      width: n.width,
+      height: n.height,
+      backgroundColor: n.backgroundColor,
+      backgroundImage: n.backgroundImage
+    });
+    c({
+      onDataChange: n?.onDataUpdate
+    });
+    const B = (e) => {
+      const t = (P) => {
+        i.value && u(i.value.id, e.key, P);
+      };
+      switch (e.type) {
+        case "text":
+          return a(j, {
+            value: e.value,
+            placeholder: e.options?.placeholder,
+            "onUpdate:value": t
+          }, null);
+        case "number":
+          return a(J, {
+            value: e.value,
+            min: e.options?.min,
+            max: e.options?.max,
+            step: e.options?.step,
+            "onUpdate:value": t
+          }, null);
+        case "color":
+          return a(A, {
+            value: e.value,
+            "onUpdate:value": t
+          }, null);
+        case "select":
+          return a(z, {
+            value: e.value,
+            options: e.options?.choices || [],
+            "onUpdate:value": t
+          }, null);
+        case "switch":
+          return a(W, {
+            value: e.value,
+            "onUpdate:value": t
+          }, null);
+        case "slider":
+          return a(V, {
+            value: e.value,
+            min: e.options?.min,
+            max: e.options?.max,
+            step: e.options?.step,
+            "onUpdate:value": t
+          }, null);
+        case "image":
+          return a(Q, {
+            value: e.value,
+            onUpdateValue: t
+          }, null);
+        default:
+          return null;
+      }
+    };
+    return F(() => n.data, (e) => {
+      e && p(e);
+    }, {
+      immediate: !1
+    }), H(() => {
+      r.value && l.value && (s(r.value, l.value), p(n.data));
+    }), R(() => {
+      v();
+    }), () => a(L, {
+      class: "h-full",
+      shadow: !0
+    }, {
+      default: () => [a("div", {
+        class: "h-full flex"
+      }, [a(K, {
+        onAddElement: g,
+        canvasWidth: o.value.width,
+        canvasHeight: o.value.height
+      }, null), a("div", {
+        ref: l,
+        class: "flex-1 p-6  pl-12 pt-12 flex items-center justify-center overflow-hidden relative",
+        style: "background: linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0, 0.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0, 0.1) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0, 0.1) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
+      }, [a(G, {
+        canvasScale: d.value,
+        canvasWidth: o.value.width,
+        canvasHeight: o.value.height
+      }, null), a("div", {
+        class: "bg-default shadow-lg",
+        style: "position: relative;"
+      }, [a("canvas", {
+        ref: r,
+        style: "display: block;"
+      }, null)])]), a(O, {
+        onClearCanvas: E,
+        hasMultipleSelection: w.value,
+        selectedElementsCount: S.value.length,
+        currentElementData: i.value || void 0,
+        currentElementConfig: U.value || void 0,
+        canMoveUp: C.value,
+        canMoveDown: b.value,
+        canMoveToFront: k.value,
+        canMoveToBack: x.value,
+        canvasWidth: o.value.width,
+        canvasHeight: o.value.height,
+        canvasBackgroundColor: o.value.backgroundColor,
+        canvasBackgroundImage: o.value.backgroundImage,
+        onDeleteSelectedElements: f,
+        onAlignElements: (e) => h(e),
+        onUpdateElementProperty: u,
+        onUpdateCanvasSize: (e, t) => y(e, t),
+        onUpdateCanvasBackground: D,
+        onUpdateCanvasBackgroundImage: M,
+        onSaveData: async () => {
+          await I(), await n?.onSave?.();
+        },
+        onExportJson: N,
+        onRenderToolbarControl: B,
+        canvasScale: d.value
+      }, null)])]
+    });
+  }
+});
+export {
+  Ge as DuxPosterEditor
+};