Merge refs/heads/master into christjt/camera-state-url

cognitedata · Sep 7, 2023 · ef17c56 · ef17c56
2 parents 9473554 + 7c33db4
commit ef17c56
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx
@@ -14,10 +14,17 @@ export type ViewerAnchorElementMapping = {
 
 export type ViewerAnchorProps = {
   position: Vector3;
+  sticky?: boolean;
+  stickyMargin?: number;
   children: ReactElement;
 };
 
-export const ViewerAnchor = ({ position, children }: ViewerAnchorProps): ReactElement => {
+export const ViewerAnchor = ({
+  position,
+  children,
+  sticky,
+  stickyMargin
+}: ViewerAnchorProps): ReactElement => {
   const viewer = useReveal();
   const [divTranslation, setDivTranslation] = useState(new Vector2());
   const [visible, setVisible] = useState(false);
@@ -52,18 +59,51 @@ export const ViewerAnchor = ({ position, children }: ViewerAnchorProps): ReactEl
 
   const htmlRef = useRef<HTMLDivElement>(null);
 
+  const domDimensions = [viewer.domElement.clientWidth, viewer.domElement.clientHeight] as [
+    number,
+    number
+  ];
+  const cssTranslation = computeCssOffsetWithStickiness(
+    divTranslation,
+    domDimensions,
+    sticky,
+    stickyMargin
+  );
+
   return visible ? (
     <div
       ref={htmlRef}
       style={{
         position: 'absolute',
         left: '0px',
         top: '0px',
-        transform: `translateX(${divTranslation.x}px) translateY(${divTranslation.y}px)`
+        transform: cssTranslation
       }}>
       {children}
     </div>
   ) : (
     <></>
   );
 };
+
+function computeCssOffsetWithStickiness(
+  unboundedPosition: Vector2,
+  [domWidth, domHeight]: [number, number],
+  sticky?: boolean,
+  stickyMargin?: number
+): string {
+  if (sticky !== true) {
+    return `translateX(${unboundedPosition.x}px) translateY(${unboundedPosition.y}px)`;
+  }
+
+  const margin = stickyMargin ?? 0;
+
+  const maxXPos = `${domWidth}px - 100% - ${margin}px`;
+  const maxYPos = `${domHeight}px - 100% - ${margin}px`;
+
+  const minXPos = `${margin}px`;
+  const minYPos = `${margin}px`;
+
+  return `translateX(max(${minXPos}, min(${maxXPos}, ${unboundedPosition.x}px)))
+translateY(max(${minYPos}, min(${maxYPos}, ${unboundedPosition.y}px)))`;
+}
diff --git a/react-components/stories/ViewerAnchor.stories.tsx b/react-components/stories/ViewerAnchor.stories.tsx
@@ -60,7 +60,7 @@ export const Main: Story = {
             </SuppressedDiv>
           </div>
         </ViewerAnchor>
-        <ViewerAnchor position={position2}>
+        <ViewerAnchor position={position2} sticky stickyMargin={20}>
           <p
             style={{
               backgroundColor: 'red',