import { onMounted, onUnmounted, toRaw, defineComponent, useCssVars, computed, openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, renderList, normalizeStyle, unref, createCommentVNode, createElementVNode, createBlock, withCtx, resolveDynamicComponent, reactive, watch, resolveComponent, toRefs, ref, pushScopeId, popScopeId, createVNode, provide } from "vue";
import { u as useChartEditStore, aI as EditCanvasTypeEnum, D as useContextMenu, aJ as loadingStart, aH as DragKeyEnum, aK as loadingFinish, a2 as JSONParse, c as createComponent, aM as setComponentPosition, aL as loadingError, l as lodashExports, G as MouseEventButton, y as useDesignStore, _ as _export_sfc, aN as colorCustomMerge, aO as animationsClass, aP as getFilterStyle, aQ as getTransformStyle, aR as getBlendModeStyle, M as MenuEnum, F as divider, O as useSettingStore, I as cloneDeep, a6 as throttle, aS as watermarkText, aT as selectBoxIndex, aU as listen, aV as SCALE_KEY } from "./index-67bc0910.js";
import { u as useAddKeyboard } from "./useKeyboard.hook-1f5d8d36.js";
import { C as ContentBox } from "./index-42e17fe3.js";
import { u as useChartLayoutStore, C as ChartLayoutStoreEnum } from "./chartLayoutStore-de4e7ebb.js";
const chartEditStore$1 = useChartEditStore();
const useLayout = (fn) => {
  let removeScale = () => {
  };
  onMounted(async () => {
    chartEditStore$1.setEditCanvas(
      EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
      document.getElementById("go-chart-edit-layout")
    );
    chartEditStore$1.setEditCanvas(
      EditCanvasTypeEnum.EDIT_CONTENT_DOM,
      document.getElementById("go-chart-edit-content")
    );
    await fn();
    removeScale = chartEditStore$1.listenerScale();
  });
  onUnmounted(() => {
    chartEditStore$1.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null);
    chartEditStore$1.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null);
    removeScale();
  });
};
const chartEditStore = useChartEditStore();
const { onClickOutSide } = useContextMenu();
const dragHandle = async (e) => {
  e.preventDefault();
  try {
    loadingStart();
    const drayDataString = e.dataTransfer.getData(DragKeyEnum.DRAG_KEY);
    if (!drayDataString) {
      loadingFinish();
      return;
    }
    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false);
    const dropData = JSONParse(drayDataString);
    if (dropData.disabled)
      return;
    let newComponent = await createComponent(dropData);
    if (dropData.redirectComponent) {
      dropData.dataset && (newComponent.option.dataset = dropData.dataset);
      newComponent.chartConfig.title = dropData.title;
      newComponent.chartConfig.chartFrame = dropData.chartFrame;
    }
    setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2);
    chartEditStore.addComponentList(newComponent, false, true);
    chartEditStore.setTargetSelectChart(newComponent.id);
    loadingFinish();
  } catch (error) {
    loadingError();
    window["$message"].warning(`图表正在研发中, 敬请期待...`);
  }
};
const dragoverHandle = (e) => {
  e.preventDefault();
  e.stopPropagation();
  if (e.dataTransfer)
    e.dataTransfer.dropEffect = "copy";
};
const mousedownHandleUnStop = (e, item) => {
  if (item) {
    chartEditStore.setTargetSelectChart(item.id);
    return;
  }
  chartEditStore.setTargetSelectChart(void 0);
};
const mousedownBoxSelect = (e, item) => {
  var _a;
  if (e.which == 2)
    return;
  if ((_a = window.$KeyboardActive) == null ? void 0 : _a.space)
    return;
  mousedownHandleUnStop();
  const startOffsetX = e.offsetX;
  const startOffsetY = e.offsetY;
  const startScreenX = e.screenX;
  const startScreenY = e.screenY;
  const scale = chartEditStore.getEditCanvas.scale;
  chartEditStore.setMousePosition(void 0, void 0, startOffsetX, startOffsetY);
  const mousemove = lodashExports.throttle((moveEvent) => {
    chartEditStore.setTargetSelectChart();
    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, true);
    const currX = startOffsetX + moveEvent.screenX - startScreenX;
    const currY = startOffsetY + moveEvent.screenY - startScreenY;
    chartEditStore.setMousePosition(currX, currY);
    const selectAttr = {
      // 左上角
      x1: 0,
      y1: 0,
      // 右下角
      x2: 0,
      y2: 0
    };
    if (currX > startOffsetX && currY > startOffsetY) {
      selectAttr.x1 = startOffsetX;
      selectAttr.y1 = startOffsetY;
      selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale);
      selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale);
    } else if (currX > startOffsetX && currY < startOffsetY) {
      selectAttr.x1 = startOffsetX;
      selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale);
      selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale);
      selectAttr.y2 = startOffsetY;
    } else if (currX < startOffsetX && currY > startOffsetY) {
      selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale);
      selectAttr.y1 = startOffsetY;
      selectAttr.x2 = startOffsetX;
      selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale);
    } else {
      selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale);
      selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale);
      selectAttr.x2 = startOffsetX;
      selectAttr.y2 = startOffsetY;
    }
    chartEditStore.getComponentList.forEach((item2) => {
      if (!chartEditStore.getTargetChart.selectId.includes(item2.id)) {
        const { x, y, w, h } = item2.attr;
        const targetAttr = {
          // 左上角
          x1: x,
          y1: y,
          // 右下角
          x2: x + w,
          y2: y + h
        };
        if (targetAttr.x1 - selectAttr.x1 >= 0 && targetAttr.y1 - selectAttr.y1 >= 0 && targetAttr.x2 - selectAttr.x2 <= 0 && targetAttr.y2 - selectAttr.y2 <= 0 && !item2.status.lock && !item2.status.hide) {
          chartEditStore.setTargetSelectChart(item2.id, true);
        }
      }
    });
  }, 30);
  const mouseup = () => {
    mousemove.cancel();
    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, false);
    chartEditStore.setMousePosition(0, 0, 0, 0);
    document.removeEventListener("mousemove", mousemove);
    document.removeEventListener("mouseup", mouseup);
  };
  document.addEventListener("mousemove", mousemove);
  document.addEventListener("mouseup", mouseup);
};
const useMouseHandle = () => {
  const mouseClickHandle = (e, item) => {
    var _a;
    e.preventDefault();
    e.stopPropagation();
    if (item.status.lock)
      return;
    if ((_a = window.$KeyboardActive) == null ? void 0 : _a.ctrl) {
      if (chartEditStore.targetChart.selectId.includes(item.id)) {
        const exList = chartEditStore.targetChart.selectId.filter((e2) => e2 !== item.id);
        chartEditStore.setTargetSelectChart(exList);
      } else {
        chartEditStore.setTargetSelectChart(item.id, true);
      }
    }
  };
  const mousedownHandle = (e, item) => {
    var _a;
    e.preventDefault();
    e.stopPropagation();
    if (item.status.lock)
      return;
    onClickOutSide();
    if (e.buttons === MouseEventButton.LEFT && ((_a = window.$KeyboardActive) == null ? void 0 : _a.ctrl))
      return;
    const selectId = chartEditStore.getTargetChart.selectId;
    if (e.buttons === MouseEventButton.RIGHT && selectId.length > 1 && selectId.includes(item.id))
      return;
    chartEditStore.setTargetSelectChart(item.id);
    if (e.buttons === MouseEventButton.RIGHT)
      return;
    const scale = chartEditStore.getEditCanvas.scale;
    const canvasWidth = chartEditStore.getEditCanvasConfig.width;
    const canvasHeight = chartEditStore.getEditCanvasConfig.height;
    const targetMap = /* @__PURE__ */ new Map();
    chartEditStore.getTargetChart.selectId.forEach((id) => {
      const index2 = chartEditStore.fetchTargetIndex(id);
      if (index2 !== -1) {
        const { x, y, w, h } = toRaw(chartEditStore.getComponentList[index2]).attr;
        targetMap.set(id, { x, y, w, h });
      }
    });
    const startX = e.screenX;
    const startY = e.screenY;
    let prevComponentInstance = [];
    chartEditStore.getTargetChart.selectId.forEach((id) => {
      if (!targetMap.has(id))
        return;
      const index2 = chartEditStore.fetchTargetIndex(id);
      prevComponentInstance.push(lodashExports.cloneDeep(chartEditStore.getComponentList[index2]));
    });
    chartEditStore.setMousePosition(void 0, void 0, startX, startY);
    const mousemove = lodashExports.throttle((moveEvent) => {
      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true);
      chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY);
      let offsetX = (moveEvent.screenX - startX) / scale;
      let offsetY = (moveEvent.screenY - startY) / scale;
      chartEditStore.getTargetChart.selectId.forEach((id) => {
        if (!targetMap.has(id))
          return;
        const index2 = chartEditStore.fetchTargetIndex(id);
        const { x, y, w, h } = targetMap.get(id);
        const componentInstance = chartEditStore.getComponentList[index2];
        let currX = Math.round(x + offsetX);
        let currY = Math.round(y + offsetY);
        const distance = 50;
        currX = currX < -w + distance ? -w + distance : currX;
        currY = currY < -h + distance ? -h + distance : currY;
        currX = currX > canvasWidth - distance ? canvasWidth - distance : currX;
        currY = currY > canvasHeight - distance ? canvasHeight - distance : currY;
        if (componentInstance) {
          componentInstance.attr = Object.assign(componentInstance.attr, {
            x: currX,
            y: currY
          });
        }
      });
      return;
    }, 20);
    const mouseup = () => {
      try {
        chartEditStore.setMousePosition(0, 0, 0, 0);
        chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false);
        if (prevComponentInstance.length) {
          chartEditStore.getTargetChart.selectId.forEach((id) => {
            if (!targetMap.has(id))
              return;
            const index2 = chartEditStore.fetchTargetIndex(id);
            const curComponentInstance = chartEditStore.getComponentList[index2];
            prevComponentInstance.forEach((preItem) => {
              if (preItem.id === id) {
                preItem.attr = Object.assign(preItem.attr, {
                  offsetX: curComponentInstance.attr.x - preItem.attr.x,
                  offsetY: curComponentInstance.attr.y - preItem.attr.y
                });
              }
            });
          });
          chartEditStore.moveComponentList(prevComponentInstance);
        }
        document.removeEventListener("mousemove", mousemove);
        document.removeEventListener("mouseup", mouseup);
      } catch (err) {
        console.log(err);
      }
    };
    document.addEventListener("mousemove", mousemove);
    document.addEventListener("mouseup", mouseup);
  };
  const mouseenterHandle = (e, item) => {
    e.preventDefault();
    e.stopPropagation();
    if (!chartEditStore.getEditCanvas.isSelect) {
      chartEditStore.setTargetHoverChart(item.id);
    }
  };
  const mouseleaveHandle = (e, item) => {
    e.preventDefault();
    e.stopPropagation();
    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false);
    chartEditStore.setTargetHoverChart(void 0);
  };
  return { mouseClickHandle, mousedownHandle, mouseenterHandle, mouseleaveHandle };
};
const useMousePointHandle = (e, point, attr) => {
  e.stopPropagation();
  e.preventDefault();
  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true);
  const scale = chartEditStore.getEditCanvas.scale;
  const itemAttrX = attr.x;
  const itemAttrY = attr.y;
  const itemAttrW = attr.w;
  const itemAttrH = attr.h;
  const startX = e.screenX;
  const startY = e.screenY;
  chartEditStore.setMousePosition(startX, startY);
  const mousemove = lodashExports.throttle((moveEvent) => {
    chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY);
    let currX = Math.round((moveEvent.screenX - startX) / scale);
    let currY = Math.round((moveEvent.screenY - startY) / scale);
    const isTop = /t/.test(point);
    const isBottom = /b/.test(point);
    const isLeft = /l/.test(point);
    const isRight = /r/.test(point);
    const newHeight = itemAttrH + (isTop ? -currY : isBottom ? currY : 0);
    const newWidth = itemAttrW + (isLeft ? -currX : isRight ? currX : 0);
    attr.h = newHeight > 0 ? newHeight : 0;
    attr.w = newWidth > 0 ? newWidth : 0;
    attr.x = itemAttrX + (isLeft ? currX : 0);
    attr.y = itemAttrY + (isTop ? currY : 0);
  }, 50);
  const mouseup = () => {
    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false);
    chartEditStore.setMousePosition(0, 0, 0, 0);
    document.removeEventListener("mousemove", mousemove);
    document.removeEventListener("mouseup", mouseup);
  };
  document.addEventListener("mousemove", mousemove);
  document.addEventListener("mouseup", mouseup);
};
const useComponentStyle = (attr, index2) => {
  if (!attr)
    return {};
  const componentStyle = {
    zIndex: index2 + 1,
    left: `${attr.x}px`,
    top: `${attr.y}px`
  };
  return componentStyle;
};
const useSizeStyle = (attr, scale) => {
  if (!attr)
    return {};
  return {
    width: `${scale ? scale * attr.w : attr.w}px`,
    height: `${scale ? scale * attr.h : attr.h}px`
  };
};
const usePointStyle = (point, index2, attr, cursorResize) => {
  const { w: width, h: height } = attr;
  const isTop = /t/.test(point);
  const isBottom = /b/.test(point);
  const isLeft = /l/.test(point);
  const isRight = /r/.test(point);
  let newLeft = 0;
  let newTop = 0;
  if (point.length === 2) {
    newLeft = isLeft ? 0 : width;
    newTop = isTop ? 0 : height;
  } else {
    if (isTop || isBottom) {
      newLeft = width / 2;
      newTop = isTop ? 0 : height;
    }
    if (isLeft || isRight) {
      newLeft = isLeft ? 0 : width;
      newTop = Math.floor(height / 2);
    }
  }
  const style = {
    left: `${newLeft}px`,
    top: `${newTop}px`,
    cursor: cursorResize[index2] + "-resize"
  };
  return style;
};
const _hoisted_1$4 = ["onMousedown"];
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    item: {
      type: Object,
      required: true
    },
    hiddenPoint: {
      type: Boolean,
      required: false
    }
  },
  setup(__props) {
    const props = __props;
    useCssVars((_ctx) => ({
      "2d925dfa": themeColor.value
    }));
    const designStore = useDesignStore();
    const chartEditStore2 = useChartEditStore();
    const pointList = ["t", "r", "b", "l", "lt", "rt", "lb", "rb"];
    const cursorResize = ["n", "e", "s", "w", "nw", "ne", "sw", "se"];
    const themeColor = computed(() => {
      return designStore.getAppTheme;
    });
    const hover = computed(() => {
      const isDrag = chartEditStore2.getEditCanvas[EditCanvasTypeEnum.IS_DRAG];
      if (isDrag)
        return false;
      if (props.item.status.lock)
        return false;
      return props.item.id === chartEditStore2.getTargetChart.hoverId;
    });
    const select = computed(() => {
      const id = props.item.id;
      if (props.item.status.lock)
        return false;
      return chartEditStore2.getTargetChart.selectId.find((e) => e === id);
    });
    const lock = computed(() => {
      return props.item.status.lock;
    });
    const hide = computed(() => {
      return props.item.status.hide;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["go-shape-box", { lock: lock.value, hide: hide.value }])
      }, [
        renderSlot(_ctx.$slots, "default", {}, void 0, true),
        !__props.hiddenPoint ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(select.value ? pointList : [], (point, index2) => {
          return openBlock(), createElementBlock("div", {
            class: normalizeClass(`shape-point ${point}`),
            key: index2,
            style: normalizeStyle(unref(usePointStyle)(point, index2, __props.item.attr, cursorResize)),
            onMousedown: ($event) => unref(useMousePointHandle)($event, point, __props.item.attr)
          }, null, 46, _hoisted_1$4);
        }), 128)) : createCommentVNode("", true),
        createElementVNode("div", {
          class: "shape-modal",
          style: normalizeStyle(unref(useSizeStyle)(__props.item.attr))
        }, [
          createElementVNode("div", {
            class: normalizeClass(["shape-modal-select", { active: select.value }])
          }, null, 2),
          createElementVNode("div", {
            class: normalizeClass(["shape-modal-change", { selectActive: select.value, hoverActive: hover.value }])
          }, null, 2)
        ], 4)
      ], 2);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_25c3c11c_lang = "";
const EditShapeBox = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-25c3c11c"]]);
const _hoisted_1$3 = { class: "go-edit-group-box" };
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    groupData: {
      type: Object,
      required: true
    },
    groupIndex: {
      type: Number,
      required: true
    }
  },
  setup(__props) {
    const chartEditStore2 = useChartEditStore();
    const { handleContextMenu } = useContextMenu();
    const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle();
    const optionsHandle = (targetList, allList, targetInstance) => {
      const filter = (menulist) => {
        return allList.filter((i) => menulist.includes(i.key));
      };
      if (chartEditStore2.getTargetChart.selectId.length > 1) {
        return filter([MenuEnum.GROUP, MenuEnum.DELETE]);
      } else {
        const statusMenuEnums = [];
        if (targetInstance.status.lock) {
          statusMenuEnums.push(MenuEnum.LOCK);
        } else {
          statusMenuEnums.push(MenuEnum.UNLOCK);
        }
        if (targetInstance.status.hide) {
          statusMenuEnums.push(MenuEnum.HIDE);
        } else {
          statusMenuEnums.push(MenuEnum.SHOW);
        }
        const singleMenuEnums = [MenuEnum.UN_GROUP];
        return [
          ...filter(singleMenuEnums),
          divider(),
          ...targetList.filter((i) => !statusMenuEnums.includes(i.key))
        ];
      }
    };
    const themeColor = computed(() => {
      const colorCustomMergeData = colorCustomMerge(chartEditStore2.getEditCanvasConfig.chartCustomThemeColorInfo);
      return colorCustomMergeData[chartEditStore2.getEditCanvasConfig.chartThemeColor];
    });
    const themeSetting = computed(() => {
      const chartThemeSetting = chartEditStore2.getEditCanvasConfig.chartThemeSetting;
      return chartThemeSetting;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$3, [
        (openBlock(), createBlock(unref(EditShapeBox), {
          key: __props.groupData.id,
          "data-id": __props.groupData.id,
          index: __props.groupIndex,
          item: __props.groupData,
          hiddenPoint: true,
          class: normalizeClass(unref(animationsClass)(__props.groupData.styles.animations)),
          style: normalizeStyle({
            ...unref(useComponentStyle)(__props.groupData.attr, __props.groupIndex),
            ...unref(useSizeStyle)(__props.groupData.attr),
            ...unref(getFilterStyle)(__props.groupData.styles),
            ...unref(getTransformStyle)(__props.groupData.styles),
            ...unref(getBlendModeStyle)(__props.groupData.styles)
          }),
          onClick: _cache[0] || (_cache[0] = ($event) => unref(mouseClickHandle)($event, __props.groupData)),
          onMousedown: _cache[1] || (_cache[1] = ($event) => unref(mousedownHandle)($event, __props.groupData)),
          onMouseenter: _cache[2] || (_cache[2] = ($event) => unref(mouseenterHandle)($event, __props.groupData)),
          onMouseleave: _cache[3] || (_cache[3] = ($event) => unref(mouseleaveHandle)($event, __props.groupData)),
          onContextmenu: _cache[4] || (_cache[4] = ($event) => unref(handleContextMenu)($event, __props.groupData, optionsHandle))
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.groupData.groupList, (item) => {
              return openBlock(), createBlock(unref(EditShapeBox), {
                key: item.id,
                "data-id": item.id,
                index: __props.groupIndex,
                item,
                hiddenPoint: true,
                style: normalizeStyle({
                  ...unref(useComponentStyle)(item.attr, __props.groupIndex)
                })
              }, {
                default: withCtx(() => [
                  (openBlock(), createBlock(resolveDynamicComponent(item.chartConfig.chartKey), {
                    class: normalizeClass(["edit-content-chart", unref(animationsClass)(item.styles.animations)]),
                    chartConfig: item,
                    themeSetting: themeSetting.value,
                    themeColor: themeColor.value,
                    style: normalizeStyle({
                      ...unref(useSizeStyle)(item.attr),
                      ...unref(getFilterStyle)(item.styles),
                      ...unref(getTransformStyle)(item.styles)
                    })
                  }, null, 8, ["class", "chartConfig", "themeSetting", "themeColor", "style"]))
                ]),
                _: 2
              }, 1032, ["data-id", "index", "item", "style"]);
            }), 128))
          ]),
          _: 1
        }, 8, ["data-id", "index", "item", "class", "style"]))
      ]);
    };
  }
});
const _hoisted_1$2 = { class: "go-edit-align-line" };
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    useCssVars((_ctx) => ({
      "2a25621e": themeColor.value
    }));
    const designStore = useDesignStore();
    const chartEditStore2 = useChartEditStore();
    const settingStore = useSettingStore();
    const line = reactive({
      // 行横向row（上中下），列竖线col（左中右）
      lineArr: ["rowt", "rowc", "rowb", "coll", "colc", "colr"],
      // 展示线
      select: /* @__PURE__ */ new Map(),
      // 已经吸附
      sorptioned: {
        x: false,
        y: false
      }
    });
    const useComponentStyle2 = (attr) => {
      if (!attr)
        return {};
      const componentStyle = {
        left: `${attr.x ? attr.x : 0}px`,
        top: `${attr.y ? attr.y : 0}px`
      };
      return componentStyle;
    };
    const themeColor = computed(() => {
      return designStore.getAppTheme;
    });
    const minDistance = computed(() => {
      return settingStore.getChartAlignRange;
    });
    const isComputedLine = computed(() => {
      const isDrag = chartEditStore2.getEditCanvas[EditCanvasTypeEnum.IS_DRAG];
      return isDrag;
    });
    const isSorption = (selectValue, componentValue) => {
      const isSorption2 = Math.abs(selectValue - componentValue) <= minDistance.value;
      return isSorption2;
    };
    const selectId = computed(() => chartEditStore2.getTargetChart.selectId);
    const selectTarget = computed(() => chartEditStore2.getComponentList[chartEditStore2.fetchTargetIndex()]);
    const selectAttr = computed(() => {
      var _a;
      return ((_a = selectTarget.value) == null ? void 0 : _a.attr) || {};
    });
    const canvasPositionList = computed(() => {
      return {
        id: "0",
        attr: {
          w: cloneDeep(chartEditStore2.getEditCanvasConfig.width),
          h: cloneDeep(chartEditStore2.getEditCanvasConfig.height),
          x: 0,
          y: 0,
          offsetX: 0,
          offsetY: 0,
          zIndex: 0
        }
      };
    });
    watch(
      () => chartEditStore2.getMousePosition,
      throttle(() => {
        try {
          if (!isComputedLine.value || selectId.value.length !== 1)
            return;
          const selectW = selectAttr.value.w;
          const selectH = selectAttr.value.h;
          const selectLeftX = selectAttr.value.x;
          const selectHalfX = selectLeftX + selectW / 2;
          const selectRightX = selectLeftX + selectW;
          const seletX = [selectLeftX, selectHalfX, selectRightX];
          const selectTopY = selectAttr.value.y;
          const selectHalfY = selectTopY + selectH / 2;
          const selectBottomY = selectTopY + selectH;
          const selectY = [selectTopY, selectHalfY, selectBottomY];
          line.select.clear();
          line.sorptioned.y = false;
          const componentList = chartEditStore2.getComponentList.map((e) => {
            return {
              id: e.id,
              attr: e.attr
            };
          });
          componentList.push(canvasPositionList.value);
          line.lineArr.forEach((lineItem) => {
            componentList.forEach((component) => {
              if (selectId.value[0] === component.id)
                return;
              const componentW = component.attr.w;
              const componentH = component.attr.h;
              const componentLeftX = component.attr.x;
              const componentHalfX = componentLeftX + componentW / 2;
              const componentRightX = componentLeftX + componentW;
              const componentX = [componentLeftX, componentHalfX, componentRightX];
              const componentTopY = component.attr.y;
              const componentHalfY = componentTopY + componentH / 2;
              const componentBottomY = componentTopY + componentH;
              const componentY = [componentTopY, componentHalfY, componentBottomY];
              if (lineItem.includes("rowt")) {
                if (isSorption(selectTopY, componentTopY)) {
                  line.select.set(lineItem, { y: componentTopY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentTopY);
                }
                if (isSorption(selectTopY, componentHalfY)) {
                  line.select.set(lineItem, { y: componentHalfY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentHalfY);
                }
                if (isSorption(selectTopY, componentBottomY)) {
                  line.select.set(lineItem, { y: componentBottomY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentBottomY);
                }
              }
              if (lineItem.includes("rowc")) {
                if (isSorption(selectHalfY, componentTopY)) {
                  line.select.set(lineItem, { y: componentTopY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH / 2);
                }
                if (isSorption(selectHalfY, componentHalfY)) {
                  line.select.set(lineItem, { y: componentHalfY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH / 2);
                }
                if (isSorption(selectHalfY, componentBottomY)) {
                  line.select.set(lineItem, { y: componentBottomY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH / 2);
                }
              }
              if (lineItem.includes("rowb")) {
                if (isSorption(selectBottomY, componentTopY)) {
                  line.select.set(lineItem, { y: componentTopY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH);
                }
                if (isSorption(selectBottomY, componentHalfY)) {
                  line.select.set(lineItem, { y: componentHalfY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH);
                }
                if (isSorption(selectBottomY, componentBottomY)) {
                  line.select.set(lineItem, { y: componentBottomY });
                  setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH);
                }
              }
              if (lineItem.includes("coll")) {
                if (isSorption(selectLeftX, componentLeftX)) {
                  line.select.set(lineItem, { x: componentLeftX });
                  setComponentPosition(selectTarget.value, componentLeftX, selectTopY);
                }
                if (isSorption(selectLeftX, componentHalfX)) {
                  line.select.set(lineItem, { x: componentHalfX });
                  setComponentPosition(selectTarget.value, componentHalfX, selectTopY);
                }
                if (isSorption(selectLeftX, componentRightX)) {
                  line.select.set(lineItem, { x: componentRightX });
                  setComponentPosition(selectTarget.value, componentRightX, selectTopY);
                }
              }
              if (lineItem.includes("colc")) {
                if (isSorption(selectHalfX, componentLeftX)) {
                  line.select.set(lineItem, { x: componentLeftX });
                  setComponentPosition(selectTarget.value, componentLeftX - selectW / 2, selectTopY);
                }
                if (isSorption(selectHalfX, componentHalfX)) {
                  line.select.set(lineItem, { x: componentHalfX });
                  setComponentPosition(selectTarget.value, componentHalfX - selectW / 2, selectTopY);
                }
                if (isSorption(selectHalfX, componentRightX)) {
                  line.select.set(lineItem, { x: componentRightX });
                  setComponentPosition(selectTarget.value, componentRightX - selectW / 2, selectTopY);
                }
              }
              if (lineItem.includes("colr")) {
                if (isSorption(selectRightX, componentLeftX)) {
                  line.select.set(lineItem, { x: componentLeftX });
                  setComponentPosition(selectTarget.value, componentLeftX - selectW, selectTopY);
                }
                if (isSorption(selectRightX, componentHalfX)) {
                  line.select.set(lineItem, { x: componentHalfX });
                  setComponentPosition(selectTarget.value, componentHalfX - selectW, selectTopY);
                }
                if (isSorption(selectRightX, componentRightX)) {
                  line.select.set(lineItem, { x: componentRightX });
                  setComponentPosition(selectTarget.value, componentRightX - selectW, selectTopY);
                }
              }
            });
          });
        } catch (err) {
          console.log(err);
        }
      }, 200),
      {
        deep: true
      }
    );
    watch(
      () => isComputedLine.value,
      (val) => {
        if (!val) {
          line.select.clear();
          line.sorptioned.y = false;
        }
      }
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$2, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(line.lineArr, (item) => {
          return openBlock(), createElementBlock("div", {
            class: normalizeClass(["line", [item.includes("row") ? "row" : "col", line["select"].has(item) && "visible"]]),
            key: item,
            style: normalizeStyle(useComponentStyle2(line["select"].get(item)))
          }, null, 6);
        }), 128))
      ]);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_792c43f5_lang = "";
const EditAlignLine = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-792c43f5"]]);
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    return (_ctx, _cache) => {
      const _component_n_watermark = resolveComponent("n-watermark");
      return openBlock(), createBlock(_component_n_watermark, {
        id: "go-edit-watermark",
        content: unref(watermarkText),
        cross: "",
        selectable: "",
        "font-size": 16,
        "line-height": 16,
        width: 500,
        height: 150,
        "x-offset": 12,
        "y-offset": 80,
        rotate: -15
      }, null, 8, ["content"]);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_15e7d440_lang = "";
const EditWatermark = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-15e7d440"]]);
const _withScopeId = (n) => (pushScopeId("data-v-fd03a995"), n = n(), popScopeId(), n);
const _hoisted_1$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "select-background" }, null, -1));
const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "select-border" }, null, -1));
const _hoisted_3 = [
  _hoisted_1$1,
  _hoisted_2
];
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    useCssVars((_ctx) => ({
      "3a6a09b6": themeColor.value
    }));
    const designStore = useDesignStore();
    const chartEditStore2 = useChartEditStore();
    const { isSelect, scale } = toRefs(chartEditStore2.getEditCanvas);
    const themeColor = computed(() => {
      return designStore.getAppTheme;
    });
    const positionStyle = ref();
    watch(
      () => chartEditStore2.getMousePosition,
      (positionInfo) => {
        if (!isSelect.value)
          return;
        const { startX, startY, x, y } = positionInfo;
        const attr = {
          zIndex: selectBoxIndex,
          // left
          x: 0,
          // top
          y: 0,
          // 宽
          w: 0,
          // 高
          h: 0,
          // 偏移
          offsetX: 0,
          offsetY: 0
        };
        if (x > startX && y > startY) {
          attr.x = startX;
          attr.y = startY;
          attr.w = Math.round((x - startX) / scale.value);
          attr.h = Math.round((y - startY) / scale.value);
        } else if (x > startX && y < startY) {
          attr.x = startX;
          attr.w = Math.round((x - startX) / scale.value);
          attr.h = Math.round((startY - y) / scale.value);
          attr.y = startY - attr.h;
        } else if (x < startX && y > startY) {
          attr.y = startY;
          attr.w = Math.round((startX - x) / scale.value);
          attr.h = Math.round((y - startY) / scale.value);
          attr.x = startX - attr.w;
        } else {
          attr.w = Math.round((startX - x) / scale.value);
          attr.h = Math.round((startY - y) / scale.value);
          attr.x = startX - attr.w;
          attr.y = startY - attr.h;
        }
        positionStyle.value = {
          ...useComponentStyle(attr, selectBoxIndex),
          ...useSizeStyle(attr)
        };
      },
      {
        deep: true
      }
    );
    return (_ctx, _cache) => {
      return unref(isSelect) ? (openBlock(), createElementBlock("div", {
        key: 0,
        class: "go-edit-select",
        style: normalizeStyle(positionStyle.value)
      }, _hoisted_3, 4)) : createCommentVNode("", true);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_fd03a995_lang = "";
const EditSelect = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-fd03a995"]]);
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const chartEditStore2 = useChartEditStore();
    const { getEditCanvasConfig, getEditCanvas } = toRefs(chartEditStore2);
    const size = computed(() => {
      return {
        w: getEditCanvasConfig.value.width,
        h: getEditCanvasConfig.value.height
      };
    });
    const rangeStyle = computed(() => {
      const scale = {
        transform: `scale(${getEditCanvas.value.scale})`
      };
      return { ...useSizeStyle(size.value), ...scale };
    });
    const rangeModelStyle = computed(() => {
      const dragStyle = getEditCanvas.value.isCreate && { "z-index": 99999 };
      return { ...useSizeStyle(size.value), ...dragStyle };
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "go-edit-range go-transition",
        style: normalizeStyle(rangeStyle.value),
        onMousedown: _cache[0] || (_cache[0] = ($event) => unref(mousedownBoxSelect)($event, void 0))
      }, [
        renderSlot(_ctx.$slots, "default", {}, void 0, true),
        createVNode(unref(EditWatermark)),
        createVNode(unref(EditAlignLine)),
        createVNode(unref(EditSelect)),
        createElementVNode("div", {
          class: "go-edit-range-model",
          style: normalizeStyle(rangeModelStyle.value)
        }, null, 4)
      ], 36);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_d34efa6e_lang = "";
const EditRange = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d34efa6e"]]);
const _hoisted_1 = { class: "go-sketch-rule" };
const thick = 20;
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    useCssVars((_ctx) => ({
      "72798b56": themeColor.value,
      "1b47bf80": containerWidth.value,
      "26ca27c0": cursorStyle.value
    }));
    const chartEditStore2 = useChartEditStore();
    const chartLayoutStore = useChartLayoutStore();
    const designStore = useDesignStore();
    let prevMoveXValue = [0, 0];
    let prevMoveYValue = [0, 0];
    const $app = ref();
    const sketchRuleReDraw = ref(true);
    const refSketchRuleBox = ref();
    const $container = ref();
    const isPressSpace = ref(false);
    const cursorStyle = ref("auto");
    const { width, height } = toRefs(chartEditStore2.getEditCanvasConfig);
    const startX = ref(0);
    const startY = ref(0);
    const lines = reactive({ h: [], v: [] });
    const scale = computed(() => {
      return chartEditStore2.getEditCanvas.scale;
    });
    const containerWidth = computed(() => {
      return `${height.value * 2}px`;
    });
    const paletteStyle = computed(() => {
      const isDarkTheme = designStore.getDarkTheme;
      return isDarkTheme ? {
        bgColor: "#18181c",
        longfgColor: "#4d4d4d",
        shortfgColor: "#4d4d4d",
        fontColor: "#4d4d4d",
        shadowColor: "#18181c",
        borderColor: "#18181c",
        cornerActiveColor: "#18181c"
      } : {};
    });
    const themeColor = computed(() => {
      return designStore.getAppTheme;
    });
    const handleWheel = (e) => {
      if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        let resScale = scale.value;
        if (e.wheelDelta >= 0 && scale.value < 2) {
          resScale = scale.value + 0.05;
          chartEditStore2.setScale(resScale);
          return;
        }
        if (e.wheelDelta < 0 && scale.value > 0.1) {
          resScale = scale.value - 0.05;
          chartEditStore2.setScale(resScale);
        }
      }
    };
    const handleScroll = () => {
      if (!$app.value)
        return;
      const screensRect = $app.value.getBoundingClientRect();
      const canvasRect = refSketchRuleBox.value.getBoundingClientRect();
      startX.value = (screensRect.left + thick - canvasRect.left) / scale.value;
      startY.value = (screensRect.top + thick - canvasRect.top) / scale.value;
    };
    const dragCanvas = (e) => {
      var _a, _b;
      e.preventDefault();
      e.stopPropagation();
      if (e.which == 2)
        isPressSpace.value = true;
      else if (!((_a = window.$KeyboardActive) == null ? void 0 : _a.space))
        return;
      (_b = document.activeElement) == null ? void 0 : _b.blur();
      const startX2 = e.pageX;
      const startY2 = e.pageY;
      const listenMousemove = listen(window, "mousemove", (e2) => {
        const nx = e2.pageX - startX2;
        const ny = e2.pageY - startY2;
        const [prevMoveX1, prevMoveX2] = prevMoveXValue;
        const [prevMoveY1, prevMoveY2] = prevMoveYValue;
        prevMoveXValue = [prevMoveX2, nx];
        prevMoveYValue = [prevMoveY2, ny];
        $app.value.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1);
        $app.value.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1);
      });
      const listenMouseup = listen(window, "mouseup", () => {
        listenMousemove();
        listenMouseup();
        prevMoveXValue = [0, 0];
        prevMoveYValue = [0, 0];
        isPressSpace.value = false;
      });
    };
    const canvasBox = () => {
      const layoutDom = document.getElementById("go-chart-edit-layout");
      if (layoutDom) {
        const scrollW = 20;
        return {
          height: layoutDom.clientHeight - scrollW,
          width: layoutDom.clientWidth - scrollW
        };
      }
      return {
        width: width.value,
        height: height.value
      };
    };
    const reDraw = () => {
      sketchRuleReDraw.value = false;
      setTimeout(() => {
        sketchRuleReDraw.value = true;
      }, 10);
    };
    const canvasPosCenter = () => {
      const { width: containerWidth2, height: containerHeight } = $container.value.getBoundingClientRect();
      const { width: width2, height: height2 } = canvasBox();
      $app.value.scrollLeft = containerWidth2 / 2 - width2 / 2;
      $app.value.scrollTop = containerHeight / 2 - height2 / 2;
    };
    watch(
      () => designStore.getDarkTheme,
      () => {
        reDraw();
      }
    );
    watch(
      () => scale.value,
      (newValue, oldValue) => {
        if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
          chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false);
          handleScroll();
          setTimeout(() => {
            canvasPosCenter();
            reDraw();
          }, 400);
        } else {
          throttle(reDraw, 20);
        }
      }
    );
    watch(
      () => isPressSpace.value,
      (newValue) => {
        cursorStyle.value = newValue ? "grab" : "auto";
      }
    );
    onMounted(() => {
      if ($app.value) {
        $app.value.addEventListener("wheel", handleWheel, { passive: false });
        canvasPosCenter();
      }
    });
    onUnmounted(() => {
      if ($app.value) {
        $app.value.removeEventListener("wheel", handleWheel);
      }
    });
    window.onKeySpacePressHold = (isHold) => {
      isPressSpace.value = isHold;
    };
    return (_ctx, _cache) => {
      const _component_sketch_rule = resolveComponent("sketch-rule");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        sketchRuleReDraw.value ? (openBlock(), createBlock(_component_sketch_rule, {
          key: 0,
          thick,
          scale: scale.value,
          width: canvasBox().width,
          height: canvasBox().height,
          startX: startX.value,
          startY: startY.value,
          lines,
          palette: paletteStyle.value
        }, null, 8, ["scale", "width", "height", "startX", "startY", "lines", "palette"])) : createCommentVNode("", true),
        createElementVNode("div", {
          ref_key: "$app",
          ref: $app,
          class: "edit-screens",
          onScroll: handleScroll
        }, [
          createElementVNode("div", {
            ref_key: "$container",
            ref: $container,
            class: "edit-screen-container",
            style: normalizeStyle({ width: unref(width) * 2 + "px" })
          }, [
            createElementVNode("div", {
              ref_key: "refSketchRuleBox",
              ref: refSketchRuleBox,
              class: "canvas",
              onMousedown: dragCanvas,
              style: normalizeStyle({ marginLeft: "-" + (canvasBox().width / 2 - 25) + "px" })
            }, [
              createElementVNode("div", {
                style: normalizeStyle({ pointerEvents: isPressSpace.value ? "none" : "auto" })
              }, [
                renderSlot(_ctx.$slots, "default", {}, void 0, true)
              ], 4)
            ], 36)
          ], 4)
        ], 544)
      ]);
    };
  }
});
const index_vue_vue_type_style_index_0_lang = "";
const index_vue_vue_type_style_index_1_scoped_db14b1b7_lang = "";
const EditRule = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-db14b1b7"]]);
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const chartEditStore2 = useChartEditStore();
    const { handleContextMenu } = useContextMenu();
    provide(SCALE_KEY, null);
    useLayout(async () => {
    });
    const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle();
    const optionsHandle = (targetList, allList, targetInstance) => {
      if (chartEditStore2.getTargetChart.selectId.length > 1) {
        return allList.filter((i) => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key));
      }
      const statusMenuEnums = [];
      if (targetInstance.status.lock) {
        statusMenuEnums.push(MenuEnum.LOCK);
      } else {
        statusMenuEnums.push(MenuEnum.UNLOCK);
      }
      if (targetInstance.status.hide) {
        statusMenuEnums.push(MenuEnum.HIDE);
      } else {
        statusMenuEnums.push(MenuEnum.SHOW);
      }
      return targetList.filter((i) => !statusMenuEnums.includes(i.key));
    };
    const themeSetting = computed(() => {
      const chartThemeSetting = chartEditStore2.getEditCanvasConfig.chartThemeSetting;
      return chartThemeSetting;
    });
    const themeColor = computed(() => {
      const colorCustomMergeData = colorCustomMerge(chartEditStore2.getEditCanvasConfig.chartCustomThemeColorInfo);
      return colorCustomMergeData[chartEditStore2.getEditCanvasConfig.chartThemeColor];
    });
    computed(() => {
      return chartEditStore2.getEditCanvasConfig.filterShow;
    });
    const rangeStyle = computed(() => {
      const background = chartEditStore2.getEditCanvasConfig.background;
      const backgroundImage = chartEditStore2.getEditCanvasConfig.backgroundImage;
      const selectColor = chartEditStore2.getEditCanvasConfig.selectColor;
      const backgroundColor = background ? background : void 0;
      const computedBackground = selectColor ? { background: backgroundColor } : { background: `url(${backgroundImage}) no-repeat center center / cover !important` };
      return {
        ...computedBackground,
        width: "inherit",
        height: "inherit"
      };
    });
    onMounted(() => {
      useAddKeyboard();
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(ContentBox), {
        id: "go-chart-edit-layout",
        flex: true,
        showTop: false,
        showBottom: true,
        depth: 1,
        xScroll: true,
        disabledScroll: true,
        onMousedown: unref(mousedownHandleUnStop),
        onDrop: unref(dragHandle),
        onDragover: unref(dragoverHandle),
        onDragenter: unref(dragoverHandle)
      }, {
        aside: withCtx(() => []),
        bottom: withCtx(() => []),
        default: withCtx(() => [
          createVNode(unref(EditRule), null, {
            default: withCtx(() => [
              createElementVNode("div", {
                id: "go-chart-edit-content",
                onContextmenu: _cache[0] || (_cache[0] = //@ts-ignore
                (...args) => unref(handleContextMenu) && unref(handleContextMenu)(...args))
              }, [
                createVNode(unref(EditRange), null, {
                  default: withCtx(() => [
                    createElementVNode("div", {
                      style: normalizeStyle({
                        ...unref(getFilterStyle)(unref(chartEditStore2).getEditCanvasConfig),
                        ...rangeStyle.value
                      })
                    }, [
                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(chartEditStore2).getComponentList, (item, index2) => {
                        return openBlock(), createElementBlock("div", {
                          key: item.id
                        }, [
                          item.isGroup ? (openBlock(), createBlock(unref(_sfc_main$6), {
                            key: 0,
                            groupData: item,
                            groupIndex: index2
                          }, null, 8, ["groupData", "groupIndex"])) : (openBlock(), createBlock(unref(EditShapeBox), {
                            key: 1,
                            "data-id": item.id,
                            index: index2,
                            style: normalizeStyle({
                              ...unref(useComponentStyle)(item.attr, index2),
                              ...unref(getBlendModeStyle)(item.styles)
                            }),
                            item,
                            onClick: ($event) => unref(mouseClickHandle)($event, item),
                            onMousedown: ($event) => unref(mousedownHandle)($event, item),
                            onMouseenter: ($event) => unref(mouseenterHandle)($event, item),
                            onMouseleave: ($event) => unref(mouseleaveHandle)($event, item),
                            onContextmenu: ($event) => unref(handleContextMenu)($event, item, optionsHandle)
                          }, {
                            default: withCtx(() => [
                              (openBlock(), createBlock(resolveDynamicComponent(item.chartConfig.chartKey), {
                                class: normalizeClass(["edit-content-chart", unref(animationsClass)(item.styles.animations)]),
                                chartConfig: item,
                                themeSetting: themeSetting.value,
                                themeColor: themeColor.value,
                                style: normalizeStyle({
                                  ...unref(useSizeStyle)(item.attr),
                                  ...unref(getFilterStyle)(item.styles),
                                  ...unref(getTransformStyle)(item.styles)
                                })
                              }, null, 8, ["class", "chartConfig", "themeSetting", "themeColor", "style"]))
                            ]),
                            _: 2
                          }, 1032, ["data-id", "index", "style", "item", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onContextmenu"]))
                        ]);
                      }), 128))
                    ], 4)
                  ]),
                  _: 1
                })
              ], 32)
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["onMousedown", "onDrop", "onDragover", "onDragenter"]);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_fd6195e0_lang = "";
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fd6195e0"]]);
export {
  index as default
};
