@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,b as c}from"./local.scroll.timer.js";const h="header",d="footer",v="content",w="data";function u(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:u(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 g{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;this.apply.cancel(),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,l,r;if(!t){if(e.delta){let t=0;switch(e.dimension){case"rgCol":t=this.horizontalScroll.scrollLeft;break;case"rgRow":t=null!==(o=null===(i=this.verticalScroll)||void 0===i?void 0:i.scrollTop)&&void 0!==o?o:0}return null!==(r=null===(l=this.localScrollService)||void 0===l?void 0:l.setScrollByDelta(e,t))&&void 0!==r?r: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 a({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 g(this.horizontalScroll,(e=>{var t,i,o,l,r,s,n,a;const c={};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)),c.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};const d=e.width||0;c.rgCol={size:d,contentSize:this.contentWidth,scroll:this.horizontalScroll.scrollLeft,noScroll:"rgCol"!==this.colType},this.setScrollParams({rgRow:h,rgCol:d});const v=["rgCol","rgRow"];for(const e of v){const t=c[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!==(a=t.scroll)&&void 0!==a?a: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.setScrollParams({rgRow:null!==(t=null===(e=this.verticalScroll)||void 0===e?void 0:e.clientHeight)&&void 0!==t?t:0,rgCol:this.horizontalScroll.clientWidth}),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)}setScrollParams(e){this.localScrollService.setParams({contentSize:this.contentHeight,clientSize:e.rgRow,virtualSize:0},"rgRow"),this.localScrollService.setParams({contentSize:this.contentWidth,clientSize:e.rgCol,virtualSize:0},"rgCol")}render(){var e,t;const i=c(this.contentHeight,null!==(t=null===(e=this.verticalScroll)||void 0===e?void 0:e.clientHeight)&&void 0!==t?t:0),r=c(this.contentWidth,0);return o(l,{key:"ec8d907976c1d50f7aab3c263be3f0249a274df6",onWheel:this.horizontalMouseWheel,onScroll:e=>this.applyScroll("rgCol",e)},o("div",{key:"e35696a7993ac94261426b45c28d488cdc42b7f0",class:"inner-content-table",style:{width:`${r}px`}},o("div",{key:"a6997451e01eacda1d27d4efa1d74e1748626218",class:"header-wrapper",ref:e=>this.header=e},o("slot",{key:"1d401e87d32d5b1531c2211723b552bbc894f22c",name:h})),o("div",{key:"ceab6f9e812d6ca9a0aa376afcd2562a17f505e0",class:"vertical-inner",ref:e=>this.verticalScroll=e,onWheel:this.verticalMouseWheel,onScroll:e=>this.applyScroll("rgRow",e)},o("div",{key:"a9556578a23d6efddec2e982e863aec064042154",class:"content-wrapper",style:{height:`${i}px`}},o("slot",{key:"0ae01f9736b9740612e75261f6e3abebda533377",name:v}))),o("div",{key:"09c2565d4ed449a43820f92d97b6558fca3758e7",class:"footer-wrapper",ref:e=>this.footer=e},o("slot",{key:"1ffb08ff8138a560cc09d82e3fe22a53e502aafe",name:d}))))}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,a,c,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!==(a=null===(n=this.verticalScroll)||void 0===n?void 0:n.scrollHeight)&&void 0!==a?a:0)&&i.deltaY>0||0===d&&i.deltaY<0||null===(c=i.preventDefault)||void 0===c||c.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:a,clientWidth:c}=this.horizontalScroll,h=n+c>=a&&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 y(){"undefined"!=typeof customElements&&["revogr-viewport-scroll"].forEach((e=>{"revogr-viewport-scroll"===e&&(customElements.get(r(e))||customElements.define(r(e),f))}))}export{v as C,w as D,d as F,h as H,f as R,y as d,p as v}