98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
// Transform Obsidian canvas to Vue Flow elements
|
|
export const transformToFlowElements = (canvasData: any) => {
|
|
const nodes = (canvasData.nodes || []).map((node: any) => ({
|
|
id: node.id,
|
|
type: node.type === 'file' ? 'file' : node.type === 'ai' ? 'ai' : node.type === 'git' ? 'git' : node.type === 'task' ? 'task' : node.type === 'webhook' ? 'webhook' : 'text',
|
|
position: { x: Number(node.x) || 0, y: Number(node.y) || 0 },
|
|
data: {
|
|
...node,
|
|
width: node.width || 300,
|
|
height: node.height || 200,
|
|
label: node.label || node.text?.slice(0, 20) || node.file || 'Node',
|
|
// Ensure specific fields exist so the properties panel shows them
|
|
...(node.type === 'task' && {
|
|
text: node.text ?? '',
|
|
state: node.state ?? 'todo',
|
|
priority: node.priority ?? 'medium',
|
|
assigned_to: node.assigned_to ?? '',
|
|
start_date: node.start_date ?? '',
|
|
alarm: node.alarm ?? '',
|
|
script_id: node.script_id ?? ''
|
|
}),
|
|
...(node.type === 'text' && { text: node.text ?? '' }),
|
|
...(node.type === 'file' && { file: node.file ?? '' }),
|
|
...(node.type === 'ai' && { prompt: node.prompt ?? '' }),
|
|
...(node.type === 'webhook' && {
|
|
script_id: node.script_id ?? '',
|
|
url: node.url ?? '',
|
|
method: node.method ?? 'POST'
|
|
}),
|
|
...(node.type === 'git' && {
|
|
repo: node.repo ?? '',
|
|
branch: node.branch ?? 'main',
|
|
message: node.message ?? ''
|
|
})
|
|
},
|
|
style: {
|
|
width: `${node.width || 300}px`,
|
|
height: `${node.height || 200}px`,
|
|
background: node.style?.background || '#1e293b',
|
|
border: `1px solid ${node.style?.border || '#334155'}`,
|
|
borderRadius: '8px'
|
|
}
|
|
}))
|
|
|
|
const edges = (canvasData.edges || []).map((edge: any) => ({
|
|
id: edge.id,
|
|
source: edge.fromNode,
|
|
target: edge.toNode,
|
|
sourceHandle: edge.fromSide,
|
|
targetHandle: edge.toSide,
|
|
animated: true,
|
|
style: { stroke: '#475569', strokeWidth: 2 }
|
|
}))
|
|
|
|
return [...nodes, ...edges]
|
|
}
|
|
|
|
// Transform Vue Flow elements back to Obsidian canvas
|
|
export const transformToObsidianCanvas = (flowElements: any[]) => {
|
|
const nodes = flowElements.filter(el => el.position !== undefined).map(node => ({
|
|
id: node.id,
|
|
type: node.type === 'file' ? 'file' : node.type === 'task' ? 'task' : node.type === 'ai' ? 'ai' : node.type === 'webhook' ? 'webhook' : node.type === 'git' ? 'git' : 'text',
|
|
x: Math.round(Number(node.position.x) || 0),
|
|
y: Math.round(Number(node.position.y) || 0),
|
|
width: node.data.width || 300,
|
|
height: node.data.height || 200,
|
|
text: node.data.text,
|
|
label: node.data.label,
|
|
file: node.data.file,
|
|
state: node.data.state,
|
|
priority: node.data.priority,
|
|
assigned_to: node.data.assigned_to,
|
|
start_date: node.data.start_date,
|
|
alarm: node.data.alarm,
|
|
script_id: node.data.script_id,
|
|
prompt: node.data.prompt,
|
|
url: node.data.url,
|
|
method: node.data.method,
|
|
repo: node.data.repo,
|
|
branch: node.data.branch,
|
|
message: node.data.message,
|
|
style: {
|
|
background: node.style?.background || '#1e293b',
|
|
border: node.style?.border?.replace('1px solid ', '') || '#334155'
|
|
}
|
|
}))
|
|
|
|
const edges = flowElements.filter(el => el.source && el.target).map(edge => ({
|
|
id: edge.id,
|
|
fromNode: edge.source,
|
|
fromSide: edge.sourceHandle || 'right',
|
|
toNode: edge.target,
|
|
toSide: edge.targetHandle || 'left'
|
|
}))
|
|
|
|
return { nodes, edges }
|
|
}
|