gosling.js 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/demo/gosling-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gosling-component.d.ts","sourceRoot":"","sources":["../../demo/gosling-component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAW,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAI1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG;IAAE,GAAG,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE,CAAC;AAIjE,UAAU,qBAAqB;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,GAAG,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAoD5D;AACD;;GAEG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,WAAW,EACf,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,iBAAiB,CAAC,EAAE,iBAAiB;;;;;;;;EAiDxC"}
+{"version":3,"file":"gosling-component.d.ts","sourceRoot":"","sources":["../../demo/gosling-component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAW,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAI1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG;IAAE,GAAG,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE,CAAC;AAIjE,UAAU,qBAAqB;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,GAAG,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAuD5D;AACD;;GAEG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,WAAW,EACf,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,iBAAiB,CAAC,EAAE,iBAAiB;;;;;;;;EAiDxC"}

package/dist/demo/renderer/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../demo/renderer/main.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,mBAAmB,CAAC;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAK9D;;;;GAIG;AACH,wBAAgB,eAAe,CAC3B,SAAS,EAAE,SAAS,EAAE,EACtB,eAAe,EAAE,cAAc,EAAE,EACjC,WAAW,EAAE,WAAW,EACxB,iBAAiB,CAAC,EAAE,iBAAiB,2BAiHxC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../demo/renderer/main.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,mBAAmB,CAAC;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAK9D;;;;GAIG;AACH,wBAAgB,eAAe,CAC3B,SAAS,EAAE,SAAS,EAAE,EACtB,eAAe,EAAE,cAAc,EAAE,EACjC,WAAW,EAAE,WAAW,EACxB,iBAAiB,CAAC,EAAE,iBAAiB,2BA0HxC"}

package/dist/gosling.js

@@ -55,7 +55,7 @@ import { createNanoEvents } from "nanoevents";
 import PubSub$1 from "pubsub-js";
 import { zoom, ZoomTransform } from "d3-zoom";
 const name = "gosling.js";
-const version = "2.0.0-alpha.1";
+const version = "2.0.0-alpha.2";
 const $ref$1 = "#/definitions/GoslingSpec";
 const $schema$1 = "http://json-schema.org/draft-07/schema#";
 const definitions$1 = {
@@ -11766,7 +11766,7 @@ function compile(spec, templates, theme, containerStatus) {
   return compileResult;
 }
 class PixiManager {
-  constructor(width, height, container, fps, options) {
+  constructor(width, height, container, fps, options = {}) {
     __publicField(this, "app");
     /** Contains the canvas and the overlayContainer */
     __publicField(this, "rootDiv");
@@ -11774,6 +11774,7 @@ class PixiManager {
     __publicField(this, "overlayContainer");
     /** Mapping between the position and the overlay div */
     __publicField(this, "createdContainers", /* @__PURE__ */ new Map());
+    var _a, _b;
     this.app = new PIXI.Application({
       width,
       height,
@@ -11784,7 +11785,8 @@ class PixiManager {
       autoDensity: true,
       // When resolution is set, this should be true so things are scaled correctly
       view: document.createElement("canvas"),
-      backgroundColor: 16777215,
+      backgroundColor: (_a = options.background) != null ? _a : 16777215,
+      backgroundAlpha: options.background === "transparent" ? 0 : 1,
       eventMode: "static",
       eventFeatures: {
         move: true,
@@ -11796,7 +11798,7 @@ class PixiManager {
     const wrapper = document.createElement("div");
     const padding = options.padding || 50;
     wrapper.style.padding = `${padding}px`;
-    wrapper.style.backgroundColor = "white";
+    wrapper.style.backgroundColor = options.background === "transparent" ? "#ffffff00" : (_b = options.background) != null ? _b : "#ffffff";
     container.appendChild(wrapper);
     const rootDiv = document.createElement("div");
     rootDiv.style.position = "relative";
@@ -29316,8 +29318,7 @@ isTooStretched_fn = function(stretchFactor) {
  */
 __privateAdd(_GoslingTrackClass, _tilesToId);
 let GoslingTrackClass = _GoslingTrackClass;
-function zoomWheelBehavior(event) {
-  const defaultMultiplier = 1;
+function zoomWheelBehavior(event, defaultMultiplier = 1) {
   return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 2e-3) * (event.ctrlKey ? 10 : defaultMultiplier);
 }
 class GoslingTrack extends GoslingTrackClass {
@@ -29468,14 +29469,17 @@ function cursor(plot, cursorPos) {
     const newScale = baseScale.domain(plot.xDomain.value);
     const genomicPos = newScale.invert(event.offsetX);
     cursorPos.value = genomicPos;
+    cursor2.visible = true;
   };
   plot.domOverlay.addEventListener("mousemove", moveCursor);
   plot.domOverlay.addEventListener("mouseleave", () => {
-    cursorPos.value = -10;
+    cursorPos.value = Number.NEGATIVE_INFINITY;
+    cursor2.visible = false;
   });
   effect(() => {
     const newScale = baseScale.domain(plot.xDomain.value);
     cursor2.position.x = newScale(cursorPos.value);
+    cursor2.visible = true;
   });
 }
 function cursor2D(plot, cursorPosX, cursorPosY) {
@@ -29608,6 +29612,116 @@ function panZoomHeatmap(plot, xDomain, yDomain) {
     }
   });
 }
+function cursorCircular(plot, cursorPos) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const xDomain = plot.xDomain.value;
+  const cx = plot.domOverlay.clientWidth / 2;
+  const cy = plot.domOverlay.clientHeight / 2;
+  const innerRadius = (_c = (_b = (_a = plot.options) == null ? void 0 : _a.spec) == null ? void 0 : _b.innerRadius) != null ? _c : 40;
+  const isAxis = IsXAxis(plot.options.spec);
+  const outerRadius = ((_f = (_e = (_d = plot.options) == null ? void 0 : _d.spec) == null ? void 0 : _e.outerRadius) != null ? _f : Math.min(cx, cy)) - (isAxis ? DEFAULT_AXIS_SIZE : 0);
+  const startAngle = (_i = (_h = (_g = plot.options) == null ? void 0 : _g.spec) == null ? void 0 : _h.startAngle) != null ? _i : 0;
+  const endAngle = (_l = (_k = (_j = plot.options) == null ? void 0 : _j.spec) == null ? void 0 : _k.endAngle) != null ? _l : 360;
+  const baseScaleAngle = scaleLinear().domain(xDomain).range([0, 2 * Math.PI]);
+  const cursor2 = new PIXI.Graphics();
+  plot.pMasked.addChild(cursor2);
+  const moveCursor = (event) => {
+    const degree = pointsToDegree(event.offsetX, event.offsetY, cx, cy);
+    const angleRange = endAngle - startAngle;
+    const normalizedDegree = (degree - startAngle + 360) % 360 / angleRange;
+    const newScaleAngle = baseScaleAngle.domain(plot.xDomain.value);
+    const genomicPos = newScaleAngle.invert(normalizedDegree * 2 * Math.PI);
+    cursorPos.value = genomicPos;
+    const radian = valueToRadian(
+      genomicPos - plot.xDomain.value[0],
+      plot.xDomain.value[1] - plot.xDomain.value[0],
+      startAngle,
+      endAngle
+    );
+    cursor2.clear();
+    cursor2.lineStyle(1, "black", 1);
+    cursor2.moveTo(cx + Math.cos(radian) * innerRadius, cy + Math.sin(radian) * innerRadius);
+    cursor2.lineTo(cx + Math.cos(radian) * outerRadius, cy + Math.sin(radian) * outerRadius);
+  };
+  plot.domOverlay.addEventListener("mousemove", moveCursor);
+  plot.domOverlay.addEventListener("mouseleave", () => {
+    cursorPos.value = Number.NEGATIVE_INFINITY;
+    cursor2.clear();
+  });
+  effect(() => {
+    if (plot.xDomain.value[0] < cursorPos.value && cursorPos.value < plot.xDomain.value[1]) {
+      const radian = valueToRadian(
+        cursorPos.value - plot.xDomain.value[0],
+        plot.xDomain.value[1] - plot.xDomain.value[0],
+        startAngle,
+        endAngle
+      );
+      cursor2.clear();
+      cursor2.lineStyle(1, "black", 1);
+      cursor2.moveTo(cx + Math.cos(radian) * innerRadius, cy + Math.sin(radian) * innerRadius);
+      cursor2.lineTo(cx + Math.cos(radian) * outerRadius, cy + Math.sin(radian) * outerRadius);
+    } else {
+      cursor2.clear();
+    }
+  });
+}
+function panZoomCircular(plot, cursorPos, xDomain) {
+  var _a, _b, _c, _d, _e, _f;
+  plot.xDomain = xDomain;
+  const zoomStartScaleX = scaleLinear();
+  const centerX = plot.domOverlay.clientWidth / 2;
+  const centerY = plot.domOverlay.clientHeight / 2;
+  const startAngle = (_c = (_b = (_a = plot.options) == null ? void 0 : _a.spec) == null ? void 0 : _b.startAngle) != null ? _c : 0;
+  const endAngle = (_f = (_e = (_d = plot.options) == null ? void 0 : _d.spec) == null ? void 0 : _e.endAngle) != null ? _f : 360;
+  let panStartAngle = 0;
+  let zoomStartPos = 0;
+  let panStartDomain = [0, 0];
+  const zoomed = (event) => {
+    const { transform, sourceEvent } = event;
+    if (sourceEvent && sourceEvent.type === "wheel") {
+      const newXDomain = transform.rescaleX(zoomStartScaleX).domain();
+      const newDomain = newXDomain[1] - newXDomain[0];
+      const originalDomain = zoomStartScaleX.domain()[1] - zoomStartScaleX.domain()[0];
+      const mouseRelativePos = (zoomStartPos - zoomStartScaleX.domain()[0]) / originalDomain;
+      const adjustedStart = zoomStartPos - newDomain * mouseRelativePos;
+      const centeredDomain = [adjustedStart, adjustedStart + newDomain];
+      batch(() => {
+        xDomain.value = centeredDomain;
+      });
+    } else if (sourceEvent && (sourceEvent.type === "mousemove" || sourceEvent.type === "mousedown")) {
+      const mouseX = sourceEvent.offsetX || sourceEvent.layerX;
+      const mouseY = sourceEvent.offsetY || sourceEvent.layerY;
+      const currentAngleDegrees = pointsToDegree(mouseX, mouseY, centerX, centerY);
+      const angleDiff = currentAngleDegrees - panStartAngle;
+      const angleRange = endAngle - startAngle;
+      const domainRange = panStartDomain[1] - panStartDomain[0];
+      const domainDiff = angleDiff / angleRange * domainRange;
+      const newXDomain = [panStartDomain[0] - domainDiff, panStartDomain[1] - domainDiff];
+      batch(() => {
+        xDomain.value = newXDomain;
+      });
+    }
+  };
+  const zoomBehavior = zoom().wheelDelta(zoomWheelBehavior).filter((event) => {
+    const isRect = event.target.tagName === "rect";
+    const isMousedown = event.type === "mousedown";
+    const isDraggingBrush = isRect && isMousedown;
+    const isAltPressed = event.altKey;
+    const defaultFilter = (!event.ctrlKey || event.type === "wheel") && !event.button;
+    return defaultFilter && !isDraggingBrush && !isAltPressed;
+  }).on("end", () => plot.domOverlay.__zoom = new ZoomTransform(1, 0, 0)).on("start", (event) => {
+    zoomStartPos = cursorPos.value;
+    zoomStartScaleX.domain(xDomain.value).range([0, plot.width]);
+    const { sourceEvent } = event;
+    if (sourceEvent && sourceEvent.type === "mousedown") {
+      const mouseX = sourceEvent.offsetX || sourceEvent.layerX;
+      const mouseY = sourceEvent.offsetY || sourceEvent.layerY;
+      panStartAngle = pointsToDegree(mouseX, mouseY, centerX, centerY);
+      panStartDomain = [...xDomain.value];
+    }
+  }).on("zoom", zoomed);
+  select(plot.domOverlay).call(zoomBehavior);
+}
 function getDataFetcher(spec, urlToFetchOptions) {
   const { data, assembly = "hg38" } = spec;
   if (typeof data === "undefined") {
@@ -29665,8 +29779,8 @@ function getFields(spec) {
 }
 function renderTrackDefs(trackDefs, linkedEncodings, pixiManager, urlToFetchOptions) {
   const plotDict = {};
-  const cursorPosX = signal(0);
-  const cursorPosY = signal(0);
+  const cursorPosX = signal(Number.NEGATIVE_INFINITY);
+  const cursorPosY = signal(Number.NEGATIVE_INFINITY);
   trackDefs.forEach((trackDef) => {
     const { boundingBox, type, options, trackId } = trackDef;
     if (type === TrackType.Text) {
@@ -29693,10 +29807,18 @@ function renderTrackDefs(trackDefs, linkedEncodings, pixiManager, urlToFetchOpti
         gosOptions.spec.orientation
       );
       const isOverlayedOnPrevious = "overlayOnPreviousTrack" in spec && spec.overlayOnPreviousTrack;
-      if (!spec.static && !isOverlayedOnPrevious) {
-        gosPlot.addInteractor((plot) => panZoom(plot, xDomain, yDomain));
+      if (!spec.static && !(spec.layout === "linear" && isOverlayedOnPrevious)) {
+        if (spec.layout === "circular") {
+          gosPlot.addInteractor((plot) => panZoomCircular(plot, cursorPosX, xDomain));
+        } else {
+          gosPlot.addInteractor((plot) => panZoom(plot, xDomain, yDomain));
+        }
+      }
+      if (spec.layout === "circular") {
+        gosPlot.addInteractor((plot) => cursorCircular(plot, cursorPosX));
+      } else {
+        gosPlot.addInteractor((plot) => cursor(plot, cursorPosX));
       }
-      gosPlot.addInteractor((plot) => cursor(plot, cursorPosX));
       plotDict[trackId] = gosPlot;
     }
     if (type === TrackType.Heatmap) {
@@ -30259,7 +30381,10 @@ function GoslingComponent(props) {
     if (!pixiManager) {
       const canvasWidth = 1e3, canvasHeight = 1e3;
       const pixiManager2 = new PixiManager(canvasWidth, canvasHeight, plotElement, () => {
-      }, { padding });
+      }, {
+        padding,
+        background: getTheme(theme).root.background
+      });
       const compileResult = renderGosling(spec, plotElement, pixiManager2, theme, urlToFetchOptions);
       setCompiledResults(compileResult);
       setPixiManager(pixiManager2);