GoJS Diagram alakzatok és diagram információ bemutató.
GoJS diagram tartalmához, keretformák.
Diagram tartalmához, alakzati formák: Téglalap = figure: "Rectangle" Rombusz = figure: "Diamond" Kör vagy ovális = figure: "Ellipse" Háromszög = figure: "Triangle" Négyszög = figure: "Square" Ötszög = figure: "Pentagon" Hatszög = figure: "Hexagon" Hétszög = figure: "Heptagon" Nyolsszög = figure: "Octagon" Tízenkétszög = figure: "Dodecagon" Megjegyzés: Ellipse = Kör vagy ovális, a diagram tartalma határozza meg. Ötszög, hatszög stb. szabályos vagy sem, a diagram tartalma határozza meg. Diagramhoz többsoros szöveget alkalmazunk, sortöréshez <br> elemet nem alkalmazhatjuk, helyette alkalmazzuk a \n jelölést.
Diagram használata:
A HTML panel eleme, kölcsönhatásban áll a fő diagrammal.
A panel területén lévő diagramok szövegére kattintva, megjelenik egy kijelölőnégyzet.
A kijelölőnégyzet egérrel történő elhúzása a fő diagram területére és billentyű felengedését követően, bővebb információ jelenik meg.
Kijelölőnégyzet egérrel történő elhúzásával, alakzatot elrejthetjük a panel mögé, vagy hagyhatjuk a fő diagram területén is.
Eredeti állapot visszaállításához, kattintsunk az oldal frissítésre, vagy nyomjuk le az F5 billentyűt.
Fő diagram.
Panel
Információs ablak.
Információhoz, panelon válasszunk ki egy elemet egér balos billentyűjének lenyomásával, és húzzuk panelon kívülre, majd a billentyűt, engedjük fel.
A gojsalakzatok.html fájlunk tartalma:
<!doctype html> <html lang="hu"> <html> <head> <meta charset="UTF-8"> <title>Gojs alakzatok</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- jQuery. --> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script> <!-- jQuery. --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.17/go-debug.js"></script> <!-- goJS --> <link href="gojsalakzatok.css" rel="stylesheet" type="text/css" /> <!-- CSS azaz stílus fájlunk. --> </head> <body onload="init()"> <div id="container"> <h1>goJS alakzatok és infó</h1> <div id="minta"> <div style="padding: 5px; width:85%;"> <!-- Panel és tartalma. --> <div id="panel" class="huzhato"> <div id="panelFogantyu" class="pfogantyu">Panel</div> <div id="paneltartalom"> <div id="panelElemek"></div> </div> </div> <!-- Információs ablak. --> <div id="info" class="huzhato"> <div id="infoFogantyu" class="pfogantyu">Információs ablak.</div> <div id="informacio">Információhoz, panelon válasszunk ki egy elemet egér balos billentyűjének lenyomásával, és húzzuk panelon kívülre, majd a billentyűt, engedjük fel.</div> </div> <!-- Fő diagram. --> <div id="diagram"> </div> </div> </div> <script type="text/javascript" src="gojsalakzatok.js"> </script> </div> </body> </html>
A gojsalakzatok.css fájlunk tartalma:
body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc; }
#container {width: 950px; margin-top: 15px; margin-right: auto; margin-left: auto;}
h1 {font-size: 33px; color: #363; text-align: center;}
#minta{width:97%; margin-left:5px; padding:5px; background-color: pink;}
.huzhato {
position: absolute; margin-top: 20px; margin-left: 80px; z-index: 40;
display: inline-block; vertical-align: top;
border: 4px solid #BBB; border-radius: 5px; background-color: whitesmoke;
}
/* A panel és Információs terület fogantyújának fejlécének stílusa. */
.pfogantyu { background-color: lightblue; cursor: move; text-align: center; font: bold 12px sans-serif; }
/* Információs ablak. */
#info {position: absolute; width: 300px; margin-top: 200px; margin-left: 380px; border:2px solid red; }
/* Tájékoztató szövegterület formázása. */
#informacio { padding: 15px; font-size:12px;}
#panel{height: 400px; border:2px solid black;}
/* Panel oszlop tartalmának pozíciói, és a div kitöltse a helyét. */
#paneltartalom {position:absolute; bottom: 5px; left: 0px; right: 0px; top: 14px;}
/* Panel oszlop. Méreteit a #paneltatalom határozza meg. */
#panelElemek { width: 100%; height: 100%; background-color: moccasin; }
/* A fő diagram területe. */
#diagram{ height:750px; border:solid 2px blue; background-color: lavender; }
A gojsalakzatok.js fájlunk tartalma:
Figyelj: Programunkhoz jQuery scriptet is használunk.
Ezért a go.GraphObject.make változónévhez $ jelet nem alkalmazunk, $ jelet a jQuery-hoz alkalmazzuk.
Figyelj: Programunkhoz jQuery scriptet is használunk.
Ezért a go.GraphObject.make változónévhez $ jelet nem alkalmazunk, $ jelet a jQuery-hoz alkalmazzuk.
function init() {
if (window.goSamples) goSamples(); // Ezeknek a mintáknak, nem kell az init-et meghívni.
var GO = go.GraphObject.make; // A sablonok meghatározásához kell.
Diagrammom = GO(go.Diagram, "diagram", // Meg kell adni, a HTML DIV elem azonosítóját.
{ allowDrop: true }); // Igaznak kell lennie, hogy elfogadja a panelon lévő elemeket.
// Meghatározunk több választható háttérszínt és keretszínt a diagram alakzataihoz. -----------------------------
// Meghatározhatunk gradient színátmenetet is.
var hatter1 = GO(go.Brush, go.Brush.Linear, { 0: "rgb(115,220,241)", 0.6: "rgb(105,210,231)", 1: "rgb(75,180,201)" });
var keret1 = "blue";
var hatter2 = GO(go.Brush, go.Brush.Linear, { 0: "rgb(177,229,226)", 0.6: "rgb(234,238,214)", 1: "rgb(137,189,186)" });
var keret2 = "cyan";
var hatter3 = GO(go.Brush, go.Brush.Linear, { 0: "rgb(234,238,214)", 0.6: "rgb(224,228,204)", 1: "rgb(194,198,174)" });
var keret3 = "green";
var hatter4 = GO(go.Brush, go.Brush.Linear, { 0: "rgb(253,164,58)", 0.6: "rgb(243,134,48)", 1: "rgb(213,104,18)" });
var keret4 = "rgb(203,84,08)";
var hatter5 = GO(go.Brush, go.Brush.Linear, { 0: "rgb(250,0,0)", 0.6: "rgb(243,134,48)", 1: "rgb(213,104,18)" });
var keret5 = "firebrick";
var keret7 = "red";
var keret8 = "black";
var keret12 = "sienna";
var keret15 = "orangered"; // Körhöz keret.
var keret44 = "darkred"; // Négyzethez keret.
var keretu = "moccasin"; // Üres területhez keret.
var hatteru = "moccasin"; // Üres területhez háttér.
// ---------------------------------------------------------------------------------------------------------------------
Diagrammom.nodeTemplateMap.add("", // Alapértelmezett, default kategória.
GO(go.Node, "Auto", { locationSpot: go.Spot.Center },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
GO(go.Shape, "Ellipse",
{ strokeWidth: 2, fill: hatter1, name: "D_ALAK" }, // Diagram alakzat egyedi neve = D_ALAK
new go.Binding("figure", "figure"),
new go.Binding("fill", "fill"),
new go.Binding("stroke", "stroke")
),
GO(go.TextBlock,
{ margin: 5, maxSize: new go.Size(100, NaN),
wrap: go.TextBlock.WrapFit,
textAlign: "center", // Diagram szöveg igazítás: left, center, right
editable: true,
font: "bold 9pt Helvetica, Arial, sans-serif",
name: "SZOVEG" }, // Diagram tartalmának egyedi neve = SZOVEG
new go.Binding("text", "text").makeTwoWay()
)
)
);
// ---------------------------------------------------------------------------------------------------------------------
// HTML tárolóban lévő, húzható palettát / panelt inicializálja.
panelElemek = new go.Palette("panelElemek"); // Meg kell adni, a HTML DIV elem azonosítóját.
panelElemek.nodeTemplateMap = Diagrammom.nodeTemplateMap;
panelElemek.model = new go.GraphLinksModel( [
{ text: "\n \n", fill: hatteru, stroke: keretu, figure: "Rectangle" },
{ text: "Téglalap", fill: hatter2, stroke: keret2, figure: "Rectangle"},
{ text: "Rombusz", fill: hatter3, stroke: keret3, figure: "Diamond" },
{ text: "Tojás és\n Kör", fill: hatter1, stroke: keret15, figure: "Ellipse" },
{ text: "3 szög", fill: hatter5, stroke: keret3, figure: "Triangle" },
{ text: "Négyzet", fill: hatter5, stroke: keret44, figure: "Square" },
{ text: "5\n szög", fill: hatter5, stroke: keret5, figure: "Pentagon" },
{ text: "6 szög", fill: hatter5, stroke: keret1, figure: "Hexagon" },
{ text: "7\n szög", fill: hatter3, stroke: keret7, figure: "Heptagon" },
{ text: "8\n szög", fill: hatter4, stroke: keret8, figure: "Octagon" },
{ text: "12\n szög", fill: hatter3, stroke: keret12, figure: "Dodecagon" }
] );
// ---------------------------------------------------------------------------------------------------------------------
panelElemek.addDiagramListener("InitialLayoutCompleted", function(diagramEvent) {
var paneldrag = document.getElementById("panel");
var dpanel = diagramEvent.diagram;
var paddingHorizontal = dpanel.padding.left + dpanel.padding.right;
var paddingVertical = dpanel.padding.top + dpanel.padding.bottom;
paneldrag.style.width = dpanel.documentBounds.width + 50 + "px"; // Panel szélességének növelése.
paneldrag.style.height = dpanel.documentBounds.height + 40 + "px"; // Panel magasságának növelése.
});
// ---------------------------------------------------------------------------------------------------------------------
var info = document.getElementById("informacio");
Diagrammom.addChangedListener(function (e) {
var sel = e.diagram.selection;
var str = "";
if (sel.count === 0) {
str = "Alakzatok, csomópontok kiválasztása és elmozgatása után, itt a fő diagramban jelenik meg, az információ.";
info.innerHTML = str;
return;
} else if (sel.count > 1) {
str = sel.count + " objects selected.";
info.innerHTML = str;
return;
}
// ---------------------------------------------------------------------------------------------------------------------
// Egy kiválasztott diagram objektumhoz, megjelenítünk néhány információt. ----------------------------
var elem = sel.first();
var alakzat = elem.findObject("D_ALAK");
var txtblock = elem.findObject("SZOVEG");
str += "<p><strong>Kiválasztott csomópont adatai:</strong></p>";
str += "<p>Forma: " + alakzat.figure + "</p>";
str += "<p>Szöveg: " + txtblock.text + "</p>";
var strokeColor = alakzat.stroke;
str += '<p style="color:blue;">Keretszín: <b>'+strokeColor+'</b></p>';
// Tetszőleges tájékoztató szöveg, a diagram objektumaihoz. -----------------------------------
var azonos=txtblock.text; // Kiválasztott diagram tartalmának beazonosítása.
// Diagram elemek tartalmát, változókhoz rendeljük.
var teglalap="Téglalap"; var rombusz="Rombusz"; var kor="Tojás és\n Kör"; var haromszog="3 szög"; var negyzet="Négyzet";
var otsz="5\n szög"; var hatsz="6 szög"; var hetsz="7\n szög"; var nyolcsz="8\n szög"; var tkettosz="12\n szög";
if(teglalap==azonos){str += "<p>Kerülete = a+b*2<br>Területe = a*b</p>";}
if(rombusz==azonos){str += "<p>Kerülete = a*4</p>";}
if(kor==azonos){str += "<p>Kör:<br>Kerülete = 2*r*π<br>Területe = r<sup>2</sup> * π</p>";}
if(haromszog==azonos){str += "<p>Kerülete = a+b+c<br>Területe = a*m / 2</p>";}
if(negyzet==azonos){str += "<p>Kerülete = a*4<br>Területe = a*a</p>";}
if(otsz==azonos){str += "<p>Szabályos ötszög:<br>Kerülete = a*5<br>
Területe:<br>x = r<sup>2</sup> : (a/2)<sup>2</sup><br> m = x négyzetgyöke.<br>T = (a*m /2)*5</p>";}
if(hatsz==azonos){str += "<p>Szabályos hatszög:<br>Kerülete = a*6<br>
Területe:<br>x = r<sup>2</sup> : (a/2)<sup>2</sup><br> m = x négyzetgyöke.<br>T = (a*m /2)*6</p>";}
if(hetsz==azonos){str += "<p>Szabályos hétszög:<br>Kerülete = a*7<br>
Területe:<br>x = r<sup>2</sup> : (a/2)<sup>2</sup><br> m = x négyzetgyöke.<br>T = (a*m /2)*7</p>";}
if(nyolcsz==azonos){str += "<p>Szabályos nyolcszög:<br>Kerülete = a*8<br>
Területe:<br>x = r<sup>2</sup> : (a/2)<sup>2</sup> <br> m = x négyzetgyöke.<br>T = (a*m /2)*8</p>";}
if(tkettosz==azonos){str += "<p>Szabályos tizenkétszög:<br>Kerülete = a*12<br>
Területe:<br>x = r<sup>2</sup> : (a/2)<sup>2</sup> <br> m = x négyzetgyöke.<br>T = (a*m /2)*12</p>";}
info.innerHTML = str;
});
// Fogantyú a penel és info ablak területének mozgatáshoz. ------------------------------
$(function() {
$("#panel").draggable({handle: "#panelFogantyu"}).resizable({
// Áthelyezéskor, végezzen el egy másik elrendezést, hogy illeszkedjen minden a panel nézetablakában.
stop: function(){ panelElemek.layoutDiagram(true); }
});
$("#info").draggable({handle: "#infoFogantyu"});
});
}