# openseadragon-annotations-super-lite

> Super-lite-annotations implementation for openseadragon.

Latest version **0.2.0** (published 2024-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install openseadragon-annotations-super-lite
pnpm add openseadragon-annotations-super-lite
yarn add openseadragon-annotations-super-lite
bun add openseadragon-annotations-super-lite
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2024-09-12 |
| First published | 2023-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 154.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Yuji Sugiura |
| Maintainers | leaysgur |
| Keywords | openseadragon, annotations |

## Links

- npm: https://www.npmjs.com/package/openseadragon-annotations-super-lite
- Repository: https://github.com/leaysgur/openseadragon-annotations-super-lite
- Homepage: https://github.com/leaysgur/openseadragon-annotations-super-lite#readme
- Issues: https://github.com/leaysgur/openseadragon-annotations-super-lite/issues
- npm.io page: https://npm.io/package/openseadragon-annotations-super-lite

## Recent versions

- 0.2.0 (latest) — 2024-09-12
- 0.1.0 — 2023-07-04
- 0.0.8 — 2023-06-30
- 0.0.7 — 2023-06-29
- 0.0.6 — 2023-02-13
- 0.0.5 — 2023-02-10
- 0.0.4 — 2023-02-10
- 0.0.3 — 2023-02-08
- 0.0.2 — 2023-02-08
- 0.0.1 — 2023-02-08

## README

# openseadragon-annotations-super-lite

Super-lite-annotations plugin for openseadragon.

This plugin provides a thin layer to manage openseadragon [Overlays](https://openseadragon.github.io/examples/ui-overlays/) for image annotation usage.

## Features

- 0 deps, under 500 lines of code
- Basic features
  - Click viewer to render openseadragon Overlays as annotation
  - Move by drag
  - Resizing
  - Delete button
- Export and restore annotations through JSON

⚠️ This plugin does not offer default styles for created annotation overlays.

You need to apply your CSS for related classes.

```css
.osdasl-host {
  box-sizing: border-box;
  outline: 1px solid rgba(255, 255, 255, 0.8);
  cursor: move;
  will-change: width, height, top, left;
}
.osdasl-host:hover {
  background-color: rgba(0, 255, 26, 0.2);
}
.osdals-host.-dragging {
  background-color: transparent;
  cursor: grabbing;
}

/* and so on... */
```

## Install

```
npm i openseadragon
npm i openseadragon-annotations-super-lite
```

TypeScript definitions are included. ✌️

> [!CAUTION]
> We are using `requestIdleCallback` api, but it's not supported by Safari.
> Please install polyfill if needed.
> https://caniuse.com/requestidlecallback

## Usage

```ts
import OpenSeadragon from "openseadragon";
import { AnnotationsSuperLite, type AnnotationEvent } from "openseadragon-annotations-super-lite";

// Install plugin along with OSD core
const viewer = new OpenSeadragon.Viewer({ /* ... */ });
const myAnno = new AnnotationsSuperLite(viewer, { channelName: "osdasl" });

// [Optional] Set annotation behavior
myAnno.setAnnotationOptions({
  activate: { selectable: true, removable: true, resizable: false, draggable: false },
});

// [Optional] Restore previous annotations
const annotations = [{
  id: "osdasl_1675845237828",
  location: [0, 0, 0.04, 0.04],
}]
myAnno.restore(annotations);

// [Optional] Register event handlers
myAnno.activate({ clickToAdd: true, keyboardShortcut: false });

// [Optional] Communicate with plugin via BroadcastChannel API
const channel = new BroadcastChannel("osdasl");
channel.onmessage = ({ data: message }: MessageEvent<AnnotationEvent>) => {
  switch (message.type) {
    case "annotation:added": {
      message.data.id;
      message.data.location;
      // Save it if needed and restore later
    }
    case "annotation:updated": { }
    case "annotation:removed": { }
    case "annotation:selected": { }
    case "annotation:deselected": { }
  }
};


// Destroy instance
channel.onmessage = null;
channel.close();
myAnno.destroy();
viewer.destroy();
```

See also [demo](https://leaysgur.github.io/openseadragon-annotations-super-lite/) and it's [code](https://github.com/leaysgur/openseadragon-annotations-super-lite/blob/main/demo/src/viewer/index.svelte).

This demo using Svelte for client UI, but plugin itself does not require any deps.

---
_Source: https://npm.io/package/openseadragon-annotations-super-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._