@sepveneto/free-dom 0.12.5 → 0.12.7

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-2033-Gdg1v2Xs1Hrq/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1960-Uznj1NL705hQ/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

@@ -105,6 +105,7 @@ declare const FreeScene: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: number;
     };
+    manualDiff: BooleanConstructor;
     showLine: {
         type: BooleanConstructor;
         default: boolean;
@@ -164,6 +165,7 @@ declare const FreeScene: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: number;
     };
+    manualDiff: BooleanConstructor;
     showLine: {
         type: BooleanConstructor;
         default: boolean;
@@ -201,6 +203,7 @@ declare const FreeScene: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
     diff: number;
+    manualDiff: boolean;
     showLine: boolean;
     transformScale: number;
     keyboard: boolean;
@@ -393,6 +396,10 @@ declare const FreeDom: vue.DefineComponent<vue.ExtractPropTypes<{
         }>>;
         default: () => {};
     };
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     keyboard: BooleanConstructor;
     x: {
         type: NumberConstructor;
@@ -627,7 +634,7 @@ declare const FreeDom: vue.DefineComponent<vue.ExtractPropTypes<{
     handleSelect: (evt: MouseEvent) => void;
     disabled: vue.ComputedRef<boolean>;
     scale: vue.ComputedRef<number>;
-}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y")[], "update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y" | "select")[], "update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y" | "select", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     modelValue: {
         type: vue.PropType<Partial<{
             x: number;
@@ -637,6 +644,10 @@ declare const FreeDom: vue.DefineComponent<vue.ExtractPropTypes<{
         }>>;
         default: () => {};
     };
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     keyboard: BooleanConstructor;
     x: {
         type: NumberConstructor;
@@ -713,6 +724,7 @@ declare const FreeDom: vue.DefineComponent<vue.ExtractPropTypes<{
     "onUpdate:height"?: ((...args: any[]) => any) | undefined;
     "onUpdate:x"?: ((...args: any[]) => any) | undefined;
     "onUpdate:y"?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
 }>, {
     x: number;
     y: number;
@@ -735,6 +747,7 @@ declare const FreeDom: vue.DefineComponent<vue.ExtractPropTypes<{
         h: number;
     }>;
     width: number;
+    active: boolean;
     height: number;
     dragStartFn: CoreFnCallback;
     dragStopFn: CoreFnCallback;

package/dist/index.js

@@ -35292,7 +35292,7 @@ var require_reactivity_cjs_prod = __commonJS({
         cleanups.push(cleanupFn);
       }
     }
-    function watch7(source, cb, options = shared.EMPTY_OBJ) {
+    function watch8(source, cb, options = shared.EMPTY_OBJ) {
       const { immediate, deep, once, scheduler, augmentJob, call } = options;
       const reactiveGetter = (source2) => {
         if (deep)
@@ -35518,7 +35518,7 @@ var require_reactivity_cjs_prod = __commonJS({
     exports.trigger = trigger;
     exports.triggerRef = triggerRef;
     exports.unref = unref5;
-    exports.watch = watch7;
+    exports.watch = watch8;
   }
 });
 
@@ -37146,7 +37146,7 @@ var require_reactivity_cjs = __commonJS({
         );
       }
     }
-    function watch7(source, cb, options = shared.EMPTY_OBJ) {
+    function watch8(source, cb, options = shared.EMPTY_OBJ) {
       const { immediate, deep, once, scheduler, augmentJob, call } = options;
       const warnInvalidSource = (s) => {
         (options.onWarn || warn2)(
@@ -37385,7 +37385,7 @@ var require_reactivity_cjs = __commonJS({
     exports.trigger = trigger;
     exports.triggerRef = triggerRef;
     exports.unref = unref5;
-    exports.watch = watch7;
+    exports.watch = watch8;
   }
 });
 
@@ -39363,7 +39363,7 @@ var require_runtime_core_cjs_prod = __commonJS({
           cache.delete(key);
           keys.delete(key);
         }
-        watch7(
+        watch8(
           () => [props.include, props.exclude],
           ([include, exclude]) => {
             include && pruneCache((name) => matches(include, name));
@@ -40140,12 +40140,12 @@ var require_runtime_core_cjs_prod = __commonJS({
         const handler = ctx[raw];
         if (shared.isFunction(handler)) {
           {
-            watch7(getter, handler);
+            watch8(getter, handler);
           }
         }
       } else if (shared.isFunction(raw)) {
         {
-          watch7(getter, raw.bind(publicThis));
+          watch8(getter, raw.bind(publicThis));
         }
       } else if (shared.isObject(raw)) {
         if (shared.isArray(raw)) {
@@ -40153,7 +40153,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         } else {
           const handler = shared.isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];
           if (shared.isFunction(handler)) {
-            watch7(getter, handler, raw);
+            watch8(getter, handler, raw);
           }
         }
       } else
@@ -42191,7 +42191,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         return ctx;
       }
     };
-    function watchEffect5(effect, options) {
+    function watchEffect6(effect, options) {
       return doWatch(effect, null, options);
     }
     function watchPostEffect(effect, options) {
@@ -42208,7 +42208,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         { flush: "sync" }
       );
     }
-    function watch7(source, cb, options) {
+    function watch8(source, cb, options) {
       return doWatch(source, cb, options);
     }
     function doWatch(source, cb, options = shared.EMPTY_OBJ) {
@@ -44058,8 +44058,8 @@ var require_runtime_core_cjs_prod = __commonJS({
     exports.useTransitionState = useTransitionState;
     exports.version = version3;
     exports.warn = warn$1;
-    exports.watch = watch7;
-    exports.watchEffect = watchEffect5;
+    exports.watch = watch8;
+    exports.watchEffect = watchEffect6;
     exports.watchPostEffect = watchPostEffect;
     exports.watchSyncEffect = watchSyncEffect;
     exports.withAsyncContext = withAsyncContext;
@@ -46688,7 +46688,7 @@ Server rendered element contains fewer child nodes than client vdom.`
           cache.delete(key);
           keys.delete(key);
         }
-        watch7(
+        watch8(
           () => [props.include, props.exclude],
           ([include, exclude]) => {
             include && pruneCache((name) => matches(include, name));
@@ -47698,14 +47698,14 @@ If this is a native custom element, make sure to exclude it from component resol
         const handler = ctx[raw];
         if (shared.isFunction(handler)) {
           {
-            watch7(getter, handler);
+            watch8(getter, handler);
           }
         } else {
           warn$1(`Invalid watch handler specified by key "${raw}"`, handler);
         }
       } else if (shared.isFunction(raw)) {
         {
-          watch7(getter, raw.bind(publicThis));
+          watch8(getter, raw.bind(publicThis));
         }
       } else if (shared.isObject(raw)) {
         if (shared.isArray(raw)) {
@@ -47713,7 +47713,7 @@ If this is a native custom element, make sure to exclude it from component resol
         } else {
           const handler = shared.isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];
           if (shared.isFunction(handler)) {
-            watch7(getter, handler, raw);
+            watch8(getter, handler, raw);
           } else {
             warn$1(`Invalid watch handler specified by key "${raw.handler}"`, handler);
           }
@@ -50160,7 +50160,7 @@ If you want to remount the same app, move your app creation logic into a factory
         return ctx;
       }
     };
-    function watchEffect5(effect, options) {
+    function watchEffect6(effect, options) {
       return doWatch(effect, null, options);
     }
     function watchPostEffect(effect, options) {
@@ -50177,7 +50177,7 @@ If you want to remount the same app, move your app creation logic into a factory
         shared.extend({}, options, { flush: "sync" })
       );
     }
-    function watch7(source, cb, options) {
+    function watch8(source, cb, options) {
       if (!shared.isFunction(cb)) {
         warn$1(
           `\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`
@@ -52563,8 +52563,8 @@ Component that was made reactive: `,
     exports.useTransitionState = useTransitionState;
     exports.version = version3;
     exports.warn = warn2;
-    exports.watch = watch7;
-    exports.watchEffect = watchEffect5;
+    exports.watch = watch8;
+    exports.watchEffect = watchEffect6;
     exports.watchPostEffect = watchPostEffect;
     exports.watchSyncEffect = watchSyncEffect;
     exports.withAsyncContext = withAsyncContext;
@@ -56644,6 +56644,7 @@ function useSceneContext(elm, context, props) {
     return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
   });
   const keyboard = (0, import_vue_demi7.computed)(() => SceneContext?.keyboard || props.keyboard);
+  const manualDiff = (0, import_vue_demi7.computed)(() => SceneContext?.manualDiff);
   (0, import_vue_demi7.onMounted)(() => {
     const node = elm.value;
     if (!node) {
@@ -56685,7 +56686,8 @@ function useSceneContext(elm, context, props) {
     disabledSelect,
     fixNonMonospaced,
     transformScale,
-    keyboard
+    keyboard,
+    manualDiff
   };
 }
 
@@ -57493,6 +57495,7 @@ function useMask(target, props, nodes, size) {
     };
   });
   const selecting = (0, import_vue_demi13.ref)(false);
+  const prepareSelect = (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) => {
@@ -57545,7 +57548,7 @@ function useMask(target, props, nodes, size) {
       return;
     addUserSelectStyle(ownerDoc.value);
     const { x: offsetX, y: offsetY } = offsetFormat(evt);
-    selecting.value = true;
+    prepareSelect.value = true;
     startX.value = offsetX;
     startY.value = offsetY;
     lastX.value = offsetX;
@@ -57553,7 +57556,7 @@ function useMask(target, props, nodes, size) {
     document.addEventListener("mouseup", handleMouseup);
   }
   function handleMousemove(evt) {
-    if (!selecting.value)
+    if (!prepareSelect.value)
       return;
     if (!hasEmit.value) {
       eventBus.emit("batch-select", "start");
@@ -57563,6 +57566,7 @@ function useMask(target, props, nodes, size) {
     debug(lastX.value, offsetX, lastY.value, offsetY);
     if (lastX.value === offsetX && lastY.value === offsetY)
       return;
+    selecting.value = true;
     debug("cal", offsetX, 0, size.width.value);
     lastX.value = clamp(offsetX, 0, size.width.value);
     lastY.value = clamp(offsetY, 0, size.height.value);
@@ -57571,6 +57575,7 @@ function useMask(target, props, nodes, size) {
   }
   function handleMouseup() {
     removeUserSelectStyle(ownerDoc.value);
+    prepareSelect.value = false;
     selecting.value = false;
     hasEmit.value = false;
     if (lastX.value === startX.value && lastY.value === startY.value) {
@@ -57923,6 +57928,10 @@ var freeDomProps = {
     type: Object,
     default: () => ({})
   },
+  active: {
+    type: Boolean,
+    default: void 0
+  },
   keyboard: Boolean,
   x: {
     type: Number,
@@ -57993,7 +58002,8 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
     "update:height",
     "update:x",
     "update:y",
-    "update:modelValue"
+    "update:modelValue",
+    "select"
   ],
   setup(props, { emit, expose, slots }) {
     const domRef = (0, import_vue_demi17.ref)();
@@ -58014,6 +58024,14 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
     } = useDraggableData(props);
     const { width, height, syncSize: _syncSize } = useResizableData(props, domRef);
     const selected = (0, import_vue_demi17.ref)(false);
+    (0, import_vue_demi17.watch)(() => props.active, (val) => {
+      if (typeof val === "boolean") {
+        selected.value = val;
+      }
+    }, { immediate: true });
+    (0, import_vue_demi17.watchEffect)(() => {
+      emit("select", selected.value);
+    });
     const context = (0, import_vue_demi17.reactive)({
       disabledSelect: (0, import_vue_demi17.toRef)(props, "disabledSelect"),
       selected,
@@ -58068,7 +58086,7 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
       if (!isValid)
         return;
       handleDrag(evt, data);
-      sceneContext.emit("move", evt.shiftKey);
+      sceneContext.emit("move", sceneContext.manualDiff.value ? !evt.shiftKey : evt.shiftKey);
     };
     const onDragStop = (evt, coreData) => {
       if (!canDrag.value)
@@ -58144,6 +58162,7 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
       sceneContext.history?.push({ type: "resize-end" });
     };
     const onResizeStart = (evt, data) => {
+      selected.value = true;
       props.resizeStartFn(evt, data);
     };
     const resizeNode = () => {
@@ -58253,7 +58272,7 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
         class: [
           "vv-free-dom--draggable",
           this.disabled && "vv-free-dom--draggable__disabled",
-          this.selected && "vv-free-dom--draggable__selected"
+          (this.active || this.selected) && "vv-free-dom--draggable__selected"
         ],
         style: this.style
       },
@@ -58275,6 +58294,7 @@ var freeDomWrapProps = {
     type: Number,
     default: 2
   },
+  manualDiff: Boolean,
   showLine: {
     type: Boolean,
     default: true

package/dist/index.mjs

@@ -35293,7 +35293,7 @@ var require_reactivity_cjs_prod = __commonJS({
         cleanups.push(cleanupFn);
       }
     }
-    function watch7(source, cb, options = shared.EMPTY_OBJ) {
+    function watch8(source, cb, options = shared.EMPTY_OBJ) {
       const { immediate, deep, once, scheduler, augmentJob, call } = options;
       const reactiveGetter = (source2) => {
         if (deep)
@@ -35519,7 +35519,7 @@ var require_reactivity_cjs_prod = __commonJS({
     exports.trigger = trigger;
     exports.triggerRef = triggerRef;
     exports.unref = unref5;
-    exports.watch = watch7;
+    exports.watch = watch8;
   }
 });
 
@@ -37147,7 +37147,7 @@ var require_reactivity_cjs = __commonJS({
         );
       }
     }
-    function watch7(source, cb, options = shared.EMPTY_OBJ) {
+    function watch8(source, cb, options = shared.EMPTY_OBJ) {
       const { immediate, deep, once, scheduler, augmentJob, call } = options;
       const warnInvalidSource = (s) => {
         (options.onWarn || warn2)(
@@ -37386,7 +37386,7 @@ var require_reactivity_cjs = __commonJS({
     exports.trigger = trigger;
     exports.triggerRef = triggerRef;
     exports.unref = unref5;
-    exports.watch = watch7;
+    exports.watch = watch8;
   }
 });
 
@@ -39364,7 +39364,7 @@ var require_runtime_core_cjs_prod = __commonJS({
           cache.delete(key);
           keys.delete(key);
         }
-        watch7(
+        watch8(
           () => [props.include, props.exclude],
           ([include, exclude]) => {
             include && pruneCache((name) => matches(include, name));
@@ -40141,12 +40141,12 @@ var require_runtime_core_cjs_prod = __commonJS({
         const handler = ctx[raw];
         if (shared.isFunction(handler)) {
           {
-            watch7(getter, handler);
+            watch8(getter, handler);
           }
         }
       } else if (shared.isFunction(raw)) {
         {
-          watch7(getter, raw.bind(publicThis));
+          watch8(getter, raw.bind(publicThis));
         }
       } else if (shared.isObject(raw)) {
         if (shared.isArray(raw)) {
@@ -40154,7 +40154,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         } else {
           const handler = shared.isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];
           if (shared.isFunction(handler)) {
-            watch7(getter, handler, raw);
+            watch8(getter, handler, raw);
           }
         }
       } else
@@ -42192,7 +42192,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         return ctx;
       }
     };
-    function watchEffect5(effect, options) {
+    function watchEffect6(effect, options) {
       return doWatch(effect, null, options);
     }
     function watchPostEffect(effect, options) {
@@ -42209,7 +42209,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         { flush: "sync" }
       );
     }
-    function watch7(source, cb, options) {
+    function watch8(source, cb, options) {
       return doWatch(source, cb, options);
     }
     function doWatch(source, cb, options = shared.EMPTY_OBJ) {
@@ -44059,8 +44059,8 @@ var require_runtime_core_cjs_prod = __commonJS({
     exports.useTransitionState = useTransitionState;
     exports.version = version3;
     exports.warn = warn$1;
-    exports.watch = watch7;
-    exports.watchEffect = watchEffect5;
+    exports.watch = watch8;
+    exports.watchEffect = watchEffect6;
     exports.watchPostEffect = watchPostEffect;
     exports.watchSyncEffect = watchSyncEffect;
     exports.withAsyncContext = withAsyncContext;
@@ -46689,7 +46689,7 @@ Server rendered element contains fewer child nodes than client vdom.`
           cache.delete(key);
           keys.delete(key);
         }
-        watch7(
+        watch8(
           () => [props.include, props.exclude],
           ([include, exclude]) => {
             include && pruneCache((name) => matches(include, name));
@@ -47699,14 +47699,14 @@ If this is a native custom element, make sure to exclude it from component resol
         const handler = ctx[raw];
         if (shared.isFunction(handler)) {
           {
-            watch7(getter, handler);
+            watch8(getter, handler);
           }
         } else {
           warn$1(`Invalid watch handler specified by key "${raw}"`, handler);
         }
       } else if (shared.isFunction(raw)) {
         {
-          watch7(getter, raw.bind(publicThis));
+          watch8(getter, raw.bind(publicThis));
         }
       } else if (shared.isObject(raw)) {
         if (shared.isArray(raw)) {
@@ -47714,7 +47714,7 @@ If this is a native custom element, make sure to exclude it from component resol
         } else {
           const handler = shared.isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];
           if (shared.isFunction(handler)) {
-            watch7(getter, handler, raw);
+            watch8(getter, handler, raw);
           } else {
             warn$1(`Invalid watch handler specified by key "${raw.handler}"`, handler);
           }
@@ -50161,7 +50161,7 @@ If you want to remount the same app, move your app creation logic into a factory
         return ctx;
       }
     };
-    function watchEffect5(effect, options) {
+    function watchEffect6(effect, options) {
       return doWatch(effect, null, options);
     }
     function watchPostEffect(effect, options) {
@@ -50178,7 +50178,7 @@ If you want to remount the same app, move your app creation logic into a factory
         shared.extend({}, options, { flush: "sync" })
       );
     }
-    function watch7(source, cb, options) {
+    function watch8(source, cb, options) {
       if (!shared.isFunction(cb)) {
         warn$1(
           `\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`
@@ -52564,8 +52564,8 @@ Component that was made reactive: `,
     exports.useTransitionState = useTransitionState;
     exports.version = version3;
     exports.warn = warn2;
-    exports.watch = watch7;
-    exports.watchEffect = watchEffect5;
+    exports.watch = watch8;
+    exports.watchEffect = watchEffect6;
     exports.watchPostEffect = watchPostEffect;
     exports.watchSyncEffect = watchSyncEffect;
     exports.withAsyncContext = withAsyncContext;
@@ -56216,7 +56216,7 @@ import {
   ref as ref13,
   shallowRef as shallowRef6,
   toRefs as toRefs2,
-  watch as watch5
+  watch as watch6
 } from "vue-demi";
 
 // src/util/tokens.ts
@@ -56643,6 +56643,7 @@ function useSceneContext(elm, context, props) {
     return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
   });
   const keyboard = computed2(() => SceneContext?.keyboard || props.keyboard);
+  const manualDiff = computed2(() => SceneContext?.manualDiff);
   onMounted(() => {
     const node = elm.value;
     if (!node) {
@@ -56684,7 +56685,8 @@ function useSceneContext(elm, context, props) {
     disabledSelect,
     fixNonMonospaced,
     transformScale,
-    keyboard
+    keyboard,
+    manualDiff
   };
 }
 
@@ -57492,6 +57494,7 @@ function useMask(target, props, nodes, size) {
     };
   });
   const selecting = ref9(false);
+  const prepareSelect = ref9(false);
   const rect = useElementBounding(target);
   const ownerDoc = computed6(() => unrefElement(target)?.ownerDocument);
   const activeNodes = computed6(() => nodes.value.filter((node) => {
@@ -57544,7 +57547,7 @@ function useMask(target, props, nodes, size) {
       return;
     addUserSelectStyle(ownerDoc.value);
     const { x: offsetX, y: offsetY } = offsetFormat(evt);
-    selecting.value = true;
+    prepareSelect.value = true;
     startX.value = offsetX;
     startY.value = offsetY;
     lastX.value = offsetX;
@@ -57552,7 +57555,7 @@ function useMask(target, props, nodes, size) {
     document.addEventListener("mouseup", handleMouseup);
   }
   function handleMousemove(evt) {
-    if (!selecting.value)
+    if (!prepareSelect.value)
       return;
     if (!hasEmit.value) {
       eventBus.emit("batch-select", "start");
@@ -57562,6 +57565,7 @@ function useMask(target, props, nodes, size) {
     debug(lastX.value, offsetX, lastY.value, offsetY);
     if (lastX.value === offsetX && lastY.value === offsetY)
       return;
+    selecting.value = true;
     debug("cal", offsetX, 0, size.width.value);
     lastX.value = clamp(offsetX, 0, size.width.value);
     lastY.value = clamp(offsetY, 0, size.height.value);
@@ -57570,6 +57574,7 @@ function useMask(target, props, nodes, size) {
   }
   function handleMouseup() {
     removeUserSelectStyle(ownerDoc.value);
+    prepareSelect.value = false;
     selecting.value = false;
     hasEmit.value = false;
     if (lastX.value === startX.value && lastY.value === startY.value) {
@@ -57630,7 +57635,7 @@ function useOperateHistory(nodes) {
 }
 
 // src/components/freeDom.ts
-import { computed as computed10, defineComponent as defineComponent5, onMounted as onMounted4, reactive as reactive4, ref as ref12, toRef as toRef2 } from "vue-demi";
+import { computed as computed10, defineComponent as defineComponent5, onMounted as onMounted4, reactive as reactive4, ref as ref12, toRef as toRef2, watch as watch5, watchEffect as watchEffect5 } from "vue-demi";
 
 // src/components/freeDomCore.ts
 import { computed as computed8, defineComponent as defineComponent3, onUnmounted as onUnmounted3, ref as ref11 } from "vue-demi";
@@ -57922,6 +57927,10 @@ var freeDomProps = {
     type: Object,
     default: () => ({})
   },
+  active: {
+    type: Boolean,
+    default: void 0
+  },
   keyboard: Boolean,
   x: {
     type: Number,
@@ -57992,7 +58001,8 @@ var freeDom = defineComponent5({
     "update:height",
     "update:x",
     "update:y",
-    "update:modelValue"
+    "update:modelValue",
+    "select"
   ],
   setup(props, { emit, expose, slots }) {
     const domRef = ref12();
@@ -58013,6 +58023,14 @@ var freeDom = defineComponent5({
     } = useDraggableData(props);
     const { width, height, syncSize: _syncSize } = useResizableData(props, domRef);
     const selected = ref12(false);
+    watch5(() => props.active, (val) => {
+      if (typeof val === "boolean") {
+        selected.value = val;
+      }
+    }, { immediate: true });
+    watchEffect5(() => {
+      emit("select", selected.value);
+    });
     const context = reactive4({
       disabledSelect: toRef2(props, "disabledSelect"),
       selected,
@@ -58067,7 +58085,7 @@ var freeDom = defineComponent5({
       if (!isValid)
         return;
       handleDrag(evt, data);
-      sceneContext.emit("move", evt.shiftKey);
+      sceneContext.emit("move", sceneContext.manualDiff.value ? !evt.shiftKey : evt.shiftKey);
     };
     const onDragStop = (evt, coreData) => {
       if (!canDrag.value)
@@ -58143,6 +58161,7 @@ var freeDom = defineComponent5({
       sceneContext.history?.push({ type: "resize-end" });
     };
     const onResizeStart = (evt, data) => {
+      selected.value = true;
       props.resizeStartFn(evt, data);
     };
     const resizeNode = () => {
@@ -58252,7 +58271,7 @@ var freeDom = defineComponent5({
         class: [
           "vv-free-dom--draggable",
           this.disabled && "vv-free-dom--draggable__disabled",
-          this.selected && "vv-free-dom--draggable__selected"
+          (this.active || this.selected) && "vv-free-dom--draggable__selected"
         ],
         style: this.style
       },
@@ -58274,6 +58293,7 @@ var freeDomWrapProps = {
     type: Number,
     default: 2
   },
+  manualDiff: Boolean,
   showLine: {
     type: Boolean,
     default: true
@@ -58312,7 +58332,7 @@ var FreeDomWrap = defineComponent6({
     const height = ref13(0);
     const rectRef = shallowRef6();
     const wrapRect = useElementBounding(rectRef);
-    watch5([
+    watch6([
       wrapRect.width,
       wrapRect.height,
       () => nodes.value.length
@@ -58463,7 +58483,7 @@ var FreeDomWrap = defineComponent6({
 import { Fragment as Fragment2, defineComponent as defineComponent8, h as h6, provide as provide3, reactive as reactive6, ref as ref16, toRefs as toRefs3 } from "vue-demi";
 
 // src/components/gridItem.ts
-import { defineComponent as defineComponent7, inject as inject5, onMounted as onMounted5, ref as ref14, watch as watch6 } from "vue-demi";
+import { defineComponent as defineComponent7, inject as inject5, onMounted as onMounted5, ref as ref14, watch as watch7 } from "vue-demi";
 
 // src/components/tokens.ts
 var gridLayoutContextKey = Symbol("gridLayoutContext");
@@ -58537,7 +58557,7 @@ var GridItem = defineComponent7({
     onMounted5(() => {
       moveDroppingItem();
     });
-    watch6(() => props.droppingPosition, (currPos, prevPos) => {
+    watch7(() => props.droppingPosition, (currPos, prevPos) => {
       moveDroppingItem(prevPos);
     }, { deep: true });
     function moveDroppingItem(prevPos) {

package/package.json

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