microboard-ui-temp 0.0.3

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

@@ -0,0 +1,32 @@
+import { SliderPicker } from "features/Pickers/SliderPicker/SliderPicker";
+import { conf } from "microboard-temp";
+import React from "react";
+import style from "./DrawStrokeWidth.module.css";
+import { useAppContext } from "features/AppContext";
+
+export function DrawStrokeWidth(): React.ReactElement {
+	const { board } = useAppContext();
+
+	const width = board.selection.getStrokeWidth();
+
+	const handleSliderPick = (width: number): void => {
+		board.selection.setStrokeWidth(width);
+	};
+
+	return (
+		<div className={style.container}>
+			<SliderPicker
+				id={"drawing-stroke-width"}
+				value={
+					width < conf.PEN_MAX_STROKE_WIDTH
+						? width
+						: conf.PEN_MAX_STROKE_WIDTH
+				}
+				onPick={handleSliderPick}
+				min={conf.PEN_MIN_STROKE_WIDTH}
+				max={conf.PEN_MAX_STROKE_WIDTH}
+				step={conf.PEN_STEP_STROKE_WIDTH}
+			/>
+		</div>
+	);
+}

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

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

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

@@ -0,0 +1,25 @@
+import { Icon } from "shared/ui-lib/Icon";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { getHotkeyLabel } from "microboard-temp";
+import { RestOptionsMenuItem } from "features/ContextPanel/Buttons/RestOptionsMenu/RestOptionsMenuItem";
+
+export function Duplicate(): React.ReactElement {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handleClick = (): void => {
+		board.selection.duplicate();
+	};
+
+	return (
+		<RestOptionsMenuItem
+			onClick={handleClick}
+			icon={<Icon width={20} height={20} iconName="Duplicate" />}
+			hotkey={getHotkeyLabel("duplicate")}
+		>
+			{t("contextPanel.duplicate.tooltip")}
+		</RestOptionsMenuItem>
+	);
+}

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "./ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+export function Edit(): React.ReactElement | null {
+	const { board } = useAppContext();
+
+	const handleClick = (): void => {
+		board.selection.editSelected();
+	};
+	return (
+		<UiButton
+			className={btnStyle.contextPanelButton}
+			id="ContextPanelEdit"
+			onClick={handleClick}
+			rounded="left"
+			variant="secondary"
+		>
+			Edit
+		</UiButton>
+	);
+}

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

@@ -0,0 +1,14 @@
+.button {
+	--min-width: 76px;
+}
+
+.bottom {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
+
+.top {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	z-index: 0;
+}

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

@@ -0,0 +1,80 @@
+import { ConnectorPointerStyle } 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 { ConnectorPointerPicker } from "features/Pickers/ConnectorPointerPicker/ConnectorPointerPicker";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ConnectorPointerIcon } from "shared/ui-lib/Icon";
+import { ConnectorPointerType } from "shared/ui-lib/Icon/ConnectorPointerIcon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import btnStyle from "../ContextPanelButton.module.css";
+import style from "./EndPointer.module.css";
+
+const MENU_NAME = "EndPointer";
+
+export function EndPointer(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { board, app } = useAppContext();
+	const { t } = useTranslation();
+	const pointerStartStyle = board.selection.getEndPointerStyle();
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+	const handlePick = (type: ConnectorPointerStyle): void => {
+		board.selection.setEndPointerStyle(type);
+		app.sessionStorage.setConnectorPointer(type, "end");
+		toggleMenu("None");
+	};
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={
+				<UiButton
+					id={"end-pointer"}
+					tooltip={t("contextPanel.connectorEndPointer.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					rounded="none"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+					className={clsx(style.button, btnStyle.contextPanelButton)}
+				>
+					{/* {pointerStartStyle === "None" ? (
+						t("contextPanel.connectorPointerNone")
+					) : (
+						<ConnectorPointerIcon
+							iconName={pointerStartStyle as ConnectorPointerType}
+						/>
+					)} */}
+					<ConnectorPointerIcon
+						iconName={pointerStartStyle as ConnectorPointerType}
+					/>
+				</UiButton>
+			}
+		>
+			{verticalAlign => (
+				<UiPanel
+					grid
+					padding={0}
+					columns={2}
+					className={style[verticalAlign]}
+				>
+					<ConnectorPointerPicker
+						selected={pointerStartStyle}
+						onPick={handlePick}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

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

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

package/src/features/ContextPanel/Buttons/FillStyle.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 { conf } from "microboard-temp";
+import { UiColorInput } from "shared/ui-lib/UiColorInput";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import btnStyle from "./ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+const MENU_NAME = "FillStyle";
+
+export function FillStyle(): 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 = conf.SHAPE_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"}
+					tooltip={t("contextPanel.fillStyle.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					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={conf.SHAPE_FILL_COLORS}
+						onPick={handlePick}
+					/>
+					<UiColorInput
+						onChange={handleCustomPick}
+						color={isPredefinedColor ? "none" : fillColor}
+						isActive={fillColor !== "none" && !isPredefinedColor}
+						toggleMenu={toggleMenu}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

package/src/features/ContextPanel/Buttons/FontSize/ConnectorFontSize.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import { FontSize } from "./FontSize";
+import { Connector } from "microboard-temp";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+
+type Props = {
+	rounded?: "none" | "left";
+};
+
+export function ConnectorFontSize({
+	rounded = "none",
+}: Props): JSX.Element | null {
+	const { board } = useAppContext();
+
+	const connector = board.selection.items.getItemsByItemTypes([
+		"Connector",
+	])[0] as Connector;
+	const context = board.selection.getContext();
+	if (
+		context !== "EditTextUnderPointer" &&
+		connector &&
+		!connector.hasText()
+	) {
+		return null;
+	}
+
+	return (
+		<>
+			<FontSize rounded={rounded} />
+			<UiSeparator vertical />
+		</>
+	);
+}

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

@@ -0,0 +1,53 @@
+.button {
+	gap: 0.6rem;
+	padding: 0;
+	padding-left: 0.6rem;
+	padding-right: 0;
+	min-width: 76px;
+}
+
+.font-size {
+	flex: 1 0;
+	height: 100%;
+}
+
+.input {
+	font-size: 1.6rem;
+	font-weight: 500;
+	max-width: 36px;
+	height: 100%;
+	text-align: center;
+	border: none;
+	outline: none;
+}
+
+.input:focus {
+	color: rgba(83, 20, 163, 1);
+}
+
+.input:not(:focus) {
+	cursor: pointer;
+	color: rgba(20, 21, 26, 1);
+}
+
+.size-list {
+	min-width: 52px;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	overflow: hidden;
+}
+
+.menuBottom {
+	border-bottom-left-radius: 0;
+}
+
+.chevron {
+	width: 2rem;
+	align-self: stretch;
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	flex: 1 0;
+}

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

@@ -0,0 +1,217 @@
+import { ButtonWithMenu } from "features/ContextPanel/Buttons/ButtonWithMenu";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { FontSizePicker } from "features/Pickers/FontSizePicker/FontSizePicker";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import clsx from "clsx";
+import React, { MouseEventHandler, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import style from "./FontSize.module.css";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "../ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+const MENU_NAME = "FontSize";
+
+const fontSizes = [10, 12, 14, 18, 24, 36, 48, 64, 80, 144, 288];
+
+const getNextBiggerValue = (value: number): number =>
+	fontSizes.find(size => size > value) ?? fontSizes[fontSizes.length - 1];
+
+const getNextSmallerValue = (value: number): number =>
+	fontSizes
+		.slice()
+		.reverse()
+		.find(size => size < value) ?? fontSizes[0];
+
+type Props = {
+	rounded?: "none" | "left";
+};
+
+export function FontSize({ rounded = "none" }: Props): React.ReactElement {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { t } = useTranslation();
+	const { board } = useAppContext();
+	const [fontSizeInputValue, setFontSizeInputValue] = useState<
+		number | string
+	>(
+		board.selection.getAutosize()
+			? t("contextPanel.fontSize.auto")
+			: board.selection.getFontSize(),
+	);
+	const chevronRef = useRef<HTMLSpanElement>(null);
+	const inputRef = useRef<HTMLInputElement | null>(null);
+
+	const fontSize = board.selection.getFontSize();
+	const selectionContext = board.selection.getContext();
+
+	useEffect(() => {
+		if (fontSize) {
+			setFontSizeInputValue(fontSize);
+		}
+		if (board.selection.getAutosize()) {
+			setFontSizeInputValue(t("contextPanel.fontSize.auto"));
+		}
+		if (
+			selectionContext === "EditUnderPointer" &&
+			openedMenu === MENU_NAME
+		) {
+			setTimeout(() => {
+				inputRef.current?.focus();
+			}, 80);
+		}
+	}, [fontSize, selectionContext, openedMenu]);
+
+	const handleFocus = (ev: React.FocusEvent<HTMLInputElement>): void => {
+		ev.currentTarget.select();
+		if (openedMenu !== MENU_NAME) {
+			toggleMenu(MENU_NAME);
+		}
+	};
+
+	const handleInputClick = (ev: React.MouseEvent<HTMLInputElement>): void => {
+		ev.stopPropagation();
+		if (openedMenu !== MENU_NAME) {
+			toggleMenu(MENU_NAME);
+		}
+		if (selectionContext === "EditTextUnderPointer") {
+			board.selection.setContext("EditUnderPointer");
+		}
+	};
+
+	// TODO exclude scale from font size calculation
+	const resetTextScale = (): void => {
+		const items = board.selection.items.list();
+		items.forEach(item => {
+			if (
+				(item.itemType === "RichText" || item.itemType === "AINode") &&
+				item.getRichText().transformation.getScale().x !== 1
+			) {
+				item.getRichText().transformation.scaleTo(1, 1);
+			}
+		});
+	};
+
+	const handlePick = (size: number | "auto"): void => {
+		resetTextScale();
+		board.selection.setFontSize(size);
+		toggleMenu("None");
+	};
+
+	const handleChevronClick: MouseEventHandler = event => {
+		event.stopPropagation();
+
+		if (!chevronRef.current) {
+			return;
+		}
+
+		const rect = chevronRef.current.getBoundingClientRect();
+		const midpoint = rect.top + rect.height / 2;
+		const isBigger = event.clientY < midpoint;
+		const valueGetter = isBigger ? getNextBiggerValue : getNextSmallerValue;
+
+		const smallest = board.selection.getFontSize(false);
+		if (
+			isBigger &&
+			board.selection.getAutosize() &&
+			valueGetter(smallest)
+		) {
+			return;
+		}
+
+		resetTextScale();
+		board.selection.setFontSize(valueGetter(fontSize));
+	};
+
+	const handleInputChange = (
+		ev: React.ChangeEvent<HTMLInputElement>,
+	): void => {
+		const fontSize = Number(ev.target.value);
+		if (!!fontSize && fontSize >= 1) {
+			resetTextScale();
+			board.selection.setFontSize(fontSize);
+		}
+		setFontSizeInputValue(ev.target.value);
+	};
+
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			offset="Right"
+			button={verticalAlign => (
+				<UiButton
+					id="pick-font-size"
+					tooltip={t("contextPanel.fontSize.tooltip")}
+					tooltipPosition="top"
+					className={clsx(
+						btnStyle.contextPanelButton,
+						style.button,
+						verticalAlign === "bottom" &&
+							openedMenu === MENU_NAME &&
+							style.menuBottom,
+					)}
+					variant="secondary"
+					rounded={rounded}
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+				>
+					<div className={style.fontSize}>
+						<input
+							ref={inputRef}
+							id="pick-font-size-input"
+							className={style.input}
+							onClick={handleInputClick}
+							onChange={handleInputChange}
+							onFocus={handleFocus}
+							onKeyDown={ev => ev.stopPropagation()}
+							value={fontSizeInputValue}
+							maxLength={3}
+						/>
+					</div>
+					<span
+						ref={chevronRef}
+						onClick={handleChevronClick}
+						className={style.chevron}
+						id="FontSizeChevron"
+					>
+						<Icon width={20} height={20} iconName="Chevron" />
+					</span>
+				</UiButton>
+			)}
+		>
+			{verticalAlign => (
+				<UiPanel
+					padding={0}
+					vertical
+					className={clsx(style.sizeList)}
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+				>
+					<FontSizePicker
+						id={"FontSize"}
+						currentFontSize={
+							board.selection.getAutosize() ? "auto" : fontSize
+						}
+						fontSizes={fontSizes}
+						showAuto={
+							board.selection.list().length ===
+							board.selection.items.getItemsByItemTypes([
+								"Sticker",
+							]).length
+						}
+						onPick={handlePick}
+						max={
+							board.selection.getAutosize()
+								? board.selection.getFontSize(false)
+								: undefined
+						}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

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

@@ -0,0 +1,2 @@
+export { FontSize } from "./FontSize";
+export { ConnectorFontSize } from "./ConnectorFontSize";

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

@@ -0,0 +1,68 @@
+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 { FontStylePicker } from "features/Pickers/FontStylePicker";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import btnStyle from "./ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+const MENU_NAME = "FontStyle";
+
+export function FontStyle(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { t } = useTranslation();
+	const { board } = useAppContext();
+
+	const fontStyles = board.selection.getText()?.getFontStyles();
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+
+	const handlePick = (style: string): void => {
+		board.selection.setFontStyle(style);
+		toggleMenu("None");
+	};
+
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={
+				<UiButton
+					className={btnStyle.contextPanelButton}
+					id={"ChangeFontStyle"}
+					tooltip={t("contextPanel.fontStyle.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					rounded="none"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+				>
+					<Icon iconName="TextStyle" />
+				</UiButton>
+			}
+		>
+			{verticalAlign => (
+				<UiPanel
+					padding={12}
+					gap={8}
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+				>
+					<FontStylePicker
+						fontStyles={fontStyles}
+						onPick={handlePick}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}