microboard-ui-temp 0.0.3

package/src/features/ContextPanel/ContextPanel.tsx

@@ -0,0 +1,531 @@
+import { useDomMbr } from "App/useDomMbr";
+import { useAppSubscription } from "App/useBoardSubscription";
+import React, { useRef, useState } from "react";
+import { useAppContext } from "features/AppContext";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import { ConnectorAddText } from "./Buttons/ConnectorAddText";
+import { ConnectorType } from "./Buttons/ConnectorType";
+import { Delete } from "./Buttons/Delete";
+import { DrawFillStyle } from "./Buttons/DrawFillStyle";
+import { DrawStrokeWidth } from "./Buttons/DrawStrokeWidth/DrawStrokeWidth";
+import { Duplicate } from "./Buttons/Duplicate";
+import { Edit } from "./Buttons/Edit";
+import { EndPointer } from "./Buttons/EndPointer";
+import { FillStyle } from "./Buttons/FillStyle";
+import { FontSize } from "./Buttons/FontSize";
+import { FontStyle } from "./Buttons/FontStyle";
+import { FrameFill } from "./Buttons/FrameFill";
+import { FrameRatio } from "./Buttons/FrameRatio";
+import { ItemType } from "./Buttons/ItemType/ItemType";
+import { RestOptionsMenu } from "./Buttons/RestOptionsMenu";
+import {
+	BringToFront,
+	ExportFrame,
+	SendToBack,
+} from "./Buttons/RestOptionsMenu/Items";
+import { StartPointer } from "./Buttons/StartPointer/StartPointer";
+import { StickerFillStyle } from "./Buttons/StickerFillStyle";
+import { StrokeStyle } from "./Buttons/StrokeStyle";
+import { SwitchPointers } from "./Buttons/SwitchPointers";
+import { TextAlignment } from "./Buttons/TextAlignment/TextAlignment";
+import { TextColor } from "./Buttons/TextColor";
+import { TextHighlight } from "./Buttons/TextHighlight";
+import { ToggleFrameRatio } from "./Buttons/ToggleFrameRatio";
+import { PanelContext } from "./PanelContext";
+import { Lock } from "./Buttons/Lock";
+import { ConnectorLineColor } from "./Buttons/ConnectorLineColor";
+import { ConnectorFontStyle } from "./Buttons/ConnectorFontStyle";
+import { ConnectorFontSize } from "./Buttons/FontSize";
+import { ConnectorTextColor } from "./Buttons/ConnectorTextColor";
+import { ConnectorTextHighlight } from "./Buttons/ConnectorTextHighlight";
+import { CopyItemLink } from "./Buttons/RestOptionsMenu/Items/CopyItemLink";
+import { SetLinkTo } from "./Buttons/RestOptionsMenu/Items/SetLinkTo";
+import { AIGeneration } from "features/ContextPanel/Buttons/AIGeneration";
+import { getIdeaFromSelection } from "entities/AIInput";
+import { FrameNavNext } from "./Buttons/FrameNavNext";
+import { FrameNavPrev } from "./Buttons/FrameNavPrev";
+import { HyperLinkBtn } from "features/ContextPanel/Buttons/HyperLinkBtn";
+import { AIModel } from "features/ContextPanel/Buttons/AIModel/AIModel";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+import { SaveImg } from "./Buttons/RestOptionsMenu/Items/SaveImg";
+import { SaveVideoOrAudio } from "features/ContextPanel/Buttons/RestOptionsMenu/Items/SaveVideoOrAudio";
+import { AddList } from "features/ContextPanel/Buttons/AddList/AddList";
+import { ToggleIsShining } from "features/ContextPanel/Buttons/ToggleIsShining";
+import { ShuffleDeck } from "features/ContextPanel/Buttons/CardGame/Deck/ShuffleDeck";
+import { GetCard } from "features/ContextPanel/Buttons/CardGame/Deck/GetCard";
+import { CreateDeck } from "features/ContextPanel/Buttons/CardGame/Card/CreateDeck";
+import { FlipCard } from "features/ContextPanel/Buttons/CardGame/Card/FlipCard";
+import { ThrowDice } from "features/ContextPanel/Buttons/CardGame/Dice/ThrowDice";
+import { ChangeRange } from "features/ContextPanel/Buttons/CardGame/Dice/ChangeRange/ChangeRange";
+
+export function ContextPanel(): React.ReactElement | null {
+	const { app, board } = useAppContext();
+	const [openedMenu, setOpenedMenu] = useState("None");
+	const panelRef = useRef<HTMLDivElement>(null);
+	const mbr = useDomMbr({
+		app,
+		board,
+		ref: panelRef,
+	});
+	useAppSubscription({
+		subjects: ["selectionItems"],
+		observer: () => {
+			setOpenedMenu("None");
+		},
+	});
+	const toggleMenu = (menu: string): void =>
+		setOpenedMenu(prev => (prev === menu ? "None" : menu));
+
+	const windowHeight = board.camera.window.height;
+	const windowWidth = board.camera.window.width;
+
+	const isInvisible =
+		board.selection.getContext() === "None" ||
+		board.selection.transformationRenderBlock;
+
+	if (isInvisible) {
+		return null;
+	}
+
+	const isLocked = board.selection.items
+		.list()
+		.filter(item => item.transformation.isLocked).length;
+
+	const isSelectUnderPointer =
+		board.selection.getContext() === "SelectUnderPointer";
+
+	const isHoverUnderPointer =
+		board.selection.getContext() === "HoverUnderPointer";
+
+	const ideaFromSelection = getIdeaFromSelection(
+		board.selection.items.list(),
+	);
+
+	const isSingle = !!board.selection.items.getSingle();
+	const isText = board.selection.items.isAllItemsType("RichText");
+	const isSticker = board.selection.items.isAllItemsType("Sticker");
+	const isShape = board.selection.items.isAllItemsType("Shape");
+	const isConnector = board.selection.items.isAllItemsType("Connector");
+	const isPen = board.selection.items.isAllItemsType("Drawing");
+	const isImage = board.selection.items.isAllItemsType("Image");
+	const isFrame = board.selection.items.isAllItemsType("Frame");
+	const isPlaceholder = board.selection.items.isAllItemsType("Placeholder");
+	const isAINode = board.selection.items.isAllItemsType("AINode");
+	const isVideo = board.selection.items.isAllItemsType("Video");
+	const isAudio = board.selection.items.isAllItemsType("Audio");
+	const isStar = board.selection.items.isAllItemsType("Star");
+	const isDeck = board.selection.items.isAllItemsType("Deck");
+	const isCard = board.selection.items.isAllItemsType("Card");
+	const isCardOrDeck = board.selection.items.isItemTypes(["Card", "Deck"]);
+	const isDice = board.selection.items.isAllItemsType("Dice");
+	const isDifferentItems =
+		!isText &&
+		!isSticker &&
+		!isShape &&
+		!isConnector &&
+		!isPen &&
+		!isImage &&
+		!isFrame &&
+		!isPlaceholder &&
+		!isAINode &&
+		!isVideo &&
+		!isAudio &&
+		!isStar &&
+		!isDeck &&
+		!isCard &&
+		!isCardOrDeck &&
+		!isDice;
+
+	return (
+		<PanelContext.Provider
+			value={{
+				openedMenu,
+				panelMbr: mbr,
+				toggleMenu,
+				windowHeight,
+				windowWidth,
+			}}
+		>
+			<UiPanel
+				// className={style.contextPanel}
+				style={{
+					position: "absolute",
+					left: mbr.left,
+					top: mbr.top,
+				}}
+				zIndex={3}
+				ref={panelRef}
+				padding={0}
+				id="ContextPanel"
+			>
+				{isSelectUnderPointer && !isLocked && (
+					<>
+						<Edit />
+						<RestOptionsMenu rounded="right">
+							<BringToFront />
+							<SendToBack />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isPlaceholder && !isSelectUnderPointer && !isLocked && (
+					<>
+						<Lock rounded="left" />
+						<UiSeparator vertical />
+						<Delete />
+						<RestOptionsMenu rounded="right">
+							<BringToFront />
+							<SendToBack />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isText && !isSelectUnderPointer && !isLocked && (
+					<>
+						<FontSize rounded="left" />
+						<FontStyle />
+						<TextAlignment />
+						<AddList />
+						<HyperLinkBtn />
+						<UiSeparator vertical />
+						<TextColor />
+						<TextHighlight />
+						<UiSeparator vertical />
+						<Lock />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<AIModel />
+						<AIGeneration />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isSticker && !isSelectUnderPointer && !isLocked && (
+					<>
+						<FontSize rounded="left" />
+						<UiSeparator vertical />
+						<FontStyle />
+						<TextAlignment />
+						<AddList />
+						<HyperLinkBtn />
+						<UiSeparator vertical />
+						<TextColor />
+						<TextHighlight />
+						<UiSeparator vertical />
+						<StickerFillStyle />
+						<UiSeparator vertical />
+						<Lock />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<AIModel />
+						<AIGeneration />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isShape && !isSelectUnderPointer && !isLocked && (
+					<>
+						<ItemType />
+						<UiSeparator vertical />
+						{board.selection.items
+							.getItemsByItemTypes(["Shape"])[0]
+							.getIsShapeWithText() && (
+							<>
+								<FontSize />
+								<UiSeparator vertical />
+								<FontStyle />
+								<TextAlignment />
+								<AddList />
+								<HyperLinkBtn />
+								<UiSeparator vertical />
+								<TextColor />
+								<TextHighlight />
+								<UiSeparator vertical />
+							</>
+						)}
+						<StrokeStyle />
+						{board.selection.items
+							.getItemsByItemTypes(["Shape"])[0]
+							.getPath()
+							.isClosed() && <FillStyle />}
+						<UiSeparator vertical />
+						<Lock />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<AIModel />
+						<AIGeneration />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isConnector && !isSelectUnderPointer && !isLocked && (
+					<>
+						<StartPointer />
+						<SwitchPointers />
+						<EndPointer />
+						<UiSeparator vertical />
+						<ConnectorType />
+						<ConnectorLineColor />
+						<UiSeparator vertical />
+						<ConnectorAddText />
+						<ConnectorFontSize />
+						<ConnectorFontStyle />
+						<ConnectorTextColor />
+						<ConnectorTextHighlight />
+						<Lock />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isPen && !isSelectUnderPointer && !isLocked && (
+					<>
+						<DrawStrokeWidth />
+						<UiSeparator vertical />
+						<DrawFillStyle />
+						<UiSeparator vertical />
+						<Lock />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isImage && !isSelectUnderPointer && !isLocked && (
+					<>
+						<Lock rounded="left" />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+							<SaveImg />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isVideo && !isSelectUnderPointer && !isLocked && (
+					<>
+						<Lock rounded="left" />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							{/* <SetLinkTo />*/}
+							{/* <Duplicate />*/}
+							<SaveVideoOrAudio itemType="Video" />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isAudio && !isSelectUnderPointer && !isLocked && (
+					<>
+						<Lock rounded="left" />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<Duplicate />
+							<SaveVideoOrAudio itemType="Audio" />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isFrame && !isSelectUnderPointer && !isLocked && (
+					<>
+						<FrameRatio />
+						<ToggleFrameRatio />
+						<UiSeparator vertical />
+						<FrameFill />
+						<UiSeparator vertical />
+						<Lock />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<FrameNavNext />
+							<FrameNavPrev />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+							<ExportFrame />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isAINode && !isSelectUnderPointer && !isLocked && (
+					<>
+						<FontSize rounded="left" />
+						<UiSeparator vertical />
+						<FontStyle />
+						<TextAlignment />
+						<AddList />
+						<HyperLinkBtn />
+						<UiSeparator vertical />
+						<TextColor />
+						<TextHighlight />
+						<UiSeparator vertical />
+						<Lock />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<AIModel />
+						<AIGeneration />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isStar && !isSelectUnderPointer && !isLocked && (
+					<>
+						<Lock rounded="left" />
+						<UiSeparator vertical />
+						<Delete />
+						<ToggleIsShining />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<SetLinkTo />
+							<Duplicate />
+						</RestOptionsMenu>
+					</>
+				)}
+				{isDeck && !isSelectUnderPointer && !isLocked && (
+					<>
+						<ShuffleDeck rounded="left" />
+						<UiSeparator vertical />
+						<GetCard cardPosition={"random"} />
+						<GetCard cardPosition={"top"} />
+						{isSingle ? (
+							<GetCard cardPosition={"bottom"} rounded="right" />
+						) : (
+							<>
+								<GetCard cardPosition={"bottom"} />
+								<UiSeparator vertical />
+								<CreateDeck onlyCards={false} rounded="right" />
+							</>
+						)}
+						<UiSeparator vertical />
+						<Delete rounded="right" />
+					</>
+				)}
+				{isCard && !isSelectUnderPointer && !isLocked && (
+					<>
+						<FlipCard rounded="left" />
+						<UiSeparator vertical />
+						<CreateDeck onlyCards={true} rounded="right" />
+						<UiSeparator vertical />
+						<Delete rounded="right" />
+					</>
+				)}
+				{isCardOrDeck &&
+					!isDeck &&
+					!isCard &&
+					!isSelectUnderPointer &&
+					!isLocked && (
+						<>
+							<FlipCard rounded="left" />
+							<UiSeparator vertical />
+							<CreateDeck onlyCards={false} rounded="right" />
+							<UiSeparator vertical />
+							<Delete rounded="right" />
+						</>
+					)}
+				{isDice && !isSelectUnderPointer && !isLocked && (
+					<>
+						<ThrowDice rounded="left" />
+						<ChangeRange rangeValue="min" />
+						<ChangeRange rangeValue="max" />
+						<UiSeparator vertical />
+						<StrokeStyle />
+						<FillStyle />
+						<UiSeparator vertical />
+						<Delete />
+						<UiSeparator vertical />
+						<RestOptionsMenu>
+							<BringToFront />
+							<SendToBack />
+							<CopyItemLink />
+							<Duplicate />
+						</RestOptionsMenu>
+					</>
+				)}
+				{!isDifferentItems && !!isLocked && (
+					<>
+						<Lock rounded="left" />
+						<UiSeparator vertical />
+						{isLocked <= 1 ? (
+							<RestOptionsMenu rounded="right">
+								<CopyItemLink />
+								<ExportFrame />
+								<Duplicate />
+							</RestOptionsMenu>
+						) : null}
+					</>
+				)}
+				{isDifferentItems &&
+					!isSelectUnderPointer &&
+					!isHoverUnderPointer && (
+						<>
+							<Lock rounded="left" />
+							<UiSeparator vertical />
+							<Delete />
+							{ideaFromSelection && <AIGeneration />}
+							<RestOptionsMenu rounded="full">
+								<BringToFront />
+								<SendToBack />
+								<Duplicate />
+							</RestOptionsMenu>
+						</>
+					)}
+			</UiPanel>
+		</PanelContext.Provider>
+	);
+}

package/src/features/ContextPanel/PanelContext.ts

@@ -0,0 +1,17 @@
+import { Mbr } from "microboard-temp";
+import {
+	createStrictContext,
+	useStrictContext,
+} from "shared/lib/strictContext";
+
+export const PanelContext = createStrictContext<{
+	toggleMenu: (menu: string) => void;
+	openedMenu: string;
+	panelMbr: Mbr;
+	windowHeight: number;
+	windowWidth?: number;
+}>();
+
+export function usePanelContext() {
+	return useStrictContext(PanelContext);
+}

package/src/features/ContextPanel/index.ts

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

package/src/features/ContextWrapper.tsx

@@ -0,0 +1,47 @@
+import type { App } from "App";
+import type { Board } from "microboard-temp";
+import React from "react";
+import { Outlet } from "react-router-dom";
+import { AppContext } from "./AppContext";
+import { ContextMenuContextProvider } from "./ContextMenu";
+import { OpenedFoldersContextProvider } from "../entities/Folder";
+import ModalsWrapper from "./Modal/ModalsWrapper";
+import { RenameContextProvider } from "./Rename";
+import { SidePanelContextProvider } from "./SidePanel/SidePanelContext";
+import { ToastProvider } from "./ToastProvider";
+import { AIContextProvider } from "../entities/AIInput/AIContext";
+import { HyperLinkContextProvider } from "features/hyperLink/HyperLinkContext";
+import { CryptoWrapper } from "./CryptoWrapper";
+import { CommentsContextProvider } from "entities/comments/CommentsContext";
+
+type Props = {
+	app: App;
+	board: Board;
+};
+
+export function ContextWrapper({ app, board }: Props): JSX.Element {
+	return (
+		<CryptoWrapper>
+			<AppContext.Provider value={{ app, board }}>
+				<HyperLinkContextProvider>
+					<CommentsContextProvider>
+						<AIContextProvider>
+							<ModalsWrapper>
+								<ContextMenuContextProvider>
+									<RenameContextProvider>
+										<OpenedFoldersContextProvider>
+											<SidePanelContextProvider>
+												<Outlet />
+												<ToastProvider />
+											</SidePanelContextProvider>
+										</OpenedFoldersContextProvider>
+									</RenameContextProvider>
+								</ContextMenuContextProvider>
+							</ModalsWrapper>
+						</AIContextProvider>
+					</CommentsContextProvider>
+				</HyperLinkContextProvider>
+			</AppContext.Provider>
+		</CryptoWrapper>
+	);
+}

package/src/features/Counter/Counter.module.css

@@ -0,0 +1,20 @@
+.container {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+	padding: 12px;
+	background-color: #9a46f4;
+}
+
+.btn {
+	width: 100%;
+	font-size: 60%;
+	text-align: center;
+	padding: 8px;
+	background-color: #ffffff;
+	border: 1px solid black;
+	border-radius: 8px;
+	cursor: pointer;
+}

package/src/features/Counter/Counter.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+// import { Counter } from "Board/Items/Examples/Counter";
+// import { COUNTER_DIMENSIONS } from "Board/Items/Examples/Counter/Counter";
+import { Mbr } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import styles from "./Counter.module.css";
+
+interface Props {
+	item: Counter;
+}
+
+export const CounterComponent = ({ item }: Props) => {
+	const { board } = useAppContext();
+	const [count, setCount] = useState(0);
+	const itemCount = item.getCount();
+	const counterMbr = item.getMbr();
+
+	const mbr = new Mbr(
+		counterMbr.left,
+		counterMbr.top,
+		counterMbr.right,
+		counterMbr.bottom,
+	).getTransformed(board.camera.getMatrix());
+
+	return (
+		<div
+			style={{
+				width: `${COUNTER_DIMENSIONS.width}px`,
+				height: `${COUNTER_DIMENSIONS.height}px`,
+				left: mbr.left,
+				top: mbr.top,
+				zIndex: board.getZIndex(item),
+				transform: `scale(${item.transformation.getScale().x * board.camera.getScale()})`,
+				transformOrigin: "top left",
+			}}
+			className={styles.container}
+		>
+			<button
+				className={styles.btn}
+				onClick={() => item.setCount(itemCount + 1)}
+			>
+				Public count: {itemCount}
+			</button>
+			<button className={styles.btn} onClick={() => setCount(count + 1)}>
+				Local count: {count}
+			</button>
+		</div>
+	);
+};