簡易外構CADシステム v7

図形を描画して、面積 (m²) や体積 (m³) を計算 | A3出力対応

1. 縮尺設定

必要に応じて、基準線を再設定できます。

2. 描画ツール

クリックで頂点追加、ダブルクリック完了

描画中でも計測可能です

3. 体積計算

掘削/コンクリートの深さ(m)

計算結果（合計）

総延長

0.00m

面積

0.00m²

体積

0.00m³

4. 操作・保存

🖱️ 移動: ⌘/Alt + ドラッグ

🔍 拡大/縮小: マウスホイール

👆 編集: 頂点をドラッグ

100%

PDFを作成中...

(function() {
            "use strict";
            
            function runCADApplication() {
                const canvas = document.getElementById('canvas');
                const container = document.getElementById('canvas-container');
                if (!canvas) { return; }

const ctx = canvas.getContext('2d');
                const depthInput = document.getElementById('depth');
                const lengthDisplay = document.getElementById('length');
                const areaDisplay = document.getElementById('area');
                const volumeDisplay = document.getElementById('volume');
                const clearBtn = document.getElementById('clear-btn');
                const resetViewBtn = document.getElementById('reset-view-btn');
                const downloadPdfBtn = document.getElementById('download-pdf-btn');
                const drawPolygonBtn = document.getElementById('draw-polygon-btn');
                const drawFreehandBtn = document.getElementById('draw-freehand-btn');
                const drawScaleBtn = document.getElementById('draw-scale-btn');
                const measureBtn = document.getElementById('measure-btn');
                const clearMeasurementsBtn = document.getElementById('clear-measurements-btn');
                const setScaleBtn = document.getElementById('set-scale-btn');
                const scaleLengthInput = document.getElementById('scale-length-input');
                const scaleInfo = document.getElementById('scale-info');
                const zoomIndicator = document.getElementById('zoom-indicator');
                const modeIndicator = document.getElementById('mode-indicator');
                const modalBackdrop = document.getElementById('modal-backdrop');
                const modalText = document.getElementById('modal-text');
                const modalCloseBtn = document.getElementById('modal-close-btn');
                const loadingOverlay = document.getElementById('loading-overlay');

function initialize() {
                    addEventListeners();
                    handleResize();
                    updateScaleInfo();
                    centerView();
                }

function getWorldBoundingBox() {
                    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
                    let hasPoints = false;

const checkPoint = (p) => {
                        if (p.x < minX) minX = p.x;
                        if (p.x > maxX) maxX = p.x;
                        if (p.y < minY) minY = p.y;
                        if (p.y > maxY) maxY = p.y;
                        hasPoints = true;
                    };

polygons.forEach(poly => poly.points.forEach(checkPoint));
                    if (scaleLine.start) checkPoint(scaleLine.start);
                    if (scaleLine.end) checkPoint(scaleLine.end);
                    currentPoints.forEach(checkPoint);
                    measurements.forEach(m => { checkPoint(m.start); checkPoint(m.end); });

if (!hasPoints) return null;
                    return { minX, minY, maxX, maxY, width: maxX - minX, height: maxY - minY };
                }

function addEventListeners() {
                    canvas.addEventListener('mousedown', handleMouseDown);
                    window.addEventListener('mousemove', handleMouseMove); 
                    window.addEventListener('mouseup', handleMouseUp);
                    canvas.addEventListener('dblclick', handleDoubleClick);
                    canvas.addEventListener('wheel', handleWheel, { passive: false });
                    
                    document.addEventListener('keydown', handleKeyDown);

depthInput.addEventListener('input', () => {
                        updateAllPolygonVolumes();
                        updateTotalCalculations();
                        redrawCanvas();
                    });
                    clearBtn.addEventListener('click', clearAll);
                    resetViewBtn.addEventListener('click', centerView);
                    downloadPdfBtn.addEventListener('click', generatePDF);

drawPolygonBtn.addEventListener('click', () => setMode(mode === 'polygon' ? 'none' : 'polygon'));
                    drawFreehandBtn.addEventListener('click', () => setMode(mode === 'freehand' ? 'none' : 'freehand'));
                    drawScaleBtn.addEventListener('click', () => setMode(mode === 'scale' ? 'none' : 'scale'));
                    measureBtn.addEventListener('click', () => setMode(mode === 'measure' ? 'none' : 'measure'));
                    
                    clearMeasurementsBtn.addEventListener('click', () => {
                        if(confirm('全ての計測線を削除しますか？')) {
                            measurements = [];
                            redrawCanvas();
                        }
                    });

setScaleBtn.addEventListener('click', setScale);

modalCloseBtn.addEventListener('click', hideModal);
                    modalBackdrop.addEventListener('click', (e) => {
                        if (e.target === modalBackdrop) hideModal();
                    });
                    
                    window.addEventListener('resize', handleResize);
                }
                
                async function generatePDF() {
                    if (typeof window.jspdf === 'undefined') {
                        showModal('PDF生成ライブラリが読み込まれていません。インターネット接続を確認して再読み込みしてください。');
                        return;
                    }

loadingOverlay.style.display = 'flex';
                    await new Promise(resolve => setTimeout(resolve, 100));

try {
                        const originalOffset = { ...viewOffset };
                        const originalScale = viewScale;
                        const originalMode = mode;

mode = 'none';
                        isDraggingVertex = false;
                        hoveredVertex = { polyIndex: -1, vertIndex: -1 };

fitViewToContent();
                        redrawCanvas();

const imgData = canvas.toDataURL('image/png');

const { jsPDF } = window.jspdf;
                        const doc = new jsPDF('l', 'mm', 'a3');
                        
                        const pdfWidth = doc.internal.pageSize.getWidth();
                        const pdfHeight = doc.internal.pageSize.getHeight();

doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
                        doc.save('外構図面_A3.pdf');

viewOffset = originalOffset;
                        viewScale = originalScale;
                        mode = originalMode;
                        redrawCanvas();

} catch (e) {
                        console.error(e);
                        showModal('PDF作成中にエラーが発生しました。');
                    } finally {
                        loadingOverlay.style.display = 'none';
                    }
                }

function getScreenMousePos(evt) {
                    const rect = canvas.getBoundingClientRect();
                    return { x: evt.clientX - rect.left, y: evt.clientY - rect.top };
                }

function screenToWorld(screenPos) {
                    return {
                        x: (screenPos.x - viewOffset.x) / viewScale,
                        y: (screenPos.y - viewOffset.y) / viewScale
                    };
                }

function worldToScreen(worldPos) {
                    return {
                        x: worldPos.x * viewScale + viewOffset.x,
                        y: worldPos.y * viewScale + viewOffset.y
                    };
                }

function handleWheel(e) {
                    e.preventDefault();
                    
                    const zoomIntensity = 0.1;
                    const mouse = getScreenMousePos(e);
                    const worldBefore = screenToWorld(mouse);

if (e.deltaY < 0) {
                        viewScale *= (1 + zoomIntensity);
                    } else {
                        viewScale /= (1 + zoomIntensity);
                    }

viewScale = Math.min(Math.max(0.1, viewScale), 10.0);

viewOffset.x = mouse.x - worldBefore.x * viewScale;
                    viewOffset.y = mouse.y - worldBefore.y * viewScale;

updateZoomIndicator();
                    redrawCanvas();
                }

function handleMouseDown(e) {
                    const screenPos = getScreenMousePos(e);
                    const worldPos = screenToWorld(screenPos);
                    lastMousePos = screenPos;

if (e.button === 1 || e.metaKey || e.altKey) {
                        isPanning = true;
                        canvas.style.cursor = 'grabbing';
                        return;
                    }
                    
                    if (mode === 'none') {
                        if (hoveredVertex.polyIndex !== -1) {
                            isDraggingVertex = true;
                            selectedPolygonIndex = hoveredVertex.polyIndex;
                            selectedVertexIndex = hoveredVertex.vertIndex;
                        } else {
                            isDraggingVertex = false;
                            selectedPolygonIndex = -1;
                            selectedVertexIndex = -1;
                        }
                    }
                    else if (mode === 'polygon') {
                        isDrawing = false; 
                        currentPoints.push(worldPos);
                    } else if (mode === 'scale' || mode === 'freehand') {
                        isDrawing = true; 
                        currentPoints = [worldPos];
                        if (mode === 'scale') {
                            scaleLine.start = worldPos;
                            scaleLine.end = worldPos;
                        }
                    } else if (mode === 'measure') {
                        isDrawing = true;
                        currentMeasurement = { start: worldPos, end: worldPos };
                    }
                    redrawCanvas();
                }

function handleMouseMove(e) {
                    if (isPanning) {
                        const screenPos = getScreenMousePos(e);
                        const dx = screenPos.x - lastMousePos.x;
                        const dy = screenPos.y - lastMousePos.y;
                        viewOffset.x += dx;
                        viewOffset.y += dy;
                        lastMousePos = screenPos;
                        redrawCanvas();
                        return;
                    }

if (e.target !== canvas) return;

const screenPos = getScreenMousePos(e);
                    const worldPos = screenToWorld(screenPos);
                    hoverPos = worldPos;
                    
                    if (isDraggingVertex) {
                        polygons[selectedPolygonIndex].points[selectedVertexIndex] = worldPos;
                        const poly = polygons[selectedPolygonIndex];
                        updatePolyGeometry(poly);
                        updateTotalCalculations();

} else if (isDrawing) {
                        if (mode === 'scale') {
                            scaleLine.end = worldPos;
                        } else if (mode === 'freehand') {
                            const lastPoint = currentPoints[currentPoints.length - 1];
                            if (getDistance(lastPoint, worldPos) > 5 / viewScale) {
                                currentPoints.push(worldPos);
                            }
                        } else if (mode === 'measure') {
                            currentMeasurement.end = worldPos;
                        }
                    } else if (mode === 'none') {
                        let overVertex = false;
                        hoveredVertex = { polyIndex: -1, vertIndex: -1 };
                        
                        for (let i = polygons.length - 1; i >= 0; i--) {
                            for (let j = 0; j < polygons[i].points.length; j++) {
                                const ptScreen = worldToScreen(polygons[i].points[j]);
                                const dist = getDistance(screenPos, ptScreen);
                                
                                if (dist < VERTEX_HOVER_RADIUS) { 
                                    overVertex = true;
                                    hoveredVertex = { polyIndex: i, vertIndex: j };
                                    break;
                                }
                            }
                            if (overVertex) break;
                        }
                        canvas.style.cursor = overVertex ? 'move' : 'default';
                    } else {
                         canvas.style.cursor = 'crosshair';
                    }

redrawCanvas();
                }

function handleMouseUp(e) {
                    if (isPanning) {
                        isPanning = false;
                        canvas.style.cursor = mode === 'none' ? 'default' : 'crosshair';
                        return;
                    }

if (isDraggingVertex) {
                        isDraggingVertex = false;
                    } 
                    else if (isDrawing) { 
                        if (mode === 'freehand' && currentPoints.length > 2) {
                            createPolygonFromPoints(currentPoints);
                            currentPoints = [];
                            setMode('none');
                        } else if (mode === 'measure' && currentMeasurement) {
                            const dist = getDistance(currentMeasurement.start, currentMeasurement.end);
                            if (dist > 0) {
                                measurements.push({ ...currentMeasurement });
                            }
                            currentMeasurement = null;
                        }
                        isDrawing = false;
                    }
                    redrawCanvas();
                }
                
                function handleDoubleClick(e) {
                    if (mode === 'polygon' && currentPoints.length > 2) {
                        createPolygonFromPoints(currentPoints);
                        currentPoints = [];
                        setMode('none');
                        redrawCanvas();
                    }
                }
                
                function handleKeyDown(e) {
                    if (mode === 'none' && selectedPolygonIndex !== -1 && (e.key === 'Backspace' || e.key === 'Delete')) {
                        const poly = polygons[selectedPolygonIndex];
                        if (poly.points.length > 3) {
                            poly.points.splice(selectedVertexIndex, 1);
                            updatePolyGeometry(poly);
                            updateTotalCalculations();
                            selectedPolygonIndex = -1;
                            selectedVertexIndex = -1;
                            hoveredVertex = { polyIndex: -1, vertIndex: -1 };
                            redrawCanvas();
                        } else {
                             if(confirm("頂点が3つ未満になります。この図形を削除しますか？")) {
                                polygons.splice(selectedPolygonIndex, 1);
                                selectedPolygonIndex = -1;
                                updateTotalCalculations();
                                redrawCanvas();
                             }
                        }
                    }
                }

function setMode(newMode) {
                    let shouldClearPoints = true;

// Logic to suspend drawing if switching to Measure mode
                    if (newMode === 'measure') {
                        if (mode === 'polygon' || mode === 'freehand') {
                            suspendedMode = mode; // Suspend current drawing
                            shouldClearPoints = false;
                        } else if (suspendedMode) {
                            // Already suspended
                            shouldClearPoints = false;
                        }
                    } else if (mode === 'measure' && newMode === 'none') {
                        // Toggle off measure -> return to suspended if exists
                        if (suspendedMode) {
                            newMode = suspendedMode;
                            suspendedMode = null; // Resume
                            shouldClearPoints = false;
                        }
                    } else if (newMode === suspendedMode) {
                        // Explicitly clicking the suspended tool button
                        suspendedMode = null; // Resume
                        shouldClearPoints = false;
                    }

mode = newMode;
                    
                    isDrawing = false;
                    currentMeasurement = null;
                    
                    if (shouldClearPoints) {
                        currentPoints = [];
                        suspendedMode = null;
                    }
                    
                    isDraggingVertex = false;
                    selectedPolygonIndex = -1;
                    selectedVertexIndex = -1;
                    
                    if (mode === 'measure') {
                        modeIndicator.classList.remove('hidden');
                    } else {
                        modeIndicator.classList.add('hidden');
                    }

updateButtonStates();
                    redrawCanvas();
                }
                
                function updateButtonStates() {
                    drawPolygonBtn.classList.remove('active');
                    drawFreehandBtn.classList.remove('active');
                    drawScaleBtn.classList.remove('active');
                    measureBtn.classList.remove('active');
                    
                    if (mode === 'polygon') drawPolygonBtn.classList.add('active');
                    else if (mode === 'freehand') drawFreehandBtn.classList.add('active');
                    else if (mode === 'scale') drawScaleBtn.classList.add('active');
                    else if (mode === 'measure') measureBtn.classList.add('active');
                }

function showModal(message) {
                    modalText.textContent = message;
                    modalBackdrop.style.display = 'flex';
                }

function hideModal() {
                    modalBackdrop.style.display = 'none';
                }
                
                function updateZoomIndicator() {
                    zoomIndicator.textContent = Math.round(viewScale * 100) + '%';
                }

// ----- Drawing Functions -----
                function redrawCanvas() {
                    ctx.setTransform(1, 0, 0, 1, 0, 0); 
                    
                    // Background Color
                    ctx.fillStyle = '#f0f3f8';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    
                    drawGrid();

ctx.save();
                    ctx.translate(viewOffset.x, viewOffset.y);
                    ctx.scale(viewScale, viewScale);
                    
                    polygons.forEach((p, index) => {
                        drawPolygon(p.points, 'rgba(0, 115, 255, 0.2)', 'rgba(0, 115, 255, 1)', 2 / viewScale, true, index);
                    });
                    
                    // Determine which drawing mode is active or suspended for visualization
                    const drawMode = (mode === 'polygon' || mode === 'freehand') ? mode : suspendedMode;

if (drawMode === 'polygon' && currentPoints.length > 0) {
                        drawPolygon(currentPoints, 'transparent', 'rgba(0, 0, 255, 0.8)', 2 / viewScale, false);
                    }
                    
                    if (drawMode === 'freehand' && currentPoints.length > 0) {
                        drawPolygon(currentPoints, 'transparent', 'rgba(0, 0, 255, 0.8)', 2 / viewScale, false);
                    }

if (mode === 'scale' && scaleLine.start) {
                        const endPos = scaleLine.end || scaleLine.start;
                        drawLine(scaleLine.start, endPos, 'rgba(255, 0, 0, 0.8)', 3 / viewScale, true);
                    }

// Draw Measurements
                    measurements.forEach(m => {
                        drawMeasurementLine(m.start, m.end);
                    });
                    if (mode === 'measure' && isDrawing && currentMeasurement) {
                        drawMeasurementLine(currentMeasurement.start, currentMeasurement.end);
                    }
                    
                    // Hover Preview Line (Only if NOT in measure mode)
                    if (hoverPos && !isDrawing && mode === 'polygon' && currentPoints.length > 0) {
                        const lastPoint = currentPoints[currentPoints.length - 1];
                        drawLine(lastPoint, hoverPos, 'rgba(0, 0, 255, 0.5)', 2 / viewScale, true);
                        
                        const segmentDist = getDistance(lastPoint, hoverPos);
                        const segmentReal = segmentDist * scale;
                        
                        const midX = (lastPoint.x + hoverPos.x) / 2;
                        const midY = (lastPoint.y + hoverPos.y) / 2;
                        
                        drawEdgeLabel({x: midX, y: midY}, `${segmentReal.toFixed(2)}m`);
                    }

if (isDraggingVertex) {
                        const poly = polygons[selectedPolygonIndex];
                        const pIndex = selectedVertexIndex;
                        const n = poly.points.length;
                        const p = poly.points[pIndex];
                        const pPrev = poly.points[(pIndex - 1 + n) % n];
                        const pNext = poly.points[(pIndex + 1) % n];
                        
                        const len1 = getDistance(pPrev, p) * scale;
                        const len2 = getDistance(p, pNext) * scale;
                        
                        drawEdgeLabel({x: (p.x + pPrev.x) / 2, y: (p.y + pPrev.y) / 2}, `${len1.toFixed(2)}m`);
                        drawEdgeLabel({x: (p.x + pNext.x) / 2, y: (p.y + pNext.y) / 2}, `${len2.toFixed(2)}m`);
                    }

ctx.restore();

polygons.forEach(p => {
                        const screenCentroid = worldToScreen(p.centroid);
                        if (screenCentroid.x > -100 && screenCentroid.x < canvas.width + 100 &&
                            screenCentroid.y > -100 && screenCentroid.y < canvas.height + 100) {
                             drawPolygonInfoBox(p, screenCentroid);
                        }
                    });
                }

function drawMeasurementLine(start, end) {
                    const dist = getDistance(start, end);
                    const realDist = dist * scale;
                    const color = '#d97706'; // amber-600
                    const lineWidth = 2 / viewScale;

// Main Line
                    ctx.beginPath();
                    ctx.strokeStyle = color;
                    ctx.lineWidth = lineWidth;
                    ctx.moveTo(start.x, start.y);
                    ctx.lineTo(end.x, end.y);
                    ctx.stroke();

// Arrows
                    drawArrowHead(start, end, color);
                    drawArrowHead(end, start, color);

// Text
                    const midX = (start.x + end.x) / 2;
                    const midY = (start.y + end.y) / 2;
                    drawEdgeLabel({x: midX, y: midY}, `${realDist.toFixed(2)}m`, color);
                }

function drawArrowHead(from, to, color) {
                    const angle = Math.atan2(to.y - from.y, to.x - from.x);
                    const headLength = 10 / viewScale;
                    const angleOffset = Math.PI / 6;

ctx.beginPath();
                    ctx.fillStyle = color;
                    ctx.moveTo(to.x, to.y);
                    ctx.lineTo(to.x - headLength * Math.cos(angle - angleOffset), to.y - headLength * Math.sin(angle - angleOffset));
                    ctx.lineTo(to.x - headLength * Math.cos(angle + angleOffset), to.y - headLength * Math.sin(angle + angleOffset));
                    ctx.fill();
                }

function drawGrid() {
                    const gridSize = 20 * viewScale; 
                    if (gridSize < 5) return;

const offsetX = viewOffset.x % gridSize;
                    const offsetY = viewOffset.y % gridSize;

ctx.beginPath();
                    ctx.strokeStyle = 'rgba(0, 115, 255, 0.1)';
                    ctx.lineWidth = 1;

for (let x = offsetX; x < canvas.width; x += gridSize) {
                        ctx.moveTo(x, 0);
                        ctx.lineTo(x, canvas.height);
                    }
                    for (let y = offsetY; y < canvas.height; y += gridSize) {
                        ctx.moveTo(0, y);
                        ctx.lineTo(canvas.width, y);
                    }
                    ctx.stroke();
                    
                    const origin = worldToScreen({x:0, y:0});
                    if (origin.x >= 0 && origin.x <= canvas.width) {
                        ctx.beginPath();
                        ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
                        ctx.lineWidth = 2;
                        ctx.moveTo(origin.x, 0);
                        ctx.lineTo(origin.x, canvas.height);
                        ctx.stroke();
                    }
                    if (origin.y >= 0 && origin.y <= canvas.height) {
                        ctx.beginPath();
                        ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
                        ctx.lineWidth = 2;
                        ctx.moveTo(0, origin.y);
                        ctx.lineTo(canvas.width, origin.y);
                        ctx.stroke();
                    }
                }
                
                function drawLine(p1, p2, color, width, dashed = false) {
                      ctx.beginPath();
                      ctx.strokeStyle = color;
                      ctx.lineWidth = width;
                      if (dashed) ctx.setLineDash([5 / viewScale, 5 / viewScale]);
                      ctx.moveTo(p1.x, p1.y);
                      ctx.lineTo(p2.x, p2.y);
                      ctx.stroke();
                      ctx.setLineDash([]);
                }

function drawEdgeLabel(pos, text, color = '#2563eb') {
                    ctx.save();
                    ctx.fillStyle = color;
                    ctx.font = `bold ${14 / viewScale}px "Inter", sans-serif`;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.strokeStyle = 'rgba(255,255,255,0.8)';
                    ctx.lineWidth = 4 / viewScale;
                    ctx.lineJoin = 'round';
                    ctx.strokeText(text, pos.x, pos.y);
                    ctx.fillText(text, pos.x, pos.y);
                    ctx.restore();
                }

function drawPolygon(points, fillStyle, strokeStyle, lineWidth, closed = true, polygonIndex = undefined) {
                    if (points.length < 1) return;
                    ctx.beginPath();
                    ctx.moveTo(points[0].x, points[0].y);
                    for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
                    if (closed && points.length > 2) ctx.closePath();
                    
                    ctx.fillStyle = fillStyle;
                    ctx.fill();
                    ctx.strokeStyle = strokeStyle;
                    ctx.lineWidth = lineWidth;
                    ctx.stroke();

// Draw edge lengths for closed polygons
                    if (closed && points.length > 2) {
                        for (let i = 0; i < points.length; i++) {
                            const p1 = points[i];
                            const p2 = points[(i + 1) % points.length];
                            const dist = getDistance(p1, p2) * scale;
                            const midX = (p1.x + p2.x) / 2;
                            const midY = (p1.y + p2.y) / 2;
                            // Only draw if distance is significant enough to not clutter
                            if (dist > 0.1) {
                                drawEdgeLabel({x: midX, y: midY}, `${dist.toFixed(2)}m`);
                            }
                        }
                    }

if (closed && (mode === 'none' || isDraggingVertex) && polygonIndex !== undefined) {
                         points.forEach((p, index) => {
                            const isHovered = (hoveredVertex.polyIndex === polygonIndex && hoveredVertex.vertIndex === index);
                            const isSelected = (selectedPolygonIndex === polygonIndex && selectedVertexIndex === index);
                            const isDraggingThis = (isDraggingVertex && isSelected);
                            
                            let radius = 5 / viewScale;
                            let color = 'white';

if (isDraggingThis) {
                                radius = 8 / viewScale;
                                color = '#ef4444';
                            } else if (isSelected) {
                                radius = 7 / viewScale;
                                color = '#f59e0b';
                            } else if (isHovered) {
                                radius = 6 / viewScale;
                                color = '#a7f3d0';
                            }
                            
                            ctx.beginPath();
                            ctx.arc(p.x, p.y, radius, 0, 2 * Math.PI);
                            ctx.fillStyle = color;
                            ctx.fill();
                            ctx.strokeStyle = strokeStyle;
                            ctx.lineWidth = 1 / viewScale;
                            ctx.stroke();
                        });
                    } else if (!closed && mode === 'polygon') {
                        points.forEach((p, index) => {
                            ctx.beginPath();
                            const isFirst = index === 0;
                            ctx.arc(p.x, p.y, (isFirst ? 6 : 4) / viewScale, 0, 2 * Math.PI);
                            ctx.fillStyle = isFirst ? '#10B981' : 'white';
                            ctx.fill();
                            ctx.stroke();
                        });
                    }
                }

function drawPolygonInfoBox(polygon, screenPos) {
                    const { length, area, volume, bounds } = polygon;
                    const boxWidth = 160; 
                    const boxHeight = 70; 
                    const x = screenPos.x - boxWidth / 2;
                    const y = screenPos.y - boxHeight / 2;

ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
                    ctx.strokeStyle = '#0073ff';
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    ctx.roundRect(x, y, boxWidth, boxHeight, [5]);
                    ctx.fill();
                    ctx.stroke();

ctx.fillStyle = '#333';
                    ctx.font = '12px "Inter", sans-serif';
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'middle';
                    
                    const lineHeight = 20;
                    let currentY = y + 15;
                    
                    ctx.fillText(`総延長: ${length.toFixed(2)} m`, x + 10, currentY);
                    currentY += lineHeight;
                    ctx.fillText(`面積: ${area.toFixed(2)} m²`, x + 10, currentY);
                    currentY += lineHeight;
                    ctx.fillText(`体積: ${volume.toFixed(2)} m³`, x + 10, currentY);
                }

// ----- Calculation Functions -----
                function updateScaleInfo() {
                    scaleInfo.textContent = scale === DEFAULT_SCALE
                        ? '初期縮尺: 1マス(20px) = 20cm'
                        : `カスタム縮尺: 1m ≈ ${(1 / scale).toFixed(2)}px`;
                }

function calculatePixelArea(points) {
                    let area = 0, n = points.length;
                    for (let i = 0; i < n; i++) {
                        let j = (i + 1) % n;
                        area += points[i].x * points[j].y - points[j].x * points[i].y;
                    }
                    return Math.abs(area / 2);
                }

function updateTotalCalculations() {
                    let totalLength = 0, totalArea = 0, totalVolume = 0;
                    polygons.forEach(p => {
                        totalLength += p.length;
                        totalArea += p.area;
                        totalVolume += p.volume;
                    });
                    lengthDisplay.textContent = totalLength.toFixed(2);
                    areaDisplay.textContent = totalArea.toFixed(2);
                    volumeDisplay.textContent = totalVolume.toFixed(2);
                }

updateScaleInfo();
                    updateTotalCalculations();
                    updateButtonStates();
                    updateZoomIndicator();
                    redrawCanvas();
                }

initialize();
            }

if (document.readyState === "complete" || document.readyState === "interactive") {
                runCADApplication();
            } else {
                document.addEventListener("DOMContentLoaded", runCADApplication);
            }
        })();