@sepveneto/free-dom 0.8.0 → 0.9.1

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1883-O1p5mboxRMKz/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1888-2C7SiiG2SRG2/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

@@ -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);
     const nodes = SceneContext.nodes;
     const lineStatus = (0, import_vue_demi2.reactive)({
       xt: {
@@ -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

@@ -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);
     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,32 +322,41 @@ function useDraggableData(props) {
 }
 
 // src/hooks/use-scene-context.ts
-import { computed as computed2, inject as inject2, onMounted } 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 fixNonMonospaced = computed3(() => {
     return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
   });
   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,
@@ -362,9 +371,9 @@ function useSceneContext(context, props) {
 }
 
 // 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];
@@ -387,10 +396,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();
   });
@@ -423,22 +432,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);
   }
@@ -673,46 +682,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`,
@@ -797,10 +806,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, 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 = {
@@ -827,14 +836,14 @@ var freeDomCore = defineComponent2({
   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;
-    onUnmounted(() => {
+    onUnmounted2(() => {
       if (!ownerDoc.value)
         return;
       if (props.userSelectHack)
@@ -960,7 +969,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() {
 }
@@ -1008,7 +1017,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;
     });
@@ -1176,7 +1185,7 @@ var freeDom = defineComponent4({
     "update:modelValue"
   ],
   setup(props, { emit, expose, slots }) {
-    const domRef = ref9();
+    const domRef = ref8();
     const {
       x,
       y,
@@ -1197,7 +1206,8 @@ var freeDom = defineComponent4({
         deltaX,
         deltaY
       }),
-      trigger: () => {
+      trigger: (pos) => {
+        emit("update:modelValue", pos);
       }
     };
     const sceneContext = useSceneContext(context, props);
@@ -1208,11 +1218,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(() => ({
+    const style = computed7(() => ({
       position: "absolute",
       width: `${width.value}px`,
       height: `${height.value}px`,
@@ -1391,9 +1403,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;
     });
@@ -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,13 +1479,15 @@ var FreeDomWrap = defineComponent5({
         width,
         height,
         register,
+        remove,
         checkValid,
+        correct,
         on: eventBus.on,
         off: eventBus.off,
         emit: eventBus.emit
       })
     );
-    const style = computed7(() => ({
+    const style = computed8(() => ({
       width: `${props.width}px`,
       height: `${props.height}px`
     }));
@@ -1459,7 +1512,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";
@@ -1657,7 +1710,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.8.0",
+  "version": "0.9.1",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",