# XD Plugin Lab: Part Four, Step 1: File I/O

main.js

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

//
// Note: all of this is from STEP 2
// EXCEPT we've added two new parameters (v & hPadding)
// which we use in lines 11 and 12, and 18
////////////////////////////////////////////////////////////

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}
    );
}

//
// This continues the introduction to UI in XD, STEP 3
// In step 4, we create our own UI and make the plugin
// useful again
////////////////////////////////////////////////////////////

let dialog;

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

// here is where we changed our UI by modifying `innerHTML`
    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-IO-P1.md

XD Plugin Lab: Part Four, Step 1: File I/O

Note: This is part of a longer series.

This serves as a checkpoint for File I/O.