@sepveneto/free-dom 0.2.0 → 0.3.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../tmp/tmp-1770-kjBys2smNgfg/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1812-xR8NNKBE7ahD/core/src/style/index.css */
 :root {
   --free-dom-theme: #4089ef;
   --free-dom-line: var(--free-dom-theme);

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;
@@ -628,6 +641,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

@@ -72,10 +72,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 +89,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 +172,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 +187,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 +263,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;
@@ -615,6 +628,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.3.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"
   }
-}
+}