@coding-flow/flow-design 0.0.6 → 0.0.7

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { theme } from "antd";
-import { ApiOutlined, AuditOutlined, BellOutlined, BranchesOutlined, ClockCircleOutlined, EditOutlined, MergeOutlined, NodeExpandOutlined, PoweroffOutlined, PullRequestOutlined, ShareAltOutlined, UserOutlined } from "@ant-design/icons";
+import { ApiOutlined, AuditOutlined, BellOutlined, BranchesOutlined, ClockCircleOutlined, EditOutlined, MergeOutlined, NodeExpandOutlined, PoweroffOutlined, PullRequestOutlined, ShareAltOutlined, StarOutlined, UserOutlined } from "@ant-design/icons";
 const NodeIcon = (props)=>{
     const icon = props.type;
     const { token } = theme.useToken();
@@ -30,6 +30,12 @@ const NodeIcon = (props)=>{
     if ('HANDLE' === icon) return /*#__PURE__*/ jsx(EditOutlined, {
         style: style
     });
+    if ('MANUAL' === icon) return /*#__PURE__*/ jsx(UserOutlined, {
+        style: style
+    });
+    if ('MANUAL_BRANCH' === icon) return /*#__PURE__*/ jsx(UserOutlined, {
+        style: style
+    });
     if ('INCLUSIVE' === icon) return /*#__PURE__*/ jsx(MergeOutlined, {
         style: style
     });
@@ -48,7 +54,7 @@ const NodeIcon = (props)=>{
     if ('ROUTER' === icon) return /*#__PURE__*/ jsx(PullRequestOutlined, {
         style: style
     });
-    if ('START' === icon) return /*#__PURE__*/ jsx(UserOutlined, {
+    if ('START' === icon) return /*#__PURE__*/ jsx(StarOutlined, {
         style: style
     });
     if ('SUB_PROCESS' === icon) return /*#__PURE__*/ jsx(ShareAltOutlined, {

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

@@ -44,7 +44,8 @@ const HeaderTitle = ({ title, onChange, readonly })=>{
         onPressEnter: (e)=>{
             handleChange(e.target.value);
             setEditTitle(false);
-        }
+        },
+        placeholder: "请输入标题名称"
     });
     return /*#__PURE__*/ jsxs(Space, {
         children: [

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

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

package/dist/components/design-editor/node-components/manual-title/index.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useIsSidebar } from "../../hooks/index.js";
+import { Flex, Input, Space, theme } from "antd";
+import { Field, useClientContext } from "@flowgram.ai/fixed-layout-editor";
+import { 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 ctx = useClientContext();
+    const { playground } = ctx;
+    const canAddBranch = playground.config.readonlyOrDisabled;
+    const handleChange = useCallback((value)=>{
+        const trimmed = value.trim();
+        if (trimmed) onChange(trimmed);
+    }, [
+        onChange
+    ]);
+    if (readonly || canAddBranch) 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);
+        },
+        placeholder: "请输入标题名称"
+    });
+    return /*#__PURE__*/ jsxs(Space, {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: title
+            }),
+            /*#__PURE__*/ jsx(EditOutlined, {
+                style: {
+                    color: token.colorPrimary,
+                    cursor: "pointer"
+                },
+                onClick: ()=>setEditTitle(true)
+            })
+        ]
+    });
+};
+const ManualTitle = (props)=>{
+    const { node } = useNodeRenderContext();
+    const isSidebar = useIsSidebar();
+    const iconEnable = props.iconEnable ?? true;
+    const nodeType = node.getNodeRegistry().type;
+    const headerStyle = {
+        width: "100%",
+        padding: isSidebar ? "4px 5px" : "5px",
+        borderBottom: "1px solid #f0f0f0",
+        marginBottom: 8,
+        position: "relative",
+        ...props.style
+    };
+    return /*#__PURE__*/ jsx(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
+                        })
+                })
+            ]
+        })
+    });
+};
+export { ManualTitle };

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

@@ -13,6 +13,8 @@ import { ParallelBranchNodeRegistry } from "./parallel-branch/index.js";
 import { RouterNodeRegistry } from "./router/index.js";
 import { SubProcessNodeRegistry } from "./sub-process/index.js";
 import { TriggerNodeRegistry } from "./trigger/index.js";
+import { ManualNodeRegistry } from "./manual/index.js";
+import { ManualBranchNodeRegistry } from "./manual-branch/index.js";
 const FlowNodeRegistries = [
     ApprovalNodeRegistry,
     ConditionNodeRegistry,
@@ -22,6 +24,8 @@ const FlowNodeRegistries = [
     HandleNodeRegistry,
     InclusiveNodeRegistry,
     InclusiveBranchNodeRegistry,
+    ManualNodeRegistry,
+    ManualBranchNodeRegistry,
     NotifyNodeRegistry,
     ParallelNodeRegistry,
     ParallelBranchNodeRegistry,

package/dist/components/design-editor/nodes/manual/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/manual/form-meta.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { BranchAdderRender } from "../../components/branch-adder/index.js";
+import { NodePanel } from "../../node-components/panel/index.js";
+const renderForm = (data)=>/*#__PURE__*/ jsx(NodePanel, {
+        data: data,
+        children: /*#__PURE__*/ jsx(BranchAdderRender, {
+            buttonText: '添加条件分支',
+            addType: 'MANUAL_BRANCH'
+        })
+    });
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

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

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const ManualNodeRegistry: FlowNodeRegistry;

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

@@ -0,0 +1,21 @@
+import { formMeta } from "./form-meta.js";
+import { FlowNodeSplitType } from "@flowgram.ai/fixed-layout-editor";
+const ManualNodeRegistry = {
+    type: 'MANUAL',
+    extend: FlowNodeSplitType.DYNAMIC_SPLIT,
+    meta: {
+        copyDisable: true,
+        addDisable: false,
+        expandable: false,
+        sidebarDisable: true,
+        style: {
+            width: '100%'
+        }
+    },
+    info: {
+        icon: 'MANUAL',
+        description: '人工控制'
+    },
+    formMeta: formMeta
+};
+export { ManualNodeRegistry };

package/dist/components/design-editor/nodes/manual-branch/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/manual-branch/form-meta.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { NodePanel } from "../../node-components/panel/index.js";
+import "react";
+import { ManualTitle } from "../../node-components/manual-title/index.js";
+const renderForm = (data)=>/*#__PURE__*/ jsx(NodePanel, {
+        data: data,
+        children: /*#__PURE__*/ jsx(ManualTitle, {})
+    });
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

package/dist/components/design-editor/nodes/manual-branch/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const ManualBranchNodeRegistry: FlowNodeRegistry;

package/dist/components/design-editor/nodes/manual-branch/index.js

@@ -0,0 +1,27 @@
+import { formMeta } from "./form-meta.js";
+import { nanoid } from "nanoid";
+const ManualBranchNodeRegistry = {
+    type: 'MANUAL_BRANCH',
+    extend: 'block',
+    meta: {
+        copyDisable: true,
+        addDisable: true,
+        sidebarDisable: true
+    },
+    info: {
+        icon: 'MANUAL_BRANCH',
+        description: '分支节点'
+    },
+    formMeta: formMeta,
+    onAdd (ctx, from) {
+        return {
+            id: `manual_branch_${nanoid(5)}`,
+            type: 'MANUAL_BRANCH',
+            data: {
+                title: "条件分支节点",
+                value: 'manal Value'
+            }
+        };
+    }
+};
+export { ManualBranchNodeRegistry };

package/dist/components/design-editor/nodes/parallel-branch/index.js

@@ -7,9 +7,6 @@ const ParallelBranchNodeRegistry = {
         copyDisable: true,
         addDisable: true,
         sidebarDisable: true,
-        strategies: [
-            'ParallelBranchStrategy'
-        ],
         style: {
             width: '100%'
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-flow/flow-design",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "flow-engine design components ",
   "type": "module",
   "keywords": [
@@ -54,16 +54,16 @@
     "nanoid": "^5.1.6",
     "react-redux": "^9.2.0",
     "styled-components": "^5.3.11",
-    "@coding-flow/flow-core": "0.0.6",
-    "@coding-flow/flow-icons": "0.0.6",
-    "@coding-flow/flow-pc-ui": "0.0.6",
-    "@coding-flow/flow-types": "0.0.6"
+    "@coding-flow/flow-core": "0.0.7",
+    "@coding-flow/flow-pc-ui": "0.0.7",
+    "@coding-flow/flow-types": "0.0.7",
+    "@coding-flow/flow-icons": "0.0.7"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/styled-components": "^5.1.36",
-    "@coding-flow/flow-core": "0.0.6",
-    "@coding-flow/flow-types": "0.0.6"
+    "@coding-flow/flow-types": "0.0.7",
+    "@coding-flow/flow-core": "0.0.7"
   },
   "scripts": {
     "build": "rslib build",