NorthwoodsSoftware / GoJS

JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
http://gojs.net
Other
7.7k stars 2.86k forks source link

Inconsistent snap with default grid, default gridSnap, and objects of different widths #197

Closed ptrmsk closed 1 year ago

ptrmsk commented 1 year ago

It appears grid snap is not always consistent, especially when trying to position objects of different sizes (even when they have the same model). For example, on this page, load the following data:

{ "class": "GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "modelData": {"position":"175.95117320737629 -16.19992587960202"},
  "nodeDataArray": [
{"text":"Step","key":-2,"loc":"232 8"},
{"text":"Step","key":-3,"loc":"248 48","size":"88 30"},
{"text":"Step","key":-4,"loc":"264 88","size":"127 30"},
{"text":"Step","key":-5,"loc":"272 128","size":"144 30"}
],
  "linkDataArray": []}

I tried left-aligning them on the grid, and this about as close as I could get (red line for emphasis):

image

Tested in both Firefox and Chrome. I also downloaded/modified the SnapLinkReshaping.html file to make sure the default gridSnap also has this issue:

<script src="https://unpkg.com/gojs@2.3.7/extensions/Figures.js"></script>
<script src="https://unpkg.com/gojs@2.3.7/extensions/SnapLinkReshapingTool.js"></script>
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
        {
          // drop custom grid design, use default instead:
          "grid.visible": true,
WalterNorthwoods commented 1 year ago

The behavior is correct -- grid snapping tries to align the Part.location point to the grid. In that SnapLinkReshaping sample, the nodes have Part.locationSpot set to go.Spot.Center. So the DraggingTool is snapping the center point of the nodes to the grid, not the top-left corner.

In your app you could not bother setting Part.locationSpot, because the default value is go.Spot.TopLeft.