@ni/nimble-components 17.0.6 → 17.0.8

package/dist/all-components-bundle.js

@@ -26754,11 +26754,11 @@ Instead styling against the role which is more general and likely a better appro
                         version="1.1"
                         x="0px"
                         y="0px"
-                        viewBox="1 .45 20 21"
+                        viewBox="0 0 41 41"
                     >
                         <path
                             class="circle-drawing-path"
-                            d="m 21 12 a 10 10 330 1 1 0 -1.98 a 1 1 0 0 0 0 2"
+                            d="m 40.5 21 a 20 20 1 1 1 0 -1 a 0.5 0.5 0 0 0 0 1"
                         />
                     </svg>
                 </g>
@@ -26792,13 +26792,6 @@ Instead styling against the role which is more general and likely a better appro
         position: absolute;
     }
 
-    .circle-base {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        fill: white;
-    }
-
     .notch {
         transform-origin: center center;
     }
@@ -26829,7 +26822,7 @@ Instead styling against the role which is more general and likely a better appro
         width: 100%;
         height: 100%;
         position: absolute;
-        fill: transparent;
+        fill: white;
     }
 
     .circle-drawing-path {
@@ -29871,25 +29864,57 @@ Instead styling against the role which is more general and likely a better appro
      */
     class RenderingModule {
         constructor(waferData, canvas) {
-            this.waferData = waferData;
             this.context = canvas.getContext('2d');
+            this.dies = waferData.diesRenderInfo;
+            this.dimensions = waferData.dieDimensions;
+            this.labelFontSize = waferData.labelsFontSize;
         }
-        drawWafer() {
-            const dies = this.waferData.diesRenderInfo;
-            const dimensions = this.waferData.dieDimensions;
-            for (const die of dies) {
-                this.context.fillStyle = die.fillStyle;
-                this.context?.fillRect(die.x, die.y, dimensions.width, dimensions.height);
-                this.context.font = this.waferData.labelsFontSize.toString();
-                this.context.fillStyle = '#ffffff';
-                this.context.textAlign = 'center';
-                const aproxTextHeight = this.context.measureText('M');
-                this.context.fillText(die.text, die.x + dimensions.width / 2, die.y + dimensions.height / 2 + aproxTextHeight.width / 2);
-            }
+        drawWafer(transform) {
+            this.renderDies(transform);
+            this.renderText(transform);
         }
         clearCanvas(width, height) {
             this.context.clearRect(0, 0, width, height);
         }
+        renderDies(transform) {
+            this.dieSize = this.dimensions.width * this.dimensions.height * (transform || 1);
+            this.dies.sort((a, b) => {
+                if (a.fillStyle > b.fillStyle) {
+                    return 1;
+                }
+                if (b.fillStyle > a.fillStyle) {
+                    return -1;
+                }
+                return 0;
+            });
+            let prev;
+            for (const die of this.dies) {
+                if (!prev) {
+                    this.context.fillStyle = die.fillStyle;
+                }
+                if (prev && die.fillStyle !== prev.fillStyle && die.fillStyle) {
+                    this.context.fillStyle = die.fillStyle;
+                }
+                this.context.fillRect(die.x, die.y, this.dimensions.width, this.dimensions.height);
+                prev = die;
+            }
+        }
+        renderText(transform) {
+            this.dieSize = this.dimensions.width * this.dimensions.height * (transform || 1);
+            const fontsize = this.labelFontSize;
+            this.context.font = `${fontsize.toString()}px sans-serif`;
+            this.context.fillStyle = '#ffffff';
+            this.context.textAlign = 'center';
+            this.context.lineCap = 'butt';
+            const aproxTextHeight = this.context.measureText('M');
+            if (this.dieSize >= 50) {
+                for (const die of this.dies) {
+                    this.context.fillText(die.text, die.x + this.dimensions.width / 2, die.y
+                        + this.dimensions.height / 2
+                        + aproxTextHeight.width / 2, this.dimensions.width - (this.dimensions.width / 100) * 20);
+                }
+            }
+        }
     }
 
     var xhtml = "http://www.w3.org/1999/xhtml";
@@ -32489,7 +32514,7 @@ Instead styling against the role which is more general and likely a better appro
             this.zoomTransform = identity;
             this.clearCanvas(canvasContext, this.canvasLength, this.canvasLength);
             this.scaleCanvas(canvasContext, identity.x, identity.y, identity.k);
-            this.renderingModule.drawWafer();
+            this.renderingModule.drawWafer(this.zoomTransform.k);
             this.zoomBehavior?.transform(select(this.canvas), identity);
         }
         createZoomBehavior() {
@@ -32521,14 +32546,14 @@ Instead styling against the role which is more general and likely a better appro
                     this.zoomTransform = identity;
                     this.clearCanvas(canvasContext, this.canvasLength, this.canvasLength);
                     this.scaleCanvas(canvasContext, identity.x, identity.y, identity.k);
-                    this.renderingModule.drawWafer();
+                    this.renderingModule.drawWafer(this.zoomTransform.k);
                     zoomBehavior.transform(select(this.canvas), identity);
                 }
                 else {
                     this.zoomTransform = transform;
                     this.clearCanvas(canvasContext, this.canvasLength * this.zoomTransform.k, this.canvasLength * this.zoomTransform.k);
                     this.scaleCanvas(canvasContext, transform.x, transform.y, transform.k);
-                    this.renderingModule.drawWafer();
+                    this.renderingModule.drawWafer(this.zoomTransform.k);
                 }
                 canvasContext.restore();
                 this.zoomContainer.setAttribute('transform', this.zoomTransform.toString());