40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import { Rountangle, RountanglePart } from "../statecharts/concrete_syntax";
|
|
import { ROUNTANGLE_RADIUS } from "./parameters";
|
|
import { RectHelper } from "./RectHelpers";
|
|
import { rountangleMinSize } from "./VisualEditor";
|
|
|
|
|
|
export function RountangleSVG(props: { rountangle: Rountangle; selected: string[]; highlight: RountanglePart[]; errors: string[]; active: boolean; }) {
|
|
const { topLeft, size, uid } = props.rountangle;
|
|
// always draw a rountangle with a minimum size
|
|
// during resizing, rountangle can be smaller than this size and even have a negative size, but we don't show it
|
|
const minSize = rountangleMinSize(size);
|
|
const extraAttrs = {
|
|
className: 'rountangle'
|
|
+ (props.selected.length === 4 ? " selected" : "")
|
|
+ (' ' + props.rountangle.kind)
|
|
+ (props.errors.length > 0 ? " error" : "")
|
|
+ (props.active ? " active" : ""),
|
|
"data-uid": uid,
|
|
"data-parts": "left top right bottom",
|
|
};
|
|
return <g transform={`translate(${topLeft.x} ${topLeft.y})`}>
|
|
<rect
|
|
rx={ROUNTANGLE_RADIUS} ry={ROUNTANGLE_RADIUS}
|
|
x={0}
|
|
y={0}
|
|
width={minSize.x}
|
|
height={minSize.y}
|
|
{...extraAttrs}
|
|
/>
|
|
|
|
<text x={10} y={20} className="uid">{props.rountangle.uid}</text>
|
|
|
|
{(props.errors.length > 0) &&
|
|
<text className="error" x={10} y={40} data-uid={uid} data-parts="left top right bottom">{props.errors.join(' ')}</text>}
|
|
|
|
<RectHelper uid={uid} size={minSize}
|
|
selected={props.selected}
|
|
highlight={props.highlight} />
|
|
</g>;
|
|
}
|