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: Reines SVG + JS (kein JSXGraph) -->
<html>
<html>
<div id="gozinto_small" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<style>
  .gozinto-wrap { width:95vw; max-width:1000px; height:70vw; max-height:600px; border:0px solid #ccc; }
  svg { width:100%; height:100%; touch-action:none; user-select:none; }
  .node-rect { fill:#3498db; stroke:#1f4e78; stroke-width:2; cursor:grab; }
  .node-text { font-family: sans-serif; font-size:13px; 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; }
  .count-text { font-family:sans-serif; font-size:12px; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
</style>


<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<div class="gozinto-wrap">
<svg id="gozinto_svg" viewBox="0 0 1400 700" preserveAspectRatio="xMidYMid meet">
  <!-- edges will be inserted dynamically -->
</svg>
</div>


<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
(function(){
  const svg = document.getElementById('gozinto_svg');


     var brd = JXG.JSXGraph.initBoard('gozinto_small', {
  // Layout scale (convert logical coords to svg px)
        boundingbox: [-1, 10, 15, -1],
  const scale = 100; // 1 unit = 100px
        axis: false,
  const yOffset = 50;
        showNavigation: false
 
  // Utility: create SVG element
  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;
  }
 
  // Node factory: creates a rect group with fixed size but movable
  function createNode(id, cx, cy, w, h, label){
    const g = svgEl('g', {class:'node', '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);
    // Hilfsfunktion: Schnittpunkt mit einem Rechteckrand
    g.appendChild(text);
    // -------------------------------------------------------------
    svg.appendChild(g);
    function edgePointRect(rect, targetPoint) {
        return brd.create('intersection', [
            brd.create('line', [
                ()=>rect.centerX(),
                ()=>rect.centerY(),
                targetPoint
            ], {visible:false}),


            // Die vier Polygonkanten
    // state
            brd.create('segment', [rect.p1, rect.p2], {visible:false}),
    const node = {
            brd.create('segment', [rect.p2, rect.p3], {visible:false}),
      id, cx, cy, w, h, g, rect, text
            brd.create('segment', [rect.p3, rect.p4], {visible:false}),
    };
            brd.create('segment', [rect.p4, rect.p1], {visible:false})
        ], {visible:false});
    }


     // -------------------------------------------------------------
     // dragging
     // Hilfsfunktion: Punkt am Kreisrand (statt im Zentrum)
     let dragging = false;
    // -------------------------------------------------------------
     let start = null;
     function edgePointCircle(pCenter, R, targetPoint) {
        return brd.create('point', [
            ()=> pCenter.X() + R * (targetPoint.X() - pCenter.X()) /
                  Math.sqrt( (targetPoint.X()-pCenter.X())**2 + (targetPoint.Y()-pCenter.Y())**2 ),


            ()=> pCenter.Y() + R * (targetPoint.Y() - pCenter.Y()) /
    rect.addEventListener('pointerdown', function(e){
                  Math.sqrt( (targetPoint.X()-pCenter.X())**2 + (targetPoint.Y()-pCenter.Y())**2 )
      rect.setPointerCapture(e.pointerId);
        ], {visible:false, fixed:true});
      dragging = true;
     }
      start = {x:e.clientX, y:e.clientY, cx:node.cx, cy:node.cy};
    });
    rect.addEventListener('pointermove', function(e){
      if(!dragging) return;
      const dx = (e.clientX - start.x)/scale;
      const dy = (e.clientY - start.y)/scale;
      node.cx = start.cx + dx;
      node.cy = start.cy + dy;
      updateNode(node);
      updateAllEdges();
    });
    rect.addEventListener('pointerup', function(e){
      dragging = false;
      rect.releasePointerCapture(e.pointerId);
    });
    rect.addEventListener('pointercancel', function(e){ dragging=false; });
 
     return node;
  }


    // -------------------------------------------------------------
  function updateNode(node){
     // Rechteck (nicht skalierbar, nur verschiebbar)
     node.rect.setAttribute('x', (node.cx - node.w/2)*scale);
     // -------------------------------------------------------------
     node.rect.setAttribute('y', (node.cy - node.h/2)*scale + yOffset);
     function createRect(x,y,w,h,labelText) {
     node.text.setAttribute('x', node.cx*scale);
    node.text.setAttribute('y', node.cy*scale + yOffset);
  }


        let p1 = brd.create('point',[x,y],     {visible:false, fixed:true});
  // compute intersection of ray center->target with rectangle border (axis-aligned)
        let p2 = brd.create('point',[x+w,y],    {visible:false, fixed:true});
  function intersectRectBorder(node, targetX, targetY){
        let p3 = brd.create('point',[x+w,y-h],  {visible:false, fixed:true});
    const cx = node.cx, cy = node.cy;
        let p4 = brd.create('point',[x,y-h],    {visible:false, fixed:true});
    const dx = targetX - cx, dy = targetY - cy;
    const xMin = node.cx - node.w/2, xMax = node.cx + node.w/2;
    const yMin = node.cy - node.h/2, yMax = node.cy + node.h/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){
      let t3 = (yMin - cy)/dy;
      let x3 = cx + t3*dx;
      if(t3>0 && x3>=xMin-1e-9 && x3<=xMax+1e-9) tCandidates.push({t:t3,x:x3,y:yMin});
      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};
  }


        let poly = brd.create('polygon',[p1,p2,p3,p4], {
  // circle boundary point toward target
            fillColor:'#3498db',
  function pointOnCircle(cx, cy, R, tx, ty){
            fillOpacity:0.8,
    const dx = tx - cx, dy = ty - cy;
            vertices:{visible:false},
    const d = Math.sqrt(dx*dx + dy*dy);
            borders:{strokeWidth:2},
    if(d < 1e-9) return {x:cx, y:cy};
            withLines:false
    return {x: cx + R*dx/d, y: cy + R*dy/d};
        });
  }


        // Gruppe verschiebbar machen?
  // arrowhead path (triangle) at (x,y) pointing to direction (ux,uy)
        poly.draggable = true;
  function makeArrowHead(x, y, ux, uy, size){
    // 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`;
  }


        brd.create('text',
  // Edge structure: {fromNode, toNode, amount, circle, lineA, lineB, arrow}
            [ ()=> (p1.X()+p3.X())/2,
  const edges = [];
              ()=> (p1.Y()+p3.Y())/2,
              labelText ],
            {anchorX:'middle', anchorY:'middle', strokeColor:'black', fontSize:14}
        );


        return {
  function makeConnection(fromNode, toNode, amount, yMid, xOffset){
            p1:p1, p2:p2, p3:p3, p4:p4,
    const group = svgEl('g', {});
            centerX:()=> (p1.X()+p3.X())/2,
    const circle = svgEl('circle', {class:'count-circle'});
            centerY:()=> (p1.Y()+p3.Y())/2
    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};
     // Kreis-Knoten (mit Randverbindung)
     edges.push(e);
     // -------------------------------------------------------------
     updateEdge(e);
    function createCircleNode(x,y,labelText){
  }
        let p = brd.create('point', [x,y], {visible:false});
        let R = 0.35;


        brd.create('circle', [p, R], {
  function updateEdge(e){
            strokeColor:'black',
    // circle center is midpoint between centers with offset
            fillColor:'white'
    const cx = (e.fromNode.cx + e.toNode.cx)/2 + (e.xOffset||0);
        });
    const cy = e.yMid;
    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);


        brd.create('text',[()=>p.X(), ()=>p.Y(), labelText],
    // convert to px
            {anchorX:'middle', anchorY:'middle', fontSize:12});
    function px(p){ return [p.x*scale, p.y*scale + yOffset]; }
    const pf = px(pFrom), pcIn = px(cIn), pcOut = px(cOut), pt = px(pTo);


        p.radius = R;
    // line A: from rect edge -> circle edge (no arrow)
        return p;
    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)
    // Verbindung: Rechteckrand → Kreisrand → Rechteckrand
     e.lineB.setAttribute('d', `M ${pcOut[0]} ${pcOut[1]} L ${pt[0]} ${pt[1]}`);
    // mit leichten Offsets damit Spitzen nicht überlappen
    // -------------------------------------------------------------
     function makeConnection(E, B, amount, yMid, offsetX){


        // Kreis
    // circle
        let c = createCircleNode(
    e.circle.setAttribute('cx', (cx*scale));
            ()=> (E.centerX()+B.centerX())/2 + offsetX,
    e.circle.setAttribute('cy', (cy*scale + yOffset));
            yMid,
    e.circle.setAttribute('r', R*scale);
            amount
    e.circle.setAttribute('class','count-circle');
        );


        // Punkte am Rand
    // text
        let pE = edgePointRect(E, c);
    e.text.setAttribute('x', cx*scale);
        let pC1 = edgePointCircle(c, c.radius, pE);
    e.text.setAttribute('y', cy*scale + yOffset);
    e.text.textContent = e.amount;


        let pC2 = edgePointCircle(c, c.radius, B);
    // arrow head: compute unit vector from cOut -> pTo
        let pB = edgePointRect(B, c);
    var ux = (pt[0]-pcOut[0]), uy = (pt[1]-pcOut[1]);
    var L = Math.sqrt(ux*ux + uy*uy);
    if(L<1e-6) L=1;
    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');
  }


        // Linien: E → Kreis
  // create nodes (logical coords)
        brd.create('line', [pE, pC1], {
  const nodes = {};
            straightFirst:false, straightLast:false,
  nodes.E1 = createNode('E1', 0, 6.8, 1.0, 0.6, 'E1');
            strokeWidth:2
  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');


        // Linien: Kreis → B
  nodes.B1 = createNode('B1', 0.75, 3, 1.0, 0.6, 'B1');
        brd.create('arrow', [pC2, pB], {
  nodes.B2 = createNode('B2', 2.5, 3, 1.0, 0.6, 'B2');
            strokeWidth:2
  nodes.B3 = createNode('B3', 5, 3, 1.0, 0.6, 'B3');
        });
  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)
    // Einzelteile
  makeConnection(nodes.E1, nodes.B1, '2', 5.6, -0.2);
    // -------------------------------------------------------------
  makeConnection(nodes.E2, nodes.B1, '1', 5.6, 0.2);
    let E1 = createRect(0,8,2,1,'E1');
    let E2 = createRect(3,8,2,1,'E2');
    let E3 = createRect(6,8,2,1,'E3');
    let E4 = createRect(9,8,2,1,'E4');


    // -------------------------------------------------------------
  makeConnection(nodes.E1, nodes.B2, '2', 5.6, -0.2);
    // Bauteile
  makeConnection(nodes.E2, nodes.B2, '1', 5.6, 0.2);
    // -------------------------------------------------------------
    let B1 = createRect(0.5,3,2,1,'B1');
    let B2 = createRect(3.5,3,2,1,'B2');
    let B3 = createRect(6.5,3,2,1,'B3');
    let B4 = createRect(9.5,3,2,1,'B4');
    let B5 = createRect(12.5,3,2,1,'B5');


    // -------------------------------------------------------------
  makeConnection(nodes.E1, nodes.B3, '1', 5.6, -0.3);
    // Verbindungen mit Offsets damit nichts überlappt
  makeConnection(nodes.E2, nodes.B3, '1', 5.6,  0.0);
    // -------------------------------------------------------------
  makeConnection(nodes.E3, nodes.B3, '1', 5.6, 0.3);
    makeConnection(E1, B1, "2", 6, -0.2);
    makeConnection(E2, B1, "1", 6, +0.2);


    makeConnection(E1, B2, "2", 6, -0.3);
  makeConnection(nodes.E1, nodes.B4, '2', 5.6, -0.3);
    makeConnection(E2, B2, "1", 6, +0.3);
  makeConnection(nodes.E3, nodes.B4, '1', 5.6, 0.0);
  makeConnection(nodes.E4, nodes.B4, '1', 5.6, 0.3);


    makeConnection(E1, B3, "1", 6, -0.4);
  makeConnection(nodes.E1, nodes.B5, '1', 5.6, -0.2);
    makeConnection(E2, B3, "1", 6, 0);
  makeConnection(nodes.E4, nodes.B5, '2', 5.6, 0.2);
    makeConnection(E3, B3, "1", 6, +0.4);


    makeConnection(E1, B4, "2", 6, -0.4);
  // update all edges
    makeConnection(E3, B4, "1", 6, 0);
  function updateAllEdges(){ edges.forEach(e=>updateEdge(e)); }
    makeConnection(E4, B4, "1", 6, +0.4);


    makeConnection(E1, B5, "1", 6, -0.2);
  // initial update
    makeConnection(E4, B5, "2", 6, +0.2);
  updateAllEdges();


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