124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
import { Rountangle, RountanglePart } from "../statecharts/concrete_syntax";
|
|
import { Rect2D } from "./geometry";
|
|
import { ROUNTANGLE_RADIUS, CORNER_HELPER_OFFSET, CORNER_HELPER_RADIUS } from "./parameters";
|
|
import { rountangleMinSize } from "./VisualEditor";
|
|
|
|
export function DiamondShape(props: {geometry: Rect2D, extraAttrs: object}) {
|
|
const {geometry} = props;
|
|
return <polygon
|
|
points={`
|
|
${geometry.size.x/2} ${0},
|
|
${geometry.size.x} ${geometry.size.y/2},
|
|
${geometry.size.x/2} ${geometry.size.y},
|
|
${0} ${geometry.size.y/2}
|
|
`}
|
|
{...props.extraAttrs}
|
|
/>;
|
|
}
|
|
|
|
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})`}>
|
|
{props.rountangle.kind === "pseudo" ?
|
|
<DiamondShape geometry={props.rountangle} extraAttrs={extraAttrs}/>
|
|
: <rect
|
|
rx={ROUNTANGLE_RADIUS} ry={ROUNTANGLE_RADIUS}
|
|
x={0}
|
|
y={0}
|
|
width={minSize.x}
|
|
height={minSize.y}
|
|
{...extraAttrs}
|
|
/>
|
|
}
|
|
|
|
|
|
{(props.errors.length > 0) &&
|
|
<text className="error" x={10} y={40} data-uid={uid} data-parts="left top right bottom">{props.errors.join(' ')}</text>}
|
|
|
|
|
|
<line
|
|
className={"lineHelper"
|
|
+ (props.selected.includes("top") ? " selected" : "")
|
|
+ (props.highlight.includes("top") ? " highlight" : "")}
|
|
x1={0}
|
|
y1={0}
|
|
x2={minSize.x}
|
|
y2={0}
|
|
data-uid={uid}
|
|
data-parts="top" />
|
|
<line
|
|
className={"lineHelper"
|
|
+ (props.selected.includes("right") ? " selected" : "")
|
|
+ (props.highlight.includes("right") ? " highlight" : "")}
|
|
x1={minSize.x}
|
|
y1={0}
|
|
x2={minSize.x}
|
|
y2={minSize.y}
|
|
data-uid={uid}
|
|
data-parts="right" />
|
|
<line
|
|
className={"lineHelper"
|
|
+ (props.selected.includes("bottom") ? " selected" : "")
|
|
+ (props.highlight.includes("bottom") ? " highlight" : "")}
|
|
x1={0}
|
|
y1={minSize.y}
|
|
x2={minSize.x}
|
|
y2={minSize.y}
|
|
data-uid={uid}
|
|
data-parts="bottom" />
|
|
<line
|
|
className={"lineHelper"
|
|
+ (props.selected.includes("left") ? " selected" : "")
|
|
+ (props.highlight.includes("left") ? " highlight" : "")}
|
|
x1={0}
|
|
y1={0}
|
|
x2={0}
|
|
y2={minSize.y}
|
|
data-uid={uid}
|
|
data-parts="left" />
|
|
|
|
<circle
|
|
className="circleHelper corner"
|
|
cx={CORNER_HELPER_OFFSET}
|
|
cy={CORNER_HELPER_OFFSET}
|
|
r={CORNER_HELPER_RADIUS}
|
|
data-uid={uid}
|
|
data-parts="top left" />
|
|
<circle
|
|
className="circleHelper corner"
|
|
cx={minSize.x - CORNER_HELPER_OFFSET}
|
|
cy={CORNER_HELPER_OFFSET}
|
|
r={CORNER_HELPER_RADIUS}
|
|
data-uid={uid}
|
|
data-parts="top right" />
|
|
<circle
|
|
className="circleHelper corner"
|
|
cx={minSize.x - CORNER_HELPER_OFFSET}
|
|
cy={minSize.y - CORNER_HELPER_OFFSET}
|
|
r={CORNER_HELPER_RADIUS}
|
|
data-uid={uid}
|
|
data-parts="bottom right" />
|
|
<circle
|
|
className="circleHelper corner"
|
|
cx={CORNER_HELPER_OFFSET}
|
|
cy={minSize.y - CORNER_HELPER_OFFSET}
|
|
r={CORNER_HELPER_RADIUS}
|
|
data-uid={uid}
|
|
data-parts="bottom left" />
|
|
<text x={10} y={20}
|
|
className="uid"
|
|
data-uid={uid}>{uid}</text>
|
|
</g>;
|
|
}
|