@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/index.ts

@@ -0,0 +1,26 @@
+import ContextMenu from "./ContextMenu";
+import CustomDndPanel from "./CustomDndPanel";
+import ConnectionLine from "./CustomNode/ConnectionLine";
+import CustomBezierEdge from "./CustomNode/CustomBezierEdge";
+import GroupNode, { groupNodeDefaultStyle } from "./CustomNode/GroupNode";
+import RectNode, { rectNodeDefaultStyle } from "./CustomNode/RectNode";
+import TextNode, { textNodeDefaultStyle } from "./CustomNode/TextNode";
+import FlowControl, { flowControlEditKeys, flowControlViewKeys } from "./FlowControl";
+import NodeBadge from "./NodeBadge";
+
+export {
+  NodeBadge,
+  CustomDndPanel,
+  ContextMenu,
+  FlowControl,
+};
+
+export {
+  ConnectionLine,
+  RectNode,
+  TextNode,
+  GroupNode,
+  CustomBezierEdge,
+};
+
+export { rectNodeDefaultStyle, groupNodeDefaultStyle, textNodeDefaultStyle, flowControlViewKeys, flowControlEditKeys };

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/FlowControl/data.d.ts

@@ -0,0 +1,12 @@
+
+export type FlowControlViewKey = 'zoomIn' | 'zoomOut' | 'zoomReset' | 'translateRest' | 'showMiniMap' | 'download' | 'viewAll';
+export type FlowControlEditKey = 'undo' | 'redo' | 'settings' | 'reset' | 'save' | 'import' | 'export';
+export type FlowControlAllKey = FlowControlViewKey | FlowControlEditKey;
+
+export interface ItemsProps {
+  key: FlowControlViewKey | FlowControlEditKey;
+  label: React.ReactNode;
+  icon: JSX.Element;
+  onClick: () => void;
+  [key: string]: any;
+}

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/FlowControl/index.less

@@ -0,0 +1,18 @@
+.container {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 101;
+  background-color: white;
+  display: flex;
+
+  .item {
+    cursor: pointer;
+    &:hover {
+      color: #1890ff;
+    }
+    & > :first-child {
+      margin-right: 3px;
+    }
+  }
+}

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/FlowControl/index.tsx

@@ -0,0 +1,375 @@
+import useQiankunData from '@/hooks/useQiankunData';
+import {
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  CloudDownloadOutlined,
+  DownloadOutlined,
+  ExpandOutlined,
+  MinusOutlined,
+  PictureOutlined,
+  ReloadOutlined,
+  SaveOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  ShrinkOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import LogicFlow, { IEditConfigType } from '@logicflow/core';
+import { cfmmUtils, ImportDataUpload, useIntl } from '@umijs/max';
+import { Button, Dropdown, Radio } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { FlowControlAllKey, FlowControlEditKey, FlowControlViewKey, ItemsProps } from './data';
+import styles from './index.less';
+
+export const flowControlViewKeys: FlowControlViewKey[] = [
+  'zoomIn',
+  'zoomOut',
+  'zoomReset',
+  'translateRest',
+  'showMiniMap',
+  'download',
+  'viewAll',
+];
+export const flowControlEditKeys: FlowControlEditKey[] = [
+  'undo',
+  'redo',
+  'settings',
+  'reset',
+  'save',
+  'import',
+  'export',
+];
+
+type IProps = {
+  lf: LogicFlow;
+  disabledAll?: boolean;
+  readonly?: boolean;
+  showKeys?: FlowControlAllKey[];
+  handleSettingsOpenChange: (open: boolean) => void;
+  onSave?: (graphData: LogicFlow.GraphData, setting: IEditConfigType) => void;
+  onReset?: (lf: LogicFlow) => void;
+  onExport?: (graphData: LogicFlow.GraphData) => void;
+  onImport?: (graphData: LogicFlow.GraphData) => void;
+  onDownload?: (blob: Blob) => void;
+  /**
+   * 历史记录cb函数（上一步下一步触发）
+   * @param preGraphData 改变前的画布数据
+   * @param curGraphData 改变后的画布数据
+   */
+  onHistoryChange?: (preGraphData: LogicFlow.GraphData, curGraphData: LogicFlow.GraphData) => void;
+};
+
+const Control: React.FC<IProps> = (props) => {
+  const {
+    lf,
+    readonly,
+    showKeys,
+    disabledAll,
+    handleSettingsOpenChange,
+    onSave,
+    onReset,
+    onExport,
+    onImport,
+    onDownload,
+    onHistoryChange,
+  } = props;
+  const { currentUser } = useQiankunData();
+
+  const [undoDisable, setUndoDisable] = useState(true);
+  const [redoDisable, setRedoDisable] = useState(true);
+  const { formatMessage } = useIntl();
+
+  const handleImport = (data: string) => {
+    const jsonData = JSON.parse(data);
+    if (onImport) {
+      onImport?.(jsonData);
+    } else {
+      // 将导入的数据渲染到画布上
+      lf.render(jsonData);
+    }
+  };
+
+  const defautlItems: ItemsProps[] = [
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.zoomIn',
+        defaultMessage: '放大',
+      }),
+      key: 'zoomIn',
+      icon: <SearchOutlined />,
+      onClick: () => {
+        lf.zoom(true);
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.zoomOut',
+        defaultMessage: '缩小',
+      }),
+      key: 'zoomOut',
+      icon: <MinusOutlined />,
+      onClick: () => {
+        lf.zoom(false);
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.zoomReset',
+        defaultMessage: '大小适应',
+      }),
+      key: 'zoomReset',
+      icon: <ShrinkOutlined />,
+      onClick: () => {
+        lf.resetZoom();
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.translateRest',
+        defaultMessage: '定位还原',
+      }),
+      key: 'translateRest',
+      icon: <ReloadOutlined />,
+      onClick: () => {
+        lf.resetTranslate();
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.showMiniMap',
+        defaultMessage: '查看缩略图',
+      }),
+      key: 'showMiniMap',
+      icon: <PictureOutlined />,
+      onClick: () => {
+        const { miniMap } = lf.extension;
+        // @ts-ignore
+        if (miniMap.isShow) {
+          // @ts-ignore
+          miniMap.hide?.();
+        } else {
+          // @ts-ignore
+          miniMap.show?.(lf.graphModel.width - 150, 40);
+        }
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.viewAll',
+        defaultMessage: '显示全部内容',
+      }),
+      key: 'viewAll',
+      icon: <ExpandOutlined />,
+      onClick: () => {
+        // 参数为距离左边，上面的距离
+        lf.fitView(400, 50);
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.downloadPicture',
+        defaultMessage: '下载图片',
+      }),
+      key: 'download',
+      icon: <DownloadOutlined />,
+      onClick: async () => {
+        const { data: blob } = await lf.getSnapshotBlob();
+        if (onDownload) {
+          onDownload(blob);
+        } else {
+          cfmmUtils.downloadImgWithWatermark('临时名称', blob, { text: currentUser.userCode });
+        }
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+  ];
+
+  const editItems: ItemsProps[] = [
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.undo',
+        defaultMessage: '上一步',
+      }),
+      key: 'undo',
+      icon: <ArrowLeftOutlined />,
+      props: {
+        disabled: undoDisable || disabledAll,
+      },
+      onClick: () => {
+        const pre = lf.getGraphData() as LogicFlow.GraphData;
+        lf.undo();
+        const cur = lf.getGraphData() as LogicFlow.GraphData;
+        onHistoryChange?.(pre, cur);
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.redo',
+        defaultMessage: '下一步',
+      }),
+      key: 'redo',
+      icon: <ArrowRightOutlined />,
+      props: {
+        disabled: redoDisable || disabledAll,
+      },
+      onClick: () => {
+        const pre = lf.getGraphData() as LogicFlow.GraphData;
+        lf.redo();
+        const cur = lf.getGraphData() as LogicFlow.GraphData;
+        onHistoryChange?.(pre, cur);
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.settings',
+        defaultMessage: '设置',
+      }),
+      key: 'settings',
+      icon: <SettingOutlined />,
+      onClick: () => {
+        handleSettingsOpenChange(true);
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.reset',
+        defaultMessage: '重置',
+      }),
+      key: 'reset',
+      icon: <ReloadOutlined />,
+      onClick: () => {
+        lf.clearData();
+        lf.resetTranslate();
+        lf.resetZoom();
+        lf.history.undos = [];
+        lf.history.redos = [];
+        onReset?.(lf);
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.save',
+        defaultMessage: '保存',
+      }),
+      key: 'save',
+      icon: <SaveOutlined />,
+      onClick: () => {
+        const data = lf.getGraphData() as LogicFlow.GraphData;
+        const setting = lf.getEditConfig();
+        onSave?.(data, setting);
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: (
+        <ImportDataUpload accept=".txt,.json" onImport={handleImport}>
+          {formatMessage({
+            id: 'lib.Flow.control.import',
+            defaultMessage: '导入',
+          })}
+        </ImportDataUpload>
+      ),
+      key: 'import',
+      icon: <UploadOutlined />,
+      onClick: () => {},
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.export',
+        defaultMessage: '导出',
+      }),
+      key: 'export',
+      icon: <CloudDownloadOutlined />,
+      onClick: () => {
+        const data = lf.getGraphData() as LogicFlow.GraphData;
+        onExport?.(data);
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+  ];
+
+  // 过滤没有权限的按钮
+  const items: ItemsProps[] = useMemo(() => {
+    const allItems = [...defautlItems, ...editItems];
+    if (showKeys) {
+      return allItems.filter((item) => showKeys.includes(item.key));
+    }
+    return readonly ? [...defautlItems] : allItems;
+  }, [undoDisable, redoDisable, disabledAll, readonly, lf]);
+
+  const radioItems = useMemo(() => {
+    return items.filter((item) => [...flowControlViewKeys, 'undo', 'redo'].includes(item.key));
+  }, [items]);
+
+  const dropdownItems = useMemo(() => {
+    const newItems = items.filter((item) => flowControlEditKeys.slice(2).includes(item.key as any));
+    return newItems;
+  }, [items]);
+
+  useEffect(() => {
+    if (lf && Object.keys(lf).length !== 0) {
+      lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
+        setUndoDisable(!undoAble);
+        setRedoDisable(!redoAble);
+      });
+    }
+  }, [lf]);
+
+  return (
+    <div className={styles.container}>
+      <Radio.Group value={'small'}>
+        {radioItems.map((item) => (
+          <Radio.Button key={item.key} onClick={item.onClick} {...item.props}>
+            <span style={{ marginRight: 3 }}>{item.icon}</span>
+            <span>{item.label}</span>
+          </Radio.Button>
+        ))}
+      </Radio.Group>
+      {dropdownItems.length ? (
+        <Dropdown menu={{ items: dropdownItems }} arrow disabled={disabledAll}>
+          <Button>
+            {formatMessage({
+              id: 'lib.Flow.control.option',
+              defaultMessage: '操作',
+            })}
+          </Button>
+        </Dropdown>
+      ) : null}
+    </div>
+  );
+};
+
+export default Control;

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/FlowNodePanel/index.less

@@ -0,0 +1,32 @@
+.nodePanel {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 70px;
+  padding: 20px 10px;
+  background-color: white;
+  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
+  border-radius: 6px;
+  text-align: center;
+  z-index: 101;
+  
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  .node {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  :global(.custom-polygon-node) .nodeLabel{
+    margin-top: 10px;
+  }
+  
+  .nodeLabel {
+    font-size: 12px;
+    margin-top: 5px;
+  }
+}

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/FlowNodePanel/index.tsx

@@ -0,0 +1,61 @@
+import LogicFlow from '@logicflow/core';
+import React from 'react';
+import { HtmlNodeConfig } from '../types';
+import styles from './index.less'
+
+interface IProps {
+  lf: LogicFlow;
+  getPanelConfig: (lf: LogicFlow) => any[];
+}
+
+const NodePanel: React.FC<IProps> = (props) => {
+  const { lf, getPanelConfig } = props;
+
+  // 拖拽创建
+  const dragNode = (item: HtmlNodeConfig) => {
+    lf.dnd.startDrag({
+      type: item.type,
+      text: item.label,
+    });
+  };
+
+  const getIcon = (item: HtmlNodeConfig) => {
+    if (item.url) {
+      return <img style={{ ...item.style }} src={item.url} />;
+    }
+    if (item.icon) {
+      return (
+        <div
+          style={{ ...item.style }}
+          onMouseDown={() => dragNode(item)}
+        >
+          {item.icon}
+        </div>
+      );
+    }
+    return (
+      <div
+        style={{ ...item.style }}
+        onMouseDown={() => dragNode(item)}
+      ></div>
+    );
+  };
+
+  // 节点菜单
+  const getNodePanel = (): JSX.Element => {
+    const nodeList: JSX.Element[] = [];
+    getPanelConfig(lf).forEach((item, key) => {
+      nodeList.push(
+        <div className={`${styles.node} ${item.type}`} key={key} onClick={() => item.callback?.()}>
+          <div className={styles.nodeIcon}>{getIcon(item)}</div>
+          <div className={styles.nodeLabel}>{item.label}</div>
+        </div>,
+      );
+    });
+    return <div className={styles.nodePanel}>{nodeList}</div>;
+  };
+
+  return getNodePanel();
+};
+
+export default React.memo(NodePanel);

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/UpdateAnchorPropertyDrawer.tsx

@@ -0,0 +1,134 @@
+import { DrawerForm, DrawerFormProps, ProFormDigit, ProFormText } from '@ant-design/pro-components';
+import LogicFlow from '@logicflow/core';
+import { MyColorPicker, useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import { useEffect } from 'react';
+
+interface IProps extends DrawerFormProps {
+  nodeData: LogicFlow.NodeData | undefined;
+}
+
+const UpdateAnchorPropertyDrawer: React.FC<IProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const { nodeData, ...reset } = props;
+  const { properties = {} } = nodeData || {};
+
+  const [form] = Form.useForm<any>();
+
+  useEffect(() => {
+    if (nodeData) {
+      form.setFieldsValue({
+        ...nodeData,
+        ...properties,
+      });
+    }
+  }, [nodeData]);
+
+  return (
+    <DrawerForm
+      {...reset}
+      title={formatMessage({ id: 'lib.Flow.modal.anchor.update.title', defaultMessage: '修改锚点外观配置' })}
+      resize={{
+        onResize() {},
+        maxWidth: window.innerWidth * 0.8,
+        minWidth: 500,
+      }}
+      form={form}
+      autoFocusFirstInput
+      drawerProps={{
+        destroyOnClose: true,
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        return await props.onFinish?.(values);
+      }}
+    >
+      <ProFormText
+        name="type"
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.anchor.type', defaultMessage: '锚点类型' })}
+        disabled
+      />
+      {/* 文本 */}
+      <ProFormDigit
+        name={['anchorStyle', 'r']}
+        min={1}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.node.r', defaultMessage: '半径' })}
+      />
+      <ProFormDigit
+        name={['anchorStyle', 'strokeWidth']}
+        min={1}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.node.strokeWidth', defaultMessage: '边框粗细' })}
+      />
+      <Form.Item
+        name={['anchorStyle', 'stroke']}
+        label={formatMessage({ id: 'lib.Flow.modal.node.stroke', defaultMessage: '边框颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['anchorStyle', 'stroke'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+      <Form.Item
+        name={['anchorStyle', 'fill']}
+        label={formatMessage({ id: 'lib.Flow.modal.node.fill', defaultMessage: '填充颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['anchorStyle', 'fill'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+      {/* 锚点悬浮 */}
+      <ProFormDigit
+        name={['anchorStyle', 'hover', 'r']}
+        min={1}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.anchor.hover.r', defaultMessage: '悬浮时外围半径' })}
+      />
+      <Form.Item
+        name={['anchorStyle', 'hover', 'stroke']}
+        label={formatMessage({ id: 'lib.Flow.modal.anchor.hover.stroke', defaultMessage: '悬浮时外围边框颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['anchorStyle', 'hover', 'stroke'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+      <ProFormDigit
+        name={['anchorStyle', 'hover', 'strokeWidth']}
+        min={1}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.anchor.hover.strokeWidth', defaultMessage: '悬浮时外围边框粗细' })}
+      />
+      <Form.Item
+        name={['anchorStyle', 'hover', 'fill']}
+        label={formatMessage({ id: 'lib.Flow.modal.anchor.hover.fill', defaultMessage: '悬浮时外围填充颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['anchorStyle', 'hover', 'fill'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+    </DrawerForm>
+  );
+};
+
+export default UpdateAnchorPropertyDrawer;