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

better looking simulation

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-18 22:43:52 +02:00
parent f80086727c
commit b8bc977a8e
6 changed files with 44 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/VisualEditor/VisualEditor.css
View file

@ -46,7 +46,7 @@
/* fill-opacity: 0.2; */
/* stroke: rgb(100, 149, 237); */
/* stroke: */
filter: drop-shadow( 0px 0px 6px rgba(0, 150, 255, 0.8));
filter: drop-shadow( 0px 0px 6px rgba(128, 72, 0, 0.856));
/* stroke-width: 3px; */
}

16
src/VisualEditor/VisualEditor.tsx
View file

@ -61,14 +61,16 @@ export const sides: [RountanglePart, (r:Rect2D)=>Line2D][] = [
export type InsertMode = "and"|"or"|"pseudo"|"shallow"|"deep"|"transition"|"text";
type VisualEditorProps = {
ast: Statechart,
setAST: Dispatch<SetStateAction<Statechart>>,
rt: BigStep|undefined,
errors: TraceableError[],
setErrors: Dispatch<SetStateAction<TraceableError[]>>,
mode: InsertMode,
highlightActive: Set<string>,
};
export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditorProps) {
export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highlightActive}: VisualEditorProps) {
const [historyState, setHistoryState] = useState<HistoryState>({current: emptyState, history: [], future: []});
const state = historyState.current;
@ -680,6 +682,8 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
const active = rt?.mode || new Set();
console.log(highlightActive);
const rootErrors = errors.filter(({shapeUid}) => shapeUid === "root").map(({message}) => message);
return <svg width="4000px" height="4000px"
@ -711,8 +715,8 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
{(rootErrors.length>0) && <text className="error" x={5} y={20}>{rootErrors.join(' ')}</text>}
{state.rountangles.map(rountangle =>
<RountangleSVG
{state.rountangles.map(rountangle => {
return <RountangleSVG
key={rountangle.uid}
rountangle={rountangle}
selected={selection.find(r => r.uid === rountangle.uid)?.parts || []}
@ -720,8 +724,8 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
errors={errors
.filter(({shapeUid}) => shapeUid === rountangle.uid)
.map(({message}) => message)}
active={active.has(rountangle.uid)}
/>)}
active={highlightActive.has(rountangle.uid)}
/>})}
{state.diamonds.map(diamond => <>
<DiamondSVG
@ -732,7 +736,7 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
errors={errors
.filter(({shapeUid}) => shapeUid === diamond.uid)
.map(({message}) => message)}
active={active.has(diamond.uid)}/>
active={false}/>
</>)}
{state.history.map(history => <>