FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Markierung: Manuelle Zurücksetzung
Markierung: Zurückgesetzt
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: Reines SVG + JS (kein JSXGraph) -->
<html>
<html>
<style>
<style>
  .gozinto-wrap { width:95vw; max-width:1000px; height:70vw; max-height:600px; border:0px solid #ccc; }
    #gozinto_svg {
  svg { width:100%; height:100%; touch-action:none; user-select:none; }
        width: 100%;
  .node-rect { fill:#3498db; stroke:#1f4e78; stroke-width:2; cursor:grab; }
        height: 520px;
  .node-text { font-family: sans-serif; font-size:13px; fill:#000; pointer-events:none; }
        border: 1px solid #ccc;
  .edge-line { stroke:#000; stroke-width:2; fill:none; }
        margin-top: 0;
  .edge-arrow { fill:#000; }
        padding-top: 0;
  .count-circle { fill:#fff; stroke:#000; stroke-width:1.5; }
        display: block;
  .count-text { font-family:sans-serif; font-size:12px; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
    }
 
    .draggable {
        cursor: move;
    }
 
    text {
        user-select: none;
        font-family: Arial, sans-serif;
    }
</style>
</style>


<div class="gozinto-wrap">
<svg id="gozinto_svg"></svg>
<svg id="gozinto_svg" viewBox="0 0 1400 700" preserveAspectRatio="xMidYMid meet">
  <!-- edges will be inserted dynamically -->
</svg>
</div>


<script>
<script>
(function(){
// ====================================================================
  const svg = document.getElementById('gozinto_svg');
// Hilfsfunktionen
 
// ====================================================================
  // Layout scale (convert logical coords to svg px)
function createRect(svg, x, y, w, h, text) {
  const scale = 100; // 1 unit = 100px
    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
  const yOffset = 50;
    g.classList.add("draggable");
    g.dataset.type = "rect";


  // Utility: create SVG element
     const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  function svgEl(name, attrs){
    rect.setAttribute("x", x);
     const el = document.createElementNS('http://www.w3.org/2000/svg', name);
    rect.setAttribute("y", y);
     for(const k in (attrs||{})) el.setAttribute(k, attrs[k]);
     rect.setAttribute("width", w);
     return el;
    rect.setAttribute("height", h);
  }
    rect.setAttribute("rx", 6);
    rect.setAttribute("fill", "#3498db");
     rect.setAttribute("stroke", "#1f4e78");
    rect.setAttribute("stroke-width", 2);
    rect.dataset.role = "body";


  // Node factory: creates a rect group with fixed size but movable
     const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
  function createNode(id, cx, cy, w, h, label){
     label.setAttribute("x", x + w / 2);
     const g = svgEl('g', {class:'node', 'data-id':id});
    label.setAttribute("y", y + h / 2 + 4);
     const rect = svgEl('rect', {
    label.setAttribute("text-anchor", "middle");
      class:'node-rect',
    label.setAttribute("fill", "black");
      x: (cx - w/2)*scale, y: (cy - h/2)*scale + yOffset,
     label.setAttribute("font-size", "14");
      width: w*scale, height: h*scale,
     label.textContent = text;
      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(rect);
     g.appendChild(text);
     g.appendChild(label);
     svg.appendChild(g);
     svg.appendChild(g);


     // state
     return g;
    const node = {
}
      id, cx, cy, w, h, g, rect, text
    };


     // dragging
function createCircle(svg, x, y, labelText) {
     let dragging = false;
     const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
     let start = null;
     g.classList.add("draggable");
     g.dataset.type = "circle";


     rect.addEventListener('pointerdown', function(e){
     const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      rect.setPointerCapture(e.pointerId);
    circle.setAttribute("cx", x);
      dragging = true;
    circle.setAttribute("cy", y);
      start = {x:e.clientX, y:e.clientY, cx:node.cx, cy:node.cy};
    circle.setAttribute("r", 12); // KLEINERER KREIS
     });
    circle.setAttribute("fill", "white");
     rect.addEventListener('pointermove', function(e){
     circle.setAttribute("stroke", "black");
      if(!dragging) return;
     circle.setAttribute("stroke-width", 2);
      const dx = (e.clientX - start.x)/scale;
    circle.dataset.role = "body";
      const dy = (e.clientY - start.y)/scale;
 
      node.cx = start.cx + dx;
    const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
      node.cy = start.cy + dy;
    label.setAttribute("x", x);
      updateNode(node);
    label.setAttribute("y", y + 4);
      updateAllEdges();
    label.setAttribute("text-anchor", "middle");
     });
    label.setAttribute("fill", "black");
     rect.addEventListener('pointerup', function(e){
    label.setAttribute("font-size", "10");
      dragging = false;
    label.textContent = labelText;
      rect.releasePointerCapture(e.pointerId);
 
     });
    g.appendChild(circle);
     rect.addEventListener('pointercancel', function(e){ dragging=false; });
    g.appendChild(label);
     svg.appendChild(g);
 
     return g;
}
 
function createLine(svg, from, to, arrowEnd) {
    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
     line.setAttribute("stroke", "black");
     line.setAttribute("stroke-width", 2);


     return node;
     line.dataset.from = from;
  }
    line.dataset.to = to;
    line.dataset.arrow = arrowEnd ? "1" : "0";


  function updateNode(node){
     svg.appendChild(line);
     node.rect.setAttribute('x', (node.cx - node.w/2)*scale);
     updateLine(line);
     node.rect.setAttribute('y', (node.cy - node.h/2)*scale + yOffset);
     return line;
     node.text.setAttribute('x', node.cx*scale);
}
    node.text.setAttribute('y', node.cy*scale + yOffset);
  }


  // compute intersection of ray center->target with rectangle border (axis-aligned)
function centerOf(element) {
  function intersectRectBorder(node, targetX, targetY){
     const body = element.querySelector("[data-role='body']");
     const cx = node.cx, cy = node.cy;
     if (body.tagName === "rect") {
    const dx = targetX - cx, dy = targetY - cy;
        return {
     const xMin = node.cx - node.w/2, xMax = node.cx + node.w/2;
            x: parseFloat(body.getAttribute("x")) + parseFloat(body.getAttribute("width")) / 2,
    const yMin = node.cy - node.h/2, yMax = node.cy + node.h/2;
            y: parseFloat(body.getAttribute("y")) + parseFloat(body.getAttribute("height")) / 2
    let tCandidates = [];
        };
    if(Math.abs(dx) > 1e-9){
      let t1 = (xMin - cx)/dx;
      let y1 = cy + t1*dy;
      if(t1>0 && y1>=yMin-1e-9 && y1<=yMax+1e-9) tCandidates.push({t:t1,x:xMin,y:y1});
      let t2 = (xMax - cx)/dx;
      let y2 = cy + t2*dy;
      if(t2>0 && y2>=yMin-1e-9 && y2<=yMax+1e-9) tCandidates.push({t:t2,x:xMax,y:y2});
     }
     }
     if(Math.abs(dy) > 1e-9){
     if (body.tagName === "circle") {
      let t3 = (yMin - cy)/dy;
        return {
      let x3 = cx + t3*dx;
            x: parseFloat(body.getAttribute("cx")),
      if(t3>0 && x3>=xMin-1e-9 && x3<=xMax+1e-9) tCandidates.push({t:t3,x:x3,y:yMin});
            y: parseFloat(body.getAttribute("cy"))
      let t4 = (yMax - cy)/dy;
        };
      let x4 = cx + t4*dx;
      if(t4>0 && x4>=xMin-1e-9 && x4<=xMax+1e-9) tCandidates.push({t:t4,x:x4,y:yMax});
     }
     }
    if(tCandidates.length===0) return {x:cx,y:cy};
}
    tCandidates.sort((a,b)=>a.t-b.t);
    return {x:tCandidates[0].x, y:tCandidates[0].y};
  }


  // circle boundary point toward target
function updateLine(line) {
  function pointOnCircle(cx, cy, R, tx, ty){
     const fromEl = document.getElementById(line.dataset.from);
     const dx = tx - cx, dy = ty - cy;
     const toEl = document.getElementById(line.dataset.to);
     const d = Math.sqrt(dx*dx + dy*dy);
    if(d < 1e-9) return {x:cx, y:cy};
    return {x: cx + R*dx/d, y: cy + R*dy/d};
  }


  // arrowhead path (triangle) at (x,y) pointing to direction (ux,uy)
     const A = centerOf(fromEl);
  function makeArrowHead(x, y, ux, uy, size){
     const B = centerOf(toEl);
    // perpendicular
     const px = -uy, py = ux;
     const p1x = x, p1y = y;
    const p2x = x - ux*size + px*size*0.5;
    const p2y = y - uy*size + py*size*0.5;
    const p3x = x - ux*size - px*size*0.5;
    const p3y = y - uy*size - py*size*0.5;
    return `M ${p1x} ${p1y} L ${p2x} ${p2y} L ${p3x} ${p3y} Z`;
  }


  // Edge structure: {fromNode, toNode, amount, circle, lineA, lineB, arrow}
    const dx = B.x - A.x;
  const edges = [];
    const dy = B.y - A.y;
    const len = Math.sqrt(dx * dx + dy * dy);


  function makeConnection(fromNode, toNode, amount, yMid, xOffset){
     const ux = dx / len;
     const group = svgEl('g', {});
     const uy = dy / len;
     const circle = svgEl('circle', {class:'count-circle'});
    const text = svgEl('text', {class:'count-text'});
    const lineA = svgEl('path', {class:'edge-line', fill:'none'}); // from rect -> circle (path to allow potential future styling)
    const lineB = svgEl('path', {class:'edge-line', fill:'none'});
    const arrow = svgEl('path', {class:'edge-arrow'});
    group.appendChild(lineA);
    group.appendChild(lineB);
    group.appendChild(circle);
    group.appendChild(text);
    group.appendChild(arrow);
    svg.appendChild(group);


     const e = {fromNode, toNode, amount, circle, text, lineA, lineB, arrow, yMid, xOffset};
     const offsetA = 25; // Abstand vom Rechteck/Kreis
     edges.push(e);
     const offsetB = line.dataset.arrow === "1" ? 25 : 25;
    updateEdge(e);
  }


  function updateEdge(e){
     line.setAttribute("x1", A.x + ux * offsetA);
     // circle center is midpoint between centers with offset
     line.setAttribute("y1", A.y + uy * offsetA);
    const cx = (e.fromNode.cx + e.toNode.cx)/2 + (e.xOffset||0);
     line.setAttribute("x2", B.x - ux * offsetB);
     const cy = e.yMid;
     line.setAttribute("y2", B.y - uy * offsetB);
    const R = 0.35;
}
    // compute in logical coords
    const pFrom = intersectRectBorder(e.fromNode, cx, cy);
     const pTo  = intersectRectBorder(e.toNode, cx, cy);
    const cIn = pointOnCircle(cx, cy, R, pFrom.x, pFrom.y);
     const cOut = pointOnCircle(cx, cy, R, pTo.x, pTo.y);


     // convert to px
function enableDragging(svg) {
     function px(p){ return [p.x*scale, p.y*scale + yOffset]; }
     let selected = null;
     const pf = px(pFrom), pcIn = px(cIn), pcOut = px(cOut), pt = px(pTo);
    let offsetX = 0, offsetY = 0;
 
     svg.addEventListener("mousedown", e => {
        if (!e.target.closest(".draggable")) return;
        selected = e.target.closest(".draggable");
 
        const body = selected.querySelector("[data-role='body']");
        const box = body.getBoundingClientRect();
        offsetX = e.clientX - box.x;
        offsetY = e.clientY - box.y;
 
        e.preventDefault();
    });
 
     window.addEventListener("mousemove", e => {
        if (!selected) return;
 
        const body = selected.querySelector("[data-role='body']");
 
        if (body.tagName === "rect") {
            const w = parseFloat(body.getAttribute("width"));
            const h = parseFloat(body.getAttribute("height"));
            const newX = e.clientX - offsetX;
            const newY = e.clientY - offsetY;
 
            body.setAttribute("x", newX);
            body.setAttribute("y", newY);
 
            const text = selected.querySelector("text");
            text.setAttribute("x", newX + w / 2);
            text.setAttribute("y", newY + h / 2 + 4);
        }
 
        if (body.tagName === "circle") {
            const newX = e.clientX - offsetX + 12;
            const newY = e.clientY - offsetY + 12;
 
            body.setAttribute("cx", newX);
            body.setAttribute("cy", newY);
 
            const text = selected.querySelector("text");
            text.setAttribute("x", newX);
            text.setAttribute("y", newY + 4);
        }
 
        document.querySelectorAll("line").forEach(updateLine);
    });


     // line A: from rect edge -> circle edge (no arrow)
     window.addEventListener("mouseup", () => selected = null);
    lineAPath = `M ${pf[0]} ${pf[1]} L ${pcIn[0]} ${pcIn[1]}`;
}
    e.lineA.setAttribute('d', lineAPath);


    // line B: circle edge -> rect edge (arrowhead drawn separately)
// ====================================================================
    e.lineB.setAttribute('d', `M ${pcOut[0]} ${pcOut[1]} L ${pt[0]} ${pt[1]}`);
// Gozintograph aufbauen
// ====================================================================
const svg = document.getElementById("gozinto_svg");


    // circle
// Einzelteile (oben)
    e.circle.setAttribute('cx', (cx*scale));
const E1 = createRect(svg, 30, 10, 80, 35, "E1");
    e.circle.setAttribute('cy', (cy*scale + yOffset));
E1.id = "E1";
    e.circle.setAttribute('r', R*scale);
const E2 = createRect(svg, 140, 10, 80, 35, "E2");
    e.circle.setAttribute('class','count-circle');
E2.id = "E2";
const E3 = createRect(svg, 250, 10, 80, 35, "E3");
E3.id = "E3";
const E4 = createRect(svg, 360, 10, 80, 35, "E4");
E4.id = "E4";


    // text
// Bauteile (unten)
    e.text.setAttribute('x', cx*scale);
const B1 = createRect(svg, 30, 260, 80, 35, "B1"); B1.id = "B1";
    e.text.setAttribute('y', cy*scale + yOffset);
const B2 = createRect(svg, 140, 260, 80, 35, "B2"); B2.id = "B2";
    e.text.textContent = e.amount;
const B3 = createRect(svg, 250, 260, 80, 35, "B3"); B3.id = "B3";
const B4 = createRect(svg, 360, 260, 80, 35, "B4"); B4.id = "B4";
const B5 = createRect(svg, 470, 260, 80, 35, "B5"); B5.id = "B5";


    // arrow head: compute unit vector from cOut -> pTo
// Verbindungen (mit Kreisen)
    var ux = (pt[0]-pcOut[0]), uy = (pt[1]-pcOut[1]);
function connect(E, B, amount) {
     var L = Math.sqrt(ux*ux + uy*uy);
     const eC = centerOf(E);
    if(L<1e-6) L=1;
     const bC = centerOf(B);
    ux/=L; uy/=L;
    const arrowSize = 12;
     const arrowPath = makeArrowHead(pt[0], pt[1], ux, uy, arrowSize);
    e.arrow.setAttribute('d', arrowPath);
    e.arrow.setAttribute('class','edge-arrow');
  }


  // create nodes (logical coords)
    const midY = (eC.y + bC.y) / 2;
  const nodes = {};
    const midX = (eC.x + bC.x) / 2;
  nodes.E1 = createNode('E1', 0, 6.8, 1.0, 0.6, 'E1');
  nodes.E2 = createNode('E2', 2.5, 6.8, 1.0, 0.6, 'E2');
  nodes.E3 = createNode('E3', 5, 6.8, 1.0, 0.6, 'E3');
  nodes.E4 = createNode('E4', 7.5, 6.8, 1.0, 0.6, 'E4');


  nodes.B1 = createNode('B1', 0.75, 3, 1.0, 0.6, 'B1');
    const circle = createCircle(svg, midX, midY, amount);
  nodes.B2 = createNode('B2', 2.5, 3, 1.0, 0.6, 'B2');
    const idC = "C" + Math.random().toString(36).substring(2);
  nodes.B3 = createNode('B3', 5, 3, 1.0, 0.6, 'B3');
    circle.id = idC;
  nodes.B4 = createNode('B4', 7.5, 3, 1.0, 0.6, 'B4');
  nodes.B5 = createNode('B5', 10, 3, 1.0, 0.6, 'B5');


  // create edges (with small xOffsets to avoid overlap)
    createLine(svg, E.id, idC, false);
  makeConnection(nodes.E1, nodes.B1, '2', 5.6, -0.2);
    createLine(svg, idC, B.id, true);
  makeConnection(nodes.E2, nodes.B1, '1', 5.6, 0.2);
}


  makeConnection(nodes.E1, nodes.B2, '2', 5.6, -0.2);
// B1: E1 + E2
  makeConnection(nodes.E2, nodes.B2, '1', 5.6,  0.2);
connect(E1, B1, "2");
connect(E2, B1, "1");


  makeConnection(nodes.E1, nodes.B3, '1', 5.6, -0.3);
// B2: E1 + E2
  makeConnection(nodes.E2, nodes.B3, '1', 5.6,  0.0);
connect(E1, B2, "2");
  makeConnection(nodes.E3, nodes.B3, '1', 5.6,  0.3);
connect(E2, B2, "1");


  makeConnection(nodes.E1, nodes.B4, '2', 5.6, -0.3);
// B3: E1 + E2 + E3
  makeConnection(nodes.E3, nodes.B4, '1', 5.6,  0.0);
connect(E1, B3, "1");
  makeConnection(nodes.E4, nodes.B4, '1', 5.6,  0.3);
connect(E2, B3, "1");
connect(E3, B3, "1");


  makeConnection(nodes.E1, nodes.B5, '1', 5.6, -0.2);
// B4: E1 + E3 + E4
  makeConnection(nodes.E4, nodes.B5, '2', 5.6,  0.2);
connect(E1, B4, "2");
connect(E3, B4, "1");
connect(E4, B4, "1");


  // update all edges
// B5: E1 + E4
  function updateAllEdges(){ edges.forEach(e=>updateEdge(e)); }
connect(E1, B5, "1");
connect(E4, B5, "2");


  // initial update
// Dragging aktivieren
  updateAllEdges();
enableDragging(svg);


  // re-update edges also when window resizes (visual)
  window.addEventListener('resize', updateAllEdges);
})();
</script>
</script>
</html>
</html>
Abgerufen von „https://wiki.flbk-hamm.de/Gozintograph“