Hi ,
I’m trying to use a checkbox like the ones in the “triStateCheckBoxTree” example but just in a port of a group node.
What i did is this (the code for the checkbox is the same as the example)
myDiagram.groupTemplate =
$gj(go.Group, "Spot",
{
background: "transparent",
ungroupable: true,
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
computesBoundsAfterDrag: true,
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
mouseDrop: finishDrop,
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
// Groups containing Groups lay out their members horizontally
layout: makeLayout(false),
cursor: "move"
//dragComputation: stayInGroup
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("layout", "horiz", makeLayout),
new go.Binding("background", "isHighlighted", function(h) {
return h ? "rgba(0,255,0,0.6)" : "transparent";
}).ofObject(),
$gj(go.Panel, "Auto",
$gj(go.Shape, "Rectangle",
{
fill: null,
strokeWidth: 2 },
new go.Binding("stroke", "horiz", defaultColor),
new go.Binding("stroke", "color")),
$gj(go.Panel, "Vertical", // title above Placeholder
$gj(go.Panel, "Horizontal", // button next to TextBlock
{
name: "hover-screenshot-panel",
stretch: go.GraphObject.Horizontal,
//background: defaultColor(false),
portId: "totale",
// allows links to/from all sides
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left,
fromLinkable: true,
toLinkable: true,
cursor:"pointer"
},
new go.Binding("background", "horiz", defaultColor),
new go.Binding("background", "color"),
$gj("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5 }),
$gj(go.TextBlock,
{
alignment: go.Spot.Left,
editable: false,
margin: 5,
font: defaultFont(false),
opacity: 0.75, // allow some color to show through
stroke: "#404040"
},
new go.Binding("font", "horiz", defaultFont),
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$gj(go.Placeholder,
{
padding: 15,
alignment: go.Spot.TopLeft
})
) // end Vertical Panel
), // end of Panel Auto
$gj(go.Panel, "Vertical",{alignment: new go.Spot(1,0.6,40,0) },
new go.Binding("itemArray", "rightArray"),
{
//row: 3, column: 2,
itemTemplate:
$gj(go.Panel,
$("TriStateCheckBoxButton"),
{
_side: "right",
fromSpot: go.Spot.Right, toSpot: go.Spot.Right,
fromLinkable: true, toLinkable: false,
cursor: "pointer",
contextMenu: portMenu
},
new go.Binding("portId", "portId"),
$gj(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(3, 0),
fill: "blue"
}
),
$gj(go.TextBlock,
{ margin: new go.Margin(5, 0, 0, 5),
font: "bold 12px sans-serif",
stroke:"white",
alignment: go.Spot.Left,
fromLinkable: false,
toLinkable: false,
shadowVisible: false
},
new go.Binding("text", "portId"))
//new go.Binding("fill", "portColor"))
) // end itemTemplate
}
) // end Vertical Panel
);
but I get an error loading the page:
“Uncaught Error: Trying to set undefined property “length” on object: Panel([object Object])#769
v …/release/go-Debug.js:12
Mj …/release/go-Debug.js:707
bm …/release/go-Debug.js:1002
$l …/FILL_EM/release/go-Debug.js:996
init …/FILL_EM/js/filler_gojs.js:1524
onload …/cfgparlog/confpar/id/1017:1
go-Debug.js:12:115”
what I’m trying to reach is this
before:
after:
Is this possible?
Thx