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

usability improvements

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-15 14:09:45 +02:00
parent ec49c47b39
commit db1479bfc4
2 changed files with 39 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/VisualEditor/VisualEditor.css
View file

@ -3,6 +3,10 @@
background-color: #eee; background-color: #eee;
} }
.svgCanvas.dragging {
cursor: grabbing !important;
}
.svgCanvas.active { .svgCanvas.active {
background-color: rgb(255, 140, 0, 0.2); background-color: rgb(255, 140, 0, 0.2);
} }
@ -49,12 +53,6 @@ text.highlight {
/* cursor: grab; */ /* cursor: grab; */
} }
.rountangle.dragging {
/* fill: lightgrey; */
/* stroke-width: 4px; */
cursor: grabbing;
}
.rountangle.selected { .rountangle.selected {
fill: rgba(0, 0, 255, 0.2); fill: rgba(0, 0, 255, 0.2);
/* stroke: blue; /* stroke: blue;
@ -70,7 +68,7 @@ text.highlight {
stroke-width: 3px; stroke-width: 3px;
} }
.selected:hover { .selected:hover:not(:active) {
cursor: grab; cursor: grab;
} }
@ -78,10 +76,10 @@ text.highlight {
stroke: rgba(0, 0, 0, 0); stroke: rgba(0, 0, 0, 0);
stroke-width: 16px; stroke-width: 16px;
} }
.lineHelper:hover { .lineHelper:hover:not(:active) {
stroke: blue; stroke: blue;
stroke-opacity: 0.2; stroke-opacity: 0.2;
/* cursor: grab; */ cursor: grab;
} }
.pathHelper { .pathHelper {
@ -89,7 +87,7 @@ text.highlight {
stroke: rgba(0, 0, 0, 0); stroke: rgba(0, 0, 0, 0);
stroke-width: 16px; stroke-width: 16px;
} }
.pathHelper:hover { .pathHelper:hover:not(:active) {
stroke: blue; stroke: blue;
stroke-opacity: 0.2; stroke-opacity: 0.2;
cursor: grab; cursor: grab;
@ -99,10 +97,10 @@ text.highlight {
.circleHelper { .circleHelper {
fill: rgba(0, 0, 0, 0); fill: rgba(0, 0, 0, 0);
} }
.circleHelper:hover { .circleHelper:hover:not(:active) {
fill: blue; fill: blue;
fill-opacity: 0.2; fill-opacity: 0.2;
/* cursor: grab; */ cursor: grab;
} }
.rountangle.or { .rountangle.or {
@ -134,9 +132,6 @@ text.highlight {
cursor: grab; cursor: grab;
} }
line.selected, circle.selected { line.selected, circle.selected {
fill: rgba(0, 0, 255, 0.2); fill: rgba(0, 0, 255, 0.2);
/* stroke-dasharray: 7 6; */ /* stroke-dasharray: 7 6; */

29
src/VisualEditor/VisualEditor.tsx
View file

@ -147,14 +147,20 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
const compressedStateString = compressedStateBuffer.toBase64(); const compressedStateString = compressedStateBuffer.toBase64();
window.location.hash = "#"+compressedStateString; window.location.hash = "#"+compressedStateString;
const [statechart, errors] = parseStatechart(state); // const [statechart, errors] = parseStatechart(state);
// console.log('statechart: ', statechart, 'errors:', errors); // setErrors(errors);
setErrors(errors); // setAST(statechart);
setAST(statechart); }, 200);
}, 100);
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
}, [state]); }, [state]);
useEffect(() => {
const [statechart, errors] = parseStatechart(state);
setErrors(errors);
setAST(statechart);
}, [state])
function getCurrentPointer(e: {pageX: number, pageY: number}) { function getCurrentPointer(e: {pageX: number, pageY: number}) {
const bbox = refSVG.current!.getBoundingClientRect(); const bbox = refSVG.current!.getBoundingClientRect();
return { return {
@ -232,11 +238,10 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
break; break;
} }
} }
// if (!allPartsInSelection) { if (!allPartsInSelection) {
// setSelection([{uid, parts}] as Selection); setSelection([{uid, parts}] as Selection);
// } }
if (allPartsInSelection) {
// start dragging // start dragging
setDragging({ setDragging({
lastMousePos: currentPointer, lastMousePos: currentPointer,
@ -244,6 +249,7 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
return; return;
} }
} }
// otherwise, just start making a selection // otherwise, just start making a selection
setDragging(null); setDragging(null);
setSelectingState({ setSelectingState({
@ -251,7 +257,6 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
size: {x: 0, y: 0}, size: {x: 0, y: 0},
}); });
setSelection([]); setSelection([]);
}
}; };
const onMouseMove = (e: {pageX: number, pageY: number}) => { const onMouseMove = (e: {pageX: number, pageY: number}) => {
@ -680,7 +685,7 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
const rootErrors = errors.filter(({shapeUid}) => shapeUid === "root").map(({message}) => message); const rootErrors = errors.filter(({shapeUid}) => shapeUid === "root").map(({message}) => message);
return <svg width="4000px" height="4000px" return <svg width="4000px" height="4000px"
className={"svgCanvas"+(active.has("root")?" active":"")} className={"svgCanvas"+(active.has("root")?" active":"")+(dragging!==null?" dragging":"")}
onMouseDown={onMouseDown} onMouseDown={onMouseDown}
onContextMenu={e => e.preventDefault()} onContextMenu={e => e.preventDefault()}
ref={refSVG} ref={refSVG}
@ -701,7 +706,7 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
</marker> </marker>
</defs> </defs>
{(rootErrors.length>0) && <text className="error" x={5} y={50}>{rootErrors.join(' ')}</text>} {(rootErrors.length>0) && <text className="error" x={5} y={20}>{rootErrors.join(' ')}</text>}
{state.rountangles.map(rountangle => <RountangleSVG {state.rountangles.map(rountangle => <RountangleSVG
key={rountangle.uid} key={rountangle.uid}