From bb112d5e3c94d20cb6b3ef7d71934b9d6727c4a4 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Thu, 24 Jun 2021 19:13:36 +0200
Subject: slide creation/deletion working better but still buggy

---
 package.json     |  1 +
 pages/editor.tsx | 57 ++++++++++++++++++++++++--------------------------------
 yarn.lock        | 10 +++++++++-
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index 9d763f9..ec3c9b6 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
 		"react-use-gesture": "^9.1.3",
 		"timecode-boss": "^4.2.3",
 		"ts-json-schema-generator": "^0.93.0",
+		"use-mousetrap": "^1.0.4",
 		"uuid": "^8.3.2"
 	},
 	"devDependencies": {
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 5cdd40e..58b360d 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,8 +1,8 @@
-import { createState, Downgraded, State, useHookstate } from '@hookstate/core';
-import mousetrap from 'mousetrap';
+import { createState, Downgraded, none, State, 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 {
 	FullScreenControlsRoundedIcon,
@@ -131,12 +131,10 @@ function calculateSelectionOffsets(left: slideTypes, right: slideTypes) {
 }
 
 function TimelineKeyframe(props: {
-	slide: slide;
+	slide: anySlide;
 }) {
-	var workingTimeline = useHookstate(project).timeline.workingTimeline;
-
 	function modifySlide(newProps: Partial<anySlide>) {
-		var slide = workingTimeline.find(s => s.value.id == props.slide.id);
+		var slide = project.timeline.workingTimeline.find(s => s.value.id == props.slide.id);
 		slide.set(Object.assign({}, slide.value, newProps));
 	}
 
@@ -424,32 +422,26 @@ function TimelineSelection(props: { selectionAreaRef: Ref<ReactNode>; }) {
 		}
 	}, { domTarget: props.selectionAreaRef, eventOptions: { passive: false } });
 
-	useEffect(() => {
-		var delkeys = ['del', 'backspace'];
-		mousetrap.bind(delkeys, () => {
-			if (!project.selection.placed) return;
-
-			project.selection.slides.forEach(slide => {
-				if (!slideTypes.includes(slide.value.type)) return;
-				var index = workingTimeline.findIndex(s => s.value?.id == slide.value.id);
-				if (index == -1) return;
-				var timeline = new Array(...project.timeline.workingTimeline.value);
-				timeline.splice(index, 1);
-				workingTimeline.set(timeline);
-			});
-			project.update.refreshLiveTimeline.value();
+	useMousetrap(['del', 'backspace'], () => {
+		if (!project.selection.placed) return;
 
-			project.selection.merge({
-				placed: false,
-				hidden: true,
-				slides: [],
-			});
+		var indexOffset = 0;
+		project.selection.slides.forEach(slide => {
+			if (!slideTypes.includes(slide.value.type)) return;
+			var index = project.timeline.workingTimeline.findIndex(s => s.value?.id == slide.value.id);
+			if (index == -1) return;
+			index -= indexOffset;
+			project.timeline.workingTimeline[index].set(none);
+			indexOffset++;
 		});
+		project.update.refreshLiveTimeline.value();
 
-		return () => {
-			mousetrap.unbind(delkeys);
-		};
-	}, []);
+		project.selection.merge({
+			placed: false,
+			hidden: true,
+			slides: [],
+		});
+	});
 
 	function CustomSelection(props: {
 		x1: number;
@@ -660,13 +652,12 @@ function TimelineEditor() {
 			className='timeScale posabs a0'
 			id='timeScaleCanvas'
 			onClick={event => {
-				// place new keyframe
+				// place new keyframe / place keyframe
 				var offset = -4; // keyframe offset
 				var x = event.clientX - 240 + offset;
 				var frame = getFrameAtOffset(x, project.timeline.zoom.value) - 0.5;
 				var slide = new toolToSlide[tool.value](Math.round(frame));
-				workingTimeline[workingTimeline.value.length].set(slide);
-				workingTimeline.set(workingTimeline.value);
+				project.timeline.workingTimeline[project.timeline.workingTimeline.value.length].set(slide);
 				keyframeInAnimations[slide.id] = {
 					x: frame,
 					y: event.clientY - window.innerHeight + 210,
@@ -700,7 +691,7 @@ function TimelineEditor() {
 				style={{ '--total-frames': player.timeline?.framecount.toString() } as CSSProperties}
 			>
 				<div className='selectionarea posabs v0' ref={selectionAreaRef} />
-				{workingTimeline.value.map(slide => <TimelineKeyframe slide={slide} />)}
+				{workingTimeline.value.map(slide => <TimelineKeyframe slide={slide} key={slide.id} />)}
 				<TimelineSelection selectionAreaRef={selectionAreaRef} />
 			</div>
 		</div>
diff --git a/yarn.lock b/yarn.lock
index fd63f16..74f91f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -290,7 +290,7 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
-"@types/mousetrap@^1.6.8":
+"@types/mousetrap@^1.6.4", "@types/mousetrap@^1.6.8":
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.8.tgz#448929e6dc21126392830465fdb9d4a2cfc16a88"
   integrity sha512-zTqjvgCUT5EoXqbqmd8iJMb4NJqyV/V7pK7AIKq7qcaAsJIpGlTVJS1HQM6YkdHCdnkNSbhcQI7MXYxFfE3iCA==
@@ -2306,6 +2306,14 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-mousetrap@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/use-mousetrap/-/use-mousetrap-1.0.4.tgz#9ec635821140e702cc873f41880a5cbd46d1d09a"
+  integrity sha512-+limiYsm2e1Xs/tnwfEqSCcvh6XTcfLTpCoJFA+mu+btInnlrkFkZ48DLwVGejJdvP5H3Ge79t0bcRKepncvbQ==
+  dependencies:
+    "@types/mousetrap" "^1.6.4"
+    mousetrap "^1.6.5"
+
 use-subscription@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-- 
cgit v1.2.3