@sepveneto/free-dom 0.4.0-beta.0 → 0.4.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1773-CH54J03asN0x/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1800-oTeH5e7LtwVq/core/src/style/index.css */
 :root {
   --free-dom-theme: #4089ef;
   --free-dom-line: var(--free-dom-theme);
@@ -23,7 +23,6 @@
 }
 .free-dom__widget-wrapper {
   display: inline-block;
-  box-sizing: border-box;
   border: 1px dashed transparent;
   transition: border-color 0.3s;
   box-sizing: content-box;

package/dist/index.d.ts

@@ -47,6 +47,14 @@ declare const freeDom: vue_demi.DefineComponent<{
         type: vue_demi.PropType<[number, number]>;
         default: undefined;
     };
+    onDragStart: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+    onDragEnd: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
 }, {
     widgetRef: vue_demi.ShallowRef<any>;
     canMove: vue_demi.ComputedRef<boolean>;
@@ -109,6 +117,14 @@ declare const freeDom: vue_demi.DefineComponent<{
         type: vue_demi.PropType<[number, number]>;
         default: undefined;
     };
+    onDragStart: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+    onDragEnd: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
 }>> & {
     "onUpdate:x"?: ((...args: any[]) => any) | undefined;
     "onUpdate:y"?: ((...args: any[]) => any) | undefined;
@@ -129,6 +145,8 @@ declare const freeDom: vue_demi.DefineComponent<{
     handler: "dot" | "mark";
     diagonal: boolean;
     grid: [number, number];
+    onDragStart: Function;
+    onDragEnd: Function;
 }>;
 declare const freeScene: vue_demi.DefineComponent<{
     absolute: {

package/dist/index.js

@@ -189,6 +189,14 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
     grid: {
       type: Object,
       default: void 0
+    },
+    onDragStart: {
+      type: Function,
+      default: void 0
+    },
+    onDragEnd: {
+      type: Function,
+      default: void 0
     }
   },
   emits: ["update:x", "update:y", "update:width", "update:height", "select"],
@@ -275,6 +283,9 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         return;
       isScale.value = true;
       active.value = true;
+      const shouldUpdate = props.onDragStart?.();
+      if (shouldUpdate === false)
+        return;
       const { clientX, clientY } = evt;
       useResize(clientX, clientY, _rect, dot, diagonal.value, snapGrid.value, {
         onMove() {
@@ -284,6 +295,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
           trigger();
         },
         onUp() {
+          props.onDragEnd?.();
           isScale.value = false;
           EventBus.emit("moveup", uuid);
           emitPos();
@@ -328,6 +340,9 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         return;
       isMove.value = true;
       active.value = true;
+      const shouldUpdate = props.onDragStart?.();
+      if (shouldUpdate === false)
+        return;
       const pos = getStyle(_style.value);
       const move = (mouseEvt) => {
         const { clientX, clientY } = mouseEvt;
@@ -343,6 +358,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         trigger();
       };
       const up = () => {
+        props.onDragEnd?.();
         isMove.value = false;
         EventBus.emit("moveup", uuid);
         document.removeEventListener("mousemove", move);
@@ -416,25 +432,10 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         onMousedown: (evt) => this.onMousedownDot(evt, dot)
       });
     }) : null;
-    const defaultSlots = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
-    if (!defaultSlots) {
-      console.error("[free-dom] must have a default slot");
-      return null;
-    }
-    if (defaultSlots.length > 1) {
-      console.error("[free-dom] must have only one default slot");
-      return null;
-    }
-    const defaultSlot = defaultSlots[0];
-    const node = (0, import_vue_demi2.cloneVNode)(defaultSlot);
-    if (Array.isArray(node.children)) {
-      node.children = [...node.children, ...dots];
-    } else {
-      console.error("[free-dom] generate resiable handles failed");
-    }
+    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
     if (import_vue_demi2.isVue2) {
       return (0, import_vue_demi2.h)(
-        node,
+        "section",
         {
           class: [
             "free-dom__widget-wrapper",
@@ -448,11 +449,12 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
           on: {
             mousedown: this.onMousedown
           }
-        }
+        },
+        [dots, defaultSlot]
       );
     }
     return (0, import_vue_demi2.h)(
-      node,
+      "section",
       {
         ref: "widgetRef",
         class: [
@@ -464,7 +466,8 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         ],
         style: this.wrapStyle,
         onMousedown: this.onMousedown
-      }
+      },
+      [defaultSlot, dots]
     );
   }
 });

package/dist/index.mjs

@@ -17,8 +17,7 @@ import {
   reactive,
   isVue2,
   shallowRef,
-  watchEffect,
-  cloneVNode
+  watchEffect
 } from "vue-demi";
 
 // src/hooks/use-normalize-style.ts
@@ -177,6 +176,14 @@ var FreeDom = defineComponent({
     grid: {
       type: Object,
       default: void 0
+    },
+    onDragStart: {
+      type: Function,
+      default: void 0
+    },
+    onDragEnd: {
+      type: Function,
+      default: void 0
     }
   },
   emits: ["update:x", "update:y", "update:width", "update:height", "select"],
@@ -263,6 +270,9 @@ var FreeDom = defineComponent({
         return;
       isScale.value = true;
       active.value = true;
+      const shouldUpdate = props.onDragStart?.();
+      if (shouldUpdate === false)
+        return;
       const { clientX, clientY } = evt;
       useResize(clientX, clientY, _rect, dot, diagonal.value, snapGrid.value, {
         onMove() {
@@ -272,6 +282,7 @@ var FreeDom = defineComponent({
           trigger();
         },
         onUp() {
+          props.onDragEnd?.();
           isScale.value = false;
           EventBus.emit("moveup", uuid);
           emitPos();
@@ -316,6 +327,9 @@ var FreeDom = defineComponent({
         return;
       isMove.value = true;
       active.value = true;
+      const shouldUpdate = props.onDragStart?.();
+      if (shouldUpdate === false)
+        return;
       const pos = getStyle(_style.value);
       const move = (mouseEvt) => {
         const { clientX, clientY } = mouseEvt;
@@ -331,6 +345,7 @@ var FreeDom = defineComponent({
         trigger();
       };
       const up = () => {
+        props.onDragEnd?.();
         isMove.value = false;
         EventBus.emit("moveup", uuid);
         document.removeEventListener("mousemove", move);
@@ -404,25 +419,10 @@ var FreeDom = defineComponent({
         onMousedown: (evt) => this.onMousedownDot(evt, dot)
       });
     }) : null;
-    const defaultSlots = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
-    if (!defaultSlots) {
-      console.error("[free-dom] must have a default slot");
-      return null;
-    }
-    if (defaultSlots.length > 1) {
-      console.error("[free-dom] must have only one default slot");
-      return null;
-    }
-    const defaultSlot = defaultSlots[0];
-    const node = cloneVNode(defaultSlot);
-    if (Array.isArray(node.children)) {
-      node.children = [...node.children, ...dots];
-    } else {
-      console.error("[free-dom] generate resiable handles failed");
-    }
+    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
     if (isVue2) {
       return h(
-        node,
+        "section",
         {
           class: [
             "free-dom__widget-wrapper",
@@ -436,11 +436,12 @@ var FreeDom = defineComponent({
           on: {
             mousedown: this.onMousedown
           }
-        }
+        },
+        [dots, defaultSlot]
       );
     }
     return h(
-      node,
+      "section",
       {
         ref: "widgetRef",
         class: [
@@ -452,7 +453,8 @@ var FreeDom = defineComponent({
         ],
         style: this.wrapStyle,
         onMousedown: this.onMousedown
-      }
+      },
+      [defaultSlot, dots]
     );
   }
 });

package/package.json

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