diff --git a/apps/contrast-plugin/src/plugin.ts b/apps/contrast-plugin/src/plugin.ts index 3e4a8da..ad2cfcb 100644 --- a/apps/contrast-plugin/src/plugin.ts +++ b/apps/contrast-plugin/src/plugin.ts @@ -14,14 +14,37 @@ penpot.ui.onMessage((message) => { selection: penpot.getSelectedShapes(), }, }); + + initEvents(); } }); penpot.on('selectionchange', () => { const shapes = penpot.getSelectedShapes(); sendMessage({ type: 'selection', content: shapes }); + + initEvents(); }); +let listeners: symbol[] = []; + +function initEvents() { + listeners.forEach((listener) => { + penpot.off(listener); + }); + + listeners = penpot.selection.map((shape) => { + return penpot.on( + 'shapechange', + () => { + const shapes = penpot.getSelectedShapes(); + sendMessage({ type: 'selection', content: shapes }); + }, + { shapeId: shape.id } + ); + }); +} + penpot.on('themechange', () => { const theme = penpot.getTheme(); sendMessage({ type: 'theme', content: theme }); diff --git a/libs/plugin-types/index.d.ts b/libs/plugin-types/index.d.ts index 1784c94..fd90a69 100644 --- a/libs/plugin-types/index.d.ts +++ b/libs/plugin-types/index.d.ts @@ -65,11 +65,11 @@ export interface Penpot * * The following are the posible event types: * - pagechange: event emitted when the current page changes. The callback will receive the new page. - * - shapechanged: event emitted when the shape changes. This event requires to send inside the `props` object the shape + * - shapechange: event emitted when the shape changes. This event requires to send inside the `props` object the shape * that will be observed. For example: * ```javascript * // Observe the current selected shape - * penpot.on('shapechanged', (shape) => console.log(shape.name), { shapeId: penpot.selection[0].id }); + * penpot.on('shapechange', (shape) => console.log(shape.name), { shapeId: penpot.selection[0].id }); * ``` * - selectionchange: event emitted when the current selection changes. The callback will receive the list of ids for the new selection * - themechange: event emitted when the user changes its theme. The callback will receive the new theme (currentlly: either `dark` or `light`)