How to make Snapping Grid visible during the drag Event?

[jadiagaurang]

Environments

• Framework name: Vanilla JS
• Framework version: N/A
• Moveable Component version: 0.47.9
• Testable Address(optional): https://codepen.io/jadiagaurang/pen/PoyXWgJ

Description

I would like to show Snapping Grid during the drag Event to help user visualize the Snapping Grid. Is it possible with current implementation or are you planning to add a feature in the future?

Example Image:

Example Config for the Moveable Object:

const designCanvas = $(".design-canvas")[0];
const designCanvasWidth = $(".design-canvas").width();
const designCanvasHeight = $(".design-canvas").height();

window.objMoveable = new Moveable(designCanvas, {
  target: [],

  draggable: true,

  // Snapping!
  snappable: true,
  snapContainer: designCanvas,
  bounds: { // Limit movement within the container
    left: 0,
    top: 0,
    right: designCanvas.offsetWidth,
    bottom: designCanvas.offsetHeight,
  },
  verticalGuidelines: [
    50, 
    designCanvasWidth / 4, 
    designCanvasWidth / 2, 
    designCanvasWidth * 3 / 4, 
    designCanvasWidth - 50
  ],
  horizontalGuidelines: [
    50, 
    designCanvasHeight / 4, 
    designCanvasHeight / 2, 
    designCanvasHeight * 3 / 4, 
    designCanvasHeight - 50
  ],
  snapThreshold: 5,
  snapGridWidth: 50,
  snapGridHeight: 50,
  snapElement: true,
  snapGap: true,
  snapDistFormat: (v, type) => `${v}px`,
  snapDirections: {
    left: true,
    top: true,
    right: true,
    bottom: true,
    center: true,
    middle: true
  },
  snapDigit: 0,
  isDisplaySnapDigit: true,
  isDisplayInnerSnapDigit: true,
  elementSnapDirections: true,
  elementGuidelines: $(".el").get()  //Add List of Element to enable Guidelines!
});

[daybrush]

@jadiagaurang

I'll add it in the next update.

[daybrush]

@jadiagaurang

• croact-moveable 0.4.0
• @moveable/helper 0.1.2
• lit-moveable 0.25.0
• moveable 0.48.0
• preact-moveable 0.50.0
• react-moveable 0.51.0
• svelte-moveable 0.40.0
• vue-moveable 2.0.0-beta.76
• vue3-moveable 0.23.0
• ngx-moveable 0.45.0

moveable's new version is released. Set isDisplayGridGuidelines to true.

[jadiagaurang]

@daybrush

Thank you so much for adding new config to display Grid Guidelines. I tried the config on a new CodePen example.

Testable Address: https://codepen.io/jadiagaurang/pen/PoxYVRN

I have set grid cell to be 50x50 (px) and snapThreshold = 50 as well.

isDisplayGridGuidelines: true,
snapThreshold: 50,
snapGridWidth: 50,
snapGridHeight: 50

I am trying to generate CSS Grid from the pixel coordinate. I am trying to show entire Grid to help user place on a Grid Cell which should help user design a Block more efficiently.

Some Technical Blog which I am following to generate CSS Grid from Pixel Coordinates.

1. https://www.canva.dev/blog/engineering/css-absolutely-positioning-things-relatively/
2. https://engineering.squarespace.com/blog/2022/developing-fluid-engine

Is it possible to show entire grid with the provided config or via CSS?

[daybrush]

@jadiagaurang Sorry. There are no plans to provide a function that displays the entire guideline or grid. You have to create Guidelines or Grid through component or HTML or CSS.

I support Guides Manager. https://github.com/daybrush/guides

I'm preparing an editor, but I haven't made a Grid yet.

Assuming that I create a Grid, it seems that I can create a Grid shape through a background or pattern.

https://github.com/daybrush/scena

[jadiagaurang]

@daybrush Thanks for the clarification. I will try to render a CSS Grid and show the Gridlines.