@sepveneto/free-dom 0.10.0 → 0.11.0

package/dist/index.js

@@ -29,7 +29,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/freeDomWrap.ts
-var import_vue_demi14 = require("vue-demi");
+var import_vue_demi18 = require("vue-demi");
 
 // src/util/tokens.ts
 var SceneToken = Symbol("Scene");
@@ -75,6 +75,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
 var import_vue_demi2 = require("vue-demi");
@@ -88,6 +111,7 @@ var markLine_default = (0, import_vue_demi2.defineComponent)({
     const lines = (0, import_vue_demi2.shallowRef)(lineType);
     const diff = (0, import_vue_demi2.computed)(() => SceneContext.diff / SceneContext.transformScale);
     const nodes = SceneContext.nodes;
+    const staticNodes = (0, import_vue_demi2.computed)(() => nodes.filter((node) => !node.node.selected));
     const lineStatus = (0, import_vue_demi2.reactive)({
       xt: {
         show: false,
@@ -114,78 +138,80 @@ var markLine_default = (0, import_vue_demi2.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
@@ -222,8 +248,9 @@ var markLine_default = (0, import_vue_demi2.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,
@@ -250,10 +277,8 @@ var import_vue_demi3 = require("vue-demi");
 var import_vue_demi4 = require("vue-demi");
 function useDefaultSlot() {
   const slots = (0, import_vue_demi4.useSlots)();
-  const slotList = (0, import_vue_demi4.computed)(() => {
-    return typeof slots.default === "function" ? slots.default() : slots.default;
-  });
-  const only = (0, import_vue_demi4.computed)(() => slotList.value?.[0]);
+  const slotList = typeof slots.default === "function" ? slots.default() : slots.default;
+  const only = slotList?.[0];
   return {
     slots: slotList,
     only
@@ -368,6 +393,7 @@ function useSceneContext(context, props) {
   const fixNonMonospaced = (0, import_vue_demi7.computed)(() => {
     return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
   });
+  const keyboard = (0, import_vue_demi7.computed)(() => SceneContext?.keyboard || props.keyboard);
   (0, import_vue_demi7.onMounted)(() => {
     SceneContext?.register(uuid, context);
   });
@@ -385,11 +411,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,
@@ -398,14 +428,15 @@ function useSceneContext(context, props) {
     disabledDrag,
     disabledResize,
     fixNonMonospaced,
-    transformScale
+    transformScale,
+    keyboard
   };
 }
 
 // src/hooks/use-event-bus.ts
 var import_vue_demi8 = require("vue-demi");
+var callbacks = (0, import_vue_demi8.ref)({});
 function useEventBus() {
-  const callbacks = (0, import_vue_demi8.ref)({});
   const on = (name, cb) => {
     if (!callbacks.value[name]) {
       callbacks.value[name] = [cb];
@@ -416,9 +447,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,
@@ -452,9 +483,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,
@@ -576,10 +607,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;
@@ -598,7 +629,7 @@ function useLayout(props) {
     }
     if (!hasCollisions) {
       item.w = w;
-      item.h = h5;
+      item.h = h7;
     }
     layout.value = _normalize([...layout.value]);
   }
@@ -794,15 +825,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]));
@@ -813,10 +844,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,
@@ -837,12 +868,474 @@ function useLayoutItem(props, layout) {
   };
 }
 
-// src/components/freeDom.ts
+// src/hooks/use-mask.ts
 var import_vue_demi13 = require("vue-demi");
 
-// src/components/freeDomCore.ts
+// ../../node_modules/.pnpm/@vueuse+shared@10.7.1_vue@3.4.6/node_modules/@vueuse/shared/index.mjs
 var import_vue_demi11 = require("vue-demi");
-function noop() {
+function tryOnScopeDispose(fn) {
+  if ((0, import_vue_demi11.getCurrentScope)()) {
+    (0, import_vue_demi11.onScopeDispose)(fn);
+    return true;
+  }
+  return false;
+}
+function toValue(r) {
+  return typeof r === "function" ? r() : (0, import_vue_demi11.unref)(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 || (0, import_vue_demi11.getCurrentInstance)();
+}
+function tryOnMounted(fn, sync = true, target) {
+  const instance = getLifeCycleTarget();
+  if (instance)
+    (0, import_vue_demi11.onMounted)(fn, target);
+  else if (sync)
+    fn();
+  else
+    (0, import_vue_demi11.nextTick)(fn);
+}
+
+// ../../node_modules/.pnpm/@vueuse+core@10.7.1_vue@3.4.6/node_modules/@vueuse/core/index.mjs
+var import_vue_demi12 = require("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 = (0, import_vue_demi12.watch)(
+    () => [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 = (0, import_vue_demi12.ref)(false);
+  if ((0, import_vue_demi12.getCurrentInstance)()) {
+    (0, import_vue_demi12.onMounted)(() => {
+      isMounted.value = true;
+    });
+  }
+  return isMounted;
+}
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return (0, import_vue_demi12.computed)(() => {
+    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 = (0, import_vue_demi12.watch)(
+    () => 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 = (0, import_vue_demi12.computed)(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
+  const stopWatch = (0, import_vue_demi12.watch)(
+    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 = (0, import_vue_demi12.ref)(0);
+  const bottom = (0, import_vue_demi12.ref)(0);
+  const left = (0, import_vue_demi12.ref)(0);
+  const right = (0, import_vue_demi12.ref)(0);
+  const top = (0, import_vue_demi12.ref)(0);
+  const width = (0, import_vue_demi12.ref)(0);
+  const x = (0, import_vue_demi12.ref)(0);
+  const y = (0, import_vue_demi12.ref)(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);
+  (0, import_vue_demi12.watch)(() => 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 = (0, import_vue_demi13.ref)(0);
+  const startY = (0, import_vue_demi13.ref)(0);
+  const lastX = (0, import_vue_demi13.ref)(0);
+  const lastY = (0, import_vue_demi13.ref)(0);
+  const history = useOperateHistory(nodes);
+  const hasEmit = (0, import_vue_demi13.ref)(false);
+  const style = (0, import_vue_demi13.computed)(() => {
+    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 = (0, import_vue_demi13.ref)(false);
+  const rect = useElementBounding(target);
+  const ownerDoc = (0, import_vue_demi13.computed)(() => 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 (0, import_vue_demi13.h)("div", {
+      id: "mask",
+      style: style.value
+    });
+  }
+  async function handleBatchSelect() {
+    checkNode();
+  }
+  return {
+    selecting,
+    renderMask,
+    handleMousedown,
+    handleMousemove
+  };
+}
+
+// src/hooks/use-operate-history.ts
+var import_vue_demi14 = require("vue-demi");
+var records = (0, import_vue_demi14.ref)([]);
+var state = (0, import_vue_demi14.ref)({
+  canClear: false
+});
+function useOperateHistory(nodes) {
+  const lastOperate = (0, import_vue_demi14.computed)(() => records.value.slice(-1)[0]?.type);
+  function push(operate) {
+    records.value.push({
+      ...operate,
+      data: nodes
+    });
+  }
+  return {
+    state,
+    records,
+    lastOperate,
+    push
+  };
+}
+
+// src/components/freeDom.ts
+var import_vue_demi17 = require("vue-demi");
+
+// src/components/freeDomCore.ts
+var import_vue_demi15 = require("vue-demi");
+function noop2() {
 }
 var freeDomCoreProps = {
   userSelectHack: {
@@ -851,15 +1344,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: {
@@ -867,23 +1360,24 @@ var freeDomCoreProps = {
     default: 1
   }
 };
-var freeDomCore = (0, import_vue_demi11.defineComponent)({
+var freeDomCore = (0, import_vue_demi15.defineComponent)({
   name: "FreeDomCore",
   props: freeDomCoreProps,
   setup(props) {
-    const { only } = useDefaultSlot();
-    const dragging = (0, import_vue_demi11.ref)(false);
-    const coreRef = (0, import_vue_demi11.ref)();
-    const node = (0, import_vue_demi11.computed)(() => coreRef.value?.$el || coreRef.value);
-    const ownerDoc = (0, import_vue_demi11.computed)(() => node.value?.ownerDocument);
+    const dragging = (0, import_vue_demi15.ref)(false);
+    const coreRef = (0, import_vue_demi15.ref)();
+    const node = (0, import_vue_demi15.computed)(() => coreRef.value?.$el || coreRef.value);
+    const ownerDoc = (0, import_vue_demi15.computed)(() => node.value?.ownerDocument);
     const { lastX, lastY, create } = useCoreData(node);
+    const startX = (0, import_vue_demi15.ref)(NaN);
+    const startY = (0, import_vue_demi15.ref)(NaN);
     let parentNode;
     let parentRect;
-    (0, import_vue_demi11.onUnmounted)(() => {
+    (0, import_vue_demi15.onUnmounted)(() => {
       if (!ownerDoc.value)
         return;
       if (props.userSelectHack)
-        _removeUserSelectStyle(ownerDoc.value);
+        removeUserSelectStyle(ownerDoc.value);
       ownerDoc.value.removeEventListener("mousemove", _handleDrag);
       ownerDoc.value.removeEventListener("mouseup", _handleDragStop);
     });
@@ -893,51 +1387,33 @@ var freeDomCore = (0, import_vue_demi11.defineComponent)({
     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;
@@ -963,13 +1439,13 @@ var freeDomCore = (0, import_vue_demi11.defineComponent)({
       return { x, y };
     }
     return {
-      only,
       coreRef,
       mousedownFn,
       mouseupFn
     };
   },
   render() {
+    const { only } = useDefaultSlot();
     const vue2Props = {
       on: {
         mousedown: (evt) => {
@@ -988,12 +1464,12 @@ var freeDomCore = (0, import_vue_demi11.defineComponent)({
     };
     const res = createRender(
       // @ts-expect-error: maybe vue2
-      this.only,
+      only,
       { ref: (el) => {
         this.coreRef = el;
       } },
-      import_vue_demi11.isVue2 ? {} : vue3Props,
-      import_vue_demi11.isVue2 ? vue2Props.on : {}
+      import_vue_demi15.isVue2 ? {} : vue3Props,
+      import_vue_demi15.isVue2 ? vue2Props.on : {}
     );
     if (typeof res === "function") {
       return res();
@@ -1005,9 +1481,9 @@ var freeDomCore = (0, import_vue_demi11.defineComponent)({
 var freeDomCore_default = freeDomCore;
 
 // src/components/resizeDomCore.ts
-var import_vue_demi12 = require("vue-demi");
+var import_vue_demi16 = require("vue-demi");
 var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
-function noop2() {
+function noop3() {
 }
 var resizeDomCoreProps = {
   dragOpts: {
@@ -1028,15 +1504,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,
@@ -1048,16 +1524,15 @@ var resizeDomCoreProps = {
   },
   lockAspectRatio: Boolean
 };
-var resizeDomCore = (0, import_vue_demi12.defineComponent)({
+var resizeDomCore = (0, import_vue_demi16.defineComponent)({
   name: "ResizeDomCore",
   props: resizeDomCoreProps,
   setup(props, { slots }) {
-    const { slots: _slots } = useDefaultSlot();
-    const dots = (0, import_vue_demi12.computed)(() => {
+    const dots = (0, import_vue_demi16.computed)(() => {
       const _dots = props.scale;
       return Array.isArray(_dots) ? _dots : Dots;
     });
-    const lastRect = (0, import_vue_demi12.shallowRef)();
+    const lastRect = (0, import_vue_demi16.shallowRef)();
     function runConstraints(width, height) {
       const { lockAspectRatio } = props;
       if (!props.minHeight && !props.minWidth && !lockAspectRatio)
@@ -1106,7 +1581,8 @@ var resizeDomCore = (0, import_vue_demi12.defineComponent)({
     }
     function renderResizehandler(axis) {
       if (!slots.handler) {
-        return () => (0, import_vue_demi12.h)("i", {
+        return () => (0, import_vue_demi16.h)("i", {
+          dataType: "handler",
           class: [
             "vv-resize-dom--handler",
             `vv-resize-dom--handler__${axis}`
@@ -1117,14 +1593,14 @@ var resizeDomCore = (0, import_vue_demi12.defineComponent)({
     }
     return {
       dots,
-      children: _slots,
       handleResize,
       renderResizehandler
     };
   },
   render() {
+    const { slots: children } = useDefaultSlot();
     const slots = [
-      ...this.children || [],
+      ...children || [],
       this.dots.map((dot) => {
         return createRender(
           freeDomCore_default,
@@ -1147,13 +1623,14 @@ var resizeDomCore = (0, import_vue_demi12.defineComponent)({
 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
@@ -1177,27 +1654,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,
@@ -1214,7 +1691,7 @@ var freeDomProps = {
   },
   fixNonMonospaced: Boolean
 };
-var freeDom = (0, import_vue_demi13.defineComponent)({
+var freeDom = (0, import_vue_demi17.defineComponent)({
   name: "FreeDom",
   props: freeDomProps,
   emits: [
@@ -1225,7 +1702,12 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
     "update:modelValue"
   ],
   setup(props, { emit, expose, slots }) {
-    const domRef = (0, import_vue_demi13.ref)();
+    const domRef = (0, import_vue_demi17.ref)();
+    const isBatchSelecting = (0, import_vue_demi17.ref)(false);
+    const eventBus = useEventBus();
+    eventBus.on("batch-select", (state2) => {
+      isBatchSelecting.value = state2 === "start";
+    });
     const {
       x,
       y,
@@ -1237,8 +1719,10 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       handleDragStop
     } = useDraggableData(props);
     const { width, height, syncSize: _syncSize } = useResizableData(props, domRef);
+    const selected = (0, import_vue_demi17.ref)(false);
     const context = {
-      _rect: (0, import_vue_demi13.reactive)({
+      selected,
+      _rect: (0, import_vue_demi17.reactive)({
         x,
         y,
         width,
@@ -1250,7 +1734,12 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
         emit("update:modelValue", pos);
       }
     };
-    const sceneContext = useSceneContext(context, props);
+    const sceneContext = useSceneContext(context, (0, import_vue_demi17.reactive)(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,
@@ -1258,13 +1747,13 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
         sceneContext.minHeight.value
       );
     };
-    const canDrag = (0, import_vue_demi13.ref)(false);
-    (0, import_vue_demi13.onMounted)(() => {
+    const canDrag = (0, import_vue_demi17.ref)(false);
+    (0, import_vue_demi17.onMounted)(() => {
       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 = (0, import_vue_demi13.computed)(() => ({
+    const style = (0, import_vue_demi17.computed)(() => ({
       width: `${width.value}px`,
       height: `${height.value}px`,
       transform: `translate(${x.value}px, ${y.value}px)`
@@ -1283,7 +1772,7 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       if (!isValid)
         return;
       handleDrag(evt, data);
-      sceneContext.emit("move");
+      sceneContext.emit("move", evt.shiftKey);
     };
     const onDragStop = (evt, coreData) => {
       if (!canDrag.value)
@@ -1304,6 +1793,7 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       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;
@@ -1321,9 +1811,9 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       }
       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;
@@ -1334,14 +1824,14 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       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) => {
@@ -1355,6 +1845,7 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       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);
@@ -1377,17 +1868,65 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       };
       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() {
@@ -1395,17 +1934,36 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       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
+      import_vue_demi17.isVue2 ? props : vue3Props,
+      import_vue_demi17.isVue2 ? vue2Listener.on : {}
     )?.(slots);
   }
 });
@@ -1433,6 +1991,7 @@ var freeDomWrapProps = {
     type: Number,
     default: 1
   },
+  keyboard: Boolean,
   handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
@@ -1442,32 +2001,47 @@ var freeDomWrapProps = {
   scale: freeDomProps.scale,
   fixNonMonospaced: freeDomProps.fixNonMonospaced
 };
-var FreeDomWrap = (0, import_vue_demi14.defineComponent)({
+var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
   name: "FreeDomWrap",
   props: freeDomWrapProps,
   setup(props) {
-    const { slots } = useDefaultSlot();
     const eventBus = useEventBus();
-    const rectRef = (0, import_vue_demi14.shallowRef)();
-    const nodes = (0, import_vue_demi14.ref)([]);
-    const width = (0, import_vue_demi14.ref)(props.width);
-    const height = (0, import_vue_demi14.ref)(props.height);
-    (0, import_vue_demi14.watchEffect)(() => {
+    const rectRef = (0, import_vue_demi18.shallowRef)();
+    const nodes = (0, import_vue_demi18.ref)([]);
+    const history = useOperateHistory(nodes);
+    const width = (0, import_vue_demi18.ref)(props.width);
+    const height = (0, import_vue_demi18.ref)(props.height);
+    const selectedNodes = (0, import_vue_demi18.computed)(() => 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 = (0, import_vue_demi18.ref)(false);
+    const mask = useMask(rectRef, nodes);
+    (0, import_vue_demi18.watchEffect)(() => {
       width.value = props.width;
     });
-    (0, import_vue_demi14.watchEffect)(() => {
+    (0, import_vue_demi18.watchEffect)(() => {
       height.value = props.height;
     });
-    (0, import_vue_demi14.onMounted)(() => {
+    (0, import_vue_demi18.onMounted)(() => {
       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);
@@ -1479,23 +2053,26 @@ var FreeDomWrap = (0, import_vue_demi14.defineComponent)({
       });
     });
     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) {
@@ -1506,7 +2083,7 @@ var FreeDomWrap = (0, import_vue_demi14.defineComponent)({
       if (pos.y + pos.height > height.value) {
         y = height.value - pos.height;
         if (y < 0) {
-          h5 = height.value;
+          h7 = height.value;
           y = 0;
         }
       }
@@ -1514,16 +2091,23 @@ var FreeDomWrap = (0, import_vue_demi14.defineComponent)({
         x,
         y,
         width: w,
-        height: h5
+        height: h7
       };
     }
-    (0, import_vue_demi14.provide)(
+    function clearSelectState() {
+      selectedNodes.value.forEach((node) => {
+        node.node.selected = false;
+      });
+    }
+    (0, import_vue_demi18.provide)(
       SceneToken,
-      (0, import_vue_demi14.reactive)({
-        ...(0, import_vue_demi14.toRefs)(props),
+      (0, import_vue_demi18.reactive)({
+        ...(0, import_vue_demi18.toRefs)(props),
         nodes,
         width,
         height,
+        history,
+        clearSelectState,
         register,
         remove,
         checkValid,
@@ -1533,41 +2117,52 @@ var FreeDomWrap = (0, import_vue_demi14.defineComponent)({
         emit: eventBus.emit
       })
     );
-    const style = (0, import_vue_demi14.computed)(() => ({
+    const style = (0, import_vue_demi18.computed)(() => ({
       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
-var import_vue_demi16 = require("vue-demi");
+var import_vue_demi20 = require("vue-demi");
 
 // src/components/gridItem.ts
-var import_vue_demi15 = require("vue-demi");
+var import_vue_demi19 = require("vue-demi");
 
 // src/components/tokens.ts
 var gridLayoutContextKey = Symbol("gridLayoutContext");
 
 // src/components/gridItem.ts
-var noop4 = () => {
+var noop5 = () => {
 };
 var gridItemProps = {
   x: {
@@ -1588,27 +2183,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,
@@ -1618,12 +2213,12 @@ var gridItemProps = {
   }
 };
 var gridItemEmits = ["dragMove"];
-var GridItem = (0, import_vue_demi15.defineComponent)({
+var GridItem = (0, import_vue_demi19.defineComponent)({
   name: "GridItem",
   props: gridItemProps,
   emits: gridItemEmits,
   setup(props) {
-    const layout = (0, import_vue_demi15.inject)(gridLayoutContextKey);
+    const layout = (0, import_vue_demi19.inject)(gridLayoutContextKey);
     if (!layout) {
       throw new Error("TODO");
     }
@@ -1643,7 +2238,6 @@ var GridItem = (0, import_vue_demi15.defineComponent)({
       onResize,
       onResizeStop
     } = useLayoutItem(props, layout);
-    const { only, slots } = useDefaultSlot();
     const resizeNode = (child) => {
       const _props = {
         width: width.value,
@@ -1682,8 +2276,6 @@ var GridItem = (0, import_vue_demi15.defineComponent)({
       y,
       width,
       height,
-      child: only,
-      slots,
       style,
       dragging,
       onDragStart,
@@ -1696,7 +2288,8 @@ var GridItem = (0, import_vue_demi15.defineComponent)({
     };
   },
   render() {
-    const node = this.slots;
+    const { slots } = useDefaultSlot();
+    const node = slots;
     return this.dragNode(node);
   }
 });
@@ -1748,15 +2341,15 @@ var gridLayoutProps = {
   disabledResize: Boolean,
   collision: Boolean
 };
-var GridLayout = (0, import_vue_demi16.defineComponent)({
+var GridLayout = (0, import_vue_demi20.defineComponent)({
   name: "GridLayout",
   inheritAttrs: false,
   props: gridLayoutProps,
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const layout = useLayout(props);
-    (0, import_vue_demi16.provide)(gridLayoutContextKey, layout);
-    const activeDrag = (0, import_vue_demi16.ref)(null);
+    (0, import_vue_demi20.provide)(gridLayoutContextKey, layout);
+    const activeDrag = (0, import_vue_demi20.ref)(null);
     function processItem(node) {
       const key = node.key;
       if (!key)
@@ -1803,12 +2396,12 @@ var GridLayout = (0, import_vue_demi16.defineComponent)({
             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;
         }
       };
@@ -1841,7 +2434,7 @@ var GridLayout = (0, import_vue_demi16.defineComponent)({
       height: this.layout.calContainerHeight()
     };
     const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default || [];
-    return (0, import_vue_demi16.h)("div", {
+    return (0, import_vue_demi20.h)("div", {
       class: "vv-grid-layout",
       style: mergedStyle
     }, [