@@ -404,7 +448,10 @@ function buildExample(){
// CRUD — 노드
// ════════════════════════════════════════════════════════
function addTopNode(){
- S.nodes.push(mkNode()); refresh(); focusNew('.name-inp');
+ const node=mkNode();
+ S.nodes.push(node);
+ selectedNodeId=node.id;
+ refresh();
}
function deleteNode(nid){
const vid=valNodeMap[nid];
@@ -432,7 +479,9 @@ function addValue(nid, type){
if(!type) return;
const n=nodeMap[nid]; if(!n) return;
const v = type==='node' ? mkNodeVal() : mkScalarVal(type);
- n.values.push(v); refresh();
+ n.values.push(v);
+ if(type==='node') selectedNodeId=v.node.id;
+ refresh();
}
function removeValue(vid){
const e=valueMap[vid]; if(!e) return;
@@ -497,76 +546,168 @@ function removeAttr(nid, key){
// ════════════════════════════════════════════════════════
// 헬퍼
// ════════════════════════════════════════════════════════
-function refresh(){ rebuildMaps(); renderPanel(); updatePreview(); save(); }
-function focusNew(sel){ setTimeout(()=>{ const els=document.querySelectorAll(sel); if(els.length) els[els.length-1].focus(); },40); }
+function refresh(){ rebuildMaps(); renderCanvas(); renderDetail(); updatePreview(); save(); }
function esc(s){ return String(s??'').replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"') }
// 입력값의 \n \t → 실제 문자 / 실제 문자 → 표시용 이스케이프
function unesc(s){ return s.replace(/\\n/g,'\n').replace(/\\t/g,'\t').replace(/\\r/g,'\r') }
function reesc(s){ return s.replace(/\r/g,'\\r').replace(/\n/g,'\\n').replace(/\t/g,'\\t') }
// ════════════════════════════════════════════════════════
-// 렌더링
+// 캔버스 레이아웃
// ════════════════════════════════════════════════════════
-function renderPanel(){
+let selectedNodeId = null;
+const C_W=164, C_H=54, C_COL=252, C_ROW=72, C_PAD=28;
+
+function subtreeH(node){
+ const kids=node.values.filter(v=>v.type==='node').map(v=>v.node);
+ if(!kids.length) return 1;
+ return kids.reduce((s,c)=>s+subtreeH(c),0);
+}
+
+function computeLayout(){
+ const pos=new Map();
+ function place(node,col,ySlot){
+ const kids=node.values.filter(v=>v.type==='node').map(v=>v.node);
+ const h=subtreeH(node);
+ pos.set(node.id,{x:C_PAD+col*C_COL, y:C_PAD+C_ROW*(ySlot+h/2)-C_H/2});
+ let y=ySlot;
+ for(const kid of kids){ place(kid,col+1,y); y+=subtreeH(kid); }
+ }
+ let y=0;
+ for(const node of S.nodes){ place(node,0,y); y+=subtreeH(node); }
+ return pos;
+}
+
+function renderCanvas(){
rebuildMaps();
document.getElementById('rootMark').value=S.titleMark;
document.getElementById('docTitle').value=S.title;
- document.getElementById('nodeList').innerHTML=S.nodes.map(n=>renderNode(n,false)).join('');
+
+ if(S.nodes.length===0){
+ document.getElementById('canvasNodes').innerHTML=
+ `
🌱
노드가 없습니다
위의 ＋ 노드 추가 버튼으로 시작하세요
`;
+ document.getElementById('canvasSvg').innerHTML='';
+ return;
+ }
+
+ const pos=computeLayout();
+ const wrap=document.getElementById('canvasWrap');
+ const inner=document.getElementById('canvasInner');
+ let maxX=wrap.clientWidth||600, maxY=wrap.clientHeight||400;
+ pos.forEach(({x,y})=>{ maxX=Math.max(maxX,x+C_W+C_PAD); maxY=Math.max(maxY,y+C_H+C_PAD); });
+ inner.style.width=maxX+'px'; inner.style.height=maxY+'px';
+
+ // SVG 연결선
+ let paths='';
+ function drawLines(node){
+ const p=pos.get(node.id); if(!p) return;
+ const px=p.x+C_W, py=p.y+C_H/2;
+ const kids=node.values.filter(v=>v.type==='node').map(v=>v.node);
+ for(const kid of kids){
+ const c=pos.get(kid.id); if(!c) continue;
+ const cx=c.x, cy=c.y+C_H/2;
+ const mx=(px+cx)/2;
+ const sel=(node.id===selectedNodeId||kid.id===selectedNodeId);
+ paths+=`
`;
+ drawLines(kid);
+ }
+ }
+ for(const node of S.nodes) drawLines(node);
+ const svg=document.getElementById('canvasSvg');
+ svg.style.width=maxX+'px'; svg.style.height=maxY+'px';
+ svg.setAttribute('viewBox',`0 0 ${maxX} ${maxY}`);
+ svg.innerHTML=paths;
+
+ // 노드 카드
+ let cards='';
+ function renderCNode(node){
+ const p=pos.get(node.id); if(!p) return;
+ const sel=node.id===selectedNodeId;
+ const vals=node.values.filter(v=>v.type!=='node').length;
+ const kids=node.values.filter(v=>v.type==='node').length;
+ const hint=[vals?`값 ${vals}`:'',kids?`하위 ${kids}`:''].filter(Boolean).join(' · ')||'비어있음';
+ cards+=`
+
+ ${esc(node.mark||'·')}
+ ${esc(node.content||'이름 없음')}
+
+
+
`;
+ for(const v of node.values) if(v.type==='node') renderCNode(v.node);
+ }
+ for(const node of S.nodes) renderCNode(node);
+ document.getElementById('canvasNodes').innerHTML=cards;
}
-function renderNode(node, nested){
- const valueItems=node.values.map(v=>renderValue(node.id,v)).join('');
+function selectNode(nid){
+ selectedNodeId=nid;
+ renderCanvas();
+ renderDetail();
+}
+
+function addChildNode(parentNid){
+ const parent=nodeMap[parentNid]; if(!parent) return;
+ const child=mkNode();
+ parent.values.push(mkNodeVal(child));
+ selectedNodeId=child.id;
+ refresh();
+}
+
+function deleteFromCanvas(nid){
+ if(nid===selectedNodeId) selectedNodeId=null;
+ deleteNode(nid);
+}
+
+function renderDetail(){
+ const panel=document.getElementById('detailPanel'); if(!panel) return;
+ if(!selectedNodeId||!nodeMap[selectedNodeId]){
+ panel.innerHTML='
← 노드를 클릭하면
상세 편집이 여기에 표시됩니다
';
+ return;
+ }
+ const node=nodeMap[selectedNodeId];
+ const valItems=node.values.map(v=>renderValue(node.id,v)).join('');
const typeOpts=VALUE_TYPES.map(t=>`
`).join('');
const availSet=SETTING_OPTIONS.filter(o=>!(o.v in node.settings));
const setOpts=availSet.map(o=>`
`).join('');
const settingItems=Object.entries(node.settings).map(([k,v])=>renderSetting(node.id,k,v)).join('');
-
- return `
-
-
-
-
-
-
-
-
+ panel.innerHTML=`
+
📌 노드 편집
+
+
+
+
+
+
+
+
+
+
+
+ 값
+
+
+ ${valItems?`
${valItems}
`:'
값 없음 — 위에서 추가
'}
- ${!node.hidden?`
-
-
-
-
- 값
-
-
- ${valueItems
- ?`
${valueItems}
`
- :'
값 없음 — 위에서 추가
'}
+
+
+ 노드 설정
+ ${availSet.length?``:''}
-
-
-
- 노드 설정
- ${availSet.length
- ?``:''}
-
-
- ${renderStructSettings(node)}
- ${settingItems}
-
-
-
`:''}
+
${renderStructSettings(node)}${settingItems}
+
`;
}
@@ -577,7 +718,17 @@ function renderValue(nid, val){
`;
if(val.type==='node'){
- return `
${renderNode(val.node,true)}
`;
+ const cn=val.node;
+ return `
+
+ NODE
+ ${esc((cn.mark||'')+' '+(cn.content||'이름 없음'))}
+
+
+
+
+
+
`;
}
const typeLbl=VALUE_TYPES.find(t=>t.v===val.type)?.lbl??val.type.toUpperCase();
@@ -910,9 +1061,7 @@ function switchTab(name){
// 초기화
// ════════════════════════════════════════════════════════
load();
-rebuildMaps();
-renderPanel();
-updatePreview();
+refresh();
document.getElementById('importModal').addEventListener('click',e=>{ if(e.target===e.currentTarget) closeImport(); });
document.addEventListener('keydown',e=>{ if(e.key==='Escape') closeImport(); });