bp-aicc-editor 1.0.0

package/lib/index-CuapA_N-.js

@@ -0,0 +1,586 @@
+import { storeToRefs as fe } from "pinia";
+import { defineComponent as N, computed as P, createElementBlock as R, createCommentVNode as q, openBlock as y, createElementVNode as f, normalizeStyle as b, h as O, resolveComponent as H, ref as m, watchEffect as pe, onMounted as se, onUnmounted as me, createBlock as Y, withCtx as U, createVNode as Z, watch as K, TransitionGroup as ge, Fragment as we, renderList as ye } from "vue";
+import { b as j, _ as I, C as ne, u as Le, a as $e, w as be, d as Ce } from "./index-Bjs1bW2W.js";
+import { c as Se, l as Me } from "./datav-BNctF3aF.js";
+import { b as A, o as M, a as T, u as Te } from "./index-D0Kh7c2E.js";
+import { _ as ke } from "./transform-layer.vue_vue_type_style_index_0_scoped_04cdae36_lang-6ixEI9oF.js";
+import { NIcon as xe } from "naive-ui";
+const We = N({
+  name: "AlignLine",
+  setup() {
+    const t = j();
+    return {
+      alignLine: P(() => t.alignLine),
+      canvas: P(() => t.canvas)
+    };
+  }
+}), Ee = {
+  key: 0,
+  class: "ident-line-wp"
+};
+function Re(t, e, n, o, s, i) {
+  return t.alignLine.enable && t.alignLine.show ? (y(), R("div", Ee, [
+    f("div", {
+      class: "ident-line x-line",
+      style: b({ width: `${t.canvas.width}px`, top: `${t.alignLine.top}px` })
+    }, null, 4),
+    f("div", {
+      class: "ident-line x-line",
+      style: b({ width: `${t.canvas.width}px`, top: `${t.alignLine.horizontal}px` })
+    }, null, 4),
+    f("div", {
+      class: "ident-line x-line",
+      style: b({ width: `${t.canvas.width}px`, top: `${t.alignLine.bottom}px` })
+    }, null, 4),
+    f("div", {
+      class: "ident-line y-line",
+      style: b({ height: `${t.canvas.height}px`, left: `${t.alignLine.left}px` })
+    }, null, 4),
+    f("div", {
+      class: "ident-line y-line",
+      style: b({ height: `${t.canvas.height}px`, left: `${t.alignLine.vertical}px` })
+    }, null, 4),
+    f("div", {
+      class: "ident-line y-line",
+      style: b({ height: `${t.canvas.height}px`, left: `${t.alignLine.right}px` })
+    }, null, 4)
+  ])) : q("", !0);
+}
+const Ie = /* @__PURE__ */ I(We, [["render", Re], ["__scopeId", "data-v-78e75dcb"]]), Be = { class: "canvas-selection" }, Xe = ["d"], ze = /* @__PURE__ */ N({
+  __name: "canvas-area",
+  props: {
+    startX: {
+      type: Number,
+      default: 0
+    },
+    startY: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(t) {
+    return (e, n) => (y(), R("svg", Be, [
+      f("path", {
+        fill: "none",
+        stroke: "rgba(255,255,255,0.5)",
+        d: `M ${t.startX},${t.startY} L ${t.startX},${t.startY + t.height} L ${t.startX + t.width},${t.startY + t.height} L ${t.startX + t.width},${t.startY} Z`,
+        style: { "stroke-width": "1", "stroke-dasharray": "3, 3" }
+      }, null, 8, Xe)
+    ]));
+  }
+}), He = /* @__PURE__ */ I(ze, [["__scopeId", "data-v-5262200c"]]), Q = /* @__PURE__ */ I(ke, [["__scopeId", "data-v-04cdae36"]]), De = N({
+  name: "DatavTransform",
+  props: {
+    com: {
+      type: Object,
+      required: !0
+    },
+    editable: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup() {
+    const t = (e, n, o) => e.type === ne.com ? O(
+      Q,
+      {
+        com: e,
+        parentCom: n,
+        editable: o
+      },
+      {
+        default: () => O(H(e.name), {
+          com: e,
+          style: {
+            transform: "translateZ(0)",
+            opacity: e.attr.opacity
+          }
+        })
+      }
+    ) : O(
+      Q,
+      {
+        com: e,
+        parentCom: n,
+        editable: o
+      },
+      {
+        default: ({ data: s, editable: i }) => t(s, e, i)
+      }
+    );
+    return {
+      create: t
+    };
+  },
+  render() {
+    return this.create(this.$props.com, void 0, this.$props.editable);
+  }
+}), Ge = {}, Pe = {
+  t: "1639130833808",
+  class: "icon",
+  viewBox: "0 0 1024 1024",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  "p-id": "3985",
+  width: "64",
+  height: "64"
+};
+function Ye(t, e) {
+  return y(), R("svg", Pe, [...e[0] || (e[0] = [
+    f("path", {
+      d: "M341.33333333 579.33333333C426.66933333 463.33333333 511.99733333 405.33333333 597.33333333 405.33333333c85.336 0 170.664 58 256 174C767.99733333 676.66933333 682.66933333 725.33333333 597.33333333 725.33333333c-85.336 0-170.664-48.664-256-146z m96-5.6C490.66933333 632.13333333 543.99733333 661.33333333 597.33333333 661.33333333s106.664-29.2 160-87.6C703.99733333 504.13333333 650.66933333 469.33333333 597.33333333 469.33333333s-106.664 34.8-160 104.4zM597.33333333 629.33333333a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM213.33333333 213.33333333V85.33333333h64v128h640v64H277.33333333v640h-64V277.33333333H85.33333333v-64h128z",
+      "p-id": "3986"
+    }, null, -1)
+  ])]);
+}
+const Ae = /* @__PURE__ */ I(Ge, [["render", Ye]]), Ve = {}, Ne = {
+  t: "1639130872871",
+  class: "icon",
+  viewBox: "0 0 1024 1024",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  "p-id": "4135",
+  width: "64",
+  height: "64"
+};
+function Fe(t, e) {
+  return y(), R("svg", Ne, [...e[0] || (e[0] = [
+    f("path", {
+      d: "M651.14133333 413.01333333l-56.344 56.344C542.30933333 470.45333333 489.82133333 505.23733333 437.33333333 573.73333333a416 416 0 0 0 26.48 26.6l-49.976 49.984c-24.168-19.76-48.336-43.416-72.504-70.984C426.66933333 463.33333333 511.99733333 405.33333333 597.33333333 405.33333333c17.936 0 35.872 2.56 53.808 7.68z m113.968 67.056c29.408 26.2 58.816 59.28 88.224 99.264C767.99733333 676.66933333 682.66933333 725.33333333 597.33333333 725.33333333c-22.456 0-44.92-3.368-67.376-10.112l54.456-54.456c4.304 0.376 8.616 0.568 12.92 0.568 53.336 0 106.664-29.2 160-87.6-13.368-17.44-26.736-32.704-40.112-45.784l47.888-47.88zM213.33333333 213.33333333V85.33333333h64v128h640v64H277.33333333v640h-64V277.33333333H85.33333333v-64h128z",
+      "p-id": "4136"
+    }, null, -1),
+    f("path", {
+      d: "M770.34933333 339.06133333l45.256 45.256-407.288 407.288-45.256-45.256z",
+      "p-id": "4137"
+    }, null, -1)
+  ])]);
+}
+const Oe = /* @__PURE__ */ I(Ve, [["render", Fe]]), V = (t) => `${t}px`, ee = (t, e, n, o) => {
+  const s = t ?? document.createElement("canvas");
+  s.width = e * o, s.height = n * o, s.style.width = V(e), s.style.height = V(n);
+  const i = s.getContext("2d");
+  return i && i.setTransform(o, 0, 0, o, 0, 0), s;
+}, oe = (t, e, n, o) => {
+  const s = parseFloat(t.style.transform.match(new RegExp("(?<=X\\()(.+)", "ig"))[0]), { height: i, scale: a, offset: h } = e;
+  let c = 0;
+  return e.direction == "TB" ? c = n - (t.parentElement?.offsetLeft || 0) - s : c = o - (t.parentElement?.offsetTop || 0) - s, c = c - i + e.indicatorLineWidth, {
+    coor: Math.floor((c - h) / a),
+    dist: c
+  };
+}, qe = (t, e) => {
+  const { scale: n, offset: o } = e;
+  return {
+    coor: t,
+    dist: parseFloat((t * n + o).toFixed(3))
+  };
+};
+class D {
+  constructor(e, n, o, s = 0) {
+    this.el = e, this.options = n, this.constructGuide(o, s);
+  }
+  static isMoveing = !1;
+  guideLine;
+  coor = -1;
+  // 创建参考线
+  constructGuide(e, n) {
+    const { el: o } = this, s = document.createElement("div");
+    s.title = "双击删除参考线", A(s, "ruler-line"), this.guideLine = s;
+    const { coor: i } = this;
+    this.setLine(e, n), e && this.coorChange("add", this.coor, i);
+    let a = o.querySelector(".lines-wrapper");
+    a || (a = document.createElement("div"), A(a, "lines-wrapper"), o.appendChild(a)), a.appendChild(s), M(s, "mousedown", this.moving.bind(this)), M(s, "dblclick", this.dblclick.bind(this));
+  }
+  moving(e) {
+    D.isMoveing = !0;
+    const { options: n } = this;
+    e.preventDefault(), e.stopPropagation();
+    const { coor: o } = this, s = (a) => {
+      n.direction === "TB" ? document.body.style.cursor = "ew-resize" : document.body.style.cursor = "ns-resize", this.setLine(a);
+    }, i = () => {
+      D.isMoveing = !1, document.body.style.cursor = "", T(document, "mousemove", s), T(document, "mouseup", i);
+      const { coor: a } = this;
+      a < 0 ? this.coorChange("delete", o, o) : this.coorChange("update", a, o);
+    };
+    M(document, "mousemove", s), M(document, "mouseup", i);
+  }
+  setLine(e, n = 0) {
+    const { el: o, options: s, guideLine: i } = this, a = e ? oe(o, s, e.clientX, e.clientY) : qe(n, s);
+    s.direction === "TB" ? i.style.left = V(a.dist) : i.style.top = V(a.dist), i.innerHTML = `
+      <div class="line-action">
+        <span class="line-value">${a.coor}</span>
+      </div>`, this.coor = a.coor;
+  }
+  dblclick(e) {
+    e.preventDefault(), e.stopPropagation(), this.destroy();
+  }
+  coorChange(e, n, o) {
+    const { options: s } = this;
+    s.coorChange && s.coorChange(e, n, o);
+  }
+  show() {
+    this.guideLine.style.display = "block";
+  }
+  hide() {
+    this.guideLine.style.display = "none";
+  }
+  destroy() {
+    const { guideLine: e, coor: n } = this;
+    this.coorChange("delete", n, n), T(e, "mousedown", this.moving.bind(this)), T(e, "dblclick", this.dblclick.bind(this)), e.remove();
+  }
+}
+class te {
+  el;
+  canvas;
+  ctx;
+  ruler = {
+    width: 0,
+    height: 0
+  };
+  indicator;
+  indicatorValue;
+  guideLines = [];
+  options = {
+    direction: "TB",
+    width: 1e3,
+    height: 20,
+    bgColor: "#0e1013",
+    fontFamily: "sans-serif",
+    fontSize: "10px",
+    fontColor: "#90a0ae",
+    strokeStyle: "rgba(161, 174, 179, 0.8)",
+    lineWidth: 0.5,
+    indicatorLineWidth: 1,
+    scale: 1,
+    offset: 40,
+    ratio: 2
+  };
+  constructor(e, n) {
+    this.el = e, this.options = { ...this.options, ...n }, this.constructRuler();
+  }
+  // 创建标尺
+  constructRuler() {
+    const { el: e, options: n } = this, { direction: o, width: s, height: i, ratio: a } = n, h = Math.max(o === "TB" ? e.offsetWidth : e.offsetHeight, s), c = i;
+    this.ruler.width = h, this.ruler.height = c;
+    const r = ee(null, h, c, a);
+    A(r, "canvas-ruler"), e.appendChild(r), this.canvas = r, this.ctx = r.getContext("2d"), this.drawRuler(), M(r, "mouseenter", this.constructIndicator.bind(this)), M(r, "mousedown", this.createGuideLine.bind(this));
+  }
+  // 画标尺
+  drawRuler() {
+    const { ctx: e, options: n, ruler: o } = this, { width: s, height: i } = o;
+    e.beginPath(), e.fillStyle = n.bgColor, e.fillRect(0, 0, s, i), e.closePath(), e.beginPath(), e.font = `${n.fontSize} ${n.fontFamily}`, e.textAlign = "left", e.fillStyle = n.fontColor, e.strokeStyle = n.strokeStyle, e.lineWidth = n.lineWidth, this.drawPoints(), e.stroke();
+  }
+  // 画刻度
+  drawPoints() {
+    const { ctx: e, options: n, ruler: o } = this, { width: s, height: i } = o, { offset: a, scale: h } = n, c = 0, r = i / 1.5, p = i / 1.2;
+    for (let u = 0; u <= s; u += 1) {
+      const d = u - a;
+      if (d < 0) continue;
+      let L = -1, v = -1;
+      d % 50 === 0 ? (L = Math.floor(d / h), v = c) : d % 25 === 0 ? v = r : d % 5 === 0 && (v = p), v >= 0 && (e.moveTo(u + 0.5, i + 0.5), e.lineTo(u + 0.5, v), L > -1 && e.fillText(`${L}`, u + 2.5, i / 1.5));
+    }
+  }
+  // 画指示线
+  constructIndicator(e) {
+    if (D.isMoveing)
+      return;
+    const { el: n, options: o, canvas: s } = this, i = document.createElement("div"), a = document.createElement("span");
+    A(i, "ruler-indicator"), A(a, "indicator-value"), i.appendChild(a), this.indicator = i, this.indicatorValue = a, n.appendChild(i);
+    const h = (p) => {
+      const u = oe(n, o, p.clientX, p.clientY);
+      i.style.left = V(u.dist), a.textContent = `${u.coor}`;
+    };
+    h(e);
+    const c = (p) => {
+      h(p);
+    }, r = () => {
+      T(s, "mousemove", c), T(s, "mouseout", r), i.remove();
+    };
+    M(s, "mousemove", c), M(s, "mouseout", r);
+  }
+  // 创建参考线
+  createGuideLine(e) {
+    e.preventDefault(), e.stopPropagation();
+    const { el: n, options: o } = this;
+    this.guideLines.push(new D(n, o, e));
+  }
+  // 设置指定参考线
+  setGuideLines(e) {
+    const { el: n, options: o } = this;
+    e.forEach((s) => {
+      this.guideLines.push(new D(n, o, null, s));
+    });
+  }
+  // 设置画布尺寸和比例
+  setSize(e, n, o) {
+    const { el: s, options: i } = this;
+    i.width = e, i.height = n, i.scale = o;
+    const { direction: a, width: h, height: c, ratio: r } = i, p = Math.max(a === "TB" ? s.offsetWidth : s.offsetHeight, h), u = c;
+    this.ruler.width = p, this.ruler.height = u, ee(this.canvas, p, u, r), this.drawRuler(), this.guideLines.forEach((d) => d.setLine(null, d.coor));
+  }
+  // 设置画布比例
+  setScale(e) {
+    this.options.scale = e, this.drawRuler(), this.guideLines.forEach((n) => n.setLine(null, n.coor));
+  }
+  // 切换参考线
+  toggleGuide(e) {
+    const n = e ? "show" : "hide";
+    this.guideLines.forEach((o) => o[n]());
+  }
+  // 清空所有参考线
+  clearGuides() {
+    this.guideLines.forEach((e) => e.destroy()), this.guideLines = [];
+  }
+  destroy() {
+    const { el: e, canvas: n } = this;
+    this.clearGuides(), T(n, "mouseenter", this.constructIndicator.bind(this)), T(n, "mousedown", this.createGuideLine.bind(this)), e.remove();
+  }
+}
+const Ue = N({
+  name: "Ruler",
+  components: {
+    IconLineShow: Ae,
+    IconLineHide: Oe
+  },
+  setup() {
+    const t = j(), e = m(null), n = m(null), o = m(null), s = m(null), i = m(!0), a = m(0), h = m(0), c = document.documentElement.clientWidth;
+    pe(() => {
+      if (e.value && n.value) {
+        const { canvas: u, guideLine: d } = t, L = Math.max(u.width, c);
+        o.value ? o.value.setSize(L, 20, u.scale) : (o.value = new te(e.value, {
+          direction: "TB",
+          width: L,
+          scale: u.scale,
+          coorChange: (v, $, W) => {
+            v === "add" ? d.h.push($) : v === "update" && $ !== W ? (d.h = d.h.filter((k) => k !== W), d.h.push($)) : v === "delete" && (d.h = d.h.filter((k) => k !== $));
+          }
+        }), o.value.setGuideLines(d.h)), s.value ? s.value.setSize(u.height, 20, u.scale) : (s.value = new te(n.value, {
+          direction: "LR",
+          width: u.height,
+          scale: u.scale,
+          coorChange: (v, $, W) => {
+            v === "add" ? d.v.push($) : v === "update" && $ !== W ? (d.v = d.v.filter((k) => k !== W), d.v.push($)) : v === "delete" && (d.v = d.v.filter((k) => k !== $));
+          }
+        }), s.value.setGuideLines(d.v));
+      }
+    });
+    const r = () => {
+      o.value && s.value && (i.value = !i.value, o.value.toggleGuide(i.value), s.value.toggleGuide(i.value));
+    }, p = (u) => {
+      const d = u.target;
+      a.value = d.scrollLeft, h.value = d.scrollTop;
+    };
+    return se(() => {
+      document.getElementById("canvas-wp")?.addEventListener("scroll", p);
+    }), me(() => {
+      document.getElementById("canvas-wp")?.removeEventListener("scroll", p);
+    }), {
+      visible: i,
+      hRulerWpRef: e,
+      vRulerWpRef: n,
+      toggleGuides: r,
+      vScroll: h,
+      hScroll: a
+    };
+  }
+}), Ze = { class: "canvas-ruler-wp" };
+function je(t, e, n, o, s, i) {
+  const a = H("IconLineShow"), h = xe, c = H("IconLineHide");
+  return y(), R("div", Ze, [
+    f("div", {
+      ref: "hRulerWpRef",
+      class: "ruler-wrapper h-container",
+      style: b(`transform: translateX(-${t.hScroll}px);`)
+    }, null, 4),
+    f("div", {
+      ref: "vRulerWpRef",
+      class: "ruler-wrapper v-container",
+      style: b(`transform: rotate(90deg) translateX(-${t.vScroll}px);`)
+    }, null, 4),
+    f("div", {
+      title: "切换参考线",
+      class: "ruler-corner",
+      onClick: e[0] || (e[0] = (...r) => t.toggleGuides && t.toggleGuides(...r))
+    }, [
+      t.visible ? (y(), Y(h, { key: 0 }, {
+        default: U(() => [
+          Z(a)
+        ]),
+        _: 1
+      })) : (y(), Y(h, { key: 1 }, {
+        default: U(() => [
+          Z(c)
+        ]),
+        _: 1
+      }))
+    ])
+  ]);
+}
+const _e = /* @__PURE__ */ I(Ue, [["render", je]]), Je = N({
+  name: "CanvasMain",
+  components: {
+    AlignLine: Ie,
+    Ruler: _e,
+    CanvasArea: He,
+    DatavTransform: De
+  },
+  setup() {
+    const t = Le(), e = $e(), n = j(), { hideMenu: o } = Te(), { pageConfig: s, canvas: i, editMode: a } = fe(n), h = P(() => e.coms.filter((g) => n.selectedPage?.children.includes(g.id))), c = m(!1), r = m(0), p = m(0), u = m(0), d = m(0), L = m(0), v = m(0), $ = 60, W = 60, k = P(() => ({
+      width: `${i.value.width}px`,
+      height: `${i.value.height}px`,
+      position: "absolute"
+    }));
+    K(
+      () => s.value.resourceList[s.value.bgimage],
+      () => {
+        _();
+      },
+      {
+        deep: !0
+      }
+    );
+    const G = m(""), _ = async () => {
+      let l = s.value.resourceList[s.value.bgimage];
+      l ? (l.startsWith("http"), G.value = l) : G.value = "";
+    }, ie = P(() => {
+      const l = {};
+      return s.value.bgimage && (l.backgroundImage = `url(${G.value})`), s.value?.bgcolor?.includes("gradient") ? l.backgroundImage = s.value.bgcolor : l.backgroundColor = s.value.bgcolor, {
+        width: `${s.value.width}px`,
+        height: `${s.value.height}px`,
+        transform: `scale(${i.value.scale}) translate(0px, 0px)`,
+        ...l
+      };
+    });
+    se(() => {
+      _();
+    });
+    const ae = async (l) => {
+      if (l.preventDefault(), !!a.value)
+        try {
+          const g = l.dataTransfer.getData("text");
+          if (g) {
+            t.addLoading();
+            let w = await Se(g);
+            const { scale: E } = i.value, { left: B, top: C } = t.getPanelOffset, x = document.getElementById("canvas-wp"), X = x?.scrollLeft || 0, z = x?.scrollTop || 0, S = (X + l.clientX - B) / E, F = (z + l.clientY - C) / E;
+            w.attr.x = Math.round(S - w.attr.w / 2), w.attr.y = Math.round(F - w.attr.h / 2), await Me(w), e.select(w.id), t.removeLoading();
+          }
+        } catch (g) {
+          be("dropToAddCom", g.message);
+        }
+    }, le = (l) => {
+      l.preventDefault(), l.stopPropagation(), l.dataTransfer.dropEffect = "copy";
+    }, re = (l) => {
+      const g = l.target;
+      ["canvas-panel", "screen-shot", "canvas-panel-wrap"].includes(g.className) ? c.value = !0 : c.value = !1;
+    }, ce = () => {
+      c.value && (c.value = !1, e.select(""));
+    }, J = () => {
+      L.value = 0, v.value = 0;
+    }, de = () => h?.value?.filter((l) => l.locked || l.hided || !l.hovered ? (l.selected = !1, !1) : (l.selected = !0, !0)), ue = () => {
+      const { scale: l } = i.value, g = (u.value - $) / l, w = (d.value - W) / l, E = L.value / l, B = v.value / l;
+      h?.value?.forEach((C) => {
+        if (C.locked || C.hided)
+          return;
+        const { x, y: X, w: z, h: S } = C.attr, F = { x: g, y: w, w: E, h: B }, ve = { x, y: X, w: z, h: S };
+        C.hovered = Ce(F, ve);
+      });
+    }, he = (l) => {
+      if (!a.value) return;
+      if (c.value = !0, n.contextMenu.show)
+        return c.value = !1, o(), !1;
+      const g = document.getElementById("screen-wp");
+      r.value = g.clientWidth, p.value = g.clientHeight;
+      const w = g.getBoundingClientRect(), E = w.x, B = w.y, C = l.clientX, x = l.clientY;
+      u.value = C - E, d.value = x - B;
+      const X = (S) => {
+        S.clientX < C && (u.value = S.clientX - E), S.clientY < x && (d.value = S.clientY - B), L.value = Math.abs(S.clientX - C), v.value = Math.abs(S.clientY - x), ue(), c.value = !1;
+      }, z = () => {
+        T(document, "mousemove", X), T(document, "mouseup", z), J(), de(), c.value && re(l);
+      };
+      M(document, "mousemove", X), M(document, "mouseup", z);
+    };
+    return K(
+      () => n.canvas.scale,
+      () => {
+        J(), o();
+      }
+    ), {
+      imgUrl: G,
+      ComType: ne,
+      coms: h,
+      canvasPanelStyle: ie,
+      screenShotStyle: k,
+      selectionW: r,
+      selectionH: p,
+      areaStartX: u,
+      areaStartY: d,
+      areaWidth: L,
+      areaHeight: v,
+      dragOver: le,
+      dropToAddCom: ae,
+      handleMouseDown: he,
+      cancelSelected: ce,
+      editMode: a
+    };
+  }
+}), Ke = { class: "canvas-main" };
+function Qe(t, e, n, o, s, i) {
+  const a = H("DatavTransform"), h = H("AlignLine"), c = H("CanvasArea");
+  return y(), R("div", Ke, [
+    f("div", {
+      id: "canvas-wp",
+      class: "canvas-panel-wrap",
+      onClick: e[3] || (e[3] = (...r) => t.cancelSelected && t.cancelSelected(...r))
+    }, [
+      f("div", {
+        id: "screen-wp",
+        class: "screen-shot",
+        style: b(t.screenShotStyle),
+        onMousedown: e[2] || (e[2] = (...r) => t.handleMouseDown && t.handleMouseDown(...r))
+      }, [
+        f("div", {
+          id: "canvas-coms",
+          class: "canvas-panel",
+          style: b(t.canvasPanelStyle),
+          onDragover: e[0] || (e[0] = (...r) => t.dragOver && t.dragOver(...r)),
+          onDrop: e[1] || (e[1] = (...r) => t.dropToAddCom && t.dropToAddCom(...r))
+        }, [
+          Z(ge, { name: "list" }, {
+            default: U(() => [
+              (y(!0), R(we, null, ye(t.coms, (r) => (y(), Y(a, {
+                key: r.id,
+                com: r,
+                editable: t.editMode
+              }, null, 8, ["com", "editable"]))), 128))
+            ]),
+            _: 1
+          })
+        ], 36),
+        t.editMode ? (y(), Y(h, { key: 0 })) : q("", !0)
+      ], 36),
+      t.editMode && (t.areaWidth > 0 || t.areaHeight > 0) ? (y(), Y(c, {
+        key: 0,
+        "start-x": t.areaStartX,
+        "start-y": t.areaStartY,
+        width: t.areaWidth,
+        height: t.areaHeight,
+        style: b({
+          width: `${t.selectionW}px`,
+          height: `${t.selectionH}px`
+        })
+      }, null, 8, ["start-x", "start-y", "width", "height", "style"])) : q("", !0)
+    ]),
+    e[4] || (e[4] = f("div", { class: "thumbnail" }, null, -1))
+  ]);
+}
+const lt = /* @__PURE__ */ I(Je, [["render", Qe], ["__scopeId", "data-v-472fb032"]]);
+export {
+  lt as default
+};