diff --git a/apps/create-palette-plugin/src/plugin.ts b/apps/create-palette-plugin/src/plugin.ts index cb817a7..83aa86b 100644 --- a/apps/create-palette-plugin/src/plugin.ts +++ b/apps/create-palette-plugin/src/plugin.ts @@ -20,23 +20,23 @@ function createPalette() { const width = cols * 200 + Math.max(0, cols - 1) * 10 + 20; const height = rows * 100 + Math.max(0, rows - 1) * 10 + 20; - const frame = penpot.createBoard(); - frame.name = 'Palette'; + const board = penpot.createBoard(); + board.name = 'Palette'; const viewport = penpot.viewport; - frame.x = viewport.center.x - width / 2; - frame.y = viewport.center.y - height / 2; + board.x = viewport.center.x - width / 2; + board.y = viewport.center.y - height / 2; if (colors.length === 0) { // NO colors return return; } - frame.resize(width, height); - frame.borderRadius = 8; + board.resize(width, height); + board.borderRadius = 8; // create grid - const grid = frame.addGridLayout(); + const grid = board.addGridLayout(); for (let i = 0; i < rows; i++) { grid.addRow('flex', 1); diff --git a/apps/e2e/src/plugins.spec.ts b/apps/e2e/src/plugins.spec.ts index 5a3e5be..ba42e06 100644 --- a/apps/e2e/src/plugins.spec.ts +++ b/apps/e2e/src/plugins.spec.ts @@ -1,15 +1,15 @@ -import { Agent } from './utils/agent'; -import testingPlugin from './plugins/create-frame-text-rect'; +import componentLibrary from './plugins/component-library'; +import testingPlugin from './plugins/create-board-text-rect'; import flex from './plugins/create-flexlayout'; import grid from './plugins/create-gridlayout'; +import createText from './plugins/create-text'; import group from './plugins/group'; import insertSvg from './plugins/insert-svg'; import pluginData from './plugins/plugin-data'; -import componentLibrary from './plugins/component-library'; -import createText from './plugins/create-text'; +import { Agent } from './utils/agent'; describe('Plugins', () => { - it('create frame - text - rectable', async () => { + it('create board - text - rectable', async () => { const agent = await Agent(); const result = await agent.runCode(testingPlugin.toString()); expect(result).toMatchSnapshot(); diff --git a/apps/e2e/src/plugins/create-frame-text-rect.ts b/apps/e2e/src/plugins/create-board-text-rect.ts similarity index 95% rename from apps/e2e/src/plugins/create-frame-text-rect.ts rename to apps/e2e/src/plugins/create-board-text-rect.ts index 32717b3..1dd2e67 100644 --- a/apps/e2e/src/plugins/create-frame-text-rect.ts +++ b/apps/e2e/src/plugins/create-board-text-rect.ts @@ -41,7 +41,7 @@ export default function () { board.resize(300, 300); - const text = penpot.createText('Hello from frame'); + const text = penpot.createText('Hello from board'); if (!text) { throw new Error('Could not create text'); diff --git a/apps/e2e/src/plugins/create-flexlayout.ts b/apps/e2e/src/plugins/create-flexlayout.ts index 9655bca..46abbc1 100644 --- a/apps/e2e/src/plugins/create-flexlayout.ts +++ b/apps/e2e/src/plugins/create-flexlayout.ts @@ -1,10 +1,10 @@ export default function () { function createFlexLayout(): void { - const frame = penpot.createBoard(); - frame.horizontalSizing = 'auto'; - frame.verticalSizing = 'auto'; + const board = penpot.createBoard(); + board.horizontalSizing = 'auto'; + board.verticalSizing = 'auto'; - const flex = frame.addFlexLayout(); + const flex = board.addFlexLayout(); flex.dir = 'column'; flex.wrap = 'wrap'; @@ -15,8 +15,8 @@ export default function () { flex.horizontalSizing = 'fill'; flex.verticalSizing = 'fill'; - frame.appendChild(penpot.createRectangle()); - frame.appendChild(penpot.createEllipse()); + board.appendChild(penpot.createRectangle()); + board.appendChild(penpot.createEllipse()); } createFlexLayout(); diff --git a/apps/e2e/src/plugins/create-gridlayout.ts b/apps/e2e/src/plugins/create-gridlayout.ts index 8ada8b2..c31ef4c 100644 --- a/apps/e2e/src/plugins/create-gridlayout.ts +++ b/apps/e2e/src/plugins/create-gridlayout.ts @@ -1,8 +1,8 @@ export default function () { function createGridLayout(): void { - const frame = penpot.createBoard(); + const board = penpot.createBoard(); - const grid = frame.addGridLayout(); + const grid = board.addGridLayout(); grid.addRow('flex', 1); grid.addRow('flex', 1); diff --git a/apps/poc-state-plugin/src/plugin.ts b/apps/poc-state-plugin/src/plugin.ts index 8e66188..d8b704b 100644 --- a/apps/poc-state-plugin/src/plugin.ts +++ b/apps/poc-state-plugin/src/plugin.ts @@ -221,16 +221,16 @@ function addIcon() { } function createGrid() { - const frame = penpot.createBoard(); - frame.name = 'Frame Grid'; + const board = penpot.createBoard(); + board.name = 'Board Grid'; const viewport = penpot.viewport; - frame.x = viewport.center.x - 150; - frame.y = viewport.center.y - 200; - frame.resize(300, 400); + board.x = viewport.center.x - 150; + board.y = viewport.center.y - 200; + board.resize(300, 400); // create grid - const grid = frame.addGridLayout(); + const grid = board.addGridLayout(); const [numRows, numCols] = GRID; for (let i = 0; i < numRows; i++) { @@ -263,12 +263,12 @@ function createGrid() { } function createColors() { - const frame = penpot.createBoard(); - frame.name = 'Palette'; + const board = penpot.createBoard(); + board.name = 'Palette'; const viewport = penpot.viewport; - frame.x = viewport.center.x - 150; - frame.y = viewport.center.y - 200; + board.x = viewport.center.x - 150; + board.y = viewport.center.y - 200; const colors = penpot.library.local.colors.sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase() @@ -289,11 +289,11 @@ function createColors() { const width = cols * 150 + Math.max(0, cols - 1) * 10 + 20; const height = rows * 100 + Math.max(0, rows - 1) * 10 + 20; - frame.resize(width, height); - frame.borderRadius = 8; + board.resize(width, height); + board.borderRadius = 8; // create grid - const grid = frame.addGridLayout(); + const grid = board.addGridLayout(); for (let i = 0; i < rows; i++) { grid.addRow('auto'); @@ -313,7 +313,7 @@ function createColors() { grid.horizontalPadding = 10; // These properties are not mandatory, if not defined will apply the default values - frame.shadows = [ + board.shadows = [ { style: 'drop-shadow', offsetX: 5, diff --git a/apps/table-plugin/src/plugin.ts b/apps/table-plugin/src/plugin.ts index 96e9fc1..f2587f0 100644 --- a/apps/table-plugin/src/plugin.ts +++ b/apps/table-plugin/src/plugin.ts @@ -20,17 +20,17 @@ penpot.ui.onMessage((message) => { numCols = message.content.new.column; } - const frame = penpot.createBoard(); - frame.name = 'Table'; + const board = penpot.createBoard(); + board.name = 'Table'; const viewport = penpot.viewport; - frame.x = viewport.center.x - 150; - frame.y = viewport.center.y - 200; - frame.resize(numCols * 160, numRows * 50); - frame.borderRadius = 8; + board.x = viewport.center.x - 150; + board.y = viewport.center.y - 200; + board.resize(numCols * 160, numRows * 50); + board.borderRadius = 8; // create grid - const grid = frame.addGridLayout(); + const grid = board.addGridLayout(); for (let i = 0; i < numRows; i++) { grid.addRow('flex', 1); diff --git a/docs/test-e2e.md b/docs/test-e2e.md index c58d131..1a16d2f 100644 --- a/docs/test-e2e.md +++ b/docs/test-e2e.md @@ -26,11 +26,11 @@ Place your test files in the `/apps/e2e/src/**/*.spec.ts` directory. Below is an example of a test file: ```ts - import testingPlugin from './plugins/create-frame-text-rect'; + import testingPlugin from './plugins/create-board-text-rect'; import { Agent } from './utils/agent'; describe('Plugins', () => { - it('create frame - text - rectangle', async () => { + it('create board - text - rectangle', async () => { const agent = await Agent(); const result = await agent.runCode(testingPlugin.toString()); diff --git a/libs/plugin-types/index.d.ts b/libs/plugin-types/index.d.ts index dae429e..0a00515 100644 --- a/libs/plugin-types/index.d.ts +++ b/libs/plugin-types/index.d.ts @@ -3149,7 +3149,7 @@ export interface RulerGuide { readonly orientation: RulerGuideOrientation; /** - * `position` is the position in the axis in absolute positioning. If this is a frame + * `position` is the position in the axis in absolute positioning. If this is a board * guide will return the positioning relative to the board. */ position: number;