Merge branches 'content-state-immediate', 'fix-ssl-error', 'add-stati…

…c-story' and 'rotation'

docs/api-reference/1-methods.md

@@ -8,7 +8,7 @@ sidebar_position: 2
 ## Reference
 Helpers available on components:
 * `.vault`  - access to the IIIF Vault, can also be set to a custom vault before mounting.
-* `.events` - This is the [events helper](https://iiif-commons.netlify.app/docs/vault-helpers/events) where you can manually set mouse events on IIIF resource (canvas, annotation, annotaiton pages).
+* `.events` - This is the [events helper](https://iiif-commons.netlify.app/docs/vault-helpers/events) where you can manually set mouse events on IIIF resource (canvas, annotation, annotation pages).
 * `.styles` - This is the [styles helper](https://iiif-commons.netlify.app/docs/vault-helpers/styles) where you can manually attach styles to IIIF resources. This library supports a limited set of CSS box styles for annotations and annotation pages.
 * `.thumbnailHelper` - This is a thumbnail helper that you can use to generate Thumbnails for IIIF resources (`.thumbnailHelper.getBestThumbnailAtSize(resource, options)`).
 * `.imageServiceLoader` - This is a IIIF [image serivce loader](https://github.com/atlas-viewer/iiif-image-api/blob/main/src/image-service-loader.ts) that can be used to preload IIIF resources

packages/canvas-panel/package.json

@@ -17,11 +17,11 @@
     "@iiif/presentation-3": ">=1.0.6",
     "@iiif/vault": "^0.9.18",
     "@iiif/parser": "1.*",
-    "@atlas-viewer/atlas": "2.0.14",
+    "@atlas-viewer/atlas": "2.2.8",
     "nanoid": "3.1.25"
   },
   "dependencies": {
-    "@atlas-viewer/atlas": "2.0.14",
+    "@atlas-viewer/atlas": "^2.2.8",
     "@atlas-viewer/iiif-image-api": "^2.1.2",
     "@iiif/presentation-2": "^1.0.4",
     "@iiif/presentation-3": "^1.1.3",

packages/canvas-panel/src/atlas-components/TileSet/TileSet.tsx

@@ -15,6 +15,7 @@ export const TileSet: FC<{
   tileFormat?: string;
   skipSizes?: boolean;
   skipThumbnail?: boolean;
+  rotation: number;
 }> = ({
   height,
   tiles,
@@ -24,6 +25,7 @@ export const TileSet: FC<{
   style,
   skipSizes = false,
   skipThumbnail = false,
+  rotation = 0,
   viewport,
   tileFormat,
   children,
@@ -50,6 +52,7 @@ export const TileSet: FC<{
       height={tiles.height}
       width={tiles.width}
       x={x}
+      rotation={rotation}
       y={y}
       {...(props as any)}
     >

packages/canvas-panel/src/atlas-components/index.ts

@@ -19,6 +19,7 @@ export const WorldObject = createAtlasWrapper<{
   width: number;
   x?: number;
   y?: number;
+  rotation?: number;
 }>({
   displayName: 'Atlas.WorldObject',
   component: Atlas.WorldObject,

packages/canvas-panel/src/components/AtlasCanvas/AtlasCanvas.tsx

@@ -45,6 +45,7 @@ interface AtlasCanvasProps {
   textEnabled?: boolean;
   disableThumbnail?: boolean;
   skipSizes?: boolean;
+  rotation?: number;
 }
 
 export function AtlasCanvas({
@@ -62,6 +63,7 @@ export function AtlasCanvas({
   textEnabled,
   disableThumbnail,
   skipSizes,
+  rotation,
 }: AtlasCanvasProps) {
   const manifest = useManifest();
   const canvas = useCanvas();
@@ -177,7 +179,6 @@ export function AtlasCanvas({
   }, [defaultChoices]);
 
   const thumbnail = useThumbnail({ maxWidth: 256, maxHeight: 256 });
-
   if (!canvas) {
     return null;
   }
@@ -263,7 +264,6 @@ export function AtlasCanvas({
       ) : null}
     </Fragment>
   );
-
   return (
     <WorldObject key={strategy.type} height={canvas.height} width={canvas.width} x={x} y={y} {...elementProps}>
       {strategy.type === 'images'
@@ -274,6 +274,7 @@ export function AtlasCanvas({
                 key={image.id}
                 image={image}
                 id={image.id}
+                rotation={rotation}
                 annotationId={image.annotationId}
                 thumbnail={idx === 0 && !disableThumbnail ? (thumbnail as any) : undefined}
                 virtualSizes={virtualSizes}

packages/canvas-panel/src/components/RenderImage/RenderImage.tsx

@@ -16,6 +16,7 @@ export function RenderImage({
   virtualSizes = [],
   x = 0,
   y = 0,
+  rotation = 0,
   annotations,
   tileFormat,
   skipSizes,
@@ -29,6 +30,7 @@ export function RenderImage({
   virtualSizes?: SizeParameter[];
   x?: number;
   y?: number;
+  rotation?: number;
   annotations?: JSX.Element;
   tileFormat?: string;
   skipSizes?: boolean;
@@ -41,7 +43,6 @@ export function RenderImage({
   const style = useMemo(() => ({ ...annotationStyles, ...resourceStyle }), [annotationStyles, resourceStyle]);
   const events = useResourceEvents(annotationId ? { id: annotationId, type: 'Annotation' } : undefined, ['atlas']);
   const resourceEvents = useResourceEvents({ id, type: 'ContentResource' }, ['atlas']);
-
   return (
     <React.Fragment>
       {!image.service ? (
@@ -78,6 +79,7 @@ export function RenderImage({
             skipThumbnail={skipThumbnail}
             x={image.target?.spatial.x + x}
             y={image.target?.spatial.y + y}
+            rotation={rotation}
             width={image.target?.spatial.width}
             height={image.target?.spatial.height}
             style={style}

packages/canvas-panel/src/components/ViewCanvas/ViewCanvas.tsx

@@ -27,6 +27,7 @@ export function ViewCanvas(props: ViewCanvasProps) {
   const manifest = useManifest();
   const manager = useAnnotationPageManager(manifest?.id || canvas?.id);
   const [annoMode, setAnnoMode] = useState(false);
+  const rotation = props.rotation || 0;
   const aspectRatio =
     !props.displayOptions.viewport && canvas
       ? props.displayOptions.homePosition
@@ -129,6 +130,7 @@ export function ViewCanvas(props: ViewCanvasProps) {
           defaultChoices={props.defaultChoices}
           disableThumbnail={props.disableThumbnail}
           skipSizes={props.skipSizes}
+          rotation={rotation}
           onCreated={(e: any) => {
             if (manifest && canvas && e) {
               navigator.clipboard.writeText(

packages/canvas-panel/src/components/ViewCanvas/ViewCanvas.types.ts

@@ -8,6 +8,7 @@ export type AtlasDisplayOptions = AtlasProps & {
   aspectRatio?: number;
   viewport?: boolean;
   responsive?: boolean;
+  rotation?: number;
 };
 
 export type ViewCanvasProps = {
@@ -34,4 +35,5 @@ export type ViewCanvasProps = {
   disableThumbnail?: boolean;
   skipSizes?: boolean;
   homeCover?: boolean | 'start' | 'end';
+  rotation?: number;
 };

packages/canvas-panel/src/hooks/use-generic-atlas-props.ts

@@ -127,6 +127,8 @@ export function useGenericAtlasProps<T = Record<never, never>>(props: GenericAtl
     }
   );
 
+  const [rotation, setRotation, , rotationRef] = useSyncedState(props.rotation, { parse: parseNumber });
+
   const [highlight, setHighlight, , highlightRef] = useSyncedState(props.highlight || internalConfig.highlight, {
     parse: parseOptionalSelector,
   });
@@ -472,7 +474,12 @@ export function useGenericAtlasProps<T = Record<never, never>>(props: GenericAtl
       styles,
       thumbnailHelper: thumbs,
       imageServiceLoader: loader,
-
+      getRotation: () => {
+        return rotationRef.current;
+      },
+      setRotation: (newRotation: string | number) => {
+        htmlComponent.setAttribute('rotation', newRotation.toString());
+      },
       getHighlight: () => {
         return highlightRef.current;
       },
@@ -863,6 +870,7 @@ export function useGenericAtlasProps<T = Record<never, never>>(props: GenericAtl
     nested,
     x,
     y,
+    rotation,
     homeCover,
     useProp,
     useRegisterWebComponentApi,

packages/canvas-panel/src/types/generic-atlas-component.ts

@@ -33,6 +33,7 @@ export type GenericAtlasComponent<T = Record<never, never>, Props = any> = T & {
   class?: string;
   x?: number | string;
   y?: number | string;
+  rotation?: number | string;
   nested?: boolean | string;
   enableNavigator?: boolean;
   enablePanOnWait?: boolean;

packages/canvas-panel/src/web-components/canvas-panel.tsx

@@ -5,7 +5,7 @@ import { CanvasContext, VaultProvider } from 'react-iiif-vault';
 import { RegisterPublicApi, UseRegisterPublicApi } from '../hooks/use-register-public-api';
 import { ViewCanvas } from '../components/ViewCanvas/ViewCanvas';
 import { ManifestLoader } from '../components/manifest-loader';
-import { parseBool, parseChoices, parseContentStateParameter } from '../helpers/parse-attributes';
+import { parseBool, parseChoices, parseContentStateParameter, parseNumber } from '../helpers/parse-attributes';
 import { normaliseAxis, parseContentState, serialiseContentState } from '../helpers/content-state/content-state';
 import { normaliseContentState } from '../helpers/content-state/content-state';
 import { GenericAtlasComponent } from '../types/generic-atlas-component';
@@ -30,6 +30,7 @@ export type CanvasPanelProps = GenericAtlasComponent<
     textEnabled?: 'true' | 'false' | boolean;
     followAnnotations?: boolean;
     iiifContent?: string;
+    rotation?: number;
   },
   UseRegisterPublicApi['properties']
 >;
@@ -45,6 +46,7 @@ const canvasPanelAttributes = [
   'follow-annotations',
   'iiif-content',
   'home-cover',
+  'rotation',
 ];
 
 export const CanvasPanel: FC<CanvasPanelProps> = (props) => {
@@ -80,6 +82,7 @@ export const CanvasPanel: FC<CanvasPanelProps> = (props) => {
     parse: parseContentStateParameter,
   });
   const [canvasId, setCanvasId, , canvasIdRef] = useProp('canvasId');
+  const [rotation, setRotation, , rotationRef] = useProp('rotation', { parse: parseNumber, defaultValue: 0 });
   const [manifestId, setManifestId, , manifestIdRef] = useProp('manifestId');
   const [followAnnotations] = useProp('followAnnotations', { parse: parseBool, defaultValue: true });
   const [defaultChoices, , , defaultChoiceIdsRef] = useProp('choiceId', { parse: parseChoices });
@@ -316,6 +319,7 @@ export const CanvasPanel: FC<CanvasPanelProps> = (props) => {
         canvasId={canvasId}
         displayOptions={atlasProps}
         mode={mode}
+        rotation={rotation || 0}
         x={x}
         y={y}
         textEnabled={textEnabled}

packages/canvas-panel/src/web-components/image-service.tsx

@@ -13,9 +13,8 @@ import { ErrorFallback } from '../components/ErrorFallback/ErrorFallback';
 import { ErrorBoundary as _ErrorBoundary } from 'react-error-boundary';
 import { useGenericAtlasProps } from '../hooks/use-generic-atlas-props';
 import { GenericAtlasComponent } from '../types/generic-atlas-component';
-import { parseBool } from '../helpers/parse-attributes';
+import { parseBool, parseNumber } from '../helpers/parse-attributes';
 import { ImageServiceLoader } from '@atlas-viewer/iiif-image-api';
-import { World } from '../atlas-components';
 
 const ErrorBoundary = _ErrorBoundary as any;
 
@@ -29,6 +28,7 @@ export type ImageServiceProps = GenericAtlasComponent<
     nested?: string;
     x?: number;
     y?: number;
+    rotation?: number;
     tileFormat?: string;
     children?: any;
     skipSizes?: boolean | 'true' | 'false';
@@ -60,6 +60,7 @@ export function ImageService(props: ImageServiceProps) {
 
   const [src] = useProp('src');
   const [nested] = useProp('nested', { parse: parseBool });
+  const [rotation] = useProp('rotation', { parse: parseNumber });
   const [tileFormat, setTileFormat] = useProp('tileFormat');
   const [skipSizes] = useProp('skipSizes', { parse: parseBool });
   const [disableThumbnail] = useProp('disableThumbnail', { parse: parseBool });
@@ -130,6 +131,7 @@ export function ImageService(props: ImageServiceProps) {
           nested={nested}
           homeCover={homeCover}
           homeOnResize={!!homeCover}
+          rotation={rotation}
           {...atlasProps}
         >
           <RenderImage
@@ -142,6 +144,7 @@ export function ImageService(props: ImageServiceProps) {
             skipThumbnail={disableThumbnail}
             x={x}
             y={y}
+            rotation={rotation}
             tileFormat={tileFormat}
           />
         </NestedAtlas>
@@ -196,6 +199,7 @@ if (typeof window !== 'undefined') {
       'granular-move-events',
       'home-cover',
       'tile-format',
+      'rotation',
     ],
     {
       shadow: true,

packages/canvas-panel/yarn.lock

@@ -9,18 +9,17 @@
   dependencies:
     "@jridgewell/trace-mapping" "^0.3.0"
 
-"@atlas-viewer/atlas@2.0.14", "@atlas-viewer/atlas@^2.0.0-alpha.19":
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/@atlas-viewer/atlas/-/atlas-2.0.14.tgz#ca567bf7bb0d8c9fbc7bfab40c70640fd5259e18"
-  integrity sha512-cgP0dDwj0Wk1sdPWxbrJbweXXreZ3+Fvg8qo91nqb2DnXe3Z35L+8WV64lWRsAsTBJpgih04EPZlTRDVgx9dcQ==
+"@atlas-viewer/atlas@2.2.8", "@atlas-viewer/atlas@^2.0.0-alpha.19", "@atlas-viewer/atlas@^2.2.8":
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/@atlas-viewer/atlas/-/atlas-2.2.8.tgz#01ac0cca64480033c12fa42a09c2ccf6bff89ecf"
+  integrity sha512-53DIi0MrbKQOCp9vQxYhyX2m1ywytFaa/8/2B8vEKRhseYiZ9ZfBo7pzcDEKYHwaWZ9syX6UzFY3puL0enJokQ==
   dependencies:
     "@atlas-viewer/dna" "^0.5.0"
-    "@atlas-viewer/iiif-image-api" "^2.0.5"
-    "@iiif/helpers" "^1.0.3"
-    "@iiif/parser" "2.0.1"
+    "@atlas-viewer/iiif-image-api" "^2.2.0"
+    "@iiif/helpers" "^1.1.0"
+    "@iiif/parser" "^2.1.0"
     "@iiif/presentation-3" ">=2"
     lru-cache "^7.17.0"
-    nanoid "^3.1.9"
     normalize-wheel "^1.0.1"
     react-reconciler "^0.29.0"
     react-use-measure "^2.0.1"
@@ -31,7 +30,7 @@
   resolved "https://registry.yarnpkg.com/@atlas-viewer/dna/-/dna-0.5.0.tgz#aab824540b59dc3897e2ba4cdb51a53e47ed3311"
   integrity sha512-vHyMwXoCFq6ymk+wOVIkMphUo+I+wBRoA2tBf1AIUZWJMsk51cBtO2qzOaZQUh/TmrzrqEY5aEAtgBj52LVRUg==
 
-"@atlas-viewer/iiif-image-api@2.*", "@atlas-viewer/iiif-image-api@^2.0.5", "@atlas-viewer/iiif-image-api@^2.1.2":
+"@atlas-viewer/iiif-image-api@2.*", "@atlas-viewer/iiif-image-api@^2.1.2", "@atlas-viewer/iiif-image-api@^2.2.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@atlas-viewer/iiif-image-api/-/iiif-image-api-2.1.2.tgz#aeca3ac0c0c71f9c89986a22fd1ef50c17090761"
   integrity sha512-PiNSPi8y1Tjgfyy+J2bv/P/CypabeL7/za0qA+urFYRUQ2oEip5JvPoIWpyWVMh7MsXPQ4HdIPOpGzANtxTHXA==
@@ -690,21 +689,21 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@iiif/helpers@^1.0.3":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@iiif/helpers/-/helpers-1.0.6.tgz#d9b8971d4db27ee7cce5d0e4e71964d055f16928"
-  integrity sha512-sI+6Ed9WBoh66Rk+z2oFY2vSZ2t4VIw3SJWKBFGLQbjeB6gHfsf7mlncXAEtscX1ZCr6S2w+RfcMXu/fOUo5PA==
+"@iiif/helpers@^1.1.0":
+  version "1.2.19"
+  resolved "https://registry.yarnpkg.com/@iiif/helpers/-/helpers-1.2.19.tgz#25e817cde7664774731a9368f48b6875096434eb"
+  integrity sha512-v2NQVHq3Ut1gl66Dap1Qc40nORgC86ebgeV7iuhfxNSfseKMt6yD7r+4jSp0qliWC66kJSyg6d3QM7t4oBsE7A==
   dependencies:
     "@iiif/presentation-2" "1.0.4"
-    "@iiif/presentation-3" "2.1.3"
+    "@iiif/presentation-3" "2.2.3"
     "@iiif/presentation-3-normalized" "0.9.7"
     "@types/geojson" "7946.0.13"
   optionalDependencies:
     abs-svg-path "^0.1.1"
     parse-svg-path "^0.1.2"
     svg-arc-to-cubic-bezier "^3.2.0"
 
-"@iiif/parser@1.*", "@iiif/parser@2.0.1", "@iiif/parser@>=v1.0.13", "@iiif/parser@^1.1.2":
+"@iiif/parser@1.*", "@iiif/parser@>=v1.0.13", "@iiif/parser@^1.1.2", "@iiif/parser@^2.1.0":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@iiif/parser/-/parser-1.0.6.tgz#0f5252b94ba586aade3d6558b5a649fa265fe217"
   integrity sha512-bIdmqe3JwPopL7qEeZk193YNkGaEkkfSR9i/+B7I3MVXkKGE6G80tOWhfQRs/EY3fMzOS8OUFxzAu+aS6CXvEg==
@@ -730,7 +729,7 @@
   dependencies:
     "@iiif/presentation-3" "^2.0.5"
 
-"@iiif/presentation-3@*", "@iiif/presentation-3@1.*", "@iiif/[email protected]", "@iiif/presentation-3@2.1.3", "@iiif/presentation-3@>=1.0.6", "@iiif/presentation-3@>=2", "@iiif/presentation-3@^1.0.4", "@iiif/presentation-3@^1.1.2", "@iiif/presentation-3@^1.1.3", "@iiif/presentation-3@^2.0.5":
+"@iiif/presentation-3@*", "@iiif/presentation-3@1.*", "@iiif/[email protected]", "@iiif/presentation-3@2.2.3", "@iiif/presentation-3@>=1.0.6", "@iiif/presentation-3@>=2", "@iiif/presentation-3@^1.0.4", "@iiif/presentation-3@^1.1.2", "@iiif/presentation-3@^1.1.3", "@iiif/presentation-3@^2.0.5":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@iiif/presentation-3/-/presentation-3-1.0.6.tgz#bec210e4df2549c363733dc3215b20c4e9160a46"
   integrity sha512-00wzi4ocMe0bvxkYsv+SzWRPeN8ZHN2n86aJ2o2QpZiaVQ2AsewBPCMarGryAZ0x7CQv0yO9HV1xj6jiuhl9dQ==
@@ -3382,7 +3381,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-[email protected], nanoid@^3.1.9, nanoid@^3.3.1, nanoid@^3.3.4:
+[email protected], nanoid@^3.3.1, nanoid@^3.3.4:
   version "3.1.25"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
   integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==

packages/storybook/.storybook/main.js

@@ -8,5 +8,9 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions"
   ],
-  "framework": "@storybook/react"
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "webpack5",
+  },
+  "typescript": { "reactDocgen": false }
 }

packages/storybook/.storybook/preview.js

@@ -1,8 +1,9 @@
-import '@digirati/canvas-panel-web-components';
-import { addParameters } from '@storybook/client-api';
+//import '@digirati/canvas-panel-web-components';
+import "../../canvas-panel";
+import { addParameters } from "@storybook/client-api";
 
 addParameters({
-  viewMode: 'docs',
+  viewMode: "docs",
 });
 
 export const parameters = {
@@ -13,4 +14,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+};