microboard-ui-temp 0.0.3

package/src/features/ContextPanel/Buttons/CardGame/Dice/ChangeRange/ChangeRange.tsx

@@ -0,0 +1,133 @@
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import clsx from "clsx";
+import React, { MouseEventHandler, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import style from "./ChangeRange.module.css";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "../../../ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton/index";
+import { Dice } from "microboard-temp";
+import { useAppSubscription } from "App/useBoardSubscription";
+
+type Props = {
+	rounded?: "none" | "left";
+	rangeValue: "min" | "max";
+};
+
+const getValuesFromRange = (range: { min: number; max: number }): number[] => {
+	const values: number[] = [];
+	for (let i = range.min; i <= range.max; i++) {
+		values.push(i);
+	}
+
+	return values;
+};
+
+export function ChangeRange({
+	rangeValue,
+	rounded = "none",
+}: Props): React.ReactElement | null {
+	const { t } = useTranslation();
+	const { board } = useAppContext();
+	const dices = board.selection.items.list() as Dice[];
+	const [range, setRange] = useState(
+		dices[0]?.getRange() || { min: 0, max: 0 },
+	);
+	const chevronRef = useRef<HTMLSpanElement>(null);
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	useAppSubscription({
+		subjects: ["items", "selectionItems", "selection"],
+		observer: () => {
+			setRange(dices[0]?.getRange());
+		},
+	});
+
+	if (dices.some(dice => dice.getType() === "custom")) {
+		return null;
+	}
+
+	const handleFocus = (ev: React.FocusEvent<HTMLInputElement>): void => {
+		ev.currentTarget.select();
+	};
+
+	const handleInputClick = (ev: React.MouseEvent<HTMLInputElement>): void => {
+		ev.stopPropagation();
+	};
+
+	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 newRange = { ...range };
+		newRange[rangeValue] = isBigger
+			? (newRange[rangeValue] += 1)
+			: (newRange[rangeValue] -= 1);
+		if (newRange.min >= newRange.max) {
+			return;
+		}
+
+		dices.forEach(dice => {
+			dice.setValues(getValuesFromRange(newRange));
+		});
+		setRange(newRange);
+	};
+
+	const handleInputChange = (
+		ev: React.ChangeEvent<HTMLInputElement>,
+	): void => {
+		const value = Number(ev.target.value);
+		if (rangeValue === "min" && value >= range.max) {
+			return;
+		}
+		if (rangeValue === "max" && value <= range.min) {
+			return;
+		}
+		if (!!value && value >= 1) {
+			range[rangeValue] = value;
+
+			dices.forEach(dice => {
+				dice.setValues(getValuesFromRange(range));
+			});
+			setRange(range);
+		}
+	};
+
+	return (
+		<UiButton
+			id="pick-dice-range"
+			tooltip={t(`contextPanel.gameItems.dice.range.${rangeValue}`)}
+			tooltipPosition="top"
+			className={clsx(btnStyle.contextPanelButton, style.button)}
+			variant="secondary"
+			rounded={rounded}
+		>
+			<div className={style.fontSize}>
+				<input
+					ref={inputRef}
+					id="pick-dice-range-input"
+					className={style.input}
+					onClick={handleInputClick}
+					onChange={handleInputChange}
+					onFocus={handleFocus}
+					onKeyDown={ev => ev.stopPropagation()}
+					value={range[rangeValue]}
+					maxLength={2}
+				/>
+			</div>
+			<span
+				ref={chevronRef}
+				onClick={handleChevronClick}
+				className={style.chevron}
+				id="FontSizeChevron"
+			>
+				<Icon width={20} height={20} iconName="Chevron" />
+			</span>
+		</UiButton>
+	);
+}

package/src/features/ContextPanel/Buttons/CardGame/Dice/ThrowDice.tsx

@@ -0,0 +1,38 @@
+import { useAppContext } from "features/AppContext";
+import { Dice } from "microboard-temp";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton/UiButton";
+import btnStyle from "../../ContextPanelButton.module.css";
+
+interface Props {
+	rounded?: string;
+}
+
+export function ThrowDice({ rounded = "none" }: Props) {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const dices = board.selection.items.list() as Dice[];
+
+	const handleClick = (): void => {
+		dices.forEach((dice: Dice): void => {
+			dice.throwDice();
+		});
+	};
+
+	return (
+		<UiButton
+			className={btnStyle.contextPanelButton}
+			id="throw-dice"
+			tooltip={t("contextPanel.gameItems.dice.throw")}
+			tooltipPosition="top"
+			onClick={handleClick}
+			variant="secondary"
+			rounded={rounded}
+		>
+			<Icon iconName="ToggleCursors" />
+		</UiButton>
+	);
+}

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { Connector } from "microboard-temp";
+import btnStyle from "./ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+
+export function ConnectorAddText(): React.ReactElement | null {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const connector = board.selection.items.getItemsByItemTypes([
+		"Connector",
+	])[0] as Connector;
+	const context = board.selection.getContext();
+	if (
+		context === "EditTextUnderPointer" ||
+		(connector && connector.hasText())
+	) {
+		return null;
+	}
+
+	const handleClick = (): void => {
+		if (board.selection.getContext() === "EditTextUnderPointer") {
+			board.selection.setContext("EditUnderPointer");
+			board.items.subject.publish(board.items);
+			return;
+		}
+		if (!connector) {
+			return;
+		}
+		board.selection.setTextToEdit(connector);
+		board.selection.setContext("EditTextUnderPointer");
+		board.items.subject.publish(board.items);
+	};
+
+	return (
+		<>
+			<UiButton
+				id={"connector-add-text"}
+				tooltip={t("contextPanel.connectorAddText.tooltip")}
+				tooltipPosition="top"
+				onClick={handleClick}
+				variant="secondary"
+				rounded="none"
+				className={btnStyle.contextPanelButton}
+			>
+				<Icon iconName="AddText" />
+			</UiButton>
+			<UiSeparator vertical />
+		</>
+	);
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import { Connector } from "microboard-temp";
+import { FontStyle } from "./FontStyle";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+
+export function ConnectorFontStyle(): React.ReactElement | 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 (
+		<>
+			<FontStyle />
+			<UiSeparator vertical />
+		</>
+	);
+}

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

@@ -0,0 +1,96 @@
+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 = "ConnectorLineColor";
+
+export function ConnectorLineColor(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { board, app } = useAppContext();
+
+	const { t } = useTranslation();
+
+	const connectorLineColor = board.selection.getConnectorLineColor();
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+
+	const handlePick = (color: string): void => {
+		board.selection.setStrokeColor(color);
+		app.sessionStorage.setConnectorFillColor(color);
+		toggleMenu("None");
+	};
+
+	const handleCustomPick = (color: string): void => {
+		app.sessionStorage.setConnectorFillColor(color);
+		board.selection.setStrokeColor(color);
+	};
+
+	const isPredefinedColor = conf.SHAPE_STROKE_COLORS.some(
+		color => color === connectorLineColor,
+	);
+
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={
+				<UiButton
+					className={btnStyle.contextPanelButton}
+					id={"fill-style"}
+					tooltip={t("contextPanel.connectorColor.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+					rounded="none"
+				>
+					<FillColorIndicator
+						width={24}
+						height={24}
+						color={connectorLineColor}
+					/>
+				</UiButton>
+			}
+		>
+			{verticalAlign => (
+				<UiPanel
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+					grid
+					columns={4}
+					gap={8}
+				>
+					<ColorPicker
+						id={"connector-line-color"}
+						selectedColor={connectorLineColor}
+						colors={conf.SHAPE_STROKE_COLORS}
+						onPick={handlePick}
+					/>
+					<UiColorInput
+						onChange={handleCustomPick}
+						color={isPredefinedColor ? "none" : connectorLineColor}
+						isActive={
+							connectorLineColor !== "none" && !isPredefinedColor
+						}
+						toggleMenu={toggleMenu}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import { Connector } from "microboard-temp";
+import { TextColor } from "./TextColor";
+
+export function ConnectorTextColor(): React.ReactElement | 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 <TextColor />;
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import { Connector } from "microboard-temp";
+import { TextHighlight } from "./TextHighlight";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+
+export function ConnectorTextHighlight(): React.ReactElement | null {
+	const { board } = useAppContext();
+
+	const connector = board.selection.items.getItemsByItemTypes([
+		"Connector",
+	])[0] as Connector | undefined;
+	const context = board.selection.getContext();
+	if (
+		context !== "EditTextUnderPointer" &&
+		connector &&
+		!connector.hasText()
+	) {
+		return null;
+	}
+
+	return (
+		<>
+			<TextHighlight />
+			<UiSeparator vertical />
+		</>
+	);
+}

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

@@ -0,0 +1,5 @@
+.panel {
+	display: flex;
+	justify-content: center;
+	gap: 5px;
+}

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

@@ -0,0 +1,108 @@
+import {
+	ConnectorLineStyle,
+	STEP_STROKE_WIDTH,
+	BorderStyle,
+	ConnectionLineWidths,
+} from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import { ButtonWithMenu } from "features/ContextPanel/Buttons/ButtonWithMenu";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { ConnectorLineStylePicker } from "features/Pickers/ConnectorLineStylePicker";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ConnectorIcon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import { SliderPicker } from "../../../Pickers/SliderPicker";
+import { StrokeStylePicker } from "../../../Pickers/StrokeStylePicker";
+import btnStyle from "../ContextPanelButton.module.css";
+import styles from "./ConnectorType.module.css";
+
+const MENU_NAME = "ConnectorType";
+
+export function ConnectorType(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+
+	const { board, app } = useAppContext();
+	const { t } = useTranslation();
+
+	const connectorType = board.selection.getConnectorLineStyle();
+	const connectorLineWidth = board.selection.getConnectorLineWidth();
+	const borderStyle = board.selection.getBorderStyle();
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+	const handlePick = (type: ConnectorLineStyle): void => {
+		board.selection.setConnectorLineStyle(type);
+		app.sessionStorage.setConnectorLineStyle(type);
+		toggleMenu("None");
+	};
+
+	const handleStrokeStylePick = (style: BorderStyle): void => {
+		board.selection.setStrokeStyle(style);
+		app.sessionStorage.setConnectorStrokeStyle(style);
+		toggleMenu("None");
+	};
+
+	const handleSliderChange = (width: number): void => {
+		board.selection.setStrokeWidth(width);
+		app.sessionStorage.setConnectorLineWidth(width);
+	};
+
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={
+				<UiButton
+					className={btnStyle.contextPanelButton}
+					id={"connector-type"}
+					tooltip={t("contextPanel.connectorType.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					rounded="none"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+				>
+					<ConnectorIcon iconName={connectorType} />
+				</UiButton>
+			}
+		>
+			{verticalAlign => (
+				<UiPanel
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+					gap={8}
+					grid
+				>
+					<SliderPicker
+						value={connectorLineWidth}
+						onPick={handleSliderChange}
+						min={ConnectionLineWidths[0]}
+						max={ConnectionLineWidths[7]}
+						step={STEP_STROKE_WIDTH}
+						showLabel
+						id="connector-line-width"
+					/>
+					<div className={styles.panel}>
+						<ConnectorLineStylePicker
+							onPick={handlePick}
+							selected={connectorType}
+						/>
+					</div>
+					<div className={styles.panel}>
+						<StrokeStylePicker
+							stroke={borderStyle}
+							onPick={handleStrokeStylePick}
+						/>
+					</div>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

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

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

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

@@ -0,0 +1,19 @@
+.frameNavIcon {
+	color: #696b76;
+}
+
+.frameNavIconPrev {
+	transform: rotate(180deg);
+}
+
+.bold {
+	font-weight: 500;
+}
+
+@media screen and (max-width: 768px) {
+	.contextPanelButton {
+		--min-width: 28px;
+		--min-height: 28px;
+		--padding: 4px;
+	}
+}

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

@@ -0,0 +1,32 @@
+import { Icon } from "shared/ui-lib/Icon";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "./ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+type Props = {
+	rounded?: "left" | "right" | "none" | "full";
+};
+
+export function Delete({ rounded = "none" }: Props): React.ReactElement {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+	const handleClick = (): void => {
+		board.selection.removeFromBoard();
+	};
+
+	return (
+		<UiButton
+			className={btnStyle.contextPanelButton}
+			id={"delete"}
+			onClick={handleClick}
+			variant="secondary"
+			rounded={rounded}
+			tooltip={t("contextPanel.delete.tooltip")}
+			tooltipPosition="top"
+		>
+			<Icon iconName="Delete" />
+		</UiButton>
+	);
+}

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

@@ -0,0 +1,107 @@
+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 React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "./ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import {
+	convertHexToRGBA,
+	rgbaToRgb,
+	rgbToRgba,
+} from "shared/lib/convertColors";
+
+const MENU_NAME = "DrawFillStyle";
+
+export function DrawFillStyle(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+	const single = board.selection.items.getSingle();
+	let isHighlight = false;
+	if (single?.itemType === "Drawing") {
+		if (single.getStrokeColor().split(",").length === 4) {
+			isHighlight = true;
+		}
+	}
+
+	let drawingColor = board.selection.getStrokeColor();
+
+	if (isHighlight) {
+		drawingColor = rgbaToRgb(drawingColor, drawingColor);
+	}
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+	const handlePick = (color: string): void => {
+		if (isHighlight) {
+			color = rgbToRgba(color, 0.5, color);
+		}
+		board.selection.setStrokeColor(color);
+		toggleMenu("None");
+	};
+	const handleCustomPick = (color: string): void => {
+		if (isHighlight) {
+			color = convertHexToRGBA(color, true, 0.5);
+		}
+		board.selection.setStrokeColor(color);
+	};
+
+	const isPredefinedColor = conf.PEN_COLORS.some(
+		color => color === drawingColor,
+	);
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="center"
+			button={
+				<UiButton
+					className={btnStyle.contextPanelButton}
+					id={"drawing-fill-style"}
+					tooltip={t("contextPanel.penColor.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+					rounded="none"
+				>
+					<FillColorIndicator color={drawingColor} />
+				</UiButton>
+			}
+		>
+			{verticalAlign => (
+				<UiPanel
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+					grid
+					columns={4}
+					gap={8}
+				>
+					<ColorPicker
+						id={"drawing"}
+						selectedColor={drawingColor}
+						colors={conf.PEN_COLORS}
+						onPick={handlePick}
+					/>
+					<UiColorInput
+						onChange={handleCustomPick}
+						color={isPredefinedColor ? "none" : drawingColor}
+						isActive={drawingColor !== "none" && !isPredefinedColor}
+						toggleMenu={toggleMenu}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

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

@@ -0,0 +1,4 @@
+.container {
+	max-width: 108px;
+	padding: 0 14px;
+}