Visszalépés

GoJS diagrammok kapcsolódására bemutató példa


Alakzatok egérrel elmozgathatók, és kapcsolódásaik megmaradnak.
Alakzatot a div területén kívülre mozgatjuk, akkor megjelenik a görgetősáv.
Egeret a div területére mozgatjuk és görgetjük, alakzatok egyformán fel vagy lefelé mozgathatók.
Ha egér balos billentyűjét lenyomva tartjuk és körbevisszük az alakzatok körül, alakzatok kijelölésre kerülnek.
Ekkor bármelyik alakzaton egér balos billentyűjét lenyomva tartása mellett, minden alakzatot egyszerre mozgathatunk.



Fenti programunk leírása.

<!DOCTYPE html>
<html lang="hu">
<head> 
<meta charset="UTF-8">
  <title>gojs2 Minimal GoJS bemutató</title>
<link href="Saját-stílus-fájlod.css" rel="stylesheet" type="text/css" />
  <script  src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.17/go-debug.js"></script>
</head>

<body onload="diagramPelda">
<div id="container">

<div id="myDiagram" style="border: solid 1px black; width:400px; height:400px"></div>

<script>
  function diagramPelda() {
    if (window.goSamples) goSamples();
    var $ = go.GraphObject.make;                   // A sablonok típusának meghatározása. ( Object )

    myDiagram = $(go.Diagram, "myDiagram",                      // Hozzon létre egy diagramot, a HTML <div id="myDiagram">  elem területén.
                  { initialContentAlignment: go.Spot.Center });            // <div id="myDiagram"> területén, központosítsa a tartalmat.

    // Meghatározunk egy egyszerű csomópont-sablont, formát.
    myDiagram.nodeTemplate =                          // nodeTemplate = Csomópont sablon. 
      $(go.Node, "Auto",                                     // Node = Csomópont;  Auto = Automata. 
          $(go.Shape, "RoundedRectangle",            // Shape= Alak-forma; RoundedRectangle = Lekerekített téglalap, Rectangle = téglalap       
               new go.Binding("fill", "hatterszine")        // fill=Kitöltés,  a hatterszine = a szín egyedi azonosítója.
           ),
		  
          $(go.TextBlock,                                                                     // Létrehozunk egy szöveges blokkot.
             { margin: 8 stroke: "blue", font: "bold 16px sans-serif" },        // Szöveg stílusa:  margin, szöveg színe, betű mérete és típusa.                  
              new go.Binding("text", "key")                                                // TextBlockhoz tartozó text = szöveg;    azonosítója = key
            )
     );

// Ha nem a Diagram.linkTemplate parancsot állítja be, akkor használja az alapértelmezett LinksModel azaz Link sablont, formát.

// Létrehozunk olyan modelladatokat, amelyeket a csomópontok és a linkek képviselnek.
    myDiagram.model = new go.GraphLinksModel(
    [                       // Meghatározzuk diagram alakzatok key: "tartalmát", és hatterszine: "színét".
      { key: "Alpha", hatterszine: "lightblue" },
      { key: "Beta", hatterszine: "orange" },
      { key: "Gamma", hatterszine: "lightgreen" },
      { key: "Delta", hatterszine: "pink" }
    ],
    [                        // Meghatározzuk alakzatok egymáshoz való kapcsolódását.
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ] );

    // Engedélyezzük a Ctrl-Z visszavonást, és a Ctrl-Y újraindítást.(Ezt, a Diagram.model hozzárendelése után tegyük meg.)
    myDiagram.undoManager.isEnabled = true;
}
</script>

</div>
</body>
</html>