autocenter when a person is chosen from the list of people in the office

src/client/components/OfficeFloorMap.tsx

@@ -82,7 +82,7 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
  onToggle,
 }) => {
  const me = useStore(stores.me)
- const initialStartingPosition = selectedPointId
+ const initialStartPosition = selectedPointId
  ? mappablePoints?.find(
  (point: ScheduledItemType) => point.id === selectedPointId
  )
@@ -192,6 +192,9 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
  alt={`${area.name} floor plan`}
  className="block w-full opacity-60 object-contain overflow-hidden rounded-sm"
  imageOverlayMappingFn={(scale: number) => mapObjects(scale)}
+ initialStartPosition={
+ initialStartPosition ? initialStartPosition.position : undefined
+ }
  />
  </div>
  </div>

src/client/components/ui/ImageWithPanZoom.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { cn } from '#client/utils'
 //@ts-ignore
 import { PanZoom, OnStateChangeData } from 'react-easy-panzoom'
@@ -7,20 +7,38 @@ type ImageWithPanZoomProps = {
  src: string
  alt: string
  className?: string
+ initialStartPosition?: { x: number; y: number }
  imageOverlayMappingFn: (scale: number) => Array<React.ReactNode>
  containerClassName?: string
 }
 
 export const ImageWithPanZoom = ({
  src,
  alt,
+ initialStartPosition = { x: 0, y: 0 },
  imageOverlayMappingFn,
  className,
  containerClassName,
 }: ImageWithPanZoomProps) => {
  const [imgScale, setImgScale] = useState(1)
  const containerRef = useRef(null)
  const imageRef = useRef(null)
+ const panZoomRef = useRef(null)
+
+ const [point, setPoint] = useState(initialStartPosition)
+
+ useEffect(() => {
+ if (
+ point.x !== initialStartPosition.x * imgScale &&
+ point.y !== initialStartPosition.y * imgScale
+ ) {
+ setPoint({
+ x: initialStartPosition.x * imgScale,
+ y: initialStartPosition.y * imgScale,
+ })
+ panZoomRef?.current?.autoCenter()
+ }
+ }, [initialStartPosition])
 
  return (
  <div
@@ -36,18 +54,17 @@ export const ImageWithPanZoom = ({
  minZoom={1}
  autoCenterZoomLevel={2}
  onStateChange={(data: OnStateChangeData) => setImgScale(data.scale)}
+ ref={panZoomRef}
  >
- <div className="transition-transform touch-none relative">
- <img
- ref={imageRef}
- src={src}
- alt={alt}
- className={cn('max-w-none h-auto', className)}
- />
- <div className="absolute top-0 left-0 w-full h-full">
- {/* passing scale so we can do reverse scaling on the mapped points */}
- {imageOverlayMappingFn(imgScale)}
- </div>
+ <img
+ ref={imageRef}
+ src={src}
+ alt={alt}
+ className={cn('max-w-none h-auto', className)}
+ />
+ <div className="absolute top-0 left-0 w-full h-full">
+ {/* passing scale so we can do reverse scaling on the mapped points */}
+ {imageOverlayMappingFn(imgScale)}
  </div>
  </PanZoom>
  </div>

src/modules/hub-map/client/components/HubMap.tsx

@@ -187,7 +187,7 @@ export const HubMap = () => {
  placeholder={'Select area'}
  containerClassName="w-full sm:w-auto mb-2 block sm:hidden"
  />
- <div className="sm:max-w-[780px] h-[500px] sm:h-auto m-auto my-2 sm:my-10">
+ <div className="sm:max-w-[780px] h-[400px] sm:h-auto m-auto my-auto sm:my-10">
  <OfficeFloorMap
  area={area}
  mappablePoints={mappablePoints}