Go limitless when selecting time

whiletrue-industries · Jan 25, 2024 · 3068b94 · 3068b94
1 parent 014fede
commit 3068b94
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/...ects/chronomaps/src/app/chronomap-page/timeline-selector/timeline-selector.component.html b/...ects/chronomaps/src/app/chronomap-page/timeline-selector/timeline-selector.component.html
@@ -9,4 +9,4 @@
     </svg>        
 </div>
 <app-time-line 
-    [minDate]='minDate' [maxDate]='maxDate' [chronomap]='chronomap' [date]='date' [includeTime]='includeTime'></app-time-line>
+    [minDate]='minDate' [maxDate]='maxDate' [chronomap]='chronomap' [date]='date' [includeTime]='includeTime' [limitless]='true'></app-time-line>
diff --git a/projects/chronomaps/src/app/chronomap-page/timeline-selector/timeline-selector.component.ts b/projects/chronomaps/src/app/chronomap-page/timeline-selector/timeline-selector.component.ts
@@ -50,7 +50,7 @@ export class TimelineSelectorComponent implements AfterViewInit, OnInit {
   ngOnInit(): void {
       const minDate = this.chronomap.minDate();
       const maxDate = this.chronomap.maxDate();
-      const delta = (maxDate.getTime() - minDate.getTime());
+      const delta = (maxDate.getTime() - minDate.getTime()) + 1000 * 60 * 60 * 24;
       this.minDate = new Date(minDate.getTime() - delta);
       this.maxDate = new Date(maxDate.getTime() + delta);
 

diff --git a/projects/chronomaps/src/app/time-line/time-line.component.ts b/projects/chronomaps/src/app/time-line/time-line.component.ts
@@ -32,6 +32,7 @@ export class TimeLineComponent implements OnInit, OnChanges, AfterViewInit {
   @Input() includeTime: WritableSignal<boolean>;
   @Input() showHovers = true;
   @Input() hoverable = true;
+  @Input() limitless = false;
   @Input() hovered: WritableSignal<boolean>;;
 
   @Output() selected = new EventEmitter<any>();
@@ -150,10 +151,13 @@ export class TimeLineComponent implements OnInit, OnChanges, AfterViewInit {
 
   init() {
     this.timeline.nativeElement.innerHTML = '';
-    this.zoomBehaviour = zoom<SVGSVGElement, unknown>()
-                    .scaleExtent([1, 100000])
-                    .translateExtent([[0, 0], [this.WIDTH, 0]])
-                    .on('zoom', (e) => this.onZoom(e))
+    this.zoomBehaviour = zoom<SVGSVGElement, unknown>();
+    if (!this.limitless) {
+      this.zoomBehaviour = this.zoomBehaviour
+          .scaleExtent([1, 100000])
+          .translateExtent([[0, 0], [this.WIDTH, 0]]);
+    }
+    this.zoomBehaviour = this.zoomBehaviour.on('zoom', (e: D3ZoomEvent<SVGSVGElement, unknown>) => this.onZoom(e))
     this.svg = select<SVGSVGElement, unknown>(this.timeline.nativeElement)
                     .append('svg')
                     .attr('width', '100%')