\n \n \n

Genesis

Custom

Product

Commodity

\n Visible\n Invisible\n \n

\n Tap to place a component\n then link dependencies\n

\n Components 0\n ▾\n

Y: visibility to user (top = visible). X: evolution (left = novel, right = commodity). Link to show dependencies.

\n`,\n scripts: `\nlet S = getHS() || {\n comps: [\n { id:'c1', label:'User Need', x:50, y:7 },\n { id:'c2', label:'Web Application', x:35, y:22 },\n { id:'c3', label:'API Layer', x:48, y:40 },\n { id:'c4', label:'Authentication', x:72, y:52 },\n { id:'c5', label:'Database', x:62, y:68 },\n { id:'c6', label:'Cloud Hosting', x:88, y:82 }\n ],\n edges: [\n { from:'c1', to:'c2' },\n { from:'c2', to:'c3' },\n { from:'c2', to:'c4' },\n { from:'c3', to:'c5' },\n { from:'c5', to:'c6' },\n { from:'c4', to:'c6' }\n ]\n};\nlet nextId = 10;\nlet mode = 'move';\nlet selected = null;\nlet editing = null;\nlet linkSource = null;\n\nfunction dotColor(i) { return 'hsl('+Math.round((i*137.508+240)%360)+',55%,50%)'; }\n\nS.comps.forEach(c => { if(!c.id) c.id='c'+(nextId++); else { const x=parseInt(c.id.slice(1)); if(x>=nextId) nextId=x+1; } });\n\nconst canvas = document.getElementById('wm-canvas');\nconst edgesG = document.getElementById('wm-edges');\n\ndocument.querySelectorAll('.wm-mode-btn[data-mode]').forEach(btn => {\n btn.addEventListener('click', () => {\n mode=btn.dataset.mode; linkSource=null;\n document.querySelectorAll('.wm-mode-btn[data-mode]').forEach(b => b.classList.toggle('active',b===btn));\n canvas.style.cursor = mode==='move'?'crosshair':'pointer';\n });\n});\n\nlet cDown=null, cTime=0;\ncanvas.addEventListener('pointerdown', e => {\n if(e.target.closest('.wm-comp')) return;\n cDown={x:e.clientX,y:e.clientY}; cTime=Date.now();\n});\ncanvas.addEventListener('pointerup', e => {\n if(!cDown) return;\n const dx=e.clientX-cDown.x, dy=e.clientY-cDown.y, dt=Date.now()-cTime;\n cDown=null;\n if(Math.abs(dx)>8||Math.abs(dy)>8||dt>400) return;\n if(e.target.closest('.wm-comp')) return;\n if(mode==='move'){commitEdit();const r=canvas.getBoundingClientRect();addComp(((e.clientX-r.left)/r.width)*100,((e.clientY-r.top)/r.height)*100);}\n});\n\nfunction addComp(x,y){\n const id='c'+(nextId++);\n S.comps.push({id,label:'Component',x:Math.round(x*10)/10,y:Math.round(y*10)/10});\n selected=id; save(); renderComps(); rebuildList();\n document.getElementById('wm-list-section').classList.remove('collapsed');\n startEdit(id);\n}\nfunction addCompCenter(){addComp(30+Math.random()*40,20+Math.random()*60);}\n\nfunction startEdit(id){commitEdit();editing=id;renderComps();const inp=canvas.querySelector('.wm-comp-edit');if(inp){inp.focus();inp.select();}}\nfunction commitEdit(){\n if(!editing) return;\n const inp=canvas.querySelector('.wm-comp-edit');\n if(inp){const c=S.comps.find(c=>c.id===editing);if(c){const v=inp.value.trim();if(v)c.label=v;save();}}\n editing=null;\n}\n\nfunction compDown(e,id){\n if(editing===id&&(e.target.classList.contains('wm-comp-edit')||e.target.classList.contains('wm-comp-label'))) return;\n e.stopPropagation(); e.preventDefault();\n if(mode==='link'){\n if(!linkSource){linkSource=id;selected=id;renderComps();return;}\n if(linkSource!==id){\n const exists=S.edges.find(ed=>(ed.from===linkSource&&ed.to===id)||(ed.from===id&&ed.to===linkSource));\n if(!exists){S.edges.push({from:linkSource,to:id});save();}\n }\n linkSource=null;selected=null;renderComps();renderEdges();return;\n }\n selected=id;\n const comp=S.comps.find(c=>c.id===id);if(!comp) return;\n let moved=false;\n const onMove=ev=>{\n ev.preventDefault();moved=true;\n const r=canvas.getBoundingClientRect();\n const cx=ev.clientX??(ev.touches?.[0]?.clientX??0);\n const cy=ev.clientY??(ev.touches?.[0]?.clientY??0);\n comp.x=Math.max(3,Math.min(97,((cx-r.left)/r.width)*100));\n comp.y=Math.max(3,Math.min(97,((cy-r.top)/r.height)*100));\n comp.x=Math.round(comp.x*10)/10;comp.y=Math.round(comp.y*10)/10;\n renderComps();renderEdges();\n };\n const onUp=()=>{\n document.removeEventListener('pointermove',onMove);\n document.removeEventListener('pointerup',onUp);\n if(!moved) startEdit(id); else save();\n highlightItem(id);\n };\n document.addEventListener('pointermove',onMove);\n document.addEventListener('pointerup',onUp);\n renderComps();highlightItem(id);\n}\n\nfunction deleteComp(id){\n S.comps=S.comps.filter(c=>c.id!==id);\n S.edges=S.edges.filter(e=>e.from!==id&&e.to!==id);\n if(selected===id)selected=null;if(editing===id)editing=null;\n save();renderComps();renderEdges();rebuildList();\n}\n\ndocument.addEventListener('pointerdown',e=>{\n if(!editing) return;\n if(e.target.closest('.wm-comp')||e.target.classList.contains('wm-comp-edit')) return;\n if(e.target.closest('.wm-item')) return;\n commitEdit();renderComps();\n});\n\nfunction renderComps(){\n canvas.querySelectorAll('.wm-comp').forEach(el=>el.remove());\n S.comps.forEach((c,idx)=>{\n const color=dotColor(idx);\n const el=document.createElement('div');\n el.className='wm-comp'+(selected===c.id?' selected':'');\n el.style.left=c.x+'%';el.style.top=c.y+'%';\n let labelHtml;\n if(editing===c.id) labelHtml='';\n else labelHtml=''+esc(c.label||'?')+'';\n el.innerHTML='

'+labelHtml;\n el.querySelector('.wm-comp-dot').addEventListener('pointerdown',e=>compDown(e,c.id));\n if(editing===c.id){\n const inp=el.querySelector('.wm-comp-edit');\n inp.addEventListener('keydown',e=>{if(e.key==='Enter'){commitEdit();renderComps();rebuildList();}if(e.key==='Escape'){editing=null;renderComps();}});\n inp.addEventListener('blur',()=>setTimeout(()=>{if(editing===c.id){commitEdit();renderComps();rebuildList();}},120));\n inp.addEventListener('pointerdown',e=>e.stopPropagation());\n } else {\n const lbl=el.querySelector('.wm-comp-label');\n lbl.addEventListener('pointerdown',e=>{e.stopPropagation();e.preventDefault();selected=c.id;startEdit(c.id);});\n }\n canvas.appendChild(el);\n });\n document.getElementById('wm-empty').style.display=S.comps.length?'none':'block';\n document.getElementById('wm-count').textContent=S.comps.length;\n}\n\nfunction renderEdges(){\n edgesG.innerHTML='';\n const r=canvas.getBoundingClientRect();const w=r.width,h=r.height;\n S.edges.forEach((edge,idx)=>{\n const from=S.comps.find(c=>c.id===edge.from);\n const to=S.comps.find(c=>c.id===edge.to);\n if(!from||!to) return;\n const x1=from.x*w/100,y1=from.y*h/100,x2=to.x*w/100,y2=to.y*h/100;\n const line=document.createElementNS('http://www.w3.org/2000/svg','line');\n line.setAttribute('x1',x1);line.setAttribute('y1',y1);\n line.setAttribute('x2',x2);line.setAttribute('y2',y2);\n line.setAttribute('stroke','#4338ca');line.setAttribute('stroke-width','1.5');\n line.setAttribute('stroke-opacity','0.4');\n line.style.pointerEvents='visibleStroke';line.style.cursor='pointer';\n line.addEventListener('click',()=>{S.edges.splice(idx,1);save();renderEdges();});\n edgesG.appendChild(line);\n const hit=document.createElementNS('http://www.w3.org/2000/svg','line');\n hit.setAttribute('x1',x1);hit.setAttribute('y1',y1);\n hit.setAttribute('x2',x2);hit.setAttribute('y2',y2);\n hit.setAttribute('stroke','transparent');hit.setAttribute('stroke-width','16');\n hit.style.cursor='pointer';\n hit.addEventListener('click',()=>{S.edges.splice(idx,1);save();renderEdges();});\n edgesG.appendChild(hit);\n });\n}\n\nfunction rebuildList(){\n const c=document.getElementById('wm-items');c.innerHTML='';\n S.comps.forEach((comp,i)=>{\n const color=dotColor(i);\n const row=document.createElement('div');\n row.className='wm-item'+(selected===comp.id?' active':'');row.dataset.id=comp.id;\n const sw=document.createElement('span');sw.className='wm-item-swatch';sw.style.background=color;\n const inp=document.createElement('input');inp.type='text';inp.value=comp.label;inp.placeholder='Label';\n inp.addEventListener('input',()=>{comp.label=inp.value;renderComps();save();});\n inp.addEventListener('focus',()=>{selected=comp.id;highlightItem(comp.id);renderComps();});\n const del=document.createElement('button');del.className='wm-item-del';del.textContent='\\\\u00d7';\n del.addEventListener('click',()=>deleteComp(comp.id));\n row.appendChild(sw);row.appendChild(inp);row.appendChild(del);c.appendChild(row);\n });\n}\nfunction highlightItem(id){document.querySelectorAll('.wm-item').forEach(r=>r.classList.toggle('active',r.dataset.id===id));}\n\nnew ResizeObserver(()=>renderEdges()).observe(canvas);\nfunction save(){setHS(S);}\nif(S.comps.length>0) document.getElementById('wm-list-section').classList.add('collapsed');\nrenderComps();renderEdges();rebuildList();\n`,\n });\n}\n","deleted","label",[178,160],"pages","permalink","https://www.val.town/x/c15r/mental-models/code/pages/wardley-map.ts","extension","ts","actionData","errors"]