【AdobeXD】プラグイン開発3 I/O

13417 ワード
Plugin AdobeXD Plugin テキストリンク

書き出す

exportRendition.js
const application = require("application");
const fs = require("uxp").storage.localFileSystem;

// ダイアログを生成する
const showDialogY = (text) => { // ..(1)
    // create the dialog
    let dialog = document.createElement("dialog");

    // main container
    let container = document.createElement("div");
    container.style.minWidth = 400;
    container.style.padding = 40;

    // add content
    let title = document.createElement("h3");
    title.style.padding = 20;
    title.textContent = text;
    container.appendChild(title);

    // close button
    let closeButton = document.createElement("button");
    closeButton.textContent = "Yes";
    container.appendChild(closeButton);
    closeButton.onclick = (e) => {
        dialog.close();
    }

    document.body.appendChild(dialog);
    dialog.appendChild(container);
    dialog.showModal()
}

const handleExportRendition = async (selection) => { // ..(2)
    if (selection.items.length > 0) {
        const folder = await fs.getFolder();
        const file = await folder.createFile("rendition.png");

        let renditions = [{  // ..(3)
            node: selection.items[0],
            outputFile: file,
            type: application.RenditionType.PNG,
            scale: 2
        }];

        application.createRenditions(renditions) // (4)
            .then(results => {
                showDialogY(`PNG rendition has been saved at ${results[0].outputFile.nativePath}`);
            })
            .catch(error => {
                console.log(error);
            })
    }
}


module.exports = {
    commands: {
        "exportRendition": handleExportRendition
    }
};

選択したアイテムを書き出す。

(1) サンプルにダイアログの表示仕方があったので関数としてまとめる
(2) asyncを使うことでawaitが使える
(3) 書き出しの設定を作る
(4) 書き出す

書き出すときに上書きすることができなかった。ドキュメントには強制上書きと書いてあるが...

テキストファイルを読み込む

テキストファイルから文字列をとってきて、それをXD内のノードとして扱う

insertTextFromFile.js
const {Text, Color} = require("scenegraph");
const fs = require("uxp").storage.localFileSystem;

const insertTextFromFile = async (selection) =>{
    const aFile = await fs.getFileForOpening({ types: ["txt"]}); // ..(1)
    if(!aFile) return;

    const contents = await aFile.read(); // ..(2)

    const text = new Text();
    text.text = contents;
    text.styleRanges = [{
        length: contents.length,
        fill: new Color("#0000ff"),
        fontSize: 12
    }];

    selection.insertionParent.addChild(text);
    text.moveInParentCoordinates(10,30);
}

(1) ファイル選択ダイアログを表示してファイルを取得
(2) ファイルからテキストを読み込む

Fileドキュメント