FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Zeile 23: Zeile 23:
Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt.   
Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt.   
Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.
Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.
<!-- VARIANTE B – KORRIGIERT -->
<!-- VARIANTE B – FINAL OPTIMIERT -->
<html>
<html>
<style>
<style>
   .gozinto-wrap {
   .gozinto-wrap {
     width:95vw;
     width:95vw;
     height:55vw;
     height:50vw;
     max-width:1100px;
     max-width:1100px;
     max-height:500px;
     max-height:480px;
     border:0;
     border:0;
     margin:0;
     margin:0;
Zeile 51: Zeile 51:
   }
   }


   .node-text {
  /* Einheitliche Schriftgröße */
     font-family: sans-serif;
   .node-text, .count-text {
     font-family:sans-serif;
     font-size:14px;
     font-size:14px;
     fill:#000;
     fill:#000;
Zeile 70: Zeile 71:
     stroke:#000;
     stroke:#000;
     stroke-width:1.5;
     stroke-width:1.5;
  }
  .count-text {
    font-family:sans-serif;
    font-size:11px;
    text-anchor:middle;
    dominant-baseline:middle;
    pointer-events:none;
   }
   }
</style>
</style>


<div class="gozinto-wrap">
<div class="gozinto-wrap">
<svg id="gozinto_svg" viewBox="0 0 1400 600" preserveAspectRatio="xMinYMin meet">
<svg id="gozinto_svg" viewBox="0 0 1400 520" preserveAspectRatio="xMinYMin meet">
</svg>
</svg>
</div>
</div>
Zeile 89: Zeile 82:
(function(){
(function(){
   const svg = document.getElementById("gozinto_svg");
   const svg = document.getElementById("gozinto_svg");
  // leicht reduzierte Abstände
   const scale = 100;
   const scale = 100;
   const yOffset = 20;
   const yOffset = 5;          // früher 20 → Grafik rückt nach oben
  const xOffsetGlobal = 80;   // gesamte Grafik leicht nach rechts (zentrieren)


   function svgEl(name, attrs){
   function svgEl(name, attrs){
Zeile 98: Zeile 94:
   }
   }


  // ---- SVG-Koordinaten aus Mausposition ----
   function getSVGcoords(evt){
   function getSVGcoords(evt){
     const pt = svg.createSVGPoint();
     const pt = svg.createSVGPoint();
Zeile 106: Zeile 101:
   }
   }


   // ---- NODE (rechteck) ----
   // ----------- NODE -----------
   function createNode(id, cx, cy, w, h, label){
   function createNode(id, cx, cy, w, h, label){
    cx += xOffsetGlobal/scale;  // gesamte Grafik nach rechts versetzt
     const g = svgEl("g", {"data-id":id});
     const g = svgEl("g", {"data-id":id});
     const rect = svgEl("rect", {
     const rect = svgEl("rect", {
       class:"node-rect",
       class:"node-rect",
       x:(cx-w/2)*scale, y:(cy-h/2)*scale + yOffset,
       x:(cx-w/2)*scale, y:(cy-h/2)*scale + yOffset,
       width:w*scale, height:h*scale,
       width:w*scale, height:h*scale, rx:6, ry:6
      rx:6, ry:6
     });
     });
     const text = svgEl("text", {
     const text = svgEl("text", {
       class:"node-text",
       class:"node-text",
       x:cx*scale, y:cy*scale+yOffset,
       x:cx*scale, y:cy*scale+yOffset,
       "text-anchor":"middle", "dominant-baseline":"middle"
       "text-anchor":"middle",
      "dominant-baseline":"middle"
     });
     });
     text.textContent = label;
     text.textContent = label;
Zeile 126: Zeile 124:
     svg.appendChild(g);
     svg.appendChild(g);


     let node = {id,cx,cy,w,h,rect,text,g};
     const node = {id,cx,cy,w,h,rect,text,g};


     // ---- Dragging ----
     // Draggen
     let dragging=false, start={};
     let dragging=false, start={};


Zeile 162: Zeile 160:
   }
   }


   // --- Geometrie Hilfsfunktionen ---
   // ------- Geometrie -------
   function intersectRectBorder(node, tx, ty){
   function intersectRectBorder(node, tx, ty){
     const cx=node.cx, cy=node.cy, w2=node.w/2, h2=node.h/2;
     const cx=node.cx, cy=node.cy, w2=node.w/2, h2=node.h/2;
Zeile 169: Zeile 167:


     if(Math.abs(dx)>1e-9){
     if(Math.abs(dx)>1e-9){
       let t1=(-w2)/dx;
       let t1=(-w2)/dx; let y1=cy+t1*dy;
      let y1=cy+t1*dy;
       if(t1>0 && y1>=cy-h2 && y1<=cy+h2) pts.push({x:cx-w2,y:y1,t:t1});
       if(t1>0 && y1>=cy-h2 && y1<=cy+h2) pts.push({x:cx-w2,y:y1,t:t1});
       let t2=(w2)/dx;
       let t2=(w2)/dx; let y2=cy+t2*dy;
      let y2=cy+t2*dy;
       if(t2>0 && y2>=cy-h2 && y2<=cy+h2) pts.push({x:cx+w2,y:y2,t:t2});
       if(t2>0 && y2>=cy-h2 && y2<=cy+h2) pts.push({x:cx+w2,y:y2,t:t2});
     }
     }
     if(Math.abs(dy)>1e-9){
     if(Math.abs(dy)>1e-9){
       let t3=(-h2)/dy;
       let t3=(-h2)/dy; let x3=cx+t3*dx;
      let x3=cx+t3*dx;
       if(t3>0 && x3>=cx-w2 && x3<=cx+w2) pts.push({x:x3,y:cy-h2,t:t3});
       if(t3>0 && x3>=cx-w2 && x3<=cx+w2) pts.push({x:x3,y:cy-h2,t:t3});
       let t4=(h2)/dy;
       let t4=(h2)/dy; let x4=cx+t4*dx;
      let x4=cx+t4*dx;
       if(t4>0 && x4>=cx-w2 && x4<=cx+w2) pts.push({x:x4,y:cy+h2,t:t4});
       if(t4>0 && x4>=cx-w2 && x4<=cx+w2) pts.push({x:x4,y:cy+h2,t:t4});
     }
     }
     pts.sort((a,b)=>a.t-b.t);
     pts.sort((a,b)=>a.t-b.t);
     return pts[0] || {x:cx,y:cy};
     return pts[0] || {x:cx,y:cy};
Zeile 214: Zeile 207:


     text.textContent=amount;
     text.textContent=amount;
     g.appendChild(lineA);
     g.appendChild(lineA);
     g.appendChild(lineB);
     g.appendChild(lineB);
Zeile 220: Zeile 212:
     g.appendChild(text);
     g.appendChild(text);
     g.appendChild(arrow);
     g.appendChild(arrow);
     svg.appendChild(g);
     svg.appendChild(g);


Zeile 240: Zeile 231:


     const px=p=>[p.x*scale, p.y*scale+yOffset];
     const px=p=>[p.x*scale, p.y*scale+yOffset];
 
     const F=px(pF), Ci=px(pCircleIn), Co=px(pCircleOut), T=px(pT);
     const F = px(pF);
    const Ci = px(pCircleIn);
    const Co = px(pCircleOut);
    const T = px(pT);


     e.lineA.setAttribute("d",`M ${F[0]} ${F[1]} L ${Ci[0]} ${Ci[1]}`);
     e.lineA.setAttribute("d",`M ${F[0]} ${F[1]} L ${Ci[0]} ${Ci[1]}`);
Zeile 257: Zeile 244:


     let ux=T[0]-Co[0], uy=T[1]-Co[1];
     let ux=T[0]-Co[0], uy=T[1]-Co[1];
     let L=Math.sqrt(ux*ux+uy*uy);
     let L=Math.sqrt(ux*ux+uy*uy); if(L<1e-6) L=1;
    if(L<1e-6) L=1;
     ux/=L; uy/=L;
     ux/=L; uy/=L;


Zeile 266: Zeile 252:
   function updateAllEdges(){ edges.forEach(updateEdge); }
   function updateAllEdges(){ edges.forEach(updateEdge); }


   // ---- NODES ----
   // ------------ Nodes ------------
   const nodes={};
   const nodes={};


Zeile 282: Zeile 268:
   nodes.B5=createNode("B5",10,3.3,1.0,0.5,"B5");
   nodes.B5=createNode("B5",10,3.3,1.0,0.5,"B5");


   // ---- EDGES ----
   // ------------ Verbindungen ------------
   makeConnection(nodes.E1,nodes.B1,"2",2.2,-0.2);
   makeConnection(nodes.E1,nodes.B1,"2",2.2,-0.2);
   makeConnection(nodes.E2,nodes.B1,"1",2.2, 0.2);
   makeConnection(nodes.E2,nodes.B1,"1",2.2, 0.2);
Abgerufen von „https://wiki.flbk-hamm.de/Gozintograph“