@ni/nimble-components 17.0.5 → 17.0.7

package/dist/all-components-bundle.js

@@ -25098,45 +25098,47 @@
      */
     class TableValidator {
         constructor() {
-            this.duplicateRowId = false;
-            this.missingRowId = false;
-            this.invalidRowId = false;
+            this.duplicateRecordId = false;
+            this.missingRecordId = false;
+            this.invalidRecordId = false;
         }
         getValidity() {
             return {
-                duplicateRowId: this.duplicateRowId,
-                missingRowId: this.missingRowId,
-                invalidRowId: this.invalidRowId
+                duplicateRecordId: this.duplicateRecordId,
+                missingRecordId: this.missingRecordId,
+                invalidRecordId: this.invalidRecordId
             };
         }
         isValid() {
             return Object.values(this.getValidity()).every(x => x === false);
         }
-        validateDataIds(data, idFieldName) {
+        validateRecordIds(data, idFieldName) {
             // Start off by assuming all IDs are valid.
-            this.duplicateRowId = false;
-            this.missingRowId = false;
-            this.invalidRowId = false;
-            if (idFieldName == null) {
+            this.duplicateRecordId = false;
+            this.missingRecordId = false;
+            this.invalidRecordId = false;
+            if (idFieldName === undefined || idFieldName === null) {
                 return true;
             }
             const ids = new Set();
             for (const record of data) {
                 if (!Object.prototype.hasOwnProperty.call(record, idFieldName)) {
-                    this.missingRowId = true;
+                    this.missingRecordId = true;
                     continue;
                 }
                 const id = record[idFieldName];
-                if (typeof id !== 'string' || id === '') {
-                    this.invalidRowId = true;
+                if (typeof id !== 'string') {
+                    this.invalidRecordId = true;
                     continue;
                 }
                 if (ids.has(id)) {
-                    this.duplicateRowId = true;
+                    this.duplicateRecordId = true;
                 }
                 ids.add(id);
             }
-            return !this.missingRowId && !this.invalidRowId && !this.duplicateRowId;
+            return (!this.missingRecordId
+                && !this.invalidRecordId
+                && !this.duplicateRecordId);
         }
     }
 
@@ -25359,6 +25361,9 @@
             return keys.every(key => key !== undefined);
         }
     }
+    __decorate$1([
+        attr({ attribute: 'record-id' })
+    ], TableRow.prototype, "recordId", void 0);
     __decorate$1([
         observable
     ], TableRow.prototype, "dataRecord", void 0);
@@ -25402,6 +25407,7 @@
                 ${repeat(x => x.tableData, html `
                     <${DesignSystem.tagFor(TableRow)}
                         class="row"
+                        record-id="${x => x.id}"
                         :dataRecord="${x => x.record}"
                         :columns="${(_, c) => c.parent.columns}"
                     >
@@ -25445,13 +25451,6 @@
                 data: [],
                 onStateChange: (_) => { },
                 getCoreRowModel: getCoreRowModel(),
-                getRowId: record => {
-                    if (this.idFieldName) {
-                        return record[this.idFieldName];
-                    }
-                    // Return a falsey value to use the default ID from TanStack.
-                    return '';
-                },
                 columns: [],
                 state: {},
                 renderFallbackValue: null,
@@ -25481,18 +25480,22 @@
             return this.tableValidator.isValid();
         }
         trySetData(newData) {
-            const areIdsValid = this.tableValidator.validateDataIds(newData, this.idFieldName);
-            if (areIdsValid) {
-                this.updateTableOptions({ data: newData });
-            }
-            else {
-                this.updateTableOptions({ data: [] });
-            }
+            const areIdsValid = this.tableValidator.validateRecordIds(newData, this.idFieldName);
+            const getRowIdFunction = this.idFieldName === null || this.idFieldName === undefined
+                ? undefined
+                : (record) => record[this.idFieldName];
+            this.updateTableOptions({
+                data: areIdsValid ? newData : [],
+                getRowId: getRowIdFunction
+            });
         }
         refreshRows() {
             const rows = this.table.getRowModel().rows;
             this.tableData = rows.map(row => {
-                const rowState = { record: row.original };
+                const rowState = {
+                    record: row.original,
+                    id: row.id
+                };
                 return rowState;
             });
         }
@@ -26751,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>
@@ -26789,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;
     }
@@ -26826,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 {
@@ -29868,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";
@@ -32486,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() {
@@ -32518,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());