cleanup types and revert data for the onStart and onEnd events

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/dock/dock.tsx

@@ -4,7 +4,7 @@ import React, { Fragment } from "react";
 import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { autobind, cssNames, prevDefault } from "../../utils";
-import { ResizingAnchor, ResizeEventData, ResizeDirection, ResizeSide } from "../resizing-anchor";
+import { ResizingAnchor, ResizeDragEvent, ResizeDirection } from "../resizing-anchor";
 import { Icon } from "../icon";
 import { Tabs } from "../tabs/tabs";
 import { MenuItem } from "../menu";
@@ -37,7 +37,7 @@ export class Dock extends React.Component<Props> {
     }
   }
 
-  onResize = ({ movementY }: ResizeEventData) => {
+  onResize = ({ movementY }: ResizeDragEvent) => {
     const { isOpen, close, height, setHeight, minHeight, defaultHeight } = dockStore;
     console.log(height, movementY)
     const newHeight = height + movementY;
@@ -51,7 +51,7 @@ export class Dock extends React.Component<Props> {
   }
 
   onKeydown = (evt: React.KeyboardEvent<HTMLElement>) => {
-    const { close, closeTab, selectedTab, fullSize, toggleFillSize } = dockStore;
+    const { close, closeTab, selectedTab } = dockStore;
     if (!selectedTab) return;
     const { code, ctrlKey, shiftKey } = evt.nativeEvent;
     if (shiftKey && code === "Escape") {

src/renderer/components/resizing-anchor/resizing-anchor.tsx

@@ -30,20 +30,37 @@ interface Props {
   direction: ResizeDirection;
   disabled?: boolean;
   placement?: ResizeSide;
-  onStart?: () => void;
+  onStart?: (data: ResizeStartEvent) => void;
-  onDrag?: (data: ResizeEventData) => void;
+  onDrag?: (data: ResizeDragEvent) => void;
-  onEnd?: () => void;
+  onEnd?: (data: ResizeEndEvent) => void;
 }
 
-export interface ResizeEventData {
+interface InitialPosition {
   initX: number;
   initY: number;
+}
+
+interface CurrentPosition {
   pageX: number;
   pageY: number;
+}
+
+interface MovementData {
   movementX: number;
   movementY: number;
 }
 
+export type ResizeStartEvent = InitialPosition
+export type ResizeDragEvent = InitialPosition & CurrentPosition & MovementData
+export type ResizeEndEvent = InitialPosition & CurrentPosition
+
+function calculateMovement(from: CurrentPosition, to: CurrentPosition): MovementData {
+  return {
+    movementX: from.pageX - to.pageX,
+    movementY: from.pageY - to.pageY,
+  }
+}
+
 const defaultProps: Partial<Props> = {
   onStart: noop,
   onDrag: noop,
@@ -53,27 +70,25 @@ const defaultProps: Partial<Props> = {
 }
 
 export class ResizingAnchor extends React.PureComponent<Props> {
-  @observable startingPosition?: { initX: number, initY: number };
+  @observable startingPosition?: ResizeStartEvent
   @observable lastEvent?: MouseEvent
 
-  @computed get firstDragEvent() {
-    return this.lastEvent == null
-  }
-
   static defaultProps = defaultProps
   static IS_RESIZING = "resizing"
 
   constructor(props: Props) {
-    super(props);
+    super(props)
   }
 
   componentWillUnmount() {
-    document.removeEventListener("mousemove", this.onDrag);
+    document.removeEventListener("mousemove", this.onDrag)
-    document.removeEventListener("mouseup", this.onDragEnd);
+    document.removeEventListener("mouseup", this.onDragEnd)
   }
 
   @action
   onDragInit = ({ pageX, pageY, buttons }: React.MouseEvent<any>) => {
+    const { onStart } = this.props
+
     if (buttons !== 1) {
       return
     }
@@ -87,35 +102,29 @@ export class ResizingAnchor extends React.PureComponent<Props> {
       initY: pageY
     }
     this.lastEvent = undefined
-  }
 
-  calculateMovement = (event: MouseEvent) => {
+    onStart(this.startingPosition)
-    return {
-      movementX: this.lastEvent.pageX - event.pageX,
-      movementY: this.lastEvent.pageY - event.pageY
-    }
   }
 
   onDrag = _.throttle((event: MouseEvent) => {
-    const { onDrag, onStart } = this.props
+    const { onDrag } = this.props
     const { initX, initY } = this.startingPosition
     const { pageX, pageY } = event
+    const { movementX, movementY } = calculateMovement(this.lastEvent ?? event, event)
 
-    if (this.firstDragEvent) onStart()
-
-    const { movementX, movementY } = this.firstDragEvent ? event : this.calculateMovement(event)
     onDrag({ movementX, movementY, pageX, pageY, initY, initX })
-
     this.lastEvent = event
   }, 100)
 
   @action
   onDragEnd = (event: MouseEvent) => {
-    const { onEnd } = this.props;
+    const { onEnd } = this.props
+    const { initX, initY } = this.startingPosition
+    const { pageX, pageY } = event
 
-    onEnd()
+    onEnd(({ initX, initY, pageX, pageY }))
-    document.removeEventListener("mousemove", this.onDrag);
+    document.removeEventListener("mousemove", this.onDrag)
-    document.removeEventListener("mouseup", this.onDragEnd);
+    document.removeEventListener("mouseup", this.onDragEnd)
     document.body.classList.remove(ResizingAnchor.IS_RESIZING)
   }