diff --git a/service-web/client/src/components/flow/FlowEditor.tsx b/service-web/client/src/components/flow/FlowEditor.tsx index 0cf292f..d0f4cf3 100644 --- a/service-web/client/src/components/flow/FlowEditor.tsx +++ b/service-web/client/src/components/flow/FlowEditor.tsx @@ -1,5 +1,5 @@ import {PlusCircleFilled, RollbackOutlined, SaveFilled} from '@ant-design/icons' -import {Background, BackgroundVariant, Controls, MiniMap, ReactFlow} from '@xyflow/react' +import {Background, BackgroundVariant, Controls, MiniMap, Panel, ReactFlow} from '@xyflow/react' import {Button, Dropdown, message, Popconfirm, Space} from 'antd' import {arrToMap, isEqual, randomId, unique} from 'licia' import {useEffect} from 'react' @@ -34,13 +34,6 @@ const FlowableDiv = styled.div` } } - .toolbar { - position: absolute; - right: 20px; - top: 20px; - z-index: 10; - } - .node-card { cursor: default; @@ -85,80 +78,6 @@ function FlowEditor(props: FlowEditorProps) { return ( {contextHolder} - - i.group)) - .map(group => ({ - type: 'group', - label: group, - children: NodeRegistry.filter(i => isEqual(group, i.group)) - .map(i => ({key: i.key, label: i.name, icon: i.icon})), - })), - onClick: ({key}) => { - try { - if (commonInfo.debug) { - console.info('Add', key, JSON.stringify({nodes, edges, data})) - } - checkAddNode(key, nodes, edges) - - let nodeId = randomId(10, 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM') - let define = NodeRegistryMap[key] - - setDataById( - nodeId, - { - node: { - name: define.name, - description: define.description, - }, - }, - ) - - addNode({ - id: nodeId, - type: key, - position: {x: 100, y: 100}, - data: {}, - }) - } catch (e) { - // @ts-ignore - messageApi.error(e.toString()) - } - }, - }} - > - - - navigate(-1)} - > - - - - NodeRegistryMap[key]!.component)} > + + + i.group)) + .map(group => ({ + type: 'group', + label: group, + children: NodeRegistry.filter(i => isEqual(group, i.group)) + .map(i => ({key: i.key, label: i.name, icon: i.icon})), + })), + onClick: ({key}) => { + try { + if (commonInfo.debug) { + console.info('Add', key, JSON.stringify({nodes, edges, data})) + } + checkAddNode(key, nodes, edges) + + let nodeId = randomId(10, 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM') + let define = NodeRegistryMap[key] + + setDataById( + nodeId, + { + node: { + name: define.name, + description: define.description, + }, + }, + ) + + addNode({ + id: nodeId, + type: key, + position: {x: 100, y: 100}, + data: {}, + }) + } catch (e) { + // @ts-ignore + messageApi.error(e.toString()) + } + }, + }} + > + + + navigate(-1)} + > + + + + + diff --git a/service-web/client/src/components/flow/node/AmisNode.tsx b/service-web/client/src/components/flow/node/AmisNode.tsx index 66f2bd0..d25f547 100644 --- a/service-web/client/src/components/flow/node/AmisNode.tsx +++ b/service-web/client/src/components/flow/node/AmisNode.tsx @@ -1,7 +1,7 @@ import {CopyFilled, DeleteFilled, EditFilled} from '@ant-design/icons' -import {type Edge, Handle, type Node, type NodeProps, Position} from '@xyflow/react' +import {type Edge, Handle, type Node, type NodeProps, NodeToolbar, Position} from '@xyflow/react' import type {Schema} from 'amis' -import {Button, Card, Drawer} from 'antd' +import {Button, Card, Drawer, Space, Tooltip} from 'antd' import {type JSX, useCallback, useState} from 'react' import styled from 'styled-components' import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx' @@ -247,37 +247,42 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({ > {editDrawerForm} + + + +