@ni/nimble-components 18.3.5 → 18.3.6

package/dist/all-components-bundle.js

@@ -32431,11 +32431,7 @@ 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">
-            <g
-                class="zoom-container"
-                ${ref('zoomContainer')}
-                transform=${x => x.transform.toString()}
-            >
+            <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
                 <g class="notch ${x => x.orientation}">
                     <svg
                         class="circle-base"
@@ -32452,9 +32448,7 @@ Instead styling against the role which is more general and likely a better appro
                 </g>
             </g>
         </svg>
-        <div class="wafer-map-area">
-            <canvas class="wafer-map-canvas" ${ref('canvas')}></canvas>
-        </div>
+        <canvas class="wafer-map-canvas" ${ref('canvas')}></canvas>
     </div>
 `;
 
@@ -32467,7 +32461,7 @@ Instead styling against the role which is more general and likely a better appro
 
     .wafer-map-container {
         width: 100%;
-        padding-bottom: 100%;
+        height: 100%;
         position: relative;
         display: inline-block;
         justify-content: center;
@@ -32500,16 +32494,7 @@ Instead styling against the role which is more general and likely a better appro
         transform: rotate(90deg);
     }
 
-    .zoom-container {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-    }
-
     .circle-base {
-        width: 100%;
-        height: 100%;
-        position: absolute;
         fill: white;
     }
 
@@ -32520,18 +32505,9 @@ Instead styling against the role which is more general and likely a better appro
         stroke: ${borderColor};
     }
 
-    .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%;
+        position: absolute;
     }
 `;
 
@@ -33430,43 +33406,47 @@ Instead styling against the role which is more general and likely a better appro
      * Computations calculates and stores different measures which are used in the Wafermap
      */
     class Computations {
-        constructor(dies, axisLocation, canvasDimensions) {
+        constructor(wafermap) {
             this.baseMargin = {
-                top: 20,
-                right: 20,
-                bottom: 20,
-                left: 20
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
             };
-            this.dieSizeFactor = 1.5;
             this.defaultAlign = 0.5;
-            this.margin = this.baseMargin;
-            const gridMapDimensions = this.calculateMapDimensions(dies);
-            this.containerDimensions = this.calculateContainerDimensions(canvasDimensions, this.margin);
-            this.horizontalScale = this.createHorizontalScale(axisLocation, gridMapDimensions, this.containerDimensions.width);
-            this.dieDimensions = {
-                width: this.calculateGridWidth(gridMapDimensions.cols, this.containerDimensions.width),
-                height: 0
+            this.baseMarginPercentage = 0.04;
+            const canvasDimensions = {
+                width: wafermap.canvasWidth,
+                height: wafermap.canvasHeight
             };
-            this.radius = this.containerDimensions.width / 2
-                + this.dieDimensions.width * this.dieSizeFactor;
-            if (this.radius > canvasDimensions.width / 2) {
-                this.margin = this.calculateMarginWithAddition(this.radius - canvasDimensions.width / 2);
-                this.containerDimensions = this.calculateContainerDimensions(canvasDimensions, this.margin);
-                this.horizontalScale = this.createHorizontalScale(axisLocation, gridMapDimensions, this.containerDimensions.width);
-                this.dieDimensions = {
-                    width: this.calculateGridWidth(gridMapDimensions.cols, this.containerDimensions.width),
-                    height: 0
-                };
-                this.radius = this.containerDimensions.width / 2
-                    + this.dieDimensions.width * this.dieSizeFactor;
-            }
-            this.verticalScale = this.createVerticalScale(axisLocation, gridMapDimensions, this.containerDimensions.height);
+            const gridDimensions = this.calculateGridDimensions(wafermap.dies);
+            const canvasDiameter = Math.min(canvasDimensions.width, canvasDimensions.height);
+            const canvasMargin = {
+                top: (canvasDimensions.height - canvasDiameter) / 2,
+                right: (canvasDimensions.width - canvasDiameter) / 2,
+                bottom: (canvasDimensions.height - canvasDiameter) / 2,
+                left: (canvasDimensions.width - canvasDiameter) / 2
+            };
+            const baseMargin = {
+                top: canvasDiameter * this.baseMarginPercentage,
+                right: canvasDiameter * this.baseMarginPercentage,
+                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 scale is used for positioning the dies on the canvas
+            this.horizontalScale = this.createHorizontalScale(wafermap.quadrant, gridDimensions, containerDiameter);
+            // this scale is used for positioning the dies on the canvas
+            this.verticalScale = this.createVerticalScale(wafermap.quadrant, gridDimensions, containerDiameter);
             this.dieDimensions = {
-                width: this.dieDimensions.width,
-                height: this.calculateGridHeight(gridMapDimensions.rows, this.containerDimensions.height)
+                width: this.calculateGridWidth(gridDimensions.cols, this.containerDimensions.width),
+                height: this.calculateGridHeight(gridDimensions.rows, this.containerDimensions.height)
             };
+            this.radius = containerDiameter / 2;
         }
-        calculateMapDimensions(dies) {
+        calculateGridDimensions(dies) {
             if (dies.length === 0 || dies[0] === undefined) {
                 return { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
             }
@@ -33536,12 +33516,12 @@ Instead styling against the role which is more general and likely a better appro
                 .range([0, containerHeight])
                 .bandwidth();
         }
-        calculateMarginWithAddition(baseAddition = 0) {
+        calculateMarginAddition(baseMargin, addedMargin) {
             return {
-                top: this.baseMargin.top + baseAddition,
-                right: this.baseMargin.right + baseAddition,
-                bottom: this.baseMargin.bottom + baseAddition,
-                left: this.baseMargin.top + baseAddition
+                top: baseMargin.top + addedMargin.top,
+                right: baseMargin.right + addedMargin.right,
+                bottom: baseMargin.bottom + addedMargin.bottom,
+                left: baseMargin.left + addedMargin.left
             };
         }
     }
@@ -33550,20 +33530,20 @@ Instead styling against the role which is more general and likely a better appro
      * Prerendering prepares render-ready dies data to be used by the rendering module
      */
     class Prerendering {
-        constructor(dies, colorScale, highlightedValues, horizontalScale, verticalScale, colorScaleMode, dieLabelsHidden, dieLabelsSuffix, maxCharacters, dieDimensions, margin) {
+        constructor(wafermap, horizontalScale, verticalScale, dieDimensions, margin) {
             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(colorScale, colorScaleMode);
-            this.labelsFontSize = this.calculateLabelsFontSize(dieDimensions, maxCharacters);
+            this.d3ColorScale = this.createD3ColorScale(wafermap.colorScale, wafermap.colorScaleMode);
+            this.labelsFontSize = this.calculateLabelsFontSize(dieDimensions, wafermap.maxCharacters);
             this.diesRenderInfo = [];
-            for (const die of dies) {
+            for (const die of wafermap.dies) {
                 this.diesRenderInfo.push({
                     x: horizontalScale(die.x) + margin.right,
                     y: verticalScale(die.y) + margin.top,
-                    fillStyle: this.calculateFillStyle(die.value, colorScaleMode, highlightedValues),
-                    text: this.buildLabel(die.value, maxCharacters, dieLabelsHidden, dieLabelsSuffix)
+                    fillStyle: this.calculateFillStyle(die.value, wafermap.colorScaleMode, wafermap.highlightedValues),
+                    text: this.buildLabel(die.value, wafermap.maxCharacters, wafermap.dieLabelsHidden, wafermap.dieLabelsSuffix)
                 });
             }
         }
@@ -33636,11 +33616,8 @@ Instead styling against the role which is more general and likely a better appro
      */
     class DataManager {
         constructor(wafermap) {
-            this.computations = new Computations(wafermap.dies, wafermap.quadrant, {
-                width: wafermap.canvasSideLength,
-                height: wafermap.canvasSideLength
-            });
-            this.prerendering = new Prerendering(wafermap.dies, wafermap.colorScale, wafermap.highlightedValues, this.computations.horizontalScale, this.computations.verticalScale, wafermap.colorScaleMode, wafermap.dieLabelsHidden, wafermap.dieLabelsSuffix, wafermap.maxCharacters, this.computations.dieDimensions, this.computations.margin);
+            this.computations = new Computations(wafermap);
+            this.prerendering = new Prerendering(wafermap, this.horizontalScale, this.verticalScale, this.dieDimensions, this.margin);
         }
         get containerDimensions() {
             return this.computations.containerDimensions;
@@ -33666,12 +33643,6 @@ Instead styling against the role which is more general and likely a better appro
         get diesRenderInfo() {
             return this.prerendering.diesRenderInfo;
         }
-        get mainCircleLocation() {
-            return {
-                x: this.computations.containerDimensions.width / 2,
-                y: this.computations.containerDimensions.height / 2
-            };
-        }
     }
 
     /**
@@ -33716,7 +33687,7 @@ Instead styling against the role which is more general and likely a better appro
             }
         }
         renderText() {
-            this.dieSize = this.dimensions.width
+            const dieSize = this.dimensions.width
                 * this.dimensions.height
                 * (this.wafermap.transform.k || 1);
             const fontsize = this.labelFontSize;
@@ -33724,17 +33695,17 @@ Instead styling against the role which is more general and likely a better appro
             this.context.fillStyle = '#ffffff';
             this.context.textAlign = 'center';
             this.context.lineCap = 'butt';
-            const aproxTextHeight = this.context.measureText('M');
-            if (this.dieSize >= 50) {
+            const approxTextHeight = this.context.measureText('M');
+            if (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);
+                        + approxTextHeight.width / 2, this.dimensions.width - (this.dimensions.width / 100) * 20);
                 }
             }
         }
         clearCanvas() {
-            this.context.clearRect(0, 0, this.wafermap.canvasSideLength * this.wafermap.transform.k, this.wafermap.canvasSideLength * this.wafermap.transform.k);
+            this.context.clearRect(0, 0, this.wafermap.canvasWidth * this.wafermap.transform.k, this.wafermap.canvasHeight * this.wafermap.transform.k);
         }
         scaleCanvas() {
             this.context.translate(this.wafermap.transform.x, this.wafermap.transform.y);
@@ -33770,15 +33741,14 @@ Instead styling against the role which is more general and likely a better appro
             const zoomBehavior = zoom()
                 .scaleExtent([
                 1.1,
-                this.getZoomMax(this.wafermap.canvasSideLength
-                    * this.wafermap.canvasSideLength, this.wafermap.dataManager.containerDimensions.width
+                this.getZoomMax(this.wafermap.canvasWidth * this.wafermap.canvasHeight, this.wafermap.dataManager.containerDimensions.width
                     * this.wafermap.dataManager.containerDimensions.height)
             ])
                 .translateExtent([
                 this.minExtentPoint,
                 [
-                    this.wafermap.canvasSideLength + this.extentPadding,
-                    this.wafermap.canvasSideLength + this.extentPadding
+                    this.wafermap.canvasWidth + this.extentPadding,
+                    this.wafermap.canvasHeight + this.extentPadding
                 ]
             ])
                 .filter((event) => {
@@ -33854,10 +33824,6 @@ Instead styling against the role which is more general and likely a better appro
              * @internal
              */
             this.renderQueued = false;
-            /**
-             * @internal
-             */
-            this.canvasSideLength = 0;
             /**
              * @internal
              */
@@ -33885,7 +33851,7 @@ Instead styling against the role which is more general and likely a better appro
          */
         render() {
             this.renderQueued = false;
-            this.initalizeInternalModules();
+            this.initializeInternalModules();
             this.renderer?.drawWafer();
         }
         queueRender() {
@@ -33897,7 +33863,7 @@ Instead styling against the role which is more general and likely a better appro
                 DOM.queueUpdate(() => this.render());
             }
         }
-        initalizeInternalModules() {
+        initializeInternalModules() {
             this.eventCoordinator?.detachEvents();
             this.dataManager = new DataManager(this);
             this.renderer = new RenderingModule(this);
@@ -33910,7 +33876,12 @@ Instead styling against the role which is more general and likely a better appro
                     return;
                 }
                 const { height, width } = entry.contentRect;
-                this.canvasSideLength = Math.min(height, width);
+                // Updating the canvas size clears its contents so update it explicitly instead of
+                // via template bindings so we can confirm that it happens before render
+                this.canvas.width = width;
+                this.canvas.height = height;
+                this.canvasWidth = width;
+                this.canvasHeight = height;
             });
             resizeObserver.observe(this);
             return resizeObserver;
@@ -33945,13 +33916,11 @@ Instead styling against the role which is more general and likely a better appro
         transformChanged() {
             this.queueRender();
         }
-        canvasSideLengthChanged() {
-            if (this.canvasSideLength !== undefined
-                && this.canvasSideLength !== 0) {
-                this.canvas.width = this.canvasSideLength;
-                this.canvas.height = this.canvasSideLength;
-                this.queueRender();
-            }
+        canvasWidthChanged() {
+            this.queueRender();
+        }
+        canvasHeightChanged() {
+            this.queueRender();
         }
     }
     __decorate$1([
@@ -33984,7 +33953,10 @@ Instead styling against the role which is more general and likely a better appro
     ], WaferMap.prototype, "colorScaleMode", void 0);
     __decorate$1([
         observable
-    ], WaferMap.prototype, "canvasSideLength", void 0);
+    ], WaferMap.prototype, "canvasWidth", void 0);
+    __decorate$1([
+        observable
+    ], WaferMap.prototype, "canvasHeight", void 0);
     __decorate$1([
         observable
     ], WaferMap.prototype, "transform", void 0);