@sepveneto/free-dom 0.9.1 → 0.10.1

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1888-2C7SiiG2SRG2/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1900-VctnOMvoTCw3/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;
@@ -556,6 +582,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
         [key: string]: any;
     }>;
     disabled: vue_demi.ComputedRef<boolean>;
+    scale: vue_demi.ComputedRef<number>;
 }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y")[], "update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     modelValue: {
         type: vue_demi.PropType<Partial<{
@@ -629,6 +656,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 +671,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 +713,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 +742,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 +844,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.computed)(() => 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,
@@ -1375,7 +1387,8 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       onDrag,
       onDragStart,
       resizeNode,
-      disabled: sceneContext.disabledDrag
+      disabled: sceneContext.disabledDrag,
+      scale: sceneContext.transformScale
     };
   },
   render() {
@@ -1383,14 +1396,15 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       startFn: this.onDragStart,
       stopFn: this.onDragStop,
       dragFn: this.onDrag,
-      disabled: this.disabled
+      disabled: this.disabled,
+      scale: this.scale
     };
     const slots = () => this.resizeNode();
     return createRender(
       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 +1431,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

@@ -56,7 +56,7 @@ var markLine_default = defineComponent({
   setup() {
     const SceneContext = inject(SceneToken);
     const lines = shallowRef(lineType);
-    const diff = computed(() => SceneContext.diff);
+    const diff = computed(() => SceneContext.diff / SceneContext.transformScale);
     const nodes = SceneContext.nodes;
     const lineStatus = reactive({
       xt: {
@@ -334,6 +334,7 @@ function useSceneContext(context, props) {
   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;
   });
@@ -366,7 +367,8 @@ function useSceneContext(context, props) {
     minHeight,
     disabledDrag,
     disabledResize,
-    fixNonMonospaced
+    fixNonMonospaced,
+    transformScale
   };
 }
 
@@ -829,7 +831,11 @@ var freeDomCoreProps = {
     type: Function,
     default: noop
   },
-  disabled: Boolean
+  disabled: Boolean,
+  scale: {
+    type: Number,
+    default: 1
+  }
 };
 var freeDomCore = defineComponent2({
   name: "FreeDomCore",
@@ -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 {
@@ -1172,6 +1178,10 @@ var freeDomProps = {
   disabledDrag: Boolean,
   disabledResize: Boolean,
   scale: resizeDomCoreProps.scale,
+  transformScale: {
+    type: Number,
+    default: 1
+  },
   fixNonMonospaced: Boolean
 };
 var freeDom = defineComponent4({
@@ -1225,7 +1235,6 @@ var freeDom = defineComponent4({
       context.trigger({ x: pos.x, y: pos.y, w: pos.width, h: pos.height });
     });
     const style = computed7(() => ({
-      position: "absolute",
       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,
@@ -1345,7 +1357,8 @@ var freeDom = defineComponent4({
       onDrag,
       onDragStart,
       resizeNode,
-      disabled: sceneContext.disabledDrag
+      disabled: sceneContext.disabledDrag,
+      scale: sceneContext.transformScale
     };
   },
   render() {
@@ -1353,14 +1366,15 @@ var freeDom = defineComponent4({
       startFn: this.onDragStart,
       stopFn: this.onDragStop,
       dragFn: this.onDrag,
-      disabled: this.disabled
+      disabled: this.disabled,
+      scale: this.scale
     };
     const slots = () => this.resizeNode();
     return createRender(
       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 +1401,10 @@ var freeDomWrapProps = {
     type: Boolean,
     default: true
   },
+  transformScale: {
+    type: Number,
+    default: 1
+  },
   handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,

package/package.json

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