Selection changed event

[gdreyv]

Are there any events produced by xd? I’m looking for selection changed event.

[cpryland]

Do you have access to the prerelease? That’s all in the documentation for panels.

[gdreyv]

Yes, I do. Do you mean this documentation https://github.com/AdobeXD/plugin-docs/tree/uxp-panel-release?

[cpryland]

Yes, I think that’s the right link.

[gdreyv]

Can you share more specific link? I don’t see it. In what part of documentation events were described?

[Velara]

There are no document events. There is an update() method that’s called when selection changes in your plugin panel. This contains all updates to a document like move, resize and selection change.

Determine type of update in the panel update method

I’m running some possibly processor intensive events on update() and I want to run those events only if there is a change to the artboard. Right now, if I simply change the selection the update method is called. Use Case If the user moved an rectangle then I want to know that the document has changed. If the user simply selected a different rectangle then the document has not changed and I want to avoid running any specific operations. async update(type) { if (type=="selection") updateUI()…

Are there events represent for document editing?

I want some events triggered by XD when document changes. Like imageChanges, documentChanges, documentSaved, contentEditing, etc. I don’t find them in the Plugin documents…

[gdreyv]

Ah, ok, I got it, so update lives here: https://github.com/AdobeXD/plugin-docs/blob/uxp-panel-release/reference/structure/handlers.md#for-panels

[Velara]

Yes. They will post more documentation soon. In your manifest you have something like this:

"uiEntryPoints": [
    {
        "type": "menu",
        "label": "My Plugin",
        "menuItems": [
            {
                "type": "menu",
                "label": "My Dialog",
                "commandId": "showDialog",
                "shortcut": { "mac": "", "win": "" }
            }
        ]
    },
    {
        "type": "panel",
        "label": "Panel",
        "panelId": "myPanel"
    }
]

And in your main.js you have something like this (you may or may not need async):

module.exports = {
	commands: {
		showDialog: showDialog
	},
	panels: {
		"myPanel": {
			async show(event) {
				const { selection, root } = require("scenegraph");
				var node = event.node;

				try {
					panelNode = node;
					panelVisible = true;
					
					await showDialog(selection, root, true);
				}
				catch (error) {
					log(error.stack);
				}
			},

			hide(event) {
				panelVisible = false;

				if (event.node && event.node.firstElementChild) {
					event.node.firstElementChild.remove();
				}
			},

			// entry point for selection changes, move, resize, delete
			async update() {
				const { selection, root } = require("scenegraph");

				if (panelVisible==false) {
					return;
				}

				var time = getTime();

				await showDialog(selection, root, true);

				time = getTime() - time;
			}
		}
  }