<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>壁量電卓 柱負担範囲・直下率ビューア Ver.4</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .controls { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* flex-wrap追加 */
    .mode-buttons button { padding: 8px 12px; border-radius: 5px; border: 1px solid #ccc; cursor: pointer; }
    .mode-buttons button.active { background-color: yellow; border-color: gold; font-weight: bold; }
    .mode-buttons button.inactive { background-color: lightgreen; }
    canvas { border: 1px solid #ccc; display: block; margin-top: 10px; margin-bottom: 10px; } /* margin-top追加 */
    textarea#lineData { display: none; } /* 非表示にする */
    /* .floor-controls は特にCSSでの位置指定は不要になりました */
    #chokaritsuResult { margin-bottom: 10px; font-size: 1.1em; width: 100%; order: 2; } /* order を使ってCanvasの上に */
    .canvas-container { order: 3; width: 100%;} /* Canvasを結果の下に */
    .controls > button, .controls > input[type="file"] { margin-right: 5px;} /* ボタン間のマージン調整 */
@media print {
  /* 印刷時には、元のコンテンツをすべて非表示にする */
  body > *:not(#printArea) {
    display: none;
  }

  .adsbygoogle {
    display: none !important;
  }

  /* 印刷エリアだけを表示する */
  #printArea {
    display: block;
  }

  /* ↓ html, body のリセットを追加 */
  html, body {
    margin: 0;
    padding: 0;
  }
  
  .print-page {
    page-break-after: always; /* 各ビューの後に改ページ */
    width: 100%;
    /* height: 100vh; を削除 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .print-page:last-child {
    page-break-after: auto;
  }

  .print-page h2 {
    text-align: center;
  }

  .print-filename {
    margin: 0 0 10px 0; /* 上下の間隔を調整 */
    font-size: 0.9em;
    color: #333;
    text-align: center;
  }

  .print-page img {
    max-width: 100%;
    max-height: 85vh; /* 高さを調整 */
    border: 1px solid #ccc;
  }
}
 .action-buttons {
      display: flex;
      gap: 5px; /* ボタン同士の間隔 */
    }
    .action-buttons button {
      padding: 8px 12px;
      border-radius: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
      background-color: #f0f0f0;
    }
    .action-buttons button:hover {
      background-color: #e0e0e0;
    }
  </style>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  <h1>壁量電卓 柱負担範囲・直下率ビューア Ver.4 8/15修正</h1>
  <h3>壁量電卓の柱無しデータを読み込み、柱を入れたり消したりで負担範囲、直下率を確認してください。左クリックで柱入力、右クリックで柱消去です。柱以外の操作はできません。また印刷は1回でうまく行かない場合はもう1回行うとうまく行きます。</h3>

 <p id="fileNameDisplay" style="font-weight: bold; color: #333; margin: 0;"></p>


 <div class="controls">
    <div class="action-buttons">
      <button id="loadButton">読み込み</button>
      <button id="saveButton">保存</button>
      <button id="printButton">印刷</button>
      <button id="helpButton">解説</button> </div>
    </div>

    <div class="mode-buttons">
      <button id="futanHaniButton" class="active">負担範囲</button>
      <button id="pillarChokaButton" class="inactive">柱の直下率</button>
      <button id="wallChokaButton" class="inactive">壁の直下率</button>
    </div>
    <div class="floor-controls">
      <label><input type="radio" name="floor" value="1" checked> １階</label>
      <label><input type="radio" name="floor" value="2"> ２階</label>
    </div>
    <input type="file" id="fileInput" accept="application/json" style="display:none;">
    <input type="file" id="pillarFileInput" accept="application/json" style="display:none;">
    
    <div id="chokaritsuResult"></div>
    
    <div class="canvas-container">
        <canvas id="gridCanvas"></canvas>
    </div>
  </div>

  <textarea id="lineData" readonly placeholder="線分・柱データ・直下率情報がここに表示されます"></textarea>

  <div id="printArea"></div>


  <script src="choka.js"></script>
  <script>
    const canvas = document.getElementById('gridCanvas');
    const ctx = canvas.getContext('2d');
    const marginLeft = 50, marginRight = 20, marginTop = 20, marginBottom = 50;
    const scalingFactor = 100; // 1m = 100px
    let currentFloor = 1;
    let currentMode = 'futanHani'; // 'futanHani', 'pillarChoka', 'wallChoka'

    let floorData = {
      1: { xAxisData: [], yAxisData: [], lines: [], floorAreaRectangles: [], pillars: [] },
      2: { xAxisData: [], yAxisData: [], lines: [], floorAreaRectangles: [], pillars: [] }
    };

    // --- DOM Elements ---
    const futanHaniButton = document.getElementById('futanHaniButton');
    const pillarChokaButton = document.getElementById('pillarChokaButton');
    const wallChokaButton = document.getElementById('wallChokaButton');
    const loadButton = document.getElementById('loadButton');
    const saveButton = document.getElementById('saveButton');
    const fileInput = document.getElementById('fileInput');
    const pillarFileInput = document.getElementById('pillarFileInput');
    const floorRadioButtons = document.querySelectorAll('input[name="floor"]');
    const lineDataTextArea = document.getElementById('lineData');
    const chokaritsuResultDiv = document.getElementById('chokaritsuResult');


    function updateModeButtons(activeMode) {
      futanHaniButton.classList.remove('active', 'inactive');
      pillarChokaButton.classList.remove('active', 'inactive');
      wallChokaButton.classList.remove('active', 'inactive');

      if (activeMode === 'futanHani') {
        futanHaniButton.classList.add('active');
        pillarChokaButton.classList.add('inactive');
        wallChokaButton.classList.add('inactive');
        floorRadioButtons.forEach(rb => rb.disabled = false);
      } else if (activeMode === 'pillarChoka') {
        futanHaniButton.classList.add('inactive');
        pillarChokaButton.classList.add('active');
        wallChokaButton.classList.add('inactive');
        floorRadioButtons.forEach(rb => rb.disabled = true);
      } else if (activeMode === 'wallChoka') {
        futanHaniButton.classList.add('inactive');
        pillarChokaButton.classList.add('inactive');
        wallChokaButton.classList.add('active');
        floorRadioButtons.forEach(rb => rb.disabled = true);
      }
    }

    function switchMode(newMode) {
      currentMode = newMode;
      updateModeButtons(newMode);
      drawGrid();
    }

    futanHaniButton.addEventListener('click', () => switchMode('futanHani'));
    pillarChokaButton.addEventListener('click', () => switchMode('pillarChoka'));
    wallChokaButton.addEventListener('click', () => switchMode('wallChoka'));

    function getCurrentDisplayData() {
      if (currentMode === 'pillarChoka' || currentMode === 'wallChoka') {
        return floorData[2] || { xAxisData: [], yAxisData: [], lines: [], floorAreaRectangles: [], pillars: [] };
      }
      return floorData[currentFloor] || { xAxisData: [], yAxisData: [], lines: [], floorAreaRectangles: [], pillars: [] };
    }

    function getXPos(i, axisData) {
      if (!axisData || i < 0 || i >= axisData.length) return marginLeft;
      let x = marginLeft;
      for (let j = 0; j < i; j++) {
        if (axisData[j] && typeof axisData[j].spacing === 'number') {
             x += axisData[j].spacing * scalingFactor;
        }
      }
      return x;
    }

    function getYPos(i, axisData) {
      const baseHeight = canvas.height || (marginTop + marginBottom + 400); 
      if (!axisData || i < 0 || i >= axisData.length) return baseHeight - marginBottom;
      let y = baseHeight - marginBottom;
      for (let j = 0; j < i; j++) {
        if (axisData[j] && typeof axisData[j].spacing === 'number') {
            y -= axisData[j].spacing * scalingFactor;
        }
      }
      return y;
    }

    function getNearestGridPoint(clickX, clickY) {
      const d = floorData[currentFloor];
      if (!d.xAxisData || !d.yAxisData) return { x: 0, y: 0, dist: Infinity };
      let nearest = { x: 0, y: 0, dist: Infinity };
      d.xAxisData.forEach((_, i) => {
        const gx = getXPos(i, d.xAxisData);
        d.yAxisData.forEach((_, j) => {
          const gy = getYPos(j, d.yAxisData);
          const dx = gx - clickX, dy = gy - clickY;
          const dist = Math.hypot(dx, dy);
          if (dist < nearest.dist && dist < 20) {
            nearest = { x: i, y: j, dist };
          }
        });
      });
      return { x: nearest.x, y: nearest.y };
    }

    function clipPolygonToRect(poly, rect) {
      if (!poly || !Array.isArray(poly) || poly.length === 0) return [];
      let outputList = poly;
      const edges = [
        { inside: p => p[0] >= rect.x1, intersect: (s, e) => { const t = (rect.x1 - s[0]) / (e[0] - s[0]); return [rect.x1, s[1] + t * (e[1] - s[1])]; }},
        { inside: p => p[0] <= rect.x2, intersect: (s, e) => { const t = (rect.x2 - s[0]) / (e[0] - s[0]); return [rect.x2, s[1] + t * (e[1] - s[1])]; }},
        { inside: p => p[1] >= rect.y1, intersect: (s, e) => { const t = (rect.y1 - s[1]) / (e[1] - s[1]); return [s[0] + t * (e[0] - s[0]), rect.y1]; }},
        { inside: p => p[1] <= rect.y2, intersect: (s, e) => { const t = (rect.y2 - s[1]) / (e[1] - s[1]); return [s[0] + t * (e[0] - s[0]), rect.y2]; }}
      ];
      edges.forEach(edge => {
        const inputList = outputList;
        outputList = [];
        if (!inputList.length) return;
        let S = inputList[inputList.length - 1];
        inputList.forEach(E => {
          if (edge.inside(E)) {
            if (!edge.inside(S)) outputList.push(edge.intersect(S, E));
            outputList.push(E);
          } else if (edge.inside(S)) {
            outputList.push(edge.intersect(S, E));
          }
          S = E;
        });
      });
      return outputList;
    }

    function polygonAreaPx(poly) {
      if (!poly || poly.length < 3) return 0;
      let area = 0;
      for (let i = 0; i < poly.length; i++) {
        const [x1, y1] = poly[i];
        const [x2, y2] = poly[(i + 1) % poly.length];
        area += x1 * y2 - x2 * y1;
      }
      return Math.abs(area / 2);
    }

    function updateCanvasSize() {
        const getActiveMaxIndicesAndSpans = (floorIdx) => {
            const data = floorData[floorIdx];
            let maxXIdx = -1; 
            let maxYIdx = -1;
            let totalXSpan = 0;
            let totalYSpan = 0;
            let hasContent = false;
            
            let xAxisValid = (data && data.xAxisData && data.xAxisData.length > 0);
            let yAxisValid = (data && data.yAxisData && data.yAxisData.length > 0);

            if (!data) return { totalXSpan, totalYSpan, valid: false };

            const updateMaxIndices = (x, y) => {
                if (x !== undefined) maxXIdx = Math.max(maxXIdx, x);
                if (y !== undefined) maxYIdx = Math.max(maxYIdx, y);
                hasContent = true;
            };

            (data.pillars || []).forEach(p => updateMaxIndices(p.x, p.y));
            (data.lines || []).forEach(ln => {
                updateMaxIndices(ln.start.x, ln.start.y);
                updateMaxIndices(ln.end.x, ln.end.y);
            });
            (data.floorAreaRectangles || []).forEach(r => {
                updateMaxIndices(r.start.x, r.start.y);
                updateMaxIndices(r.end.x, r.end.y);
            });
            
            if (xAxisValid) {
                const limitX = hasContent ? maxXIdx : (data.xAxisData.length > 0 ? data.xAxisData.length - 2 : -1);
                if (limitX >=0) {
                    for (let k = 0; k <= limitX; k++) { 
                        if (data.xAxisData[k] && typeof data.xAxisData[k].spacing === 'number') {
                            totalXSpan += data.xAxisData[k].spacing * scalingFactor;
                        } else { 
                            totalXSpan += 50; 
                        }
                    }
                } else if (data.xAxisData.length === 1 && hasContent && maxXIdx === 0) { 
                     totalXSpan = 50; 
                } else if (data.xAxisData.length > 0 && !hasContent) { 
                     for (let k=0; k < data.xAxisData.length -1; k++) { 
                         if (data.xAxisData[k] && typeof data.xAxisData[k].spacing === 'number') totalXSpan += data.xAxisData[k].spacing * scalingFactor; else totalXSpan +=50;
                     }
                }
                if (totalXSpan === 0 && xAxisValid) totalXSpan = 50; 
            }

            if (yAxisValid) {
                const limitY = hasContent ? maxYIdx : (data.yAxisData.length > 0 ? data.yAxisData.length - 2 : -1);
                if (limitY >= 0) {
                    for (let k = 0; k <= limitY; k++) {
                        if (data.yAxisData[k] && typeof data.yAxisData[k].spacing === 'number') {
                            totalYSpan += data.yAxisData[k].spacing * scalingFactor;
                        } else {
                            totalYSpan += 50;
                        }
                    }
                } else if (data.yAxisData.length === 1 && hasContent && maxYIdx === 0) {
                    totalYSpan = 50;
                } else if (data.yAxisData.length > 0 && !hasContent) {
                     for (let k=0; k < data.yAxisData.length -1; k++) {
                         if (data.yAxisData[k] && typeof data.yAxisData[k].spacing === 'number') totalYSpan += data.yAxisData[k].spacing * scalingFactor; else totalYSpan +=50;
                     }
                }
                if (totalYSpan === 0 && yAxisValid) totalYSpan = 50;
            }
            return {
                totalXSpan, totalYSpan,
                valid: hasContent || xAxisValid || yAxisValid 
            };
        };

        let finalWidth, finalHeight;
        const minDimWidth = marginLeft + marginRight + 150;
        const minDimHeight = marginTop + marginBottom + 150;

        if (currentMode === 'futanHani') {
            const { totalXSpan, totalYSpan, valid } = getActiveMaxIndicesAndSpans(currentFloor);
            if (!valid) {
                finalWidth = minDimWidth;
                finalHeight = minDimHeight;
            } else {
                finalWidth = marginLeft + marginRight + totalXSpan;
                finalHeight = marginTop + marginBottom + totalYSpan;
            }
        } else { 
            const floor1Metrics = getActiveMaxIndicesAndSpans(1);
            const floor2Metrics = getActiveMaxIndicesAndSpans(2);

            let w1 = minDimWidth, h1 = minDimHeight;
            if (floor1Metrics.valid) {
                w1 = marginLeft + marginRight + floor1Metrics.totalXSpan;
                h1 = marginTop + marginBottom + floor1Metrics.totalYSpan;
            }

            let w2 = minDimWidth, h2 = minDimHeight;
            if (floor2Metrics.valid) {
                w2 = marginLeft + marginRight + floor2Metrics.totalXSpan;
                h2 = marginTop + marginBottom + floor2Metrics.totalYSpan;
            }
            finalWidth = Math.max(w1, w2);
            finalHeight = Math.max(h1, h2);
        }

        canvas.width = Math.max(finalWidth, minDimWidth);
        canvas.height = Math.max(finalHeight, minDimHeight);
    }


    function drawGrid() {
      updateCanvasSize(); 

      const displayData = getCurrentDisplayData(); 
      const data1F = floorData[1] || { xAxisData: [], yAxisData: [], lines: [], floorAreaRectangles: [], pillars: [] };
      const data2F = floorData[2] || { xAxisData: [], yAxisData: [], lines: [], floorAreaRectangles: [], pillars: [] };

      const gridAxisData = (currentMode === 'pillarChoka' || currentMode === 'wallChoka') ? data2F : displayData;

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      if (!gridAxisData || !gridAxisData.xAxisData || gridAxisData.xAxisData.length === 0 || !gridAxisData.yAxisData || gridAxisData.yAxisData.length === 0) {
        ctx.fillStyle = 'gray'; ctx.font = '16px sans-serif'; ctx.textAlign = 'center';
        ctx.fillText("表示する軸データがありません。", canvas.width / 2, canvas.height / 2);
        lineDataTextArea.value = "表示する軸データがありません。"; chokaritsuResultDiv.innerHTML = ""; return;
      }
      
      let outputLog = []; // This is not used since textarea is hidden, but kept for potential future use.
      const pillarSize = 16;
      const wallWidth = 6;

      if (gridAxisData.xAxisData.length > 0 && gridAxisData.yAxisData.length > 0) {
          ctx.fillStyle = '#000';
          gridAxisData.xAxisData.forEach((_, i) => gridAxisData.yAxisData.forEach((_, j) => {
              ctx.beginPath(); ctx.arc(getXPos(i, gridAxisData.xAxisData), getYPos(j, gridAxisData.yAxisData), 2, 0, 2 * Math.PI); ctx.fill();
          }));
          ctx.font = '12px sans-serif'; ctx.fillStyle = '#000'; ctx.textAlign = 'center';
          gridAxisData.xAxisData.forEach((lbl, i) => {
              if(lbl && lbl.name !== undefined) ctx.fillText(lbl.name, getXPos(i, gridAxisData.xAxisData), canvas.height - marginBottom + 15);
          });
          ctx.textAlign = 'right';
          gridAxisData.yAxisData.forEach((lbl, j) => {
              if(lbl && lbl.name !== undefined) ctx.fillText(lbl.name, marginLeft - 5, getYPos(j, gridAxisData.yAxisData));
          });
          ctx.font = '10px sans-serif'; ctx.textAlign = 'center';
          gridAxisData.xAxisData.forEach((a, i) => {
            if (a && typeof a.spacing === 'number' && i < gridAxisData.xAxisData.length - 1 && gridAxisData.xAxisData[i+1]) ctx.fillText(a.spacing.toFixed(3), (getXPos(i, gridAxisData.xAxisData) + getXPos(i + 1, gridAxisData.xAxisData)) / 2, canvas.height - marginBottom + 25);
          });
          ctx.textAlign = 'right';
          gridAxisData.yAxisData.forEach((a, j) => {
            if (a && typeof a.spacing === 'number' && j < gridAxisData.yAxisData.length - 1 && gridAxisData.yAxisData[j+1]) ctx.fillText(a.spacing.toFixed(3), marginLeft - 10, (getYPos(j, gridAxisData.yAxisData) + getYPos(j + 1, gridAxisData.yAxisData)) / 2);
          });
      }


      chokaritsuResultDiv.innerHTML = "";

      if (currentMode === 'futanHani') {
        // outputLog.push(`モード: 負担範囲 (表示階: ${currentFloor}階)`); // Textarea hidden
        if (displayData && displayData.xAxisData && displayData.xAxisData.length > 0 && displayData.yAxisData && displayData.yAxisData.length > 0) {
            if (currentFloor === 2 && data1F.floorAreaRectangles && data1F.floorAreaRectangles.length > 0 && data1F.xAxisData.length > 0 && data1F.yAxisData.length > 0) {
                ctx.fillStyle = 'rgba(200,200,200,0.5)'; 
                data1F.floorAreaRectangles.forEach(r => ctx.fillRect(getXPos(r.start.x, data1F.xAxisData), getYPos(r.end.y, data1F.yAxisData), getXPos(r.end.x, data1F.xAxisData) - getXPos(r.start.x, data1F.xAxisData), getYPos(r.start.y, data1F.yAxisData) - getYPos(r.end.y, data1F.yAxisData)));
            }
            ctx.fillStyle = 'rgba(144,238,144,0.5)'; 
            displayData.floorAreaRectangles.forEach(r => ctx.fillRect(getXPos(r.start.x, displayData.xAxisData), getYPos(r.end.y, displayData.yAxisData), getXPos(r.end.x, displayData.xAxisData) - getXPos(r.start.x, displayData.xAxisData), getYPos(r.start.y, displayData.yAxisData) - getYPos(r.end.y, displayData.yAxisData)));
            
            ctx.fillStyle = 'blue'; 
            displayData.pillars.forEach(p => ctx.fillRect(getXPos(p.x, displayData.xAxisData) - pillarSize / 2, getYPos(p.y, displayData.yAxisData) - pillarSize / 2, pillarSize, pillarSize));
            // outputLog.push('柱:'); // Textarea hidden
            // displayData.pillars.forEach((p, i) => { if (displayData.xAxisData[p.x] && displayData.yAxisData[p.y] && displayData.xAxisData[p.x].name !== undefined && displayData.yAxisData[p.y].name !== undefined) outputLog.push(`  P${i+1}: (${displayData.xAxisData[p.x].name}, ${displayData.yAxisData[p.y].name})`); });
            
            ctx.strokeStyle = 'red'; ctx.lineWidth = 2; ctx.fillStyle = 'blue'; ctx.font = '14px sans-serif'; 
            // outputLog.push('壁線:'); // Textarea hidden
            displayData.lines.forEach((ln, i) => {
              const sx = getXPos(ln.start.x, displayData.xAxisData), sy = getYPos(ln.start.y, displayData.yAxisData), ex = getXPos(ln.end.x, displayData.xAxisData), ey = getYPos(ln.end.y, displayData.yAxisData);
              ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(ex, ey); ctx.stroke();
              ctx.fillText(ln.multiplier.toString(), (sx + ex) / 2, (sy + ey) / 2 - 5);
              // if (displayData.xAxisData[ln.start.x] && displayData.yAxisData[ln.start.y] && displayData.xAxisData[ln.end.x] && displayData.yAxisData[ln.end.y] && displayData.xAxisData[ln.start.x].name !== undefined && displayData.yAxisData[ln.start.y].name !== undefined && displayData.xAxisData[ln.end.x].name !== undefined && displayData.yAxisData[ln.end.y].name !== undefined) outputLog.push(`  Line ${i+1}: (${displayData.xAxisData[ln.start.x].name},${displayData.yAxisData[ln.start.y].name})->(${displayData.xAxisData[ln.end.x].name},${displayData.yAxisData[ln.end.y].name}), 倍率:${ln.multiplier}`);
            });
            
            const areaList = drawPillarRegions(displayData); 
            if (areaList.length > 0) {
              const maxObj = areaList.reduce((prev, curr) => prev.areaM2 > curr.areaM2 ? prev : curr);
              const formula = `${maxObj.areaPx.toFixed(0)}px² ÷ (${scalingFactor}px × ${scalingFactor}px)`;
              const value = `${maxObj.areaM2.toFixed(2)} m²`;
              ctx.fillStyle = 'black'; ctx.font = '16px sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
              ctx.fillText(`最大負担面積 = ${formula} = ${value}`, marginLeft, marginTop + 5);
              // outputLog.push(`最大負担面積: ${value}`); // Textarea hidden
            }
        } else {
            // outputLog.push("負担範囲モード: 表示するデータが不十分です。"); // Textarea hidden
        }

      } else if (currentMode === 'pillarChoka') {
        // outputLog.push("モード: 柱の直下率 (2階基準で表示)"); // Textarea hidden
        if (data1F.floorAreaRectangles && data1F.floorAreaRectangles.length > 0 && data1F.xAxisData.length > 0 && data1F.yAxisData.length > 0) {
            ctx.fillStyle = 'rgba(200,200,200,0.5)';
            data1F.floorAreaRectangles.forEach(r => ctx.fillRect(getXPos(r.start.x, data1F.xAxisData), getYPos(r.end.y, data1F.yAxisData), getXPos(r.end.x, data1F.xAxisData) - getXPos(r.start.x, data1F.xAxisData), getYPos(r.start.y, data1F.yAxisData) - getYPos(r.end.y, data1F.yAxisData)));
        }
        if (data2F.floorAreaRectangles && data2F.floorAreaRectangles.length > 0 && data2F.xAxisData.length > 0 && data2F.yAxisData.length > 0) {
            ctx.fillStyle = 'rgba(144,238,144,0.3)';
            data2F.floorAreaRectangles.forEach(r => ctx.fillRect(getXPos(r.start.x, data2F.xAxisData), getYPos(r.end.y, data2F.yAxisData), getXPos(r.end.x, data2F.xAxisData) - getXPos(r.start.x, data2F.xAxisData), getYPos(r.start.y, data2F.yAxisData) - getYPos(r.end.y, data2F.yAxisData)));
        }
        
        const chokaResult = calculatePillarChokaritsu(data1F, data2F);
        // outputLog.push("--- 柱の直下状況 ---"); // Textarea hidden
        if (data1F.pillars && data1F.pillars.length > 0 && data1F.xAxisData.length > 0 && data1F.yAxisData.length > 0) {
            // outputLog.push("1階の柱 (2階に直下しないもの):"); // Textarea hidden
            data1F.pillars.forEach(p1 => {
                let hasCorrespondingPillarOn2F = false;
                if (data2F.pillars) { hasCorrespondingPillarOn2F = data2F.pillars.some(p2 => p1.x === p2.x && p1.y === p2.y); }
                if (!hasCorrespondingPillarOn2F) {
                    ctx.fillStyle = 'rgba(128, 128, 128, 0.7)';
                    ctx.fillRect(getXPos(p1.x, data1F.xAxisData) - pillarSize / 2, getYPos(p1.y, data1F.yAxisData) - pillarSize / 2, pillarSize, pillarSize);
                    // if (data1F.xAxisData[p1.x] && data1F.yAxisData[p1.y] && data1F.xAxisData[p1.x].name !== undefined && data1F.yAxisData[p1.y].name !== undefined) outputLog.push(`  柱 (${data1F.xAxisData[p1.x].name}, ${data1F.yAxisData[p1.y].name}): 1階のみ (グレー表示)`);
                }
            });
        }
        // outputLog.push("2階の柱:"); // Textarea hidden
        if (data2F.pillars && data2F.pillars.length > 0 && data2F.xAxisData.length > 0 && data2F.yAxisData.length > 0) {
            chokaResult.details.forEach(detail => {
                const p2_original = data2F.pillars.find(p => p.x === detail.x && p.y === detail.y);
                if (p2_original) {
                    ctx.fillStyle = detail.isAligned ? 'blue' : 'red';
                    ctx.fillRect(getXPos(p2_original.x, data2F.xAxisData) - pillarSize / 2, getYPos(p2_original.y, data2F.yAxisData) - pillarSize / 2, pillarSize, pillarSize);
                    // outputLog.push(`  柱 (${detail.xName}, ${detail.yName}): ${detail.status} (${ctx.fillStyle === 'blue' ? '青' : '赤'}表示)`);
                }
            });
        } // else outputLog.push("  2階に柱データがありません。"); // Textarea hidden
        const chokaMessage = `柱の直下率: ${chokaResult.alignedPillars}本 / ${chokaResult.pillarsOn2F}本 = ${chokaResult.ratioPercent.toFixed(2)}%`;
        chokaritsuResultDiv.innerHTML = `<p style="font-weight: bold; color: ${chokaResult.ratioPercent >= 50 ? 'blue' : 'red'};">${chokaMessage}</p>`;
        // outputLog.push("--- 直下率計算結果 ---"); outputLog.push(chokaMessage); // Textarea hidden

      } else if (currentMode === 'wallChoka') {
        // outputLog.push("モード: 壁の直下率 (2階基準で表示)"); // Textarea hidden
        if (data1F.floorAreaRectangles && data1F.floorAreaRectangles.length > 0 && data1F.xAxisData.length > 0 && data1F.yAxisData.length > 0) {
            ctx.fillStyle = 'rgba(200,200,200,0.5)';
            data1F.floorAreaRectangles.forEach(r => ctx.fillRect(getXPos(r.start.x, data1F.xAxisData), getYPos(r.end.y, data1F.yAxisData), getXPos(r.end.x, data1F.xAxisData) - getXPos(r.start.x, data1F.xAxisData), getYPos(r.start.y, data1F.yAxisData) - getYPos(r.end.y, data1F.yAxisData)));
        }
        if (data2F.floorAreaRectangles && data2F.floorAreaRectangles.length > 0 && data2F.xAxisData.length > 0 && data2F.yAxisData.length > 0) {
            ctx.fillStyle = 'rgba(144,238,144,0.3)';
            data2F.floorAreaRectangles.forEach(r => ctx.fillRect(getXPos(r.start.x, data2F.xAxisData), getYPos(r.end.y, data2F.yAxisData), getXPos(r.end.x, data2F.xAxisData) - getXPos(r.start.x, data2F.xAxisData), getYPos(r.start.y, data2F.yAxisData) - getYPos(r.end.y, data2F.yAxisData)));
        }

        const wallChokaResult = calculateWallChokaritsu(data1F, data2F);
        const pillarChokaInfo = calculatePillarChokaritsu(data1F, data2F);

        // outputLog.push("--- 壁の直下状況 ---"); // Textarea hidden
        ctx.lineWidth = wallWidth;

        if (data1F.lines && data1F.xAxisData.length > 0 && data1F.yAxisData.length > 0) {
            const bearingWalls1F = data1F.lines.filter(l => l.multiplier > 0);
            bearingWalls1F.forEach(wall1F => {
                const isAlsoAlignedX = wallChokaResult.xDirection.details.some(d => d.isAligned && d.line.start.x === wall1F.start.x && d.line.start.y === wall1F.start.y && d.line.end.x === wall1F.end.x && d.line.end.y === wall1F.end.y);
                const isAlsoAlignedY = wallChokaResult.yDirection.details.some(d => d.isAligned && d.line.start.x === wall1F.start.x && d.line.start.y === wall1F.start.y && d.line.end.x === wall1F.end.x && d.line.end.y === wall1F.end.y);
                if (!isAlsoAlignedX && !isAlsoAlignedY) {
                    ctx.strokeStyle = 'rgba(180, 180, 180, 0.7)';
                    ctx.beginPath();
                    ctx.moveTo(getXPos(wall1F.start.x, data1F.xAxisData), getYPos(wall1F.start.y, data1F.yAxisData));
                    ctx.lineTo(getXPos(wall1F.end.x, data1F.xAxisData), getYPos(wall1F.end.y, data1F.yAxisData));
                    ctx.stroke();
                }
            });
        }
        
        if (data2F.xAxisData.length > 0 && data2F.yAxisData.length > 0) {
            // outputLog.push("X方向の壁:"); // Textarea hidden
            wallChokaResult.xDirection.details.forEach(detail => {
                const wall2F = detail.line;
                ctx.strokeStyle = detail.isAligned ? 'blue' : 'red';
                ctx.beginPath();
                ctx.moveTo(getXPos(wall2F.start.x, data2F.xAxisData), getYPos(wall2F.start.y, data2F.yAxisData));
                ctx.lineTo(getXPos(wall2F.end.x, data2F.xAxisData), getYPos(wall2F.end.y, data2F.yAxisData));
                ctx.stroke();
                // if (data2F.xAxisData[wall2F.start.x] && data2F.yAxisData[wall2F.start.y] && data2F.xAxisData[wall2F.end.x] && data2F.yAxisData[wall2F.end.y] && data2F.xAxisData[wall2F.start.x].name !== undefined && data2F.yAxisData[wall2F.start.y].name !== undefined && data2F.xAxisData[wall2F.end.x].name !== undefined && data2F.yAxisData[wall2F.end.y].name !== undefined) {
                //      outputLog.push(`  壁 (${data2F.xAxisData[wall2F.start.x].name},${data2F.yAxisData[wall2F.start.y].name})->(${data2F.xAxisData[wall2F.end.x].name},${data2F.yAxisData[wall2F.end.y].name}): ${detail.status} (${ctx.strokeStyle})`);
                // }
            });
            // outputLog.push("Y方向の壁:"); // Textarea hidden
            wallChokaResult.yDirection.details.forEach(detail => {
                const wall2F = detail.line;
                ctx.strokeStyle = detail.isAligned ? 'blue' : 'red';
                ctx.beginPath();
                ctx.moveTo(getXPos(wall2F.start.x, data2F.xAxisData), getYPos(wall2F.start.y, data2F.yAxisData));
                ctx.lineTo(getXPos(wall2F.end.x, data2F.xAxisData), getYPos(wall2F.end.y, data2F.yAxisData));
                ctx.stroke();
                //  if (data2F.xAxisData[wall2F.start.x] && data2F.yAxisData[wall2F.start.y] && data2F.xAxisData[wall2F.end.x] && data2F.yAxisData[wall2F.end.y] && data2F.xAxisData[wall2F.start.x].name !== undefined && data2F.yAxisData[wall2F.start.y].name !== undefined && data2F.xAxisData[wall2F.end.x].name !== undefined && data2F.yAxisData[wall2F.end.y].name !== undefined) {
                //     outputLog.push(`  壁 (${data2F.xAxisData[wall2F.start.x].name},${data2F.yAxisData[wall2F.start.y].name})->(${data2F.xAxisData[wall2F.end.x].name},${data2F.yAxisData[wall2F.end.y].name}): ${detail.status} (${ctx.strokeStyle})`);
                // }
            });
        }

        if (data1F.pillars && data1F.pillars.length > 0 && data1F.xAxisData.length > 0 && data1F.yAxisData.length > 0) {
            data1F.pillars.forEach(p1 => {
                 let hasCorrespondingPillarOn2F = false;
                 if (data2F.pillars) { hasCorrespondingPillarOn2F = data2F.pillars.some(p2 => p1.x === p2.x && p1.y === p2.y); }
                if (!hasCorrespondingPillarOn2F) {
                    ctx.fillStyle = 'rgba(128, 128, 128, 0.7)'; 
                    ctx.fillRect(getXPos(p1.x, data1F.xAxisData) - pillarSize / 2, getYPos(p1.y, data1F.yAxisData) - pillarSize / 2, pillarSize, pillarSize);
                }
            });
        }
        if (data2F.pillars && data2F.pillars.length > 0 && data2F.xAxisData.length > 0 && data2F.yAxisData.length > 0) {
            pillarChokaInfo.details.forEach(pInfo => { 
                const p2 = data2F.pillars.find(p => p.x === pInfo.x && p.y === pInfo.y);
                if (p2) {
                    let pillarColor = 'gray'; 
                    if (pInfo.isAligned) {
                        const isConnectedToAlignedWallX = wallChokaResult.xDirection.details.some(d => d.isAligned && ((d.line.start.x === p2.x && d.line.start.y === p2.y) || (d.line.end.x === p2.x && d.line.end.y === p2.y)));
                        const isConnectedToAlignedWallY = wallChokaResult.yDirection.details.some(d => d.isAligned && ((d.line.start.x === p2.x && d.line.start.y === p2.y) || (d.line.end.x === p2.x && d.line.end.y === p2.y)));
                        pillarColor = (isConnectedToAlignedWallX || isConnectedToAlignedWallY) ? 'blue' : 'lightblue';
                    } else {
                         const isConnectedToNonAlignedWallX = wallChokaResult.xDirection.details.some(d => !d.isAligned && ((d.line.start.x === p2.x && d.line.start.y === p2.y) || (d.line.end.x === p2.x && d.line.end.y === p2.y)));
                         const isConnectedToNonAlignedWallY = wallChokaResult.yDirection.details.some(d => !d.isAligned && ((d.line.start.x === p2.x && d.line.start.y === p2.y) || (d.line.end.x === p2.x && d.line.end.y === p2.y)));
                        pillarColor = (isConnectedToNonAlignedWallX || isConnectedToNonAlignedWallY) ? 'red' : 'pink';
                    }
                    ctx.fillStyle = pillarColor;
                    ctx.fillRect(getXPos(p2.x, data2F.xAxisData) - pillarSize / 2, getYPos(p2.y, data2F.yAxisData) - pillarSize / 2, pillarSize, pillarSize);
                }
            });
        }
        
        ctx.lineWidth = 1; 

        // outputLog.push("--- 直下率計算結果 ---"); // Textarea hidden
        const wallChokaMsgX = `X方向 壁の直下率: ${wallChokaResult.xDirection.alignedWalls}箇所 / ${wallChokaResult.xDirection.totalWalls2F}箇所 = ${wallChokaResult.xDirection.ratioPercent.toFixed(2)}%`;
        const wallChokaMsgY = `Y方向 壁の直下率: ${wallChokaResult.yDirection.alignedWalls}箇所 / ${wallChokaResult.yDirection.totalWalls2F}箇所 = ${wallChokaResult.yDirection.ratioPercent.toFixed(2)}%`;
        chokaritsuResultDiv.innerHTML = `<p style="font-weight: bold; color: ${wallChokaResult.xDirection.ratioPercent >= 50 ? 'blue' : 'red'};">${wallChokaMsgX}</p>
                                         <p style="font-weight: bold; color: ${wallChokaResult.yDirection.ratioPercent >= 50 ? 'blue' : 'red'};">${wallChokaMsgY}</p>`;
        // outputLog.push(wallChokaMsgX); outputLog.push(wallChokaMsgY); // Textarea hidden
      }

      // lineDataTextArea.value = outputLog.join('\n'); // Textarea hidden
    }

    function drawPillarRegions(dataToUse) {
      if (!dataToUse || !dataToUse.pillars || !dataToUse.xAxisData || !dataToUse.yAxisData || dataToUse.xAxisData.length === 0 || dataToUse.yAxisData.length === 0) return [];
      const pts = dataToUse.pillars.map(p => [getXPos(p.x, dataToUse.xAxisData), getYPos(p.y, dataToUse.yAxisData)]);
      const areaList = [];
      if (!pts.length || typeof d3 === 'undefined') return areaList;
      const voronoi = d3.voronoi().extent([[0,0],[canvas.width,canvas.height]]);
      const diagram = voronoi(pts);
      const rects = (dataToUse.floorAreaRectangles || []).map(r => ({ x1: getXPos(r.start.x, dataToUse.xAxisData), y1: getYPos(r.end.y, dataToUse.yAxisData), x2: getXPos(r.end.x, dataToUse.xAxisData), y2: getYPos(r.start.y, dataToUse.yAxisData) }));

      // 各領域の面積を先に計算してリスト化
      diagram.polygons().forEach((poly, i) => {
        if (!poly || i >= pts.length ) return;
        let totalPx = 0;
        rects.forEach(rect => { 
            const clipped = clipPolygonToRect(poly, rect); 
            if (clipped.length) totalPx += polygonAreaPx(clipped); 
        });
        const areaM2 = totalPx / (scalingFactor * scalingFactor);
        areaList.push({ index: i, areaPx: totalPx, areaM2 });
      });

      if (areaList.length > 0) {
        // 1. 最大面積の値を特定
        const maxAreaM2 = Math.max(...areaList.map(a => a.areaM2));
        const epsilon = 1e-9; // 浮動小数点数の比較誤差を考慮

        // 2. 最大面積を持つすべての領域のインデックスを特定
        const maxIndices = new Set(
          areaList.filter(item => Math.abs(item.areaM2 - maxAreaM2) < epsilon)
                  .map(item => item.index)
        );

        // 3. 最大面積の領域を黄色で塗りつぶし
        ctx.fillStyle = 'rgba(255, 255, 0, 0.5)'; // 半透明の黄色
        diagram.polygons().forEach((poly, i) => {
          if (!poly || !maxIndices.has(i)) return; // 最大面積でなければスキップ

          rects.forEach(rect => {
            const clipped = clipPolygonToRect(poly, rect);
            if (clipped.length) {
              ctx.beginPath();
              ctx.moveTo(clipped[0][0], clipped[0][1]);
              clipped.slice(1).forEach(pt => ctx.lineTo(pt[0], pt[1]));
              ctx.closePath();
              ctx.fill();
            }
          });
        });
      }
      ctx.save(); ctx.strokeStyle = 'gray'; ctx.setLineDash([4,2]);
      diagram.polygons().forEach(poly => {
        if (!poly) return;
        rects.forEach(rect => { const clipped = clipPolygonToRect(poly, rect); if (clipped.length) { ctx.beginPath(); ctx.moveTo(clipped[0][0], clipped[0][1]); clipped.slice(1).forEach(pt => ctx.lineTo(pt[0], pt[1])); ctx.closePath(); ctx.stroke(); }});
      });
      ctx.restore();
      ctx.fillStyle = 'black'; ctx.font = '12px sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
      diagram.polygons().forEach((poly, i) => {
        if (!poly || i >= pts.length ) return;
        let totalPx = 0;
        rects.forEach(rect => { const clipped = clipPolygonToRect(poly, rect); if (clipped.length) totalPx += polygonAreaPx(clipped); });
        const areaM2 = totalPx / (scalingFactor * scalingFactor);
        areaList.push({ index: i, areaPx: totalPx, areaM2 });
        if (pts[i]) { 
            const [cx, cy] = pts[i];
            ctx.fillText(areaM2.toFixed(2) + " m²", cx + 8, cy + 8);
        }
      });
      return areaList;
    }

    function loadData(e) {
      const f = e.target.files[0]; if (!f) return;
      document.getElementById('fileNameDisplay').textContent = `読み込みファイル: ${f.name}`;

      const r = new FileReader();
      r.onload = ev => {
        try {
          const j = JSON.parse(ev.target.result);
          if (j.floorData && j.floorData[1] && j.floorData[2]) {
            floorData = j.floorData;
            [1,2].forEach(floor => {
                floorData[floor].pillars = floorData[floor].pillars || [];
                floorData[floor].xAxisData = floorData[floor].xAxisData || [];
                floorData[floor].yAxisData = floorData[floor].yAxisData || [];
                floorData[floor].lines = floorData[floor].lines || [];
                floorData[floor].floorAreaRectangles = floorData[floor].floorAreaRectangles || [];
            });
            currentMode = 'futanHani'; currentFloor = 1;
            document.querySelector('input[name="floor"][value="1"]').checked = true;
            updateModeButtons(currentMode); drawGrid();
          } else window.alert('無効なファイル形式です。floorDataオブジェクト及び1階と2階のデータが必要です。');
        } catch (err) { window.alert('ファイルの読み込みに失敗しました: ' + err.message); console.error("Load error:", err); }
      };
      r.readAsText(f); e.target.value = '';
    }

    function loadPillars(e) {
        const f = e.target.files[0]; if (!f) return;
        const r = new FileReader();
        r.onload = ev => {
            try {
                const j = JSON.parse(ev.target.result);
                if (j.floorData) {
                    if (j.floorData[1] && j.floorData[1].pillars) floorData[1].pillars = j.floorData[1].pillars;
                    if (j.floorData[2] && j.floorData[2].pillars) floorData[2].pillars = j.floorData[2].pillars;
                    drawGrid();
                } else if (j[1] && j[2] && j[1].pillars && j[2].pillars) {
                    floorData[1].pillars = j[1].pillars; floorData[2].pillars = j[2].pillars;
                    drawGrid();
                } else window.alert('柱データファイル形式が無効か、pillarsデータが含まれていません。');
            } catch (err) { window.alert('柱データの読み込みに失敗しました: ' + err.message); }
        };
        r.readAsText(f); e.target.value = '';
    }

    function saveData() {
      const blob = new Blob([JSON.stringify({ floorData }, null, 2)], { type: 'application/json' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob); a.download = '負担ビューアデータ_v4.json';
      a.click(); URL.revokeObjectURL(a.href);
    }

    loadButton.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', loadData);
    saveButton.addEventListener('click', saveData);
    pillarFileInput.addEventListener('change', loadPillars);
    floorRadioButtons.forEach(rb => rb.addEventListener('change', () => { currentFloor = parseInt(rb.value); drawGrid(); }));
    canvas.addEventListener('contextmenu', e => e.preventDefault());
    canvas.addEventListener('mousedown', e => {
      if (currentMode !== 'futanHani') return; 
      const d = floorData[currentFloor]; if (!d || !d.xAxisData || d.xAxisData.length === 0) return;
      const rect = canvas.getBoundingClientRect();
      const clickX = e.clientX - rect.left, clickY = e.clientY - rect.top;
      const gp = getNearestGridPoint(clickX, clickY); if (gp.dist === Infinity) return;
      if (e.button === 0) { if (!d.pillars.some(p => p.x === gp.x && p.y === gp.y)) { d.pillars.push({x: gp.x, y: gp.y}); drawGrid(); }}
      else if (e.button === 2) { const idx = d.pillars.findIndex(p => p.x === gp.x && p.y === gp.y); if (idx >= 0) { d.pillars.splice(idx, 1); drawGrid(); }}
    });

    updateModeButtons(currentMode);
    drawGrid(); // Initial draw

   const printButton = document.getElementById('printButton');
    const printArea = document.getElementById('printArea');

    /**
     * ブラウザが次のフレームを描画するのを待つヘルパー関数
     * @returns {Promise<void>}
     */
    function waitForPaint() {
      return new Promise(resolve => requestAnimationFrame(resolve));
    }

    /**
     * 指定されたモードと階数でCanvasを更新し、描画完了を待つ関数
     * @param {string} mode - 'futanHani', 'pillarChoka', 'wallChoka'
     * @param {number|null} floor - 1 or 2 (null if not applicable)
     */
    async function prepareCanvasForView(mode, floor) {
      // 1. 表示状態を設定
      if (floor) {
        document.querySelector(`input[name="floor"][value="${floor}"]`).checked = true;
        currentFloor = floor;
      }
      currentMode = mode;
      updateModeButtons(mode); // ボタンの見た目を更新

      // 2. 描画を命令
      drawGrid();
      
      // 3. ブラウザの描画更新を2フレーム待つ（1フレームでは間に合わない場合があるため、確実性を高める）
      await waitForPaint();
      await waitForPaint();
    }

    /**
     * 印刷処理のメイン関数
     */
  async function handlePrint() {
      // 印刷前に現在の状態を保存
      const originalMode = currentMode;
      const originalFloor = currentFloor;

      printArea.innerHTML = '<h2>印刷イメージを生成中...</h2>';

      // 本格的な処理の前に一度、現在の画面を描画して待つ「準備運動」を行う
      drawGrid();
      await waitForPaint();
      await waitForPaint();

      // ファイル名を取得
      const filenameText = document.getElementById('fileNameDisplay').textContent;
      
      const viewsToPrint = [
        { title: '負担範囲（１階）', mode: 'futanHani', floor: 1 },
        { title: '負担範囲（２階）', mode: 'futanHani', floor: 2 },
        { title: '柱の直下率', mode: 'pillarChoka', floor: null },
        { title: '壁の直下率', mode: 'wallChoka', floor: null }
      ];

      let printHTML = '';

      for (const view of viewsToPrint) {
        await prepareCanvasForView(view.mode, view.floor);
        const imageDataUrl = canvas.toDataURL('image/png');
        const resultTextHTML = chokaritsuResultDiv.innerHTML;

        printHTML += `
          <div class="print-page">
            <h2>${view.title}</h2>
            <p class="print-filename">${filenameText}</p>
            <img src="${imageDataUrl}">
        `;

        if (view.mode === 'pillarChoka' || view.mode === 'wallChoka') {
          printHTML += `<div class="print-results">${resultTextHTML}</div>`;
        }

        printHTML += `</div>`;
      }
      
      printArea.innerHTML = printHTML;

      // ★★★★★↓ここからが今回の修正点です↓★★★★★
      // 全てのHTMLをDOMに挿入後、ブラウザが画像をレンダリングするのを待つための最終待機
      await new Promise(resolve => setTimeout(resolve, 500));
      // ★★★★★↑ここまでが今回の修正点です↑★★★★★
      
      window.print();

      // 印刷後に元の表示状態に戻す
      currentMode = originalMode;
      currentFloor = originalFloor;
      document.querySelector(`input[name="floor"][value="${originalFloor}"]`).checked = true;
      updateModeButtons(originalMode);
      drawGrid();
      printArea.innerHTML = '';
    }
    printButton.addEventListener('click', handlePrint);

    const helpButton = document.getElementById('helpButton');
    helpButton.addEventListener('click', () => {
      window.open('futanhelp.htm', '_blank');
    });

  </script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-gw-3+1f-3d+2z"
     data-ad-client="ca-pub-7855061578893179"
     data-ad-slot="8574377639"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LLZX3KXMVF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-LLZX3KXMVF');
</script>


</body>
</html>