Блог

Здравствуйте, у меня проблема со стилем 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 объекта? Я имею в виду, как удалить синюю тень? (наведение курсора мыши)

Вам нужно добавить selectionAdorned: false в свое контекстное меню.

Вот пример, который я сделал в Codepen.

Вы можете видеть, что это контекстное меню, и когда вы удаляете свойство selectionAdorned, при нажатии на элементы у вас будет выделение вокруг квадрата.

Вы можете найти документацию об этом здесь .

Хорошо, но это не работает:/ единственное место, где я что-то нашел 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);
  };
}