zuljaman-banner-components 1.0.22 → 1.0.24

package/dist/components/BannerRenderer/hooks/useLineDrawing.js

@@ -0,0 +1,198 @@
+"use strict";
+/**
+ * useLineDrawing hook
+ * Manages manual line drawing state and interactions for auto-positioning
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLineDrawing = useLineDrawing;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../utils");
+/**
+ * Hook that manages line drawing state and interactions for manual auto-positioning links.
+ */
+function useLineDrawing({ bannerContainerRef, copies, sizeMultiplier, creationMode, areElementsOverlapping, areVerticallyAligned, autoPositioningConfig, configKey, }) {
+    // Line drawing state
+    const [drawingFrom, setDrawingFrom] = (0, react_1.useState)(null);
+    const [drawingMousePos, setDrawingMousePos] = (0, react_1.useState)(null);
+    const [completedLines, setCompletedLines] = (0, react_1.useState)(new Map());
+    const [manualLines, setManualLines] = (0, react_1.useState)(new Set());
+    // Reset ALL state when configKey changes (style/substyle change)
+    // This ensures the library self-resets without requiring consumer to use key prop
+    // IMPORTANT: useLayoutEffect ensures reset happens BEFORE next paint (sync)
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (!configKey)
+            return; // Skip if configKey not provided (backward compat)
+        // Reset drawing state
+        setDrawingFrom(null);
+        setDrawingMousePos(null);
+        // Reset completedLines from autoPositioningConfig
+        if ((_a = autoPositioningConfig === null || autoPositioningConfig === void 0 ? void 0 : autoPositioningConfig.links) === null || _a === void 0 ? void 0 : _a.length) {
+            const initial = new Map();
+            autoPositioningConfig.links.forEach(link => {
+                initial.set(link.fromElement, link.toElement);
+            });
+            setCompletedLines(initial);
+        }
+        else {
+            setCompletedLines(new Map());
+        }
+        // Reset manual lines
+        setManualLines(new Set());
+    }, [configKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    // ^ Intentionally only depend on configKey - we want to reset when config changes
+    // Helper: Convert element ID to styleSlot format
+    const convertToStyleSlotId = react_1.default.useCallback((elementId) => (0, utils_1.convertToStyleSlotId)(elementId, copies), [copies]);
+    // Toggle interactive line drawing for an element
+    const handleToggleAutoPositioning = react_1.default.useCallback((elementId) => {
+        if (!creationMode)
+            return;
+        // Convert to styleSlot format for checking completedLines
+        const styleSlotId = convertToStyleSlotId(elementId);
+        setCompletedLines(prev => {
+            // If element already has a line, remove it (check using canonical format)
+            if (prev.has(styleSlotId)) {
+                const targetId = prev.get(styleSlotId);
+                const newMap = new Map(prev);
+                newMap.delete(styleSlotId);
+                // Also remove from manual lines (already in canonical format)
+                if (targetId) {
+                    setManualLines(prevManual => {
+                        const newSet = new Set(prevManual);
+                        newSet.delete(`${styleSlotId}->${targetId}`);
+                        return newSet;
+                    });
+                }
+                return newMap;
+            }
+            return prev;
+        });
+        // If element is currently drawing, cancel it
+        if (drawingFrom === elementId) {
+            setDrawingFrom(null);
+            setDrawingMousePos(null);
+            return;
+        }
+        // If another element is drawing, do nothing (must complete or cancel first)
+        if (drawingFrom !== null) {
+            return;
+        }
+        // Start drawing from this element (keep original UUID for ref lookup during drawing)
+        setDrawingFrom(elementId);
+    }, [drawingFrom, creationMode, convertToStyleSlotId]);
+    // Handle mouse move to update drawing line position
+    const handleMouseMove = react_1.default.useCallback((e) => {
+        if (!drawingFrom || !bannerContainerRef.current)
+            return;
+        const bannerBounds = bannerContainerRef.current.getBoundingClientRect();
+        const bannerCenterX = bannerBounds.left + bannerBounds.width / 2;
+        const bannerCenterY = bannerBounds.top + bannerBounds.height / 2;
+        // Calculate mouse position relative to banner center (in unscaled pixels)
+        const mouseX = (e.clientX - bannerCenterX) / sizeMultiplier;
+        const mouseY = (e.clientY - bannerCenterY) / sizeMultiplier;
+        setDrawingMousePos({ x: mouseX, y: mouseY });
+    }, [drawingFrom, bannerContainerRef, sizeMultiplier]);
+    // Handle container click to cancel drawing
+    const handleContainerClick = react_1.default.useCallback((e) => {
+        // Only handle if currently drawing
+        if (!creationMode || !drawingFrom)
+            return;
+        // Check if click was on the banner container itself (not on an element)
+        if (e.target === e.currentTarget || e.target.closest('.banner-container-bg')) {
+            // Cancel drawing
+            setDrawingFrom(null);
+            setDrawingMousePos(null);
+        }
+    }, [drawingFrom, creationMode]);
+    // Complete line drawing when target element is clicked
+    const handleCompleteLineTo = react_1.default.useCallback((targetId) => {
+        if (!creationMode || !drawingFrom || drawingFrom === targetId) {
+            return;
+        }
+        // Validate that elements are NOT overlapping
+        const isOverlapping = areElementsOverlapping(drawingFrom, targetId);
+        if (isOverlapping) {
+            setDrawingFrom(null);
+            setDrawingMousePos(null);
+            return;
+        }
+        // Validate that elements are vertically aligned (one above the other)
+        const isVerticallyAligned = areVerticallyAligned(drawingFrom, targetId);
+        if (!isVerticallyAligned) {
+            setDrawingFrom(null);
+            setDrawingMousePos(null);
+            return;
+        }
+        // Convert IDs to styleSlot format (copy-N) before storing
+        const fromStyleSlot = convertToStyleSlotId(drawingFrom);
+        const toStyleSlot = convertToStyleSlotId(targetId);
+        // Add completed line using canonical copy-N format
+        // When connecting A → B, remove any existing connection B → A to prevent duplicate links
+        setCompletedLines(prev => {
+            const newMap = new Map(prev);
+            // Remove reverse connection if it exists
+            if (newMap.get(toStyleSlot) === fromStyleSlot) {
+                newMap.delete(toStyleSlot);
+            }
+            newMap.set(fromStyleSlot, toStyleSlot);
+            return newMap;
+        });
+        // Mark this line as manual and clean up old reverse line if needed
+        setManualLines(prev => {
+            const newSet = new Set(prev);
+            // Remove reverse line entry if it exists (use canonical format)
+            newSet.delete(`${toStyleSlot}->${fromStyleSlot}`);
+            newSet.add(`${fromStyleSlot}->${toStyleSlot}`);
+            return newSet;
+        });
+        // Clear drawing state
+        setDrawingFrom(null);
+        setDrawingMousePos(null);
+    }, [drawingFrom, creationMode, areElementsOverlapping, areVerticallyAligned, convertToStyleSlotId]);
+    return {
+        drawingFrom,
+        drawingMousePos,
+        completedLines,
+        manualLines,
+        setCompletedLines,
+        setManualLines,
+        handleToggleAutoPositioning,
+        handleMouseMove,
+        handleContainerClick,
+        handleCompleteLineTo,
+        convertToStyleSlotId,
+    };
+}

package/dist/components/BannerRenderer/hooks/useProximityDetection.d.ts

@@ -0,0 +1,43 @@
+/**
+ * useProximityDetection hook
+ * Handles auto-detection of proximity chains and visual proximity indicators
+ */
+import React from 'react';
+import type { CopyConfig } from '../../../types';
+export interface ProximityLine {
+    fromId: string;
+    toId: string;
+    distance: number;
+    fromPos: {
+        x: number;
+        y: number;
+    };
+    toPos: {
+        x: number;
+        y: number;
+    };
+}
+export interface UseProximityDetectionParams {
+    logoRef: React.RefObject<HTMLDivElement | null>;
+    copyRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    bannerContainerRef: React.RefObject<HTMLDivElement | null>;
+    copies: CopyConfig[];
+    sizeMultiplier: number;
+    creationMode: boolean;
+    manualLines: Set<string>;
+    completedLines: Map<string, string>;
+    setCompletedLines: React.Dispatch<React.SetStateAction<Map<string, string>>>;
+    setLineGaps: React.Dispatch<React.SetStateAction<Map<string, number>>>;
+    getElementRef: (elementId: string) => HTMLDivElement | null;
+}
+export interface UseProximityDetectionReturn {
+    proximityLines: ProximityLine[];
+    setProximityLines: React.Dispatch<React.SetStateAction<ProximityLine[]>>;
+    detectProximityLines: (draggedElementId: string) => void;
+    calculateProximityLines: (draggedElementId: string) => void;
+}
+/**
+ * Hook that handles auto-detection of proximity chains and visual proximity line indicators.
+ */
+export declare function useProximityDetection({ logoRef, copyRefs, bannerContainerRef, copies, sizeMultiplier, creationMode, manualLines, completedLines, setCompletedLines, setLineGaps, getElementRef, }: UseProximityDetectionParams): UseProximityDetectionReturn;
+//# sourceMappingURL=useProximityDetection.d.ts.map

package/dist/components/BannerRenderer/hooks/useProximityDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProximityDetection.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/hooks/useProximityDetection.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOjD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjC;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5D,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IACvE,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC;CAC7D;AAED,MAAM,WAAW,2BAA2B;IAC1C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;IACzE,oBAAoB,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,uBAAuB,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,cAAc,EACd,YAAY,EACZ,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,aAAa,GACd,EAAE,2BAA2B,GAAG,2BAA2B,CA0gB3D"}