@revolist/revogrid/standalone/revogr-viewport-scroll2.js

Virtual reactive data grid spreadsheet component - RevoGrid.

/*!
 * Built by Revolist OU ❤️
 */
import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as o,Host as l,transformTag as r}from"@stencil/core/internal/client";import{t as s}from"./throttle.js";import{L as n,a as c}from"./local.scroll.timer.js";const a="header",h="footer",d="content",v="data";function w(e,t){return{x:e.viewports[e.colType].store.get("realCount"),y:e.viewports[t].store.get("realCount")}}function p(e,t,i,o){return{colData:e.colStore,viewportCol:e.viewports[e.colType].store,viewportRow:e.viewports[t].store,lastCell:w(e,t),slot:i,type:t,canDrag:!o,position:e.position,dataStore:e.rowStores[t].store,dimensionCol:e.dimensions[e.colType].store,dimensionRow:e.dimensions[t].store,style:o?{height:`${e.dimensions[t].store.get("realSize")}px`}:void 0}}class u{constructor(e,t,i){this.resize=t,this.resizeObserver=null,this.previousSize={width:0,height:0},this.apply=s((e=>{var t;const i={width:e.width,height:e.height};null===(t=this.resize)||void 0===t||t.call(this,i,this.previousSize),this.previousSize=i}),40,{leading:!1,trailing:!0});const o=[];i.forEach((e=>{e&&o.push(e)})),this.init(e,o)}init(e,t=[]){const i=this.resizeObserver=new ResizeObserver((t=>{t.length&&this.apply(t[0].target===e?t[0].contentRect:e.getBoundingClientRect())}));i.observe(e),t.forEach((e=>{i.observe(e)}))}destroy(){var e;null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.resizeObserver=null}}const f=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.scrollViewport=i(this,"scrollviewport",7),this.resizeViewport=i(this,"resizeviewport",7),this.scrollchange=i(this,"scrollchange",7),this.silentScroll=i(this,"scrollviewportsilent",7),this.contentWidth=0,this.contentHeight=0,this.noHorizontalScrollTransfer=!1}async setScroll(e){var t;this.localScrollTimer.latestScrollUpdate(e.dimension),null===(t=this.localScrollService)||void 0===t||t.setScroll(e)}async changeScroll(e,t=!1){var i,o;if(!t){if(e.delta){switch(e.dimension){case"rgCol":e.coordinate=this.horizontalScroll.scrollLeft+e.delta;break;case"rgRow":e.coordinate=(null!==(o=null===(i=this.verticalScroll)||void 0===i?void 0:i.scrollTop)&&void 0!==o?o:0)+e.delta}this.setScroll(e)}return e}e.coordinate&&this.verticalScroll&&"rgRow"===e.dimension&&(this.verticalScroll.style.transform=`translateY(${-1*e.coordinate}px)`)}mousewheelVertical({detail:e}){this.verticalMouseWheel(e)}mousewheelHorizontal({detail:e}){this.horizontalMouseWheel(e)}scrollApply({detail:{type:e,coordinate:t}}){this.applyOnScroll(e,t,!0)}connectedCallback(){this.verticalMouseWheel=this.onVerticalMouseWheel.bind(this,"rgRow","deltaY"),this.horizontalMouseWheel=this.onHorizontalMouseWheel.bind(this,"rgCol","deltaX"),this.localScrollTimer=new n("ontouchstart"in document.documentElement?0:10),this.localScrollService=new c({runScroll:e=>this.scrollViewport.emit(e),applyScroll:e=>{switch(this.localScrollTimer.setCoordinate(e),e.dimension){case"rgCol":this.horizontalScroll.scrollLeft=e.coordinate;break;case"rgRow":this.verticalScroll&&(this.verticalScroll.scrollTop=e.coordinate,this.verticalScroll.style.transform&&(this.verticalScroll.style.transform=""))}}})}componentDidLoad(){this.resizeService=new u(this.horizontalScroll,(e=>{var t,i,o,l,r,s,n,c;const a={};let h=e.height||0;h&&(h-=(null!==(i=null===(t=this.header)||void 0===t?void 0:t.clientHeight)&&void 0!==i?i:0)+(null!==(l=null===(o=this.footer)||void 0===o?void 0:o.clientHeight)&&void 0!==l?l:0)),a.rgRow={size:h,contentSize:this.contentHeight,scroll:null!==(s=null===(r=this.verticalScroll)||void 0===r?void 0:r.scrollTop)&&void 0!==s?s:0,noScroll:!1},a.rgCol={size:e.width||0,contentSize:this.contentWidth,scroll:this.horizontalScroll.scrollLeft,noScroll:"rgCol"!==this.colType};const d=["rgCol","rgRow"];for(const e of d){const t=a[e];t&&(this.resizeViewport.emit({dimension:e,size:t.size,rowHeader:this.rowHeader}),t.noScroll||(null===(n=this.localScrollService)||void 0===n||n.scroll(null!==(c=t.scroll)&&void 0!==c?c:0,e,!0),this.setScrollVisibility(e,t.size,t.contentSize)))}}),[this.footer,this.header])}setScrollVisibility(e,t,i){const o=t<i;let l;switch(e){case"rgCol":l=this.horizontalScroll;break;case"rgRow":l=this.verticalScroll}o?null==l||l.classList.add(`scroll-${e}`):null==l||l.classList.remove(`scroll-${e}`),this.scrollchange.emit({type:e,hasScroll:o})}disconnectedCallback(){var e;null===(e=this.resizeService)||void 0===e||e.destroy()}async componentDidRender(){var e,t,i,o;this.localScrollService.setParams({contentSize:this.contentHeight,clientSize:null!==(t=null===(e=this.verticalScroll)||void 0===e?void 0:e.clientHeight)&&void 0!==t?t:0,virtualSize:0},"rgRow"),this.localScrollService.setParams({contentSize:this.contentWidth,clientSize:this.horizontalScroll.clientWidth,virtualSize:0},"rgCol"),this.setScrollVisibility("rgRow",null!==(o=null===(i=this.verticalScroll)||void 0===i?void 0:i.clientHeight)&&void 0!==o?o:0,this.contentHeight),this.setScrollVisibility("rgCol",this.horizontalScroll.clientWidth,this.contentWidth)}render(){return o(l,{key:"adc7378dba1794ca2ec263d52b09abefe50bcbfd",onWheel:this.horizontalMouseWheel,onScroll:e=>this.applyScroll("rgCol",e)},o("div",{key:"7b57a8a0ea44629fefcfe4d2cd77bf0f048d8e06",class:"inner-content-table",style:{width:`${this.contentWidth}px`}},o("div",{key:"cca3de158bc2a7f0651f578a281819be5698b257",class:"header-wrapper",ref:e=>this.header=e},o("slot",{key:"1d170147dabe034f2c35481a8e2fedd6de2b6aed",name:a})),o("div",{key:"b6dd29a91bb1f380a83a035dfdb749ca669936f2",class:"vertical-inner",ref:e=>this.verticalScroll=e,onWheel:this.verticalMouseWheel,onScroll:e=>this.applyScroll("rgRow",e)},o("div",{key:"9bce27bf8ec4d3b679aa9a34eb6379a8c2d46cac",class:"content-wrapper",style:{height:`${this.contentHeight}px`}},o("slot",{key:"b44a082c9fbb948fd87bd235b4cd4356fd4a3536",name:d}))),o("div",{key:"28c305ff6bc664f1d1bbb117e8b8565c8d4bb6b2",class:"footer-wrapper",ref:e=>this.footer=e},o("slot",{key:"96312fb7f18198fd1feb9dcc00c79cde74ba9c9f",name:h}))))}async applyScroll(e,i){if(!(i.target instanceof t))return;let o=0;switch(e){case"rgCol":o=i.target.scrollLeft;break;case"rgRow":o=i.target.scrollTop}o<0?this.silentScroll.emit({dimension:e,coordinate:o}):this.applyOnScroll(e,o)}applyOnScroll(e,t,i=!1){const o=()=>{var o;null===(o=this.localScrollService)||void 0===o||o.scroll(t,e,void 0,void 0,i)};this.localScrollTimer.isReady(e,t)?o():this.localScrollTimer.throttleLastScrollUpdate(e,t,(()=>o()))}onVerticalMouseWheel(e,t,i){var o,l,r,s,n,c,a,h;const d=null!==(l=null===(o=this.verticalScroll)||void 0===o?void 0:o.scrollTop)&&void 0!==l?l:0;d+(null!==(s=null===(r=this.verticalScroll)||void 0===r?void 0:r.clientHeight)&&void 0!==s?s:0)>=(null!==(c=null===(n=this.verticalScroll)||void 0===n?void 0:n.scrollHeight)&&void 0!==c?c:0)&&i.deltaY>0||0===d&&i.deltaY<0||null===(a=i.preventDefault)||void 0===a||a.call(i),null===(h=this.localScrollService)||void 0===h||h.scroll(d+i[t],e,void 0,i[t]),this.localScrollTimer.latestScrollUpdate(e)}onHorizontalMouseWheel(e,t,i){var o,l,r,s;if(!i.deltaX)return;const{scrollLeft:n,scrollWidth:c,clientWidth:a}=this.horizontalScroll,h=n+a>=c&&i.deltaX>0,d=0===n&&i.deltaX<0;if(this.noHorizontalScrollTransfer){if(!h&&!d){const r=n+i[t];null===(o=i.preventDefault)||void 0===o||o.call(i),this.horizontalScroll.scrollLeft=r,null===(l=this.localScrollService)||void 0===l||l.scroll(this.horizontalScroll.scrollLeft,e,void 0,i[t]),this.localScrollTimer.latestScrollUpdate(e)}}else h||d||null===(r=i.preventDefault)||void 0===r||r.call(i),null===(s=this.localScrollService)||void 0===s||s.scroll(n+i[t],e,void 0,i[t]),this.localScrollTimer.latestScrollUpdate(e)}get horizontalScroll(){return this}static get style(){return".rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}"}},[260,"revogr-viewport-scroll",{rowHeader:[4,"row-header"],contentWidth:[2,"content-width"],contentHeight:[2,"content-height"],colType:[1,"col-type"],noHorizontalScrollTransfer:[4,"no-horizontal-scroll-transfer"],setScroll:[64],changeScroll:[64],applyScroll:[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]]);function g(){"undefined"!=typeof customElements&&["revogr-viewport-scroll"].forEach((e=>{"revogr-viewport-scroll"===e&&(customElements.get(r(e))||customElements.define(r(e),f))}))}export{d as C,v as D,h as F,a as H,f as R,g as d,p as v}