@vertexvis/viewer 0.18.2-testing.0 → 0.18.2-testing.1

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

@@ -1,928 +0,0 @@
-/*!
- * 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