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

SequenceEditorPanel has a slightly more minimal look now

Browse source
This commit is contained in:
Aria Minaei 2021-07-16 15:58:20 +02:00
parent f9e32fbade
commit d98ab07cbe
8 changed files with 19 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/BottomRectangleThingy.tsx
View file

@ -1,71 +0,0 @@
import type {Pointer} from '@theatre/dataverse'
import {val} from '@theatre/dataverse'
import {usePrism} from '@theatre/dataverse-react'
import {theme} from '@theatre/studio/css'
import React from 'react'
import styled from 'styled-components'
import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
import GraphEditorToggle from './GraphEditorToggle'
const Container = styled.div<{graphEditorOpen: boolean}>`
position: absolute;
z-index: ${() => zIndexes.bottomRectangleThingy};
background: ${theme.panel.bg};
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.45);
border-bottom: ${({graphEditorOpen}) =>
graphEditorOpen ? '1px solid rgba(0, 0, 0, 0.45)' : 'none'};
`
const Left = styled.div`
position: absolute;
top: 0;
bottom: 0;
`
const Right = styled.div`
position: absolute;
top: 0;
bottom: 0;
display: flex;
`
const BottomRectangleThingy: React.FC<{
layoutP: Pointer<SequenceEditorPanelLayout>
}> = ({layoutP}) => {
const {dims, leftWidth, rightWidth, graphEditorOpen} = usePrism(() => {
return {
dims: val(layoutP.bottomRectangleThingyDims),
leftWidth: val(layoutP.leftDims.width),
rightWidth: val(layoutP.rightDims.width),
graphEditorOpen: val(layoutP.graphEditorDims.isOpen),
}
}, [layoutP])
return (
<Container
graphEditorOpen={graphEditorOpen}
style={{
width: dims.width + 'px',
height: dims.height + 'px',
bottom: dims.bottom + 'px',
}}
>
<Left
style={{
width: leftWidth + 'px',
left: 0 + 'px',
}}
></Left>
<Right
style={{
left: leftWidth + 'px',
width: rightWidth + 'px',
}}
>
<GraphEditorToggle layoutP={layoutP} />
</Right>
</Container>
)
}
export default BottomRectangleThingy

4
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx
View file

@ -3,7 +3,7 @@ import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEdi
import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
import {useVal} from '@theatre/dataverse-react'
import type {Pointer} from '@theatre/dataverse'
import {darken} from 'polished'
import {darken, transparentize} from 'polished'
import React from 'react'
import styled from 'styled-components'
import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid'
@ -16,7 +16,7 @@ const Container = styled.div<{width: number}>`
bottom: 0;
z-index: ${() => zIndexes.rightBackground};
overflow: hidden;
background: ${darken(1 * 0.03, theme.panel.bg)};
background: ${transparentize(0.01, darken(1 * 0.03, theme.panel.bg))};
pointer-events: none;
`

8
theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx
View file

@ -106,16 +106,10 @@ const pointerPositionInUnitSpace = (
const {clientX, clientY} = val(mousePositionD)
const {screenX: x, screenY: y, width: rightWidth, height} = rightDims
const bottomRectangleThingyDims = val(layoutP.bottomRectangleThingyDims)
if (
inRange(clientX, x, x + rightWidth) &&
inRange(clientY, y, y + height) &&
!inRange(
clientY,
bottomRectangleThingyDims.screenY,
bottomRectangleThingyDims.screenY + bottomRectangleThingyDims.height,
)
inRange(clientY, y, y + height)
) {
const posInRightDims = clientX - x
const posInUnitSpace = clippedSpaceToUnitSpace(posInRightDims)

3
theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx
View file

@ -12,6 +12,7 @@ import {contentWidth} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet
import HorizontallyScrollableArea from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea'
import PrimitivePropGraph from './PrimitivePropGraph'
import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid'
import {transparentize} from 'polished'
export const graphEditorColors = {
'1': {iconColor: '#b98b08'},
@ -26,7 +27,7 @@ const Container = styled.div`
position: absolute;
right: 0;
bottom: 0;
background: #1a1c1e;
background: ${transparentize(0.03, '#1a1c1e')};
`
const SVGContainer = styled.svg`

12
theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx → theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
View file

@ -6,12 +6,16 @@ import React, {useCallback} from 'react'
import styled from 'styled-components'
import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
const Container = styled.button<{isOpen: boolean}>`
height: 100%;
border: none;
const Container = styled.button`
outline: none;
background: ${(props) => (props.isOpen ? '#1A1C1E' : '#212327')};
background-color: #1c1d21;
border: 1px solid #191919;
border-radius: 2px;
display: flex;
bottom: 14px;
right: 8px;
z-index: 1;
position: absolute;
padding: 0 8px;
display: flex;

8
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx
View file

@ -93,16 +93,10 @@ const usePointerPositionInUnitSpace = (
const {clientX, clientY} = val(mousePositionD)
const {screenX: x, screenY: y, width: rightWidth, height} = rightDims
const bottomRectangleThingyDims = val(layoutP.bottomRectangleThingyDims)
if (
inRange(clientX, x, x + rightWidth) &&
inRange(clientY, y, y + height) &&
!inRange(
clientY,
bottomRectangleThingyDims.screenY,
bottomRectangleThingyDims.screenY + bottomRectangleThingyDims.height,
)
inRange(clientY, y, y + height)
) {
const posInRightDims = clientX - x
const posInUnitSpace = clippedSpaceToUnitSpace(posInRightDims)

5
theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
View file

@ -24,6 +24,7 @@ import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import type Sheet from '@theatre/core/sheets/Sheet'
import {isSheet, isSheetObject} from '@theatre/shared/instanceTypes'
import {uniq} from 'lodash-es'
import GraphEditorToggle from './GraphEditorToggle'
const Container = styled(PanelWrapper)``
@ -46,7 +47,6 @@ export const zIndexes = (() => {
const currentFrameStamp = seeker + 1
const lengthIndicator = currentFrameStamp + 1
const horizontalScrollbar = lengthIndicator + 1
const bottomRectangleThingy = horizontalScrollbar + 1
return {
scrollableArea,
@ -56,7 +56,6 @@ export const zIndexes = (() => {
horizontalScrollbar,
currentFrameStamp,
lengthIndicator,
bottomRectangleThingy,
}
})()
@ -155,10 +154,10 @@ const Content: React.FC<{}> = () => {
<FrameStampPositionProvider layoutP={layoutP}>
<Header layoutP={layoutP} />
<DopeSheet key={key + '-dopeSheet'} layoutP={layoutP} />
{/* <BottomRectangleThingy layoutP={layoutP} /> */}
{graphEditorOpen && (
<GraphEditor key={key + '-graphEditor'} layoutP={layoutP} />
)}
<GraphEditorToggle layoutP={layoutP} />
<RightOverlay layoutP={layoutP} />
</FrameStampPositionProvider>
</Container>

22
theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts
View file

@ -68,7 +68,6 @@ export type SequenceEditorPanelLayout = {
isOpen: boolean
padding: {top: number; bottom: number}
}
bottomRectangleThingyDims: DimsOfPanelPart & {bottom: number}
horizontalScrollbarDims: {bottom: number}
graphEditorVerticalSpace: {
space: number
@ -136,7 +135,6 @@ export function sequenceEditorPanelLayout(
rightDims,
graphEditorDims,
dopeSheetDims,
bottomRectangleThingyDims,
horizontalScrollbarDims,
} = prism.memo(
'leftDims',
@ -156,25 +154,15 @@ export function sequenceEditorPanelLayout(
}
const graphEditorOpen = graphEditorState?.isOpen === true
const bottomRectangleThingyHeight = 0
const graphEditorHeight = Math.floor(
(graphEditorOpen
? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7)
: 0) * panelDims.heightWithoutBorder,
)
const bottomHeight = bottomRectangleThingyHeight + graphEditorHeight
const bottomHeight = 0 + graphEditorHeight
const dopeSheetHeight = panelDims.height - bottomHeight
const bottomRectangleThingyDims: SequenceEditorPanelLayout['bottomRectangleThingyDims'] =
{
width: panelDims.width,
height: bottomRectangleThingyHeight,
screenX: panelDims.screenX,
screenY: panelDims.screenY + dopeSheetHeight,
bottom: graphEditorHeight,
}
const dopeSheetDims: SequenceEditorPanelLayout['dopeSheetDims'] = {
width: panelDims.width,
height: dopeSheetHeight,
@ -188,9 +176,7 @@ export function sequenceEditorPanelLayout(
width: rightDims.width,
height: graphEditorHeight,
screenX: panelDims.screenX,
screenY:
bottomRectangleThingyDims.screenY +
bottomRectangleThingyDims.height,
screenY: panelDims.screenY + dopeSheetHeight,
padding: {
top: 20,
bottom: 20,
@ -199,7 +185,7 @@ export function sequenceEditorPanelLayout(
const horizontalScrollbarDims: SequenceEditorPanelLayout['horizontalScrollbarDims'] =
{
bottom: graphEditorOpen ? 0 : bottomRectangleThingyDims.height,
bottom: graphEditorOpen ? 0 : 0,
}
return {
@ -207,7 +193,6 @@ export function sequenceEditorPanelLayout(
rightDims,
graphEditorDims,
dopeSheetDims,
bottomRectangleThingyDims,
horizontalScrollbarDims,
}
},
@ -337,7 +322,6 @@ export function sequenceEditorPanelLayout(
leftDims,
rightDims,
dopeSheetDims,
bottomRectangleThingyDims,
horizontalScrollbarDims,
seeker,
unitSpace,