如何修复调色板中组中成员元素的“位置”属性的绑定？

时间：2019-04-03 03:55:10

标签： javascript gojs

我一直在调整GoJS中的Floor Planner项目，我想在调色板区域中制作自己的自定义项目（分组元素）。我能够生成一个项目，但是组中的元素对已设置的节点模板映射没有反应，如以下屏幕截图所示： close() vs shutdown()

我期望的是具有这样的分组元素：

enter image description here

这是我设置模板映射的方式：

用于蓝线 

function makeBlueLine() {
    var $ = go.GraphObject.make;
    return $(go.Node, "Auto",
    {
        contextMenu: makeContextMenu(),
        selectionObjectName: "SHAPE",
        selectionAdorned: false,
        resizeAdornmentTemplate: makeWallPartResizeAdornment(),
        locationSpot: go.Spot.Left,
        toolTip: makeNodeToolTip(),
        resizable: true,
        resizeObjectName: "SHAPE",
        rotatable: true,
        doubleClick: function (e) { if (e.diagram.floorplanUI) e.diagram.floorplanUI.hideShow("selectionInfoWindow"); },
    },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    new go.Binding("visible", "showOnPlan"),
    new go.Binding("angle", "angle"),
    $(go.Shape,
    { name: "SHAPE", fill: "blue", stroke: "#000", strokeWidth: 1, height: 1, figure: "Rectangle" },
    new go.Binding("width", "length").makeTwoWay(),
    new go.Binding("stroke", "isSelected", function (s, obj) {
                return s ? "green" : "blue";
            }).ofObject(),
    ),
  );
}

对于组 

function makeLineContainer() {
    var $ = go.GraphObject.make;
    return $(go.Group, "Vertical",
        {
            //isSubGraphExpanded: false,
            contextMenu: makeContextMenu(),
            doubleClick: function (e) {
                if (e.diagram.floorplanUI) e.diagram.floorplanUI.hideShow("selectionInfoWindow");
            },
            toolTip: makeGroupToolTip()
        },
        new go.Binding("location", "loc"),
          $(go.Panel, "Auto",
            $(go.Shape, "RoundedRectangle", { fill: "rgba(0,0,0,0)", stroke: null, name: 'SHAPE', strokeCap: 'square' },
              new go.Binding("fill", "isSelected", function (s, obj) {
                  return s ? "rgba(128, 128, 128, 0.10)" : "rgba(0,0,0,0)";
              }).ofObject()
              ),
            $(go.Placeholder, { padding: 5 })
          )
        )
}

这是我的模型阵列设置：

BLUE_LINE_DATA_ARRAY = [
    {
        category: "LineParent",
        key: "Type1",
        isGroup: true,
    },
    {
        category: "BlueLine",
        group: "Type1",
        loc: '0 0',
        angle: 90,
        length: 50,
        key: "G1",
    },
    {
        category: "BlueLine",
        group: "Type1",
        loc: '10 10',
        angle: 0,
        length: 50,
        key: "G2",
    },  
];

对于调色板初始化，除了在其中添加组模板映射之外，我没有做任何更改。这是我制作的模板映射：

this.nodeTemplateMap.add("BlueLine", makeBlueLine());
this.groupTemplateMap.add("LineParent", makeLineContainer());

我找不到我想要的东西。我还检查了macros.html示例，一切看起来都很相似。

2 个答案:

答案 0 :(得分：0)

我只是尝试实现这样的示例，但是我无法在Palette中遇到组的任何问题。这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
  <script src="go.js"></script>

  <script>
    function init() {
      var $ = go.GraphObject.make;

      // initialize main Diagram
      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          { "undoManager.isEnabled": true });

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape,
            { fill: "white", stroke: "gray", strokeWidth: 2 },
            new go.Binding("stroke", "color")),
          $(go.TextBlock,
            { margin: 4 },
            new go.Binding("text").makeTwoWay())
        );

      // initialize Palette
      myPalette =
        $(go.Palette, "myPaletteDiv",
          { nodeTemplateMap: myDiagram.nodeTemplateMap });

      myPalette.model.nodeDataArray = [
        { key: 1, group: 3, text: "blue node", color: "blue", location: "30 0" },
        { key: 2, group: 3, text: "orange node", color: "orange", location: "0 40" },
        { key: 3, isGroup: true, text: "GROUP" }
      ];

      // initialize Overview
      myOverview =
        $(go.Overview, "myOverviewDiv",
          { observed: myDiagram, contentAlignment: go.Spot.Center });

      load();
    }

    // save a model to and load a model from Json text, displayed below the Diagram
    function save() {
      var str = myDiagram.model.toJson();
      document.getElementById("mySavedModel").value = str;
    }
    function load() {
      var str = document.getElementById("mySavedModel").value;
      myDiagram.model = go.Model.fromJson(str);
    }
  </script>
</head>
<body onload="init()">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
      <div id="myPaletteDiv" style="flex-grow: 1; width: 120px; background-color: whitesmoke; border: solid 1px black"></div>
      <div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 120px; height: 100px; background-color: lightgray; border: solid 1px black"></div>
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  </div>
  <div id="buttons">
    <button id="loadModel" onclick="load()">Load</button>
    <button id="saveModel" onclick="save()">Save</button>
  </div>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"},
{"key":2, "text":"world", "color":"red", "location":"70 0"}
  ],
  "linkDataArray": [
{"from":1, "to":2}
  ]}
  </textarea>
</body>
</html>

请注意该组如何显示在组件面板中，以及何时在主图中删除副本。这两个成员节点中的每一个都根据绑定进行定位，并且它们保持在该相对位置，直到用户在主图中移动一个成员节点为止。

答案 1 :(得分：0)

试图对此进行更多研究，但不幸的是，我仍然没有找到问题的明确原因或原因。但是，我确实找到了一种解决方法，但这使我失去了为平面规划师使用多个调色板的能力。因此，基本上，我更改了Floor Planner包的调色板构造器，以遵循在GoJS网站上找到的调色板样本的模式。

它是如何首先声明的：

function FloorplanPalette(div, floorplan, nodeDataArray) {
    go.Palette.call(this, div);

    var $ = go.GraphObject.make;
    this.model = $(go.GraphLinksModel, { nodeDataArray: nodeDataArray });
    this.contentAlignment = go.Spot.Center;
    this.nodeTemplateMap = floorplan.nodeTemplateMap;
    this.groupTemplateMap = floorplan.groupTemplateMap;
    this.toolManager.contextMenuTool.isEnabled = false;

    // add this new FloorplanPalette to the "palettes" field of its associated Floorplan
    floorplan.palettes.push(this);
} go.Diagram.inherit(FloorplanPalette, go.Palette);

我的更改：

function FloorplanPalette(div, floorplan, nodeDataArray) {
    var $ = go.GraphObject.make;
    myPalette =
    $(go.Palette, div,  // must name or refer to the DIV HTML element
        {
        nodeTemplateMap: floorplan.nodeTemplateMap,
        groupTemplateMap: floorplan.groupTemplateMap,
        contentAlignment: go.Spot.Center,
        });

    myPalette.model = new go.GraphLinksModel(nodeDataArray);
}
相关问题
最新问题