@ni/nimble-components 22.1.1 → 23.0.1

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 20 Mar 2024 16:28:54 GMT
+   * Generated on Mon, 25 Mar 2024 16:47:43 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16334,6 +16334,8 @@
   const ControlLabel1Weight = "600";
   const BodyFamily = "Source Sans Pro";
   const BodyWeight = "400";
+  const Body2Family = "Source Sans Pro";
+  const Body2Weight = "400";
   const GroupLabel1Family = "Source Sans Pro";
   const GroupLabel1Weight = "600";
   const ButtonLabel1Family = "Source Sans Pro";
@@ -16367,6 +16369,7 @@
   const Title2Size = "22px";
   const ControlLabel1Size = "11px";
   const BodySize = "14px";
+  const Body2Size = "16px";
   const GroupLabel1Size = "11px";
   const ButtonLabel1Size = "12.800000190734863px";
   const Title1Size = "19px";
@@ -16383,6 +16386,7 @@
   const ErrorLightUiSize = "11px";
   const GridHeaderSize = "12.800000190734863px";
   const BodyLineHeight = "18px";
+  const Body2LineHeight = "16px";
   const ControlLabel1LineHeight = "16px";
   const GroupLabel1LineHeight = "16px";
   const Headline2LineHeight = "40px";
@@ -16595,22 +16599,6 @@
       placeholderFontWeight: 'placeholder-font-weight',
       placeholderFontLineHeight: 'placeholder-font-line-height',
       placeholderFallbackFontFamily: 'placeholder-fallback-font-family',
-      bodyEmphasizedFont: 'body-emphasized-font',
-      bodyEmphasizedFontColor: 'body-emphasized-font-color',
-      bodyEmphasizedDisabledFontColor: 'body-emphasized-disabled-font-color',
-      bodyEmphasizedFontFamily: 'body-emphasized-font-family',
-      bodyEmphasizedFontSize: 'body-emphasized-font-size',
-      bodyEmphasizedFontWeight: 'body-emphasized-font-weight',
-      bodyEmphasizedFontLineHeight: 'body-emphasized-font-line-height',
-      bodyEmphasizedFallbackFontFamily: 'body-emphasized-fallback-font-family',
-      bodyEmphasizedPlus1Font: 'body-emphasized-plus-1-font',
-      bodyEmphasizedPlus1FontColor: 'body-emphasized-plus-1-font-color',
-      bodyEmphasizedPlus1DisabledFontColor: 'body-emphasized-plus-1-disabled-font-color',
-      bodyEmphasizedPlus1FontFamily: 'body-emphasized-plus-1-font-family',
-      bodyEmphasizedPlus1FontSize: 'body-emphasized-plus-1-font-size',
-      bodyEmphasizedPlus1FontWeight: 'body-emphasized-plus-1-font-weight',
-      bodyEmphasizedPlus1FontLineHeight: 'body-emphasized-plus-1-font-line-height',
-      bodyEmphasizedPlus1FallbackFontFamily: 'body-emphasized-plus-1-fallback-font-family',
       bodyFont: 'body-font',
       bodyFontColor: 'body-font-color',
       bodyDisabledFontColor: 'body-disabled-font-color',
@@ -16619,6 +16607,30 @@
       bodyFontWeight: 'body-font-weight',
       bodyFontLineHeight: 'body-font-line-height',
       bodyFallbackFontFamily: 'body-fallback-font-family',
+      bodyEmphasizedFont: 'body-emphasized-font',
+      bodyEmphasizedFontColor: 'body-emphasized-font-color',
+      bodyEmphasizedDisabledFontColor: 'body-emphasized-disabled-font-color',
+      bodyEmphasizedFontFamily: 'body-emphasized-font-family',
+      bodyEmphasizedFontSize: 'body-emphasized-font-size',
+      bodyEmphasizedFontWeight: 'body-emphasized-font-weight',
+      bodyEmphasizedFontLineHeight: 'body-emphasized-font-line-height',
+      bodyEmphasizedFallbackFontFamily: 'body-emphasized-fallback-font-family',
+      bodyPlus1Font: 'body-plus-1-font',
+      bodyPlus1FontColor: 'body-plus-1-font-color',
+      bodyPlus1DisabledFontColor: 'body-plus-1-disabled-font-color',
+      bodyPlus1FontFamily: 'body-plus-1-font-family',
+      bodyPlus1FontSize: 'body-plus-1-font-size',
+      bodyPlus1FontWeight: 'body-plus-1-font-weight',
+      bodyPlus1FontLineHeight: 'body-plus-1-font-line-height',
+      bodyPlus1FallbackFontFamily: 'body-plus-1-fallback-font-family',
+      bodyPlus1EmphasizedFont: 'body-plus-1-emphasized-font',
+      bodyPlus1EmphasizedFontColor: 'body-plus-1-emphasized-font-color',
+      bodyPlus1EmphasizedDisabledFontColor: 'body-plus-1-emphasized-disabled-font-color',
+      bodyPlus1EmphasizedFontFamily: 'body-plus-1-emphasized-font-family',
+      bodyPlus1EmphasizedFontSize: 'body-plus-1-emphasized-font-size',
+      bodyPlus1EmphasizedFontWeight: 'body-plus-1-emphasized-font-weight',
+      bodyPlus1EmphasizedFontLineHeight: 'body-plus-1-emphasized-font-line-height',
+      bodyPlus1EmphasizedFallbackFontFamily: 'body-plus-1-emphasized-fallback-font-family',
       groupHeaderFont: 'group-header-font',
       groupHeaderFontColor: 'group-header-font-color',
       groupHeaderDisabledFontColor: 'group-header-disabled-font-color',
@@ -16854,6 +16866,7 @@
   const LinkFallbackFontFamily = 'Source Sans Pro Fallback';
   const PlaceholderFallbackFontFamily = 'Source Sans Pro Fallback';
   const BodyFallbackFontFamily = 'Source Sans Pro Fallback';
+  const Body2FallbackFontFamily = 'Source Sans Pro Fallback';
   const BodyEmphasizedFallbackFontFamily = 'Source Sans Pro Fallback';
   const BodyEmphasized2FallbackFontFamily = 'Source Sans Pro Fallback';
   const GroupLabel1FallbackFontFamily = 'Source Sans Pro Fallback';
@@ -16937,9 +16950,10 @@
   const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
   const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
   const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, PlaceholderFallbackFontFamily);
-  const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, BodyEmphasizedFallbackFontFamily);
-  createFontTokens(tokenNames.bodyEmphasizedPlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasized2Family, BodyEmphasized2Weight, BodyEmphasized2Size, BodyEmphasized2LineHeight, BodyEmphasized2FallbackFontFamily);
   const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight, bodyFallbackFontFamily] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight, BodyFallbackFontFamily);
+  const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, BodyEmphasizedFallbackFontFamily);
+  createFontTokens(tokenNames.bodyPlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Body2Family, Body2Weight, Body2Size, Body2LineHeight, Body2FallbackFontFamily);
+  createFontTokens(tokenNames.bodyPlus1EmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasized2Family, BodyEmphasized2Weight, BodyEmphasized2Size, BodyEmphasized2LineHeight, BodyEmphasized2FallbackFontFamily);
   const [groupHeaderFont, groupHeaderFontColor, groupHeaderDisabledFontColor, groupHeaderFontFamily, groupHeaderFontWeight, groupHeaderFontSize, groupHeaderFontLineHeight, groupHeaderFallbackFontFamily] = createFontTokens(tokenNames.groupHeaderFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight, GroupLabel1FallbackFontFamily);
   const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight, controlLabelFallbackFontFamily] = createFontTokens(tokenNames.controlLabelFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ControlLabel1Family, ControlLabel1Weight, ControlLabel1Size, ControlLabel1LineHeight, ControlLabel1FallbackFontFamily);
   const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, buttonLabelFontFamily, buttonLabelFontWeight, buttonLabelFontSize, buttonLabelFontLineHeight, buttonLabelFallbackFontFamily] = createFontTokens(tokenNames.buttonLabelFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight, ButtonLabel1FallbackFontFamily);
@@ -73574,12 +73588,7 @@ img.ProseMirror-separator {
 
   var identity$2 = new Transform(1, 0, 0);
 
-  transform.prototype = Transform.prototype;
-
-  function transform(node) {
-    while (!node.__zoom) if (!(node = node.parentNode)) return identity$2;
-    return node.__zoom;
-  }
+  Transform.prototype;
 
   function nopropagation(event) {
     event.stopImmediatePropagation();
@@ -75298,16 +75307,15 @@ img.ProseMirror-separator {
       get diesRenderInfo() {
           return this._diesRenderInfo;
       }
-      constructor(wafermap, dataManager) {
+      constructor(wafermap) {
           this.wafermap = wafermap;
-          this.dataManager = dataManager;
           this.fontSizeFactor = 0.8;
           this.nonHighlightedOpacity = 0.3;
           this.emptyDieColor = 'rgba(218,223,236,1)';
           this.nanDieColor = 'rgba(122,122,122,1)';
       }
       updateLabelsFontSize() {
-          this._labelsFontSize = this.calculateLabelsFontSize(this.dataManager.dieDimensions, this.wafermap.maxCharacters);
+          this._labelsFontSize = this.calculateLabelsFontSize(this.wafermap.dataManager.dieDimensions, this.wafermap.maxCharacters);
           this.updateDiesRenderInfo();
       }
       updateDiesRenderInfo() {
@@ -75318,9 +75326,9 @@ img.ProseMirror-separator {
               .filter(isDieRenderInfo);
       }
       computeDieRenderInfo(die) {
-          const margin = this.dataManager.margin;
-          const scaledX = this.dataManager.horizontalScale(die.x);
-          const scaledY = this.dataManager.verticalScale(die.y);
+          const margin = this.wafermap.dataManager.margin;
+          const scaledX = this.wafermap.dataManager.horizontalScale(die.x);
+          const scaledY = this.wafermap.dataManager.verticalScale(die.y);
           if (scaledX === undefined || scaledY === undefined) {
               return null;
           }
@@ -75439,7 +75447,7 @@ img.ProseMirror-separator {
       constructor(wafermap) {
           this.wafermap = wafermap;
           this.computations = new Computations(wafermap);
-          this.prerendering = new Prerendering(wafermap, this);
+          this.prerendering = new Prerendering(wafermap);
       }
       updateContainerDimensions() {
           this.computations.updateContainerDimensions();
@@ -75588,147 +75596,6 @@ img.ProseMirror-separator {
       }
   }
 
-  /**
-   * ZoomHandler deals with user interactions and events like zooming
-   */
-  class ZoomHandler {
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-          this.zoomTransform = identity$2;
-          this.minScale = 1.1;
-          this.minExtentPoint = [-100, -100];
-          this.extentPadding = 100;
-      }
-      createZoomBehavior() {
-          this.zoomBehavior = zoom()
-              .scaleExtent([
-              1.1,
-              this.getZoomMax(this.wafermap.canvasWidth * this.wafermap.canvasHeight, this.wafermap.dataManager.containerDimensions.width
-                  * this.wafermap.dataManager.containerDimensions.height)
-          ])
-              .translateExtent([
-              this.minExtentPoint,
-              [
-                  this.wafermap.canvasWidth + this.extentPadding,
-                  this.wafermap.canvasHeight + this.extentPadding
-              ]
-          ])
-              .filter((event) => {
-              const transform$1 = transform(this.wafermap.canvas);
-              const filterEval = transform$1.k >= this.minScale || event.type === 'wheel';
-              return filterEval;
-          })
-              .on('zoom', (event) => {
-              // D3 will automatically remove existing handlers when adding new ones
-              // See: https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_on
-              this.rescale(event);
-          });
-          this.zoomBehavior(select(this.wafermap.canvas));
-      }
-      rescale(event) {
-          const transform = event.transform;
-          if (transform.k === this.minScale) {
-              this.zoomTransform = identity$2;
-              this.zoomBehavior.transform(select(this.wafermap.canvas), identity$2);
-          }
-          else {
-              this.zoomTransform = transform;
-          }
-          this.wafermap.transform = this.zoomTransform;
-      }
-      getZoomMax(canvasArea, dataArea) {
-          return Math.ceil((dataArea / canvasArea) * 100);
-      }
-  }
-
-  /**
-   * HoverHandler deals with user interactions and events like hovering
-   */
-  class HoverHandler {
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-      }
-      mousemove(event) {
-          const mousePosition = {
-              x: event.offsetX,
-              y: event.offsetY
-          };
-          if (!this.hoversOverDie(this.wafermap, mousePosition)) {
-              this.wafermap.hoverDie = undefined;
-              return;
-          }
-          // get original mouse position in case we are in zoom.
-          const invertedPoint = this.wafermap.transform.invert([
-              mousePosition.x,
-              mousePosition.y
-          ]);
-          const dieCoordinates = this.calculateDieCoordinates(this.wafermap, {
-              x: invertedPoint[0],
-              y: invertedPoint[1]
-          });
-          this.wafermap.hoverDie = this.wafermap.dataManager.getWaferMapDie(dieCoordinates);
-      }
-      mouseout() {
-          this.wafermap.hoverDie = undefined;
-      }
-      calculateDieCoordinates(wafermap, mousePosition) {
-          const originLocation = wafermap.originLocation;
-          const xRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
-              || originLocation === WaferMapOriginLocation.topLeft
-              ? Math.floor
-              : Math.ceil;
-          const yRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
-              || originLocation === WaferMapOriginLocation.bottomRight
-              ? Math.floor
-              : Math.ceil;
-          // go to x and y scale to get the x,y values of the die.
-          const x = xRoundFunction(wafermap.dataManager.invertedHorizontalScale(mousePosition.x - wafermap.dataManager.margin.left));
-          const y = yRoundFunction(wafermap.dataManager.invertedVerticalScale(mousePosition.y - wafermap.dataManager.margin.top));
-          return { x, y };
-      }
-      hoversOverDie(wafermap, mousePosition) {
-          const rgba = wafermap.canvasContext.getImageData(mousePosition.x, mousePosition.y, 1, 1).data;
-          let rgbaSum = 0;
-          for (const color of rgba) {
-              rgbaSum += color;
-          }
-          return rgbaSum > 0;
-      }
-  }
-
-  /**
-   * EventCoordinator deals with user interactions and events
-   */
-  class EventCoordinator {
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-          this.onWheelMove = (event) => {
-              event.preventDefault();
-          };
-          this.onMouseMove = (event) => {
-              this.hoverHandler.mousemove(event);
-          };
-          this.onMouseOut = () => {
-              this.hoverHandler.mouseout();
-          };
-          this.zoomHandler = new ZoomHandler(wafermap);
-          this.hoverHandler = new HoverHandler(wafermap);
-      }
-      attachEvents() {
-          this.zoomHandler.createZoomBehavior();
-          this.wafermap.addEventListener('mousemove', this.onMouseMove);
-          this.wafermap.addEventListener('mouseout', this.onMouseOut);
-          this.wafermap.canvas.addEventListener('wheel', this.onWheelMove, {
-              passive: false
-          });
-      }
-      detachEvents() {
-          this.wafermap.removeEventListener('mousemove', this.onMouseMove);
-          this.wafermap.removeEventListener('mouseout', this.onMouseOut);
-          this.wafermap.canvas.removeEventListener('wheel', this.onWheelMove);
-      }
-  }
-
   const trackedItems = [
       'highlightedTags',
       'canvasWidth',
@@ -76434,10 +76301,10 @@ img.ProseMirror-separator {
       }
       validateGridDimensions() {
           this.invalidGridDimensions = false;
-          if (typeof this.wafermap.gridMinX === 'undefined'
-              && typeof this.wafermap.gridMaxX === 'undefined'
-              && typeof this.wafermap.gridMinY === 'undefined'
-              && typeof this.wafermap.gridMaxY === 'undefined') {
+          if (this.wafermap.gridMinX === undefined
+              && this.wafermap.gridMaxX === undefined
+              && this.wafermap.gridMinY === undefined
+              && this.wafermap.gridMaxY === undefined) {
               this.invalidGridDimensions = false;
           }
           else if (typeof this.wafermap.gridMinX !== 'number'
@@ -76456,25 +76323,19 @@ img.ProseMirror-separator {
               this.invalidDiesTableSchema = false;
           }
           else {
-              const colIndexField = this.wafermap.diesTable.schema.fields.findIndex(f => f.name === 'colIndex');
-              const rowIndexField = this.wafermap.diesTable.schema.fields.findIndex(f => f.name === 'rowIndex');
-              const valueField = this.wafermap.diesTable.schema.fields.findIndex(f => f.name === 'value');
-              if (this.wafermap.diesTable.numCols < 3
-                  || colIndexField === -1
-                  || rowIndexField === -1
-                  || valueField === -1
-                  || !DataType.isInt(this.wafermap.diesTable.schema.fields[colIndexField].type)
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                  || this.wafermap.diesTable.schema.fields[colIndexField].type
-                      .bitWidth !== 32
-                  || !DataType.isInt(this.wafermap.diesTable.schema.fields[rowIndexField].type)
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                  || this.wafermap.diesTable.schema.fields[rowIndexField].type
-                      .bitWidth !== 32
-                  || !DataType.isFloat(this.wafermap.diesTable.schema.fields[valueField].type)
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                  || this.wafermap.diesTable.schema.fields[valueField].type
-                      .precision !== Precision.DOUBLE) {
+              const fields = this.wafermap.diesTable.schema.fields;
+              const colField = fields.find(field => field.name === 'colIndex');
+              const rowField = fields.find(field => field.name === 'rowIndex');
+              const valueField = fields.find(field => field.name === 'value');
+              if (!colField
+                  || !rowField
+                  || !valueField
+                  || !DataType.isInt(colField.type)
+                  || colField.type.bitWidth !== 32
+                  || !DataType.isInt(rowField.type)
+                  || rowField.type.bitWidth !== 32
+                  || !DataType.isFloat(valueField.type)
+                  || valueField.type.precision !== Precision.DOUBLE) {
                   this.invalidDiesTableSchema = true;
               }
           }
@@ -76527,6 +76388,200 @@ img.ProseMirror-separator {
       }
   }
 
+  /**
+   * HoverHandler deals with user interactions and events like hovering
+   */
+  let HoverHandler$1 = class HoverHandler {
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          this.onMouseMove = (event) => {
+              if (this.wafermap.isExperimentalRenderer()) {
+                  return;
+              }
+              const mousePosition = {
+                  x: event.offsetX,
+                  y: event.offsetY
+              };
+              if (!this.hoversOverDie(mousePosition)) {
+                  this.wafermap.hoverDie = undefined;
+                  return;
+              }
+              // get original mouse position in case we are in zoom.
+              const invertedPoint = this.wafermap.transform.invert([
+                  mousePosition.x,
+                  mousePosition.y
+              ]);
+              const dieCoordinates = this.calculateDieCoordinates({
+                  x: invertedPoint[0],
+                  y: invertedPoint[1]
+              });
+              this.wafermap.hoverDie = this.wafermap.dataManager.getWaferMapDie(dieCoordinates);
+          };
+          this.onMouseOut = (_event) => {
+              this.wafermap.hoverDie = undefined;
+          };
+      }
+      /**
+       * @internal
+       */
+      connect() {
+          this.wafermap.addEventListener('mousemove', this.onMouseMove);
+          this.wafermap.addEventListener('mouseout', this.onMouseOut);
+      }
+      /**
+       * @internal
+       */
+      disconnect() {
+          this.wafermap.removeEventListener('mousemove', this.onMouseMove);
+          this.wafermap.removeEventListener('mouseout', this.onMouseOut);
+      }
+      calculateDieCoordinates(mousePosition) {
+          const originLocation = this.wafermap.originLocation;
+          const xRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.topLeft
+              ? Math.floor
+              : Math.ceil;
+          const yRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.bottomRight
+              ? Math.floor
+              : Math.ceil;
+          // go to x and y scale to get the x,y values of the die.
+          const x = xRoundFunction(this.wafermap.dataManager.invertedHorizontalScale(mousePosition.x - this.wafermap.dataManager.margin.left));
+          const y = yRoundFunction(this.wafermap.dataManager.invertedVerticalScale(mousePosition.y - this.wafermap.dataManager.margin.top));
+          return { x, y };
+      }
+      hoversOverDie(mousePosition) {
+          const rgba = this.wafermap.canvasContext.getImageData(mousePosition.x, mousePosition.y, 1, 1).data;
+          let rgbaSum = 0;
+          for (const color of rgba) {
+              rgbaSum += color;
+          }
+          return rgbaSum > 0;
+      }
+  };
+
+  /**
+   * HoverHandler deals with user interactions and events like hovering
+   */
+  class HoverHandler {
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          /**
+           * @internal
+           * keep public for testing until data manager refactor
+           */
+          this.onMouseMove = (event) => {
+              if (!this.wafermap.isExperimentalRenderer()) {
+                  return;
+              }
+              // get original mouse position in case we are in zoom.
+              const invertedPoint = this.wafermap.transform.invert([
+                  event.offsetX,
+                  event.offsetY
+              ]);
+              // does not work yet until data manager will parse diesTable
+              const dieCoordinates = this.calculateDieCoordinates({
+                  x: invertedPoint[0],
+                  y: invertedPoint[1]
+              });
+              const colIndex = this.wafermap
+                  .diesTable.getChild('colIndex')
+                  .toArray();
+              const rowIndex = this.wafermap
+                  .diesTable.getChild('rowIndex')
+                  .toArray();
+              // will replace iterating with arquero filtering after fixing errors
+              for (let i = 0; i < colIndex.length; i++) {
+                  if (colIndex[i] === dieCoordinates.x
+                      && rowIndex[i] === dieCoordinates.y) {
+                      this.wafermap.hoverDie = {
+                          index: i,
+                          x: dieCoordinates.x,
+                          y: dieCoordinates.y
+                      };
+                      return;
+                  }
+              }
+              this.wafermap.hoverDie = undefined;
+          };
+          this.onMouseOut = (_event) => {
+              this.wafermap.hoverDie = undefined;
+          };
+      }
+      /**
+       * @internal
+       */
+      connect() {
+          this.wafermap.addEventListener('mousemove', this.onMouseMove);
+          this.wafermap.addEventListener('mouseout', this.onMouseOut);
+      }
+      /**
+       * @internal
+       */
+      disconnect() {
+          this.wafermap.removeEventListener('mousemove', this.onMouseMove);
+          this.wafermap.removeEventListener('mouseout', this.onMouseOut);
+      }
+      calculateDieCoordinates(mousePosition) {
+          const originLocation = this.wafermap.originLocation;
+          const xRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.topLeft
+              ? Math.floor
+              : Math.ceil;
+          const yRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.bottomRight
+              ? Math.floor
+              : Math.ceil;
+          // go to x and y scale to get the x,y values of the die.
+          const x = xRoundFunction(this.wafermap.dataManager.invertedHorizontalScale(mousePosition.x - this.wafermap.dataManager.margin.left));
+          const y = yRoundFunction(this.wafermap.dataManager.invertedVerticalScale(mousePosition.y - this.wafermap.dataManager.margin.top));
+          return { x, y };
+      }
+  }
+
+  /**
+   * ZoomHandler deals with user interactions and events like zooming
+   */
+  class ZoomHandler {
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          this.scaleExtent = [1, 100];
+          this.minExtentPoint = [0, 0];
+          this.onWheelMove = (event) => {
+              event.preventDefault();
+          };
+      }
+      /**
+       * @internal
+       */
+      connect() {
+          this.createZoomBehavior();
+          this.wafermap.addEventListener('wheel', this.onWheelMove, {
+              passive: false
+          });
+      }
+      /**
+       * @internal
+       */
+      disconnect() {
+          zoom().on('zoom', null)(select(this.wafermap));
+          this.wafermap.removeEventListener('wheel', this.onWheelMove);
+      }
+      createZoomBehavior() {
+          zoom()
+              .scaleExtent(this.scaleExtent)
+              .translateExtent([
+              this.minExtentPoint,
+              [this.wafermap.canvasWidth, this.wafermap.canvasHeight]
+          ])
+              .on('zoom', (event) => {
+              // D3 will automatically remove existing handlers when adding new ones
+              // See: https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_on
+              this.wafermap.transform = event.transform;
+          })(select(this.wafermap));
+      }
+  }
+
   /**
    * A nimble-styled WaferMap
    */
@@ -76537,7 +76592,7 @@ img.ProseMirror-separator {
            * @internal
            * needs to be initialized before the properties trigger changes
            */
-          this.waferMapUpdateTracker = new WaferMapUpdateTracker(this);
+          this.waferMapUpdateTracker = new WaferMapUpdateTracker(this.asRequiredFieldsWaferMap);
           this.originLocation = WaferMapOriginLocation.bottomLeft;
           this.gridMinX = undefined;
           this.gridMaxX = undefined;
@@ -76551,15 +76606,15 @@ img.ProseMirror-separator {
           /**
            * @internal
            */
-          this.dataManager = new DataManager(this);
+          this.dataManager = new DataManager(this.asRequiredFieldsWaferMap);
           /**
            * @internal
            */
-          this.mainRenderer = new RenderingModule(this);
+          this.mainRenderer = new RenderingModule(this.asRequiredFieldsWaferMap);
           /**
            * @internal
            */
-          this.workerRenderer = new WorkerRenderer(this);
+          this.workerRenderer = new WorkerRenderer(this.asRequiredFieldsWaferMap);
           this.renderer = this.mainRenderer;
           /**
            * @internal
@@ -76591,9 +76646,11 @@ img.ProseMirror-separator {
               colors: [],
               values: []
           };
-          this.eventCoordinator = new EventCoordinator(this);
+          this.hoverHandler = new HoverHandler$1(this.asRequiredFieldsWaferMap);
+          this.experimentalHoverHandler = new HoverHandler(this.asRequiredFieldsWaferMap);
+          this.zoomHandler = new ZoomHandler(this.asRequiredFieldsWaferMap);
           this.resizeObserver = this.createResizeObserver();
-          this.waferMapValidator = new WaferMapValidator(this);
+          this.waferMapValidator = new WaferMapValidator(this.asRequiredFieldsWaferMap);
       }
       get validity() {
           return this.waferMapValidator.getValidity();
@@ -76603,11 +76660,17 @@ img.ProseMirror-separator {
           this.canvasContext = this.canvas.getContext('2d', {
               willReadFrequently: true
           });
+          this.hoverHandler.connect();
+          this.experimentalHoverHandler.connect();
+          this.zoomHandler.connect();
           this.resizeObserver.observe(this);
           this.waferMapUpdateTracker.trackAll();
       }
       disconnectedCallback() {
           super.disconnectedCallback();
+          this.hoverHandler.disconnect();
+          this.experimentalHoverHandler.disconnect();
+          this.zoomHandler.disconnect();
           this.resizeObserver.unobserve(this);
       }
       /**
@@ -76623,8 +76686,12 @@ img.ProseMirror-separator {
           if (this.validity.invalidDiesTableSchema) {
               return;
           }
+          this.renderer = this.isExperimentalRenderer()
+              ? this.workerRenderer
+              : this.mainRenderer;
           if (this.waferMapUpdateTracker.requiresEventsUpdate) {
-              this.eventCoordinator.detachEvents();
+              // zoom translateExtent needs to be recalculated when canvas size changes
+              this.zoomHandler.disconnect();
               if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) {
                   this.dataManager.updateContainerDimensions();
                   this.renderer.updateSortedDiesAndDrawWafer();
@@ -76644,12 +76711,18 @@ img.ProseMirror-separator {
               else if (this.waferMapUpdateTracker.requiresDrawnWaferUpdate) {
                   this.renderer.drawWafer();
               }
-              this.eventCoordinator.attachEvents();
+              this.zoomHandler.connect();
           }
           else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {
               this.renderer.renderHover();
           }
       }
+      /**
+       * @internal
+       */
+      isExperimentalRenderer() {
+          return this.diesTable !== undefined;
+      }
       validate() {
           this.waferMapValidator.validateGridDimensions();
           this.waferMapValidator.validateDiesTableSchema();
@@ -76712,16 +76785,10 @@ img.ProseMirror-separator {
       }
       diesChanged() {
           this.waferMapUpdateTracker.track('dies');
-          this.renderer = this.diesTable === undefined
-              ? this.mainRenderer
-              : this.workerRenderer;
           this.waferMapUpdateTracker.queueUpdate();
       }
       diesTableChanged() {
           this.waferMapUpdateTracker.track('dies');
-          this.renderer = this.diesTable === undefined
-              ? this.mainRenderer
-              : this.workerRenderer;
           this.waferMapUpdateTracker.queueUpdate();
       }
       colorScaleChanged() {
@@ -76745,6 +76812,9 @@ img.ProseMirror-separator {
           this.waferMapUpdateTracker.track('hoverDie');
           this.waferMapUpdateTracker.queueUpdate();
       }
+      get asRequiredFieldsWaferMap() {
+          return this;
+      }
   }
   __decorate$1([
       attr({ attribute: 'origin-location' })