Updates

assets/index-2bcf435d.js

@@ -1,4 +1,4 @@
-var d=Object.defineProperty;var u=(h,t,e)=>t in h?d(h,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):h[t]=e;var i=(h,t,e)=>(u(h,typeof t!="symbol"?t+"":t,e),e);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))o(s);new MutationObserver(s=>{for(const l of s)if(l.type==="childList")for(const r of l.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&o(r)}).observe(document,{childList:!0,subtree:!0});function e(s){const l={};return s.integrity&&(l.integrity=s.integrity),s.referrerPolicy&&(l.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?l.credentials="include":s.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function o(s){if(s.ep)return;s.ep=!0;const l=e(s);fetch(s.href,l)}})();class w{constructor(t){i(this,"element");i(this,"root");this.root=t;const e=document.createElement("input");this.element=e,this.hide()}hide(){this.element.style.display="none"}show(){this.element.style.display="block"}}class g{constructor(t){i(this,"element");i(this,"root");this.root=t;const e=document.createElement("header");e.classList.add(),this.element=e}}class m{constructor(t){i(this,"element");i(this,"verticalScroller");i(this,"horizontalScroller");i(this,"root");i(this,"handleScroll",()=>{const t=this.getViewportBoundlingRect();this.root.viewport.updateValues(t),this.root.renderSheet()});this.root=t;const{horizontalScroller:e,scroller:o,verticalScroller:s}=this.buildComponent();this.element=o,this.verticalScroller=s,this.horizontalScroller=e,this.element.style.height=this.root.config.view.height+"px",this.element.style.width=this.root.config.view.width+"px",this.updateScrollerSize(),this.element.addEventListener("scroll",this.handleScroll)}getViewportBoundlingRect(){const{scrollTop:t,scrollLeft:e}=this.element,{height:o,width:s}=this.element.getBoundingClientRect(),l=t+o,r=e+s;return{top:t,left:e,bottom:l,right:r}}buildComponent(){const t=document.createElement("div"),e=document.createElement("div"),o=document.createElement("div"),s=document.createElement("div"),l=document.createElement("div");return e.style.width="0px",e.style.pointerEvents="none",o.style.pointerEvents="none",s.style.display="flex",l.appendChild(e),l.appendChild(o),s.appendChild(l),this.verticalScroller=e,this.horizontalScroller=o,t.appendChild(s),t.classList.add("scroller"),{scroller:t,verticalScroller:e,horizontalScroller:o}}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 f{constructor(t){i(this,"element");i(this,"ctx");i(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 o=this.element.getContext("2d");if(!o)throw new Error("Enable hardware acceleration");this.ctx=o}renderCell(t){const{column:e,row:o}=t;this.root.data[o][e].render(this.root)}renderSheet(){const t=this.root.viewport.firstRow,e=this.root.viewport.lastCol+3,o=this.root.viewport.lastRow+3,s=this.root.viewport.firstCol;console.log();let l=0;for(let r=t;r<=o;r++){for(let n=s;n<=e&&!(!this.root.config.columns[n]||!this.root.config.rows[r]);n++)this.renderCell({column:n,row:r});l++}console.log(`Rendered ${l} rows!`)}}class p{constructor(t){i(this,"element");i(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:o}=t;this.element.style.width=o+"px",this.element.style.height=e+"px"}}class v{constructor(t){i(this,"element");i(this,"root");this.root=t;const e=document.createElement("div");e.classList.add("toolbar"),this.element=e}}class c{constructor(t){i(this,"rows");i(this,"columns");i(this,"view",{width:800,height:600});this.columns=t.columns,this.rows=t.rows,this.view=t.view}}class C{}class y{constructor(t,e){i(this,"root");i(this,"top");i(this,"left");i(this,"right");i(this,"bottom");i(this,"firstRow");i(this,"lastRow");i(this,"firstCol");i(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
+var d=Object.defineProperty;var u=(n,t,e)=>t in n?d(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var i=(n,t,e)=>(u(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 s of document.querySelectorAll('link[rel="modulepreload"]'))o(s);new MutationObserver(s=>{for(const l of s)if(l.type==="childList")for(const r of l.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&o(r)}).observe(document,{childList:!0,subtree:!0});function e(s){const l={};return s.integrity&&(l.integrity=s.integrity),s.referrerPolicy&&(l.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?l.credentials="include":s.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function o(s){if(s.ep)return;s.ep=!0;const l=e(s);fetch(s.href,l)}})();class w{constructor(t){i(this,"element");i(this,"root");this.root=t;const e=document.createElement("input");this.element=e,this.hide()}hide(){this.element.style.display="none"}show(){this.element.style.display="block"}}class g{constructor(t){i(this,"element");i(this,"root");this.root=t;const e=document.createElement("header");e.classList.add(),this.element=e}}class m{constructor(t){i(this,"element");i(this,"verticalScroller");i(this,"horizontalScroller");i(this,"root");i(this,"handleScroll",()=>{const t=this.getViewportBoundlingRect();this.root.viewport.updateValues(t),this.root.renderSheet()});this.root=t;const{horizontalScroller:e,scroller:o,verticalScroller:s}=this.buildComponent();this.element=o,this.verticalScroller=s,this.horizontalScroller=e,this.element.style.height=this.root.config.view.height+"px",this.element.style.width=this.root.config.view.width+"px",this.updateScrollerSize(),this.element.addEventListener("scroll",this.handleScroll)}getViewportBoundlingRect(){const{scrollTop:t,scrollLeft:e}=this.element,{height:o,width:s}=this.element.getBoundingClientRect(),l=t+o,r=e+s;return{top:t,left:e,bottom:l,right:r}}buildComponent(){const t=document.createElement("div"),e=document.createElement("div"),o=document.createElement("div"),s=document.createElement("div"),l=document.createElement("div");return e.style.width="0px",e.style.pointerEvents="none",o.style.pointerEvents="none",s.style.display="flex",l.appendChild(e),l.appendChild(o),s.appendChild(l),this.verticalScroller=e,this.horizontalScroller=o,t.appendChild(s),t.classList.add("scroller"),{scroller:t,verticalScroller:e,horizontalScroller:o}}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 f{constructor(t){i(this,"element");i(this,"ctx");i(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 o=this.element.getContext("2d");if(!o)throw new Error("Enable hardware acceleration");this.ctx=o}renderCell(t){const{column:e,row:o}=t;this.root.data[o][e].render(this.root)}renderSheet(){const t=this.root.viewport.firstRow,e=this.root.viewport.lastCol+3,o=this.root.viewport.lastRow+3,s=this.root.viewport.firstCol;console.log();let l=0;for(let r=t;r<=o;r++){for(let h=s;h<=e&&!(!this.root.config.columns[h]||!this.root.config.rows[r]);h++)this.renderCell({column:h,row:r});l++}console.log(`Rendered ${l} rows!`)}}class p{constructor(t){i(this,"element");i(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:o}=t;this.element.style.width=o+"px",this.element.style.height=e+"px"}}class v{constructor(t){i(this,"element");i(this,"root");this.root=t;const e=document.createElement("div");e.classList.add("toolbar"),this.element=e}}class c{constructor(t){i(this,"rows");i(this,"columns");i(this,"view",{width:800,height:600});this.columns=t.columns,this.rows=t.rows,this.view=t.view}}class C{}class y{constructor(t,e){i(this,"root");i(this,"top");i(this,"left");i(this,"right");i(this,"bottom");i(this,"firstRow");i(this,"lastRow");i(this,"firstCol");i(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(),console.log({first:this.firstCol,last:this.lastCol})}getFirstRow(){let t=0;for(let e=0,o=0;o<=this.top;e++)o+=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 S{constructor(t,e){i(this,"x");i(this,"y");i(this,"width");i(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 o=0;for(let s=0;s<t;s++)o+=e.columns[s].width;return o}getYCoord(t,e){let o=0;for(let s=0;s<t;s++)o+=e.rows[s].height;return o}}class b{constructor(t){i(this,"value");i(this,"displayValue");i(this,"resultValue");i(this,"position");this.value=t.value,this.displayValue=t.displayValue,this.resultValue=t.resultValue,this.position=t.position}render(t){let{height:e,width:o,x:s,y:l}=new S(t.config,this.position);const{ctx:r}=t;l-=t.viewport.top,s-=t.viewport.left,r.clearRect(s,l,o,e),r.fillStyle="white",r.strokeStyle="black",r.fillRect(s+1,l+1,o-1,e-1),r.strokeRect(s,l,o,e),r.fillStyle="black",r.textAlign="left",r.font="16px Arial",r.textBaseline="middle",r.fillText(this.displayValue,s+2,l+e/2,o)}}class x{constructor(t){i(this,"width");i(this,"title");this.width=t.width,this.title=t.title}}class R{constructor(t){i(this,"height");i(this,"title");this.height=t.height,this.title=t.title}}function E(h,t){const e=[];for(let o=0;o<=h;o++){const s=[];for(let l=0;l<=t;l++){const r=`${o}:${l}`,n=new b({displayValue:r,resultValue:r,value:r,position:{column:l,row:o}});s.push(n)}e.push(s)}return e}function L(h,t){const e=[];for(let l=0;l<=h;l++){const r=new R({height:40,title:String(l)});e.push(r)}const o=[];for(let l=0;l<=t;l++){const r=new x({title:String(l),width:150});o.push(r)}return new c({columns:o,rows:e,view:{height:600,width:800}})}class V{constructor(t,e){i(this,"table");i(this,"scroller");i(this,"toolbar");i(this,"header");i(this,"sheet");i(this,"editor");i(this,"styles");i(this,"config");i(this,"data");i(this,"viewport");const o=L(150,150);e!=null&&e.view&&(o.view=e.view),this.config=new c(o),this.sheet=new f(this);const s=E(150,150);this.table=new p(this),this.scroller=new m(this),this.toolbar=new v(this),this.header=new g(this),this.editor=new w(this),this.viewport=new y(this,this.scroller.getViewportBoundlingRect()),this.data=s,this.styles=new C,this.buildComponent(),this.appendTableToTarget(t)}buildComponent(){const t=document.createElement("div");t.classList.add("content"),t.appendChild(this.header.element),t.appendChild(this.sheet.element),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.
+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(),console.log({first:this.firstCol,last:this.lastCol})}getFirstRow(){let t=0;for(let e=0,o=0;o<=this.top;e++)o+=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 S{constructor(t,e){i(this,"x");i(this,"y");i(this,"width");i(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 o=0;for(let s=0;s<t;s++)o+=e.columns[s].width;return o}getYCoord(t,e){let o=0;for(let s=0;s<t;s++)o+=e.rows[s].height;return o}}class b{constructor(t){i(this,"value");i(this,"displayValue");i(this,"resultValue");i(this,"position");this.value=t.value,this.displayValue=t.displayValue,this.resultValue=t.resultValue,this.position=t.position}render(t){let{height:e,width:o,x:s,y:l}=new S(t.config,this.position);const{ctx:r}=t;l-=t.viewport.top,s-=t.viewport.left,r.clearRect(s,l,o,e),r.fillStyle="white",r.strokeStyle="black",r.fillRect(s+1,l+1,o-1,e-1),r.strokeRect(s,l,o,e),r.fillStyle="black",r.textAlign="left",r.font="16px Arial",r.textBaseline="middle",r.fillText(this.displayValue,s+2,l+e/2,o)}}class x{constructor(t){i(this,"width");i(this,"title");this.width=t.width,this.title=t.title}}class R{constructor(t){i(this,"height");i(this,"title");this.height=t.height,this.title=t.title}}function E(n,t){const e=[];for(let o=0;o<=n;o++){const s=[];for(let l=0;l<=t;l++){const r=`${o}:${l}`,h=new b({displayValue:r,resultValue:r,value:r,position:{column:l,row:o}});s.push(h)}e.push(s)}return e}function L(n,t){const e=[];for(let l=0;l<=n;l++){const r=new R({height:40,title:String(l)});e.push(r)}const o=[];for(let l=0;l<=t;l++){const r=new x({title:String(l),width:150});o.push(r)}return new c({columns:o,rows:e,view:{height:600,width:800}})}class V{constructor(t,e){i(this,"table");i(this,"scroller");i(this,"toolbar");i(this,"header");i(this,"sheet");i(this,"editor");i(this,"styles");i(this,"config");i(this,"data");i(this,"viewport");const o=L(750,750);e!=null&&e.view&&(o.view=e.view),this.config=new c(o),this.sheet=new f(this);const s=E(750,750);this.table=new p(this),this.scroller=new m(this),this.toolbar=new v(this),this.header=new g(this),this.editor=new w(this),this.viewport=new y(this,this.scroller.getViewportBoundlingRect()),this.data=s,this.styles=new C,this.buildComponent(),this.appendTableToTarget(t)}buildComponent(){const t=document.createElement("div");t.classList.add("content"),t.appendChild(this.header.element),t.appendChild(this.sheet.element),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}renderSheet(){this.sheet.renderSheet()}renderCell(t,e){this.data[t][e].render(this)}}const a=new V("#spreadsheet",{view:{height:400,width:1200}});a.renderSheet();console.log(a);
+ 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}renderSheet(){this.sheet.renderSheet()}renderCell(t,e){this.data[t][e].render(this)}}const a=new V("#spreadsheet",{view:{height:window.innerHeight,width:window.innerWidth}});a.renderSheet();console.log(a);

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/spreadsheet_2/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + TS</title>
-    <script type="module" crossorigin src="/spreadsheet_2/assets/index-91687309.js"></script>
+    <script type="module" crossorigin src="/spreadsheet_2/assets/index-2bcf435d.js"></script>
     <link rel="stylesheet" href="/spreadsheet_2/assets/index-eeaaf6ba.css">
   </head>
   <body>