@genome-spy/core 0.59.0 → 0.60.0

package/dist/src/utils/ui/tooltip.js

@@ -5,68 +5,96 @@ import { peek } from "../arrayUtils.js";
 export const SUPPRESS_TOOLTIP_CLASS_NAME = "gs-suppress-tooltip";
 
 export default class Tooltip {
+    #sticky = false;
+    #visible = true;
+
+    /** @type {any} */
+    #previousTooltipDatum = undefined;
+
+    #penaltyUntil = 0;
+
+    /** @type {[number, number]} */
+    #lastCoords = undefined;
+
+    #previousMove = 0;
+
+    /** @type {HTMLDivElement} */
+    #element;
+
+    /** @type {HTMLElement} */
+    #container;
+
+    #enabledStack = [true];
+
     /**
      * @param {HTMLElement} container
      */
     constructor(container) {
-        this.container = container;
-
-        this.element = document.createElement("div");
-        this.element.className = "tooltip";
-        this._visible = true;
-        this.container.appendChild(this.element);
+        this.#container = container;
 
-        /** @type {any} */
-        this._previousTooltipDatum = undefined;
+        this.#element = document.createElement("div");
+        this.#element.className = "tooltip";
+        this.#container.appendChild(this.#element);
 
-        this.enabledStack = [true];
-
-        this._penaltyUntil = 0;
-        /** @type {[number, number]} */
-        this._lastCoords = undefined;
+        this.clear();
+    }
 
-        this._previousMove = 0;
+    /**
+     * @param {boolean} sticky
+     */
+    set sticky(sticky) {
+        if (!sticky && this.#sticky) {
+            this.clear();
+        }
+        this.#sticky = sticky;
+        this.#element.classList.toggle("sticky", this.#sticky);
+    }
 
-        this.clear();
+    get sticky() {
+        return this.#sticky;
     }
 
     /**
      * @param {boolean} visible
      */
     set visible(visible) {
-        if (visible != this._visible) {
-            this.element.style.display = visible ? null : "none";
-            this._visible = visible;
+        if (visible != this.#visible) {
+            this.#element.style.display = visible ? null : "none";
+            this.#visible = visible;
         }
     }
 
     get visible() {
-        return this._visible;
+        return this.#visible;
     }
 
     get enabled() {
-        return peek(this.enabledStack) ?? true;
+        return peek(this.#enabledStack) ?? true;
     }
 
     /**
      * @param {boolean} enabled True if tooltip is enabled (allowed to be shown)
      */
     pushEnabledState(enabled) {
-        this.enabledStack.push(enabled);
+        this.#enabledStack.push(enabled);
         if (!enabled) {
             this.visible = false;
         }
     }
 
     popEnabledState() {
-        this.enabledStack.pop();
+        this.#enabledStack.pop();
     }
 
     /**
      * @param {MouseEvent} mouseEvent
      */
     handleMouseMove(mouseEvent) {
-        this.mouseCoords = clientPoint(this.container, mouseEvent);
+        if (this.#sticky) {
+            return;
+        }
+
+        this.mouseCoords = clientPoint(this.#container, mouseEvent);
 
         const now = performance.now();
 
@@ -75,28 +103,28 @@ export default class Tooltip {
         if (
             !this.visible &&
             !this._isPenalty() &&
-            now - this._previousMove > 500
+            now - this.#previousMove > 500
         ) {
-            this._penaltyUntil = now + 70;
+            this.#penaltyUntil = now + 70;
         }
 
         // Disable the tooltip for a while if the mouse is being moved very quickly.
         // Makes the tooltip less annoying.
         // TODO: Should calculate speed: pixels per millisecond or something
         if (
-            this._lastCoords &&
-            distance(this.mouseCoords, this._lastCoords) > 20
+            this.#lastCoords &&
+            distance(this.mouseCoords, this.#lastCoords) > 20
         ) {
-            this._penaltyUntil = now + 400;
+            this.#penaltyUntil = now + 400;
         }
 
-        this._lastCoords = this.mouseCoords;
+        this.#lastCoords = this.mouseCoords;
 
         if (this.visible) {
             this.updatePlacement();
         }
 
-        this._previousMove = now;
+        this.#previousMove = now;
     }
 
     updatePlacement() {
@@ -106,15 +134,15 @@ export default class Tooltip {
         const [mouseX, mouseY] = this.mouseCoords;
 
         let x = mouseX + spacing;
-        if (x > this.container.clientWidth - this.element.offsetWidth) {
-            x = mouseX - spacing - this.element.offsetWidth;
+        if (x > this.#container.clientWidth - this.#element.offsetWidth) {
+            x = mouseX - spacing - this.#element.offsetWidth;
         }
-        this.element.style.left = x + "px";
+        this.#element.style.left = x + "px";
 
-        this.element.style.top =
+        this.#element.style.top =
             Math.min(
                 mouseY + spacing,
-                this.container.clientHeight - this.element.offsetHeight
+                this.#container.clientHeight - this.#element.offsetHeight
             ) + "px";
     }
 
@@ -122,16 +150,20 @@ export default class Tooltip {
      * @param {string | import("lit").TemplateResult | HTMLElement} content
      */
     setContent(content) {
+        if (this.#sticky) {
+            return;
+        }
+
         if (!content || !this.enabled || this._isPenalty()) {
             if (this.visible) {
-                render("", this.element);
+                render("", this.#element);
                 this.visible = false;
             }
-            this._previousTooltipDatum = undefined;
+            this.#previousTooltipDatum = undefined;
             return;
         }
 
-        render(content, this.element);
+        render(content, this.#element);
 
         this.visible = true;
 
@@ -139,7 +171,7 @@ export default class Tooltip {
     }
 
     clear() {
-        this._previousTooltipDatum = undefined;
+        this.#previousTooltipDatum = undefined;
         this.setContent(undefined);
     }
 
@@ -152,8 +184,8 @@ export default class Tooltip {
      * @template T
      */
     updateWithDatum(datum, converter) {
-        if (datum !== this._previousTooltipDatum) {
-            this._previousTooltipDatum = datum;
+        if (datum !== this.#previousTooltipDatum) {
+            this.#previousTooltipDatum = datum;
             if (!converter) {
                 converter = (d) =>
                     Promise.resolve(html` ${JSON.stringify(d)} `);
@@ -170,7 +202,7 @@ export default class Tooltip {
     }
 
     _isPenalty() {
-        return this._penaltyUntil && this._penaltyUntil > performance.now();
+        return this.#penaltyUntil && this.#penaltyUntil > performance.now();
     }
 }
 

package/dist/src/view/concatView.d.ts

@@ -12,5 +12,5 @@ export default class ConcatView extends GridView {
      */
     constructor(spec: import("../spec/view.js").AnyConcatSpec, context: import("../types/viewContext.js").default, layoutParent: import("./containerView.js").default, dataParent: import("./view.js").default, name: string);
 }
-import GridView from "./gridView.js";
+import GridView from "./gridView/gridView.js";
 //# sourceMappingURL=concatView.d.ts.map

package/dist/src/view/concatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"concatView.d.ts","sourceRoot":"","sources":["../../../src/view/concatView.js"],"names":[],"mappings":"AAGA;;GAEG;AACH;IACI;;;;;;;OAOG;IACH,kBANW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,EAiBhB;CAqDJ;qBAlFoB,eAAe"}
+{"version":3,"file":"concatView.d.ts","sourceRoot":"","sources":["../../../src/view/concatView.js"],"names":[],"mappings":"AAGA;;GAEG;AACH;IACI;;;;;;;OAOG;IACH,kBANW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,EAiBhB;CAqDJ;qBAlFoB,wBAAwB"}

package/dist/src/view/concatView.js

@@ -1,5 +1,5 @@
 import { isConcatSpec, isHConcatSpec, isVConcatSpec } from "./viewFactory.js";
-import GridView from "./gridView.js";
+import GridView from "./gridView/gridView.js";
 
 /**
  * Creates a vertically or horizontally concatenated layout for children.

package/dist/src/view/gridView/gridChild.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @param {import("../../spec/view.js").ViewBackground} viewBackground
+ * @returns {import("../../spec/view.js").UnitSpec}
+ */
+export function createBackground(viewBackground: import("../../spec/view.js").ViewBackground): import("../../spec/view.js").UnitSpec;
+/**
+ * @param {import("../../spec/view.js").ViewBackground} viewBackground
+ * @returns {import("../../spec/view.js").UnitSpec}
+ */
+export function createBackgroundStroke(viewBackground: import("../../spec/view.js").ViewBackground): import("../../spec/view.js").UnitSpec;
+export default class GridChild {
+    /**
+     * @param {import("../view.js").default} view
+     * @param {import("../containerView.js").default} layoutParent
+     * @param {number} serial
+     */
+    constructor(view: import("../view.js").default, layoutParent: import("../containerView.js").default, serial: number);
+    layoutParent: import("../containerView.js").default;
+    view: import("../view.js").default;
+    serial: number;
+    /** @type {UnitView} */
+    background: UnitView;
+    /** @type {UnitView} */
+    backgroundStroke: UnitView;
+    /** @type {Partial<Record<import("../../spec/axis.js").AxisOrient, AxisView>>} axes */
+    axes: Partial<Record<import("../../spec/axis.js").AxisOrient, AxisView>>;
+    /** @type {Partial<Record<import("../../spec/axis.js").AxisOrient, AxisGridView>>} gridLines */
+    gridLines: Partial<Record<import("../../spec/axis.js").AxisOrient, AxisGridView>>;
+    /** @type {Partial<Record<import("./scrollbar.js").ScrollDirection, Scrollbar>>} */
+    scrollbars: Partial<Record<import("./scrollbar.js").ScrollDirection, Scrollbar>>;
+    /** @type {SelectionRect} */
+    selectionRect: SelectionRect;
+    /** @type {UnitView} */
+    title: UnitView;
+    /** @type {Rectangle} */
+    coords: Rectangle;
+    getChildren(): Generator<import("../view.js").default, void, unknown>;
+    /**
+     * Create view decorations, grid lines, axes, etc.
+     */
+    createAxes(): Promise<void>;
+    getOverhang(): Padding;
+    getOverhangAndPadding(): Padding;
+    #private;
+}
+import UnitView from "../unitView.js";
+import AxisView from "../axisView.js";
+import AxisGridView from "../axisGridView.js";
+import Scrollbar from "./scrollbar.js";
+import SelectionRect from "./selectionRect.js";
+import Rectangle from "../layout/rectangle.js";
+import Padding from "../layout/padding.js";
+//# sourceMappingURL=gridChild.d.ts.map

package/dist/src/view/gridView/gridChild.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridChild.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridChild.js"],"names":[],"mappings":"AA+pBA;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA8BjD;AAED;;;GAGG;AACH,uDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA6CjD;AA7tBD;IACI;;;;OAIG;IACH,kBAJW,OAAO,YAAY,EAAE,OAAO,gBAC5B,OAAO,qBAAqB,EAAE,OAAO,UACrC,MAAM,EAyFhB;IAtFG,oDAAgC;IAChC,mCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,sFAAsF;IACtF,MADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC/D;IAEd,+FAA+F;IAC/F,WADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC9D;IAEnB,mFAAmF;IACnF,YADW,OAAO,CAAC,MAAM,CAAC,OAAO,gBAAgB,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAC3D;IAEpB,4BAA4B;IAC5B,eADW,aAAa,CACM;IAE9B,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IAiZhC,sEAiBC;IAED;;OAEG;IACH,4BAsKC;IAED,uBAqBC;IAED,iCAEC;;CACJ;qBA9oBoB,gBAAgB;qBANK,gBAAgB;yBADjC,oBAAoB;sBAQvB,gBAAgB;0BACZ,oBAAoB;sBAJxB,wBAAwB;oBAF1B,sBAAsB"}