@ni/nimble-components 18.5.3 → 18.5.4

package/dist/all-components-bundle.js

@@ -27121,7 +27121,6 @@
         --ni-private-table-cell-action-menu-display: block;
     }
 
-    :host(.hover) nimble-table-cell,
     :host(:hover) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
@@ -32901,6 +32900,14 @@ Instead styling against the role which is more general and likely a better appro
             </g>
         </svg>
         <canvas class="wafer-map-canvas" ${ref('canvas')}></canvas>
+        <svg class="hover-layer">
+            <rect
+                class="hover-rect ${x => x.hoverOpacity}"
+                transform="${x => x.hoverTransform}"
+                width="${x => x.hoverWidth}"
+                height="${x => x.hoverHeight}"
+            />
+        </svg>
     </div>
 `;
 
@@ -32961,6 +32968,32 @@ Instead styling against the role which is more general and likely a better appro
         display: inline-block;
         position: absolute;
     }
+
+    .hover-layer {
+        position: absolute;
+        pointer-events: none;
+        width: 100%;
+        height: 100%;
+    }
+
+    .hover-rect {
+        fill: transparent;
+        stroke: white;
+        outline-style: solid;
+        outline-color: ${DigitalGreenLight};
+    }
+
+    .hover-rect.show {
+        opacity: 1;
+        stroke-width: 2px;
+        outline-width: 2px;
+    }
+
+    .hover-rect.hide {
+        opacity: 0;
+        stroke-width: 0px;
+        outline-width: 0px;
+    }
 `;
 
     function ascending(a, b) {
@@ -33849,6 +33882,10 @@ Instead styling against the role which is more general and likely a better appro
         left: 'left',
         right: 'right'
     };
+    const HoverDieOpacity = {
+        show: 'show',
+        hide: 'hide'
+    };
     const WaferMapColorScaleMode = {
         linear: 'linear',
         ordinal: 'ordinal'
@@ -34070,6 +34107,7 @@ Instead styling against the role which is more general and likely a better appro
         constructor(wafermap) {
             this.computations = new Computations(wafermap);
             this.prerendering = new Prerendering(wafermap, this.horizontalScale, this.verticalScale, this.dieDimensions, this.margin);
+            this.dataMap = new Map(wafermap.dies.map(die => [`${die.x}_${die.y}`, die]));
         }
         get containerDimensions() {
             return this.computations.containerDimensions;
@@ -34095,6 +34133,9 @@ Instead styling against the role which is more general and likely a better appro
         get diesRenderInfo() {
             return this.prerendering.diesRenderInfo;
         }
+        getWaferMapDie(point) {
+            return this.dataMap.get(`${point.x}_${point.y}`);
+        }
     }
 
     /**
@@ -34103,18 +34144,40 @@ Instead styling against the role which is more general and likely a better appro
     class RenderingModule {
         constructor(wafermap) {
             this.wafermap = wafermap;
-            this.context = wafermap.canvas.getContext('2d');
             this.dies = wafermap.dataManager.diesRenderInfo;
             this.dimensions = wafermap.dataManager.dieDimensions;
             this.labelFontSize = wafermap.dataManager.labelsFontSize;
         }
         drawWafer() {
-            this.context.save();
+            this.wafermap.canvasContext.save();
             this.clearCanvas();
             this.scaleCanvas();
             this.renderDies();
             this.renderText();
-            this.context.restore();
+            this.wafermap.canvasContext.restore();
+            this.renderHover();
+        }
+        renderHover() {
+            this.wafermap.hoverWidth = this.wafermap.dataManager.dieDimensions.width
+                * this.wafermap.transform.k;
+            this.wafermap.hoverHeight = this.wafermap.dataManager.dieDimensions.height
+                * this.wafermap.transform.k;
+            this.wafermap.hoverOpacity = this.wafermap.hoverDie === undefined
+                ? HoverDieOpacity.hide
+                : HoverDieOpacity.show;
+            this.wafermap.hoverTransform = this.calculateHoverTransform();
+        }
+        calculateHoverTransform() {
+            if (this.wafermap.hoverDie !== undefined) {
+                const scaledX = this.wafermap.dataManager.horizontalScale(this.wafermap.hoverDie.x);
+                const scaledY = this.wafermap.dataManager.verticalScale(this.wafermap.hoverDie.y);
+                const transformedPoint = this.wafermap.transform.apply([
+                    scaledX + this.wafermap.dataManager.margin.left,
+                    scaledY + this.wafermap.dataManager.margin.top
+                ]);
+                return `translate(${transformedPoint[0]}, ${transformedPoint[1]})`;
+            }
+            return '';
         }
         renderDies() {
             this.dies.sort((a, b) => {
@@ -34129,12 +34192,12 @@ Instead styling against the role which is more general and likely a better appro
             let prev;
             for (const die of this.dies) {
                 if (!prev) {
-                    this.context.fillStyle = die.fillStyle;
+                    this.wafermap.canvasContext.fillStyle = die.fillStyle;
                 }
                 if (prev && die.fillStyle !== prev.fillStyle && die.fillStyle) {
-                    this.context.fillStyle = die.fillStyle;
+                    this.wafermap.canvasContext.fillStyle = die.fillStyle;
                 }
-                this.context.fillRect(die.x, die.y, this.dimensions.width, this.dimensions.height);
+                this.wafermap.canvasContext.fillRect(die.x, die.y, this.dimensions.width, this.dimensions.height);
                 prev = die;
             }
         }
@@ -34143,25 +34206,25 @@ Instead styling against the role which is more general and likely a better appro
                 * this.dimensions.height
                 * (this.wafermap.transform.k || 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 approxTextHeight = this.context.measureText('M');
+            this.wafermap.canvasContext.font = `${fontsize.toString()}px sans-serif`;
+            this.wafermap.canvasContext.fillStyle = '#ffffff';
+            this.wafermap.canvasContext.textAlign = 'center';
+            this.wafermap.canvasContext.lineCap = 'butt';
+            const approxTextHeight = this.wafermap.canvasContext.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.wafermap.canvasContext.fillText(die.text, die.x + this.dimensions.width / 2, die.y
                         + this.dimensions.height / 2
                         + approxTextHeight.width / 2, this.dimensions.width - (this.dimensions.width / 100) * 20);
                 }
             }
         }
         clearCanvas() {
-            this.context.clearRect(0, 0, this.wafermap.canvasWidth * this.wafermap.transform.k, this.wafermap.canvasHeight * this.wafermap.transform.k);
+            this.wafermap.canvasContext.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);
-            this.context.scale(this.wafermap.transform.k, this.wafermap.transform.k);
+            this.wafermap.canvasContext.translate(this.wafermap.transform.x, this.wafermap.transform.y);
+            this.wafermap.canvasContext.scale(this.wafermap.transform.k, this.wafermap.transform.k);
         }
     }
 
@@ -34220,6 +34283,61 @@ Instead styling against the role which is more general and likely a better appro
         }
     }
 
+    /**
+     * HoverHandler deals with user interactions and events like hovering
+     */
+    class HoverHandler {
+        constructor(wafermap) {
+            this.wafermap = wafermap;
+        }
+        mousemove(event) {
+            const mousePosition = {
+                x: event.offsetX,
+                y: event.offsetY
+            };
+            if (!this.hoversOverDie(mousePosition)) {
+                this.wafermap.hoverDie = undefined;
+                return;
+            }
+            // get original mouse position in case we are in zoom.
+            const invertedPoint = this.wafermap.transform.invert([
+                mousePosition.x,
+                mousePosition.y
+            ]);
+            const dieCoordinates = this.calculateDieCoordinates({
+                x: invertedPoint[0],
+                y: invertedPoint[1]
+            });
+            this.wafermap.hoverDie = this.wafermap.dataManager.getWaferMapDie(dieCoordinates);
+        }
+        mouseout(_event) {
+            this.wafermap.hoverDie = undefined;
+        }
+        calculateDieCoordinates(mousePosition) {
+            const axisLocation = this.wafermap.quadrant;
+            const xRoundFunction = axisLocation === WaferMapQuadrant.bottomLeft
+                || axisLocation === WaferMapQuadrant.topLeft
+                ? Math.floor
+                : Math.ceil;
+            const yRoundFunction = axisLocation === WaferMapQuadrant.topLeft
+                || axisLocation === WaferMapQuadrant.topRight
+                ? Math.floor
+                : Math.ceil;
+            // go to x and y scale to get the x,y values of the die.
+            const x = xRoundFunction(this.wafermap.dataManager.horizontalScale.invert(mousePosition.x - this.wafermap.dataManager.margin.left));
+            const y = yRoundFunction(this.wafermap.dataManager.verticalScale.invert(mousePosition.y - this.wafermap.dataManager.margin.top));
+            return { x, y };
+        }
+        hoversOverDie(mousePosition) {
+            const rgba = this.wafermap.canvasContext.getImageData(mousePosition.x, mousePosition.y, 1, 1).data;
+            let rgbaSum = 0;
+            for (const color of rgba) {
+                rgbaSum += color;
+            }
+            return rgbaSum > 0;
+        }
+    }
+
     /**
      * EventCoordinator deals with user interactions and events
      */
@@ -34229,21 +34347,16 @@ Instead styling against the role which is more general and likely a better appro
             this.onWheelMove = (event) => {
                 event.preventDefault();
             };
-            this.onMouseMove = () => {
-                // TODO HoverHandler - mousemove(e) callback
+            this.onMouseMove = (event) => {
+                this.hoverHandler.mousemove(event);
             };
-            this.onMouseOut = () => {
-                // TODO HoverHandler - mouseout() callback
+            this.onMouseOut = (event) => {
+                this.hoverHandler.mouseout(event);
             };
             this.zoomHandler = new ZoomHandler(wafermap);
-            // TODO HoverHandler - initialization
-            // TODO HoverHandler -  create a hoverDie element
+            this.hoverHandler = new HoverHandler(wafermap);
             this.attachEvents();
         }
-        get selectedDie() {
-            // TODO HoverHandler - return the last selected die when called
-            return undefined;
-        }
         detachEvents() {
             this.wafermap.removeEventListener('mousemove', this.onMouseMove);
             this.wafermap.removeEventListener('mouseout', this.onMouseOut);
@@ -34255,8 +34368,6 @@ Instead styling against the role which is more general and likely a better appro
             this.wafermap.canvas.addEventListener('wheel', this.onWheelMove, {
                 passive: false
             });
-            // Wafermap callbacks
-            // TODO HoverHandler - configure the callback to be fired from HoverHandler when a new die is selected
         }
     }
 
@@ -34280,18 +34391,34 @@ Instead styling against the role which is more general and likely a better appro
              * @internal
              */
             this.transform = identity$2;
+            /**
+             * @internal
+             */
+            this.hoverTransform = '';
+            /**
+             * @internal
+             */
+            this.hoverOpacity = HoverDieOpacity.hide;
+            /**
+             * @internal
+             */
+            this.hoverWidth = 0;
+            /**
+             * @internal
+             */
+            this.hoverHeight = 0;
             this.highlightedValues = [];
             this.dies = [];
             this.colorScale = {
                 colors: [],
                 values: []
             };
-            this.emitDieSelected = (die) => {
-                this.$emit('die-selected', { detail: { die } });
-            };
         }
         connectedCallback() {
             super.connectedCallback();
+            this.canvasContext = this.canvas.getContext('2d', {
+                willReadFrequently: true
+            });
             this.resizeObserver = this.createResizeObserver();
         }
         disconnectedCallback() {
@@ -34315,6 +34442,12 @@ Instead styling against the role which is more general and likely a better appro
                 DOM.queueUpdate(() => this.render());
             }
         }
+        queueRenderHover() {
+            if (!this.$fastController.isConnected) {
+                return;
+            }
+            DOM.queueUpdate(() => this.renderer?.renderHover());
+        }
         initializeInternalModules() {
             this.eventCoordinator?.detachEvents();
             this.dataManager = new DataManager(this);
@@ -34374,6 +34507,10 @@ Instead styling against the role which is more general and likely a better appro
         canvasHeightChanged() {
             this.queueRender();
         }
+        hoverDieChanged() {
+            this.$emit('die-hover', { currentDie: this.hoverDie });
+            this.queueRenderHover();
+        }
     }
     __decorate$1([
         attr
@@ -34412,6 +34549,21 @@ Instead styling against the role which is more general and likely a better appro
     __decorate$1([
         observable
     ], WaferMap.prototype, "transform", void 0);
+    __decorate$1([
+        observable
+    ], WaferMap.prototype, "hoverTransform", void 0);
+    __decorate$1([
+        observable
+    ], WaferMap.prototype, "hoverOpacity", void 0);
+    __decorate$1([
+        observable
+    ], WaferMap.prototype, "hoverWidth", void 0);
+    __decorate$1([
+        observable
+    ], WaferMap.prototype, "hoverHeight", void 0);
+    __decorate$1([
+        observable
+    ], WaferMap.prototype, "hoverDie", void 0);
     __decorate$1([
         observable
     ], WaferMap.prototype, "highlightedValues", void 0);