diff --git a/src/taskpane/components/AddProgressBar.tsx b/src/taskpane/components/AddProgressBar.tsx index f82bece8..8a09e7ba 100644 --- a/src/taskpane/components/AddProgressBar.tsx +++ b/src/taskpane/components/AddProgressBar.tsx @@ -20,8 +20,90 @@ export const AddProgressBar: React.FC = () => { setIsProcessing(true); try { await PowerPoint.run(async (context) => { - const shapes = context.presentation.getSelectedShapes(); - // Implementation will go here + // Get all slides + const presentation = context.presentation; + const slides = presentation.slides; + slides.load("items"); + + // Need to load the first slide to get access to dimensions + await context.sync(); + + if (slides.items.length === 0) { + throw new Error("No slides in the presentation"); + } + + // Get dimensions from first slide + const firstSlide = slides.items[0]; + + // We'll create our own width and height based on standard values + // since direct access to slide dimensions is tricky in Office.js + const slideWidth = 960; // Standard PowerPoint slide width in points + const slideHeight = 540; // Standard PowerPoint slide height in points + + // Define progress bar properties + const progressBarHeight = 1; // Height in points + const segmentGap = 0; // Gap between segments + const startY = slideHeight - 28; // 28 points from bottom + + // Load slides first to get count + await context.sync(); + + const slideCount = slides.items.length; + const segmentWidth = slideWidth / slideCount; + + // Process each slide + for (let i = 0; i < slideCount; i++) { + const slide = slides.items[i]; + + // Load slide properties to check layout + slide.load("layout"); + await context.sync(); + + const layoutName = slide.layout.name; + + // Check if this is a layout we want to add the progress bar to + // Note: Office.js might not have exact same layout names as VBA, + // so we're checking for common layouts + if (layoutName.includes("Title") || + layoutName.includes("Content") || + layoutName.includes("Two Content") || + layoutName.includes("Blank")) { + + // Add progress bar segments to this slide + for (let j = 0; j < slideCount; j++) { + // Create line for this segment + const startX = j * segmentWidth; + const endX = (j + 1) * segmentWidth - segmentGap; + + // Create a rectangle with minimal height to simulate a line + // since proper line creation is challenging with the Office JS API + const line = slide.shapes.addGeometricShape("Rectangle"); + + // Set the rectangle's position to look like a line + line.left = startX; + line.top = startY; + line.width = endX - startX; + line.height = progressBarHeight; // Very small height + + // Set fill color based on progress instead of line color + // We're using a rectangle, so fill is more appropriate than line + if (j < i) { + // Blue for progressed segments (RGB 32, 81, 112) + line.fill.setSolidColor("#205170"); + } else { + // Grey for segments not yet progressed (RGB 242, 242, 242) + line.fill.setSolidColor("#F2F2F2"); + } + + // Remove the border/outline entirely + line.lineFormat.visible = false; + + // Since tags API might not be fully supported, use shape name as identifier + line.name = "progress_bar_" + j; + } + } + } + setStatusMessage("Added progress bar to slides."); setStatusType("success"); }); diff --git a/src/taskpane/components/RemoveProgressBar.tsx b/src/taskpane/components/RemoveProgressBar.tsx index f65cb99f..cd6f4dad 100644 --- a/src/taskpane/components/RemoveProgressBar.tsx +++ b/src/taskpane/components/RemoveProgressBar.tsx @@ -20,9 +20,51 @@ export const RemoveProgressBar: React.FC = () => { setIsProcessing(true); try { await PowerPoint.run(async (context) => { - const shapes = context.presentation.getSelectedShapes(); - // Implementation will go here - setStatusMessage("Removed progress bars from slides."); + // Get all slides + const presentation = context.presentation; + const slides = presentation.slides; + slides.load("items"); + await context.sync(); + + let removedCount = 0; + + // Process each slide + for (let i = 0; i < slides.items.length; i++) { + const slide = slides.items[i]; + + // Load all shapes in this slide + const shapes = slide.shapes; + shapes.load("items"); + await context.sync(); + + // Find shapes with our tag + const progressBarShapes = []; + for (let j = 0; j < shapes.items.length; j++) { + const shape = shapes.items[j]; + // Check if this shape name indicates it's a progress bar + shape.load("name"); + await context.sync(); + + // Look for shapes with names starting with "progress_bar_" + if (shape.name && shape.name.startsWith("progress_bar_")) { + progressBarShapes.push(shape); + } + } + + // Delete all progress bar shapes + for (const shape of progressBarShapes) { + shape.delete(); + removedCount++; + } + } + + await context.sync(); + + if (removedCount > 0) { + setStatusMessage(`Removed ${removedCount} progress bar elements from slides.`); + } else { + setStatusMessage("No progress bar elements found to remove."); + } setStatusType("success"); }); } catch (error) {