jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

interactive

Browse Source 
Summary: _typescript_

Reviewed By: passy

Differential Revision: D17096587

fbshipit-source-id: 22ada6ef8f544b0c02bdf5a01e798b123fa6b238
This commit is contained in:
Daniel Büchele
2019-09-02 02:27:50 -07:00
committed by Facebook Github Bot
parent f716c34295
commit 4453dec778
1 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/ui/components/Interactive.tsx
View File

@@ -80,7 +80,7 @@ type InteractiveState = {
moving: boolean; moving: boolean;
movingInitialProps: InteractiveProps | null | undefined; movingInitialProps: InteractiveProps | null | undefined;
movingInitialCursor: CursorState | null | undefined; movingInitialCursor: CursorState | null | undefined;
cursor: string | null | undefined; cursor: string | undefined;
resizingSides: ResizingSides; resizingSides: ResizingSides;
couldResize: boolean; couldResize: boolean;
resizing: boolean; resizing: boolean;
@@ -101,7 +101,7 @@ export default class Interactive extends React.Component<
this.state = { this.state = {
couldResize: false, couldResize: false,
cursor: null, cursor: undefined,
moving: false, moving: false,
movingInitialCursor: null, movingInitialCursor: null,
movingInitialProps: null, movingInitialProps: null,
@@ -115,7 +115,7 @@ export default class Interactive extends React.Component<
} }
globalMouse: boolean; globalMouse: boolean;
ref: HTMLElement; ref: HTMLElement | undefined;
nextTop: number | null | undefined; nextTop: number | null | undefined;
nextLeft: number | null | undefined; nextLeft: number | null | undefined;
@@ -222,9 +222,11 @@ export default class Interactive extends React.Component<
} }
const win = siblings[key]; const win = siblings[key];
const distance = getDistanceTo(rect, win); if (win) {
if (distance <= SNAP_SIZE) { const distance = getDistanceTo(rect, win);
closeWindows.push(win); if (distance <= SNAP_SIZE) {
closeWindows.push(win);
}
} }
} }
} }
@@ -343,11 +345,11 @@ export default class Interactive extends React.Component<
const {clientX: cursorLeft, clientY: cursorTop} = event; const {clientX: cursorLeft, clientY: cursorTop} = event;
const movedLeft = movingInitialCursor.left - cursorLeft; const movedLeft = movingInitialCursor!.left - cursorLeft;
const movedTop = movingInitialCursor.top - cursorTop; const movedTop = movingInitialCursor!.top - cursorTop;
let newLeft = (movingInitialProps.left || 0) - movedLeft; let newLeft = (movingInitialProps!.left || 0) - movedLeft;
let newTop = (movingInitialProps.top || 0) - movedTop; let newTop = (movingInitialProps!.top || 0) - movedTop;
if (event.altKey) { if (event.altKey) {
const snapProps = this.getRect(); const snapProps = this.getRect();
@@ -372,8 +374,8 @@ export default class Interactive extends React.Component<
return; return;
} }
width = Math.max(this.props.minWidth, width); width = Math.max(this.props.minWidth || 0, width);
height = Math.max(this.props.minHeight, height); height = Math.max(this.props.minHeight || 0, height);
const {maxHeight, maxWidth} = this.props; const {maxHeight, maxWidth} = this.props;
if (maxWidth != null) { if (maxWidth != null) {
@@ -387,8 +389,8 @@ export default class Interactive extends React.Component<
} }
move(top: number, left: number, event: MouseEvent) { move(top: number, left: number, event: MouseEvent) {
top = Math.max(this.props.minTop, top); top = Math.max(this.props.minTop || 0, top);
left = Math.max(this.props.minLeft, left); left = Math.max(this.props.minLeft || 0, left);
if (top === this.props.top && left === this.props.left) { if (top === this.props.top && left === this.props.left) {
// noop // noop
@@ -412,36 +414,36 @@ export default class Interactive extends React.Component<
invariant(resizingInitialCursor, 'TODO'); invariant(resizingInitialCursor, 'TODO');
invariant(resizingSides, 'TODO'); invariant(resizingSides, 'TODO');
const deltaLeft = resizingInitialCursor.left - event.clientX; const deltaLeft = resizingInitialCursor!.left - event.clientX;
const deltaTop = resizingInitialCursor.top - event.clientY; const deltaTop = resizingInitialCursor!.top - event.clientY;
let newLeft = resizingInitialRect.left; let newLeft = resizingInitialRect!.left;
let newTop = resizingInitialRect.top; let newTop = resizingInitialRect!.top;
let newWidth = resizingInitialRect.width; let newWidth = resizingInitialRect!.width;
let newHeight = resizingInitialRect.height; let newHeight = resizingInitialRect!.height;
// right // right
if (resizingSides.right === true) { if (resizingSides!.right === true) {
newWidth -= deltaLeft; newWidth -= deltaLeft;
} }
// bottom // bottom
if (resizingSides.bottom === true) { if (resizingSides!.bottom === true) {
newHeight -= deltaTop; newHeight -= deltaTop;
} }
const rect = this.getRect(); const rect = this.getRect();
// left // left
if (resizingSides.left === true) { if (resizingSides!.left === true) {
newLeft -= deltaLeft; newLeft -= deltaLeft;
newWidth += deltaLeft; newWidth += deltaLeft;
if (this.props.movable === true) { if (this.props.movable === true) {
// prevent from being shrunk past the minimum width // prevent from being shrunk past the minimum width
const right = rect.left + rect.width; const right = rect.left + rect.width;
const maxLeft = right - this.props.minWidth; const maxLeft = right - (this.props.minWidth || 0);
let cleanLeft = Math.max(0, newLeft); let cleanLeft = Math.max(0, newLeft);
cleanLeft = Math.min(cleanLeft, maxLeft); cleanLeft = Math.min(cleanLeft, maxLeft);
@@ -451,14 +453,14 @@ export default class Interactive extends React.Component<
} }
// top // top
if (resizingSides.top === true) { if (resizingSides!.top === true) {
newTop -= deltaTop; newTop -= deltaTop;
newHeight += deltaTop; newHeight += deltaTop;
if (this.props.movable === true) { if (this.props.movable === true) {
// prevent from being shrunk past the minimum height // prevent from being shrunk past the minimum height
const bottom = rect.top + rect.height; const bottom = rect.top + rect.height;
const maxTop = bottom - this.props.minHeight; const maxTop = bottom - (this.props.minHeight || 0);
let cleanTop = Math.max(0, newTop); let cleanTop = Math.max(0, newTop);
cleanTop = Math.min(cleanTop, maxTop); cleanTop = Math.min(cleanTop, maxTop);
@@ -470,23 +472,23 @@ export default class Interactive extends React.Component<
if (event.altKey) { if (event.altKey) {
const windows = this.getPossibleTargetWindows(rect); const windows = this.getPossibleTargetWindows(rect);
if (resizingSides.left === true) { if (resizingSides!.left === true) {
const newLeft2 = maybeSnapLeft(rect, windows, newLeft); const newLeft2 = maybeSnapLeft(rect, windows, newLeft);
newWidth += newLeft - newLeft2; newWidth += newLeft - newLeft2;
newLeft = newLeft2; newLeft = newLeft2;
} }
if (resizingSides.top === true) { if (resizingSides!.top === true) {
const newTop2 = maybeSnapTop(rect, windows, newTop); const newTop2 = maybeSnapTop(rect, windows, newTop);
newHeight += newTop - newTop2; newHeight += newTop - newTop2;
newTop = newTop2; newTop = newTop2;
} }
if (resizingSides.bottom === true) { if (resizingSides!.bottom === true) {
newHeight = maybeSnapTop(rect, windows, newTop + newHeight) - newTop; newHeight = maybeSnapTop(rect, windows, newTop + newHeight) - newTop;
} }
if (resizingSides.right === true) { if (resizingSides!.right === true) {
newWidth = maybeSnapLeft(rect, windows, newLeft + newWidth) - newLeft; newWidth = maybeSnapLeft(rect, windows, newLeft + newWidth) - newLeft;
} }
} }
@@ -500,10 +502,10 @@ export default class Interactive extends React.Component<
invariant(ref, 'expected ref'); invariant(ref, 'expected ref');
return { return {
height: ref.offsetHeight || 0, height: ref!.offsetHeight || 0,
left: props.left || 0, left: props.left || 0,
top: props.top || 0, top: props.top || 0,
width: ref.offsetWidth || 0, width: ref!.offsetWidth || 0,
}; };
} }
@@ -534,6 +536,10 @@ export default class Interactive extends React.Component<
return; return;
} }
if (!this.ref) {
return;
}
const {left: offsetLeft, top: offsetTop} = this.ref.getBoundingClientRect(); const {left: offsetLeft, top: offsetTop} = this.ref.getBoundingClientRect();
const {height, width} = this.getRect(); const {height, width} = this.getRect();