@sepveneto/free-dom 0.7.3 → 0.8.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1856-S6Jzdx5ptFBo/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,11 +658,159 @@ 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;
     autoSize: boolean;
 }, {}>;
+declare const FreeDomCore: vue_demi.DefineComponent<{
+    userSelectHack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    startFn: {
+        type: vue_demi.PropType<CoreFnCallback>;
+        default: () => void;
+    };
+    stopFn: {
+        type: vue_demi.PropType<CoreFnCallback>;
+        default: () => void;
+    };
+    dragFn: {
+        type: vue_demi.PropType<CoreFnCallback>;
+        default: () => void;
+    };
+    disabled: BooleanConstructor;
+}, {
+    only: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        [key: string]: any;
+    }> | undefined>;
+    coreRef: vue_demi.Ref<any>;
+    mousedownFn: (evt: MouseEvent) => void;
+    mouseupFn: (evt: MouseEvent) => void;
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    userSelectHack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    startFn: {
+        type: vue_demi.PropType<CoreFnCallback>;
+        default: () => void;
+    };
+    stopFn: {
+        type: vue_demi.PropType<CoreFnCallback>;
+        default: () => void;
+    };
+    dragFn: {
+        type: vue_demi.PropType<CoreFnCallback>;
+        default: () => void;
+    };
+    disabled: BooleanConstructor;
+}>>, {
+    userSelectHack: boolean;
+    startFn: CoreFnCallback;
+    stopFn: CoreFnCallback;
+    dragFn: CoreFnCallback;
+    disabled: boolean;
+}, {}>;
+declare const ResizeDomCore: vue_demi.DefineComponent<{
+    dragOpts: {
+        type: vue_demi.PropType<Partial<FreeDomCoreProps>>;
+        default: () => {};
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    scale: {
+        type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
+        default: undefined;
+    };
+    startFn: {
+        type: vue_demi.PropType<ResizeFnCallback>;
+        default: () => void;
+    };
+    stopFn: {
+        type: vue_demi.PropType<ResizeFnCallback>;
+        default: () => void;
+    };
+    resizeFn: {
+        type: vue_demi.PropType<ResizeFnCallback>;
+        default: () => void;
+    };
+    minWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lockAspectRatio: BooleanConstructor;
+}, {
+    dots: vue_demi.ComputedRef<readonly ["t", "r", "l", "b", "lt", "lb", "rt", "rb"] | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
+    children: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        [key: string]: any;
+    }>[] | undefined>;
+    handleResize: (handleName: "resize" | "start" | "stop", axis: "t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb") => CoreFnCallback;
+    renderResizehandler: (axis: "t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb") => (() => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        [key: string]: any;
+    }>) | (() => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+        [key: string]: any;
+    }>[] | undefined);
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    dragOpts: {
+        type: vue_demi.PropType<Partial<FreeDomCoreProps>>;
+        default: () => {};
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    scale: {
+        type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
+        default: undefined;
+    };
+    startFn: {
+        type: vue_demi.PropType<ResizeFnCallback>;
+        default: () => void;
+    };
+    stopFn: {
+        type: vue_demi.PropType<ResizeFnCallback>;
+        default: () => void;
+    };
+    resizeFn: {
+        type: vue_demi.PropType<ResizeFnCallback>;
+        default: () => void;
+    };
+    minWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lockAspectRatio: BooleanConstructor;
+}>>, {
+    startFn: ResizeFnCallback;
+    stopFn: ResizeFnCallback;
+    width: number;
+    height: number;
+    minWidth: number;
+    minHeight: number;
+    lockAspectRatio: boolean;
+    scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
+    resizeFn: ResizeFnCallback;
+    dragOpts: Partial<FreeDomCoreProps>;
+}, {}>;
 
-export { FreeDom, FreeScene, GridLayout };
+export { FreeDom, FreeDomCore, FreeScene, GridLayout, ResizeDomCore };

package/dist/index.js

@@ -21,8 +21,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   FreeDom: () => FreeDom,
+  FreeDomCore: () => FreeDomCore,
   FreeScene: () => FreeScene,
-  GridLayout: () => GridLayout2
+  GridLayout: () => GridLayout2,
+  ResizeDomCore: () => ResizeDomCore
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -312,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);
@@ -340,6 +345,7 @@ function useDraggableData(props) {
     deltaX,
     deltaY,
     create,
+    handleDragStart,
     handleDrag,
     handleDragStop
   };
@@ -351,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);
@@ -374,6 +381,7 @@ function useSceneContext(context, props) {
     width: SceneContext?.width,
     height: SceneContext?.height,
     scale,
+    handle,
     lockAspectRatio,
     minWidth,
     minHeight,
@@ -1147,6 +1155,10 @@ var freeDomProps = {
     type: Number,
     default: void 0
   },
+  handle: {
+    type: String,
+    default: void 0
+  },
   lockAspectRatio: Boolean,
   dragStartFn: {
     type: Function,
@@ -1156,7 +1168,7 @@ var freeDomProps = {
     type: Function,
     default: noop3
   },
-  dargFn: {
+  dragFn: {
     type: Function,
     default: noop3
   },
@@ -1201,6 +1213,7 @@ var freeDom = (0, import_vue_demi13.defineComponent)({
       deltaX,
       deltaY,
       create,
+      handleDragStart,
       handleDrag,
       handleDragStop
     } = useDraggableData(props);
@@ -1225,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();
     });
@@ -1235,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,
@@ -1249,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,
@@ -1266,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);
@@ -1289,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,
@@ -1322,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
@@ -1364,6 +1405,7 @@ var freeDomWrapProps = {
     type: Boolean,
     default: true
   },
+  handle: freeDomProps.handle,
   minWidth: freeDomProps.minWidth,
   minHeight: freeDomProps.minHeight,
   lockAspectRatio: freeDomProps.lockAspectRatio,
@@ -1745,9 +1787,13 @@ var gridLayout_default = GridLayout;
 var FreeScene = FreeDomWrap;
 var GridLayout2 = gridLayout_default;
 var FreeDom = freeDom_default;
+var FreeDomCore = freeDomCore_default;
+var ResizeDomCore = resizeDomCore_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FreeDom,
+  FreeDomCore,
   FreeScene,
-  GridLayout
+  GridLayout,
+  ResizeDomCore
 });

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,
@@ -1717,8 +1757,12 @@ var gridLayout_default = GridLayout;
 var FreeScene = FreeDomWrap;
 var GridLayout2 = gridLayout_default;
 var FreeDom = freeDom_default;
+var FreeDomCore = freeDomCore_default;
+var ResizeDomCore = resizeDomCore_default;
 export {
   FreeDom,
+  FreeDomCore,
   FreeScene,
-  GridLayout2 as GridLayout
+  GridLayout2 as GridLayout,
+  ResizeDomCore
 };

package/package.json

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