@meishadevs wrote:
When I add a group to the group, the group will move to the lower right corner. How can I fix the position of the group?
add one group
add two group
add six groups
can find group position changed, how fixed group position
<!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, 110)); }); function finishDrop(e, grp) { var ok; if (grp !== null) { ok = grp.addMembers(grp.diagram.selection, true); } else { 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,.3)" : 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) }), }, nodeStyle(), $(go.Shape, "Rectangle", { fill: null, stroke: "#ff913a", strokeWidth: 2, cursor: "pointer", portId: "", fromLinkable: true, toLinkable: true, fromLinkableSelfNode: true, toLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkableDuplicates: true }), $(go.Panel, "Vertical", { name: "PanelVertical", minSize: new go.Size(20, 20) }, new go.Binding("minSize", "minSize").makeTwoWay(), $(go.Panel, "Horizontal", // button next to TextBlock { 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.nodeTemplate = $(go.Node, "Auto", { mouseDrop: function (e, node) { finishDrop(e, node.containingGroup); } }, $(go.Shape, { fill: null, stroke: null, }, new go.Binding("width", "nodeWidth"), new go.Binding("height", "nodeHeight") ), $(go.TextBlock, { alignment: go.Spot.BottomCenter, isMultiline: false, font: "12px sans-serif" }, new go.Binding("text", "text").makeTwoWay(), new go.Binding("alignment", "textAlign") ) ); //连线模板 myDiagram.linkTemplate = $(go.Link, { routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver, corner: 5, relinkableFrom: true, relinkableTo: true, reshapable: true, resegmentable: true, mouseEnter: function (e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; } , mouseLeave: function (e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; } }, $(go.Shape, { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }), $(go.Shape, // the link path shape { isPanelMain: true, stroke: "gray", strokeWidth: 2 }), //箭头 $(go.Shape, { toArrow: "standard", stroke: null, fill: "gray" }) ); // temporary links used by LinkingTool and RelinkingTool are also orthogonal: myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal; myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal; myPalette = $(go.Palette, "myPaletteDiv", { groupTemplateMap: myDiagram.groupTemplateMap, layout: $(go.GridLayout, {wrappingColumn: 1, alignment: go.GridLayout.Position}) }); myPalette.model = new go.GraphLinksModel([ { key: -1024, nodeType: 4, text: "main", category: "OfGroups", isGroup: "true", font: "bold 13px sans-serif" } ]); } </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">main</h4> <div class="menu-content" id="myPaletteDiv" style="width: 112px; height: 86px;"></div> </li> </ul> </div> <div class="right-content" id="myDiagramDiv" style="width: 872px; height: 610px;float: left"></div> </div> </div> </div> </body> </html>thank
Posts: 1
Participants: 1