[Bug report]自定义GroupNode，在getLabelShape中追加子元素，点击获取不到该元素信息

[eyea]

问题描述

自定义GroupNode，在getLabelShape中追加子元素，点击获取不到该元素

最简复现

https://codesandbox.io/s/sleepy-northcutt-vr5lgs?file=/src/index.js

相关信息 context

LogicFlow Version:
"@logicflow/core": "^1.2.12",
"@logicflow/extension": "^1.2.13",

Node Version: v20.5.0
Platform: mac

[wumail]

是说没有触发node:click吗，如果是的话，需要在h函数里添加一下事件

getLabelShape() {
    const { model, graphModel } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h(
      "svg",
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 25,
        height: 25,
        viewBox: "0 0 1274 1024"
      },
      [
        h("path", {
          fill: style.stroke,
          onClick: () => {
            graphModel.eventCenter.emit('node:click', {data: {msg: 'this is label'}})
          },
          d:
            "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z"
        })
      ]
    );
  }

[eyea]

是说没有触发node:click吗，如果是的话，需要在h函数里添加一下事件

getLabelShape() {
    const { model, graphModel } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h(
      "svg",
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 25,
        height: 25,
        viewBox: "0 0 1274 1024"
      },
      [
        h("path", {
          fill: style.stroke,
          onClick: () => {
            graphModel.eventCenter.emit('node:click', {data: {msg: 'this is label'}})
          },
          d:
            "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z"
        })
      ]
    );
  }

你好，是想让这个元素有节点的特征，就是把a节点放进b节点。
a上面会有id properties x y 等信息。

codesandbox 中点击可以看到，父节点并没有子元素（children为空）

{id: 11, type: "my-group", x: 300, y: 280, properties: Object…}
id: 11
type: "my-group"
x: 300
y: 280
properties: Object
children: Array(0)

[wumail]

是说没有触发node:click吗，如果是的话，需要在h函数里添加一下事件

getLabelShape() {
    const { model, graphModel } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h(
      "svg",
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 25,
        height: 25,
        viewBox: "0 0 1274 1024"
      },
      [
        h("path", {
          fill: style.stroke,
          onClick: () => {
            graphModel.eventCenter.emit('node:click', {data: {msg: 'this is label'}})
          },
          d:
            "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z"
        })
      ]
    );
  }

你好，是想让这个元素有节点的特征，就是把a节点放进b节点。 a上面会有id properties x y 等信息。

codesandbox 中点击可以看到，父节点并没有子元素（children为空）

{id: 11, type: "my-group", x: 300, y: 280, properties: Object…}
id: 11
type: "my-group"
x: 300
y: 280
properties: Object
children: Array(0)

没太懂，是期望自定义的labelShape做为子节点被加入到children里？

[eyea]

是说没有触发node:click吗，如果是的话，需要在h函数里添加一下事件

getLabelShape() {
    const { model, graphModel } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h(
      "svg",
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 25,
        height: 25,
        viewBox: "0 0 1274 1024"
      },
      [
        h("path", {
          fill: style.stroke,
          onClick: () => {
            graphModel.eventCenter.emit('node:click', {data: {msg: 'this is label'}})
          },
          d:
            "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z"
        })
      ]
    );
  }

你好，是想让这个元素有节点的特征，就是把a节点放进b节点。 a上面会有id properties x y 等信息。
codesandbox 中点击可以看到，父节点并没有子元素（children为空）

{id: 11, type: "my-group", x: 300, y: 280, properties: Object…}
id: 11
type: "my-group"
x: 300
y: 280
properties: Object
children: Array(0)

没太懂，是期望自定义的labelShape做为子节点被加入到children里？

你好，我补充了下问题示例 codesandbox
期望这里的第39行 自定义节点 IconUser 作为子组件插入

[wumail]

是说没有触发node:click吗，如果是的话，需要在h函数里添加一下事件

getLabelShape() {
    const { model, graphModel } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h(
      "svg",
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 25,
        height: 25,
        viewBox: "0 0 1274 1024"
      },
      [
        h("path", {
          fill: style.stroke,
          onClick: () => {
            graphModel.eventCenter.emit('node:click', {data: {msg: 'this is label'}})
          },
          d:
            "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z"
        })
      ]
    );
  }

你好，是想让这个元素有节点的特征，就是把a节点放进b节点。 a上面会有id properties x y 等信息。
codesandbox 中点击可以看到，父节点并没有子元素（children为空）

{id: 11, type: "my-group", x: 300, y: 280, properties: Object…}
id: 11
type: "my-group"
x: 300
y: 280
properties: Object
children: Array(0)

没太懂，是期望自定义的labelShape做为子节点被加入到children里？

你好，我补充了下问题示例 codesandbox 期望这里的第39行 自定义节点 IconUser 作为子组件插入

LogicFlow不支持两个节点直接嵌套。h函数是preact的h函数，可以看看preact 的h函数是如何使用的， h("image", { IconUser })是不行的。
如果要通过h函数将元素渲染只能是类似这样的方式

getLabelShape() {
    return h(
      "svg",
      {
        x: 1
        y: 1,
        width: 25,
        height: 25,
        viewBox: "0 0 1274 1024"
      },
      children // children 是 VNode或者其他类型，具体见preact h函数的用法
    );
  }

这种方式不具备你期望的LogicFlow节点特性。
另外一种方式:

• 利用父元素（MyGroup）上的某个属性（customChildren）记录自定义节点IconUser的nodeId
• IconUser根据其父元素MyGroup进行定位
• 添加nodeMoveRule，让父子节点可以一起移动

lf.graphModel.addNodeMoveRules(
    (
      model: { customChildren: string[] },
      deltaX: any,
      deltaY: any,
    ) => {
      if (customChildren.length) {
        lf.graphModel.moveNodes(customChildren, deltaX, deltaY, true);
        return true;
      }
      return true;
    },
  );

这种方式中，IconUser具备LogicFlow节点的性质，实际上是两个独立的节点，并不直接嵌套