vxe-gantt/lib/gantt/src/gantt-view.min.js

A vue based gantt component

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_dom=require("../../ui/src/dom"),_core=require("@vxe-ui/core"),_util=require("./util"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ganttHeader=_interopRequireDefault(require("./gantt-header")),_ganttBody=_interopRequireDefault(require("./gantt-body")),_ganttFooter=_interopRequireDefault(require("./gantt-footer"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let globalEvents=_core.VxeUI.globalEvents;function createInternalData(){return{xeTable:null,startMaps:{},endMaps:{},chartMaps:{},elemStore:{},scrollXStore:{preloadSize:0,offsetSize:0,visibleSize:0,visibleStartIndex:0,visibleEndIndex:0,startIndex:0,endIndex:0},scrollYStore:{preloadSize:0,offsetSize:0,visibleSize:0,visibleStartIndex:0,visibleEndIndex:0,startIndex:0,endIndex:0}}}let maxYHeight=5e6;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeGanttView",setup(_,W){var e=_xeUtils.default.uniqueId();let s=(0,_vue.inject)("$xeGantt",{}),{computeTaskOpts:$,computeStartField:U,computeEndField:M,computeScrollbarOpts:x,computeScrollbarXToTop:y,computeScrollbarYToLeft:w}=s.getComputeMaps(),i=(0,_vue.ref)(),S=(0,_vue.ref)(),b=(0,_vue.ref)(),o=(0,_vue.ref)(),T=(0,_vue.ref)(),E=(0,_vue.ref)(),n=(0,_vue.ref)(),D=(0,_vue.ref)(),H=(0,_vue.ref)(),R=(0,_vue.ref)(),C=(0,_vue.ref)(),a=(0,_vue.ref)(),c=(0,_vue.ref)(),L=(0,_vue.ref)(),k=(0,_vue.reactive)({scrollXLoad:!1,scrollYLoad:!1,overflowY:!0,overflowX:!0,scrollbarWidth:0,scrollbarHeight:0,lazScrollLoading:!1,scrollVMLoading:!1,scrollYHeight:0,scrollYTop:0,isScrollYBig:!1,scrollXLeft:0,scrollXWidth:0,isScrollXBig:!1,minViewDate:null,maxViewDate:null,tableData:[],tableColumn:[],headerGroups:[],viewCellWidth:20}),q=createInternalData(),X={refElem:i},F={},t={xID:e,props:_,context:W,reactData:k,internalData:q,getRefMaps:()=>X,getComputeMaps:()=>F},V=e=>{var t=$.value.dateFormat;return _xeUtils.default.toStringDate(e,t||null)},l=()=>{var t=s.props.treeConfig,a=q.xeTable;let i=null,o=null;if(a){let l=U.value,r=M.value;var d=a.getComputeMaps().computeTreeOpts,{afterFullData:a,afterTreeFullData:v}=a.internalData,d=d.value,h=d.transform,p=d.children||d.childrenField,f=e=>{var t=_xeUtils.default.get(e,l),e=_xeUtils.default.get(e,r);t&&e&&(t=V(t),(!i||i.getTime()>t.getTime())&&(i=t),t=V(e),!o||o.getTime()<t.getTime())&&(o=t)};t?_xeUtils.default.eachTree(v,f,{children:h?d.mapChildrenField:p}):a.forEach(f)}k.minViewDate=i,k.maxViewDate=o,q.startMaps={},q.endMaps={};{t=s.props.treeConfig,v=s.reactData.taskScaleList;let{minViewDate:c,maxViewDate:e}=k;var g=_xeUtils.default.last(v);let l=[],r=[];if(g&&c&&e){let i=g.type;var m=v.find(e=>"week"===e.type);let n=864e5;switch(g.type){case"hour":n=36e5;break;case"minute":n=6e4;break;case"second":n=1e3}var _=c.getTime(),x=e.getTime()-c.getTime(),y=Math.max(5,Math.floor(x/n)+1);switch(g.type){case"day":case"date":if(948672e5<x)return void(k.tableColumn=[],k.headerGroups=[]);break;case"hour":if(80352e5<x)return void(k.tableColumn=[],k.headerGroups=[]);break;case"minute":if(2592e5<x)return void(k.tableColumn=[],k.headerGroups=[]);break;case"second":if(108e5<x)return void(k.tableColumn=[],k.headerGroups=[])}let o={year:[],quarter:[],month:[],week:[],day:[],date:[],hour:[],minute:[],second:[]},s={year:{},quarter:{},month:{},week:{},day:{},date:{},hour:{},minute:{},second:{}};var w=(t,l,r)=>{if(i!==t){var l=l[t],a=""+l.field;let e=s[t][a];e||(e=l,s[t][a]=e,o[t].push(e)),e&&(e.children||(e.children=[]),e.children.push(r))}};for(let e=0;e<y;e++){var S=new Date(_+e*n),[b,T,E,D,H,R]=_xeUtils.default.toDateString(S,"yyyy-M-d-H-m-s").split("-"),C=S.getDay(),L=C+1,Y=Math.ceil((S.getMonth()+1)/3),S=_xeUtils.default.getYearWeek(S,m?m.startDay:void 0),C={yy:b,M:T,d:E,H:D,m:H,s:R,q:Y,W:S,E:L,e:C},Y={year:{field:b,title:b,params:C},quarter:{field:b+"_q"+Y,title:Y,params:C},month:{field:b+"_"+T,title:T,params:C},week:{field:b+"_W"+S,title:S,params:C},day:{field:b+`_${T}_${E}_E`+L,title:L,params:C},date:{field:b+`_${T}_`+E,title:E,params:C},hour:{field:b+`_${T}_${E}_`+D,title:D,params:C},minute:{field:b+`_${T}_${E}_${D}_`+H,title:H,params:C},second:{field:b+`_${T}_${E}_${D}_${H}_`+R,title:R,params:C}},S=Y[i];g.level<19&&w("year",Y,S),g.level<17&&w("quarter",Y,S),g.level<14&&w("month",Y,S),g.level<13&&w("week",Y,S),g.level<11&&w("day",Y,S),g.level<12&&w("date",Y,S),g.level<7&&w("hour",Y,S),g.level<5&&w("minute",Y,S),l.push(S)}v.forEach(e=>{var t;e.type===i?r.push({scaleItem:e,columns:l}):((t=o[e.type]||[])&&t.forEach(e=>{e.childCount=e.children?e.children.length:0,e.children=void 0}),r.push({scaleItem:e,columns:t}))});let u=q.xeTable;if(u){let i=U.value,o=M.value;var v=u.getComputeMaps().computeTreeOpts,{afterFullData:h,afterTreeFullData:d}=u.internalData,v=v.value,p=v.transform,a=v.children||v.childrenField;let s={};f=e=>{var t,l=u.getRowid(e),r=_xeUtils.default.get(e,i),a=_xeUtils.default.get(e,o);r&&a&&(r=V(r),a=V(a),t=Math.floor((r.getTime()-c.getTime())/n),a=Math.floor((a.getTime()-r.getTime())/n)+1,s[l]={row:e,rowid:l,oLeftSize:t,oWidthSize:a})};t?_xeUtils.default.eachTree(d,f,{children:p?v.mapChildrenField:a}):h.forEach(f),q.chartMaps=s}}k.tableColumn=l,k.headerGroups=r}},d=()=>{var{scrollXWidth:e,scrollYHeight:t}=k,l=q.elemStore,r=x.value,l=(0,_util.getRefElem)(l["main-body-wrapper"]),a=o.value,i=n.value;l&&(t=t>l.clientHeight,i&&(k.scrollbarWidth=r.width||i.offsetWidth-i.clientWidth||14),k.overflowY=t,i=e>l.clientWidth,a&&(k.scrollbarHeight=r.height||a.offsetHeight-a.clientHeight||14),k.overflowX=i)},Y=()=>{let l=k.viewCellWidth,{elemStore:e,chartMaps:r}=q;var t=(0,_util.getRefElem)(e["main-chart-wrapper"]);return t&&_xeUtils.default.arrayEach(t.children,e=>{var t=e.children[0];t&&(e=(e=e.getAttribute("rowid"))?r[e]:null)&&(t.style.left=l*e.oLeftSize+"px",t.style.width=l*e.oWidthSize+"px")}),(0,_vue.nextTick)()},v=()=>{var{scrollbarWidth:o,scrollbarHeight:s,tableColumn:n,headerGroups:u}=k,c=q.elemStore,d=q.xeTable,v=i.value;if(v&&v.clientHeight){var h=x.value,p=y.value,f=w.value,g=T.value,m=E.value,_=S.value;let e=o;o=s;let t=0,l=0,r=0,a=(d&&(s=d.internalData,t=s.tBodyHeight,l=s.tHeaderHeight,r=s.tFooterHeight),"visible");(f||h.y&&!1===h.y.visible)&&(e=0,a="hidden");d=(0,_util.getRefElem)(c["main-header-scroll"]),s=(d&&(d.style.height=l+"px",d.style.setProperty("--vxe-ui-gantt-view-cell-height",l/u.length+"px")),(0,_util.getRefElem)(c["main-body-scroll"])),f=(s&&(s.style.height=t+"px"),(0,_util.getRefElem)(c["main-footer-scroll"])),h=(f&&(f.style.height=r+"px"),_&&(_.style.height=o+"px",_.style.visibility="visible"),H.value),d=(h&&(h.style.left=p?e+"px":"",h.style.width=v.clientWidth-e+"px"),g&&(g.style.width=p?e+"px":"",g.style.display=p&&o?"block":""),m&&(m.style.width=p?"":e+"px",m.style.display=!p&&o?"block":""),b.value),u=(d&&(d.style.width=e+"px",d.style.height=t+l+r+"px",d.style.visibility=a),D.value),f=(u&&(u.style.height=l+"px",u.style.display=l?"block":""),R.value),_=(f&&(f.style.height=t+"px",f.style.top=l+"px"),C.value),h=(_&&(_.style.height=r+"px",_.style.top=l+t+"px",_.style.display=r?"block":""),L.value);h&&(k.viewCellWidth=h.clientWidth||40);let i=k.viewCellWidth*n.length;s&&0<(g=(v=s.clientWidth)-i)&&(k.viewCellWidth+=Math.floor(g/n.length),i=v);m=(0,_util.getRefElem)(c["main-header-table"]),p=(0,_util.getRefElem)(c["main-body-table"]);return m&&(m.style.width=i+"px"),p&&(p.style.width=i+"px"),k.scrollXWidth=i,Y()}},r=()=>(d(),v(),Y(),(0,_vue.nextTick)());let u=(e,t,l,r,a)=>{var i;i=q.lcsTimeout,k.lazScrollLoading=!0,i&&clearTimeout(i),q.lcsTimeout=setTimeout(()=>{q.lcsRunTime=Date.now(),q.lcsTimeout=void 0,q.intoRunScroll=!1,q.inVirtualScroll=!1,q.inWheelScroll=!1,q.inHeaderScroll=!1,q.inBodyScroll=!1,q.inFooterScroll=!1,k.lazScrollLoading=!1},200)},h=e=>{var t=q.xeTable;t&&(t=t.internalData.elemStore,t=(0,_util.getRefElem)(t["main-body-scroll"]))&&(t.scrollTop=e)};e={handleUpdateStyle:v,handleLazyRecalculate:r,handleUpdateCurrentRow(e){var t,l,r=q.xeTable,a=i.value;r&&a&&(e?(t=r.props.highlightCurrentRow,l=r.getComputeMaps().computeRowOpts,(l.value.isCurrent||t)&&_xeUtils.default.arrayEach(a.querySelectorAll(`.vxe-gantt-view--body-row[rowid="${r.getRowid(e)}"]`),e=>(0,_dom.addClass)(e,"row--current"))):_xeUtils.default.arrayEach(a.querySelectorAll(".vxe-gantt-view--body-row.row--current"),e=>(0,_dom.removeClass)(e,"row--current")))},handleUpdateHoverRow(e){var t=q.xeTable,l=i.value;t&&l&&(e?_xeUtils.default.arrayEach(l.querySelectorAll(`.vxe-gantt-view--body-row[rowid="${t.getRowid(e)}"]`),e=>(0,_dom.addClass)(e,"row--hover")):_xeUtils.default.arrayEach(l.querySelectorAll(".vxe-gantt-view--body-row.row--hover"),e=>(0,_dom.removeClass)(e,"row--hover")))},triggerHeaderScrollEvent(e){var{elemStore:t,inVirtualScroll:l,inBodyScroll:r,inFooterScroll:a}=q;l||r||a||(l=e.currentTarget,r=(0,_util.getRefElem)(t["main-body-scroll"]),a=o.value,r&&l&&(e=l.scrollLeft,q.inHeaderScroll=!0,(0,_dom.setScrollLeft)(a,e),(0,_dom.setScrollLeft)(r,e),u(0,0,0,l.scrollTop)))},triggerBodyScrollEvent(e){var t,{elemStore:l,inVirtualScroll:r,inHeaderScroll:a,inFooterScroll:i}=q;r||a||i||(r=e.currentTarget,a=(0,_util.getRefElem)(l["main-header-scroll"]),i=o.value,e=n.value,a&&r&&(l=r.scrollLeft,t=r.scrollTop,q.inBodyScroll=!0,(0,_dom.setScrollLeft)(i,l),(0,_dom.setScrollLeft)(a,l),(0,_dom.setScrollTop)(e,t),h(t),u(0,0,0,r.scrollTop)))},triggerFooterScrollEvent(e){var{inVirtualScroll:t,inHeaderScroll:l,inBodyScroll:r}=q;t||l||r||(t=e.currentTarget)&&(t.scrollLeft,u(0,0,0,t.scrollTop))},triggerVirtualScrollXEvent(e){var{elemStore:t,inHeaderScroll:l,inBodyScroll:r}=q;l||r||(l=e.currentTarget,r=(0,_util.getRefElem)(t["main-header-scroll"]),e=(0,_util.getRefElem)(t["main-body-scroll"]),l&&(t=l.scrollLeft,q.inVirtualScroll=!0,(0,_dom.setScrollLeft)(r,t),(0,_dom.setScrollLeft)(e,t),u(0,0,0,l.scrollTop)))},triggerVirtualScrollYEvent(e){var{elemStore:t,inHeaderScroll:l,inBodyScroll:r}=q;l||r||(l=e.currentTarget,r=(0,_util.getRefElem)(t["main-body-scroll"]),l&&(e=l.scrollTop,q.inVirtualScroll=!0,(0,_dom.setScrollTop)(r,e),h(e),u(0,0,0,0,l.scrollLeft)))},handleUpdateSXSpace(){let{scrollXLoad:t,scrollXWidth:l}=k,r=q.elemStore;["header","body","footer"].forEach(e=>{e=(0,_util.getRefElem)(r[`main-${e}-xSpace`]);e&&(e.style.width=t?l+"px":"")});var e=a.value;return e&&(e.style.width=l+"px"),d(),(0,_vue.nextTick)()},handleUpdateSYSpace:()=>{var e=q.elemStore,t=q.xeTable,l=(0,_util.getRefElem)(e["main-body-scroll"]),r=(0,_util.getRefElem)(e["main-body-table"]);let a=0,i=0,o=!1,s=(t&&(t=t.reactData,a=t.scrollYTop,i=t.scrollYHeight,o=t.isScrollYBig),i),n=a,u=0;l&&(u=l.clientHeight),o&&(n=l&&r&&l.scrollTop+u>=maxYHeight?maxYHeight-r.clientHeight:(maxYHeight-u)*(a/(i-u)),s=maxYHeight);t=(0,_util.getRefElem)(e["main-chart-wrapper"]),r&&(r.style.transform=`translate(${k.scrollXLeft||0}px, ${n}px)`),t&&(t.style.transform=`translate(${k.scrollXLeft||0}px, ${n}px)`),l=(0,_util.getRefElem)(e["main-body-ySpace"]),l&&(l.style.height=s?s+"px":""),r=c.value;return r&&(r.style.height=s?s+"px":""),k.scrollYTop=n,k.scrollYHeight=i,k.isScrollYBig=o,d(),(0,_vue.nextTick)().then(()=>{v()})},handleUpdateSYStatus(e){k.scrollYLoad=e}};let I=()=>{r()},p=(Object.assign(t,{refreshData(){return l(),r()},updateViewData(){var e=q.xeTable;return e&&(e=e.reactData.tableData,k.tableData=e),(0,_vue.nextTick)()},connectUpdate({$table:e}){return e&&(q.xeTable=e),(0,_vue.nextTick)()}},e),()=>(0,_vue.h)("div",{key:"vsx",ref:S,class:"vxe-gantt-view--scroll-x-virtual"},[(0,_vue.h)("div",{ref:T,class:"vxe-gantt-view--scroll-x-left-corner"}),(0,_vue.h)("div",{ref:H,class:"vxe-gantt-view--scroll-x-wrapper"},[(0,_vue.h)("div",{ref:o,class:"vxe-gantt-view--scroll-x-handle",onScroll:t.triggerVirtualScrollXEvent},[(0,_vue.h)("div",{ref:a,class:"vxe-gantt-view--scroll-x-space"})])]),(0,_vue.h)("div",{ref:E,class:"vxe-gantt-view--scroll-x-right-corner"})])),f=()=>(0,_vue.h)("div",{ref:b,class:"vxe-gantt-view--scroll-y-virtual"},[(0,_vue.h)("div",{ref:D,class:"vxe-gantt-view--scroll-y-top-corner"}),(0,_vue.h)("div",{ref:R,class:"vxe-gantt-view--scroll-y-wrapper"},[(0,_vue.h)("div",{ref:n,class:"vxe-gantt-view--scroll-y-handle",onScroll:t.triggerVirtualScrollYEvent},[(0,_vue.h)("div",{ref:c,class:"vxe-gantt-view--scroll-y-space"})])]),(0,_vue.h)("div",{ref:C,class:"vxe-gantt-view--scroll-y-bottom-corner"})]),g=()=>(0,_vue.h)("div",{class:"vxe-gantt-view--viewport-wrapper"},[(0,_vue.h)(_ganttHeader.default),(0,_vue.h)(_ganttBody.default),(0,_vue.h)(_ganttFooter.default)]),z=()=>{var e=w.value;return(0,_vue.h)("div",{class:"vxe-gantt-view--layout-wrapper"},e?[f(),g()]:[g(),f()])};let m=(0,_vue.ref)(0);return(0,_vue.watch)(()=>k.tableData,()=>{m.value++}),(0,_vue.watch)(()=>k.tableData.length,()=>{m.value++}),(0,_vue.watch)(m,()=>{l()}),(0,_vue.onMounted)(()=>{globalEvents.on(t,"resize",I)}),(0,_vue.onUnmounted)(()=>{globalEvents.off(t,"keydown"),_xeUtils.default.assign(q,createInternalData())}),t.renderVN=()=>{var{overflowX:e,overflowY:t,scrollXLoad:l,scrollYLoad:r}=k,a=y.value;return(0,_vue.h)("div",{ref:i,class:["vxe-gantt-view",{"is--scroll-y":t,"is--scroll-x":e,"is--virtual-x":l,"is--virtual-y":r}]},[(0,_vue.h)("div",{class:"vxe-gantt-view--render-wrapper"},a?[p(),z()]:[z(),p()]),(0,_vue.h)("div",{class:"vxe-gantt-view--render-vars"},[(0,_vue.h)("div",{ref:L,class:"vxe-gantt-view--column-info"})])])},(0,_vue.provide)("$xeGanttView",t),t},render(){return this.renderVN()}});