From 6e9db84afd6a63c6f549bb792c4c7f1ab63d9de2 Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 10 Jan 2025 11:37:05 +0100 Subject: [PATCH 1/9] Error while changing colors and inputs --- .../src/components/helper/TreeEditorHelper.ts | 92 +++++++++++++--- .../tree_editor/DiagramVisualizer.tsx | 2 +- .../src/components/tree_editor/TreeEditor.tsx | 63 ++++++++++- .../tree_editor/modals/EditActionModal.tsx | 102 +++++++++++++----- 4 files changed, 212 insertions(+), 47 deletions(-) diff --git a/frontend/src/components/helper/TreeEditorHelper.ts b/frontend/src/components/helper/TreeEditorHelper.ts index 6d52fc631..c9011ad63 100644 --- a/frontend/src/components/helper/TreeEditorHelper.ts +++ b/frontend/src/components/helper/TreeEditorHelper.ts @@ -50,14 +50,62 @@ export const isActionNode = (nodeName: string) => { ].includes(nodeName); }; +export class ActionFrame { + public name: string; + private color: string; + private inputs: string[]; + private outputs: string[]; + + constructor( + name: string, + color: string, + inputs: string[], + outputs: string[] + ) { + this.name = name; + this.color = color; + this.inputs = inputs; + this.outputs = outputs; + } + + public changeColor(color: string) { + this.color = color; + } + + public addInput(name: string) { + if (!this.inputs.includes(name)) { + this.inputs.push(name); + } + } + + public addOutput(name: string) { + if (!this.outputs.includes(name)) { + this.outputs.push(name); + } + } + + public removeInput(name: string) { + if (this.inputs.includes(name)) { + this.inputs = this.inputs.filter((input) => input !== name); + } + } + + public removeOutput(name: string) { + if (this.outputs.includes(name)) { + this.outputs = this.outputs.filter((output) => output !== name); + } + } +} + export const addPort = ( portName: string, + action: ActionFrame, node: BasicNodeModel, type: ActionNodePortType, engine: DiagramEngine, model: DiagramModel, diagramEditedCallback: React.Dispatch>, - updateJsonState: Function, + updateJsonState: Function ) => { // Check that the user didn't cancel if (!node || !portName) { @@ -66,8 +114,10 @@ export const addPort = ( if (type === ActionNodePortType.Input) { node.addInputPort(portName); + action.addInput(portName); } else { node.addOutputPort(portName); + action.addOutput(portName); } model.getNodes().forEach((oldNode: NodeModel) => { @@ -98,7 +148,7 @@ export const addPort = ( const deletePortLink = ( model: DiagramModel, portName: string, - node: BasicNodeModel, + node: BasicNodeModel ) => { // var link: LinkModel | undefined; var link: any; @@ -114,11 +164,12 @@ const deletePortLink = ( export const removePort = ( port: OutputPortModel | InputPortModel, + action: ActionFrame, node: BasicNodeModel, engine: DiagramEngine, model: DiagramModel, diagramEditedCallback: React.Dispatch>, - updateJsonState: Function, + updateJsonState: Function ) => { //TODO: type should be an enum // Check that the user didn't cancel @@ -132,8 +183,10 @@ export const removePort = ( if (port instanceof InputPortModel) { node.removeInputPort(port); + action.removeInput(portName); } else { node.removeOutputPort(port); + action.removeOutput(portName); } model.getNodes().forEach((oldNode: NodeModel) => { @@ -167,13 +220,14 @@ export const removePort = ( export const changeColorNode = ( rgb: [number, number, number], + action: ActionFrame | undefined, node: BasicNodeModel, engine: DiagramEngine, model: DiagramModel, diagramEditedCallback: React.Dispatch< React.SetStateAction > = () => {}, - updateJsonState: Function = () => {}, + updateJsonState: Function = () => {} ) => { node.setColor( "rgb(" + @@ -182,9 +236,21 @@ export const changeColorNode = ( Math.round(rgb[1]) + "," + Math.round(rgb[2]) + - ")", + ")" ); + if (action) { + action.changeColor( + "rgb(" + + Math.round(rgb[0]) + + "," + + Math.round(rgb[1]) + + "," + + Math.round(rgb[2]) + + ")" + ); + } + model.getNodes().forEach((oldNode: NodeModel) => { var convNode; var name; @@ -212,7 +278,7 @@ export const changeColorNode = ( export const configureEngine = ( engine: React.MutableRefObject, basicNodeCallback: Function | null = null, - tagNodeCallback: Function | null = null, + tagNodeCallback: Function | null = null ) => { console.log("Configuring engine!"); // Register factories @@ -225,32 +291,32 @@ export const configureEngine = ( engine.current .getPortFactories() .registerFactory( - new SimplePortFactory("children", (config) => new ChildrenPortModel()), + new SimplePortFactory("children", (config) => new ChildrenPortModel()) ); engine.current .getPortFactories() .registerFactory( - new SimplePortFactory("parent", (config) => new ParentPortModel()), + new SimplePortFactory("parent", (config) => new ParentPortModel()) ); engine.current .getPortFactories() .registerFactory( - new SimplePortFactory("output", (config) => new OutputPortModel("")), + new SimplePortFactory("output", (config) => new OutputPortModel("")) ); engine.current .getPortFactories() .registerFactory( - new SimplePortFactory("input", (config) => new InputPortModel("")), + new SimplePortFactory("input", (config) => new InputPortModel("")) ); engine.current .getPortFactories() .registerFactory( - new SimplePortFactory("tag output", (config) => new TagOutputPortModel()), + new SimplePortFactory("tag output", (config) => new TagOutputPortModel()) ); engine.current .getPortFactories() .registerFactory( - new SimplePortFactory("tag input", (config) => new TagInputPortModel()), + new SimplePortFactory("tag input", (config) => new TagInputPortModel()) ); // Disable loose links @@ -267,7 +333,7 @@ export const configureEngine = ( export const findSubtree = ( baseTree: any, subTree: string, - oldIndex: number = -1, + oldIndex: number = -1 ): number[] | undefined => { var path: number[] = []; var nodeChilds; diff --git a/frontend/src/components/tree_editor/DiagramVisualizer.tsx b/frontend/src/components/tree_editor/DiagramVisualizer.tsx index 534863a2a..88e1c3a61 100644 --- a/frontend/src/components/tree_editor/DiagramVisualizer.tsx +++ b/frontend/src/components/tree_editor/DiagramVisualizer.tsx @@ -99,7 +99,7 @@ const setStatusNode = ( } if (node) { - changeColorNode(rgb, node, engine, model); + changeColorNode(rgb, undefined, node, engine, model); } }; diff --git a/frontend/src/components/tree_editor/TreeEditor.tsx b/frontend/src/components/tree_editor/TreeEditor.tsx index c72ca37ce..6bb62056a 100644 --- a/frontend/src/components/tree_editor/TreeEditor.tsx +++ b/frontend/src/components/tree_editor/TreeEditor.tsx @@ -8,6 +8,7 @@ import createEngine, { DiagramModel, DiagramModelGenerics, NodeModel, + PortModel, ZoomCanvasAction, } from "@projectstorm/react-diagrams"; import { CanvasWidget } from "@projectstorm/react-canvas-core"; @@ -25,6 +26,7 @@ import { configureEngine, isActionNode, TreeViewType, + ActionFrame, } from "../helper/TreeEditorHelper"; import NodeMenu from "./NodeMenu"; @@ -78,16 +80,21 @@ const TreeEditor = memo( // Model and Engine for models use const [modalModel, setModalModel] = useState( - undefined, + undefined ); const [modalEngine, setModalEngine] = useState( - undefined, + undefined ); + const [actionFrames, setActionFrame] = useState([]); useEffect(() => { setBtOrder(settings.btOrder.value); }, [settings.btOrder.value]); + useEffect(() => { + setActionFrame([]); + }, [projectName]); + const updateJsonState = () => { if (modalModel) { setResultJson(modalModel.serialize()); @@ -104,6 +111,38 @@ const TreeEditor = memo( setCurrentNode(undefined); }; + const getActionFrame = (name: string) => { + for (let index = 0; index < actionFrames.length; index++) { + const element = actionFrames[index]; + if (element.name === name) { + console.error(actionFrames); + return element; + } + } + return undefined; + }; + + const addActionFrame = (name: string, color:string, ports:PortModel ) => { + if (getActionFrame(name) !== undefined) { + return; // Already exists + } + + var inputs: string[] = []; + var outputs: string[] = []; + + Object.values(ports).forEach((port) => { + if (port instanceof InputPortModel) { + inputs.push(port.getName()) + } else if (port instanceof OutputPortModel) { + outputs.push(port.getName()) + } + }); + + var newActionFrame = new ActionFrame(name, color, inputs, outputs); + + setActionFrame([...actionFrames, newActionFrame]); + }; + return ( <> {currentNode && modalModel && modalEngine && ( @@ -113,6 +152,7 @@ const TreeEditor = memo( isOpen={editActionModalOpen} onClose={onEditActionModalClose} currentActionNode={currentNode} + getActionFrame={getActionFrame} model={modalModel} engine={modalEngine} updateJsonState={updateJsonState} @@ -163,6 +203,8 @@ const TreeEditor = memo( setGoBack={setGoBack} subTreeName={subTreeName} updateFileExplorer={updateFileExplorer} + getActionFrame={getActionFrame} + addActionFrame={addActionFrame} /> )} ); - }, + } ); const DiagramEditor = memo( @@ -217,6 +259,8 @@ const DiagramEditor = memo( setGoBack, subTreeName, updateFileExplorer, + getActionFrame, + addActionFrame, }: { modelJson: any; setResultJson: Function; @@ -234,6 +278,8 @@ const DiagramEditor = memo( setGoBack: Function; subTreeName: string; updateFileExplorer: Function; + getActionFrame: Function; + addActionFrame: Function; }) => { // VARS @@ -284,7 +330,7 @@ const DiagramEditor = memo( else if (nodeName === "Delay") node.addInputPort("delay_ms"); model.current.getNodes().forEach((oldNode: NodeModel) => { - //TODO: for the tags, this will never be called. Maybe have a common type + //TODO: add a function to retrieve stored data if (oldNode instanceof BasicNodeModel) { var convNode = oldNode as BasicNodeModel; if (convNode.getName() === node.getName() && node !== convNode) { @@ -544,6 +590,13 @@ const DiagramEditor = memo( attachPositionListener(node); attachClickListener(node); node.setSelected(false); + if ( + node instanceof BasicNodeModel && + isActionNode(node.getName()) && + !node.getIsSubtree() + ) { + addActionFrame(node.getName(), node.getColor(), node.getPorts()) + } }); setModalModel(model.current); @@ -575,7 +628,7 @@ const DiagramEditor = memo( )} ); - }, + } ); export default TreeEditor; diff --git a/frontend/src/components/tree_editor/modals/EditActionModal.tsx b/frontend/src/components/tree_editor/modals/EditActionModal.tsx index cf0e80776..c0a813df9 100644 --- a/frontend/src/components/tree_editor/modals/EditActionModal.tsx +++ b/frontend/src/components/tree_editor/modals/EditActionModal.tsx @@ -8,6 +8,7 @@ import { removePort, ActionNodePortType, changeColorNode, + ActionFrame, } from "../../helper/TreeEditorHelper"; import { rgbToLuminance } from "../../helper/colorHelper"; @@ -32,6 +33,7 @@ const EditActionModal = ({ isOpen, onClose, currentActionNode, + getActionFrame, model, engine, updateJsonState, @@ -40,6 +42,7 @@ const EditActionModal = ({ isOpen: boolean; onClose: Function; currentActionNode: BasicNodeModel; + getActionFrame: Function; model: DiagramModel; engine: DiagramEngine; updateJsonState: Function; @@ -60,7 +63,7 @@ const EditActionModal = ({ })); setAllowCreation( (name === "newInputName" && isInputNameValid(value)) || - (name === "newOutputName" && isOutputNameValid(value)), + (name === "newOutputName" && isOutputNameValid(value)) ); }; @@ -89,13 +92,18 @@ const EditActionModal = ({ color.rgb["g"], color.rgb["b"], ]; + + var actionFrame = getActionFrame(currentActionNode.getName()); + console.log(actionFrame, currentActionNode.getName()) + changeColorNode( rgb, + actionFrame, currentActionNode, engine, model, setDiagramEdited, - updateJsonState, + updateJsonState ); } }, [color]); @@ -140,11 +148,11 @@ const EditActionModal = ({ const isInputNameValid = (name: string) => { var inputPorts = Object.entries(currentActionNode.getPorts()).filter( - (item) => item[1] instanceof InputPortModel, + (item) => item[1] instanceof InputPortModel ); var merged = [].concat.apply( inputPorts.map((x) => x[0]), - [], + [] ); return ( name !== "" && !name.includes(" ") && !merged.includes(name as never) @@ -153,11 +161,11 @@ const EditActionModal = ({ const isOutputNameValid = (name: string) => { var outputPorts = Object.entries(currentActionNode.getPorts()).filter( - (item) => item[1] instanceof OutputPortModel, + (item) => item[1] instanceof OutputPortModel ); var merged = [].concat.apply( outputPorts.map((x) => x[0]), - [], + [] ); return ( name !== "" && !name.includes(" ") && !merged.includes(name as never) @@ -167,14 +175,21 @@ const EditActionModal = ({ const addInput = () => { //TODO: Maybe display some error message when the name is invalid if (isInputNameValid(formState["newInputName"])) { + var actionFrame = getActionFrame(currentActionNode.getName()); + + if (actionFrame === undefined) { + return; + } + addPort( formState["newInputName"], + actionFrame, currentActionNode, ActionNodePortType.Input, engine, model, setDiagramEdited, - updateJsonState, + updateJsonState ); } setInputName(false); @@ -184,20 +199,67 @@ const EditActionModal = ({ const addOutput = () => { //TODO: Maybe display some error message when the name is invalid if (isOutputNameValid(formState["newOutputName"])) { + var actionFrame = getActionFrame(currentActionNode.getName()); + + if (actionFrame === undefined) { + return; + } + addPort( formState["newOutputName"], + actionFrame, currentActionNode, ActionNodePortType.Output, engine, model, setDiagramEdited, - updateJsonState, + updateJsonState ); } setOutputName(false); reRender(); }; + const removeInput = (port: InputPortModel) => { + var actionFrame = getActionFrame(currentActionNode.getName()); + + if (actionFrame === undefined) { + return; + } + + removePort( + port, + actionFrame, + currentActionNode, + engine, + model, + setDiagramEdited, + updateJsonState + ); + + reRender(); + }; + + const removeOutput = (port: OutputPortModel) => { + var actionFrame = getActionFrame(currentActionNode.getName()); + + if (actionFrame === undefined) { + return; + } + + removePort( + port, + actionFrame, + currentActionNode, + engine, + model, + setDiagramEdited, + updateJsonState + ); + + reRender(); + }; + const cancelCreation = () => { setInputName(false); setOutputName(false); @@ -276,15 +338,7 @@ const EditActionModal = ({ }} title="Delete" onClick={() => { - removePort( - port[1] as InputPortModel, - currentActionNode, - engine, - model, - setDiagramEdited, - updateJsonState, - ); - reRender(); + removeInput(port[1] as InputPortModel); }} > ); } - }, + } )} {inputName ? (
@@ -405,15 +459,7 @@ const EditActionModal = ({ }} title="Delete" onClick={() => { - removePort( - port[1] as OutputPortModel, - currentActionNode, - engine, - model, - setDiagramEdited, - updateJsonState, - ); - reRender(); + removeOutput(port[1] as OutputPortModel); }} > ); } - }, + } )} {outputName ? (
From 031213b30178d9d6311270dd9641138809a29049 Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 10 Jan 2025 12:12:52 +0100 Subject: [PATCH 2/9] Add if statement --- .../src/components/tree_editor/modals/EditActionModal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/tree_editor/modals/EditActionModal.tsx b/frontend/src/components/tree_editor/modals/EditActionModal.tsx index c0a813df9..6bab1abaf 100644 --- a/frontend/src/components/tree_editor/modals/EditActionModal.tsx +++ b/frontend/src/components/tree_editor/modals/EditActionModal.tsx @@ -94,7 +94,10 @@ const EditActionModal = ({ ]; var actionFrame = getActionFrame(currentActionNode.getName()); - console.log(actionFrame, currentActionNode.getName()) + + if (actionFrame === undefined) { + return; + } changeColorNode( rgb, From 547f3d33e50b3c00430dcc82190bf3aa06c08764 Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 10 Jan 2025 12:39:02 +0100 Subject: [PATCH 3/9] Solve not update issues --- .../src/components/helper/TreeEditorHelper.ts | 59 +++++++++++++++++-- .../src/components/tree_editor/TreeEditor.tsx | 44 +------------- .../tree_editor/modals/EditActionModal.tsx | 25 +------- 3 files changed, 58 insertions(+), 70 deletions(-) diff --git a/frontend/src/components/helper/TreeEditorHelper.ts b/frontend/src/components/helper/TreeEditorHelper.ts index c9011ad63..7680c913b 100644 --- a/frontend/src/components/helper/TreeEditorHelper.ts +++ b/frontend/src/components/helper/TreeEditorHelper.ts @@ -3,6 +3,7 @@ import { DiagramModel, LinkModel, NodeModel, + PortModel, ZoomCanvasAction, } from "@projectstorm/react-diagrams"; @@ -97,9 +98,47 @@ export class ActionFrame { } } +var actionFrames: ActionFrame[] = []; + +export const getActionFrame = (name: string) => { + for (let index = 0; index < actionFrames.length; index++) { + const element = actionFrames[index]; + if (element.name === name) { + console.error(actionFrames); + return element; + } + } + return undefined; +}; + +export const resetActionFrames = () => { + actionFrames = []; +}; + +export const addActionFrame = (name: string, color:string, ports:{ [s: string]: PortModel; } ) => { + if (getActionFrame(name) !== undefined) { + return; // Already exists + } + + var inputs: string[] = []; + var outputs: string[] = []; + + Object.values(ports).forEach((port) => { + if (port instanceof InputPortModel) { + inputs.push(port.getName()) + } else if (port instanceof OutputPortModel) { + outputs.push(port.getName()) + } + }); + + var newActionFrame = new ActionFrame(name, color, inputs, outputs); + + actionFrames.push(newActionFrame); +}; + export const addPort = ( portName: string, - action: ActionFrame, + action: ActionFrame | undefined, node: BasicNodeModel, type: ActionNodePortType, engine: DiagramEngine, @@ -114,10 +153,14 @@ export const addPort = ( if (type === ActionNodePortType.Input) { node.addInputPort(portName); - action.addInput(portName); + if (action) { + action.addInput(portName); + } } else { node.addOutputPort(portName); - action.addOutput(portName); + if (action) { + action.addOutput(portName); + } } model.getNodes().forEach((oldNode: NodeModel) => { @@ -164,7 +207,7 @@ const deletePortLink = ( export const removePort = ( port: OutputPortModel | InputPortModel, - action: ActionFrame, + action: ActionFrame | undefined, node: BasicNodeModel, engine: DiagramEngine, model: DiagramModel, @@ -183,10 +226,14 @@ export const removePort = ( if (port instanceof InputPortModel) { node.removeInputPort(port); - action.removeInput(portName); + if (action) { + action.removeInput(portName); + } } else { node.removeOutputPort(port); - action.removeOutput(portName); + if (action) { + action.removeOutput(portName); + } } model.getNodes().forEach((oldNode: NodeModel) => { diff --git a/frontend/src/components/tree_editor/TreeEditor.tsx b/frontend/src/components/tree_editor/TreeEditor.tsx index 6bb62056a..55ea6db24 100644 --- a/frontend/src/components/tree_editor/TreeEditor.tsx +++ b/frontend/src/components/tree_editor/TreeEditor.tsx @@ -27,6 +27,8 @@ import { isActionNode, TreeViewType, ActionFrame, + resetActionFrames, + addActionFrame, } from "../helper/TreeEditorHelper"; import NodeMenu from "./NodeMenu"; @@ -85,14 +87,13 @@ const TreeEditor = memo( const [modalEngine, setModalEngine] = useState( undefined ); - const [actionFrames, setActionFrame] = useState([]); useEffect(() => { setBtOrder(settings.btOrder.value); }, [settings.btOrder.value]); useEffect(() => { - setActionFrame([]); + resetActionFrames(); }, [projectName]); const updateJsonState = () => { @@ -111,38 +112,6 @@ const TreeEditor = memo( setCurrentNode(undefined); }; - const getActionFrame = (name: string) => { - for (let index = 0; index < actionFrames.length; index++) { - const element = actionFrames[index]; - if (element.name === name) { - console.error(actionFrames); - return element; - } - } - return undefined; - }; - - const addActionFrame = (name: string, color:string, ports:PortModel ) => { - if (getActionFrame(name) !== undefined) { - return; // Already exists - } - - var inputs: string[] = []; - var outputs: string[] = []; - - Object.values(ports).forEach((port) => { - if (port instanceof InputPortModel) { - inputs.push(port.getName()) - } else if (port instanceof OutputPortModel) { - outputs.push(port.getName()) - } - }); - - var newActionFrame = new ActionFrame(name, color, inputs, outputs); - - setActionFrame([...actionFrames, newActionFrame]); - }; - return ( <> {currentNode && modalModel && modalEngine && ( @@ -152,7 +121,6 @@ const TreeEditor = memo( isOpen={editActionModalOpen} onClose={onEditActionModalClose} currentActionNode={currentNode} - getActionFrame={getActionFrame} model={modalModel} engine={modalEngine} updateJsonState={updateJsonState} @@ -203,8 +171,6 @@ const TreeEditor = memo( setGoBack={setGoBack} subTreeName={subTreeName} updateFileExplorer={updateFileExplorer} - getActionFrame={getActionFrame} - addActionFrame={addActionFrame} /> )} ); - } + }, ); const DiagramEditor = memo( @@ -294,7 +294,7 @@ const DiagramEditor = memo( var actionFrame = getActionFrame(nodeName); - if (! (node instanceof BasicNodeModel)) { + if (!(node instanceof BasicNodeModel)) { return; } @@ -307,11 +307,11 @@ const DiagramEditor = memo( node.setColor(actionFrame.getColor()); - actionFrame.getInputs().forEach(input => { + actionFrame.getInputs().forEach((input) => { node.addInputPort(input); }); - actionFrame.getOutputs().forEach(output => { + actionFrame.getOutputs().forEach((output) => { node.addInputPort(output); }); }; @@ -597,7 +597,7 @@ const DiagramEditor = memo( )} ); - } + }, ); export default TreeEditor; diff --git a/frontend/src/components/tree_editor/modals/EditActionModal.tsx b/frontend/src/components/tree_editor/modals/EditActionModal.tsx index 2bffdf7f3..93a981e64 100644 --- a/frontend/src/components/tree_editor/modals/EditActionModal.tsx +++ b/frontend/src/components/tree_editor/modals/EditActionModal.tsx @@ -55,7 +55,6 @@ const EditActionModal = ({ const [formState, setFormState] = useState(initialEditActionModalData); const [update, setUpdate] = React.useState(false); - const handleInputChange = (event: any) => { const { name, value } = event.target; setFormState((prevFormData) => ({ @@ -64,7 +63,7 @@ const EditActionModal = ({ })); setAllowCreation( (name === "newInputName" && isInputNameValid(value)) || - (name === "newOutputName" && isOutputNameValid(value)) + (name === "newOutputName" && isOutputNameValid(value)), ); }; @@ -88,7 +87,7 @@ const EditActionModal = ({ useEffect(() => { if (update) { - setUpdate(false) + setUpdate(false); } }, [update]); @@ -101,7 +100,7 @@ const EditActionModal = ({ ]; var actionFrame = getActionFrame(currentActionNode.getName()); - + changeColorNode( rgb, actionFrame, @@ -109,7 +108,7 @@ const EditActionModal = ({ engine, model, setDiagramEdited, - updateJsonState + updateJsonState, ); } }, [color]); @@ -154,11 +153,11 @@ const EditActionModal = ({ const isInputNameValid = (name: string) => { var inputPorts = Object.entries(currentActionNode.getPorts()).filter( - (item) => item[1] instanceof InputPortModel + (item) => item[1] instanceof InputPortModel, ); var merged = [].concat.apply( inputPorts.map((x) => x[0]), - [] + [], ); return ( name !== "" && !name.includes(" ") && !merged.includes(name as never) @@ -167,11 +166,11 @@ const EditActionModal = ({ const isOutputNameValid = (name: string) => { var outputPorts = Object.entries(currentActionNode.getPorts()).filter( - (item) => item[1] instanceof OutputPortModel + (item) => item[1] instanceof OutputPortModel, ); var merged = [].concat.apply( outputPorts.map((x) => x[0]), - [] + [], ); return ( name !== "" && !name.includes(" ") && !merged.includes(name as never) @@ -191,7 +190,7 @@ const EditActionModal = ({ engine, model, setDiagramEdited, - updateJsonState + updateJsonState, ); } setInputName(false); @@ -211,7 +210,7 @@ const EditActionModal = ({ engine, model, setDiagramEdited, - updateJsonState + updateJsonState, ); } setOutputName(false); @@ -228,7 +227,7 @@ const EditActionModal = ({ engine, model, setDiagramEdited, - updateJsonState + updateJsonState, ); setUpdate(true); @@ -244,7 +243,7 @@ const EditActionModal = ({ engine, model, setDiagramEdited, - updateJsonState + updateJsonState, ); setUpdate(true); @@ -344,7 +343,7 @@ const EditActionModal = ({
); } - } + }, )} {inputName ? (
@@ -476,7 +475,7 @@ const EditActionModal = ({
); } - } + }, )} {outputName ? (
From 6d97b1241dfe0809b0571aafc45852919bea58f5 Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 10 Jan 2025 14:55:12 +0100 Subject: [PATCH 7/9] Improving accent color --- frontend/src/App.tsx | 7 --- .../components/file_browser/FileBrowser.js | 6 --- .../file_explorer/FileExplorer.jsx | 9 +--- .../file_explorer/MoreActionsMenu.jsx | 1 - .../{TreeNode.jsx => TreeNode.tsx} | 43 ++++++++++++------- frontend/src/components/options/Options.tsx | 8 ++-- .../settings_popup/SettingsModal.jsx | 8 +--- 7 files changed, 34 insertions(+), 48 deletions(-) rename frontend/src/components/file_browser/file_explorer/{TreeNode.jsx => TreeNode.tsx} (67%) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index fac959b6d..43f55d933 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -25,16 +25,12 @@ const App = ({ isUnibotics }: { isUnibotics: boolean }) => { const [forceSaveCurrent, setForcedSaveCurrent] = useState(false); const [currentProjectname, setCurrentProjectname] = useState(""); const [currentUniverseName, setCurrentUniverseName] = useState(""); - const [actionNodesData, setActionNodesData] = useState>( - {}, - ); const [saveCurrentDiagram, setSaveCurrentDiagram] = useState(false); const [updateFileExplorer, setUpdateFileExplorer] = useState(false); const [isErrorModalOpen, setErrorModalOpen] = useState(false); const [projectChanges, setProjectChanges] = useState(false); const [gazeboEnabled, setGazeboEnabled] = useState(false); const [manager, setManager] = useState(null); - const [diagramEditorReady, setDiagramEditorReady] = useState(false); const [showSim, setSimVisible] = useState(false); const [showTerminal, setTerminalVisible] = useState(false); @@ -190,9 +186,6 @@ const App = ({ isUnibotics }: { isUnibotics: boolean }) => { currentFilename={currentFilename} currentProjectname={currentProjectname} setProjectChanges={setProjectChanges} - actionNodesData={actionNodesData} - showAccentColor={"editorShowAccentColors"} - diagramEditorReady={diagramEditorReady} setAutosave={setAutosave} forceSaveCurrent={forceSaveCurrent} setForcedSaveCurrent={setForcedSaveCurrent} diff --git a/frontend/src/components/file_browser/FileBrowser.js b/frontend/src/components/file_browser/FileBrowser.js index 8493066ae..0d81b7f01 100644 --- a/frontend/src/components/file_browser/FileBrowser.js +++ b/frontend/src/components/file_browser/FileBrowser.js @@ -41,9 +41,6 @@ const FileBrowser = ({ currentFilename, currentProjectname, setProjectChanges, - actionNodesData, - showAccentColor, - diagramEditorReady, setAutosave, forceSaveCurrent, setForcedSaveCurrent, @@ -395,9 +392,6 @@ const FileBrowser = ({ currentFilename={currentFilename} currentProjectname={currentProjectname} setSelectedEntry={setSelectedEntry} - actionNodesData={actionNodesData} - showAccentColor={showAccentColor} - diagramEditorReady={diagramEditorReady} fileList={fileList} fetchFileList={fetchFileList} onDelete={handleDeleteModal} diff --git a/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx b/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx index 51d7cdc8b..de716d32e 100644 --- a/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx +++ b/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import "./FileExplorer.css"; -import TreeNode from "./TreeNode.jsx"; +import TreeNode from "./TreeNode"; import MoreActionsMenu, { ContextMenuProps } from "./MoreActionsMenu.jsx"; const FileExplorer = ({ @@ -9,9 +9,6 @@ const FileExplorer = ({ currentFilename, currentProjectname, setSelectedEntry, - actionNodesData, - showAccentColor, - diagramEditorReady, fileList, fetchFileList, onDelete, @@ -65,9 +62,6 @@ const FileExplorer = ({ depth={0} parentGroup="" currentFilename={currentFilename} - showAccentColor={showAccentColor} - diagramEditorReady={diagramEditorReady} - actionNodesData={actionNodesData} handleFileClick={handleFileClick} handleFolderClick={handleFolderClick} menuProps={MenuProps} @@ -76,7 +70,6 @@ const FileExplorer = ({ {showMenu && ( (false); + const [group, setGroup] = useState(parentGroup); + const settings = React.useContext(OptionsContext); useEffect(() => { if (node.is_dir) { @@ -25,7 +43,7 @@ function TreeNode({ } } }, []); - + const handleClick = () => { if (node.is_dir) { setCollapsed(!isCollapsed); @@ -61,17 +79,15 @@ function TreeNode({ menuProps.showMoreActionsMenu( e, node, - parentGroup === "" ? group : parentGroup, + parentGroup === "" ? group : parentGroup ); }} /> - {showAccentColor && diagramEditorReady && ( + {settings.editorShowAccentColors.value && (
)} @@ -84,9 +100,6 @@ function TreeNode({ depth={depth + 1} parentGroup={group} currentFilename={currentFilename} - showAccentColor={showAccentColor} - diagramEditorReady={diagramEditorReady} - actionNodesData={actionNodesData} handleFileClick={handleFileClick} handleFolderClick={handleFolderClick} menuProps={menuProps} diff --git a/frontend/src/components/options/Options.tsx b/frontend/src/components/options/Options.tsx index 1f4daf768..ff3d6c4fd 100644 --- a/frontend/src/components/options/Options.tsx +++ b/frontend/src/components/options/Options.tsx @@ -3,8 +3,8 @@ import { createContext, useState } from "react"; const OptionsContext = createContext({ editorShowAccentColors: { setter: () => {}, - value: true, - default_value: true, + value: false, + default_value: false, }, theme: { setter: () => {}, value: "dark", default_value: "dark" }, btOrder: { @@ -30,7 +30,7 @@ export interface SettingsData { const OptionsProvider = ({ children }: { children: any }) => { // TODO: try to not repeat the default values - const [editorShowAccentColors, setEditorShowAccentColors] = useState(true); + const [editorShowAccentColors, setEditorShowAccentColors] = useState(false); const [theme, setTheme] = useState("dark"); const [btOrder, setBtOrder] = useState("bottom-to-top"); @@ -39,7 +39,7 @@ const OptionsProvider = ({ children }: { children: any }) => { editorShowAccentColors: { setter: setEditorShowAccentColors, value: editorShowAccentColors, - default_value: true, + default_value: false, }, theme: { setter: setTheme, value: theme, default_value: "dark" }, btOrder: { diff --git a/frontend/src/components/settings_popup/SettingsModal.jsx b/frontend/src/components/settings_popup/SettingsModal.jsx index 8d92ebd77..25005aff6 100644 --- a/frontend/src/components/settings_popup/SettingsModal.jsx +++ b/frontend/src/components/settings_popup/SettingsModal.jsx @@ -17,15 +17,9 @@ import { OptionsContext } from "../options/Options"; import { saveProjectConfig } from "./../../api_helper/TreeWrapper"; const SettingsModal = ({ onSubmit, isOpen, onClose, currentProjectname }) => { - const [color, setColor] = useColor("rgb(128 0 128)"); - const [open, setOpen] = useState(false); - + // const [color, setColor] = useColor("rgb(128 0 128)"); const settings = React.useContext(OptionsContext); - useEffect(() => { - // Load settings - }, [isOpen]); - // useEffect(() => { // console.log("rgb("+Math.round(color.rgb.r)+","+Math.round(color.rgb.g)+","+Math.round(color.rgb.b)+")") // document.documentElement.style.setProperty("--header", "rgb("+Math.round(color.rgb.r)+","+Math.round(color.rgb.g)+","+Math.round(color.rgb.b)+")"); From b88fb431737596ce8c65c55e15d51efcbf3ee67b Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 10 Jan 2025 15:01:30 +0100 Subject: [PATCH 8/9] Disable accent color --- .../src/components/file_browser/file_explorer/TreeNode.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/file_browser/file_explorer/TreeNode.tsx b/frontend/src/components/file_browser/file_explorer/TreeNode.tsx index cd2dc931a..da3fa89df 100644 --- a/frontend/src/components/file_browser/file_explorer/TreeNode.tsx +++ b/frontend/src/components/file_browser/file_explorer/TreeNode.tsx @@ -43,7 +43,7 @@ function TreeNode({ } } }, []); - + const handleClick = () => { if (node.is_dir) { setCollapsed(!isCollapsed); @@ -87,7 +87,8 @@ function TreeNode({
)} From 4ce073e80c5ae3f214bfce96535ea314cd820c1b Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 10 Jan 2025 15:01:46 +0100 Subject: [PATCH 9/9] Linter --- .../src/components/file_browser/file_explorer/TreeNode.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/file_browser/file_explorer/TreeNode.tsx b/frontend/src/components/file_browser/file_explorer/TreeNode.tsx index da3fa89df..384bc102b 100644 --- a/frontend/src/components/file_browser/file_explorer/TreeNode.tsx +++ b/frontend/src/components/file_browser/file_explorer/TreeNode.tsx @@ -4,9 +4,7 @@ import { ReactComponent as ActionIcon } from "./img/action.svg"; import FileIcon from "./FileIcon.jsx"; import { OptionsContext } from "../../options/Options"; import { ContextMenuProps } from "./MoreActionsMenu"; -import { - getActionFrame, -} from "../../helper/TreeEditorHelper"; +import { getActionFrame } from "../../helper/TreeEditorHelper"; interface Entry { name: string; @@ -79,7 +77,7 @@ function TreeNode({ menuProps.showMoreActionsMenu( e, node, - parentGroup === "" ? group : parentGroup + parentGroup === "" ? group : parentGroup, ); }} />