@openbraininstitute/morphoviewer 0.27.2 → 0.30.0

package/dist/components/morpho-viewer-octree/morpho-viewer-octree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"morpho-viewer-octree.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-octree/morpho-viewer-octree.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAIvD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAgChE"}
+{"version":3,"file":"morpho-viewer-octree.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-octree/morpho-viewer-octree.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAIvD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAqChE"}

package/dist/components/morpho-viewer-octree/morpho-viewer-octree.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tgdFullscreenToggle } from "@tolokoban/tgd";
 import React from "react";
+import { version } from "./../../package.json";
 import { classNames } from "./../../utils";
 import { MorphoViewerIconCenter } from "../icons/center";
 import { MorphoViewerIconFullscreen } from "../icons/fullscreen";
@@ -19,7 +20,7 @@ export function MorphoViewerOctree(props) {
     const handleResetCamera = () => {
         manager.resetCamera();
     };
-    return (_jsxs("div", { className: classNames(props.className, styles.morphoViewerOctree), ref: ref, children: [_jsx(Canvas, { painterManager: manager }), _jsxs("header", { children: [_jsx("button", { type: "button", onClick: handleResetCamera, children: _jsx(MorphoViewerIconCenter, {}) }), _jsx("button", { type: "button", onClick: handleFullscreen, children: _jsx(MorphoViewerIconFullscreen, {}) })] }), props.scalebar && (_jsx(MorphoViewerScalebar, { className: props.scalebar, spacePerPixelEvent: manager.eventScalebar }))] }));
+    return (_jsxs("div", { className: classNames(props.className, styles.morphoViewerOctree), ref: ref, "data-version": version, children: [_jsx(Canvas, { painterManager: manager }), _jsxs("header", { children: [_jsx("button", { type: "button", onClick: handleResetCamera, children: _jsx(MorphoViewerIconCenter, {}) }), _jsx("button", { type: "button", onClick: handleFullscreen, children: _jsx(MorphoViewerIconFullscreen, {}) })] }), props.scalebar && (_jsx(MorphoViewerScalebar, { className: props.scalebar, spacePerPixelEvent: manager.eventScalebar, unit: props.scalebar }))] }));
 }
 const Canvas = React.memo(({ painterManager }) => {
     return (_jsx("canvas", { className: styles.webgl, ref: (canvas) => {
@@ -29,4 +30,4 @@ const Canvas = React.memo(({ painterManager }) => {
             };
         } }, "canvas"));
 });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ycGhvLXZpZXdlci1vY3RyZWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9tb3JwaG8tdmlld2VyLW9jdHJlZS9tb3JwaG8tdmlld2VyLW9jdHJlZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JELE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBRXJDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3pELE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ2pFLE9BQU8sb0JBQW9CLE1BQU0sMkJBQTJCLENBQUM7QUFDN0QsT0FBTyxFQUFzQixnQkFBZ0IsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBSXpFLE9BQU8sTUFBTSxNQUFNLG1DQUFtQyxDQUFDO0FBRXZELE1BQU0sVUFBVSxrQkFBa0IsQ0FBQyxLQUE4QjtJQUMvRCxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUF3QixJQUFJLENBQUMsQ0FBQztJQUN0RCxNQUFNLE9BQU8sR0FBRyxnQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QyxNQUFNLGdCQUFnQixHQUFHLEdBQUcsRUFBRTtRQUM1QixNQUFNLEdBQUcsR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxHQUFHO1lBQUUsT0FBTztRQUVqQixtQkFBbUIsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUMzQixDQUFDLENBQUM7SUFDRixNQUFNLGlCQUFpQixHQUFHLEdBQUcsRUFBRTtRQUM3QixPQUFPLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDeEIsQ0FBQyxDQUFDO0lBRUYsT0FBTyxDQUNMLGVBQUssU0FBUyxFQUFFLFVBQVUsQ0FBQyxLQUFLLENBQUMsU0FBUyxFQUFFLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxFQUFFLEdBQUcsRUFBRSxHQUFHLGFBQzlFLEtBQUMsTUFBTSxJQUFDLGNBQWMsRUFBRSxPQUFPLEdBQUksRUFDbkMsNkJBQ0UsaUJBQVEsSUFBSSxFQUFDLFFBQVEsRUFBQyxPQUFPLEVBQUUsaUJBQWlCLFlBQzlDLEtBQUMsc0JBQXNCLEtBQUcsR0FDbkIsRUFDVCxpQkFBUSxJQUFJLEVBQUMsUUFBUSxFQUFDLE9BQU8sRUFBRSxnQkFBZ0IsWUFDN0MsS0FBQywwQkFBMEIsS0FBRyxHQUN2QixJQUNGLEVBQ1IsS0FBSyxDQUFDLFFBQVEsSUFBSSxDQUNqQixLQUFDLG9CQUFvQixJQUNuQixTQUFTLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFDekIsa0JBQWtCLEVBQUUsT0FBTyxDQUFDLGFBQWEsR0FDekMsQ0FDSCxJQUNHLENBQ1AsQ0FBQztBQUNKLENBQUM7QUFFRCxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxjQUFjLEVBQXFDLEVBQUUsRUFBRTtJQUNsRixPQUFPLENBQ0wsaUJBRUUsU0FBUyxFQUFFLE1BQU0sQ0FBQyxLQUFLLEVBQ3ZCLEdBQUcsRUFBRSxDQUFDLE1BQWdDLEVBQUUsRUFBRTtZQUN4QyxjQUFjLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztZQUMvQixPQUFPLEdBQUcsRUFBRTtnQkFDVixjQUFjLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztZQUMvQixDQUFDLENBQUM7UUFDSixDQUFDLElBUEcsUUFBUSxDQVFaLENBQ0gsQ0FBQztBQUNKLENBQUMsQ0FBQyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ycGhvLXZpZXdlci1vY3RyZWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9tb3JwaG8tdmlld2VyLW9jdHJlZS9tb3JwaG8tdmlld2VyLW9jdHJlZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JELE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLFNBQVMsQ0FBQztBQUVyQyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNqRSxPQUFPLG9CQUFvQixNQUFNLDJCQUEyQixDQUFDO0FBQzdELE9BQU8sRUFBc0IsZ0JBQWdCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUl6RSxPQUFPLE1BQU0sTUFBTSxtQ0FBbUMsQ0FBQztBQUV2RCxNQUFNLFVBQVUsa0JBQWtCLENBQUMsS0FBOEI7SUFDL0QsTUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBd0IsSUFBSSxDQUFDLENBQUM7SUFDdEQsTUFBTSxPQUFPLEdBQUcsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEMsTUFBTSxnQkFBZ0IsR0FBRyxHQUFHLEVBQUU7UUFDNUIsTUFBTSxHQUFHLEdBQUcsR0FBRyxDQUFDLE9BQU8sQ0FBQztRQUN4QixJQUFJLENBQUMsR0FBRztZQUFFLE9BQU87UUFFakIsbUJBQW1CLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDM0IsQ0FBQyxDQUFDO0lBQ0YsTUFBTSxpQkFBaUIsR0FBRyxHQUFHLEVBQUU7UUFDN0IsT0FBTyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hCLENBQUMsQ0FBQztJQUVGLE9BQU8sQ0FDTCxlQUNFLFNBQVMsRUFBRSxVQUFVLENBQUMsS0FBSyxDQUFDLFNBQVMsRUFBRSxNQUFNLENBQUMsa0JBQWtCLENBQUMsRUFDakUsR0FBRyxFQUFFLEdBQUcsa0JBQ00sT0FBTyxhQUVyQixLQUFDLE1BQU0sSUFBQyxjQUFjLEVBQUUsT0FBTyxHQUFJLEVBQ25DLDZCQUNFLGlCQUFRLElBQUksRUFBQyxRQUFRLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixZQUM5QyxLQUFDLHNCQUFzQixLQUFHLEdBQ25CLEVBQ1QsaUJBQVEsSUFBSSxFQUFDLFFBQVEsRUFBQyxPQUFPLEVBQUUsZ0JBQWdCLFlBQzdDLEtBQUMsMEJBQTBCLEtBQUcsR0FDdkIsSUFDRixFQUNSLEtBQUssQ0FBQyxRQUFRLElBQUksQ0FDakIsS0FBQyxvQkFBb0IsSUFDbkIsU0FBUyxFQUFFLEtBQUssQ0FBQyxRQUFRLEVBQ3pCLGtCQUFrQixFQUFFLE9BQU8sQ0FBQyxhQUFhLEVBQ3pDLElBQUksRUFBRSxLQUFLLENBQUMsUUFBUSxHQUNwQixDQUNILElBQ0csQ0FDUCxDQUFDO0FBQ0osQ0FBQztBQUVELE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFFLGNBQWMsRUFBcUMsRUFBRSxFQUFFO0lBQ2xGLE9BQU8sQ0FDTCxpQkFFRSxTQUFTLEVBQUUsTUFBTSxDQUFDLEtBQUssRUFDdkIsR0FBRyxFQUFFLENBQUMsTUFBZ0MsRUFBRSxFQUFFO1lBQ3hDLGNBQWMsQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1lBQy9CLE9BQU8sR0FBRyxFQUFFO2dCQUNWLGNBQWMsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1lBQy9CLENBQUMsQ0FBQztRQUNKLENBQUMsSUFQRyxRQUFRLENBUVosQ0FDSCxDQUFDO0FBQ0osQ0FBQyxDQUFDLENBQUMifQ==

package/dist/components/morpho-viewer-scalebar/morpho-viewer-scalebar.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
+import { type PropsForScalebar } from "../types";
 import type { TgdEvent } from "@tolokoban/tgd";
 export interface MorphoViewerScalebarProps {
-    className?: string | boolean;
+    className?: PropsForScalebar["scalebar"];
     spacePerPixelEvent: TgdEvent<number>;
-    unit?: number;
+    unit?: number | PropsForScalebar["scalebar"];
 }
-export default function MorphoViewerScalebar({ className, spacePerPixelEvent, unit, }: MorphoViewerScalebarProps): React.JSX.Element;
+export default function MorphoViewerScalebar({ className, spacePerPixelEvent, unit: unitProp, }: MorphoViewerScalebarProps): React.JSX.Element;
 //# sourceMappingURL=morpho-viewer-scalebar.d.ts.map

package/dist/components/morpho-viewer-scalebar/morpho-viewer-scalebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"morpho-viewer-scalebar.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-scalebar/morpho-viewer-scalebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,kBAAkB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAIrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,SAAS,EACT,kBAAkB,EAClB,IAAW,GACZ,EAAE,yBAAyB,qBA+B3B"}
+{"version":3,"file":"morpho-viewer-scalebar.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-scalebar/morpho-viewer-scalebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,gBAAgB,EAA4C,MAAM,UAAU,CAAC;AAU3F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACzC,kBAAkB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAIrC,IAAI,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,SAAS,EACT,kBAAkB,EAClB,IAAI,EAAE,QAAQ,GACf,EAAE,yBAAyB,qBAW3B"}

package/dist/components/morpho-viewer-scalebar/morpho-viewer-scalebar.js

@@ -1,30 +1,81 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "./../../utils";
+import { ScalebarOrientation } from "../types";
 import { paint } from "./painter";
+import { normalizeScalebarConfig, resolveHorizontalScalebar, resolvePixelRatio, resolveUnitFactor, resolveVerticalScalebar, } from "./resolve";
 import styles from "./morpho-viewer-scalebar.module.css";
-export default function MorphoViewerScalebar({ className, spacePerPixelEvent, unit = 1e-6, }) {
+export default function MorphoViewerScalebar({ className, spacePerPixelEvent, unit: unitProp, }) {
+    const config = React.useMemo(() => normalizeScalebarConfig(className), [className]);
+    const unit = resolveUnitFactor(config, unitProp);
+    const pixelRatio = resolvePixelRatio(config);
     const spacePerPixel = useSpacePerPixel(spacePerPixelEvent);
+    const sub = { config, unit, pixelRatio, spacePerPixel };
+    if (config.orientation === ScalebarOrientation.Vertical) {
+        return _jsx(VerticalScalebar, Object.assign({}, sub));
+    }
+    return _jsx(HorizontalScalebar, Object.assign({}, sub));
+}
+function VerticalScalebar({ config, unit, pixelRatio, spacePerPixel }) {
+    const resolved = React.useMemo(() => resolveVerticalScalebar(config), [config]);
     const ref = React.useRef(null);
-    React.useEffect(() => {
+    const [hovered, setHovered] = React.useState(false);
+    const effectiveHover = resolved.needsHover && hovered;
+    const repaint = React.useCallback(() => {
         const canvas = ref.current;
         if (!canvas)
             return;
-        paint(canvas, spacePerPixel, unit);
-    }, [spacePerPixel, unit]);
+        paint(canvas, spacePerPixel, unit, ScalebarOrientation.Vertical, resolved.paintParams(effectiveHover), pixelRatio);
+    }, [spacePerPixel, unit, resolved, effectiveHover, pixelRatio]);
+    useCanvasRepaint(ref, repaint, pixelRatio);
+    const enter = resolved.needsHover ? () => setHovered(true) : undefined;
+    const leave = resolved.needsHover ? () => setHovered(false) : undefined;
+    const canvasStyle = {
+        color: resolved.color,
+        fontSize: resolved.fontSize,
+        width: "100%",
+        height: "100%",
+    };
+    if (resolved.className) {
+        return (_jsx("canvas", { ref: ref, onMouseEnter: enter, onMouseLeave: leave, className: classNames(resolved.className, styles.morphoViewerScalebar), style: canvasStyle }));
+    }
+    let width = resolved.expandedWidth;
+    if (resolved.widthAnimates) {
+        width = effectiveHover ? resolved.expandedWidth : resolved.collapsedWidth;
+    }
+    return (_jsx("div", { className: styles.verticalContainer, style: Object.assign(Object.assign({}, resolved.containerStyle), { width, pointerEvents: resolved.needsHover ? "auto" : "none" }), onMouseEnter: enter, onMouseLeave: leave, children: _jsx("canvas", { ref: ref, className: styles.morphoViewerScalebar, style: canvasStyle }) }));
+}
+function HorizontalScalebar({ config, unit, pixelRatio, spacePerPixel }) {
+    var _a;
+    const resolved = React.useMemo(() => resolveHorizontalScalebar(config), [config]);
+    const ref = React.useRef(null);
+    const repaint = React.useCallback(() => {
+        const canvas = ref.current;
+        if (!canvas)
+            return;
+        paint(canvas, spacePerPixel, unit, ScalebarOrientation.Horizontal, undefined, pixelRatio);
+    }, [spacePerPixel, unit, pixelRatio]);
+    useCanvasRepaint(ref, repaint, pixelRatio);
+    const className = (_a = resolved.className) !== null && _a !== void 0 ? _a : (resolved.style ? undefined : styles.defaultLayout);
+    return (_jsx("canvas", { ref: ref, className: classNames(className, styles.morphoViewerScalebar), style: resolved.style }));
+}
+function useCanvasRepaint(ref, repaint, pixelRatio) {
+    React.useEffect(() => {
+        repaint();
+    }, [repaint]);
     React.useEffect(() => {
         const canvas = ref.current;
         if (!canvas)
             return;
+        const dpr = pixelRatio > 0 ? pixelRatio : 1;
         const observer = new ResizeObserver(() => {
-            canvas.width = canvas.clientWidth;
-            canvas.height = canvas.clientHeight;
-            paint(canvas, spacePerPixel, unit);
+            canvas.width = Math.max(1, Math.round(canvas.clientWidth * dpr));
+            canvas.height = Math.max(1, Math.round(canvas.clientHeight * dpr));
+            repaint();
         });
         observer.observe(canvas);
         return () => observer.unobserve(canvas);
-    }, [spacePerPixel, unit]);
-    return (_jsx("canvas", { ref: ref, className: classNames(typeof className === "string" ? className : styles.defaultLayout, styles.morphoViewerScalebar) }));
+    }, [ref, repaint, pixelRatio]);
 }
 function useSpacePerPixel(spacePerPixelEvent) {
     const [spacePerPixel, setSpacePerPixel] = React.useState(-1);
@@ -34,4 +85,4 @@ function useSpacePerPixel(spacePerPixelEvent) {
     }, [spacePerPixelEvent]);
     return spacePerPixel;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ycGhvLXZpZXdlci1zY2FsZWJhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL21vcnBoby12aWV3ZXItc2NhbGViYXIvbW9ycGhvLXZpZXdlci1zY2FsZWJhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBRXJDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFJbEMsT0FBTyxNQUFNLE1BQU0scUNBQXFDLENBQUM7QUFXekQsTUFBTSxDQUFDLE9BQU8sVUFBVSxvQkFBb0IsQ0FBQyxFQUMzQyxTQUFTLEVBQ1Qsa0JBQWtCLEVBQ2xCLElBQUksR0FBRyxJQUFJLEdBQ2U7SUFDMUIsTUFBTSxhQUFhLEdBQUcsZ0JBQWdCLENBQUMsa0JBQWtCLENBQUMsQ0FBQztJQUMzRCxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUEyQixJQUFJLENBQUMsQ0FBQztJQUN6RCxLQUFLLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNuQixNQUFNLE1BQU0sR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDO1FBQzNCLElBQUksQ0FBQyxNQUFNO1lBQUUsT0FBTztRQUVwQixLQUFLLENBQUMsTUFBTSxFQUFFLGFBQWEsRUFBRSxJQUFJLENBQUMsQ0FBQztJQUNyQyxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUMxQixLQUFLLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNuQixNQUFNLE1BQU0sR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDO1FBQzNCLElBQUksQ0FBQyxNQUFNO1lBQUUsT0FBTztRQUVwQixNQUFNLFFBQVEsR0FBRyxJQUFJLGNBQWMsQ0FBQyxHQUFHLEVBQUU7WUFDdkMsTUFBTSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDO1lBQ2xDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQztZQUNwQyxLQUFLLENBQUMsTUFBTSxFQUFFLGFBQWEsRUFBRSxJQUFJLENBQUMsQ0FBQztRQUNyQyxDQUFDLENBQUMsQ0FBQztRQUNILFFBQVEsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDekIsT0FBTyxHQUFHLEVBQUUsQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzFDLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRTFCLE9BQU8sQ0FDTCxpQkFDRSxHQUFHLEVBQUUsR0FBRyxFQUNSLFNBQVMsRUFBRSxVQUFVLENBQ25CLE9BQU8sU0FBUyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsYUFBYSxFQUNoRSxNQUFNLENBQUMsb0JBQW9CLENBQzVCLEdBQ08sQ0FDWCxDQUFDO0FBQ0osQ0FBQztBQUVELFNBQVMsZ0JBQWdCLENBQUMsa0JBQW9DO0lBQzVELE1BQU0sQ0FBQyxhQUFhLEVBQUUsZ0JBQWdCLENBQUMsR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDN0QsS0FBSyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7UUFDbkIsa0JBQWtCLENBQUMsV0FBVyxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDakQsT0FBTyxHQUFHLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxjQUFjLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUNuRSxDQUFDLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUM7SUFDekIsT0FBTyxhQUFhLENBQUM7QUFDdkIsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ycGhvLXZpZXdlci1zY2FsZWJhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL21vcnBoby12aWV3ZXItc2NhbGViYXIvbW9ycGhvLXZpZXdlci1zY2FsZWJhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBRXJDLE9BQU8sRUFBOEMsbUJBQW1CLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDM0YsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNsQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLHlCQUF5QixFQUN6QixpQkFBaUIsRUFDakIsaUJBQWlCLEVBQ2pCLHVCQUF1QixHQUN4QixNQUFNLFdBQVcsQ0FBQztBQUluQixPQUFPLE1BQU0sTUFBTSxxQ0FBcUMsQ0FBQztBQVd6RCxNQUFNLENBQUMsT0FBTyxVQUFVLG9CQUFvQixDQUFDLEVBQzNDLFNBQVMsRUFDVCxrQkFBa0IsRUFDbEIsSUFBSSxFQUFFLFFBQVEsR0FDWTtJQUMxQixNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRSxDQUFDLHVCQUF1QixDQUFDLFNBQVMsQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUNwRixNQUFNLElBQUksR0FBRyxpQkFBaUIsQ0FBQyxNQUFNLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDakQsTUFBTSxVQUFVLEdBQUcsaUJBQWlCLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDN0MsTUFBTSxhQUFhLEdBQUcsZ0JBQWdCLENBQUMsa0JBQWtCLENBQUMsQ0FBQztJQUUzRCxNQUFNLEdBQUcsR0FBRyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLGFBQWEsRUFBRSxDQUFDO0lBQ3hELElBQUksTUFBTSxD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

package/dist/components/morpho-viewer-scalebar/morpho-viewer-scalebar.module.css

@@ -1,13 +1,23 @@
 .morphoViewerScalebar {
-    background: transparent;
-    z-index: 1;
+  background: transparent;
+  z-index: 1;
 }
 
 .defaultLayout {
-    position: absolute;
-    left: 8px;
-    bottom: 8px;
-    width: calc(100% - 16px - 128px);
-    height: 1.4em;
-    pointer-events: none;
-}
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  width: calc(100% - 16px - 128px);
+  height: 1.4em;
+  pointer-events: none;
+}
+
+/* vertical ruler container. Position/size come from the resolved inline style;
+ * this class only carries stacking + the width transition used when the ruler
+ * expands on hover. */
+.verticalContainer {
+  z-index: 3;
+  line-height: 1;
+  box-sizing: border-box;
+  transition: width 0.12s ease;
+}

package/dist/components/morpho-viewer-scalebar/painter.d.ts

@@ -1,2 +1,3 @@
-export declare function paint(canvas: HTMLCanvasElement, spacePerPixel: number, unitFactor?: number): void;
+import type { VerticalPaintParams } from "./resolve";
+export declare function paint(canvas: HTMLCanvasElement, spacePerPixel: number, unitFactor?: number, orientation?: "horizontal" | "vertical", vertical?: VerticalPaintParams, pixelRatio?: number): void;
 //# sourceMappingURL=painter.d.ts.map

package/dist/components/morpho-viewer-scalebar/painter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"painter.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-scalebar/painter.ts"],"names":[],"mappings":"AAGA,wBAAgB,KAAK,CAAC,MAAM,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,EAAE,UAAU,SAAO,QAkCxF"}
+{"version":3,"file":"painter.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-scalebar/painter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AA+BrD,wBAAgB,KAAK,CACnB,MAAM,EAAE,iBAAiB,EACzB,aAAa,EAAE,MAAM,EACrB,UAAU,SAAO,EACjB,WAAW,GAAE,YAAY,GAAG,UAAyB,EACrD,QAAQ,CAAC,EAAE,mBAAmB,EAC9B,UAAU,SAAI,QAuBf"}

package/dist/components/morpho-viewer-scalebar/painter.js

@@ -1,17 +1,40 @@
 const UNITS = ["m", "mm", "μm", "nm", "pm", "fm"];
 const VALUES = [1, 2, 5, 10, 20, 25, 50, 100, 200, 250, 300, 400, 500, 600, 700, 800, 900];
-export function paint(canvas, spacePerPixel, unitFactor = 1e-6) {
+const LABEL_GAP = 4;
+const HORIZONTAL_THICKNESS = 2;
+function createSnapper(thickness, dpr) {
+    const widthDevice = Math.max(1, Math.round(thickness * dpr));
+    const halfOffset = widthDevice % 2 ? 0.5 : 0;
+    return {
+        lineWidth: widthDevice / dpr,
+        snap: (posCss) => (Math.round(posCss * dpr - halfOffset) + halfOffset) / dpr,
+        snapPoint: (posCss) => Math.round(posCss * dpr) / dpr,
+    };
+}
+export function paint(canvas, spacePerPixel, unitFactor = 1e-6, orientation = "horizontal", vertical, pixelRatio = 1) {
     const ctx = canvas.getContext("2d");
     if (!ctx)
         return;
-    const w = canvas.width;
-    const h = canvas.height;
-    ctx.lineWidth = 2;
+    const dpr = pixelRatio > 0 ? pixelRatio : 1;
+    const w = canvas.width / dpr;
+    const h = canvas.height / dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, w, h);
     const css = globalThis.getComputedStyle(canvas);
     ctx.fillStyle = css.color;
     ctx.strokeStyle = css.color;
     ctx.font = `${css.fontSize} ${css.fontFamily}`;
+    if (orientation === "vertical" && vertical) {
+        ctx.fillStyle = vertical.color;
+        ctx.strokeStyle = vertical.color;
+        paintVertical(ctx, w, h, spacePerPixel, unitFactor, vertical, dpr);
+        return;
+    }
+    paintHorizontal(ctx, w, h, spacePerPixel, unitFactor, dpr);
+}
+function paintHorizontal(ctx, w, h, spacePerPixel, unitFactor, dpr) {
+    const { snap, snapPoint, lineWidth } = createSnapper(HORIZONTAL_THICKNESS, dpr);
+    ctx.lineWidth = lineWidth;
     const minStepWidth = 3 * ctx.measureText("999 mm").width;
     const { unitText, width, value } = computeBestFit(w, spacePerPixel, unitFactor, minStepWidth);
     let step = 0;
@@ -20,12 +43,12 @@ export function paint(canvas, spacePerPixel, unitFactor = 1e-6) {
         step++;
         const text = `${value * step} ${unitText} `;
         const measure = ctx.measureText(text);
-        const y = Math.round(measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent) + .5;
-        const x = Math.round(stepX1 - (width + measure.width) / 2) + .5;
+        const y = snapPoint(measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent);
+        const x = snapPoint(stepX1 - (width + measure.width) / 2);
         ctx.fillText(text, x, y);
-        const x0 = Math.round(stepX0) + .5;
-        const x1 = Math.round(stepX1) + .5;
-        const yy = h - measure.actualBoundingBoxAscent;
+        const x0 = snap(stepX0);
+        const x1 = snap(stepX1);
+        const yy = snap(h - measure.actualBoundingBoxAscent);
         ctx.beginPath();
         ctx.moveTo(x0, yy);
         ctx.lineTo(x0, h);
@@ -36,6 +59,86 @@ export function paint(canvas, spacePerPixel, unitFactor = 1e-6) {
             break;
     }
 }
+function buildMajorPositions(bottomY, topY, majorStep, snap) {
+    const span = bottomY - topY;
+    const majorCount = Math.max(1, Math.round(span / majorStep));
+    const majors = [];
+    for (let m = 0; m <= majorCount; m++) {
+        majors.push(snap(bottomY - (m / majorCount) * span));
+    }
+    return majors;
+}
+function paintVertical(ctx, w, h, spacePerPixel, unitFactor, params, dpr) {
+    const { anchor, outerReserve, majorLength, minorLength, minorPerMajor } = params;
+    const { snap, lineWidth } = createSnapper(params.thickness, dpr);
+    ctx.lineWidth = lineWidth;
+    const sample = ctx.measureText("999 mm");
+    const textHeight = sample.actualBoundingBoxAscent + sample.actualBoundingBoxDescent;
+    const minStepHeight = 3 * textHeight;
+    const xBase = snap(anchor === "left" ? outerReserve : Math.round(w) - outerReserve);
+    const labelPad = params.labels
+        ? Math.ceil((sample.actualBoundingBoxAscent + sample.actualBoundingBoxDescent) / 2) + 1
+        : 0;
+    const topY = snap(labelPad);
+    const bottomY = snap(h - labelPad);
+    const rulerHeight = bottomY - topY;
+    if (rulerHeight <= 0)
+        return;
+    const { unitText: fitUnitText, width: fitMajorStep, value: fitValue, } = computeBestFit(rulerHeight, spacePerPixel, unitFactor, minStepHeight);
+    if (!Number.isFinite(fitMajorStep) || fitMajorStep <= 0)
+        return;
+    const majors = buildMajorPositions(bottomY, topY, fitMajorStep, snap);
+    ctx.beginPath();
+    ctx.moveTo(xBase, topY);
+    ctx.lineTo(xBase, bottomY);
+    ctx.stroke();
+    for (let m = 0; m < majors.length - 1; m++) {
+        const lower = majors[m];
+        const upper = majors[m + 1];
+        const segmentStep = (lower - upper) / minorPerMajor;
+        for (let k = 1; k < minorPerMajor; k++) {
+            drawPin(ctx, xBase, snap(lower - k * segmentStep), minorLength, params);
+        }
+    }
+    for (let m = 0; m < majors.length; m++) {
+        const yy = majors[m];
+        drawPin(ctx, xBase, yy, majorLength, params);
+        if (params.labels) {
+            drawLabel(ctx, params, xBase, majorLength, yy, `${m * fitValue} ${fitUnitText}`);
+        }
+    }
+    ctx.textAlign = "start";
+    ctx.textBaseline = "alphabetic";
+}
+function drawPin(ctx, xBase, yy, len, params) {
+    if (params.leftPins) {
+        ctx.beginPath();
+        ctx.moveTo(xBase, yy);
+        ctx.lineTo(xBase - len, yy);
+        ctx.stroke();
+    }
+    if (params.rightPins) {
+        ctx.beginPath();
+        ctx.moveTo(xBase, yy);
+        ctx.lineTo(xBase + len, yy);
+        ctx.stroke();
+    }
+}
+function drawLabel(ctx, params, xBase, majorLength, yy, text) {
+    ctx.textBaseline = "middle";
+    const pinOnRight = params.rightPins;
+    const pinOnLeft = params.leftPins;
+    if (params.labelSide === "right") {
+        ctx.textAlign = "left";
+        const x = pinOnRight ? xBase + majorLength + LABEL_GAP : xBase + LABEL_GAP;
+        ctx.fillText(text, x, yy);
+    }
+    else {
+        ctx.textAlign = "right";
+        const x = pinOnLeft ? xBase - majorLength - LABEL_GAP : xBase - LABEL_GAP;
+        ctx.fillText(text, x, yy);
+    }
+}
 function computeBestFit(scalebarSize, spacePerPixel, unitFactor, minStepWidth) {
     const steps = Math.max(1, Math.floor(scalebarSize / minStepWidth));
     const stepSize = scalebarSize / steps;
@@ -58,4 +161,4 @@ function computeBestFit(scalebarSize, spacePerPixel, unitFactor, minStepWidth) {
     const width = bestValue / (spacePerPixel * factor);
     return { unitText, width, value: bestValue };
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFpbnRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL21vcnBoby12aWV3ZXItc2NhbGViYXIvcGFpbnRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLEtBQUssR0FBRyxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUE7QUFDakQsTUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUE7QUFFMUYsTUFBTSxVQUFVLEtBQUssQ0FBQyxNQUF5QixFQUFFLGFBQXFCLEVBQUUsVUFBVSxHQUFHLElBQUk7SUFDckYsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUNuQyxJQUFJLENBQUMsR0FBRztRQUFFLE9BQU07SUFFaEIsTUFBTSxDQUFDLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQTtJQUN0QixNQUFNLENBQUMsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFBO0lBQ3ZCLEdBQUcsQ0FBQyxTQUFTLEdBQUcsQ0FBQyxDQUFBO0lBQ2pCLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUE7SUFDekIsTUFBTSxHQUFHLEdBQUcsVUFBVSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sQ0FBQyxDQUFBO0lBQy9DLEdBQUcsQ0FBQyxTQUFTLEdBQUcsR0FBRyxDQUFDLEtBQUssQ0FBQTtJQUN6QixHQUFHLENBQUMsV0FBVyxH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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFpbnRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL21vcnBoby12aWV3ZXItc2NhbGViYXIvcGFpbnRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxNQUFNLEtBQUssR0FBRyxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7QUFDbEQsTUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7QUFFM0YsTUFBTSxTQUFTLEdBQUcsQ0FBQyxDQUFDO0FBRXBCLE1BQU0sb0JBQW9CLEdBQUcsQ0FBQyxDQUFDO0FBYy9CLFNBQVMsYUFBYSxDQUFDLFNBQWlCLEVBQUUsR0FBVztJQUNuRCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQzdELE1BQU0sVUFBVSxHQUFHLFdBQVcsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQzdDLE9BQU87UUFDTCxTQUFTLEVBQUUsV0FBVyxHQUFHLEdBQUc7UUFDNUIsSUFBSSxFQUFFLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLEdBQUcsR0FBRyxVQUFVLENBQUMsR0FBRyxVQUFVLENBQUMsR0FBRyxHQUFHO1FBQzVFLFNBQVMsRUFBRSxDQUFD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

package/dist/components/morpho-viewer-scalebar/resolve.d.ts

@@ -0,0 +1,36 @@
+import { type ScalebarConfig, type TScalebarSide } from "../types";
+import type React from "react";
+export interface VerticalPaintParams {
+    anchor: TScalebarSide;
+    outerReserve: number;
+    majorLength: number;
+    minorLength: number;
+    minorPerMajor: number;
+    leftPins: boolean;
+    rightPins: boolean;
+    labels: boolean;
+    labelSide: TScalebarSide;
+    color: string;
+    thickness: number;
+}
+export interface ResolvedVerticalScalebar {
+    className?: string;
+    containerStyle: React.CSSProperties;
+    collapsedWidth: number;
+    expandedWidth: number;
+    widthAnimates: boolean;
+    needsHover: boolean;
+    color: string;
+    fontSize: number;
+    paintParams(hovered: boolean): VerticalPaintParams;
+}
+export declare function normalizeScalebarConfig(value: boolean | string | ScalebarConfig | undefined): ScalebarConfig;
+export declare function resolveUnitFactor(config: ScalebarConfig, unitProp?: unknown): number;
+export declare function resolvePixelRatio(config: ScalebarConfig): number;
+export declare function resolveVerticalScalebar(config: ScalebarConfig): ResolvedVerticalScalebar;
+export interface ResolvedHorizontalScalebar {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function resolveHorizontalScalebar(config: ScalebarConfig): ResolvedHorizontalScalebar;
+//# sourceMappingURL=resolve.d.ts.map

package/dist/components/morpho-viewer-scalebar/resolve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-scalebar/resolve.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,aAAa,EAEnB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAmB;IAElC,MAAM,EAAE,aAAa,CAAC;IAEtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IAEtB,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,EAAE,OAAO,CAAC;IAEnB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,aAAa,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,wBAAwB;IAEvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IAEtB,aAAa,EAAE,OAAO,CAAC;IAEvB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,mBAAmB,CAAC;CACpD;AAgBD,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,GAAG,SAAS,GACnD,cAAc,CAIhB;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAEpF;AAGD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAGhE;AAuBD,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,cAAc,GAAG,wBAAwB,CAuFxF;AAYD,MAAM,WAAW,0BAA0B;IAEzC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAOD,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,cAAc,GAAG,0BAA0B,CAgB5F"}

package/dist/components/morpho-viewer-scalebar/resolve.js

@@ -0,0 +1,129 @@
+import { ScalebarSide, ScalebarWhen, } from "../types";
+const DEFAULT_MAJOR_LENGTH = 10;
+const DEFAULT_MINOR_LENGTH = 5;
+const DEFAULT_MINOR_PER_MAJOR = 5;
+const DEFAULT_COLOR = "#9ca3af";
+const DEFAULT_THICKNESS = 1;
+const DEFAULT_MARGIN_X = 2;
+const DEFAULT_MARGIN_Y = 12;
+const DEFAULT_HEIGHT = "min(180px, 42%)";
+const FONT_SIZE = 10;
+const LABEL_GAP = 4;
+const LABEL_RESERVE = 40;
+export function normalizeScalebarConfig(value) {
+    if (!value || value === true)
+        return {};
+    if (typeof value === "string")
+        return { className: value };
+    return value;
+}
+export function resolveUnitFactor(config, unitProp) {
+    var _a, _b;
+    return (_b = (_a = config.unit) !== null && _a !== void 0 ? _a : (typeof unitProp === "number" ? unitProp : undefined)) !== null && _b !== void 0 ? _b : 1e-6;
+}
+export function resolvePixelRatio(config) {
+    if (!config.hiDPI)
+        return 1;
+    return Math.max(1, globalThis.devicePixelRatio || 1);
+}
+function visible(when, hovered) {
+    if (when === ScalebarWhen.Always)
+        return true;
+    if (when === ScalebarWhen.Never)
+        return false;
+    return hovered;
+}
+function marginXY(config) {
+    var _a, _b;
+    const m = config.margin;
+    if (typeof m === "number")
+        return { x: m, y: m };
+    return { x: (_a = m === null || m === void 0 ? void 0 : m.x) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN_X, y: (_b = m === null || m === void 0 ? void 0 : m.y) !== null && _b !== void 0 ? _b : DEFAULT_MARGIN_Y };
+}
+function sideExtent(pinsShown, labelsShown, majorLength) {
+    const pinExtent = pinsShown ? majorLength : 0;
+    if (!labelsShown)
+        return pinExtent;
+    const labelStart = (pinsShown ? majorLength : 0) + LABEL_GAP;
+    return Math.max(pinExtent, labelStart + LABEL_RESERVE);
+}
+export function resolveVerticalScalebar(config) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    const placement = (_a = config.placement) !== null && _a !== void 0 ? _a : "bottom-left";
+    const anchor = placement.includes("right")
+        ? ScalebarSide.Right
+        : ScalebarSide.Left;
+    const innerSide = anchor === ScalebarSide.Left ? ScalebarSide.Right : ScalebarSide.Left;
+    const reveal = config.reveal;
+    const pinsLeftWhen = (_c = (_b = config.pins) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : ScalebarWhen.Always;
+    const pinsRightWhen = (_f = (_e = (_d = config.pins) === null || _d === void 0 ? void 0 : _d.right) !== null && _e !== void 0 ? _e : reveal) !== null && _f !== void 0 ? _f : ScalebarWhen.Hover;
+    const labelsWhen = (_j = (_h = (_g = config.labels) === null || _g === void 0 ? void 0 : _g.show) !== null && _h !== void 0 ? _h : reveal) !== null && _j !== void 0 ? _j : ScalebarWhen.Hover;
+    const labelSide = (_l = (_k = config.labels) === null || _k === void 0 ? void 0 : _k.side) !== null && _l !== void 0 ? _l : innerSide;
+    const majorLength = (_o = (_m = config.pins) === null || _m === void 0 ? void 0 : _m.majorLength) !== null && _o !== void 0 ? _o : DEFAULT_MAJOR_LENGTH;
+    const minorLength = (_q = (_p = config.pins) === null || _p === void 0 ? void 0 : _p.minorLength) !== null && _q !== void 0 ? _q : DEFAULT_MINOR_LENGTH;
+    const minorPerMajor = (_s = (_r = config.pins) === null || _r === void 0 ? void 0 : _r.minorPerMajor) !== null && _s !== void 0 ? _s : DEFAULT_MINOR_PER_MAJOR;
+    const color = (_t = config.color) !== null && _t !== void 0 ? _t : DEFAULT_COLOR;
+    const thickness = (_u = config.thickness) !== null && _u !== void 0 ? _u : DEFAULT_THICKNESS;
+    const whenForSide = (side) => side === ScalebarSide.Left ? pinsLeftWhen : pinsRightWhen;
+    const outerWhen = whenForSide(anchor);
+    const innerWhen = whenForSide(innerSide);
+    const labelsOnOuter = labelSide === anchor;
+    const labelsOnInner = labelSide === innerSide;
+    const outerReserve = Math.max(majorLength, sideExtent(outerWhen !== ScalebarWhen.Never, labelsOnOuter, majorLength));
+    const innerExtent = (hovered) => sideExtent(visible(innerWhen, hovered), labelsOnInner && visible(labelsWhen, hovered), majorLength);
+    const needsHover = pinsLeftWhen === ScalebarWhen.Hover ||
+        pinsRightWhen === ScalebarWhen.Hover ||
+        labelsWhen === ScalebarWhen.Hover;
+    const width = (hovered) => outerReserve + innerExtent(needsHover ? hovered : true) + 1;
+    const collapsedWidth = Math.ceil(width(false));
+    const expandedWidth = Math.ceil(width(true));
+    const { x: mx, y: my } = marginXY(config);
+    const containerStyle = config.className
+        ? {}
+        : Object.assign(Object.assign(Object.assign({ position: "absolute", height: DEFAULT_HEIGHT }, (anchor === ScalebarSide.Left ? { left: mx } : { right: mx })), verticalEdgeStyle(placement, my)), config.style);
+    return {
+        className: config.className,
+        containerStyle,
+        collapsedWidth,
+        expandedWidth,
+        widthAnimates: collapsedWidth !== expandedWidth,
+        needsHover,
+        color,
+        fontSize: FONT_SIZE,
+        paintParams(hovered) {
+            return {
+                anchor,
+                outerReserve,
+                majorLength,
+                minorLength,
+                minorPerMajor,
+                leftPins: visible(pinsLeftWhen, hovered),
+                rightPins: visible(pinsRightWhen, hovered),
+                labels: visible(labelsWhen, hovered),
+                labelSide,
+                color,
+                thickness,
+            };
+        },
+    };
+}
+function verticalEdgeStyle(placement, my) {
+    if (placement.startsWith("top"))
+        return { top: my };
+    if (placement.startsWith("bottom"))
+        return { bottom: my };
+    return { top: "50%", transform: "translateY(-50%)" };
+}
+const HORIZONTAL_FAR_RESERVE = 128;
+export function resolveHorizontalScalebar(config) {
+    var _a;
+    if (config.className)
+        return { className: config.className };
+    if (!config.placement && !config.style && config.margin === undefined)
+        return {};
+    const { x: mx, y: my } = marginXY(config);
+    const placement = (_a = config.placement) !== null && _a !== void 0 ? _a : "bottom";
+    const style = Object.assign(Object.assign({ position: "absolute", height: "1.4em", left: mx, right: mx + HORIZONTAL_FAR_RESERVE, pointerEvents: "none" }, (placement.startsWith("top") ? { top: my } : { bottom: my })), config.style);
+    return { style };
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzb2x2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL21vcnBoby12aWV3ZXItc2NhbGViYXIvcmVzb2x2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsWUFBWSxFQUNaLFlBQVksR0FHYixNQUFNLFVBQVUsQ0FBQztBQXlDbEIsTUFBTSxvQkFBb0IsR0FBRyxFQUFFLENBQUM7QUFDaEMsTUFBTSxvQkFBb0IsR0FBRyxDQUFDLENBQUM7QUFDL0IsTUFBTSx1QkFBdUIsR0FBRyxDQUFDLENBQUM7QUFDbEMsTUFBTSxhQUFhLEdBQUcsU0FBUyxDQUFDO0FBQ2hDLE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxDQUFDO0FBQzVCLE1BQU0sZ0JBQWdCLEdBQUcsQ0FBQyxDQUFDO0FBQzNCLE1BQU0sZ0JBQWdCLEdBQUcsRUFBRSxDQUFDO0FBQzVCLE1BQU0sY0FBYyxHQUFHLGlCQUFpQixDQUFDO0FBQ3pDLE1BQU0sU0FBUyxHQUFHLEVBQUUsQ0FBQztBQUNyQixNQUFNLFNBQVMsR0FBRyxDQUFDLENBQUM7QUFFcEIsTUFBTSxhQUFhLEdBQUcsRUFBRSxDQUFDO0FBR3pCLE1BQU0sVUFBVSx1QkFBdUIsQ0FDckMsS0FBb0Q7SUFFcEQsSUFBSSxDQUFDLEtBQUssSUFBSSxLQUFLLEtBQUssSUFBSTtRQUFFLE9BQU8sRUFBRSxDQUFDO0lBQ3hDLElBQUksT0FBTyxLQUFLLEtBQUssUUFBUTtRQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7SUFDM0QsT0FBTyxLQUFLLENBQUM7QUFDZixDQUFDO0FBRUQsTUFBTSxVQUFVLGlCQUFpQixDQUFDLE1BQXNCLEVBQUUsUUFBa0I7O0lBQzFFLE9BQU8sTUFBQSxNQUFBLE1BQU0sQ0FBQyxJQUFJLG1DQUFJLENBQUMsT0FBTyxRQUFRLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFNBQVMs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

package/dist/components/morpho-viewer-simul/morpho-viewer-simul.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"morpho-viewer-simul.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-simul/morpho-viewer-simul.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAK7D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAkD9D"}
+{"version":3,"file":"morpho-viewer-simul.d.ts","sourceRoot":"","sources":["../../../src/components/morpho-viewer-simul/morpho-viewer-simul.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAK7D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAkD9D"}