upend/webui/src/components/display/blobs/ImageViewer.svelte

<script lang="ts">
  import type { PutResult } from "upend/types";
  import { fetchEntity, useEntity } from "../../../lib/entity";
  import Spinner from "../../utils/Spinner.svelte";
  import UpObject from "../UpObject.svelte";

  export let address: string;
  export let editable: boolean;
  export let detail: boolean;

  const { entity } = useEntity(address);

  let imageLoaded = false;
  let imageEl: HTMLImageElement;

  interface Annotorious {
    addAnnotation: (a: W3cAnnotation) => void;
    on: ((
      e: "createAnnotation" | "deleteAnnotation",
      c: (a: W3cAnnotation) => void
    ) => void) &
      ((
        e: "updateAnnotation",
        c: (a: W3cAnnotation, b: W3cAnnotation) => void
      ) => void);
    clearAnnotations: () => void;
    readOnly: boolean;
    destroy: () => void;
  }

  interface W3cAnnotation {
    type: "Annotation";
    body: Array<{ type: "TextualBody"; value: string; purpose: "commenting" }>;
    target: {
      selector: {
        type: "FragmentSelector";
        conformsTo: "http://www.w3.org/TR/media-frags/";
        value: string;
      };
    };
    "@context": "http://www.w3.org/ns/anno.jsonld";
    id: string;
  }

  let anno: Annotorious;
  $: if (anno) anno.readOnly = !editable;
  $: if (anno) {
    anno.clearAnnotations();
    $entity?.backlinks
      .filter((e) => e.attribute == "ANNOTATES")
      .forEach(async (e) => {
        const annotation = await fetchEntity(e.entity);
        if (annotation.get("W3C_FRAGMENT_SELECTOR")) {
          anno.addAnnotation({
            type: "Annotation",
            body: annotation.attr["LBL"].map((e) => {
              return {
                type: "TextualBody",
                value: String(e.value.c),
                purpose: "commenting",
              };
            }),
            target: {
              selector: {
                type: "FragmentSelector",
                conformsTo: "http://www.w3.org/TR/media-frags/",
                value: String(annotation.get("W3C_FRAGMENT_SELECTOR")),
              },
            },
            "@context": "http://www.w3.org/ns/anno.jsonld",
            id: e.entity,
          });
        }
      });
  }

  let a8sLinkTarget: HTMLDivElement;
  let a8sLinkAddress: string;

  async function loaded() {
    const { Annotorious } = await import("@recogito/annotorious");

    if (anno) {
      anno.destroy();
    }

    anno = new Annotorious({
      image: imageEl,
      drawOnSingleClick: true,
      fragmentUnit: "percent",
      widgets: [
        "COMMENT",
        (info: { annotation: W3cAnnotation }) => {
          a8sLinkAddress = info.annotation?.id;
          return a8sLinkTarget;
        },
      ],
    });

    anno.on("createAnnotation", async (annotation) => {
      const lensUuidFetch = await fetch("api/obj", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          entity: {
            t: "Uuid",
          },
        }),
      });
      const [_, uuid] = (await lensUuidFetch.json()) as PutResult;
      await fetch("api/obj", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify([
          {
            entity: uuid,
            attribute: "ANNOTATES",
            value: {
              t: "Address",
              c: address,
            },
          },
          {
            entity: uuid,
            attribute: "W3C_FRAGMENT_SELECTOR",
            value: {
              t: "String",
              c: annotation.target.selector.value,
            },
          },
          ...annotation.body.map((body) => {
            return {
              entity: uuid,
              attribute: "LBL",
              value: {
                t: "String",
                c: body.value,
              },
            };
          }),
        ]),
      });
    });
    anno.on("updateAnnotation", async (annotation) => {
      const annotationObject = await fetchEntity(annotation.id);
      await Promise.all(
        annotationObject.attr["LBL"]
          .concat(annotationObject.attr["W3C_FRAGMENT_SELECTOR"])
          .map(async (e) => {
            fetch(`api/obj/${e.address}`, { method: "DELETE" });
          })
      );
      await fetch("api/obj", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify([
          {
            entity: annotation.id,
            attribute: "W3C_FRAGMENT_SELECTOR",
            value: {
              t: "String",
              c: annotation.target.selector.value,
            },
          },
          ...annotation.body.map((body) => {
            return {
              entity: annotation.id,
              attribute: "LBL",
              value: {
                t: "String",
                c: body.value,
              },
            };
          }),
        ]),
      });
    });
    anno.on("deleteAnnotation", async (annotation) => {
      await fetch(`api/obj/${annotation.id}`, {
        method: "DELETE",
      });
    });
  }
</script>

<div class="image-viewer">
  {#if !imageLoaded}
    <Spinner centered />
  {/if}
  <img
    class="preview-image"
    src="api/{detail ? 'raw' : 'thumb'}/{address}"
    alt={address}
    on:load={loaded}
    bind:this={imageEl}
    draggable="false"
  />
  <div class="a8sUpLink" bind:this={a8sLinkTarget}>
    {#if a8sLinkAddress}
      <div class="link">
        <UpObject link address={a8sLinkAddress} />
      </div>
    {/if}
  </div>
</div>

<style global lang="scss">
  @use "@recogito/annotorious/dist/annotorious.min.css";

  .image-viewer {
    display: flex;
    min-height: 0;

    & > *,
    img {
      min-width: 0;
      max-width: 100%;
      min-height: 0;
      max-height: 100%;
    }
  }

  .preview-image {
    margin: auto;
  }

  .r6o-editor {
    font-family: inherit;
  }

  .a8sUpLink {
    text-align: initial;

    .link {
      margin: 0.5em 1em;
    }
  }
</style>