diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator.tsx index 666f425..70a3a92 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator.tsx @@ -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 }> = ({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 ( - { - // getStudio()!.transaction(({stateEditors}) => { - // stateEditors.coreByProject.historic.sheetsById.sequence.setLength({ - // ...sheet.address, - // length: 10, - // }) - // }) - // }} - style={{ - height: height + 'px', - transform: `translateX(${translateX}px) scale(${scaleX}, 1)`, - }} - > + <> + + Sequence Length: {sequenceLength} + + { + // 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]) } diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx index af231c0..cbbac40 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx @@ -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}> = ({ const width = useVal(layoutP.rightDims.width) return ( - + ) } diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index f6fbf19..f8c16c2 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -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, } })()