XD Plugin Lab: Part Three, Step 3: Putting it all together

main.js

/*
 * Sample plugin code for Adobe XD.
 *
 * Visit http://adobexdplatform.com/ for API docs and more sample code.
 */

//
// NOTE we've added two new parameters (v & hPadding)
////////////////////////////////////////////////////////////

var {Rectangle, Color} = require("scenegraph");

function createRectangle(selection, hPadding, vPadding) {
    var textNode = selection.items[0];
    var bounds = textNode.boundsInParent;
    console.log(bounds);

    var shape = new Rectangle();
    shape.width = bounds.width + 2 * hPadding
    shape.height = bounds.height + 2 * vPadding;
    shape.stroke = new Color("blue");

    selection.insertionParent.addChild(shape);
    shape.placeInParentCoordinates(
        {x: 0, y: 0},
        {x: bounds.x - hPadding, y: bounds.y - vPadding}
    );
}

let dialog;

function createDialog() {
    dialog = document.createElement("dialog");

    dialog.innerHTML = `
<style>
    form {
        width: 400px;
    }
    .row {
        display: flex;
        align-items: center;
    }
</style>
<form method="dialog">
    <h1>Create Button Frame</h1>
    <hr />
    <div class="row">
        <label class="row">
            <span>V:</span>
            <input type="text" uxp-quiet="true" id="txtV" placeholder="V padding" />
        </label>
        <label class="row">
            <span>H:</span>
            <input type="text" uxp-quiet="true" id="txtH" placeholder="H padding" />
        </label>
    </div>
    <footer>
        <button id="cancel" type="reset" uxp-variant="secondary">Cancel</button>
        <button id="ok" type="submit" uxp-variant="cta">Apply</button>
    </footer>
</form>`;

    // make sure the cancel button works :-)
    dialog.querySelector("#cancel").addEventListener("click", () => {
        dialog.close("reasonCanceled");
    })

    document.appendChild(dialog);
}

async function showDialog() {
    if (!dialog) {
        createDialog();
    }

    const response = await dialog.showModal();

    if (response !== 'reasonCanceled') {
        // user wants to create the rectangle!
        const { selection } = require("scenegraph");

        // You can extract the values the user entered from the DOM
        // using querySelector and friends
        // NOTE: we should, of course, do validation here
        // but that's out of scope for now.
        const hPadding = Number(dialog.querySelector("#txtH").value);
        const vPadding = Number(dialog.querySelector("#txtV").value);

        createRectangle(selection, hPadding, vPadding);
    }

}

module.exports = {
    commands: {
        myPluginCommand: showDialog
    }
};

manifest.json

{
    "name": "Sample Plugin: Create Button Frame",
    "id": "YOUR_ID_HERE",
    "version": "1.0.0",

    "description": "Sample plugin code for Adobe XD. Creates a rectangle around the selected text, with fixed padding.",

    "host": {
        "app": "XD",
        "minVersion": "13.0.0"
    },

    "uiEntryPoints": [
        {
            "type": "menu",
            "label": "Create Button Frame",
            "commandId": "myPluginCommand"
        }
    ]
}

XD-UI-P3.md

XD Plugin Lab: Part Three, Step 3: Putting it all together

Note: This is part of a longer series.

Now we need to make the plugin useful again. To do that, we're going to add some parameters to createRectangle so we can call it with the user's specified paddings.

Pay attention to these sections in main.js:

• Line 14: We've added hPadding and vPadding as parameters
• Lines 20, 21, and 26: Note that we've replaced padding with the appropriate horizontal or vertical padding
• Line 79: We can check the response from a dialog to determine if the user canceled (pressed ESC or clicked "cancel") or if they want to apply the changes.
• Line 81: The current selection can be obtained from the scenegraph module.
• Lines 87-88: Using regular DOM methods we can extract the values the user typed in the two input fields.
• Line 90: Now we can call createRectangle. Because showDialog is async, we've actually returned a promise to XD (line 97), which means XD has held the scenegraph open for just this moment.