fix: grid height

.prettierrc.js

@@ -1,15 +1,15 @@
 module.exports = {
   arrowParens: 'avoid',
   bracketSpacing: true,
-  // "embeddedLanguageFormatting": "auto",
+  // embeddedLanguageFormatting: 'auto',
-  // "htmlWhitespaceSensitivity": "css",
+  // htmlWhitespaceSensitivity: 'css',
-  // "insertPragma": false,
+  // insertPragma: false,
-  // "jsxBracketSameLine": false,
+  // jsxBracketSameLine: false,
-  // "jsxSingleQuote": false,
+  // jsxSingleQuote: false,
-  // "printWidth": 80,
+  printWidth: 80,
-  // "proseWrap": "preserve",
+  // proseWrap: 'preserve',
-  // "quoteProps": "as-needed",
+  // quoteProps: 'as-needed',
-  // "requirePragma": false,
+  // requirePragma: false,
   semi: false,
   singleQuote: true,
   tabWidth: 2,

src/components/GGanttChart.vue

@@ -17,24 +17,22 @@
       :grid-size="gridSize"
     />
 
-    <g-gantt-grid
-      v-if="grid"
-      :chart-start="chartStart"
-      :chart-end="chartEnd"
-      :row-label-width="rowLabelWidth"
-      :highlighted-hours="highlightedHours"
-      :highlighted-days="highlightedDays"
-      :precision="precision"
-      :time-count="timeCount"
-      :grid-size="gridSize"
-    />
-
     <div
       class="g-gantt-rows-container"
       :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
     >
+      <g-gantt-grid
+        v-if="grid"
+        :chart-start="chartStart"
+        :chart-end="chartEnd"
+        :row-label-width="rowLabelWidth"
+        :highlighted-hours="highlightedHours"
+        :highlighted-days="highlightedDays"
+        :precision="precision"
+        :time-count="timeCount"
+        :grid-size="gridSize"
+      />
       <slot />
-      <!-- the g-gantt-row components go here -->
     </div>
   </div>
 </template>

src/components/GGanttGrid.vue

@@ -2,12 +2,7 @@
   <div
     ref="g-grid-container"
     class="g-grid-container"
-    :style="{
+    :style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }"
-      left: `${rowLabelWidth}px`,
-      width: `${timeCount * gridSize}px`,
-      top,
-      height,
-    }"
   >
     <div
       v-for="(childPoint, index) in allChildPoints"
@@ -43,11 +38,6 @@ export default {
     gridSize: { type: Number },
   },
 
-  data: () => ({
-    top: '0px',
-    height: '0px',
-  }),
-
   computed: {
     allChildPoints() {
       let start = moment(this.chartStart)
@@ -68,26 +58,6 @@ export default {
       return res
     },
   },
-
-  mounted() {
-    this.$nextTick(() => this.onWindowResize())
-    window.addEventListener('resize', this.onWindowResize)
-  },
-
-  destroyed() {
-    window.removeEventListener('resize', this.onWindowResize)
-  },
-
-  methods: {
-    onWindowResize() {
-      let gridContainer = this.$refs['g-grid-container']
-      if (!gridContainer) return
-      let rowsContainer = gridContainer.nextSibling
-      if (!rowsContainer) return
-      this.top = `${rowsContainer.offsetTop}px`
-      this.height = `${rowsContainer.offsetHeight}px`
-    },
-  },
 }
 </script>
 
@@ -95,7 +65,7 @@ export default {
 .g-grid-container {
   position: absolute;
   top: 0;
-  height: calc(100% - 23px);
+  bottom: 0;
   overflow: hidden;
 }
 

src/components/GGanttTimeaxis.vue

@@ -96,12 +96,14 @@ export default {
     this.initAxis()
     this.onWindowResize()
     window.addEventListener('resize', this.onWindowResize)
-    window.addEventListener('mousemove', event => this.moveTimemarker(event))
+    window.addEventListener('mousemove', this.moveTimemarker)
-    window.addEventListener('dragover', event => this.moveTimemarker(event))
+    window.addEventListener('dragover', this.moveTimemarker)
   },
 
   destroyed() {
     window.removeEventListener('resize', this.onWindowResize)
+    window.removeEventListener('mousemove', this.moveTimemarker)
+    window.removeEventListener('dragover', this.moveTimemarker)
   },
 
   methods: {