Dear support,
my use case is to have some ‘choices’ on the “MAPPEDINSTANCE”-TextBoxes. The HTMLInfo.show() function is not called. Clicking on the above “NAME”-TextBlock the show()-function is called.
What should I do to enable the show-function clicking on the MAPPEDINSTANCE-TextBoxes. These are defined in the “subComponentsTemplate”. Thanks in advance!
var subComponentsTemplate =
$(go.Panel, "Horizontal",
$(go.Picture,
{
margin: new go.Margin(5, 5, 5, 3) , // top, right, bottom, left,
desiredSize: new go.Size(30, 30), source: "./ProcessArchitect_files/LogoFesto.png"},
new go.Binding("source", "iconRequiredComponent"),
),
$(go.TextBlock, // >>> clicking here HTMLInfo.show() is NOT called ! <<<
{ name: "MAPPEDINSTANCE",
editable: true,
font: "8pt Verdana, sans-serif" ,
choices: ['One', 'Two', 'Three', 'Four'] // TEST
},
new go.Binding("choices")),
)
);
myWorkspace =
$(go.Diagram, "divWorkspace",
{ maxSelectionCount: 1,
"undoManager.isEnabled": true,
}
);
myWorkspace.nodeTemplate =
$(go.Node, "Auto",
{
locationSpot: go.Spot.Top,
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle",
{ name: "SHAPE", fill: "#B4B4B4", strokeWidth: 0 ,
parameter1: 10,
portId: "", fromLinkable: true, toLinkable: true,
fromLinkableDuplicates: true, toLinkableDuplicates: true,
fromLinkableSelfNode: true, toLinkableSelfNode: true
},
new go.Binding("figure")
),
// main panel
$(go.Panel, "Vertical",
{ name: "MAIN_PANEL" },
// app icon / app name | name
$(go.Panel, "Horizontal",
{ alignment: go.Spot.Left },
// app icon / app name
$(go.Panel, "Vertical",
// app icon
$(go.Picture,
{
//alignment: go.Spot.Left,
desiredSize: new go.Size(40, 40), source: "./ProcessArchitect_files/LogoFesto.png",
margin: new go.Margin(3, 3, 3, 5) , // top, right, bottom, left
},
new go.Binding("source", "icon")
),
),
// name / PanelExpanderButton / 'SubComponents'
$(go.Panel, "Vertical",
// name
$(go.TextBlock,
{ name: "NAME",
//alignment: go.Spot.Right,
editable: true,
margin: 3,
font: "bold 12px Roboto, sans-serif",
stroke: "rgba(0, 0, 0, .87)",
maxSize: new go.Size(160, 80),
},
new go.Binding("text", "name").makeTwoWay(), // graphic <-> update model !!
),
$(go.Panel, "Horizontal",
{ alignment: go.Spot.Right },
$(go.Shape, "Circle",
{
margin: new go.Margin(8, 8, 0, 10), // top, right, bottom, left
width: 10, height: 10, fill: "red", stroke: null
},
),
$(go.TextBlock,
{ text: "required components",
margin: mt8,
font: "10px Roboto, sans-serif",
stroke: "rgba(0, 0, 0, .87)",
}
),
$("PanelExpanderButton", "SUBCOMPONENTS",
{ margin: new go.Margin(8, 0, 0, 8) } // top, right, bottom, left
)
)
),
),
$(go.Shape, "LineH",
{
stroke: "rgba(0, 0, 0, .60)", strokeWidth: 1,
height: 1, stretch: go.GraphObject.Horizontal,
margin: new go.Margin(5, 0, 0, 0) // top, right, bottom, left
},
new go.Binding("visible").ofObject("SUBCOMPONENTS") // only visible when info is expanded
),
$(go.Panel, "Vertical",
{
name: "SUBCOMPONENTS",
stretch: go.GraphObject.Horizontal,
margin: 8,
defaultAlignment: go.Spot.Left,
itemTemplate: subComponentsTemplate,
visible: false
},
new go.Binding("itemArray", "subComponents")
),
), // end Panel Vertical main
); // end NodeTemplate
var customEditor = new go.HTMLInfo();
var customSelectBox = document.createElement("select");
customEditor.show = function(textBlock, diagram, tool)
{
console.log("textBlock.name: " + textBlock.name);
}
