"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
require("../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js");
require("../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/addEventListener.js");
const listen = require("../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/listen.js");
require("../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/animationFrame.js");
require("../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/childNodes.js");
require("../../../../../../node_modules/.pnpm/dom-helpers@5.2.1/node_modules/dom-helpers/esm/querySelectorAll.js");
const designStore = require("../../../../../store/modules/designStore/designStore.js");
const chartEditStore = require("../../../../../store/modules/chartEditStore/chartEditStore.js");
const chartLayoutStore = require("../../../../../store/modules/chartLayoutStore/chartLayoutStore.js");
const chartLayoutStore_d = require("../../../../../store/modules/chartLayoutStore/chartLayoutStore.d.js");
const throttle = require("../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/throttle.js");
const runtimeCore_esmBundler = require("../../../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js");
const runtimeDom_esmBundler = require("../../../../../../node_modules/.pnpm/@vue_runtime-dom@3.3.4/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js");
const reactivity_esmBundler = require("../../../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
const shared_esmBundler = require("../../../../../../node_modules/.pnpm/@vue_shared@3.3.4/node_modules/@vue/shared/dist/shared.esm-bundler.js");
const _hoisted_1 = { class: "go-sketch-rule" };
const thick = 20;
const _sfc_main = /* @__PURE__ */ runtimeCore_esmBundler.defineComponent({
  __name: "index",
  setup(__props) {
    runtimeDom_esmBundler.useCssVars((_ctx) => ({
      "72798b56": themeColor.value,
      "1b47bf80": containerWidth.value,
      "26ca27c0": cursorStyle.value
    }));
    const chartEditStore$1 = chartEditStore.useChartEditStore();
    const chartLayoutStore$1 = chartLayoutStore.useChartLayoutStore();
    const designStore$1 = designStore.useDesignStore();
    let prevMoveXValue = [0, 0];
    let prevMoveYValue = [0, 0];
    const $app = reactivity_esmBundler.ref();
    const sketchRuleReDraw = reactivity_esmBundler.ref(true);
    const refSketchRuleBox = reactivity_esmBundler.ref();
    const $container = reactivity_esmBundler.ref();
    const isPressSpace = reactivity_esmBundler.ref(false);
    const cursorStyle = reactivity_esmBundler.ref("auto");
    const { width, height } = reactivity_esmBundler.toRefs(chartEditStore$1.getEditCanvasConfig);
    const startX = reactivity_esmBundler.ref(0);
    const startY = reactivity_esmBundler.ref(0);
    const lines = reactivity_esmBundler.reactive({ h: [], v: [] });
    const scale = runtimeCore_esmBundler.computed(() => {
      return chartEditStore$1.getEditCanvas.scale;
    });
    const containerWidth = runtimeCore_esmBundler.computed(() => {
      return `${height.value * 2}px`;
    });
    const paletteStyle = runtimeCore_esmBundler.computed(() => {
      const isDarkTheme = designStore$1.getDarkTheme;
      return isDarkTheme ? {
        bgColor: "#18181c",
        longfgColor: "#4d4d4d",
        shortfgColor: "#4d4d4d",
        fontColor: "#4d4d4d",
        shadowColor: "#18181c",
        borderColor: "#18181c",
        cornerActiveColor: "#18181c"
      } : {};
    });
    const themeColor = runtimeCore_esmBundler.computed(() => {
      return designStore$1.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$1.setScale(resScale);
          return;
        }
        if (e.wheelDelta < 0 && scale.value > 0.1) {
          resScale = scale.value - 0.05;
          chartEditStore$1.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.default(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.default(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;
    };
    runtimeCore_esmBundler.watch(
      () => designStore$1.getDarkTheme,
      () => {
        reDraw();
      }
    );
    runtimeCore_esmBundler.watch(
      () => scale.value,
      (newValue, oldValue) => {
        if (oldValue !== newValue && chartLayoutStore$1.getRePositionCanvas) {
          chartLayoutStore$1.setItemUnHandle(chartLayoutStore_d.ChartLayoutStoreEnum.RE_POSITION_CANVAS, false);
          handleScroll();
          setTimeout(() => {
            canvasPosCenter();
            reDraw();
          }, 400);
        } else {
          throttle.default(reDraw, 20);
        }
      }
    );
    runtimeCore_esmBundler.watch(
      () => isPressSpace.value,
      (newValue) => {
        cursorStyle.value = newValue ? "grab" : "auto";
      }
    );
    runtimeCore_esmBundler.onMounted(() => {
      if ($app.value) {
        $app.value.addEventListener("wheel", handleWheel, { passive: false });
        canvasPosCenter();
      }
    });
    runtimeCore_esmBundler.onUnmounted(() => {
      if ($app.value) {
        $app.value.removeEventListener("wheel", handleWheel);
      }
    });
    window.onKeySpacePressHold = (isHold) => {
      isPressSpace.value = isHold;
    };
    return (_ctx, _cache) => {
      const _component_sketch_rule = runtimeCore_esmBundler.resolveComponent("sketch-rule");
      return runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.createElementBlock("div", _hoisted_1, [
        sketchRuleReDraw.value ? (runtimeCore_esmBundler.openBlock(), runtimeCore_esmBundler.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"])) : runtimeCore_esmBundler.createCommentVNode("", true),
        runtimeCore_esmBundler.createElementVNode("div", {
          ref_key: "$app",
          ref: $app,
          class: "edit-screens",
          onScroll: handleScroll
        }, [
          runtimeCore_esmBundler.createElementVNode("div", {
            ref_key: "$container",
            ref: $container,
            class: "edit-screen-container",
            style: shared_esmBundler.normalizeStyle({ width: reactivity_esmBundler.unref(width) * 2 + "px" })
          }, [
            runtimeCore_esmBundler.createElementVNode("div", {
              ref_key: "refSketchRuleBox",
              ref: refSketchRuleBox,
              class: "canvas",
              onMousedown: dragCanvas,
              style: shared_esmBundler.normalizeStyle({ marginLeft: "-" + (canvasBox().width / 2 - 25) + "px" })
            }, [
              runtimeCore_esmBundler.createElementVNode("div", {
                style: shared_esmBundler.normalizeStyle({ pointerEvents: isPressSpace.value ? "none" : "auto" })
              }, [
                runtimeCore_esmBundler.renderSlot(_ctx.$slots, "default", {}, void 0, true)
              ], 4)
            ], 36)
          ], 4)
        ], 544)
      ]);
    };
  }
});
exports.default = _sfc_main;
