{
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/src/components/texte-editing-tools/text-align-selector.tsx b/src/components/texte-editing-tools/text-align-selector.tsx
new file mode 100644
index 0000000..a07165c
--- /dev/null
+++ b/src/components/texte-editing-tools/text-align-selector.tsx
@@ -0,0 +1,52 @@
+import {
+ AiOutlineAlignCenter,
+ AiOutlineAlignLeft,
+ AiOutlineAlignRight,
+} from "react-icons/ai";
+import type { TextConfig } from "konva/lib/shapes/Text";
+import { updateText } from "@/store/app.slice";
+import { useAppDispatch } from "@/hooks";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+type Props = {
+ currentText: TextConfig;
+ selectedItemId: string | null;
+};
+
+export const FontAlign = ({ currentText, selectedItemId }: Props) => {
+ const dispatch = useAppDispatch();
+ const handleTextAlignChange = (position: string) => {
+ if (!selectedItemId) return;
+ dispatch(
+ updateText({
+ id: selectedItemId,
+ align: position,
+ }),
+ );
+ };
+ return (
+
+
{
+ if (value) handleTextAlignChange(value);
+ }}
+ >
+
+
+
+ );
+};
diff --git a/src/components/font-family-picker.tsx b/src/components/texte-editing-tools/text-family-picker.tsx
similarity index 74%
rename from src/components/font-family-picker.tsx
rename to src/components/texte-editing-tools/text-family-picker.tsx
index c732e8e..9186d79 100644
--- a/src/components/font-family-picker.tsx
+++ b/src/components/texte-editing-tools/text-family-picker.tsx
@@ -1,7 +1,7 @@
"use client";
import * as React from "react";
-import fonts from "../assets/fonts.json";
+import fonts from "../../assets/fonts.json";
import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
import { cn } from "@/lib/utils";
@@ -21,16 +21,29 @@ import {
PopoverTrigger,
} from "@/components/ui/popover";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { updateText } from "@/store/app.slice";
+import { useAppDispatch } from "@/hooks";
+import type { TextConfig } from "konva/lib/shapes/Text";
type Props = {
- handleTextFontFamilyChange: (fontFamiy: string | undefined) => void;
- selectedFont: string;
+ currentText: TextConfig;
+ selectedItemId: string | null;
};
-export function FontFamilyPicker({ handleTextFontFamilyChange, selectedFont }: Props) {
- const [open, setOpen] = React.useState(false);
-
+export function FontFamilyPicker({ currentText, selectedItemId }: Props) {
+ const dispatch = useAppDispatch();
+ const [open, setOpen] = useState(false);
+
+ const handleTextFontFamilyChange = (e: string | undefined) => {
+ if (!selectedItemId) return;
+ dispatch(
+ updateText({
+ id: selectedItemId,
+ fontFamily: e,
+ }),
+ );
+ };
useEffect(() => {
fonts.items.map((font): void => {
@@ -45,6 +58,8 @@ export function FontFamilyPicker({ handleTextFontFamilyChange, selectedFont }: P
});
}, []);
+ const selectedFont = currentText.fontFamily ?? "Roboto";
+
return (
diff --git a/src/components/texte-editing-tools/text-size-selector.tsx b/src/components/texte-editing-tools/text-size-selector.tsx
new file mode 100644
index 0000000..b22c489
--- /dev/null
+++ b/src/components/texte-editing-tools/text-size-selector.tsx
@@ -0,0 +1,55 @@
+import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { updateText } from "@/store/app.slice";
+import { useAppDispatch } from "@/hooks";
+import type { TextConfig } from "konva/lib/shapes/Text";
+
+type Props = {
+ currentText: TextConfig;
+ selectedItemId: string | null;
+};
+
+export function FontSizeSelector({ currentText, selectedItemId }: Props) {
+ const dispatch = useAppDispatch();
+
+ const value = currentText.fontSize ?? 16;
+
+ const handleTextFontSizeChange = (e: number | undefined) => {
+ if (!selectedItemId) return;
+ dispatch(
+ updateText({
+ id: selectedItemId,
+ fontSize: e,
+ }),
+ );
+ };
+ return (
+ <>
+
+
+
+
+
+
+ {value}
+
+
+
{
+ handleTextFontSizeChange(e[0]);
+ }}
+ className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+ aria-label="fontSize"
+ />
+
+
+
+
+ handleTextLetterSpacing(e[0])}
+ />
+
+
+
+ handleLineHeight(e[0])}
+ />
+
+
+
+
+
+ Bold
+
+
+
+
+ Italic
+
+
+
+
+
+
+ Souligné
+
+
+
+ Barré
+
+
+
+ );
+}
+
+const getFontStyle = (
+ currentStyle: string | undefined,
+ buttonClicked: "bold" | "italic" | "underline" | "line-through",
+) => {
+ if (buttonClicked === "bold") {
+ if (currentStyle?.includes("bold")) {
+ return currentStyle?.replace("bold", "").trim();
+ }
+ return ((currentStyle ?? "") + " bold").trim();
+ }
+ if (buttonClicked === "italic") {
+ if (currentStyle?.includes("italic")) {
+ return currentStyle?.replace("italic", "").trim();
+ }
+ return ((currentStyle ?? "") + " italic").trim();
+ }
+ if (buttonClicked === "underline") {
+ if (currentStyle?.includes("underline")) {
+ return currentStyle?.replace("underline", "").trim();
+ }
+ return ((currentStyle ?? "") + " underline").trim();
+ }
+ if (buttonClicked === "line-through") {
+ if (currentStyle?.includes("line-through")) {
+ return currentStyle?.replace("line-through", "").trim();
+ }
+ return ((currentStyle ?? "") + " line-through").trim();
+ }
+};
diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
index 21b202e..a13fc98 100644
--- a/src/components/toolbar.tsx
+++ b/src/components/toolbar.tsx
@@ -1,62 +1,32 @@
import { useAppDispatch, useAppSelector } from "@/hooks";
import { updateText } from "@/store/app.slice";
-import { Toggle } from "@/components/ui/toggle";
-import { FontFamilyPicker } from "./font-family-picker";
-import { FontSizeSelector } from "./font-size-selector";
-import { useState, type ChangeEvent } from "react";
-import { SpacingSettings } from "./spacing-settings";
+import { FontFamilyPicker } from "./texte-editing-tools/text-family-picker";
+import { FontSizeSelector } from "./texte-editing-tools/text-size-selector";
+import type { ChangeEvent } from "react";
+import { FontStyle } from "./texte-editing-tools/text-style-selector";
+import { FontAlign } from "./texte-editing-tools/text-align-selector";
+import { Separator } from "./ui/separator";
+import { SpacingSettings } from "./texte-editing-tools/text-spacing-settings";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import {
+ AiOutlineAlignCenter,
+ AiOutlineAlignLeft,
+ AiOutlineAlignRight,
+} from "react-icons/ai";
export const Toolbar = () => {
- const [alignment, setAlignment] = useState("left");
const dispatch = useAppDispatch();
const selectedItemId = useAppSelector((state) => state.app.selectedItemId);
const texts = useAppSelector((state) => state.app.texts);
const currentText = texts.find((t) => t.id === selectedItemId);
-
if (!currentText) return null;
- const handleFontStyleToggle = (button: "bold" | "italic") => () => {
- if (!selectedItemId) return;
- dispatch(
- updateText({
- id: selectedItemId,
- fontStyle: getFontStyle(currentText.fontStyle, button),
- }),
- );
- };
-
- const handleTextDecorationToggle =
- (button: "underline" | "line-through") => () => {
- if (!selectedItemId) return;
-
- dispatch(
- updateText({
- id: selectedItemId,
- textDecoration: getFontStyle(currentText.textDecoration, button),
- }),
- );
- };
-
- const handleTextFontSizeChange = (e: number | undefined) => {
- if (!selectedItemId) return;
- dispatch(
- updateText({
- id: selectedItemId,
- fontSize: e,
- }),
- );
- };
-
- const handleTextFontFamilyChange = (e: string | undefined) => {
- if (!selectedItemId) return;
- dispatch(
- updateText({
- id: selectedItemId,
- fontFamily: e,
- }),
- );
- };
const handleTextColorChange = (e: ChangeEvent) => {
if (!selectedItemId) return;
dispatch(
@@ -67,95 +37,33 @@ export const Toolbar = () => {
);
};
- const handleTextAlignChange = (e: ChangeEvent) => {
- if (!selectedItemId) return;
- dispatch(
- updateText({
- id: selectedItemId,
- align: e.target.value,
- }),
- );
- };
-
- const handleAlignmentChange = (newAlignment: string | undefined) => {};
-
return (
-
-
- B
-
-
- I
-
-
- U
-
-
- S
-
-
-
+
+
+
+
+
+
+
+
-
+
-
-
-
-