bsign-customization-full 0.0.1

package/src/components/layers/layers-container.tsx

@@ -0,0 +1,259 @@
+import { useLayersStore } from "../../store/layers-store"
+import { Label } from "../ui/label"
+import { Slider } from "../ui/slider"
+import type { LayrProps } from "../preview"
+import { isImageLayer, isTextLayer } from "../../lib/type-checks"
+import { Textarea } from "../ui/textarea"
+import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, ImageIcon, TypeIcon } from "lucide-react"
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
+import { useState } from "react"
+import { Checkbox } from "../ui/checkbox"
+import { Input } from "../ui/input"
+import { getMaxLineLengthByPt } from "../../lib/config-font"
+
+export default function LayersContainer() {
+    const { layers, init: setLayers, options } = useLayersStore()
+    const [customBraille, setCustomBraille] = useState(false)
+
+    const updateLayer = (index: number, props: Partial<LayrProps>) => {
+        const temp = layers
+        temp[index] = {
+            ...temp[index],
+            props: {
+                ...temp[index].props,
+                ...props,
+            },
+        }
+        setLayers(temp)
+    }
+
+    // Change image layer size
+    // const handleChangeLayerWidth = (index: number, newWidth: number) => {
+    //     updateLayer(index, { width: `${newWidth}%` })
+    // }
+
+    const handleChangeTextFontScale = (index: number, scale: number) => {
+        updateLayer(index, { scale })
+    }
+
+    const handleChangeTextAlign = (index: number, align: "center" | "left" | "right" | "justify") => {
+        updateLayer(index, { align })
+    }
+
+    // Change layer content
+    const handleChangeLayerTextContent = (index: number, newContent: string) => {
+        updateLayer(index, { text: newContent })
+        if (layers[index].subtype !== "braille" && !customBraille) {
+            // Якщо браєль не кастомний, то встановлюється автоматично
+            const brailleLayerIndex = layers.findIndex((layer) => layer.subtype === "braille")
+            updateLayer(brailleLayerIndex, { text: newContent })
+        }
+    }
+
+    const getLongestLineLength = (text: string) => {
+        return text.split("\n").reduce((maxLength, line) => Math.max(maxLength, line.length), 0)
+    }
+
+    return (
+        <div className="bg-gradient-to-br from-slate-50 to-slate-100 rounded-xl border border-slate-200 shadow-lg p-6 space-y-6">
+            <div className="flex items-center gap-3 pb-4 border-b border-slate-200">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                    <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
+                        />
+                    </svg>
+                </div>
+                <h2 className="text-xl font-semibold text-slate-800 uppercase">Layers</h2>
+                <div className="ml-auto bg-slate-200 text-slate-600 text-xs px-2 py-1 rounded-full">
+                    {layers.length} {layers.length === 1 ? "layer" : "layers"}
+                </div>
+            </div>
+
+            {layers.map((layer, index) => (
+                <div
+                    key={`layer_container_${index}`}
+                    className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden"
+                >
+                    <div className="bg-slate-50 px-4 py-3 border-b border-slate-100 flex items-center gap-3">
+                        {layer.type === "image" ? (
+                            <ImageIcon className="w-4 h-4 text-primary" />
+                        ) : (
+                            <TypeIcon className="w-4 h-4 text-primary" />
+                        )}
+                        <span className="text-sm font-medium text-slate-700 capitalize">
+                            {layer.type} Layer {layer.subtype === "braille" ? "(Braille)" : ""}
+                        </span>
+                        <div className="ml-auto text-xs text-slate-500">#{index + 1}</div>
+                    </div>
+
+                    <div className="p-4">
+                        {layer.type === "image" && isImageLayer(layer) && (
+                            <div className="flex flex-col gap-4">
+                                <div className="flex items-center justify-center p-4 bg-slate-50 rounded-lg border-2 border-dashed border-slate-200">
+                                    <img
+                                        src={layer.props.imageSrc || "/placeholder.svg"}
+                                        className={`h-16 max-w-full object-contain rounded shadow-sm`}
+                                        alt="Layer preview"
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        {layer.type === "text" && layer.subtype !== "braille" && isTextLayer(layer) && (
+                            <div className="flex flex-col gap-6">
+                                <div className="space-y-3">
+                                    <Label className="text-sm font-medium text-slate-700">Text Content</Label>
+                                    <Textarea
+                                        placeholder={"Kitchen ↵\nMy"}
+                                        onInput={(e) => handleChangeLayerTextContent(index, e.currentTarget.value)}
+                                        className="min-h-[80px] resize-none border-primary/50 focus:border-primary"
+                                    />
+                                    <p className={`text-xs ${getLongestLineLength(layer.props.text) > getMaxLineLengthByPt(layer.props.fontSize * (layer.props.scale ?? 1), options.selectedSize.inchs, options.selectedTemplateId) ? "text-red-700" : "text-[#8F8F8F]"}`}>
+                                        Recommended limit: {getMaxLineLengthByPt(layer.props.fontSize * (layer.props.scale ?? 1), options.selectedSize.inchs, options.selectedTemplateId)} chars per line (longest line: {getLongestLineLength(layer.props.text)})
+                                    </p>
+                                    {getLongestLineLength(layer.props.text) > getMaxLineLengthByPt(layer.props.fontSize * (layer.props.scale ?? 1), options.selectedSize.inchs, options.selectedTemplateId) && (
+                                        <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 {getMaxLineLengthByPt(layer.props.fontSize * (layer.props.scale ?? 1), options.selectedSize.inchs, options.selectedTemplateId)} characters per line.
+                                            </p>
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label className="text-sm font-medium text-slate-700">Text Alignment</Label>
+                                    <ToggleGroup
+                                        type="single"
+                                        onValueChange={(value) =>
+                                            handleChangeTextAlign(index, value as "center" | "left" | "right" | "justify")
+                                        }
+                                        className="justify-start bg-slate-50 p-1 rounded-lg"
+                                    >
+                                        <ToggleGroupItem
+                                            value="left"
+                                            aria-label="Align left"
+                                            className="data-[state=on]:bg-white data-[state=on]:shadow-sm"
+                                        >
+                                            <AlignLeftIcon className="h-4 w-4" />
+                                        </ToggleGroupItem>
+                                        <ToggleGroupItem
+                                            value="center"
+                                            aria-label="Align center"
+                                            className="data-[state=on]:bg-white data-[state=on]:shadow-sm"
+                                        >
+                                            <AlignCenterIcon className="h-4 w-4" />
+                                        </ToggleGroupItem>
+                                        <ToggleGroupItem
+                                            value="justify"
+                                            aria-label="Justify text"
+                                            className="data-[state=on]:bg-white data-[state=on]:shadow-sm"
+                                        >
+                                            <AlignJustifyIcon className="h-4 w-4" />
+                                        </ToggleGroupItem>
+                                        <ToggleGroupItem
+                                            value="right"
+                                            aria-label="Align right"
+                                            className="data-[state=on]:bg-white data-[state=on]:shadow-sm"
+                                        >
+                                            <AlignRightIcon className="h-4 w-4" />
+                                        </ToggleGroupItem>
+                                    </ToggleGroup>
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label className="text-sm font-medium text-slate-700">Font Size</Label>
+                                    <div className="px-3 py-2 bg-slate-50 rounded-lg">
+                                        <Slider
+                                            defaultValue={[1]}
+                                            min={0.5}
+                                            max={1.2}
+                                            step={0.05}
+                                            onValueChange={(value) => handleChangeTextFontScale(index, value[0])}
+                                            className="w-full"
+                                        />
+                                        <div className="flex justify-between text-xs text-slate-500 mt-1">
+                                            <span>Small</span>
+                                            <span>Large</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {layer.subtype === "braille" && isTextLayer(layer) && (
+                            <div className="flex flex-col gap-6">
+                                <div className="space-y-3">
+                                    <Label className="text-sm font-medium text-slate-700">Braille Preview</Label>
+                                    <div className="p-4 bg-slate-50 rounded-lg border border-slate-200 min-h-[60px] flex items-center">
+                                        <p className="font-braille text-lg text-slate-800">{layer.props.text}</p>
+                                    </div>
+                                </div>
+
+                                {customBraille && (
+                                    <div className="space-y-3">
+                                        <Label className="text-sm font-medium text-slate-700">Custom Braille Text</Label>
+                                        <Input
+                                            onInput={(e) => handleChangeLayerTextContent(index, e.currentTarget.value)}
+                                            placeholder="Doctor instead of Dr. Smith"
+                                        />
+                                    </div>
+                                )}
+
+                                <div className="flex items-center gap-3 p-3 bg-primary/10 rounded-lg border border-primary/20">
+                                    <Checkbox
+                                        id={`custom-braille-${index}`}
+                                        checked={customBraille}
+                                        onCheckedChange={() => {
+                                            setCustomBraille((prev) => !prev)
+                                        }}
+                                        className="border-primary/20"
+                                    />
+                                    <Label
+                                        htmlFor={`custom-braille-${index}`}
+                                        className="text-sm font-medium cursor-pointer"
+                                    >
+                                        Enable Custom Braille
+                                    </Label>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            ))}
+
+            {layers.length === 0 && (
+                <div className="text-center py-12 text-slate-500">
+                    <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
+                            />
+                        </svg>
+                    </div>
+                    <p className="text-sm">No layers added yet</p>
+                </div>
+            )}
+        </div>
+    )
+}
+

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

@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import type { TCoordinates, TMovableItemProps } from "../movable-item";
+import type { TLayer } from "../preview";
+import { useLayersStore } from "../../store/layers-store";
+// import MovableItem from "../movable-item";
+import { isLayerTextProps } from "../../lib/type-checks";
+import { BASE_FONT_SIZE } from "../../lib/config-font";
+import MovableItem from "../movable-item";
+
+export type LayerTextProps = {
+    fontSize: number; // px
+    text: string;
+    scale?: number; // fontSize * scale = text size
+    color?: string;
+    // defaultCoordinatinates?: {
+    //     top: '50%' | string;
+    //     left: '50%' | string;
+    // };
+    align?: 'center' | 'left' | 'right' | 'justify';
+    braille?: boolean;
+} & TMovableItemProps
+
+export default function TextLayer({ layerIndex, font = 'font-bebasneue' }: {
+    layerIndex: number;
+    font?: 'font-bebasneue' | 'font-gothicb' | 'font-braille';
+}) {
+    const [layer, setLayer] = useState<TLayer<LayerTextProps>>()
+    const { layers, init: updateLayers } = useLayersStore()
+    const [fontSize, setFontSize] = useState<number>();
+
+    const handleLayerUpdate = (coordinates: TCoordinates) => {
+        if (layers) {
+            const temp = layers;
+            temp[layerIndex] = {
+                ...temp[layerIndex],
+                props: {
+                    ...temp[layerIndex].props, coordinates: {
+                        x: (coordinates.x && coordinates.x > 0) ? coordinates.x : 0,
+                        y: (coordinates.y && coordinates.y > 0) ? coordinates.y : 0,
+                    }
+                }
+            }
+            updateLayers(temp)
+        }
+    }
+
+    useEffect(() => {
+        const layer = layers[layerIndex];
+
+        if (layers && isLayerTextProps(layer.props)) {
+            setLayer({
+                ...layer,
+                props: layer.props
+            });
+
+            // Вирахування розміру тексту
+            if (layer.subtype === 'braille') setFontSize(layer.props.fontSize)
+            // const longestLine = layer.props.text.split('\n').sort((a, b) => a.length - b.length);
+            calcFontSize() // longestLine[0].length
+
+        }
+    }, [layers[layerIndex]]);
+
+    // Вираховує розмір тексту
+    const calcFontSize = () => {
+        const layer = layers[layerIndex];
+        if (isLayerTextProps(layer.props) && layer.subtype !== 'braille') {
+            setFontSize(BASE_FONT_SIZE * (layer.props.scale ?? 1))
+            // let found = false; // Чи був знайдений відповідний розмір для довжини рядку
+            // const fontRange = Object.entries(FONT_RANGE);
+            // for (const [lengthRange, fontScale] of fontRange) {
+            //     if (textLength < Number(lengthRange)) {
+            //         const scale = (layer.props.scale ?? 1) < fontScale ? (layer.props.scale ?? 1) : fontScale;
+            //         setFontSize(BASE_FONT_SIZE * scale);
+            //         found = true;
+            //         break;
+            //     }
+            // }
+            // if (!found) {
+            //     const [_, fontScale] = fontRange[fontRange.length - 1];
+            //     const scale = (layer.props.scale ?? 1) < fontScale ? (layer.props.scale ?? 1) : fontScale;
+            //     setFontSize(BASE_FONT_SIZE * scale);
+            // }
+        }
+    }
+
+    if (layer) {
+        const positionTransitionClass = layer.props.movable
+            ? ""
+            : "transition-[top,left] duration-500 ease-in-out";
+
+        const layerJsx = (
+            <div className={`absolute -translate-x-1/2 -translate-y-1/2 ${positionTransitionClass} ${font} select-none`} style={{
+                fontSize: `${(fontSize ?? 20) * (layer.subtype === 'braille' ? (layer.props.scale ?? 1) : 1)}pt`,
+                top: layer.props.coordinates.y,
+                left: layer.props.coordinates.x,
+                color: layer.props.color ?? "#111111",
+            }}>
+                {layer.subtype === 'braille' ? (
+                    <p
+                        className='overflow-hidden text-nowrap transition'
+                        draggable={false}
+                        style={{
+                            textAlign: layer.props.align ?? 'center'
+                        }}
+                    >{layer.props.text}</p>
+                ) : layer.props.text.split('\n').map((paragraph, index) => (
+                    <p
+                        key={`${paragraph} ${index}`}
+                        className='overflow-hidden text-nowrap'
+                        draggable={false}
+                        style={{
+                            lineHeight: 1,
+                            textAlign: layer.props.align ?? 'center'
+                        }}
+                    >{paragraph}</p>
+                ))}
+            </div>
+        );
+
+        return layer.props.movable ? (
+            <MovableItem coordinates={layer.props.coordinates} onUpdate={handleLayerUpdate}>
+                {layerJsx}
+            </MovableItem>
+        ) : layerJsx
+        
+    }
+}

package/src/components/movable-item.tsx

@@ -0,0 +1,228 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { useLayersStore } from "../store/layers-store";
+
+export type TCoordinates = {
+    x?: number;
+    y?: number;
+};
+
+export type TMovableItemProps = {
+    coordinates: TCoordinates;
+    movable?: boolean;
+};
+
+const SNAP_THRESHOLD = 15;
+
+const clamp = (value: number, min: number, max: number) => {
+    if (Number.isNaN(value)) return min;
+    return Math.min(Math.max(value, min), max);
+};
+
+export default function MovableItem({ coordinates, onUpdate, children }: {
+    coordinates: TCoordinates;
+    onUpdate: (coordinates: TCoordinates) => void;
+    children: ReactNode;
+}) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [initialPosition, setInitialPosition] = useState({ x: 0, y: 0 });
+
+    const [snapX, setSnapX] = useState(false);
+    const [snapY, setSnapY] = useState(false);
+
+    const activePointerIdRef = useRef<number | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const bodyStyleBackupRef = useRef<{
+        userSelect: string;
+        touchAction: string;
+        overflow: string;
+    } | null>(null);
+
+    const { resizing } = useLayersStore();
+
+    const lockPageInteraction = useCallback(() => {
+        if (bodyStyleBackupRef.current) return;
+
+        bodyStyleBackupRef.current = {
+            userSelect: document.body.style.userSelect,
+            touchAction: document.body.style.touchAction,
+            overflow: document.body.style.overflow,
+        };
+
+        document.body.style.userSelect = "none";
+        document.body.style.touchAction = "none";
+        document.body.style.overflow = "hidden";
+    }, []);
+
+    const restorePageInteraction = useCallback(() => {
+        if (!bodyStyleBackupRef.current) return;
+
+        document.body.style.userSelect = bodyStyleBackupRef.current.userSelect;
+        document.body.style.touchAction = bodyStyleBackupRef.current.touchAction;
+        document.body.style.overflow = bodyStyleBackupRef.current.overflow;
+
+        bodyStyleBackupRef.current = null;
+    }, []);
+
+    const updateByPointerPosition = useCallback(
+        (clientX: number, clientY: number) => {
+            if (!isDragging || !coordinates || !onUpdate) return;
+
+            const parent = containerRef.current?.offsetParent as HTMLElement | null;
+            const parentRect = parent?.getBoundingClientRect();
+
+            const scaleX = parent && parent.clientWidth ? (parentRect?.width ? parentRect.width / parent.clientWidth : 1) : 1;
+            const scaleY = parent && parent.clientHeight ? (parentRect?.height ? parentRect.height / parent.clientHeight : 1) : 1;
+
+            const deltaX = (clientX - dragStart.x) / (scaleX || 1);
+            const deltaY = (clientY - dragStart.y) / (scaleY || 1);
+
+            let newX = initialPosition.x + deltaX;
+            let newY = initialPosition.y + deltaY;
+            let isSnappedX = false;
+            let isSnappedY = false;
+
+            if (parent) {
+                const parentWidth = parent.clientWidth;
+                const parentHeight = parent.clientHeight;
+                const centerX = parentWidth / 2;
+                const centerY = parentHeight / 2;
+
+                if (Math.abs(newX - centerX) < SNAP_THRESHOLD) {
+                    newX = centerX;
+                    isSnappedX = true;
+                }
+
+                if (Math.abs(newY - centerY) < SNAP_THRESHOLD) {
+                    newY = centerY;
+                    isSnappedY = true;
+                }
+
+                newX = clamp(newX, 0, parentWidth);
+                newY = clamp(newY, 0, parentHeight);
+            }
+
+            setSnapX(isSnappedX);
+            setSnapY(isSnappedY);
+
+            if (!resizing) {
+                onUpdate({ x: newX, y: newY });
+            }
+        },
+        [coordinates, dragStart.x, dragStart.y, initialPosition.x, initialPosition.y, isDragging, onUpdate, resizing],
+    );
+
+    const finishDragging = useCallback(() => {
+        setIsDragging(false);
+        setSnapX(false);
+        setSnapY(false);
+        activePointerIdRef.current = null;
+        restorePageInteraction();
+    }, [restorePageInteraction]);
+
+    const handlePointerDown = useCallback(
+        (e: React.PointerEvent<HTMLDivElement>) => {
+            if (!coordinates || !onUpdate) return;
+            if (e.pointerType === "mouse" && e.button !== 0) return;
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            activePointerIdRef.current = e.pointerId;
+
+            if (e.currentTarget.setPointerCapture) {
+                e.currentTarget.setPointerCapture(e.pointerId);
+            }
+
+            setIsDragging(true);
+            setDragStart({ x: e.clientX, y: e.clientY });
+            setInitialPosition({
+                x: coordinates?.x || 0,
+                y: coordinates?.y || 0,
+            });
+
+            lockPageInteraction();
+        },
+        [coordinates, lockPageInteraction, onUpdate],
+    );
+
+    const handleGlobalPointerMove = useCallback(
+        (e: PointerEvent) => {
+            if (!isDragging) return;
+            if (activePointerIdRef.current !== null && e.pointerId !== activePointerIdRef.current) return;
+
+            e.preventDefault();
+            updateByPointerPosition(e.clientX, e.clientY);
+        },
+        [isDragging, updateByPointerPosition],
+    );
+
+    const handleGlobalPointerUp = useCallback(
+        (e: PointerEvent) => {
+            if (activePointerIdRef.current !== null && e.pointerId !== activePointerIdRef.current) return;
+            finishDragging();
+        },
+        [finishDragging],
+    );
+
+    useEffect(() => {
+        if (!isDragging) return;
+
+        document.addEventListener("pointermove", handleGlobalPointerMove, { passive: false });
+        document.addEventListener("pointerup", handleGlobalPointerUp);
+        document.addEventListener("pointercancel", handleGlobalPointerUp);
+        window.addEventListener("blur", finishDragging);
+
+        return () => {
+            document.removeEventListener("pointermove", handleGlobalPointerMove);
+            document.removeEventListener("pointerup", handleGlobalPointerUp);
+            document.removeEventListener("pointercancel", handleGlobalPointerUp);
+            window.removeEventListener("blur", finishDragging);
+            restorePageInteraction();
+        };
+    }, [finishDragging, handleGlobalPointerMove, handleGlobalPointerUp, isDragging, restorePageInteraction]);
+
+    const offsetParent = containerRef.current?.offsetParent as HTMLElement | null;
+    const offsetParentWidth = offsetParent?.clientWidth ?? 0;
+    const offsetParentHeight = offsetParent?.clientHeight ?? 0;
+
+    return (
+        <div
+            ref={containerRef}
+            className={`${isDragging ? "cursor-grabbing" : "cursor-grab"} select-none`}
+        >
+            <div
+                onPointerDown={handlePointerDown}
+                className="touch-none hover:[&>*]:outline-2 hover:[&>*]:outline-blue-600 active:[&>*]:outline-2 active:[&>*]:outline-blue-600"
+            >
+                {children}
+            </div>
+
+            {isDragging && (
+                <div className="absolute top-2 left-2 z-50 rounded bg-blue-500 px-2 py-1 text-xs whitespace-nowrap text-white pointer-events-none">
+                    X: {coordinates?.x?.toFixed(0)}, Y: {coordinates?.y?.toFixed(0)}
+                </div>
+            )}
+
+            {snapX && (
+                <div
+                    className="absolute top-0 bottom-0 border-l border-dashed border-red-500 pointer-events-none"
+                    style={{
+                        left: offsetParentWidth / 2,
+                        zIndex: 60,
+                    }}
+                />
+            )}
+
+            {snapY && (
+                <div
+                    className="absolute left-0 right-0 border-t border-dashed border-red-500 pointer-events-none"
+                    style={{
+                        top: offsetParentHeight / 2,
+                        zIndex: 60,
+                    }}
+                />
+            )}
+        </div>
+    );
+}