@ni/nimble-components 18.5.3 → 18.5.5

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) {
@@ -33139,6 +33172,18 @@ Instead styling against the role which is more general and likely a better appro
       return (reverse ? -1 : 1) * (inc < 0 ? 1 / -inc : inc);
     }
 
+    function quantileSorted(values, p, valueof = number$1) {
+      if (!(n = values.length) || isNaN(p = +p)) return;
+      if (p <= 0 || n < 2) return +valueof(values[0], 0, values);
+      if (p >= 1) return +valueof(values[n - 1], n - 1, values);
+      var n,
+          i = (n - 1) * p,
+          i0 = Math.floor(i),
+          value0 = +valueof(values[i0], i0, values),
+          value1 = +valueof(values[i0 + 1], i0 + 1, values);
+      return value0 + (value1 - value0) * (i - i0);
+    }
+
     function range(start, stop, step) {
       start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
 
@@ -33837,6 +33882,61 @@ Instead styling against the role which is more general and likely a better appro
       return linearish(scale);
     }
 
+    function quantile() {
+      var domain = [],
+          range = [],
+          thresholds = [],
+          unknown;
+
+      function rescale() {
+        var i = 0, n = Math.max(1, range.length);
+        thresholds = new Array(n - 1);
+        while (++i < n) thresholds[i - 1] = quantileSorted(domain, i / n);
+        return scale;
+      }
+
+      function scale(x) {
+        return x == null || isNaN(x = +x) ? unknown : range[bisect(thresholds, x)];
+      }
+
+      scale.invertExtent = function(y) {
+        var i = range.indexOf(y);
+        return i < 0 ? [NaN, NaN] : [
+          i > 0 ? thresholds[i - 1] : domain[0],
+          i < thresholds.length ? thresholds[i] : domain[domain.length - 1]
+        ];
+      };
+
+      scale.domain = function(_) {
+        if (!arguments.length) return domain.slice();
+        domain = [];
+        for (let d of _) if (d != null && !isNaN(d = +d)) domain.push(d);
+        domain.sort(ascending);
+        return rescale();
+      };
+
+      scale.range = function(_) {
+        return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
+      };
+
+      scale.unknown = function(_) {
+        return arguments.length ? (unknown = _, scale) : unknown;
+      };
+
+      scale.quantiles = function() {
+        return thresholds.slice();
+      };
+
+      scale.copy = function() {
+        return quantile()
+            .domain(domain)
+            .range(range)
+            .unknown(unknown);
+      };
+
+      return initRange.apply(scale, arguments);
+    }
+
     const WaferMapQuadrant = {
         bottomLeft: 'bottom-left',
         bottomRight: 'bottom-right',
@@ -33849,6 +33949,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'
@@ -33859,13 +33963,7 @@ Instead styling against the role which is more general and likely a better appro
      */
     class Computations {
         constructor(wafermap) {
-            this.baseMargin = {
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0
-            };
-            this.defaultAlign = 0.5;
+            this.defaultPadding = 0;
             this.baseMarginPercentage = 0.04;
             const canvasDimensions = {
                 width: wafermap.canvasWidth,
@@ -33890,11 +33988,13 @@ Instead styling against the role which is more general and likely a better appro
             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.invertedHorizontalScale = this.createInvertedHorizontalScale(wafermap.quadrant, gridDimensions, containerDiameter);
             // this scale is used for positioning the dies on the canvas
             this.verticalScale = this.createVerticalScale(wafermap.quadrant, gridDimensions, containerDiameter);
+            this.invertedVerticalScale = this.createInvertedVerticalScale(wafermap.quadrant, gridDimensions, containerDiameter);
             this.dieDimensions = {
-                width: this.calculateGridWidth(gridDimensions.cols, this.containerDimensions.width),
-                height: this.calculateGridHeight(gridDimensions.rows, this.containerDimensions.height)
+                width: this.horizontalScale.bandwidth(),
+                height: this.verticalScale.bandwidth()
             };
             this.radius = containerDiameter / 2;
         }
@@ -33931,42 +34031,46 @@ Instead styling against the role which is more general and likely a better appro
             };
         }
         createHorizontalScale(axisLocation, grid, containerWidth) {
+            const scale = band()
+                .domain(range(grid.origin.x, grid.origin.x + grid.cols))
+                .paddingInner(0)
+                .paddingOuter(0)
+                .align(0)
+                .round(false);
             if (axisLocation === WaferMapQuadrant.bottomLeft
                 || axisLocation === WaferMapQuadrant.topLeft) {
-                return linear()
-                    .domain([grid.origin.x, grid.origin.x + grid.cols])
-                    .range([0, containerWidth]);
+                return scale.range([0, containerWidth]);
+            }
+            return scale.range([containerWidth, 0]);
+        }
+        createInvertedHorizontalScale(axisLocation, grid, containerWidth) {
+            const scale = quantile().domain([0, containerWidth]);
+            if (axisLocation === WaferMapQuadrant.bottomLeft
+                || axisLocation === WaferMapQuadrant.topLeft) {
+                return scale.range(range(grid.origin.x, grid.origin.x + grid.cols));
             }
-            return linear()
-                .domain([grid.origin.x - 1, grid.origin.x + grid.cols - 1])
-                .range([containerWidth, 0]);
+            return scale.range(range(grid.origin.x, grid.origin.x + grid.cols).reverse());
         }
         createVerticalScale(axisLocation, grid, containerHeight) {
+            const scale = band()
+                .domain(range(grid.origin.y, grid.origin.y + grid.rows))
+                .paddingInner(this.defaultPadding)
+                .paddingOuter(0)
+                .align(0)
+                .round(false);
             if (axisLocation === WaferMapQuadrant.bottomLeft
                 || axisLocation === WaferMapQuadrant.bottomRight) {
-                return linear()
-                    .domain([grid.origin.y - 1, grid.origin.y + grid.rows - 1])
-                    .range([containerHeight, 0]);
-            }
-            return linear()
-                .domain([grid.origin.y, grid.origin.y + grid.rows])
-                .range([0, containerHeight]);
-        }
-        calculateGridWidth(cols, containerWidth) {
-            return band()
-                .align(this.defaultAlign)
-                .padding(0)
-                .domain(this.horizontalScale.ticks(cols))
-                .range([0, containerWidth])
-                .bandwidth();
-        }
-        calculateGridHeight(rows, containerHeight) {
-            return band()
-                .align(this.defaultAlign)
-                .padding(0)
-                .domain(this.verticalScale.ticks(rows))
-                .range([0, containerHeight])
-                .bandwidth();
+                return scale.range([containerHeight, 0]);
+            }
+            return scale.range([0, containerHeight]);
+        }
+        createInvertedVerticalScale(axisLocation, grid, containerHeight) {
+            const scale = quantile().domain([0, containerHeight]);
+            if (axisLocation === WaferMapQuadrant.bottomLeft
+                || axisLocation === WaferMapQuadrant.bottomRight) {
+                return scale.range(range(grid.origin.y, grid.origin.y + grid.rows).reverse());
+            }
+            return scale.range(range(grid.origin.y, grid.origin.y + grid.rows));
         }
         calculateMarginAddition(baseMargin, addedMargin) {
             return {
@@ -33991,9 +34095,11 @@ Instead styling against the role which is more general and likely a better appro
             this.labelsFontSize = this.calculateLabelsFontSize(dieDimensions, wafermap.maxCharacters);
             this.diesRenderInfo = [];
             for (const die of wafermap.dies) {
+                const scaledX = horizontalScale(die.x) ?? 0;
+                const scaledY = verticalScale(die.y) ?? 0;
                 this.diesRenderInfo.push({
-                    x: horizontalScale(die.x) + margin.right,
-                    y: verticalScale(die.y) + margin.top,
+                    x: scaledX + margin.right,
+                    y: scaledY + margin.top,
                     fillStyle: this.calculateFillStyle(die.value, wafermap.colorScaleMode, wafermap.highlightedValues),
                     text: this.buildLabel(die.value, wafermap.maxCharacters, wafermap.dieLabelsHidden, wafermap.dieLabelsSuffix)
                 });
@@ -34070,6 +34176,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;
@@ -34086,15 +34193,24 @@ Instead styling against the role which is more general and likely a better appro
         get horizontalScale() {
             return this.computations.horizontalScale;
         }
+        get invertedHorizontalScale() {
+            return this.computations.invertedHorizontalScale;
+        }
         get verticalScale() {
             return this.computations.verticalScale;
         }
+        get invertedVerticalScale() {
+            return this.computations.invertedVerticalScale;
+        }
         get labelsFontSize() {
             return this.prerendering.labelsFontSize;
         }
         get diesRenderInfo() {
             return this.prerendering.diesRenderInfo;
         }
+        getWaferMapDie(point) {
+            return this.dataMap.get(`${point.x}_${point.y}`);
+        }
     }
 
     /**
@@ -34103,18 +34219,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 +34267,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 +34281,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 +34358,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.invertedHorizontalScale(mousePosition.x - this.wafermap.dataManager.margin.left));
+            const y = yRoundFunction(this.wafermap.dataManager.invertedVerticalScale(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 +34422,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 +34443,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 +34466,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 +34517,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 +34582,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 +34624,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);