@coding-flow/flow-design 0.0.1

package/dist/components/design-editor/hooks/use-is-sidebar.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { IsSidebarContext } from "../context/index.js";
+function useIsSidebar() {
+    return useContext(IsSidebarContext);
+}
+export { useIsSidebar };

package/dist/components/design-editor/hooks/use-node-form.d.ts

@@ -0,0 +1,6 @@
+export declare function useNodeFormContext(): import("@flowgram.ai/form").FormRenderProps<{
+    [key: string]: any;
+    title?: string;
+    actions?: any[];
+    order?: number | string;
+}>;

package/dist/components/design-editor/hooks/use-node-form.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { NodeFormContext } from "../context/index.js";
+function useNodeFormContext() {
+    return useContext(NodeFormContext);
+}
+export { useNodeFormContext };

package/dist/components/design-editor/hooks/use-node-render-context.d.ts

@@ -0,0 +1 @@
+export declare function useNodeRenderContext(): import("@flowgram.ai/fixed-layout-editor").NodeRenderReturnType;

package/dist/components/design-editor/hooks/use-node-render-context.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { NodeRenderContext } from "../context/index.js";
+function useNodeRenderContext() {
+    return useContext(NodeRenderContext);
+}
+export { useNodeRenderContext };

package/dist/components/design-editor/hooks/use-script-variables.d.ts

@@ -0,0 +1 @@
+export declare const useScriptVariables: () => import("../../../script-components/typings").GroovyVariableMapping[];

package/dist/components/design-editor/hooks/use-script-variables.js

@@ -0,0 +1,10 @@
+import react from "react";
+import { GroovyVariableUtil } from "../../../script-components/utils/varibale.js";
+import { useDesignContext } from "../../design-panel/hooks/use-design-context.js";
+const useScriptVariables = ()=>{
+    const { state } = useDesignContext();
+    return react.useMemo(()=>GroovyVariableUtil.getVariables(state.workflow.form), [
+        state.workflow.form
+    ]);
+};
+export { useScriptVariables };

package/dist/components/design-editor/index.css

@@ -0,0 +1,4 @@
+:root {
+  --g-playground-line: #1890ff !important;
+}
+

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "./index.scss";
+import { FlowDocumentJSON } from "./typings";
+export interface FlowEditorAction {
+    getData(): FlowDocumentJSON;
+    resetData(data: FlowDocumentJSON): void;
+}
+interface FlowEditorProps {
+    actionRef?: React.Ref<FlowEditorAction>;
+    initialData?: FlowDocumentJSON;
+}
+export declare const FlowEditor: React.FC<FlowEditorProps>;
+export {};

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { EditorRenderer, FixedLayoutEditorProvider } from "@flowgram.ai/fixed-layout-editor";
+import { useEditorProps } from "./hooks/use-editor-props.js";
+import { EditorTools } from "./tools/index.js";
+import { initialData as external_initial_data_js_initialData } from "./initial-data.js";
+import { FlowNodeRegistries } from "./nodes/index.js";
+import "./index.css";
+import { EditorVersion } from "./version/index.js";
+const FlowEditor = (props)=>{
+    const ref = react.useRef(null);
+    const initialData = props.initialData || external_initial_data_js_initialData;
+    const editorProps = useEditorProps(initialData, FlowNodeRegistries);
+    react.useImperativeHandle(props.actionRef, ()=>({
+            getData: ()=>{
+                if (ref.current) return ref.current.document.toJSON();
+                return initialData;
+            },
+            resetData: (data)=>{
+                if (ref.current) if (data.nodes && data.nodes.length > 0) ref.current.document.fromJSON(data);
+                else ref.current.document.fromJSON(external_initial_data_js_initialData);
+            }
+        }), [
+        ref
+    ]);
+    return /*#__PURE__*/ jsxs(FixedLayoutEditorProvider, {
+        ref: ref,
+        ...editorProps,
+        children: [
+            /*#__PURE__*/ jsx(EditorRenderer, {}),
+            /*#__PURE__*/ jsx(EditorTools, {}),
+            /*#__PURE__*/ jsx(EditorVersion, {})
+        ]
+    });
+};
+export { FlowEditor };

package/dist/components/design-editor/initial-data.d.ts

@@ -0,0 +1,2 @@
+import { FlowDocumentJSON } from "./typings";
+export declare const initialData: FlowDocumentJSON;

package/dist/components/design-editor/initial-data.js

@@ -0,0 +1,19 @@
+const initialData = {
+    nodes: [
+        {
+            id: 'start',
+            type: 'START',
+            data: {
+                title: '开始节点'
+            }
+        },
+        {
+            id: 'end',
+            type: 'END',
+            data: {
+                title: '结束节点'
+            }
+        }
+    ]
+};
+export { initialData };

package/dist/components/design-editor/node-components/action/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ActionTableProps {
+    value: any[];
+    onChange: (data: any[]) => void;
+}
+export declare const ActionTable: React.FC<ActionTableProps>;
+export {};

package/dist/components/design-editor/node-components/action/index.js

@@ -0,0 +1,121 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Button, Form, Popconfirm, Space, Switch } from "antd";
+import { Table } from "@coding-flow/flow-pc-ui";
+import { useNodeRenderContext } from "../../hooks/use-node-render-context.js";
+import { PlusOutlined } from "@ant-design/icons";
+import { actionOptions } from "@coding-flow/flow-types";
+import { ActionConfigModal } from "../../../../script-components/modal/action-config-modal.js";
+import { FlowActionListPresenter } from "./presenter.js";
+import { SCRIPT_DEFAULT_CUSTOM } from "../../../../script-components/default-script.js";
+const ActionTable = (props)=>{
+    const { node } = useNodeRenderContext();
+    const actions = node.getNodeRegistry()?.meta.actions || [];
+    const presenter = new FlowActionListPresenter(props.value, props.onChange);
+    const datasource = presenter.getDatasource(actions);
+    const [visible, setVisible] = react.useState(false);
+    const [form] = Form.useForm();
+    const columns = react.useCallback(()=>[
+            {
+                title: 'id',
+                dataIndex: 'id',
+                key: 'id',
+                hidden: true
+            },
+            {
+                title: '标题',
+                dataIndex: 'title',
+                key: 'title'
+            },
+            {
+                title: '类型',
+                dataIndex: 'type',
+                key: 'type',
+                render: (value)=>{
+                    const type = actionOptions.find((item)=>item.value === value);
+                    return type?.label;
+                }
+            },
+            {
+                title: '启用',
+                dataIndex: 'enable',
+                key: 'enable',
+                render: (_, record)=>/*#__PURE__*/ jsx(Switch, {
+                        size: "small",
+                        value: record.enable,
+                        onChange: (value)=>{
+                            presenter.enable(record.id, value);
+                        }
+                    })
+            },
+            {
+                title: '操作',
+                dataIndex: 'operation',
+                key: 'operation',
+                render: (_, record)=>{
+                    if (record.enable) return /*#__PURE__*/ jsxs(Space, {
+                        children: [
+                            /*#__PURE__*/ jsx("a", {
+                                onClick: ()=>{
+                                    form.resetFields();
+                                    form.setFieldsValue(record);
+                                    setVisible(true);
+                                },
+                                children: "编辑"
+                            }),
+                            'CUSTOM' === record.type && /*#__PURE__*/ jsx(Popconfirm, {
+                                title: "确认删除吗？",
+                                onConfirm: ()=>{
+                                    presenter.delete(record.id);
+                                },
+                                children: /*#__PURE__*/ jsx("a", {
+                                    children: "删除"
+                                })
+                            })
+                        ]
+                    });
+                }
+            }
+        ], [
+        props.value
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Table, {
+                toolBarRender: ()=>[
+                        /*#__PURE__*/ jsx(Button, {
+                            icon: /*#__PURE__*/ jsx(PlusOutlined, {}),
+                            onClick: ()=>{
+                                form.resetFields();
+                                form.setFieldsValue({
+                                    script: SCRIPT_DEFAULT_CUSTOM,
+                                    type: "CUSTOM"
+                                });
+                                setVisible(true);
+                            },
+                            children: "自定义按钮"
+                        })
+                    ],
+                columns: columns(),
+                dataSource: datasource,
+                style: {
+                    width: "100%"
+                },
+                pagination: false
+            }),
+            /*#__PURE__*/ jsx(ActionConfigModal, {
+                nodeId: node.id,
+                open: visible,
+                manager: presenter.getFlowActionManager(),
+                form: form,
+                onCancel: ()=>{
+                    setVisible(false);
+                },
+                onFinish: (values)=>{
+                    presenter.update(values);
+                }
+            })
+        ]
+    });
+};
+export { ActionTable };

package/dist/components/design-editor/node-components/action/manager.d.ts

@@ -0,0 +1,9 @@
+import { FlowAction } from "@coding-flow/flow-types";
+export declare class FlowActionManager {
+    private readonly data;
+    constructor(data: FlowAction[]);
+    getCurrentNodeActionOptions(): {
+        label: string;
+        value: string;
+    }[];
+}

package/dist/components/design-editor/node-components/action/manager.js

@@ -0,0 +1,18 @@
+import { actionOptions } from "@coding-flow/flow-types";
+class FlowActionManager {
+    data;
+    constructor(data){
+        this.data = data;
+    }
+    getCurrentNodeActionOptions() {
+        const actions = this.data.filter((item)=>"CUSTOM" !== item.type);
+        const options = [];
+        for (const action of actions){
+            const type = action.type;
+            const option = actionOptions.find((item)=>item.value === type);
+            if (option) options.push(option);
+        }
+        return options;
+    }
+}
+export { FlowActionManager };

package/dist/components/design-editor/node-components/action/presenter.d.ts

@@ -0,0 +1,13 @@
+import { ActionType, FlowAction } from "@coding-flow/flow-types";
+import { FlowActionManager } from "./manager";
+export declare class FlowActionListPresenter {
+    private readonly data;
+    private readonly onChange;
+    private readonly manager;
+    constructor(data: FlowAction[], onChange: (data: FlowAction[]) => void);
+    getFlowActionManager(): FlowActionManager;
+    enable(id: any, value: boolean): void;
+    delete(id: string): void;
+    update(action: any): void;
+    getDatasource(actions: ActionType[]): any[];
+}

package/dist/components/design-editor/node-components/action/presenter.js

@@ -0,0 +1,80 @@
+import { actionOptions } from "@coding-flow/flow-types";
+import { nanoid } from "nanoid";
+import { IdUtils } from "../../../../utils/index.js";
+import { FlowActionManager } from "./manager.js";
+class FlowActionListPresenter {
+    data;
+    onChange;
+    manager;
+    constructor(data, onChange){
+        this.onChange = onChange;
+        this.data = data;
+        this.manager = new FlowActionManager(data);
+    }
+    getFlowActionManager() {
+        return this.manager;
+    }
+    enable(id, value) {
+        const data = this.data.map((item)=>{
+            if (item.id === id) return {
+                ...item,
+                enable: value
+            };
+            return item;
+        });
+        this.onChange(data);
+    }
+    delete(id) {
+        const data = this.data.filter((item)=>item.id !== id);
+        this.onChange(data);
+    }
+    update(action) {
+        const actionId = action.id;
+        if (actionId) {
+            const data = this.data.map((item)=>{
+                if (item.id === actionId) return {
+                    ...item,
+                    ...action,
+                    display: {
+                        ...item.display,
+                        ...action.display
+                    }
+                };
+                return item;
+            });
+            this.onChange(data);
+        } else {
+            const custom = {
+                ...action,
+                type: 'CUSTOM',
+                enable: true,
+                id: IdUtils.generateId()
+            };
+            this.onChange([
+                ...this.data,
+                custom
+            ]);
+        }
+    }
+    getDatasource(actions) {
+        if (this.data) return this.data.map((item)=>{
+            const enable = item.enable;
+            return {
+                ...item,
+                enable: void 0 === enable ? true : enable
+            };
+        });
+        const list = actions.map((type)=>{
+            const title = actionOptions.filter((value)=>value.value === type)[0]?.label || '未命名操作';
+            return {
+                id: nanoid(),
+                enable: true,
+                title: title,
+                type: type
+            };
+        });
+        this.onChange(list);
+        return list;
+    }
+}
+export { FlowActionListPresenter };

package/dist/components/design-editor/node-components/condition/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 条件配置
+ * @constructor
+ */
+export declare const ConditionScript: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/node-components/condition/index.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@flowgram.ai/fixed-layout-editor";
+import { Button, Form, Space } from "antd";
+import react from "react";
+import { GroovyScriptPreview } from "../../../../script-components/components/groovy-script-preview.js";
+import { EditOutlined } from "@ant-design/icons";
+import { ConditionConfigModal } from "../../../../script-components/modal/condition-config-modal.js";
+import { useScriptVariables } from "../../hooks/use-script-variables.js";
+const ConditionScript = ()=>{
+    const [form] = Form.useForm();
+    const [visible, setVisible] = react.useState(false);
+    const scriptVariables = useScriptVariables();
+    return /*#__PURE__*/ jsx(Form, {
+        form: form,
+        style: {
+            width: '100%'
+        },
+        layout: "vertical",
+        children: /*#__PURE__*/ jsx(Form.Item, {
+            label: "条件表达式",
+            name: "script",
+            children: /*#__PURE__*/ jsx(Field, {
+                name: "script",
+                render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsxs(Space.Compact, {
+                        style: {
+                            width: '100%'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(GroovyScriptPreview, {
+                                script: value
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                                onClick: ()=>{
+                                    setVisible(true);
+                                },
+                                style: {
+                                    borderRadius: '0 6px 6px 0'
+                                },
+                                children: "编辑"
+                            }),
+                            /*#__PURE__*/ jsx(ConditionConfigModal, {
+                                open: visible,
+                                onCancel: ()=>{
+                                    setVisible(false);
+                                },
+                                onConfirm: (value)=>{
+                                    onChange(value);
+                                },
+                                script: value,
+                                variables: scriptVariables
+                            })
+                        ]
+                    })
+            })
+        })
+    });
+};
+export { ConditionScript };

package/dist/components/design-editor/node-components/header/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface NodeHeaderProps {
+    style?: React.CSSProperties;
+    iconEnable?: boolean;
+}
+export declare const NodeHeader: React.FC<NodeHeaderProps>;
+export {};

package/dist/components/design-editor/node-components/header/index.js

@@ -0,0 +1,127 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { useIsSidebar } from "../../hooks/index.js";
+import { Button, Flex, Input, Space, theme } from "antd";
+import { nodeFormPanelFactory } from "../../components/sidebar/index.js";
+import { usePanelManager } from "@flowgram.ai/panel-manager-plugin";
+import { Field } from "@flowgram.ai/fixed-layout-editor";
+import { CloseOutlined, EditOutlined } from "@ant-design/icons";
+import { NodeIcon } from "../../components/node-icon/index.js";
+import { useNodeRenderContext } from "../../hooks/use-node-render-context.js";
+const HeaderTitle = ({ title, onChange, readonly })=>{
+    const { token } = theme.useToken();
+    const [editTitle, setEditTitle] = useState(false);
+    const isSidebar = useIsSidebar();
+    const { node } = useNodeRenderContext();
+    const registry = node.getNodeRegistry();
+    const editTitleDisabled = useMemo(()=>{
+        const { meta } = registry;
+        return meta?.editTitleDisable ?? false;
+    }, [
+        registry,
+        node
+    ]);
+    const handleChange = useCallback((value)=>{
+        const trimmed = value.trim();
+        if (trimmed) onChange(trimmed);
+    }, [
+        onChange
+    ]);
+    if (readonly || !isSidebar || editTitleDisabled) return /*#__PURE__*/ jsx("span", {
+        children: title
+    });
+    if (editTitle) return /*#__PURE__*/ jsx(Input, {
+        autoFocus: true,
+        size: "small",
+        style: {
+            width: 200
+        },
+        defaultValue: title,
+        onChange: (e)=>{
+            handleChange(e.target.value);
+        },
+        onBlur: ()=>setEditTitle(false),
+        onPressEnter: (e)=>{
+            handleChange(e.target.value);
+            setEditTitle(false);
+        }
+    });
+    return /*#__PURE__*/ jsxs(Space, {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: title
+            }),
+            /*#__PURE__*/ jsx(EditOutlined, {
+                style: {
+                    color: token.colorPrimary,
+                    cursor: "pointer"
+                },
+                onClick: ()=>setEditTitle(true)
+            })
+        ]
+    });
+};
+const NodeHeader = (props)=>{
+    const { node } = useNodeRenderContext();
+    const isSidebar = useIsSidebar();
+    const panelManager = usePanelManager();
+    const { token } = theme.useToken();
+    const iconEnable = props.iconEnable ?? true;
+    const nodeType = node.getNodeRegistry().type;
+    const handleClose = useCallback(()=>{
+        panelManager.close(nodeFormPanelFactory.key);
+    }, [
+        panelManager
+    ]);
+    const headerStyle = {
+        width: "100%",
+        padding: isSidebar ? "4px 5px" : "5px",
+        borderBottom: "1px solid #f0f0f0",
+        marginBottom: 8,
+        position: "relative",
+        ...props.style
+    };
+    return /*#__PURE__*/ jsxs(Flex, {
+        style: headerStyle,
+        justify: "space-between",
+        align: "center",
+        children: [
+            /*#__PURE__*/ jsxs(Space, {
+                children: [
+                    iconEnable && /*#__PURE__*/ jsx(NodeIcon, {
+                        type: nodeType
+                    }),
+                    /*#__PURE__*/ jsx(Field, {
+                        name: "title",
+                        children: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(HeaderTitle, {
+                                title: value,
+                                onChange: onChange
+                            })
+                    }),
+                    !isSidebar && /*#__PURE__*/ jsx(Field, {
+                        name: "order",
+                        children: ({ field: { value, onChange } })=>{
+                            if ('INCLUSIVE_BRANCH' === nodeType || 'CONDITION_BRANCH' === nodeType || 'PARALLEL_BRANCH' === nodeType) return /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    "优先级:",
+                                    value
+                                ]
+                            });
+                            return /*#__PURE__*/ jsx(Fragment, {});
+                        }
+                    })
+                ]
+            }),
+            isSidebar && /*#__PURE__*/ jsx(Button, {
+                type: "text",
+                icon: /*#__PURE__*/ jsx(CloseOutlined, {
+                    style: {
+                        color: token.colorPrimary
+                    }
+                }),
+                onClick: handleClose
+            })
+        ]
+    });
+};
+export { NodeHeader };

package/dist/components/design-editor/node-components/layout/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface TabNodeLayoutProps {
+    children?: React.ReactNode;
+    hiddenAction?: boolean;
+}
+export declare const TabNodeLayout: React.FC<TabNodeLayoutProps>;
+interface PanelLayoutProps {
+    children?: React.ReactNode;
+}
+export declare const PanelLayout: React.FC<PanelLayoutProps>;
+export {};

package/dist/components/design-editor/node-components/layout/index.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { TabBase } from "../taps/base.js";
+import { TabAction } from "../taps/action.js";
+import { TabPromission } from "../taps/promission.js";
+import { Tabs } from "antd";
+const TabNodeLayout = (props)=>{
+    const items = [];
+    const hiddenAction = props.hiddenAction || false;
+    items.push({
+        key: 'base',
+        label: "基础配置",
+        children: /*#__PURE__*/ jsx(TabBase, {
+            children: props.children
+        }),
+        destroyOnHidden: true
+    });
+    if (!hiddenAction) items.push({
+        key: 'action',
+        label: "按钮配置",
+        children: /*#__PURE__*/ jsx(TabAction, {}),
+        destroyOnHidden: true
+    });
+    items.push({
+        key: 'promission',
+        label: "权限配置",
+        children: /*#__PURE__*/ jsx(TabPromission, {}),
+        destroyOnHidden: true
+    });
+    return /*#__PURE__*/ jsx(Tabs, {
+        style: {
+            width: '100%'
+        },
+        centered: true,
+        items: items
+    });
+};
+const PanelLayout = (props)=>/*#__PURE__*/ jsx(TabBase, {
+        children: props.children
+    });
+export { PanelLayout, TabNodeLayout };

package/dist/components/design-editor/node-components/node-hint/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface NodeHintProps {
+    fieldName: string;
+}
+export declare const NodeHint: React.FC<NodeHintProps>;
+export {};

package/dist/components/design-editor/node-components/node-hint/index.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
+import { Field } from "@flowgram.ai/fixed-layout-editor";
+import { Text } from "@coding-flow/flow-pc-ui";
+const NodeHint = (props)=>/*#__PURE__*/ jsx(Field, {
+        name: props.fieldName,
+        render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Text, {
+                suffixCount: 100,
+                children: GroovyScriptConvertorUtil.getScriptTitle(value)
+            }, value)
+    });
+export { NodeHint };

package/dist/components/design-editor/node-components/node-order/index.d.ts

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