From bcc523d480ef853cd9a798c67500393f4a5e5c4a Mon Sep 17 00:00:00 2001 From: taotao Date: Sat, 11 May 2024 19:27:09 +0800 Subject: [PATCH 1/5] feat : adjust page logic #26 --- editor/src/pages/edit/blackboard.css | 6 +- editor/src/pages/edit/blackboard.tsx | 102 +++++++++--------- .../edit/node/{action.tsx => script.tsx} | 37 +------ editor/src/pages/edit/node/tab.tsx | 8 +- editor/src/pages/editor.tsx | 45 ++++++-- 5 files changed, 89 insertions(+), 109 deletions(-) rename editor/src/pages/edit/node/{action.tsx => script.tsx} (76%) diff --git a/editor/src/pages/edit/blackboard.css b/editor/src/pages/edit/blackboard.css index 4e9c6a1..4545a7a 100644 --- a/editor/src/pages/edit/blackboard.css +++ b/editor/src/pages/edit/blackboard.css @@ -1,4 +1,4 @@ -.scroll-patch { - padding-bottom: 100px; -} +.ant-tabs-tabpane { + height: 400px; /* 设置 Tabs 控件的高度 */ + } \ No newline at end of file diff --git a/editor/src/pages/edit/blackboard.tsx b/editor/src/pages/edit/blackboard.tsx index 12d82f1..72e3dc9 100644 --- a/editor/src/pages/edit/blackboard.tsx +++ b/editor/src/pages/edit/blackboard.tsx @@ -14,27 +14,17 @@ import ThemeType from '@/constant/constant'; const { TabPane } = Tabs; -export default function Blackboard() { +export function Stdout() { const { threadInfo } = useSelector((state: RootState) => state.debugInfoSlice); const [runtimeerr, setRuntimeerr] = useState(""); const [change, setChange] = useState("") - const [active, setActive] = useState("2") - const [jsontheme, setJsontheme] = useState('google') const { themeValue } = useSelector((state: RootState) => state.configSlice) - const metainfo = useSelector((state: RootState) => state.debugInfoSlice.metaInfo) - useEffect(() => { let msg = "" let haveerr = false - if (themeValue === ThemeType.Dark) { - setJsontheme("google") - } else { - setJsontheme("rjv-default") - } - try { threadInfo.forEach(element => { msg += "Thread[" + element.number + "]\n" @@ -64,12 +54,8 @@ export default function Blackboard() { } if (haveerr) { - setActive("3") setRuntimeerr(msg) } else { - if (active === "3") { - setActive("2") - } setRuntimeerr("") setChange(msg) @@ -77,38 +63,18 @@ export default function Blackboard() { }, [threadInfo, themeValue]) - const clickTab = (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => { - setActive(activeKey) - } - return ( -
- - - - Blackboard - - } - key="1" - > - - +
+ + - Response + Stdout } - key="2" + key="1" > + + +
+ ); + +} + +export function Blackboard() { + const [jsontheme, setJsontheme] = useState('google') + const { themeValue } = useSelector((state: RootState) => state.configSlice) + const metainfo = useSelector((state: RootState) => state.debugInfoSlice.metaInfo) + + useEffect(() => { + + if (themeValue === ThemeType.Dark) { + setJsontheme("google") + } else { + setJsontheme("rjv-default") + } + + }, [themeValue]) + + useEffect(() => { + + }, [metainfo]) + + return ( +
+ - - RuntimeError + + Blackboard } - key="3" + key="1" > - + + +
- ); - + ) } diff --git a/editor/src/pages/edit/node/action.tsx b/editor/src/pages/edit/node/script.tsx similarity index 76% rename from editor/src/pages/edit/node/action.tsx rename to editor/src/pages/edit/node/script.tsx index 15039f6..57c1cef 100644 --- a/editor/src/pages/edit/node/action.tsx +++ b/editor/src/pages/edit/node/script.tsx @@ -21,21 +21,16 @@ import ThemeType from '@/constant/constant'; const { Search } = Input; -export default function ActionTab() { +export default function ScriptTab() { const [state, setState] = useState({ nod: getDefaultNodeNotifyInfo(), node_ty: "", code: "", defaultAlias: "", - hflex: 0.5, - wflex: 0.4, }); - const [codeHeight, setCodeHeight] = useState("400px"); - const { currentClickNode } = useSelector((state: RootState) => state.treeSlice); - const { graphFlex, editFlex } = useSelector((state: RootState) => state.resizeSlice) const { nodes } = useSelector((state: RootState) => state.treeSlice) const dispatch = useDispatch() @@ -55,33 +50,12 @@ export default function ActionTab() { }); }) - PubSub.subscribe(Topic.WindowResize, () => { - redraw(state.wflex, state.hflex) - }); - return () => { // 取消订阅 PubSub.unsubscribe(Topic.WindowResize); }; }, [currentClickNode]) - useEffect(() => { - setState({ - ...state, - wflex: 1 - graphFlex, - }); - - redraw((1 - graphFlex), state.hflex) - }, [graphFlex]) - - useEffect(() => { - setState({ - ...state, - hflex: editFlex, - }); - - redraw(state.wflex, editFlex) - }, [editFlex]) const getTheme = () => { if (themeValue === ThemeType.Dark) { @@ -91,14 +65,6 @@ export default function ActionTab() { } } - const redraw = (wflex: number, hflwx: number) => { - // auto - // var width = document.documentElement.clientWidth * wflex - 18; - - var height = document.documentElement.clientHeight * hflwx - 40; - - setCodeHeight(height.toString() + "px") - } const applyClick = () => { if (state.nod.id === "") { @@ -136,7 +102,6 @@ export default function ActionTab() { @@ -27,7 +25,7 @@ function GetPane(clickinfo: NodeClickInfo) { case NodeTy.Loop: return ; default: - return ; + return ; } } @@ -36,7 +34,7 @@ export default function Nodes() { const { currentClickNode } = useSelector((state: RootState) => state.treeSlice); useEffect(() => { - + },[currentClickNode]) return ( diff --git a/editor/src/pages/editor.tsx b/editor/src/pages/editor.tsx index 8d989be..0ddef1b 100644 --- a/editor/src/pages/editor.tsx +++ b/editor/src/pages/editor.tsx @@ -1,5 +1,7 @@ import HeartTask from "@/task/heart"; import React, { useState, useEffect } from 'react'; +import { Drawer } from 'antd'; +import ReactJson, { ThemeKeys } from "react-json-view"; // You will need to import the styles separately // You probably want to do this just once during the bootstrapping phase of your application. @@ -9,19 +11,26 @@ import "react-reflex/styles.css"; import { ReflexContainer, ReflexSplitter, ReflexElement, HandlerProps } from "react-reflex"; /// +import ThemeType from '@/constant/constant'; import "./editor.css" import GraphView from "./edit/graph" -import Blackboard from "./edit/blackboard"; +import {Blackboard, Stdout} from "./edit/blackboard"; import Nodes from "./edit/node/tab" -import { NodeTy } from "@/constant/node_type"; -import { useDispatch } from 'react-redux'; + +import { RootState } from "@/models/store"; +import { useDispatch, useSelector } from 'react-redux'; import { setEditFlex, setGraphFlex } from "@/models/resize"; +import { CodeOutlined, FileSearchOutlined } from "@ant-design/icons"; + + export default function Editor() { const dispatch = useDispatch() + const [open, setOpen] = useState(false); + const { currentClickNode } = useSelector((state: RootState) => state.treeSlice); useEffect(() => { const heartTaskComponent = ; @@ -31,6 +40,22 @@ export default function Editor() { } }, []); + useEffect(() => { + + if (currentClickNode.id !== undefined && currentClickNode.id !== "") { + setOpen(true) + } + + },[currentClickNode]) + + const showDrawer = () => { + setOpen(true); + }; + + const onClose = () => { + setOpen(false); + }; + const onResizeEditPane = (domElement: HandlerProps) => { dispatch(setEditFlex(domElement.component.props.flex ?? 0.4)) } @@ -38,12 +63,13 @@ export default function Editor() { const onResizeGraphPane = (domElement: HandlerProps) => { dispatch(setGraphFlex(domElement.component.props.flex ?? 0.6)) } - - return (
+ + + @@ -57,14 +83,11 @@ export default function Editor() { - - - - - - + + + From 045f9386d4123d34814bbd127cb6d6f455fec00f Mon Sep 17 00:00:00 2001 From: pojoy Date: Sun, 12 May 2024 23:40:41 +0800 Subject: [PATCH 2/5] feat : Add function button Add breakpoint for selected node Shortcut key [F9] #26 --- editor/src/pages/edit/blackboard.css | 2 +- editor/src/pages/edit/blackboard.tsx | 6 +- editor/src/pages/edit/graph.tsx | 102 ++++++++++++++++----------- editor/src/pages/editor.tsx | 8 ++- 4 files changed, 72 insertions(+), 46 deletions(-) diff --git a/editor/src/pages/edit/blackboard.css b/editor/src/pages/edit/blackboard.css index 4545a7a..babd6cf 100644 --- a/editor/src/pages/edit/blackboard.css +++ b/editor/src/pages/edit/blackboard.css @@ -1,4 +1,4 @@ .ant-tabs-tabpane { - height: 400px; /* 设置 Tabs 控件的高度 */ + height: 500px; /* 设置 Tabs 控件的高度 */ } \ No newline at end of file diff --git a/editor/src/pages/edit/blackboard.tsx b/editor/src/pages/edit/blackboard.tsx index 72e3dc9..3c889e1 100644 --- a/editor/src/pages/edit/blackboard.tsx +++ b/editor/src/pages/edit/blackboard.tsx @@ -64,7 +64,7 @@ export function Stdout() { }, [threadInfo, themeValue]) return ( -
+
+
{ const { graphFlex } = useSelector((state: RootState) => state.resizeSlice) const { lock } = useSelector((state: RootState) => state.debugInfoSlice) - const { currentTreeName, nodes, updatetick, currentClickNode, currentLockedNode, currentDebugBot } = useSelector((state: RootState) => state.treeSlice) + const { currentTreeName, nodes, updatetick, currentClickNode, currentDebugBot } = useSelector((state: RootState) => state.treeSlice) const [isGraphCreated, setIsGraphCreated] = useState(false); const [timer, setTimer] = useState(null); @@ -176,34 +177,6 @@ const GraphView = (props: GraphViewProps) => { props.dispatch(nodeClick({ id: node.id, type: node.getAttrs().type.name as string })) }); - graph.on("node:dblclick", ({ node }) => { - - // 只对脚本节点进行操作 - if (IsScriptNode(node.getAttrs().type.name as string)) { - setBpNodes(prevBpNodes => { - const tmp = prevBpNodes || []; // 保证 tmp 不为 undefined - const ln = tmp.find((element) => element.parentid === node.id); - - console.info(prevBpNodes, "node dblclick", node.id, ln); - if (ln !== undefined) { // 删除 - graph.removeNode(ln.bpid); - const updatedNodes = tmp.filter((element) => element.parentid !== node.id); - console.info("remove bp node", updatedNodes); - return updatedNodes; - } else { - var bpnode = GetNode(NodeTy.BreakPoint, {}); - bpnode.setPosition(node.position().x - (bpnode.getSize().width + 7), - node.position().y + (bpnode.getSize().height / 2)); - graph.addNode(bpnode, { others : { build: true} }); // 不发送addnode事件 - - const updatedNodes = [...tmp, { parentid: node.id, bpid: bpnode.id }]; - console.info("add bp node", updatedNodes); - return updatedNodes; - } - }); - } - }); - graph.on("blank:click", () => { props.dispatch(nodeClick({ id: "", type: "" })) @@ -370,7 +343,7 @@ const GraphView = (props: GraphViewProps) => { setIsGraphCreated(true); return () => { - setBpNodes(prevBpNodes => {return []}) + setBpNodes(prevBpNodes => { return [] }) graph.dispose() } }, []); @@ -455,6 +428,15 @@ const GraphView = (props: GraphViewProps) => { }); } }); + + graphRef.current.bindKey(["f9", "command+f9", "ctrl+f9"], () => { + if (currentClickNode.id !== "") { + _findCell(currentClickNode.id, (cell) => { + var node = (cell as Node) + ClickBreakpointImpl(node) + }) + } + }) } return () => { @@ -463,6 +445,7 @@ const GraphView = (props: GraphViewProps) => { graphRef.current.unbindKey(["down"]) graphRef.current.unbindKey(["left"]) graphRef.current.unbindKey(["right"]) + graphRef.current.unbindKey(["f9", "command+f9", "ctrl+f9"]) } } @@ -804,6 +787,48 @@ const GraphView = (props: GraphViewProps) => { } }; + const ClickBreakpointImpl = (node: Node | null) => { + + // 只对脚本节点进行操作 + if (node !== null) { + if (IsScriptNode(node.getAttrs().type.name as string)) { + setBpNodes(prevBpNodes => { + const tmp = prevBpNodes || []; // 保证 tmp 不为 undefined + const ln = tmp.find((element) => element.parentid === node?.id); + + console.info(prevBpNodes, "node dblclick", node?.id, ln); + if (ln !== undefined) { // 删除 + graphRef.current?.removeNode(ln.bpid); + const updatedNodes = tmp.filter((element) => element.parentid !== node?.id); + console.info("remove bp node", updatedNodes); + return updatedNodes; + } else { + var bpnode = GetNode(NodeTy.BreakPoint, {}); + bpnode.setPosition(node.position().x - (bpnode.getSize().width + 7), + node.position().y + (bpnode.getSize().height / 2)); + graphRef.current?.addNode(bpnode, { others: { build: true } }); // 不发送addnode事件 + + const updatedNodes = [...tmp, { parentid: node?.id, bpid: bpnode.id }]; + console.info("add bp node", updatedNodes); + return updatedNodes; + } + }); + } + } + + } + + const ClickBreakpoint = () => { + + if (currentClickNode.id !== "") { + _findCell(currentClickNode.id, (cell) => { + var node = (cell as Node) + ClickBreakpointImpl(node) + }) + } + + } + const ClickZoomOut = () => { if (graphRef.current) { graphRef.current.zoomTo(graphRef.current.zoom() * 0.8); @@ -826,7 +851,7 @@ const GraphView = (props: GraphViewProps) => { step(props.tree.currentDebugBot, BpNodes); }; - const step = (botid: string, bpnodes : BPNodeLinkInfo[] | undefined) => { + const step = (botid: string, bpnodes: BPNodeLinkInfo[] | undefined) => { Post(localStorage.remoteAddr, Api.DebugStep, { BotID: botid }).then( (json: any) => { if (json.Code !== 200) { @@ -929,14 +954,6 @@ const GraphView = (props: GraphViewProps) => { props.dispatch(nodeUndo()) }; - const getLockedState = () => { - if (currentLockedNode.id == "") { - return - } else { - return - } - } - return (
{
+ +