From 2e02c2e2beab60eef2cea6d556704219fc9d4d7c Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Sun, 14 Nov 2021 21:19:35 +0100
Subject: [PATCH] WIP: refactor sequencing non-scalars - 3

---
 .../GraphEditorDotNonScalar.tsx               |  1 -
 .../GraphEditorNonScalarDash.tsx              | 45 +++++++++++++++++++
 .../KeyframeEditor/KeyframeEditor.tsx         |  9 ++--
 3 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorNonScalarDash.tsx

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx
index b8e736a..8d1459e 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx
+++ b/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)
 
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorNonScalarDash.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorNonScalarDash.tsx
new file mode 100644
index 0000000..7c2645d
--- /dev/null
+++ b/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
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/KeyframeEditor.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/KeyframeEditor.tsx
index 0eb956b..3425b6f 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/KeyframeEditor.tsx
+++ b/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>