chbim-time-axis-v2 0.0.4 → 0.0.6
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 +189 -0
- package/package.json +47 -29
- /package/{index.es.js → dist/chbim-time-axis-v2.es.js} +0 -0
- /package/{index.umd.js → dist/chbim-time-axis-v2.umd.js} +0 -0
- /package/{components → dist/components}/CesiumGantt.vue.d.ts +0 -0
- /package/{components → dist/components}/TaskList.vue.d.ts +0 -0
- /package/{components → dist/components}/TimelineChart.vue.d.ts +0 -0
- /package/{components → dist/components}/types.d.ts +0 -0
- /package/{index.d.ts → dist/index.d.ts} +0 -0
- /package/{main.d.ts → dist/main.d.ts} +0 -0
- /package/{style.css → dist/style.css} +0 -0
package/README.md
ADDED
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
# chbim-time-axis-v2
|
|
2
|
+
|
|
3
|
+
A Gantt chart component integrated with Cesium timeline for Vue 3.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install chbim-time-axis-v2
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### 1. Global Registration (Optional)
|
|
14
|
+
|
|
15
|
+
You can register the component globally using `app.use()`:
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
// main.ts
|
|
19
|
+
import { createApp } from "vue";
|
|
20
|
+
import App from "./App.vue";
|
|
21
|
+
import CesiumGantt from "chbim-time-axis-v2";
|
|
22
|
+
import "chbim-time-axis-v2/dist/style.css";
|
|
23
|
+
|
|
24
|
+
const app = createApp(App);
|
|
25
|
+
app.use(CesiumGantt);
|
|
26
|
+
app.mount("#app");
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Then use it in any component without import:
|
|
30
|
+
|
|
31
|
+
```vue
|
|
32
|
+
<CesiumGantt :viewer="viewer" v-model:tasks="tasks" />
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### 2. Local Registration (Recommended)
|
|
36
|
+
|
|
37
|
+
Import directly in your component:
|
|
38
|
+
|
|
39
|
+
```vue
|
|
40
|
+
<template>
|
|
41
|
+
<div class="container">
|
|
42
|
+
<!-- Cesium Viewer Container -->
|
|
43
|
+
<div ref="cesiumContainer" class="cesium-container"></div>
|
|
44
|
+
|
|
45
|
+
<!-- Gantt Component -->
|
|
46
|
+
<div class="gantt-container">
|
|
47
|
+
<CesiumGantt
|
|
48
|
+
v-if="viewer"
|
|
49
|
+
:viewer="viewer"
|
|
50
|
+
v-model:tasks="tasks"
|
|
51
|
+
@task-enter="handleTaskEnter"
|
|
52
|
+
@task-leave="handleTaskLeave"
|
|
53
|
+
/>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<script setup lang="ts">
|
|
59
|
+
import { ref, onMounted, onUnmounted } from "vue";
|
|
60
|
+
import {
|
|
61
|
+
CesiumGantt,
|
|
62
|
+
type GanttTask,
|
|
63
|
+
type GanttGroup,
|
|
64
|
+
} from "chbim-time-axis-v2";
|
|
65
|
+
import "chbim-time-axis-v2/dist/style.css"; // Import styles
|
|
66
|
+
import * as Cesium from "cesium";
|
|
67
|
+
import dayjs from "dayjs";
|
|
68
|
+
|
|
69
|
+
// Setup Cesium
|
|
70
|
+
const cesiumContainer = ref<HTMLElement | null>(null);
|
|
71
|
+
const viewer = ref<Cesium.Viewer | null>(null);
|
|
72
|
+
|
|
73
|
+
// Task Data
|
|
74
|
+
const tasks = ref<(GanttTask | GanttGroup)[]>([
|
|
75
|
+
{
|
|
76
|
+
id: "1",
|
|
77
|
+
name: "Task Group 1",
|
|
78
|
+
type: "group",
|
|
79
|
+
children: [
|
|
80
|
+
{
|
|
81
|
+
id: "1-1",
|
|
82
|
+
name: "Task 1",
|
|
83
|
+
startTime: dayjs().toISOString(),
|
|
84
|
+
endTime: dayjs().add(2, "day").toISOString(),
|
|
85
|
+
},
|
|
86
|
+
],
|
|
87
|
+
},
|
|
88
|
+
]);
|
|
89
|
+
|
|
90
|
+
// Initialize Cesium
|
|
91
|
+
onMounted(() => {
|
|
92
|
+
if (cesiumContainer.value) {
|
|
93
|
+
viewer.value = new Cesium.Viewer(cesiumContainer.value, {
|
|
94
|
+
timeline: true,
|
|
95
|
+
animation: true,
|
|
96
|
+
baseLayerPicker: false,
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
onUnmounted(() => {
|
|
102
|
+
if (viewer.value) {
|
|
103
|
+
viewer.value.destroy();
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
// Event Handlers
|
|
108
|
+
const handleTaskEnter = (items: any[]) => {
|
|
109
|
+
console.log("Entered tasks:", items);
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
const handleTaskLeave = (items: any[]) => {
|
|
113
|
+
console.log("Left tasks:", items);
|
|
114
|
+
};
|
|
115
|
+
</script>
|
|
116
|
+
|
|
117
|
+
<style>
|
|
118
|
+
.container {
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: column;
|
|
121
|
+
height: 100vh;
|
|
122
|
+
}
|
|
123
|
+
.cesium-container {
|
|
124
|
+
flex: 1;
|
|
125
|
+
width: 100%;
|
|
126
|
+
}
|
|
127
|
+
.gantt-container {
|
|
128
|
+
height: 300px; /* Adjust height as needed */
|
|
129
|
+
background: #2b2b2b;
|
|
130
|
+
}
|
|
131
|
+
</style>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Props
|
|
135
|
+
|
|
136
|
+
| Prop | Type | Description |
|
|
137
|
+
| -------- | ----------------------------- | -------------------------------------------------------------------- |
|
|
138
|
+
| `viewer` | `Cesium.Viewer` | The Cesium Viewer instance. Required for timeline synchronization. |
|
|
139
|
+
| `clock` | `Cesium.Clock` | (Optional) Explicit Cesium Clock instance if not using viewer.clock. |
|
|
140
|
+
| `tasks` | `(GanttTask \| GanttGroup)[]` | The list of tasks to display. Supports `v-model:tasks`. |
|
|
141
|
+
|
|
142
|
+
## Events
|
|
143
|
+
|
|
144
|
+
| Event | Payload | Description |
|
|
145
|
+
| -------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
|
|
146
|
+
| `update:tasks` | `tasks[]` | Emitted when tasks are updated (dragged, edited). |
|
|
147
|
+
| `task-enter` | `items[]` | Emitted when the timeline playback enters a task's time range. Payload contains `{ task, block?, instant? }`. |
|
|
148
|
+
| `task-leave` | `items[]` | Emitted when the timeline playback leaves a task's time range. |
|
|
149
|
+
| `add` | `parentId` | Emitted when the add button is clicked on a group (if using default slot). |
|
|
150
|
+
| `delete` | `taskId` | Emitted when the delete button is clicked on a task (if using default slot). |
|
|
151
|
+
|
|
152
|
+
## Task Data Structure
|
|
153
|
+
|
|
154
|
+
### GanttTask
|
|
155
|
+
|
|
156
|
+
```typescript
|
|
157
|
+
interface GanttTask {
|
|
158
|
+
id: string;
|
|
159
|
+
name: string;
|
|
160
|
+
startTime: string; // ISO 8601 string
|
|
161
|
+
endTime: string; // ISO 8601 string
|
|
162
|
+
type?: "task" | "group" | "block" | "instant";
|
|
163
|
+
children?: GanttTask[]; // For groups
|
|
164
|
+
|
|
165
|
+
// For 'block' type
|
|
166
|
+
blocks?: {
|
|
167
|
+
startTime: string;
|
|
168
|
+
endTime: string;
|
|
169
|
+
name: string;
|
|
170
|
+
color?: string;
|
|
171
|
+
}[];
|
|
172
|
+
|
|
173
|
+
// For 'instant' type
|
|
174
|
+
instants?: {
|
|
175
|
+
id: string;
|
|
176
|
+
time: string;
|
|
177
|
+
name: string;
|
|
178
|
+
color?: string;
|
|
179
|
+
}[];
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
## Slots
|
|
184
|
+
|
|
185
|
+
| Slot Name | Props | Description |
|
|
186
|
+
| ---------------- | -------------------------------------------- | -------------------------------------------------- |
|
|
187
|
+
| `toolbar` | `{ togglePlay, isPlaying, handleResetView }` | Custom content for the toolbar area. |
|
|
188
|
+
| `taskOp` | `{ item }` | Custom operation buttons in the task list row. |
|
|
189
|
+
| `barContextMenu` | `{ task, block, instant, close }` | Custom context menu when right-clicking task bars. |
|
package/package.json
CHANGED
|
@@ -1,29 +1,47 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "chbim-time-axis-v2",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "chbim-time-axis-v2.umd.js
|
|
6
|
-
"module": "chbim-time-axis-v2.
|
|
7
|
-
"types": "index.d.ts",
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "chbim-time-axis-v2",
|
|
3
|
+
"version": "0.0.6",
|
|
4
|
+
"description": "A Gantt chart component integrated with Cesium timeline (Vue 3)",
|
|
5
|
+
"main": "dist/chbim-time-axis-v2.umd.js",
|
|
6
|
+
"module": "dist/chbim-time-axis-v2.es.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/chbim-time-axis-v2.es.js",
|
|
11
|
+
"require": "./dist/chbim-time-axis-v2.umd.js",
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./style.css": "./dist/style.css"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"dev": "vite",
|
|
21
|
+
"build": "vue-tsc && vite build",
|
|
22
|
+
"preview": "vite preview"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"cesium": "^1.0.0",
|
|
26
|
+
"vue": "^3.3.0"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@vuepic/vue-datepicker": "^12.0.5",
|
|
30
|
+
"clsx": "^2.0.0",
|
|
31
|
+
"date-fns": "^4.1.0",
|
|
32
|
+
"dayjs": "^1.11.0"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@types/node": "^18.0.0",
|
|
36
|
+
"@vitejs/plugin-vue": "^4.0.0",
|
|
37
|
+
"cesium": "^1.100.0",
|
|
38
|
+
"sass": "^1.60.0",
|
|
39
|
+
"terser": "^5.44.1",
|
|
40
|
+
"typescript": "^5.0.0",
|
|
41
|
+
"vite": "^4.0.0",
|
|
42
|
+
"vite-plugin-cesium": "^1.2.22",
|
|
43
|
+
"vite-plugin-dts": "^3.0.0",
|
|
44
|
+
"vue": "^3.3.0",
|
|
45
|
+
"vue-tsc": "^3.1.8"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|