@sepveneto/free-dom 0.10.0 → 0.11.0

package/dist/index.mjs

@@ -1,5 +1,15 @@
 // src/components/freeDomWrap.ts
-import { computed as computed8, defineComponent as defineComponent5, onMounted as onMounted3, provide, reactive as reactive3, ref as ref9, shallowRef as shallowRef4, toRefs, watchEffect as watchEffect4 } from "vue-demi";
+import {
+  computed as computed11,
+  defineComponent as defineComponent6,
+  onMounted as onMounted5,
+  provide as provide2,
+  reactive as reactive5,
+  ref as ref13,
+  shallowRef as shallowRef6,
+  toRefs as toRefs2,
+  watchEffect as watchEffect6
+} from "vue-demi";
 
 // src/util/tokens.ts
 var SceneToken = Symbol("Scene");
@@ -45,6 +55,29 @@ function log(...args) {
     return;
   console.log("[grid-layout]", ...args);
 }
+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();
+  }
+}
 
 // src/components/markLine.ts
 import { computed, defineComponent, h as h2, inject, onBeforeUnmount, reactive, shallowRef } from "vue-demi";
@@ -58,6 +91,7 @@ var markLine_default = defineComponent({
     const lines = shallowRef(lineType);
     const diff = computed(() => SceneContext.diff / SceneContext.transformScale);
     const nodes = SceneContext.nodes;
+    const staticNodes = computed(() => nodes.filter((node) => !node.node.selected));
     const lineStatus = reactive({
       xt: {
         show: false,
@@ -84,78 +118,80 @@ var markLine_default = defineComponent({
         pos: 0
       }
     });
-    const runConstraints = (uuid) => {
-      const current = nodes.find((node) => node.uuid === uuid)?.node ?? {};
+    const runConstraints = (uuid, withoutConstraint) => {
+      const current = nodes.find((node) => node.uuid === uuid)?.node;
+      if (!current)
+        return;
       clearStatus();
-      nodes.forEach((node) => {
+      staticNodes.value.forEach((node) => {
         if (node.uuid === uuid)
           return;
         const _current = normalize(current._rect);
         const _target = normalize(node.node._rect);
-        if (isNearly(_current.top, _target.top)) {
+        if (isNearly(_current.top, _target.top, withoutConstraint)) {
           lineStatus.xt = {
             show: true,
             pos: _target.top
           };
           current._rect.y = _target.top;
         }
-        if (isNearly(_current.bottom, _target.top)) {
+        if (isNearly(_current.bottom, _target.top, withoutConstraint)) {
           lineStatus.xt = {
             show: true,
             pos: _target.top
           };
           current._rect.y = _target.top - _current.height;
         }
-        if (isNearly(_current.centerY, _target.centerY)) {
+        if (isNearly(_current.centerY, _target.centerY, withoutConstraint)) {
           lineStatus.xc = {
             show: true,
             pos: _target.centerY
           };
           current._rect.y = _target.centerY - _current.height / 2;
         }
-        if (isNearly(_current.top, _target.bottom)) {
+        if (isNearly(_current.top, _target.bottom, withoutConstraint)) {
           lineStatus.xb = {
             show: true,
             pos: _target.bottom
           };
           current._rect.y = _target.bottom;
         }
-        if (isNearly(_current.bottom, _target.bottom)) {
+        if (isNearly(_current.bottom, _target.bottom, withoutConstraint)) {
           lineStatus.xb = {
             show: true,
             pos: _target.bottom
           };
           current._rect.y = _target.bottom - _current.height;
         }
-        if (isNearly(_current.left, _target.left)) {
+        if (isNearly(_current.left, _target.left, withoutConstraint)) {
           lineStatus.yl = {
             show: true,
             pos: _target.left
           };
           current._rect.x = _target.left;
         }
-        if (isNearly(_current.right, _target.left)) {
+        if (isNearly(_current.right, _target.left, withoutConstraint)) {
           lineStatus.yl = {
             show: true,
             pos: _target.left
           };
           current._rect.x = _target.left - _current.width;
         }
-        if (isNearly(_current.centerX, _target.centerX)) {
+        if (isNearly(_current.centerX, _target.centerX, withoutConstraint)) {
           lineStatus.yc = {
             show: true,
             pos: _target.centerX
           };
           current._rect.x = _target.centerX - _current.width / 2;
         }
-        if (isNearly(_current.left, _target.right)) {
+        if (isNearly(_current.left, _target.right, withoutConstraint)) {
           lineStatus.yr = {
             show: true,
             pos: _target.right
           };
           current._rect.x = _target.right;
         }
-        if (isNearly(_current.right, _target.right)) {
+        if (isNearly(_current.right, _target.right, withoutConstraint)) {
           lineStatus.yr = {
             show: true,
             pos: _target.right
@@ -192,8 +228,9 @@ var markLine_default = defineComponent({
         centerY: rect.y + rect.height / 2
       };
     }
-    function isNearly(curr, target) {
-      return Math.abs(curr - target) <= diff.value;
+    function isNearly(curr, target, withoutConstraint) {
+      const _diff = withoutConstraint ? 0 : diff.value;
+      return Math.abs(curr - target) <= _diff;
     }
     return {
       lines,
@@ -217,13 +254,11 @@ var markLine_default = defineComponent({
 import { ref, unref, watch } from "vue-demi";
 
 // src/hooks/use-default-slot.ts
-import { computed as computed2, useSlots } from "vue-demi";
+import { useSlots } from "vue-demi";
 function useDefaultSlot() {
   const slots = useSlots();
-  const slotList = computed2(() => {
-    return typeof slots.default === "function" ? slots.default() : slots.default;
-  });
-  const only = computed2(() => slotList.value?.[0]);
+  const slotList = typeof slots.default === "function" ? slots.default() : slots.default;
+  const only = slotList?.[0];
   return {
     slots: slotList,
     only
@@ -322,22 +357,23 @@ function useDraggableData(props) {
 }
 
 // src/hooks/use-scene-context.ts
-import { computed as computed3, inject as inject2, onMounted, onUnmounted } from "vue-demi";
+import { computed as computed2, inject as inject2, onMounted, onUnmounted } from "vue-demi";
 var id = 0;
 function useSceneContext(context, props) {
   const SceneContext = inject2(SceneToken, void 0);
   const uuid = id++;
-  const handle = computed3(() => SceneContext?.handle || props.handle);
-  const lockAspectRatio = computed3(() => SceneContext?.lockAspectRatio || props.lockAspectRatio);
-  const minWidth = computed3(() => SceneContext?.minWidth || props.minWidth);
-  const minHeight = computed3(() => SceneContext?.minHeight || props.minHeight);
-  const disabledDrag = computed3(() => SceneContext?.disabledDrag || props.disabledDrag);
-  const disabledResize = computed3(() => SceneContext?.disabledResize || props.disabledResize);
-  const scale = computed3(() => SceneContext?.scale || props.scale);
-  const transformScale = computed3(() => SceneContext?.transformScale || props.transformScale);
-  const fixNonMonospaced = computed3(() => {
+  const handle = computed2(() => SceneContext?.handle || props.handle);
+  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 transformScale = computed2(() => SceneContext?.transformScale || props.transformScale);
+  const fixNonMonospaced = computed2(() => {
     return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
   });
+  const keyboard = computed2(() => SceneContext?.keyboard || props.keyboard);
   onMounted(() => {
     SceneContext?.register(uuid, context);
   });
@@ -355,11 +391,15 @@ function useSceneContext(context, props) {
     return SceneContext.correct(pos);
   }
   return {
-    emit: (name) => SceneContext?.emit(name, uuid),
+    emit: (name, withoutConstraint) => {
+      SceneContext?.emit(name, uuid, withoutConstraint);
+    },
     check,
     correct,
+    clearSelectState: SceneContext?.clearSelectState,
     width: SceneContext?.width,
     height: SceneContext?.height,
+    history: SceneContext?.history,
     scale,
     handle,
     lockAspectRatio,
@@ -368,14 +408,15 @@ function useSceneContext(context, props) {
     disabledDrag,
     disabledResize,
     fixNonMonospaced,
-    transformScale
+    transformScale,
+    keyboard
   };
 }
 
 // src/hooks/use-event-bus.ts
 import { ref as ref4 } from "vue-demi";
+var callbacks = ref4({});
 function useEventBus() {
-  const callbacks = ref4({});
   const on = (name, cb) => {
     if (!callbacks.value[name]) {
       callbacks.value[name] = [cb];
@@ -386,9 +427,9 @@ function useEventBus() {
   const off = (name) => {
     callbacks.value[name].length = 0;
   };
-  const emit = (name, args) => {
+  const emit = (name, ...args) => {
     const fns = callbacks.value[name] || [];
-    fns.forEach((fn) => fn(args));
+    fns.forEach((fn) => fn(...args));
   };
   return {
     on,
@@ -422,9 +463,9 @@ function useResizableData(props, domRef) {
     if (fixNonMonospaced) {
       await document.fonts.ready;
     }
-    const { width: w, height: h5 } = window.getComputedStyle(domRef.value.$el);
+    const { width: w, height: h7 } = window.getComputedStyle(domRef.value.$el);
     width.value = Math.max(Math.ceil(parseFloat(w)), minWidth);
-    height.value = Math.max(Math.ceil(parseFloat(h5)), minHeight);
+    height.value = Math.max(Math.ceil(parseFloat(h7)), minHeight);
   }
   return {
     width,
@@ -434,22 +475,22 @@ function useResizableData(props, domRef) {
 }
 
 // src/hooks/use-layout.ts
-import { computed as computed4, ref as ref6, shallowRef as shallowRef2, watchEffect as watchEffect3 } from "vue-demi";
+import { computed as computed3, ref as ref6, shallowRef as shallowRef2, watchEffect as watchEffect3 } from "vue-demi";
 function useLayout(props) {
   const layout = shallowRef2(props.modelValue);
   watchEffect3(() => {
     layout.value = props.modelValue;
   });
-  const cellWidth = computed4(
+  const cellWidth = computed3(
     () => (props.width - margin.value[0] * (cols.value - 1) - (containerPadding.value?.[0] || margin.value[0]) * 2) / props.cols
   );
-  const cols = computed4(() => props.cols);
-  const rowHeight = computed4(() => props.rowHeight);
-  const margin = computed4(() => props.margin);
-  const maxRows = computed4(() => props.maxRows);
-  const containerPadding = computed4(() => props.containerPadding);
-  const minW = computed4(() => props.minW);
-  const minH = computed4(() => props.minH);
+  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);
   }
@@ -546,10 +587,10 @@ function useLayout(props) {
     layout.value = _normalize(_layout);
     return layout.value;
   }
-  function resizeTo(item, w, h5) {
+  function resizeTo(item, w, h7) {
     let hasCollisions = false;
     if (!props.collision) {
-      const collisions = layout.value.filter((l) => _collides(l, { ...item, w, h: h5 }));
+      const collisions = layout.value.filter((l) => _collides(l, { ...item, w, h: h7 }));
       hasCollisions = collisions.length > 0;
       if (hasCollisions) {
         let leastX = Infinity;
@@ -568,7 +609,7 @@ function useLayout(props) {
     }
     if (!hasCollisions) {
       item.w = w;
-      item.h = h5;
+      item.h = h7;
     }
     layout.value = _normalize([...layout.value]);
   }
@@ -686,44 +727,44 @@ function useLayoutItem(props, layout) {
   const { cellWidth, margin, rowHeight, cols, maxRows, containerPadding: cPadding } = layout;
   const dragging = ref6();
   const resizing = ref6();
-  const containerPadding = computed4(() => cPadding.value || margin.value);
-  const x = computed4(() => {
+  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 = computed4(() => {
+  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 = computed4(() => {
+  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 = computed4(() => {
+  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 = computed4(() => {
+  const minWidth = computed3(() => {
     const minW = layout.minW.value;
     return Math.round(cellWidth.value * minW + Math.max(0, minW - 1) * margin.value[0]);
   });
-  const minHeight = computed4(() => {
+  const minHeight = computed3(() => {
     const minH = layout.minH.value;
     return Math.round(rowHeight.value * minH + Math.max(0, minH - 1) * margin.value[1]);
   });
-  const style = computed4(() => {
+  const style = computed3(() => {
     return {
       position: "absolute",
       width: `${width.value}px`,
@@ -764,15 +805,15 @@ function useLayoutItem(props, layout) {
   };
   const onResize = (evt, coreData) => {
     const { width: width2, height: height2 } = coreData;
-    const { w, h: h5 } = _calcWH(width2, height2);
+    const { w, h: h7 } = _calcWH(width2, height2);
     resizing.value = { width: width2, height: height2 };
-    props.resizeFn(evt, { w, h: h5 });
+    props.resizeFn(evt, { w, h: h7 });
   };
   const onResizeStop = (evt, coreData) => {
     resizing.value = void 0;
     const { width: width2, height: height2 } = coreData;
-    const { w, h: h5 } = _calcWH(width2, height2);
-    props.resizeStopFn(evt, { w, h: h5 });
+    const { w, h: h7 } = _calcWH(width2, height2);
+    props.resizeStopFn(evt, { w, h: h7 });
   };
   function _calcXY(left, top) {
     let x2 = Math.round((left - margin.value[0]) / (cellWidth.value + margin.value[0]));
@@ -783,10 +824,10 @@ function useLayoutItem(props, layout) {
   }
   function _calcWH(width2, height2) {
     let w = Math.round((width2 + margin.value[0]) / (cellWidth.value + margin.value[0]));
-    let h5 = Math.round((height2 + margin.value[1]) / (rowHeight.value + margin.value[1]));
+    let h7 = Math.round((height2 + margin.value[1]) / (rowHeight.value + margin.value[1]));
     w = clamp(w, 0, cols.value - props.x);
-    h5 = clamp(h5, 0, maxRows.value - props.y);
-    return { w, h: h5 };
+    h7 = clamp(h7, 0, maxRows.value - props.y);
+    return { w, h: h7 };
   }
   return {
     x,
@@ -807,12 +848,474 @@ function useLayoutItem(props, layout) {
   };
 }
 
+// src/hooks/use-mask.ts
+import { computed as computed6, h as h4, ref as ref9 } from "vue-demi";
+
+// ../../node_modules/.pnpm/@vueuse+shared@10.7.1_vue@3.4.6/node_modules/@vueuse/shared/index.mjs
+import { shallowRef as shallowRef3, watchEffect as watchEffect4, readonly, ref as ref7, watch as watch2, customRef, getCurrentScope, onScopeDispose, effectScope, getCurrentInstance, provide, inject as inject3, isVue3, version, isRef, unref as unref3, computed as computed4, reactive as reactive2, toRefs as toRefs$1, toRef as toRef$1, isVue2 as isVue22, set as set$1, onBeforeMount, nextTick, onBeforeUnmount as onBeforeUnmount2, onMounted as onMounted2, onUnmounted as onUnmounted2, isReactive } from "vue-demi";
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function toValue(r) {
+  return typeof r === "function" ? r() : unref3(r);
+}
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var isWorker = typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+var toString = Object.prototype.toString;
+var isObject = (val) => toString.call(val) === "[object Object]";
+var noop = () => {
+};
+var isIOS = /* @__PURE__ */ getIsIOS();
+function getIsIOS() {
+  var _a, _b;
+  return isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && (/iP(ad|hone|od)/.test(window.navigator.userAgent) || ((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window == null ? void 0 : window.navigator.userAgent));
+}
+function cacheStringFunction(fn) {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return (str) => {
+    const hit = cache[str];
+    return hit || (cache[str] = fn(str));
+  };
+}
+var hyphenateRE = /\B([A-Z])/g;
+var hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase());
+var camelizeRE = /-(\w)/g;
+var camelize = cacheStringFunction((str) => {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+});
+function getLifeCycleTarget(target) {
+  return target || getCurrentInstance();
+}
+function tryOnMounted(fn, sync = true, target) {
+  const instance = getLifeCycleTarget();
+  if (instance)
+    onMounted2(fn, target);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+
+// ../../node_modules/.pnpm/@vueuse+core@10.7.1_vue@3.4.6/node_modules/@vueuse/core/index.mjs
+import { isRef as isRef2, ref as ref8, shallowRef as shallowRef4, watchEffect as watchEffect5, computed as computed5, inject as inject4, isVue3 as isVue32, version as version2, defineComponent as defineComponent2, h as h3, TransitionGroup, shallowReactive, Fragment, watch as watch3, getCurrentInstance as getCurrentInstance2, customRef as customRef2, onUpdated, onMounted as onMounted3, readonly as readonly2, nextTick as nextTick2, reactive as reactive3, markRaw, unref as unref4, getCurrentScope as getCurrentScope2, isVue2 as isVue23, set, del, isReadonly, onBeforeUpdate } from "vue-demi";
+function unrefElement(elRef) {
+  var _a;
+  const plain = toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+var defaultWindow = isClient ? window : void 0;
+var defaultDocument = isClient ? window.document : void 0;
+var defaultNavigator = isClient ? window.navigator : void 0;
+var defaultLocation = isClient ? window.location : void 0;
+function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (typeof args[0] === "string" || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target)
+    return noop;
+  if (!Array.isArray(events))
+    events = [events];
+  if (!Array.isArray(listeners))
+    listeners = [listeners];
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options2) => {
+    el.addEventListener(event, listener, options2);
+    return () => el.removeEventListener(event, listener, options2);
+  };
+  const stopWatch = watch3(
+    () => [unrefElement(target), toValue(options)],
+    ([el, options2]) => {
+      cleanup();
+      if (!el)
+        return;
+      const optionsClone = isObject(options2) ? { ...options2 } : options2;
+      cleanups.push(
+        ...events.flatMap((event) => {
+          return listeners.map((listener) => register(el, event, listener, optionsClone));
+        })
+      );
+    },
+    { immediate: true, flush: "post" }
+  );
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+var _iOSWorkaround = false;
+function onClickOutside(target, handler, options = {}) {
+  const { window: window2 = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
+  if (!window2)
+    return noop;
+  if (isIOS && !_iOSWorkaround) {
+    _iOSWorkaround = true;
+    Array.from(window2.document.body.children).forEach((el) => el.addEventListener("click", noop));
+    window2.document.documentElement.addEventListener("click", noop);
+  }
+  let shouldListen = true;
+  const shouldIgnore = (event) => {
+    return ignore.some((target2) => {
+      if (typeof target2 === "string") {
+        return Array.from(window2.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
+      } else {
+        const el = unrefElement(target2);
+        return el && (event.target === el || event.composedPath().includes(el));
+      }
+    });
+  };
+  const listener = (event) => {
+    const el = unrefElement(target);
+    if (!el || el === event.target || event.composedPath().includes(el))
+      return;
+    if (event.detail === 0)
+      shouldListen = !shouldIgnore(event);
+    if (!shouldListen) {
+      shouldListen = true;
+      return;
+    }
+    handler(event);
+  };
+  const cleanup = [
+    useEventListener(window2, "click", listener, { passive: true, capture }),
+    useEventListener(window2, "pointerdown", (e) => {
+      const el = unrefElement(target);
+      shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
+    }, { passive: true }),
+    detectIframe && useEventListener(window2, "blur", (event) => {
+      setTimeout(() => {
+        var _a;
+        const el = unrefElement(target);
+        if (((_a = window2.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window2.document.activeElement)))
+          handler(event);
+      }, 0);
+    })
+  ].filter(Boolean);
+  const stop = () => cleanup.forEach((fn) => fn());
+  return stop;
+}
+function useMounted() {
+  const isMounted = ref8(false);
+  if (getCurrentInstance2()) {
+    onMounted3(() => {
+      isMounted.value = true;
+    });
+  }
+  return isMounted;
+}
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return computed5(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+function useMutationObserver(target, callback, options = {}) {
+  const { window: window2 = defaultWindow, ...mutationOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window2 && "MutationObserver" in window2);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch3(
+    () => unrefElement(target),
+    (el) => {
+      cleanup();
+      if (isSupported.value && window2 && el) {
+        observer = new MutationObserver(callback);
+        observer.observe(el, mutationOptions);
+      }
+    },
+    { immediate: true }
+  );
+  const takeRecords = () => {
+    return observer == null ? void 0 : observer.takeRecords();
+  };
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop,
+    takeRecords
+  };
+}
+function useResizeObserver(target, callback, options = {}) {
+  const { window: window2 = defaultWindow, ...observerOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const targets = computed5(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
+  const stopWatch = watch3(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window2) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els)
+          _el && observer.observe(_el, observerOptions);
+      }
+    },
+    { immediate: true, flush: "post", deep: true }
+  );
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true
+  } = options;
+  const height = ref8(0);
+  const bottom = ref8(0);
+  const left = ref8(0);
+  const right = ref8(0);
+  const top = ref8(0);
+  const width = ref8(0);
+  const x = ref8(0);
+  const y = ref8(0);
+  function update() {
+    const el = unrefElement(target);
+    if (!el) {
+      if (reset) {
+        height.value = 0;
+        bottom.value = 0;
+        left.value = 0;
+        right.value = 0;
+        top.value = 0;
+        width.value = 0;
+        x.value = 0;
+        y.value = 0;
+      }
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    height.value = rect.height;
+    bottom.value = rect.bottom;
+    left.value = rect.left;
+    right.value = rect.right;
+    top.value = rect.top;
+    width.value = rect.width;
+    x.value = rect.x;
+    y.value = rect.y;
+  }
+  useResizeObserver(target, update);
+  watch3(() => unrefElement(target), (ele) => !ele && update());
+  useMutationObserver(target, update, {
+    attributeFilter: ["style", "class"]
+  });
+  if (windowScroll)
+    useEventListener("scroll", update, { capture: true, passive: true });
+  if (windowResize)
+    useEventListener("resize", update, { passive: true });
+  tryOnMounted(() => {
+    if (immediate)
+      update();
+  });
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update
+  };
+}
+var DEFAULT_UNITS = [
+  { max: 6e4, value: 1e3, name: "second" },
+  { max: 276e4, value: 6e4, name: "minute" },
+  { max: 72e6, value: 36e5, name: "hour" },
+  { max: 5184e5, value: 864e5, name: "day" },
+  { max: 24192e5, value: 6048e5, name: "week" },
+  { max: 28512e6, value: 2592e6, name: "month" },
+  { max: Number.POSITIVE_INFINITY, value: 31536e6, name: "year" }
+];
+
+// src/hooks/use-mask.ts
+function useMask(target, nodes) {
+  const eventBus = useEventBus();
+  const startX = ref9(0);
+  const startY = ref9(0);
+  const lastX = ref9(0);
+  const lastY = ref9(0);
+  const history = useOperateHistory(nodes);
+  const hasEmit = ref9(false);
+  const style = computed6(() => {
+    const width = lastX.value - startX.value;
+    const height = lastY.value - startY.value;
+    return {
+      visibility: selecting.value ? "visible" : "hidden",
+      border: "2px solid rgb(0,120,215)",
+      background: "rgb(0,120,215,0.3)",
+      position: "absolute",
+      top: startY.value + (height < 0 ? height : 0) + "px",
+      left: startX.value + (width < 0 ? width : 0) + "px",
+      width: Math.abs(width) + "px",
+      height: Math.abs(height) + "px"
+    };
+  });
+  const selecting = ref9(false);
+  const rect = useElementBounding(target);
+  const ownerDoc = computed6(() => unrefElement(target)?.ownerDocument);
+  function checkNode() {
+    nodes.value.forEach((node) => {
+      const rect2 = node.node._rect;
+      if (rect2.x == void 0 || // eslint-disable-next-line eqeqeq
+      rect2.y == void 0 || // eslint-disable-next-line eqeqeq
+      rect2.width == void 0 || // eslint-disable-next-line eqeqeq
+      rect2.height == void 0)
+        return false;
+      const x1 = rect2.x;
+      const y1 = rect2.y;
+      const x2 = x1 + rect2.width;
+      const y2 = y1 + rect2.height;
+      node.node.selected = inArea(x1, y1, x2, y2);
+    });
+  }
+  function inArea(x1, y1, x2, y2) {
+    const areaStartX = Math.min(startX.value, lastX.value);
+    const areaStartY = Math.min(startY.value, lastY.value);
+    const areaEndX = Math.max(startX.value, lastX.value);
+    const areaEndY = Math.max(startY.value, lastY.value);
+    const crossX = isCrossing(areaStartX, areaEndX, x1, x2, Math.abs(x1 - x2) / 5);
+    const crossY = isCrossing(areaStartY, areaEndY, y1, y2, Math.abs(y1 - y2) / 5);
+    return crossX && crossY;
+  }
+  function isCrossing(a, b, c, d, standard) {
+    return Math.max(a, c) - Math.min(b, d) <= -standard;
+  }
+  function offsetFormat(evt) {
+    const offsetX = evt.clientX - rect.x.value;
+    const offsetY = evt.clientY - rect.y.value;
+    return {
+      x: offsetX,
+      y: offsetY
+    };
+  }
+  function handleMousedown(evt) {
+    addUserSelectStyle(ownerDoc.value);
+    const { x: offsetX, y: offsetY } = offsetFormat(evt);
+    selecting.value = true;
+    startX.value = offsetX;
+    startY.value = offsetY;
+    lastX.value = offsetX;
+    lastY.value = offsetY;
+    document.addEventListener("mouseup", handleMouseup);
+  }
+  function handleMousemove(evt) {
+    if (!selecting.value)
+      return;
+    if (!hasEmit.value) {
+      eventBus.emit("batch-select", "start");
+      hasEmit.value = true;
+    }
+    const { x: offsetX, y: offsetY } = offsetFormat(evt);
+    if (lastX.value === offsetX && lastY.value === offsetY)
+      return;
+    lastX.value = offsetX;
+    lastY.value = offsetY;
+    handleBatchSelect();
+  }
+  function handleMouseup() {
+    removeUserSelectStyle(ownerDoc.value);
+    selecting.value = false;
+    hasEmit.value = false;
+    if (lastX.value === startX.value && lastY.value === startY.value) {
+    } else {
+      history.push({ type: "batch-select" });
+      document.removeEventListener("mouseup", handleMouseup);
+    }
+    lastX.value = 0;
+    lastY.value = 0;
+    startX.value = 0;
+    startY.value = 0;
+    setTimeout(() => {
+      eventBus.emit("batch-select", "end");
+    });
+  }
+  function renderMask() {
+    return h4("div", {
+      id: "mask",
+      style: style.value
+    });
+  }
+  async function handleBatchSelect() {
+    checkNode();
+  }
+  return {
+    selecting,
+    renderMask,
+    handleMousedown,
+    handleMousemove
+  };
+}
+
+// src/hooks/use-operate-history.ts
+import { computed as computed7, ref as ref10 } from "vue-demi";
+var records = ref10([]);
+var state = ref10({
+  canClear: false
+});
+function useOperateHistory(nodes) {
+  const lastOperate = computed7(() => records.value.slice(-1)[0]?.type);
+  function push(operate) {
+    records.value.push({
+      ...operate,
+      data: nodes
+    });
+  }
+  return {
+    state,
+    records,
+    lastOperate,
+    push
+  };
+}
+
 // src/components/freeDom.ts
-import { computed as computed7, defineComponent as defineComponent4, onMounted as onMounted2, reactive as reactive2, ref as ref8 } from "vue-demi";
+import { computed as computed10, defineComponent as defineComponent5, isVue2 as isVue25, onMounted as onMounted4, reactive as reactive4, ref as ref12 } from "vue-demi";
 
 // src/components/freeDomCore.ts
-import { computed as computed5, defineComponent as defineComponent2, isVue2 as isVue22, onUnmounted as onUnmounted2, ref as ref7 } from "vue-demi";
-function noop() {
+import { computed as computed8, defineComponent as defineComponent3, isVue2 as isVue24, onUnmounted as onUnmounted3, ref as ref11 } from "vue-demi";
+function noop2() {
 }
 var freeDomCoreProps = {
   userSelectHack: {
@@ -821,15 +1324,15 @@ var freeDomCoreProps = {
   },
   startFn: {
     type: Function,
-    default: noop
+    default: noop2
   },
   stopFn: {
     type: Function,
-    default: noop
+    default: noop2
   },
   dragFn: {
     type: Function,
-    default: noop
+    default: noop2
   },
   disabled: Boolean,
   scale: {
@@ -837,23 +1340,24 @@ var freeDomCoreProps = {
     default: 1
   }
 };
-var freeDomCore = defineComponent2({
+var freeDomCore = defineComponent3({
   name: "FreeDomCore",
   props: freeDomCoreProps,
   setup(props) {
-    const { only } = useDefaultSlot();
-    const dragging = ref7(false);
-    const coreRef = ref7();
-    const node = computed5(() => coreRef.value?.$el || coreRef.value);
-    const ownerDoc = computed5(() => node.value?.ownerDocument);
+    const dragging = ref11(false);
+    const coreRef = ref11();
+    const node = computed8(() => coreRef.value?.$el || coreRef.value);
+    const ownerDoc = computed8(() => node.value?.ownerDocument);
     const { lastX, lastY, create } = useCoreData(node);
+    const startX = ref11(NaN);
+    const startY = ref11(NaN);
     let parentNode;
     let parentRect;
-    onUnmounted2(() => {
+    onUnmounted3(() => {
       if (!ownerDoc.value)
         return;
       if (props.userSelectHack)
-        _removeUserSelectStyle(ownerDoc.value);
+        removeUserSelectStyle(ownerDoc.value);
       ownerDoc.value.removeEventListener("mousemove", _handleDrag);
       ownerDoc.value.removeEventListener("mouseup", _handleDragStop);
     });
@@ -863,51 +1367,33 @@ var freeDomCore = defineComponent2({
     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);
+      startX.value = x;
+      startY.value = y;
       lastX.value = x;
       lastY.value = y;
       dragging.value = true;
       if (props.userSelectHack)
-        _addUserSelectStyle(ownerDoc.value);
+        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 (startX.value === lastX.value && startY.value === lastY.value) {
+      } else {
+        const { x, y } = _offsetFormat(evt);
+        const coreEvent = create(x, y);
+        props.stopFn(evt, coreEvent);
+      }
       if (props.userSelectHack)
-        _removeUserSelectStyle(ownerDoc.value);
+        removeUserSelectStyle(ownerDoc.value);
       dragging.value = false;
       lastX.value = NaN;
       lastY.value = NaN;
@@ -933,13 +1419,13 @@ var freeDomCore = defineComponent2({
       return { x, y };
     }
     return {
-      only,
       coreRef,
       mousedownFn,
       mouseupFn
     };
   },
   render() {
+    const { only } = useDefaultSlot();
     const vue2Props = {
       on: {
         mousedown: (evt) => {
@@ -958,12 +1444,12 @@ var freeDomCore = defineComponent2({
     };
     const res = createRender(
       // @ts-expect-error: maybe vue2
-      this.only,
+      only,
       { ref: (el) => {
         this.coreRef = el;
       } },
-      isVue22 ? {} : vue3Props,
-      isVue22 ? vue2Props.on : {}
+      isVue24 ? {} : vue3Props,
+      isVue24 ? vue2Props.on : {}
     );
     if (typeof res === "function") {
       return res();
@@ -975,9 +1461,9 @@ var freeDomCore = defineComponent2({
 var freeDomCore_default = freeDomCore;
 
 // src/components/resizeDomCore.ts
-import { computed as computed6, defineComponent as defineComponent3, h as h3, shallowRef as shallowRef3 } from "vue-demi";
+import { computed as computed9, defineComponent as defineComponent4, h as h5, shallowRef as shallowRef5 } from "vue-demi";
 var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
-function noop2() {
+function noop3() {
 }
 var resizeDomCoreProps = {
   dragOpts: {
@@ -998,15 +1484,15 @@ var resizeDomCoreProps = {
   },
   startFn: {
     type: Function,
-    default: noop2
+    default: noop3
   },
   stopFn: {
     type: Function,
-    default: noop2
+    default: noop3
   },
   resizeFn: {
     type: Function,
-    default: noop2
+    default: noop3
   },
   minWidth: {
     type: Number,
@@ -1018,16 +1504,15 @@ var resizeDomCoreProps = {
   },
   lockAspectRatio: Boolean
 };
-var resizeDomCore = defineComponent3({
+var resizeDomCore = defineComponent4({
   name: "ResizeDomCore",
   props: resizeDomCoreProps,
   setup(props, { slots }) {
-    const { slots: _slots } = useDefaultSlot();
-    const dots = computed6(() => {
+    const dots = computed9(() => {
       const _dots = props.scale;
       return Array.isArray(_dots) ? _dots : Dots;
     });
-    const lastRect = shallowRef3();
+    const lastRect = shallowRef5();
     function runConstraints(width, height) {
       const { lockAspectRatio } = props;
       if (!props.minHeight && !props.minWidth && !lockAspectRatio)
@@ -1076,7 +1561,8 @@ var resizeDomCore = defineComponent3({
     }
     function renderResizehandler(axis) {
       if (!slots.handler) {
-        return () => h3("i", {
+        return () => h5("i", {
+          dataType: "handler",
           class: [
             "vv-resize-dom--handler",
             `vv-resize-dom--handler__${axis}`
@@ -1087,14 +1573,14 @@ var resizeDomCore = defineComponent3({
     }
     return {
       dots,
-      children: _slots,
       handleResize,
       renderResizehandler
     };
   },
   render() {
+    const { slots: children } = useDefaultSlot();
     const slots = [
-      ...this.children || [],
+      ...children || [],
       this.dots.map((dot) => {
         return createRender(
           freeDomCore_default,
@@ -1117,13 +1603,14 @@ var resizeDomCore = defineComponent3({
 var resizeDomCore_default = resizeDomCore;
 
 // src/components/freeDom.ts
-function noop3() {
+function noop4() {
 }
 var freeDomProps = {
   modelValue: {
     type: Object,
     default: () => ({})
   },
+  keyboard: Boolean,
   x: {
     type: Number,
     default: 0
@@ -1147,27 +1634,27 @@ var freeDomProps = {
   lockAspectRatio: Boolean,
   dragStartFn: {
     type: Function,
-    default: noop3
+    default: noop4
   },
   dragStopFn: {
     type: Function,
-    default: noop3
+    default: noop4
   },
   dragFn: {
     type: Function,
-    default: noop3
+    default: noop4
   },
   resizeStartFn: {
     type: Function,
-    default: noop3
+    default: noop4
   },
   resizeFn: {
     type: Function,
-    default: noop3
+    default: noop4
   },
   resizeStopFn: {
     type: Function,
-    default: noop3
+    default: noop4
   },
   autoSize: {
     type: Boolean,
@@ -1184,7 +1671,7 @@ var freeDomProps = {
   },
   fixNonMonospaced: Boolean
 };
-var freeDom = defineComponent4({
+var freeDom = defineComponent5({
   name: "FreeDom",
   props: freeDomProps,
   emits: [
@@ -1195,7 +1682,12 @@ var freeDom = defineComponent4({
     "update:modelValue"
   ],
   setup(props, { emit, expose, slots }) {
-    const domRef = ref8();
+    const domRef = ref12();
+    const isBatchSelecting = ref12(false);
+    const eventBus = useEventBus();
+    eventBus.on("batch-select", (state2) => {
+      isBatchSelecting.value = state2 === "start";
+    });
     const {
       x,
       y,
@@ -1207,8 +1699,10 @@ var freeDom = defineComponent4({
       handleDragStop
     } = useDraggableData(props);
     const { width, height, syncSize: _syncSize } = useResizableData(props, domRef);
+    const selected = ref12(false);
     const context = {
-      _rect: reactive2({
+      selected,
+      _rect: reactive4({
         x,
         y,
         width,
@@ -1220,7 +1714,12 @@ var freeDom = defineComponent4({
         emit("update:modelValue", pos);
       }
     };
-    const sceneContext = useSceneContext(context, props);
+    const sceneContext = useSceneContext(context, reactive4(props));
+    onClickOutside(domRef, () => {
+      if (!selected.value || isBatchSelecting.value)
+        return;
+      selected.value = false;
+    }, { ignore: [sceneContext.clearSelectState && ".vv-free-dom--draggable"] });
     const syncSize = () => {
       _syncSize(
         sceneContext.fixNonMonospaced.value,
@@ -1228,13 +1727,13 @@ var freeDom = defineComponent4({
         sceneContext.minHeight.value
       );
     };
-    const canDrag = ref8(false);
-    onMounted2(() => {
+    const canDrag = ref12(false);
+    onMounted4(() => {
       props.autoSize && syncSize();
       const pos = sceneContext.correct(context._rect);
       context.trigger({ x: pos.x, y: pos.y, w: pos.width, h: pos.height });
     });
-    const style = computed7(() => ({
+    const style = computed10(() => ({
       width: `${width.value}px`,
       height: `${height.value}px`,
       transform: `translate(${x.value}px, ${y.value}px)`
@@ -1253,7 +1752,7 @@ var freeDom = defineComponent4({
       if (!isValid)
         return;
       handleDrag(evt, data);
-      sceneContext.emit("move");
+      sceneContext.emit("move", evt.shiftKey);
     };
     const onDragStop = (evt, coreData) => {
       if (!canDrag.value)
@@ -1274,6 +1773,7 @@ var freeDom = defineComponent4({
       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 });
+      sceneContext.history?.push({ type: "move-end" });
     };
     const onDragStart = (evt, coreData) => {
       const handle = sceneContext.handle.value;
@@ -1291,9 +1791,9 @@ var freeDom = defineComponent4({
       }
       canDrag.value && handleDragStart(evt, coreData);
     };
-    const onResize = (evt, { node, width: w, height: h5, handle: axis }) => {
+    const onResize = (evt, { node, width: w, height: h7, handle: axis }) => {
       const offsetW = -(w - width.value);
-      const offsetH = -(h5 - height.value);
+      const offsetH = -(h7 - height.value);
       const axisH = axis[0];
       const axisV = axis[axis.length - 1];
       let _x = x.value;
@@ -1304,14 +1804,14 @@ var freeDom = defineComponent4({
       if (axisV === "t") {
         _y += offsetH;
       }
-      const isValid = sceneContext.check?.({ x: _x, y: _y, width: w, height: h5 });
+      const isValid = sceneContext.check?.({ x: _x, y: _y, width: w, height: h7 });
       if (!isValid)
         return;
       width.value = w;
-      height.value = h5;
+      height.value = h7;
       x.value = _x;
       y.value = _y;
-      props.resizeFn(evt, { node, width: w, height: h5, handle: axis });
+      props.resizeFn(evt, { node, width: w, height: h7, handle: axis });
       sceneContext?.emit("move");
     };
     const onResizeStop = (evt, data) => {
@@ -1325,6 +1825,7 @@ var freeDom = defineComponent4({
       emit("update:height", height.value);
       emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
       sceneContext.emit("moveup");
+      sceneContext.history?.push({ type: "resize-end" });
     };
     const onResizeStart = (evt, data) => {
       props.resizeStartFn(evt, data);
@@ -1347,17 +1848,65 @@ var freeDom = defineComponent4({
       };
       return createRender(resizeDomCore_default, {}, props2)(slots);
     };
+    function handleSelect(evt) {
+      if (evt.ctrlKey) {
+        selected.value = !selected.value;
+        sceneContext.history?.push({ type: "select" });
+      } else if (!selected.value) {
+        sceneContext.clearSelectState?.();
+        selected.value = true;
+        sceneContext.history?.push({ type: "select" });
+      }
+    }
+    function handleKeyboard(evt) {
+      if (!canDrag.value || !sceneContext.keyboard.value)
+        return;
+      evt.preventDefault();
+      switch (evt.key) {
+        case "ArrowUp":
+          y.value -= 1;
+          break;
+        case "ArrowDown":
+          y.value += 1;
+          break;
+        case "ArrowLeft":
+          x.value -= 1;
+          break;
+        case "ArrowRight":
+          x.value += 1;
+          break;
+      }
+      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);
+      }
+      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 });
+      sceneContext.emit("move", true);
+    }
     expose?.({
       syncSize
     });
     return {
+      selected,
       domRef,
       style,
       onDragStop,
       onDrag,
       onDragStart,
       resizeNode,
-      disabled: sceneContext.disabledDrag
+      handleKeyboard,
+      handleSelect,
+      disabled: sceneContext.disabledDrag,
+      scale: sceneContext.transformScale
     };
   },
   render() {
@@ -1365,17 +1914,36 @@ var freeDom = defineComponent4({
       startFn: this.onDragStart,
       stopFn: this.onDragStop,
       dragFn: this.onDrag,
-      disabled: this.disabled
+      disabled: this.disabled,
+      scale: this.scale,
+      keyboard: this.keyboard
+    };
+    const vue2Listener = {
+      on: {
+        click: this.handleSelect,
+        keydown: this.handleKeyboard
+      }
+    };
+    const vue3Props = {
+      ...props,
+      onClick: this.handleSelect,
+      onKeydown: this.handleKeyboard
     };
     const slots = () => this.resizeNode();
     return createRender(
       freeDomCore_default,
       {
         ref: "domRef",
-        class: ["vv-free-dom--draggable", this.disabled && "vv-free-dom--draggable__disabled"],
+        tabindex: -1,
+        class: [
+          "vv-free-dom--draggable",
+          this.disabled && "vv-free-dom--draggable__disabled",
+          this.selected && "vv-free-dom--draggable__selected"
+        ],
         style: this.style
       },
-      props
+      isVue25 ? props : vue3Props,
+      isVue25 ? vue2Listener.on : {}
     )?.(slots);
   }
 });
@@ -1403,6 +1971,7 @@ var freeDomWrapProps = {
     type: Number,
     default: 1
   },
+  keyboard: Boolean,
   handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
@@ -1412,32 +1981,47 @@ var freeDomWrapProps = {
   scale: freeDomProps.scale,
   fixNonMonospaced: freeDomProps.fixNonMonospaced
 };
-var FreeDomWrap = defineComponent5({
+var FreeDomWrap = defineComponent6({
   name: "FreeDomWrap",
   props: freeDomWrapProps,
   setup(props) {
-    const { slots } = useDefaultSlot();
     const eventBus = useEventBus();
-    const rectRef = shallowRef4();
-    const nodes = ref9([]);
-    const width = ref9(props.width);
-    const height = ref9(props.height);
-    watchEffect4(() => {
+    const rectRef = shallowRef6();
+    const nodes = ref13([]);
+    const history = useOperateHistory(nodes);
+    const width = ref13(props.width);
+    const height = ref13(props.height);
+    const selectedNodes = computed11(() => nodes.value.filter((node) => node.node.selected));
+    eventBus.on("move", (nodeId) => {
+      const mainNode = selectedNodes.value.find((node) => node.uuid === nodeId);
+      if (!mainNode)
+        return;
+      const { deltaX, deltaY } = mainNode.node._rect;
+      selectedNodes.value.forEach((node) => {
+        if (node.uuid === nodeId)
+          return;
+        node.node._rect.x += deltaX || 0;
+        node.node._rect.y += deltaY || 0;
+      });
+    });
+    const selecting = ref13(false);
+    const mask = useMask(rectRef, nodes);
+    watchEffect6(() => {
       width.value = props.width;
     });
-    watchEffect4(() => {
+    watchEffect6(() => {
       height.value = props.height;
     });
-    onMounted3(() => {
+    onMounted5(() => {
       if (!props.width || !props.height) {
         if (!rectRef.value)
           console.warn("[free-dom] cannot find element, width or height may be set to 0");
-        const h5 = rectRef.value?.clientHeight;
+        const h7 = rectRef.value?.clientHeight;
         const w = rectRef.value?.clientWidth;
         if (!props.width)
           width.value = w || 0;
         if (!props.height)
-          height.value = h5 || 0;
+          height.value = h7 || 0;
       }
       nodes.value.forEach((pos) => {
         const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
@@ -1449,23 +2033,26 @@ var FreeDomWrap = defineComponent5({
       });
     });
     function register(uuid, node) {
-      nodes.value.push({ uuid, node });
+      nodes.value.push({
+        uuid,
+        node
+      });
     }
     function remove(uuid) {
       const index = nodes.value.findIndex((item) => item.uuid === uuid);
       nodes.value.splice(index, 1);
     }
     function checkValid(pos) {
-      const { x, y, width: w, height: h5 } = pos;
+      const { x, y, width: w, height: h7 } = pos;
       return x >= 0 && // @ts-expect-error: trigger after mounted
       x + w <= width.value && y >= 0 && // @ts-expect-error: trigger after mounted
-      y + h5 <= height.value;
+      y + h7 <= height.value;
     }
     function correct(pos) {
       let x = Math.max(pos.x, 0);
       let y = Math.max(pos.y, 0);
       let w = pos.width;
-      let h5 = pos.height;
+      let h7 = pos.height;
       if (pos.x + pos.width > width.value) {
         x = width.value - pos.width;
         if (x < 0) {
@@ -1476,7 +2063,7 @@ var FreeDomWrap = defineComponent5({
       if (pos.y + pos.height > height.value) {
         y = height.value - pos.height;
         if (y < 0) {
-          h5 = height.value;
+          h7 = height.value;
           y = 0;
         }
       }
@@ -1484,16 +2071,23 @@ var FreeDomWrap = defineComponent5({
         x,
         y,
         width: w,
-        height: h5
+        height: h7
       };
     }
-    provide(
+    function clearSelectState() {
+      selectedNodes.value.forEach((node) => {
+        node.node.selected = false;
+      });
+    }
+    provide2(
       SceneToken,
-      reactive3({
-        ...toRefs(props),
+      reactive5({
+        ...toRefs2(props),
         nodes,
         width,
         height,
+        history,
+        clearSelectState,
         register,
         remove,
         checkValid,
@@ -1503,41 +2097,52 @@ var FreeDomWrap = defineComponent5({
         emit: eventBus.emit
       })
     );
-    const style = computed8(() => ({
+    const style = computed11(() => ({
       width: `${props.width}px`,
       height: `${props.height}px`
     }));
     return {
       rectRef,
       style,
-      slots
+      selecting,
+      mask,
+      history
     };
   },
   render() {
+    const { slots } = useDefaultSlot();
     const marklineComp = createRender(markLine_default, {}, { showLine: this.showLine })();
-    const slots = [this.slots, marklineComp];
+    const slotList = [
+      this.mask.selecting && this.mask.renderMask(),
+      slots,
+      marklineComp
+    ];
     return createRender(
       "section",
       {
         ref: "rectRef",
         class: "vv-free-dom--scene",
         style: this.style
+      },
+      {
+        onMousedown: this.mask.handleMousedown,
+        onMousemove: this.mask.handleMousemove
       }
-    )(slots);
+    )(slotList);
   }
 });
 
 // src/components/gridLayout.ts
-import { defineComponent as defineComponent7, h as h4, provide as provide2, ref as ref10 } from "vue-demi";
+import { defineComponent as defineComponent8, h as h6, provide as provide3, ref as ref14 } from "vue-demi";
 
 // src/components/gridItem.ts
-import { defineComponent as defineComponent6, inject as inject3 } from "vue-demi";
+import { defineComponent as defineComponent7, inject as inject5 } from "vue-demi";
 
 // src/components/tokens.ts
 var gridLayoutContextKey = Symbol("gridLayoutContext");
 
 // src/components/gridItem.ts
-var noop4 = () => {
+var noop5 = () => {
 };
 var gridItemProps = {
   x: {
@@ -1558,27 +2163,27 @@ var gridItemProps = {
   },
   dragStartFn: {
     type: Function,
-    default: noop4
+    default: noop5
   },
   dragFn: {
     type: Function,
-    default: noop4
+    default: noop5
   },
   dragEndFn: {
     type: Function,
-    default: noop4
+    default: noop5
   },
   resizeStartFn: {
     type: Function,
-    default: noop4
+    default: noop5
   },
   resizeFn: {
     type: Function,
-    default: noop4
+    default: noop5
   },
   resizeStopFn: {
     type: Function,
-    default: noop4
+    default: noop5
   },
   isDraggable: Boolean,
   isResizable: Boolean,
@@ -1588,12 +2193,12 @@ var gridItemProps = {
   }
 };
 var gridItemEmits = ["dragMove"];
-var GridItem = defineComponent6({
+var GridItem = defineComponent7({
   name: "GridItem",
   props: gridItemProps,
   emits: gridItemEmits,
   setup(props) {
-    const layout = inject3(gridLayoutContextKey);
+    const layout = inject5(gridLayoutContextKey);
     if (!layout) {
       throw new Error("TODO");
     }
@@ -1613,7 +2218,6 @@ var GridItem = defineComponent6({
       onResize,
       onResizeStop
     } = useLayoutItem(props, layout);
-    const { only, slots } = useDefaultSlot();
     const resizeNode = (child) => {
       const _props = {
         width: width.value,
@@ -1652,8 +2256,6 @@ var GridItem = defineComponent6({
       y,
       width,
       height,
-      child: only,
-      slots,
       style,
       dragging,
       onDragStart,
@@ -1666,7 +2268,8 @@ var GridItem = defineComponent6({
     };
   },
   render() {
-    const node = this.slots;
+    const { slots } = useDefaultSlot();
+    const node = slots;
     return this.dragNode(node);
   }
 });
@@ -1718,15 +2321,15 @@ var gridLayoutProps = {
   disabledResize: Boolean,
   collision: Boolean
 };
-var GridLayout = defineComponent7({
+var GridLayout = defineComponent8({
   name: "GridLayout",
   inheritAttrs: false,
   props: gridLayoutProps,
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const layout = useLayout(props);
-    provide2(gridLayoutContextKey, layout);
-    const activeDrag = ref10(null);
+    provide3(gridLayoutContextKey, layout);
+    const activeDrag = ref14(null);
     function processItem(node) {
       const key = node.key;
       if (!key)
@@ -1773,12 +2376,12 @@ var GridLayout = defineComponent7({
             height: config.h
           };
           activeDrag.value = placeholder2;
-          const { w, h: h5 } = data;
-          layout.resizeTo(config, w, h5);
+          const { w, h: h7 } = data;
+          layout.resizeTo(config, w, h7);
         },
         resizeStopFn: (evt, data) => {
-          const { w, h: h5 } = data;
-          layout.resizeTo(config, w, h5);
+          const { w, h: h7 } = data;
+          layout.resizeTo(config, w, h7);
           activeDrag.value = null;
         }
       };
@@ -1811,7 +2414,7 @@ var GridLayout = defineComponent7({
       height: this.layout.calContainerHeight()
     };
     const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default || [];
-    return h4("div", {
+    return h6("div", {
       class: "vv-grid-layout",
       style: mergedStyle
     }, [