From a functional point of view, I display four buttons that can be selected or not, independently. I tried several solutions with simple buttons, or using _doClick and a function to change the properties of the rectangle. I also tried a simple node.
I opted for checkBoxes that allow the buttons to be independent. I used the rectangle icon but I can't make it fit the dimensions of the button. It always seems to be square. I would also like to center the text in the middle of the button.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LLDynp</title>
<meta name="description" content="Nodes with varying lists of ports on each of four sides." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<body onload="init()">
<script id="code">
var myFont = "16px sans-serif";
var myFontSmall = "14px sans-serif";
var myFontBold = "bold 16px sans-serif";
var colors = {
'blueUnitBorder': "rgb(65, 116, 217",
'blueUnit': "rgb(0, 0, 200)",
'red': '#ff0000',
'green': '#52ce60',
'blue': '#6ea5f8',
'black': 'rgb(0, 0, 0)',
'lightred': '#fd8852',
'lightblue': '#afd4fe',
'lightgreen': '#b9e986',
'pink': '#faadc1',
'purple': '#d689ff',
'orange': '#fdb400'
};
var flowTypeArray=
[{key: 0, text: "Ask for", selected: false, color: colors.red},
{key: 1, text: "Deliver", selected: false, color: colors.black},
{key: 2, text: "Ask for $", selected: false, color: colors.green},
{key: 3, text: "$", selected: false, color: colors.blue}
];
var nextNeedNumber=0;
var referenceNeedRow=null;
var referenceNeedName=null;
var maxNeeds=5;
var emptyNeedName = "new need name?";
function init() {
var $ = go.GraphObject.make; //for conciseness in defining node templates
myBannerODIP =
$(go.Diagram, "myBannerODIPDiv",
{ layout: $(go.GridLayout, { wrappingColumn: 4, alignment: go.GridLayout.Position })});
myBannerODIP.nodeTemplate =
$(go.Node, "Auto", { name: "theNode"},
$("CheckBox", "checked", { name: "theCheckBox"},
{ "Button.width": 85, "Button.height": 50,
"_buttonFillOver" : "pink", "ButtonBorder.strokeWidth": 2,
"ButtonIcon.figure": "Rectangle", "ButtonIcon.fill": "yellow",
"ButtonIcon.strokeWidth": 4, "ButtonIcon.width": 55, "ButtonIcon.height": 40,
},
new go.Binding("ButtonIcon.stroke", "key", function(s) { return flowTypeArray[s].color; }).ofObject(),// OK
$(go.TextBlock, { name: "theTextBlock"}, {textAlign: "center", margin: new go.Margin (0, 0, 0, -75)},
new go.Binding("text", "key", function(s) { return flowTypeArray[s].text; }).ofObject(),// OK
new go.Binding("stroke", "key", function(s) { return flowTypeArray[s].color; }),// OK
new go.Binding("font", "checked", function(s) { return s ? myFontBold : myFont; })// OK no ofObject
),
)
);// end horizontal ODIP panel
myBannerODIP.model.nodeDataArray
ODIPNodesArray = [
{key: 0, "checked": false},// checked OK; isSelected bad; choice à l'envers!
{key: 1, "checked": true},
{key: 2 },
{key: 3 },
];
ODIPLinksArray = [];
myBannerODIP.model = new go.GraphLinksModel(ODIPNodesArray, ODIPLinksArray);
};
</script>
</head>
<body onload="init()">
<div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ;
height: 800px; width:1080px; font-size:0; position: relative; ">
<div id="For banner & placeholder save..." style:"grid-column-start: 1;">
<div id="myBannerODIPDiv" style="display: inline-block; width: 400px; height:70px; background: whitesmoke; margin-right: 6px; border: solid 0px black;">
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire