@meishadevs wrote:
When adding a node to a group, when adding to the third row, the position of the node will be exchanged once for each additional node. How to make the nodes in the group not to exchange positions
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS expt</title> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.9/go-debug.js"></script> <script id="code"> function init() { var $ = go.GraphObject.make; myDiagram = $(go.Diagram, "myDiagramDiv", { allowDrop: true, mouseDrop: function (e) { finishDrop(e, null); }, layout: $(go.Layout), initialContentAlignment: go.Spot.Center }); function highlightGroup(e, grp, show) { if (!grp) return; e.handled = true; if (show) { var tool = grp.diagram.toolManager.draggingTool; var map = tool.draggedParts || tool.copiedParts; if (grp.canAddMembers(map.toKeySet())) { grp.isHighlighted = true; return; } } grp.isHighlighted = false; } function finishDrop(e, grp) { var ok = (grp !== null ? grp.addMembers(grp.diagram.selection, true) : e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true)); if (!ok) e.diagram.currentTool.doCancel(); } myDiagram.groupTemplateMap.add("OfGroups", $(go.Group, "Auto", { background: "transparent", mouseDragEnter: function (e, grp, prev) { highlightGroup(e, grp, true); }, mouseDragLeave: function (e, grp, next) { highlightGroup(e, grp, false); }, computesBoundsAfterDrag: true, computesBoundsIncludingLocation: true, mouseDrop: finishDrop, handlesDragDropForMembers: true, layout: $(go.GridLayout, { wrappingWidth: 5, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4) }) }, new go.Binding("background", "isHighlighted", function (h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(), $(go.Shape, "Rectangle", {fill: null, stroke: "#FFDD33", strokeWidth: 2}), $(go.Panel, "Vertical", $(go.Panel, "Horizontal", {stretch: go.GraphObject.Horizontal, background: "#FFDD33"}, $(go.TextBlock, { alignment: go.Spot.Left, editable: true, margin: 5 }, new go.Binding("text", "text").makeTwoWay()) ), $(go.Placeholder, {padding: 5, alignment: go.Spot.TopLeft}) ) )); myDiagram.nodeTemplate = $(go.Node, "Auto", { mouseDrop: function (e, nod) { finishDrop(e, nod.containingGroup); } }, $(go.Shape, "Rectangle", {fill: "#ACE600", stroke: null}, new go.Binding("fill", "color")), $(go.TextBlock, { margin: 5, editable: true }, new go.Binding("text", "text").makeTwoWay()) ); myPalette = $(go.Palette, "myPaletteDiv", { nodeTemplateMap: myDiagram.nodeTemplateMap, groupTemplateMap: myDiagram.groupTemplateMap, layout: $(go.GridLayout, {wrappingColumn: 1, alignment: go.GridLayout.Position}) }); myPalette.model = new go.GraphLinksModel([ {text: "lightgreen", color: "#ACE600"}, {text: "yellow", color: "#FFDD33"}, {text: "lightblue", color: "#33D3E5"} ]); load(); } const treeData = { class: 'go.GraphLinksModel', nodeDataArray: [{key: 1, text: 'Main 1', isGroup: true, category: 'OfGroups'}], linkDataArray: [] } function load() { myDiagram.model = go.Model.fromJson(treeData); } </script> </head> <body onload="init()"> <div id="sample"> <div style="width: 100%; display: flex; justify-content: space-between"> <div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div> <div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div> </div> </div> </body> </html>
Posts: 1
Participants: 1