109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
Button
|
|
} from "@fluentui/react-components";
|
|
import {
|
|
CircleRegular
|
|
} from "@fluentui/react-icons";
|
|
import { useStatusContext } from "./App";
|
|
import { useCommonStyles } from "./commonStyles";
|
|
|
|
export const RoundImage: React.FC = () => {
|
|
const styles = useCommonStyles();
|
|
const {
|
|
statusMessage, setStatusMessage,
|
|
statusType, setStatusType,
|
|
isProcessing, setIsProcessing
|
|
} = useStatusContext();
|
|
|
|
const convertToRoundImage = async () => {
|
|
setIsProcessing(true);
|
|
try {
|
|
await PowerPoint.run(async (context) => {
|
|
// Get the selected shapes
|
|
const shapes = context.presentation.getSelectedShapes();
|
|
shapes.load("items");
|
|
await context.sync();
|
|
|
|
if (shapes.items.length === 0) {
|
|
setStatusMessage("No shapes are selected. Please select an image.");
|
|
setStatusType("warning");
|
|
return;
|
|
}
|
|
|
|
// Get the first selected shape
|
|
const shape = shapes.items[0];
|
|
|
|
// Load essential properties
|
|
shape.load(["type"]);
|
|
await context.sync();
|
|
|
|
// Ensure the shape is a picture
|
|
if (shape.type !== PowerPoint.ShapeType.image) {
|
|
setStatusMessage("Please select an image.");
|
|
setStatusType("warning");
|
|
return;
|
|
}
|
|
|
|
// Load current dimensions to maintain aspect ratio
|
|
shape.load(["width", "height", "left", "top", "id"]);
|
|
await context.sync();
|
|
|
|
// Store current dimensions
|
|
const width = shape.width;
|
|
const height = shape.height;
|
|
|
|
const slide = context.presentation.getSelectedSlides().getItemAt(0);
|
|
const maskShape = slide.shapes.addGeometricShape("Ellipse" as any);
|
|
|
|
maskShape.load(["width", "height", "left", "top", "id"]);
|
|
await context.sync();
|
|
|
|
maskShape.left = shape.left;
|
|
|
|
shape.lineFormat.load(["weight"]);
|
|
await context.sync();
|
|
|
|
maskShape.top = shape.top; // + shape.lineFormat.weight;
|
|
maskShape.width = shape.width;
|
|
maskShape.height = shape.height;
|
|
maskShape.fill.setSolidColor("red");
|
|
maskShape.lineFormat.visible = false;
|
|
|
|
setStatusMessage("Created mask shape. Please select both the image and the oval, then use the 'Shape Forma > Merge Shapes > Intersect' command in PowerPoint.");
|
|
setStatusType("warning");
|
|
|
|
slide.setSelectedShapes([shape.id, maskShape.id]);
|
|
// Ensure we maintain the same size
|
|
shape.width = width;
|
|
shape.height = height;
|
|
|
|
await context.sync();
|
|
});
|
|
} catch (error) {
|
|
setStatusMessage(`Error: ${error.message}`);
|
|
setStatusType("error");
|
|
console.error("Main error:", error);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.buttonGroup}>
|
|
<Button
|
|
appearance="primary"
|
|
className={styles.actionButton}
|
|
onClick={convertToRoundImage}
|
|
icon={<CircleRegular />}
|
|
disabled={isProcessing}
|
|
>
|
|
Round Image
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RoundImage; |