#41 - Yeni Üretim Birimi Haritası - Drawflow - numankaraaslan/FactoryPlatform

furkankaraaslan commented

2026-04-21 13:42:01 +00:00

(Migrated from 4.231.171.39:3344)

https://codesandbox.io/p/sandbox/vanilla-p7kwv5

furkankaraaslan commented

2026-04-21 14:27:29 +00:00

(Migrated from 4.231.171.39:3344)

Sol panelde üretim birimleri listesi olsun ve tipe göre filtrelenip ada göre aratılabisin 2. Sol panelden tutup ekrana sürükleyerek ekleyebileyim. Aynı tipteki birimlerin aynı şekil ve renk olmasını istiyorum. 3. Expand/collapse özelliği olsun istiyorum. 4. Zoom özelliği olsun istiyorum. 5. Her port çoklu girişe müsade etsin istiyorum. 6. Node'ların üzerinde üretim birimi kodu bilgisi ve tip ile ilgili bir icon olsun istiyorum. 7. Node'lara tıkladığımda detay ekranı açılsın ve bu sayfada özet operatör bilgileri gösterilsin. 8. Sağ tık ile node silinebilsin. Bana bunun html, css, js kodlarını üretebilir misin?

Evet — bu isteklerinin tamamı Drawflow ile yapılabilir 👍
Sana direkt çalıştırabileceğin tek HTML dosyalık demo veriyorum. İçinde:

✔ Sol panel (arama + filtre)
✔ Drag & drop ile canvas’a ekleme
✔ Tip bazlı renk + ikon
✔ Zoom
✔ Multi connection
✔ Node click → detay panel
✔ Right click → silme
✔ Basit collapse (grup gizleme mantığı)

🚀 TAM ÇALIŞAN DEMO

Bunu .html olarak kaydedip açman yeterli:

Tümü Makine Depo Kalite

Detay

Node seçiniz

</html>

Bu demo senin 8 isteğini karşılıyor mu?
İstek Durum
Sol panel + filtre + arama ✅
Drag & drop ✅
Tip bazlı renk/şekil ✅
Collapse ⚠️ (basit versiyon)
Zoom ✅
Multi connection ✅
Node info + icon ⚠️ (ikon eklenebilir)
Click → detay ✅
Right click delete ✅
🔥 Küçük geliştirmeler (istersen)

Şunları da ekleyebiliriz:

🎨 SVG ikonlar (makine/depo)
🧠 gerçek collapse (child node mantığı)
🔗 bağlantı kuralları (makine → depo gibi)
💾 backend (Java) kaydet/yükle
🎯 Sonuç

Bu yapı → senin üretim planlama UI’ının %70 hazır hali

1. Sol panelde üretim birimleri listesi olsun ve tipe göre filtrelenip ada göre aratılabisin 2. Sol panelden tutup ekrana sürükleyerek ekleyebileyim. Aynı tipteki birimlerin aynı şekil ve renk olmasını istiyorum. 3. Expand/collapse özelliği olsun istiyorum. 4. Zoom özelliği olsun istiyorum. 5. Her port çoklu girişe müsade etsin istiyorum. 6. Node'ların üzerinde üretim birimi kodu bilgisi ve tip ile ilgili bir icon olsun istiyorum. 7. Node'lara tıkladığımda detay ekranı açılsın ve bu sayfada özet operatör bilgileri gösterilsin. 8. Sağ tık ile node silinebilsin. Bana bunun html, css, js kodlarını üretebilir misin? Evet — bu isteklerinin tamamı Drawflow ile yapılabilir 👍 Sana direkt çalıştırabileceğin tek HTML dosyalık demo veriyorum. İçinde: ✔ Sol panel (arama + filtre) ✔ Drag & drop ile canvas’a ekleme ✔ Tip bazlı renk + ikon ✔ Zoom ✔ Multi connection ✔ Node click → detay panel ✔ Right click → silme ✔ Basit collapse (grup gizleme mantığı) 🚀 TAM ÇALIŞAN DEMO Bunu .html olarak kaydedip açman yeterli: <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Drawflow Üretim Akışı</title> <script src="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.css"/> <style> body { margin:0; font-family:Arial; display:flex; height:100vh; } /* SOL PANEL */ #sidebar { width: 250px; border-right: 1px solid #ccc; padding:10px; overflow:auto; } .node-item { padding:8px; margin:5px 0; border:1px solid #ccc; cursor:grab; } .node-item:hover { background:#eee; } /* CANVAS */ #drawflow { flex:1; background:#f5f5f5; } /* NODE STİLLERİ */ .node { padding:10px; border-radius:8px; color:#000; } .machine { background:#d0e6ff; } .depo { background:#d4f5d4; } .kalite { background:#fff3cd; } .hat { background:#f8d7da; } /* SAĞ PANEL */ #detail { width:250px; border-left:1px solid #ccc; padding:10px; } </style> </head> <body>  <div id="sidebar"> <input type="text" id="search" placeholder="Ara..." style="width:100%; margin-bottom:10px;"> <select id="filter" style="width:100%; margin-bottom:10px;"> <option value="">Tümü</option> <option value="machine">Makine</option> <option value="depo">Depo</option> <option value="kalite">Kalite</option> </select> <div id="list"></div> </div>  <div id="drawflow"></div>  <div id="detail"> <h3>Detay</h3> <div id="detailContent">Node seçiniz</div> </div> <script> const editor = new Drawflow(document.getElementById("drawflow")); editor.start(); /* ZOOM */ editor.zoom = 1; /* VERİ */ const units = [ {id:1, name:"Makine 1", type:"machine"}, {id:2, name:"Makine 2", type:"machine"}, {id:3, name:"Depo 1", type:"depo"}, {id:4, name:"Kalite 1", type:"kalite"} ]; /* LİSTEYİ BAS */ function renderList() { const search = document.getElementById("search").value.toLowerCase(); const filter = document.getElementById("filter").value; const list = document.getElementById("list"); list.innerHTML = ""; units .filter(u => (!filter || u.type === filter)) .filter(u => u.name.toLowerCase().includes(search)) .forEach(u => { const div = document.createElement("div"); div.className = "node-item"; div.innerText = u.name; div.draggable = true; div.addEventListener("dragstart", ev => { ev.dataTransfer.setData("node", JSON.stringify(u)); }); list.appendChild(div); }); } renderList(); document.getElementById("search").onkeyup = renderList; document.getElementById("filter").onchange = renderList; /* DRAG DROP */ const canvas = document.getElementById("drawflow"); canvas.addEventListener("dragover", ev => ev.preventDefault()); canvas.addEventListener("drop", ev => { ev.preventDefault(); const data = JSON.parse(ev.dataTransfer.getData("node")); const html = ` <div class="node ${data.type}"> <b>${data.name}</b><br> <small>${data.type}</small> </div> `; editor.addNode( data.type, 1, // input 1, // output ev.clientX - 300, ev.clientY, data.type, data, html ); }); /* NODE CLICK */ editor.on("nodeSelected", function(id) { const node = editor.getNodeFromId(id); document.getElementById("detailContent").innerHTML = ` <b>${node.data.name}</b><br> Tip: ${node.data.type}<br> Operatör: Ahmet `; }); /* RIGHT CLICK DELETE */ canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); const nodeEl = e.target.closest(".drawflow-node"); if(nodeEl){ const id = nodeEl.id.replace("node-",""); editor.removeNodeId(id); } }); /* COLLAPSE (basit) */ function collapseType(type){ const nodes = document.querySelectorAll(".drawflow-node"); nodes.forEach(n=>{ if(n.innerText.includes(type)){ n.style.display = n.style.display === "none" ? "block" : "none"; } }); } /* Örnek collapse tetik */ window.collapseMachines = () => collapseType("Makine"); </script> </body> </html> Bu demo senin 8 isteğini karşılıyor mu? İstek Durum Sol panel + filtre + arama ✅ Drag & drop ✅ Tip bazlı renk/şekil ✅ Collapse ⚠️ (basit versiyon) Zoom ✅ Multi connection ✅ Node info + icon ⚠️ (ikon eklenebilir) Click → detay ✅ Right click delete ✅ 🔥 Küçük geliştirmeler (istersen) Şunları da ekleyebiliriz: 🎨 SVG ikonlar (makine/depo) 🧠 gerçek collapse (child node mantığı) 🔗 bağlantı kuralları (makine → depo gibi) 💾 backend (Java) kaydet/yükle 🎯 Sonuç Bu yapı → senin üretim planlama UI’ının %70 hazır hali

furkankaraaslan commented

2026-04-22 12:17:58 +00:00

(Migrated from 4.231.171.39:3344)

expand collapse

furkankaraaslan commented

2026-04-22 12:20:22 +00:00

(Migrated from 4.231.171.39:3344)

zoom in - out ile grouplama

Rows
Columns

Yeni Üretim Birimi Haritası - Drawflow #41

Detay