[ui] add a link to a8s editor display
This commit is contained in:
parent
12d3509a46
commit
2f40ea4adb
1 changed files with 30 additions and 1 deletions
|
@ -2,6 +2,7 @@
|
|||
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;
|
||||
|
@ -71,6 +72,9 @@
|
|||
});
|
||||
}
|
||||
|
||||
let a8sLinkTarget: HTMLDivElement;
|
||||
let a8sLinkAddress: string;
|
||||
|
||||
async function loaded() {
|
||||
imageLoaded = true;
|
||||
const { Annotorious } = await import("@recogito/annotorious");
|
||||
|
@ -79,7 +83,13 @@
|
|||
image: imageEl,
|
||||
drawOnSingleClick: true,
|
||||
fragmentUnit: "percent",
|
||||
widgets: ["COMMENT"],
|
||||
widgets: [
|
||||
"COMMENT",
|
||||
(info: { annotation: W3cAnnotation }) => {
|
||||
a8sLinkAddress = info.annotation?.id;
|
||||
return a8sLinkTarget;
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
anno.on("createAnnotation", async (annotation) => {
|
||||
|
@ -170,6 +180,13 @@
|
|||
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">
|
||||
|
@ -184,4 +201,16 @@
|
|||
max-height: var(--preview-height);
|
||||
}
|
||||
}
|
||||
|
||||
.r6o-editor {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.a8sUpLink {
|
||||
text-align: initial;
|
||||
|
||||
.link {
|
||||
margin: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue