Added text padding option

Author: KartoffelChipss

src/app.tsx

@@ -19,6 +19,7 @@ const hexToRgb = (hex: string): [number, number, number] => {
 export default function App() {
     const DEFAULT_TEXT_SIZE = 120;
     const DEFAULT_BG_DIM = 0.4;
+    const DEFAULT_TEXT_PADDING = 0.05;
 
     const camvasSizes: Record<
         "cover" | "poster",
@@ -47,6 +48,7 @@ export default function App() {
     const [dimColor, setDimColor] = useState("#000000");
     const [textAlign, setTextAlign] = useState<TextAlign>("center");
     const [textBaseline, setTextBaseline] = useState<TextBaseLine>("middle");
+    const [textPadding, setTextPadding] = useState(DEFAULT_TEXT_PADDING);
 
     const getCanvasWidth = () => camvasSizes[imageType].width;
     const getCanvasHeight = () => camvasSizes[imageType].height;
@@ -75,8 +77,9 @@ export default function App() {
         ctx.textAlign = align;
 
         let x: number = getCanvasWidth() / 2;
-        if (align === "left") x = maxWidth * 0.05;
-        else if (align === "right") x = getCanvasWidth() - maxWidth * 0.05;
+        if (align === "left") x = maxWidth * textPadding;
+        else if (align === "right")
+            x = getCanvasWidth() - maxWidth * textPadding;
 
         const words = text.split(" ");
         const lines: string[] = [];
@@ -96,7 +99,7 @@ export default function App() {
 
         const totalHeight = lines.length * lineHeight;
 
-        const padding = getCanvasHeight() * 0.05;
+        const padding = getCanvasHeight() * textPadding;
         let y: number;
         if (baseline === "top") {
             y = padding;
@@ -208,6 +211,7 @@ export default function App() {
         dimColor,
         textAlign,
         textBaseline,
+        textPadding,
     ]);
 
     useEffect(() => {
@@ -264,6 +268,9 @@ export default function App() {
                     setTextAlign={setTextAlign}
                     textBaseline={textBaseline}
                     setTextBaseline={setTextBaseline}
+                    defaultTextPadding={DEFAULT_TEXT_PADDING}
+                    textPadding={textPadding}
+                    setTextPadding={setTextPadding}
                 />
 
                 <div

src/components/OptionsDisplay.tsx

@@ -38,6 +38,9 @@ interface OptionsDisplayProps {
     setTextAlign: (align: TextAlign) => void;
     textBaseline: TextBaseLine;
     setTextBaseline: (baseline: TextBaseLine) => void;
+    defaultTextPadding: number;
+    textPadding: number;
+    setTextPadding: (padding: number) => void;
 }
 
 const OptionsDisplay: FC<OptionsDisplayProps> = ({
@@ -63,6 +66,9 @@ const OptionsDisplay: FC<OptionsDisplayProps> = ({
     setTextAlign,
     textBaseline,
     setTextBaseline,
+    defaultTextPadding,
+    textPadding,
+    setTextPadding,
 }) => (
     <div className="flex flex-col gap-5 w-1/3 mb-5">
         <div className="flex gap-3 items-end">
@@ -153,6 +159,25 @@ const OptionsDisplay: FC<OptionsDisplayProps> = ({
             />
         </div>
 
+        <div className="flex flex-col">
+            <span className="text-sm text-muted-foreground mb-1">
+                Text Padding:
+            </span>
+            <SliderInput
+                value={textPadding}
+                min={0}
+                max={0.5}
+                decimalPlaces={2}
+                onChange={(v) => setTextPadding(v)}
+                step={0.01}
+                showPlusMinusButtons
+                displayValue
+                displayUnit="%"
+                defaultValue={defaultTextPadding}
+                disabled={textAlign == "center" && textBaseline == "middle"}
+            />
+        </div>
+
         <div className="flex flex-col">
             <span className="text-sm text-muted-foreground mb-1">
                 Text Size:

src/components/SliderInput.tsx

@@ -14,6 +14,7 @@ interface SliderInputProps {
     displayUnit?: string;
     decimalPlaces?: number;
     className?: string;
+    disabled?: boolean;
 }
 
 const SliderInput: FC<SliderInputProps> = ({
@@ -29,6 +30,7 @@ const SliderInput: FC<SliderInputProps> = ({
     displayUnit,
     decimalPlaces = 0,
     className = "",
+    disabled = false,
 }) => {
     const sliderRef = useRef<HTMLInputElement>(null);
 
@@ -51,7 +53,11 @@ const SliderInput: FC<SliderInputProps> = ({
     };
 
     return (
-        <div className={"flex gap-3 items-center justify-between " + className}>
+        <div
+            className={
+                "relative flex gap-3 items-center justify-between " + className
+            }
+        >
             {showPlusMinusButtons && (
                 <button
                     className="btn-ghost"
@@ -74,6 +80,7 @@ const SliderInput: FC<SliderInputProps> = ({
                 defaultValue={defaultValue}
                 onInput={handleInput}
                 ref={sliderRef}
+                disabled={disabled}
             />
 
             {showPlusMinusButtons && (
@@ -82,7 +89,7 @@ const SliderInput: FC<SliderInputProps> = ({
                     onClick={() =>
                         onChange(Math.min(max, value + (buttonStep || step)))
                     }
-                    disabled={value >= max}
+                    disabled={value >= max || disabled}
                 >
                     <Plus />
                 </button>
@@ -110,12 +117,16 @@ const SliderInput: FC<SliderInputProps> = ({
                 <button
                     className="btn-ghost"
                     onClick={() => onChange(defaultValue)}
-                    disabled={value === defaultValue}
+                    disabled={value === defaultValue || disabled}
                     title="Reset to default value"
                 >
                     <Undo2 />
                 </button>
             )}
+
+            {disabled && (
+                <div className="absolute inset-0 bg-black opacity-50 pointer-events-none"></div>
+            )}
         </div>
     );
 };