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

Could minimap shape attribute support G6 Element? #6491

Open
Rey-Wang opened this issue Nov 8, 2024 · 3 comments
Open

Could minimap shape attribute support G6 Element? #6491

Rey-Wang opened this issue Nov 8, 2024 · 3 comments

Comments

@Rey-Wang
Copy link

Rey-Wang commented Nov 8, 2024

Describe the bug / 问题描述

现在的 shape 要求返回 G 里面的DisplayObject 图形,是否能支持 G6 封装好的图形,比如Line,Rect 等,如果能支持平行线就最好了

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Edge

Additional context / 补充说明

No response

@Aarebecca
Copy link
Contributor

G6 封装的图形都是从 DisplayObject 继承的,因此你提到的 shape 要求返回 G 里面的DisplayObject 图形 是可以的

@Rey-Wang
Copy link
Author

@Aarebecca 我的场景是想要自定义 shape 属性,对于节点是没问题的,Line 和 Combo都会报错,或者有没有例子说一下怎么自定义 shape?

@Rey-Wang
Copy link
Author

      {
        type: 'minimap',
        position: 'top-left',
        containerStyle: {
          top: '16px',
          background: '#FFF',
          borderRadius: '8px',
        },
        maskStyle: {
          borderRadius: '8px',
        },
        shape: (id: string, elementType: ElementType) => {
          const graph = graphRef.current;
          if (!graph) return new Group();
          if (elementType === 'node') {
            return new Rect({
              id,
              style: {
                icon: true,
                iconText: '\ue601',
                iconFontSize: 150,
                iconFill: 'red',
                iconFontFamily: 'IconFont',
                x: 0,
                y: 0,
                size: [50, 50],
                fill: 'white',
                stroke: 'black',
                lineWidth: 2,
              },
            });
          }
          else if (elementType === 'edge') {
            if (!graph) return new Group();
            const edgeData = graph!.getElementData(id);
            const startPoint = graph!.getElementPosition(edgeData.style!.sourceNode);
            const endPoint = graph!.getElementPosition(edgeData.style!.targetNode);
            return new GLine({
              id,
              style: {
                x1: startPoint[0],
                y1: startPoint[1],
                x2: endPoint[0],
                y2: endPoint[1],
                stroke: '#1890FF',
                lineWidth: 2,
                lineDash: graphRef.current!.getElementRenderStyle(id).lineDash,
              },
            });
          }
          else {
            return new RectCombo({
              id,
              style: {
                childrenData: nodes,
              },
            });
          }
        },
      }

现在Combo会报错

TypeError: Cannot read properties of undefined (reading 'model')
    at RectCombo.getComboZIndex (base-combo.ts:200:36)
    at RectCombo.getComboStyle (base-combo.ts:226:27)
    at RectCombo.updateComboPosition (base-combo.ts:233:29)
    at new _BaseCombo (base-combo.ts:110:10)

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

2 participants