LogicFlow 如何控制锚点的显隐

问题描述
请问如何实现节点再非选中情况下也能显示锚点？我看现在是只有选中或Hover时，节点才会出现锚点

Apr 19 '22 07:04 BingruLin

目前是只有通过鼠标才能控制锚点的显隐，因为默认锚点显示出来不好看。你是什么场景需要锚点一直显示呢？如果场景合理，我们考虑下个版本加。

Apr 19 '22 09:04 towersxu

我现在有种节点，里面有不同颜色的锚点，从某种锚点有连出边时，希望能展示锚点，这样即使节点没被选中时，也知道边是从哪类锚点出来的了

Apr 20 '22 03:04 BingruLin

可以，我们会加到1.2.0版本中。到时支持代码控制锚点，然后可以到一个节点的某些锚点显示，某些锚点不显示。

Apr 20 '22 03:04 towersxu

谢谢您

发件人: xutao @.> 发送时间: 2022年4月20日 11:39 收件人: didi/LogicFlow @.> 抄送: BingruLin @.>; Author @.> 主题: Re: [didi/LogicFlow] 如何控制锚点的显隐 (Issue #586)

可以，我们会加到1.2.0版本中。到时支持代码控制锚点，然后可以到一个节点的某些锚点显示，某些锚点不显示。

― Reply to this email directly, view it on GitHubhttps://github.com/didi/LogicFlow/issues/586#issuecomment-1103438109, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AH2YYANXSLB4Z5TL6Z4HDWDVF5363ANCNFSM5TX3L6EQ. You are receiving this because you authored the thread.Message ID: @.***>

Apr 21 '22 14:04 BingruLin

目前我在1.1.13版本实现了这个功能。在从一个锚点开始拖拽的时候，显示其它可以连接的节点上的左侧锚点。可以在Node的自定义Model中监听锚点的拖拽事件，开始拖拽，将isHovered state设置为true就行。

// NodelModal的构造函数做如下处理
      logicFlow.on('anchor:dragstart', (data) => {
        if (this.props.model.id !== data.nodeModel.id) {
          // TODO: 需要让能连接的锚点显示出来，目前只有通过设置isHovered来实现，
          // 后期看框架是否支持
          this.setState({
            isHovered: true,
            // isFakerHovered表示不是真的hovered，只是为了让节点的锚点显示出来而设置的hovered
            // @ts-ignore
            isFakerHovered: true,
            currentAnchorDragNodeId: data.nodeModel.id,
          });
        }
      });

      logicFlow.on('anchor:drop', (data) => {
        if (this.props.model.id !== data.nodeModel.id) {
          // TODO: 需要让能连接的锚点显示出来，目前只有通过设置isHovered来实现，
          // 后期看框架是否支持
          this.setState({
            isHovered: false,
            // @ts-ignore
            isFakerHovered: false,
            currentAnchorDragNodeId: null,
          });
        }
      });

      logicFlow.on('node:mouseleave', (data) => {
        if (this.props.model.id === data.data.id) {
          // @ts-ignore
          if (this.state.isFakerHovered) {
            this.setState({
              isHovered: true,
            });
          }
        }
      });

    // 重写NodeModal的getStateClassName方法
    getStateClassName() {
      const stateClassName = super.getStateClassName();
      const { id, isSelected } = this.props.model;
      const {
        isHovered,
        // @ts-ignore
        isFakerHovered,
        // @ts-ignore
        currentAnchorDragNodeId,
      } = this.state;

      const extraClassNames = [];

      if (isFakerHovered) {
        // 节点是否可以从当前拖拽锚点的节点连接过来
        if (this.isNodeCanStillConnectToAnotherNode(currentAnchorDragNodeId, id)) {
          extraClassNames.push('lf-node-allow-previous');
        }
      } else if (isHovered || isSelected) {
        // 节点是否有可以连接的后序节点
        if (this.isNodeCanStillConnectToAnotherNode(id)) {
          extraClassNames.push('lf-node-allow-next');
        }
      }

      return extraClassNames.length
        ? `${stateClassName} ${extraClassNames.join(' ')}`
        : stateClassName;
    }

// 样式
  .lf-graph {
    .lf-node {
      &.lf-node-allow-previous {
        .lf-anchor {
          .lf-node-anchor-hover {
            visibility: visible;
          }
        }
      }

      // 节点当前如果没有可联前序节点，就不显示左侧锚点
      &:not(.lf-node-allow-previous) {
        .lf-anchor {
          &:not(:last-child) {
            display: none;
          }
        }
      }

      // 节点当前如果没有可联后序节点，就不显示右侧锚点
      &:not(.lf-node-allow-next) {
        .lf-anchor {
          &:last-child {
            display: none;
          }
        }
      }
    }
  }

// 效果

54c3e41e-5ca7-4bd6-888d-5e6d5bb28d28