src/platform/MediaQuickview.css

@@ -47,6 +47,8 @@
       max-width: 100vw;
       max-height: 100vh;
       contain: strict;
+      display: grid;
+      place-items: center;
 
       cursor: grab;
 

src/platform/MediaQuickview.tsx

@@ -56,39 +56,19 @@ export function createMediaQuickview() {
   return createCallback(renderIsolateMediaQuickview);
 }
 
-type VisualMediaMeta = {
-  width: number;
-  height: number;
-};
-
 function ImagePage(props: {
   src: string;
   alt?: string;
   scale: number;
   offsetX: number;
   offsetY: number;
-
-  onMetadata?(metadata: VisualMediaMeta): void;
 }) {
-  const [loaded, setLoaded] = createSignal(false);
-
   return (
     <img
-      onLoad={({ currentTarget }) => {
-        const { naturalHeight, naturalWidth } = currentTarget;
-
-        props.onMetadata?.({
-          width: naturalWidth,
-          height: naturalHeight,
-        });
-
-        setLoaded(true);
-      }}
       src={props.src}
       alt={props.alt}
       style={{
         transform: `scale(${props.scale}) translateX(${-props.offsetX}px) translateY(${-props.offsetY}px)`,
-        opacity: loaded() ? 1 : 0,
       }}
     ></img>
   );
@@ -108,6 +88,10 @@ export type MediaQuickviewProps = {
   onClose?(): void;
 };
 
+function clamp<T extends number>(value: T, min: T, max: T) {
+  return Math.max(Math.min(value, max), min);
+}
+
 const MediaQuickview: Component<MediaQuickviewProps> = (props) => {
   let root: HTMLDialogElement;
 
@@ -142,11 +126,6 @@ const MediaQuickview: Component<MediaQuickviewProps> = (props) => {
        * positive = the top edge move towards top
        */
       offsetY: number;
-
-      size?: {
-        width: number;
-        height: number;
-      };
     }[],
   );
 
@@ -206,7 +185,7 @@ const MediaQuickview: Component<MediaQuickviewProps> = (props) => {
       return;
     }
     const dx = movOriginX - event.clientX;
-    const dy = movOriginY - event.clientY;
+    const dy = movOriginY - event.clientY ;
 
     setTransformations(index, ({ offsetX, offsetY }) => {
       return {
@@ -223,40 +202,6 @@ const MediaQuickview: Component<MediaQuickviewProps> = (props) => {
     setIsMoving(false);
   };
 
-  const recenter = (index: number) => {
-    const sz = transformations[index].size;
-    if (!sz) return;
-    const { width, height } = sz;
-
-    const xscale = Math.min(window.innerWidth / width, 1);
-    const yscale = Math.min(window.innerHeight / height, 1);
-
-    const finalScale = Math.min(xscale, yscale);
-
-    const nheight = height * finalScale;
-    const top = (window.innerHeight - nheight) / 2;
-
-    const nwidth = width * finalScale;
-    const left = (window.innerWidth - nwidth) / 2;
-
-    setTransformations(index, {
-      scale: finalScale,
-      offsetX: -left,
-      offsetY: -top,
-    });
-  };
-
-  const onMetadata = (index: number, { width, height }: VisualMediaMeta) => {
-    setTransformations(index, {
-      size: {
-        width,
-        height,
-      },
-    });
-
-    recenter(index);
-  };
-
   return (
     <dialog
       ref={(e) => {
@@ -304,12 +249,10 @@ const MediaQuickview: Component<MediaQuickviewProps> = (props) => {
                   onMouseDown={onMouseDown}
                   onMouseMove={[onMouseMove, index]}
                   onMouseUp={onMouseUp}
-                  onMouseLeave={onMouseUp}
                 >
                   <Switch>
                     <Match when={item().cat === "image"}>
                       <ImagePage
-                        onMetadata={(m) => onMetadata(index, m)}
                         src={item().src}
                         alt={item().alt}
                         scale={transformationGetOrSetDefault(index).scale}