research/statebuddy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better looking connection editor

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-30 17:22:23 +01:00
parent 8ac5a730cc
commit d893476d1b
1 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/App/App.tsx
View file

@ -464,9 +464,10 @@ function ConnEditor(ast: Statechart, plant: Plant<any>, plantConns: Conns, setPl
const scInputs = <>{ast.inputEvents.map(e => <option key={'sc.'+e.event} value={'sc.'+e.event}>sc.{e.event}</option>)}</>; const scInputs = <>{ast.inputEvents.map(e => <option key={'sc.'+e.event} value={'sc.'+e.event}>sc.{e.event}</option>)}</>;
return <> return <>
{/* Plant UI events can go to SC or to Plant */} {/* Plant UI events can go to SC or to Plant */}
{plant.uiEvents.map(e => <div> {plant.uiEvents.map(e => <div style={{width:'100%', textAlign:'right'}}>
<label htmlFor={`select-dst-plant-ui-${e.event}`}>ui.{e.event}&nbsp;→&nbsp;</label> <label htmlFor={`select-dst-plant-ui-${e.event}`} style={{width:'50%'}}>ui.{e.event}&nbsp;→&nbsp;</label>
<select id={`select-dst-plant-ui-${e.event}`} <select id={`select-dst-plant-ui-${e.event}`}
style={{width:'50%'}}
value={plantConns['plant.ui.'+e.event]?.join('.')} value={plantConns['plant.ui.'+e.event]?.join('.')}
onChange={domEvent => setPlantConns(conns => ({...conns, [`plant.ui.${e.event}`]: domEvent.target.value.split('.') as [string,string]}))}> onChange={domEvent => setPlantConns(conns => ({...conns, [`plant.ui.${e.event}`]: domEvent.target.value.split('.') as [string,string]}))}>
<option key="none" value=""></option> <option key="none" value=""></option>
@ -476,9 +477,10 @@ function ConnEditor(ast: Statechart, plant: Plant<any>, plantConns: Conns, setPl
</div>)} </div>)}
{/* SC output events can go to Plant */} {/* SC output events can go to Plant */}
{[...ast.outputEvents].map(e => <div> {[...ast.outputEvents].map(e => <div style={{width:'100%', textAlign:'right'}}>
<label htmlFor={`select-dst-sc-${e}`}>sc.{e}&nbsp;→&nbsp;</label> <label htmlFor={`select-dst-sc-${e}`} style={{width:'50%'}}>sc.{e}&nbsp;→&nbsp;</label>
<select id={`select-dst-sc-${e}`} <select id={`select-dst-sc-${e}`}
style={{width:'50%'}}
value={plantConns['sc.'+e]?.join('.')} value={plantConns['sc.'+e]?.join('.')}
onChange={domEvent => setPlantConns(conns => ({...conns, [`sc.${e}`]: domEvent.target.value.split('.') as [string,string]}))}> onChange={domEvent => setPlantConns(conns => ({...conns, [`sc.${e}`]: domEvent.target.value.split('.') as [string,string]}))}>
<option key="none" value=""></option> <option key="none" value=""></option>
@ -487,9 +489,10 @@ function ConnEditor(ast: Statechart, plant: Plant<any>, plantConns: Conns, setPl
</div>)} </div>)}
{/* Plant output events can go to Statechart */} {/* Plant output events can go to Statechart */}
{[...plant.outputEvents.map(e => <div> {[...plant.outputEvents.map(e => <div style={{width:'100%', textAlign:'right'}}>
<label htmlFor={`select-dst-plant-${e.event}`}>plant.{e.event}&nbsp;→&nbsp;</label> <label htmlFor={`select-dst-plant-${e.event}`} style={{width:'50%'}}>plant.{e.event}&nbsp;→&nbsp;</label>
<select id={`select-dst-plant-${e.event}`} <select id={`select-dst-plant-${e.event}`}
style={{width:'50%'}}
value={plantConns['plant.'+e.event]?.join('.')} value={plantConns['plant.'+e.event]?.join('.')}
onChange={(domEvent => setPlantConns(conns => ({...conns, [`plant.${e.event}`]: domEvent.target.value.split('.') as [string,string]})))}> onChange={(domEvent => setPlantConns(conns => ({...conns, [`plant.${e.event}`]: domEvent.target.value.split('.') as [string,string]})))}>
<option key="none" value=""></option> <option key="none" value=""></option>