├── .editorconfig
├── .eslintrc.js
├── .github
    ├── FUNDING.yml
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   ├── custom.md
    │   └── feature_request.md
├── .gitignore
├── .prettierrc.js
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── _config.yml
├── cypress.json
├── dist
    ├── GanttElastic.common.js
    ├── GanttElastic.common.js.map
    ├── GanttElastic.common.min.js
    ├── GanttElastic.umd.js
    ├── GanttElastic.umd.js.map
    ├── GanttElastic.umd.min.js
    └── bundle.js
├── examples
    ├── from-readme.html
    ├── index.html
    ├── vue.edit.html
    ├── vue.html
    └── vue.max-rows.html
├── gantt-elastic.gif
├── gantt-elastic.jpg
├── grab-scroll.gif
├── package-lock.json
├── package.json
├── src
    ├── GanttElastic.standalone.vue
    ├── GanttElastic.vue
    ├── bundle.js
    ├── components
    │   ├── Calendar
    │   │   ├── Calendar.vue
    │   │   └── CalendarRow.vue
    │   ├── Chart
    │   │   ├── Chart.vue
    │   │   ├── DaysHighlight.vue
    │   │   ├── DependencyLines.vue
    │   │   ├── Grid.vue
    │   │   ├── ProgressBar.vue
    │   │   ├── Row
    │   │   │   ├── Milestone.vue
    │   │   │   ├── Project.vue
    │   │   │   ├── Task.mixin.js
    │   │   │   └── Task.vue
    │   │   └── Text.vue
    │   ├── Expander.vue
    │   ├── MainView.vue
    │   └── TaskList
    │   │   ├── ItemColumn.vue
    │   │   ├── TaskList.vue
    │   │   ├── TaskListHeader.vue
    │   │   └── TaskListItem.vue
    └── style.js
├── tests
    ├── .eslintrc.js
    ├── assets
    │   ├── standalone.html
    │   └── umd.html
    ├── fixtures
    │   └── example.json
    ├── integration
    │   └── basic_spec.js
    ├── plugins
    │   └── index.js
    └── support
    │   ├── commands.js
    │   └── index.js
├── webpack.config.js
└── webpack.dev.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |     jest: true
 6 |   },
 7 |   extends: ['plugin:vue/essential', 'plugin:prettier/recommended', '@vue/prettier'],
 8 |   rules: {
 9 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
10 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
11 |   },
12 |   parserOptions: {
13 |     parser: 'babel-eslint'
14 |   },
15 |   globals: {
16 |     page: true,
17 |     browser: true,
18 |     context: true,
19 |     jestPuppeteer: true
20 |   }
21 | };
22 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | #github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | #patreon: # Replace with a single Patreon username
 5 | #open_collective: # Replace with a single Open Collective username
 6 | #ko_fi: # Replace with a single Ko-fi username
 7 | #tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | #community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | #liberapay: # Replace with a single Liberapay username
10 | issuehunt: neuronetio
11 | #otechie: # Replace with a single Otechie username
12 | #custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | labels: 
 5 | 
 6 | ---
 7 | 
 8 | **Describe the bug**
 9 | A clear and concise description of what the bug is.
10 | 
11 | **To Reproduce**
12 | Steps to reproduce the behavior:
13 | 1. Go to '...'
14 | 2. Click on '....'
15 | 3. Scroll down to '....'
16 | 4. See error
17 | 
18 | **Expected behavior**
19 | A clear and concise description of what you expected to happen.
20 | 
21 | **Screenshots**
22 | If applicable, add screenshots to help explain your problem.
23 | 
24 | **Desktop (please complete the following information):**
25 |  - OS: [e.g. iOS]
26 |  - Browser [e.g. chrome, safari]
27 |  - Version [e.g. 22]
28 | 
29 | **Smartphone (please complete the following information):**
30 |  - Device: [e.g. iPhone6]
31 |  - OS: [e.g. iOS8.1]
32 |  - Browser [e.g. stock browser, safari]
33 |  - Version [e.g. 22]
34 | 
35 | **Additional context**
36 | Add any other context about the problem here.
37 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/custom.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Custom issue template
3 | about: Describe this issue template's purpose here.
4 | labels: 
5 | 
6 | ---
7 | 
8 | 
9 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | labels: 
 5 | 
 6 | ---
 7 | 
 8 | **Is your feature request related to a problem? Please describe.**
 9 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
10 | 
11 | **Describe the solution you'd like**
12 | A clear and concise description of what you want to happen.
13 | 
14 | **Describe alternatives you've considered**
15 | A clear and concise description of any alternative solutions or features you've considered.
16 | 
17 | **Additional context**
18 | Add any other context or screenshots about the feature request here.
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode/
2 | .sonarlint/
3 | node_modules/
4 | .history
5 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   singleQuote: true,
3 |   semi: true,
4 |   printWidth: 120
5 | };
6 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at neuronet.io@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 neuronet.io
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1>Gantt-elastic - Javascript Gantt Chart (editable, responsive)</h1>
  2 | <h2>Javascript Gantt Chart for vue, jquery, vanilla js and other frameworks</h2>
  3 | 
  4 | <br>
  5 | <h3>Project moved as next major version to <a href="https://github.com/neuronetio/gantt-schedule-timeline-calendar">gantt-schedule-timeline-calendar</a></h3><br><br>
  6 | <br>
  7 | 
  8 | <strong>This project is not suitable for use in a production environment as it runs very slowly even in standard medium projects. This project has been completely rewritten and built with super performance in mind and is available in the new repository as a <a href="https://github.com/neuronetio/gantt-schedule-timeline-calendar">gantt-schedule-timeline-calendar</a>.</strong>
  9 | 
 10 | 
 11 | <h2><a href="https://neuronet.io/gantt-elastic/" target="_blank">Gantt-elastic demo here</a></h2>
 12 | 
 13 | ![preview img](https://github.com/neuronetio/gantt-elastic/raw/master/gantt-elastic.jpg)
 14 | ![preview gif](https://github.com/neuronetio/gantt-elastic/raw/master/gantt-elastic.gif)
 15 | ![preview gif](https://github.com/neuronetio/gantt-elastic/raw/master/grab-scroll.gif)
 16 | 
 17 | ## Gantt-elastic
 18 | 
 19 | is a vue component but it could be used in other frameworks or even with jQuery (vue is kind of elastic and lightweight framework).
 20 | 
 21 | [WIKI](https://github.com/neuronetio/gantt-elastic/wiki)
 22 | 
 23 | [Vue Example](https://github.com/neuronetio/vue-gantt-elastic)
 24 | 
 25 | ### Installation
 26 | 
 27 | `npm install --save gantt-elastic` or download zip from github / clone repo
 28 | 
 29 | and if you want default header
 30 | 
 31 | `npm install --save gantt-elastic-header`
 32 | 
 33 | ### Usage
 34 | 
 35 | ```html
 36 | <!DOCTYPE html>
 37 | <html charset="utf-8">
 38 |   <head>
 39 |     <meta charset="utf-8" />
 40 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 41 |     <title>GanttElastic editor demo</title>
 42 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 43 |     <script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
 44 | 
 45 |     <script src="https://unpkg.com/gantt-elastic/dist/GanttElastic.umd.js"></script>
 46 |     <script src="https://unpkg.com/gantt-elastic-header/dist/Header.umd.js"></script>
 47 |   </head>
 48 | 
 49 |   <body>
 50 |     <div style="width:100%;height:100%">
 51 |       <div id="app" v-if="!destroy">
 52 |         <gantt-elastic :tasks="tasks" :options="options" :dynamic-style="dynamicStyle">
 53 |           <gantt-header slot="header"></gantt-header>
 54 |           <gantt-footer slot="footer"></gantt-footer>
 55 |         </gantt-elastic>
 56 |       </div>
 57 |     </div>
 58 | 
 59 |     <script>
 60 |       // just helper to get current dates
 61 |       function getDate(hours) {
 62 |         const currentDate = new Date();
 63 |         const currentYear = currentDate.getFullYear();
 64 |         const currentMonth = currentDate.getMonth();
 65 |         const currentDay = currentDate.getDate();
 66 |         const timeStamp = new Date(currentYear, currentMonth, currentDay, 0, 0, 0).getTime();
 67 |         return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
 68 |       }
 69 | 
 70 |       let tasks = [
 71 |         {
 72 |           id: 1,
 73 |           label: 'Make some noise',
 74 |           user:
 75 |             '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
 76 |           start: getDate(-24 * 5),
 77 |           duration: 15 * 24 * 60 * 60 * 1000,
 78 |           progress: 85,
 79 |           type: 'project',
 80 |           //collapsed: true,
 81 |         },
 82 |         {
 83 |           id: 2,
 84 |           label: 'With great power comes great responsibility',
 85 |           user:
 86 |             '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
 87 |           parentId: 1,
 88 |           start: getDate(-24 * 4),
 89 |           duration: 4 * 24 * 60 * 60 * 1000,
 90 |           progress: 50,
 91 |           type: 'milestone',
 92 |           collapsed: true,
 93 |           style: {
 94 |             base: {
 95 |               fill: '#1EBC61',
 96 |               stroke: '#0EAC51',
 97 |             },
 98 |             /*'tree-row-bar': {
 99 |               fill: '#1EBC61',
100 |               stroke: '#0EAC51'
101 |             },
102 |             'tree-row-bar-polygon': {
103 |               stroke: '#0EAC51'
104 |             }*/
105 |           },
106 |         },
107 |         {
108 |           id: 3,
109 |           label: 'Courage is being scared to death, but saddling up anyway.',
110 |           user:
111 |             '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
112 |           parentId: 2,
113 |           start: getDate(-24 * 3),
114 |           duration: 2 * 24 * 60 * 60 * 1000,
115 |           progress: 100,
116 |           type: 'task',
117 |         },
118 |         {
119 |           id: 4,
120 |           label: 'Put that toy AWAY!',
121 |           user:
122 |             '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
123 |           start: getDate(-24 * 2),
124 |           duration: 2 * 24 * 60 * 60 * 1000,
125 |           progress: 50,
126 |           type: 'task',
127 |           dependentOn: [3],
128 |         },
129 |       ];
130 | 
131 |       let options = {
132 |         maxRows: 100,
133 |         maxHeight: 300,
134 |         title: {
135 |           label: 'Your project title as html (link or whatever...)',
136 |           html: false,
137 |         },
138 |         row: {
139 |           height: 24,
140 |         },
141 |         calendar: {
142 |           hour: {
143 |             display: false,
144 |           },
145 |         },
146 |         chart: {
147 |           progress: {
148 |             bar: false,
149 |           },
150 |           expander: {
151 |             display: true,
152 |           },
153 |         },
154 |         taskList: {
155 |           expander: {
156 |             straight: false,
157 |           },
158 |           columns: [
159 |             {
160 |               id: 1,
161 |               label: 'ID',
162 |               value: 'id',
163 |               width: 40,
164 |             },
165 |             {
166 |               id: 2,
167 |               label: 'Description',
168 |               value: 'label',
169 |               width: 200,
170 |               expander: true,
171 |               html: true,
172 |               events: {
173 |                 click({ data, column }) {
174 |                   alert('description clicked!\n' + data.label);
175 |                 },
176 |               },
177 |             },
178 |             {
179 |               id: 3,
180 |               label: 'Assigned to',
181 |               value: 'user',
182 |               width: 130,
183 |               html: true,
184 |             },
185 |             {
186 |               id: 3,
187 |               label: 'Start',
188 |               value: (task) => dayjs(task.start).format('YYYY-MM-DD'),
189 |               width: 78,
190 |             },
191 |             {
192 |               id: 4,
193 |               label: 'Type',
194 |               value: 'type',
195 |               width: 68,
196 |             },
197 |             {
198 |               id: 5,
199 |               label: '%',
200 |               value: 'progress',
201 |               width: 35,
202 |               style: {
203 |                 'task-list-header-label': {
204 |                   'text-align': 'center',
205 |                   width: '100%',
206 |                 },
207 |                 'task-list-item-value-container': {
208 |                   'text-align': 'center',
209 |                   width: '100%',
210 |                 },
211 |               },
212 |             },
213 |           ],
214 |         },
215 |         /*locale:{
216 |           name: 'pl', // name String
217 |           weekdays: 'Poniedziałek_Wtorek_Środa_Czwartek_Piątek_Sobota_Niedziela'.split('_'), // weekdays Array
218 |           weekdaysShort: 'Pon_Wto_Śro_Czw_Pią_Sob_Nie'.split('_'), // OPTIONAL, short weekdays Array, use first three letters if not provided
219 |           weekdaysMin: 'Pn_Wt_Śr_Cz_Pt_So_Ni'.split('_'), // OPTIONAL, min weekdays Array, use first two letters if not provided
220 |           months: 'Styczeń_Luty_Marzec_Kwiecień_Maj_Czerwiec_Lipiec_Sierpień_Wrzesień_Październik_Listopad_Grudzień'.split('_'), // months Array
221 |           monthsShort: 'Sty_Lut_Mar_Kwi_Maj_Cze_Lip_Sie_Wrz_Paź_Lis_Gru'.split('_'), // OPTIONAL, short months Array, use first three letters if not provided
222 |           ordinal: n => `${n}`, // ordinal Function (number) => return number + output
223 |           relativeTime: { // relative time format strings, keep %s %d as the same
224 |             future: 'za %s', // e.g. in 2 hours, %s been replaced with 2hours
225 |             past: '%s temu',
226 |             s: 'kilka sekund',
227 |             m: 'minutę',
228 |             mm: '%d minut',
229 |             h: 'godzinę',
230 |             hh: '%d godzin', // e.g. 2 hours, %d been replaced with 2
231 |             d: 'dzień',
232 |             dd: '%d dni',
233 |             M: 'miesiąc',
234 |             MM: '%d miesięcy',
235 |             y: 'rok',
236 |             yy: '%d lat'
237 |           }
238 |        }*/
239 |       };
240 | 
241 |       // create instance
242 |       const app = new Vue({
243 |         components: {
244 |           'gantt-header': Header,
245 |           'gantt-elastic': GanttElastic,
246 |           'gantt-footer': {
247 |             template: `<span>this is a footer</span>`,
248 |           },
249 |         },
250 |         data: {
251 |           tasks: tasks.map((task) => Object.assign({}, task)),
252 |           options,
253 |           dynamicStyle: {
254 |             'task-list-header-label': {
255 |               'font-weight': 'bold',
256 |             },
257 |           },
258 |           destroy: false,
259 |         },
260 |       });
261 | 
262 |       // gantt state which will be updated in realtime
263 |       let ganttState, ganttInstance;
264 | 
265 |       // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event
266 |       // to get the gantt state for real time modification
267 |       app.$on('gantt-elastic-ready', (ganttElasticInstance) => {
268 |         ganttInstance = ganttElasticInstance;
269 | 
270 |         ganttInstance.$on('tasks-changed', (tasks) => {
271 |           app.tasks = tasks;
272 |         });
273 |         ganttInstance.$on('options-changed', (options) => {
274 |           app.options = options;
275 |         });
276 |         ganttInstance.$on('dynamic-style-changed', (style) => {
277 |           app.dynamicStyle = style;
278 |         });
279 | 
280 |         ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {
281 |           console.log('task mouse enter', { data, event });
282 |         });
283 |         ganttInstance.$on('updated', () => {
284 |           //console.log('gantt view was updated');
285 |         });
286 |         ganttInstance.$on('destroyed', () => {
287 |           //console.log('gantt was destroyed');
288 |         });
289 |         ganttInstance.$on('times-timeZoom-updated', () => {
290 |           console.log('time zoom changed');
291 |         });
292 |         ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {
293 |           console.log('task list clicked! (task)', { data, column });
294 |         });
295 |       });
296 | 
297 |       // mount gantt to DOM
298 |       app.$mount('#app');
299 |     </script>
300 |   </body>
301 | </html>
302 | ```
303 | 
304 | ### gantt-elastic as vue component
305 | 
306 | Take a look at the `vue.html` inside [examples folder](https://github.com/neuronetio/gantt-elastic/tree/master/examples) file to see how you could add gantt-elastic inside `<script>` tag along with the Vue framework
307 | 
308 | Demo project: https://github.com/neuronetio/vue-gantt-elastic
309 | 
310 | You can also import gantt-elastic as compiled js component in commonjs or umd format ([examples](https://github.com/neuronetio/gantt-elastic/tree/master/examples) folder) or just grab GanttElastic.vue from src directory and add to your existing vue project.
311 | 
312 | ```javascript
313 | import Vue from 'vue';
314 | import GanttElastic from "gantt-elastic";
315 | import Header from "gantt-elastic-header"; // if you want standard header (npm i -s gantt-elastic-header)
316 | new Vue({
317 |   el:'#gantt',
318 |   template:`<gantt-elastic :tasks="tasks" :options="options">
319 |     <gantt-elastic-header slot="header"></gantt-elastic-header>
320 |     <gantt-elastic-footer slot="footer"></gantt-elastic-footer>
321 |   </gantt-elastic>`,
322 |   components: {
323 |     ganttElasticHeader: {template:`<span>your header</span>`}, // or Header
324 |     ganttElastic: GanttElastic
325 |     ganttElasticFooter: {template:`<span>your footer</span>`},
326 |   },
327 |   data() {
328 |     return {
329 |       tasks: tasks,
330 |       options: options
331 |     };
332 |   }
333 | });
334 | ```
335 | 
336 | or
337 | 
338 | ```javascript
339 | import Vue from 'vue';
340 | import App from './App.vue'; // your app that uses gantt-elastic from 'gantt-elastic/src/GanttElastic.vue'
341 | 
342 | new Vue({
343 |   el: '#app',
344 |   render: (h) => h(App),
345 | });
346 | ```
347 | 
348 | ### For webpack usage (pure javascript, inside other frameworks or Vue App/Component)
349 | 
350 | Take a look at this demo project: https://github.com/neuronetio/gantt-elastic-webpack for other bundlers use umd or commonjs from dist folder.
351 | 
352 | ```javascript
353 | import GanttElastic from 'gantt-elastic/dist/GantElastic.umd.js';
354 | import GanttElastic from 'gantt-elastic/dist/GantElastic.common.js'; // same as import GanttElastic from 'gantt-elastic';
355 | import GanttElastic from 'gantt-elastic/src/GantElastic.vue'; // if you want vue component directly without compilation - look above
356 | // and the same with require
357 | const GanttElastic = require('gantt-elastic/dist/GantElastic.common.js');
358 | ```
359 | 
360 | ### uglifyjs
361 | 
362 | If you are using uglifyjs in your project be sure to have es6 compatible version like [uglify-es](https://www.npmjs.com/package/uglify-es)
363 | 
364 | ### Licensce
365 | 
366 | MIT
367 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 |   "fixturesFolder": "tests/fixtures",
3 |   "integrationFolder": "tests/integration",
4 |   "pluginsFile": "tests/plugins",
5 |   "supportFile": "tests/support/index.js",
6 |   "screenshotsFolder": "tests/screenshots",
7 |   "video": false
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/from-readme.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html charset="utf-8">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  6 |     <title>GanttElastic editor demo</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8 |     <script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
  9 | 
 10 |     <script src="https://unpkg.com/gantt-elastic/dist/GanttElastic.umd.js"></script>
 11 |     <script src="https://unpkg.com/gantt-elastic-header/dist/Header.umd.js"></script>
 12 |   </head>
 13 | 
 14 |   <body>
 15 |     <div style="width:100%;height:100%">
 16 |       <div id="app" v-if="!destroy">
 17 |         <gantt-elastic :tasks="tasks" :options="options" :dynamic-style="dynamicStyle">
 18 |           <gantt-header slot="header"></gantt-header>
 19 |           <gantt-footer slot="footer"></gantt-footer>
 20 |         </gantt-elastic>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <script>
 25 |       // just helper to get current dates
 26 |       function getDate(hours) {
 27 |         const currentDate = new Date();
 28 |         const currentYear = currentDate.getFullYear();
 29 |         const currentMonth = currentDate.getMonth() + 1;
 30 |         const currentDay = currentDate.getDate();
 31 |         const timeStamp = new Date(`${currentYear}-${currentMonth}-${currentDay} 00:00:00`).getTime();
 32 |         return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
 33 |       }
 34 | 
 35 |       let tasks = [
 36 |         {
 37 |           id: 1,
 38 |           label: 'Make some noise',
 39 |           user:
 40 |             '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
 41 |           start: getDate(-24 * 5),
 42 |           duration: 15 * 24 * 60 * 60 * 1000,
 43 |           progress: 85,
 44 |           type: 'project'
 45 |           //collapsed: true,
 46 |         },
 47 |         {
 48 |           id: 2,
 49 |           label: 'With great power comes great responsibility',
 50 |           user:
 51 |             '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
 52 |           parentId: 1,
 53 |           start: getDate(-24 * 4),
 54 |           duration: 4 * 24 * 60 * 60 * 1000,
 55 |           progress: 50,
 56 |           type: 'milestone',
 57 |           collapsed: true,
 58 |           style: {
 59 |             base: {
 60 |               fill: '#1EBC61',
 61 |               stroke: '#0EAC51'
 62 |             }
 63 |             /*'tree-row-bar': {
 64 |               fill: '#1EBC61',
 65 |               stroke: '#0EAC51'
 66 |             },
 67 |             'tree-row-bar-polygon': {
 68 |               stroke: '#0EAC51'
 69 |             }*/
 70 |           }
 71 |         },
 72 |         {
 73 |           id: 3,
 74 |           label: 'Courage is being scared to death, but saddling up anyway.',
 75 |           user:
 76 |             '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
 77 |           parentId: 2,
 78 |           start: getDate(-24 * 3),
 79 |           duration: 2 * 24 * 60 * 60 * 1000,
 80 |           progress: 100,
 81 |           type: 'task'
 82 |         },
 83 |         {
 84 |           id: 4,
 85 |           label: 'Put that toy AWAY!',
 86 |           user:
 87 |             '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
 88 |           start: getDate(-24 * 2),
 89 |           duration: 2 * 24 * 60 * 60 * 1000,
 90 |           progress: 50,
 91 |           type: 'task',
 92 |           dependentOn: [3]
 93 |         }
 94 |       ];
 95 | 
 96 |       let options = {
 97 |         maxRows: 100,
 98 |         maxHeight: 300,
 99 |         title: {
100 |           label: 'Your project title as html (link or whatever...)',
101 |           html: false
102 |         },
103 |         row: {
104 |           height: 24
105 |         },
106 |         calendar: {
107 |           hour: {
108 |             display: false
109 |           }
110 |         },
111 |         chart: {
112 |           progress: {
113 |             bar: false
114 |           },
115 |           expander: {
116 |             display: true
117 |           }
118 |         },
119 |         taskList: {
120 |           expander: {
121 |             straight: false
122 |           },
123 |           columns: [
124 |             {
125 |               id: 1,
126 |               label: 'ID',
127 |               value: 'id',
128 |               width: 40
129 |             },
130 |             {
131 |               id: 2,
132 |               label: 'Description',
133 |               value: 'label',
134 |               width: 200,
135 |               expander: true,
136 |               html: true,
137 |               events: {
138 |                 click({ data, column }) {
139 |                   alert('description clicked!\n' + data.label);
140 |                 }
141 |               }
142 |             },
143 |             {
144 |               id: 3,
145 |               label: 'Assigned to',
146 |               value: 'user',
147 |               width: 130,
148 |               html: true
149 |             },
150 |             {
151 |               id: 3,
152 |               label: 'Start',
153 |               value: task => dayjs(task.start).format('YYYY-MM-DD'),
154 |               width: 78
155 |             },
156 |             {
157 |               id: 4,
158 |               label: 'Type',
159 |               value: 'type',
160 |               width: 68
161 |             },
162 |             {
163 |               id: 5,
164 |               label: '%',
165 |               value: 'progress',
166 |               width: 35,
167 |               style: {
168 |                 'task-list-header-label': {
169 |                   'text-align': 'center',
170 |                   width: '100%'
171 |                 },
172 |                 'task-list-item-value-container': {
173 |                   'text-align': 'center',
174 |                   width: '100%'
175 |                 }
176 |               }
177 |             }
178 |           ]
179 |         },
180 |         locale: {
181 |           name: 'en',
182 |           Now: 'Now',
183 |           'X-Scale': 'Zoom-X',
184 |           'Y-Scale': 'Zoom-Y',
185 |           'Task list width': 'Task list',
186 |           'Before/After': 'Expand',
187 |           'Display task list': 'Task list'
188 |         }
189 |       };
190 | 
191 |       // create instance
192 |       const app = new Vue({
193 |         components: {
194 |           'gantt-header': Header,
195 |           'gantt-elastic': GanttElastic,
196 |           'gantt-footer': {
197 |             template: `<span>this is a footer</span>`
198 |           }
199 |         },
200 |         data: {
201 |           tasks: tasks.map(task => Object.assign({}, task)),
202 |           options,
203 |           dynamicStyle: {
204 |             'task-list-header-label': {
205 |               'font-weight': 'bold'
206 |             }
207 |           },
208 |           destroy: false
209 |         }
210 |       });
211 | 
212 |       // gantt state which will be updated in realtime
213 |       let ganttState, ganttInstance;
214 | 
215 |       // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event
216 |       // to get the gantt state for real time modification
217 |       app.$on('gantt-elastic-ready', ganttElasticInstance => {
218 |         ganttInstance = ganttElasticInstance;
219 | 
220 |         ganttInstance.$on('tasks-changed', tasks => {
221 |           app.tasks = tasks;
222 |         });
223 |         ganttInstance.$on('options-changed', options => {
224 |           app.options = options;
225 |         });
226 |         ganttInstance.$on('dynamic-style-changed', style => {
227 |           app.dynamicStyle = style;
228 |         });
229 | 
230 |         ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {
231 |           console.log('task mouse enter', { data, event });
232 |         });
233 |         ganttInstance.$on('updated', () => {
234 |           //console.log('gantt view was updated');
235 |         });
236 |         ganttInstance.$on('destroyed', () => {
237 |           //console.log('gantt was destroyed');
238 |         });
239 |         ganttInstance.$on('times-timeZoom-updated', () => {
240 |           console.log('time zoom changed');
241 |         });
242 |         ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {
243 |           console.log('task list clicked! (task)', { data, column });
244 |         });
245 |       });
246 | 
247 |       // mount gantt to DOM
248 |       app.$mount('#app');
249 |     </script>
250 |   </body>
251 | </html>
252 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html charset="utf-8">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  6 |     <title>Gangtt-elastic demo</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8 |     <script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
  9 |     <!--
 10 |   <script src="https://unpkg.com/gantt-elastic/dist/bundle.js"></script>
 11 |   -->
 12 |     <!--
 13 |   <script src="https://cdn.jsdelivr.net/npm/gantt-elastic/dist/bundle.js"></script>
 14 |   -->
 15 | 
 16 |     <script src="../dist/bundle.js"></script>
 17 |     <script src="https://unpkg.com/gantt-elastic-header@0.1.11/dist/Header.umd.js"></script>
 18 |   </head>
 19 | 
 20 |   <body>
 21 |     <div id="app" style="width:100%;height:100%;"></div>
 22 | 
 23 |     <script>
 24 |       // just helper to get current dates
 25 |       function getDate(hours) {
 26 |         const currentDate = new Date();
 27 |         const currentYear = currentDate.getFullYear();
 28 |         const currentMonth = currentDate.getMonth() + 1;
 29 |         const currentDay = currentDate.getDate();
 30 |         const timeStamp = new Date(`${currentYear}-${currentMonth}-${currentDay} 00:00:00`).getTime();
 31 |         return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
 32 |       }
 33 | 
 34 |       const tasks = [
 35 |         {
 36 |           id: 1,
 37 |           label: 'Make some noise',
 38 |           user:
 39 |             '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
 40 |           start: getDate(-24 * 5),
 41 |           duration: 5 * 24 * 60 * 60 * 1000,
 42 |           progress: 85,
 43 |           type: 'project'
 44 |         },
 45 |         {
 46 |           id: 2,
 47 |           label: 'With great power comes great responsibility',
 48 |           user:
 49 |             '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
 50 |           parentId: 1,
 51 |           start: getDate(-24 * 4),
 52 |           duration: 4 * 24 * 60 * 60 * 1000,
 53 |           progress: 50,
 54 |           type: 'milestone',
 55 |           style: {
 56 |             base: {
 57 |               fill: '#1EBC61',
 58 |               stroke: '#0EAC51'
 59 |             }
 60 |             /*'tree-row-bar': {
 61 |             fill: '#1EBC61',
 62 |             stroke: '#0EAC51'
 63 |           },
 64 |           'tree-row-bar-polygon': {
 65 |             stroke: '#0EAC51'
 66 |           }*/
 67 |           }
 68 |         },
 69 |         {
 70 |           id: 3,
 71 |           label: 'Courage is being scared to death, but saddling up anyway.',
 72 |           user:
 73 |             '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
 74 |           parentId: 2,
 75 |           start: getDate(-24 * 3),
 76 |           duration: 2 * 24 * 60 * 60 * 1000,
 77 |           progress: 100,
 78 |           type: 'task'
 79 |         },
 80 |         {
 81 |           id: 4,
 82 |           label: 'Put that toy AWAY!',
 83 |           user:
 84 |             '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
 85 |           start: getDate(-24 * 2),
 86 |           duration: 2 * 24 * 60 * 60 * 1000,
 87 |           progress: 50,
 88 |           type: 'task',
 89 |           dependentOn: [3]
 90 |         },
 91 |         {
 92 |           id: 5,
 93 |           label: 'One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.',
 94 |           user:
 95 |             '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
 96 |           parentId: 4,
 97 |           start: getDate(0),
 98 |           duration: 2 * 24 * 60 * 60 * 1000,
 99 |           progress: 10,
100 |           type: 'milestone',
101 |           style: {
102 |             base: {
103 |               fill: '#0287D0',
104 |               stroke: '#0077C0'
105 |             }
106 |           }
107 |         },
108 |         {
109 |           id: 6,
110 |           label: 'Butch Mario and the Luigi Kid',
111 |           user:
112 |             '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
113 |           parentId: 5,
114 |           start: getDate(24),
115 |           duration: 1 * 24 * 60 * 60 * 1000,
116 |           progress: 50,
117 |           type: 'task',
118 |           style: {
119 |             base: {
120 |               fill: '#8E44AD',
121 |               stroke: '#7E349D'
122 |             }
123 |           }
124 |         },
125 |         {
126 |           id: 7,
127 |           label: 'Devon, the old man wanted me, it was his dying request',
128 |           user:
129 |             '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
130 |           parentId: 2,
131 |           dependentOn: [6],
132 |           start: getDate(24 * 2),
133 |           duration: 4 * 60 * 60 * 1000,
134 |           progress: 20,
135 |           type: 'task'
136 |         },
137 |         {
138 |           id: 8,
139 |           label: 'Hey, Baby! Anybody ever tell you I have beautiful eyes?',
140 |           user:
141 |             '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
142 |           parentId: 7,
143 |           dependentOn: [7],
144 |           start: getDate(24 * 3),
145 |           duration: 1 * 24 * 60 * 60 * 1000,
146 |           progress: 0,
147 |           type: 'task'
148 |         },
149 |         {
150 |           id: 9,
151 |           label: 'This better be important, woman. You are interrupting my very delicate calculations.',
152 |           user:
153 |             '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
154 |           parentId: 8,
155 |           dependentOn: [8, 7],
156 |           start: getDate(24 * 4),
157 |           duration: 4 * 60 * 60 * 1000,
158 |           progress: 20,
159 |           type: 'task',
160 |           style: {
161 |             base: {
162 |               fill: '#8E44AD',
163 |               stroke: '#7E349D'
164 |             }
165 |             /*'tree-row-bar-polygon': {
166 |             stroke: '#7E349D'
167 |           },
168 |           'tree-row-bar': {
169 |             fill: '#8E44AD',
170 |             stroke: '#7E349D'
171 |           }*/
172 |           }
173 |         },
174 |         {
175 |           id: 10,
176 |           label: 'current task',
177 |           user:
178 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
179 |           start: getDate(24 * 5),
180 |           duration: 24 * 60 * 60,
181 |           progress: 0,
182 |           type: 'task'
183 |         }
184 |       ];
185 | 
186 |       const options = {
187 |         taskList: {
188 |           columns: [
189 |             {
190 |               id: 1,
191 |               label: 'ID',
192 |               value: 'id',
193 |               width: 40
194 |             },
195 |             {
196 |               id: 2,
197 |               label: 'Description',
198 |               value: 'label',
199 |               width: 200,
200 |               expander: true
201 |             },
202 |             {
203 |               id: 3,
204 |               label: 'Assigned to',
205 |               value: 'user',
206 |               width: 130,
207 |               html: true
208 |             },
209 |             {
210 |               id: 3,
211 |               label: 'Start',
212 |               value: task => dayjs(task.start).format('YYYY-MM-DD'),
213 |               width: 78
214 |             },
215 |             {
216 |               id: 4,
217 |               label: 'Type',
218 |               value: 'type',
219 |               width: 68
220 |             },
221 |             {
222 |               id: 5,
223 |               label: '%',
224 |               value: 'progress',
225 |               width: 35,
226 |               style: {
227 |                 'task-list-header-label': {
228 |                   'text-align': 'center',
229 |                   width: '100%'
230 |                 },
231 |                 'task-list-item-value-container': {
232 |                   'text-align': 'center'
233 |                 }
234 |               }
235 |             }
236 |           ]
237 |         }
238 |         /*locale:{
239 |         name: 'pl', // name String
240 |         weekdays: 'Poniedziałek_Wtorek_Środa_Czwartek_Piątek_Sobota_Niedziela'.split('_'), // weekdays Array
241 |         weekdaysShort: 'Pon_Wto_Śro_Czw_Pią_Sob_Nie'.split('_'), // OPTIONAL, short weekdays Array, use first three letters if not provided
242 |         weekdaysMin: 'Pn_Wt_Śr_Cz_Pt_So_Ni'.split('_'), // OPTIONAL, min weekdays Array, use first two letters if not provided
243 |         months: 'Styczeń_Luty_Marzec_Kwiecień_Maj_Czerwiec_Lipiec_Sierpień_Wrzesień_Październik_Listopad_Grudzień'.split('_'), // months Array
244 |         monthsShort: 'Sty_Lut_Mar_Kwi_Maj_Cze_Lip_Sie_Wrz_Paź_Lis_Gru'.split('_'), // OPTIONAL, short months Array, use first three letters if not provided
245 |         ordinal: n => `${n}`, // ordinal Function (number) => return number + output
246 |         relativeTime: { // relative time format strings, keep %s %d as the same
247 |           future: 'za %s', // e.g. in 2 hours, %s been replaced with 2hours
248 |           past: '%s temu',
249 |           s: 'kilka sekund',
250 |           m: 'minutę',
251 |           mm: '%d minut',
252 |           h: 'godzinę',
253 |           hh: '%d godzin', // e.g. 2 hours, %d been replaced with 2
254 |           d: 'dzień',
255 |           dd: '%d dni',
256 |           M: 'miesiąc',
257 |           MM: '%d miesięcy',
258 |           y: 'rok',
259 |           yy: '%d lat'
260 |         }
261 |       }*/
262 |       };
263 |       GanttElastic.component.components['gantt-header'] = Header;
264 |       const app = GanttElastic.mount({
265 |         el: '#app', // <- your container id
266 |         data: {
267 |           tasks: tasks,
268 |           options: options,
269 |           dynamicStyle: {}
270 |         },
271 |         ready(ganttInstance) {
272 |           console.log('ready!', ganttInstance);
273 | 
274 |           ganttInstance.$on('tasks-changed', tasks => {
275 |             console.log('tasks-updated', tasks, app);
276 |             app.tasks = tasks;
277 |           });
278 |           ganttInstance.$on('options-changed', options => {
279 |             app.options = options;
280 |           });
281 |           ganttInstance.$on('dynamic-style-changed', style => {
282 |             app.dynamicStyle = style;
283 |           });
284 | 
285 |           ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {
286 |             console.log('task mouse enter', { data, event });
287 |           });
288 |           ganttInstance.$on('updated', () => {
289 |             //console.log('gantt view was updated');
290 |           });
291 |           ganttInstance.$on('destroyed', () => {
292 |             //console.log('gantt was destroyed');
293 |           });
294 |           ganttInstance.$on('times-timeZoom-updated', () => {
295 |             console.log('time zoom changed');
296 |           });
297 |           ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {
298 |             console.log('task list clicked! (task)', { data, column });
299 |           });
300 |         }
301 |       });
302 |     </script>
303 |   </body>
304 | </html>
305 | 


--------------------------------------------------------------------------------
/examples/vue.edit.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html charset="utf-8">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  6 |     <title>GanttElastic editor demo</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.4/dist/vue.js"></script>
  8 |     <script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
  9 |     <!--
 10 |     <script src="https://unpkg.com/gantt-elastic@0.9.5/dist/GanttElastic.umd.js"></script>
 11 | -->
 12 |     <!--
 13 |   <script src="https://cdn.jsdelivr.net/npm/gantt-elastic/dist/GanttElastic.umd.js"></script>
 14 | 	-->
 15 |     <script src="https://unpkg.com/gantt-elastic-header@0.1.11/dist/Header.umd.js"></script>
 16 |     <script src="../dist/GanttElastic.umd.js"></script>
 17 |   </head>
 18 | 
 19 |   <body style="font-family:Roboto, Arial, sans-serif;">
 20 |     <div style="width:100%;height:100%">
 21 |       <div id="app" v-if="!destroy">
 22 |         <gantt-elastic :tasks="tasks" :options="options" :dynamic-style="dynamicStyle">
 23 |           <gantt-header slot="header" :options="headerOptions"></gantt-header>
 24 |           <gantt-footer slot="footer"></gantt-footer>
 25 |         </gantt-elastic>
 26 |       </div>
 27 |     </div>
 28 | 
 29 |     modify task<br />
 30 |     <input type="range" min="1" max="24" id="time-zoom" /><br />
 31 |     <input type="number" value="0" id="row" placeholder="which row?" />
 32 |     <input type="text" id="name" placeholder="name" value="label" />
 33 |     <input type="text" id="value" value="test" placeholder="value" onkeyup="update()" />
 34 |     <br />
 35 |     <input type="number" value="0" id="delrow" placeholder="which row?" />
 36 |     <button onclick="deleteRow()">Delete</button>
 37 |     <br />
 38 |     <input type="number" id="progRow" value="0" /><input
 39 |       type="range"
 40 |       min="0"
 41 |       max="100"
 42 |       oninput="progressChange()"
 43 |       id="progress"
 44 |     />
 45 |     <br />
 46 |     <button onclick="addTask()">Add task</button>
 47 |     <button onclick="addTasks()">Add tasks</button><br />
 48 |     <button onclick="destroy()">Destroy</button><br />
 49 |     <button onclick="changeOptions()">Change options</button>
 50 |     <script>
 51 |       // just helper to get current dates
 52 |       function getDate(hours) {
 53 |         const currentDate = new Date();
 54 |         const currentYear = currentDate.getFullYear();
 55 |         const currentMonth = currentDate.getMonth() + 1;
 56 |         const currentDay = currentDate.getDate();
 57 |         const timeStamp = new Date(`${currentYear}-${currentMonth}-${currentDay} 00:00:00`).getTime();
 58 |         return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
 59 |       }
 60 | 
 61 |       let tasks = [
 62 |         {
 63 |           id: 1,
 64 |           label: 'Make some noise',
 65 |           user:
 66 |             '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
 67 |           start: getDate(-24 * 5),
 68 |           duration: 15 * 24 * 60 * 60 * 1000,
 69 |           percent: 85,
 70 |           type: 'project'
 71 |           //collapsed: true,
 72 |         },
 73 |         {
 74 |           id: 2,
 75 |           label: 'With great power comes great responsibility',
 76 |           user:
 77 |             '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
 78 |           parentId: 1,
 79 |           start: getDate(-24 * 4),
 80 |           duration: 4 * 24 * 60 * 60 * 1000,
 81 |           percent: 50,
 82 |           type: 'milestone',
 83 |           collapsed: true,
 84 |           style: {
 85 |             base: {
 86 |               fill: '#1EBC61',
 87 |               stroke: '#0EAC51'
 88 |             }
 89 |             /*'tree-row-bar': {
 90 |               fill: '#1EBC61',
 91 |               stroke: '#0EAC51'
 92 |             },
 93 |             'tree-row-bar-polygon': {
 94 |               stroke: '#0EAC51'
 95 |             }*/
 96 |           }
 97 |         },
 98 |         {
 99 |           id: 3,
100 |           label: 'Courage is being scared to death, but saddling up anyway.',
101 |           user:
102 |             '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
103 |           parentId: 2,
104 |           start: getDate(-24 * 3),
105 |           duration: 2 * 24 * 60 * 60 * 1000,
106 |           percent: 100,
107 |           type: 'task'
108 |         },
109 |         {
110 |           id: 4,
111 |           label: 'Put that toy AWAY!',
112 |           user:
113 |             '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
114 |           start: getDate(-24 * 2),
115 |           duration: 2 * 24 * 60 * 60 * 1000,
116 |           percent: 50,
117 |           type: 'task',
118 |           dependentOn: [3]
119 |         },
120 |         {
121 |           id: 5,
122 |           label: 'One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.',
123 |           user:
124 |             '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
125 |           parentId: 4,
126 |           start: getDate(0),
127 |           duration: 2 * 24 * 60 * 60 * 1000,
128 |           percent: 10,
129 |           type: 'milestone',
130 |           style: {
131 |             base: {
132 |               fill: '#0287D0',
133 |               stroke: '#0077C0'
134 |             }
135 |           }
136 |         },
137 |         {
138 |           id: 6,
139 |           label: 'Butch Mario and the Luigi Kid',
140 |           user:
141 |             '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
142 |           parentId: 5,
143 |           start: getDate(24),
144 |           duration: 1 * 24 * 60 * 60 * 1000,
145 |           percent: 50,
146 |           type: 'task',
147 |           collapsed: true,
148 |           style: {
149 |             base: {
150 |               fill: '#8E44AD',
151 |               stroke: '#7E349D'
152 |             }
153 |           }
154 |         },
155 |         {
156 |           id: 7,
157 |           label: 'Devon, the old man wanted me, it was his dying request',
158 |           user:
159 |             '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
160 |           parentId: 2,
161 |           dependentOn: [6],
162 |           start: getDate(24 * 2),
163 |           duration: 4 * 60 * 60 * 1000,
164 |           percent: 20,
165 |           type: 'task',
166 |           collapsed: true
167 |         },
168 |         {
169 |           id: 8,
170 |           label: 'Hey, Baby! Anybody ever tell you I have beautiful eyes?',
171 |           user:
172 |             '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
173 |           parentId: 7,
174 |           dependentOn: [7],
175 |           start: dayjs()
176 |             .startOf('day')
177 |             .valueOf(),
178 |           end: dayjs()
179 |             .startOf('day')
180 |             .add(1, 'day')
181 |             .valueOf(),
182 |           percent: 0,
183 |           type: 'task'
184 |         },
185 |         {
186 |           id: 9,
187 |           label: 'This better be important, woman. You are interrupting my very delicate calculations.',
188 |           user:
189 |             '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
190 |           parentId: 8,
191 |           dependentOn: [8, 7],
192 |           start: getDate(24 * 4),
193 |           duration: 4 * 60 * 60 * 1000,
194 |           percent: 20,
195 |           type: 'task',
196 |           style: {
197 |             base: {
198 |               fill: '#8E44AD',
199 |               stroke: '#7E349D'
200 |             }
201 |             /*'tree-row-bar-polygon': {
202 |               stroke: '#7E349D'
203 |             },
204 |             'tree-row-bar': {
205 |               fill: '#8E44AD',
206 |               stroke: '#7E349D'
207 |             }*/
208 |           }
209 |         },
210 |         {
211 |           id: 10,
212 |           label: 'current task',
213 |           user:
214 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
215 |           start: getDate(24 * 5),
216 |           duration: 24 * 60 * 60 * 1000,
217 |           percent: 0,
218 |           type: 'task'
219 |         },
220 |         {
221 |           id: 11,
222 |           label: 'test task',
223 |           user:
224 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
225 |           start: getDate(24 * 6),
226 |           duration: 24 * 60 * 60 * 1000,
227 |           percent: 0,
228 |           type: 'task'
229 |         },
230 |         {
231 |           id: 12,
232 |           label: 'test task',
233 |           user:
234 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
235 |           start: getDate(24 * 7),
236 |           duration: 24 * 60 * 60 * 1000,
237 |           percent: 0,
238 |           type: 'task',
239 |           parentId: 11
240 |         },
241 |         {
242 |           id: 13,
243 |           label: 'test task',
244 |           user:
245 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
246 |           start: getDate(24 * 8),
247 |           duration: 24 * 60 * 60 * 1000,
248 |           percent: 0,
249 |           type: 'task'
250 |         },
251 |         {
252 |           id: 14,
253 |           label: 'test task',
254 |           user:
255 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
256 |           start: getDate(24 * 9),
257 |           end: getDate(24 * 12),
258 |           percent: 0,
259 |           type: 'task'
260 |         },
261 |         {
262 |           id: 15,
263 |           label: 'test task',
264 |           user:
265 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
266 |           start: getDate(24 * 16),
267 |           duration: 24 * 60 * 60 * 1000,
268 |           percent: 0,
269 |           type: 'task'
270 |         }
271 |       ];
272 | 
273 |       let options = {
274 |         taskMapping: {
275 |           progress: 'percent'
276 |         },
277 |         maxRows: 100,
278 |         maxHeight: 300,
279 |         title: {
280 |           label: 'Your project title as html (link or whatever...)',
281 |           html: false
282 |         },
283 |         row: {
284 |           height: 24
285 |         },
286 |         calendar: {
287 |           hour: {
288 |             display: true
289 |           }
290 |         },
291 |         chart: {
292 |           progress: {
293 |             bar: false
294 |           },
295 |           expander: {
296 |             display: true
297 |           }
298 |         },
299 |         taskList: {
300 |           expander: {
301 |             straight: false
302 |           },
303 |           columns: [
304 |             {
305 |               id: 1,
306 |               label: 'ID',
307 |               value: 'id',
308 |               width: 40
309 |             },
310 |             {
311 |               id: 2,
312 |               label: 'Description',
313 |               value: 'label',
314 |               width: 200,
315 |               expander: true,
316 |               html: true,
317 |               events: {
318 |                 click({ data, column }) {
319 |                   alert('description clicked!\n' + data.label);
320 |                 }
321 |               }
322 |             },
323 |             {
324 |               id: 3,
325 |               label: 'Assigned to',
326 |               value: 'user',
327 |               width: 130,
328 |               html: true
329 |             },
330 |             {
331 |               id: 3,
332 |               label: 'Start',
333 |               value: task => dayjs(task.start).format('YYYY-MM-DD'),
334 |               width: 78
335 |             },
336 |             {
337 |               id: 4,
338 |               label: 'Type',
339 |               value: 'type',
340 |               width: 68
341 |             },
342 |             {
343 |               id: 5,
344 |               label: '%',
345 |               value: 'progress',
346 |               width: 35,
347 |               style: {
348 |                 'task-list-header-label': {
349 |                   'text-align': 'center',
350 |                   width: '100%'
351 |                 },
352 |                 'task-list-item-value-container': {
353 |                   'text-align': 'center',
354 |                   width: '100%'
355 |                 }
356 |               }
357 |             }
358 |           ]
359 |         }
360 |       };
361 | 
362 |       const headerOptions = {
363 |         title: {
364 |           label: 'Gantt elastic',
365 |           html: false
366 |         },
367 |         locale: {
368 |           Now: 'Now',
369 |           'X-Scale': 'Zoom-X',
370 |           'Y-Scale': 'Zoom-Y',
371 |           'Task list width': 'Task list',
372 |           'Before/After': 'Expand',
373 |           'Display task list': 'Task list'
374 |         }
375 |       };
376 | 
377 |       // create instance
378 |       const app = (window.app = new Vue({
379 |         components: {
380 |           'gantt-header': Header,
381 |           'gantt-elastic': GanttElastic,
382 |           'gantt-footer': {
383 |             template: `<span>this is a footer</span>`
384 |           }
385 |         },
386 |         data: {
387 |           tasks: tasks.map(task => Object.assign({}, task)),
388 |           options,
389 |           dynamicStyle: {},
390 |           headerOptions,
391 |           destroy: false
392 |         }
393 |       }));
394 | 
395 |       // gantt state which will be updated in realtime
396 |       let ganttState, ganttInstance;
397 | 
398 |       // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event
399 |       // to get the gantt state for real time modification
400 |       app.$on('gantt-elastic-ready', ganttElasticInstance => {
401 |         ganttInstance = ganttElasticInstance;
402 | 
403 |         ganttInstance.$on('tasks-changed', tasks => {
404 |           //console.log('tasks updated', tasks);
405 |           app.tasks = tasks;
406 |         });
407 |         ganttInstance.$on('options-changed', options => {
408 |           //console.log('options updated', options);
409 |           app.options = options;
410 |         });
411 |         ganttInstance.$on('dynamic-style-changed', style => {
412 |           console.log('style updated', style);
413 |           app.dynamicStyle = style;
414 |         });
415 | 
416 |         ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {
417 |           console.log('task mouse enter', { data, event });
418 |         });
419 |         ganttInstance.$on('updated', () => {
420 |           //console.log('gantt view was updated');
421 |         });
422 |         ganttInstance.$on('destroyed', () => {
423 |           //console.log('gantt was destroyed');
424 |         });
425 |         ganttInstance.$on('times-timeZoom-updated', () => {
426 |           console.log('time zoom changed');
427 |         });
428 |         ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {
429 |           console.log('task list clicked! (task)', { data, column });
430 |         });
431 |       });
432 | 
433 |       // mount gantt to DOM
434 |       app.$mount('#app');
435 | 
436 |       document.getElementById('time-zoom').addEventListener('input', function timeZoomChange(ev) {
437 |         const zoom = ev.target.value;
438 |         app.options.times.timeZoom = zoom;
439 |       });
440 | 
441 |       function update() {
442 |         const row = document.getElementById('row').value;
443 |         const name = document.getElementById('name').value;
444 |         const value = document.getElementById('value').value;
445 |         app.tasks[row][name] = value;
446 |       }
447 | 
448 |       function deleteRow() {
449 |         const row = Number(document.getElementById('delrow').value);
450 |         app.tasks = app.tasks.filter((task, index) => {
451 |           if (index === row) {
452 |             console.log('removing task', task, index);
453 |           }
454 |           return index !== row;
455 |         });
456 |       }
457 | 
458 |       function progressChange() {
459 |         const row = Number(document.getElementById('progRow').value);
460 |         const percent = Number(document.getElementById('progress').value);
461 |         app.tasks[row].progress = percent;
462 |       }
463 | 
464 |       function addTask() {
465 |         const task = {
466 |           id: 88,
467 |           label:
468 |             '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
469 |           user:
470 |             '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Awesome!</a>',
471 |           parentId: 7,
472 |           dependentOn: [7],
473 |           start: getDate(24 * 3),
474 |           duration: 1 * 24 * 60 * 60 * 1000,
475 |           percent: 50,
476 |           type: 'project'
477 |         };
478 |         app.tasks.push(task);
479 |       }
480 | 
481 |       function addTasks() {
482 |         const newTasks = tasks.map(task => Object.assign({}, task));
483 |         app.tasks = newTasks;
484 |       }
485 | 
486 |       function changeOptions() {
487 |         const column = app.options.taskList.columns[0];
488 |         column.label = 'Whooaa!';
489 |         column.width = 100;
490 |         column.style = {
491 |           'task-list-header-column': {
492 |             background: 'red',
493 |             color: 'white'
494 |           }
495 |         };
496 |         app.options.calendar.month = {
497 |           format: {
498 |             long: function() {
499 |               return ':P';
500 |             }
501 |           }
502 |         };
503 |         app.options.times = { timeZoom: 2 };
504 |         app.options.locale['Now'] = 'Center';
505 |         ganttInstance.fixScrollPos();
506 |       }
507 | 
508 |       function destroy() {
509 |         app.destroy = true;
510 |       }
511 |     </script>
512 |   </body>
513 | </html>
514 | 


--------------------------------------------------------------------------------
/examples/vue.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html charset="utf-8">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  6 |     <title>GanttElastic demo</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8 |     <script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
  9 |     <script src="../dist/GanttElastic.umd.js"></script>
 10 |     <script src="https://unpkg.com/gantt-elastic-header@0.1.11/dist/Header.umd.js"></script>
 11 |     <!--
 12 |   <script src="../dist/GanttElastic.umd.js"></script>
 13 |   --></head>
 14 | 
 15 |   <body>
 16 |     <div style="width:100%;height:100%">
 17 |       <div id="app">
 18 |         <gantt-elastic :tasks="tasks" :options="options">
 19 |           <gantt-elastic-header slot="header"></gantt-elastic-header>
 20 |         </gantt-elastic>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <script>
 25 |       // override components - copy component from src directory change it to object or compile *.vue to *.js
 26 |       // more info about components you can find here : https://vuejs.org/v2/guide/index.html
 27 |       // You can change anything! You have full control of components templates, events, data ... and so on!
 28 |       // GanttElastic.component.components.EgMain.components.TopHeader = CustomHeader;
 29 | 
 30 |       // just helper to get current dates
 31 |       function getDate(hours) {
 32 |         const currentDate = new Date();
 33 |         const currentYear = currentDate.getFullYear();
 34 |         const currentMonth = currentDate.getMonth() + 1;
 35 |         const currentDay = currentDate.getDate();
 36 |         const timeStamp = new Date(`${currentYear}-${currentMonth}-${currentDay} 00:00:00`).getTime();
 37 |         return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
 38 |       }
 39 | 
 40 |       const tasks = [
 41 |         {
 42 |           id: 1,
 43 |           label: 'Make some noise',
 44 |           user:
 45 |             '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
 46 |           start: getDate(-24 * 5),
 47 |           duration: 5 * 24 * 60 * 60 * 1000,
 48 |           progress: 85,
 49 |           type: 'project'
 50 |         },
 51 |         {
 52 |           id: 2,
 53 |           label: 'With great power comes great responsibility',
 54 |           user:
 55 |             '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
 56 |           parentId: 1,
 57 |           start: getDate(-24 * 4),
 58 |           duration: 4 * 24 * 60 * 60 * 1000,
 59 |           progress: 50,
 60 |           type: 'milestone',
 61 |           style: {
 62 |             base: {
 63 |               fill: '#1EBC61',
 64 |               stroke: '#0EAC51'
 65 |             }
 66 |             /*'tree-row-bar': {
 67 |             fill: '#1EBC61',
 68 |             stroke: '#0EAC51'
 69 |           },
 70 |           'tree-row-bar-polygon': {
 71 |             stroke: '#0EAC51'
 72 |           }*/
 73 |           }
 74 |         },
 75 |         {
 76 |           id: 3,
 77 |           label: 'Courage is being scared to death, but saddling up anyway.',
 78 |           user:
 79 |             '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
 80 |           parentId: 2,
 81 |           start: getDate(-24 * 3),
 82 |           duration: 2 * 24 * 60 * 60 * 1000,
 83 |           progress: 100,
 84 |           type: 'task'
 85 |         },
 86 |         {
 87 |           id: 4,
 88 |           label: 'Put that toy AWAY!',
 89 |           user:
 90 |             '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
 91 |           start: getDate(-24 * 2),
 92 |           duration: 2 * 24 * 60 * 60 * 1000,
 93 |           progress: 50,
 94 |           type: 'task',
 95 |           dependentOn: [3]
 96 |         },
 97 |         {
 98 |           id: 5,
 99 |           label: 'One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.',
100 |           user:
101 |             '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
102 |           parentId: 4,
103 |           start: getDate(0),
104 |           duration: 2 * 24 * 60 * 60 * 1000,
105 |           progress: 10,
106 |           type: 'milestone',
107 |           style: {
108 |             base: {
109 |               fill: '#0287D0',
110 |               stroke: '#0077C0'
111 |             }
112 |           }
113 |         },
114 |         {
115 |           id: 6,
116 |           label: 'Butch Mario and the Luigi Kid',
117 |           user:
118 |             '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
119 |           parentId: 5,
120 |           start: getDate(24),
121 |           duration: 1 * 24 * 60 * 60 * 1000,
122 |           progress: 50,
123 |           type: 'task',
124 |           style: {
125 |             base: {
126 |               fill: '#8E44AD',
127 |               stroke: '#7E349D'
128 |             }
129 |           }
130 |         },
131 |         {
132 |           id: 7,
133 |           label: 'Devon, the old man wanted me, it was his dying request',
134 |           user:
135 |             '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
136 |           parentId: 2,
137 |           dependentOn: [6],
138 |           start: getDate(24 * 2),
139 |           duration: 4 * 60 * 60 * 1000,
140 |           progress: 20,
141 |           type: 'task'
142 |         },
143 |         {
144 |           id: 8,
145 |           label: 'Hey, Baby! Anybody ever tell you I have beautiful eyes?',
146 |           user:
147 |             '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
148 |           parentId: 7,
149 |           dependentOn: [7],
150 |           start: getDate(24 * 3),
151 |           duration: 1 * 24 * 60 * 60 * 1000,
152 |           progress: 0,
153 |           type: 'task'
154 |         },
155 |         {
156 |           id: 9,
157 |           label: 'This better be important, woman. You are interrupting my very delicate calculations.',
158 |           user:
159 |             '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
160 |           parentId: 8,
161 |           dependentOn: [8, 7],
162 |           start: getDate(24 * 4),
163 |           duration: 4 * 60 * 60 * 1000,
164 |           progress: 20,
165 |           type: 'task',
166 |           style: {
167 |             base: {
168 |               fill: '#8E44AD',
169 |               stroke: '#7E349D'
170 |             }
171 |             /*'tree-row-bar-polygon': {
172 |             stroke: '#7E349D'
173 |           },
174 |           'tree-row-bar': {
175 |             fill: '#8E44AD',
176 |             stroke: '#7E349D'
177 |           }*/
178 |           }
179 |         },
180 |         {
181 |           id: 10,
182 |           label: 'current task',
183 |           user:
184 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
185 |           start: getDate(24 * 5),
186 |           duration: 24 * 60 * 60 * 1000,
187 |           progress: 0,
188 |           type: 'task'
189 |         }
190 |       ];
191 | 
192 |       const options = {
193 |         title: {
194 |           label: 'Your project title as html (link or whatever...)',
195 |           html: false
196 |         },
197 |         taskList: {
198 |           columns: [
199 |             {
200 |               id: 1,
201 |               label: 'ID',
202 |               value: 'id',
203 |               width: 40
204 |             },
205 |             {
206 |               id: 2,
207 |               label: 'Description',
208 |               value: 'label',
209 |               width: 200,
210 |               expander: true
211 |             },
212 |             {
213 |               id: 3,
214 |               label: 'Assigned to',
215 |               value: 'user',
216 |               width: 130,
217 |               html: true
218 |             },
219 |             {
220 |               id: 3,
221 |               label: 'Start',
222 |               value: task => dayjs(task.start).format('YYYY-MM-DD'),
223 |               width: 78
224 |             },
225 |             {
226 |               id: 4,
227 |               label: 'Type',
228 |               value: 'type',
229 |               width: 68
230 |             },
231 |             {
232 |               id: 5,
233 |               label: '%',
234 |               value: 'progress',
235 |               width: 35,
236 |               style: {
237 |                 'task-list-header-label': {
238 |                   'text-align': 'center',
239 |                   width: '100%'
240 |                 },
241 |                 'task-list-item-value-container': {
242 |                   'text-align': 'center'
243 |                 }
244 |               }
245 |             }
246 |           ]
247 |         },
248 |         locale: {
249 |           code: 'en',
250 |           Now: 'Now',
251 |           'X-Scale': 'Zoom-X',
252 |           'Y-Scale': 'Zoom-Y',
253 |           'Task list width': 'Task list',
254 |           'Before/After': 'Expand',
255 |           'Display task list': 'Task list'
256 |         }
257 |         /*locale:{
258 |         name: 'pl', // name String
259 |         weekdays: 'Poniedziałek_Wtorek_Środa_Czwartek_Piątek_Sobota_Niedziela'.split('_'), // weekdays Array
260 |         weekdaysShort: 'Pon_Wto_Śro_Czw_Pią_Sob_Nie'.split('_'), // OPTIONAL, short weekdays Array, use first three letters if not provided
261 |         weekdaysMin: 'Pn_Wt_Śr_Cz_Pt_So_Ni'.split('_'), // OPTIONAL, min weekdays Array, use first two letters if not provided
262 |         months: 'Styczeń_Luty_Marzec_Kwiecień_Maj_Czerwiec_Lipiec_Sierpień_Wrzesień_Październik_Listopad_Grudzień'.split('_'), // months Array
263 |         monthsShort: 'Sty_Lut_Mar_Kwi_Maj_Cze_Lip_Sie_Wrz_Paź_Lis_Gru'.split('_'), // OPTIONAL, short months Array, use first three letters if not provided
264 |         ordinal: n => `${n}`, // ordinal Function (number) => return number + output
265 |         relativeTime: { // relative time format strings, keep %s %d as the same
266 |           future: 'za %s', // e.g. in 2 hours, %s been replaced with 2hours
267 |           past: '%s temu',
268 |           s: 'kilka sekund',
269 |           m: 'minutę',
270 |           mm: '%d minut',
271 |           h: 'godzinę',
272 |           hh: '%d godzin', // e.g. 2 hours, %d been replaced with 2
273 |           d: 'dzień',
274 |           dd: '%d dni',
275 |           M: 'miesiąc',
276 |           MM: '%d miesięcy',
277 |           y: 'rok',
278 |           yy: '%d lat'
279 |         }
280 |       }*/
281 |       };
282 | 
283 |       new Vue({
284 |         components: {
285 |           'gantt-elastic-header': Header,
286 |           'gantt-elastic': GanttElastic
287 |         },
288 |         data: {
289 |           tasks,
290 |           options,
291 |           dynamicStyle: {}
292 |         }
293 |       }).$mount('#app');
294 |     </script>
295 |   </body>
296 | </html>
297 | 


--------------------------------------------------------------------------------
/examples/vue.max-rows.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html charset="utf-8">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  6 |     <title>GanttElastic editor demo</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8 |     <script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
  9 | 
 10 |     <!--<script src="https://unpkg.com/gantt-elastic/dist/GanttElastic.umd.js"></script>-->
 11 | 
 12 |     <script src="../dist/GanttElastic.umd.js"></script>
 13 |     <script src="https://unpkg.com/gantt-elastic-header@0.1.11/dist/Header.umd.js"></script>
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <div style="width:100%;height:100%">
 18 |       <div id="app">
 19 |         <gantt-elastic :tasks="tasks" :options="options">
 20 |           <gantt-elastic-header slot="header"></gantt-elastic-header>
 21 |         </gantt-elastic>
 22 |       </div>
 23 |     </div>
 24 | 
 25 |     modify task<br />
 26 |     <input type="number" value="0" id="row" placeholder="which row?" />
 27 |     <input type="text" id="name" placeholder="name" value="label" />
 28 |     <input type="text" id="value" value="test" placeholder="value" onkeyup="update()" />
 29 |     <br />
 30 |     <input type="number" value="0" id="delrow" placeholder="which row?" />
 31 |     <button onclick="deleteRow()">Delete</button>
 32 |     <br />
 33 |     <input type="number" id="progRow" value="0" /><input
 34 |       type="range"
 35 |       min="0"
 36 |       max="100"
 37 |       oninput="progressChange()"
 38 |       id="progress"
 39 |     />
 40 |     <br />
 41 |     <button onclick="addTask()">Add task</button>
 42 |     <br />
 43 |     <button onclick="changeStyle()">Change style</button>
 44 |     <script>
 45 |       // override components - copy component from src directory change it to object or compile *.vue to *.js
 46 |       // more info about components you can find here : https://vuejs.org/v2/guide/index.html
 47 |       // You can change anything! You have full control of components templates, events, data ... and so on!
 48 |       // GanttElastic.component.components.EgMain.components.TopHeader = CustomHeader;
 49 | 
 50 |       // just helper to get current dates
 51 |       function getDate(hours) {
 52 |         const currentDate = new Date();
 53 |         const currentYear = currentDate.getFullYear();
 54 |         const currentMonth = currentDate.getMonth() + 1;
 55 |         const currentDay = currentDate.getDate();
 56 |         const timeStamp = new Date(`${currentYear}-${currentMonth}-${currentDay} 00:00:00`).getTime();
 57 |         return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
 58 |       }
 59 | 
 60 |       let tasks = [];
 61 |       let types = ['project', 'milestone', 'task'];
 62 |       const rows = 200 / 2;
 63 |       for (let i = -rows; i < rows; i++) {
 64 |         tasks.push({
 65 |           id: i + rows + 1,
 66 |           label: 'task ' + (i + rows + 1),
 67 |           user: 'test',
 68 |           start: getDate(24 * i),
 69 |           duration: 24 * 60 * 60 * 1000,
 70 |           progress: Math.floor(Math.random() * 100),
 71 |           type: types[Math.floor(Math.random() * 3)]
 72 |         });
 73 |       }
 74 | 
 75 |       let options = {
 76 |         title: {
 77 |           label: 'Your project title as html (link or whatever...)',
 78 |           html: false
 79 |         },
 80 |         maxRows: 20,
 81 |         taskList: {
 82 |           columns: [
 83 |             {
 84 |               id: 1,
 85 |               label: 'ID',
 86 |               value: 'id',
 87 |               width: 40
 88 |             },
 89 |             {
 90 |               id: 2,
 91 |               label: 'Description',
 92 |               value: 'label',
 93 |               width: 200,
 94 |               expander: true,
 95 |               html: true
 96 |             },
 97 |             {
 98 |               id: 3,
 99 |               label: 'Assigned to',
100 |               value: 'user',
101 |               width: 130,
102 |               html: true
103 |             },
104 |             {
105 |               id: 3,
106 |               label: 'Start',
107 |               value: task => dayjs(task.startTime).format('YYYY-MM-DD'),
108 |               width: 78
109 |             },
110 |             {
111 |               id: 4,
112 |               label: 'Type',
113 |               value: 'type',
114 |               width: 68
115 |             },
116 |             {
117 |               id: 5,
118 |               label: '%',
119 |               value: 'progress',
120 |               width: 35,
121 |               style: {
122 |                 'task-list-header-label': {
123 |                   'text-align': 'center',
124 |                   width: '100%'
125 |                 },
126 |                 'task-list-item-value-container': {
127 |                   'text-align': 'center'
128 |                 }
129 |               }
130 |             }
131 |           ]
132 |         },
133 |         locale: {
134 |           name: 'en',
135 |           Now: 'Now',
136 |           'X-Scale': 'Zoom-X',
137 |           'Y-Scale': 'Zoom-Y',
138 |           'Task list width': 'Task list',
139 |           'Before/After': 'Expand',
140 |           'Display task list': 'Task list'
141 |         }
142 |       };
143 |       // create instance
144 |       const app = new Vue({
145 |         components: {
146 |           'gantt-elastic': GanttElastic,
147 |           'gantt-elastic-header': Header
148 |         },
149 |         data: {
150 |           tasks,
151 |           options,
152 |           dynamicStyle: {}
153 |         }
154 |       });
155 | 
156 |       // gantt state which will be updated in realtime
157 |       let ganttState, ganttInstance;
158 | 
159 |       // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event
160 |       // to get the gantt state for realtime modification
161 |       app.$on('gantt-elastic-ready', ganttElasticInstance => {
162 |         ganttInstance = ganttElasticInstance;
163 |         ganttState = ganttElasticInstance.state;
164 |         ganttInstance.$on('gantt-elastic-chart-task-click', ({ event, data }) => {
165 |           console.log('task clicked!', { event, data });
166 |         });
167 |         ganttInstance.$on('gantt-elastic-chart-milestone-click', ({ event, data }) => {
168 |           console.log('milestone clicked!', { event, data });
169 |         });
170 |         ganttInstance.$on('gantt-elastic-chart-project-click', ({ event, data }) => {
171 |           console.log('project clicked!', { event, data });
172 |         });
173 |         console.log('gantt-elastic ready!', ganttState);
174 |       });
175 | 
176 |       // mount gantt to DOM
177 |       app.$mount('#app');
178 | 
179 |       function update() {
180 |         const row = document.getElementById('row').value;
181 |         const name = document.getElementById('name').value;
182 |         const value = document.getElementById('value').value;
183 |         ganttState.tasks[row][name] = value;
184 |       }
185 | 
186 |       function deleteRow() {
187 |         const row = Number(document.getElementById('delrow').value);
188 |         ganttState.tasks = ganttState.tasks.filter((task, index) => {
189 |           if (index === row) {
190 |             console.log('removing task', task, index);
191 |           }
192 |           return index !== row;
193 |         });
194 |       }
195 | 
196 |       function progressChange() {
197 |         const row = Number(document.getElementById('progRow').value);
198 |         const percent = Number(document.getElementById('progress').value);
199 |         ganttState.tasks[row].progress = percent;
200 |       }
201 | 
202 |       function addTask() {
203 |         const task = {
204 |           id: 88,
205 |           label:
206 |             '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
207 |           user:
208 |             '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Awesome!</a>',
209 |           parentId: 7,
210 |           dependentOn: [7],
211 |           start: getDate(24 * 3),
212 |           duration: 1 * 24 * 60 * 60,
213 |           progress: 50,
214 |           type: 'project'
215 |         };
216 |         ganttState.tasks.push(task);
217 |         //console.log(ganttState.tasks);
218 |       }
219 | 
220 |       function changeStyle() {
221 |         ganttState.tasks[0].style = {
222 |           base: {
223 |             fill: '#8E44AD',
224 |             stroke: '#7E349D'
225 |           }
226 |         };
227 |       }
228 |     </script>
229 |   </body>
230 | </html>
231 | 


--------------------------------------------------------------------------------
/gantt-elastic.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neuronetio/gantt-elastic/b37fe08e4134d10d344d528ba6b8f9b2606d23c9/gantt-elastic.gif


--------------------------------------------------------------------------------
/gantt-elastic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neuronetio/gantt-elastic/b37fe08e4134d10d344d528ba6b8f9b2606d23c9/gantt-elastic.jpg


--------------------------------------------------------------------------------
/grab-scroll.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neuronetio/gantt-elastic/b37fe08e4134d10d344d528ba6b8f9b2606d23c9/grab-scroll.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gantt-elastic",
 3 |   "version": "1.0.12",
 4 |   "description": "Gantt chart. Elastic javascript gantt chart. Vue gantt. Project manager responsive gantt. jquery gantt.",
 5 |   "main": "src/GanttElastic.vue",
 6 |   "dependencies": {
 7 |     "dayjs": "^1.8.16",
 8 |     "resize-observer-polyfill": "^1.5.1",
 9 |     "vue": "^2.6.10"
10 |   },
11 |   "devDependencies": {
12 |     "@types/chai": "^4.2.2",
13 |     "@types/cypress": "^1.1.3",
14 |     "@types/mocha": "^5.2.7",
15 |     "@vue/cli-plugin-eslint": "^3.11.0",
16 |     "@vue/cli-service": "^3.11.0",
17 |     "@vue/eslint-config-prettier": "^4.0.1",
18 |     "babel-core": "^6.26.3",
19 |     "babel-jest": "^24.9.0",
20 |     "babel-preset-env": "^1.7.0",
21 |     "css-loader": "^1.0.1",
22 |     "cypress": "^3.4.1",
23 |     "eslint": "^5.16.0",
24 |     "eslint-plugin-cypress": "^2.6.1",
25 |     "vue-loader": "^15.7.1",
26 |     "vue-slider-component": "^3.0.40",
27 |     "vue-switches": "^2.0.1",
28 |     "vue-template-compiler": "^2.6.10",
29 |     "webpack": "^4.39.3",
30 |     "webpack-cli": "^3.3.8",
31 |     "webpack-dev-server": "^3.8.0"
32 |   },
33 |   "scripts": {
34 |     "test": "npx cypress run --browser chrome",
35 |     "build": "webpack",
36 |     "dev": "webpack --config webpack.dev.js --watch"
37 |   },
38 |   "repository": {
39 |     "type": "git",
40 |     "url": "git+https://github.com/neuronetio/gantt-elastic.git"
41 |   },
42 |   "keywords": [
43 |     "gantt",
44 |     "gantt js",
45 |     "gantt chart",
46 |     "gantt elastic",
47 |     "javascript gantt",
48 |     "javascript gantt chart",
49 |     "jQuery gantt",
50 |     "vue gantt",
51 |     "js gantt",
52 |     "gantt-chart",
53 |     "responsive",
54 |     "vue",
55 |     "vue-gantt",
56 |     "javascript gantt",
57 |     "project gantt",
58 |     "project manger",
59 |     "responsive gantt",
60 |     "gantt component",
61 |     "javascript gantt",
62 |     "project",
63 |     "task"
64 |   ],
65 |   "author": "Rafal Pospiech <neuronet.io@gmail.com> (https://neuronet.io)",
66 |   "license": "MIT",
67 |   "bugs": {
68 |     "url": "https://github.com/neuronetio/gantt-elastic/issues"
69 |   },
70 |   "postcss": {
71 |     "plugins": {
72 |       "autoprefixer": {}
73 |     }
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/GanttElastic.standalone.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /**
 3 |  * @fileoverview GanttElastic standalone version component
 4 |  * @license MIT
 5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
 6 |  * @package
 7 |  */
 8 | -->
 9 | <template>
10 |   <gantt-elastic :tasks="tasks" :options="options" :dynamicStyle="dynamicStyle">
11 |     <component v-if="components.header" :is="components.header" slot="header"></component>
12 |     <component v-if="components.footer" :is="components.footer" slot="footer"></component>
13 |   </gantt-elastic>
14 | </template>
15 | <script>
16 | import Vue from 'vue';
17 | import GanttElastic from './GanttElastic.vue';
18 | export default {
19 |   name: 'GanttElasticStandalone',
20 |   components: {
21 |     'gantt-elastic': GanttElastic
22 |   },
23 |   props: ['header', 'footer'],
24 |   data: {
25 |     components: {},
26 |     tasks: [],
27 |     options: {},
28 |     dynamicStyle: {}
29 |   }
30 | };
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/bundle.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @fileoverview Bundle main entry file
 3 |  * @license MIT
 4 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
 5 |  * @package GanttElasticStandalone
 6 |  */
 7 | import Vue from 'vue';
 8 | import { mergeDeep } from './GanttElastic.vue';
 9 | import GanttElasticStandalone from './GanttElastic.standalone.vue';
10 | 
11 | window.GanttElastic = {
12 |   component: GanttElasticStandalone,
13 |   mount(config) {
14 |     const ready = typeof config.ready === 'function' ? config.ready : () => {};
15 |     const cfg = mergeDeep({}, config);
16 |     if (typeof cfg.dynamicStyle === 'undefined') {
17 |       cfg.dynamicStyle = {};
18 |     }
19 |     const ganttElastic = { ...GanttElasticStandalone };
20 |     for (let prop in cfg) {
21 |       if (['el', 'ready'].includes(prop)) {
22 |         continue;
23 |       }
24 |       if (typeof ganttElastic[prop] !== 'undefined') {
25 |         ganttElastic[prop] = { ...ganttElastic[prop], ...cfg[prop] };
26 |         continue;
27 |       }
28 |       ganttElastic[prop] = cfg[prop];
29 |     }
30 |     return new Vue(ganttElastic).$on('gantt-elastic-ready', ready).$mount(cfg.el);
31 |   }
32 | };
33 | export default GanttElasticStandalone;
34 | 


--------------------------------------------------------------------------------
/src/components/Calendar/Calendar.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview Calendar component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <div
 11 |     class="gantt-elastic__calendar-wrapper"
 12 |     :style="{ ...root.style['calendar-wrapper'], width: root.state.options.width + 'px' }"
 13 |   >
 14 |     <div class="gantt-elastic__calendar" :style="{ ...root.style['calendar'], width: root.state.options.width + 'px' }">
 15 |       <calendar-row :items="dates.months" which="month" v-if="root.state.options.calendar.month.display"></calendar-row>
 16 |       <calendar-row :items="dates.days" which="day" v-if="root.state.options.calendar.day.display"></calendar-row>
 17 |       <calendar-row :items="dates.hours" which="hour" v-if="root.state.options.calendar.hour.display"></calendar-row>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import dayjs from 'dayjs';
 24 | import CalendarRow from './CalendarRow.vue';
 25 | 
 26 | export default {
 27 |   name: 'Calendar',
 28 |   components: {
 29 |     CalendarRow
 30 |   },
 31 |   inject: ['root'],
 32 |   data() {
 33 |     return {};
 34 |   },
 35 | 
 36 |   methods: {
 37 |     /**
 38 |      * How many hours will fit?
 39 |      *
 40 |      * @returns {object}
 41 |      */
 42 |     howManyHoursFit(dayIndex) {
 43 |       const stroke = 1;
 44 |       const additionalSpace = stroke + 2;
 45 |       let fullCellWidth = this.root.state.options.times.steps[dayIndex].width.px;
 46 |       let formatNames = Object.keys(this.root.state.options.calendar.hour.format);
 47 |       for (let hours = 24; hours > 1; hours = Math.ceil(hours / 2)) {
 48 |         for (let formatName of formatNames) {
 49 |           if (
 50 |             (this.root.state.options.calendar.hour.maxWidths[formatName] + additionalSpace) * hours <= fullCellWidth &&
 51 |             hours > 1
 52 |           ) {
 53 |             return {
 54 |               count: hours,
 55 |               type: formatName
 56 |             };
 57 |           }
 58 |         }
 59 |       }
 60 |       return {
 61 |         count: 0,
 62 |         type: ''
 63 |       };
 64 |     },
 65 | 
 66 |     /**
 67 |      * How many days will fit?
 68 |      *
 69 |      * @returns {object}
 70 |      */
 71 |     howManyDaysFit() {
 72 |       const stroke = 1;
 73 |       const additionalSpace = stroke + 2;
 74 |       let fullWidth = this.root.state.options.width;
 75 |       let formatNames = Object.keys(this.root.state.options.calendar.day.format);
 76 |       for (let days = this.root.state.options.times.steps.length; days > 1; days = Math.ceil(days / 2)) {
 77 |         for (let formatName of formatNames) {
 78 |           if (
 79 |             (this.root.state.options.calendar.day.maxWidths[formatName] + additionalSpace) * days <= fullWidth &&
 80 |             days > 1
 81 |           ) {
 82 |             return {
 83 |               count: days,
 84 |               type: formatName
 85 |             };
 86 |           }
 87 |         }
 88 |       }
 89 |       return {
 90 |         count: 0,
 91 |         type: ''
 92 |       };
 93 |     },
 94 | 
 95 |     /**
 96 |      * How many months will fit?
 97 |      *
 98 |      * @returns {object}
 99 |      */
100 |     howManyMonthsFit() {
101 |       const stroke = 1;
102 |       const additionalSpace = stroke + 2;
103 |       let fullWidth = this.root.state.options.width;
104 |       let formatNames = Object.keys(this.root.state.options.calendar.month.format);
105 |       let currentMonth = dayjs(this.root.state.options.times.firstTime);
106 |       let previousMonth = currentMonth.clone();
107 |       const lastTime = this.root.state.options.times.lastTime;
108 |       let monthsCount = this.root.monthsCount(
109 |         this.root.state.options.times.firstTime,
110 |         this.root.state.options.times.lastTime
111 |       );
112 |       if (monthsCount === 1) {
113 |         for (let formatName of formatNames) {
114 |           if (this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace <= fullWidth) {
115 |             return {
116 |               count: 1,
117 |               type: formatName
118 |             };
119 |           }
120 |         }
121 |       }
122 |       for (let months = monthsCount; months > 1; months = Math.ceil(months / 2)) {
123 |         for (let formatName of formatNames) {
124 |           if (
125 |             (this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace) * months <= fullWidth &&
126 |             months > 1
127 |           ) {
128 |             return {
129 |               count: months,
130 |               type: formatName
131 |             };
132 |           }
133 |         }
134 |       }
135 |       return {
136 |         count: 0,
137 |         type: formatNames[0]
138 |       };
139 |     },
140 | 
141 |     /**
142 |      * Generate hours
143 |      *
144 |      * @returns {array}
145 |      */
146 |     generateHours() {
147 |       let allHours = [];
148 |       if (!this.root.state.options.calendar.hour.display) {
149 |         return allHours;
150 |       }
151 |       const steps = this.root.state.options.times.steps;
152 |       const localeName = this.root.state.options.locale.name;
153 |       for (let hourIndex = 0, len = steps.length; hourIndex < len; hourIndex++) {
154 |         const hoursCount = this.howManyHoursFit(hourIndex);
155 |         if (hoursCount.count === 0) {
156 |           continue;
157 |         }
158 |         const hours = { key: hourIndex + 'step', children: [] };
159 |         const hourStep = 24 / hoursCount.count;
160 |         const hourWidthPx = steps[hourIndex].width.px / hoursCount.count;
161 |         for (let i = 0, len = hoursCount.count; i < len; i++) {
162 |           const hour = i * hourStep;
163 |           let index = hourIndex;
164 |           if (hourIndex > 0) {
165 |             index = hourIndex - Math.floor(hourIndex / 24) * 24;
166 |           }
167 |           let textWidth = 0;
168 |           if (typeof this.root.state.options.calendar.hour.widths[index] !== 'undefined') {
169 |             textWidth = this.root.state.options.calendar.hour.widths[index][hoursCount.type];
170 |           }
171 |           let x = steps[hourIndex].offset.px + hourWidthPx * i;
172 |           hours.children.push({
173 |             index: hourIndex,
174 |             key: 'h' + i,
175 |             x,
176 |             y: this.root.state.options.calendar.day.height + this.root.state.options.calendar.month.height,
177 |             width: hourWidthPx,
178 |             textWidth,
179 |             height: this.root.state.options.calendar.hour.height,
180 |             label: this.root.state.options.calendar.hour.formatted[hoursCount.type][hour]
181 |           });
182 |         }
183 |         allHours.push(hours);
184 |       }
185 |       return allHours;
186 |     },
187 | 
188 |     /**
189 |      * Generate days
190 |      *
191 |      * @returns {array}
192 |      */
193 |     generateDays() {
194 |       let days = [];
195 |       if (!this.root.state.options.calendar.day.display) {
196 |         return days;
197 |       }
198 |       const daysCount = this.howManyDaysFit();
199 |       if (daysCount.count === 0) {
200 |         return days;
201 |       }
202 |       const steps = this.root.state.options.times.steps;
203 |       const localeName = this.root.state.options.locale.name;
204 |       const dayStep = Math.ceil(steps.length / daysCount.count);
205 |       for (let dayIndex = 0, len = steps.length; dayIndex < len; dayIndex += dayStep) {
206 |         let dayWidthPx = 0;
207 |         // day could be shorter (daylight saving time) so join widths and divide
208 |         for (let currentStep = 0; currentStep < dayStep; currentStep++) {
209 |           if (typeof steps[dayIndex + currentStep] !== 'undefined') {
210 |             dayWidthPx += steps[dayIndex + currentStep].width.px;
211 |           }
212 |         }
213 |         const date = dayjs(steps[dayIndex].time);
214 |         let textWidth = 0;
215 |         if (typeof this.root.state.options.calendar.day.widths[dayIndex] !== 'undefined') {
216 |           textWidth = this.root.state.options.calendar.day.widths[dayIndex][daysCount.type];
217 |         }
218 |         let x = steps[dayIndex].offset.px;
219 |         days.push({
220 |           index: dayIndex,
221 |           key: steps[dayIndex].time + 'd',
222 |           x,
223 |           y: this.root.state.options.calendar.month.height,
224 |           width: dayWidthPx,
225 |           textWidth,
226 |           height: this.root.state.options.calendar.day.height,
227 |           label: this.root.state.options.calendar.day.format[daysCount.type](date.locale(localeName))
228 |         });
229 |       }
230 |       return days.map(item => ({
231 |         key: item.key,
232 |         children: [item]
233 |       }));
234 |     },
235 | 
236 |     /**
237 |      * Generate months
238 |      *
239 |      * @returns {array}
240 |      */
241 |     generateMonths() {
242 |       let months = [];
243 |       if (!this.root.state.options.calendar.month.display) {
244 |         return months;
245 |       }
246 |       const monthsCount = this.howManyMonthsFit();
247 |       if (monthsCount.count === 0) {
248 |         return months;
249 |       }
250 |       const steps = this.root.state.options.times.steps;
251 |       const localeName = this.root.state.options.locale.name;
252 |       let formatNames = Object.keys(this.root.state.options.calendar.month.format);
253 |       let currentDate = dayjs(this.root.state.options.times.firstTime);
254 |       for (let monthIndex = 0; monthIndex < monthsCount.count; monthIndex++) {
255 |         let monthWidth = 0;
256 |         let monthOffset = Number.MAX_SAFE_INTEGER;
257 |         let finalDate = dayjs(currentDate)
258 |           .add(1, 'month')
259 |           .startOf('month');
260 |         if (finalDate.valueOf() > this.root.state.options.times.lastTime) {
261 |           finalDate = dayjs(this.root.state.options.times.lastTime);
262 |         }
263 |         // we must find first and last step to get the offsets / widths
264 |         for (let step = 0, len = this.root.state.options.times.steps.length; step < len; step++) {
265 |           let currentStep = this.root.state.options.times.steps[step];
266 |           if (currentStep.time >= currentDate.valueOf() && currentStep.time < finalDate.valueOf()) {
267 |             monthWidth += currentStep.width.px;
268 |             if (currentStep.offset.px < monthOffset) {
269 |               monthOffset = currentStep.offset.px;
270 |             }
271 |           }
272 |         }
273 |         let label = '';
274 |         let choosenFormatName;
275 |         for (let formatName of formatNames) {
276 |           if (this.root.state.options.calendar.month.maxWidths[formatName] + 2 <= monthWidth) {
277 |             label = this.root.state.options.calendar.month.format[formatName](currentDate.locale(localeName));
278 |             choosenFormatName = formatName;
279 |           }
280 |         }
281 |         let textWidth = 0;
282 |         if (typeof this.root.state.options.calendar.month.widths[monthIndex] !== 'undefined') {
283 |           textWidth = this.root.state.options.calendar.month.widths[monthIndex][choosenFormatName];
284 |         }
285 |         let x = monthOffset;
286 |         months.push({
287 |           index: monthIndex,
288 |           key: monthIndex + 'm',
289 |           x,
290 |           y: 0,
291 |           width: monthWidth,
292 |           textWidth,
293 |           choosenFormatName,
294 |           height: this.root.state.options.calendar.month.height,
295 |           label
296 |         });
297 |         currentDate = currentDate.add(1, 'month').startOf('month');
298 |         if (currentDate.valueOf() > this.root.state.options.times.lastTime) {
299 |           currentDate = dayjs(this.root.state.options.times.lastTime);
300 |         }
301 |       }
302 |       return months.map(item => ({
303 |         key: item.key,
304 |         children: [item]
305 |       }));
306 |     },
307 | 
308 |     /**
309 |      * Sum all calendar rows height and return result
310 |      *
311 |      * @returns {int}
312 |      */
313 |     calculateCalendarDimensions({ hours, days, months }) {
314 |       let height = 0;
315 |       if (this.root.state.options.calendar.hour.display && hours.length > 0) {
316 |         height += this.root.state.options.calendar.hour.height;
317 |       }
318 |       if (this.root.state.options.calendar.day.display && days.length > 0) {
319 |         height += this.root.state.options.calendar.day.height;
320 |       }
321 |       if (this.root.state.options.calendar.month.display && months.length > 0) {
322 |         height += this.root.state.options.calendar.month.height;
323 |       }
324 |       this.root.state.options.calendar.height = height;
325 |     }
326 |   },
327 | 
328 |   computed: {
329 |     dates() {
330 |       const hours = this.generateHours();
331 |       const days = this.generateDays();
332 |       const months = this.generateMonths();
333 |       const allDates = { hours, days, months };
334 |       this.calculateCalendarDimensions(allDates);
335 |       return allDates;
336 |     }
337 |   }
338 | };
339 | </script>
340 | 


--------------------------------------------------------------------------------
/src/components/Calendar/CalendarRow.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview CalendarRow component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <div :class="'gantt-elastic__calendar-row gantt-elastic__calendar-row--' + which" :style="rowStyle">
 11 |     <div
 12 |       v-for="(item, itemIndex) in items"
 13 |       :key="item.key"
 14 |       :class="'gantt-elastic__calendar-row-rect gantt-elastic__calendar-row-rect--' + which"
 15 |       :style="rectStyle"
 16 |     >
 17 |       <div
 18 |         :class="'gantt-elastic__calendar-row-rect-child gantt-elastic__calendar-row-rect-child--' + which"
 19 |         v-for="(child, childIndex) in item.children"
 20 |         :key="child.key"
 21 |         :style="rectChildStyle[itemIndex][childIndex]"
 22 |       >
 23 |         <div
 24 |           :class="'gantt-elastic__calendar-row-text gantt-elastic__calendar-row-text--' + which"
 25 |           :style="textStyle(child)"
 26 |         >
 27 |           {{ child.label }}
 28 |         </div>
 29 |       </div>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script>
 35 | export default {
 36 |   name: 'CalendarRow',
 37 |   inject: ['root'],
 38 |   props: ['items', 'which'],
 39 |   data() {
 40 |     return {};
 41 |   },
 42 |   methods: {
 43 |     /**
 44 |      * Get x position
 45 |      *
 46 |      * @returns {number}
 47 |      */
 48 |     getTextX(item) {
 49 |       let x = item.x + item.width / 2 - item.textWidth / 2;
 50 |       if (this.which === 'month' && this.root.isInsideViewPort(item.x, item.width, 0)) {
 51 |         let scrollWidth = this.root.state.options.scroll.chart.right - this.root.state.options.scroll.chart.left;
 52 |         x = this.root.state.options.scroll.chart.left + scrollWidth / 2 - item.textWidth / 2 + 2;
 53 |         if (x + item.textWidth + 2 > item.x + item.width) {
 54 |           x = item.x + item.width - item.textWidth - 2;
 55 |         } else if (x < item.x) {
 56 |           x = item.x + 2;
 57 |         }
 58 |       }
 59 |       return x - item.x;
 60 |     }
 61 |   },
 62 |   computed: {
 63 |     rowStyle() {
 64 |       return { ...this.root.style['calendar-row'], ...this.root.style['calendar-row--' + this.which] };
 65 |     },
 66 |     rectStyle() {
 67 |       return { ...this.root.style['calendar-row-rect'], ...this.root.style['calendar-row-rect--' + this.which] };
 68 |     },
 69 |     rectChildStyle() {
 70 |       const basicStyle = {
 71 |         ...this.root.style['calendar-row-rect-child'],
 72 |         ...this.root.style['calendar-row-rect-child--' + this.which]
 73 |       };
 74 |       const style = [];
 75 |       for (let item of this.items) {
 76 |         const childrenStyle = [];
 77 |         for (let child of item.children) {
 78 |           childrenStyle.push({
 79 |             ...basicStyle,
 80 |             width: child.width + 'px',
 81 |             height: child.height + 'px'
 82 |           });
 83 |         }
 84 |         style.push(childrenStyle);
 85 |       }
 86 |       return style;
 87 |     },
 88 |     textStyle() {
 89 |       const basicStyle = {
 90 |         ...this.root.style['calendar-row-text'],
 91 |         ...this.root.style['calendar-row-text--' + this.which]
 92 |       };
 93 |       return child => {
 94 |         const style = { ...basicStyle };
 95 |         if (this.which === 'month') {
 96 |           style.left = this.getTextX(child) + 'px';
 97 |         }
 98 |         return style;
 99 |       };
100 |     }
101 |   }
102 | };
103 | </script>
104 | 


--------------------------------------------------------------------------------
/src/components/Chart/Chart.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview Chart component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <div class="gantt-elastic__chart" :style="{ ...root.style['chart'] }" ref="chart">
 11 |     <div
 12 |       class="gantt-elastic__chart-calendar-container"
 13 |       ref="chartCalendarContainer"
 14 |       :style="{
 15 |         ...root.style['chart-calendar-container'],
 16 |         height: root.state.options.calendar.height + 'px',
 17 |         'margin-bottom': root.state.options.calendar.gap + 'px'
 18 |       }"
 19 |     >
 20 |       <calendar></calendar>
 21 |     </div>
 22 |     <div
 23 |       class="gantt-elastic__chart-graph-container"
 24 |       ref="chartGraphContainer"
 25 |       :style="{
 26 |         ...root.style['chart-graph-container'],
 27 |         height: root.state.options.height - root.state.options.calendar.height + 'px'
 28 |       }"
 29 |     >
 30 |       <div
 31 |         :style="{
 32 |           ...root.style['chart-area'],
 33 |           width: root.state.options.width + 'px',
 34 |           height: root.state.options.rowsHeight + 'px'
 35 |         }"
 36 |       >
 37 |         <div
 38 |           class="gantt-elastic__chart-graph"
 39 |           ref="chartGraph"
 40 |           :style="{ ...root.style['chart-graph'], height: '100%' }"
 41 |         >
 42 |           <svg
 43 |             class="gantt-elastic__chart-graph-svg"
 44 |             :style="{ ...root.style['chart-graph-svg'] }"
 45 |             ref="chartGraphSvg"
 46 |             x="0"
 47 |             y="0"
 48 |             :width="root.state.options.width + 'px'"
 49 |             :height="root.state.options.allVisibleTasksHeight + 'px'"
 50 |             xmlns="http://www.w3.org/2000/svg"
 51 |           >
 52 |             <days-highlight></days-highlight>
 53 |             <grid></grid>
 54 |             <dependency-lines :tasks="root.visibleTasks"></dependency-lines>
 55 |             <g
 56 |               class="gantt-elastic__chart-row-wrapper"
 57 |               :style="{ ...root.style['chart-row-wrapper'] }"
 58 |               v-for="task in root.visibleTasks"
 59 |               :task="task"
 60 |               :key="task.id"
 61 |             >
 62 |               <component :task="task" :is="task.type"></component>
 63 |             </g>
 64 |           </svg>
 65 |         </div>
 66 |       </div>
 67 |     </div>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import Grid from './Grid.vue';
 73 | import DaysHighlight from './DaysHighlight.vue';
 74 | import Calendar from '../Calendar/Calendar.vue';
 75 | import DependencyLines from './DependencyLines.vue';
 76 | import Task from './Row/Task.vue';
 77 | import Milestone from './Row/Milestone.vue';
 78 | import Project from './Row/Project.vue';
 79 | export default {
 80 |   name: 'Chart',
 81 |   components: {
 82 |     Grid,
 83 |     DependencyLines,
 84 |     Calendar,
 85 |     Task,
 86 |     Milestone,
 87 |     Project,
 88 |     DaysHighlight
 89 |   },
 90 |   inject: ['root'],
 91 |   data() {
 92 |     return {
 93 |       moving: false
 94 |     };
 95 |   },
 96 |   /**
 97 |    * Mounted
 98 |    */
 99 |   mounted() {
100 |     this.root.state.refs.chart = this.$refs.chart;
101 |     this.root.state.refs.chartCalendarContainer = this.$refs.chartCalendarContainer;
102 |     this.root.state.refs.chartGraphContainer = this.$refs.chartGraphContainer;
103 |     this.root.state.refs.chartGraph = this.$refs.chartGraph;
104 |     this.root.state.refs.chartGraphSvg = this.$refs.chartGraphSvg;
105 |   },
106 | 
107 |   computed: {
108 |     /**
109 |      * Get view box
110 |      *
111 |      * @returns {string}
112 |      */
113 |     getViewBox() {
114 |       return `0 0 ${this.root.state.options.width} ${this.root.state.options.allVisibleTasksHeight}`;
115 |     }
116 |   }
117 | };
118 | </script>
119 | 


--------------------------------------------------------------------------------
/src/components/Chart/DaysHighlight.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /**
 3 |  * @fileoverview Days highlight component
 4 |  * @license MIT
 5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
 6 |  * @package GanttElastic
 7 |  */
 8 | -->
 9 | 
10 | <template>
11 |   <g
12 |     class="gantt-elastic__chart-days-highlight-container"
13 |     :style="{ ...root.style['chart-days-highlight-container'] }"
14 |     v-if="showWorkingDays"
15 |   >
16 |     <rect
17 |       class="gantt-elastic__chart-days-highlight-rect"
18 |       v-for="day in workingDays"
19 |       :key="getKey(day)"
20 |       :x="day.offset.px"
21 |       y="0"
22 |       :width="day.width.px"
23 |       height="100%"
24 |       :style="{ ...root.style['chart-days-highlight-rect'] }"
25 |     ></rect>
26 |   </g>
27 | </template>
28 | 
29 | <script>
30 | import dayjs from 'dayjs';
31 | export default {
32 |   name: 'DaysHighlight',
33 |   inject: ['root'],
34 |   data() {
35 |     return {};
36 |   },
37 |   methods: {
38 |     /**
39 |      * Get key
40 |      *
41 |      * @param {object} day
42 |      * @returns {string} key ideintifier for loop
43 |      */
44 |     getKey(day) {
45 |       return dayjs(day.time).format('YYYY-MM-DD');
46 |     }
47 |   },
48 |   computed: {
49 |     /**
50 |      * Get working days
51 |      *
52 |      * @returns {array}
53 |      */
54 |     workingDays() {
55 |       return this.root.state.options.times.steps.filter(step => {
56 |         return this.root.state.options.calendar.workingDays.indexOf(dayjs(step.time).day()) === -1;
57 |       });
58 |     },
59 | 
60 |     /**
61 |      * Show working days?
62 |      *
63 |      * @returns {bool}
64 |      */
65 |     showWorkingDays() {
66 |       const calendar = this.root.state.options.calendar;
67 |       if (
68 |         typeof calendar.workingDays !== 'undefined' &&
69 |         Array.isArray(calendar.workingDays) &&
70 |         calendar.workingDays.length
71 |       ) {
72 |         return true;
73 |       }
74 |       return false;
75 |     }
76 |   }
77 | };
78 | </script>
79 | 


--------------------------------------------------------------------------------
/src/components/Chart/DependencyLines.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview DependencyLines component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <svg
 11 |     x="0"
 12 |     y="0"
 13 |     width="100%"
 14 |     height="100%"
 15 |     class="gantt-elastic__chart-dependency-lines-container"
 16 |     :style="{ ...root.style['chart-dependency-lines-container'] }"
 17 |   >
 18 |     <g v-for="task in dependencyTasks" :key="task.id" :task="task">
 19 |       <path
 20 |         class="gantt-elastic__chart-dependency-lines-path"
 21 |         :style="{ ...root.style['chart-dependency-lines-path'], ...task.style['chart-dependency-lines-path'], ...task.style['chart-dependency-lines-path-' + dependencyLine.task_id] }"
 22 |         v-for="dependencyLine in task.dependencyLines"
 23 |         :key="dependencyLine.id"
 24 |         :task="task"
 25 |         :d="dependencyLine.points"
 26 |       ></path>
 27 |     </g>
 28 |   </svg>
 29 | </template>
 30 | 
 31 | <script>
 32 | export default {
 33 |   name: 'DependencyLines',
 34 |   inject: ['root'],
 35 |   props: ['tasks'],
 36 |   data() {
 37 |     return {};
 38 |   },
 39 |   methods: {
 40 |     /**
 41 |      * Get path points
 42 |      *
 43 |      * @param {any} fromTaskId
 44 |      * @param {any} toTaskId
 45 |      * @returns {string}
 46 |      */
 47 |     getPoints(fromTaskId, toTaskId) {
 48 |       const fromTask = this.root.getTask(fromTaskId);
 49 |       const toTask = this.root.getTask(toTaskId);
 50 |       if (
 51 |         fromTask === null ||
 52 |         toTask === null ||
 53 |         !this.root.isTaskVisible(toTask) ||
 54 |         !this.root.isTaskVisible(fromTask)
 55 |       ) {
 56 |         return null;
 57 |       }
 58 |       const startX = fromTask.x + fromTask.width;
 59 |       const startY = fromTask.y + fromTask.height / 2;
 60 |       const stopX = toTask.x;
 61 |       const stopY = toTask.y + toTask.height / 2;
 62 |       const distanceX = stopX - startX;
 63 |       let distanceY;
 64 |       let yMultiplier = 1;
 65 |       if (stopY >= startY) {
 66 |         distanceY = stopY - startY;
 67 |       } else {
 68 |         distanceY = startY - stopY;
 69 |         yMultiplier = -1;
 70 |       }
 71 |       const offset = 10;
 72 |       const roundness = 4;
 73 |       const isBefore = distanceX <= offset + roundness;
 74 |       let points = `M ${startX} ${startY}
 75 |           L ${startX + offset},${startY} `;
 76 |       if (isBefore) {
 77 |         points += `Q ${startX + offset + roundness},${startY} ${startX + offset + roundness},${startY +
 78 |           roundness * yMultiplier}
 79 |             L ${startX + offset + roundness},${startY + (distanceY * yMultiplier) / 2 - roundness * yMultiplier}
 80 |             Q ${startX + offset + roundness},${startY + (distanceY * yMultiplier) / 2} ${startX + offset},${startY +
 81 |           (distanceY * yMultiplier) / 2}
 82 |             L ${startX - offset + distanceX},${startY + (distanceY * yMultiplier) / 2}
 83 |             Q ${startX - offset + distanceX - roundness},${startY + (distanceY * yMultiplier) / 2} ${startX -
 84 |           offset +
 85 |           distanceX -
 86 |           roundness},${startY + (distanceY * yMultiplier) / 2 + roundness * yMultiplier}
 87 |             L ${startX - offset + distanceX - roundness},${stopY - roundness * yMultiplier}
 88 |             Q ${startX - offset + distanceX - roundness},${stopY} ${startX - offset + distanceX},${stopY}
 89 |             L ${stopX},${stopY}`;
 90 |       } else {
 91 |         points += `L ${startX + distanceX / 2 - roundness},${startY}
 92 |             Q ${startX + distanceX / 2},${startY} ${startX + distanceX / 2},${startY + roundness * yMultiplier}
 93 |             L ${startX + distanceX / 2},${stopY - roundness * yMultiplier}
 94 |             Q ${startX + distanceX / 2},${stopY} ${startX + distanceX / 2 + roundness},${stopY}
 95 |             L ${stopX},${stopY}`;
 96 |       }
 97 |       return points;
 98 |     }
 99 |   },
100 |   computed: {
101 |     /**
102 |      * Get tasks which are dependent on other tasks
103 |      *
104 |      * @returns {array}
105 |      */
106 |     dependencyTasks() {
107 |       return this.tasks
108 |         .filter(task => typeof task.dependentOn !== 'undefined')
109 |         .map(task => {
110 |           task.dependencyLines = task.dependentOn.map(id => {
111 |             return { points: this.getPoints(id, task.id), task_id: id };
112 |           });
113 |           return task;
114 |         })
115 |         .filter(task => task.dependencyLines.points !== null);
116 |     }
117 |   }
118 | };
119 | </script>
120 | 


--------------------------------------------------------------------------------
/src/components/Chart/Grid.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview Grid component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <svg
 11 |     class="gantt-elastic__grid-lines-wrapper"
 12 |     :style="{ ...root.style['grid-lines-wrapper'] }"
 13 |     ref="chart"
 14 |     x="0"
 15 |     y="0"
 16 |     :width="root.state.options.width"
 17 |     :height="root.state.options.allVisibleTasksHeight"
 18 |     xmlns="http://www.w3.org/2000/svg"
 19 |   >
 20 |     <g class="gantt-elastic__grid-lines" :style="{ ...root.style['grid-lines'] }">
 21 |       <line
 22 |         class="gantt-elastic__grid-line-horizontal"
 23 |         :style="{ ...root.style['grid-line-horizontal'] }"
 24 |         v-for="line in horizontalLines"
 25 |         :key="line.key"
 26 |         :x1="line.x1"
 27 |         :y1="line.y1"
 28 |         :x2="line.x2"
 29 |         :y2="line.y2"
 30 |       ></line>
 31 |       <line
 32 |         class="gantt-elastic__grid-line-vertical"
 33 |         :style="{ ...root.style['grid-line-vertical'] }"
 34 |         v-for="line in verticalLines"
 35 |         :key="line.key"
 36 |         :x1="line.x1"
 37 |         :y1="line.y1"
 38 |         :x2="line.x2"
 39 |         :y2="line.y2"
 40 |       ></line>
 41 |       <line
 42 |         class="gantt-elastic__grid-line-time"
 43 |         :style="{ ...root.style['grid-line-time'] }"
 44 |         :x1="timeLinePosition.x"
 45 |         :y1="timeLinePosition.y1"
 46 |         :x2="timeLinePosition.x"
 47 |         :y2="timeLinePosition.y2"
 48 |       ></line>
 49 |     </g>
 50 |   </svg>
 51 | </template>
 52 | 
 53 | <script>
 54 | export default {
 55 |   name: 'Grid',
 56 |   inject: ['root'],
 57 |   data() {
 58 |     return {};
 59 |   },
 60 |   /**
 61 |    * Created
 62 |    */
 63 |   created() {
 64 |     this.root.$on('recenterPosition', this.recenterPosition);
 65 |   },
 66 | 
 67 |   /**
 68 |    * Mounted
 69 |    */
 70 |   mounted() {
 71 |     this.$nextTick(() => {
 72 |       this.$nextTick(() => {
 73 |         // because of stupid slider :/
 74 |         this.root.scrollToTime(this.timeLinePosition.time);
 75 |       });
 76 |     });
 77 |   },
 78 | 
 79 |   methods: {
 80 |     /**
 81 |      * Recenter position - go to current time line
 82 |      */
 83 |     recenterPosition() {
 84 |       this.root.scrollToTime(this.timeLinePosition.time);
 85 |     }
 86 |   },
 87 | 
 88 |   computed: {
 89 |     /**
 90 |      * Generate vertical lines of the grid
 91 |      *
 92 |      * @returns {array}
 93 |      */
 94 |     verticalLines() {
 95 |       let lines = [];
 96 |       const state = this.root.state;
 97 |       state.options.times.steps.forEach(step => {
 98 |         if (this.root.isInsideViewPort(step.offset.px, 1)) {
 99 |           lines.push({
100 |             key: step.time,
101 |             x1: step.offset.px,
102 |             y1: 0,
103 |             x2: step.offset.px,
104 |             y2:
105 |               state.tasks.length * (state.options.row.height + state.options.chart.grid.horizontal.gap * 2) +
106 |               this.root.style['grid-line-vertical']['stroke-width']
107 |           });
108 |         }
109 |       });
110 |       return lines;
111 |     },
112 | 
113 |     /**
114 |      * Generate horizontal lines of the grid
115 |      *
116 |      * @returns {array}
117 |      */
118 |     horizontalLines() {
119 |       let lines = [];
120 |       const state = this.root.state.options;
121 |       let tasks = this.root.visibleTasks;
122 |       for (let index = 0, len = tasks.length; index <= len; index++) {
123 |         const y =
124 |           index * (state.row.height + state.chart.grid.horizontal.gap * 2) +
125 |           this.root.style['grid-line-vertical']['stroke-width'] / 2;
126 |         lines.push({
127 |           key: 'hl' + index,
128 |           x1: 0,
129 |           y1: y,
130 |           x2: '100%',
131 |           y2: y
132 |         });
133 |       }
134 |       return lines;
135 |     },
136 | 
137 |     /**
138 |      * Check if specified line is inside viewport (visible)
139 |      *
140 |      * @returns {function}
141 |      */
142 |     inViewPort() {
143 |       return line => {
144 |         const state = this.root.state.options;
145 |         return line.x1 >= state.scroll.chart.left && line.x1 <= state.scroll.chart.right;
146 |       };
147 |     },
148 | 
149 |     /**
150 |      * Get current time line position
151 |      *
152 |      * @returns {object}
153 |      */
154 |     timeLinePosition() {
155 |       const d = new Date();
156 |       const current = d.getTime();
157 |       const currentOffset = this.root.timeToPixelOffsetX(current);
158 |       const timeLine = {
159 |         x: 0,
160 |         y1: 0,
161 |         y2: '100%',
162 |         dateTime: '',
163 |         time: current
164 |       };
165 |       timeLine.x = currentOffset;
166 |       timeLine.dateTime = d.toLocaleDateString();
167 |       return timeLine;
168 |     }
169 |   }
170 | };
171 | </script>
172 | 


--------------------------------------------------------------------------------
/src/components/Chart/ProgressBar.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview ProgressBar component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <g
 11 |     class="gantt-elastic__chart-row-progress-bar-wrapper"
 12 |     :style="{ ...root.style['chart-row-progress-bar-wrapper'], ...task.style['chart-row-progress-bar-wrapper'] }"
 13 |   >
 14 |     <defs>
 15 |       <pattern
 16 |         id="diagonalHatch"
 17 |         :width="root.state.options.chart.progress.width"
 18 |         :height="root.state.options.chart.progress.width"
 19 |         patternTransform="rotate(45 0 0)"
 20 |         patternUnits="userSpaceOnUse"
 21 |       >
 22 |         <line
 23 |           class="chart-row-progress-bar-line"
 24 |           :style="{ ...root.style['chart-row-progress-bar-line'], ...task.style['chart-row-progress-bar-line'] }"
 25 |           x1="0"
 26 |           y1="0"
 27 |           x2="0"
 28 |           :y2="root.state.options.chart.progress.width"
 29 |         />
 30 |       </pattern>
 31 |     </defs>
 32 |     <rect
 33 |       v-if="root.state.options.chart.progress.bar"
 34 |       class="gantt-elastic__chart-row-progress-bar-solid"
 35 |       :style="{ ...root.style['chart-row-progress-bar-solid'], ...task.style['chart-row-progress-bar-solid'] }"
 36 |       x="0"
 37 |       y="0"
 38 |       :width="getProgressWidth"
 39 |     ></rect>
 40 |     <g v-if="root.state.options.chart.progress.pattern">
 41 |       <rect
 42 |         class="gantt-elastic__chart-row-progress-bar-pattern"
 43 |         :style="{ ...root.style['chart-row-progress-bar-pattern'], ...task.style['chart-row-progress-bar-pattern'] }"
 44 |         :x="getProgressWidth"
 45 |         y="0"
 46 |         :width="100 - task.progress + '%'"
 47 |         height="100%"
 48 |       ></rect>
 49 |       <path
 50 |         class="gantt-elastic__chart-row-progress-bar-outline"
 51 |         :style="{
 52 |           ...root.style['chart-row-progress-bar-outline'],
 53 |           ...task.style['base'],
 54 |           ...task.style['chart-row-progress-bar-outline']
 55 |         }"
 56 |         :d="getLinePoints"
 57 |       ></path>
 58 |     </g>
 59 |   </g>
 60 | </template>
 61 | 
 62 | <script>
 63 | export default {
 64 |   name: 'ProgressBar',
 65 |   inject: ['root'],
 66 |   props: ['task'],
 67 |   data() {
 68 |     return {};
 69 |   },
 70 | 
 71 |   computed: {
 72 |     /**
 73 |      * Get progress width
 74 |      *
 75 |      * @returns {string}
 76 |      */
 77 |     getProgressWidth() {
 78 |       return this.task.progress + '%';
 79 |     },
 80 | 
 81 |     /**
 82 |      * Get line points
 83 |      *
 84 |      * @returns {string}
 85 |      */
 86 |     getLinePoints() {
 87 |       const start = (this.task.width / 100) * this.task.progress;
 88 |       return `M ${start} 0 L ${start} ${this.task.height}`;
 89 |     },
 90 | 
 91 |     /**
 92 |      * Get solid style
 93 |      *
 94 |      * @returns {object}
 95 |      */
 96 |     getSolidStyle() {
 97 |       return Object.assign({}, this.root.state.options.chart.progress.styles.bar.solid, this.task.progressBarStyle.bar);
 98 |     },
 99 | 
100 |     /**
101 |      * Get line style
102 |      *
103 |      * @returns {object}
104 |      */
105 |     getLineStyle() {
106 |       return Object.assign(
107 |         {},
108 |         {
109 |           stroke: this.root.state.options.row.styles.bar.stroke + 'a0',
110 |           'stroke-width': this.root.state.options.row.styles.bar['stroke-width'] / 2
111 |         },
112 |         this.task.style
113 |       );
114 |     }
115 |   }
116 | };
117 | </script>
118 | 


--------------------------------------------------------------------------------
/src/components/Chart/Row/Milestone.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview Milestone component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <g
 11 |     class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-milestone-wrapper"
 12 |     :style="{
 13 |       ...root.style['chart-row-bar-wrapper'],
 14 |       ...root.style['chart-row-milestone-wrapper'],
 15 |       ...task.style['chart-row-bar-wrapper']
 16 |     }"
 17 |   >
 18 |     <foreignObject
 19 |       class="gantt-elastic__chart-expander gantt-elastic__chart-expander--milestone"
 20 |       :style="{
 21 |         ...root.style['chart-expander'],
 22 |         ...root.style['chart-expander--milestone'],
 23 |         ...task.style['chart-expander']
 24 |       }"
 25 |       :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
 26 |       :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
 27 |       :width="root.state.options.chart.expander.size"
 28 |       :height="root.state.options.chart.expander.size"
 29 |       v-if="displayExpander"
 30 |     >
 31 |       <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
 32 |     </foreignObject>
 33 |     <svg
 34 |       class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-milestone"
 35 |       :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-milestone'], ...task.style['chart-row-bar'] }"
 36 |       :x="task.x"
 37 |       :y="task.y"
 38 |       :width="task.width"
 39 |       :height="task.height"
 40 |       :viewBox="`0 0 ${task.width} ${task.height}`"
 41 |       @click="emitEvent('click', $event)"
 42 |       @mouseenter="emitEvent('mouseenter', $event)"
 43 |       @mouseover="emitEvent('mouseover', $event)"
 44 |       @mouseout="emitEvent('mouseout', $event)"
 45 |       @mousemove="emitEvent('mousemove', $event)"
 46 |       @mousedown="emitEvent('mousedown', $event)"
 47 |       @mouseup="emitEvent('mouseup', $event)"
 48 |       @mousewheel="emitEvent('mousewheel', $event)"
 49 |       @touchstart="emitEvent('touchstart', $event)"
 50 |       @touchmove="emitEvent('touchmove', $event)"
 51 |       @touchend="emitEvent('touchend', $event)"
 52 |       xmlns="http://www.w3.org/2000/svg"
 53 |     >
 54 |       <defs>
 55 |         <clipPath :id="clipPathId">
 56 |           <polygon :points="getPoints"></polygon>
 57 |         </clipPath>
 58 |       </defs>
 59 |       <polygon
 60 |         class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-milestone-polygon"
 61 |         :style="{
 62 |           ...root.style['chart-row-bar-polygon'],
 63 |           ...root.style['chart-row-milestone-polygon'],
 64 |           ...task.style['base'],
 65 |           ...task.style['chart-row-bar-polygon']
 66 |         }"
 67 |         :points="getPoints"
 68 |       ></polygon>
 69 |       <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
 70 |     </svg>
 71 |     <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
 72 |   </g>
 73 | </template>
 74 | 
 75 | <script>
 76 | import ChartText from '../Text.vue';
 77 | import ProgressBar from '../ProgressBar.vue';
 78 | import Expander from '../../Expander.vue';
 79 | import taskMixin from './Task.mixin.js';
 80 | export default {
 81 |   name: 'Milestone',
 82 |   components: {
 83 |     ChartText,
 84 |     ProgressBar,
 85 |     Expander
 86 |   },
 87 |   inject: ['root'],
 88 |   props: ['task'],
 89 |   mixins: [taskMixin],
 90 |   data() {
 91 |     return {};
 92 |   },
 93 |   computed: {
 94 |     /**
 95 |      * Get clip path id
 96 |      *
 97 |      * @returns {string}
 98 |      */
 99 |     clipPathId() {
100 |       return 'gantt-elastic__milestone-clip-path-' + this.task.id;
101 |     },
102 | 
103 |     /**
104 |      * Get points
105 |      *
106 |      * @returns {string}
107 |      */
108 |     getPoints() {
109 |       const task = this.task;
110 |       const fifty = task.height / 2;
111 |       let offset = fifty;
112 |       if (task.width / 2 - offset < 0) {
113 |         offset = task.width / 2;
114 |       }
115 |       return `0,${fifty}
116 |         ${offset},0
117 |         ${task.width - offset},0
118 |         ${task.width},${fifty}
119 |         ${task.width - offset},${task.height}
120 |         ${offset},${task.height}`;
121 |     }
122 |   }
123 | };
124 | </script>
125 | 


--------------------------------------------------------------------------------
/src/components/Chart/Row/Project.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview Project component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <g
 11 |     class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-project-wrapper"
 12 |     :style="{
 13 |       ...root.style['chart-row-bar-wrapper'],
 14 |       ...root.style['chart-row-project-wrapper'],
 15 |       ...task.style['chart-row-bar-wrapper']
 16 |     }"
 17 |   >
 18 |     <foreignObject
 19 |       class="gantt-elastic__chart-expander gantt-elastic__chart-expander--project"
 20 |       :style="{
 21 |         ...root.style['chart-expander'],
 22 |         ...root.style['chart-expander--project'],
 23 |         ...task.style['chart-expander']
 24 |       }"
 25 |       :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
 26 |       :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
 27 |       :width="root.state.options.chart.expander.size"
 28 |       :height="root.state.options.chart.expander.size"
 29 |       v-if="displayExpander"
 30 |     >
 31 |       <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
 32 |     </foreignObject>
 33 |     <svg
 34 |       class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-project"
 35 |       :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-project'], ...task.style['chart-row-bar'] }"
 36 |       :x="task.x"
 37 |       :y="task.y"
 38 |       :width="task.width"
 39 |       :height="task.height"
 40 |       :viewBox="`0 0 ${task.width} ${task.height}`"
 41 |       @click="emitEvent('click', $event)"
 42 |       @mouseenter="emitEvent('mouseenter', $event)"
 43 |       @mouseover="emitEvent('mouseover', $event)"
 44 |       @mouseout="emitEvent('mouseout', $event)"
 45 |       @mousemove="emitEvent('mousemove', $event)"
 46 |       @mousedown="emitEvent('mousedown', $event)"
 47 |       @mouseup="emitEvent('mouseup', $event)"
 48 |       @mousewheel="emitEvent('mousewheel', $event)"
 49 |       @touchstart="emitEvent('touchstart', $event)"
 50 |       @touchmove="emitEvent('touchmove', $event)"
 51 |       @touchend="emitEvent('touchend', $event)"
 52 |       xmlns="http://www.w3.org/2000/svg"
 53 |     >
 54 |       <defs>
 55 |         <clipPath :id="clipPathId">
 56 |           <path :d="getPoints"></path>
 57 |         </clipPath>
 58 |       </defs>
 59 |       <path
 60 |         class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-project-polygon"
 61 |         :style="{
 62 |           ...root.style['chart-row-bar-polygon'],
 63 |           ...root.style['chart-row-project-polygon'],
 64 |           ...task.style['base'],
 65 |           ...task.style['chart-row-bar-polygon']
 66 |         }"
 67 |         :d="getPoints"
 68 |       ></path>
 69 |       <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
 70 |     </svg>
 71 |     <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
 72 |   </g>
 73 | </template>
 74 | 
 75 | <script>
 76 | import ChartText from '../Text.vue';
 77 | import ProgressBar from '../ProgressBar.vue';
 78 | import Expander from '../../Expander.vue';
 79 | import taskMixin from './Task.mixin.js';
 80 | export default {
 81 |   name: 'Project',
 82 |   components: {
 83 |     ChartText,
 84 |     ProgressBar,
 85 |     Expander
 86 |   },
 87 |   inject: ['root'],
 88 |   props: ['task'],
 89 |   mixins: [taskMixin],
 90 |   data() {
 91 |     return {};
 92 |   },
 93 |   computed: {
 94 |     /**
 95 |      * Get clip path id
 96 |      *
 97 |      * @returns {string}
 98 |      */
 99 |     clipPathId() {
100 |       return 'gantt-elastic__project-clip-path-' + this.task.id;
101 |     },
102 | 
103 |     /**
104 |      * Get points
105 |      *
106 |      * @returns {string}
107 |      */
108 |     getPoints() {
109 |       const task = this.task;
110 |       const bottom = task.height - task.height / 4;
111 |       const corner = task.height / 6;
112 |       const smallCorner = task.height / 8;
113 |       return `M ${smallCorner},0
114 |                 L ${task.width - smallCorner} 0
115 |                 L ${task.width} ${smallCorner}
116 |                 L ${task.width} ${bottom}
117 |                 L ${task.width - corner} ${task.height}
118 |                 L ${task.width - corner * 2} ${bottom}
119 |                 L ${corner * 2} ${bottom}
120 |                 L ${corner} ${task.height}
121 |                 L 0 ${bottom}
122 |                 L 0 ${smallCorner}
123 |                 Z
124 |         `;
125 |     },
126 | 
127 |     /**
128 |      * Should we display expander?
129 |      *
130 |      * @returns {boolean}
131 |      */
132 |     displayExpander() {
133 |       const expander = this.root.state.options.chart.expander;
134 |       return expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display);
135 |     }
136 |   }
137 | };
138 | </script>
139 | 


--------------------------------------------------------------------------------
/src/components/Chart/Row/Task.mixin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @fileoverview Task mixin
 3 |  * @license MIT
 4 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
 5 |  * @package GanttElastic
 6 |  */
 7 | 
 8 | export default {
 9 |   computed: {
10 |     /**
11 |      * Get view box
12 |      *
13 |      * @returns {string}
14 |      */
15 |     getViewBox() {
16 |       const task = this.task;
17 |       return `0 0 ${task.width} ${task.height}`;
18 |     },
19 | 
20 |     /**
21 |      * Get group transform
22 |      *
23 |      * @returns {string}
24 |      */
25 |     getGroupTransform() {
26 |       return `translate(${this.task.x} ${this.task.y})`;
27 |     },
28 | 
29 |     /**
30 |      * Should we display expander?
31 |      *
32 |      * @returns {boolean}
33 |      */
34 |     displayExpander() {
35 |       const expander = this.root.state.options.chart.expander;
36 |       return expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display);
37 |     }
38 |   },
39 |   methods: {
40 |     /**
41 |      * Emit event
42 |      *
43 |      * @param {string} eventName
44 |      * @param {Event} event
45 |      */
46 |     emitEvent(eventName, event) {
47 |       if (!this.root.state.options.scroll.scrolling) {
48 |         this.root.$emit(`chart-${this.task.type}-${eventName}`, { event, data: this.task });
49 |       }
50 |     }
51 |   }
52 | };
53 | 


--------------------------------------------------------------------------------
/src/components/Chart/Row/Task.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview Task component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <g
 11 |     class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-task-wrapper"
 12 |     :style="{
 13 |       ...root.style['chart-row-bar-wrapper'],
 14 |       ...root.style['chart-row-task-wrapper'],
 15 |       ...task.style['chart-row-bar-wrapper']
 16 |     }"
 17 |   >
 18 |     <foreignObject
 19 |       class="gantt-elastic__chart-expander gantt-elastic__chart-expander--task"
 20 |       :style="{
 21 |         ...root.style['chart-expander'],
 22 |         ...root.style['chart-expander--task'],
 23 |         ...task.style['chart-expander']
 24 |       }"
 25 |       :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
 26 |       :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
 27 |       :width="root.state.options.chart.expander.size"
 28 |       :height="root.state.options.chart.expander.size"
 29 |       v-if="displayExpander"
 30 |     >
 31 |       <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
 32 |     </foreignObject>
 33 |     <svg
 34 |       class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-task"
 35 |       :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-task'], ...task.style['chart-row-bar'] }"
 36 |       :x="task.x"
 37 |       :y="task.y"
 38 |       :width="task.width"
 39 |       :height="task.height"
 40 |       :viewBox="`0 0 ${task.width} ${task.height}`"
 41 |       @click="emitEvent('click', $event)"
 42 |       @mouseenter="emitEvent('mouseenter', $event)"
 43 |       @mouseover="emitEvent('mouseover', $event)"
 44 |       @mouseout="emitEvent('mouseout', $event)"
 45 |       @mousemove="emitEvent('mousemove', $event)"
 46 |       @mousedown="emitEvent('mousedown', $event)"
 47 |       @mouseup="emitEvent('mouseup', $event)"
 48 |       @mousewheel="emitEvent('mousewheel', $event)"
 49 |       @touchstart="emitEvent('touchstart', $event)"
 50 |       @touchmove="emitEvent('touchmove', $event)"
 51 |       @touchend="emitEvent('touchend', $event)"
 52 |       xmlns="http://www.w3.org/2000/svg"
 53 |     >
 54 |       <defs>
 55 |         <clipPath :id="clipPathId">
 56 |           <polygon :points="getPoints"></polygon>
 57 |         </clipPath>
 58 |       </defs>
 59 |       <polygon
 60 |         class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-task-polygon"
 61 |         :style="{
 62 |           ...root.style['chart-row-bar-polygon'],
 63 |           ...root.style['chart-row-task-polygon'],
 64 |           ...task.style['base'],
 65 |           ...task.style['chart-row-bar-polygon']
 66 |         }"
 67 |         :points="getPoints"
 68 |       ></polygon>
 69 |       <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
 70 |     </svg>
 71 |     <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
 72 |   </g>
 73 | </template>
 74 | 
 75 | <script>
 76 | import ChartText from '../Text.vue';
 77 | import ProgressBar from '../ProgressBar.vue';
 78 | import Expander from '../../Expander.vue';
 79 | import taskMixin from './Task.mixin.js';
 80 | export default {
 81 |   name: 'Task',
 82 |   components: {
 83 |     ChartText,
 84 |     ProgressBar,
 85 |     Expander
 86 |   },
 87 |   inject: ['root'],
 88 |   props: ['task'],
 89 |   mixins: [taskMixin],
 90 |   data() {
 91 |     return {};
 92 |   },
 93 |   computed: {
 94 |     /**
 95 |      * Get clip path id
 96 |      *
 97 |      * @returns {string}
 98 |      */
 99 |     clipPathId() {
100 |       return 'gantt-elastic__task-clip-path-' + this.task.id;
101 |     },
102 | 
103 |     /**
104 |      * Get points
105 |      *
106 |      * @returns {string}
107 |      */
108 |     getPoints() {
109 |       const task = this.task;
110 |       return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
111 |     }
112 |   }
113 | };
114 | </script>
115 | 


--------------------------------------------------------------------------------
/src/components/Chart/Text.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview Text component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <svg
 11 |     class="gantt-elastic__chart-row-text-wrapper"
 12 |     :style="{ ...root.style['chart-row-text-wrapper'] }"
 13 |     :x="task.x + task.width + root.state.options.chart.text.offset"
 14 |     :y="task.y - root.state.options.chart.grid.horizontal.gap"
 15 |     :width="getWidth"
 16 |     :height="getHeight"
 17 |   >
 18 |     <foreignObject x="0" y="0" width="100%" :height="getHeight">
 19 |       <div
 20 |         xmlns="http://www.w3.org/1999/xhtml"
 21 |         class="gantt-elastic__chart-row-text"
 22 |         :style="{ ...root.style['chart-row-text'] }"
 23 |       >
 24 |         <div
 25 |           class="gantt-elastic__chart-row-text-content gantt-elastic__chart-row-text-content--text"
 26 |           :style="{
 27 |             ...root.style['chart-row-text-content'],
 28 |             ...root.style['chart-row-text-content--text'],
 29 |             ...contentStyle
 30 |           }"
 31 |           v-if="!html"
 32 |         >
 33 |           <div>{{ task.label }}</div>
 34 |         </div>
 35 |         <div
 36 |           class="gantt-elastic__chart-row-text-content gantt-elastic__chart-row-text-content--html"
 37 |           :style="{
 38 |             ...root.style['chart-row-text-content'],
 39 |             ...root.style['chart-row-text-content--html'],
 40 |             ...contentStyle
 41 |           }"
 42 |           v-if="html"
 43 |           v-html="task.label"
 44 |         ></div>
 45 |       </div>
 46 |     </foreignObject>
 47 |   </svg>
 48 | </template>
 49 | 
 50 | <script>
 51 | export default {
 52 |   name: 'ChartText',
 53 |   inject: ['root'],
 54 |   props: ['task'],
 55 |   data() {
 56 |     return {};
 57 |   },
 58 |   computed: {
 59 |     /**
 60 |      * Get width
 61 |      *
 62 |      * @returns {number}
 63 |      */
 64 |     getWidth() {
 65 |       const textStyle = this.root.style['chart-row-text'];
 66 |       this.root.state.ctx.font = `${textStyle['font-weight']} ${textStyle['font-size']} ${textStyle['font-family']}`;
 67 |       const textWidth = this.root.state.ctx.measureText(this.task.label).width;
 68 |       return textWidth + this.root.state.options.chart.text.xPadding * 2;
 69 |     },
 70 | 
 71 |     /**
 72 |      * Get height
 73 |      *
 74 |      * @returns {number}
 75 |      */
 76 |     getHeight() {
 77 |       return this.task.height + this.root.state.options.chart.grid.horizontal.gap * 2;
 78 |     },
 79 | 
 80 |     /**
 81 |      * Get content style
 82 |      *
 83 |      * @returns {object}
 84 |      */
 85 |     contentStyle() {
 86 |       return { height: '100%', 'line-height': this.getHeight + 'px' };
 87 |     },
 88 | 
 89 |     /**
 90 |      * Should we render text as html?
 91 |      *
 92 |      * @returns {boolean}
 93 |      */
 94 |     html() {
 95 |       const cols = this.root.state.options.taskList.columns;
 96 |       for (let i = 0, len = cols.length; i < len; i++) {
 97 |         const col = cols[i];
 98 |         if (col.value === 'label' && typeof col.html !== 'undefined' && col.html) {
 99 |           return true;
100 |         }
101 |       }
102 |       return false;
103 |     }
104 |   }
105 | };
106 | </script>
107 | 


--------------------------------------------------------------------------------
/src/components/Expander.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview Expander component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <div :class="getClassPrefix() + '-wrapper'" :style="{ ...root.style[getClassPrefix(false) + '-wrapper'], ...style }">
 11 |     <svg
 12 |       :class="getClassPrefix() + '-content'"
 13 |       :style="{ ...root.style[getClassPrefix(false) + '-content'] }"
 14 |       :width="options.size"
 15 |       :height="options.size"
 16 |       v-if="allChildren.length"
 17 |       @click="toggle"
 18 |     >
 19 |       <rect
 20 |         :class="getClassPrefix() + '-border'"
 21 |         :style="{ ...root.style[getClassPrefix(false) + '-border'], ...borderStyle }"
 22 |         :x="border"
 23 |         :y="border"
 24 |         :width="options.size - border * 2"
 25 |         :height="options.size - border * 2"
 26 |         rx="2"
 27 |         ry="2"
 28 |       ></rect>
 29 |       <line
 30 |         :class="getClassPrefix() + '-line'"
 31 |         :style="{ ...root.style[getClassPrefix(false) + '-line'] }"
 32 |         v-if="allChildren.length"
 33 |         :x1="lineOffset"
 34 |         :y1="options.size / 2"
 35 |         :x2="options.size - lineOffset"
 36 |         :y2="options.size / 2"
 37 |       ></line>
 38 |       <line
 39 |         :class="getClassPrefix() + '-line'"
 40 |         :style="{ ...root.style[getClassPrefix(false) + '-line'] }"
 41 |         v-if="collapsed"
 42 |         :x1="options.size / 2"
 43 |         :y1="lineOffset"
 44 |         :x2="options.size / 2"
 45 |         :y2="options.size - lineOffset"
 46 |       ></line>
 47 |     </svg>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | export default {
 53 |   name: 'Expander',
 54 |   inject: ['root'],
 55 |   props: ['tasks', 'options', 'type'],
 56 |   data() {
 57 |     const border = 0.5;
 58 |     return {
 59 |       border,
 60 |       borderStyle: {
 61 |         'stroke-width': border
 62 |       },
 63 |       lineOffset: 5
 64 |     };
 65 |   },
 66 |   computed: {
 67 |     style() {
 68 |       if (this.type !== 'taskList') {
 69 |         return {};
 70 |       }
 71 |       const margin = this.root.state.options.taskList.expander.margin;
 72 |       const padding = this.tasks[0].parents.length * this.root.state.options.taskList.expander.padding;
 73 |       return {
 74 |         'padding-left': padding + margin + 'px',
 75 |         margin: 'auto 0'
 76 |       };
 77 |     },
 78 |     /**
 79 |      * Get all tasks
 80 |      *
 81 |      * @returns {array}
 82 |      */
 83 |     allChildren() {
 84 |       const children = [];
 85 |       this.tasks.forEach(task => {
 86 |         task.allChildren.forEach(childId => {
 87 |           children.push(childId);
 88 |         });
 89 |       });
 90 |       return children;
 91 |     },
 92 |     /**
 93 |      * Is current expander collapsed?
 94 |      *
 95 |      * @returns {boolean}
 96 |      */
 97 |     collapsed() {
 98 |       if (this.tasks.length === 0) {
 99 |         return false;
100 |       }
101 |       let collapsed = 0;
102 |       for (let i = 0, len = this.tasks.length; i < len; i++) {
103 |         if (this.tasks[i].collapsed) {
104 |           collapsed++;
105 |         }
106 |       }
107 |       return collapsed === this.tasks.length;
108 |     }
109 |   },
110 |   methods: {
111 |     /**
112 |      * Get specific class prefix
113 |      *
114 |      * @returns {string}
115 |      */
116 |     getClassPrefix(full = true) {
117 |       return `${full ? 'gantt-elastic__' : ''}${this.options.type}-expander`;
118 |     },
119 |     /**
120 |      * Toggle expander
121 |      */
122 |     toggle() {
123 |       if (this.tasks.length === 0) {
124 |         return;
125 |       }
126 |       const collapsed = !this.collapsed;
127 |       this.tasks.forEach(task => {
128 |         task.collapsed = collapsed;
129 |       });
130 |     }
131 |   }
132 | };
133 | </script>
134 | 


--------------------------------------------------------------------------------
/src/components/MainView.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview MainView component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <div class="gantt-elastic__main-view" :style="{ ...root.style['main-view'] }">
 11 |     <div
 12 |       class="gantt-elastic__main-container-wrapper"
 13 |       :style="{ ...root.style['main-container-wrapper'], height: root.state.options.height + 'px' }"
 14 |     >
 15 |       <div
 16 |         class="gantt-elastic__main-container"
 17 |         :style="{
 18 |           ...root.style['main-container'],
 19 |           width: root.state.options.clientWidth + 'px',
 20 |           height: root.state.options.height + 'px'
 21 |         }"
 22 |         ref="mainView"
 23 |       >
 24 |         <div
 25 |           class="gantt-elastic__container"
 26 |           :style="{ ...root.style['container'] }"
 27 |           @mousemove="mouseMove"
 28 |           @mouseup="mouseUp"
 29 |         >
 30 |           <div
 31 |             ref="taskList"
 32 |             class="gantt-elastic__task-list-container"
 33 |             :style="{
 34 |               ...root.style['task-list-container'],
 35 |               width: root.state.options.taskList.finalWidth + 'px',
 36 |               height: root.state.options.height + 'px'
 37 |             }"
 38 |             v-show="root.state.options.taskList.display"
 39 |           >
 40 |             <task-list></task-list>
 41 |           </div>
 42 |           <div
 43 |             class="gantt-elastic__main-view-container"
 44 |             :style="{ ...root.style['main-view-container'] }"
 45 |             ref="chartContainer"
 46 |             @mousedown="chartMouseDown"
 47 |             @touchstart="chartMouseDown"
 48 |             @mouseup="chartMouseUp"
 49 |             @touchend="chartMouseUp"
 50 |             @mousemove.prevent="chartMouseMove"
 51 |             @touchmove.prevent="chartMouseMove"
 52 |             @wheel.prevent="chartWheel"
 53 |           >
 54 |             <chart></chart>
 55 |           </div>
 56 |         </div>
 57 |       </div>
 58 |       <div
 59 |         class="gantt-elastic__chart-scroll-container gantt-elastic__chart-scroll-container--vertical"
 60 |         :style="{
 61 |           ...root.style['chart-scroll-container'],
 62 |           ...root.style['chart-scroll-container--vertical'],
 63 |           ...verticalStyle
 64 |         }"
 65 |         ref="chartScrollContainerVertical"
 66 |         @scroll="onVerticalScroll"
 67 |       >
 68 |         <div
 69 |           class="gantt-elastic__chart-scroll--vertical"
 70 |           :style="{ width: '1px', height: root.state.options.allVisibleTasksHeight + 'px' }"
 71 |         ></div>
 72 |       </div>
 73 |     </div>
 74 |     <div
 75 |       class="gantt-elastic__chart-scroll-container gantt-elastic__chart-scroll-container--horizontal"
 76 |       :style="{
 77 |         ...root.style['chart-scroll-container'],
 78 |         ...root.style['chart-scroll-container--horizontal'],
 79 |         marginLeft: getMarginLeft
 80 |       }"
 81 |       @scroll="onHorizontalScroll"
 82 |       ref="chartScrollContainerHorizontal"
 83 |     >
 84 |       <div
 85 |         class="gantt-elastic__chart-scroll--horizontal"
 86 |         :style="{ height: '1px', width: root.state.options.width + 'px' }"
 87 |       ></div>
 88 |     </div>
 89 |   </div>
 90 | </template>
 91 | 
 92 | <script>
 93 | import TaskList from './TaskList/TaskList.vue';
 94 | import Chart from './Chart/Chart.vue';
 95 | 
 96 | let ignoreScrollEvents = false;
 97 | 
 98 | export default {
 99 |   name: 'MainView',
100 |   components: {
101 |     TaskList,
102 |     Chart
103 |   },
104 |   inject: ['root'],
105 |   data() {
106 |     return {
107 |       defs: '',
108 |       mousePos: {
109 |         x: 0,
110 |         y: 0,
111 |         movementX: 0,
112 |         movementY: 0,
113 |         lastX: 0,
114 |         lastY: 0,
115 |         positiveX: 0,
116 |         positiveY: 0,
117 |         currentX: 0,
118 |         currentY: 0
119 |       }
120 |     };
121 |   },
122 |   /**
123 |    * Mounted
124 |    */
125 |   mounted() {
126 |     this.viewBoxWidth = this.$el.clientWidth;
127 |     this.root.state.refs.mainView = this.$refs.mainView;
128 |     this.root.state.refs.chartContainer = this.$refs.chartContainer;
129 |     this.root.state.refs.taskList = this.$refs.taskList;
130 |     this.root.state.refs.chartScrollContainerHorizontal = this.$refs.chartScrollContainerHorizontal;
131 |     this.root.state.refs.chartScrollContainerVertical = this.$refs.chartScrollContainerVertical;
132 |     document.addEventListener('mouseup', this.chartMouseUp.bind(this));
133 |     document.addEventListener('mousemove', this.chartMouseMove.bind(this));
134 |     document.addEventListener('touchmove', this.chartMouseMove.bind(this));
135 |     document.addEventListener('touchend', this.chartMouseUp.bind(this));
136 |   },
137 |   computed: {
138 |     /**
139 |      * Get margin left
140 |      *
141 |      * @returns {string}
142 |      */
143 |     getMarginLeft() {
144 |       if (!this.root.state.options.taskList.display) {
145 |         return '0px';
146 |       }
147 |       return this.root.state.options.taskList.finalWidth + 'px';
148 |     },
149 | 
150 |     /**
151 |      * Get vertical style
152 |      *
153 |      * @returns {object}
154 |      */
155 |     verticalStyle() {
156 |       return {
157 |         width: this.root.state.options.scrollBarHeight + 'px',
158 |         height: this.root.state.options.rowsHeight + 'px',
159 |         'margin-top': this.root.state.options.calendar.height + this.root.state.options.calendar.gap + 'px'
160 |       };
161 |     },
162 | 
163 |     /**
164 |      * Get view box
165 |      *
166 |      * @returns {string}
167 |      */
168 |     getViewBox() {
169 |       if (this.root.state.options.clientWidth) {
170 |         return `0 0 ${this.root.state.options.clientWidth - this.root.state.options.scrollBarHeight} ${
171 |           this.root.state.options.height
172 |         }`;
173 |       }
174 |       return `0 0 0 ${this.root.state.options.height}`;
175 |     }
176 |   },
177 |   methods: {
178 |     /**
179 |      * Emit event when mouse is moving inside main view
180 |      */
181 |     mouseMove(event) {
182 |       this.root.$emit('main-view-mousemove', event);
183 |     },
184 | 
185 |     /**
186 |      * Emit mouseup event inside main view
187 |      */
188 |     mouseUp(event) {
189 |       this.root.$emit('main-view-mouseup', event);
190 |     },
191 | 
192 |     /**
193 |      * Horizontal scroll event handler
194 |      */
195 |     onHorizontalScroll(ev) {
196 |       this.root.$emit('chart-scroll-horizontal', ev);
197 |     },
198 | 
199 |     /**
200 |      * Vertical scroll event handler
201 |      */
202 |     onVerticalScroll(ev) {
203 |       this.root.$emit('chart-scroll-vertical', ev);
204 |     },
205 | 
206 |     /**
207 |      * Mouse wheel event handler
208 |      */
209 |     chartWheel(ev) {
210 |       this.root.$emit('chart-wheel', ev);
211 |     },
212 | 
213 |     /**
214 |      * Chart mousedown event handler
215 |      * Initiates drag scrolling mode
216 |      */
217 |     chartMouseDown(ev) {
218 |       if (typeof ev.touches !== 'undefined') {
219 |         this.mousePos.x = this.mousePos.lastX = ev.touches[0].screenX;
220 |         this.mousePos.y = this.mousePos.lastY = ev.touches[0].screenY;
221 |         this.mousePos.movementX = 0;
222 |         this.mousePos.movementY = 0;
223 |         this.mousePos.currentX = this.$refs.chartScrollContainerHorizontal.scrollLeft;
224 |         this.mousePos.currentY = this.$refs.chartScrollContainerVertical.scrollTop;
225 |       }
226 |       this.root.state.options.scroll.scrolling = true;
227 |     },
228 | 
229 |     /**
230 |      * Chart mouseup event handler
231 |      * Deactivates drag scrolling mode
232 |      */
233 |     chartMouseUp(ev) {
234 |       this.root.state.options.scroll.scrolling = false;
235 |     },
236 | 
237 |     /**
238 |      * Chart mousemove event handler
239 |      * When in drag scrolling mode this method calculate scroll movement
240 |      */
241 |     chartMouseMove(ev) {
242 |       if (this.root.state.options.scroll.scrolling) {
243 |         ev.preventDefault();
244 |         ev.stopImmediatePropagation();
245 |         ev.stopPropagation();
246 |         const touch = typeof ev.touches !== 'undefined';
247 |         let movementX, movementY;
248 |         if (touch) {
249 |           const screenX = ev.touches[0].screenX;
250 |           const screenY = ev.touches[0].screenY;
251 |           movementX = this.mousePos.x - screenX;
252 |           movementY = this.mousePos.y - screenY;
253 |           this.mousePos.lastX = screenX;
254 |           this.mousePos.lastY = screenY;
255 |         } else {
256 |           movementX = ev.movementX;
257 |           movementY = ev.movementY;
258 |         }
259 |         const horizontal = this.$refs.chartScrollContainerHorizontal;
260 |         const vertical = this.$refs.chartScrollContainerVertical;
261 |         let x = 0,
262 |           y = 0;
263 |         if (touch) {
264 |           x = this.mousePos.currentX + movementX * this.root.state.options.scroll.dragXMoveMultiplier;
265 |         } else {
266 |           x = horizontal.scrollLeft - movementX * this.root.state.options.scroll.dragXMoveMultiplier;
267 |         }
268 |         horizontal.scrollLeft = x;
269 |         if (touch) {
270 |           y = this.mousePos.currentY + movementY * this.root.state.options.scroll.dragYMoveMultiplier;
271 |         } else {
272 |           y = vertical.scrollTop - movementY * this.root.state.options.scroll.dragYMoveMultiplier;
273 |         }
274 |         vertical.scrollTop = y;
275 |       }
276 |     }
277 |   },
278 | 
279 |   /**
280 |    * Before destroy event - clean up
281 |    */
282 |   beforeDestroy() {
283 |     document.removeEventListener('mouseup', this.chartMouseUp);
284 |     document.removeEventListener('mousemove', this.chartMouseMove);
285 |     document.removeEventListener('touchmove', this.chartMouseMove);
286 |     document.removeEventListener('touchend', this.chartMouseUp);
287 |   }
288 | };
289 | </script>
290 | 


--------------------------------------------------------------------------------
/src/components/TaskList/ItemColumn.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview ItemColumn component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <div class="gantt-elastic__task-list-item-column" :style="itemColumnStyle">
 11 |     <div class="gantt-elastic__task-list-item-value-wrapper" :style="wrapperStyle">
 12 |       <slot></slot>
 13 |       <div class="gantt-elastic__task-list-item-value-container" :style="containerStyle">
 14 |         <div
 15 |           v-if="!html"
 16 |           class="gantt-elastic__task-list-item-value"
 17 |           :style="valueStyle"
 18 |           @click="emitEvent('click', $event)"
 19 |           @mouseenter="emitEvent('mouseenter', $event)"
 20 |           @mouseover="emitEvent('mouseover', $event)"
 21 |           @mouseout="emitEvent('mouseout', $event)"
 22 |           @mousemove="emitEvent('mousemove', $event)"
 23 |           @mousedown="emitEvent('mousedown', $event)"
 24 |           @mouseup="emitEvent('mouseup', $event)"
 25 |           @mousewheel="emitEvent('mousewheel', $event)"
 26 |           @touchstart="emitEvent('touchstart', $event)"
 27 |           @touchmove="emitEvent('touchmove', $event)"
 28 |           @touchend="emitEvent('touchend', $event)"
 29 |         >
 30 |           {{ value }}
 31 |         </div>
 32 |         <div
 33 |           v-else
 34 |           class="gantt-elastic__task-list-item-value"
 35 |           :style="valueStyle"
 36 |           @click="emitEvent('click', $event)"
 37 |           @mouseenter="emitEvent('mouseenter', $event)"
 38 |           @mouseover="emitEvent('mouseover', $event)"
 39 |           @mouseout="emitEvent('mouseout', $event)"
 40 |           @mousemove="emitEvent('mousemove', $event)"
 41 |           @mousedown="emitEvent('mousedown', $event)"
 42 |           @mouseup="emitEvent('mouseup', $event)"
 43 |           @mousewheel="emitEvent('mousewheel', $event)"
 44 |           @touchstart="emitEvent('touchstart', $event)"
 45 |           @touchmove="emitEvent('touchmove', $event)"
 46 |           @touchend="emitEvent('touchend', $event)"
 47 |           v-html="value"
 48 |         ></div>
 49 |       </div>
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | export default {
 56 |   name: 'ItemColumn',
 57 |   inject: ['root'],
 58 |   props: ['column', 'task'],
 59 |   data() {
 60 |     return {};
 61 |   },
 62 |   methods: {
 63 |     /**
 64 |      * Emit event
 65 |      *
 66 |      * @param {String} eventName
 67 |      * @param {Event} event
 68 |      */
 69 |     emitEvent(eventName, event) {
 70 |       if (typeof this.column.events !== 'undefined' && typeof this.column.events[eventName] === 'function') {
 71 |         this.column.events[eventName]({ event, data: this.task, column: this.column });
 72 |       }
 73 |       this.root.$emit(`taskList-${this.task.type}-${eventName}`, { event, data: this.task, column: this.column });
 74 |     }
 75 |   },
 76 |   computed: {
 77 |     /**
 78 |      * Should we display html or just text?
 79 |      *
 80 |      * @returns {boolean}
 81 |      */
 82 |     html() {
 83 |       if (typeof this.column.html !== 'undefined' && this.column.html === true) {
 84 |         return true;
 85 |       }
 86 |       return false;
 87 |     },
 88 | 
 89 |     /**
 90 |      * Get column value
 91 |      *
 92 |      * @returns {any|string}
 93 |      */
 94 |     value() {
 95 |       if (typeof this.column.value === 'function') {
 96 |         return this.column.value(this.task);
 97 |       }
 98 |       return this.task[this.column.value];
 99 |     },
100 | 
101 |     itemColumnStyle() {
102 |       return {
103 |         ...this.root.style['task-list-item-column'],
104 |         ...this.column.style['task-list-item-column'],
105 |         width: this.column.finalWidth + 'px',
106 |         height: this.column.height + 'px'
107 |       };
108 |     },
109 | 
110 |     wrapperStyle() {
111 |       return {
112 |         ...this.root.style['task-list-item-value-wrapper'],
113 |         ...this.column.style['task-list-item-value-wrapper']
114 |       };
115 |     },
116 | 
117 |     containerStyle() {
118 |       return {
119 |         ...this.root.style['task-list-item-value-container'],
120 |         ...this.column.style['task-list-item-value-container']
121 |       };
122 |     },
123 | 
124 |     valueStyle() {
125 |       return { ...this.root.style['task-list-item-value'], ...this.column.style['task-list-item-value'] };
126 |     }
127 |   }
128 | };
129 | </script>
130 | 


--------------------------------------------------------------------------------
/src/components/TaskList/TaskList.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /**
 3 |  * @fileoverview TaskList component
 4 |  * @license MIT
 5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
 6 |  * @package GanttElastic
 7 |  */
 8 | -->
 9 | <template>
10 |   <div
11 |     class="gantt-elastic__task-list-wrapper"
12 |     ref="taskListWrapper"
13 |     :style="{ ...root.style['task-list-wrapper'], width: '100%', height: '100%' }"
14 |     v-show="root.state.options.taskList.display"
15 |   >
16 |     <div class="gantt-elastic__task-list" :style="{ ...root.style['task-list'] }" ref="taskList">
17 |       <task-list-header></task-list-header>
18 |       <div
19 |         class="gantt-elastic__task-list-items"
20 |         ref="taskListItems"
21 |         :style="{ ...root.style['task-list-items'], height: root.state.options.rowsHeight + 'px' }"
22 |       >
23 |         <task-list-item v-for="task in root.visibleTasks" :key="task.id" :task="task"></task-list-item>
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import TaskListHeader from './TaskListHeader.vue';
31 | import TaskListItem from './TaskListItem.vue';
32 | export default {
33 |   name: 'TaskList',
34 |   components: {
35 |     TaskListHeader,
36 |     TaskListItem
37 |   },
38 |   inject: ['root'],
39 |   data() {
40 |     return {};
41 |   },
42 | 
43 |   /**
44 |    * Mounted
45 |    */
46 |   mounted() {
47 |     this.root.state.refs.taskListWrapper = this.$refs.taskListWrapper;
48 |     this.root.state.refs.taskList = this.$refs.taskList;
49 |     this.root.state.refs.taskListItems = this.$refs.taskListItems;
50 |   }
51 | };
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/components/TaskList/TaskListHeader.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /**
  3 |  * @fileoverview TaskListHeader component
  4 |  * @license MIT
  5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  6 |  * @package GanttElastic
  7 |  */
  8 | -->
  9 | <template>
 10 |   <div
 11 |     class="gantt-elastic__task-list-header"
 12 |     :style="{
 13 |       ...root.style['task-list-header'],
 14 |       height: `${root.state.options.calendar.height}px`,
 15 |       'margin-bottom': `${root.state.options.calendar.gap}px`
 16 |     }"
 17 |   >
 18 |     <div
 19 |       class="gantt-elastic__task-list-header-column"
 20 |       :style="{
 21 |         ...root.style['task-list-header-column'],
 22 |         ...column.style['task-list-header-column'],
 23 |         ...getStyle(column)
 24 |       }"
 25 |       v-for="column in root.getTaskListColumns"
 26 |       :key="column._id"
 27 |     >
 28 |       <task-list-expander
 29 |         v-if="column.expander"
 30 |         :tasks="collapsible"
 31 |         :options="root.state.options.taskList.expander"
 32 |       ></task-list-expander>
 33 |       <div
 34 |         class="gantt-elastic__task-list-header-label"
 35 |         :style="{ ...root.style['task-list-header-label'], ...column.style['task-list-header-label'] }"
 36 |         :column="column"
 37 |         @mouseup="resizerMouseUp"
 38 |       >
 39 |         {{ column.label }}
 40 |       </div>
 41 |       <div
 42 |         class="gantt-elastic__task-list-header-resizer-wrapper"
 43 |         :style="{
 44 |           ...root.style['task-list-header-resizer-wrapper'],
 45 |           ...column.style['task-list-header-resizer-wrapper']
 46 |         }"
 47 |         :column="column"
 48 |         @mousedown="resizerMouseDown($event, column)"
 49 |       >
 50 |         <div
 51 |           class="gantt-elastic__task-list-header-resizer"
 52 |           :style="{ ...root.style['task-list-header-resizer'], ...column.style['task-list-header-resizer'] }"
 53 |         >
 54 |           <div
 55 |             class="gantt-elastic__task-list-header-resizer-dot"
 56 |             :style="{ ...root.style['task-list-header-resizer-dot'], ...column.style['task-list-header-resizer-dot'] }"
 57 |           ></div>
 58 |           <div
 59 |             class="gantt-elastic__task-list-header-resizer-dot"
 60 |             :style="{ ...root.style['task-list-header-resizer-dot'], ...column.style['task-list-header-resizer-dot'] }"
 61 |           ></div>
 62 |           <div
 63 |             class="gantt-elastic__task-list-header-resizer-dot"
 64 |             :style="{ ...root.style['task-list-header-resizer-dot'], ...column.style['task-list-header-resizer-dot'] }"
 65 |           ></div>
 66 |         </div>
 67 |       </div>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script>
 73 | import TaskListExpander from '../Expander.vue';
 74 | export default {
 75 |   name: 'TaskListHeader',
 76 |   components: {
 77 |     TaskListExpander
 78 |   },
 79 | 
 80 |   inject: ['root'],
 81 | 
 82 |   data() {
 83 |     return {
 84 |       resizer: {
 85 |         moving: false,
 86 |         x: 0
 87 |       }
 88 |     };
 89 |   },
 90 | 
 91 |   computed: {
 92 |     /**
 93 |      * Is this row collapsible?
 94 |      *
 95 |      * @returns {bool}
 96 |      */
 97 |     collapsible() {
 98 |       return this.root.state.tasks.filter(task => task.allChildren.length > 0);
 99 |     }
100 |   },
101 | 
102 |   methods: {
103 |     /**
104 |      * Get style
105 |      *
106 |      * @returns {object}
107 |      */
108 |     getStyle(column) {
109 |       return {
110 |         width: column.finalWidth + 'px'
111 |       };
112 |     },
113 |     /**
114 |      * Resizer mouse down event handler
115 |      */
116 |     resizerMouseDown(event, column) {
117 |       if (!this.resizer.moving) {
118 |         this.resizer.moving = column;
119 |         this.resizer.x = event.clientX;
120 |         this.resizer.initialWidth = column.width;
121 |         this.root.$emit('taskList-column-width-change-start', this.resizer.moving);
122 |       }
123 |     },
124 | 
125 |     /**
126 |      * Resizer mouse move event handler
127 |      */
128 |     resizerMouseMove(event) {
129 |       if (this.resizer.moving) {
130 |         const lastWidth = this.resizer.moving.width;
131 |         this.resizer.moving.width = this.resizer.initialWidth + event.clientX - this.resizer.x;
132 |         if (this.resizer.moving.width < this.root.state.options.taskList.minWidth) {
133 |           this.resizer.moving.width = this.root.state.options.taskList.minWidth;
134 |         }
135 |         if (lastWidth !== this.resizer.moving.width) {
136 |           this.root.$emit('taskList-column-width-change', this.resizer.moving);
137 |         }
138 |       }
139 |     },
140 | 
141 |     /**
142 |      * Resizer mouse up event handler
143 |      */
144 |     resizerMouseUp(event) {
145 |       if (this.resizer.moving) {
146 |         this.root.$emit('taskList-column-width-change-stop', this.resizer.moving);
147 |         this.resizer.moving = false;
148 |       }
149 |     }
150 |   },
151 | 
152 |   /**
153 |    * Created
154 |    */
155 |   created() {
156 |     this.mouseUpListener = document.addEventListener('mouseup', this.resizerMouseUp.bind(this));
157 |     this.mouseMoveListener = document.addEventListener('mousemove', this.resizerMouseMove.bind(this));
158 |     this.root.$on('main-view-mousemove', this.resizerMouseMove);
159 |     this.root.$on('main-view-mouseup', this.resizerMouseUp);
160 |   },
161 | 
162 |   /**
163 |    * Before destroy event - clear all event listeners
164 |    */
165 |   beforeDestroy() {
166 |     document.removeEventListener('mouseup', this.resizerMouseUp);
167 |     document.removeEventListener('mousemove', this.resizerMouseMove);
168 |   }
169 | };
170 | </script>
171 | 


--------------------------------------------------------------------------------
/src/components/TaskList/TaskListItem.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /**
 3 |  * @fileoverview TaskListItem component
 4 |  * @license MIT
 5 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
 6 |  * @package GanttElastic
 7 |  */
 8 | -->
 9 | <template>
10 |   <div class="gantt-elastic__task-list-item" :style="{ ...root.style['task-list-item'] }">
11 |     <item-column v-for="column in columns" :key="column._id" :column="column" :task="task">
12 |       <task-list-expander
13 |         v-if="column.expander"
14 |         :tasks="[task]"
15 |         :options="root.state.options.taskList.expander"
16 |         type="taskList"
17 |       ></task-list-expander>
18 |     </item-column>
19 |   </div>
20 | </template>
21 | <script>
22 | import TaskListExpander from '../Expander.vue';
23 | import ItemColumn from './ItemColumn.vue';
24 | 
25 | export default {
26 |   name: 'TaskListItem',
27 |   components: {
28 |     TaskListExpander,
29 |     ItemColumn
30 |   },
31 |   inject: ['root'],
32 |   props: ['task'],
33 |   data() {
34 |     return {};
35 |   },
36 |   computed: {
37 |     columns() {
38 |       return this.root.state.options.taskList.columns;
39 |     }
40 |   }
41 | };
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/style.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @fileoverview Styles for gantt-elastic
  3 |  * @license MIT
  4 |  * @author Rafal Pospiech <neuronet.io@gmail.com>
  5 |  * @package GanttElastic
  6 |  */
  7 | 
  8 | export default function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
  9 |   return {
 10 |     fontSize,
 11 |     fontFamily,
 12 |     'main-view': {
 13 |       background: '#FFFFFF'
 14 |     },
 15 |     'main-container-wrapper': {
 16 |       overflow: 'hidden',
 17 |       'border-top': '1px solid #eee',
 18 |       'border-bottom': '1px solid #eee'
 19 |     },
 20 |     'main-container': {
 21 |       float: 'left',
 22 |       'max-width': '100%'
 23 |     },
 24 |     'main-view-container': {},
 25 |     container: {
 26 |       display: 'flex',
 27 |       'max-width': '100%',
 28 |       height: '100%'
 29 |     },
 30 |     'calendar-wrapper': {
 31 |       'user-select': 'none'
 32 |     },
 33 |     calendar: {
 34 |       width: '100%',
 35 |       background: '#f3f5f7',
 36 |       display: 'block'
 37 |     },
 38 |     'calendar-row': {
 39 |       display: 'flex',
 40 |       'justify-content': 'space-evenly'
 41 |     },
 42 |     'calendar-row--month': {},
 43 |     'calendar-row--day': {},
 44 |     'calendar-row--hour': {
 45 |       'border-bottom': '1px solid #eee'
 46 |     },
 47 |     'calendar-row-rect': {
 48 |       background: 'transparent',
 49 |       display: 'flex'
 50 |     },
 51 |     'calendar-row-rect--month': {},
 52 |     'calendar-row-rect--day': {},
 53 |     'calendar-row-rect--hour': {},
 54 |     'calendar-row-rect-child': {
 55 |       display: 'block',
 56 |       'border-right-width': '1px', // Calendar
 57 |       'border-right-color': '#dadada',
 58 |       'border-right-style': 'solid',
 59 |       position: 'relative'
 60 |     },
 61 |     'calendar-row-rect-child--month': {},
 62 |     'calendar-row-rect-child--day': { 'text-align': 'center' },
 63 |     'calendar-row-rect-child--hour': { 'text-align': 'center' },
 64 |     'calendar-row-text': {
 65 |       'font-family': fontFamily, // GanttElastic
 66 |       'font-size': fontSize, //GanttElastic
 67 |       color: '#606060',
 68 |       display: 'inline-block',
 69 |       position: 'relative'
 70 |     },
 71 |     'calendar-row-text--month': {},
 72 |     'calendar-row-text--day': {},
 73 |     'calendar-row-text--hour': {},
 74 |     'task-list-wrapper': {},
 75 |     'task-list': { background: 'transparent', 'border-color': '#eee' },
 76 |     'task-list-header': {
 77 |       display: 'flex',
 78 |       'user-select': 'none',
 79 |       'vertical-align': 'middle',
 80 |       'border-bottom': '1px solid #eee',
 81 |       'border-left': '1px solid #eee'
 82 |     },
 83 |     'task-list-header-column': {
 84 |       'border-left': '1px solid #00000050',
 85 |       'box-sizing': 'border-box',
 86 |       display: 'flex',
 87 |       background: '#f3f5f7',
 88 |       'border-color': 'transparent'
 89 |     },
 90 |     'task-list-expander-wrapper': {
 91 |       display: 'inline-flex',
 92 |       'flex-shrink': '0',
 93 |       'box-sizing': 'border-box',
 94 |       margin: '0 0 0 10px'
 95 |     },
 96 |     'task-list-expander-content': {
 97 |       display: 'inline-flex',
 98 |       cursor: 'pointer',
 99 |       margin: 'auto 0px',
100 |       'box-sizing': 'border-box',
101 |       'user-select': 'none'
102 |     },
103 |     'task-list-expander-line': {
104 |       fill: 'transparent',
105 |       stroke: '#000000',
106 |       'stroke-width': '1',
107 |       'stroke-linecap': 'round'
108 |     },
109 |     'task-list-expander-border': {
110 |       fill: '#ffffffa0',
111 |       stroke: '#000000A0'
112 |     },
113 |     'chart-expander-wrapper': {
114 |       display: 'block',
115 |       'line-height': '1',
116 |       'box-sizing': 'border-box',
117 |       margin: '0'
118 |     },
119 |     'chart-expander-content': {
120 |       display: 'inline-flex',
121 |       cursor: 'pointer',
122 |       margin: 'auto 0px',
123 |       'box-sizing': 'border-box',
124 |       'user-select': 'none'
125 |     },
126 |     'chart-expander-line': {
127 |       fill: 'transparent',
128 |       stroke: '#000000',
129 |       'stroke-width': '1',
130 |       'stroke-linecap': 'round'
131 |     },
132 |     'chart-expander-border': {
133 |       fill: '#ffffffa0',
134 |       stroke: '#000000A0'
135 |     },
136 |     'task-list-container': {},
137 |     'task-list-header-label': {
138 |       overflow: 'hidden',
139 |       'text-overflow': 'ellipsis',
140 |       'font-family': fontFamily,
141 |       'font-size': fontSize,
142 |       'box-sizing': 'border-box',
143 |       margin: 'auto 6px',
144 |       'flex-grow': '1',
145 |       'vertical-align': 'middle'
146 |     },
147 |     'task-list-header-resizer-wrapper': {
148 |       background: 'transparent',
149 |       height: '100%',
150 |       width: '6px',
151 |       cursor: 'col-resize',
152 |       display: 'inline-flex',
153 |       'vertical-align': 'center'
154 |     },
155 |     'task-list-header-resizer': { margin: 'auto 0px' },
156 |     'task-list-header-resizer-dot': {
157 |       width: '3px',
158 |       height: '3px',
159 |       background: '#ddd',
160 |       'border-radius': '100%',
161 |       margin: '4px 0px'
162 |     },
163 |     'task-list-items': {
164 |       overflow: 'hidden'
165 |     },
166 |     'task-list-item': {
167 |       'border-top': '1px solid #eee',
168 |       'border-right': '1px solid #eee',
169 |       'box-sizing': 'border-box',
170 |       display: 'flex',
171 |       background: 'transparent'
172 |     },
173 |     'task-list-item-column': {
174 |       display: 'inline-flex',
175 |       'flex-shrink': '0',
176 |       'border-left': '1px solid #00000050',
177 |       'box-sizing': 'border-box',
178 |       'border-color': '#eee'
179 |     },
180 |     'task-list-item-value-wrapper': {
181 |       overflow: 'hidden',
182 |       display: 'flex',
183 |       width: '100%'
184 |     },
185 |     'task-list-item-value-container': {
186 |       margin: 'auto 0px',
187 |       overflow: 'hidden'
188 |     },
189 |     'task-list-item-value': {
190 |       display: 'block',
191 |       'flex-shrink': '100',
192 |       'font-family': fontFamily,
193 |       'font-size': fontSize,
194 |       'margin-top': 'auto',
195 |       'margin-bottom': 'auto',
196 |       'margin-left': '6px', // TaskList
197 |       'margin-right': '6px',
198 |       overflow: 'hidden',
199 |       'text-overflow': 'ellipsis',
200 |       'line-height': '1.5em',
201 |       'word-break': 'keep-all',
202 |       'white-space': 'nowrap',
203 |       color: '#606060',
204 |       background: '#FFFFFF'
205 |     },
206 |     'grid-lines': {},
207 |     'grid-line-horizontal': {
208 |       stroke: '#00000010',
209 |       'stroke-width': 1
210 |     },
211 |     'grid-line-vertical': {
212 |       stroke: '#00000010',
213 |       'stroke-width': 1
214 |     },
215 |     'grid-line-time': {
216 |       stroke: '#FF000080',
217 |       'stroke-width': 1
218 |     },
219 |     chart: {
220 |       'user-select': 'none',
221 |       overflow: 'hidden'
222 |     },
223 |     'chart-calendar-container': {
224 |       'user-select': 'none',
225 |       overflow: 'hidden',
226 |       'max-width': '100%',
227 |       'border-right': '1px solid #eee'
228 |     },
229 |     'chart-graph-container': {
230 |       'user-select': 'none',
231 |       overflow: 'hidden',
232 |       'max-width': '100%',
233 |       'border-right': '1px solid #eee'
234 |     },
235 |     'chart-area': {},
236 |     'chart-graph': {
237 |       overflow: 'hidden'
238 |     },
239 |     'chart-row-text-wrapper': {},
240 |     'chart-row-text': {
241 |       background: '#ffffffa0',
242 |       'border-radius': '10px',
243 |       'font-family': fontFamily,
244 |       'font-size': fontSize,
245 |       'font-weight': 'normal',
246 |       color: '#000000a0',
247 |       height: '100%',
248 |       display: 'inline-block'
249 |     },
250 |     'chart-row-text-content': {
251 |       padding: '0px 6px'
252 |     },
253 |     'chart-row-text-content--text': {},
254 |     'chart-row-text-content--html': {},
255 |     'chart-row-wrapper': {},
256 |     'chart-row-bar-wrapper': {},
257 |     'chart-row-bar': {},
258 |     'chart-row-bar-polygon': {
259 |       stroke: '#E74C3C',
260 |       'stroke-width': 1,
261 |       fill: '#F75C4C'
262 |     },
263 |     'chart-row-project-wrapper': {},
264 |     'chart-row-project': {},
265 |     'chart-row-project-polygon': {},
266 |     'chart-row-milestone-wrapper': {},
267 |     'chart-row-milestone': {},
268 |     'chart-row-milestone-polygon': {},
269 |     'chart-row-task-wrapper': {},
270 |     'chart-row-task': {},
271 |     'chart-row-task-polygon': {},
272 |     'chart-row-progress-bar-wrapper': {},
273 |     'chart-row-progress-bar': {},
274 |     'chart-row-progress-bar-line': {
275 |       stroke: '#ffffff25',
276 |       'stroke-width': 20
277 |     },
278 |     'chart-row-progress-bar-solid': {
279 |       fill: '#0EAC51',
280 |       height: '20%'
281 |     },
282 |     'chart-row-progress-bar-pattern': {
283 |       fill: 'url(#diagonalHatch)',
284 |       transform: 'translateY(0.1) scaleY(0.8)'
285 |     },
286 |     'chart-row-progress-bar-outline': {
287 |       stroke: '#E74C3C',
288 |       'stroke-width': 1
289 |     },
290 |     'chart-dependency-lines-wrapper': {},
291 |     'chart-dependency-lines-path': {
292 |       fill: 'transparent',
293 |       stroke: '#FFa00090',
294 |       'stroke-width': 2
295 |     },
296 |     'chart-scroll-container': {},
297 |     'chart-scroll-container--horizontal': {
298 |       overflow: 'auto',
299 |       'max-width': '100%'
300 |     },
301 |     'chart-scroll-container--vertical': {
302 |       'overflow-y': 'auto',
303 |       'overflow-x': 'hidden',
304 |       'max-height': '100%',
305 |       float: 'right'
306 |     },
307 |     'chart-days-highlight-rect': {
308 |       fill: '#f3f5f780'
309 |     },
310 |     'slot-header-beforeOptions': {
311 |       display: 'inline-block'
312 |     }
313 |   };
314 | }
315 | 


--------------------------------------------------------------------------------
/tests/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: false,
 3 |   env: {
 4 |     node: true,
 5 |     'cypress/globals': true,
 6 |     jest: true
 7 |   },
 8 |   extends: ['plugin:vue/essential', 'plugin:prettier/recommended', '@vue/prettier', 'plugin:cypress/recommended'],
 9 |   rules: {
10 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
11 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
12 |   },
13 |   parserOptions: {
14 |     parser: 'babel-eslint'
15 |   },
16 |   plugins: ['cypress'],
17 |   globals: {
18 |     page: true,
19 |     browser: true,
20 |     context: true,
21 |     jestPuppeteer: true
22 |   }
23 | };
24 | 


--------------------------------------------------------------------------------
/tests/assets/standalone.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html charset="utf-8">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  6 |     <title>Gangtt-elastic demo</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" crossorigin="anonymous"></script>
  8 |     <script src="https://cdn.jsdelivr.net/npm/dayjs" crossorigin="anonymous"></script>
  9 |     <script src="/dist/bundle.js"></script>
 10 |     <script src="https://unpkg.com/gantt-elastic-header@0.1.11/dist/Header.umd.js" crossorigin="anonymous"></script>
 11 |   </head>
 12 | 
 13 |   <body>
 14 |     <div id="gantt" style="width:100%;height:100%;"></div>
 15 |     <button id="btn-add" onclick="addTask()">Add task</button>
 16 |     <button id="btn-reset" onclick="addTasks()">Add tasks</button><br />
 17 |     <button id="btn-destroy" onclick="destroy()">Destroy</button><br />
 18 |     <button id="btn-options" onclick="changeOptions()">Change options</button>
 19 |     <script>
 20 |       // just helper to get current dates
 21 |       function getDate(hours) {
 22 |         const currentDate = new Date();
 23 |         const currentYear = currentDate.getFullYear();
 24 |         const currentMonth = currentDate.getMonth() + 1;
 25 |         const currentDay = currentDate.getDate();
 26 |         const timeStamp = new Date(`${currentYear}-${currentMonth}-${currentDay} 00:00:00`).getTime();
 27 |         return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
 28 |       }
 29 | 
 30 |       let tasks = [
 31 |         {
 32 |           id: 1,
 33 |           label: 'Make some noise',
 34 |           user:
 35 |             '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
 36 |           start: getDate(-24 * 5),
 37 |           duration: 15 * 24 * 60 * 60 * 1000,
 38 |           percent: 85,
 39 |           type: 'project'
 40 |           //collapsed: true,
 41 |         },
 42 |         {
 43 |           id: 2,
 44 |           label: 'With great power comes great responsibility',
 45 |           user:
 46 |             '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
 47 |           parentId: 1,
 48 |           start: getDate(-24 * 4),
 49 |           duration: 4 * 24 * 60 * 60 * 1000,
 50 |           percent: 50,
 51 |           type: 'milestone',
 52 |           collapsed: true,
 53 |           style: {
 54 |             base: {
 55 |               fill: '#1EBC61',
 56 |               stroke: '#0EAC51'
 57 |             }
 58 |             /*'tree-row-bar': {
 59 |               fill: '#1EBC61',
 60 |               stroke: '#0EAC51'
 61 |             },
 62 |             'tree-row-bar-polygon': {
 63 |               stroke: '#0EAC51'
 64 |             }*/
 65 |           }
 66 |         },
 67 |         {
 68 |           id: 3,
 69 |           label: 'Courage is being scared to death, but saddling up anyway.',
 70 |           user:
 71 |             '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
 72 |           parentId: 2,
 73 |           start: getDate(-24 * 3),
 74 |           duration: 2 * 24 * 60 * 60 * 1000,
 75 |           percent: 100,
 76 |           type: 'task'
 77 |         },
 78 |         {
 79 |           id: 4,
 80 |           label: 'Put that toy AWAY!',
 81 |           user:
 82 |             '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
 83 |           start: getDate(-24 * 2),
 84 |           duration: 2 * 24 * 60 * 60 * 1000,
 85 |           percent: 50,
 86 |           type: 'task',
 87 |           dependentOn: [3]
 88 |         },
 89 |         {
 90 |           id: 5,
 91 |           label: 'One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.',
 92 |           user:
 93 |             '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
 94 |           parentId: 4,
 95 |           start: getDate(0),
 96 |           duration: 2 * 24 * 60 * 60 * 1000,
 97 |           percent: 10,
 98 |           type: 'milestone',
 99 |           style: {
100 |             base: {
101 |               fill: '#0287D0',
102 |               stroke: '#0077C0'
103 |             }
104 |           }
105 |         },
106 |         {
107 |           id: 6,
108 |           label: 'Butch Mario and the Luigi Kid',
109 |           user:
110 |             '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
111 |           parentId: 5,
112 |           start: getDate(24),
113 |           duration: 1 * 24 * 60 * 60 * 1000,
114 |           percent: 50,
115 |           type: 'task',
116 |           collapsed: true,
117 |           style: {
118 |             base: {
119 |               fill: '#8E44AD',
120 |               stroke: '#7E349D'
121 |             }
122 |           }
123 |         },
124 |         {
125 |           id: 7,
126 |           label: 'Devon, the old man wanted me, it was his dying request',
127 |           user:
128 |             '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
129 |           parentId: 2,
130 |           dependentOn: [6],
131 |           start: getDate(24 * 2),
132 |           duration: 4 * 60 * 60 * 1000,
133 |           percent: 20,
134 |           type: 'task',
135 |           collapsed: true
136 |         },
137 |         {
138 |           id: 8,
139 |           label: 'Hey, Baby! Anybody ever tell you I have beautiful eyes?',
140 |           user:
141 |             '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
142 |           parentId: 7,
143 |           dependentOn: [7],
144 |           start: getDate(24 * 3),
145 |           duration: 1 * 24 * 60 * 60 * 1000,
146 |           percent: 0,
147 |           type: 'task'
148 |         },
149 |         {
150 |           id: 9,
151 |           label: 'This better be important, woman. You are interrupting my very delicate calculations.',
152 |           user:
153 |             '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
154 |           parentId: 8,
155 |           dependentOn: [8, 7],
156 |           start: getDate(24 * 4),
157 |           duration: 4 * 60 * 60 * 1000,
158 |           percent: 20,
159 |           type: 'task',
160 |           style: {
161 |             base: {
162 |               fill: '#8E44AD',
163 |               stroke: '#7E349D'
164 |             }
165 |             /*'tree-row-bar-polygon': {
166 |               stroke: '#7E349D'
167 |             },
168 |             'tree-row-bar': {
169 |               fill: '#8E44AD',
170 |               stroke: '#7E349D'
171 |             }*/
172 |           }
173 |         },
174 |         {
175 |           id: 10,
176 |           label: 'current task',
177 |           user:
178 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
179 |           start: getDate(24 * 5),
180 |           duration: 24 * 60 * 60 * 1000,
181 |           percent: 0,
182 |           type: 'task'
183 |         },
184 |         {
185 |           id: 11,
186 |           label: 'test task',
187 |           user:
188 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
189 |           start: getDate(24 * 6),
190 |           duration: 24 * 60 * 60 * 1000,
191 |           percent: 0,
192 |           type: 'task'
193 |         },
194 |         {
195 |           id: 12,
196 |           label: 'test task',
197 |           user:
198 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
199 |           start: getDate(24 * 7),
200 |           duration: 24 * 60 * 60 * 1000,
201 |           percent: 0,
202 |           type: 'task',
203 |           parentId: 11
204 |         },
205 |         {
206 |           id: 13,
207 |           label: 'test task',
208 |           user:
209 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
210 |           start: getDate(24 * 8),
211 |           duration: 24 * 60 * 60 * 1000,
212 |           percent: 0,
213 |           type: 'task'
214 |         },
215 |         {
216 |           id: 14,
217 |           label: 'test task',
218 |           user:
219 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
220 |           start: getDate(24 * 9),
221 |           duration: 24 * 60 * 60 * 1000,
222 |           percent: 0,
223 |           type: 'task'
224 |         },
225 |         {
226 |           id: 15,
227 |           label: 'test task',
228 |           user:
229 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
230 |           start: getDate(24 * 16),
231 |           duration: 24 * 60 * 60 * 1000,
232 |           percent: 0,
233 |           type: 'task'
234 |         }
235 |       ];
236 | 
237 |       let options = {
238 |         taskMapping: {
239 |           progress: 'percent'
240 |         },
241 |         maxRows: 100,
242 |         maxHeight: 300,
243 |         row: {
244 |           height: 24
245 |         },
246 |         calendar: {
247 |           hour: {
248 |             display: false
249 |           }
250 |         },
251 |         chart: {
252 |           progress: {
253 |             bar: false
254 |           },
255 |           expander: {
256 |             display: true
257 |           }
258 |         },
259 |         taskList: {
260 |           expander: {
261 |             straight: false
262 |           },
263 |           columns: [
264 |             {
265 |               id: 1,
266 |               label: 'ID',
267 |               value: 'id',
268 |               width: 40
269 |             },
270 |             {
271 |               id: 2,
272 |               label: 'Description',
273 |               value: 'label',
274 |               width: 200,
275 |               expander: true,
276 |               html: true,
277 |               events: {
278 |                 click({ data, column }) {
279 |                   alert('description clicked!\n' + data.label);
280 |                 }
281 |               }
282 |             },
283 |             {
284 |               id: 3,
285 |               label: 'Assigned to',
286 |               value: 'user',
287 |               width: 130,
288 |               html: true
289 |             },
290 |             {
291 |               id: 3,
292 |               label: 'Start',
293 |               value: task => dayjs(task.start).format('YYYY-MM-DD'),
294 |               width: 78
295 |             },
296 |             {
297 |               id: 4,
298 |               label: 'Type',
299 |               value: 'type',
300 |               width: 68
301 |             },
302 |             {
303 |               id: 5,
304 |               label: '%',
305 |               value: 'progress',
306 |               width: 35,
307 |               style: {
308 |                 'task-list-header-label': {
309 |                   'text-align': 'center',
310 |                   width: '100%'
311 |                 },
312 |                 'task-list-item-value-container': {
313 |                   'text-align': 'center',
314 |                   width: '100%'
315 |                 }
316 |               }
317 |             }
318 |           ]
319 |         }
320 |       };
321 | 
322 |       const app = (window.app = GanttElastic.mount({
323 |         el: '#gantt',
324 |         data: {
325 |           components: {
326 |             header: Header
327 |           },
328 |           tasks: tasks,
329 |           options: options,
330 |           dynamicStyle: {}
331 |         },
332 |         ready(ganttInstance) {
333 |           console.log('ready!', ganttInstance);
334 |           window.ganttInstance = ganttInstance;
335 |           ganttInstance.$on('tasks-changed', tasks => {
336 |             app.tasks = tasks;
337 |           });
338 |           ganttInstance.$on('options-changed', options => {
339 |             console.log('options changed');
340 |             app.options = options;
341 |           });
342 |           ganttInstance.$on('dynamic-style-changed', style => {
343 |             app.dynamicStyle = style;
344 |           });
345 | 
346 |           ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {
347 |             console.log('task mouse enter', { data, event });
348 |           });
349 |           ganttInstance.$on('updated', () => {
350 |             //console.log('gantt view was updated');
351 |           });
352 |           ganttInstance.$on('destroyed', () => {
353 |             //console.log('gantt was destroyed');
354 |           });
355 |           ganttInstance.$on('times-timeZoom-updated', () => {
356 |             console.log('time zoom changed');
357 |           });
358 |           ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {
359 |             console.log('task list clicked! (task)', { data, column });
360 |           });
361 |         }
362 |       }));
363 | 
364 |       console.log('gantt', document.getElementById('gantt'));
365 | 
366 |       function update() {
367 |         const row = document.getElementById('row').value;
368 |         const name = document.getElementById('name').value;
369 |         const value = document.getElementById('value').value;
370 |         app.tasks[row][name] = value;
371 |       }
372 | 
373 |       function deleteRow() {
374 |         const row = Number(document.getElementById('delrow').value);
375 |         app.tasks = ganttState.tasks.filter((task, index) => {
376 |           if (index === row) {
377 |             console.log('removing task', task, index);
378 |           }
379 |           return index !== row;
380 |         });
381 |       }
382 | 
383 |       function progressChange() {
384 |         const row = Number(document.getElementById('progRow').value);
385 |         const percent = Number(document.getElementById('progress').value);
386 |         app.tasks[row].progress = percent;
387 |       }
388 | 
389 |       function addTask() {
390 |         const task = {
391 |           id: 88,
392 |           label:
393 |             '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
394 |           user:
395 |             '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Awesome!</a>',
396 |           parentId: 7,
397 |           dependentOn: [7],
398 |           start: getDate(24 * 3),
399 |           duration: 1 * 24 * 60 * 60 * 1000,
400 |           percent: 50,
401 |           type: 'project'
402 |         };
403 |         app.tasks.push(task);
404 |         console.log(app.tasks);
405 |         console.log(app);
406 |       }
407 | 
408 |       function addTasks() {
409 |         const newTasks = tasks.map(task => Object.assign({}, task));
410 |         app.tasks = newTasks;
411 |       }
412 | 
413 |       function changeOptions() {
414 |         app.options.taskList.columns[0].label = 'Whooaa!';
415 |         app.options.taskList.columns[0].width = 100;
416 |         app.options.taskList.columns[0].style = {
417 |           'task-list-header-column': {
418 |             background: 'red',
419 |             color: 'white'
420 |           }
421 |         };
422 |         Vue.set(app.options.calendar, 'month', {
423 |           format: {
424 |             long: function() {
425 |               return ':P';
426 |             }
427 |           }
428 |         });
429 |         Vue.set(app.options, 'times', { timeZoom: 2 });
430 |         app.options.locale['Now'] = 'Center';
431 |         ganttInstance.fixScrollPos();
432 |       }
433 | 
434 |       function destroy() {
435 |         app.destroy = true;
436 |       }
437 |     </script>
438 |   </body>
439 | </html>
440 | 


--------------------------------------------------------------------------------
/tests/assets/umd.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html charset="utf-8">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  6 |     <title>GanttElastic editor demo</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" crossorigin="anonymous"></script>
  8 |     <script src="https://cdn.jsdelivr.net/npm/dayjs" crossorigin="anonymous"></script>
  9 |     <script src="/dist/GanttElastic.umd.js"></script>
 10 |     <script src="https://unpkg.com/gantt-elastic-header@0.1.11/dist/Header.umd.js" crossorigin="anonymous"></script>
 11 |   </head>
 12 | 
 13 |   <body>
 14 |     <div style="width:100%;height:100%">
 15 |       <div id="app" v-if="!destroy">
 16 |         <gantt-elastic :tasks="tasks" :options="options">
 17 |           <gantt-header slot="header"></gantt-header>
 18 |           <gantt-footer slot="footer"></gantt-footer>
 19 |         </gantt-elastic>
 20 |       </div>
 21 |     </div>
 22 | 
 23 |     modify task<br />
 24 |     <input type="number" value="0" id="row" placeholder="which row?" />
 25 |     <input type="text" id="name" placeholder="name" value="label" />
 26 |     <input type="text" id="value" value="test" placeholder="value" onkeyup="update()" />
 27 |     <br />
 28 |     <input type="number" value="0" id="delrow" placeholder="which row?" />
 29 |     <button onclick="deleteRow()">Delete</button>
 30 |     <br />
 31 |     <input type="number" id="progRow" value="0" /><input
 32 |       type="range"
 33 |       min="0"
 34 |       max="100"
 35 |       oninput="progressChange()"
 36 |       id="progress"
 37 |     />
 38 |     <br />
 39 |     <button id="btn-add" onclick="addTask()">Add task</button>
 40 |     <button id="btn-reset" onclick="addTasks()">Add tasks</button><br />
 41 |     <button id="btn-destroy" onclick="destroy()">Destroy</button><br />
 42 |     <button id="btn-options" onclick="changeOptions()">Change options</button>
 43 |     <script>
 44 |       // just helper to get current dates
 45 |       function getDate(hours) {
 46 |         const currentDate = new Date();
 47 |         const currentYear = currentDate.getFullYear();
 48 |         const currentMonth = currentDate.getMonth() + 1;
 49 |         const currentDay = currentDate.getDate();
 50 |         const timeStamp = new Date(`${currentYear}-${currentMonth}-${currentDay} 00:00:00`).getTime();
 51 |         return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
 52 |       }
 53 | 
 54 |       let tasks = [
 55 |         {
 56 |           id: 1,
 57 |           label: 'Make some noise',
 58 |           user:
 59 |             '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
 60 |           start: getDate(-24 * 5),
 61 |           duration: 15 * 24 * 60 * 60 * 1000,
 62 |           percent: 85,
 63 |           type: 'project'
 64 |           //collapsed: true,
 65 |         },
 66 |         {
 67 |           id: 2,
 68 |           label: 'With great power comes great responsibility',
 69 |           user:
 70 |             '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
 71 |           parentId: 1,
 72 |           start: getDate(-24 * 4),
 73 |           duration: 4 * 24 * 60 * 60 * 1000,
 74 |           percent: 50,
 75 |           type: 'milestone',
 76 |           collapsed: true,
 77 |           style: {
 78 |             base: {
 79 |               fill: '#1EBC61',
 80 |               stroke: '#0EAC51'
 81 |             }
 82 |             /*'tree-row-bar': {
 83 |               fill: '#1EBC61',
 84 |               stroke: '#0EAC51'
 85 |             },
 86 |             'tree-row-bar-polygon': {
 87 |               stroke: '#0EAC51'
 88 |             }*/
 89 |           }
 90 |         },
 91 |         {
 92 |           id: 3,
 93 |           label: 'Courage is being scared to death, but saddling up anyway.',
 94 |           user:
 95 |             '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
 96 |           parentId: 2,
 97 |           start: getDate(-24 * 3),
 98 |           duration: 2 * 24 * 60 * 60 * 1000,
 99 |           percent: 100,
100 |           type: 'task'
101 |         },
102 |         {
103 |           id: 4,
104 |           label: 'Put that toy AWAY!',
105 |           user:
106 |             '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
107 |           start: getDate(-24 * 2),
108 |           duration: 2 * 24 * 60 * 60 * 1000,
109 |           percent: 50,
110 |           type: 'task',
111 |           dependentOn: [3]
112 |         },
113 |         {
114 |           id: 5,
115 |           label: 'One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.',
116 |           user:
117 |             '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
118 |           parentId: 4,
119 |           start: getDate(0),
120 |           duration: 2 * 24 * 60 * 60 * 1000,
121 |           percent: 10,
122 |           type: 'milestone',
123 |           style: {
124 |             base: {
125 |               fill: '#0287D0',
126 |               stroke: '#0077C0'
127 |             }
128 |           }
129 |         },
130 |         {
131 |           id: 6,
132 |           label: 'Butch Mario and the Luigi Kid',
133 |           user:
134 |             '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
135 |           parentId: 5,
136 |           start: getDate(24),
137 |           duration: 1 * 24 * 60 * 60 * 1000,
138 |           percent: 50,
139 |           type: 'task',
140 |           collapsed: true,
141 |           style: {
142 |             base: {
143 |               fill: '#8E44AD',
144 |               stroke: '#7E349D'
145 |             }
146 |           }
147 |         },
148 |         {
149 |           id: 7,
150 |           label: 'Devon, the old man wanted me, it was his dying request',
151 |           user:
152 |             '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
153 |           parentId: 2,
154 |           dependentOn: [6],
155 |           start: getDate(24 * 2),
156 |           duration: 4 * 60 * 60 * 1000,
157 |           percent: 20,
158 |           type: 'task',
159 |           collapsed: true
160 |         },
161 |         {
162 |           id: 8,
163 |           label: 'Hey, Baby! Anybody ever tell you I have beautiful eyes?',
164 |           user:
165 |             '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
166 |           parentId: 7,
167 |           dependentOn: [7],
168 |           start: getDate(24 * 3),
169 |           duration: 1 * 24 * 60 * 60 * 1000,
170 |           percent: 0,
171 |           type: 'task'
172 |         },
173 |         {
174 |           id: 9,
175 |           label: 'This better be important, woman. You are interrupting my very delicate calculations.',
176 |           user:
177 |             '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
178 |           parentId: 8,
179 |           dependentOn: [8, 7],
180 |           start: getDate(24 * 4),
181 |           duration: 4 * 60 * 60 * 1000,
182 |           percent: 20,
183 |           type: 'task',
184 |           style: {
185 |             base: {
186 |               fill: '#8E44AD',
187 |               stroke: '#7E349D'
188 |             }
189 |             /*'tree-row-bar-polygon': {
190 |               stroke: '#7E349D'
191 |             },
192 |             'tree-row-bar': {
193 |               fill: '#8E44AD',
194 |               stroke: '#7E349D'
195 |             }*/
196 |           }
197 |         },
198 |         {
199 |           id: 10,
200 |           label: 'current task',
201 |           user:
202 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
203 |           start: getDate(24 * 5),
204 |           duration: 24 * 60 * 60 * 1000,
205 |           percent: 0,
206 |           type: 'task'
207 |         },
208 |         {
209 |           id: 11,
210 |           label: 'test task',
211 |           user:
212 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
213 |           start: getDate(24 * 6),
214 |           duration: 24 * 60 * 60 * 1000,
215 |           percent: 0,
216 |           type: 'task'
217 |         },
218 |         {
219 |           id: 12,
220 |           label: 'test task',
221 |           user:
222 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
223 |           start: getDate(24 * 7),
224 |           duration: 24 * 60 * 60 * 1000,
225 |           percent: 0,
226 |           type: 'task',
227 |           parentId: 11
228 |         },
229 |         {
230 |           id: 13,
231 |           label: 'test task',
232 |           user:
233 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
234 |           start: getDate(24 * 8),
235 |           duration: 24 * 60 * 60 * 1000,
236 |           percent: 0,
237 |           type: 'task'
238 |         },
239 |         {
240 |           id: 14,
241 |           label: 'test task',
242 |           user:
243 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
244 |           start: getDate(24 * 9),
245 |           duration: 24 * 60 * 60 * 1000,
246 |           percent: 0,
247 |           type: 'task'
248 |         },
249 |         {
250 |           id: 15,
251 |           label: 'test task',
252 |           user:
253 |             '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
254 |           start: getDate(24 * 16),
255 |           duration: 24 * 60 * 60 * 1000,
256 |           percent: 0,
257 |           type: 'task'
258 |         }
259 |       ];
260 | 
261 |       let options = {
262 |         taskMapping: {
263 |           progress: 'percent'
264 |         },
265 |         maxRows: 100,
266 |         maxHeight: 300,
267 |         title: {
268 |           label: 'Your project title as html (link or whatever...)',
269 |           html: false
270 |         },
271 |         row: {
272 |           height: 24
273 |         },
274 |         calendar: {
275 |           hour: {
276 |             display: false
277 |           }
278 |         },
279 |         chart: {
280 |           progress: {
281 |             bar: false
282 |           },
283 |           expander: {
284 |             display: true
285 |           }
286 |         },
287 |         taskList: {
288 |           expander: {
289 |             straight: false
290 |           },
291 |           columns: [
292 |             {
293 |               id: 1,
294 |               label: 'ID',
295 |               value: 'id',
296 |               width: 40
297 |             },
298 |             {
299 |               id: 2,
300 |               label: 'Description',
301 |               value: 'label',
302 |               width: 200,
303 |               expander: true,
304 |               html: true,
305 |               events: {
306 |                 click({ data, column }) {
307 |                   alert('description clicked!\n' + data.label);
308 |                 }
309 |               }
310 |             },
311 |             {
312 |               id: 3,
313 |               label: 'Assigned to',
314 |               value: 'user',
315 |               width: 130,
316 |               html: true
317 |             },
318 |             {
319 |               id: 3,
320 |               label: 'Start',
321 |               value: task => dayjs(task.start).format('YYYY-MM-DD'),
322 |               width: 78
323 |             },
324 |             {
325 |               id: 4,
326 |               label: 'Type',
327 |               value: 'type',
328 |               width: 68
329 |             },
330 |             {
331 |               id: 5,
332 |               label: '%',
333 |               value: 'progress',
334 |               width: 35,
335 |               style: {
336 |                 'task-list-header-label': {
337 |                   'text-align': 'center',
338 |                   width: '100%'
339 |                 },
340 |                 'task-list-item-value-container': {
341 |                   'text-align': 'center',
342 |                   width: '100%'
343 |                 }
344 |               }
345 |             }
346 |           ]
347 |         }
348 |       };
349 | 
350 |       // create instance
351 |       const app = (window.app = new Vue({
352 |         components: {
353 |           'gantt-header': Header,
354 |           'gantt-elastic': GanttElastic,
355 |           'gantt-footer': {
356 |             template: `<span>this is a footer</span>`
357 |           }
358 |         },
359 |         data: {
360 |           tasks: tasks.map(task => Object.assign({}, task)),
361 |           options,
362 |           dynamicStyle: {},
363 |           destroy: false
364 |         }
365 |       }));
366 | 
367 |       // gantt state which will be updated in realtime
368 |       let ganttState, ganttInstance;
369 | 
370 |       // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event
371 |       // to get the gantt state for real time modification
372 |       app.$on('gantt-elastic-ready', ganttElasticInstance => {
373 |         ganttInstance = window.ganttInstance = ganttElasticInstance;
374 | 
375 |         ganttInstance.$on('tasks-changed', tasks => {
376 |           app.tasks = tasks;
377 |         });
378 |         ganttInstance.$on('options-changed', options => {
379 |           app.options = options;
380 |         });
381 |         ganttInstance.$on('dynamic-style-changed', style => {
382 |           app.dynamicStyle = style;
383 |         });
384 | 
385 |         ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {
386 |           console.log('task mouse enter', { data, event });
387 |         });
388 |         ganttInstance.$on('updated', () => {
389 |           //console.log('gantt view was updated');
390 |         });
391 |         ganttInstance.$on('destroyed', () => {
392 |           //console.log('gantt was destroyed');
393 |         });
394 |         ganttInstance.$on('times-timeZoom-updated', () => {
395 |           console.log('time zoom changed');
396 |         });
397 |         ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {
398 |           console.log('task list clicked! (task)', { data, column });
399 |         });
400 |       });
401 | 
402 |       // mount gantt to DOM
403 |       app.$mount('#app');
404 | 
405 |       function update() {
406 |         const row = document.getElementById('row').value;
407 |         const name = document.getElementById('name').value;
408 |         const value = document.getElementById('value').value;
409 |         app.tasks[row][name] = value;
410 |       }
411 | 
412 |       function deleteRow() {
413 |         const row = Number(document.getElementById('delrow').value);
414 |         app.tasks = ganttState.tasks.filter((task, index) => {
415 |           if (index === row) {
416 |             console.log('removing task', task, index);
417 |           }
418 |           return index !== row;
419 |         });
420 |       }
421 | 
422 |       function progressChange() {
423 |         const row = Number(document.getElementById('progRow').value);
424 |         const percent = Number(document.getElementById('progress').value);
425 |         app.tasks[row].progress = percent;
426 |       }
427 | 
428 |       function addTask() {
429 |         const task = {
430 |           id: 88,
431 |           label:
432 |             '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
433 |           user:
434 |             '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Awesome!</a>',
435 |           parentId: 7,
436 |           dependentOn: [7],
437 |           start: getDate(24 * 3),
438 |           duration: 1 * 24 * 60 * 60 * 1000,
439 |           percent: 50,
440 |           type: 'project'
441 |         };
442 |         app.tasks.push(task);
443 |         console.log(app.tasks);
444 |       }
445 | 
446 |       function addTasks() {
447 |         const newTasks = tasks.map(task => Object.assign({}, task));
448 |         app.tasks = newTasks;
449 |       }
450 | 
451 |       function changeOptions() {
452 |         app.options.taskList.columns[0].label = 'Whooaa!';
453 |         app.options.taskList.columns[0].width = 100;
454 |         app.options.taskList.columns[0].style = {
455 |           'task-list-header-column': {
456 |             background: 'red',
457 |             color: 'white'
458 |           }
459 |         };
460 |         Vue.set(app.options.calendar, 'month', {
461 |           format: {
462 |             long: function() {
463 |               return ':P';
464 |             }
465 |           }
466 |         });
467 |         Vue.set(app.options, 'times', { timeZoom: 2 });
468 |         app.options.locale['Now'] = 'Center';
469 |         ganttInstance.fixScrollPos();
470 |       }
471 | 
472 |       function destroy() {
473 |         app.destroy = true;
474 |       }
475 |     </script>
476 |   </body>
477 | </html>
478 | 


--------------------------------------------------------------------------------
/tests/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Using fixtures to represent data",
3 |   "email": "hello@cypress.io",
4 |   "body": "Fixtures are a great way to mock data for responses to routes"
5 | }


--------------------------------------------------------------------------------
/tests/integration/basic_spec.js:
--------------------------------------------------------------------------------
  1 | function expectIsMounted(url) {
  2 |   cy.viewport(1440, 900)
  3 |     .document()
  4 |     .then(doc => {
  5 |       doc.body.innerHtml = '';
  6 |     })
  7 |     .visit(url, { timeout: 10000 })
  8 |     .then(window => {
  9 |       expect(typeof window.GanttElastic).to.equal('object');
 10 |       expect(typeof window.app).to.equal('object');
 11 |     })
 12 |     .get('.gantt-elastic')
 13 |     .should('be.visible');
 14 | }
 15 | 
 16 | function expectTimeZoomChange(url) {
 17 |   cy.viewport(1440, 900)
 18 |     .document()
 19 |     .then(doc => {
 20 |       doc.body.innerHtml = '';
 21 |     })
 22 |     .visit(url, { timeout: 10000 })
 23 |     .then(window => {
 24 |       const timeZoomSelector = '.gantt-elastic__header-options > label:nth-child(2) .vue-slider-dot';
 25 |       const $timeZoom = Cypress.$(timeZoomSelector);
 26 |       const offset = $timeZoom.offset();
 27 |       cy.wrap($timeZoom).as('timeZoom');
 28 |       expect(typeof window.app).to.equal('object');
 29 |       expect(typeof window.app.$children).to.equal('object');
 30 |       const gantt = window.app.$children[0];
 31 |       expect(gantt.state.options.times.timeZoom).to.equal(17);
 32 |       cy.get('@timeZoom').should('be.visible');
 33 |       cy.get(timeZoomSelector)
 34 |         .trigger('mousedown', { which: 1 })
 35 |         .trigger('mousemove', {
 36 |           which: 1,
 37 |           pageX: offset.left - 14,
 38 |           pageY: offset.top
 39 |         })
 40 |         .trigger('mouseup', { force: true })
 41 |         .wait(100)
 42 |         .then(() => {
 43 |           expect(gantt.state.options.times.timeZoom).to.equal(12);
 44 |         });
 45 |     });
 46 | }
 47 | 
 48 | function expectAddTask(url) {
 49 |   cy.viewport(1440, 900)
 50 |     .document()
 51 |     .then(doc => {
 52 |       doc.body.innerHtml = '';
 53 |     })
 54 |     .visit(url, { timeout: 10000 })
 55 |     .then(window => {
 56 |       const gantt = window.app.$children[0];
 57 |       expect(gantt).to.equal(window.ganttInstance);
 58 |       expect(gantt.state.tasks.length).to.equal(15);
 59 |       expect(typeof gantt.getTask).to.equal('function');
 60 |       const task = gantt.getTask(7);
 61 |       expect(task.children.length).to.equal(1);
 62 |       expect(task.allChildren.length).to.equal(2);
 63 |       expect(task.children[0]).to.equal(8);
 64 |       expect(gantt.getTask(2).collapsed).to.equal(true);
 65 |       expect(gantt.state.options.times.timeZoom).to.equal(17);
 66 |       gantt.state.options.times.timeZoom = 10;
 67 |       expect(gantt.state.options.times.timeZoom).to.equal(10);
 68 |       cy.get(
 69 |         'div.gantt-elastic__task-list-items > div:nth-child(2) > div:nth-child(2) > div > div.gantt-elastic__task-list-expander-wrapper > svg'
 70 |       )
 71 |         .click()
 72 |         .wait(100)
 73 |         .then(() => {
 74 |           expect(gantt.getTask(2).collapsed).to.equal(false);
 75 |           return cy.get('#btn-add');
 76 |         })
 77 |         .click()
 78 |         .wait(100)
 79 |         .then(() => {
 80 |           const task = gantt.getTask(7);
 81 |           expect(task.children.length).to.equal(2);
 82 |           expect(task.allChildren.length).to.equal(3);
 83 |           expect(task.children[1]).to.equal(88);
 84 |           expect(gantt.getTask(2).collapsed).to.equal(false);
 85 |           expect(gantt.state.options.times.timeZoom).to.equal(10);
 86 |         });
 87 |     });
 88 | }
 89 | 
 90 | function expectCollapseExpandTask(url) {
 91 |   cy.viewport(1440, 900)
 92 |     .document()
 93 |     .then(doc => {
 94 |       doc.body.innerHtml = '';
 95 |     })
 96 |     .visit(url, { timeout: 10000 })
 97 |     .then(window => {
 98 |       const gantt = window.app.$children[0];
 99 |       expect(gantt.state.tasks.length).to.equal(15);
100 |       expect(typeof gantt.getTask).to.equal('function');
101 |       const task = gantt.getTask(2);
102 |       expect(task.collapsed).to.equal(true);
103 |       // get task 2
104 |       cy.get(
105 |         'div.gantt-elastic__task-list-items > div:nth-child(2) > div:nth-child(2) > div > div.gantt-elastic__task-list-expander-wrapper > svg'
106 |       )
107 |         .click()
108 |         .wait(50)
109 |         .then(() => {
110 |           expect(gantt.getTask(2).collapsed).to.equal(false);
111 |           expect(gantt.getTask(7).collapsed).to.equal(true);
112 |           // return task 7
113 |           return cy.get(
114 |             '.gantt-elastic__task-list-items > div:nth-child(4) > div:nth-child(2) > div > div.gantt-elastic__task-list-expander-wrapper > svg'
115 |           );
116 |         })
117 |         .click()
118 |         .wait(50)
119 |         .then(() => {
120 |           expect(gantt.getTask(2).collapsed).to.equal(false);
121 |           expect(gantt.getTask(7).collapsed).to.equal(false);
122 |           expect(gantt.getTask(8).collapsed).to.equal(false);
123 |           // return task 7 again
124 |           return cy.get(
125 |             '.gantt-elastic__task-list-items > div:nth-child(4) > div:nth-child(2) > div > div.gantt-elastic__task-list-expander-wrapper > svg'
126 |           );
127 |         })
128 |         .click()
129 |         .wait(50)
130 |         .then(() => {
131 |           expect(gantt.getTask(2).collapsed).to.equal(false);
132 |           expect(gantt.getTask(7).collapsed).to.equal(true);
133 |           expect(gantt.getTask(8).collapsed).to.equal(false);
134 |           // return task 2
135 |           return cy.get(
136 |             '.gantt-elastic__task-list-items > div:nth-child(2) > div:nth-child(2) > div > div.gantt-elastic__task-list-expander-wrapper > svg'
137 |           );
138 |         })
139 |         .click()
140 |         .wait(50)
141 |         .then(() => {
142 |           expect(gantt.getTask(2).collapsed).to.equal(true);
143 |           expect(gantt.getTask(7).collapsed).to.equal(true);
144 |           expect(gantt.getTask(8).collapsed).to.equal(false);
145 |           // return task 2 again
146 |           return cy.get(
147 |             '.gantt-elastic__task-list-items > div:nth-child(2) > div:nth-child(2) > div > div.gantt-elastic__task-list-expander-wrapper > svg'
148 |           );
149 |         })
150 |         .click()
151 |         .wait(50)
152 |         .then(() => {
153 |           expect(gantt.getTask(2).collapsed).to.equal(false);
154 |           expect(gantt.getTask(7).collapsed).to.equal(true);
155 |           expect(gantt.getTask(8).collapsed).to.equal(false);
156 |         });
157 |     });
158 | }
159 | 
160 | const umd = '/tests/assets/umd.html';
161 | const standalone = '/tests/assets/standalone.html';
162 | 
163 | describe('Basic', () => {
164 |   it('should mount gantt-elastic - umd', () => {
165 |     expectIsMounted(umd);
166 |   });
167 |   it('should mount gantt-elastic - standalone', () => {
168 |     expectIsMounted(standalone);
169 |   });
170 | 
171 |   it('should change time-zoom - umd', () => {
172 |     expectTimeZoomChange(umd);
173 |   });
174 |   it('should change time-zoom - standalone', () => {
175 |     expectTimeZoomChange(standalone);
176 |   });
177 | 
178 |   it('should add task - umd', () => {
179 |     expectAddTask(umd);
180 |   });
181 |   it('should add task - standalone', () => {
182 |     expectAddTask(standalone);
183 |   });
184 | 
185 |   it('should collapse and expand task umd', () => {
186 |     expectCollapseExpandTask(umd);
187 |   });
188 |   it('should collapse and expand task standalone', () => {
189 |     expectCollapseExpandTask(standalone);
190 |   });
191 | });
192 | 


--------------------------------------------------------------------------------
/tests/plugins/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example plugins/index.js can be used to load plugins
 3 | //
 4 | // You can change the location of this file or turn off loading
 5 | // the plugins file with the 'pluginsFile' configuration option.
 6 | //
 7 | // You can read more here:
 8 | // https://on.cypress.io/plugins-guide
 9 | // ***********************************************************
10 | 
11 | // This function is called when a project is opened or re-opened (e.g. due to
12 | // the project's config changing)
13 | 
14 | module.exports = (on, config) => {
15 |   // `on` is used to hook into various events Cypress emits
16 |   // `config` is the resolved Cypress config
17 | }
18 | 


--------------------------------------------------------------------------------
/tests/support/commands.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************
 2 | // This example commands.js shows you how to
 3 | // create various custom commands and overwrite
 4 | // existing commands.
 5 | //
 6 | // For more comprehensive examples of custom
 7 | // commands please read more here:
 8 | // https://on.cypress.io/custom-commands
 9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 | 


--------------------------------------------------------------------------------
/tests/support/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/index.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands';
18 | // Alternatively you can use CommonJS syntax:
19 | // require('./commands')
20 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const { VueLoaderPlugin } = require('vue-loader');
  3 | const TerserPlugin = require('terser-webpack-plugin');
  4 | 
  5 | module.exports = [
  6 |   {
  7 |     mode: 'production',
  8 |     entry: './src/bundle.js',
  9 |     output: {
 10 |       path: path.resolve(__dirname, 'dist'),
 11 |       filename: 'bundle.js'
 12 |     },
 13 |     devtool: 'source-map',
 14 |     externals: {
 15 |       vue: 'Vue'
 16 |       //vuex: 'Vuex'
 17 |       //dayjs: 'dayjs'
 18 |     },
 19 |     optimization: {
 20 |       minimize: true,
 21 |       namedModules: false,
 22 |       minimizer: [
 23 |         new TerserPlugin({
 24 |           terserOptions: {
 25 |             mangle: false
 26 |           }
 27 |         })
 28 |       ]
 29 |     },
 30 |     /*resolve: {
 31 |       alias: {
 32 |         vue$: 'vue/dist/vue.esm.js'
 33 |       }
 34 |     },*/
 35 |     module: {
 36 |       rules: [
 37 |         {
 38 |           test: /\.vue$/,
 39 |           use: 'vue-loader'
 40 |         },
 41 |         {
 42 |           test: /\.css$/,
 43 |           use: ['vue-style-loader', 'css-loader']
 44 |         }
 45 |       ]
 46 |     },
 47 |     plugins: [new VueLoaderPlugin()]
 48 |   },
 49 |   {
 50 |     mode: 'production',
 51 |     optimization: {
 52 |       minimize: false,
 53 |       minimizer: [
 54 |         new TerserPlugin({
 55 |           terserOptions: {
 56 |             mangle: false
 57 |           }
 58 |         })
 59 |       ]
 60 |     },
 61 |     entry: './src/GanttElastic.vue',
 62 |     output: {
 63 |       path: path.resolve(__dirname, 'dist'),
 64 |       filename: 'GanttElastic.umd.js',
 65 |       library: 'GanttElastic',
 66 |       libraryTarget: 'umd',
 67 |       libraryExport: 'default'
 68 |     },
 69 |     devtool: 'source-map',
 70 |     externals: {
 71 |       vue: 'Vue'
 72 |       //vuex: 'Vuex'
 73 |       //dayjs: 'dayjs'
 74 |     },
 75 |     module: {
 76 |       rules: [
 77 |         {
 78 |           test: /\.vue$/,
 79 |           use: 'vue-loader'
 80 |         },
 81 |         {
 82 |           test: /\.css$/,
 83 |           use: ['vue-style-loader', 'css-loader']
 84 |         }
 85 |       ]
 86 |     },
 87 |     plugins: [new VueLoaderPlugin()]
 88 |   },
 89 |   {
 90 |     mode: 'production',
 91 |     optimization: {
 92 |       minimize: true,
 93 |       namedModules: true,
 94 |       minimizer: [
 95 |         new TerserPlugin({
 96 |           terserOptions: {
 97 |             mangle: false
 98 |           }
 99 |         })
100 |       ]
101 |     },
102 |     entry: './src/GanttElastic.vue',
103 |     devtool: 'source-map',
104 |     output: {
105 |       path: path.resolve(__dirname, 'dist'),
106 |       filename: 'GanttElastic.umd.min.js',
107 |       library: 'GanttElastic',
108 |       libraryTarget: 'umd',
109 |       libraryExport: 'default'
110 |     },
111 |     externals: {
112 |       vue: 'Vue'
113 |       //vuex: 'Vuex'
114 |       //dayjs: 'dayjs'
115 |     },
116 |     module: {
117 |       rules: [
118 |         {
119 |           test: /\.vue$/,
120 |           use: 'vue-loader'
121 |         },
122 |         {
123 |           test: /\.css$/,
124 |           use: ['vue-style-loader', 'css-loader']
125 |         }
126 |       ]
127 |     },
128 |     plugins: [new VueLoaderPlugin()]
129 |   },
130 |   {
131 |     mode: 'production',
132 |     optimization: {
133 |       minimize: false
134 |     },
135 |     entry: './src/GanttElastic.vue',
136 |     devtool: 'source-map',
137 |     output: {
138 |       path: path.resolve(__dirname, 'dist'),
139 |       filename: 'GanttElastic.common.js',
140 |       library: 'GanttElastic',
141 |       libraryTarget: 'commonjs2',
142 |       libraryExport: 'default'
143 |     },
144 |     externals: {
145 |       vue: 'Vue'
146 |       //vuex: 'Vuex'
147 |       //dayjs: 'dayjs'
148 |     },
149 |     module: {
150 |       rules: [
151 |         {
152 |           test: /\.vue$/,
153 |           use: 'vue-loader'
154 |         },
155 |         {
156 |           test: /\.css$/,
157 |           use: ['vue-style-loader', 'css-loader']
158 |         }
159 |       ]
160 |     },
161 |     plugins: [new VueLoaderPlugin()]
162 |   },
163 |   {
164 |     mode: 'production',
165 |     optimization: {
166 |       minimize: true,
167 |       namedModules: true,
168 |       minimizer: [
169 |         new TerserPlugin({
170 |           terserOptions: {
171 |             mangle: false
172 |           }
173 |         })
174 |       ]
175 |     },
176 |     entry: './src/GanttElastic.vue',
177 |     devtool: 'source-map',
178 |     output: {
179 |       path: path.resolve(__dirname, 'dist'),
180 |       filename: 'GanttElastic.common.min.js',
181 |       library: 'GanttElastic',
182 |       libraryTarget: 'commonjs2',
183 |       libraryExport: 'default'
184 |     },
185 |     externals: {
186 |       vue: 'Vue'
187 |       //vuex: 'Vuex'
188 |       //dayjs: 'dayjs'
189 |     },
190 |     module: {
191 |       rules: [
192 |         {
193 |           test: /\.vue$/,
194 |           use: 'vue-loader'
195 |         },
196 |         {
197 |           test: /\.css$/,
198 |           use: ['vue-style-loader', 'css-loader']
199 |         }
200 |       ]
201 |     },
202 |     plugins: [new VueLoaderPlugin()]
203 |   }
204 | ];
205 | 


--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const { VueLoaderPlugin } = require('vue-loader');
 3 | 
 4 | module.exports = {
 5 |   /*devServer: {
 6 |     publicPath: path.join(__dirname, 'dist'),
 7 |     compress: false,
 8 |     port: 9000,
 9 |     openPage: '/examples/vue.edit.html'
10 |   },*/
11 |   devtool: 'inline-source-map',
12 |   mode: 'development',
13 |   entry: './src/GanttElastic.vue',
14 |   output: {
15 |     path: path.resolve(__dirname, 'dist'),
16 |     filename: 'GanttElastic.umd.js',
17 |     library: 'GanttElastic',
18 |     libraryTarget: 'umd',
19 |     libraryExport: 'default'
20 |   },
21 |   externals: ['vue'],
22 |   resolve: {
23 |     alias: {
24 |       vue$: 'vue/dist/vue.esm.js'
25 |     }
26 |   },
27 |   module: {
28 |     rules: [
29 |       {
30 |         test: /\.vue$/,
31 |         use: 'vue-loader'
32 |       },
33 |       {
34 |         test: /\.css$/,
35 |         use: ['vue-style-loader', 'css-loader']
36 |       }
37 |     ]
38 |   },
39 |   plugins: [new VueLoaderPlugin()]
40 | };
41 | 


--------------------------------------------------------------------------------