Skip to content

Commit 334af06

Browse files
mujtabachangmujtabachang
committed
First comment
0 parents  commit 334af06

18 files changed

+96314
-0
lines changed

‎600px-Black_pencil.svg.png

4.65 KB
Loading

‎copy.png

3.11 KB
Loading

‎nod.js

+267
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
function init() {
2+
var $ = go.GraphObject.make;
3+
myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
4+
{
5+
"linkingTool.isEnabled": false, // invoked explicitly by drawLink function, below
6+
"linkingTool.direction": go.LinkingTool.ForwardsOnly, // only draw "from" towards "to"
7+
"undoManager.isEnabled": true // enable undo & redo
8+
});
9+
10+
myDiagram.linkTemplate =
11+
$(go.Link,
12+
{ routing: go.Link.AvoidsNodes, corner: 5 },
13+
$(go.Shape, { strokeWidth: 1.5 })
14+
);
15+
16+
myDiagram.nodeTemplate =
17+
$(go.Node, "Auto",
18+
{
19+
20+
// rearrange the link points evenly along the sides of the nodes as links are
21+
// drawn or reconnected -- these event handlers only make sense when the fromSpot
22+
// and toSpot are Spot.xxxSides
23+
linkConnected: function(node, link, port) {
24+
if (link.fromNode !== null) link.fromNode.invalidateConnectedLinks();
25+
if (link.toNode !== null) link.toNode.invalidateConnectedLinks();
26+
},
27+
linkDisconnected: function(node, link, port) {
28+
if (link.fromNode !== null) link.fromNode.invalidateConnectedLinks();
29+
if (link.toNode !== null) link.toNode.invalidateConnectedLinks();
30+
},
31+
locationSpot: go.Spot.Center
32+
},
33+
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
34+
$(go.Shape, "RoundedRectangle",
35+
{
36+
name: "SHAPE", // named so that changeColor can modify it
37+
strokeWidth: 0, // no border
38+
fill: "lightgray", // default fill color
39+
portId: "",
40+
// use the following property if you want users to draw new links
41+
// interactively by dragging from the Shape, and re-enable the LinkingTool
42+
// in the initialization of the Diagram
43+
//cursor: "pointer",
44+
fromSpot: go.Spot.AllSides, fromLinkable: true,
45+
fromLinkableDuplicates: true, fromLinkableSelfNode: true,
46+
toSpot: go.Spot.AllSides, toLinkable: true,
47+
toLinkableDuplicates: true, toLinkableSelfNode: true
48+
},
49+
new go.Binding("fill", "color").makeTwoWay()),
50+
$(go.TextBlock,
51+
{
52+
name: "TEXTBLOCK", // named so that editText can start editing it
53+
margin: 7,
54+
// use the following property if you want users to interactively start
55+
// editing the text by clicking on it or by F2 if the node is selected:
56+
//editable: true,
57+
overflow: go.TextBlock.OverflowEllipsis,
58+
maxLines: 5
59+
},
60+
new go.Binding("text").makeTwoWay())
61+
);
62+
63+
// a selected node shows an Adornment that includes both a blue border
64+
// and a row of Buttons above the node
65+
myDiagram.nodeTemplate.selectionAdornmentTemplate =
66+
$(go.Adornment, "Spot",
67+
$(go.Panel, "Auto",
68+
$(go.Shape, { stroke: "dodgerblue", strokeWidth: 0, fill: null }),
69+
$(go.Placeholder)
70+
),
71+
$(go.Panel, "Horizontal",
72+
{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, name: "BUTTONPANEL" },
73+
$("Button" ,
74+
{ name:"BUTTON", click: addButtons }, // defined below, to support editing the text of the node
75+
$(go.TextBlock, "+",
76+
{ font: "bold 10pt sans-serif", desiredSize: new go.Size(15, 15), textAlign: "center" })
77+
),
78+
$("Button",
79+
{ click: editText }, // defined below, to support editing the text of the node
80+
$(go.Picture,
81+
{ source: "600px-Black_pencil.svg.png", width: 15, height: 15})
82+
),
83+
$("Button",
84+
{ click: editText }, // defined below, to support editing the text of the node
85+
$(go.Picture,
86+
{ source: "copy.png", width: 15, height: 15})
87+
),
88+
$("Button",
89+
{ click: editText }, // defined below, to support editing the text of the node
90+
$(go.Picture,
91+
{ source: "trash.png", width: 15, height: 15})
92+
),
93+
// $("Button",
94+
// { click: changeColor, "_buttonFillOver": "transparent" }, // defined below, to support changing the color of the node
95+
// new go.Binding("ButtonBorder.fill", "color", nextColor),
96+
// $(go.Shape,
97+
// { fill: null, stroke: null, desiredSize: new go.Size(14, 14) })
98+
// ),
99+
$("Button",
100+
{ // drawLink is defined below, to support interactively drawing new links
101+
click: drawLink, // click on Button and then click on target node
102+
actionMove: drawLink // drag from Button to the target node
103+
},
104+
$(go.Shape,
105+
{ geometryString: "M0 0 L8 0 8 12 14 12 M12 10 L14 12 12 14" })
106+
),
107+
// $("Button",
108+
// {
109+
// actionMove: dragNewNode, // defined below, to support dragging from the button
110+
// _dragData: { text: "a Node", color: "lightgray" }, // node data to copy
111+
// click: clickNewNode // defined below, to support a click on the button
112+
// },
113+
// $(go.Shape,
114+
// { geometryString: "M0 0 L3 0 3 10 6 10 x F1 M6 6 L14 6 14 14 6 14z", fill: "gray" })
115+
// )
116+
)
117+
);
118+
119+
function editText(e, button) {
120+
var node = button.part.adornedPart;
121+
e.diagram.commandHandler.editTextBlock(node.findObject("TEXTBLOCK"));
122+
}
123+
124+
// used by nextColor as the list of colors through which we rotate
125+
var myColors = ["lightgray", "lightblue", "lightgreen", "yellow", "orange", "pink"];
126+
127+
// used by both the Button Binding and by the changeColor click function
128+
function nextColor(c) {
129+
var idx = myColors.indexOf(c);
130+
if (idx < 0) return "lightgray";
131+
if (idx >= myColors.length - 1) idx = 0;
132+
return myColors[idx + 1];
133+
}
134+
135+
function changeColor(e, button) {
136+
var node = button.part.adornedPart;
137+
var shape = node.findObject("SHAPE");
138+
if (shape === null) return;
139+
node.diagram.startTransaction("Change color");
140+
shape.fill = nextColor(shape.fill);
141+
button["_buttonFillNormal"] = nextColor(shape.fill); // update the button too
142+
node.diagram.commitTransaction("Change color");
143+
}
144+
145+
function drawLink(e, button) {
146+
var node = button.part.adornedPart;
147+
var tool = e.diagram.toolManager.linkingTool;
148+
tool.startObject = node.port;
149+
e.diagram.currentTool = tool;
150+
tool.doActivate();
151+
}
152+
153+
// used by both clickNewNode and dragNewNode to create a node and a link
154+
// from a given node to the new node
155+
function createNodeAndLink(data, fromnode) {
156+
var diagram = fromnode.diagram;
157+
var model = diagram.model;
158+
var nodedata = model.copyNodeData(data);
159+
model.addNodeData(nodedata);
160+
var newnode = diagram.findNodeForData(nodedata);
161+
var linkdata = model.copyLinkData({});
162+
model.setFromKeyForLinkData(linkdata, model.getKeyForNodeData(fromnode.data));
163+
model.setToKeyForLinkData(linkdata, model.getKeyForNodeData(newnode.data));
164+
model.addLinkData(linkdata);
165+
diagram.select(newnode);
166+
return newnode;
167+
}
168+
169+
// the Button.click event handler, called when the user clicks the "N" button
170+
function clickNewNode(e, button) {
171+
var data = button._dragData;
172+
if (!data) return;
173+
e.diagram.startTransaction("Create Node and Link");
174+
var fromnode = button.part.adornedPart;
175+
var newnode = createNodeAndLink(button._dragData, fromnode);
176+
newnode.location = new go.Point(fromnode.location.x + 200, fromnode.location.y);
177+
e.diagram.commitTransaction("Create Node and Link");
178+
}
179+
180+
// the Button.actionMove event handler, called when the user drags within the "N" button
181+
function dragNewNode(e, button) {
182+
var tool = e.diagram.toolManager.draggingTool;
183+
if (tool.isBeyondDragSize()) {
184+
var data = button._dragData;
185+
if (!data) return;
186+
e.diagram.startTransaction("button drag"); // see doDeactivate, below
187+
var newnode = createNodeAndLink(data, button.part.adornedPart);
188+
newnode.location = e.diagram.lastInput.documentPoint;
189+
// don't commitTransaction here, but in tool.doDeactivate, after drag operation finished
190+
// set tool.currentPart to a selected movable Part and then activate the DraggingTool
191+
tool.currentPart = newnode;
192+
e.diagram.currentTool = tool;
193+
tool.doActivate();
194+
}
195+
}
196+
function addButtons(e, obj) {
197+
var adorn = obj.part;
198+
e.handled = true;
199+
var diagram = adorn.diagram;
200+
diagram.startTransaction("Add Buttons");
201+
var panel = adorn.findObject("BUTTONPANEL");
202+
panel.add(
203+
$(go.Panel, "Vertical",
204+
{ alignment: new go.Spot(0, 1) },
205+
$("ContextMenuButton",
206+
$(go.TextBlock, "Add child"),
207+
{
208+
209+
actionMove: dragNewNode, // defined below, to support dragging from the button
210+
_dragData: { text: "a Node", color: "lightgray" }, // node data to copy
211+
click: clickNewNode // defined below, to support a click on the button
212+
}),
213+
$("ContextMenuButton",
214+
$(go.TextBlock, "Add explanation"),
215+
{ alignment: go.Spot.Bottom,click: function(e, obj) { alert("Add explanation ") } })
216+
))
217+
// var adorn = obj.part;
218+
// e.handled = true;
219+
// var diagram = adorn.diagram;
220+
// diagram.startTransaction("Add Buttons");
221+
222+
// var panel = adorn.findObject("BUTTONPANEL");
223+
224+
// panel.add($("Button",
225+
// {
226+
// actionMove: dragNewNode, // defined below, to support dragging from the button
227+
// _dragData: { text: "a Node", color: "lightgray" }, // node data to copy
228+
// click: clickNewNode // defined below, to support a click on the button
229+
// },
230+
// $(go.TextBlock, "Add child")
231+
// ));
232+
// panel.add($("Button",
233+
// { position: new go.Point(0, 20) },
234+
// { click: function(e, obj) { alert("Add explanation " + adorn.adornedPart); } },
235+
// $(go.TextBlock, "Add explanation")
236+
// ));
237+
238+
diagram.commitTransaction("Add Buttons");
239+
}
240+
241+
// using dragNewNode also requires modifying the standard DraggingTool so that it
242+
// only calls commitTransaction when dragNewNode started a "button drag" transaction;
243+
// do this by overriding DraggingTool.doDeactivate:
244+
var tool = myDiagram.toolManager.draggingTool;
245+
tool.doDeactivate = function() {
246+
// commit "button drag" transaction, if it is ongoing; see dragNewNode, above
247+
if (tool.diagram.undoManager.nestedTransactionNames.elt(0) === "button drag") {
248+
tool.diagram.commitTransaction();
249+
}
250+
go.DraggingTool.prototype.doDeactivate.call(tool); // call the base method
251+
};
252+
253+
254+
myDiagram.model = new go.GraphLinksModel(
255+
[
256+
{ key: 1, text: "Alpha", color: "#d1bc8a", location: "0 0" },
257+
{ key: 2, text: "Beta", color: "#d1bc8a", location: "140 0" },
258+
{ key: 3, text: "Gamma", color: "#d1bc8a", location: "0 140" },
259+
{ key: 4, text: "Delta", color: "#d1bc8a", location: "140 140" }
260+
],
261+
[
262+
{ from: 1, to: 2 }
263+
]);
264+
265+
266+
267+
}

‎paste.png

3.11 KB
Loading

0 commit comments

Comments
 (0)