@ni/nimble-components 17.0.0 → 17.0.2

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.0",
+  "version": "17.0.2",
   "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",