diff --git a/src/components/app.scss b/src/components/app.scss index 222fb4e..f6c243c 100644 --- a/src/components/app.scss +++ b/src/components/app.scss @@ -216,9 +216,10 @@ } } .sequences { - padding: 5px; + padding: 5px 0; .sequence { + padding: 0 5px; cursor: pointer; &.highlighted { diff --git a/src/components/app.tsx b/src/components/app.tsx index c09777d..d90d638 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -387,6 +387,8 @@ export const App = () => { } }, [highlightOutput, setHighlightOutput, setSelectedNodeId]); + const handleClearHighlightOutput = () => setHighlightOutput(undefined); + const uiForGenerate = () => { const playLabel = generationMode === "playing" ? "Pause" : (generationMode === "paused" ? "Resume" : "Play"); const PlayOrPauseIcon = generationMode === "playing" ? PauseIcon : PlayIcon; @@ -624,6 +626,7 @@ export const App = () => { fitViewAt={fitViewAt} recenterViewAt={recenterViewAt} onDimensions={handleDimensionChange} + onClearHighlightOutput={handleClearHighlightOutput} /> : void; onRecenterView: () => void; onDimensions?: (dimensions: {width: number, height: number}) => void; + onClearHighlightOutput?: () => void; } const keepPunctuationRegex = /[.,?!:;]/g; @@ -41,7 +42,7 @@ const removePunctuationRegex = /["(){}[\]_+=|\\/><]/g; export const Drawing = (props: Props) => { const {highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes, highlightOutputNodes, graph, setGraph, setHighlightNode, setSelectedNodeId: _setSelectedNodeId, - fitViewAt, recenterViewAt, + fitViewAt, recenterViewAt, onClearHighlightOutput, selectedNodeId, animating, onReset, onReturnToMainMenu, onFitView, onRecenterView} = props; const [drawingMode, setDrawingMode] = useState("select"); const [firstEdgeNode, setFirstEdgeNode] = useState(undefined); @@ -120,6 +121,7 @@ export const Drawing = (props: Props) => { }, [drawingMode, textAreaRef]); const handleToolSelected = (tool: Tool) => { + onClearHighlightOutput?.(); if (drawingTools.includes(tool)) { setDrawingMode(tool as DrawingMode); setAutoArrange(tool === "addText");