From 25cf1d7fe867a4f8b9d0157267e3b4667240019d Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Fri, 7 Oct 2022 17:03:05 +0200
Subject: [PATCH] Apply common sense constraints to window drag and resize
 (#309)

* Apply common sense constraints to window drag and resize

* Also apply the constraints to FocusRangeZone's panelMoveGestureHandlers
---
 .../src/panels/BasePanel/PanelDragZone.tsx    | 14 +++++++++++--
 .../panels/BasePanel/PanelResizeHandle.tsx    | 20 +++++++++++++++----
 .../studio/src/panels/BasePanel/common.tsx    |  2 ++
 .../FocusRangeZone/FocusRangeZone.tsx         | 13 ++++++++++--
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx b/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
index 7dcad76..64e7eeb 100644
--- a/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
+++ b/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
@@ -7,6 +7,8 @@ import React, {useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {panelDimsToPanelPosition, usePanel} from './BasePanel'
 import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
+import {clamp} from 'lodash-es'
+import {visibleSize} from './common'
 
 const Container = styled.div`
   cursor: move;
@@ -35,8 +37,16 @@ const PanelDragZone: React.FC<
           onDrag(dx, dy) {
             const newDims: typeof panelStuff['dims'] = {
               ...stuffBeforeDrag.dims,
-              top: stuffBeforeDrag.dims.top + dy,
-              left: stuffBeforeDrag.dims.left + dx,
+              top: clamp(
+                stuffBeforeDrag.dims.top + dy,
+                0,
+                window.innerHeight - visibleSize,
+              ),
+              left: clamp(
+                stuffBeforeDrag.dims.left + dx,
+                -stuffBeforeDrag.dims.width + visibleSize,
+                window.innerWidth - visibleSize,
+              ),
             }
             const position = panelDimsToPanelPosition(newDims, {
               width: window.innerWidth,
diff --git a/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx b/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx
index 3687c2c..8318473 100644
--- a/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx
+++ b/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx
@@ -8,6 +8,8 @@ import React, {useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {panelDimsToPanelPosition, usePanel} from './BasePanel'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
+import {clamp} from 'lodash-es'
+import {visibleSize} from './common'
 
 const Base = styled.div`
   position: absolute;
@@ -167,9 +169,13 @@ const PanelResizeHandle: React.FC<{
               )
             } else if (which.startsWith('Top')) {
               const bottom = newDims.top + newDims.height
-              const top = Math.min(
-                bottom - stuffBeforeDrag.minDims.height,
+              const top = clamp(
                 newDims.top + dy,
+                0,
+                Math.min(
+                  bottom - stuffBeforeDrag.minDims.height,
+                  window.innerHeight - visibleSize,
+                ),
               )
               const height = bottom - top
 
@@ -179,8 +185,11 @@ const PanelResizeHandle: React.FC<{
             if (which.endsWith('Left')) {
               const right = newDims.left + newDims.width
               const left = Math.min(
-                right - stuffBeforeDrag.minDims.width,
                 newDims.left + dx,
+                Math.min(
+                  right - stuffBeforeDrag.minDims.width,
+                  window.innerWidth - visibleSize,
+                ),
               )
               const width = right - left
 
@@ -189,7 +198,10 @@ const PanelResizeHandle: React.FC<{
             } else if (which.endsWith('Right')) {
               newDims.width = Math.max(
                 newDims.width + dx,
-                stuffBeforeDrag.minDims.width,
+                Math.max(
+                  stuffBeforeDrag.minDims.width,
+                  visibleSize - stuffBeforeDrag.dims.left,
+                ),
               )
             }
 
diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx
index ccb1e74..1af4f26 100644
--- a/theatre/studio/src/panels/BasePanel/common.tsx
+++ b/theatre/studio/src/panels/BasePanel/common.tsx
@@ -59,3 +59,5 @@ export const TitleBar = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
 `
+
+export const visibleSize = 100
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeZone.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeZone.tsx
index cccc48c..5d3e29e 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeZone.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeZone.tsx
@@ -20,6 +20,7 @@ import React, {useEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
 import FocusRangeStrip, {focusRangeStripTheme} from './FocusRangeStrip'
 import FocusRangeThumb from './FocusRangeThumb'
+import {visibleSize} from '@theatre/studio/panels/BasePanel/common'
 
 const Container = styled.div<{isShiftDown: boolean}>`
   position: absolute;
@@ -186,8 +187,16 @@ function usePanelDragZoneGestureHandlers(
             onDrag(dx, dy) {
               const newDims: typeof panelStuffRef.current['dims'] = {
                 ...stuffBeforeDrag.dims,
-                top: stuffBeforeDrag.dims.top + dy,
-                left: stuffBeforeDrag.dims.left + dx,
+                top: clamp(
+                  stuffBeforeDrag.dims.top + dy,
+                  0,
+                  window.innerHeight - visibleSize,
+                ),
+                left: clamp(
+                  stuffBeforeDrag.dims.left + dx,
+                  -stuffBeforeDrag.dims.width + visibleSize,
+                  window.innerWidth - visibleSize,
+                ),
               }
               const position = panelDimsToPanelPosition(newDims, {
                 width: window.innerWidth,