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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user