5 lines
14 KiB
JavaScript
5 lines
14 KiB
JavaScript
var m=Object.defineProperty;var f=(n,e,t)=>e in n?m(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var s=(n,e,t)=>(f(n,typeof e!="symbol"?e+"":e,t),t);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))l(o);new MutationObserver(o=>{for(const i of o)if(i.type==="childList")for(const r of i.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&l(r)}).observe(document,{childList:!0,subtree:!0});function t(o){const i={};return o.integrity&&(i.integrity=o.integrity),o.referrerPolicy&&(i.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?i.credentials="include":o.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function l(o){if(o.ep)return;o.ep=!0;const i=t(o);fetch(o.href,i)}})();class a{constructor(e,t){s(this,"x");s(this,"y");s(this,"width");s(this,"height");this.x=this.getXCoord(t.column,e),this.y=this.getYCoord(t.row,e),this.width=e.columns[t.column].width,this.height=e.rows[t.row].height}getXCoord(e,t){let l=0;for(let o=0;o<e;o++)l+=t.columns[o].width;return l}getYCoord(e,t){let l=0;for(let o=0;o<e;o++)l+=t.rows[o].height;return l}}class g{constructor(e){s(this,"element");s(this,"root");s(this,"handleKeydown",e=>{const{key:t}=e;switch(t){case"Escape":{this.hide();break}case"Enter":this.root.changeCellValues(this.root.selection.selectedCell,{value:this.element.value,displayValue:this.element.value}),this.hide()}});s(this,"handleClickOutside",e=>{const t=e.target;this.element.contains(t)||this.hide()});this.root=e;const t=document.createElement("input");t.classList.add("editor"),this.element=t,this.hide()}hide(){this.element.style.display="none",this.element.classList.add("hide"),this.element.blur(),window.removeEventListener("click",this.handleClickOutside),this.element.removeEventListener("keydown",this.handleKeydown),this.root.focusTable()}show(e){const{height:t,width:l,x:o,y:i}=new a(this.root.config,e),r=this.root.getCell(e);this.element.classList.remove("hide"),this.element.style.top=i-this.root.viewport.top+"px",this.element.style.left=o-this.root.viewport.left+"px",this.element.style.width=l+"px",this.element.style.height=t+"px",this.element.style.display="block",window.addEventListener("click",this.handleClickOutside),this.element.addEventListener("keydown",this.handleKeydown),this.element.value=r.value,this.element.focus()}}class C{constructor(e){s(this,"element");s(this,"root");this.root=e;const t=document.createElement("header");t.classList.add(),this.element=t}}class p{constructor(e){s(this,"element");s(this,"verticalScroller");s(this,"horizontalScroller");s(this,"root");s(this,"isSelecting",!1);s(this,"handleMouseMove",e=>{if(!this.isSelecting)return;const{offsetX:t,offsetY:l}=e,o=this.root.getCellByCoords(t,l);this.root.selection.selectedRange&&(this.root.selection.selectedRange.to=o),this.root.renderSheet()});s(this,"handleMouseUp",()=>{this.isSelecting=!1,this.root.selection.selectedRange&&this.root.selection.selectedRange.from.row===this.root.selection.selectedRange.to.row&&this.root.selection.selectedRange.from.column===this.root.selection.selectedRange.to.column&&(this.root.selection.selectedRange=null),this.root.renderSheet()});s(this,"handleDoubleClick",e=>{e.preventDefault();const t=this.root.getCellByCoords(e.offsetX,e.offsetY);this.root.showEditor(t)});s(this,"handleKeydown",e=>{if(e.preventDefault(),console.log(e.key),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key))switch(this.root.selection.selectedRange=null,e.key){case"ArrowLeft":{this.root.selection.selectedCell&&this.root.selection.selectedCell.column>0&&(console.log("tick"),this.root.selection.selectedCell.column-=1,this.root.renderSheet());break}case"ArrowRight":{this.root.selection.selectedCell&&this.root.selection.selectedCell.column<this.root.config.columns.length-1&&(this.root.selection.selectedCell.column+=1,this.root.renderSheet());break}case"ArrowUp":{this.root.selection.selectedCell&&this.root.selection.selectedCell.row>0&&(this.root.selection.selectedCell.row-=1,this.root.renderSheet());break}case"ArrowDown":{this.root.selection.selectedCell&&this.root.selection.selectedCell.row<this.root.config.rows.length-1&&(this.root.selection.selectedCell.row+=1,this.root.renderSheet());break}}if(e.key==="F2"){if(!this.root.selection.selectedCell)return;this.root.showEditor(this.root.selection.selectedCell)}e.key==="Delete"&&(this.root.deleteSelectedCellsValues(),this.root.renderSheet())});s(this,"handleClick",e=>{if(e.button!==0)return;const{offsetX:t,offsetY:l}=e,o=this.root.getCellByCoords(t,l);this.isSelecting=!0,this.root.selection.selectedRange={from:o,to:o},this.root.selection.selectedCell=o,this.root.renderSheet()});s(this,"handleScroll",()=>{const e=this.getViewportBoundlingRect();this.root.viewport.updateValues(e),this.root.renderSheet()});this.root=e;const{horizontalScroller:t,scroller:l,verticalScroller:o}=this.buildComponent();this.element=l,this.verticalScroller=o,this.horizontalScroller=t,this.element.style.height=this.root.config.view.height+"px",this.element.style.width=this.root.config.view.width+"px",this.element.tabIndex=-1,this.updateScrollerSize(),this.element.addEventListener("scroll",this.handleScroll),this.element.addEventListener("mousedown",this.handleClick),this.element.addEventListener("mousemove",this.handleMouseMove),this.element.addEventListener("mouseup",this.handleMouseUp),this.element.addEventListener("dblclick",this.handleDoubleClick),this.element.addEventListener("keydown",this.handleKeydown)}getViewportBoundlingRect(){const{scrollTop:e,scrollLeft:t}=this.element,{height:l,width:o}=this.element.getBoundingClientRect(),i=e+l,r=t+o;return{top:e,left:t,bottom:i,right:r}}buildComponent(){const e=document.createElement("div"),t=document.createElement("div"),l=document.createElement("div"),o=document.createElement("div"),i=document.createElement("div");return t.style.width="0px",t.style.pointerEvents="none",l.style.pointerEvents="none",o.style.display="flex",i.appendChild(t),i.appendChild(l),o.appendChild(i),this.verticalScroller=t,this.horizontalScroller=l,e.appendChild(o),e.classList.add("scroller"),{scroller:e,verticalScroller:t,horizontalScroller:l}}getActualHeight(){return this.root.config.rows.reduce((e,t)=>(e+=t.height,e),0)}getActualWidth(){return this.root.config.columns.reduce((e,t)=>(e+=t.width,e),0)}updateScrollerSize(){const e=this.getActualHeight(),t=this.getActualWidth();this.setScrollerHeight(e),this.setScrollerWidth(t)}setScrollerHeight(e){this.verticalScroller.style.height=e+"px"}setScrollerWidth(e){this.horizontalScroller.style.width=e+"px"}}class y{constructor(){s(this,"fontSize",16);s(this,"fontColor","black");s(this,"background","white");s(this,"borderColor","black");s(this,"selectedBackground","#4287f5");s(this,"selectedFontColor","#ffffff")}}class v{constructor(e,t){s(this,"row");s(this,"column");this.row=e,this.column=t}}class S{constructor(e){s(this,"value");s(this,"displayValue");s(this,"resultValue");s(this,"position");s(this,"style",new y);this.value=e.value,this.displayValue=e.displayValue,this.resultValue=e.resultValue,this.position=e.position}changeValues(e){Object.assign(this,e)}isCellInRange(e){const{column:t,row:l}=this.position,{selectedRange:o}=e.selection;if(!o)return!1;const i=l>=Math.min(o.from.row,o.to.row)&&l<=Math.max(o.to.row,o.from.row);return t>=Math.min(o.from.column,o.to.column)&&t<=Math.max(o.to.column,o.from.column)&&i}render(e){var d;let{height:t,width:l,x:o,y:i}=new a(e.config,this.position);const{ctx:r}=e,h=((d=e.selection.selectedCell)==null?void 0:d.row)===this.position.row&&e.selection.selectedCell.column===this.position.column,c=this.isCellInRange(e);i-=e.viewport.top,o-=e.viewport.left,r.clearRect(o,i,l,t),r.fillStyle=h||c?this.style.selectedBackground:this.style.background,r.strokeStyle="black",r.fillRect(o,i,l-1,t-1),r.strokeRect(o,i,l,t),r.fillStyle=h||c?this.style.selectedFontColor:this.style.fontColor,r.textAlign="left",r.font=`${this.style.fontSize}px Arial`,r.textBaseline="middle",r.fillText(this.displayValue,o+2,i+t/2,l)}}class b{constructor(e){s(this,"element");s(this,"ctx");s(this,"root");this.root=e;const t=document.createElement("canvas");t.classList.add("sheet"),t.height=this.root.config.view.height,t.width=this.root.config.view.width,t.style.width=this.root.config.view.width+"px",t.style.height=this.root.config.view.height+"px",this.element=t;const l=this.element.getContext("2d");if(!l)throw new Error("Enable hardware acceleration");this.ctx=l}getCellByCoords(e,t){let l=0,o=0;for(;o<=t&&(o+=this.root.config.rows[l].height,!(o>=t));)l++;let i=0,r=0;for(;r<=e&&(r+=this.root.config.columns[i].width,!(r>=e));)i++;return new v(l,i)}renderCell(e){const{column:t,row:l}=e;this.root.data[l][t].render(this.root)}renderSheet(){const e=this.root.viewport.firstRow,t=this.root.viewport.lastCol+3,l=this.root.viewport.lastRow+3,o=this.root.viewport.firstCol;for(let i=e;i<=l;i++)for(let r=o;r<=t&&!(!this.root.config.columns[r]||!this.root.config.rows[i]);r++)this.renderCell({column:r,row:i})}}class R{constructor(e){s(this,"element");s(this,"root");this.root=e;const t=document.createElement("div");t.classList.add("spreadsheet_container"),this.element=t,this.changeElementSizes(this.root.viewProps)}changeElementSizes(e){const{height:t,width:l}=e;this.element.style.width=l+"px",this.element.style.height=t+"px"}}class x{constructor(e){s(this,"element");s(this,"root");this.root=e;const t=document.createElement("div");t.classList.add("toolbar"),this.element=t}}class u{constructor(e){s(this,"rows");s(this,"columns");s(this,"view",{width:800,height:600});this.columns=e.columns,this.rows=e.rows,this.view=e.view}}class k{constructor(){s(this,"selectedCell",null);s(this,"selectedRange",null)}}class E{}class L{constructor(e,t){s(this,"root");s(this,"top");s(this,"left");s(this,"right");s(this,"bottom");s(this,"firstRow");s(this,"lastRow");s(this,"firstCol");s(this,"lastCol");this.root=e,this.top=t.top,this.left=t.left,this.right=t.right,this.bottom=t.bottom,this.firstRow=this.getFirstRow(),this.lastCol=this.getFirstRow();//!Temp
|
|
this.firstCol=this.getFirstRow();//!Temp
|
|
this.lastRow=this.getLastRow(),this.updateValues({top:0,left:0,right:this.root.viewProps.width,bottom:this.root.viewProps.height})}updateValues(e){this.top=e.top,this.left=e.left,this.right=e.right,this.bottom=e.bottom,this.firstRow=this.getFirstRow(),this.lastRow=this.getLastRow(),this.firstCol=this.getFirstCol(),this.lastCol=this.getLastCol()}getFirstRow(){let e=0;for(let t=0,l=0;l<=this.top;t++)l+=this.root.config.rows[t].height,e=t;return e}getLastRow(){let e=this.getFirstRow(),t=this.top;for(;t<=this.bottom&&(t+=this.root.config.rows[e].height,!(t>=this.bottom));)e++;return e}getFirstCol(){let e=0,t=0;for(;t<=this.left&&(t+=this.root.config.columns[e].width,!(t>=this.left));)e+=1;return e}getLastCol(){let e=this.getFirstCol(),t=this.left;for(;t<=this.right&&(t+=this.root.config.columns[e].width,!(t>=this.right));)e++;return e}}class V{constructor(e){s(this,"width");s(this,"title");this.width=e.width,this.title=e.title}}class A{constructor(e){s(this,"height");s(this,"title");this.height=e.height,this.title=e.title}}function I(n,e){const t=[];for(let l=0;l<=n;l++){const o=[];for(let i=0;i<=e;i++){const r=`${l}:${i}`,h=new S({displayValue:r,resultValue:r,value:r,position:{column:i,row:l}});o.push(h)}t.push(o)}return t}function M(n,e){const t=[];for(let i=0;i<=n;i++){const r=new A({height:40,title:String(i)});t.push(r)}const l=[];for(let i=0;i<=e;i++){const r=new V({title:String(i),width:150});l.push(r)}return new u({columns:l,rows:t,view:{height:600,width:800}})}class T{constructor(e,t){s(this,"table");s(this,"scroller");s(this,"toolbar");s(this,"header");s(this,"sheet");s(this,"editor");s(this,"styles");s(this,"config");s(this,"data");s(this,"viewport");s(this,"selection");const l=M(750,750);t!=null&&t.view&&(l.view=t.view),this.config=new u(l),this.sheet=new b(this);const o=I(750,750);this.table=new R(this),this.scroller=new p(this),this.toolbar=new x(this),this.header=new C(this),this.editor=new g(this),this.viewport=new L(this,this.scroller.getViewportBoundlingRect()),this.selection=new k,this.data=o,this.styles=new E,this.buildComponent(),this.appendTableToTarget(e)}buildComponent(){const e=document.createElement("div");e.appendChild(this.header.element),e.appendChild(this.sheet.element),e.classList.add("content"),this.table.element.appendChild(this.toolbar.element),this.table.element.appendChild(e),this.table.element.appendChild(this.scroller.element),this.table.element.append(this.editor.element)}appendTableToTarget(e){if(typeof e=="string"){const t=document.querySelector(e);if(!t)throw new Error(`Element with selector ${e} is not finded in DOM.
|
|
Make sure it exists.`);t==null||t.appendChild(this.table.element)}e instanceof HTMLElement&&e.append(this.table.element)}get ctx(){return this.sheet.ctx}get viewProps(){return this.config.view}focusTable(){this.scroller.element.focus()}getCellByCoords(e,t){return this.sheet.getCellByCoords(e,t)}getCell(e){const{column:t,row:l}=e;return this.data[l][t]}changeCellValues(e,t){const{column:l,row:o}=e;this.data[o][l].changeValues(t),this.renderCell(o,l)}applyActionToRange(e,t){const l=Math.min(e.from.row,e.to.row),o=Math.max(e.from.row,e.to.row),i=Math.min(e.from.column,e.to.column),r=Math.max(e.from.column,e.to.column);for(let h=l;h<=o;h++)for(let c=i;c<=r;c++){const d=this.data[h][c];t(d)}}deleteSelectedCellsValues(){if(this.selection.selectedRange!==null)this.applyActionToRange(this.selection.selectedRange,e=>{this.changeCellValues(e.position,{displayValue:"",resultValue:"",value:""})});else{if(!this.selection.selectedCell)return;this.changeCellValues(this.selection.selectedCell,{displayValue:"",resultValue:"",value:""})}}showEditor(e){this.editor.show(e)}renderSheet(){this.sheet.renderSheet()}renderCell(e,t){this.data[e][t].render(this)}}const w=new T("#spreadsheet",{view:{height:600,width:800}});w.renderSheet();console.log(w);
|