Merge ade890f115 into 9d0f7eeb9c

packages/frontend/src/boot/main-boot.ts

@@ -124,6 +124,8 @@ export async function mainBoot() {
 				announcement,
 			}, {
 				closed: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		}
 
@@ -134,6 +136,8 @@ export async function mainBoot() {
 					announcement,
 				}, {
 					closed: () => dispose(),
+				}, {
+					allowMultiple: true,
 				});
 			}
 		}

packages/frontend/src/components/MkClickerGame.vue

@@ -37,6 +37,8 @@ function onClick(ev: MouseEvent) {
 	const y = ev.clientY;
 	const { dispose } = os.popup(MkPlusOneEffect, { x, y }, {
 		end: () => dispose(),
+	}, {
+		allowMultiple: true,
 	});
 
 	saveData.value!.cookies++;

packages/frontend/src/components/MkDrive.folder.vue

@@ -279,6 +279,8 @@ function onContextmenu(ev: MouseEvent) {
 				initialFolder: props.folder,
 			}, {
 				closed: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		},
 	}, { type: 'divider' }, {

packages/frontend/src/components/MkEmojiPicker.vue

@@ -417,6 +417,8 @@ function chosen(emoji: any, ev?: MouseEvent) {
 		const y = rect.top + (el.offsetHeight / 2);
 		const { dispose } = os.popup(MkRippleEffect, { x, y }, {
 			end: () => dispose(),
+		}, {
+			allowMultiple: true,
 		});
 	}
 

packages/frontend/src/components/MkLink.vue

@@ -43,6 +43,8 @@ if (isEnabledUrlPreview.value) {
 			source: el.value instanceof HTMLElement ? el.value : el.value?.$el,
 		}, {
 			closed: () => dispose(),
+		}, {
+			allowMultiple: true,
 		});
 	});
 }

packages/frontend/src/components/MkNote.vue

@@ -391,6 +391,8 @@ if (!props.mock) {
 			targetElement: renoteButton.value,
 		}, {
 			closed: () => dispose(),
+		}, {
+			allowMultiple: true,
 		});
 	});
 
@@ -414,6 +416,8 @@ if (!props.mock) {
 				targetElement: reactButton.value!,
 			}, {
 				closed: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		});
 	}
@@ -463,6 +467,8 @@ function react(): void {
 			const y = rect.top + (el.offsetHeight / 2);
 			const { dispose } = os.popup(MkRippleEffect, { x, y }, {
 				end: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		}
 	} else {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -376,6 +376,8 @@ useTooltip(renoteButton, async (showing) => {
 		targetElement: renoteButton.value,
 	}, {
 		closed: () => dispose(),
+	}, {
+		allowMultiple: true,
 	});
 });
 
@@ -399,6 +401,8 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') {
 			targetElement: reactButton.value!,
 		}, {
 			closed: () => dispose(),
+		}, {
+			allowMultiple: true,
 		});
 	});
 }
@@ -439,6 +443,8 @@ function react(): void {
 			const y = rect.top + (el.offsetHeight / 2);
 			const { dispose } = os.popup(MkRippleEffect, { x, y }, {
 				end: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		}
 	} else {

packages/frontend/src/components/MkPostForm.vue

@@ -747,6 +747,8 @@ async function post(ev?: MouseEvent) {
 			const y = rect.top + (el.offsetHeight / 2);
 			const { dispose } = os.popup(MkRippleEffect, { x, y }, {
 				end: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		}
 	}

packages/frontend/src/components/MkReactionIcon.vue

@@ -30,6 +30,8 @@ if (props.withTooltip) {
 			targetElement: elRef.value.$el,
 		}, {
 			closed: () => dispose(),
+		}, {
+			allowMultiple: true,
 		});
 	});
 }

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -133,6 +133,8 @@ function anime() {
 	const y = rect.top + (buttonEl.value.offsetHeight / 2);
 	const { dispose } = os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {
 		end: () => dispose(),
+	}, {
+		allowMultiple: true,
 	});
 }
 

packages/frontend/src/components/MkUrlPreview.vue

@@ -194,6 +194,8 @@ function openPlayer(): void {
 		url: requestUrl.href,
 	}, {
 		// TODO
+	}, {
+		allowMultiple: true,
 	});
 }
 

packages/frontend/src/components/global/MkUrl.vue

@@ -63,6 +63,8 @@ if (props.showUrlPreview && isEnabledUrlPreview.value) {
 			source: el.value instanceof HTMLElement ? el.value : el.value?.$el,
 		}, {
 			closed: () => dispose(),
+		}, {
+			allowMultiple: true,
 		});
 	});
 }

packages/frontend/src/directives/ripple.ts

@@ -19,6 +19,8 @@ export default {
 
 			const { dispose } = popup(MkRippleEffect, { x, y }, {
 				end: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		});
 	},

packages/frontend/src/directives/tooltip.ts

@@ -59,6 +59,8 @@ export default {
 				targetElement: el,
 			}, {
 				closed: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 
 			self._close = () => {

packages/frontend/src/directives/user-preview.ts

@@ -48,6 +48,8 @@ export class UserPreview {
 				this.hideTimer = window.setTimeout(this.close, 500);
 			},
 			closed: () => dispose(),
+		}, {
+			allowMultiple: true,
 		});
 
 		this.promise = {

packages/frontend/src/os.ts

@@ -176,13 +176,33 @@ type EmitsExtractor<T> = {
 	[K in keyof T as K extends `onVnode${string}` ? never : K extends `on${infer E}` ? Uncapitalize<E> : K extends string ? never : K]: T[K];
 };
 
+type PopupOptions = {
+	/** @default false */
+	allowMultiple?: boolean;
+};
+
 export function popup<T extends Component>(
 	component: T,
 	props: ComponentProps<T>,
 	events: ComponentEmit<T> = {} as ComponentEmit<T>,
+	options: PopupOptions = {},
 ): { dispose: () => void } {
 	markRaw(component);
 
+	const _options: Required<PopupOptions> = Object.assign({
+		allowMultiple: false,
+	}, options);
+
+	if (
+		_options.allowMultiple === false &&
+		popups.value.some(popup => popup.component === component)
+	) {
+		if (_DEV_) console.warn('Popup already exists');
+		return {
+			dispose: () => { },
+		};
+	}
+
 	const id = ++popupIdCount;
 	const dispose = () => {
 		// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？
@@ -209,6 +229,8 @@ export function pageWindow(path: string) {
 		initialPath: path,
 	}, {
 		closed: () => dispose(),
+	}, {
+		allowMultiple: true,
 	});
 }
 
@@ -217,6 +239,8 @@ export function toast(message: string) {
 		message,
 	}, {
 		closed: () => dispose(),
+	}, {
+		allowMultiple: true,
 	});
 }
 

packages/frontend/src/pages/drop-and-fusion.game.vue

@@ -1012,12 +1012,16 @@ function attachGameEvents() {
 		{
 			const { dispose } = os.popup(MkRippleEffect, { x: domX, y: domY }, {
 				end: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		}
 
 		{
 			const { dispose } = os.popup(MkPlusOneEffect, { x: domX, y: domY, value: scoreDelta + (scoreUnit === 'pt' ? '' : scoreUnit) }, {
 				end: () => dispose(),
+			}, {
+				allowMultiple: true,
 			});
 		}
 

packages/frontend/src/scripts/get-note-menu.ts

@@ -554,6 +554,8 @@ export function getRenoteMenu(props: {
 					const y = rect.top + (el.offsetHeight / 2);
 					const { dispose } = os.popup(MkRippleEffect, { x, y }, {
 						end: () => dispose(),
+					}, {
+						allowMultiple: true,
 					});
 				}
 
@@ -592,6 +594,8 @@ export function getRenoteMenu(props: {
 					const y = rect.top + (el.offsetHeight / 2);
 					const { dispose } = os.popup(MkRippleEffect, { x, y }, {
 						end: () => dispose(),
+					}, {
+						allowMultiple: true,
 					});
 				}
 
@@ -643,6 +647,8 @@ export function getRenoteMenu(props: {
 							const y = rect.top + (el.offsetHeight / 2);
 							const { dispose } = os.popup(MkRippleEffect, { x, y }, {
 								end: () => dispose(),
+							}, {
+								allowMultiple: true,
 							});
 						}
 

packages/frontend/src/scripts/use-chart-tooltip.ts

@@ -23,7 +23,9 @@ export function useChartTooltip(opts: { position: 'top' | 'middle' } = { positio
 		y: tooltipY,
 		title: tooltipTitle,
 		series: tooltipSeries,
-	}, {});
+	}, {}, {
+		allowMultiple: true,
+	});
 
 	onUnmounted(() => {
 		disposeTooltipComponent();