triiiceratops 0.8.2 → 0.9.1

package/dist/plugins/image-manipulation/ImageManipulationPanel.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+    import X from 'phosphor-svelte/lib/X';
+    import ArrowCounterClockwise from 'phosphor-svelte/lib/ArrowCounterClockwise';
+    import type { ImageFilters } from './types';
+
+    let {
+        filters,
+        onFilterChange,
+        onReset,
+        onClose,
+    }: {
+        filters: ImageFilters;
+        onFilterChange: (filters: ImageFilters) => void;
+        onReset: () => void;
+        onClose: () => void;
+    } = $props();
+
+    function updateFilter<K extends keyof ImageFilters>(
+        key: K,
+        value: ImageFilters[K],
+    ) {
+        onFilterChange({ ...filters, [key]: value });
+    }
+</script>
+
+<div
+    class="w-72 h-full bg-base-200 border-l border-base-300 shadow-xl flex flex-col"
+>
+    <!-- Header -->
+    <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"
+            onclick={onClose}
+            aria-label="Close panel"
+        >
+            <X size={20} />
+        </button>
+    </div>
+
+    <!-- Sliders -->
+    <div class="flex-1 overflow-y-auto p-4 space-y-6">
+        <!-- Brightness -->
+        <div class="form-control">
+            <label class="label" for="brightness-slider">
+                <span class="label-text">Brightness</span>
+                <span class="label-text-alt">{filters.brightness}%</span>
+            </label>
+            <input
+                id="brightness-slider"
+                type="range"
+                min="0"
+                max="200"
+                value={filters.brightness}
+                oninput={(e) =>
+                    updateFilter('brightness', +e.currentTarget.value)}
+                class="range range-sm range-primary"
+            />
+        </div>
+
+        <!-- Contrast -->
+        <div class="form-control">
+            <label class="label" for="contrast-slider">
+                <span class="label-text">Contrast</span>
+                <span class="label-text-alt">{filters.contrast}%</span>
+            </label>
+            <input
+                id="contrast-slider"
+                type="range"
+                min="0"
+                max="200"
+                value={filters.contrast}
+                oninput={(e) =>
+                    updateFilter('contrast', +e.currentTarget.value)}
+                class="range range-sm range-secondary"
+            />
+        </div>
+
+        <!-- Saturation -->
+        <div class="form-control">
+            <label class="label" for="saturation-slider">
+                <span class="label-text">Saturation</span>
+                <span class="label-text-alt">{filters.saturation}%</span>
+            </label>
+            <input
+                id="saturation-slider"
+                type="range"
+                min="0"
+                max="200"
+                value={filters.saturation}
+                oninput={(e) =>
+                    updateFilter('saturation', +e.currentTarget.value)}
+                class="range range-sm range-accent"
+            />
+        </div>
+
+        <!-- Effects -->
+        <div class="divider">Effects</div>
+
+        <div class="form-control">
+            <label class="label cursor-pointer">
+                <span class="label-text">Invert Colors</span>
+                <input
+                    type="checkbox"
+                    checked={filters.invert}
+                    onchange={(e) =>
+                        updateFilter('invert', e.currentTarget.checked)}
+                    class="toggle toggle-primary"
+                />
+            </label>
+        </div>
+
+        <div class="form-control">
+            <label class="label cursor-pointer">
+                <span class="label-text">Grayscale</span>
+                <input
+                    type="checkbox"
+                    checked={filters.grayscale}
+                    onchange={(e) =>
+                        updateFilter('grayscale', e.currentTarget.checked)}
+                    class="toggle toggle-secondary"
+                />
+            </label>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="p-4 border-t border-base-300">
+        <button class="btn btn-outline btn-block" onclick={onReset}>
+            <ArrowCounterClockwise size={20} />
+            Reset to Default
+        </button>
+    </div>
+</div>

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

@@ -0,0 +1,10 @@
+import type { ImageFilters } from './types';
+type $$ComponentProps = {
+    filters: ImageFilters;
+    onFilterChange: (filters: ImageFilters) => void;
+    onReset: () => void;
+    onClose: () => void;
+};
+declare const ImageManipulationPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageManipulationPanel = ReturnType<typeof ImageManipulationPanel>;
+export default ImageManipulationPanel;

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

@@ -1,6 +1,6 @@
-import { BasePlugin, PluginContext } from '../../types/plugin';
-import { ImageFilters } from './types';
 type OSDViewer = import('openseadragon').OpenSeadragon.Viewer;
+import { BasePlugin, type PluginContext } from '../../types/plugin';
+import { type ImageFilters } from './types';
 export declare class ImageManipulationPlugin extends BasePlugin {
     readonly id = "image-manipulation";
     readonly name = "Image Manipulation";

package/dist/plugins/image-manipulation/ImageManipulationPlugin.svelte.js

@@ -0,0 +1,122 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import Sliders from 'phosphor-svelte/lib/Sliders';
+import { BasePlugin } from '../../types/plugin';
+import { applyFilters, clearFilters, hasActiveFilters } from './filters';
+import { DEFAULT_FILTERS } from './types';
+import ImageManipulationPanel from './ImageManipulationPanel.svelte';
+import { m } from '../../state/i18n.svelte';
+var ImageManipulationPlugin = /** @class */ (function (_super) {
+    __extends(ImageManipulationPlugin, _super);
+    function ImageManipulationPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.id = 'image-manipulation';
+        _this.name = 'Image Manipulation';
+        _this.version = '1.0.0';
+        // Reactive state using Svelte 5 runes
+        _this._panelOpen = $state(false);
+        _this._filters = $state(__assign({}, DEFAULT_FILTERS));
+        _this.osd = null;
+        return _this;
+    }
+    ImageManipulationPlugin.prototype.onRegister = function (context) {
+        var _this = this;
+        _super.prototype.onRegister.call(this, context);
+        // Register menu button
+        context.registerMenuButton({
+            id: "".concat(this.id, ":toggle"),
+            icon: Sliders,
+            get tooltip() {
+                return m.image_adjustments();
+            },
+            onClick: function () { return _this.togglePanel(); },
+            isActive: function () { return _this._panelOpen; },
+            activeClass: 'btn-secondary',
+            order: 50,
+        });
+        // Register panel
+        context.registerPanel({
+            id: "".concat(this.id, ":panel"),
+            component: ImageManipulationPanel,
+            position: 'left',
+            isVisible: function () { return _this._panelOpen; },
+            props: {
+                filters: this._filters,
+                onFilterChange: function (f) { return _this.setFilters(f); },
+                onReset: function () { return _this.resetFilters(); },
+                onClose: function () { return _this.togglePanel(); },
+            },
+        });
+    };
+    ImageManipulationPlugin.prototype.onViewerReady = function (viewer) {
+        var _this = this;
+        this.osd = viewer;
+        // Apply existing filters if any
+        if (hasActiveFilters(this._filters)) {
+            applyFilters(viewer, this._filters);
+        }
+        // Re-apply filters when new images unlock (canvas change)
+        this.osd.addHandler('open', function () {
+            if (_this.osd && hasActiveFilters(_this._filters)) {
+                applyFilters(_this.osd, _this._filters);
+            }
+        });
+    };
+    ImageManipulationPlugin.prototype.onDestroy = function () {
+        if (this.osd) {
+            clearFilters(this.osd);
+        }
+        this.osd = null;
+        _super.prototype.onDestroy.call(this);
+    };
+    // Public API
+    ImageManipulationPlugin.prototype.togglePanel = function () {
+        this._panelOpen = !this._panelOpen;
+    };
+    ImageManipulationPlugin.prototype.setFilters = function (filters) {
+        // Mutate properties to maintain reference for bound props
+        this._filters.brightness = filters.brightness;
+        this._filters.contrast = filters.contrast;
+        this._filters.saturation = filters.saturation;
+        this._filters.invert = filters.invert;
+        this._filters.grayscale = filters.grayscale;
+        if (this.osd) {
+            applyFilters(this.osd, filters);
+        }
+    };
+    ImageManipulationPlugin.prototype.resetFilters = function () {
+        Object.assign(this._filters, DEFAULT_FILTERS);
+        if (this.osd) {
+            clearFilters(this.osd);
+        }
+    };
+    ImageManipulationPlugin.prototype.getFilters = function () {
+        return __assign({}, this._filters);
+    };
+    return ImageManipulationPlugin;
+}(BasePlugin));
+export { ImageManipulationPlugin };

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

@@ -1,4 +1,4 @@
-import { ImageFilters } from './types';
+import type { ImageFilters } from './types';
 type OSDViewer = {
     drawer?: {
         canvas?: HTMLCanvasElement;

package/dist/plugins/image-manipulation/filters.js

@@ -0,0 +1,48 @@
+/**
+ * Apply CSS filters to the OpenSeadragon canvas element.
+ * CSS filters are GPU-accelerated and work without modifying OSD internals.
+ */
+export function applyFilters(viewer, filters) {
+    var _a;
+    // OSD uses either canvas or webgl drawer
+    var canvas = (_a = viewer.drawer) === null || _a === void 0 ? void 0 : _a.canvas;
+    if (!canvas)
+        return;
+    var parts = [];
+    if (filters.brightness !== 100) {
+        parts.push("brightness(".concat(filters.brightness / 100, ")"));
+    }
+    if (filters.contrast !== 100) {
+        parts.push("contrast(".concat(filters.contrast / 100, ")"));
+    }
+    if (filters.saturation !== 100) {
+        parts.push("saturate(".concat(filters.saturation / 100, ")"));
+    }
+    if (filters.invert) {
+        parts.push('invert(1)');
+    }
+    if (filters.grayscale) {
+        parts.push('grayscale(1)');
+    }
+    canvas.style.filter = parts.length > 0 ? parts.join(' ') : 'none';
+}
+/**
+ * Remove all filters from the canvas.
+ */
+export function clearFilters(viewer) {
+    var _a;
+    var canvas = (_a = viewer.drawer) === null || _a === void 0 ? void 0 : _a.canvas;
+    if (canvas) {
+        canvas.style.filter = 'none';
+    }
+}
+/**
+ * Check if any filters are active (not at default values).
+ */
+export function hasActiveFilters(filters) {
+    return (filters.brightness !== 100 ||
+        filters.contrast !== 100 ||
+        filters.saturation !== 100 ||
+        filters.invert ||
+        filters.grayscale);
+}

package/dist/plugins/image-manipulation/index.js

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

package/dist/plugins/image-manipulation/types.js

@@ -0,0 +1,7 @@
+export var DEFAULT_FILTERS = {
+    brightness: 100,
+    contrast: 100,
+    saturation: 100,
+    invert: false,
+    grayscale: false,
+};

package/dist/state/i18n.svelte.d.ts

@@ -0,0 +1,4 @@
+export declare const language: {
+    readonly current: any;
+};
+export declare const m: any;

package/dist/state/i18n.svelte.js

@@ -0,0 +1,18 @@
+import * as messages from "../paraglide/messages.js";
+import { languageTag, onSetLanguageTag } from "../paraglide/runtime.js";
+var tag = $state(languageTag());
+onSetLanguageTag(function (newTag) {
+    tag = newTag;
+});
+export var language = {
+    get current() {
+        return tag;
+    }
+};
+export var m = new Proxy(messages, {
+    get: function (target, prop, receiver) {
+        // Register dependency by accessing the signal
+        tag;
+        return Reflect.get(target, prop, receiver);
+    }
+});

package/dist/state/manifests.svelte.js

@@ -0,0 +1,210 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import * as manifesto from "manifesto.js";
+var ManifestsState = /** @class */ (function () {
+    function ManifestsState() {
+        this.manifests = $state({});
+    }
+    ManifestsState.prototype.fetchManifest = function (manifestId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, json, manifestoObject, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.manifests[manifestId]) {
+                            return [2 /*return*/]; // Already fetched or fetching
+                        }
+                        this.manifests[manifestId] = { isFetching: true };
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 4, , 5]);
+                        return [4 /*yield*/, fetch(manifestId)];
+                    case 2:
+                        response = _a.sent();
+                        if (!response.ok) {
+                            throw new Error("HTTP error! status: ".concat(response.status));
+                        }
+                        return [4 /*yield*/, response.json()];
+                    case 3:
+                        json = _a.sent();
+                        manifestoObject = manifesto.parseManifest(json);
+                        this.manifests[manifestId] = {
+                            json: json,
+                            manifesto: manifestoObject,
+                            isFetching: false,
+                        };
+                        return [3 /*break*/, 5];
+                    case 4:
+                        error_1 = _a.sent();
+                        this.manifests[manifestId] = { error: error_1.message, isFetching: false };
+                        return [3 /*break*/, 5];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ManifestsState.prototype.getManifest = function (manifestId) {
+        var entry = this.manifests[manifestId];
+        return entry === null || entry === void 0 ? void 0 : entry.manifesto;
+    };
+    ManifestsState.prototype.fetchAnnotationList = function (url) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, data, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.manifests[url])
+                            return [2 /*return*/]; // Already fetched or fetching
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 6, , 7]);
+                        return [4 /*yield*/, fetch(url)];
+                    case 2:
+                        response = _a.sent();
+                        if (!response.ok) return [3 /*break*/, 4];
+                        return [4 /*yield*/, response.json()];
+                    case 3:
+                        data = _a.sent();
+                        this.manifests[url] = { json: data };
+                        return [3 /*break*/, 5];
+                    case 4:
+                        console.error("Failed to fetch annotation list: ".concat(url));
+                        _a.label = 5;
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
+                        e_1 = _a.sent();
+                        console.error("Error fetching annotation list: ".concat(url), e_1);
+                        return [3 /*break*/, 7];
+                    case 7: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ManifestsState.prototype.getCanvases = function (manifestId) {
+        var m = this.getManifest(manifestId);
+        if (!m) {
+            return [];
+        }
+        var sequences = m.getSequences();
+        if (!sequences || !sequences.length)
+            return [];
+        var canvases = sequences[0].getCanvases();
+        return canvases;
+    };
+    ManifestsState.prototype.getAnnotations = function (manifestId, canvasId) {
+        var m = this.getManifest(manifestId);
+        if (!m)
+            return [];
+        var canvas = m.getSequences()[0].getCanvasById(canvasId);
+        if (!canvas)
+            return [];
+        var annos = this.manualGetAnnotations(manifestId, canvasId);
+        return annos;
+    };
+    // We can refactor this to use Manifesto's resource handling later if needed.
+    ManifestsState.prototype.manualGetAnnotations = function (manifestId, canvasId) {
+        var _this = this;
+        var manifestoObject = this.getManifest(manifestId);
+        if (!manifestoObject)
+            return [];
+        var canvas = manifestoObject.getSequences()[0].getCanvasById(canvasId);
+        if (!canvas)
+            return [];
+        // Manifesto wraps the JSON. We can access the underlying JSON via canvas.__jsonld
+        // Or better, use canvas.getContent() if it works, but for external lists manual fetch is robust.
+        var canvasJson = canvas.__jsonld;
+        var annotations = [];
+        // Helper to parse list using Manifesto
+        var parseList = function (listJson) {
+            // manifesto.create is not available in 4.3.0 or not exported nicely?
+            // Just return raw resources.
+            return listJson.resources || listJson.items || [];
+        };
+        // IIIF v2 otherContent
+        if (canvasJson.otherContent) {
+            canvasJson.otherContent.forEach(function (content) {
+                var id = content["@id"] || content.id;
+                if (id && !content.resources) {
+                    var externalList = _this.manifests[id];
+                    if (externalList) {
+                        if (externalList.json) {
+                            var parsed = parseList(externalList.json);
+                            annotations.push.apply(annotations, parsed);
+                        }
+                    }
+                    else {
+                        _this.fetchAnnotationList(id);
+                    }
+                }
+                else if (content.resources) {
+                    // It's embedded
+                    // We can wrap this in manifesto.create too if we wrap it in a list structure?
+                    // Or just use raw for embedded for now, but mixed types might be annoying.
+                    // Let's rely on the robust parsing I added to Overlay for raw/mixed.
+                    // But the user wants library usage.
+                    // const r = manifesto.create(content); // might work?
+                    annotations.push.apply(annotations, content.resources);
+                }
+            });
+        }
+        // IIIF v3 annotations
+        if (canvasJson.annotations) {
+            canvasJson.annotations.forEach(function (content) {
+                var id = content.id || content["@id"];
+                if (id && !content.items) {
+                    var externalList = _this.manifests[id];
+                    if (externalList) {
+                        if (externalList.json) {
+                            var parsed = parseList(externalList.json);
+                            annotations.push.apply(annotations, parsed);
+                        }
+                    }
+                    else {
+                        _this.fetchAnnotationList(id);
+                    }
+                }
+                else if (content.items) {
+                    annotations.push.apply(annotations, content.items);
+                }
+            });
+        }
+        return annotations;
+    };
+    return ManifestsState;
+}());
+export { ManifestsState };
+export var manifestsState = new ManifestsState();

package/dist/state/manifests.test.d.ts

@@ -0,0 +1 @@
+export {};