簡易外構CADシステム

図形を描画して、面積 (m²) や体積 (m³) を簡単に計算します。

1. 縮尺設定

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

2. 描画ツール

描画モードを解除すると、頂点編集モードになります。

クリックで頂点を追加、ダブルクリックで完成。

マウスでなぞって描画。

3. 体積計算

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

計算結果（合計）

総延長

0.00m

面積

0.00m²

体積

0.00m³

4. 操作

編集モードで頂点を選択し「Backspace」で削除できます。

(function() {
            "use strict";
            
            function runCADApplication() {
                const canvas = document.getElementById('canvas');
                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 drawPolygonBtn = document.getElementById('draw-polygon-btn');
                const drawFreehandBtn = document.getElementById('draw-freehand-btn');
                const drawScaleBtn = document.getElementById('draw-scale-btn');
                const setScaleBtn = document.getElementById('set-scale-btn');
                const scaleLengthInput = document.getElementById('scale-length-input');
                const scaleInfo = document.getElementById('scale-info');
                const modalBackdrop = document.getElementById('modal-backdrop');
                const modalText = document.getElementById('modal-text');
                const modalCloseBtn = document.getElementById('modal-close-btn');

let isDrawing = false;
                let currentPoints = [];
                let polygons = []; 
                let mode = 'none'; // 'polygon', 'scale', 'freehand', 'none' (acts as 'edit')
                
                const DEFAULT_SCALE = 0.01; 
                let scale = DEFAULT_SCALE;
                let scaleLine = { start: null, end: null };
                
                let hoverPos = null; // For PC hover previews

// [MODIFIED] State for vertex editing
                let isDraggingVertex = false;
                let selectedPolygonIndex = -1;
                let selectedVertexIndex = -1;
                let hoveredVertex = { polyIndex: -1, vertIndex: -1 };
                const VERTEX_HOVER_RADIUS = 8; // Pixel radius for selecting vertices

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

function addEventListeners() {
                    canvas.addEventListener('mousedown', handleMouseDown);
                    canvas.addEventListener('mousemove', handleMouseMove);
                    canvas.addEventListener('mouseup', handleMouseUp);
                    canvas.addEventListener('mouseleave', handleMouseUp); 
                    canvas.addEventListener('dblclick', handleDoubleClick);
                    
                    // [NEW] Add keydown listener for vertex deletion
                    document.addEventListener('keydown', handleKeyDown);

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

// [MODIFIED] Toggle mode on/off
                    drawPolygonBtn.addEventListener('click', () => setMode(mode === 'polygon' ? 'none' : 'polygon'));
                    drawFreehandBtn.addEventListener('click', () => setMode(mode === 'freehand' ? 'none' : 'freehand'));
                    drawScaleBtn.addEventListener('click', () => setMode(mode === 'scale' ? 'none' : 'scale'));

setScaleBtn.addEventListener('click', setScale);

modalCloseBtn.addEventListener('click', hideModal);
                    modalBackdrop.addEventListener('click', (e) => {
                        if (e.target === modalBackdrop) {
                            hideModal();
                        }
                    });
                    
                    window.addEventListener('resize', handleResize);
                }

function handleMouseMove(e) {
                    const pos = getMousePos(e);
                    hoverPos = pos; // Always update hover position
                    
                    if (isDraggingVertex) {
                        // [NEW] Logic for dragging a vertex
                        polygons[selectedPolygonIndex].points[selectedVertexIndex] = pos;
                        
                        // Recalculate properties for the moved polygon
                        const poly = polygons[selectedPolygonIndex];
                        poly.pixelLength = calculatePixelLength(poly.points, true);
                        poly.pixelArea = calculatePixelArea(poly.points);
                        poly.centroid = calculateCentroid(poly.points);
                        updatePolygonRealValues(poly); // This updates .length, .area, .volume
                        
                        updateTotalCalculations();

} else if (isDrawing) { // Dragging for 'scale' or 'freehand'
                        if (mode === 'scale') {
                            scaleLine.end = pos;
                        } else if (mode === 'freehand') {
                            const lastPoint = currentPoints[currentPoints.length - 1];
                            if (getDistance(lastPoint, pos) > 5) {
                                currentPoints.push(pos);
                            }
                        }
                    } else if (mode === 'none') {
                        // [NEW] Check for vertex hover
                        let overVertex = false;
                        hoveredVertex = { polyIndex: -1, vertIndex: -1 };
                        for (let i = 0; i < polygons.length; i++) {
                            for (let j = 0; j < polygons[i].points.length; j++) {
                                if (getDistance(pos, polygons[i].points[j]) < VERTEX_HOVER_RADIUS) { 
                                    overVertex = true;
                                    hoveredVertex = { polyIndex: i, vertIndex: j };
                                    break;
                                }
                            }
                            if (overVertex) break;
                        }
                        canvas.style.cursor = overVertex ? 'move' : 'crosshair';
                    } else {
                        // Other modes
                        canvas.style.cursor = 'crosshair';
                    }

redrawCanvas(); // Always redraw for hover previews or drag updates
                }

const poly = polygons[selectedPolygonIndex];
                        
                        // Only allow deletion if the polygon will have 3 or more points left
                        if (poly.points.length > 3) {
                            // Remove the selected vertex
                            poly.points.splice(selectedVertexIndex, 1);

// Recalculate properties for the modified polygon
                            poly.pixelLength = calculatePixelLength(poly.points, true);
                            poly.pixelArea = calculatePixelArea(poly.points);
                            poly.centroid = calculateCentroid(poly.points);
                            updatePolygonRealValues(poly); // Update .length, .area, .volume
                            
                            updateTotalCalculations(); // Update totals

// Reset selection
                            selectedPolygonIndex = -1;
                            selectedVertexIndex = -1;
                            hoveredVertex = { polyIndex: -1, vertIndex: -1 };

redrawCanvas(); // Redraw the canvas
                        } else {
                            // Cannot delete vertex if it would result in less than 3 vertices
                            showModal("頂点が3つ未満になるため削除できません。");
                        }
                    }
                }

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

function hideModal() {
                    modalBackdrop.style.display = 'none';
                }

// ----- Drawing Functions -----
                function redrawCanvas() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    
                    polygons.forEach((p, index) => {
                        drawPolygon(p.points, 'rgba(0, 115, 255, 0.2)', 'rgba(0, 115, 255, 1)', 2, true, index);
                        drawPolygonInfoBox(p);
                    });
                    
                    if (mode === 'polygon' && currentPoints.length > 0) {
                        drawPolygon(currentPoints, 'transparent', 'rgba(0, 0, 255, 0.8)', 2, false);
                    }
                    
                    if (mode === 'freehand' && isDrawing && currentPoints.length > 0) {
                        drawPolygon(currentPoints, 'transparent', 'rgba(0, 0, 255, 0.8)', 2, false);
                    }

if (mode === 'scale' && scaleLine.start) {
                        const endPos = scaleLine.end || scaleLine.start;
                        drawLine(scaleLine.start, endPos, 'rgba(255, 0, 0, 0.8)', 3, true);
                    }
                    
                    // Draw hover preview line for new polygon
                    if (hoverPos && !isDrawing && mode === 'polygon' && currentPoints.length > 0) {
                        const lastPoint = currentPoints[currentPoints.length - 1];
                        drawLine(lastPoint, hoverPos, 'rgba(0, 0, 255, 0.5)', 2, true);
                        
                        const segmentPixelLength = getDistance(lastPoint, hoverPos);
                        const segmentRealLength = segmentPixelLength * scale;
                        let totalLengthInProgress = calculatePixelLength(currentPoints, false) + segmentPixelLength;
                        const totalRealLength = totalLengthInProgress * scale;
                        let measurementText = `${segmentRealLength.toFixed(2)}m (計: ${totalRealLength.toFixed(2)}m)`;
                        drawMeasurementText(measurementText, hoverPos);
                    }

// [NEW] Draw real-time lengths while dragging a vertex
                    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;
                        
                        const text1 = `${len1.toFixed(2)}m`;
                        const text2 = `${len2.toFixed(2)}m`;
                        
                        // Draw text near the midpoint of the lines
                        drawMeasurementText(text1, { x: (p.x + pPrev.x) / 2 - 15, y: (p.y + pPrev.y) / 2 - 15 });
                        drawMeasurementText(text2, { x: (p.x + pNext.x) / 2 + 15, y: (p.y + pNext.y) / 2 + 15 });
                    }
                }
                
                function drawLine(p1, p2, color, width, dashed = false) {
                     ctx.beginPath();
                     ctx.strokeStyle = color;
                     ctx.lineWidth = width;
                     if (dashed) ctx.setLineDash([5, 5]);
                     ctx.moveTo(p1.x, p1.y);
                     ctx.lineTo(p2.x, p2.y);
                     ctx.stroke();
                     ctx.setLineDash([]);
                }

// [MODIFIED] Added polygonIndex to handle hover/selection
                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();

// [MODIFIED] Draw vertices with different states (hover, selected, dragging)
                    if (closed && (mode === 'none' || isDraggingVertex) && polygonIndex !== undefined) {
                         // Draw vertices for completed polygons in 'none' (edit) mode
                         points.forEach((p, index) => {
                            ctx.beginPath();
                            const isHovered = (hoveredVertex.polyIndex === polygonIndex && hoveredVertex.vertIndex === index);
                            const isSelected = (selectedPolygonIndex === polygonIndex && selectedVertexIndex === index);
                            const isDraggingThis = (isDraggingVertex && isSelected);
                            
                            let radius = 5;
                            let color = 'white';

if (isDraggingThis) {
                                radius = 8;
                                color = '#ef4444'; // Red (Dragging)
                            } else if (isSelected) {
                                radius = 7;
                                color = '#f59e0b'; // Yellow (Selected)
                            } else if (isHovered) {
                                radius = 6;
                                color = '#a7f3d0'; // Light Green (Hovered)
                            }
                            
                            ctx.arc(p.x, p.y, radius, 0, 2 * Math.PI);
                            ctx.fillStyle = color;
                            ctx.fill();
                            ctx.strokeStyle = strokeStyle;
                            ctx.lineWidth = 1;
                            ctx.stroke();
                        });
                    } else if (!closed && mode === 'polygon') {
                        // Draw vertices for in-progress polygon
                        points.forEach((p, index) => {
                            ctx.beginPath();
                            const isFirst = index === 0;
                            ctx.arc(p.x, p.y, isFirst ? 6 : 4, 0, 2 * Math.PI);
                            ctx.fillStyle = isFirst ? '#10B981' : 'white';
                            ctx.fill();
                            ctx.strokeStyle = strokeStyle;
                            ctx.stroke();
                        });
                    }
                }
                
                function drawMeasurementText(text, pos) {
                    ctx.font = 'bold 14px "Inter", sans-serif';
                    ctx.fillStyle = '#1d4ed8';
                    ctx.strokeStyle = 'white';
                    ctx.lineWidth = 3;
                    const textX = pos.x;
                    const textY = pos.y;
                    ctx.strokeText(text, textX, textY);
                    ctx.fillText(text, textX, textY);
                }

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

ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
                    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';
                    
                    ctx.fillText(`総延長: ${length.toFixed(2)} m`, x + 10, y + boxHeight / 2 - 20);
                    ctx.fillText(`面積: ${area.toFixed(2)} m²`, x + 10, y + boxHeight / 2);
                    ctx.fillText(`体積: ${volume.toFixed(2)} m³`, x + 10, y + boxHeight / 2 + 20);
                }

// ----- 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);
                }

function clearAll() {
                    isDrawing = false;
                    currentPoints = [];
                    polygons = [];
                    mode = 'none';
                    scale = DEFAULT_SCALE;
                    scaleLine = { start: null, end: null };
                    hoverPos = null;
                    scaleLengthInput.value = '';
                    
                    isDraggingVertex = false;
                    selectedPolygonIndex = -1;
                    selectedVertexIndex = -1;
                    hoveredVertex = { polyIndex: -1, vertIndex: -1 };

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

initialize();
            }

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