В GoJs checkBox я хочу, чтобы значок проверки был прямоугольной angular, а не квадратной - PullRequest
Новая
       24

В GoJs checkBox я хочу, чтобы значок проверки был прямоугольной angular, а не квадратной

1 голос
/ 19 апреля 2020

С функциональной точки зрения я отображаю четыре кнопки, которые можно выбрать или нет, независимо. Я попробовал несколько решений с помощью простых кнопок или с помощью _doClick и функции для изменения свойств прямоугольника. Я также попробовал простой узел.
Я выбрал флажки, которые позволяют кнопкам быть независимыми. Я использовал значок прямоугольника, но не могу подогнать его под размеры кнопки. Это всегда кажется квадратным. Я также хотел бы центрировать текст по центру кнопки. 

<!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>

1 Ответ

1 голос
/ 19 апреля 2020

Мне неясно, что вы хотите. Вы видели все настройки на https://gojs.net/latest/extensions/Checkboxes.html? Вы можете изменить свойства «ButtonBorder» и «ButtonIcon». Для примера: 

     $("CheckBox", "choice6",
          {
            "Button.width": 20, "Button.height": 20,
            "ButtonBorder.figure": "Circle", "ButtonBorder.stroke": "blue",
            "ButtonIcon.figure": "Circle", "ButtonIcon.fill": "blue",
            "ButtonIcon.strokeWidth": 0, "ButtonIcon.desiredSize": new go.Size(10, 10)
          },
          $(go.TextBlock, "blue circle")
      ),
...