https://mewsie.world/CoraTOWiki/index.php?action=history&feed=atom&title=MediaWiki%3AMindMap.js
MediaWiki:MindMap.js - Revision history
2026-05-04T17:34:26Z
Revision history for this page on the wiki
MediaWiki 1.43.6
https://mewsie.world/CoraTOWiki/index.php?title=MediaWiki:MindMap.js&diff=6607&oldid=prev
Noorisei at 09:22, 30 December 2025
2025-12-30T09:22:17Z
<p></p>
<a href="https://mewsie.world/CoraTOWiki/index.php?title=MediaWiki:MindMap.js&diff=6607&oldid=6441">Show changes</a>
Noorisei
https://mewsie.world/CoraTOWiki/index.php?title=MediaWiki:MindMap.js&diff=6441&oldid=prev
Noorisei: Created page with "(function(){ function initMap(container){ var stage=container.querySelector('.mindmap-stage'); if(!stage)return; var links=container.querySelector('.mm-links'); var detail=container.querySelector('.mm-detail'); var scale=1, tx=0, ty=0, panning=false, px=0, py=0; var rafDraw=0; function clamp(n,min,max){ return Math.min(max,Math.max(min,n)); } function scheduleDraw(){ if(rafDraw) return; rafDraw=win..."
2025-12-17T06:35:43Z
<p>Created page with "(function(){ function initMap(container){ var stage=container.querySelector('.mindmap-stage'); if(!stage)return; var links=container.querySelector('.mm-links'); var detail=container.querySelector('.mm-detail'); var scale=1, tx=0, ty=0, panning=false, px=0, py=0; var rafDraw=0; function clamp(n,min,max){ return Math.min(max,Math.max(min,n)); } function scheduleDraw(){ if(rafDraw) return; rafDraw=win..."</p>
<p><b>New page</b></p><div>(function(){<br />
function initMap(container){<br />
var stage=container.querySelector('.mindmap-stage'); if(!stage)return;<br />
var links=container.querySelector('.mm-links'); var detail=container.querySelector('.mm-detail');<br />
var scale=1, tx=0, ty=0, panning=false, px=0, py=0;<br />
var rafDraw=0;<br />
function clamp(n,min,max){ return Math.min(max,Math.max(min,n)); }<br />
function scheduleDraw(){<br />
if(rafDraw) return;<br />
rafDraw=window.requestAnimationFrame(function(){ rafDraw=0; drawLines(); });<br />
}<br />
function applyTransform(){ stage.style.transform='translate('+tx+'px,'+ty+'px) scale('+scale+')'; scheduleDraw(); }<br />
function layoutBranches(){<br />
if(container.clientWidth===0 || container.clientHeight===0) return;<br />
var pad=24;<br />
var gapX=140;<br />
var gapY=34;<br />
var center=stage.querySelector('.mm-center');<br />
if(center){<br />
center.style.left=pad+'px';<br />
center.style.top=(container.clientHeight/2)+'px';<br />
center.style.transform='translate(0, -50%)';<br />
}<br />
<br />
var cw=center ? center.offsetWidth : 220;<br />
var cx=pad + cw + gapX;<br />
var y=pad;<br />
<br />
var branches=stage.querySelectorAll('.mm-branch');<br />
branches.forEach(function(b){<br />
b.style.left=cx+'px';<br />
b.style.top=y+'px';<br />
y+=b.offsetHeight+gapY;<br />
});<br />
scheduleDraw();<br />
}<br />
function zoomAt(clientX, clientY, nextScale){<br />
var rect=container.getBoundingClientRect();<br />
var mx=clientX-rect.left;<br />
var my=clientY-rect.top;<br />
var prev=scale;<br />
var ns=clamp(nextScale,0.6,2.2);<br />
if(ns===prev) return;<br />
var wx=(mx-tx)/prev;<br />
var wy=(my-ty)/prev;<br />
scale=ns;<br />
tx=mx-wx*scale;<br />
ty=my-wy*scale;<br />
applyTransform();<br />
}<br />
function centerOnEl(node){<br />
if(!node)return;<br />
var nr=node.getBoundingClientRect();<br />
var cr=container.getBoundingClientRect();<br />
var dx=(cr.left+cr.width/2)-(nr.left+nr.width/2);<br />
var dy=(cr.top+cr.height/2)-(nr.top+nr.height/2);<br />
tx+=dx;<br />
ty+=dy;<br />
applyTransform();<br />
}<br />
function showDetailForNode(node){<br />
if(!detail || !node) return;<br />
var d=node.getAttribute('data-detail');<br />
if(!d){<br />
var branch=node.parentElement && node.parentElement.classList && node.parentElement.classList.contains('mm-branch') ? node.parentElement : null;<br />
if(branch){<br />
var kids=branch.querySelectorAll(':scope > .mm-children > .mm-node, :scope > .mm-children > .mm-item > .mm-node');<br />
if(kids && kids.length){<br />
var labels=[];<br />
kids.forEach(function(k){ labels.push((k.textContent||'').trim()); });<br />
d=((node.textContent||'').trim())+' — '+labels.join(', ');<br />
}<br />
}<br />
}<br />
if(d){ detail.textContent=d; detail.classList.add('active'); } else { detail.classList.remove('active'); }<br />
}<br />
function drawLines(){<br />
var svgW=container.clientWidth, svgH=container.clientHeight;<br />
if(svgW===0 || svgH===0) return;<br />
links.setAttribute('width',svgW); links.setAttribute('height',svgH);<br />
links.innerHTML='';<br />
function addCurve(a,b){<br />
var ar=a.getBoundingClientRect(), br=b.getBoundingClientRect(), cr=container.getBoundingClientRect();<br />
var x1=ar.right-cr.left;<br />
var y1=(ar.top-cr.top)+ar.height/2;<br />
var x2=br.left-cr.left;<br />
var y2=(br.top-cr.top)+br.height/2;<br />
var dist=Math.abs(x2-x1);<br />
var dx=Math.max(40, Math.min(180, dist*0.45));<br />
var c1x=x1+dx;<br />
var c2x=x2-dx;<br />
var path=document.createElementNS('http://www.w3.org/2000/svg','path');<br />
path.setAttribute('d','M '+x1+' '+y1+' C '+c1x+' '+y1+', '+c2x+' '+y2+', '+x2+' '+y2);<br />
path.setAttribute('fill','none');<br />
path.setAttribute('stroke','rgba(255,107,157,.35)');<br />
path.setAttribute('stroke-width','2');<br />
links.appendChild(path);<br />
}<br />
var center=stage.querySelector('.mm-center');<br />
if(!center) return;<br />
var branches=stage.querySelectorAll('.mm-branch');<br />
branches.forEach(function(b){<br />
var head=b.querySelector(':scope > .mm-node');<br />
if(!head) return;<br />
addCurve(center,head);<br />
if(b.classList.contains('open')){<br />
var directChildren=b.querySelectorAll(':scope > .mm-children > .mm-node, :scope > .mm-children > .mm-item > .mm-node');<br />
directChildren.forEach(function(c){ addCurve(head,c); });<br />
var openItems=b.querySelectorAll(':scope > .mm-children > .mm-item.open');<br />
openItems.forEach(function(item){<br />
var itemNode=item.querySelector(':scope > .mm-node');<br />
if(!itemNode) return;<br />
var subs=item.querySelectorAll(':scope > .mm-subchildren > .mm-node');<br />
subs.forEach(function(s){ addCurve(itemNode,s); });<br />
});<br />
}<br />
});<br />
}<br />
<br />
var down=false, dragging=false, downId=null, startX=0, startY=0;<br />
container.addEventListener('pointerdown',function(e){<br />
if(e.button!==0) return;<br />
if(e.target.closest('.mm-controls')) return;<br />
down=true;<br />
dragging=false;<br />
downId=e.pointerId;<br />
startX=e.clientX;<br />
startY=e.clientY;<br />
px=e.clientX;<br />
py=e.clientY;<br />
});<br />
container.addEventListener('pointermove',function(e){<br />
if(!down || downId!==e.pointerId) return;<br />
var dx=e.clientX-px, dy=e.clientY-py;<br />
px=e.clientX;<br />
py=e.clientY;<br />
if(!dragging){<br />
var mx=e.clientX-startX, my=e.clientY-startY;<br />
if(Math.abs(mx)+Math.abs(my) < 6) return;<br />
dragging=true;<br />
container.classList.add('mm-dragging');<br />
try{ container.setPointerCapture(e.pointerId); }catch(err){}<br />
}<br />
tx+=dx;<br />
ty+=dy;<br />
applyTransform();<br />
});<br />
function endPointer(e){<br />
if(downId!==e.pointerId) return;<br />
down=false;<br />
downId=null;<br />
if(dragging){<br />
dragging=false;<br />
container.classList.remove('mm-dragging');<br />
try{ container.releasePointerCapture(e.pointerId); }catch(err){}<br />
}<br />
}<br />
container.addEventListener('pointerup',endPointer);<br />
container.addEventListener('pointercancel',endPointer);<br />
<br />
container.addEventListener('wheel',function(e){<br />
e.preventDefault();<br />
var next=scale+(e.deltaY<0?0.12:-0.12);<br />
zoomAt(e.clientX,e.clientY,next);<br />
},{passive:false});<br />
<br />
var btnIn=container.querySelector('[data-mm-zoom="in"]');<br />
var btnOut=container.querySelector('[data-mm-zoom="out"]');<br />
var btnReset=container.querySelector('[data-mm-reset]');<br />
<br />
function zoomAtCenter(next){<br />
var cr=container.getBoundingClientRect();<br />
zoomAt(cr.left+cr.width/2, cr.top+cr.height/2, next);<br />
}<br />
<br />
if(btnIn)btnIn.addEventListener('click',function(){ zoomAtCenter(scale+0.15); });<br />
if(btnOut)btnOut.addEventListener('click',function(){ zoomAtCenter(scale-0.15); });<br />
if(btnReset)btnReset.addEventListener('click',function(){ scale=1; tx=0; ty=0; applyTransform(); });<br />
<br />
stage.querySelectorAll('.mm-node').forEach(function(n){<br />
n.addEventListener('click',function(){<br />
showDetailForNode(n);<br />
});<br />
});<br />
stage.querySelectorAll('.mm-branch > .mm-node').forEach(function(head){<br />
head.addEventListener('click',function(){<br />
var branch=head.parentElement;<br />
if(branch.classList.contains('open')){ branch.classList.remove('open'); } else { branch.classList.add('open'); }<br />
layoutBranches();<br />
scheduleDraw();<br />
});<br />
});<br />
stage.addEventListener('click',function(e){<br />
var node=e.target.closest('.mm-item > .mm-node');<br />
if(!node) return;<br />
var item=node.parentElement;<br />
if(!item) return;<br />
if(item.classList.contains('open')){ item.classList.remove('open'); } else { item.classList.add('open'); }<br />
layoutBranches();<br />
scheduleDraw();<br />
});<br />
window.addEventListener('resize', function(){ layoutBranches(); drawLines(); });<br />
layoutBranches();<br />
applyTransform();<br />
<br />
container.__mmApi={<br />
layout: layoutBranches,<br />
draw: drawLines,<br />
showDetail: showDetailForNode<br />
};<br />
}<br />
<br />
function decorateLinkNodes(root){<br />
(root||document).querySelectorAll('.mm-node[data-href]').forEach(function(node){<br />
if(node.querySelector('a')) return;<br />
var href=node.getAttribute('data-href');<br />
if(!href) return;<br />
var label=(node.textContent||'').trim();<br />
node.textContent='';<br />
var a=document.createElement('a');<br />
a.href=href;<br />
a.target='_blank';<br />
a.rel='noopener';<br />
a.textContent=label;<br />
node.appendChild(a);<br />
});<br />
<br />
document.addEventListener('click', function(e){<br />
var a=e.target.closest('.mm-node a');<br />
if(!a) return;<br />
e.stopPropagation();<br />
}, true);<br />
}<br />
<br />
function renderLocationsTables(){<br />
var root=document.getElementById('locations-table-root');<br />
var stage=document.getElementById('mm-stage-locations');<br />
if(!root || !stage) return;<br />
<br />
var frag=document.createDocumentFragment();<br />
var branches=stage.querySelectorAll('.mm-branch');<br />
branches.forEach(function(branch){<br />
var branchHead=branch.querySelector(':scope > .mm-node');<br />
var branchTitle=(branchHead && branchHead.textContent ? branchHead.textContent : '').trim();<br />
var theme=branch.id ? branch.id.replace(/^mm-locations-/, '') : 'default';<br />
<br />
var card=document.createElement('section');<br />
card.className='mm-table-card mm-table-card--'+theme;<br />
<br />
var h=document.createElement('h3');<br />
h.className='mm-table-title';<br />
h.textContent=branchTitle || 'Locations';<br />
card.appendChild(h);<br />
<br />
var table=document.createElement('table');<br />
table.className='mm-table';<br />
table.setAttribute('data-theme', theme);<br />
<br />
var thead=document.createElement('thead');<br />
thead.innerHTML='<tr><th>Town</th><th>Location(s)</th></tr>';<br />
table.appendChild(thead);<br />
<br />
var tbody=document.createElement('tbody');<br />
var items=branch.querySelectorAll(':scope > .mm-children > .mm-item');<br />
items.forEach(function(item){<br />
var townNode=item.querySelector(':scope > .mm-node');<br />
var town=(townNode && townNode.textContent ? townNode.textContent : '').trim();<br />
if(!town) return;<br />
<br />
var tr=document.createElement('tr');<br />
<br />
var tdTown=document.createElement('td');<br />
tdTown.className='mm-td-town';<br />
tdTown.textContent=town;<br />
tr.appendChild(tdTown);<br />
<br />
var tdLoc=document.createElement('td');<br />
tdLoc.className='mm-td-locations';<br />
<br />
var subs=item.querySelectorAll(':scope > .mm-subchildren > .mm-node');<br />
if(subs && subs.length){<br />
var ul=document.createElement('ul');<br />
ul.className='mm-list';<br />
subs.forEach(function(s){<br />
var li=document.createElement('li');<br />
li.textContent=((s.textContent||'').trim());<br />
ul.appendChild(li);<br />
});<br />
tdLoc.appendChild(ul);<br />
}else{<br />
tdLoc.textContent='—';<br />
}<br />
<br />
tr.appendChild(tdLoc);<br />
tbody.appendChild(tr);<br />
});<br />
<br />
table.appendChild(tbody);<br />
card.appendChild(table);<br />
frag.appendChild(card);<br />
});<br />
<br />
root.textContent='';<br />
root.appendChild(frag);<br />
}<br />
<br />
function parseDetailTriplet(detail){<br />
var raw=(detail||'').trim();<br />
if(!raw) return { left:'', mid:'', right:'' };<br />
var parts=raw.split(/\s*—\s*/g).map(function(s){ return s.trim(); }).filter(Boolean);<br />
return {<br />
left: parts[0] || '',<br />
mid: parts[1] || '',<br />
right: parts.slice(2).join(' — ')<br />
};<br />
}<br />
<br />
function initServicesTable(){<br />
var root=document.getElementById('services-table-root');<br />
var stage=document.getElementById('mm-stage-services');<br />
if(!root || !stage) return;<br />
<br />
var rows=[];<br />
stage.querySelectorAll('.mm-branch').forEach(function(branch){<br />
var head=branch.querySelector(':scope > .mm-node');<br />
var category=((head && head.textContent)||'').trim();<br />
var children=branch.querySelectorAll(':scope > .mm-children > .mm-node');<br />
children.forEach(function(n){<br />
var name=((n.textContent)||'').trim();<br />
var href=n.getAttribute('data-href') || '';<br />
var d=parseDetailTriplet(n.getAttribute('data-detail')||'');<br />
rows.push({<br />
category: category,<br />
name: name,<br />
npc: d.mid,<br />
purpose: d.right,<br />
href: href,<br />
detail: (n.getAttribute('data-detail')||'').trim()<br />
});<br />
});<br />
});<br />
<br />
root.innerHTML='';<br />
<br />
var controls=document.createElement('div');<br />
controls.className='mm-table-controls';<br />
controls.innerHTML='\<br />
<div class="mm-table-control">\<br />
<label class="mm-table-label" for="services-table-search">Search</label>\<br />
<input id="services-table-search" class="mm-table-input" type="search" placeholder="Type to filter…" autocomplete="off">\<br />
</div>\<br />
<div class="mm-table-control">\<br />
<label class="mm-table-label" for="services-table-category">Category</label>\<br />
<select id="services-table-category" class="mm-table-select">\<br />
<option value="">All</option>\<br />
</select>\<br />
</div>\<br />
<div class="mm-table-control mm-table-meta" id="services-table-meta"></div>';<br />
root.appendChild(controls);<br />
<br />
var tableWrap=document.createElement('div');<br />
tableWrap.className='mm-table-wrap';<br />
root.appendChild(tableWrap);<br />
<br />
var table=document.createElement('table');<br />
table.className='mm-table mm-table--enhanced';<br />
table.innerHTML='\<br />
<thead>\<br />
<tr>\<br />
<th scope="col" data-key="category">Category</th>\<br />
<th scope="col" data-key="name">Function</th>\<br />
<th scope="col" data-key="npc">Replaced NPC</th>\<br />
<th scope="col" data-key="purpose">What\'s It For</th>\<br />
<th scope="col" data-key="link">Link</th>\<br />
</tr>\<br />
</thead>\<br />
<tbody></tbody>';<br />
tableWrap.appendChild(table);<br />
<br />
var tbody=table.querySelector('tbody');<br />
var searchEl=root.querySelector('#services-table-search');<br />
var categoryEl=root.querySelector('#services-table-category');<br />
var metaEl=root.querySelector('#services-table-meta');<br />
var sortKey='category';<br />
var sortDir='asc';<br />
<br />
function normalize(s){ return (s||'').toLowerCase(); }<br />
function compare(a,b){<br />
var av=normalize(a), bv=normalize(b);<br />
if(av<bv) return -1;<br />
if(av>bv) return 1;<br />
return 0;<br />
}<br />
<br />
function apply(){<br />
var q=normalize(searchEl && searchEl.value);<br />
var cat=(categoryEl && categoryEl.value) || '';<br />
var filtered=rows.filter(function(r){<br />
if(cat && r.category!==cat) return false;<br />
if(!q) return true;<br />
var blob=(r.category+' '+r.name+' '+r.npc+' '+r.purpose+' '+r.detail).toLowerCase();<br />
return blob.indexOf(q)!==-1;<br />
});<br />
<br />
filtered.sort(function(a,b){<br />
var ka=(sortKey==='link'? (a.href? a.name : '') : a[sortKey]) || '';<br />
var kb=(sortKey==='link'? (b.href? b.name : '') : b[sortKey]) || '';<br />
var c=compare(ka,kb);<br />
return sortDir==='asc' ? c : -c;<br />
});<br />
<br />
tbody.textContent='';<br />
filtered.forEach(function(r){<br />
var tr=document.createElement('tr');<br />
<br />
var tdCat=document.createElement('td');<br />
tdCat.className='mm-td-category';<br />
tdCat.textContent=r.category;<br />
tr.appendChild(tdCat);<br />
<br />
var tdName=document.createElement('td');<br />
tdName.className='mm-td-name';<br />
tdName.textContent=r.name;<br />
if(r.detail) tdName.title=r.detail;<br />
tr.appendChild(tdName);<br />
<br />
var tdNpc=document.createElement('td');<br />
tdNpc.textContent=r.npc || '—';<br />
tr.appendChild(tdNpc);<br />
<br />
var tdPurpose=document.createElement('td');<br />
tdPurpose.textContent=r.purpose || '—';<br />
if(r.detail) tdPurpose.title=r.detail;<br />
tr.appendChild(tdPurpose);<br />
<br />
var tdLink=document.createElement('td');<br />
if(r.href){<br />
var a=document.createElement('a');<br />
a.href=r.href;<br />
a.target='_blank';<br />
a.rel='noopener';<br />
a.textContent='Open';<br />
tdLink.appendChild(a);<br />
}else{<br />
tdLink.textContent='—';<br />
}<br />
tr.appendChild(tdLink);<br />
<br />
tbody.appendChild(tr);<br />
});<br />
<br />
if(metaEl) metaEl.textContent=filtered.length+' / '+rows.length;<br />
}<br />
<br />
var categories={};<br />
rows.forEach(function(r){ categories[r.category]=true; });<br />
Object.keys(categories).sort().forEach(function(c){<br />
var opt=document.createElement('option');<br />
opt.value=c;<br />
opt.textContent=c;<br />
categoryEl.appendChild(opt);<br />
});<br />
<br />
table.querySelectorAll('th[data-key]').forEach(function(th){<br />
th.tabIndex=0;<br />
th.addEventListener('click', function(){<br />
var k=th.getAttribute('data-key');<br />
if(!k) return;<br />
if(sortKey===k){ sortDir = sortDir==='asc' ? 'desc' : 'asc'; }<br />
else { sortKey=k; sortDir='asc'; }<br />
apply();<br />
});<br />
th.addEventListener('keydown', function(e){<br />
if(e.key==='Enter' || e.key===' '){ e.preventDefault(); th.click(); }<br />
});<br />
});<br />
<br />
if(searchEl) searchEl.addEventListener('input', apply);<br />
if(categoryEl) categoryEl.addEventListener('change', apply);<br />
apply();<br />
}<br />
function refreshMapsIn(root){<br />
(root||document).querySelectorAll('.mindmap').forEach(function(m){<br />
if(m.__mmApi){<br />
if(m.offsetParent===null) return;<br />
m.__mmApi.layout();<br />
m.__mmApi.draw();<br />
}<br />
});<br />
}<br />
<br />
function initAll(){<br />
decorateLinkNodes(document);<br />
document.querySelectorAll('.mindmap').forEach(function(m){ initMap(m); });<br />
renderLocationsTables();<br />
initServicesTable();<br />
refreshMapsIn(document);<br />
}<br />
<br />
if(document.readyState==='loading'){<br />
document.addEventListener('DOMContentLoaded', initAll);<br />
}else{<br />
initAll();<br />
}<br />
<br />
document.addEventListener('click',function(e){<br />
var tabBtn=e.target.closest('.nav-tab');<br />
if(!tabBtn) return;<br />
var tabId=tabBtn.getAttribute('data-tab');<br />
setTimeout(function(){<br />
if(tabId){<br />
var tab=document.getElementById(tabId);<br />
if(tab) refreshMapsIn(tab);<br />
}else{<br />
refreshMapsIn(document);<br />
}<br />
},250);<br />
});<br />
<br />
document.addEventListener('click',function(e){<br />
var nested=e.target.closest('.nested-tab');<br />
if(!nested) return;<br />
var id=nested.getAttribute('data-tab');<br />
setTimeout(function(){<br />
if(id){<br />
var el=document.getElementById(id);<br />
if(el) refreshMapsIn(el);<br />
}else{<br />
refreshMapsIn(document);<br />
}<br />
},250);<br />
});<br />
document.querySelectorAll('.destaque-card').forEach(function(card){<br />
var target=card.getAttribute('data-node-target'); var tabBtn=card.getAttribute('data-tab-button'); var tabId=card.getAttribute('data-tab-trigger');<br />
if(target){ card.addEventListener('click',function(){<br />
var btn=document.getElementById(tabBtn); if(btn)btn.click();<br />
setTimeout(function(){<br />
var targetEl=document.getElementById(target);<br />
if(!targetEl) return;<br />
var node=targetEl;<br />
if(targetEl.classList.contains('mm-branch')){<br />
node=targetEl.querySelector(':scope > .mm-node');<br />
if(node && !targetEl.classList.contains('open')) targetEl.classList.add('open');<br />
}<br />
if(!node) return;<br />
var mindmap=node.closest('.mindmap');<br />
var api=mindmap && mindmap.__mmApi ? mindmap.__mmApi : null;<br />
var branch=node.closest('.mm-branch');<br />
var isHead=branch && branch.querySelector(':scope > .mm-node')===node;<br />
var inChildren=node.parentElement && node.parentElement.classList && node.parentElement.classList.contains('mm-children');<br />
if(branch && (inChildren || isHead) && !branch.classList.contains('open')) branch.classList.add('open');<br />
if(api){ api.layout(); api.draw(); api.showDetail(node); }<br />
},200);<br />
}); }<br />
});<br />
})();</div>
Noorisei