@ni/nimble-components 17.0.1 → 17.0.3

package/dist/esm/table-column/text/template.js

@@ -0,0 +1,11 @@
+import { html } from '@microsoft/fast-element';
+export const cellTemplate = html `
+    <span
+        class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
+    >
+        ${x => (typeof x.cellRecord.value === 'string'
+    ? x.cellRecord.value
+    : x.columnConfig.placeholder)}
+    </span>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/table-column/text/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/text/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAE/B;;iBAEgB,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;;UAEzE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ;IAC9C,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK;IACpB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC;;CAEpC,CAAC"}

package/dist/esm/wafer-map/index.d.ts

@@ -22,14 +22,19 @@ export declare class WaferMap extends FoundationElement {
     /**
      * @internal
      */
-    canvasSideLength: number | undefined;
+    readonly zoomContainer: HTMLElement;
+    /**
+     * @internal
+     */
+    canvasSideLength?: number;
     highlightedValues: string[];
     dies: WaferMapDie[];
     colorScale: WaferMapColorScale;
     private renderQueued;
-    private dataManager;
-    private renderer;
-    private resizeObserver;
+    private dataManager?;
+    private renderer?;
+    private resizeObserver?;
+    private zoomHandler?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

package/dist/esm/wafer-map/index.js

@@ -6,6 +6,7 @@ import { styles } from './styles';
 import { WaferMapColorScaleMode, WaferMapOrientation, WaferMapQuadrant } from './types';
 import { DataManager } from './modules/data-manager';
 import { RenderingModule } from './modules/rendering';
+import { ZoomHandler } from './modules/zoom-handler';
 /**
  * A nimble-styled WaferMap
  */
@@ -37,10 +38,14 @@ export class WaferMap extends FoundationElement {
             this.canvasSideLength = Math.min(height, width);
         });
         this.resizeObserver.observe(this);
+        this.canvas.addEventListener('wheel', event => event.preventDefault(), {
+            passive: false
+        });
         this.queueRender();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.canvas.removeEventListener('wheel', event => event.preventDefault());
         this.resizeObserver.unobserve(this);
     }
     /**
@@ -55,6 +60,8 @@ export class WaferMap extends FoundationElement {
         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.zoomHandler = new ZoomHandler(this.canvas, this.zoomContainer, this.dataManager, this.renderer, this.canvasSideLength);
+        this.zoomHandler.attachZoomBehavior();
         this.renderer.drawWafer();
     }
     quadrantChanged() {
@@ -90,6 +97,7 @@ export class WaferMap extends FoundationElement {
             this.canvas.width = this.canvasSideLength;
             this.canvas.height = this.canvasSideLength;
         }
+        this.zoomHandler?.resetTransform();
         this.queueRender();
     }
     queueRender() {

package/dist/esm/wafer-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wafer-map/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wafer-map/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/wafer-map/modules/zoom-handler.d.ts

@@ -0,0 +1,24 @@
+import type { DataManager } from './data-manager';
+import type { RenderingModule } from './rendering';
+/**
+ * ZoomHandler deals with user interactions and events like zooming
+ */
+export declare class ZoomHandler {
+    private readonly canvas;
+    private readonly zoomContainer;
+    private readonly dataManager;
+    private readonly renderingModule;
+    private readonly canvasLength;
+    private zoomTransform;
+    private readonly minScale;
+    private readonly minExtentPoint;
+    private readonly extentPadding;
+    private zoomBehavior;
+    constructor(canvas: HTMLCanvasElement, zoomContainer: HTMLElement, dataManager: DataManager, renderingModule: RenderingModule, canvasLength: number);
+    attachZoomBehavior(): void;
+    resetTransform(): void;
+    private createZoomBehavior;
+    private getZoomMax;
+    private clearCanvas;
+    private scaleCanvas;
+}

package/dist/esm/wafer-map/modules/zoom-handler.js

@@ -0,0 +1,87 @@
+import { select } from 'd3-selection';
+import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
+/**
+ * ZoomHandler deals with user interactions and events like zooming
+ */
+export class ZoomHandler {
+    constructor(canvas, zoomContainer, dataManager, renderingModule, canvasLength) {
+        this.canvas = canvas;
+        this.zoomContainer = zoomContainer;
+        this.dataManager = dataManager;
+        this.renderingModule = renderingModule;
+        this.canvasLength = canvasLength;
+        this.zoomTransform = zoomIdentity;
+        this.minScale = 1.1;
+        this.minExtentPoint = [-100, -100];
+        this.extentPadding = 100;
+    }
+    attachZoomBehavior() {
+        this.zoomBehavior = this.createZoomBehavior();
+        this.zoomBehavior(select(this.canvas));
+    }
+    resetTransform() {
+        const canvasContext = this.canvas.getContext('2d');
+        if (canvasContext === null) {
+            return;
+        }
+        this.zoomTransform = zoomIdentity;
+        this.clearCanvas(canvasContext, this.canvasLength, this.canvasLength);
+        this.scaleCanvas(canvasContext, zoomIdentity.x, zoomIdentity.y, zoomIdentity.k);
+        this.renderingModule.drawWafer();
+        this.zoomBehavior?.transform(select(this.canvas), zoomIdentity);
+    }
+    createZoomBehavior() {
+        const zoomBehavior = zoom()
+            .scaleExtent([
+            1.1,
+            this.getZoomMax(this.canvasLength * this.canvasLength, this.dataManager.containerDimensions.width
+                * this.dataManager.containerDimensions.height)
+        ])
+            .translateExtent([
+            this.minExtentPoint,
+            [
+                this.canvasLength + this.extentPadding,
+                this.canvasLength + this.extentPadding
+            ]
+        ])
+            .filter((event) => {
+            const transform = zoomTransform(this.canvas);
+            return transform.k >= this.minScale || event.type === 'wheel';
+        })
+            .on('zoom', (event) => {
+            const transform = event.transform;
+            const canvasContext = this.canvas.getContext('2d');
+            if (canvasContext === null) {
+                return;
+            }
+            canvasContext.save();
+            if (transform.k === this.minScale) {
+                this.zoomTransform = zoomIdentity;
+                this.clearCanvas(canvasContext, this.canvasLength, this.canvasLength);
+                this.scaleCanvas(canvasContext, zoomIdentity.x, zoomIdentity.y, zoomIdentity.k);
+                this.renderingModule.drawWafer();
+                zoomBehavior.transform(select(this.canvas), zoomIdentity);
+            }
+            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();
+            }
+            canvasContext.restore();
+            this.zoomContainer.setAttribute('transform', this.zoomTransform.toString());
+        });
+        return zoomBehavior;
+    }
+    getZoomMax(canvasArea, dataArea) {
+        return Math.ceil((dataArea / canvasArea) * 100);
+    }
+    clearCanvas(context, width, height) {
+        context.clearRect(0, 0, width, height);
+    }
+    scaleCanvas(context, x = 0, y = 0, scale = 1) {
+        context.translate(x, y);
+        context.scale(scale, scale);
+    }
+}
+//# sourceMappingURL=zoom-handler.js.map

package/dist/esm/wafer-map/modules/zoom-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-handler.js","sourceRoot":"","sources":["../../../../src/wafer-map/modules/zoom-handler.ts"],"names":[],"mappings":"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"}

package/dist/esm/wafer-map/styles.js

@@ -22,19 +22,30 @@ export const styles = css `
         position: absolute;
     }
 
-    .svg-root.top {
+    .circle-base {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        fill: white;
+    }
+
+    .notch {
+        transform-origin: center center;
+    }
+
+    .notch.top {
         transform: rotate(-90deg);
     }
 
-    .svg-root.right {
+    .notch.right {
         transform: rotate(0deg);
     }
 
-    .svg-root.left {
+    .notch.left {
         transform: rotate(180deg);
     }
 
-    .svg-root.bottom {
+    .notch.bottom {
         transform: rotate(90deg);
     }
 

package/dist/esm/wafer-map/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/wafer-map/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE3E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAsDD,WAAW;kBACjB,WAAW;;;;;;;;;;;;;;;;CAgB5B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/wafer-map/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE3E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAiED,WAAW;kBACjB,WAAW;;;;;;;;;;;;;;;;CAgB5B,CAAC"}

package/dist/esm/wafer-map/template.js

@@ -1,20 +1,22 @@
 import { html, ref } from '@microsoft/fast-element';
 export 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"
-                    />
-                </svg>
+        <svg class="svg-root">
+            <g class="zoom-container" ${ref('zoomContainer')}>
+                <g class="notch ${x => x.orientation}">
+                    <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>
             </g>
         </svg>
         <div class="wafer-map-area">

package/dist/esm/wafer-map/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/wafer-map/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;+BAEP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;;;;;;;;;;;;;;;;;+CAiBF,GAAG,CAAC,QAAQ,CAAC;;;CAG3D,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/wafer-map/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;;wCAGE,GAAG,CAAC,eAAe,CAAC;kCAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;;;;;;;;;;;;;;;;;+CAiBL,GAAG,CAAC,QAAQ,CAAC;;;CAG3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "17.0.1",
+  "version": "17.0.3",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -54,6 +54,10 @@
     "@tanstack/table-core": "^8.7.0",
     "@types/d3": "^7.4.0",
     "@types/d3-scale": "^4.0.2",
+    "@types/d3-zoom": "^3.0.0",
+    "@types/d3-selection": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
     "d3-random": "^3.0.1",
     "d3-scale": "^4.0.2",
     "hex-rgb": "^5.0.0",