NorthwoodsSoftware/GoJS

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

ptrmsk opened this issue · 1 comments

ptrmsk commented

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,

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.