@sepveneto/free-dom 0.11.3 → 0.11.5

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1881-SB3y5ybBKUrY/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1997-wxCDj8wK2ZXD/core/src/style/index.css */
 :root {
   --vv-free-dom--theme: rgb(64, 137, 239);
   --vv-free-dom--line: var(--vv-free-dom--theme);

package/dist/index.d.ts

@@ -114,6 +114,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
         default: number;
     };
     keyboard: BooleanConstructor;
+    disabledBatch: BooleanConstructor;
     handle: {
         type: StringConstructor;
         default: undefined;
@@ -129,6 +130,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
     lockAspectRatio: BooleanConstructor;
     disabledDrag: BooleanConstructor;
     disabledResize: BooleanConstructor;
+    disabledSelect: BooleanConstructor;
     scale: {
         type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
         default: undefined;
@@ -167,6 +169,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
         default: number;
     };
     keyboard: BooleanConstructor;
+    disabledBatch: BooleanConstructor;
     handle: {
         type: StringConstructor;
         default: undefined;
@@ -182,6 +185,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
     lockAspectRatio: BooleanConstructor;
     disabledDrag: BooleanConstructor;
     disabledResize: BooleanConstructor;
+    disabledSelect: BooleanConstructor;
     scale: {
         type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
         default: undefined;
@@ -193,12 +197,14 @@ declare const FreeScene: vue_demi.DefineComponent<{
     showLine: boolean;
     transformScale: number;
     keyboard: boolean;
+    disabledBatch: boolean;
     handle: string;
     minWidth: number;
     minHeight: number;
     lockAspectRatio: boolean;
     disabledDrag: boolean;
     disabledResize: boolean;
+    disabledSelect: boolean;
     fixNonMonospaced: boolean;
 }, {}>;
 declare const GridLayout: vue_demi.DefineComponent<{
@@ -402,6 +408,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
     };
     disabledDrag: BooleanConstructor;
     disabledResize: BooleanConstructor;
+    disabledSelect: BooleanConstructor;
     scale: {
         type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
         default: undefined;
@@ -594,6 +601,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
     };
     disabledDrag: BooleanConstructor;
     disabledResize: BooleanConstructor;
+    disabledSelect: BooleanConstructor;
     scale: {
         type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
         default: undefined;
@@ -622,6 +630,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
     lockAspectRatio: boolean;
     disabledDrag: boolean;
     disabledResize: boolean;
+    disabledSelect: boolean;
     fixNonMonospaced: boolean;
     modelValue: Partial<{
         x: number;

package/dist/index.js

@@ -40,13 +40,15 @@ var import_vue_demi = require("vue-demi");
 function createRender(comp, attrs = {}, props = {}, listeners = {}) {
   if (!comp)
     return () => null;
+  const _listeners = normalizeListeners(listeners);
   const options = import_vue_demi.isVue2 ? {
-    ...attrs,
+    ...normalizeAttrs(attrs),
     props,
-    on: listeners
+    ..._listeners
   } : {
     ...attrs,
-    ...props
+    ...props,
+    ..._listeners
   };
   if (import_vue_demi.isVue2 && typeof comp === "object" && !("render" in comp)) {
     (0, import_lodash_unified.merge)(comp.data, options);
@@ -64,6 +66,50 @@ function createRender(comp, attrs = {}, props = {}, listeners = {}) {
     }
   };
 }
+var NATIVE_ON_REGEXP = /^nativeOn([A-Z]\S*)/;
+var ON_REGEXP = /^on([A-Z]\S*)/;
+function normalizeListeners(listeners) {
+  const on = {};
+  const nativeOn = {};
+  let needOn = false;
+  let needNativeOn = false;
+  Object.entries(listeners).forEach(([key, fn]) => {
+    if (import_vue_demi.isVue2) {
+      const onName = key.match(ON_REGEXP)?.[1];
+      if (onName) {
+        needOn = true;
+        const name = onName.replace(/\S/, (letter) => letter.toLowerCase());
+        on[name] = fn;
+        return;
+      }
+      const nativeName = key.match(NATIVE_ON_REGEXP)?.[1];
+      if (nativeName) {
+        needNativeOn = true;
+        const name = nativeName.replace(/\S/, (letter) => letter.toLowerCase());
+        nativeOn[name] = fn;
+      }
+    } else {
+      needOn = true;
+      const name = key.replace(NATIVE_ON_REGEXP, (_, $1) => `on${$1}`);
+      on[name] = fn;
+    }
+  });
+  const res = {};
+  if (needOn)
+    res.on = on;
+  if (needNativeOn)
+    res.nativeOn = nativeOn;
+  return import_vue_demi.isVue2 ? res : res.on;
+}
+function normalizeAttrs(attrs) {
+  const { ref: ref15, class: _class, style, ..._attrs } = attrs;
+  return {
+    ref: ref15,
+    class: _class,
+    style,
+    attrs: _attrs
+  };
+}
 
 // src/util/index.ts
 var isProduction = process.env.NODE_ENV === "production";
@@ -379,7 +425,7 @@ function useDraggableData(props) {
 // src/hooks/use-scene-context.ts
 var import_vue_demi7 = require("vue-demi");
 var id = 0;
-function useSceneContext(context, props) {
+function useSceneContext(elm, context, props) {
   const SceneContext = (0, import_vue_demi7.inject)(SceneToken, void 0);
   const uuid = id++;
   const handle = (0, import_vue_demi7.computed)(() => SceneContext?.handle || props.handle);
@@ -388,6 +434,7 @@ function useSceneContext(context, props) {
   const minHeight = (0, import_vue_demi7.computed)(() => SceneContext?.minHeight || props.minHeight);
   const disabledDrag = (0, import_vue_demi7.computed)(() => SceneContext?.disabledDrag || props.disabledDrag);
   const disabledResize = (0, import_vue_demi7.computed)(() => SceneContext?.disabledResize || props.disabledResize);
+  const disabledSelect = (0, import_vue_demi7.computed)(() => SceneContext?.disabledSelect || props.disabledSelect);
   const scale = (0, import_vue_demi7.computed)(() => SceneContext?.scale || props.scale);
   const transformScale = (0, import_vue_demi7.computed)(() => SceneContext?.transformScale || props.transformScale);
   const fixNonMonospaced = (0, import_vue_demi7.computed)(() => {
@@ -395,7 +442,12 @@ function useSceneContext(context, props) {
   });
   const keyboard = (0, import_vue_demi7.computed)(() => SceneContext?.keyboard || props.keyboard);
   (0, import_vue_demi7.onMounted)(() => {
-    SceneContext?.register(uuid, context);
+    const node = elm.value;
+    if (!node) {
+      console.warn("[free-dom] mounted failed: element not found");
+      return;
+    }
+    SceneContext?.register(node.$el, uuid, context);
   });
   (0, import_vue_demi7.onUnmounted)(() => {
     SceneContext?.remove(uuid);
@@ -427,6 +479,7 @@ function useSceneContext(context, props) {
     minHeight,
     disabledDrag,
     disabledResize,
+    disabledSelect,
     fixNonMonospaced,
     transformScale,
     keyboard
@@ -1190,7 +1243,7 @@ var DEFAULT_UNITS = [
 ];
 
 // src/hooks/use-mask.ts
-function useMask(target, nodes) {
+function useMask(target, props, nodes) {
   const eventBus = useEventBus();
   const startX = (0, import_vue_demi13.ref)(0);
   const startY = (0, import_vue_demi13.ref)(0);
@@ -1216,8 +1269,12 @@ function useMask(target, nodes) {
   const selecting = (0, import_vue_demi13.ref)(false);
   const rect = useElementBounding(target);
   const ownerDoc = (0, import_vue_demi13.computed)(() => unrefElement(target)?.ownerDocument);
+  const activeNodes = (0, import_vue_demi13.computed)(() => nodes.value.filter((node) => {
+    return !(props.disabledSelect || node.node.disabledSelect);
+  }));
   function checkNode() {
-    nodes.value.forEach((node) => {
+    let selectedNode;
+    activeNodes.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
@@ -1228,8 +1285,13 @@ function useMask(target, nodes) {
       const y1 = rect2.y;
       const x2 = x1 + rect2.width;
       const y2 = y1 + rect2.height;
-      node.node.selected = inArea(x1, y1, x2, y2);
+      const isSelected = inArea(x1, y1, x2, y2);
+      node.node.selected = isSelected;
+      if (isSelected) {
+        selectedNode = node;
+      }
     });
+    selectedNode?.el.focus();
   }
   function inArea(x1, y1, x2, y2) {
     const areaStartX = Math.min(startX.value, lastX.value);
@@ -1252,6 +1314,8 @@ function useMask(target, nodes) {
     };
   }
   function handleMousedown(evt) {
+    if (props.disabledBatch)
+      return;
     addUserSelectStyle(ownerDoc.value);
     const { x: offsetX, y: offsetY } = offsetFormat(evt);
     selecting.value = true;
@@ -1447,30 +1511,20 @@ var freeDomCore = (0, import_vue_demi15.defineComponent)({
   },
   render() {
     const { only } = useDefaultSlot();
-    const vue2Props = {
-      on: {
-        mousedown: (evt) => {
-          evt.stopPropagation();
-          this.mousedownFn(evt);
-        },
-        mouseup: this.mouseupFn
-      }
-    };
-    const vue3Props = {
-      onMousedown: (evt) => {
-        evt.stopPropagation();
-        this.mousedownFn(evt);
-      },
-      onMouseup: this.mouseupFn
-    };
     const res = createRender(
       // @ts-expect-error: maybe vue2
       only,
       { ref: (el) => {
         this.coreRef = el;
       } },
-      import_vue_demi15.isVue2 ? {} : vue3Props,
-      import_vue_demi15.isVue2 ? vue2Props.on : {}
+      {},
+      {
+        onMousedown: (evt) => {
+          evt.stopPropagation();
+          this.mousedownFn(evt);
+        },
+        onMouseup: this.mouseupFn
+      }
     );
     if (typeof res === "function") {
       return res();
@@ -1540,16 +1594,17 @@ var resizeDomCore = (0, import_vue_demi16.defineComponent)({
         return [width, height];
       if (lockAspectRatio) {
         const ratio = props.width / props.height;
-        const deltaW = width - props.width;
-        const deltaH = height - props.height;
-        if (Math.abs(deltaW) > Math.abs(deltaH * ratio)) {
-          height = width / ratio;
-        } else {
+        if (ratio > 1) {
+          height = Math.max(height, props.minHeight);
           width = height * ratio;
+        } else {
+          width = Math.max(width, props.minWidth);
+          height = width / ratio;
         }
+      } else {
+        width = Math.max(width, props.minWidth);
+        height = Math.max(height, props.minHeight);
       }
-      width = Math.max(width, props.minWidth);
-      height = Math.max(height, props.minHeight);
       return [width, height];
     }
     function handleResize(handleName, axis) {
@@ -1685,6 +1740,7 @@ var freeDomProps = {
   minHeight: resizeDomCoreProps.minHeight,
   disabledDrag: Boolean,
   disabledResize: Boolean,
+  disabledSelect: Boolean,
   scale: resizeDomCoreProps.scale,
   transformScale: {
     type: Number,
@@ -1722,6 +1778,7 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
     const { width, height, syncSize: _syncSize } = useResizableData(props, domRef);
     const selected = (0, import_vue_demi17.ref)(false);
     const context = (0, import_vue_demi17.reactive)({
+      disabledSelect: (0, import_vue_demi17.toRef)(props, "disabledSelect"),
       selected,
       _rect: (0, import_vue_demi17.reactive)({
         x,
@@ -1735,7 +1792,7 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
         emit("update:modelValue", pos);
       }
     });
-    const sceneContext = useSceneContext(context, props);
+    const sceneContext = useSceneContext(domRef, context, props);
     onClickOutside(domRef, () => {
       if (!selected.value || isBatchSelecting.value)
         return;
@@ -1868,6 +1925,8 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
       return createRender(resizeDomCore_default, {}, props2)(slots);
     };
     function handleSelect(evt) {
+      if (sceneContext.disabledSelect.value)
+        return;
       if (evt.ctrlKey) {
         selected.value = !selected.value;
         sceneContext.history?.push({ type: "select" });
@@ -1878,23 +1937,32 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
       }
     }
     function handleKeyboard(evt) {
-      if (!canDrag.value || !sceneContext.keyboard.value)
+      if (sceneContext.disabledDrag.value || !sceneContext.keyboard.value)
         return;
       evt.preventDefault();
       switch (evt.key) {
         case "ArrowUp":
-          y.value -= 1;
+          deltaY.value = -1;
+          deltaX.value = 0;
           break;
         case "ArrowDown":
-          y.value += 1;
+          deltaY.value = 1;
+          deltaX.value = 0;
           break;
         case "ArrowLeft":
-          x.value -= 1;
+          deltaX.value = -1;
+          deltaY.value = 0;
           break;
         case "ArrowRight":
-          x.value += 1;
+          deltaX.value = 1;
+          deltaY.value = 0;
           break;
+        default:
+          deltaX.value = 0;
+          deltaY.value = 0;
       }
+      x.value += deltaX.value;
+      y.value += deltaY.value;
       const newPos = {
         x: x.value,
         y: y.value,
@@ -1934,19 +2002,7 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
       stopFn: this.onDragStop,
       dragFn: this.onDrag,
       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
+      scale: this.scale
     };
     const slots = () => this.resizeNode();
     return createRender(
@@ -1961,8 +2017,11 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
         ],
         style: this.style
       },
-      import_vue_demi17.isVue2 ? props : vue3Props,
-      import_vue_demi17.isVue2 ? vue2Listener.on : {}
+      props,
+      {
+        nativeOnClick: this.handleSelect,
+        nativeOnKeydown: this.handleKeyboard
+      }
     )?.(slots);
   }
 });
@@ -1983,12 +2042,14 @@ var freeDomWrapProps = {
     default: 1
   },
   keyboard: Boolean,
+  disabledBatch: Boolean,
   handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
   lockAspectRatio: freeDomProps.lockAspectRatio,
   disabledDrag: freeDomProps.disabledDrag,
   disabledResize: freeDomProps.disabledResize,
+  disabledSelect: freeDomProps.disabledSelect,
   scale: freeDomProps.scale,
   fixNonMonospaced: freeDomProps.fixNonMonospaced
 };
@@ -2028,7 +2089,7 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
       });
     });
     const selecting = (0, import_vue_demi18.ref)(false);
-    const mask = useMask(rectRef, nodes);
+    const mask = useMask(rectRef, props, nodes);
     function runCorrect() {
       nodes.value.forEach((pos) => {
         const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
@@ -2039,8 +2100,9 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
         pos.node.trigger({ x, y, w: width2, h: height2 });
       });
     }
-    function register(uuid, node) {
+    function register(el, uuid, node) {
       nodes.value.push({
+        el,
         uuid,
         node
       });
@@ -2123,14 +2185,11 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
         ref: "rectRef",
         class: "vv-free-dom--scene"
       },
-      import_vue_demi18.isVue2 ? {} : {
+      {},
+      {
         onMousedown: this.mask.handleMousedown,
         onMousemove: this.mask.handleMousemove
-      },
-      import_vue_demi18.isVue2 ? {
-        mousedown: this.mask.handleMousedown,
-        mousemove: this.mask.handleMousemove
-      } : {}
+      }
     )(slotList);
   }
 });

package/dist/index.mjs

@@ -2,7 +2,6 @@
 import {
   computed as computed11,
   defineComponent as defineComponent6,
-  isVue2 as isVue26,
   provide as provide2,
   reactive as reactive5,
   ref as ref13,
@@ -20,13 +19,15 @@ import { h, isVue2 } from "vue-demi";
 function createRender(comp, attrs = {}, props = {}, listeners = {}) {
   if (!comp)
     return () => null;
+  const _listeners = normalizeListeners(listeners);
   const options = isVue2 ? {
-    ...attrs,
+    ...normalizeAttrs(attrs),
     props,
-    on: listeners
+    ..._listeners
   } : {
     ...attrs,
-    ...props
+    ...props,
+    ..._listeners
   };
   if (isVue2 && typeof comp === "object" && !("render" in comp)) {
     merge(comp.data, options);
@@ -44,6 +45,50 @@ function createRender(comp, attrs = {}, props = {}, listeners = {}) {
     }
   };
 }
+var NATIVE_ON_REGEXP = /^nativeOn([A-Z]\S*)/;
+var ON_REGEXP = /^on([A-Z]\S*)/;
+function normalizeListeners(listeners) {
+  const on = {};
+  const nativeOn = {};
+  let needOn = false;
+  let needNativeOn = false;
+  Object.entries(listeners).forEach(([key, fn]) => {
+    if (isVue2) {
+      const onName = key.match(ON_REGEXP)?.[1];
+      if (onName) {
+        needOn = true;
+        const name = onName.replace(/\S/, (letter) => letter.toLowerCase());
+        on[name] = fn;
+        return;
+      }
+      const nativeName = key.match(NATIVE_ON_REGEXP)?.[1];
+      if (nativeName) {
+        needNativeOn = true;
+        const name = nativeName.replace(/\S/, (letter) => letter.toLowerCase());
+        nativeOn[name] = fn;
+      }
+    } else {
+      needOn = true;
+      const name = key.replace(NATIVE_ON_REGEXP, (_, $1) => `on${$1}`);
+      on[name] = fn;
+    }
+  });
+  const res = {};
+  if (needOn)
+    res.on = on;
+  if (needNativeOn)
+    res.nativeOn = nativeOn;
+  return isVue2 ? res : res.on;
+}
+function normalizeAttrs(attrs) {
+  const { ref: ref15, class: _class, style, ..._attrs } = attrs;
+  return {
+    ref: ref15,
+    class: _class,
+    style,
+    attrs: _attrs
+  };
+}
 
 // src/util/index.ts
 var isProduction = process.env.NODE_ENV === "production";
@@ -359,7 +404,7 @@ function useDraggableData(props) {
 // src/hooks/use-scene-context.ts
 import { computed as computed2, inject as inject2, onMounted, onUnmounted } from "vue-demi";
 var id = 0;
-function useSceneContext(context, props) {
+function useSceneContext(elm, context, props) {
   const SceneContext = inject2(SceneToken, void 0);
   const uuid = id++;
   const handle = computed2(() => SceneContext?.handle || props.handle);
@@ -368,6 +413,7 @@ function useSceneContext(context, props) {
   const minHeight = computed2(() => SceneContext?.minHeight || props.minHeight);
   const disabledDrag = computed2(() => SceneContext?.disabledDrag || props.disabledDrag);
   const disabledResize = computed2(() => SceneContext?.disabledResize || props.disabledResize);
+  const disabledSelect = computed2(() => SceneContext?.disabledSelect || props.disabledSelect);
   const scale = computed2(() => SceneContext?.scale || props.scale);
   const transformScale = computed2(() => SceneContext?.transformScale || props.transformScale);
   const fixNonMonospaced = computed2(() => {
@@ -375,7 +421,12 @@ function useSceneContext(context, props) {
   });
   const keyboard = computed2(() => SceneContext?.keyboard || props.keyboard);
   onMounted(() => {
-    SceneContext?.register(uuid, context);
+    const node = elm.value;
+    if (!node) {
+      console.warn("[free-dom] mounted failed: element not found");
+      return;
+    }
+    SceneContext?.register(node.$el, uuid, context);
   });
   onUnmounted(() => {
     SceneContext?.remove(uuid);
@@ -407,6 +458,7 @@ function useSceneContext(context, props) {
     minHeight,
     disabledDrag,
     disabledResize,
+    disabledSelect,
     fixNonMonospaced,
     transformScale,
     keyboard
@@ -1170,7 +1222,7 @@ var DEFAULT_UNITS = [
 ];
 
 // src/hooks/use-mask.ts
-function useMask(target, nodes) {
+function useMask(target, props, nodes) {
   const eventBus = useEventBus();
   const startX = ref9(0);
   const startY = ref9(0);
@@ -1196,8 +1248,12 @@ function useMask(target, nodes) {
   const selecting = ref9(false);
   const rect = useElementBounding(target);
   const ownerDoc = computed6(() => unrefElement(target)?.ownerDocument);
+  const activeNodes = computed6(() => nodes.value.filter((node) => {
+    return !(props.disabledSelect || node.node.disabledSelect);
+  }));
   function checkNode() {
-    nodes.value.forEach((node) => {
+    let selectedNode;
+    activeNodes.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
@@ -1208,8 +1264,13 @@ function useMask(target, nodes) {
       const y1 = rect2.y;
       const x2 = x1 + rect2.width;
       const y2 = y1 + rect2.height;
-      node.node.selected = inArea(x1, y1, x2, y2);
+      const isSelected = inArea(x1, y1, x2, y2);
+      node.node.selected = isSelected;
+      if (isSelected) {
+        selectedNode = node;
+      }
     });
+    selectedNode?.el.focus();
   }
   function inArea(x1, y1, x2, y2) {
     const areaStartX = Math.min(startX.value, lastX.value);
@@ -1232,6 +1293,8 @@ function useMask(target, nodes) {
     };
   }
   function handleMousedown(evt) {
+    if (props.disabledBatch)
+      return;
     addUserSelectStyle(ownerDoc.value);
     const { x: offsetX, y: offsetY } = offsetFormat(evt);
     selecting.value = true;
@@ -1312,10 +1375,10 @@ function useOperateHistory(nodes) {
 }
 
 // src/components/freeDom.ts
-import { computed as computed10, defineComponent as defineComponent5, isVue2 as isVue25, onMounted as onMounted4, reactive as reactive4, ref as ref12 } from "vue-demi";
+import { computed as computed10, defineComponent as defineComponent5, onMounted as onMounted4, reactive as reactive4, ref as ref12, toRef as toRef2 } from "vue-demi";
 
 // src/components/freeDomCore.ts
-import { computed as computed8, defineComponent as defineComponent3, isVue2 as isVue24, onUnmounted as onUnmounted3, ref as ref11 } from "vue-demi";
+import { computed as computed8, defineComponent as defineComponent3, onUnmounted as onUnmounted3, ref as ref11 } from "vue-demi";
 function noop2() {
 }
 var freeDomCoreProps = {
@@ -1427,30 +1490,20 @@ var freeDomCore = defineComponent3({
   },
   render() {
     const { only } = useDefaultSlot();
-    const vue2Props = {
-      on: {
-        mousedown: (evt) => {
-          evt.stopPropagation();
-          this.mousedownFn(evt);
-        },
-        mouseup: this.mouseupFn
-      }
-    };
-    const vue3Props = {
-      onMousedown: (evt) => {
-        evt.stopPropagation();
-        this.mousedownFn(evt);
-      },
-      onMouseup: this.mouseupFn
-    };
     const res = createRender(
       // @ts-expect-error: maybe vue2
       only,
       { ref: (el) => {
         this.coreRef = el;
       } },
-      isVue24 ? {} : vue3Props,
-      isVue24 ? vue2Props.on : {}
+      {},
+      {
+        onMousedown: (evt) => {
+          evt.stopPropagation();
+          this.mousedownFn(evt);
+        },
+        onMouseup: this.mouseupFn
+      }
     );
     if (typeof res === "function") {
       return res();
@@ -1520,16 +1573,17 @@ var resizeDomCore = defineComponent4({
         return [width, height];
       if (lockAspectRatio) {
         const ratio = props.width / props.height;
-        const deltaW = width - props.width;
-        const deltaH = height - props.height;
-        if (Math.abs(deltaW) > Math.abs(deltaH * ratio)) {
-          height = width / ratio;
-        } else {
+        if (ratio > 1) {
+          height = Math.max(height, props.minHeight);
           width = height * ratio;
+        } else {
+          width = Math.max(width, props.minWidth);
+          height = width / ratio;
         }
+      } else {
+        width = Math.max(width, props.minWidth);
+        height = Math.max(height, props.minHeight);
       }
-      width = Math.max(width, props.minWidth);
-      height = Math.max(height, props.minHeight);
       return [width, height];
     }
     function handleResize(handleName, axis) {
@@ -1665,6 +1719,7 @@ var freeDomProps = {
   minHeight: resizeDomCoreProps.minHeight,
   disabledDrag: Boolean,
   disabledResize: Boolean,
+  disabledSelect: Boolean,
   scale: resizeDomCoreProps.scale,
   transformScale: {
     type: Number,
@@ -1702,6 +1757,7 @@ var freeDom = defineComponent5({
     const { width, height, syncSize: _syncSize } = useResizableData(props, domRef);
     const selected = ref12(false);
     const context = reactive4({
+      disabledSelect: toRef2(props, "disabledSelect"),
       selected,
       _rect: reactive4({
         x,
@@ -1715,7 +1771,7 @@ var freeDom = defineComponent5({
         emit("update:modelValue", pos);
       }
     });
-    const sceneContext = useSceneContext(context, props);
+    const sceneContext = useSceneContext(domRef, context, props);
     onClickOutside(domRef, () => {
       if (!selected.value || isBatchSelecting.value)
         return;
@@ -1848,6 +1904,8 @@ var freeDom = defineComponent5({
       return createRender(resizeDomCore_default, {}, props2)(slots);
     };
     function handleSelect(evt) {
+      if (sceneContext.disabledSelect.value)
+        return;
       if (evt.ctrlKey) {
         selected.value = !selected.value;
         sceneContext.history?.push({ type: "select" });
@@ -1858,23 +1916,32 @@ var freeDom = defineComponent5({
       }
     }
     function handleKeyboard(evt) {
-      if (!canDrag.value || !sceneContext.keyboard.value)
+      if (sceneContext.disabledDrag.value || !sceneContext.keyboard.value)
         return;
       evt.preventDefault();
       switch (evt.key) {
         case "ArrowUp":
-          y.value -= 1;
+          deltaY.value = -1;
+          deltaX.value = 0;
           break;
         case "ArrowDown":
-          y.value += 1;
+          deltaY.value = 1;
+          deltaX.value = 0;
           break;
         case "ArrowLeft":
-          x.value -= 1;
+          deltaX.value = -1;
+          deltaY.value = 0;
           break;
         case "ArrowRight":
-          x.value += 1;
+          deltaX.value = 1;
+          deltaY.value = 0;
           break;
+        default:
+          deltaX.value = 0;
+          deltaY.value = 0;
       }
+      x.value += deltaX.value;
+      y.value += deltaY.value;
       const newPos = {
         x: x.value,
         y: y.value,
@@ -1914,19 +1981,7 @@ var freeDom = defineComponent5({
       stopFn: this.onDragStop,
       dragFn: this.onDrag,
       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
+      scale: this.scale
     };
     const slots = () => this.resizeNode();
     return createRender(
@@ -1941,8 +1996,11 @@ var freeDom = defineComponent5({
         ],
         style: this.style
       },
-      isVue25 ? props : vue3Props,
-      isVue25 ? vue2Listener.on : {}
+      props,
+      {
+        nativeOnClick: this.handleSelect,
+        nativeOnKeydown: this.handleKeyboard
+      }
     )?.(slots);
   }
 });
@@ -1963,12 +2021,14 @@ var freeDomWrapProps = {
     default: 1
   },
   keyboard: Boolean,
+  disabledBatch: Boolean,
   handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
   lockAspectRatio: freeDomProps.lockAspectRatio,
   disabledDrag: freeDomProps.disabledDrag,
   disabledResize: freeDomProps.disabledResize,
+  disabledSelect: freeDomProps.disabledSelect,
   scale: freeDomProps.scale,
   fixNonMonospaced: freeDomProps.fixNonMonospaced
 };
@@ -2008,7 +2068,7 @@ var FreeDomWrap = defineComponent6({
       });
     });
     const selecting = ref13(false);
-    const mask = useMask(rectRef, nodes);
+    const mask = useMask(rectRef, props, nodes);
     function runCorrect() {
       nodes.value.forEach((pos) => {
         const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
@@ -2019,8 +2079,9 @@ var FreeDomWrap = defineComponent6({
         pos.node.trigger({ x, y, w: width2, h: height2 });
       });
     }
-    function register(uuid, node) {
+    function register(el, uuid, node) {
       nodes.value.push({
+        el,
         uuid,
         node
       });
@@ -2103,14 +2164,11 @@ var FreeDomWrap = defineComponent6({
         ref: "rectRef",
         class: "vv-free-dom--scene"
       },
-      isVue26 ? {} : {
+      {},
+      {
         onMousedown: this.mask.handleMousedown,
         onMousemove: this.mask.handleMousemove
-      },
-      isVue26 ? {
-        mousedown: this.mask.handleMousedown,
-        mousemove: this.mask.handleMousemove
-      } : {}
+      }
     )(slotList);
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sepveneto/free-dom",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",