自定义节点时svg的path图标显示巨大

[qiaolin-li]

我想实现一个并行网关，我看到排他网关已经实现了，只不过是中间的图标 x 改编为 + 即可，然后我拷贝了排他网关的代码，并且按照使用文档在 https://www.iconfont.cn/ 找了好几个图标

结果却是无论选择哪个图片，他都会显示的非常庞大

以下是实现的代码，基本上与框架内部扩展的排他网关一致

// eslint-disable-next-line max-classes-per-file
import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core';
import Ids from 'ids';

const ids = new Ids([32, 32, 1]);

function getBpmnId() {
  return ids.next();
}

class ParallelGatewayModel extends PolygonNodeModel {
  static extendKey = 'ParallelGatewayModel';
  
  constructor(data, graphModel) {
    if (!data.id) {
      data.id = `Parallel_Gateway_${getBpmnId()}`;
    }
    if (!data.text) {
      data.text = '';
    }
    if (data.text && typeof data.text === 'string') {
      data.text = {
        value: data.text,
        x: data.x,
        y: data.y + 40,
      };
    }
    super(data, graphModel);
    this.points = [
      [25, 0],
      [50, 25],
      [25, 50],
      [0, 25],
    ];
  }
}

class ParallelGatewayView extends PolygonNode {
  static extendKey = 'ParallelGatewayNode';

  getShape() {
    const { model } = this.props;
    const { x, y, width, height, points } = model;
    const style = model.getNodeStyle();
    return h(
      'g',
      {
        transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
      },
      h('polygon', {
        ...style,
        x,
        y,
        points,
      }),
      h('path', {
        d: 'M801.171 483.589H544V226.418c0-17.673-14.327-32-32-32s-32 14.327-32 32v257.171H222.83c-17.673 0-32 14.327-32 32s14.327 32 32 32H480v257.17c0 17.673 14.327 32 32 32s32-14.327 32-32v-257.17h257.171c17.673 0 32-14.327 32-32s-14.327-32-32-32z',
        ...style,
      }),
    );
  }
}

const ParallelGateway = {
  type: 'bpmn:parallelGateway',
  view: ParallelGatewayView,
  model: ParallelGatewayModel,
};

export { ParallelGatewayView, ParallelGatewayModel };
export default ParallelGateway;

请大佬赐教，该怎么解决这个问题

[towersxu]

直接h('g')是有问题的，建议在外面添加svg标签，使用viewBox来控制。viewBox文档：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox

[qiaolin-li]

搞定了，有一位群友给出了解决方案，以下是代码实现

// eslint-disable-next-line max-classes-per-file
import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core';
import Ids from 'ids';

const ids = new Ids([32, 32, 1]);

function getBpmnId() {
  return ids.next();
}

class ParallelGatewayModel extends PolygonNodeModel {
  static extendKey = 'ParallelGatewayModel';
  
  constructor(data, graphModel) {
    if (!data.id) {
      data.id = `Parallel_Gateway_${getBpmnId()}`;
    }
    if (!data.text) {
      data.text = '';
    }
    if (data.text && typeof data.text === 'string') {
      data.text = {
        value: data.text,
        x: data.x,
        y: data.y + 40,
      };
    }
    super(data, graphModel);
    this.points = [
      [25, 0],
      [50, 25],
      [25, 50],
      [0, 25],
    ];
  }
}

const svgPath =
  'M580.722174 437.990403 580.722174 78.171384 436.794158 78.171384 436.794158 437.990403 76.975139 437.990403 76.975139 581.918419 436.794158 581.918419 436.794158 941.737438 580.722174 941.737438 580.722174 581.918419 940.542216 581.918419 940.542216 437.990403Z';

class ParallelGatewayView extends PolygonNode {
  static extendKey = 'ParallelGatewayNode';

  getIconShape() {
    const { model } = this.props;
    const { x, y, width, height, points } = model;
    const style = model.getNodeStyle();

    const value = 7;

    return h(
      'svg',
      {
        x: value,
        y: value,
        width: width - value * 2,
        height: height - value * 2,
        viewBox: '0 0 1024 1024',
      },
      h('path', {
        d: svgPath,
        ...style,
        fill: style.stroke,
      }),
    );
  }

  getShape() {
    const { model } = this.props;
    const { x, y, width, height, points } = model;
    const style = model.getNodeStyle();
    return h(
      'g',
      {
        transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
      },
      [
        h('polygon', {
          ...style,
          x,
          y,
          points,
        }),
        this.getIconShape(),
      ],
    );
  }
}
const ParallelGateway = {
  type: 'bpmn:parallelGateway',
  view: ParallelGatewayView,
  model: ParallelGatewayModel,
};

export { ParallelGatewayView, ParallelGatewayModel };
export default ParallelGateway;