@fangzhongya/page 0.0.34 → 0.0.36

package/dist/components/design/resizable/resizable2.cjs

@@ -1,570 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const getCss = require("@fangzhongya/utils/css/getCss");
-require("../../../node_modules/.pnpm/@interactjs_interactjs@1.10.27_typescript@5.9.3/node_modules/@interactjs/interactjs/index.cjs");
-const index = require("../../../node_modules/.pnpm/@interactjs_interact@1.10.27/node_modules/@interactjs/interact/index.cjs");
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "resizable",
-  props: {
-    className: { default: "resizable" },
-    classNameDraggable: { default: "draggable" },
-    classNameResizable: { default: "resizable" },
-    classNameDragging: { default: "dragging" },
-    classNameResizing: { default: "resizing" },
-    classNameActive: { default: "active" },
-    classNameHandle: { default: "handle" },
-    disableUserSelect: { type: Boolean, default: true },
-    enableNativeDrag: { type: Boolean, default: false },
-    preventDeactivation: { type: Boolean, default: false },
-    active: { type: Boolean, default: false },
-    draggable: { type: Boolean, default: true },
-    resizable: { type: Boolean, default: true },
-    lockAspectRatio: { type: Boolean, default: false },
-    w: { default: 0 },
-    h: { default: 0 },
-    minWidth: { default: 0 },
-    minHeight: { default: 0 },
-    maxWidth: { default: null },
-    maxHeight: { default: null },
-    scale: { default: 1 },
-    x: { default: 0 },
-    y: { default: 0 },
-    z: { default: "auto" },
-    handles: { default: () => ["tl", "tm", "tr", "mr", "br", "bm", "bl", "ml"] },
-    dragHandle: { default: null },
-    dragCancel: { default: null },
-    axis: { default: "both" },
-    grid: { default: () => [1, 1] },
-    parent: { type: Boolean, default: false },
-    onDragStart: { type: Function, default: () => true },
-    onDrag: { type: Function, default: () => true },
-    onResizeStart: { type: Function, default: () => true },
-    onResize: { type: Function, default: () => true }
-  },
-  emits: ["update:active", "update:x", "update:y", "update:w", "update:h", "activated", "deactivated", "dragging", "resizing", "dragStop", "resizeStop"],
-  setup(__props, { emit: __emit }) {
-    function getPosition(el) {
-      const keys = ["left", "right", "top", "bottom", "width", "height"];
-      const obj = {};
-      for (const key of keys) {
-        if (el) {
-          obj[key] = Number(getCss.getCss(el, key).replaceAll(/[^0-9.-]/g, ""));
-        } else {
-          obj[key] = 0;
-        }
-      }
-      return obj;
-    }
-    const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
-    const props = __props;
-    const emit = __emit;
-    const containerRef = vue.ref();
-    let interactInstance = null;
-    const state = vue.reactive({
-      left: props.x,
-      top: props.y,
-      width: typeof props.w === "number" ? props.w : 0,
-      height: typeof props.h === "number" ? props.h : 0,
-      active: props.active,
-      resizing: false,
-      dragging: false,
-      zIndex: props.z,
-      // 记录缩放初始状态
-      resizeStart: {
-        left: 0,
-        top: 0,
-        width: 0,
-        height: 0,
-        right: 0,
-        bottom: 0
-      }
-      // 跟踪最新的样式，用于直接更新DOM
-    });
-    const {
-      left,
-      top,
-      width,
-      height,
-      active,
-      resizing,
-      dragging,
-      zIndex,
-      resizeStart
-    } = vue.toRefs(state);
-    const actualHandles = vue.computed(
-      () => props.resizable ? props.handles : []
-    );
-    const containerClasses = vue.computed(() => [
-      props.className,
-      {
-        [props.classNameActive]: active.value,
-        [props.classNameDragging]: dragging.value,
-        [props.classNameResizing]: resizing.value,
-        [props.classNameDraggable]: props.draggable,
-        [props.classNameResizable]: props.resizable
-      }
-    ]);
-    const containerStyle = vue.computed(() => {
-      const style = {
-        boxSizing: "border-box",
-        position: "absolute",
-        zIndex: zIndex.value,
-        touchAction: "none",
-        userSelect: props.disableUserSelect ? "none" : "auto"
-      };
-      return style;
-    });
-    const updateElementStyle = (newLeft, newTop, newWidth, newHeight) => {
-      left.value = newLeft;
-      top.value = newTop;
-      width.value = newWidth;
-      height.value = newHeight;
-      if (containerRef.value) {
-        containerRef.value.style.left = `${newLeft}px`;
-        containerRef.value.style.top = `${newTop}px`;
-        containerRef.value.style.width = `${newWidth}px`;
-        containerRef.value.style.height = `${newHeight}px`;
-      }
-    };
-    const applyCurrentStyle = () => {
-      if (containerRef.value) {
-        const obj = getPosition(containerRef.value);
-        updateElementStyle(
-          left.value || obj.left,
-          top.value || obj.top,
-          width.value || obj.width,
-          height.value || obj.height
-        );
-      }
-    };
-    const initInteract = () => {
-      if (!isBrowser || !containerRef.value) {
-        console.warn("Interact.js 初始化中止: 非浏览器环境或DOM未就绪");
-        return;
-      }
-      const element = containerRef.value;
-      if (interactInstance) {
-        interactInstance.unset();
-      }
-      applyCurrentStyle();
-      interactInstance = index.default(element);
-      function applyGridSnap(edges) {
-        const [gridX, gridY] = props.grid;
-        const l = left.value;
-        const t = top.value;
-        const w = width.value;
-        const h = height.value;
-        let newLeft = left.value;
-        let newTop = top.value;
-        let newWidth = width.value;
-        let newHeight = height.value;
-        if (edges?.left) {
-          const right = l + w;
-          newLeft = Math.round(l / gridX) * gridX;
-          newWidth = Math.round((right - newLeft) / gridX) * gridX;
-        }
-        if (edges?.right) {
-          newWidth = Math.round((l + w) / gridX) * gridX - l;
-        }
-        if (edges?.top) {
-          const bottom = t + h;
-          newTop = Math.round(t / gridY) * gridY;
-          newHeight = Math.round((bottom - newTop) / gridY) * gridY;
-        }
-        if (edges?.bottom) {
-          newHeight = Math.round((t + h) / gridY) * gridY - t;
-        }
-        newLeft = Math.round(l / gridX) * gridX;
-        newTop = Math.round(t / gridY) * gridY;
-        newWidth = Math.round(newWidth);
-        newHeight = Math.round(newHeight);
-        updateElementStyle(
-          newLeft,
-          newTop,
-          Math.max(newWidth, gridX),
-          Math.max(newHeight, gridY)
-        );
-      }
-      if (props.resizable) {
-        const edgeConfig = {
-          top: actualHandles.value.some((h) => h.includes("t")),
-          left: actualHandles.value.some((h) => h.includes("l")),
-          bottom: actualHandles.value.some((h) => h.includes("b")),
-          right: actualHandles.value.some((h) => h.includes("r"))
-        };
-        let mousedownEvent;
-        interactInstance.resizable({
-          enabled: props.resizable,
-          edges: edgeConfig,
-          modifiers: [],
-          // 完全手动控制
-          // 设置边缘检测的边距（如果有这个选项的话）
-          margin: 4,
-          // 只检测边缘5像素范围内的区域
-          // 或者使用
-          listeners: {
-            start: (event) => {
-              if (dragging.value) {
-                return;
-              }
-              mousedownEvent = event;
-              resizeStart.value = getPosition(containerRef.value);
-              const handle = getHandleFromEdges(event.edges);
-              if (props.onResizeStart(handle, event) === false) {
-                event.preventDefault();
-                return;
-              }
-              resizing.value = true;
-              emit(
-                "resizing",
-                event,
-                left.value,
-                top.value,
-                width.value,
-                height.value
-              );
-            },
-            move: (event) => {
-              if (!resizing.value) {
-                return;
-              }
-              const { edges } = event;
-              let newLeft = resizeStart.value.left;
-              let newTop = resizeStart.value.top;
-              let newWidth = resizeStart.value.width;
-              let newHeight = resizeStart.value.height;
-              if (edges.left) {
-                const x = (event.clientX - mousedownEvent.clientX) / props.scale;
-                newLeft = x + newLeft;
-                newWidth = 0 - x + newWidth;
-              }
-              if (edges.right) {
-                const x = (event.clientX - mousedownEvent.clientX) / props.scale;
-                newWidth = x + newWidth;
-              }
-              if (edges.top) {
-                const y = (event.clientY - mousedownEvent.clientY) / props.scale;
-                newTop = y + newTop;
-                newHeight = 0 - y + newHeight;
-              }
-              if (edges.bottom) {
-                const y = (event.clientY - mousedownEvent.clientY) / props.scale;
-                newHeight = y + newHeight;
-              }
-              if (props.minWidth)
-                newWidth = Math.max(props.minWidth, newWidth);
-              if (props.minHeight)
-                newHeight = Math.max(props.minHeight, newHeight);
-              if (props.maxWidth)
-                newWidth = Math.min(props.maxWidth, newWidth);
-              if (props.maxHeight)
-                newHeight = Math.min(props.maxHeight, newHeight);
-              if (props.lockAspectRatio) {
-                const startRatio = resizeStart.value.width / resizeStart.value.height;
-                if (edges.left || edges.right) {
-                  newHeight = newWidth / startRatio;
-                  if (props.minHeight && newHeight < props.minHeight) {
-                    newHeight = props.minHeight;
-                    newWidth = newHeight * startRatio;
-                  }
-                  if (props.maxHeight && newHeight > props.maxHeight) {
-                    newHeight = props.maxHeight;
-                    newWidth = newHeight * startRatio;
-                  }
-                  if (edges.left) {
-                    newLeft = resizeStart.value.right - newWidth;
-                  }
-                } else if (edges.top || edges.bottom) {
-                  newWidth = newHeight * startRatio;
-                  if (props.minWidth && newWidth < props.minWidth) {
-                    newWidth = props.minWidth;
-                    newHeight = newWidth / startRatio;
-                  }
-                  if (props.maxWidth && newWidth > props.maxWidth) {
-                    newWidth = props.maxWidth;
-                    newHeight = newWidth / startRatio;
-                  }
-                  if (edges.top) {
-                    newTop = resizeStart.value.bottom - newHeight;
-                  }
-                }
-              }
-              if (props.parent && containerRef.value?.parentNode) {
-                const parentEl = containerRef.value.parentNode;
-                const parentRect = parentEl.getBoundingClientRect();
-                if (newLeft + newWidth > parentRect.width / props.scale) {
-                  if (edges.left) {
-                    newWidth = parentRect.width / props.scale - newLeft;
-                  } else {
-                    newLeft = parentRect.width / props.scale - newWidth;
-                  }
-                }
-                if (newTop + newHeight > parentRect.height / props.scale) {
-                  if (edges.top) {
-                    newHeight = parentRect.height / props.scale - newTop;
-                  } else {
-                    newTop = parentRect.height / props.scale - newHeight;
-                  }
-                }
-                newLeft = Math.max(0, newLeft);
-                newTop = Math.max(0, newTop);
-                newWidth = Math.min(
-                  newWidth,
-                  parentRect.width / props.scale - newLeft
-                );
-                newHeight = Math.min(
-                  newHeight,
-                  parentRect.height / props.scale - newTop
-                );
-              }
-              const handle = getHandleFromEdges(edges);
-              if (props.onResize(
-                handle,
-                newLeft,
-                newTop,
-                newWidth,
-                newHeight
-              ) === false) {
-                return;
-              }
-              updateElementStyle(
-                newLeft,
-                newTop,
-                newWidth,
-                newHeight
-              );
-              emit(
-                "resizing",
-                event,
-                newLeft,
-                newTop,
-                newWidth,
-                newHeight
-              );
-            },
-            end: (event) => {
-              if (!resizing.value) {
-                return;
-              }
-              const { edges } = event;
-              if (props.grid) {
-                applyGridSnap(edges);
-              }
-              resizing.value = false;
-              emit(
-                "resizeStop",
-                event,
-                left.value,
-                top.value,
-                width.value,
-                height.value
-              );
-              emit("update:x", left.value);
-              emit("update:y", top.value);
-              emit("update:w", width.value);
-              emit("update:h", height.value);
-            }
-          }
-        });
-      }
-      if (props.draggable) {
-        let mousedownEvent;
-        interactInstance.draggable({
-          enabled: props.draggable,
-          // modifiers: getDragModifiers(),
-          allowFrom: props.dragHandle || void 0,
-          ignoreFrom: props.dragCancel || ".page-undraggable",
-          listeners: {
-            start: (event) => {
-              if (resizing.value) {
-                return;
-              }
-              mousedownEvent = event;
-              resizeStart.value = getPosition(containerRef.value);
-              if (props.onDragStart(event) === false) {
-                event.preventDefault();
-                return;
-              }
-              dragging.value = true;
-              emit("dragging", event, left.value, top.value);
-            },
-            move: (event) => {
-              if (!dragging.value) {
-                return;
-              }
-              const x = event.clientX - mousedownEvent.clientX;
-              const y = event.clientY - mousedownEvent.clientY;
-              let newLeft = resizeStart.value.left + x / props.scale;
-              let newTop = resizeStart.value.top + y / props.scale;
-              const newWidth = resizeStart.value.width;
-              const newHeight = resizeStart.value.height;
-              if (props.onDrag(newLeft, newTop) === false) return;
-              if (props.parent && containerRef.value?.parentNode) {
-                const parentEl = containerRef.value.parentNode;
-                const parentRect = parentEl.getBoundingClientRect();
-                if (newLeft + newWidth > parentRect.width / props.scale) {
-                  newLeft = parentRect.width / props.scale - newWidth;
-                }
-                if (newTop + newHeight > parentRect.height / props.scale) {
-                  newTop = parentRect.height / props.scale - newHeight;
-                }
-                newLeft = Math.max(0, newLeft);
-                newTop = Math.max(0, newTop);
-              }
-              if (containerRef.value) {
-                containerRef.value.style.left = `${newLeft}px`;
-                containerRef.value.style.top = `${newTop}px`;
-                left.value = newLeft;
-                top.value = newTop;
-              }
-              emit("dragging", event, left.value, top.value);
-            },
-            end: (event) => {
-              if (!dragging.value) {
-                return;
-              }
-              if (props.grid) {
-                applyGridSnap();
-              }
-              dragging.value = false;
-              emit("dragStop", event, left.value, top.value);
-              emit("update:x", left.value);
-              emit("update:y", top.value);
-            }
-          }
-        });
-      }
-    };
-    const getHandleFromEdges = (edges) => {
-      if (edges.top && edges.left) return "tl";
-      if (edges.top && edges.right) return "tr";
-      if (edges.bottom && edges.left) return "bl";
-      if (edges.bottom && edges.right) return "br";
-      if (edges.top) return "tm";
-      if (edges.right) return "mr";
-      if (edges.bottom) return "bm";
-      if (edges.left) return "ml";
-      return "tl";
-    };
-    const destroyInteract = () => {
-      if (interactInstance) {
-        interactInstance.unset();
-        interactInstance = null;
-      }
-    };
-    const updateInteract = () => {
-      destroyInteract();
-      if (isBrowser) {
-        vue.nextTick(() => initInteract());
-      }
-    };
-    vue.onMounted(() => {
-      if (isBrowser) {
-        vue.nextTick(() => {
-          initInteract();
-          if (props.active) {
-            emit("activated");
-          }
-        });
-      }
-    });
-    vue.onBeforeUnmount(() => {
-      if (isBrowser) {
-        destroyInteract();
-      }
-    });
-    vue.watch(
-      () => props.x,
-      (val) => {
-        if (!dragging.value && !resizing.value) {
-          left.value = val;
-          if (containerRef.value) {
-            containerRef.value.style.left = `${val}px`;
-          }
-        }
-      }
-    );
-    vue.watch(
-      () => props.y,
-      (val) => {
-        if (!dragging.value && !resizing.value) {
-          top.value = val;
-          if (containerRef.value) {
-            containerRef.value.style.top = `${val}px`;
-          }
-        }
-      }
-    );
-    vue.watch(
-      () => props.w,
-      (val) => {
-        if (!resizing.value && typeof val === "number") {
-          width.value = val;
-          if (containerRef.value) {
-            containerRef.value.style.width = `${val}px`;
-          }
-        }
-      }
-    );
-    vue.watch(
-      () => props.h,
-      (val) => {
-        if (!resizing.value && typeof val === "number") {
-          height.value = val;
-          if (containerRef.value) {
-            containerRef.value.style.height = `${val}px`;
-          }
-        }
-      }
-    );
-    vue.watch(
-      () => props.z,
-      (val) => {
-        if (typeof val === "number" || val === "auto") {
-          zIndex.value = val;
-        }
-      }
-    );
-    vue.watch(
-      () => props.active,
-      (val) => {
-        active.value = val;
-        if (val) {
-          emit("activated");
-        } else {
-          emit("deactivated");
-        }
-        emit("update:active", val);
-        updateInteract();
-      }
-    );
-    vue.watch(() => props.draggable, updateInteract);
-    vue.watch(() => props.resizable, updateInteract);
-    vue.watch(() => props.dragHandle, updateInteract);
-    vue.watch(() => props.dragCancel, updateInteract);
-    vue.watch(() => props.lockAspectRatio, updateInteract);
-    vue.watch(() => props.grid, updateInteract);
-    vue.watch(() => props.parent, updateInteract);
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "containerRef",
-        ref: containerRef,
-        class: vue.normalizeClass(containerClasses.value),
-        style: vue.normalizeStyle(containerStyle.value)
-      }, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(actualHandles.value, (handle) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
-            key: handle,
-            class: vue.normalizeClass([__props.classNameHandle, `${__props.classNameHandle}-${handle}`]),
-            style: vue.normalizeStyle({ display: __props.resizable ? "block" : "none" })
-          }, [
-            vue.renderSlot(_ctx.$slots, handle)
-          ], 6);
-        }), 128)),
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 6);
-    };
-  }
-});
-exports.default = _sfc_main;