How to control the arrangement of parts in the palette?

kingo · July 6, 2017, 8:24am

Questions:
1.As shown in the figure, the Node inside the palette is not aligned, and the upper and lower intervals are inconsistent.I want them to be aligned.

2.Can the TextBlock of Node in the palette be hidden?Drag to the canvas to display .Like this:

walter · July 6, 2017, 10:45am

By default each Palette has its Diagram.layout set to an instance of GridLayout. You can modify its properties or replace the whole layout.

And search for uses of Palettes and GridLayout in the samples.

Yes, you can represent nodes using a different template than what is used in the target Diagram. See the example in GoJS Palette -- Northwoods Software.

kingo · July 7, 2017, 8:19am

As shown in the picture,Why do the nodes of the palette appear disorderly , because Node use Spot?

Part Code:
// create the Palette
var myPalette =
(go.Palette, "myPaletteDiv", { layout: (go.GridLayout), // use a GridLayout
padding: new go.Margin(5,5,25,5) // to see the names of shapes on the bottom row

});

// 电房
var pDFTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, new go.Binding("isShadowed", "isSelected").ofObject(), (go.Panel, “Spot”,//“Position”,
(go.Shape, "Rectangle", {name:"SHAPE",fill:"rgba(255,255,255,0)",strokeWidth:2,stroke: "rgba(0,0,0,1)",width:50, height:50}) ) ); //水泥杆 var pshuiniganTemplate = (go.Node, go.Panel.Viewbox, // or “Viewbox”
{ selectionObjectName: “SHAPE” },
{background: null},
new go.Binding(“isShadowed”, “isSelected”).ofObject(),
(go.Panel, "Spot",//"Position", (go.Shape, “Circle”, {name:“SHAPE”,fill:“rgba(255,255,255,0)”,strokeWidth:2,stroke: “rgba(0,0,0,1)”,width:12, height:12
//position: new go.Point(0, 0)
}),
(go.Shape, "Rectangle", portStyle(false), // the only from port { portId: "in", //position: new go.Point(14, 5), alignment: new go.Spot(1, 0.5,2.5,0), fromLinkable: true}), (go.Shape, “Rectangle”, portStyle(false), // the only from port
{ portId: “out”,
//position: new go.Point(14, 5),
alignment: new go.Spot(0, 0.5,-2.5,0),
toLinkable: true})
)
);
//高强度水泥杆
var pgaoqiangdushuiniganTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, (go.Panel, “Spot”,
(go.Shape, "Circle", {name:"SHAPE",fill:"rgba(255,255,255,0)",strokeWidth:2,stroke:"rgba(0,0,0,1)",width:12, height:12,alignment: new go.Spot(0, 0)}), (go.Shape, “Semi_Circle”, {fill:“rgba(0,0,0,1)”,strokeWidth:2,stroke: “rgba(0,0,0,1)”,height:1,width:1,
// position: new go.Point(0, 0)
alignment: new go.Spot(0, 0,1.5,0)
}),
(go.Shape, "Rectangle", portStyle(false), // the only from port { portId: "in", //position: new go.Point(14, 5), alignment: new go.Spot(1, 0.5,2.5,0), fromLinkable: true}), (go.Shape, “Rectangle”, portStyle(false), // the only from port
{ portId: “out”,
//position: new go.Point(14, 5),
alignment: new go.Spot(0, 0.5,-2.5,0),
toLinkable: true})
)
);
//绝缘导线接地环
var pground_ringTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, (go.Panel, “Spot”,
(go.Shape, "Rectangle", {fill:"rgba(255,255,255,0)",strokeWidth:1,stroke:"rgba(0,0,0,0)",height:15,width:16,alignment: new go.Spot(0,0)}), (go.Shape, “Ground_Ring”, {
name:“SHAPE”,
fill:“rgba(255,255,255,0)”,strokeWidth:2,stroke: “rgba(0,0,0,1)”,width:1, height:1,alignment: new go.Spot(0, 0)}),
(go.Shape, "Rectangle", portStyle(false), // the only from port { portId: "out", alignment: new go.Spot(0.5,1,-9,-1), toLinkable: true}) ) ); //铁塔Line_tower var pline_towerTemplate = (go.Node, go.Panel.Viewbox, // or “Viewbox”
{ selectionObjectName: “SHAPE” },
{background: null},
(go.Panel, "Spot", (go.Shape, “Rectangle”, {name:“SHAPE”,fill:“rgba(255,255,255,0)”,strokeWidth:2,stroke:“rgba(0,0,0,1)”,height:12,width:12,alignment: new go.Spot(0,0)}),
(go.Shape, "Line_tower", {fill:"rgba(255,255,255,0)",strokeWidth:2,stroke: "rgba(0,0,0,1)",width:1, height:1,alignment: new go.Spot(0,0,7.5,7.5)}), (go.Shape, “Rectangle”, portStyle(true), // the to port
{ portId: “io”, alignment: new go.Spot(0,0,7,7),fromLinkable: true,toLinkable: true})
)
);
//电缆终端头Cable_line
var pcable_lineTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, (go.Panel, “Spot”,
(go.Shape, "Rectangle", {fill:"rgba(255,255,255,0)",strokeWidth:2,stroke:"rgba(0,0,0,0)",height:12,width:12,alignment: new go.Spot(0,0,-6, -6)}), (go.Shape, “Cable_line”, {name:“SHAPE”,fill:“rgba(255,255,255,0)”,strokeWidth:2,stroke: “rgba(0,0,0,1)”,width:1, height:1,alignment: new go.Spot(0, 0)}),
(go.Shape, "Rectangle", portStyle(true), // the to port { portId: "out", alignment: new go.Spot(0,0,-7, -0.5),toLinkable: true}), (go.Shape, “Rectangle”, portStyle(false), // the from port
{ portId: “in”, alignment: new go.Spot(0,0,7, -0.5),fromLinkable: true})
)
);
//环网房内闭合的负荷开关
var pinloadswitchTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, (go.Panel, “Spot”,
(go.Shape, "LoadSwitch", {name:"SHAPE",fill:"rgba(255,255,255,0)",strokeWidth:2,stroke: "rgba(255,0,255,1)",height:1,width:1}), (go.Shape, “Rectangle”, {fill:“rgba(255,255,255,0)”,strokeWidth:1,stroke:“rgba(255,0,255,0)”,height:20,width:24,alignment: new go.Spot(0,0,-10, -10)}),
(go.Shape, "Rectangle", portStyle(true), // the to port { portId: "out", alignment: new go.Spot(0,0,-17, 1),toLinkable: true}), (go.Shape, “Rectangle”, portStyle(false), // the from port
{ portId: “in”, alignment: new go.Spot(0,0,18.5, 1),fromLinkable: true})
)
);
//环网房内打开的负荷开关
var pinopenloadswitchTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, (go.Panel, “Spot”,//“Position”,
(go.Shape, "OpenLoadSwitch", {name:"SHAPE",fill:"rgba(255,255,255,0)",strokeWidth:2,stroke: "rgba(255,0,255,1)",height:1,width:1}), (go.Shape, “Rectangle”, {fill:“rgba(255,255,255,0)”,strokeWidth:1,stroke:“rgba(255,0,255,0)”,height:20,width:24,
//position: new go.Point(-10, -10)
alignment: new go.Spot(0, 0,-10,-10)
}),
(go.Shape, "Rectangle", portStyle(true), // the to port { portId: "out", //position: new go.Point(-19, -1.5), alignment: new go.Spot(0, 0,-17, 1), toLinkable: true}), (go.Shape, “Rectangle”, portStyle(false), // the from port
{ portId: “in”,
//position: new go.Point(16, -1.5),
alignment: new go.Spot(0, 0,18.5, 1),
fromLinkable: true})
)
);
//环网房外打开的负荷开关
var poutopenloadswitchTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, (go.Panel, “Spot”,
(go.Shape, "OpenLoadSwitch", {fill:"rgba(255,255,255,0)",strokeWidth:2,stroke: "rgba(255,0,255,1)",height:1,width:1,alignment: new go.Spot(0, 0)}), (go.Shape, “Rectangle”, {fill:“rgba(255,255,255,0)”,strokeWidth:1,stroke:“rgba(255,0,255,1)”,height:20,width:24,alignment: new go.Spot(0, 0),strokeDashArray: [5, 5]}),
(go.Shape, "Rectangle", {name:"SHAPE",fill:"rgba(255,255,255,0)",strokeWidth:1,stroke:"rgba(255,0,255,0)",height:20,width:28,alignment: new go.Spot(0, 0,1,0)}), (go.Shape, “Rectangle”, portStyle(true), // the to port
{ portId: “out”, alignment: new go.Spot(0, 0,-16, 1),toLinkable: true}),
// (go.Shape, "Rectangle", portStyle(true), // the to port // { portId: "out2", position: new go.Spot(1, -10),toLinkable: true}), (go.Shape, “Rectangle”, portStyle(false), // the from port
{ portId: “in”, alignment: new go.Spot(0, 0,18.5, 1),fromLinkable: true})
)
);
//非环网房内闭合的负荷开关
var pninloadswitchTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, (go.Panel, “Spot”,
(go.Shape, "LoadSwitch", {name:"SHAPE",fill:"rgba(255,255,255,0)",strokeWidth:2,stroke: "rgba(255,0,0,1)",height:1,width:1}), (go.Shape, “Rectangle”, {fill:“rgba(255,255,255,0)”,strokeWidth:1,stroke:“rgba(255,0,0,0)”,height:20,width:24,alignment: new go.Spot(0,0)}),
(go.Shape, "Rectangle", portStyle(true), // the to port { portId: "out", alignment: new go.Spot(0,0,-16, 1),toLinkable: true}), (go.Shape, “Rectangle”, portStyle(false), // the from port
{ portId: “in”, alignment: new go.Spot(0,0,18.5, 1),fromLinkable: true})
)
);
//电流自动化非环网房内闭合的负荷开关
var piautoninloadswitchTemplate =
(go.Node, go.Panel.Viewbox, // or "Viewbox" { selectionObjectName: "SHAPE" }, {background: null}, (go.Panel, “Spot”,
(go.Shape, "Circle", {width: 30, height: 30,stroke:null,fill:"rgba(255,102,0,.5)",alignment: new go.Spot(0,0)}), (go.Shape, “LoadSwitch_I”, {width:1, height:1,stroke: “rgba(255,0,0,1)”,strokeWidth: 2,fill:null, alignment: new go.Spot(0,0,16,16)}),
(go.Shape, "Rectangle", {width: 24, height: 20, stroke: "rgba(0,0,0,0)",strokeWidth: 1,fill:null, alignment: new go.Spot(0,0)}), (go.Shape, “Rectangle”, {name:“SHAPE”,width: 28, height: 29, stroke: “rgba(0,0,0,0)”,strokeWidth: 1,fill:null, alignment: new go.Spot(0,0,15.5,15.5)}),
(go.Shape, "Rectangle", { width: 4, height: 3,stroke: "rgba(0,255,0,1)",strokeWidth: 1,fill:"rgba(0,255,0,1)", alignment: new go.Spot(0,0,18, 11),angle: -15}), (go.Shape, “Rectangle”, portStyle(true), // the to port
{ portId: “out”, alignment: new go.Spot(0,0.5,-2,0),toLinkable: true}),
(go.Shape, "Rectangle", portStyle(false), // the from port { portId: "in", alignment: new go.Spot(0,0.5,33,0),fromLinkable: true}) ) ); //电流自动化非环网房外闭合的负荷开关 var piautonoutloadswitchTemplate = (go.Node, go.Panel.Viewbox, // or “Viewbox”
{ selectionObjectName: “SHAPE” },
{background: null},
(go.Panel, "Spot", (go.Shape, “Circle”, { width: 30, height: 30,stroke:null,fill:“rgba(255,102,0,.5)”,position: new go.Point(-15, -15)}),
(go.Shape, "LoadSwitch_I", {width:1, height:1,stroke: "rgba(255,0,0,1)",strokeWidth: 2,fill:null, alignment: new go.Spot(0,0,16,16)}), (go.Shape, “Rectangle”, { width: 24, height: 20, stroke: “rgba(0,0,0,1)”,strokeWidth: 2,fill:null, alignment: new go.Spot(0,0,16, 16)}),
(go.Shape, "Rectangle", { width: 4, height: 3,stroke: "rgba(0,255,0,1)",strokeWidth: 1,fill:"rgba(0,255,0,1)", alignment: new go.Spot(0,0,18, 11),angle: -15}), (go.Shape, “Rectangle”, {name:“SHAPE”,width: 28, height: 29, stroke: “rgba(0,0,0,0)”,strokeWidth: 1,fill:null, alignment: new go.Spot(0,0,15.5,15.5)}),
(go.Shape, "Rectangle", portStyle(true), // the to port { portId: "out", alignment: new go.Spot(0,0.5,-2,0),toLinkable: true}), (go.Shape, “Rectangle”, portStyle(false), // the from port
{ portId: “in”, alignment: new go.Spot(0,0.5,33,0),fromLinkable: true})
)
);

myPalette.model.nodeDataArray = [
{ category: “DF”,text:“DF”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “shuinigan”,text:“水泥杆”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “gaoqiangdushuinigan”,text:“高强度水泥杆”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “ground_ring”,text:“绝缘导线接地环”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “line_tower”,text:“铁塔”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “cable_line”,text:“电缆终端头”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “inloadswitch”,text:“环网房内闭合的负荷开关”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “inopenloadswitch”,text:“环网房内打开的负荷开关”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “outopenloadswitch”,text:“环网房外打开的负荷开关”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “ninloadswitch”,text:“非环网房内闭合的负荷开关”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “iautoninloadswitch”,text:“电流自动化非环网房内闭合的负荷开关”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”},
{ category: “iautonoutloadswitch”,text:“电流自动化非环网房外闭合的负荷开关”,font:“bold 8pt helvetica, bold arial, sans-serif”,color: “#000”}

];

walter · July 7, 2017, 10:27am

I think you want to set some GridLayout properties to get what you want.

Try setting GridLayout | GoJS API
alignment: go.GridLayout.Position and cellSize: new go.Size(1, 1).

kingo · July 7, 2017, 10:28am

It didn’t do what I wanted：

This is what I want：

walter · July 7, 2017, 10:34am

wrappingWidth: 2 will force wrapping after each item, because each item is more than 2 wide.

If you really want the first row to have the two smaller items centered vertically relative to the tallest item, you will need to use the default GridLayout.alignment, which is by location, and you need to make sure those nodes’ location is at the vertical center of the nodes.

kingo · July 7, 2017, 10:41am

It didn’t do what I wanted,Did I do something wrong?

This is what I want：

walter · July 7, 2017, 10:48am

Our posts have interleaved.

I’m suspicious that your Nodes are taller than their Node.selectionObject. Could you debug this by comparing for each node node.actualBounds.height and node.selectionObject.actualBounds.height?

kingo · July 10, 2017, 2:47am

Really appreciate your help!