From b55cba198e9cb61e226d83afed48e6a004cb204c Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Fri, 17 Oct 2025 14:37:26 +0200 Subject: [PATCH 1/2] parser and editor use same code for figuring out what is connected to what --- src/VisualEditor/HistorySVG.tsx | 16 ++- src/VisualEditor/VisualEditor.css | 7 +- src/VisualEditor/VisualEditor.tsx | 135 +++++++++++--------------- src/statecharts/concrete_syntax.ts | 20 +++- src/statecharts/detect_connections.ts | 84 ++++++++++++++++ src/statecharts/parser.ts | 115 +++++++++++----------- 6 files changed, 228 insertions(+), 149 deletions(-) create mode 100644 src/statecharts/detect_connections.ts diff --git a/src/VisualEditor/HistorySVG.tsx b/src/VisualEditor/HistorySVG.tsx index 2e031d9..6ca1be1 100644 --- a/src/VisualEditor/HistorySVG.tsx +++ b/src/VisualEditor/HistorySVG.tsx @@ -1,11 +1,10 @@ import { Vec2D } from "./geometry"; import { HISTORY_RADIUS } from "./parameters"; -export function HistorySVG(props: {uid: string, topLeft: Vec2D, kind: "shallow"|"deep", selected: boolean}) { +export function HistorySVG(props: {uid: string, topLeft: Vec2D, kind: "shallow"|"deep", selected: boolean, highlight: boolean}) { const text = props.kind === "shallow" ? "H" : "H*"; return <> {text} @@ -29,5 +28,14 @@ export function HistorySVG(props: {uid: string, topLeft: Vec2D, kind: "shallow"| data-uid={props.uid} data-parts="history" /> + {(props.selected || props.highlight) && + } ; -} \ No newline at end of file +} diff --git a/src/VisualEditor/VisualEditor.css b/src/VisualEditor/VisualEditor.css index d9ee73d..62268c1 100644 --- a/src/VisualEditor/VisualEditor.css +++ b/src/VisualEditor/VisualEditor.css @@ -44,7 +44,6 @@ .rountangle.active { fill: darkorange; fill-opacity: 0.2; - /* filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); */ stroke-width: 3px; } @@ -131,8 +130,6 @@ text.helper:hover { } .draggableText, .draggableText.highlight { - /* text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; */ - /* -webkit-text-stroke: 4px white; */ paint-order: stroke; stroke: white; stroke-width: 4px; @@ -140,7 +137,6 @@ text.helper:hover { stroke-linejoin: miter; stroke-opacity: 1; fill-opacity:1; - /* font-weight: 800; */ } .draggableText.highlight:not(.selected) { @@ -148,9 +144,10 @@ text.helper:hover { font-weight: 600; } -.highlight:not(.selected) { +.highlight:not(.selected):not(text) { stroke: green; stroke-width: 3px; + fill: none; } .arrow.error { diff --git a/src/VisualEditor/VisualEditor.tsx b/src/VisualEditor/VisualEditor.tsx index 4e3ce6d..098ef44 100644 --- a/src/VisualEditor/VisualEditor.tsx +++ b/src/VisualEditor/VisualEditor.tsx @@ -1,20 +1,21 @@ import * as lz4 from "@nick/lz4"; -import { Dispatch, SetStateAction, useEffect, useRef, useState, MouseEvent } from "react"; +import { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from "react"; import { Statechart } from "../statecharts/abstract_syntax"; -import { Arrow, ArrowPart, Diamond, Rountangle, RountanglePart, Text, VisualEditorState, emptyState, findNearestArrow, findNearestSide, findRountangle } from "../statecharts/concrete_syntax"; +import { Arrow, ArrowPart, Diamond, History, Rountangle, RountanglePart, Text, VisualEditorState, emptyState } from "../statecharts/concrete_syntax"; import { parseStatechart, TraceableError } from "../statecharts/parser"; import { BigStep } from "../statecharts/runtime_types"; import { ArcDirection, Line2D, Rect2D, Vec2D, addV2D, arcDirection, area, getBottomSide, getLeftSide, getRightSide, getTopSide, isEntirelyWithin, normalizeRect, subtractV2D, transformLine, transformRect } from "./geometry"; import { MIN_ROUNTANGLE_SIZE } from "./parameters"; import { getBBoxInSvgCoords } from "./svg_helper"; - -import "./VisualEditor.css"; import { ArrowSVG } from "./ArrowSVG"; import { RountangleSVG } from "./RountangleSVG"; import { TextSVG } from "./TextSVG"; import { DiamondSVG } from "./DiamondSVG"; import { HistorySVG } from "./HistorySVG"; +import { detectConnections } from "../statecharts/detect_connections"; + +import "./VisualEditor.css"; type DraggingState = { @@ -142,28 +143,22 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor }, []); useEffect(() => { - // delay is necessary for 2 reasons: - // 1) it's a hack - prevents us from writing the initial state to localstorage (before having recovered the state that was in localstorage) - // 2) performance: only save when the user does nothing const timeout = setTimeout(() => { const stateBuffer = new TextEncoder().encode(JSON.stringify(state)); const compressedStateBuffer = lz4.compress(stateBuffer); const compressedStateString = compressedStateBuffer.toBase64(); window.location.hash = "#"+compressedStateString; - - // const [statechart, errors] = parseStatechart(state); - // setErrors(errors); - // setAST(statechart); }, 200); return () => clearTimeout(timeout); }, [state]); + const conns = useMemo(() => detectConnections(state), [state]); + useEffect(() => { - const [statechart, errors] = parseStatechart(state); + const [statechart, errors] = parseStatechart(state, conns); setErrors(errors); setAST(statechart); }, [state]) - function getCurrentPointer(e: {pageX: number, pageY: number}) { const bbox = refSVG.current!.getBoundingClientRect(); @@ -514,90 +509,50 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor }; }, [selectingState, dragging]); - // detect what is 'connected' - const arrow2SideMap = new Map(); - const side2ArrowMap = new Map>(); - const text2ArrowMap = new Map(); - const arrow2TextMap = new Map(); - const text2RountangleMap = new Map(); - const rountangle2TextMap = new Map(); - - // arrow <-> (rountangle | diamond) - for (const arrow of state.arrows) { - const sides = [...state.rountangles, ...state.diamonds]; - const startSide = findNearestSide(arrow, "start", sides); - const endSide = findNearestSide(arrow, "end", sides); - if (startSide || endSide) { - arrow2SideMap.set(arrow.uid, [startSide, endSide]); - } - if (startSide) { - const arrowConns = side2ArrowMap.get(startSide.uid + '/' + startSide.part) || new Set(); - arrowConns.add(["start", arrow.uid]); - side2ArrowMap.set(startSide.uid + '/' + startSide.part, arrowConns); - } - if (endSide) { - const arrowConns = side2ArrowMap.get(endSide.uid + '/' + endSide.part) || new Set(); - arrowConns.add(["end", arrow.uid]); - side2ArrowMap.set(endSide.uid + '/' + endSide.part, arrowConns); - } - } - // text <-> arrow - for (const text of state.texts) { - const nearestArrow = findNearestArrow(text.topLeft, state.arrows); - if (nearestArrow) { - // prioritize text belonging to arrows: - text2ArrowMap.set(text.uid, nearestArrow.uid); - const textsOfArrow = arrow2TextMap.get(nearestArrow.uid) || []; - textsOfArrow.push(text.uid); - arrow2TextMap.set(nearestArrow.uid, textsOfArrow); - } - else { - // text <-> rountangle - const rountangle = findRountangle(text.topLeft, state.rountangles); - if (rountangle) { - text2RountangleMap.set(text.uid, rountangle.uid); - const texts = rountangle2TextMap.get(rountangle.uid) || []; - texts.push(text.uid); - rountangle2TextMap.set(rountangle.uid, texts); - } - } - } - // for visual feedback, when selecting/moving one thing, we also highlight (in green) all the things that belong to the thing we selected. const sidesToHighlight: {[key: string]: RountanglePart[]} = {}; const arrowsToHighlight: {[key: string]: boolean} = {}; const textsToHighlight: {[key: string]: boolean} = {}; const rountanglesToHighlight: {[key: string]: boolean} = {}; + const historyToHighlight: {[key: string]: boolean} = {}; for (const selected of selection) { - const sides = arrow2SideMap.get(selected.uid); + const sides = conns.arrow2SideMap.get(selected.uid); if (sides) { const [startSide, endSide] = sides; if (startSide) sidesToHighlight[startSide.uid] = [...sidesToHighlight[startSide.uid]||[], startSide.part]; if (endSide) sidesToHighlight[endSide.uid] = [...sidesToHighlight[endSide.uid]||[], endSide.part]; } const texts = [ - ...(arrow2TextMap.get(selected.uid) || []), - ...(rountangle2TextMap.get(selected.uid) || []), + ...(conns.arrow2TextMap.get(selected.uid) || []), + ...(conns.rountangle2TextMap.get(selected.uid) || []), ]; for (const textUid of texts) { textsToHighlight[textUid] = true; } for (const part of selected.parts) { - const arrows = side2ArrowMap.get(selected.uid + '/' + part) || []; + const arrows = conns.side2ArrowMap.get(selected.uid + '/' + part) || []; if (arrows) { for (const [arrowPart, arrowUid] of arrows) { arrowsToHighlight[arrowUid] = true; } } } - const arrow2 = text2ArrowMap.get(selected.uid); + const arrow2 = conns.text2ArrowMap.get(selected.uid); if (arrow2) { arrowsToHighlight[arrow2] = true; } - const rountangleUid = text2RountangleMap.get(selected.uid) + const rountangleUid = conns.text2RountangleMap.get(selected.uid) if (rountangleUid) { rountanglesToHighlight[rountangleUid] = true; } + const history = conns.arrow2HistoryMap.get(selected.uid); + if (history) { + historyToHighlight[history] = true; + } + const arrow3 = conns.history2ArrowMap.get(selected.uid) || []; + for (const arrow of arrow3) { + arrowsToHighlight[arrow] = true; + } } function onPaste(e: ClipboardEvent) { @@ -619,6 +574,11 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor uid: (nextID++).toString(), topLeft: addV2D(r.topLeft, offset), } as Rountangle)); + const copiedDiamonds: Diamond[] = parsed.diamonds.map((r: Diamond) => ({ + ...r, + uid: (nextID++).toString(), + topLeft: addV2D(r.topLeft, offset), + } as Diamond)); const copiedArrows: Arrow[] = parsed.arrows.map((a: Arrow) => ({ ...a, uid: (nextID++).toString(), @@ -630,18 +590,27 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor uid: (nextID++).toString(), topLeft: addV2D(t.topLeft, offset), } as Text)); + const copiedHistories: History[] = parsed.history.map((h: History) => ({ + ...h, + uid: (nextID++).toString(), + topLeft: addV2D(h.topLeft, offset), + })) setState(state => ({ ...state, rountangles: [...state.rountangles, ...copiedRountangles], + diamonds: [...state.diamonds, ...copiedDiamonds], arrows: [...state.arrows, ...copiedArrows], texts: [...state.texts, ...copiedTexts], + history: [...state.history, ...copiedHistories], nextID: nextID, })); // @ts-ignore const newSelection: Selection = [ ...copiedRountangles.map(r => ({uid: r.uid, parts: ["left", "top", "right", "bottom"]})), + ...copiedDiamonds.map(d => ({uid: d.uid, parts: ["left", "top", "right", "bottom"]})), ...copiedArrows.map(a => ({uid: a.uid, parts: ["start", "end"]})), ...copiedTexts.map(t => ({uid: t.uid, parts: ["text"]})), + ...copiedHistories.map(h => ({uid: h.uid, parts: ["history"]})), ]; setSelection(newSelection); // copyInternal(newSelection, e); // doesn't work @@ -655,10 +624,14 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor function copyInternal(selection: Selection, e: ClipboardEvent) { const uidsToCopy = new Set(selection.map(shape => shape.uid)); const rountanglesToCopy = state.rountangles.filter(r => uidsToCopy.has(r.uid)); + const diamondsToCopy = state.diamonds.filter(d => uidsToCopy.has(d.uid)); + const historiesToCopy = state.history.filter(h => uidsToCopy.has(h.uid)); const arrowsToCopy = state.arrows.filter(a => uidsToCopy.has(a.uid)); const textsToCopy = state.texts.filter(t => uidsToCopy.has(t.uid)); e.clipboardData?.setData("text/plain", JSON.stringify({ rountangles: rountanglesToCopy, + diamonds: diamondsToCopy, + history: historiesToCopy, arrows: arrowsToCopy, texts: textsToCopy, })); @@ -739,15 +712,16 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor {(rootErrors.length>0) && {rootErrors.join(' ')}} - {state.rountangles.map(rountangle => r.uid === rountangle.uid)?.parts || []} - highlight={[...(sidesToHighlight[rountangle.uid] || []), ...(rountanglesToHighlight[rountangle.uid]?["left","right","top","bottom"]:[]) as RountanglePart[]]} - errors={errors - .filter(({shapeUid}) => shapeUid === rountangle.uid) - .map(({message}) => message)} - active={active.has(rountangle.uid)} + {state.rountangles.map(rountangle => + r.uid === rountangle.uid)?.parts || []} + highlight={[...(sidesToHighlight[rountangle.uid] || []), ...(rountanglesToHighlight[rountangle.uid]?["left","right","top","bottom"]:[]) as RountanglePart[]]} + errors={errors + .filter(({shapeUid}) => shapeUid === rountangle.uid) + .map(({message}) => message)} + active={active.has(rountangle.uid)} />)} {state.diamonds.map(diamond => <> @@ -763,11 +737,14 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor )} {state.history.map(history => <> - h.uid === history.uid)} /> + h.uid === history.uid))} + highlight={Boolean(historyToHighlight[history.uid])} + /> )} {state.arrows.map(arrow => { - const sides = arrow2SideMap.get(arrow.uid); + const sides = conns.arrow2SideMap.get(arrow.uid); let arc = "no" as ArcDirection; if (sides && sides[0]?.uid === sides[1]?.uid && sides[0]!.uid !== undefined) { arc = arcDirection(sides[0]!.part, sides[1]!.part); diff --git a/src/statecharts/concrete_syntax.ts b/src/statecharts/concrete_syntax.ts index 1e35785..b4b45af 100644 --- a/src/statecharts/concrete_syntax.ts +++ b/src/statecharts/concrete_syntax.ts @@ -1,5 +1,5 @@ -import { Rect2D, Vec2D, Line2D, euclideanDistance, intersectLines, isWithin, lineBBox } from "../VisualEditor/geometry"; -import { ARROW_SNAP_THRESHOLD, TEXT_SNAP_THRESHOLD } from "../VisualEditor/parameters"; +import { Rect2D, Vec2D, Line2D, euclideanDistance, intersectLines, isWithin, lineBBox, subtractV2D } from "../VisualEditor/geometry"; +import { ARROW_SNAP_THRESHOLD, HISTORY_RADIUS, TEXT_SNAP_THRESHOLD } from "../VisualEditor/parameters"; import { sides } from "../VisualEditor/VisualEditor"; export type Rountangle = { @@ -115,3 +115,19 @@ export function findRountangle(point: Vec2D, candidates: Rountangle[]): Rountang } } } + +export function findNearestHistory(point: Vec2D, candidates: History[]): History | undefined { + let best; + let bestDistance = Infinity; + for (const h of candidates) { + const diff = subtractV2D(point, {x: h.topLeft.x+HISTORY_RADIUS, y: h.topLeft.y+HISTORY_RADIUS}); + const euclideanDistance = Math.hypot(diff.x, diff.y) - HISTORY_RADIUS; + if (euclideanDistance < ARROW_SNAP_THRESHOLD) { + if (euclideanDistance < bestDistance) { + best = h; + bestDistance = euclideanDistance; + } + } + } + return best; +} diff --git a/src/statecharts/detect_connections.ts b/src/statecharts/detect_connections.ts new file mode 100644 index 0000000..b5bbb4d --- /dev/null +++ b/src/statecharts/detect_connections.ts @@ -0,0 +1,84 @@ +import { findNearestArrow, findNearestHistory, findNearestSide, findRountangle, RountanglePart, VisualEditorState } from "./concrete_syntax"; + +export type Connections = { + arrow2SideMap: Map, + side2ArrowMap: Map>, + text2ArrowMap: Map, + arrow2TextMap: Map, + arrow2HistoryMap: Map, + text2RountangleMap: Map, + rountangle2TextMap: Map, + history2ArrowMap: Map, +} + +export function detectConnections(state: VisualEditorState): Connections { + // detect what is 'connected' + const arrow2SideMap = new Map(); + const side2ArrowMap = new Map>(); + const text2ArrowMap = new Map(); + const arrow2TextMap = new Map(); + const arrow2HistoryMap = new Map(); + const text2RountangleMap = new Map(); + const rountangle2TextMap = new Map(); + const history2ArrowMap = new Map(); + + // arrow <-> (rountangle | diamond) + for (const arrow of state.arrows) { + // snap to history: + const historyTarget = findNearestHistory(arrow.end, state.history); + if (historyTarget) { + arrow2HistoryMap.set(arrow.uid, historyTarget.uid); + history2ArrowMap.set(historyTarget.uid, [...(history2ArrowMap.get(historyTarget.uid) || []), arrow.uid]); + } + + // snap to rountangle/diamon side: + const sides = [...state.rountangles, ...state.diamonds]; + const startSide = findNearestSide(arrow, "start", sides); + const endSide = historyTarget ? undefined : findNearestSide(arrow, "end", sides); + if (startSide || endSide) { + arrow2SideMap.set(arrow.uid, [startSide, endSide]); + } + if (startSide) { + const arrowConns = side2ArrowMap.get(startSide.uid + '/' + startSide.part) || new Set(); + arrowConns.add(["start", arrow.uid]); + side2ArrowMap.set(startSide.uid + '/' + startSide.part, arrowConns); + } + if (endSide) { + const arrowConns = side2ArrowMap.get(endSide.uid + '/' + endSide.part) || new Set(); + arrowConns.add(["end", arrow.uid]); + side2ArrowMap.set(endSide.uid + '/' + endSide.part, arrowConns); + } + } + // text <-> arrow + for (const text of state.texts) { + const nearestArrow = findNearestArrow(text.topLeft, state.arrows); + if (nearestArrow) { + // prioritize text belonging to arrows: + text2ArrowMap.set(text.uid, nearestArrow.uid); + const textsOfArrow = arrow2TextMap.get(nearestArrow.uid) || []; + textsOfArrow.push(text.uid); + arrow2TextMap.set(nearestArrow.uid, textsOfArrow); + } + else { + // text <-> rountangle + const rountangle = findRountangle(text.topLeft, state.rountangles); + if (rountangle) { + text2RountangleMap.set(text.uid, rountangle.uid); + const texts = rountangle2TextMap.get(rountangle.uid) || []; + texts.push(text.uid); + rountangle2TextMap.set(rountangle.uid, texts); + } + } + } + + return { + arrow2SideMap, + side2ArrowMap, + text2ArrowMap, + arrow2TextMap, + arrow2HistoryMap, + text2RountangleMap, + rountangle2TextMap, + history2ArrowMap, + }; +} diff --git a/src/statecharts/parser.ts b/src/statecharts/parser.ts index 8fe35f0..eca8fa0 100644 --- a/src/statecharts/parser.ts +++ b/src/statecharts/parser.ts @@ -1,9 +1,9 @@ -import { AbstractState, ConcreteState, OrState, PseudoState, Statechart, Transition } from "./abstract_syntax"; -import { findNearestArrow, findNearestSide, findRountangle, Rountangle, VisualEditorState } from "./concrete_syntax"; +import { ConcreteState, OrState, PseudoState, Statechart, Transition } from "./abstract_syntax"; +import { Rountangle, VisualEditorState } from "./concrete_syntax"; import { isEntirelyWithin } from "../VisualEditor/geometry"; import { Action, EventTrigger, Expression, ParsedText } from "./label_ast"; - import { parse as parseLabel, SyntaxError } from "./label_parser"; +import { Connections } from "./detect_connections"; export type TraceableError = { shapeUid: string; @@ -29,7 +29,7 @@ function addEvent(events: EventTrigger[], e: EventTrigger, textUid: string) { } } -export function parseStatechart(state: VisualEditorState): [Statechart, TraceableError[]] { +export function parseStatechart(state: VisualEditorState, conns: Connections): [Statechart, TraceableError[]] { const errors: TraceableError[] = []; // implicitly, the root is always an Or-state @@ -120,9 +120,8 @@ export function parseStatechart(state: VisualEditorState): [Statechart, Traceabl const uid2Transition = new Map(); for (const arr of state.arrows) { - const sides = [...state.rountangles, ...state.diamonds]; - const srcUID = findNearestSide(arr, "start", sides)?.uid; - const tgtUID = findNearestSide(arr, "end", sides)?.uid; + const srcUID = conns.arrow2SideMap.get(arr.uid)?.[0]?.uid; + const tgtUID = conns.arrow2SideMap.get(arr.uid)?.[1]?.uid; if (!srcUID) { if (!tgtUID) { // dangling edge @@ -222,73 +221,71 @@ export function parseStatechart(state: VisualEditorState): [Statechart, Traceabl throw e; } } - const belongsToArrow = findNearestArrow(text.topLeft, state.arrows); - if (belongsToArrow) { - const belongsToTransition = uid2Transition.get(belongsToArrow.uid); - if (belongsToTransition) { - const {src} = belongsToTransition; - belongsToTransition.label.push(parsed); - if (parsed.kind === "transitionLabel") { - // collect events - // triggers - if (parsed.trigger.kind === "event") { - if (src.kind === "pseudo") { - errors.push({shapeUid: text.uid, message: "pseudo state outgoing transition must not have event trigger"}); + const belongsToArrowUID = conns.text2ArrowMap.get(text.uid); + const belongsToTransition = uid2Transition.get(belongsToArrowUID!); + if (belongsToTransition) { + const {src} = belongsToTransition; + belongsToTransition.label.push(parsed); + if (parsed.kind === "transitionLabel") { + // collect events + // triggers + if (parsed.trigger.kind === "event") { + if (src.kind === "pseudo") { + errors.push({shapeUid: text.uid, message: "pseudo state outgoing transition must not have event trigger"}); + } + else { + const {event} = parsed.trigger; + if (event.startsWith("_")) { + errors.push(...addEvent(internalEvents, parsed.trigger, parsed.uid)); } else { - const {event} = parsed.trigger; - if (event.startsWith("_")) { - errors.push(...addEvent(internalEvents, parsed.trigger, parsed.uid)); - } - else { - errors.push(...addEvent(inputEvents, parsed.trigger, parsed.uid)); - } + errors.push(...addEvent(inputEvents, parsed.trigger, parsed.uid)); } } - else if (parsed.trigger.kind === "after") { - if (src.kind === "pseudo") { - errors.push({shapeUid: text.uid, message: "pseudo state outgoing transition must not have after-trigger"}); - } - else { - src.timers.push(parsed.trigger.durationMs); - src.timers.sort(); - } + } + else if (parsed.trigger.kind === "after") { + if (src.kind === "pseudo") { + errors.push({shapeUid: text.uid, message: "pseudo state outgoing transition must not have after-trigger"}); } - else if (["entry", "exit"].includes(parsed.trigger.kind)) { - errors.push({shapeUid: text.uid, message: "entry/exit trigger not allowed on transitions"}); + else { + src.timers.push(parsed.trigger.durationMs); + src.timers.sort(); } - else if (parsed.trigger.kind === "triggerless") { - if (src.kind !== "pseudo") { - errors.push({shapeUid: text.uid, message: "triggerless transitions only allowed on pseudo-states"}); - } + } + else if (["entry", "exit"].includes(parsed.trigger.kind)) { + errors.push({shapeUid: text.uid, message: "entry/exit trigger not allowed on transitions"}); + } + else if (parsed.trigger.kind === "triggerless") { + if (src.kind !== "pseudo") { + errors.push({shapeUid: text.uid, message: "triggerless transitions only allowed on pseudo-states"}); } + } - // // raise-actions - // for (const action of parsed.actions) { - // if (action.kind === "raise") { - // const {event} = action; - // if (event.startsWith("_")) { - // internalEvents.add(event); - // } - // else { - // outputEvents.add(event); - // } - // } - // } + // // raise-actions + // for (const action of parsed.actions) { + // if (action.kind === "raise") { + // const {event} = action; + // if (event.startsWith("_")) { + // internalEvents.add(event); + // } + // else { + // outputEvents.add(event); + // } + // } + // } - // collect variables - variables = variables.union(findVariables(parsed.guard)); - for (const action of parsed.actions) { - variables = variables.union(findVariablesAction(action)); - } + // collect variables + variables = variables.union(findVariables(parsed.guard)); + for (const action of parsed.actions) { + variables = variables.union(findVariablesAction(action)); } } } else { // text does not belong to transition... // so it belongs to a rountangle (a state) - const rountangle = findRountangle(text.topLeft, state.rountangles); - const belongsToState = rountangle ? uid2State.get(rountangle.uid)! as ConcreteState : root; + const rountangleUID = conns.text2RountangleMap.get(text.uid); + const belongsToState = uid2State.get(rountangleUID!) as ConcreteState || root; if (parsed.kind === "transitionLabel") { // labels belonging to a rountangle (= a state) must by entry/exit actions // if we cannot find a containing state, then it belong to the root From c07489080aa9e5d3484d27fbe3c0a38894759afa Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Fri, 17 Oct 2025 16:48:39 +0200 Subject: [PATCH 2/2] history seems to be working --- src/App/App.tsx | 1 + src/App/ShowAST.tsx | 4 +- src/VisualEditor/VisualEditor.css | 7 +- src/statecharts/abstract_syntax.ts | 42 +++- src/statecharts/interpreter.ts | 365 +++++++++++++++-------------- src/statecharts/parser.ts | 91 ++++--- src/statecharts/runtime_types.ts | 4 +- 7 files changed, 292 insertions(+), 222 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index c84b1a0..16fa9f7 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -52,6 +52,7 @@ export function App() { function appendNewConfig(inputEvent: string, simtime: number, config: BigStepOutput) { setRT([...rt.slice(0, rtIdx!+1), {inputEvent, simtime, ...config}]); setRTIdx(rtIdx!+1); + console.log('new config:', config); } useEffect(() => { diff --git a/src/App/ShowAST.tsx b/src/App/ShowAST.tsx index fe21809..9263ace 100644 --- a/src/App/ShowAST.tsx +++ b/src/App/ShowAST.tsx @@ -39,12 +39,12 @@ export function ShowAST(props: {root: ConcreteState | PseudoState, transitions: return
{props.root.kind}: {description} - {props.root.entryActions.length>0 && + {props.root.kind !== "pseudo" && props.root.entryActions.length>0 && props.root.entryActions.map(action =>
 entry /
) } - {props.root.exitActions.length>0 && + {props.root.kind !== "pseudo" && props.root.exitActions.length>0 && props.root.exitActions.map(action =>
 exit /
) diff --git a/src/VisualEditor/VisualEditor.css b/src/VisualEditor/VisualEditor.css index 62268c1..ca8ce80 100644 --- a/src/VisualEditor/VisualEditor.css +++ b/src/VisualEditor/VisualEditor.css @@ -116,17 +116,18 @@ line.selected, circle.selected { font-weight: 600; } .draggableText:hover:not(:active) { - fill: blue; - cursor: grab; + /* fill: blue; */ + /* cursor: grab; */ } text.helper { fill: rgba(0,0,0,0); stroke: rgba(0,0,0,0); - stroke-width: 8px; + stroke-width: 16px; } text.helper:hover { stroke: blue; stroke-opacity: 0.2; + cursor: grab; } .draggableText, .draggableText.highlight { diff --git a/src/statecharts/abstract_syntax.ts b/src/statecharts/abstract_syntax.ts index 805ce27..574a91f 100644 --- a/src/statecharts/abstract_syntax.ts +++ b/src/statecharts/abstract_syntax.ts @@ -12,6 +12,7 @@ export type AbstractState = { export type StableState = { kind: "and" | "or"; children: ConcreteState[]; + history: HistoryState[]; timers: number[]; // list of timeouts (e.g., the state having an outgoing transition with trigger "after 4s" would appear as the number 4000 in this list) } & AbstractState; @@ -32,12 +33,19 @@ export type PseudoState = { comments: [string, string][]; }; +export type HistoryState = { + kind: "shallow" | "deep"; + parent: ConcreteState; + uid: string; + depth: number; +} + export type ConcreteState = AndState | OrState; export type Transition = { uid: string; // uid of arrow in concrete syntax src: ConcreteState | PseudoState; - tgt: ConcreteState | PseudoState; + tgt: ConcreteState | PseudoState | HistoryState; label: ParsedText[]; } @@ -52,6 +60,8 @@ export type Statechart = { outputEvents: Set; uid2State: Map; + + historyStates: HistoryState[]; } const emptyRoot: OrState = { @@ -60,6 +70,7 @@ const emptyRoot: OrState = { depth: 0, initial: [], children:[], + history: [], comments: [], entryActions: [], exitActions: [], @@ -74,6 +85,7 @@ export const emptyStatechart: Statechart = { internalEvents: [], outputEvents: new Set(), uid2State: new Map([["root", emptyRoot]]), + historyStates: [], }; // reflexive, transitive relation @@ -98,7 +110,7 @@ export function isOverlapping(a: ConcreteState, b: ConcreteState): boolean { } -export function computeLCA(a: ConcreteState, b: ConcreteState): ConcreteState { +export function computeLCA(a: (ConcreteState|HistoryState), b: (ConcreteState|HistoryState)): (ConcreteState|HistoryState) { if (a === b) { return a; } @@ -108,7 +120,7 @@ export function computeLCA(a: ConcreteState, b: ConcreteState): ConcreteState { return computeLCA(a, b.parent!); } -export function computeLCA2(states: ConcreteState[]): ConcreteState { +export function computeLCA2(states: (ConcreteState|HistoryState)[]): (ConcreteState|HistoryState) { if (states.length === 0) { throw new Error("cannot compute LCA of empty set of states"); } @@ -119,7 +131,7 @@ export function computeLCA2(states: ConcreteState[]): ConcreteState { return states.reduce((acc, cur) => computeLCA(acc, cur)); } -export function getPossibleTargets(t: Transition, ts: Map): ConcreteState[] { +export function getPossibleTargets(t: Transition, ts: Map): (ConcreteState|HistoryState)[] { if (t.tgt.kind !== "pseudo") { return [t.tgt]; } @@ -141,7 +153,7 @@ export function computeArena2(t: Transition, ts: Map): OrS // root > A > B > C > D // computePath({ancestor: A, descendant: A}) = [] // computePath({ancestor: A, descendant: C}) = [B, C] -export function computePath({ancestor, descendant}: {ancestor: ConcreteState, descendant: ConcreteState}): ConcreteState[] { +export function computePath({ancestor, descendant}: {ancestor: ConcreteState, descendant: (ConcreteState|HistoryState)}): (ConcreteState|HistoryState)[] { if (ancestor === descendant) { return []; } @@ -187,7 +199,21 @@ export function getDescendants(state: ConcreteState): Set { // the 'description' of a state is a human-readable string that (hopefully) identifies the state. // if the state contains a comment, we take the 'first' (= visually topmost) comment // otherwise we fall back to the state's UID. -export function stateDescription(state: ConcreteState | PseudoState) { - const description = state.comments.length > 0 ? state.comments[0][1] : state.uid; - return description; +export function stateDescription(state: ConcreteState | PseudoState | HistoryState): string { + if (state.kind === "shallow") { + return `shallow(${stateDescription(state.parent)})`; + } + else if (state.kind === "deep") { + return `deep(${stateDescription(state.parent)})`; + } + else { + // @ts-ignore + const description = state.comments.length > 0 ? state.comments[0][1] : state.uid; + return description; + } } + +export function transitionDescription(t: Transition) { + return stateDescription(t.src) + ' ➔ ' + stateDescription(t.tgt); +} + diff --git a/src/statecharts/interpreter.ts b/src/statecharts/interpreter.ts index 2ef2e79..23f59a5 100644 --- a/src/statecharts/interpreter.ts +++ b/src/statecharts/interpreter.ts @@ -1,170 +1,26 @@ -import { computeArena2, computePath, ConcreteState, getDescendants, isOverlapping, OrState, StableState, Statechart, stateDescription, Transition } from "./abstract_syntax"; +import { computeArena2, computePath, ConcreteState, getDescendants, HistoryState, isOverlapping, OrState, StableState, Statechart, stateDescription, Transition, transitionDescription } from "./abstract_syntax"; import { evalExpr } from "./actionlang_interpreter"; import { Action, EventTrigger, TransitionLabel } from "./label_ast"; -import { BigStepOutput, Environment, initialRaised, Mode, RaisedEvents, RT_Event, RT_Statechart, TimerElapseEvent, Timers } from "./runtime_types"; +import { BigStepOutput, Environment, initialRaised, Mode, RaisedEvents, RT_Event, RT_History, RT_Statechart, TimerElapseEvent, Timers } from "./runtime_types"; export function initialize(ast: Statechart): BigStepOutput { - let {enteredStates, environment, ...raised} = enterDefault(0, ast.root, { + let history = new Map(); + let enteredStates, environment, raised; + ({enteredStates, environment, history, ...raised} = enterDefault(0, ast.root, { environment: new Environment([new Map([["_timers", []]])]), + history, ...initialRaised, - }); - return handleInternalEvents(0, ast, {mode: enteredStates, environment, ...raised}); + })); + return handleInternalEvents(0, ast, {mode: enteredStates, environment, history, ...raised}); } type ActionScope = { environment: Environment, + history: RT_History, } & RaisedEvents; type EnteredScope = { enteredStates: Mode } & ActionScope; -export function entryActions(simtime: number, state: ConcreteState, actionScope: ActionScope): ActionScope { - // console.log('enter', stateDescription(state), '...'); - let {environment, ...rest} = actionScope; - // environment = environment.pushScope(); - for (const action of state.entryActions) { - ({environment, ...rest} = execAction(action, {environment, ...rest})); - } - // schedule timers - // we store timers in the environment (dirty!) - environment = environment.transform("_timers", oldTimers => { - const newTimers = [ - ...oldTimers, - ...state.timers.map(timeOffset => { - const futureSimTime = simtime + timeOffset; - return [futureSimTime, {kind: "timer", state: state.uid, timeDurMs: timeOffset}] as [number, TimerElapseEvent]; - }), - ]; - newTimers.sort((a,b) => a[0] - b[0]); - return newTimers; - }, []); - // new nested scope - return {environment, ...rest}; -} - -export function exitActions(simtime: number, state: ConcreteState, actionScope: ActionScope): ActionScope { - // console.log('exit', stateDescription(state), '...'); - for (const action of state.exitActions) { - (actionScope = execAction(action, actionScope)); - } - let environment = actionScope.environment; - // cancel timers - environment = environment.transform("_timers", oldTimers => { - // remove all timers of 'state': - return oldTimers.filter(([_, {state: s}]) => s !== state.uid); - }, []); - // environment = environment.popScope(); - return {...actionScope, environment}; -} - -export function enterDefault(simtime: number, state: ConcreteState, rt: ActionScope): EnteredScope { - let actionScope = rt; - - // execute entry actions - actionScope = entryActions(simtime, state, actionScope); - - // enter children... - let enteredStates = new Set([state.uid]); - if (state.kind === "and") { - // enter every child - for (const child of state.children) { - let enteredChildren; - ({enteredStates: enteredChildren, ...actionScope} = enterDefault(simtime, child, actionScope)); - enteredStates = enteredStates.union(enteredChildren); - } - } - else if (state.kind === "or") { - // same as AND-state, but we only enter the initial state(s) - if (state.initial.length > 0) { - if (state.initial.length > 1) { - console.warn(state.uid + ': multiple initial states, only entering one of them'); - } - let enteredChildren; - ({enteredStates: enteredChildren, ...actionScope} = enterDefault(simtime, state.initial[0][1], actionScope)); - enteredStates = enteredStates.union(enteredChildren); - } - console.warn(state.uid + ': no initial state'); - } - - return {enteredStates, ...actionScope}; -} - -export function enterPath(simtime: number, path: ConcreteState[], rt: ActionScope): EnteredScope { - let actionScope = rt; - - const [state, ...rest] = path; - - // execute entry actions - actionScope = entryActions(simtime, state, actionScope); - - // enter children... - let enteredStates = new Set([state.uid]); - if (state.kind === "and") { - // enter every child - for (const child of state.children) { - let enteredChildren; - if (rest.length > 0 && child.uid === rest[0].uid) { - ({enteredStates: enteredChildren, ...actionScope} = enterPath(simtime, rest, actionScope)); - } - else { - ({enteredStates: enteredChildren, ...actionScope} = enterDefault(simtime, child, actionScope)); - } - enteredStates = enteredStates.union(enteredChildren); - } - } - else if (state.kind === "or") { - if (rest.length > 0) { - let enteredChildren; - ({enteredStates: enteredChildren, ...actionScope} = enterPath(simtime, rest, actionScope)); - enteredStates = enteredStates.union(enteredChildren); - } - else { - // same as AND-state, but we only enter the initial state(s) - for (const [_, child] of state.initial) { - let enteredChildren; - ({enteredStates: enteredChildren, ...actionScope} = enterDefault(simtime, child, actionScope)); - enteredStates = enteredStates.union(enteredChildren); - } - } - } - - return { enteredStates, ...actionScope }; -} - -// exit the given state and all its active descendants -export function exitCurrent(simtime: number, state: ConcreteState, rt: EnteredScope): ActionScope { - let {enteredStates, ...actionScope} = rt; - - if (enteredStates.has(state.uid)) { - // exit all active children... - for (const child of state.children) { - actionScope = exitCurrent(simtime, child, {enteredStates, ...actionScope}); - } - - // execute exit actions - actionScope = exitActions(simtime, state, actionScope); - } - - return actionScope; -} - -export function exitPath(simtime: number, path: ConcreteState[], rt: EnteredScope): ActionScope { - let {enteredStates, ...actionScope} = rt; - - const toExit = enteredStates.difference(new Set(path.map(s=>s.uid))); - - const [state, ...rest] = path; - - // exit state and all its children, *except* states along the rest of the path - actionScope = exitCurrent(simtime, state, {enteredStates: toExit, ...actionScope}); - if (rest.length > 0) { - actionScope = exitPath(simtime, rest, {enteredStates, ...actionScope}); - } - - // execute exit actions - actionScope = exitActions(simtime, state, actionScope); - return actionScope; -} - export function execAction(action: Action, rt: ActionScope): ActionScope { if (action.kind === "assignment") { const rhs = evalExpr(action.rhs, rt.environment); @@ -197,7 +53,156 @@ export function execAction(action: Action, rt: ActionScope): ActionScope { throw new Error("should never reach here"); } -export function handleEvent(simtime: number, event: RT_Event, statechart: Statechart, activeParent: StableState, {environment, mode, ...raised}: RT_Statechart & RaisedEvents): RT_Statechart & RaisedEvents { +export function entryActions(simtime: number, state: ConcreteState, actionScope: ActionScope): ActionScope { + // console.log('enter', stateDescription(state), '...'); + let {environment, ...rest} = actionScope; + // environment = environment.pushScope(); + for (const action of state.entryActions) { + ({environment, ...rest} = execAction(action, {environment, ...rest})); + } + // schedule timers + // we store timers in the environment (dirty!) + environment = environment.transform("_timers", oldTimers => { + const newTimers = [ + ...oldTimers, + ...state.timers.map(timeOffset => { + const futureSimTime = simtime + timeOffset; + return [futureSimTime, {kind: "timer", state: state.uid, timeDurMs: timeOffset}] as [number, TimerElapseEvent]; + }), + ]; + newTimers.sort((a,b) => a[0] - b[0]); + return newTimers; + }, []); + // new nested scope + return {environment, ...rest}; +} + +export function exitActions(simtime: number, state: ConcreteState, {enteredStates, ...actionScope}: EnteredScope): ActionScope { + // console.log('exit', stateDescription(state), '...'); + for (const action of state.exitActions) { + (actionScope = execAction(action, actionScope)); + } + let environment = actionScope.environment; + // cancel timers + environment = environment.transform("_timers", oldTimers => { + // remove all timers of 'state': + return oldTimers.filter(([_, {state: s}]) => s !== state.uid); + }, []); + // environment = environment.popScope(); + return {...actionScope, environment}; +} + +// recursively enter the given state's default state +export function enterDefault(simtime: number, state: ConcreteState, rt: ActionScope): EnteredScope { + let actionScope = rt; + + // execute entry actions + actionScope = entryActions(simtime, state, actionScope); + + // enter children... + let enteredStates = new Set([state.uid]); + if (state.kind === "and") { + // enter every child + for (const child of state.children) { + let enteredChildren; + ({enteredStates: enteredChildren, ...actionScope} = enterDefault(simtime, child, actionScope)); + enteredStates = enteredStates.union(enteredChildren); + } + } + else if (state.kind === "or") { + // same as AND-state, but we only enter the initial state(s) + if (state.initial.length > 0) { + if (state.initial.length > 1) { + console.warn(state.uid + ': multiple initial states, only entering one of them'); + } + let enteredChildren; + ({enteredStates: enteredChildren, ...actionScope} = enterDefault(simtime, state.initial[0][1], actionScope)); + enteredStates = enteredStates.union(enteredChildren); + } + console.warn(state.uid + ': no initial state'); + } + + return {enteredStates, ...actionScope}; +} + +// recursively enter the given state and, if children need to be entered, preferrably those occurring in 'toEnter' will be entered. If no child occurs in 'toEnter', the default child will be entered. +export function enterStates(simtime: number, state: ConcreteState, toEnter: Set, actionScope: ActionScope): EnteredScope { + + // execute entry actions + actionScope = entryActions(simtime, state, actionScope); + + // enter children... + let enteredStates = new Set([state.uid]); + + if (state.kind === "and") { + // every child must be entered + for (const child of state.children) { + let enteredChildren; + ({enteredStates: enteredChildren, ...actionScope} = enterStates(simtime, child, toEnter, actionScope)); + enteredStates = enteredStates.union(enteredChildren); + } + } + else if (state.kind === "or") { + // only one child can be entered + const childToEnter = state.children.filter(child => toEnter.has(child.uid)); + if (childToEnter.length === 1) { + // good + let enteredChildren; + ({enteredStates: enteredChildren, ...actionScope} = enterStates(simtime, childToEnter[0], toEnter, actionScope)); + enteredStates = enteredStates.union(enteredChildren); + } + else if (childToEnter.length === 0) { + // also good, enter default child + for (const [_, defaultChild] of state.initial) { + let enteredChildren; + ({enteredStates: enteredChildren, ...actionScope} = enterDefault(simtime, defaultChild, actionScope)); + enteredStates = enteredStates.union(enteredChildren); + break; // one is enough + } + } + else { + throw new Error("can only enter one child of an OR-state, stupid!"); + } + } + + return { enteredStates, ...actionScope }; +} + +// exit the given state and all its active descendants +export function exitCurrent(simtime: number, state: ConcreteState, rt: EnteredScope): ActionScope { + let {enteredStates, history, ...actionScope} = rt; + + if (enteredStates.has(state.uid)) { + // exit all active children... + for (const child of state.children) { + ({history, ...actionScope} = exitCurrent(simtime, child, {enteredStates, history, ...actionScope})); + } + + // execute exit actions + ({history, ...actionScope} = exitActions(simtime, state, {enteredStates, history, ...actionScope})); + + // record history + for (const h of state.history) { + if (h.kind === "shallow") { + history.set(h.uid, new Set(state.children + .filter(child => enteredStates.has(child.uid)) + .map(child => child.uid))); + } + else if (h.kind === "deep") { + // horribly inefficient (i don't care) + history.set(h.uid, + getDescendants(state) + .difference(new Set([state.uid])) + .intersection(enteredStates) + ); + } + } + } + + return {history, ...actionScope}; +} + +export function handleEvent(simtime: number, event: RT_Event, statechart: Statechart, activeParent: StableState, {environment, mode, history, ...raised}: RT_Statechart & RaisedEvents): RT_Statechart & RaisedEvents { const arenasFired = new Set(); for (const state of activeParent.children) { if (mode.has(state.uid)) { @@ -249,7 +254,7 @@ export function handleEvent(simtime: number, event: RT_Event, statechart: Statec event.param, ); } - ({mode, environment, ...raised} = fireTransition2(simtime, t, statechart.transitions, l, arena, {mode, environment, ...raised})); + ({mode, environment, history, ...raised} = fireTransition(simtime, t, statechart.transitions, l, arena, {mode, environment, history, ...raised})); if (event.kind === "input" && event.param !== undefined) { environment = environment.popScope(); } @@ -261,57 +266,53 @@ export function handleEvent(simtime: number, event: RT_Event, statechart: Statec } else { // no enabled outgoing transitions, try the children: - ({environment, mode, ...raised} = handleEvent(simtime, event, statechart, state, {environment, mode, ...raised})); + ({environment, mode, history, ...raised} = handleEvent(simtime, event, statechart, state, {environment, mode, history, ...raised})); } } } - return {environment, mode, ...raised}; + return {environment, mode, history, ...raised}; } -export function handleInputEvent(simtime: number, event: RT_Event, statechart: Statechart, {mode, environment}: {mode: Mode, environment: Environment}): BigStepOutput { +export function handleInputEvent(simtime: number, event: RT_Event, statechart: Statechart, {mode, environment, history}: {mode: Mode, environment: Environment, history: RT_History}): BigStepOutput { let raised = initialRaised; - ({mode, environment, ...raised} = handleEvent(simtime, event, statechart, statechart.root, {mode, environment, ...raised})); + ({mode, environment, ...raised} = handleEvent(simtime, event, statechart, statechart.root, {mode, environment, history, ...raised})); - return handleInternalEvents(simtime, statechart, {mode, environment, ...raised}); + return handleInternalEvents(simtime, statechart, {mode, environment, history, ...raised}); } -export function handleInternalEvents(simtime: number, statechart: Statechart, {mode, environment, ...raised}: RT_Statechart & RaisedEvents): BigStepOutput { +export function handleInternalEvents(simtime: number, statechart: Statechart, {mode, environment, history, ...raised}: RT_Statechart & RaisedEvents): BigStepOutput { while (raised.internalEvents.length > 0) { const [internalEvent, ...rest] = raised.internalEvents; ({mode, environment, ...raised} = handleEvent(simtime, {kind: "input", ...internalEvent}, // internal event becomes input event - statechart, statechart.root, {mode, environment, internalEvents: rest, outputEvents: raised.outputEvents})); + statechart, statechart.root, {mode, environment, history, internalEvents: rest, outputEvents: raised.outputEvents})); } - return {mode, environment, outputEvents: raised.outputEvents}; + return {mode, environment, history, outputEvents: raised.outputEvents}; } -function transitionDescription(t: Transition) { - return stateDescription(t.src) + ' ➔ ' + stateDescription(t.tgt); -} - -export function fireTransition2(simtime: number, t: Transition, ts: Map, label: TransitionLabel, arena: OrState, {mode, environment, ...raised}: RT_Statechart & RaisedEvents): RT_Statechart & RaisedEvents { +export function fireTransition(simtime: number, t: Transition, ts: Map, label: TransitionLabel, arena: OrState, {mode, environment, history, ...raised}: RT_Statechart & RaisedEvents): RT_Statechart & RaisedEvents { console.log('fire', transitionDescription(t)); - const srcPath = computePath({ancestor: arena, descendant: t.src as ConcreteState}).reverse(); + const srcPath = computePath({ancestor: arena, descendant: t.src as ConcreteState}).reverse() as ConcreteState[]; // exit src and other states up to arena - ({environment, ...raised} = exitPath(simtime, srcPath, {environment, enteredStates: mode, ...raised})); + ({environment, history, ...raised} = exitCurrent(simtime, srcPath[0], {environment, enteredStates: mode, history, ...raised})) const toExit = getDescendants(arena); toExit.delete(arena.uid); // do not exit the arena itself const exitedMode = mode.difference(toExit); // active states after exiting the states we need to exit // console.log({exitedMode}); - return fireSecondHalfOfTransition(simtime, t, ts, label, arena, {mode: exitedMode, environment, ...raised}); + return fireSecondHalfOfTransition(simtime, t, ts, label, arena, {mode: exitedMode, history, environment, ...raised}); } // assuming we've already exited the source state of the transition, now enter the target state // IF however, the target is a pseudo-state, DON'T enter it (pseudo-states are NOT states), instead fire the first pseudo-outgoing transition. -export function fireSecondHalfOfTransition(simtime: number, t: Transition, ts: Map, label: TransitionLabel, arena: OrState, {mode, environment, ...raised}: RT_Statechart & RaisedEvents): RT_Statechart & RaisedEvents { +export function fireSecondHalfOfTransition(simtime: number, t: Transition, ts: Map, label: TransitionLabel, arena: OrState, {mode, environment, history, ...raised}: RT_Statechart & RaisedEvents): RT_Statechart & RaisedEvents { // exec transition actions for (const action of label.actions) { - ({environment, ...raised} = execAction(action, {environment, ...raised})); + ({environment, history, ...raised} = execAction(action, {environment, history, ...raised})); } if (t.tgt.kind === "pseudo") { @@ -322,7 +323,7 @@ export function fireSecondHalfOfTransition(simtime: number, t: Transition, ts: M if (evalExpr(nextLabel.guard, environment)) { console.log('fire', transitionDescription(nextT)); // found ourselves an enabled transition - return fireSecondHalfOfTransition(simtime, nextT, ts, nextLabel, arena, {mode, environment, ...raised}); + return fireSecondHalfOfTransition(simtime, nextT, ts, nextLabel, arena, {mode, environment, history, ...raised}); } } } @@ -331,13 +332,25 @@ export function fireSecondHalfOfTransition(simtime: number, t: Transition, ts: M } else { const tgtPath = computePath({ancestor: arena, descendant: t.tgt}); + const state = tgtPath[0] as ConcreteState; + let toEnter; + if (t.tgt.kind === "deep" || t.tgt.kind === "shallow") { + toEnter = new Set([ + ...tgtPath.slice(0,-1).map(s => s.uid), + ...history.get(t.tgt.uid)! + ]) as Set; + } + else { + toEnter = new Set(tgtPath.map(s=>s.uid)); + } + // enter tgt let enteredStates; - ({enteredStates, environment, ...raised} = enterPath(simtime, tgtPath, {environment, ...raised})); + ({enteredStates, environment, history, ...raised} = enterStates(simtime, state, toEnter, {environment, history, ...raised})); const enteredMode = mode.union(enteredStates); // console.log({enteredMode}); - return {mode: enteredMode, environment, ...raised}; + return {mode: enteredMode, environment, history, ...raised}; } } diff --git a/src/statecharts/parser.ts b/src/statecharts/parser.ts index eca8fa0..5ea8cf7 100644 --- a/src/statecharts/parser.ts +++ b/src/statecharts/parser.ts @@ -1,9 +1,10 @@ -import { ConcreteState, OrState, PseudoState, Statechart, Transition } from "./abstract_syntax"; +import { ConcreteState, HistoryState, OrState, PseudoState, Statechart, Transition } from "./abstract_syntax"; import { Rountangle, VisualEditorState } from "./concrete_syntax"; -import { isEntirelyWithin } from "../VisualEditor/geometry"; +import { isEntirelyWithin, Rect2D } from "../VisualEditor/geometry"; import { Action, EventTrigger, Expression, ParsedText } from "./label_ast"; import { parse as parseLabel, SyntaxError } from "./label_parser"; import { Connections } from "./detect_connections"; +import { HISTORY_RADIUS } from "../VisualEditor/parameters"; export type TraceableError = { shapeUid: string; @@ -37,6 +38,7 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ kind: "or", uid: "root", children: [], + history: [], initial: [], comments: [], entryActions: [], @@ -46,6 +48,7 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ } const uid2State = new Map([["root", root]]); + const historyStates: HistoryState[] = []; // we will always look for the smallest parent rountangle const parentCandidates: Rountangle[] = [{ @@ -57,24 +60,39 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ const parentLinks = new Map(); + function findParent(geom: Rect2D): ConcreteState { + // iterate in reverse: + for (let i=parentCandidates.length-1; i>=0; i--) { + const candidate = parentCandidates[i]; + if (candidate.uid === "root" || isEntirelyWithin(geom, candidate)) { + // found our parent + return uid2State.get(candidate.uid)! as ConcreteState; + } + } + throw new Error("impossible: should always find a parent state"); + } + // step 1: figure out state hierarchy // IMPORTANT ASSUMPTION: state.rountangles is sorted from big to small surface area: for (const rt of state.rountangles) { + const parent = findParent(rt); const common = { kind: rt.kind, uid: rt.uid, comments: [], entryActions: [], exitActions: [], + parent, + depth: parent.depth + 1, }; - let state; if (rt.kind === "or") { state = { ...common, initial: [], children: [], + history: [], timers: [], }; } @@ -82,30 +100,15 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ state = { ...common, children: [], + history: [], timers: [], }; } - - // iterate in reverse: - for (let i=parentCandidates.length-1; i>=0; i--) { - const candidate = parentCandidates[i]; - if (candidate.uid === "root" || isEntirelyWithin(rt, candidate)) { - // found our parent - const parentState = uid2State.get(candidate.uid)! as ConcreteState; - parentState.children.push(state as unknown as ConcreteState); - parentCandidates.push(rt); - parentLinks.set(rt.uid, candidate.uid); - state = { - ...state, - parent: parentState, - depth: parentState.depth + 1, - } - break; - } - } + parent.children.push(state as ConcreteState); + parentCandidates.push(rt); + parentLinks.set(rt.uid, parent.uid); uid2State.set(rt.uid, state as ConcreteState); } - for (const d of state.diamonds) { uid2State.set(d.uid, { kind: "pseudo", @@ -113,6 +116,17 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ comments: [], }); } + for (const h of state.history) { + const parent = findParent({topLeft: h.topLeft, size: {x: HISTORY_RADIUS*2, y: HISTORY_RADIUS*2}}); + const historyState = { + kind: h.kind, + uid: h.uid, + parent, + depth: parent.depth+1, + }; + parent.history.push(historyState); + historyStates.push(historyState); + } // step 2: figure out transitions @@ -122,8 +136,12 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ for (const arr of state.arrows) { const srcUID = conns.arrow2SideMap.get(arr.uid)?.[0]?.uid; const tgtUID = conns.arrow2SideMap.get(arr.uid)?.[1]?.uid; + const historyTgtUID = conns.arrow2HistoryMap.get(arr.uid); if (!srcUID) { - if (!tgtUID) { + if (historyTgtUID) { + errors.push({shapeUid: arr.uid, message: "no source"}); + } + else if (!tgtUID) { // dangling edge errors.push({shapeUid: arr.uid, message: "dangling"}); } @@ -153,25 +171,33 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ } } else { - if (!tgtUID) { - errors.push({ - shapeUid: arr.uid, - message: "no target", - }); - } - else { + if (historyTgtUID || tgtUID) { // add transition + let tgt; + if (historyTgtUID) { + tgt = historyStates.find(h => h.uid === historyTgtUID)!; + console.log(tgt); + } + else { + tgt = uid2State.get(tgtUID!)!; + } const transition: Transition = { uid: arr.uid, src: uid2State.get(srcUID)!, - tgt: uid2State.get(tgtUID)!, + tgt, label: [], - }; + } const existingTransitions = transitions.get(srcUID) || []; existingTransitions.push(transition); transitions.set(srcUID, existingTransitions); uid2Transition.set(arr.uid, transition); } + else { + errors.push({ + shapeUid: arr.uid, + message: "no target", + }); + } } } @@ -333,6 +359,7 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ internalEvents, outputEvents, uid2State, + historyStates, }, errors]; } diff --git a/src/statecharts/runtime_types.ts b/src/statecharts/runtime_types.ts index 8004cd0..b0d9fb5 100644 --- a/src/statecharts/runtime_types.ts +++ b/src/statecharts/runtime_types.ts @@ -91,10 +91,12 @@ export class Environment { } } +export type RT_History = Map>; + export type RT_Statechart = { mode: Mode; environment: Environment; - // history: // TODO + history: RT_History; // history-uid -> set of states } export type BigStepOutput = RT_Statechart & {