@mogura/moguchart-core 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.en.md +491 -0
- package/README.md +470 -0
- package/dist/components/gantt-bar.d.ts +38 -0
- package/dist/components/gantt-calendar.d.ts +43 -0
- package/dist/components/gantt-chart-dependency-path.d.ts +15 -0
- package/dist/components/gantt-chart-export.d.ts +20 -0
- package/dist/components/gantt-chart-styles.d.ts +11 -0
- package/dist/components/gantt-chart.d.ts +169 -0
- package/dist/components/gantt-row-background.d.ts +21 -0
- package/dist/components/gantt-row.d.ts +53 -0
- package/dist/core/constants.d.ts +14 -0
- package/dist/core/i18n.d.ts +52 -0
- package/dist/core/patterns.d.ts +21 -0
- package/dist/core/theme.d.ts +2 -0
- package/dist/core/types.d.ts +612 -0
- package/dist/core/utils.d.ts +57 -0
- package/dist/favicon.png +0 -0
- package/dist/index.d.ts +7 -0
- package/dist/moguchart-core.mjs +3163 -0
- package/dist/moguchart-core.umd.js +1115 -0
- package/package.json +76 -0
|
@@ -0,0 +1,1115 @@
|
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`lit`),require(`lit/decorators.js`),require(`dayjs`),require(`lit/directives/repeat.js`),require(`lit/directives/unsafe-html.js`),require(`lodash-es`),require(`html2canvas-pro`),require(`jspdf`)):typeof define==`function`&&define.amd?define([`exports`,`lit`,`lit/decorators.js`,`dayjs`,`lit/directives/repeat.js`,`lit/directives/unsafe-html.js`,`lodash-es`,`html2canvas-pro`,`jspdf`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MoguchartCore={},e.Lit,e.Lit,e.dayjs,e.Lit,e.Lit,e._,e.html2canvas,e.jsPDF))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var l=Object.create,u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=f(t),a=0,o=i.length,s;a<o;a++)s=i[a],!m.call(e,s)&&s!==n&&u(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=d(t,s))||r.enumerable});return e},g=(e,t,n)=>(n=e==null?{}:l(p(e)),h(t||!e||!e.__esModule?u(n,`default`,{value:e,enumerable:!0}):n,e));r=g(r),s=g(s);var _=[`diagonal-stripe`,`diagonal-stripe-thin`,`diagonal-stripe-thick`,`diagonal-stripe-reverse`,`vertical-stripe`,`horizontal-stripe`,`checkerboard`,`dots`,`triangle`,`circle`,`grid`,`diagonal-grid`],v={type:`diagonal-stripe`},y={type:`diagonal-stripe-reverse`},b={type:`vertical-stripe`},x={type:`horizontal-stripe`},S={type:`checkerboard`},C={type:`dots`},w={type:`triangle`},T={type:`circle`},E={type:`grid`},D={type:`diagonal-grid`},O={type:`diagonal-stripe-thin`},k={type:`diagonal-stripe-thick`},A={type:`dots-dense`};function j(e){if(!e?.type)return``;let t=e.color||`rgba(255, 255, 255, 0.3)`,n=e.type===`dots`?`6px`:`8px`;switch(e.type){case`diagonal-stripe`:return`
|
|
2
|
+
background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
|
|
3
|
+
background-size: ${n} ${n};
|
|
4
|
+
background-repeat: repeat;
|
|
5
|
+
`;case`diagonal-stripe-thin`:return n=`4px`,`
|
|
6
|
+
background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
|
|
7
|
+
background-size: ${n} ${n};
|
|
8
|
+
background-repeat: repeat;
|
|
9
|
+
`;case`diagonal-stripe-thick`:return n=`16px`,`
|
|
10
|
+
background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
|
|
11
|
+
background-size: ${n} ${n};
|
|
12
|
+
background-repeat: repeat;
|
|
13
|
+
`;case`diagonal-stripe-reverse`:return`
|
|
14
|
+
background-image: linear-gradient(135deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
|
|
15
|
+
background-size: ${n} ${n};
|
|
16
|
+
background-repeat: repeat;
|
|
17
|
+
`;case`diagonal-grid`:return`
|
|
18
|
+
background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent), linear-gradient(135deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
|
|
19
|
+
background-size: ${n} ${n};
|
|
20
|
+
background-repeat: repeat;
|
|
21
|
+
`;case`vertical-stripe`:return`
|
|
22
|
+
background-image: linear-gradient(90deg, ${t} 50%, transparent 50%);
|
|
23
|
+
background-size: ${n} ${n};
|
|
24
|
+
background-repeat: repeat;
|
|
25
|
+
`;case`horizontal-stripe`:return`
|
|
26
|
+
background-image: linear-gradient(0deg, ${t} 50%, transparent 50%);
|
|
27
|
+
background-size: ${n} ${n};
|
|
28
|
+
background-repeat: repeat;
|
|
29
|
+
`;case`checkerboard`:return`
|
|
30
|
+
background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 75%, ${t} 75%, ${t}), linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 75%, ${t} 75%, ${t});
|
|
31
|
+
background-position: 0 0, calc(${n} / 2) calc(${n} / 2);
|
|
32
|
+
background-size: ${n} ${n};
|
|
33
|
+
background-repeat: repeat;
|
|
34
|
+
`;case`dots`:return`
|
|
35
|
+
background-image: radial-gradient(${t} 20%, transparent 20%);
|
|
36
|
+
background-size: ${n} ${n};
|
|
37
|
+
background-repeat: repeat;
|
|
38
|
+
`;case`dots-dense`:return n=`4px`,`
|
|
39
|
+
background-image: radial-gradient(${t} 20%, transparent 20%);
|
|
40
|
+
background-size: ${n} ${n};
|
|
41
|
+
background-repeat: repeat;
|
|
42
|
+
`;case`triangle`:return`
|
|
43
|
+
background-image: conic-gradient(from 150deg at 50% 35%, ${t} 60deg, transparent 60deg);
|
|
44
|
+
background-size: ${n} ${n};
|
|
45
|
+
background-repeat: repeat;
|
|
46
|
+
`;case`circle`:return`
|
|
47
|
+
background-image: radial-gradient(circle, transparent 50%, ${t} 50%, ${t} 70%, transparent 70%);
|
|
48
|
+
background-size: ${n} ${n};
|
|
49
|
+
background-repeat: repeat;
|
|
50
|
+
`;case`grid`:return`
|
|
51
|
+
background-image: linear-gradient(${t} 1px, transparent 1px), linear-gradient(90deg, ${t} 1px, transparent 1px);
|
|
52
|
+
background-size: ${n} ${n};
|
|
53
|
+
background-repeat: repeat;
|
|
54
|
+
`;default:return``}}var M={monthFormat:`YYYY年M月`,monthRowFormat:`M月`,dateFormat:e=>`${e.getFullYear()}/${e.getMonth()+1}/${e.getDate()}`,timeUnitDateFormat:e=>`${e.getFullYear()}年${e.getMonth()+1}月${e.getDate()}日`,dateTimeFormat:e=>{let t=`${e.getFullYear()}/${e.getMonth()+1}/${e.getDate()}`,n=e.getHours(),r=e.getMinutes();return n===0&&r===0?t:`${t} ${n.toString().padStart(2,`0`)}:${r.toString().padStart(2,`0`)}`},yearMonthFormat:e=>`${e.getFullYear()}/${e.getMonth()+1}`,duration:{days:e=>`${e}日`,hours:e=>`${e}時間`,minutes:e=>`${e}分`,zero:`0分`},tooltip:{duration:e=>`所要日数: ${e}日`},dragOverlay:{noTitle:`タイトルなし`,moveTo:e=>`移動先: ${e}`,movingTasks:e=>`${e}件のタスクを移動中`}},N={monthFormat:`MMM YYYY`,monthRowFormat:`MMM`,dateFormat:e=>`${e.getMonth()+1}/${e.getDate()}/${e.getFullYear()}`,timeUnitDateFormat:e=>`${[`Jan`,`Feb`,`Mar`,`Apr`,`May`,`Jun`,`Jul`,`Aug`,`Sep`,`Oct`,`Nov`,`Dec`][e.getMonth()]} ${e.getDate()}, ${e.getFullYear()}`,dateTimeFormat:e=>{let t=`${e.getMonth()+1}/${e.getDate()}/${e.getFullYear()}`,n=e.getHours(),r=e.getMinutes();return n===0&&r===0?t:`${t} ${n.toString().padStart(2,`0`)}:${r.toString().padStart(2,`0`)}`},yearMonthFormat:e=>`${e.getFullYear()}/${e.getMonth()+1}`,duration:{days:e=>`${e} day${e===1?``:`s`}`,hours:e=>`${e} hour${e===1?``:`s`}`,minutes:e=>`${e} minute${e===1?``:`s`}`,zero:`0 minutes`},tooltip:{duration:e=>`Duration: ${e} day${e===1?``:`s`}`},dragOverlay:{noTitle:`No Title`,moveTo:e=>`Move to: ${e}`,movingTasks:e=>`Moving ${e} task${e===1?``:`s`}`}},P={light:{bg:`#f1f5f9`,text:`#0f172a`,border:`#cbd5e1`,gridLine:`#cbd5e1`,subGridLine:`#e2e8f0`,monthGridLine:`#94a3b8`,yearGridLine:`#64748b`,dragTarget:`#e0f2fe`,tooltipBg:`rgba(0, 0, 0, 0.8)`,tooltipText:`white`,dragOverlayBg:`rgba(0, 0, 0, 0.85)`,dragOverlayText:`white`,dragOverlaySubText:`#cbd5e1`,dragOverlayDivider:`#666`,dependencyLine:`#94a3b8`,calendarBg:`#e2e8f0`,saturday:`#dbeafe`,sunday:`#fee2e2`,holiday:`#fee2e2`,rowHeaderBg:`#e2e8f0`,rowSelected:`#bfdbfe`,rowSelectedHeader:`#dbeafe`,rowHiddenBg:`repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px)`,currentTimeLine:`rgba(239, 68, 68, 0.5)`,currentTimeLineText:`#ffffff`},dark:{bg:`#1e293b`,text:`#f8fafc`,border:`#263040`,gridLine:`#334155`,subGridLine:`#263040`,monthGridLine:`#475569`,yearGridLine:`#64748b`,dragTarget:`rgba(51, 65, 85, 0.5)`,tooltipBg:`rgba(255, 255, 255, 0.9)`,tooltipText:`#0f172a`,dragOverlayBg:`rgba(255, 255, 255, 0.9)`,dragOverlayText:`#0f172a`,dragOverlaySubText:`#64748b`,dragOverlayDivider:`#cbd5e1`,dependencyLine:`#475569`,calendarBg:`#0f172a`,saturday:`rgba(59, 130, 246, 0.15)`,sunday:`rgba(239, 68, 68, 0.15)`,holiday:`rgba(239, 68, 68, 0.15)`,rowHeaderBg:`#0f172a`,rowSelected:`#283548`,rowSelectedHeader:`#1c2738`,rowHiddenBg:`repeating-linear-gradient(45deg, #0f172a, #0f172a 10px, #1e293b 10px, #1e293b 20px)`,currentTimeLine:`rgba(239, 68, 68, 0.5)`,currentTimeLineText:`#ffffff`}},F=(e,t,n,r)=>{if(r!==void 0){let n=t.getFullYear(),i=t.getMonth(),a=e.getFullYear(),o=e.getMonth(),s=(a-n)*12+(o-i),c=new Date(n,i+1,0).getDate(),l=(t.getDate()-1+t.getHours()/24+t.getMinutes()/1440)/c,u=new Date(a,o+1,0).getDate();return(s+(e.getDate()-1+e.getHours()/24+e.getMinutes()/1440)/u-l)*r}return(e.getTime()-t.getTime())/(1e3*60*60*24)*n},I=(e,t,n,r)=>{if(r!==void 0){let n=t.getFullYear(),i=t.getMonth(),a=new Date(n,i+1,0).getDate(),o=(t.getDate()-1+t.getHours()/24+t.getMinutes()/1440)/a,s=e/r+o,c=i+Math.floor(s),l=n+Math.floor(c/12);c%=12,c<0&&(c+=12,--l);let u=(s-Math.floor(s))*new Date(l,c+1,0).getDate(),d=1+Math.floor(u),f=(u-Math.floor(u))*24,p=Math.floor(f),m=Math.round((f-p)*60);return new Date(l,c,d,p,m)}let i=e/n;return new Date(t.getTime()+i*24*60*60*1e3)};function L(e){if(!e.length)return{tasksWithLanes:[],laneCount:1};let t=[...e].sort((e,t)=>e.start.getTime()-t.start.getTime()),n=[],r=new Map;for(let e of t){let t=-1;for(let r=0;r<n.length;r++)if(e.start>=n[r]){n[r]=e.end,t=r;break}t===-1&&(n.push(e.end),t=n.length-1),r.set(e.id,t)}return{tasksWithLanes:e.map(e=>({...e,lane:r.get(e.id)??0})),laneCount:n.length||1}}var R=(e,t)=>({...P[e]||P.light,...t}),z=(e,t,n)=>{let r=e.getDay();return n&&n(e)?t.holiday:[t.sunday,t.monday??``,t.tuesday??``,t.wednesday??``,t.thursday??``,t.friday??``,t.saturday][r]};function B(e,t){return(t.getTime()-e.getTime())/(1e3*60*60*24)}var V=(e,t,n)=>{let r=n??M,i=t.getTime()-e.getTime(),a=Math.floor(i/(1e3*60*60*24)),o=i%(1e3*60*60*24),s=Math.floor(o/(1e3*60*60)),c=o%(1e3*60*60),l=Math.floor(c/(1e3*60)),u=``;return a>0&&(u+=r.duration.days(a)),s>0&&(u+=r.duration.hours(s)),l>0&&(u+=r.duration.minutes(l)),u||r.duration.zero},H={BAR:`#3b82f6`,LABEL_BACKGROUND:`#fafafa`,SATURDAY:`#dbeafe`,SUNDAY:`#fee2e2`,HOLIDAY:`#fee2e2`,BORDER:`#e2e8f0`}.BAR;function U(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var W=class extends t.LitElement{constructor(...e){super(...e),this.lane=0,this.selected=!1,this.focused=!1,this.multiDragDx=0,this.multiDragActive=!1,this.connectorDropTarget=!1,this.isExporting=!1,this._currentDragCursor=null,this._dragAnimationFrame=null,this._wasDragging=!1,this.handleKeyDown=e=>{(e.key===`Control`||e.key===`Alt`)&&this.updateCursor(!0)},this.handleKeyUp=e=>{(e.key===`Control`||e.key===`Alt`)&&this.updateCursor(!1)}}static{this.styles=t.css`
|
|
55
|
+
:host {
|
|
56
|
+
display: block;
|
|
57
|
+
position: absolute;
|
|
58
|
+
top: 0;
|
|
59
|
+
left: 0;
|
|
60
|
+
width: 100%;
|
|
61
|
+
height: 100%;
|
|
62
|
+
pointer-events: none;
|
|
63
|
+
}
|
|
64
|
+
.task-group {
|
|
65
|
+
position: absolute;
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
pointer-events: auto;
|
|
68
|
+
z-index: 3;
|
|
69
|
+
}
|
|
70
|
+
.task-group:hover {
|
|
71
|
+
z-index: 50;
|
|
72
|
+
}
|
|
73
|
+
.task-group.dragging {
|
|
74
|
+
opacity: 0.5;
|
|
75
|
+
z-index: 15;
|
|
76
|
+
}
|
|
77
|
+
.bar {
|
|
78
|
+
cursor: grab;
|
|
79
|
+
width: 100%;
|
|
80
|
+
height: 100%;
|
|
81
|
+
position: absolute;
|
|
82
|
+
top: 0;
|
|
83
|
+
left: 0;
|
|
84
|
+
background-color: ${(0,t.unsafeCSS)(H)};
|
|
85
|
+
}
|
|
86
|
+
:host([selected]) .bar {
|
|
87
|
+
outline: 2px solid #3b82f6;
|
|
88
|
+
outline-offset: 1px;
|
|
89
|
+
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
|
|
90
|
+
}
|
|
91
|
+
:host([focused]) .bar {
|
|
92
|
+
outline: 2px dashed #3b82f6;
|
|
93
|
+
outline-offset: 2px;
|
|
94
|
+
}
|
|
95
|
+
:host([selected][focused]) .bar {
|
|
96
|
+
outline: 2px solid #3b82f6;
|
|
97
|
+
outline-offset: 1px;
|
|
98
|
+
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
|
|
99
|
+
}
|
|
100
|
+
.handle-left,
|
|
101
|
+
.handle-right {
|
|
102
|
+
background: transparent;
|
|
103
|
+
cursor: col-resize;
|
|
104
|
+
position: absolute;
|
|
105
|
+
top: 0;
|
|
106
|
+
bottom: 0;
|
|
107
|
+
width: 10px;
|
|
108
|
+
z-index: 10;
|
|
109
|
+
}
|
|
110
|
+
.handle-left {
|
|
111
|
+
left: 0px;
|
|
112
|
+
}
|
|
113
|
+
.handle-right {
|
|
114
|
+
right: 0px;
|
|
115
|
+
}
|
|
116
|
+
.handle-left:hover,
|
|
117
|
+
.handle-right:hover {
|
|
118
|
+
background: rgba(255, 255, 255, 0.3);
|
|
119
|
+
}
|
|
120
|
+
.connector-left,
|
|
121
|
+
.connector-right {
|
|
122
|
+
position: absolute;
|
|
123
|
+
top: 50%;
|
|
124
|
+
width: 10px;
|
|
125
|
+
height: 10px;
|
|
126
|
+
border-radius: 50%;
|
|
127
|
+
background: #3b82f6;
|
|
128
|
+
border: 2px solid #fff;
|
|
129
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
|
130
|
+
transform: translateY(-50%);
|
|
131
|
+
cursor: crosshair;
|
|
132
|
+
z-index: 20;
|
|
133
|
+
opacity: 0;
|
|
134
|
+
transition: opacity 0.15s ease;
|
|
135
|
+
pointer-events: auto;
|
|
136
|
+
}
|
|
137
|
+
.task-group:hover .connector-left,
|
|
138
|
+
.task-group:hover .connector-right {
|
|
139
|
+
opacity: 1;
|
|
140
|
+
}
|
|
141
|
+
.connector-left {
|
|
142
|
+
left: -10px;
|
|
143
|
+
}
|
|
144
|
+
.connector-right {
|
|
145
|
+
right: -10px;
|
|
146
|
+
}
|
|
147
|
+
.connector-left:hover,
|
|
148
|
+
.connector-right:hover {
|
|
149
|
+
background: #2563eb;
|
|
150
|
+
transform: translateY(-50%) scale(1.2);
|
|
151
|
+
}
|
|
152
|
+
:host([connector-drop-target]) .bar {
|
|
153
|
+
outline: 2px solid #3b82f6;
|
|
154
|
+
outline-offset: 2px;
|
|
155
|
+
box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
|
|
156
|
+
}
|
|
157
|
+
.bar-label {
|
|
158
|
+
color: white;
|
|
159
|
+
font-size: 12px;
|
|
160
|
+
pointer-events: none;
|
|
161
|
+
user-select: none;
|
|
162
|
+
position: absolute;
|
|
163
|
+
top: 2px;
|
|
164
|
+
left: 6px;
|
|
165
|
+
white-space: nowrap;
|
|
166
|
+
z-index: 5;
|
|
167
|
+
overflow: hidden;
|
|
168
|
+
text-overflow: ellipsis;
|
|
169
|
+
max-width: calc(100% - 12px);
|
|
170
|
+
}
|
|
171
|
+
:host([isexporting]) .bar,
|
|
172
|
+
:host([isexporting]) .bar * {
|
|
173
|
+
text-overflow: clip !important;
|
|
174
|
+
}
|
|
175
|
+
@keyframes pop-in {
|
|
176
|
+
0% {
|
|
177
|
+
transform: scale(0.5);
|
|
178
|
+
opacity: 0;
|
|
179
|
+
}
|
|
180
|
+
60% {
|
|
181
|
+
transform: scale(1.1);
|
|
182
|
+
}
|
|
183
|
+
100% {
|
|
184
|
+
transform: scale(1);
|
|
185
|
+
opacity: 1;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
@keyframes fade-out {
|
|
189
|
+
0% {
|
|
190
|
+
transform: scale(1);
|
|
191
|
+
opacity: 1;
|
|
192
|
+
}
|
|
193
|
+
100% {
|
|
194
|
+
transform: scale(0.5);
|
|
195
|
+
opacity: 0;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
@keyframes collab-pulse {
|
|
199
|
+
0%,
|
|
200
|
+
100% {
|
|
201
|
+
outline-offset: 2px;
|
|
202
|
+
filter: brightness(1);
|
|
203
|
+
}
|
|
204
|
+
50% {
|
|
205
|
+
outline-offset: 3px;
|
|
206
|
+
filter: brightness(1.08);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
`}getX(e){return F(e,this.option.calendar.start,this.option.calendar.pxPerDay??50,this.option.calendar.pxPerMonth)}setupDragEvents(e,t,n,r){let i=()=>{e.releasePointerCapture(t),window.removeEventListener(`pointermove`,a),window.removeEventListener(`pointerup`,o),window.removeEventListener(`keydown`,s)},a=e=>{n(e)},o=e=>{i(),r(!1,e)},s=e=>{e.key===`Escape`&&(i(),r(!0))};window.addEventListener(`pointermove`,a),window.addEventListener(`pointerup`,o),window.addEventListener(`keydown`,s)}onResizeStart(e,t){e.stopPropagation();let n=e.target,r=this.task.movable??`both`,i=this.task.resizable,a=!this.option.readOnly;if(a&&=i===void 0?!(r===`y`||r===`none`):i,!a)return;let o=this.shadowRoot?.querySelector(`.bar`);if(!o)return;o.style.pointerEvents=`none`;let s=this.shadowRoot?.querySelector(`.task-group`);s?.classList.add(`dragging`),n.setPointerCapture(e.pointerId);let c=e.clientX,l=new Date(this.task.start),u=new Date(this.task.end),d=new Date(l),f=new Date(u);this.setupDragEvents(n,e.pointerId,e=>{let n=e.clientX-c,r=new Date(l),i=new Date(u),a=this.option.calendar.pxPerDay??50,o=this.option.calendar.pxPerMonth,p=Math.max(this.option.snapDuration??1440,1);if(o){let e=this.getX(l),s=this.getX(u);if(t===`left`){let t=I(e+n,this.option.calendar.start,a,o);t.getDate()>15&&t.setMonth(t.getMonth()+1),t.setDate(1),t.setHours(0,0,0,0),r=t,r>=i&&(r=new Date(i),r.setMonth(r.getMonth()-1))}else{let e=I(s+n,this.option.calendar.start,a,o);e.getDate()>15&&e.setMonth(e.getMonth()+1),e.setDate(1),e.setHours(0,0,0,0),i=e,i<=r&&(i=new Date(r),i.setMonth(i.getMonth()+1))}}else{let e=a/1440,o=e*p,s=Math.round(n/o)*o,c=Math.round(s/e);t===`left`?(r=new Date(l.getTime()+c*60*1e3),r>=i&&(r=new Date(i.getTime()-p*60*1e3))):(i=new Date(u.getTime()+c*60*1e3),i<=r&&(i=new Date(r.getTime()+p*60*1e3)))}if(d=r,f=i,s){let e=this.getX(r),t=this.getX(i)-e;s.style.left=`${e}px`,s.style.width=`${t}px`}this._dragAnimationFrame&&cancelAnimationFrame(this._dragAnimationFrame),this._dragAnimationFrame=requestAnimationFrame(()=>{this.dispatchEvent(new CustomEvent(`task-update`,{detail:{...this.task,start:r,end:i,dy:0,isDragging:!0,x:e.clientX,y:e.clientY},bubbles:!0,composed:!0}))})},e=>{if(s?.classList.remove(`dragging`),o.style.pointerEvents=``,this._dragAnimationFrame&&=(cancelAnimationFrame(this._dragAnimationFrame),null),e){if(s){let e=this.getX(l),t=this.getX(u)-e;s.style.left=`${e}px`,s.style.width=`${t}px`}this.requestUpdate(),this.dispatchEvent(new CustomEvent(`task-update`,{detail:{...this.task,start:l,end:u,dy:0,isDragging:!1},bubbles:!0,composed:!0}))}else requestAnimationFrame(()=>{this.dispatchEvent(new CustomEvent(`task-update`,{detail:{...this.task,start:d,end:f,dy:0,isDragging:!1},bubbles:!0,composed:!0}))})})}onMoveStart(e){if(e.button===2)return;e.stopPropagation();let t=e.target,n=this.shadowRoot?.querySelector(`.task-group`);if(!t||!n)return;let r=this.task.movable??`both`;if(r===`none`)return;let i=e.ctrlKey||e.altKey?`copy`:`grabbing`;this._currentDragCursor=i,t.style.cursor=i,t.setPointerCapture(e.pointerId),n.classList.add(`dragging`);let a=e.clientX,o=e.clientY,s=new Date(this.task.start),c=new Date(this.task.end),l=this.option.snapDuration??1440;this.setupDragEvents(t,e.pointerId,e=>{let i=e.ctrlKey||e.altKey?`copy`:`grabbing`;this._currentDragCursor=i,t.style.cursor=i;let u=e.clientX-a,d=e.clientY-o;r===`y`&&(u=0),(r===`x`||this.multiDragActive)&&(d=0);let f=u;if(this.option.calendar.pxPerMonth){let e=I(this.getX(s)+u,this.option.calendar.start,50,this.option.calendar.pxPerMonth),t=(e.getFullYear()-s.getFullYear())*12+(e.getMonth()-s.getMonth())+(e.getDate()>15?1:0),n=new Date(s);n.setMonth(n.getMonth()+t),f=this.getX(n)-this.getX(s)}else{let e=this.option.calendar.pxPerDay/1440*l;f=Math.round(u/e)*e}n.style.transform=`translate(${f}px, ${d}px)`,this._dragAnimationFrame&&cancelAnimationFrame(this._dragAnimationFrame),this._dragAnimationFrame=requestAnimationFrame(()=>{let t=e.ctrlKey||e.altKey;this.dispatchEvent(new CustomEvent(`task-update`,{detail:{...this.task,start:s,end:c,dx:f,dy:d,isDragging:!0,x:e.clientX,y:e.clientY,mode:t?`copy`:`move`},bubbles:!0,composed:!0}))})},(e,i)=>{if(this._currentDragCursor=null,n.classList.remove(`dragging`),n.style.transform=``,t.style.cursor=``,this._dragAnimationFrame&&=(cancelAnimationFrame(this._dragAnimationFrame),null),e)this.requestUpdate(),this.dispatchEvent(new CustomEvent(`task-update`,{detail:{...this.task,start:s,end:c,dx:0,dy:0,isDragging:!1},bubbles:!0,composed:!0}));else if(i){let e=i.clientX-a,t=e;if(this.option.calendar.pxPerMonth){let n=I(this.getX(s)+e,this.option.calendar.start,50,this.option.calendar.pxPerMonth),r=(n.getFullYear()-s.getFullYear())*12+(n.getMonth()-s.getMonth())+(n.getDate()>15?1:0),i=new Date(s);i.setMonth(i.getMonth()+r),t=this.getX(i)-this.getX(s)}else{let n=this.option.calendar.pxPerDay/1440*l;t=Math.round(e/n)*n}let n=i.clientY-o;if(r===`y`&&(t=0),(r===`x`||this.multiDragActive)&&(n=0),t===0&&Math.abs(n)<5){this.dispatchEvent(new CustomEvent(`bar-click`,{detail:{task:this.task,event:i,isMultiSelect:i.metaKey||i.ctrlKey},bubbles:!0,composed:!0})),this._wasDragging=!0;return}let u=i.ctrlKey||i.altKey;this._wasDragging=!0,this.multiDragActive||this.dispatchEvent(new CustomEvent(`bar-click`,{detail:{task:this.task,event:i,isMultiSelect:!1},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`task-update`,{detail:{...this.task,start:s,end:c,dx:t,dy:n,isDragging:!1,mode:u?`copy`:`move`},bubbles:!0,composed:!0}))}})}updated(e){super.updated(e);let t=this.shadowRoot?.querySelector(`.bar`);if(t&&(this.option.customRendering?.barContent,this.dispatchEvent(new CustomEvent(`render-bar-content`,{detail:{container:t,task:this.task},bubbles:!0,composed:!0})),this._currentDragCursor?t.style.cursor=this._currentDragCursor:this.option.readOnly||(t.style.cursor=``)),e.has(`multiDragDx`)){let e=this.shadowRoot?.querySelector(`.task-group`);e&&(this.multiDragDx===0?(e.style.transform=``,e.style.opacity=``,e.style.pointerEvents=``):(e.style.transform=`translateX(${this.multiDragDx}px)`,e.style.opacity=`0.6`,e.style.pointerEvents=`none`))}}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`keydown`,this.handleKeyDown),window.removeEventListener(`keyup`,this.handleKeyUp)}updateCursor(e){let t=this.shadowRoot?.querySelector(`.bar`);t&&!this._currentDragCursor&&(t.style.cursor=e?`copy`:``)}onMouseEnter(e){let t=e.currentTarget;if(t.classList.contains(`dragging`))return;this.option.readOnly||(window.addEventListener(`keydown`,this.handleKeyDown),window.addEventListener(`keyup`,this.handleKeyUp),(e.ctrlKey||e.altKey)&&this.updateCursor(!0));let n=t.getBoundingClientRect();this.dispatchEvent(new CustomEvent(`bar-mouseenter`,{detail:{task:this.task,x:n.left+n.width/2,y:n.top},bubbles:!0,composed:!0}))}onMouseLeave(){this.option.readOnly||(window.removeEventListener(`keydown`,this.handleKeyDown),window.removeEventListener(`keyup`,this.handleKeyUp),this.updateCursor(!1)),this.dispatchEvent(new CustomEvent(`bar-mouseleave`,{bubbles:!0,composed:!0}))}onDblClick(e){this.dispatchEvent(new CustomEvent(`task-dblclick`,{detail:{task:this.task,event:e},bubbles:!0,composed:!0}))}onClick(e){if(e.stopPropagation(),this._wasDragging){this._wasDragging=!1;return}this.dispatchEvent(new CustomEvent(`bar-click`,{detail:{task:this.task,event:e,isMultiSelect:e.metaKey||e.ctrlKey},bubbles:!0,composed:!0}))}onConnectorDragStart(e,t){e.stopPropagation(),e.preventDefault();let n=e.target;if(n.setPointerCapture(e.pointerId),!this.shadowRoot?.querySelector(`.task-group`))return;let r=this.option.bar?.height??28,i=this.option.bar?.margin??4,a=this.getX(this.task.start),o=this.getX(this.task.end)-a,s=this.lane*(r+i)+i,c=t===`start`?a:a+o,l=s+r/2;this.dispatchEvent(new CustomEvent(`connector-drag-start`,{detail:{taskId:this.task.id,endpoint:t,startX:c,startY:l,clientX:e.clientX,clientY:e.clientY},bubbles:!0,composed:!0})),this.setupDragEvents(n,e.pointerId,e=>{this.dispatchEvent(new CustomEvent(`connector-drag-move`,{detail:{taskId:this.task.id,endpoint:t,startX:c,startY:l,clientX:e.clientX,clientY:e.clientY},bubbles:!0,composed:!0}))},e=>{this.dispatchEvent(new CustomEvent(`connector-drag-end`,{detail:{taskId:this.task.id,endpoint:t,cancelled:e},bubbles:!0,composed:!0}))})}onContextMenu(e){if(e.ctrlKey){e.preventDefault(),e.stopPropagation();return}e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent(`task-contextmenu`,{detail:{task:this.task,event:e},bubbles:!0,composed:!0}))}render(){if(!this.task||!this.option)return t.html``;let e=this.getX(this.task.start),n=this.getX(this.task.end)-e,r=this.option.bar?.height??28,i=this.option.bar?.margin??4,a=this.option.bar?.cornerRadius??4,o=this.lane*(r+i)+i,s=this.option.readOnly,c=this.task.movable??`both`,l=this.task.resizable,u=!s&&c!==`none`,d=!s;return d&&=l===void 0?!(c===`y`||c===`none`):l,t.html`
|
|
210
|
+
<div
|
|
211
|
+
class="task-group"
|
|
212
|
+
style="
|
|
213
|
+
left: ${e}px;
|
|
214
|
+
top: ${o}px;
|
|
215
|
+
width: ${n}px;
|
|
216
|
+
height: ${r}px;
|
|
217
|
+
"
|
|
218
|
+
@mouseenter="${this.onMouseEnter}"
|
|
219
|
+
@mouseleave="${this.onMouseLeave}"
|
|
220
|
+
@click="${this.onClick}"
|
|
221
|
+
@dblclick="${this.onDblClick}"
|
|
222
|
+
@contextmenu="${this.onContextMenu}"
|
|
223
|
+
>
|
|
224
|
+
<div
|
|
225
|
+
class="bar"
|
|
226
|
+
style="border-radius: ${a}px; ${this.task.style||``}; ${j(this.task.pattern)}; ${u?``:`cursor: pointer;`}"
|
|
227
|
+
@pointerdown="${u?this.onMoveStart:void 0}"
|
|
228
|
+
>
|
|
229
|
+
${this.option.customRendering?.barContent?this.option.customRendering.barContent(this.task):``}
|
|
230
|
+
</div>
|
|
231
|
+
${!this.option.customRendering?.barContent&&this.task.name?t.html`<div class="bar-label" style="${this.task.labelStyle||``}">${this.task.name}</div>`:``}
|
|
232
|
+
${d?t.html`
|
|
233
|
+
<div class="handle-left" @pointerdown="${e=>this.onResizeStart(e,`left`)}"></div>
|
|
234
|
+
<div class="handle-right" @pointerdown="${e=>this.onResizeStart(e,`right`)}"></div>
|
|
235
|
+
`:``}
|
|
236
|
+
${s?``:t.html`
|
|
237
|
+
<div
|
|
238
|
+
class="connector-left"
|
|
239
|
+
@pointerdown="${e=>this.onConnectorDragStart(e,`start`)}"
|
|
240
|
+
></div>
|
|
241
|
+
<div
|
|
242
|
+
class="connector-right"
|
|
243
|
+
@pointerdown="${e=>this.onConnectorDragStart(e,`end`)}"
|
|
244
|
+
></div>
|
|
245
|
+
`}
|
|
246
|
+
</div>
|
|
247
|
+
`}};U([(0,n.property)({type:Object})],W.prototype,`task`,void 0),U([(0,n.property)({type:Object})],W.prototype,`option`,void 0),U([(0,n.property)({type:Number})],W.prototype,`lane`,void 0),U([(0,n.property)({type:Boolean,reflect:!0})],W.prototype,`selected`,void 0),U([(0,n.property)({type:Boolean,reflect:!0})],W.prototype,`focused`,void 0),U([(0,n.property)({type:Number})],W.prototype,`multiDragDx`,void 0),U([(0,n.property)({type:Boolean})],W.prototype,`multiDragActive`,void 0),U([(0,n.property)({type:Boolean,reflect:!0,attribute:`connector-drop-target`})],W.prototype,`connectorDropTarget`,void 0),U([(0,n.property)({type:Boolean,reflect:!0})],W.prototype,`isExporting`,void 0),W=U([(0,n.customElement)(`gantt-bar`)],W);var G=class extends t.LitElement{constructor(...e){super(...e),this.theme=`light`,this.currentTime=new Date,this.hoveredMilestoneId=null,this._cachedDays=null,this._cachedMonths=null,this._cachedYears=null,this._cachedWeeks=null,this._cachedStartTime=0,this._cachedEndTime=0,this._cachedPxPerDay=0,this._cachedPxPerMonth=void 0,this._cachedWeekStartDay=-1}injectCustomContent(e,t,n){let r=e.querySelector(`.${n}`);if(r&&r.remove(),t instanceof HTMLElement)t.classList.add(n),e.appendChild(t);else if(typeof t==`string`){let r=document.createElement(`span`);r.classList.add(n),r.innerHTML=t,e.appendChild(r)}}updated(){let e=this.shadowRoot?.querySelector(`.label-placeholder`);if(!e)return;let t=e.querySelector(`.corner-content-root`);if(t&&t.remove(),this.cornerContent){let t=this.cornerContent();t instanceof HTMLElement&&(t.classList.add(`corner-content-root`),e.appendChild(t))}this.injectCalendarCustomContent()}injectCalendarCustomContent(){this.calendarMonthContent&&(this.shadowRoot?.querySelectorAll(`[data-calendar-month]`))?.forEach(e=>{let t=e,n={year:parseInt(t.dataset.calendarMonthYear??`0`,10),month:parseInt(t.dataset.calendarMonth??`0`,10),width:parseFloat(t.dataset.calendarMonthWidth??`0`),defaultLabel:t.dataset.calendarMonthLabel??``},r=this.calendarMonthContent(n);this.injectCustomContent(t,r,`custom-month-content`)}),this.calendarDayContent&&(this.shadowRoot?.querySelectorAll(`[data-calendar-day]`))?.forEach(e=>{let t=e,n=t.dataset.calendarDay??``,r={date:new Date(n),width:parseFloat(t.dataset.calendarDayWidth??`0`),isSaturday:t.dataset.calendarDaySaturday===`true`,isSunday:t.dataset.calendarDaySunday===`true`,isHoliday:t.dataset.calendarDayHoliday===`true`,defaultLabel:t.dataset.calendarDayLabel??``},i=this.calendarDayContent(r);this.injectCustomContent(t,i,`custom-day-content`)}),this.calendarWeekContent&&(this.shadowRoot?.querySelectorAll(`[data-calendar-week]`))?.forEach(e=>{let t=e,n=parseInt(t.dataset.calendarWeek??`0`,10),r=t.dataset.calendarWeekStart??``,i={weekNumber:n,startDate:new Date(r),width:parseFloat(t.dataset.calendarWeekWidth??`0`),defaultLabel:t.dataset.calendarWeekLabel??``},a=this.calendarWeekContent(i);this.injectCustomContent(t,a,`custom-week-content`)}),this.calendarHourContent&&(this.shadowRoot?.querySelectorAll(`[data-calendar-hour]`))?.forEach(e=>{let t=e,n=parseInt(t.dataset.calendarHour??`0`,10),r=parseFloat(t.dataset.calendarHourWidth??`0`),i=t.dataset.calendarHourDate??``,a={hour:n,width:r,date:new Date(i)},o=this.calendarHourContent(a);this.injectCustomContent(t,o,`custom-hour-content`)})}get totalDays(){return B(this.option.calendar.start,this.option.calendar.end)}static{this.styles=t.css`
|
|
248
|
+
:host {
|
|
249
|
+
display: flex;
|
|
250
|
+
width: fit-content;
|
|
251
|
+
min-width: 100%;
|
|
252
|
+
box-sizing: border-box;
|
|
253
|
+
position: sticky;
|
|
254
|
+
top: 0;
|
|
255
|
+
z-index: 500;
|
|
256
|
+
}
|
|
257
|
+
.label-placeholder {
|
|
258
|
+
flex-shrink: 0;
|
|
259
|
+
box-sizing: border-box;
|
|
260
|
+
position: sticky;
|
|
261
|
+
left: 0;
|
|
262
|
+
z-index: 100;
|
|
263
|
+
background: inherit;
|
|
264
|
+
display: flex;
|
|
265
|
+
align-items: center;
|
|
266
|
+
justify-content: flex-end;
|
|
267
|
+
padding-right: 4px;
|
|
268
|
+
overflow: hidden;
|
|
269
|
+
}
|
|
270
|
+
.calendar-group {
|
|
271
|
+
display: flex;
|
|
272
|
+
flex-direction: column;
|
|
273
|
+
position: relative;
|
|
274
|
+
z-index: 70;
|
|
275
|
+
}
|
|
276
|
+
.months-container {
|
|
277
|
+
display: flex;
|
|
278
|
+
}
|
|
279
|
+
.month-cell {
|
|
280
|
+
box-sizing: border-box;
|
|
281
|
+
padding: 4px 8px;
|
|
282
|
+
font-size: 12px;
|
|
283
|
+
font-weight: bold;
|
|
284
|
+
white-space: nowrap;
|
|
285
|
+
overflow: hidden;
|
|
286
|
+
}
|
|
287
|
+
.weeks-container {
|
|
288
|
+
display: flex;
|
|
289
|
+
}
|
|
290
|
+
.week-cell {
|
|
291
|
+
box-sizing: border-box;
|
|
292
|
+
padding: 4px 0;
|
|
293
|
+
font-size: 10px;
|
|
294
|
+
font-weight: bold;
|
|
295
|
+
text-align: center;
|
|
296
|
+
flex-shrink: 0;
|
|
297
|
+
white-space: nowrap;
|
|
298
|
+
overflow: hidden;
|
|
299
|
+
}
|
|
300
|
+
.days-container {
|
|
301
|
+
display: flex;
|
|
302
|
+
}
|
|
303
|
+
.day-cell {
|
|
304
|
+
text-align: center;
|
|
305
|
+
font-size: 10px;
|
|
306
|
+
padding: 6px 0;
|
|
307
|
+
flex-shrink: 0;
|
|
308
|
+
box-sizing: border-box;
|
|
309
|
+
word-break: break-all;
|
|
310
|
+
line-height: 1.1;
|
|
311
|
+
display: flex;
|
|
312
|
+
align-items: center;
|
|
313
|
+
justify-content: center;
|
|
314
|
+
}
|
|
315
|
+
.hours-container {
|
|
316
|
+
display: flex;
|
|
317
|
+
}
|
|
318
|
+
.hour-cell {
|
|
319
|
+
text-align: center;
|
|
320
|
+
font-size: 10px;
|
|
321
|
+
padding: 2px 0;
|
|
322
|
+
flex-shrink: 0;
|
|
323
|
+
box-sizing: border-box;
|
|
324
|
+
overflow: hidden;
|
|
325
|
+
}
|
|
326
|
+
.current-time-badge {
|
|
327
|
+
position: absolute;
|
|
328
|
+
bottom: 0;
|
|
329
|
+
transform: translateX(-50%);
|
|
330
|
+
padding: 2px 4px;
|
|
331
|
+
border-radius: 4px;
|
|
332
|
+
font-size: 10px;
|
|
333
|
+
font-weight: bold;
|
|
334
|
+
white-space: nowrap;
|
|
335
|
+
z-index: 10;
|
|
336
|
+
pointer-events: none;
|
|
337
|
+
}
|
|
338
|
+
.milestone-badge {
|
|
339
|
+
position: absolute;
|
|
340
|
+
top: 0;
|
|
341
|
+
transform: translateX(-50%);
|
|
342
|
+
padding: 2px 4px;
|
|
343
|
+
border-radius: 4px;
|
|
344
|
+
font-size: 10px;
|
|
345
|
+
font-weight: bold;
|
|
346
|
+
white-space: nowrap;
|
|
347
|
+
z-index: 9;
|
|
348
|
+
pointer-events: auto;
|
|
349
|
+
color: #ffffff;
|
|
350
|
+
transition: opacity 0.2s ease;
|
|
351
|
+
cursor: default;
|
|
352
|
+
}
|
|
353
|
+
.milestone-connector {
|
|
354
|
+
position: absolute;
|
|
355
|
+
top: 19px;
|
|
356
|
+
bottom: 0px;
|
|
357
|
+
transform: translateX(-50%);
|
|
358
|
+
z-index: 8;
|
|
359
|
+
pointer-events: auto;
|
|
360
|
+
transition: opacity 0.2s ease;
|
|
361
|
+
cursor: default;
|
|
362
|
+
}
|
|
363
|
+
`}getDateX(e){return F(e,this.option.calendar.start,this.option.calendar.pxPerDay,this.option.calendar.pxPerMonth)}formatTime(e){return`${e.getHours().toString().padStart(2,`0`)}:${e.getMinutes().toString().padStart(2,`0`)}`}_buildWeeks(e,t){let n=e=>{let n=new Date(e.getTime());n.setHours(0,0,0,0);let r=(n.getDay()-t+7)%7,i=new Date(n.getTime());i.setDate(i.getDate()-r);let a=new Date(i.getFullYear(),0,1),o=Math.floor((i.getTime()-a.getTime())/864e5);return Math.floor(o/7)+1},r=[];return e.forEach(e=>{let i=e.getDay()===t,a=r[r.length-1];a&&!i?a.count++:r.push({weekNumber:n(e),startDate:new Date(e),count:1})}),r}render(){let e=R(this.theme,this.option.customTheme),n=this.option.calendar.start.getTime(),i=this.option.calendar.end.getTime(),a=this.option.calendar.pxPerDay,o=this.option.calendar.pxPerMonth,s=this.option.calendar.weekStartDay??1,c=!this._cachedDays||n!==this._cachedStartTime||i!==this._cachedEndTime,l=a!==this._cachedPxPerDay||o!==this._cachedPxPerMonth;if(c){this._cachedStartTime=n,this._cachedEndTime=i,this._cachedPxPerDay=a,this._cachedPxPerMonth=o;let e=Array.from({length:Math.ceil(this.totalDays)},(e,t)=>{let n=new Date(this.option.calendar.start);return n.setDate(n.getDate()+t),n});this._cachedDays=e;let t=[];e.forEach(e=>{let n=e.getFullYear(),r=e.getMonth(),i=t[t.length-1];if(i&&i.year===n&&i.month===r)i.count++,i.end=new Date(e),i.end.setDate(i.end.getDate()+1);else{let i=new Date(e);i.setHours(0,0,0,0);let a=new Date(e);a.setDate(a.getDate()+1),t.push({year:n,month:r,count:1,start:i,end:a})}}),t.forEach(e=>{e.start&&e.end&&(e.width=this.getDateX(e.end)-this.getDateX(e.start))}),this._cachedMonths=t;let r=[];e.forEach(e=>{let t=e.getFullYear(),n=r[r.length-1];if(n&&n.year===t)n.count++,n.end=new Date(e),n.end.setDate(n.end.getDate()+1);else{let n=new Date(e);n.setHours(0,0,0,0);let i=new Date(e);i.setDate(i.getDate()+1),r.push({year:t,count:1,start:n,end:i})}}),r.forEach(e=>{e.start&&e.end&&(e.width=this.getDateX(e.end)-this.getDateX(e.start))}),this._cachedYears=r,this._cachedWeekStartDay=s,this._cachedWeeks=this._buildWeeks(e,s)}else l?(this._cachedPxPerDay=a,this._cachedPxPerMonth=o,this._cachedMonths.forEach(e=>{e.start&&e.end&&(e.width=this.getDateX(e.end)-this.getDateX(e.start))}),this._cachedYears.forEach(e=>{e.start&&e.end&&(e.width=this.getDateX(e.end)-this.getDateX(e.start))}),s!==this._cachedWeekStartDay&&(this._cachedWeekStartDay=s,this._cachedWeeks=this._buildWeeks(this._cachedDays,s))):s!==this._cachedWeekStartDay&&(this._cachedWeekStartDay=s,this._cachedWeeks=this._buildWeeks(this._cachedDays,s));let u=this._cachedDays,d=this._cachedMonths,f=this._cachedYears,p=`
|
|
364
|
+
background-image: linear-gradient(90deg, transparent ${this.option.calendar.pxPerDay-1}px, ${e.border} ${this.option.calendar.pxPerDay-1}px);
|
|
365
|
+
background-size: ${this.option.calendar.pxPerDay}px 100%;
|
|
366
|
+
`,m=this.option.calendar.pxPerDay/24,h=this.option.calendar.pxPerDay,g=this.option.customTheme?.showTimeDateLine??e.monthGridLine??e.border,_=this.option.calendar.start,v=(_.getHours()*60*60*1e3+_.getMinutes()*60*1e3+_.getSeconds()*1e3)/(1440*60*1e3)*h,y=v%m,b=v===0?`0px 0`:`${-v}px 0`,x=y===0?`0px 0`:`${-y}px 0`,S=`
|
|
367
|
+
background-image: linear-gradient(90deg, transparent ${h-1}px, ${g} ${h-1}px), linear-gradient(90deg, transparent ${m-1}px, ${e.border} ${m-1}px);
|
|
368
|
+
background-size: ${h}px 100%, ${m}px 100%;
|
|
369
|
+
background-position: ${b}, ${x};
|
|
370
|
+
`,C=[];if(this.option.calendar.showTime){let e=this.option.calendar.start,t=this.option.calendar.end,n=new Date(e);for(n.setHours(0,0,0,0);n.getTime()<t.getTime();){let r=n.getTime()<e.getTime()?e:n,i=new Date(n);i.setDate(i.getDate()+1);let a=i.getTime()>t.getTime()?t:i,o=r.getHours(),s=a.getHours(),c=a.getMinutes()>0||a.getSeconds()>0||a.getMilliseconds()>0,l=s===0&&!c?24:c?s+1:s,u=(a.getTime()-r.getTime())/(1e3*60*60);C.push({date:new Date(n),hStart:o,hEnd:l,widthPx:u*m}),n=new Date(i)}}let w=d[d.length-1],T=this.option.calendar.pxPerMonth!==void 0&&w?.end?this.getDateX(w.end):this.getDateX(this.option.calendar.end);return t.html`
|
|
371
|
+
<style>
|
|
372
|
+
:host {
|
|
373
|
+
background: ${e.calendarBg};
|
|
374
|
+
border-bottom: 2px solid ${e.border};
|
|
375
|
+
color: ${e.text};
|
|
376
|
+
}
|
|
377
|
+
.label-placeholder {
|
|
378
|
+
border-right: 1px solid ${e.border};
|
|
379
|
+
}
|
|
380
|
+
.months-container {
|
|
381
|
+
background: ${e.bg};
|
|
382
|
+
border-bottom: 1px solid ${e.border};
|
|
383
|
+
}
|
|
384
|
+
.hours-container {
|
|
385
|
+
border-top: 1px solid ${e.border};
|
|
386
|
+
}
|
|
387
|
+
</style>
|
|
388
|
+
<div
|
|
389
|
+
class="label-placeholder"
|
|
390
|
+
style="width: ${this.option.rowHeader?.width??150}px; background-color: ${this.option.rowHeader?.backgroundColor??e.rowHeaderBg};"
|
|
391
|
+
></div>
|
|
392
|
+
<div class="calendar-group" style="width: ${T}px; overflow: hidden;">
|
|
393
|
+
${this.option.calendar.showMonthsRow?(()=>{let n=this.option.calendar.monthTextAlign??`center`;return t.html`<div class="months-container" style="position: relative; z-index: 2;">
|
|
394
|
+
${f.map(e=>t.html`<div
|
|
395
|
+
class="month-cell"
|
|
396
|
+
style="width: ${e.width??e.count*this.option.calendar.pxPerDay}px;"
|
|
397
|
+
>
|
|
398
|
+
${e.year}
|
|
399
|
+
</div>`)}
|
|
400
|
+
</div>
|
|
401
|
+
<div
|
|
402
|
+
class="weeks-container"
|
|
403
|
+
style="background: ${e.bg}; border-bottom: 1px solid ${e.border}; position: relative;"
|
|
404
|
+
>
|
|
405
|
+
${d.map(e=>{let i=(this.option.locale??M).monthRowFormat,a=(0,r.default)(new Date(e.year,e.month)).format(i),o=e.width??e.count*this.option.calendar.pxPerDay;return t.html`<div
|
|
406
|
+
class="week-cell"
|
|
407
|
+
style="width: ${o}px; text-align: ${n}; padding: 0 2px;"
|
|
408
|
+
data-calendar-month="${e.month}"
|
|
409
|
+
data-calendar-month-year="${e.year}"
|
|
410
|
+
data-calendar-month-width="${o}"
|
|
411
|
+
data-calendar-month-label="${a}"
|
|
412
|
+
>
|
|
413
|
+
${this.calendarMonthContent?``:a}
|
|
414
|
+
</div>`})}
|
|
415
|
+
</div>`})():``}
|
|
416
|
+
${this.option.calendar.showMonths!==!1&&!this.option.calendar.showMonthsRow?t.html`<div class="months-container" style="position: relative;">
|
|
417
|
+
${d.map(e=>{let n=this.option.calendar.monthFormat||(this.option.locale??M).monthFormat,i=(0,r.default)(new Date(e.year,e.month)).format(n),a=e.width??e.count*this.option.calendar.pxPerDay;return t.html`<div
|
|
418
|
+
class="month-cell"
|
|
419
|
+
style="width: ${a}px;"
|
|
420
|
+
data-calendar-month="${e.month}"
|
|
421
|
+
data-calendar-month-year="${e.year}"
|
|
422
|
+
data-calendar-month-width="${a}"
|
|
423
|
+
data-calendar-month-label="${i}"
|
|
424
|
+
>
|
|
425
|
+
${this.calendarMonthContent?``:i}
|
|
426
|
+
</div>`})}
|
|
427
|
+
</div>`:``}
|
|
428
|
+
${this.option.calendar.showWeeks?(()=>{let n=this._cachedWeeks,r=`
|
|
429
|
+
background: ${e.bg};
|
|
430
|
+
border-bottom: 1px solid ${e.border};
|
|
431
|
+
`,i=this.option.calendar.weekFormat,a=this.option.calendar.weekTextAlign??`center`;return t.html`<div class="weeks-container" style="${r}">
|
|
432
|
+
${n.map(n=>{let r=i?i(n.weekNumber,n.startDate):`W${n.weekNumber}`,o=n.count*this.option.calendar.pxPerDay;return t.html`<div
|
|
433
|
+
class="week-cell"
|
|
434
|
+
style="width: ${o}px; border-right: 1px solid ${e.border}; text-align: ${a}; padding: 0 2px;"
|
|
435
|
+
data-calendar-week="${n.weekNumber}"
|
|
436
|
+
data-calendar-week-start="${n.startDate.toISOString()}"
|
|
437
|
+
data-calendar-week-width="${o}"
|
|
438
|
+
data-calendar-week-label="${r}"
|
|
439
|
+
>
|
|
440
|
+
${this.calendarWeekContent?``:r}
|
|
441
|
+
</div>`})}
|
|
442
|
+
</div>`})():``}
|
|
443
|
+
${this.option.calendar.showDays===!1?``:t.html`<div class="days-container" style="${this.option.calendar.showTime?``:p}">
|
|
444
|
+
${this.option.calendar.showTime?C.map((n,r)=>{let i=z(n.date,e,this.option.calendar.isHoliday),a=r===C.length-1,o=e.showTimeDateLine??e.monthGridLine??e.border,s=(this.option.locale??M).timeUnitDateFormat(n.date),c=this.option.calendar.isHoliday?this.option.calendar.isHoliday(n.date):!1;return t.html`
|
|
445
|
+
<div
|
|
446
|
+
class="day-cell"
|
|
447
|
+
style="width: ${n.widthPx}px; border-right: ${a?`none`:`1px solid ${o}`}; ${i?`background-color: ${i};`:``} font-size: 12px; font-weight: 700; justify-content: flex-start; padding-left: 4px;"
|
|
448
|
+
data-calendar-day="${n.date.toISOString()}"
|
|
449
|
+
data-calendar-day-width="${n.widthPx}"
|
|
450
|
+
data-calendar-day-saturday="${n.date.getDay()===6}"
|
|
451
|
+
data-calendar-day-sunday="${n.date.getDay()===0}"
|
|
452
|
+
data-calendar-day-holiday="${c}"
|
|
453
|
+
data-calendar-day-label="${s}"
|
|
454
|
+
>
|
|
455
|
+
${this.calendarDayContent?``:s}
|
|
456
|
+
</div>
|
|
457
|
+
`}):u.map((n,r)=>{let i=this.option.calendar.pxPerDay;r+1>this.totalDays&&(i=(this.totalDays-r)*this.option.calendar.pxPerDay);let a=z(n,e,this.option.calendar.isHoliday),o=String(n.getDate()),s=this.option.calendar.isHoliday?this.option.calendar.isHoliday(n):!1;return t.html`
|
|
458
|
+
<div
|
|
459
|
+
class="day-cell"
|
|
460
|
+
style="width: ${i}px; ${a?`background-color: ${a};`:``}"
|
|
461
|
+
data-calendar-day="${n.toISOString()}"
|
|
462
|
+
data-calendar-day-width="${i}"
|
|
463
|
+
data-calendar-day-saturday="${n.getDay()===6}"
|
|
464
|
+
data-calendar-day-sunday="${n.getDay()===0}"
|
|
465
|
+
data-calendar-day-holiday="${s}"
|
|
466
|
+
data-calendar-day-label="${o}"
|
|
467
|
+
>
|
|
468
|
+
${this.calendarDayContent?``:o}
|
|
469
|
+
</div>
|
|
470
|
+
`})}
|
|
471
|
+
</div>`}
|
|
472
|
+
${this.option.calendar.showTime?t.html`
|
|
473
|
+
<div class="hours-container" style="${S}">
|
|
474
|
+
${C.map(e=>Array.from({length:e.hEnd-e.hStart},(t,n)=>e.hStart+n).map(n=>t.html` <div
|
|
475
|
+
class="hour-cell"
|
|
476
|
+
style="width: ${m}px;"
|
|
477
|
+
data-calendar-hour="${n}"
|
|
478
|
+
data-calendar-hour-width="${m}"
|
|
479
|
+
data-calendar-hour-date="${e.date.toISOString()}"
|
|
480
|
+
>${this.calendarHourContent?``:n}</div> `))}
|
|
481
|
+
</div>
|
|
482
|
+
`:``}
|
|
483
|
+
${(()=>{let n=this.option.calendar.showMonthsRow||this.option.calendar.showDays===!1&&!this.option.calendar.showWeeks,r=this.getDateX(this.option.calendar.start),i=this.getDateX(this.option.calendar.end),a=d.map(i=>{if(!i.start)return``;let a=this.getDateX(i.start);if(a<=r)return``;let o=i.month===0,s,c=1;return o?(s=e.yearGridLine||e.monthGridLine||e.border,c=3):(s=n?e.border:e.monthGridLine||e.border,c=1),t.html`<div
|
|
484
|
+
style="position: absolute; top: 0; bottom: 0; left: ${a-1}px; width: 1px; background-color: ${s}; pointer-events: none; z-index: ${c};"
|
|
485
|
+
></div>`}),o=d[d.length-1];if(o&&i>r){let r=o.month===11,s=r?e.yearGridLine||e.monthGridLine||e.border:n?e.border:e.monthGridLine||e.border,c=r?3:1;a.push(t.html`<div
|
|
486
|
+
style="position: absolute; top: 0; bottom: 0; left: ${i-1}px; width: 1px; background-color: ${s}; pointer-events: none; z-index: ${c};"
|
|
487
|
+
></div>`)}return a})()}
|
|
488
|
+
${this.option.calendar.showCurrentTime&&this.option.calendar.showCurrentTimeBadge===!0&&this.currentTime>=this.option.calendar.start&&this.currentTime<=this.option.calendar.end?t.html`
|
|
489
|
+
<div
|
|
490
|
+
class="current-time-badge"
|
|
491
|
+
style="
|
|
492
|
+
left: ${this.getDateX(this.currentTime)}px;
|
|
493
|
+
background-color: ${e.currentTimeLine};
|
|
494
|
+
color: ${e.currentTimeLineText};
|
|
495
|
+
"
|
|
496
|
+
>
|
|
497
|
+
${this.formatTime(this.currentTime)}
|
|
498
|
+
</div>
|
|
499
|
+
`:``}
|
|
500
|
+
${(this.option.calendar.milestones??[]).map(e=>t.html`
|
|
501
|
+
<div
|
|
502
|
+
class="milestone-connector"
|
|
503
|
+
style="
|
|
504
|
+
left: ${this.getDateX(e.start)+1}px;
|
|
505
|
+
width: ${e.width??2}px;
|
|
506
|
+
background-color: ${e.color};
|
|
507
|
+
opacity: ${this.hoveredMilestoneId===e.id?1:.5};
|
|
508
|
+
"
|
|
509
|
+
@mouseenter="${()=>{this.dispatchEvent(new CustomEvent(`milestone-hover-change`,{detail:{milestoneId:e.id},bubbles:!0,composed:!0}))}}"
|
|
510
|
+
@mouseleave="${()=>{this.dispatchEvent(new CustomEvent(`milestone-hover-change`,{detail:{milestoneId:null},bubbles:!0,composed:!0}))}}"
|
|
511
|
+
></div>
|
|
512
|
+
<div
|
|
513
|
+
class="milestone-badge"
|
|
514
|
+
style="
|
|
515
|
+
left: ${this.getDateX(e.start)}px;
|
|
516
|
+
background-color: ${e.color};
|
|
517
|
+
opacity: ${this.hoveredMilestoneId===e.id?1:.5};
|
|
518
|
+
"
|
|
519
|
+
@mouseenter="${()=>{this.dispatchEvent(new CustomEvent(`milestone-hover-change`,{detail:{milestoneId:e.id},bubbles:!0,composed:!0}))}}"
|
|
520
|
+
@mouseleave="${()=>{this.dispatchEvent(new CustomEvent(`milestone-hover-change`,{detail:{milestoneId:null},bubbles:!0,composed:!0}))}}"
|
|
521
|
+
>
|
|
522
|
+
${e.name}
|
|
523
|
+
</div>
|
|
524
|
+
`)}
|
|
525
|
+
</div>
|
|
526
|
+
`}};U([(0,n.property)({type:Object})],G.prototype,`option`,void 0),U([(0,n.property)({type:String})],G.prototype,`theme`,void 0),U([(0,n.property)({type:Object})],G.prototype,`currentTime`,void 0),U([(0,n.property)({type:String})],G.prototype,`hoveredMilestoneId`,void 0),U([(0,n.property)({attribute:!1})],G.prototype,`cornerContent`,void 0),U([(0,n.property)({attribute:!1})],G.prototype,`calendarMonthContent`,void 0),U([(0,n.property)({attribute:!1})],G.prototype,`calendarDayContent`,void 0),U([(0,n.property)({attribute:!1})],G.prototype,`calendarWeekContent`,void 0),U([(0,n.property)({attribute:!1})],G.prototype,`calendarHourContent`,void 0),G=U([(0,n.customElement)(`gantt-calendar`)],G);var K=class extends t.LitElement{constructor(...e){super(...e),this.theme=`light`,this.rowId=``,this._cachedCells=null,this._cachedCellsStartTime=0,this._cachedCellsEndTime=0,this._cachedCellsPxPerDay=0,this._cachedCellsPxPerMonth=void 0,this._cachedCellsTheme=``}get totalDays(){return B(this.option.calendar.start,this.option.calendar.end)}static{this.styles=t.css`
|
|
527
|
+
:host {
|
|
528
|
+
position: absolute;
|
|
529
|
+
top: 0;
|
|
530
|
+
left: 0;
|
|
531
|
+
width: 100%;
|
|
532
|
+
height: 100%;
|
|
533
|
+
display: flex;
|
|
534
|
+
z-index: 0;
|
|
535
|
+
pointer-events: none;
|
|
536
|
+
overflow: hidden;
|
|
537
|
+
}
|
|
538
|
+
.bg-cell {
|
|
539
|
+
flex-shrink: 0;
|
|
540
|
+
position: relative;
|
|
541
|
+
overflow: hidden;
|
|
542
|
+
}
|
|
543
|
+
`}render(){let e=R(this.theme,this.option.customTheme),n=this.option.calendar.start.getTime(),r=this.option.calendar.end.getTime(),i=this.option.calendar.pxPerDay??50,a=this.option.calendar.pxPerMonth;(!this._cachedCells||n!==this._cachedCellsStartTime||r!==this._cachedCellsEndTime||i!==this._cachedCellsPxPerDay||a!==this._cachedCellsPxPerMonth||this.theme!==this._cachedCellsTheme)&&(this._cachedCellsStartTime=n,this._cachedCellsEndTime=r,this._cachedCellsPxPerDay=i,this._cachedCellsPxPerMonth=a,this._cachedCellsTheme=this.theme,this._cachedCells=Array.from({length:Math.ceil(this.totalDays)},(e,t)=>{let n=new Date(this.option.calendar.start);return n.setDate(n.getDate()+t),n}).map(t=>{let n=z(t,e,this.option.calendar.isHoliday),r=new Date(t);r.setDate(t.getDate()+1);let o=F(t,this.option.calendar.start,i,a);return{width:F(r,this.option.calendar.start,i,a)-o,color:n,date:t}}));let o=this.option.customRendering?.chartBackground;return o?t.html`
|
|
544
|
+
${this._cachedCells.map(({width:e,color:n,date:r},i)=>{let a=r.getDay(),s=this.option.calendar.isHoliday?this.option.calendar.isHoliday(r):!1,c=o({date:r,width:e,height:this.clientHeight||0,rowId:this.rowId,isSaturday:a===6,isSunday:a===0,isHoliday:s,defaultColor:n,index:i});return typeof c==`string`?t.html`<div
|
|
545
|
+
class="bg-cell"
|
|
546
|
+
style="width: ${e}px; background-color: ${n};"
|
|
547
|
+
><div style="position: absolute; inset: 0;">${t.html`${c}`}</div></div>`:t.html`<div
|
|
548
|
+
class="bg-cell"
|
|
549
|
+
style="width: ${e}px; background-color: ${n};"
|
|
550
|
+
><div style="position: absolute; inset: 0;">${c}</div></div>`})}
|
|
551
|
+
`:t.html`
|
|
552
|
+
${this._cachedCells.map(({width:e,color:n})=>t.html`<div
|
|
553
|
+
style="width: ${e}px; background-color: ${n}; flex-shrink: 0;"
|
|
554
|
+
></div>`)}
|
|
555
|
+
`}};U([(0,n.property)({type:Object})],K.prototype,`option`,void 0),U([(0,n.property)({type:String})],K.prototype,`theme`,void 0),U([(0,n.property)({type:String})],K.prototype,`rowId`,void 0),K=U([(0,n.customElement)(`gantt-row-background`)],K);var q=class extends t.LitElement{constructor(...e){super(...e),this.isDragTarget=!1,this.draggingTask=null,this.draggingTaskIds=[],this.multiDragDx=0,this.externalDragTask=null,this.theme=`light`,this.isSelected=!1,this.dropPosition=null,this.selectedTaskIds=[],this.focusedTaskId=null,this.isExporting=!1,this._cachedMonthGridLines=null,this._cachedMonthGridStartTime=0,this._cachedMonthGridEndTime=0,this._cachedMonthGridPxPerDay=0,this._cachedMonthGridPxPerMonth=0}getDateX(e){return F(e,this.option.calendar.start,this.option.calendar.pxPerDay,this.option.calendar.pxPerMonth)}getMarkerPath(e,t){let n=t/2;switch(e){case`triangle-up`:return`M 0 ${t} L ${n} 0 L ${t} ${t} Z`;case`triangle-down`:return`M 0 0 L ${t} 0 L ${n} ${t} Z`;case`triangle-left`:return`M ${t} 0 L 0 ${n} L ${t} ${t} Z`;case`triangle-right`:return`M 0 0 L ${t} ${n} L 0 ${t} Z`;case`diamond`:return`M ${n} 0 L ${t} ${n} L ${n} ${t} L 0 ${n} Z`;case`square`:return`M 0 0 L ${t} 0 L ${t} ${t} L 0 ${t} Z`;default:return`M 0 ${t} L ${n} 0 L ${t} ${t} Z`}}static{this.styles=t.css`
|
|
556
|
+
:host {
|
|
557
|
+
display: block;
|
|
558
|
+
width: fit-content;
|
|
559
|
+
min-width: 100%;
|
|
560
|
+
box-sizing: border-box;
|
|
561
|
+
background-color: transparent;
|
|
562
|
+
}
|
|
563
|
+
.row-container {
|
|
564
|
+
display: flex;
|
|
565
|
+
height: 100%;
|
|
566
|
+
box-sizing: border-box;
|
|
567
|
+
background: inherit;
|
|
568
|
+
position: relative;
|
|
569
|
+
}
|
|
570
|
+
.row-container.drop-top::before {
|
|
571
|
+
content: '';
|
|
572
|
+
position: absolute;
|
|
573
|
+
top: 0;
|
|
574
|
+
left: 0;
|
|
575
|
+
right: 0;
|
|
576
|
+
height: 2px;
|
|
577
|
+
background-color: #3b82f6;
|
|
578
|
+
z-index: 110;
|
|
579
|
+
pointer-events: none;
|
|
580
|
+
}
|
|
581
|
+
.row-container.drop-bottom::after {
|
|
582
|
+
content: '';
|
|
583
|
+
position: absolute;
|
|
584
|
+
bottom: 0;
|
|
585
|
+
left: 0;
|
|
586
|
+
right: 0;
|
|
587
|
+
height: 2px;
|
|
588
|
+
background-color: #3b82f6;
|
|
589
|
+
z-index: 110;
|
|
590
|
+
pointer-events: none;
|
|
591
|
+
}
|
|
592
|
+
.row-header {
|
|
593
|
+
font-size: 13px;
|
|
594
|
+
display: flex;
|
|
595
|
+
align-items: center;
|
|
596
|
+
gap: 0;
|
|
597
|
+
flex-shrink: 0;
|
|
598
|
+
box-sizing: border-box;
|
|
599
|
+
position: sticky;
|
|
600
|
+
left: 0;
|
|
601
|
+
z-index: 100;
|
|
602
|
+
}
|
|
603
|
+
.row-header-content {
|
|
604
|
+
flex-grow: 1;
|
|
605
|
+
padding: 6px 12px;
|
|
606
|
+
white-space: nowrap;
|
|
607
|
+
overflow: hidden;
|
|
608
|
+
text-overflow: ellipsis;
|
|
609
|
+
}
|
|
610
|
+
:host([isexporting]) .row-header-content,
|
|
611
|
+
:host([isexporting]) .row-header-content * {
|
|
612
|
+
text-overflow: clip !important;
|
|
613
|
+
}
|
|
614
|
+
.bars-container {
|
|
615
|
+
flex: none;
|
|
616
|
+
position: relative;
|
|
617
|
+
}
|
|
618
|
+
.grid-background {
|
|
619
|
+
position: absolute;
|
|
620
|
+
top: 0;
|
|
621
|
+
left: 0;
|
|
622
|
+
width: 100%;
|
|
623
|
+
height: 100%;
|
|
624
|
+
pointer-events: none;
|
|
625
|
+
}
|
|
626
|
+
`}handleDragStart(e){if(this.isSelected||this.dispatchEvent(new CustomEvent(`row-clicked`,{detail:{rowId:this.row.id,event:e},bubbles:!0,composed:!0})),e.dataTransfer){e.dataTransfer.setData(`text/plain`,this.row.id),e.dataTransfer.effectAllowed=`move`;let t=R(this.theme,this.option.customTheme),n=document.createElement(`div`);n.style.position=`absolute`,n.style.top=`-1000px`,n.style.left=`-1000px`,n.style.display=`flex`,n.style.flexDirection=`column`,n.style.zIndex=`9999`,n.style.width=`fit-content`,n.style.boxShadow=`0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)`,n.style.border=`1px solid ${t.border}`,n.style.borderRadius=`4px`,n.style.overflow=`hidden`;let r=[];if(this.isSelected){let e=this.getRootNode(),t=Array.from(e.querySelectorAll(`gantt-row[isselected]`));r=t.length>0?t:[this]}else r=[this];let i=r.slice(0,10);if(i.forEach((e,r)=>{let a=e.shadowRoot?.querySelector(`.row-header`);if(a){let o=a.cloneNode(!0),s=window.getComputedStyle(a);o.style.width=s.width,o.style.minWidth=s.minWidth,o.style.height=`${e.offsetHeight}px`,o.style.boxSizing=s.boxSizing,o.style.background=s.backgroundColor,o.style.color=s.color,o.style.fontSize=s.fontSize,o.style.display=s.display,o.style.alignItems=s.alignItems,o.style.padding=s.padding,o.style.border=`none`,o.style.borderBottom=r<i.length-1?`1px solid ${t.border}`:`none`,o.style.cursor=`grabbing`,n.appendChild(o)}}),r.length>10){let e=document.createElement(`div`);e.style.padding=`4px 8px`,e.style.background=t.bg,e.style.color=t.text,e.style.fontSize=`11px`,e.style.textAlign=`center`,e.textContent=`+ ${r.length-10} more`,n.appendChild(e)}document.body.appendChild(n),e.dataTransfer.setDragImage(n,0,0),setTimeout(()=>{document.body.removeChild(n)},0)}}handleHeaderClick(e){this.dispatchEvent(new CustomEvent(`row-clicked`,{detail:{rowId:this.row.id,event:e},bubbles:!0,composed:!0})),e.stopPropagation()}handleHeaderContextMenu(e){e.preventDefault(),this.dispatchEvent(new CustomEvent(`row-header-contextmenu`,{detail:{rowId:this.row.id,row:this.row,event:e,target:e.currentTarget},bubbles:!0,composed:!0}))}handleHeaderDblClick(e){this.dispatchEvent(new CustomEvent(`row-header-dblclick`,{detail:{rowId:this.row.id,row:this.row,event:e,target:e.currentTarget},bubbles:!0,composed:!0}))}updated(e){if(super.updated(e),!(e.has(`row`)||e.has(`option`)||e.has(`isSelected`)||e.has(`theme`)))return;let n=this.shadowRoot?.querySelector(`.row-header-content`);n&&(0,t.render)(this.option.customRendering?.rowHeaderContent?this.option.customRendering.rowHeaderContent(this.row):this.row.name,n)}render(){let e=R(this.theme,this.option.customTheme),n=[...this.row.tasks];if(this.externalDragTask){let e={...this.externalDragTask.task,start:this.externalDragTask.currentStart,end:this.externalDragTask.currentEnd,style:`${this.externalDragTask.task.style||``}; opacity: 0.6; pointer-events: none;`};n=[...n,e]}let r,a,o=this.row.tasks.find(e=>this.draggingTask&&e.id===this.draggingTask.id);if(this.draggingTask?.mode===`copy`&&o){let e=n.filter(e=>e.id!==this.draggingTask.id);e.push({...o,id:`${o.id}-static`,movable:`none`,resizable:!1,style:`${o.style||``}; opacity: 0.5;`});let t=L(e);r=t.tasksWithLanes,a=t.laneCount;let i=r.find(e=>e.id===`${o.id}-static`);i&&r.push({...o,lane:i.lane})}else{let e=L(n);r=e.tasksWithLanes,a=e.laneCount}let s=this.option.bar?.height??28,c=this.option.bar?.margin??4,l=a*(s+c)+c;this.style.height=`${l}px`;let u=``,d=null,f=this.option.calendar.start.getTime(),p=this.option.calendar.end.getTime(),m=this.option.calendar.pxPerDay,h=this.option.calendar.pxPerMonth??0;if(!this._cachedMonthGridLines||f!==this._cachedMonthGridStartTime||p!==this._cachedMonthGridEndTime||m!==this._cachedMonthGridPxPerDay||h!==this._cachedMonthGridPxPerMonth){this._cachedMonthGridStartTime=f,this._cachedMonthGridEndTime=p,this._cachedMonthGridPxPerDay=m,this._cachedMonthGridPxPerMonth=h;let e=new Date(this.option.calendar.start),t=this.getDateX(e),n=this.option.calendar.end,r=new Date(n.getFullYear(),n.getMonth()+1,1),i=this.option.calendar.pxPerMonth===void 0?this.getDateX(n):this.getDateX(r),a=[],o=new Date(e);for(o.setDate(1),o.setHours(0,0,0,0);o<=r;){let e=this.getDateX(o);if(e>t&&e<=i){let t=o.getMonth()===0;a.push({left:e,isYearBoundary:t})}o.setMonth(o.getMonth()+1)}this._cachedMonthGridLines=a}if(d=this._cachedMonthGridLines,this.option.calendar.showMonthsRow)u=``;else if(this.option.calendar.showTime){let t=this.option.calendar.pxPerDay/24,n=this.option.snapDuration??60,r=this.option.calendar.pxPerDay/1440*n,i=this.option.calendar.pxPerDay,a=this.option.customTheme?.showTimeDateLine??e.monthGridLine??e.gridLine,o=this.option.calendar.start,s=(o.getHours()*60*60*1e3+o.getMinutes()*60*1e3+o.getSeconds()*1e3)/(1440*60*1e3)*i,c=s%t,l=s%r,d=s===0?`0px 0`:`${-s}px 0`,f=c===0?`0px 0`:`${-c}px 0`,p=l===0?`0px 0`:`${-l}px 0`,m=[`linear-gradient(90deg, transparent ${i-1}px, ${a} ${i-1}px)`,`linear-gradient(90deg, transparent ${t-1}px, ${e.gridLine} ${t-1}px)`,`linear-gradient(90deg, transparent ${r-1}px, ${e.subGridLine} ${r-1}px)`],h=[`${i}px 100%`,`${t}px 100%`,`${r}px 100%`],g=[d,f,p];u=`
|
|
627
|
+
background-image: ${m.join(`, `)};
|
|
628
|
+
background-size: ${h.join(`, `)};
|
|
629
|
+
background-position: ${g.join(`, `)};
|
|
630
|
+
`}else{let t=this.option.calendar.pxPerDay,n=this.option.calendar.start,r=(n.getHours()*60*60*1e3+n.getMinutes()*60*1e3+n.getSeconds()*1e3)/(1440*60*1e3)*t,i=r===0?`0px 0`:`${-r}px 0`;u=`
|
|
631
|
+
background-image: linear-gradient(90deg, transparent ${t-1}px, ${e.gridLine} ${t-1}px);
|
|
632
|
+
background-size: ${t}px 100%;
|
|
633
|
+
background-position: ${i};
|
|
634
|
+
`}let g=this.option.enableRowReordering&&!this.option.readOnly,_=this.row.visible===!1,v=this.isSelected?e.rowSelectedHeader:_?e.rowHiddenBg:e.rowHeaderBg,y=v.includes(`gradient`)?`background: ${v};`:`background-color: ${v};`;return t.html`
|
|
635
|
+
<style>
|
|
636
|
+
:host {
|
|
637
|
+
color: ${e.text};
|
|
638
|
+
background-color: ${_?e.rowHiddenBg:`transparent`};
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.row-header {
|
|
642
|
+
cursor: ${g?`grab`:`pointer`};
|
|
643
|
+
border-right: 1px solid ${e.border};
|
|
644
|
+
border-bottom: 1px solid ${e.border};
|
|
645
|
+
box-sizing: border-box;
|
|
646
|
+
}
|
|
647
|
+
.row-header:active {
|
|
648
|
+
cursor: ${g?`grabbing`:`pointer`};
|
|
649
|
+
}
|
|
650
|
+
.bars-container {
|
|
651
|
+
border-bottom: 1px solid ${e.border};
|
|
652
|
+
box-sizing: border-box;
|
|
653
|
+
}
|
|
654
|
+
.hidden-row-overlay {
|
|
655
|
+
position: absolute;
|
|
656
|
+
top: 0;
|
|
657
|
+
left: 0;
|
|
658
|
+
width: 100%;
|
|
659
|
+
height: 100%;
|
|
660
|
+
z-index: 5;
|
|
661
|
+
pointer-events: none;
|
|
662
|
+
opacity: 0.5;
|
|
663
|
+
}
|
|
664
|
+
.selected-row-overlay {
|
|
665
|
+
position: absolute;
|
|
666
|
+
top: 0;
|
|
667
|
+
left: 0;
|
|
668
|
+
width: 100%;
|
|
669
|
+
height: 100%;
|
|
670
|
+
z-index: 1;
|
|
671
|
+
pointer-events: none;
|
|
672
|
+
background-color: ${e.rowSelected};
|
|
673
|
+
opacity: 0.5;
|
|
674
|
+
}
|
|
675
|
+
</style>
|
|
676
|
+
<div class="row-container ${this.dropPosition?`drop-${this.dropPosition}`:``}">
|
|
677
|
+
<div
|
|
678
|
+
class="row-header"
|
|
679
|
+
style="width: ${this.option.rowHeader?.width??150}px; ${y}"
|
|
680
|
+
draggable="${g?`true`:`false`}"
|
|
681
|
+
@dragstart="${g?this.handleDragStart:void 0}"
|
|
682
|
+
@click="${this.handleHeaderClick}"
|
|
683
|
+
@dblclick="${this.handleHeaderDblClick}"
|
|
684
|
+
@contextmenu="${this.handleHeaderContextMenu}"
|
|
685
|
+
>
|
|
686
|
+
<div
|
|
687
|
+
class="row-header-content"
|
|
688
|
+
style="${this.option.customRendering?.rowHeaderContent?`padding: 0; height: 100%;`:``}"
|
|
689
|
+
></div>
|
|
690
|
+
</div>
|
|
691
|
+
<div class="bars-container" style="width: ${(()=>{if(this.option.calendar.pxPerMonth!==void 0){let e=this.option.calendar.end;return this.getDateX(new Date(e.getFullYear(),e.getMonth()+1,1))}return this.getDateX(this.option.calendar.end)})()}px">
|
|
692
|
+
${this.option.calendar.showRowBackground!==!1&&!this.option.calendar.showMonthsRow?t.html`<gantt-row-background .option="${this.option}" .theme="${this.theme}" .rowId="${this.row.id}" /> `:``}
|
|
693
|
+
${this.isSelected?t.html`<div class="selected-row-overlay"></div>`:``}
|
|
694
|
+
${u?t.html`<div class="grid-background" style="${u}"></div>`:``}
|
|
695
|
+
${d?d.map(n=>{let r;return r=n.isYearBoundary?e.yearGridLine||e.monthGridLine||e.gridLine:this.option.calendar.showMonthsRow||this.option.calendar.showDays===!1&&!this.option.calendar.showWeeks?e.gridLine:e.monthGridLine||e.gridLine,t.html`<div style="position: absolute; top: 0; left: ${n.left-1}px; width: 1px; height: 100%; background-color: ${r}; pointer-events: none; z-index: 1;"></div>`}):``}
|
|
696
|
+
${_?t.html`<div class="hidden-row-overlay" style="background: ${e.rowHiddenBg};"></div>`:``}
|
|
697
|
+
${(0,i.repeat)(r,e=>e.id,e=>{let n=this.draggingTask?.id===e.id,r=!n&&this.draggingTaskIds.length>=2&&this.draggingTaskIds.includes(e.id),i=n?{...e,start:this.draggingTask.start,end:this.draggingTask.end}:e,a=this.selectedTaskIds.includes(e.id),o=r?this.multiDragDx:0,s=n&&this.draggingTaskIds.length>=2;return t.html`
|
|
698
|
+
<gantt-bar
|
|
699
|
+
.task="${i}"
|
|
700
|
+
.option="${this.option}"
|
|
701
|
+
.lane="${e.lane}"
|
|
702
|
+
.selected="${a}"
|
|
703
|
+
.focused="${this.focusedTaskId===e.id}"
|
|
704
|
+
.multiDragDx="${o}"
|
|
705
|
+
.multiDragActive="${s}"
|
|
706
|
+
.isExporting="${this.isExporting}"
|
|
707
|
+
/>
|
|
708
|
+
`})}
|
|
709
|
+
${(this.row.markers??[]).map(e=>{let n=Math.min(s,12),r=this.getDateX(e.date),i=e.color??`#ef4444`,a=e.anchor===`center`,o=a?l/2-n:(l-n)/2,c=e.anchor===`start`?r:e.anchor===`end`?r-n:r-n/2,u=e.anchor===`end`;return t.html`
|
|
710
|
+
<div
|
|
711
|
+
class="marker-wrapper"
|
|
712
|
+
style="
|
|
713
|
+
position: absolute;
|
|
714
|
+
left: ${c}px;
|
|
715
|
+
top: ${o}px;
|
|
716
|
+
z-index: 2;
|
|
717
|
+
display: flex;
|
|
718
|
+
${a?`flex-direction: column; align-items: center; width: ${n}px; overflow: visible;`:`align-items: center; ${u?`flex-direction: row-reverse;`:``}`}
|
|
719
|
+
pointer-events: auto;
|
|
720
|
+
cursor: default;
|
|
721
|
+
white-space: nowrap;
|
|
722
|
+
"
|
|
723
|
+
title="${e.name??``}"
|
|
724
|
+
>
|
|
725
|
+
<svg
|
|
726
|
+
class="marker-icon"
|
|
727
|
+
width="${n}"
|
|
728
|
+
height="${n}"
|
|
729
|
+
viewBox="0 0 ${n} ${n}"
|
|
730
|
+
style="
|
|
731
|
+
flex-shrink: 0;
|
|
732
|
+
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
|
|
733
|
+
${e.style??``}
|
|
734
|
+
"
|
|
735
|
+
>
|
|
736
|
+
<path d="${this.getMarkerPath(e.type,n)}" fill="${i}" />
|
|
737
|
+
</svg>
|
|
738
|
+
${e.name?t.html`<span style="
|
|
739
|
+
font-size: 10px;
|
|
740
|
+
color: ${i};
|
|
741
|
+
line-height: 1;
|
|
742
|
+
${a?`padding: 1px 0 0 0;`:`padding: 0 2px;`}
|
|
743
|
+
">${e.name}</span>`:``}
|
|
744
|
+
</div>
|
|
745
|
+
`})}
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
`}};U([(0,n.property)({type:Object})],q.prototype,`row`,void 0),U([(0,n.property)({type:Object})],q.prototype,`option`,void 0),U([(0,n.property)({type:Boolean})],q.prototype,`isDragTarget`,void 0),U([(0,n.property)({type:Object})],q.prototype,`draggingTask`,void 0),U([(0,n.property)({type:Array})],q.prototype,`draggingTaskIds`,void 0),U([(0,n.property)({type:Number})],q.prototype,`multiDragDx`,void 0),U([(0,n.property)({type:Object})],q.prototype,`externalDragTask`,void 0),U([(0,n.property)({type:String})],q.prototype,`theme`,void 0),U([(0,n.property)({type:Boolean,reflect:!0})],q.prototype,`isSelected`,void 0),U([(0,n.property)({type:String})],q.prototype,`dropPosition`,void 0),U([(0,n.property)({type:Array})],q.prototype,`selectedTaskIds`,void 0),U([(0,n.property)({type:String})],q.prototype,`focusedTaskId`,void 0),U([(0,n.property)({type:Boolean,reflect:!0})],q.prototype,`isExporting`,void 0),q=U([(0,n.customElement)(`gantt-row`)],q);function J(e,t,n,r,i,a,o,s){let c=n=>{if(Math.abs(t-r)<1)return`M ${e} ${t} L ${n} ${r}`;if(e<n){let i=(e+n)/2,a=r>t?1:-1,o=Math.min(s,i-e,n-i,Math.abs(r-t)/2);return[`M ${e} ${t}`,`L ${i-o} ${t}`,`Q ${i} ${t} ${i} ${t+a*o}`,`L ${i} ${r-a*o}`,`Q ${i} ${r} ${i+o} ${r}`,`L ${n} ${r}`].join(` `)}else{let i=Math.max(12,s+4),c=e+i,l=n-i,u=(t+r)/2,d=Math.abs(t-r)<a?u+a+o:u,f=d-t,p=r-d,m=f>=0?1:-1,h=p>=0?1:-1,g=l-c,_=g>=0?1:-1,v=Math.min(s,i,Math.abs(f)/2),y=Math.min(s,Math.abs(f)/2,Math.abs(g)/2),b=Math.min(s,Math.abs(g)/2,Math.abs(p)/2),x=Math.min(s,Math.abs(p)/2,i);return[`M ${e} ${t}`,`L ${c-v} ${t}`,`Q ${c} ${t} ${c} ${t+m*v}`,`L ${c} ${d-m*y}`,`Q ${c} ${d} ${c+_*y} ${d}`,`L ${l-_*b} ${d}`,`Q ${l} ${d} ${l} ${d+h*b}`,`L ${l} ${r-h*x}`,`Q ${l} ${r} ${l+x} ${r}`,`L ${n} ${r}`].join(` `)}};return{pathD:c(i),hitPathD:c(n)}}var Y=t.css`
|
|
749
|
+
:host {
|
|
750
|
+
display: block;
|
|
751
|
+
width: 100%;
|
|
752
|
+
height: 100%;
|
|
753
|
+
box-sizing: border-box;
|
|
754
|
+
position: relative;
|
|
755
|
+
}
|
|
756
|
+
:host(:focus-visible) {
|
|
757
|
+
outline: 2px solid #3b82f6;
|
|
758
|
+
outline-offset: -2px;
|
|
759
|
+
}
|
|
760
|
+
.scroll-container {
|
|
761
|
+
width: 100%;
|
|
762
|
+
height: 100%;
|
|
763
|
+
overflow-x: auto;
|
|
764
|
+
overflow-y: auto;
|
|
765
|
+
position: relative;
|
|
766
|
+
overflow-anchor: none;
|
|
767
|
+
}
|
|
768
|
+
.dependency-lines {
|
|
769
|
+
position: absolute;
|
|
770
|
+
top: 0;
|
|
771
|
+
left: 0;
|
|
772
|
+
pointer-events: none;
|
|
773
|
+
z-index: 10;
|
|
774
|
+
}
|
|
775
|
+
.tooltip {
|
|
776
|
+
position: fixed;
|
|
777
|
+
transform: translate(-50%, -100%);
|
|
778
|
+
padding: 4px 8px;
|
|
779
|
+
border-radius: 4px;
|
|
780
|
+
font-size: 11px;
|
|
781
|
+
white-space: nowrap;
|
|
782
|
+
pointer-events: none;
|
|
783
|
+
z-index: 1000;
|
|
784
|
+
margin-top: -6px;
|
|
785
|
+
text-align: left;
|
|
786
|
+
line-height: 1.4;
|
|
787
|
+
opacity: 0;
|
|
788
|
+
transition: opacity 0.2s ease;
|
|
789
|
+
}
|
|
790
|
+
.tooltip.visible {
|
|
791
|
+
opacity: 1;
|
|
792
|
+
}
|
|
793
|
+
.tooltip-row {
|
|
794
|
+
display: block;
|
|
795
|
+
}
|
|
796
|
+
.tooltip::after {
|
|
797
|
+
content: '';
|
|
798
|
+
position: absolute;
|
|
799
|
+
top: 100%;
|
|
800
|
+
left: 50%;
|
|
801
|
+
margin-left: -4px;
|
|
802
|
+
border-width: 4px;
|
|
803
|
+
border-style: solid;
|
|
804
|
+
}
|
|
805
|
+
.drag-info-overlay {
|
|
806
|
+
position: fixed;
|
|
807
|
+
top: 0;
|
|
808
|
+
left: 50%;
|
|
809
|
+
transform: translateX(-50%);
|
|
810
|
+
padding: 10px 20px;
|
|
811
|
+
border-radius: 8px;
|
|
812
|
+
font-size: 14px;
|
|
813
|
+
pointer-events: none;
|
|
814
|
+
z-index: 2000;
|
|
815
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
816
|
+
display: flex;
|
|
817
|
+
flex-direction: column;
|
|
818
|
+
align-items: center;
|
|
819
|
+
gap: 4px;
|
|
820
|
+
text-align: center;
|
|
821
|
+
opacity: 0;
|
|
822
|
+
transition: opacity 0.2s ease;
|
|
823
|
+
}
|
|
824
|
+
.drag-info-overlay.visible {
|
|
825
|
+
opacity: 1;
|
|
826
|
+
}
|
|
827
|
+
.drag-info-sub {
|
|
828
|
+
font-size: 12px;
|
|
829
|
+
}
|
|
830
|
+
.dependency-line {
|
|
831
|
+
stroke-width: 2;
|
|
832
|
+
fill: none;
|
|
833
|
+
pointer-events: none;
|
|
834
|
+
}
|
|
835
|
+
.dependency-arrow-line {
|
|
836
|
+
stroke-width: 0;
|
|
837
|
+
}
|
|
838
|
+
.dependency-hit-area {
|
|
839
|
+
stroke-width: 16;
|
|
840
|
+
stroke: transparent;
|
|
841
|
+
fill: none;
|
|
842
|
+
pointer-events: stroke;
|
|
843
|
+
cursor: pointer;
|
|
844
|
+
}
|
|
845
|
+
.dependency-group:hover .dependency-line {
|
|
846
|
+
stroke-width: 3;
|
|
847
|
+
filter: drop-shadow(0 0 3px currentColor);
|
|
848
|
+
}
|
|
849
|
+
.dependency-group:hover .dependency-arrow-line {
|
|
850
|
+
stroke-width: 0;
|
|
851
|
+
}
|
|
852
|
+
.dependency-group:hover .dependency-hit-area ~ .dependency-line {
|
|
853
|
+
opacity: 1;
|
|
854
|
+
}
|
|
855
|
+
.current-time-line {
|
|
856
|
+
position: absolute;
|
|
857
|
+
width: 2px;
|
|
858
|
+
z-index: 60;
|
|
859
|
+
pointer-events: none;
|
|
860
|
+
}
|
|
861
|
+
.current-time-dot {
|
|
862
|
+
position: absolute;
|
|
863
|
+
width: 6px;
|
|
864
|
+
height: 6px;
|
|
865
|
+
border-radius: 50%;
|
|
866
|
+
z-index: 80;
|
|
867
|
+
pointer-events: none;
|
|
868
|
+
transform: translate(-50%, -50%);
|
|
869
|
+
}
|
|
870
|
+
.milestone-line {
|
|
871
|
+
position: absolute;
|
|
872
|
+
z-index: 59;
|
|
873
|
+
pointer-events: auto;
|
|
874
|
+
transition: opacity 0.2s ease;
|
|
875
|
+
cursor: default;
|
|
876
|
+
}
|
|
877
|
+
.cursor-line {
|
|
878
|
+
position: absolute;
|
|
879
|
+
width: 2px;
|
|
880
|
+
top: 0;
|
|
881
|
+
pointer-events: none;
|
|
882
|
+
z-index: 58;
|
|
883
|
+
}
|
|
884
|
+
`;function X(e,t){let n=R(e,t);return`
|
|
885
|
+
:host {
|
|
886
|
+
background: ${n.bg};
|
|
887
|
+
border: 1px solid ${n.border};
|
|
888
|
+
border-radius: 8px;
|
|
889
|
+
overflow: hidden;
|
|
890
|
+
color: ${n.text};
|
|
891
|
+
}
|
|
892
|
+
.tooltip {
|
|
893
|
+
background-color: ${n.tooltipBg};
|
|
894
|
+
color: ${n.tooltipText};
|
|
895
|
+
}
|
|
896
|
+
.tooltip::after {
|
|
897
|
+
border-color: ${n.tooltipBg} transparent transparent transparent;
|
|
898
|
+
}
|
|
899
|
+
.drag-info-overlay {
|
|
900
|
+
background: ${n.dragOverlayBg};
|
|
901
|
+
color: ${n.dragOverlayText};
|
|
902
|
+
}
|
|
903
|
+
.drag-info-sub {
|
|
904
|
+
color: ${n.dragOverlaySubText};
|
|
905
|
+
}
|
|
906
|
+
.dependency-line {
|
|
907
|
+
stroke: ${n.dependencyLine};
|
|
908
|
+
}
|
|
909
|
+
.connector-preview-line {
|
|
910
|
+
stroke: ${n.dependencyLine};
|
|
911
|
+
stroke-width: 2;
|
|
912
|
+
stroke-dasharray: 6 3;
|
|
913
|
+
fill: none;
|
|
914
|
+
opacity: 0.7;
|
|
915
|
+
}
|
|
916
|
+
.header-resizer {
|
|
917
|
+
width: 4px;
|
|
918
|
+
cursor: col-resize;
|
|
919
|
+
z-index: 510;
|
|
920
|
+
background-color: transparent;
|
|
921
|
+
transition: background-color 0.2s;
|
|
922
|
+
}
|
|
923
|
+
.header-resizer:hover,
|
|
924
|
+
.header-resizer.resizing {
|
|
925
|
+
background-color: ${n.border};
|
|
926
|
+
}
|
|
927
|
+
`}function Z(e,t){let n=document.createElement(`a`);n.href=e,n.download=t,n.click()}async function Q(e,t=`png`,n={}){let{filename:r=`gantt-chart`,download:i=!1,scale:a=2,splitHeight:o}=n,l=e.shadowRoot?.querySelector(`.scroll-container`),u=l?l.scrollWidth:e.scrollWidth,d=l?l.scrollHeight:e.scrollHeight;console.log(`[export] splitHeight:`,o,`scrollHeight:`,d);let f=await(0,s.default)(e,{backgroundColor:`#ffffff`,scale:a,width:u,height:d,windowWidth:u,windowHeight:d});if(o&&d>o){let t=50,n=e.shadowRoot?.querySelector(`gantt-calendar`);n&&n.offsetHeight>0?t=n.offsetHeight:e.calendarHeight&&(t=e.calendarHeight),console.log(`[export] Splitting Canvas. calendarHeight:`,t);let r=f.height/d,i=Math.floor(o*r),a=Math.floor(t*r),s=f.height,c=f.width,l=s-a,u=i-a;if(u>0){let e=Math.ceil(l/u),t=s+(e-1)*a,n=document.createElement(`canvas`);n.width=c,n.height=t;let o=n.getContext(`2d`);if(o){o.drawImage(f,0,0,c,i,0,0,c,i);let l=i,p=i;for(let t=1;t<e;t++){o.drawImage(f,0,0,c,a,0,p,c,a),p+=a;let e=s-l,t=Math.min(u,e);o.drawImage(f,0,l,c,t,0,p,c,t),l+=t,p+=t}f=n,d=t/r,console.log(`[export] Split complete. new scrollHeight:`,d)}else console.warn(`[export] Failed to get 2D context for new canvas. It might be too large.`)}}if(t===`pdf`){let e=f.toDataURL(`image/jpeg`,.9),t=new c.jsPDF({orientation:u>d?`l`:`p`,unit:`px`,format:[u,d],compress:!0});return t.addImage(e,`JPEG`,0,0,u,d,void 0,`FAST`),i&&t.save(`${r}.pdf`),t.output(`blob`)}else{let e=f.toDataURL(`image/png`);return i&&Z(e,`${r}.png`),e}}var $=class extends t.LitElement{constructor(...e){super(...e),this.rows=[],this.theme=`light`,this.selectedRowIds=[],this.selectedTaskIds=[],this.externalDraggingTask=null,this.selectedRows=new Set,this.selectedTasks=new Set,this.lastClickedRowId=null,this.virtualScrollTop=0,this.dragTargetRowIndex=null,this.draggingTask=null,this.draggingTaskIds=[],this.multiDragDx=0,this.viewportHeight=400,this.dragOverlayInfo=null,this.calendarHeight=0,this.tooltip=null,this.dragOverRowId=null,this.dragOverPosition=null,this.currentTime=new Date,this.dragPreview=null,this.currentRowHeaderWidth=150,this.isResizingHeader=!1,this.hoveredMilestoneId=null,this.cursorLineX=null,this.connectorDrag=null,this._systemThemeMediaQuery=null,this.isExporting=!1,this.focusedTaskId=null,this.focusedRowId=null,this._layoutCache=null,this.resizeObserver=null,this._cachedSelectedTaskIds=[],this._cachedSelectedTasksSize=-1,this._cachedCurrentOption=null,this._lastOptionRef=null,this._lastLabelWidth=-1,this.handleSystemThemeChange=e=>{(this.option?.theme===`system`||this.option?.theme!==`light`&&this.option?.theme!==`dark`)&&(this.theme=e.matches?`dark`:`light`)},this.handleScroll=e=>{let t=e.target;this.updateScrollTop(t.scrollTop),this.hoverTimer!==void 0&&window.clearTimeout(this.hoverTimer),this.tooltip&&={...this.tooltip,visible:!1}},this.updateScrollTop=(0,o.throttle)(e=>{this.virtualScrollTop=e},100),this.handleContainerMouseMove=e=>{if(!this.option.calendar.showCursorLine)return;let t=this.shadowRoot?.querySelector(`.scroll-container`);if(!t)return;let n=t.getBoundingClientRect(),r=e.clientX-n.left+t.scrollLeft;if(r<this.currentRowHeaderWidth){this.cursorLineX=null;return}this.cursorLineX=r},this.handleContainerMouseLeave=()=>{this.cursorLineX=null},this.handleKeyDown=e=>{if(this.option.keyboard?.enabled===!1)return;let t=e.composedPath()[0];if(!(t!==this&&t?.tagName&&[`INPUT`,`TEXTAREA`,`SELECT`].includes(t.tagName)))switch(e.key){case`ArrowRight`:e.shiftKey&&!this.option.readOnly?this.moveSelectedTasksByKeyboard(1):this.moveFocusHorizontal(1),e.preventDefault();break;case`ArrowLeft`:e.shiftKey&&!this.option.readOnly?this.moveSelectedTasksByKeyboard(-1):this.moveFocusHorizontal(-1),e.preventDefault();break;case`ArrowDown`:this.moveFocusVertical(1),e.preventDefault();break;case`ArrowUp`:this.moveFocusVertical(-1),e.preventDefault();break;case`Enter`:case` `:this.focusedTaskId&&(e.ctrlKey||e.metaKey?this.toggleTaskSelection(this.focusedTaskId):this.selectSingleTask(this.focusedTaskId)),e.preventDefault();break;case`Escape`:this.clearSelection(),this.focusedTaskId=null,this.focusedRowId=null;break;case`Delete`:case`Backspace`:!this.option.readOnly&&this.selectedTasks.size>0&&this.dispatchEvent(new CustomEvent(`task-delete`,{detail:{taskIds:[...this.selectedTasks],event:e},bubbles:!0,composed:!0})),e.preventDefault();break;case`Home`:this.focusFirstOrLastTaskInRow(`first`),e.preventDefault();break;case`End`:this.focusFirstOrLastTaskInRow(`last`),e.preventDefault();break}}}get displayRows(){return this.option.showHiddenRows?this.rows:this.rows.filter(e=>e.visible!==!1)}static{this.styles=Y}firstUpdated(){this.setupCurrentTimeTimer();let e=this.shadowRoot?.getElementById(`calendar`);this.resizeObserver=new ResizeObserver(t=>{for(let n of t)n.target===this?this.viewportHeight=n.contentRect.height:n.target===e&&(this.calendarHeight=n.target.offsetHeight)}),this.resizeObserver.observe(this),e&&this.resizeObserver.observe(e)}connectedCallback(){super.connectedCallback(),this._systemThemeMediaQuery=window.matchMedia?window.matchMedia(`(prefers-color-scheme: dark)`):null,this._systemThemeMediaQuery?.addEventListener(`change`,this.handleSystemThemeChange),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,`0`),this.setAttribute(`role`,`grid`),this.setAttribute(`aria-label`,`Gantt Chart`),this.addEventListener(`keydown`,this.handleKeyDown),this.option?.theme===`system`||this.option?.theme!==`light`&&this.option?.theme!==`dark`?this.theme=this._systemThemeMediaQuery?.matches?`dark`:`light`:this.theme=this.option.theme}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.stopCurrentTimeTimer(),this._systemThemeMediaQuery?.removeEventListener(`change`,this.handleSystemThemeChange),this.removeEventListener(`keydown`,this.handleKeyDown)}willUpdate(e){if(e.has(`option`)&&(this.option?.theme===`light`||this.option?.theme===`dark`?this.theme=this.option.theme:this._systemThemeMediaQuery&&(this.theme=this._systemThemeMediaQuery.matches?`dark`:`light`)),e.has(`option`)&&(this.setupCurrentTimeTimer(),this.isResizingHeader||(this.currentRowHeaderWidth=this.option.rowHeader?.width??150)),(e.has(`rows`)||e.has(`option`)||e.has(`currentRowHeaderWidth`))&&(this._layoutCache=null),e.has(`selectedRowIds`)){let e=new Set(this.selectedRowIds);(e.size!==this.selectedRows.size||![...e].every(e=>this.selectedRows.has(e)))&&(this.selectedRows=e)}if(e.has(`selectedTaskIds`)){let e=new Set(this.selectedTaskIds);(e.size!==this.selectedTasks.size||![...e].every(e=>this.selectedTasks.has(e)))&&(this.selectedTasks=e)}(e.has(`selectedTasks`)||this._cachedSelectedTasksSize!==this.selectedTasks.size)&&(this._cachedSelectedTaskIds=[...this.selectedTasks],this._cachedSelectedTasksSize=this.selectedTasks.size)}updated(e){if(super.updated(e),this.tooltip){let e=this.shadowRoot?.querySelector(`.tooltip`);if(e){let n=this.option.customRendering?.tooltip?this.option.customRendering.tooltip(this.tooltip.task):void 0;if(n)typeof n==`string`?(0,t.render)((0,a.unsafeHTML)(n),e):(0,t.render)(n,e);else{let n=this.option.locale??M,r=!!this.option.calendar.pxPerMonth,i=Math.round((this.tooltip.task.end.getTime()-this.tooltip.task.start.getTime())/(1e3*60*60*24));if(r){let r=new Date(this.tooltip.task.end);r.setMonth(r.getMonth()-1),(0,t.render)(t.html`
|
|
928
|
+
<div style="font-weight: bold;">${this.tooltip.task.name}</div>
|
|
929
|
+
<div class="tooltip-row">
|
|
930
|
+
${n.yearMonthFormat(this.tooltip.task.start)} - ${n.yearMonthFormat(r)}
|
|
931
|
+
</div>
|
|
932
|
+
<div class="tooltip-row">${n.tooltip.duration(i)}</div>
|
|
933
|
+
`,e)}else (0,t.render)(t.html`
|
|
934
|
+
<div style="font-weight: bold;">${this.tooltip.task.name}</div>
|
|
935
|
+
<div class="tooltip-row">
|
|
936
|
+
${n.dateFormat(this.tooltip.task.start)} - ${n.dateFormat(this.tooltip.task.end)}
|
|
937
|
+
</div>
|
|
938
|
+
<div class="tooltip-row">${n.tooltip.duration(i)}</div>
|
|
939
|
+
`,e)}}}}updateDragOverlay(){if(!this.dragOverlayInfo||this.option.showDragInfoOverlay===!1)return;let e=R(this.theme,this.option.customTheme),n=this.shadowRoot?.querySelector(`.drag-info-overlay`);if(!n)return;n.classList.toggle(`visible`,this.dragOverlayInfo.visible),n.innerHTML=``;let{targetRow:r}=this.dragOverlayInfo,i=this.option.customRendering?.dragInfo?this.option.customRendering.dragInfo({id:this.dragOverlayInfo.id,name:this.dragOverlayInfo.name,start:this.dragOverlayInfo.start,end:this.dragOverlayInfo.end},this.dragOverlayInfo.currentStart,this.dragOverlayInfo.currentEnd,r):void 0;if(i&&(0,t.render)(i,n),n.innerHTML===``){let t=this.option.locale??M,i=!!this.option.calendar.pxPerMonth,a,o;if(i){let e=new Date(this.dragOverlayInfo.currentEnd);e.setMonth(e.getMonth()-1),a=t.yearMonthFormat(this.dragOverlayInfo.currentStart),o=t.yearMonthFormat(e)}else a=t.dateTimeFormat(this.dragOverlayInfo.currentStart),o=t.dateTimeFormat(this.dragOverlayInfo.currentEnd);n.innerHTML=`
|
|
940
|
+
<div style="font-weight: bold;">
|
|
941
|
+
${this.dragOverlayInfo.name||t.dragOverlay.noTitle}
|
|
942
|
+
</div>
|
|
943
|
+
<div class="drag-info-sub">
|
|
944
|
+
${a} -
|
|
945
|
+
${o}
|
|
946
|
+
(${V(this.dragOverlayInfo.currentStart,this.dragOverlayInfo.currentEnd,this.option.locale)})
|
|
947
|
+
</div>
|
|
948
|
+
${r?`<div class="drag-info-sub" style="margin-top: 4px; border-top: 1px solid ${e.dragOverlayDivider}; padding-top: 4px; width: 100%;">${(this.option.locale??M).dragOverlay.moveTo(r.name)}</div>`:``}`}if(this.dragOverlayInfo.clientY!==void 0){let e=this.dragOverlayInfo.clientX??0,t=this.dragOverlayInfo.clientY,r=this.getBoundingClientRect();if(e<r.left||e>r.right||t<r.top||t>r.bottom){n.classList.remove(`visible`);return}let i=n.offsetWidth||200,a=n.offsetHeight||60,o=window.innerWidth,s=window.innerHeight,c=e-i/2;c=Math.max(8,Math.min(c,o-i-8));let l=t-a-40;l<8&&(l=t+40),l+a>s-8&&(l=s-a-8),n.style.left=`${c}px`,n.style.transform=`none`,n.style.top=`${l}px`,n.style.bottom=`auto`}}hideDragOverlay(){let e=this.shadowRoot?.querySelector(`.drag-info-overlay`);e&&e.classList.remove(`visible`)}setupCurrentTimeTimer(){this.stopCurrentTimeTimer();let e=this.option.calendar.currentTimeUpdateInterval;e&&e>0&&(this.currentTimeTimer=window.setInterval(()=>{this.currentTime=new Date},e))}stopCurrentTimeTimer(){this.currentTimeTimer!==void 0&&(window.clearInterval(this.currentTimeTimer),this.currentTimeTimer=void 0)}handleHeaderResizeStart(e){e.preventDefault(),e.stopPropagation(),this.isResizingHeader=!0;let t=e.clientX,n=this.currentRowHeaderWidth,r=e.target;r.setPointerCapture(e.pointerId);let i=this.option.rowHeader?.minWidth??50,a=this.option.rowHeader?.maxWidth??2**53-1,o=e=>{let r=n+(e.clientX-t);this.currentRowHeaderWidth=Math.max(i,Math.min(a,r))},s=()=>{this.isResizingHeader=!1,r.releasePointerCapture(e.pointerId),r.removeEventListener(`pointermove`,o),r.removeEventListener(`pointerup`,s);let t=Math.round(this.currentRowHeaderWidth);this.currentRowHeaderWidth=t,this.dispatchEvent(new CustomEvent(`row-header-resize`,{detail:{width:t},bubbles:!0,composed:!0}))};r.addEventListener(`pointermove`,o),r.addEventListener(`pointerup`,s)}getDateX(e){return F(e,this.option.calendar.start,this.option.calendar.pxPerDay??50,this.option.calendar.pxPerMonth)}calculateLayout(){if(this._layoutCache)return this._layoutCache;let e=0,t=this.currentRowHeaderWidth,n=new Map,r={layouts:this.displayRows.map(r=>{let{tasksWithLanes:i,laneCount:a}=L(r.tasks),o=this.option.bar?.height??28,s=this.option.bar?.margin??4;i.forEach(r=>{let i=this.getDateX(r.start)+t,a=this.getDateX(r.end)+t-i,c=e+r.lane*(o+s)+s;n.set(r.id,{x:i,y:c,width:a,height:o,dependencies:r.dependencies})});let c=a*(o+s)+s,l={top:e,height:c};return e+=c,l}),taskCoords:n,totalHeight:e};return this._layoutCache=r,r}isMultiDrag(e){return this.selectedTasks.size>=2&&this.selectedTasks.has(e)}handleTaskUpdate(e){e.stopPropagation();let{id:t,start:n,end:r,dx:i,isDragging:a,mode:o}=e.detail,{dy:s}=e.detail,c=this.isMultiDrag(t);c&&(s=0);let l=n,u=r;if(i!==void 0){let e=this.option.calendar.pxPerDay??50,t=this.option.calendar.pxPerMonth,a=this.getDateX(n),o=this.getDateX(r);l=I(a+i,this.option.calendar.start,e,t),u=I(o+i,this.option.calendar.start,e,t)}(this.option.calendar.pxPerMonth||this.option.snapDuration&&this.option.snapDuration>=43200)&&(l.getDate()>15&&l.setMonth(l.getMonth()+1),l.setDate(1),l.setHours(0,0,0,0),u.getDate()>15&&u.setMonth(u.getMonth()+1),u.setDate(1),u.setHours(0,0,0,0));let d=-1,f,p=-1;if(this.rows.find((e,n)=>{let r=e.tasks.findIndex(e=>e.id===t);return r===-1?!1:(d=n,f=e.tasks[r],p=r,!0)}),d===-1||!f)return;let{layouts:m}=this.calculateLayout(),h=this.displayRows.findIndex(e=>e.id===this.rows[d].id);if(h===-1)return;let g=m[h].top,{tasksWithLanes:_}=L(this.rows[d].tasks),v=_.find(e=>e.id===t),y=v?v.lane:0,b=this.option.bar?.height??28,x=this.option.bar?.margin??4,S=g+(y*(b+x)+x)+s+b/2,C=-1;for(let e=0;e<m.length;e++){let t=m[e];if(S>=t.top&&S<t.top+t.height){C=e;break}}let w=C===-1?void 0:this.displayRows[C].id,T=c?[...this.selectedTasks]:void 0;if(this.dispatchEvent(new CustomEvent(`task-update`,{detail:{...e.detail,dy:s,start:l,end:u,targetRowId:w,selectedTaskIds:T},bubbles:!0,composed:!0})),a){if(this.hoverTimer!==void 0&&window.clearTimeout(this.hoverTimer),this.tooltip&&=null,(!this.draggingTask||this.draggingTask.id!==t)&&(this.draggingTask={id:t,name:e.detail.name,start:n,end:r,currentStart:l,currentEnd:u,mode:o},c?this.draggingTaskIds=[...this.selectedTasks]:this.draggingTaskIds=[]),c?this.multiDragDx=i??0:this.multiDragDx!==0&&(this.multiDragDx=0),!c){let e=C>=0?C:null;this.dragTargetRowIndex!==e&&(this.dragTargetRowIndex=e)}c?this.dragOverlayInfo={id:t,name:(this.option.locale??M).dragOverlay.movingTasks(this.selectedTasks.size),start:n,end:r,currentStart:l,currentEnd:u,visible:!0,clientX:e.detail.x,clientY:e.detail.y}:this.dragOverlayInfo={id:t,name:e.detail.name,start:n,end:r,currentStart:l,currentEnd:u,targetRow:C>=0?this.displayRows[C]:void 0,visible:!0,clientX:e.detail.x,clientY:e.detail.y},this.updateDragOverlay();return}let E=this.draggingTaskIds.length>=2;this.draggingTask=null,this.draggingTaskIds=[],this.multiDragDx=0,this.dragTargetRowIndex=null,this.dragOverlayInfo&&(this.dragOverlayInfo={...this.dragOverlayInfo,visible:!1},this.hideDragOverlay()),this.tooltip&&={...this.tooltip,visible:!1};let D=-1;if(C!==-1){let e=this.displayRows[C];D=this.rows.findIndex(t=>t.id===e.id)}if(E&&i!==void 0){let e=this.option.calendar.pxPerDay??50,t=this.option.calendar.pxPerMonth,n=this.rows.map(n=>n.tasks.some(e=>this.selectedTasks.has(e.id))?{...n,tasks:n.tasks.map(n=>{if(!this.selectedTasks.has(n.id))return n;let r=this.getDateX(n.start),a=this.getDateX(n.end),o=I(r+i,this.option.calendar.start,e,t),s=I(a+i,this.option.calendar.start,e,t);return(this.option.calendar.pxPerMonth||this.option.snapDuration&&this.option.snapDuration>=43200)&&(o.getDate()>15&&o.setMonth(o.getMonth()+1),o.setDate(1),o.setHours(0,0,0,0),s.getDate()>15&&s.setMonth(s.getMonth()+1),s.setDate(1),s.setHours(0,0,0,0)),{...n,start:o,end:s}})}:n);requestAnimationFrame(()=>{this.rows=n,this.dispatchEvent(new CustomEvent(`rows-change`,{detail:this.rows,bubbles:!0,composed:!0}))});return}if(o===`copy`){if(D!==-1){let e=[...this.rows],t={...e[D]};t.tasks=[...t.tasks];let n=`task-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,r={...f,id:n,start:l,end:u,dependencies:[]};t.tasks.push(r),e[D]=t,requestAnimationFrame(()=>{this.rows=e,this.dispatchEvent(new CustomEvent(`rows-change`,{detail:this.rows,bubbles:!0,composed:!0}))})}}else{let e=[...this.rows],t={...e[d]};if(t.tasks=[...t.tasks],e[d]=t,D!==-1&&d!==D){let n={...e[D]};n.tasks=[...n.tasks],e[D]=n;let[r]=t.tasks.splice(p,1);n.tasks.push({...r,start:l,end:u})}else t.tasks[p]={...f,start:l,end:u};requestAnimationFrame(()=>{this.rows=e,this.dispatchEvent(new CustomEvent(`rows-change`,{detail:this.rows,bubbles:!0,composed:!0}))})}}handleBarMouseEnter(e){if(this.draggingTask||this.option.showTooltip===!1)return;this.hoverTimer!==void 0&&window.clearTimeout(this.hoverTimer);let t=this.option.tooltipDelay??500;t>0?this.hoverTimer=window.setTimeout(()=>{this.tooltip={...e.detail,visible:!0}},t):this.tooltip={...e.detail,visible:!0}}handleBarMouseLeave(){this.hoverTimer!==void 0&&window.clearTimeout(this.hoverTimer),this.tooltip&&={...this.tooltip,visible:!1}}async reorderRows(e,t,n){let r=Array.isArray(e)?e:[e],i=Array.from(this.shadowRoot?.querySelectorAll(`gantt-row`)??[]),a=new Map;i.forEach(e=>{e.row&&a.set(e.row.id,e.getBoundingClientRect().top)});let o=[...this.rows],s=[];if(o.findIndex(e=>e.id===t)===-1)return;r.forEach(e=>{let t=o.findIndex(t=>t.id===e);t!==-1&&s.push(o[t])});let c=o.filter(e=>!r.includes(e.id));if(r.includes(t))return;let l=c.findIndex(e=>e.id===t);n===`bottom`&&l++,c.splice(l,0,...s),this.rows=c,await this.updateComplete,Array.from(this.shadowRoot?.querySelectorAll(`gantt-row`)??[]).forEach(e=>{if(e.row){let t=a.get(e.row.id);if(t!==void 0){let n=t-e.getBoundingClientRect().top;n!==0&&e.animate([{transform:`translateY(${n}px)`,zIndex:`1`},{transform:`translateY(0)`,zIndex:`1`}],{duration:300,easing:`ease-out`})}}}),this.dispatchEvent(new CustomEvent(`row-reordered`,{detail:{sourceId:r[0],sourceIds:r,targetId:t,position:n,rows:this.rows},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`rows-change`,{detail:this.rows,bubbles:!0,composed:!0}))}handleContainerDragOver(e){e.preventDefault();let t=e.dataTransfer&&e.dataTransfer.types.includes(`application/json`);if(t&&(e.dataTransfer.dropEffect=`copy`),!this.option.enableRowReordering&&!t)return;let n=this.shadowRoot?.querySelector(`.scroll-container`);if(!n)return;let r=n.getBoundingClientRect(),i=e.clientY-r.top+n.scrollTop-this.calendarHeight,{layouts:a}=this.calculateLayout(),o=-1;for(let e=0;e<a.length;e++){let t=a[e];if(i>=t.top&&i<t.top+t.height){o=e;break}}if(o!==-1){let s=this.displayRows[o];if(t){if((this.dragOverRowId!==s.id||this.dragOverPosition!==null)&&(this.dragOverRowId=s.id,this.dragOverPosition=null),this.externalDraggingTask){let t=this.currentRowHeaderWidth,i=n.scrollLeft,a=e.clientX-r.left+i-t,o=this.option.calendar.pxPerDay??50,c=this.option.calendar.pxPerMonth,l=this.option.snapDuration??1440,u=o/1440*l,d=I(Math.round(a/u)*u,this.option.calendar.start,o,c),f=this.externalDraggingTask.end.getTime()-this.externalDraggingTask.start.getTime(),p=new Date(d.getTime()+f);(!this.dragPreview||this.dragPreview.rowId!==s.id||this.dragPreview.currentStart.getTime()!==d.getTime())&&(this.dragPreview={task:this.externalDraggingTask,currentStart:d,currentEnd:p,rowId:s.id})}}else{let e=a[o],t=i-e.top<e.height/2?`top`:`bottom`;(this.dragOverRowId!==s.id||this.dragOverPosition!==t)&&(this.dragOverRowId=s.id,this.dragOverPosition=t)}}else this.dragOverRowId=null,this.dragOverPosition=null,this.dragPreview=null}handleContainerDragLeave(e){let t=this.shadowRoot?.querySelector(`.scroll-container`),n=e.relatedTarget;t&&t.contains(n)||(this.dragOverRowId=null,this.dragOverPosition=null,this.dragPreview=null)}handleContainerDrop(e){e.preventDefault();let t=e.dataTransfer?.getData(`application/json`);if(t){this.handleExternalTaskDrop(e,t),this.dragOverRowId=null,this.dragOverPosition=null,this.dragPreview=null;return}if(!this.option.enableRowReordering)return;let n=e.dataTransfer?.getData(`text/plain`),r=this.dragOverRowId,i=this.dragOverPosition;if(this.dragOverRowId=null,this.dragOverPosition=null,this.dragPreview=null,n&&r&&n!==r&&i)if(this.selectedRows.has(n)&&this.selectedRows.size>1){let e=Array.from(this.selectedRows);this.reorderRows(e,r,i)}else this.reorderRows(n,r,i)}handleExternalTaskDrop(e,t){try{let n=JSON.parse(t),r=this.shadowRoot?.querySelector(`.scroll-container`);if(!r)return;let i=r.getBoundingClientRect(),a=r.scrollLeft,o=r.scrollTop,s=this.currentRowHeaderWidth,c=e.clientX-i.left+a-s,l=this.option.calendar.pxPerDay??50,u=this.option.calendar.pxPerMonth,d=I(c,this.option.calendar.start,l,u),f=e.clientY-i.top+o-this.calendarHeight,{layouts:p}=this.calculateLayout(),m;for(let e=0;e<p.length;e++){let t=p[e];if(f>=t.top&&f<t.top+t.height){m=this.displayRows[e].id;break}}m&&this.dispatchEvent(new CustomEvent(`task-drop`,{detail:{task:n,dropDate:d,targetRowId:m},bubbles:!0,composed:!0}))}catch(e){console.warn(`Failed to parse dropped task data`,e)}}handleRowClicked(e){let{rowId:t,event:n}=e.detail,{shiftKey:r,ctrlKey:i,metaKey:a}=n,o=new Set(this.selectedRows);if(r&&this.lastClickedRowId){let e=this.rows.findIndex(e=>e.id===this.lastClickedRowId),n=this.rows.findIndex(e=>e.id===t);if(e!==-1&&n!==-1){let t=Math.min(e,n),r=Math.max(e,n);for(let e=t;e<=r;e++)o.add(this.rows[e].id)}}else if(i||a)o.has(t)?o.delete(t):o.add(t),this.lastClickedRowId=t;else{if(o.has(t)){this.lastClickedRowId=t;return}o.clear(),o.add(t),this.lastClickedRowId=t}this.selectedRows=o,this.dispatchEvent(new CustomEvent(`row-selection-change`,{detail:{selectedIds:Array.from(this.selectedRows)},bubbles:!0,composed:!0}))}handleRowContextMenu(e){this.selectedRows.has(e.detail.rowId)||this.handleRowClicked(e)}handleContainerClick(e){e.defaultPrevented||this.clearSelection()}handleContainerContextMenu(e){if(e.defaultPrevented)return;e.preventDefault();let t=this.shadowRoot?.querySelector(`.scroll-container`);if(!t)return;let n=t.getBoundingClientRect(),r=t.scrollLeft,i=t.scrollTop,a=this.currentRowHeaderWidth,o=e.clientY-n.top+i-this.calendarHeight,{layouts:s}=this.calculateLayout(),c;for(let e=0;e<s.length;e++){let t=s[e];if(o>=t.top&&o<t.top+t.height){c=this.displayRows[e].id;break}}if(c){let t=e.clientX-n.left+r-a,i=this.option.calendar.pxPerDay??50,o=this.option.calendar.pxPerMonth,s=I(t,this.option.calendar.start,i,o);this.dispatchEvent(new CustomEvent(`chart-contextmenu`,{detail:{event:e,date:s,rowId:c},bubbles:!0,composed:!0}))}this.clearSelection()}hitTest(e,t){let n=this.shadowRoot?.querySelector(`.scroll-container`);if(!n)return null;let r=n.getBoundingClientRect(),i=n.scrollLeft,a=n.scrollTop,o=this.currentRowHeaderWidth,s=t-r.top+a-this.calendarHeight,{layouts:c}=this.calculateLayout(),l;for(let e=0;e<c.length;e++){let t=c[e];if(s>=t.top&&s<t.top+t.height){l=this.displayRows[e].id;break}}if(!l)return null;let u=e-r.left+i-o,d=this.option.calendar.pxPerDay??50,f=this.option.calendar.pxPerMonth,p=I(u,this.option.calendar.start,d,f);return{rowId:l,date:p}}async exportImage(e=`png`,t={}){this.isExporting=!0,await this.updateComplete,await new Promise(e=>requestAnimationFrame(e));try{return await Q(this,e,t)}finally{this.isExporting=!1,await this.updateComplete}}clearSelection(){this.selectedRows.size===0&&this.selectedTasks.size===0||(this.selectedRows.size>0&&(this.selectedRows=new Set,this.dispatchEvent(new CustomEvent(`row-selection-change`,{detail:{selectedIds:[]},bubbles:!0,composed:!0}))),this.selectedTasks.size>0&&(this.selectedTasks=new Set,this.dispatchEvent(new CustomEvent(`bar-selection-change`,{detail:{selectedIds:[]},bubbles:!0,composed:!0}))))}moveFocusHorizontal(e){let t=this.displayRows;if(t.length===0)return;if(!this.focusedTaskId||!this.focusedRowId){this.focusFirstAvailableTask();return}let n=t.findIndex(e=>e.id===this.focusedRowId);if(n===-1){this.focusFirstAvailableTask();return}let r=t[n],i=[...r.tasks].sort((e,t)=>e.start.getTime()-t.start.getTime()),a=i.findIndex(e=>e.id===this.focusedTaskId);if(a===-1){i.length>0&&this.setFocus(i[0].id,r.id);return}let o=a+e;o>=0&&o<i.length?this.setFocus(i[o].id,r.id):this.moveFocusVertical(e)}moveFocusVertical(e){let t=this.displayRows;if(t.length===0)return;if(!this.focusedTaskId||!this.focusedRowId){this.focusFirstAvailableTask();return}let n=t.findIndex(e=>e.id===this.focusedRowId);if(n===-1){this.focusFirstAvailableTask();return}for(let r=n+e;r>=0&&r<t.length;r+=e){let n=t[r];if(n.tasks.length>0){let t=[...n.tasks].sort((e,t)=>e.start.getTime()-t.start.getTime()),r=e>0?t[0]:t[t.length-1];this.setFocus(r.id,n.id);return}}}focusFirstAvailableTask(){for(let e of this.displayRows)if(e.tasks.length>0){let t=[...e.tasks].sort((e,t)=>e.start.getTime()-t.start.getTime());this.setFocus(t[0].id,e.id);return}}focusFirstOrLastTaskInRow(e){if(!this.focusedRowId){this.focusFirstAvailableTask();return}let t=this.displayRows.find(e=>e.id===this.focusedRowId);if(!t||t.tasks.length===0)return;let n=[...t.tasks].sort((e,t)=>e.start.getTime()-t.start.getTime()),r=e===`first`?n[0]:n[n.length-1];this.setFocus(r.id,t.id)}setFocus(e,t){this.focusedTaskId=e,this.focusedRowId=t,this.scrollToTask(e)}toggleTaskSelection(e){let t=new Set(this.selectedTasks);t.has(e)?t.delete(e):t.add(e),this.selectedTasks=t,this.dispatchEvent(new CustomEvent(`bar-selection-change`,{detail:{selectedIds:[...t]},bubbles:!0,composed:!0}))}selectSingleTask(e){this.selectedTasks=new Set([e]),this.dispatchEvent(new CustomEvent(`bar-selection-change`,{detail:{selectedIds:[e]},bubbles:!0,composed:!0}))}moveSelectedTasksByKeyboard(e){if(this.selectedTasks.size===0)return;let t=(this.option.keyboard?.moveStep??this.option.snapDuration??1440)*60*1e3*e,n=this.rows.map(e=>e.tasks.some(e=>this.selectedTasks.has(e.id))?{...e,tasks:e.tasks.map(e=>this.selectedTasks.has(e.id)?{...e,start:new Date(e.start.getTime()+t),end:new Date(e.end.getTime()+t)}:e)}:e);for(let e of this.rows)for(let n of e.tasks){if(!this.selectedTasks.has(n.id))continue;let r=new Date(n.start.getTime()+t),i=new Date(n.end.getTime()+t);this.dispatchEvent(new CustomEvent(`task-update`,{detail:{id:n.id,name:n.name,start:r,end:i,dx:0,dy:0,isDragging:!1,mode:`move`,targetRowId:e.id},bubbles:!0,composed:!0}))}this.rows=n,this.dispatchEvent(new CustomEvent(`rows-change`,{detail:this.rows,bubbles:!0,composed:!0}))}handleBarClick(e){e.stopPropagation();let{task:t,isMultiSelect:n}=e.detail;this.draggingTask=null,this.dragTargetRowIndex=null,this.dragOverlayInfo&&(this.dragOverlayInfo={...this.dragOverlayInfo,visible:!1},this.hideDragOverlay());let r;n?(r=new Set(this.selectedTasks),r.has(t.id)?r.delete(t.id):r.add(t.id)):r=new Set([t.id]),this.selectedTasks=r,this.dispatchEvent(new CustomEvent(`bar-selection-change`,{detail:{selectedIds:[...r]},bubbles:!0,composed:!0}))}handleBarContextMenu(e){let{task:t}=e.detail;this.selectedTasks.has(t.id)||(this.selectedTasks=new Set([t.id]),this.dispatchEvent(new CustomEvent(`bar-selection-change`,{detail:{selectedIds:[t.id]},bubbles:!0,composed:!0})))}handleConnectorDragStart(e){let{taskId:t,endpoint:n,clientX:r,clientY:i}=e.detail;e.stopPropagation();let{taskCoords:a}=this.calculateLayout(),o=a.get(t),s=this.currentRowHeaderWidth,c=e.detail.startX+s,l=e.detail.startY;o&&(c=n===`start`?o.x:o.x+o.width,l=o.y+o.height/2),this.connectorDrag={sourceTaskId:t,sourceEndpoint:n,startX:c,startY:l,currentClientX:r,currentClientY:i,targetTaskId:null,targetEndpoint:null},this.tooltip&&=null}handleConnectorDragMove(e){if(!this.connectorDrag)return;e.stopPropagation();let{clientX:t,clientY:n}=e.detail,r=this.shadowRoot?.querySelector(`.scroll-container`);if(!r)return;let i=r.getBoundingClientRect(),a=t-i.left+r.scrollLeft,o=n-i.top+r.scrollTop-this.calendarHeight,{taskCoords:s}=this.calculateLayout(),c=null,l=null,u=30;for(let[e,t]of s){if(e===this.connectorDrag.sourceTaskId)continue;let n=t.y+t.height/2,r=t.x,i=t.x+t.width,s=Math.sqrt((a-r)**2+(o-n)**2),d=Math.sqrt((a-i)**2+(o-n)**2);s<u&&(u=s,c=e,l=`start`),d<u&&(u=d,c=e,l=`end`)}let d=this.connectorDrag.targetTaskId;d!==c&&(d&&this._setConnectorDropTarget(d,!1),c&&this._setConnectorDropTarget(c,!0)),this.connectorDrag={...this.connectorDrag,currentClientX:t,currentClientY:n,targetTaskId:c,targetEndpoint:l}}handleConnectorDragEnd(e){if(!this.connectorDrag)return;e.stopPropagation();let{cancelled:t}=e.detail,{sourceTaskId:n,sourceEndpoint:r,targetTaskId:i,targetEndpoint:a}=this.connectorDrag;i&&this._setConnectorDropTarget(i,!1),!t&&i&&a&&this.dispatchEvent(new CustomEvent(`dependency-create`,{detail:{sourceTaskId:n,sourceEndpoint:r,targetTaskId:i,targetEndpoint:a},bubbles:!0,composed:!0})),this.connectorDrag=null}_setConnectorDropTarget(e,t){let n=this.shadowRoot?.querySelectorAll(`gantt-row`);if(n)for(let r of n){let n=r.shadowRoot?.querySelectorAll(`gantt-bar`);if(n){for(let r of n)if(r.task?.id===e){r.connectorDropTarget=t;return}}}}handleDependencyLineClick(e,t,n){this.dispatchEvent(new CustomEvent(`dependency-click`,{detail:{event:e,sourceTaskId:n,targetTaskId:t},bubbles:!0,composed:!0}))}selectTask(e){let t=!1;for(let n of this.displayRows)if(n.tasks.some(t=>t.id===e)){t=!0;break}return t?(this.selectedTasks=new Set([e]),this.dispatchEvent(new CustomEvent(`bar-selection-change`,{detail:{selectedIds:[e]},bubbles:!0,composed:!0})),this.scrollToTask(e),!0):!1}scrollToTask(e){let{taskCoords:t}=this.calculateLayout(),n=t.get(e);if(!n)return;let r=this.shadowRoot?.querySelector(`.scroll-container`);if(!r)return;let i=this.currentRowHeaderWidth,a=n.y+this.calendarHeight,o=a+n.height,s=r.scrollTop,c=r.scrollTop+r.clientHeight;if(a<s||o>c){let e=a-r.clientHeight/2+n.height/2;r.scrollTo({top:Math.max(0,e),behavior:`smooth`})}let l=n.x,u=n.x+n.width,d=r.scrollLeft+i,f=r.scrollLeft+r.clientWidth;if(l<d||u>f){let e=l-i-20;r.scrollTo({left:Math.max(0,e),behavior:`smooth`})}}render(){let e=R(this.theme,this.option.customTheme),{layouts:n,taskCoords:r,totalHeight:a}=this.calculateLayout(),o=this.currentRowHeaderWidth;(this._lastOptionRef!==this.option||this._lastLabelWidth!==o)&&(this._cachedCurrentOption={...this.option,rowHeader:{...this.option.rowHeader,width:o}},this._lastOptionRef=this.option,this._lastLabelWidth=o);let s=this._cachedCurrentOption,c=0,l=this.displayRows.length-1;if(!this.isExporting){for(let e=0;e<n.length;e++)if(n[e].top+n[e].height>this.virtualScrollTop){c=Math.max(0,e-5);break}for(let e=c;e<n.length;e++)if(n[e].top>this.virtualScrollTop+this.viewportHeight){l=Math.min(this.displayRows.length-1,e+5);break}}let u=this.displayRows.slice(c,l+1),d=this.isExporting?0:n[c]?n[c].top:0,f=n[l],p=f?f.top+f.height:0,m=Math.max(0,a-p),h=a>this.viewportHeight,g=[],_=this.option.readOnly===!0,v=this.option.dependency?.showArrows!==!1,y=this.option.dependency?.arrowSize??8,b=this.option.dependency?.lineStyle??`orthogonal`,x=this.option.dependency?.cornerRadius??8;for(let[e,n]of r)if(n.dependencies)for(let i of n.dependencies){let a=r.get(i);if(a){let r=a.x+a.width,o=a.y+a.height/2,s=n.x,c=n.y+n.height/2,l=r<s,u=v?s-y:s,d=l?Math.max(r,u):u,f,p,m,h=this.option.bar?.height??28,S=this.option.bar?.margin??4;if(Math.abs(o-c)<1&&l)f=d>r?`M ${r} ${o} L ${d} ${c}`:``,p=s>r?`M ${r} ${o} L ${s} ${c}`:``;else if(b===`orthogonal`){let e=J(r,o,s,c,d,h,S,x);f=e.pathD,p=e.hitPathD}else if(l){let e=(r+d)/2;f=`M ${r} ${o} C ${e} ${o} ${e} ${c} ${d} ${c}`,p=`M ${r} ${o} C ${(r+s)/2} ${o} ${(r+s)/2} ${c} ${s} ${c}`}else{let e=Math.max(12,(r-s)*.15),t=(o+c)/2,n=Math.abs(o-c)<h?t+h+S:t;f=`M ${r} ${o} C ${r+e} ${o}, ${r+e} ${n}, ${(r+d)/2} ${n} S ${d-e} ${c}, ${d} ${c}`,p=`M ${r} ${o} C ${r+e} ${o}, ${r+e} ${n}, ${(r+s)/2} ${n} S ${s-e} ${c}, ${s} ${c}`}m=v?`M ${d} ${c} L ${s} ${c}`:``,g.push(t.svg`<g class="dependency-group">
|
|
949
|
+
${_?``:t.svg`<path class="dependency-hit-area" d="${p}" @click="${t=>{t.stopPropagation(),this.handleDependencyLineClick(t,e,i)}}" />`}
|
|
950
|
+
<path class="dependency-line" d="${f}" />
|
|
951
|
+
${v?t.svg`<path class="dependency-line dependency-arrow-line" d="${m}" marker-end="url(#dependency-arrowhead)" />`:``}
|
|
952
|
+
</g>`)}}let S=null;if(this.connectorDrag){let e=this.shadowRoot?.querySelector(`.scroll-container`);if(e){let n=e.getBoundingClientRect(),i=this.connectorDrag.startX,a=this.connectorDrag.startY,o,s;if(this.connectorDrag.targetTaskId&&this.connectorDrag.targetEndpoint){let t=r.get(this.connectorDrag.targetTaskId);t?(o=this.connectorDrag.targetEndpoint===`start`?t.x:t.x+t.width,s=t.y+t.height/2):(o=this.connectorDrag.currentClientX-n.left+e.scrollLeft,s=this.connectorDrag.currentClientY-n.top+e.scrollTop-this.calendarHeight)}else o=this.connectorDrag.currentClientX-n.left+e.scrollLeft,s=this.connectorDrag.currentClientY-n.top+e.scrollTop-this.calendarHeight;let c=(i+o)/2;S=t.svg`<path class="connector-preview-line" d="M ${i} ${a} C ${c} ${a} ${c} ${s} ${o} ${s}" />`}}return t.html`
|
|
953
|
+
<style>${X(this.theme,this.option.customTheme)}</style>
|
|
954
|
+
${this.isExporting?t.html`<style>:host { overflow: visible !important; height: ${this.calendarHeight+a+2}px !important; width: max-content !important; min-width: auto !important; }</style>`:``}
|
|
955
|
+
<div
|
|
956
|
+
class="scroll-container"
|
|
957
|
+
style="overflow-x: ${this.isExporting?`visible`:`auto`}; overflow-y: ${this.isExporting?`visible`:h?`auto`:`hidden`}; height: ${this.isExporting?`auto`:`100%`}; width: ${this.isExporting?`max-content`:`100%`}; min-width: auto;"
|
|
958
|
+
@scroll="${this.handleScroll}"
|
|
959
|
+
@bar-mouseenter="${this.handleBarMouseEnter}"
|
|
960
|
+
@bar-mouseleave="${this.handleBarMouseLeave}"
|
|
961
|
+
@dragover="${this.handleContainerDragOver}"
|
|
962
|
+
@dragleave="${this.handleContainerDragLeave}"
|
|
963
|
+
@drop="${this.handleContainerDrop}"
|
|
964
|
+
@click="${this.handleContainerClick}"
|
|
965
|
+
@contextmenu="${this.handleContainerContextMenu}"
|
|
966
|
+
@mousemove="${this.handleContainerMouseMove}"
|
|
967
|
+
@mouseleave="${this.handleContainerMouseLeave}"
|
|
968
|
+
@connector-drag-start="${this.handleConnectorDragStart}"
|
|
969
|
+
@connector-drag-move="${this.handleConnectorDragMove}"
|
|
970
|
+
@connector-drag-end="${this.handleConnectorDragEnd}"
|
|
971
|
+
>
|
|
972
|
+
${this.option.rowHeader?.resizable===!1?``:t.html`
|
|
973
|
+
<div
|
|
974
|
+
style="
|
|
975
|
+
position: sticky;
|
|
976
|
+
left: ${o-2}px;
|
|
977
|
+
top: 0;
|
|
978
|
+
width: 0;
|
|
979
|
+
height: 0;
|
|
980
|
+
z-index: 510;
|
|
981
|
+
overflow: visible;
|
|
982
|
+
"
|
|
983
|
+
>
|
|
984
|
+
<div
|
|
985
|
+
class="header-resizer ${this.isResizingHeader?`resizing`:``}"
|
|
986
|
+
style="height: ${this.isExporting?a:Math.max(a,this.viewportHeight)}px;"
|
|
987
|
+
@pointerdown="${this.handleHeaderResizeStart}"
|
|
988
|
+
></div>
|
|
989
|
+
</div>
|
|
990
|
+
`}
|
|
991
|
+
<gantt-calendar
|
|
992
|
+
id="calendar"
|
|
993
|
+
.option="${s}"
|
|
994
|
+
.theme="${this.theme}"
|
|
995
|
+
.currentTime="${this.currentTime}"
|
|
996
|
+
.hoveredMilestoneId="${this.hoveredMilestoneId}"
|
|
997
|
+
.cornerContent="${this.option.customRendering?.cornerContent}"
|
|
998
|
+
.calendarMonthContent="${this.option.customRendering?.calendarMonthContent}"
|
|
999
|
+
.calendarDayContent="${this.option.customRendering?.calendarDayContent}"
|
|
1000
|
+
.calendarWeekContent="${this.option.customRendering?.calendarWeekContent}"
|
|
1001
|
+
.calendarHourContent="${this.option.customRendering?.calendarHourContent}"
|
|
1002
|
+
@milestone-hover-change="${e=>{this.hoveredMilestoneId=e.detail.milestoneId}}"
|
|
1003
|
+
></gantt-calendar>
|
|
1004
|
+
|
|
1005
|
+
<svg
|
|
1006
|
+
class="dependency-lines"
|
|
1007
|
+
style="top: 0;"
|
|
1008
|
+
width="${this.getDateX(this.option.calendar.end)+o}"
|
|
1009
|
+
height="${a+this.calendarHeight}"
|
|
1010
|
+
>
|
|
1011
|
+
${v?t.svg`<defs>
|
|
1012
|
+
<marker
|
|
1013
|
+
id="dependency-arrowhead"
|
|
1014
|
+
markerWidth="${y}"
|
|
1015
|
+
markerHeight="${y}"
|
|
1016
|
+
refX="${y}"
|
|
1017
|
+
refY="${y/2}"
|
|
1018
|
+
orient="auto"
|
|
1019
|
+
markerUnits="userSpaceOnUse"
|
|
1020
|
+
>
|
|
1021
|
+
<polygon
|
|
1022
|
+
points="0 0, ${y} ${y/2}, 0 ${y}"
|
|
1023
|
+
fill="${e.dependencyLine}"
|
|
1024
|
+
class="dependency-arrowhead-fill"
|
|
1025
|
+
/>
|
|
1026
|
+
</marker>
|
|
1027
|
+
</defs>`:``}
|
|
1028
|
+
<g transform="translate(0, ${this.calendarHeight})">
|
|
1029
|
+
${g}
|
|
1030
|
+
${S}
|
|
1031
|
+
</g>
|
|
1032
|
+
</svg>
|
|
1033
|
+
|
|
1034
|
+
${this.option.calendar.showCurrentTime&&this.currentTime>=this.option.calendar.start&&this.currentTime<=this.option.calendar.end?t.html`
|
|
1035
|
+
<div
|
|
1036
|
+
class="current-time-line"
|
|
1037
|
+
style="
|
|
1038
|
+
top: ${this.calendarHeight}px;
|
|
1039
|
+
left: ${this.getDateX(this.currentTime)+o}px;
|
|
1040
|
+
height: ${a}px;
|
|
1041
|
+
background-color: ${e.currentTimeLine};
|
|
1042
|
+
"
|
|
1043
|
+
></div>
|
|
1044
|
+
<div
|
|
1045
|
+
class="current-time-dot"
|
|
1046
|
+
style="
|
|
1047
|
+
top: ${this.calendarHeight+3}px;
|
|
1048
|
+
left: ${this.getDateX(this.currentTime)+o+1}px;
|
|
1049
|
+
background-color: ${e.currentTimeLine};
|
|
1050
|
+
"
|
|
1051
|
+
></div>
|
|
1052
|
+
`:``}
|
|
1053
|
+
${(this.option.calendar.milestones??[]).map(e=>t.html`
|
|
1054
|
+
<div
|
|
1055
|
+
class="milestone-line"
|
|
1056
|
+
style="
|
|
1057
|
+
top: ${this.calendarHeight}px;
|
|
1058
|
+
left: ${this.getDateX(e.start)+o}px;
|
|
1059
|
+
height: ${a}px;
|
|
1060
|
+
width: ${e.width??2}px;
|
|
1061
|
+
background-color: ${e.color};
|
|
1062
|
+
opacity: ${this.hoveredMilestoneId===e.id?1:.5};
|
|
1063
|
+
${e.style??``}
|
|
1064
|
+
"
|
|
1065
|
+
@mouseenter="${()=>{this.hoveredMilestoneId=e.id}}"
|
|
1066
|
+
@mouseleave="${()=>{this.hoveredMilestoneId=null}}"
|
|
1067
|
+
></div>
|
|
1068
|
+
`)}
|
|
1069
|
+
${this.option.calendar.showCursorLine&&this.cursorLineX!==null?t.html`
|
|
1070
|
+
<div
|
|
1071
|
+
class="cursor-line"
|
|
1072
|
+
style="
|
|
1073
|
+
left: ${this.cursorLineX}px;
|
|
1074
|
+
height: ${this.calendarHeight+(this.isExporting?a:a||this.viewportHeight)}px;
|
|
1075
|
+
background-color: ${this.option.calendar.cursorLineColor??e.currentTimeLine};
|
|
1076
|
+
"
|
|
1077
|
+
></div>
|
|
1078
|
+
`:``}
|
|
1079
|
+
|
|
1080
|
+
<div style="height: ${d}px; width: 1px;"></div>
|
|
1081
|
+
|
|
1082
|
+
${(0,i.repeat)(u,e=>e.id,(e,n)=>{let r=c+n;return t.html`
|
|
1083
|
+
<gantt-row
|
|
1084
|
+
.row="${e}"
|
|
1085
|
+
.option="${s}"
|
|
1086
|
+
.isSelected="${this.selectedRows.has(e.id)}"
|
|
1087
|
+
.isDragTarget="${this.dragTargetRowIndex===r||this.dragOverRowId===e.id&&this.dragOverPosition===null}"
|
|
1088
|
+
.draggingTask="${this.draggingTask}"
|
|
1089
|
+
.draggingTaskIds="${this.draggingTaskIds}"
|
|
1090
|
+
.multiDragDx="${this.multiDragDx}"
|
|
1091
|
+
.theme="${this.theme}"
|
|
1092
|
+
.dropPosition="${this.dragOverRowId===e.id?this.dragOverPosition:null}"
|
|
1093
|
+
.externalDragTask="${this.dragPreview?.rowId===e.id?this.dragPreview:null}"
|
|
1094
|
+
.selectedTaskIds="${this._cachedSelectedTaskIds}"
|
|
1095
|
+
.focusedTaskId="${this.focusedTaskId}"
|
|
1096
|
+
.isExporting="${this.isExporting}"
|
|
1097
|
+
@task-update="${this.handleTaskUpdate}"
|
|
1098
|
+
@row-clicked="${this.handleRowClicked}"
|
|
1099
|
+
@row-header-contextmenu="${this.handleRowContextMenu}"
|
|
1100
|
+
@bar-click="${this.handleBarClick}"
|
|
1101
|
+
@task-contextmenu="${this.handleBarContextMenu}"
|
|
1102
|
+
/>
|
|
1103
|
+
`})}
|
|
1104
|
+
|
|
1105
|
+
<div style="height: ${m}px; width: 1px;"></div>
|
|
1106
|
+
</div>
|
|
1107
|
+
|
|
1108
|
+
${this.option.showDragInfoOverlay===!1?``:t.html` <div class="drag-info-overlay"></div> `}
|
|
1109
|
+
${this.tooltip?t.html`
|
|
1110
|
+
<div
|
|
1111
|
+
class="tooltip ${this.tooltip.visible?`visible`:``}"
|
|
1112
|
+
style="top: ${this.tooltip.y}px; left: ${this.tooltip.x}px;"
|
|
1113
|
+
/>
|
|
1114
|
+
`:``}
|
|
1115
|
+
`}};U([(0,n.property)({type:Array})],$.prototype,`rows`,void 0),U([(0,n.property)({type:Object})],$.prototype,`option`,void 0),U([(0,n.property)({type:String,reflect:!0})],$.prototype,`theme`,void 0),U([(0,n.property)({type:Array})],$.prototype,`selectedRowIds`,void 0),U([(0,n.property)({type:Array})],$.prototype,`selectedTaskIds`,void 0),U([(0,n.property)({attribute:!1})],$.prototype,`externalDraggingTask`,void 0),U([(0,n.state)()],$.prototype,`selectedRows`,void 0),U([(0,n.state)()],$.prototype,`selectedTasks`,void 0),U([(0,n.state)()],$.prototype,`lastClickedRowId`,void 0),U([(0,n.state)()],$.prototype,`virtualScrollTop`,void 0),U([(0,n.state)()],$.prototype,`dragTargetRowIndex`,void 0),U([(0,n.state)()],$.prototype,`draggingTask`,void 0),U([(0,n.state)()],$.prototype,`draggingTaskIds`,void 0),U([(0,n.state)()],$.prototype,`multiDragDx`,void 0),U([(0,n.state)()],$.prototype,`viewportHeight`,void 0),U([(0,n.state)()],$.prototype,`calendarHeight`,void 0),U([(0,n.state)()],$.prototype,`tooltip`,void 0),U([(0,n.state)()],$.prototype,`dragOverRowId`,void 0),U([(0,n.state)()],$.prototype,`dragOverPosition`,void 0),U([(0,n.state)()],$.prototype,`currentTime`,void 0),U([(0,n.state)()],$.prototype,`dragPreview`,void 0),U([(0,n.state)()],$.prototype,`currentRowHeaderWidth`,void 0),U([(0,n.state)()],$.prototype,`isResizingHeader`,void 0),U([(0,n.state)()],$.prototype,`hoveredMilestoneId`,void 0),U([(0,n.state)()],$.prototype,`cursorLineX`,void 0),U([(0,n.state)()],$.prototype,`connectorDrag`,void 0),U([(0,n.state)()],$.prototype,`isExporting`,void 0),U([(0,n.state)()],$.prototype,`focusedTaskId`,void 0),U([(0,n.state)()],$.prototype,`focusedRowId`,void 0),$=U([(0,n.customElement)(`gantt-chart`)],$),e.ALL_BAR_PATTERNS=_,Object.defineProperty(e,`GanttBarElement`,{enumerable:!0,get:function(){return W}}),Object.defineProperty(e,`GanttCalendarElement`,{enumerable:!0,get:function(){return G}}),Object.defineProperty(e,`GanttChartElement`,{enumerable:!0,get:function(){return $}}),Object.defineProperty(e,`GanttRowElement`,{enumerable:!0,get:function(){return q}}),e.PATTERN_CHECKERBOARD=S,e.PATTERN_CIRCLE=T,e.PATTERN_DIAGONAL_GRID=D,e.PATTERN_DIAGONAL_STRIPE=v,e.PATTERN_DIAGONAL_STRIPE_REVERSE=y,e.PATTERN_DOTS=C,e.PATTERN_DOTS_DENSE=A,e.PATTERN_GRID=E,e.PATTERN_HORIZONTAL_STRIPE=x,e.PATTERN_STRIPE_THICK=k,e.PATTERN_STRIPE_THIN=O,e.PATTERN_TRIANGLE=w,e.PATTERN_VERTICAL_STRIPE=b,e.enLocale=N,e.getPatternStyle=j,e.jaLocale=M});
|