@sepveneto/free-dom 0.9.0 → 0.10.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1880-p3aCZArVLO4k/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1954-fWPtLbls0CBY/core/src/style/index.css */
 :root {
   --vv-free-dom--theme: #4089ef;
   --vv-free-dom--line: var(--vv-free-dom--theme);
@@ -59,8 +59,12 @@
   border-bottom: 2px solid rgba(0, 0, 0, 0.4);
 }
 .vv-free-dom--draggable {
+  position: absolute;
   cursor: move;
 }
+.vv-free-dom--draggable__disabled {
+  cursor: initial;
+}
 .vv-free-dom--line {
   background: var(--vv-free-dom--line);
   position: absolute;

package/dist/index.d.ts

@@ -30,6 +30,10 @@ declare const freeDomCoreProps: {
         default: typeof noop$1;
     };
     disabled: BooleanConstructor;
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
 };
 type FreeDomCoreProps = ExtractPropTypes<typeof freeDomCoreProps>;
 
@@ -113,6 +117,10 @@ declare const FreeScene: vue_demi.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    transformScale: {
+        type: NumberConstructor;
+        default: number;
+    };
     handle: {
         type: StringConstructor;
         default: undefined;
@@ -159,6 +167,10 @@ declare const FreeScene: vue_demi.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    transformScale: {
+        type: NumberConstructor;
+        default: number;
+    };
     handle: {
         type: StringConstructor;
         default: undefined;
@@ -180,17 +192,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;
     handle: string;
     minWidth: number;
     minHeight: number;
     lockAspectRatio: boolean;
     disabledDrag: boolean;
     disabledResize: boolean;
-    scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
     fixNonMonospaced: boolean;
 }, {}>;
 declare const GridLayout: vue_demi.DefineComponent<{
@@ -397,6 +410,10 @@ declare const FreeDom: vue_demi.DefineComponent<{
         type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
         default: undefined;
     };
+    transformScale: {
+        type: NumberConstructor;
+        default: number;
+    };
     fixNonMonospaced: BooleanConstructor;
 }, {
     domRef: vue_demi.Ref<({
@@ -408,6 +425,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
             stopFn?: CoreFnCallback | undefined;
             dragFn?: CoreFnCallback | undefined;
             disabled?: boolean | undefined;
+            scale?: number | undefined;
             key?: string | number | symbol | undefined;
             style?: unknown;
             ref?: vue_demi.VNodeRef | undefined;
@@ -484,6 +502,10 @@ declare const FreeDom: vue_demi.DefineComponent<{
                 default: () => void;
             };
             disabled: BooleanConstructor;
+            scale: {
+                type: NumberConstructor;
+                default: number;
+            };
         }>>, {
             only: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
                 [key: string]: any;
@@ -497,6 +519,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
             stopFn: CoreFnCallback;
             dragFn: CoreFnCallback;
             disabled: boolean;
+            scale: number;
         }, {}, string, {}> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -535,6 +558,10 @@ declare const FreeDom: vue_demi.DefineComponent<{
             default: () => void;
         };
         disabled: BooleanConstructor;
+        scale: {
+            type: NumberConstructor;
+            default: number;
+        };
     }>> & vue_demi.ShallowUnwrapRef<{
         only: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
             [key: string]: any;
@@ -544,7 +571,6 @@ declare const FreeDom: vue_demi.DefineComponent<{
         mouseupFn: (evt: MouseEvent) => void;
     }> & {} & vue_demi.ComponentCustomProperties & {}) | undefined>;
     style: vue_demi.ComputedRef<{
-        position: string;
         width: string;
         height: string;
         transform: string;
@@ -629,6 +655,10 @@ declare const FreeDom: vue_demi.DefineComponent<{
         type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
         default: undefined;
     };
+    transformScale: {
+        type: NumberConstructor;
+        default: number;
+    };
     fixNonMonospaced: BooleanConstructor;
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -640,15 +670,16 @@ declare const FreeDom: vue_demi.DefineComponent<{
     x: number;
     y: number;
     dragFn: CoreFnCallback;
+    scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
     width: number;
     height: number;
+    transformScale: number;
     handle: string;
     minWidth: number;
     minHeight: number;
     lockAspectRatio: boolean;
     disabledDrag: boolean;
     disabledResize: boolean;
-    scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
     fixNonMonospaced: boolean;
     modelValue: Partial<{
         x: number;
@@ -681,6 +712,10 @@ declare const FreeDomCore: vue_demi.DefineComponent<{
         default: () => void;
     };
     disabled: BooleanConstructor;
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, {
     only: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
         [key: string]: any;
@@ -706,12 +741,17 @@ declare const FreeDomCore: vue_demi.DefineComponent<{
         default: () => void;
     };
     disabled: BooleanConstructor;
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>>, {
     userSelectHack: boolean;
     startFn: CoreFnCallback;
     stopFn: CoreFnCallback;
     dragFn: CoreFnCallback;
     disabled: boolean;
+    scale: number;
 }, {}>;
 declare const ResizeDomCore: vue_demi.DefineComponent<{
     dragOpts: {
@@ -803,12 +843,12 @@ 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;
-    scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
     resizeFn: ResizeFnCallback;
     dragOpts: Partial<FreeDomCoreProps>;
 }, {}>;

package/dist/index.js

@@ -86,7 +86,7 @@ var markLine_default = (0, import_vue_demi2.defineComponent)({
   setup() {
     const SceneContext = (0, import_vue_demi2.inject)(SceneToken);
     const lines = (0, import_vue_demi2.shallowRef)(lineType);
-    const diff = (0, import_vue_demi2.ref)(SceneContext.diff);
+    const diff = (0, import_vue_demi2.computed)(() => SceneContext.diff / SceneContext.transformScale);
     const nodes = SceneContext.nodes;
     const lineStatus = (0, import_vue_demi2.reactive)({
       xt: {
@@ -364,6 +364,7 @@ function useSceneContext(context, props) {
   const disabledDrag = (0, import_vue_demi7.computed)(() => SceneContext?.disabledDrag || props.disabledDrag);
   const disabledResize = (0, import_vue_demi7.computed)(() => SceneContext?.disabledResize || props.disabledResize);
   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)(() => {
     return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
   });
@@ -396,7 +397,8 @@ function useSceneContext(context, props) {
     minHeight,
     disabledDrag,
     disabledResize,
-    fixNonMonospaced
+    fixNonMonospaced,
+    transformScale
   };
 }
 
@@ -859,7 +861,11 @@ var freeDomCoreProps = {
     type: Function,
     default: noop
   },
-  disabled: Boolean
+  disabled: Boolean,
+  scale: {
+    type: Number,
+    default: 1
+  }
 };
 var freeDomCore = (0, import_vue_demi11.defineComponent)({
   name: "FreeDomCore",
@@ -952,8 +958,8 @@ var freeDomCore = (0, import_vue_demi11.defineComponent)({
         parentNode = parent;
         parentRect = isBody ? { left: 0, top: 0 } : parent.getBoundingClientRect();
       }
-      const x = evt.clientX + parent.scrollLeft - parentRect.left;
-      const y = evt.clientY + parent.scrollTop - parentRect.top;
+      const x = (evt.clientX + parent.scrollLeft - parentRect.left) / props.scale;
+      const y = (evt.clientY + parent.scrollTop - parentRect.top) / props.scale;
       return { x, y };
     }
     return {
@@ -1202,6 +1208,10 @@ var freeDomProps = {
   disabledDrag: Boolean,
   disabledResize: Boolean,
   scale: resizeDomCoreProps.scale,
+  transformScale: {
+    type: Number,
+    default: 1
+  },
   fixNonMonospaced: Boolean
 };
 var freeDom = (0, import_vue_demi13.defineComponent)({
@@ -1255,7 +1265,6 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       context.trigger({ x: pos.x, y: pos.y, w: pos.width, h: pos.height });
     });
     const style = (0, import_vue_demi13.computed)(() => ({
-      position: "absolute",
       width: `${width.value}px`,
       height: `${height.value}px`,
       transform: `translate(${x.value}px, ${y.value}px)`
@@ -1355,7 +1364,10 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
         width: width.value,
         height: height.value,
         lockAspectRatio: sceneContext.lockAspectRatio.value,
-        dragOpts: { disabled: sceneContext.disabledResize.value },
+        dragOpts: {
+          disabled: sceneContext.disabledResize.value,
+          scale: sceneContext.transformScale.value
+        },
         startFn: onResizeStart,
         resizeFn: onResize,
         stopFn: onResizeStop,
@@ -1390,7 +1402,7 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       freeDomCore_default,
       {
         ref: "domRef",
-        class: "vv-free-dom--draggable",
+        class: ["vv-free-dom--draggable", this.disabled && "vv-free-dom--draggable__disabled"],
         style: this.style
       },
       props
@@ -1417,6 +1429,10 @@ var freeDomWrapProps = {
     type: Boolean,
     default: true
   },
+  transformScale: {
+    type: Number,
+    default: 1
+  },
   handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/freeDomWrap.ts
-import { computed as computed7, defineComponent as defineComponent5, onMounted as onMounted3, provide, reactive as reactive3, ref as ref10, shallowRef as shallowRef4, toRefs, watchEffect as watchEffect4 } from "vue-demi";
+import { computed as computed8, defineComponent as defineComponent5, onMounted as onMounted3, provide, reactive as reactive3, ref as ref9, shallowRef as shallowRef4, toRefs, watchEffect as watchEffect4 } from "vue-demi";
 
 // src/util/tokens.ts
 var SceneToken = Symbol("Scene");
@@ -47,7 +47,7 @@ function log(...args) {
 }
 
 // src/components/markLine.ts
-import { defineComponent, h as h2, inject, onBeforeUnmount, reactive, ref, shallowRef } from "vue-demi";
+import { computed, defineComponent, h as h2, inject, onBeforeUnmount, reactive, shallowRef } from "vue-demi";
 var lineType = ["xt", "xc", "xb", "yl", "yc", "yr"];
 var markLine_default = defineComponent({
   props: {
@@ -56,7 +56,7 @@ var markLine_default = defineComponent({
   setup() {
     const SceneContext = inject(SceneToken);
     const lines = shallowRef(lineType);
-    const diff = ref(SceneContext.diff);
+    const diff = computed(() => SceneContext.diff / SceneContext.transformScale);
     const nodes = SceneContext.nodes;
     const lineStatus = reactive({
       xt: {
@@ -214,16 +214,16 @@ var markLine_default = defineComponent({
 });
 
 // src/hooks/use-normalize-style.ts
-import { ref as ref2, unref, watch } from "vue-demi";
+import { ref, unref, watch } from "vue-demi";
 
 // src/hooks/use-default-slot.ts
-import { computed, useSlots } from "vue-demi";
+import { computed as computed2, useSlots } from "vue-demi";
 function useDefaultSlot() {
   const slots = useSlots();
-  const slotList = computed(() => {
+  const slotList = computed2(() => {
     return typeof slots.default === "function" ? slots.default() : slots.default;
   });
-  const only = computed(() => slotList.value?.[0]);
+  const only = computed2(() => slotList.value?.[0]);
   return {
     slots: slotList,
     only
@@ -231,10 +231,10 @@ function useDefaultSlot() {
 }
 
 // src/hooks/use-core-date.ts
-import { ref as ref3, unref as unref2 } from "vue-demi";
+import { ref as ref2, unref as unref2 } from "vue-demi";
 function useCoreData(node) {
-  const lastX = ref3(NaN);
-  const lastY = ref3(NaN);
+  const lastX = ref2(NaN);
+  const lastY = ref2(NaN);
   function create(x, y) {
     const isStart = isNaN(lastX.value);
     const _node = unref2(node);
@@ -271,13 +271,13 @@ function useCoreData(node) {
 }
 
 // src/hooks/use-draggable-data.ts
-import { ref as ref4, watchEffect } from "vue-demi";
+import { ref as ref3, watchEffect } from "vue-demi";
 function useDraggableData(props) {
-  const x = ref4(props.x || props.modelValue.x || 0);
-  const y = ref4(props.y || props.modelValue.y || 0);
-  const deltaX = ref4(0);
-  const deltaY = ref4(0);
-  const dragData = ref4();
+  const x = ref3(props.x || props.modelValue.x || 0);
+  const y = ref3(props.y || props.modelValue.y || 0);
+  const deltaX = ref3(0);
+  const deltaY = ref3(0);
+  const dragData = ref3();
   watchEffect(() => {
     x.value = props.x || props.modelValue.x || 0;
   });
@@ -322,19 +322,20 @@ function useDraggableData(props) {
 }
 
 // src/hooks/use-scene-context.ts
-import { computed as computed2, inject as inject2, onMounted, onUnmounted } from "vue-demi";
+import { computed as computed3, inject as inject2, onMounted, onUnmounted } from "vue-demi";
 var id = 0;
 function useSceneContext(context, props) {
   const SceneContext = inject2(SceneToken, void 0);
   const uuid = id++;
-  const handle = computed2(() => SceneContext?.handle || props.handle);
-  const lockAspectRatio = computed2(() => SceneContext?.lockAspectRatio || props.lockAspectRatio);
-  const minWidth = computed2(() => SceneContext?.minWidth || props.minWidth);
-  const minHeight = computed2(() => SceneContext?.minHeight || props.minHeight);
-  const disabledDrag = computed2(() => SceneContext?.disabledDrag || props.disabledDrag);
-  const disabledResize = computed2(() => SceneContext?.disabledResize || props.disabledResize);
-  const scale = computed2(() => SceneContext?.scale || props.scale);
-  const fixNonMonospaced = computed2(() => {
+  const handle = computed3(() => SceneContext?.handle || props.handle);
+  const lockAspectRatio = computed3(() => SceneContext?.lockAspectRatio || props.lockAspectRatio);
+  const minWidth = computed3(() => SceneContext?.minWidth || props.minWidth);
+  const minHeight = computed3(() => SceneContext?.minHeight || props.minHeight);
+  const disabledDrag = computed3(() => SceneContext?.disabledDrag || props.disabledDrag);
+  const disabledResize = computed3(() => SceneContext?.disabledResize || props.disabledResize);
+  const scale = computed3(() => SceneContext?.scale || props.scale);
+  const transformScale = computed3(() => SceneContext?.transformScale || props.transformScale);
+  const fixNonMonospaced = computed3(() => {
     return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
   });
   onMounted(() => {
@@ -366,14 +367,15 @@ function useSceneContext(context, props) {
     minHeight,
     disabledDrag,
     disabledResize,
-    fixNonMonospaced
+    fixNonMonospaced,
+    transformScale
   };
 }
 
 // src/hooks/use-event-bus.ts
-import { ref as ref5 } from "vue-demi";
+import { ref as ref4 } from "vue-demi";
 function useEventBus() {
-  const callbacks = ref5({});
+  const callbacks = ref4({});
   const on = (name, cb) => {
     if (!callbacks.value[name]) {
       callbacks.value[name] = [cb];
@@ -396,10 +398,10 @@ function useEventBus() {
 }
 
 // src/hooks/use-resizable-data.ts
-import { ref as ref6, watchEffect as watchEffect2 } from "vue-demi";
+import { ref as ref5, watchEffect as watchEffect2 } from "vue-demi";
 function useResizableData(props, domRef) {
-  const width = ref6(getWidth());
-  const height = ref6(getHeight());
+  const width = ref5(getWidth());
+  const height = ref5(getHeight());
   watchEffect2(() => {
     width.value = getWidth();
   });
@@ -432,22 +434,22 @@ function useResizableData(props, domRef) {
 }
 
 // src/hooks/use-layout.ts
-import { computed as computed3, ref as ref7, shallowRef as shallowRef2, watchEffect as watchEffect3 } from "vue-demi";
+import { computed as computed4, ref as ref6, shallowRef as shallowRef2, watchEffect as watchEffect3 } from "vue-demi";
 function useLayout(props) {
   const layout = shallowRef2(props.modelValue);
   watchEffect3(() => {
     layout.value = props.modelValue;
   });
-  const cellWidth = computed3(
+  const cellWidth = computed4(
     () => (props.width - margin.value[0] * (cols.value - 1) - (containerPadding.value?.[0] || margin.value[0]) * 2) / props.cols
   );
-  const cols = computed3(() => props.cols);
-  const rowHeight = computed3(() => props.rowHeight);
-  const margin = computed3(() => props.margin);
-  const maxRows = computed3(() => props.maxRows);
-  const containerPadding = computed3(() => props.containerPadding);
-  const minW = computed3(() => props.minW);
-  const minH = computed3(() => props.minH);
+  const cols = computed4(() => props.cols);
+  const rowHeight = computed4(() => props.rowHeight);
+  const margin = computed4(() => props.margin);
+  const maxRows = computed4(() => props.maxRows);
+  const containerPadding = computed4(() => props.containerPadding);
+  const minW = computed4(() => props.minW);
+  const minH = computed4(() => props.minH);
   function getItem(key) {
     return layout.value.find((item) => item.i === key);
   }
@@ -682,46 +684,46 @@ function useLayout(props) {
 }
 function useLayoutItem(props, layout) {
   const { cellWidth, margin, rowHeight, cols, maxRows, containerPadding: cPadding } = layout;
-  const dragging = ref7();
-  const resizing = ref7();
-  const containerPadding = computed3(() => cPadding.value || margin.value);
-  const x = computed3(() => {
+  const dragging = ref6();
+  const resizing = ref6();
+  const containerPadding = computed4(() => cPadding.value || margin.value);
+  const x = computed4(() => {
     if (!dragging.value) {
       return Math.round(props.x * (cellWidth.value + margin.value[0]) + containerPadding.value[0]);
     } else {
       return Math.round(dragging.value.x);
     }
   });
-  const y = computed3(() => {
+  const y = computed4(() => {
     if (!dragging.value) {
       return Math.round(props.y * (rowHeight.value + margin.value[1]) + containerPadding.value[1]);
     } else {
       return Math.round(dragging.value.y);
     }
   });
-  const width = computed3(() => {
+  const width = computed4(() => {
     if (!resizing.value) {
       return Math.round(cellWidth.value * props.width + Math.max(0, props.width - 1) * margin.value[0]);
     } else {
       return Math.round(resizing.value.width);
     }
   });
-  const height = computed3(() => {
+  const height = computed4(() => {
     if (!resizing.value) {
       return Math.round(rowHeight.value * props.height + Math.max(0, props.height - 1) * margin.value[1]);
     } else {
       return Math.round(resizing.value.height);
     }
   });
-  const minWidth = computed3(() => {
+  const minWidth = computed4(() => {
     const minW = layout.minW.value;
     return Math.round(cellWidth.value * minW + Math.max(0, minW - 1) * margin.value[0]);
   });
-  const minHeight = computed3(() => {
+  const minHeight = computed4(() => {
     const minH = layout.minH.value;
     return Math.round(rowHeight.value * minH + Math.max(0, minH - 1) * margin.value[1]);
   });
-  const style = computed3(() => {
+  const style = computed4(() => {
     return {
       position: "absolute",
       width: `${width.value}px`,
@@ -806,10 +808,10 @@ function useLayoutItem(props, layout) {
 }
 
 // src/components/freeDom.ts
-import { computed as computed6, defineComponent as defineComponent4, onMounted as onMounted2, reactive as reactive2, ref as ref9 } from "vue-demi";
+import { computed as computed7, defineComponent as defineComponent4, onMounted as onMounted2, reactive as reactive2, ref as ref8 } from "vue-demi";
 
 // src/components/freeDomCore.ts
-import { computed as computed4, defineComponent as defineComponent2, isVue2 as isVue22, onUnmounted as onUnmounted2, ref as ref8 } from "vue-demi";
+import { computed as computed5, defineComponent as defineComponent2, isVue2 as isVue22, onUnmounted as onUnmounted2, ref as ref7 } from "vue-demi";
 function noop() {
 }
 var freeDomCoreProps = {
@@ -829,17 +831,21 @@ var freeDomCoreProps = {
     type: Function,
     default: noop
   },
-  disabled: Boolean
+  disabled: Boolean,
+  scale: {
+    type: Number,
+    default: 1
+  }
 };
 var freeDomCore = defineComponent2({
   name: "FreeDomCore",
   props: freeDomCoreProps,
   setup(props) {
     const { only } = useDefaultSlot();
-    const dragging = ref8(false);
-    const coreRef = ref8();
-    const node = computed4(() => coreRef.value?.$el || coreRef.value);
-    const ownerDoc = computed4(() => node.value?.ownerDocument);
+    const dragging = ref7(false);
+    const coreRef = ref7();
+    const node = computed5(() => coreRef.value?.$el || coreRef.value);
+    const ownerDoc = computed5(() => node.value?.ownerDocument);
     const { lastX, lastY, create } = useCoreData(node);
     let parentNode;
     let parentRect;
@@ -922,8 +928,8 @@ var freeDomCore = defineComponent2({
         parentNode = parent;
         parentRect = isBody ? { left: 0, top: 0 } : parent.getBoundingClientRect();
       }
-      const x = evt.clientX + parent.scrollLeft - parentRect.left;
-      const y = evt.clientY + parent.scrollTop - parentRect.top;
+      const x = (evt.clientX + parent.scrollLeft - parentRect.left) / props.scale;
+      const y = (evt.clientY + parent.scrollTop - parentRect.top) / props.scale;
       return { x, y };
     }
     return {
@@ -969,7 +975,7 @@ var freeDomCore = defineComponent2({
 var freeDomCore_default = freeDomCore;
 
 // src/components/resizeDomCore.ts
-import { computed as computed5, defineComponent as defineComponent3, h as h3, shallowRef as shallowRef3 } from "vue-demi";
+import { computed as computed6, defineComponent as defineComponent3, h as h3, shallowRef as shallowRef3 } from "vue-demi";
 var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
 function noop2() {
 }
@@ -1017,7 +1023,7 @@ var resizeDomCore = defineComponent3({
   props: resizeDomCoreProps,
   setup(props, { slots }) {
     const { slots: _slots } = useDefaultSlot();
-    const dots = computed5(() => {
+    const dots = computed6(() => {
       const _dots = props.scale;
       return Array.isArray(_dots) ? _dots : Dots;
     });
@@ -1172,6 +1178,10 @@ var freeDomProps = {
   disabledDrag: Boolean,
   disabledResize: Boolean,
   scale: resizeDomCoreProps.scale,
+  transformScale: {
+    type: Number,
+    default: 1
+  },
   fixNonMonospaced: Boolean
 };
 var freeDom = defineComponent4({
@@ -1185,7 +1195,7 @@ var freeDom = defineComponent4({
     "update:modelValue"
   ],
   setup(props, { emit, expose, slots }) {
-    const domRef = ref9();
+    const domRef = ref8();
     const {
       x,
       y,
@@ -1218,14 +1228,13 @@ var freeDom = defineComponent4({
         sceneContext.minHeight.value
       );
     };
-    const canDrag = ref9(false);
+    const canDrag = ref8(false);
     onMounted2(() => {
       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 = computed6(() => ({
-      position: "absolute",
+    const style = computed7(() => ({
       width: `${width.value}px`,
       height: `${height.value}px`,
       transform: `translate(${x.value}px, ${y.value}px)`
@@ -1325,7 +1334,10 @@ var freeDom = defineComponent4({
         width: width.value,
         height: height.value,
         lockAspectRatio: sceneContext.lockAspectRatio.value,
-        dragOpts: { disabled: sceneContext.disabledResize.value },
+        dragOpts: {
+          disabled: sceneContext.disabledResize.value,
+          scale: sceneContext.transformScale.value
+        },
         startFn: onResizeStart,
         resizeFn: onResize,
         stopFn: onResizeStop,
@@ -1360,7 +1372,7 @@ var freeDom = defineComponent4({
       freeDomCore_default,
       {
         ref: "domRef",
-        class: "vv-free-dom--draggable",
+        class: ["vv-free-dom--draggable", this.disabled && "vv-free-dom--draggable__disabled"],
         style: this.style
       },
       props
@@ -1387,6 +1399,10 @@ var freeDomWrapProps = {
     type: Boolean,
     default: true
   },
+  transformScale: {
+    type: Number,
+    default: 1
+  },
   handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
@@ -1403,9 +1419,9 @@ var FreeDomWrap = defineComponent5({
     const { slots } = useDefaultSlot();
     const eventBus = useEventBus();
     const rectRef = shallowRef4();
-    const nodes = ref10([]);
-    const width = ref10(props.width);
-    const height = ref10(props.height);
+    const nodes = ref9([]);
+    const width = ref9(props.width);
+    const height = ref9(props.height);
     watchEffect4(() => {
       width.value = props.width;
     });
@@ -1487,7 +1503,7 @@ var FreeDomWrap = defineComponent5({
         emit: eventBus.emit
       })
     );
-    const style = computed7(() => ({
+    const style = computed8(() => ({
       width: `${props.width}px`,
       height: `${props.height}px`
     }));
@@ -1512,7 +1528,7 @@ var FreeDomWrap = defineComponent5({
 });
 
 // src/components/gridLayout.ts
-import { defineComponent as defineComponent7, h as h4, provide as provide2, ref as ref11 } from "vue-demi";
+import { defineComponent as defineComponent7, h as h4, provide as provide2, ref as ref10 } from "vue-demi";
 
 // src/components/gridItem.ts
 import { defineComponent as defineComponent6, inject as inject3 } from "vue-demi";
@@ -1710,7 +1726,7 @@ var GridLayout = defineComponent7({
   setup(props, { emit }) {
     const layout = useLayout(props);
     provide2(gridLayoutContextKey, layout);
-    const activeDrag = ref11(null);
+    const activeDrag = ref10(null);
     function processItem(node) {
       const key = node.key;
       if (!key)

package/package.json

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