@sepveneto/free-dom 0.4.3 → 0.5.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1795-b8AgUxJOHCqG/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1786-gkIJaG8JbzPz/core/src/style/index.css */
 :root {
   --free-dom-theme: #4089ef;
   --free-dom-line: var(--free-dom-theme);

package/dist/index.d.ts

@@ -3,19 +3,19 @@ import * as vue_demi from 'vue-demi';
 declare const freeDom: vue_demi.DefineComponent<{
     x: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
     y: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
     width: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
     height: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
     absolute: {
         type: BooleanConstructor;
@@ -73,19 +73,19 @@ declare const freeDom: vue_demi.DefineComponent<{
 }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("update:x" | "update:y" | "update:width" | "update:height" | "select")[], "update:x" | "update:y" | "update:width" | "update:height" | "select", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     x: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
     y: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
     width: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
     height: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
     absolute: {
         type: BooleanConstructor;

package/dist/index.js

@@ -146,19 +146,19 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
   props: {
     x: {
       type: Number,
-      default: 0
+      default: void 0
     },
     y: {
       type: Number,
-      default: 0
+      default: void 0
     },
     width: {
       type: Number,
-      default: 0
+      default: void 0
     },
     height: {
       type: Number,
-      default: 0
+      default: void 0
     },
     absolute: {
       type: Boolean,
@@ -216,12 +216,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
     const uuid = (0, import_uuid.v4)();
     const isScale = (0, import_vue_demi2.ref)(false);
     const isMove = (0, import_vue_demi2.ref)(false);
-    const _rect = (0, import_vue_demi2.reactive)({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    });
+    const _rect = (0, import_vue_demi2.reactive)({});
     const context = {
       _rect,
       trigger
@@ -229,9 +224,17 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
     (0, import_core.onClickOutside)(widgetRef, () => {
       active.value = false;
     });
-    function parseNum(val) {
-      return typeof val === "number" ? val : parseFloat(val);
-    }
+    let rectSize = (0, import_vue_demi2.reactive)((0, import_core.useElementSize)(widgetRef));
+    let autoWidth = true;
+    let autoHeight = true;
+    const unwatch = (0, import_vue_demi2.watch)(rectSize, ({ width, height }) => {
+      if (autoWidth && width) {
+        _rect.width = width;
+      }
+      if (autoHeight && height) {
+        _rect.height = height;
+      }
+    });
     (0, import_vue_demi2.watch)(
       [
         () => props.width,
@@ -239,24 +242,27 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         () => props.x,
         () => props.y
       ],
-      () => {
-        _rect.width = props.width;
-        _rect.height = props.height;
-        _rect.x = props.x;
-        _rect.y = props.y;
+      ([width, height, x, y]) => {
+        autoWidth = width === _rect.width;
+        autoHeight = height === _rect.height;
+        if (!autoHeight && !autoWidth) {
+          unwatch();
+          rectSize = null;
+        }
+        width && (_rect.width = width);
+        height && (_rect.height = height);
+        x && (_rect.x = x);
+        y && (_rect.y = y);
         trigger();
       },
       { immediate: true }
     );
     (0, import_vue_demi2.onMounted)(async () => {
       SceneContext?.register(uuid, context);
-      const rect = widgetRef.value.getBoundingClientRect();
-      _rect.width = _rect.width || rect.width;
-      _rect.height = _rect.height || rect.height;
-      _rect.x = _rect.x || 0;
-      _rect.y = _rect.y || 0;
+      const { offsetTop, offsetLeft } = widgetRef.value;
+      _rect.x = _rect.x || offsetLeft;
+      _rect.y = _rect.y || offsetTop;
       trigger();
-      emitPos();
     });
     function trigger() {
       const { x, y, width, height } = _rect;
@@ -314,9 +320,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
       emit("update:height", _rect.height);
     }
     function getDotPos(dot) {
-      if (!_style.value)
-        return {};
-      const { width, height } = _style.value;
+      const { width, height } = _rect;
       const isL = /l/.test(dot);
       const isR = /r/.test(dot);
       const isT = /t/.test(dot);
@@ -348,7 +352,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
       const shouldUpdate = props.onDragStart?.();
       if (shouldUpdate === false)
         return;
-      const pos = getStyle(_style.value);
+      const pos = { ..._rect };
       const move = (mouseEvt) => {
         const { clientX, clientY } = mouseEvt;
         const x = clientX - evt.clientX + pos.x;
@@ -384,27 +388,6 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         return true;
       }
     }
-    function getStyle(style) {
-      const { transform, width, height } = style;
-      const { x, y } = getPos(transform);
-      return {
-        x: x ? Number(x) : 0,
-        y: y ? Number(y) : 0,
-        width: parseFloat(width),
-        height: parseFloat(height)
-      };
-    }
-    function getPos(transform) {
-      if (!transform) {
-        return {
-          x: 0,
-          y: 0
-        };
-      }
-      const posRegexp = /translate\(([.0-9]+)px[, ]+([.0-9]+)px\)/;
-      const [, x, y] = posRegexp.exec(transform) ?? [];
-      return { x: parseNum(x), y: parseNum(y) };
-    }
     return {
       widgetRef,
       canMove,

package/dist/index.mjs

@@ -124,7 +124,7 @@ function useResize(startX, startY, rect, dot, diagonal, snapGrid, callbacks) {
 }
 
 // src/components/freeDom.ts
-import { onClickOutside } from "@vueuse/core";
+import { onClickOutside, useElementSize } from "@vueuse/core";
 import { v4 as uuidv4 } from "uuid";
 var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
 var FreeDom = defineComponent({
@@ -132,19 +132,19 @@ var FreeDom = defineComponent({
   props: {
     x: {
       type: Number,
-      default: 0
+      default: void 0
     },
     y: {
       type: Number,
-      default: 0
+      default: void 0
     },
     width: {
       type: Number,
-      default: 0
+      default: void 0
     },
     height: {
       type: Number,
-      default: 0
+      default: void 0
     },
     absolute: {
       type: Boolean,
@@ -202,12 +202,7 @@ var FreeDom = defineComponent({
     const uuid = uuidv4();
     const isScale = ref2(false);
     const isMove = ref2(false);
-    const _rect = reactive({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    });
+    const _rect = reactive({});
     const context = {
       _rect,
       trigger
@@ -215,9 +210,17 @@ var FreeDom = defineComponent({
     onClickOutside(widgetRef, () => {
       active.value = false;
     });
-    function parseNum(val) {
-      return typeof val === "number" ? val : parseFloat(val);
-    }
+    let rectSize = reactive(useElementSize(widgetRef));
+    let autoWidth = true;
+    let autoHeight = true;
+    const unwatch = watch2(rectSize, ({ width, height }) => {
+      if (autoWidth && width) {
+        _rect.width = width;
+      }
+      if (autoHeight && height) {
+        _rect.height = height;
+      }
+    });
     watch2(
       [
         () => props.width,
@@ -225,24 +228,27 @@ var FreeDom = defineComponent({
         () => props.x,
         () => props.y
       ],
-      () => {
-        _rect.width = props.width;
-        _rect.height = props.height;
-        _rect.x = props.x;
-        _rect.y = props.y;
+      ([width, height, x, y]) => {
+        autoWidth = width === _rect.width;
+        autoHeight = height === _rect.height;
+        if (!autoHeight && !autoWidth) {
+          unwatch();
+          rectSize = null;
+        }
+        width && (_rect.width = width);
+        height && (_rect.height = height);
+        x && (_rect.x = x);
+        y && (_rect.y = y);
         trigger();
       },
       { immediate: true }
     );
     onMounted(async () => {
       SceneContext?.register(uuid, context);
-      const rect = widgetRef.value.getBoundingClientRect();
-      _rect.width = _rect.width || rect.width;
-      _rect.height = _rect.height || rect.height;
-      _rect.x = _rect.x || 0;
-      _rect.y = _rect.y || 0;
+      const { offsetTop, offsetLeft } = widgetRef.value;
+      _rect.x = _rect.x || offsetLeft;
+      _rect.y = _rect.y || offsetTop;
       trigger();
-      emitPos();
     });
     function trigger() {
       const { x, y, width, height } = _rect;
@@ -300,9 +306,7 @@ var FreeDom = defineComponent({
       emit("update:height", _rect.height);
     }
     function getDotPos(dot) {
-      if (!_style.value)
-        return {};
-      const { width, height } = _style.value;
+      const { width, height } = _rect;
       const isL = /l/.test(dot);
       const isR = /r/.test(dot);
       const isT = /t/.test(dot);
@@ -334,7 +338,7 @@ var FreeDom = defineComponent({
       const shouldUpdate = props.onDragStart?.();
       if (shouldUpdate === false)
         return;
-      const pos = getStyle(_style.value);
+      const pos = { ..._rect };
       const move = (mouseEvt) => {
         const { clientX, clientY } = mouseEvt;
         const x = clientX - evt.clientX + pos.x;
@@ -370,27 +374,6 @@ var FreeDom = defineComponent({
         return true;
       }
     }
-    function getStyle(style) {
-      const { transform, width, height } = style;
-      const { x, y } = getPos(transform);
-      return {
-        x: x ? Number(x) : 0,
-        y: y ? Number(y) : 0,
-        width: parseFloat(width),
-        height: parseFloat(height)
-      };
-    }
-    function getPos(transform) {
-      if (!transform) {
-        return {
-          x: 0,
-          y: 0
-        };
-      }
-      const posRegexp = /translate\(([.0-9]+)px[, ]+([.0-9]+)px\)/;
-      const [, x, y] = posRegexp.exec(transform) ?? [];
-      return { x: parseNum(x), y: parseNum(y) };
-    }
     return {
       widgetRef,
       canMove,

package/package.json

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