@meishadevs wrote:
I put two groups in the chart drawing area. One group is placed on the top one. The two groups are connected by wires. Then the nodes are put into the above group. When the number of nodes is too many, it will be above. The height of the group increases. At this time, the upper group will block the lower group. How do I change it? When the height of the upper group increases, let the lower group move a certain distance away from the upper group and block the lower group. , and how to get the information of the node currently added to the group when the node is added to the group
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Regrouping Demo</title> <style> body, h3, h4, div, ul, li { padding: 0; margin: 0; } ul, li { list-style: none; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /*IE/7/6*/ } .dialog { width: 1014px; margin: 0 auto; background-color: #EEEEEE; } .dialog-title { height: 42px; line-height: 42px; font-size: 18px; font-weight: normal; background-color: #fff; } .content { padding: 10px; } .left-menu { width: 112px; margin-right: 10px; background-color: #fff; float: left; } .left-menu .menu-title { height: 36px; line-height: 36px; background-color: #FAFAFA; text-align: center; font-weight: normal; font-size: 14px; border-bottom: solid 1px #CCCCCC; } </style> <script src="http://oq3pg8pg4.bkt.clouddn.com/go.js"></script> <script id="code"> function init() { var $ = go.GraphObject.make; myDiagram = $(go.Diagram, "myDiagramDiv", { allowDrop: true, grid: $(go.Panel, "Grid", { background: "white" }, $(go.Shape, "LineH", {stroke: "#F2F2F2"}), $(go.Shape, "LineV", {stroke: "#F2F2F2"}) ), mouseDrop: function (e) { finishDrop(e, null); }, initialContentAlignment: go.Spot.Center, "grid.visible": true, "undoManager.isEnabled": true }); myDiagram.addDiagramListener("ExternalObjectsDropped", function (e) { var node = e.subject.Ea.key.Zd; myDiagram.model.setDataProperty(node, "minSize", new go.Size(280, 70)); }); function finishDrop(e, grp) { if (grp !== null) { var gloc = grp.location.copy(); var ok = grp.addMembers(e.diagram.selection, true); if (!ok) { e.diagram.currentTool.doCancel(); } else { var newbnds = e.diagram.computePartsBounds(e.diagram.selection); e.diagram.moveParts(e.diagram.selection, gloc.subtract(newbnds.position), false); } } else { var ok = e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true); if (!ok) e.diagram.currentTool.doCancel(); } } function nodeStyle() { return [ new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), { locationSpot: go.Spot.Center, mouseEnter: function (e, obj) { showPorts(obj.part, true); }, mouseLeave: function (e, obj) { showPorts(obj.part, false); } } ]; } function showPorts(node, show) { var diagram = node.diagram; if (!diagram || diagram.isReadOnly || !diagram.allowLink) return; node.ports.each(function (port) { port.fill = show ? "rgba(0, 0, 0, 0.5)" : null; }); } function makePort(name, spot, output, input) { return $(go.Shape, "Circle", { fill: "transparent", stroke: null, desiredSize: new go.Size(8, 8), alignment: spot, alignmentFocus: spot, portId: name, fromSpot: spot, toSpot: spot, fromLinkable: output, toLinkable: input, cursor: "pointer" }); } myDiagram.groupTemplateMap.add("OfGroups", $(go.Group, "Auto", { name: "Groups", background: "transparent", computesBoundsAfterDrag: true, mouseDrop: finishDrop, layout: $(go.GridLayout, { alignment: go.GridLayout.Position, wrappingColumn: 5, cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4), sorting: go.GridLayout.Forward }), }, nodeStyle(), $(go.Shape, "Rectangle", { stroke: "#ff913a", strokeWidth: 2, cursor: "pointer", fromLinkable: true, toLinkable: true, fromLinkableSelfNode: true, toLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkableDuplicates: true }, new go.Binding("fill", "bgColor")), $(go.Panel, "Vertical", { name: "PanelVertical", minSize: new go.Size(20, 20) }, new go.Binding("minSize", "minSize").makeTwoWay(), $(go.Panel, "Horizontal", { stretch: go.GraphObject.Horizontal, background: "#FFAA99" }, $(go.TextBlock, { alignment: go.Spot.Left, margin: 5, isMultiline: false, font: "bold 18px sans-serif", opacity: 0.75, stroke: "#404040" }, new go.Binding("text", "text").makeTwoWay(), new go.Binding("font", "font").makeTwoWay() ) ), // end Horizontal Panel $(go.Placeholder, {padding: 5, alignment: go.Spot.TopLeft})//设置标题顶部位置 ), makePort("T", go.Spot.Top, true, true), makePort("L", go.Spot.Left, true, true), makePort("R", go.Spot.Right, true, true), makePort("B", go.Spot.Bottom, true, true) )); myDiagram.nodeTemplateMap.add("", $(go.Node, "Spot", nodeStyle(), $(go.Panel, "Auto", $(go.Shape, "Rectangle", { fill: "#00A9C9", stroke: null }, new go.Binding("figure", "figure")), $(go.TextBlock, { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "whitesmoke", margin: 8, maxSize: new go.Size(160, NaN), wrap: go.TextBlock.WrapFit, editable: false }, new go.Binding("text").makeTwoWay()) ) )); myDiagram.linkTemplate = $(go.Link, { routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver, corner: 5, relinkableFrom: true, relinkableTo: true, reshapable: true, resegmentable: true, }, $(go.Shape, { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }), $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 2 }), $(go.Shape, { toArrow: "standard", stroke: null, fill: "gray" }) ); myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal; myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal; myDiagram.model = $(go.GraphLinksModel, { linkFromPortIdProperty: "fromPort", // required information: linkToPortIdProperty: "toPort", // identifies data property names nodeDataArray: [], linkDataArray: [] }); myPalette = $(go.Palette, "myPaletteDiv", { nodeTemplateMap: myDiagram.nodeTemplateMap, groupTemplateMap: myDiagram.groupTemplateMap, layout: $(go.GridLayout, {wrappingColumn: 1, alignment: go.GridLayout.Position}) }); myPalette.model = new go.GraphLinksModel([ { key: -1024, nodeType: 4, text: "group", category: "OfGroups", isGroup: "true", font: "bold 13px sans-serif", bgColor: "#fff" }, { text: "hello" } ]); load(); } function save() { document.getElementById("mySavedModel").value = myDiagram.model.toJson(); } function load() { myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); } </script> </head> <body onload="init()"> <div id="sample"> <div class="dialog"> <h3 class="dialog-title"></h3> <div class="content clearfix"> <div class="left-menu"> <ul class="menu-list"> <li class="menu-item"> <h4 class="menu-title">group</h4> <div class="menu-content" id="myPaletteDiv" style="width: 112px; height: 500px"></div> </li> </ul> </div> <div class="right-content" id="myDiagramDiv" style="width: 872px; height: 610px;float: left"></div> </div> </div> <div> <button id="save" onclick="save()">save</button> <button id="load" onclick="load()">load</button> </div> <textarea name="" id="mySavedModel" cols="30" rows="10"> { "class": "go.GraphLinksModel", "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ {"key":-1024, "nodeType":4, "text":"group", "category":"OfGroups", "isGroup":"true", "font":"bold 13px sans-serif", "bgColor":"#fff", "loc":"-183.00000000000006 -189.69999999999993", "minSize":{"class":"go.Size", "width":280, "height":70}}, {"key":-2, "nodeType":4, "text":"group", "category":"OfGroups", "isGroup":"true", "font":"bold 13px sans-serif", "bgColor":"#fff", "loc":"-314.5 -103", "minSize":{"class":"go.Size", "width":280, "height":70}}, {"text":"hello", "key":-3, "loc":"-293.00000000000006 -209.69999999999993", "group":-1024, "minSize":{"class":"go.Size", "width":280, "height":70}}, {"text":"hello", "key":-4, "loc":"-238.00000000000006 -209.69999999999993", "group":-1024, "minSize":{"class":"go.Size", "width":280, "height":70}}, {"text":"hello", "key":-5, "loc":"-183.00000000000006 -209.69999999999993", "group":-1024, "minSize":{"class":"go.Size", "width":280, "height":70}}, {"text":"hello", "key":-6, "loc":"-128.00000000000006 -209.69999999999993", "group":-1024, "minSize":{"class":"go.Size", "width":280, "height":70}}, {"text":"hello", "key":-7, "loc":"-73.00000000000006 -209.69999999999993", "group":-1024, "minSize":{"class":"go.Size", "width":280, "height":70}}, {"text":"hello", "key":-8, "loc":"-293.00000000000006 -169.69999999999993", "minSize":{"class":"go.Size", "width":280, "height":70}, "group":-1024}, {"text":"hello", "key":-9, "loc":"-237.99999999999983 -169.70000000000005", "minSize":{"class":"go.Size", "width":280, "height":70}, "group":-1024}, {"text":"hello", "key":-10, "loc":"-183.00000000000006 -169.70000000000005", "group":-1024, "minSize":{"class":"go.Size", "width":280, "height":70}}, {"text":"hello", "key":-11, "loc":"-128.00000000000009 -169.70000000000013", "group":-1024, "minSize":{"class":"go.Size", "width":280, "height":70}}, {"text":"hello", "key":-12, "loc":"-73.00000000000006 -169.69999999999993", "group":-1024, "minSize":{"class":"go.Size", "width":280, "height":70}} ], "linkDataArray": [ {"from":-1024, "to":-2, "fromPort":"L", "toPort":"L"} ]} </textarea> </div> </body> </html>
Posts: 2
Participants: 2