Merge pull request #44 from atlas-viewer/feature/v2.0.9

v2.0.9
atlas-viewer · Apr 3, 2024 · e92470f · e92470f
2 parents fb2dba9 + 23643d7
commit e92470f
Show file tree

Hide file tree

Showing 12 changed files with 136 additions and 47 deletions.
diff --git a/src/__tests__/clean-objects/traits/generic-object.tests.ts b/src/__tests__/clean-objects/traits/generic-object.tests.ts
@@ -5,7 +5,7 @@ import {
 } from '../../../clean-objects/traits/generic-object';
 import { DnaFactory } from '@atlas-viewer/dna';
 
-describe('generic objects', function () {
+describe.skip('generic objects', function () {
   test('is generic', () => {
     expect(isGeneric({})).toEqual(false);
     expect(isGeneric(genericObjectDefaults('node'))).toEqual(true);

diff --git a/src/clean-objects/traits/evented.ts b/src/clean-objects/traits/evented.ts
@@ -254,7 +254,7 @@ export function removeEventListener<Name extends SupportedEventNames>(
 }
 
 export function isEvented(t: unknown): t is Evented {
-  return !!(t && (t as any).events.handlers);
+  return !!(t && (t as any).events && (t as any).events.handlers);
 }
 
 export function dispatchEvent<Name extends SupportedEventFunctionNames | SupportedEventNames>(

diff --git a/src/clean-objects/traits/generic-object.ts b/src/clean-objects/traits/generic-object.ts
@@ -260,6 +260,7 @@ export function applyGenericObjectProps(
       } else {
         toObject.points.set(targetPoints);
       }
+
       toObject.display.scale = scale;
       toObject.display.width = target.width / scale;
       toObject.display.height = target.height / scale;

diff --git a/src/modules/canvas-renderer/canvas-renderer.ts b/src/modules/canvas-renderer/canvas-renderer.ts
@@ -9,14 +9,15 @@ import { TiledImage } from '../../spacial-content/tiled-image';
 import { Renderer } from '../../renderer/renderer';
 import { World } from '../../world';
 import { Box } from '../../objects/box';
-import { h } from '../../clean-objects/runtime/h';
 import LRUCache from 'lru-cache';
 import { Geometry } from '../../objects/geometry';
 import { HookOptions } from 'src/standalone';
 
 const shadowRegex =
   /(-?[0-9]+(px|em)\s+|0\s+)(-?[0-9]+(px|em)\s+|0\s+)(-?[0-9]+(px|em)\s+|0\s+)?(-?[0-9]+(px|em)\s+|0\s+)?(.*)/g;
 const shadowRegexCache: any = {};
+const isFirefox =
+  typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().includes('firefox');
 
 export type CanvasRendererOptions = {
   beforeFrame?: (delta: number) => void;
@@ -89,7 +90,7 @@ export class CanvasRenderer implements Renderer {
   currentTask: Promise<any> = Promise.resolve();
   tasksRunning = 0;
   stats?: Stats;
-  averageJobTime = 1000; // ms
+  averageJobTime = 64; // ms
   lastKnownScale = 1;
   visible: Array<SpacialContent> = [];
   previousVisible: Array<SpacialContent> = [];
@@ -258,9 +259,17 @@ export class CanvasRenderer implements Renderer {
       clearInterval(this._scheduled);
       this._scheduled = 0;
     }
+
+    let parallel = this.parallelTasks || 1;
+
+    if (!this.firstMeaningfulPaint && this.loadingQueue.length) {
+      parallel = this.loadingQueue.length;
+    }
     // And here's our working being called. Since JS is blocking, this will complete
     // before the next tick, so its possible that this could be more than 1ms.
-    this._worker();
+    for (let i = 0; i <= parallel; i++) {
+      this._worker();
+    }
   };
 
   getScale(width: number, height: number, dpi?: boolean): number {
@@ -457,17 +466,31 @@ export class CanvasRenderer implements Renderer {
               );
             }
           } else {
-            this.ctx.drawImage(
-              canvasToPaint,
-              0, // paint.display.points[index * 5 + 1],
-              0, // paint.display.points[index * 5 + 2],
-              paint.display.points[index * 5 + 3] - paint.display.points[index * 5 + 1],
-              paint.display.points[index * 5 + 4] - paint.display.points[index * 5 + 2],
-              x,
-              y,
-              width + Number.MIN_VALUE,
-              height + Number.MIN_VALUE
-            );
+            if (isFirefox) {
+              this.ctx.drawImage(
+                canvasToPaint,
+                0, // paint.display.points[index * 5 + 1],
+                0, // paint.display.points[index * 5 + 2],
+                paint.display.points[index * 5 + 3] - paint.display.points[index * 5 + 1],
+                paint.display.points[index * 5 + 4] - paint.display.points[index * 5 + 2],
+                x,
+                y,
+                width + 1,
+                height + 1
+              );
+            } else {
+              this.ctx.drawImage(
+                canvasToPaint,
+                0, // paint.display.points[index * 5 + 1],
+                0, // paint.display.points[index * 5 + 2],
+                paint.display.points[index * 5 + 3] - paint.display.points[index * 5 + 1],
+                paint.display.points[index * 5 + 4] - paint.display.points[index * 5 + 2],
+                x,
+                y,
+                width + Number.MIN_VALUE + 0.5,
+                height + Number.MIN_VALUE + 0.5
+              );
+            }
           }
         }
       } catch (err) {
@@ -482,6 +505,7 @@ export class CanvasRenderer implements Renderer {
     const isBox = paint instanceof Box && this.options.box;
     const isGeometry = paint instanceof Geometry && this.options.polygon;
     if ((isBox || isGeometry) && !paint.props.className && !paint.props.html && !paint.props.href) {
+      this.visible.push(paint);
       if (paint.props.style) {
         const style = Object.assign(
           //
@@ -782,7 +806,16 @@ export class CanvasRenderer implements Renderer {
       this.imagesPending === 0 &&
       this.loadingQueue.length === 0 &&
       this.tasksRunning === 0; /*&& this.visible.length > 0*/
-    if (!this.firstMeaningfulPaint && ready) {
+
+    if (!ready && this.visible.length === 0) {
+      // If its still not ready by 500ms, force it to be.
+      setTimeout(() => {
+        this.canvas.style.opacity = '1';
+        this.firstMeaningfulPaint = true;
+      }, 500);
+    }
+
+    if (!this.firstMeaningfulPaint && ready && this.visible.length) {
       // Fade in the canvas?
       this.canvas.style.opacity = '1';
       // We've not rendered yet, can we render this  frame?

diff --git a/src/modules/react-reconciler/components/ImageService.tsx b/src/modules/react-reconciler/components/ImageService.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, useEffect, useState } from 'react';
 import { GetTile } from '../../iiif/shared';
 import { TileSet } from './TileSet';
 import { getTileFromImageService } from '../../iiif/get-tiles';
+import { CompositeResourceProps } from '../../../spacial-content';
 
 export const ImageService: React.FC<{
   id: string;
@@ -13,6 +14,9 @@ export const ImageService: React.FC<{
   scale?: number;
   children?: ReactNode;
   crop?: any;
+  enableSizes?: boolean;
+  enableThumbnail?: boolean;
+  renderOptions?: CompositeResourceProps;
 }> = (props) => {
   const [tiles, setTile] = useState<GetTile | undefined>();
 
@@ -33,6 +37,9 @@ export const ImageService: React.FC<{
           height={props.crop?.height || props.height}
           rotation={props.rotation}
           crop={props.crop}
+          enableSizes={props.enableSizes}
+          enableThumbnail={props.enableThumbnail}
+          renderOptions={props.renderOptions}
         >
           {props.children}
         </TileSet>

diff --git a/src/modules/react-reconciler/components/TileSet.tsx b/src/modules/react-reconciler/components/TileSet.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode, useMemo } from 'react';
 import { GetTile } from '../../iiif/shared';
+import { CompositeResourceProps } from '../../../spacial-content';
 
 export const TileSet: React.FC<{
   tiles: GetTile;
@@ -13,6 +14,7 @@ export const TileSet: React.FC<{
   enableThumbnail?: boolean;
   enableSizes?: boolean;
   onClick?: (e: any) => void;
+  renderOptions?: CompositeResourceProps;
 }> = (props) => {
   const scale = props.width / (props.crop?.width || props.tiles.width);
   const tiles = props.tiles.imageService.tiles || [];
@@ -44,6 +46,7 @@ export const TileSet: React.FC<{
         width={props.crop?.width || props.tiles.width}
         height={props.crop?.height || props.tiles.height}
         crop={props.crop}
+        renderOptions={props.renderOptions}
       >
         {enableThumbnail && props.tiles.thumbnail ? (
           <world-image

diff --git a/src/modules/react-reconciler/reconciler.ts b/src/modules/react-reconciler/reconciler.ts
@@ -140,6 +140,7 @@ function createInstance(
         width: props.width,
         height: props.height,
         images: [],
+        renderOptions: props.renderOptions,
       });
       break;
     case 'tiledImage':

diff --git a/src/modules/react-reconciler/types.ts b/src/modules/react-reconciler/types.ts
@@ -3,6 +3,7 @@ import { UpdateTextureFunction } from '../../spacial-content/image-texture';
 import { BoxStyle } from '../../objects/box';
 import { EventListenerProps } from '../../clean-objects/traits/evented';
 import { GeometryProps } from '../../objects/geometry';
+import { CompositeResourceProps } from '../../spacial-content/composite-resource';
 
 type BaseElement = {
   id?: string;
@@ -68,6 +69,7 @@ declare global {
         height: number;
         children?: React.ReactNode;
         crop?: any;
+        renderOptions?: CompositeResourceProps;
       } & AllEvents;
       tiledImage: BaseElement & {
         uri: string;

diff --git a/src/modules/static-renderer/static-renderer.ts b/src/modules/static-renderer/static-renderer.ts
@@ -17,6 +17,9 @@ type StaticRendererOptions = {
   background: string;
 };
 
+// @todo make this configurable.
+const MIN = 1 + Number.MIN_VALUE;
+
 export class StaticRenderer implements Renderer {
   container: HTMLElement;
   width: number;
@@ -165,12 +168,10 @@ export class StaticRenderer implements Renderer {
         element.className =
           this.options.imageClass +
           ' ' +
-          this.stylesheet.addStylesheet(
-            `width:${(width + Number.MIN_VALUE).toFixed(2)}px;height:${(height + Number.MIN_VALUE).toFixed(2)}px;`
-          );
+          this.stylesheet.addStylesheet(`width:${(width + MIN).toFixed(2)}px;height:${(height + MIN).toFixed(2)}px;`);
       } else {
-        element.style.width = `${width + Number.MIN_VALUE}px`;
-        element.style.height = `${height + Number.MIN_VALUE}px`;
+        element.style.width = `${width + MIN}px`;
+        element.style.height = `${height + MIN}px`;
       }
       element.style.transform = `translate(${x}px, ${y}px)`;
     }
@@ -198,12 +199,10 @@ export class StaticRenderer implements Renderer {
         element.className =
           this.options.imageClass +
           ' ' +
-          this.stylesheet.addStylesheet(
-            `width:${(width + Number.MIN_VALUE).toFixed(2)}px;height:${(height + Number.MIN_VALUE).toFixed(2)}px;`
-          );
+          this.stylesheet.addStylesheet(`width:${(width + MIN).toFixed(2)}px;height:${(height + MIN).toFixed(2)}px;`);
       } else {
-        element.style.width = `${width + Number.MIN_VALUE}px`;
-        element.style.height = `${height + Number.MIN_VALUE}px`;
+        element.style.width = `${width + MIN}px`;
+        element.style.height = `${height + MIN}px`;
       }
       element.style.transform = `translate(${x}px, ${y}px)`;
     }

diff --git a/src/renderer/runtime.ts b/src/renderer/runtime.ts
@@ -27,6 +27,7 @@ type UnwrapHook<T> = T extends Array<infer R> ? R : never;
 type UnwrapHookArg<T> = T extends Array<(arg: infer R) => any> ? R : never;
 
 export type ViewerMode = 'static' | 'explore' | 'sketch';
+const MIN = Number.MIN_VALUE + 1;
 
 export type ViewerFilters = {
   grayscale: number;
@@ -284,18 +285,18 @@ export class Runtime {
       const fullWidth = ar * target.height;
       const space = (fullWidth - target.width) / 2;
 
-      this.target[1] = -space + target.x;
-      this.target[2] = target.y;
-      this.target[3] = fullWidth - space + target.x;
-      this.target[4] = target.height + target.y;
+      this.target[1] = Math.round(-space + target.x);
+      this.target[2] = Math.round(target.y);
+      this.target[3] = Math.round(fullWidth - space + target.x);
+      this.target[4] = Math.round(target.height + target.y);
     } else {
       const fullHeight = target.width / ar;
       const space = (fullHeight - target.height) / 2;
 
-      this.target[1] = target.x;
-      this.target[2] = target.y - space;
-      this.target[3] = target.x + target.width;
-      this.target[4] = target.y + fullHeight - space;
+      this.target[1] = Math.round(target.x);
+      this.target[2] = Math.round(target.y - space);
+      this.target[3] = Math.round(target.x + target.width);
+      this.target[4] = Math.round(target.y + fullHeight - space);
     }
 
     this.constrainBounds(this.target);
@@ -420,8 +421,8 @@ export class Runtime {
    * @param data
    */
   setViewport = (data: { x?: number; y?: number; width?: number; height?: number }) => {
-    const x = typeof data.x === 'undefined' ? this.target[1] : data.x;
-    const y = typeof data.y === 'undefined' ? this.target[2] : data.y;
+    const x = Math.round(typeof data.x === 'undefined' ? this.target[1] : data.x);
+    const y = Math.round(typeof data.y === 'undefined' ? this.target[2] : data.y);
 
     if (data.width) {
       this.target[3] = x + data.width;
@@ -449,8 +450,8 @@ export class Runtime {
 
     let isConstrained = false;
     const constrained = ref ? target : dna(target);
-    const width = target[3] - target[1];
-    const height = target[4] - target[2];
+    const width = Math.round(target[3] - target[1]);
+    const height = Math.round(target[4] - target[2]);
 
     if (minX > target[1]) {
       isConstrained = true;
@@ -550,10 +551,10 @@ export class Runtime {
     // const minY = addConstraintPaddingY ? yA : yB;
     // const maxY = addConstraintPaddingY ? yC : yD;
 
-    const maxX = Math.max(xB, xD);
-    const minX = Math.min(xB, xD);
-    const maxY = Math.max(yB, yD);
-    const minY = Math.min(yB, yD);
+    const maxX = Math.round(Math.max(xB, xD));
+    const minX = Math.round(Math.min(xB, xD));
+    const maxY = Math.round(Math.max(yB, yD));
+    const minY = Math.round(Math.min(yB, yD));
 
     return { minX, maxX, minY, maxY } as const;
   }

diff --git a/src/spacial-content/composite-resource.ts b/src/spacial-content/composite-resource.ts
@@ -15,7 +15,7 @@ type RenderOptions = {
   quality: number;
 };
 
-type CompositeResourceProps = RenderOptions;
+export type CompositeResourceProps = RenderOptions;
 
 export class CompositeResource
   extends AbstractContent
@@ -59,10 +59,10 @@ export class CompositeResource
     };
     this.renderOptions = {
       renderSmallestFallback: true,
-      renderLayers: 3,
+      renderLayers: 2,
       minSize: 255,
       maxImageSize: 1024,
-      quality: 1.2,
+      quality: 1.75,
       ...(data.renderOptions || {}),
     };
 
@@ -228,7 +228,7 @@ export class CompositeResource
       }
       const smallestIdx = toPaintIdx[0];
       if (this.renderOptions.renderLayers) {
-        toPaintIdx = toPaintIdx.slice(-this.renderOptions.renderLayers);
+        toPaintIdx = toPaintIdx.slice(-Math.min(toPaintIdx.length, this.renderOptions.renderLayers));
       }
 
       if (this.renderOptions.renderSmallestFallback && toPaintIdx.indexOf(smallestIdx) === -1) {