microboard-ui-temp 0.0.3

package/src/entities/Canvas/Canvas.tsx

@@ -0,0 +1,250 @@
+import { App } from "App";
+import { Subscription } from "App/getSubscriptions";
+import { Board, DrawingContext } from "microboard-temp";
+import * as React from "react";
+import { WithRouterProps, withRouter } from "shared/lib/withRouter";
+
+export interface Props extends WithRouterProps {
+	app: App;
+	board: Board;
+	children?: React.ReactNode;
+}
+
+export class CanvasBase extends React.Component<Props> {
+	stageRef = React.createRef<HTMLDivElement>();
+	canvasRef = React.createRef<HTMLCanvasElement>();
+	cursorsCanvasRef = React.createRef<HTMLCanvasElement>();
+	options = {
+		pointerdown: {},
+		pointerup: {},
+		click: {},
+	};
+
+	updateCursor = (): void => {
+		const stage = this.stageRef.current;
+		if (stage) {
+			stage.style.cursor = this.props.board.pointer.getCursor();
+		}
+	};
+
+	renderToContext = (): void => {
+		const canvas = this.canvasRef.current;
+		const cursorsCanvas = this.cursorsCanvasRef.current;
+		if (!canvas || !cursorsCanvas) {
+			return;
+		}
+		const ctx = canvas.getContext("2d");
+		const cursorsCtx = cursorsCanvas.getContext("2d");
+		if (!ctx || !cursorsCtx) {
+			return;
+		}
+		const context = new DrawingContext(
+			this.props.board.camera,
+			ctx,
+			cursorsCtx,
+		);
+		const { board } = this.props;
+
+		context.setCamera(board.camera);
+		context.clear();
+		context.clearCursor();
+
+		board.items.render(context);
+		board.selection.render(context);
+		board.tools.render(context);
+		board.presence.render(context);
+	};
+
+	initCanvasRendering = (): void => {
+		this.renderToContext();
+		this.props.app.subscriptions.add(this.drawingContextSubscription);
+		this.props.app.subscriptions.add(this.cursorSubscription);
+		this.props.app.subscriptions.add(this.resizeSubscription);
+	};
+
+	componentDidUpdate(prevProps: Readonly<Props>): void {
+		if (
+			// @ts-expect-error boardId didn't exist in params record
+			prevProps.router.params?.boardId !==
+			// @ts-expect-error boardId didn't exist in params record
+			this.props.router.params?.boardId
+		) {
+			this.initCanvasRendering();
+		}
+	}
+
+	componentDidMount(): void {
+		const stage = this.stageRef.current;
+		const controller = this.props.app.controller;
+		if (stage) {
+			stage.addEventListener(
+				"pointerdown",
+				event => {
+					controller.onPointerDown(event);
+					if (event.target) {
+						(event.target as HTMLElement).setPointerCapture(
+							event.pointerId,
+						);
+					}
+				},
+				{ capture: true },
+			);
+
+			stage.addEventListener(
+				"pointerup",
+				event => {
+					controller.onPointerUp(event);
+					if (event.target) {
+						(event.target as HTMLElement).releasePointerCapture(
+							event.pointerId,
+						);
+					}
+				},
+				{ capture: true },
+			);
+
+			stage.addEventListener("pointermove", controller.onPointerMove, {
+				capture: true,
+			});
+			stage.addEventListener("dblclick", controller.onClick);
+		}
+
+		this.initCanvasRendering();
+	}
+
+	componentWillUnmount(): void {
+		const stage = this.stageRef.current;
+		const controller = this.props.app.controller;
+		if (stage) {
+			stage.removeEventListener("pointerdown", controller.onPointerDown, {
+				capture: true,
+			});
+			stage.removeEventListener("pointerup", controller.onPointerUp, {
+				capture: true,
+			});
+			stage.removeEventListener("dblclick", controller.onClick);
+		}
+		this.props.app.subscriptions.remove(this.drawingContextSubscription);
+		this.props.app.subscriptions.remove(this.cursorSubscription);
+		this.props.app.subscriptions.remove(this.resizeSubscription);
+	}
+
+	drawingContextSubscription: Subscription = {
+		observer: () => {
+			this.renderToContext();
+		},
+		subjects: ["camera", "items", "tools", "selection", "presence"],
+	};
+
+	cursorSubscription: Subscription = {
+		observer: this.updateCursor,
+		subjects: ["pointer", "presence"],
+	};
+
+	resizeSubscription: Subscription = {
+		observer: () => {
+			this.forceUpdate();
+		},
+		subjects: ["cameraResize"],
+	};
+
+	render(): React.ReactElement {
+		const board = this.props.board;
+		const { width, height } = board.camera.window;
+		return (
+			<div
+				id="CanvasContainer"
+				className="NoContextMenu"
+				ref={this.stageRef}
+				style={{
+					position: "relative",
+					padding: "0px",
+					margin: "0px",
+					border: "0px",
+					background: "rgb(246, 246, 246)",
+					cursor: board.pointer.getCursor(),
+					top: "0px",
+					left: "0px",
+					display: "block",
+					width: `${width}px`,
+					height: `${height}px`,
+				}}
+				onContextMenu={ev => ev.preventDefault()}
+			>
+				<canvas
+					ref={this.canvasRef}
+					width={Math.floor(width * window.devicePixelRatio)}
+					height={Math.floor(height * window.devicePixelRatio)}
+					className="NoContextMenu"
+					style={{
+						pointerEvents: "none",
+						position: "absolute",
+						zIndex: 1,
+						padding: "0px",
+						margin: "0px",
+						border: "0px",
+						background: "none",
+						top: "0px",
+						left: "0px",
+						display: "block",
+						width: `${width}px`,
+						height: `${height}px`,
+					}}
+				/>
+
+				<canvas
+					width={Math.floor(width * window.devicePixelRatio)}
+					height={Math.floor(height * window.devicePixelRatio)}
+					className="NoContextMenu"
+					id="ExportLayer"
+					style={{
+						zIndex: 1,
+						padding: "0px",
+						margin: "0px",
+						border: "0px",
+						background: "transparent",
+						top: "0px",
+						left: "0px",
+						position: "absolute",
+						width: `${width}px`,
+						height: `${height}px`,
+						pointerEvents: "none",
+					}}
+				/>
+
+				<canvas
+					ref={this.cursorsCanvasRef}
+					width={Math.floor(width * window.devicePixelRatio)}
+					height={Math.floor(height * window.devicePixelRatio)}
+					className="NoContextMenu"
+					style={{
+						zIndex: 1,
+						padding: "0px",
+						margin: "0px",
+						border: "0px",
+						background: "transparent",
+						top: "0px",
+						left: "0px",
+						position: "absolute",
+						display: "block",
+						width: `${width}px`,
+						height: `${height}px`,
+						pointerEvents: "none",
+					}}
+				/>
+				<div
+					style={{
+						position: "relative",
+						zIndex: 0,
+						width: `${width}px`,
+						height: `${height}px`,
+					}}
+				>
+					{this.props.children}
+				</div>
+			</div>
+		);
+	}
+}
+
+export const Canvas = withRouter(CanvasBase);

package/src/entities/Canvas/CanvasNoRouter.tsx

@@ -0,0 +1,216 @@
+import { App } from "App";
+import { Subscription } from "App/getSubscriptions";
+import { DrawingContext, Board } from "microboard-temp";
+import React, { useCallback, useEffect, useRef } from "react";
+
+interface Props {
+	app: App;
+	board: Board;
+	children?: React.ReactNode;
+}
+
+export const CanvasNoRouter: React.FC<Props> = ({ app, board, children }) => {
+	const stageRef = useRef<HTMLDivElement>(null);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const cursorsCanvasRef = useRef<HTMLCanvasElement>(null);
+
+	const updateCursor = useCallback((): void => {
+		const stage = stageRef.current;
+		if (stage) {
+			stage.style.cursor = board.pointer.getCursor();
+		}
+	}, [board]);
+
+	const renderToContext = useCallback((): void => {
+		const canvas = canvasRef.current;
+		const cursorsCanvas = cursorsCanvasRef.current;
+		if (!canvas || !cursorsCanvas) {
+			return;
+		}
+		const ctx = canvas.getContext("2d");
+		const cursorsCtx = cursorsCanvas.getContext("2d");
+		if (!ctx || !cursorsCtx) {
+			return;
+		}
+		const context = new DrawingContext(board.camera, ctx, cursorsCtx);
+
+		context.setCamera(board.camera);
+		context.clear();
+		context.clearCursor();
+		board.items.render(context);
+		board.selection.render(context);
+		board.tools.render(context);
+		board.presence.render(context);
+	}, [board]);
+
+	const initCanvasRendering = useCallback((): void => {
+		renderToContext();
+		app.subscriptions.add(drawingContextSubscription);
+		app.subscriptions.add(cursorSubscription);
+		app.subscriptions.add(resizeSubscription);
+	}, [app, renderToContext]);
+
+	useEffect(() => {
+		const stage = stageRef.current;
+		const controller = app.controller;
+		if (stage) {
+			const handlePointerDown = (event: PointerEvent): void => {
+				controller.onPointerDown(event);
+				if (event.target) {
+					(event.target as HTMLElement).setPointerCapture(
+						event.pointerId,
+					);
+				}
+			};
+
+			const handlePointerUp = (event: PointerEvent): void => {
+				controller.onPointerUp(event);
+				if (event.target) {
+					(event.target as HTMLElement).releasePointerCapture(
+						event.pointerId,
+					);
+				}
+			};
+
+			stage.addEventListener("pointerdown", handlePointerDown, {
+				capture: true,
+			});
+			stage.addEventListener("pointerup", handlePointerUp, {
+				capture: true,
+			});
+			stage.addEventListener("pointermove", controller.onPointerMove, {
+				capture: true,
+			});
+			stage.addEventListener("dblclick", controller.onClick);
+
+			initCanvasRendering();
+
+			return () => {
+				stage.removeEventListener("pointerdown", handlePointerDown, {
+					capture: true,
+				});
+				stage.removeEventListener("pointerup", handlePointerUp, {
+					capture: true,
+				});
+				stage.removeEventListener("dblclick", controller.onClick);
+				stage.removeEventListener(
+					"pointermove",
+					controller.onPointerMove,
+				);
+				app.subscriptions.remove(drawingContextSubscription);
+				app.subscriptions.remove(cursorSubscription);
+				app.subscriptions.remove(resizeSubscription);
+			};
+		}
+
+		return () => {};
+	}, [app, initCanvasRendering]);
+
+	const drawingContextSubscription: Subscription = {
+		observer: renderToContext,
+		subjects: ["camera", "items", "tools", "selection", "presence"],
+	};
+
+	const cursorSubscription: Subscription = {
+		observer: updateCursor,
+		subjects: ["pointer", "presence"],
+	};
+
+	const resizeSubscription: Subscription = {
+		observer: renderToContext,
+		subjects: ["cameraResize"],
+	};
+
+	const { width, height } = board.camera.window;
+	return (
+		<div
+			id="CanvasContainer"
+			className="NoContextMenu"
+			ref={stageRef}
+			style={{
+				position: "relative",
+				padding: "0px",
+				margin: "0px",
+				border: "0px",
+				background: "rgb(246, 246, 246)",
+				cursor: board.pointer.getCursor(),
+				top: "0px",
+				left: "0px",
+				display: "block",
+				width: `${width}px`,
+				height: `${height}px`,
+			}}
+		>
+			<canvas
+				ref={canvasRef}
+				width={Math.floor(width * window.devicePixelRatio)}
+				height={Math.floor(height * window.devicePixelRatio)}
+				className="NoContextMenu"
+				style={{
+					zIndex: 1,
+					pointerEvents: "none",
+					padding: "0px",
+					margin: "0px",
+					border: "0px",
+					background: "none",
+					top: "0px",
+					left: "0px",
+					display: "block",
+					width: `${width}px`,
+					height: `${height}px`,
+				}}
+			/>
+
+			<canvas
+				width={Math.floor(width * window.devicePixelRatio)}
+				height={Math.floor(height * window.devicePixelRatio)}
+				className="NoContextMenu"
+				id="ExportLayer"
+				style={{
+					zIndex: 1,
+					pointerEvents: "none",
+					padding: "0px",
+					margin: "0px",
+					border: "0px",
+					background: "transparent",
+					top: "0px",
+					left: "0px",
+					position: "absolute",
+					width: `${width}px`,
+					height: `${height}px`,
+				}}
+			/>
+
+			<canvas
+				ref={cursorsCanvasRef}
+				width={Math.floor(width * window.devicePixelRatio)}
+				height={Math.floor(height * window.devicePixelRatio)}
+				className="NoContextMenu"
+				style={{
+					zIndex: 1,
+					padding: "0px",
+					margin: "0px",
+					border: "0px",
+					background: "transparent",
+					top: "0px",
+					left: "0px",
+					position: "absolute",
+					display: "block",
+					width: `${width}px`,
+					height: `${height}px`,
+					pointerEvents: "none",
+				}}
+			/>
+			<div
+				style={{
+					position: "relative",
+					zIndex: 0,
+					width: `${width}px`,
+					height: `${height}px`,
+				}}
+			>
+				{children}
+			</div>
+		</div>
+	);
+};

package/src/entities/Canvas/index.ts

@@ -0,0 +1,2 @@
+export { Canvas } from "./Canvas";
+export { CanvasNoRouter } from "./CanvasNoRouter";

package/src/entities/Folder/DragOverlay.tsx

@@ -0,0 +1,52 @@
+import { useBoardsList } from "App/useBoardsList";
+import React from "react";
+import { Icon } from "shared/ui-lib/Icon";
+import styles from "./DraggingItem.module.css";
+import { folderIcons } from "./Folder";
+
+export function DraggingItem() {
+	const boardsList = useBoardsList();
+	const itemInfo = boardsList.getDraggableDndItem();
+
+	if (!itemInfo) {
+		return null;
+	}
+
+	const boardItem =
+		itemInfo.itemType === "board"
+			? boardsList.getBoardInfo(itemInfo.id as string)
+			: null;
+
+	if (boardItem) {
+		return (
+			<div className={styles.item}>
+				<Icon
+					width={20}
+					height={20}
+					iconName={boardItem.isPublic ? "EmbedBoardIcon" : "lock"}
+				/>
+				<span>{boardItem.title}</span>
+			</div>
+		);
+	}
+
+	const folderItem =
+		itemInfo.itemType === "folder"
+			? boardsList.getFolder(itemInfo.id as number)
+			: null;
+
+	if (folderItem) {
+		return (
+			<div className={styles.item}>
+				<Icon
+					width={20}
+					height={20}
+					iconName={folderIcons[folderItem.type]}
+				/>
+				<span>{folderItem.title}</span>
+			</div>
+		);
+	}
+
+	return null;
+}

package/src/entities/Folder/DragPlaceholder.module.css

@@ -0,0 +1,5 @@
+.placeholder {
+	background-color: rgb(200, 202, 208);
+	width: 100%;
+	height: 2px;
+}

package/src/entities/Folder/DragPlaceholder.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "./DragPlaceholder.module.css";
+
+export function DragPlaceholder() {
+	return <div className={styles.placeholder}></div>;
+}

package/src/entities/Folder/DraggingItem.module.css

@@ -0,0 +1,8 @@
+.item {
+	display: flex;
+	align-items: center;
+	background-color: rgb(247, 247, 248);
+	gap: 4px;
+	padding: 8px 16px;
+	border: 1px solid #c8cad0;
+}

package/src/entities/Folder/DraggingWrapper.tsx

@@ -0,0 +1,18 @@
+import { DragOverlay } from "@dnd-kit/core";
+import React, { type PropsWithChildren } from "react";
+import { createPortal } from "react-dom";
+
+type Props = PropsWithChildren<{}>;
+
+export function DraggingWrapper({ children }: Props) {
+	return (
+		<>
+			{createPortal(
+				<DragOverlay>
+					<div>{children}</div>
+				</DragOverlay>,
+				document.getElementById("drag")!,
+			)}
+		</>
+	);
+}

package/src/entities/Folder/Folder.module.css

@@ -0,0 +1,113 @@
+.folder {
+	position: relative;
+}
+
+.wrapper {
+	width: 100%;
+	position: relative;
+}
+.header {
+	display: flex;
+	gap: 8px;
+	color: rgba(20, 21, 26, 1);
+	font-size: 14px;
+	align-items: center;
+	font-weight: 500;
+	padding: 6px 8px;
+	cursor: pointer;
+	transition: background 0.3s ease;
+	border-radius: 10px;
+	font-family: Manrope;
+	width: 100%;
+}
+
+.header.over {
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+@media screen and (hover: hover) {
+	.header:hover {
+		background-color: rgba(10, 15, 41, 0.04);
+	}
+}
+
+.icon {
+	color: rgb(105, 107, 117);
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.noContent {
+	color: rgba(10, 15, 41, 0.25);
+	font-weight: 500;
+	font-size: 14px;
+}
+
+.contentWrapper {
+	padding-left: 18px;
+	padding-right: 2px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+.content {
+	border-left: 1px solid #dee0e3;
+	padding-left: 6px;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.fadeEnter {
+	opacity: 0;
+	transform: translateX(-6px);
+}
+.fadeEnterActive {
+	opacity: 1;
+	transform: translateX(0px);
+	transition:
+		opacity 500ms,
+		transform 500ms;
+}
+.fadeExit {
+	opacity: 1;
+	transform: translateX(0);
+}
+.fadeExitActive {
+	opacity: 0;
+	transform: translateX(-6px);
+	transition:
+		opacity 500ms,
+		transform 500ms;
+}
+
+.contextMenuBtn {
+	place-items: center;
+	position: absolute;
+	right: 8px;
+	top: 50%;
+	transform: translateY(-50%);
+	cursor: pointer;
+	color: rgba(105, 107, 118, 1);
+	transition: background 0.3s ease;
+	border-radius: 4px;
+	padding: 2px;
+	z-index: 5;
+	display: none;
+}
+
+@media screen and (hover: hover) {
+	.header:hover,
+	.contextMenuBtn:hover ~ .header {
+		background-color: rgba(10, 15, 41, 0.04);
+	}
+	.contextMenuBtn:hover {
+		background-color: rgba(10, 15, 41, 0.08);
+	}
+
+	.wrapper:hover .contextMenuBtn,
+	.contextMenuBtn:hover {
+		display: grid;
+	}
+}