Indicate length of the sequence

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<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,11 +79,22 @@ const LengthIndicator: React.FC<{
         startX = 0
       }
       translateX = startX
-      scaleX = (endX - startX) / divWidth
+      scaleX = (endX - startX) / coverWidth
     }
 
     return (
-      <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({
@@ -55,7 +107,8 @@ const LengthIndicator: React.FC<{
             height: height + 'px',
             transform: `translateX(${translateX}px) scale(${scaleX}, 1)`,
           }}
-      ></Container>
+        />
+      </>
     )
   }, [layoutP])
 }

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<SequenceEditorPanelLayout>}> = ({
   const width = useVal(layoutP.rightDims.width)
   return (
     <Container>
-      <StampsGrid layoutP={layoutP} width={width} height={height} />
+      <StampsGrid layoutP={layoutP} width={width} height={topStripHeight} />
     </Container>
   )
 }

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