@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

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

@@ -0,0 +1,369 @@
+import {
+  DrawerForm,
+  DrawerFormProps,
+  ProFormDigit,
+  ProFormGroup,
+  ProFormList,
+  ProFormText,
+} from '@ant-design/pro-components';
+import LogicFlow from '@logicflow/core';
+import { MyColorPicker, useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import { Fragment, useEffect, useMemo } from 'react';
+
+type AllItemType =
+  | 'value'
+  | 'textStyle'
+  | 'labelValue'
+  | 'labelStyle'
+  | 'r'
+  | 'width'
+  | 'height'
+  | 'radius'
+  | 'polygon'
+  | 'nodeStyle'
+  | 'outlineStyle'
+  | 'anchorStyle';
+
+type ShowItemMapType = {
+  [key: string]: {
+    excludeTypeList?: AllItemType[];
+    includeTypeList?: AllItemType[];
+  };
+};
+
+interface IProps extends DrawerFormProps {
+  nodeData: LogicFlow.NodeData | undefined;
+}
+
+const showItemMap: ShowItemMapType = {
+  'circle-node': {
+    excludeTypeList: ['labelValue', 'labelStyle', 'width', 'height', 'radius', 'polygon'],
+  },
+  'ellipse-node': {
+    excludeTypeList: ['labelValue', 'labelStyle', 'width', 'height', 'radius', 'polygon'],
+  },
+  'rect-node': {
+    excludeTypeList: ['labelValue', 'labelStyle', 'r', 'polygon'],
+  },
+  'polygon-node': {
+    excludeTypeList: ['labelValue', 'labelStyle', 'width', 'height', 'radius', 'r'],
+  },
+  'diamond-node': {
+    excludeTypeList: ['labelValue', 'labelStyle', 'width', 'height', 'radius', 'r'],
+  },
+  'text-node': {
+    includeTypeList: ['value', 'textStyle', 'outlineStyle'],
+  },
+  'html-node': {
+    excludeTypeList: ['labelValue', 'labelStyle', 'r', 'polygon', 'value'],
+  },
+  'custom-image-machine-node': {
+    includeTypeList: ['textStyle', 'labelStyle', 'width', 'height', 'outlineStyle'],
+  },
+  'group-node': {
+    excludeTypeList: ['labelValue', 'labelStyle', 'r', 'polygon', 'value', 'textStyle'],
+  },
+};
+
+const UpdatePropertyDrawer: 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,
+        ...nodeData.properties,
+        value: nodeData.text?.value,
+      });
+    }
+  }, [nodeData]);
+
+  const allItems = useMemo(
+    () => ({
+      // 文案相关
+      value: (
+        <ProFormText
+          name="value"
+          width="md"
+          label={formatMessage({ id: 'lib.Flow.modal.text.title', defaultMessage: '文案' })}
+        />
+      ),
+      textStyle: (
+        <>
+          <ProFormDigit
+            name={['textStyle', 'fontSize']}
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.text.style.fontSize', defaultMessage: '字体大小' })}
+          />
+          <Form.Item
+            name={['textStyle', 'color']}
+            label={formatMessage({ id: 'lib.Flow.modal.text.style.color', defaultMessage: '文案颜色' })}
+          >
+            <MyColorPicker
+              disabled={props.readonly}
+              onChange={(value) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldValue(['textStyle', 'color'], value?.toHexString());
+              }}
+            />
+          </Form.Item>
+        </>
+      ),
+      labelValue: (
+        <ProFormText
+          name="labelValue"
+          width="md"
+          label={formatMessage({ id: 'lib.Flow.modal.label.title', defaultMessage: '标签文案' })}
+        />
+      ),
+      labelStyle: (
+        <>
+          <ProFormDigit
+            name={['labelStyle', 'fontSize']}
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.label.style.fontSize', defaultMessage: '标签字体大小' })}
+          />
+          <Form.Item
+            name={['labelStyle', 'color']}
+            label={formatMessage({ id: 'lib.Flow.modal.label.style.color', defaultMessage: '标签文案颜色' })}
+          >
+            <MyColorPicker
+              disabled={props.readonly}
+              onChange={(value) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldValue(['labelStyle', 'color'], value?.toHexString());
+              }}
+            />
+          </Form.Item>
+        </>
+      ),
+      // 半径
+      r: (
+        <ProFormDigit
+          name="r"
+          width="md"
+          min={0.01}
+          label={formatMessage({ id: 'lib.Flow.modal.node.r', defaultMessage: '半径' })}
+        />
+      ),
+      // 矩形相关
+      width: (
+        <ProFormDigit
+          name="width"
+          width="md"
+          min={0.01}
+          label={formatMessage({ id: 'lib.Flow.modal.node.width', defaultMessage: '宽度' })}
+        />
+      ),
+      height: (
+        <ProFormDigit
+          name="height"
+          width="md"
+          min={0.01}
+          label={formatMessage({ id: 'lib.Flow.modal.node.height', defaultMessage: '高度' })}
+        />
+      ),
+      radius: (
+        <ProFormDigit
+          name="radius"
+          width="md"
+          min={1}
+          label={formatMessage({ id: 'lib.Flow.modal.node.radius', defaultMessage: '圆角' })}
+        />
+      ),
+      // 多边形相关
+      polygon: (
+        <ProFormList
+          name="points"
+          label={formatMessage({ id: 'lib.Flow.modal.node.points', defaultMessage: '多边形的顶点' })}
+          min={3}
+        >
+          <ProFormGroup key="group">
+            <ProFormDigit
+              name={[0]}
+              width={150}
+              label={'x' + formatMessage({ id: 'lib.Flow.modal.node.axis', defaultMessage: '轴' })}
+            />
+            <ProFormDigit
+              name={[1]}
+              width={150}
+              label={'y' + formatMessage({ id: 'lib.Flow.modal.node.axis', defaultMessage: '轴' })}
+            />
+          </ProFormGroup>
+        </ProFormList>
+      ),
+      // 节点样式
+      nodeStyle: (
+        <>
+          <Form.Item
+            name="fill"
+            label={formatMessage({ id: 'lib.Flow.modal.node.fill', defaultMessage: '填充颜色' })}
+          >
+            <MyColorPicker
+              disabled={props.readonly}
+              onChange={(value) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldValue('fill', value?.toHexString());
+              }}
+            />
+          </Form.Item>
+
+          {/* 边框 */}
+          <ProFormDigit
+            name="strokeWidth"
+            min={1}
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.node.strokeWidth', defaultMessage: '边框粗细' })}
+          />
+          <Form.Item
+            name="stroke"
+            label={formatMessage({ id: 'lib.Flow.modal.node.stroke', defaultMessage: '边框颜色' })}
+          >
+            <MyColorPicker
+              disabled={props.readonly}
+              onChange={(value) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldValue('stroke', value?.toHexString());
+              }}
+            />
+          </Form.Item>
+        </>
+      ),
+      // 选框样式
+      outlineStyle: (
+        <>
+          <ProFormDigit
+            name={['outlineStyle', 'strokeWidth']}
+            min={1}
+            width="md"
+            label={formatMessage({
+              id: 'lib.Flow.modal.node.outlineStyle.strokeWidth',
+              defaultMessage: '选框粗细',
+            })}
+          />
+          <Form.Item
+            name={['outlineStyle', 'stroke']}
+            label={formatMessage({ id: 'lib.Flow.modal.node.outlineStyle.stroke', defaultMessage: '选框颜色' })}
+          >
+            <MyColorPicker
+              disabled={props.readonly}
+              onChange={(value) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldValue(['outlineStyle', 'stroke'], value?.toHexString());
+              }}
+            />
+          </Form.Item>
+          <ProFormDigit
+            name={['outlineStyle', 'hover', 'strokeWidth']}
+            min={1}
+            width="md"
+            label={formatMessage({
+              id: 'lib.Flow.modal.node.outlineStyle.hover.strokeWidth',
+              defaultMessage: '悬浮时选框粗细',
+            })}
+          />
+          <Form.Item
+            name={['outlineStyle', 'hover', 'stroke']}
+            label={formatMessage({
+              id: 'lib.Flow.modal.node.outlineStyle.hover.stroke',
+              defaultMessage: '悬浮时选框颜色',
+            })}
+          >
+            <MyColorPicker
+              disabled={props.readonly}
+              onChange={(value) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldValue(['outlineStyle', 'hover', 'stroke'], value?.toHexString());
+              }}
+            />
+          </Form.Item>
+        </>
+      ),
+    }),
+    [form, props],
+  );
+
+  const getItemsRender = ({ includeTypeList = [], excludeTypeList = [] }) => {
+    if (includeTypeList?.length) {
+      return includeTypeList.map((key) => {
+        if (allItems[key]) {
+          return <Fragment key={key}>{allItems[key]}</Fragment>;
+        }
+        return <Fragment key={key}></Fragment>;
+      });
+    }
+
+    if (excludeTypeList?.length) {
+      return Object.entries(allItems).map(([key, item]) => {
+        // @ts-ignore
+        if (!excludeTypeList.includes(key)) {
+          return <Fragment key={key}>{item}</Fragment>;
+        }
+        return <Fragment key={key}></Fragment>;
+      });
+    }
+
+    return Object.entries(allItems).map(([key, item]) => {
+      if (!['r', 'polygon'].includes(key)) {
+        return <Fragment key={key}>{item}</Fragment>;
+      }
+      return <Fragment key={key}></Fragment>;
+    });
+  };
+
+  return (
+    <DrawerForm
+      {...reset}
+      title={formatMessage({ id: 'lib.Flow.modal.node.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.node.type', defaultMessage: '节点类型' })}
+        disabled
+      />
+      {/* 文本 */}
+      {getItemsRender({
+        includeTypeList:
+          showItemMap[nodeData?.type || '']?.includeTypeList ||
+          (showItemMap[properties.modelType]?.includeTypeList as any),
+        excludeTypeList:
+          showItemMap[nodeData?.type || '']?.includeTypeList ||
+          (showItemMap[properties.modelType]?.excludeTypeList as any),
+      })}
+    </DrawerForm>
+  );
+};
+
+export default UpdatePropertyDrawer;

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

@@ -0,0 +1,236 @@
+import { DrawerForm, DrawerFormProps, ProFormSwitch } from '@ant-design/pro-components';
+import { IEditConfigType } from '@logicflow/core';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+interface IProps extends DrawerFormProps {
+  settingsData: IEditConfigType | undefined;
+}
+
+const UpdateSettingsDrawer: React.FC<IProps> = (props) => {
+  const { settingsData, ...reset } = props;
+
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm<any>();
+  const [isSilentMode, setIsSilentMode] = useState<boolean>(settingsData?.isSilentMode ?? false);
+  const [textEdit, setTextEdit] = useState<boolean>(settingsData?.textEdit ?? true);
+
+  useEffect(() => {
+    if (settingsData) {
+      form.setFieldsValue({ ...settingsData });
+      setTextEdit(settingsData?.textEdit ?? true);
+      setIsSilentMode(settingsData?.isSilentMode ?? false);
+    }
+  }, [settingsData]);
+
+  return (
+    <DrawerForm
+      {...reset}
+      title={formatMessage({ id: 'lib.Flow.modal.graph.title', defaultMessage: '画布设置面板' })}
+      resize={{
+        onResize() {},
+        maxWidth: window.innerWidth * 0.8,
+        minWidth: 400,
+      }}
+      form={form}
+      autoFocusFirstInput
+      drawerProps={{
+        destroyOnClose: true,
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        return await props.onFinish?.(values);
+      }}
+    >
+      {/* 箭头 */}
+      <ProFormSwitch
+        name="isSilentMode"
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.graph.disableEdit', defaultMessage: '禁用编辑' })}
+        fieldProps={{
+          onChange: (bol) => {
+            setIsSilentMode(bol);
+          },
+        }}
+      />
+
+      {!isSilentMode ? (
+        <>
+          <ProFormSwitch
+            name="stopScrollGraph"
+            width="md"
+            label={formatMessage({
+              id: 'lib.Flow.modal.graph.stopScrollGraph',
+              defaultMessage: '禁止鼠标滚动移动画布',
+            })}
+          />
+          <ProFormSwitch
+            name="stopZoomGraph"
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.graph.stopZoomGraph', defaultMessage: '禁止缩放画布' })}
+          />
+          <ProFormSwitch
+            name="stopMoveGraph"
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.graph.stopMoveGraph', defaultMessage: '禁止拖动画布' })}
+          />
+        </>
+      ) : null}
+
+      <ProFormSwitch
+        name="animation"
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.graph.openAnimation', defaultMessage: '开启动画功能' })}
+      />
+      <ProFormSwitch
+        name="history"
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.graph.openHistory', defaultMessage: '开启历史记录' })}
+        tooltip={formatMessage({
+          id: 'lib.Flow.modal.graph.openHistoryTips',
+          defaultMessage: '关闭后无法进行上一步或下一步的按钮操作。',
+        })}
+      />
+      <ProFormSwitch
+        name="snapline"
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.graph.snapline', defaultMessage: '启用节点辅助对齐线' })}
+      />
+      <ProFormSwitch
+        name="guards"
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.graph.guards', defaultMessage: '增加守卫函数' })}
+        tooltip={formatMessage({
+          id: 'lib.Flow.modal.graph.guardsTips',
+          defaultMessage: '支持两个函数 beforeClone、beforeDelete，函数返回 true 则执行默认逻辑，返回 false 则阻止。',
+        })}
+      />
+      {!isSilentMode ? (
+        <>
+          <ProFormSwitch
+            name="adjustEdge"
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.graph.adjustEdge', defaultMessage: '允许调整边' })}
+          />
+          <ProFormSwitch
+            name="adjustEdgeStartAndEnd"
+            width="md"
+            label={formatMessage({
+              id: 'lib.Flow.modal.graph.adjustEdgeStartAndEnd',
+              defaultMessage: '允许拖动边的端点来调整连线',
+            })}
+          />
+          <ProFormSwitch
+            name="adjustNodePosition"
+            width="md"
+            label={formatMessage({
+              id: 'lib.Flow.modal.graph.adjustNodePosition',
+              defaultMessage: '允许拖动节点',
+            })}
+          />
+          <ProFormSwitch
+            name="hideAnchors"
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.graph.hideAnchors', defaultMessage: '隐藏节点的锚点' })}
+          />
+        </>
+      ) : null}
+
+      <ProFormSwitch
+        name="outline"
+        width="md"
+        label={formatMessage({
+          id: 'lib.Flow.modal.graph.outline',
+          defaultMessage: '节点选择状态下外侧的选框展示',
+        })}
+      />
+      <ProFormSwitch
+        name="hoverOutline"
+        width="md"
+        label={formatMessage({
+          id: 'lib.Flow.modal.graph.hoverOutline',
+          defaultMessage: '鼠标悬浮时显示节点的外框',
+        })}
+      />
+      {!isSilentMode ? (
+        <ProFormSwitch
+          name="nodeSelectedOutline"
+          width="md"
+          label={formatMessage({
+            id: 'lib.Flow.modal.graph.nodeSelectedOutline',
+            defaultMessage: '节点被选中时显示节点的外框',
+          })}
+        />
+      ) : null}
+
+      <ProFormSwitch
+        name="edgeSelectedOutline"
+        width="md"
+        label={formatMessage({
+          id: 'lib.Flow.modal.graph.edgeSelectedOutline',
+          defaultMessage: '边被选中时显示边的外框',
+        })}
+      />
+      {!isSilentMode ? (
+        <>
+          <ProFormSwitch
+            name="nodeSelectedOutline"
+            width="md"
+            label={formatMessage({
+              id: 'lib.Flow.modal.graph.nodeSelectedOutline',
+              defaultMessage: '节点被选中时显示节点的外框',
+            })}
+          />
+          <ProFormSwitch
+            name="textEdit"
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.graph.textEdit', defaultMessage: '允许文本编辑' })}
+            fieldProps={{
+              onChange: (bol) => {
+                setTextEdit(bol);
+              },
+            }}
+          />
+        </>
+      ) : null}
+
+      {textEdit && !isSilentMode ? (
+        <>
+          <ProFormSwitch
+            name="nodeTextEdit"
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.graph.nodeTextEdit', defaultMessage: '允许节点文本编辑' })}
+          />
+          <ProFormSwitch
+            name="edgeTextEdit"
+            width="md"
+            label={formatMessage({ id: 'lib.Flow.modal.graph.edgeTextEdit', defaultMessage: '允许边文本编辑' })}
+          />
+        </>
+      ) : null}
+      {!isSilentMode ? (
+        <>
+          <ProFormSwitch
+            name="nodeTextDraggable"
+            width="md"
+            label={formatMessage({
+              id: 'lib.Flow.modal.graph.nodeTextDraggable',
+              defaultMessage: '允许节点文本可以拖拽',
+            })}
+          />
+          <ProFormSwitch
+            name="edgeTextDraggable"
+            width="md"
+            label={formatMessage({
+              id: 'lib.Flow.modal.graph.edgeTextDraggable',
+              defaultMessage: '允许边文本可以拖拽',
+            })}
+          />
+        </>
+      ) : null}
+    </DrawerForm>
+  );
+};
+
+export default React.memo(UpdateSettingsDrawer);

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/types.ts

@@ -0,0 +1,13 @@
+export type HtmlNodeConfig = {
+  type: string,
+  label: string,
+  url?: string;
+  icon: React.ReactNode;
+  style: {
+    width: string,
+    height: string,
+    borderRadius?: string,
+    border: string,
+    transform?: string,
+  }
+}

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlowNode/CustomGroupNode.tsx

@@ -0,0 +1,72 @@
+import LogicFlow, { GraphModel } from '@logicflow/core';
+import { DynamicGroupNode, DynamicGroupNodeModel } from '@logicflow/extension';
+
+// 自定义分组节点（需要使用分组插件）
+class CustomGroupNodeModel extends DynamicGroupNodeModel {
+  constructor(data: LogicFlow.NodeData, graphModel: GraphModel) {
+    super(data, graphModel);
+    this.text.editable = false;
+    this.text.value = '';
+
+    const rules = {};
+
+    this.properties = {
+      ...this.getNodeStyle(),
+      rules,
+      modelType: 'group-node',
+      width: this.width,
+      height: this.height,
+      textStyle: { ...this.getTextStyle() },
+      outlineStyle: { ...this.getOutlineStyle() },
+      ...this.properties,
+    };
+  }
+
+  setAttributes() {
+    const style = super.getNodeStyle();
+    const {
+      fill = style.fill,
+      stroke = style.stroke,
+      strokeWidth = style.strokeWidth,
+      radius = style.radius,
+      width = this.width,
+      height = this.height,
+    } = this.properties as any;
+
+    this.radius = radius;
+    this.width = width;
+    this.height = height;
+    this.style.fill = fill;
+    this.style.stroke = stroke;
+    this.style.strokeWidth = strokeWidth;
+  }
+
+  //  自定义节点样式
+  getNodeStyle() {
+    const style = super.getNodeStyle();
+    const { stroke = style.stroke } = this.properties;
+    style.stroke = stroke as string;
+    return style;
+  }
+
+  // 自定义节点轮廓框的样式属性
+  getOutlineStyle() {
+    const { stroke = '#949494', strokeWidth = 1, hover } = this.properties?.outlineStyle || ({} as any);
+    const style = super.getOutlineStyle();
+    const newStyle = Object.assign({}, style, {
+      stroke,
+      strokeWidth,
+      hover: {
+        strokeWidth: hover?.strokeWidth || 1,
+        stroke: hover?.stroke || '#949494',
+      },
+    });
+    return newStyle;
+  }
+}
+
+export default {
+  type: 'custom-group-node',
+  view: DynamicGroupNode,
+  model: CustomGroupNodeModel,
+};