@coding-flow/flow-design 0.0.1

package/dist/components/design-editor/typings/index.d.ts

@@ -0,0 +1 @@
+export * from './node';

package/dist/components/design-editor/typings/index.js

@@ -0,0 +1 @@
+export * from "./node.js";

package/dist/components/design-editor/typings/node.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { FixedLayoutPluginContext, FlowNodeEntity, FlowNodeJSON as FlowNodeJSONDefault, FlowNodeMeta as FlowNodeMetaDefault, FlowNodeRegistry as FlowNodeRegistryDefault } from '@flowgram.ai/fixed-layout-editor';
+export interface FlowNodeJSON extends FlowNodeJSONDefault {
+    data: {
+        title?: string;
+        actions?: any[];
+        order?: number | string;
+        [key: string]: any;
+    };
+}
+export interface FlowNodeMeta extends FlowNodeMetaDefault {
+    sidebarDisable?: boolean;
+    style?: React.CSSProperties;
+    editTitleDisable?: boolean;
+}
+export interface FlowNodeRegistry extends FlowNodeRegistryDefault {
+    meta?: FlowNodeMeta;
+    info: {
+        icon: string;
+        description: string;
+    };
+    canAdd?: (ctx: FixedLayoutPluginContext, from: FlowNodeEntity) => boolean;
+    canDelete?: (ctx: FixedLayoutPluginContext, from: FlowNodeEntity) => boolean;
+    onAdd?: (ctx: FixedLayoutPluginContext, from: FlowNodeEntity) => FlowNodeJSON;
+}
+export type FlowDocumentJSON = {
+    nodes: FlowNodeJSON[];
+};

package/dist/components/design-editor/typings/node.js

@@ -0,0 +1 @@
+import "react";

package/dist/components/design-editor/version/components/version-content.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { WorkflowVersion } from "../types";
+import { VersionPresenter } from "../presenter";
+interface VersionContentProps {
+    versions: WorkflowVersion[];
+    presenter: VersionPresenter;
+}
+export declare const VersionContent: React.FC<VersionContentProps>;
+export {};

package/dist/components/design-editor/version/components/version-content.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { VersionItem } from "./version-item.js";
+const VersionContent = (props)=>/*#__PURE__*/ jsx("div", {
+        style: {
+            padding: "10px"
+        },
+        children: props.versions.map((version)=>/*#__PURE__*/ jsx(VersionItem, {
+                version: version,
+                onUpdateVersionName: async (id, name)=>{
+                    await props.presenter.updateVersionName(id, name);
+                },
+                onVersionChange: async (versionId)=>{
+                    await props.presenter.changeVersion(versionId);
+                },
+                onVersionRemove: async (versionId)=>{
+                    await props.presenter.deleteVersion(versionId);
+                }
+            }))
+    });
+export { VersionContent };

package/dist/components/design-editor/version/components/version-item.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { WorkflowVersion } from "../types";
+interface VersionItemProps {
+    version: WorkflowVersion;
+    onUpdateVersionName: (id: number, name: string) => Promise<void>;
+    onVersionChange: (id: number) => Promise<void>;
+    onVersionRemove: (id: number) => Promise<void>;
+}
+export declare const VersionItem: React.FC<VersionItemProps>;
+export {};

package/dist/components/design-editor/version/components/version-item.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Badge, Input, Popconfirm, Space, Typography, message } from "antd";
+import dayjs from "dayjs";
+import { useDesignContext } from "../../../design-panel/hooks/use-design-context.js";
+const { Text } = Typography;
+const VersionItem = (props)=>{
+    const { version } = props;
+    const [editeVisible, setEditeVisible] = react.useState(false);
+    const versionName = version.versionName;
+    const versionDate = dayjs(version.updatedTime).format('YYYY-MM-DD HH:mm:ss');
+    const [title, setTitle] = react.useState(versionName);
+    const { context } = useDesignContext();
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            padding: 3,
+            borderBottom: "1px solid #808080"
+        },
+        children: /*#__PURE__*/ jsxs(Space, {
+            children: [
+                editeVisible && /*#__PURE__*/ jsxs(Space, {
+                    children: [
+                        /*#__PURE__*/ jsx(Input, {
+                            value: title,
+                            onChange: (e)=>{
+                                setTitle(e.target.value);
+                            },
+                            placeholder: "请输入版本名称"
+                        }),
+                        /*#__PURE__*/ jsx("a", {
+                            onClick: ()=>{
+                                props.onUpdateVersionName(version.id, title).then(()=>{
+                                    setEditeVisible(false);
+                                    message.success('保存成功');
+                                });
+                            },
+                            children: "确定"
+                        }),
+                        /*#__PURE__*/ jsx("a", {
+                            onClick: ()=>{
+                                setEditeVisible(false);
+                            },
+                            children: "取消"
+                        })
+                    ]
+                }),
+                !editeVisible && /*#__PURE__*/ jsxs(Space, {
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            style: {
+                                marginRight: 30,
+                                width: 150
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx(Badge, {
+                                    count: version.current ? "当前" : void 0,
+                                    offset: [
+                                        20,
+                                        5
+                                    ],
+                                    style: {
+                                        fontSize: 10
+                                    },
+                                    size: "small",
+                                    color: 'green',
+                                    children: /*#__PURE__*/ jsxs(Text, {
+                                        children: [
+                                            "版本名称：",
+                                            versionName
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    style: {
+                                        fontSize: 12,
+                                        color: "gray"
+                                    },
+                                    children: versionDate
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("a", {
+                            onClick: ()=>{
+                                setTitle(versionName);
+                                setEditeVisible(true);
+                            },
+                            children: "编辑"
+                        }),
+                        !version.current && /*#__PURE__*/ jsx(Popconfirm, {
+                            title: "确认要删除到该版本吗？",
+                            onConfirm: async ()=>{
+                                props.onVersionRemove(version.id).then(()=>{
+                                    message.success("版本已删除");
+                                });
+                            },
+                            children: /*#__PURE__*/ jsx("a", {
+                                children: "删除"
+                            })
+                        }),
+                        !version.current && /*#__PURE__*/ jsx(Popconfirm, {
+                            title: "确认要切换到该版本吗？",
+                            onConfirm: async ()=>{
+                                props.onVersionChange(version.id).then(()=>{
+                                    context.initState();
+                                });
+                            },
+                            children: /*#__PURE__*/ jsx("a", {
+                                children: "切换"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { VersionItem };

package/dist/components/design-editor/version/edtior-version.d.ts

@@ -0,0 +1 @@
+export declare const EditorVersion: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/version/edtior-version.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { VersionContainer, VersionSection } from "../styles.js";
+import { Button, Popover } from "antd";
+import { HistoryOutlined } from "@ant-design/icons";
+import { useVersionPresenter } from "./hooks/use-version-presenter.js";
+import { VersionContent } from "./components/version-content.js";
+import { EventBus } from "@coding-flow/flow-core";
+const EditorVersion = ()=>{
+    const { state, presenter } = useVersionPresenter();
+    react.useEffect(()=>{
+        EventBus.getInstance().on('VersionChangeEvent', ()=>{
+            presenter.initState();
+        });
+        return ()=>{
+            EventBus.getInstance().off('VersionChangeEvent');
+        };
+    }, []);
+    return /*#__PURE__*/ jsx(VersionContainer, {
+        children: /*#__PURE__*/ jsx(VersionSection, {
+            children: /*#__PURE__*/ jsx(Popover, {
+                content: /*#__PURE__*/ jsx(VersionContent, {
+                    versions: state,
+                    presenter: presenter
+                }),
+                trigger: "click",
+                placement: "bottom",
+                children: /*#__PURE__*/ jsxs(Button, {
+                    type: "text",
+                    icon: /*#__PURE__*/ jsx(HistoryOutlined, {}),
+                    children: [
+                        "版本共",
+                        state.length,
+                        "条"
+                    ]
+                })
+            })
+        })
+    });
+};
+export { EditorVersion };

package/dist/components/design-editor/version/hooks/use-version-presenter.d.ts

@@ -0,0 +1,5 @@
+import { VersionPresenter } from "../presenter";
+export declare const useVersionPresenter: () => {
+    state: any[];
+    presenter: VersionPresenter;
+};

package/dist/components/design-editor/version/hooks/use-version-presenter.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { VersionPresenter } from "../presenter.js";
+import { VersionApiImpl } from "../model.js";
+import { useDesignContext } from "../../../design-panel/hooks/use-design-context.js";
+const useVersionPresenter = ()=>{
+    const { state } = useDesignContext();
+    const workId = state.workflow.id;
+    const ref = react.useRef(void 0);
+    const [versions, setVersions] = react.useState([]);
+    if (!ref.current) ref.current = new VersionPresenter(workId, versions, setVersions, new VersionApiImpl());
+    react.useEffect(()=>{
+        ref.current?.syncState(versions);
+    }, [
+        versions
+    ]);
+    react.useEffect(()=>{
+        ref.current?.initState();
+    }, []);
+    return {
+        state: versions,
+        presenter: ref.current
+    };
+};
+export { useVersionPresenter };

package/dist/components/design-editor/version/index.d.ts

@@ -0,0 +1 @@
+export * from "./edtior-version";

package/dist/components/design-editor/version/index.js

@@ -0,0 +1 @@
+export * from "./edtior-version.js";

package/dist/components/design-editor/version/model.d.ts

@@ -0,0 +1,7 @@
+import { VersionApi, WorkflowVersion } from "./types";
+export declare class VersionApiImpl implements VersionApi {
+    loadVersions: (workId: string) => Promise<WorkflowVersion[]>;
+    updateVersionName: (id: number, versionName: string) => Promise<void>;
+    changeVersion: (id: number) => Promise<void>;
+    deleteVersion: (id: number) => Promise<void>;
+}

package/dist/components/design-editor/version/model.js

@@ -0,0 +1,21 @@
+import { changeVersion, deleteVersion, updateVersionName, versions } from "../../../api/workflow.js";
+class VersionApiImpl {
+    loadVersions = async (workId)=>{
+        const result = await versions(workId);
+        if (result.success) return result.data.list;
+        return [];
+    };
+    updateVersionName = async (id, versionName)=>{
+        await updateVersionName({
+            id,
+            versionName
+        });
+    };
+    changeVersion = async (id)=>{
+        await changeVersion(id);
+    };
+    deleteVersion = async (id)=>{
+        await deleteVersion(id);
+    };
+}
+export { VersionApiImpl };

package/dist/components/design-editor/version/presenter.d.ts

@@ -0,0 +1,14 @@
+import { VersionApi, WorkflowVersion } from "./types";
+import { Dispatch } from "@coding-flow/flow-core";
+export declare class VersionPresenter {
+    private readonly workId;
+    private versions;
+    private readonly dispatch;
+    private readonly api;
+    constructor(workId: string, versions: WorkflowVersion[], dispatch: Dispatch<WorkflowVersion[]>, api: VersionApi);
+    syncState(versions: WorkflowVersion[]): void;
+    initState(): Promise<void>;
+    updateVersionName(id: number, name: string): Promise<void>;
+    changeVersion(id: number): Promise<void>;
+    deleteVersion(id: number): Promise<void>;
+}

package/dist/components/design-editor/version/presenter.js

@@ -0,0 +1,33 @@
+class VersionPresenter {
+    workId;
+    versions;
+    dispatch;
+    api;
+    constructor(workId, versions, dispatch, api){
+        this.workId = workId;
+        this.versions = versions;
+        this.dispatch = dispatch;
+        this.api = api;
+    }
+    syncState(versions) {
+        this.versions = versions;
+    }
+    async initState() {
+        const versions = await this.api.loadVersions(this.workId);
+        this.versions = versions;
+        this.dispatch(versions);
+    }
+    async updateVersionName(id, name) {
+        await this.api.updateVersionName(id, name);
+        await this.initState();
+    }
+    async changeVersion(id) {
+        await this.api.changeVersion(id);
+        await this.initState();
+    }
+    async deleteVersion(id) {
+        await this.api.deleteVersion(id);
+        await this.initState();
+    }
+}
+export { VersionPresenter };

package/dist/components/design-editor/version/types.d.ts

@@ -0,0 +1,12 @@
+export interface WorkflowVersion {
+    id: number;
+    versionName: string;
+    current: boolean;
+    updatedTime: number;
+}
+export interface VersionApi {
+    loadVersions(workId: string): Promise<WorkflowVersion[]>;
+    updateVersionName(id: number, versionName: string): Promise<void>;
+    changeVersion(id: number): Promise<void>;
+    deleteVersion(id: number): Promise<void>;
+}

package/dist/components/design-import/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface DesignImportProps {
+    open: boolean;
+    onClose: () => void;
+}
+export declare const DesignImport: React.FC<DesignImportProps>;
+export {};

package/dist/components/design-import/index.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { Form, Modal, message } from "antd";
+import "react";
+import { Upload } from "./upload.js";
+import { importWorkflow } from "../../api/workflow.js";
+const DesignImport = (props)=>{
+    const [form] = Form.useForm();
+    return /*#__PURE__*/ jsx(Modal, {
+        title: "流程导入",
+        open: props.open,
+        onCancel: props.onClose,
+        destroyOnHidden: true,
+        onOk: ()=>{
+            form.submit();
+        },
+        children: /*#__PURE__*/ jsx(Form, {
+            form: form,
+            layout: "vertical",
+            onFinish: (values)=>{
+                importWorkflow(values).then((res)=>{
+                    if (res.success) {
+                        message.success("流程已导入成功");
+                        props.onClose();
+                    }
+                });
+            },
+            children: /*#__PURE__*/ jsx(Form.Item, {
+                name: "file",
+                label: "流程设计文件",
+                help: "请选择导出的设计文件，文件格式为json格式",
+                children: /*#__PURE__*/ jsx(Upload, {})
+            })
+        })
+    });
+};
+export { DesignImport };

package/dist/components/design-import/upload.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface UploadProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const Upload: React.FC<UploadProps>;
+export {};

package/dist/components/design-import/upload.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Button, Upload } from "antd";
+const fileToBase64 = (file)=>new Promise((resolve, reject)=>{
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = ()=>resolve(reader.result);
+        reader.onerror = (error)=>reject(error);
+    });
+const upload_Upload = (props)=>/*#__PURE__*/ jsx(Upload, {
+        maxCount: 1,
+        accept: ".json,application/json",
+        customRequest: async ({ file, onSuccess })=>{
+            const currentFile = file;
+            const base64 = await fileToBase64(currentFile);
+            props.onChange?.(base64);
+            currentFile.name;
+            const url = URL.createObjectURL(currentFile);
+            onSuccess({
+                url: url,
+                id: Math.random(),
+                name: currentFile.name
+            });
+        },
+        children: /*#__PURE__*/ jsx(Button, {
+            children: "选择文件"
+        })
+    });
+export { upload_Upload as Upload };

package/dist/components/design-panel/context/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { DesignPanelProps, State } from "../types";
+import { Presenter } from "../presenters";
+export declare class DesignPanelContextScope {
+    private readonly presenter;
+    private readonly props;
+    constructor(presenter: Presenter, props: DesignPanelProps);
+    close(): void;
+    save(versionName?: string): Promise<void>;
+    syncState(state: State): void;
+    initState(): void;
+    getPresenter(): Presenter;
+}
+export declare const DesignPanelContext: React.Context<DesignPanelContextScope | undefined>;

package/dist/components/design-panel/context/index.js

@@ -0,0 +1,28 @@
+import react from "react";
+class DesignPanelContextScope {
+    presenter;
+    props;
+    constructor(presenter, props){
+        this.presenter = presenter;
+        this.props = props;
+    }
+    close() {
+        this.presenter.initState();
+        this.props.onClose?.();
+    }
+    async save(versionName) {
+        await this.presenter.save(versionName);
+    }
+    syncState(state) {
+        this.presenter.syncState(state);
+    }
+    initState() {
+        if (this.props.id) this.presenter.loadDesign(this.props.id);
+        else this.presenter.createDesign();
+    }
+    getPresenter() {
+        return this.presenter;
+    }
+}
+const DesignPanelContext = /*#__PURE__*/ react.createContext(void 0);
+export { DesignPanelContext, DesignPanelContextScope };

package/dist/components/design-panel/hooks/use-design-context.d.ts

@@ -0,0 +1,10 @@
+import { DesignPanelContextScope } from "../context";
+import { DesignPanelProps } from "../types";
+export declare const useDesignContext: () => {
+    state: import("../types").State;
+    context: DesignPanelContextScope;
+};
+export declare const createDesignContext: (props: DesignPanelProps) => {
+    state: import("../types").State;
+    context: DesignPanelContextScope;
+};

package/dist/components/design-panel/hooks/use-design-context.js

@@ -0,0 +1,38 @@
+import react from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { DesignPanelContext, DesignPanelContextScope } from "../context/index.js";
+import { updateState } from "../store.js";
+import { Presenter } from "../presenters/index.js";
+import { DesignPanelApiImpl } from "../model.js";
+const useDesignContext = ()=>{
+    const context = react.useContext(DesignPanelContext);
+    const state = useSelector((state)=>state.design);
+    if (!context) throw new Error("DesignPanelContext must be used within useContext");
+    return {
+        state,
+        context
+    };
+};
+const createDesignContext = (props)=>{
+    const ref = react.useRef(void 0);
+    const dispatch = useDispatch();
+    const state = useSelector((state)=>state.design);
+    if (!ref.current) {
+        const presenter = new Presenter(state, (prevState)=>{
+            dispatch(updateState(prevState));
+            return prevState;
+        }, new DesignPanelApiImpl());
+        ref.current = new DesignPanelContextScope(presenter, props);
+        ref.current.initState();
+    }
+    react.useEffect(()=>{
+        ref.current?.syncState(state);
+    }, [
+        state
+    ]);
+    return {
+        state,
+        context: ref.current
+    };
+};
+export { createDesignContext, useDesignContext };

package/dist/components/design-panel/hooks/use-node-router-manager.d.ts

@@ -0,0 +1,2 @@
+import { NodeRouterManager } from "../manager/node";
+export declare const useNodeRouterManager: () => NodeRouterManager;

package/dist/components/design-panel/hooks/use-node-router-manager.js

@@ -0,0 +1,8 @@
+import { useDesignContext } from "./use-design-context.js";
+import { NodeRouterManager } from "../manager/node.js";
+const useNodeRouterManager = ()=>{
+    const { state } = useDesignContext();
+    const nodes = state.workflow.nodes || [];
+    return new NodeRouterManager(nodes);
+};
+export { useNodeRouterManager };

package/dist/components/design-panel/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DesignPanelProps } from "./types";
+export declare const DesignPanel: React.FC<DesignPanelProps>;

package/dist/components/design-panel/index.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Drawer } from "@coding-flow/flow-pc-ui";
+import { DesignPanelLayout } from "./layout/index.js";
+const DesignPanel = (props)=>/*#__PURE__*/ jsx(Drawer, {
+        open: props.open,
+        onClose: props.onClose,
+        children: /*#__PURE__*/ jsx(DesignPanelLayout, {
+            ...props
+        })
+    });
+export { DesignPanel };

package/dist/components/design-panel/layout/body.d.ts

@@ -0,0 +1 @@
+export declare const Body: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-panel/layout/body.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { useDesignContext } from "../hooks/use-design-context.js";
+import { TabForm } from "../tabs/form/index.js";
+import { TabSetting } from "../tabs/setting.js";
+import { TabBase } from "../tabs/base/index.js";
+import { TabFlow } from "../tabs/flow.js";
+const Body = ()=>{
+    const { state } = useDesignContext();
+    const tabPanelType = state.view.tabPanel;
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            'form' === tabPanelType && /*#__PURE__*/ jsx(TabForm, {}),
+            'flow' === tabPanelType && /*#__PURE__*/ jsx(TabFlow, {}),
+            'base' === tabPanelType && /*#__PURE__*/ jsx(TabBase, {}),
+            'setting' === tabPanelType && /*#__PURE__*/ jsx(TabSetting, {})
+        ]
+    });
+};
+export { Body };

package/dist/components/design-panel/layout/footer.d.ts

@@ -0,0 +1 @@
+export declare const Footer: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-panel/layout/footer.js

@@ -0,0 +1,4 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import "react";
+const Footer = ()=>/*#__PURE__*/ jsx(Fragment, {});
+export { Footer };

package/dist/components/design-panel/layout/header.d.ts

@@ -0,0 +1 @@
+export declare const Header: () => import("react/jsx-runtime").JSX.Element;