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