editor: better rendering of helper outlines
This commit is contained in:
parent
9401c02800
commit
e8fda9bdf0
8 changed files with 95 additions and 116 deletions
|
|
@ -31,7 +31,7 @@ export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: stri
|
|||
data-parts="start end">{props.errors.join(' ')}</text>}
|
||||
|
||||
<path
|
||||
className="pathHelper"
|
||||
className="pathHelper helper"
|
||||
d={`M ${start.x} ${start.y}
|
||||
${arcOrLine}
|
||||
${end.x} ${end.y}`}
|
||||
|
|
@ -39,7 +39,7 @@ export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: stri
|
|||
data-parts="start end" />
|
||||
|
||||
<circle
|
||||
className={"circleHelper"
|
||||
className={"circleHelper helper"
|
||||
+ (props.selected.includes("start") ? " selected" : "")}
|
||||
cx={start.x}
|
||||
cy={start.y}
|
||||
|
|
@ -47,7 +47,7 @@ export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: stri
|
|||
data-uid={uid}
|
||||
data-parts="start" />
|
||||
<circle
|
||||
className={"circleHelper"
|
||||
className={"circleHelper helper"
|
||||
+ (props.selected.includes("end") ? " selected" : "")}
|
||||
cx={end.x}
|
||||
cy={end.y}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ export function TextSVG(props: {text: Text, error: TraceableError|undefined, sel
|
|||
"data-uid": props.text.uid,
|
||||
"data-parts": "text",
|
||||
textAnchor: "middle" as "middle",
|
||||
className:
|
||||
(props.selected ? "selected":"")
|
||||
+(props.highlight ? " highlight":""),
|
||||
className: "draggableText"
|
||||
+ (props.selected ? " selected":"")
|
||||
+ (props.highlight ? " highlight":""),
|
||||
}
|
||||
|
||||
let textNode;
|
||||
|
|
@ -36,6 +36,8 @@ export function TextSVG(props: {text: Text, error: TraceableError|undefined, sel
|
|||
if (newText) {
|
||||
props.onEdit(newText);
|
||||
}
|
||||
}}
|
||||
>{textNode}</g>;
|
||||
}}>
|
||||
{textNode}
|
||||
<text className="draggableText helper" textAnchor="middle" data-uid={props.text.uid} data-parts="text">{props.text.text}</text>
|
||||
</g>;
|
||||
}
|
||||
|
|
@ -7,29 +7,16 @@
|
|||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
/* do not render helpers while dragging something */
|
||||
.svgCanvas.dragging .helper:hover {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.svgCanvas.active {
|
||||
background-color: rgb(255, 140, 0, 0.2);
|
||||
}
|
||||
|
||||
text, text.highlight {
|
||||
user-select: none;
|
||||
/* 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;
|
||||
stroke-linecap: butt;
|
||||
stroke-linejoin: miter;
|
||||
stroke-opacity: 1;
|
||||
fill-opacity:1;
|
||||
/* font-weight: 800; */
|
||||
}
|
||||
|
||||
text.highlight {
|
||||
fill: green;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* rectangle drawn while a selection is being made */
|
||||
.selecting {
|
||||
fill: blue;
|
||||
fill-opacity: 0.2;
|
||||
|
|
@ -40,23 +27,12 @@ text.highlight {
|
|||
|
||||
.rountangle {
|
||||
fill: white;
|
||||
/* fill: none; */
|
||||
stroke: black;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.rountangle:hover {
|
||||
/* stroke: blue; */
|
||||
/* stroke-opacity: 0.2; */
|
||||
/* fill: #eee; */
|
||||
/* stroke-width: 4px; */
|
||||
/* cursor: grab; */
|
||||
}
|
||||
|
||||
.rountangle.selected {
|
||||
fill: rgba(0, 0, 255, 0.2);
|
||||
/* stroke: blue;
|
||||
stroke-width: 4px; */
|
||||
}
|
||||
.rountangle.error {
|
||||
stroke: rgb(230,0,0);
|
||||
|
|
@ -72,32 +48,31 @@ text.highlight {
|
|||
cursor: grab;
|
||||
}
|
||||
|
||||
.lineHelper {
|
||||
line.helper {
|
||||
stroke: rgba(0, 0, 0, 0);
|
||||
stroke-width: 16px;
|
||||
}
|
||||
.lineHelper:hover:not(:active) {
|
||||
line.helper:hover:not(:active) {
|
||||
stroke: blue;
|
||||
stroke-opacity: 0.2;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.pathHelper {
|
||||
path.helper {
|
||||
fill: none;
|
||||
stroke: rgba(0, 0, 0, 0);
|
||||
stroke-width: 16px;
|
||||
}
|
||||
.pathHelper:hover:not(:active) {
|
||||
path.helper:hover:not(:active) {
|
||||
stroke: blue;
|
||||
stroke-opacity: 0.2;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
|
||||
.circleHelper {
|
||||
circle.helper {
|
||||
fill: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.circleHelper:hover:not(:active) {
|
||||
circle.helper:hover:not(:active) {
|
||||
fill: blue;
|
||||
fill-opacity: 0.2;
|
||||
cursor: grab;
|
||||
|
|
@ -118,12 +93,6 @@ text.highlight {
|
|||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
/* .arrow.selected {
|
||||
stroke: blue;
|
||||
stroke-width: 4px;
|
||||
} */
|
||||
|
||||
|
||||
#arrowEnd {
|
||||
fill: context-stroke;
|
||||
}
|
||||
|
|
@ -139,14 +108,43 @@ line.selected, circle.selected {
|
|||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
text.selected, text.selected:hover {
|
||||
.draggableText.selected, .draggableText.selected:hover {
|
||||
fill: blue;
|
||||
font-weight: 600;
|
||||
}
|
||||
text:hover:not(:active) {
|
||||
.draggableText:hover:not(:active) {
|
||||
fill: blue;
|
||||
cursor: grab;
|
||||
}
|
||||
text.helper {
|
||||
fill: rgba(0,0,0,0);
|
||||
stroke: rgba(0,0,0,0);
|
||||
stroke-width: 8px;
|
||||
}
|
||||
text.helper:hover {
|
||||
stroke: blue;
|
||||
stroke-opacity: 0.2;
|
||||
}
|
||||
|
||||
.draggableText, .draggableText.highlight {
|
||||
user-select: none;
|
||||
/* 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;
|
||||
stroke-linecap: butt;
|
||||
stroke-linejoin: miter;
|
||||
stroke-opacity: 1;
|
||||
fill-opacity:1;
|
||||
/* font-weight: 800; */
|
||||
}
|
||||
|
||||
.draggableText.highlight {
|
||||
fill: green;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.highlight {
|
||||
stroke: green;
|
||||
|
|
@ -156,7 +154,7 @@ text:hover:not(:active) {
|
|||
.arrow.error {
|
||||
stroke: rgb(230,0,0);
|
||||
}
|
||||
text.error, tspan.error {
|
||||
.draggableText.error, tspan.error {
|
||||
fill: rgb(230,0,0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue