From 0c85cf16ef51ba660db71f384af278ecca5e7447 Mon Sep 17 00:00:00 2001
From: Atharva Rekhawar <atharvarekhawar64@gmail.com>
Date: Sun, 19 May 2024 13:48:29 +0530
Subject: [PATCH] added font style and font weight to text tool

---
 components/Canvas.jsx                      |  2 +-
 components/Drawing/Drawing.js              |  2 +-
 components/ElementManipulation/Element.js  |  3 +-
 components/PropertiesBar/PropertiesBar.jsx | 68 +++++++++++++++++++++-
 components/Redux/GlobalProps.js            |  2 +
 export/export.js                           |  2 +-
 6 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/components/Canvas.jsx b/components/Canvas.jsx
index 751fd45..58e6448 100644
--- a/components/Canvas.jsx
+++ b/components/Canvas.jsx
@@ -836,7 +836,7 @@ const Canvas = () => {
           position: "fixed", top: (selectedElement.y1 + panOffset.y) * scale - scaleOffset.y,
           left: (selectedElement.x1 + panOffset.x) * scale - scaleOffset.x
 
-          , font: `${selectedElement.fontSize * scale}px Virgil`, color: selectedElement.stroke, margin: 0, padding: 0, border: 0, outline: 0, resize: 'auto', overflow: 'hidden',
+          , font: `${selectedElement.fontSize * scale}px Virgil`,fontStyle:selectedElement.fontStyle,fontWeight:selectedElement.fontWeight, color: selectedElement.stroke, margin: 0, padding: 0, border: 0, outline: 0, resize: 'auto', overflow: 'hidden',
           background: 'transparent', whiteSpace: 'pre'
           , resize: 'none', maxHeight: height - (selectedElement.y1 + panOffset.y) * scale + scaleOffset.y, maxWidth: width - (selectedElement.x1 + panOffset.x) * scale + scaleOffset.x
 
diff --git a/components/Drawing/Drawing.js b/components/Drawing/Drawing.js
index 69cd9b0..ca0d817 100644
--- a/components/Drawing/Drawing.js
+++ b/components/Drawing/Drawing.js
@@ -61,7 +61,7 @@ export const drawElements = (ctx, element) => {
     case "text":
 
       ctx.textBaseline = "top";
-      ctx.font = `${element.fontSize}px Virgil`;
+      ctx.font = `${element.fontStyle} ${element.fontWeight} ${element.fontSize}px Virgil`;
 
       var txt = element.text;
 
diff --git a/components/ElementManipulation/Element.js b/components/ElementManipulation/Element.js
index 8e91479..985f0b6 100644
--- a/components/ElementManipulation/Element.js
+++ b/components/ElementManipulation/Element.js
@@ -474,7 +474,8 @@ export const addElementToInventory = (elements, x1, y1, x2, y2, copyElement, mou
   else {
     newElement = {
       ...addElement(elementId + "#" + elements.length, x1, y1, x2, y2, tool), stroke: GlobalProps.stroke, fill: GlobalProps.fill,
-      fillStyle: GlobalProps.fillStyle, sharp: GlobalProps.sharp, strokeStyle: GlobalProps.strokeStyle, strokeWidth: GlobalProps.strokeWidth, bowing: GlobalProps.bowing, fontSize: GlobalProps.fontSize
+      fillStyle: GlobalProps.fillStyle, sharp: GlobalProps.sharp, strokeStyle: GlobalProps.strokeStyle, strokeWidth: GlobalProps.strokeWidth, bowing: GlobalProps.bowing, fontSize: GlobalProps.fontSize,
+      fontWeight: GlobalProps.fontWeight, fontStyle: GlobalProps.fontStyle
     };
   }
 
diff --git a/components/PropertiesBar/PropertiesBar.jsx b/components/PropertiesBar/PropertiesBar.jsx
index e000626..f4a5a58 100644
--- a/components/PropertiesBar/PropertiesBar.jsx
+++ b/components/PropertiesBar/PropertiesBar.jsx
@@ -29,6 +29,8 @@ const PropertiesBar = () => {
     const [sharp, setSharp] = useState(false);
     const [bowing, setBowing] = useState(2);
     const [fontSize, setFontSize] = useState(24);
+    const [fontStyle, setFontStyle] = useState("normal");
+    const [fontWeight, setFontWeight] = useState("lighter");
 
     const selectedElement = useSelector(state => state.selectedElement.value);
     const index = useSelector(state => state.elements.index);
@@ -78,6 +80,8 @@ const PropertiesBar = () => {
                 const currentSharp = GlobalProps.sharp;
                 const bowing = GlobalProps.bowing;
                 const currentFontSize = GlobalProps.fontSize;
+                const currentFontStyle = GlobalProps.fontStyle;
+                const currentFontWeight = GlobalProps.fontWeight;
                 const currentFillStyle = GlobalProps.fillStyle;
 
                 setBackground(currentBackground);
@@ -87,6 +91,8 @@ const PropertiesBar = () => {
                 setSharp(currentSharp);
                 setBowing(bowing);
                 setFontSize(currentFontSize);
+                setFontStyle(currentFontStyle);
+                setFontWeight(currentFontWeight);
                 setStroke(currentStroke);
 
             } else {
@@ -109,7 +115,11 @@ const PropertiesBar = () => {
                     setBowing(bowing);
                 } else if (element.type === 'text') {
                     const currentFontSize = element.fontSize;
+                    const currentFontStyle = element.fontStyle;
+                    const currentFontWeight = element.fontWeight;
                     setFontSize(currentFontSize);
+                    setFontStyle(currentFontStyle);
+                    setFontWeight(currentFontWeight);
 
                 }
                 setStroke(currentStroke);
@@ -124,6 +134,8 @@ const PropertiesBar = () => {
             const currentSharp = GlobalProps.sharp;
             const bowing = GlobalProps.bowing;
             const currentFontSize = GlobalProps.fontSize;
+            const currentFontStyle = GlobalProps.fontStyle;
+            const currentFontWeight = GlobalProps.fontWeight;
 
             setBackground(currentBackground);
             setFillStyle(currentFillStyle);
@@ -132,6 +144,8 @@ const PropertiesBar = () => {
             setSharp(currentSharp);
             setBowing(bowing);
             setFontSize(currentFontSize);
+            setFontStyle(currentFontStyle);
+            setFontWeight(currentFontWeight);
             setStroke(currentStroke);
 
         }
@@ -155,6 +169,8 @@ const PropertiesBar = () => {
             GlobalProps.sharp = sharp;
             GlobalProps.bowing = bowing;
             GlobalProps.fontSize = fontSize;
+            GlobalProps.fontStyle = fontStyle;
+            GlobalProps.fontWeight = fontWeight;
             return;
         }
 
@@ -184,7 +200,7 @@ const PropertiesBar = () => {
                 options = { stroke: stroke, fill: background, fillStyle: fillStyle, strokeStyle: strokeStyle, strokeWidth: strokeWidth, sharp: sharp, bowing: bowing };
                 break;
             case "text":
-                options = { stroke: stroke, fontSize: fontSize };
+                options = { stroke: stroke, fontStyle:fontStyle, fontWeight:fontWeight, fontSize: fontSize};
                 break;
             case "pencil":
                 options = { stroke: stroke, strokeWidth: strokeWidth };
@@ -206,7 +222,7 @@ const PropertiesBar = () => {
 
         if (type === "text") {
             const context = document.getElementById("canvas").getContext('2d');
-            context.font = `${fontSize}px Virgil`;
+            context.font = `${fontStyle} ${fontWeight} ${fontSize}px Virgil`;
 
 
 
@@ -246,7 +262,7 @@ const PropertiesBar = () => {
 
 
         setChangedByUser(false);
-    }, [firstEffectCompleted, stroke, background,fillStyle, strokeStyle, strokeWidth, sharp, bowing, fontSize])
+    }, [firstEffectCompleted, stroke, background,fillStyle, strokeStyle, strokeWidth, sharp, bowing, fontSize, fontStyle, fontWeight])
 
 
   if (tool === "eraser") {
@@ -342,6 +358,52 @@ const PropertiesBar = () => {
                         : null}
 
                     {(tool === 'text' && selectedElement === null) || (selectedElement != null && selectedElement.type === 'text') ? <CardContent>
+                        <span className='text-xs'>Font style</span>
+                        <div className='flex flex-row'>
+                           <Button onClick={() => {
+                                setChangedByUser(true);
+                                setFontStyle("normal");
+                            }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontStyle == "normal" ? "bg-[#d4d9d6]" : null} `}>
+                                <span className='text-sm font-normal'>Normal</span>
+                            </Button>
+                            <Button onClick={() => {
+                                setChangedByUser(true);
+                                setFontStyle("italic");
+                            }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontStyle == "italic" ? "bg-[#d4d9d6]" : null} `}>
+                                <span className='text-sm italic font-normal'>Italic</span>
+                            </Button>
+                        </div>
+
+                    </CardContent>
+                        : null}
+                    
+                        {(tool === 'text' && selectedElement === null) || (selectedElement != null && selectedElement.type === 'text') ? <CardContent>
+                        <span className='text-xs'>Font weight</span>
+                        <div className='flex flex-row'>
+                            {/* <Button onClick={() => {
+                                setChangedByUser(true);
+                                setFontWeight("normal");
+                            }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontWeight === "normal" ? "bg-[#d4d9d6]" : null} `}>
+                                <span className='text-sm font-normal'>Normal</span>
+                            </Button> */}
+                            <Button onClick={() => {
+                                setChangedByUser(true);
+                                setFontWeight("lighter");
+                            }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontWeight === "lighter" ? "bg-[#d4d9d6]" : null} `}>
+                                <span className='text-sm font-thin'>Lighter</span>
+                            </Button>
+                            <Button onClick={() => {
+                                setChangedByUser(true);
+                                setFontWeight("bold");
+                            }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontWeight === "bold" ? "bg-[#d4d9d6]" : null} `}>
+                                <span className='text-sm font-bold'>Bold</span>
+                            </Button>
+                        </div>
+
+                    </CardContent>
+                        : null}
+                    
+                        {(tool === 'text' && selectedElement === null) || (selectedElement != null && selectedElement.type === 'text') ? <CardContent>
                         <span className='text-xs'>Font size</span>
                         <div className='flex flex-row'>
                             <Button onClick={() => {
diff --git a/components/Redux/GlobalProps.js b/components/Redux/GlobalProps.js
index cdfb27c..7e5f66e 100644
--- a/components/Redux/GlobalProps.js
+++ b/components/Redux/GlobalProps.js
@@ -8,6 +8,8 @@ export class GlobalProps {
     static strokeWidth = 2;
     static bowing = 2;
     static fontSize = 24;
+    static fontStyle = "normal";
+    static fontWeight = "lighter";
     static socket = null;
     static room = null;
     static username = null;
diff --git a/export/export.js b/export/export.js
index 408075b..8561275 100644
--- a/export/export.js
+++ b/export/export.js
@@ -127,7 +127,7 @@ export const exportImage = (backgroundExport, toast) => {
           case "text":
             ctx.textBaseline = "top";
 
-            ctx.font = `${element.fontSize}px Virgil`;
+            ctx.font = `${element.fontStyle} ${element.fontWeight} ${element.fontSize}px Virgil`;
 
             var txt = element.text;