SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

fix(demo): align app preview header button

Browse source
This commit is contained in:
Danila Poyarkov 2026-05-17 01:34:40 +03:00
parent 6954ff3ce7
commit aee208b34a
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/demo/sections/app-preview.ts
View file

@ -71,8 +71,10 @@ export function createAppPreviewSection(
fills: [solid(BLACK)]
})
graph.createInstance(badgeCompId, headerId)
graph.createInstance(btnCompId, headerId)
const badgeInstance = graph.createInstance(badgeCompId, headerId)
if (badgeInstance) graph.updateNode(badgeInstance.id, { x: 264, y: 15 })
const buttonInstance = graph.createInstance(btnCompId, headerId)
if (buttonInstance) graph.updateNode(buttonInstance.id, { x: 324, y: 6 })
const stats = [
{ title: 'Revenue', value: '$12,480', badge: '+14%', color: GREEN },

12
src/app/demo/sections/components.ts
View file

@ -24,14 +24,14 @@ export function createComponentsSection(store: EditorStore) {
const compSectionId = store.createShape('SECTION', 60, 60, 920, 540)
graph.updateNode(compSectionId, { name: 'Components' })
const btnId = store.createShape('FRAME', 32, 48, 160, 72, compSectionId)
const btnId = store.createShape('FRAME', 32, 76, 120, 40, compSectionId)
graph.updateNode(btnId, {
name: 'Button/Primary',
fills: [],
strokes: [],
clipsContent: false
})
const btnSurfaceId = store.createShape('FRAME', 0, 28, 120, 40, btnId)
const btnSurfaceId = store.createShape('FRAME', 0, 0, 120, 40, btnId)
graph.updateNode(btnSurfaceId, {
name: 'Surface',
cornerRadius: 8,
@ -57,14 +57,14 @@ export function createComponentsSection(store: EditorStore) {
})
const btnCompId = makeComponent(store, [btnId])
const btn2Id = store.createShape('FRAME', 216, 48, 160, 72, compSectionId)
const btn2Id = store.createShape('FRAME', 216, 76, 100, 40, compSectionId)
graph.updateNode(btn2Id, {
name: 'Button/Secondary',
fills: [],
strokes: [],
clipsContent: false
})
const btn2SurfaceId = store.createShape('FRAME', 0, 28, 100, 40, btn2Id)
const btn2SurfaceId = store.createShape('FRAME', 0, 0, 100, 40, btn2Id)
graph.updateNode(btn2SurfaceId, {
name: 'Surface',
cornerRadius: 8,
@ -95,8 +95,8 @@ export function createComponentsSection(store: EditorStore) {
store.createComponentSetFromComponents()
const buttonSetId = [...store.state.selectedIds][0]
graph.updateNode(buttonSetId, { x: 32, y: 44, width: 400, height: 136, fills: [] })
graph.updateNode(btnCompId, { x: 40, y: 36 })
graph.updateNode(btn2CompId, { x: 224, y: 36 })
graph.updateNode(btnCompId, { x: 40, y: 64 })
graph.updateNode(btn2CompId, { x: 224, y: 64 })
const chipId = store.createShape('FRAME', 500, 72, 80, 28, compSectionId)
graph.updateNode(chipId, {