feat: add snap props

Author: daybrush

packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.component.ts

@@ -53,6 +53,9 @@ export class NgxMoveableComponent
   @Input() public edge!: boolean;
   @Input() public pinchThreshold!: number;
   @Input() public snapCenter!: boolean;
+  @Input() public snapVertical!: boolean;
+  @Input() public snapElement!: boolean;
+  @Input() public snapHorizontal!: boolean;
   @Input() public snapThreshold!: number;
   @Input() public horizontalGuidelines!: number[];
   @Input() public verticalGuidelines!: number[];

src/Moveable.tsx

@@ -364,11 +364,58 @@ class Moveable extends EgComponent implements MoveableInterface {
  * @example
  * import Moveable from "moveable";
  *
- * const moveable = new Moveable(document.body);
+ * const moveable = new Moveable(document.body, {
+ *   snappable: true,
+ * });
  *
  * moveable.snapCenter = true;
  */
 
+/**
+ * When you drag, make the snap in the vertical guidelines. (default: true)
+ * @name Moveable#snapVertical
+ * @example
+ * import Moveable from "moveable";
+ *
+ * const moveable = new Moveable(document.body, {
+ *   snappable: true,
+ *   snapVertical: true,
+ *   snapHorizontal: true,
+ *   snapElement: true,
+ * });
+ *
+ * moveable.snapVertical = false;
+ */
+ /**
+ * When you drag, make the snap in the horizontal guidelines. (default: true)
+ * @name Moveable#snapHorizontal
+ * @example
+ * import Moveable from "moveable";
+ *
+ * const moveable = new Moveable(document.body, {
+ *   snappable: true,
+ *   snapVertical: true,
+ *   snapHorizontal: true,
+ *   snapElement: true,
+ * });
+ *
+ * moveable.snapHorizontal = false;
+ */
+/**
+ * When you drag, make the snap in the element guidelines. (default: true)
+ * @name Moveable#snapElement
+ * @example
+ * import Moveable from "moveable";
+ *
+ * const moveable = new Moveable(document.body, {
+ *   snappable: true,
+ *   snapVertical: true,
+ *   snapHorizontal: true,
+ *   snapElement: true,
+ * });
+ *
+ * moveable.snapElement = false;
+ */
 /**
  * Distance value that can snap to guidelines. (default: 5)
  * @name Moveable#snapThreshold

src/consts.ts

@@ -18,6 +18,9 @@ export const PROPERTIES: Array<keyof MoveableOptions> = [
     "scrollContainer",
     "scrollThreshold",
     "baseDirection",
+    "snapElement",
+    "snapVertical",
+    "snapHorizontal",
 ];
 export const EVENTS: Array<keyof MoveableEvents> = [
     "dragStart",

src/types.ts

@@ -37,6 +37,10 @@ import {
  * @property - Whether to scale and resize through edge lines. (default: false)
  * @property - Minimum distance to pinch. (default: 20)
  * @property - When you drag, make the snap in the center of the target. (default: false)
+ * @property - When you drag, make the snap in the vertical guidelines. (default: true)
+ * @property - When you drag, make the snap in the horizontal guidelines. (default: true)
+ * @property - When you drag, make the snap in the element guidelines. (default: true)
+
  * @property - Distance value that can snap to guidelines. (default: 0)
  * @property - Add guidelines in the horizontal direction. (default: [])
  * @property - Add guidelines in the vertical direction. (default: [])
@@ -78,6 +82,10 @@ export interface MoveableOptions {
     pinchThreshold?: number;
 
     snapCenter?: boolean;
+    snapVertical?: boolean;
+    snapHorizontal?: boolean;
+    snapElement?: boolean;
+
     snapThreshold?: number;
     horizontalGuidelines?: number[];
     verticalGuidelines?: number[];