@sepveneto/free-dom 0.11.1 → 0.11.3

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1985-FkdDer0n5Q4M/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1881-SB3y5ybBKUrY/core/src/style/index.css */
 :root {
   --vv-free-dom--theme: rgb(64, 137, 239);
   --vv-free-dom--line: var(--vv-free-dom--theme);

package/dist/index.d.ts

@@ -101,14 +101,6 @@ type GridLayoutItem = {
 type GridLayoutConfig = GridLayoutItem[];
 
 declare const FreeScene: vue_demi.DefineComponent<{
-    width: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    height: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     diff: {
         type: NumberConstructor;
         default: number;
@@ -144,10 +136,6 @@ declare const FreeScene: vue_demi.DefineComponent<{
     fixNonMonospaced: BooleanConstructor;
 }, {
     rectRef: vue_demi.ShallowRef<HTMLElement | undefined>;
-    style: vue_demi.ComputedRef<{
-        width: string;
-        height: string;
-    }>;
     selecting: vue_demi.Ref<boolean>;
     mask: {
         selecting: vue_demi.Ref<boolean>;
@@ -166,14 +154,6 @@ declare const FreeScene: vue_demi.DefineComponent<{
         push: (operate: any) => void;
     };
 }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
-    width: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    height: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     diff: {
         type: NumberConstructor;
         default: number;
@@ -209,8 +189,6 @@ declare const FreeScene: vue_demi.DefineComponent<{
     fixNonMonospaced: BooleanConstructor;
 }>>, {
     scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
-    width: number;
-    height: number;
     diff: number;
     showLine: boolean;
     transformScale: number;
@@ -340,7 +318,6 @@ declare const GridLayout: vue_demi.DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    width: number;
     disabledDrag: boolean;
     disabledResize: boolean;
     modelValue: GridLayoutConfig;
@@ -350,6 +327,7 @@ declare const GridLayout: vue_demi.DefineComponent<{
     minW: number;
     minH: number;
     rowHeight: number;
+    width: number;
     margin: number[];
     containerPadding: number[];
     collision: boolean;
@@ -636,8 +614,6 @@ declare const FreeDom: vue_demi.DefineComponent<{
     y: number;
     dragFn: CoreFnCallback;
     scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
-    width: number;
-    height: number;
     transformScale: number;
     keyboard: boolean;
     handle: string;
@@ -653,6 +629,8 @@ declare const FreeDom: vue_demi.DefineComponent<{
         w: number;
         h: number;
     }>;
+    width: number;
+    height: number;
     dragStartFn: CoreFnCallback;
     dragStopFn: CoreFnCallback;
     resizeStartFn: (evt: MouseEvent, resizeData: ResizeData) => void;
@@ -804,11 +782,11 @@ declare const ResizeDomCore: vue_demi.DefineComponent<{
     startFn: ResizeFnCallback;
     stopFn: ResizeFnCallback;
     scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
-    width: number;
-    height: number;
     minWidth: number;
     minHeight: number;
     lockAspectRatio: boolean;
+    width: number;
+    height: number;
     resizeFn: ResizeFnCallback;
     dragOpts: Partial<FreeDomCoreProps>;
 }, {}>;

package/dist/index.js

@@ -1209,7 +1209,8 @@ function useMask(target, nodes) {
       top: startY.value + (height < 0 ? height : 0) + "px",
       left: startX.value + (width < 0 ? width : 0) + "px",
       width: Math.abs(width) + "px",
-      height: Math.abs(height) + "px"
+      height: Math.abs(height) + "px",
+      zIndex: 1
     };
   });
   const selecting = (0, import_vue_demi13.ref)(false);
@@ -1750,8 +1751,6 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
     const canDrag = (0, import_vue_demi17.ref)(false);
     (0, import_vue_demi17.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_demi17.computed)(() => ({
       width: `${width.value}px`,
@@ -1971,14 +1970,6 @@ var freeDom_default = freeDom;
 
 // src/components/freeDomWrap.ts
 var freeDomWrapProps = {
-  width: {
-    type: Number,
-    default: void 0
-  },
-  height: {
-    type: Number,
-    default: void 0
-  },
   diff: {
     type: Number,
     default: 2
@@ -2006,11 +1997,23 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
   props: freeDomWrapProps,
   setup(props) {
     const eventBus = useEventBus();
-    const rectRef = (0, import_vue_demi18.shallowRef)();
     const nodes = (0, import_vue_demi18.ref)([]);
     const history = useOperateHistory(nodes);
-    const width = (0, import_vue_demi18.ref)(props.width);
-    const height = (0, import_vue_demi18.ref)(props.height);
+    const width = (0, import_vue_demi18.ref)(0);
+    const height = (0, import_vue_demi18.ref)(0);
+    const rectRef = (0, import_vue_demi18.shallowRef)();
+    const wrapRect = useElementBounding(rectRef);
+    (0, import_vue_demi18.watch)([
+      wrapRect.width,
+      wrapRect.height,
+      () => nodes.value.length
+    ], ([w, h7]) => {
+      width.value = w;
+      height.value = h7;
+      if (!w || !h7)
+        return;
+      runCorrect();
+    });
     const selectedNodes = (0, import_vue_demi18.computed)(() => nodes.value.filter((node) => node.node.selected));
     eventBus.on("move", (nodeId) => {
       const mainNode = selectedNodes.value.find((node) => node.uuid === nodeId);
@@ -2026,23 +2029,7 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
     });
     const selecting = (0, import_vue_demi18.ref)(false);
     const mask = useMask(rectRef, nodes);
-    (0, import_vue_demi18.watchEffect)(() => {
-      width.value = props.width;
-    });
-    (0, import_vue_demi18.watchEffect)(() => {
-      height.value = props.height;
-    });
-    (0, import_vue_demi18.onMounted)(() => {
-      if (!props.width || !props.height) {
-        if (!rectRef.value)
-          console.warn("[free-dom] cannot find element, width or height may be set to 0");
-        const h7 = rectRef.value?.clientHeight;
-        const w = rectRef.value?.clientWidth;
-        if (!props.width)
-          width.value = w || 0;
-        if (!props.height)
-          height.value = h7 || 0;
-      }
+    function runCorrect() {
       nodes.value.forEach((pos) => {
         const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
         pos.node._rect.x = x;
@@ -2051,7 +2038,7 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
         pos.node._rect.height = height2;
         pos.node.trigger({ x, y, w: width2, h: height2 });
       });
-    });
+    }
     function register(uuid, node) {
       nodes.value.push({
         uuid,
@@ -2064,9 +2051,7 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
     }
     function checkValid(pos) {
       const { x, y, width: w, height: h7 } = pos;
-      return x >= 0 && // @ts-expect-error: trigger after mounted
-      x + w <= width.value && y >= 0 && // @ts-expect-error: trigger after mounted
-      y + h7 <= height.value;
+      return x >= 0 && x + w <= width.value && y >= 0 && y + h7 <= height.value;
     }
     function correct(pos) {
       let x = Math.max(pos.x, 0);
@@ -2117,13 +2102,8 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
         emit: eventBus.emit
       })
     );
-    const style = (0, import_vue_demi18.computed)(() => ({
-      width: `${props.width}px`,
-      height: `${props.height}px`
-    }));
     return {
       rectRef,
-      style,
       selecting,
       mask,
       history
@@ -2141,13 +2121,16 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
       "section",
       {
         ref: "rectRef",
-        class: "vv-free-dom--scene",
-        style: this.style
+        class: "vv-free-dom--scene"
       },
-      {
+      import_vue_demi18.isVue2 ? {} : {
         onMousedown: this.mask.handleMousedown,
         onMousemove: this.mask.handleMousemove
-      }
+      },
+      import_vue_demi18.isVue2 ? {
+        mousedown: this.mask.handleMousedown,
+        mousemove: this.mask.handleMousemove
+      } : {}
     )(slotList);
   }
 });

package/dist/index.mjs

@@ -2,13 +2,13 @@
 import {
   computed as computed11,
   defineComponent as defineComponent6,
-  onMounted as onMounted5,
+  isVue2 as isVue26,
   provide as provide2,
   reactive as reactive5,
   ref as ref13,
   shallowRef as shallowRef6,
   toRefs as toRefs2,
-  watchEffect as watchEffect6
+  watch as watch4
 } from "vue-demi";
 
 // src/util/tokens.ts
@@ -1189,7 +1189,8 @@ function useMask(target, nodes) {
       top: startY.value + (height < 0 ? height : 0) + "px",
       left: startX.value + (width < 0 ? width : 0) + "px",
       width: Math.abs(width) + "px",
-      height: Math.abs(height) + "px"
+      height: Math.abs(height) + "px",
+      zIndex: 1
     };
   });
   const selecting = ref9(false);
@@ -1730,8 +1731,6 @@ var freeDom = defineComponent5({
     const canDrag = ref12(false);
     onMounted4(() => {
       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 = computed10(() => ({
       width: `${width.value}px`,
@@ -1951,14 +1950,6 @@ var freeDom_default = freeDom;
 
 // src/components/freeDomWrap.ts
 var freeDomWrapProps = {
-  width: {
-    type: Number,
-    default: void 0
-  },
-  height: {
-    type: Number,
-    default: void 0
-  },
   diff: {
     type: Number,
     default: 2
@@ -1986,11 +1977,23 @@ var FreeDomWrap = defineComponent6({
   props: freeDomWrapProps,
   setup(props) {
     const eventBus = useEventBus();
-    const rectRef = shallowRef6();
     const nodes = ref13([]);
     const history = useOperateHistory(nodes);
-    const width = ref13(props.width);
-    const height = ref13(props.height);
+    const width = ref13(0);
+    const height = ref13(0);
+    const rectRef = shallowRef6();
+    const wrapRect = useElementBounding(rectRef);
+    watch4([
+      wrapRect.width,
+      wrapRect.height,
+      () => nodes.value.length
+    ], ([w, h7]) => {
+      width.value = w;
+      height.value = h7;
+      if (!w || !h7)
+        return;
+      runCorrect();
+    });
     const selectedNodes = computed11(() => nodes.value.filter((node) => node.node.selected));
     eventBus.on("move", (nodeId) => {
       const mainNode = selectedNodes.value.find((node) => node.uuid === nodeId);
@@ -2006,23 +2009,7 @@ var FreeDomWrap = defineComponent6({
     });
     const selecting = ref13(false);
     const mask = useMask(rectRef, nodes);
-    watchEffect6(() => {
-      width.value = props.width;
-    });
-    watchEffect6(() => {
-      height.value = props.height;
-    });
-    onMounted5(() => {
-      if (!props.width || !props.height) {
-        if (!rectRef.value)
-          console.warn("[free-dom] cannot find element, width or height may be set to 0");
-        const h7 = rectRef.value?.clientHeight;
-        const w = rectRef.value?.clientWidth;
-        if (!props.width)
-          width.value = w || 0;
-        if (!props.height)
-          height.value = h7 || 0;
-      }
+    function runCorrect() {
       nodes.value.forEach((pos) => {
         const { x, y, width: width2, height: height2 } = correct(pos.node._rect);
         pos.node._rect.x = x;
@@ -2031,7 +2018,7 @@ var FreeDomWrap = defineComponent6({
         pos.node._rect.height = height2;
         pos.node.trigger({ x, y, w: width2, h: height2 });
       });
-    });
+    }
     function register(uuid, node) {
       nodes.value.push({
         uuid,
@@ -2044,9 +2031,7 @@ var FreeDomWrap = defineComponent6({
     }
     function checkValid(pos) {
       const { x, y, width: w, height: h7 } = pos;
-      return x >= 0 && // @ts-expect-error: trigger after mounted
-      x + w <= width.value && y >= 0 && // @ts-expect-error: trigger after mounted
-      y + h7 <= height.value;
+      return x >= 0 && x + w <= width.value && y >= 0 && y + h7 <= height.value;
     }
     function correct(pos) {
       let x = Math.max(pos.x, 0);
@@ -2097,13 +2082,8 @@ var FreeDomWrap = defineComponent6({
         emit: eventBus.emit
       })
     );
-    const style = computed11(() => ({
-      width: `${props.width}px`,
-      height: `${props.height}px`
-    }));
     return {
       rectRef,
-      style,
       selecting,
       mask,
       history
@@ -2121,13 +2101,16 @@ var FreeDomWrap = defineComponent6({
       "section",
       {
         ref: "rectRef",
-        class: "vv-free-dom--scene",
-        style: this.style
+        class: "vv-free-dom--scene"
       },
-      {
+      isVue26 ? {} : {
         onMousedown: this.mask.handleMousedown,
         onMousemove: this.mask.handleMousemove
-      }
+      },
+      isVue26 ? {
+        mousedown: this.mask.handleMousedown,
+        mousemove: this.mask.handleMousemove
+      } : {}
     )(slotList);
   }
 });

package/package.json

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