\n \n \n \n

\n \n

\n Tap to add a variable\n then link them with + or \\u2212 connections\n

Reinforcing (+)

Balancing (\\u2212)

\n \n \n

In Move mode: tap canvas to add, drag to position. In Link mode: tap source then target. Tap an edge to delete it.

\n`,\n scripts: `\nlet S = getHS() || {\n nodes: [\n { id:'v1', label:'Product Quality', x:50, y:15 },\n { id:'v2', label:'Customers', x:82, y:45 },\n { id:'v3', label:'Revenue', x:65, y:80 },\n { id:'v4', label:'R&D Investment', x:20, y:80 },\n { id:'v5', label:'Price Pressure', x:18, y:45 }\n ],\n edges: [\n { from:'v1', to:'v2', type:'+' },\n { from:'v2', to:'v3', type:'+' },\n { from:'v3', to:'v4', type:'+' },\n { from:'v4', to:'v1', type:'+' },\n { from:'v3', to:'v5', type:'-' }\n ]\n};\nlet nextId = 10;\nlet mode = 'move';\nlet selected = null;\nlet linkSource = null;\n\nS.nodes.forEach(n => { if(!n.id) n.id='v'+(nextId++); else { const x=parseInt(n.id.slice(1)); if(x>=nextId) nextId=x+1; } });\n\nconst canvas = document.getElementById('fl-canvas');\nconst svg = document.getElementById('fl-svg');\nconst edgesG = document.getElementById('fl-edges');\n\ndocument.querySelectorAll('.fl-mode-btn[data-mode]').forEach(btn => {\n btn.addEventListener('click', () => {\n mode = btn.dataset.mode; linkSource = null;\n document.querySelectorAll('.fl-mode-btn[data-mode]').forEach(b => b.classList.toggle('active', b === btn));\n canvas.style.cursor = mode === 'move' ? 'crosshair' : 'pointer';\n });\n});\n\nlet canvasDown = null, canvasDownTime = 0;\ncanvas.addEventListener('pointerdown', (e) => {\n if (e.target.closest('.fl-node')) return;\n canvasDown = { x: e.clientX, y: e.clientY }; canvasDownTime = Date.now();\n});\ncanvas.addEventListener('pointerup', (e) => {\n if (!canvasDown) return;\n const dx = e.clientX - canvasDown.x, dy = e.clientY - canvasDown.y;\n const dt = Date.now() - canvasDownTime; canvasDown = null;\n if (Math.abs(dx) > 8 || Math.abs(dy) > 8 || dt > 400) return;\n if (e.target.closest('.fl-node')) return;\n if (mode === 'move') {\n const rect = canvas.getBoundingClientRect();\n addNode(((e.clientX-rect.left)/rect.width)*100, ((e.clientY-rect.top)/rect.height)*100);\n }\n});\n\nfunction addNode(x, y) {\n const id = 'v'+(nextId++);\n S.nodes.push({ id, label:'Variable', x:Math.round(x*10)/10, y:Math.round(y*10)/10 });\n selected = id; save(); render();\n setTimeout(() => {\n const inp = canvas.querySelector('.fl-node.selected .fl-node-label');\n if (inp) { inp.focus(); document.execCommand('selectAll'); }\n }, 60);\n}\nfunction addNodeCenter() { addNode(30+Math.random()*40, 30+Math.random()*40); }\n\nfunction nodeDown(e, id) {\n e.stopPropagation(); e.preventDefault();\n if (mode === 'link-pos' || mode === 'link-neg') {\n if (!linkSource) { linkSource=id; selected=id; render(); }\n else if (linkSource !== id) {\n if (!S.edges.find(ed => ed.from===linkSource && ed.to===id))\n S.edges.push({ from:linkSource, to:id, type: mode==='link-pos'?'+':'-' });\n linkSource=null; selected=null; save(); render();\n }\n return;\n }\n selected = id;\n const node = S.nodes.find(n => n.id === id);\n if (!node) return;\n let moved = false;\n const onMove = (ev) => {\n ev.preventDefault(); moved = true;\n const rect = canvas.getBoundingClientRect();\n const cx = ev.clientX ?? (ev.touches?.[0]?.clientX ?? 0);\n const cy = ev.clientY ?? (ev.touches?.[0]?.clientY ?? 0);\n node.x = Math.max(5,Math.min(95,((cx-rect.left)/rect.width)*100));\n node.y = Math.max(5,Math.min(95,((cy-rect.top)/rect.height)*100));\n node.x = Math.round(node.x*10)/10; node.y = Math.round(node.y*10)/10;\n renderNodes(); renderEdges();\n };\n const onUp = () => {\n document.removeEventListener('pointermove',onMove);\n document.removeEventListener('pointerup',onUp);\n if (moved) save(); render();\n };\n document.addEventListener('pointermove',onMove);\n document.addEventListener('pointerup',onUp);\n render();\n}\n\nfunction deleteNode(id) {\n S.nodes = S.nodes.filter(n => n.id!==id);\n S.edges = S.edges.filter(e => e.from!==id && e.to!==id);\n if (selected===id) selected=null; save(); render();\n}\nfunction deleteEdge(idx) { S.edges.splice(idx,1); save(); render(); }\n\nfunction render() {\n renderNodes(); renderEdges();\n document.getElementById('fl-empty').style.display = S.nodes.length ? 'none' : 'block';\n}\n\nfunction renderNodes() {\n canvas.querySelectorAll('.fl-node').forEach(el => el.remove());\n S.nodes.forEach(n => {\n const el = document.createElement('div');\n el.className = 'fl-node' + (selected===n.id?' selected':'');\n el.style.left = n.x+'%'; el.style.top = n.y+'%';\n const body = document.createElement('div'); body.className='fl-node-body';\n const label = document.createElement('span'); label.className='fl-node-label';\n label.contentEditable='true'; label.textContent=n.label; label.spellcheck=false;\n label.addEventListener('input', () => { n.label=label.textContent; save(); });\n label.addEventListener('keydown', e => { if(e.key==='Enter'){e.preventDefault();label.blur();} });\n label.addEventListener('pointerdown', e => e.stopPropagation());\n const del = document.createElement('button'); del.className='fl-node-del';\n del.textContent='\\\\u00d7';\n del.addEventListener('click', e => { e.stopPropagation(); deleteNode(n.id); });\n body.appendChild(label); body.appendChild(del); el.appendChild(body);\n el.addEventListener('pointerdown', e => nodeDown(e, n.id));\n canvas.appendChild(el);\n });\n}\n\nfunction renderEdges() {\n edgesG.innerHTML = '';\n const rect = canvas.getBoundingClientRect();\n const w = rect.width, h = rect.height;\n S.edges.forEach((edge, idx) => {\n const from = S.nodes.find(n => n.id===edge.from);\n const to = S.nodes.find(n => n.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 dx=x2-x1, dy=y2-y1, len=Math.sqrt(dx*dx+dy*dy)||1;\n const perpX=-dy/len*4, perpY=dx/len*4, sh=22;\n const sx=x1+(dx/len)*sh+perpX, sy=y1+(dy/len)*sh+perpY;\n const ex=x2-(dx/len)*sh+perpX, ey=y2-(dy/len)*sh+perpY;\n const isPos=edge.type==='+';\n const color=isPos?'#0d9488':'#dc2626';\n const marker=isPos?'url(#ah-pos)':'url(#ah-neg)';\n const hit=document.createElementNS('http://www.w3.org/2000/svg','line');\n hit.setAttribute('x1',sx);hit.setAttribute('y1',sy);hit.setAttribute('x2',ex);hit.setAttribute('y2',ey);\n hit.setAttribute('class','fl-edge-hit');\n hit.addEventListener('click', () => deleteEdge(idx)); edgesG.appendChild(hit);\n const line=document.createElementNS('http://www.w3.org/2000/svg','line');\n line.setAttribute('x1',sx);line.setAttribute('y1',sy);line.setAttribute('x2',ex);line.setAttribute('y2',ey);\n line.setAttribute('stroke',color);line.setAttribute('stroke-width','2');\n line.setAttribute('marker-end',marker);line.style.pointerEvents='none'; edgesG.appendChild(line);\n const mx=(sx+ex)/2, my=(sy+ey)/2;\n const lbl=document.createElementNS('http://www.w3.org/2000/svg','text');\n lbl.setAttribute('x',mx);lbl.setAttribute('y',my-6);\n lbl.setAttribute('class','fl-edge-label'+(isPos?'':' balancing'));\n lbl.textContent=isPos?'+':'\\\\u2212'; edgesG.appendChild(lbl);\n });\n}\n\nnew ResizeObserver(() => renderEdges()).observe(canvas);\nfunction save() { setHS(S); }\nrender();\n`,\n });\n}\n","deleted","label",[178,160],"pages","permalink","https://www.val.town/x/c15r/mental-models/code/pages/feedback-loops.ts","extension","ts","actionData","errors"]