@sepveneto/free-dom 0.6.0 → 0.7.0-alpha.2

package/dist/index.mjs

@@ -1,465 +1,33 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-
-// src/components/freeDom.ts
-import {
-  onMounted,
-  defineComponent,
-  h,
-  computed,
-  inject,
-  ref as ref2,
-  reactive,
-  isVue2,
-  shallowRef,
-  watch as watch2
-} from "vue-demi";
-
-// src/hooks/use-normalize-style.ts
-import { ref, unref, watch } from "vue-demi";
-function useNormalizeStyle(style) {
-  const _style = ref({
-    transition: "inherit"
-  });
-  watch(() => style, (data) => {
-    const res = Object.entries(unref(data)).reduce(
-      (obj, _style2) => {
-        const [key, value] = _style2;
-        if (typeof value === "number") {
-          obj[key] = `${value}px`;
-        } else {
-          obj[key] = value;
-        }
-        return obj;
-      },
-      {}
-    );
-    _style.value = {
-      ..._style.value,
-      ...res
-    };
-  }, { deep: true });
-  return _style;
-}
-
-// src/util/EventBus.ts
-var _EventBus = class {
-  static on(name, callback) {
-    if (!Array.isArray(_EventBus._callbacks[name])) {
-      _EventBus._callbacks[name] = [];
-    }
-    _EventBus._callbacks[name].push(callback);
-  }
-  static emit(name, ...args) {
-    _EventBus._callbacks[name]?.forEach((item) => item.apply(this, args));
-  }
-  static off(name) {
-    _EventBus._callbacks[name].length = 0;
-  }
-};
-var EventBus = _EventBus;
-__publicField(EventBus, "_callbacks", {});
+// src/components/freeDomWrap.ts
+import { computed as computed7, defineComponent as defineComponent5, h as h5, onMounted as onMounted3, provide, reactive as reactive3, ref as ref10, shallowRef as shallowRef4, toRefs, watchEffect as watchEffect4 } from "vue-demi";
 
 // src/util/tokens.ts
 var SceneToken = Symbol("Scene");
 
 // src/util/index.ts
+var isProduction = process.env.NODE_ENV === "production";
 function clamp(value, min, max = Infinity) {
   return Math.max(Math.min(value, max), min);
 }
-function snapToGrid(grid, pendingX, pendingY) {
-  const x = Math.round(pendingX / grid[0]) * grid[0];
-  const y = Math.round(pendingY / grid[1]) * grid[1];
-  return [x, y];
-}
-
-// src/hooks/use-resize.ts
-var MIN_SIZE = 20;
-function useResize(startX, startY, rect, dot, diagonal, snapGrid, callbacks) {
-  const isT = dot ? /t/.test(dot) : false;
-  const isL = dot ? /l/.test(dot) : false;
-  const isB = dot ? /b/.test(dot) : false;
-  const isR = dot ? /r/.test(dot) : false;
-  const isDiagonal = dot ? dot.length === 2 : false;
-  const { width: cWidth, height: cHeight, x, y } = rect;
-  const move = (mouseEvt) => {
-    const { clientX, clientY } = mouseEvt;
-    let deltaX = clientX - startX;
-    let deltaY = clientY - startY;
-    if (Array.isArray(snapGrid)) {
-      [deltaX, deltaY] = snapToGrid(snapGrid, deltaX, deltaY);
-    }
-    const rate = cWidth / cHeight;
-    const newWidth = cWidth + (isL ? -deltaX : isR ? deltaX : 0);
-    const newHeight = cHeight + (isT ? -deltaY : isB ? deltaY : 0);
-    if (isDiagonal && diagonal) {
-      if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-        rect.x = x + (isL ? deltaX : 0);
-        rect.width = clamp(newWidth, MIN_SIZE);
-        rect.height = clamp(newWidth / rate, MIN_SIZE);
-      } else {
-        rect.y = y + (isT ? deltaY : 0);
-        rect.height = clamp(newHeight, MIN_SIZE);
-        rect.width = clamp(newHeight * rate, MIN_SIZE);
-      }
-    } else {
-      rect.x = x + (isL ? deltaX : 0);
-      rect.y = y + (isT ? deltaY : 0);
-      rect.width = clamp(newWidth, MIN_SIZE);
-      rect.height = clamp(newHeight, MIN_SIZE);
-    }
-    callbacks && callbacks.onMove && callbacks.onMove();
-  };
-  const up = () => {
-    document.removeEventListener("mousemove", move);
-    document.removeEventListener("mouseup", up);
-    callbacks && callbacks.onMove && callbacks.onUp();
-  };
-  document.addEventListener("mousemove", move);
-  document.addEventListener("mouseup", up);
+function log(...args) {
+  if (isProduction)
+    return;
+  console.log("[grid-layout]", ...args);
 }
 
-// src/components/freeDom.ts
-import { onClickOutside, useElementSize } from "@vueuse/core";
-import { v4 as uuidv4 } from "uuid";
-var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
-var FreeDom = defineComponent({
-  name: "FreeDom",
-  props: {
-    x: {
-      type: Number,
-      default: void 0
-    },
-    y: {
-      type: Number,
-      default: void 0
-    },
-    width: {
-      type: Number,
-      default: void 0
-    },
-    height: {
-      type: Number,
-      default: void 0
-    },
-    absolute: {
-      type: Boolean,
-      default: void 0
-    },
-    scale: {
-      type: [Boolean, Array],
-      default: void 0
-    },
-    move: Boolean,
-    preview: Boolean,
-    limitWidth: {
-      type: Number,
-      default: void 0
-    },
-    limitHeight: {
-      type: Number,
-      default: void 0
-    },
-    handler: {
-      type: String,
-      default: void 0
-    },
-    diagonal: {
-      type: Boolean,
-      default: void 0
-    },
-    grid: {
-      type: Object,
-      default: void 0
-    },
-    onDragStart: {
-      type: Function,
-      default: void 0
-    },
-    onDragEnd: {
-      type: Function,
-      default: void 0
-    }
-  },
-  emits: ["update:x", "update:y", "update:width", "update:height", "select"],
-  setup(props, { emit }) {
-    const active = ref2(false);
-    const SceneContext = inject(SceneToken, void 0);
-    const _preview = computed(() => SceneContext?.preview || props.preview);
-    const canScale = computed(() => !_preview.value && (SceneContext?.scale || props.scale));
-    const canMove = computed(() => !_preview.value && (SceneContext?.move || props.move));
-    const isAbsolute = computed(() => props.absolute ?? SceneContext?.absolute ?? true);
-    const handlerType = computed(() => props.handler ?? SceneContext?.handler ?? "dot");
-    const snapGrid = computed(() => props.grid ?? SceneContext?.grid);
-    const diagonal = computed(() => props.diagonal ?? SceneContext?.diagonal ?? true);
-    const widgetRef = shallowRef();
-    const _style = ref2({});
-    const wrapStyle = useNormalizeStyle(_style);
-    const uuid = uuidv4();
-    const isScale = ref2(false);
-    const isMove = ref2(false);
-    const _rect = reactive({});
-    const context = {
-      _rect,
-      trigger
-    };
-    onClickOutside(widgetRef, () => {
-      active.value = false;
-    });
-    let rectSize = reactive(useElementSize(widgetRef));
-    let autoWidth = true;
-    let autoHeight = true;
-    const unwatch = watch2(rectSize, ({ width, height }) => {
-      if (autoWidth && width) {
-        _rect.width = width;
-      }
-      if (autoHeight && height) {
-        _rect.height = height;
-      }
-    });
-    watch2(
-      [
-        () => props.width,
-        () => props.height,
-        () => props.x,
-        () => props.y
-      ],
-      ([width, height, x, y]) => {
-        autoWidth = width === _rect.width;
-        autoHeight = height === _rect.height;
-        if (!autoHeight && !autoWidth) {
-          unwatch();
-          rectSize = null;
-        }
-        width && (_rect.width = width);
-        height && (_rect.height = height);
-        x != null && (_rect.x = x);
-        y != null && (_rect.y = y);
-        trigger();
-      },
-      { immediate: true }
-    );
-    onMounted(async () => {
-      SceneContext?.register(uuid, context);
-      const { offsetTop, offsetLeft } = widgetRef.value;
-      _rect.x = _rect.x == null ? offsetLeft : _rect.x;
-      _rect.y = _rect.y == null ? offsetTop : _rect.y;
-      trigger();
-    });
-    function trigger() {
-      const { x, y, width, height } = _rect;
-      _style.value = {
-        transform: `translate(${x}px, ${y}px)`,
-        width,
-        height
-      };
-    }
-    const _dots = computed(() => {
-      return SceneContext && Array.isArray(SceneContext.scale) ? SceneContext.scale : props.scale;
-    });
-    const dots = computed(() => {
-      if (!isActive.value)
-        return [];
-      return Array.isArray(_dots.value) ? _dots.value : Dots;
-    });
-    const direct = {
-      l: "w",
-      r: "e",
-      t: "n",
-      b: "s"
-    };
-    const isActive = shallowRef(true);
-    function onMousedownDot(evt, dot) {
-      evt.stopPropagation();
-      evt.preventDefault();
-      if (isMove.value)
-        return;
-      isScale.value = true;
-      active.value = true;
-      const shouldUpdate = props.onDragStart?.();
-      if (shouldUpdate === false)
-        return;
-      const { clientX, clientY } = evt;
-      useResize(clientX, clientY, _rect, dot, diagonal.value, snapGrid.value, {
-        onMove() {
-          if (!checkValid(_rect))
-            return;
-          EventBus.emit("move", uuid);
-          trigger();
-        },
-        onUp() {
-          props.onDragEnd?.();
-          isScale.value = false;
-          EventBus.emit("moveup", uuid);
-          emitPos();
-        }
-      });
-    }
-    function emitPos() {
-      emit("update:x", _rect.x);
-      emit("update:y", _rect.y);
-      emit("update:width", _rect.width);
-      emit("update:height", _rect.height);
-    }
-    function getDotPos(dot) {
-      const { width, height } = _rect;
-      const isL = /l/.test(dot);
-      const isR = /r/.test(dot);
-      const isT = /t/.test(dot);
-      let left, top;
-      if (dot.length === 2) {
-        left = isL ? 0 : width;
-        top = isT ? 0 : height;
-      } else {
-        if (isL || isR) {
-          left = isL ? 0 : width;
-          top = Number(height) / 2;
-        } else {
-          left = Number(width) / 2;
-          top = isT ? 0 : height;
-        }
-      }
-      return {
-        top: `${handlerType.value === "dot" ? top : top - 3}px`,
-        left: `${handlerType.value === "dot" ? left : left - 3}px`,
-        cursor: dot.split("").reverse().map((item) => direct[item]).join("") + "-resize"
-      };
-    }
-    function onMousedown(evt) {
-      evt.stopPropagation();
-      if (isScale.value || !canMove.value)
-        return;
-      isMove.value = true;
-      active.value = true;
-      const shouldUpdate = props.onDragStart?.();
-      if (shouldUpdate === false)
-        return;
-      const pos = { ..._rect };
-      const move = (mouseEvt) => {
-        const { clientX, clientY } = mouseEvt;
-        const x = clientX - evt.clientX + pos.x;
-        const y = clientY - evt.clientY + pos.y;
-        _rect.x = x;
-        _rect.y = y;
-        _rect.width = pos.width;
-        _rect.height = pos.height;
-        if (!checkValid(_rect))
-          return;
-        EventBus.emit("move", uuid);
-        trigger();
-      };
-      const up = () => {
-        props.onDragEnd?.();
-        isMove.value = false;
-        EventBus.emit("moveup", uuid);
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", up);
-        emitPos();
-        emit("select", _rect);
-      };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", up);
-    }
-    function checkValid(rect) {
-      if (SceneContext) {
-        return SceneContext.checkValid(rect);
-      } else if (props.limitWidth && props.limitHeight) {
-        const { x, y, width, height } = rect;
-        return x >= 0 && x + width <= props.limitWidth && y >= 0 && y + height <= props.limitHeight;
-      } else {
-        return true;
-      }
-    }
-    return {
-      widgetRef,
-      canMove,
-      wrapStyle,
-      canScale,
-      dots,
-      active,
-      isAbsolute,
-      isScale,
-      handlerType,
-      getDotPos,
-      onMousedown,
-      onMousedownDot
-    };
-  },
-  render() {
-    const dots = this.canScale ? this.dots.map((dot) => {
-      if (isVue2) {
-        return h("div", {
-          class: "free-dom__widget-dot",
-          style: this.getDotPos(dot),
-          on: {
-            mousedown: (evt) => this.onMousedownDot(evt, dot)
-          }
-        });
-      }
-      return h("div", {
-        class: this.handlerType === "dot" ? "free-dom__widget-dot" : "free-dom__resizable-handler",
-        style: this.getDotPos(dot),
-        onMousedown: (evt) => this.onMousedownDot(evt, dot)
-      });
-    }) : null;
-    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
-    if (isVue2) {
-      return h(
-        "section",
-        {
-          class: [
-            "free-dom__widget-wrapper",
-            { "is-scale": this.isScale },
-            { "is-absolute": this.isAbsolute },
-            { "can-move": this.canMove },
-            { "is-active": this.active }
-          ],
-          style: this.wrapStyle,
-          ref: "widgetRef",
-          on: {
-            mousedown: this.onMousedown
-          }
-        },
-        [dots, defaultSlot]
-      );
-    }
-    return h(
-      "section",
-      {
-        ref: "widgetRef",
-        class: [
-          "free-dom__widget-wrapper",
-          { "is-scale": this.isScale },
-          { "is-absolute": this.isAbsolute },
-          { "can-move": this.canMove },
-          { "is-active": this.active }
-        ],
-        style: this.wrapStyle,
-        onMousedown: this.onMousedown
-      },
-      [defaultSlot, dots]
-    );
-  }
-});
-
-// src/components/freeDomWrap.ts
-import { defineComponent as defineComponent3, shallowRef as shallowRef3, h as h3, provide, reactive as reactive3, ref as ref4, toRefs } from "vue-demi";
-import { useElementBounding } from "@vueuse/core";
-
 // src/components/markLine.ts
-import { h as h2, defineComponent as defineComponent2, shallowRef as shallowRef2, ref as ref3, reactive as reactive2, inject as inject2, onBeforeUnmount } from "vue-demi";
+import { defineComponent, h, inject, onBeforeUnmount, reactive, ref, shallowRef } from "vue-demi";
 var lineType = ["xt", "xc", "xb", "yl", "yc", "yr"];
-var markLine_default = defineComponent2({
+var markLine_default = defineComponent({
+  props: {
+    showLine: Boolean
+  },
   setup() {
-    const SceneContext = inject2(SceneToken);
-    const lines = shallowRef2(lineType);
-    const diff = ref3(SceneContext.diff);
+    const SceneContext = inject(SceneToken);
+    const lines = shallowRef(lineType);
+    const diff = ref(SceneContext.diff);
     const nodes = SceneContext.nodes;
-    const lineStatus = reactive2({
+    const lineStatus = reactive({
       xt: {
         show: false,
         pos: 0
@@ -485,7 +53,7 @@ var markLine_default = defineComponent2({
         pos: 0
       }
     });
-    EventBus.on("move", async (uuid) => {
+    const runConstraints = (uuid) => {
       const current = nodes.find((node) => node.uuid === uuid)?.node ?? {};
       clearStatus();
       nodes.forEach((node) => {
@@ -564,11 +132,12 @@ var markLine_default = defineComponent2({
           current._rect.x = _target.right - _current.width;
         }
       });
-    });
-    EventBus.on("moveup", clearStatus);
+    };
+    SceneContext?.on("move", runConstraints);
+    SceneContext?.on("moveup", clearStatus);
     onBeforeUnmount(() => {
-      EventBus.off("move");
-      EventBus.off("moveup");
+      SceneContext?.off("move");
+      SceneContext?.off("moveup");
     });
     function clearStatus() {
       lineStatus.xt.show = false;
@@ -580,6 +149,8 @@ var markLine_default = defineComponent2({
     }
     function normalize(rect) {
       return {
+        deltaX: rect.deltaX,
+        deltaY: rect.deltaY,
         top: rect.y,
         bottom: rect.y + rect.height,
         left: rect.x,
@@ -600,82 +171,1473 @@ var markLine_default = defineComponent2({
     };
   },
   render() {
-    const _line = (line, info) => h2("div", {
+    const _line = (line, info) => h("div", {
       style: { [line.includes("x") ? "top" : "left"]: info.pos + "px" },
-      class: [line.includes("x") ? "free-dom__xline" : "free-dom__yline", "free-dom__line"]
+      class: [line.includes("x") ? "vv-free-dom--xline" : "vv-free-dom--yline", "vv-free-dom--line"]
     });
-    const _lines = this.lines.filter((line) => this.lineStatus[line].show).map((line) => _line(line, this.lineStatus[line]));
-    return h2("div", {
-      class: "free-dom__mark-line"
+    const _lines = this.showLine ? this.lines.filter((line) => this.lineStatus[line].show).map((line) => _line(line, this.lineStatus[line])) : [];
+    return h("div", {
+      class: "vv-free-dom--markline"
     }, _lines);
   }
 });
 
-// src/components/freeDomWrap.ts
-var freeDomWrapProps = {
-  absolute: {
+// src/hooks/use-normalize-style.ts
+import { ref as ref2, unref, watch } from "vue-demi";
+
+// src/hooks/use-default-slot.ts
+import { Comment, computed, useSlots } from "vue-demi";
+function useDefaultSlot() {
+  const slots = useSlots();
+  const slotList = computed(() => {
+    return typeof slots.default === "function" ? slots.default() : slots.default;
+  });
+  const only = computed(() => slotList.value?.filter((slot) => slot.type !== Comment)[0] || null);
+  return {
+    slots: slotList,
+    only
+  };
+}
+
+// src/hooks/use-core-date.ts
+import { ref as ref3, unref as unref2 } from "vue-demi";
+function useCoreData(node) {
+  const lastX = ref3(NaN);
+  const lastY = ref3(NaN);
+  function create(x, y) {
+    const isStart = isNaN(lastX.value);
+    const _node = unref2(node);
+    if (!_node) {
+      throw new Error("drag node does not exist");
+    }
+    if (isStart) {
+      return {
+        node: _node,
+        deltaX: 0,
+        deltaY: 0,
+        lastX: x,
+        lastY: y,
+        x,
+        y
+      };
+    } else {
+      return {
+        node: _node,
+        deltaX: x - lastX.value,
+        deltaY: y - lastY.value,
+        lastX: lastX.value,
+        lastY: lastY.value,
+        x,
+        y
+      };
+    }
+  }
+  return {
+    lastX,
+    lastY,
+    create
+  };
+}
+
+// src/hooks/use-draggable-data.ts
+import { ref as ref4, watchEffect } from "vue-demi";
+function useDraggableData(props) {
+  const x = ref4(props.x || props.modelValue.x || 0);
+  const y = ref4(props.y || props.modelValue.y || 0);
+  const deltaX = ref4(0);
+  const deltaY = ref4(0);
+  const dragData = ref4();
+  watchEffect(() => {
+    x.value = props.x || props.modelValue.x || 0;
+  });
+  watchEffect(() => {
+    y.value = props.y || props.modelValue.y || 0;
+  });
+  const handleDrag = (evt, data) => {
+    x.value = data.x;
+    y.value = data.y;
+    deltaX.value = data.deltaX;
+    deltaY.value = data.deltaY;
+    props.dargFn(evt, data);
+  };
+  const handleDragStop = (evt, coreData) => {
+    const data = dragData.value = create(coreData);
+    props.dragStopFn(evt, data);
+  };
+  function create(coreData) {
+    return {
+      node: coreData.node,
+      x: x.value + coreData.deltaX,
+      y: y.value + coreData.deltaY,
+      deltaX: coreData.deltaX,
+      deltaY: coreData.deltaY,
+      lastX: x.value,
+      lastY: y.value
+    };
+  }
+  return {
+    x,
+    y,
+    deltaX,
+    deltaY,
+    create,
+    handleDrag,
+    handleDragStop
+  };
+}
+
+// src/hooks/use-scene-context.ts
+import { computed as computed2, inject as inject2, onMounted } from "vue-demi";
+var id = 0;
+function useSceneContext(context, props) {
+  const SceneContext = inject2(SceneToken, void 0);
+  const uuid = id++;
+  const lockAspectRatio = computed2(() => SceneContext?.lockAspectRatio || props.lockAspectRatio);
+  const minWidth = computed2(() => SceneContext?.minWidth || props.minWidth);
+  const minHeight = computed2(() => SceneContext?.minHeight || props.minHeight);
+  const disabledDrag = computed2(() => SceneContext?.disabledDrag || props.disabledDrag);
+  const disabledResize = computed2(() => SceneContext?.disabledResize || props.disabledResize);
+  const scale = computed2(() => SceneContext?.scale || props.scale);
+  const fixNonMonospaced = computed2(() => {
+    return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
+  });
+  onMounted(() => {
+    SceneContext?.register(uuid, context);
+  });
+  function check(pos) {
+    if (!SceneContext)
+      return true;
+    return SceneContext.checkValid(pos);
+  }
+  return {
+    emit: (name) => SceneContext?.emit(name, uuid),
+    check,
+    width: SceneContext?.width,
+    height: SceneContext?.height,
+    scale,
+    lockAspectRatio,
+    minWidth,
+    minHeight,
+    disabledDrag,
+    disabledResize,
+    fixNonMonospaced
+  };
+}
+
+// src/hooks/use-event-bus.ts
+import { ref as ref5 } from "vue-demi";
+function useEventBus() {
+  const callbacks = ref5({});
+  const on = (name, cb) => {
+    if (!callbacks.value[name]) {
+      callbacks.value[name] = [cb];
+    } else {
+      callbacks.value[name].push(cb);
+    }
+  };
+  const off = (name) => {
+    callbacks.value[name].length = 0;
+  };
+  const emit = (name, args) => {
+    const fns = callbacks.value[name] || [];
+    fns.forEach((fn) => fn(args));
+  };
+  return {
+    on,
+    off,
+    emit
+  };
+}
+
+// src/hooks/use-resizable-data.ts
+import { ref as ref6, watchEffect as watchEffect2 } from "vue-demi";
+function useResizableData(props, domRef) {
+  const width = ref6(getWidth());
+  const height = ref6(getHeight());
+  watchEffect2(() => {
+    width.value = getWidth();
+  });
+  watchEffect2(() => {
+    height.value = getHeight();
+  });
+  function getWidth() {
+    return props.width || props.modelValue.w;
+  }
+  function getHeight() {
+    return props.height || props.modelValue.h;
+  }
+  async function syncSize(fixNonMonospaced, minWidth, minHeight) {
+    if (props.width && props.height || props.modelValue.w && props.modelValue.h)
+      return;
+    if (!domRef.value)
+      return [0, 0];
+    if (fixNonMonospaced) {
+      await document.fonts.ready;
+    }
+    const { width: w, height: h8 } = window.getComputedStyle(domRef.value.$el);
+    width.value = Math.max(Math.ceil(parseFloat(w)), minWidth);
+    height.value = Math.max(Math.ceil(parseFloat(h8)), minHeight);
+  }
+  return {
+    width,
+    height,
+    syncSize
+  };
+}
+
+// src/hooks/use-layout.ts
+import { computed as computed3, ref as ref7, shallowRef as shallowRef2, watchEffect as watchEffect3 } from "vue-demi";
+function useLayout(props) {
+  const layout = shallowRef2(props.modelValue);
+  watchEffect3(() => {
+    layout.value = props.modelValue;
+  });
+  const cellWidth = computed3(
+    () => (props.width - margin.value[0] * (cols.value - 1) - (containerPadding.value?.[0] || margin.value[0]) * 2) / props.cols
+  );
+  const cols = computed3(() => props.cols);
+  const rowHeight = computed3(() => props.rowHeight);
+  const margin = computed3(() => props.margin);
+  const maxRows = computed3(() => props.maxRows);
+  const containerPadding = computed3(() => props.containerPadding);
+  const minW = computed3(() => props.minW);
+  const minH = computed3(() => props.minH);
+  function getItem(key) {
+    return layout.value.find((item) => item.i === key);
+  }
+  function getFull() {
+    return layout.value;
+  }
+  function _moveElement(layout2, config, x, y, isUserAction, preventCollision) {
+    if (config.static)
+      return layout2;
+    if (config.y === y && config.x === x)
+      return layout2;
+    log(
+      `Moving element ${config.i} to [${String(x)},${String(y)}] from [${config.x},${config.y}]`
+    );
+    const oldX = config.x;
+    const oldY = config.y;
+    if (typeof x === "number")
+      config.x = x;
+    if (typeof y === "number")
+      config.y = y;
+    config.moved = true;
+    const sortable = _sortLayoutItems(layout2);
+    const collisions = sortable.filter((l) => _collides(l, config));
+    const hasCollsions = collisions.length > 0;
+    if (hasCollsions && preventCollision) {
+      config.x = oldX;
+      config.y = oldY;
+      config.moved = false;
+      return layout2;
+    }
+    collisions.forEach((collision) => {
+      log(
+        `Resolving collision between ${config.i} at [${config.x},${config.y}] and ${collision.i} at [${collision.x},${collision.y}]`,
+        collision.moved,
+        collision.i
+      );
+      if (collision.moved)
+        return;
+      if (collision.static) {
+        layout2 = _moveElementAwayFromCollision(
+          layout2,
+          collision,
+          config,
+          isUserAction
+        );
+      } else {
+        layout2 = _moveElementAwayFromCollision(
+          layout2,
+          config,
+          collision,
+          isUserAction
+        );
+      }
+    });
+    return layout2;
+  }
+  function _moveElementAwayFromCollision(layout2, collideWith, itemToMove, isUserAction) {
+    const preventCollision = collideWith.static;
+    if (isUserAction) {
+      isUserAction = false;
+      const fakeItem = {
+        x: itemToMove.x,
+        y: Math.max(collideWith.y - itemToMove.h, 0),
+        w: itemToMove.w,
+        h: itemToMove.h,
+        i: "-1"
+      };
+      if (!_getFirstCollision(layout2, fakeItem)) {
+        log(
+          `Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${fakeItem.y}].`
+        );
+        return _moveElement(
+          layout2,
+          itemToMove,
+          void 0,
+          fakeItem.y,
+          isUserAction,
+          preventCollision
+        );
+      }
+    }
+    return _moveElement(
+      layout2,
+      itemToMove,
+      void 0,
+      itemToMove.y + 1,
+      isUserAction,
+      preventCollision
+    );
+  }
+  function moveTo(item, x, y) {
+    const isUserAction = true;
+    const _layout = _moveElement(layout.value, item, x, y, isUserAction, !props.collision);
+    layout.value = _normalize(_layout);
+    return layout.value;
+  }
+  function resizeTo(item, w, h8) {
+    let hasCollisions = false;
+    if (!props.collision) {
+      const collisions = layout.value.filter((l) => _collides(l, { ...item, w, h: h8 }));
+      hasCollisions = collisions.length > 0;
+      if (hasCollisions) {
+        let leastX = Infinity;
+        let leastY = Infinity;
+        collisions.forEach((collision) => {
+          if (collision.x > item.x)
+            leastX = Math.min(collision.x, leastX);
+          if (collision.y > item.y)
+            leastY = Math.min(collision.y, leastY);
+        });
+        if (Number.isFinite(leastX))
+          item.w = leastX - item.x;
+        if (Number.isFinite(leastY))
+          item.h = leastY - item.y;
+      }
+    }
+    if (!hasCollisions) {
+      item.w = w;
+      item.h = h8;
+    }
+    layout.value = _normalize([...layout.value]);
+  }
+  function _sortLayoutItems(layout2) {
+    return layout2.slice(0).sort((a, b) => {
+      if (a.y > b.y || a.y === b.y && a.x > b.x) {
+        return 1;
+      } else if (a.y === b.y && a.x === b.x) {
+        return 0;
+      } else {
+        return -1;
+      }
+    });
+  }
+  function _collides(l1, l2) {
+    if (l1.i === l2.i)
+      return false;
+    else if (l1.x + l1.w <= l2.x)
+      return false;
+    else if (l1.x >= l2.x + l2.w)
+      return false;
+    else if (l1.y + l1.h <= l2.y)
+      return false;
+    else if (l1.y >= l2.y + l2.h)
+      return false;
+    else
+      return true;
+  }
+  function _getFirstCollision(layout2, layoutItem) {
+    for (let i = 0; i < layout2.length; ++i) {
+      if (_collides(layout2[i], layoutItem))
+        return layout2[i];
+    }
+  }
+  function _normalize(layout2) {
+    const compareWith = layout2.filter((item) => item.static);
+    const sorted = _sortLayoutItems(layout2);
+    const _layout = new Array(layout2.length);
+    sorted.forEach((item, index) => {
+      let l = JSON.parse(JSON.stringify(item));
+      if (!l.static) {
+        l = _normalizeItem(compareWith, l, sorted);
+        compareWith.push(l);
+      }
+      _layout[layout2.indexOf(sorted[index])] = l;
+      l.moved = false;
+    });
+    return _layout;
+  }
+  function _normalizeItem(compareWith, l, layout2) {
+    if (props.collision) {
+      l.y = Math.min(_calBottom(compareWith), l.y);
+      while (l.y > 0 && !_getFirstCollision(compareWith, l)) {
+        --l.y;
+      }
+    }
+    let collides;
+    while ((collides = _getFirstCollision(compareWith, l)) && props.collision) {
+      resolveCompactionCollision(layout2, l, collides.y + collides.h, "y");
+    }
+    return l;
+  }
+  function _calBottom(layout2) {
+    let max = 0;
+    layout2.forEach((l) => {
+      const val = l.y + l.h;
+      if (val > max)
+        max = val;
+    });
+    return max;
+  }
+  function calContainerHeight() {
+    if (!props.autoHeight)
+      return;
+    const rows = _calBottom(layout.value);
+    return `${rows * props.rowHeight + margin.value[1] * (rows - 1) + (containerPadding.value?.[1] || margin.value[1]) * 2}px`;
+  }
+  const heightWidth = { x: "w", y: "h" };
+  function resolveCompactionCollision(layout2, item, position, axis) {
+    const sizeProp = heightWidth[axis];
+    item[axis] += 1;
+    const itemIndex = layout2.findIndex((each) => each === item);
+    for (let i = itemIndex + 1; i < layout2.length; ++i) {
+      const otherItem = layout2[i];
+      if (otherItem.y > item.y + item.h)
+        break;
+      if (_collides(item, otherItem)) {
+        resolveCompactionCollision(
+          layout2,
+          otherItem,
+          position + item[sizeProp],
+          axis
+        );
+      }
+    }
+    item[axis] = position;
+  }
+  return {
+    cellWidth,
+    cols,
+    rowHeight,
+    margin,
+    maxRows,
+    containerPadding,
+    minW,
+    minH,
+    calContainerHeight,
+    moveTo,
+    resizeTo,
+    getItem,
+    getFull
+  };
+}
+function useLayoutItem(props, layout) {
+  const { cellWidth, margin, rowHeight, cols, maxRows, containerPadding: cPadding } = layout;
+  const dragging = ref7();
+  const resizing = ref7();
+  const containerPadding = computed3(() => cPadding.value || margin.value);
+  const x = computed3(() => {
+    if (!dragging.value) {
+      return Math.round(props.x * (cellWidth.value + margin.value[0]) + containerPadding.value[0]);
+    } else {
+      return Math.round(dragging.value.x);
+    }
+  });
+  const y = computed3(() => {
+    if (!dragging.value) {
+      return Math.round(props.y * (rowHeight.value + margin.value[1]) + containerPadding.value[1]);
+    } else {
+      return Math.round(dragging.value.y);
+    }
+  });
+  const width = computed3(() => {
+    if (!resizing.value) {
+      return Math.round(cellWidth.value * props.width + Math.max(0, props.width - 1) * margin.value[0]);
+    } else {
+      return Math.round(resizing.value.width);
+    }
+  });
+  const height = computed3(() => {
+    if (!resizing.value) {
+      return Math.round(rowHeight.value * props.height + Math.max(0, props.height - 1) * margin.value[1]);
+    } else {
+      return Math.round(resizing.value.height);
+    }
+  });
+  const minWidth = computed3(() => {
+    const minW = layout.minW.value;
+    return Math.round(cellWidth.value * minW + Math.max(0, minW - 1) * margin.value[0]);
+  });
+  const minHeight = computed3(() => {
+    const minH = layout.minH.value;
+    return Math.round(rowHeight.value * minH + Math.max(0, minH - 1) * margin.value[1]);
+  });
+  const style = computed3(() => {
+    return {
+      position: "absolute",
+      width: `${width.value}px`,
+      height: `${height.value}px`,
+      transform: `translate(${x.value}px, ${y.value}px)`
+    };
+  });
+  const onDragStart = (evt, { node }) => {
+    const parentRect = node.offsetParent.getBoundingClientRect();
+    const clientRect = node.getBoundingClientRect();
+    dragging.value = {
+      x: clientRect.left - parentRect.left + node.offsetParent.scrollLeft,
+      y: clientRect.top - parentRect.top + node.offsetParent.scrollTop
+    };
+  };
+  const onDrag = (evt, coreData) => {
+    if (!dragging.value) {
+      throw new Error("onDrag called before onDragStart");
+    }
+    const { deltaX, deltaY } = coreData;
+    const dragX = dragging.value.x + deltaX;
+    const dragY = dragging.value.y + deltaY;
+    dragging.value = { x: dragX, y: dragY };
+    const { x: x2, y: y2 } = _calcXY(dragX, dragY);
+    props.dragFn(evt, { x: x2, y: y2 });
+  };
+  const onDragStop = (evt) => {
+    if (!dragging.value) {
+      throw new Error("onDragStop called before onDratStart");
+    }
+    const { x: _x, y: _y } = dragging.value;
+    const { x: x2, y: y2 } = _calcXY(_x, _y);
+    dragging.value = void 0;
+    props.dragEndFn(evt, { x: x2, y: y2 });
+  };
+  const onResizeStart = (evt, { width: width2, height: height2 }) => {
+    resizing.value = { width: width2, height: height2 };
+  };
+  const onResize = (evt, coreData) => {
+    const { width: width2, height: height2 } = coreData;
+    const { w, h: h8 } = _calcWH(width2, height2);
+    resizing.value = { width: width2, height: height2 };
+    props.resizeFn(evt, { w, h: h8 });
+  };
+  const onResizeStop = (evt, coreData) => {
+    resizing.value = void 0;
+    const { width: width2, height: height2 } = coreData;
+    const { w, h: h8 } = _calcWH(width2, height2);
+    props.resizeStopFn(evt, { w, h: h8 });
+  };
+  function _calcXY(left, top) {
+    let x2 = Math.round((left - margin.value[0]) / (cellWidth.value + margin.value[0]));
+    let y2 = Math.round((top - margin.value[1]) / (rowHeight.value + margin.value[1]));
+    x2 = clamp(x2, 0, cols.value - props.width);
+    y2 = clamp(y2, 0, maxRows.value - props.height);
+    return { x: x2, y: y2 };
+  }
+  function _calcWH(width2, height2) {
+    let w = Math.round((width2 + margin.value[0]) / (cellWidth.value + margin.value[0]));
+    let h8 = Math.round((height2 + margin.value[1]) / (rowHeight.value + margin.value[1]));
+    w = clamp(w, 0, cols.value - props.x);
+    h8 = clamp(h8, 0, maxRows.value - props.y);
+    return { w, h: h8 };
+  }
+  return {
+    x,
+    y,
+    width,
+    height,
+    dragging,
+    resizing,
+    style,
+    minWidth,
+    minHeight,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onResizeStart,
+    onResize,
+    onResizeStop
+  };
+}
+
+// src/components/freeDom.ts
+import { computed as computed6, defineComponent as defineComponent4, h as h4, onMounted as onMounted2, reactive as reactive2, ref as ref9 } from "vue-demi";
+
+// src/components/freeDomCore.ts
+import { computed as computed4, defineComponent as defineComponent2, h as h2, onUnmounted, ref as ref8, withModifiers } from "vue-demi";
+function noop() {
+}
+var freeDomCoreProps = {
+  userSelectHack: {
     type: Boolean,
+    default: true
+  },
+  startFn: {
+    type: Function,
+    default: noop
+  },
+  stopFn: {
+    type: Function,
+    default: noop
+  },
+  dragFn: {
+    type: Function,
+    default: noop
+  },
+  disabled: Boolean
+};
+var freeDomCore = defineComponent2({
+  name: "FreeDomCore",
+  props: freeDomCoreProps,
+  setup(props) {
+    const { only } = useDefaultSlot();
+    const dragging = ref8(false);
+    const domRef = ref8();
+    const node = computed4(() => domRef.value?.$el || domRef.value);
+    const ownerDoc = computed4(() => node.value?.ownerDocument);
+    const { lastX, lastY, create } = useCoreData(node);
+    let parentNode;
+    let parentRect;
+    onUnmounted(() => {
+      if (!ownerDoc.value)
+        return;
+      if (props.userSelectHack)
+        _removeUserSelectStyle(ownerDoc.value);
+      ownerDoc.value.removeEventListener("mousemove", _handleDrag);
+      ownerDoc.value.removeEventListener("mouseup", _handleDragStop);
+    });
+    function mousedownFn(evt) {
+      return _handleDragstart(evt);
+    }
+    function mouseupFn(evt) {
+      _handleDragStop(evt);
+    }
+    function _addUserSelectStyle(doc) {
+      if (!doc)
+        return;
+      if (!doc.getElementById("free-dom-style-el")) {
+        const styleEl = doc.createElement("style");
+        styleEl.id = "free-dom-style-el";
+        styleEl.innerHTML = ".free-dom-transparent-selection *::selection {all: inherit;}";
+        doc.getElementsByTagName("head")[0].appendChild(styleEl);
+      }
+      if (doc.body)
+        doc.body.classList.add("free-dom-transparent-selection");
+    }
+    function _removeUserSelectStyle(doc) {
+      if (!doc)
+        return;
+      if (doc.body) {
+        doc.body.classList.remove("free-dom-transparent-selection");
+      }
+      const selection = doc.getSelection();
+      if (selection) {
+        selection.removeAllRanges();
+      }
+    }
+    function _handleDragstart(evt) {
+      if (props.disabled || !evt.target || !(evt.target instanceof node.value.ownerDocument.defaultView.Node))
+        return;
+      const { x, y } = _offsetFormat(evt);
+      const coreEvent = create(x, y);
+      props.startFn(evt, coreEvent);
+      lastX.value = x;
+      lastY.value = y;
+      dragging.value = true;
+      if (props.userSelectHack)
+        _addUserSelectStyle(ownerDoc.value);
+      ownerDoc.value?.addEventListener("mousemove", _handleDrag);
+      ownerDoc.value?.addEventListener("mouseup", _handleDragStop);
+    }
+    function _handleDragStop(evt) {
+      if (!dragging.value)
+        return;
+      const { x, y } = _offsetFormat(evt);
+      const coreEvent = create(x, y);
+      props.stopFn(evt, coreEvent);
+      if (props.userSelectHack)
+        _removeUserSelectStyle(ownerDoc.value);
+      dragging.value = false;
+      lastX.value = NaN;
+      lastY.value = NaN;
+      ownerDoc.value?.removeEventListener("mousemove", _handleDrag);
+      ownerDoc.value?.removeEventListener("mouseup", _handleDragStop);
+    }
+    function _handleDrag(evt) {
+      const { x, y } = _offsetFormat(evt);
+      const coreEvent = create(x, y);
+      props.dragFn(evt, coreEvent);
+      lastX.value = x;
+      lastY.value = y;
+    }
+    function _offsetFormat(evt) {
+      const parent = node.value?.offsetParent || ownerDoc.value.body;
+      const isBody = parent === parent.ownerDocument.body;
+      if (!parentNode || parentNode !== parent) {
+        parentNode = parent;
+        parentRect = isBody ? { left: 0, top: 0 } : parent.getBoundingClientRect();
+      }
+      const x = evt.clientX + parent.scrollLeft - parentRect.left;
+      const y = evt.clientY + parent.scrollTop - parentRect.top;
+      return { x, y };
+    }
+    return {
+      only,
+      domRef,
+      mousedownFn,
+      mouseupFn
+    };
+  },
+  render() {
+    return this.only ? h2(this.only, {
+      ref: "domRef",
+      onMousedown: withModifiers(this.mousedownFn, ["stop"]),
+      onMouseup: this.mouseupFn
+    }) : null;
+  }
+});
+var freeDomCore_default = freeDomCore;
+
+// src/components/resizeDomCore.ts
+import { computed as computed5, defineComponent as defineComponent3, h as h3, shallowRef as shallowRef3 } from "vue-demi";
+var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
+function noop2() {
+}
+var resizeDomCoreProps = {
+  dragOpts: {
+    type: Object,
+    default: () => ({})
+  },
+  width: {
+    type: Number,
+    default: 0
+  },
+  height: {
+    type: Number,
+    default: 0
+  },
+  scale: {
+    type: [Boolean, Array],
     default: void 0
   },
-  preview: Boolean,
-  move: Boolean,
-  scale: [Boolean, Array],
-  diff: {
+  startFn: {
+    type: Function,
+    default: noop2
+  },
+  stopFn: {
+    type: Function,
+    default: noop2
+  },
+  resizeFn: {
+    type: Function,
+    default: noop2
+  },
+  minWidth: {
+    type: Number,
+    default: 50
+  },
+  minHeight: {
+    type: Number,
+    default: 50
+  },
+  lockAspectRatio: Boolean
+};
+var resizeDomCore = defineComponent3({
+  name: "ResizeDomCore",
+  props: resizeDomCoreProps,
+  setup(props, { slots }) {
+    const { slots: _slots } = useDefaultSlot();
+    const dots = computed5(() => {
+      const _dots = props.scale;
+      return Array.isArray(_dots) ? _dots : Dots;
+    });
+    const lastRect = shallowRef3();
+    function runConstraints(width, height) {
+      const { lockAspectRatio } = props;
+      if (!props.minHeight && !props.minWidth && !lockAspectRatio)
+        return [width, height];
+      if (lockAspectRatio) {
+        const ratio = props.width / props.height;
+        const deltaW = width - props.width;
+        const deltaH = height - props.height;
+        if (Math.abs(deltaW) > Math.abs(deltaH * ratio)) {
+          height = width / ratio;
+        } else {
+          width = height * ratio;
+        }
+      }
+      width = Math.max(width, props.minWidth);
+      height = Math.max(height, props.minHeight);
+      return [width, height];
+    }
+    function handleResize(handleName, axis) {
+      return (evt, { node, deltaX, deltaY }) => {
+        if (handleName === "start")
+          lastRect.value = void 0;
+        const canDragX = axis !== "t" && axis !== "b";
+        const canDragY = axis !== "l" && axis !== "r";
+        const axisH = axis[0];
+        const axisV = axis[axis.length - 1];
+        const handleRect = node.getBoundingClientRect();
+        lastRect.value = handleRect;
+        if (axisH === "l")
+          deltaX = -deltaX;
+        if (axisV === "t")
+          deltaY = -deltaY;
+        let width = props.width + (canDragX ? deltaX : 0);
+        let height = props.height + (canDragY ? deltaY : 0);
+        [width, height] = runConstraints(width, height);
+        const sizeChanged = width !== props.width || height !== props.height;
+        const fnName = `${handleName}Fn`;
+        const cb = typeof props[fnName] === "function" ? props[fnName] : null;
+        const shouldSkipCb = handleName === "resize" && !sizeChanged;
+        if (cb && !shouldSkipCb) {
+          cb(evt, { node, width, height, handle: axis });
+        }
+        if (handleName === "stop")
+          lastRect.value = void 0;
+      };
+    }
+    function renderResizehandler(axis) {
+      if (!slots.handler) {
+        return () => h3("i", {
+          class: [
+            "vv-resize-dom--handler",
+            `vv-resize-dom--handler__${axis}`
+          ]
+        });
+      }
+      return () => slots.handler?.(axis);
+    }
+    return {
+      dots,
+      children: _slots,
+      handleResize,
+      renderResizehandler
+    };
+  },
+  render() {
+    return h3("div", {
+      class: "vv-resize-dom--box"
+    }, [
+      this.children?.map((node) => h3(node)),
+      this.dots.map((dot) => h3(freeDomCore_default, {
+        class: [
+          this.dragOpts.disabled && "vv-resize-dom--disabled"
+        ],
+        ...this.dragOpts,
+        stopFn: this.handleResize("stop", dot),
+        startFn: this.handleResize("start", dot),
+        dragFn: this.handleResize("resize", dot)
+      }, this.renderResizehandler(dot)))
+    ]);
+  }
+});
+var resizeDomCore_default = resizeDomCore;
+
+// src/components/freeDom.ts
+function noop3() {
+}
+var freeDomProps = {
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  },
+  x: {
     type: Number,
-    default: 3
+    default: 0
   },
-  handler: {
-    type: String,
+  y: {
+    type: Number,
+    default: 0
+  },
+  width: {
+    type: Number,
     default: void 0
   },
-  diagonal: {
+  height: {
+    type: Number,
+    default: void 0
+  },
+  lockAspectRatio: Boolean,
+  dragStartFn: {
+    type: Function,
+    default: noop3
+  },
+  dragStopFn: {
+    type: Function,
+    default: noop3
+  },
+  dargFn: {
+    type: Function,
+    default: noop3
+  },
+  resizeStartFn: {
+    type: Function,
+    default: noop3
+  },
+  resizeFn: {
+    type: Function,
+    default: noop3
+  },
+  resizeStopFn: {
+    type: Function,
+    default: noop3
+  },
+  autoSize: {
     type: Boolean,
+    default: true
+  },
+  minWidth: resizeDomCoreProps.minWidth,
+  minHeight: resizeDomCoreProps.minHeight,
+  disabledDrag: Boolean,
+  disabledResize: Boolean,
+  scale: resizeDomCoreProps.scale,
+  fixNonMonospaced: Boolean
+};
+var freeDom = defineComponent4({
+  name: "FreeDom",
+  props: freeDomProps,
+  emits: [
+    "update:width",
+    "update:height",
+    "update:x",
+    "update:y",
+    "update:modelValue"
+  ],
+  setup(props, { emit, expose, slots }) {
+    const domRef = ref9();
+    const { slots: children } = useDefaultSlot();
+    const {
+      x,
+      y,
+      deltaX,
+      deltaY,
+      create,
+      handleDrag,
+      handleDragStop
+    } = useDraggableData(props);
+    const { width, height, syncSize: _syncSize } = useResizableData(props, domRef);
+    const context = {
+      _rect: reactive2({
+        x,
+        y,
+        width,
+        height,
+        deltaX,
+        deltaY
+      }),
+      trigger: () => {
+      }
+    };
+    const sceneContext = useSceneContext(context, props);
+    const syncSize = () => {
+      _syncSize(
+        sceneContext.fixNonMonospaced.value,
+        sceneContext.minWidth.value,
+        sceneContext.minHeight.value
+      );
+    };
+    onMounted2(() => {
+      props.autoSize && syncSize();
+    });
+    const style = computed6(() => ({
+      position: "absolute",
+      width: `${width.value}px`,
+      height: `${height.value}px`,
+      transform: `translate(${x.value}px, ${y.value}px)`
+    }));
+    const onDrag = (evt, coreData) => {
+      const data = create(coreData);
+      const newPos = {
+        x: data.x,
+        y: data.y,
+        width: width.value,
+        height: height.value
+      };
+      const isValid = sceneContext.check?.(newPos);
+      if (!isValid)
+        return;
+      handleDrag(evt, data);
+      sceneContext.emit("move");
+    };
+    const onDragStop = (evt, coreData) => {
+      const newPos = {
+        x: x.value,
+        y: y.value,
+        width: width.value,
+        height: height.value
+      };
+      const isValid = sceneContext.check?.(newPos);
+      if (!isValid) {
+        x.value = clamp(x.value, 0, sceneContext.width);
+        y.value = clamp(y.value, 0, sceneContext.height);
+      }
+      handleDragStop(evt, coreData);
+      sceneContext.emit("moveup");
+      emit("update:x", x.value);
+      emit("update:y", y.value);
+      emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
+    };
+    const onResize = (evt, { node, width: w, height: h8, handle: axis }) => {
+      const offsetW = -(w - width.value);
+      const offsetH = -(h8 - height.value);
+      const axisH = axis[0];
+      const axisV = axis[axis.length - 1];
+      let _x = x.value;
+      let _y = y.value;
+      if (axisH === "l") {
+        _x += offsetW;
+      }
+      if (axisV === "t") {
+        _y += offsetH;
+      }
+      const isValid = sceneContext.check?.({ x: _x, y: _y, width: w, height: h8 });
+      if (!isValid)
+        return;
+      width.value = w;
+      height.value = h8;
+      x.value = _x;
+      y.value = _y;
+      props.resizeFn(evt, { node, width: w, height: h8, handle: axis });
+      sceneContext?.emit("move");
+    };
+    const onResizeStop = () => {
+      const isValid = sceneContext.check?.({ x: x.value, y: y.value, width: width.value, height: height.value });
+      if (!isValid) {
+        x.value = clamp(x.value, 0, sceneContext.width);
+        y.value = clamp(y.value, 0, sceneContext.height);
+      }
+      emit("update:width", width.value);
+      emit("update:height", height.value);
+      emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
+      sceneContext.emit("moveup");
+    };
+    const resizeNode = () => h4(resizeDomCore_default, {
+      width: width.value,
+      height: height.value,
+      lockAspectRatio: sceneContext.lockAspectRatio.value,
+      dragOpts: { disabled: sceneContext.disabledResize.value },
+      resizeFn: onResize,
+      stopFn: onResizeStop,
+      minHeight: sceneContext.minHeight.value,
+      minWidth: sceneContext.minWidth.value,
+      scale: sceneContext.scale.value
+    }, {
+      default: () => children.value,
+      handler: slots.handler
+    });
+    expose({
+      syncSize
+    });
+    return {
+      domRef,
+      style,
+      onDragStop,
+      onDrag,
+      resizeNode,
+      disabled: sceneContext.disabledDrag
+    };
+  },
+  render() {
+    return h4(freeDomCore_default, {
+      ref: "domRef",
+      class: "vv-free-dom--draggable",
+      style: this.style,
+      stopFn: this.onDragStop,
+      dragFn: this.onDrag,
+      disabled: this.disabled
+    }, () => this.resizeNode());
+  }
+});
+var freeDom_default = freeDom;
+
+// src/components/freeDomWrap.ts
+var freeDomWrapProps = {
+  width: {
+    type: Number,
     default: void 0
   },
-  grid: {
-    type: Object,
+  height: {
+    type: Number,
     default: void 0
-  }
+  },
+  diff: {
+    type: Number,
+    default: 2
+  },
+  showLine: {
+    type: Boolean,
+    default: true
+  },
+  minWidth: freeDomProps.minWidth,
+  minHeight: freeDomProps.minHeight,
+  lockAspectRatio: freeDomProps.lockAspectRatio,
+  disabledDrag: freeDomProps.disabledDrag,
+  disabledResize: freeDomProps.disabledResize,
+  scale: freeDomProps.scale,
+  fixNonMonospaced: freeDomProps.fixNonMonospaced
 };
-var FreeDomWrap = defineComponent3({
+var FreeDomWrap = defineComponent5({
   name: "FreeDomWrap",
   props: freeDomWrapProps,
   setup(props) {
-    const rectRef = shallowRef3(null);
-    const rect = useElementBounding(rectRef);
-    const nodes = ref4([]);
+    const eventBus = useEventBus();
+    const rectRef = shallowRef4();
+    const nodes = ref10([]);
+    const width = ref10(props.width);
+    const height = ref10(props.height);
+    watchEffect4(() => {
+      width.value = props.width;
+    });
+    watchEffect4(() => {
+      height.value = props.height;
+    });
+    onMounted3(() => {
+      if (!props.width || !props.height) {
+        if (!rectRef.value)
+          console.warn("[free-dom] cannot find element, width or height may be set to 0");
+        const { width: w, height: h8 } = rectRef.value?.getBoundingClientRect() || {};
+        if (!props.width)
+          width.value = w || 0;
+        if (!props.height)
+          height.value = h8 || 0;
+      }
+    });
     function register(uuid, node) {
       nodes.value.push({ uuid, node });
     }
     function checkValid(pos) {
-      const { x, y, width, height } = pos;
-      return x >= 0 && x + width <= rect.width.value && y >= 0 && y + height <= rect.height.value;
+      const { x, y, width: w, height: h8 } = pos;
+      return x >= 0 && x + w <= width.value && y >= 0 && y + h8 <= height.value;
     }
     provide(
       SceneToken,
       reactive3({
         ...toRefs(props),
         nodes,
+        width,
+        height,
         register,
-        checkValid
+        checkValid,
+        on: eventBus.on,
+        off: eventBus.off,
+        emit: eventBus.emit
       })
     );
+    const style = computed7(() => ({
+      width: `${props.width}px`,
+      height: `${props.height}px`
+    }));
     return {
-      rectRef
+      rectRef,
+      style
     };
   },
   render() {
     const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
-    return h3("section", {
-      ref: "rectRef"
-    }, [defaultSlot, h3(markLine_default)]);
+    return h5("section", {
+      ref: "rectRef",
+      class: "vv-free-dom--scene",
+      style: this.style
+    }, [defaultSlot, h5(markLine_default, { showLine: this.showLine })]);
+  }
+});
+
+// src/components/gridLayout.ts
+import { defineComponent as defineComponent7, h as h7, provide as provide2, ref as ref11 } from "vue-demi";
+
+// src/components/gridItem.ts
+import { defineComponent as defineComponent6, h as h6, inject as inject3 } from "vue-demi";
+
+// src/components/tokens.ts
+var gridLayoutContextKey = Symbol("gridLayoutContext");
+
+// src/components/gridItem.ts
+var noop4 = () => {
+};
+var gridItemProps = {
+  x: {
+    type: Number,
+    required: true
+  },
+  y: {
+    type: Number,
+    required: true
+  },
+  width: {
+    type: Number,
+    required: true
+  },
+  height: {
+    type: Number,
+    required: true
+  },
+  dragStartFn: {
+    type: Function,
+    default: noop4
+  },
+  dragFn: {
+    type: Function,
+    default: noop4
+  },
+  dragEndFn: {
+    type: Function,
+    default: noop4
+  },
+  resizeStartFn: {
+    type: Function,
+    default: noop4
+  },
+  resizeFn: {
+    type: Function,
+    default: noop4
+  },
+  resizeStopFn: {
+    type: Function,
+    default: noop4
+  },
+  isDraggable: Boolean,
+  isResizable: Boolean,
+  scale: {
+    type: resizeDomCoreProps.scale.type,
+    default: () => ["rb"]
+  }
+};
+var gridItemEmits = ["dragMove"];
+var GridItem = defineComponent6({
+  name: "GridItem",
+  props: gridItemProps,
+  emits: gridItemEmits,
+  setup(props) {
+    const layout = inject3(gridLayoutContextKey);
+    if (!layout) {
+      throw new Error("TODO");
+    }
+    const {
+      x,
+      y,
+      width,
+      height,
+      dragging,
+      style,
+      minWidth,
+      minHeight,
+      onDragStart,
+      onDrag,
+      onDragStop,
+      onResizeStart,
+      onResize,
+      onResizeStop
+    } = useLayoutItem(props, layout);
+    const { only, slots } = useDefaultSlot();
+    const resizeNode = (child) => {
+      return h6(resizeDomCore_default, {
+        width: width.value,
+        height: height.value,
+        scale: props.scale,
+        dragOpts: {
+          disabled: !props.isResizable
+        },
+        minWidth: minWidth.value,
+        minHeight: minHeight.value,
+        startFn: onResizeStart,
+        resizeFn: onResize,
+        stopFn: onResizeStop
+      }, () => child);
+    };
+    const dragNode = (child) => h6(freeDomCore_default, {
+      class: [
+        dragging.value && "vv-grid-layout--item__draggable",
+        "vv-grid-layout--item",
+        !props.isDraggable && "vv-grid-layout--item__disabled"
+      ],
+      style: style.value,
+      disabled: !props.isDraggable,
+      startFn: onDragStart,
+      stopFn: onDragStop,
+      dragFn: onDrag
+    }, () => resizeNode(child));
+    return {
+      x,
+      y,
+      width,
+      height,
+      child: only,
+      slots,
+      style,
+      dragging,
+      onDragStart,
+      onDrag,
+      onDragStop,
+      onResizeStart,
+      onResize,
+      onResizeStop,
+      dragNode
+    };
+  },
+  render() {
+    const node = this.slots;
+    return this.dragNode(node);
+  }
+});
+
+// src/components/gridLayout.ts
+var gridLayoutProps = {
+  style: {
+    type: Object,
+    default: () => ({})
+  },
+  modelValue: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  autoHeight: {
+    type: Boolean,
+    default: true
+  },
+  cols: {
+    type: Number,
+    default: 12
+  },
+  maxRows: {
+    type: Number,
+    default: Infinity
+  },
+  minW: {
+    type: Number,
+    default: 1
+  },
+  minH: {
+    type: Number,
+    default: 1
+  },
+  rowHeight: {
+    type: Number,
+    default: 150
+  },
+  width: {
+    type: Number,
+    default: 1200
+  },
+  margin: {
+    type: Array,
+    default: () => [10, 10]
+  },
+  containerPadding: {
+    type: Array,
+    default: void 0
+  },
+  disabledDrag: Boolean,
+  disabledResize: Boolean,
+  collision: Boolean
+};
+var GridLayout = defineComponent7({
+  name: "GridLayout",
+  props: gridLayoutProps,
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const layout = useLayout(props);
+    provide2(gridLayoutContextKey, layout);
+    const activeDrag = ref11(null);
+    function processItem(node) {
+      const key = node.key;
+      if (!key)
+        return;
+      const config = layout.getItem(String(key));
+      if (!config)
+        return;
+      const isDraggable = !config.static && !props.disabledDrag;
+      const isResizable = !config.static && !props.disabledResize;
+      return h7(GridItem, {
+        x: config.x,
+        y: config.y,
+        width: config.w,
+        height: config.h,
+        isDraggable,
+        isResizable,
+        scale: config.scale,
+        dragEndFn: (evt, rect) => {
+          const { x, y } = rect;
+          const _layout = layout.moveTo(config, x, y);
+          emit("update:modelValue", _layout);
+          activeDrag.value = null;
+        },
+        dragStartFn: () => {
+        },
+        dragFn: (evt, data) => {
+          if (!config)
+            return;
+          const placeholder2 = {
+            x: config.x,
+            y: config.y,
+            width: config.w,
+            height: config.h
+          };
+          const { x, y } = data;
+          layout.moveTo(config, x, y);
+          activeDrag.value = placeholder2;
+        },
+        resizeFn: (evt, data) => {
+          const placeholder2 = {
+            x: config.x,
+            y: config.y,
+            width: config.w,
+            height: config.h
+          };
+          activeDrag.value = placeholder2;
+          const { w, h: h8 } = data;
+          layout.resizeTo(config, w, h8);
+        },
+        resizeStopFn: (evt, data) => {
+          const { w, h: h8 } = data;
+          layout.resizeTo(config, w, h8);
+          activeDrag.value = null;
+        }
+      }, () => node);
+    }
+    function placeholder() {
+      if (!activeDrag.value)
+        return null;
+      const { x, y, width, height } = activeDrag.value;
+      return h7(GridItem, {
+        class: "vv-grid-layout--placeholder",
+        x,
+        y,
+        width,
+        height,
+        move: false
+      });
+    }
+    return {
+      processItem,
+      placeholder,
+      layout
+    };
+  },
+  render() {
+    const mergedStyle = {
+      ...this.style || {},
+      height: this.layout.calContainerHeight()
+    };
+    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default || [];
+    return h7("div", {
+      class: "vv-grid-layout",
+      style: mergedStyle
+    }, [
+      defaultSlot.map(this.processItem),
+      this.placeholder()
+    ]);
   }
 });
+var gridLayout_default = GridLayout;
 
 // src/index.ts
-var freeDom = FreeDom;
-var freeScene = FreeDomWrap;
+var FreeScene = FreeDomWrap;
+var GridLayout2 = gridLayout_default;
+var FreeDom = freeDom_default;
 export {
-  freeDom,
-  freeScene
+  FreeDom,
+  FreeScene,
+  GridLayout2 as GridLayout
 };