@opkeydev wrote:
HI,
when i link my node from node top to node right side then the link will automatically get connected to the top of the node.for node template is am using this code
myDiagram.nodeTemplate =
$(go.Node, "Auto",{ layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved }, //{ locationSpot: go.Spot.Center, resizable: false, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, minSize: new go.Size(108, 67) }, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), { resizable: false, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate, desiredSize: new go.Size(108, 67), minSize: new go.Size(108, 67), maxSize: new go.Size(220, 120) }, new go.Binding("angle").makeTwoWay(), new go.Binding("position", "position", go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), $(go.Shape, "RoundedRectangle", { parameter1: 2, fill: fill, stroke: "orange", strokeWidth: 2, spot1: new go.Spot(0, 0, 1, 1), spot2: new go.Spot(1, 1, -1, 0), minSize: new go.Size(95, 59), maxSize: new go.Size(220, 120), portId: "", fromLinkable: true, fromSpot: go.Spot.AllSides, toLinkable: true, toSpot: go.Spot.AllSides, cursor: "pointer", fromLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkableSelfNode: true, toLinkableDuplicates: true, alignment: go.Spot.Center, }, new go.Binding("figure", "figure").makeTwoWay(), new go.Binding("fill", "fill").makeTwoWay(), new go.Binding("stroke", "stroke").makeTwoWay() ), $(go.Panel, "Vertical", { alignment: go.Spot.Top, stretch: go.GraphObject.Horizontal, minSize: new go.Size(108, 67) }, $(go.Panel, "Table", { background: "lightblue", stretch: go.GraphObject.Horizontal, width: 15.5, height: 13 }, //$("TreeExpanderButton", { alignment: go.Spot.Left }), //$("Button", { alignment: go.Spot.Right, width: 13.5, height: 13.5, visible: false }) $(go.Shape, "StopSign", { alignment: go.Spot.TopLeft, margin: 2, fill: "red", width: 8, height: 8, stroke: null, visible: visible }, new go.Binding("visible", "visible").makeTwoWay())), $(go.TextBlock, { font: "12px Arial, sans-serif", //stroke: lightText, margin: 4, stretch: go.GraphObject.Horizontal, textAlign: "center", height: 38, maxLines: 3, // cursor: "move", verticalAlignment: go.Spot.Center, editable: true, isMultiline: true, //textValidation: validateText, textEdited: function (textBlock, previousText, currentText) { if (previousText != currentText) { $scope.MBTOperationScope.renameNode(currentText.trim()); } }, }, //n ew go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), new go.Binding("text", "text").makeTwoWay()), { toolTip: $("ToolTip", new go.Binding("visible", "text", function (t) { return !!t; }).ofObject("TB"), $(go.TextBlock, { name: "TB", margin: 4, font: "bold 12px Verdana,serif", stroke: "black" }, new go.Binding("text", "", diagramNodeInfo)) ) }), //$(go.Shape, { // width: 20, height: 10, fill: "transparent", stroke: "gray", // alignment: go.Spot.Top, alignmentFocus: go.Spot.Top, // portId: "T", toSpot: go.Spot.Top, // toLinkable: true, toLinkableSelfNode: true,toLinkableDuplicates: true, //}), //$(go.Shape, { // width: 20, height: 10, fill: "transparent", stroke: "gray", // alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Bottom, // portId: "B", fromSpot: go.Spot.Bottom, // fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true, //}), { contextMenu: $(go.Adornment) }, { // handle mouse enter/leave events to show/hide the ports mouseEnter: function (e, node) { showSmallPorts(node, true); }, mouseLeave: function (e, node) { showSmallPorts(node, false); }, //mouseDrop: dropOntoNode } );and for linking i am using
myDiagram.linkTemplate =
$(MultiArrowLink,
{curve: go.Link.JumpOver, toShortLength: 3, corner: 5, routing: go.Link.AvoidsNodes, adjusting: go.Link.Scale, relinkableFrom: true, relinkableTo: true, reshapable: true, resegmentable: true, fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true, selectionAdorned: false, mouseEnter: function (e, link) { console.log('link focus in'); dataFactory.customNodeObject['e'] = e; dataFactory.customNodeObject['link'] = link; link.findObject("HIGHLIGHT").stroke = "rgba(24,87,255,2.0)"; link.isHighlighted = true; }, mouseLeave: function (e, link) { console.log('link focus out'); dataFactory.customNodeObject = new Object(); link.findObject("HIGHLIGHT").stroke = "gray"; link.isHighlighted = false; }, mouseDrop: dropOntoLink, toShortLength: 2, }, new go.Binding("fromSpot", "fromSpot", go.Spot.parse), new go.Binding("toSpot", "toSpot", go.Spot.parse), new go.Binding("points").makeTwoWay(), new go.Binding("routing", "routing"), new go.Binding("curviness"), $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 1.5, name: "HIGHLIGHT" }), $(go.Shape, { fromArrow: "Circle", fill: "gray", strokeWidth: 2, stroke: "gray" }), $(go.Shape, { toArrow: 'Triangle', fill: "gray", strokeWidth: 2, stroke: "gray" }), $(go.Panel, "Auto", { _isLinkLabel: true, cursor: "move" }, // marks this Panel as being a draggable label $(go.Shape, { isPanelMain: true, fill: "white", stroke: "orange", strokeWidth: 2 }, new go.Binding("stroke", "stroke").makeTwoWay() ), $(go.Shape, "StopSign", { alignment: go.Spot.TopLeft, margin: 3, width: 8, height: 8, fill: "red", visible: visible, stroke: null }, new go.Binding("visible", "visible").makeTwoWay()), new go.Binding('visible', 'text', function (t) { return t.trim() !== '' }), $(go.TextBlock, "Label", { margin: 3, editable: true, isMultiline: true, // don't allow embedded newlines textValidation: validateText, segmentIndex: 0, segmentFraction: 0.5, textEdited: function (textBlock, previousText, currentText) { if (previousText != currentText) { var selectedData = myDiagram.selection.first().data; if (selectedData.hasOwnProperty('EdgeID')) { var edgeName = currentText.split('\u00AD'); if (edgeName.length > 1) { edgeName = currentText.split('\u00AD')[1].trim(); } else { edgeName = currentText.trim(); } $scope.MBTOperationScope.renameEdge(edgeName); } } } }, new go.Binding('visible', 'text', function (t) { return t.trim() !== '' }), new go.Binding("text", "text", function (e) { if (e != "") { return "\u00AD " + e; } }).makeTwoWay(), { toolTip: $("ToolTip", new go.Binding("visible", "text", function (t) { return !!t; }).ofObject("TB"), $(go.TextBlock, { name: "TB", margin: 4, font: "bold 12px Verdana,serif", stroke: "black" }, new go.Binding("text", "", diagramNodeInfo)) ) } ), { contextMenu: $(go.Adornment) }, new go.Binding("segmentIndex").makeTwoWay(), new go.Binding("segmentFraction").makeTwoWay() ) );
Posts: 4
Participants: 2