Move Palette Component to left

GoJS
1

I am trying to start the Palette from left. But I can’t find any styling for that. Please help.
Screenshot from 2021-09-24 17-40-57

This is my code

private initPalette(): go.Palette {
        var $ = go.GraphObject.make;
        console.log("sddsds")
        let myPalette =
            $(go.Palette,  // must name or refer to the DIV HTML element
                {
                    maxSelectionCount: 1,
                    autoScale: go.Diagram.Uniform,
                    // groupTemplateMap: myDiagram.groupTemplateMap,
                    // share the templates used by myDiagram
                    linkTemplate: // simplify the link template, just in this Palette
                        $(go.Link,
                            { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center,
                                // to line up the Link in the same manner we have to pretend the Link has the same location spot
                                locationSpot: go.Spot.Center,
                                selectionAdornmentTemplate:
                                    $(go.Adornment, "Link",
                                        { locationSpot: go.Spot.Center },
                                        $(go.Shape,
                                            { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }),
                                        $(go.Shape,  // the arrowhead
                                            { toArrow: "Standard", stroke: null })
                                    )
                            },
                            {
                                routing: go.Link.AvoidsNodes,
                                curve: go.Link.JumpOver,
                                corner: 5,
                                toShortLength: 4
                            },
                            new go.Binding("points"),
                            $(go.Shape,  // the link path shape
                                { isPanelMain: true, strokeWidth: 2 }),
                            $(go.Shape,  // the arrowhead
                                { toArrow: "Standard", stroke: null })
                        ),

                });
        myPalette.nodeTemplate =
            $(go.Node, "Auto",
                { alignment: go.Spot.TopLeft },
                // $(go.Shape,
                //     { width: 14, height: 14, fill: "white" },
                //     new go.Binding("fill", "color")),
                $(go.Shape, { strokeWidth: 0, fill: "#f1f5fc" }),
                $(go.TextBlock,
                    { margin: 0, width: 130, font: "normal  600 15px Arial, Helvetica", background: "#f1f5fc", textAlign: "start" },
                    new go.Binding("text", "name"))
            );

        myPalette.groupTemplate =
            $(go.Group, "Auto",
                { alignment: go.Spot.TopLeft },
                
                // $(go.Shape,
                //     { width: 14, height: 14, fill: "white" },
                //     new go.Binding("fill", "color")),
                $(go.Shape, { strokeWidth: 0, fill: "#f1f5fc" }),
                $(go.TextBlock,
                    { margin: 4, width: 150, font: "normal small-caps 900 15px Sans, Serif", background: "#f1f5fc", textAlign: "start" },
                    new go.Binding("text", "text"))
            );
        // myPalette.model.nodeKeyProperty = myDiagram.model.nodeKeyProperty;
        myPalette.model = new go.GraphLinksModel([]);
        myPalette.model.nodeKeyProperty = "key1";
        myPalette.animationManager.initialAnimationStyle = go.AnimationManager.None;

        return myPalette;
    }
2

Are you going to be showing any Links in your Palette? If not, I suggest that you remove the linkTemplate setting.

I’m assuming you will have Groups in your Palette. If not, that’s another setting you can remove from your code.

Now I’ll address your basic question. The Diagram.layout, which in the case of Palette is a GridLayout, determines the locations of all of the Nodes. However, due to scrolling and zooming, those nodes could appear anywhere in the viewport. So you actually want to control where the palette is scrolled to initially. I suggest that you set the Diagram.initialContentAlignment property on the Palette to be go.Spot.TopLeft.

3

I tried the way you said but it is not working.It stills give me the save result. This is my code

private initPalette(): go.Palette {
        var $ = go.GraphObject.make;
        console.log("sddsds")
        let myPalette =
            $(go.Palette,  // must name or refer to the DIV HTML element
                {
                    maxSelectionCount: 1,
                    autoScale: go.Diagram.Uniform,
                    // groupTemplateMap: myDiagram.groupTemplateMap,
                    // share the templates used by myDiagram
                });
        myPalette.initialContentAlignment = go.Spot.TopLeft;
        myPalette.nodeTemplate =
            $(go.Node, "Auto",
                { alignment: go.Spot.TopLeft },
                // $(go.Shape,
                //     { width: 14, height: 14, fill: "white" },
                //     new go.Binding("fill", "color")),
                $(go.Shape, { strokeWidth: 0, fill: "#f1f5fc" }),
                $(go.TextBlock,
                    { margin: 0, width: 130, font: "normal  600 15px Arial, Helvetica", background: "#f1f5fc", textAlign: "left" },
                    new go.Binding("text", "name"))
            );
       
        myPalette.groupTemplate =
            $(go.Group, "Auto",
                { alignment: go.Spot.TopLeft },
                
                // $(go.Shape,
                //     { width: 14, height: 14, fill: "white" },
                //     new go.Binding("fill", "color")),
                $(go.Shape, { strokeWidth: 0, fill: "#f1f5fc" }),
                $(go.TextBlock,
                    { margin: 4, width: 150, font: "normal small-caps 900 15px Sans, Serif", background: "#f1f5fc", textAlign: "start" },
                    new go.Binding("text", "text"))
            );
        // myPalette.model.nodeKeyProperty = myDiagram.model.nodeKeyProperty;
        myPalette.model = new go.GraphLinksModel([]);
        myPalette.model.nodeKeyProperty = "key1";
        myPalette.animationManager.initialAnimationStyle = go.AnimationManager.None;

        return myPalette;
    }
4

It’s because Palette defaults Diagram.contentAlignment to Spot.TopCenter.

So either set:

    contentAlignment: go.Spot.TopLeft

or:

    contentAlignment: go.Spot.Default,
    initialContentAlignment: go.Spot.TopLeft,

depending on whether you want that alignment always or only initially.

5

Thanks it worked