@sepveneto/free-dom 0.11.1 → 0.11.4

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1985-FkdDer0n5Q4M/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1904-Fhi89l99xkzO/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

@@ -101,14 +101,6 @@ type GridLayoutItem = {
 type GridLayoutConfig = GridLayoutItem[];
 
 declare const FreeScene: vue_demi.DefineComponent<{
-    width: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    height: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     diff: {
         type: NumberConstructor;
         default: number;
@@ -122,6 +114,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
         default: number;
     };
     keyboard: BooleanConstructor;
+    disabledBatch: BooleanConstructor;
     handle: {
         type: StringConstructor;
         default: undefined;
@@ -137,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;
@@ -144,10 +138,6 @@ declare const FreeScene: vue_demi.DefineComponent<{
     fixNonMonospaced: BooleanConstructor;
 }, {
     rectRef: vue_demi.ShallowRef<HTMLElement | undefined>;
-    style: vue_demi.ComputedRef<{
-        width: string;
-        height: string;
-    }>;
     selecting: vue_demi.Ref<boolean>;
     mask: {
         selecting: vue_demi.Ref<boolean>;
@@ -166,14 +156,6 @@ declare const FreeScene: vue_demi.DefineComponent<{
         push: (operate: any) => void;
     };
 }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
-    width: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    height: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     diff: {
         type: NumberConstructor;
         default: number;
@@ -187,6 +169,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
         default: number;
     };
     keyboard: BooleanConstructor;
+    disabledBatch: BooleanConstructor;
     handle: {
         type: StringConstructor;
         default: undefined;
@@ -202,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;
@@ -209,18 +193,18 @@ declare const FreeScene: vue_demi.DefineComponent<{
     fixNonMonospaced: BooleanConstructor;
 }>>, {
     scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
-    width: number;
-    height: number;
     diff: number;
     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<{
@@ -340,7 +324,6 @@ declare const GridLayout: vue_demi.DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    width: number;
     disabledDrag: boolean;
     disabledResize: boolean;
     modelValue: GridLayoutConfig;
@@ -350,6 +333,7 @@ declare const GridLayout: vue_demi.DefineComponent<{
     minW: number;
     minH: number;
     rowHeight: number;
+    width: number;
     margin: number[];
     containerPadding: number[];
     collision: boolean;
@@ -424,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;
@@ -616,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;
@@ -636,8 +622,6 @@ declare const FreeDom: vue_demi.DefineComponent<{
     y: number;
     dragFn: CoreFnCallback;
     scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
-    width: number;
-    height: number;
     transformScale: number;
     keyboard: boolean;
     handle: string;
@@ -646,6 +630,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
     lockAspectRatio: boolean;
     disabledDrag: boolean;
     disabledResize: boolean;
+    disabledSelect: boolean;
     fixNonMonospaced: boolean;
     modelValue: Partial<{
         x: number;
@@ -653,6 +638,8 @@ declare const FreeDom: vue_demi.DefineComponent<{
         w: number;
         h: number;
     }>;
+    width: number;
+    height: number;
     dragStartFn: CoreFnCallback;
     dragStopFn: CoreFnCallback;
     resizeStartFn: (evt: MouseEvent, resizeData: ResizeData) => void;
@@ -804,11 +791,11 @@ declare const ResizeDomCore: vue_demi.DefineComponent<{
     startFn: ResizeFnCallback;
     stopFn: ResizeFnCallback;
     scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
-    width: number;
-    height: number;
     minWidth: number;
     minHeight: number;
     lockAspectRatio: boolean;
+    width: number;
+    height: number;
     resizeFn: ResizeFnCallback;
     dragOpts: Partial<FreeDomCoreProps>;
 }, {}>;

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);
@@ -1209,14 +1262,19 @@ function useMask(target, nodes) {
       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"
+      height: Math.abs(height) + "px",
+      zIndex: 1
     };
   });
   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
@@ -1227,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);
@@ -1251,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;
@@ -1446,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();
@@ -1684,6 +1739,7 @@ var freeDomProps = {
   minHeight: resizeDomCoreProps.minHeight,
   disabledDrag: Boolean,
   disabledResize: Boolean,
+  disabledSelect: Boolean,
   scale: resizeDomCoreProps.scale,
   transformScale: {
     type: Number,
@@ -1721,6 +1777,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,
@@ -1734,7 +1791,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;
@@ -1750,8 +1807,6 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
     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_demi17.computed)(() => ({
       width: `${width.value}px`,
@@ -1869,6 +1924,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" });
@@ -1879,23 +1936,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,
@@ -1935,19 +2001,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(
@@ -1962,8 +2016,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);
   }
 });
@@ -1971,14 +2028,6 @@ var freeDom_default = freeDom;
 
 // src/components/freeDomWrap.ts
 var freeDomWrapProps = {
-  width: {
-    type: Number,
-    default: void 0
-  },
-  height: {
-    type: Number,
-    default: void 0
-  },
   diff: {
     type: Number,
     default: 2
@@ -1992,12 +2041,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
 };
@@ -2006,11 +2057,23 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
   props: freeDomWrapProps,
   setup(props) {
     const eventBus = useEventBus();
-    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 width = (0, import_vue_demi18.ref)(0);
+    const height = (0, import_vue_demi18.ref)(0);
+    const rectRef = (0, import_vue_demi18.shallowRef)();
+    const wrapRect = useElementBounding(rectRef);
+    (0, import_vue_demi18.watch)([
+      wrapRect.width,
+      wrapRect.height,
+      () => nodes.value.length
+    ], ([w, h7]) => {
+      width.value = w;
+      height.value = h7;
+      if (!w || !h7)
+        return;
+      runCorrect();
+    });
     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);
@@ -2025,24 +2088,8 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
       });
     });
     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_demi18.watchEffect)(() => {
-      height.value = props.height;
-    });
-    (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 h7 = rectRef.value?.clientHeight;
-        const w = rectRef.value?.clientWidth;
-        if (!props.width)
-          width.value = w || 0;
-        if (!props.height)
-          height.value = h7 || 0;
-      }
+    const mask = useMask(rectRef, props, nodes);
+    function runCorrect() {
       nodes.value.forEach((pos) => {
         const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
         pos.node._rect.x = x;
@@ -2051,9 +2098,10 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
         pos.node._rect.height = height2;
         pos.node.trigger({ x, y, w: width2, h: height2 });
       });
-    });
-    function register(uuid, node) {
+    }
+    function register(el, uuid, node) {
       nodes.value.push({
+        el,
         uuid,
         node
       });
@@ -2064,9 +2112,7 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
     }
     function checkValid(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 + h7 <= height.value;
+      return x >= 0 && x + w <= width.value && y >= 0 && y + h7 <= height.value;
     }
     function correct(pos) {
       let x = Math.max(pos.x, 0);
@@ -2117,13 +2163,8 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
         emit: eventBus.emit
       })
     );
-    const style = (0, import_vue_demi18.computed)(() => ({
-      width: `${props.width}px`,
-      height: `${props.height}px`
-    }));
     return {
       rectRef,
-      style,
       selecting,
       mask,
       history
@@ -2141,9 +2182,9 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
       "section",
       {
         ref: "rectRef",
-        class: "vv-free-dom--scene",
-        style: this.style
+        class: "vv-free-dom--scene"
       },
+      {},
       {
         onMousedown: this.mask.handleMousedown,
         onMousemove: this.mask.handleMousemove

package/dist/index.mjs

@@ -2,13 +2,12 @@
 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
+  watch as watch4
 } from "vue-demi";
 
 // src/util/tokens.ts
@@ -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);
@@ -1189,14 +1241,19 @@ function useMask(target, nodes) {
       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"
+      height: Math.abs(height) + "px",
+      zIndex: 1
     };
   });
   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
@@ -1207,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);
@@ -1231,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;
@@ -1311,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 = {
@@ -1426,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();
@@ -1664,6 +1718,7 @@ var freeDomProps = {
   minHeight: resizeDomCoreProps.minHeight,
   disabledDrag: Boolean,
   disabledResize: Boolean,
+  disabledSelect: Boolean,
   scale: resizeDomCoreProps.scale,
   transformScale: {
     type: Number,
@@ -1701,6 +1756,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,
@@ -1714,7 +1770,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;
@@ -1730,8 +1786,6 @@ var freeDom = defineComponent5({
     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 = computed10(() => ({
       width: `${width.value}px`,
@@ -1849,6 +1903,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" });
@@ -1859,23 +1915,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,
@@ -1915,19 +1980,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(
@@ -1942,8 +1995,11 @@ var freeDom = defineComponent5({
         ],
         style: this.style
       },
-      isVue25 ? props : vue3Props,
-      isVue25 ? vue2Listener.on : {}
+      props,
+      {
+        nativeOnClick: this.handleSelect,
+        nativeOnKeydown: this.handleKeyboard
+      }
     )?.(slots);
   }
 });
@@ -1951,14 +2007,6 @@ var freeDom_default = freeDom;
 
 // src/components/freeDomWrap.ts
 var freeDomWrapProps = {
-  width: {
-    type: Number,
-    default: void 0
-  },
-  height: {
-    type: Number,
-    default: void 0
-  },
   diff: {
     type: Number,
     default: 2
@@ -1972,12 +2020,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
 };
@@ -1986,11 +2036,23 @@ var FreeDomWrap = defineComponent6({
   props: freeDomWrapProps,
   setup(props) {
     const eventBus = useEventBus();
-    const rectRef = shallowRef6();
     const nodes = ref13([]);
     const history = useOperateHistory(nodes);
-    const width = ref13(props.width);
-    const height = ref13(props.height);
+    const width = ref13(0);
+    const height = ref13(0);
+    const rectRef = shallowRef6();
+    const wrapRect = useElementBounding(rectRef);
+    watch4([
+      wrapRect.width,
+      wrapRect.height,
+      () => nodes.value.length
+    ], ([w, h7]) => {
+      width.value = w;
+      height.value = h7;
+      if (!w || !h7)
+        return;
+      runCorrect();
+    });
     const selectedNodes = computed11(() => nodes.value.filter((node) => node.node.selected));
     eventBus.on("move", (nodeId) => {
       const mainNode = selectedNodes.value.find((node) => node.uuid === nodeId);
@@ -2005,24 +2067,8 @@ var FreeDomWrap = defineComponent6({
       });
     });
     const selecting = ref13(false);
-    const mask = useMask(rectRef, nodes);
-    watchEffect6(() => {
-      width.value = props.width;
-    });
-    watchEffect6(() => {
-      height.value = props.height;
-    });
-    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 h7 = rectRef.value?.clientHeight;
-        const w = rectRef.value?.clientWidth;
-        if (!props.width)
-          width.value = w || 0;
-        if (!props.height)
-          height.value = h7 || 0;
-      }
+    const mask = useMask(rectRef, props, nodes);
+    function runCorrect() {
       nodes.value.forEach((pos) => {
         const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
         pos.node._rect.x = x;
@@ -2031,9 +2077,10 @@ var FreeDomWrap = defineComponent6({
         pos.node._rect.height = height2;
         pos.node.trigger({ x, y, w: width2, h: height2 });
       });
-    });
-    function register(uuid, node) {
+    }
+    function register(el, uuid, node) {
       nodes.value.push({
+        el,
         uuid,
         node
       });
@@ -2044,9 +2091,7 @@ var FreeDomWrap = defineComponent6({
     }
     function checkValid(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 + h7 <= height.value;
+      return x >= 0 && x + w <= width.value && y >= 0 && y + h7 <= height.value;
     }
     function correct(pos) {
       let x = Math.max(pos.x, 0);
@@ -2097,13 +2142,8 @@ var FreeDomWrap = defineComponent6({
         emit: eventBus.emit
       })
     );
-    const style = computed11(() => ({
-      width: `${props.width}px`,
-      height: `${props.height}px`
-    }));
     return {
       rectRef,
-      style,
       selecting,
       mask,
       history
@@ -2121,9 +2161,9 @@ var FreeDomWrap = defineComponent6({
       "section",
       {
         ref: "rectRef",
-        class: "vv-free-dom--scene",
-        style: this.style
+        class: "vv-free-dom--scene"
       },
+      {},
       {
         onMousedown: this.mask.handleMousedown,
         onMousemove: this.mask.handleMousemove

package/package.json

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