UNPKG

@revolist/revogrid

Version:

Virtual reactive data grid spreadsheet component - RevoGrid.

4 lines 3.35 kB
/*! * Built by Revolist OU ❤️ */ import{proxyCustomElement as t,HTMLElement as s,createEvent as e,transformTag as i}from"@stencil/core/internal/client";import{d as r}from"./debounce.js";import{b as o}from"./data.store.js";import{k as n}from"./consts.js";import"./platform.js";import{g as h}from"./dimension.helpers.js";class l{constructor(t){this.config=t,this.currentCell=null,this.previousRow=null}endOrder(t,s){if(null===this.currentCell)return;const e=this.getCell(t,s);e.y!==this.currentCell.y&&(e.y<0?e.y=0:e.y<this.currentCell.y&&e.y++,this.config.positionChanged(this.currentCell.y,e.y)),this.clear()}startOrder(t,s){return this.currentCell=this.getCell(t,s),this.currentCell}move(t,s){const e=this.getRow(t,s);return this.previousRow===e.itemIndex||e.itemIndex<-1?null:(this.previousRow=e.itemIndex,e)}clear(){this.currentCell=null,this.previousRow=null}getRow(t,{el:s,rows:e}){const{top:i}=s.getBoundingClientRect(),r=h(e,t-i);return{itemIndex:r.itemIndex,start:r.start+i,end:r.end+i}}getCell({x:t,y:s},{el:e,rows:i,cols:r}){const{top:o,left:n}=e.getBoundingClientRect(),l=t-n,d=h(i,s-o);return{x:h(r,l).itemIndex,y:d.itemIndex}}}const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.rowDragStart=e(this,"rowdragstartinit",7),this.rowDragEnd=e(this,"rowdragendinit",7),this.rowDrag=e(this,"rowdragmoveinit",7),this.rowMouseMove=e(this,"rowdragmousemove",7),this.rowDropped=e(this,"rowdropinit",7),this.rowOrderChange=e(this,"roworderchange",7),this.events=[],this.rowMoveFunc=r((t=>{const s=this.rowOrderService.move(t,this.getData());null!==s&&this.rowDrag.emit(Object.assign(Object.assign({},s),{rowType:this.rowType}))}),5)}async dragStart(t){t.originalEvent.preventDefault(),this.events.length&&this.clearOrder();const s=this.getData(),e=this.rowOrderService.startOrder(t.originalEvent,s),i=this.rowOrderService.getRow(t.originalEvent.y,s);if(this.rowDragStart.emit({cell:e,text:n,pos:i,event:t.originalEvent,rowType:this.rowType,model:o(this.dataStore,i.itemIndex)}).defaultPrevented)return;const r=t=>this.move(t),h=t=>this.endOrder(t),l=()=>this.clearOrder();this.events.push({name:"mousemove",listener:r},{name:"mouseup",listener:h},{name:"mouseleave",listener:l}),document.addEventListener("mousemove",r),document.addEventListener("mouseup",h),document.addEventListener("mouseleave",l)}async endOrder(t){this.rowOrderService.endOrder(t,this.getData()),this.clearOrder()}async clearOrder(){this.rowOrderService.clear(),this.events.forEach((t=>document.removeEventListener(t.name,t.listener))),this.events.length=0,this.rowDragEnd.emit({rowType:this.rowType})}move({x:t,y:s}){this.rowMouseMove.emit({x:t,y:s,rowType:this.rowType}),this.rowMoveFunc(s)}connectedCallback(){this.rowOrderService=new l({positionChanged:(t,s)=>{const e=this.rowDropped.emit({from:t,to:s,rowType:this.rowType});e.defaultPrevented||this.rowOrderChange.emit(e.detail)}})}getData(){return{el:this.parent,rows:this.dimensionRow.state,cols:this.dimensionCol.state}}},[0,"revogr-order-editor",{parent:[16],dimensionRow:[16],dimensionCol:[16],dataStore:[16],rowType:[1,"row-type"],dragStart:[64],endOrder:[64],clearOrder:[64]}]);function m(){"undefined"!=typeof customElements&&["revogr-order-editor"].forEach((t=>{"revogr-order-editor"===t&&(customElements.get(i(t))||customElements.define(i(t),d))}))}export{d as O,m as d}