@sepveneto/free-dom 0.8.0 → 0.9.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1883-O1p5mboxRMKz/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1880-p3aCZArVLO4k/core/src/style/index.css */
 :root {
   --vv-free-dom--theme: #4089ef;
   --vv-free-dom--line: var(--vv-free-dom--theme);
@@ -78,6 +78,7 @@
 }
 .vv-free-dom--scene {
   position: relative;
+  box-sizing: content-box;
 }
 .vv-grid-layout {
   position: relative;

package/dist/index.js

@@ -370,14 +370,23 @@ function useSceneContext(context, props) {
   (0, import_vue_demi7.onMounted)(() => {
     SceneContext?.register(uuid, context);
   });
+  (0, import_vue_demi7.onUnmounted)(() => {
+    SceneContext?.remove(uuid);
+  });
   function check(pos) {
     if (!SceneContext)
       return true;
     return SceneContext.checkValid(pos);
   }
+  function correct(pos) {
+    if (!SceneContext)
+      return pos;
+    return SceneContext.correct(pos);
+  }
   return {
     emit: (name) => SceneContext?.emit(name, uuid),
     check,
+    correct,
     width: SceneContext?.width,
     height: SceneContext?.height,
     scale,
@@ -1227,7 +1236,8 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
         deltaX,
         deltaY
       }),
-      trigger: () => {
+      trigger: (pos) => {
+        emit("update:modelValue", pos);
       }
     };
     const sceneContext = useSceneContext(context, props);
@@ -1241,6 +1251,8 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
     const canDrag = (0, import_vue_demi13.ref)(false);
     (0, import_vue_demi13.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_demi13.computed)(() => ({
       position: "absolute",
@@ -1434,22 +1446,61 @@ var FreeDomWrap = (0, import_vue_demi14.defineComponent)({
       if (!props.width || !props.height) {
         if (!rectRef.value)
           console.warn("[free-dom] cannot find element, width or height may be set to 0");
-        const { width: w, height: h5 } = rectRef.value?.getBoundingClientRect() || {};
+        const h5 = rectRef.value?.clientHeight;
+        const w = rectRef.value?.clientWidth;
         if (!props.width)
           width.value = w || 0;
         if (!props.height)
           height.value = h5 || 0;
       }
+      nodes.value.forEach((pos) => {
+        const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
+        pos.node._rect.x = x;
+        pos.node._rect.y = y;
+        pos.node._rect.width = width2;
+        pos.node._rect.height = height2;
+        pos.node.trigger({ x, y, w: width2, h: height2 });
+      });
     });
     function register(uuid, node) {
       nodes.value.push({ uuid, node });
     }
+    function remove(uuid) {
+      const index = nodes.value.findIndex((item) => item.uuid === uuid);
+      nodes.value.splice(index, 1);
+    }
     function checkValid(pos) {
       const { x, y, width: w, height: h5 } = pos;
       return x >= 0 && // @ts-expect-error: trigger after mounted
       x + w <= width.value && y >= 0 && // @ts-expect-error: trigger after mounted
       y + h5 <= height.value;
     }
+    function correct(pos) {
+      let x = Math.max(pos.x, 0);
+      let y = Math.max(pos.y, 0);
+      let w = pos.width;
+      let h5 = pos.height;
+      if (pos.x + pos.width > width.value) {
+        x = width.value - pos.width;
+        if (x < 0) {
+          w = width.value;
+          x = 0;
+        }
+      }
+      if (pos.y + pos.height > height.value) {
+        y = height.value - pos.height;
+        if (y < 0) {
+          h5 = height.value;
+          y = 0;
+        }
+      }
+      return {
+        x,
+        y,
+        width: w,
+        height: h5
+      };
+    }
     (0, import_vue_demi14.provide)(
       SceneToken,
       (0, import_vue_demi14.reactive)({
@@ -1458,7 +1509,9 @@ var FreeDomWrap = (0, import_vue_demi14.defineComponent)({
         width,
         height,
         register,
+        remove,
         checkValid,
+        correct,
         on: eventBus.on,
         off: eventBus.off,
         emit: eventBus.emit

package/dist/index.mjs

@@ -322,7 +322,7 @@ function useDraggableData(props) {
 }
 
 // src/hooks/use-scene-context.ts
-import { computed as computed2, inject as inject2, onMounted } from "vue-demi";
+import { computed as computed2, inject as inject2, onMounted, onUnmounted } from "vue-demi";
 var id = 0;
 function useSceneContext(context, props) {
   const SceneContext = inject2(SceneToken, void 0);
@@ -340,14 +340,23 @@ function useSceneContext(context, props) {
   onMounted(() => {
     SceneContext?.register(uuid, context);
   });
+  onUnmounted(() => {
+    SceneContext?.remove(uuid);
+  });
   function check(pos) {
     if (!SceneContext)
       return true;
     return SceneContext.checkValid(pos);
   }
+  function correct(pos) {
+    if (!SceneContext)
+      return pos;
+    return SceneContext.correct(pos);
+  }
   return {
     emit: (name) => SceneContext?.emit(name, uuid),
     check,
+    correct,
     width: SceneContext?.width,
     height: SceneContext?.height,
     scale,
@@ -800,7 +809,7 @@ function useLayoutItem(props, layout) {
 import { computed as computed6, defineComponent as defineComponent4, onMounted as onMounted2, reactive as reactive2, ref as ref9 } from "vue-demi";
 
 // src/components/freeDomCore.ts
-import { computed as computed4, defineComponent as defineComponent2, isVue2 as isVue22, onUnmounted, ref as ref8 } from "vue-demi";
+import { computed as computed4, defineComponent as defineComponent2, isVue2 as isVue22, onUnmounted as onUnmounted2, ref as ref8 } from "vue-demi";
 function noop() {
 }
 var freeDomCoreProps = {
@@ -834,7 +843,7 @@ var freeDomCore = defineComponent2({
     const { lastX, lastY, create } = useCoreData(node);
     let parentNode;
     let parentRect;
-    onUnmounted(() => {
+    onUnmounted2(() => {
       if (!ownerDoc.value)
         return;
       if (props.userSelectHack)
@@ -1197,7 +1206,8 @@ var freeDom = defineComponent4({
         deltaX,
         deltaY
       }),
-      trigger: () => {
+      trigger: (pos) => {
+        emit("update:modelValue", pos);
       }
     };
     const sceneContext = useSceneContext(context, props);
@@ -1211,6 +1221,8 @@ var freeDom = defineComponent4({
     const canDrag = ref9(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",
@@ -1404,22 +1416,61 @@ var FreeDomWrap = defineComponent5({
       if (!props.width || !props.height) {
         if (!rectRef.value)
           console.warn("[free-dom] cannot find element, width or height may be set to 0");
-        const { width: w, height: h5 } = rectRef.value?.getBoundingClientRect() || {};
+        const h5 = rectRef.value?.clientHeight;
+        const w = rectRef.value?.clientWidth;
         if (!props.width)
           width.value = w || 0;
         if (!props.height)
           height.value = h5 || 0;
       }
+      nodes.value.forEach((pos) => {
+        const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
+        pos.node._rect.x = x;
+        pos.node._rect.y = y;
+        pos.node._rect.width = width2;
+        pos.node._rect.height = height2;
+        pos.node.trigger({ x, y, w: width2, h: height2 });
+      });
     });
     function register(uuid, node) {
       nodes.value.push({ uuid, node });
     }
+    function remove(uuid) {
+      const index = nodes.value.findIndex((item) => item.uuid === uuid);
+      nodes.value.splice(index, 1);
+    }
     function checkValid(pos) {
       const { x, y, width: w, height: h5 } = pos;
       return x >= 0 && // @ts-expect-error: trigger after mounted
       x + w <= width.value && y >= 0 && // @ts-expect-error: trigger after mounted
       y + h5 <= height.value;
     }
+    function correct(pos) {
+      let x = Math.max(pos.x, 0);
+      let y = Math.max(pos.y, 0);
+      let w = pos.width;
+      let h5 = pos.height;
+      if (pos.x + pos.width > width.value) {
+        x = width.value - pos.width;
+        if (x < 0) {
+          w = width.value;
+          x = 0;
+        }
+      }
+      if (pos.y + pos.height > height.value) {
+        y = height.value - pos.height;
+        if (y < 0) {
+          h5 = height.value;
+          y = 0;
+        }
+      }
+      return {
+        x,
+        y,
+        width: w,
+        height: h5
+      };
+    }
     provide(
       SceneToken,
       reactive3({
@@ -1428,7 +1479,9 @@ var FreeDomWrap = defineComponent5({
         width,
         height,
         register,
+        remove,
         checkValid,
+        correct,
         on: eventBus.on,
         off: eventBus.off,
         emit: eventBus.emit

package/package.json

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