Fixed #32

src/GanttElastic.vuex.js

@@ -1,4 +1,4 @@
-import { mergeDeepReactive } from './GanttElastic.vue';
+import { mergeDeepReactive, mergeDeep } from './GanttElastic.vue';
 const GanttElasticVuexModule = {
   state: {
     tasks: [],
@@ -7,7 +7,8 @@ const GanttElasticVuexModule = {
       allVisibleTasksHeight: 0,
       refs: {},
       tasksById: {},
-      times: {}
+      times: {},
+      clientWidth: 0
     }
   },
   mutations: {
@@ -36,7 +37,19 @@ const GanttElasticVuexModule = {
     ['GanttElastic/updateOptions'](state, payload) {
       state.options = mergeDeepReactive(state.options, payload);
     }
+  },
+  getters: {
+    ['GanttElastic/options'](state) {
+      return state.options;
+    },
+    ['GanttElastic/tasks'](state) {
+      return state.tasks;
+    }
   }
 };
-window.GanttElasticVuexModule = GanttElasticVuexModule;
-export default GanttElasticVuexModule;
+const getStore = state => {
+  GanttElasticVuexModule.state = state;
+  return GanttElasticVuexModule;
+};
+export default getStore;
+window.GanttElasticVuexModule = getStore;

src/components/Calendar/Calendar.vue

@@ -11,21 +11,24 @@
     class="gantt-elastic__calendar-wrapper"
     :style="root.style('calendar-wrapper', { 'margin-bottom': $store.state.GanttElastic.options.calendar.gap + 'px' })"
   >
-    <div class="gantt-elastic__calendar" :style="root.style('calendar', { width: getWidth + 'px' })">
+    <div class="gantt-elastic__calendar" :style="root.style('calendar', { width: width + 'px' })">
       <calendar-row
-        :items="$store.state.GanttElastic.options.calendar.months"
+        :items="months"
         which="month"
         v-if="$store.state.GanttElastic.options.calendar.month.display"
+        :style="root.style('calendar-row--month')"
       ></calendar-row>
       <calendar-row
-        :items="$store.state.GanttElastic.options.calendar.days"
+        :items="days"
         which="day"
         v-if="$store.state.GanttElastic.options.calendar.day.display"
+        :style="root.style('calendar-row--day')"
       ></calendar-row>
       <calendar-row
-        :items="$store.state.GanttElastic.options.calendar.hours"
+        :items="hours"
         which="hour"
         v-if="$store.state.GanttElastic.options.calendar.hour.display"
+        :style="root.style('calendar-row--hour')"
       ></calendar-row>
     </div>
   </div>
@@ -34,6 +37,7 @@
 <script>
 import dayjs from 'dayjs';
 import CalendarRow from './CalendarRow.vue';
+import { mapState } from 'vuex';
 export default {
   name: 'Calendar',
   components: {
@@ -55,13 +59,6 @@ export default {
     this.root.$on('calendar-recalculate', this.regenerate);
   },
 
-  /**
-   * Mounted
-   */
-  mounted() {
-    this.regenerate();
-  },
-
   methods: {
     /**
      * How many hours will fit?
@@ -159,7 +156,7 @@ export default {
         }
       }
       return {
-        count: 1,
+        count: 0,
         type: formatNames[0]
       };
     },
@@ -200,7 +197,7 @@ export default {
     generateHours() {
       let hours = [];
       if (!this.$store.state.GanttElastic.options.calendar.hour.display) {
-        return this.$store.commit(this.root.updateOptionsMut, { calendar: { hours: [] } });
+        return hours;
       }
       for (
         let hourIndex = 0, len = this.$store.state.GanttElastic.options.times.steps.length;
@@ -209,7 +206,7 @@ export default {
       ) {
         const hoursCount = this.howManyHoursFit(hourIndex);
         if (hoursCount.count === 0) {
-          return this.$store.commit(this.root.updateOptionsMut, { calendar: { hours } });
+          return hours;
         }
         const hourStep = 24 / hoursCount.count;
         const hourWidthPx = this.$store.state.GanttElastic.options.times.steps[hourIndex].width.px / hoursCount.count;
@@ -238,7 +235,7 @@ export default {
           });
         }
       }
-      return this.$store.commit(this.root.updateOptionsMut, { calendar: { hours } });
+      return hours;
     },
 
     /**
@@ -249,11 +246,11 @@ export default {
     generateDays() {
       let days = [];
       if (!this.$store.state.GanttElastic.options.calendar.day.display) {
-        return this.$store.commit(this.root.updateOptionsMut, { calendar: { days: [] } });
+        return days;
       }
       const daysCount = this.howManyDaysFit();
       if (daysCount.count === 0) {
-        return this.$store.commit(this.root.updateOptionsMut, { calendar: { days } });
+        return days;
       }
       const dayStep = Math.ceil(this.$store.state.GanttElastic.options.times.steps.length / daysCount.count);
       for (
@@ -286,7 +283,7 @@ export default {
           type: daysCount.type
         });
       }
-      return this.$store.commit(this.root.updateOptionsMut, { calendar: { days } });
+      return days;
     },
 
     /**
@@ -297,7 +294,7 @@ export default {
     generateMonths() {
       let months = [];
       if (!this.$store.state.GanttElastic.options.calendar.month.display) {
-        return this.$store.commit(this.root.updateOptionsMut, { calendar: { months: [] } });
+        return months;
       }
       const monthsCount = this.howManyMonthsFit();
       let formatNames = Object.keys(this.$store.state.GanttElastic.options.calendar.month.format);
@@ -350,95 +347,36 @@ export default {
           currentDate = dayjs(this.$store.state.GanttElastic.options.times.lastDate);
         }
       }
-      return this.$store.commit(this.root.updateOptionsMut, { calendar: { months } });
+      return months;
     },
 
     /**
      * Regenerate dates
      */
     regenerate() {
-      this.generateHours();
-      this.generateDays();
-      this.generateMonths();
+      const hours = this.generateHours();
+      const days = this.generateDays();
+      const months = this.generateMonths();
+      this.$store.commit(this.root.updateOptionsMut, { calendar: { hours, days, months } });
       this.root.calculateCalendarDimensions();
     }
   },
 
   computed: {
-    /**
-     * Get width
-     *
-     * @returns {number}
-     */
-    getWidth() {
-      let width = this.$store.state.GanttElastic.options.width;
-      return width;
+    options() {
+      return this.$store.getters['GanttElastic/options'];
     },
-
-    /**
-     * Get month style
-     *
-     * @returns {object}
-     */
-    monthsStyle() {
-      return this.root.mergeDeep(
-        {},
-        this.$store.state.GanttElastic.options.calendar.styles.row,
-        this.$store.state.GanttElastic.options.calendar.month.style
-      );
+    width() {
+      return this.options.clientWidth;
     },
-
-    /**
-     * Get day style
-     *
-     * @returns {object}
-     */
-    daysStyle() {
-      return this.root.mergeDeep(
-        {},
-        this.$store.state.GanttElastic.options.calendar.styles.row,
-        this.$store.state.GanttElastic.options.calendar.day.style
-      );
+    days() {
+      return this.options.calendar.days.filter(day => this.root.isInsideViewPort(day.x, day.width));
     },
-
-    /**
-     * Get hour styke
-     *
-     * @returns {object}
-     */
-    hoursStyle() {
-      return this.root.mergeDeep(
-        {},
-        this.$store.state.GanttElastic.options.calendar.styles.row,
-        this.$store.state.GanttElastic.options.calendar.hour.style
-      );
+    hours() {
+      return this.options.calendar.hours.filter(hour => this.root.isInsideViewPort(hour.x, hour.width));
     },
-
-    /**
-     * Get visible days
-     *
-     * @returns {array}
-     */
-    getDays() {
-      return this.days.filter(day => this.root.isInsideViewPort(day.x, day.width));
-    },
-
-    /**
-     * Get visible hours
-     *
-     * @returns {array}
-     */
-    getHours() {
-      return this.hours.filter(hour => this.root.isInsideViewPort(hour.x, hour.width));
-    },
-
-    /**
-     * Get visible months
-     *
-     * @returns {array}
-     */
-    getMonths() {
-      return this.months.filter(month => this.root.isInsideViewPort(month.x, month.width));
+    months() {
+      return this.options.calendar.months.filter(month => this.root.isInsideViewPort(month.x, month.width));
     }
   }
 };

src/components/MainView.vue

@@ -16,7 +16,7 @@
         class="gantt-elastic__main-container"
         :style="
           root.style('main-container', {
-            width: getWidth + 'px',
+            width: $store.state.GanttElastic.options.clientWidth + 'px',
             height: $store.state.GanttElastic.options.height + 'px'
           })
         "
@@ -132,19 +132,6 @@ export default {
     document.addEventListener('touchend', this.chartMouseUp.bind(this));
   },
   computed: {
-    /**
-     * Get width
-     *
-     * @returns {number}
-     */
-    getWidth() {
-      let width = this.$store.state.GanttElastic.options.clientWidth;
-      if (width < 0) {
-        return 0;
-      }
-      return width;
-    },
-
     /**
      * Get margin left
      *

src/components/TaskList/TaskListHeader.vue

@@ -137,7 +137,7 @@ export default {
     /**
      * Resizer mouse up event handler
      */
-    resizerMouseUp(event) {
+    resizerMouseUp() {
       if (this.resizer.moving) {
         this.root.$emit('taskList-column-width-change', this.resizer.moving);
         this.root.$emit('taskList-column-width-change-stop', this.resizer.moving);