mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-22 14:49:27 -05:00
chore(poc-state-plugin): refactor poc plugin
This commit is contained in:
alonso.torres
Alonso Torres
parent
0776ca671c
commit
fcf1e98200
2 changed files with 346 additions and 282 deletions
|
|
@ -83,6 +83,13 @@ import type { PenpotShape } from '@penpot/plugin-types';
|
|||
>
|
||||
WORDS STYLES
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-appearance="secondary"
|
||||
(click)="rotateShapes()"
|
||||
>
|
||||
Rotate
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
|
@ -205,6 +212,10 @@ export class AppComponent {
|
|||
this.#sendMessage({ content: 'word-styles' });
|
||||
}
|
||||
|
||||
rotateShapes() {
|
||||
this.#sendMessage({ content: 'rotate-selection' });
|
||||
}
|
||||
|
||||
#sendMessage(message: unknown) {
|
||||
parent.postMessage(message, '*');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,74 @@ penpot.ui.onMessage<{ content: string; data: unknown }>((message) => {
|
|||
if (message.content === 'close') {
|
||||
penpot.closePlugin();
|
||||
} else if (message.content === 'ready') {
|
||||
init();
|
||||
} else if (message.content === 'change-name') {
|
||||
changeName(message.data as { id: string; name: string });
|
||||
} else if (message.content === 'create-rect') {
|
||||
createRect();
|
||||
} else if (message.content === 'move-x') {
|
||||
moveX(message.data as { id: string });
|
||||
} else if (message.content === 'move-y') {
|
||||
moveY(message.data as { id: string });
|
||||
} else if (message.content === 'resize-w') {
|
||||
resizeW(message.data as { id: string });
|
||||
} else if (message.content === 'resize-h') {
|
||||
resizeH(message.data as { id: string });
|
||||
} else if (message.content === 'lorem-ipsum') {
|
||||
loremIpsum();
|
||||
} else if (message.content === 'add-icon') {
|
||||
addIcon();
|
||||
} else if (message.content === 'create-grid') {
|
||||
createGrid();
|
||||
} else if (message.content === 'create-colors') {
|
||||
createColors();
|
||||
} else if (message.content === 'increase-counter') {
|
||||
increaseCounter();
|
||||
} else if (message.content === 'word-styles') {
|
||||
wordStyles();
|
||||
} else if (message.content === 'rotate-selection') {
|
||||
rotateSelection();
|
||||
}
|
||||
});
|
||||
|
||||
penpot.on('pagechange', () => {
|
||||
const page = penpot.getPage();
|
||||
const shapes = page?.findShapes();
|
||||
|
||||
penpot.ui.sendMessage({
|
||||
type: 'page',
|
||||
content: { page, shapes },
|
||||
});
|
||||
});
|
||||
|
||||
penpot.on('filechange', () => {
|
||||
const file = penpot.getFile();
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
penpot.ui.sendMessage({
|
||||
type: 'file',
|
||||
content: {
|
||||
id: file.id,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
penpot.on('selectionchange', () => {
|
||||
const selection = penpot.getSelectedShapes();
|
||||
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) => {
|
||||
penpot.ui.sendMessage({ type: 'theme', content: theme });
|
||||
});
|
||||
|
||||
function init() {
|
||||
const page = penpot.getPage();
|
||||
const file = penpot.getFile();
|
||||
|
||||
|
|
@ -33,47 +101,51 @@ penpot.ui.onMessage<{ content: string; data: unknown }>((message) => {
|
|||
counter,
|
||||
},
|
||||
});
|
||||
} else if (message.content === 'change-name') {
|
||||
const shape = penpot
|
||||
.getPage()
|
||||
?.getShapeById('' + (message.data as { id: string }).id);
|
||||
}
|
||||
|
||||
function changeName(data: { id: string; name: string }) {
|
||||
const shape = penpot.getPage()?.getShapeById('' + data.id);
|
||||
if (shape) {
|
||||
shape.name = (message.data as { name: string }).name;
|
||||
shape.name = data.name;
|
||||
}
|
||||
} else if (message.content === 'create-rect') {
|
||||
}
|
||||
|
||||
function createRect() {
|
||||
const shape = penpot.createRectangle();
|
||||
const center = penpot.viewport.center;
|
||||
shape.x = center.x;
|
||||
shape.y = center.y;
|
||||
} else if (message.content === 'move-x') {
|
||||
const shape = penpot
|
||||
.getPage()
|
||||
?.getShapeById('' + (message.data as { id: string }).id);
|
||||
}
|
||||
|
||||
function moveX(data: { id: string }) {
|
||||
const shape = penpot.getPage()?.getShapeById('' + data.id);
|
||||
if (shape) {
|
||||
shape.x += 100;
|
||||
}
|
||||
} else if (message.content === 'move-y') {
|
||||
const shape = penpot
|
||||
.getPage()
|
||||
?.getShapeById('' + (message.data as { id: string }).id);
|
||||
}
|
||||
|
||||
function moveY(data: { id: string }) {
|
||||
const shape = penpot.getPage()?.getShapeById('' + data.id);
|
||||
if (shape) {
|
||||
shape.y += 100;
|
||||
}
|
||||
} else if (message.content === 'resize-w') {
|
||||
const shape = penpot
|
||||
.getPage()
|
||||
?.getShapeById('' + (message.data as { id: string }).id);
|
||||
}
|
||||
|
||||
function resizeW(data: { id: string }) {
|
||||
const shape = penpot.getPage()?.getShapeById('' + data.id);
|
||||
if (shape) {
|
||||
shape.resize(shape.width * 2, shape.height);
|
||||
}
|
||||
} else if (message.content === 'resize-h') {
|
||||
const shape = penpot
|
||||
.getPage()
|
||||
?.getShapeById('' + (message.data as { id: string }).id);
|
||||
}
|
||||
|
||||
function resizeH(data: { id: string }) {
|
||||
const shape = penpot.getPage()?.getShapeById('' + data.id);
|
||||
if (shape) {
|
||||
shape.resize(shape.width, shape.height * 2);
|
||||
}
|
||||
} else if (message.content === 'lorem-ipsum') {
|
||||
}
|
||||
|
||||
function loremIpsum() {
|
||||
const selection = penpot.selection;
|
||||
|
||||
for (const shape of selection) {
|
||||
|
|
@ -95,7 +167,9 @@ Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imper
|
|||
.catch((err) => console.error(err));
|
||||
}
|
||||
}
|
||||
} else if (message.content === 'add-icon') {
|
||||
}
|
||||
|
||||
function addIcon() {
|
||||
const iconStr = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="32"
|
||||
|
|
@ -126,7 +200,9 @@ Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imper
|
|||
const center = penpot.viewport.center;
|
||||
shape.x = center.x;
|
||||
shape.y = center.y;
|
||||
} else if (message.content === 'create-grid') {
|
||||
}
|
||||
|
||||
function createGrid() {
|
||||
const frame = penpot.createFrame();
|
||||
frame.name = 'Frame Grid';
|
||||
|
||||
|
|
@ -164,7 +240,9 @@ Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imper
|
|||
grid.appendChild(text, row + 1, col + 1);
|
||||
}
|
||||
}
|
||||
} else if (message.content === 'create-colors') {
|
||||
}
|
||||
|
||||
function createColors() {
|
||||
const frame = penpot.createFrame();
|
||||
frame.name = 'Palette';
|
||||
|
||||
|
|
@ -260,7 +338,9 @@ Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imper
|
|||
board.appendChild(text);
|
||||
}
|
||||
}
|
||||
} else if (message.content === 'increase-counter') {
|
||||
}
|
||||
|
||||
function increaseCounter() {
|
||||
const selection = penpot.selection;
|
||||
const data: string | null =
|
||||
selection.length === 1 ? selection[0].getPluginData('counter') : null;
|
||||
|
|
@ -269,7 +349,9 @@ Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imper
|
|||
|
||||
selection[0].setPluginData('counter', '' + counter);
|
||||
penpot.ui.sendMessage({ type: 'update-counter', content: { counter } });
|
||||
} else if (message.content === 'word-styles') {
|
||||
}
|
||||
|
||||
function wordStyles() {
|
||||
const selection = penpot.selection;
|
||||
|
||||
if (selection.length >= 1 && penpot.utils.types.isText(selection[0])) {
|
||||
|
|
@ -303,42 +385,13 @@ Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imper
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
penpot.on('pagechange', () => {
|
||||
const page = penpot.getPage();
|
||||
const shapes = page?.findShapes();
|
||||
function rotateSelection() {
|
||||
const selection = penpot.selection;
|
||||
const center = penpot.utils.geometry.center(selection);
|
||||
|
||||
penpot.ui.sendMessage({
|
||||
type: 'page',
|
||||
content: { page, shapes },
|
||||
selection.forEach((shape) => {
|
||||
shape.rotate(10, center);
|
||||
});
|
||||
});
|
||||
|
||||
penpot.on('filechange', () => {
|
||||
const file = penpot.getFile();
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
penpot.ui.sendMessage({
|
||||
type: 'file',
|
||||
content: {
|
||||
id: file.id,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
penpot.on('selectionchange', () => {
|
||||
const selection = penpot.getSelectedShapes();
|
||||
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) => {
|
||||
penpot.ui.sendMessage({ type: 'theme', content: theme });
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue