From 146a7e106652d936d49330dfadb8196b6e927ce3 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 18 Apr 2024 17:11:48 +0200 Subject: [PATCH] feat: modify shapes from a plugin poc --- .../src/app/app.element.css | 10 +++ .../src/app/app.element.ts | 72 +++++++++++-------- apps/poc-state-read-plugin/src/plugin.ts | 13 ++-- libs/plugin-types/index.d.ts | 1 + libs/plugins-runtime/src/index.ts | 25 ++++--- 5 files changed, 78 insertions(+), 43 deletions(-) diff --git a/apps/poc-state-read-plugin/src/app/app.element.css b/apps/poc-state-read-plugin/src/app/app.element.css index 7a01ccc..f1149c8 100644 --- a/apps/poc-state-read-plugin/src/app/app.element.css +++ b/apps/poc-state-read-plugin/src/app/app.element.css @@ -67,3 +67,13 @@ h1 { font-size: 11px; padding-inline-start: var(--spacing-12); } + +.name-wrap { + display: flex; + gap: 1rem; + margin-bottom: 1rem; +} + +.name-wrap input { + flex: 1; +} diff --git a/apps/poc-state-read-plugin/src/app/app.element.ts b/apps/poc-state-read-plugin/src/app/app.element.ts index 019536d..41e77f3 100644 --- a/apps/poc-state-read-plugin/src/app/app.element.ts +++ b/apps/poc-state-read-plugin/src/app/app.element.ts @@ -9,9 +9,10 @@ export class AppElement extends HTMLElement { #fileId = null; #revn = 0; - refreshPage(pageId: string, name: string) { - console.log('refreshPage', pageId, name); + #nameSubmit = null; + #nameInput = null; + refreshPage(pageId: string, name: string) { const projectName = document.getElementById('project-name'); this.#pageId = pageId; @@ -20,57 +21,68 @@ export class AppElement extends HTMLElement { } } - refreshSelectionId(selection: string[]) { + refreshSelection(selection: PenpotShape[]) { this.#selection = selection; - - const selectionId = document.getElementById('selection-id'); - - if (selectionId) { - selectionId.innerText = [...this.#selection].join(","); + if (selection && selection.length > 0) { + this.#nameInput.value = this.#selection[0].name; + } else { + this.#nameInput.value = ""; } } connectedCallback() { - window.addEventListener('message', (event) => { - if (event.data.type === 'file') { - this.#fileId = event.data.content.id; - this.#revn = event.data.content.revn; - } else if (event.data.type === 'page') { - console.log(">>UI", event.data.content.shapes); - this.refreshPage(event.data.content.page.id, event.data.content.page.name); - } else if (event.data.type === 'selection') { - this.refreshSelectionId(event.data.content); - } else if (event.data.type === 'init') { - console.log("Content", event.data.content); - this.#fileId = event.data.content.fileId; - this.#revn = event.data.content.revn; - this.refreshPage(event.data.content.pageId, event.data.content.name); - this.refreshSelectionId(event.data.content.selection); - this.setAttribute('data-theme', event.data.content.theme); - } else if (event.data.type === 'theme') { - this.setAttribute('data-theme', event.data.content); - } - }); - this.innerHTML = `

Test area!

Current project name: Unknown

-

Selection id: Unknown

+
+ + + +

`; + this.#nameSubmit = document.getElementById('name-submit'); + this.#nameInput = document.getElementById('name-input'); + + window.addEventListener('message', (event) => { + if (event.data.type === 'file') { + this.#fileId = event.data.content.id; + this.#revn = event.data.content.revn; + } else if (event.data.type === 'page') { + this.refreshPage(event.data.content.page.id, event.data.content.page.name); + } else if (event.data.type === 'selection') { + this.refreshSelection(event.data.content.selection); + } 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.setAttribute('data-theme', event.data.content.theme); + } else if (event.data.type === 'theme') { + this.setAttribute('data-theme', event.data.content); + } + }); + const closeAction = this.querySelector('.act-close-plugin'); closeAction?.addEventListener('click', () => { parent.postMessage({ content: 'close' }, '*'); }); parent.postMessage({ content: 'ready' }, '*'); + + console.log(this.#nameSubmit); + this.#nameSubmit?.addEventListener('click', (e) => { + const id = this.#selection[0].id; + const name = this.#nameInput.value; + parent.postMessage({ content: 'change-name', data: { id, name } }, '*'); + }); } } customElements.define('app-root', AppElement); diff --git a/apps/poc-state-read-plugin/src/plugin.ts b/apps/poc-state-read-plugin/src/plugin.ts index 9ddd5ec..b8d6247 100644 --- a/apps/poc-state-read-plugin/src/plugin.ts +++ b/apps/poc-state-read-plugin/src/plugin.ts @@ -3,7 +3,7 @@ penpot.ui.open('Plugin name', 'http://localhost:4202', { height: 600, }); -penpot.ui.onMessage<{ content: string }>((message) => { +penpot.ui.onMessage<{ content: string; data: unknown }>((message) => { if (message.content === 'close') { penpot.closePlugin(); } else if (message.content === 'ready') { @@ -22,9 +22,14 @@ penpot.ui.onMessage<{ content: string }>((message) => { fileId: file.id, revn: file.revn, theme: penpot.getTheme(), - selection: penpot.getSelected(), + selection: penpot.getSelectedShapes(), }, }); + } else if (message.content === 'change-name') { + const shape = penpot.getPage()?.getShapeById('' + (message.data as {id: string}).id); + if (shape) { + shape.name = (message.data as {name: string}).name; + } } }); @@ -49,8 +54,8 @@ penpot.on('filechange', () => { }); penpot.on('selectionchange', () => { - const selected: string[] = penpot.getSelected(); - penpot.ui.sendMessage({ type: 'selection', content: selected }); + const selection = penpot.getSelectedShapes(); + penpot.ui.sendMessage({ type: 'selection', content: { selection } }); }); penpot.on('themechange', (theme) => { diff --git a/libs/plugin-types/index.d.ts b/libs/plugin-types/index.d.ts index 9e18291..ec9364d 100644 --- a/libs/plugin-types/index.d.ts +++ b/libs/plugin-types/index.d.ts @@ -7,6 +7,7 @@ export interface PenpotFile { export interface PenpotPage { id: string; name: string; + getShapeById(id: string): PenpotShape | null; findShapes(): PenpotShape[]; } diff --git a/libs/plugins-runtime/src/index.ts b/libs/plugins-runtime/src/index.ts index fde7c8e..1b65e98 100644 --- a/libs/plugins-runtime/src/index.ts +++ b/libs/plugins-runtime/src/index.ts @@ -5,21 +5,28 @@ import { initInstaller } from './lib/installer'; import { ɵloadPlugin, setContext } from './lib/load-plugin'; import * as api from './lib/api'; +console.log('Loading plugin system'); + repairIntrinsics({ evalTaming: 'unsafeEval', }); // eslint-disable-next-line @typescript-eslint/no-explicit-any -export function initialize(context: any) { - globalThis.ɵloadPlugin = ɵloadPlugin; - initInstaller(); +globalThis.initPluginsRuntime = (context: PenpotContext) => { + if (context) { + console.log('Initialize context'); - /* eslint-disable */ - setContext(context); + globalThis.ɵcontext = context; + globalThis.ɵloadPlugin = ɵloadPlugin; + initInstaller(); - for (const event of api.validEvents) { - context.addListener(event, api.triggerEvent.bind(null, event)); + /* eslint-disable */ + setContext(context); + + for (const event of api.validEvents) { + context.addListener(event, api.triggerEvent.bind(null, event)); + } + + /* eslint-enable */ } - - /* eslint-enable */ }