Annota

import { AnnotaProvider, Viewer, Annotator, tool } from 'annota/svelte';
import { RectangleTool } from 'annota';

<script lang="ts">
  import { AnnotaProvider, Viewer, Annotator, tool } from 'annota/svelte';
  import { RectangleTool } from 'annota';
  
  let viewer: OpenSeadragon.Viewer | undefined = $state(undefined);
  const rectangleTool = new RectangleTool();
  
  tool({
    viewer: () => viewer,
    handler: () => rectangleTool,
    enabled: () => !!viewer,
  });
</script>

<AnnotaProvider slideId="my-slide">
  <Viewer
    options={{ tileSources: "/image.dzi" }}
    onViewerReady={(v) => viewer = v}
  />
  <Annotator viewer={viewer} />
</AnnotaProvider>

import { AnnotaProvider, AnnotaViewer, Annotator } from 'annota';
import { useTool } from 'annota';
import { RectangleTool } from 'annota';
import { useState } from 'react';

function App() {
  const [viewer, setViewer] = useState(null);
  const rectangleTool = new RectangleTool();
  
  useTool({
    viewer,
    handler: rectangleTool,
    enabled: !!viewer,
  });

  return (
    <AnnotaProvider slideId="my-slide">
      <AnnotaViewer
        options={{ tileSources: "/image.dzi" }}
        onViewerReady={setViewer}
      />
      <Annotator viewer={viewer} />
    </AnnotaProvider>
  );
}