@ni/nimble-components 20.0.2 → 20.0.3

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 31 Jul 2023 22:33:28 GMT
+   * Generated on Tue, 01 Aug 2023 16:23:07 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -46785,7 +46785,7 @@
       }
       return false;
   };
-  const trackedItems = [
+  const trackedItems$1 = [
       'rowIds',
       'groupRows',
       'columnIds',
@@ -46801,7 +46801,7 @@
    */
   class TableUpdateTracker extends UpdateTracker {
       constructor(table) {
-          super(trackedItems);
+          super(trackedItems$1);
           this.table = table;
           this.updateQueued = false;
       }
@@ -54215,13 +54215,39 @@
    */
   class Computations {
       constructor(wafermap) {
+          this.wafermap = wafermap;
           this.defaultPadding = 0;
           this.baseMarginPercentage = 0.04;
+      }
+      get containerDimensions() {
+          return this._containerDimensions;
+      }
+      get dieDimensions() {
+          return this._dieDimensions;
+      }
+      get radius() {
+          return this._radius;
+      }
+      get margin() {
+          return this._margin;
+      }
+      get horizontalScale() {
+          return this._horizontalScale;
+      }
+      get verticalScale() {
+          return this._verticalScale;
+      }
+      get invertedHorizontalScale() {
+          return this._invertedHorizontalScale;
+      }
+      get invertedVerticalScale() {
+          return this._invertedVerticalScale;
+      }
+      updateContainerDimensions() {
           const canvasDimensions = {
-              width: wafermap.canvasWidth,
-              height: wafermap.canvasHeight
+              width: this.wafermap.canvasWidth,
+              height: this.wafermap.canvasHeight
           };
-          const gridDimensions = this.calculateGridDimensions(wafermap.dies);
           const canvasDiameter = Math.min(canvasDimensions.width, canvasDimensions.height);
           const canvasMargin = {
               top: (canvasDimensions.height - canvasDiameter) / 2,
@@ -54235,20 +54261,26 @@
               bottom: canvasDiameter * this.baseMarginPercentage,
               left: canvasDiameter * this.baseMarginPercentage
           };
-          this.margin = this.calculateMarginAddition(baseMargin, canvasMargin);
-          this.containerDimensions = this.calculateContainerDimensions(canvasDimensions, this.margin);
-          const containerDiameter = Math.min(this.containerDimensions.width, this.containerDimensions.height);
+          this._margin = this.calculateMarginAddition(baseMargin, canvasMargin);
+          this._containerDimensions = this.calculateContainerDimensions(canvasDimensions, this._margin);
+          const containerDiameter = Math.min(this._containerDimensions.width, this._containerDimensions.height);
+          this._radius = containerDiameter / 2;
+          this.updateScales();
+      }
+      updateScales() {
+          const containerDiameter = Math.min(this._containerDimensions.width, this._containerDimensions.height);
+          const gridDimensions = this.calculateGridDimensions(this.wafermap.dies);
           // this scale is used for positioning the dies on the canvas
-          this.horizontalScale = this.createHorizontalScale(wafermap.quadrant, gridDimensions, containerDiameter);
-          this.invertedHorizontalScale = this.createInvertedHorizontalScale(wafermap.quadrant, gridDimensions, containerDiameter);
+          const quadrant = this.wafermap.quadrant;
+          this._horizontalScale = this.createHorizontalScale(quadrant, gridDimensions, containerDiameter);
+          this._invertedHorizontalScale = this.createInvertedHorizontalScale(quadrant, gridDimensions, containerDiameter);
           // this scale is used for positioning the dies on the canvas
-          this.verticalScale = this.createVerticalScale(wafermap.quadrant, gridDimensions, containerDiameter);
-          this.invertedVerticalScale = this.createInvertedVerticalScale(wafermap.quadrant, gridDimensions, containerDiameter);
-          this.dieDimensions = {
+          this._verticalScale = this.createVerticalScale(quadrant, gridDimensions, containerDiameter);
+          this._invertedVerticalScale = this.createInvertedVerticalScale(quadrant, gridDimensions, containerDiameter);
+          this._dieDimensions = {
               width: this.horizontalScale.bandwidth(),
               height: this.verticalScale.bandwidth()
           };
-          this.radius = containerDiameter / 2;
       }
       calculateGridDimensions(dies) {
           if (dies.length === 0 || dies[0] === undefined) {
@@ -54338,22 +54370,43 @@
    * Prerendering prepares render-ready dies data to be used by the rendering module
    */
   class Prerendering {
-      constructor(wafermap, horizontalScale, verticalScale, dieDimensions, margin) {
+      constructor(wafermap, dataManager) {
+          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)';
-          this.d3ColorScale = this.createD3ColorScale(wafermap.colorScale, wafermap.colorScaleMode);
-          this.labelsFontSize = this.calculateLabelsFontSize(dieDimensions, wafermap.maxCharacters);
-          this.diesRenderInfo = [];
-          for (const die of wafermap.dies) {
+      }
+      get labelsFontSize() {
+          return this._labelsFontSize;
+      }
+      get diesRenderInfo() {
+          return this._diesRenderInfo;
+      }
+      updateLabelsFontSize() {
+          this._labelsFontSize = this.calculateLabelsFontSize(this.dataManager.dieDimensions, this.wafermap.maxCharacters);
+          this.updateDiesRenderInfo();
+      }
+      updateDiesRenderInfo() {
+          this.d3ColorScale = this.createD3ColorScale(this.wafermap.colorScale, this.wafermap.colorScaleMode);
+          const margin = this.dataManager.margin;
+          const horizontalScale = this.dataManager.horizontalScale;
+          const verticalScale = this.dataManager.verticalScale;
+          const colorScaleMode = this.wafermap.colorScaleMode;
+          const highlightedValues = this.wafermap.highlightedValues;
+          const maxCharacters = this.wafermap.maxCharacters;
+          const dieLabelsHidden = this.wafermap.dieLabelsHidden;
+          const dieLabelsSuffix = this.wafermap.dieLabelsSuffix;
+          this._diesRenderInfo = [];
+          for (const die of this.wafermap.dies) {
               const scaledX = horizontalScale(die.x) ?? 0;
               const scaledY = verticalScale(die.y) ?? 0;
-              this.diesRenderInfo.push({
+              this._diesRenderInfo.push({
                   x: scaledX + margin.right,
                   y: scaledY + margin.top,
-                  fillStyle: this.calculateFillStyle(die.value, wafermap.colorScaleMode, wafermap.highlightedValues),
-                  text: this.buildLabel(die.value, wafermap.maxCharacters, wafermap.dieLabelsHidden, wafermap.dieLabelsSuffix)
+                  fillStyle: this.calculateFillStyle(die.value, colorScaleMode, highlightedValues),
+                  text: this.buildLabel(die.value, maxCharacters, dieLabelsHidden, dieLabelsSuffix)
               });
           }
       }
@@ -54426,9 +54479,9 @@
    */
   class DataManager {
       constructor(wafermap) {
+          this.wafermap = wafermap;
           this.computations = new Computations(wafermap);
-          this.prerendering = new Prerendering(wafermap, this.horizontalScale, this.verticalScale, this.dieDimensions, this.margin);
-          this.dataMap = new Map(wafermap.dies.map(die => [`${die.x}_${die.y}`, die]));
+          this.prerendering = new Prerendering(wafermap, this);
       }
       get containerDimensions() {
           return this.computations.containerDimensions;
@@ -54460,9 +54513,31 @@
       get diesRenderInfo() {
           return this.prerendering.diesRenderInfo;
       }
+      get data() {
+          return this.dataMap;
+      }
+      updateContainerDimensions() {
+          this.computations.updateContainerDimensions();
+          this.updateDataMap();
+          this.updateLabelsFontSize();
+      }
+      updateScales() {
+          this.computations.updateScales();
+          this.updateDataMap();
+          this.updateLabelsFontSize();
+      }
+      updateLabelsFontSize() {
+          this.prerendering.updateLabelsFontSize();
+      }
+      updateDiesRenderInfo() {
+          this.prerendering.updateDiesRenderInfo();
+      }
       getWaferMapDie(point) {
           return this.dataMap.get(`${point.x}_${point.y}`);
       }
+      updateDataMap() {
+          this.dataMap = new Map(this.wafermap.dies.map(die => [`${die.x}_${die.y}`, die]));
+      }
   }
 
   /**
@@ -54471,14 +54546,13 @@
   class RenderingModule {
       constructor(wafermap) {
           this.wafermap = wafermap;
-          this.dies = wafermap.dataManager.diesRenderInfo;
-          this.dimensions = wafermap.dataManager.dieDimensions;
-          this.labelFontSize = wafermap.dataManager.labelsFontSize;
+          this.minDieDim = 50;
       }
       drawWafer() {
           this.wafermap.canvasContext.save();
           this.clearCanvas();
           this.scaleCanvas();
+          this.sortDies();
           this.renderDies();
           this.renderText();
           this.wafermap.canvasContext.restore();
@@ -54506,8 +54580,8 @@
           }
           return '';
       }
-      renderDies() {
-          this.dies.sort((a, b) => {
+      sortDies() {
+          this.dies = this.wafermap.dataManager.diesRenderInfo.sort((a, b) => {
               if (a.fillStyle > b.fillStyle) {
                   return 1;
               }
@@ -54516,6 +54590,8 @@
               }
               return 0;
           });
+      }
+      renderDies() {
           let prev;
           for (const die of this.dies) {
               if (!prev) {
@@ -54524,25 +54600,26 @@
               if (prev && die.fillStyle !== prev.fillStyle && die.fillStyle) {
                   this.wafermap.canvasContext.fillStyle = die.fillStyle;
               }
-              this.wafermap.canvasContext.fillRect(die.x, die.y, this.dimensions.width, this.dimensions.height);
+              this.wafermap.canvasContext.fillRect(die.x, die.y, this.wafermap.dataManager.dieDimensions.width, this.wafermap.dataManager.dieDimensions.height);
               prev = die;
           }
       }
       renderText() {
-          const dieSize = this.dimensions.width
-              * this.dimensions.height
+          const dieSize = this.wafermap.dataManager.dieDimensions.width
+              * this.wafermap.dataManager.dieDimensions.height
               * (this.wafermap.transform.k || 1);
-          const fontsize = this.labelFontSize;
+          const fontsize = this.wafermap.dataManager.labelsFontSize;
           this.wafermap.canvasContext.font = `${fontsize.toString()}px sans-serif`;
           this.wafermap.canvasContext.fillStyle = '#ffffff';
           this.wafermap.canvasContext.textAlign = 'center';
           this.wafermap.canvasContext.lineCap = 'butt';
           const approxTextHeight = this.wafermap.canvasContext.measureText('M');
-          if (dieSize >= 50) {
+          const dieDimensions = this.wafermap.dataManager.dieDimensions;
+          if (dieSize >= this.minDieDim) {
               for (const die of this.dies) {
-                  this.wafermap.canvasContext.fillText(die.text, die.x + this.dimensions.width / 2, die.y
-                      + this.dimensions.height / 2
-                      + approxTextHeight.width / 2, this.dimensions.width - (this.dimensions.width / 100) * 20);
+                  this.wafermap.canvasContext.fillText(die.text, die.x + dieDimensions.width / 2, die.y
+                      + dieDimensions.height / 2
+                      + approxTextHeight.width / 2, dieDimensions.width - (dieDimensions.width / 100) * 20);
               }
           }
       }
@@ -54565,22 +54642,9 @@
           this.minScale = 1.1;
           this.minExtentPoint = [-100, -100];
           this.extentPadding = 100;
-          this.zoomBehavior = this.createZoomBehavior();
-          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;
       }
       createZoomBehavior() {
-          const zoomBehavior = zoom()
+          this.zoomBehavior = zoom()
               .scaleExtent([
               1.1,
               this.getZoomMax(this.wafermap.canvasWidth * this.wafermap.canvasHeight, this.wafermap.dataManager.containerDimensions.width
@@ -54603,7 +54667,18 @@
               // See: https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_on
               this.rescale(event);
           });
-          return zoomBehavior;
+          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);
@@ -54622,7 +54697,7 @@
               x: event.offsetX,
               y: event.offsetY
           };
-          if (!this.hoversOverDie(mousePosition)) {
+          if (!this.hoversOverDie(this.wafermap, mousePosition)) {
               this.wafermap.hoverDie = undefined;
               return;
           }
@@ -54631,17 +54706,17 @@
               mousePosition.x,
               mousePosition.y
           ]);
-          const dieCoordinates = this.calculateDieCoordinates({
+          const dieCoordinates = this.calculateDieCoordinates(this.wafermap, {
               x: invertedPoint[0],
               y: invertedPoint[1]
           });
           this.wafermap.hoverDie = this.wafermap.dataManager.getWaferMapDie(dieCoordinates);
       }
-      mouseout(_event) {
+      mouseout() {
           this.wafermap.hoverDie = undefined;
       }
-      calculateDieCoordinates(mousePosition) {
-          const axisLocation = this.wafermap.quadrant;
+      calculateDieCoordinates(wafermap, mousePosition) {
+          const axisLocation = wafermap.quadrant;
           const xRoundFunction = axisLocation === WaferMapQuadrant.bottomLeft
               || axisLocation === WaferMapQuadrant.topLeft
               ? Math.floor
@@ -54651,12 +54726,12 @@
               ? 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));
+          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(mousePosition) {
-          const rgba = this.wafermap.canvasContext.getImageData(mousePosition.x, mousePosition.y, 1, 1).data;
+      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;
@@ -54677,25 +54752,100 @@
           this.onMouseMove = (event) => {
               this.hoverHandler.mousemove(event);
           };
-          this.onMouseOut = (event) => {
-              this.hoverHandler.mouseout(event);
+          this.onMouseOut = () => {
+              this.hoverHandler.mouseout();
           };
           this.zoomHandler = new ZoomHandler(wafermap);
           this.hoverHandler = new HoverHandler(wafermap);
-          this.attachEvents();
-      }
-      detachEvents() {
-          this.wafermap.removeEventListener('mousemove', this.onMouseMove);
-          this.wafermap.removeEventListener('mouseout', this.onMouseOut);
-          this.wafermap.canvas.removeEventListener('wheel', this.onWheelMove);
       }
       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 = [
+      'canvasWidth',
+      'canvasHeight',
+      'quadrant',
+      'dies',
+      'maxCharacters',
+      'colorScale',
+      'colorScaleMode',
+      'highlightedValues',
+      'dieLabelsHidden',
+      'dieLabelsSuffix',
+      'transform',
+      'hoverDie'
+  ];
+  /**
+   * Helper class to track what updates are needed to the wafer based on configuration
+   * changes.
+   */
+  class WaferMapUpdateTracker extends UpdateTracker {
+      constructor(wafermap) {
+          super(trackedItems);
+          this.wafermap = wafermap;
+          this.updateQueued = false;
+      }
+      get requiresEventsUpdate() {
+          return (this.isTracked('canvasWidth')
+              || this.isTracked('canvasHeight')
+              || this.isTracked('quadrant')
+              || this.isTracked('dies')
+              || this.isTracked('maxCharacters')
+              || this.isTracked('colorScale')
+              || this.isTracked('colorScaleMode')
+              || this.isTracked('highlightedValues')
+              || this.isTracked('dieLabelsHidden')
+              || this.isTracked('dieLabelsSuffix')
+              || this.isTracked('transform'));
+      }
+      get requiresContainerDimensionsUpdate() {
+          return this.isTracked('canvasWidth') || this.isTracked('canvasHeight');
+      }
+      get requiresScalesUpdate() {
+          return this.isTracked('quadrant') || this.isTracked('dies');
+      }
+      get requiresLabelsFontSizeUpdate() {
+          return this.isTracked('maxCharacters');
+      }
+      get requiresDiesRenderInfoUpdate() {
+          return (this.isTracked('colorScale')
+              || this.isTracked('colorScaleMode')
+              || this.isTracked('highlightedValues')
+              || this.isTracked('dieLabelsHidden')
+              || this.isTracked('dieLabelsSuffix'));
+      }
+      get requiresRenderHoverUpdate() {
+          return this.isTracked('hoverDie');
+      }
+      /**
+       * Queues an update using the DOM and until the update is run no other updates are queued.
+       * After the update is finished, all the tracked items are reset.
+       */
+      queueUpdate() {
+          if (!this.wafermap.$fastController.isConnected) {
+              return;
+          }
+          if (!this.updateQueued) {
+              this.updateQueued = true;
+              DOM.queueUpdate(() => {
+                  this.wafermap.update();
+                  this.untrackAll();
+                  this.updateQueued = false;
+              });
+          }
+      }
   }
 
   /**
@@ -54704,12 +54854,25 @@
   class WaferMap extends FoundationElement {
       constructor() {
           super(...arguments);
+          /**
+           * @internal
+           * needs to be initialized before the properties trigger changes
+           */
+          this.waferMapUpdateTracker = new WaferMapUpdateTracker(this);
           this.quadrant = WaferMapQuadrant.topLeft;
           this.orientation = WaferMapOrientation.top;
           this.maxCharacters = 4;
           this.dieLabelsHidden = false;
           this.dieLabelsSuffix = '';
           this.colorScaleMode = WaferMapColorScaleMode.linear;
+          /**
+           * @internal
+           */
+          this.dataManager = new DataManager(this);
+          /**
+           * @internal
+           */
+          this.renderer = new RenderingModule(this);
           /**
            * @internal
            */
@@ -54740,13 +54903,16 @@
               colors: [],
               values: []
           };
+          this.eventCoordinator = new EventCoordinator(this);
+          this.resizeObserver = this.createResizeObserver();
       }
       connectedCallback() {
           super.connectedCallback();
           this.canvasContext = this.canvas.getContext('2d', {
               willReadFrequently: true
           });
-          this.resizeObserver = this.createResizeObserver();
+          this.resizeObserver.observe(this);
+          this.waferMapUpdateTracker.trackAll();
       }
       disconnectedCallback() {
           super.disconnectedCallback();
@@ -54754,32 +54920,33 @@
       }
       /**
        * @internal
+       * Update function called when an update is queued.
+       * It will check which updates are needed based on which properties have changed.
+       * Each update represents a different starting point of the same sequential update flow.
+       * The updates snowball one after the other, this function only choses the 'altitude'.
+       * The hover does not require an event update, but it's also the last update in the sequence.
        */
-      render() {
-          this.renderQueued = false;
-          this.initializeInternalModules();
-          this.renderer?.drawWafer();
-      }
-      queueRender() {
-          if (!this.$fastController.isConnected) {
-              return;
-          }
-          if (!this.renderQueued) {
-              this.renderQueued = true;
-              DOM.queueUpdate(() => this.render());
+      update() {
+          if (this.waferMapUpdateTracker.requiresEventsUpdate) {
+              this.eventCoordinator.detachEvents();
+              if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) {
+                  this.dataManager.updateContainerDimensions();
+              }
+              else if (this.waferMapUpdateTracker.requiresScalesUpdate) {
+                  this.dataManager.updateScales();
+              }
+              else if (this.waferMapUpdateTracker.requiresLabelsFontSizeUpdate) {
+                  this.dataManager.updateLabelsFontSize();
+              }
+              else if (this.waferMapUpdateTracker.requiresDiesRenderInfoUpdate) {
+                  this.dataManager.updateDiesRenderInfo();
+              }
+              this.renderer.drawWafer();
+              this.eventCoordinator.attachEvents();
           }
-      }
-      queueRenderHover() {
-          if (!this.$fastController.isConnected) {
-              return;
+          else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {
+              this.renderer.renderHover();
           }
-          DOM.queueUpdate(() => this.renderer?.renderHover());
-      }
-      initializeInternalModules() {
-          this.eventCoordinator?.detachEvents();
-          this.dataManager = new DataManager(this);
-          this.renderer = new RenderingModule(this);
-          this.eventCoordinator = new EventCoordinator(this);
       }
       createResizeObserver() {
           const resizeObserver = new ResizeObserver(entries => {
@@ -54795,48 +54962,56 @@
               this.canvasWidth = width;
               this.canvasHeight = height;
           });
-          resizeObserver.observe(this);
           return resizeObserver;
       }
       quadrantChanged() {
-          this.queueRender();
-      }
-      orientationChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('quadrant');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       maxCharactersChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('maxCharacters');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       dieLabelsHiddenChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('dieLabelsHidden');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       dieLabelsSuffixChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('dieLabelsSuffix');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       colorScaleModeChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('colorScaleMode');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       highlightedValuesChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('highlightedValues');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       diesChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('dies');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       colorScaleChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('colorScale');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       transformChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('transform');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       canvasWidthChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('canvasWidth');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       canvasHeightChanged() {
-          this.queueRender();
+          this.waferMapUpdateTracker.track('canvasHeight');
+          this.waferMapUpdateTracker.queueUpdate();
       }
       hoverDieChanged() {
           this.$emit('die-hover', { currentDie: this.hoverDie });
-          this.queueRenderHover();
+          this.waferMapUpdateTracker.track('hoverDie');
+          this.waferMapUpdateTracker.queueUpdate();
       }
   }
   __decorate$1([