variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Apply common sense constraints to window drag and resize (#309)

Browse source 
* Apply common sense constraints to window drag and resize

* Also apply the constraints to FocusRangeZone's panelMoveGestureHandlers
This commit is contained in:
Andrew Prifer 2022-10-07 17:03:05 +02:00 committed by GitHub
parent 3ec8c20fa6
commit 25cf1d7fe8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
View file

@ -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,

20
theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx
View file

@ -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,
),
)
}

2
theatre/studio/src/panels/BasePanel/common.tsx
View file

@ -59,3 +59,5 @@ export const TitleBar = styled.div`
white-space: nowrap;
text-overflow: ellipsis;
`
export const visibleSize = 100

13
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeZone.tsx
View file

@ -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,