@deck.gl-community/infovis-layers 9.1.0-beta.8 → 9.2.0-beta.2

package/dist/index.cjs

@@ -1 +1,816 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// dist/index.js
+var dist_exports = {};
+__export(dist_exports, {
+  HEADER_VIEW_HEIGHT: () => HEADER_VIEW_HEIGHT,
+  HorizonGraphLayer: () => HorizonGraphLayer,
+  LEGEND_VIEW_WIDTH: () => LEGEND_VIEW_WIDTH,
+  MultiHorizonGraphLayer: () => MultiHorizonGraphLayer,
+  SYNCHRONIZED_VIEWS: () => SYNCHRONIZED_VIEWS,
+  SYNCHRONIZED_VIEW_STATE_CONSTRAINTS: () => SYNCHRONIZED_VIEW_STATE_CONSTRAINTS,
+  TimeAxisLayer: () => TimeAxisLayer,
+  TimeDeltaLayer: () => TimeDeltaLayer,
+  VerticalGridLayer: () => VerticalGridLayer,
+  fitBoundsOrthographic: () => fitBoundsOrthographic,
+  fitSynchronizedViewStatesToBounds: () => fitSynchronizedViewStatesToBounds,
+  formatTimeMs: () => formatTimeMs,
+  formatTimeRangeMs: () => formatTimeRangeMs,
+  getSynchronizedViewStates: () => getSynchronizedViewStates,
+  makeLayerFilter: () => makeLayerFilter,
+  mergeViewStates: () => mergeViewStates,
+  validateViewState: () => validateViewState
+});
+module.exports = __toCommonJS(dist_exports);
+
+// dist/layers/time-axis-layer.js
+var import_core = require("@deck.gl/core");
+var import_layers = require("@deck.gl/layers");
+
+// dist/utils/format-utils.js
+function formatTimeMs(timeMs, space = true) {
+  const sep = space ? " " : "";
+  const us = timeMs * 1e3;
+  if (us === 0) {
+    return "0s";
+  }
+  if (Math.abs(us) < 1e3) {
+    return `${floatToStr(us)}${sep}\xB5s`;
+  }
+  const ms = us / 1e3;
+  if (Math.abs(ms) < 1e3) {
+    return `${floatToStr(ms)}${sep} ms`;
+  }
+  const s = ms / 1e3;
+  if (Math.abs(s) < 60) {
+    return `${floatToStr(s)}${sep} s`;
+  }
+  const m = s / 60;
+  if (Math.abs(m) < 60) {
+    return `${floatToStr(m)}${sep} min`;
+  }
+  const h = m / 60;
+  if (Math.abs(h) < 24) {
+    return `${floatToStr(h)}${sep} hrs`;
+  }
+  const d = h / 24;
+  return `${floatToStr(d)}${sep} days`;
+}
+function formatTimeRangeMs(startMs, endMs) {
+  return `${formatTimeMs(startMs)} - ${formatTimeMs(endMs)}`;
+}
+function floatToStr(f, roundDigits = 5) {
+  if (Number.isInteger(f)) {
+    return f.toString();
+  }
+  for (let i = 1; i < roundDigits - 1; i++) {
+    const rounded = parseFloat(f.toPrecision(i));
+    if (rounded === f) {
+      return rounded.toPrecision(i);
+    }
+  }
+  return f.toPrecision(roundDigits);
+}
+
+// dist/utils/tick-utils.js
+function getZoomedRange(startTime, endTime, bounds) {
+  const [startTimeZoomed, , endTimeZoomed] = bounds;
+  return [Math.max(startTime, startTimeZoomed), Math.min(endTime, endTimeZoomed)];
+}
+function getPrettyTicks(startTime, endTime, tickCount = 5) {
+  const range = endTime - startTime;
+  const roughStep = range / (tickCount - 1);
+  const exponent = Math.floor(Math.log10(roughStep));
+  const base = Math.pow(10, exponent);
+  const multiples = [1, 2, 5, 10];
+  const niceStep = multiples.find((m) => base * m >= roughStep) * base;
+  const niceStart = Math.ceil(startTime / niceStep) * niceStep;
+  const niceEnd = Math.floor(endTime / niceStep) * niceStep;
+  const ticks = [];
+  for (let t = niceStart; t <= niceEnd; t += niceStep) {
+    ticks.push(t);
+  }
+  return ticks;
+}
+
+// dist/layers/time-axis-layer.js
+var TimeAxisLayer = class extends import_core.CompositeLayer {
+  // Called whenever props/data/viewports change
+  shouldUpdateState(params) {
+    return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
+  }
+  renderLayers() {
+    const { startTimeMs, endTimeMs, tickCount = 10, y = 0, color = [0, 0, 0, 255] } = this.props;
+    let bounds;
+    try {
+      bounds = this.context.viewport.getBounds();
+    } catch (error) {
+      console.log("Error getting bounds from viewport:", error);
+      throw error;
+    }
+    const [startTimeZoomed, endTimeZoomed] = getZoomedRange(startTimeMs, endTimeMs, bounds);
+    const ticks = getPrettyTicks(startTimeZoomed, endTimeZoomed, tickCount);
+    const tickLines = ticks.map((x) => ({
+      sourcePosition: [x, y - 5],
+      targetPosition: [x, y + 5]
+    }));
+    const tickLabels = ticks.map((x) => ({
+      position: [x, y - 10],
+      text: this.props.unit === "timestamp" ? new Date(x).toLocaleTimeString() : formatTimeMs(x, false)
+    }));
+    return [
+      // Axis line
+      new import_layers.LineLayer({
+        id: "axis-line",
+        data: [{ sourcePosition: [startTimeZoomed, y], targetPosition: [endTimeZoomed, y] }],
+        getSourcePosition: (d) => d.sourcePosition,
+        getTargetPosition: (d) => d.targetPosition,
+        getColor: color,
+        getWidth: 2
+      }),
+      // Tick marks
+      new import_layers.LineLayer({
+        id: "tick-marks",
+        data: tickLines,
+        getSourcePosition: (d) => d.sourcePosition,
+        getTargetPosition: (d) => d.targetPosition,
+        getColor: color,
+        getWidth: 1
+      }),
+      // Tick labels
+      new import_layers.TextLayer({
+        id: "tick-labels",
+        data: tickLabels,
+        getPosition: (d) => d.position,
+        getText: (d) => d.text,
+        getSize: 12,
+        getColor: color,
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "top"
+      })
+    ];
+  }
+};
+__publicField(TimeAxisLayer, "layerName", "TimeAxisLayer");
+__publicField(TimeAxisLayer, "defaultProps", {
+  startTimeMs: 0,
+  endTimeMs: 100,
+  tickCount: 5,
+  y: 0,
+  color: [0, 0, 0, 255],
+  unit: "timestamp",
+  bounds: void 0
+});
+
+// dist/layers/vertical-grid-layer.js
+var import_core2 = require("@deck.gl/core");
+var import_layers2 = require("@deck.gl/layers");
+var VerticalGridLayer = class extends import_core2.CompositeLayer {
+  shouldUpdateState(params) {
+    return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
+  }
+  renderLayers() {
+    const { xMin, xMax, tickCount = 5, yMin, yMax, color } = this.props;
+    const viewport = this.context.viewport;
+    const bounds = viewport.getBounds();
+    const [startTimeZoomed, endTimeZoomed] = getZoomedRange(xMin, xMax, bounds);
+    const tickPositions = getPrettyTicks(startTimeZoomed, endTimeZoomed, tickCount);
+    const gridLines = tickPositions.map((x) => ({
+      sourcePosition: [x, yMin],
+      targetPosition: [x, yMax]
+    }));
+    return new import_layers2.LineLayer({
+      id: `${this.props.id}-lines`,
+      data: gridLines,
+      getSourcePosition: (d) => d.sourcePosition,
+      getTargetPosition: (d) => d.targetPosition,
+      getColor: color,
+      getWidth: 1
+    });
+  }
+};
+__publicField(VerticalGridLayer, "layerName", "VerticalGridLayer");
+__publicField(VerticalGridLayer, "defaultProps", {
+  yMin: -1e6,
+  yMax: 1e6,
+  tickCount: 5,
+  width: 1,
+  color: [200, 200, 200, 255]
+});
+
+// dist/layers/time-delta-layer.js
+var import_core3 = require("@deck.gl/core");
+var import_layers3 = require("@deck.gl/layers");
+var TimeDeltaLayer = class extends import_core3.CompositeLayer {
+  renderLayers() {
+    const { startTimeMs, endTimeMs, color = [0, 0, 0, 255], yMin, yMax } = this.props;
+    const timeDeltaPosition = [(startTimeMs + endTimeMs) / 2, 10];
+    const timeDeltaMs = Math.abs(endTimeMs - startTimeMs);
+    const timeDeltaLabel = formatTimeMs(timeDeltaMs, false);
+    if (!this.props.header) {
+      const timeLines2 = [
+        {
+          sourcePosition: [startTimeMs, yMin],
+          targetPosition: [startTimeMs, yMax]
+        },
+        {
+          sourcePosition: [endTimeMs, yMin],
+          targetPosition: [endTimeMs, yMax]
+        }
+      ];
+      return [
+        // Interval end lines
+        new import_layers3.LineLayer({
+          id: "time-delta-side-bars",
+          data: timeLines2,
+          getSourcePosition: (d) => d.sourcePosition,
+          getTargetPosition: (d) => d.targetPosition,
+          getColor: color,
+          getWidth: 4,
+          widthUnits: "pixels"
+        })
+      ];
+    }
+    const HEADER_Y = 12;
+    const timeLines = [
+      {
+        sourcePosition: [startTimeMs, -100],
+        targetPosition: [startTimeMs, HEADER_Y]
+      },
+      {
+        sourcePosition: [endTimeMs, -100],
+        targetPosition: [endTimeMs, HEADER_Y]
+      }
+    ];
+    return [
+      // Interval end lines
+      new import_layers3.LineLayer({
+        id: "header-time-delta-side-bars",
+        data: timeLines,
+        getSourcePosition: (d) => d.sourcePosition,
+        getTargetPosition: (d) => d.targetPosition,
+        getColor: color,
+        getWidth: 4,
+        widthUnits: "pixels"
+      }),
+      // Interval center
+      new import_layers3.LineLayer({
+        id: "header-time-delta-dotted-line",
+        data: [
+          {
+            sourcePosition: [startTimeMs, HEADER_Y - 7],
+            targetPosition: [endTimeMs, HEADER_Y - 7]
+          }
+        ],
+        getSourcePosition: (d) => d.sourcePosition,
+        getTargetPosition: (d) => d.targetPosition,
+        getColor: color,
+        getWidth: 1,
+        widthUnits: "pixels"
+      }),
+      // Label
+      new import_layers3.TextLayer({
+        id: "header-time-delta-label",
+        data: [{ position: timeDeltaPosition, text: timeDeltaLabel }],
+        getPosition: (d) => d.position,
+        getText: (d) => d.text,
+        getSize: 12,
+        getColor: color,
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "top",
+        background: true,
+        getBackgroundColor: [255, 255, 255, 255],
+        // Solid green background
+        backgroundPadding: [4, 2]
+        // Horizontal and vertical padding
+      })
+    ];
+  }
+};
+__publicField(TimeDeltaLayer, "layerName", "TimeDeltaLayer");
+__publicField(TimeDeltaLayer, "defaultProps", {
+  header: false,
+  minTimeMs: 0,
+  maxTimeMs: 100,
+  startTimeMs: 0,
+  endTimeMs: 100,
+  y: 0,
+  color: [0, 0, 0, 255],
+  unit: "timestamp",
+  yMin: -1e6,
+  // Should cover full viewport height in most cases
+  yMax: 1e6
+  // Should cover full viewport height in most cases
+});
+
+// dist/layers/horizon-graph-layer/horizon-graph-layer.js
+var import_core4 = require("@deck.gl/core");
+var import_engine = require("@luma.gl/engine");
+
+// dist/layers/horizon-graph-layer/horizon-graph-layer.vs.js
+var horizon_graph_layer_vs_default = `#version 300 es
+#define SHADER_NAME horizon-graph-layer-vertex-shader
+
+in vec3 positions;
+in vec2 uv;
+
+out vec2 v_uv;
+
+void main(void) {
+  geometry.worldPosition = positions;
+  
+  vec4 position_commonspace = project_position(vec4(positions.xy, 0.0, 1.0));
+  gl_Position = project_common_position_to_clipspace(position_commonspace);
+  geometry.position = position_commonspace;
+  
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+  
+  v_uv = uv;
+}
+`;
+
+// dist/layers/horizon-graph-layer/horizon-graph-layer.fs.js
+var horizon_graph_layer_fs_default = `#version 300 es
+#define SHADER_NAME horizon-graph-layer-fragment-shader
+
+precision highp float;
+precision highp int;
+
+/******* UNIFORM *******/
+
+uniform sampler2D dataTexture;
+
+/******* IN *******/
+
+in vec2 v_uv;
+
+/******* OUT *******/
+
+out vec4 fragColor;
+
+
+/******* MAIN *******/
+
+void main(void) {
+  // horizontal position to sample index
+  float idx = v_uv.x * horizonLayer.dataTextureCount;
+  // idx = clamp(idx, 0.0, horizonLayer.dataTextureCount - 1.0); // NEEDED???
+
+  // fetch single data point & normalize (-1,+1)
+  float fy = floor(idx * horizonLayer.dataTextureSizeInv);
+  float fx = idx - fy * horizonLayer.dataTextureSize;
+  float val = texelFetch(dataTexture, ivec2(int(fx), int(fy)), 0).r;
+  val *= horizonLayer.yAxisScaleInv;
+
+  // band layering
+  float fband    = abs(val) * horizonLayer.bands;
+  float bandIdx  = clamp(floor(fband), 0.0, horizonLayer.bands - 1.0);
+  float bandFrac = fract(fband);
+
+  // calc our position value and find out color (using mix+step instead of if...else)
+  float positive = step(0.0, val);  // 1 if pos, else 0
+  vec3  baseCol  = mix(horizonLayer.negativeColor, horizonLayer.positiveColor, positive);
+  float curPos   = mix(v_uv.y, 1.0 - v_uv.y, positive);
+  float addOne   = step(curPos, bandFrac);
+
+  float band = bandIdx + addOne;
+  float whiten = 1.0 - band * horizonLayer.bandsInv;
+
+  fragColor = vec4(mix(baseCol, vec3(1.0), whiten), 1.0);
+}
+`;
+
+// dist/layers/horizon-graph-layer/horizon-graph-layer-uniforms.js
+var uniformBlock = `layout(std140) uniform horizonLayerUniforms {
+  float dataTextureSize;  // width = height of the POT texture
+  float dataTextureSizeInv;
+  float dataTextureCount; // actual number of data points
+
+  float bands;
+  float bandsInv;
+  float yAxisScaleInv;
+
+  vec3      positiveColor;
+  vec3      negativeColor;
+} horizonLayer;
+`;
+var horizonLayerUniforms = {
+  name: "horizonLayer",
+  vs: uniformBlock,
+  fs: uniformBlock,
+  uniformTypes: {
+    dataTextureSize: "f32",
+    dataTextureSizeInv: "f32",
+    dataTextureCount: "f32",
+    bands: "f32",
+    bandsInv: "f32",
+    yAxisScaleInv: "f32",
+    positiveColor: "vec3<f32>",
+    negativeColor: "vec3<f32>"
+  }
+};
+
+// dist/layers/horizon-graph-layer/horizon-graph-layer.js
+var defaultProps = {
+  yAxisScale: { type: "number", value: 1e3 },
+  bands: { type: "number", value: 2 },
+  positiveColor: { type: "color", value: [0, 128, 0] },
+  negativeColor: { type: "color", value: [0, 0, 255] },
+  x: { type: "number", value: 0 },
+  y: { type: "number", value: 0 },
+  width: { type: "number", value: 800 },
+  height: { type: "number", value: 300 }
+};
+var HorizonGraphLayer = class extends import_core4.Layer {
+  state = {};
+  initializeState() {
+    this.state = {};
+  }
+  getShaders() {
+    return super.getShaders({
+      vs: horizon_graph_layer_vs_default,
+      fs: horizon_graph_layer_fs_default,
+      modules: [import_core4.project32, horizonLayerUniforms]
+    });
+  }
+  _createDataTexture(seriesData) {
+    const _data = seriesData instanceof Float32Array ? seriesData : new Float32Array(seriesData);
+    const { device } = this.context;
+    const count = _data.length;
+    let dataTextureSize = 32;
+    while (count > dataTextureSize * dataTextureSize) {
+      dataTextureSize *= 2;
+    }
+    const data = new Float32Array(dataTextureSize * dataTextureSize);
+    data.set(_data, 0);
+    return {
+      dataTexture: device.createTexture({
+        data,
+        format: "r32float",
+        dimension: "2d",
+        width: dataTextureSize,
+        height: dataTextureSize,
+        sampler: {
+          minFilter: "nearest",
+          magFilter: "nearest",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge"
+        }
+      }),
+      dataTextureSize,
+      dataTextureCount: count
+    };
+  }
+  _createModel() {
+    const { x, y, width, height } = this.props;
+    const positions = [
+      x,
+      y,
+      0,
+      x + width,
+      y,
+      0,
+      x,
+      y + height,
+      0,
+      x + width,
+      y + height,
+      0
+    ];
+    const uv = [0, 0, 1, 0, 0, 1, 1, 1];
+    const geometry = new import_engine.Geometry({
+      topology: "triangle-strip",
+      attributes: {
+        positions: { value: new Float32Array(positions), size: 3 },
+        uv: { value: new Float32Array(uv), size: 2 }
+      }
+    });
+    return new import_engine.Model(this.context.device, {
+      ...this.getShaders(),
+      geometry,
+      bufferLayout: this.getAttributeManager().getBufferLayouts()
+    });
+  }
+  updateState(params) {
+    var _a, _b;
+    super.updateState(params);
+    const { changeFlags } = params;
+    if (changeFlags.dataChanged) {
+      (_a = this.state.dataTexture) == null ? void 0 : _a.destroy();
+      this.setState(this._createDataTexture(this.props.data));
+    }
+    if (changeFlags.extensionsChanged || changeFlags.propsChanged) {
+      (_b = this.state.model) == null ? void 0 : _b.destroy();
+      this.setState({ model: this._createModel() });
+    }
+  }
+  draw() {
+    const { model, dataTexture } = this.state;
+    if (!model) {
+      this.setState({ model: this._createModel() });
+      return;
+    }
+    if (!dataTexture) {
+      this.setState(this._createDataTexture(this.props.data));
+      return;
+    }
+    const { bands, yAxisScale, positiveColor, negativeColor } = this.props;
+    model.shaderInputs.setProps({
+      horizonLayer: {
+        dataTexture: this.state.dataTexture,
+        dataTextureSize: this.state.dataTextureSize,
+        dataTextureSizeInv: 1 / this.state.dataTextureSize,
+        dataTextureCount: this.state.dataTextureCount,
+        bands,
+        bandsInv: 1 / bands,
+        yAxisScaleInv: 1 / yAxisScale,
+        positiveColor: positiveColor.map((c) => c / 255),
+        negativeColor: negativeColor.map((c) => c / 255)
+      }
+    });
+    model.draw(this.context.renderPass);
+  }
+  finalizeState(context) {
+    var _a, _b;
+    (_a = this.state.model) == null ? void 0 : _a.destroy();
+    (_b = this.state.dataTexture) == null ? void 0 : _b.destroy();
+    super.finalizeState(context);
+  }
+};
+__publicField(HorizonGraphLayer, "layerName", "HorizonGraphLayer");
+__publicField(HorizonGraphLayer, "defaultProps", defaultProps);
+
+// dist/layers/horizon-graph-layer/multi-horizon-graph-layer.js
+var import_core5 = require("@deck.gl/core");
+var import_layers4 = require("@deck.gl/layers");
+var defaultProps2 = {
+  getSeries: { type: "accessor", value: (series) => series.values },
+  getScale: { type: "accessor", value: (series) => series.scale },
+  bands: { type: "number", value: 2 },
+  positiveColor: { type: "color", value: [0, 128, 0] },
+  negativeColor: { type: "color", value: [0, 0, 255] },
+  dividerColor: { type: "color", value: [0, 0, 0] },
+  dividerWidth: { type: "number", value: 2 },
+  x: { type: "number", value: 0 },
+  y: { type: "number", value: 0 },
+  width: { type: "number", value: 800 },
+  height: { type: "number", value: 300 }
+};
+var MultiHorizonGraphLayer = class extends import_core5.CompositeLayer {
+  renderLayers() {
+    const { data, getSeries, getScale, bands, positiveColor, negativeColor, dividerColor, dividerWidth, x, y, width, height } = this.props;
+    const seriesCount = data.length;
+    if (!seriesCount) {
+      return [];
+    }
+    const totalDividerSpace = dividerWidth * (seriesCount + 1);
+    const availableHeight = height - totalDividerSpace;
+    const seriesHeight = availableHeight / seriesCount;
+    const layers = [];
+    if (dividerWidth > 0) {
+      const dividerData = [];
+      dividerData.push({
+        polygon: [
+          [x, y],
+          [x + width, y],
+          [x + width, y + dividerWidth],
+          [x, y + dividerWidth]
+        ]
+      });
+      for (let i = 0; i < seriesCount - 1; i++) {
+        const dividerY = y + dividerWidth + (i + 1) * seriesHeight + i * dividerWidth;
+        dividerData.push({
+          polygon: [
+            [x, dividerY],
+            [x + width, dividerY],
+            [x + width, dividerY + dividerWidth],
+            [x, dividerY + dividerWidth]
+          ]
+        });
+      }
+      const bottomDividerY = y + height - dividerWidth;
+      dividerData.push({
+        polygon: [
+          [x, bottomDividerY],
+          [x + width, bottomDividerY],
+          [x + width, y + height],
+          [x, y + height]
+        ]
+      });
+      layers.push(new import_layers4.SolidPolygonLayer({
+        id: `${this.props.id}-dividers`,
+        data: dividerData,
+        getPolygon: (d) => d.polygon,
+        getFillColor: dividerColor,
+        pickable: false
+      }));
+    }
+    data.forEach((series, index) => {
+      const seriesData = getSeries(series);
+      if (!seriesData || seriesData.length === 0) {
+        return;
+      }
+      const seriesY = y + dividerWidth + index * (seriesHeight + dividerWidth);
+      const yAxisScale = getScale(series);
+      layers.push(new HorizonGraphLayer({
+        id: `${this.props.id}-series-${index}`,
+        data: seriesData,
+        yAxisScale,
+        bands,
+        positiveColor,
+        negativeColor,
+        x,
+        y: seriesY,
+        width,
+        height: seriesHeight
+      }));
+    });
+    return layers;
+  }
+};
+__publicField(MultiHorizonGraphLayer, "layerName", "MultiHorizonGraphLayer");
+__publicField(MultiHorizonGraphLayer, "defaultProps", defaultProps2);
+
+// dist/views/orthographic-utils.js
+function fitBoundsOrthographic(width, height, bounds, zoomMode = "per-axis") {
+  const [[minX, minY], [maxX, maxY]] = bounds;
+  const centerX = (minX + maxX) / 2;
+  const centerY = (minY + maxY) / 2;
+  const boxW = maxX - minX;
+  const boxH = maxY - minY;
+  const scaleX = width / boxW;
+  const scaleY = height / boxH;
+  const scale = Math.min(scaleX, scaleY);
+  const zoom = Math.log2(scale);
+  const zoomX = Math.log2(scaleX);
+  const zoomY = Math.log2(scaleY);
+  if (Number.isNaN(zoom) || Number.isNaN(zoomX) || Number.isNaN(zoom)) {
+    console.warn("Invalid zoom values:", { zoom, zoomX, zoomY });
+  }
+  return {
+    target: [centerX, centerY],
+    zoom: zoomMode === "single" ? zoom : [zoomX, zoomY]
+  };
+}
+
+// dist/views/view-state-utils.js
+function mergeViewStates(viewState1, viewState2) {
+  var _a, _b, _c, _d;
+  const target1 = viewState1.target ?? [0, 0];
+  const zoom1 = viewState1.zoom ?? [1, 1];
+  const mergedViewState = {
+    ...viewState1,
+    ...viewState2,
+    target: [((_a = viewState2.target) == null ? void 0 : _a[0]) ?? target1[0], ((_b = viewState2.target) == null ? void 0 : _b[1]) ?? target1[1]],
+    zoom: [
+      // ts-expect-error view state typing is awfully optional
+      ((_c = viewState2.zoom) == null ? void 0 : _c[0]) ?? zoom1[0],
+      // ts-expect-error view state typing is awfully optional
+      ((_d = viewState2.zoom) == null ? void 0 : _d[1]) ?? zoom1[1]
+    ]
+  };
+  validateViewState(mergedViewState);
+  return mergedViewState;
+}
+function validateViewState(viewState) {
+  const isTargetValid = Array.isArray(viewState.target) && viewState.target[0] !== void 0 && !Number.isNaN(viewState.target[0]) && viewState.target[1] !== void 0 && !Number.isNaN(viewState.target[1]);
+  const isZoomValid = Array.isArray(viewState.zoom) && viewState.zoom[0] !== void 0 && !Number.isNaN(viewState.zoom[0]) && viewState.zoom[1] !== void 0 && !Number.isNaN(viewState.zoom[1]);
+  if (!isTargetValid || !isZoomValid) {
+    console.warn("Invalid viewState:", viewState);
+  }
+  return isTargetValid && isZoomValid;
+}
+
+// dist/views/layer-filter.js
+function makeLayerFilter(filters) {
+  const regexpFilters = {};
+  for (const [key, value] of Object.entries(filters)) {
+    if ("include" in value) {
+      regexpFilters[key] = {
+        include: value.include.map((v) => new RegExp(v))
+      };
+    } else {
+      regexpFilters[key] = {
+        exclude: value.exclude.map((v) => new RegExp(v))
+      };
+    }
+  }
+  return ({ viewport, layer }) => {
+    let visible = true;
+    const viewFilters = regexpFilters[viewport.id] || {};
+    if ("include" in viewFilters) {
+      if (!viewFilters.include.some((regexp) => regexp.test(layer.id))) {
+        visible = false;
+      }
+    }
+    if ("exclude" in viewFilters) {
+      if (viewFilters.exclude.some((regexp) => regexp.test(layer.id))) {
+        visible = false;
+      }
+    }
+    return visible;
+  };
+}
+
+// dist/synchronized-views/synchronized-views.js
+var import_core6 = require("@deck.gl/core");
+var HEADER_VIEW_HEIGHT = 50;
+var LEGEND_VIEW_WIDTH = 150;
+var SYNCHRONIZED_VIEWS = [
+  new import_core6.OrthographicView({
+    id: "main",
+    flipY: false,
+    clear: true,
+    // [1, 1, 1, 1],
+    x: LEGEND_VIEW_WIDTH,
+    width: `calc(100% - ${LEGEND_VIEW_WIDTH}px`,
+    y: HEADER_VIEW_HEIGHT,
+    height: `calc(100% - ${HEADER_VIEW_HEIGHT}px)`,
+    controller: {
+      type: import_core6.OrthographicController,
+      // @ts-expect-error Specific to OrthographicController
+      zoomAxis: "X",
+      inertia: false,
+      scrollZoom: true
+    }
+  }),
+  new import_core6.OrthographicView({
+    id: "header",
+    flipY: false,
+    clear: true,
+    // [1, 1, 1, 1],
+    x: LEGEND_VIEW_WIDTH,
+    width: `calc(100% - ${LEGEND_VIEW_WIDTH}px)`,
+    height: 50,
+    controller: false
+  }),
+  new import_core6.OrthographicView({
+    id: "legend",
+    flipY: false,
+    clear: true,
+    // [1, 1, 1, 1],
+    x: 0,
+    width: LEGEND_VIEW_WIDTH,
+    y: HEADER_VIEW_HEIGHT,
+    height: `calc(100% - ${HEADER_VIEW_HEIGHT}px)`,
+    controller: false
+  })
+];
+var SYNCHRONIZED_VIEW_STATE_CONSTRAINTS = {
+  header: { target: [void 0, 20], zoom: [void 0, 0] },
+  legend: { target: [-30, void 0], zoom: [1, void 0] }
+};
+function getSynchronizedViewStates(viewState) {
+  return {
+    header: mergeViewStates(viewState, SYNCHRONIZED_VIEW_STATE_CONSTRAINTS.header),
+    legend: mergeViewStates(viewState, SYNCHRONIZED_VIEW_STATE_CONSTRAINTS.legend),
+    main: viewState
+  };
+}
+function fitSynchronizedViewStatesToBounds(props) {
+  const { viewState, initialize } = props;
+  const { headerHeight = HEADER_VIEW_HEIGHT, legendWidth = LEGEND_VIEW_WIDTH } = props;
+  const width = Math.max(props.width - legendWidth, 1);
+  const height = Math.max(props.height - headerHeight, 1);
+  const { target, zoom } = fitBoundsOrthographic(width, height, props.bounds, "per-axis");
+  target[1] = target[1] - 1.5;
+  let mainViewState;
+  if (initialize) {
+    mainViewState = { ...viewState.main, target, zoom };
+  } else {
+    mainViewState = {
+      ...viewState.main,
+      target: [viewState.main.target[0], target[1]],
+      zoom: [viewState.main.zoom[0], zoom[1]]
+    };
+  }
+  const newViewState = {
+    ...viewState,
+    main: mainViewState,
+    header: mergeViewStates(mainViewState, SYNCHRONIZED_VIEW_STATE_CONSTRAINTS.header),
+    legend: mergeViewStates(mainViewState, SYNCHRONIZED_VIEW_STATE_CONSTRAINTS.legend)
+  };
+  return newViewState;
+}
 //# sourceMappingURL=index.cjs.map