Skip to content

Instantly share code, notes, and snippets.

@peterflynn

peterflynn/main.js

Created October 15, 2018 01:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save peterflynn/e07e90af71c4ae9ac195a506a4934db1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save peterflynn/e07e90af71c4ae9ac195a506a4934db1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. peterflynn created this gist Oct 15, 2018.
    64 changes: 64 additions & 0 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    /*
    * Sample plugin code for Adobe XD.
    *
    * Visit http://adobexdplatform.com/ for API docs and more sample code.
    */

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

    var dialog;

    function createDialog() {
    dialog = document.createElement("dialog");
    dialog.innerHTML = `
    <style>
    .row {
    display: flex;
    }
    </style>
    <form method="dialog">
    <h1>Create Button Frame</h1>
    <hr>
    <div class="row">
    <input type="text" uxp-quiet="true" id="txtV" placeholder="V padding" />
    <input type="text" uxp-quiet="true" id="txtH" placeholder="H padding" />
    </div>
    <footer>
    <!-- Ok button is special: it will automatically close the dialog for us -->
    <button id="ok" type="submit" uxp-variant="cta">OK</button>
    </footer>
    </form>`;
    document.appendChild(dialog);
    }

    function showDialog(selection) {
    if (!dialog) createDialog();

    return dialog.showModal().then(function () {
    var valueV = dialog.querySelector("#txtV").value;
    var valueH = dialog.querySelector("#txtH").value;
    createRectangle(selection, parseFloat(valueV), parseFloat(valueH));
    });
    }

    function createRectangle(selection, paddingV, paddingH) {
    var textNode = selection.items[0];
    var bounds = textNode.boundsInParent;

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

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

    module.exports = {
    commands: {
    myPluginCommand: showDialog
    }
    };
    20 changes: 20 additions & 0 deletions manifest.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    {
    "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 padding.",

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

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