@sepveneto/free-dom 0.7.4 → 0.8.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1908-q9UqIZsteSO4/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1883-O1p5mboxRMKz/core/src/style/index.css */
 :root {
   --vv-free-dom--theme: #4089ef;
   --vv-free-dom--line: var(--vv-free-dom--theme);

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);
@@ -376,6 +381,7 @@ function useSceneContext(context, props) {
     width: SceneContext?.width,
     height: SceneContext?.height,
     scale,
+    handle,
     lockAspectRatio,
     minWidth,
     minHeight,
@@ -1149,6 +1155,10 @@ var freeDomProps = {
     type: Number,
     default: void 0
   },
+  handle: {
+    type: String,
+    default: void 0
+  },
   lockAspectRatio: Boolean,
   dragStartFn: {
     type: Function,
@@ -1158,7 +1168,7 @@ var freeDomProps = {
     type: Function,
     default: noop3
   },
-  dargFn: {
+  dragFn: {
     type: Function,
     default: noop3
   },
@@ -1203,6 +1213,7 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       deltaX,
       deltaY,
       create,
+      handleDragStart,
       handleDrag,
       handleDragStop
     } = useDraggableData(props);
@@ -1227,6 +1238,7 @@ 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();
     });
@@ -1237,6 +1249,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 +1265,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 +1284,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 +1323,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 +1361,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 +1405,7 @@ var freeDomWrapProps = {
     type: Boolean,
     default: true
   },
+  handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
   lockAspectRatio: freeDomProps.lockAspectRatio,

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,6 +315,7 @@ function useDraggableData(props) {
     deltaX,
     deltaY,
     create,
+    handleDragStart,
     handleDrag,
     handleDragStop
   };
@@ -323,6 +327,7 @@ 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);
@@ -346,6 +351,7 @@ function useSceneContext(context, props) {
     width: SceneContext?.width,
     height: SceneContext?.height,
     scale,
+    handle,
     lockAspectRatio,
     minWidth,
     minHeight,
@@ -1119,6 +1125,10 @@ var freeDomProps = {
     type: Number,
     default: void 0
   },
+  handle: {
+    type: String,
+    default: void 0
+  },
   lockAspectRatio: Boolean,
   dragStartFn: {
     type: Function,
@@ -1128,7 +1138,7 @@ var freeDomProps = {
     type: Function,
     default: noop3
   },
-  dargFn: {
+  dragFn: {
     type: Function,
     default: noop3
   },
@@ -1173,6 +1183,7 @@ var freeDom = defineComponent4({
       deltaX,
       deltaY,
       create,
+      handleDragStart,
       handleDrag,
       handleDragStop
     } = useDraggableData(props);
@@ -1197,6 +1208,7 @@ var freeDom = defineComponent4({
         sceneContext.minHeight.value
       );
     };
+    const canDrag = ref9(false);
     onMounted2(() => {
       props.autoSize && syncSize();
     });
@@ -1207,6 +1219,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 +1235,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 +1254,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 +1293,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 +1331,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 +1375,7 @@ var freeDomWrapProps = {
     type: Boolean,
     default: true
   },
+  handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
   lockAspectRatio: freeDomProps.lockAspectRatio,

package/package.json

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