From 3d1e06deb15a9f754db688b8f8569959b40a86c1 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 26 Jun 2021 12:43:53 +0200 Subject: settings adjust based on selection --- components/fadethrough.tsx | 16 ++++++----- pages/editor.tsx | 67 +++++++++++++++++++++++++++++++++++----------- styles/editor.css | 12 +++++++++ 3 files changed, 73 insertions(+), 22 deletions(-) diff --git a/components/fadethrough.tsx b/components/fadethrough.tsx index 5f5d06c..e3af4d3 100644 --- a/components/fadethrough.tsx +++ b/components/fadethrough.tsx @@ -1,18 +1,22 @@ -import Fade from '@material-ui/core/Fade'; import Grow from '@material-ui/core/Grow'; -import { ReactNode } from 'react'; +import { ReactNode, useEffect, useState } from 'react'; export default function FadeThroughTransition(props: { from: ReactNode; to: ReactNode; show: boolean; }) { + var [firstRender, setFirstRender] = useState(true); + useEffect(() => { + setTimeout(() => setFirstRender(false), 0); + }, []); + return
- +
+
{props.from}
+
+
{props.to}
- -
{props.from}
-
; } diff --git a/pages/editor.tsx b/pages/editor.tsx index b72d705..5944cd2 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -1,8 +1,9 @@ -import { createState, Downgraded, none, State, useHookstate } from '@hookstate/core'; +import { createState, Downgraded, none, PluginCallbacks, State, StateValueAtRoot, useHookstate } from '@hookstate/core'; import { CSSProperties, ReactNode, Ref, useEffect, useRef, useState } from 'react'; import { animated, useSpring } from 'react-spring'; import { useDrag } from 'react-use-gesture'; import { useMousetrap } from 'use-mousetrap'; +import { v4 as uuid } from 'uuid'; import FadeThroughTransition from '../components/fadethrough'; import { @@ -86,6 +87,10 @@ interface globalState { dialog: { projectSettings: boolean; }; + settings: { + node: ReactNode; + name: string; + }; ready: { timeline: boolean; video: { @@ -127,6 +132,10 @@ var global = createState({ playable: false, }, }, + settings: { + node: , + name: 'DefaultSettings', + }, update: { refreshLiveTimeline: () => { player.timeline.slides = Array(...(global.timeline.workingTimeline.value)); @@ -144,6 +153,22 @@ var global = createState({ }, }); +var settings = { + 'default': { + node: , + name: 'DefaultSettings', + }, + 'slide': { + node: , + name: 'SlideSettings', + }, +}; +function setSetting(name: keyof typeof settings) { + var setting = settings[name]; + if (global.settings.name.value == setting.name) return; + global.settings.set(setting); +} + interface project { timeline: timeline; } @@ -415,8 +440,10 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { if (!global.selection.active.value) global.selection.active.set(true); if (last) { global.selection.active.set(false); - if (distanceTraveled <= minDistance) global.selection.hidden.set(true); - else { + if (distanceTraveled <= minDistance) { + setSetting('default'); + global.selection.hidden.set(true); + } else { var endingFrame = startingFrame + frameWidth; var expandedTimeline = new Array(...project.timeline.slides.value); for (let i = 0; i < expandedTimeline.length; i++) { @@ -433,6 +460,7 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { ); if (keyframesInSelection.length < 1) { + setSetting('default'); global.selection.hidden.set(true); return; } @@ -465,6 +493,7 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { widthOffset, }); }, 100); + setSetting('slide'); global.selection.merge({ type: { left: left.type, @@ -1002,9 +1031,9 @@ function DefaultSettings() { ; } -function KeyframeSettings() { +function SlideSettings() { return <> -

Keyframe settings

+

Slide settings

Cool @@ -1078,6 +1107,22 @@ function Tools() {
; } +var settingsArr: ReactNode[] = [null, global.settings.node.attach(Downgraded).value]; +function SettingsPane() { + var settings = useHookstate(global).settings; + var key = uuid(); + + settingsArr[0] = settingsArr[1]; + settingsArr[1] = settings.node.attach(Downgraded).get(); + + return } + to={
} + show={true} + />; +} + export default function Index() { var playing = useHookstate(global).timeline.playing; @@ -1102,17 +1147,7 @@ export default function Index() {

pressure

-
- - -
} - to={
- -
} - show={false} - /> -
+
} />
diff --git a/styles/editor.css b/styles/editor.css index 9393227..949265d 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -490,3 +490,15 @@ z-index: 9; } +.fadeout { + transition-property: opacity; + transition-duration: 100ms; + opacity: 0; + user-select: none; + pointer-events: none; +} + +.fadeout.first { + transition-duration: 0ms; + opacity: 1; +} -- cgit v1.2.3