Dev merge

client/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode

client/src/_components/alignment/canvas/default.canvas.alignment.js

@@ -71,7 +71,7 @@ const Canvas = forwardRef(function Canvas(props, ref) {
                 // put image to canvas
                 context.putImageData(imageData, x || 0, y || 0, 0, 0, w || imageData.width, h || imageData.height);
             },
-            draw: (image, dims) => {
+            draw: (image, dims, clear=true) => {
 
                 /**
                  * Redraws image data to canvas
@@ -96,7 +96,7 @@ const Canvas = forwardRef(function Canvas(props, ref) {
 
                 // clear, resize and render image data to canvas
                 const {source, view} = dims || {};
-                context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+                if (clear) context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
                 // set canvas dimensions
                 // canvasRef.current.width = view && view.w || canvasRef.current.width;
                 // canvasRef.current.height = view && view.h || canvasRef.current.height;
@@ -125,6 +125,12 @@ const Canvas = forwardRef(function Canvas(props, ref) {
             dims: () => {
                 return {w: canvasRef.current.width, h: canvasRef.current.height};
             },
+            setWidth: (value) => {
+                canvasRef.current.width = value;
+            },
+            setHeight: (value) => {
+                canvasRef.current.height = value;
+            },
             bounds: () => {
                 const rect = canvasRef.current.getBoundingClientRect();
                 return {

client/src/_components/alignment/canvas/magnifier.canvas.alignment.js

@@ -82,7 +82,6 @@ const MagnifierTool = forwardRef(function Canvas(props, ref) {
                     panel.properties.render_dims
                 );
 
-                // const sourcePt = scalePoint(pos, panel.properties.magnified_dims, panel.properties.render_dims);
                 let sourceX = sourcePt.x - scopeDims.w / 2;
                 let sourceY = sourcePt.y - scopeDims.h / 2;
 
@@ -97,6 +96,7 @@ const MagnifierTool = forwardRef(function Canvas(props, ref) {
                 let viewY = destY;
                 let drawMagImage = true;
 
+
                 // is the mouse over the image?
                 if (
                     _x <= 0 ||

client/src/_components/alignment/tools/pointer.alignment.js

@@ -55,9 +55,6 @@ export const getPos = (e, properties) => {
         (document && document.scrollTop || 0) -
         (document && document.clientTop || 0 );
 
-    // DEBUG
-    // console.log(pageX, pageY, bounds)
-
     // compute mouse position relative to canvas bounds
     const x = Math.max(
         Math.min(
@@ -95,11 +92,12 @@ export function usePointer(properties, options) {
 
     /**
      * Set current pointer position coordinate
+     * 
      * */
 
-    const set = (e) => {
+    const set = (e, props = null) => {
         // compute current position of mouse
-        const pos = getPos(e, properties);
+        const pos = getPos(e, props ? props : properties);
         // set absolute client mouse coordinate
         setClient({x: e.clientX, y: e.clientY});
         // set actual

client/src/_components/alignment/tools/scaler.alignment.js

@@ -16,11 +16,13 @@
  */
 
 export const scaleToFit = (ix, iy, cx, cy) => {
-    const ri = ix / iy;
-    const rc = cx / cy;
+    // epsilon for stability
+    const eps = 1e-6;
+    const ri = ix / (iy + eps);
+    const rc = cx / (cy + eps);
     return {
-        w: Math.round(rc > ri ? ix * cy/iy : cx),
-        h: Math.round(rc > ri ? cy : iy * cx/ix)
+        w: Math.round(rc > ri ? ix * cy/(iy + eps) : cx),
+        h: Math.round(rc > ri ? cy : iy * cx/(ix + eps))
     };
 };
 

client/src/_components/common/comparator.js

@@ -77,36 +77,47 @@ const ImagePair = ({
 
 const Comparator = ({
                         images = [],
-                        menu = true,
                         autoslide=null,
                         expandable=true
                     }) => {
 
+    // slide panel reference
+    const slidePanel = React.useRef();                            
     // selected slide state
     const [selectedIndex, setSelectedIndex] = React.useState(0);
-    const [pairToggle, setPairToggle] = React.useState(false);
-    const [viewerType, setViewerType] = React.useState('overlay');
-    const [expandImage, setExpandImage] = React.useState(false);
-    const [panelWidth, setPanelWidth] = React.useState(0);
-    const [panelHeight, setPanelHeight] = React.useState(0);
-    let selectedImage = images[selectedIndex];
-    const slidePanel = React.useRef();
+    // const [expandImage, setExpandImage] = React.useState(false);
+    let selectedPair = images[selectedIndex];
+
+    // retrieve captures from pair
+    const { historic_captures={}, modern_captures={} } = selectedPair || {};
 
     // get router
     const router = useRouter();
 
-    // window dimensions
-    const [winWidth, winHeight] = useWindowSize();
+    // extract metadata from capture object
+    const getMetadata = (capture) => {
+        const { refImage={} } = capture || {};
+        const { label='', file={}, url='', title='' } = refImage;
+        const { file_type='', owner_id='', owner_type='' } = file;
+        return {
+            label : label || '<No Label>',
+            title: title || '<No Title>',
+            url: createNodeRoute(owner_type, 'show', owner_id)
+        }
+    }
+    const modernMetadata = getMetadata(modern_captures);
+    const historicMetadata = getMetadata(historic_captures);
 
-    // retrieve image metadata
-    const { historic_captures={}, modern_captures={} } = selectedImage || {};
-    const selectedCapture = pairToggle ? historic_captures : modern_captures;
-    const { refImage={} } = selectedCapture || {};
-    const { label='', file={}, url='', title='' } = refImage;
-    const { file_type='', owner_id='', owner_type='' } = file;
 
-    // create view link for selected image
-    const link = createNodeRoute(owner_type, 'show', owner_id)
+    // select image pair
+    React.useEffect(() => {
+        const timer = autoslide ? setTimeout(() => {
+            setSelectedIndex((selectedIndex + 1) % images.length);
+        }, autoslide) : null;
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [selectedIndex]);
 
     // auto-increment slideshow
     React.useEffect(() => {
@@ -118,13 +129,6 @@ const Comparator = ({
         };
     }, [selectedIndex, images.length, setSelectedIndex, autoslide]);
 
-    // panel dimensions
-    React.useEffect(() => {
-        if (slidePanel.current) {
-            setPanelWidth(slidePanel.current.offsetWidth);
-            setPanelHeight(slidePanel.current.offsetHeight);
-        }
-    }, [winWidth, winHeight]);
 
     // increment/decrement index to make slide visible
     const prevPair = () => {
@@ -136,97 +140,52 @@ const Comparator = ({
         setSelectedIndex(nextIndex);
     };
 
-    const getViewer = function() {
-        const viewers = {
-            slider: () => {
-                return <Slider
-                    canvasWidth={panelWidth}
-                    canvasHeight={panelHeight}
-                    images={[historic_captures.refImage, modern_captures.refImage]}
-                />
-            },
-            default: () => {
-                return <>
-                    <div className={'slide'} style={{display: pairToggle ? 'block' : 'none'}}>
-                        <Image
-                            url={historic_captures.refImage.url || ''}
-                            scale={'medium'}
-                            width={'500px'}
-                        />
-                    </div>
-                    <div className={'slide'} style={{display: !pairToggle ? 'block' : 'none'}}>
-                        <Image
-                            url={modern_captures.refImage.url || ''}
-                            scale={'medium'}
-                            width={'500px'}
-                        />
-                    </div>
-                </>
-            }
-        }
-        return viewers.hasOwnProperty(viewerType) ? viewers[viewerType]() : viewers.default();
-    }
-
     return (
         <div className="comparator">
             <div ref={slidePanel} className={'slides'}>
-                { images.length > 0 ? getViewer() : <Loading /> }
+                { 
+                    images.length > 0 ? 
+                    <Slider images={[historic_captures.refImage, modern_captures.refImage]} /> 
+                    : 
+                    <Loading /> 
+                }
                 <div className={'numbertext'}>{ selectedIndex + 1 }/{images.length}</div>
-                {
-                    expandable && viewerType === 'overlay' &&
+                {/* {
+                    expandable &&
                     <div className={'expand-image'}><Button icon={'enlarge'} onClick={() => {
                         setExpandImage(true);
                     }}/></div>
-                }
+                } */}
             </div>
             {
-                label && <div className={'slide-menu h-menu vcentered'}>
+                <div className={'slide-menu h-menu vcentered'}>
                     <ul>
                         <li><Button icon={'prev'} className={'prev'} onClick={prevPair} /></li>
+                        <li>Historic:</li>
                         <li><Button
-                            title={'View as Overlay'}
-                            className={'capture-button'}
-                            icon={'images'}
-                            disabled={viewerType === 'overlay'}
-                            onClick={()=>{setViewerType('overlay')}}
-                        /></li>
-                        <li><Button
-                            title={'View in Slider'}
-                            className={'capture-button'}
-                            icon={'overlay'}
-                            onClick={()=>{setViewerType('slider')}}
-                            disabled={viewerType === 'slider'}
+                            title={'View Capture Details'}
+                            label={historicMetadata.label}
+                            className={'capture-button historic_captures'}
+                            icon={'historic_captures'}
+                            onClick={()=>{router.update(historicMetadata.url)}}
                         /></li>
-                        {
-                            viewerType === 'overlay' && <li><Button
-                                className={'capture-button'}
-                                icon={'sync'}
-                                onClick={() => {
-                                    setPairToggle(!pairToggle)
-                                }}
-                                label={pairToggle ? 'Historic' : 'Modern'}
-                            /></li>
-                        }
+                        <li>Modern:</li>
                         <li><Button
                             title={'View Capture Details'}
-                            className={'capture-button'}
-                            icon={pairToggle ? 'historic_captures' : 'modern_captures'}
-                            onClick={()=>{router.update(link)}}
+                            label={modernMetadata.label}
+                            className={'capture-button modern_captures'}
+                            icon={'modern_captures'}
+                            onClick={()=>{router.update(modernMetadata.url)}}
                         /></li>
-                        <li><a href={link}>{label}</a></li>
                         <li className={'push'}><Button icon={'next'} className={'next'} onClick={nextPair} /></li>
                     </ul>
                 </div>
             }
-            {
-                menu
-                    ?
                     <div className={'thumbnails comparisons h-menu'}>
                         <ul>
                             {
                                 (images || []).map((imgPair, index) => {
                                     const { historic_captures={}, modern_captures={} } = imgPair || {};
-
                                     return (
                                         <li
                                             key={`slide_button_${index}`}
@@ -245,35 +204,6 @@ const Comparator = ({
                             }
                         </ul>
                     </div>
-                    :
-                    <div className={'dots'}>
-                        {
-                            (images || []).map((image, index) => {
-                                return (
-                                    <span
-                                        key={`comparator_img_${index}`}
-                                        className={`dot${index === selectedIndex ? ' active' : ''}`}
-                                        onClick={() => {setSelectedIndex(index)}}
-                                    />
-                                );
-                            })
-                        }
-                    </div>
-            }
-            {
-                expandImage &&
-                <Dialog
-                    title={`${getModelLabel(file_type)}: ${label}`}
-                    callback={()=>{setExpandImage(null)}}
-                >
-                    <Image
-                        key={`slide_${selectedIndex}`}
-                        url={url}
-                        title={title || label}
-                        scale={'medium'}
-                    />
-                </Dialog>
-            }
         </div>
     );
 };

client/src/_components/common/icon.js

@@ -10,7 +10,6 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-
     faMapMarker,
     faVectorSquare,
     faLayerGroup,
@@ -289,12 +288,15 @@ const getIconClass = (iconType) => {
         externalLink: 'external-link-square-alt',
         align: 'crosshairs',
         overlay: 'layer-group',
+        slider: 'columns',
+        sideBySide: 'images',
         clustered: 'map-marker',
         boundaries: 'vector-square',
         filter: 'filter',
         filterNavigation: 'filter',
         list: 'list-alt',
         search: 'search',
+        magnify: 'search-plus',
         undo: 'undo',
         reset: 'undo',
         sync: 'sync',