fix(crosshairs): reset angle, position, and slabthickness for crosshairs when reset viewport tool is used (#4113)

Co-authored-by: Alireza <ar.sedghi@gmail.com>

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { LayoutSelector as OHIFLayoutSelector, ToolbarButton, LayoutPreset } from '@ohif/ui';
 
@@ -134,22 +134,30 @@ function LayoutSelector({
   ...rest
 }: withAppTypes) {
   const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
 
   const { customizationService } = servicesManager.services;
   const commonPresets = customizationService.get('commonPresets') || defaultCommonPresets;
   const advancedPresets =
     customizationService.get('advancedPresets') || generateAdvancedPresets({ servicesManager });
 
-  const closeOnOutsideClick = () => {
-    if (isOpen) {
+  const closeOnOutsideClick = event => {
+    if (isOpen && dropdownRef.current) {
       setIsOpen(false);
     }
   };
 
   useEffect(() => {
-    window.addEventListener('click', closeOnOutsideClick);
+    if (!isOpen) {
+      return;
+    }
+
+    setTimeout(() => {
+      window.addEventListener('click', closeOnOutsideClick);
+    }, 0);
     return () => {
       window.removeEventListener('click', closeOnOutsideClick);
+      dropdownRef.current = null;
     };
   }, [isOpen]);
 
@@ -169,7 +177,10 @@ function LayoutSelector({
       disableToolTip={tooltipDisabled}
       dropdownContent={
         DropdownContent !== null && (
-          <div className="flex ">
+          <div
+            className="flex"
+            ref={dropdownRef}
+          >
             <div className="bg-secondary-dark flex flex-col gap-2.5 p-2">
               <div className="text-aqua-pale text-xs">Common</div>