We are faced with a challenge in replicating a specific Word functionality using Office-JS and are seeking guidance on its feasibility.
Our scenario involves two drawing canvases; one larger canvas filled with various images and shapes, and another smaller empty canvas.
In Word, we can easily select all content within the large canvas, copy it, and paste it into the smaller canvas where it automatically resizes to fit. However, our attempts to automate this process using the Office-JS API have not yielded the desired outcome.
After extracting the OOXML from the original canvas and inserting it into the new canvas using context.document.body.insertOoxml, the contents are pasted but do not resize accordingly to fit the smaller canvas.
Is there an alternative method we could explore to achieve this resizing functionality?
One approach we tried involved looping through each element in the canvas to manually adjust their sizes, but the changes were not reflected as expected:
// Retrieve all paragraphs
let xmlContent;
xmlContent = doc.body.getOoxml();
await context.sync();
const parser = new DOMParser();
let xml: Document = parser.parseFromString(xmlContent.value, 'application/xhtml+xml');
const paragraphs = xml.getElementsByTagName('w:p');
for (let i = 0; i <= paragraphs.length - 1; i++) {
if (paragraphs[i].getElementsByTagName('w:sdtPr').length > 0
&& paragraphs[i].getElementsByTagName('w:sdtPr')[0].getElementsByTagName('w:id')[0].getAttributeNode("w:val").value === '1234306') {
targetCanvasParagraph = paragraphs[i + 1];
}
let drawings = targetCanvasParagraph.getElementsByTagName('w:drawing');
let factor = 1.724156661532341;
for (let i = 0; i < drawings.length; i++) {
let positionH = drawings.item(i).getElementsByTagName('wp:positionH')[0];
if (positionH) {
let posOffsetH = positionH.getElementsByTagName('wp:posOffset')[0];
posOffsetH.textContent = (Math.trunc(Number(posOffsetH.textContent) / factor)).toString();
}
let positionV = drawings.item(i).getElementsByTagName('wp:positionV')[0];
if(positionV){
let posOffsetV = positionV.getElementsByTagName('wp:posOffset')[0];
posOffsetV.textContent = (Math.trunc(Number(posOffsetV.textContent) / factor)).toString();
}
}
}