Merge pull request #812 from digirati-co-uk/feature/polygon-selector-…

…visibility

Fixed visibility of selectors in document panel

CHANGELOG.md

@@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed Locale name in heading (MAD-1152)
 - Fixed token refreshing
 - Fixed activity stream pagination (NS-52)
+- Fixed visibility of selectors in document panel
 
 ### Changed
 - Add short descriptions for admin Search & Metadata actions + correct site config. page titles (MAD-1466)

services/madoc-ts/src/frontend/shared/atlas/ViewReadOnlyAnnotation.tsx

@@ -1,18 +1,42 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { HTMLPortal, mergeStyles, useAtlas } from '@atlas-viewer/atlas';
+import { useMemo, useState } from 'react';
+import { HTMLPortal } from '@atlas-viewer/atlas';
 import { HotSpot } from '../atoms/HotSpot';
 import { useSelectorEvents } from '../capture-models/editor/stores/selectors/selector-helper';
 import { ReadOnlyAnnotation } from '../hooks/use-read-only-annotations';
+import { useCanvas } from 'react-iiif-vault';
 
 // Avoid bad types from Atlas.
 const CustomHTMLPortal = HTMLPortal as any;
 
-export function ViewReadOnlyAnnotation({ id, style, target, ...props }: ReadOnlyAnnotation) {
+function isBox(target: any): target is { x: number; y: number; width: number; height: number } {
+ return typeof target === 'object' && 'x' in target && 'y' in target && 'width' in target && 'height' in target;
+}
+
+function getBounds(target: ReadOnlyAnnotation['target'], { width, height }: { width?: number; height?: number }) {
+ if (isBox(target)) {
+ return target;
+ }
+
+ if (target && target.shape && target.shape.points) {
+ const x = target.shape.points.map((p: any) => p[0]);
+ const y = target.shape.points.map((p: any) => p[1]);
+ return {
+ x: Math.min(...x),
+ y: Math.min(...y),
+ width: Math.max(...x) - Math.min(...x),
+ height: Math.max(...y) - Math.min(...y),
+ };
+ }
+
+ return { x: 0, y: 0, width: 0, height: 0 };
+}
+
+export function ViewReadOnlyAnnotation({ id, style, target: originalTarget, ...props }: ReadOnlyAnnotation) {
+ const canvas = useCanvas();
  const { onClick, onHover } = useSelectorEvents(id);
  const [isOpen, setIsOpen] = useState(false);
- const atlas = useAtlas();
  const [isHover, setIsHover] = useState(false);
- const { interactive, hotspot, hotspotSize, hidden, ...allStyles } = style;
+ const { interactive, hotspot, hotspotSize, hidden: _, ...allStyles } = style;
 
  const styleToApply = useMemo(() => {
  if (hotspot) {
@@ -22,30 +46,56 @@ export function ViewReadOnlyAnnotation({ id, style, target, ...props }: ReadOnly
  return allStyles;
  }, [allStyles, hotspot, isHover, isOpen]);
 
+ if (!canvas) {
+ return null;
+ }
+
+ const target = getBounds(originalTarget, canvas);
+
+ const Shape = 'shape' as any;
+ const Box = 'box' as any;
+
+ const getShape = () => {
+ if (!originalTarget || !target) {
+ return null;
+ }
+
+ if (isBox(originalTarget)) {
+ return (
+ <Box
+ id={`${hotspot ? 'hotspot' : 'non-hotspot'}/box-${id}`}
+ html
+ interactive={interactive}
+ {...props}
+ style={styleToApply}
+ target={{ x: 0, y: 0, width: target.width, height: target.height }}
+ onClick={onClick}
+ onMouseEnter={onHover}
+ />
+ );
+ }
+
+ return (
+ <Shape
+ id={`${hotspot ? 'hotspot' : 'non-hotspot'}/shape-${id}`}
+ points={originalTarget.shape.points.map(p => [p[0] - target.x, p[1] - target.y])}
+ open={originalTarget.shape.open}
+ relativeStyle={true}
+ {...props}
+ style={style}
+ target={{ x: 0, y: 0, width: target.width, height: target.height }}
+ onClick={onClick}
+ onMouseEnter={onHover}
+ />
+ );
+ };
+
  return (
- <world-object
- id={`readonly-${id}`}
- x={target.x}
- y={target.y}
- width={target.width}
- height={target.height}
- onClick={() => {
- onClick();
- }}
- onMouseEnter={() => {
- onHover();
- }}
- >
+ <world-object id={`readonly-${id}`} x={target.x} y={target.y} width={target.width} height={target.height}>
  {hotspot ? (
  <>
- <box
- id={`hotspot/${id}`}
- html
- interactive={interactive}
- {...props}
- style={styleToApply}
- target={{ x: 0, y: 0, width: target.width, height: target.height }}
- />
+ {getShape()}
+
  <CustomHTMLPortal
  id={`portal/${id}`}
  relativeStyle
@@ -64,14 +114,7 @@ export function ViewReadOnlyAnnotation({ id, style, target, ...props }: ReadOnly
  </CustomHTMLPortal>
  </>
  ) : (
- <box
- id={`non-hotspot/${id}`}
- html
- interactive={interactive}
- {...props}
- style={styleToApply}
- target={{ x: 0, y: 0, width: target.width, height: target.height }}
- />
+ getShape()
  )}
  </world-object>
  );

services/madoc-ts/src/frontend/shared/capture-models/_components/ViewDocument/components/ViewEntity.tsx

@@ -29,7 +29,7 @@ export function ViewEntity({
  const ref = useRef<HTMLDivElement>(null);
  const helper = useSelectorHelper();
  const [isCollapsed, setIsCollapsed] = useState(collapsed || !!entity.selector);
- const selector = entity.selector ? resolveSelector(entity.selector, highlightRevisionChanges) : undefined;
+ const selector = entity.selector ? resolveSelector(entity.selector, highlightRevisionChanges, true) : undefined;
  const selectorId = selector?.id;
  const { t: tModel } = useModelTranslation();
  const label = getEntityLabel(entity, undefined, false, tModel);

services/madoc-ts/src/frontend/shared/capture-models/_components/ViewDocument/components/ViewField.tsx

@@ -20,7 +20,7 @@ export function ViewField({
 
  const helper = useSelectorHelper();
 
- const selector = field.selector ? resolveSelector(field.selector, revisionId) : undefined;
+ const selector = field.selector ? resolveSelector(field.selector, revisionId, true) : undefined;
  const selectorId = selector?.id;
  const [isOn, trigger] = useDecayState();
 

services/madoc-ts/translations/en/madoc.json

@@ -366,6 +366,7 @@
  "Error - Unable to save your submission": "Error - Unable to save your submission",
  "Errored": "Errored",
  "Errored / Rejected": "Errored / Rejected",
+ "Exit Correction": "Exit Correction",
  "Exit edit mode": "Exit edit mode",
  "Expand to fill available space": "Expand to fill available space",
  "Export": "Export",