@sepveneto/free-dom 0.14.4 → 0.14.5

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1868-izUYPQak4pI8/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-2007-pV5QZ04PRQu3/core/src/style/index.css */
 :root {
   --vv-free-dom--theme: rgb(64, 137, 239);
   --vv-free-dom--line: var(--vv-free-dom--theme);
@@ -21,8 +21,7 @@
 .vv-free-dom--draggable__disabled {
   cursor: initial;
 }
-.vv-free-dom--draggable__mask.vv-free-dom--draggable__selected::after,
-.vv-free-dom--draggable__mask.vv-free-dom--draggable__selected:focus-visible {
+.vv-free-dom--draggable__mask.vv-free-dom--draggable__selected::after {
   content: "";
   z-index: 1;
   display: block;
@@ -32,10 +31,9 @@
   top: 0;
   left: 0;
   background: var(--vv-free-dom--selected);
-  outline: 2px dashed var(--vv-free-dom--theme);
+  border: 2px dashed var(--vv-free-dom--theme);
 }
-.vv-free-dom--draggable__mask.vv-free-dom--draggable__selected::after::selection,
-.vv-free-dom--draggable__mask.vv-free-dom--draggable__selected:focus-visible::selection {
+.vv-free-dom--draggable__mask.vv-free-dom--draggable__selected::after::selection {
   background-color: transparent !important;
 }
 .vv-free-dom--line {

package/dist/index.js

@@ -179,11 +179,11 @@ var require_common = __commonJS({
         let enableOverride = null;
         let namespacesCache;
         let enabledCache;
-        function debug3(...args) {
-          if (!debug3.enabled) {
+        function debug2(...args) {
+          if (!debug2.enabled) {
             return;
           }
-          const self2 = debug3;
+          const self2 = debug2;
           const curr = Number(/* @__PURE__ */ new Date());
           const ms = curr - (prevTime || curr);
           self2.diff = ms;
@@ -213,12 +213,12 @@ var require_common = __commonJS({
           const logFn = self2.log || createDebug.log;
           logFn.apply(self2, args);
         }
-        debug3.namespace = namespace;
-        debug3.useColors = createDebug.useColors();
-        debug3.color = createDebug.selectColor(namespace);
-        debug3.extend = extend;
-        debug3.destroy = createDebug.destroy;
-        Object.defineProperty(debug3, "enabled", {
+        debug2.namespace = namespace;
+        debug2.useColors = createDebug.useColors();
+        debug2.color = createDebug.selectColor(namespace);
+        debug2.extend = extend;
+        debug2.destroy = createDebug.destroy;
+        Object.defineProperty(debug2, "enabled", {
           enumerable: true,
           configurable: false,
           get: () => {
@@ -236,9 +236,9 @@ var require_common = __commonJS({
           }
         });
         if (typeof createDebug.init === "function") {
-          createDebug.init(debug3);
+          createDebug.init(debug2);
         }
-        return debug3;
+        return debug2;
       }
       function extend(namespace, delimiter) {
         const newDebug = createDebug(this.namespace + (typeof delimiter === "undefined" ? ":" : delimiter) + namespace);
@@ -763,11 +763,11 @@ var require_node = __commonJS({
     function load() {
       return process.env.DEBUG;
     }
-    function init(debug3) {
-      debug3.inspectOpts = {};
+    function init(debug2) {
+      debug2.inspectOpts = {};
       const keys = Object.keys(exports.inspectOpts);
       for (let i = 0; i < keys.length; i++) {
-        debug3.inspectOpts[keys[i]] = exports.inspectOpts[keys[i]];
+        debug2.inspectOpts[keys[i]] = exports.inspectOpts[keys[i]];
       }
     }
     module2.exports = require_common()(exports);
@@ -38170,7 +38170,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         isUnmounting: false,
         leavingVNodes: /* @__PURE__ */ new Map()
       };
-      onMounted6(() => {
+      onMounted7(() => {
         state2.isMounted = true;
       });
       onBeforeUnmount3(() => {
@@ -39489,7 +39489,7 @@ var require_runtime_core_cjs_prod = __commonJS({
             }
           }
         };
-        onMounted6(cacheSubtree);
+        onMounted7(cacheSubtree);
         onUpdated2(cacheSubtree);
         onBeforeUnmount3(() => {
           cache.forEach((cached) => {
@@ -39647,7 +39647,7 @@ var require_runtime_core_cjs_prod = __commonJS({
       }
     };
     var onBeforeMount2 = createHook("bm");
-    var onMounted6 = createHook("m");
+    var onMounted7 = createHook("m");
     var onBeforeUpdate2 = createHook(
       "bu"
     );
@@ -40162,7 +40162,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         }
       }
       registerLifecycleHook(onBeforeMount2, beforeMount);
-      registerLifecycleHook(onMounted6, mounted);
+      registerLifecycleHook(onMounted7, mounted);
       registerLifecycleHook(onBeforeUpdate2, beforeUpdate);
       registerLifecycleHook(onUpdated2, updated);
       registerLifecycleHook(onActivated, activated);
@@ -42296,7 +42296,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         return ctx;
       }
     };
-    function watchEffect7(effect, options) {
+    function watchEffect6(effect, options) {
       return doWatch(effect, null, options);
     }
     function watchPostEffect(effect, options) {
@@ -44128,7 +44128,7 @@ var require_runtime_core_cjs_prod = __commonJS({
     exports.onBeforeUpdate = onBeforeUpdate2;
     exports.onDeactivated = onDeactivated;
     exports.onErrorCaptured = onErrorCaptured;
-    exports.onMounted = onMounted6;
+    exports.onMounted = onMounted7;
     exports.onRenderTracked = onRenderTracked;
     exports.onRenderTriggered = onRenderTriggered;
     exports.onServerPrefetch = onServerPrefetch;
@@ -44164,7 +44164,7 @@ var require_runtime_core_cjs_prod = __commonJS({
     exports.version = version3;
     exports.warn = warn$1;
     exports.watch = watch8;
-    exports.watchEffect = watchEffect7;
+    exports.watchEffect = watchEffect6;
     exports.watchPostEffect = watchPostEffect;
     exports.watchSyncEffect = watchSyncEffect;
     exports.withAsyncContext = withAsyncContext;
@@ -45300,7 +45300,7 @@ var require_runtime_core_cjs = __commonJS({
         isUnmounting: false,
         leavingVNodes: /* @__PURE__ */ new Map()
       };
-      onMounted6(() => {
+      onMounted7(() => {
         state2.isMounted = true;
       });
       onBeforeUnmount3(() => {
@@ -46851,7 +46851,7 @@ Server rendered element contains fewer child nodes than client vdom.`
             }
           }
         };
-        onMounted6(cacheSubtree);
+        onMounted7(cacheSubtree);
         onUpdated2(cacheSubtree);
         onBeforeUnmount3(() => {
           cache.forEach((cached) => {
@@ -47017,7 +47017,7 @@ Server rendered element contains fewer child nodes than client vdom.`
       }
     };
     var onBeforeMount2 = createHook("bm");
-    var onMounted6 = createHook("m");
+    var onMounted7 = createHook("m");
     var onBeforeUpdate2 = createHook(
       "bu"
     );
@@ -47754,7 +47754,7 @@ If this is a native custom element, make sure to exclude it from component resol
         }
       }
       registerLifecycleHook(onBeforeMount2, beforeMount);
-      registerLifecycleHook(onMounted6, mounted);
+      registerLifecycleHook(onMounted7, mounted);
       registerLifecycleHook(onBeforeUpdate2, beforeUpdate);
       registerLifecycleHook(onUpdated2, updated);
       registerLifecycleHook(onActivated, activated);
@@ -50302,7 +50302,7 @@ If you want to remount the same app, move your app creation logic into a factory
         return ctx;
       }
     };
-    function watchEffect7(effect, options) {
+    function watchEffect6(effect, options) {
       return doWatch(effect, null, options);
     }
     function watchPostEffect(effect, options) {
@@ -52670,7 +52670,7 @@ Component that was made reactive: `,
     exports.onBeforeUpdate = onBeforeUpdate2;
     exports.onDeactivated = onDeactivated;
     exports.onErrorCaptured = onErrorCaptured;
-    exports.onMounted = onMounted6;
+    exports.onMounted = onMounted7;
     exports.onRenderTracked = onRenderTracked;
     exports.onRenderTriggered = onRenderTriggered;
     exports.onServerPrefetch = onServerPrefetch;
@@ -52706,7 +52706,7 @@ Component that was made reactive: `,
     exports.version = version3;
     exports.warn = warn2;
     exports.watch = watch8;
-    exports.watchEffect = watchEffect7;
+    exports.watchEffect = watchEffect6;
     exports.watchPostEffect = watchPostEffect;
     exports.watchSyncEffect = watchSyncEffect;
     exports.withAsyncContext = withAsyncContext;
@@ -57706,8 +57706,8 @@ function useMask(target, props, nodes, size) {
     return Math.max(a, c) - Math.min(b, d) <= -standard;
   }
   function offsetFormat(evt) {
-    const offsetX = evt.clientX - rect.x.value;
-    const offsetY = evt.clientY - rect.y.value;
+    const offsetX = (evt.clientX - rect.x.value) / props.transformScale;
+    const offsetY = (evt.clientY - rect.y.value) / props.transformScale;
     return {
       x: offsetX,
       y: offsetY
@@ -58469,8 +58469,6 @@ var freeDom = (0, import_vue_demi17.defineComponent)({
 var freeDom_default = freeDom;
 
 // src/components/freeDomWrap.ts
-var import_debug2 = __toESM(require_src());
-var debug2 = (0, import_debug2.default)("freeDom:wrap");
 var freeDomWrapProps = {
   diff: {
     type: Number,
@@ -58521,32 +58519,23 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
     const eventBus = useEventBus();
     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)();
+    const height = (0, import_vue_demi18.ref)();
     const rectRef = (0, import_vue_demi18.shallowRef)();
-    const wrapRect = useElementBounding(rectRef);
     const wrapStyle = (0, import_vue_demi18.computed)(() => ({
       height: height.value + "px",
       width: width.value + "px"
     }));
-    (0, import_vue_demi18.watchEffect)(() => {
-      width.value = props.width;
-      height.value = props.height;
+    (0, import_vue_demi18.onMounted)(() => {
+      if (rectRef.value) {
+        const { width: w, height: h7 } = window.getComputedStyle(rectRef.value);
+        width.value = props.width || Math.round(parseFloat(w)) || 0;
+        height.value = props.height || Math.round(parseFloat(h7)) || 0;
+      }
     });
-    (0, import_vue_demi18.watch)([
-      wrapRect.width,
-      wrapRect.height,
-      () => nodes.value.length
-    ], ([w, h7]) => {
-      debug2("update size");
-      if (!w || !h7)
-        return;
-      width.value = w;
-      height.value = h7;
-      emit("update:width", w);
-      emit("update:height", h7);
+    (0, import_vue_demi18.watch)([width, height, () => nodes.value.length], () => {
       runCorrect();
-    }, { immediate: true });
+    });
     const selectedNodes = (0, import_vue_demi18.computed)(() => nodes.value.filter((node) => node.node.selected));
     const expandSize = (node) => {
       let expandWidth = props.autoExpand;
@@ -58696,14 +58685,16 @@ var FreeDomWrap = (0, import_vue_demi18.defineComponent)({
     const main = createRender(
       "section",
       {
-        ref: "rectRef",
         class: "vv-free-dom--scene",
         style: this.wrapStyle
       }
     )(slotList);
     const wrap = (comp) => createRender(
       "section",
-      {},
+      {
+        ref: "rectRef",
+        style: "overflow: hidden;"
+      },
       {},
       {
         onMousedown: this.mask.handleMousedown,

package/dist/index.mjs

@@ -180,11 +180,11 @@ var require_common = __commonJS({
         let enableOverride = null;
         let namespacesCache;
         let enabledCache;
-        function debug3(...args) {
-          if (!debug3.enabled) {
+        function debug2(...args) {
+          if (!debug2.enabled) {
             return;
           }
-          const self2 = debug3;
+          const self2 = debug2;
           const curr = Number(/* @__PURE__ */ new Date());
           const ms = curr - (prevTime || curr);
           self2.diff = ms;
@@ -214,12 +214,12 @@ var require_common = __commonJS({
           const logFn = self2.log || createDebug.log;
           logFn.apply(self2, args);
         }
-        debug3.namespace = namespace;
-        debug3.useColors = createDebug.useColors();
-        debug3.color = createDebug.selectColor(namespace);
-        debug3.extend = extend;
-        debug3.destroy = createDebug.destroy;
-        Object.defineProperty(debug3, "enabled", {
+        debug2.namespace = namespace;
+        debug2.useColors = createDebug.useColors();
+        debug2.color = createDebug.selectColor(namespace);
+        debug2.extend = extend;
+        debug2.destroy = createDebug.destroy;
+        Object.defineProperty(debug2, "enabled", {
           enumerable: true,
           configurable: false,
           get: () => {
@@ -237,9 +237,9 @@ var require_common = __commonJS({
           }
         });
         if (typeof createDebug.init === "function") {
-          createDebug.init(debug3);
+          createDebug.init(debug2);
         }
-        return debug3;
+        return debug2;
       }
       function extend(namespace, delimiter) {
         const newDebug = createDebug(this.namespace + (typeof delimiter === "undefined" ? ":" : delimiter) + namespace);
@@ -764,11 +764,11 @@ var require_node = __commonJS({
     function load() {
       return process.env.DEBUG;
     }
-    function init(debug3) {
-      debug3.inspectOpts = {};
+    function init(debug2) {
+      debug2.inspectOpts = {};
       const keys = Object.keys(exports.inspectOpts);
       for (let i = 0; i < keys.length; i++) {
-        debug3.inspectOpts[keys[i]] = exports.inspectOpts[keys[i]];
+        debug2.inspectOpts[keys[i]] = exports.inspectOpts[keys[i]];
       }
     }
     module.exports = require_common()(exports);
@@ -38171,7 +38171,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         isUnmounting: false,
         leavingVNodes: /* @__PURE__ */ new Map()
       };
-      onMounted6(() => {
+      onMounted7(() => {
         state2.isMounted = true;
       });
       onBeforeUnmount3(() => {
@@ -39490,7 +39490,7 @@ var require_runtime_core_cjs_prod = __commonJS({
             }
           }
         };
-        onMounted6(cacheSubtree);
+        onMounted7(cacheSubtree);
         onUpdated2(cacheSubtree);
         onBeforeUnmount3(() => {
           cache.forEach((cached) => {
@@ -39648,7 +39648,7 @@ var require_runtime_core_cjs_prod = __commonJS({
       }
     };
     var onBeforeMount2 = createHook("bm");
-    var onMounted6 = createHook("m");
+    var onMounted7 = createHook("m");
     var onBeforeUpdate2 = createHook(
       "bu"
     );
@@ -40163,7 +40163,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         }
       }
       registerLifecycleHook(onBeforeMount2, beforeMount);
-      registerLifecycleHook(onMounted6, mounted);
+      registerLifecycleHook(onMounted7, mounted);
       registerLifecycleHook(onBeforeUpdate2, beforeUpdate);
       registerLifecycleHook(onUpdated2, updated);
       registerLifecycleHook(onActivated, activated);
@@ -42297,7 +42297,7 @@ var require_runtime_core_cjs_prod = __commonJS({
         return ctx;
       }
     };
-    function watchEffect7(effect, options) {
+    function watchEffect6(effect, options) {
       return doWatch(effect, null, options);
     }
     function watchPostEffect(effect, options) {
@@ -44129,7 +44129,7 @@ var require_runtime_core_cjs_prod = __commonJS({
     exports.onBeforeUpdate = onBeforeUpdate2;
     exports.onDeactivated = onDeactivated;
     exports.onErrorCaptured = onErrorCaptured;
-    exports.onMounted = onMounted6;
+    exports.onMounted = onMounted7;
     exports.onRenderTracked = onRenderTracked;
     exports.onRenderTriggered = onRenderTriggered;
     exports.onServerPrefetch = onServerPrefetch;
@@ -44165,7 +44165,7 @@ var require_runtime_core_cjs_prod = __commonJS({
     exports.version = version3;
     exports.warn = warn$1;
     exports.watch = watch8;
-    exports.watchEffect = watchEffect7;
+    exports.watchEffect = watchEffect6;
     exports.watchPostEffect = watchPostEffect;
     exports.watchSyncEffect = watchSyncEffect;
     exports.withAsyncContext = withAsyncContext;
@@ -45301,7 +45301,7 @@ var require_runtime_core_cjs = __commonJS({
         isUnmounting: false,
         leavingVNodes: /* @__PURE__ */ new Map()
       };
-      onMounted6(() => {
+      onMounted7(() => {
         state2.isMounted = true;
       });
       onBeforeUnmount3(() => {
@@ -46852,7 +46852,7 @@ Server rendered element contains fewer child nodes than client vdom.`
             }
           }
         };
-        onMounted6(cacheSubtree);
+        onMounted7(cacheSubtree);
         onUpdated2(cacheSubtree);
         onBeforeUnmount3(() => {
           cache.forEach((cached) => {
@@ -47018,7 +47018,7 @@ Server rendered element contains fewer child nodes than client vdom.`
       }
     };
     var onBeforeMount2 = createHook("bm");
-    var onMounted6 = createHook("m");
+    var onMounted7 = createHook("m");
     var onBeforeUpdate2 = createHook(
       "bu"
     );
@@ -47755,7 +47755,7 @@ If this is a native custom element, make sure to exclude it from component resol
         }
       }
       registerLifecycleHook(onBeforeMount2, beforeMount);
-      registerLifecycleHook(onMounted6, mounted);
+      registerLifecycleHook(onMounted7, mounted);
       registerLifecycleHook(onBeforeUpdate2, beforeUpdate);
       registerLifecycleHook(onUpdated2, updated);
       registerLifecycleHook(onActivated, activated);
@@ -50303,7 +50303,7 @@ If you want to remount the same app, move your app creation logic into a factory
         return ctx;
       }
     };
-    function watchEffect7(effect, options) {
+    function watchEffect6(effect, options) {
       return doWatch(effect, null, options);
     }
     function watchPostEffect(effect, options) {
@@ -52671,7 +52671,7 @@ Component that was made reactive: `,
     exports.onBeforeUpdate = onBeforeUpdate2;
     exports.onDeactivated = onDeactivated;
     exports.onErrorCaptured = onErrorCaptured;
-    exports.onMounted = onMounted6;
+    exports.onMounted = onMounted7;
     exports.onRenderTracked = onRenderTracked;
     exports.onRenderTriggered = onRenderTriggered;
     exports.onServerPrefetch = onServerPrefetch;
@@ -52707,7 +52707,7 @@ Component that was made reactive: `,
     exports.version = version3;
     exports.warn = warn2;
     exports.watch = watch8;
-    exports.watchEffect = watchEffect7;
+    exports.watchEffect = watchEffect6;
     exports.watchPostEffect = watchPostEffect;
     exports.watchSyncEffect = watchSyncEffect;
     exports.withAsyncContext = withAsyncContext;
@@ -56371,13 +56371,13 @@ var require_vue = __commonJS({
 import {
   computed as computed11,
   defineComponent as defineComponent6,
+  onMounted as onMounted5,
   provide as provide2,
   reactive as reactive5,
   ref as ref13,
   shallowRef as shallowRef6,
   toRefs as toRefs2,
-  watch as watch6,
-  watchEffect as watchEffect6
+  watch as watch6
 } from "vue-demi";
 
 // src/util/tokens.ts
@@ -57706,8 +57706,8 @@ function useMask(target, props, nodes, size) {
     return Math.max(a, c) - Math.min(b, d) <= -standard;
   }
   function offsetFormat(evt) {
-    const offsetX = evt.clientX - rect.x.value;
-    const offsetY = evt.clientY - rect.y.value;
+    const offsetX = (evt.clientX - rect.x.value) / props.transformScale;
+    const offsetY = (evt.clientY - rect.y.value) / props.transformScale;
     return {
       x: offsetX,
       y: offsetY
@@ -58469,8 +58469,6 @@ var freeDom = defineComponent5({
 var freeDom_default = freeDom;
 
 // src/components/freeDomWrap.ts
-var import_debug2 = __toESM(require_src());
-var debug2 = (0, import_debug2.default)("freeDom:wrap");
 var freeDomWrapProps = {
   diff: {
     type: Number,
@@ -58521,32 +58519,23 @@ var FreeDomWrap = defineComponent6({
     const eventBus = useEventBus();
     const nodes = ref13([]);
     const history = useOperateHistory(nodes);
-    const width = ref13(props.width);
-    const height = ref13(props.height);
+    const width = ref13();
+    const height = ref13();
     const rectRef = shallowRef6();
-    const wrapRect = useElementBounding(rectRef);
     const wrapStyle = computed11(() => ({
       height: height.value + "px",
       width: width.value + "px"
     }));
-    watchEffect6(() => {
-      width.value = props.width;
-      height.value = props.height;
+    onMounted5(() => {
+      if (rectRef.value) {
+        const { width: w, height: h7 } = window.getComputedStyle(rectRef.value);
+        width.value = props.width || Math.round(parseFloat(w)) || 0;
+        height.value = props.height || Math.round(parseFloat(h7)) || 0;
+      }
     });
-    watch6([
-      wrapRect.width,
-      wrapRect.height,
-      () => nodes.value.length
-    ], ([w, h7]) => {
-      debug2("update size");
-      if (!w || !h7)
-        return;
-      width.value = w;
-      height.value = h7;
-      emit("update:width", w);
-      emit("update:height", h7);
+    watch6([width, height, () => nodes.value.length], () => {
       runCorrect();
-    }, { immediate: true });
+    });
     const selectedNodes = computed11(() => nodes.value.filter((node) => node.node.selected));
     const expandSize = (node) => {
       let expandWidth = props.autoExpand;
@@ -58696,14 +58685,16 @@ var FreeDomWrap = defineComponent6({
     const main = createRender(
       "section",
       {
-        ref: "rectRef",
         class: "vv-free-dom--scene",
         style: this.wrapStyle
       }
     )(slotList);
     const wrap = (comp) => createRender(
       "section",
-      {},
+      {
+        ref: "rectRef",
+        style: "overflow: hidden;"
+      },
       {},
       {
         onMousedown: this.mask.handleMousedown,
@@ -58724,7 +58715,7 @@ var FreeDomWrap = defineComponent6({
 import { Fragment as Fragment2, defineComponent as defineComponent8, h as h6, provide as provide3, reactive as reactive6, ref as ref16, toRefs as toRefs3 } from "vue-demi";
 
 // src/components/gridItem.ts
-import { defineComponent as defineComponent7, inject as inject5, onMounted as onMounted5, ref as ref14, watch as watch7 } from "vue-demi";
+import { defineComponent as defineComponent7, inject as inject5, onMounted as onMounted6, ref as ref14, watch as watch7 } from "vue-demi";
 
 // src/components/tokens.ts
 var gridLayoutContextKey = Symbol("gridLayoutContext");
@@ -58795,7 +58786,7 @@ var GridItem = defineComponent7({
     if (!layout) {
       throw new Error("TODO");
     }
-    onMounted5(() => {
+    onMounted6(() => {
       moveDroppingItem();
     });
     watch7(() => props.droppingPosition, (currPos, prevPos) => {

package/package.json

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