From 4167aac7ddabf5ef4288898ba37bb66daf6dbad7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 21 Sep 2020 11:17:04 +0900
Subject: [PATCH] wip

---
 src/client/.eslintrc                  |  3 ++-
 src/client/@types/global.d.ts         |  1 +
 src/client/components/deck/column.vue | 26 +++++++++++++-------------
 src/client/os.ts                      |  3 +++
 webpack.config.ts                     |  1 +
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/client/.eslintrc b/src/client/.eslintrc
index 5ea3dc45d6..e71b259b5c 100644
--- a/src/client/.eslintrc
+++ b/src/client/.eslintrc
@@ -5,6 +5,7 @@
 		"_VERSION_": false,
 		"_ENV_": false,
 		"_DATA_TRANSFER_DRIVE_FILE_": false,
-		"_DATA_TRANSFER_DRIVE_FOLDER_": false
+		"_DATA_TRANSFER_DRIVE_FOLDER_": false,
+		"_DATA_TRANSFER_DECK_COLUMN_": false
 	}
 }
diff --git a/src/client/@types/global.d.ts b/src/client/@types/global.d.ts
index 8b7c4356d6..beeb8bcf75 100644
--- a/src/client/@types/global.d.ts
+++ b/src/client/@types/global.d.ts
@@ -4,3 +4,4 @@ declare const _ENV_: string;
 declare const _DEV_: boolean;
 declare const _DATA_TRANSFER_DRIVE_FILE_: string;
 declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
+declare const _DATA_TRANSFER_DECK_COLUMN_: string;
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
index 9aced375c6..889ae2d1c1 100644
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -87,10 +87,10 @@ export default defineComponent({
 
 		keymap(): any {
 			return {
-				'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
-				'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
-				'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
-				'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
+				'shift+up': () => this.$parent.$emit('parent-focus', 'up'),
+				'shift+down': () => this.$parent.$emit('parent-focus', 'down'),
+				'shift+left': () => this.$parent.$emit('parent-focus', 'left'),
+				'shift+right': () => this.$parent.$emit('parent-focus', 'right'),
 			};
 		}
 	},
@@ -101,21 +101,21 @@ export default defineComponent({
 		},
 
 		dragging(v) {
-			this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
+			os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd');
 		}
 	},
 
 	mounted() {
 		if (!this.isMainColumn) {
-			this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
-			this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
+			os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
+			os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
 		}
 	},
 
 	beforeUnmount() {
 		if (!this.isMainColumn) {
-			this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
-			this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
+			os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
+			os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
 		}
 	},
 
@@ -234,7 +234,7 @@ export default defineComponent({
 			}
 
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk-deck-column', this.column.id);
+			e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
 			this.dragging = true;
 		},
 
@@ -256,7 +256,7 @@ export default defineComponent({
 				return;
 			}
 
-			const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
+			const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
 
 			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
 
@@ -269,9 +269,9 @@ export default defineComponent({
 
 		onDrop(e) {
 			this.draghover = false;
-			this.$root.$emit('deck.column.dragEnd');
+			os.deckGlobalEvents.emit('column.dragEnd');
 
-			const id = e.dataTransfer.getData('mk-deck-column');
+			const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
 			if (id != null && id != '') {
 				this.$store.commit('deviceUser/swapDeckColumn', {
 					a: this.column.id,
diff --git a/src/client/os.ts b/src/client/os.ts
index bc4d09b74a..1e00abacf1 100644
--- a/src/client/os.ts
+++ b/src/client/os.ts
@@ -1,5 +1,6 @@
 import { Component, defineAsyncComponent, markRaw, ref } from 'vue';
 import * as PCancelable from 'p-cancelable';
+import { EventEmitter } from 'eventemitter3';
 import Stream from '@/scripts/stream';
 import { store } from '@/store';
 import { apiUrl } from '@/config';
@@ -201,3 +202,5 @@ export function sound(type: string) {
 	audio.volume = store.state.device.sfxVolume;
 	audio.play();
 }
+
+export const deckGlobalEvents = new EventEmitter();
diff --git a/webpack.config.ts b/webpack.config.ts
index 23c193c6b3..07ec7fcbe9 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -136,6 +136,7 @@ module.exports = {
 			_DEV_: JSON.stringify(process.env.NODE_ENV) !== 'production',
 			_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
 			_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
+			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
 		}),
 		new VueLoaderPlugin(),
 		new WebpackOnBuildPlugin((stats: any) => {