@@ Zeile 433: / Zeile 433: @@
 Die Pfeile im Gozintographen geben an, wie viele Mengeneinheiten eines Materials zur Produktion einer Mengeneinheit des entstehenden Produkts benötigt werden.
+<!-- GOZINTOGRAPH: Rohstoffe → Zwischenprodukte → Endprodukte -->
 <html>
 <style>
@@ Zeile 451: / Zeile 452: @@
      user-select:none;
      background:white;
+  }
+  .node-rect {
+    fill:#3498db;
+    stroke:#1f4e78;
+    stroke-width:2;
+    cursor:grab;
+  }
+  .node-text,
+  .count-text {
+    font-family:sans-serif;
+    font-size:14px;
+    fill:#000;
+    pointer-events:none;
+  }
+  .edge-line {
+    stroke:#000;
+    stroke-width:2;
+    fill:none;
+  }
+  .edge-arrow {
+    fill:#000;
+  }
+  .count-circle {
+    fill:#fff;
+    stroke:#000;
+    stroke-width:1.5;
    }
 </style>
@@ Zeile 456: / Zeile 488: @@
 <div class="gozinto-wrap2">
 <svg id="gozinto_svg"
-      viewBox="0 0 1180 700"
+      viewBox="0 0 1180 640"
       preserveAspectRatio="xMinYMin meet">
 </svg>
@@ Zeile 464: / Zeile 496: @@
 (function(){
-const svg=document.getElementById("gozinto_svg");
+  const svg = document.getElementById("gozinto_svg");
+  const scale = 100;
+  const yOffset = 0;
+  const xOffsetGlobal = 120;
+  function svgEl(name, attrs){
+    const el = document.createElementNS("http://www.w3.org/2000/svg", name);
+    for(const k in (attrs||{}))
+      el.setAttribute(k, attrs[k]);
+    return el;
+  }
+  function getSVGcoords(evt){
+    const pt = svg.createSVGPoint();
+    pt.x = evt.clientX;
+    pt.y = evt.clientY;
+    return pt.matrixTransform(svg.getScreenCTM().inverse());
+  }
+  // -------------------------------------------------
+  // NODE
+  // -------------------------------------------------
+  function createNode(id, cx, cy, w, h, label){
+    cx += xOffsetGlobal / scale;
+    const g = svgEl("g", {"data-id":id});
+    const rect = svgEl("rect", {
+      class:"node-rect",
+      x:(cx-w/2)*scale,
+      y:(cy-h/2)*scale + yOffset,
+      width:w*scale,
+      height:h*scale,
+      rx:6,
+      ry:6
+    });
+    const text = svgEl("text", {
+      class:"node-text",
+      x:cx*scale,
+      y:cy*scale+yOffset,
+      "text-anchor":"middle",
+      "dominant-baseline":"middle"
+    });
+    text.textContent = label;
+    g.appendChild(rect);
+    g.appendChild(text);
+    svg.appendChild(g);
+    const node = {id,cx,cy,w,h,rect,text,g};
+    // Dragging
+    let dragging=false,start={};
+    rect.addEventListener("pointerdown", e=>{
+      rect.setPointerCapture(e.pointerId);
+      dragging=true;
+      const p=getSVGcoords(e);
+      start={
+        px:p.x,
+        py:p.y,
+        cx:node.cx,
+        cy:node.cy
+      };
+    });
+    rect.addEventListener("pointermove", e=>{
+      if(!dragging) return;
+      const p=getSVGcoords(e);
+      node.cx=start.cx+(p.x-start.px)/scale;
+      node.cy=start.cy+(p.y-start.py)/scale;
+      updateNode(node);
+      updateAllEdges();
+    });
+    rect.addEventListener("pointerup", e=>{
+      dragging=false;
+      rect.releasePointerCapture(e.pointerId);
+    });
+    return node;
+  }
+  function updateNode(n){
+    n.rect.setAttribute("x",(n.cx-n.w/2)*scale);
+    n.rect.setAttribute("y",(n.cy-n.h/2)*scale+yOffset);
+    n.text.setAttribute("x",n.cx*scale);
+    n.text.setAttribute("y",n.cy*scale+yOffset);
+  }
+  // -------------------------------------------------
+  // GEOMETRIE
+  // -------------------------------------------------
+  function intersectRectBorder(node, tx, ty){
+    const cx=node.cx;
+    const cy=node.cy;
+    const w2=node.w/2;
+    const h2=node.h/2;
+    const dx=tx-cx;
+    const dy=ty-cy;
+    let pts=[];
+    if(Math.abs(dx)>1e-9){
+      let t1=(-w2)/dx;
+      let y1=cy+t1*dy;
+      if(t1>0 && y1>=cy-h2 && y1<=cy+h2)
+        pts.push({x:cx-w2,y:y1,t:t1});
+      let t2=(w2)/dx;
+      let y2=cy+t2*dy;
+      if(t2>0 && y2>=cy-h2 && y2<=cy+h2)
+        pts.push({x:cx+w2,y:y2,t:t2});
+    }
+    if(Math.abs(dy)>1e-9){
+      let t3=(-h2)/dy;
+      let x3=cx+t3*dx;
-const scale=100;
+      if(t3>0 && x3>=cx-w2 && x3<=cx+w2)
-const yOffset=0;
+        pts.push({x:x3,y:cy-h2,t:t3});
-const xOffsetGlobal=120;
-function svgEl(name,attrs){
+      let t4=(h2)/dy;
-  const el=document.createElementNS("http://www.w3.org/2000/svg",name);
+      let x4=cx+t4*dx;
-  for(const k in (attrs||{})) el.setAttribute(k,attrs[k]);
-  return el;
-}
-function createNode(id,cx,cy,w,h,label){
+      if(t4>0 && x4>=cx-w2 && x4<=cx+w2)
+        pts.push({x:x4,y:cy+h2,t:t4});
+    }
-  cx+=xOffsetGlobal/scale;
+    pts.sort((a,b)=>a.t-b.t);
-  const g=svgEl("g",{});
+    return pts[0] || {x:cx,y:cy};
+  }
-   const rect=svgEl("rect",{
+   function pointOnCircle(cx,cy,R,tx,ty){
-    class:"node-rect",
-    x:(cx-w/2)*scale,
-    y:(cy-h/2)*scale,
-    width:w*scale,
-    height:h*scale,
-    rx:6,
-    ry:6
-  });
-   const text=svgEl("text",{
+    const dx=tx-cx;
-     class:"node-text",
+    const dy=ty-cy;
-     x:cx*scale,
-     y:cy*scale,
+    const d=Math.sqrt(dx*dx+dy*dy);
-     "text-anchor":"middle",
-     "dominant-baseline":"middle"
+    if(d<1e-9) return {x:cx,y:cy};
-   });
+    return {
+      x:cx+R*dx/d,
+      y:cy+R*dy/d
+    };
+  }
+  function makeArrowHead(x,y,ux,uy,size){
+    let px=-uy;
+    let py=ux;
+    return `M ${x} ${y}
+            L ${x-ux*size+px*size*0.5} ${y-uy*size+py*size*0.5}
+            L ${x-ux*size-px*size*0.5} ${y-uy*size-py*size*0.5} Z`;
+  }
+  // -------------------------------------------------
+  // KANTEN
+  // -------------------------------------------------
+   const edges=[];
+  function makeConnection(fromNode,toNode,amount,yMid,xOffset){
+    const g=svgEl("g",{});
+    const lineA=svgEl("path",{class:"edge-line"});
+    const lineB=svgEl("path",{class:"edge-line"});
+    const circle=svgEl("circle",{
+      class:"count-circle"
+    });
+    const text=svgEl("text",{
+      class:"count-text"
+     });
+    const arrow=svgEl("path",{
+      class:"edge-arrow"
+    });
+    text.textContent=amount;
+    g.appendChild(lineA);
+    g.appendChild(lineB);
+    g.appendChild(circle);
+    g.appendChild(text);
+    g.appendChild(arrow);
+    svg.appendChild(g);
+    let e={
+      fromNode,
+      toNode,
+      amount,
+      yMid,
+      xOffset,
+      circle,
+      text,
+      lineA,
+      lineB,
+      arrow
+    };
+    edges.push(e);
+    updateEdge(e);
+  }
+  function updateEdge(e){
+    const cx=(e.fromNode.cx+e.toNode.cx)/2+(e.xOffset||0);
+    const cy=e.yMid;
+    const R=0.14;
+    const pF=intersectRectBorder(e.fromNode,cx,cy);
+    const pT=intersectRectBorder(e.toNode,cx,cy);
+     const pCircleIn=pointOnCircle(cx,cy,R,pF.x,pF.y);
+    const pCircleOut=pointOnCircle(cx,cy,R,pT.x,pT.y);
+    const px=p=>[p.x*scale,p.y*scale+yOffset];
+    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.lineB.setAttribute(
+      "d",
+      `M ${Co[0]} ${Co[1]} L ${T[0]} ${T[1]}`
+    );
+    e.circle.setAttribute("cx",cx*scale);
+    e.circle.setAttribute("cy",cy*scale+yOffset);
+    e.circle.setAttribute("r",R*scale);
+     e.text.setAttribute("x",cx*scale-5);
+    e.text.setAttribute("y",cy*scale+yOffset+5);
+    let ux=T[0]-Co[0];
+    let uy=T[1]-Co[1];
+     let L=Math.sqrt(ux*ux+uy*uy);
+    if(L<1e-6) L=1;
+    ux/=L;
+    uy/=L;
+    e.arrow.setAttribute(
+      "d",
+      makeArrowHead(T[0],T[1],ux,uy,10)
+    );
+   }
+  function updateAllEdges(){
+    edges.forEach(updateEdge);
+  }
-   text.textContent=label;
+   // -------------------------------------------------
+  // NODES
+  // -------------------------------------------------
-   g.appendChild(rect);
+   const nodes={};
-  g.appendChild(text);
-   svg.appendChild(g);
+   // Rohstoffe
-   return {cx,cy,w,h};
+   nodes.R1=createNode("R1",0,0.8,1.0,0.5,"R1");
-}
+  nodes.R2=createNode("R2",2.5,0.8,1.0,0.5,"R2");
+  nodes.R3=createNode("R3",5.0,0.8,1.0,0.5,"R3");
-function drawArrow(x1,y1,x2,y2,label){
+  // Zwischenprodukte
-   const line=svgEl("line",{
+   nodes.Z1=createNode("Z1",1.2,3.2,1.0,0.5,"Z1");
-    x1,y1,x2,y2,
+  nodes.Z2=createNode("Z2",3.6,3.2,1.0,0.5,"Z2");
-    stroke:"black",
-    "stroke-width":"2"
-  });
-   svg.appendChild(line);
+   // Endprodukte
-   const text=svgEl("text",{
+   nodes.E1=createNode("E1",0.5,5.6,1.0,0.5,"E1");
-    x:(x1+x2)/2,
+  nodes.E2=createNode("E2",2.8,5.6,1.0,0.5,"E2");
-    y:(y1+y2)/2-10,
+  nodes.E3=createNode("E3",5.1,5.6,1.0,0.5,"E3");
-    class:"count-text",
-    "text-anchor":"middle"
-  });
-   text.textContent=label;
+   // -------------------------------------------------
+  // VERBINDUNGEN
+  // -------------------------------------------------
-   svg.appendChild(text);
+   // Rohstoffe -> Zwischenprodukte
-}
-const R1=createNode("R1",0,1,1,0.5,"R1");
+  makeConnection(nodes.R1,nodes.Z1,"3",1.8,-0.3);
-const R2=createNode("R2",2.5,1,1,0.5,"R2");
+  makeConnection(nodes.R1,nodes.Z2,"1",1.8,0.4);
-const R3=createNode("R3",5,1,1,0.5,"R3");
-const Z1=createNode("Z1",1.2,3.5,1,0.5,"Z1");
+  makeConnection(nodes.R2,nodes.Z1,"4",1.8,-0.2);
-const Z2=createNode("Z2",3.8,3.5,1,0.5,"Z2");
+  makeConnection(nodes.R2,nodes.Z2,"2",1.8,0.2);
-const E1=createNode("E1",0.5,6,1,0.5,"E1");
+  makeConnection(nodes.R3,nodes.Z2,"3",1.8,0.0);
-const E2=createNode("E2",2.8,6,1,0.5,"E2");
-const E3=createNode("E3",5.1,6,1,0.5,"E3");
-drawArrow(170,120,240,320,"3");
+  // Zwischenprodukte -> Endprodukte
-drawArrow(420,120,240,320,"4");
-drawArrow(170,120,500,320,"1");
+  makeConnection(nodes.Z1,nodes.E1,"2",4.4,-0.2);
-drawArrow(420,120,500,320,"2");
+  makeConnection(nodes.Z1,nodes.E2,"1",4.4,0.2);
-drawArrow(670,120,500,320,"3");
-drawArrow(240,370,170,570,"2");
+  makeConnection(nodes.Z2,nodes.E1,"1",4.4,-0.3);
-drawArrow(240,370,420,570,"1");
+  makeConnection(nodes.Z2,nodes.E2,"3",4.4,0.0);
+  makeConnection(nodes.Z2,nodes.E3,"2",4.4,0.3);
-drawArrow(500,370,170,570,"1");
+  updateAllEdges();
-drawArrow(500,370,420,570,"3");
-drawArrow(500,370,670,570,"2");
 })();

Gozintograph: Unterschied zwischen den Versionen