diff --git a/src/factories/flowRunState.ts b/src/factories/flowRunState.ts index 410068cc..18db773f 100644 --- a/src/factories/flowRunState.ts +++ b/src/factories/flowRunState.ts @@ -5,7 +5,7 @@ import { waitForApplication, waitForViewport } from '@/objects' import { waitForConfig } from '@/objects/config' import { emitter } from '@/objects/events' import { waitForScale } from '@/objects/scale' -import { selectItem } from '@/objects/selection' +import { isSelected, selectItem } from '@/objects/selection' import { layout } from '@/objects/settings' export type FlowRunStateFactory = Awaited> @@ -32,29 +32,23 @@ export async function flowRunStateFactory(state: RunGraphStateEvent, options?: F const area = await rectangleFactory() let end: Date | null = options?.end ?? null - let isHovered = false + let hovered = false + let selected = false element.addChild(area) element.addChild(bar) - emitter.on('viewportMoved', () => render()) - emitter.on('scaleUpdated', updated => { - scale = updated - render() - }) - bar.eventMode = 'static' bar.cursor = 'pointer' bar.on('mouseover', () => { - isHovered = true + hovered = true render() }) bar.on('mouseleave', () => { - isHovered = false + hovered = false render() }) - bar.on('click', clickEvent => { - clickEvent.stopPropagation() + bar.on('click', () => { const position = { x: bar.position.x, y: bar.position.y, @@ -65,6 +59,20 @@ export async function flowRunStateFactory(state: RunGraphStateEvent, options?: F selectItem({ ...state, kind: 'state', position }) }) + emitter.on('viewportMoved', () => render()) + emitter.on('scaleUpdated', updated => { + scale = updated + render() + }) + emitter.on('itemSelected', item => { + const isCurrentlySelected = isSelected({ kind: 'state', ...state }) + + if (isCurrentlySelected !== selected) { + selected = isCurrentlySelected + render() + } + }) + function render(newOptions?: FlowRunStateFactoryOptions): void { if (newOptions) { const { end: newEnd } = newOptions @@ -101,7 +109,7 @@ export async function flowRunStateFactory(state: RunGraphStateEvent, options?: F function renderBar({ x, width, background }: StateRectangleRenderProps): void { const { flowStateBarHeight, flowStateSelectedBarHeight } = config.styles - const height = isHovered ? flowStateSelectedBarHeight : flowStateBarHeight + const height = hovered || selected ? flowStateSelectedBarHeight : flowStateBarHeight bar.x = x bar.y = application.screen.height - height