Add Code tab with JSX export and syntax highlighting
- sceneNodeToJsx() in @open-pencil/core: converts SceneNode subtree to JSX - CodePanel.vue with Prism.js highlighting, line numbers, copy button - Third tab in properties panel: Design | Code | AI - 14 new tests covering shapes, text, layout, effects, multi-selection
This commit is contained in:
Danila Poyarkov
parent
bf8636c677
commit
c59d5fc397
19
PLAN.md
19
PLAN.md
|
|
@ -1368,13 +1368,18 @@ interface CommentPin {
|
|||
|
||||
#### Implementation order
|
||||
|
||||
1. JSX renderer in `@open-pencil/core` (port from figma-use)
|
||||
2. Chat panel UI — `ChatPanel.vue`, `useChat()`, message list, tool timeline, `⌘J` toggle
|
||||
3. API key settings — input UI, Stronghold storage (Tauri) / localStorage (browser)
|
||||
4. Core tools — render, set_fill, set_layout, set_text, snapshot, get_selection
|
||||
5. Screenshot + diff tools
|
||||
6. Comment pin system
|
||||
7. Full tool set (remaining 118 tools)
|
||||
1. ✅ JSX renderer in `@open-pencil/core` (port from figma-use)
|
||||
2. ✅ Chat panel UI — `ChatPanel.vue`, `useChat()`, message list, tool timeline, `⌘J` toggle
|
||||
3. Code panel — "Code" tab in properties panel, JSX export with syntax highlighting
|
||||
- `sceneNodeToJsx()` in `packages/core/src/render/export-jsx.ts` (reverse of renderer.ts)
|
||||
- `CodePanel.vue` with Prism.js highlighting, copy button, reka-ui ScrollArea
|
||||
- Third tab in PropertiesPanel: Design | Code | AI
|
||||
- Subtree export: full JSX tree for selection, multi-selection separated by blank lines
|
||||
4. API key settings — input UI, Stronghold storage (Tauri) / localStorage (browser)
|
||||
5. Core tools — render, set_fill, set_layout, set_text, snapshot, get_selection
|
||||
6. Screenshot + diff tools
|
||||
7. Comment pin system
|
||||
8. Full tool set (remaining 118 tools)
|
||||
|
||||
#### Validation
|
||||
|
||||
|
|
|
|||
6
bun.lock
6
bun.lock
|
|
@ -24,6 +24,7 @@
|
|||
"dedent": "^1.7.1",
|
||||
"fflate": "^0.8.2",
|
||||
"fzstd": "^0.1.1",
|
||||
"prismjs": "^1.30.0",
|
||||
"reka-ui": "^2.8.2",
|
||||
"tailwindcss": "^4.2.1",
|
||||
"valibot": "^1.2.0",
|
||||
|
|
@ -37,6 +38,7 @@
|
|||
"@tauri-apps/cli": "^2",
|
||||
"@types/culori": "^4.0.1",
|
||||
"@types/node": "^25.3.2",
|
||||
"@types/prismjs": "^1.26.6",
|
||||
"@typescript/native-preview": "^7.0.0-dev.20260228.1",
|
||||
"@vitejs/plugin-vue": "^6.0.4",
|
||||
"esbuild": "^0.27.3",
|
||||
|
|
@ -433,6 +435,8 @@
|
|||
|
||||
"@types/node": ["@types/node@25.3.2", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-RpV6r/ij22zRRdyBPcxDeKAzH43phWVKEjL2iksqo1Vz3CuBUrgmPpPhALKiRfU7OMCmeeO9vECBMsV0hMTG8Q=="],
|
||||
|
||||
"@types/prismjs": ["@types/prismjs@1.26.6", "", {}, "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw=="],
|
||||
|
||||
"@types/sarif": ["@types/sarif@2.1.7", "", {}, "sha512-kRz0VEkJqWLf1LLVN4pT1cg1Z9wAuvI6L97V3m2f5B76Tg8d413ddvLBPTEHAZJlnn4XSvu0FkZtViCQGVyrXQ=="],
|
||||
|
||||
"@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
|
||||
|
|
@ -855,6 +859,8 @@
|
|||
|
||||
"postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
|
||||
|
||||
"prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
|
||||
|
||||
"promise": ["promise@7.3.1", "", { "dependencies": { "asap": "~2.0.3" } }, "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg=="],
|
||||
|
||||
"pug": ["pug@3.0.3", "", { "dependencies": { "pug-code-gen": "^3.0.3", "pug-filters": "^4.0.0", "pug-lexer": "^5.0.1", "pug-linker": "^4.0.0", "pug-load": "^3.0.0", "pug-parser": "^6.0.0", "pug-runtime": "^3.0.1", "pug-strip-comments": "^2.0.0" } }, "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g=="],
|
||||
|
|
|
|||
3
components.d.ts
vendored
3
components.d.ts
vendored
|
|
@ -18,6 +18,7 @@ declare module 'vue' {
|
|||
ChatInput: typeof import('./src/components/chat/ChatInput.vue')['default']
|
||||
ChatMessage: typeof import('./src/components/chat/ChatMessage.vue')['default']
|
||||
ChatPanel: typeof import('./src/components/ChatPanel.vue')['default']
|
||||
CodePanel: typeof import('./src/components/CodePanel.vue')['default']
|
||||
ColorInput: typeof import('./src/components/ColorInput.vue')['default']
|
||||
ColorPicker: typeof import('./src/components/ColorPicker.vue')['default']
|
||||
DesignPanel: typeof import('./src/components/DesignPanel.vue')['default']
|
||||
|
|
@ -45,6 +46,8 @@ declare module 'vue' {
|
|||
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
|
||||
IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
|
||||
IconLucideCircleDot: typeof import('~icons/lucide/circle-dot')['default']
|
||||
IconLucideCode: typeof import('~icons/lucide/code')['default']
|
||||
IconLucideCopy: typeof import('~icons/lucide/copy')['default']
|
||||
IconLucideEye: typeof import('~icons/lucide/eye')['default']
|
||||
IconLucideEyeOff: typeof import('~icons/lucide/eye-off')['default']
|
||||
IconLucideFile: typeof import('~icons/lucide/file')['default']
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
"dedent": "^1.7.1",
|
||||
"fflate": "^0.8.2",
|
||||
"fzstd": "^0.1.1",
|
||||
"prismjs": "^1.30.0",
|
||||
"reka-ui": "^2.8.2",
|
||||
"tailwindcss": "^4.2.1",
|
||||
"valibot": "^1.2.0",
|
||||
|
|
@ -55,6 +56,7 @@
|
|||
"@tauri-apps/cli": "^2",
|
||||
"@types/culori": "^4.0.1",
|
||||
"@types/node": "^25.3.2",
|
||||
"@types/prismjs": "^1.26.6",
|
||||
"@typescript/native-preview": "^7.0.0-dev.20260228.1",
|
||||
"@vitejs/plugin-vue": "^6.0.4",
|
||||
"esbuild": "^0.27.3",
|
||||
|
|
|
|||
|
|
@ -112,7 +112,9 @@ export {
|
|||
type BaseProps,
|
||||
type TextProps,
|
||||
type StyleProps,
|
||||
type RenderResult
|
||||
type RenderResult,
|
||||
sceneNodeToJsx,
|
||||
selectionToJsx
|
||||
} from './render'
|
||||
export {
|
||||
parseFigmaClipboard,
|
||||
|
|
|
|||
280
packages/core/src/render/export-jsx.ts
Normal file
280
packages/core/src/render/export-jsx.ts
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
import { colorToHex } from '../color'
|
||||
|
||||
import type { SceneGraph, SceneNode, Fill, Stroke, Effect, NodeType, Color } from '../scene-graph'
|
||||
|
||||
const NODE_TYPE_TO_TAG: Partial<Record<NodeType, string>> = {
|
||||
FRAME: 'Frame',
|
||||
RECTANGLE: 'Rectangle',
|
||||
ROUNDED_RECTANGLE: 'Rectangle',
|
||||
ELLIPSE: 'Ellipse',
|
||||
TEXT: 'Text',
|
||||
LINE: 'Line',
|
||||
STAR: 'Star',
|
||||
POLYGON: 'Polygon',
|
||||
VECTOR: 'Vector',
|
||||
GROUP: 'Group',
|
||||
SECTION: 'Section',
|
||||
COMPONENT: 'Component',
|
||||
COMPONENT_SET: 'Frame',
|
||||
INSTANCE: 'Frame'
|
||||
}
|
||||
|
||||
function formatColor(color: Color, opacity = 1): string {
|
||||
const hex = colorToHex(color)
|
||||
if (opacity < 1) return hex + Math.round(opacity * 255).toString(16).padStart(2, '0')
|
||||
return hex
|
||||
}
|
||||
|
||||
function solidFillColor(fills: Fill[]): string | null {
|
||||
const visible = fills.filter((f) => f.visible && f.type === 'SOLID')
|
||||
if (visible.length !== 1) return null
|
||||
return formatColor(visible[0].color, visible[0].opacity)
|
||||
}
|
||||
|
||||
function solidStroke(strokes: Stroke[]): { color: string; weight: number } | null {
|
||||
const visible = strokes.filter((s) => s.visible)
|
||||
if (visible.length !== 1) return null
|
||||
return {
|
||||
color: formatColor(visible[0].color, visible[0].opacity),
|
||||
weight: visible[0].weight
|
||||
}
|
||||
}
|
||||
|
||||
function formatShadow(e: Effect): string | null {
|
||||
if (e.type !== 'DROP_SHADOW' && e.type !== 'INNER_SHADOW') return null
|
||||
return `${e.offset.x} ${e.offset.y} ${e.radius} ${formatColor(e.color, e.color.a)}`
|
||||
}
|
||||
|
||||
function formatProp(key: string, value: unknown): string {
|
||||
if (typeof value === 'string') return `${key}="${value}"`
|
||||
if (typeof value === 'number') return `${key}={${value}}`
|
||||
if (typeof value === 'boolean') return value ? key : `${key}={false}`
|
||||
return `${key}={${JSON.stringify(value)}}`
|
||||
}
|
||||
|
||||
function collectProps(node: SceneNode, graph: SceneGraph): [string, unknown][] {
|
||||
const props: [string, unknown][] = []
|
||||
|
||||
if (node.name && node.name !== node.type) {
|
||||
props.push(['name', node.name])
|
||||
}
|
||||
|
||||
if (node.layoutMode !== 'NONE') {
|
||||
props.push(['flex', node.layoutMode === 'HORIZONTAL' ? 'row' : 'col'])
|
||||
}
|
||||
|
||||
const isAutoLayout = node.layoutMode !== 'NONE'
|
||||
const parent = node.parentId ? graph.getNode(node.parentId) : null
|
||||
const parentIsAutoLayout = parent ? parent.layoutMode !== 'NONE' : false
|
||||
|
||||
if (isAutoLayout) {
|
||||
const primaryAxis = node.layoutMode === 'HORIZONTAL' ? 'width' : 'height'
|
||||
const crossAxis = node.layoutMode === 'HORIZONTAL' ? 'height' : 'width'
|
||||
|
||||
if (node.primaryAxisSizing === 'HUG') {
|
||||
/* hug is default with flex, omit */
|
||||
} else if (node.primaryAxisSizing === 'FILL') {
|
||||
props.push([primaryAxis === 'width' ? 'w' : 'h', 'fill'])
|
||||
} else {
|
||||
props.push([primaryAxis === 'width' ? 'w' : 'h', node[primaryAxis]])
|
||||
}
|
||||
|
||||
if (node.counterAxisSizing === 'HUG') {
|
||||
/* hug is default, omit */
|
||||
} else if (node.counterAxisSizing === 'FILL') {
|
||||
props.push([crossAxis === 'width' ? 'w' : 'h', 'fill'])
|
||||
} else {
|
||||
props.push([crossAxis === 'width' ? 'w' : 'h', node[crossAxis]])
|
||||
}
|
||||
} else {
|
||||
if (node.width > 0) props.push(['w', node.width])
|
||||
if (node.height > 0) props.push(['h', node.height])
|
||||
}
|
||||
|
||||
if (parentIsAutoLayout && node.layoutGrow > 0) {
|
||||
props.push(['grow', node.layoutGrow])
|
||||
}
|
||||
|
||||
if (isAutoLayout && node.itemSpacing > 0) {
|
||||
props.push(['gap', node.itemSpacing])
|
||||
}
|
||||
|
||||
if (isAutoLayout && node.layoutWrap === 'WRAP') {
|
||||
props.push(['wrap', true])
|
||||
if (node.counterAxisSpacing > 0) {
|
||||
props.push(['rowGap', node.counterAxisSpacing])
|
||||
}
|
||||
}
|
||||
|
||||
if (isAutoLayout) {
|
||||
if (node.primaryAxisAlign === 'CENTER') props.push(['justify', 'center'])
|
||||
else if (node.primaryAxisAlign === 'MAX') props.push(['justify', 'end'])
|
||||
else if (node.primaryAxisAlign === 'SPACE_BETWEEN') props.push(['justify', 'between'])
|
||||
|
||||
if (node.counterAxisAlign === 'CENTER') props.push(['items', 'center'])
|
||||
else if (node.counterAxisAlign === 'MAX') props.push(['items', 'end'])
|
||||
else if (node.counterAxisAlign === 'STRETCH') props.push(['items', 'stretch'])
|
||||
}
|
||||
|
||||
if (isAutoLayout) {
|
||||
const { paddingTop: pt, paddingRight: pr, paddingBottom: pb, paddingLeft: pl } = node
|
||||
if (pt > 0 || pr > 0 || pb > 0 || pl > 0) {
|
||||
if (pt === pr && pr === pb && pb === pl) {
|
||||
props.push(['p', pt])
|
||||
} else if (pt === pb && pl === pr) {
|
||||
props.push(['py', pt])
|
||||
props.push(['px', pl])
|
||||
} else {
|
||||
if (pt > 0) props.push(['pt', pt])
|
||||
if (pr > 0) props.push(['pr', pr])
|
||||
if (pb > 0) props.push(['pb', pb])
|
||||
if (pl > 0) props.push(['pl', pl])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const bg = solidFillColor(node.fills)
|
||||
if (bg) props.push(['bg', bg])
|
||||
|
||||
const stroke = solidStroke(node.strokes)
|
||||
if (stroke) {
|
||||
props.push(['stroke', stroke.color])
|
||||
if (stroke.weight !== 1) props.push(['strokeWidth', stroke.weight])
|
||||
}
|
||||
|
||||
if (node.cornerRadius > 0) {
|
||||
if (node.independentCorners) {
|
||||
const { topLeftRadius: tl, topRightRadius: tr, bottomRightRadius: br, bottomLeftRadius: bl } = node
|
||||
if (tl === tr && tr === br && br === bl) {
|
||||
props.push(['rounded', tl])
|
||||
} else {
|
||||
if (tl > 0) props.push(['roundedTL', tl])
|
||||
if (tr > 0) props.push(['roundedTR', tr])
|
||||
if (br > 0) props.push(['roundedBR', br])
|
||||
if (bl > 0) props.push(['roundedBL', bl])
|
||||
}
|
||||
} else {
|
||||
props.push(['rounded', node.cornerRadius])
|
||||
}
|
||||
}
|
||||
|
||||
if (node.cornerSmoothing > 0) props.push(['cornerSmoothing', node.cornerSmoothing])
|
||||
if (node.opacity < 1) props.push(['opacity', Math.round(node.opacity * 100) / 100])
|
||||
if (node.rotation !== 0) props.push(['rotate', Math.round(node.rotation * 100) / 100])
|
||||
if (node.blendMode !== 'PASS_THROUGH' && node.blendMode !== 'NORMAL') {
|
||||
props.push(['blendMode', node.blendMode.toLowerCase()])
|
||||
}
|
||||
if (node.clipsContent) props.push(['overflow', 'hidden'])
|
||||
|
||||
for (const effect of node.effects) {
|
||||
if (!effect.visible) continue
|
||||
if (effect.type === 'DROP_SHADOW' || effect.type === 'INNER_SHADOW') {
|
||||
const shadow = formatShadow(effect)
|
||||
if (shadow) props.push(['shadow', shadow])
|
||||
} else if (effect.type === 'LAYER_BLUR' || effect.type === 'BACKGROUND_BLUR') {
|
||||
props.push(['blur', effect.radius])
|
||||
}
|
||||
}
|
||||
|
||||
if (node.type === 'TEXT') {
|
||||
if (node.fontSize !== 14) props.push(['size', node.fontSize])
|
||||
if (node.fontFamily && node.fontFamily !== 'Inter') props.push(['font', node.fontFamily])
|
||||
if (node.fontWeight !== 400) {
|
||||
if (node.fontWeight === 700) props.push(['weight', 'bold'])
|
||||
else if (node.fontWeight === 500) props.push(['weight', 'medium'])
|
||||
else props.push(['weight', node.fontWeight])
|
||||
}
|
||||
if (node.textAlignHorizontal !== 'LEFT') {
|
||||
props.push(['textAlign', node.textAlignHorizontal.toLowerCase()])
|
||||
}
|
||||
const textColor = solidFillColor(node.fills)
|
||||
if (textColor) {
|
||||
const bgIdx = props.findIndex(([k]) => k === 'bg')
|
||||
if (bgIdx !== -1) props.splice(bgIdx, 1)
|
||||
props.push(['color', textColor])
|
||||
}
|
||||
}
|
||||
|
||||
if (node.type === 'STAR') {
|
||||
if (node.pointCount !== 5) props.push(['points', node.pointCount])
|
||||
if (node.starInnerRadius !== 0.382) props.push(['innerRadius', node.starInnerRadius])
|
||||
}
|
||||
if (node.type === 'POLYGON' && node.pointCount !== 3) {
|
||||
props.push(['points', node.pointCount])
|
||||
}
|
||||
|
||||
return props
|
||||
}
|
||||
|
||||
function nodeToJsx(
|
||||
node: SceneNode,
|
||||
graph: SceneGraph,
|
||||
indent: number
|
||||
): string {
|
||||
const tag = NODE_TYPE_TO_TAG[node.type]
|
||||
if (!tag) return ''
|
||||
|
||||
const prefix = ' '.repeat(indent)
|
||||
const props = collectProps(node, graph)
|
||||
const propsStr = props.map(([k, v]) => formatProp(k, v)).join(' ')
|
||||
const opening = propsStr ? `<${tag} ${propsStr}` : `<${tag}`
|
||||
|
||||
const children = graph.getChildren(node.id)
|
||||
const isText = node.type === 'TEXT'
|
||||
|
||||
if (isText) {
|
||||
const text = node.text
|
||||
if (!text) return `${prefix}${opening} />`
|
||||
const escaped = text.replace(/[{}<>&]/g, (c) =>
|
||||
c === '{' ? '{' : c === '}' ? '}' : c === '<' ? '<' : c === '>' ? '>' : '&'
|
||||
)
|
||||
if (!escaped.includes('\n')) {
|
||||
return `${prefix}${opening}>${escaped}</${tag}>`
|
||||
}
|
||||
const lines = escaped.split('\n')
|
||||
const parts = [
|
||||
`${prefix}${opening}>`,
|
||||
...lines.map((l) => `${prefix} ${l}`),
|
||||
`${prefix}</${tag}>`
|
||||
]
|
||||
return parts.join('\n')
|
||||
}
|
||||
|
||||
if (children.length === 0) {
|
||||
return `${prefix}${opening} />`
|
||||
}
|
||||
|
||||
const childJsx = children
|
||||
.filter((c) => c.visible)
|
||||
.map((c) => nodeToJsx(c, graph, indent + 1))
|
||||
.filter(Boolean)
|
||||
|
||||
if (childJsx.length === 0) {
|
||||
return `${prefix}${opening} />`
|
||||
}
|
||||
|
||||
return [
|
||||
`${prefix}${opening}>`,
|
||||
...childJsx,
|
||||
`${prefix}</${tag}>`
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function sceneNodeToJsx(
|
||||
nodeId: string,
|
||||
graph: SceneGraph
|
||||
): string {
|
||||
const node = graph.getNode(nodeId)
|
||||
if (!node) return ''
|
||||
return nodeToJsx(node, graph, 0)
|
||||
}
|
||||
|
||||
export function selectionToJsx(
|
||||
nodeIds: string[],
|
||||
graph: SceneGraph
|
||||
): string {
|
||||
return nodeIds
|
||||
.map((id) => sceneNodeToJsx(id, graph))
|
||||
.filter(Boolean)
|
||||
.join('\n\n')
|
||||
}
|
||||
|
|
@ -22,3 +22,5 @@ export { type TreeNode, type BaseProps, type TextProps, type StyleProps, isTreeN
|
|||
export { renderTree, type RenderResult } from './renderer'
|
||||
|
||||
export { renderJsx, renderTreeNode, buildComponent } from './render-jsx'
|
||||
|
||||
export { sceneNodeToJsx, selectionToJsx } from './export-jsx'
|
||||
|
|
|
|||
106
src/components/CodePanel.vue
Normal file
106
src/components/CodePanel.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<script setup lang="ts">
|
||||
import Prism from 'prismjs'
|
||||
import 'prismjs/components/prism-jsx'
|
||||
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import { selectionToJsx } from '@open-pencil/core'
|
||||
import { useEditorStore } from '@/stores/editor'
|
||||
|
||||
const store = useEditorStore()
|
||||
const copied = ref(false)
|
||||
|
||||
const jsxCode = computed(() => {
|
||||
void store.state.sceneVersion
|
||||
const ids = [...store.state.selectedIds]
|
||||
if (ids.length === 0) return ''
|
||||
return selectionToJsx(ids, store.graph)
|
||||
})
|
||||
|
||||
const highlightedLines = computed(() => {
|
||||
if (!jsxCode.value) return []
|
||||
const grammar = Prism.languages.jsx ?? Prism.languages.javascript
|
||||
return jsxCode.value
|
||||
.split('\n')
|
||||
.map((line) => Prism.highlight(line, grammar, 'jsx'))
|
||||
})
|
||||
|
||||
let copyTimeout: ReturnType<typeof setTimeout> | undefined
|
||||
|
||||
function copyCode() {
|
||||
navigator.clipboard.writeText(jsxCode.value)
|
||||
copied.value = true
|
||||
clearTimeout(copyTimeout)
|
||||
copyTimeout = setTimeout(() => (copied.value = false), 2000)
|
||||
}
|
||||
|
||||
watch(jsxCode, () => {
|
||||
copied.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!jsxCode" class="flex flex-1 items-center justify-center px-4 text-center">
|
||||
<span class="text-xs text-muted">Select a layer to see its JSX code</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex min-h-0 flex-1 flex-col">
|
||||
<div class="flex shrink-0 items-center justify-between border-b border-border px-3 py-1.5">
|
||||
<span class="text-[11px] text-muted">JSX</span>
|
||||
<button
|
||||
class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-muted hover:bg-hover hover:text-surface"
|
||||
@click="copyCode"
|
||||
>
|
||||
<icon-lucide-check v-if="copied" class="size-3 text-green-400" />
|
||||
<icon-lucide-copy v-else class="size-3" />
|
||||
{{ copied ? 'Copied' : 'Copy' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ScrollAreaRoot class="min-h-0 flex-1">
|
||||
<ScrollAreaViewport class="size-full">
|
||||
<div class="p-3">
|
||||
<div
|
||||
v-for="(html, i) in highlightedLines"
|
||||
:key="i"
|
||||
class="flex text-xs leading-5"
|
||||
>
|
||||
<span
|
||||
class="mr-3 shrink-0 select-none text-right text-muted/40"
|
||||
style="min-width: 1.5em"
|
||||
>{{ i + 1 }}</span>
|
||||
<pre class="m-0 min-w-0 flex-1 whitespace-pre-wrap break-words"><code v-html="html" /></pre>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollAreaViewport>
|
||||
<ScrollAreaScrollbar orientation="vertical" class="flex w-1.5 touch-none select-none p-px">
|
||||
<ScrollAreaThumb class="relative flex-1 rounded-full bg-white/10" />
|
||||
</ScrollAreaScrollbar>
|
||||
</ScrollAreaRoot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.token.tag {
|
||||
color: #7dd3fc;
|
||||
}
|
||||
.token.attr-name {
|
||||
color: #c4b5fd;
|
||||
}
|
||||
.token.attr-value,
|
||||
.token.string {
|
||||
color: #86efac;
|
||||
}
|
||||
.token.number {
|
||||
color: #fca5a5;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #888;
|
||||
}
|
||||
.token.boolean {
|
||||
color: #fca5a5;
|
||||
}
|
||||
.token.keyword {
|
||||
color: #c4b5fd;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,6 +5,7 @@ import { useAIChat } from '@/composables/use-chat'
|
|||
import { useEditorStore } from '@/stores/editor'
|
||||
|
||||
import ChatPanel from './ChatPanel.vue'
|
||||
import CodePanel from './CodePanel.vue'
|
||||
import DesignPanel from './DesignPanel.vue'
|
||||
|
||||
const store = useEditorStore()
|
||||
|
|
@ -24,6 +25,13 @@ const { activeTab } = useAIChat(store)
|
|||
>
|
||||
Design
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="code"
|
||||
class="flex items-center gap-1 rounded px-2.5 py-1 text-xs text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface"
|
||||
>
|
||||
<icon-lucide-code class="size-3" />
|
||||
Code
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="ai"
|
||||
class="flex items-center gap-1 rounded px-2.5 py-1 text-xs text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface"
|
||||
|
|
@ -48,6 +56,15 @@ const { activeTab } = useAIChat(store)
|
|||
<DesignPanel />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent
|
||||
value="code"
|
||||
class="flex min-h-0 flex-1 flex-col"
|
||||
:force-mount="true"
|
||||
:hidden="activeTab !== 'code'"
|
||||
>
|
||||
<CodePanel />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent
|
||||
value="ai"
|
||||
class="flex min-h-0 flex-1 flex-col"
|
||||
|
|
|
|||
|
|
@ -77,5 +77,3 @@ export async function loadFont(family: string, style = 'Regular'): Promise<Array
|
|||
|
||||
return loadFontCore(family, style)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
293
tests/engine/export-jsx.test.ts
Normal file
293
tests/engine/export-jsx.test.ts
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
import { describe, expect, test } from 'bun:test'
|
||||
|
||||
import { SceneGraph, sceneNodeToJsx, selectionToJsx } from '@open-pencil/core'
|
||||
|
||||
function makeGraph() {
|
||||
const graph = new SceneGraph()
|
||||
graph.createNode('CANVAS', graph.rootId, { name: 'Page 1' })
|
||||
return graph
|
||||
}
|
||||
|
||||
function pageId(graph: SceneGraph) {
|
||||
return graph.getPages()[0].id
|
||||
}
|
||||
|
||||
describe('sceneNodeToJsx', () => {
|
||||
test('basic rectangle', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||||
name: 'Box',
|
||||
width: 100,
|
||||
height: 50
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).toBe('<Rectangle name="Box" w={100} h={50} />')
|
||||
})
|
||||
|
||||
test('rectangle with fill and rounded corners', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||||
name: 'Card',
|
||||
width: 320,
|
||||
height: 200,
|
||||
fills: [{ type: 'SOLID', color: { r: 1, g: 1, b: 1, a: 1 }, opacity: 1, visible: true }],
|
||||
cornerRadius: 16
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).toContain('w={320}')
|
||||
expect(jsx).toContain('h={200}')
|
||||
expect(jsx).toContain('bg="#FFFFFF"')
|
||||
expect(jsx).toContain('rounded={16}')
|
||||
expect(jsx).toContain('<Rectangle')
|
||||
expect(jsx).toContain('/>')
|
||||
})
|
||||
|
||||
test('text node', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('TEXT', pageId(graph), {
|
||||
name: 'Title',
|
||||
width: 200,
|
||||
height: 24,
|
||||
text: 'Hello World',
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
fills: [
|
||||
{ type: 'SOLID', color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1, visible: true }
|
||||
]
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).toContain('<Text')
|
||||
expect(jsx).toContain('size={18}')
|
||||
expect(jsx).toContain('weight="bold"')
|
||||
expect(jsx).toContain('color="#000000"')
|
||||
expect(jsx).toContain('>Hello World</Text>')
|
||||
})
|
||||
|
||||
test('frame with auto-layout', () => {
|
||||
const graph = makeGraph()
|
||||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||||
name: 'Row',
|
||||
width: 400,
|
||||
height: 100,
|
||||
layoutMode: 'HORIZONTAL',
|
||||
itemSpacing: 16,
|
||||
paddingTop: 12,
|
||||
paddingRight: 12,
|
||||
paddingBottom: 12,
|
||||
paddingLeft: 12,
|
||||
primaryAxisSizing: 'FIXED',
|
||||
counterAxisSizing: 'HUG'
|
||||
})
|
||||
const jsx = sceneNodeToJsx(frame.id, graph)
|
||||
expect(jsx).toContain('flex="row"')
|
||||
expect(jsx).toContain('gap={16}')
|
||||
expect(jsx).toContain('p={12}')
|
||||
expect(jsx).toContain('w={400}')
|
||||
})
|
||||
|
||||
test('frame with children', () => {
|
||||
const graph = makeGraph()
|
||||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||||
name: 'Card',
|
||||
width: 320,
|
||||
height: 200,
|
||||
layoutMode: 'VERTICAL',
|
||||
itemSpacing: 8,
|
||||
primaryAxisSizing: 'HUG',
|
||||
counterAxisSizing: 'FIXED'
|
||||
})
|
||||
graph.createNode('RECTANGLE', frame.id, {
|
||||
name: 'Image',
|
||||
width: 320,
|
||||
height: 120
|
||||
})
|
||||
graph.createNode('TEXT', frame.id, {
|
||||
name: 'Title',
|
||||
width: 200,
|
||||
height: 20,
|
||||
text: 'Card Title',
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
fills: [
|
||||
{ type: 'SOLID', color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1, visible: true }
|
||||
]
|
||||
})
|
||||
|
||||
const jsx = sceneNodeToJsx(frame.id, graph)
|
||||
expect(jsx).toContain('<Frame')
|
||||
expect(jsx).toContain('flex="col"')
|
||||
expect(jsx).toContain('gap={8}')
|
||||
expect(jsx).toContain(' <Rectangle')
|
||||
expect(jsx).toContain(' <Text')
|
||||
expect(jsx).toContain('>Card Title</Text>')
|
||||
expect(jsx).toContain('</Frame>')
|
||||
})
|
||||
|
||||
test('asymmetric padding', () => {
|
||||
const graph = makeGraph()
|
||||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||||
name: 'Box',
|
||||
width: 100,
|
||||
height: 100,
|
||||
layoutMode: 'HORIZONTAL',
|
||||
paddingTop: 8,
|
||||
paddingRight: 16,
|
||||
paddingBottom: 8,
|
||||
paddingLeft: 16,
|
||||
primaryAxisSizing: 'FIXED',
|
||||
counterAxisSizing: 'FIXED'
|
||||
})
|
||||
const jsx = sceneNodeToJsx(frame.id, graph)
|
||||
expect(jsx).toContain('py={8}')
|
||||
expect(jsx).toContain('px={16}')
|
||||
expect(jsx).not.toContain('pt=')
|
||||
expect(jsx).not.toContain('pb=')
|
||||
})
|
||||
|
||||
test('independent corners', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||||
name: 'Pill',
|
||||
width: 100,
|
||||
height: 40,
|
||||
cornerRadius: 20,
|
||||
independentCorners: true,
|
||||
topLeftRadius: 20,
|
||||
topRightRadius: 0,
|
||||
bottomRightRadius: 0,
|
||||
bottomLeftRadius: 20
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).toContain('roundedTL={20}')
|
||||
expect(jsx).toContain('roundedBL={20}')
|
||||
expect(jsx).not.toContain('roundedTR=')
|
||||
expect(jsx).not.toContain('roundedBR=')
|
||||
})
|
||||
|
||||
test('opacity and rotation', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||||
width: 50,
|
||||
height: 50,
|
||||
opacity: 0.5,
|
||||
rotation: 45
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).toContain('opacity={0.5}')
|
||||
expect(jsx).toContain('rotate={45}')
|
||||
})
|
||||
|
||||
test('stroke', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||||
width: 100,
|
||||
height: 100,
|
||||
strokes: [
|
||||
{ color: { r: 1, g: 0, b: 0, a: 1 }, weight: 2, opacity: 1, visible: true, align: 'INSIDE' as const }
|
||||
]
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).toContain('stroke="#FF0000"')
|
||||
expect(jsx).toContain('strokeWidth={2}')
|
||||
})
|
||||
|
||||
test('hidden children are excluded', () => {
|
||||
const graph = makeGraph()
|
||||
const frame = graph.createNode('FRAME', pageId(graph), {
|
||||
name: 'Parent',
|
||||
width: 100,
|
||||
height: 100
|
||||
})
|
||||
graph.createNode('RECTANGLE', frame.id, {
|
||||
name: 'Visible',
|
||||
width: 50,
|
||||
height: 50
|
||||
})
|
||||
graph.createNode('RECTANGLE', frame.id, {
|
||||
name: 'Hidden',
|
||||
width: 50,
|
||||
height: 50,
|
||||
visible: false
|
||||
})
|
||||
const jsx = sceneNodeToJsx(frame.id, graph)
|
||||
expect(jsx).toContain('Visible')
|
||||
expect(jsx).not.toContain('Hidden')
|
||||
})
|
||||
|
||||
test('empty text node renders self-closing', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('TEXT', pageId(graph), {
|
||||
name: 'Empty',
|
||||
width: 100,
|
||||
height: 20,
|
||||
text: ''
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).toContain('/>')
|
||||
expect(jsx).not.toContain('</Text>')
|
||||
})
|
||||
|
||||
test('omits default values', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||||
width: 100,
|
||||
height: 100,
|
||||
opacity: 1,
|
||||
rotation: 0,
|
||||
cornerRadius: 0
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).not.toContain('opacity')
|
||||
expect(jsx).not.toContain('rotate')
|
||||
expect(jsx).not.toContain('rounded')
|
||||
})
|
||||
|
||||
test('effects: shadow and blur', () => {
|
||||
const graph = makeGraph()
|
||||
const node = graph.createNode('RECTANGLE', pageId(graph), {
|
||||
width: 100,
|
||||
height: 100,
|
||||
effects: [
|
||||
{
|
||||
type: 'DROP_SHADOW',
|
||||
color: { r: 0, g: 0, b: 0, a: 0.25 },
|
||||
offset: { x: 0, y: 4 },
|
||||
radius: 8,
|
||||
spread: 0,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
type: 'LAYER_BLUR',
|
||||
color: { r: 0, g: 0, b: 0, a: 0 },
|
||||
offset: { x: 0, y: 0 },
|
||||
radius: 4,
|
||||
spread: 0,
|
||||
visible: true
|
||||
}
|
||||
]
|
||||
})
|
||||
const jsx = sceneNodeToJsx(node.id, graph)
|
||||
expect(jsx).toContain('shadow="0 4 8')
|
||||
expect(jsx).toContain('blur={4}')
|
||||
})
|
||||
})
|
||||
|
||||
describe('selectionToJsx', () => {
|
||||
test('multiple nodes separated by blank lines', () => {
|
||||
const graph = makeGraph()
|
||||
const a = graph.createNode('RECTANGLE', pageId(graph), {
|
||||
name: 'A',
|
||||
width: 10,
|
||||
height: 10
|
||||
})
|
||||
const b = graph.createNode('ELLIPSE', pageId(graph), {
|
||||
name: 'B',
|
||||
width: 20,
|
||||
height: 20
|
||||
})
|
||||
const jsx = selectionToJsx([a.id, b.id], graph)
|
||||
expect(jsx).toContain('<Rectangle')
|
||||
expect(jsx).toContain('<Ellipse')
|
||||
expect(jsx).toContain('\n\n')
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue