microboard-ui-temp 0.0.3

package/src/features/ContextPanel/Buttons/FrameFill.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { ButtonWithMenu } from "features/ContextPanel/Buttons/ButtonWithMenu";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { FillColorIndicator } from "shared/ui-lib/Icon/FillColorIndicator";
+import { ColorPicker } from "features/Pickers/ColorPicker/ColorPicker";
+import { UiColorInput } from "shared/ui-lib/UiColorInput";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import btnStyle from "./ContextPanelButton.module.css";
+import { FRAME_FILL_COLORS } from "microboard-temp";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+const MENU_NAME = "FrameFill";
+
+export function FrameFill(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const fillColor = board.selection.getFillColor();
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+
+	const handlePick = (color: string): void => {
+		board.selection.setFillColor(color);
+		toggleMenu("None");
+	};
+
+	const handleCustomPick = (color: string): void => {
+		board.selection.setFillColor(color);
+	};
+
+	const isPredefinedColor = FRAME_FILL_COLORS.some(
+		color => color === fillColor,
+	);
+
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={
+				<UiButton
+					className={btnStyle.contextPanelButton}
+					id={"fill-style"}
+					onClick={handleClick}
+					tooltip={t("contextPanel.frameColor.tooltip")}
+					tooltipPosition="top"
+					variant="secondary"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+					rounded="none"
+				>
+					<FillColorIndicator
+						width={24}
+						height={24}
+						color={fillColor}
+					/>
+				</UiButton>
+			}
+		>
+			{verticalAlign => (
+				<UiPanel
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+					grid
+					columns={4}
+					gap={8}
+				>
+					<ColorPicker
+						id={"fill-style"}
+						selectedColor={fillColor}
+						colors={FRAME_FILL_COLORS}
+						onPick={handlePick}
+					/>
+					<UiColorInput
+						onChange={handleCustomPick}
+						color={isPredefinedColor ? "none" : fillColor}
+						isActive={fillColor !== "none" && !isPredefinedColor}
+						toggleMenu={toggleMenu}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

package/src/features/ContextPanel/Buttons/FrameNavNext.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import { RestOptionsMenuItem } from "./RestOptionsMenu/RestOptionsMenuItem";
+import { useTranslation } from "react-i18next";
+import { Icon } from "shared/ui-lib/Icon";
+import { getHotkeyLabel } from "microboard-temp";
+import styles from "./ContextPanelButton.module.css";
+
+export function FrameNavNext(): JSX.Element {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handleFrameNavNext = (): void => {
+		board.tools.frameNavigation("next");
+	};
+
+	return (
+		<RestOptionsMenuItem
+			onClick={handleFrameNavNext}
+			icon={
+				<Icon
+					width={15}
+					height={20}
+					iconName="ArrowRightFill"
+					className={styles.frameNavIcon}
+				/>
+			}
+			hotkey={getHotkeyLabel("frameNavigationNext")}
+		>
+			{t("contextPanel.frameNavigation.next")}
+		</RestOptionsMenuItem>
+	);
+}

package/src/features/ContextPanel/Buttons/FrameNavPrev.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import { RestOptionsMenuItem } from "./RestOptionsMenu/RestOptionsMenuItem";
+import { useTranslation } from "react-i18next";
+import { Icon } from "shared/ui-lib/Icon";
+import { getHotkeyLabel } from "microboard-temp";
+import styles from "./ContextPanelButton.module.css";
+import clsx from "clsx";
+
+export function FrameNavPrev(): JSX.Element {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handleFrameNavPrev = (): void => {
+		board.tools.frameNavigation("prev");
+	};
+
+	return (
+		<RestOptionsMenuItem
+			onClick={handleFrameNavPrev}
+			icon={
+				<Icon
+					width={15}
+					height={20}
+					iconName="ArrowRightFill"
+					className={clsx(
+						styles.frameNavIcon,
+						styles.frameNavIconPrev,
+					)}
+				/>
+			}
+			hotkey={getHotkeyLabel("frameNavigationPrev")}
+		>
+			{t("contextPanel.frameNavigation.prev")}
+		</RestOptionsMenuItem>
+	);
+}

package/src/features/ContextPanel/Buttons/FrameRatio/FrameRatio.module.css

@@ -0,0 +1,14 @@
+.menuOpened {
+	border-bottom-left-radius: 0;
+}
+
+.button {
+	min-width: 66px;
+	font-weight: 500;
+	font-size: 1.6rem;
+}
+
+.word {
+	font-size: 1rem;
+	font-weight: 600;
+}

package/src/features/ContextPanel/Buttons/FrameRatio/FrameRatio.tsx

@@ -0,0 +1,113 @@
+import clsx from "clsx";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { ButtonWithMenu } from "features/ContextPanel/Buttons/ButtonWithMenu";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { FramePicker } from "features/Pickers/FramePicker";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import style from "./FrameRatio.module.css";
+import btnStyle from "../ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { conf, Frame, FrameType } from "microboard-temp";
+const { i18n } = conf;
+
+const MENU_NAME = "FrameType";
+
+const frameTypeTitle: Record<FrameType, string> = {
+	A4: "A4",
+	Letter: "Letter",
+	Frame16x9: "16 : 9",
+	Frame4x3: "4 : 3",
+	Frame1x1: "1 : 1",
+	// Custom: i18n.t("frame.custom"),
+	Custom: "Custom",
+	Frame3x2: "3 : 2",
+	Frame9x18: "9 : 18",
+};
+
+export function FrameRatio(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const frameType = board.selection.getFrameType();
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+
+	const handlePick = (type: FrameType): void => {
+		board.selection.setFrameType(type);
+		toggleMenu("None");
+	};
+	const selectedFrames = board.selection.list() as Frame[];
+	const handlePointerEnter = (type: FrameType): void => {
+		selectedFrames.forEach(frame => {
+			frame.setNewShape(type);
+		});
+	};
+	const handlePointerLeave = (): void => {
+		selectedFrames.forEach(frame => {
+			frame.setNewShape(null);
+		});
+	};
+
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={verticalAlign => (
+				<UiButton
+					id="item-type"
+					tooltip={t("contextPanel.changeFrameType.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+					rounded="left"
+					className={clsx(
+						btnStyle.contextPanelButton,
+						verticalAlign === "bottom" &&
+							openedMenu === MENU_NAME &&
+							style.menuOpened,
+						style.button,
+						{
+							[style.word]:
+								frameType === "Custom" ||
+								frameType === "Letter",
+						},
+					)}
+				>
+					{selectedFrames.length > 1 ? (
+						<Icon iconName="Frame" />
+					) : (
+						frameTypeTitle[frameType]
+					)}
+				</UiButton>
+			)}
+		>
+			{verticalAlign => (
+				<UiPanel
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+					grid
+					columns={4}
+					gap={4}
+				>
+					<FramePicker
+						selected={frameType}
+						onPick={handlePick}
+						onPointerEnter={handlePointerEnter}
+						onPointerLeave={handlePointerLeave}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

package/src/features/ContextPanel/Buttons/FrameRatio/index.ts

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

package/src/features/ContextPanel/Buttons/HyperLinkBtn.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import { useTranslation } from "react-i18next";
+import { useHyperLinkContext } from "features/hyperLink/HyperLinkContext";
+import { useAppContext } from "features/AppContext";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+export const HyperLinkBtn = () => {
+	const { t } = useTranslation();
+	const { setIsEditingLink, isEditingLink, hyperLinkData, setHyperLinkData } =
+		useHyperLinkContext();
+
+	const { board } = useAppContext();
+
+	useEffect(() => {
+		if (isEditingLink && hyperLinkData) {
+			if (board.selection.getContext() === "EditTextUnderPointer") {
+				board.selection.setContext("EditUnderPointer");
+			}
+		}
+	}, [isEditingLink]);
+
+	const toggleIsEditing = () => {
+		if (!isEditingLink && !hyperLinkData) {
+			setHyperLinkData({
+				isWatchMode: false,
+				inputPosition: null,
+				selection: null,
+			});
+		}
+		setIsEditingLink(!isEditingLink);
+	};
+
+	return (
+		<UiButton
+			id="Hyperlink"
+			tooltip={
+				isEditingLink ? undefined : t("contextPanel.hyperLink.tooltip")
+			}
+			onClick={toggleIsEditing}
+			variant="secondary"
+			tooltipPosition="top"
+			rounded="none"
+			disabled={
+				!hyperLinkData &&
+				board.selection.getContext() === "EditTextUnderPointer"
+			}
+			active={isEditingLink}
+		>
+			<Icon iconName="Hyperlink" />
+		</UiButton>
+	);
+};

package/src/features/ContextPanel/Buttons/ItemType/ItemType.module.css

@@ -0,0 +1,15 @@
+.panel {
+	display: grid;
+	grid-template-columns: repeat(3, 32px);
+}
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 8px;
+}
+
+.menuBottom {
+	border-bottom-left-radius: 0;
+}

package/src/features/ContextPanel/Buttons/ItemType/ItemType.tsx

@@ -0,0 +1,115 @@
+import { ShapeCategoryName, Shape, ShapeType } from "microboard-temp";
+import clsx from "clsx";
+import { useAppContext } from "features/AppContext";
+import { ButtonWithMenu } from "features/ContextPanel/Buttons/ButtonWithMenu";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { ShapePicker } from "features/Pickers/ShapeTypePicker";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Icon, ShapeIcon } from "shared/ui-lib/Icon";
+import { UiAccordion } from "shared/ui-lib/UiAccordion";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import btnStyle from "../ContextPanelButton.module.css";
+import style from "./ItemType.module.css";
+
+const MENU_NAME = "ItemType";
+
+const getCategoryName = (shapeType: ShapeType): ShapeCategoryName => {
+	const separated = shapeType.split("_");
+	if (separated.length === 1) {
+		return "basicShapes";
+	}
+	return separated[0] as ShapeCategoryName;
+};
+
+export function ItemType(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+	const handlePick = (type: ShapeType): void => {
+		board.selection.setShapeType(type);
+		toggleMenu("None");
+	};
+
+	const selectedShapes = board.selection
+		.list()
+		.filter(i => i.itemType === "Shape") as Shape[];
+
+	const shapeCategory = getCategoryName(selectedShapes[0].getShapeType());
+
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={verticalAlign => (
+				<UiButton
+					id="item-type"
+					tooltip={t("contextPanel.changeShape.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+					rounded="left"
+					className={clsx(
+						btnStyle.contextPanelButton,
+						verticalAlign === "bottom" &&
+							openedMenu === MENU_NAME &&
+							style.menuBottom,
+					)}
+				>
+					{selectedShapes.length > 1 ? (
+						<Icon iconName="Shape" />
+					) : (
+						<ShapeIcon
+							iconName={selectedShapes[0].getShapeType()}
+						/>
+					)}
+				</UiButton>
+			)}
+		>
+			{verticalAlign => (
+				<UiPanel
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+				>
+					<UiAccordion
+						className={style.wrapper}
+						contentClassName={style.panel}
+						closedHeight={128}
+						openedHeight={300}
+						renderButton={(toggle, isOpen) => (
+							<UiButton
+								onClick={toggle}
+								variant="tertiary"
+								size="sm"
+							>
+								{isOpen
+									? t("toolsPanel.addShape.showBasic")
+									: t("toolsPanel.addShape.showAll")}
+							</UiButton>
+						)}
+					>
+						<ShapePicker
+							categoryName={shapeCategory}
+							selected={
+								selectedShapes.length === 1
+									? selectedShapes[0].getShapeType()
+									: "None"
+							}
+							onPick={handlePick}
+						/>
+					</UiAccordion>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

package/src/features/ContextPanel/Buttons/ItemType/index.ts

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

package/src/features/ContextPanel/Buttons/Lock.tsx

@@ -0,0 +1,98 @@
+import { Group } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import btnStyle from "./ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+type Props = {
+	rounded?: "none" | "left";
+};
+
+export const Lock = ({
+	rounded = "none",
+}: Props): React.ReactElement | null => {
+	const { t } = useTranslation();
+	const { board } = useAppContext();
+	const selectedItems = board.selection.list();
+	let isLocked = false;
+
+	if (selectedItems.length > 1) {
+		isLocked = !selectedItems.some(item => !item.transformation.isLocked);
+	} else if (selectedItems.length === 1) {
+		isLocked = selectedItems[0].transformation.isLocked;
+	}
+
+	const handleClick = (): void => {
+		if (
+			selectedItems.length > 1 ||
+			(selectedItems.length === 1 && selectedItems[0] instanceof Group)
+		) {
+			const isLocked = selectedItems.every(
+				item => item.transformation.isLocked,
+			);
+
+			if (!isLocked) {
+				const lockedIds = selectedItems.map(item => item.getId());
+				const group = board.addLockedGroup(
+					new Group(board, undefined, lockedIds, undefined),
+				);
+				group.setBoard(board);
+
+				board.tools.getSelect()?.nestingHighlighter.clear();
+				if (
+					board.selection.items.getSingle()?.itemType !== "Connector"
+				) {
+					board.selection.setContext("None");
+				}
+				return;
+			}
+
+			const groupId = selectedItems[0].getId();
+			const group = board.items.getById(groupId);
+
+			if (!(group instanceof Group)) {
+				return;
+			}
+
+			board.removeLockedGroup(group);
+			return;
+		}
+
+		const item = selectedItems[0];
+		const isLocked = item.transformation.isLocked;
+		item.transformation.setIsLocked(!isLocked);
+
+		if (isLocked) {
+			board.tools.getSelect()?.nestingHighlighter.clear();
+			if (board.selection.items.getSingle()?.itemType !== "Connector") {
+				board.selection.setContext("None");
+			}
+		}
+	};
+
+	const tooltip = isLocked
+		? t("contextPanel.unlock.tooltip")
+		: t("contextPanel.lock.tooltip");
+
+	const icon = isLocked ? (
+		<Icon iconName="lock" />
+	) : (
+		<Icon iconName="unlock" />
+	);
+
+	return (
+		<UiButton
+			className={btnStyle.contextPanelButton}
+			id={"lock"}
+			onClick={handleClick}
+			variant="secondary"
+			rounded={rounded}
+			tooltip={tooltip}
+			tooltipPosition="top"
+		>
+			{icon}
+		</UiButton>
+	);
+};

package/src/features/ContextPanel/Buttons/RestOptionsMenu/Items/BringToFront.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { RestOptionsMenuItem } from "../RestOptionsMenuItem";
+import React from "react";
+import { Icon } from "shared/ui-lib/Icon";
+import { getHotkeyLabel } from "microboard-temp";
+
+export function BringToFront(): JSX.Element {
+	const { board } = useAppContext();
+	const { toggleMenu } = usePanelContext();
+	const { t } = useTranslation();
+
+	const handleBringToFront = (): void => {
+		board.selection.bringToFront();
+		toggleMenu("None");
+	};
+
+	return (
+		<RestOptionsMenuItem
+			onClick={handleBringToFront}
+			icon={<Icon width={20} height={20} iconName="BringToFront" />}
+			hotkey={getHotkeyLabel("bringToFront")}
+		>
+			{t("contextPanel.bringToFront.text")}
+		</RestOptionsMenuItem>
+	);
+}

package/src/features/ContextPanel/Buttons/RestOptionsMenu/Items/CopyFrameLink.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { RestOptionsMenuItem } from "../RestOptionsMenuItem";
+import React from "react";
+import { Frame } from "microboard-temp";
+import { notify } from "shared/ui-lib/Toast";
+import { Icon } from "shared/ui-lib/Icon";
+import { getLinkToItem } from "./getLinkToItem";
+
+export function CopyFrameLink(): JSX.Element {
+	const { board } = useAppContext();
+	const { toggleMenu } = usePanelContext();
+	const { t } = useTranslation();
+
+	const handleCopyFrameLink = async (): Promise<void> => {
+		const item = board.selection.items.getSingle();
+
+		if (item instanceof Frame) {
+			try {
+				await navigator.clipboard.writeText(
+					getLinkToItem(item.getId()),
+				);
+				notify({
+					body: t("contextPanel.copyFrameLink.success.description"),
+					variant: "success",
+					duration: Number.POSITIVE_INFINITY,
+				});
+			} catch (err) {
+				console.error(err);
+				notify({
+					header: t("contextPanel.copyFrameLink.error.title"),
+					body: t("contextPanel.copyFrameLink.error.description"),
+					variant: "error",
+				});
+			}
+		}
+
+		toggleMenu("None");
+	};
+
+	return (
+		<RestOptionsMenuItem
+			onClick={handleCopyFrameLink}
+			icon={<Icon width={20} height={20} iconName="CopyLink" />}
+		>
+			{t("contextPanel.copyFrameLink.text")}
+		</RestOptionsMenuItem>
+	);
+}