Position Panel - Negative Positions

GoJS
1

I want to implement content scrolling inside of a PositionPanel. It works for positive values like go.Point(100, 100), but when I position an object using negative values like go.Point(-100, -100) the object will stick to go.Point(0, 0). How to allow objects to be positioned using negative values?

new go.Group("Position", {
  resizable: true,
  width: 400,
  height: 100,
  background: "lightblue",
}).add(
  new go.Panel("Graduated", {
    graduatedMin: 0,
    graduatedMax: 100,
    graduatedTickUnit: 10,
    background: "lightgreen",
    position: new go.Point(-100, -100), // the panel sticks to go.Point(0, 0)
    name: "timescale",
  }).add(
    new go.Shape({ geometryString: "M0 0 H800" }),
    new go.Shape({ geometryString: "M0 0 V10" }),
    new go.TextBlock({ segmentOffset: new go.Point(0, 12) })
  )
);
2

Yes, you can have elements of a “Position” Panel at negative GraphObject.positions. If you examine that “Graduated” Panel in the debugger, does it not have (-100, -100) as its position? (Unless you have set it in some code; it doesn’t have a Binding.)

This is also shown in the second sample at: Panels | GoJS Note how one element is at (-50, 50). The origin (0, 0) is near the middle of the panel.

Maybe you don’t want to use a “Position” Panel to arrange your “Graduated” Panel relative to other elements?

Or maybe you just want to scroll a single element (which might be a Panel): Scrolling any GraphObject Vertically

3

I’ll take a look at: Scrolling any GraphObject Vertically
How am I supposed to discover those extras? When I open https://gojs.net/extras/ it renders 403 - Forbidden page.

Here’s a minimal example where it’s not possible to position a panel below (0, 0)

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go.js"></script>

    <div id="myDiagramDiv" style="width: 800px; height: 800px"></div>

    <script id="code">
      function init() {
        myDiagram = new go.Diagram("myDiagramDiv");

        myDiagram.nodeTemplate = new go.Node("Position", {
          resizable: true,
          width: 400,
          height: 100,
          background: "lightblue",
        }).add(
          new go.Panel("Graduated", {
            graduatedMin: 0,
            graduatedMax: 100,
            graduatedTickUnit: 10,
            background: "lightgreen",
            position: new go.Point(-100, 0),
            // position: new go.Point(100, 0),
            name: "timescale",
          }).add(
            new go.Shape({ geometryString: "M0 0 H800" }),
            new go.Shape({ geometryString: "M0 0 V10" }),
            new go.TextBlock({ segmentOffset: new go.Point(0, 12) })
          )
        );

        myDiagram.model = new go.GraphLinksModel(
          [
            {
              key: 1,
              text: "Alpha",
              loc: new go.Point(0, 0),
              color: "lightblue",
            },
          ],
          []
        );
      }
      window.addEventListener("DOMContentLoaded", init);
    </script>
  </body>
</html>
4

If you add a second element to that “Position” Panel and specify its position, you will see that that “Graduated” Panel that you positioned at (-100, 0) does in fact extend towards the left of the origin position.

For example, let’s say I add this Shape to your “Position” Panel:

          new go.Shape("Circle", { position: new go.Point(0, 10), width: 3, height: 3, fill: "red", strokeWidth: 0 })

I then get:

image
image618×170 2.24 KB

(Note that the red circle is positioned at y==10 so that is isn’t obscured by the main path of the “Graduated” Panel. But its position.x is zero.)

The position of an element in a “Position” Panel is in that panel’s coordinate system. Those positions don’t mean anything outside of that panel, because each panel has its own coordinate system.

For top-level GraphObjects, which must always be Parts, there is no such containing Panel, so the coordinate system is the document coordinate system. Coordinate Systems | GoJS

5

Ok, so what I want to achieve is that the graduated panel should get cropped when it is positioned below (0, 0) so in this case I expect to only see the part after the red dot. 0 and 10 should be hidden/cropped. I should only be able to see 20, 30 and so on when the position is set to (-100, -100).

6

It’s commonplace to use an “Auto” Panel to clip an element.
In this case I assume you mean (-100, 0), not (-100, -100).

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go.js"></script>

    <div id="myDiagramDiv" style="width: 800px; height: 800px"></div>

    <script id="code">
function init() {
  myDiagram = new go.Diagram("myDiagramDiv");

  myDiagram.nodeTemplate = new go.Node("Auto", {
      resizable: true,
      width: 400,
      height: 100,
      background: "lightblue",
    })
    .bindTwoWay("desiredSize", "size", go.Size.parse, go.Size.stringify)
    .add(
      new go.Shape({ fill: null, strokeWidth: 0 }),
      new go.Panel("Graduated", {
        graduatedMin: 0,
        graduatedMax: 100,
        graduatedTickUnit: 10,
        background: "lightgreen",
        alignment: new go.Spot(0, 0, -100, 0),
        alignmentFocus: go.Spot.TopLeft
      }).add(
        new go.Shape({ geometryString: "M0 0 H800" }),
        new go.Shape({ geometryString: "M0 0 V10" }),
        new go.TextBlock({ segmentOffset: new go.Point(0, 12) })
      )
    );

  myDiagram.model = new go.GraphLinksModel(
    [
      {
        key: 1,
        text: "Alpha",
        loc: new go.Point(0, 0),
        color: "lightblue",
      },
    ],
    []
  );
}
window.addEventListener("DOMContentLoaded", init);
    </script>
  </body>
</html>