188 lines
4.8 KiB
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>
|