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

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1770-kjBys2smNgfg/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1773-CH54J03asN0x/core/src/style/index.css */
 :root {
   --free-dom-theme: #4089ef;
   --free-dom-line: var(--free-dom-theme);
@@ -23,10 +23,12 @@
 }
 .free-dom__widget-wrapper {
   display: inline-block;
+  box-sizing: border-box;
   border: 1px dashed transparent;
   transition: border-color 0.3s;
   box-sizing: content-box;
   user-select: none;
+  overflow: hidden;
 }
 .free-dom__widget-wrapper.is-absolute {
   position: absolute;

package/dist/index.d.ts

@@ -43,6 +43,10 @@ declare const freeDom: vue_demi.DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
+    grid: {
+        type: vue_demi.PropType<[number, number]>;
+        default: undefined;
+    };
 }, {
     widgetRef: vue_demi.ShallowRef<any>;
     canMove: vue_demi.ComputedRef<boolean>;
@@ -101,6 +105,10 @@ declare const freeDom: vue_demi.DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
+    grid: {
+        type: vue_demi.PropType<[number, number]>;
+        default: undefined;
+    };
 }>> & {
     "onUpdate:x"?: ((...args: any[]) => any) | undefined;
     "onUpdate:y"?: ((...args: any[]) => any) | undefined;
@@ -120,6 +128,7 @@ declare const freeDom: vue_demi.DefineComponent<{
     limitHeight: number;
     handler: "dot" | "mark";
     diagonal: boolean;
+    grid: [number, number];
 }>;
 declare const freeScene: vue_demi.DefineComponent<{
     absolute: {
@@ -141,6 +150,10 @@ declare const freeScene: vue_demi.DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
+    grid: {
+        type: vue_demi.PropType<[number, number]>;
+        default: undefined;
+    };
 }, {
     rectRef: vue_demi.ShallowRef<null>;
 }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
@@ -163,12 +176,17 @@ declare const freeScene: vue_demi.DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
+    grid: {
+        type: vue_demi.PropType<[number, number]>;
+        default: undefined;
+    };
 }>>, {
     absolute: boolean;
     move: boolean;
     preview: boolean;
     handler: "dot" | "mark";
     diagonal: boolean;
+    grid: [number, number];
     diff: number;
 }>;
 

package/dist/index.js

@@ -85,10 +85,15 @@ var SceneToken = Symbol("Scene");
 function clamp(value, min, max = Infinity) {
   return Math.max(Math.min(value, max), min);
 }
+function snapToGrid(grid, pendingX, pendingY) {
+  const x = Math.round(pendingX / grid[0]) * grid[0];
+  const y = Math.round(pendingY / grid[1]) * grid[1];
+  return [x, y];
+}
 
 // src/hooks/use-resize.ts
 var MIN_SIZE = 20;
-function useResize(startX, startY, rect, dot, diagonal, callbacks) {
+function useResize(startX, startY, rect, dot, diagonal, snapGrid, callbacks) {
   const isT = dot ? /t/.test(dot) : false;
   const isL = dot ? /l/.test(dot) : false;
   const isB = dot ? /b/.test(dot) : false;
@@ -97,8 +102,11 @@ function useResize(startX, startY, rect, dot, diagonal, callbacks) {
   const { width: cWidth, height: cHeight, x, y } = rect;
   const move = (mouseEvt) => {
     const { clientX, clientY } = mouseEvt;
-    const deltaX = clientX - startX;
-    const deltaY = clientY - startY;
+    let deltaX = clientX - startX;
+    let deltaY = clientY - startY;
+    if (Array.isArray(snapGrid)) {
+      [deltaX, deltaY] = snapToGrid(snapGrid, deltaX, deltaY);
+    }
     const rate = cWidth / cHeight;
     const newWidth = cWidth + (isL ? -deltaX : isR ? deltaX : 0);
     const newHeight = cHeight + (isT ? -deltaY : isB ? deltaY : 0);
@@ -177,6 +185,10 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
     diagonal: {
       type: Boolean,
       default: void 0
+    },
+    grid: {
+      type: Object,
+      default: void 0
     }
   },
   emits: ["update:x", "update:y", "update:width", "update:height", "select"],
@@ -188,6 +200,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
     const canMove = (0, import_vue_demi2.computed)(() => !_preview.value && (SceneContext?.move || props.move));
     const isAbsolute = (0, import_vue_demi2.computed)(() => props.absolute ?? SceneContext?.absolute ?? true);
     const handlerType = (0, import_vue_demi2.computed)(() => props.handler ?? SceneContext?.handler ?? "dot");
+    const snapGrid = (0, import_vue_demi2.computed)(() => props.grid ?? SceneContext?.grid);
     const diagonal = (0, import_vue_demi2.computed)(() => props.diagonal ?? SceneContext?.diagonal ?? true);
     const widgetRef = (0, import_vue_demi2.shallowRef)();
     const _style = (0, import_vue_demi2.ref)({});
@@ -263,7 +276,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
       isScale.value = true;
       active.value = true;
       const { clientX, clientY } = evt;
-      useResize(clientX, clientY, _rect, dot, diagonal.value, {
+      useResize(clientX, clientY, _rect, dot, diagonal.value, snapGrid.value, {
         onMove() {
           if (!checkValid(_rect))
             return;
@@ -403,10 +416,25 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         onMousedown: (evt) => this.onMousedownDot(evt, dot)
       });
     }) : null;
-    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
+    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");
+    }
     if (import_vue_demi2.isVue2) {
       return (0, import_vue_demi2.h)(
-        "section",
+        node,
         {
           class: [
             "free-dom__widget-wrapper",
@@ -420,12 +448,11 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
           on: {
             mousedown: this.onMousedown
           }
-        },
-        [dots, defaultSlot]
+        }
       );
     }
     return (0, import_vue_demi2.h)(
-      "section",
+      node,
       {
         ref: "widgetRef",
         class: [
@@ -437,8 +464,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         ],
         style: this.wrapStyle,
         onMousedown: this.onMousedown
-      },
-      [defaultSlot, dots]
+      }
     );
   }
 });
@@ -628,6 +654,10 @@ var freeDomWrapProps = {
   diagonal: {
     type: Boolean,
     default: void 0
+  },
+  grid: {
+    type: Object,
+    default: void 0
   }
 };
 var FreeDomWrap = (0, import_vue_demi4.defineComponent)({

package/dist/index.mjs

@@ -17,7 +17,8 @@ import {
   reactive,
   isVue2,
   shallowRef,
-  watchEffect
+  watchEffect,
+  cloneVNode
 } from "vue-demi";
 
 // src/hooks/use-normalize-style.ts
@@ -72,10 +73,15 @@ var SceneToken = Symbol("Scene");
 function clamp(value, min, max = Infinity) {
   return Math.max(Math.min(value, max), min);
 }
+function snapToGrid(grid, pendingX, pendingY) {
+  const x = Math.round(pendingX / grid[0]) * grid[0];
+  const y = Math.round(pendingY / grid[1]) * grid[1];
+  return [x, y];
+}
 
 // src/hooks/use-resize.ts
 var MIN_SIZE = 20;
-function useResize(startX, startY, rect, dot, diagonal, callbacks) {
+function useResize(startX, startY, rect, dot, diagonal, snapGrid, callbacks) {
   const isT = dot ? /t/.test(dot) : false;
   const isL = dot ? /l/.test(dot) : false;
   const isB = dot ? /b/.test(dot) : false;
@@ -84,8 +90,11 @@ function useResize(startX, startY, rect, dot, diagonal, callbacks) {
   const { width: cWidth, height: cHeight, x, y } = rect;
   const move = (mouseEvt) => {
     const { clientX, clientY } = mouseEvt;
-    const deltaX = clientX - startX;
-    const deltaY = clientY - startY;
+    let deltaX = clientX - startX;
+    let deltaY = clientY - startY;
+    if (Array.isArray(snapGrid)) {
+      [deltaX, deltaY] = snapToGrid(snapGrid, deltaX, deltaY);
+    }
     const rate = cWidth / cHeight;
     const newWidth = cWidth + (isL ? -deltaX : isR ? deltaX : 0);
     const newHeight = cHeight + (isT ? -deltaY : isB ? deltaY : 0);
@@ -164,6 +173,10 @@ var FreeDom = defineComponent({
     diagonal: {
       type: Boolean,
       default: void 0
+    },
+    grid: {
+      type: Object,
+      default: void 0
     }
   },
   emits: ["update:x", "update:y", "update:width", "update:height", "select"],
@@ -175,6 +188,7 @@ var FreeDom = defineComponent({
     const canMove = computed(() => !_preview.value && (SceneContext?.move || props.move));
     const isAbsolute = computed(() => props.absolute ?? SceneContext?.absolute ?? true);
     const handlerType = computed(() => props.handler ?? SceneContext?.handler ?? "dot");
+    const snapGrid = computed(() => props.grid ?? SceneContext?.grid);
     const diagonal = computed(() => props.diagonal ?? SceneContext?.diagonal ?? true);
     const widgetRef = shallowRef();
     const _style = ref2({});
@@ -250,7 +264,7 @@ var FreeDom = defineComponent({
       isScale.value = true;
       active.value = true;
       const { clientX, clientY } = evt;
-      useResize(clientX, clientY, _rect, dot, diagonal.value, {
+      useResize(clientX, clientY, _rect, dot, diagonal.value, snapGrid.value, {
         onMove() {
           if (!checkValid(_rect))
             return;
@@ -390,10 +404,25 @@ var FreeDom = defineComponent({
         onMousedown: (evt) => this.onMousedownDot(evt, dot)
       });
     }) : null;
-    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
+    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");
+    }
     if (isVue2) {
       return h(
-        "section",
+        node,
         {
           class: [
             "free-dom__widget-wrapper",
@@ -407,12 +436,11 @@ var FreeDom = defineComponent({
           on: {
             mousedown: this.onMousedown
           }
-        },
-        [dots, defaultSlot]
+        }
       );
     }
     return h(
-      "section",
+      node,
       {
         ref: "widgetRef",
         class: [
@@ -424,8 +452,7 @@ var FreeDom = defineComponent({
         ],
         style: this.wrapStyle,
         onMousedown: this.onMousedown
-      },
-      [defaultSlot, dots]
+      }
     );
   }
 });
@@ -615,6 +642,10 @@ var freeDomWrapProps = {
   diagonal: {
     type: Boolean,
     default: void 0
+  },
+  grid: {
+    type: Object,
+    default: void 0
   }
 };
 var FreeDomWrap = defineComponent3({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sepveneto/free-dom",
-  "version": "0.2.0",
+  "version": "0.4.0-beta.0",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -15,6 +15,12 @@
     },
     "./css": "./dist/index.css"
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "vue-demi-switch 3 && vitepress dev docs",
+    "release": "bumpp package.json --commit --push --tag",
+    "test": "vitest"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -35,11 +41,5 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/SepVeneto/free-dom"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "vue-demi-switch 3 && vitepress dev docs",
-    "release": "bumpp package.json --commit --push --tag",
-    "test": "vitest"
   }
-}
+}