@dssp/supervision 1.0.0-alpha.97 → 1.0.0

package/dist-client/pages/building-inspection/building-inspection-detail-ai-measurement.js

@@ -1,868 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-switch.js';
-import '@operato/mini-map/ox-zoomable-image.js';
-import '@material/web/progress/circular-progress.js';
-import gql from 'graphql-tag';
-import { css, html } from 'lit';
-import { customElement, state, query } from 'lit/decorators.js';
-import html2canvas from 'html2canvas';
-import { PageView } from '@operato/shell';
-import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
-import { client } from '@operato/graphql';
-import { notify } from '@operato/layout';
-import './component/building-inspection-detail-header';
-let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement extends PageView {
-    constructor() {
-        super(...arguments);
-        this.KEYPOINT_RULER_API_BASE_URL = 'https://hatiolab-korea-uni.ettisoft.com';
-        this.project = {};
-        this.buildingInspection = {};
-        this.buildingInspectionId = '';
-        this.capturedVideoUrl = null;
-        this.videoFile = null;
-        this.frame = null;
-        this.analyzing = false;
-        this.selectedPoints = {
-            x1: null,
-            y1: null,
-            x2: null,
-            y2: null
-        };
-        this.frameNaturalWidth = 0;
-        this.frameNaturalHeight = 0;
-        this.displayedImageRect = null;
-        this.distance = null;
-        this.unit = null;
-        this.analyzingError = null;
-        this._onImageLoad = () => {
-            if (!this.frameImageEl || !this.imageWrapperEl)
-                return;
-            const img = this.frameImageEl;
-            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
-            const imgRect = img.getBoundingClientRect();
-            this.frameNaturalWidth = img.naturalWidth;
-            this.frameNaturalHeight = img.naturalHeight;
-            this.displayedImageRect = {
-                width: imgRect.width,
-                height: imgRect.height,
-                left: imgRect.left - wrapperRect.left,
-                top: imgRect.top - wrapperRect.top
-            };
-        };
-        this._onImageClick = (event) => {
-            if (!this.frameImageEl || !this.imageWrapperEl)
-                return;
-            const imgRect = this.frameImageEl.getBoundingClientRect();
-            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
-            const clientX = event.clientX;
-            const clientY = event.clientY;
-            // Ignore clicks outside the displayed image area
-            if (clientX < imgRect.left || clientX > imgRect.right || clientY < imgRect.top || clientY > imgRect.bottom) {
-                return;
-            }
-            // 새로운 마크 입력 시 이전 거리/단위 결과 초기화
-            this.distance = null;
-            this.unit = null;
-            this.analyzingError = null;
-            const relativeX = clientX - imgRect.left;
-            const relativeY = clientY - imgRect.top;
-            const xOnNatural = Math.round((relativeX * this.frameNaturalWidth) / imgRect.width);
-            const yOnNatural = Math.round((relativeY * this.frameNaturalHeight) / imgRect.height);
-            if (this.selectedPoints.x1 === null || this.selectedPoints.y1 === null) {
-                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x1: xOnNatural, y1: yOnNatural });
-            }
-            else if (this.selectedPoints.x2 === null || this.selectedPoints.y2 === null) {
-                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x2: xOnNatural, y2: yOnNatural });
-            }
-            else {
-                // 세 번째 클릭부터는 초기화 후 첫 점으로 설정
-                this.selectedPoints = { x1: xOnNatural, y1: yOnNatural, x2: null, y2: null };
-            }
-            // Update displayed rect cache (in case layout changed)
-            this.displayedImageRect = {
-                width: imgRect.width,
-                height: imgRect.height,
-                left: imgRect.left - wrapperRect.left,
-                top: imgRect.top - wrapperRect.top
-            };
-        };
-    }
-    get context() {
-        return {
-            title: '검측 관리 상세 - AI 거리 측정'
-        };
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        return html `
-      <building-inspection-detail-header
-        .buildingInspectionId=${(_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.id}
-        .buildingLevelId=${(_c = (_b = this.buildingInspection) === null || _b === void 0 ? void 0 : _b.buildingLevel) === null || _c === void 0 ? void 0 : _c.id}
-        .projectName=${this.project.name}
-        .buildingName=${(_f = (_e = (_d = this.buildingInspection) === null || _d === void 0 ? void 0 : _d.buildingLevel) === null || _e === void 0 ? void 0 : _e.building) === null || _f === void 0 ? void 0 : _f.name}
-        .buildingLevelFloor=${(_h = (_g = this.buildingInspection) === null || _g === void 0 ? void 0 : _g.buildingLevel) === null || _h === void 0 ? void 0 : _h.floor}
-        .projectId=${this.project.id}
-      ></building-inspection-detail-header>
-
-      <div body>
-        <!-- Preview selected or recorded video -->
-        <div preview>
-          ${((_j = this.frame) === null || _j === void 0 ? void 0 : _j.download_url)
-            ? html `
-                <div class="image-wrapper" @click=${this._onImageClick}>
-                  <img
-                    id="frameImage"
-                    src="${this.KEYPOINT_RULER_API_BASE_URL + ((_k = this.frame) === null || _k === void 0 ? void 0 : _k.download_url)}"
-                    crossorigin="anonymous"
-                    alt="frame"
-                    loading="eager"
-                    @load=${this._onImageLoad}
-                  />
-                  ${this._renderMarkers()}
-                </div>
-              `
-            : // 동영상 선택 후 동영상 프리뷰
-                this.capturedVideoUrl
-                    ? html `<video src=${this.capturedVideoUrl} controls playsinline></video>`
-                    : // 초기 상태, 동영상 선택 전
-                        html `<md-icon>videocam</md-icon>`}
-        </div>
-
-        <div controls>
-          <span class="controls-title">동영상 촬영</span>
-
-          <!-- 가운데 버튼 -->
-          ${((_l = this.frame) === null || _l === void 0 ? void 0 : _l.download_url) && this._hasTwoPoints() && this.distance && this.unit
-            ? // 거리 측정 완료 시, 사진 저장 버튼 표시
-                html `<button class="save" ?disabled=${this.analyzing} @click=${this._savePhoto}>사진 저장</button>`
-            : // 거리 측정 완료 전, 동영상 촬영 버튼 표시
-                html `<div class="camera-controls">
-                <div class="camera-shutter">
-                  <md-icon>camera</md-icon>
-                  <input id="cameraInput" type="file" accept="video/*" capture="environment" @change="${this._onVideoSelected}" />
-                </div>
-                <button class="album-button" @click="${this._onAlbumButtonClick}">앨범 선택</button>
-                <input id="albumInput" type="file" accept="video/*" @change="${this._onVideoSelected}" style="display: none;" />
-              </div>`}
-
-          <!-- Action buttons -->
-          <div action-buttons>
-            ${this.frame
-            ? html `
-                  <button class="photo" ?disabled=${this.analyzing || !this._hasTwoPoints()} @click=${this._onAnalyzePhoto}>
-                    사진 분석
-                  </button>
-                `
-            : html `
-                  <button class="save" ?disabled=${this.analyzing || !this.capturedVideoUrl} @click=${this._onAnalyzeVideo}>
-                    동영상 분석
-                  </button>
-                `}
-            <button class="retry" @click=${this._onRetry}>초기화</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 전체 화면을 덮는 로딩 오버레이 -->
-      ${this.analyzing
-            ? html `<div class="loading-overlay">
-            <div class="loading-container">
-              <md-circular-progress indeterminate></md-circular-progress>
-              <div class="loading-text">분석 중...</div>
-            </div>
-          </div>`
-            : ''}
-    `;
-    }
-    async updated(changes) { }
-    async pageUpdated(changes, lifecycle) {
-        if (this.active) {
-            this._onRetry();
-            this.buildingInspectionId = lifecycle.resourceId || '';
-            await this.initBuildingInspection(this.buildingInspectionId);
-        }
-    }
-    async initBuildingInspection(buildingInspectionId = '') {
-        var _a, _b, _c, _d;
-        const response = await client.query({
-            query: gql `
-        query BuildingInspection($buildingInspectionId: String!) {
-          buildingInspection(id: $buildingInspectionId) {
-            id
-            status
-            requestDate
-            drawingMarker
-            checklist {
-              id
-              location
-              inspectionDrawingType
-            }
-            buildingLevel {
-              id
-              floor
-              mainDrawing {
-                id
-                name
-                fullpath
-              }
-              mainDrawingImage
-              building {
-                id
-                name
-                buildingComplex {
-                  id
-                }
-              }
-            }
-          }
-        }
-      `,
-            variables: {
-                buildingInspectionId
-            }
-        });
-        if (response.errors)
-            return;
-        this.buildingInspection = response.data.buildingInspection;
-        await this._getProjectByBuildingComplexId((_d = (_c = (_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.buildingLevel) === null || _b === void 0 ? void 0 : _b.building) === null || _c === void 0 ? void 0 : _c.buildingComplex) === null || _d === void 0 ? void 0 : _d.id);
-    }
-    async _getProjectByBuildingComplexId(buildingComplexId) {
-        const response = await client.query({
-            query: gql `
-        query ProjectByBuildingComplexId($buildingComplexId: String!) {
-          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {
-            id
-            name
-          }
-        }
-      `,
-            variables: {
-                buildingComplexId
-            }
-        });
-        if (response.errors)
-            return;
-        this.project = response.data.project;
-    }
-    _onVideoSelected(event) {
-        var _a;
-        const input = event.target;
-        const file = (_a = input === null || input === void 0 ? void 0 : input.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
-            return;
-        // Only allow video files
-        if (!file.type.startsWith('video/')) {
-            console.warn('선택된 파일이 동영상이 아닙니다.');
-            return;
-        }
-        // Revoke old object URL if exists
-        if (this.capturedVideoUrl) {
-            URL.revokeObjectURL(this.capturedVideoUrl);
-        }
-        this.videoFile = file;
-        this.capturedVideoUrl = URL.createObjectURL(file);
-    }
-    _onAlbumButtonClick() {
-        var _a;
-        // 앨범 선택을 위해 숨겨진 input을 클릭
-        (_a = this.albumInputEl) === null || _a === void 0 ? void 0 : _a.click();
-    }
-    async _onAnalyzeVideo() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (!this.videoFile) {
-            console.warn('선택된 동영상이 없습니다.');
-            return;
-        }
-        try {
-            this.analyzing = true;
-            const form = new FormData();
-            form.append('files', this.videoFile, this.videoFile.name);
-            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
-                method: 'POST',
-                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
-                body: form
-            });
-            const data = await response.json();
-            this.frame = {
-                file_id: (_b = (_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a.output_files[0]) === null || _b === void 0 ? void 0 : _b.file_id,
-                download_url: (_d = (_c = data === null || data === void 0 ? void 0 : data.result) === null || _c === void 0 ? void 0 : _c.output_files[0]) === null || _d === void 0 ? void 0 : _d.download_url,
-                file_path: (_f = (_e = data === null || data === void 0 ? void 0 : data.result) === null || _e === void 0 ? void 0 : _e.frames[0]) === null || _f === void 0 ? void 0 : _f.file_path,
-                calibration: (_g = data === null || data === void 0 ? void 0 : data.result) === null || _g === void 0 ? void 0 : _g.calibration
-            };
-        }
-        catch (error) {
-            console.error('동영상 업로드 실패:', error);
-        }
-        finally {
-            this.analyzing = false;
-        }
-    }
-    _onRetry() {
-        // Clear current selection and reopen camera
-        if (this.capturedVideoUrl) {
-            URL.revokeObjectURL(this.capturedVideoUrl);
-        }
-        this.capturedVideoUrl = null;
-        this.videoFile = null;
-        this.frame = null;
-        this.selectedPoints = { x1: null, y1: null, x2: null, y2: null };
-        this.displayedImageRect = null;
-        this.frameNaturalWidth = 0;
-        this.frameNaturalHeight = 0;
-        this.cameraInputEl.value = '';
-        this.albumInputEl.value = '';
-        this.distance = null;
-        this.unit = null;
-        this.analyzingError = null;
-    }
-    _hasTwoPoints() {
-        const { x1, y1, x2, y2 } = this.selectedPoints;
-        return x1 !== null && y1 !== null && x2 !== null && y2 !== null;
-    }
-    _renderMarkers() {
-        if (!this.displayedImageRect)
-            return html ``;
-        const { left, top, width, height } = this.displayedImageRect;
-        const { x1, y1, x2, y2 } = this.selectedPoints;
-        const toDisplay = (x, y) => {
-            const dx = left + (x * width) / (this.frameNaturalWidth || 1);
-            const dy = top + (y * height) / (this.frameNaturalHeight || 1);
-            return { dx, dy };
-        };
-        return html `
-      <!-- 첫 번째 점 -->
-      ${x1 !== null && y1 !== null
-            ? (() => {
-                const p = toDisplay(x1, y1);
-                return html `<div class="point-marker point-1" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
-            })()
-            : ''}
-      <!-- 두 번째 점 -->
-      ${x2 !== null && y2 !== null
-            ? (() => {
-                const p = toDisplay(x2, y2);
-                return html `<div class="point-marker point-2" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
-            })()
-            : ''}
-      <!-- 두점 사이 선 -->
-      ${this._hasTwoPoints()
-            ? (() => {
-                const p1 = toDisplay(x1, y1);
-                const p2 = toDisplay(x2, y2);
-                const cx = (p1.dx + p2.dx) / 2;
-                const cy = (p1.dy + p2.dy) / 2;
-                // 선의 길이와 각도 계산
-                const length = Math.sqrt(Math.pow(p2.dx - p1.dx, 2) + Math.pow(p2.dy - p1.dy, 2));
-                const angle = Math.atan2(p2.dy - p1.dy, p2.dx - p1.dx) * (180 / Math.PI);
-                return html `
-              <!-- DIV로 그린 선 -->
-              <div
-                class="line-overlay"
-                style="
-                  left: ${p1.dx}px; 
-                  top: ${p1.dy}px; 
-                  width: ${length}px; 
-                  height: 3px;
-                  transform: rotate(${angle}deg);
-                "
-              ></div>
-              <!-- 거리 라벨 -->
-              ${this.analyzingError
-                    ? html `<div class="distance-label" style="left:${cx}px; top:${cy}px;">${this.analyzingError}</div>`
-                    : this.distance && this.unit
-                        ? html `<div class="distance-label" style="left:${cx}px; top:${cy}px;">${this.distance} ${this.unit}</div>`
-                        : ''}
-            `;
-            })()
-            : ''}
-    `;
-    }
-    async _onAnalyzePhoto() {
-        if (!this.frame) {
-            console.warn('분석할 사진이 없습니다.');
-            return;
-        }
-        if (!this._hasTwoPoints()) {
-            console.warn('두 점을 먼저 선택해 주세요.');
-            return;
-        }
-        try {
-            this.analyzing = true;
-            const payload = {
-                x1: this.selectedPoints.x1,
-                y1: this.selectedPoints.y1,
-                x2: this.selectedPoints.x2,
-                y2: this.selectedPoints.y2,
-                file_path: this.frame.file_path,
-                calibration: this.frame.calibration
-            };
-            const form = new FormData();
-            form.append('input', JSON.stringify(payload));
-            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
-                method: 'POST',
-                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
-                body: form
-            });
-            const result = await response.json();
-            const { distance, unit, error } = result.result || {};
-            this.distance = distance;
-            this.unit = unit;
-            this.analyzingError = error;
-        }
-        catch (error) {
-            console.error('사진 분석 실패:', error);
-        }
-        finally {
-            this.analyzing = false;
-        }
-    }
-    async _savePhoto() {
-        var _a, _b, _c;
-        if (!this.frame || !this._hasTwoPoints() || this.distance === null || !this.unit) {
-            notify({ message: '분석 완료 후 저장할 수 있습니다.', level: 'warn' });
-            return;
-        }
-        const checklistId = (_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.checklist) === null || _b === void 0 ? void 0 : _b.id;
-        let file;
-        try {
-            file = await this.getCurrentImage();
-        }
-        catch (e) {
-            notify({ message: '이미지 합성에 실패했습니다.', level: 'error' });
-            return;
-        }
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($attachments: [NewAttachment!]!) {
-          createAttachments(attachments: $attachments) {
-            id
-          }
-        }
-      `,
-            variables: {
-                attachments: [{ file, refBy: checklistId, refType: 'Checklist', description: (_c = this.buildingInspection) === null || _c === void 0 ? void 0 : _c.status }]
-            },
-            context: { hasUpload: true }
-        });
-        if (!response.errors) {
-            notify({ message: '사진 대지를 저장하였습니다.', level: 'info' });
-            return;
-        }
-        return response.data.createAttachments;
-    }
-    async getCurrentImage() {
-        if (!this.imageWrapperEl) {
-            throw new Error('이미지 영역을 찾을 수 없습니다.');
-        }
-        try {
-            // html2canvas로 .image-wrapper 영역 캡처
-            const canvas = await html2canvas(this.imageWrapperEl, {
-                backgroundColor: null, // 투명 배경
-                scale: 1, // 1:1 스케일
-                useCORS: true, // CORS 이미지 허용
-                allowTaint: false, // 보안상 false
-                logging: false // 로그 비활성화
-            });
-            // 캔버스를 Blob으로 변환
-            const blob = await new Promise(resolve => {
-                canvas.toBlob(resolve, 'image/png', 1.0);
-            });
-            // File 객체로 변환하여 반환
-            return new File([blob], `inspection_${Date.now()}.png`, {
-                type: 'image/png'
-            });
-        }
-        catch (error) {
-            console.error('html2canvas 캡처 실패:', error);
-            throw new Error('화면 캡처에 실패했습니다.');
-        }
-    }
-};
-BuildingInspectionAiMeasurement.styles = [
-    ScrollbarStyles,
-    CommonGristStyles,
-    css `
-      :host {
-        display: grid;
-        grid-template-rows: 75px 1fr;
-        color: #4e5055;
-        width: 100%;
-        height: 100%;
-        background-color: #f7f7f7;
-      }
-
-      div[body] {
-        display: flex;
-        justify-items: center;
-        gap: var(--spacing-medium);
-        margin: var(--spacing-medium);
-        min-height: 0;
-      }
-
-      div[preview] {
-        flex: 1;
-        border: 2px solid #ddd;
-        border-radius: 10px;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 0;
-        overflow: hidden;
-      }
-
-      div[preview] img {
-        flex: 1;
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
-      }
-
-      div[preview] video {
-        flex: 1;
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
-      }
-
-      div[preview] md-icon {
-        --md-icon-size: 160px;
-      }
-
-      .loading-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-      }
-
-      .loading-text {
-        font-size: 14px;
-        color: #666;
-      }
-
-      .frame-container {
-        width: 100%;
-        height: 100%;
-        max-height: 100%;
-        min-height: 0;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        padding: 12px;
-      }
-
-      .frames-header {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-        font-size: 20px;
-        font-weight: 700;
-        color: #333;
-        text-align: center;
-        padding-block: 8px;
-      }
-
-      .frames-count {
-        font-size: 16px;
-        color: #777;
-        font-weight: 600;
-      }
-
-      .frames-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-        gap: 12px;
-      }
-
-      .frame-item {
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        overflow: hidden;
-        background: #fff;
-        cursor: pointer;
-        transition:
-          box-shadow 0.2s,
-          transform 0.1s;
-      }
-
-      .frame-item:hover {
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transform: translateY(-1px);
-      }
-
-      .frame-item img {
-        display: block;
-        width: 100%;
-        height: 120px;
-        object-fit: cover;
-      }
-
-      .image-wrapper {
-        flex: 1;
-        display: flex;
-        position: relative;
-        align-content: center;
-        text-align: center;
-      }
-
-      .point-marker {
-        position: absolute;
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        border: 2px solid #fff;
-        transform: translate(-50%, -50%);
-        pointer-events: none;
-        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
-      }
-
-      .point-1 {
-        background-color: #e53935;
-      }
-
-      .point-2 {
-        background-color: #1e88e5;
-      }
-
-      .line-overlay {
-        position: absolute;
-        pointer-events: none;
-        background-color: #ff9800;
-        transform-origin: left center;
-      }
-
-      .distance-label {
-        position: absolute;
-        background: rgba(0, 0, 0, 0.7);
-        color: #fff;
-        font-size: 14px;
-        padding: 2px 6px;
-        border-radius: 4px;
-        transform: translate(-50%, -120%);
-        pointer-events: none;
-        white-space: nowrap;
-      }
-
-      div[controls] {
-        width: 240px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      div[action-buttons] {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        gap: 15px;
-      }
-
-      .switch-container {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        font-size: 24px;
-        font-weight: bold;
-      }
-
-      ox-input-switch {
-        --ox-simple-switch-fullwidth: 68px;
-        --ox-simple-switch-fullheight: 34px;
-        --ox-simple-switch-thumbnail-size: 34px;
-      }
-
-      .camera-controls {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 12px;
-      }
-
-      .camera-shutter {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        position: relative;
-      }
-
-      .controls-title {
-        font-size: 18px;
-        font-weight: 700;
-        color: #333;
-        margin-bottom: 8px;
-        text-align: center;
-      }
-
-      .camera-shutter md-icon {
-        --md-icon-size: 100px;
-      }
-
-      .camera-shutter input {
-        opacity: 0;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        cursor: pointer;
-      }
-
-      button {
-        padding: 10px 20px;
-        font-size: 16px;
-        border-radius: 5px;
-        border: none;
-        cursor: pointer;
-      }
-
-      button.save {
-        background-color: #4caf50;
-        color: white;
-
-        &:disabled {
-          background-color: #ccc;
-          cursor: default;
-        }
-      }
-
-      button.retry {
-        background-color: #f0ad4e;
-        color: white;
-      }
-
-      button.photo {
-        background-color: #1e88e5;
-        color: white;
-
-        &:disabled {
-          background-color: #ccc;
-          cursor: default;
-        }
-      }
-
-      button.album-button {
-        background-color: #9c27b0;
-        color: white;
-        font-size: 14px;
-        padding: 8px 16px;
-        border-radius: 5px;
-        border: none;
-        cursor: pointer;
-
-        &:hover {
-          background-color: #7b1fa2;
-        }
-
-        &:disabled {
-          background-color: #ccc;
-          cursor: default;
-        }
-      }
-
-      .loading-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-        z-index: 2000;
-      }
-
-      .loading-overlay .loading-container {
-        background: white;
-        padding: 32px;
-        border-radius: 12px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-      }
-    `
-];
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "project", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "buildingInspection", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], BuildingInspectionAiMeasurement.prototype, "buildingInspectionId", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "capturedVideoUrl", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "videoFile", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "frame", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], BuildingInspectionAiMeasurement.prototype, "analyzing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "selectedPoints", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Number)
-], BuildingInspectionAiMeasurement.prototype, "frameNaturalWidth", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Number)
-], BuildingInspectionAiMeasurement.prototype, "frameNaturalHeight", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "displayedImageRect", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "distance", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "unit", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "analyzingError", void 0);
-__decorate([
-    query('img#frameImage'),
-    __metadata("design:type", HTMLImageElement)
-], BuildingInspectionAiMeasurement.prototype, "frameImageEl", void 0);
-__decorate([
-    query('div.image-wrapper'),
-    __metadata("design:type", HTMLDivElement)
-], BuildingInspectionAiMeasurement.prototype, "imageWrapperEl", void 0);
-__decorate([
-    query('#cameraInput'),
-    __metadata("design:type", HTMLInputElement)
-], BuildingInspectionAiMeasurement.prototype, "cameraInputEl", void 0);
-__decorate([
-    query('#albumInput'),
-    __metadata("design:type", HTMLInputElement)
-], BuildingInspectionAiMeasurement.prototype, "albumInputEl", void 0);
-BuildingInspectionAiMeasurement = __decorate([
-    customElement('building-inspection-detail-ai-measurement')
-], BuildingInspectionAiMeasurement);
-export { BuildingInspectionAiMeasurement };
-//# sourceMappingURL=building-inspection-detail-ai-measurement.js.map