@linzjs/windows 7.0.1 → 7.1.1

package/dist/panel/Panel.tsx

@@ -15,11 +15,13 @@ import {
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
+import { useInterval } from 'usehooks-ts';
 
 import { PanelInstanceContext } from './PanelInstanceContext';
 import { PanelsContext } from './PanelsContext';
 import { PopinWindow } from './PopinWIndow';
 import { PopoutWindow } from './PopoutWindow';
+import { PanelPosition } from './types';
 import { PanelProps } from './types/PanelProps';
 import { useRestoreStateFrom } from './usePanelStateHandler';
 
@@ -27,7 +29,7 @@ const defaultInitialSize = { width: 320, height: 200 };
 
 export const Panel = (props: PanelProps): ReactElement => {
   const panelRef = useRef<HTMLDivElement>(null);
-  const { title, size = defaultInitialSize, className, children } = props;
+  const { title, size = defaultInitialSize, className, ignoreSavedState, children } = props;
 
   const { dockElements, nextStackPosition } = useContext(PanelsContext);
   const { panelPoppedOut, uniqueId, setTitle, dockId, docked } = useContext(PanelInstanceContext);
@@ -48,25 +50,53 @@ export const Panel = (props: PanelProps): ReactElement => {
     }
   }, [title]);
 
-  const [panelPosition, setPanelPosition] = useState(() => {
-    if (savedState?.panelPosition) {
+  const [panelPosition, setPanelPosition] = useState((): PanelPosition => {
+    const pos = props.position;
+    if (!ignoreSavedState && savedState?.panelPosition) {
       return savedState.panelPosition;
     }
 
-    if (props.position === 'center') {
+    // PanelPosition
+    if (pos && typeof pos === 'object' && 'selector' in pos) {
+      const b = document.querySelector(pos.selector)?.getBoundingClientRect();
+      if (b) {
+        return { x: b[pos.edgeX ?? 'left'] + (pos.offsetX ?? 0), y: b[pos.edgeY ?? 'bottom'] + (pos.offsetY ?? 0) };
+      }
+    }
+
+    if (pos === 'center') {
       return {
         x: Math.max((window.innerWidth - size.width) / 2, 0),
         y: Math.max((window.innerHeight - size.height) / 2, 0),
       };
     }
 
-    if (props.position != null && props.position !== 'tile') {
-      return props.position;
+    if (pos != null && pos !== 'tile') {
+      return pos as PanelPosition;
     }
 
     return nextStackPosition();
   });
 
+  useInterval(
+    () => {
+      const pos = props.position;
+      if (pos && typeof pos === 'object' && 'selector' in pos) {
+        const b = document.querySelector(pos.selector)?.getBoundingClientRect();
+        if (b) {
+          const newPos = {
+            x: b[pos.edgeX ?? 'left'] + (pos.offsetX ?? 0),
+            y: b[pos.edgeY ?? 'bottom'] + (pos.offsetY ?? 0),
+          };
+          if (newPos.x !== panelPosition.x || newPos.y !== panelPosition.y) {
+            setPanelPosition(newPos);
+          }
+        }
+      }
+    },
+    props.position && typeof props.position === 'object' && 'selector' in props.position ? 250 : null,
+  );
+
   const cropSizeToWindow = useCallback((size: NumberSize) => {
     return typeof window !== 'undefined' && window.innerWidth && window.innerHeight
       ? {
@@ -77,7 +107,7 @@ export const Panel = (props: PanelProps): ReactElement => {
   }, []);
 
   const [panelSize, _setPanelSize] = useState<NumberSize>(() => {
-    if (savedState?.panelSize) {
+    if (!ignoreSavedState && savedState?.panelSize) {
       return cropSizeToWindow(savedState.panelSize);
     }
 

package/dist/panel/types/PanelProps.ts

@@ -3,6 +3,14 @@ import { PropsWithChildren } from 'react';
 import { PanelPosition } from './PanelPosition';
 import { PanelSize } from './PanelSize';
 
+export interface PanelRelativePositon {
+  selector: string;
+  edgeX?: 'left' | 'right';
+  edgeY?: 'top' | 'bottom';
+  offsetX?: number;
+  offsetY?: number;
+}
+
 interface _PanelProps {
   className?: string;
   maxHeight?: number | string;
@@ -10,10 +18,11 @@ interface _PanelProps {
   minHeight?: number | string;
   minWidth?: number | string;
   modal?: boolean;
-  position?: PanelPosition | 'tile' | 'center';
+  position?: PanelPosition | PanelRelativePositon | 'tile' | 'center';
   resizeable?: boolean;
   size?: PanelSize;
   title: string;
+  ignoreSavedState?: boolean;
 }
 
 export type PanelProps = PropsWithChildren<_PanelProps>;

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "7.0.1",
+  "version": "7.1.1",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",