From b55b3a4df0e2dc0c76d896370ca7d0b56096e7d0 Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Sat, 26 Jul 2025 03:31:49 +0545
Subject: [PATCH] fix(Nextjs): Outline Stream Json fix & Image Edit improved

---
 .../components/EditableLayoutWrapper.tsx                 | 9 ++++++---
 .../(presentation-generator)/components/ImageEditor.tsx  | 2 +-
 .../(presentation-generator)/hooks/useGroupLayouts.tsx   | 2 +-
 .../outline/components/OutlinePage.tsx                   | 1 -
 .../outline/hooks/useOutlineStreaming.ts                 | 3 +--
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/servers/nextjs/app/(presentation-generator)/components/EditableLayoutWrapper.tsx b/servers/nextjs/app/(presentation-generator)/components/EditableLayoutWrapper.tsx
index e53c1927..2c71f61f 100644
--- a/servers/nextjs/app/(presentation-generator)/components/EditableLayoutWrapper.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/EditableLayoutWrapper.tsx
@@ -11,6 +11,7 @@ interface EditableLayoutWrapperProps {
     slideIndex: number;
     slideData: any;
     isEditMode?: boolean;
+    properties?: any;
 }
 
 interface EditableElement {
@@ -26,6 +27,7 @@ const EditableLayoutWrapper: React.FC<EditableLayoutWrapperProps> = ({
     children,
     slideIndex,
     slideData,
+    properties
 }) => {
     const dispatch = useDispatch();
     const containerRef = useRef<HTMLDivElement>(null);
@@ -193,13 +195,14 @@ const EditableLayoutWrapper: React.FC<EditableLayoutWrapperProps> = ({
                     htmlImg.addEventListener('click', clickHandler);
 
                     const itemIndex = parseInt(`${slideIndex}-${type}-${dataPath}-${index}`.split('-').pop() || '0');
-                    const properties = slideData.properties?.[itemIndex];
+                    const propertiesData = properties?.[itemIndex];
+                    console.log('propertiesData', propertiesData);
 
                     // Add hover effects without changing layout
                     htmlImg.style.cursor = 'pointer';
                     htmlImg.style.transition = 'opacity 0.2s, transform 0.2s';
-                    htmlImg.style.objectFit = properties?.objectFit;
-                    htmlImg.style.objectPosition = `${properties?.focusPoint?.x}% ${properties?.focusPoint?.y}%`;
+                    htmlImg.style.objectFit = propertiesData?.initialObjectFit;
+                    htmlImg.style.objectPosition = `${propertiesData?.initialFocusPoint?.x}% ${propertiesData?.initialFocusPoint?.y}%`;
 
                     const mouseEnterHandler = () => {
                         htmlImg.style.opacity = '0.8';
diff --git a/servers/nextjs/app/(presentation-generator)/components/ImageEditor.tsx b/servers/nextjs/app/(presentation-generator)/components/ImageEditor.tsx
index da85c01a..48672ff0 100644
--- a/servers/nextjs/app/(presentation-generator)/components/ImageEditor.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/ImageEditor.tsx
@@ -269,7 +269,7 @@ const ImageEditor = ({
 
           <div className="mt-6">
             <Tabs defaultValue="generate" className="w-full">
-              <TabsList className="grid bg-blue-100 border border-blue-300 w-full grid-cols-3 mx-auto">
+              <TabsList className="grid bg-blue-100 border border-blue-300 w-full grid-cols-2 mx-auto">
                 <TabsTrigger className="font-medium" value="generate">
                   AI Generate
                 </TabsTrigger>
diff --git a/servers/nextjs/app/(presentation-generator)/hooks/useGroupLayouts.tsx b/servers/nextjs/app/(presentation-generator)/hooks/useGroupLayouts.tsx
index 05e0a3ff..422539d9 100644
--- a/servers/nextjs/app/(presentation-generator)/hooks/useGroupLayouts.tsx
+++ b/servers/nextjs/app/(presentation-generator)/hooks/useGroupLayouts.tsx
@@ -52,7 +52,7 @@ export const useGroupLayouts = () => {
                     <EditableLayoutWrapper
                         slideIndex={slide.index}
                         slideData={slide.content}
-
+                        properties={slide.properties}
                     >
                         <TiptapTextReplacer
                             key={slide.id}
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx
index 438795e6..a4cb3252 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx
@@ -9,7 +9,6 @@ import Wrapper from "@/components/Wrapper";
 import OutlineContent from "./OutlineContent";
 import LayoutSelection from "./LayoutSelection";
 import EmptyStateView from "./EmptyStateView";
-import PageHeader from "./PageHeader";
 import GenerateButton from "./GenerateButton";
 
 import { TABS, LayoutGroup } from "../types/index";
diff --git a/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineStreaming.ts b/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineStreaming.ts
index 28a2e736..c09ce60b 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineStreaming.ts
+++ b/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineStreaming.ts
@@ -32,7 +32,6 @@ export const useOutlineStreaming = (presentationId: string | null) => {
 
         eventSource.addEventListener("response", (event) => {
           const data = JSON.parse(event.data);
-          console.log('data', data);
           switch (data.type) {
             case "chunk":
               accumulatedChunks += data.chunk;
@@ -50,7 +49,7 @@ export const useOutlineStreaming = (presentationId: string | null) => {
 
             case "complete":
               try {
-                const outlinesData: SlideOutline[] = JSON.parse(data.presentation).outlines;
+                const outlinesData: SlideOutline[] = data.presentation.outlines;
                 dispatch(setOutlines(outlinesData));
                 setStreamState({ isStreaming: false, isLoading: false });
                 eventSource.close();