@vertexvis/viewer 0.13.2-canary.9 → 0.14.0

package/dist/cjs/utils-78928e4e.js

@@ -0,0 +1,162 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+'use strict';
+
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+const utils = require('./utils-b157b0af.js');
+
+function getBoundingBox2dAnchorPosition(rect, position) {
+  switch (position) {
+    case 'top-left':
+      return bundle_esm.point.create(rect.x, rect.y);
+    case 'top':
+      return bundle_esm.point.create(rect.x + rect.width / 2, rect.y);
+    case 'top-right':
+      return bundle_esm.point.create(rect.x + rect.width, rect.y);
+    case 'right':
+      return bundle_esm.point.create(rect.x + rect.width, rect.y + rect.height / 2);
+    case 'bottom-right':
+      return bundle_esm.point.create(rect.x + rect.width, rect.y + rect.height);
+    case 'bottom':
+      return bundle_esm.point.create(rect.x + rect.width / 2, rect.y + rect.height);
+    case 'bottom-left':
+      return bundle_esm.point.create(rect.x, rect.y + rect.height);
+    case 'left':
+      return bundle_esm.point.create(rect.x, rect.y + rect.height / 2);
+    case 'center':
+      return bundle_esm.rectangle.center(rect);
+  }
+}
+/**
+ * Returns the scale factor to convert screen coordinates to canvas coordinates.
+ *
+ * Scale factor is determined by taking the shortest side of the given
+ * dimension. This behavior ensures that relative units are consistent in
+ * non-square aspect ratios.
+ *
+ * @see toRelativeScaleFactor
+ */
+function toScreenScaleFactor(dimensions) {
+  return Math.min(dimensions.width, dimensions.height);
+}
+/**
+ * Returns the scale factor to convert canvas coordinates to screen coordinates.
+ *
+ * Scale factor is determined by taking the shortest side of the given
+ * dimension. This behavior ensures that relative units are consistent in
+ * non-square aspect ratios.
+ *
+ * @see toScreenScaleFactor
+ */
+function toRelativeScaleFactor(dimensions) {
+  return 1 / toScreenScaleFactor(dimensions);
+}
+function translatePointToScreen(pt, canvasDimensions) {
+  const scaleFactor = toScreenScaleFactor(canvasDimensions);
+  return bundle_esm.point.add(bundle_esm.point.scale(pt, scaleFactor, scaleFactor), bundle_esm.dimensions.center(canvasDimensions));
+}
+function translateDimensionsToScreen(dimensions, canvasDimensions) {
+  const scaleFactor = toScreenScaleFactor(canvasDimensions);
+  return bundle_esm.dimensions.scale(scaleFactor, scaleFactor, dimensions);
+}
+/**
+ * Translates a rectangle in relative units, to a rectangle in screen units.
+ *
+ * Shape coordinates are persisted in relative units, so they can be presented
+ * at any size.
+ */
+function translateRectToScreen(rect, canvasDimensions) {
+  const position = translatePointToScreen(rect, canvasDimensions);
+  const dimensions = translateDimensionsToScreen(rect, canvasDimensions);
+  return bundle_esm.rectangle.fromPointAndDimensions(position, dimensions);
+}
+/**
+ * Translates a point in screen units, to a point in relative units.
+ */
+function translatePointToRelative(pt, canvasDimensions) {
+  const scaleFactor = toRelativeScaleFactor(canvasDimensions);
+  const point = bundle_esm.point.scale(bundle_esm.point.subtract(pt, bundle_esm.dimensions.center(canvasDimensions)), scaleFactor, scaleFactor);
+  return point;
+}
+/**
+ * Translates a set of points in relative `original` units to
+ * points in relative `bounds` units.
+ */
+function translatePointsToBounds(points, original, bounds) {
+  return points.map((pt) => bundle_esm.point.add(bundle_esm.point.scale(bundle_esm.point.subtract(pt, original), bounds.width / (original.width || 1), bounds.height / (original.height || 1)), bounds));
+}
+function createRectangle(initialPoint, currentPoint, maintainAspectRatio) {
+  const bounds = bundle_esm.rectangle.fromPoints(initialPoint, currentPoint);
+  if (maintainAspectRatio) {
+    const fitBoundsSize = Math.max(bounds.width, bounds.height);
+    const isPortrait = bounds.height > bounds.width;
+    const currentIsLeftOfInitial = currentPoint.x <= initialPoint.x;
+    const currentIsAboveInitial = currentPoint.y <= initialPoint.y;
+    const fitBoundsX = currentIsLeftOfInitial
+      ? isPortrait
+        ? initialPoint.x - fitBoundsSize
+        : currentPoint.x
+      : initialPoint.x;
+    const fitBoundsY = currentIsAboveInitial
+      ? isPortrait
+        ? currentPoint.y
+        : initialPoint.y - fitBoundsSize
+      : initialPoint.y;
+    return bundle_esm.rectangle.create(fitBoundsX, fitBoundsY, fitBoundsSize, fitBoundsSize);
+  }
+  else {
+    return bounds;
+  }
+}
+function transformRectangle(bounds, start, current, anchor, maintainAspectRatio) {
+  const delta = bundle_esm.point.subtract(current, start);
+  const { x: left, y: top, width: w, height: h } = bounds;
+  const right = left + w;
+  const bottom = top + h;
+  const topLeft = bundle_esm.point.create(left, top);
+  const bottomLeft = bundle_esm.point.create(left, bottom);
+  const topRight = bundle_esm.point.create(right, top);
+  const bottomRight = bundle_esm.point.create(right, bottom);
+  switch (anchor) {
+    case 'top-left':
+      return createRectangle(bottomRight, current, !!maintainAspectRatio);
+    case 'top':
+      return createRectangle(bottomRight, bundle_esm.point.create(left, current.y), !!maintainAspectRatio);
+    case 'top-right':
+      return createRectangle(bottomLeft, current, !!maintainAspectRatio);
+    case 'right':
+      return createRectangle(bottomLeft, bundle_esm.point.create(current.x, top), !!maintainAspectRatio);
+    case 'bottom-right':
+      return createRectangle(topLeft, current, !!maintainAspectRatio);
+    case 'bottom':
+      return createRectangle(topLeft, bundle_esm.point.create(right, current.y), !!maintainAspectRatio);
+    case 'bottom-left':
+      return createRectangle(topRight, current, !!maintainAspectRatio);
+    case 'left':
+      return createRectangle(bottomRight, bundle_esm.point.create(current.x, top), !!maintainAspectRatio);
+    case 'center':
+      return bundle_esm.rectangle.create(bounds.x + delta.x, bounds.y + delta.y, bounds.width, bounds.height);
+  }
+}
+function isVertexViewerMarkupElement(el) {
+  return (utils.isVertexViewerArrowMarkup(el) ||
+    utils.isVertexViewerCircleMarkup(el) ||
+    utils.isVertexViewerFreeformMarkup(el));
+}
+function isValidPointData(...points) {
+  return points.every((pt) => !isNaN(pt.x) && !isNaN(pt.y));
+}
+function isValidStartEvent(event) {
+  const el = event.target;
+  return isVertexViewerMarkupElement(el) && el.mode !== 'edit';
+}
+
+exports.getBoundingBox2dAnchorPosition = getBoundingBox2dAnchorPosition;
+exports.isValidPointData = isValidPointData;
+exports.isValidStartEvent = isValidStartEvent;
+exports.transformRectangle = transformRectangle;
+exports.translatePointToRelative = translatePointToRelative;
+exports.translatePointToScreen = translatePointToScreen;
+exports.translatePointsToBounds = translatePointsToBounds;
+exports.translateRectToScreen = translateRectToScreen;

package/dist/cjs/{utils-6397efca.js → utils-b157b0af.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 
 function createArrowheadPoints(start, end, arrowAngle = 60) {
   const distance = bundle_esm.point.distance(start, end);

package/dist/cjs/{utils-463cd52e.js → utils-c74b8bf0.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 
 function translateWorldLineToViewport(line, params) {
   const { camera, viewport } = params;

package/dist/cjs/vertex-scene-tree-search_3.cjs.entry.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const index$1 = require('./index-3bc6bac0.js');
-const stencil = require('./stencil-a664cd10.js');
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
+const index = require('./index-4138aa2c.js');
+const index$1 = require('./index-b9d13137.js');
+const stencil = require('./stencil-ef19638e.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 const dom = require('./dom-d162f898.js');
-require('./_commonjsHelpers-537d719a.js');
+require('./_commonjsHelpers-dcc4cf71.js');
 
 const sceneTreeSearchCss = "button{border:none;background:transparent;cursor:pointer;margin:0;padding:0}:host{--scene-tree-search-search-icon-offset:8px;--scene-tree-search-clear-button-offset:8px;--scene-tree-search-input-padding:0.5rem 32px;--scene-tree-search-input-border:none;--scene-tree-search-input-border-radius:0.25rem;--scene-tree-search-input-background:none;--scene-tree-search-focused-input-background:var(--neutral-200);--scene-tree-search-focused-input-outline:none;display:block;width:100%;font-size:0.875rem}.root{width:100%;position:relative}.input{background:var(--scene-tree-search-input-background);border:var(--scene-tree-search-input-border);border-radius:var(--scene-tree-search-input-border-radius);box-sizing:border-box;font-size:inherit;padding:var(--scene-tree-search-input-padding);outline:none;width:100%}.input.background{background:var(--scene-tree-search-focused-input-background);outline:var(--scene-tree-search-focused-input-outline)}.overlay{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.overlay-clear{display:none;right:var(--scene-tree-search-clear-button-offset)}.overlay-clear.show{display:flex}.icon{color:var(--neutral-700)}.icon-search{position:absolute;left:var(--scene-tree-search-search-icon-offset);pointer-events:none}.clear-btn{display:flex;align-items:center;justify-content:center;pointer-events:initial;cursor:pointer}.clear-btn:hover{color:var(--neutral-800)}.clear-btn:disabled{pointer-events:none;opacity:0.5}";
 
@@ -435,6 +435,7 @@ let SceneTreeTableLayout = class {
     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
@@ -482,6 +483,7 @@ let SceneTreeTableLayout = class {
       cell.tree = this.tree;
       cell.node = row.node;
       cell.hoveredNodeId = this.hoveredNodeId;
+      cell.isScrolling = this.isScrolling;
       /* eslint-enable @typescript-eslint/no-explicit-any */
       binding.bind(row);
     };
@@ -705,6 +707,11 @@ let SceneTreeTableLayout = class {
       return currentIsValid && nextIsValid;
     };
     this.handleScrollChanged = (event) => {
+      this.isScrolling = true;
+      window.clearTimeout(this.scrollTimer);
+      window.setTimeout(() => {
+        this.isScrolling = false;
+      }, 200);
       this.scrollOffset = event.target.scrollTop;
       this.computeAndUpdateViewportRows();
     };
@@ -920,7 +927,10 @@ let SceneTreeTableLayout = class {
   }
   getLayoutWidth() {
     if (this.layoutWidth == null) {
-      this.layoutWidth = getSceneTreeTableViewportWidth(this.hostEl);
+      const computedWidth = getSceneTreeTableViewportWidth(this.hostEl);
+      if (computedWidth > 0) {
+        this.layoutWidth = computedWidth;
+      }
     }
     return this.layoutWidth;
   }

package/dist/cjs/vertex-scene-tree-table-cell.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const index$1 = require('./index-3bc6bac0.js');
-require('./_commonjsHelpers-537d719a.js');
+const index = require('./index-4138aa2c.js');
+const index$1 = require('./index-b9d13137.js');
+require('./_commonjsHelpers-dcc4cf71.js');
 
-const sceneTreeTableCellCss = "button{border:none;background:transparent;cursor:pointer;margin:0;padding:0}:host{display:flex;align-items:center;box-sizing:border-box;--scene-tree-cell-background-hover:var(--blue-200);--scene-tree-cell-background-selected:var(--blue-300);--scene-tree-cell-text-positioning:left;--scene-tree-cell-padding:0.25rem 0}:host([is-hovered]){background:var(--scene-tree-cell-background-hover)}:host([is-selected]){background:var(--scene-tree-cell-background-selected)}.wrapper{display:flex;align-items:center;box-sizing:border-box;width:100%;height:100%;padding:var(--scene-tree-cell-padding)}.content{width:100%;text-align:var(--scene-tree-cell-text-positioning);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.column-spacer{width:var(--scene-tree-table-column-gap)}.expand-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}.no-shrink{flex-shrink:0}:host([is-leaf]) .expand-btn{visibility:hidden;cursor:default}.visibility-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;visibility:hidden;width:24px;height:24px}:host([is-hidden]) .visibility-btn,:host([is-partial]) .visibility-btn,:host([is-hovered]) .visibility-btn{visibility:inherit}.icon{width:14px;height:14px}.icon-expanded{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='icon' %3E%3Cpath fill='%23444444' d='M11.88,9.17l-3.5-4a.51.51,0,0,0-.76,0l-3.5,4A.5.5,0,0,0,4.5,10h7a.5.5,0,0,0,.38-.83Z' transform='rotate(180 8 8)' /%3E%3C/svg%3E\")}.icon-collapsed{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='icon' %3E%3Cpath fill='%23444444' d='M10.83,7.62l-4-3.5A.5.5,0,0,0,6,4.5v7a.5.5,0,0,0,.83.38l4-3.5a.51.51,0,0,0,0-.76Z' /%3E%3C/svg%3E\")}.icon-visible{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='icon' %3E%3Cpath fill='%23444444' d='M8 5a3 3 0 103 3 3 3 0 00-3-3zm4.65-1.17A8.53 8.53 0 008 2.5a8.53 8.53 0 00-4.65 1.33A6.57 6.57 0 00.51 7.89v.22a6.57 6.57 0 002.84 4.06A8.53 8.53 0 008 13.5a8.53 8.53 0 004.65-1.33 6.57 6.57 0 002.84-4.06v-.22a6.57 6.57 0 00-2.84-4.06zm-.55 7.5A7.52 7.52 0 018 12.5a7.52 7.52 0 01-4.1-1.17A5.49 5.49 0 011.53 8 5.49 5.49 0 013.9 4.67 7.52 7.52 0 018 3.5a7.52 7.52 0 014.1 1.17A5.49 5.49 0 0114.47 8a5.49 5.49 0 01-2.37 3.33z' /%3E%3C/svg%3E\")}.icon-hidden{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='icon' %3E%3Cpath fill='%23444444' d='M13.35 2.65a.48.48 0 00-.7 0l-.78.77a8.71 8.71 0 00-8.52.41A6.57 6.57 0 00.51 7.89v.22a6.58 6.58 0 002.71 4l-.57.58a.49.49 0 00.7.7l10-10a.48.48 0 000-.74zM9.73 5.56a3 3 0 00-4.17 4.17l-1.62 1.62A5.49 5.49 0 011.53 8 5.49 5.49 0 013.9 4.67 7.52 7.52 0 018 3.5a7.67 7.67 0 013.12.67zm3.61-1.2l-.72.72A5.45 5.45 0 0114.47 8a5.49 5.49 0 01-2.37 3.33A7.52 7.52 0 018 12.5a8.15 8.15 0 01-2.41-.38l-.78.78a8.9 8.9 0 003.19.6 8.53 8.53 0 004.65-1.33 6.57 6.57 0 002.84-4.06v-.22a6.56 6.56 0 00-2.15-3.53z' /%3E%3C/svg%3E%0A\")}.icon-partial{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4.12 11.46A5.62 5.62 0 011.52 8 5.57 5.57 0 013.9 4.67 7.52 7.52 0 018 3.5a7.7 7.7 0 013.33.75l.74-.74A8.67 8.67 0 008 2.5a8.53 8.53 0 00-4.65 1.33A6.57 6.57 0 00.51 7.89v.22a6.54 6.54 0 002.88 4.08z' fill='%23444'/%3E%3Cpath d='M8 5a3 3 0 00-3 3 3 3 0 00.69 1.89l4.2-4.2A3 3 0 008 5zM5.88 5.88zM9.2 12.41a.51.51 0 00-.42.57.5.5 0 00.56.42.5.5 0 00.43-.57.51.51 0 00-.57-.42zM6.77 12.41a.5.5 0 00-.57.42.49.49 0 00.41.57.5.5 0 10.15-1zM14.48 5.61a.5.5 0 00-.7-.12.49.49 0 00-.12.69.5.5 0 00.82-.57zM11.5 11.68a.5.5 0 00-.22.67.51.51 0 00.68.22.5.5 0 00-.46-.89zM15.07 7.77a.52.52 0 00-.62.35.51.51 0 00.35.62.5.5 0 00.61-.35.52.52 0 00-.34-.62zM13.36 10.21a.5.5 0 10.76.64.49.49 0 00-.06-.7.51.51 0 00-.7.06z' fill='%23444'/%3E%3C/svg%3E\")}";
+const sceneTreeTableCellCss = "button{border:none;background:transparent;cursor:pointer;margin:0;padding:0}:host{display:flex;align-items:center;box-sizing:border-box;--scene-tree-cell-background-hover:var(--blue-200);--scene-tree-cell-background-selected:var(--blue-300);--scene-tree-cell-text-positioning:left;--scene-tree-cell-padding:0.25rem 0}:host([is-hovered]){background:var(--scene-tree-cell-background-hover)}:host([is-selected]){background:var(--scene-tree-cell-background-selected)}.wrapper{display:flex;align-items:center;box-sizing:border-box;width:100%;height:100%;padding:var(--scene-tree-cell-padding)}.content{width:100%;text-align:var(--scene-tree-cell-text-positioning);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.column-spacer{width:var(--scene-tree-table-column-gap)}.expand-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}.no-shrink{flex-shrink:0}:host([is-leaf]) .expand-btn{visibility:hidden;cursor:default}.visibility-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.icon{width:14px;height:14px}.icon-expanded{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='icon' %3E%3Cpath fill='%23444444' d='M11.88,9.17l-3.5-4a.51.51,0,0,0-.76,0l-3.5,4A.5.5,0,0,0,4.5,10h7a.5.5,0,0,0,.38-.83Z' transform='rotate(180 8 8)' /%3E%3C/svg%3E\")}.icon-collapsed{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='icon' %3E%3Cpath fill='%23444444' d='M10.83,7.62l-4-3.5A.5.5,0,0,0,6,4.5v7a.5.5,0,0,0,.83.38l4-3.5a.51.51,0,0,0,0-.76Z' /%3E%3C/svg%3E\")}.icon-visible{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='icon' %3E%3Cpath fill='%23444444' d='M8 5a3 3 0 103 3 3 3 0 00-3-3zm4.65-1.17A8.53 8.53 0 008 2.5a8.53 8.53 0 00-4.65 1.33A6.57 6.57 0 00.51 7.89v.22a6.57 6.57 0 002.84 4.06A8.53 8.53 0 008 13.5a8.53 8.53 0 004.65-1.33 6.57 6.57 0 002.84-4.06v-.22a6.57 6.57 0 00-2.84-4.06zm-.55 7.5A7.52 7.52 0 018 12.5a7.52 7.52 0 01-4.1-1.17A5.49 5.49 0 011.53 8 5.49 5.49 0 013.9 4.67 7.52 7.52 0 018 3.5a7.52 7.52 0 014.1 1.17A5.49 5.49 0 0114.47 8a5.49 5.49 0 01-2.37 3.33z' /%3E%3C/svg%3E\")}.icon-hidden{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='icon' %3E%3Cpath fill='%23444444' d='M13.35 2.65a.48.48 0 00-.7 0l-.78.77a8.71 8.71 0 00-8.52.41A6.57 6.57 0 00.51 7.89v.22a6.58 6.58 0 002.71 4l-.57.58a.49.49 0 00.7.7l10-10a.48.48 0 000-.74zM9.73 5.56a3 3 0 00-4.17 4.17l-1.62 1.62A5.49 5.49 0 011.53 8 5.49 5.49 0 013.9 4.67 7.52 7.52 0 018 3.5a7.67 7.67 0 013.12.67zm3.61-1.2l-.72.72A5.45 5.45 0 0114.47 8a5.49 5.49 0 01-2.37 3.33A7.52 7.52 0 018 12.5a8.15 8.15 0 01-2.41-.38l-.78.78a8.9 8.9 0 003.19.6 8.53 8.53 0 004.65-1.33 6.57 6.57 0 002.84-4.06v-.22a6.56 6.56 0 00-2.15-3.53z' /%3E%3C/svg%3E%0A\")}.icon-partial{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4.12 11.46A5.62 5.62 0 011.52 8 5.57 5.57 0 013.9 4.67 7.52 7.52 0 018 3.5a7.7 7.7 0 013.33.75l.74-.74A8.67 8.67 0 008 2.5a8.53 8.53 0 00-4.65 1.33A6.57 6.57 0 00.51 7.89v.22a6.54 6.54 0 002.88 4.08z' fill='%23444'/%3E%3Cpath d='M8 5a3 3 0 00-3 3 3 3 0 00.69 1.89l4.2-4.2A3 3 0 008 5zM5.88 5.88zM9.2 12.41a.51.51 0 00-.42.57.5.5 0 00.56.42.5.5 0 00.43-.57.51.51 0 00-.57-.42zM6.77 12.41a.5.5 0 00-.57.42.49.49 0 00.41.57.5.5 0 10.15-1zM14.48 5.61a.5.5 0 00-.7-.12.49.49 0 00-.12.69.5.5 0 00.82-.57zM11.5 11.68a.5.5 0 00-.22.67.51.51 0 00.68.22.5.5 0 00-.46-.89zM15.07 7.77a.52.52 0 00-.62.35.51.51 0 00.35.62.5.5 0 00.61-.35.52.52 0 00-.34-.62zM13.36 10.21a.5.5 0 10.76.64.49.49 0 00-.06-.7.51.51 0 00-.7.06z' fill='%23444'/%3E%3C/svg%3E\")}";
 
 let SceneTreeTableCell = class {
   constructor(hostRef) {
@@ -42,11 +42,12 @@ let SceneTreeTableCell = class {
         : this.value;
       return resp;
     };
-    this.handleCellPointerDown = (event) => {
+    this.handleCellPointerUp = (event) => {
       var _a, _b, _c, _d, _e, _f;
       if (!event.defaultPrevented &&
         event.button === 0 &&
-        !this.interactionsDisabled) {
+        !this.interactionsDisabled &&
+        !this.isScrolling) {
         if ((event.ctrlKey || event.metaKey) && ((_a = this.node) === null || _a === void 0 ? void 0 : _a.selected)) {
           (_b = this.tree) === null || _b === void 0 ? void 0 : _b.deselectItem(this.node);
         }
@@ -87,7 +88,7 @@ let SceneTreeTableCell = class {
     this.toggleAttribute('is-filter-hit', !!((_g = this.node) === null || _g === void 0 ? void 0 : _g.filterHit));
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     return (index.h(index.Host, { onPointerEnter: (e) => {
         this.hovered.emit({
           node: this.node,
@@ -95,21 +96,22 @@ let SceneTreeTableCell = class {
         });
       }, onPointerLeave: () => {
         this.hovered.emit(undefined);
-      }, onPointerDown: this.handleCellPointerDown }, index.h("div", { class: "wrapper" }, index.h("div", { class: "no-shrink" }, index.h("slot", { name: "left-gutter" })), this.expandToggle && (index.h("button", { class: "expand-btn no-shrink", "data-test-id": 'expand-' + ((_a = this.node) === null || _a === void 0 ? void 0 : _a.name), onPointerDown: (event) => {
+      }, onPointerUp: this.handleCellPointerUp }, index.h("div", { class: "wrapper" }, index.h("div", { class: "no-shrink" }, index.h("slot", { name: "left-gutter" })), this.expandToggle && (index.h("button", { class: "expand-btn no-shrink", "data-test-id": 'expand-' + ((_a = this.node) === null || _a === void 0 ? void 0 : _a.name), onPointerUp: (event) => {
         event.preventDefault();
         this.toggleExpansion(event);
       } }, !((_b = this.node) === null || _b === void 0 ? void 0 : _b.isLeaf) && (index.h("div", { class: index$1.classnames('icon', {
         'icon-expanded': !((_c = this.node) === null || _c === void 0 ? void 0 : _c.isLeaf) && ((_d = this.node) === null || _d === void 0 ? void 0 : _d.expanded),
         'icon-collapsed': !((_e = this.node) === null || _e === void 0 ? void 0 : _e.isLeaf) && !((_f = this.node) === null || _f === void 0 ? void 0 : _f.expanded),
-      }) })))), index.h("div", { class: "content" }, this.value != null && this.value.trim() !== '' ? (index.h("slot", null, this.displayValue())) : (index.h("slot", { name: "placeholder" }, this.placeholder))), index.h("button", { class: "visibility-btn no-shrink", "data-test-id": 'visibility-btn-' + ((_g = this.node) === null || _g === void 0 ? void 0 : _g.name), onPointerDown: (event) => {
-        console.log('touching the visibility toggle');
+      }) })))), index.h("div", { class: "content" }, this.value != null && this.value.trim() !== '' ? (index.h("slot", null, this.displayValue())) : (index.h("slot", { name: "placeholder" }, this.placeholder))), this.visibilityToggle && (index.h("button", { class: "visibility-btn no-shrink", "data-test-id": 'visibility-btn-' + ((_g = this.node) === null || _g === void 0 ? void 0 : _g.name), onPointerUp: (event) => {
         event === null || event === void 0 ? void 0 : event.preventDefault();
         this.toggleVisibility(event);
       } }, index.h("div", { class: index$1.classnames('icon', {
-        'icon-visible': !((_h = this.node) === null || _h === void 0 ? void 0 : _h.partiallyVisible) && ((_j = this.node) === null || _j === void 0 ? void 0 : _j.visible),
-        'icon-hidden': !((_k = this.node) === null || _k === void 0 ? void 0 : _k.partiallyVisible) && !((_l = this.node) === null || _l === void 0 ? void 0 : _l.visible),
-        'icon-partial': (_m = this.node) === null || _m === void 0 ? void 0 : _m.partiallyVisible,
-      }) })), index.h("div", { class: "no-shrink" }, index.h("slot", { name: "right-gutter" })), !this.visibilityToggle && index.h("div", { class: "column-spacer" }))));
+        'icon-visible': this.hoveredNodeId === ((_j = (_h = this.node) === null || _h === void 0 ? void 0 : _h.id) === null || _j === void 0 ? void 0 : _j.hex) &&
+          !((_k = this.node) === null || _k === void 0 ? void 0 : _k.partiallyVisible) &&
+          ((_l = this.node) === null || _l === void 0 ? void 0 : _l.visible),
+        'icon-hidden': !((_m = this.node) === null || _m === void 0 ? void 0 : _m.partiallyVisible) && !((_o = this.node) === null || _o === void 0 ? void 0 : _o.visible),
+        'icon-partial': (_p = this.node) === null || _p === void 0 ? void 0 : _p.partiallyVisible,
+      }) }))), index.h("div", { class: "no-shrink" }, index.h("slot", { name: "right-gutter" })), !this.visibilityToggle && index.h("div", { class: "column-spacer" }))));
   }
   toggleAttribute(attr, value) {
     if (value) {

package/dist/cjs/vertex-scene-tree-table-column.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
+const index = require('./index-4138aa2c.js');
 
 const sceneTreeTableColumnCss = ":host{width:100%;height:100%;position:relative}.hidden{visibility:hidden;pointer-events:none}.column{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}";
 

package/dist/cjs/vertex-scene-tree-table-header.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
+const index = require('./index-4138aa2c.js');
 
 const sceneTreeTableHeaderCss = ":host{width:100%;box-sizing:border-box}.header{display:flex;align-items:center;box-sizing:border-box;font-size:0.875rem;white-space:nowrap;overflow:hidden;padding:0.5rem 0}";
 

package/dist/cjs/vertex-scene-tree-table-resize-divider.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const index$1 = require('./index-3bc6bac0.js');
-require('./_commonjsHelpers-537d719a.js');
+const index = require('./index-4138aa2c.js');
+const index$1 = require('./index-b9d13137.js');
+require('./_commonjsHelpers-dcc4cf71.js');
 
 const sceneTreeTableResizeDividerCss = ":host{pointer-events:auto;display:flex;align-items:center;box-sizing:border-box;cursor:col-resize}.divider{width:1px;height:100%;background-color:var(--neutral-600);cursor:col-resize}.divider.dragging{background-color:var(--blue-600)}:host:hover .divider{background-color:var(--blue-600)}";
 

package/dist/cjs/vertex-scene-tree-toolbar-group.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
+const index = require('./index-4138aa2c.js');
 
 const sceneTreeToolbarGroupCss = ":host{--scene-tree-toolbar-group-item-gap:calc(\n    var(--scene-tree-toolbar-content-gap) / 2\n  );display:flex}::slotted(:not(:first-child)){margin-left:var(--scene-tree-toolbar-group-item-gap)}";