split ondrag to move, resize

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationCurveEditorComponent.tsx

@@ -1392,11 +1392,7 @@ export class AnimationCurveEditorComponent extends React.Component<
   }
 
   isCurrentFrame(frame: number) {
-    if (this.state.currentFrame === frame) {
-      return true;
-    } else {
-      return false;
-    }
+    return this.state.currentFrame === frame;
   }
 
   render() {

inspector/src/components/actionTabs/tabs/propertyGrids/animations/timeline.tsx

@@ -70,21 +70,16 @@ export class Timeline extends React.Component<
   }
 
   calculateScrollWidth(start: number, end: number) {
-    if (this._scrollContainer.current) {
-      if (this.props.animationLimit !== 0) {
-        const containerWidth = this._scrollContainer.current.clientWidth;
-        const scrollFrameLimit = this.props.animationLimit;
-        const scrollFrameLength = end - start;
-        const widthPercentage = (scrollFrameLength * 100) / scrollFrameLimit;
-        const scrollPixelWidth = (widthPercentage * containerWidth) / 100;
-        // check 0 values here... to avoid Infinity
-        if (scrollPixelWidth === Infinity) {
-          console.log('error infinity');
-        }
-        return scrollPixelWidth;
-      } else {
-        return undefined;
+    if (this._scrollContainer.current && this.props.animationLimit !== 0) {
+      const containerWidth = this._scrollContainer.current.clientWidth;
+      const scrollFrameLimit = this.props.animationLimit;
+      const scrollFrameLength = end - start;
+      const widthPercentage = (scrollFrameLength * 100) / scrollFrameLimit;
+      const scrollPixelWidth = (widthPercentage * containerWidth) / 100;
+      if (scrollPixelWidth === Infinity || scrollPixelWidth > containerWidth) {
+        return containerWidth;
       }
+      return scrollPixelWidth;
     } else {
       return undefined;
     }
@@ -286,101 +281,106 @@ export class Timeline extends React.Component<
   scrollDrag(e: any) {
     e.preventDefault();
     if (e.target.className === 'scrollbar') {
-      if (
-        this._scrolling &&
-        this._scrollbarHandle.current &&
-        this._scrollContainer.current
-      ) {
-        let moved = e.pageX - this._shiftX;
-
-        const scrollContainerWith = this._scrollContainer.current.clientWidth;
-        const startPixel = moved - 233;
-        const limitRight =
-          scrollContainerWith - (this.state.scrollWidth || 0) - 5;
-
-        if (moved > 233 && startPixel < limitRight) {
-          this._scrollbarHandle.current.style.left = moved + 'px';
-          (this._scrollable.current as HTMLDivElement).scrollLeft = moved + 10;
-
-          const startPixelPercent = (startPixel * 100) / scrollContainerWith;
-
-          const selectionStartFrame = Math.round(
-            (startPixelPercent * this.props.animationLimit) / 100
-          );
+      this.moveScrollbar(e.pageX);
+    }
 
-          const selectionEndFrame =
-            this.state.selectionLength.length + selectionStartFrame;
+    if (this._active === 'leftDraggable') {
+      this.resizeScrollbarLeft(e.clientX);
+    }
 
-          this.setState({
-            start: selectionStartFrame,
-            end: selectionEndFrame,
-            selectionLength: this.range(selectionStartFrame, selectionEndFrame),
-          });
-        }
-      }
+    if (this._active === 'rightDraggable') {
+      this.resizeScrollbarRight(e.clientX);
     }
+  }
 
-    if (this._active === 'leftDraggable') {
-      if (this._scrollContainer.current && this._scrollbarHandle.current) {
-        let moving =
-          e.clientX -
-          this._scrollbarHandle.current.getBoundingClientRect().left;
-        const scrollContainerWith = this._scrollContainer.current.clientWidth;
-        const pixelFrameRatio = scrollContainerWith / this.props.animationLimit;
+  scrollDragEnd(e: React.TouchEvent<HTMLDivElement>): void;
+  scrollDragEnd(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
+  scrollDragEnd(e: any) {
+    e.preventDefault();
+    this._scrolling = false;
+    this._active = '';
+    this._shiftX = 0;
+  }
 
-        let containerWidth = this.state.scrollWidth ?? 0;
-        let resizePercentage = (100 * Math.abs(moving)) / containerWidth;
+  moveScrollbar(pageX: number) {
+    if (
+      this._scrolling &&
+      this._scrollbarHandle.current &&
+      this._scrollContainer.current
+    ) {
+      const moved = pageX - this._shiftX;
+      const scrollContainerWith = this._scrollContainer.current.clientWidth;
+      const startPixel = moved - 233;
+      const limitRight =
+        scrollContainerWith - (this.state.scrollWidth || 0) - 5;
 
-        let frameChange = (resizePercentage * this.state.end) / 100;
+      if (moved > 233 && startPixel < limitRight) {
+        this._scrollbarHandle.current.style.left = moved + 'px';
+        (this._scrollable.current as HTMLDivElement).scrollLeft = moved + 10;
 
-        let framesTo;
+        const startPixelPercent = (startPixel * 100) / scrollContainerWith;
 
-        if (Math.sign(moving) === 1) {
-          framesTo = this.state.start + Math.round(frameChange);
-        } else {
-          framesTo = this.state.start - Math.round(frameChange);
-        }
-        let Toleft = framesTo * pixelFrameRatio + 233;
+        const selectionStartFrame = Math.round(
+          (startPixelPercent * this.props.animationLimit) / 100
+        );
 
-        this._scrollbarHandle.current.style.left = Toleft + 'px';
+        const selectionEndFrame =
+          this.state.selectionLength.length + selectionStartFrame;
 
         this.setState({
-          start: framesTo,
-          scrollWidth: this.calculateScrollWidth(framesTo, this.state.end),
-          selectionLength: this.range(framesTo, this.state.end),
+          start: selectionStartFrame,
+          end: selectionEndFrame,
+          selectionLength: this.range(selectionStartFrame, selectionEndFrame),
         });
       }
     }
+  }
 
-    if (this._active === 'rightDraggable') {
-      if (this._scrollContainer.current && this._scrollbarHandle.current) {
-        let moving =
-          e.clientX -
-          this._scrollbarHandle.current.getBoundingClientRect().left;
-
-        let containerWidth = this.state.scrollWidth ?? 0;
-        let resizePercentage = (100 * Math.abs(moving)) / containerWidth;
+  resizeScrollbarRight(clientX: number) {
+    if (this._scrollContainer.current && this._scrollbarHandle.current) {
+      const moving =
+        clientX - this._scrollbarHandle.current.getBoundingClientRect().left;
+
+      const containerWidth = this.state.scrollWidth ?? 0;
+      const resizePercentage = (100 * Math.abs(moving)) / containerWidth;
+      const frameChange = (resizePercentage * this.state.end) / 100;
+      const framesTo = Math.round(frameChange);
+
+      this.setState({
+        end: framesTo,
+        scrollWidth: this.calculateScrollWidth(this.state.start, framesTo),
+        selectionLength: this.range(this.state.start, framesTo),
+      });
+    }
+  }
 
-        let frameChange = (resizePercentage * this.state.end) / 100;
+  resizeScrollbarLeft(clientX: number) {
+    if (this._scrollContainer.current && this._scrollbarHandle.current) {
+      const moving =
+        clientX - this._scrollbarHandle.current.getBoundingClientRect().left;
+      const scrollContainerWith = this._scrollContainer.current.clientWidth;
+      const pixelFrameRatio = scrollContainerWith / this.props.animationLimit;
+      const containerWidth = this.state.scrollWidth ?? 0;
+      const resizePercentage = (100 * Math.abs(moving)) / containerWidth;
 
-        let framesTo = Math.round(frameChange);
+      const frameChange = (resizePercentage * this.state.end) / 100;
 
-        this.setState({
-          end: framesTo,
-          scrollWidth: this.calculateScrollWidth(this.state.start, framesTo),
-          selectionLength: this.range(this.state.start, framesTo),
-        });
+      let framesTo;
+      if (Math.sign(moving) === 1) {
+        framesTo = this.state.start + Math.round(frameChange);
+      } else {
+        framesTo = this.state.start - Math.round(frameChange);
       }
-    }
-  }
+      let Toleft = framesTo * pixelFrameRatio + 233;
 
-  scrollDragEnd(e: React.TouchEvent<HTMLDivElement>): void;
-  scrollDragEnd(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
-  scrollDragEnd(e: any) {
-    e.preventDefault();
-    this._scrolling = false;
-    this._active = '';
-    this._shiftX = 0;
+      this._scrollbarHandle.current.style.left = Toleft + 'px';
+
+      this.setState({
+        start: framesTo,
+        scrollWidth: this.calculateScrollWidth(framesTo, this.state.end),
+        selectionLength: this.range(framesTo, this.state.end),
+      });
+    }
   }
 
   range(start: number, end: number) {