Issue #1152Opened June 1, 2018by milapshah153 reactions

Listen to any change in the canvas

Question

Hello Folks,

I have a requirement where I added a button which saves the configuration to the remote DB.Now I would like to listen to any change in the canvas to enable/disable the button.For example, If there is any change, enable the save button for user to save it.I have gone through available events but I found nothing which listen to any change (Style,Component add/remove).

Any help? @artf

Warm regards Milap

Answers (3)

IStirton10June 1, 20183 reactions

Actually I think there is an event that could serve this purpose. Could you try defining your method callback on 'change:changesCount'?

grapesjs\src\editor\model\Editor.js:64 this.on('change:changesCount', this.updateChanges, this);

IStirton10June 1, 20180 reactions

I'm not sure if there's one exclusive event that listens for any changes to the canvas. Perhaps you could have your method run on all of the canvas events instead?

https://github.com/artf/grapesjs/blob/dev/src/editor/index.js#L53 `* ## Canvas

    • canvas:dragenter - When something is dragged inside the canvas, DataTransfer instance passed as an argument
    • canvas:dragover - When something is dragging on canvas, DataTransfer instance passed as an argument
    • canvas:drop - Something is dropped in canvas, DataTransfer instance and the dropped model are passed as arguments
    • canvas:dragend - When a drag operation is ended, DataTransfer instance passed as an argument
    • canvas:dragdata - On any dataTransfer parse, DataTransfer instance and the result are passed as arguments.`
milapshah15June 1, 20180 reactions

@IStirton10 Let me try it out.I guess this should work.

Warm regards Milap

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.