Skip to content

Commit

Permalink
ui-speedspacechart: fix-detailsbox-display
Browse files Browse the repository at this point in the history
- add showReticleLayer state in SpeedSpaceChart.tsx
- display or not ReticleLayer while onMouseDown or onMouseLeave SettingsPanel
Yohh authored and Math-R committed Jul 11, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 46ceff3 commit 9b03a64
Showing 4 changed files with 30 additions and 19 deletions.
25 changes: 14 additions & 11 deletions ui-speedspacechart/src/components/SpeedSpaceChart.tsx
Original file line number Diff line number Diff line change
@@ -101,6 +101,7 @@ const SpeedSpaceChart = ({
: width;

const [showDetailsBox, setShowDetailsBox] = useState(false);
const [isMouseHoveringSettingsPanel, setIsMouseHoveringSettingsPanel] = useState(false);

const reset = () => {
setStore((prev) => ({
@@ -162,6 +163,7 @@ const SpeedSpaceChart = ({
color={backgroundColor}
store={store}
setStore={setStore}
setIsMouseHoveringSettingsPanel={setIsMouseHoveringSettingsPanel}
translations={translations}
/>
</div>
@@ -187,14 +189,14 @@ const SpeedSpaceChart = ({
<TickLayerY width={width} height={height} store={store} />
{store.layersDisplay.electricalProfiles && (
<ElectricalProfileLayer
width={width}
width={adjustedWidthRightAxis}
height={height + LINEAR_LAYERS_HEIGHTS.ELECTRICAL_PROFILES_HEIGHT}
store={store}
/>
)}
{store.layersDisplay.powerRestrictions && (
<PowerRestrictionsLayer
width={width}
width={adjustedWidthRightAxis}
marginTop={getLinearLayerMarginTop(height, store.layersDisplay)}
store={store}
/>
@@ -204,15 +206,16 @@ const SpeedSpaceChart = ({
{store.layersDisplay.declivities && (
<TickLayerYRight width={width} height={height} store={store} />
)}
<ReticleLayer
width={adjustedWidthRightAxis}
height={dynamicHeight}
heightOffset={dynamicHeightOffset}
store={store}
showDetailsBox={showDetailsBox}
setShowDetailsBox={setShowDetailsBox}
/>

{!isMouseHoveringSettingsPanel && (
<ReticleLayer
width={adjustedWidthRightAxis}
height={dynamicHeight}
heightOffset={dynamicHeightOffset}
store={store}
showDetailsBox={showDetailsBox}
setShowDetailsBox={setShowDetailsBox}
/>
)}
<FrontInteractivityLayer
width={WIDTH_OFFSET}
height={dynamicHeightOffset}
10 changes: 4 additions & 6 deletions ui-speedspacechart/src/components/common/DetailsBox.tsx
Original file line number Diff line number Diff line change
@@ -38,14 +38,12 @@ const DetailsBox = ({
let rightOffset = 0;
let bottomOffset = 0;

const adaptedOffset = store.isSettingsPanelOpened ? 641 : 115;

// find out if the box is going out off the right side of the canvas
if (curveX + MARGIN_LEFT + 115 > width - MARGIN_RIGHT - 10) {
rightOffset = 127;
}
if (curveX + MARGIN_LEFT + adaptedOffset > width - MARGIN_RIGHT - 10) rightOffset = 127;
// find out if the box is going out off the bottom side of the canvas
if (curveY + MARGIN_TOP + 180 > height - MARGIN_BOTTOM - 10) {
bottomOffset = 192;
}
if (curveY + MARGIN_TOP + 180 > height - MARGIN_BOTTOM - 10) bottomOffset = 192;

const boxX = curveX + MARGIN_LEFT + 6 - rightOffset;
const boxY = curveY + MARGIN_TOP + 6 - bottomOffset;
12 changes: 11 additions & 1 deletion ui-speedspacechart/src/components/common/SettingsPanel.tsx
Original file line number Diff line number Diff line change
@@ -10,11 +10,19 @@ type SettingsPanelProps = {
color: string;
store: Store;
setStore: React.Dispatch<React.SetStateAction<Store>>;
setIsMouseHoveringSettingsPanel: React.Dispatch<React.SetStateAction<boolean>>;
translations?: SpeedSpaceChartProps['translations'];
};

const SettingsPanel = ({ color, store, setStore, translations }: SettingsPanelProps) => {
const SettingsPanel = ({
color,
store,
setStore,
setIsMouseHoveringSettingsPanel,
translations,
}: SettingsPanelProps) => {
const closeSettingsPanel = () => {
setIsMouseHoveringSettingsPanel(false);
setStore((prev) => ({
...prev,
isSettingsPanelOpened: false,
@@ -26,6 +34,8 @@ const SettingsPanel = ({ color, store, setStore, translations }: SettingsPanelPr
id="settings-panel"
style={{ background: `rgba(${color.substring(4, color.length - 1)}, 0.4)` }}
className="font-sans"
onMouseEnter={() => setIsMouseHoveringSettingsPanel(true)}
onMouseLeave={() => setIsMouseHoveringSettingsPanel(false)}
>
<div className="settings-panel-section">
<div className="settings-panel-section-title">
2 changes: 1 addition & 1 deletion ui-speedspacechart/src/styles/main.css
Original file line number Diff line number Diff line change
@@ -130,7 +130,7 @@
#settings-panel {
position: absolute;
display: flex;
height: 27.5rem;
height: 27.625rem;
width: 32.875rem;
margin-right: 20px;
color: rgb(49, 46, 43);

0 comments on commit 9b03a64

Please sign in to comment.