@vertexvis/viewer 0.18.1 → 0.18.2-testing.0

package/dist/components/scene-tree-table-layout.js

@@ -0,0 +1,928 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as point } from './bundle.esm.js';
+import { c as __assign } from './tslib.es6.js';
+import { r as readDOM } from './stencil.js';
+import { i as isLoadedRow } from './row.js';
+import { E as EventDispatcher } from './browser.esm.js';
+
+function getSceneTreeViewportHeight(el) {
+  return el.clientHeight;
+}
+function getSceneTreeContainsElement(el, other) {
+  return el.contains(other);
+}
+
+/**
+ * Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
+ */
+/**
+ * Lower case as a function.
+ */
+function lowerCase(str) {
+    return str.toLowerCase();
+}
+
+// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
+var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+// Remove all non-word characters.
+var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
+/**
+ * Normalize the string into something other libraries can manipulate easier.
+ */
+function noCase(input, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
+    var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
+    var start = 0;
+    var end = result.length;
+    // Trim the delimiter from around the output string.
+    while (result.charAt(start) === "\0")
+        start++;
+    while (result.charAt(end - 1) === "\0")
+        end--;
+    // Transform each token independently.
+    return result.slice(start, end).split("\0").map(transform).join(delimiter);
+}
+/**
+ * Replace `re` in the input string with the replacement value.
+ */
+function replace(input, re, value) {
+    if (re instanceof RegExp)
+        return input.replace(re, value);
+    return re.reduce(function (input, re) { return input.replace(re, value); }, input);
+}
+
+function pascalCaseTransform(input, index) {
+    var firstChar = input.charAt(0);
+    var lowerChars = input.substr(1).toLowerCase();
+    if (index > 0 && firstChar >= "0" && firstChar <= "9") {
+        return "_" + firstChar + lowerChars;
+    }
+    return "" + firstChar.toUpperCase() + lowerChars;
+}
+function pascalCase(input, options) {
+    if (options === void 0) { options = {}; }
+    return noCase(input, __assign({ delimiter: "", transform: pascalCaseTransform }, options));
+}
+
+function camelCaseTransform(input, index) {
+    if (index === 0)
+        return input.toLowerCase();
+    return pascalCaseTransform(input, index);
+}
+function camelCase(input, options) {
+    if (options === void 0) { options = {}; }
+    return pascalCase(input, __assign({ transform: camelCaseTransform }, options));
+}
+
+const bindingRegEx = /{{(.+)}}/;
+class CollectionBinding {
+    constructor(bindings) {
+        this.bindings = bindings;
+    }
+    bind(data) {
+        this.bindings.forEach((binding) => binding.bind(data));
+    }
+}
+class NodeBinding {
+    constructor(node, expr) {
+        this.node = node;
+        this.expr = expr;
+    }
+}
+class TextNodeBinding extends NodeBinding {
+    constructor(node, expr) {
+        super(node, expr);
+    }
+    bind(data) {
+        const newContent = replaceBindingString(data, this.expr);
+        if (newContent !== this.node.textContent) {
+            this.node.textContent = newContent;
+        }
+    }
+}
+class AttributeBinding extends NodeBinding {
+    constructor(node, expr, attr) {
+        super(node, expr);
+        this.attr = attr;
+    }
+    bind(data) {
+        const newValue = replaceBindingString(data, this.expr);
+        const oldValue = this.node.getAttribute(this.attr);
+        if (oldValue !== newValue) {
+            this.node.setAttribute(this.attr, newValue);
+        }
+    }
+}
+class PropertyBinding extends NodeBinding {
+    constructor(node, expr, prop) {
+        super(node, expr);
+        this.prop = prop;
+    }
+    bind(data) {
+        const newValue = replaceBinding(data, this.expr);
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const oldValue = this.node[this.prop];
+        if (oldValue !== newValue) {
+            this.node[this.prop] = newValue;
+        }
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    }
+}
+class EventHandlerBinding extends NodeBinding {
+    constructor(node, expr, eventName) {
+        super(node, expr);
+        this.eventName = eventName;
+    }
+    bind(data) {
+        var _a;
+        const path = extractBindingPath(this.expr);
+        if (path != null) {
+            (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
+            const listener = getBindableValue(data, path, true);
+            this.node.addEventListener(this.eventName, listener);
+            this.disposable = {
+                dispose: () => {
+                    this.node.removeEventListener(this.eventName, listener);
+                },
+            };
+        }
+    }
+}
+function generateBindings(node) {
+    const bindings = [];
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        const bindableAttributes = getBindableAttributes(el);
+        bindableAttributes.forEach((attr) => {
+            if (attr.name.startsWith('event:')) {
+                const eventName = camelCase(attr.name.replace('event:', ''));
+                bindings.push(new EventHandlerBinding(el, attr.value, eventName));
+            }
+            else if (attr.name.startsWith('attr:')) {
+                bindings.push(new AttributeBinding(el, attr.value, attr.name.replace('attr:', '')));
+            }
+            else if (attr.name.startsWith('prop:')) {
+                const propName = camelCase(attr.name.replace('prop:', ''));
+                bindings.push(new PropertyBinding(el, attr.value, propName));
+            }
+        });
+    }
+    else if (node.nodeType === Node.TEXT_NODE &&
+        node.textContent != null &&
+        bindingRegEx.test(node.textContent)) {
+        bindings.push(new TextNodeBinding(node, node.textContent));
+    }
+    for (let i = 0; i < node.childNodes.length; i++) {
+        bindings.push(...generateBindings(node.childNodes[i]));
+    }
+    return bindings;
+}
+function getBindableAttributes(element) {
+    return Array.from(element.attributes).filter((attr) => bindingRegEx.test(attr.value));
+}
+function extractBindingPath(expr) {
+    const result = bindingRegEx.exec(expr);
+    return result != null ? result[1] : undefined;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function replaceBindingString(data, expr) {
+    const path = extractBindingPath(expr);
+    if (path != null) {
+        const value = getBindableValue(data, path, true);
+        return expr.replace(`{{${path}}}`, value === null || value === void 0 ? void 0 : value.toString());
+    }
+    else {
+        return expr;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function replaceBinding(data, expr) {
+    const path = extractBindingPath(expr);
+    if (path != null) {
+        const value = getBindableValue(data, path, true);
+        return value;
+    }
+    else {
+        return expr;
+    }
+}
+function getBindableValue(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+data, path, isHead = false
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
+    const [head, ...tail] = path.split('.');
+    if (isHead && tail.length === 0) {
+        return data;
+    }
+    else if (isHead && tail.length > 0) {
+        return getBindableValue(data, tail.join('.'), false);
+    }
+    else {
+        const value = data[head];
+        if (tail.length > 0) {
+            return getBindableValue(value, tail.join('.'), false);
+        }
+        else {
+            return value;
+        }
+    }
+}
+
+class ElementPool {
+    constructor(container, elementFactory) {
+        this.container = container;
+        this.elementFactory = elementFactory;
+        this.instanceMap = new Map();
+        this.elements = [];
+    }
+    swapHeadToTail(count) {
+        const sliced = this.elements.splice(0, count);
+        this.elements.splice(this.elements.length, 0, ...sliced);
+        return this.elements.concat();
+    }
+    swapTailToHead(count) {
+        const sliced = this.elements.splice(-count, count);
+        this.elements.splice(0, 0, ...sliced);
+        return this.elements.concat();
+    }
+    updateElements(count) {
+        const diff = count - this.elements.length;
+        if (diff > 0) {
+            for (let i = 0; i < diff; i++) {
+                this.createElement();
+            }
+        }
+        else {
+            for (let i = 0; i < -diff; i++) {
+                this.deleteElement();
+            }
+        }
+        return this.elements.concat();
+    }
+    updateData(f) {
+        this.elements.forEach((el, i) => {
+            const instance = this.instanceMap.get(el);
+            const data = f(i);
+            instance === null || instance === void 0 ? void 0 : instance.bindings.bind(data);
+        });
+    }
+    updateElementFactory(elementFactory) {
+        this.elementFactory = elementFactory;
+        this.updateElements(0);
+    }
+    iterateElements(f) {
+        this.elements.forEach((el, i) => {
+            const instance = this.instanceMap.get(el);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            f(el, instance.bindings, i);
+        });
+    }
+    createElement() {
+        const instance = this.elementFactory();
+        this.elements.push(instance.element);
+        this.instanceMap.set(instance.element, instance);
+        this.container.append(instance.element);
+        return instance;
+    }
+    deleteElement() {
+        const element = this.elements.pop();
+        if (element != null) {
+            this.instanceMap.delete(element);
+            element.remove();
+        }
+    }
+}
+function generateInstanceFromTemplate(template) {
+    const fragment = template.content.cloneNode(true);
+    const element = fragment.firstElementChild;
+    const bindings = new CollectionBinding(generateBindings(fragment));
+    return { element, bindings };
+}
+
+function getSceneTreeTableOffsetTop(el) {
+  var _a;
+  return (_a = el.getBoundingClientRect().top) !== null && _a !== void 0 ? _a : 0;
+}
+function getSceneTreeTableViewportWidth(el) {
+  return el.clientWidth;
+}
+function scrollToTop(el, top, options) {
+  el.scrollTo(Object.assign({ top }, options));
+}
+
+class SceneTreeCellHoverController {
+  constructor() {
+    this.onStateChange = new EventDispatcher();
+  }
+  setHovered(id) {
+    this.onStateChange.emit(id);
+  }
+  stateChanged(listener) {
+    return this.onStateChange.on(listener);
+  }
+}
+
+function restartTimeout(fn, existingTimeout, delay = 200) {
+  window.clearTimeout(existingTimeout);
+  return window.setTimeout(fn, delay);
+}
+
+const sceneTreeTableLayoutCss = ":host{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;font-size:0.825rem;--scene-tree-table-row-padding:2px 0px;--scene-tree-table-column-gap:0.5rem;--scene-tree-table-column-resize-cursor:col-resize}.header{position:relative;display:grid;width:100%;border-bottom:var(--scene-tree-toolbar-separator)}.table{position:relative;display:grid;width:100%;height:100%;overflow:auto}.resize-overlay{position:absolute;top:0;cursor:var(--scene-tree-table-column-resize-cursor);z-index:1000;width:100%;height:100%}.divider-overlay{position:absolute;top:0;display:grid;pointer-events:none;z-index:2000;width:100%;height:100%}";
+
+const SceneTreeTableLayout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.layoutRendered = createEvent(this, "layoutRendered", 7);
+    /**
+     * @internal
+     */
+    this.rows = [];
+    /**
+     * @internal
+     */
+    this.totalRows = 0;
+    /**
+     * @internal
+     */
+    this.rowHeight = 24;
+    /**
+     * The number of offscreen rows above and below the viewport to render. Having
+     * a higher number reduces the chance of the browser not displaying a row
+     * while scrolling.
+     *
+     * This prop will be automatically populated based on the `overScanCount` prop
+     * specified in the parent `<vertex-scene-tree />` element.
+     */
+    this.overScanCount = 25;
+    /**
+     * @internal
+     */
+    this.layoutOffset = 0;
+    /**
+     * @internal
+     */
+    this.scrollOffset = 0;
+    /**
+     * @internal
+     */
+    this.viewportStartIndex = 0;
+    /**
+     * @internal
+     */
+    this.viewportEndIndex = 0;
+    this.columnGridLayout = '1fr';
+    this.columnGridFixedLayout = '';
+    this.isComputingCellHeight = true;
+    this.isScrolling = false;
+    /**
+     * This stores internal state that you want to preserve across live-reloads,
+     * but shouldn't trigger a refresh if the data changes. Marking this with
+     * @State to allow to preserve state across live-reloads.
+     */
+    this.stateMap = {
+      viewportRows: [],
+      columnWidths: [],
+      columnWidthPercentages: [],
+    };
+    this.lastStartIndex = 0;
+    this.columnElements = [];
+    this.cellHoverController = new SceneTreeCellHoverController();
+    this.layoutColumns = () => {
+      const visibleRowCount = this.viewportEndIndex - this.viewportStartIndex + 1;
+      const diff = this.viewportStartIndex - this.lastStartIndex;
+      this.lastStartIndex = this.viewportStartIndex;
+      this.iterateColumns((col, pool, colIndex) => {
+        pool.updateElements(visibleRowCount);
+        if (diff > 0) {
+          pool.swapHeadToTail(diff);
+        }
+        else {
+          pool.swapTailToHead(-diff);
+        }
+        col.style.minHeight = `${this.rowHeight * this.totalRows}px`;
+        const cellPaddingLeft = colIndex === 0
+          ? (depth) => `calc(${depth} * 0.5rem)`
+          : () => `0`;
+        pool.iterateElements((el, binding, rowIndex) => {
+          const row = this.stateMap.viewportRows[rowIndex];
+          if (isLoadedRow(row)) {
+            this.updateCell(row, el, binding, rowIndex, cellPaddingLeft);
+          }
+        });
+      });
+    };
+    this.updateCell = (row, cell, binding, rowIndex, cellPaddingLeft) => {
+      cell.style.position = 'absolute';
+      cell.style.top = `${(this.viewportStartIndex + rowIndex) * this.rowHeight}px`;
+      cell.style.boxSizing = 'border-box';
+      cell.style.height = `${this.rowHeight}px`;
+      cell.style.width = '100%';
+      cell.style.paddingLeft = cellPaddingLeft(row.node.depth);
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      cell.tree = this.tree;
+      cell.node = row.node;
+      cell.hoverController = this.cellHoverController;
+      cell.isScrolling = this.isScrolling;
+      /* eslint-enable @typescript-eslint/no-explicit-any */
+      binding.bind(row);
+    };
+    this.updateLayoutPosition = () => {
+      readDOM(() => {
+        if (this.tableElement != null) {
+          this.layoutOffset = getSceneTreeTableOffsetTop(this.tableElement);
+        }
+      });
+    };
+    this.recomputeColumnWidths = () => {
+      const layoutWidth = this.getLayoutWidth();
+      if (layoutWidth != null &&
+        this.stateMap.columnWidths.length ===
+          this.stateMap.columnWidthPercentages.length) {
+        this.stateMap.columnWidths = this.stateMap.columnWidthPercentages.map((w) => w * layoutWidth);
+      }
+    };
+    this.recomputeColumnPercentages = () => {
+      const layoutWidth = this.getLayoutWidth();
+      if (layoutWidth != null &&
+        this.stateMap.columnWidths.length ===
+          this.stateMap.columnWidthPercentages.length) {
+        this.stateMap.columnWidthPercentages = this.stateMap.columnWidths.map((w) => w / layoutWidth);
+      }
+    };
+    this.computeInitialColumnWidths = () => {
+      this.stateMap.columnWidths = this.columnElements.map((c) => { var _a; return (_a = c.initialWidth) !== null && _a !== void 0 ? _a : 100; });
+      const layoutWidth = this.getLayoutWidth();
+      if (layoutWidth != null) {
+        this.stateMap.columnWidthPercentages = this.columnElements.map((c) => { var _a; return ((_a = c.initialWidth) !== null && _a !== void 0 ? _a : 100) / layoutWidth; });
+      }
+    };
+    this.updateColumnElements = () => {
+      this.columnElements = Array.from(this.hostEl.querySelectorAll('vertex-scene-tree-table-column'));
+    };
+    this.computeCellHeight = async () => {
+      var _a;
+      if (this.isComputingCellHeight && this.columnElements.length > 0) {
+        const dummyData = {
+          index: 0,
+          node: {
+            id: { hex: '' },
+            name: 'Dummy row',
+            expanded: false,
+            selected: false,
+            visible: false,
+            partiallyVisible: false,
+            isLeaf: false,
+            depth: 0,
+            columnsList: [],
+            filterHit: false,
+            phantom: false,
+            endItem: false,
+          },
+          metadata: {},
+          data: {},
+        };
+        const { bindings, element } = this.createColumnCellInstance(this.columnElements[0]);
+        bindings.bind(dummyData);
+        element.style.visibility = 'hidden';
+        (_a = this.columnElements[0]) === null || _a === void 0 ? void 0 : _a.appendChild(element);
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        if (typeof element.componentOnReady === 'function') {
+          await element.componentOnReady();
+        }
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+        let height = element.clientHeight;
+        let attempts = 0;
+        while (height === 0 && attempts < 10) {
+          height = await new Promise((resolve) => {
+            setTimeout(() => resolve(element.getBoundingClientRect().height), 5);
+          });
+          attempts = attempts + 1;
+        }
+        this.rowHeight = height !== null && height !== void 0 ? height : this.rowHeight;
+        element.remove();
+        this.isComputingCellHeight = this.rowHeight === 0;
+      }
+    };
+    this.computeHeaderHeight = () => {
+      var _a;
+      if (this.stateMap.headerHeight == null) {
+        this.stateMap.headerHeight =
+          (_a = this.headerElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
+        this.hostEl.style.setProperty('--header-height', `${this.stateMap.headerHeight}px`);
+      }
+    };
+    this.computeColumnGridLayout = () => {
+      if (this.stateMap.columnWidths.length === 0) {
+        this.stateMap.columnWidths = this.columnElements.map((c) => { var _a; return (_a = c.initialWidth) !== null && _a !== void 0 ? _a : 100; });
+      }
+      const layoutWidth = this.getLayoutWidth();
+      if (layoutWidth != null) {
+        if (this.stateMap.columnWidthPercentages.length === 0) {
+          this.stateMap.columnWidthPercentages = this.columnElements.map((c) => { var _a; return ((_a = c.initialWidth) !== null && _a !== void 0 ? _a : 100) / layoutWidth; });
+        }
+      }
+      /**
+       * This layout uses `1fr` instead of the final column width to
+       * allow the final column to shrink when a scrollbar appears.
+       *
+       * This flex behavior is not desired for the header and divider
+       * elements since they are not scrollable, and `columnGridFixedLayout`
+       * should be used instead.
+       */
+      this.columnGridLayout = `${this.stateMap.columnWidths
+        .slice(0, -1)
+        .reduce((res, w) => `${res} ${w}px`, '')} 1fr`;
+      this.columnGridFixedLayout = `${this.stateMap.columnWidths.reduce((res, w) => `${res} ${w}px`, '')}`;
+    };
+    this.bindHeaderData = () => {
+      if (this.stateMap.headerInstances == null) {
+        this.stateMap.headerInstances = this.columnElements
+          .map((c, i) => {
+          var _a;
+          const instance = this.createHeaderInstance(c);
+          if (instance != null) {
+            instance.element.style.paddingRight =
+              i === this.columnElements.length - 1
+                ? `0`
+                : `var(--scene-tree-table-column-gap)`;
+            instance.element.slot = 'header';
+            instance.element.style.gridColumnStart = `${i + 1}`;
+            instance.element.style.gridColumnEnd = `${i + 2}`;
+            (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.appendChild(instance.element);
+          }
+          return instance;
+        })
+          .filter((i) => i != null);
+      }
+      if (this.stateMap.headerDividerInstances == null) {
+        this.stateMap.headerDividerInstances = this.columnElements
+          .slice(0, -1)
+          .map((_, i) => {
+          var _a;
+          const instance = this.createDividerInstance();
+          instance.element.slot = 'divider';
+          instance.element.style.position = 'absolute';
+          instance.element.style.right = '0';
+          instance.element.style.pointerEvents = 'auto';
+          instance.element.style.gridColumnStart = `${i + 1}`;
+          instance.element.style.gridColumnEnd = `${i + 2}`;
+          (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.appendChild(instance.element);
+          return instance;
+        });
+      }
+    };
+    this.rebindHeaderData = () => {
+      var _a, _b;
+      this.removeDividerDragListeners();
+      (_a = this.stateMap.headerInstances) === null || _a === void 0 ? void 0 : _a.forEach((i) => i.element.remove());
+      (_b = this.stateMap.headerDividerInstances) === null || _b === void 0 ? void 0 : _b.forEach((i) => i.element.remove());
+      this.stateMap.headerInstances = undefined;
+      this.stateMap.headerDividerInstances = undefined;
+      this.bindHeaderData();
+      this.addDividerDragListeners();
+    };
+    this.createDividerPointerDownHandler = (index) => {
+      return (event) => {
+        var _a, _b;
+        event.preventDefault();
+        event.stopPropagation();
+        this.lastDividerPointerPosition = point.create(Math.floor(event.clientX), Math.floor(event.clientY));
+        this.resizingColumnIndex = index;
+        (_b = (_a = this.stateMap.headerDividerInstances) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.element.classList.add('dragging');
+        window.addEventListener('pointermove', this.handleDividerPointerMove);
+        window.addEventListener('pointerup', this.handleDividerPointerUp);
+      };
+    };
+    this.handleDividerPointerMove = (event) => {
+      const current = point.create(Math.floor(event.clientX), Math.floor(event.clientY));
+      if (this.lastDividerPointerPosition != null &&
+        this.resizingColumnIndex != null) {
+        const diff = point.subtract(this.lastDividerPointerPosition, current);
+        if (Math.abs(diff.x) >= 1 &&
+          this.isValidResize(diff, this.resizingColumnIndex)) {
+          this.stateMap.columnWidths[this.resizingColumnIndex] -= diff.x;
+          if (this.resizingColumnIndex + 1 < this.stateMap.columnWidths.length) {
+            this.stateMap.columnWidths[this.resizingColumnIndex + 1] += diff.x;
+          }
+          this.lastDividerPointerPosition = current;
+          this.computeColumnGridLayout();
+        }
+      }
+    };
+    this.handleDividerPointerUp = () => {
+      var _a, _b;
+      if (this.resizingColumnIndex != null) {
+        (_b = (_a = this.stateMap.headerDividerInstances) === null || _a === void 0 ? void 0 : _a[this.resizingColumnIndex]) === null || _b === void 0 ? void 0 : _b.element.classList.remove('dragging');
+      }
+      this.lastDividerPointerPosition = undefined;
+      this.resizingColumnIndex = undefined;
+      this.recomputeColumnPercentages();
+      window.removeEventListener('pointermove', this.handleDividerPointerMove);
+      window.removeEventListener('pointerup', this.handleDividerPointerUp);
+    };
+    this.isValidResize = (diff, index) => {
+      var _a, _b, _c, _d;
+      const currentColumn = this.columnElements[index];
+      const nextColumn = this.columnElements[index + 1];
+      const currentWidth = this.stateMap.columnWidths[index];
+      const nextWidth = this.stateMap.columnWidths[index + 1];
+      const currentMinWidth = (_a = currentColumn.minWidth) !== null && _a !== void 0 ? _a : 0;
+      const currentMaxWidth = (_b = currentColumn.maxWidth) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER;
+      const nextMinWidth = (_c = nextColumn.minWidth) !== null && _c !== void 0 ? _c : 0;
+      const nextMaxWidth = (_d = nextColumn.maxWidth) !== null && _d !== void 0 ? _d : Number.MAX_SAFE_INTEGER;
+      const currentIsValid = currentWidth - diff.x > currentMinWidth &&
+        currentWidth - diff.x < currentMaxWidth;
+      const nextIsValid = nextColumn != null
+        ? nextWidth + diff.x > nextMinWidth && nextWidth + diff.x < nextMaxWidth
+        : true;
+      return currentIsValid && nextIsValid;
+    };
+    this.handleScrollChanged = (event) => {
+      this.isScrolling = true;
+      this.scrollTimer = restartTimeout(() => {
+        this.isScrolling = false;
+      }, this.scrollTimer);
+      this.scrollOffset = event.target.scrollTop;
+      this.computeAndUpdateViewportRows();
+    };
+  }
+  componentWillLoad() {
+    this.updateColumnElements();
+    this.createPools();
+    this.headerResizeObserver = new ResizeObserver(() => {
+      this.stateMap.headerHeight = undefined;
+      this.computeHeaderHeight();
+      this.updateLayoutPosition();
+    });
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateLayoutPosition();
+      this.clearLayoutHeight();
+      this.clearLayoutWidth();
+      this.recomputeColumnWidths();
+      this.computeColumnGridLayout();
+    });
+  }
+  componentDidLoad() {
+    var _a, _b, _c;
+    this.computeColumnGridLayout();
+    this.ensureDividerTemplateDefined();
+    this.computeCellHeight();
+    this.computeHeaderHeight();
+    this.computeInitialColumnWidths();
+    this.rebindHeaderData();
+    (_a = this.tableElement) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', this.handleScrollChanged, {
+      passive: true,
+    });
+    if (this.headerElement != null) {
+      (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.headerElement);
+    }
+    (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.observe(this.hostEl);
+  }
+  async componentWillRender() {
+    await this.computeAndUpdateViewportRows();
+  }
+  componentDidRender() {
+    this.layoutColumns();
+    this.layoutRendered.emit();
+  }
+  disconnectedCallback() {
+    var _a, _b, _c;
+    (_a = this.tableElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleScrollChanged);
+    this.removeDividerDragListeners();
+    (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+    this.stateMap.columnWidths = [];
+    this.stateMap.columnWidthPercentages = [];
+  }
+  async handleViewportRowsPropsChanged() {
+    if (this.isComputingCellHeight) {
+      await this.computeCellHeight();
+    }
+    await this.computeAndUpdateViewportRows();
+  }
+  /**
+   * Scrolls the table to the provided top value.
+   *
+   * @param top The position to scroll to.
+   * @param options A set of options to configure the scrolling behavior.
+   */
+  async scrollToPosition(top, options) {
+    if (this.tableElement != null) {
+      scrollToTop(this.tableElement, top, options);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "header", ref: (ref) => (this.headerElement = ref), style: {
+        gridTemplateColumns: this.columnGridFixedLayout,
+        display: this.columnElements.length <= 1 ? 'none' : 'grid',
+      } }, h("slot", { name: "header" })), h("div", { class: "table", ref: (ref) => (this.tableElement = ref), style: {
+        gridTemplateColumns: this.columnGridLayout,
+      } }, h("slot", { onSlotchange: () => {
+        this.ensureDividerTemplateDefined();
+        this.updateColumnElements();
+        this.recreateColumnPools();
+        this.computeInitialColumnWidths();
+        this.rebindHeaderData();
+        this.computeColumnGridLayout();
+      } })), h("div", { class: "divider-overlay", style: {
+        gridTemplateColumns: this.columnGridFixedLayout,
+      } }, h("slot", { name: "divider" })), this.resizingColumnIndex != null && h("div", { class: "resize-overlay" })));
+  }
+  computeViewportRows() {
+    const viewportHeight = this.getLayoutHeight();
+    if (viewportHeight != null) {
+      const viewportCount = Math.ceil(viewportHeight / this.rowHeight);
+      const viewportStartIndex = Math.floor(this.scrollOffset / this.rowHeight);
+      const viewportEndIndex = viewportStartIndex + viewportCount;
+      const startIndex = Math.max(0, viewportStartIndex - this.overScanCount);
+      const endIndex = Math.min(this.totalRows - 1, viewportEndIndex + this.overScanCount);
+      const rows = this.getViewportRows(startIndex, endIndex);
+      this.viewportStartIndex = startIndex;
+      this.viewportEndIndex = endIndex;
+      this.stateMap.viewportRows = rows;
+    }
+  }
+  async computeAndUpdateViewportRows() {
+    var _a;
+    this.computeViewportRows();
+    if (((_a = this.controller) === null || _a === void 0 ? void 0 : _a.isConnected) && this.totalRows > 0) {
+      await this.controller.updateActiveRowRange(this.viewportStartIndex, this.viewportEndIndex);
+    }
+  }
+  createPools() {
+    if (this.stateMap.columnElementPools == null) {
+      this.stateMap.columnElementPools = this.columnElements.reduce((map, c) => map.set(c, new ElementPool(c, () => this.createColumnCellInstance(c))), new WeakMap());
+    }
+  }
+  recreateColumnPools() {
+    this.columnElements.forEach((c) => {
+      var _a, _b, _c;
+      if (((_a = this.stateMap.columnElementPools) === null || _a === void 0 ? void 0 : _a.get(c)) == null) {
+        (_b = this.stateMap.columnElementPools) === null || _b === void 0 ? void 0 : _b.set(c, new ElementPool(c, () => this.createColumnCellInstance(c)));
+      }
+      else {
+        (_c = this.stateMap.columnElementPools
+          .get(c)) === null || _c === void 0 ? void 0 : _c.updateElementFactory(() => this.createColumnCellInstance(c));
+      }
+    });
+  }
+  iterateColumns(f) {
+    this.columnElements.forEach((column, i) => {
+      var _a;
+      const pool = (_a = this.stateMap.columnElementPools) === null || _a === void 0 ? void 0 : _a.get(column);
+      if (pool != null) {
+        f(column, pool, i);
+      }
+      else {
+        throw new Error('Cannot find pool for column');
+      }
+    });
+  }
+  ensureDividerTemplateDefined() {
+    const template = this.hostEl.querySelector('template[slot="divider"]');
+    if (template == null) {
+      const defaultDividerTemplate = document.createElement('template');
+      defaultDividerTemplate.slot = 'divider';
+      defaultDividerTemplate.innerHTML = `
+        <vertex-scene-tree-table-resize-divider slot="divider">
+        </vertex-scene-tree-table-resize-divider>
+      `;
+      this.hostEl.appendChild(defaultDividerTemplate);
+    }
+  }
+  createHeaderInstance(column) {
+    const template = column.querySelector('template[slot="header"]');
+    if (template != null) {
+      return generateInstanceFromTemplate(template);
+    }
+  }
+  createDividerInstance() {
+    const template = this.hostEl.querySelector('template[slot="divider"]');
+    if (template != null) {
+      return generateInstanceFromTemplate(template);
+    }
+    else {
+      throw new Error('Table is missing divider template element');
+    }
+  }
+  createColumnCellInstance(column) {
+    const template = column.querySelector('template:not([slot="header"])');
+    if (template != null) {
+      return generateInstanceFromTemplate(template);
+    }
+    else {
+      throw new Error('Column is missing cell template element');
+    }
+  }
+  addDividerDragListeners() {
+    var _a;
+    this.stateMap.headerDividerListeners =
+      (_a = this.stateMap.headerDividerInstances) === null || _a === void 0 ? void 0 : _a.map((d, i) => {
+        const listener = this.createDividerPointerDownHandler(i);
+        d.element.addEventListener('pointerdown', listener);
+        return listener;
+      });
+  }
+  removeDividerDragListeners() {
+    var _a;
+    if (this.stateMap.headerDividerListeners != null) {
+      const listeners = this.stateMap.headerDividerListeners;
+      (_a = this.stateMap.headerDividerInstances) === null || _a === void 0 ? void 0 : _a.forEach((d, i) => {
+        const listener = listeners[i];
+        if (listener != null) {
+          d.element.removeEventListener('pointerdown', listener);
+        }
+      });
+      this.stateMap.headerDividerListeners = undefined;
+    }
+  }
+  getViewportRows(startIndex, endIndex) {
+    const rows = this.rows.slice(startIndex, endIndex + 1);
+    return rows.map((row) => (row != null ? this.populateRowData(row) : row));
+  }
+  populateRowData(row) {
+    var _a;
+    if (this.rowData != null && row != null) {
+      const data = ((_a = this.rowData) === null || _a === void 0 ? void 0 : _a.call(this, row)) || {};
+      return Object.assign(Object.assign({}, row), { data });
+    }
+    else {
+      return row;
+    }
+  }
+  getLayoutHeight() {
+    if (this.layoutHeight == null && this.tableElement != null) {
+      this.layoutHeight = getSceneTreeViewportHeight(this.tableElement);
+    }
+    return this.layoutHeight;
+  }
+  getLayoutWidth() {
+    if (this.layoutWidth == null) {
+      const computedWidth = getSceneTreeTableViewportWidth(this.hostEl);
+      if (computedWidth > 0) {
+        this.layoutWidth = computedWidth;
+      }
+    }
+    return this.layoutWidth;
+  }
+  clearLayoutHeight() {
+    this.layoutHeight = undefined;
+  }
+  clearLayoutWidth() {
+    this.layoutWidth = undefined;
+  }
+  get hostEl() { return this; }
+  static get watchers() { return {
+    "rows": ["handleViewportRowsPropsChanged"],
+    "totalRows": ["handleViewportRowsPropsChanged"],
+    "rowHeight": ["handleViewportRowsPropsChanged"]
+  }; }
+  static get style() { return sceneTreeTableLayoutCss; }
+}, [1, "vertex-scene-tree-table-layout", {
+    "tree": [16],
+    "controller": [16],
+    "rows": [16],
+    "totalRows": [2, "total-rows"],
+    "rowHeight": [1026, "row-height"],
+    "overScanCount": [2, "over-scan-count"],
+    "rowData": [16],
+    "layoutOffset": [1026, "layout-offset"],
+    "scrollOffset": [1026, "scroll-offset"],
+    "layoutHeight": [1026, "layout-height"],
+    "layoutWidth": [1026, "layout-width"],
+    "viewportStartIndex": [1026, "viewport-start-index"],
+    "viewportEndIndex": [1026, "viewport-end-index"],
+    "columnGridLayout": [32],
+    "columnGridFixedLayout": [32],
+    "isComputingCellHeight": [32],
+    "lastDividerPointerPosition": [32],
+    "resizingColumnIndex": [32],
+    "isScrolling": [32],
+    "scrollTimer": [32],
+    "stateMap": [32],
+    "scrollToPosition": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-scene-tree-table-layout"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-scene-tree-table-layout":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SceneTreeTableLayout);
+      }
+      break;
+  } });
+}
+
+export { SceneTreeTableLayout as S, defineCustomElement as d, getSceneTreeContainsElement as g };
+
+//# sourceMappingURL=scene-tree-table-layout.js.map