refactor(frontend): refactor deck events (#17290)

packages/frontend/src/deck.ts

@@ -5,6 +5,7 @@
 
 import { notificationTypes } from 'misskey-js';
 import { ref } from 'vue';
+import { EventEmitter } from 'eventemitter3';
 import { i18n } from './i18n.js';
 import type { BasicTimelineType } from '@/timelines.js';
 import type { SoundStore } from '@/preferences/def.js';
@@ -14,6 +15,13 @@ import { deepClone } from '@/utility/clone.js';
 import { prefer } from '@/preferences.js';
 import * as os from '@/os.js';
 
+type DeckEvents = {
+	'column.dragStart': () => void;
+	'column.dragEnd': () => void;
+};
+
+export const deckGlobalEvents = new EventEmitter<DeckEvents>();
+
 export type DeckProfile = {
 	name: string;
 	id: string;

packages/frontend/src/os.ts

@@ -6,7 +6,6 @@
 // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
 
 import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue';
-import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
 import type { Component, MaybeRef } from 'vue';
 import type { ComponentEmit, ComponentProps as CP } from 'vue-component-type-helpers';
@@ -729,8 +728,6 @@ export async function post(props: PostFormProps = {}): Promise<void> {
 	});
 }
 
-export const deckGlobalEvents = new EventEmitter();
-
 /*
 export function checkExistence(fileData: ArrayBuffer): Promise<any> {
 	return new Promise((resolve, reject) => {

packages/frontend/src/ui/deck/column.vue

@@ -46,11 +46,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onBeforeUnmount, onMounted, provide, watch, useTemplateRef, ref, computed } from 'vue';
 import type { Column } from '@/deck.js';
 import type { MenuItem } from '@/types/menu.js';
-import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from '@/deck.js';
+import { deckGlobalEvents, updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from '@/deck.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
-import { DI } from '@/di.js';
 import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
 
 provide('shouldHeaderThin', true);
@@ -79,7 +78,7 @@ const emit = defineEmits<{
 const body = useTemplateRef('body');
 
 const dragging = ref(false);
-watch(dragging, v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
+watch(dragging, v => deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
 
 const draghover = ref(false);
 const dropready = ref(false);
@@ -88,13 +87,13 @@ const isMainColumn = computed(() => props.column.type === 'main');
 const active = computed(() => props.column.active !== false);
 
 onMounted(() => {
-	os.deckGlobalEvents.on('column.dragStart', onOtherDragStart);
+	deckGlobalEvents.on('column.dragStart', onOtherDragStart);
-	os.deckGlobalEvents.on('column.dragEnd', onOtherDragEnd);
+	deckGlobalEvents.on('column.dragEnd', onOtherDragEnd);
 });
 
 onBeforeUnmount(() => {
-	os.deckGlobalEvents.off('column.dragStart', onOtherDragStart);
+	deckGlobalEvents.off('column.dragStart', onOtherDragStart);
-	os.deckGlobalEvents.off('column.dragEnd', onOtherDragEnd);
+	deckGlobalEvents.off('column.dragEnd', onOtherDragEnd);
 });
 
 function onOtherDragStart() {
@@ -306,7 +305,7 @@ function onDragleave() {
 
 function onDrop(ev: DragEvent) {
 	draghover.value = false;
-	os.deckGlobalEvents.emit('column.dragEnd');
+	deckGlobalEvents.emit('column.dragEnd');
 
 	const id = getDragData(ev, 'deckColumn');
 	if (id != null) {