@extends('layouts.app')
@section('title','Petri-Netz-Editor - Stellen, Transitionen, Marken simulieren | kotsch.tech')
@section('meta_description','Petri-Netz-Editor online: Stellen, Transitionen, Kanten und Marken erstellen, aktivierte Transitionen simulieren und JSON exportieren.')
@section('meta_extra')
<meta name="keywords" content="Petri Netz Editor, Petri Net, Stellen, Transitionen, Marken, Simulation">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.kt-side-ad,.side-ad{display:none!important}.kt-banner-ad{display:block!important}.ae-wide{width:min(100% - 32px,1400px)!important}.pn-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px}.pn-bar{display:flex;gap:8px;flex-wrap:wrap}.pn-canvas-wrap{position:relative}.pn-board{width:100%;height:760px;border:1.5px solid var(--line);border-radius:16px;background:radial-gradient(circle at 1px 1px,#e2e8f0 1px,transparent 1px) 0 0/24px 24px,#fff;box-shadow:var(--shadow);touch-action:none}.pn-node{cursor:pointer}.pn-place{fill:#fff;stroke:#0f172a;stroke-width:2.5}.pn-trans{fill:#0f172a;stroke:#0f172a}.pn-sel{stroke:#10b981!important;stroke-width:4!important}.pn-edge{stroke:#475569;stroke-width:2.4;fill:none;marker-end:url(#arr)}.pn-hot{stroke:transparent;stroke-width:26;fill:none}.pn-token{fill:#10b981}.pn-label{font-family:'JetBrains Mono',monospace;font-weight:900;font-size:13px;text-anchor:middle;user-select:none}.pn-side{display:grid;gap:12px}.pn-list{max-height:430px;overflow:auto}.pn-card{padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px}.ok{color:#059669;font-weight:900}.no{color:#dc2626;font-weight:900}.pn-out{width:100%;min-height:240px;font-family:'JetBrains Mono',monospace;font-size:.78rem}.canvas-controls{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:5}.cc-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;box-shadow:0 2px 8px -2px rgba(15,23,42,.16)}@media(max-width:980px){.tool-container.ae-wide{width:min(100% - 16px,100%)!important}.pn-grid{grid-template-columns:1fr}.pn-board{height:min(68vh,620px);min-height:420px}.pn-bar{flex-wrap:nowrap;overflow-x:auto}.pn-bar>*{flex:0 0 auto}.pn-bar .t-btn{min-height:44px}.canvas-controls{flex-direction:row;top:10px;right:10px;bottom:auto}.cc-btn{min-width:44px;min-height:44px}}
</style>
<div class="tool-page"><div class="tool-container ae-wide">
<div class="tool-header"><span class="t-tag"><i class="fas fa-circle-nodes"></i> Developer</span><h1 class="tool-h1">Petri-Netz<span>-Editor.</span></h1><p class="tool-sub">Stellen, Transitionen und Marken modellieren. Aktivierte Transitionen feuern und Markierung beobachten.</p></div>
<div class="t-panel"><div class="pn-bar">
<button class="t-btn accent sm" onclick="tool='place'"><i class="fas fa-circle"></i> Stelle</button>
<button class="t-btn ghost sm" onclick="tool='trans'"><i class="fas fa-grip-lines-vertical"></i> Transition</button>
<button class="t-btn ghost sm" onclick="tool='edge'; pending=null"><i class="fas fa-arrow-right"></i> Kante</button>
<button class="t-btn ghost sm" onclick="addToken()"><i class="fas fa-plus"></i> Marke</button>
<button class="t-btn ghost sm" onclick="fireSelected()"><i class="fas fa-play"></i> Feuern</button>
<button class="t-btn ghost sm" onclick="demo()"><i class="fas fa-wand-magic-sparkles"></i> Demo</button>
<button class="t-btn ghost sm" onclick="exportJson()"><i class="fas fa-download"></i> JSON</button>
<button class="t-btn ghost sm danger" onclick="clearAll()"><i class="fas fa-trash"></i></button>
</div></div>
<div class="pn-grid">
<div class="pn-canvas-wrap"><svg class="pn-board" id="pn" viewBox="0 0 900 650"><defs><marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#475569"/></marker></defs><g id="vp"><g id="edges"></g><g id="nodes"></g></g></svg><div class="canvas-controls"><button class="cc-btn" onclick="zoom(1.2)" title="Zoom +"><i class="fas fa-plus"></i></button><button class="cc-btn" onclick="zoom(1/1.2)" title="Zoom -"><i class="fas fa-minus"></i></button><button class="cc-btn" onclick="resetView()" title="Ansicht reset"><i class="fas fa-crosshairs"></i></button></div></div>
<div class="pn-side"><div class="t-panel"><div class="t-panel-title"><i class="fas fa-list"></i> Analyse</div><div id="info" class="pn-list"></div></div><div class="t-panel"><div class="t-panel-title"><i class="fas fa-code"></i> Export</div><textarea id="out" class="pn-out" readonly></textarea></div></div>
</div>
@include('tools._ads_banner')
</div></div>
<script>
let m={nodes:[],edges:[]},tool='place',sel=null,pending=null,drag=null,view={x:0,y:0,k:1};const svg=document.getElementById('pn'),VP=document.getElementById('vp'),NG=document.getElementById('nodes'),EG=document.getElementById('edges');const uid=()=>Math.random().toString(36).slice(2,8);
function applyView(){VP.setAttribute('transform',`translate(${view.x},${view.y}) scale(${view.k})`)}
function rawPt(e){const r=svg.getBoundingClientRect();return{x:(e.clientX-r.left)*900/r.width,y:(e.clientY-r.top)*650/r.height}}
function pt(e){const p=rawPt(e);return{x:(p.x-view.x)/view.k,y:(p.y-view.y)/view.k}}
function zoom(factor,anchor){const p=anchor||{x:450,y:325};const wx=(p.x-view.x)/view.k,wy=(p.y-view.y)/view.k;view.k=Math.max(.3,Math.min(3,view.k*factor));view.x=p.x-wx*view.k;view.y=p.y-wy*view.k;applyView()}
function resetView(){view={x:0,y:0,k:1};applyView()}
svg.addEventListener('wheel',e=>{e.preventDefault();zoom(e.deltaY<0?1.1:1/1.1,rawPt(e))},{passive:false});
function save(){localStorage.setItem('petri-v1',JSON.stringify(m))}
function load(){try{m=JSON.parse(localStorage.getItem('petri-v1'))||m}catch(e){} if(!m.nodes.length)demo(false);render()}
svg.addEventListener('pointerdown',e=>{if(e.target!==svg)return;const p=pt(e);if(tool==='place'||tool==='trans'){m.nodes.push({id:uid(),type:tool,x:p.x,y:p.y,tokens:tool==='place'?0:undefined,label:(tool==='place'?'p':'t')+(m.nodes.length+1)});save();render()}else{drag={kind:'pan',sx:e.clientX,sy:e.clientY,ox:view.x,oy:view.y};sel=null;pending=null;render();svg.setPointerCapture(e.pointerId)}});
function render(){EG.innerHTML=m.edges.map(ed=>{const a=node(ed.from),b=node(ed.to);if(!a||!b)return'';const dx=b.x-a.x,dy=b.y-a.y,d=Math.hypot(dx,dy)||1;const x1=a.x+dx/d*32,y1=a.y+dy/d*32,x2=b.x-dx/d*34,y2=b.y-dy/d*34;return`<path class="pn-hot" d="M${x1},${y1} L${x2},${y2}"/><path class="pn-edge" d="M${x1},${y1} L${x2},${y2}"/>`}).join('');NG.innerHTML='';m.nodes.forEach(n=>{const g=document.createElementNS('http://www.w3.org/2000/svg','g');g.classList.add('pn-node');g.dataset.id=n.id;g.innerHTML=n.type==='place'?`<circle class="pn-place ${sel===n.id?'pn-sel':''}" r="30" cx="${n.x}" cy="${n.y}"></circle>${tokens(n)}<text class="pn-label" x="${n.x}" y="${n.y+50}">${n.label}</text>`:`<rect class="pn-trans ${sel===n.id?'pn-sel':''}" x="${n.x-12}" y="${n.y-34}" width="24" height="68" rx="4"></rect><text class="pn-label" x="${n.x}" y="${n.y+52}">${n.label}</text>`;g.onpointerdown=e=>down(e,n.id);g.onclick=e=>clickNode(e,n.id);NG.appendChild(g)});info();applyView()}
function tokens(n){let out='';for(let i=0;i<n.tokens;i++){const a=i*2*Math.PI/Math.max(1,n.tokens);out+=`<circle class="pn-token" cx="${n.x+Math.cos(a)*12}" cy="${n.y+Math.sin(a)*12}" r="5"></circle>`}return out}
function node(id){return m.nodes.find(n=>n.id===id)}
function down(e,id){drag={kind:'node',id,dx:pt(e).x-node(id).x,dy:pt(e).y-node(id).y};svg.setPointerCapture(e.pointerId)}
svg.onpointermove=e=>{if(!drag)return;if(drag.kind==='pan'){const r=svg.getBoundingClientRect();view.x=drag.ox+(e.clientX-drag.sx)*900/r.width;view.y=drag.oy+(e.clientY-drag.sy)*650/r.height;applyView();return}const p=pt(e),n=node(drag.id);n.x=p.x-drag.dx;n.y=p.y-drag.dy;render()}
svg.onpointerup=()=>{if(drag){save()}drag=null}
function clickNode(e,id){e.stopPropagation();if(tool==='edge'){if(!pending){pending=id;sel=id}else if(pending!==id){const a=node(pending),b=node(id);if(a.type!==b.type)m.edges.push({id:uid(),from:pending,to:id});pending=null;sel=id;save()}render();return}sel=id;render()}
function addToken(){const n=node(sel);if(n&&n.type==='place'){n.tokens++;save();render()}}
function enabled(t){const ins=m.edges.filter(e=>e.to===t.id).map(e=>node(e.from)).filter(n=>n&&n.type==='place');return ins.length&&ins.every(p=>p.tokens>0)}
function fire(t){m.edges.filter(e=>e.to===t.id).forEach(e=>{const p=node(e.from);if(p&&p.type==='place')p.tokens--});m.edges.filter(e=>e.from===t.id).forEach(e=>{const p=node(e.to);if(p&&p.type==='place')p.tokens++});save();render()}
function fireSelected(){const t=node(sel);if(t&&t.type==='trans'&&enabled(t))fire(t);else alert('Transition nicht aktiviert.')}
function info(){document.getElementById('info').innerHTML=m.nodes.map(n=>`<div class="pn-card"><b>${n.label}</b> ${n.type==='place'?'Stelle, Marken: '+n.tokens:'Transition, '+(enabled(n)?'<span class="ok">aktiviert</span>':'<span class="no">blockiert</span>')}</div>`).join('')}
function exportJson(){document.getElementById('out').value=JSON.stringify(m,null,2)}
function clearAll(){if(confirm('Alles loeschen?')){m={nodes:[],edges:[]};sel=null;save();render()}}
function demo(s=true){m={nodes:[{id:'p1',type:'place',x:120,y:260,tokens:1,label:'p1'},{id:'t1',type:'trans',x:310,y:260,label:'t1'},{id:'p2',type:'place',x:500,y:260,tokens:0,label:'p2'},{id:'t2',type:'trans',x:690,y:260,label:'t2'}],edges:[{from:'p1',to:'t1'},{from:'t1',to:'p2'},{from:'p2',to:'t2'},{from:'t2',to:'p1'}]};sel='t1';if(s)save();render();exportJson()}load();
</script>

@include('tools._seo_content', ['toolSlug' => 'petri-netz-editor', 'toolName' => 'Petri-Netz-Editor'])

@endsection