Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug report]自定义默认锚点无效 #1293

Closed
Minya01 opened this issue Aug 21, 2023 · 2 comments
Closed

[Bug report]自定义默认锚点无效 #1293

Minya01 opened this issue Aug 21, 2023 · 2 comments

Comments

@Minya01
Copy link

Minya01 commented Aug 21, 2023

问题描述

想要实现自定义BaseModel继承HtmlNodeModel,重写getDefaultAnchor只保留左右两个锚点。渲染画布时,有执行对应的函数,但是画布中的节点还是显示默认的4个锚点。
具体实现如下:

  1. 注册节点 registerNode.tsx
export default function RegisteNode(lf: LogicFlow, process: any) {
  class BaseModel extends HtmlNodeModel {
    // 连线规则
    getConnectedSourceRules(): ConnectRule[] {
      const rules = super.getConnectedSourceRules();
      const startNode: any = {
        message: 'xxx只允许作为起始节点,不可以被其他节点指向',
        validate: (source: BaseNodeModel, target: BaseNodeModel, sourceAnchor, ...other) => {
          console.log('>>>>>> 验证锚点类型', sourceAnchor.type);
          return target.type !== NodeType.START;
        },
      };
      rules.push(startNode);
      return rules;
    }
    getDefaultAnchor() {
      const { width, height, x, y, id } = this;
      console.log('>>>>> 设置左右锚点 getDefaultAnchor', this);
      return [
        {
          x: x - width / 2,
          y,
          type: 'left',
          edgeAddable: false, // 控制锚点是否可以从此锚点手动创建连线。默认为true。
          id: `${id}_0`,
        },
        {
          x: x + width / 2,
          y,
          type: 'right',
          id: `${id}_1`,
        },
      ];
    }
  }

class StartModel extends BaseModel {
    setAttributes() {
      super.setAttributes();
    }
  }

  // 自定义节点
  class BoxNode extends HtmlNode {
    setHtml(rootEl: HTMLElement) {
      const root = createRoot(rootEl);
      const anchors = this.props.model.getDefaultAnchor();
      console.log('>>>>>> 打印锚点信息 BoxNode :', anchors);
      root.render(<Box model={this.props.model} lf={lf} showProgress={showProgress} />);
    }
  }

 lf.register({
    type: NodeType.START,
    view: BoxNode,
    model: StartModel,
  });
}
  1. index.tsx
import RegisteNode from './registerNode';

const lf = new LogicFlow({
      ...config,
      container: refContainer.current,
      // 仅浏览,不可编辑?
      isSilentMode: preview,
    });

RegisteNode(lf, process);
lf.render(data);

image

image

相关信息 context

LogicFlow Version: 1.2.12
Node Version: v16.14.2
Platform: Mac

@boyongjiong
Copy link
Collaborator

这个问题解决了吗?这边建议你 codesanbox 上面提供一个我们直接可以看的版本,直接给代码这种我们不太方便定位问题

@wumail
Copy link
Collaborator

wumail commented Oct 18, 2023

image
你好,我本地无法复现该问题

由于长时间没有提供可复现示例,该Issue被暂时关闭了,如仍有问题,请提供最小可复现示例以重新开启Issue

@wumail wumail closed this as completed Oct 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants