feat(items): add action and delete interactions

refs: #4

examples/random.html

@@ -53,6 +53,10 @@
 				return `${100 * utilization}%`;
 			}
 
+			function handleEvent(e) {
+				console.log(e);
+			}
+
 			const template = html`
 				<mutti-timeline>
 					${map(
@@ -68,6 +72,8 @@
 											start=${item.startDate}
 											end=${item.endDate}
 											scale=${item.utilization}
+											@action=${handleEvent}
+											@delete=${handleEvent}
 										>
 											<span>${item.children}</span>
 											<small>

src/components/item.ts

@@ -1,7 +1,9 @@
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { cameraProp } from "../controllers/camera-controller.js";
+import { ItemInteractionsController } from "../controllers/item-interactions-controller.js";
 import { MuttiDate } from "../core/date.js";
+import { ActionEvent } from "../core/events.js";
 import { varX } from "../core/properties.js";
 
 /** Custom CSS property names that are related to items. */
@@ -37,6 +39,7 @@ const styles = css`
 @customElement("mutti-item")
 export class MuttiItemElement extends LitElement {
 	static override styles = styles;
+	private controller = new ItemInteractionsController(this);
 
 	readonly role = "gridcell";
 	override slot = "item";

src/controllers/item-interactions-controller.ts

@@ -0,0 +1,41 @@
+import type { LitElement, ReactiveController } from "lit";
+import { ActionEvent, DeleteEvent } from "../core/events.js";
+
+export class ItemInteractionsController implements ReactiveController {
+	constructor(private readonly host: LitElement) {
+		host.addController(this);
+	}
+
+	hostConnected() {
+		this.host.addEventListener("keydown", this.handleKeydown);
+		this.host.addEventListener("dblclick", this.handleDoubleClick);
+	}
+
+	hostDisconnected() {
+		this.host.removeEventListener("keydown", this.handleKeydown);
+		this.host.removeEventListener("dblclick", this.handleDoubleClick);
+	}
+
+	private handleKeydown = (e: KeyboardEvent) => {
+		switch (e.key) {
+			case "Enter":
+				if (!e.repeat) this.action();
+				break;
+			case "Delete":
+				if (!e.repeat) this.delete();
+				break;
+		}
+	};
+
+	private handleDoubleClick = () => {
+		this.action();
+	};
+
+	private delete() {
+		this.host.dispatchEvent(new DeleteEvent());
+	}
+
+	private action() {
+		this.host.dispatchEvent(new ActionEvent());
+	}
+}

src/core/events.ts

@@ -0,0 +1,38 @@
+abstract class MuttiEvent extends Event {
+	static match(_: Event): _ is MuttiEvent {
+		throw new TypeError(
+			"Static 'match' method must be implemented by each subclass."
+		);
+	}
+}
+
+declare global {
+	interface GlobalEventHandlersEventMap {
+		[ActionEvent.type]: ActionEvent;
+		[DeleteEvent.type]: DeleteEvent;
+	}
+}
+
+export class ActionEvent extends MuttiEvent {
+	static type = "action" as const;
+
+	constructor() {
+		super(ActionEvent.type);
+	}
+
+	static override match(e: Event): e is ActionEvent {
+		return e instanceof ActionEvent;
+	}
+}
+
+export class DeleteEvent extends MuttiEvent {
+	static type = "delete" as const;
+
+	constructor() {
+		super(DeleteEvent.type);
+	}
+
+	static override match(e: Event): e is DeleteEvent {
+		return e instanceof DeleteEvent;
+	}
+}

src/main.ts

@@ -2,3 +2,5 @@ export { MuttiItemElement } from "./components/item.js";
 export { MuttiLabelElement } from "./components/label.js";
 export { MuttiTimelineElement } from "./components/timeline.js";
 export { MuttiTrackElement } from "./components/track.js";
+
+export { ActionEvent, DeleteEvent } from "./core/events.js";