Indicate length of the sequence
This commit is contained in:
Aria Minaei
parent
2daa270879
commit
acf0283449
3 changed files with 82 additions and 27 deletions
|
|
@ -5,19 +5,59 @@ 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 {topStripHeight} from '@theatre/studio/panels/SequenceEditorPanel/RightOverlay/TopStrip'
|
||||
|
||||
const divWidth = 1000
|
||||
const coverWidth = 1000
|
||||
|
||||
const Container = styled.div`
|
||||
const Cover = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgb(23 23 23 / 43%);
|
||||
width: ${divWidth}px;
|
||||
z-index: ${() => zIndexes.lengthIndicator};
|
||||
background-color: rgb(23 23 23 / 43%);
|
||||
width: ${coverWidth}px;
|
||||
z-index: ${() => zIndexes.lengthIndicatorCover};
|
||||
transform-origin: left top;
|
||||
`
|
||||
|
||||
const Strip = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
z-index: ${() => zIndexes.lengthIndicatorStrip};
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: ${topStripHeight}px;
|
||||
bottom: 0;
|
||||
left: -1px;
|
||||
width: 1px;
|
||||
background-color: #000000a6;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
background-color: #000000;
|
||||
}
|
||||
`
|
||||
|
||||
const Info = styled.div`
|
||||
position: absolute;
|
||||
top: ${topStripHeight + 4}px;
|
||||
font-size: 10px;
|
||||
left: 4px;
|
||||
color: gray;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
|
||||
${Strip}:hover & {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
|
||||
const LengthIndicator: React.FC<{
|
||||
layoutP: Pointer<SequenceEditorPanelLayout>
|
||||
}> = ({layoutP}) => {
|
||||
|
|
@ -25,7 +65,8 @@ const LengthIndicator: React.FC<{
|
|||
const sheet = val(layoutP.sheet)
|
||||
const height = val(layoutP.rightDims.height)
|
||||
|
||||
const startInUnitSpace = sheet.getSequence().length
|
||||
const sequenceLength = sheet.getSequence().length
|
||||
const startInUnitSpace = sequenceLength
|
||||
|
||||
let startX = val(layoutP.clippedSpace.fromUnitSpace)(startInUnitSpace)
|
||||
let endX = val(layoutP.clippedSpace.width)
|
||||
|
|
@ -38,24 +79,36 @@ const LengthIndicator: React.FC<{
|
|||
startX = 0
|
||||
}
|
||||
translateX = startX
|
||||
scaleX = (endX - startX) / divWidth
|
||||
scaleX = (endX - startX) / coverWidth
|
||||
}
|
||||
|
||||
return (
|
||||
<Container
|
||||
// onClick={() => {
|
||||
// getStudio()!.transaction(({stateEditors}) => {
|
||||
// stateEditors.coreByProject.historic.sheetsById.sequence.setLength({
|
||||
// ...sheet.address,
|
||||
// length: 10,
|
||||
// })
|
||||
// })
|
||||
// }}
|
||||
style={{
|
||||
height: height + 'px',
|
||||
transform: `translateX(${translateX}px) scale(${scaleX}, 1)`,
|
||||
}}
|
||||
></Container>
|
||||
<>
|
||||
<Strip
|
||||
title="Change Sequence Length"
|
||||
style={{
|
||||
height: height + 'px',
|
||||
transform: `translateX(${translateX === 0 ? -1000 : translateX}px)`,
|
||||
}}
|
||||
>
|
||||
<Info>Sequence Length: {sequenceLength}</Info>
|
||||
</Strip>
|
||||
<Cover
|
||||
title="Length"
|
||||
// onClick={() => {
|
||||
// getStudio()!.transaction(({stateEditors}) => {
|
||||
// stateEditors.coreByProject.historic.sheetsById.sequence.setLength({
|
||||
// ...sheet.address,
|
||||
// length: 10,
|
||||
// })
|
||||
// })
|
||||
// }}
|
||||
style={{
|
||||
height: height + 'px',
|
||||
transform: `translateX(${translateX}px) scale(${scaleX}, 1)`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}, [layoutP])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEdi
|
|||
import StampsGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/StampsGrid'
|
||||
import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone'
|
||||
|
||||
const height = 20
|
||||
export const topStripHeight = 20
|
||||
|
||||
export const topStripTheme = {
|
||||
backgroundColor: `#1f2120eb`,
|
||||
|
|
@ -18,7 +18,7 @@ const Container = styled(PanelDragZone)`
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: ${height}px;
|
||||
height: ${topStripHeight}px;
|
||||
box-sizing: border-box;
|
||||
background: ${topStripTheme.backgroundColor};
|
||||
border-bottom: 1px solid ${topStripTheme.borderColor};
|
||||
|
|
@ -31,7 +31,7 @@ const TopStrip: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
|
|||
const width = useVal(layoutP.rightDims.width)
|
||||
return (
|
||||
<Container>
|
||||
<StampsGrid layoutP={layoutP} width={width} height={height} />
|
||||
<StampsGrid layoutP={layoutP} width={width} height={topStripHeight} />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,8 +49,9 @@ export const zIndexes = (() => {
|
|||
const rightBackground = scrollableArea - 1
|
||||
const seeker = rightOverlay + 1
|
||||
const currentFrameStamp = seeker + 1
|
||||
const lengthIndicator = currentFrameStamp + 1
|
||||
const horizontalScrollbar = lengthIndicator + 1
|
||||
const lengthIndicatorCover = currentFrameStamp + 1
|
||||
const lengthIndicatorStrip = lengthIndicatorCover + 1
|
||||
const horizontalScrollbar = lengthIndicatorStrip + 1
|
||||
|
||||
return {
|
||||
scrollableArea,
|
||||
|
|
@ -59,7 +60,8 @@ export const zIndexes = (() => {
|
|||
seeker,
|
||||
horizontalScrollbar,
|
||||
currentFrameStamp,
|
||||
lengthIndicator,
|
||||
lengthIndicatorCover,
|
||||
lengthIndicatorStrip,
|
||||
}
|
||||
})()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue