Could minimap shape attribute support G6 Element?

Rey-Wang commented 2 weeks ago

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 commented 1 week ago

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

Rey-Wang commented 1 week ago

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

Rey-Wang commented 1 week ago

      {
        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)

Aarebecca commented 6 hours ago

@Rey-Wang 内部元素（点/边/combo）需要传入额外的 context 参数才行:

new RectCombo({
  context: graph.context,
 style: {
    // ...
  }
})

不过对于你这里，我并不建议传入 combo（这不是正常的用法），你可以使用基本的 Rect 图形替代

antvis / G6