1、任务开发案例，组件整体结构

1625411888906.png

二、自定义节点

import React from 'react';
import { RegisterNode } from 'gg-editor';

import { drawNode } from './drawUtils';

const JobPackageNode = () => {
  const nodeConfig = {
    draw: (item) =>
      drawNode({
        item,
      }),
    afterDraw() {},
  };

  return <RegisterNode name="package-node" config={nodeConfig} extend="rect" />;
};

export default JobPackageNode;

1625412062387.png

三、封装工具栏按钮组件

import { Toolbar, withPropsAPI } from 'gg-editor';
      <Toolbar className={styles.toolbar}>
        <ToolbarButton
          command="undo"
          icon="swap-left"
          text={intl.get('xmin.task.view.editor.undo').d('撤销')}
        />
        <Divider type="vertical" />
        <ToolbarButton
          loading={updateJobLoading}
          icon="save"
          text={intl.get('hzero.common.button.save').d('保存')}
          onClick={handleSave}
        />
        <Divider type="vertical" />
        <ToolbarButton
          loading={submitJobLoading}
          icon="upload"
          text={intl.get('hzero.common.button.submit').d('提交')}
          onClick={handleSubmit}
        />
      </Toolbar>

const ToolbarButton = (props) => {
  const { command, icon, text, onClick, disabled, loading } = props;

  return command ? (
    <Command name={command || null}>
      <Tooltip
        title={text || upperFirst(command)}
        placement="bottom"
        overlayClassName={styles.tooltip}
      >
        <Icon type={icon} onClick={onClick} />
      </Tooltip>
    </Command>
  ) : (
    <Tooltip
      title={text || upperFirst(command)}
      placement="bottom"
      overlayClassName={styles.tooltip}
    >
      <Button loading={loading} disabled={disabled} icon={icon} onClick={onClick} />
    </Tooltip>
  );
};

export default ToolbarButton;

四、Item 自定义节点元素

• 它有4个属性，1个必须的属性model；5种状态

• // Item的4个属性
  style?: React.CSSProperties;
  className?: string;
  type?: ItemType;  // 可选node和edge
  model: Partial<NodeModel>;
  
  // Item的5种状态
  Active = 'active',
  ActiveAnchorPoints = 'activeAnchorPoints',
  Selected = 'selected',
  HighLight = 'highLight',
  Error = 'error',
  
      <Item
                  type="node" // 类型
                  size={`${code.length * 5 + 30}*55`} // 大小
                  shape="flow-none" // 形状
                  model={{
                    // model 数据
                    key, // 组件ID
                    label: title, // 显示文本
                    type: componentType,
                    code,
                    color: '#1890ff', // 颜色
                    shape: `package-node`,
                  }}
                >
                  {title}
                </Item>
  

五、自定义命令

import React from "react";
import { RegisterCommand } from "gg-editor";

class CustomCommand extends React.Component {
  render() {
    const config = {
      // 是否进入列队，默认为 true
      queue: true,

      // 命令是否可用
      enable(/* editor */) {
        return true;
      },

      // 正向命令逻辑
      execute(/* editor */) {
        console.log("执行正向命令");
      },

      // 反向命令逻辑
      back(/* editor */) {
        console.log("执行反向命令");
      },

      // 快捷按键配置
      shortcutCodes: [["metaKey", "s"], ["ctrlKey", "s"]]
    };

    return <RegisterCommand name="customCommand" config={config} />;
  }
}

export default CustomCommand;