import "../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import "../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/addEventListener.mjs";
import listen from "../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/listen.mjs";
import "../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/animationFrame.mjs";
import "../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/childNodes.mjs";
import "../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/querySelectorAll.mjs";
import { useDesignStore } from "../../../../../store/modules/designStore/designStore.mjs";
import { useChartEditStore } from "../../../../../store/modules/chartEditStore/chartEditStore.mjs";
import { useChartLayoutStore } from "../../../../../store/modules/chartLayoutStore/chartLayoutStore.mjs";
import { ChartLayoutStoreEnum } from "../../../../../store/modules/chartLayoutStore/chartLayoutStore.d.mjs";
import throttle from "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/throttle.mjs";
import { defineComponent, computed, watch, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode as createBaseVNode, renderSlot } from "../../../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.mjs";
import { useCssVars } from "../../../../../../node_modules/.pnpm/@vue_runtime-dom@3.3.4/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.mjs";
import { ref, toRefs, reactive, unref } from "../../../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.mjs";
import { normalizeStyle } from "../../../../../../node_modules/.pnpm/@vue_shared@3.3.4/node_modules/@vue/shared/dist/shared.esm-bundler.mjs";
const _hoisted_1 = { class: "go-sketch-rule" };
const thick = 20;
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    useCssVars((_ctx) => ({
      "72798b56": themeColor.value,
      "1b47bf80": containerWidth.value,
      "26ca27c0": cursorStyle.value
    }));
    const chartEditStore = 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(chartEditStore.getEditCanvasConfig);
    const startX = ref(0);
    const startY = ref(0);
    const lines = reactive({ h: [], v: [] });
    const scale = computed(() => {
      return chartEditStore.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;
          chartEditStore.setScale(resScale);
          return;
        }
        if (e.wheelDelta < 0 && scale.value > 0.1) {
          resScale = scale.value - 0.05;
          chartEditStore.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),
        createBaseVNode("div", {
          ref_key: "$app",
          ref: $app,
          class: "edit-screens",
          onScroll: handleScroll
        }, [
          createBaseVNode("div", {
            ref_key: "$container",
            ref: $container,
            class: "edit-screen-container",
            style: normalizeStyle({ width: unref(width) * 2 + "px" })
          }, [
            createBaseVNode("div", {
              ref_key: "refSketchRuleBox",
              ref: refSketchRuleBox,
              class: "canvas",
              onMousedown: dragCanvas,
              style: normalizeStyle({ marginLeft: "-" + (canvasBox().width / 2 - 25) + "px" })
            }, [
              createBaseVNode("div", {
                style: normalizeStyle({ pointerEvents: isPressSpace.value ? "none" : "auto" })
              }, [
                renderSlot(_ctx.$slots, "default", {}, void 0, true)
              ], 4)
            ], 36)
          ], 4)
        ], 544)
      ]);
    };
  }
});
export {
  _sfc_main as default
};
