bsign-customization-full 0.0.1

package/src/components/layers/layer-forms/text-form.tsx

@@ -0,0 +1,477 @@
+import { useLayersStore } from "../../../store/layers-store";
+import { isTextLayer } from "../../../lib/type-checks";
+import { Label } from "../../ui/label";
+import {
+    AUTO_ADD_TEXT_LINE_DENSITY_STEP,
+    AUTO_ADD_TEXT_MIN_SCALE_RATIO,
+    AUTO_ADD_TEXT_SCALE_STEP,
+    BASE_FONT_SIZE,
+    BASE_TEXT_SCALE_CHANGE_VALUE,
+    getMinScaleByTemplate,
+    getMaxLineLengthByPt,
+    MAX_SCALE,
+} from "../../../lib/config-font";
+import { getTemplateById, getTemplateMaterial } from "../../../lib/config";
+// AlignJustifyIcon, AlignLeftIcon, AlignRightIcon,
+import { AlignCenterIcon, MinusIcon, Plus, PlusIcon, Trash } from "lucide-react";
+// import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
+// import { ToggleGroup, ToggleGroupItem } from "../../ui/toggle-group";
+import { Checkbox } from "../../ui/checkbox";
+import { useEffect, useState } from "react";
+// import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+// import { icons } from "../../../lib/config";
+import type { TLayer } from "../../preview";
+import type { LayerTextProps } from "../text-layer";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../../ui/input-group";
+import { useIsMobile } from "../../../hooks/use-mobile";
+
+type IndexedTextLayer = TLayer<LayerTextProps> & { index: number };
+
+export default function TextLayerForm() {
+    const { layers: globalLayersState, change, add, remove, editOptions, options, requestTextCentering } = useLayersStore()
+    // const [selectedIcon, setSelectedIcon] = useState<string>()
+    const [movable, setMovable] = useState(false);
+    const isMobile = useIsMobile();
+    const selectedTemplate = getTemplateById(options.selectedTemplateId);
+    const selectedMaterial = getTemplateMaterial({
+        template: selectedTemplate,
+        materialId: options.selectedMaterialId,
+    });
+    const minScale = getMinScaleByTemplate({
+        templateId: selectedTemplate.id,
+    });
+    const clampScale = (value: number) => Math.min(MAX_SCALE, Math.max(minScale, value));
+    const normalizeScale = (value: number) => Number(clampScale(value).toFixed(3));
+
+    const handleChangeTextFontScale = (index: number, scale: number) => {
+        change(index, { scale: normalizeScale(scale) })
+    }
+
+    // const handleChangeTextAlign = (align: "center" | "left" | "right" | "justify") => {
+    //     const lines = globalLayersState.map((layer, index) => ({ ...layer, index })).filter(layer => layer.type === 'text');
+    //     lines.forEach(line => {
+    //         change(line.index, { coordinates: { ...line.props.coordinates, x: 340 }, align });
+    //     })
+    // }
+
+    const getUpdatedLayersSnapshot = (index: number, props: Partial<LayerTextProps>) =>
+        globalLayersState.map((layer, layerIndex) => {
+            if (layerIndex !== index || !isTextLayer(layer)) return layer;
+
+            return {
+                ...layer,
+                props: {
+                    ...layer.props,
+                    ...props,
+                },
+            };
+        });
+
+    const generateBraille = (layersSnapshot = globalLayersState) => {
+        const brailleLayerIndex = layersSnapshot.findIndex((layer) => layer.subtype === "braille");
+        if (brailleLayerIndex === -1) return;
+
+        const brailleText = layersSnapshot.reduce((text, layer) => {
+            if (layer.type !== "text" || layer.subtype === "braille" || !isTextLayer(layer) || !layer.props.braille) {
+                return text;
+            }
+
+            return `${text}${layer.props.text} `;
+        }, "").trim();
+
+        change(brailleLayerIndex, { text: brailleText });
+    }
+
+    const handleChangeLayerTextContent = (index: number, newContent: string) => {
+        change(index, { text: newContent });
+        generateBraille(getUpdatedLayersSnapshot(index, { text: newContent }));
+    }
+
+    const handleSwitchTextBraille = (index: number) => {
+        const layer = globalLayersState[index]
+        if (isTextLayer(layer)) {
+            const nextBrailleState = !layer.props.braille;
+            change(index, { braille: nextBrailleState });
+            generateBraille(getUpdatedLayersSnapshot(index, { braille: nextBrailleState }));
+        }
+    }
+
+    const ptToPx = (pt: number) => pt * (96 / 72);
+    const isIndexedTextLine = (layer: TLayer<unknown> & { index: number }): layer is IndexedTextLayer =>
+        layer.type === "text" && layer.subtype !== "braille" && isTextLayer(layer as TLayer<LayerTextProps>);
+
+    const getIndexedTextLines = () => globalLayersState
+        .map((layer, index) => ({ ...layer, index }) as TLayer<unknown> & { index: number })
+        .filter(isIndexedTextLine)
+        .sort((a, b) => (a.props.coordinates.y ?? 0) - (b.props.coordinates.y ?? 0));
+
+    const getAutoScaleStepByLinesCount = (linesCount: number, sizeBaseScale: number) => {
+        const lineDensityFactor = 1 + (Math.max(0, linesCount - 2) * AUTO_ADD_TEXT_LINE_DENSITY_STEP);
+        return AUTO_ADD_TEXT_SCALE_STEP * sizeBaseScale * lineDensityFactor;
+    };
+
+    const getAutoScaleForLines = (linesCount: number, currentLines: IndexedTextLayer[]) => {
+        const sizeBaseScale = clampScale(options.selectedSize.baseTextScale ?? 1);
+
+        const currentMinScale = currentLines.reduce((minScale, line) => {
+            const lineScale = line.props.scale ?? sizeBaseScale;
+            return Math.min(minScale, lineScale);
+        }, Number.POSITIVE_INFINITY);
+
+        if (!Number.isFinite(currentMinScale)) return sizeBaseScale;
+
+        // Every new line reduces scale. The reduction is size-aware and slightly stronger with more lines.
+        const sizeAwareStep = getAutoScaleStepByLinesCount(linesCount, sizeBaseScale);
+        const oneStepDownScale = clampScale(Number((currentMinScale - sizeAwareStep).toFixed(2)));
+        const sizeMinimumScale = clampScale(Number((sizeBaseScale * AUTO_ADD_TEXT_MIN_SCALE_RATIO).toFixed(2)));
+
+        // Never auto-increase scale if current text is already smaller than our lower bound.
+        return clampScale(Math.min(currentMinScale, Math.max(sizeMinimumScale, oneStepDownScale)));
+    };
+
+    const getAutoScaleAfterLineRemoval = (currentLinesCount: number, remainingLines: IndexedTextLayer[]) => {
+        const sizeBaseScale = clampScale(options.selectedSize.baseTextScale ?? 1);
+
+        const currentMaxScale = remainingLines.reduce((maxScale, line) => {
+            const lineScale = line.props.scale ?? sizeBaseScale;
+            return Math.max(maxScale, lineScale);
+        }, Number.NEGATIVE_INFINITY);
+
+        if (!Number.isFinite(currentMaxScale)) return sizeBaseScale;
+
+        // Mirror auto-add behavior: when a line is removed, increase by one size-aware step.
+        const sizeAwareStep = getAutoScaleStepByLinesCount(currentLinesCount, sizeBaseScale);
+        const oneStepUpScale = clampScale(Number((currentMaxScale + sizeAwareStep).toFixed(2)));
+        const sizeMaximumScale = clampScale(Number(sizeBaseScale.toFixed(2)));
+
+        return clampScale(Math.max(currentMaxScale, Math.min(sizeMaximumScale, oneStepUpScale)));
+    };
+
+    const handleAddNewTextLayer = () => {
+        const textLines = getIndexedTextLines();
+
+        if (!textLines.length) return;
+
+        const firstLine = textLines[0];
+        const baseX = firstLine.props.coordinates.x ?? 340;
+        const centerY = textLines.reduce((sum, line) => sum + (line.props.coordinates.y ?? 330), 0) / textLines.length;
+        const targetLinesCount = textLines.length + 1;
+        const targetScale = getAutoScaleForLines(targetLinesCount, textLines);
+        const lineSpacing = Math.max(72, Math.round(ptToPx(BASE_FONT_SIZE * targetScale)));
+
+        let newLineY = centerY;
+
+        textLines.forEach((line) => {
+            change(line.index, { scale: targetScale });
+        });
+
+        if (!movable) {
+            const startY = centerY - ((targetLinesCount - 1) * lineSpacing) / 2;
+
+            textLines.forEach((line, orderIndex) => {
+                change(line.index, {
+                    coordinates: {
+                        x: line.props.coordinates.x ?? baseX,
+                        y: startY + (orderIndex * lineSpacing),
+                    },
+                });
+            });
+
+            newLineY = startY + ((targetLinesCount - 1) * lineSpacing);
+
+            const brailleLayerIndex = globalLayersState.findIndex((layer) => layer.subtype === "braille");
+            if (brailleLayerIndex !== -1) {
+                change(brailleLayerIndex, {
+                    coordinates: {
+                        x: baseX,
+                        y: newLineY + Math.round(lineSpacing * 0.75),
+                    },
+                });
+            }
+        }
+
+        add({
+            type: 'text',
+            props: {
+                fontSize: BASE_FONT_SIZE,
+                text: '',
+                coordinates: { x: baseX, y: newLineY },
+                movable,
+                scale: targetScale,
+                braille: true,
+                color: selectedMaterial.textColor,
+            }
+        });
+
+        generateBraille()
+    }
+
+    // const handleUploadIcon = (e: React.ChangeEvent<HTMLInputElement>) => {
+    //     const file = e.target.files?.[0];
+    //     if (!file) return;
+
+    //     const reader = new FileReader();
+    //     reader.onloadend = () => {
+    //         setSelectedIcon(reader.result as string);
+    //     };
+    //     reader.readAsDataURL(file);
+    // }
+
+    const handleRemoveTextLine = (index: number) => {
+        const textLines = getIndexedTextLines();
+        const brailleLayerIndex = globalLayersState.findIndex((layer) => layer.subtype === "braille");
+
+        if (!textLines.length) {
+            remove(index);
+            return;
+        }
+
+        const remainingLines = textLines.filter((line) => line.index !== index);
+        if (!remainingLines.length) {
+            if (brailleLayerIndex !== -1) {
+                change(brailleLayerIndex, { text: "" });
+            }
+            remove(index);
+            return;
+        }
+
+        const removedLine = textLines.find((line) => line.index === index);
+        const baseX = removedLine?.props.coordinates.x ?? remainingLines[0].props.coordinates.x ?? 340;
+        const centerY = textLines.reduce((sum, line) => sum + (line.props.coordinates.y ?? 330), 0) / textLines.length;
+        const targetScale = getAutoScaleAfterLineRemoval(textLines.length, remainingLines);
+        const lineSpacing = Math.max(72, Math.round(ptToPx(BASE_FONT_SIZE * targetScale)));
+
+        remainingLines.forEach((line) => {
+            change(line.index, { scale: targetScale });
+        });
+
+        if (!movable) {
+            const startY = centerY - ((remainingLines.length - 1) * lineSpacing) / 2;
+
+            remainingLines.forEach((line, orderIndex) => {
+                change(line.index, {
+                    coordinates: {
+                        x: line.props.coordinates.x ?? baseX,
+                        y: startY + (orderIndex * lineSpacing),
+                    },
+                });
+            });
+
+            if (brailleLayerIndex !== -1) {
+                const lastLineY = startY + ((remainingLines.length - 1) * lineSpacing);
+                change(brailleLayerIndex, {
+                    coordinates: {
+                        x: baseX,
+                        y: lastLineY + Math.round(lineSpacing * 0.75),
+                    },
+                });
+            }
+        }
+
+        if (brailleLayerIndex !== -1) {
+            const brailleText = remainingLines.reduce((text, line) => line.props.braille ? `${text}${line.props.text} ` : text, "");
+            change(brailleLayerIndex, { text: brailleText });
+        }
+
+        remove(index);
+    }
+
+    const handleCenterText = () => {
+        requestTextCentering();
+    }
+
+    useEffect(() => {
+        const lines = globalLayersState.map((layer, index) => ({ ...layer, index })).filter(layer => layer.type === 'text' || (layer.type === 'image' && layer.subtype === 'icon'));
+        lines.forEach(({ index }) => {
+            change(index, { movable })
+        });
+    }, [movable])
+
+    // useEffect(() => {
+    //     const iconIndex = globalLayersState.findIndex(layer => layer.subtype === 'icon');
+    //     if (selectedIcon) {
+    //         if (iconIndex !== -1) {
+    //             change(iconIndex, { imageSrc: selectedIcon, hidden: false });
+    //         } else {
+    //             add({
+    //                 type: 'image',
+    //                 subtype: 'icon',
+    //                 props: {
+    //                     imageSrc: selectedIcon,
+    //                     coordinates: { x: -35, y: 94 },
+    //                     width: 150,
+    //                     height: 150,
+    //                     movable,
+    //                     hidden: false
+    //                 }
+    //             });
+    //         }
+    //     } else {
+    //         if (iconIndex !== -1) {
+    //             change(iconIndex, { hidden: true });
+    //         }
+    //     }
+    // }, [selectedIcon])
+
+    return (
+        <div className="space-y-4 p-1">
+            <div className="space-y-1">
+                <p className="text-[24px] font-semibold text-[#1C1D1D]">Text</p>
+                <p className="text-[12px] text-[#8F8F8F]">Edit lines, style and braille options</p>
+            </div>
+            {globalLayersState
+                .map((layer, index) => ({ ...layer, index }))
+                .filter(layer => layer.type === 'text' && layer.subtype !== 'braille')
+                .map((layer, lineNumber) => {
+                    if (!(layer.type === "text" && layer.subtype !== "braille" && isTextLayer(layer))) return null;
+
+                    const currentTextPt = Math.round(layer.props.fontSize * (layer.props.scale ?? 1));
+                    const maxRecommendedLineLength = getMaxLineLengthByPt(
+                        currentTextPt,
+                        options.selectedSize.inchs,
+                        options.selectedTemplateId
+                    );
+                    const isTextOverLimit = layer.props.text.length > maxRecommendedLineLength;
+
+                    return (
+                        <div
+                            key={`text_element_${layer.index}`}
+                        >
+                            <div className="flex flex-col gap-6">
+                                <div className="space-y-[8px]">
+                                    <Label>Line {lineNumber + 1}</Label>
+
+                                    <InputGroup>
+                                        <InputGroupInput
+                                            onInput={(e) => handleChangeLayerTextContent(layer.index, e.currentTarget.value)}
+                                            className="focus:outline-none"
+                                            value={layer.props.text}
+                                        />
+
+                                        <InputGroupAddon className="font-medium text-[12px]" align="inline-end">{currentTextPt} pt</InputGroupAddon>
+
+                                        <InputGroupButton
+                                            size={"icon-sm"}
+                                            className="rounded-none bg-white border-x border-[#D6D6D6] h-full"
+                                            onClick={() => {
+                                                const currentScale = layer.props.scale ?? 1;
+                                                handleChangeTextFontScale(
+                                                    layer.index,
+                                                    currentScale + BASE_TEXT_SCALE_CHANGE_VALUE
+                                                );
+                                            }}
+                                        >
+                                            <PlusIcon />
+                                        </InputGroupButton>
+
+                                        <InputGroupButton
+                                            size={"icon-sm"}
+                                            className="rounded-none bg-white border-r border-[#D6D6D6] h-full"
+                                            onClick={() => {
+                                                const currentScale = layer.props.scale ?? 1;
+                                                handleChangeTextFontScale(
+                                                    layer.index,
+                                                    currentScale - BASE_TEXT_SCALE_CHANGE_VALUE
+                                                );
+                                            }}
+                                        >
+                                            <MinusIcon />
+                                        </InputGroupButton>
+
+                                        <InputGroupButton
+                                            size={"icon-sm"}
+                                            className="rounded-l-none bg-white h-full"
+                                            onClick={() => handleRemoveTextLine(layer.index)}
+                                        >
+                                            <Trash />
+                                        </InputGroupButton>
+                                    </InputGroup>
+                                    <p className={`text-xs ${isTextOverLimit ? "text-red-700" : "text-[#8F8F8F]"}`}>
+                                        Recommended limit: {maxRecommendedLineLength} chars per line ({layer.props.text.length}/{maxRecommendedLineLength})
+                                    </p>
+
+                                    {isTextOverLimit && (
+                                        <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg">
+                                            <svg
+                                                className="w-4 h-4 text-red-500 flex-shrink-0"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                                                />
+                                            </svg>
+                                            <p className="text-xs text-red-700">
+                                                The maximum recommended text length is {maxRecommendedLineLength} characters per line.
+                                            </p>
+                                        </div>
+                                    )}
+
+                                    <div className="text-sm flex items-center gap-1 cursor-pointer select-none" onClick={() => handleSwitchTextBraille(layer.index)}>
+                                        <Checkbox checked={layer.props.braille} value='add' name={`add-braille-${layer.index}`} />
+                                        <Label className="cursor-pointer text-black" htmlFor={`add-braille-${layer.index}`}>Add braille</Label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div >
+                    );
+                })}
+
+            <Button className="w-full rounded-[8px] h-[40px]" variant="outline" onClick={() => handleAddNewTextLayer()}><Plus /> Add more text</Button>
+            <Button className="w-full rounded-[8px] h-[40px]" variant="outline" onClick={handleCenterText}>
+                <AlignCenterIcon />
+                Center text
+            </Button>
+
+            <div className="space-y-4">
+                <div className="flex text-sm items-center gap-2 cursor-pointer select-none" onClick={() => setMovable(prev => !prev)}>
+                    <Checkbox checked={movable} value='add' name="movable" />
+                    <Label className="cursor-pointer text-black" htmlFor='movable'>Edit Position, Style and Free Transform</Label>
+                </div>
+                {movable && isMobile && (
+                    <p className="text-xs text-[#6B7280]">
+                        Tip: drag text with one finger on preview. The page scroll is paused while dragging.
+                    </p>
+                )}
+
+                <div className="flex text-sm items-center gap-2 cursor-pointer select-none" onClick={() => editOptions({ gridInch: !options.gridInch })}>
+                    <Checkbox checked={options.gridInch} value='add' name="movable" />
+                    <Label className="cursor-pointer text-black" htmlFor='movable'>Show inch grid</Label>
+                </div>
+
+                <div className="flex text-sm items-center gap-2 cursor-pointer select-none" onClick={() => editOptions({ gridCm: !options.gridCm })}>
+                    <Checkbox checked={options.gridCm} value='add' name="movable" />
+                    <Label className="cursor-pointer text-black" htmlFor='movable'>Show centimeter grid</Label>
+                </div>
+            </div>
+
+            {/* {movable && <Popover>
+                <PopoverTrigger>
+                    <Button variant="outline">Add Icon</Button>
+                </PopoverTrigger>
+                <PopoverContent>
+                    {!selectedIcon ? <div>
+                        <Label htmlFor="icon" className="mb-1"><Upload size={16} /> Upload</Label>
+                        <Input name='icon' id="icon" type="file" className="w-full" accept="image/png, image/svg, image/webp" onInput={handleUploadIcon} />
+                        <span className="text-xs text-black/50">Image *.png, *.svg, *.webp</span>
+                    </div> : (
+                        <Button variant="destructive" size="sm" className="w-full" onClick={() => setSelectedIcon(undefined)}>Remove Icon</Button>
+                    )}
+                    <div className="mt-2 flex items-start gap-1 flex-wrap">
+                        {icons.map(icon => (
+                            <Button key={icon} size='icon' variant='outline' className={`${icon === selectedIcon ? 'border-2 border-primary' : ''}`} onClick={() => setSelectedIcon(icon)}>
+                                <img src={icon} className="p-0.5" />
+                            </Button>
+                        ))}
+                    </div>
+                </PopoverContent>
+            </Popover>} */}
+
+        </div >
+    )
+}