Swim line Implementation

@colby wrote:

We have not use any layout

myDiagram =
        $(go.Diagram, "myDiagramDiv", {
            initialContentAlignment: go.Spot.Center,
            commandHandler: new DrawCommandHandler(),
            rotatingTool: new GroupRotatingTool(), 
            scrollMode: go.Diagram.InfiniteScroll,
            //"TextEdited": onTextEdited,
            "ClipboardPasted": ClipboardPasted, 
            "rotatingTool.snapAngleMultiple": 90,
            "rotatingTool.snapAngleEpsilon": 90,
            "commandHandler.arrowKeyBehavior": "move",
            "commandHandler.archetypeGroupData": {
                text: "Group",
                category: "UserDefineGroup",
                isGroup: true
            },
            "panningTool.isEnabled": true,
            "grid.visible": false,
            "allowDrop": true,
            "undoManager.isEnabled": true,
            "LinkDrawn": linkdrawn,
            "linkingTool.portGravity": 20,
            "linkingTool.direction": go.LinkingTool.ForwardsOnly,
            hoverDelay: 600,
            dragSelectingTool: $(RealtimeDragSelectingTool, {
                isPartialInclusion: true,
                delay: 50
            }, {
                box: $(go.Part, // replace the magenta box with a red one
                    {
                        layerName: "Tool",
                        selectable: false
                    },
                    $(go.Shape, {
                        name: "SHAPE",
                        fill: "rgba(255,0,0,0.1)",
                        stroke: "red",
                        strokeWidth: 2
                    }))
            }),
        });

Now we want to implement Swim Line (https://gojs.net/latest/samples/swimLanes.html).

 myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            // use a custom ResizingTool (along with a custom ResizeAdornment on each Group)
            resizingTool: new LaneResizingTool(),
            // use a simple layout that ignores links to stack the top-level Pool Groups next to each other
            layout: $(PoolLayout),
            // don't allow dropping onto the diagram's background unless they are all Groups (lanes or pools)
            mouseDragOver: function(e) {
              if (!e.diagram.selection.all(function(n) { return n instanceof go.Group; })) {
                e.diagram.currentCursor = 'not-allowed';
              }
            },
            mouseDrop: function(e) {
              if (!e.diagram.selection.all(function(n) { return n instanceof go.Group; })) {
                e.diagram.currentTool.doCancel();
              }
            },
            // a clipboard copied node is pasted into the original node's group (i.e. lane).
            "commandHandler.copiesGroupKey": true,
            // automatically re-layout the swim lanes after dragging the selection
            "SelectionMoved": relayoutDiagram,  // this DiagramEvent listener is
            "SelectionCopied": relayoutDiagram, // defined above
            "animationManager.isEnabled": false,
            // enable undo & redo
            "undoManager.isEnabled": true
          });

here PoolLayout is used. We implement this in our project , we saw all nodes are auto layout. How we can implement without using layout.

Please give an example.

Posts: 8

Participants: 2

Read full topic