js-spread-grid 0.0.21 → 0.0.22

package/dist/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SpreadGrid=t():e.SpreadGrid=t()}(self,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function o(e){return null===e?"null":Array.isArray(e)?`[${e.map(o).join(",")}]`:"object"==typeof e?(t=e,`{${Object.keys(t).sort().map((e=>`${e}:${o(t[e])}`)).join(",")}}`):JSON.stringify(e);var t}function n(e,t){return"FILTER"===e.type^"FILTER"===t.type?"FILTER":"DATA"===e.type&&"DATA"===t.type?"DATA":"OTHER"}function i(e,t,i,r){return e.map((e=>{const s=o(e.columnId),l=o(e.rowId);if(!i.has(s))return null;if(!r.has(l))return null;const d=i.get(s),a=r.get(l);return{edit:t.resolve(a,d).edit,cell:e,type:n(d,a)}})).filter((e=>e?.edit))}e.d(t,{default:()=>Ke});const r="12px Calibri",s={top:2,right:5,bottom:2,left:5};function l(e,t){return Math.round(e*t)/t}function d(e,t,o){const n=e.state,i=e.canvases[`${t}-${o}`],s=n.sections[t],d=n.sections[o],a=d.columns,u=s.rows;if(0===u.length||0===a.length)return void(i.parentElement&&i.parentElement.removeChild(i));i.parentElement||e.element.appendChild(i),console.log("draw");const c=i.getContext("2d",{alpha:!1}),h=n.scrollRect,f=n.textResolver,p=n.renderFormatResolver,m=n.borderWidth,g=s.showTopBorder,y=s.showBottomBorder,w=d.showLeftBorder,x=d.showRightBorder,b=m/2,v=u.length-1+(g?1:0)+(y?1:0),R=a.length-1+(w?1:0)+(x?1:0),A=u.map((e=>e.height)),k=a.map((e=>e.width)),E=k.reduce(((e,t)=>e+t),0)+R*m,C=A.reduce(((e,t)=>e+t),0)+v*m,I="center"===o?h.left:0,T="middle"===t?h.top:0,L="center"===o?h.width:d.width,B="middle"===t?h.height:s.height,D=k.reduce(((e,t,o)=>{const n=e[o]+t+m;return e.push(n),e}),[w?m:0]),M=A.reduce(((e,t,o)=>{const n=e[o]+t+m;return e.push(n),e}),[g?m:0]),F=D.slice(0,-1),S=M.slice(0,-1),z=Math.max(F.findLastIndex((e=>e<=I)),0),N=F.findLastIndex((e=>e<=I+L)),K=Math.max(S.findLastIndex((e=>e<=T)),0),O=S.findLastIndex((e=>e<=T+B)),H=Math.max(z,w?0:1),P=N+(x?1:0),W=Math.max(K,g?0:1),$=O+(y?1:0),q=Array.from({length:O-K+1},((e,t)=>{const o=u[t+K];return Array.from({length:N-z+1},((e,t)=>{const n=a[t+z];return p.resolve(o,n)}))})),V=(e,t)=>q[e-K][t-z];i.width=Math.round(L*devicePixelRatio),i.height=Math.round(B*devicePixelRatio),i.style.width=`${L}px`,i.style.height=`${B}px`,i.style.marginLeft=`${I}px`,i.style.marginTop=`${T}px`,i.style.marginRight=E-L-I+"px",i.style.marginBottom=C-B-T+"px",c.fillStyle="#E9E9E9",c.fillRect(0,0,i.width,i.height);const Y=(e,t)=>{c.setTransform(devicePixelRatio,0,0,devicePixelRatio,(e-I)*devicePixelRatio,(t-T)*devicePixelRatio)},G=(e,t,o,n)=>{c.beginPath(),c.rect(e,t,o,n),c.clip()};for(let e=z;e<=N;e++){c.save(),Y(D[e],0),G(0,0,k[e],C);for(let t=K;t<=O;t++){const o=V(t,e),n=o.style,i=M[t],s=D[e],d=k[e],a=A[t],u=o.text,h=n.textAlign||"left",p=n.textBaseline||"middle",g=o.padding;Y(s,i),c.fillStyle=n.background||"white",c.fillRect(0,0,d,a),"draw"in o&&o.draw(c),n.highlight&&(c.fillStyle=n.highlight,c.fillRect(0,0,d,a)),n.corner&&(c.fillStyle=n.corner,c.beginPath(),c.moveTo(d-7,a),c.lineTo(d,a),c.lineTo(d,a-7),c.fill()),c.fillStyle=n.foreground||"black",c.font=n.font||r,c.textAlign=h;const y=f.getFontMetrics(n.font),w=l("left"===h?g.left:"center"===h?d/2:"right"===h?d-g.right:0,devicePixelRatio),x=l("top"===p?y.middle+y.topOffset+g.top:"middle"===p?a/2+y.middle:"bottom"===p?a+y.middle-y.bottomOffset-g.bottom:0,devicePixelRatio);x-y.middle-y.topOffset>=0&&x-y.middle+y.bottomOffset<=a?c.fillText(u,w,x):(c.strokeStyle="#E9E9E9",c.lineWidth=m,c.beginPath(),c.moveTo(0,m+b),c.lineTo(d,m+b),c.moveTo(0,a-m-b),c.lineTo(d,a-m-b),c.stroke(),c.save(),G(0,2*m,d,a-4*m),c.fillText(u,w,x),c.restore())}c.restore()}Y(0,0);const j=(e,t,o,n,i)=>{if(!i)return;if(0===i.width)return;const r=i.width*m,s=t===n,l=e-(s?r/2:0),d=t-(s?0:r/2),a=o+(s?r/2:0),u=n+(s?0:r/2);c.strokeStyle=i.color||"black",c.lineWidth=r,i.dash?(c.setLineDash(i.dash.map((e=>e/devicePixelRatio))),c.lineDashOffset=s?l:d):c.setLineDash([]),c.beginPath(),c.moveTo(l,d),c.lineTo(a,u),c.stroke()},U=(e,t)=>e?t?e.index>t.index?e:t:e:t;for(let e=W;e<=$;e++){const t=e-1,o=e;for(let e=z;e<=N;e++){const n=U(t>=K?V(t,e).style.borderBottom:null,o<=O?V(o,e).style.borderTop:null);j(D[e]-b,M[o]-b,D[e+1]-b,M[o]-b,n)}}for(let e=H;e<=P;e++){const t=e-1,o=e;for(let e=K;e<=O;e++){const n=U(t>=z?V(e,t).style.borderRight:null,o<=N?V(e,o).style.borderLeft:null);j(D[o]-b,M[e]-b,D[o]-b,M[e+1]-b,n)}}}function a(e){if(!e.error)try{!function(e){d(e,"top","left"),d(e,"top","center"),d(e,"top","right"),d(e,"middle","left"),d(e,"middle","center"),d(e,"middle","right"),d(e,"bottom","left"),d(e,"bottom","center"),d(e,"bottom","right"),function(e){const t=e.element,o=e.input,n=e.state,i=n.inputPlacement;if(!i){if(o.parentElement){const e=document.activeElement===o;o.parentElement.removeChild(o),e&&t.focus({preventScroll:!0})}return}const r=e.canvases[i.section];if(o.style.left="left"in i?`${i.left}px`:"0",o.style.top="top"in i?`${i.top}px`:"0",o.style.right="right"in i?`${i.right}px`:"0",o.style.bottom="bottom"in i?`${i.bottom}px`:"0",o.style.marginLeft="marginLeft"in i?`${i.marginLeft}px`:"0",o.style.marginTop="marginTop"in i?`${i.marginTop}px`:"0",o.style.width=`${i.width}px`,o.style.height=`${i.height}px`,o.style.gridArea=r.style.gridArea,o.style.zIndex=r.style.zIndex,o.style.backgroundColor=n.isTextValid?"white":"#eb3434",!o.parentElement){const e=document.activeElement===t;t.appendChild(o),e&&o.focus({preventScroll:!0})}}(e),function(e){const t=e.element,o=e.state;o.resizableColumn&&o.resizableRow?t.style.cursor="nwse-resize":o.resizableColumn?t.style.cursor="col-resize":o.resizableRow?t.style.cursor="row-resize":t.style.cursor="default"}(e)}(e)}catch(t){e.error=t}e.error&&function(e){if(e.errorRendered)return;e.errorRendered=!0;const t=e.element,o=e.error;t.style.backgroundColor="#9f0000",t.style.color="white",t.style.padding="20px",t.style.display="flex",t.style.flexDirection="column",t.style.userSelect="text",t.innerHTML=`\n        <div style="font-size: 16px;">\n            An error occurred while rendering the grid, please contact the support.\n        </div>\n        <div style="font-size: 20px; font-weight: bold; padding: 20px 0;">\n            ${o.message}\n        </div>\n        <div style="font-size: 16px; white-space: pre-wrap;">${o.stack}</div>\n    `}(e)}function u(e,t,o){return[{column:{type:"DATA"},row:{type:"HEADER"},value:({column:e})=>void 0===e.header?e.id:e.header},{column:{type:"HEADER"},row:{type:"DATA"},value:({row:e})=>void 0===e.header?e.id:e.header},{column:{type:"HEADER"},row:{type:"SPECIAL"},value:""},{column:{type:"SPECIAL"},row:{type:"HEADER"},value:""},...o.map((({columnId:e,rowId:t,direction:n},i)=>({column:{id:e},row:{id:t},text:({value:e})=>`${o.length>1?i+1:""}${"ASC"===n?"⇣":"⇡"} ${e}`}))),{column:{type:"ANY"},row:{type:"FILTER"},value:({newValue:e})=>e||"",text:({newValue:e})=>e||"Search...",edit:{validate:()=>!0,parse:({string:e})=>e,autoCommit:!0}},{column:{type:"DATA"},row:{type:"DATA"},value:t},...e]}function c(e){return e}function h(e,t){return t?e+"99":e+"33"}function f(e,t,n,i,r,s,l,d,a){const u=n?o(n.columnId):null,c=n?o(n.rowId):null,f=null!==d,p=null!==l||f,m=a+2,g=a+4,y=(e,t,o,n)=>{if(o<0||o>=e.length)return!1;if(n<0||n>=t.length)return!1;const r=e[o].key,s=t[n].key;return i.isKeySelected(r,s)},w=(e,t)=>e?[t]:[];return[{column:{type:"ANY"},row:{type:"FILTER"},style:({newValue:e})=>({background:"#FBFBFB",foreground:e?"black":"#cccccc",border:{width:1,color:"gray"}})},{column:{type:"ANY"},row:{type:"HEADER"},style:{background:"#F5F5F5",border:{width:a,color:"gray"}}},{column:{type:"HEADER"},row:{type:"ANY"},style:{background:"#F5F5F5",border:{width:a,color:"gray"}}},{column:{type:"HEADER"},row:{type:"HEADER"},style:{background:"#E0E0E0"}},...e,...w(t&&!f,{column:{type:"ANY"},row:{id:t?.rowId},style:{highlight:"#81948133"}}),...w(t&&!p,{column:{id:t?.columnId},row:{id:t?.rowId},style:{highlight:"#81948188"}}),{column:{type:"ANY"},row:{type:"ANY"},condition:({rows:e,columns:t,row:o,column:n})=>y(e,t,o.index,n.index),style:({rows:e,columns:t,row:o,column:n,edit:i})=>({...y(e,t,o.index-1,n.index)?{}:{borderTop:{width:m,color:"#596959",index:Number.MAX_SAFE_INTEGER}},...y(e,t,o.index+1,n.index)?{}:{borderBottom:{width:m,color:"#596959",index:Number.MAX_SAFE_INTEGER}},...y(e,t,o.index,n.index-1)?{}:{borderLeft:{width:m,color:"#596959",index:Number.MAX_SAFE_INTEGER}},...y(e,t,o.index,n.index+1)?{}:{borderRight:{width:m,color:"#596959",index:Number.MAX_SAFE_INTEGER}},highlight:h(i?"#798d9c":"#819481",u!==n.key||c!==o.key)})},{column:{type:"ANY"},row:{type:"ANY"},condition:({row:e,column:t})=>r.isKeySelected(e.key,t.key),style:({row:e,column:t})=>({highlight:h("#93a8b8",u!==t.key||c!==e.key)})},...w(n,{column:{id:n?.columnId},row:{id:n?.rowId},style:{highlight:"#ffffffaa"}}),{column:{type:"ANY"},row:{type:"ANY"},condition:({edit:e})=>e,style:{corner:"#77777720"}},{column:{type:"ANY"},row:{type:"ANY"},condition:({row:e,column:t})=>s.hasValueByKey(e.key,t.key),style:{corner:"darkgreen"}},...w(l,{column:{id:l},row:{type:"HEADER"},style:{borderRight:{width:g,color:"cornflowerblue"}}}),...w(d,{column:{type:"HEADER"},row:{id:d},style:{borderBottom:{width:g,color:"cornflowerblue"}}})]}function p(e,t){const o=t.filter((e=>"BEGIN"===e.pinned)).length,n=t.filter((e=>"END"===e.pinned)).length,i=t.length-o-n,r=e.filter((e=>"BEGIN"===e.pinned)).length,s=e.filter((e=>"END"===e.pinned)).length,l=e.length-r-s,d=t.slice(0,o),a=t.slice(t.length-n,t.length),u=t.slice(o,t.length-n),c=e.slice(0,r),h=e.slice(e.length-s,e.length),f=e.slice(r,e.length-s),p=o>0,m=r>0,g=!0,y=!0,w=i>0||!p,x=!0,b=!p,v=!(n>0),R=!0,A=!0,k=l>0||!m,E=!0,C=!m,I=!(s>0),T=(e,t,o)=>{if(0===e.length)return 0;const n=t?e.at(0).topWithBorder:e.at(0).top;return(o?e.at(-1).bottomWithBorder:e.at(-1).bottom)-n},L=(e,t,o)=>{if(0===e.length)return 0;const n=t?e.at(0).leftWithBorder:e.at(0).left;return(o?e.at(-1).rightWithBorder:e.at(-1).right)-n};return{top:{rows:d,showTopBorder:g,showBottomBorder:y,height:T(d,g,y)},bottom:{rows:a,showTopBorder:w,showBottomBorder:x,height:T(a,w,x)},middle:{rows:u,showTopBorder:b,showBottomBorder:v,height:T(u,b,v)},left:{columns:c,showLeftBorder:R,showRightBorder:A,width:L(c,R,A)},right:{columns:h,showLeftBorder:k,showRightBorder:E,width:L(h,k,E)},center:{columns:f,showLeftBorder:C,showRightBorder:I,width:L(f,C,I)}}}function m(e,t){return[...e,...t.map((e=>({columnId:e.columnId,rowId:e.rowId,value:e.expression})))]}class g{constructor(e){this.lookup=new Map,e.forEach((e=>{const t=o(e.rowId),n=o(e.columnId);this.lookup.has(t)||this.lookup.set(t,new Map),this.lookup.get(t).set(n,e.value)}))}hasValueByKey(e,t){return this.lookup.has(e)&&this.lookup.get(e).has(t)}getValueByKey(e,t){if(this.hasValueByKey(e,t))return this.lookup.get(e).get(t)}hasValueById(e,t){return this.hasValueByKey(o(e),o(t))}getValueById(e,t){return this.getValueByKey(o(e),o(t))}}function y(e){return new g(e)}class w{constructor(e){this.lookup=new Map,e.forEach((e=>{const t=o(e.rowId),n=o(e.columnId);this.lookup.has(t)||this.lookup.set(t,new Set),this.lookup.get(t).add(n)}))}isKeySelected(e,t){return this.lookup.has(e)&&this.lookup.get(e).has(t)}isIdSelected(e,t){return this.isKeySelected(o(e),o(t))}}function x(e){return new w(e)}function b(e,t){return"function"==typeof e?e(t):e}function v(e,t,o,n){return e<o?"BEGIN":e>=t-n?"END":void 0}function R(e,t,n){return e.map(((i,r)=>{const s="id"in i?i.id:i.type;return{...i,id:s,type:i.type||"DATA",index:r,key:o(s),pinned:v(r,e.length,t,n),header:"header"in i?i.header:s,labels:i.labels||[]}}))}function A(e,t,n,i){const r=new Map(i.map((({columnId:e,width:t})=>[o(e),t])));return R(e,t,n).map((e=>({...e,width:r.has(e.key)?r.get(e.key):e.width})))}function k(e,t,n,i){const r=new Map(i.map((({rowId:e,height:t})=>[o(e),t])));return R(e,t,n).map((e=>({...e,height:r.has(e.key)?r.get(e.key):e.height})))}function E(e,t,o){let n=o;return e.map(((e,i)=>{const r=l("width"in e?e.width:100,t),s={...e,index:i,width:r,leftWithBorder:n-o,left:n,right:n+r,rightWithBorder:n+r+o};return n+=s.width+o,s}))}function C(e,t,o){let n=o;return e.map(((e,i)=>{const r=l("height"in e?e.height:20,t),s={...e,index:i,height:r,topWithBorder:n-o,top:n,bottom:n+r,bottomWithBorder:n+r+o};return n+=s.height+o,s}))}const I={HEADER:["HEADER"],FILTER:["FILTER"],DATA:["DATA"],CUSTOM:["CUSTOM"],ANY:["HEADER","DATA","FILTER","CUSTOM"],SPECIAL:["HEADER","FILTER","CUSTOM"],undefined:[]};class T{byKey=new Map;byIndex=new Map;byLabel=new Map;byType=new Map}class L{lookup=new T;hasRules=!1;addRule(e,t,n){if(this.hasRules=!0,Array.isArray(e))for(const o of e)this.addRule(o,t,n);else if(Array.isArray(t))for(const o of t)this.addRule(e,o,n);else{e=e?"id"in e?{key:o(e.id)}:e:{type:"DATA"},t=t?"id"in t?{key:o(t.id)}:t:{type:"DATA"},"key"in e&&r(this.lookup.byKey,e.key),"index"in e&&r(this.lookup.byIndex,e.index),"label"in e&&r(this.lookup.byLabel,e.label);for(const t of I[e.type])r(this.lookup.byType,t)}function i(e,t){e.has(t)||e.set(t,[]),e.get(t).push(n)}function r(e,o){e.has(o)||e.set(o,new T),"key"in t&&i(e.get(o).byKey,t.key),"index"in t&&i(e.get(o).byIndex,t.index),"label"in t&&i(e.get(o).byLabel,t.label);for(const n of I[t.type])i(e.get(o).byType,n)}}getRules(e,t){const o=[];if(!this.hasRules)return o;function n(e){for(const t of e)o.push(t)}function i(e){e.byKey.has(t.key)&&n(e.byKey.get(t.key)),e.byIndex.has(t.index)&&n(e.byIndex.get(t.index)),e.byType.has(t.type)&&n(e.byType.get(t.type));for(const o of t.labels)e.byLabel.has(o)&&n(e.byLabel.get(o))}this.lookup.byKey.has(e.key)&&i(this.lookup.byKey.get(e.key)),this.lookup.byIndex.has(e.index)&&i(this.lookup.byIndex.get(e.index)),this.lookup.byType.has(e.type)&&i(this.lookup.byType.get(e.type));for(const t of e.labels)this.lookup.byLabel.has(t)&&i(this.lookup.byLabel.get(t));return o}}const B=["borderTop","borderRight","borderBottom","borderLeft"],D={validate:()=>!0,parse:e=>e};function M(e,t){const o={...e};if("border"in o){for(const e of B)o[e]=o.border;delete o.border}for(const e of B)e in o&&(o[e]={...o[e],index:t});return o}class F{constructor(e){this.rulesLookup=new L;for(const[t,o]of e.entries()){const e={index:t};"condition"in o&&(e.condition=o.condition),"style"in o&&(e.style="function"==typeof o.style?o.style:()=>o.style),"value"in o&&(e.value="function"==typeof o.value?o.value:()=>o.value),"text"in o&&(e.text="function"==typeof o.text?o.text:()=>o.text),"padding"in o&&(e.padding="function"==typeof o.padding?o.padding:()=>o.padding),"edit"in o&&(e.edit=o.edit),"draw"in o&&(e.draw=o.draw),this.rulesLookup.addRule(o.column,o.row,e)}}resolve(e,t,o,n,i,r){const l=this.rulesLookup.getRules(i,n).sort(((e,t)=>e.index-t.index)).filter(((e,t,o)=>e.index!==o[t-1]?.index));let d,a={data:e,rows:t,columns:o,row:n,column:i},u={},c=s;r.hasValueByKey(n.key,i.key)&&(a={...a,newValue:r.getValueByKey(n.key,i.key)});for(const e of l)if((!("condition"in e)||e.condition(a))&&("value"in e&&(a={...a,value:e.value(a)}),"style"in e&&(u={...u,...M(e.style(a),e.index)}),"text"in e&&(a={...a,text:e.text(a)}),"padding"in e&&(c={...c,...e.padding(a)}),"edit"in e&&(a={...a,edit:e.edit&&"edit"in a?{...a.edit,...e.edit}:{...D,...e.edit}}),"draw"in e)){const t=a;d=o=>e.draw({...t,ctx:o})}const h=function(e){return"text"in e?e.text:void 0!==e.value?`${e.value}`:""}(a),f={style:u,visible:!0,text:h,padding:c};return"value"in a&&(f.value=a.value),"edit"in a&&(f.edit=a.edit),void 0!==d&&(f.draw=d),"text"in a&&(f.text=a.text),f}}function S(e){return new F(e)}class z{constructor(e,t,o,n,i){this.formattingRules=e,this.data=t,this.rows=o,this.columns=n,this.edition=i}resolve(e,t){return this.formattingRules.resolve(this.data,this.rows,this.columns,e,t,this.edition)}}function N(e,t,o,n,i){return new z(e,t,o,n,i)}function K(e,t,n){const i=new Map;for(const r of e){const e=o(r[t]),s=o(r[n]);i.has(e)||i.set(e,new Map),i.get(e).set(s,r.expression)}return i}function O(e,t,o,n,i,r,s){if(0===e.length)return i;const l=K(e,"columnId","rowId"),d=r.filter((e=>"FILTER"!==e.type&&l.has(e.key)));return 0===d.length?i:i.filter((e=>{for(const a of d){const d=o.resolve(n,i,r,e,a,s),u=l.get(a.key);if(!t.resolve(n,i,r,e,a,d.value,d.text,u))return!1}return!0}))}function H(e,t,o,n,i,r,s){if(0===e.length)return r;const l=K(e,"rowId","columnId"),d=i.filter((e=>"FILTER"!==e.type&&l.has(e.key)));return 0===d.length?r:r.filter((e=>{for(const a of d){const d=o.resolve(n,i,r,a,e,s),u=l.get(a.key);if(!t.resolve(n,i,r,a,e,d.value,d.text,u))return!1}return!0}))}function P(e,t,o,n){return{top:e,bottom:t,left:o,right:n}}function W(e,t){return{width:e.length?e.at(-1).rightWithBorder:0,height:t.length?t.at(-1).bottomWithBorder:0}}class ${constructor(){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.fontMetrics=new Map}measureWidth(e,t){const o=this.context;return o.font=t||r,o.measureText(e).width}measureHeight(e,t){let o=1;for(const t of e)"\n"===t&&o++;return o*this.getFontMetrics(t).height}getFontMetrics(e){const t=e;if(this.fontMetrics.has(t))return this.fontMetrics.get(t);const o=this.context;o.font=e||r;const n=o.measureText("X"),i=(n.actualBoundingBoxDescent-n.actualBoundingBoxAscent)/2,s={topOffset:i+n.fontBoundingBoxAscent,middle:-i,bottomOffset:n.fontBoundingBoxDescent-i,height:n.fontBoundingBoxAscent+n.fontBoundingBoxDescent};return this.fontMetrics.set(t,s),s}}function q(){return new $}function V(e,t){return t.top>=e.top&&t.left>=e.left&&t.top+t.height<=e.top+e.height&&t.left+t.width<=e.left+e.width}function Y(e,t){const o={top:Math.max(e.top,t.top),left:Math.max(e.left,t.left),width:Math.min(e.left+e.width,t.left+t.width)-Math.max(e.left,t.left),height:Math.min(e.top+e.height,t.top+t.height)-Math.max(e.top,t.top)};return o.width>=0&&o.height>=0?o:{top:e.top,left:e.left,width:0,height:0}}function G(e,t){return{top:e.top-t,left:e.left-t,width:e.width+2*t,height:e.height+2*t}}function j(e){return e.width*e.height}function U(e,t){return{top:e.top,left:e.left,width:Math.max(0,e.width-t.left-t.right),height:Math.max(0,e.height-t.top-t.bottom)}}const _=200,X=400,J={left:0,top:0,width:0,height:0};function Q(e){return e.reduce(((e,t)=>e.set(t.key,t)),new Map)}function Z(e,t,n,i,r,s,l,d){if(!e)return[];if(t)return[];if(!i)return[];if(!n)return[];const a=o(n.columnId),u=o(n.rowId),c=o(i.columnId),h=o(i.rowId);if(!l.has(a))return[];if(!d.has(u))return[];if(!l.has(c))return[];if(!d.has(h))return[];const f=Math.min(l.get(a).index,l.get(c).index),p=Math.max(l.get(a).index,l.get(c).index),m=Math.min(d.get(u).index,d.get(h).index),g=Math.max(d.get(u).index,d.get(h).index);return r.slice(f,p+1).flatMap((e=>s.slice(m,g+1).map((t=>({rowId:t.id,columnId:e.id})))))}function ee(e,t){const o=function(e){return"BEGIN"===e.pinned?"top":"END"===e.pinned?"bottom":"middle"}(t),n=function(e){return"BEGIN"===e.pinned?"left":"END"===e.pinned?"right":"center"}(e);return`${o}-${n}`}function te(e,t,n,i,r){if(!t)return null;const s=o(t.columnId),l=o(t.rowId);if(!n.has(s))return null;if(!i.has(l))return null;const d=n.get(s),a=i.get(l);if(0===e.length)return null;const u={width:d.width,height:a.height,section:ee(d,a)};switch(a.pinned){case"BEGIN":u.top=a.top;break;case"END":u.bottom=r.top.height+r.middle.height+r.bottom.height-a.top-a.height;break;default:u.marginTop=a.top-r.top.height}switch(d.pinned){case"BEGIN":u.left=d.left;break;case"END":u.right=r.left.width+r.center.width+r.right.width-d.left-d.width;break;default:u.marginLeft=d.left-r.left.width}return u}function oe(e,t){return t.every((t=>t.edit.validate({string:e})))}function ne(e){return Array.isArray(e)?e.map(((e,t)=>t)):Object.keys(e)}function ie(e){return ne(e)}function re(e){const t=new Set;if(Array.isArray(e))for(const o of e)for(const e of ne(o))t.add(e);else for(const o in e)for(const n of ne(e[o]))t.add(n);return[...t]}function se(e,t){if(!e.some((e=>"DATA-BLOCK"===e.type)))return e;const o=[];for(const n of e)if("DATA-BLOCK"===n.type){const e="selector"in n?n.selector(t):re(t);for(const t of e)o.push({...n,id:t,type:"DATA"})}else o.push(n);return o}function le(e,t){if(!e.some((e=>"DATA-BLOCK"===e.type)))return e;const o=[];for(const n of e)if("DATA-BLOCK"===n.type){const e="selector"in n?n.selector(t):ie(t);for(const t of e)o.push({...n,id:t,type:"DATA"})}else o.push(n);return o}const de=({text:e,expression:t})=>e.includes(t);class ae{constructor(e){this.rulesLookup=new L;for(const t of e){const e={by:o("by"in t?t.by:"FILTER"),condition:t.condition||de};this.rulesLookup.addRule(t.column,t.row,e)}}resolve(e,t,o,n,i,r,s,l){const d=this.rulesLookup.getRules(i,n);if(0===d.length)return"DATA"!==n.type||"DATA"!==i.type||!l.has('"FILTER"')||de({text:s,expression:l.get('"FILTER"')});let a={data:e,rows:t,columns:o,row:n,column:i,value:r,text:s};for(const e of d){if(!l.has(e.by))continue;const t={...a,expression:l.get(e.by)};if(!e.condition(t))return!1}return!0}}function ue(e){return new ae(e)}function ce(e){return e}function he(e){return e}function fe(e,t,o,n,i,r){if(e.every((e=>"number"==typeof e.width)))return e;const s=e=>{const r="width"in e?e.width:"fit-once";if("number"==typeof r)return r;if(i.has(e.key)){const t=i.get(e.key);if("fit-once"===r&&!t.dataOnly)return t.width;if("fit-data-once"===r&&t.dataOnly)return t.width}let s=0;for(const i of t){if("DATA"!==i.type&&"fit-data-once"===r)continue;if("DATA"!==i.type&&"fit-data"===r)continue;const t=n.resolve(i,e),l=t.text,d=t.font,a=t.padding.left+t.padding.right,u=o.measureWidth(l,d)+a;s=Math.max(s,u)}return i.set(e.key,{width:s,dataOnly:"fit-data-once"===r}),s};for(const e of i.keys())r.has(e)||i.delete(e);return e.map((e=>({...e,width:s(e)})))}function pe(e,t,o,n,i,r){if(t.every((e=>"number"==typeof e.height)))return t;const s=t=>{const r="height"in t?t.height:"fit-once";if("number"==typeof r)return r;if(i.has(t.key)){const e=i.get(t.key);if("fit-once"===r&&!e.dataOnly)return e.height;if("fit-data-once"===r&&e.dataOnly)return e.height}let s=0;for(const i of e){if("DATA"!==i.type&&"fit-data-once"===r)continue;if("DATA"!==i.type&&"fit-data"===r)continue;const e=n.resolve(t,i),l=e.text,d=e.font,a=e.padding.top+e.padding.bottom,u=o.measureHeight(l,d)+a;s=Math.max(s,u)}return i.set(t.key,{height:s,dataOnly:"fit-data-once"===r}),s};for(const e of i.keys())r.has(e)||i.delete(e);return t.map((e=>({...e,height:s(e)})))}function me(e){return new Set(e.map((e=>e.key)))}function ge(e){return e}function ye(e,t){return null!=e.value&&(null==t.value||e.value<t.value)}function we(e,t){return null!=e.value&&(null==t.value||e.value>t.value)}class xe{constructor(e){this.rulesLookup=new L;for(const t of e){const e={by:stringifyId("by"in t?t.by:"HEADER"),comparatorAsc:t.comparator||ye,comparatorDesc:(e,o)=>-t.comparator(e,o)||we};this.rulesLookup.addRule(t.column,t.row,e)}}resolve(e,t,o){const n=this.rulesLookup.getRules(e,t);if(0===n.length)return"DATA"!==t.type||"DATA"!==e.type?null:o.has('"HEADER"')?"ASC"===o.get('"HEADER"')?ye:we:null;if(n.length>1)throw new Error("Multiple sorting rules for the same cell");const i=n[0];return"ASC"===o.get(i.by)?i.comparatorAsc:i.comparatorDesc}}function be(e){return new xe(e)}function ve(e,t,n){const i=new Map;for(const r of e){const e=o(r[t]),s=o(r[n]);i.has(e)||i.set(e,new Map),i.get(e).set(s,r.direction)}return i}function Re(e,t){e.sort(((e,t)=>{const o=e.comparator(e.cell,t.cell);return"number"==typeof o?o:o?-1:1})),t.push(...e.map((e=>e.entity))),e.length=0}function Ae(e,t,n,i,r,s,l){if(0===e.length)return r;const d=ve(e,"columnId","rowId"),a=new Map(s.map((e=>[e.key,e]))),u=e.map((e=>o(e.columnId))).filter((e=>a.has(e))).map((e=>a.get(e))).reverse();if(0===u.length)return r;for(const e of u){const o=[],a=[];for(const u of r){const c=t.resolve(e,u,d.get(e.key));if(!c){Re(a,o),o.push(u);continue}const h={entity:u,comparator:c,cell:n.resolve(i,r,s,u,e,l)};0!==a.length&&a[0].comparator!==c?(Re(a,o),a.push(h)):a.push(h)}Re(a,o),r=o}return r}function ke(e,t,n,i,r,s,l){if(0===e.length)return s;const d=ve(e,"rowId","columnId"),a=new Map(r.map((e=>[e.key,e]))),u=e.map((e=>o(e.rowId))).filter((e=>a.has(e))).map((e=>a.get(e))).reverse();if(0===u.length)return s;for(const e of u){const o=[],a=[];for(const u of s){const c=t.resolve(u,e,d.get(e.key));if(!c){Re(a,o),o.push(u);continue}const h={entity:u,comparator:c,cell:n.resolve(i,r,s,e,u,l)};0!==a.length&&a[0].comparator!==c?(Re(a,o),a.push(h)):a.push(h)}Re(a,o),s=o}return s}const Ee=5;function Ce(e,t,n,i,r){if(!i)return null;const s=t.get(o(i.columnId)),l=n.get(o(i.rowId)),d=r.x;return"HEADER"!==l.type?null:d>=s.right-Ee&&d<=s.right+Ee?s.id:0===s.index||d<s.left-Ee||d>s.left+Ee?null:e[s.index-1].id}function Ie(e,t,n,i,r){if(!i)return null;const s=t.get(o(i.columnId)),l=n.get(o(i.rowId)),d=r.y;return"HEADER"!==s.type?null:d>=l.bottom-Ee&&d<=l.bottom+Ee?l.id:0===l.index||d<l.top-Ee||d>l.top+Ee?null:e[l.index-1].id}function Te(e){return e.map((e=>({columnId:"columnId"in e?e.columnId:"HEADER",rowId:"rowId"in e?e.rowId:"HEADER",direction:e.direction})))}function Le(e){return e.map((e=>({columnId:"columnId"in e?e.columnId:"FILTER",rowId:"rowId"in e?e.rowId:"FILTER",expression:e.expression})))}function Be(e,t){return function(e,t){const o=e.filter((e=>"DATA"===e.type)).map((e=>e.id));return t(o),o}(e,t)}function De(e){console.count("updateState");const t={...e.localOptions,...e.externalOptions},o=e.memory,n=e.state;function r(e,t,n){const i=o[e]&&o[e].dependencies;return i&&!n.some(((e,t)=>e!==i[t]))||(o[e]={value:t(...n),dependencies:n}),o[e].value}const s=window.devicePixelRatio,l=t.borderWidth/s,d=t.data,a=e.input.value,h=r("sortBy",Te,[t.sortBy]),g=r("filters",Le,[t.filters]),w=r("textResolver",q,[]),v=r("dataFormatting",u,[t.formatting,t.dataSelector,h]),R=r("editedCellsAndFilters",m,[t.editedCells,g]),I=r("edition",y,[R]),T=r("invokedColumns",b,[t.columns,d]),L=r("invokedRows",b,[t.rows,d]),B=r("unfoldedColumns",se,[T,d]),D=r("unfoldedRows",le,[L,d]),M=r("unfilteredColumns",A,[B,t.pinnedLeft,t.pinnedRight,t.columnWidths]),F=r("unfilteredRows",k,[D,t.pinnedTop,t.pinnedBottom,t.rowHeights]),z=r("unfilteredColumnKeys",me,[M]),K=r("unfilteredRowKeys",me,[F]),$=r("filterFormatting",ce,[v]),ee=r("filterFormattingRules",S,[$]),ne=r("filteringRules",ue,[t.filtering]),ie=r("filteredColumns",H,[g,ne,ee,d,F,M,I]),re=r("filteredRows",O,[g,ne,ee,d,F,M,I]),de=r("sortingFormatting",ge,[v]),ae=r("sortingFormattingRules",S,[de]),ye=r("sortingRules",be,[t.sorting]),we=r("sortedColumns",ke,[h,ye,ae,d,re,ie,I]),xe=r("sortedRows",Ae,[h,ye,ae,d,re,ie,I]),ve=r("measureFormatting",he,[v]),Re=r("measureFormattingRules",S,[ve]),Ee=r("measureFormatResolver",N,[Re,d,xe,we,I]),De=e.columnWidthCache,Me=e.rowHeightCache,Fe=r("measuredColumns",fe,[we,xe,w,Ee,De,z]),Se=r("measuredRows",pe,[we,xe,w,Ee,Me,K]),ze=r("columns",E,[Fe,s,l]),Ne=r("rows",C,[Se,s,l]),Ke=r("columnLookup",Q,[ze]),Oe=r("rowLookup",Q,[Ne]),He=t.focusedCell,Pe=r("sections",p,[ze,Ne]),We=t.selectedCells,$e=r("fixedSize",P,[Pe.top.height,Pe.bottom.height,Pe.left.width,Pe.right.width]),qe=r("totalSize",W,[ze,Ne]),Ve=function(e,t,o,n,i,r){if(!t)return null;if(t.x<0||t.y<0||t.x>r.width||t.y>r.height)return null;const s=e.scrollLeft,l=e.scrollTop,d=e.clientWidth,a=e.clientHeight,u=t.x<=i.left?t.x:t.x>=d-i.right?r.width-d+t.x:t.x+s,c=function(e,t){if(0===e.length)return-1;if(t<e[0].topWithBorder)return-1;if(t>e[e.length-1].bottomWithBorder)return-1;let o=0,n=e.length-1;for(;o<=n;){const i=Math.floor((o+n)/2);if(t<e[i].topWithBorder)n=i-1;else{if(!(t>e[i].bottomWithBorder))return i;o=i+1}}return-1}(o,t.y<=i.top?t.y:t.y>=a-i.bottom?r.height-a+t.y:t.y+l),h=function(e,t){if(0===e.length)return-1;if(t<e[0].leftWithBorder)return-1;if(t>e[e.length-1].rightWithBorder)return-1;let o=0,n=e.length-1;for(;o<=n;){const i=Math.floor((o+n)/2);if(t<e[i].leftWithBorder)n=i-1;else{if(!(t>e[i].rightWithBorder))return i;o=i+1}}return-1}(n,u);return-1===c||-1===h?null:{rowId:o[c].id,columnId:n[h].id}}(e.element,e.mousePosition,Ne,ze,$e,qe),Ye=e.resizingColumn||r("resizableColumn",Ce,[ze,Ke,Oe,Ve,e.mousePosition]),Ge=e.resizingRow||r("resizableRow",Ie,[Ne,Ke,Oe,Ve,e.mousePosition]),je=r("highlightedCells",Z,[e.isMouseDown,!!Ye||!!Ge,He,Ve,ze,Ne,Ke,Oe]),Ue=r("selection",x,[We]),_e=r("highlight",x,[je]),Xe=r("renderFormatting",f,[v,Ve,He,Ue,_e,I,Ye,Ge,t.borderWidth]),Je=r("renderFormattingRules",S,[Xe]),Qe=r("renderFormatResolver",N,[Je,d,Ne,ze,I]),Ze=r("inputFormatting",c,[v]),et=r("inputFormattingRules",S,[Ze]),tt=r("inputFormatResolver",N,[et,d,Ne,ze,I]),ot=r("editableCells",i,[We,tt,Ke,Oe]),nt=r("inputPlacement",te,[ot,He,Ke,Oe,Pe]),it=r("isTextValid",oe,[a,ot]),rt=function(e,t,o,n){const i={width:n.getBoundingClientRect().width,height:n.getBoundingClientRect().height},r={left:n.scrollLeft,top:n.scrollTop},s=e||J,l=U({left:0,top:0,...t},o),d=U({...r,...i},o),a=Y(l,G(d,_)),u=Y(l,G(d,X));return V(l,s)&&V(s,a)?j(s)>2*j(u)?u:s:u}(n?.scrollRect,qe,$e,e.element);r("activeColumns",Be,[ze,t.onActiveColumnsChange]),r("activeRows",Be,[Ne,t.onActiveRowsChange]),e.state={options:t,devicePixelRatio:s,borderWidth:l,data:d,dataFormatting:v,edition:I,filteredColumns:ie,filteredRows:re,columns:ze,rows:Ne,sections:Pe,selectedCells:We,selection:Ue,highlight:_e,hoveredCell:Ve,focusedCell:He,renderFormatting:Xe,renderFormatResolver:Qe,inputFormatting:Ze,inputFormatResolver:tt,fixedSize:$e,totalSize:qe,textResolver:w,scrollRect:rt,highlightedCells:je,inputPlacement:nt,columnLookup:Ke,rowLookup:Oe,text:a,isTextValid:it,resizableColumn:Ye,resizableRow:Ge}}function Me(e){if(!e.error)try{De(e)}catch(t){e.error=t}}function Fe(e,t){const o=new w(t);return[...t,...e.filter((e=>!o.isIdSelected(e.rowId,e.columnId)))]}function Se(e,t){const o=new w(t);return e.filter((e=>!o.isIdSelected(e.rowId,e.columnId)))}function ze(e){const t=e.currentTarget.getBoundingClientRect();return{x:e.clientX-t.left,y:e.clientY-t.top}}function Ne(e){if("spread-grid-context"in e)return;console.log("initialize");const t={"top-left":document.createElement("canvas"),"top-center":document.createElement("canvas"),"top-right":document.createElement("canvas"),"middle-left":document.createElement("canvas"),"middle-center":document.createElement("canvas"),"middle-right":document.createElement("canvas"),"bottom-left":document.createElement("canvas"),"bottom-center":document.createElement("canvas"),"bottom-right":document.createElement("canvas")},r=document.createElement("input");e.setAttribute("tabindex","0"),e.setAttribute("style","max-width: 100vw; max-height: 100vh; overflow: auto; display: grid; position: relative; grid-template-columns: fit-content(0) fit-content(0) fit-content(0); grid-template-rows: fit-content(0) fit-content(0) fit-content(0); outline: none; user-select: none;"),e.classList.add("spread-grid"),t["top-left"].setAttribute("style","position: sticky; left: 0; top: 0; z-index: 2; grid-row: 1; grid-column: 1;"),t["top-center"].setAttribute("style","position: sticky; top: 0; z-index: 1; grid-row: 1; grid-column: 2;"),t["top-right"].setAttribute("style","position: sticky; right: 0; top: 0; z-index: 2; grid-row: 1; grid-column: 3;"),t["middle-left"].setAttribute("style","position: sticky; left: 0; z-index: 1; grid-row: 2; grid-column: 1;"),t["middle-center"].setAttribute("style","grid-row: 2; grid-column: 2; z-index: 0;"),t["middle-right"].setAttribute("style","position: sticky; right: 0; z-index: 1; grid-row: 2; grid-column: 3;"),t["bottom-left"].setAttribute("style","position: sticky; left: 0; bottom: 0; z-index: 2; grid-row: 3; grid-column: 1;"),t["bottom-center"].setAttribute("style","position: sticky; bottom: 0; z-index: 1; grid-row: 3; grid-column: 2;"),t["bottom-right"].setAttribute("style","position: sticky; right: 0; bottom: 0; z-index: 2; grid-row: 3; grid-column: 3;"),r.setAttribute("style","position: sticky; z-index: 3; outline: none; border: none; box-shadow: none; padding: 0 5px; font-size: 12px; font-family: Calibri; background-color: white; box-sizing: border-box; opacity: 0; pointer-events: none;");const s={externalOptions:{},state:null,memory:{},element:e,canvases:t,input:r,renderRequested:!1,mousePosition:null,isMouseDown:!1,columnWidthCache:new Map,rowHeightCache:new Map,requestNewRender:()=>{s.renderRequested||(s.renderRequested=!0,requestAnimationFrame((()=>{s.renderRequested=!1,Me(s),a(s)})))},addEventListener:(e,t,o)=>{e.addEventListener(t,(e=>{try{o(e)}catch(e){e.message=`[${t} event]: ${e.message}`,s.error=e,s.requestNewRender()}}))}};s.localOptions={data:[],columns:[{type:"DATA-BLOCK"}],rows:[{type:"HEADER"},{type:"DATA-BLOCK"}],formatting:[],filtering:[],sorting:[],dataSelector:({data:e,row:t,column:o})=>e[t.id][o.id],pinnedTop:0,pinnedBottom:0,pinnedLeft:0,pinnedRight:0,borderWidth:1,focusedCell:null,onFocusedCellChange:e=>{s.localOptions.focusedCell=e,s.requestNewRender()},selectedCells:[],onSelectedCellsChange:e=>{s.localOptions.selectedCells=e,s.requestNewRender()},highlightedCells:[],editedCells:[],onEditedCellsChange:e=>{s.localOptions.editedCells=e,s.requestNewRender()},filters:[],onFiltersChange:e=>{s.localOptions.filters=e,s.requestNewRender()},sortBy:[],onSortByChange:e=>{s.localOptions.sortBy=e,s.requestNewRender()},onCellClick:()=>{},onCustomCellClick:()=>{},columnWidths:[],onColumnWidthsChange:e=>{s.localOptions.columnWidths=e,s.requestNewRender()},rowHeights:[],onRowHeightsChange:e=>{s.localOptions.rowHeights=e,s.requestNewRender()},onActiveColumnsChange:()=>{},onActiveRowsChange:()=>{}},e["spread-grid-context"]=s;const l=e=>{r.value=e,r.dispatchEvent(new Event("input"))},d=e=>{const t=s.state.options.selectedCells,o=s.state.inputFormatResolver,n=s.state.columnLookup,r=s.state.rowLookup,d=s.state.text,a=s.state.isTextValid,u=s.state.options.onEditedCellsChange,c=s.state.options.onFiltersChange,h=i(t,o,n,r);if(""===d)return;if(!a)return;if(e&&!h.every((e=>e.edit.autoCommit)))return;const f=h.filter((e=>"DATA"===e.type)),p=h.filter((e=>"FILTER"===e.type));var m;m=f.map((e=>({...e.cell,value:e.edit.parse({string:d})}))),u(Fe(s.state.options.editedCells,m)),(e=>{c(Fe(s.state.options.filters,e))})(p.map((e=>({...e.cell,expression:e.edit.parse({string:d})})))),e||l("")},u=e=>{const t=s.state.options.selectedCells,o=s.state.options.onEditedCellsChange,n=s.state.options.onFiltersChange,r=i(t,s.state.inputFormatResolver,s.state.columnLookup,s.state.rowLookup);var l;e&&!r.every((e=>e.edit.autoCommit))||(l=t,o(Se(s.state.options.editedCells,l)),(e=>{n(Se(s.state.options.filters,e))})(t))};s.addEventListener(e,"scroll",(e=>{s.requestNewRender()})),s.addEventListener(e,"mouseenter",(e=>{s.mousePosition=ze(e),s.requestNewRender()})),s.addEventListener(e,"mousemove",(e=>{if(s.mousePosition=ze(e),s.resizingColumn){const e=s.state.columnLookup.get(o(s.resizingColumn)),t=e.width,n=e.right,i=s.mousePosition.x,r=Math.max(10,i-n+t),l=s.state.options.columnWidths.filter((t=>o(t.columnId)!==e.key)).concat([{columnId:e.id,width:r}]);s.state.options.onColumnWidthsChange(l)}if(s.resizingRow){const e=s.state.rowLookup.get(o(s.resizingRow)),t=e.height,n=e.bottom,i=s.mousePosition.y,r=Math.max(10,i-n+t),l=s.state.options.rowHeights.filter((t=>o(t.rowId)!==e.key)).concat([{rowId:e.id,height:r}]);s.state.options.onRowHeightsChange(l)}s.requestNewRender()})),s.addEventListener(e,"mouseleave",(()=>{s.mousePosition=null,s.requestNewRender()})),s.addEventListener(e,"mousedown",(e=>{Me(s),l(""),s.isMouseDown=!0,s.mouseDownPosition=s.mousePosition,s.mouseDownCell=s.state.hoveredCell,s.state.resizableColumn&&(s.resizingColumn=s.state.resizableColumn),s.state.resizableRow&&(s.resizingRow=s.state.resizableRow),s.state.resizableColumn||s.state.resizableRow||s.state.options.onFocusedCellChange(s.state.hoveredCell),e.ctrlKey||s.state.options.onSelectedCellsChange([]),s.requestNewRender()})),s.addEventListener(e,"mouseup",(e=>{Me(s),s.isMouseDown=!1,s.resizingColumn=null,s.resizingRow=null,s.state.options.onSelectedCellsChange(Fe(s.state.options.selectedCells,s.state.highlightedCells)),s.requestNewRender()})),s.addEventListener(e,"pointerdown",(e=>{s.element.setPointerCapture(e.pointerId)})),s.addEventListener(e,"pointerup",(e=>{s.element.releasePointerCapture(e.pointerId)})),s.addEventListener(e,"click",(e=>{Me(s);const t=s.state.hoveredCell,i=s.mouseDownCell;if(s.state.resizableColumn||s.state.resizableRow)return;if(null===t)return;if(o(t.columnId)!==o(i.columnId))return;if(o(t.rowId)!==o(i.rowId))return;const r=s.state.columnLookup.get(o(t.columnId)),l=s.state.rowLookup.get(o(t.rowId)),d=s.state.options.sortBy,a=s.state.inputFormatResolver.resolve(l,r);if(a.edit?.toggle){const e=function(e,t,o,n){const i=n.hasValueByKey(o.key,t.key)?n.getValueByKey(o.key,t.key):e.value,r=e.edit.toggle;return"function"==typeof r?r({value:i}):r[(r.indexOf(i)+1)%r.length]}(a,r,l,s.state.edition),o=n(r,l);"DATA"===o&&s.state.options.onEditedCellsChange(Fe(s.state.options.editedCells,[{...t,value:e}])),"FILTER"===o&&s.state.options.onFiltersChange(Fe(s.state.options.filters,[{...t,expression:e}]))}else if("DATA"===r.type&&"DATA"===l.type)s.state.options.onCellClick(s.state.hoveredCell);else if("CUSTOM"===r.type||"CUSTOM"===l.type)s.state.options.onCustomCellClick(s.state.hoveredCell);else if("HEADER"===r.type||"HEADER"===l.type){const t=function(e,t,n,i){function r(e){return t.key===o(e.columnId||"HEADER")&&n.key===o(e.rowId||"HEADER")}const s=["ASC","DESC",void 0],l=e.find(r),d=s.indexOf(l?.direction),a=s[(d+1)%s.length],u=e.indexOf(l)===e.length-1;return[...!i||!u&&l?[]:e.filter((e=>!r(e))),...a?[{columnId:t.id,rowId:n.id,direction:a}]:[]]}(d,r,l,e.ctrlKey);s.state.options.onSortByChange(t),s.state.options.onSelectedCellsChange([])}})),s.addEventListener(e,"dblclick",(e=>{if(Me(s),s.state.resizableColumn){const e=o(s.state.resizableColumn),t=s.state.options.columnWidths.filter((t=>o(t.columnId)!==e));s.state.options.onColumnWidthsChange(t),s.columnWidthCache.delete(e)}if(s.state.resizableRow){const e=o(s.state.resizableRow),t=s.state.options.rowHeights.filter((t=>o(t.rowId)!==e));s.state.options.onRowHeightsChange(t),s.rowHeightCache.delete(e)}const t=s.state.focusedCell;if(null===t)return;const n=o(t.columnId),i=o(t.rowId),d=s.state.columnLookup,a=s.state.rowLookup,u=s.state.inputFormatResolver;if(!d.has(n))return;if(!a.has(i))return;const c=d.get(n),h=a.get(i),f=u.resolve(h,c),p=f.text;f.edit&&(f.edit.toggle||(l(p),r?.select()))})),s.addEventListener(e,"focus",(()=>{r.parentElement&&r.focus({preventScroll:!0})})),s.addEventListener(e,"keydown",(e=>{Me(s);const t=s.state.focusedCell,n=s.state.columnLookup,i=s.state.rowLookup,r=s.state.options.selectedCells,a=s.state.options.onSelectedCellsChange,c=s.state.options.onFocusedCellChange,h=s.state.options.editedCells,f=s.state.options.onEditedCellsChange,p=s.state.columns,m=s.state.rows,g=s.state.text,y=s.state.inputFormatResolver,x=(e,t)=>{c(e),t.shiftKey?a(Fe(r,[e])):a([e])},b=(e,i)=>{if(!t)return;const r=o(t.columnId);if(!n.has(r))return;const s=n.get(r).index,l=Math.max(0,Math.min(p.length-1,s+e));if(l===s)return;const d={rowId:t.rowId,columnId:p[l].id};x(d,i)},v=(e,n)=>{if(!t)return;const r=o(t.rowId);if(!i.has(r))return;const s=i.get(r).index,l=Math.max(0,Math.min(m.length-1,s+e));if(l===s)return;const d={rowId:m[l].id,columnId:t.columnId};x(d,n)},R=()=>{e.preventDefault(),e.stopPropagation()};switch(e.key){case"Escape":""!==g?l(""):r.length>1?a([t]):h.length>0?f([]):(c(null),a([]));break;case"Enter":d();break;case"ArrowUp":R(),v(e.ctrlKey?-m.length:-1,e);break;case"ArrowDown":R(),v(e.ctrlKey?m.length:1,e);break;case"ArrowLeft":R(),b(e.ctrlKey?-p.length:-1,e);break;case"ArrowRight":R(),b(e.ctrlKey?p.length:1,e);break;case"Delete":case"Backspace":u();break;case"c":(e=>{if(!e.ctrlKey)return;const t=function(e,t,n,i){const r=new Map(t.map((e=>[e.key,e]))),s=new Map(n.map((e=>[e.key,e]))),l=e.map((e=>({columnKey:o(e.columnId),rowKey:o(e.rowId)}))).filter((e=>r.has(e.columnKey)&&s.has(e.rowKey))),d=new Set(l.map((e=>e.columnKey))),a=new Set(l.map((e=>e.rowKey)));if(0===l.length)return"";const u=new w(e),c=Math.min(...l.map((e=>r.get(e.columnKey).index))),h=Math.max(...l.map((e=>r.get(e.columnKey).index))),f=Math.min(...l.map((e=>s.get(e.rowKey).index))),p=Math.max(...l.map((e=>s.get(e.rowKey).index))),m=[];for(let e=f;e<=p;e++){const o=n[e],r=o.key;if(a.has(r)){for(let e=c;e<=h;e++){const n=t[e],s=n.key;if(d.has(s)){if(u.isKeySelected(r,s)){const e=i.resolve(o,n).text;m.push(e)}e<h&&m.push("\t")}}e<p&&m.push("\n")}}return m.join("")}(r,p,m,y);if(navigator.clipboard)navigator.clipboard.writeText(t);else{const e=document.createElement("textarea");e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)}})(e)}})),new ResizeObserver((()=>{s.requestNewRender()})).observe(e),s.addEventListener(r,"input",(e=>{Me(s),e.target.value?(d(!0),r.style.opacity=1,r.style.pointerEvents="auto"):(e.isTrusted&&u(!0),r.style.opacity=0,r.style.pointerEvents="none")})),s.addEventListener(r,"click",(e=>{e.stopPropagation()})),s.addEventListener(r,"dblclick",(e=>{e.stopPropagation()})),s.addEventListener(r,"mousedown",(e=>{e.stopPropagation()})),s.addEventListener(r,"keydown",(e=>{switch(e.key){case"Enter":case"Escape":break;case"Delete":case"Backspace":case"ArrowUp":case"ArrowDown":case"ArrowLeft":case"ArrowRight":""!==r.value&&(e.stopPropagation(),s.requestNewRender());break;default:e.stopPropagation(),s.requestNewRender()}}))}function Ke(e,t){console.log("createGrid"),Ne(e);const o=e["spread-grid-context"];o.externalOptions=t,null===o.state?(Me(o),a(o)):o.requestNewRender()}return t.default})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SpreadGrid=t():e.SpreadGrid=t()}(self,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function o(e){return null===e?"null":Array.isArray(e)?`[${e.map(o).join(",")}]`:"object"==typeof e?(t=e,`{${Object.keys(t).sort().map((e=>`${e}:${o(t[e])}`)).join(",")}}`):JSON.stringify(e);var t}function n(e,t){return"FILTER"===e.type^"FILTER"===t.type?"FILTER":"DATA"===e.type&&"DATA"===t.type?"DATA":"OTHER"}function i(e,t,i,r){return e.map((e=>{const s=o(e.columnId),l=o(e.rowId);if(!i.has(s))return null;if(!r.has(l))return null;const d=i.get(s),a=r.get(l);return{edit:t.resolve(a,d).edit,cell:e,type:n(d,a)}})).filter((e=>e?.edit))}e.d(t,{default:()=>Oe});const r="12px Calibri",s={top:2,right:5,bottom:2,left:5};function l(e,t){return Math.round(e*t)/t}function d(e,t,o){const n=e.state,i=e.canvases[`${t}-${o}`],s=n.sections[t],d=n.sections[o],a=d.columns,u=s.rows;if(0===u.length||0===a.length)return void(i.parentElement&&i.parentElement.removeChild(i));i.parentElement||e.element.appendChild(i),console.log("draw");const c=i.getContext("2d",{alpha:!1}),h=n.scrollRect,f=n.textResolver,p=n.renderFormatResolver,m=n.borderWidth,g=s.showTopBorder,y=s.showBottomBorder,w=d.showLeftBorder,x=d.showRightBorder,b=m/2,v=u.length-1+(g?1:0)+(y?1:0),R=a.length-1+(w?1:0)+(x?1:0),A=u.map((e=>e.height)),k=a.map((e=>e.width)),E=k.reduce(((e,t)=>e+t),0)+R*m,C=A.reduce(((e,t)=>e+t),0)+v*m,I="center"===o?h.left:0,T="middle"===t?h.top:0,L="center"===o?h.width:d.width,B="middle"===t?h.height:s.height,D=k.reduce(((e,t,o)=>{const n=e[o]+t+m;return e.push(n),e}),[w?m:0]),M=A.reduce(((e,t,o)=>{const n=e[o]+t+m;return e.push(n),e}),[g?m:0]),F=D.slice(0,-1),S=M.slice(0,-1),z=Math.max(F.findLastIndex((e=>e<=I)),0),N=F.findLastIndex((e=>e<=I+L)),K=Math.max(S.findLastIndex((e=>e<=T)),0),O=S.findLastIndex((e=>e<=T+B)),H=Math.max(z,w?0:1),P=N+(x?1:0),W=Math.max(K,g?0:1),$=O+(y?1:0),q=Array.from({length:O-K+1},((e,t)=>{const o=u[t+K];return Array.from({length:N-z+1},((e,t)=>{const n=a[t+z];return p.resolve(o,n)}))})),V=(e,t)=>q[e-K][t-z];i.width=Math.round(L*devicePixelRatio),i.height=Math.round(B*devicePixelRatio),i.style.width=`${L}px`,i.style.height=`${B}px`,i.style.marginLeft=`${I}px`,i.style.marginTop=`${T}px`,i.style.marginRight=E-L-I+"px",i.style.marginBottom=C-B-T+"px",c.fillStyle="#E9E9E9",c.fillRect(0,0,i.width,i.height);const Y=(e,t)=>{c.setTransform(devicePixelRatio,0,0,devicePixelRatio,(e-I)*devicePixelRatio,(t-T)*devicePixelRatio)},G=(e,t,o,n)=>{c.beginPath(),c.rect(e,t,o,n),c.clip()};for(let e=z;e<=N;e++){c.save(),Y(D[e],0),G(0,0,k[e],C);for(let t=K;t<=O;t++){const o=V(t,e),n=o.style,i=M[t],s=D[e],d=k[e],a=A[t],u=o.text,h=n.textAlign||"left",p=n.textBaseline||"middle",g=o.padding;Y(s,i),c.fillStyle=n.background||"white",c.fillRect(0,0,d,a),"draw"in o&&o.draw(c),n.highlight&&(c.fillStyle=n.highlight,c.fillRect(0,0,d,a)),n.corner&&(c.fillStyle=n.corner,c.beginPath(),c.moveTo(d-7,a),c.lineTo(d,a),c.lineTo(d,a-7),c.fill()),c.fillStyle=n.foreground||"black",c.font=n.font||r,c.textAlign=h;const y=f.getFontMetrics(n.font),w=l("left"===h?g.left:"center"===h?d/2:"right"===h?d-g.right:0,devicePixelRatio),x=l("top"===p?y.middle+y.topOffset+g.top:"middle"===p?a/2+y.middle:"bottom"===p?a+y.middle-y.bottomOffset-g.bottom:0,devicePixelRatio);x-y.middle-y.topOffset>=0&&x-y.middle+y.bottomOffset<=a?c.fillText(u,w,x):(c.strokeStyle="#E9E9E9",c.lineWidth=m,c.beginPath(),c.moveTo(0,m+b),c.lineTo(d,m+b),c.moveTo(0,a-m-b),c.lineTo(d,a-m-b),c.stroke(),c.save(),G(0,2*m,d,a-4*m),c.fillText(u,w,x),c.restore())}c.restore()}Y(0,0);const j=(e,t,o,n,i)=>{if(!i)return;if(0===i.width)return;const r=i.width*m,s=t===n,l=e-(s?r/2:0),d=t-(s?0:r/2),a=o+(s?r/2:0),u=n+(s?0:r/2);c.strokeStyle=i.color||"black",c.lineWidth=r,i.dash?(c.setLineDash(i.dash.map((e=>e/devicePixelRatio))),c.lineDashOffset=s?l:d):c.setLineDash([]),c.beginPath(),c.moveTo(l,d),c.lineTo(a,u),c.stroke()},U=(e,t)=>e?t?e.index>t.index?e:t:e:t;for(let e=W;e<=$;e++){const t=e-1,o=e;for(let e=z;e<=N;e++){const n=U(t>=K?V(t,e).style.borderBottom:null,o<=O?V(o,e).style.borderTop:null);j(D[e]-b,M[o]-b,D[e+1]-b,M[o]-b,n)}}for(let e=H;e<=P;e++){const t=e-1,o=e;for(let e=K;e<=O;e++){const n=U(t>=z?V(e,t).style.borderRight:null,o<=N?V(e,o).style.borderLeft:null);j(D[o]-b,M[e]-b,D[o]-b,M[e+1]-b,n)}}}function a(e){if(!e.error)try{!function(e){d(e,"top","left"),d(e,"top","center"),d(e,"top","right"),d(e,"middle","left"),d(e,"middle","center"),d(e,"middle","right"),d(e,"bottom","left"),d(e,"bottom","center"),d(e,"bottom","right"),function(e){const t=e.element,o=e.input,n=e.state,i=n.inputPlacement;if(!i){if(o.parentElement){const e=document.activeElement===o;o.parentElement.removeChild(o),e&&t.focus({preventScroll:!0})}return}const r=e.canvases[i.section];if(o.style.left="left"in i?`${i.left}px`:"0",o.style.top="top"in i?`${i.top}px`:"0",o.style.right="right"in i?`${i.right}px`:"0",o.style.bottom="bottom"in i?`${i.bottom}px`:"0",o.style.marginLeft="marginLeft"in i?`${i.marginLeft}px`:"0",o.style.marginTop="marginTop"in i?`${i.marginTop}px`:"0",o.style.width=`${i.width}px`,o.style.height=`${i.height}px`,o.style.gridArea=r.style.gridArea,o.style.zIndex=r.style.zIndex,o.style.backgroundColor=n.isTextValid?"white":"#eb3434",!o.parentElement){const e=document.activeElement===t;t.appendChild(o),e&&o.focus({preventScroll:!0})}}(e),function(e){const t=e.element,o=e.state;o.resizableColumn&&o.resizableRow?t.style.cursor="nwse-resize":o.resizableColumn?t.style.cursor="col-resize":o.resizableRow?t.style.cursor="row-resize":t.style.cursor="default"}(e)}(e)}catch(t){e.error=t}e.error&&function(e){if(e.errorRendered)return;e.errorRendered=!0;const t=e.element,o=e.error;t.style.backgroundColor="#9f0000",t.style.color="white",t.style.padding="20px",t.style.display="flex",t.style.flexDirection="column",t.style.userSelect="text",t.innerHTML=`\n        <div style="font-size: 16px;">\n            An error occurred while rendering the grid, please contact the support.\n        </div>\n        <div style="font-size: 20px; font-weight: bold; padding: 20px 0;">\n            ${o.message}\n        </div>\n        <div style="font-size: 16px; white-space: pre-wrap;">${o.stack}</div>\n    `}(e)}function u(e,t,o){return[{column:{type:"DATA"},row:{type:"HEADER"},value:({column:e})=>void 0===e.header?e.id:e.header},{column:{type:"HEADER"},row:{type:"DATA"},value:({row:e})=>void 0===e.header?e.id:e.header},{column:{type:"HEADER"},row:{type:"SPECIAL"},value:""},{column:{type:"SPECIAL"},row:{type:"HEADER"},value:""},...o.map((({columnId:e,rowId:t,direction:n},i)=>({column:{id:e},row:{id:t},text:({value:e})=>`${o.length>1?i+1:""}${"ASC"===n?"⇣":"⇡"} ${e}`}))),{column:{type:"ANY"},row:{type:"FILTER"},value:({newValue:e})=>e||"",text:({newValue:e})=>e||"Search...",edit:{validate:()=>!0,parse:({string:e})=>e,autoCommit:!0}},{column:{type:"DATA"},row:{type:"DATA"},value:t},...e]}function c(e){return e}function h(e,t){return t?e+"99":e+"33"}function f(e,t,n,i,r,s,l,d,a){const u=n?o(n.columnId):null,c=n?o(n.rowId):null,f=null!==d,p=null!==l||f,m=a+2,g=a+4,y=(e,t,o,n)=>{if(o<0||o>=e.length)return!1;if(n<0||n>=t.length)return!1;const r=e[o].key,s=t[n].key;return i.isKeySelected(r,s)},w=(e,t)=>e?[t]:[];return[{column:{type:"ANY"},row:{type:"FILTER"},style:({newValue:e})=>({background:"#FBFBFB",foreground:e?"black":"#cccccc",border:{width:1,color:"gray"}})},{column:{type:"ANY"},row:{type:"HEADER"},style:{background:"#F5F5F5",border:{width:a,color:"gray"}}},{column:{type:"HEADER"},row:{type:"ANY"},style:{background:"#F5F5F5",border:{width:a,color:"gray"}}},{column:{type:"HEADER"},row:{type:"HEADER"},style:{background:"#E0E0E0"}},...e,...w(t&&!f,{column:{type:"ANY"},row:{id:t?.rowId},style:{highlight:"#81948133"}}),...w(t&&!p,{column:{id:t?.columnId},row:{id:t?.rowId},style:{highlight:"#81948188"}}),{column:{type:"ANY"},row:{type:"ANY"},condition:({rows:e,columns:t,row:o,column:n})=>y(e,t,o.index,n.index),style:({rows:e,columns:t,row:o,column:n,edit:i})=>({...y(e,t,o.index-1,n.index)?{}:{borderTop:{width:m,color:"#596959",index:Number.MAX_SAFE_INTEGER}},...y(e,t,o.index+1,n.index)?{}:{borderBottom:{width:m,color:"#596959",index:Number.MAX_SAFE_INTEGER}},...y(e,t,o.index,n.index-1)?{}:{borderLeft:{width:m,color:"#596959",index:Number.MAX_SAFE_INTEGER}},...y(e,t,o.index,n.index+1)?{}:{borderRight:{width:m,color:"#596959",index:Number.MAX_SAFE_INTEGER}},highlight:h(i?"#798d9c":"#819481",u!==n.key||c!==o.key)})},{column:{type:"ANY"},row:{type:"ANY"},condition:({row:e,column:t})=>r.isKeySelected(e.key,t.key),style:({row:e,column:t})=>({highlight:h("#93a8b8",u!==t.key||c!==e.key)})},...w(n,{column:{id:n?.columnId},row:{id:n?.rowId},style:{highlight:"#ffffffaa"}}),{column:{type:"ANY"},row:{type:"ANY"},condition:({edit:e})=>e,style:{corner:"#77777720"}},{column:{type:"ANY"},row:{type:"ANY"},condition:({row:e,column:t})=>s.hasValueByKey(e.key,t.key),style:{corner:"darkgreen"}},...w(l,{column:{id:l},row:{type:"HEADER"},style:{borderRight:{width:g,color:"cornflowerblue"}}}),...w(d,{column:{type:"HEADER"},row:{id:d},style:{borderBottom:{width:g,color:"cornflowerblue"}}})]}function p(e,t){const o=t.filter((e=>"BEGIN"===e.pinned)).length,n=t.filter((e=>"END"===e.pinned)).length,i=t.length-o-n,r=e.filter((e=>"BEGIN"===e.pinned)).length,s=e.filter((e=>"END"===e.pinned)).length,l=e.length-r-s,d=t.slice(0,o),a=t.slice(t.length-n,t.length),u=t.slice(o,t.length-n),c=e.slice(0,r),h=e.slice(e.length-s,e.length),f=e.slice(r,e.length-s),p=o>0,m=r>0,g=!0,y=!0,w=i>0||!p,x=!0,b=!p,v=!(n>0),R=!0,A=!0,k=l>0||!m,E=!0,C=!m,I=!(s>0),T=(e,t,o)=>{if(0===e.length)return 0;const n=t?e.at(0).topWithBorder:e.at(0).top;return(o?e.at(-1).bottomWithBorder:e.at(-1).bottom)-n},L=(e,t,o)=>{if(0===e.length)return 0;const n=t?e.at(0).leftWithBorder:e.at(0).left;return(o?e.at(-1).rightWithBorder:e.at(-1).right)-n};return{top:{rows:d,showTopBorder:g,showBottomBorder:y,height:T(d,g,y)},bottom:{rows:a,showTopBorder:w,showBottomBorder:x,height:T(a,w,x)},middle:{rows:u,showTopBorder:b,showBottomBorder:v,height:T(u,b,v)},left:{columns:c,showLeftBorder:R,showRightBorder:A,width:L(c,R,A)},right:{columns:h,showLeftBorder:k,showRightBorder:E,width:L(h,k,E)},center:{columns:f,showLeftBorder:C,showRightBorder:I,width:L(f,C,I)}}}function m(e,t){return[...e,...t.map((e=>({columnId:e.columnId,rowId:e.rowId,value:e.expression})))]}class g{constructor(e){this.lookup=new Map,e.forEach((e=>{const t=o(e.rowId),n=o(e.columnId);this.lookup.has(t)||this.lookup.set(t,new Map),this.lookup.get(t).set(n,e.value)}))}hasValueByKey(e,t){return this.lookup.has(e)&&this.lookup.get(e).has(t)}getValueByKey(e,t){if(this.hasValueByKey(e,t))return this.lookup.get(e).get(t)}hasValueById(e,t){return this.hasValueByKey(o(e),o(t))}getValueById(e,t){return this.getValueByKey(o(e),o(t))}}function y(e){return new g(e)}class w{constructor(e){this.lookup=new Map,e.forEach((e=>{const t=o(e.rowId),n=o(e.columnId);this.lookup.has(t)||this.lookup.set(t,new Set),this.lookup.get(t).add(n)}))}isKeySelected(e,t){return this.lookup.has(e)&&this.lookup.get(e).has(t)}isIdSelected(e,t){return this.isKeySelected(o(e),o(t))}}function x(e){return new w(e)}function b(e,t){return"function"==typeof e?e(t):e}function v(e,t,o,n){return e<o?"BEGIN":e>=t-n?"END":void 0}function R(e,t,n){return e.map(((i,r)=>{const s="id"in i?i.id:i.type;return{...i,id:s,type:i.type||"DATA",index:r,key:o(s),pinned:v(r,e.length,t,n),header:"header"in i?i.header:s,labels:i.labels||[]}}))}function A(e,t,n,i){const r=new Map(i.map((({columnId:e,width:t})=>[o(e),t])));return R(e,t,n).map((e=>({...e,width:r.has(e.key)?r.get(e.key):e.width})))}function k(e,t,n,i){const r=new Map(i.map((({rowId:e,height:t})=>[o(e),t])));return R(e,t,n).map((e=>({...e,height:r.has(e.key)?r.get(e.key):e.height})))}function E(e,t,o){let n=o;return e.map(((e,i)=>{const r=l("width"in e?e.width:100,t),s={...e,index:i,width:r,leftWithBorder:n-o,left:n,right:n+r,rightWithBorder:n+r+o};return n+=s.width+o,s}))}function C(e,t,o){let n=o;return e.map(((e,i)=>{const r=l("height"in e?e.height:20,t),s={...e,index:i,height:r,topWithBorder:n-o,top:n,bottom:n+r,bottomWithBorder:n+r+o};return n+=s.height+o,s}))}const I={HEADER:["HEADER"],FILTER:["FILTER"],DATA:["DATA"],CUSTOM:["CUSTOM"],ANY:["HEADER","DATA","FILTER","CUSTOM"],SPECIAL:["HEADER","FILTER","CUSTOM"],undefined:[]};class T{byKey=new Map;byIndex=new Map;byLabel=new Map;byType=new Map}class L{lookup=new T;hasRules=!1;addRule(e,t,n){if(this.hasRules=!0,Array.isArray(e))for(const o of e)this.addRule(o,t,n);else if(Array.isArray(t))for(const o of t)this.addRule(e,o,n);else{e=e?"id"in e?{key:o(e.id)}:e:{type:"DATA"},t=t?"id"in t?{key:o(t.id)}:t:{type:"DATA"},"key"in e&&r(this.lookup.byKey,e.key),"index"in e&&r(this.lookup.byIndex,e.index),"label"in e&&r(this.lookup.byLabel,e.label);for(const t of I[e.type])r(this.lookup.byType,t)}function i(e,t){e.has(t)||e.set(t,[]),e.get(t).push(n)}function r(e,o){e.has(o)||e.set(o,new T),"key"in t&&i(e.get(o).byKey,t.key),"index"in t&&i(e.get(o).byIndex,t.index),"label"in t&&i(e.get(o).byLabel,t.label);for(const n of I[t.type])i(e.get(o).byType,n)}}getRules(e,t){const o=[];if(!this.hasRules)return o;function n(e){for(const t of e)o.push(t)}function i(e){e.byKey.has(t.key)&&n(e.byKey.get(t.key)),e.byIndex.has(t.index)&&n(e.byIndex.get(t.index)),e.byType.has(t.type)&&n(e.byType.get(t.type));for(const o of t.labels)e.byLabel.has(o)&&n(e.byLabel.get(o))}this.lookup.byKey.has(e.key)&&i(this.lookup.byKey.get(e.key)),this.lookup.byIndex.has(e.index)&&i(this.lookup.byIndex.get(e.index)),this.lookup.byType.has(e.type)&&i(this.lookup.byType.get(e.type));for(const t of e.labels)this.lookup.byLabel.has(t)&&i(this.lookup.byLabel.get(t));return o}}const B=["borderTop","borderRight","borderBottom","borderLeft"],D={validate:()=>!0,parse:e=>e};function M(e,t){const o={...e};if("border"in o){for(const e of B)o[e]=o.border;delete o.border}for(const e of B)e in o&&(o[e]={...o[e],index:t});return o}class F{constructor(e){this.rulesLookup=new L;for(const[t,o]of e.entries()){const e={index:t};"condition"in o&&(e.condition=o.condition),"style"in o&&(e.style="function"==typeof o.style?o.style:()=>o.style),"value"in o&&(e.value="function"==typeof o.value?o.value:()=>o.value),"text"in o&&(e.text="function"==typeof o.text?o.text:()=>o.text),"padding"in o&&(e.padding="function"==typeof o.padding?o.padding:()=>o.padding),"edit"in o&&(e.edit=o.edit),"draw"in o&&(e.draw=o.draw),this.rulesLookup.addRule(o.column,o.row,e)}}resolve(e,t,o,n,i,r){const l=this.rulesLookup.getRules(i,n).sort(((e,t)=>e.index-t.index)).filter(((e,t,o)=>e.index!==o[t-1]?.index));let d,a={data:e,rows:t,columns:o,row:n,column:i},u={},c=s;r.hasValueByKey(n.key,i.key)&&(a={...a,newValue:r.getValueByKey(n.key,i.key)});for(const e of l)if((!("condition"in e)||e.condition(a))&&("value"in e&&(a={...a,value:e.value(a)}),"style"in e&&(u={...u,...M(e.style(a),e.index)}),"text"in e&&(a={...a,text:e.text(a)}),"padding"in e&&(c={...c,...e.padding(a)}),"edit"in e&&(a={...a,edit:e.edit&&"edit"in a?{...a.edit,...e.edit}:{...D,...e.edit}}),"draw"in e)){const t=a;d=o=>e.draw({...t,ctx:o})}const h=function(e){return"text"in e?e.text:void 0!==e.value?`${e.value}`:""}(a),f={style:u,visible:!0,text:h,padding:c};return"value"in a&&(f.value=a.value),"edit"in a&&(f.edit=a.edit),void 0!==d&&(f.draw=d),"text"in a&&(f.text=a.text),f}}function S(e){return new F(e)}class z{constructor(e,t,o,n,i){this.formattingRules=e,this.data=t,this.rows=o,this.columns=n,this.edition=i}resolve(e,t){return this.formattingRules.resolve(this.data,this.rows,this.columns,e,t,this.edition)}}function N(e,t,o,n,i){return new z(e,t,o,n,i)}function K(e,t,n){const i=new Map;for(const r of e){const e=o(r[t]),s=o(r[n]);i.has(e)||i.set(e,new Map),i.get(e).set(s,r.expression)}return i}function O(e,t,o,n,i,r,s){if(0===e.length)return i;const l=K(e,"columnId","rowId"),d=r.filter((e=>"FILTER"!==e.type&&l.has(e.key)));return 0===d.length?i:i.filter((e=>{for(const a of d){const d=o.resolve(n,i,r,e,a,s),u=l.get(a.key);if(!t.resolve(n,i,r,e,a,d.value,d.text,u))return!1}return!0}))}function H(e,t,o,n,i,r,s){if(0===e.length)return r;const l=K(e,"rowId","columnId"),d=i.filter((e=>"FILTER"!==e.type&&l.has(e.key)));return 0===d.length?r:r.filter((e=>{for(const a of d){const d=o.resolve(n,i,r,a,e,s),u=l.get(a.key);if(!t.resolve(n,i,r,a,e,d.value,d.text,u))return!1}return!0}))}function P(e,t,o,n){return{top:e,bottom:t,left:o,right:n}}function W(e,t){return{width:e.length?e.at(-1).rightWithBorder:0,height:t.length?t.at(-1).bottomWithBorder:0}}class ${constructor(){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.fontMetrics=new Map}measureWidth(e,t){const o=this.context;return o.font=t||r,o.measureText(e).width}measureHeight(e,t){let o=1;for(const t of e)"\n"===t&&o++;return o*this.getFontMetrics(t).height}getFontMetrics(e){const t=e;if(this.fontMetrics.has(t))return this.fontMetrics.get(t);const o=this.context;o.font=e||r;const n=o.measureText("X"),i=(n.actualBoundingBoxDescent-n.actualBoundingBoxAscent)/2,s={topOffset:i+n.fontBoundingBoxAscent,middle:-i,bottomOffset:n.fontBoundingBoxDescent-i,height:n.fontBoundingBoxAscent+n.fontBoundingBoxDescent};return this.fontMetrics.set(t,s),s}}function q(){return new $}function V(e,t){return t.top>=e.top&&t.left>=e.left&&t.top+t.height<=e.top+e.height&&t.left+t.width<=e.left+e.width}function Y(e,t){const o={top:Math.max(e.top,t.top),left:Math.max(e.left,t.left),width:Math.min(e.left+e.width,t.left+t.width)-Math.max(e.left,t.left),height:Math.min(e.top+e.height,t.top+t.height)-Math.max(e.top,t.top)};return o.width>=0&&o.height>=0?o:{top:e.top,left:e.left,width:0,height:0}}function G(e,t){return{top:e.top-t,left:e.left-t,width:e.width+2*t,height:e.height+2*t}}function j(e){return e.width*e.height}function U(e,t){return{top:e.top,left:e.left,width:Math.max(0,e.width-t.left-t.right),height:Math.max(0,e.height-t.top-t.bottom)}}const _=200,X=400,J={left:0,top:0,width:0,height:0};function Q(e,t,o,n){const i=t.x,r=t.y,s=e.scrollLeft,l=e.scrollTop,d=e.clientWidth,a=e.clientHeight;return{x:i<=o.left?i:i>=d?i+s:i>=d-o.right?n.width-d+i:i+s,y:r<=o.top?r:r>=a?r+l:r>=a-o.bottom?n.height-a+r:r+l}}function Z(e){return e.reduce(((e,t)=>e.set(t.key,t)),new Map)}function ee(e,t,n,i,r,s,l,d){if(!e)return[];if(t)return[];if(!i)return[];if(!n)return[];const a=o(n.columnId),u=o(n.rowId),c=o(i.columnId),h=o(i.rowId);if(!l.has(a))return[];if(!d.has(u))return[];if(!l.has(c))return[];if(!d.has(h))return[];const f=Math.min(l.get(a).index,l.get(c).index),p=Math.max(l.get(a).index,l.get(c).index),m=Math.min(d.get(u).index,d.get(h).index),g=Math.max(d.get(u).index,d.get(h).index);return r.slice(f,p+1).flatMap((e=>s.slice(m,g+1).map((t=>({rowId:t.id,columnId:e.id})))))}function te(e,t){const o=function(e){return"BEGIN"===e.pinned?"top":"END"===e.pinned?"bottom":"middle"}(t),n=function(e){return"BEGIN"===e.pinned?"left":"END"===e.pinned?"right":"center"}(e);return`${o}-${n}`}function oe(e,t,n,i,r){if(!t)return null;const s=o(t.columnId),l=o(t.rowId);if(!n.has(s))return null;if(!i.has(l))return null;const d=n.get(s),a=i.get(l);if(0===e.length)return null;const u={width:d.width,height:a.height,section:te(d,a)};switch(a.pinned){case"BEGIN":u.top=a.top;break;case"END":u.bottom=r.top.height+r.middle.height+r.bottom.height-a.top-a.height;break;default:u.marginTop=a.top-r.top.height}switch(d.pinned){case"BEGIN":u.left=d.left;break;case"END":u.right=r.left.width+r.center.width+r.right.width-d.left-d.width;break;default:u.marginLeft=d.left-r.left.width}return u}function ne(e,t){return t.every((t=>t.edit.validate({string:e})))}function ie(e){return Array.isArray(e)?e.map(((e,t)=>t)):Object.keys(e)}function re(e){return ie(e)}function se(e){const t=new Set;if(Array.isArray(e))for(const o of e)for(const e of ie(o))t.add(e);else for(const o in e)for(const n of ie(e[o]))t.add(n);return[...t]}function le(e,t){if(!e.some((e=>"DATA-BLOCK"===e.type)))return e;const o=[];for(const n of e)if("DATA-BLOCK"===n.type){const e="selector"in n?n.selector(t):se(t);for(const t of e)o.push({...n,id:t,type:"DATA"})}else o.push(n);return o}function de(e,t){if(!e.some((e=>"DATA-BLOCK"===e.type)))return e;const o=[];for(const n of e)if("DATA-BLOCK"===n.type){const e="selector"in n?n.selector(t):re(t);for(const t of e)o.push({...n,id:t,type:"DATA"})}else o.push(n);return o}const ae=({text:e,expression:t})=>e.includes(t);class ue{constructor(e){this.rulesLookup=new L;for(const t of e){const e={by:o("by"in t?t.by:"FILTER"),condition:t.condition||ae};this.rulesLookup.addRule(t.column,t.row,e)}}resolve(e,t,o,n,i,r,s,l){const d=this.rulesLookup.getRules(i,n);if(0===d.length)return"DATA"!==n.type||"DATA"!==i.type||!l.has('"FILTER"')||ae({text:s,expression:l.get('"FILTER"')});let a={data:e,rows:t,columns:o,row:n,column:i,value:r,text:s};for(const e of d){if(!l.has(e.by))continue;const t={...a,expression:l.get(e.by)};if(!e.condition(t))return!1}return!0}}function ce(e){return new ue(e)}function he(e){return e}function fe(e){return e}function pe(e,t,o,n,i,r){if(e.every((e=>"number"==typeof e.width)))return e;const s=e=>{const r="width"in e?e.width:"fit-once";if("number"==typeof r)return r;if(i.has(e.key)){const t=i.get(e.key);if("fit-once"===r&&!t.dataOnly)return t.width;if("fit-data-once"===r&&t.dataOnly)return t.width}let s=0;for(const i of t){if("DATA"!==i.type&&"fit-data-once"===r)continue;if("DATA"!==i.type&&"fit-data"===r)continue;const t=n.resolve(i,e),l=t.text,d=t.font,a=t.padding.left+t.padding.right,u=o.measureWidth(l,d)+a;s=Math.max(s,u)}return i.set(e.key,{width:s,dataOnly:"fit-data-once"===r}),s};for(const e of i.keys())r.has(e)||i.delete(e);return e.map((e=>({...e,width:s(e)})))}function me(e,t,o,n,i,r){if(t.every((e=>"number"==typeof e.height)))return t;const s=t=>{const r="height"in t?t.height:"fit-once";if("number"==typeof r)return r;if(i.has(t.key)){const e=i.get(t.key);if("fit-once"===r&&!e.dataOnly)return e.height;if("fit-data-once"===r&&e.dataOnly)return e.height}let s=0;for(const i of e){if("DATA"!==i.type&&"fit-data-once"===r)continue;if("DATA"!==i.type&&"fit-data"===r)continue;const e=n.resolve(t,i),l=e.text,d=e.font,a=e.padding.top+e.padding.bottom,u=o.measureHeight(l,d)+a;s=Math.max(s,u)}return i.set(t.key,{height:s,dataOnly:"fit-data-once"===r}),s};for(const e of i.keys())r.has(e)||i.delete(e);return t.map((e=>({...e,height:s(e)})))}function ge(e){return new Set(e.map((e=>e.key)))}function ye(e){return e}function we(e,t){return null!=e.value&&(null==t.value||e.value<t.value)}function xe(e,t){return null!=e.value&&(null==t.value||e.value>t.value)}class be{constructor(e){this.rulesLookup=new L;for(const t of e){const e={by:stringifyId("by"in t?t.by:"HEADER"),comparatorAsc:t.comparator||we,comparatorDesc:(e,o)=>-t.comparator(e,o)||xe};this.rulesLookup.addRule(t.column,t.row,e)}}resolve(e,t,o){const n=this.rulesLookup.getRules(e,t);if(0===n.length)return"DATA"!==t.type||"DATA"!==e.type?null:o.has('"HEADER"')?"ASC"===o.get('"HEADER"')?we:xe:null;if(n.length>1)throw new Error("Multiple sorting rules for the same cell");const i=n[0];return"ASC"===o.get(i.by)?i.comparatorAsc:i.comparatorDesc}}function ve(e){return new be(e)}function Re(e,t,n){const i=new Map;for(const r of e){const e=o(r[t]),s=o(r[n]);i.has(e)||i.set(e,new Map),i.get(e).set(s,r.direction)}return i}function Ae(e,t){e.sort(((e,t)=>{const o=e.comparator(e.cell,t.cell);return"number"==typeof o?o:o?-1:1})),t.push(...e.map((e=>e.entity))),e.length=0}function ke(e,t,n,i,r,s,l){if(0===e.length)return r;const d=Re(e,"columnId","rowId"),a=new Map(s.map((e=>[e.key,e]))),u=e.map((e=>o(e.columnId))).filter((e=>a.has(e))).map((e=>a.get(e))).reverse();if(0===u.length)return r;for(const e of u){const o=[],a=[];for(const u of r){const c=t.resolve(e,u,d.get(e.key));if(!c){Ae(a,o),o.push(u);continue}const h={entity:u,comparator:c,cell:n.resolve(i,r,s,u,e,l)};0!==a.length&&a[0].comparator!==c?(Ae(a,o),a.push(h)):a.push(h)}Ae(a,o),r=o}return r}function Ee(e,t,n,i,r,s,l){if(0===e.length)return s;const d=Re(e,"rowId","columnId"),a=new Map(r.map((e=>[e.key,e]))),u=e.map((e=>o(e.rowId))).filter((e=>a.has(e))).map((e=>a.get(e))).reverse();if(0===u.length)return s;for(const e of u){const o=[],a=[];for(const u of s){const c=t.resolve(u,e,d.get(e.key));if(!c){Ae(a,o),o.push(u);continue}const h={entity:u,comparator:c,cell:n.resolve(i,r,s,e,u,l)};0!==a.length&&a[0].comparator!==c?(Ae(a,o),a.push(h)):a.push(h)}Ae(a,o),s=o}return s}const Ce=5;function Ie(e,t,n,i,r,s,l,d){if(!i)return null;const a=t.get(o(i.columnId));if("HEADER"!==n.get(o(i.rowId)).type)return null;const u=Q(r,s,l,d);if(!u)return null;const c=u.x;return c>=a.right-Ce&&c<=a.right+Ce?a.id:0===a.index||c<a.left-Ce||c>a.left+Ce?null:e[a.index-1].id}function Te(e,t,n,i,r,s,l,d){if(!i)return null;const a=t.get(o(i.columnId)),u=n.get(o(i.rowId));if("HEADER"!==a.type)return null;const c=Q(r,s,l,d);if(!c)return null;const h=c.y;return h>=u.bottom-Ce&&h<=u.bottom+Ce?u.id:0===u.index||h<u.top-Ce||h>u.top+Ce?null:e[u.index-1].id}function Le(e){return e.map((e=>({columnId:"columnId"in e?e.columnId:"HEADER",rowId:"rowId"in e?e.rowId:"HEADER",direction:e.direction})))}function Be(e){return e.map((e=>({columnId:"columnId"in e?e.columnId:"FILTER",rowId:"rowId"in e?e.rowId:"FILTER",expression:e.expression})))}function De(e,t){return function(e,t){const o=e.filter((e=>"DATA"===e.type)).map((e=>e.id));return t(o),o}(e,t)}function Me(e){console.count("updateState");const t={...e.localOptions,...e.externalOptions},o=e.memory,n=e.state,r=e.element;function s(e,t,n){const i=o[e]&&o[e].dependencies;return i&&!n.some(((e,t)=>e!==i[t]))||(o[e]={value:t(...n),dependencies:n}),o[e].value}const l=window.devicePixelRatio,d=t.borderWidth/l,a=t.data,h=e.input.value,g=s("sortBy",Le,[t.sortBy]),w=s("filters",Be,[t.filters]),v=s("textResolver",q,[]),R=s("dataFormatting",u,[t.formatting,t.dataSelector,g]),I=s("editedCellsAndFilters",m,[t.editedCells,w]),T=s("edition",y,[I]),L=s("invokedColumns",b,[t.columns,a]),B=s("invokedRows",b,[t.rows,a]),D=s("unfoldedColumns",le,[L,a]),M=s("unfoldedRows",de,[B,a]),F=s("unfilteredColumns",A,[D,t.pinnedLeft,t.pinnedRight,t.columnWidths]),z=s("unfilteredRows",k,[M,t.pinnedTop,t.pinnedBottom,t.rowHeights]),K=s("unfilteredColumnKeys",ge,[F]),$=s("unfilteredRowKeys",ge,[z]),te=s("filterFormatting",he,[R]),ie=s("filterFormattingRules",S,[te]),re=s("filteringRules",ce,[t.filtering]),se=s("filteredColumns",H,[w,re,ie,a,z,F,T]),ae=s("filteredRows",O,[w,re,ie,a,z,F,T]),ue=s("sortingFormatting",ye,[R]),we=s("sortingFormattingRules",S,[ue]),xe=s("sortingRules",ve,[t.sorting]),be=s("sortedColumns",Ee,[g,xe,we,a,ae,se,T]),Re=s("sortedRows",ke,[g,xe,we,a,ae,se,T]),Ae=s("measureFormatting",fe,[R]),Ce=s("measureFormattingRules",S,[Ae]),Me=s("measureFormatResolver",N,[Ce,a,Re,be,T]),Fe=e.columnWidthCache,Se=e.rowHeightCache,ze=s("measuredColumns",pe,[be,Re,v,Me,Fe,K]),Ne=s("measuredRows",me,[be,Re,v,Me,Se,$]),Ke=s("columns",E,[ze,l,d]),Oe=s("rows",C,[Ne,l,d]),He=s("columnLookup",Z,[Ke]),Pe=s("rowLookup",Z,[Oe]),We=t.focusedCell,$e=s("sections",p,[Ke,Oe]),qe=t.selectedCells,Ve=s("fixedSize",P,[$e.top.height,$e.bottom.height,$e.left.width,$e.right.width]),Ye=s("totalSize",W,[Ke,Oe]),Ge=function(e,t,o,n,i,r){if(!t)return null;if(t.x<0||t.y<0||t.x>r.width||t.y>r.height)return null;const s=Q(e,t,i,r),l=function(e,t){if(0===e.length)return-1;if(t<e[0].topWithBorder)return-1;if(t>e[e.length-1].bottomWithBorder)return-1;let o=0,n=e.length-1;for(;o<=n;){const i=Math.floor((o+n)/2);if(t<e[i].topWithBorder)n=i-1;else{if(!(t>e[i].bottomWithBorder))return i;o=i+1}}return-1}(o,s.y),d=function(e,t){if(0===e.length)return-1;if(t<e[0].leftWithBorder)return-1;if(t>e[e.length-1].rightWithBorder)return-1;let o=0,n=e.length-1;for(;o<=n;){const i=Math.floor((o+n)/2);if(t<e[i].leftWithBorder)n=i-1;else{if(!(t>e[i].rightWithBorder))return i;o=i+1}}return-1}(n,s.x);return-1===l||-1===d?null:{rowId:o[l].id,columnId:n[d].id}}(r,e.mousePosition,Oe,Ke,Ve,Ye),je=e.resizingColumn||s("resizableColumn",Ie,[Ke,He,Pe,Ge,r,e.mousePosition,Ve,Ye]),Ue=e.resizingRow||s("resizableRow",Te,[Oe,He,Pe,Ge,r,e.mousePosition,Ve,Ye]),_e=s("highlightedCells",ee,[e.isMouseDown,!!je||!!Ue,We,Ge,Ke,Oe,He,Pe]),Xe=s("selection",x,[qe]),Je=s("highlight",x,[_e]),Qe=s("renderFormatting",f,[R,Ge,We,Xe,Je,T,je,Ue,t.borderWidth]),Ze=s("renderFormattingRules",S,[Qe]),et=s("renderFormatResolver",N,[Ze,a,Oe,Ke,T]),tt=s("inputFormatting",c,[R]),ot=s("inputFormattingRules",S,[tt]),nt=s("inputFormatResolver",N,[ot,a,Oe,Ke,T]),it=s("editableCells",i,[qe,nt,He,Pe]),rt=s("inputPlacement",oe,[it,We,He,Pe,$e]),st=s("isTextValid",ne,[h,it]),lt=function(e,t,o,n){const i={width:n.getBoundingClientRect().width,height:n.getBoundingClientRect().height},r={left:n.scrollLeft,top:n.scrollTop},s=e||J,l=U({left:0,top:0,...t},o),d=U({...r,...i},o),a=Y(l,G(d,_)),u=Y(l,G(d,X));return V(l,s)&&V(s,a)?j(s)>2*j(u)?u:s:u}(n?.scrollRect,Ye,Ve,r);s("activeColumns",De,[Ke,t.onActiveColumnsChange]),s("activeRows",De,[Oe,t.onActiveRowsChange]),e.state={options:t,devicePixelRatio:l,borderWidth:d,data:a,dataFormatting:R,edition:T,filteredColumns:se,filteredRows:ae,columns:Ke,rows:Oe,sections:$e,selectedCells:qe,selection:Xe,highlight:Je,hoveredCell:Ge,focusedCell:We,renderFormatting:Qe,renderFormatResolver:et,inputFormatting:tt,inputFormatResolver:nt,fixedSize:Ve,totalSize:Ye,textResolver:v,scrollRect:lt,highlightedCells:_e,inputPlacement:rt,columnLookup:He,rowLookup:Pe,text:h,isTextValid:st,resizableColumn:je,resizableRow:Ue}}function Fe(e){if(!e.error)try{Me(e)}catch(t){e.error=t}}function Se(e,t){const o=new w(t);return[...t,...e.filter((e=>!o.isIdSelected(e.rowId,e.columnId)))]}function ze(e,t){const o=new w(t);return e.filter((e=>!o.isIdSelected(e.rowId,e.columnId)))}function Ne(e){const t=e.currentTarget.getBoundingClientRect();return{x:e.clientX-t.left,y:e.clientY-t.top}}function Ke(e){if("spread-grid-context"in e)return;console.log("initialize");const t={"top-left":document.createElement("canvas"),"top-center":document.createElement("canvas"),"top-right":document.createElement("canvas"),"middle-left":document.createElement("canvas"),"middle-center":document.createElement("canvas"),"middle-right":document.createElement("canvas"),"bottom-left":document.createElement("canvas"),"bottom-center":document.createElement("canvas"),"bottom-right":document.createElement("canvas")},r=document.createElement("input");e.setAttribute("tabindex","0"),e.setAttribute("style","max-width: 100vw; max-height: 100vh; overflow: auto; display: grid; position: relative; grid-template-columns: fit-content(0) fit-content(0) fit-content(0); grid-template-rows: fit-content(0) fit-content(0) fit-content(0); outline: none; user-select: none;"),e.classList.add("spread-grid"),t["top-left"].setAttribute("style","position: sticky; left: 0; top: 0; z-index: 2; grid-row: 1; grid-column: 1;"),t["top-center"].setAttribute("style","position: sticky; top: 0; z-index: 1; grid-row: 1; grid-column: 2;"),t["top-right"].setAttribute("style","position: sticky; right: 0; top: 0; z-index: 2; grid-row: 1; grid-column: 3;"),t["middle-left"].setAttribute("style","position: sticky; left: 0; z-index: 1; grid-row: 2; grid-column: 1;"),t["middle-center"].setAttribute("style","grid-row: 2; grid-column: 2; z-index: 0;"),t["middle-right"].setAttribute("style","position: sticky; right: 0; z-index: 1; grid-row: 2; grid-column: 3;"),t["bottom-left"].setAttribute("style","position: sticky; left: 0; bottom: 0; z-index: 2; grid-row: 3; grid-column: 1;"),t["bottom-center"].setAttribute("style","position: sticky; bottom: 0; z-index: 1; grid-row: 3; grid-column: 2;"),t["bottom-right"].setAttribute("style","position: sticky; right: 0; bottom: 0; z-index: 2; grid-row: 3; grid-column: 3;"),r.setAttribute("style","position: sticky; z-index: 3; outline: none; border: none; box-shadow: none; padding: 0 5px; font-size: 12px; font-family: Calibri; background-color: white; box-sizing: border-box; opacity: 0; pointer-events: none;");const s={externalOptions:{},state:null,memory:{},element:e,canvases:t,input:r,renderRequested:!1,mousePosition:null,isMouseDown:!1,columnWidthCache:new Map,rowHeightCache:new Map,requestNewRender:()=>{s.renderRequested||(s.renderRequested=!0,requestAnimationFrame((()=>{s.renderRequested=!1,Fe(s),a(s)})))},addEventListener:(e,t,o)=>{e.addEventListener(t,(e=>{try{o(e)}catch(e){e.message=`[${t} event]: ${e.message}`,s.error=e,s.requestNewRender()}}))}};s.localOptions={data:[],columns:[{type:"DATA-BLOCK"}],rows:[{type:"HEADER"},{type:"DATA-BLOCK"}],formatting:[],filtering:[],sorting:[],dataSelector:({data:e,row:t,column:o})=>e[t.id][o.id],pinnedTop:0,pinnedBottom:0,pinnedLeft:0,pinnedRight:0,borderWidth:1,focusedCell:null,onFocusedCellChange:e=>{s.localOptions.focusedCell=e,s.requestNewRender()},selectedCells:[],onSelectedCellsChange:e=>{s.localOptions.selectedCells=e,s.requestNewRender()},highlightedCells:[],editedCells:[],onEditedCellsChange:e=>{s.localOptions.editedCells=e,s.requestNewRender()},filters:[],onFiltersChange:e=>{s.localOptions.filters=e,s.requestNewRender()},sortBy:[],onSortByChange:e=>{s.localOptions.sortBy=e,s.requestNewRender()},onCellClick:()=>{},onCustomCellClick:()=>{},columnWidths:[],onColumnWidthsChange:e=>{s.localOptions.columnWidths=e,s.requestNewRender()},rowHeights:[],onRowHeightsChange:e=>{s.localOptions.rowHeights=e,s.requestNewRender()},onActiveColumnsChange:()=>{},onActiveRowsChange:()=>{}},e["spread-grid-context"]=s;const l=e=>{r.value=e,r.dispatchEvent(new Event("input"))},d=e=>{const t=s.state.options.selectedCells,o=s.state.inputFormatResolver,n=s.state.columnLookup,r=s.state.rowLookup,d=s.state.text,a=s.state.isTextValid,u=s.state.options.onEditedCellsChange,c=s.state.options.onFiltersChange,h=i(t,o,n,r);if(""===d)return;if(!a)return;if(e&&!h.every((e=>e.edit.autoCommit)))return;const f=h.filter((e=>"DATA"===e.type)),p=h.filter((e=>"FILTER"===e.type));var m;m=f.map((e=>({...e.cell,value:e.edit.parse({string:d})}))),u(Se(s.state.options.editedCells,m)),(e=>{c(Se(s.state.options.filters,e))})(p.map((e=>({...e.cell,expression:e.edit.parse({string:d})})))),e||l("")},u=e=>{const t=s.state.options.selectedCells,o=s.state.options.onEditedCellsChange,n=s.state.options.onFiltersChange,r=i(t,s.state.inputFormatResolver,s.state.columnLookup,s.state.rowLookup);var l;e&&!r.every((e=>e.edit.autoCommit))||(l=t,o(ze(s.state.options.editedCells,l)),(e=>{n(ze(s.state.options.filters,e))})(t))};s.addEventListener(e,"scroll",(e=>{s.requestNewRender()})),s.addEventListener(e,"mouseenter",(e=>{s.mousePosition=Ne(e),s.requestNewRender()})),s.addEventListener(e,"mousemove",(t=>{if(s.mousePosition=Ne(t),s.resizingColumn){const t=s.state.columnLookup.get(o(s.resizingColumn)),n=t.width,i=t.right,r=Q(e,s.mousePosition,s.state.fixedSize,s.state.totalSize),l=Math.max(10,r.x-i+n),d=s.state.options.columnWidths.filter((e=>o(e.columnId)!==t.key)).concat([{columnId:t.id,width:l}]);s.state.options.onColumnWidthsChange(d)}if(s.resizingRow){const t=s.state.rowLookup.get(o(s.resizingRow)),n=t.height,i=t.bottom,r=Q(e,s.mousePosition,s.state.fixedSize,s.state.totalSize),l=Math.max(10,r.y-i+n),d=s.state.options.rowHeights.filter((e=>o(e.rowId)!==t.key)).concat([{rowId:t.id,height:l}]);s.state.options.onRowHeightsChange(d)}s.requestNewRender()})),s.addEventListener(e,"mouseleave",(()=>{s.mousePosition=null,s.requestNewRender()})),s.addEventListener(e,"mousedown",(e=>{Fe(s),l(""),s.isMouseDown=!0,s.mouseDownPosition=s.mousePosition,s.mouseDownCell=s.state.hoveredCell,s.state.resizableColumn&&(s.resizingColumn=s.state.resizableColumn),s.state.resizableRow&&(s.resizingRow=s.state.resizableRow),s.state.resizableColumn||s.state.resizableRow||s.state.options.onFocusedCellChange(s.state.hoveredCell),e.ctrlKey||s.state.options.onSelectedCellsChange([]),s.requestNewRender()})),s.addEventListener(e,"mouseup",(e=>{Fe(s),s.isMouseDown=!1,s.resizingColumn=null,s.resizingRow=null,s.state.options.onSelectedCellsChange(Se(s.state.options.selectedCells,s.state.highlightedCells)),s.requestNewRender()})),s.addEventListener(e,"pointerdown",(e=>{s.element.setPointerCapture(e.pointerId)})),s.addEventListener(e,"pointerup",(e=>{s.element.releasePointerCapture(e.pointerId)})),s.addEventListener(e,"click",(e=>{Fe(s);const t=s.state.hoveredCell,i=s.mouseDownCell;if(s.state.resizableColumn||s.state.resizableRow)return;if(null===t)return;if(o(t.columnId)!==o(i.columnId))return;if(o(t.rowId)!==o(i.rowId))return;const r=s.state.columnLookup.get(o(t.columnId)),l=s.state.rowLookup.get(o(t.rowId)),d=s.state.options.sortBy,a=s.state.inputFormatResolver.resolve(l,r);if(a.edit?.toggle){const e=function(e,t,o,n){const i=n.hasValueByKey(o.key,t.key)?n.getValueByKey(o.key,t.key):e.value,r=e.edit.toggle;return"function"==typeof r?r({value:i}):r[(r.indexOf(i)+1)%r.length]}(a,r,l,s.state.edition),o=n(r,l);"DATA"===o&&s.state.options.onEditedCellsChange(Se(s.state.options.editedCells,[{...t,value:e}])),"FILTER"===o&&s.state.options.onFiltersChange(Se(s.state.options.filters,[{...t,expression:e}]))}else if("DATA"===r.type&&"DATA"===l.type)s.state.options.onCellClick(s.state.hoveredCell);else if("CUSTOM"===r.type||"CUSTOM"===l.type)s.state.options.onCustomCellClick(s.state.hoveredCell);else if("HEADER"===r.type||"HEADER"===l.type){const t=function(e,t,n,i){function r(e){return t.key===o(e.columnId||"HEADER")&&n.key===o(e.rowId||"HEADER")}const s=["ASC","DESC",void 0],l=e.find(r),d=s.indexOf(l?.direction),a=s[(d+1)%s.length],u=e.indexOf(l)===e.length-1;return[...!i||!u&&l?[]:e.filter((e=>!r(e))),...a?[{columnId:t.id,rowId:n.id,direction:a}]:[]]}(d,r,l,e.ctrlKey);s.state.options.onSortByChange(t),s.state.options.onSelectedCellsChange([])}})),s.addEventListener(e,"dblclick",(e=>{if(Fe(s),s.state.resizableColumn){const e=o(s.state.resizableColumn),t=s.state.options.columnWidths.filter((t=>o(t.columnId)!==e));s.state.options.onColumnWidthsChange(t),s.columnWidthCache.delete(e)}if(s.state.resizableRow){const e=o(s.state.resizableRow),t=s.state.options.rowHeights.filter((t=>o(t.rowId)!==e));s.state.options.onRowHeightsChange(t),s.rowHeightCache.delete(e)}const t=s.state.focusedCell;if(null===t)return;const n=o(t.columnId),i=o(t.rowId),d=s.state.columnLookup,a=s.state.rowLookup,u=s.state.inputFormatResolver;if(!d.has(n))return;if(!a.has(i))return;const c=d.get(n),h=a.get(i),f=u.resolve(h,c),p=f.text;f.edit&&(f.edit.toggle||(l(p),r?.select()))})),s.addEventListener(e,"focus",(()=>{r.parentElement&&r.focus({preventScroll:!0})})),s.addEventListener(e,"keydown",(e=>{Fe(s);const t=s.state.focusedCell,n=s.state.columnLookup,i=s.state.rowLookup,r=s.state.options.selectedCells,a=s.state.options.onSelectedCellsChange,c=s.state.options.onFocusedCellChange,h=s.state.options.editedCells,f=s.state.options.onEditedCellsChange,p=s.state.columns,m=s.state.rows,g=s.state.text,y=s.state.inputFormatResolver,x=(e,t)=>{c(e),t.shiftKey?a(Se(r,[e])):a([e])},b=(e,i)=>{if(!t)return;const r=o(t.columnId);if(!n.has(r))return;const s=n.get(r).index,l=Math.max(0,Math.min(p.length-1,s+e));if(l===s)return;const d={rowId:t.rowId,columnId:p[l].id};x(d,i)},v=(e,n)=>{if(!t)return;const r=o(t.rowId);if(!i.has(r))return;const s=i.get(r).index,l=Math.max(0,Math.min(m.length-1,s+e));if(l===s)return;const d={rowId:m[l].id,columnId:t.columnId};x(d,n)},R=()=>{e.preventDefault(),e.stopPropagation()};switch(e.key){case"Escape":""!==g?l(""):r.length>1?a([t]):h.length>0?f([]):(c(null),a([]));break;case"Enter":d();break;case"ArrowUp":R(),v(e.ctrlKey?-m.length:-1,e);break;case"ArrowDown":R(),v(e.ctrlKey?m.length:1,e);break;case"ArrowLeft":R(),b(e.ctrlKey?-p.length:-1,e);break;case"ArrowRight":R(),b(e.ctrlKey?p.length:1,e);break;case"Delete":case"Backspace":u();break;case"c":(e=>{if(!e.ctrlKey)return;const t=function(e,t,n,i){const r=new Map(t.map((e=>[e.key,e]))),s=new Map(n.map((e=>[e.key,e]))),l=e.map((e=>({columnKey:o(e.columnId),rowKey:o(e.rowId)}))).filter((e=>r.has(e.columnKey)&&s.has(e.rowKey))),d=new Set(l.map((e=>e.columnKey))),a=new Set(l.map((e=>e.rowKey)));if(0===l.length)return"";const u=new w(e),c=Math.min(...l.map((e=>r.get(e.columnKey).index))),h=Math.max(...l.map((e=>r.get(e.columnKey).index))),f=Math.min(...l.map((e=>s.get(e.rowKey).index))),p=Math.max(...l.map((e=>s.get(e.rowKey).index))),m=[];for(let e=f;e<=p;e++){const o=n[e],r=o.key;if(a.has(r)){for(let e=c;e<=h;e++){const n=t[e],s=n.key;if(d.has(s)){if(u.isKeySelected(r,s)){const e=i.resolve(o,n).text;m.push(e)}e<h&&m.push("\t")}}e<p&&m.push("\n")}}return m.join("")}(r,p,m,y);if(navigator.clipboard)navigator.clipboard.writeText(t);else{const e=document.createElement("textarea");e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)}})(e)}})),new ResizeObserver((()=>{s.requestNewRender()})).observe(e),s.addEventListener(r,"input",(e=>{Fe(s),e.target.value?(d(!0),r.style.opacity=1,r.style.pointerEvents="auto"):(e.isTrusted&&u(!0),r.style.opacity=0,r.style.pointerEvents="none")})),s.addEventListener(r,"click",(e=>{e.stopPropagation()})),s.addEventListener(r,"dblclick",(e=>{e.stopPropagation()})),s.addEventListener(r,"mousedown",(e=>{e.stopPropagation()})),s.addEventListener(r,"keydown",(e=>{switch(e.key){case"Enter":case"Escape":break;case"Delete":case"Backspace":case"ArrowUp":case"ArrowDown":case"ArrowLeft":case"ArrowRight":""!==r.value&&(e.stopPropagation(),s.requestNewRender());break;default:e.stopPropagation(),s.requestNewRender()}}))}function Oe(e,t){console.log("createGrid"),Ke(e);const o=e["spread-grid-context"];o.externalOptions=t,null===o.state?(Fe(o),a(o)):o.requestNewRender()}return t.default})()));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "js-spread-grid",
-    "version": "0.0.21",
+    "version": "0.0.22",
     "description": "Fast grid for js applications",
     "author": "Tomasz Rewak <tomasz.rewak@gmail.com>",
     "license": "MIT",

package/src/core/state.js

@@ -42,6 +42,7 @@ function updateStateInternal(context) {
     const options = { ...context.localOptions, ...context.externalOptions };
     const memory = context.memory;
     const previousState = context.state;
+    const element = context.element;
 
     // TODO: Move to utils
     function cache(key, func, dependencies) {
@@ -110,9 +111,9 @@ function updateStateInternal(context) {
     const fixedSize = cache('fixedSize', getFixedSize, [sections.top.height, sections.bottom.height, sections.left.width, sections.right.width]);
     const totalSize = cache('totalSize', getTotalSize, [columns, rows]);
     // TODO: do some proper caching, so that if value is not changed, the old value is returned (currently not working because of scrolling)
-    const hoveredCell = getHoveredCell(context.element, context.mousePosition, rows, columns, fixedSize, totalSize);
-    const resizableColumn = context.resizingColumn || cache('resizableColumn', getResizableColumn, [columns, columnLookup, rowLookup, hoveredCell, context.mousePosition]);
-    const resizableRow = context.resizingRow || cache('resizableRow', getResizableRow, [rows, columnLookup, rowLookup, hoveredCell, context.mousePosition]);
+    const hoveredCell = getHoveredCell(element, context.mousePosition, rows, columns, fixedSize, totalSize);
+    const resizableColumn = context.resizingColumn || cache('resizableColumn', getResizableColumn, [columns, columnLookup, rowLookup, hoveredCell, element, context.mousePosition, fixedSize, totalSize]);
+    const resizableRow = context.resizingRow || cache('resizableRow', getResizableRow, [rows, columnLookup, rowLookup, hoveredCell, element, context.mousePosition, fixedSize, totalSize]);
     const isMouseDown = context.isMouseDown;
     const isResizing = !!resizableColumn || !!resizableRow;
     const highlightedCells = cache('highlightedCells', getHighlightedCells, [isMouseDown, isResizing, focusedCell, hoveredCell, columns, rows, columnLookup, rowLookup]);
@@ -130,7 +131,7 @@ function updateStateInternal(context) {
     const isTextValid = cache('isTextValid', getIsTextValid, [text, editableCells]);
 
     // cache result, but not call
-    const scrollRect = getScrollRect(previousState?.scrollRect, totalSize, fixedSize, context.element);
+    const scrollRect = getScrollRect(previousState?.scrollRect, totalSize, fixedSize, element);
 
     // callbacks
     cache('activeColumns', getActiveColumns, [columns, options.onActiveColumnsChange]);

package/src/index.js

@@ -9,6 +9,7 @@ import getNewSortBy from "./state-utils/getNewSortBy.js";
 import getClipboardData from "./state-utils/getClipboardData.js";
 import getToggledValue from "./state-utils/getToggledValue.js";
 import getCellType from "./state-utils/getCellType.js";
+import getInternalPosition from "./state-utils/getInternalPosition.js";
 
 function initialize(element) {
     if ('spread-grid-context' in element) return;
@@ -212,8 +213,8 @@ function initialize(element) {
             const column = context.state.columnLookup.get(stringifyId(context.resizingColumn));
             const columnWidth = column.width;
             const columnRight = column.right;
-            const mousePosition = context.mousePosition.x;
-            const newColumnWidth = Math.max(10, mousePosition - columnRight + columnWidth);
+            const internalPosition = getInternalPosition(element, context.mousePosition, context.state.fixedSize, context.state.totalSize);
+            const newColumnWidth = Math.max(10, internalPosition.x - columnRight + columnWidth);
             const previousColumnWidths = context.state.options.columnWidths;
             const newColumnWidths = previousColumnWidths
                 .filter(columnWidth => stringifyId(columnWidth.columnId) !== column.key)
@@ -224,8 +225,8 @@ function initialize(element) {
             const row = context.state.rowLookup.get(stringifyId(context.resizingRow));
             const rowHeight = row.height;
             const rowBottom = row.bottom;
-            const mousePosition = context.mousePosition.y;
-            const newRowHeight = Math.max(10, mousePosition - rowBottom + rowHeight);
+            const internalPosition = getInternalPosition(element, context.mousePosition, context.state.fixedSize, context.state.totalSize);
+            const newRowHeight = Math.max(10, internalPosition.y - rowBottom + rowHeight);
             const previousRowHeights = context.state.options.rowHeights;
             const newRowHeights = previousRowHeights
                 .filter(rowHeight => stringifyId(rowHeight.rowId) !== row.key)

package/src/state-utils/getHoveredCell.js

@@ -1,37 +1,16 @@
 import getColumnIndex from "./getColumnIndex.js";
+import getInternalPosition from "./getInternalPosition.js";
 import getRowIndex from "./getRowIndex.js";
 
 export default function getHoveredCell(element, mousePosition, rows, columns, fixedSize, totalSize) {
-    // TODO: sometimes mousePosition is outside of bounds and it crashes the click events
-
     if (!mousePosition)
         return null;
     if (mousePosition.x < 0 || mousePosition.y < 0 || mousePosition.x > totalSize.width || mousePosition.y > totalSize.height)
         return null;
 
-    const scrollOffset = {
-        left: element.scrollLeft,
-        top: element.scrollTop
-    };
-
-    const clientSize = {
-        width: element.clientWidth,
-        height: element.clientHeight
-    };
-
-    const x = mousePosition.x <= fixedSize.left
-        ? mousePosition.x
-        : mousePosition.x >= clientSize.width - fixedSize.right
-            ? totalSize.width - clientSize.width + mousePosition.x
-            : mousePosition.x + scrollOffset.left;
-    const y = mousePosition.y <= fixedSize.top
-        ? mousePosition.y
-        : mousePosition.y >= clientSize.height - fixedSize.bottom
-            ? totalSize.height - clientSize.height + mousePosition.y
-            : mousePosition.y + scrollOffset.top;
-
-    const hoverRowIndex = getRowIndex(rows, y);
-    const hoverColumnIndex = getColumnIndex(columns, x);
+    const internalPosition = getInternalPosition(element, mousePosition, fixedSize, totalSize);
+    const hoverRowIndex = getRowIndex(rows, internalPosition.y);
+    const hoverColumnIndex = getColumnIndex(columns, internalPosition.x);
 
     if (hoverRowIndex === -1 || hoverColumnIndex === -1)
         return null;

package/src/state-utils/getInternalPosition.js

@@ -0,0 +1,32 @@
+export default function getInternalPosition(element, position, fixedSize, totalSize) {
+  // TODO: sometimes mousePosition is outside of bounds and it crashes the click events
+  const x = position.x;
+  const y = position.y;
+
+  const scrollOffset = {
+    left: element.scrollLeft,
+    top: element.scrollTop
+  };
+
+  const clientSize = {
+    width: element.clientWidth,
+    height: element.clientHeight
+  };
+
+  return {
+    x: x <= fixedSize.left
+      ? x
+      : x >= clientSize.width // TODO: This will not work for resizing columns pinned to the right
+        ? x + scrollOffset.left
+        : x >= clientSize.width - fixedSize.right
+          ? totalSize.width - clientSize.width + x
+          : x + scrollOffset.left,
+    y: y <= fixedSize.top
+      ? y
+      : y >= clientSize.height // TODO: This will not work for resizing rows pinned to the bottom
+        ? y + scrollOffset.top
+        : y >= clientSize.height - fixedSize.bottom
+          ? totalSize.height - clientSize.height + y
+          : y + scrollOffset.top
+  };
+}

package/src/state-utils/getResizable.js

@@ -1,20 +1,25 @@
 import stringifyId from "../core-utils/stringifyId.js";
+import getInternalPosition from "./getInternalPosition.js";
 
 const grabOffset = 5;
 
 // TODO: not working when scrolled
 
-export function getResizableColumn(columns, columnLookup, rowLookup, hoveredCell, mousePosition) {
+export function getResizableColumn(columns, columnLookup, rowLookup, hoveredCell, element, mousePosition, fixedSize, totalSize) {
     if (!hoveredCell)
         return null;
 
     const column = columnLookup.get(stringifyId(hoveredCell.columnId));
     const row = rowLookup.get(stringifyId(hoveredCell.rowId));
-    const x = mousePosition.x;
 
     if (row.type !== 'HEADER')
         return null;
 
+    const internalPosition = getInternalPosition(element, mousePosition, fixedSize, totalSize);
+    if (!internalPosition)
+        return null;
+    const x = internalPosition.x;
+
     if (x >= column.right - grabOffset && x <= column.right + grabOffset)
         return column.id;
 
@@ -26,17 +31,21 @@ export function getResizableColumn(columns, columnLookup, rowLookup, hoveredCell
     return columns[column.index - 1].id;
 }
 
-export function getResizableRow(rows, columnLookup, rowLookup, hoveredCell, mousePosition) {
+export function getResizableRow(rows, columnLookup, rowLookup, hoveredCell, element, mousePosition, fixedSize, totalSize) {
     if (!hoveredCell)
         return null;
 
     const column = columnLookup.get(stringifyId(hoveredCell.columnId));
     const row = rowLookup.get(stringifyId(hoveredCell.rowId));
-    const y = mousePosition.y;
 
     if (column.type !== 'HEADER')
         return null;
 
+    const internalPosition = getInternalPosition(element, mousePosition, fixedSize, totalSize);
+    if (!internalPosition)
+        return null;
+    const y = internalPosition.y;
+
     if (y >= row.bottom - grabOffset && y <= row.bottom + grabOffset)
         return row.id;