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

188 lines
4.8 KiB
Svelte

<script lang="ts">
import type { PutResult } from "upend/types";
import { fetchEntity, useEntity } from "../../../lib/entity";
import Spinner from "../../utils/Spinner.svelte";
export let address: string;
export let editable: 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;
}
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,
});
}
});
}
async function loaded() {
imageLoaded = true;
const { Annotorious } = await import("@recogito/annotorious");
anno = new Annotorious({
image: imageEl,
drawOnSingleClick: true,
fragmentUnit: "percent",
widgets: ["COMMENT"],
});
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"].map(async (e) => {
fetch(`api/obj/${e.address}`, { method: "DELETE" });
})
);
await fetch("api/obj", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(
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/thumb/{address}"
alt={address}
on:load={loaded}
bind:this={imageEl}
draggable="false"
/>
</div>
<style global lang="scss">
@use "@recogito/annotorious/dist/annotorious.min.css";
.image-viewer {
height: 100%;
text-align: center;
& > *,
img {
max-width: 100%;
max-height: var(--preview-height);
}
}
</style>