gantt-source_management 3.37.5

package/dist/plugins/item-resizing.esm.min.d.ts

@@ -0,0 +1,102 @@
+/**
+ * ItemResizing plugin
+ *
+ * @header  --gstc--header--
+ */
+import type { Vido, htmlResult, Item, DataChartTime, DataItems, DataScrollHorizontal } from '../gstc';
+import type DeepState from 'deep-state-observer';
+import type { Dayjs } from 'dayjs';
+export interface Handle {
+    width?: number;
+    outsideWidth?: number;
+    horizontalMargin?: number;
+    outsideHorizontalMargin?: number;
+    verticalMargin?: number;
+    outside?: boolean;
+    onlyWhenSelected?: boolean;
+}
+export interface SnapArg {
+    item: Item;
+    time: DataChartTime;
+    vido: Vido;
+    movement: Movement;
+}
+export interface SnapStartArg extends SnapArg {
+    startTime: Dayjs;
+}
+export interface SnapEndArg extends SnapArg {
+    endTime: Dayjs;
+}
+export interface Movement {
+    px: number;
+    time: number;
+}
+export interface SnapToTime {
+    start?: (snapStartArgs: SnapStartArg) => Dayjs;
+    end?: (snapEndArgs: SnapEndArg) => Dayjs;
+}
+export interface BeforeAfterInitialItems {
+    initial: Item[];
+    before: Item[];
+    after: Item[];
+}
+export interface OnArg {
+    items: BeforeAfterInitialItems;
+    addedDependantIds: string[];
+    selectedIds: string[];
+    vido: Vido;
+    state: DeepState;
+    time: DataChartTime;
+}
+export interface Events {
+    onStart?: (onArg: OnArg) => Item[];
+    onResize?: (onArg: OnArg) => Item[];
+    onEnd?: (onArg: OnArg) => Item[];
+}
+export interface AutoScroll {
+    speed?: number;
+    edgeThreshold?: number;
+}
+export interface HandleContentObject {
+    left: htmlResult;
+    right: htmlResult;
+}
+export type HandleContentFunctionArgument = {
+    item: Item;
+    vido: Vido;
+};
+export type HandleContentFunction = (arg: HandleContentFunctionArgument) => HandleContentObject;
+export type HandleContent = HandleContentObject | HandleContentFunction | htmlResult;
+export interface Options {
+    enabled?: boolean;
+    dependant?: boolean;
+    debug?: boolean;
+    handle?: Handle;
+    content?: HandleContent;
+    bodyClass?: string;
+    bodyClassLeft?: string;
+    bodyClassRight?: string;
+    events?: Events;
+    snapToTime?: SnapToTime;
+    outsideWidthThreshold?: number;
+    autoScroll?: AutoScroll;
+    ignoreMissingDates?: boolean;
+    allowItemsToGoOutsideTheArea?: boolean;
+    threshold?: number;
+    shouldMuteNotNeededMethods?: boolean;
+}
+export type State = 'start' | 'resize' | 'end' | '';
+export interface PluginData extends Options {
+    leftIsMoving: boolean;
+    rightIsMoving: boolean;
+    initialItems: Item[];
+    initialItemsData: DataItems;
+    addedDependantIds: string[];
+    selectedIds: string[];
+    initialHorizontalScroll: DataScrollHorizontal;
+    state: State;
+    movement: Movement;
+    thresholdReached: boolean;
+}
+export declare function Plugin(options?: Options): (vidoInstance: Vido) => () => void;
+//# sourceMappingURL=item-resizing.d.ts.map

package/dist/plugins/item-resizing.esm.min.js

@@ -0,0 +1,37 @@
+/**
+ * TimelinePointer 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.37.5
+ * @released  2024-07-19
+ * @license   SEE LICENSE IN LICENSE FILE
+ */
+const t="chart-timeline-items-row-item",e="gstc";
+/**
+ * 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.37.5
+ * @released  2024-07-19
+ * @license   SEE LICENSE IN LICENSE FILE
+ */function i(t,i=""){let s=`${e}__${t}`;return t===e&&(s=e),i?`${s} ${s}--${i.replace(":","-")}`:s}
+/**
+ * ItemResizing 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.37.5
+ * @released  2024-07-19
+ * @license   SEE LICENSE IN LICENSE FILE
+ */const s=i("chart-timeline-items-row-item-resizing-handle-content-line");const a="ItemResizing",n=`config.plugin.${a}`,o="chart-timeline-items-row-item-resizing-handle",d=i(o),h="--left",l="--right";class r{constructor(t,e){this.onDestroy=[],this.scrollWaiting=0,this.vido=t,this.state=t.state,this.api=t.api,this.data=function(t={}){const e={onStart:({items:t})=>t.after,onResize:({items:t})=>t.after,onEnd:({items:t})=>t.after},i={start:({startTime:t,time:e,vido:i})=>i.api.time.findOrCreateMainDateAtTime(t.valueOf(),e).leftGlobalDate,end:({endTime:t,time:e,vido:i})=>i.api.time.findOrCreateMainDateAtTime(t.valueOf(),e).rightGlobalDate},s={width:18,horizontalMargin:0,verticalMargin:0,outside:!1,outsideWidth:14,outsideHorizontalMargin:6,onlyWhenSelected:!0},a=Object.assign({enabled:!0,dependant:!0,addedDependantIds:[],selectedIds:[],debug:!1,state:"",content:null,bodyClass:"gstc-items-resizing",bodyClassLeft:"gstc-items-resizing-left",bodyClassRight:"gstc-items-resizing-right",outsideWidthThreshold:100,movement:{px:0,time:0},initialItems:[],initialItemsData:{},initialHorizontalScroll:null,leftIsMoving:!1,rightIsMoving:!1,handle:Object.assign({},s),events:Object.assign({},e),snapToTime:Object.assign({},i),autoScroll:{speed:1,edgeThreshold:60},ignoreMissingDates:!0,allowItemsToGoOutsideTheArea:!0,threshold:10,thresholdReached:!1,shouldMuteNotNeededMethods:!0},t);return t.snapToTime&&(a.snapToTime=Object.assign(Object.assign({},i),t.snapToTime)),t.events&&(a.events=Object.assign(Object.assign({},e),t.events)),t.handle&&(a.handle=Object.assign(Object.assign({},s),t.handle)),t.autoScroll&&(a.autoScroll=Object.assign(Object.assign({},a.autoScroll),t.autoScroll)),a}(e),this.html=t.html,this.data.content||(this.data.content={left:this.html`<div class=${s}></div><div class=${s}></div>`,right:this.html`<div class=${s}></div><div class=${s}></div>`}),this.PluginItemResizingInnerSlot=this.PluginItemResizingInnerSlot.bind(this),this.PluginItemResizingOuterSlot=this.PluginItemResizingOuterSlot.bind(this),this.onRightPointerDown=this.onRightPointerDown.bind(this),this.onRightPointerMove=this.onRightPointerMove.bind(this),this.onRightPointerUp=this.onRightPointerUp.bind(this),this.onLeftPointerDown=this.onLeftPointerDown.bind(this),this.onLeftPointerMove=this.onLeftPointerMove.bind(this),this.onLeftPointerUp=this.onLeftPointerUp.bind(this),this.destroy=this.destroy.bind(this),this.updateData(),this.onDestroy.push(this.state.subscribe("$data.elements.chart-timeline",(t=>this.timelineElement=t))),this.onDestroy.push(this.state.subscribe(n,(t=>{t.enabled?document.body.classList.add(t.bodyClass):document.body.classList.remove(t.bodyClass),this.data=t}))),this.onTimelinePointerDown=this.onTimelinePointerDown.bind(this),this.onTimelinePointerMove=this.onTimelinePointerMove.bind(this),this.onTimelinePointerUp=this.onTimelinePointerUp.bind(this),this.api.plugins.TimelinePointer.addPointerListener("move",this.onTimelinePointerMove),this.api.plugins.TimelinePointer.addPointerListener("down",this.onTimelinePointerDown),this.api.plugins.TimelinePointer.addPointerListener("up",this.onTimelinePointerUp),this.state.update("config.slots.chart-timeline-items-row-item.inner",(t=>(t.includes(this.PluginItemResizingInnerSlot)||t.push(this.PluginItemResizingInnerSlot),t))),this.state.update("config.slots.chart-timeline-items-row-item.outer",(t=>(t.includes(this.PluginItemResizingOuterSlot)||t.push(this.PluginItemResizingOuterSlot),t)))}destroy(){this.onDestroy.forEach((t=>t())),this.api.plugins.TimelinePointer.removePointerListener("move",this.onTimelinePointerMove),this.api.plugins.TimelinePointer.removePointerListener("down",this.onTimelinePointerDown),this.api.plugins.TimelinePointer.removePointerListener("up",this.onTimelinePointerUp),this.state.update("config.slots.chart-timeline-items-row-item.inner",(t=>t.filter((t=>t!==this.PluginItemResizingInnerSlot)))),this.state.update("config.slots.chart-timeline-items-row-item.outer",(t=>t.filter((t=>t!==this.PluginItemResizingOuterSlot)))),this.api.pluginDestroyed(a)}updateData(){this.state.update(n,this.data)}setUpClasses(t=!1){this.leftClassName=this.api.getClass(o),this.leftClassName+=" "+this.leftClassName+h,this.rightClassName=this.api.getClass(o),this.rightClassName+=" "+this.rightClassName+l,t&&(this.leftClassName+=` ${this.api.getClass(o)}--left-outside`,this.rightClassName+=` ${this.api.getClass(o)}--right-outside`)}getSelectedItems(){return this.state.get(`config.plugin.Selection.selected.${t}`).map((t=>this.api.mergeDeep({},this.api.getItem(t))))}getSelectedItemsData(t){const e={};for(const i of t)e[i.id]=this.api.mergeDeep({},this.api.getItemData(i.id));return e}updateRightStyleMap(t,e){const i=this.api.getItemData(t.id);return e.style.top="0px",this.data.handle.outside||i.actualWidth<this.data.outsideWidthThreshold?(e.style.position="absolute",e.style.left=i.position.actualRight+this.data.handle.outsideHorizontalMargin+"px",e.style.width=this.data.handle.outsideWidth+"px",e.style.top=i.position.actualRowTop+"px",this.setUpClasses(!0)):(e.style.position="static",e.style.width=this.data.handle.width+"px",this.setUpClasses(!1)),e.style.height=i.actualHeight-2*this.data.handle.verticalMargin+"px",i.outOfView.right?e.style.display="none":e.style.display="flex",e}updateLeftStyleMap(t,e){const i=this.api.getItemData(t.id);return e.style.top="0px",this.data.handle.outside||i.actualWidth<this.data.outsideWidthThreshold?(e.style.position="absolute",e.style.left=i.position.actualLeft-(this.data.handle.outsideWidth+this.data.handle.outsideHorizontalMargin)+"px",e.style.width=this.data.handle.outsideWidth+"px",e.style.top=i.position.actualRowTop+"px",this.setUpClasses(!0)):(e.style.position="static",e.style.left=this.data.handle.horizontalMargin+"px",e.style.width=this.data.handle.width+"px",this.setUpClasses(!1)),e.style.height=i.actualHeight-2*this.data.handle.verticalMargin+"px",i.outOfView.left?e.style.display="none":e.style.display="flex",e}getEventArgument(t){const e=this.api.getAllItems(),i=[];for(const s of t)i.push(this.api.mergeDeep({},e[s.id]));return{items:{initial:this.data.initialItems,before:i,after:t},addedDependantIds:this.data.addedDependantIds,selectedIds:this.data.selectedIds,vido:this.vido,state:this.state,time:this.state.get("$data.chart.time")}}getDependantItems(t){const e=[],i=this.api.getItemsData();for(const s of t)for(const t of i[s.id].dependant)e.includes(t)||e.push(t);const s=this.state.get("config.chart.items");return e.map((t=>s[t])).map((t=>this.api.mergeDeep({},t)))}dispatchEvent(t,e,i=null){"onStart"===t&&this.data.shouldMuteNotNeededMethods&&(this.api.muteMethod("fixOverlapped"),this.api.muteMethod("fullReload"),this.api.muteMethod("recalculateRowPercents"),this.api.muteMethod("getLastPageRowsHeight"),this.api.muteMethod("calculateVerticalScrollArea"),this.api.muteMethod("heightChange"),this.api.muteMethod("calculateRowsHeight"),this.api.muteMethod("updateVisibleItemsListener"),this.api.muteMethod("prepareExpanded"),0===this.data.autoScroll.speed&&0===this.data.autoScroll.speed&&(this.api.muteMethod("generateVisibleRowsAndItems"),this.api.muteMethod("calculateVisibleRowsHeights"),this.api.muteMethod("prepareExpanded"))),"onEnd"===t&&this.data.shouldMuteNotNeededMethods&&(this.api.unmuteMethod("fixOverlapped"),this.api.unmuteMethod("heightChange"),this.api.unmuteMethod("calculateVerticalScrollArea"),this.api.unmuteMethod("getLastPageRowsHeight"),this.api.unmuteMethod("recalculateRowPercents"),this.api.unmuteMethod("fullReload"),this.api.unmuteMethod("calculateRowsHeight"),this.api.unmuteMethod("updateVisibleItemsListener"),this.api.unmuteMethod("prepareExpanded"),0===this.data.autoScroll.speed&&0===this.data.autoScroll.speed&&(this.api.unmuteMethod("generateVisibleRowsAndItems"),this.api.unmuteMethod("calculateVisibleRowsHeights"),this.api.unmuteMethod("prepareExpanded"))),e=e.map((t=>this.api.mergeDeep({},t)));const s=this.data.events[t](this.getEventArgument(e));let a=this.state.multi(!0);const n=this.state.get("config.chart.items");for(const t of s){let e=!1;const s=n[t.id];t.time.start===s.time.start&&t.time.end===s.time.end||(e=!0,a=a.update(`config.chart.items.${t.id}.time`,t.time)),i&&e&&(a=a.update(`$data.chart.items.${t.id}`,this.api.mergeDeep({},i[t.id])))}a.done(),"onEnd"===t&&this.api.main.partialReload(!1)}getItemsForDiff(){const t=this.getSelectedItems()[0],e=this.data.initialItems.find((e=>e.id===t.id));return{modified:t,original:e}}onTimelinePointerDown(e){this.data.enabled&&(e.targetType!==t||this.api.plugins.TimelinePointer.isLocked("down")||this.onPointerDown(e))}onTimelinePointerMove(e){this.data.enabled&&e.targetType===t&&"item-resizing"===this.api.plugins.TimelinePointer.isLocked("move")&&this.onPointerMove(e)}onTimelinePointerUp(e){this.data.enabled&&e.targetType===t&&"item-resizing"===this.api.plugins.TimelinePointer.isLocked("up")&&this.onPointerUp(e)}onPointerDown(t){const e=t.originalEvent.target.closest("."+d);if(e&&!this.api.plugins.TimelinePointer.isLocked("down")){if(this.api.plugins.TimelinePointer.lock("down","item-resizing"),this.api.plugins.TimelinePointer.lock("move","item-resizing"),this.api.plugins.TimelinePointer.lock("up","item-resizing"),t.originalEvent.preventDefault(),t.originalEvent.stopPropagation(),this.data.dependant){const t=this.getSelectedItems();this.data.selectedIds=t.map((t=>t.id));const e=this.getDependantItems(t).filter((t=>!this.data.selectedIds.includes(t.id)));this.data.addedDependantIds=e.map((t=>t.id)),this.data.initialItems=[...t,...e]}else this.data.initialItems=this.getSelectedItems(),this.data.addedDependantIds=[],this.data.selectedIds=this.data.initialItems.map((t=>t.id));this.data.initialItemsData=this.getSelectedItemsData(this.data.initialItems),this.data.initialHorizontalScroll=this.api.mergeDeep({},this.state.get("$data.scroll.horizontal")),this.data.thresholdReached=!1,""!==this.data.state&&"end"!==this.data.state||(this.data.state="resize"),e.classList.contains(d+h)&&this.onLeftPointerDown(),e.classList.contains(d+l)&&this.onRightPointerDown(),this.dispatchEvent("onStart",this.data.initialItems)}}onLeftPointerDown(){this.data.enabled&&(document.body.classList.add(this.data.bodyClassLeft),this.data.leftIsMoving=!0,this.updateData())}onRightPointerDown(){this.data.enabled&&(document.body.classList.add(this.data.bodyClassRight),this.data.rightIsMoving=!0,this.updateData())}scrollLeft(){if(!this.data.autoScroll.speed)return;if(this.state.get("config.chart.time.calculatedZoomMode"))return;this.scrollWaiting++;const t=this.state.get("config.scroll.horizontal");if(this.data.autoScroll.speed<0){if(this.scrollWaiting-1<Math.abs(this.data.autoScroll.speed))return;const e=this.api.getScrollLeft();t.byPixels?this.api.setScrollLeft(e.absolutePosPx-120*t.multiplier):this.api.setScrollLeft(e.dataIndex-1)}else if(this.data.autoScroll.speed>0){const e=this.api.getScrollLeft();t.byPixels?this.api.setScrollLeft(e.absolutePosPx-120*this.data.autoScroll.speed*t.multiplier):this.api.setScrollLeft(e.dataIndex-this.data.autoScroll.speed)}this.scrollWaiting=0}scrollRight(){if(!this.data.autoScroll.speed)return;if(this.state.get("config.chart.time.calculatedZoomMode"))return;this.scrollWaiting++;const t=this.state.get("config.scroll.horizontal");if(this.data.autoScroll.speed<0){if(this.scrollWaiting-1<Math.abs(this.data.autoScroll.speed))return;const e=this.api.getScrollLeft();t.byPixels?this.api.setScrollLeft(e.absolutePosPx+120*t.multiplier):this.api.setScrollLeft(e.dataIndex+1)}else if(this.data.autoScroll.speed>0){const e=this.api.getScrollLeft();t.byPixels?this.api.setScrollLeft(e.absolutePosPx+120*this.data.autoScroll.speed*t.multiplier):this.api.setScrollLeft(e.dataIndex+this.data.autoScroll.speed)}this.scrollWaiting=0}autoScroll(t){if(!this.timelineElement)return;const e=t.currentPosition.x,i=this.timelineElement.getBoundingClientRect().width-2;e<this.data.autoScroll.edgeThreshold?this.scrollLeft():e>i-this.data.autoScroll.edgeThreshold&&this.scrollRight()}onPointerMove(t){if(!this.data.enabled)return;const{original:e,modified:i}=this.getItemsForDiff();e&&(this.data.movement={px:t.movement.x,time:i.time.start-e.time.start},Math.abs(t.movement.x)>=this.data.threshold&&(this.data.thresholdReached=!0),"resize"!==this.data.state&&"start"!==this.data.state||(this.data.state="resize"),t.movement.x&&this.data.thresholdReached&&this.autoScroll(t),this.data.thresholdReached&&(this.data.leftIsMoving&&this.onLeftPointerMove(t),this.data.rightIsMoving&&this.onRightPointerMove(t)))}onLeftPointerMove(t){if(!this.data.enabled||!this.data.leftIsMoving)return;const e=this.getSelectedItems(),i={},s=this.state.get("$data.chart.time"),{original:a,modified:n}=this.getItemsForDiff(),o=this.data.movement={px:t.movement.x,time:n.time.start-a.time.start},d=this.api.time.date(this.api.time.getTimeFromOffsetPx(t.initialPosition.x,!0,s)),h=this.data.snapToTime.start({startTime:d,item:e[0],time:s,movement:o,vido:this.vido}),l=this.api.time.date(this.api.time.getTimeFromOffsetPx(t.currentPosition.x,!0,s)),r=this.api.time.getDatesDiffPx(h,l,s,!0);for(let t=0,a=e.length;t<a;t++){const a=e[t],n=this.api.mergeDeep({},this.api.getItemData(a.id));let d=this.api.mergeDeep({},this.data.initialItemsData[a.id]).position.left+r;d>n.position.right-a.minWidth&&(d=n.position.right-a.minWidth);const h=this.api.time.getTimeFromOffsetPx(d,!0,s),l=this.data.snapToTime.start({startTime:this.api.time.date(h),item:a,time:s,movement:o,vido:this.vido});a.time.start=l.valueOf(),n.time.startDate=l;if((a.time.start<s.from||a.time.end>s.to)&&("function"==typeof s.format.periodIncrement||!this.data.allowItemsToGoOutsideTheArea)){const t=this.api.getItem(a.id);a.time.start=t.time.start,a.time.end=t.time.end,n.time.startDate=this.api.time.date(a.time.start),n.time.endDate=this.api.time.date(a.time.end)}i[a.id]=n}this.dispatchEvent("onResize",e,i),this.updateData()}getItemsToMove(){let t,e,i=[];if(this.data.dependant){const s=this.getSelectedItems();e=s.map((t=>t.id));const a=this.getDependantItems(s).filter((t=>!e.includes(t.id)));i=a.map((t=>t.id)),t=[...s,...a]}else t=this.getSelectedItems();return{itemsToMove:t,dependantIds:i}}onRightPointerMove(t){if(!this.data.enabled||!this.data.rightIsMoving)return;const{itemsToMove:e,dependantIds:i}=this.getItemsToMove(),s={},a=this.state.get("$data.chart.time"),{original:n,modified:o}=this.getItemsForDiff(),d=this.data.movement={px:t.movement.x,time:o.time.start-n.time.start},h=this.api.time.date(this.api.time.getTimeFromOffsetPx(t.initialPosition.x,!0,a)),l=this.data.snapToTime.end({endTime:h,item:null,time:a,movement:d,vido:this.vido}),r=this.api.time.date(this.api.time.getTimeFromOffsetPx(t.currentPosition.x,!0,a)),m=this.api.time.getDatesDiffPx(l,r,a,!0);for(let t=0,n=e.length;t<n;t++){const n=e[t],o=this.api.mergeDeep({},this.api.getItemData(n.id)),h=this.api.mergeDeep({},this.data.initialItemsData[n.id]),l=i.includes(n.id);let r=h.position.left+h.timeWidth+m;!l&&r<o.position.left+n.minWidth&&(r=o.position.left+n.minWidth);const p=this.api.time.getTimeFromOffsetPx(r,!0,a);let c=this.api.time.date(p);if(l||(c=this.data.snapToTime.end({endTime:this.api.time.date(p),item:n,time:a,movement:d,vido:this.vido})),l){const t=this.data.initialItems.find((t=>t.dependant.includes(h.id))),e=this.data.initialItemsData[t.id],i=s[e.id],d=this.api.time.getDatesDiffMs(e.time.endDate,i.time.endDate,a,!0);let l=-this.api.time.getDSTDiffForLevel(a.level,e.time.endDate.valueOf(),h.time.startDate.valueOf(),a),r=this.api.time.addTimeFromDates(h.time.startDate.valueOf(),d+l,a);l=this.api.time.getDSTDiffForLevel(a.level,i.time.endDate.valueOf(),r,a),r+=l;const m=this.api.time.date(r),p=m.valueOf(),u=this.api.time.getViewOffsetPxFromDates(m,!1,a);let g=-this.api.time.getDSTDiffForLevel(a.level,h.time.startDate.valueOf(),h.time.endDate.valueOf(),a);const f=u+h.timeWidth;let v;const P=h.time.endDate.valueOf()-h.time.startDate.valueOf();v=this.data.ignoreMissingDates?this.api.time.date(this.api.time.getTimeFromOffsetPx(f,!0,a)):this.api.time.date(m.valueOf()+P),g+=this.api.time.getDSTDiffForLevel(a.level,p,v.valueOf(),a),v=v.add(g,"ms"),c=v,n.time.start=m.valueOf(),o.time.startDate=m}n.time.end=c.valueOf(),o.time.endDate=c;if((n.time.start<a.from||n.time.end>a.to)&&("function"==typeof a.format.periodIncrement||!this.data.allowItemsToGoOutsideTheArea)){const t=this.api.getItem(n.id);n.time.start=t.time.start,n.time.end=t.time.end,o.time.startDate=this.api.time.date(n.time.start),o.time.endDate=this.api.time.date(n.time.end)}s[n.id]=o}this.dispatchEvent("onResize",e,s),this.updateData()}onEnd(){const{itemsToMove:t}=this.getItemsToMove();this.dispatchEvent("onEnd",t)}onPointerUp(t){"resize"===this.data.state&&(this.data.state="end"),this.onLeftPointerUp(),this.onRightPointerUp(),this.onEnd(),this.updateData(),this.api.plugins.TimelinePointer.unlock("down"),this.api.plugins.TimelinePointer.unlock("move"),this.api.plugins.TimelinePointer.unlock("up")}onLeftPointerUp(){document.body.classList.remove(this.data.bodyClassLeft),this.data.enabled&&this.data.leftIsMoving&&(this.data.leftIsMoving=!1,this.updateData())}onRightPointerUp(){document.body.classList.remove(this.data.bodyClassRight),this.data.enabled&&this.data.rightIsMoving&&(this.data.rightIsMoving=!1)}PluginItemResizingInnerSlot(t,e){let i,s,a;const n=new t.StyleMap({}),o=new t.StyleMap({});return t.onChange((d=>{if(!(e=d)||!e.item)return;const h=e.item;if(!h)return;const l=this.api.getItemData(h.id);if(!l)return;let r;i=!l.detached,this.data.handle.onlyWhenSelected&&(i=i&&l.selected),i=i&&!(this.data.handle.outside||l.actualWidth<this.data.outsideWidthThreshold),this.updateRightStyleMap(h,o),this.updateLeftStyleMap(h,n),r="function"==typeof this.data.content?this.data.content({item:h,vido:t}):"object"!=typeof this.data.content||"left"in this.data.content?this.data.content:{left:this.data.content,right:this.data.content},s=this.html`<div class=${this.leftClassName} data-gstcid=${e.item.id} style=${n.directive()}>${r.left}</div>`,a=this.html`<div class=${this.rightClassName} data-gstcid=${e.item.id} style=${o.directive()}>${r.right}</div>`,t.update()})),t=>this.html`${i?s:null}${t}${i?a:null}`}PluginItemResizingOuterSlot(e,i){let s,a,n;const o=new e.StyleMap({}),d=new e.StyleMap({});return e.onChange((h=>{if(!(i=h)||!i.item)return;const l=i.item;if(!l)return;const r=this.api.getItemData(l.id);if(!r)return;let m;s=!r.detached,this.data.handle.onlyWhenSelected&&(s=s&&r.selected),s=s&&(this.data.handle.outside||r.actualWidth<this.data.outsideWidthThreshold),this.updateRightStyleMap(l,d),this.updateLeftStyleMap(l,o),m="function"==typeof this.data.content?this.data.content({item:l,vido:e}):"object"!=typeof this.data.content||"left"in this.data.content?this.data.content:{left:this.data.content,right:this.data.content},a=this.html`<div class=${this.leftClassName} data-type=${t} data-gstcid=${i.item.id} style=${o.directive()}>${m.left}</div>`,n=this.html`<div class=${this.rightClassName} data-type=${t} data-gstcid=${i.item.id} style=${d.directive()}>${m.right}</div>`,e.update()})),t=>this.html`${s?a:null}${t}${s?n:null}`}}function m(t={}){return function(e){const i=e.api;if(!i.isPluginInitialized("TimelinePointer"))throw new Error("TimelinePointer plugin must be initialized before ItemResizing plugin.");if(!i.isPluginInitialized("Selection"))throw new Error("Selection plugin must be initialized before ItemResizing plugin.");if(i.isPluginInitialized("ItemMovement"))throw new Error("ItemResizing plugin must be initialized before ItemMovement plugin.");const s=e.state.get(n);s&&(t=e.api.mergeDeep({},t,s));const o=new r(e,t);return i.pluginInitialized(a),o.destroy}}export{m as Plugin};

package/dist/plugins/item-resizing.umd.min.d.ts

@@ -0,0 +1,102 @@
+/**
+ * ItemResizing plugin
+ *
+ * @header  --gstc--header--
+ */
+import type { Vido, htmlResult, Item, DataChartTime, DataItems, DataScrollHorizontal } from '../gstc';
+import type DeepState from 'deep-state-observer';
+import type { Dayjs } from 'dayjs';
+export interface Handle {
+    width?: number;
+    outsideWidth?: number;
+    horizontalMargin?: number;
+    outsideHorizontalMargin?: number;
+    verticalMargin?: number;
+    outside?: boolean;
+    onlyWhenSelected?: boolean;
+}
+export interface SnapArg {
+    item: Item;
+    time: DataChartTime;
+    vido: Vido;
+    movement: Movement;
+}
+export interface SnapStartArg extends SnapArg {
+    startTime: Dayjs;
+}
+export interface SnapEndArg extends SnapArg {
+    endTime: Dayjs;
+}
+export interface Movement {
+    px: number;
+    time: number;
+}
+export interface SnapToTime {
+    start?: (snapStartArgs: SnapStartArg) => Dayjs;
+    end?: (snapEndArgs: SnapEndArg) => Dayjs;
+}
+export interface BeforeAfterInitialItems {
+    initial: Item[];
+    before: Item[];
+    after: Item[];
+}
+export interface OnArg {
+    items: BeforeAfterInitialItems;
+    addedDependantIds: string[];
+    selectedIds: string[];
+    vido: Vido;
+    state: DeepState;
+    time: DataChartTime;
+}
+export interface Events {
+    onStart?: (onArg: OnArg) => Item[];
+    onResize?: (onArg: OnArg) => Item[];
+    onEnd?: (onArg: OnArg) => Item[];
+}
+export interface AutoScroll {
+    speed?: number;
+    edgeThreshold?: number;
+}
+export interface HandleContentObject {
+    left: htmlResult;
+    right: htmlResult;
+}
+export type HandleContentFunctionArgument = {
+    item: Item;
+    vido: Vido;
+};
+export type HandleContentFunction = (arg: HandleContentFunctionArgument) => HandleContentObject;
+export type HandleContent = HandleContentObject | HandleContentFunction | htmlResult;
+export interface Options {
+    enabled?: boolean;
+    dependant?: boolean;
+    debug?: boolean;
+    handle?: Handle;
+    content?: HandleContent;
+    bodyClass?: string;
+    bodyClassLeft?: string;
+    bodyClassRight?: string;
+    events?: Events;
+    snapToTime?: SnapToTime;
+    outsideWidthThreshold?: number;
+    autoScroll?: AutoScroll;
+    ignoreMissingDates?: boolean;
+    allowItemsToGoOutsideTheArea?: boolean;
+    threshold?: number;
+    shouldMuteNotNeededMethods?: boolean;
+}
+export type State = 'start' | 'resize' | 'end' | '';
+export interface PluginData extends Options {
+    leftIsMoving: boolean;
+    rightIsMoving: boolean;
+    initialItems: Item[];
+    initialItemsData: DataItems;
+    addedDependantIds: string[];
+    selectedIds: string[];
+    initialHorizontalScroll: DataScrollHorizontal;
+    state: State;
+    movement: Movement;
+    thresholdReached: boolean;
+}
+export declare function Plugin(options?: Options): (vidoInstance: Vido) => () => void;
+//# sourceMappingURL=item-resizing.d.ts.map

package/dist/plugins/item-resizing.umd.min.js

@@ -0,0 +1,37 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ItemResizing={})}(this,(function(t){"use strict";
+/**
+ * TimelinePointer 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.37.5
+ * @released  2024-07-19
+ * @license   SEE LICENSE IN LICENSE FILE
+ */const e="chart-timeline-items-row-item",i="gstc";
+/**
+ * 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.37.5
+ * @released  2024-07-19
+ * @license   SEE LICENSE IN LICENSE FILE
+ */function s(t,e=""){let s=`${i}__${t}`;return t===i&&(s=i),e?`${s} ${s}--${e.replace(":","-")}`:s}
+/**
+ * ItemResizing 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.37.5
+ * @released  2024-07-19
+ * @license   SEE LICENSE IN LICENSE FILE
+ */const a=s("chart-timeline-items-row-item-resizing-handle-content-line");const n="ItemResizing",o=`config.plugin.${n}`,d="chart-timeline-items-row-item-resizing-handle",l=s(d),h="--left",r="--right";class m{constructor(t,e){this.onDestroy=[],this.scrollWaiting=0,this.vido=t,this.state=t.state,this.api=t.api,this.data=function(t={}){const e={onStart:({items:t})=>t.after,onResize:({items:t})=>t.after,onEnd:({items:t})=>t.after},i={start:({startTime:t,time:e,vido:i})=>i.api.time.findOrCreateMainDateAtTime(t.valueOf(),e).leftGlobalDate,end:({endTime:t,time:e,vido:i})=>i.api.time.findOrCreateMainDateAtTime(t.valueOf(),e).rightGlobalDate},s={width:18,horizontalMargin:0,verticalMargin:0,outside:!1,outsideWidth:14,outsideHorizontalMargin:6,onlyWhenSelected:!0},a=Object.assign({enabled:!0,dependant:!0,addedDependantIds:[],selectedIds:[],debug:!1,state:"",content:null,bodyClass:"gstc-items-resizing",bodyClassLeft:"gstc-items-resizing-left",bodyClassRight:"gstc-items-resizing-right",outsideWidthThreshold:100,movement:{px:0,time:0},initialItems:[],initialItemsData:{},initialHorizontalScroll:null,leftIsMoving:!1,rightIsMoving:!1,handle:Object.assign({},s),events:Object.assign({},e),snapToTime:Object.assign({},i),autoScroll:{speed:1,edgeThreshold:60},ignoreMissingDates:!0,allowItemsToGoOutsideTheArea:!0,threshold:10,thresholdReached:!1,shouldMuteNotNeededMethods:!0},t);return t.snapToTime&&(a.snapToTime=Object.assign(Object.assign({},i),t.snapToTime)),t.events&&(a.events=Object.assign(Object.assign({},e),t.events)),t.handle&&(a.handle=Object.assign(Object.assign({},s),t.handle)),t.autoScroll&&(a.autoScroll=Object.assign(Object.assign({},a.autoScroll),t.autoScroll)),a}(e),this.html=t.html,this.data.content||(this.data.content={left:this.html`<div class=${a}></div><div class=${a}></div>`,right:this.html`<div class=${a}></div><div class=${a}></div>`}),this.PluginItemResizingInnerSlot=this.PluginItemResizingInnerSlot.bind(this),this.PluginItemResizingOuterSlot=this.PluginItemResizingOuterSlot.bind(this),this.onRightPointerDown=this.onRightPointerDown.bind(this),this.onRightPointerMove=this.onRightPointerMove.bind(this),this.onRightPointerUp=this.onRightPointerUp.bind(this),this.onLeftPointerDown=this.onLeftPointerDown.bind(this),this.onLeftPointerMove=this.onLeftPointerMove.bind(this),this.onLeftPointerUp=this.onLeftPointerUp.bind(this),this.destroy=this.destroy.bind(this),this.updateData(),this.onDestroy.push(this.state.subscribe("$data.elements.chart-timeline",(t=>this.timelineElement=t))),this.onDestroy.push(this.state.subscribe(o,(t=>{t.enabled?document.body.classList.add(t.bodyClass):document.body.classList.remove(t.bodyClass),this.data=t}))),this.onTimelinePointerDown=this.onTimelinePointerDown.bind(this),this.onTimelinePointerMove=this.onTimelinePointerMove.bind(this),this.onTimelinePointerUp=this.onTimelinePointerUp.bind(this),this.api.plugins.TimelinePointer.addPointerListener("move",this.onTimelinePointerMove),this.api.plugins.TimelinePointer.addPointerListener("down",this.onTimelinePointerDown),this.api.plugins.TimelinePointer.addPointerListener("up",this.onTimelinePointerUp),this.state.update("config.slots.chart-timeline-items-row-item.inner",(t=>(t.includes(this.PluginItemResizingInnerSlot)||t.push(this.PluginItemResizingInnerSlot),t))),this.state.update("config.slots.chart-timeline-items-row-item.outer",(t=>(t.includes(this.PluginItemResizingOuterSlot)||t.push(this.PluginItemResizingOuterSlot),t)))}destroy(){this.onDestroy.forEach((t=>t())),this.api.plugins.TimelinePointer.removePointerListener("move",this.onTimelinePointerMove),this.api.plugins.TimelinePointer.removePointerListener("down",this.onTimelinePointerDown),this.api.plugins.TimelinePointer.removePointerListener("up",this.onTimelinePointerUp),this.state.update("config.slots.chart-timeline-items-row-item.inner",(t=>t.filter((t=>t!==this.PluginItemResizingInnerSlot)))),this.state.update("config.slots.chart-timeline-items-row-item.outer",(t=>t.filter((t=>t!==this.PluginItemResizingOuterSlot)))),this.api.pluginDestroyed(n)}updateData(){this.state.update(o,this.data)}setUpClasses(t=!1){this.leftClassName=this.api.getClass(d),this.leftClassName+=" "+this.leftClassName+h,this.rightClassName=this.api.getClass(d),this.rightClassName+=" "+this.rightClassName+r,t&&(this.leftClassName+=` ${this.api.getClass(d)}--left-outside`,this.rightClassName+=` ${this.api.getClass(d)}--right-outside`)}getSelectedItems(){return this.state.get(`config.plugin.Selection.selected.${e}`).map((t=>this.api.mergeDeep({},this.api.getItem(t))))}getSelectedItemsData(t){const e={};for(const i of t)e[i.id]=this.api.mergeDeep({},this.api.getItemData(i.id));return e}updateRightStyleMap(t,e){const i=this.api.getItemData(t.id);return e.style.top="0px",this.data.handle.outside||i.actualWidth<this.data.outsideWidthThreshold?(e.style.position="absolute",e.style.left=i.position.actualRight+this.data.handle.outsideHorizontalMargin+"px",e.style.width=this.data.handle.outsideWidth+"px",e.style.top=i.position.actualRowTop+"px",this.setUpClasses(!0)):(e.style.position="static",e.style.width=this.data.handle.width+"px",this.setUpClasses(!1)),e.style.height=i.actualHeight-2*this.data.handle.verticalMargin+"px",i.outOfView.right?e.style.display="none":e.style.display="flex",e}updateLeftStyleMap(t,e){const i=this.api.getItemData(t.id);return e.style.top="0px",this.data.handle.outside||i.actualWidth<this.data.outsideWidthThreshold?(e.style.position="absolute",e.style.left=i.position.actualLeft-(this.data.handle.outsideWidth+this.data.handle.outsideHorizontalMargin)+"px",e.style.width=this.data.handle.outsideWidth+"px",e.style.top=i.position.actualRowTop+"px",this.setUpClasses(!0)):(e.style.position="static",e.style.left=this.data.handle.horizontalMargin+"px",e.style.width=this.data.handle.width+"px",this.setUpClasses(!1)),e.style.height=i.actualHeight-2*this.data.handle.verticalMargin+"px",i.outOfView.left?e.style.display="none":e.style.display="flex",e}getEventArgument(t){const e=this.api.getAllItems(),i=[];for(const s of t)i.push(this.api.mergeDeep({},e[s.id]));return{items:{initial:this.data.initialItems,before:i,after:t},addedDependantIds:this.data.addedDependantIds,selectedIds:this.data.selectedIds,vido:this.vido,state:this.state,time:this.state.get("$data.chart.time")}}getDependantItems(t){const e=[],i=this.api.getItemsData();for(const s of t)for(const t of i[s.id].dependant)e.includes(t)||e.push(t);const s=this.state.get("config.chart.items");return e.map((t=>s[t])).map((t=>this.api.mergeDeep({},t)))}dispatchEvent(t,e,i=null){"onStart"===t&&this.data.shouldMuteNotNeededMethods&&(this.api.muteMethod("fixOverlapped"),this.api.muteMethod("fullReload"),this.api.muteMethod("recalculateRowPercents"),this.api.muteMethod("getLastPageRowsHeight"),this.api.muteMethod("calculateVerticalScrollArea"),this.api.muteMethod("heightChange"),this.api.muteMethod("calculateRowsHeight"),this.api.muteMethod("updateVisibleItemsListener"),this.api.muteMethod("prepareExpanded"),0===this.data.autoScroll.speed&&0===this.data.autoScroll.speed&&(this.api.muteMethod("generateVisibleRowsAndItems"),this.api.muteMethod("calculateVisibleRowsHeights"),this.api.muteMethod("prepareExpanded"))),"onEnd"===t&&this.data.shouldMuteNotNeededMethods&&(this.api.unmuteMethod("fixOverlapped"),this.api.unmuteMethod("heightChange"),this.api.unmuteMethod("calculateVerticalScrollArea"),this.api.unmuteMethod("getLastPageRowsHeight"),this.api.unmuteMethod("recalculateRowPercents"),this.api.unmuteMethod("fullReload"),this.api.unmuteMethod("calculateRowsHeight"),this.api.unmuteMethod("updateVisibleItemsListener"),this.api.unmuteMethod("prepareExpanded"),0===this.data.autoScroll.speed&&0===this.data.autoScroll.speed&&(this.api.unmuteMethod("generateVisibleRowsAndItems"),this.api.unmuteMethod("calculateVisibleRowsHeights"),this.api.unmuteMethod("prepareExpanded"))),e=e.map((t=>this.api.mergeDeep({},t)));const s=this.data.events[t](this.getEventArgument(e));let a=this.state.multi(!0);const n=this.state.get("config.chart.items");for(const t of s){let e=!1;const s=n[t.id];t.time.start===s.time.start&&t.time.end===s.time.end||(e=!0,a=a.update(`config.chart.items.${t.id}.time`,t.time)),i&&e&&(a=a.update(`$data.chart.items.${t.id}`,this.api.mergeDeep({},i[t.id])))}a.done(),"onEnd"===t&&this.api.main.partialReload(!1)}getItemsForDiff(){const t=this.getSelectedItems()[0],e=this.data.initialItems.find((e=>e.id===t.id));return{modified:t,original:e}}onTimelinePointerDown(t){this.data.enabled&&(t.targetType!==e||this.api.plugins.TimelinePointer.isLocked("down")||this.onPointerDown(t))}onTimelinePointerMove(t){this.data.enabled&&t.targetType===e&&"item-resizing"===this.api.plugins.TimelinePointer.isLocked("move")&&this.onPointerMove(t)}onTimelinePointerUp(t){this.data.enabled&&t.targetType===e&&"item-resizing"===this.api.plugins.TimelinePointer.isLocked("up")&&this.onPointerUp(t)}onPointerDown(t){const e=t.originalEvent.target.closest("."+l);if(e&&!this.api.plugins.TimelinePointer.isLocked("down")){if(this.api.plugins.TimelinePointer.lock("down","item-resizing"),this.api.plugins.TimelinePointer.lock("move","item-resizing"),this.api.plugins.TimelinePointer.lock("up","item-resizing"),t.originalEvent.preventDefault(),t.originalEvent.stopPropagation(),this.data.dependant){const t=this.getSelectedItems();this.data.selectedIds=t.map((t=>t.id));const e=this.getDependantItems(t).filter((t=>!this.data.selectedIds.includes(t.id)));this.data.addedDependantIds=e.map((t=>t.id)),this.data.initialItems=[...t,...e]}else this.data.initialItems=this.getSelectedItems(),this.data.addedDependantIds=[],this.data.selectedIds=this.data.initialItems.map((t=>t.id));this.data.initialItemsData=this.getSelectedItemsData(this.data.initialItems),this.data.initialHorizontalScroll=this.api.mergeDeep({},this.state.get("$data.scroll.horizontal")),this.data.thresholdReached=!1,""!==this.data.state&&"end"!==this.data.state||(this.data.state="resize"),e.classList.contains(l+h)&&this.onLeftPointerDown(),e.classList.contains(l+r)&&this.onRightPointerDown(),this.dispatchEvent("onStart",this.data.initialItems)}}onLeftPointerDown(){this.data.enabled&&(document.body.classList.add(this.data.bodyClassLeft),this.data.leftIsMoving=!0,this.updateData())}onRightPointerDown(){this.data.enabled&&(document.body.classList.add(this.data.bodyClassRight),this.data.rightIsMoving=!0,this.updateData())}scrollLeft(){if(!this.data.autoScroll.speed)return;if(this.state.get("config.chart.time.calculatedZoomMode"))return;this.scrollWaiting++;const t=this.state.get("config.scroll.horizontal");if(this.data.autoScroll.speed<0){if(this.scrollWaiting-1<Math.abs(this.data.autoScroll.speed))return;const e=this.api.getScrollLeft();t.byPixels?this.api.setScrollLeft(e.absolutePosPx-120*t.multiplier):this.api.setScrollLeft(e.dataIndex-1)}else if(this.data.autoScroll.speed>0){const e=this.api.getScrollLeft();t.byPixels?this.api.setScrollLeft(e.absolutePosPx-120*this.data.autoScroll.speed*t.multiplier):this.api.setScrollLeft(e.dataIndex-this.data.autoScroll.speed)}this.scrollWaiting=0}scrollRight(){if(!this.data.autoScroll.speed)return;if(this.state.get("config.chart.time.calculatedZoomMode"))return;this.scrollWaiting++;const t=this.state.get("config.scroll.horizontal");if(this.data.autoScroll.speed<0){if(this.scrollWaiting-1<Math.abs(this.data.autoScroll.speed))return;const e=this.api.getScrollLeft();t.byPixels?this.api.setScrollLeft(e.absolutePosPx+120*t.multiplier):this.api.setScrollLeft(e.dataIndex+1)}else if(this.data.autoScroll.speed>0){const e=this.api.getScrollLeft();t.byPixels?this.api.setScrollLeft(e.absolutePosPx+120*this.data.autoScroll.speed*t.multiplier):this.api.setScrollLeft(e.dataIndex+this.data.autoScroll.speed)}this.scrollWaiting=0}autoScroll(t){if(!this.timelineElement)return;const e=t.currentPosition.x,i=this.timelineElement.getBoundingClientRect().width-2;e<this.data.autoScroll.edgeThreshold?this.scrollLeft():e>i-this.data.autoScroll.edgeThreshold&&this.scrollRight()}onPointerMove(t){if(!this.data.enabled)return;const{original:e,modified:i}=this.getItemsForDiff();e&&(this.data.movement={px:t.movement.x,time:i.time.start-e.time.start},Math.abs(t.movement.x)>=this.data.threshold&&(this.data.thresholdReached=!0),"resize"!==this.data.state&&"start"!==this.data.state||(this.data.state="resize"),t.movement.x&&this.data.thresholdReached&&this.autoScroll(t),this.data.thresholdReached&&(this.data.leftIsMoving&&this.onLeftPointerMove(t),this.data.rightIsMoving&&this.onRightPointerMove(t)))}onLeftPointerMove(t){if(!this.data.enabled||!this.data.leftIsMoving)return;const e=this.getSelectedItems(),i={},s=this.state.get("$data.chart.time"),{original:a,modified:n}=this.getItemsForDiff(),o=this.data.movement={px:t.movement.x,time:n.time.start-a.time.start},d=this.api.time.date(this.api.time.getTimeFromOffsetPx(t.initialPosition.x,!0,s)),l=this.data.snapToTime.start({startTime:d,item:e[0],time:s,movement:o,vido:this.vido}),h=this.api.time.date(this.api.time.getTimeFromOffsetPx(t.currentPosition.x,!0,s)),r=this.api.time.getDatesDiffPx(l,h,s,!0);for(let t=0,a=e.length;t<a;t++){const a=e[t],n=this.api.mergeDeep({},this.api.getItemData(a.id));let d=this.api.mergeDeep({},this.data.initialItemsData[a.id]).position.left+r;d>n.position.right-a.minWidth&&(d=n.position.right-a.minWidth);const l=this.api.time.getTimeFromOffsetPx(d,!0,s),h=this.data.snapToTime.start({startTime:this.api.time.date(l),item:a,time:s,movement:o,vido:this.vido});a.time.start=h.valueOf(),n.time.startDate=h;if((a.time.start<s.from||a.time.end>s.to)&&("function"==typeof s.format.periodIncrement||!this.data.allowItemsToGoOutsideTheArea)){const t=this.api.getItem(a.id);a.time.start=t.time.start,a.time.end=t.time.end,n.time.startDate=this.api.time.date(a.time.start),n.time.endDate=this.api.time.date(a.time.end)}i[a.id]=n}this.dispatchEvent("onResize",e,i),this.updateData()}getItemsToMove(){let t,e,i=[];if(this.data.dependant){const s=this.getSelectedItems();e=s.map((t=>t.id));const a=this.getDependantItems(s).filter((t=>!e.includes(t.id)));i=a.map((t=>t.id)),t=[...s,...a]}else t=this.getSelectedItems();return{itemsToMove:t,dependantIds:i}}onRightPointerMove(t){if(!this.data.enabled||!this.data.rightIsMoving)return;const{itemsToMove:e,dependantIds:i}=this.getItemsToMove(),s={},a=this.state.get("$data.chart.time"),{original:n,modified:o}=this.getItemsForDiff(),d=this.data.movement={px:t.movement.x,time:o.time.start-n.time.start},l=this.api.time.date(this.api.time.getTimeFromOffsetPx(t.initialPosition.x,!0,a)),h=this.data.snapToTime.end({endTime:l,item:null,time:a,movement:d,vido:this.vido}),r=this.api.time.date(this.api.time.getTimeFromOffsetPx(t.currentPosition.x,!0,a)),m=this.api.time.getDatesDiffPx(h,r,a,!0);for(let t=0,n=e.length;t<n;t++){const n=e[t],o=this.api.mergeDeep({},this.api.getItemData(n.id)),l=this.api.mergeDeep({},this.data.initialItemsData[n.id]),h=i.includes(n.id);let r=l.position.left+l.timeWidth+m;!h&&r<o.position.left+n.minWidth&&(r=o.position.left+n.minWidth);const p=this.api.time.getTimeFromOffsetPx(r,!0,a);let c=this.api.time.date(p);if(h||(c=this.data.snapToTime.end({endTime:this.api.time.date(p),item:n,time:a,movement:d,vido:this.vido})),h){const t=this.data.initialItems.find((t=>t.dependant.includes(l.id))),e=this.data.initialItemsData[t.id],i=s[e.id],d=this.api.time.getDatesDiffMs(e.time.endDate,i.time.endDate,a,!0);let h=-this.api.time.getDSTDiffForLevel(a.level,e.time.endDate.valueOf(),l.time.startDate.valueOf(),a),r=this.api.time.addTimeFromDates(l.time.startDate.valueOf(),d+h,a);h=this.api.time.getDSTDiffForLevel(a.level,i.time.endDate.valueOf(),r,a),r+=h;const m=this.api.time.date(r),p=m.valueOf(),u=this.api.time.getViewOffsetPxFromDates(m,!1,a);let g=-this.api.time.getDSTDiffForLevel(a.level,l.time.startDate.valueOf(),l.time.endDate.valueOf(),a);const f=u+l.timeWidth;let v;const P=l.time.endDate.valueOf()-l.time.startDate.valueOf();v=this.data.ignoreMissingDates?this.api.time.date(this.api.time.getTimeFromOffsetPx(f,!0,a)):this.api.time.date(m.valueOf()+P),g+=this.api.time.getDSTDiffForLevel(a.level,p,v.valueOf(),a),v=v.add(g,"ms"),c=v,n.time.start=m.valueOf(),o.time.startDate=m}n.time.end=c.valueOf(),o.time.endDate=c;if((n.time.start<a.from||n.time.end>a.to)&&("function"==typeof a.format.periodIncrement||!this.data.allowItemsToGoOutsideTheArea)){const t=this.api.getItem(n.id);n.time.start=t.time.start,n.time.end=t.time.end,o.time.startDate=this.api.time.date(n.time.start),o.time.endDate=this.api.time.date(n.time.end)}s[n.id]=o}this.dispatchEvent("onResize",e,s),this.updateData()}onEnd(){const{itemsToMove:t}=this.getItemsToMove();this.dispatchEvent("onEnd",t)}onPointerUp(t){"resize"===this.data.state&&(this.data.state="end"),this.onLeftPointerUp(),this.onRightPointerUp(),this.onEnd(),this.updateData(),this.api.plugins.TimelinePointer.unlock("down"),this.api.plugins.TimelinePointer.unlock("move"),this.api.plugins.TimelinePointer.unlock("up")}onLeftPointerUp(){document.body.classList.remove(this.data.bodyClassLeft),this.data.enabled&&this.data.leftIsMoving&&(this.data.leftIsMoving=!1,this.updateData())}onRightPointerUp(){document.body.classList.remove(this.data.bodyClassRight),this.data.enabled&&this.data.rightIsMoving&&(this.data.rightIsMoving=!1)}PluginItemResizingInnerSlot(t,e){let i,s,a;const n=new t.StyleMap({}),o=new t.StyleMap({});return t.onChange((d=>{if(!(e=d)||!e.item)return;const l=e.item;if(!l)return;const h=this.api.getItemData(l.id);if(!h)return;let r;i=!h.detached,this.data.handle.onlyWhenSelected&&(i=i&&h.selected),i=i&&!(this.data.handle.outside||h.actualWidth<this.data.outsideWidthThreshold),this.updateRightStyleMap(l,o),this.updateLeftStyleMap(l,n),r="function"==typeof this.data.content?this.data.content({item:l,vido:t}):"object"!=typeof this.data.content||"left"in this.data.content?this.data.content:{left:this.data.content,right:this.data.content},s=this.html`<div class=${this.leftClassName} data-gstcid=${e.item.id} style=${n.directive()}>${r.left}</div>`,a=this.html`<div class=${this.rightClassName} data-gstcid=${e.item.id} style=${o.directive()}>${r.right}</div>`,t.update()})),t=>this.html`${i?s:null}${t}${i?a:null}`}PluginItemResizingOuterSlot(t,i){let s,a,n;const o=new t.StyleMap({}),d=new t.StyleMap({});return t.onChange((l=>{if(!(i=l)||!i.item)return;const h=i.item;if(!h)return;const r=this.api.getItemData(h.id);if(!r)return;let m;s=!r.detached,this.data.handle.onlyWhenSelected&&(s=s&&r.selected),s=s&&(this.data.handle.outside||r.actualWidth<this.data.outsideWidthThreshold),this.updateRightStyleMap(h,d),this.updateLeftStyleMap(h,o),m="function"==typeof this.data.content?this.data.content({item:h,vido:t}):"object"!=typeof this.data.content||"left"in this.data.content?this.data.content:{left:this.data.content,right:this.data.content},a=this.html`<div class=${this.leftClassName} data-type=${e} data-gstcid=${i.item.id} style=${o.directive()}>${m.left}</div>`,n=this.html`<div class=${this.rightClassName} data-type=${e} data-gstcid=${i.item.id} style=${d.directive()}>${m.right}</div>`,t.update()})),t=>this.html`${s?a:null}${t}${s?n:null}`}}t.Plugin=function(t={}){return function(e){const i=e.api;if(!i.isPluginInitialized("TimelinePointer"))throw new Error("TimelinePointer plugin must be initialized before ItemResizing plugin.");if(!i.isPluginInitialized("Selection"))throw new Error("Selection plugin must be initialized before ItemResizing plugin.");if(i.isPluginInitialized("ItemMovement"))throw new Error("ItemResizing plugin must be initialized before ItemMovement plugin.");const s=e.state.get(o);s&&(t=e.api.mergeDeep({},t,s));const a=new m(e,t);return i.pluginInitialized(n),a.destroy}},Object.defineProperty(t,"__esModule",{value:!0})}));

package/dist/plugins/item-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ItemTypes plugin
+ *
+ * @header  --gstc--header--
+ */
+import type { Template, Vido } from '../gstc';
+export declare const pluginPath = "config.plugin.ItemTypes";
+export declare const templatePath = "config.templates.chart-timeline-items-row-item";
+export interface Options {
+    [key: string]: Template;
+}
+export declare function Plugin(options?: Options): (vidoInstance: Vido) => () => void;
+//# sourceMappingURL=item-types.d.ts.map

package/dist/plugins/item-types.esm.min.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ItemTypes plugin
+ *
+ * @header  --gstc--header--
+ */
+import type { Template, Vido } from '../gstc';
+export declare const pluginPath = "config.plugin.ItemTypes";
+export declare const templatePath = "config.templates.chart-timeline-items-row-item";
+export interface Options {
+    [key: string]: Template;
+}
+export declare function Plugin(options?: Options): (vidoInstance: Vido) => () => void;
+//# sourceMappingURL=item-types.d.ts.map

package/dist/plugins/item-types.esm.min.js

@@ -0,0 +1,127 @@
+/**
+ * ItemTypes 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.37.5
+ * @released  2024-07-19
+ * @license   SEE LICENSE IN LICENSE FILE
+ */
+const t="config.plugin.ItemTypes",e="config.templates.chart-timeline-items-row-item",i={task({className:t,labelClassName:e,cache:i,shouldDetach:s,actions:a,styleMap:l,slots:n,cutterLeft:c,cutterRight:o,getContent:$,vido:p,props:h}){const r=s||!h.item,{itemData:g,item:d}=h,m=g.position.left!==g.position.actualLeft,u=g.position.right!==g.position.actualRight,y=g.actualWidth,L=g.actualHeight,_=Math.min(8,L/2);let f=[`M ${_} ${L}`,`Q 0 ${L} 0 ${L-_}`,`L 0 ${_}`,`Q 0 0 ${_} 0`,`L ${y-_} 0`,`Q ${y} 0 ${y} ${_}`,`L ${y} ${L-_}`,`Q ${y} ${L} ${y-_} ${L}`,`L ${_} ${L}`].join(" ");m&&!u?f=["M 0 0",`L ${y-_} 0`,`Q ${y} 0 ${y} ${_}`,`L ${y} ${L-_}`,`Q ${y} ${L} ${y-_} ${L}`,`L 0 ${L}`].join(" "):m&&u?f=["M 0 0",`L ${y} 0`,`L ${y} ${L}`,`L 0 ${L}`].join(" "):!m&&u&&(f=[`M ${_} ${L}`,`Q 0 ${L} 0 ${L-_}`,`L 0 ${_}`,`Q 0 0 ${_} 0`,`L ${y} 0`,`L ${y} ${L}`,`L ${_} ${L}`].join(" "));const w=`gstc__clip-path-${d.id}`,v=`gstc__pattern-${d.id}`,j=void 0===d.progress?100:d.progress,x=g.width-g.width/100*j;let b=g.width-x;m&&(b+=g.position.left),b<0&&(b=0);const H=[`M ${b} 0`,`L ${y} 0`,`L ${y} ${L}`,`L ${b} ${L}`].join(" "),M=d.fill?d.fill:"#e74c3c",O=`gstc__item-type gstc__item-type--${d.type} `;return i(r?null:n.html("outer",p.html`
+        <div class=${O+t} data-gstcid=${h.item.id} data-actions=${a()} style=${l.directive()}>
+          ${y>=0?p.svg`<svg width=${y} height=${g.actualHeight} xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <clipPath id=${w}>
+              <path d=${f}></path>
+            </clipPath>
+            <pattern
+              id=${v}
+              width="20"
+              height="20"
+              patternTransform="rotate(45 0 0)"
+              patternUnits="userSpaceOnUse"
+            >
+              <line
+                class="gstc__item-type-progress-line"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="20"
+              />
+            </pattern>
+          </defs>
+          <path class="gstc__item-type-item" d=${f} fill=${M} />
+          <path
+            class="gstc__item-type-progress"
+            clip-path="url(#${w})"
+            d=${H}
+            style="fill: url('#${v}');" />
+            <g clip-path="url(#${w})">
+              <foreignObject  x="0" y="0" width="100%" height="100%">
+                <div class="gstc__item-type-content" xmlns="http://www.w3.org/1999/xhtml">
+                  ${n.html("inner",p.html`<div class=${O+e}>${n.html("content",$())}</div>`)}
+                </div>
+              </foreignObject>
+            </g>
+        </svg>`:null}
+        </div>
+      `))},milestone({className:t,labelClassName:e,cache:i,actions:s,styleMap:a,shouldDetach:l,slots:n,cutterLeft:c,cutterRight:o,getContent:$,vido:p,props:h}){const r=l||!h.item,{itemData:g,item:d}=h,m=16,u=g.actualWidth,y=g.actualHeight,L=g.position.left!==g.position.actualLeft,_=g.position.right!==g.position.actualRight;let f=["M 0 "+g.actualHeight/2,`L ${u>=32?m:u/2} 0`,`L ${u>=32?u-m:u/2} 0`,`L ${u} ${g.actualHeight/2}`,`L ${u>=32?u-m:u/2} ${g.actualHeight}`,`L ${u>=32?m:u/2} ${g.actualHeight}`,"L 0 "+g.actualHeight/2].join(" ");L&&!_?f=["M 0 0",`L ${u>=32?u-m:u/2} 0`,`L ${u} ${g.actualHeight/2}`,`L ${u>=32?u-m:u/2} ${g.actualHeight}`,`L 0 ${y}`].join(" "):L&&_?f=["M 0 0",`L ${u} 0`,`L ${u} ${y}`,`L 0 ${y}`].join(" "):!L&&_&&(f=["M 0 "+g.actualHeight/2,`L ${u>=32?m:u/2} 0`,`L ${u} 0`,`L ${u} ${y}`,`L ${u>=32?m:u/2} ${g.actualHeight}`,"L 0 "+g.actualHeight/2].join(" "));const w=`gstc__clip-path-${d.id}`,v=`gstc__pattern-${d.id}`,j=void 0===d.progress?100:d.progress,x=g.width-g.width/100*j;let b=g.width-x;L&&(b+=g.position.left),b<0&&(b=0);const H=[`M ${u} 0`,`L ${u} ${y}`,`L ${b} ${y}`,`L ${b} 0`].join(" "),M=d.fill?d.fill:"#e74c3c",O=`gstc__item-type gstc__item-type--${d.type} `;return i(r?null:n.html("outer",p.html`
+        <div class=${O+t} data-gstcid=${h.item.id} data-actions=${s()} style=${a.directive()}>
+          ${u>=0?p.svg`<svg width=${u} height=${g.actualHeight} xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <clipPath id=${w}>
+              <path d=${f}></path>
+            </clipPath>
+            <pattern
+              id=${v}
+              width="20"
+              height="20"
+              patternTransform="rotate(45 0 0)"
+              patternUnits="userSpaceOnUse"
+            >
+              <line
+                class="gstc__item-type-progress-line"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="20"
+              />
+            </pattern>
+          </defs>
+          <path class="gstc__item-type-item" d=${f} stroke="none" fill=${M} />
+          <path
+            class="gstc__item-type-progress"
+            clip-path="url(#${w})"
+            d=${H}
+            style="fill: url('#${v}');" />
+            <g clip-path="url(#${w})">
+              <foreignObject x="0" y="0" width="100%" height="100%">
+                <div class="gstc__item-type-content" xmlns="http://www.w3.org/1999/xhtml">
+                  ${n.html("inner",p.html`<div class=${O+e}>${n.html("content",$())}</div>`)}
+                </div>
+              </foreignObject>
+            </g>
+        </svg>`:null}
+        </div>
+      `))},project({className:t,labelClassName:e,cache:i,shouldDetach:s,actions:a,styleMap:l,slots:n,cutterLeft:c,cutterRight:o,getContent:$,vido:p,props:h}){const r=s||!h.item,{itemData:g,item:d}=h,m=g.actualWidth,u=g.actualHeight,y=g.position.left!==g.position.actualLeft,L=["M 0 0",`L ${m} 0`,`L ${m} ${u}`,`L 0 ${u}`].join(" "),_=`gstc__clip-path-${d.id}`,f=`gstc__pattern-${d.id}`,w=void 0===d.progress?100:d.progress,v=g.width-g.width/100*w;let j=g.width-v;y&&(j+=g.position.left),j<0&&(j=0);const x=[`M ${m} 0`,`L ${m} ${u}`,`L ${j} ${u}`,`L ${j} 0`].join(" "),b=d.fill?d.fill:"#e74c3c",H=`gstc__item-type gstc__item-type--${d.type} `;return i(r?null:n.html("outer",p.html`
+        <div class=${H+t} data-gstcid=${h.item.id} data-actions=${a()} style=${l.directive()}>
+          ${m>=0?p.svg`<svg width=${m} height=${g.actualHeight} xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <clipPath id=${_}>
+              <path d=${L}></path>
+            </clipPath>
+            <pattern
+              id=${f}
+              width="20"
+              height="20"
+              patternTransform="rotate(45 0 0)"
+              patternUnits="userSpaceOnUse"
+            >
+              <line
+                class="gstc__item-type-progress-line"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="20"
+              />
+            </pattern>
+          </defs>
+          <path class="gstc__item-type-item" d=${L} fill=${b} />
+          <path
+            class="gstc__item-type-progress"
+            clip-path="url(#${_})"
+            d=${x}
+            style="fill: url('#${f}');" />
+            <g clip-path="url(#${_})">
+              <foreignObject x="0" y="0" width="100%" height="100%">
+                <div class="gstc__item-type-content" xmlns="http://www.w3.org/1999/xhtml">
+                  ${n.html("inner",p.html`<div class=${H+e}>${n.html("content",$())}</div>`)}
+                </div>
+              </foreignObject>
+          </g>
+        </svg>`:null}
+        </div>
+      `))}};class s{constructor(s,a){this.unsub=[],this.options=function(t){return Object.assign(Object.assign({},i),t)}(s),this.vido=a,this.state=a.state,this.api=a.api,this.componentTemplate=this.componentTemplate.bind(this),this.destroy=this.destroy.bind(this),this.state.update(t,this.options),this.state.update(e,(()=>this.componentTemplate)),this.unsub.push(this.state.subscribe(t,(t=>this.options=t))),this.api.pluginInitialized("ItemTypes")}destroy(){this.unsub.forEach((t=>t())),this.state.update(e,null),this.vido.api.pluginDestroyed("ItemTypes")}componentTemplate(t){const e=t.props.item;if(!e)return null;const i=e.type;if(!i)throw new Error(`Item (${e.id}) must have a 'type' {string} property 'task', 'milestone' or 'project'.`);return this.options[i](t)}}function a(e={}){return function(i){const a=i.state.get(t);a&&(e=i.api.mergeDeep({},e,a));return new s(e,i).destroy}}export{a as Plugin,t as pluginPath,e as templatePath};

package/dist/plugins/item-types.umd.min.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ItemTypes plugin
+ *
+ * @header  --gstc--header--
+ */
+import type { Template, Vido } from '../gstc';
+export declare const pluginPath = "config.plugin.ItemTypes";
+export declare const templatePath = "config.templates.chart-timeline-items-row-item";
+export interface Options {
+    [key: string]: Template;
+}
+export declare function Plugin(options?: Options): (vidoInstance: Vido) => () => void;
+//# sourceMappingURL=item-types.d.ts.map