UNPKG

gantt-schedule-timeline-calendar

Version:

Gantt, Schedule, Timeline, Calendar components all in one. [gantt, timeline, schedule, scheduler, calendar, booking, gantt chart, reservation, javascript gantt, javascript timeline, javascript schedule, javascript scheduler, javascript calendar, javascrip

38 lines 12.3 kB
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self).DependencyLines={})}(this,(function(t){"use strict"; /** * Gantt-Schedule-Timeline-Calendar helpers * * @copyright NEURONET - Rafal Pospiech * @author Rafal Pospiech <neuronet.io@gmail.com> * @module gantt-schedule-timeline-calendar * @link https://github.com/neuronetio/gantt-schedule-timeline-calendar * @link https://gantt-schedule-timeline-calendar.neuronet.io * @version 3.40.7 * @released 2025-05-27 * @license SEE LICENSE IN LICENSE FILE */const i="gstc";function e(t,e=""){let n=`${i}__${t}`;return t===i&&(n=i),e?`${n} ${n}--${e.replace(":","-")}`:n} /** * DependencyLines plugin * * @copyright NEURONET - Rafal Pospiech * @author Rafal Pospiech <neuronet.io@gmail.com> * @module gantt-schedule-timeline-calendar * @link https://github.com/neuronetio/gantt-schedule-timeline-calendar * @link https://gantt-schedule-timeline-calendar.neuronet.io * @version 3.40.7 * @released 2025-05-27 * @license SEE LICENSE IN LICENSE FILE */const n="DependencyLines",s="config.plugin.DependencyLines",o="config.slots.chart-timeline-items.outer",p=e("chart-timeline-dependency-lines-lines"),a=e("chart-timeline-dependency-lines-lines-line"),h=e("chart-timeline-dependency-lines-points"),d=e("chart-timeline-dependency-lines-points-point");class r{constructor(t,i){this.onDestroy=[],this.vido=t,this.api=this.vido.api,this.state=this.vido.state;const e=this.vido.html`<div class=${d+"--left"}></div>`,n=this.vido.html`<div class=${d+"--right"}></div>`;this.data=function(t){return Object.assign(Object.assign({},t),{lines:[]})}(function(t,i,e){const n=Object.assign(Object.assign({},function(t,i){return{type:"smooth",onLines:[],onLine:[],leftPoint:{content:t,width:10,height:10},rightPoint:{content:i,width:10,height:10}}}(i,e)),t);return t.leftPoint&&(n.leftPoint=Object.assign(Object.assign({},n.leftPoint),t.leftPoint)),t.rightPoint&&(n.rightPoint=Object.assign(Object.assign({},n.rightPoint),t.rightPoint)),n}(i,e,n)),this.PluginDependencyLinesSlot=this.PluginDependencyLinesSlot.bind(this),this.generateLines=this.generateLines.bind(this),this.destroy=this.destroy.bind(this),this.updateData(),this.onDestroy.push(this.state.subscribe(s,(t=>{this.data=t}))),this.state.update(o,(t=>(t.includes(this.PluginDependencyLinesSlot)||t.push(this.PluginDependencyLinesSlot),t))),this.onDestroy.push(this.state.subscribeAll(["$data.chart.items","$data.list.rowsHeight","$data.scroll","$data.chart.time.leftGlobal","$data.chart.time.rightPx"],this.generateLines,{group:!0}))}destroy(){this.state.update(o,(t=>t.filter((t=>t!==this.PluginDependencyLinesSlot)))),this.onDestroy.forEach((t=>t())),this.api.pluginDestroyed(n)}updateData(){this.state.update(s,this.data),this.vido.update()}setStraightPoints(t){const{topOffset:i,leftOffset:e,fromItemData:n,toItemData:s,fromRowData:o,toRowData:p}=t;if(!this.api.parentsExpanded(o.id)||!this.api.parentsExpanded(p.id))return;const a=this.api.getRowViewTop(o.id),h=this.api.getRowViewTop(p.id);t.points.push({x:n.position.right+e,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:a,type:"M",content:this.data.leftPoint.content}),t.points.push({x:s.position.left-e,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:h,type:"L",content:this.data.rightPoint.content})}setSquareAltPoints(t){const{topOffset:i,leftOffset:e,fromItemData:n,toItemData:s,fromRowData:o,toRowData:p}=t;if(!this.api.parentsExpanded(o.id)&&!this.api.parentsExpanded(p.id))return;const a=(s.position.left-n.position.right)/2,h=n.position.right+a,d=(s.position.viewTop-n.position.viewTop)/2,r=n.position.viewTop+d,l=this.api.getRowViewTop(o.id),c=this.api.getRowViewTop(p.id);t.points.push({x:n.position.right+e,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:l,type:"M",content:this.data.leftPoint.content}),s.position.left<n.position.right?(t.points.push({x:n.position.right+e+10,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:l,type:"L",content:null}),t.points.push({x:n.position.right+e+10,y:this.api.parentsExpanded(o.id)?r+i:l,type:"L",content:null})):t.points.push({x:h,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:l,type:"L",content:null}),t.points.push({x:h,y:this.api.parentsExpanded(o.id)?r+i:l,type:"L",content:null}),this.api.parentsExpanded(p.id)?(s.position.left<n.position.right?(t.points.push({x:s.position.left-e-10,y:this.api.parentsExpanded(o.id)?r+i:l,type:"L",content:null}),t.points.push({x:s.position.left-e-10,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:l,type:"L",content:null})):t.points.push({x:h,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:l,type:"L",content:null}),t.points.push({x:s.position.left-e,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:c,type:"L",content:this.data.rightPoint.content})):t.points.push({x:h,y:c,type:"L",content:this.data.rightPoint.content})}setSquarePoints(t){const{topOffset:i,leftOffset:e,fromItemData:n,toItemData:s,fromRowData:o,toRowData:p}=t;if(!this.api.parentsExpanded(o.id)&&!this.api.parentsExpanded(p.id))return;const a=this.api.getRowViewTop(o.id),h=this.api.getRowViewTop(p.id);t.points.push({x:n.position.right+e,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:a,type:"M",content:this.data.leftPoint.content}),n.position.viewTop!==s.position.viewTop?s.position.left<n.position.right?(t.points.push({x:n.position.right+e+10,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:a,type:"L",content:null}),s.position.viewTop>n.position.viewTop?(t.points.push({x:n.position.right+e+10,y:this.api.parentsExpanded(o.id)?a+o.outerHeight:a,type:"L",content:null}),t.points.push({x:s.position.left+e+10,y:this.api.parentsExpanded(o.id)?a+o.outerHeight:a,type:"L",content:null}),t.points.push({x:s.position.left+e+10,y:this.api.parentsExpanded(p.id)?s.position.viewTop:h,type:"L",content:this.data.rightPoint.content})):(t.points.push({x:n.position.right+e+10,y:a,type:"L",content:null}),t.points.push({x:s.position.left+e+10,y:a,type:"L",content:null}),t.points.push({x:s.position.left+e+10,y:this.api.parentsExpanded(p.id)?s.position.viewTop+s.actualHeight:h,type:"L",content:this.data.rightPoint.content}))):(t.points.push({x:s.position.left+10,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:a,type:"L",content:null}),s.position.viewTop>n.position.viewTop?t.points.push({x:s.position.left+10,y:this.api.parentsExpanded(p.id)?s.position.viewTop:h,type:"L",content:this.data.rightPoint.content}):t.points.push({x:s.position.left+10,y:this.api.parentsExpanded(p.id)?s.position.viewTop+s.actualHeight:h,type:"L",content:this.data.rightPoint.content})):t.points.push({x:s.position.left-e,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:h,type:"L",content:this.data.rightPoint.content})}setSmoothPoints(t){const{topOffset:i,leftOffset:e,fromItemData:n,toItemData:s,fromRowData:o,toRowData:p}=t;if(!this.api.parentsExpanded(o.id)&&!this.api.parentsExpanded(p.id))return;const a=this.api.getRowViewTop(o.id),h=this.api.getRowViewTop(p.id);if(t.points.push({x:n.position.right+e,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:a,type:"M",content:this.data.leftPoint.content}),n.position.viewTop===s.position.viewTop)return void t.points.push({x:s.position.left-e,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:h,type:"L",content:this.data.rightPoint.content});const d=(s.position.left-n.position.right)/2,r=n.position.right+d;if(n.position.right<=s.position.left)t.points.push({x:r,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:a,type:"C",content:null}),t.points.push({x:r,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:h,type:"",content:null}),t.points.push({x:s.position.left-e,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:h,type:"",content:this.data.rightPoint.content});else{const d=(s.position.viewTop-n.position.viewTop)/2,l=n.position.viewTop+d+i;t.points.push({x:n.position.right+20,y:this.api.parentsExpanded(o.id)?n.position.viewTop+i:a,type:"C",content:null}),t.points.push({x:n.position.right+40,y:l,type:"",content:null}),t.points.push({x:r,y:l,type:"",content:null}),t.points.push({x:s.position.left+e-20,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:h,type:"S",content:null}),t.points.push({x:s.position.left+e,y:this.api.parentsExpanded(p.id)?s.position.viewTop+i:h,type:"",content:this.data.rightPoint.content})}}setPoints(t){const{fromItemData:i,toItemData:e,fromRowData:n,toRowData:s,toItem:o,fromItem:p}=t,a=this.state.get("$data.chart.time");switch(this.api.calculateItemPosition(i.id,i,n,a,p),this.api.calculateItemPosition(e.id,e,s,a,o),t.type){case"straight":this.setStraightPoints(t);break;case"square":this.setSquarePoints(t);break;case"smooth":this.setSmoothPoints(t);break;case"square-alt":this.setSquareAltPoints(t)}}generateLines(){const t=[],i=this.api.getAllItems(),e=this.api.getRowsData(),n=this.api.getItemsData(),s=this.state.get("$data.chart.time"),o=this.state.get("$data.chart.dimensions"),p=this.state.get("$data.scroll.vertical"),h=Math.round(s.rightPx-s.leftPx),d=this.data.type;for(const r in i){const l=i[r];if(!l.dependant)continue;if(!l.dependant.length)continue;const c=e[l.rowId],u=n[r],f=l;if(u&&c)for(const g of l.dependant){const l=i[g],y=l,x=e[l.rowId],w=n[g];if(!w||!x)continue;if(s.calculatedZoomMode){if(f.time.end<s.leftGlobal&&y.time.start>s.rightGlobal)continue;if(y.time.end<s.leftGlobal&&f.time.start>s.rightGlobal)continue;if(f.time.start>s.rightGlobal&&y.time.start>s.rightGlobal)continue;if(f.time.end<s.leftGlobal&&y.time.end<s.leftGlobal)continue}if(this.api.calculateItemPosition(r,u,c,s),this.api.calculateItemPosition(g,w,x,s),-1===u.width&&-1===w.width)continue;const m=u.actualHeight/2,v=0;let $={x:0,y:0,width:h,height:o.height-p.preciseOffset,topOffset:m,leftOffset:v,points:[],type:d,fromItemData:u,toItemData:w,fromItem:f,toItem:y,fromRowData:c,toRowData:x,className:a};for(const t of this.data.onLine)$=t($);this.setPoints($),t.push($)}}this.data.lines=t;for(const t of this.data.onLines)this.data.lines=t(this.data.lines);this.updateData()}PluginDependencyLinesSlot(t){const{html:i,svg:e,state:n,onDestroy:s,StyleMap:o}=t,a=new o({});s(n.subscribeAll(["$data.chart.time","$data.chart.dimensions","$data.scroll.vertical.preciseOffset"],(()=>{const t=n.get("$data.chart.time");a.style.width=Math.round(t.rightPx-t.leftPx)+"px";const i=n.get("$data.chart.dimensions"),e=n.get("$data.scroll.vertical.preciseOffset");a.style.height=i.innerHeight-e+"px"})));const r=t=>{if(!t.points.length)return"";const i=t.points.slice(),e=i.shift();return[`${e.type} ${e.x} ${e.y}`,[...i.map((t=>`${t.type} ${t.x} ${t.y}`))]].join(" ")},l=(t,e)=>{const n=`left:${t.x-(0===e?this.data.leftPoint.width/2:this.data.rightPoint.width/2)}px;top:${t.y-(0===e?this.data.leftPoint.height/2:this.data.rightPoint.height/2)}px;width:${0===e?this.data.leftPoint.width:this.data.rightPoint.width}px;height:${0===e?this.data.leftPoint.width:this.data.rightPoint.width}px`;return t.content?i`<div class=${d+" "+d+"--"+this.data.type} style=${n}> ${t.content} </div>`:null},c=t=>e`<svg width=${t.width} height=${t.height} xmlns="http://www.w3.org/2000/svg"> <path d=${(t=>{switch(t.type){case"straight":return(t=>{const i=t.points;return[`${i[0].type} ${i[0].x} ${i[0].y}`,`${i[1].type} ${i[1].x} ${i[1].y}`].join(" ")})(t);case"square":case"square-alt":return r(t);case"smooth":return(t=>{if(!t.points.length)return"";const i=t.points.slice(),e=i.shift();return[`${e.type} ${e.x} ${e.y}`,[...i.map((t=>`${t.type} ${t.x} ${t.y}`))]].join(" ")})(t)}})(t)} /> </svg>`;return t=>i`<div class="${p}">${this.data.lines.map((t=>(t=>i`<div class=${t.className} style="left: ${t.x}px; top: ${t.y}px; width: ${t.width}px; height: ${t.height}px;" > ${c(t)} </div>`)(t)))}</div> ${t} <div class="${h}" style=${a.directive()}> ${this.data.lines.map((t=>(t=>t.points.map(((t,i)=>l(t,i))))(t)))} </div>`}}t.Plugin=function(t={}){return function(i){const e=i.api,o=i.state.get(s);o&&(t=i.api.mergeDeep({},t,o));const p=new r(i,t);return e.pluginInitialized(n),p.destroy}},Object.defineProperty(t,"__esModule",{value:!0})}));