apexgantt 2.0.0 → 3.0.0
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/README.md +67 -2
- package/apexgantt.es.min.js +20829 -8854
- package/apexgantt.min.js +545 -588
- package/demo/gantt-with-interactions.html +5 -0
- package/demo/milestones.html +4 -16
- package/demo/multiple-gantts-in-shadow.html +378 -0
- package/index.d.ts +4 -0
- package/lib/gantt.d.ts +34 -11
- package/lib/models/Annotation.d.ts +4 -1
- package/lib/models/Bar.d.ts +5 -1
- package/lib/models/BarDragManager.d.ts +5 -1
- package/lib/models/BarResizeManager.d.ts +5 -1
- package/lib/models/DataManager.d.ts +4 -65
- package/lib/models/Dialog.d.ts +9 -1
- package/lib/models/Options.d.ts +7 -2
- package/lib/models/TaskForm.d.ts +7 -1
- package/lib/models/Tasks.d.ts +6 -2
- package/lib/models/Theme.d.ts +36 -0
- package/lib/models/TimeLine.d.ts +5 -1
- package/lib/styles/Dialog.style.d.ts +1 -1
- package/lib/styles/Dropdown.style.d.ts +1 -1
- package/lib/styles/Gantt.style.d.ts +1 -1
- package/lib/styles/Scrollbar.style.d.ts +1 -0
- package/lib/styles/TaskForm.style.d.ts +1 -1
- package/lib/styles/Tasks.style.d.ts +1 -1
- package/lib/styles/Timeline.style.d.ts +1 -1
- package/lib/styles/Toolbar.style.d.ts +1 -1
- package/lib/styles/Tooltip.style.d.ts +1 -1
- package/lib/types/events.d.ts +54 -0
- package/lib/util/arrow.util.d.ts +3 -1
- package/lib/util/bar.util.d.ts +7 -2
- package/lib/util/icon.util.d.ts +7 -0
- package/lib/util/style-injection.util.d.ts +9 -6
- package/lib/util/task.util.d.ts +7 -5
- package/package.json +2 -2
|
@@ -157,6 +157,11 @@
|
|
|
157
157
|
};
|
|
158
158
|
const s = new ApexGantt(document.getElementById('svg-gantt'), ganttOptions);
|
|
159
159
|
s.render();
|
|
160
|
+
|
|
161
|
+
s.addEventListener('taskUpdateSuccess', (e) => {
|
|
162
|
+
const {updatedTask} = e.detail;
|
|
163
|
+
window.alert(JSON.stringify(updatedTask));
|
|
164
|
+
});
|
|
160
165
|
</script>
|
|
161
166
|
</body>
|
|
162
167
|
</html>
|
package/demo/milestones.html
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<body style="margin: 0; padding: 20px; background: #0f172a; min-height: 100vh; font-family: 'Roboto', sans-serif">
|
|
11
11
|
<div style="max-width: 1400px; margin: 0 auto">
|
|
12
12
|
<h1 style="color: #f1f5f9; text-align: center; margin-bottom: 10px; font-weight: 700; font-size: 28px">
|
|
13
|
-
|
|
13
|
+
Dark Theme Demo
|
|
14
14
|
</h1>
|
|
15
15
|
<p style="color: #94a3b8; text-align: center; margin-bottom: 30px; font-size: 16px">
|
|
16
16
|
Key milestones and deliverables tracking
|
|
@@ -24,19 +24,14 @@
|
|
|
24
24
|
const ganttOptions = {
|
|
25
25
|
width: '100%',
|
|
26
26
|
height: 750,
|
|
27
|
-
viewMode: '
|
|
27
|
+
viewMode: 'month',
|
|
28
28
|
fontFamily: 'Roboto, sans-serif',
|
|
29
29
|
fontSize: '14px',
|
|
30
30
|
fontWeight: '500',
|
|
31
|
-
|
|
32
|
-
headerBackground: '#0F172A',
|
|
31
|
+
theme: 'dark',
|
|
33
32
|
canvasStyle: 'border: none;',
|
|
34
33
|
barBorderRadius: '6px',
|
|
35
34
|
barMargin: 3,
|
|
36
|
-
arrowColor: '#06B6D4',
|
|
37
|
-
tooltipBGColor: '#0F172A',
|
|
38
|
-
tooltipBorderColor: '#475569',
|
|
39
|
-
rowBackgroundColors: ['#1E293B', '#334155'],
|
|
40
35
|
enableTaskDrag: false,
|
|
41
36
|
enableTaskResize: false,
|
|
42
37
|
series: [
|
|
@@ -59,20 +54,13 @@
|
|
|
59
54
|
barBackgroundColor: '#38BDF8',
|
|
60
55
|
barTextColor: '#0F172A',
|
|
61
56
|
},
|
|
62
|
-
{
|
|
63
|
-
id: 'market-research-milestone',
|
|
64
|
-
startTime: '01-16-2025',
|
|
65
|
-
name: '📊 Market Research Complete',
|
|
66
|
-
type: 'milestone',
|
|
67
|
-
dependency: 'competitor-analysis',
|
|
68
|
-
},
|
|
69
57
|
{
|
|
70
58
|
id: 'user-surveys',
|
|
71
59
|
startTime: '01-17-2025',
|
|
72
60
|
endTime: '01-24-2025',
|
|
73
61
|
name: 'User Surveys & Feedback',
|
|
74
62
|
parentId: 'research',
|
|
75
|
-
dependency: '
|
|
63
|
+
dependency: 'competitor-analysis',
|
|
76
64
|
progress: 85,
|
|
77
65
|
barBackgroundColor: '#38BDF8',
|
|
78
66
|
barTextColor: '#0F172A',
|
|
@@ -0,0 +1,378 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Multiple Gantts in Same Shadow Root Demo</title>
|
|
7
|
+
<script src="../apexgantt.min.js"></script>
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
font-family: Arial, sans-serif;
|
|
11
|
+
margin: 20px;
|
|
12
|
+
background: #f5f5f5;
|
|
13
|
+
}
|
|
14
|
+
.demo-section {
|
|
15
|
+
margin: 20px 0;
|
|
16
|
+
padding: 20px;
|
|
17
|
+
background: white;
|
|
18
|
+
border-radius: 8px;
|
|
19
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
20
|
+
}
|
|
21
|
+
.controls {
|
|
22
|
+
margin: 10px 0;
|
|
23
|
+
display: flex;
|
|
24
|
+
gap: 10px;
|
|
25
|
+
flex-wrap: wrap;
|
|
26
|
+
}
|
|
27
|
+
button {
|
|
28
|
+
padding: 8px 16px;
|
|
29
|
+
border: 1px solid #ccc;
|
|
30
|
+
border-radius: 4px;
|
|
31
|
+
background: #fff;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
}
|
|
34
|
+
button:hover {
|
|
35
|
+
background: #f0f0f0;
|
|
36
|
+
}
|
|
37
|
+
.shadow-host {
|
|
38
|
+
width: 100%;
|
|
39
|
+
min-height: 800px;
|
|
40
|
+
margin: 10px 0;
|
|
41
|
+
border: 2px solid #6f42c1;
|
|
42
|
+
border-radius: 4px;
|
|
43
|
+
padding: 10px;
|
|
44
|
+
}
|
|
45
|
+
.status {
|
|
46
|
+
margin: 10px 0;
|
|
47
|
+
padding: 10px;
|
|
48
|
+
background: #e3f2fd;
|
|
49
|
+
border-radius: 4px;
|
|
50
|
+
font-family: monospace;
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
}
|
|
53
|
+
</style>
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<h1>Multiple Gantts in Same Shadow Root Demo</h1>
|
|
57
|
+
<p>This demo tests scenarios where multiple Gantt instances exist within the same Shadow DOM context.</p>
|
|
58
|
+
|
|
59
|
+
<div class="demo-section">
|
|
60
|
+
<h2>Shadow DOM Container (Purple Border)</h2>
|
|
61
|
+
<p>This container hosts multiple Gantt instances in the same Shadow Root.</p>
|
|
62
|
+
|
|
63
|
+
<div class="controls">
|
|
64
|
+
<button onclick="createFirstGantt()">Create First Gantt</button>
|
|
65
|
+
<button onclick="createSecondGantt()">Create Second Gantt</button>
|
|
66
|
+
<button onclick="createBothGantts()">Create Both Gantts</button>
|
|
67
|
+
<button onclick="destroyFirstGantt()">Destroy First Gantt</button>
|
|
68
|
+
<button onclick="destroySecondGantt()">Destroy Second Gantt</button>
|
|
69
|
+
<button onclick="destroyBothGantts()">Destroy Both Gantts</button>
|
|
70
|
+
<button onclick="recreateFirstAfterDestroy()">Recreate First After Destroy</button>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div id="shadow-host" class="shadow-host"></div>
|
|
74
|
+
<div id="status" class="status">Status: Ready</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div class="demo-section">
|
|
78
|
+
<h2>Test Scenarios</h2>
|
|
79
|
+
<div class="controls">
|
|
80
|
+
<button onclick="testScenario1()">Scenario 1: Sequential Creation</button>
|
|
81
|
+
<button onclick="testScenario2()">Scenario 2: Simultaneous Creation</button>
|
|
82
|
+
<button onclick="testScenario3()">Scenario 3: Destroy First, Check Second</button>
|
|
83
|
+
<button onclick="testScenario4()">Scenario 4: Recreate After Destroy</button>
|
|
84
|
+
<button onclick="testScenario5()">Scenario 5: Multiple Create/Destroy Cycles</button>
|
|
85
|
+
</div>
|
|
86
|
+
<div id="test-status" class="status">Click a scenario to test</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<script>
|
|
90
|
+
let ganttInstance1 = null;
|
|
91
|
+
let ganttInstance2 = null;
|
|
92
|
+
let shadowRoot = null;
|
|
93
|
+
let container1 = null;
|
|
94
|
+
let container2 = null;
|
|
95
|
+
|
|
96
|
+
const sampleData1 = [
|
|
97
|
+
{id: 'proj1-task1', startTime: '10-11-2024', endTime: '11-01-2024', name: 'Project 1 - Task 1', progress: 65},
|
|
98
|
+
{
|
|
99
|
+
id: 'proj1-task2',
|
|
100
|
+
startTime: '11-02-2024',
|
|
101
|
+
endTime: '11-15-2024',
|
|
102
|
+
name: 'Project 1 - Task 2',
|
|
103
|
+
progress: 25,
|
|
104
|
+
dependency: 'proj1-task1',
|
|
105
|
+
},
|
|
106
|
+
{id: 'proj1-task3', startTime: '11-16-2024', endTime: '11-25-2024', name: 'Project 1 - Task 3', progress: 0},
|
|
107
|
+
];
|
|
108
|
+
|
|
109
|
+
const sampleData2 = [
|
|
110
|
+
{id: 'proj2-task1', startTime: '10-15-2024', endTime: '11-05-2024', name: 'Project 2 - Task 1', progress: 80},
|
|
111
|
+
{
|
|
112
|
+
id: 'proj2-task2',
|
|
113
|
+
startTime: '11-06-2024',
|
|
114
|
+
endTime: '11-20-2024',
|
|
115
|
+
name: 'Project 2 - Task 2',
|
|
116
|
+
progress: 40,
|
|
117
|
+
dependency: 'proj2-task1',
|
|
118
|
+
},
|
|
119
|
+
{id: 'proj2-task3', startTime: '11-21-2024', endTime: '12-01-2024', name: 'Project 2 - Task 3', progress: 10},
|
|
120
|
+
];
|
|
121
|
+
|
|
122
|
+
function updateStatus(message) {
|
|
123
|
+
document.getElementById('status').textContent = `Status: ${message}`;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
function updateTestStatus(message) {
|
|
127
|
+
document.getElementById('test-status').textContent = message;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
function initializeShadowDOM() {
|
|
131
|
+
const shadowHost = document.getElementById('shadow-host');
|
|
132
|
+
|
|
133
|
+
if (!shadowRoot) {
|
|
134
|
+
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// Clear existing content
|
|
138
|
+
shadowRoot.innerHTML = '';
|
|
139
|
+
|
|
140
|
+
// Create containers for two gantts
|
|
141
|
+
const wrapper = document.createElement('div');
|
|
142
|
+
wrapper.style.width = '100%';
|
|
143
|
+
wrapper.style.height = '100%';
|
|
144
|
+
|
|
145
|
+
const title1 = document.createElement('h3');
|
|
146
|
+
title1.textContent = 'Gantt Instance 1 - Project Alpha';
|
|
147
|
+
title1.style.margin = '0 0 10px 0';
|
|
148
|
+
title1.style.color = '#007bff';
|
|
149
|
+
|
|
150
|
+
container1 = document.createElement('div');
|
|
151
|
+
container1.id = 'gantt-container-1';
|
|
152
|
+
container1.style.width = '100%';
|
|
153
|
+
container1.style.height = '350px';
|
|
154
|
+
container1.style.marginBottom = '20px';
|
|
155
|
+
container1.style.border = '1px solid #007bff';
|
|
156
|
+
container1.style.borderRadius = '4px';
|
|
157
|
+
|
|
158
|
+
const title2 = document.createElement('h3');
|
|
159
|
+
title2.textContent = 'Gantt Instance 2 - Project Beta';
|
|
160
|
+
title2.style.margin = '0 0 10px 0';
|
|
161
|
+
title2.style.color = '#28a745';
|
|
162
|
+
|
|
163
|
+
container2 = document.createElement('div');
|
|
164
|
+
container2.id = 'gantt-container-2';
|
|
165
|
+
container2.style.width = '100%';
|
|
166
|
+
container2.style.height = '350px';
|
|
167
|
+
container2.style.border = '1px solid #28a745';
|
|
168
|
+
container2.style.borderRadius = '4px';
|
|
169
|
+
|
|
170
|
+
wrapper.appendChild(title1);
|
|
171
|
+
wrapper.appendChild(container1);
|
|
172
|
+
wrapper.appendChild(title2);
|
|
173
|
+
wrapper.appendChild(container2);
|
|
174
|
+
shadowRoot.appendChild(wrapper);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
function createFirstGantt() {
|
|
178
|
+
try {
|
|
179
|
+
if (!shadowRoot) {
|
|
180
|
+
initializeShadowDOM();
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
if (ganttInstance1) {
|
|
184
|
+
ganttInstance1.destroy();
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
ganttInstance1 = new ApexGantt(container1, {
|
|
188
|
+
series: sampleData1,
|
|
189
|
+
viewMode: 'week',
|
|
190
|
+
tasksContainerWidth: 200,
|
|
191
|
+
});
|
|
192
|
+
ganttInstance1.render();
|
|
193
|
+
updateStatus('First Gantt created successfully');
|
|
194
|
+
} catch (error) {
|
|
195
|
+
updateStatus(`Error creating first gantt: ${error.message}`);
|
|
196
|
+
console.error('First gantt error:', error);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
function createSecondGantt() {
|
|
201
|
+
try {
|
|
202
|
+
if (!shadowRoot) {
|
|
203
|
+
initializeShadowDOM();
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
if (ganttInstance2) {
|
|
207
|
+
ganttInstance2.destroy();
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
ganttInstance2 = new ApexGantt(container2, {
|
|
211
|
+
series: sampleData2,
|
|
212
|
+
viewMode: 'week',
|
|
213
|
+
tasksContainerWidth: 200,
|
|
214
|
+
});
|
|
215
|
+
ganttInstance2.render();
|
|
216
|
+
updateStatus('Second Gantt created successfully');
|
|
217
|
+
} catch (error) {
|
|
218
|
+
updateStatus(`Error creating second gantt: ${error.message}`);
|
|
219
|
+
console.error('Second gantt error:', error);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
function createBothGantts() {
|
|
224
|
+
try {
|
|
225
|
+
initializeShadowDOM();
|
|
226
|
+
createFirstGantt();
|
|
227
|
+
createSecondGantt();
|
|
228
|
+
updateStatus('Both Gantts created successfully in same Shadow DOM');
|
|
229
|
+
} catch (error) {
|
|
230
|
+
updateStatus(`Error creating both gantts: ${error.message}`);
|
|
231
|
+
console.error('Both gantts error:', error);
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
function destroyFirstGantt() {
|
|
236
|
+
try {
|
|
237
|
+
if (ganttInstance1) {
|
|
238
|
+
ganttInstance1.destroy();
|
|
239
|
+
ganttInstance1 = null;
|
|
240
|
+
container1.innerHTML =
|
|
241
|
+
'<div style="padding: 20px; text-align: center; color: #666;">First Gantt Destroyed</div>';
|
|
242
|
+
updateStatus('First Gantt destroyed');
|
|
243
|
+
} else {
|
|
244
|
+
updateStatus('First Gantt was not created');
|
|
245
|
+
}
|
|
246
|
+
} catch (error) {
|
|
247
|
+
updateStatus(`Error destroying first gantt: ${error.message}`);
|
|
248
|
+
console.error('First gantt destroy error:', error);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
function destroySecondGantt() {
|
|
253
|
+
try {
|
|
254
|
+
if (ganttInstance2) {
|
|
255
|
+
ganttInstance2.destroy();
|
|
256
|
+
ganttInstance2 = null;
|
|
257
|
+
container2.innerHTML =
|
|
258
|
+
'<div style="padding: 20px; text-align: center; color: #666;">Second Gantt Destroyed</div>';
|
|
259
|
+
updateStatus('Second Gantt destroyed');
|
|
260
|
+
} else {
|
|
261
|
+
updateStatus('Second Gantt was not created');
|
|
262
|
+
}
|
|
263
|
+
} catch (error) {
|
|
264
|
+
updateStatus(`Error destroying second gantt: ${error.message}`);
|
|
265
|
+
console.error('Second gantt destroy error:', error);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
function destroyBothGantts() {
|
|
270
|
+
try {
|
|
271
|
+
destroyFirstGantt();
|
|
272
|
+
destroySecondGantt();
|
|
273
|
+
updateStatus('Both Gantts destroyed');
|
|
274
|
+
} catch (error) {
|
|
275
|
+
updateStatus(`Error destroying both gantts: ${error.message}`);
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
function recreateFirstAfterDestroy() {
|
|
280
|
+
try {
|
|
281
|
+
destroyFirstGantt();
|
|
282
|
+
setTimeout(() => {
|
|
283
|
+
createFirstGantt();
|
|
284
|
+
updateStatus('First Gantt recreated - check if second still works');
|
|
285
|
+
}, 500);
|
|
286
|
+
} catch (error) {
|
|
287
|
+
updateStatus(`Error in recreate scenario: ${error.message}`);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
// Test Scenarios
|
|
292
|
+
function testScenario1() {
|
|
293
|
+
updateTestStatus('Scenario 1: Testing sequential creation...');
|
|
294
|
+
initializeShadowDOM();
|
|
295
|
+
|
|
296
|
+
setTimeout(() => {
|
|
297
|
+
updateTestStatus('Creating first gantt...');
|
|
298
|
+
createFirstGantt();
|
|
299
|
+
|
|
300
|
+
setTimeout(() => {
|
|
301
|
+
updateTestStatus('Creating second gantt...');
|
|
302
|
+
createSecondGantt();
|
|
303
|
+
updateTestStatus('Scenario 1 Complete: Both gantts created sequentially. Check if both render correctly.');
|
|
304
|
+
}, 1000);
|
|
305
|
+
}, 500);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
function testScenario2() {
|
|
309
|
+
updateTestStatus('Scenario 2: Testing simultaneous creation...');
|
|
310
|
+
createBothGantts();
|
|
311
|
+
updateTestStatus('Scenario 2 Complete: Both gantts created simultaneously. Check if both render correctly.');
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
function testScenario3() {
|
|
315
|
+
updateTestStatus('Scenario 3: Testing destroy first, check second...');
|
|
316
|
+
createBothGantts();
|
|
317
|
+
|
|
318
|
+
setTimeout(() => {
|
|
319
|
+
updateTestStatus('Destroying first gantt...');
|
|
320
|
+
destroyFirstGantt();
|
|
321
|
+
updateTestStatus('Scenario 3 Complete: First gantt destroyed. Check if second gantt still works correctly.');
|
|
322
|
+
}, 2000);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
function testScenario4() {
|
|
326
|
+
updateTestStatus('Scenario 4: Testing recreate after destroy...');
|
|
327
|
+
createBothGantts();
|
|
328
|
+
|
|
329
|
+
setTimeout(() => {
|
|
330
|
+
updateTestStatus('Destroying first gantt...');
|
|
331
|
+
destroyFirstGantt();
|
|
332
|
+
|
|
333
|
+
setTimeout(() => {
|
|
334
|
+
updateTestStatus('Recreating first gantt...');
|
|
335
|
+
createFirstGantt();
|
|
336
|
+
updateTestStatus('Scenario 4 Complete: First gantt recreated. Check if both gantts work correctly.');
|
|
337
|
+
}, 1000);
|
|
338
|
+
}, 2000);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
function testScenario5() {
|
|
342
|
+
updateTestStatus('Scenario 5: Testing multiple create/destroy cycles...');
|
|
343
|
+
|
|
344
|
+
let cycle = 0;
|
|
345
|
+
const maxCycles = 3;
|
|
346
|
+
|
|
347
|
+
function runCycle() {
|
|
348
|
+
cycle++;
|
|
349
|
+
updateTestStatus(`Cycle ${cycle}/${maxCycles}: Creating both gantts...`);
|
|
350
|
+
createBothGantts();
|
|
351
|
+
|
|
352
|
+
setTimeout(() => {
|
|
353
|
+
updateTestStatus(`Cycle ${cycle}/${maxCycles}: Destroying both gantts...`);
|
|
354
|
+
destroyBothGantts();
|
|
355
|
+
|
|
356
|
+
if (cycle < maxCycles) {
|
|
357
|
+
setTimeout(runCycle, 500);
|
|
358
|
+
} else {
|
|
359
|
+
setTimeout(() => {
|
|
360
|
+
updateTestStatus('Scenario 5 Complete: Multiple cycles finished. Creating final gantts...');
|
|
361
|
+
createBothGantts();
|
|
362
|
+
updateTestStatus('Scenario 5 Complete: Check if both gantts work correctly after multiple cycles.');
|
|
363
|
+
}, 500);
|
|
364
|
+
}
|
|
365
|
+
}, 1500);
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
runCycle();
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
// Initialize on page load
|
|
372
|
+
window.addEventListener('load', () => {
|
|
373
|
+
initializeShadowDOM();
|
|
374
|
+
updateStatus('Shadow DOM initialized, ready to create Gantts');
|
|
375
|
+
});
|
|
376
|
+
</script>
|
|
377
|
+
</body>
|
|
378
|
+
</html>
|
package/index.d.ts
CHANGED
|
@@ -6,3 +6,7 @@ export type { Annotation } from './lib/models/Annotation';
|
|
|
6
6
|
export type { GanttUserOptions } from './lib/models/Options';
|
|
7
7
|
export type { Task } from './lib/models/Tasks';
|
|
8
8
|
export { ViewMode } from './lib/util/gantt.util';
|
|
9
|
+
export type { ThemeMode, GanttTheme } from './lib/models/Theme';
|
|
10
|
+
export { LightTheme, DarkTheme, getTheme } from './lib/models/Theme';
|
|
11
|
+
export { GanttEvents } from './lib/types/events';
|
|
12
|
+
export type { TaskUpdateEventDetail, TaskValidationErrorEventDetail, TaskUpdateSuccessEventDetail, TaskUpdateErrorEventDetail, } from './lib/types/events';
|
package/lib/gantt.d.ts
CHANGED
|
@@ -1,42 +1,65 @@
|
|
|
1
1
|
import { Task } from './models/Tasks';
|
|
2
2
|
import { GanttUserOptions } from './models/Options';
|
|
3
|
+
import { BaseChart } from '../../../graph-utils/src/index.ts';
|
|
3
4
|
|
|
4
|
-
export declare class ApexGantt {
|
|
5
|
-
element: HTMLElement;
|
|
5
|
+
export declare class ApexGantt extends BaseChart {
|
|
6
6
|
private options;
|
|
7
7
|
private viewMode;
|
|
8
8
|
private stylesInjected;
|
|
9
|
+
private arrowLink;
|
|
10
|
+
private dataManager;
|
|
11
|
+
private zoomHandler;
|
|
12
|
+
private timelineScrollHandlers;
|
|
9
13
|
constructor(element: HTMLElement, options?: GanttUserOptions);
|
|
10
14
|
static setLicense(key: string): void;
|
|
15
|
+
private setupShadowDOMEnvironment;
|
|
11
16
|
/**
|
|
12
|
-
*
|
|
13
|
-
*/
|
|
14
|
-
private injectStylesDirectly;
|
|
15
|
-
/**
|
|
16
|
-
* Inject all required styles for shadow DOM support
|
|
17
|
+
* Inject all required styles with context awareness
|
|
17
18
|
*/
|
|
18
19
|
private injectGanttStyles;
|
|
20
|
+
private injectStylesDirectly;
|
|
19
21
|
/**
|
|
20
22
|
* Handle watermark display based on license validation
|
|
21
23
|
*/
|
|
22
24
|
private handleWatermark;
|
|
23
25
|
private setCSSVariables;
|
|
26
|
+
private isColorDark;
|
|
24
27
|
private initializeTooltip;
|
|
28
|
+
render(data?: any): any;
|
|
29
|
+
/**
|
|
30
|
+
* Setup proper positioning for chart container to support dialogs
|
|
31
|
+
*/
|
|
32
|
+
private setupChartContainerPositioning;
|
|
33
|
+
private createLayout;
|
|
34
|
+
private syncTasksColumnWidths;
|
|
35
|
+
private compensateForScrollbar;
|
|
25
36
|
private setupZoomEventListener;
|
|
26
37
|
private setupRowBackgroundColors;
|
|
27
38
|
private renderDependencyArrows;
|
|
28
39
|
private setupDependencyArrowEvents;
|
|
29
|
-
private createZoomButtons;
|
|
30
|
-
private createViewModeContainer;
|
|
31
40
|
private createExportDropdown;
|
|
32
|
-
private createLayout;
|
|
33
41
|
private rerenderTimeline;
|
|
42
|
+
private setupTimelineHeaderScroll;
|
|
34
43
|
private updateToolbarAfterZoom;
|
|
35
|
-
|
|
44
|
+
private cleanupEventListeners;
|
|
45
|
+
private cleanupTooltips;
|
|
46
|
+
private cleanupDependencyArrows;
|
|
47
|
+
private createActionButton;
|
|
48
|
+
private createSeparator;
|
|
49
|
+
private createViewModeDisplay;
|
|
36
50
|
renderToolbar(container: HTMLElement): void;
|
|
37
51
|
update(options: GanttUserOptions): void;
|
|
38
52
|
updateTask(taskId: string, updatedTask: Partial<Task>): void;
|
|
39
53
|
zoomIn(): void;
|
|
40
54
|
zoomOut(): void;
|
|
55
|
+
/**
|
|
56
|
+
* Check if element already has explicit dimensions from CSS
|
|
57
|
+
*/
|
|
58
|
+
private hasExplicitDimensions;
|
|
59
|
+
/**
|
|
60
|
+
* Normalize dimension value to CSS string
|
|
61
|
+
*/
|
|
62
|
+
private normalizeDimension;
|
|
41
63
|
destroy(): void;
|
|
64
|
+
isDestroyed(): boolean;
|
|
42
65
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { GanttOptions } from './Options';
|
|
2
2
|
import { ViewMode } from '../util/gantt.util';
|
|
3
3
|
import { Dayjs } from 'dayjs';
|
|
4
|
+
import { ChartContext } from '../../../../graph-utils/src/index.ts';
|
|
4
5
|
|
|
5
6
|
export declare enum Orientation {
|
|
6
7
|
Horizontal = "horizontal",
|
|
@@ -36,7 +37,9 @@ export declare class AnnotationRenderer {
|
|
|
36
37
|
private options;
|
|
37
38
|
private ganttStartDate;
|
|
38
39
|
private viewMode;
|
|
39
|
-
|
|
40
|
+
private chartContext;
|
|
41
|
+
private totalHeight;
|
|
42
|
+
constructor(options: GanttOptions, ganttStartDate: Dayjs, viewMode: ViewMode, chartContext: ChartContext, totalHeight: number);
|
|
40
43
|
private calculateWidth;
|
|
41
44
|
private calculateX;
|
|
42
45
|
private drawAnnotation;
|
package/lib/models/Bar.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Task } from './Tasks';
|
|
2
2
|
import { GanttOptions } from './Options';
|
|
3
|
+
import { DataManager } from './DataManager';
|
|
3
4
|
import { onUpdateBarCallback } from './BarDragManager';
|
|
4
5
|
import { ViewMode } from '../util/gantt.util';
|
|
5
6
|
import { Dayjs } from 'dayjs';
|
|
7
|
+
import { ChartContext } from '../../../../graph-utils/src/index.ts';
|
|
6
8
|
|
|
7
9
|
export declare class Bar {
|
|
8
10
|
task: Task;
|
|
@@ -10,8 +12,10 @@ export declare class Bar {
|
|
|
10
12
|
options: GanttOptions;
|
|
11
13
|
viewMode: ViewMode;
|
|
12
14
|
index: number;
|
|
15
|
+
chartContext: ChartContext;
|
|
16
|
+
dataManager: DataManager;
|
|
13
17
|
private tooltipHandler;
|
|
14
|
-
constructor(task: Task, ganttStartDate: Dayjs, options: GanttOptions, viewMode: ViewMode, index: number);
|
|
18
|
+
constructor(task: Task, ganttStartDate: Dayjs, options: GanttOptions, viewMode: ViewMode, index: number, chartContext: ChartContext, dataManager: DataManager);
|
|
15
19
|
static calculateWidth(task: Task, viewMode: ViewMode, options: GanttOptions): number;
|
|
16
20
|
static calculateX(task: Task, ganttStartDate: Dayjs, viewMode: ViewMode, options: GanttOptions): number;
|
|
17
21
|
calculateHeight(): number;
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { Task } from './Tasks';
|
|
2
2
|
import { GanttOptions } from './Options';
|
|
3
|
+
import { DataManager } from './DataManager';
|
|
3
4
|
import { ViewMode } from '../util/gantt.util';
|
|
5
|
+
import { ChartContext } from '../../../../graph-utils/src/index.ts';
|
|
4
6
|
|
|
5
7
|
export type onUpdateBarCallback = (id: string, options: Partial<Task>) => void;
|
|
6
8
|
export declare class BarDragManager {
|
|
7
9
|
private taskId;
|
|
8
10
|
private options;
|
|
11
|
+
private chartContext;
|
|
12
|
+
private dataManager;
|
|
9
13
|
private dragState;
|
|
10
14
|
private task;
|
|
11
|
-
constructor(taskId: string, options: GanttOptions, viewMode: ViewMode);
|
|
15
|
+
constructor(taskId: string, options: GanttOptions, viewMode: ViewMode, chartContext: ChartContext, dataManager: DataManager);
|
|
12
16
|
private calculateFinalPosition;
|
|
13
17
|
private createMouseDownHandler;
|
|
14
18
|
private createMouseMoveHandler;
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { Task } from './Tasks';
|
|
2
2
|
import { GanttOptions } from './Options';
|
|
3
|
+
import { DataManager } from './DataManager';
|
|
3
4
|
import { ViewMode } from '../util/gantt.util';
|
|
5
|
+
import { ChartContext } from '../../../../graph-utils/src/index.ts';
|
|
4
6
|
|
|
5
7
|
export type onUpdateBarCallback = (id: string, options: Partial<Task>) => void;
|
|
6
8
|
export declare class BarResizeManager {
|
|
7
9
|
private taskId;
|
|
8
10
|
private options;
|
|
11
|
+
private chartContext;
|
|
12
|
+
private dataManager;
|
|
9
13
|
private interactionState;
|
|
10
14
|
private task;
|
|
11
|
-
constructor(taskId: string, options: GanttOptions, viewMode: ViewMode);
|
|
15
|
+
constructor(taskId: string, options: GanttOptions, viewMode: ViewMode, chartContext: ChartContext, dataManager: DataManager);
|
|
12
16
|
private createMouseMoveHandler;
|
|
13
17
|
private createMouseUpHandler;
|
|
14
18
|
private createResizeMouseDownHandler;
|