feat: scrolling

src/GGanttBar.vue

@@ -273,8 +273,13 @@ export default {
     },
 
     drag(e) {
+      const chart = document.querySelector('#g-gantt-chart')
       let barWidth = this.$refs['g-gantt-bar'].getBoundingClientRect().width
-      let newXStart = e.clientX - this.barContainer.left - this.cursorOffsetX
+      let newXStart =
+        chart.scrollLeft +
+        e.clientX -
+        this.barContainer.left -
+        this.cursorOffsetX
       let newXEnd = newXStart + barWidth
       if (this.isPosOutOfDragRange(newXStart, newXEnd)) {
         return

src/GGanttChart.vue

@@ -21,7 +21,14 @@
       :highlighted-hours="highlightedHours"
     />
 
-    <div id="g-gantt-rows-container">
+    <div
+      id="g-gantt-rows-container"
+      :style="{
+        width: `${
+          timeCount * 30 + parseInt(rowLabelWidth.replace('px', ''))
+        }px`,
+      }"
+    >
       <slot />
       <!-- the g-gantt-row components go here -->
     </div>
@@ -48,7 +55,7 @@ export default {
     chartStart: { type: String },
     chartEnd: { type: String },
     hideTimeaxis: Boolean,
-    rowLabelWidth: { type: String, default: '10%' },
+    rowLabelWidth: { type: String, default: '200px' },
     rowHeight: { type: Number, default: 40 },
     locale: { type: String, default: 'en' },
     theme: { type: String },
@@ -188,7 +195,7 @@ export default {
       let movedBars = didSnapBack ? new Set() : this.movedBarsInDrag
       // Magnetic suction
       if (movedBars.size && this.isMagnetic) {
-        let { left, right/*, move*/ } = action
+        let { left, right /*, move*/ } = action
 
         movedBars.forEach((bar) => {
           if (this.timeaxisMode === 'month_days') {
@@ -286,10 +293,8 @@ export default {
         return
       }
       for (let side of ['left', 'right']) {
-        let [
-          totalGapDistance,
-          bundleBarsOnPath,
-        ] = this.countGapDistanceToNextImmobileBar(bar, null, side, false)
+        let [totalGapDistance, bundleBarsOnPath] =
+          this.countGapDistanceToNextImmobileBar(bar, null, side, false)
         for (let i = 0; i < bundleBarsOnPath.length; i++) {
           let barFromBundle = bundleBarsOnPath[i].bar
           let gapDist = bundleBarsOnPath[i].gapDistance
@@ -297,10 +302,8 @@ export default {
             barFromBundle.barConfig.bundle
           ).filter((otherBar) => otherBar !== barFromBundle)
           otherBarsFromBundle.forEach((otherBar) => {
-            let [
-              newGapDistance,
-              newBundleBars,
-            ] = this.countGapDistanceToNextImmobileBar(otherBar, gapDist, side)
+            let [newGapDistance, newBundleBars] =
+              this.countGapDistanceToNextImmobileBar(otherBar, gapDist, side)
             if (
               newGapDistance !== null &&
               (newGapDistance < totalGapDistance || !totalGapDistance)
@@ -479,9 +482,9 @@ export default {
 <style scoped>
 #g-gantt-chart {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
+  /* display: flex; */
+  /* flex-direction: column; */
+  overflow: auto;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;

src/GGanttGrid.vue

@@ -3,7 +3,7 @@
     class="g-grid-container"
     :style="{
       left: rowLabelWidth,
-      width: `${100 - this.rowLabelWidth.replace('%', '')}%`,
+      width: `${getTimeCount() * 30}px`,
     }"
   >
     <div
@@ -23,7 +23,7 @@ import moment from 'moment'
 export default {
   name: 'GGanttGrid',
 
-  inject: ['ganttChartProps'],
+  inject: ['ganttChartProps', 'getTimeCount'],
 
   props: {
     chartStart: { type: String },
@@ -57,8 +57,8 @@ export default {
 .g-grid-container {
   position: absolute;
   top: 0;
-  left: 30%; /* must correspond to width of row title */
-  width: 70%;
+  /* left: 30%; must correspond to width of row title */
+  /* width: 70%; */
   height: calc(100% - 23px);
   display: flex;
   justify-content: space-between;

src/GGanttRow.vue

@@ -85,7 +85,9 @@ export default {
 
     barsContainerStyle() {
       return {
-        width: `${100 - this.ganttChartProps.rowLabelWidth.replace('%', '')}%`,
+        width: `${
+          100 /*- this.ganttChartProps.rowLabelWidth.replace('%', '')*/
+        }%`,
       }
     },
   },
@@ -193,19 +195,22 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 20%;
+  /* width: 20%; */
   background: #e8e8e8;
   color: #424242;
   font-size: 0.9em;
   z-index: 3;
   overflow: hidden;
   font-weight: bold;
+  left: 0;
+  position: sticky;
 }
 
 .g-gantt-row > .g-gantt-row-bars-container {
   position: relative;
   border-top: 1px solid #eaeaea;
-  width: 70%;
+  /* width: 70%; */
   border-bottom: 1px solid #eaeaea;
+  flex: 1;
 }
 </style>

src/GGanttTimeaxis.vue

@@ -1,25 +1,28 @@
 <template>
-  <div id="g-timeaxis">
+  <div
+    id="g-timeaxis"
+    :style="{
+      width: `${
+        getTimeCount() * 30 + parseInt(rowLabelWidth.replace('px', ''))
+      }px`,
+    }"
+  >
     <div
       class="g-timeaxis-empty-space"
-      :style="{ width: rowLabelWidth, background: themeColors.secondary }"
+      :style="{ minWidth: rowLabelWidth, background: themeColors.secondary }"
     />
-    <div
-      class="g-timeaxis-days"
-      :style="{ width: `${100 - rowLabelWidth.replace('%', '')}%` }"
-    >
+    <div class="g-timeaxis-days">
       <div
         v-for="(point, index) in axisPoints"
         :key="point.text"
         class="g-timeaxis-day"
         :style="{
-          width: point.widthPercentage + '%',
           background:
             index % 2 === 0 ? themeColors.primary : themeColors.secondary,
           color: themeColors.text,
         }"
       >
-        <div v-html="pointFormatted(point)||'&nbsp;'"></div>
+        <div v-html="pointFormatted(point) || '&nbsp;'"></div>
         <div
           :style="{ background: themeColors.ternary, color: themeColors.text }"
         >
@@ -28,7 +31,7 @@
             :key="childPoint.fullDatetime"
             class="g-timeaxis-hour"
             :style="{
-              width: childPoint.widthPercentage + '%',
+              width: '30px',
               background:
                 index % 2 === 0 ? themeColors.primary : themeColors.secondary,
               color: themeColors.text,
@@ -55,7 +58,7 @@ import moment from 'moment'
 export default {
   name: 'GGanttTimeaxis',
 
-  inject: ['ganttChartProps', 'getTimeUnit', 'getTimeFormat'],
+  inject: ['ganttChartProps', 'getTimeUnit', 'getTimeFormat', 'getTimeCount'],
 
   props: {
     chartStart: String,
@@ -230,29 +233,32 @@ export default {
 .g-timeaxis-day,
 .g-timeaxis-day > div {
   display: flex;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 #g-timeaxis {
   position: sticky;
   top: 0;
-  width: 100%;
-  height: 8%;
-  min-height: 75px;
+  /* width: 100%; */
+  /* height: 8%; */
+  /* min-height: 75px; */
   background: white;
   z-index: 4;
   box-shadow: 0px 1px 3px 2px rgba(50, 50, 50, 0.5);
 }
 
 #g-timeaxis > .g-timeaxis-empty-space {
-  width: 20%; /* this has to be as wide as .ganttRowTitle in VGanttastic.css */
-  height: 100%;
+  /* width: 20%; this has to be as wide as .ganttRowTitle in VGanttastic.css */
+  min-height: 100%;
   background: #f5f5f5;
+  z-index: 5;
+  left: 0;
+  position: sticky;
 }
 
 #g-timeaxis > .g-timeaxis-days {
   position: relative;
-  width: 80%;
+  /* width: 80%; */
   height: 100%;
 }
 
@@ -290,7 +296,7 @@ export default {
   align-items: flex-start;
   flex-direction: column;
   opacity: 0.5;
-  width: 100%;
+  /* width: 100%; */
 }
 
 .g-timeaxis-hour-pin {

src/Playground.vue

@@ -11,7 +11,7 @@
       timeaxisMode="day_hours"
       :is-magnetic="isMagnetic"
       :highlighted-hours="highlightedHours"
-      :row-label-width="`${rowLabelWidth}%`"
+      :row-label-width="rowLabelWidth"
       :row-height="rowHeight"
       :theme="selectedTheme"
       barStartKey="myStart"
@@ -46,12 +46,12 @@ export default {
   data() {
     return {
       chartStart: '2020-03-02 00:00',
-      chartEnd: '2020-03-04 00:00',
+      chartEnd: '2020-03-05 10:00',
       pushOnOverlap: true,
       isMagnetic: true,
       grid: true,
       rowHeight: 40,
-      rowLabelWidth: 15,
+      rowLabelWidth: '200px',
       hideTimeaxis: false,
       highlightOnHover: false,
       hours: [...Array(24).keys()],
@@ -166,7 +166,7 @@ export default {
                 color: 'white',
                 backgroundColor: '#5effad',
                 pushOnOverlap: false,
-                zIndex: 3,
+                zIndex: 2,
               },
             },
             {
@@ -213,8 +213,8 @@ export default {
 
   methods: {
     onDragend(e) {
-      let {event, bar} = e
-      console.log('onDragend', {event: event.type, bar})
+      let { event, bar } = e
+      console.log('onDragend', { event: event.type, bar })
     },
   },
 }