configurable snapping

src/date_utils.js

@@ -235,6 +235,21 @@ export default {
         ];
     },
 
+    convert_scales(period, to_scale) {
+        const TO_DAYS = {
+            millisecond: 1 / 60 / 60 / 24 / 1000,
+            second: 1 / 60 / 60 / 24,
+            minute: 1 / 60 / 24,
+            hour: 1 / 24,
+            day: 1,
+            month: 30,
+            year: 365,
+        };
+        const { duration, scale } = this.parse_duration(period);
+        let in_days = duration * TO_DAYS[scale];
+        return in_days / TO_DAYS[to_scale];
+    },
+
     get_days_in_month(date) {
         const no_of_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 

src/defaults.js

@@ -79,6 +79,7 @@ const DEFAULT_VIEW_MODES = [
                 ? date_utils.format(d, 'YYYY', lang)
                 : '',
         thick_line: (d) => d.getMonth() % 3 === 0,
+        default_snap: '7d',
     },
     {
         name: 'Year',
@@ -92,6 +93,7 @@ const DEFAULT_VIEW_MODES = [
                 ? date_utils.format(d, 'YYYY', lang)
                 : '',
         upper_text_frequency: 30,
+        default_snap: '1m',
     },
 ];
 
@@ -119,7 +121,7 @@ const DEFAULT_OPTIONS = {
     auto_move_label: true,
     today_button: true,
     view_mode_select: false,
-    snap_by_day: false,
+    default_snap: '1d',
 };
 
 export { DEFAULT_OPTIONS, DEFAULT_VIEW_MODES };

src/gantt.css

@@ -10,10 +10,10 @@
     --light-border-color: #ebeff2;
     --light-yellow: #f6e796;
     --holiday-color: #f9fafa;
-    --text-muted: #666;
+    --text-muted: #7c7c7c;
     --text-grey: #98a1a9;
     --text-light: #fff;
-    --text-dark: #111;
+    --text-dark: #171717;
     --progress: #ebeef0;
     --handle-color: #dcdce4;
     --handle-color-important: #94c4f4;
@@ -74,7 +74,6 @@
     & .lower-text,
     & .upper-text {
         text-anchor: middle;
-        color: var(--text-dark);
     }
 
     & .upper-header {
@@ -90,6 +89,7 @@
         position: absolute;
         width: fit-content;
         transform: translateX(-50%);
+        color: var(--text-muted);
     }
 
     & .upper-text {
@@ -97,6 +97,7 @@
         width: fit-content;
         font-weight: 500;
         font-size: 16px;
+        color: var(--text-dark);
     }
 
     & .current-upper {

src/index.js

@@ -1054,24 +1054,25 @@ export default class Gantt {
         let odx = dx,
             rem,
             position;
+
         let unit_length = 1;
-        if (this.options.snap_by_day) {
+        const default_snap =
-            const { duration, scale } = date_utils.parse_duration(
+            this.config.view_mode.default_snap || this.options.default_snap;
-                this.config.view_mode.step,
+        if (default_snap !== 'unit') {
-            );
+            const { duration, scale } = date_utils.parse_duration(default_snap);
             unit_length =
-                duration *
+                date_utils.convert_scales(this.config.view_mode.step, scale) /
-                ({ hour: 1 / 24, week: 7, month: 30, year: 365 }[scale] || 1);
+                duration;
         }
 
         rem = dx % (this.config.column_width / unit_length);
+
         position =
             odx -
             rem +
-            (rem < this.config.column_width / unit_length / 2
+            (rem < (this.config.column_width / unit_length) * 2
                 ? 0
                 : this.config.column_width / unit_length);
-
         return position;
     }