@workiom/frappe-gantt 1.0.8 → 1.0.9

package/dist/frappe-gantt.es.js

@@ -412,13 +412,13 @@ class q {
   }
   draw_label() {
     let t = this.x + this.$bar.getWidth() / 2;
-    this.task.thumbnail && (t = this.x + this.image_size + 5), f("text", {
+    this.task.thumbnail && (t = this.x + this.image_size + 5), this.$bar_label = f("text", {
       x: t,
       y: this.y + this.height / 2,
       innerHTML: this.task.name,
       class: "bar-label",
       append_to: this.bar_group
-    }), requestAnimationFrame(() => this.update_label_position());
+    }), this.task.color_text && (this.$bar_label.style.fill = this.task.color_text), requestAnimationFrame(() => this.update_label_position());
   }
   draw_thumbnail() {
     let t = 10, e = 2, i, s;

package/dist/frappe-gantt.umd.js

@@ -16,7 +16,7 @@
               L ${s} ${n}
               m -5 -5
               l 5 5
-              l -5 5`}}draw(){this.element=f("path",{d:this.path,"data-from":this.from_task.task.id,"data-to":this.to_task.task.id,class:this.is_critical?"arrow-critical":""})}update(){this.calculate_path(),this.element.setAttribute("d",this.path)}}class q{constructor(t,e){this.set_defaults(t,e),this.prepare_wrappers(),this.prepare_helpers(),this.refresh()}refresh(){this.bar_group.innerHTML="",this.handle_group.innerHTML="",this.task.custom_class?this.group.classList.add(this.task.custom_class):this.group.classList=["bar-wrapper"],this.prepare_values(),this.draw(),this.bind()}set_defaults(t,e){this.action_completed=!1,this.gantt=t,this.task=e,this.name=this.name||"",this.is_dragging=!1,this.is_hovering_bar=!1,this.is_hovering_icon=!1,this.add_icon_hide_timeout=null}prepare_wrappers(){this.group=f("g",{class:"bar-wrapper"+(this.task.custom_class?" "+this.task.custom_class:""),"data-id":this.task.id}),this.bar_group=f("g",{class:"bar-group",append_to:this.group}),this.handle_group=f("g",{class:"handle-group",append_to:this.group})}prepare_values(){this.invalid=this.task.invalid,this.height=this.gantt.options.bar_height,this.image_size=this.height-5,(!this.task._start||!(this.task._start instanceof Date))&&(this.task._start=new Date(this.task.start)),(!this.task._end||!(this.task._end instanceof Date))&&(this.task._end=new Date(this.task.end)),this.compute_x(),this.compute_y(),this.compute_duration(),this.corner_radius=this.gantt.options.bar_corner_radius,this.width=this.gantt.config.column_width*this.duration,(!this.task.progress||this.task.progress<0)&&(this.task.progress=0),this.task.progress>100&&(this.task.progress=100)}prepare_helpers(){SVGElement.prototype.getX=function(){return+this.getAttribute("x")},SVGElement.prototype.getY=function(){return+this.getAttribute("y")},SVGElement.prototype.getWidth=function(){return+this.getAttribute("width")},SVGElement.prototype.getHeight=function(){return+this.getAttribute("height")},SVGElement.prototype.getEndX=function(){return this.getX()+this.getWidth()}}prepare_expected_progress_values(){this.compute_expected_progress(),this.expected_progress_width=this.gantt.options.column_width*this.duration*(this.expected_progress/100)||0}draw(){this.draw_bar(),this.draw_progress_bar(),this.gantt.options.show_expected_progress&&(this.prepare_expected_progress_values(),this.draw_expected_progress_bar()),this.draw_label(),this.draw_resize_handles(),this.task.thumbnail&&this.draw_thumbnail(),this.gantt.options.task_add_icon_position&&this.draw_add_task_icon()}draw_bar(){this.$bar=f("rect",{x:this.x,y:this.y,width:this.width,height:this.height,rx:this.corner_radius,ry:this.corner_radius,class:"bar",append_to:this.bar_group}),this.task.color&&(this.$bar.style.fill=this.task.color),E(this.$bar,"width",0,this.width),this.invalid&&this.$bar.classList.add("bar-invalid")}draw_expected_progress_bar(){this.invalid||(this.$expected_bar_progress=f("rect",{x:this.x,y:this.y,width:this.expected_progress_width,height:this.height,rx:this.corner_radius,ry:this.corner_radius,class:"bar-expected-progress",append_to:this.bar_group}),E(this.$expected_bar_progress,"width",0,this.expected_progress_width))}draw_progress_bar(){if(this.invalid)return;this.progress_width=this.calculate_progress_width();let t=this.corner_radius;/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(t=this.corner_radius+2),this.$bar_progress=f("rect",{x:this.x,y:this.y,width:this.progress_width,height:this.height,rx:t,ry:t,class:"bar-progress",append_to:this.bar_group}),this.task.color_progress&&(this.$bar_progress.style.fill=this.task.color_progress);const e=c.diff(this.task._start,this.gantt.gantt_start,this.gantt.config.unit)/this.gantt.config.step*this.gantt.config.column_width;let i=this.gantt.create_el({classes:`date-range-highlight hide highlight-${this.task.id}`,width:this.width,left:e});this.$date_highlight=i,this.gantt.$lower_header.prepend(this.$date_highlight),E(this.$bar_progress,"width",0,this.progress_width)}calculate_progress_width(){const t=this.$bar.getWidth(),e=this.x+t,i=this.gantt.config.ignored_positions.reduce((h,d)=>h+(d>=this.x&&d<e),0)*this.gantt.config.column_width;let s=(t-i)*this.task.progress/100;const n=this.x+s,o=this.gantt.config.ignored_positions.reduce((h,d)=>h+(d>=this.x&&d<n),0)*this.gantt.config.column_width;s+=o;let a=this.gantt.get_ignored_region(this.x+s);for(;a.length;)s+=this.gantt.config.column_width,a=this.gantt.get_ignored_region(this.x+s);return this.progress_width=s,s}draw_label(){let t=this.x+this.$bar.getWidth()/2;this.task.thumbnail&&(t=this.x+this.image_size+5),f("text",{x:t,y:this.y+this.height/2,innerHTML:this.task.name,class:"bar-label",append_to:this.bar_group}),requestAnimationFrame(()=>this.update_label_position())}draw_thumbnail(){let t=10,e=2,i,s;i=f("defs",{append_to:this.bar_group}),f("rect",{id:"rect_"+this.task.id,x:this.x+t,y:this.y+e,width:this.image_size,height:this.image_size,rx:"15",class:"img_mask",append_to:i}),s=f("clipPath",{id:"clip_"+this.task.id,append_to:i}),f("use",{href:"#rect_"+this.task.id,append_to:s}),f("image",{x:this.x+t,y:this.y+e,width:this.image_size,height:this.image_size,class:"bar-img",href:this.task.thumbnail,clipPath:"clip_"+this.task.id,append_to:this.bar_group})}draw_add_task_icon(){this.icon_size=20,this.icon_padding=5;let i;if(this.gantt.options.task_add_icon_position==="before")i=this.x-20-5;else if(this.gantt.options.task_add_icon_position==="after")i=this.x+this.$bar.getWidth()+5;else return;const s=this.y+(this.height-20)/2;this.$add_icon_group=f("g",{class:"add-task-icon hide",append_to:this.handle_group}),this.$add_icon_circle=f("circle",{cx:i+20/2,cy:s+20/2,r:20/2,class:"add-task-icon-bg",append_to:this.$add_icon_group}),this.$add_icon_vertical=f("line",{x1:i+20/2,y1:s+5,x2:i+20/2,y2:s+20-5,class:"add-task-icon-plus",append_to:this.$add_icon_group}),this.$add_icon_horizontal=f("line",{x1:i+5,y1:s+20/2,x2:i+20-5,y2:s+20/2,class:"add-task-icon-plus",append_to:this.$add_icon_group}),u.on(this.$add_icon_group,"mousedown",n=>{n.stopPropagation()}),u.on(this.$add_icon_group,"mouseup",n=>{n.stopPropagation()}),u.on(this.$add_icon_group,"click",n=>{n.stopPropagation(),this.gantt.trigger_event("task_add",[this.task])}),u.on(this.$add_icon_group,"mouseenter",n=>{this.is_hovering_icon=!0,this.add_icon_hide_timeout&&(clearTimeout(this.add_icon_hide_timeout),this.add_icon_hide_timeout=null),this.$add_icon_group.classList.add("active"),this.$add_icon_group.classList.remove("hide"),n.stopPropagation()}),u.on(this.$add_icon_group,"mouseleave",()=>{this.is_hovering_icon=!1,this.$add_icon_group.classList.remove("active"),this.is_hovering_bar||this.$add_icon_group.classList.add("hide")})}draw_resize_handles(){if(this.invalid||this.gantt.options.readonly)return;const t=this.$bar,e=3;if(this.handles=[],this.gantt.options.readonly_dates||(this.handles.push(f("rect",{x:t.getEndX()-e/2,y:t.getY()+this.height/4,width:e,height:this.height/2,rx:2,ry:2,class:"handle right",append_to:this.handle_group})),this.handles.push(f("rect",{x:t.getX()-e/2,y:t.getY()+this.height/4,width:e,height:this.height/2,rx:2,ry:2,class:"handle left",append_to:this.handle_group}))),!this.gantt.options.readonly_progress){const i=this.$bar_progress;this.$handle_progress=f("circle",{cx:i.getEndX(),cy:i.getY()+i.getHeight()/2,r:4.5,class:"handle progress",append_to:this.handle_group}),this.handles.push(this.$handle_progress)}for(let i of this.handles)u.on(i,"mouseenter",()=>i.classList.add("active")),u.on(i,"mouseleave",()=>i.classList.remove("active"))}bind(){this.invalid||this.setup_click_event()}setup_click_event(){let t=this.task.id;u.on(this.group,"mouseover",s=>{this.gantt.trigger_event("hover",[this.task,s.screenX,s.screenY,s])}),this.gantt.options.popup_on==="click"&&u.on(this.group,"mouseup",s=>{const n=s.offsetX||s.layerX;if(this.$handle_progress){const o=+this.$handle_progress.getAttribute("cx");if(o>n-1&&o<n+1||this.gantt.bar_being_dragged)return}this.gantt.show_popup({x:s.offsetX||s.layerX,y:s.offsetY||s.layerY,task:this.task,target:this.$bar})});let e;u.on(this.group,"mouseenter",s=>{e=setTimeout(()=>{this.gantt.options.popup_on==="hover"&&this.gantt.show_popup({x:s.offsetX||s.layerX,y:s.offsetY||s.layerY,task:this.task,target:this.$bar}),this.gantt.$container.querySelector(`.highlight-${t}`).classList.remove("hide")},200),this.$add_icon_group&&(this.is_hovering_bar=!0,this.add_icon_hide_timeout&&(clearTimeout(this.add_icon_hide_timeout),this.add_icon_hide_timeout=null),this.is_dragging||this.$add_icon_group.classList.remove("hide"))}),u.on(this.group,"mouseleave",()=>{var s,n;clearTimeout(e),this.gantt.options.popup_on==="hover"&&((n=(s=this.gantt.popup)==null?void 0:s.hide)==null||n.call(s)),this.gantt.$container.querySelector(`.highlight-${t}`).classList.add("hide"),this.$add_icon_group&&(this.is_hovering_bar=!1,this.add_icon_hide_timeout&&clearTimeout(this.add_icon_hide_timeout),this.add_icon_hide_timeout=setTimeout(()=>{this.is_hovering_icon||this.$add_icon_group.classList.add("hide")},200))}),u.on(this.group,"mousedown",()=>{this.is_dragging=!0,this.hide_add_icon()}),u.on(this.group,"click",()=>{this.action_completed||this.gantt.bar_being_dragged||this.gantt.trigger_event("click",[this.task])}),u.on(this.group,"dblclick",s=>{this.action_completed||(this.group.classList.remove("active"),this.gantt.popup&&this.gantt.popup.parent.classList.remove("hide"),this.gantt.trigger_event("double_click",[this.task]))});let i=!1;u.on(this.group,"touchstart",s=>{if(!i)return i=!0,setTimeout(function(){i=!1},300),!1;s.preventDefault(),!this.action_completed&&(this.group.classList.remove("active"),this.gantt.popup&&this.gantt.popup.parent.classList.remove("hide"),this.gantt.trigger_event("double_click",[this.task]))})}update_bar_position({x:t=null,width:e=null}){const i=this.$bar;if(t){if(!this.validate_dependency_constraints(t,e))return;this.update_attr(i,"x",t),this.x=t,this.$date_highlight.style.left=t+"px"}e>0&&(this.update_attr(i,"width",e),this.$date_highlight.style.width=e+"px"),this.update_label_position(),this.update_handle_position(),this.update_add_icon_position(),this.date_changed(),this.compute_duration(),this.gantt.options.show_expected_progress&&this.update_expected_progressbar_position(),this.update_progressbar_position(),this.update_arrow_position()}validate_dependency_constraints(t,e=null){const i=this.task.dependencies_type||this.gantt.options.dependencies_type;if(i==="fixed")return this.task.dependencies.map(_=>this.gantt.get_bar(_).$bar.getX()).reduce((_,l)=>_&&t>=l,!0);const s=t/this.gantt.config.column_width,n=c.add(this.gantt.gantt_start,s*this.gantt.config.step,this.gantt.config.unit),a=(e||this.$bar.getWidth())/this.gantt.config.column_width,h=c.add(n,a*this.gantt.config.step,this.gantt.config.unit);for(const d of this.task.dependencies){const _=this.gantt.get_bar(d);if(!_)continue;const l=_.task;switch(i){case"finish-to-start":if(n<l._end)return!1;break;case"start-to-start":if(n<l._start)return!1;break;case"finish-to-finish":if(h<l._end)return!1;break;case"start-to-finish":if(h<l._start)return!1;break}}return!0}update_label_position_on_horizontal_scroll({x:t,sx:e}){const i=this.gantt.$container,s=this.group.querySelector(".bar-label"),n=this.group.querySelector(".bar-img")||"",o=this.bar_group.querySelector(".img_mask")||"";let a=this.$bar.getX()+this.$bar.getWidth(),h=s.getX()+t,d=n&&n.getX()+t||0,_=n&&n.getBBox().width+7||7,l=h+s.getBBox().width+7,p=e+i.clientWidth/2;s.classList.contains("big")||(l<a&&t>0&&l<p||h-_>this.$bar.getX()&&t<0&&l>p)&&(s.setAttribute("x",h),n&&(n.setAttribute("x",d),o.setAttribute("x",d)))}date_changed(){let t=!1;const{new_start_date:e,new_end_date:i}=this.compute_start_end_date();Number(this.task._start)!==Number(e)&&(t=!0,this.task._start=e),Number(this.task._end)!==Number(i)&&(t=!0,this.task._end=i),t&&this.gantt.trigger_event("date_change",[this.task,e,c.add(i,-1,"second")])}progress_changed(){this.task.progress=this.compute_progress(),this.gantt.trigger_event("progress_change",[this.task,this.task.progress])}set_action_completed(){this.action_completed=!0,setTimeout(()=>this.action_completed=!1,1e3),this.is_dragging=!1,this.$add_icon_group&&this.is_hovering_bar&&this.$add_icon_group.classList.remove("hide")}compute_start_end_date(){const t=this.$bar,e=t.getX()/this.gantt.config.column_width;let i=c.add(this.gantt.gantt_start,e*this.gantt.config.step,this.gantt.config.unit);const s=t.getWidth()/this.gantt.config.column_width,n=c.add(i,s*this.gantt.config.step,this.gantt.config.unit);return{new_start_date:i,new_end_date:n}}compute_progress(){this.progress_width=this.$bar_progress.getWidth(),this.x=this.$bar_progress.getBBox().x;const t=this.x+this.progress_width,e=this.progress_width-this.gantt.config.ignored_positions.reduce((s,n)=>s+(n>=this.x&&n<=t),0)*this.gantt.config.column_width;if(e<0)return 0;const i=this.$bar.getWidth()-this.ignored_duration_raw*this.gantt.config.column_width;return parseInt(e/i*100,10)}compute_expected_progress(){this.expected_progress=c.diff(c.today(),this.task._start,"hour")/this.gantt.config.step,this.expected_progress=(this.expected_progress<this.duration?this.expected_progress:this.duration)*100/this.duration}compute_x(){const{column_width:t}=this.gantt.config,e=this.task._start,i=this.gantt.gantt_start;let n=c.diff(e,i,this.gantt.config.unit)/this.gantt.config.step*t;this.x=n}compute_y(){this.y=this.gantt.config.header_height+this.gantt.options.padding/2+this.task._index*(this.height+this.gantt.options.padding)}compute_duration(){let t=0,e=0;for(let i=new Date(this.task._start);i<this.task._end;i.setDate(i.getDate()+1))e++,!this.gantt.config.ignored_dates.find(s=>s.getTime()===i.getTime())&&(!this.gantt.config.ignored_function||!this.gantt.config.ignored_function(i))&&t++;this.task.actual_duration=t,this.task.ignored_duration=e-t,this.duration=c.convert_scales(e+"d",this.gantt.config.unit)/this.gantt.config.step,this.actual_duration_raw=c.convert_scales(t+"d",this.gantt.config.unit)/this.gantt.config.step,this.ignored_duration_raw=this.duration-this.actual_duration_raw}update_attr(t,e,i){return i=+i,isNaN(i)||t.setAttribute(e,i),t}update_expected_progressbar_position(){this.invalid||(this.$expected_bar_progress.setAttribute("x",this.$bar.getX()),this.compute_expected_progress(),this.$expected_bar_progress.setAttribute("width",this.gantt.config.column_width*this.actual_duration_raw*(this.expected_progress/100)||0))}update_progressbar_position(){this.invalid||this.gantt.options.readonly||(this.$bar_progress.setAttribute("x",this.$bar.getX()),this.$bar_progress.setAttribute("width",this.calculate_progress_width()))}update_label_position(){const t=this.bar_group.querySelector(".img_mask")||"",e=this.$bar,i=this.group.querySelector(".bar-label"),s=this.group.querySelector(".bar-img");let n=5,o=this.image_size+10;const a=i.getBBox().width,h=e.getWidth();a>h?(i.classList.add("big"),s?(s.setAttribute("x",e.getEndX()+n),t.setAttribute("x",e.getEndX()+n),i.setAttribute("x",e.getEndX()+o)):i.setAttribute("x",e.getEndX()+n)):(i.classList.remove("big"),s?(s.setAttribute("x",e.getX()+n),t.setAttribute("x",e.getX()+n),i.setAttribute("x",e.getX()+h/2+o)):i.setAttribute("x",e.getX()+h/2-a/2))}update_handle_position(){if(this.invalid||this.gantt.options.readonly)return;const t=this.$bar;this.handle_group.querySelector(".handle.left").setAttribute("x",t.getX()),this.handle_group.querySelector(".handle.right").setAttribute("x",t.getEndX());const e=this.group.querySelector(".handle.progress");e&&e.setAttribute("cx",this.$bar_progress.getEndX())}update_add_icon_position(){if(!this.$add_icon_group)return;const t=this.icon_size,e=this.icon_padding;let i;if(this.gantt.options.task_add_icon_position==="before")i=this.x-t-e;else if(this.gantt.options.task_add_icon_position==="after")i=this.x+this.$bar.getWidth()+e;else return;const s=this.y+(this.height-t)/2;this.$add_icon_circle.setAttribute("cx",i+t/2),this.$add_icon_circle.setAttribute("cy",s+t/2),this.$add_icon_vertical.setAttribute("x1",i+t/2),this.$add_icon_vertical.setAttribute("y1",s+5),this.$add_icon_vertical.setAttribute("x2",i+t/2),this.$add_icon_vertical.setAttribute("y2",s+t-5),this.$add_icon_horizontal.setAttribute("x1",i+5),this.$add_icon_horizontal.setAttribute("y1",s+t/2),this.$add_icon_horizontal.setAttribute("x2",i+t-5),this.$add_icon_horizontal.setAttribute("y2",s+t/2)}hide_add_icon(){this.$add_icon_group&&this.$add_icon_group.classList.add("hide")}update_arrow_position(){this.arrows=this.arrows||[];for(let t of this.arrows)t.update()}}class F{constructor(t,e,i){this.parent=t,this.popup_func=e,this.gantt=i,this.make()}make(){this.parent.innerHTML=`
+              l -5 5`}}draw(){this.element=f("path",{d:this.path,"data-from":this.from_task.task.id,"data-to":this.to_task.task.id,class:this.is_critical?"arrow-critical":""})}update(){this.calculate_path(),this.element.setAttribute("d",this.path)}}class q{constructor(t,e){this.set_defaults(t,e),this.prepare_wrappers(),this.prepare_helpers(),this.refresh()}refresh(){this.bar_group.innerHTML="",this.handle_group.innerHTML="",this.task.custom_class?this.group.classList.add(this.task.custom_class):this.group.classList=["bar-wrapper"],this.prepare_values(),this.draw(),this.bind()}set_defaults(t,e){this.action_completed=!1,this.gantt=t,this.task=e,this.name=this.name||"",this.is_dragging=!1,this.is_hovering_bar=!1,this.is_hovering_icon=!1,this.add_icon_hide_timeout=null}prepare_wrappers(){this.group=f("g",{class:"bar-wrapper"+(this.task.custom_class?" "+this.task.custom_class:""),"data-id":this.task.id}),this.bar_group=f("g",{class:"bar-group",append_to:this.group}),this.handle_group=f("g",{class:"handle-group",append_to:this.group})}prepare_values(){this.invalid=this.task.invalid,this.height=this.gantt.options.bar_height,this.image_size=this.height-5,(!this.task._start||!(this.task._start instanceof Date))&&(this.task._start=new Date(this.task.start)),(!this.task._end||!(this.task._end instanceof Date))&&(this.task._end=new Date(this.task.end)),this.compute_x(),this.compute_y(),this.compute_duration(),this.corner_radius=this.gantt.options.bar_corner_radius,this.width=this.gantt.config.column_width*this.duration,(!this.task.progress||this.task.progress<0)&&(this.task.progress=0),this.task.progress>100&&(this.task.progress=100)}prepare_helpers(){SVGElement.prototype.getX=function(){return+this.getAttribute("x")},SVGElement.prototype.getY=function(){return+this.getAttribute("y")},SVGElement.prototype.getWidth=function(){return+this.getAttribute("width")},SVGElement.prototype.getHeight=function(){return+this.getAttribute("height")},SVGElement.prototype.getEndX=function(){return this.getX()+this.getWidth()}}prepare_expected_progress_values(){this.compute_expected_progress(),this.expected_progress_width=this.gantt.options.column_width*this.duration*(this.expected_progress/100)||0}draw(){this.draw_bar(),this.draw_progress_bar(),this.gantt.options.show_expected_progress&&(this.prepare_expected_progress_values(),this.draw_expected_progress_bar()),this.draw_label(),this.draw_resize_handles(),this.task.thumbnail&&this.draw_thumbnail(),this.gantt.options.task_add_icon_position&&this.draw_add_task_icon()}draw_bar(){this.$bar=f("rect",{x:this.x,y:this.y,width:this.width,height:this.height,rx:this.corner_radius,ry:this.corner_radius,class:"bar",append_to:this.bar_group}),this.task.color&&(this.$bar.style.fill=this.task.color),E(this.$bar,"width",0,this.width),this.invalid&&this.$bar.classList.add("bar-invalid")}draw_expected_progress_bar(){this.invalid||(this.$expected_bar_progress=f("rect",{x:this.x,y:this.y,width:this.expected_progress_width,height:this.height,rx:this.corner_radius,ry:this.corner_radius,class:"bar-expected-progress",append_to:this.bar_group}),E(this.$expected_bar_progress,"width",0,this.expected_progress_width))}draw_progress_bar(){if(this.invalid)return;this.progress_width=this.calculate_progress_width();let t=this.corner_radius;/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(t=this.corner_radius+2),this.$bar_progress=f("rect",{x:this.x,y:this.y,width:this.progress_width,height:this.height,rx:t,ry:t,class:"bar-progress",append_to:this.bar_group}),this.task.color_progress&&(this.$bar_progress.style.fill=this.task.color_progress);const e=c.diff(this.task._start,this.gantt.gantt_start,this.gantt.config.unit)/this.gantt.config.step*this.gantt.config.column_width;let i=this.gantt.create_el({classes:`date-range-highlight hide highlight-${this.task.id}`,width:this.width,left:e});this.$date_highlight=i,this.gantt.$lower_header.prepend(this.$date_highlight),E(this.$bar_progress,"width",0,this.progress_width)}calculate_progress_width(){const t=this.$bar.getWidth(),e=this.x+t,i=this.gantt.config.ignored_positions.reduce((h,d)=>h+(d>=this.x&&d<e),0)*this.gantt.config.column_width;let s=(t-i)*this.task.progress/100;const n=this.x+s,o=this.gantt.config.ignored_positions.reduce((h,d)=>h+(d>=this.x&&d<n),0)*this.gantt.config.column_width;s+=o;let a=this.gantt.get_ignored_region(this.x+s);for(;a.length;)s+=this.gantt.config.column_width,a=this.gantt.get_ignored_region(this.x+s);return this.progress_width=s,s}draw_label(){let t=this.x+this.$bar.getWidth()/2;this.task.thumbnail&&(t=this.x+this.image_size+5),this.$bar_label=f("text",{x:t,y:this.y+this.height/2,innerHTML:this.task.name,class:"bar-label",append_to:this.bar_group}),this.task.color_text&&(this.$bar_label.style.fill=this.task.color_text),requestAnimationFrame(()=>this.update_label_position())}draw_thumbnail(){let t=10,e=2,i,s;i=f("defs",{append_to:this.bar_group}),f("rect",{id:"rect_"+this.task.id,x:this.x+t,y:this.y+e,width:this.image_size,height:this.image_size,rx:"15",class:"img_mask",append_to:i}),s=f("clipPath",{id:"clip_"+this.task.id,append_to:i}),f("use",{href:"#rect_"+this.task.id,append_to:s}),f("image",{x:this.x+t,y:this.y+e,width:this.image_size,height:this.image_size,class:"bar-img",href:this.task.thumbnail,clipPath:"clip_"+this.task.id,append_to:this.bar_group})}draw_add_task_icon(){this.icon_size=20,this.icon_padding=5;let i;if(this.gantt.options.task_add_icon_position==="before")i=this.x-20-5;else if(this.gantt.options.task_add_icon_position==="after")i=this.x+this.$bar.getWidth()+5;else return;const s=this.y+(this.height-20)/2;this.$add_icon_group=f("g",{class:"add-task-icon hide",append_to:this.handle_group}),this.$add_icon_circle=f("circle",{cx:i+20/2,cy:s+20/2,r:20/2,class:"add-task-icon-bg",append_to:this.$add_icon_group}),this.$add_icon_vertical=f("line",{x1:i+20/2,y1:s+5,x2:i+20/2,y2:s+20-5,class:"add-task-icon-plus",append_to:this.$add_icon_group}),this.$add_icon_horizontal=f("line",{x1:i+5,y1:s+20/2,x2:i+20-5,y2:s+20/2,class:"add-task-icon-plus",append_to:this.$add_icon_group}),u.on(this.$add_icon_group,"mousedown",n=>{n.stopPropagation()}),u.on(this.$add_icon_group,"mouseup",n=>{n.stopPropagation()}),u.on(this.$add_icon_group,"click",n=>{n.stopPropagation(),this.gantt.trigger_event("task_add",[this.task])}),u.on(this.$add_icon_group,"mouseenter",n=>{this.is_hovering_icon=!0,this.add_icon_hide_timeout&&(clearTimeout(this.add_icon_hide_timeout),this.add_icon_hide_timeout=null),this.$add_icon_group.classList.add("active"),this.$add_icon_group.classList.remove("hide"),n.stopPropagation()}),u.on(this.$add_icon_group,"mouseleave",()=>{this.is_hovering_icon=!1,this.$add_icon_group.classList.remove("active"),this.is_hovering_bar||this.$add_icon_group.classList.add("hide")})}draw_resize_handles(){if(this.invalid||this.gantt.options.readonly)return;const t=this.$bar,e=3;if(this.handles=[],this.gantt.options.readonly_dates||(this.handles.push(f("rect",{x:t.getEndX()-e/2,y:t.getY()+this.height/4,width:e,height:this.height/2,rx:2,ry:2,class:"handle right",append_to:this.handle_group})),this.handles.push(f("rect",{x:t.getX()-e/2,y:t.getY()+this.height/4,width:e,height:this.height/2,rx:2,ry:2,class:"handle left",append_to:this.handle_group}))),!this.gantt.options.readonly_progress){const i=this.$bar_progress;this.$handle_progress=f("circle",{cx:i.getEndX(),cy:i.getY()+i.getHeight()/2,r:4.5,class:"handle progress",append_to:this.handle_group}),this.handles.push(this.$handle_progress)}for(let i of this.handles)u.on(i,"mouseenter",()=>i.classList.add("active")),u.on(i,"mouseleave",()=>i.classList.remove("active"))}bind(){this.invalid||this.setup_click_event()}setup_click_event(){let t=this.task.id;u.on(this.group,"mouseover",s=>{this.gantt.trigger_event("hover",[this.task,s.screenX,s.screenY,s])}),this.gantt.options.popup_on==="click"&&u.on(this.group,"mouseup",s=>{const n=s.offsetX||s.layerX;if(this.$handle_progress){const o=+this.$handle_progress.getAttribute("cx");if(o>n-1&&o<n+1||this.gantt.bar_being_dragged)return}this.gantt.show_popup({x:s.offsetX||s.layerX,y:s.offsetY||s.layerY,task:this.task,target:this.$bar})});let e;u.on(this.group,"mouseenter",s=>{e=setTimeout(()=>{this.gantt.options.popup_on==="hover"&&this.gantt.show_popup({x:s.offsetX||s.layerX,y:s.offsetY||s.layerY,task:this.task,target:this.$bar}),this.gantt.$container.querySelector(`.highlight-${t}`).classList.remove("hide")},200),this.$add_icon_group&&(this.is_hovering_bar=!0,this.add_icon_hide_timeout&&(clearTimeout(this.add_icon_hide_timeout),this.add_icon_hide_timeout=null),this.is_dragging||this.$add_icon_group.classList.remove("hide"))}),u.on(this.group,"mouseleave",()=>{var s,n;clearTimeout(e),this.gantt.options.popup_on==="hover"&&((n=(s=this.gantt.popup)==null?void 0:s.hide)==null||n.call(s)),this.gantt.$container.querySelector(`.highlight-${t}`).classList.add("hide"),this.$add_icon_group&&(this.is_hovering_bar=!1,this.add_icon_hide_timeout&&clearTimeout(this.add_icon_hide_timeout),this.add_icon_hide_timeout=setTimeout(()=>{this.is_hovering_icon||this.$add_icon_group.classList.add("hide")},200))}),u.on(this.group,"mousedown",()=>{this.is_dragging=!0,this.hide_add_icon()}),u.on(this.group,"click",()=>{this.action_completed||this.gantt.bar_being_dragged||this.gantt.trigger_event("click",[this.task])}),u.on(this.group,"dblclick",s=>{this.action_completed||(this.group.classList.remove("active"),this.gantt.popup&&this.gantt.popup.parent.classList.remove("hide"),this.gantt.trigger_event("double_click",[this.task]))});let i=!1;u.on(this.group,"touchstart",s=>{if(!i)return i=!0,setTimeout(function(){i=!1},300),!1;s.preventDefault(),!this.action_completed&&(this.group.classList.remove("active"),this.gantt.popup&&this.gantt.popup.parent.classList.remove("hide"),this.gantt.trigger_event("double_click",[this.task]))})}update_bar_position({x:t=null,width:e=null}){const i=this.$bar;if(t){if(!this.validate_dependency_constraints(t,e))return;this.update_attr(i,"x",t),this.x=t,this.$date_highlight.style.left=t+"px"}e>0&&(this.update_attr(i,"width",e),this.$date_highlight.style.width=e+"px"),this.update_label_position(),this.update_handle_position(),this.update_add_icon_position(),this.date_changed(),this.compute_duration(),this.gantt.options.show_expected_progress&&this.update_expected_progressbar_position(),this.update_progressbar_position(),this.update_arrow_position()}validate_dependency_constraints(t,e=null){const i=this.task.dependencies_type||this.gantt.options.dependencies_type;if(i==="fixed")return this.task.dependencies.map(_=>this.gantt.get_bar(_).$bar.getX()).reduce((_,l)=>_&&t>=l,!0);const s=t/this.gantt.config.column_width,n=c.add(this.gantt.gantt_start,s*this.gantt.config.step,this.gantt.config.unit),a=(e||this.$bar.getWidth())/this.gantt.config.column_width,h=c.add(n,a*this.gantt.config.step,this.gantt.config.unit);for(const d of this.task.dependencies){const _=this.gantt.get_bar(d);if(!_)continue;const l=_.task;switch(i){case"finish-to-start":if(n<l._end)return!1;break;case"start-to-start":if(n<l._start)return!1;break;case"finish-to-finish":if(h<l._end)return!1;break;case"start-to-finish":if(h<l._start)return!1;break}}return!0}update_label_position_on_horizontal_scroll({x:t,sx:e}){const i=this.gantt.$container,s=this.group.querySelector(".bar-label"),n=this.group.querySelector(".bar-img")||"",o=this.bar_group.querySelector(".img_mask")||"";let a=this.$bar.getX()+this.$bar.getWidth(),h=s.getX()+t,d=n&&n.getX()+t||0,_=n&&n.getBBox().width+7||7,l=h+s.getBBox().width+7,p=e+i.clientWidth/2;s.classList.contains("big")||(l<a&&t>0&&l<p||h-_>this.$bar.getX()&&t<0&&l>p)&&(s.setAttribute("x",h),n&&(n.setAttribute("x",d),o.setAttribute("x",d)))}date_changed(){let t=!1;const{new_start_date:e,new_end_date:i}=this.compute_start_end_date();Number(this.task._start)!==Number(e)&&(t=!0,this.task._start=e),Number(this.task._end)!==Number(i)&&(t=!0,this.task._end=i),t&&this.gantt.trigger_event("date_change",[this.task,e,c.add(i,-1,"second")])}progress_changed(){this.task.progress=this.compute_progress(),this.gantt.trigger_event("progress_change",[this.task,this.task.progress])}set_action_completed(){this.action_completed=!0,setTimeout(()=>this.action_completed=!1,1e3),this.is_dragging=!1,this.$add_icon_group&&this.is_hovering_bar&&this.$add_icon_group.classList.remove("hide")}compute_start_end_date(){const t=this.$bar,e=t.getX()/this.gantt.config.column_width;let i=c.add(this.gantt.gantt_start,e*this.gantt.config.step,this.gantt.config.unit);const s=t.getWidth()/this.gantt.config.column_width,n=c.add(i,s*this.gantt.config.step,this.gantt.config.unit);return{new_start_date:i,new_end_date:n}}compute_progress(){this.progress_width=this.$bar_progress.getWidth(),this.x=this.$bar_progress.getBBox().x;const t=this.x+this.progress_width,e=this.progress_width-this.gantt.config.ignored_positions.reduce((s,n)=>s+(n>=this.x&&n<=t),0)*this.gantt.config.column_width;if(e<0)return 0;const i=this.$bar.getWidth()-this.ignored_duration_raw*this.gantt.config.column_width;return parseInt(e/i*100,10)}compute_expected_progress(){this.expected_progress=c.diff(c.today(),this.task._start,"hour")/this.gantt.config.step,this.expected_progress=(this.expected_progress<this.duration?this.expected_progress:this.duration)*100/this.duration}compute_x(){const{column_width:t}=this.gantt.config,e=this.task._start,i=this.gantt.gantt_start;let n=c.diff(e,i,this.gantt.config.unit)/this.gantt.config.step*t;this.x=n}compute_y(){this.y=this.gantt.config.header_height+this.gantt.options.padding/2+this.task._index*(this.height+this.gantt.options.padding)}compute_duration(){let t=0,e=0;for(let i=new Date(this.task._start);i<this.task._end;i.setDate(i.getDate()+1))e++,!this.gantt.config.ignored_dates.find(s=>s.getTime()===i.getTime())&&(!this.gantt.config.ignored_function||!this.gantt.config.ignored_function(i))&&t++;this.task.actual_duration=t,this.task.ignored_duration=e-t,this.duration=c.convert_scales(e+"d",this.gantt.config.unit)/this.gantt.config.step,this.actual_duration_raw=c.convert_scales(t+"d",this.gantt.config.unit)/this.gantt.config.step,this.ignored_duration_raw=this.duration-this.actual_duration_raw}update_attr(t,e,i){return i=+i,isNaN(i)||t.setAttribute(e,i),t}update_expected_progressbar_position(){this.invalid||(this.$expected_bar_progress.setAttribute("x",this.$bar.getX()),this.compute_expected_progress(),this.$expected_bar_progress.setAttribute("width",this.gantt.config.column_width*this.actual_duration_raw*(this.expected_progress/100)||0))}update_progressbar_position(){this.invalid||this.gantt.options.readonly||(this.$bar_progress.setAttribute("x",this.$bar.getX()),this.$bar_progress.setAttribute("width",this.calculate_progress_width()))}update_label_position(){const t=this.bar_group.querySelector(".img_mask")||"",e=this.$bar,i=this.group.querySelector(".bar-label"),s=this.group.querySelector(".bar-img");let n=5,o=this.image_size+10;const a=i.getBBox().width,h=e.getWidth();a>h?(i.classList.add("big"),s?(s.setAttribute("x",e.getEndX()+n),t.setAttribute("x",e.getEndX()+n),i.setAttribute("x",e.getEndX()+o)):i.setAttribute("x",e.getEndX()+n)):(i.classList.remove("big"),s?(s.setAttribute("x",e.getX()+n),t.setAttribute("x",e.getX()+n),i.setAttribute("x",e.getX()+h/2+o)):i.setAttribute("x",e.getX()+h/2-a/2))}update_handle_position(){if(this.invalid||this.gantt.options.readonly)return;const t=this.$bar;this.handle_group.querySelector(".handle.left").setAttribute("x",t.getX()),this.handle_group.querySelector(".handle.right").setAttribute("x",t.getEndX());const e=this.group.querySelector(".handle.progress");e&&e.setAttribute("cx",this.$bar_progress.getEndX())}update_add_icon_position(){if(!this.$add_icon_group)return;const t=this.icon_size,e=this.icon_padding;let i;if(this.gantt.options.task_add_icon_position==="before")i=this.x-t-e;else if(this.gantt.options.task_add_icon_position==="after")i=this.x+this.$bar.getWidth()+e;else return;const s=this.y+(this.height-t)/2;this.$add_icon_circle.setAttribute("cx",i+t/2),this.$add_icon_circle.setAttribute("cy",s+t/2),this.$add_icon_vertical.setAttribute("x1",i+t/2),this.$add_icon_vertical.setAttribute("y1",s+5),this.$add_icon_vertical.setAttribute("x2",i+t/2),this.$add_icon_vertical.setAttribute("y2",s+t-5),this.$add_icon_horizontal.setAttribute("x1",i+5),this.$add_icon_horizontal.setAttribute("y1",s+t/2),this.$add_icon_horizontal.setAttribute("x2",i+t-5),this.$add_icon_horizontal.setAttribute("y2",s+t/2)}hide_add_icon(){this.$add_icon_group&&this.$add_icon_group.classList.add("hide")}update_arrow_position(){this.arrows=this.arrows||[];for(let t of this.arrows)t.update()}}class F{constructor(t,e,i){this.parent=t,this.popup_func=e,this.gantt=i,this.make()}make(){this.parent.innerHTML=`
             <div class="title"></div>
             <div class="subtitle"></div>
             <div class="details"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@workiom/frappe-gantt",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "description": "A simple, modern, interactive gantt library for the web",
     "main": "src/index.js",
     "type": "module",

package/src/bar.js

@@ -232,13 +232,14 @@ export default class Bar {
             x_coord = this.x + this.image_size + 5;
         }
 
-        createSVG('text', {
+        this.$bar_label = createSVG('text', {
             x: x_coord,
             y: this.y + this.height / 2,
             innerHTML: this.task.name,
             class: 'bar-label',
             append_to: this.bar_group,
         });
+        if (this.task.color_text) this.$bar_label.style.fill = this.task.color_text;
         // labels get BBox in the next tick
         requestAnimationFrame(() => this.update_label_position());
     }