December 2021

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     'react/prop-types': 0,
     'react/display-name': 0,
     'import/named': 0,
+    'import/no-unresolved': 0,
     '@typescript-eslint/explicit-function-return-type': 0,
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/ban-ts-ignore': 1,

.github/workflows/yarn.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '12', '10' ]
+        node: [ '14', '12' ]
 
     name: Node ${{ matrix.node }} build
     steps:

CHANGELOG.md

@@ -0,0 +1,36 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased](https://github.com/digirati-labs/hyperion/compare/v1.1.0...master)
+
+### Added
+- Added missing IIIF selector extensions to types (https://iiif.io/api/annex/openannotation/)
+- Added new "Meta" section of vault state
+- Added additional traversal of inline annotations on a canvas
+- Added new `Vault.requestStatus()` API for requesting status of an HTTP resource request
+- Added new `Vault.getResourceMeta()` API for getting metadata for a resource
+- Added new `Vault.setResourceMeta()` API for setting metadata for a resource
+- Added new `Vault.addEventListener()` API for setting event listeners on a resource metadata
+- Added new `Vault.removeEventListener()` API for removing event listeners on a resource metadata
+- Added new `useResources` hook
+- Added new `useImageTile` hook
+- Added new visible canvas context
+- Added new `ContextBridge` for multiple react reconciler support
+- Added new `useResourceEvents` hook
+- Added new `useEventListener` hook
+- Added `SimpleViewerContext`
+- Added better support for annotations and annotation pages
+- Added `useRenderingStrategy` hook
+
+### Removed
+- Removed `redux-react-hook` context provider (need to add manually)
+
+### Fixed
+- Fixed normalised `.annotations` property type (`Annotation` -> `AnnotationPage`)
+- Fixed missing `behavior` when upgrading Presentation 2 to 3
+- Fixed subscription refreshing when changes are made to vault
+- Fixed unmounting error in `useThumbnail`
+- Improved performance of `useVaultSelector`

__tests__/utility/iiif-traverse-test.ts

@@ -85,21 +85,19 @@ describe('utility/iiif-traverse', () => {
 
   it('it can do a hack-job normalize', () => {
     const store: any = {};
-    const traversal = Traverse.all(
-      (resource: any): any => {
-        if (resource.id && resource.type) {
-          store[resource.type] = store[resource.type] ? store[resource.type] : {};
-          store[resource.type][resource.id] = store[resource.type][resource.id]
-            ? {
-                ...store[resource.type][resource.id],
-                ...resource,
-              }
-            : Object.assign({}, resource);
-          return { id: resource.id, type: resource.type };
-        }
-        return resource;
+    const traversal = Traverse.all((resource: any): any => {
+      if (resource.id && resource.type) {
+        store[resource.type] = store[resource.type] ? store[resource.type] : {};
+        store[resource.type][resource.id] = store[resource.type][resource.id]
+          ? {
+              ...store[resource.type][resource.id],
+              ...resource,
+            }
+          : Object.assign({}, resource);
+        return { id: resource.id, type: resource.type };
       }
-    );
+      return resource;
+    });
 
     const result = traversal.traverseManifest(manifest());
 
@@ -156,14 +154,12 @@ describe('utility/iiif-traverse', () => {
 
   test('it can traverse all', () => {
     const ids: string[] = [];
-    const traversal = Traverse.all(
-      (resource: any): any => {
-        if (resource.id) {
-          ids.push(resource.id);
-        }
-        return resource;
+    const traversal = Traverse.all((resource: any): any => {
+      if (resource.id) {
+        ids.push(resource.id);
       }
-    );
+      return resource;
+    });
 
     traversal.traverseManifest(manifest());
 

__tests__/vault/vault-fixtures.ts

@@ -76,7 +76,9 @@ describe('vault', () => {
         "@context": "http://iiif.io/api/presentation/3/context.json",
         "accompanyingCanvas": null,
         "annotations": Array [],
-        "behavior": Array [],
+        "behavior": Array [
+          "paged",
+        ],
         "homepage": null,
         "id": "https://view.nls.uk/manifest/1286/9359/128693590/manifest.json",
         "items": Array [

create-rollup-config.js

@@ -5,7 +5,7 @@ import { terser } from 'rollup-plugin-terser';
 import visualizer from 'rollup-plugin-visualizer';
 import replace from 'rollup-plugin-replace';
 import json from '@rollup/plugin-json';
-import compiler from '@ampproject/rollup-plugin-closure-compiler';
+// import compiler from '@ampproject/rollup-plugin-closure-compiler';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -30,7 +30,7 @@ export function createRollupConfig(globalName, pkg, external = []) {
         commonjs({ extensions: ['.js', '.ts'] }), // the ".ts" extension is required
         json(),
         isProduction && terser(),
-        isProduction && compiler(),
+        // isProduction && compiler(),
       ],
       external,
     },

examples/vault-viewer/.netlify/state.json

@@ -0,0 +1,3 @@
+{
+	"siteId": "9e4bc25b-7ecc-4843-8a6e-315e15b70b58"
+}

examples/vault-viewer/esbuild.mjs

@@ -0,0 +1,57 @@
+import esbuild from 'esbuild';
+import fs from 'fs';
+import path from 'path';
+import process from 'process';
+
+
+const reactCompatPlugin = {
+  name: "react-compat",
+  setup(build) {
+    const react = path.join(process.cwd(), "node_modules", "react", "cjs", "react.development.js");
+    const reactDom = path.join(process.cwd(), "node_modules", "react-dom", "cjs", "react-dom.development.js");
+    const nanoid = path.join(process.cwd(), "node_modules", "nanoid", "index.browser.js");
+
+    build.onResolve({ filter: /^(react)$/ }, args => {
+      return { path: react };
+    });
+    build.onResolve({ filter: /^(react-dom)$/ }, args => {
+      return { path: reactDom };
+    });
+    build.onResolve({ filter: /^(nanoid)$/ }, args => {
+      return { path: nanoid };
+    });
+  }
+}
+esbuild.build({
+  entryPoints: ['src/index.tsx'],
+  outfile: 'dist/bundle.js',
+  bundle: true,
+  minify: false,
+  sourcemap: true,
+  treeShaking: true,
+  target: ['chrome58'],
+  plugins: [reactCompatPlugin],
+
+  watch: process.argv.includes('--watch') ? {
+    onRebuild(error, result) {
+      fs.writeFileSync(
+        path.join(process.cwd(), './dist/index.html'),
+        `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <title>Vault viewer</title>
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/bundle.js' type='application/javascript'></script>
+  </body>
+</html>
+    `,
+      );
+    },
+
+  } : undefined,
+})
+  .catch(() => process.exit(1));

examples/vault-viewer/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "vault-viewer",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "node ./esbuild.mjs",
+    "start": "node ./esbuild.mjs --watch"
+  },
+  "resolutions": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.36",
+    "@types/react-dom": "^17.0.11",
+    "@types/styled-components": "^5.1.15",
+    "esbuild": "^0.13.15"
+  },
+  "dependencies": {
+    "@atlas-viewer/atlas": "^1.6.10",
+    "@hyperion-framework/parser": "../../packages/parser",
+    "@hyperion-framework/presentation-2-parser": "../../packages/presentation-2-parser",
+    "@hyperion-framework/react-vault": "../../packages/react-vault",
+    "@hyperion-framework/store": "../../packages/store",
+    "@hyperion-framework/types": "../../packages/types",
+    "@hyperion-framework/vault": "../../packages/vault",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
+  }
+}

examples/vault-viewer/src/components/CanvasViewer/CanvasViewer.tsx

@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { TileSet } from '@atlas-viewer/atlas';
+import { useCanvas, useResourceEvents, useRenderingStrategy, useThumbnail } from '@hyperion-framework/react-vault';
+import { RenderAnnotationPage } from '../RenderAnnotationPage/RenderAnnotationPage';
+
+export const CanvasViewer: FC<{ x?: number; y?: number }> = ({ x, y }) => {
+  const canvas = useCanvas();
+  const elementProps = useResourceEvents(canvas, 'deep-zoom');
+  const [strategy] = useRenderingStrategy({
+    strategies: ['images'],
+  });
+  const thumbnail = useThumbnail({ maxWidth: 256, maxHeight: 256 });
+
+  return (
+    <world-object height={canvas.height} width={canvas.width} x={x} y={y} {...elementProps}>
+      {strategy.type === 'images'
+        ? strategy.images.map((image, idx) => {
+            return (
+              <React.Fragment key={image.id}>
+                {!image.service ? (
+                  <world-image
+                    uri={image.id}
+                    target={image.target}
+                    display={
+                      image.width && image.height
+                        ? {
+                            width: image.width,
+                            height: image.height,
+                          }
+                        : undefined
+                    }
+                  />
+                ) : (
+                  <TileSet
+                    key={image.service.id}
+                    tiles={{
+                      id: image.service.id,
+                      height: image.height,
+                      width: image.width,
+                      imageService: image.service as any,
+                      thumbnail: idx === 0 && thumbnail && thumbnail.type === 'fixed' ? thumbnail : undefined,
+                    }}
+                    x={image.target?.x}
+                    y={image.target?.y}
+                    width={image.target?.width}
+                    height={image.target?.height}
+                  />
+                )}
+              </React.Fragment>
+            );
+          })
+        : null}
+      {strategy.annotations && strategy.annotations.pages
+        ? strategy.annotations.pages.map(page => {
+            return <RenderAnnotationPage key={page.id} page={page} />;
+          })
+        : null}
+    </world-object>
+  );
+};

examples/vault-viewer/src/components/GlobalStyle/GlobalStyle.tsx

@@ -0,0 +1,9 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  }
+`;

examples/vault-viewer/src/components/HeaderPanel/HeaderPanel.icons.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export function PreviousIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={24} width={24} {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+    </svg>
+  );
+}
+
+export function NextIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={24} width={24} {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+    </svg>
+  );
+}
+
+export function FirstIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={24} width={24} {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
+    </svg>
+  );
+}
+
+export function LastIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={24} width={24} {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
+    </svg>
+  );
+}
+
+export function SettingsIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={24} width={24} {...props}>
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
+    </svg>
+  );
+}