Skip to content
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

[fix] Image export legend positioning #2895

Merged
merged 6 commits into from
Jan 6, 2025
Merged

[fix] Image export legend positioning #2895

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3724486
[fix] Image export legend positioning
igorDykhta Jul 22, 2024
c80bb56
fix lint
igorDykhta Jan 4, 2025
479f4f0
fix lint
igorDykhta Jan 4, 2025
f10e4c7
nit fixes
igorDykhta Jan 6, 2025
d223edd
nit - try to fix github warnings
igorDykhta Jan 6, 2025
9cf0bfd
Merge branch 'master' into igr/ups/image-export-legend-positioning-2
igorDykhta Jan 6, 2025
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
50 changes: 34 additions & 16 deletions src/components/src/hooks/use-legend-position.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,23 +40,18 @@
};
const MIN_CONTENT_HEIGHT = 100;

/**
* Returns a function that calculates the anchored position of the map legend
* that is being dragged.
*/
export default function useLegendPosition({
export type UseCalcLegendPositionProps = {
legendContentRef: React.MutableRefObject<HTMLElement | null>;
isSidePanelShown: boolean;
sidePanelWidth: number;
};

export function useCalcLegendPosition({
legendContentRef,
isSidePanelShown,
settings,
onChangeSettings,
theme
}: Params): ReturnType {
const pos = settings?.position ?? DEFAULT_POSITION;
const contentHeight = settings?.contentHeight ?? -1;
const positionStyles = useMemo(() => ({[pos.anchorX]: pos.x, [pos.anchorY]: pos.y}), [pos]);
const startHeightRef = useRef(0);

const calcPosition = useCallback((): MapLegendControlSettings['position'] => {
sidePanelWidth
}: UseCalcLegendPositionProps) {
return useCallback((): MapLegendControlSettings['position'] => {
const root = legendContentRef.current?.closest('.kepler-gl');
const legendContent = legendContentRef.current;
if (!legendContent || !(root instanceof HTMLElement)) {
Expand All @@ -83,7 +78,31 @@
? {y: topOffset, anchorY: 'top'}
: {y: bottomOffset, anchorY: 'bottom'})
};
}, [isSidePanelShown]);

Check warning on line 81 in src/components/src/hooks/use-legend-position.ts

View workflow job for this annotation

GitHub Actions / build (18.x) 

React Hook useCallback has missing dependencies: 'legendContentRef' and 'sidePanelWidth'. Either include them or remove the dependency array
}

/**
* Returns a function that calculates the anchored position of the map legend
* that is being dragged.
*/
export default function useLegendPosition({
legendContentRef,
isSidePanelShown,
settings,
onChangeSettings,
theme
}: Params): ReturnType {
const pos = settings?.position ?? DEFAULT_POSITION;
const contentHeight = settings?.contentHeight ?? -1;
const positionStyles = useMemo(() => ({[pos.anchorX]: pos.x, [pos.anchorY]: pos.y}), [pos]);
const startHeightRef = useRef(0);
const sidePanelWidth = theme.sidePanel?.width || 0;

const calcPosition = useCalcLegendPosition({
legendContentRef,
isSidePanelShown,
sidePanelWidth
});
const updatePosition = useCallback(
() => onChangeSettings({position: calcPosition()}),
[calcPosition, onChangeSettings]
Expand Down Expand Up @@ -115,7 +134,6 @@
);

// Shift when side panel is shown/hidden
const sidePanelWidth = theme.sidePanel?.width || 0;
const posRef = useRef(pos);
posRef.current = pos;
useEffect(() => {
Expand Down
235 changes: 156 additions & 79 deletions src/components/src/map/map-legend-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {hasPortableWidth} from '@kepler.gl/utils';
import {Legend, DraggableDots, HorizontalResizeHandle} from '../common/icons';
import {MapControlButton} from '../common/styled-components';
import {RootContext} from '../context';
import useLegendPosition from '../hooks/use-legend-position';
import useLegendPosition, {MapLegendControlSettings} from '../hooks/use-legend-position';
import {withState} from '../injector';
import MapControlPanelFactory from './map-control-panel';
import MapControlTooltipFactory from './map-control-tooltip';
Expand Down Expand Up @@ -218,6 +218,48 @@ const DraggableLegend = withState(
})
) as FC<{children: React.ReactNode}>;

type ImageExportLegendProps = {
settings: MapLegendControlSettings;
isSidePanelShown: boolean;
children: React.ReactNode;
};

const ImageExportLegend = withTheme(({settings, isSidePanelShown, theme, children}) => {
const containerRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);
const legendContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);

const {positionStyles} = useLegendPosition({
legendContentRef,
isSidePanelShown,
theme,
settings,
onChangeSettings: () => {
// do nothing by default
}
});

const portalRoot = containerRef.current
?.closest('.export-map-instance')
?.querySelector('#default-deckgl-overlay-wrapper');

return (
<div ref={containerRef}>
{portalRoot
? createPortal(
<div
className="fixed-legend"
ref={legendContentRef}
style={{...positionStyles, position: 'absolute'}}
>
{children}
</div>,
portalRoot
)
: null}
</div>
);
}) as React.FC<ImageExportLegendProps>;

MapLegendPanelFactory.deps = [MapControlTooltipFactory, MapControlPanelFactory, MapLegendFactory];

interface MapLegendPanelIcons {
Expand All @@ -239,97 +281,132 @@ export type MapLegendPanelProps = {
isViewportUnsyncAllowed?: boolean;
onClickControlBtn?: (e?: MouseEvent) => void;
className: string;
settings: MapLegendControlSettings;
isSidePanelShown: boolean;
};
function MapLegendPanelFactory(
MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,
MapControlPanel: ReturnType<typeof MapControlPanelFactory>,
MapLegend: ReturnType<typeof MapLegendFactory>
): React.FC<MapLegendPanelProps> {
const defaultActionIcons = {
legend: Legend
};

const MapLegendPanel: React.FC<MapLegendPanelProps> = ({
theme,
layers,
mapControls,
scale,
onToggleMapControl,
isExport,
logoComponent,
actionIcons = defaultActionIcons,
mapState,
onToggleSplitMapViewport,
onClickControlBtn,
isViewportUnsyncAllowed = true,
className,
onLayerVisConfigChange
}) => {
const mapLegend = mapControls?.mapLegend || ({} as MapControlMapLegend);
const {active, disableEdit} = mapLegend || {};
const rootContext = useContext(RootContext);

const onClick = useCallback(() => {
onClickControlBtn?.();
if (mapControls?.mapDraw?.active) {
onToggleMapControl('mapDraw');
}
onToggleMapControl('mapLegend');
}, [onClickControlBtn, onToggleMapControl, mapControls]);
const onCloseClick = useCallback(
e => {
e.preventDefault();
onToggleMapControl('mapLegend');
},
[onToggleMapControl]
);
type MapLegendPanelComponentType = React.FC<MapLegendPanelProps>;

const defaultActionIcons = {
legend: Legend
};

if (!mapLegend.show) {
return null;
const MapLegendPanelComponent = ({
layers,
mapControls,
scale,
onToggleMapControl,
isExport,
logoComponent,
actionIcons = defaultActionIcons,
mapState,
onLayerVisConfigChange,
onToggleSplitMapViewport,
onClickControlBtn,
isViewportUnsyncAllowed = true,
className,
interactionConfig,
settings,
isSidePanelShown,

MapControlTooltip,
MapControlPanel,
MapLegend
}) => {
const mapLegend = mapControls?.mapLegend || ({} as MapControlMapLegend);
const {active, disableEdit} = mapLegend || {};
const rootContext = useContext(RootContext);

const onClick = useCallback(() => {
onClickControlBtn?.();
if (mapControls?.mapDraw?.active) {
onToggleMapControl('mapDraw');
}
const legendPanel = active ? (
<MapControlPanel
scale={scale}
header="header.layerLegend"
{...{onClick: onCloseClick, pinnable: false, disableClose: false}}
isExport={isExport}
logoComponent={logoComponent}
onToggleMapControl('mapLegend');
}, [onClickControlBtn, onToggleMapControl, mapControls]);
const onCloseClick = useCallback(
e => {
e.preventDefault();
onToggleMapControl('mapLegend');
},
[onToggleMapControl]
);

if (!mapLegend.show) {
return null;
}

const legendPanel = active ? (
<MapControlPanel
scale={scale}
header="header.layerLegend"
{...{onClick: onCloseClick, pinnable: false, disableClose: false}}
isExport={isExport}
logoComponent={logoComponent}
mapState={mapState}
onToggleSplitMapViewport={onToggleSplitMapViewport}
isViewportUnsyncAllowed={isViewportUnsyncAllowed}
className={className}
>
<MapLegend
layers={layers}
mapState={mapState}
onToggleSplitMapViewport={onToggleSplitMapViewport}
isViewportUnsyncAllowed={isViewportUnsyncAllowed}
className={className}
>
<MapLegend
layers={layers}
mapState={mapState}
disableEdit={disableEdit}
isExport={isExport}
onLayerVisConfigChange={onLayerVisConfigChange}
/>
</MapControlPanel>
) : null;
disableEdit={disableEdit}
isExport={isExport}
onLayerVisConfigChange={onLayerVisConfigChange}
/>
</MapControlPanel>
) : null;

return (
<>
{active
? hasPortableWidth(breakPointValues) || isExport
? legendPanel
: createPortal(
<DraggableLegend>{legendPanel}</DraggableLegend>,
rootContext?.current ?? document.body
)
: null}
return (
<>
{active ? (
hasPortableWidth(breakPointValues) ? (
legendPanel
) : isExport ? (
<ImageExportLegend isSidePanelShown={isSidePanelShown} settings={settings}>
{legendPanel}
</ImageExportLegend>
) : (
createPortal(
<DraggableLegend>{legendPanel}</DraggableLegend>,
rootContext?.current ?? document.body
)
)
) : null}
{!isExport ? (
<MapControlTooltip id="show-legend" message="tooltip.showLegend">
<MapControlButton className="map-control-button show-legend" onClick={onClick}>
<actionIcons.legend height="22px" />
</MapControlButton>
</MapControlTooltip>
</>
);
};
) : null}
</>
);
};

function MapLegendPanelFactory(
MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,
MapControlPanel: ReturnType<typeof MapControlPanelFactory>,
MapLegend: ReturnType<typeof MapLegendFactory>
): MapLegendPanelComponentType {
const MapLegendPanel = withState(
[],
state => {
const {activeSidePanel, mapControls} = state.demo?.keplerGl.map.uiState ?? {};
return {
isSidePanelShown: activeSidePanel,
settings: mapControls?.mapLegend?.settings,
MapControlTooltip,
MapControlPanel,
MapLegend
};
},
{setMapControlSettings}
)(MapLegendPanelComponent);

MapLegendPanel.displayName = 'MapLegendPanel';
return withTheme(MapLegendPanel);
return withTheme(MapLegendPanel as MapLegendPanelComponentType) as MapLegendPanelComponentType;
}

export default MapLegendPanelFactory;
3 changes: 2 additions & 1 deletion src/components/src/map/map-legend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,7 @@ export type LayerLegendHeaderProps = {
options?: {
showLayerName?: boolean;
};
isExport?: boolean;
};

const isRadiusChannel = visualChannel =>
Expand Down Expand Up @@ -453,7 +454,7 @@ function MapLegendFactory(
key={index}
width={containerW}
>
<LayerLegendHeader options={options} layer={layer} />
<LayerLegendHeader isExport={isExport} options={options} layer={layer} />
<LayerLegendContent
containerW={containerW}
layer={layer}
Expand Down
Loading
Loading