WIP: refactor sequencing non-scalars - 3

theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx

@@ -56,7 +56,6 @@ const GraphEditorDotNonScalar: React.FC<IProps> = (props) => {
 
   const {index, trackData} = props
   const cur = trackData.keyframes[index]
-  const next = trackData.keyframes[index + 1]
 
   const [contextMenu] = useKeyframeContextMenu(node, props)
 

theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorNonScalarDash.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import styled from 'styled-components'
+import type KeyframeEditor from './KeyframeEditor'
+import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Historic'
+import {transformBox} from './Curve'
+
+export const dotSize = 6
+
+const SVGPath = styled.path`
+  stroke-width: 2;
+  stroke: var(--main-color);
+  stroke-dasharray: 3 2;
+  fill: none;
+  vector-effect: non-scaling-stroke;
+  opacity: 0.3;
+`
+
+type IProps = Parameters<typeof KeyframeEditor>[0]
+
+const GraphEditorNonScalarDash: React.FC<IProps> = (props) => {
+  const {index, trackData} = props
+
+  const pathD = `M 0 0 L 1 1`
+
+  const transform = transformBox(
+    trackData.keyframes[index].position,
+    props.extremumSpace.fromValueSpace(0),
+    0,
+    props.extremumSpace.fromValueSpace(1) -
+      props.extremumSpace.fromValueSpace(0),
+  )
+
+  return (
+    <>
+      <SVGPath
+        d={pathD}
+        style={{
+          transform,
+        }}
+      />
+    </>
+  )
+}
+
+export default GraphEditorNonScalarDash

theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/KeyframeEditor.tsx

@@ -14,6 +14,7 @@ import Curve from './Curve'
 import CurveHandle from './CurveHandle'
 import GraphEditorDotScalar from './GraphEditorDotScalar'
 import GraphEditorDotNonScalar from './GraphEditorDotNonScalar'
+import GraphEditorNonScalarDash from './GraphEditorNonScalarDash'
 
 const Container = styled.g`
   /* position: absolute; */
@@ -55,12 +56,8 @@ const KeyframeEditor: React.FC<{
       ) : (
         <>
           <GraphEditorDotNonScalar {...props} which="left" />
-          {shouldShowCurve && (
-            <GraphEditorDotNonScalar
-              {...{...props, index: index + 1, keyframe: next}}
-              which="right"
-            />
-          )}
+          <GraphEditorDotNonScalar {...props} which="right" />
+          <GraphEditorNonScalarDash {...props} />
         </>
       )}
     </Container>