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

editor: better rendering of helper outlines

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-17 11:34:49 +02:00
parent 9401c02800
commit e8fda9bdf0
8 changed files with 95 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/VisualEditor/RectHelpers.tsx
View file

@ -2,72 +2,50 @@ import { RountanglePart } from "../statecharts/concrete_syntax";
import { Vec2D } from "./geometry";
import { CORNER_HELPER_OFFSET, CORNER_HELPER_RADIUS } from "./parameters";
function lineGeometryProps(size: Vec2D): [RountanglePart, object][] {
return [
["top", {x1: 0, y1: 0, x2: size.x, y2: 0 }],
["right", {x1: size.x, y1: 0, x2: size.x, y2: size.y}],
["bottom", {x1: 0, y1: size.y, x2: size.x, y2: size.y}],
["left", {x1: 0, y1: 0, x2: 0, y2: size.y}],
];
}
export function RectHelper(props: { uid: string, size: Vec2D, selected: string[], highlight: RountanglePart[] }) {
const geomProps = lineGeometryProps(props.size);
return <>
<line
className={"lineHelper"
+ (props.selected.includes("top") ? " selected" : "")
+ (props.highlight.includes("top") ? " highlight" : "")}
x1={0}
y1={0}
x2={props.size.x}
y2={0}
data-uid={props.uid}
data-parts="top" />
<line
className={"lineHelper"
+ (props.selected.includes("right") ? " selected" : "")
+ (props.highlight.includes("right") ? " highlight" : "")}
x1={props.size.x}
y1={0}
x2={props.size.x}
y2={props.size.y}
data-uid={props.uid}
data-parts="right" />
<line
className={"lineHelper"
+ (props.selected.includes("bottom") ? " selected" : "")
+ (props.highlight.includes("bottom") ? " highlight" : "")}
x1={0}
y1={props.size.y}
x2={props.size.x}
y2={props.size.y}
data-uid={props.uid}
data-parts="bottom" />
<line
className={"lineHelper"
+ (props.selected.includes("left") ? " selected" : "")
+ (props.highlight.includes("left") ? " highlight" : "")}
x1={0}
y1={0}
x2={0}
y2={props.size.y}
data-uid={props.uid}
data-parts="left" />
{geomProps.map(([side, ps]) => <>
{(props.selected.includes(side) || props.highlight.includes(side)) && <line className={""
+ (props.selected.includes(side) ? " selected" : "")
+ (props.highlight.includes(side) ? " highlight" : "")}
{...ps} data-uid={props.uid} data-parts={side}/>
}
<line className="helper" {...ps} data-uid={props.uid} data-parts={side}/>
</>)}
<circle
className="circleHelper corner"
className="helper"
cx={CORNER_HELPER_OFFSET}
cy={CORNER_HELPER_OFFSET}
r={CORNER_HELPER_RADIUS}
data-uid={props.uid}
data-parts="top left" />
<circle
className="circleHelper corner"
className="helper"
cx={props.size.x - CORNER_HELPER_OFFSET}
cy={CORNER_HELPER_OFFSET}
r={CORNER_HELPER_RADIUS}
data-uid={props.uid}
data-parts="top right" />
<circle
className="circleHelper corner"
className="helper"
cx={props.size.x - CORNER_HELPER_OFFSET}
cy={props.size.y - CORNER_HELPER_OFFSET}
r={CORNER_HELPER_RADIUS}
data-uid={props.uid}
data-parts="bottom right" />
<circle
className="circleHelper corner"
className="helper"
cx={CORNER_HELPER_OFFSET}
cy={props.size.y - CORNER_HELPER_OFFSET}
r={CORNER_HELPER_RADIUS}