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 = (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[0] + +const GraphEditorNonScalarDash: React.FC = (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 ( + <> + + + ) +} + +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<{ ) : ( <> - {shouldShowCurve && ( - - )} + + )}