Fixing zoom control and help popup bugs (#78)

* trying width and height auto

* resize based on container

* add loading spinner component

* added loading spinner to image and transcription views

* made dropdown and help icon visible on single pane

* improved layout of nav at small widths

* improvement to color of nav row for imageview

* fixed imageview zoom buttons

* fixed positioning issue of help popup

* fix merge errors in navigation

editioncrafter/src/component/ImageView.js

@@ -18,6 +18,14 @@ const ImageView = (props) => {
   const [viewer, setViewer] = useState(null);
   const [anno, setAnno] = useState(null);
 
+  // const [onZoomFixed_1, setOnZoomFixed_1] = useState(() => null);
+  // const [onZoomFixed_2, setOnZoomFixed_2] = useState(() => null);
+  // const [onZoomFixed_3, setOnZoomFixed_3] = useState(() => null);
+  // const [onZoomOut, setOnZoomOut] = useState(() => null);
+  // const [onZoomIn, setOnZoomIn] = useState(() => null);
+
+
+
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -40,7 +48,7 @@ const ImageView = (props) => {
     viewer.viewport.zoomTo(viewer.viewport.getMaxZoom());
   };
 
-  const onZoomFixed_2 = (e) => {
+  const onZoomFixed_2= (e) => {
     viewer.viewport.zoomTo((viewer.viewport.getMaxZoom() / 2));
   };
 
@@ -49,12 +57,13 @@ const ImageView = (props) => {
   };
 
   const onZoomIn = (e) => {
+    console.log(viewer.viewport.fitVertically());
     viewer.viewport.zoomBy(2)
-  }
+  };
 
   const onZoomOut = (e) => {
     viewer.viewport.zoomBy(0.5)
-  }
+  };
 
   useEffect(() => {
     if (anno) {
@@ -155,6 +164,7 @@ const ImageView = (props) => {
           onZoomGrid={onZoomGrid}
           onZoomIn={onZoomIn}
           onZoomOut={onZoomOut}
+          viewer={viewer}
         />
         <SeaDragonComponent
           key={props.folioID}

editioncrafter/src/component/Navigation.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { connect } from 'react-redux';
 import {
   FaArrowCircleLeft,
@@ -21,8 +21,14 @@ const initialPopoverObj = {
 const Navigation = (props) => {
   const [popover, setPopover] = useState({ ...initialPopoverObj });
   const [openHelp, setOpenHelp] = useState(false);
+  const [openHelpNarrow, setOpenHelpNarrow] = useState(false);
 
   const helpRef = useRef(null);
+  const helpRefNarrow = useRef(null);
+
+  useEffect(() => {
+    console.log(helpRef.current);
+  }, []);
 
   const onJumpBoxBlur = (event) => {
     setPopover({ ...popover, show: false });
@@ -44,6 +50,10 @@ const Navigation = (props) => {
     setOpenHelp(!openHelp);
   };
 
+  const toggleHelpNarrow = (event) => {
+    setOpenHelpNarrow(!openHelpNarrow);
+  };
+
   const toggleBookmode = (event) => {
     if (!props.documentView.bookMode) {
       props.documentViewActions.changeCurrentFolio(
@@ -216,7 +226,7 @@ const Navigation = (props) => {
                 {' '}
                 <FaArrowCircleLeft />
                 {' '}
-
+              
               </span>
 
               <span
@@ -254,7 +264,7 @@ const Navigation = (props) => {
           )
             : (<AlphabetLinks onFilterChange={onFilterChange} value={props.value} />)}
 
-          <div id="doc-type-help" style={selectContainerStyle} ref={e => { helpRef.current = e; }}>
+          <div id="doc-type-help" style={selectContainerStyle} ref={helpRef}>
             <Select
               className={selectClass}
               style={{ ...selectColorStyle, marginRight: 15 }}
@@ -339,7 +349,7 @@ const Navigation = (props) => {
           )
             : (<AlphabetLinks onFilterChange={onFilterChange} value={props.value} />)}
 
-          <div id="doc-type-help" style={selectContainerStyle} ref={e => { helpRef.current = e; }}>
+          <div id="doc-type-help" style={selectContainerStyle} ref={helpRefNarrow}>
             <Select
               className={selectClass}
               style={{ ...selectColorStyle, marginRight: 15 }}
@@ -359,16 +369,16 @@ const Navigation = (props) => {
             </Select>
             <span
               title="Toggle folio help"
-              onClick={toggleHelp}
+              onClick={toggleHelpNarrow}
               className="helpIcon"
             >
               <i className="fas fa-question-circle" />
             </span>
             <HelpPopper
               marginStyle={helpMarginStyle}
-              anchorEl={helpRef.current}
-              open={openHelp}
-              onClose={toggleHelp}
+              anchorEl={helpRefNarrow.current}
+              open={openHelpNarrow}
+              onClose={toggleHelpNarrow}
             />
           </div>
 

editioncrafter/src/component/RingSpinner.js

@@ -12,9 +12,10 @@ export function BigRingSpinner(props) {
 
     useEffect(() => {
         if (delay > 0) {
-            setTimeout(() => {
+            const timer = setTimeout(() => {
                 setShow(true)
             }, delay);
+            return () => clearTimeout(timer);
         }
     }, []);
 

editioncrafter/src/component/SeaDragonComponent.js

@@ -1,13 +1,20 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { BigRingSpinner } from './RingSpinner';
 
 const SeaDragonComponent = (props) => {
   const { side, initViewer, tileSource } = props;
   const [loading, setLoading] = useState(true);
+  const viewerRef = useRef(null);
+
+  useEffect(async () => {
+    if (viewerRef.current) {
+      await initViewer(viewerRef.current, tileSource).then(() => setLoading(false));
+    }
+  }, []);
 
   const viewer = useMemo(() => (
-    <div id={`image-view-seadragon-${side}`} ref={(el) => { initViewer(el, tileSource).then(() => {setLoading(false);}) }}>
-      { loading && <BigRingSpinner color="light" />}
+    <div id={`image-view-seadragon-${side}`} ref={viewerRef}>
+      { loading && <BigRingSpinner color="light" delay={1000} />}
     </div>
   ), [loading]);