magic numbers

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

@@ -1424,10 +1424,11 @@ export class AnimationCurveEditorComponent extends React.Component<
     }
 
     changeAnimationLimit(limit: number) {
+        const doubleLimit = limit * 2;
         this.setState({
             animationLimit: limit,
-            canvasLength: limit * 2,
-            frameAxisLength: this.setFrameAxis(limit * 2),
+            canvasLength: doubleLimit,
+            frameAxisLength: this.setFrameAxis(doubleLimit),
         });
     }
 

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

@@ -14,6 +14,7 @@ interface IControlsProps {
 }
 
 export class Controls extends React.Component<IControlsProps, { selected: IAnimationKey; playingType: string }> {
+    readonly _sizeOfKeyframe: number = 5;
     constructor(props: IControlsProps) {
         super(props);
         if (this.props.selected !== null) {
@@ -61,7 +62,7 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
                 this.props.onCurrentFrameChange(first.frame);
                 this.props.repositionCanvas(first.frame);
                 this.setState({ selected: first });
-                (this.props.scrollable.current as HTMLDivElement).scrollLeft = first.frame * 5;
+                (this.props.scrollable.current as HTMLDivElement).scrollLeft = first.frame * this._sizeOfKeyframe;
             }
         }
     }
@@ -74,7 +75,7 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
                 this.props.onCurrentFrameChange(first.frame);
                 this.props.repositionCanvas(first.frame);
                 this.setState({ selected: first });
-                (this.props.scrollable.current as HTMLDivElement).scrollLeft = -(first.frame * 5);
+                (this.props.scrollable.current as HTMLDivElement).scrollLeft = -(first.frame * this._sizeOfKeyframe);
             }
         }
     }

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

@@ -29,6 +29,10 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
     private _panStop: Vector2;
     private _playheadDrag: number;
     private _playheadSelected: boolean;
+    private _movedX: number;
+    private _movedY: number;
+    readonly _dragBuffer: number;
+    readonly _draggingMultiplier: number;
 
     constructor(props: ISvgDraggableAreaProps) {
         super(props);
@@ -39,6 +43,10 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
         this._panStop = new Vector2(0, 0);
         this._playheadDrag = 0;
         this._playheadSelected = false;
+        this._movedX = 0;
+        this._movedY = 0;
+        this._dragBuffer = 4;
+        this._draggingMultiplier = 3;
 
         this.state = { panX: 0, panY: 0 };
     }
@@ -146,8 +154,8 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
         this._panStop.set(0, 0);
         this._playheadDrag = 0;
         this._playheadSelected = false;
-        this.movedX = 0;
-        this.movedY = 0;
+        this._movedX = 0;
+        this._movedY = 0;
     }
 
     getMousePosition(e: React.TouchEvent<SVGSVGElement>): Vector2 | undefined;
@@ -170,38 +178,36 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
         }
     }
 
-    private movedX = 0;
-    private movedY = 0;
     panDirection() {
         let directionX = 1;
-        if (this.movedX < this._panStop.x) {
+        if (this._movedX < this._panStop.x) {
             directionX = -1; //left
         } else {
             directionX = 1; //right
         }
 
         let directionY = 1;
-        if (this.movedY < this._panStop.y) {
+        if (this._movedY < this._panStop.y) {
             directionY = -1; //top
         } else {
             directionY = 1; //bottom
         }
 
-        const bufferX = Math.abs(this.movedX - this._panStop.x);
-        const bufferY = Math.abs(this.movedY - this._panStop.y);
+        const bufferX = Math.abs(this._movedX - this._panStop.x);
+        const bufferY = Math.abs(this._movedY - this._panStop.y);
 
         let xMulti = 0;
-        if (bufferX > 4) {
-            xMulti = 3;
+        if (bufferX > this._dragBuffer) {
+            xMulti = this._draggingMultiplier;
         }
 
         let yMulti = 0;
-        if (bufferY > 4) {
-            yMulti = 3;
+        if (bufferY > this._dragBuffer) {
+            yMulti = this._draggingMultiplier;
         }
 
-        this.movedX = this._panStop.x;
-        this.movedY = this._panStop.y;
+        this._movedX = this._panStop.x;
+        this._movedY = this._panStop.y;
 
         let newX = this.state.panX + directionX * xMulti;
         let newY = this.state.panY + directionY * yMulti;

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

@@ -36,6 +36,7 @@ export class Timeline extends React.Component<
     private _scrolling: boolean;
     private _shiftX: number;
     private _active: string = "";
+    readonly _marginScrollbar: number;
 
     constructor(props: ITimelineProps) {
         super(props);
@@ -47,6 +48,7 @@ export class Timeline extends React.Component<
         this._direction = 0;
         this._scrolling = false;
         this._shiftX = 0;
+        this._marginScrollbar = 3;
 
         const limit = Math.round(this.props.animationLimit / 2);
 
@@ -102,7 +104,7 @@ export class Timeline extends React.Component<
                     scrollWidth: this.calculateScrollWidth(0, newEnd),
                 });
                 if (this._scrollbarHandle.current && this._scrollContainer.current) {
-                    this._scrollbarHandle.current.style.left = `${this._scrollContainer.current.getBoundingClientRect().left + 3}px`;
+                    this._scrollbarHandle.current.style.left = `${this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar}px`;
                 }
             }
         );
@@ -110,7 +112,7 @@ export class Timeline extends React.Component<
 
     calculateScrollWidth(start: number, end: number) {
         if (this._scrollContainer.current && this.props.animationLimit !== 0) {
-            const containerMarginLeftRight = 6;
+            const containerMarginLeftRight = this._marginScrollbar * 2;
             const containerWidth = this._scrollContainer.current.clientWidth - containerMarginLeftRight;
             const scrollFrameLimit = this.props.animationLimit;
             const scrollFrameLength = end - start;
@@ -265,7 +267,7 @@ export class Timeline extends React.Component<
             const moved = pageX - this._shiftX;
             const scrollContainerWith = this._scrollContainer.current.clientWidth;
             const startPixel = moved - this._scrollContainer.current.getBoundingClientRect().left;
-            const limitRight = scrollContainerWith - (this.state.scrollWidth || 0) - 3;
+            const limitRight = scrollContainerWith - (this.state.scrollWidth || 0) - this._marginScrollbar;
 
             if (moved > 233 && startPixel < limitRight) {
                 this._scrollbarHandle.current.style.left = moved + "px";
@@ -330,7 +332,7 @@ export class Timeline extends React.Component<
             }
 
             if (!(framesTo >= this.state.end - 20)) {
-                let toleft = framesTo * unit + this._scrollContainer.current.getBoundingClientRect().left + 6;
+                let toleft = framesTo * unit + this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar * 2;
                 if (this._scrollbarHandle.current) {
                     this._scrollbarHandle.current.style.left = toleft + "px";
                 }