feat: option to unselect layer when click infobox close (#564)

* feat: add property hideOnClose * refactor: unselectOnClose * refactor: use layer select * feat: avoid ui change during exit animation
reearth · Mar 22, 2023 · f2b2f26 · f2b2f26
1 parent f74b561
commit f2b2f26
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 3 deletions.
diff --git 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<Props> = ({
@@ -53,6 +55,7 @@ const Frame: React.FC<Props> = ({
   outlineColor,
   outlineWidth,
   visible,
+  unselectOnClose,
   noContent,
   useMask,
   typography,
@@ -70,6 +73,7 @@ const Frame: React.FC<Props> = ({
   onEntered,
   onExit,
   onExited,
+  onClose,
 }) => {
   const isSmallWindow = useMedia("(max-width: 624px)");
   const ref = useRef<HTMLDivElement>(null);
@@ -84,8 +88,11 @@ const Frame: React.FC<Props> = ({
   }, [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
@@ -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<Props> = ({
@@ -61,6 +62,7 @@ const Infobox: React.FC<Props> = ({
   onBlockMove,
   onBlockInsert,
   renderInsertionPopup,
+  onClose,
   ...props
 }) => {
   const {
@@ -88,6 +90,7 @@ const Infobox: React.FC<Props> = ({
       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<Props> = ({
       onClick={() => selectedBlockId && onBlockSelect?.(undefined)}
       onEnter={setNotReadyToRender}
       onEntered={setReadyToRender}
-      onExit={setNotReadyToRender}>
+      onExit={setNotReadyToRender}
+      onClose={onClose}>
       {blocks?.map((b, i) => (
         <Field
           key={b.id}

diff --git a/src/core/Crust/Infobox/types.ts b/src/core/Crust/Infobox/types.ts
@@ -21,6 +21,7 @@ export type InfoboxProperty = {
   outlineWidth?: number;
   useMask?: boolean;
   defaultContent?: "description" | "attributes";
+  unselectOnClose?: boolean;
 };
 
 export type Block<P = any> = {

diff --git 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?: <T extends ValueType>(
     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}
       />
     </Plugins>
   );

diff --git 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
@@ -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
@@ -42,6 +42,7 @@ export type InfoboxProperty = {
     outlineWidth?: number;
     useMask?: boolean;
     defaultContent?: "description" | "attributes";
+    unselectOnClose?: boolean;
   };
 };