@ni/nimble-components 16.1.4 → 16.1.5

package/dist/all-components-bundle.js

@@ -26472,24 +26472,39 @@ Instead styling against the role which is more general and likely a better appro
     const template = html `
     <div class="wafer-map-container">
         <svg class="svg-root ${x => x.orientation}">
-            <g class="zoom-container">               
-                <svg class="circle-base" version="1.1" x="0px" y="0px" viewbox="1 .45 20 21">
-                    <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"/>
+            <g class="zoom-container">
+                <svg
+                    class="circle-base"
+                    version="1.1"
+                    x="0px"
+                    y="0px"
+                    viewBox="1 .45 20 21"
+                >
+                    <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"
+                    />
                 </svg>
             </g>
         </svg>
-        <div class="wafer-map-area" style="left: 0px; top: 0px">
-            <canvas width=500 height="500" ${ref('canvas')}>
+        <div class="wafer-map-area">
+            <canvas class="wafer-map-canvas" ${ref('canvas')}></canvas>
         </div>
     </div>
 `;
 
     const styles = css `
-    .wafer-map-container {
+    :host {
+        display: inline-block;
         width: 500px;
         height: 500px;
+    }
+
+    .wafer-map-container {
+        width: 100%;
+        padding-bottom: 100%;
         position: relative;
-        display: flex;
+        display: inline-block;
         justify-content: center;
         align-items: center;
     }
@@ -26497,6 +26512,7 @@ Instead styling against the role which is more general and likely a better appro
     .svg-root {
         width: 100%;
         height: 100%;
+        position: absolute;
     }
 
     .svg-root.top {
@@ -26518,13 +26534,14 @@ Instead styling against the role which is more general and likely a better appro
     .zoom-container {
         width: 100%;
         height: 100%;
+        position: absolute;
     }
 
     .circle-base {
         width: 100%;
         height: 100%;
         position: absolute;
-        fill: white;
+        fill: transparent;
     }
 
     .circle-drawing-path {
@@ -26536,6 +26553,16 @@ Instead styling against the role which is more general and likely a better appro
 
     .wafer-map-area {
         position: absolute;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    .wafer-map-canvas {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
     }
 `;
 
@@ -29390,8 +29417,8 @@ Instead styling against the role which is more general and likely a better appro
                 this.context.fillText(die.text, die.x + dimensions.width / 2, die.y + dimensions.height / 2 + aproxTextHeight.width / 2);
             }
         }
-        clearCanvas() {
-            this.context.clearRect(0, 0, this.waferData.containerDimensions.width, this.waferData.containerDimensions.height);
+        clearCanvas(width, height) {
+            this.context.clearRect(0, 0, width, height);
         }
     }
 
@@ -29417,16 +29444,31 @@ Instead styling against the role which is more general and likely a better appro
         }
         connectedCallback() {
             super.connectedCallback();
+            this.resizeObserver = new ResizeObserver(entries => {
+                const entry = entries[0];
+                if (entry === undefined)
+                    return;
+                const { height, width } = entry.contentRect;
+                this.canvasSideLength = Math.min(height, width);
+            });
+            this.resizeObserver.observe(this);
             this.queueRender();
         }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.resizeObserver.unobserve(this);
+        }
         /**
          * @internal
          */
         render() {
             this.renderQueued = false;
-            this.dataManager = new DataManager(this.dies, this.quadrant, { width: 500, height: 500 }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
-            const renderer = new RenderingModule(this.dataManager, this.canvas);
-            renderer.drawWafer();
+            if (this.canvasSideLength === undefined || this.canvasSideLength === 0)
+                return;
+            this.renderer?.clearCanvas(this.canvasSideLength, this.canvasSideLength);
+            this.dataManager = new DataManager(this.dies, this.quadrant, { width: this.canvasSideLength, height: this.canvasSideLength }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
+            this.renderer = new RenderingModule(this.dataManager, this.canvas);
+            this.renderer.drawWafer();
         }
         quadrantChanged() {
             this.queueRender();
@@ -29455,6 +29497,14 @@ Instead styling against the role which is more general and likely a better appro
         colorScaleChanged() {
             this.queueRender();
         }
+        canvasSideLengthChanged() {
+            if (this.canvasSideLength !== undefined
+                && this.canvasSideLength !== 0) {
+                this.canvas.width = this.canvasSideLength;
+                this.canvas.height = this.canvasSideLength;
+            }
+            this.queueRender();
+        }
         queueRender() {
             if (!this.$fastController.isConnected) {
                 return;
@@ -29493,6 +29543,9 @@ Instead styling against the role which is more general and likely a better appro
             attribute: 'color-scale-mode'
         })
     ], WaferMap.prototype, "canvas", void 0);
+    __decorate$1([
+        observable
+    ], WaferMap.prototype, "canvasSideLength", void 0);
     __decorate$1([
         observable
     ], WaferMap.prototype, "colorScaleMode", void 0);