mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-06 14:50:21 -05:00
feat: selection id api
This commit is contained in:
Juanfran
parent
6aacf9bf54
commit
895d5cc449
7 changed files with 66 additions and 89 deletions
|
|
@ -4,23 +4,33 @@ import './app.element.css';
|
|||
export class AppElement extends HTMLElement {
|
||||
public static observedAttributes = [];
|
||||
|
||||
refreshPageName(name: string) {
|
||||
const projectName = document.getElementById('project-name');
|
||||
|
||||
if (projectName) {
|
||||
projectName.innerText = name;
|
||||
}
|
||||
}
|
||||
|
||||
refreshSelectionId(selection: string) {
|
||||
const selectionId = document.getElementById('selection-id');
|
||||
|
||||
if (selectionId) {
|
||||
selectionId.innerText = selection;
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
window.addEventListener('message', function (event) {
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.data.type === 'pingpong') {
|
||||
console.log('iframe', event.data.content);
|
||||
} else if (event.data.type === 'page') {
|
||||
console.log('iframe', event.data);
|
||||
const projectName = document.getElementById('project-name');
|
||||
|
||||
if (projectName) {
|
||||
projectName.innerText = event.data.content;
|
||||
}
|
||||
this.refreshPageName(event.data.content);
|
||||
} else if (event.data.type === 'selection') {
|
||||
this.refreshSelectionId(event.data.content);
|
||||
} else if (event.data.type === 'init') {
|
||||
const projectName = document.getElementById('project-name');
|
||||
|
||||
if (projectName) {
|
||||
projectName.innerText = event.data.content.name;
|
||||
}
|
||||
this.refreshPageName(event.data.content.name);
|
||||
this.refreshSelectionId(event.data.content.selection);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -29,6 +39,7 @@ export class AppElement extends HTMLElement {
|
|||
<h1>Test area</h1>
|
||||
|
||||
<p>Current project name: <span id="project-name">Unknown</span></p>
|
||||
<p>Selection id: <span id="selection-id">Unknown</span></p>
|
||||
|
||||
<p>
|
||||
<button type="button" data-appearance="primary" class="act-ping-pong">Ping Pong message</button>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ penpot.ui.onMessage((message) => {
|
|||
type: 'init',
|
||||
content: {
|
||||
name: penpot.getPageState().name,
|
||||
selection: penpot.getSelection(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -34,3 +35,7 @@ penpot.ui.onMessage((message) => {
|
|||
penpot.on('pagechange', (page) => {
|
||||
penpot.ui.sendMessage({ type: 'page', content: page.name });
|
||||
});
|
||||
|
||||
penpot.on('selectionchange', (id) => {
|
||||
penpot.ui.sendMessage({ type: 'selection', content: id });
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<title>Penpot - Design Freedom for Teams</title>
|
||||
|
||||
<meta name="description" content="The open-source solution for design and prototyping.">
|
||||
<meta property="og:locale" content="en_US">
|
||||
<meta property="og:title" content="Penpot | Design Freedom for Teams">
|
||||
<meta property="og:description" content="The open-source solution for design and prototyping">
|
||||
<meta property="og:image" content="https://penpot.app/images/workspace-ui.jpg">
|
||||
<meta name="twitter:title" content="Penpot | Design Freedom for Teams">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:description" content="The open-source solution for design and prototyping">
|
||||
<meta name="twitter:image" content="https://penpot.app/images/workspace-ui.jpg">
|
||||
<meta name="twitter:site" content="@penpotapp">
|
||||
<meta name="twitter:creator" content="@penpotapp">
|
||||
<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
|
||||
<link id="theme" href="css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
|
||||
{{#isDebug}}
|
||||
<link href="css/debug.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
|
||||
{{/isDebug}}
|
||||
|
||||
<link rel="icon" href="images/favicon.png" />
|
||||
<script type="importmap">
|
||||
{"imports": {"plugins-runtime": "http://localhost:4200/index.mjs"}}
|
||||
</script>
|
||||
|
||||
<script type="module" src="http://localhost:4200/index.mjs"></script>
|
||||
|
||||
<script>
|
||||
window.penpotTranslations = JSON.parse({{& translations}});
|
||||
window.penpotThemes = {{& themes}};
|
||||
window.penpotVersion = "%version%";
|
||||
window.penpotBuildDate = "%buildDate%";
|
||||
</script>
|
||||
|
||||
{{# manifest}}
|
||||
<script>window.penpotWorkerURI="{{& worker}}"</script>
|
||||
<script defer src="{{& config}}"></script>
|
||||
<script defer src="{{& polyfills}}"></script>
|
||||
{{/manifest}}
|
||||
|
||||
</head>
|
||||
<body>
|
||||
{{>../public/images/sprites/symbol/icons.svg}}
|
||||
{{>../public/images/sprites/symbol/cursors.svg}}
|
||||
<div id="app"></div>
|
||||
<section id="modal"></section>
|
||||
{{# manifest}}
|
||||
|
||||
<script defer src="{{& shared}}"></script>
|
||||
<script defer src="{{& main}}"></script>
|
||||
|
||||
<penpot-plugins />
|
||||
{{/manifest}}
|
||||
|
||||
|
||||
<script type="importmap">
|
||||
{"imports": {"plugins-runtime": "http://localhost:4200/index.mjs"}}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import * as runtime from "plugins-runtime";
|
||||
|
||||
// console.log(globalThis.app.plugins);
|
||||
runtime.initialize(globalThis.app.plugins);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,6 +7,19 @@ penpot.ui.open('Plugin name', 'http://localhost:4201', {
|
|||
});
|
||||
```
|
||||
|
||||
Get state:
|
||||
|
||||
```ts
|
||||
// file file state
|
||||
penpot.ui.getFileState();
|
||||
|
||||
// file page state
|
||||
penpot.ui.getFileState();
|
||||
|
||||
// selection id
|
||||
penpot.ui.getSelection();
|
||||
```
|
||||
|
||||
### Messages
|
||||
|
||||
Receive message from iframe:
|
||||
|
|
@ -39,7 +52,7 @@ window.addEventListener('message', function (event) {
|
|||
|
||||
### Events
|
||||
|
||||
Current events `pagechange` and `filechange`.
|
||||
Current events `pagechange`, `filechange` and `selectionchange`.
|
||||
|
||||
```ts
|
||||
const event = (page) => {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
Go to to the [this branch](https://github.com/penpot/penpot/tree/niwinz-poc-plugins) in the Penpot local code.
|
||||
|
||||
Copy `penpot-plugins/docs/index.mustache` to `penpot/frontend/resources/templates/index.mustache`.
|
||||
|
||||
Run the penpot runtime with `npm start`.
|
||||
|
||||
Now you can go to penpot and see the `log` of this file `plugins-runtime/src/index.ts`.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import 'ses';
|
|||
import './lib/plugin-modal';
|
||||
|
||||
import { ɵloadPlugin } from './lib/load-plugin';
|
||||
import { setFileState, setPageState } from './lib/api';
|
||||
import { setFileState, setPageState, setSelection } from './lib/api';
|
||||
|
||||
repairIntrinsics({
|
||||
evalTaming: 'unsafeEval',
|
||||
|
|
@ -31,4 +31,11 @@ export function initialize(api: any) {
|
|||
|
||||
setFileState(file);
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
api.addListener('plugin-selection', 'selection', (selection: any) => {
|
||||
console.log('Selection Changed:', selection);
|
||||
|
||||
setSelection(selection.linked_map.head?.uuid);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import z from 'zod';
|
|||
|
||||
type Callback<T> = (message: T) => void;
|
||||
|
||||
const validEvents = ['pagechange', 'filechange'] as const;
|
||||
const validEvents = ['pagechange', 'filechange', 'selectionchange'] as const;
|
||||
|
||||
let uiMessagesCallbacks: Callback<unknown>[] = [];
|
||||
|
||||
|
|
@ -15,6 +15,8 @@ let pageState = {} as any;
|
|||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let fileState = {} as any;
|
||||
|
||||
let selection: null | string = null;
|
||||
|
||||
const eventListeners: Map<string, Callback<unknown>[]> = new Map();
|
||||
|
||||
window.addEventListener('message', (event) => {
|
||||
|
|
@ -40,6 +42,16 @@ export function setFileState(file: unknown) {
|
|||
triggerEvent('filechange', file);
|
||||
}
|
||||
|
||||
export function setSelection(selectionId: string) {
|
||||
if (selectionId === selection) {
|
||||
return;
|
||||
}
|
||||
|
||||
selection = selectionId;
|
||||
|
||||
triggerEvent('selectionchange', selectionId);
|
||||
}
|
||||
|
||||
export function createApi() {
|
||||
const closePlugin = () => {
|
||||
if (modal) {
|
||||
|
|
@ -108,6 +120,9 @@ export function createApi() {
|
|||
getPageState: () => {
|
||||
return pageState;
|
||||
},
|
||||
getSelection: () => {
|
||||
return selection;
|
||||
},
|
||||
};
|
||||
|
||||
return penpot;
|
||||
|
|
|
|||
Loading…
Reference in a new issue