fix(scene composer): fix overlay arrow clickable space

awslabs · Aug 14, 2023 · 4cae31f · 4cae31f
1 parent b597c6f
commit 4cae31f
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 29 deletions.
diff --git a/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx b/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx
@@ -7,6 +7,7 @@ import { ISceneNodeInternal } from '../../../store';
 import { sceneComposerIdContext } from '../../../common/sceneComposerIdContext';
 import { IAnchorComponentInternal, IDataOverlayComponentInternal } from '../../../store/internalInterfaces';
 import { KnownComponentType } from '../../../interfaces';
+import { Component } from '../../../models/SceneModels';
 
 import { DataOverlayContainer } from './DataOverlayContainer';
 
@@ -42,6 +43,8 @@ export const DataOverlayComponent = ({ node, component }: DataOverlayComponentPr
         // TODO: add position after finding proper way to always display overlay right above tag
         position={getOffsetFromTag()}
         style={{
+          // top: extra space for the arrow if overlay panel type
+          top: component.subType == Component.DataOverlaySubType.OverlayPanel ? '-14px' : 'auto',
           transform: 'translate3d(-50%,-100%,0)', // make the center of 3D transform the middle of bottom edge
         }}
       >

diff --git a/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx b/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx
@@ -115,14 +115,13 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
           </div>
         )}
         <DataOverlayRows component={component} />
+        {subType == Component.DataOverlaySubType.OverlayPanel && (
+          <div style={tmArrow}>
+            <div style={{ ...tmContainer, ...tmArrowOuter }} />
+            <div style={{ ...tmContainer, ...tmArrowOuter, ...tmArrowInner }} />
+          </div>
+        )}
       </div>
-
-      {subType == Component.DataOverlaySubType.OverlayPanel && (
-        <div style={tmArrow}>
-          <div style={{ ...tmContainer, ...tmArrowOuter }} />
-          <div style={{ ...tmContainer, ...tmArrowOuter, ...tmArrowInner }} />
-        </div>
-      )}
     </>
   ) : null;
 };
diff --git a/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayComponentSnap.spec.tsx.snap b/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayComponentSnap.spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`DataOverlayComponent should render the component correctly 1`] = `
     <div
       class="tm-html-wrapper"
       data-mocked="Html"
-      style="transform: translate3d(-50%,-100%,0);"
+      style="top: -14px; transform: translate3d(-50%,-100%,0);"
     >
       <div
         data-testid="container"

diff --git a/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayContainerSnap.spec.tsx.snap b/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayContainerSnap.spec.tsx.snap
@@ -28,16 +28,16 @@ exports[`DataOverlayContainer should render with panel visible correctly 1`] = `
     >
       [{"component":{"ref":"comp-ref","type":"DataOverlay","subType":"OverlayPanel","dataRows":[{"rowType":"Markdown","content":"content"}],"valueDataBindings":[]}},{}]
     </div>
-  </div>
-  <div
-    style="height: 14px; display: flex; flex-direction: column; align-items: center;"
-  >
     <div
-      style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 18px; height: 18px; position: absolute; z-index: -1; bottom: 5px; transform: rotate(45deg);"
-    />
-    <div
-      style="overflow: auto; border: 0px; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 20px; height: 20px; position: absolute; z-index: 1; bottom: 6.5px; transform: rotate(45deg);"
-    />
+      style="display: flex; flex-direction: column; align-items: center;"
+    >
+      <div
+        style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 18px; height: 18px; position: absolute; z-index: -1; bottom: -9px; transform: rotate(45deg);"
+      />
+      <div
+        style="overflow: auto; border: 0px; border-radius: 2px; box-shadow: none; width: 20px; height: 20px; position: absolute; z-index: 1; bottom: -7.5px; transform: rotate(45deg);"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -61,16 +61,16 @@ exports[`DataOverlayContainer should render with panel visible correctly when th
     >
       [{"component":{"ref":"comp-ref","type":"DataOverlay","subType":"OverlayPanel","dataRows":[{"rowType":"Markdown","content":"content"}],"valueDataBindings":[]}},{}]
     </div>
-  </div>
-  <div
-    style="height: 14px; display: flex; flex-direction: column; align-items: center;"
-  >
     <div
-      style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 18px; height: 18px; position: absolute; z-index: -1; bottom: 5px; transform: rotate(45deg);"
-    />
-    <div
-      style="overflow: auto; border: 0px; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 20px; height: 20px; position: absolute; z-index: 1; bottom: 6.5px; transform: rotate(45deg);"
-    />
+      style="display: flex; flex-direction: column; align-items: center;"
+    >
+      <div
+        style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 18px; height: 18px; position: absolute; z-index: -1; bottom: -9px; transform: rotate(45deg);"
+      />
+      <div
+        style="overflow: auto; border: 0px; border-radius: 2px; box-shadow: none; width: 20px; height: 20px; position: absolute; z-index: 1; bottom: -7.5px; transform: rotate(45deg);"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.ts b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.ts
@@ -43,7 +43,6 @@ export const tmCloseButton: CSSProperties = {
 
 // Overlay panel arrow
 export const tmArrow: CSSProperties = {
-  height: '14px',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -53,13 +52,14 @@ export const tmArrowOuter: CSSProperties = {
   height: '18px',
   position: 'absolute',
   zIndex: -1,
-  bottom: '5px',
+  bottom: '-9px',
   transform: 'rotate(45deg)',
 };
 export const tmArrowInner: CSSProperties = {
   border: '0px',
-  bottom: '6.5px',
+  bottom: '-7.5px',
   width: '20px',
   height: '20px',
   zIndex: '1',
+  boxShadow: 'none',
 };