From 545508987903be8c2f361bbee8b3beae683c73b5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 26 Oct 2023 23:23:48 -0400
Subject: a variety of fixes to the animation timeline to make it make some
 sense. lots still broken.

---
 .../views/animationtimeline/TimelineOverview.tsx   | 112 ++++++++++-----------
 1 file changed, 52 insertions(+), 60 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 81a5587e4..82ac69a3b 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -1,11 +1,9 @@
-import * as React from "react";
-import { observable, action, computed, runInAction, reaction, IReactionDisposer } from "mobx";
-import { observer } from "mobx-react";
-import "./TimelineOverview.scss";
-import * as $ from 'jquery';
-import { Timeline } from "./Timeline";
-import { Keyframe, KeyframeFunc } from "./Keyframe";
-
+import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { RegionHelpers } from './Region';
+import { Timeline } from './Timeline';
+import './TimelineOverview.scss';
 
 interface TimelineOverviewProps {
     totalLength: number;
@@ -21,9 +19,8 @@ interface TimelineOverviewProps {
     tickIncrement: number;
 }
 
-
 @observer
-export class TimelineOverview extends React.Component<TimelineOverviewProps>{
+export class TimelineOverview extends React.Component<TimelineOverviewProps> {
     @observable private _visibleRef = React.createRef<HTMLDivElement>();
     @observable private _scrubberRef = React.createRef<HTMLDivElement>();
     @observable private authoringContainer = React.createRef<HTMLDivElement>();
@@ -49,13 +46,13 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
                         this.setOverviewWidth();
                     });
                 }
-            },
+            }
         );
-    }
+    };
 
     componentWillUnmount = () => {
         this._authoringReaction && this._authoringReaction();
-    }
+    };
 
     @action
     setOverviewWidth() {
@@ -66,8 +63,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
         if (this.props.isAuthoring) {
             this.activeOverviewWidth = this.overviewBarWidth;
-        }
-        else {
+        } else {
             this.activeOverviewWidth = this.playbarWidth;
         }
     }
@@ -76,37 +72,37 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onPointerDown = (e: React.PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        document.removeEventListener("pointermove", this.onPanX);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointermove", this.onPanX);
-        document.addEventListener("pointerup", this.onPointerUp);
-    }
+        document.removeEventListener('pointermove', this.onPanX);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        document.addEventListener('pointermove', this.onPanX);
+        document.addEventListener('pointerup', this.onPointerUp);
+    };
 
     @action
     onPanX = (e: PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        const movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
-        this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
-    }
+        const movX = (this.props.visibleStart / this.props.totalLength) * this.DEFAULT_WIDTH + e.movementX;
+        this.props.movePanX((movX / this.DEFAULT_WIDTH) * this.props.totalLength);
+    };
 
     @action
     onPointerUp = (e: PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        document.removeEventListener("pointermove", this.onPanX);
-        document.removeEventListener("pointerup", this.onPointerUp);
-    }
+        document.removeEventListener('pointermove', this.onPanX);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    };
 
     @action
     onScrubberDown = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        document.removeEventListener("pointermove", this.onScrubberMove);
-        document.removeEventListener("pointerup", this.onScrubberUp);
-        document.addEventListener("pointermove", this.onScrubberMove);
-        document.addEventListener("pointerup", this.onScrubberUp);
-    }
+        document.removeEventListener('pointermove', this.onScrubberMove);
+        document.removeEventListener('pointerup', this.onScrubberUp);
+        document.addEventListener('pointermove', this.onScrubberMove);
+        document.addEventListener('pointerup', this.onScrubberUp);
+    };
 
     @action
     onScrubberMove = (e: PointerEvent) => {
@@ -115,22 +111,22 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         const scrubberRef = this._scrubberRef.current!;
         const left = scrubberRef.getBoundingClientRect().left;
         const offsetX = Math.round(e.clientX - left);
-        this.props.changeCurrentBarX((((offsetX) / this.activeOverviewWidth) * this.props.totalLength) + this.props.currentBarX);
-    }
+        this.props.changeCurrentBarX((offsetX / this.activeOverviewWidth) * this.props.totalLength + this.props.currentBarX);
+    };
 
     @action
     onScrubberUp = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        document.removeEventListener("pointermove", this.onScrubberMove);
-        document.removeEventListener("pointerup", this.onScrubberUp);
-    }
+        document.removeEventListener('pointermove', this.onScrubberMove);
+        document.removeEventListener('pointerup', this.onScrubberUp);
+    };
 
     @action
     getTimes() {
-        const vis = KeyframeFunc.convertPixelTime(this.props.visibleLength, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
-        const x = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
-        const start = KeyframeFunc.convertPixelTime(this.props.visibleStart, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+        const vis = RegionHelpers.convertPixelTime(this.props.visibleLength, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement);
+        const x = RegionHelpers.convertPixelTime(this.props.currentBarX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement);
+        const start = RegionHelpers.convertPixelTime(this.props.visibleStart, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement);
         this.visibleTime = vis;
         this.currentX = x;
         this.visibleStart = start;
@@ -144,7 +140,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         const visibleBarWidth = percentVisible * this.activeOverviewWidth;
 
         const percentScrubberStart = this.currentX / this.props.time;
-        let scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
+        let scrubberStart = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth;
         if (scrubberStart > this.activeOverviewWidth) scrubberStart = this.activeOverviewWidth;
 
         const percentBarStart = this.visibleStart / this.props.time;
@@ -153,29 +149,25 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         let playWidth = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth;
         if (playWidth > this.activeOverviewWidth) playWidth = this.activeOverviewWidth;
 
-        const timeline = this.props.isAuthoring ? [
-
-            <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview" ref={this.authoringContainer}>
-                <div ref={this._visibleRef} key="1" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
-                <div ref={this._scrubberRef} key="2" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
-                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
-                </div>
-            </div>
-        ] : [
-                <div key="1" className="timeline-play-bar overviewBar" id="timelinePlay" ref={this.playbackContainer}>
-                    <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div>
-                </div>,
-                <div key="2" className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>
-            ];
+        const timeline = this.props.isAuthoring
+            ? [
+                  <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview" ref={this.authoringContainer}>
+                      <div ref={this._visibleRef} key="1" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
+                      <div ref={this._scrubberRef} key="2" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
+                          <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
+                      </div>
+                  </div>,
+              ]
+            : [
+                  <div key="1" className="timeline-play-bar overviewBar" id="timelinePlay" ref={this.playbackContainer}>
+                      <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div>
+                  </div>,
+                  <div key="2" className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>,
+              ];
         return (
             <div className="timeline-flex">
-                <div className="timelineOverview-bounding">
-                    {timeline}
-                </div>
+                <div className="timelineOverview-bounding">{timeline}</div>
             </div>
         );
     }
-
 }
-
-
-- 
cgit v1.2.3-70-g09d2