triiiceratops 0.3.4 → 0.5.0

package/dist/plugin-DqOSV8lm.js

@@ -0,0 +1,30 @@
+var n = Object.defineProperty;
+var s = (t, e, r) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var i = (t, e, r) => s(t, typeof e != "symbol" ? e + "" : e, r);
+class c {
+  constructor() {
+    i(this, "context", null);
+  }
+  onRegister(e) {
+    this.context = e;
+  }
+  onDestroy() {
+    this.context = null;
+  }
+  /** Convenience getter for ViewerState */
+  get viewerState() {
+    if (!this.context)
+      throw new Error(
+        `Plugin ${this.id} accessed viewerState before registration`
+      );
+    return this.context.viewerState;
+  }
+  /** Convenience getter for OSD viewer */
+  get osdViewer() {
+    var e;
+    return ((e = this.context) == null ? void 0 : e.getOSDViewer()) ?? null;
+  }
+}
+export {
+  c as B
+};

package/dist/plugins/image-manipulation.js

@@ -0,0 +1,177 @@
+var W = Object.defineProperty;
+var L = (a) => {
+  throw TypeError(a);
+};
+var Y = (a, s, t) => s in a ? W(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
+var o = (a, s, t) => Y(a, typeof s != "symbol" ? s + "" : s, t), Z = (a, s, t) => s.has(a) || L("Cannot " + t);
+var c = (a, s, t) => (Z(a, s, "read from private field"), t ? t.call(a) : s.get(a)), A = (a, s, t) => s.has(a) ? L("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, t);
+import * as e from "svelte/internal/client";
+import ee from "phosphor-svelte/lib/Sliders";
+import { B as te } from "../plugin-DqOSV8lm.js";
+import "svelte/internal/disclose-version";
+import se from "phosphor-svelte/lib/X";
+import ae from "phosphor-svelte/lib/ArrowCounterClockwise";
+function j(a, s) {
+  const t = a.drawer.canvas;
+  if (!t) return;
+  const r = [];
+  s.brightness !== 100 && r.push(`brightness(${s.brightness / 100})`), s.contrast !== 100 && r.push(`contrast(${s.contrast / 100})`), s.saturation !== 100 && r.push(`saturate(${s.saturation / 100})`), s.invert && r.push("invert(1)"), s.grayscale && r.push("grayscale(1)"), t.style.filter = r.length > 0 ? r.join(" ") : "none";
+}
+function V(a) {
+  const s = a.drawer.canvas;
+  s && (s.style.filter = "none");
+}
+function G(a) {
+  return a.brightness !== 100 || a.contrast !== 100 || a.saturation !== 100 || a.invert || a.grayscale;
+}
+const H = {
+  brightness: 100,
+  contrast: 100,
+  saturation: 100,
+  invert: !1,
+  grayscale: !1
+};
+var ie = e.from_html('<div class="w-72 h-full bg-base-200 border-l border-base-300 shadow-xl flex flex-col"><div class="flex items-center justify-between p-4 border-b border-base-300"><h2 class="text-lg font-semibold">Image Adjustments</h2> <button class="btn btn-sm btn-ghost btn-circle" aria-label="Close panel"><!></button></div> <div class="flex-1 overflow-y-auto p-4 space-y-6"><div class="form-control"><label class="label" for="brightness-slider"><span class="label-text">Brightness</span> <span class="label-text-alt"> </span></label> <input id="brightness-slider" type="range" min="0" max="200" class="range range-sm range-primary"/></div> <div class="form-control"><label class="label" for="contrast-slider"><span class="label-text">Contrast</span> <span class="label-text-alt"> </span></label> <input id="contrast-slider" type="range" min="0" max="200" class="range range-sm range-secondary"/></div> <div class="form-control"><label class="label" for="saturation-slider"><span class="label-text">Saturation</span> <span class="label-text-alt"> </span></label> <input id="saturation-slider" type="range" min="0" max="200" class="range range-sm range-accent"/></div> <div class="divider">Effects</div> <div class="form-control"><label class="label cursor-pointer"><span class="label-text">Invert Colors</span> <input type="checkbox" class="toggle toggle-primary"/></label></div> <div class="form-control"><label class="label cursor-pointer"><span class="label-text">Grayscale</span> <input type="checkbox" class="toggle toggle-secondary"/></label></div></div> <div class="p-4 border-t border-base-300"><button class="btn btn-outline btn-block"><!> Reset to Default</button></div></div>');
+function U(a, s) {
+  e.push(s, !0);
+  let t = e.prop(s, "filters", 7), r = e.prop(s, "onFilterChange", 7), p = e.prop(s, "onReset", 7), g = e.prop(s, "onClose", 7);
+  function l(i, n) {
+    r()({ ...t(), [i]: n });
+  }
+  var X = {
+    get filters() {
+      return t();
+    },
+    set filters(i) {
+      t(i), e.flush();
+    },
+    get onFilterChange() {
+      return r();
+    },
+    set onFilterChange(i) {
+      r(i), e.flush();
+    },
+    get onReset() {
+      return p();
+    },
+    set onReset(i) {
+      p(i), e.flush();
+    },
+    get onClose() {
+      return g();
+    },
+    set onClose(i) {
+      g(i), e.flush();
+    }
+  }, h = ie(), b = e.child(h), v = e.sibling(e.child(b), 2);
+  v.__click = function(...i) {
+    var n;
+    (n = g()) == null || n.apply(this, i);
+  };
+  var q = e.child(v);
+  se(q, { size: 20 }), e.reset(v), e.reset(b);
+  var _ = e.sibling(b, 2), f = e.child(_), m = e.child(f), B = e.sibling(e.child(m), 2), J = e.child(B);
+  e.reset(B), e.reset(m);
+  var y = e.sibling(m, 2);
+  e.remove_input_defaults(y), y.__input = (i) => l("brightness", +i.currentTarget.value), e.reset(f);
+  var x = e.sibling(f, 2), C = e.child(x), D = e.sibling(e.child(C), 2), K = e.child(D);
+  e.reset(D), e.reset(C);
+  var F = e.sibling(C, 2);
+  e.remove_input_defaults(F), F.__input = (i) => l("contrast", +i.currentTarget.value), e.reset(x);
+  var k = e.sibling(x, 2), R = e.child(k), M = e.sibling(e.child(R), 2), N = e.child(M);
+  e.reset(M), e.reset(R);
+  var w = e.sibling(R, 2);
+  e.remove_input_defaults(w), w.__input = (i) => l("saturation", +i.currentTarget.value), e.reset(k);
+  var O = e.sibling(k, 4), E = e.child(O), I = e.sibling(e.child(E), 2);
+  e.remove_input_defaults(I), I.__change = (i) => l("invert", i.currentTarget.checked), e.reset(E), e.reset(O);
+  var S = e.sibling(O, 2), $ = e.child(S), P = e.sibling(e.child($), 2);
+  e.remove_input_defaults(P), P.__change = (i) => l("grayscale", i.currentTarget.checked), e.reset($), e.reset(S), e.reset(_);
+  var z = e.sibling(_, 2), T = e.child(z);
+  T.__click = function(...i) {
+    var n;
+    (n = p()) == null || n.apply(this, i);
+  };
+  var Q = e.child(T);
+  return ae(Q, { size: 20 }), e.next(), e.reset(T), e.reset(z), e.reset(h), e.template_effect(() => {
+    e.set_text(J, `${t().brightness ?? ""}%`), e.set_value(y, t().brightness), e.set_text(K, `${t().contrast ?? ""}%`), e.set_value(F, t().contrast), e.set_text(N, `${t().saturation ?? ""}%`), e.set_value(w, t().saturation), e.set_checked(I, t().invert), e.set_checked(P, t().grayscale);
+  }), e.append(a, h), e.pop(X);
+}
+e.delegate(["click", "input", "change"]);
+e.create_custom_element(U, { filters: {}, onFilterChange: {}, onReset: {}, onClose: {} }, [], [], !0);
+var d, u;
+class ue extends te {
+  constructor() {
+    super(...arguments);
+    o(this, "id", "image-manipulation");
+    o(this, "name", "Image Manipulation");
+    o(this, "version", "1.0.0");
+    A(
+      this,
+      d,
+      // Reactive state using Svelte 5 runes
+      e.state(!1)
+    );
+    A(this, u, e.state(e.proxy({ ...H })));
+    o(this, "osd", null);
+  }
+  get _panelOpen() {
+    return e.get(c(this, d));
+  }
+  set _panelOpen(t) {
+    e.set(c(this, d), t, !0);
+  }
+  get _filters() {
+    return e.get(c(this, u));
+  }
+  set _filters(t) {
+    e.set(c(this, u), t, !0);
+  }
+  onRegister(t) {
+    super.onRegister(t), t.registerMenuButton({
+      id: `${this.id}:toggle`,
+      icon: ee,
+      tooltip: "Image Adjustments",
+      onClick: () => this.togglePanel(),
+      isActive: () => this._panelOpen,
+      activeClass: "btn-secondary",
+      order: 50
+    }), t.registerPanel({
+      id: `${this.id}:panel`,
+      component: U,
+      position: "left",
+      isVisible: () => this._panelOpen,
+      props: {
+        filters: this._filters,
+        onFilterChange: (r) => this.setFilters(r),
+        onReset: () => this.resetFilters(),
+        onClose: () => this.togglePanel()
+      }
+    });
+  }
+  onViewerReady(t) {
+    this.osd = t, G(this._filters) && j(t, this._filters), this.osd.addHandler("open", () => {
+      this.osd && G(this._filters) && j(this.osd, this._filters);
+    });
+  }
+  onDestroy() {
+    this.osd && V(this.osd), this.osd = null, super.onDestroy();
+  }
+  // Public API
+  togglePanel() {
+    this._panelOpen = !this._panelOpen;
+  }
+  setFilters(t) {
+    this._filters.brightness = t.brightness, this._filters.contrast = t.contrast, this._filters.saturation = t.saturation, this._filters.invert = t.invert, this._filters.grayscale = t.grayscale, this.osd && j(this.osd, t);
+  }
+  resetFilters() {
+    Object.assign(this._filters, H), this.osd && V(this.osd);
+  }
+  getFilters() {
+    return { ...this._filters };
+  }
+}
+d = new WeakMap(), u = new WeakMap();
+export {
+  H as DEFAULT_FILTERS,
+  ue as ImageManipulationPlugin
+};

package/dist/src/lib/components/LeftFab.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

package/dist/src/lib/index.d.ts

@@ -1,3 +1,5 @@
 export { default as TriiiceratopsViewer } from './components/TriiiceratopsViewer.svelte';
 export { ViewerState, VIEWER_STATE_KEY } from './state/viewer.svelte';
 export { ManifestsState } from './state/manifests.svelte';
+export type { TriiiceratopsPlugin, PluginContext, PluginMenuButton, PluginPanel, } from './types/plugin';
+export { BasePlugin } from './types/plugin';

package/dist/src/lib/plugins/image-manipulation/ImageManipulationPanel.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

package/dist/src/lib/plugins/image-manipulation/ImageManipulationPlugin.svelte.d.ts

@@ -0,0 +1,19 @@
+import { BasePlugin, PluginContext } from '../../types/plugin';
+import { ImageFilters } from './types';
+type OSDViewer = import('openseadragon').OpenSeadragon.Viewer;
+export declare class ImageManipulationPlugin extends BasePlugin {
+    readonly id = "image-manipulation";
+    readonly name = "Image Manipulation";
+    readonly version = "1.0.0";
+    private _panelOpen;
+    private _filters;
+    private osd;
+    onRegister(context: PluginContext): void;
+    onViewerReady(viewer: OSDViewer): void;
+    onDestroy(): void;
+    togglePanel(): void;
+    setFilters(filters: ImageFilters): void;
+    resetFilters(): void;
+    getFilters(): ImageFilters;
+}
+export {};

package/dist/src/lib/plugins/image-manipulation/filters.d.ts

@@ -0,0 +1,20 @@
+import { ImageFilters } from './types';
+type OSDViewer = {
+    drawer: {
+        canvas?: HTMLCanvasElement;
+    };
+};
+/**
+ * Apply CSS filters to the OpenSeadragon canvas element.
+ * CSS filters are GPU-accelerated and work without modifying OSD internals.
+ */
+export declare function applyFilters(viewer: OSDViewer, filters: ImageFilters): void;
+/**
+ * Remove all filters from the canvas.
+ */
+export declare function clearFilters(viewer: OSDViewer): void;
+/**
+ * Check if any filters are active (not at default values).
+ */
+export declare function hasActiveFilters(filters: ImageFilters): boolean;
+export {};

package/dist/src/lib/plugins/image-manipulation/index.d.ts

@@ -0,0 +1,3 @@
+export { ImageManipulationPlugin } from './ImageManipulationPlugin.svelte';
+export type { ImageFilters } from './types';
+export { DEFAULT_FILTERS } from './types';

package/dist/src/lib/plugins/image-manipulation/types.d.ts

@@ -0,0 +1,8 @@
+export interface ImageFilters {
+    brightness: number;
+    contrast: number;
+    saturation: number;
+    invert: boolean;
+    grayscale: boolean;
+}
+export declare const DEFAULT_FILTERS: Readonly<ImageFilters>;

package/dist/src/lib/state/viewer.svelte.d.ts

@@ -1,3 +1,4 @@
+import { TriiiceratopsPlugin, PluginMenuButton, PluginPanel } from '../types/plugin';
 export declare class ViewerState {
     manifestId: string | null;
     canvasId: string | null;
@@ -9,7 +10,21 @@ export declare class ViewerState {
     showMetadataDialog: boolean;
     dockSide: string;
     visibleAnnotationIds: Set<string>;
-    constructor(initialManifestId?: string | null);
+    galleryPosition: {
+        x: number;
+        y: number;
+    };
+    gallerySize: {
+        width: number;
+        height: number;
+    };
+    isGalleryDragging: boolean;
+    galleryDragOffset: {
+        x: number;
+        y: number;
+    };
+    dragOverSide: "left" | "right" | "bottom" | "top" | null;
+    constructor(initialManifestId?: string | null, initialCanvasId?: string | null, initialPlugins?: TriiiceratopsPlugin[]);
     get manifest(): any;
     get canvases(): any;
     get currentCanvasIndex(): any;
@@ -31,5 +46,35 @@ export declare class ViewerState {
     searchAnnotations: any[];
     get currentCanvasSearchAnnotations(): any[];
     search(query: string): Promise<void>;
+    /** Registered plugins */
+    plugins: TriiiceratopsPlugin[];
+    /** Plugin-registered menu buttons */
+    pluginMenuButtons: PluginMenuButton[];
+    /** Plugin-registered panels */
+    pluginPanels: PluginPanel[];
+    /** OpenSeadragon viewer instance (set by OSDViewer) */
+    osdViewer: any | null;
+    /** Event handlers for inter-plugin communication */
+    private pluginEventHandlers;
+    /**
+     * Create plugin context - the stable API surface for plugins.
+     */
+    private createPluginContext;
+    /**
+     * Register a plugin with this viewer instance.
+     */
+    registerPlugin(plugin: TriiiceratopsPlugin): void;
+    /**
+     * Unregister a plugin by ID.
+     */
+    unregisterPlugin(pluginId: string): void;
+    /**
+     * Called by OSDViewer when OpenSeadragon is ready.
+     */
+    notifyOSDReady(viewer: any): void;
+    /**
+     * Destroy all plugins (called on viewer unmount).
+     */
+    destroyAllPlugins(): void;
 }
 export declare const VIEWER_STATE_KEY = "triiiceratops:viewerState";

package/dist/src/lib/types/plugin.d.ts

@@ -0,0 +1,101 @@
+import { Component } from 'svelte';
+import { default as OpenSeadragon } from 'openseadragon';
+import { ViewerState } from '../state/viewer.svelte';
+/**
+ * Context object passed to plugins during registration.
+ * This is the stable public API that plugins depend on.
+ */
+export interface PluginContext {
+    /** The ViewerState instance for accessing/modifying viewer state */
+    viewerState: ViewerState;
+    /** Get the OpenSeadragon viewer instance (null until ready) */
+    getOSDViewer(): OpenSeadragon.Viewer | null;
+    /** Register a menu button in the FloatingMenu */
+    registerMenuButton(button: PluginMenuButton): void;
+    /** Unregister a menu button by ID */
+    unregisterMenuButton(buttonId: string): void;
+    /** Register a panel component */
+    registerPanel(panel: PluginPanel): void;
+    /** Unregister a panel by ID */
+    unregisterPanel(panelId: string): void;
+    /** Emit a custom event that other plugins can listen to */
+    emit(eventName: string, data?: unknown): void;
+    /** Subscribe to custom events from other plugins */
+    on(eventName: string, handler: (data: unknown) => void): () => void;
+}
+/**
+ * Menu button configuration for plugin UI injection.
+ */
+export interface PluginMenuButton {
+    /** Unique identifier (convention: `pluginId:buttonName`) */
+    id: string;
+    /** Phosphor icon component */
+    icon: Component;
+    /** Tooltip text */
+    tooltip: string;
+    /** Click handler */
+    onClick: () => void;
+    /** Reactive getter for active/pressed state */
+    isActive?: () => boolean;
+    /** CSS class when active (default: 'btn-primary') */
+    activeClass?: string;
+    /** Sort order - lower numbers appear first (default: 100) */
+    order?: number;
+}
+/**
+ * Panel configuration for plugin UI injection.
+ */
+export interface PluginPanel {
+    /** Unique identifier (convention: `pluginId:panelName`) */
+    id: string;
+    /** Svelte component to render */
+    component: Component;
+    /** Props passed to the component */
+    props?: Record<string, unknown>;
+    /** Panel position in the viewer */
+    position: 'left' | 'right' | 'bottom' | 'overlay';
+    /** Reactive getter for visibility */
+    isVisible: () => boolean;
+}
+/**
+ * Main plugin interface. All plugins must implement this.
+ */
+export interface TriiiceratopsPlugin {
+    /** Unique plugin identifier (e.g., 'image-manipulation') */
+    readonly id: string;
+    /** Human-readable name */
+    readonly name: string;
+    /** Plugin version (semver) */
+    readonly version: string;
+    /**
+     * Called when plugin is registered with the viewer.
+     * Store the context and register UI elements here.
+     */
+    onRegister(context: PluginContext): void;
+    /**
+     * Called when OpenSeadragon viewer is ready.
+     * Attach OSD event handlers here.
+     */
+    onViewerReady?(viewer: OpenSeadragon.Viewer): void;
+    /**
+     * Called when the plugin is being destroyed.
+     * Clean up all handlers and state.
+     */
+    onDestroy?(): void;
+}
+/**
+ * Optional base class providing common plugin functionality.
+ */
+export declare abstract class BasePlugin implements TriiiceratopsPlugin {
+    abstract readonly id: string;
+    abstract readonly name: string;
+    abstract readonly version: string;
+    protected context: PluginContext | null;
+    onRegister(context: PluginContext): void;
+    onViewerReady?(viewer: OpenSeadragon.Viewer): void;
+    onDestroy(): void;
+    /** Convenience getter for ViewerState */
+    protected get viewerState(): ViewerState;
+    /** Convenience getter for OSD viewer */
+    protected get osdViewer(): OpenSeadragon.Viewer | null;
+}