@tnkrai/tnkr-editor 0.3.3 → 0.3.5

package/dist/index.cjs

@@ -73196,7 +73196,7 @@ function expandGroupsToChildren(parts) {
     return expandedParts;
 }
 // Utility function to sync step parts with latest data from referenced steps
-function syncStepPartsWithLatestData(stepParts, allSteps) {
+function syncStepPartsWithLatestData(stepParts, allSteps, animationDirections) {
     const updatedParts = [];
     const processedStepIds = new Set(); // Track processed steps to avoid infinite recursion
     console.log('Syncing step parts:', stepParts);
@@ -73229,8 +73229,11 @@ function syncStepPartsWithLatestData(stepParts, allSteps) {
                         processPart(currentPart, depth + 1);
                     }
                     else {
-                        // Add regular part to the result
-                        updatedParts.push(currentPart);
+                        // Override with animationDirection from MongoDB if provided
+                        const cleanedPart = Object.assign(Object.assign({}, currentPart), { metadata: Object.assign(Object.assign({}, currentPart.metadata), { 
+                                // Use MongoDB animationDirections as single source of truth
+                                animationDirection: (animationDirections === null || animationDirections === void 0 ? void 0 : animationDirections[currentPart.id]) || undefined }) });
+                        updatedParts.push(cleanedPart);
                     }
                 });
             }
@@ -73239,8 +73242,11 @@ function syncStepPartsWithLatestData(stepParts, allSteps) {
             }
         }
         else {
-            // Keep regular parts as-is
-            updatedParts.push(part);
+            // Override with animationDirection from MongoDB if provided
+            const cleanedPart = Object.assign(Object.assign({}, part), { metadata: Object.assign(Object.assign({}, part.metadata), { 
+                    // Use MongoDB animationDirections as single source of truth
+                    animationDirection: (animationDirections === null || animationDirections === void 0 ? void 0 : animationDirections[part.id]) || undefined }) });
+            updatedParts.push(cleanedPart);
         }
     };
     // Process each part in the initial stepParts array
@@ -74120,85 +74126,94 @@ function useModelViewCore(parts = []) {
                     return ({
                         id: part.id,
                         name: part.name,
+                        type: part.type,
                         direction: (_a = part.metadata) === null || _a === void 0 ? void 0 : _a.animationDirection,
                     });
                 }),
             });
         }
-        // Process each part and handle groups vs transforms differently
+        // Process parts directly - handle groups and transforms
+        const processedTransforms = new Set(); // Track which transforms we've already animated
         partsWithDirections.forEach((part) => {
-            var _a, _b;
+            var _a, _b, _c;
             const direction = (_a = part.metadata) === null || _a === void 0 ? void 0 : _a.animationDirection;
-            if (part.type === 'transform') {
-                // Handle individual transforms
-                const transformElement = (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(`Transform[id="${CSS.escape(part.id)}"]`);
-                const originalTranslation = originalTransformsRef.current.get(part.id);
-                if (transformElement && originalTranslation) {
-                    let targetPosition;
-                    if (direction) {
-                        if (factor === 1) {
-                            console.log(`📍 Transform ${part.name} using direction: ${direction}`);
-                        }
-                        targetPosition = calculateDirectionalExplodedPosition(originalTranslation, direction, factor);
-                    }
-                    else {
-                        if (factor === 1) {
-                            console.log(`🎲 Transform ${part.name} using fallback explosion`);
-                        }
-                        targetPosition = calculateExplodedPosition(originalTranslation, [0, 0, 0], factor, 3, part.id);
+            // Handle groups with all their children moving as a unit
+            if ((part.type === 'group' || ((_b = part.metadata) === null || _b === void 0 ? void 0 : _b.isGroup)) && part.children) {
+                // Calculate ONE offset for the entire group
+                let groupOffset = [0, 0, 0];
+                if (direction) {
+                    // Group has a direction - calculate directional offset
+                    const tempPos = calculateDirectionalExplodedPosition('0 0 0', direction, factor);
+                    groupOffset = tempPos.split(' ').map(Number);
+                    console.log(`📦 Group ${part.id} (${part.name}) calculated offset: [${groupOffset.join(', ')}] for direction: ${direction}`);
+                    if (factor === 1) {
+                        console.log(`📦 Group ${part.id} (${part.name}) moving ${direction} as a unit with offset [${groupOffset.join(', ')}]`);
                     }
-                    transformElement.setAttribute('translation', targetPosition);
                 }
                 else {
+                    // Group without direction - use random explosion but same for all parts
+                    const tempPos = calculateExplodedPosition('0 0 0', [0, 0, 0], factor, 3, part.id);
+                    groupOffset = tempPos.split(' ').map(Number);
                     if (factor === 1) {
-                        console.warn(`❌ Transform not found: ${part.name} (${part.id})`);
+                        console.log(`🎲 Group ${part.id} (${part.name}) exploding randomly as a unit`);
                     }
                 }
-            }
-            else if (part.type === 'group' && part.children) {
-                // Handle groups - move all child transforms together in the same direction
-                if (factor === 1) {
-                    console.log(`📍 Group ${part.name} with ${part.children.length} children using direction: ${direction || 'fallback'}`);
-                }
-                // Calculate group offset once using camera-relative movement
-                let groupOffset = [0, 0, 0];
-                if (direction) {
-                    // Use the same calculateDirectionalExplodedPosition logic for consistency
-                    const tempPos = calculateDirectionalExplodedPosition('0 0 0', direction, factor);
-                    const offset = tempPos.split(' ').map(Number);
-                    groupOffset = offset;
-                }
-                // Apply the same offset to all child transforms in the group
-                const collectAndAnimateTransforms = (children) => {
+                // Apply THE SAME offset to ALL transforms in the group
+                const applyGroupOffset = (children, depth = 0) => {
+                    console.log(`${'  '.repeat(depth)}Applying offset to ${children.length} children`);
                     children.forEach((child) => {
                         var _a;
-                        if (child.type === 'transform') {
+                        console.log(`${'  '.repeat(depth)}Child: ${child.name} (${child.id}), type: ${child.type}`);
+                        if (child.type === 'transform' && child.id) {
                             const transformElement = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`Transform[id="${CSS.escape(child.id)}"]`);
                             const originalTranslation = originalTransformsRef.current.get(child.id);
                             if (transformElement && originalTranslation) {
                                 const pos = originalTranslation.split(' ').map(Number);
-                                let targetPosition;
-                                if (direction) {
-                                    // Apply group offset to maintain relative positions
-                                    targetPosition = [
-                                        pos[0] + groupOffset[0],
-                                        pos[1] + groupOffset[1],
-                                        pos[2] + groupOffset[2],
-                                    ].join(' ');
-                                }
-                                else {
-                                    // Fallback to individual explosion
-                                    targetPosition = calculateExplodedPosition(originalTranslation, [0, 0, 0], factor, 3, child.id);
-                                }
+                                // Apply the group offset to maintain relative positions
+                                const targetPosition = [
+                                    pos[0] + groupOffset[0],
+                                    pos[1] + groupOffset[1],
+                                    pos[2] + groupOffset[2],
+                                ].join(' ');
+                                console.log(`${'  '.repeat(depth)}✅ Applying offset [${groupOffset.join(', ')}] to transform ${child.name}: ${originalTranslation} -> ${targetPosition}`);
                                 transformElement.setAttribute('translation', targetPosition);
+                                processedTransforms.add(child.id); // Mark as processed
+                            }
+                            else {
+                                console.log(`${'  '.repeat(depth)}❌ Could not find element or translation for ${child.id}`);
                             }
                         }
-                        else if (child.children) {
-                            collectAndAnimateTransforms(child.children);
+                        // Recursively process nested children
+                        if (child.children) {
+                            applyGroupOffset(child.children, depth + 1);
                         }
                     });
                 };
-                collectAndAnimateTransforms(part.children);
+                applyGroupOffset(part.children, 0);
+            }
+            else if (part.type === 'transform' && part.id && !processedTransforms.has(part.id)) {
+                // Handle individual transforms (not part of a group we already processed)
+                const transformElement = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(`Transform[id="${CSS.escape(part.id)}"]`);
+                const originalTranslation = originalTransformsRef.current.get(part.id);
+                if (transformElement && originalTranslation) {
+                    let targetPosition;
+                    if (direction) {
+                        // Individual transform with direction
+                        targetPosition = calculateDirectionalExplodedPosition(originalTranslation, direction, factor);
+                        if (factor === 1) {
+                            console.log(`📍 Transform ${part.name} moving ${direction}`);
+                        }
+                    }
+                    else {
+                        // Individual transform without direction - use random explosion
+                        targetPosition = calculateExplodedPosition(originalTranslation, [0, 0, 0], factor, 3, part.id);
+                        if (factor === 1) {
+                            console.log(`🎲 Transform ${part.name} using random explosion`);
+                        }
+                    }
+                    transformElement.setAttribute('translation', targetPosition);
+                    processedTransforms.add(part.id);
+                }
             }
         });
     }, [calculateDirectionalExplodedPosition, calculateExplodedPosition]);
@@ -75275,7 +75290,7 @@ handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, onCameraSett
                     await new Promise((resolve) => setTimeout(resolve, 100));
                     // Recenter the model for optimal rotation around step parts
                     console.log('🎯 Starting recentering for automatic step transition...');
-                    const autoTransitionStepParts = expandGroupsToChildren(syncStepPartsWithLatestData(stepData.selectedStep.parts || [], phases.flatMap((phase) => phase.steps || [])));
+                    const autoTransitionStepParts = expandGroupsToChildren(syncStepPartsWithLatestData(stepData.selectedStep.parts || [], phases.flatMap((phase) => phase.steps || []), stepData.selectedStep.animationDirections));
                     if (partOperations === null || partOperations === void 0 ? void 0 : partOperations.recenterToShapeIds) {
                         recenterForAssemblyStep(partOperations.recenterToShapeIds, autoTransitionStepParts);
                     }
@@ -75290,7 +75305,7 @@ handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, onCameraSett
                     const rawStepParts = stepData.selectedStep.parts || [];
                     // Pass ALL steps from ALL phases for complete recursive syncing
                     const allStepsFromAllPhases = phases.flatMap((phase) => phase.steps || []);
-                    const allStepParts = syncStepPartsWithLatestData(rawStepParts, allStepsFromAllPhases);
+                    const allStepParts = syncStepPartsWithLatestData(rawStepParts, allStepsFromAllPhases, stepData.selectedStep.animationDirections);
                     // Expand groups to individual transforms for animation processing
                     const expandedAllStepParts = expandGroupsToChildren(allStepParts);
                     // Separate step-specific parts (tagged with current step ID) from inherited parts
@@ -77015,11 +77030,7 @@ const AssemblyViewMode = ({ phases, htmlContent, className = "", productTitle, p
                                                 if (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.id) {
                                                     handlePhaseDescriptionChange(currentPhase.id, content);
                                                 }
-                                            }, onUploadImage: onUploadImage, customExtensionSet: getBasicExtensions(), className: "text-white", minHeight: 20, readOnly: !editMode }, `phase-${currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.id}`) }), jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4 text-white", children: "Steps" }), jsxRuntimeExports.jsx("div", { className: "space-y-4", children: (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps) && currentPhase.steps.length > 0 ? (currentPhase.steps.map((step, index) => (jsxRuntimeExports.jsx("button", { onClick: () => handleStepClick(index), className: "w-full text-left rounded-2xl px-4 py-3 cursor-pointer border border-[#313133] transition-all", onMouseEnter: (e) => {
-                                                        e.currentTarget.style.border = '2px solid white';
-                                                    }, onMouseLeave: (e) => {
-                                                        e.currentTarget.style.border = '1px solid #313133';
-                                                    }, children: jsxRuntimeExports.jsxs("span", { className: "text-white/70", children: ["Step ", index + 1, ": ", step.title] }) }, step.id)))) : (
+                                            }, onUploadImage: onUploadImage, customExtensionSet: getBasicExtensions(), className: "text-white", minHeight: 20, readOnly: !editMode }, `phase-${currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.id}`) }), jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4 text-white", children: "Steps" }), jsxRuntimeExports.jsx("div", { className: "space-y-4", children: (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps) && currentPhase.steps.length > 0 ? (currentPhase.steps.map((step, index) => (jsxRuntimeExports.jsx("button", { onClick: () => handleStepClick(index), className: "w-full text-left rounded-2xl px-4 py-3 cursor-pointer border border-[#313133] transition-all hover:border-[#AA423A]", children: jsxRuntimeExports.jsxs("span", { className: "text-white/70", children: ["Step ", index + 1, ": ", step.title] }) }, step.id)))) : (
                                                 // Display message when phase has valid title but no steps
                                                 jsxRuntimeExports.jsx("p", { className: "text-white/80 text-md max-w-[31rem]", children: "No steps yet. Add an assembly step and an animation to let your readers know what to do." })) })] }), (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps) && currentPhase.steps.length > 0 && (jsxRuntimeExports.jsx("div", { className: "mt-8 max-w-[7rem] ml-auto", children: jsxRuntimeExports.jsx(Button, { onClick: handleBeginPhase, className: "bg-[#AA423A] hover:bg-[#8A322E] text-white px-6 py-2 rounded-lg font-medium w-full h-11", children: "Begin Phase" }) }))] }))) : (
                             // Step Details
@@ -77575,7 +77586,7 @@ const PreviewCategoryItem = ({ category, level, selectedId, onSelect, onToggleEx
                         }, className: "ml-2 p-0.5 hover:bg-gray-700 rounded transition-colors flex-shrink-0", "aria-label": isExpanded ? "Collapse" : "Expand", children: isExpanded ? (jsxRuntimeExports.jsx(lucideReact.ChevronDown, { size: 14, className: "text-gray-400" })) : (jsxRuntimeExports.jsx(lucideReact.ChevronRight, { size: 14, className: "text-gray-400" })) }))] }), isExpanded && hasChildren && (jsxRuntimeExports.jsx("div", { children: category.children.map((child) => (jsxRuntimeExports.jsx(PreviewCategoryItem, { category: child, level: level + 1, selectedId: selectedId, onSelect: onSelect, onToggleExpand: onToggleExpand }, child.id))) }))] }));
 };
 const PreviewSidebar = ({ categories, selectedCategoryId, onCategorySelect, onToggleExpand, className = "", }) => {
-    return (jsxRuntimeExports.jsx("div", { className: cn("w-64 flex flex-col px-2", className), children: jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto py-4", children: [categories.map((category, index) => (jsxRuntimeExports.jsx("div", { className: index > 0 ? "mt-8" : "", children: jsxRuntimeExports.jsx(PreviewCategoryItem, { category: category, level: 0, selectedId: selectedCategoryId, onSelect: onCategorySelect, onToggleExpand: onToggleExpand }) }, category.id))), categories.length === 0 && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center p-8 text-gray-500", children: jsxRuntimeExports.jsx("p", { children: "No content available" }) }))] }) }));
+    return (jsxRuntimeExports.jsxs("div", { className: cn("w-64 flex flex-col px-2", className), children: [jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto py-4", children: [categories.map((category, index) => (jsxRuntimeExports.jsx("div", { className: index > 0 ? "mt-8" : "", children: jsxRuntimeExports.jsx(PreviewCategoryItem, { category: category, level: 0, selectedId: selectedCategoryId, onSelect: onCategorySelect, onToggleExpand: onToggleExpand }) }, category.id))), categories.length === 0 && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center p-8 text-gray-500", children: jsxRuntimeExports.jsx("p", { children: "No content available" }) }))] }), jsxRuntimeExports.jsx("div", { className: "px-4 py-3 border-t border-[#313133]", children: jsxRuntimeExports.jsxs("a", { href: "https://tnkr.ai", target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center gap-2 text-xs text-gray-400 hover:text-gray-300 transition-colors", children: [jsxRuntimeExports.jsx("span", { children: "Powered by" }), jsxRuntimeExports.jsx("span", { className: "font-semibold text-[#AA423A]", children: "TnkrAI" })] }) })] }));
 };
 
 const PageContentNavigator = ({ content, className = "" }) => {