diff --git a/src/core/Crust/Infobox/Frame/index.tsx b/src/core/Crust/Infobox/Frame/index.tsx index 542d732fb..260448961 100644 --- a/src/core/Crust/Infobox/Frame/index.tsx +++ b/src/core/Crust/Infobox/Frame/index.tsx @@ -23,6 +23,7 @@ export type Props = { size?: "small" | "medium" | "large"; position?: "right" | "middle" | "left"; visible?: boolean; + unselectOnClose?: boolean; noContent?: boolean; useMask?: boolean; typography?: Typography; @@ -39,6 +40,7 @@ export type Props = { onEntered?: () => void; onExit?: () => void; onExited?: () => void; + onClose?: () => void; }; const Frame: React.FC = ({ @@ -53,6 +55,7 @@ const Frame: React.FC = ({ outlineColor, outlineWidth, visible, + unselectOnClose, noContent, useMask, typography, @@ -70,6 +73,7 @@ const Frame: React.FC = ({ onEntered, onExit, onExited, + onClose, }) => { const isSmallWindow = useMedia("(max-width: 624px)"); const ref = useRef(null); @@ -84,8 +88,11 @@ const Frame: React.FC = ({ }, [open, noContent, isSmallWindow]); const handleClose = useCallback(() => { - setOpen(false); - }, []); + if (!unselectOnClose) { + setOpen(false); + } + onClose?.(); + }, [onClose, unselectOnClose]); useEffect(() => { if (!ref2.current) return; diff --git a/src/core/Crust/Infobox/index.tsx b/src/core/Crust/Infobox/index.tsx index afc1d039d..fd03fb48d 100644 --- a/src/core/Crust/Infobox/index.tsx +++ b/src/core/Crust/Infobox/index.tsx @@ -42,6 +42,7 @@ export type Props = { onBlockInsert?: (bi: number, i: number, pos?: "top" | "bottom") => void; renderBlock?: (block: BlockProps) => ReactNode; renderInsertionPopup?: (onSelect: (bi: number) => void, onClose: () => void) => ReactNode; + onClose?: () => void; }; const Infobox: React.FC = ({ @@ -61,6 +62,7 @@ const Infobox: React.FC = ({ onBlockMove, onBlockInsert, renderInsertionPopup, + onClose, ...props }) => { const { @@ -88,6 +90,7 @@ const Infobox: React.FC = ({ useMask={!!property?.useMask} outlineWidth={property?.outlineWidth} visible={visible} + unselectOnClose={property?.unselectOnClose} noContent={!blocks?.length} theme={infoboxTheme} backgroundColor={property?.bgcolor} @@ -101,7 +104,8 @@ const Infobox: React.FC = ({ onClick={() => selectedBlockId && onBlockSelect?.(undefined)} onEnter={setNotReadyToRender} onEntered={setReadyToRender} - onExit={setNotReadyToRender}> + onExit={setNotReadyToRender} + onClose={onClose}> {blocks?.map((b, i) => ( = { diff --git a/src/core/Crust/index.tsx b/src/core/Crust/index.tsx index 1e9800721..98e920e40 100644 --- a/src/core/Crust/index.tsx +++ b/src/core/Crust/index.tsx @@ -93,6 +93,7 @@ export type Props = { onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void; // infobox events onInfoboxMaskClick?: () => void; + onInfoboxClose?: () => void; onBlockSelect?: (id?: string) => void; onBlockChange?: ( blockId: string, @@ -141,6 +142,7 @@ export default function Crust({ onWidgetAlignmentUpdate, onWidgetAreaSelect, onInfoboxMaskClick, + onInfoboxClose, onBlockSelect, onBlockChange, onBlockMove, @@ -225,6 +227,7 @@ export default function Crust({ onBlockInsert={onBlockInsert} renderBlock={renderBlock} renderInsertionPopup={renderInfoboxInsertionPopup} + onClose={onInfoboxClose} /> ); diff --git a/src/core/Visualizer/hooks.ts b/src/core/Visualizer/hooks.ts index bbaef7de3..614630a45 100644 --- a/src/core/Visualizer/hooks.ts +++ b/src/core/Visualizer/hooks.ts @@ -140,6 +140,11 @@ export default function useHooks({ : undefined, [selectedLayer, defaultInfobox, blocks], ); + const handleInfoboxClose = useCallback(() => { + if (infobox?.property?.unselectOnClose) { + mapRef?.current?.layers.select(undefined); + } + }, [infobox]); // scene const [overriddenSceneProperty, overrideSceneProperty] = useOverriddenProperty(sceneProperty); @@ -264,6 +269,7 @@ export default function useHooks({ overrideSceneProperty, handleLayerEdit, onLayerEdit, + handleInfoboxClose, }; } diff --git a/src/core/Visualizer/index.tsx b/src/core/Visualizer/index.tsx index 0a1c3773a..d4dbf87bf 100644 --- a/src/core/Visualizer/index.tsx +++ b/src/core/Visualizer/index.tsx @@ -171,6 +171,7 @@ export default function Visualizer({ overrideSceneProperty, handleLayerEdit, onLayerEdit, + handleInfoboxClose, } = useHooks({ rootLayerId, isEditable, @@ -227,6 +228,7 @@ export default function Visualizer({ onWidgetAlignmentUpdate={onWidgetAlignmentUpdate} onWidgetAreaSelect={onWidgetAreaSelect} onInfoboxMaskClick={onInfoboxMaskClick} + onInfoboxClose={handleInfoboxClose} onBlockSelect={handleBlockSelect} onBlockChange={onBlockChange} onBlockMove={onBlockMove} diff --git a/src/core/mantle/compat/types.ts b/src/core/mantle/compat/types.ts index 41557e9ad..d369449b0 100644 --- a/src/core/mantle/compat/types.ts +++ b/src/core/mantle/compat/types.ts @@ -42,6 +42,7 @@ export type InfoboxProperty = { outlineWidth?: number; useMask?: boolean; defaultContent?: "description" | "attributes"; + unselectOnClose?: boolean; }; };