microboard-ui-temp 0.0.3

package/src/App/README.md

@@ -0,0 +1,58 @@
+# App
+
+# Connection
+
+To have the same list of board events on all the clients as on the server.
+
+To publish events to the server and subscribe to new events from the server.
+
+## Event id
+
+A client should create an unique id for each event.
+
+For the server to identify the event if it gets to the server multiple times.
+
+For the client to know that the server got the message and the client should not send it again.
+
+We can add a Connection Id to the Local Logical Time to get an Event Id.
+
+## Important design decitions (Architecture)
+
+### 1. Server sets the order of events
+
+The order in which events are occured between the clients is the order in which the messages about theese events got to the server.
+
+### 2. Clients apply operations instantly
+
+Clients apply operations from events without the conformation from the server that it recieved the message.
+
+Sometimes a client should revert few operations to insert some operations before them when the client gets such operations from other clients in messages from the server.
+
+### 3. Client Classes handle operations
+
+Classes on the client recieve and apply operations. They should know exactly what method was called and what arguments were passed to handle what cached values dont need to be recalculated.
+
+## Synchronisation
+
+At any time the list of events on a client can be different from the list of events on the server.
+
+Eventually each client will have the same list of events as the server.
+
+To achive that eventual consistency the server orders the events that it recieves from the clients.
+
+1. User calls a setter on an object attached to a board on the client.
+
+2. Board creates an operation and emits it to events manager.
+
+3. Events manager creates an event and sends it to the server, creates a command and applies it to the board.
+
+4. Server recieves an event and searches it in the board events table.
+
+    - If the event is already in the table then it is a repeated message, server does nothing.
+    - If the event is not in the table, then server appends it to the table.
+
+5. Events manager recieves an event from the server.
+
+    - Events manager searches the event in the unacknoledged events. If the event in the unacknowledged events then the manager removes it from there and adds to acknoledged events.
+    - Events manager sends all unacknowledged events again with a small timeout.
+    - Events manager checks if the event is from another client and if it is then the manager checks if their order is lower then the order of acknoledged events and if it is then the server reverts all events with higher order (including all anacknowledged events) applies the event and reapplies all reverted events.

package/src/App/SessionStorage.ts

@@ -0,0 +1,248 @@
+import type {
+	ShapeData,
+	ConnectionLineWidth,
+	BorderStyle,
+	ConnectorLineStyle,
+	ConnectorEdge,
+	ConnectorPointerStyle,
+} from "microboard-temp";
+import type { StickerData, TextStyle } from "microboard-temp";
+
+// Create a node-safe storage: use sessionStorage if available, otherwise a polyfill.
+let _sessionStorage: Storage;
+
+if (typeof window !== "undefined" && window.sessionStorage) {
+	_sessionStorage = window.sessionStorage;
+} else {
+	class NodeStoragePolyfill implements Storage {
+		private _store: Record<string, string> = {};
+
+		clear(): void {
+			this._store = {};
+		}
+
+		getItem(key: string): string | null {
+			return Object.prototype.hasOwnProperty.call(this._store, key)
+				? this._store[key]
+				: null;
+		}
+
+		key(index: number): string | null {
+			const keys = Object.keys(this._store);
+			return keys[index] ?? null;
+		}
+
+		removeItem(key: string): void {
+			delete this._store[key];
+		}
+
+		setItem(key: string, value: string): void {
+			this._store[key] = value;
+		}
+
+		get length(): number {
+			return Object.keys(this._store).length;
+		}
+	}
+
+	_sessionStorage = new NodeStoragePolyfill();
+}
+
+export class SessionStorage {
+	private set<T>(key: string, value: T): void {
+		const boardId = this.getBoardId() || "";
+		_sessionStorage.setItem(boardId + "_" + key, JSON.stringify(value));
+	}
+
+	private get<T>(key: string): T | undefined {
+		const boardId = this.getBoardId() || "";
+		const item = _sessionStorage.getItem(boardId + "_" + key);
+		if (!item) {
+			return;
+		}
+		return JSON.parse(item) as T;
+	}
+
+	remove(key: string): void {
+		const boardId = this.getBoardId() || "";
+		_sessionStorage.removeItem(boardId + "_" + key);
+	}
+
+	setConnectorStrokeStyle(color: BorderStyle): void {
+		this.set(`connectorStrokeStyle`, color);
+	}
+
+	getConnectorStrokeStyle(): BorderStyle | undefined {
+		return this.get("connectorStrokeStyle");
+	}
+
+	setConnectorLineWidth(width: number): void {
+		this.set(`connectorLineWidth`, width);
+	}
+
+	getConnectorLineWidth(): ConnectionLineWidth | undefined {
+		return this.get("connectorLineWidth");
+	}
+
+	setConnectorFillColor(color: string): void {
+		this.set(`connectorFillColor`, color);
+	}
+
+	getConnectorFillColor(): string | undefined {
+		return this.get("connectorFillColor");
+	}
+
+	setConnectorPointer(
+		type: ConnectorPointerStyle,
+		edge: ConnectorEdge,
+	): void {
+		this.set(
+			`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`,
+			type,
+		);
+	}
+
+	getConnectorPointer(
+		edge: ConnectorEdge,
+	): ConnectorPointerStyle | undefined {
+		return this.get<ConnectorPointerStyle>(
+			`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`,
+		);
+	}
+
+	setConnectorLineStyle(type: ConnectorLineStyle): void {
+		this.set("connectorLineStyle", type);
+	}
+
+	getConnectorLineStyle(): ConnectorLineStyle | undefined {
+		return this.get<ConnectorLineStyle>("connectorLineStyle");
+	}
+
+	setShapeData(data: Partial<ShapeData>): void {
+		this.set("lastShapeData", data);
+	}
+
+	getShapeData(): ShapeData | undefined {
+		return this.get<ShapeData>("lastShapeData");
+	}
+
+	setStickerData(data: Partial<StickerData>): void {
+		this.set("lastSticker", data);
+	}
+
+	getStickerData(): StickerData | undefined {
+		return this.get<StickerData>("lastSticker");
+	}
+
+	setShapeWidth(width: number): void {
+		this.set("shapeWidth", width);
+	}
+
+	getShapeWidth(): number | undefined {
+		return this.get<number>("shapeWidth");
+	}
+
+	setShapeHeight(height: number): void {
+		this.set("shapeHeight", height);
+	}
+
+	getShapeHeight(): number | undefined {
+		return this.get<number>("shapeHeight");
+	}
+
+	setImageDimensions(dimension: { width: number; height: number }): void {
+		this.set("imageDimensions", dimension);
+	}
+
+	getImageDimensions(): { width: number; height: number } | undefined {
+		return this.get<{ width: number; height: number }>("imageDimensions");
+	}
+
+	setFontSize(itemType: string, size: number | "auto"): void {
+		this.set(`fontSize_${itemType}`, size);
+	}
+
+	getFontSize(itemType: string): number | "auto" | undefined {
+		return this.get<number | "auto">(`fontSize_${itemType}`);
+	}
+
+	setFontStyles(itemType: string, styles: TextStyle[]): void {
+		this.set(`fontStyles_${itemType}`, styles);
+	}
+
+	getFontStyles(itemType: string): TextStyle[] | undefined {
+		return this.get<TextStyle[]>(`fontStyles_${itemType}`);
+	}
+
+	setFontColor(itemType: string, color: string): void {
+		this.set(`fontColor_${itemType}`, color);
+	}
+
+	getFontColor(itemType: string): string | undefined {
+		return this.get<string>(`fontColor_${itemType}`);
+	}
+
+	setFontHighlight(itemType: string, highlightColor: string): void {
+		this.set(`fontHighlightColor_${itemType}`, highlightColor);
+	}
+
+	getFontHighlight(itemType: string): string | undefined {
+		return this.get<string>(`fontHighlightColor_${itemType}`);
+	}
+
+	setHorizontalAlignment(
+		itemType: string,
+		horizontalAlignment: "left" | "center" | "right",
+	): void {
+		this.set(`fontHorizontalAlignment_${itemType}`, horizontalAlignment);
+	}
+
+	getHorizontalAlignment(
+		itemType: string,
+	): "left" | "center" | "right" | undefined {
+		return this.get<"left" | "center" | "right">(
+			`fontHorizontalAlignment_${itemType}`,
+		);
+	}
+
+	setVerticalAlignment(
+		itemType: string,
+		verticalAlignment: "top" | "center" | "bottom",
+	): void {
+		this.set(`fontVerticalAlignment_${itemType}`, verticalAlignment);
+	}
+
+	getVerticalAlignment(
+		itemType: string,
+	): "top" | "center" | "bottom" | undefined {
+		return this.get<"top" | "center" | "bottom">(
+			`fontVerticalAlignment_${itemType}`,
+		);
+	}
+
+	setLastAIRequest(request: string): void {
+		_sessionStorage.setItem("lastAIRequest", request);
+	}
+
+	getLastAIRequest(): string | null {
+		return _sessionStorage.getItem("lastAIRequest");
+	}
+
+	removeLastAIRequest(): void {
+		_sessionStorage.removeItem("lastAIRequest");
+	}
+
+	clear(): void {
+		_sessionStorage.clear();
+	}
+
+	private getBoardId(): string | undefined {
+		// In a Node environment, window is undefined so we return undefined.
+		if (typeof window === "undefined") {
+			return undefined;
+		}
+		return window.location.href.split("/").pop()?.split("?")[0];
+	}
+}
+
+export const tempStorage = new SessionStorage();

package/src/App/Storage.ts

@@ -0,0 +1,122 @@
+import type { boardsApiV2 } from "shared/apiV2";
+import { v4 } from "uuid";
+
+export class Storage {
+	createdBoards = `${location.host}/createdBoards`;
+	visitedBoards = `${location.host}/visitedBoards`;
+
+	/* Returns ids of visited public boards stored in the local storage */
+	listCreatedBoards(): boardsApiV2.Board[] {
+		const createdBoards = localStorage.getItem(this.createdBoards);
+		if (createdBoards) {
+			return JSON.parse(createdBoards);
+		} else {
+			return [];
+		}
+	}
+
+	listVisitedBoards(): boardsApiV2.Board[] {
+		const visitedBoards = localStorage.getItem(this.visitedBoards);
+		if (visitedBoards) {
+			return JSON.parse(visitedBoards);
+		} else {
+			return [];
+		}
+	}
+
+	setCreatedBoards(boards: boardsApiV2.Board[]): void {
+		localStorage.setItem(this.createdBoards, JSON.stringify(boards));
+	}
+
+	setVisitedBoards(boards: boardsApiV2.Board[]): void {
+		localStorage.setItem(this.visitedBoards, JSON.stringify(boards));
+	}
+
+	private filterCreatedBoards(boardId: string): boardsApiV2.Board[] {
+		const boards = this.listCreatedBoards();
+		return boards.filter(board => board.id !== boardId);
+	}
+
+	private filterVisitedBoards(boardId: string): boardsApiV2.Board[] {
+		const boards = this.listVisitedBoards();
+		return boards.filter(board => board.id !== boardId);
+	}
+
+	addCreatedBoard(board: boardsApiV2.Board): void {
+		const filteredBoards = this.filterCreatedBoards(board.id);
+		this.setCreatedBoards([board, ...filteredBoards]);
+	}
+
+	getCreatedBoard(boardId: string): boardsApiV2.Board | undefined {
+		return this.listCreatedBoards().find(board => board.id === boardId);
+	}
+
+	removeCreatedBoard(boardId: string): void {
+		const filteredBoards = this.filterCreatedBoards(boardId);
+		this.setCreatedBoards(filteredBoards);
+	}
+
+	addVisitedBoard(board: boardsApiV2.Board): void {
+		const filteredBoards = this.filterVisitedBoards(board.id);
+		this.setVisitedBoards([board, ...filteredBoards]);
+	}
+
+	getVisitedBoard(boardId: string): boardsApiV2.Board | undefined {
+		return this.listVisitedBoards().find(board => board.id === boardId);
+	}
+
+	removeVisitedBoard(boardId: string): void {
+		const filteredBoards = this.filterVisitedBoards(boardId);
+		this.setVisitedBoards(filteredBoards);
+	}
+
+	hardClean(): void {
+		localStorage.clear();
+	}
+
+	softClean(): void {
+		localStorage.removeItem(this.createdBoards);
+		localStorage.removeItem(this.visitedBoards);
+	}
+
+	renameCreatedBoard(boardId: string, title: string): void {
+		const boards = this.listCreatedBoards();
+		const target = boards.find(({ id }) => id === boardId);
+		if (!target) {
+			return;
+		}
+
+		target.title = title;
+		this.setCreatedBoards(boards);
+	}
+
+	setUser(): string {
+		const uuid = v4();
+		localStorage.setItem(`currentUser`, uuid);
+		return uuid;
+	}
+
+	setUserId(id: string): void {
+		localStorage.setItem(`userId`, id);
+	}
+
+	clearUserId(): void {
+		localStorage.removeItem(`userId`);
+	}
+
+	getUserId(): string | null {
+		return localStorage.getItem(`userId`);
+	}
+
+	getUser(): string | null {
+		return localStorage.getItem(`currentUser`);
+	}
+
+	setUserColor(color: string): void {
+		localStorage.setItem(`userColor`, color);
+	}
+
+	getUserColor(): string | null {
+		return localStorage.getItem(`userColor`);
+	}
+}

package/src/App/Wheel/Wheel.spec.ts

@@ -0,0 +1,40 @@
+import { createWheel } from "./Wheel";
+
+describe("to diagram, a user", () => {
+	test("pans by sliding 2 fingers on a trackpad", () => {
+		let wheel = createWheel({} as WheelEvent);
+		wheel.isWheelDelta = true;
+		wheel.isWheelDeltaX = true;
+		wheel.isWheelDeltaY = true;
+		wheel.isDeltaX = true;
+		wheel.isDeltaY = true;
+		wheel.isShiftKey = false;
+		wheel.isCtrlKey = false;
+		wheel.wheelDelta = -4;
+		wheel.wheelDeltaX = 0;
+		wheel.wheelDeltaY = -4;
+		wheel.deltaX = 0;
+		wheel.deltaY = 4.5;
+		wheel.deltaMode = "pixel";
+
+		wheel = createWheel({} as WheelEvent);
+		wheel.isWheelDelta = true;
+		wheel.isWheelDeltaX = true;
+		wheel.isWheelDeltaY = true;
+		wheel.isDeltaX = true;
+		wheel.isDeltaY = true;
+		wheel.isShiftKey = false;
+		wheel.isCtrlKey = false;
+		wheel.wheelDelta = -1;
+		wheel.wheelDeltaX = 0;
+		wheel.wheelDeltaY = -1;
+		wheel.deltaX = 0;
+		wheel.deltaY = 1.5;
+		wheel.deltaMode = "pixel";
+		expect(wheel.isProbablyMouseWheel()).toBe(false);
+	});
+
+	test("zooms the board by pinching the trackpad", () => {
+		// Implementation for zooming test
+	});
+});

package/src/App/Wheel/Wheel.ts

@@ -0,0 +1,229 @@
+import { isFiniteNumber, toFiniteNumber } from "microboard-temp";
+import { isSafari } from "../isSafari";
+import { MemoryLogger } from "shared/Logger";
+
+export const DeltaModes = ["pixel", "line", "page"] as const;
+
+export type DeltaMode = (typeof DeltaModes)[number];
+
+export interface ChromeWheelEvent extends WheelEvent {
+	wheelDelta?: number;
+	wheelDeltaX?: number;
+	wheelDeltaY?: number;
+}
+
+// const WHEEL_BASE_DELTA = 120;
+
+// function getExpectedWheelDelta(): number {
+// 	return Math.floor(WHEEL_BASE_DELTA / window.devicePixelRatio);
+// }
+
+// function isMouseWheelDelta(wheelDelta: number): boolean {
+// 	const expectedDelta = getExpectedWheelDelta();
+// 	const absWheelDelta = Math.abs(wheelDelta);
+// 	return (
+// 		expectedDelta === absWheelDelta ||
+// 		expectedDelta * 2 === absWheelDelta ||
+// 		expectedDelta * 3 === absWheelDelta
+// 	);
+// }
+
+const detector = createWheelDetector();
+
+interface Wheel {
+	isWheelDelta: boolean;
+	isWheelDeltaX: boolean;
+	isWheelDeltaY: boolean;
+	isDeltaX: boolean;
+	isDeltaY: boolean;
+	isShiftKey: boolean;
+	isCtrlKey: boolean;
+	wheelDelta: number;
+	wheelDeltaX: number;
+	wheelDeltaY: number;
+	deltaX: number;
+	deltaY: number;
+	deltaMode: "pixel" | "line" | "page";
+	getTouchpadPanDeltaX: () => number;
+	getTouchpadPanDeltaY: () => number;
+	getTouchpadPinchMultiplier: () => number;
+	getWheelScaleMultiplier: () => number;
+	isProbablyTouchpadPanHorisontal: () => boolean;
+	isTouchpadPinch: () => boolean;
+	isProbablyMouseWheel: () => boolean;
+	// isIgnore: () => boolean;
+}
+
+export function createWheel(event: ChromeWheelEvent): Wheel {
+	const isWheelDelta = isFiniteNumber(event.wheelDelta);
+	const isWheelDeltaX = isFiniteNumber(event.wheelDeltaX);
+	const isWheelDeltaY = isFiniteNumber(event.wheelDeltaY);
+	const isDeltaX = isFiniteNumber(event.deltaX);
+	const isDeltaY = isFiniteNumber(event.deltaY);
+	const isShiftKey = event.shiftKey;
+	const isCtrlKey = event.ctrlKey;
+	const wheelDelta = toFiniteNumber(event.wheelDelta);
+	const wheelDeltaX = toFiniteNumber(event.wheelDeltaX);
+	const wheelDeltaY = toFiniteNumber(event.wheelDeltaY);
+	const deltaX = toFiniteNumber(event.deltaX);
+	const deltaY = toFiniteNumber(event.deltaY);
+	const deltaMode = getDeltaMode(event);
+	detector.handle(event);
+
+	function getDeltaMode(event): "pixel" | "line" | "page" {
+		switch (event.deltaMode) {
+			case 0:
+				return "pixel";
+			case 1:
+				return "line";
+			case 2:
+				return "page";
+			default:
+				return "line";
+		}
+	}
+
+	function getTouchpadPanDeltaX(): number {
+		return isDeltaX ? -deltaX : isWheelDeltaX ? wheelDeltaX / 3 : 0;
+	}
+
+	function getTouchpadPanDeltaY(): number {
+		return isDeltaY
+			? -deltaY
+			: isWheelDeltaY
+				? wheelDeltaY / 3
+				: wheelDelta / 3;
+	}
+
+	function getTouchpadPinchMultiplier(): number {
+		return Math.exp(getTouchpadPanDeltaY() / 100);
+	}
+
+	function getWheelScaleMultiplier(): number {
+		const delta = isWheelDelta
+			? Math.abs(wheelDelta) * 0.001 + 1
+			: isDeltaY
+				? Math.abs(deltaY) * 0.02 + 1
+				: Math.abs(deltaX) * 0.02 + 1;
+		const isIn = isWheelDelta ? wheelDelta > 0 : deltaY < 0;
+		return isIn ? delta : 1 / delta;
+	}
+
+	function isProbablyTouchpadPanHorisontal(): boolean {
+		return isShiftKey && getTouchpadPanDeltaY() !== 0;
+	}
+
+	function isTouchpadPinch(): boolean {
+		return isCtrlKey;
+	}
+
+	function isProbablyMouseWheel(): boolean {
+		const isChromeMouseWheel = !isCtrlKey && detector.isMouseWheel;
+		const isSafariMouseWheel =
+			isSafari() && wheelDelta !== -deltaY * 3 && deltaY !== 0;
+		return isWheelDelta
+			? isChromeMouseWheel || isSafariMouseWheel
+			: deltaMode !== "pixel";
+	}
+
+	// function isIgnore(): boolean {
+	// 	return detector.isIgnore;
+	// }
+
+	return {
+		isWheelDelta,
+		isWheelDeltaX,
+		isWheelDeltaY,
+		isDeltaX,
+		isDeltaY,
+		isShiftKey,
+		isCtrlKey,
+		wheelDelta,
+		wheelDeltaX,
+		wheelDeltaY,
+		deltaX,
+		deltaY,
+		deltaMode,
+		getTouchpadPanDeltaX,
+		getTouchpadPanDeltaY,
+		getTouchpadPinchMultiplier,
+		getWheelScaleMultiplier,
+		isProbablyTouchpadPanHorisontal,
+		isTouchpadPinch,
+		isProbablyMouseWheel,
+		// isIgnore,
+	};
+}
+
+interface WheelDetector {
+	handle: (event: WheelEvent) => void;
+	readonly isMouseWheel: boolean;
+}
+
+export function createWheelDetector(): WheelDetector {
+	let lastEventTimestamp = performance.now();
+	let isMouseWheel = true;
+	let isTouchpad = true;
+
+	function handle(event: WheelEvent): void {
+		const currentTime = Date.now();
+		const deltaTime = currentTime - lastEventTimestamp;
+		lastEventTimestamp = currentTime;
+
+		if (deltaTime > 200 && !isMouseWheel) {
+			return;
+		}
+
+		const eventJson = getEventDataAsString(event);
+
+		MemoryLogger.setContext("WheelHandler");
+		if (event.ctrlKey) {
+			MemoryLogger.log(
+				`Delta: ${deltaTime}; Touchpad pinch detected: ${eventJson}`,
+			);
+			isMouseWheel = true;
+		} else if (event.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
+			const isSmallDelta = Math.abs(event.deltaY) < 10;
+			isTouchpad = isSmallDelta
+				? deltaTime < 100
+				: deltaTime <= 100 && isTouchpad;
+
+			isMouseWheel = !isTouchpad;
+
+			if (!isMouseWheel) {
+				MemoryLogger.log(
+					`Delta: ${deltaTime}; Is small delta: ${isSmallDelta}; Touchpad scroll detected: ${eventJson}`,
+				);
+			} else {
+				MemoryLogger.log(
+					`Delta: ${deltaTime}; Is small delta: ${isSmallDelta}; Mouse wheel detected: ${eventJson}`,
+				);
+			}
+		}
+	}
+
+	function getEventDataAsString(event: Event): string {
+		let eventData = "";
+		const keys = Object.keys(event).concat(
+			Object.getOwnPropertyNames(Object.getPrototypeOf(event)),
+		);
+		keys.forEach(key => {
+			try {
+				const value = event[key as keyof Event];
+				if (typeof value !== "function") {
+					eventData += `${key}: ${value}, `;
+				}
+			} catch (error) {
+				eventData += `${key}: [unavailable], `;
+			}
+		});
+		return eventData;
+	}
+
+	return {
+		handle,
+		get isMouseWheel() {
+			return isMouseWheel;
+		},
+	};
+}