@ni/nimble-components 16.1.4 → 16.1.6

package/dist/all-components-bundle.min.js

@@ -4725,10 +4725,17 @@ const mg=ve`
     ${fs("flex")}
 
     .table-container {
+        display: flex;
+        flex-direction: column;
         width: 100%;
-        height: 100%;
         font: ${qa};
         color: ${ja};
+        overflow: auto;
+    }
+
+    .header-container {
+        position: sticky;
+        top: 0;
     }
 
     .header-row {
@@ -4805,7 +4812,7 @@ no.getOrCreate().withPrefix("nimble").register(zg())
 const Mg=U`
     <template role="table">
         <div class="table-container">
-            <div role="rowgroup">
+            <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
                     ${He((e=>e.columnHeaders),U`
                         <${no.tagFor(wg)} class="header">
@@ -5812,22 +5819,37 @@ no.getOrCreate().withPrefix("nimble").register(dv())
 const hv=U`
     <div class="wafer-map-container">
         <svg class="svg-root ${e=>e.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"/>
+            <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>
             </g>
         </svg>
-        <div class="wafer-map-area" style="left: 0px; top: 0px">
-            <canvas width=500 height="500" ${Se("canvas")}>
+        <div class="wafer-map-area">
+            <canvas class="wafer-map-canvas" ${Se("canvas")}></canvas>
         </div>
     </div>
 `,uv=ve`
-    .wafer-map-container {
+    :host {
+        display: inline-block;
         width: 500px;
         height: 500px;
+    }
+
+    .wafer-map-container {
+        width: 100%;
+        padding-bottom: 100%;
         position: relative;
-        display: flex;
+        display: inline-block;
         justify-content: center;
         align-items: center;
     }
@@ -5835,6 +5857,7 @@ const hv=U`
     .svg-root {
         width: 100%;
         height: 100%;
+        position: absolute;
     }
 
     .svg-root.top {
@@ -5856,13 +5879,14 @@ const hv=U`
     .zoom-container {
         width: 100%;
         height: 100%;
+        position: absolute;
     }
 
     .circle-base {
         width: 100%;
         height: 100%;
         position: absolute;
-        fill: white;
+        fill: transparent;
     }
 
     .circle-drawing-path {
@@ -5874,6 +5898,16 @@ const hv=U`
 
     .wafer-map-area {
         position: absolute;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    .wafer-map-canvas {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
     }
 `,pv="bottom-left",gv="bottom-right",vv="top-left",mv="top",bv="linear",fv="ordinal"
 function wv(e,t){return null==e||null==t?NaN:e<t?-1:e>t?1:e>=t?0:NaN}function xv(e,t){return null==e||null==t?NaN:t<e?-1:t>e?1:t>=e?0:NaN}function yv(e){let t,i,o
@@ -6042,8 +6076,10 @@ let s=bb(o)
 return null===s?this.emptyDieColor:(s=new db(s.r,s.g,s.b,this.calculateOpacity(e,i)),s.toStringWebRGBA())}}class wb{constructor(e,t,i,o,s,n,r,a,l){this.computations=new nb(e,t,i),this.prerendering=new fb(e,o,s,this.computations.horizontalScale,this.computations.verticalScale,n,r,a,l,this.computations.dieDimensions,this.computations.margin)}get containerDimensions(){return this.computations.containerDimensions}get dieDimensions(){return this.computations.dieDimensions}get radius(){return this.computations.radius}get margin(){return this.computations.margin}get horizontalScale(){return this.computations.horizontalScale}get verticalScale(){return this.computations.verticalScale}get labelsFontSize(){return this.prerendering.labelsFontSize}get diesRenderInfo(){return this.prerendering.diesRenderInfo}get mainCircleLocation(){return{x:this.computations.containerDimensions.width/2,y:this.computations.containerDimensions.height/2}}}class xb{constructor(e,t){this.waferData=e,this.context=t.getContext("2d")}drawWafer(){const e=this.waferData.diesRenderInfo,t=this.waferData.dieDimensions
 for(const i of e){this.context.fillStyle=i.fillStyle,this.context?.fillRect(i.x,i.y,t.width,t.height),this.context.font=this.waferData.labelsFontSize.toString(),this.context.fillStyle="#ffffff",this.context.textAlign="center"
 const e=this.context.measureText("M")
-this.context.fillText(i.text,i.x+t.width/2,i.y+t.height/2+e.width/2)}}clearCanvas(){this.context.clearRect(0,0,this.waferData.containerDimensions.width,this.waferData.containerDimensions.height)}}class yb extends St{constructor(){super(...arguments),this.quadrant=vv,this.orientation=mv,this.maxCharacters=4,this.dieLabelsHidden=!1,this.dieLabelsSuffix="",this.colorScaleMode=bv,this.highlightedValues=[],this.dies=[],this.colorScale={colors:[],values:[]},this.renderQueued=!1}connectedCallback(){super.connectedCallback(),this.queueRender()}render(){this.renderQueued=!1,this.dataManager=new wb(this.dies,this.quadrant,{width:500,height:500},this.colorScale,this.highlightedValues,this.colorScaleMode,this.dieLabelsHidden,this.dieLabelsSuffix,this.maxCharacters)
-new xb(this.dataManager,this.canvas).drawWafer()}quadrantChanged(){this.queueRender()}orientationChanged(){this.queueRender()}maxCharactersChanged(){this.queueRender()}dieLabelsHiddenChanged(){this.queueRender()}dieLabelsSuffixChanged(){this.queueRender()}colorScaleModeChanged(){this.queueRender()}highlightedValuesChanged(){this.queueRender()}diesChanged(){this.queueRender()}colorScaleChanged(){this.queueRender()}queueRender(){this.$fastController.isConnected&&(this.renderQueued||(this.renderQueued=!0,u.queueUpdate((()=>this.render()))))}}e([oe],yb.prototype,"quadrant",void 0),e([oe],yb.prototype,"orientation",void 0),e([oe({attribute:"max-characters",converter:te})],yb.prototype,"maxCharacters",void 0),e([oe({attribute:"die-labels-hidden",mode:"boolean"})],yb.prototype,"dieLabelsHidden",void 0),e([oe({attribute:"die-labels-suffix"})],yb.prototype,"dieLabelsSuffix",void 0),e([oe({attribute:"color-scale-mode"})],yb.prototype,"canvas",void 0),e([m],yb.prototype,"colorScaleMode",void 0),e([m],yb.prototype,"highlightedValues",void 0),e([m],yb.prototype,"dies",void 0),e([m],yb.prototype,"colorScale",void 0)
+this.context.fillText(i.text,i.x+t.width/2,i.y+t.height/2+e.width/2)}}clearCanvas(e,t){this.context.clearRect(0,0,e,t)}}class yb extends St{constructor(){super(...arguments),this.quadrant=vv,this.orientation=mv,this.maxCharacters=4,this.dieLabelsHidden=!1,this.dieLabelsSuffix="",this.colorScaleMode=bv,this.highlightedValues=[],this.dies=[],this.colorScale={colors:[],values:[]},this.renderQueued=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((e=>{const t=e[0]
+if(void 0===t)return
+const{height:i,width:o}=t.contentRect
+this.canvasSideLength=Math.min(i,o)})),this.resizeObserver.observe(this),this.queueRender()}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this)}render(){this.renderQueued=!1,void 0!==this.canvasSideLength&&0!==this.canvasSideLength&&(this.renderer?.clearCanvas(this.canvasSideLength,this.canvasSideLength),this.dataManager=new wb(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 xb(this.dataManager,this.canvas),this.renderer.drawWafer())}quadrantChanged(){this.queueRender()}orientationChanged(){this.queueRender()}maxCharactersChanged(){this.queueRender()}dieLabelsHiddenChanged(){this.queueRender()}dieLabelsSuffixChanged(){this.queueRender()}colorScaleModeChanged(){this.queueRender()}highlightedValuesChanged(){this.queueRender()}diesChanged(){this.queueRender()}colorScaleChanged(){this.queueRender()}canvasSideLengthChanged(){void 0!==this.canvasSideLength&&0!==this.canvasSideLength&&(this.canvas.width=this.canvasSideLength,this.canvas.height=this.canvasSideLength),this.queueRender()}queueRender(){this.$fastController.isConnected&&(this.renderQueued||(this.renderQueued=!0,u.queueUpdate((()=>this.render()))))}}e([oe],yb.prototype,"quadrant",void 0),e([oe],yb.prototype,"orientation",void 0),e([oe({attribute:"max-characters",converter:te})],yb.prototype,"maxCharacters",void 0),e([oe({attribute:"die-labels-hidden",mode:"boolean"})],yb.prototype,"dieLabelsHidden",void 0),e([oe({attribute:"die-labels-suffix"})],yb.prototype,"dieLabelsSuffix",void 0),e([oe({attribute:"color-scale-mode"})],yb.prototype,"canvas",void 0),e([m],yb.prototype,"canvasSideLength",void 0),e([m],yb.prototype,"colorScaleMode",void 0),e([m],yb.prototype,"highlightedValues",void 0),e([m],yb.prototype,"dies",void 0),e([m],yb.prototype,"colorScale",void 0)
 const $b=yb.compose({baseName:"wafer-map",template:hv,styles:uv})
 no.getOrCreate().withPrefix("nimble").register($b())}()
 //# sourceMappingURL=all-components-bundle.min.js.map