From 1dc698ec065fac1ecdab87c4f11c6cbb959a6f50 Mon Sep 17 00:00:00 2001 From: shiva raj badu Date: Tue, 13 May 2025 17:17:57 +0545 Subject: [PATCH] Slide-box & fillbox added on Export --- app/ipc/slide_metadata.ts | 67 +++++++++++++++++++ app/utils/constants.ts | 2 +- .../components/slide_layouts/Type2Layout.tsx | 47 ++++++------- .../presentation/components/Header.tsx | 5 +- 4 files changed, 88 insertions(+), 33 deletions(-) diff --git a/app/ipc/slide_metadata.ts b/app/ipc/slide_metadata.ts index c7c835b9..7e42d431 100644 --- a/app/ipc/slide_metadata.ts +++ b/app/ipc/slide_metadata.ts @@ -221,6 +221,73 @@ export function setupSlideMetadataHandlers() { border_radius: [0, 0, 0, 0], } as GraphElement); break; + + case "slide-box": + case "filledbox": + const boxShadow = computedStyle.boxShadow; + let shadowRadius = 0; + let shadowColor = "000000"; + let shadowOffsetX = 0; + let shadowOffsetY = 0; + let shadowOpacity = 0; + + if (boxShadow && boxShadow !== "none") { + const boxShadowRegex = + /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]+)?\)?\s+(-?\d+)px\s+(-?\d+)px\s+(-?\d+)px/; + const match = boxShadow.match(boxShadowRegex); + + if (match) { + const r = match[1]; + const g = match[2]; + const b = match[3]; + const rgbStr = "rgb(" + r + ", " + g + ", " + b + ")"; + shadowColor = rgbToHex(rgbStr); + shadowOpacity = match[4] ? parseFloat(match[4]) : 1; + shadowOffsetX = parseInt(match[5]); + shadowOffsetY = parseInt(match[6]); + shadowRadius = parseInt(match[7]); + } + } + + elements.push({ + position, + type: + computedStyle.borderRadius === "9999px" || + computedStyle.borderRadius === "50%" + ? 9 + : 5, + fill: { + color: rgbToHex(computedStyle.backgroundColor), + }, + border_radius: parseInt(computedStyle.borderRadius) || 0, + stroke: { + color: rgbToHex(computedStyle.borderColor), + thickness: parseInt(computedStyle.borderWidth) || 0, + }, + shadow: { + radius: shadowRadius, + color: shadowColor, + offset: Math.sqrt( + shadowOffsetX * shadowOffsetX + + shadowOffsetY * shadowOffsetY + ), + opacity: shadowOpacity, + angle: Math.round( + (Math.atan2(shadowOffsetY, shadowOffsetX) * 180) / Math.PI + ), + }, + }); + break; + case "line": + elements.push({ + position, + lineType: 1, + thickness: computedStyle.borderWidth || computedStyle.height, + color: rgbToHex( + computedStyle.borderColor || computedStyle.backgroundColor + ), + }); + break; } }); diff --git a/app/utils/constants.ts b/app/utils/constants.ts index 0ee28bbc..85c8951a 100644 --- a/app/utils/constants.ts +++ b/app/utils/constants.ts @@ -4,7 +4,7 @@ import path from "path" export const localhost = "http://0.0.0.0" -export const isDev = !app.isPackaged; +export const isDev = false; export const baseDir = app.getAppPath(); export const fastapiDir = isDev ? path.join(baseDir, "servers/fastapi") : path.join(baseDir, "resources/fastapi"); export const nextjsDir = isDev ? path.join(baseDir, "servers/nextjs") : path.join(baseDir, "resources/nextjs"); diff --git a/servers/nextjs/app/(presentation-generator)/components/slide_layouts/Type2Layout.tsx b/servers/nextjs/app/(presentation-generator)/components/slide_layouts/Type2Layout.tsx index d16adda5..a6915ef0 100644 --- a/servers/nextjs/app/(presentation-generator)/components/slide_layouts/Type2Layout.tsx +++ b/servers/nextjs/app/(presentation-generator)/components/slide_layouts/Type2Layout.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import EditableText from "../EditableText"; import { DropdownMenu, @@ -8,8 +8,7 @@ import { } from "@/components/ui/dropdown-menu"; import { MoreVertical, Plus } from "lucide-react"; import ElementMenu from "../ElementMenu"; -import { useDispatch, useSelector } from "react-redux"; -import { deleteSlideBodyItem } from "@/store/slices/presentationGeneration"; +import { useSelector } from "react-redux"; import { numberTranslations } from "../../utils/others"; import { RootState } from "@/store/store"; import { useSlideOperations } from "../../hooks/use-slide-operations"; @@ -36,8 +35,7 @@ const Type2Layout = ({ design_index, language, }: Type2LayoutProps) => { - const dispatch = useDispatch(); - const { currentColors, currentTheme } = useSelector( + const { currentColors } = useSelector( (state: RootState) => state.theme ); const { handleAddItem, handleDeleteItem, handleVariantChange } = @@ -65,25 +63,22 @@ const Type2Layout = ({ handleVariantChange({ variant: 1 })} - className={`px-3 py-2 cursor-pointer ${ - design_index === 1 ? "bg-blue-50" : "" - }`} + className={`px-3 py-2 cursor-pointer ${design_index === 1 ? "bg-blue-50" : "" + }`} > Default Layout handleVariantChange({ variant: 2 })} - className={`px-3 py-2 cursor-pointer ${ - design_index === 2 ? "bg-blue-50" : "" - }`} + className={`px-3 py-2 cursor-pointer ${design_index === 2 ? "bg-blue-50" : "" + }`} > Numbered Layout handleVariantChange({ variant: 3 })} - className={`px-3 py-2 cursor-pointer ${ - design_index === 3 ? "bg-blue-50" : "" - }`} + className={`px-3 py-2 cursor-pointer ${design_index === 3 ? "bg-blue-50" : "" + }`} > Timeline Layout @@ -179,9 +174,8 @@ const Type2Layout = ({ if (isGridLayout) { return (
{/* Hover Border and Icons for entire layout */}
@@ -202,11 +196,10 @@ const Type2Layout = ({ ? "0 2px 10px 0 rgba(43, 43, 43, 0.2)" : "", }} - className={`w-full relative group ${ - design_index === 2 + className={`w-full relative group ${design_index === 2 ? "slide-box shadow-lg rounded-lg p-3 lg:p-6" : "" - }`} + }`} >
{design_index === 2 && ( @@ -222,7 +215,7 @@ const Type2Layout = ({ > { numberTranslations[ - language as keyof typeof numberTranslations + language as keyof typeof numberTranslations ][index] }
@@ -255,9 +248,8 @@ const Type2Layout = ({ // Horizontal layout for 2-3 items return (
{/* Hover Border and Icons for entire layout */}
@@ -285,11 +277,10 @@ const Type2Layout = ({ boxShadow: design_index === 2 ? "0 2px 10px 0 rgba(43, 43, 43, 0.2)" : "", }} - className={`w-full relative ${ - design_index === 2 + className={`w-full relative ${design_index === 2 ? "slide-box shadow-lg rounded-lg p-3 lg:p-6" : "" - }`} + }`} > @@ -306,7 +297,7 @@ const Type2Layout = ({ > { numberTranslations[ - language as keyof typeof numberTranslations + language as keyof typeof numberTranslations ][index] }
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/Header.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/Header.tsx index 20649de6..e5a20d57 100644 --- a/servers/nextjs/app/(presentation-generator)/presentation/components/Header.tsx +++ b/servers/nextjs/app/(presentation-generator)/presentation/components/Header.tsx @@ -8,9 +8,8 @@ import { Loader2, } from "lucide-react"; import React, { useState } from "react"; -import Image from "next/image"; import Wrapper from "@/components/Wrapper"; -import { usePathname, useRouter } from "next/navigation"; +import { useRouter } from "next/navigation"; import { Popover, PopoverContent, @@ -46,8 +45,6 @@ import ThemeSelector from "./ThemeSelector"; import Modal from "./Modal"; import Announcement from "@/components/Announcement"; -import { getHeader } from "../../services/api/header"; -import { getEnv } from "@/utils/constant"; const Header = ({ presentation_id,