@sepveneto/free-dom 0.7.4 → 0.9.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1908-q9UqIZsteSO4/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.d.ts

@@ -113,6 +113,10 @@ declare const FreeScene: vue_demi.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    handle: {
+        type: StringConstructor;
+        default: undefined;
+    };
     minWidth: {
         type: NumberConstructor;
         default: number;
@@ -155,6 +159,10 @@ declare const FreeScene: vue_demi.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    handle: {
+        type: StringConstructor;
+        default: undefined;
+    };
     minWidth: {
         type: NumberConstructor;
         default: number;
@@ -176,6 +184,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
     height: number;
     diff: number;
     showLine: boolean;
+    handle: string;
     minWidth: number;
     minHeight: number;
     lockAspectRatio: boolean;
@@ -341,6 +350,10 @@ declare const FreeDom: vue_demi.DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    handle: {
+        type: StringConstructor;
+        default: undefined;
+    };
     lockAspectRatio: BooleanConstructor;
     dragStartFn: {
         type: vue_demi.PropType<CoreFnCallback>;
@@ -350,7 +363,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
         type: vue_demi.PropType<CoreFnCallback>;
         default: () => void;
     };
-    dargFn: {
+    dragFn: {
         type: vue_demi.PropType<CoreFnCallback>;
         default: () => void;
     };
@@ -538,6 +551,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
     }>;
     onDragStop: CoreFnCallback;
     onDrag: CoreFnCallback;
+    onDragStart: CoreFnCallback;
     resizeNode: () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
         [key: string]: any;
     }>;
@@ -568,6 +582,10 @@ declare const FreeDom: vue_demi.DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    handle: {
+        type: StringConstructor;
+        default: undefined;
+    };
     lockAspectRatio: BooleanConstructor;
     dragStartFn: {
         type: vue_demi.PropType<CoreFnCallback>;
@@ -577,7 +595,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
         type: vue_demi.PropType<CoreFnCallback>;
         default: () => void;
     };
-    dargFn: {
+    dragFn: {
         type: vue_demi.PropType<CoreFnCallback>;
         default: () => void;
     };
@@ -621,8 +639,10 @@ declare const FreeDom: vue_demi.DefineComponent<{
 }, {
     x: number;
     y: number;
+    dragFn: CoreFnCallback;
     width: number;
     height: number;
+    handle: string;
     minWidth: number;
     minHeight: number;
     lockAspectRatio: boolean;
@@ -638,7 +658,6 @@ declare const FreeDom: vue_demi.DefineComponent<{
     }>;
     dragStartFn: CoreFnCallback;
     dragStopFn: CoreFnCallback;
-    dargFn: CoreFnCallback;
     resizeStartFn: (evt: MouseEvent, resizeData: ResizeData) => void;
     resizeFn: (evt: MouseEvent, resizeData: ResizeData) => void;
     resizeStopFn: (evt: MouseEvent, resizeData: ResizeData) => void;

package/dist/index.js

@@ -314,12 +314,15 @@ function useDraggableData(props) {
   (0, import_vue_demi6.watchEffect)(() => {
     y.value = props.y || props.modelValue.y || 0;
   });
+  const handleDragStart = (evt, data) => {
+    props.dragStartFn(evt, data);
+  };
   const handleDrag = (evt, data) => {
     x.value = data.x;
     y.value = data.y;
     deltaX.value = data.deltaX;
     deltaY.value = data.deltaY;
-    props.dargFn(evt, data);
+    props.dragFn(evt, data);
   };
   const handleDragStop = (evt, coreData) => {
     const data = dragData.value = create(coreData);
@@ -342,6 +345,7 @@ function useDraggableData(props) {
     deltaX,
     deltaY,
     create,
+    handleDragStart,
     handleDrag,
     handleDragStop
   };
@@ -353,6 +357,7 @@ var id = 0;
 function useSceneContext(context, props) {
   const SceneContext = (0, import_vue_demi7.inject)(SceneToken, void 0);
   const uuid = id++;
+  const handle = (0, import_vue_demi7.computed)(() => SceneContext?.handle || props.handle);
   const lockAspectRatio = (0, import_vue_demi7.computed)(() => SceneContext?.lockAspectRatio || props.lockAspectRatio);
   const minWidth = (0, import_vue_demi7.computed)(() => SceneContext?.minWidth || props.minWidth);
   const minHeight = (0, import_vue_demi7.computed)(() => SceneContext?.minHeight || props.minHeight);
@@ -365,17 +370,27 @@ 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,
+    handle,
     lockAspectRatio,
     minWidth,
     minHeight,
@@ -1149,6 +1164,10 @@ var freeDomProps = {
     type: Number,
     default: void 0
   },
+  handle: {
+    type: String,
+    default: void 0
+  },
   lockAspectRatio: Boolean,
   dragStartFn: {
     type: Function,
@@ -1158,7 +1177,7 @@ var freeDomProps = {
     type: Function,
     default: noop3
   },
-  dargFn: {
+  dragFn: {
     type: Function,
     default: noop3
   },
@@ -1203,6 +1222,7 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       deltaX,
       deltaY,
       create,
+      handleDragStart,
       handleDrag,
       handleDragStop
     } = useDraggableData(props);
@@ -1216,7 +1236,8 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
         deltaX,
         deltaY
       }),
-      trigger: () => {
+      trigger: (pos) => {
+        emit("update:modelValue", pos);
       }
     };
     const sceneContext = useSceneContext(context, props);
@@ -1227,8 +1248,11 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
         sceneContext.minHeight.value
       );
     };
+    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",
@@ -1237,6 +1261,8 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       transform: `translate(${x.value}px, ${y.value}px)`
     }));
     const onDrag = (evt, coreData) => {
+      if (!canDrag.value)
+        return;
       const data = create(coreData);
       const newPos = {
         x: data.x,
@@ -1251,6 +1277,8 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       sceneContext.emit("move");
     };
     const onDragStop = (evt, coreData) => {
+      if (!canDrag.value)
+        return;
       const newPos = {
         x: x.value,
         y: y.value,
@@ -1268,6 +1296,22 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       emit("update:y", y.value);
       emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
     };
+    const onDragStart = (evt, coreData) => {
+      const handle = sceneContext.handle.value;
+      if (handle) {
+        if (handle.startsWith(".")) {
+          canDrag.value = evt.target.classList.contains(handle.slice(1));
+        } else if (handle.startsWith("#")) {
+          canDrag.value = evt.target.id === handle.slice(1);
+        } else {
+          console.warn(`[free-dom] can not find element with ${handle}`);
+          canDrag.value = true;
+        }
+      } else {
+        canDrag.value = true;
+      }
+      canDrag.value && handleDragStart(evt, coreData);
+    };
     const onResize = (evt, { node, width: w, height: h5, handle: axis }) => {
       const offsetW = -(w - width.value);
       const offsetH = -(h5 - height.value);
@@ -1291,23 +1335,28 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       props.resizeFn(evt, { node, width: w, height: h5, handle: axis });
       sceneContext?.emit("move");
     };
-    const onResizeStop = () => {
+    const onResizeStop = (evt, data) => {
       const isValid = sceneContext.check?.({ x: x.value, y: y.value, width: width.value, height: height.value });
       if (!isValid) {
         x.value = clamp(x.value, 0, sceneContext.width);
         y.value = clamp(y.value, 0, sceneContext.height);
       }
+      props.resizeStopFn(evt, data);
       emit("update:width", width.value);
       emit("update:height", height.value);
       emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
       sceneContext.emit("moveup");
     };
+    const onResizeStart = (evt, data) => {
+      props.resizeStartFn(evt, data);
+    };
     const resizeNode = () => {
       const props2 = {
         width: width.value,
         height: height.value,
         lockAspectRatio: sceneContext.lockAspectRatio.value,
         dragOpts: { disabled: sceneContext.disabledResize.value },
+        startFn: onResizeStart,
         resizeFn: onResize,
         stopFn: onResizeStop,
         minHeight: sceneContext.minHeight.value,
@@ -1324,12 +1373,14 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       style,
       onDragStop,
       onDrag,
+      onDragStart,
       resizeNode,
       disabled: sceneContext.disabledDrag
     };
   },
   render() {
     const props = {
+      startFn: this.onDragStart,
       stopFn: this.onDragStop,
       dragFn: this.onDrag,
       disabled: this.disabled
@@ -1366,6 +1417,7 @@ var freeDomWrapProps = {
     type: Boolean,
     default: true
   },
+  handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
   lockAspectRatio: freeDomProps.lockAspectRatio,
@@ -1394,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)({
@@ -1418,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

@@ -284,12 +284,15 @@ function useDraggableData(props) {
   watchEffect(() => {
     y.value = props.y || props.modelValue.y || 0;
   });
+  const handleDragStart = (evt, data) => {
+    props.dragStartFn(evt, data);
+  };
   const handleDrag = (evt, data) => {
     x.value = data.x;
     y.value = data.y;
     deltaX.value = data.deltaX;
     deltaY.value = data.deltaY;
-    props.dargFn(evt, data);
+    props.dragFn(evt, data);
   };
   const handleDragStop = (evt, coreData) => {
     const data = dragData.value = create(coreData);
@@ -312,17 +315,19 @@ function useDraggableData(props) {
     deltaX,
     deltaY,
     create,
+    handleDragStart,
     handleDrag,
     handleDragStop
   };
 }
 
 // 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);
   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);
@@ -335,17 +340,27 @@ 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,
+    handle,
     lockAspectRatio,
     minWidth,
     minHeight,
@@ -794,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 = {
@@ -828,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)
@@ -1119,6 +1134,10 @@ var freeDomProps = {
     type: Number,
     default: void 0
   },
+  handle: {
+    type: String,
+    default: void 0
+  },
   lockAspectRatio: Boolean,
   dragStartFn: {
     type: Function,
@@ -1128,7 +1147,7 @@ var freeDomProps = {
     type: Function,
     default: noop3
   },
-  dargFn: {
+  dragFn: {
     type: Function,
     default: noop3
   },
@@ -1173,6 +1192,7 @@ var freeDom = defineComponent4({
       deltaX,
       deltaY,
       create,
+      handleDragStart,
       handleDrag,
       handleDragStop
     } = useDraggableData(props);
@@ -1186,7 +1206,8 @@ var freeDom = defineComponent4({
         deltaX,
         deltaY
       }),
-      trigger: () => {
+      trigger: (pos) => {
+        emit("update:modelValue", pos);
       }
     };
     const sceneContext = useSceneContext(context, props);
@@ -1197,8 +1218,11 @@ var freeDom = defineComponent4({
         sceneContext.minHeight.value
       );
     };
+    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",
@@ -1207,6 +1231,8 @@ var freeDom = defineComponent4({
       transform: `translate(${x.value}px, ${y.value}px)`
     }));
     const onDrag = (evt, coreData) => {
+      if (!canDrag.value)
+        return;
       const data = create(coreData);
       const newPos = {
         x: data.x,
@@ -1221,6 +1247,8 @@ var freeDom = defineComponent4({
       sceneContext.emit("move");
     };
     const onDragStop = (evt, coreData) => {
+      if (!canDrag.value)
+        return;
       const newPos = {
         x: x.value,
         y: y.value,
@@ -1238,6 +1266,22 @@ var freeDom = defineComponent4({
       emit("update:y", y.value);
       emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
     };
+    const onDragStart = (evt, coreData) => {
+      const handle = sceneContext.handle.value;
+      if (handle) {
+        if (handle.startsWith(".")) {
+          canDrag.value = evt.target.classList.contains(handle.slice(1));
+        } else if (handle.startsWith("#")) {
+          canDrag.value = evt.target.id === handle.slice(1);
+        } else {
+          console.warn(`[free-dom] can not find element with ${handle}`);
+          canDrag.value = true;
+        }
+      } else {
+        canDrag.value = true;
+      }
+      canDrag.value && handleDragStart(evt, coreData);
+    };
     const onResize = (evt, { node, width: w, height: h5, handle: axis }) => {
       const offsetW = -(w - width.value);
       const offsetH = -(h5 - height.value);
@@ -1261,23 +1305,28 @@ var freeDom = defineComponent4({
       props.resizeFn(evt, { node, width: w, height: h5, handle: axis });
       sceneContext?.emit("move");
     };
-    const onResizeStop = () => {
+    const onResizeStop = (evt, data) => {
       const isValid = sceneContext.check?.({ x: x.value, y: y.value, width: width.value, height: height.value });
       if (!isValid) {
         x.value = clamp(x.value, 0, sceneContext.width);
         y.value = clamp(y.value, 0, sceneContext.height);
       }
+      props.resizeStopFn(evt, data);
       emit("update:width", width.value);
       emit("update:height", height.value);
       emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
       sceneContext.emit("moveup");
     };
+    const onResizeStart = (evt, data) => {
+      props.resizeStartFn(evt, data);
+    };
     const resizeNode = () => {
       const props2 = {
         width: width.value,
         height: height.value,
         lockAspectRatio: sceneContext.lockAspectRatio.value,
         dragOpts: { disabled: sceneContext.disabledResize.value },
+        startFn: onResizeStart,
         resizeFn: onResize,
         stopFn: onResizeStop,
         minHeight: sceneContext.minHeight.value,
@@ -1294,12 +1343,14 @@ var freeDom = defineComponent4({
       style,
       onDragStop,
       onDrag,
+      onDragStart,
       resizeNode,
       disabled: sceneContext.disabledDrag
     };
   },
   render() {
     const props = {
+      startFn: this.onDragStart,
       stopFn: this.onDragStop,
       dragFn: this.onDrag,
       disabled: this.disabled
@@ -1336,6 +1387,7 @@ var freeDomWrapProps = {
     type: Boolean,
     default: true
   },
+  handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
   lockAspectRatio: freeDomProps.lockAspectRatio,
@@ -1364,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({
@@ -1388,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.7.4",
+  "version": "0.9.0",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",