Apply common sense constraints to window drag and resize (theatre-js#309

) * Apply common sense constraints to window drag and resize * Also apply the constraints to FocusRangeZone's panelMoveGestureHandlers
ehtick · Oct 7, 2022 · 25cf1d7 · 25cf1d7
1 parent 3ec8c20
commit 25cf1d7
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,