microboard-ui-temp 0.0.3

package/src/features/ToolsPanel/Buttons/EventList/History.tsx

@@ -0,0 +1,140 @@
+import { BoardEvent } from "microboard-temp";
+import React, { CSSProperties } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import EventComponent from "./HistoryEvent";
+import { notify } from "shared/ui-lib/Toast";
+import { RawEvents } from "shared/RawEvents";
+
+interface Props {
+	style?: React.CSSProperties;
+	events: RawEvents;
+}
+
+export const History = React.memo(function History({
+	style,
+	events,
+}: Props): JSX.Element {
+	const { t } = useTranslation();
+	const { board } = useAppContext();
+
+	const headerStyle: CSSProperties = {
+		fontWeight: "bold",
+		display: "flex",
+		width: "100%",
+		justifyContent: "center",
+		alignItems: "center",
+	};
+
+	const handleExport = (): void => {
+		const data = board.events?.getRaw();
+		if (!data) {
+			return;
+		}
+
+		const jsonData = JSON.stringify(data, null, 2);
+		const blob = new Blob([jsonData], { type: "application/json" });
+		const link = document.createElement("a");
+		link.download = `events_${
+			data.confirmedEvents[data.confirmedEvents.length - 1].order
+		}_${board.getBoardId()}.json`;
+		link.href = URL.createObjectURL(blob);
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(link.href);
+	};
+
+	const handleImport = (): void => {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = ".json";
+		input.multiple = false;
+		input.onchange = async event => {
+			const file = (event.target as HTMLInputElement).files?.[0];
+			if (!file) {
+				return;
+			}
+
+			const text = await file.text();
+			try {
+				const data = JSON.parse(text);
+				const { confirmedEvents, eventsToSend, newEvents } =
+					data as RawEvents;
+				const events = [
+					...confirmedEvents,
+					...eventsToSend,
+					...newEvents,
+				];
+				events.forEach(event => {
+					board.emit(event.body.operation);
+				});
+			} catch (error) {
+				console.error("Error parsing JSON:", error);
+				notify({
+					variant: "error",
+					header: "Error during import",
+				});
+			}
+		};
+		input.click();
+	};
+
+	return (
+		<UiPanel
+			style={{
+				...style,
+				alignItems: "start",
+			}}
+			vertical
+			padding={6}
+			gap={6}
+		>
+			<div
+				style={{
+					display: "flex",
+					justifyContent: "space-between",
+					width: "100%",
+				}}
+			>
+				<UiButton
+					onClick={handleImport}
+					style={{ width: "100%" }}
+					variant="tertiary"
+				>
+					import
+				</UiButton>
+				<UiButton
+					style={{ width: "100%" }}
+					onClick={handleExport}
+					variant="tertiary"
+				>
+					export
+				</UiButton>
+			</div>
+			{Object.entries(events).map(
+				([eventType, events]: [string, BoardEvent[]]) => (
+					<React.Fragment key={`fragment_${eventType}`}>
+						<div style={headerStyle} key={`eventList_${eventType}`}>
+							{eventType
+								.replace(/([a-z])([A-Z])/g, "$1 $2")
+								.replace(/^./, str => str.toUpperCase())}
+						</div>
+						{/* TODO replace with pagination */}
+						{events
+							.reverse()
+							.slice(0, 100)
+							.map((event, idx) => (
+								<EventComponent
+									event={event}
+									key={`${event.body.eventId}_${idx}`}
+								/>
+							))}
+					</React.Fragment>
+				),
+			)}
+		</UiPanel>
+	);
+});

package/src/features/ToolsPanel/Buttons/EventList/HistoryEvent.tsx

@@ -0,0 +1,28 @@
+import React, { useRef } from "react";
+import { BoardEvent } from "microboard-temp";
+import PrettifiedEvent from "./PrettifiedEvent";
+
+interface EventProps {
+	event: BoardEvent;
+}
+
+const EventComponent: React.FC<EventProps> = ({ event }) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	return (
+		<div
+			ref={containerRef}
+			style={{
+				position: "relative",
+				display: "flex",
+				width: "100%",
+				alignItems: "flex-start",
+			}}
+		>
+			{/* TODO add json visualizer */}
+			<PrettifiedEvent event={event} />
+		</div>
+	);
+};
+
+export default EventComponent;

package/src/features/ToolsPanel/Buttons/EventList/PrettifiedEvent.tsx

@@ -0,0 +1,212 @@
+import React, { CSSProperties, MouseEvent } from "react";
+import type { Operation, BoardEvent } from "microboard-temp";
+import { Item } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+
+interface Props {
+	event: BoardEvent;
+	style?: CSSProperties;
+}
+
+const PrettifiedEvent: React.FC<Props> = ({ event, style }) => {
+	const { board } = useAppContext();
+	const { operation, prependix } = getOperation(
+		event.body.operation,
+		board.events?.log.list.getAllRecords().map(record => record.event),
+	);
+	const userId = event.body.userId;
+	const operationBase = operation.method
+		.replace(/([a-z])([A-Z])/g, "$1 $2")
+		.replace(/^./, str => str.toUpperCase());
+	const appendix = getOperationAppendix(operation);
+	const mappedId = getId(userId);
+
+	const itemIds = (() => {
+		if (
+			!("item" in operation) &&
+			!("items" in operation) &&
+			!("itemsMap" in operation) &&
+			!("itemsOps" in operation)
+		) {
+			return undefined;
+		}
+		const items =
+			"item" in operation
+				? operation.item
+				: "items" in operation
+					? operation.items
+					: "itemsMap" in operation
+						? operation.itemsMap
+						: "itemsOps" in operation
+							? operation.itemsOps.map(op => op.item)
+							: undefined;
+
+		if (typeof items === "string") {
+			return [items];
+		}
+		if (Array.isArray(items)) {
+			return items;
+		}
+		if (typeof items === "object") {
+			return Object.keys(items);
+		}
+		return undefined;
+	})();
+
+	const items = itemIds
+		?.map(id => board.items.getById(id))
+		.filter(item => !!item);
+
+	const sameTypes = items?.every(
+		(item, idx, arr) => idx === 0 || item.itemType === arr[0].itemType,
+	);
+
+	const handleClick = (items: Item[]) => (_event: MouseEvent) => {
+		const itemsMbr = items[0]
+			.getMbr()
+			.combine(items.slice(1).map(item => item.getMbr()));
+		board.camera.zoomToFit(itemsMbr);
+	};
+
+	return (
+		<span style={style}>
+			{prependix && <span>{prependix}</span>}
+			{`${operationBase}`}
+			{appendix && (
+				<>
+					{" ("}
+					<span>{appendix}</span>
+					{") "}
+				</>
+			)}
+			{items && (
+				<>
+					{" "}
+					{items.length === 0 ? (
+						"(Deleted)"
+					) : (
+						<span
+							style={{
+								color: "blue",
+								textDecoration: "underline",
+								background: "none",
+								border: "none",
+								cursor: "pointer",
+							}}
+							onClick={handleClick(items)}
+						>
+							{`(${
+								items.length > 1
+									? sameTypes
+										? `${items[0].itemType}s`
+										: "Group"
+									: items[0].itemType
+							})`}
+						</span>
+					)}{" "}
+				</>
+			)}
+			{` - User ${mappedId}`}
+		</span>
+	);
+};
+
+export default PrettifiedEvent;
+
+let currentId = 1;
+const idMap = new Map<number, number>();
+
+function getId(userId: number): number {
+	let mappedId = idMap.get(userId);
+	if (!mappedId) {
+		mappedId = currentId++;
+		idMap.set(userId, mappedId);
+	}
+	return mappedId;
+}
+
+function getOperation(
+	op: Operation,
+	events?: BoardEvent[],
+): {
+	operation: Operation;
+	prependix: string;
+} {
+	const defaultReturn = {
+		operation: op,
+		prependix: "",
+	};
+
+	if (!events) {
+		return defaultReturn;
+	}
+
+	if (op.method === "undo") {
+		const toUndo = events.find(event => event.body.eventId === op.eventId);
+		if (!toUndo) {
+			return defaultReturn;
+		}
+
+		return {
+			operation: toUndo.body.operation,
+			prependix: "Undo - ",
+		};
+	}
+
+	if (op.method === "redo") {
+		const undoEvent = events.find(
+			event => event.body.eventId === op.eventId,
+		);
+		if (!undoEvent || undoEvent.body.operation.method !== "undo") {
+			return defaultReturn;
+		}
+
+		const undidId = undoEvent.body.operation.eventId;
+		const toRedo = events.find(event => event.body.eventId === undidId);
+		if (!toRedo) {
+			return defaultReturn;
+		}
+
+		return {
+			operation: toRedo.body.operation,
+			prependix: "Redo - ",
+		};
+	}
+
+	return defaultReturn;
+}
+
+function getOperationAppendix(operation: Operation): string {
+	const appendix: string[] = [];
+
+	if ("x" in operation && "y" in operation) {
+		appendix.push(
+			`x:${Math.round(operation.x)}; y:${Math.round(operation.y)}`,
+		);
+	}
+
+	if ("scale" in operation) {
+		const { x, y } = operation.scale;
+		if (x !== 1 && y !== 1) {
+			appendix.push(`scale - x:${Math.round(x)}; y:${Math.round(y)}`);
+		}
+	}
+
+	if ("translate" in operation) {
+		const { x, y } = operation.translate;
+		if (x !== 0 && y !== 0) {
+			appendix.push(`translate - x:${Math.round(x)}; y:${Math.round(y)}`);
+		}
+	}
+
+	if (operation.method === "transformMany") {
+		const appendixes = Object.values(operation.items).map(op =>
+			getOperationAppendix(op),
+		);
+		if (appendixes.every(app => app === appendixes[0])) {
+			appendix.push(appendixes[0]);
+		}
+	}
+
+	return appendix.join(", ");
+}

package/src/features/ToolsPanel/Buttons/EventList/SyncJournal.tsx

@@ -0,0 +1,89 @@
+import React, { memo } from "react";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import EventComponent from "./HistoryEvent";
+import { SyncLog } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+interface Props {
+	style?: React.CSSProperties;
+	log: SyncLog;
+}
+
+export const SyncJournal = memo(function SyncJournal({
+	style,
+	log,
+}: Props): JSX.Element {
+	const eventsLog = log.map(logMsg => ({
+		msg: logMsg.msg,
+		events: logMsg.records.map(record => record.event),
+	}));
+	const { board } = useAppContext();
+
+	const handleExport = (): void => {
+		const data = eventsLog;
+		const confirmedEvents = board.events?.log.list
+			.getConfirmedRecords()
+			.map(record => record.event);
+
+		const jsonData = JSON.stringify(data, null, 2);
+		const blob = new Blob([jsonData], { type: "application/json" });
+		const link = document.createElement("a");
+		link.download = `syncLog_${
+			confirmedEvents?.[confirmedEvents.length - 1].order
+		}_${board.getBoardId()}.json`;
+		link.href = URL.createObjectURL(blob);
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(link.href);
+	};
+
+	return (
+		<UiPanel
+			style={{
+				...style,
+				alignItems: "start",
+			}}
+			vertical
+			padding={6}
+			gap={6}
+		>
+			<UiButton
+				style={{ width: "100%" }}
+				onClick={handleExport}
+				variant="tertiary"
+			>
+				export
+			</UiButton>
+			{/* TODO replace with pagination */}
+			{eventsLog
+				.reverse()
+				.slice(0, 100)
+				.map(
+					(logMsg, idx) =>
+						logMsg.events.length > 0 && (
+							<React.Fragment key={`${logMsg.msg}_${idx}`}>
+								<span key={`${logMsg.msg}_${idx}_span`}>
+									<b>
+										{logMsg.msg
+											.replace(/([a-z])([A-Z])/g, "$1 $2")
+											.replace(/^./, str =>
+												str.toUpperCase(),
+											)}
+									</b>
+									{logMsg.events
+										.reverse()
+										.map((event, idx) => (
+											<EventComponent
+												event={event}
+												key={`${event.body.eventId}_${idx}`}
+											/>
+										))}
+								</span>
+							</React.Fragment>
+						),
+				)}
+		</UiPanel>
+	);
+});

package/src/features/ToolsPanel/Buttons/EventList/index.ts

@@ -0,0 +1 @@
+export { EventList } from "./EventList";

package/src/features/ToolsPanel/Buttons/Grab.tsx

@@ -0,0 +1,29 @@
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export function Grab() {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handleClick = () => {
+		board.tools.navigate();
+	};
+
+	const isActive = Boolean(board.tools.getNavigate());
+
+	return (
+		<UiButton
+			id={"tool-select"}
+			tooltip={isActive ? undefined : t("toolsPanel.grab.tooltip")}
+			onClick={handleClick}
+			active={isActive}
+			variant="secondary"
+			rounded="top"
+		>
+			<Icon iconName="Hand" />
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/Buttons/Redo.tsx

@@ -0,0 +1,40 @@
+import { getHotkeyLabel } from "microboard-temp";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+
+export function Redo() {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const forceUpdate = useForceUpdate();
+
+	useAppSubscription({
+		subjects: ["board"], // previously used events subscription
+		observer: forceUpdate,
+	});
+
+	const handleClick = () => {
+		board.events?.redo();
+	};
+
+	const canRedo = board.events?.canRedo();
+
+	return (
+		<UiButton
+			id={"redo"}
+			tooltip={t("toolsPanel.redo.tooltip")}
+			hotkey={getHotkeyLabel("redo")}
+			onClick={handleClick}
+			disabled={!canRedo}
+			variant="secondary"
+			rounded="bottom"
+		>
+			<Icon iconName="Redo" />
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/Buttons/Select.tsx

@@ -0,0 +1,37 @@
+import { getHotkeyLabel } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+type Props = { rounded?: "top" | "bottom" | "none" };
+
+export function Select({ rounded = "top" }: Props): JSX.Element {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	function handleClick(): void {
+		if (board.tools.getSelect()) {
+			board.tools.navigate();
+		} else {
+			board.tools.select();
+		}
+	}
+
+	const isActive = Boolean(board.tools.getSelect());
+
+	return (
+		<UiButton
+			id={"tool-select"}
+			tooltip={isActive ? undefined : t("toolsPanel.select.tooltip")}
+			hotkey={getHotkeyLabel("select")}
+			onClick={handleClick}
+			active={isActive}
+			variant="secondary"
+			rounded={rounded}
+		>
+			<Icon iconName="Select" />
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/Buttons/Star.tsx

@@ -0,0 +1,31 @@
+import { getHotkeyLabel } from "microboard-temp";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { Star } from "../../../Board/Items/Examples/Star/Star";
+
+export function AddStar() {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handleClick = () => {
+		board.tools.addRegisteredTool("AddStar", true);
+	};
+
+	const isActive = Boolean(board.tools.getAddRegisteredTool("AddStar"));
+
+	return (
+		<UiButton
+			id={"redo"}
+			tooltip={"Star"}
+			onClick={handleClick}
+			variant="secondary"
+			rounded="none"
+			active={isActive}
+		>
+			<Icon iconName="Redo" />
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/Buttons/Undo.tsx

@@ -0,0 +1,39 @@
+import { getHotkeyLabel } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+
+export function Undo() {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+	const forceUpdate = useForceUpdate();
+
+	useAppSubscription({
+		subjects: ["board"], // previously used events subscription
+		observer: forceUpdate,
+	});
+
+	const handleClick = () => {
+		board.events?.undo();
+	};
+
+	const canUndo = board.events?.canUndo();
+
+	return (
+		<UiButton
+			id={"undo"}
+			tooltip={t("toolsPanel.undo.tooltip")}
+			hotkey={getHotkeyLabel("undo")}
+			onClick={handleClick}
+			disabled={!canUndo}
+			rounded="top"
+			variant="secondary"
+		>
+			<Icon iconName="Undo" />
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/PanelContext.ts

@@ -0,0 +1,13 @@
+import {
+	createStrictContext,
+	useStrictContext,
+} from "shared/lib/strictContext";
+
+export const PanelContext = createStrictContext<{
+	toggleMenu: (menu: string) => void;
+	openedMenu: string;
+}>();
+
+export function usePanelContext() {
+	return useStrictContext(PanelContext);
+}

package/src/features/ToolsPanel/ToolsPanel.module.css

@@ -0,0 +1,33 @@
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: center;
+	gap: 12px;
+	position: relative;
+	z-index: 0;
+}
+
+.localWrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: center;
+	gap: 12px;
+	position: absolute;
+	top: 20%;
+	left: 12px;
+	z-index: 0;
+}
+
+.bottomLeftWrapper {
+	z-index: 150;
+
+	display: flex;
+	gap: 8px;
+
+	padding: 0;
+
+	position: absolute;
+	bottom: 0;
+}