@revolist/revogrid/standalone/revogr-overlay-selection2.js

Virtual reactive data grid spreadsheet component - RevoGrid.

/*!
 * Built by Revolist OU ❤️
 */
import{h as t,proxyCustomElement as e,HTMLElement as s,createEvent as i,Host as o,transformTag as n}from"@stencil/core/internal/client";import{g as r,M as a,z as h,N as l,b as c}from"./column.service.js";import{c as d}from"./platform.js";import{R as u,i as g,j as p,S as v}from"./consts.js";import{b as f,i as b,c as m,a as y,g as x,d as w,e as j,s as O,f as S,v as D}from"./selection.utils.js";import{c as C,d as k,f as M,h as R,g as A,j as E,k as F,l as z,n as P}from"./revogr-edit2.js";import{t as T}from"./index2.js";import{d as K}from"./debounce.js";import{d as U}from"./revogr-clipboard2.js";import{d as X}from"./revogr-order-editor2.js";const N=[d.TAB,d.ARROW_UP,d.ARROW_DOWN,d.ARROW_LEFT,d.ARROW_RIGHT];class W{constructor(t){this.sv=t}async keyDown(t,e,s,{range:i,focus:o}){if(s)switch(t.code){case d.ESCAPE:this.sv.cancel();break;case d.TAB:this.keyChangeSelection(t,e)}else i&&C(t.code)?this.sv.clearCell():o&&(k(t.code)?this.keyChangeSelection(t,e):M(t.key)?this.sv.change():R(t)||A(t)||(E(t)?this.sv.internalPaste():F(t)?e&&this.selectAll(t):1!==t.key.length?await this.keyChangeSelection(t,e):this.sv.change(t.key)))}selectAll(t){const e=this.sv.selectionStore.get("range"),s=this.sv.selectionStore.get("focus");e&&s&&(t.preventDefault(),this.sv.selectAll())}async keyChangeSelection(t,e){const s=this.changeDirectionKey(t,e);if(!s)return!1;await T(u+30);const i=this.sv.selectionStore.get("range"),o=this.sv.selectionStore.get("focus");return this.keyPositionChange(s.changes,i,o,s.isMulti)}keyPositionChange(t,e,s,i=!1){if(!e||!s)return!1;const o=f(e,s,t,i);if(!o)return!1;const n=this.sv.getData();if(i){if(b(o.end,n.lastCell)||m(o.start))return!1;const t=r(o.start,o.end);return this.sv.range(t)}return this.sv.focus(o.start,t,b(o.start,n.lastCell)?1:m(o.start)?-1:0)}changeDirectionKey(t,e){const s=e&&t.shiftKey;if(N.includes(t.code)&&t.preventDefault(),t.shiftKey&&t.code===d.TAB)return{changes:{x:-1},isMulti:!1};switch(t.code){case d.ARROW_UP:return{changes:{y:-1},isMulti:s};case d.ARROW_DOWN:return{changes:{y:1},isMulti:s};case d.ARROW_LEFT:return{changes:{x:-1},isMulti:s};case d.TAB:case d.ARROW_RIGHT:return{changes:{x:1},isMulti:s}}}}class ${constructor(t){this.sv=t,this.autoFillType=null,this.autoFillInitial=null,this.autoFillStart=null,this.autoFillLast=null}renderAutofill(e,s,i=!1){let o;return o=y(e||Object.assign(Object.assign({},s),{x1:s.x,y1:s.y}),this.sv.dimensionRow.state,this.sv.dimensionCol.state),t("div",{class:{[p]:!0,[g]:i},style:{left:`${o.right}px`,top:`${o.bottom}px`},onMouseDown:t=>this.autoFillHandler(t),onTouchStart:t=>this.autoFillHandler(t)})}autoFillHandler(t,e="AutoFill"){let s=null;t.target instanceof Element&&(s=t.target),s&&(this.selectionStart(s,this.sv.getData(),e),t.preventDefault())}get isAutoFill(){return!!this.autoFillType}selectionMouseMove(t){this.onMouseMoveAutofill||(this.onMouseMoveAutofill=K(((t,e)=>this.doAutofillMouseMove(t,e)),5)),this.isAutoFill&&this.onMouseMoveAutofill(t,this.sv.getData())}getFocus(t,e){return!t&&e&&(t={x:e.x,y:e.y}),t||null}doAutofillMouseMove(t,e){if(!this.autoFillInitial)return;const s=x(t,"clientX",g),i=x(t,"clientY",g);if(null===s||null===i)return;const o=w({x:s,y:i},e);if(this.autoFillLast||this.autoFillLast||(this.autoFillLast=this.autoFillStart),!b(o,e.lastCell))if(this.autoFillLast=o,o.x===this.autoFillInitial.x&&o.y===this.autoFillInitial.y)this.sv.setTempRange(null);else{const t=r(this.autoFillInitial,this.autoFillLast);this.sv.setTempRange({area:t,type:this.autoFillType})}}selectionStart(t,e,s="Selection"){const{top:i,left:o}=t.getBoundingClientRect();this.autoFillInitial=this.getFocus(e.focus,e.range),this.autoFillType=s,this.autoFillStart=w({x:o,y:i},e)}clearAutoFillSelection(t,e){if(this.autoFillInitial)if(this.autoFillInitial=this.getFocus(t,e),"AutoFill"===this.autoFillType){const t=r(this.autoFillInitial,this.autoFillLast);if(t){const{defaultPrevented:s,detail:{range:i}}=this.sv.clearRangeDataApply({range:t});!s&&e?this.applyRangeWithData(i,e):this.sv.setTempRange(null)}}else this.applyRangeOnly(this.autoFillInitial,this.autoFillLast);this.resetAutoFillState()}resetAutoFillState(){this.autoFillType=null,this.autoFillInitial=null,this.autoFillLast=null,this.autoFillStart=null}onRangeApply(t,e,s){this.sv.rangeDataApply({data:t,models:j(t,this.sv.dataStore),type:this.sv.dataStore.get("type"),oldRange:s,newRange:e}),this.sv.setRange(e)}applyRangeWithData(t,e){const s={type:this.sv.dataStore.get("type"),colType:this.sv.columnService.type,newData:{},mapping:{},newRange:t,oldRange:e},{mapping:i,changed:o}=this.sv.columnService.getRangeData(s,this.sv.columnService.columns);s.newData=o,s.mapping=i;let n=this.sv.selectionChanged(s);n.defaultPrevented?this.sv.setTempRange(null):(n=this.sv.rangeCopy(s),n.defaultPrevented?this.sv.setRange(t):this.onRangeApply(s.newData,t,e))}applyRangeOnly(t,e){if(!t||!e)return;const s=r(t,e);this.sv.setRange(s)}}const H=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.beforeCopyRegion=i(this,"beforecopyregion",7),this.beforeRegionPaste=i(this,"beforepasteregion",7),this.cellEditApply=i(this,"celleditapply",7),this.beforeFocusCell=i(this,"beforecellfocusinit",7),this.beforeNextViewportFocus=i(this,"beforenextvpfocus",7),this.setEdit=i(this,"setedit",7),this.beforeApplyRange=i(this,"beforeapplyrange",7),this.beforeSetRange=i(this,"beforesetrange",7),this.setRange=i(this,"setrange",7),this.beforeEditRender=i(this,"beforeeditrender",7),this.selectAll=i(this,"selectall",7),this.cancelEdit=i(this,"canceledit",7),this.setTempRange=i(this,"settemprange",7),this.beforeSetTempRange=i(this,"beforesettemprange",7),this.applyFocus=i(this,"applyfocus",7),this.focusCell=i(this,"focuscell",7),this.beforeRangeDataApply=i(this,"beforerangedataapply",7),this.selectionChange=i(this,"selectionchangeinit",7),this.beforeRangeCopyApply=i(this,"beforerangecopyapply",7),this.rangeEditApply=i(this,"rangeeditapply",7),this.rangeClipboardCopy=i(this,"clipboardrangecopy",7),this.rangeClipboardPaste=i(this,"clipboardrangepaste",7),this.beforeKeyDown=i(this,"beforekeydown",7),this.beforeKeyUp=i(this,"beforekeyup",7),this.beforeCellSave=i(this,"beforecellsave",7),this.cellEditDone=i(this,"celledit",7),this.applyChangesOnClose=!1,this.keyboardService=null,this.autoFillService=null,this.unsubscribeSelectionStore=[]}onMouseMove(t){var e;this.selectionStore.get("focus")&&(null===(e=this.autoFillService)||void 0===e||e.selectionMouseMove(t))}onMouseUp(){var t;null===(t=this.autoFillService)||void 0===t||t.clearAutoFillSelection(this.selectionStore.get("focus"),this.selectionStore.get("range"))}onCellDrag(t){var e;null===(e=this.orderEditor)||void 0===e||e.dragStart(t.detail)}onKeyUp(t){this.beforeKeyUp.emit(Object.assign({original:t},this.getData()))}onKeyDown(t){var e;const s=this.beforeKeyDown.emit(Object.assign({original:t},this.getData()));t.defaultPrevented||s.defaultPrevented||null===(e=this.keyboardService)||void 0===e||e.keyDown(t,this.range,!!this.selectionStore.get("edit"),{focus:this.selectionStore.get("focus"),range:this.selectionStore.get("range")})}selectionServiceSet(t){this.unsubscribeSelectionStore.forEach((t=>t())),this.unsubscribeSelectionStore.length=0,this.unsubscribeSelectionStore.push(t.onChange("nextFocus",(t=>t&&this.doFocus(t,t)))),this.keyboardService=new W({selectionStore:t,range:t=>!!t&&this.triggerRangeEvent(t),focus:(t,e,s)=>s?(this.beforeNextViewportFocus.emit(t),!1):this.doFocus(t,t,e),change:t=>{this.readonly||this.doEdit(t)},cancel:async()=>{var t;await(null===(t=this.revogrEdit)||void 0===t?void 0:t.cancelChanges()),this.closeEdit()},clearCell:()=>!this.readonly&&this.clearCell(),internalPaste:()=>!this.readonly&&this.beforeRegionPaste.emit(),getData:()=>this.getData(),selectAll:()=>this.selectAll.emit()}),this.createAutoFillService()}createAutoFillService(){this.autoFillService=new $({dimensionRow:this.dimensionRow,dimensionCol:this.dimensionCol,columnService:this.columnService,dataStore:this.dataStore,clearRangeDataApply:t=>this.beforeRangeDataApply.emit(Object.assign(Object.assign(Object.assign({},t),this.types),{rowDimension:Object.assign({},this.dimensionRow.state),colDimension:Object.assign({},this.dimensionCol.state)})),setTempRange:t=>{const e=this.beforeSetTempRange.emit(Object.assign(Object.assign({tempRange:t},this.getData()),this.types));return e.defaultPrevented?null:this.setTempRange.emit(e.detail.tempRange)},selectionChanged:t=>this.selectionChange.emit(t),rangeCopy:t=>this.beforeRangeCopyApply.emit(t),rangeDataApply:t=>this.rangeEditApply.emit(t),setRange:t=>!!t&&this.triggerRangeEvent(t),getData:()=>this.getData()})}columnServiceSet(){var t;null===(t=this.columnService)||void 0===t||t.destroy(),this.columnService=new a(this.dataStore,this.colData),this.createAutoFillService()}connectedCallback(){this.columnServiceSet(),this.selectionServiceSet(this.selectionStore)}disconnectedCallback(){var t;this.unsubscribeSelectionStore.forEach((t=>t())),this.unsubscribeSelectionStore.length=0,null===(t=this.columnService)||void 0===t||t.destroy()}async componentWillRender(){var t,e;this.selectionStore.get("edit")||await(null===(e=null===(t=this.revogrEdit)||void 0===t?void 0:t.beforeDisconnect)||void 0===e?void 0:e.call(t))}renderRange(e){const s=y(e,this.dimensionRow.state,this.dimensionCol.state),i=O(s);return[t("div",{class:v,style:i},this.isMobileDevice&&t("div",{class:"range-handlers"},t("span",{class:g}),t("span",{class:g})))]}renderEditor(){const e=this.selectionStore.get("edit");if(this.readonly||!e)return null;const s=e.val||h(this.columnService.rowDataModel(e.y,e.x).value),i=Object.assign(Object.assign({},e),this.columnService.getSaveData(e.y,e.x,s)),o=this.beforeEditRender.emit(Object.assign(Object.assign({range:Object.assign(Object.assign({},e),{x1:e.x,y1:e.y})},this.types),{rowDimension:Object.assign({},this.dimensionRow.state),colDimension:Object.assign({},this.dimensionCol.state)}));if(o.defaultPrevented)return null;const n=y(o.detail.range,o.detail.rowDimension,o.detail.colDimension),r=O(n);return t("revogr-edit",{style:r,ref:t=>this.revogrEdit=t,additionalData:this.additionalData,editCell:i,saveOnClose:this.applyChangesOnClose,onCelleditinit:t=>{this.cellEditDone.emit(t.detail)},column:this.columnService.rowDataModel(e.y,e.x),editor:l(this.columnService.columns[e.x],this.editors)})}onEditCell(t){if(t.defaultPrevented)return;const e=this.beforeCellSave.emit(t.detail);e.defaultPrevented||this.cellEdit(e.detail),e.detail.preventFocus||this.focusNext()}render(){var e;const s=[],i=this.renderEditor();if(i)s.push(i);else{const i=this.selectionStore.get("range"),o=this.selectionStore.get("focus");(i||o)&&this.useClipboard&&s.push(t("revogr-clipboard",{readonly:this.readonly,onCopyregion:t=>this.onCopy(t.detail),onClearregion:()=>!this.readonly&&this.clearCell(),ref:t=>this.clipboard=t,onPasteregion:t=>this.onPaste(t.detail)})),i&&s.push(...this.renderRange(i)),o&&!this.readonly&&this.range&&s.push(null===(e=this.autoFillService)||void 0===e?void 0:e.renderAutofill(i,o,this.isMobileDevice)),this.canDrag&&s.push(t("revogr-order-editor",{ref:t=>this.orderEditor=t,dataStore:this.dataStore,dimensionRow:this.dimensionRow,dimensionCol:this.dimensionCol,parent:this.element,rowType:this.types.rowType,onRowdragstartinit:t=>this.rowDragStart(t)}))}return t(o,{key:"d936e8452e84c7a25ecd6502e929f1a5af69467f",class:{mobile:this.isMobileDevice},onDblClick:t=>this.onElementDblClick(t),onMouseDown:t=>this.onElementMouseDown(t),onTouchStart:t=>this.onElementMouseDown(t,!0),onCloseedit:t=>this.closeEdit(t),onCelledit:t=>this.onEditCell(t)},s,t("slot",{key:"cd3525d404aa44fd8d06e7fc459777acb8a9d585",name:"data"}))}doFocus(t,e,s){const{defaultPrevented:i}=this.beforeFocusCell.emit(this.columnService.getSaveData(t.y,t.x));if(i)return!1;const o=Object.assign(Object.assign({range:Object.assign(Object.assign({},t),{x1:e.x,y1:e.y}),next:s},this.types),{rowDimension:Object.assign({},this.dimensionRow.state),colDimension:Object.assign({},this.dimensionCol.state)}),n=this.applyFocus.emit(o);if(n.defaultPrevented)return!1;const{range:r}=n.detail;return!this.focusCell.emit(Object.assign({focus:{x:r.x,y:r.y},end:{x:r.x1,y:r.y1}},n.detail)).defaultPrevented}triggerRangeEvent(t){const e=this.types.rowType,s=this.beforeApplyRange.emit(Object.assign(Object.assign({range:Object.assign({},t)},this.types),{rowDimension:Object.assign({},this.dimensionRow.state),colDimension:Object.assign({},this.dimensionCol.state)}));if(s.defaultPrevented)return!1;const i=this.columnService.getRangeTransformedToProps(s.detail.range,this.dataStore);let o=this.beforeSetRange.emit(i);return!o.defaultPrevented&&(o=this.setRange.emit(Object.assign(Object.assign({},s.detail.range),{type:e})),!o.defaultPrevented&&!o.defaultPrevented)}onElementDblClick(t){if(t.defaultPrevented)return;const e=this.getData();S(t,e)&&this.doEdit()}onElementMouseDown(t,e=!1){var s;const i=t.target;if(z(i)||t.defaultPrevented)return;const o=this.getData(),n=S(t,o);n&&(this.focus(n,this.range&&t.shiftKey),this.range&&(i&&(null===(s=this.autoFillService)||void 0===s||s.selectionStart(i,this.getData())),e?D(t.touches[0],g)&&t.preventDefault():t.preventDefault()))}doEdit(t=""){var e;if(this.canEdit()){const s=this.selectionStore.get("focus");if(!s)return;const i=this.columnService.getSaveData(s.y,s.x);null===(e=this.setEdit)||void 0===e||e.emit(Object.assign(Object.assign({},i),{val:t}))}}async closeEdit(t){this.cancelEdit.emit(),(null==t?void 0:t.detail)&&await this.focusNext()}cellEdit(t){const e=this.columnService.getSaveData(t.rgRow,t.rgCol,t.val);this.cellEditApply.emit(e)}getRegion(){const t=this.selectionStore.get("focus");let e=this.selectionStore.get("range");return e||(e=r(t,t)),e}onCopy(t){var e;const s=this.getRegion();if(this.beforeCopyRegion.emit(s).defaultPrevented)return!1;let i;if(s){const{data:t,mapping:e}=this.columnService.copyRangeArray(s,this.dataStore),o=this.rangeClipboardCopy.emit(Object.assign({range:s,data:t,mapping:e},this.types));o.defaultPrevented||(i=o.detail.data)}return null===(e=this.clipboard)||void 0===e||e.doCopy(t,i),!0}onPaste(t){var e;const s=this.selectionStore.get("focus"),i=null!==this.selectionStore.get("edit");if(!s||i)return;let{changed:o,range:n}=this.columnService.getTransformedDataToApply(s,t);const{defaultPrevented:r}=this.rangeClipboardPaste.emit(Object.assign({data:o,models:j(o,this.dataStore),range:n},this.types));r||null===(e=this.autoFillService)||void 0===e||e.onRangeApply(o,n,n)}async focusNext(){var t;await(null===(t=this.keyboardService)||void 0===t?void 0:t.keyChangeSelection(new KeyboardEvent("keydown",{code:d.ARROW_DOWN}),this.range))||this.closeEdit()}clearCell(){var t;const e=this.selectionStore.get("range");if(e&&!c(e)){const s=this.columnService.getRangeStaticData(e,"");null===(t=this.autoFillService)||void 0===t||t.onRangeApply(s,e,e)}else if(this.canEdit()){const t=this.selectionStore.get("focus");if(!t)return;const e=this.columnService.getSaveData(t.y,t.x);this.cellEdit({rgRow:t.y,rgCol:t.x,val:"",type:e.type,prop:e.prop})}}rowDragStart({detail:t}){t.text=h(this.columnService.rowDataModel(t.cell.y,t.cell.x).value)}canEdit(){var t;if(this.readonly)return!1;const e=this.selectionStore.get("focus");return e&&!(null===(t=this.columnService)||void 0===t?void 0:t.isReadOnly(e.y,e.x))}get edited(){return this.selectionStore.get("edit")}focus(t,e=!1){if(!t)return!1;const s=t,i=this.selectionStore.get("focus");if(e&&i){const t=r(i,s);if(t)return this.triggerRangeEvent(t)}return this.doFocus(t,s)}get types(){return{rowType:this.dataStore.get("type"),colType:this.columnService.type}}getData(){return{el:this.element,rows:this.dimensionRow.state,cols:this.dimensionCol.state,lastCell:this.lastCell,focus:this.selectionStore.get("focus"),range:this.selectionStore.get("range"),edit:this.selectionStore.get("edit")}}get element(){return this}static get watchers(){return{selectionStore:[{selectionServiceSet:0}],dimensionRow:[{createAutoFillService:0}],dimensionCol:[{createAutoFillService:0}],dataStore:[{columnServiceSet:0}],colData:[{columnServiceSet:0}]}}static get style(){return'revogr-overlay-selection{display:block;position:relative;width:100%}revogr-overlay-selection .autofill-handle{position:absolute;width:14px;height:14px;margin-left:-13px;margin-top:-13px;z-index:10;cursor:crosshair}revogr-overlay-selection .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection.mobile .autofill-handle{position:absolute;width:30px;height:30px;margin-left:-29px;margin-top:-29px;z-index:10;cursor:crosshair}revogr-overlay-selection.mobile .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:12px;height:12px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection .selection-border-range{position:absolute;pointer-events:none;z-index:9;box-shadow:-1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset}revogr-overlay-selection .selection-border-range .range-handlers{height:100%;background-color:transparent;width:75%;max-width:50px;min-width:20px;left:50%;transform:translateX(-50%);position:absolute}revogr-overlay-selection .selection-border-range .range-handlers>span{pointer-events:auto;height:20px;width:20px;position:absolute;left:50%;transform:translateX(-50%)}revogr-overlay-selection .selection-border-range .range-handlers>span:before,revogr-overlay-selection .selection-border-range .range-handlers>span:after{position:absolute;border-radius:5px;width:15px;height:5px;left:50%;transform:translateX(-50%);background-color:rgba(0, 0, 0, 0.2)}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child{top:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child:before{content:"";top:0}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child{bottom:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child:after{content:"";bottom:0}revogr-overlay-selection revogr-edit{z-index:10}'}},[260,"revogr-overlay-selection",{readonly:[4],range:[4],canDrag:[4,"can-drag"],useClipboard:[4,"use-clipboard"],selectionStore:[16],dimensionRow:[16],dimensionCol:[16],dataStore:[16],colData:[16],lastCell:[16],editors:[16],applyChangesOnClose:[4,"apply-changes-on-close"],additionalData:[8,"additional-data"],isMobileDevice:[4,"is-mobile-device"]},[[5,"touchmove","onMouseMove"],[5,"mousemove","onMouseMove"],[5,"touchend","onMouseUp"],[5,"mouseup","onMouseUp"],[5,"mouseleave","onMouseUp"],[0,"dragstartcell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]],{selectionStore:[{selectionServiceSet:0}],dimensionRow:[{createAutoFillService:0}],dimensionCol:[{createAutoFillService:0}],dataStore:[{columnServiceSet:0}],colData:[{columnServiceSet:0}]}]);function Y(){"undefined"!=typeof customElements&&["revogr-overlay-selection","revogr-clipboard","revogr-edit","revogr-order-editor"].forEach((t=>{switch(t){case"revogr-overlay-selection":customElements.get(n(t))||customElements.define(n(t),H);break;case"revogr-clipboard":customElements.get(n(t))||U();break;case"revogr-edit":customElements.get(n(t))||P();break;case"revogr-order-editor":customElements.get(n(t))||X()}}))}export{H as O,Y as d}