Merge branch 'dev' of https://github.com/GrapesJS/grapesjs into dynamic-values-improvements

package.json

@@ -27,7 +27,7 @@
     "build:docs": "pnpm --filter @grapesjs/docs build"
   },
   "devDependencies": {
-    "@babel/cli": "7.24.8",
+    "@babel/cli": "7.27.0",
     "@babel/core": "7.25.2",
     "@babel/preset-env": "7.25.4",
     "@babel/preset-typescript": "7.24.7",
@@ -45,7 +45,7 @@
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard-with-typescript": "43.0.1",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest": "28.8.3",
     "eslint-plugin-n": "17.17.0",
     "eslint-plugin-prettier": "5.2.1",

packages/cli/package.json

@@ -36,13 +36,13 @@
     "chalk": "^4.1.2",
     "core-js": "3.38.1",
     "dts-bundle-generator": "^8.0.1",
-    "html-webpack-plugin": "5.6.0",
+    "html-webpack-plugin": "5.6.3",
     "inquirer": "^8.2.5",
     "listr": "^0.14.3",
     "lodash.template": "^4.5.0",
     "rimraf": "^4.1.2",
     "spdx-license-list": "^6.6.0",
-    "terser-webpack-plugin": "^5.3.10",
+    "terser-webpack-plugin": "^5.3.14",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",

packages/core/src/commands/index.ts

@@ -176,7 +176,7 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
           });
         } else {
           if (nativeDrag) {
-            event.dataTransfer.setDragImage(target.view?.el, 0, 0);
+            event?.dataTransfer?.setDragImage(target.view?.el, 0, 0);
             //sel.set('status', 'freezed');
           }
 

packages/core/src/commands/view/ComponentDrag.ts

@@ -71,6 +71,7 @@ export default {
       guidesTarget: this.guidesTarget,
       guidesStatic: this.guidesStatic,
       guidesMatched: this.getGuidesMatched(guidesActive),
+      opts: this.opts,
     };
   },
 
@@ -654,6 +655,11 @@ export interface ComponentDragEventProps {
    * The guides that are being matched.
    */
   guidesMatched: ComponentDragGuideMatched[];
+
+  /**
+   * The options used for the drag event.
+   */
+  opts: ComponentDragOpts;
 }
 
 /**

packages/core/src/data_sources/model/conditional_variables/operators/AnyTypeOperator.ts

@@ -1,4 +1,3 @@
-import { enumToArray } from '../../../utils';
 import DataVariable from '../../DataVariable';
 import { SimpleOperator } from './BaseOperator';
 

packages/core/src/utils/Dragger.ts

@@ -82,6 +82,12 @@ export interface DraggerOptions {
    */
   snapOffset?: number;
 
+  /**
+   * Snapping value for the x-y axis. If you pass a value of 0, the snapping will be disabled for that axis.
+   * @example { snapGuides: { x: 10, y: 5 } }
+   */
+  snapGuides?: { x?: number; y?: number };
+
   /**
    * Document on which listen to pointer events.
    */
@@ -122,6 +128,7 @@ export default class Dragger {
    */
   constructor(opts: DraggerOptions = {}) {
     this.opts = {
+      snapGuides: { x: 5, y: 5 },
       snapOffset: 5,
       scale: 1,
     };
@@ -252,7 +259,7 @@ export default class Dragger {
    * Check if the delta hits some guide
    */
   snapGuides(delta: DraggerPosition) {
-    const newDelta = delta;
+    const newDelta = { ...delta };
     let { trgX, trgY } = this;
 
     this.guidesTarget.forEach((trg) => {
@@ -263,13 +270,13 @@ export default class Dragger {
       this.guidesStatic.forEach((stat) => {
         if ((trg.y && stat.x) || (trg.x && stat.y)) return;
         const isY = trg.y && stat.y;
-        const axs = isY ? 'y' : 'x';
-        const trgPoint = trg[axs];
-        const statPoint = stat[axs];
-        const deltaPoint = delta[axs];
+        const axis = isY ? 'y' : 'x';
+        const trgPoint = trg[axis];
+        const statPoint = stat[axis];
+        const deltaPoint = delta[axis];
         const trgGuide = isY ? trgY : trgX;
 
-        if (this.isPointIn(trgPoint, statPoint)) {
+        if (this.isPointIn(trgPoint, statPoint, { axis })) {
           if (isUndefined(trgGuide)) {
             const trgValue = deltaPoint - (trgPoint - statPoint);
             this.setGuideLock(trg, trgValue);
@@ -281,18 +288,18 @@ export default class Dragger {
     trgX = this.trgX;
     trgY = this.trgY;
 
-    xyArr.forEach((co) => {
-      const axis = co.toUpperCase();
+    xyArr.forEach((axis) => {
+      const axisName = axis.toUpperCase();
       // @ts-ignore
-      let trg = this[`trg${axis}`];
+      let trg = this[`trg${axisName}`];
 
-      if (trg && !this.isPointIn(delta[co], trg.lock)) {
+      if (trg && !this.isPointIn(delta[axis], trg.lock, { axis })) {
         this.setGuideLock(trg, null);
         trg = null;
       }
 
       if (trg && !isUndefined(trg.lock)) {
-        newDelta[co] = trg.lock;
+        newDelta[axis] = trg.lock;
       }
     });
 
@@ -303,9 +310,17 @@ export default class Dragger {
     };
   }
 
-  isPointIn(src: number, trg: number, { offset }: { offset?: number } = {}) {
-    const ofst = offset || this.opts.snapOffset || 0;
-    return (src >= trg && src <= trg + ofst) || (src <= trg && src >= trg - ofst);
+  isPointIn(src: number, trg: number, { offset, axis }: { offset?: number; axis?: PositionXY } = {}) {
+    const { snapGuides = {}, snapOffset = 0 } = this.opts;
+    const axisOffset = axis === 'x' ? snapGuides.x : axis === 'y' ? snapGuides.y : undefined;
+
+    // If snapGuides.x or snapGuides.y is explicitly 0, disable snapping for that axis
+    const effectiveOffset = axisOffset === 0 ? 0 : (offset ?? axisOffset ?? snapOffset);
+
+    // If effectiveOffset is 0, snapping is disabled for this axis
+    if (effectiveOffset === 0) return false;
+
+    return (src >= trg && src <= trg + effectiveOffset) || (src <= trg && src >= trg - effectiveOffset);
   }
 
   setGuideLock(guide: Guide, value: any) {