From 4399c4a89063b9029b6176c2f89c8311f1fb6ea2 Mon Sep 17 00:00:00 2001
From: JannisX11 <jannis4236@gmail.com>
Date: Fri, 25 Sep 2020 22:06:03 +0200
Subject: [PATCH] Highlight panel sorting and drop zones

---
 css/panels.css            | 21 +++++++++++++++++++++
 css/window.css            |  1 +
 js/animations/keyframe.js |  1 +
 js/animations/timeline.js |  2 +-
 js/interface/panels.js    | 13 +++++++++++++
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/css/panels.css b/css/panels.css
index 168e916d..0dd362e5 100644
--- a/css/panels.css
+++ b/css/panels.css
@@ -6,6 +6,27 @@
 		flex-grow: 1;
 		display: flex;
 		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.panel[order]::before {
+		content: '';
+		height: 2px;
+		left: 0;
+		right: 0;
+		background: var(--color-accent);
+		z-index: 3;
+		display: block;
+		position: absolute;
+	}
+	.panel[order] {
+		position: relative;
+	}
+	.panel[order="-1"]::before {
+		margin-top: -2px;
+	}
+	.panel[order="1"]::before {
+		bottom: 0px;
 	}
 
 /*Display*/
diff --git a/css/window.css b/css/window.css
index e8b44c92..59a43075 100644
--- a/css/window.css
+++ b/css/window.css
@@ -68,6 +68,7 @@
 		margin-left: 12px;
 	}
 	body > h3.panel_handle {
+		pointer-events: none;
 		box-shadow: 0 0 16px black;
 		width: auto;
 	}
diff --git a/js/animations/keyframe.js b/js/animations/keyframe.js
index d9b4dc73..83193526 100644
--- a/js/animations/keyframe.js
+++ b/js/animations/keyframe.js
@@ -350,6 +350,7 @@ class Keyframe {
 	])
 	new Property(Keyframe, 'number', 'time')
 	new Property(Keyframe, 'number', 'color', {default: -1})
+	Keyframe.selected = [];
 
 // Misc Functions
 function updateKeyframeValue(axis, value) {
diff --git a/js/animations/timeline.js b/js/animations/timeline.js
index 36450b94..4425baaa 100644
--- a/js/animations/timeline.js
+++ b/js/animations/timeline.js
@@ -36,7 +36,7 @@ TimelineMarker.prototype.menu = new Menu([
 
 const Timeline = {
 	animators: [],
-	selected: [],//frames
+	selected: Keyframe.selected,//frames
 	playing_sounds: [],
 	playback_speed: 100,
 	time: 0,
diff --git a/js/interface/panels.js b/js/interface/panels.js
index 19664e03..a13a2fe4 100644
--- a/js/interface/panels.js
+++ b/js/interface/panels.js
@@ -59,7 +59,20 @@ class Panel {
 				start: function() {
 					Interface.panel = scope;
 				},
+				drag(e, ui) {
+					$('.panel[order]').attr('order', null)
+					let target_panel = $('div.panel:hover').get(0);
+					if (!target_panel) return;
+					let top = $(target_panel).offset().top;
+					let height = target_panel.clientHeight;
+					if (e.clientY > top + height/2) {
+						$(target_panel).attr('order', 1);
+					} else {
+						$(target_panel).attr('order', -1);
+					}
+				},
 				stop: function(e, ui) {
+					$('.panel[order]').attr('order', null)
 					if (!ui) return;
 					if (Math.abs(ui.position.top - ui.originalPosition.top) + Math.abs(ui.position.left - ui.originalPosition.left) < 180) return;
 					let target = Interface.panel