Question

你好，我对ContextMenuButton样式有疑问：/

cm.add(this.$("ContextMenuButton",
this.$(go.TextBlock, {
  text: 'Usuń',
  stroke: '#323232',
  background: '#eee',
  margin: 0,
  alignment: go.Spot.Center
}),
{
  click: () => {
    this.diagram.commandHandler.deleteSelection();
  },
  mouseHover: () => {
    console.log(this.diagram);
  }
}));

如何为cm对象设置新属性？我的意思是如何去除蓝色阴影？（鼠标悬停）

Answer 1

您需要将selectionAdorned: false添加到上下文菜单中。

这是我在Codepen上做过的一个例子。

您可以看到这是一个上下文菜单，当删除selectionAdorned属性时，单击项目时，您将在方框周围找到选择。

您可以找到有关此here的文档。

Answer 2

好的，但是它不起作用：/我唯一发现关于contextMenu的东西的地方就是这部分代码。如您所见，我已经添加了cm.selectionAdorned = false;

private setUpDiagram() {
  this.diagram = new go.Diagram();
  this.diagram.initialContentAlignment = go.Spot.Center;
  this.diagram.undoManager.isEnabled = true;
  this.diagram.validCycle = go.Diagram.CycleNotDirected;
  this.diagram.toolManager.panningTool.canStart = () => {
    return this.diagram.lastInput.control;
  };
  this.diagram.toolManager.dragSelectingTool.isEnabled = true;
  this.diagram.allowCopy = false;
  this.diagram.addDiagramListener('SelectionMoved', () => this.shiftNodesToEmptySpaces(this.diagram));
  this.diagram.toolManager.draggingTool.isCopyEnabled = false;
  this.diagram.toolManager.contextMenuTool.showContextMenu = (cm: Adornment, obj) => {
    let data = obj.part.data;
    this.diagram.selectCollection(this.diagram.selection.filter(x => x.key != '0'));
    while (cm.elements.count > 0) cm.removeAt(0);

    cm.selectionAdorned = false;
    console.log(cm);
    if (data.key != '0') {
      cm.add(this.$("ContextMenuButton",
        this.$(go.Shape,
          {
            stroke: null, strokeWidth: 0,
            fill: '#323232',
            width: 50,
            height: 25
          },
        ),
        this.$(go.TextBlock, {
          text: 'Usuń',
          stroke: '#ffffff',
          background: '#323232',
          margin: 0,
          alignment: go.Spot.Center
        }),
        {
          click: () => {
            this.diagram.commandHandler.deleteSelection();
          }
        }));
    }
    go.ContextMenuTool.prototype.showContextMenu.call(this.diagram.toolManager.contextMenuTool, cm, obj);
  };
}

GoJS中的样式ContextMenuButton

2 个答案: