From ce832747ff4f4d6a586996e866e61a7bdef2e6bb Mon Sep 17 00:00:00 2001 From: Lewis-Seiden Date: Sat, 9 Nov 2024 00:11:45 -0800 Subject: [PATCH 1/7] begin work on adding overlay, need uuids for each overlay type --- src/components/field/svg/FieldOverlayRoot.tsx | 13 ++++++++++++- .../FieldConstraintDisplayLayer.tsx | 6 +++--- .../svg/constraintDisplay/KeepInCircleOverlay.tsx | 15 ++++++++------- .../constraintDisplay/KeepInRectangleOverlay.tsx | 1 - .../constraintDisplay/KeepOutCircleOverlay.tsx | 1 - src/document/UIData.tsx | 7 +++++++ 6 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/components/field/svg/FieldOverlayRoot.tsx b/src/components/field/svg/FieldOverlayRoot.tsx index 79b00a6475..c200ecf788 100644 --- a/src/components/field/svg/FieldOverlayRoot.tsx +++ b/src/components/field/svg/FieldOverlayRoot.tsx @@ -242,6 +242,18 @@ class FieldOverlayRoot extends Component { )} + + {layers[ViewLayers.FieldOverlays] && doc.pathlist.activePath.params.constraints.map(c => { + return ( + + } + lineColor="transparent" + > + ) + })} {layers[ViewLayers.Grid] && } {/* Waypoint mouse capture*/} @@ -373,7 +385,6 @@ class FieldOverlayRoot extends Component { lineColor="var(--select-yellow)" > )} - {!doc.isSidebarConstraintSelected && doc.isSidebarConstraintHovered && ( = { data: IConstraintStoreKeyed; @@ -33,7 +34,7 @@ const overlays = { data={props.data.data} start={props.start} end={props.end} - lineColor={props.lineColor} + id={randomUUID()} > ), KeepInRectangle: (props: OverlayProps<"KeepInRectangle">) => ( @@ -41,7 +42,6 @@ const overlays = { data={props.data.data} start={props.start} end={props.end} - lineColor={props.lineColor} > ), KeepInLane: (props: OverlayProps<"KeepInLane">) => ( @@ -56,7 +56,6 @@ const overlays = { data={props.data.data} start={props.start} end={props.end} - lineColor={props.lineColor} > ), StopPoint: () => <>, @@ -95,6 +94,7 @@ function FieldConstraintDisplayLayer(props: Props) { end={endIndex} lineColor={props.lineColor} id="display" + uuid= > {overlays[constraint.data.type]( // @ts-expect-error can't cast the constraint as the proper type. diff --git a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx index 416bb30d8c..43b574da5d 100644 --- a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx @@ -8,6 +8,7 @@ import { } from "../../../../document/ConstraintDefinitions"; import { doc } from "../../../../document/DocumentManager"; import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore"; +import { randomUUID } from "crypto"; const STROKE = 0.1; const DOT = 0.1; @@ -16,7 +17,7 @@ type Props = { data: IConstraintDataStore; start?: IHolonomicWaypointStore; end?: IHolonomicWaypointStore; - lineColor: string; + id: string; }; class KeepInCircleOverlay extends Component, object> { rootRef: React.RefObject = React.createRef(); @@ -30,11 +31,11 @@ class KeepInCircleOverlay extends Component, object> { }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); - d3.select(`#dragTarget-keepInCircle`).call( + d3.select(`#dragTarget-keepInCircle` + this.props.id).call( dragHandleDrag ); d3.select( - `#dragTarget-keepInCircleDot` + `#dragTarget-keepInCircleDot` + this.props.id ).call(dragHandleDrag); const radiusHandleDrag = d3 .drag() @@ -45,7 +46,7 @@ class KeepInCircleOverlay extends Component, object> { .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); d3.select( - `#dragRadiusTarget-keepInCircle` + `#dragRadiusTarget-keepInCircle` + this.props.id ).call(radiusHandleDrag); } } @@ -77,7 +78,7 @@ class KeepInCircleOverlay extends Component, object> { r={r - STROKE / 2} fill={"green"} fillOpacity={0.1} - id="dragTarget-keepInCircle" + id={"dragTarget-keepInCircle" + this.props.id} > {/* Center Dot */} , object> { r={r < DOT * 2 ? 0.0 : DOT} fill={"green"} fillOpacity={1.0} - id="dragTarget-keepInCircleDot" + id={"dragTarget-keepInCircleDot" + this.props.id} > {/* Radius Handle */} , object> { stroke={"green"} strokeWidth={STROKE} strokeOpacity={1.0} - id="dragRadiusTarget-keepInCircle" + id={"dragRadiusTarget-keepInCircle" + this.props.id} > ); diff --git a/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx index 8666c821a2..cfe38a7583 100644 --- a/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx @@ -16,7 +16,6 @@ type Props = { data: IConstraintDataStore; start?: IHolonomicWaypointStore; end?: IHolonomicWaypointStore; - lineColor: string; }; class KeepInRectangleOverlay extends Component< Props<"KeepInRectangle">, diff --git a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx index c163c55386..b0712ec1e5 100644 --- a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx @@ -16,7 +16,6 @@ type Props = { data: IConstraintDataStore; start?: IHolonomicWaypointStore; end?: IHolonomicWaypointStore; - lineColor: string; }; class KeepOutCircleOverlay extends Component, object> { rootRef: React.RefObject = React.createRef(); diff --git a/src/document/UIData.tsx b/src/document/UIData.tsx index 61673817d0..afa0423a49 100644 --- a/src/document/UIData.tsx +++ b/src/document/UIData.tsx @@ -1,4 +1,5 @@ import { + BorderOuter, Circle, CircleOutlined, CropFree, @@ -148,6 +149,12 @@ export const ViewData = { name: "Focus", icon: , default: false + }, + FieldOverlays: { + index: 6, + name: "FieldOverlays", + icon: , + default: false } }; From 7f7645c5775eabf41bf8697d45cafab0ab5f5734 Mon Sep 17 00:00:00 2001 From: Lewis-Seiden Date: Sun, 10 Nov 2024 22:34:06 -0800 Subject: [PATCH 2/7] added uuids for each overlay instance --- .../FieldConstraintDisplayLayer.tsx | 7 ++-- .../constraintDisplay/KeepInCircleOverlay.tsx | 27 ++++++------ .../constraintDisplay/KeepInLaneOverlay.tsx | 23 +++++++---- .../KeepInRectangleOverlay.tsx | 41 +++++++++++-------- .../KeepOutCircleOverlay.tsx | 27 +++++++----- 5 files changed, 73 insertions(+), 52 deletions(-) diff --git a/src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx b/src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx index 2b5f5feb9b..ab80b848b9 100644 --- a/src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx +++ b/src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx @@ -12,7 +12,6 @@ import PointAtOverlay from "./PointAtOverlay"; import KeepOutCircleOverlay from "./KeepOutCircleOverlay"; import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore"; import KeepInLaneOverlay from "./KeepInLaneOverlay"; -import { randomUUID } from "crypto"; export type OverlayProps = { data: IConstraintStoreKeyed; @@ -34,7 +33,7 @@ const overlays = { data={props.data.data} start={props.start} end={props.end} - id={randomUUID()} + selected={props.data.selected} > ), KeepInRectangle: (props: OverlayProps<"KeepInRectangle">) => ( @@ -42,6 +41,7 @@ const overlays = { data={props.data.data} start={props.start} end={props.end} + selected={props.data.selected} > ), KeepInLane: (props: OverlayProps<"KeepInLane">) => ( @@ -49,6 +49,7 @@ const overlays = { data={props.data.data} start={props.start} end={props.end} + selected={props.data.selected} > ), KeepOutCircle: (props: OverlayProps<"KeepOutCircle">) => ( @@ -56,6 +57,7 @@ const overlays = { data={props.data.data} start={props.start} end={props.end} + selected={props.data.selected} > ), StopPoint: () => <>, @@ -94,7 +96,6 @@ function FieldConstraintDisplayLayer(props: Props) { end={endIndex} lineColor={props.lineColor} id="display" - uuid= > {overlays[constraint.data.type]( // @ts-expect-error can't cast the constraint as the proper type. diff --git a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx index 43b574da5d..5c3461c565 100644 --- a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx @@ -6,9 +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 { randomUUID } from "crypto"; +import { ViewLayers } from "../../../../document/UIData"; const STROKE = 0.1; const DOT = 0.1; @@ -17,9 +17,10 @@ type Props = { data: IConstraintDataStore; start?: IHolonomicWaypointStore; end?: IHolonomicWaypointStore; - id: string; + selected: boolean; }; class KeepInCircleOverlay extends Component, object> { + id = crypto.randomUUID(); rootRef: React.RefObject = React.createRef(); componentDidMount() { if (this.rootRef.current) { @@ -31,11 +32,11 @@ class KeepInCircleOverlay extends Component, object> { }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); - d3.select(`#dragTarget-keepInCircle` + this.props.id).call( + d3.select(`#dragTarget-keepInCircle` + this.id).call( dragHandleDrag ); d3.select( - `#dragTarget-keepInCircleDot` + this.props.id + `#dragTarget-keepInCircleDot` + this.id ).call(dragHandleDrag); const radiusHandleDrag = d3 .drag() @@ -46,7 +47,7 @@ class KeepInCircleOverlay extends Component, object> { .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); d3.select( - `#dragRadiusTarget-keepInCircle` + this.props.id + `#dragRadiusTarget-keepInCircle` + this.id ).call(radiusHandleDrag); } } @@ -69,6 +70,8 @@ class KeepInCircleOverlay extends Component, 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 ( {/* Main Circle */} @@ -76,18 +79,18 @@ class KeepInCircleOverlay extends Component, object> { cx={x} cy={y} r={r - STROKE / 2} - fill={"green"} + fill={color} fillOpacity={0.1} - id={"dragTarget-keepInCircle" + this.props.id} + id={"dragTarget-keepInCircle" + this.id} > {/* Center Dot */} {/* Radius Handle */} , object> { r={r - STROKE / 2} fill={"transparent"} pointerEvents={"visibleStroke"} - stroke={"green"} + stroke={color} strokeWidth={STROKE} strokeOpacity={1.0} - id={"dragRadiusTarget-keepInCircle" + this.props.id} + id={"dragRadiusTarget-keepInCircle" + this.id} > ); diff --git a/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx index d1fdf1e50c..1f0bb0bae4 100644 --- a/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx @@ -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; @@ -16,8 +17,10 @@ type Props = { data: IConstraintDataStore; start?: IHolonomicWaypointStore; end?: IHolonomicWaypointStore; + selected: boolean; }; class KeepInLaneOverlay extends Component, object> { + id = crypto.randomUUID(); rootRef: React.RefObject = React.createRef(); componentDidMount() { if (this.rootRef.current) { @@ -32,10 +35,10 @@ class KeepInLaneOverlay extends Component, object> { }) .container(this.rootRef.current); d3.select( - `#dragTarget-keepInLaneAbove` + `#dragTarget-keepInLaneAbove` + this.id ).call(dragHandleDrag); d3.select( - `#dragTarget-keepInLaneBelow` + `#dragTarget-keepInLaneBelow` + this.id ).call(dragHandleDrag); } } @@ -94,6 +97,8 @@ class KeepInLaneOverlay extends Component, object> { (endBelowX + startBelowX) / 2, (endBelowY + startBelowY) / 2 ]; + const color = uiState.layers[ViewLayers.Waypoints] && + uiState.isNavbarWaypointSelected() && !this.props.selected ? "darkseagreen": "green"; return ( {/* Lines */} @@ -103,7 +108,7 @@ class KeepInLaneOverlay extends Component, object> { x2={endAboveX} y1={startAboveY} y2={endAboveY} - stroke="green" + stroke={color} strokeWidth={STROKE} strokeOpacity={1.0} id="line-keepInLaneAbove" @@ -113,7 +118,7 @@ class KeepInLaneOverlay extends Component, object> { x2={endBelowX} y1={startBelowY} y2={endBelowY} - stroke="green" + stroke={color} strokeWidth={STROKE} strokeOpacity={1.0} id="line-keepInLaneBelow" @@ -122,19 +127,19 @@ class KeepInLaneOverlay extends Component, object> { cx={midAboveX} cy={midAboveY} r={DOT} - fill={"green"} + fill={color} fillOpacity={1.0} pointerEvents={"visible"} - id="dragTarget-keepInLaneAbove" + id={"dragTarget-keepInLaneAbove" + this.id} > ); diff --git a/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx index cfe38a7583..225ddcbd19 100644 --- a/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx @@ -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; @@ -16,11 +17,13 @@ type Props = { data: IConstraintDataStore; start?: IHolonomicWaypointStore; end?: IHolonomicWaypointStore; + selected: boolean; }; class KeepInRectangleOverlay extends Component< Props<"KeepInRectangle">, object > { + id = crypto.randomUUID(); rootRef: React.RefObject = React.createRef(); componentDidMount() { if (this.rootRef.current) { @@ -37,7 +40,7 @@ class KeepInRectangleOverlay extends Component< }) .container(this.rootRef.current); d3.select( - `#dragTarget-keepInRectangle` + `#dragTarget-keepInRectangle` + this.id ).call(dragHandleDrag); const dragHandleDragW = d3 @@ -52,7 +55,7 @@ class KeepInRectangleOverlay extends Component< }) .container(this.rootRef.current); d3.select( - `#dragTarget-keepInRectangleW` + `#dragTarget-keepInRectangleW` + this.id ).call(dragHandleDragW); const dragHandleDragWH = d3 @@ -67,7 +70,7 @@ class KeepInRectangleOverlay extends Component< }) .container(this.rootRef.current); d3.select( - `#dragTarget-keepInRectangleWH` + `#dragTarget-keepInRectangleWH` + this.id ).call(dragHandleDragWH); const dragHandleDragH = d3 @@ -82,7 +85,7 @@ class KeepInRectangleOverlay extends Component< }) .container(this.rootRef.current); d3.select( - `#dragTarget-keepInRectangleH` + `#dragTarget-keepInRectangleH` + this.id ).call(dragHandleDragH); const dragHandleRegion = d3 @@ -97,7 +100,7 @@ class KeepInRectangleOverlay extends Component< }) .container(this.rootRef.current); d3.select( - `#dragTarget-keepInRectangleRegion` + `#dragTarget-keepInRectangleRegion` + this.id ).call(dragHandleRegion); } } @@ -143,6 +146,8 @@ 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 ( {/* Fill Rect*/} @@ -151,9 +156,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} > {/*Border Rect*/} {/* Corners */} ); diff --git a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx index b0712ec1e5..fa1a290399 100644 --- a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx @@ -6,8 +6,10 @@ 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"; +import { IConstraintStoreKeyed } from "../../../../document/ConstraintStore"; const STROKE = 0.1; const DOT = 0.1; @@ -16,8 +18,10 @@ type Props = { data: IConstraintDataStore; start?: IHolonomicWaypointStore; end?: IHolonomicWaypointStore; + selected: boolean; }; class KeepOutCircleOverlay extends Component, object> { + id = crypto.randomUUID(); rootRef: React.RefObject = React.createRef(); componentDidMount() { if (this.rootRef.current) { @@ -29,11 +33,11 @@ class KeepOutCircleOverlay extends Component, object> { }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); - d3.select(`#dragTarget-keepOutCircle`).call( + d3.select(`#dragTarget-keepOutCircle` + this.id).call( dragHandleDrag ); d3.select( - `#dragTarget-keepOutCircleDot` + `#dragTarget-keepOutCircleDot` + this.id ).call(dragHandleDrag); const radiusHandleDrag = d3 .drag() @@ -44,7 +48,7 @@ class KeepOutCircleOverlay extends Component, object> { .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); d3.select( - `#dragRadiusTarget-keepOutCircle` + `#dragRadiusTarget-keepOutCircle` + this.id ).call(radiusHandleDrag); } } @@ -67,6 +71,9 @@ class KeepOutCircleOverlay extends Component, object> { const x = data.props.x.val; const y = data.props.y.val; const r = data.props.r.val; + console.log(doc.selectedSidebarItem) + const color = (uiState.layers[ViewLayers.Waypoints] && + uiState.isNavbarWaypointSelected()) && !this.props.selected ? "rosybrown": "red"; return ( {/* Main Circle */} @@ -74,18 +81,18 @@ class KeepOutCircleOverlay extends Component, object> { cx={x} cy={y} r={r - STROKE / 2} - fill={"red"} + fill={color} fillOpacity={0.1} - id="dragTarget-keepOutCircle" + id={"dragTarget-keepOutCircle" + this.id} > {/* Center Dot */} {/* Radius Handle */} , object> { r={r - STROKE / 2} fill={"transparent"} pointerEvents={"visibleStroke"} - stroke={"red"} + stroke={color} strokeWidth={STROKE} strokeOpacity={1.0} - id="dragRadiusTarget-keepOutCircle" + id={"dragRadiusTarget-keepOutCircle" + this.id} > ); From 41aa96fba05ce2875d71a3f05107cfffec31f429 Mon Sep 17 00:00:00 2001 From: Lewis-Seiden Date: Sun, 10 Nov 2024 22:35:38 -0800 Subject: [PATCH 3/7] default on field overlays --- src/document/UIData.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/document/UIData.tsx b/src/document/UIData.tsx index afa0423a49..906dc3f40c 100644 --- a/src/document/UIData.tsx +++ b/src/document/UIData.tsx @@ -154,7 +154,7 @@ export const ViewData = { index: 6, name: "FieldOverlays", icon: , - default: false + default: true } }; From 05f0939b6fdf4dc6605c80860deec9f522bf1b28 Mon Sep 17 00:00:00 2001 From: Lewis-Seiden Date: Sun, 10 Nov 2024 22:44:00 -0800 Subject: [PATCH 4/7] run fmt --- src/components/field/svg/FieldOverlayRoot.tsx | 21 +++++++++---------- .../constraintDisplay/KeepInCircleOverlay.tsx | 14 ++++++++----- .../constraintDisplay/KeepInLaneOverlay.tsx | 8 +++++-- .../KeepInRectangleOverlay.tsx | 8 +++++-- .../KeepOutCircleOverlay.tsx | 17 ++++++++------- 5 files changed, 41 insertions(+), 27 deletions(-) diff --git a/src/components/field/svg/FieldOverlayRoot.tsx b/src/components/field/svg/FieldOverlayRoot.tsx index c200ecf788..8be9e88972 100644 --- a/src/components/field/svg/FieldOverlayRoot.tsx +++ b/src/components/field/svg/FieldOverlayRoot.tsx @@ -243,17 +243,16 @@ class FieldOverlayRoot extends Component { )} - {layers[ViewLayers.FieldOverlays] && doc.pathlist.activePath.params.constraints.map(c => { - return ( - - } - lineColor="transparent" - > - ) - })} + {layers[ViewLayers.FieldOverlays] && + doc.pathlist.activePath.params.constraints.map((c) => { + return ( + } + lineColor="transparent" + > + ); + })} {layers[ViewLayers.Grid] && } {/* Waypoint mouse capture*/} diff --git a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx index 5c3461c565..ea523996f7 100644 --- a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx @@ -32,9 +32,9 @@ class KeepInCircleOverlay extends Component, object> { }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); - d3.select(`#dragTarget-keepInCircle` + this.id).call( - dragHandleDrag - ); + d3.select( + `#dragTarget-keepInCircle` + this.id + ).call(dragHandleDrag); d3.select( `#dragTarget-keepInCircleDot` + this.id ).call(dragHandleDrag); @@ -70,8 +70,12 @@ class KeepInCircleOverlay extends Component, 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"; + const color = + uiState.layers[ViewLayers.Waypoints] && + uiState.isNavbarWaypointSelected() && + !this.props.selected + ? "darkseagreen" + : "green"; return ( {/* Main Circle */} diff --git a/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx index 1f0bb0bae4..cc68aae15e 100644 --- a/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx @@ -97,8 +97,12 @@ class KeepInLaneOverlay extends Component, object> { (endBelowX + startBelowX) / 2, (endBelowY + startBelowY) / 2 ]; - const color = uiState.layers[ViewLayers.Waypoints] && - uiState.isNavbarWaypointSelected() && !this.props.selected ? "darkseagreen": "green"; + const color = + uiState.layers[ViewLayers.Waypoints] && + uiState.isNavbarWaypointSelected() && + !this.props.selected + ? "darkseagreen" + : "green"; return ( {/* Lines */} diff --git a/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx index 225ddcbd19..3fd6087dc1 100644 --- a/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx @@ -146,8 +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"; + const color = + uiState.layers[ViewLayers.Waypoints] && + uiState.isNavbarWaypointSelected() && + !this.props.selected + ? "darkseagreen" + : "green"; return ( {/* Fill Rect*/} diff --git a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx index fa1a290399..d022aff717 100644 --- a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx @@ -9,7 +9,6 @@ import { import { doc, uiState } from "../../../../document/DocumentManager"; import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore"; import { ViewLayers } from "../../../../document/UIData"; -import { IConstraintStoreKeyed } from "../../../../document/ConstraintStore"; const STROKE = 0.1; const DOT = 0.1; @@ -33,9 +32,9 @@ class KeepOutCircleOverlay extends Component, object> { }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); - d3.select(`#dragTarget-keepOutCircle` + this.id).call( - dragHandleDrag - ); + d3.select( + `#dragTarget-keepOutCircle` + this.id + ).call(dragHandleDrag); d3.select( `#dragTarget-keepOutCircleDot` + this.id ).call(dragHandleDrag); @@ -71,9 +70,13 @@ class KeepOutCircleOverlay extends Component, object> { const x = data.props.x.val; const y = data.props.y.val; const r = data.props.r.val; - console.log(doc.selectedSidebarItem) - const color = (uiState.layers[ViewLayers.Waypoints] && - uiState.isNavbarWaypointSelected()) && !this.props.selected ? "rosybrown": "red"; + console.log(doc.selectedSidebarItem); + const color = + uiState.layers[ViewLayers.Waypoints] && + uiState.isNavbarWaypointSelected() && + !this.props.selected + ? "rosybrown" + : "red"; return ( {/* Main Circle */} From a9d79db78859c46f42e9c6220a4f72f3f38b4c99 Mon Sep 17 00:00:00 2001 From: Lewis-Seiden Date: Wed, 13 Nov 2024 15:31:15 -0800 Subject: [PATCH 5/7] rename FieldOverlay layer to Zones, hide disabled zone constraints --- src/components/field/svg/FieldOverlayRoot.tsx | 6 ++++-- src/document/UIData.tsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/field/svg/FieldOverlayRoot.tsx b/src/components/field/svg/FieldOverlayRoot.tsx index 8be9e88972..9a1ce8a071 100644 --- a/src/components/field/svg/FieldOverlayRoot.tsx +++ b/src/components/field/svg/FieldOverlayRoot.tsx @@ -243,8 +243,10 @@ class FieldOverlayRoot extends Component { )} - {layers[ViewLayers.FieldOverlays] && - doc.pathlist.activePath.params.constraints.map((c) => { + {layers[ViewLayers.Zones] && + doc.pathlist.activePath.params.constraints + .filter((c) => c.enabled && !c.selected) + .map((c) => { return ( , default: false }, - FieldOverlays: { + Zones: { index: 6, - name: "FieldOverlays", + name: "Zones", icon: , default: true } From 693cbcef80a83449ab36d34c449a7a364086f9fc Mon Sep 17 00:00:00 2001 From: Lewis-Seiden Date: Wed, 13 Nov 2024 16:04:14 -0800 Subject: [PATCH 6/7] run fmt --- src/components/field/svg/FieldOverlayRoot.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/field/svg/FieldOverlayRoot.tsx b/src/components/field/svg/FieldOverlayRoot.tsx index 9a1ce8a071..d9ca2f42e0 100644 --- a/src/components/field/svg/FieldOverlayRoot.tsx +++ b/src/components/field/svg/FieldOverlayRoot.tsx @@ -245,16 +245,16 @@ class FieldOverlayRoot extends Component { {layers[ViewLayers.Zones] && doc.pathlist.activePath.params.constraints - .filter((c) => c.enabled && !c.selected) - .map((c) => { - return ( - } - lineColor="transparent" - > - ); - })} + .filter((c) => c.enabled && !c.selected) + .map((c) => { + return ( + } + lineColor="transparent" + > + ); + })} {layers[ViewLayers.Grid] && } {/* Waypoint mouse capture*/} From 9553cacd148dfd53a3cdcea361f744d207f1b6e2 Mon Sep 17 00:00:00 2001 From: shueja-personal Date: Mon, 18 Nov 2024 12:20:49 -0800 Subject: [PATCH 7/7] Add click-to-select, changed appearance of keepin rect --- src/components/field/svg/FieldOverlayRoot.tsx | 71 ++++++------ .../FieldConstraintDisplayLayer.tsx | 30 ++++- .../constraintDisplay/KeepInCircleOverlay.tsx | 45 ++++---- .../constraintDisplay/KeepInLaneOverlay.tsx | 34 +++--- .../KeepInRectangleOverlay.tsx | 103 ++++++++---------- .../KeepOutCircleOverlay.tsx | 39 ++++--- .../svg/constraintDisplay/PointAtOverlay.tsx | 25 +++-- 7 files changed, 193 insertions(+), 154 deletions(-) diff --git a/src/components/field/svg/FieldOverlayRoot.tsx b/src/components/field/svg/FieldOverlayRoot.tsx index d9ca2f42e0..b25e5c01fa 100644 --- a/src/components/field/svg/FieldOverlayRoot.tsx +++ b/src/components/field/svg/FieldOverlayRoot.tsx @@ -243,18 +243,7 @@ class FieldOverlayRoot extends Component { )} - {layers[ViewLayers.Zones] && - doc.pathlist.activePath.params.constraints - .filter((c) => c.enabled && !c.selected) - .map((c) => { - return ( - } - lineColor="transparent" - > - ); - })} + {layers[ViewLayers.Grid] && } {/* Waypoint mouse capture*/} @@ -317,7 +306,6 @@ class FieldOverlayRoot extends Component { )} - {layers[ViewLayers.Waypoints] && uiState.isNavbarWaypointSelected() && ( { {layers[ViewLayers.Samples] && layers[ViewLayers.Trajectory] && ( )} + {/* Display field zones */} + {layers[ViewLayers.Zones] && + doc.pathlist.activePath.params.constraints + .filter((c) => c.enabled) + .map((c) => { + return ( + } + lineColor={c.selected ? "var(--select-yellow)":"transparent"} + clickable= {c.selected || !(uiState.layers[ViewLayers.Waypoints] && + uiState.isNavbarWaypointSelected())} + > + ); + })} + + {!layers[ViewLayers.Zones] && doc.isSidebarConstraintSelected && ( + + } + lineColor="var(--select-yellow)" + clickable={true} + > + )} + {!doc.isSidebarConstraintSelected && + doc.isSidebarConstraintHovered && ( + + } + lineColor="white" + clickable={false} + > + )} {layers[ViewLayers.Waypoints] && doc.pathlist.activePath.params.waypoints @@ -377,25 +402,7 @@ class FieldOverlayRoot extends Component { {eventMarkerSelected && ( )} - {doc.isSidebarConstraintSelected && ( - - } - lineColor="var(--select-yellow)" - > - )} - {!doc.isSidebarConstraintSelected && - doc.isSidebarConstraintHovered && ( - - } - lineColor="white" - > - )} + {layers[ViewLayers.Trajectory] && ( = { data: IConstraintStoreKeyed; start: IHolonomicWaypointStore; end: IHolonomicWaypointStore; lineColor: string; + select: ()=>void; + clickable: boolean; +}; +export type OverlayElementProps = { + data: IConstraintDataStore; + start?: IHolonomicWaypointStore; + end?: IHolonomicWaypointStore; + selected: boolean; + select: ()=>void; + clickable: boolean; }; const overlays = { PointAt: (props: OverlayProps<"PointAt">) => ( @@ -26,6 +37,9 @@ const overlays = { start={props.start} end={props.end} lineColor={props.lineColor} + selected={props.data.selected} + select={()=>{props.data.setSelected(true)}} + clickable={props.clickable} > ), KeepInCircle: (props: OverlayProps<"KeepInCircle">) => ( @@ -34,6 +48,8 @@ const overlays = { start={props.start} end={props.end} selected={props.data.selected} + select={()=>{props.data.setSelected(true)}} + clickable={props.clickable} > ), KeepInRectangle: (props: OverlayProps<"KeepInRectangle">) => ( @@ -42,6 +58,8 @@ const overlays = { start={props.start} end={props.end} selected={props.data.selected} + select={()=>{props.data.setSelected(true)}} + clickable={props.clickable} > ), KeepInLane: (props: OverlayProps<"KeepInLane">) => ( @@ -50,6 +68,8 @@ const overlays = { start={props.start} end={props.end} selected={props.data.selected} + select={()=>{props.data.setSelected(true)}} + clickable={props.clickable} > ), KeepOutCircle: (props: OverlayProps<"KeepOutCircle">) => ( @@ -58,6 +78,8 @@ const overlays = { start={props.start} end={props.end} selected={props.data.selected} + select={()=>{props.data.setSelected(true)}} + clickable={props.clickable} > ), StopPoint: () => <>, @@ -71,6 +93,7 @@ type Props = { constraint?: IConstraintStoreKeyed; points: IHolonomicWaypointStore[]; lineColor: string; + clickable: boolean; }; function FieldConstraintDisplayLayer(props: Props) { const constraint = props.constraint; @@ -83,19 +106,20 @@ function FieldConstraintDisplayLayer(props: Props) { data: constraint, start: constraint.getStartWaypoint(props.points), end: constraint.getEndWaypoint(props.points), - lineColor: props.lineColor + lineColor: props.lineColor, + clickable: props.clickable }; if (startIndex === undefined) { return <>; } return ( - + {overlays[constraint.data.type]( // @ts-expect-error can't cast the constraint as the proper type. diff --git a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx index ea523996f7..a2d089f610 100644 --- a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx @@ -9,17 +9,15 @@ import { import { doc, uiState } from "../../../../document/DocumentManager"; import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore"; import { ViewLayers } from "../../../../document/UIData"; +import { OverlayElementProps } from "./FieldConstraintDisplayLayer"; const STROKE = 0.1; const DOT = 0.1; +const SELECT_COLOR = "var(--select-yellow)"; +const MOVABLE_COLOR = "green"; +const IMMOVABLE_COLOR = "darkseagreen"; -type Props = { - data: IConstraintDataStore; - start?: IHolonomicWaypointStore; - end?: IHolonomicWaypointStore; - selected: boolean; -}; -class KeepInCircleOverlay extends Component, object> { +class KeepInCircleOverlay extends Component, object> { id = crypto.randomUUID(); rootRef: React.RefObject = React.createRef(); componentDidMount() { @@ -29,6 +27,7 @@ class KeepInCircleOverlay extends Component, object> { .on("drag", (event) => this.dragPointTranslate(event)) .on("start", () => { doc.history.startGroup(() => {}); + this.props.select() }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); @@ -43,6 +42,7 @@ class KeepInCircleOverlay extends Component, object> { .on("drag", (event) => this.dragPointRadius(event)) .on("start", () => { doc.history.startGroup(() => {}); + this.props.select(); }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); @@ -53,31 +53,34 @@ class KeepInCircleOverlay extends Component, object> { } dragPointTranslate(event: any) { - this.props.data.x.set(this.props.data.serialize.props.x.val + event.dx); - this.props.data.y.set(this.props.data.serialize.props.y.val + event.dy); + this.props.data.x.set(this.props.data.serialize.props.x.val + event.dx); + this.props.data.y.set(this.props.data.serialize.props.y.val + event.dy); } dragPointRadius(event: any) { - const dx = event.x - this.props.data.serialize.props.x.val; - const dy = event.y - this.props.data.serialize.props.y.val; - const r = Math.sqrt(dx * dx + dy * dy); + const dx = event.x - this.props.data.serialize.props.x.val; + const dy = event.y - this.props.data.serialize.props.y.val; + const r = Math.sqrt(dx * dx + dy * dy); - this.props.data.r.set(r); + this.props.data.r.set(r); } + getColor() : string { + if (this.props.selected) return SELECT_COLOR; + if (this.props.clickable) return MOVABLE_COLOR; + return IMMOVABLE_COLOR; + } render() { const data = this.props.data.serialize as DataMap["KeepInCircle"]; 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"; + const color = this.getColor(); return ( - + { + if (this.props.clickable) this.props.select(); + }}> {/* Main Circle */} , object> { fill={color} fillOpacity={0.1} id={"dragTarget-keepInCircle" + this.id} + pointerEvents={"visibleStroke"} > {/* Center Dot */} , object> { fill={color} fillOpacity={1.0} id={"dragTarget-keepInCircleDot" + this.id} + pointerEvents={"visible"} > {/* Radius Handle */} = { - data: IConstraintDataStore; - start?: IHolonomicWaypointStore; - end?: IHolonomicWaypointStore; - selected: boolean; -}; -class KeepInLaneOverlay extends Component, object> { +class KeepInLaneOverlay extends Component, object> { id = crypto.randomUUID(); rootRef: React.RefObject = React.createRef(); componentDidMount() { @@ -29,6 +27,7 @@ class KeepInLaneOverlay extends Component, object> { .on("drag", (event) => this.dragPointTolerance(event)) .on("start", () => { doc.history.startGroup(() => {}); + this.props.select(); }) .on("end", (_event) => { doc.history.stopGroup(); @@ -62,6 +61,13 @@ class KeepInLaneOverlay extends Component, object> { Math.hypot(dx, dy); data.tolerance.set(dist); } + + getColor() : string { + if (this.props.selected) return SELECT_COLOR; + if (this.props.clickable) return MOVABLE_COLOR; + return IMMOVABLE_COLOR; + } + render() { const data = this.props.data.serialize as DataMap["KeepInLane"]; const tolerance = data.props.tolerance.val + STROKE / 2; @@ -97,14 +103,12 @@ class KeepInLaneOverlay extends Component, object> { (endBelowX + startBelowX) / 2, (endBelowY + startBelowY) / 2 ]; - const color = - uiState.layers[ViewLayers.Waypoints] && - uiState.isNavbarWaypointSelected() && - !this.props.selected - ? "darkseagreen" - : "green"; + const color = this.getColor(); return ( - + { + if (this.props.clickable) this.props.select(); + }}> {/* Lines */} , object> { strokeWidth={STROKE} strokeOpacity={1.0} id="line-keepInLaneAbove" + pointerEvents={"none"} > , object> { strokeWidth={STROKE} strokeOpacity={1.0} id="line-keepInLaneBelow" + pointerEvents={"none"} > = { - data: IConstraintDataStore; - start?: IHolonomicWaypointStore; - end?: IHolonomicWaypointStore; - selected: boolean; -}; class KeepInRectangleOverlay extends Component< - Props<"KeepInRectangle">, + OverlayElementProps<"KeepInRectangle">, object > { id = crypto.randomUUID(); rootRef: React.RefObject = React.createRef(); componentDidMount() { if (this.rootRef.current) { + const startDrag = (event: DragEvent) => { + doc.history.startGroup(() => { }); + this.props.select(); + }; + const endDrag = () => { + this.fixWidthHeight(); + doc.history.stopGroup(); + }; // Theres probably a better way to do this const dragHandleDrag = d3 .drag() .on("drag", (event) => this.dragPointTranslate(event, false, false)) - .on("start", () => { - doc.history.startGroup(() => {}); - }) - .on("end", (_event) => { - this.fixWidthHeight(); - doc.history.stopGroup(); - }) + .on("start", startDrag) + .on("end", endDrag) .container(this.rootRef.current); d3.select( `#dragTarget-keepInRectangle` + this.id @@ -46,13 +47,8 @@ class KeepInRectangleOverlay extends Component< const dragHandleDragW = d3 .drag() .on("drag", (event) => this.dragPointTranslate(event, true, false)) - .on("start", () => { - doc.history.startGroup(() => {}); - }) - .on("end", (_event) => { - this.fixWidthHeight(); - doc.history.stopGroup(); - }) + .on("start", startDrag) + .on("end", endDrag) .container(this.rootRef.current); d3.select( `#dragTarget-keepInRectangleW` + this.id @@ -61,13 +57,8 @@ class KeepInRectangleOverlay extends Component< const dragHandleDragWH = d3 .drag() .on("drag", (event) => this.dragPointTranslate(event, true, true)) - .on("start", () => { - doc.history.startGroup(() => {}); - }) - .on("end", (_event) => { - this.fixWidthHeight(); - doc.history.stopGroup(); - }) + .on("start", startDrag) + .on("end", endDrag) .container(this.rootRef.current); d3.select( `#dragTarget-keepInRectangleWH` + this.id @@ -76,30 +67,20 @@ class KeepInRectangleOverlay extends Component< const dragHandleDragH = d3 .drag() .on("drag", (event) => this.dragPointTranslate(event, false, true)) - .on("start", () => { - doc.history.startGroup(() => {}); - }) - .on("end", (_event) => { - this.fixWidthHeight(); - doc.history.stopGroup(); - }) + .on("start", startDrag) + .on("end", endDrag) .container(this.rootRef.current); d3.select( `#dragTarget-keepInRectangleH` + this.id ).call(dragHandleDragH); const dragHandleRegion = d3 - .drag() + .drag() .on("drag", (event) => this.dragRegionTranslate(event)) - .on("start", () => { - doc.history.startGroup(() => {}); - }) - .on("end", (_event) => { - this.fixWidthHeight(); - doc.history.stopGroup(); - }) + .on("start", startDrag) + .on("end", endDrag) .container(this.rootRef.current); - d3.select( + d3.select( `#dragTarget-keepInRectangleRegion` + this.id ).call(dragHandleRegion); } @@ -126,7 +107,7 @@ class KeepInRectangleOverlay extends Component< if (this.props.data.serialize.props.w.val < 0.0) { this.props.data.x.set( this.props.data.serialize.props.x.val + - this.props.data.serialize.props.w.val + this.props.data.serialize.props.w.val ); this.props.data.w.set(-this.props.data.serialize.props.w.val); } @@ -134,26 +115,32 @@ class KeepInRectangleOverlay extends Component< if (this.props.data.serialize.props.h.val < 0.0) { this.props.data.y.set( this.props.data.serialize.props.y.val + - this.props.data.serialize.props.h.val + this.props.data.serialize.props.h.val ); this.props.data.h.set(-this.props.data.serialize.props.h.val); } } + getColor(): string { + if (this.props.selected) return SELECT_COLOR; + if (this.props.clickable) return MOVABLE_COLOR; + return IMMOVABLE_COLOR; + } render() { const data = this.props.data.serialize as DataMap["KeepInRectangle"]; const x = data.props.x.val; 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"; + let color = this.getColor(); + let movable = this.props.selected || this.props.clickable; + let visible = movable ? "visible" : "none"; + let visibleStroke = movable ? "visibleStroke" : "none"; return ( - + { + if (this.props.clickable) { this.props.select(); } + }} > {/* Fill Rect*/} = 0 ? x : x + w} @@ -161,8 +148,8 @@ class KeepInRectangleOverlay extends Component< width={Math.abs(w)} height={Math.abs(h)} fill={color} - fillOpacity={0.1} - id={"dragTarget-keepInRectangleRegion" + this.id} + fillOpacity={0.05} + pointerEvents={"none"} > {/*Border Rect*/} diff --git a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx index d022aff717..3f3565431c 100644 --- a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx +++ b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx @@ -9,17 +9,15 @@ import { import { doc, uiState } from "../../../../document/DocumentManager"; import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore"; import { ViewLayers } from "../../../../document/UIData"; +import { OverlayElementProps } from "./FieldConstraintDisplayLayer"; const STROKE = 0.1; const DOT = 0.1; +const SELECT_COLOR = "var(--select-yellow)"; +const MOVABLE_COLOR = "red"; +const IMMOVABLE_COLOR = "rosybrown"; -type Props = { - data: IConstraintDataStore; - start?: IHolonomicWaypointStore; - end?: IHolonomicWaypointStore; - selected: boolean; -}; -class KeepOutCircleOverlay extends Component, object> { +class KeepOutCircleOverlay extends Component, object> { id = crypto.randomUUID(); rootRef: React.RefObject = React.createRef(); componentDidMount() { @@ -28,7 +26,8 @@ class KeepOutCircleOverlay extends Component, object> { .drag() .on("drag", (event) => this.dragPointTranslate(event)) .on("start", () => { - doc.history.startGroup(() => {}); + doc.history.startGroup(() => { }); + this.props.select(); }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); @@ -42,7 +41,8 @@ class KeepOutCircleOverlay extends Component, object> { .drag() .on("drag", (event) => this.dragPointRadius(event)) .on("start", () => { - doc.history.startGroup(() => {}); + doc.history.startGroup(() => { }); + this.props.select(); }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); @@ -65,20 +65,23 @@ class KeepOutCircleOverlay extends Component, object> { this.props.data.r.set(r); } + getColor(): string { + if (this.props.selected) return SELECT_COLOR; + if (this.props.clickable) return MOVABLE_COLOR; + return IMMOVABLE_COLOR; + } + render() { const data = this.props.data.serialize as DataMap["KeepOutCircle"]; const x = data.props.x.val; const y = data.props.y.val; const r = data.props.r.val; - console.log(doc.selectedSidebarItem); - const color = - uiState.layers[ViewLayers.Waypoints] && - uiState.isNavbarWaypointSelected() && - !this.props.selected - ? "rosybrown" - : "red"; + let color = this.getColor(); return ( - + { + if (this.props.clickable) this.props.select(); + }}> {/* Main Circle */} , object> { fill={color} fillOpacity={0.1} id={"dragTarget-keepOutCircle" + this.id} + pointerEvents={"none"} > {/* Center Dot */} , object> { fill={color} fillOpacity={1.0} id={"dragTarget-keepOutCircleDot" + this.id} + pointerEvents={"visible"} > {/* Radius Handle */} = { - data: IConstraintDataStore; - start?: IHolonomicWaypointStore; - end?: IHolonomicWaypointStore; - lineColor: string; -}; -class PointAtOverlay extends Component, object> { +class PointAtOverlay extends Component & {lineColor: string}, object> { rootRef: React.RefObject = React.createRef(); componentDidMount() { if (this.rootRef.current) { @@ -24,6 +19,7 @@ class PointAtOverlay extends Component, object> { .on("drag", (event) => this.dragPointTranslate(event)) .on("start", () => { doc.history.startGroup(() => {}); + this.props.select(); }) .on("end", (_event) => doc.history.stopGroup()) .container(this.rootRef.current); @@ -33,21 +29,25 @@ class PointAtOverlay extends Component, object> { } } dragPointTranslate(event: any) { - this.props.data.x.set(event.x); - this.props.data.y.set(event.y); + this.props.data.x.set(event.x); + this.props.data.y.set(event.y); } render() { if (this.props.start === undefined) { return <>; } const data = this.props.data.serialize as DataMap["PointAt"]; + const lineColor = this.props.selected ? "var(--select-yellow)" : "white" return ( - + { + if (this.props.clickable) this.props.select(); + }}> @@ -56,9 +56,10 @@ class PointAtOverlay extends Component, object> { cx={data.props.x.val} cy={data.props.y.val} r={0.2} - stroke={this.props.lineColor} + stroke={lineColor} strokeWidth={0.02} fill="transparent" + pointerEvents={"visible"} > );