diff --git a/src/renderer/components/dock/dock.tsx b/src/renderer/components/dock/dock.tsx index d2149ac721..cf3336e9b4 100644 --- a/src/renderer/components/dock/dock.tsx +++ b/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 { } } - 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 { } onKeydown = (evt: React.KeyboardEvent) => { - 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") { diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.tsx b/src/renderer/components/resizing-anchor/resizing-anchor.tsx index 4450cd1fd6..f337ecf949 100644 --- a/src/renderer/components/resizing-anchor/resizing-anchor.tsx +++ b/src/renderer/components/resizing-anchor/resizing-anchor.tsx @@ -30,20 +30,37 @@ interface Props { direction: ResizeDirection; disabled?: boolean; placement?: ResizeSide; - onStart?: () => void; - onDrag?: (data: ResizeEventData) => void; - onEnd?: () => void; + onStart?: (data: ResizeStartEvent) => void; + onDrag?: (data: ResizeDragEvent) => 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 = { onStart: noop, onDrag: noop, @@ -53,27 +70,25 @@ const defaultProps: Partial = { } export class ResizingAnchor extends React.PureComponent { - @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("mouseup", this.onDragEnd); + document.removeEventListener("mousemove", this.onDrag) + document.removeEventListener("mouseup", this.onDragEnd) } @action onDragInit = ({ pageX, pageY, buttons }: React.MouseEvent) => { + const { onStart } = this.props + if (buttons !== 1) { return } @@ -87,35 +102,29 @@ export class ResizingAnchor extends React.PureComponent { initY: pageY } this.lastEvent = undefined - } - calculateMovement = (event: MouseEvent) => { - return { - movementX: this.lastEvent.pageX - event.pageX, - movementY: this.lastEvent.pageY - event.pageY - } + onStart(this.startingPosition) } 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() - document.removeEventListener("mousemove", this.onDrag); - document.removeEventListener("mouseup", this.onDragEnd); + onEnd(({ initX, initY, pageX, pageY })) + document.removeEventListener("mousemove", this.onDrag) + document.removeEventListener("mouseup", this.onDragEnd) document.body.classList.remove(ResizingAnchor.IS_RESIZING) }