Skip to content

Commit

Permalink
Merge pull request #58 from atharvarekhawar/font-enhancement
Browse files Browse the repository at this point in the history 
added font style and font weight to text tool
  • Loading branch information
@dhruvpatidar359
dhruvpatidar359 authored May 20, 2024
2 parents b4c0cc9 + 0c85cf1 commit 3c884ef
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 7 deletions.
2 changes: 1 addition & 1 deletion components/Canvas.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion components/Drawing/Drawing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
3 changes: 2 additions & 1 deletion components/ElementManipulation/Element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
}

Expand Down
68 changes: 65 additions & 3 deletions components/PropertiesBar/PropertiesBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -87,6 +91,8 @@ const PropertiesBar = () => {
setSharp(currentSharp);
setBowing(bowing);
setFontSize(currentFontSize);
setFontStyle(currentFontStyle);
setFontWeight(currentFontWeight);
setStroke(currentStroke);

} else {
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -132,6 +144,8 @@ const PropertiesBar = () => {
setSharp(currentSharp);
setBowing(bowing);
setFontSize(currentFontSize);
setFontStyle(currentFontStyle);
setFontWeight(currentFontWeight);
setStroke(currentStroke);

}
Expand All @@ -155,6 +169,8 @@ const PropertiesBar = () => {
GlobalProps.sharp = sharp;
GlobalProps.bowing = bowing;
GlobalProps.fontSize = fontSize;
GlobalProps.fontStyle = fontStyle;
GlobalProps.fontWeight = fontWeight;
return;
}

Expand Down Expand Up @@ -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 };
Expand All @@ -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`;



Expand Down Expand Up @@ -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") {
Expand Down Expand Up @@ -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={() => {
Expand Down
2 changes: 2 additions & 0 deletions components/Redux/GlobalProps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion export/export.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down

0 comments on commit 3c884ef

Please sign in to comment.