mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-06 14:50:21 -05:00
refactor: remove old state plugin
This commit is contained in:
alonso.torres
Alonso Torres
parent
7597514506
commit
811f55ec31
18 changed files with 0 additions and 527 deletions
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"presets": ["@nx/js/babel"]
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"extends": ["../../.eslintrc.json"],
|
||||
"ignorePatterns": ["!**/*", "vite.config.ts"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"project": "./apps/poc-state-read-plugin/tsconfig.app.json"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"jsc": {
|
||||
"parser": {
|
||||
"syntax": "typescript"
|
||||
},
|
||||
"target": "es2016"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>State Read Plugin</title>
|
||||
<base href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/src/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"name": "poc-state-read-plugin",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "application",
|
||||
"sourceRoot": "apps/poc-state-read-plugin/src",
|
||||
"tags": ["type:plugin"],
|
||||
"targets": {}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "POC State Read",
|
||||
"code": "http://localhost:4202/plugin.js",
|
||||
"permissions": [
|
||||
"page:read",
|
||||
"file:read",
|
||||
"selection:read"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
html {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
line-height: 1.5;
|
||||
tab-size: 4;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: currentColor;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
'Liberation Mono', 'Courier New', monospace;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
svg {
|
||||
shape-rendering: auto;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block-end: var(--spacing-12);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
margin-block-end: var(--spacing-12);
|
||||
}
|
||||
|
||||
.help {
|
||||
color: #6b7280;
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
padding-inline-start: var(--spacing-12);
|
||||
}
|
||||
|
||||
.name-wrap {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.name-wrap input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.actions-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
/* eslint-disable */
|
||||
import 'plugins-styles/lib/styles.css';
|
||||
import './app.element.css';
|
||||
|
||||
export class AppElement extends HTMLElement {
|
||||
public static observedAttributes = [];
|
||||
#selection = [];
|
||||
#pageId = null;
|
||||
#fileId = null;
|
||||
#revn = 0;
|
||||
|
||||
#nameSubmit = null;
|
||||
#nameInput = null;
|
||||
#createRectBtn = null;
|
||||
#moveXBtn = null;
|
||||
#moveYBtn = null;
|
||||
#resizeWBtn = null;
|
||||
#resizeHBtn = null;
|
||||
#loremIpsumBtn = null;
|
||||
|
||||
refreshPage(pageId: string, name: string) {
|
||||
const projectName = document.getElementById('project-name');
|
||||
this.#pageId = pageId;
|
||||
|
||||
if (projectName) {
|
||||
projectName.innerText = name;
|
||||
}
|
||||
}
|
||||
|
||||
refreshSelection(selection: PenpotShape[]) {
|
||||
this.#selection = selection;
|
||||
if (selection && selection.length > 0) {
|
||||
this.#nameInput.value = this.#selection[0].name;
|
||||
} else {
|
||||
this.#nameInput.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<div class="wrapper">
|
||||
<h1>Test area!</h1>
|
||||
|
||||
<p>Current project name: <span id="project-name">Unknown</span></p>
|
||||
|
||||
<div class="name-wrap">
|
||||
<label>Selected Shape: </label>
|
||||
<input id="name-input" type="text"></input>
|
||||
<button id="name-submit" type="button">Update</button>
|
||||
</div>
|
||||
|
||||
<div class="actions-wrap">
|
||||
<button id="create-rect" type="button">+Rect</button>
|
||||
<button id="move-x" type="button">Move X</button>
|
||||
<button id="move-y" type="button">Move Y</button>
|
||||
<button id="resize-w" type="button">Resize W</button>
|
||||
<button id="resize-h" type="button">Resize H</button>
|
||||
<button id="lorem-ipsum" type="button">Lorem Ipsum</button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<button type="button" data-appearance="primary" data-variant="destructive" class="act-close-plugin">Close plugin</button>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.#nameSubmit = document.getElementById<HTMLElement>('name-submit');
|
||||
this.#nameInput = document.getElementById<HTMLElement>('name-input');
|
||||
|
||||
this.#createRectBtn = document.getElementById<HTMLElement>('create-rect');
|
||||
this.#moveXBtn = document.getElementById<HTMLElement>('move-x');
|
||||
this.#moveYBtn = document.getElementById<HTMLElement>('move-y');
|
||||
this.#resizeWBtn = document.getElementById<HTMLElement>('resize-w');
|
||||
this.#resizeHBtn = document.getElementById<HTMLElement>('resize-h');
|
||||
this.#loremIpsumBtn = document.getElementById<HTMLElement>('lorem-ipsum');
|
||||
console.log(this.#loremIpsumBtn);
|
||||
|
||||
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<HTMLElement>('.act-close-plugin');
|
||||
closeAction?.addEventListener('click', () => {
|
||||
parent.postMessage({ content: 'close' }, '*');
|
||||
});
|
||||
|
||||
parent.postMessage({ content: 'ready' }, '*');
|
||||
|
||||
this.#nameSubmit?.addEventListener('click', (e) => {
|
||||
const id = this.#selection[0].id;
|
||||
const name = this.#nameInput.value;
|
||||
parent.postMessage({ content: 'change-name', data: { id, name } }, '*');
|
||||
});
|
||||
|
||||
this.#createRectBtn?.addEventListener('click', (e) => {
|
||||
parent.postMessage({ content: 'create-rect' }, '*');
|
||||
});
|
||||
|
||||
this.#moveXBtn?.addEventListener('click', (e) => {
|
||||
const id = this.#selection[0].id;
|
||||
parent.postMessage({ content: 'move-x', data: { id } }, '*');
|
||||
});
|
||||
|
||||
this.#moveYBtn?.addEventListener('click', (e) => {
|
||||
const id = this.#selection[0].id;
|
||||
parent.postMessage({ content: 'move-y', data: { id } }, '*');
|
||||
});
|
||||
|
||||
this.#resizeWBtn?.addEventListener('click', (e) => {
|
||||
const id = this.#selection[0].id;
|
||||
parent.postMessage({ content: 'resize-w', data: { id } }, '*');
|
||||
});
|
||||
|
||||
this.#resizeHBtn?.addEventListener('click', (e) => {
|
||||
const id = this.#selection[0].id;
|
||||
parent.postMessage({ content: 'resize-h', data: { id } }, '*');
|
||||
});
|
||||
|
||||
this.#loremIpsumBtn?.addEventListener('click', (e) => {
|
||||
console.log(">>");
|
||||
parent.postMessage({ content: 'lorem-ipsum' }, '*');
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
customElements.define('app-root', AppElement);
|
||||
|
|
@ -1 +0,0 @@
|
|||
import './app/app.element';
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
penpot.ui.open('Plugin name', 'http://localhost:4202', {
|
||||
width: 500,
|
||||
height: 600,
|
||||
});
|
||||
|
||||
penpot.ui.onMessage<{ content: string; data: unknown }>((message) => {
|
||||
if (message.content === 'close') {
|
||||
penpot.closePlugin();
|
||||
} else if (message.content === 'ready') {
|
||||
const page = penpot.getPage();
|
||||
const file = penpot.getFile();
|
||||
|
||||
if (!page || !file) {
|
||||
return;
|
||||
}
|
||||
|
||||
penpot.ui.sendMessage({
|
||||
type: 'init',
|
||||
content: {
|
||||
name: page.name,
|
||||
pageId: page.id,
|
||||
fileId: file.id,
|
||||
revn: file.revn,
|
||||
theme: penpot.getTheme(),
|
||||
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;
|
||||
}
|
||||
} else if (message.content === 'create-rect') {
|
||||
const shape = penpot.createRectangle();
|
||||
penpot.log(shape);
|
||||
} else if (message.content === 'move-x') {
|
||||
const shape = penpot
|
||||
.getPage()
|
||||
?.getShapeById('' + (message.data as { id: string }).id);
|
||||
if (shape) {
|
||||
shape.x += 100;
|
||||
}
|
||||
} else if (message.content === 'move-y') {
|
||||
const shape = penpot
|
||||
.getPage()
|
||||
?.getShapeById('' + (message.data as { id: string }).id);
|
||||
if (shape) {
|
||||
shape.y += 100;
|
||||
}
|
||||
} else if (message.content === 'resize-w') {
|
||||
const shape = penpot
|
||||
.getPage()
|
||||
?.getShapeById('' + (message.data as { id: string }).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);
|
||||
if (shape) {
|
||||
shape.resize(shape.width, shape.height * 2);
|
||||
}
|
||||
} else if (message.content === 'lorem-ipsum') {
|
||||
const selection = penpot.selection;
|
||||
|
||||
for (const shape of selection) {
|
||||
if (penpot.utils.types.isText(shape)) {
|
||||
shape.characters = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id mauris ut felis finibus congue. Ut odio ipsum, condimentum id tellus sit amet, dapibus sagittis ligula. Pellentesque hendrerit, nulla sit amet aliquet scelerisque, orci nunc commodo tellus, quis hendrerit nisl massa non tellus.
|
||||
|
||||
Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imperdiet ante. Nunc eros magna, tincidunt non finibus in, tempor elementum nunc. Sed commodo magna in arcu aliquam efficitur.`;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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();
|
||||
penpot.ui.sendMessage({
|
||||
type: 'file',
|
||||
content: {
|
||||
id: file.id,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
penpot.on('selectionchange', () => {
|
||||
const selection = penpot.getSelectedShapes();
|
||||
penpot.ui.sendMessage({ type: 'selection', content: { selection } });
|
||||
});
|
||||
|
||||
penpot.on('themechange', (theme) => {
|
||||
penpot.ui.sendMessage({ type: 'theme', content: theme });
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": ["node"]
|
||||
},
|
||||
"exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
|
||||
"include": ["src/**/*.ts", "../../libs/plugin-types/index.d.ts"]
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"files": [],
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ESNext", "DOM"],
|
||||
"moduleResolution": "Node",
|
||||
"strict": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"noEmit": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"skipLibCheck": true,
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": [
|
||||
"vitest/globals",
|
||||
"vitest/importMeta",
|
||||
"vite/client",
|
||||
"node",
|
||||
"vitest"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts",
|
||||
"vitest.config.ts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
/// <reference types='vitest' />
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
|
||||
|
||||
export default defineConfig({
|
||||
root: __dirname,
|
||||
cacheDir: '../../node_modules/.vite/apps/example-plugin',
|
||||
|
||||
server: {
|
||||
port: 4200,
|
||||
host: 'localhost',
|
||||
},
|
||||
|
||||
preview: {
|
||||
port: 4202,
|
||||
host: 'localhost',
|
||||
},
|
||||
|
||||
plugins: [nxViteTsPaths()],
|
||||
|
||||
// Uncomment this if you are using workers.
|
||||
// worker: {
|
||||
// plugins: [ nxViteTsPaths() ],
|
||||
// },
|
||||
|
||||
build: {
|
||||
outDir: '../../dist/apps/poc-state-read-plugin',
|
||||
reportCompressedSize: true,
|
||||
commonjsOptions: {
|
||||
transformMixedEsModules: true,
|
||||
},
|
||||
rollupOptions: {
|
||||
input: {
|
||||
plugin: 'src/plugin.ts',
|
||||
index: './index.html',
|
||||
},
|
||||
output: {
|
||||
entryFileNames: '[name].js',
|
||||
},
|
||||
},
|
||||
sourcemap: true,
|
||||
},
|
||||
|
||||
test: {
|
||||
globals: true,
|
||||
cache: {
|
||||
dir: '../../node_modules/.vitest',
|
||||
},
|
||||
environment: 'jsdom',
|
||||
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
||||
|
||||
reporters: ['default'],
|
||||
coverage: {
|
||||
reportsDirectory: '../../coverage/apps/poc-state-read-plugin',
|
||||
provider: 'v8',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
"scripts": {
|
||||
"start": "npx nx run plugins-runtime:build --watch --mode development & npx nx run plugins-runtime:preview",
|
||||
"start:example": "npx nx run example-plugin:build --watch & npx nx run example-plugin:preview",
|
||||
"start:read-plugin": "npx nx run poc-state-read-plugin:build --watch & npx nx run poc-state-read-plugin:preview",
|
||||
"start:pc-plugin": "npx nx run-many --targets=buildPlugin,serve --projects=poc-state-plugin --watch",
|
||||
"start:contrast-plugin": "npx nx run contrast-plugin:build --watch & npx nx run contrast-plugin:preview",
|
||||
"start:rpc-api": "npx nx serve rpc-api",
|
||||
|
|
|
|||
Loading…
Reference in a new issue