Изменение ширины обводки узловых ссылок при наведении в GoJS - PullRequest
Новая
       13

Изменение ширины обводки узловых ссылок при наведении в GoJS

0 голосов
/ 04 марта 2019

Мое требование - увеличить ширину обводки при наведении курсора на ссылки, соединяющие узлы.

Я использую mouseEnter и mouseLeave для этой цели, и я могу войти туда, но не могу добраться до объекта обводки.

Вот текущая реализация: 

 this.diagram.linkTemplate = $(go.Link,
      {
        mouseEnter: mouseEnter,
        mouseLeave: mouseLeave,
      },
      {
        name: "LINK",
        contextMenu: myContextMenu, cursor: "pointer",
        click: (e, link) => {
          e.diagram.commandHandler.showContextMenu(link);
        }
      },
      {
        selectionAdorned: true,
        selectionAdornmentTemplate: $(go.Adornment, "Auto",
          $(go.Shape,
            {  isPanelMain: true, stroke: colors["highlight"], strokeWidth: 3 }
          ),
          $(go.Shape,
            { stroke: colors["highlight"], scale: 2, strokeWidth: 1.5 },
            new go.Binding("toArrow", "text", function (text) { return toRelations[text] })
          ),
          $(go.Shape,
            { stroke: colors["highlight"], scale: 2, strokeWidth: 1.5 },
            new go.Binding("fromArrow", "toText", function (toText) { return fromRelations[toText] })
          )
        ),  // end Adornment
        layerName: "Foreground",
        reshapable: true,
        routing: go.Link.AvoidsNodes,
        corner: 10,
        // curve: go.Link.JumpOver
      },
      $(go.Shape,  // the link shape
        new go.Binding("stroke", "select", function (h) { return h ? colors["highlight"] : colors["link"]; }),
        new go.Binding("strokeWidth", "select", function (h) { return h ? 3 : 1; })
      ),
      $(go.Shape,
        {
          scale: 2
        },
        new go.Binding("fromArrow", "toText", function (toText) { return fromRelations[toText] }),
        new go.Binding("stroke", "select", function (h) { return h ? colors["highlight"] : colors["link"]; }),
        new go.Binding("strokeWidth", "select", function (h) { return h ? 1.5 : 0.5; })
      ),
      $(go.Shape,
        {
          scale: 2
        },
        new go.Binding("toArrow", "text", function (text) { return toRelations[text] }),
        new go.Binding("stroke", "select", function (h) { return h ? colors["highlight"] : colors["link"]; }),
        new go.Binding("strokeWidth", "select", function (h) { return h ? 1.5 : 0.5; })
      )
    );

Функции ввода и вывода мыши 

function mouseEnter(e, obj) {
  var shape = obj.findObject("LINK");
  shape.strokeWidth = 50;
};

function mouseLeave(e, obj) {
  var shape = obj.findObject("LINK");
  shape.strokeWidth = 3;
};

Как это сделать, дайте мне знать, пожалуйста?

1 Ответ

0 голосов
/ 09 марта 2019

Это почти верно.Попробуйте это: 

  $(go.Link,
    {
      mouseEnter: function(e, link) { link.path.strokeWidth = 4; },
      mouseLeave: function(e, link) { link.path.strokeWidth = 1; }
    },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );

Если хотите, вы можете также изменить путь ссылки Shape.stroke , чтобы изменить его цвет.

...