<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>壁量電卓 N値（柱ズレ補正なしバージョン・高さ補正）</title>
<link rel="stylesheet" href="style.css">


</head>
<body>
  <h1>壁量電卓 N値（柱ズレ補正なしバージョン・高さ補正）</h1>
  <div class="controls">
    <button id="loadButton">読み込み</button>
    <button id="saveButton">保存</button>
    <button id="loadPillarsButton">柱読込</button>
    <button id="printButton">印刷</button>
    <button id="braceButton">筋かい</button>

    <input type="file" id="fileInput" accept="application/json" style="display:none;">
    <input type="file" id="pillarFileInput" accept="application/json" style="display:none;">
  <label for="height1">1階横架材天端間高さ(m)</label>
  <input type="number" id="height1" value="2.70" step="0.01" min="0">
  <label for="height2">2階横架材天端間高さ(m)</label>
  <input type="number" id="height2" value="2.70" step="0.01" min="0">

    <label><input type="radio" name="floor" value="1" checked> １階</label>
    <label><input type="radio" name="floor" value="2"> ２階</label>
  </div>
  <button id="calcButton">計算</button>
  <canvas id="gridCanvas"></canvas>
  <textarea id="lineData" readonly placeholder="線分・柱データがここに表示されます"></textarea>

  <ul id="braceMenu">
  <li data-size="30" data-auto>30</li>
  <li data-size="45" data-auto>45</li>
    <li data-type="30▲">30▲</li>
    <li data-type="45▲">45▲</li>
  <li data-action="delete">削除</li>
  </ul>


  <div id="nTable">
    <h2>N値計算表</h2>
    <table id="nValueTable">
      <thead>
        <tr>
          <th>柱位置</th>
          <th>方向</th>
          <th>筋かい</th> 
          <th>柱位置</th>
          <th>計算式</th>
          <th>N値</th>
          <th>採用N値</th>
          <th>耐力</th>
          <th>金物</th>
        </tr>
      </thead>
      <tbody id="nValueTbody"></tbody>
    </table>
  </div>

  <script>
    // 定数と変数
    const canvas = document.getElementById("gridCanvas"), ctx = canvas.getContext("2d");
    const mL = 50, mR = 20, mT = 20, mB = 50, scale = 100;
    let currentFloor = 1;
    let isBraceMode = false, braceStart = null, braceEndTemp = null, braceEditIndex = null;
    let floorData = {
      1: { xAxisData: [], yAxisData: [], lines: [], floorAreaRectangles: [], pillars: [], braces: [] },
      2: { xAxisData: [], yAxisData: [], lines: [], floorAreaRectangles: [], pillars: [], braces: [] }
    };

    // ユーティリティ関数
    function getCurrentData() { return floorData[currentFloor]; }
    function getXPos(i, axis) { let x = mL; for (let j = 0; j < i; j++) x += axis[j].spacing * scale; return x; }
    function getYPos(i, axis) { let y = canvas.height - mB; for (let j = 0; j < i; j++) y -= axis[j].spacing * scale; return y; }
    function getNearestGridPoint(cx, cy) {
      const d = getCurrentData();
      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 dist = Math.hypot(gx - cx, gy - cy);
          if (dist < nearest.dist) nearest = { x:i, y:j, dist };
        });
      });
      return { x: nearest.x, y: nearest.y };
    }

    // N値計算支援関数
    function computeSAX(floor, px_pillar, py) {
      const d = floorData[floor];
      let m_left_x_val = null;  // 柱の左側(X座標が小さい側)に接続する壁の倍率
      let m_right_x_val = null; // 柱の右側(X座標が大きい側)に接続する壁の倍率

      d.lines.forEach(ln => {
        // 線が水平で、指定された柱のY座標に存在するか確認
        if (ln.start.y === py && ln.end.y === py && ln.start.x !== ln.end.x) { // ln.start.x !== ln.end.x でゼロ長の線を除外
          // 柱から左方向(X座標が小さい方向)へ伸びる、または左方向から柱へ接続する壁
          if ((ln.start.x === px_pillar && ln.end.x < px_pillar) || (ln.end.x === px_pillar && ln.start.x < px_pillar)) {
            m_left_x_val = ln.multiplier;
          }
          // 柱から右方向(X座標が大きい方向)へ伸びる、または右方向から柱へ接続する壁
          else if ((ln.start.x === px_pillar && ln.end.x > px_pillar) || (ln.end.x === px_pillar && ln.start.x > px_pillar)) {
            m_right_x_val = ln.multiplier;
          }
        }
      });

      if (m_left_x_val != null && m_right_x_val != null) {
        return Math.max(m_left_x_val, m_right_x_val) - Math.min(m_left_x_val, m_right_x_val);
      } else if (m_left_x_val != null) {
        return m_left_x_val;
      } else if (m_right_x_val != null) {
        return m_right_x_val;
      } else {
        return 0;
      }
    }
     function computeSAY(floor, px, py_pillar) {
      const d = floorData[floor];
      let m_lower_y_val = null;  // 柱の下側(Y座標が小さい側)に接続する壁の倍率 (注: Y軸の向きによる)
      let m_higher_y_val = null; // 柱の上側(Y座標が大きい側)に接続する壁の倍率 (注: Y軸の向きによる)
                                 // 一般的に画面座標ではYが下へ増加するため、
                                 // m_lower_y_val はY座標値が小さい方(画面上方)、m_higher_y_val はY座標値が大きい方(画面下方)の壁に対応します。

      d.lines.forEach(ln => {
        // 線が垂直で、指定された柱のX座標に存在するか確認
        if (ln.start.x === px && ln.end.x === px && ln.start.y !== ln.end.y) { // ln.start.y !== ln.end.y でゼロ長の線を除外
          // 柱からY座標が小さい方向へ伸びる、またはY座標が小さい方向から柱へ接続する壁
          if ((ln.start.y === py_pillar && ln.end.y < py_pillar) || (ln.end.y === py_pillar && ln.start.y < py_pillar)) {
            m_lower_y_val = ln.multiplier;
          }
          // 柱からY座標が大きい方向へ伸びる、またはY座標が大きい方向から柱へ接続する壁
          else if ((ln.start.y === py_pillar && ln.end.y > py_pillar) || (ln.end.y === py_pillar && ln.start.y > py_pillar)) {
            m_higher_y_val = ln.multiplier;
          }
        }
      });

      if (m_lower_y_val != null && m_higher_y_val != null) {
        return Math.max(m_lower_y_val, m_higher_y_val) - Math.min(m_lower_y_val, m_higher_y_val);
      } else if (m_lower_y_val != null) {
        return m_lower_y_val;
      } else if (m_higher_y_val != null) {
        return m_higher_y_val;
      } else {
        return 0;
      }
    }

    // Canvas サイズ調整
    function updateCanvasSize() {
      const d = getCurrentData();
      let maxX = 0, maxY = 0;
      [...d.lines, ...d.floorAreaRectangles, ...d.pillars, ...d.braces].forEach(item => {
        if (item.start) {
          maxX = Math.max(maxX, item.start.x, item.end.x);
          maxY = Math.max(maxY, item.start.y, item.end.y);
        } else if (item.x !== undefined) {
          maxX = Math.max(maxX, item.x);
          maxY = Math.max(maxY, item.y);
        }
      });
      const gx = Math.min(maxX + 1, d.xAxisData.length - 1);
      const gy = Math.min(maxY + 1, d.yAxisData.length - 1);
      let w = mL + mR, h = mT + mB;
      for (let i = 0; i < gx; i++) w += d.xAxisData[i].spacing * scale;
      for (let j = 0; j < gy; j++) h += d.yAxisData[j].spacing * scale;
      canvas.width = w; canvas.height = h;
    }

    // 描画
    function drawGrid() {
      const d = getCurrentData();
      if (!d.xAxisData.length) return;
      updateCanvasSize();
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // ２階時、下階をグレー表示
      if (currentFloor === 2) {
        const bg = floorData[1];
        ctx.fillStyle = "rgba(200,200,200,0.5)";
        bg.floorAreaRectangles.forEach(r => {
          const x1 = getXPos(r.start.x, bg.xAxisData);
          const y1 = getYPos(r.end.y, bg.yAxisData);
          const x2 = getXPos(r.end.x, bg.xAxisData);
          const y2 = getYPos(r.start.y, bg.yAxisData);
          ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
        });
      }

      // グリッド点
      ctx.fillStyle = "#000";
      d.xAxisData.forEach((_, i) =>
        d.yAxisData.forEach((_, j) => {
          ctx.beginPath();
          ctx.arc(getXPos(i, d.xAxisData), getYPos(j, d.yAxisData), 2, 0, 2*Math.PI);
          ctx.fill();
        })
      );

      // 軸ラベル
      ctx.font = "12px sans-serif"; ctx.fillStyle = "#000"; ctx.textAlign = "center";
      d.xAxisData.forEach((lbl, i) =>
        ctx.fillText(lbl.name, getXPos(i, d.xAxisData), canvas.height - mB + 15)
      );
      ctx.textAlign = "right";
      d.yAxisData.forEach((lbl, j) =>
        ctx.fillText(lbl.name, mL - 5, getYPos(j, d.yAxisData))
      );

      // 間隔表示
      ctx.font = "10px sans-serif"; ctx.textAlign = "center";
      d.xAxisData.forEach((a, i) => {
        if (i < d.xAxisData.length - 1) {
          const x = (getXPos(i, d.xAxisData) + getXPos(i+1, d.xAxisData)) / 2;
          ctx.fillText((a.spacing*1000|0)/1000, x, canvas.height - mB + 25);
        }
      });
      ctx.textAlign = "right";
      d.yAxisData.forEach((a, j) => {
        if (j < d.yAxisData.length - 1) {
          const y = (getYPos(j, d.yAxisData) + getYPos(j+1, d.yAxisData)) / 2;
          ctx.fillText((a.spacing*1000|0)/1000, mL - 10, y);
        }
      });

      // 床面積
      ctx.fillStyle = "rgba(144,238,144,0.5)";
      d.floorAreaRectangles.forEach(r => {
        const x1 = getXPos(r.start.x, d.xAxisData);
        const y1 = getYPos(r.end.y, d.yAxisData);
        const x2 = getXPos(r.end.x, d.xAxisData);
        const y2 = getYPos(r.start.y, d.yAxisData);
        ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
      });

  // 柱
      ctx.fillStyle = "blue";
      d.pillars.forEach(p => {
        const px = getXPos(p.x, d.xAxisData), py = getYPos(p.y, d.yAxisData), sz = 16;
        ctx.fillRect(px - sz/2, py - sz/2, sz, sz);

        // 金物記号が存在すれば描画する
        if (p.kanamonoSymbol) {
          ctx.fillStyle = "black"; // 金物記号の色
          ctx.font = "bold 12px Arial"; // 金物記号のフォントとサイズ
          ctx.textAlign = "left"; // 文字の横方向の揃え（左揃え）
          ctx.textBaseline = "bottom"; // 文字の縦方向の揃え（ベースラインを底に）
          // 柱の右上あたりに表示する (px + sz / 2 は柱の右端, py - sz / 2 は柱の上端)
          ctx.fillText(p.kanamonoSymbol, px + sz / 2 + 3, py - sz / 2 - 1);
        }
      });

      // 線分＋倍率
      ctx.strokeStyle = "red"; ctx.lineWidth = 2; ctx.font = "14px sans-serif";
      let out = [];
      d.lines.forEach((ln, i) => {
        const sx = getXPos(ln.start.x, d.xAxisData), sy = getYPos(ln.start.y, d.yAxisData);
        const ex = getXPos(ln.end.x, d.xAxisData),   ey = getYPos(ln.end.y, d.yAxisData);
        ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(ex, ey); ctx.stroke();
        const mx = (sx + ex)/2, my = (sy + ey)/2;
        ctx.fillText(ln.multiplier.toString(), mx, my - 8);
        out.push(`Line${i+1}:(${ln.start.x},${ln.start.y})->(${ln.end.x},${ln.end.y}) 倍率:${ln.multiplier}`);
      });

      // 筋かい
      ctx.fillStyle = "#000"; ctx.font = "14px sans-serif";
      d.braces.forEach((b, i) => {
        const sx = getXPos(b.start.x, d.xAxisData), sy = getYPos(b.start.y, d.yAxisData);
        const ex = getXPos(b.end.x,   d.xAxisData), ey = getYPos(b.end.y,   d.yAxisData);
        const mx = (sx + ex)/2, my = (sy + ey)/2;
        const dx = b.end.x - b.start.x, dy = b.end.y - b.start.y;
        if (Math.abs(dx) >= Math.abs(dy)) {
          ctx.fillText(b.type, mx, my + 15);
        } else {
          ctx.save();
          ctx.translate(mx - 15, my);
          ctx.rotate(-Math.PI/2);
          ctx.fillText(b.type, 0, 0);
          ctx.restore();
        }
        out.push(`Brace${i+1}:(${b.start.x},${b.start.y})->(${b.end.x},${b.end.y}) タイプ:${b.type}`);
      });

      if (d.pillars.length) {
        out.push("", "Pillars:");
        d.pillars.forEach((p, i) => out.push(`Pillar${i+1}:(${p.x},${p.y})`));
      }
      document.getElementById("lineData").value = out.join("\n");
    }


    async function getCanvasImageData(floorNumber) {
      const originalFloor = currentFloor; // 元の階を保存
      let imageDataUrl = '';

      // 指定された階に一時的に切り替え
      if (currentFloor !== floorNumber) {
        document.querySelector(`input[name="floor"][value="${floorNumber}"]`).click();
        // DOMの更新と再描画を待つために少し遅延を入れる (必要に応じて調整)
        await new Promise(resolve => setTimeout(resolve, 100));
      }

      // 現在のCanvasの内容を更新（最新の状態にするため）
      drawGrid();
      // Canvasから画像データを取得
      imageDataUrl = canvas.toDataURL('image/png');

      // 元の階に戻す
      if (originalFloor !== floorNumber) {
        document.querySelector(`input[name="floor"][value="${originalFloor}"]`).click();
        await new Promise(resolve => setTimeout(resolve, 100));
        drawGrid(); // 元の階の表示に戻す
      }
      return imageDataUrl;
    }







    // ファイル読み込み／保存
    function loadData(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) {
            floorData = j.floorData;
            [1,2].forEach(n => floorData[n].pillars ||= []);
            [1,2].forEach(n => floorData[n].braces  ||= []);
            drawGrid();
          } else alert("無効なファイル形式です。");
        } catch {
          alert("読み込み失敗");
        }
      };
      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) {
            [1,2].forEach(n => floorData[n].pillars = j.floorData[n].pillars || []);
            drawGrid();
          } else alert("柱データではありません");
        } catch {
          alert("読み込み失敗");
        }
      };
      r.readAsText(f);
      e.target.value = "";
    }
    function saveData() {
      const blob = new Blob([JSON.stringify({ floorData })], { type:'application/json' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = '壁量電卓柱.json';
      a.click();
      URL.revokeObjectURL(a.href);
    }

    // イベント登録
//    document.getElementById("loadButton").addEventListener("click", ()=>document.getElementById("fileInput").click());
//    document.getElementById("fileInput").addEventListener("change", loadData);
//    document.getElementById("loadPillarsButton").addEventListener("click", ()=>document.getElementById("pillarFileInput").click());
//    document.getElementById("pillarFileInput").addEventListener("change", loadPillars);
//    document.getElementById("saveButton").addEventListener("click", saveData);

    // 筋かいモード切替
    const braceButton = document.getElementById("braceButton");
    const braceMenu = document.getElementById("braceMenu");
    braceButton.addEventListener("click", () => {
      isBraceMode = !isBraceMode;
      braceStart = null; braceEndTemp = null; braceEditIndex = null;
      canvas.style.cursor = isBraceMode ? "crosshair" : "default";
      braceButton.classList.toggle("active", isBraceMode);
      hideBraceMenu();
    });

    // 階切替
    document.querySelectorAll('input[name="floor"]').forEach(rb =>
      rb.addEventListener("change", () => {
        currentFloor = +rb.value;
        drawGrid();
      })
    );

    // 筋かいメニュークリック
// 筋かいメニュークリック（変更後）
// JS：クリック時の処理も「削除」判定を加えた完全版
braceMenu.querySelectorAll("li").forEach(li => {
  li.addEventListener("click", e => {
    const d = getCurrentData();

    // ① 削除メニューが選ばれたら……
    if (li.getAttribute("data-action") === "delete") {
      if (braceEditIndex !== null) {
        d.braces.splice(braceEditIndex, 1);
      }
    }
    // ② 削除以外は筋かい追加／編集
    else {
      let type;
      // 自動判定アイテム
      if (li.hasAttribute("data-auto")) {
        const size = li.getAttribute("data-size");
        const dx = braceEndTemp.x - braceStart.x;
        const dy = braceEndTemp.y - braceStart.y;
        if (Math.abs(dx) >= Math.abs(dy)) {
          type = size + (braceStart.x < braceEndTemp.x ? "◢" : "◣");
        } else {
          type = size + (braceStart.y < braceEndTemp.y ? "◢" : "◣");
        }
      }
      // ▲アイテム
      else {
        type = li.getAttribute("data-type");
      }

      // 新規入力
      if (braceStart && braceEndTemp && braceEditIndex === null) {
        const exists = d.braces.some(b =>
          (b.start.x === braceStart.x && b.start.y === braceStart.y &&
           b.end.x   === braceEndTemp.x && b.end.y   === braceEndTemp.y) ||
          (b.start.x === braceEndTemp.x && b.start.y === braceEndTemp.y &&
           b.end.x   === braceStart.x    && b.end.y   === braceStart.y)
        );
        if (!exists) d.braces.push({ start: braceStart, end: braceEndTemp, type });
        else alert("この区間には既に筋かいが入力されています");
      }
      // 編集モード
      else if (braceEditIndex !== null) {
        d.braces[braceEditIndex].type = type;
      }
    }

    drawGrid();
    hideBraceMenu();
    braceStart     = null;
    braceEndTemp   = null;
    braceEditIndex = null;
  });
});


/**
 * 左右の筋かい情報から補正係数と最終表示用の記号を返す
 * @param {?Object} leftBrace  左筋かいオブジェクト（なければ undefined）
 * @param {?Object} rightBrace 右筋かいオブジェクト（なければ undefined）
 * @param {string} leftType    左側の記号文字列（"30◢","45▲","□" など）
 * @param {string} rightType   右側の記号文字列
 * @param {{x:number,y:number}} p  今処理中の柱位置
 * @returns {{
 *   coef: number,    // 補正係数
 *   leftDisp: string,// 最終的に表示する左記号
 *   rightDisp:string // 最終的に表示する右記号
 * }}
 */
function getBraceCorrection2(leftBrace, rightBrace, leftType, rightType, p) {
  // ▲（垂直）かどうか
  const leftTri  = leftType.endsWith("▲");
  const rightTri = rightType.endsWith("▲");
  // それぞれ「柱脚」「柱頭」を判定
  function dir(brace, isTri) {
    if (!brace) return "none";
    if (isTri)         return "head";  // ▲ は柱頭とみなす
    // startが柱なら start＝柱脚、そうでなければ柱頭
    return (brace.start.x === p.x && brace.start.y === p.y) ? "foot" : "head";
  }
  const L = dir(leftBrace,  leftTri);
  const R = dir(rightBrace, rightTri);
  // 【修正点】▲–head or head–▲ → coef=0、反対側を □ 扱い
  if ((leftTri && R === "head") || (rightTri && L === "head")) {
    return {
      coef: 0,
      leftDisp:  leftTri ? leftType  : "□",
      rightDisp: rightTri? rightType : "□"
    };
  }

  // 片側のみ
  if ((leftBrace && !rightBrace) || (!leftBrace && rightBrace)) {
    // □I▲ または ▲I□ は coef = 0 とする
    if ((leftType === "□" && rightType.endsWith("▲")) ||
        (rightType === "□" && leftType.endsWith("▲"))) {
      return {
        coef: 0,
        leftDisp:  leftType,
        rightDisp: rightType
      };
    }
    // それ以外は従来どおり +0.5 / -0.5
    const singleDir = leftBrace ? L : R;
    const coef = (singleDir === "head") ? 0.5 : -0.5;
    return {
      coef,
      leftDisp:  leftType,
      rightDisp: rightType
    };
  }

  // 両側に筋かい
  if (leftBrace && rightBrace) {
    // head–head, head–foot, foot–head → +1.0
    if (
      (L === "head" && R === "head") ||
      (L === "head" && R === "foot") ||
      (L === "foot" && R === "head")
    ) {
      return { coef: 1.0, leftDisp: leftType, rightDisp: rightType };
    }
    // その他（両脚／▲–▲／▲–foot／foot–▲）→ 0
    return { coef: 0, leftDisp: leftType, rightDisp: rightType };
  }

  // 筋かいなし
  return { coef: 0, leftDisp: leftType, rightDisp: rightType };
}

    function hideBraceMenu() {
      braceMenu.style.display = "none";
    }
    document.addEventListener("click", e => {
      if (!braceMenu.contains(e.target) && e.target !== braceButton) hideBraceMenu();
    });

    // 左クリック：柱追加 or 筋かい始点
    canvas.addEventListener("mousedown", e => {
      if (e.button !== 0) return;
      const d = getCurrentData();
      const rect = canvas.getBoundingClientRect();
      const gp = getNearestGridPoint(e.clientX - rect.left, e.clientY - rect.top);
      if (isBraceMode) {
        braceStart = gp;
        return;
      }
      // 壁内部除外
      const isWallInterior = d.lines.some(ln => {
        const x1 = ln.start.x, y1 = ln.start.y;
        const x2 = ln.end.x,   y2 = ln.end.y;
        const dx = x2 - x1, dy = y2 - y1;
        const dxp = gp.x - x1, dyp = gp.y - y1;
        if (dx * dyp !== dy * dxp) return false;
        if (gp.x < Math.min(x1,x2) || gp.x > Math.max(x1,x2)) return false;
        if (gp.y < Math.min(y1,y2) || gp.y > Math.max(y1,y2)) return false;
        if ((gp.x===x1&&gp.y===y1)||(gp.x===x2&&gp.y===y2)) return false;
        return true;
      });
      if (isWallInterior) return;
      // 重複柱防止
      if (!d.pillars.some(p => p.x===gp.x && p.y===gp.y)) {
        d.pillars.push(gp);
        drawGrid();
      }
    });

    // 右クリック：柱削除 or 筋かい新規/編集
    canvas.addEventListener("contextmenu", e => {
      e.preventDefault();
      hideBraceMenu();
      const d = getCurrentData();
      const rect = canvas.getBoundingClientRect();
      const mouseX = e.clientX - rect.left, mouseY = e.clientY - rect.top;
      const gp = getNearestGridPoint(mouseX, mouseY);

      if (isBraceMode) {
        for (let i = 0; i < d.braces.length; i++) {
          const b  = d.braces[i];
          const sx = getXPos(b.start.x, d.xAxisData), sy = getYPos(b.start.y, d.yAxisData);
          const ex = getXPos(b.end.x,   d.xAxisData), ey = getYPos(b.end.y,   d.yAxisData);
          const mx = (sx + ex) / 2,    my = (sy + ey) / 2;
          const dx = b.end.x - b.start.x, dy = b.end.y - b.start.y;
          let px = mx, py = my;
          if (Math.abs(dx) >= Math.abs(dy)) {
            py += 15;
          } else {
            px -= 15;
          }
          if (Math.hypot(mouseX - px, mouseY - py) < 10) {
            braceEditIndex = i;
            braceStart = b.start;
            braceEndTemp = b.end;
            braceMenu.style.top = `${e.clientY}px`;
            braceMenu.style.left = `${e.clientX}px`;
            braceMenu.style.display = "block";
            return;
          }
        }
        if (braceStart) {
          braceEndTemp = gp;
          const existsLine = d.lines.some(ln =>
            (ln.start.x===braceStart.x && ln.start.y===braceStart.y &&
             ln.end.x===gp.x && ln.end.y===gp.y) ||
            (ln.start.x===gp.x && ln.start.y===gp.y &&
             ln.end.x===braceStart.x && ln.end.y===braceStart.y)
          );
          if (!existsLine) {
            alert("この区間には壁がありません");
            braceStart = null;
            return;
          }
          braceEditIndex = null;
          braceMenu.style.top = `${e.clientY}px`;
          braceMenu.style.left = `${e.clientX}px`;
          braceMenu.style.display = "block";
          return;
        }
        return;
      }

      // 非ブレースモード：柱削除
      const idx = d.pillars.findIndex(p => p.x===gp.x && p.y===gp.y);
      if (idx >= 0) {
        d.pillars.splice(idx,1);
        drawGrid();
      }
    });



    // 初期描画
    drawGrid();

document.getElementById("printButton").addEventListener("click", async () => { // asyncキーワードを追加
  const nTableContent = document.getElementById("nTable").innerHTML;
  let floor1ImageHTML = '';
  let floor2ImageHTML = '';

  // --- ここから変更・追加 ---
  try {
    // 1階のCanvas画像を取得
    const floor1ImageData = await getCanvasImageData(1);
    floor1ImageHTML = `
      <div style="page-break-before: always; margin-top: 20px;">
        <h2>1階 平面図</h2>
        <img src="${floor1ImageData}" style="max-width: 100%; border: 1px solid #ccc;">
      </div>
    `;

    // 2階のCanvas画像を取得
    const floor2ImageData = await getCanvasImageData(2);
    floor2ImageHTML = `
      <div style="page-break-before: always; margin-top: 20px;">
        <h2>2階 平面図</h2>
        <img src="${floor2ImageData}" style="max-width: 100%; border: 1px solid #ccc;">
      </div>
    `;
  } catch (error) {
    console.error("Canvas画像の取得中にエラーが発生しました:", error);
    alert("図面の画像取得中にエラーが発生しました。");
    return; // エラー時は処理を中断
  }
  // --- ここまで変更・追加 ---

  const iframe = document.createElement("iframe");
  iframe.style.position = "fixed";
  iframe.style.right = "0";
  iframe.style.bottom = "0";
  iframe.style.width = "0";
  iframe.style.height = "0";
  iframe.style.border = "0";
  document.body.appendChild(iframe);

  const doc = iframe.contentWindow.document;
  doc.open();
  doc.write(`
    <html>
    <head>
      <meta charset="UTF-8">
      <title>N値計算表 及び 平面図 印刷</title>
      <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        h2 { font-size: 1.4em; margin-bottom: 10px; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td {
          border: 1px solid #000;
          padding: 6px;
          text-align: center;
        }
        th {
          background-color: #f3f4f6;
        }
        /* 印刷時の改ページスタイル */
        @media print {
          div[style*="page-break-before: always"] {
            page-break-before: always;
          }
          img {
            max-width: 95% !important; /* 印刷時の画像サイズ調整 */
            display: block;
            margin-left: auto;
            margin-right: auto;
          }
        }
      </style>
    </head>
    <body>
      ${nTableContent}
      ${floor1ImageHTML}   計算値を「いろは」記号に転記しています。実際の施工段階で変更することがあります。
      ${floor2ImageHTML}   計算値を「いろは」記号に転記しています。実際の施工段階で変更することがあります。
    </body>
    </html>
  `);
  doc.close();

  iframe.onload = () => {
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    setTimeout(() => document.body.removeChild(iframe), 1000);
  };
});



// DOM準備後にイベント登録
window.addEventListener("DOMContentLoaded", () => {
  document.getElementById("loadButton").addEventListener("click", () =>
    document.getElementById("fileInput").click()
  );
  document.getElementById("fileInput").addEventListener("change", loadData);

  document.getElementById("loadPillarsButton").addEventListener("click", () =>
    document.getElementById("pillarFileInput").click()
  );
  document.getElementById("pillarFileInput").addEventListener("change", loadPillars);

  document.getElementById("saveButton").addEventListener("click", saveData);
});

  </script>
<script src="nchi1.js"></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>

<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #95a5a6;border-radius:.75rem;background-color:#FFFFFF;width:280px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:128px"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001353%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"><img src="https://hbb.afl.rakuten.co.jp/hgb/0f0388c1.6f4454d6.0f0388c2.a028d65e/?me_id=1271373&item_id=10001353&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fnamazushop%2Fcabinet%2Fsoft%2Fimg57859639s.jpg%3F_ex%3D128x128&s=128x128&t=picttext" border="0" style="margin:2px" alt="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]" title="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]"></a></td><td style="vertical-align:top;width:136px;display: block;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001353%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;">HOUSE-ST1 Ver9キャンペーン版　初心者向け木造構造計算ソフト　2025年改正建築基準法に対応　木造軸組工法住宅の許容応力度設計2017年版対応（オリジナルサンプル付）</a><br><span >価格：393,140円（税込、送料無料)</span> <span style="color:#BBB">(2025/3/30時点)</span></p></td></tr></table></div><br><p style="color:#000000;font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #95a5a6;border-radius:.75rem;background-color:#FFFFFF;width:280px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:128px"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001638%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"><img src="https://hbb.afl.rakuten.co.jp/hgb/0f0388c1.6f4454d6.0f0388c2.a028d65e/?me_id=1271373&item_id=10001638&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fnamazushop%2Fcabinet%2Fsoft%2Fhousedoc2.jpg%3F_ex%3D128x128&s=128x128&t=picttext" border="0" style="margin:2px" alt="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]" title="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]"></a></td><td style="vertical-align:top;width:136px;display: block;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001638%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;">HOUSE-DOC Ver6（2022年建防協評価更新・2012年改訂版木造住宅の耐震診断と補強方法対応）木造耐震診断ソフト</a><br><span >価格：198,000円（税込、送料無料)</span> <span style="color:#BBB">(2025/3/30時点)</span></p></td></tr></table></div><br><p style="color:#000000;font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>
</body>
</html>