\n Axes \n \\u25be\n

\n X Horizontal axis\n

\n \n \\u2190\\u2192\n \n

\n Y Vertical axis\n

\n \n \\u2190\\u2192\n \n

\n\n

\n \n \n \n \n

Tap to placeor add below

\n\n

\n Items\n 0 \\u25be\n

Tap the canvas to place. Tap a dot label to rename. Drag to reposition.

\n`,\n scripts: `\nlet S = getHS() || {\n xLo: 'Cheap', xHi: 'Expensive', yLo: 'Niche', yHi: 'Mass-market',\n dots: [\n { id:'d1', label:'Starbucks', x:70, y:55 },\n { id:'d2', label:'Local indie', x:40, y:80 },\n { id:'d3', label:\"McDonald's\", x:20, y:25 },\n { id:'d4', label:'Specialty roaster', x:85, y:88 }\n ]\n};\nif (S.xLabel !== undefined) {\n S.xHi = S.xLabel||''; S.xLo = ''; delete S.xLabel;\n S.yHi = S.yLabel||''; S.yLo = ''; delete S.yLabel;\n}\nlet nextId = 10;\nlet selected = null;\nlet editing = null;\n\nS.dots.forEach(d => {\n if (!d.id) d.id = 'd'+(nextId++);\n else { const n=parseInt(d.id.slice(1)); if(n>=nextId) nextId=n+1; }\n});\n\nconst field = document.getElementById('pm-field');\n\nfunction dotColor(index) {\n const hue = (index * 137.508 + 20) % 360;\n return 'hsl(' + Math.round(hue) + ', 65%, 52%)';\n}\n\nfunction toggleSection(id) { document.getElementById(id).classList.toggle('collapsed'); }\n\nfunction initCollapse() {\n const axesEmpty = !S.xLo && !S.xHi && !S.yLo && !S.yHi;\n const axSec = document.getElementById('pm-axes-section');\n const itSec = document.getElementById('pm-items-section');\n if (!axesEmpty) axSec.classList.add('collapsed');\n if (S.dots.length > 0) itSec.classList.add('collapsed');\n}\n\nfunction updateAxesSummary() {\n const parts = [];\n const xLo = S.xLo || (S.xHi ? inferNeg(S.xHi) : '');\n const xHi = S.xHi || (S.xLo ? inferNeg(S.xLo) : '');\n const yLo = S.yLo || (S.yHi ? inferNeg(S.yHi) : '');\n const yHi = S.yHi || (S.yLo ? inferNeg(S.yLo) : '');\n if (xLo || xHi) parts.push((xLo||'?') + ' \\\\u2194 ' + (xHi||'?'));\n if (yLo || yHi) parts.push((yLo||'?') + ' \\\\u2195 ' + (yHi||'?'));\n document.getElementById('pm-axes-summary').textContent = parts.length ? parts.join(' \\\\u00b7 ') : '';\n}\n\nconst axEls = {\n xLo: document.getElementById('pm-x-lo'), xHi: document.getElementById('pm-x-hi'),\n yLo: document.getElementById('pm-y-lo'), yHi: document.getElementById('pm-y-hi'),\n};\nfor (const [k, el] of Object.entries(axEls)) {\n el.value = S[k] || '';\n el.addEventListener('input', () => { S[k] = el.value; updateAxisLabels(); updateAxesSummary(); save(); });\n}\nupdateAxisLabels(); updateAxesSummary();\n\nfunction inferNeg(label) {\n if (!label) return '';\n const pairs = {\n 'cheap':'expensive','expensive':'cheap','low':'high','high':'low',\n 'slow':'fast','fast':'slow','simple':'complex','complex':'simple',\n 'small':'large','large':'small','niche':'mass-market','mass-market':'niche',\n 'easy':'hard','hard':'easy','weak':'strong','strong':'weak',\n 'old':'new','new':'old','narrow':'broad','broad':'narrow',\n 'risk':'safety','safety':'risk','short':'long','long':'short',\n };\n const l = label.toLowerCase().trim();\n if (pairs[l]) return pairs[l].charAt(0).toUpperCase() + pairs[l].slice(1);\n return 'Not ' + label.charAt(0).toLowerCase() + label.slice(1);\n}\n\nfunction updateAxisLabels() {\n const xLo = S.xLo || (S.xHi ? inferNeg(S.xHi) : '');\n const xHi = S.xHi || (S.xLo ? inferNeg(S.xLo) : '');\n const yLo = S.yLo || (S.yHi ? inferNeg(S.yHi) : '');\n const yHi = S.yHi || (S.yLo ? inferNeg(S.yLo) : '');\n document.getElementById('ax-x-lo').textContent = xLo ? '\\\\u2190 ' + xLo : '';\n document.getElementById('ax-x-hi').textContent = xHi ? xHi + ' \\\\u2192' : '';\n document.getElementById('ax-y-lo').textContent = yLo ? '\\\\u2193 ' + yLo : '';\n document.getElementById('ax-y-hi').textContent = yHi ? '\\\\u2191 ' + yHi : '';\n}\n\nlet fieldDownPos = null, fieldDownTime = 0;\nfield.addEventListener('pointerdown', (e) => {\n if (e.target.closest('.pm-dot') || e.target.closest('.pm-dot-edit')) return;\n fieldDownPos = { x: e.clientX, y: e.clientY }; fieldDownTime = Date.now();\n});\nfield.addEventListener('pointerup', (e) => {\n if (!fieldDownPos) return;\n const dx=e.clientX-fieldDownPos.x, dy=e.clientY-fieldDownPos.y, dt=Date.now()-fieldDownTime;\n fieldDownPos = null;\n if (Math.abs(dx)<8 && Math.abs(dy)<8 && dt<400) {\n if (e.target.closest('.pm-dot') || e.target.closest('.pm-dot-edit')) return;\n commitCanvasEdit();\n const rect = field.getBoundingClientRect();\n placeDot(((e.clientX-rect.left)/rect.width)*100, 100-((e.clientY-rect.top)/rect.height)*100);\n }\n});\n\nfunction placeDot(x, y) {\n const id = 'd'+(nextId++);\n S.dots.push({ id, label: 'Item '+(S.dots.length+1), x:Math.round(x*10)/10, y:Math.round(y*10)/10 });\n selected = id; save(); renderDots(); rebuildList();\n document.getElementById('pm-items-section').classList.remove('collapsed');\n startCanvasEdit(id);\n}\nfunction addDot() { placeDot(50, 50); }\n\nfunction startCanvasEdit(id) { commitCanvasEdit(); editing=id; renderDots(); const inp=field.querySelector('.pm-dot-edit'); if(inp){inp.focus();inp.select();} }\nfunction commitCanvasEdit() {\n if (!editing) return;\n const inp=field.querySelector('.pm-dot-edit');\n if (inp) { const dot=S.dots.find(d=>d.id===editing); if(dot){const v=inp.value.trim();if(v)dot.label=v;save();} }\n editing=null;\n}\n\nfunction dotDown(e, id) {\n if (editing===id && (e.target.classList.contains('pm-dot-edit')||e.target.classList.contains('pm-dot-label'))) return;\n e.stopPropagation(); e.preventDefault(); selected = id;\n const dot = S.dots.find(d=>d.id===id); if(!dot) return;\n let moved = false;\n const onMove = (ev) => {\n ev.preventDefault(); moved = true;\n const rect = field.getBoundingClientRect();\n const cx=ev.clientX??(ev.touches?.[0]?.clientX??0);\n const cy=ev.clientY??(ev.touches?.[0]?.clientY??0);\n dot.x=Math.max(2,Math.min(98,((cx-rect.left)/rect.width)*100));\n dot.y=Math.max(2,Math.min(98,100-((cy-rect.top)/rect.height)*100));\n dot.x=Math.round(dot.x*10)/10; dot.y=Math.round(dot.y*10)/10;\n renderDots(); updateListCoords();\n };\n const onUp = () => {\n document.removeEventListener('pointermove',onMove);\n document.removeEventListener('pointerup',onUp);\n if(!moved) startCanvasEdit(id); else save();\n highlightListItem(id);\n };\n document.addEventListener('pointermove',onMove);\n document.addEventListener('pointerup',onUp);\n renderDots(); highlightListItem(id);\n}\n\ndocument.addEventListener('pointerdown', (e) => {\n if (!editing) return;\n if (e.target.closest('.pm-dot')||e.target.classList.contains('pm-dot-edit')) return;\n if (e.target.closest('.pm-item')) return;\n commitCanvasEdit(); renderDots();\n});\n\nfunction renderDots() {\n field.querySelectorAll('.pm-dot').forEach(el=>el.remove());\n S.dots.forEach((d,idx) => {\n const color=dotColor(idx);\n const el=document.createElement('div');\n el.className='pm-dot'+(selected===d.id?' selected':'');\n el.style.left=d.x+'%'; el.style.top=(100-d.y)+'%';\n let labelHtml;\n if(editing===d.id) labelHtml='';\n else labelHtml=''+esc(d.label||'?')+'';\n el.innerHTML='

'+labelHtml;\n el.querySelector('.pm-dot-circle').addEventListener('pointerdown',(e)=>dotDown(e,d.id));\n if(editing===d.id){\n const inp=el.querySelector('.pm-dot-edit');\n inp.addEventListener('keydown',(e)=>{if(e.key==='Enter'){commitCanvasEdit();renderDots();rebuildList();}if(e.key==='Escape'){editing=null;renderDots();}});\n inp.addEventListener('blur',()=>setTimeout(()=>{if(editing===d.id){commitCanvasEdit();renderDots();rebuildList();}},120));\n inp.addEventListener('pointerdown',(e)=>e.stopPropagation());\n } else {\n const lbl=el.querySelector('.pm-dot-label');\n lbl.addEventListener('pointerdown',(e)=>{e.stopPropagation();e.preventDefault();selected=d.id;startCanvasEdit(d.id);});\n }\n field.appendChild(el);\n });\n document.getElementById('pm-empty').style.display=S.dots.length?'none':'block';\n document.getElementById('pm-count').textContent=S.dots.length;\n}\n\nfunction rebuildList() {\n const c=document.getElementById('pm-items'); c.innerHTML='';\n if(!S.dots.length){c.innerHTML='

No items yet

';return;}\n S.dots.forEach((d,i)=>{\n const color=dotColor(i);\n const row=document.createElement('div');\n row.className='pm-item'+(selected===d.id?' active':''); row.dataset.id=d.id;\n const swatch=document.createElement('span');swatch.className='pm-item-swatch';swatch.style.background=color;\n const inp=document.createElement('input');inp.type='text';inp.value=d.label;inp.placeholder='Label\\\\u2026';\n inp.addEventListener('input',()=>{d.label=inp.value;renderDots();save();});\n inp.addEventListener('focus',()=>{selected=d.id;highlightListItem(d.id);renderDots();});\n const coords=document.createElement('span');coords.className='pm-item-coords';\n coords.textContent=Math.round(d.x)+', '+Math.round(d.y);\n const del=document.createElement('button');del.className='pm-item-del';del.textContent='\\\\u00d7';\n del.addEventListener('click',()=>{S.dots.splice(i,1);if(selected===d.id)selected=null;if(editing===d.id)editing=null;save();renderDots();rebuildList();});\n row.appendChild(swatch);row.appendChild(inp);row.appendChild(coords);row.appendChild(del);c.appendChild(row);\n });\n}\nfunction highlightListItem(id){document.querySelectorAll('.pm-item').forEach(row=>row.classList.toggle('active',row.dataset.id===id));}\nfunction updateListCoords(){document.querySelectorAll('.pm-item').forEach(row=>{const d=S.dots.find(dot=>dot.id===row.dataset.id);if(d){const coords=row.querySelector('.pm-item-coords');if(coords)coords.textContent=Math.round(d.x)+', '+Math.round(d.y);}});}\n\nfunction save() { setHS(S); }\ninitCollapse(); renderDots(); rebuildList();\n`,\n });\n}\n","deleted","label",[178,160],"pages","permalink","https://www.val.town/x/c15r/mental-models/code/pages/position-map.ts","extension","ts","actionData","errors"]