github.com/ismailbayram/bigpicture@v0.0.0-20231225173155-e4b21f5efcff/web/index.html (about)

     1  <!doctype html>
     2  <html lang="en">
     3  <head>
     4      <meta charset="UTF-8">
     5      <meta name="viewport"
     6            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     7      <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8      <title>Big Picture</title>
     9      <link rel="stylesheet" href="/style.css">
    10      <script src="/go.js"></script>
    11  </head>
    12  <body>
    13  <h1>NODES CAN BE DRAGGED OR DELETED</h1>
    14  <div id="graph-div"></div>
    15  
    16  
    17  <script>
    18      const $ = go.GraphObject.make;
    19  
    20      var Graph = new go.Diagram("graph-div", {
    21          "undoManager.isEnabled": true,
    22          layout: new go.TreeLayout({angle: 90, layerSpacing: 35})
    23      });
    24  
    25      Graph.nodeTemplate =
    26          $(go.Node, "Auto",
    27              new go.Binding("location").makeTwoWay(),
    28              {
    29                  locationSpot: go.Spot.Center,
    30                  toEndSegmentLength: 30, fromEndSegmentLength: 30
    31              },
    32              $(go.Shape, "Rectangle",
    33                  {
    34                      name: "OBJSHAPE",
    35                      fill: "white",
    36                      desiredSize: new go.Size(120, 30)
    37                  }),
    38              $(go.TextBlock,
    39                  {margin: 4},
    40                  new go.Binding("text", "name"))
    41          );
    42  
    43      // define the link template
    44      Graph.linkTemplate =
    45          $(go.Link,
    46              {
    47                  selectionAdornmentTemplate:
    48                      $(go.Adornment,
    49                          $(go.Shape,
    50                              {isPanelMain: true, stroke: "dodgerblue", strokeWidth: 3}),
    51                          $(go.Shape,
    52                              {toArrow: "Standard", fill: "dodgerblue", stroke: null, scale: 1})
    53                      ),
    54                  routing: go.Link.Normal,
    55                  curve: go.Link.Bezier,
    56                  toShortLength: 2
    57              },
    58              $(go.Shape,  //  the link shape
    59                  {name: "OBJSHAPE"}),
    60              $(go.Shape,  //  the arrowhead
    61                  {name: "ARWSHAPE", toArrow: "Standard"})
    62          );
    63  
    64      // define the group template
    65      Graph.groupTemplate =
    66          $(go.Group, "Spot",
    67              {
    68                  selectionAdornmentTemplate: // adornment when a group is selected
    69                      $(go.Adornment, "Auto",
    70                          $(go.Shape, "Rectangle",
    71                              {fill: null, stroke: "dodgerblue", strokeWidth: 3}),
    72                          $(go.Placeholder)
    73                      ),
    74                  toSpot: go.Spot.AllSides, // links coming into groups at any side
    75                  toEndSegmentLength: 30, fromEndSegmentLength: 30
    76              },
    77              $(go.Panel, "Auto",
    78                  $(go.Shape, "Rectangle",
    79                      {
    80                          name: "OBJSHAPE",
    81                          parameter1: 14,
    82                          fill: "rgba(94,216,238,0.10)"
    83                      },
    84                      new go.Binding("desiredSize", "ds")),
    85                  $(go.Placeholder,
    86                      {padding: 16})
    87              ),
    88              $(go.TextBlock,
    89                  {
    90                      name: "GROUPTEXT",
    91                      alignment: go.Spot.TopLeft,
    92                      alignmentFocus: new go.Spot(0, 0, -4, -4),
    93                      font: "Bold 10pt Sans-Serif"
    94                  },
    95                  new go.Binding("text", "key"))
    96          );
    97  
    98      var data = fetch("/graph").then(function (response) {
    99          return response.json();
   100      }).then(function (data) {
   101          Graph.model.nodeDataArray = Object.keys(data.nodes).map(function (nodePath) {
   102              return {
   103                  key: data.nodes[nodePath].path,
   104                  name: data.nodes[nodePath].path.split('/').pop(),
   105                  isGroup: data.nodes[nodePath].type === 1,
   106                  group: data.nodes[nodePath].parent,
   107              }
   108          });
   109  
   110          Graph.model.linkDataArray = data.links.filter(link => link.is_visible)
   111              .map(function (link) {
   112                  return {
   113                      from: link.from.path,
   114                      to: link.to.path,
   115                      key: `${link.from.path}_${link.to.path}`
   116                  }
   117              });
   118      });
   119  
   120  </script>
   121  </body>
   122  </html>