PowerPoint: add base64 image in shape

Hey justingreywolf,

The rectangle provides the size and location of the shape of the SVG image that is being inserted.  Here's a link to the SetSelectedDataOptions parameter that describes the properties in more detail...

https://learn.microsoft.com/en-us/javascript/api/office/office.setselecteddataoptions?view=common-js-preview

Here's my sample call...

    async fillSlot(fileInfo, play, options) {

        const currentShapeId = this.#shapeId;

        const shapeId = await this.#insertDrawing(this.#slideId, play.drawingAsSVG, play.rect);

        await this.#initializeNewDrawing(shapeId, fileInfo, false, false);

        ShapeHelper.deleteShape(this.#slideId, currentShapeId);

        return shapeId;
    }

Hope that helps, Cheers!

Troy

Troy_BigelowCan you provide a sample that is calling this code? Specifically, wondering what the value of "rectangle" is...

It would be helpful if the setSelectedDataAsync method would return the id of the new inserted image.  As a work around, I've created this helper method for PowerPoint that compares arrays of slide ids before and after inserting the drawing, the difference is the id of the new shape...

    async #insertDrawing(slideId, svgString, rectangle) {
        const asyncContext = await SlideHelper.getShapes(slideId, "id");
        return new Promise((resolve, reject) => {
            Office.context.document.setSelectedDataAsync(
                svgString,
                {
                    coercionType: Office.CoercionType.XmlSvg,
                    imageLeft: rectangle.left,
                    imageTop: rectangle.top,
                    imageWidth: rectangle.width,
                    imageHeight: rectangle.height,
                    asyncContext: asyncContext,
                },
                async (asyncResult) => {
                    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                        reject(asyncResult.error);
                    }
                    else {
                        // Our Async content contains an array of shapes before inserting the Drawing
                        const shapesOriginal = asyncResult.asyncContext;

                        // Let's get the list of shapes in our drawing after the insert
                        const shapesNew = await SlideHelper.getShapes(slideId, "id");

                        // Find the "difference", ie the new drawing shape!
                        let difference = shapesNew.filter(x => !shapesOriginal.some(y => y.id === x.id));

                        var toResolve = undefined;

                        if (difference !== undefined && difference.length === 1) {
                            // We found it, let's return our new shape id...
                            toResolve = difference[0].id;
                        }

                        resolve(toResolve);
                    }
                }
            );
        });
    }

Ideally, I would prefer some kind of identifier returned of the new inserted image.

Cheers!

Troy