@ni/nimble-components 20.1.5 → 20.1.7

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 11 Aug 2023 21:45:08 GMT
+   * Generated on Mon, 14 Aug 2023 14:20:26 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -40234,10 +40234,9 @@
         font: ${bodyFont};
         outline: none;
         color: ${bodyFontColor};
-        inline-size: auto;
+        width: auto;
         overflow: auto;
-        block-size: 100%;
-        min-block-size: 36px;
+        height: 100%;
     }
 
     .viewer {
@@ -55044,11 +55043,22 @@
           this.wafermap = wafermap;
           this.minDieDim = 50;
       }
+      updateSortedDiesAndDrawWafer() {
+          this.dies = this.wafermap.dataManager.diesRenderInfo.sort((a, b) => {
+              if (a.fillStyle > b.fillStyle) {
+                  return 1;
+              }
+              if (b.fillStyle > a.fillStyle) {
+                  return -1;
+              }
+              return 0;
+          });
+          this.drawWafer();
+      }
       drawWafer() {
           this.wafermap.canvasContext.save();
           this.clearCanvas();
           this.scaleCanvas();
-          this.sortDies();
           this.renderDies();
           this.renderText();
           this.wafermap.canvasContext.restore();
@@ -55076,56 +55086,70 @@
           }
           return '';
       }
-      sortDies() {
-          this.dies = this.wafermap.dataManager.diesRenderInfo.sort((a, b) => {
-              if (a.fillStyle > b.fillStyle) {
-                  return 1;
-              }
-              if (b.fillStyle > a.fillStyle) {
-                  return -1;
-              }
-              return 0;
-          });
-      }
       renderDies() {
-          let prev;
+          const context = this.wafermap.canvasContext;
+          const dieWidth = this.wafermap.dataManager.dieDimensions.width;
+          const dieHeight = this.wafermap.dataManager.dieDimensions.height;
+          const transformedCanvasMinPoint = this.wafermap.transform.invert([
+              0, 0
+          ]);
+          const transformedCanvasMaxPoint = this.wafermap.transform.invert([
+              this.wafermap.canvas.width,
+              this.wafermap.canvas.height
+          ]);
+          transformedCanvasMinPoint[0] -= dieWidth;
+          transformedCanvasMinPoint[1] -= dieHeight;
           for (const die of this.dies) {
-              if (!prev) {
-                  this.wafermap.canvasContext.fillStyle = die.fillStyle;
-              }
-              if (prev && die.fillStyle !== prev.fillStyle && die.fillStyle) {
-                  this.wafermap.canvasContext.fillStyle = die.fillStyle;
+              if (this.isDieVisible(die, transformedCanvasMinPoint, transformedCanvasMaxPoint)) {
+                  context.fillStyle = die.fillStyle;
+                  context.fillRect(die.x, die.y, dieWidth, dieHeight);
               }
-              this.wafermap.canvasContext.fillRect(die.x, die.y, this.wafermap.dataManager.dieDimensions.width, this.wafermap.dataManager.dieDimensions.height);
-              prev = die;
           }
       }
       renderText() {
-          const dieSize = this.wafermap.dataManager.dieDimensions.width
-              * this.wafermap.dataManager.dieDimensions.height
-              * (this.wafermap.transform.k || 1);
-          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');
-          const dieDimensions = this.wafermap.dataManager.dieDimensions;
+          if (this.wafermap.dieLabelsHidden) {
+              return;
+          }
+          const dieWidth = this.wafermap.dataManager.dieDimensions.width;
+          const dieHeight = this.wafermap.dataManager.dieDimensions.height;
+          const dieSize = dieWidth * dieHeight * (this.wafermap.transform.k || 1);
           if (dieSize >= this.minDieDim) {
+              const fontsize = this.wafermap.dataManager.labelsFontSize;
+              const context = this.wafermap.canvasContext;
+              context.font = `${fontsize.toString()}px sans-serif`;
+              context.fillStyle = '#ffffff';
+              context.textAlign = 'center';
+              context.lineCap = 'butt';
+              const approximateTextHeight = context.measureText('M');
+              const transformedCanvasMinPoint = this.wafermap.transform.invert([
+                  0, 0
+              ]);
+              const transformedCanvasMaxPoint = this.wafermap.transform.invert([
+                  this.wafermap.canvas.width,
+                  this.wafermap.canvas.height
+              ]);
+              transformedCanvasMinPoint[0] -= dieWidth;
+              transformedCanvasMinPoint[1] -= dieHeight;
               for (const die of this.dies) {
-                  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);
+                  if (this.isDieVisible(die, transformedCanvasMinPoint, transformedCanvasMaxPoint)) {
+                      context.fillText(die.text, die.x + dieWidth / 2, die.y + dieHeight / 2 + approximateTextHeight.width / 2, dieWidth - (dieWidth / 100) * 20);
+                  }
               }
           }
       }
       clearCanvas() {
-          this.wafermap.canvasContext.clearRect(0, 0, this.wafermap.canvasWidth * this.wafermap.transform.k, this.wafermap.canvasHeight * this.wafermap.transform.k);
+          this.wafermap.canvasContext.clearRect(0, 0, this.wafermap.canvas.width, this.wafermap.canvas.height);
       }
       scaleCanvas() {
           this.wafermap.canvasContext.translate(this.wafermap.transform.x, this.wafermap.transform.y);
           this.wafermap.canvasContext.scale(this.wafermap.transform.k, this.wafermap.transform.k);
       }
+      isDieVisible(die, minPoint, maxPoint) {
+          return (die.x >= minPoint[0]
+              && die.x < maxPoint[0]
+              && die.y >= minPoint[1]
+              && die.y < maxPoint[1]);
+      }
   }
 
   /**
@@ -55322,6 +55346,9 @@
               || this.isTracked('dieLabelsHidden')
               || this.isTracked('dieLabelsSuffix'));
       }
+      get requiresDrawnWaferUpdate() {
+          return this.isTracked('transform');
+      }
       get requiresRenderHoverUpdate() {
           return this.isTracked('hoverDie');
       }
@@ -55427,17 +55454,23 @@
               this.eventCoordinator.detachEvents();
               if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) {
                   this.dataManager.updateContainerDimensions();
+                  this.renderer.updateSortedDiesAndDrawWafer();
               }
               else if (this.waferMapUpdateTracker.requiresScalesUpdate) {
                   this.dataManager.updateScales();
+                  this.renderer.updateSortedDiesAndDrawWafer();
               }
               else if (this.waferMapUpdateTracker.requiresLabelsFontSizeUpdate) {
                   this.dataManager.updateLabelsFontSize();
+                  this.renderer.updateSortedDiesAndDrawWafer();
               }
               else if (this.waferMapUpdateTracker.requiresDiesRenderInfoUpdate) {
                   this.dataManager.updateDiesRenderInfo();
+                  this.renderer.updateSortedDiesAndDrawWafer();
+              }
+              else if (this.waferMapUpdateTracker.requiresDrawnWaferUpdate) {
+                  this.renderer.drawWafer();
               }
-              this.renderer.drawWafer();
               this.eventCoordinator.attachEvents();
           }
           else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {