import mitt, { Emitter } from "mitt";
import { ref } from "vue";
export interface KeyDetails {
[key: string | symbol]: Pick<
KeyboardEvent,
"key" | "ctrlKey" | "shiftKey" | "altKey" | "charCode" | "code" | "keyCode" | "metaKey" | "preventDefault"
>;
}
export const keyEmitter: Emitter<KeyDetails> = mitt<KeyDetails>();
// Make sure we don't start the emitter more than once.
// This happens often when developing the system and causes redundant keydown evs
let keyEmitterStarted = false;
export const startKeyEmitter = (document: Document) => {
if (keyEmitterStarted) return;
keyEmitterStarted = true;
document.addEventListener("keydown", (event: KeyboardEvent) => {
const fromInput = ["INPUT", "TEXTAREA", "SELECT"].includes((event.target as HTMLBodyElement)?.tagName);
if (!fromInput) {
// letter keys should be case insensitive
const isUpperCaseLetter = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".includes(event.key);
keyEmitter.emit(isUpperCaseLetter ? event.key.toLowerCase() : event.key, event);
}
});
};
type AttributeDetails = {
selectedPath: { path: string; name: string };
selectedDocs: { docs: string; link: string } | null;
};
export const attributeEmitter: Emitter<AttributeDetails> = mitt<AttributeDetails>();
export const windowWidthReactive = ref<number>(window.innerWidth);
export const windowHeightReactive = ref<number>(window.innerHeight);
export interface ResizeDetails {
[resize: string | symbol]: Pick<Event, "preventDefault" | "target">;
}
export const windowResizeEmitter: Emitter<ResizeDetails> = mitt<ResizeDetails>();
let windowResizeEmitterStarted = false;
const onResize = (event: Event) => {
windowWidthReactive.value = window.innerWidth;
windowHeightReactive.value = window.innerHeight;
windowResizeEmitter.emit("resize", event);
};
export const startWindowResizeEmitter = (window: Window) => {
if (windowResizeEmitterStarted) return;
windowResizeEmitterStarted = true;
window.addEventListener("resize", onResize);
};
export interface MouseDetails {
[key: string | symbol]: Pick<
MouseEvent,
"button" | "clientX" | "clientY" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey" | "preventDefault" | "target"
>;
}
const onClick = (event: MouseEvent) => {
mouseEmitter.emit("click", event);
};
const onMouseDown = (event: MouseEvent) => {
mouseEmitter.emit("mousedown", event);
};
export const mouseEmitter: Emitter<MouseDetails> = mitt<MouseDetails>();
let mouseEmitterStarted = false;
export const startMouseEmitters = (window: Window) => {
if (mouseEmitterStarted) return;
mouseEmitterStarted = true;
window.addEventListener("click", onClick);
window.addEventListener("mousedown", onMouseDown);
};
