How to keep the group fixed

@forrest wrote:

When I add a node to the group for the first time, the group will shift to the right. However, I will add nodes to the group. The group will not shift to the right again. What should I do to be able to send groups to the group at any time? Add nodes in the group, the group will not be offset

Thanks

GIF动画录制工具20180615184600.gif900x223 385 KB

function init() {

    var $$ = go.GraphObject.make;

    myDiagram = $$(go.Diagram, "resourceDiagramDiv", {

        "commandHandler.copiesTree": false,
        allowDrop: true,
        initialContentAlignment: go.Spot.Center,
        initialScale: 0.74,
        "animationManager.isEnabled": false,
         "undoManager.isEnabled": true，

        grid: $$(go.Panel, "Grid",
            {
                background: "white",
                visible:false
            },
            $$(go.Shape, "LineH", {stroke: "#F2F2F2"}),
            $$(go.Shape, "LineV", {stroke: "#F2F2F2"})
        ),

        mouseDrop: function (e, obj) {
            var nodeType = e.diagram.selection.Th.value.data.nodeType;

            if (nodeType >= 0 && nodeType <= 7) {
                myDiagram.commandHandler.deleteSelection();
            }
        }
    });

   
    myDiagram.groupTemplateMap.add("OfGroups",
        $$(go.Group, "Auto",
            {
                name: "Groups",
                background: "#fff",
                movable: false,
                computesBoundsAfterDrag: true,

                mouseDrop: function (e, obj) {
                    finishDrop(e, obj);
                },

                doubleClick: groupDoubleClick,

                mouseDragEnter: function (e, grp) {

                    var nodeType = dragNode.nodeType;
                    var groupType = grp.part.data.groupType;

                    if (dragNode.nodeType !== groupType) {
                        document.querySelector('#resourceDiagramDiv canvas').style.cursor = "not-allowed";
                    }
                },

                mouseDragLeave: function (e, obj) {
                    document.querySelector('#resourceDiagramDiv canvas').style.cursor = "copy";
                },

                click: function (e, graphObject) {
                    unSelectAllNode();
                    graphObject.part.isSelected = true;
                },

                layout: $$(go.GridLayout,
                    {
                        alignment: go.GridLayout.Position,
                        wrappingColumn: 10,
                        cellSize: new go.Size(1, 1),
                        spacing: new go.Size(6, 6),
                        sorting: go.GridLayout.Forward
                    }),
            },
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            nodeStyle(),
            $$(go.Shape, "RoundedRectangle",
                {
                    fill: null,
                    stroke: "#3e93d9",
                    strokeWidth: 1,
                    cursor: "pointer",
                    fromLinkable: true,
                    toLinkable: true,
                    fromLinkableSelfNode: true,
                    toLinkableSelfNode: true,
                    fromLinkableDuplicates: true,
                    toLinkableDuplicates: true
                },

                new go.Binding("strokeWidth", "strokeWidth")
            ),

            $$(go.Picture,
                {
                    name: "Picture",
                },
                new go.Binding("width", "imgWidth"),
                new go.Binding("height", "imgHeight"),
                new go.Binding("source", "bgImage"),
                new go.Binding("alignment", "imgAlign"),
                new go.Binding("margin", "pictrueMargin")
            ),

            $$(go.TextBlock,
                {
                    margin: new go.Margin(0, 0, 0, 0),
                    alignment: go.Spot.BottomCenter,
                    isMultiline: false,
                    font: "12px sans-serif"
                },
                new go.Binding("text", "contentText").makeTwoWay()
            ),

            $$(go.Panel, "Vertical",
                {
                    name: "PanelVertical",
                    minSize: new go.Size(50, 50)
                },
                new go.Binding("minSize", "minSize").makeTwoWay(),
                $$(go.Panel, "Table",  
                    {
                        stretch: go.GraphObject.Horizontal,

                        visible: true,
                    },
                    new go.Binding("visible", "showTitle"),

                    $$(go.TextBlock,
                        {
                            alignment: go.Spot.Center,
                            margin: 5,
                            isMultiline: false,
                            font: "14px sans-serif",
                            opacity: 0.75,
                            stroke: "#333"
                        },
                        new go.Binding("text", "titleText").makeTwoWay(),
                        new go.Binding("font", "font").makeTwoWay()
                    )
                ),
                $$(go.Placeholder, {padding: 5, alignment: go.Spot.TopLeft})//设置标题顶部位置
            )
        ));  

 function finishDrop(e, grp) {

        if (grp !== null) {

            var ok = null;
            var groupType = grp.part.data.groupType;
            var nodeType = e.diagram.selection.Th.value.data.nodeType;

            if (nodeType === groupType) {

                ok = grp.addMembers(e.diagram.selection, true);

                if(e.diagram.selection.Th.value.memberParts != null && e.diagram.selection.Th.value.memberParts.count == 0)
                {
                    if(groupType == 0)
                    {
                        showRdsClusterForm(1);
                    }

                    if(groupType ==1)
                    {
                        showRdsClusterForm(2);
                    }

                    if(groupType == 2 )
                    {
                        showRdsStorageForm();
                    }
                }
            }

            if (!ok) {
                e.diagram.currentTool.doCancel();
            }
        }
        else
        {
            if (!ok) e.diagram.currentTool.doCancel();
        }
    }

    function nodeStyle() {
        return [
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            {
                
                mouseEnter: function (e, graphObject) {
                    dragNode = graphObject.part.data;
                    showPorts(graphObject.part, true);
                },

                mouseLeave: function (e, graphObject) {
                    showPorts(graphObject.part, false);
                }
            }
        ];
    }

Posts: 2

Participants: 2

Read full topic