gosling.js 1.0.6 → 1.0.7

package/README.md

@@ -16,25 +16,9 @@ The Gosling's key features compared to existing visualization libraries and gram
 
 -   **Interactivity**: Gosling has intuitive and effective user interactions built in, including zooming and panning and [brushing and linking](https://infovis-wiki.net/wiki/Linking_and_Brushing). This enables flexible visualizations that cover a wide range of visual analysis scenarios, like overview + detail views with brushes or comparative views.
 
-## Learn More About Gosling
-
--   [Documentation](http://gosling-lang.org/)
--   [Gosling.js Editor](https://gosling.js.org/)
--   [Gallery Examples](https://gosling-lang.org/examples/)
--   [How-to & Tutorials](https://gosling-lang.org/tutorials/)
--   [v1 Announcement](https://gosling-lang.org/blog/v1-release)
-
-## Contribute to Gosling.js
-
-We welcome and greatly appreciate your contribution to this project! Please read [CONTRIBUTING.md](/CONTRIBUTING.md) to find guidelines.
-
-## Contact
-
-Open [Github Issues](https://github.com/gosling-lang/gosling.js/issues/) to ask questions or request features.
-
 ## Citation
 
-[L'Yi et al., 2021. “Gosling: A Grammar-based Toolkit for Scalable and Interactive Genomics Data Visualization.”](https://pmc.ncbi.nlm.nih.gov/articles/PMC8826597/)
+[L'Yi et al., 2022. “Gosling: A Grammar-based Toolkit for Scalable and Interactive Genomics Data Visualization.”](https://doi.org/10.1109/TVCG.2021.3114876)
 
 ```bib
 @article{lyi2021gosling,
@@ -49,6 +33,22 @@ Open [Github Issues](https://github.com/gosling-lang/gosling.js/issues/) to ask
 }
 ```
 
+## Learn More About Gosling
+
+-   [Documentation](http://gosling-lang.org/)
+-   [Gosling.js Editor](https://gosling.js.org/)
+-   [Gallery Examples](https://gosling-lang.org/examples/)
+-   [How-to & Tutorials](https://gosling-lang.org/tutorials/)
+-   [v1 Announcement](https://gosling-lang.org/blog/v1-release)
+
+## Contribute to Gosling.js
+
+We welcome and greatly appreciate your contribution to this project! Please read [CONTRIBUTING.md](/CONTRIBUTING.md) to find guidelines.
+
+## Contact
+
+Open [Github Issues](https://github.com/gosling-lang/gosling.js/issues/) to ask questions or request features.
+
 ## License
 
 This project is licensed under the terms of the [MIT license](https://github.com/gosling-lang/gosling.js/blob/main/LICENSE.md).

package/dist/gosling.js

@@ -36,7 +36,7 @@ import React, { forwardRef, useState, useEffect, useMemo, useRef, useImperativeH
 import { HiGlassComponent } from "higlass";
 import { ResizeSensor } from "css-element-queries";
 const name = "gosling.js";
-const version = "1.0.6";
+const version = "1.0.7";
 const $ref = "#/definitions/Theme";
 const $schema = "http://json-schema.org/draft-07/schema#";
 const definitions = { "AxisStyle": { "additionalProperties": false, "properties": { "baselineColor": { "type": "string" }, "gridColor": { "type": "string" }, "gridStrokeDash": { "items": { "type": "number" }, "maxItems": 2, "minItems": 2, "type": "array" }, "gridStrokeType": { "enum": ["solid", "dashed"], "type": "string" }, "gridStrokeWidth": { "type": "number" }, "labelColor": { "type": "string" }, "labelExcludeChrPrefix": { "description": "If `true`, labels of genomics axes excludes the chromosome prefix (e.g., `chr1` -> `1`).", "type": "boolean" }, "labelFontFamily": { "type": "string" }, "labelFontSize": { "type": "number" }, "labelFontWeight": { "enum": ["bold", "normal", "light"], "type": "string" }, "labelMargin": { "description": "The margin around labels for calculating visual overlaps between labels. This is mainly used for determining the visibility of axis labels. `0` if no margin to use. Negative values (`-1`) for showing all labels even if they overlap.", "type": "number" }, "tickColor": { "type": "string" } }, "type": "object" }, "LegendStyle": { "additionalProperties": false, "properties": { "background": { "type": "string" }, "backgroundOpacity": { "type": "number" }, "backgroundStroke": { "type": "string" }, "labelColor": { "type": "string" }, "labelFontFamily": { "type": "string" }, "labelFontSize": { "type": "number" }, "labelFontWeight": { "enum": ["bold", "normal", "light"], "type": "string" }, "position": { "enum": ["top", "right"], "type": "string" }, "tickColor": { "type": "string" } }, "type": "object" }, "MarkStyle": { "additionalProperties": false, "properties": { "color": { "type": "string" }, "nominalColorRange": { "items": { "type": "string" }, "type": "array" }, "opacity": { "type": "number" }, "quantitativeSizeRange": { "items": { "type": "number" }, "maxItems": 2, "minItems": 2, "type": "array" }, "size": { "type": "number" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" } }, "type": "object" }, "RootStyle": { "additionalProperties": false, "properties": { "background": { "type": "string" }, "mousePositionColor": { "type": "string" }, "showMousePosition": { "type": "boolean" }, "subtitleAlign": { "enum": ["left", "middle", "right"], "type": "string" }, "subtitleBackgroundColor": { "type": "string" }, "subtitleColor": { "type": "string" }, "subtitleFontFamily": { "type": "string" }, "subtitleFontSize": { "type": "number" }, "subtitleFontWeight": { "enum": ["bold", "normal", "light"], "type": "string" }, "titleAlign": { "enum": ["left", "middle", "right"], "type": "string" }, "titleBackgroundColor": { "type": "string" }, "titleColor": { "type": "string" }, "titleFontFamily": { "type": "string" }, "titleFontSize": { "type": "number" }, "titleFontWeight": { "enum": ["bold", "normal", "light"], "type": "string" } }, "type": "object" }, "Theme": { "anyOf": [{ "$ref": "#/definitions/ThemeType" }, { "$ref": "#/definitions/ThemeDeep" }] }, "ThemeDeep": { "additionalProperties": false, "properties": { "area": { "$ref": "#/definitions/MarkStyle" }, "axis": { "$ref": "#/definitions/AxisStyle" }, "bar": { "$ref": "#/definitions/MarkStyle" }, "base": { "$ref": "#/definitions/ThemeType" }, "brush": { "$ref": "#/definitions/MarkStyle" }, "legend": { "$ref": "#/definitions/LegendStyle" }, "line": { "$ref": "#/definitions/MarkStyle" }, "link": { "$ref": "#/definitions/MarkStyle" }, "markCommon": { "$ref": "#/definitions/MarkStyle" }, "point": { "$ref": "#/definitions/MarkStyle" }, "rect": { "$ref": "#/definitions/MarkStyle" }, "root": { "$ref": "#/definitions/RootStyle" }, "rule": { "$ref": "#/definitions/MarkStyle" }, "text": { "additionalProperties": false, "properties": { "color": { "type": "string" }, "nominalColorRange": { "items": { "type": "string" }, "type": "array" }, "opacity": { "type": "number" }, "quantitativeSizeRange": { "items": { "type": "number" }, "maxItems": 2, "minItems": 2, "type": "array" }, "size": { "type": "number" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "textAnchor": { "enum": ["start", "middle", "end"], "type": "string" }, "textFontWeight": { "enum": ["bold", "normal"], "type": "string" } }, "type": "object" }, "track": { "$ref": "#/definitions/TrackStyle" }, "triangle": { "$ref": "#/definitions/MarkStyle" } }, "required": ["base"], "type": "object" }, "ThemeType": { "enum": ["light", "dark", "warm", "ggplot", "igv", "ensembl", "jbrowse", "ucsc", "washu", "excel", "google"], "type": "string" }, "TrackStyle": { "additionalProperties": false, "properties": { "alternatingBackground": { "type": "string" }, "background": { "type": "string" }, "outline": { "type": "string" }, "outlineWidth": { "type": "number" }, "titleAlign": { "enum": ["left", "middle", "right"], "type": "string" }, "titleBackground": { "type": "string" }, "titleColor": { "type": "string" }, "titleFontSize": { "type": "number" } }, "type": "object" } };
@@ -655,10 +655,12 @@ function BrushTrack(HGC, ...args) {
         const [x, y] = this.position;
         const [w, h] = this.dimensions;
         const endEvent = event.sourceEvent;
-        const startX = this.startEvent.layerX - x;
-        const startY = this.startEvent.layerY - y;
-        const endX = endEvent.layerX - x;
-        const endY = endEvent.layerY - y;
+        const svg = this.gMain.node().ownerSVGElement || this.gMain.node().closest("svg");
+        const svgRect = svg.getBoundingClientRect();
+        const startX = this.startEvent.clientX - svgRect.left - x;
+        const startY = this.startEvent.clientY - svgRect.top - y;
+        const endX = endEvent.clientX - svgRect.left - x;
+        const endY = endEvent.clientY - svgRect.top - y;
         const radDiff = (
           // radian of the start position
           Math.atan2(startX - w / 2, startY - h / 2) - // radian of the current position