Optimize performance by batching context.sync() calls

- GridGuidelineManager: Load all shape names upfront and apply operations in batches
- AlignmentButtons: Replaced for loops with forEach and reduced sync calls
- MatchProperties: Reorganized code to batch load operations and property assignments

This optimization significantly reduces round-trips between JavaScript and the Office application,
improving performance and responsiveness of the add-in.

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-03-14 23:56:54 +01:00
parent d09dec4706
commit 07b0232726
3 changed files with 91 additions and 74 deletions
+50 -44
View File
@@ -74,10 +74,27 @@ export const MatchProperties: React.FC = () => {
}
}
// First, load all text frames in a batch
if (hasText) {
// Pre-load textFrame for all target shapes
for (let i = 1; i < shapes.items.length; i++) {
shapes.items[i].load("textFrame");
}
await context.sync();
// For shapes that have textFrames, load their textRanges
for (let i = 1; i < shapes.items.length; i++) {
if (shapes.items[i].textFrame) {
shapes.items[i].textFrame.load("textRange");
}
}
await context.sync();
}
// Now apply properties to all shapes
let successCount = 0;
let textStyleCount = 0;
// Loop through remaining shapes and apply properties
for (let i = 1; i < shapes.items.length; i++) {
try {
const targetShape = shapes.items[i];
@@ -100,7 +117,6 @@ export const MatchProperties: React.FC = () => {
targetShape.lineFormat.color = firstShape.lineFormat.color;
}
await context.sync();
propertiesApplied = true;
} catch (err) {
console.error(`Error applying line format to shape ${i}:`, err);
@@ -117,56 +133,43 @@ export const MatchProperties: React.FC = () => {
targetShape.fill.foregroundColor = firstShape.fill.foregroundColor;
}
await context.sync();
propertiesApplied = true;
} catch (err) {
console.error(`Error applying fill format to shape ${i}:`, err);
}
// Apply text properties if the source has text
if (hasText) {
if (hasText && targetShape.textFrame && targetShape.textFrame.textRange) {
try {
// First check if target shape has text
targetShape.load("textFrame");
await context.sync();
const sourceFont = firstShape.textFrame.textRange.font;
const targetFont = targetShape.textFrame.textRange.font;
if (targetShape.textFrame) {
targetShape.textFrame.load("textRange");
await context.sync();
if (targetShape.textFrame.textRange) {
const sourceFont = firstShape.textFrame.textRange.font;
const targetFont = targetShape.textFrame.textRange.font;
// Apply font properties
if (sourceFont.name !== undefined) {
targetFont.name = sourceFont.name;
}
if (sourceFont.size !== undefined) {
targetFont.size = sourceFont.size;
}
if (sourceFont.bold !== undefined) {
targetFont.bold = sourceFont.bold;
}
if (sourceFont.italic !== undefined) {
targetFont.italic = sourceFont.italic;
}
if (sourceFont.underline !== undefined) {
targetFont.underline = sourceFont.underline;
}
if (sourceFont.color !== undefined) {
targetFont.color = sourceFont.color;
}
await context.sync();
textStyleCount++;
}
// Apply font properties in batch
if (sourceFont.name !== undefined) {
targetFont.name = sourceFont.name;
}
if (sourceFont.size !== undefined) {
targetFont.size = sourceFont.size;
}
if (sourceFont.bold !== undefined) {
targetFont.bold = sourceFont.bold;
}
if (sourceFont.italic !== undefined) {
targetFont.italic = sourceFont.italic;
}
if (sourceFont.underline !== undefined) {
targetFont.underline = sourceFont.underline;
}
if (sourceFont.color !== undefined) {
targetFont.color = sourceFont.color;
}
textStyleCount++;
} catch (err) {
console.error(`Error applying text format to shape ${i}:`, err);
}
@@ -180,6 +183,9 @@ export const MatchProperties: React.FC = () => {
console.error(`Error updating shape ${i}:`, err);
}
}
// Single sync after all property changes
await context.sync();
// Final status message based on what was applied
if (successCount > 0) {