feat(poc-state-plugin): add example for plugin data

apps/poc-state-plugin/src/app/app.component.ts

@@ -13,6 +13,9 @@ import type { PenpotShape } from '@penpot/plugin-types';
       <p>
         Current project name: <span>{{ projectName() }}</span>
       </p>
+      <p>
+        Counter: <span>{{ counter() }}</span>
+      </p>
 
       <form [formGroup]="form" (ngSubmit)="updateName()">
         <div class="name-wrap">
@@ -66,6 +69,13 @@ import type { PenpotShape } from '@penpot/plugin-types';
         >
           Create color palette board
         </button>
+        <button
+          type="button"
+          data-appearance="secondary"
+          (click)="increaseCounter()"
+        >
+          +COUNTER
+        </button>
       </div>
 
       <p>
@@ -88,11 +98,13 @@ export class AppComponent {
   #fileId = null;
   #revn = 0;
   #selection = signal<PenpotShape[]>([]);
+
   form = new FormGroup({
     name: new FormControl(''),
   });
   theme = signal('');
   projectName = signal('Unknown');
+  counter = signal(0);
 
   constructor() {
     window.addEventListener('message', (event) => {
@@ -106,14 +118,18 @@ export class AppComponent {
         );
       } else if (event.data.type === 'selection') {
         this.#refreshSelection(event.data.content.selection);
+        this.counter.set(event.data.content.counter);
       } else if (event.data.type === 'init') {
         this.#fileId = event.data.content.fileId;
         this.#revn = event.data.content.revn;
         this.#refreshPage(event.data.content.pageId, event.data.content.name);
         this.#refreshSelection(event.data.content.selection);
         this.theme.set(event.data.content.theme);
+        this.counter.set(event.data.content.counter);
       } else if (event.data.type === 'theme') {
         this.theme.set(event.data.content);
+      } else if (event.data.type === 'update-counter') {
+        this.counter.set(event.data.content.counter);
       }
     });
 
@@ -174,6 +190,10 @@ export class AppComponent {
     this.#sendMessage({ content: 'create-colors' });
   }
 
+  increaseCounter() {
+    this.#sendMessage({ content: 'increase-counter' });
+  }
+
   #sendMessage(message: unknown) {
     parent.postMessage(message, '*');
   }

apps/poc-state-plugin/src/plugin.ts

@@ -16,6 +16,11 @@ penpot.ui.onMessage<{ content: string; data: unknown }>((message) => {
       return;
     }
 
+    const selection = penpot.selection;
+    const data: string | null =
+      selection.length === 1 ? selection[0].getPluginData('counter') : null;
+    const counter = data ? parseInt(data, 10) : 0;
+
     penpot.ui.sendMessage({
       type: 'init',
       content: {
@@ -24,7 +29,8 @@ penpot.ui.onMessage<{ content: string; data: unknown }>((message) => {
         fileId: file.id,
         revn: file.revn,
         theme: penpot.getTheme(),
-        selection: penpot.getSelectedShapes(),
+        selection,
+        counter,
       },
     });
   } else if (message.content === 'change-name') {
@@ -254,6 +260,15 @@ Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imper
         board.appendChild(text);
       }
     }
+  } else if (message.content === 'increase-counter') {
+    const selection = penpot.selection;
+    const data: string | null =
+      selection.length === 1 ? selection[0].getPluginData('counter') : null;
+    let counter = data ? parseInt(data, 10) : 0;
+    counter++;
+
+    selection[0].setPluginData('counter', '' + counter);
+    penpot.ui.sendMessage({ type: 'update-counter', content: { counter } });
   }
 });
 
@@ -284,7 +299,10 @@ penpot.on('filechange', () => {
 
 penpot.on('selectionchange', () => {
   const selection = penpot.getSelectedShapes();
-  penpot.ui.sendMessage({ type: 'selection', content: { selection } });
+  const data: string | null =
+    selection.length === 1 ? selection[0].getPluginData('counter') : null;
+  const counter = data ? parseInt(data, 10) : 0;
+  penpot.ui.sendMessage({ type: 'selection', content: { selection, counter } });
 });
 
 penpot.on('themechange', (theme) => {