Skip to content

Field overlay view layer for keep in/out zones #915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lyssia-Seiden wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Field overlay view layer for keep in/out zones #915

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ce83274
begin work on adding overlay, need uuids for each overlay type
LewisSeiden Nov 9, 2024
7f7645c
added uuids for each overlay instance
LewisSeiden Nov 11, 2024
41aa96f
default on field overlays
LewisSeiden Nov 11, 2024
05f0939
run fmt
LewisSeiden Nov 11, 2024
a9d79db
rename FieldOverlay layer to Zones, hide disabled zone constraints
LewisSeiden Nov 13, 2024
693cbce
run fmt
LewisSeiden Nov 14, 2024
34e4a48
Merge branch 'main' into always-visible-field-overlays
shueja Nov 14, 2024
9553cac
Add click-to-select, changed appearance of keepin rect
shueja Nov 18, 2024
a8f3a2c
Merge branch 'main' into always-visible-field-overlays
oh-yes-0-fps Dec 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/components/field/svg/FieldOverlayRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,17 @@ class FieldOverlayRoot extends Component<Props, State> {
<FieldImage2024 />
</>
)}

{layers[ViewLayers.FieldOverlays] &&
doc.pathlist.activePath.params.constraints.map((c) => {

@shueja shueja Nov 12, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be just the enabled constraints, and additionally filter out the one that's selected (if any)?

return (
<FieldConstraintDisplayLayer
points={doc.pathlist.activePath.params.waypoints}
constraint={c as IConstraintStoreKeyed<ConstraintKey>}
lineColor="transparent"
></FieldConstraintDisplayLayer>
);
})}
{layers[ViewLayers.Grid] && <FieldGrid></FieldGrid>}
{/* Waypoint mouse capture*/}

Expand Down Expand Up @@ -373,7 +384,6 @@ class FieldOverlayRoot extends Component<Props, State> {
lineColor="var(--select-yellow)"
></FieldConstraintDisplayLayer>
)}

{!doc.isSidebarConstraintSelected &&
doc.isSidebarConstraintHovered && (
<FieldConstraintDisplayLayer
Expand Down
7 changes: 4 additions & 3 deletions src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,30 +33,31 @@ const overlays = {
data={props.data.data}
start={props.start}
end={props.end}
lineColor={props.lineColor}
selected={props.data.selected}
></KeepInCircleOverlay>
),
KeepInRectangle: (props: OverlayProps<"KeepInRectangle">) => (
<KeepInRectangleOverlay
data={props.data.data}
start={props.start}
end={props.end}
lineColor={props.lineColor}
selected={props.data.selected}
></KeepInRectangleOverlay>
),
KeepInLane: (props: OverlayProps<"KeepInLane">) => (
<KeepInLaneOverlay
data={props.data.data}
start={props.start}
end={props.end}
selected={props.data.selected}
></KeepInLaneOverlay>
),
KeepOutCircle: (props: OverlayProps<"KeepOutCircle">) => (
<KeepOutCircleOverlay
data={props.data.data}
start={props.start}
end={props.end}
lineColor={props.lineColor}
selected={props.data.selected}
></KeepOutCircleOverlay>
),
StopPoint: () => <></>,
Expand Down
34 changes: 21 additions & 13 deletions src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import {
ConstraintKey,
DataMap
} from "../../../../document/ConstraintDefinitions";
import { doc } from "../../../../document/DocumentManager";
import { doc, uiState } from "../../../../document/DocumentManager";
import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
import { ViewLayers } from "../../../../document/UIData";

const STROKE = 0.1;
const DOT = 0.1;
Expand All @@ -16,9 +17,10 @@ type Props<K extends ConstraintKey> = {
data: IConstraintDataStore<K>;
start?: IHolonomicWaypointStore;
end?: IHolonomicWaypointStore;
lineColor: string;
selected: boolean;
};
class KeepInCircleOverlay extends Component<Props<"KeepInCircle">, object> {
id = crypto.randomUUID();
rootRef: React.RefObject<SVGGElement> = React.createRef<SVGGElement>();
componentDidMount() {
if (this.rootRef.current) {
Expand All @@ -30,11 +32,11 @@ class KeepInCircleOverlay extends Component<Props<"KeepInCircle">, object> {
})
.on("end", (_event) => doc.history.stopGroup())
.container(this.rootRef.current);
d3.select<SVGCircleElement, undefined>(`#dragTarget-keepInCircle`).call(
dragHandleDrag
);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInCircleDot`
`#dragTarget-keepInCircle` + this.id
).call(dragHandleDrag);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInCircleDot` + this.id
).call(dragHandleDrag);
const radiusHandleDrag = d3
.drag<SVGCircleElement, undefined>()
Expand All @@ -45,7 +47,7 @@ class KeepInCircleOverlay extends Component<Props<"KeepInCircle">, object> {
.on("end", (_event) => doc.history.stopGroup())
.container(this.rootRef.current);
d3.select<SVGCircleElement, undefined>(
`#dragRadiusTarget-keepInCircle`
`#dragRadiusTarget-keepInCircle` + this.id
).call(radiusHandleDrag);
}
}
Expand All @@ -68,25 +70,31 @@ class KeepInCircleOverlay extends Component<Props<"KeepInCircle">, object> {
const x = data.props.x.val;
const y = data.props.y.val;
const r = data.props.r.val;
const color =
uiState.layers[ViewLayers.Waypoints] &&
uiState.isNavbarWaypointSelected() &&
!this.props.selected
? "darkseagreen"
: "green";
return (
<g ref={this.rootRef}>
{/* Main Circle */}
<circle
cx={x}
cy={y}
r={r - STROKE / 2}
fill={"green"}
fill={color}
fillOpacity={0.1}
id="dragTarget-keepInCircle"
id={"dragTarget-keepInCircle" + this.id}
></circle>
{/* Center Dot */}
<circle
cx={x}
cy={y}
r={r < DOT * 2 ? 0.0 : DOT}
fill={"green"}
fill={color}
fillOpacity={1.0}
id="dragTarget-keepInCircleDot"
id={"dragTarget-keepInCircleDot" + this.id}
></circle>
{/* Radius Handle */}
<circle
Expand All @@ -95,10 +103,10 @@ class KeepInCircleOverlay extends Component<Props<"KeepInCircle">, object> {
r={r - STROKE / 2}
fill={"transparent"}
pointerEvents={"visibleStroke"}
stroke={"green"}
stroke={color}
strokeWidth={STROKE}
strokeOpacity={1.0}
id="dragRadiusTarget-keepInCircle"
id={"dragRadiusTarget-keepInCircle" + this.id}
></circle>
</g>
);
Expand Down
27 changes: 18 additions & 9 deletions src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import {
import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
import * as d3 from "d3";
import { observer } from "mobx-react";
import { doc } from "../../../../document/DocumentManager";
import { doc, uiState } from "../../../../document/DocumentManager";
import { ViewLayers } from "../../../../document/UIData";

const STROKE = 0.02;
const DOT = 0.1;
Expand All @@ -16,8 +17,10 @@ type Props<K extends ConstraintKey> = {
data: IConstraintDataStore<K>;
start?: IHolonomicWaypointStore;
end?: IHolonomicWaypointStore;
selected: boolean;
};
class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
id = crypto.randomUUID();
rootRef: React.RefObject<SVGGElement> = React.createRef<SVGGElement>();
componentDidMount() {
if (this.rootRef.current) {
Expand All @@ -32,10 +35,10 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
})
.container(this.rootRef.current);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInLaneAbove`
`#dragTarget-keepInLaneAbove` + this.id
).call(dragHandleDrag);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInLaneBelow`
`#dragTarget-keepInLaneBelow` + this.id
).call(dragHandleDrag);
}
}
Expand Down Expand Up @@ -94,6 +97,12 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
(endBelowX + startBelowX) / 2,
(endBelowY + startBelowY) / 2
];
const color =
uiState.layers[ViewLayers.Waypoints] &&
uiState.isNavbarWaypointSelected() &&
!this.props.selected
? "darkseagreen"
: "green";
return (
<g ref={this.rootRef}>
{/* Lines */}
Expand All @@ -103,7 +112,7 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
x2={endAboveX}
y1={startAboveY}
y2={endAboveY}
stroke="green"
stroke={color}
strokeWidth={STROKE}
strokeOpacity={1.0}
id="line-keepInLaneAbove"
Expand All @@ -113,7 +122,7 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
x2={endBelowX}
y1={startBelowY}
y2={endBelowY}
stroke="green"
stroke={color}
strokeWidth={STROKE}
strokeOpacity={1.0}
id="line-keepInLaneBelow"
Expand All @@ -122,19 +131,19 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
cx={midAboveX}
cy={midAboveY}
r={DOT}
fill={"green"}
fill={color}
fillOpacity={1.0}
pointerEvents={"visible"}
id="dragTarget-keepInLaneAbove"
id={"dragTarget-keepInLaneAbove" + this.id}
></circle>
<circle
cx={midBelowX}
cy={midBelowY}
r={DOT}
fill={"green"}
fill={color}
fillOpacity={1.0}
pointerEvents={"visible"}
id="dragTarget-keepInLaneBelow"
id={"dragTarget-keepInLaneBelow" + this.id}
></circle>
</g>
);
Expand Down
46 changes: 27 additions & 19 deletions src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import {
ConstraintKey,
DataMap
} from "../../../../document/ConstraintDefinitions";
import { doc } from "../../../../document/DocumentManager";
import { doc, uiState } from "../../../../document/DocumentManager";
import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
import { ViewLayers } from "../../../../document/UIData";

const STROKE = 0.1;
const DOT = 0.1;
Expand All @@ -16,12 +17,13 @@ type Props<K extends ConstraintKey> = {
data: IConstraintDataStore<K>;
start?: IHolonomicWaypointStore;
end?: IHolonomicWaypointStore;
lineColor: string;
selected: boolean;
};
class KeepInRectangleOverlay extends Component<
Props<"KeepInRectangle">,
object
> {
id = crypto.randomUUID();
rootRef: React.RefObject<SVGGElement> = React.createRef<SVGGElement>();
componentDidMount() {
if (this.rootRef.current) {
Expand All @@ -38,7 +40,7 @@ class KeepInRectangleOverlay extends Component<
})
.container(this.rootRef.current);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInRectangle`
`#dragTarget-keepInRectangle` + this.id
).call(dragHandleDrag);

const dragHandleDragW = d3
Expand All @@ -53,7 +55,7 @@ class KeepInRectangleOverlay extends Component<
})
.container(this.rootRef.current);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInRectangleW`
`#dragTarget-keepInRectangleW` + this.id
).call(dragHandleDragW);

const dragHandleDragWH = d3
Expand All @@ -68,7 +70,7 @@ class KeepInRectangleOverlay extends Component<
})
.container(this.rootRef.current);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInRectangleWH`
`#dragTarget-keepInRectangleWH` + this.id
).call(dragHandleDragWH);

const dragHandleDragH = d3
Expand All @@ -83,7 +85,7 @@ class KeepInRectangleOverlay extends Component<
})
.container(this.rootRef.current);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInRectangleH`
`#dragTarget-keepInRectangleH` + this.id
).call(dragHandleDragH);

const dragHandleRegion = d3
Expand All @@ -98,7 +100,7 @@ class KeepInRectangleOverlay extends Component<
})
.container(this.rootRef.current);
d3.select<SVGCircleElement, undefined>(
`#dragTarget-keepInRectangleRegion`
`#dragTarget-keepInRectangleRegion` + this.id
).call(dragHandleRegion);
}
}
Expand Down Expand Up @@ -144,6 +146,12 @@ class KeepInRectangleOverlay extends Component<
const y = data.props.y.val;
const w = data.props.w.val;
const h = data.props.h.val;
const color =
uiState.layers[ViewLayers.Waypoints] &&
uiState.isNavbarWaypointSelected() &&
!this.props.selected
? "darkseagreen"
: "green";
return (
<g ref={this.rootRef}>
{/* Fill Rect*/}
Expand All @@ -152,9 +160,9 @@ class KeepInRectangleOverlay extends Component<
y={h >= 0 ? y : y + h}
width={Math.abs(w)}
height={Math.abs(h)}
fill={"green"}
fill={color}
fillOpacity={0.1}
id="dragTarget-keepInRectangleRegion"
id={"dragTarget-keepInRectangleRegion" + this.id}
></rect>
{/*Border Rect*/}
<rect
Expand All @@ -164,43 +172,43 @@ class KeepInRectangleOverlay extends Component<
height={Math.abs(h)}
fill={"transparent"}
pointerEvents={"visibleStroke"}
stroke={"green"}
stroke={color}
strokeWidth={STROKE}
strokeOpacity={1.0}
id="dragTarget-keepInRectangleRegion"
id={"dragTarget-keepInRectangleRegion" + this.id}
></rect>
{/* Corners */}
<circle
cx={x}
cy={y}
r={DOT}
fill={"green"}
fill={color}
fillOpacity={1.0}
id="dragTarget-keepInRectangle"
id={"dragTarget-keepInRectangle" + this.id}
></circle>
<circle
cx={x + w}
cy={y}
r={DOT}
fill={"green"}
fill={color}
fillOpacity={1.0}
id="dragTarget-keepInRectangleW"
id={"dragTarget-keepInRectangleW" + this.id}
></circle>
<circle
cx={x + w}
cy={y + h}
r={DOT}
fill={"green"}
fill={color}
fillOpacity={1.0}
id="dragTarget-keepInRectangleWH"
id={"dragTarget-keepInRectangleWH" + this.id}
></circle>
<circle
cx={x}
cy={y + h}
r={DOT}
fill={"green"}
fill={color}
fillOpacity={1.0}
id="dragTarget-keepInRectangleH"
id={"dragTarget-keepInRectangleH" + this.id}
></circle>
</g>
);
Expand Down
Loading