@deck.gl/widgets 9.3.7 → 9.4.0-alpha.2

package/dist/index.cjs

@@ -53,7 +53,8 @@ __export(dist_exports, {
   _SimpleMenu: () => SimpleMenu,
   _SplitterWidget: () => SplitterWidget,
   _StatsWidget: () => StatsWidget,
-  _TimelineWidget: () => TimelineWidget
+  _TimelineWidget: () => TimelineWidget,
+  buildViewsFromViewLayout: () => buildViewsFromViewLayout
 });
 module.exports = __toCommonJS(dist_exports);
 
@@ -170,12 +171,12 @@ var ZoomWidget = class extends import_core.Widget {
   }
   handleZoomIn() {
     for (const viewId of this.viewIds) {
-      this.handleZoom(viewId, 1);
+      this.handleZoom(viewId, this.props.zoomStep);
     }
   }
   handleZoomOut() {
     for (const viewId of this.viewIds) {
-      this.handleZoom(viewId, -1);
+      this.handleZoom(viewId, -this.props.zoomStep);
     }
   }
 };
@@ -185,6 +186,7 @@ ZoomWidget.defaultProps = {
   placement: "top-left",
   orientation: "vertical",
   transitionDuration: 200,
+  zoomStep: 1,
   zoomInLabel: "Zoom In",
   zoomOutLabel: "Zoom Out",
   zoomAxis: "all",
@@ -1002,17 +1004,506 @@ FullscreenWidget.defaultProps = {
 var import_jsx_runtime11 = require("preact/jsx-runtime");
 var import_preact8 = require("preact");
 var import_hooks3 = require("preact/hooks");
+var import_core10 = require("@deck.gl/core");
+
+// dist/view-layout/view-layout.js
 var import_core9 = require("@deck.gl/core");
-function parseViewLayout(root) {
+var VIEW_LAYOUT_TYPES = /* @__PURE__ */ new Set(["row", "column", "overlay", "spacer"]);
+var VIEW_LAYOUT_ORIENTATIONS = /* @__PURE__ */ new Set(["horizontal", "vertical"]);
+function isViewLayout(child) {
+  return Boolean(child && typeof child === "object" && !(child instanceof import_core9.View) && ("type" in child && VIEW_LAYOUT_TYPES.has(String(child.type)) || "orientation" in child && VIEW_LAYOUT_ORIENTATIONS.has(String(child.orientation))));
+}
+function getViewLayoutType(item) {
+  if ("orientation" in item) {
+    return item.orientation === "horizontal" ? "row" : "column";
+  }
+  return item.type;
+}
+function getViewLayoutChildren(item) {
+  return "views" in item ? item.views : item.children;
+}
+function assertViewLayout(item) {
+  if (!item || typeof item !== "object") {
+    throw new Error("ViewLayout must be an object.");
+  }
+  const type = getViewLayoutType(item);
+  switch (type) {
+    case "row":
+    case "column":
+    case "overlay": {
+      const children = getViewLayoutChildren(item);
+      if (!Array.isArray(children)) {
+        throw new Error("ViewLayout requires a children or views array.");
+      }
+      if (isSplitLayoutItem(item) && item.splitId) {
+        if (children.filter(Boolean).length < 2) {
+          throw new Error("ViewLayout with splitId requires at least two children.");
+        }
+      }
+      children.forEach(assertViewLayoutChild);
+      break;
+    }
+    case "spacer":
+      break;
+    default:
+      throw new Error(`Unsupported view layout item: ${String(type)}`);
+  }
+}
+function isSplitLayoutItem(item) {
+  const type = getViewLayoutType(item);
+  return type === "row" || type === "column";
+}
+function assertViewLayoutChild(child) {
+  if (!child) {
+    return;
+  }
+  if (isViewLayout(child)) {
+    assertViewLayout(child);
+    return;
+  }
+  if (child instanceof import_core9.View) {
+    return;
+  }
+  throw new Error("ViewLayout children must be deck.gl View instances or layout objects.");
+}
+
+// dist/view-layout/build-views-from-view-layout.js
+function buildViewsFromViewLayout(args) {
+  var _a;
+  assertViewLayout(args.layout);
+  const rootRect = {
+    x: 0,
+    y: 0,
+    width: Math.max(1, args.width),
+    height: Math.max(1, args.height)
+  };
+  const previousViewsById = new Map((((_a = args.previous) == null ? void 0 : _a.views) ?? []).map((view) => [getViewId(view), view]).filter((entry) => Boolean(entry[0])));
+  const outputViews = [];
+  const rectsById = {};
+  const splittersById = {};
+  compileLayoutItem({
+    item: args.layout,
+    rect: rootRect,
+    rootRect,
+    outputViews,
+    rectsById,
+    splittersById,
+    previousViewsById,
+    splitValues: args.splitValues ?? {},
+    viewPropsById: args.viewPropsById ?? {}
+  });
+  return {
+    views: outputViews,
+    rectsById,
+    splittersById
+  };
+}
+function compileLayoutItem(args) {
+  const { item } = args;
+  const type = getViewLayoutType(item);
+  switch (type) {
+    case "row":
+      compileStackLayout({
+        ...args,
+        item,
+        orientation: "row",
+        children: getViewLayoutChildren(item)
+      });
+      return;
+    case "column":
+      compileStackLayout({
+        ...args,
+        item,
+        orientation: "column",
+        children: getViewLayoutChildren(item)
+      });
+      return;
+    case "overlay":
+      compileOverlayLayout({
+        ...args,
+        item,
+        children: getViewLayoutChildren(item)
+      });
+      return;
+    case "spacer":
+      return;
+    default:
+      throw new Error(`Unsupported view layout item: ${String(type)}`);
+  }
+}
+function compileStackLayout(args) {
+  const containerRect = applyInsets(args.rect, args.item.inset);
+  const children = args.children.filter(isPresentChild);
+  if (children.length === 0) {
+    return;
+  }
+  const containerAxisLength = args.orientation === "row" ? containerRect.width : containerRect.height;
+  const stackAxisConfig = getStackAxisConfig({
+    children,
+    containerAxisLength,
+    item: args.item,
+    orientation: args.orientation,
+    splitValues: args.splitValues
+  });
+  let cursor = args.orientation === "row" ? containerRect.x : containerRect.y;
+  for (const splitConfig of stackAxisConfig.splitConfigs) {
+    args.splittersById[splitConfig.splitId] = {
+      id: splitConfig.splitId,
+      orientation: args.orientation === "row" ? "horizontal" : "vertical",
+      x: containerRect.x / args.rootRect.width * 100,
+      y: containerRect.y / args.rootRect.height * 100,
+      width: containerRect.width / args.rootRect.width * 100,
+      height: containerRect.height / args.rootRect.height * 100,
+      split: splitConfig.split,
+      minSplit: splitConfig.minSplit,
+      maxSplit: splitConfig.maxSplit
+    };
+  }
+  children.forEach((child, index) => {
+    const childAxisLength = stackAxisConfig.childAxisLengths[index];
+    const childRect = args.orientation === "row" ? {
+      x: cursor,
+      y: containerRect.y,
+      width: childAxisLength,
+      height: containerRect.height
+    } : {
+      x: containerRect.x,
+      y: cursor,
+      width: containerRect.width,
+      height: childAxisLength
+    };
+    cursor += childAxisLength;
+    compileLayoutChild({
+      child,
+      rect: childRect,
+      rootRect: args.rootRect,
+      outputViews: args.outputViews,
+      rectsById: args.rectsById,
+      splittersById: args.splittersById,
+      previousViewsById: args.previousViewsById,
+      splitValues: args.splitValues,
+      viewPropsById: args.viewPropsById
+    });
+  });
+}
+function compileOverlayLayout(args) {
+  const containerRect = applyInsets(args.rect, args.item.inset);
+  args.children.filter(isPresentChild).forEach((child) => compileLayoutChild({
+    child,
+    rect: containerRect,
+    rootRect: args.rootRect,
+    outputViews: args.outputViews,
+    rectsById: args.rectsById,
+    splittersById: args.splittersById,
+    previousViewsById: args.previousViewsById,
+    splitValues: args.splitValues,
+    viewPropsById: args.viewPropsById
+  }));
+}
+function compileLayoutChild(args) {
+  if (isViewLayout(args.child)) {
+    compileLayoutItem({
+      item: args.child,
+      rect: args.rect,
+      rootRect: args.rootRect,
+      outputViews: args.outputViews,
+      rectsById: args.rectsById,
+      splittersById: args.splittersById,
+      previousViewsById: args.previousViewsById,
+      splitValues: args.splitValues,
+      viewPropsById: args.viewPropsById
+    });
+    return;
+  }
+  compileResolvedView({
+    view: args.child,
+    rect: args.rect,
+    outputViews: args.outputViews,
+    rectsById: args.rectsById,
+    previousViewsById: args.previousViewsById,
+    viewPropsById: args.viewPropsById
+  });
+}
+function getStackAxisConfig(args) {
+  const constraints = args.children.map((child) => getStackChildAxisConstraints(child, args.orientation, args.containerAxisLength));
+  if (args.item.splitId) {
+    return getSplitStackAxisConfig({ ...args, constraints });
+  }
+  return {
+    childAxisLengths: getConstrainedStackChildAxisLengths(args.containerAxisLength, constraints),
+    splitConfigs: []
+  };
+}
+function getSplitStackAxisConfig(args) {
+  const axisLength = Math.max(args.containerAxisLength, 1);
+  const boundaries = getDefaultSplitBoundaries(args);
+  const splitConfigs = [];
+  for (let index = 0; index < boundaries.length; index++) {
+    const splitId = getSplitId(args.item.splitId, args.children.length, index);
+    const desiredSplit = args.splitValues[splitId] ?? (args.children.length === 2 ? args.item.initialSplit : void 0) ?? boundaries[index];
+    const { minSplit, maxSplit } = getSplitBoundaryLimits({
+      index,
+      boundaries,
+      constraints: args.constraints,
+      axisLength,
+      item: args.item
+    });
+    const split = Math.min(Math.max(desiredSplit, minSplit), maxSplit);
+    boundaries[index] = split;
+    splitConfigs.push({ splitId, split, minSplit, maxSplit });
+  }
+  return {
+    childAxisLengths: getStackAxisLengthsFromBoundaries(args.containerAxisLength, boundaries),
+    splitConfigs
+  };
+}
+function getDefaultSplitBoundaries(args) {
+  const childAxisLengths = getConstrainedStackChildAxisLengths(args.containerAxisLength, args.constraints);
+  const totalLength = childAxisLengths.reduce((sum, length) => sum + length, 0);
+  if (totalLength <= 0) {
+    return args.children.slice(1).map((_, index) => (index + 1) / args.children.length);
+  }
+  let cursor = 0;
+  return childAxisLengths.slice(0, -1).map((length) => {
+    cursor += length;
+    return cursor / totalLength;
+  });
+}
+function getSplitBoundaryLimits(args) {
+  const previousSplit = args.index === 0 ? 0 : args.boundaries[args.index - 1];
+  const nextSplit = args.index === args.boundaries.length - 1 ? 1 : args.boundaries[args.index + 1];
+  const leftConstraints = args.constraints[args.index];
+  const rightConstraints = args.constraints[args.index + 1];
+  const leftMaxSplit = Number.isFinite(leftConstraints.maxPixels) ? previousSplit + leftConstraints.maxPixels / args.axisLength : 1;
+  const rightMaxSplit = Number.isFinite(rightConstraints.maxPixels) ? nextSplit - rightConstraints.maxPixels / args.axisLength : 0;
+  const minSplit = Math.max(args.item.minSplit ?? 0.05, previousSplit + leftConstraints.minPixels / args.axisLength, rightMaxSplit);
+  const maxSplit = Math.max(minSplit, Math.min(args.item.maxSplit ?? 0.95, nextSplit - rightConstraints.minPixels / args.axisLength, leftMaxSplit));
+  return { minSplit, maxSplit };
+}
+function getSplitId(splitId, childCount, index) {
+  return childCount === 2 ? splitId : `${splitId}-${index}`;
+}
+function getStackAxisLengthsFromBoundaries(containerAxisLength, boundaries) {
+  let previousBoundary = 0;
+  const childAxisLengths = boundaries.map((boundary) => {
+    const length = containerAxisLength * (boundary - previousBoundary);
+    previousBoundary = boundary;
+    return length;
+  });
+  childAxisLengths.push(containerAxisLength * (1 - previousBoundary));
+  return childAxisLengths;
+}
+function getConstrainedStackChildAxisLengths(containerAxisLength, constraints) {
+  const { childAxisLengths, flexibleChildIndexes, fixedLength } = getInitialStackChildAxisLengths(constraints);
+  let remainingLength = Math.max(containerAxisLength - fixedLength, 0);
+  let unsettledIndexes = flexibleChildIndexes;
+  while (unsettledIndexes.length > 0) {
+    const sharedLength = remainingLength / unsettledIndexes.length;
+    const nextIndexes = [];
+    let didClamp = false;
+    for (const index of unsettledIndexes) {
+      const { minPixels, maxPixels } = constraints[index];
+      if (sharedLength < minPixels) {
+        childAxisLengths[index] = minPixels;
+        remainingLength -= minPixels;
+        didClamp = true;
+      } else if (sharedLength > maxPixels) {
+        childAxisLengths[index] = maxPixels;
+        remainingLength -= maxPixels;
+        didClamp = true;
+      } else {
+        nextIndexes.push(index);
+      }
+    }
+    if (!didClamp) {
+      for (const index of unsettledIndexes) {
+        childAxisLengths[index] = sharedLength;
+      }
+      break;
+    }
+    unsettledIndexes = nextIndexes;
+  }
+  return childAxisLengths.map((length) => length ?? 0);
+}
+function getInitialStackChildAxisLengths(constraints) {
+  const childAxisLengths = constraints.map(({ explicitLength }) => explicitLength);
+  const flexibleChildIndexes = [];
+  let fixedLength = 0;
+  childAxisLengths.forEach((length, index) => {
+    if (length === void 0) {
+      flexibleChildIndexes.push(index);
+    } else {
+      fixedLength += length;
+    }
+  });
+  return { childAxisLengths, flexibleChildIndexes, fixedLength };
+}
+function compileResolvedView(args) {
+  const viewId = getRequiredViewId(args.view);
+  const resolvedRect = resolveViewRectWithinParent(args.view, args.rect, args.viewPropsById[viewId]);
+  args.rectsById[viewId] = resolvedRect;
+  const nextProps = {
+    ...args.view.props,
+    x: resolvedRect.x,
+    y: resolvedRect.y,
+    width: resolvedRect.width,
+    height: resolvedRect.height
+  };
+  const previousView = args.previousViewsById.get(viewId);
+  const nextView = previousView && previousView.constructor === args.view.constructor && arePropsEqual(previousView.props, nextProps) ? previousView : instantiateView(args.view, nextProps);
+  args.outputViews.push(nextView);
+}
+function getStackChildAxisConstraints(child, orientation, parentAxisLength) {
+  const axisValue = getAxisLengthValue(child, orientation);
+  const minPixels = getPixelConstraintValue(child, "minPixels") ?? 0;
+  const maxPixels = getPixelConstraintValue(child, "maxPixels") ?? Number.POSITIVE_INFINITY;
+  if (axisValue === void 0) {
+    return { minPixels, maxPixels };
+  }
+  const explicitLength = Math.min(Math.max(resolveLength(axisValue, parentAxisLength), minPixels), maxPixels);
+  return { explicitLength, minPixels, maxPixels };
+}
+function resolveViewRectWithinParent(view, parentRect, overrides) {
+  const props = { ...view.props, ...overrides };
+  const x = parentRect.x + resolveOffset(props.x, parentRect.width);
+  const y = parentRect.y + resolveOffset(props.y, parentRect.height);
+  const width = resolveDimension(props.width, parentRect.width, parentRect.width);
+  const height = resolveDimension(props.height, parentRect.height, parentRect.height);
+  return {
+    x,
+    y,
+    width,
+    height
+  };
+}
+function instantiateView(view, props) {
+  const ViewConstructor = view.constructor;
+  return new ViewConstructor(props);
+}
+function getAxisLengthValue(child, orientation) {
+  if (isViewLayout(child)) {
+    return orientation === "row" ? child.width : child.height;
+  }
+  const props = child.props;
+  return orientation === "row" ? props.width : props.height;
+}
+function getPixelConstraintValue(child, propName) {
+  const value = isViewLayout(child) ? child[propName] : child.props[propName];
+  return typeof value === "number" ? value : void 0;
+}
+function applyInsets(rect, inset) {
+  if (!inset) {
+    return rect;
+  }
+  const top = inset.top ?? 0;
+  const right = inset.right ?? 0;
+  const bottom = inset.bottom ?? 0;
+  const left = inset.left ?? 0;
+  return {
+    x: rect.x + left,
+    y: rect.y + top,
+    width: Math.max(0, rect.width - left - right),
+    height: Math.max(0, rect.height - top - bottom)
+  };
+}
+function resolveOffset(value, parentLength) {
+  if (value === void 0 || value === null) {
+    return 0;
+  }
+  return resolveLength(value, parentLength);
+}
+function resolveDimension(value, parentLength, fallback) {
+  if (value === void 0 || value === null) {
+    return fallback;
+  }
+  return resolveLength(value, parentLength);
+}
+function resolveLength(value, parentLength) {
+  if (typeof value === "number") {
+    return value;
+  }
+  const normalized = value.trim();
+  if (normalized.length === 0) {
+    throw new Error("View layout length must not be empty.");
+  }
+  if (normalized.startsWith("calc(") && normalized.endsWith(")")) {
+    return resolveCalcExpression(normalized.slice(5, -1), parentLength);
+  }
+  return resolveLengthTerm(normalized, parentLength);
+}
+function resolveCalcExpression(expression, parentLength) {
+  const sanitized = expression.replace(/\s+/g, "");
+  const terms = sanitized.match(/[+-]?[^+-]+/g);
+  if (!terms) {
+    throw new Error(`Unsupported calc expression: calc(${expression})`);
+  }
+  return terms.reduce((sum, term) => sum + resolveLengthTerm(term, parentLength), 0);
+}
+function resolveLengthTerm(term, parentLength) {
+  if (term.endsWith("%")) {
+    return Number.parseFloat(term.slice(0, -1)) / 100 * parentLength;
+  }
+  if (term.endsWith("px")) {
+    return Number.parseFloat(term.slice(0, -2));
+  }
+  return Number.parseFloat(term);
+}
+function getViewId(view) {
+  const viewId = view.props.id;
+  return typeof viewId === "string" && viewId.length > 0 ? viewId : null;
+}
+function getRequiredViewId(view) {
+  const viewId = getViewId(view);
+  if (!viewId) {
+    throw new Error("Every compiled deck view must have a string id.");
+  }
+  return viewId;
+}
+function arePropsEqual(left, right) {
+  if (left === right) {
+    return true;
+  }
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  if (leftKeys.length !== rightKeys.length) {
+    return false;
+  }
+  return leftKeys.every((key) => areValuesEqual(left[key], right[key]));
+}
+function areValuesEqual(left, right) {
+  if (Object.is(left, right)) {
+    return true;
+  }
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return left.length === right.length && left.every((value, index) => areValuesEqual(value, right[index]));
+  }
+  if (isPlainObject(left) && isPlainObject(right)) {
+    const leftEntries = Object.keys(left);
+    const rightEntries = Object.keys(right);
+    return leftEntries.length === rightEntries.length && leftEntries.every((key) => areValuesEqual(left[key], right[key]));
+  }
+  return false;
+}
+function isPlainObject(value) {
+  return Boolean(value) && typeof value === "object" && Object.getPrototypeOf(value) === Object.prototype;
+}
+function isPresentChild(child) {
+  return Boolean(child);
+}
+
+// dist/splitter-widget.js
+function adaptViewLayout(root) {
   const layoutsById = [];
-  const isViewLayout = (v) => "views" in v;
-  function createManagedViewLayout(l) {
+  const isViewLayout2 = (v) => "views" in v;
+  function adaptLayout(l) {
     const id = layoutsById.length;
+    const splitId = `splitter-${id}`;
     const minSplit = l.minSplit ?? 0.05;
     const maxSplit = l.maxSplit ?? 0.95;
     const split = Math.min(Math.max(l.initialSplit ?? 0.5, minSplit), maxSplit);
     const managed = {
       id,
+      splitId,
       orientation: l.orientation,
       views: l.views,
       split,
@@ -1025,79 +1516,75 @@ function parseViewLayout(root) {
       height: 0
     };
     layoutsById.push(managed);
-    managed.views = [
-      isViewLayout(l.views[0]) ? createManagedViewLayout(l.views[0]) : l.views[0],
-      isViewLayout(l.views[1]) ? createManagedViewLayout(l.views[1]) : l.views[1]
-    ];
-    return managed;
-  }
-  createManagedViewLayout(root);
-  return layoutsById;
-}
-function evaluateViews(root) {
-  const views = [];
-  function evaluateViewLayout(l, x, y, width, height) {
-    l.x = x;
-    l.y = y;
-    l.width = width;
-    l.height = height;
-    const child1X = x;
-    const child1Y = y;
-    let child1Width = width;
-    let child1Height = height;
-    let child2X = x;
-    let child2Y = y;
-    let child2Width = width;
-    let child2Height = height;
-    if (l.orientation === "horizontal") {
-      child1Width = width * l.split;
-      child2X = x + child1Width;
-      child2Width = width - child1Width;
-    } else {
-      child1Height = height * l.split;
-      child2Y = y + child1Height;
-      child2Height = height - child1Height;
-    }
-    const [view1, view2] = l.views;
-    if ("views" in view1) {
-      evaluateViewLayout(view1, child1X, child1Y, child1Width, child1Height);
-    } else {
-      views.push(view1.clone({
-        x: `${child1X}%`,
-        y: `${child1Y}%`,
-        width: `${child1Width}%`,
-        height: `${child1Height}%`
-      }));
-    }
-    if ("views" in view2) {
-      evaluateViewLayout(view2, child2X, child2Y, child2Width, child2Height);
-    } else {
-      views.push(view2.clone({
-        x: `${child2X}%`,
-        y: `${child2Y}%`,
-        width: `${child2Width}%`,
-        height: `${child2Height}%`
-      }));
-    }
+    const childEntries = l.views.map((view) => {
+      if (!isViewLayout2(view)) {
+        return { layout: view, managed: view };
+      }
+      const adapted = adaptLayout(view);
+      return { layout: adapted.layout, managed: adapted.managed };
+    });
+    managed.views = [childEntries[0].managed, childEntries[1].managed];
+    const layout2 = {
+      orientation: l.orientation,
+      splitId,
+      initialSplit: split,
+      minSplit,
+      maxSplit,
+      views: [childEntries[0].layout, childEntries[1].layout]
+    };
+    return { layout: layout2, managed };
   }
-  evaluateViewLayout(root, 0, 0, 100, 100);
-  return views;
+  const { layout } = adaptLayout(root);
+  return { layout, viewLayouts: layoutsById };
 }
-var SplitterWidget = class extends import_core9.Widget {
+function evaluateViews(layout, viewLayouts, splitValues) {
+  const compiled = buildViewsFromViewLayout({
+    layout,
+    width: 100,
+    height: 100,
+    splitValues
+  });
+  for (const viewLayout of viewLayouts) {
+    const splitter = compiled.splittersById[viewLayout.splitId];
+    if (splitter) {
+      viewLayout.x = splitter.x;
+      viewLayout.y = splitter.y;
+      viewLayout.width = splitter.width;
+      viewLayout.height = splitter.height;
+      viewLayout.split = splitter.split;
+      viewLayout.minSplit = splitter.minSplit;
+      viewLayout.maxSplit = splitter.maxSplit;
+    }
+  }
+  return compiled.views.map((view) => view.clone({
+    x: `${view.props.x}%`,
+    y: `${view.props.y}%`,
+    width: `${view.props.width}%`,
+    height: `${view.props.height}%`
+  }));
+}
+var SplitterWidget = class extends import_core10.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-splitter";
     this.placement = "fill";
+    this.splitValues = {};
     this.needsUpdate = true;
-    this.viewLayouts = parseViewLayout(this.props.viewLayout);
+    this.updateViewLayout(this.props.viewLayout);
   }
   setProps(props) {
-    if (props.viewLayout && !(0, import_core9._deepEqual)(props.viewLayout, this.props.viewLayout, -1)) {
-      this.viewLayouts = parseViewLayout(props.viewLayout);
+    if (props.viewLayout && !(0, import_core10._deepEqual)(props.viewLayout, this.props.viewLayout, -1)) {
+      this.updateViewLayout(props.viewLayout);
       this.views = void 0;
     }
     super.setProps(props);
   }
+  updateViewLayout(viewLayout) {
+    const adapted = adaptViewLayout(viewLayout);
+    this.viewLayout = adapted.layout;
+    this.viewLayouts = adapted.viewLayouts;
+    this.splitValues = {};
+  }
   onRedraw() {
     super.updateHTML();
   }
@@ -1106,7 +1593,7 @@ var SplitterWidget = class extends import_core9.Widget {
   // so we update deck props here and rerender DOM in the next onRedraw
   updateHTML() {
     if (!this.views) {
-      this.views = evaluateViews(this.viewLayouts[0]);
+      this.views = evaluateViews(this.viewLayout, this.viewLayouts, this.splitValues);
       this.props.onChange(this.views.slice());
     }
     requestAnimationFrame(() => {
@@ -1128,8 +1615,8 @@ var SplitterWidget = class extends import_core9.Widget {
     }
   }
   onChange(newSplit, layout) {
-    layout.split = newSplit;
-    this.views = evaluateViews(this.viewLayouts[0]);
+    this.splitValues = { ...this.splitValues, [layout.splitId]: newSplit };
+    this.views = evaluateViews(this.viewLayout, this.viewLayouts, this.splitValues);
     this.props.onChange(this.views.slice());
     this.doUpdate();
   }
@@ -1138,7 +1625,7 @@ var SplitterWidget = class extends import_core9.Widget {
   }
 };
 SplitterWidget.defaultProps = {
-  ...import_core9.Widget.defaultProps,
+  ...import_core10.Widget.defaultProps,
   id: "splitter-widget",
   viewLayout: void 0,
   onChange: () => {
@@ -1199,7 +1686,7 @@ function Splitter({ orientation, x, y, width, height, split, minSplit, maxSplit,
 
 // dist/info-widget.js
 var import_jsx_runtime14 = require("preact/jsx-runtime");
-var import_core10 = require("@deck.gl/core");
+var import_core11 = require("@deck.gl/core");
 var import_preact9 = require("preact");
 
 // dist/lib/components/popover.js
@@ -1314,7 +1801,7 @@ var UserContent = ({ text, html, element, ...props }) => {
 };
 
 // dist/info-widget.js
-var InfoWidget = class extends import_core10.Widget {
+var InfoWidget = class extends import_core11.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-info";
@@ -1385,7 +1872,7 @@ var InfoWidget = class extends import_core10.Widget {
   }
 };
 InfoWidget.defaultProps = {
-  ...import_core10.Widget.defaultProps,
+  ...import_core11.Widget.defaultProps,
   id: "info",
   viewId: null,
   mode: "hover",
@@ -1397,9 +1884,9 @@ InfoWidget.defaultProps = {
 
 // dist/popup-widget.js
 var import_jsx_runtime15 = require("preact/jsx-runtime");
-var import_core11 = require("@deck.gl/core");
+var import_core12 = require("@deck.gl/core");
 var import_preact10 = require("preact");
-var PopupWidget = class extends import_core11.Widget {
+var PopupWidget = class extends import_core12.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-popup";
@@ -1448,7 +1935,7 @@ var PopupWidget = class extends import_core11.Widget {
   }
 };
 PopupWidget.defaultProps = {
-  ...import_core11.Widget.defaultProps,
+  ...import_core12.Widget.defaultProps,
   id: "info",
   viewId: null,
   position: [0, 0],
@@ -1466,9 +1953,9 @@ PopupWidget.defaultProps = {
 
 // dist/context-menu-widget.js
 var import_jsx_runtime16 = require("preact/jsx-runtime");
-var import_core12 = require("@deck.gl/core");
+var import_core13 = require("@deck.gl/core");
 var import_preact11 = require("preact");
-var ContextMenuWidget = class extends import_core12.Widget {
+var ContextMenuWidget = class extends import_core13.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-context-menu";
@@ -1522,7 +2009,7 @@ var ContextMenuWidget = class extends import_core12.Widget {
   }
 };
 ContextMenuWidget.defaultProps = {
-  ...import_core12.Widget.defaultProps,
+  ...import_core13.Widget.defaultProps,
   id: "context",
   viewId: null,
   menuItems: [],
@@ -1536,7 +2023,7 @@ ContextMenuWidget.defaultProps = {
 
 // dist/scrollbar-widget.js
 var import_jsx_runtime18 = require("preact/jsx-runtime");
-var import_core13 = require("@deck.gl/core");
+var import_core14 = require("@deck.gl/core");
 var import_preact12 = require("preact");
 
 // dist/lib/components/range-input.js
@@ -1806,7 +2293,7 @@ var clamp3 = (value, min, max) => {
   }
   return value;
 };
-var ScrollbarWidget = class extends import_core13.Widget {
+var ScrollbarWidget = class extends import_core14.Widget {
   constructor(props) {
     const resolved = {
       ...ScrollbarWidget.defaultProps,
@@ -1954,7 +2441,7 @@ var ScrollbarWidget = class extends import_core13.Widget {
   }
 };
 ScrollbarWidget.defaultProps = {
-  ...import_core13.Widget.defaultProps,
+  ...import_core14.Widget.defaultProps,
   contentBounds: null,
   placement: "top-right",
   viewId: null,
@@ -1978,8 +2465,8 @@ function projectBounds(bounds, viewport, isVertical) {
 // dist/icon-widget.js
 var import_jsx_runtime19 = require("preact/jsx-runtime");
 var import_preact13 = require("preact");
-var import_core14 = require("@deck.gl/core");
-var IconWidget = class extends import_core14.Widget {
+var import_core15 = require("@deck.gl/core");
+var IconWidget = class extends import_core15.Widget {
   constructor(props) {
     super(props);
     this.className = "";
@@ -1997,7 +2484,7 @@ var IconWidget = class extends import_core14.Widget {
   }
 };
 IconWidget.defaultProps = {
-  ...import_core14.Widget.defaultProps,
+  ...import_core15.Widget.defaultProps,
   id: "icon",
   placement: "top-left",
   viewId: null,
@@ -2010,8 +2497,8 @@ IconWidget.defaultProps = {
 // dist/toggle-widget.js
 var import_jsx_runtime20 = require("preact/jsx-runtime");
 var import_preact14 = require("preact");
-var import_core15 = require("@deck.gl/core");
-var ToggleWidget = class extends import_core15.Widget {
+var import_core16 = require("@deck.gl/core");
+var ToggleWidget = class extends import_core16.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-toggle";
@@ -2038,7 +2525,7 @@ var ToggleWidget = class extends import_core15.Widget {
   }
 };
 ToggleWidget.defaultProps = {
-  ...import_core15.Widget.defaultProps,
+  ...import_core16.Widget.defaultProps,
   id: "icon",
   placement: "top-left",
   viewId: null,
@@ -2055,8 +2542,8 @@ ToggleWidget.defaultProps = {
 // dist/selector-widget.js
 var import_jsx_runtime21 = require("preact/jsx-runtime");
 var import_preact15 = require("preact");
-var import_core16 = require("@deck.gl/core");
-var SelectorWidget = class extends import_core16.Widget {
+var import_core17 = require("@deck.gl/core");
+var SelectorWidget = class extends import_core17.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-selector";
@@ -2093,7 +2580,7 @@ var SelectorWidget = class extends import_core16.Widget {
   }
 };
 SelectorWidget.defaultProps = {
-  ...import_core16.Widget.defaultProps,
+  ...import_core17.Widget.defaultProps,
   id: "view-selector",
   placement: "top-left",
   viewId: null,
@@ -2105,9 +2592,9 @@ SelectorWidget.defaultProps = {
 
 // dist/timeline-widget.js
 var import_jsx_runtime22 = require("preact/jsx-runtime");
-var import_core17 = require("@deck.gl/core");
+var import_core18 = require("@deck.gl/core");
 var import_preact16 = require("preact");
-var TimelineWidget = class extends import_core17.Widget {
+var TimelineWidget = class extends import_core18.Widget {
   /**
    * Returns the current time value.
    * In controlled mode, returns the time prop.
@@ -2263,7 +2750,7 @@ var TimelineWidget = class extends import_core17.Widget {
   }
 };
 TimelineWidget.defaultProps = {
-  ...import_core17.Widget.defaultProps,
+  ...import_core18.Widget.defaultProps,
   id: "timeline",
   placement: "bottom-left",
   viewId: null,
@@ -2286,8 +2773,8 @@ TimelineWidget.defaultProps = {
 // dist/screenshot-widget.js
 var import_jsx_runtime23 = require("preact/jsx-runtime");
 var import_preact17 = require("preact");
-var import_core18 = require("@deck.gl/core");
-var ScreenshotWidget = class extends import_core18.Widget {
+var import_core19 = require("@deck.gl/core");
+var ScreenshotWidget = class extends import_core19.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-screenshot";
@@ -2327,7 +2814,7 @@ var ScreenshotWidget = class extends import_core18.Widget {
   }
 };
 ScreenshotWidget.defaultProps = {
-  ...import_core18.Widget.defaultProps,
+  ...import_core19.Widget.defaultProps,
   id: "screenshot",
   placement: "top-left",
   viewId: null,
@@ -2339,8 +2826,8 @@ ScreenshotWidget.defaultProps = {
 
 // dist/theme-widget.js
 var import_jsx_runtime24 = require("preact/jsx-runtime");
-var import_core19 = require("@deck.gl/core");
 var import_core20 = require("@deck.gl/core");
+var import_core21 = require("@deck.gl/core");
 var import_preact18 = require("preact");
 
 // dist/themes.js
@@ -2458,7 +2945,7 @@ var DarkGlassTheme = {
 };
 
 // dist/theme-widget.js
-var ThemeWidget = class extends import_core20.Widget {
+var ThemeWidget = class extends import_core21.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-theme";
@@ -2501,16 +2988,16 @@ var ThemeWidget = class extends import_core20.Widget {
   /** Apply theme styling without changing internal state */
   _applyTheme(themeMode, rootElement) {
     const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
-    if ((0, import_core19._deepEqual)(themeStyle, this.appliedTheme, 1)) {
+    if ((0, import_core20._deepEqual)(themeStyle, this.appliedTheme, 1)) {
       return;
     }
     const container = rootElement.closest(".deck-widget-container");
     if (!container)
       return;
-    (0, import_core19._applyStyles)(container, themeStyle);
+    (0, import_core20._applyStyles)(container, themeStyle);
     this.appliedTheme = themeStyle;
     const label = themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-    import_core19.log.log(1, `Switched theme to ${label}`, themeStyle)();
+    import_core20.log.log(1, `Switched theme to ${label}`, themeStyle)();
   }
   /** Read browser preference */
   _getInitialThemeMode() {
@@ -2525,7 +3012,7 @@ var ThemeWidget = class extends import_core20.Widget {
   }
 };
 ThemeWidget.defaultProps = {
-  ...import_core20.Widget.defaultProps,
+  ...import_core21.Widget.defaultProps,
   id: "theme",
   placement: "top-left",
   viewId: null,
@@ -2542,8 +3029,8 @@ ThemeWidget.defaultProps = {
 // dist/loading-widget.js
 var import_jsx_runtime25 = require("preact/jsx-runtime");
 var import_preact19 = require("preact");
-var import_core21 = require("@deck.gl/core");
-var LoadingWidget = class extends import_core21.Widget {
+var import_core22 = require("@deck.gl/core");
+var LoadingWidget = class extends import_core22.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-loading";
@@ -2577,7 +3064,7 @@ var LoadingWidget = class extends import_core21.Widget {
   }
 };
 LoadingWidget.defaultProps = {
-  ...import_core21.Widget.defaultProps,
+  ...import_core22.Widget.defaultProps,
   id: "loading",
   placement: "top-left",
   viewId: null,
@@ -2588,8 +3075,8 @@ LoadingWidget.defaultProps = {
 
 // dist/stats-widget.js
 var import_jsx_runtime26 = require("preact/jsx-runtime");
-var import_core22 = require("@deck.gl/core");
-var import_core23 = require("@luma.gl/core");
+var import_core23 = require("@deck.gl/core");
+var import_core24 = require("@luma.gl/core");
 var import_preact20 = require("preact");
 var import_hooks7 = require("preact/hooks");
 var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
@@ -2607,7 +3094,7 @@ var DEFAULT_FORMATTERS = {
   fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
   memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
 };
-var StatsWidget = class extends import_core22.Widget {
+var StatsWidget = class extends import_core23.Widget {
   /**
    * Returns the current expanded state.
    * In controlled mode, returns the expanded prop.
@@ -2697,7 +3184,7 @@ var StatsWidget = class extends import_core22.Widget {
         const metrics = ((_a = this.deck) == null ? void 0 : _a.metrics) ?? {};
         return Object.entries(metrics);
       case "luma":
-        return Array.from(import_core23.luma.stats.stats.values())[0];
+        return Array.from(import_core24.luma.stats.stats.values())[0];
       case "device":
         const device = (_b = this.deck) == null ? void 0 : _b.device;
         const stats = device == null ? void 0 : device.statsManager.stats.values();
@@ -2734,7 +3221,7 @@ var StatsWidget = class extends import_core22.Widget {
   }
 };
 StatsWidget.defaultProps = {
-  ...import_core22.Widget.defaultProps,
+  ...import_core23.Widget.defaultProps,
   type: "deck",
   placement: "top-left",
   viewId: null,