drawNET Generator | Integrated

commit 5cea93e317a799cf094300859b7d5f29e0c71c9c Author: leeyj Date: Sun Mar 22 22:37:24 2026 +0900 Initial commit: drawNET Alpha v1.0 - Professional Topology Designer with Full i18n and Performance Optimizations diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ca6d038 --- /dev/null +++ b/.gitignore @@ -0,0 +1,54 @@ +# drawNET Git Ignore Profile (Updated 2026-03-22) + +# --- Python --- +__pycache__/ +*.py[cod] +*$py.class +*.so +*.pyd +.Python +env/ +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +*.egg-info/ +.installed.cfg +*.egg + +# --- DrawNET Specific Exclusions --- +/tools/ +/test/ +/tmp/ +/archive/ +/scratch/ +package.bat +drawNET_distribution_*.zip + +# --- Security & Secrets (CRITICAL) --- +.env +*.lic +*.pem +private_key* +*key.pem +license.lic + +# --- IDE & System --- +.vscode/ +.idea/ +.DS_Store +Thumbs.db +.agent/ +.gemini/ + +# --- Assets & Cache --- +static/assets/packs/*/temp_*.png +static/assets/packs/*/temp_*.svg diff --git a/README.md b/README.md new file mode 100644 index 0000000..af3f1d8 --- /dev/null +++ b/README.md @@ -0,0 +1,88 @@ +# drawNET - 엔지니어를 위한 고정밀 네트워크 아키텍처 설계 도구 + +

+ +

+ +**drawNET**은 복잡한 IT 인프라와 네트워크 토폴로지를 설계하기 위해 개발된 전용 다이어그램 도구입니다. 엔지니어의 실무 경험을 바탕으로, 단순한 그림 그리기를 넘어 **데이터 무결성**과 **레이어 기반의 논리적 아키텍처**를 완벽하게 지원합니다. + +![drawNET Main Screenshot](./image/main.png) + +--- + +## 🚀 주요 기능 (Key Features) + +- **스마트 그룹화 및 계층 관리:** 노드 간의 포함 관계를 UUID 기반으로 관리하며, 중첩된 그룹 내에서도 가장 안쪽의 객체를 정확히 찾아내는 지능형 선택 시스템을 갖추고 있습니다. +- **논리적 멀티 레이어 (Multi-Layer):** '물리 레이어'와 '논리 레이어'를 구분하여 설계할 수 있습니다. 레이어 간 관통 스냅(Ghost Snapping)을 통해 복잡한 망 구조를 명확하게 시각화합니다. +- **프로페셔널 정밀 도구:** + - **Surgical Picker:** 겹쳐진 오브젝트를 포토샵처럼 리스트로 띄워 선택. + - **Format Painter:** 노드 속성 및 선 스타일(라우팅 방식 포함) 대량 복제. + - **Object Locking:** 설계 실수 방지를 위한 강력한 객체 고정 기능. +- **하이엔드 리포트 익스포트:** 단순 이미지를 넘어, 개별 객체가 살아있는 **전문가용 PPTX 및 PDF 리포트** 자동 생성 기능을 제공합니다. +- **오브젝트 스튜디오 (Object Studio):** 직접 찍은 사진이나 캡처 이미지를 즉시 고품질 SVG 벡터 아이콘으로 변환하여 나만의 자산 라이브러리를 구축할 수 있습니다. + +--- + +## 📚 도움말 및 가이드 (Documentation) + +공식 매뉴얼을 통해 drawNET의 기능을 100% 활용해 보세요. + +- [**사용자 가이드 (Getting Started)**](./manual/guide.md): 기본적인 사용법과 워크플로우를 안내합니다. +- [**단축키 일람 (Shortcuts)**](./manual/shortcuts.md): 작업을 2배 더 빠르게 만들어주는 프리미엄 단축키 목록입니다. +- [**리치 카드 가이드 (Rich Card)**](./manual/rich_card.md): 도면에 풍부한 텍스트 정보를 추가하는 방법을 설명합니다. + +--- + +## 💎 라이선스 및 가격 안내 (Pricing) + +사용자의 필요에 따라 유연한 선택이 가능하도록 구독형(Monthly)과 일시불(Perpetual) 옵션을 모두 제공할 예정입니다. + +| 구분 | **Community (Free)** | **Basic (Essential)** | **Pro (Enterprise)** | +| :--- | :---: | :---: | :---: | +| **권장 가격 (Monthly)** | $0 | **추후 확정 예정 (TBD)** | **추후 확정 예정 (TBD)** | +| **평생 소장 (Perpetual)** | - | **추후 확정 예정 (TBD)** | **추후 확정 예정 (TBD)** | +| **권장 대상** | 개인 학습 및 단순 설계 | 소규모 프로젝트 | 기업 / 전문 아키텍트 | +| **핵심 혜택** | 3개 레이어 제한 (알파 한정) | **무제한 레이어** | **모든 기능 포함** | +| **고급 기능** | 기본 라이브러리 | 서식 복사, 정밀 배치 도구 | **Object Studio (벡터화)** | +| **내보내기** | .dnet, PNG | + PDF, SVG | **+ PPTX 전용 리포트** | +| **기술 지원** | 커뮤니티 지원 | 이메일 문의 | 우선 순위 대응 | + +> **알림:** 현재 drawNET은 **Alpha 버전**으로, 기능 검증 및 안정화 단계에 있습니다. 정식 버전(v1.0) 출시 전까지 모든 기능에 대한 가격 정책은 변경될 수 있으며, 알파 테스터에게는 추후 특별 혜택이 제공될 예정입니다. + +--- + +## 📥 설치 및 실행 + +### 필수 요구사항 +- Python 3.9+ +- Flask 및 하위 의존 라이브러리 + +### 실행 방법 +```bash +# 저장소 복사 +git clone https://github.com/leeyj78/drawNET.git +cd drawNET + +# 의존성 설치 +pip install -r requirements.txt + +# 서버 실행 +python app.py +``` +접속 주소: `http://localhost:5000` + +--- + +## ❤️ 후원 및 피드백 (Support) + +drawNET은 개발자의 열정으로 만들어지고 있습니다. 이 프로젝트가 마음에 드셨다면 커피 한 잔의 여유를 선물해 주세요! 후원금은 서버 유지비와 기능 개발에 소중히 사용됩니다. + +- **Ko-fi 후원:** [https://ko-fi.com/leeyj78](https://ko-fi.com/leeyj78) +- **버그 제보:** [Issues](https://github.com/leeyj78/drawNET/issues) (Docs 참고) + +--- + +## ⚖️ License + +Copyright © 2026 drawNET Team. All Rights Reserved. +개인 사용자는 Community 라이선스로 시작하실 수 있으며, 기업 및 상업적 목적의 경우 원격 라이선스 활성화가 필요합니다. diff --git a/app.py b/app.py new file mode 100644 index 0000000..37641e4 --- /dev/null +++ b/app.py @@ -0,0 +1,31 @@ +import os +from flask import Flask +from jinja2 import ChoiceLoader, FileSystemLoader +from routes.main_routes import main_bp +from routes.api_routes import api_bp + +def create_app(): + app = Flask(__name__) + + # Allow loading templates from both 'templates' and 'tools' folders + app.jinja_loader = ChoiceLoader([ + FileSystemLoader(os.path.join(app.root_path, 'templates')), + FileSystemLoader(os.path.join(app.root_path, 'tools')) + ]) + + # Register Blueprints + app.register_blueprint(main_bp) + app.register_blueprint(api_bp) + + return app + +if __name__ == '__main__': + app = create_app() + + # 로컬 실행 최적화 + print("------------------------------------------") + print("drawNET Premium Server Starting...") + print("URL: http://127.0.0.1:5000") + print("------------------------------------------") + + app.run(debug=True, port=5000) diff --git a/config.json b/config.json new file mode 100644 index 0000000..c0caf1c --- /dev/null +++ b/config.json @@ -0,0 +1,8 @@ +{ + "mousewheel": { + "factor": 1.05, + "minScale": 0.1, + "maxScale": 10.0 + }, + "log_level": "info" +} \ No newline at end of file diff --git a/docs/architecture.md b/docs/architecture.md new file mode 100644 index 0000000..ce79557 --- /dev/null +++ b/docs/architecture.md @@ -0,0 +1,238 @@ +# drawNET System Architecture: Native JSON-Object Topology (v1.0) + +> **"Programs must be written for people to read, and only incidentally for machines to execute."** — *Harold Abelson* +> **"What is not documented, does not exist in the eyes of Engineering."** — *Software Engineering Proverb* + +--- + +## 1. 개요 (Abstract) + +drawNET은 단순한 다이어그램 그리기 도구를 넘어, 엔터프라이즈급 네트워크 토폴로지 설계 및 엔니지어링을 위한 **객체 지향적 시각화 프레임워크**입니다. 초기 DSL(Domain Specific Language) 기반의 텍스트 중심 구조에서 탈피하여, 고성능 그래프 엔진인 **AntV X6 v2**를 기반으로 한 **JSON-Native 아키텍처**로 진화했습니다. 본 시스템은 데이터의 영속성(Persistence), 정밀한 공간 쿼리(Spatial Query), 그리고 멀티레이어 논리 격리를 핵심 가치로 삼는 **v1.0 Premium Edition**입니다. + +--- + +## 2. 설계 철학 (Design Philosophy) + +### 2.1 Drawing에서 Engineering으로 +기존 도구들이 시각적 표현에 집중했다면, drawNET은 **"데이터가 주도하는 시각화"**를 지향합니다. 모든 시각적 요소는 정규화된 데이터 모델의 하위 표현(View)에 불과하며, 핵심 로직은 UUID 기반의 객체 관계망에서 동작합니다. + +### 2.2 하이브리드 인터페이스 (The Hybrid UI Strategy) +사용자에게는 직관적인 GUI(마우스 조작)를 제공하지만, 백그라운드에서는 모든 행위가 정형화된 JSON 스트림으로 변환되어 저장됩니다. 이는 향후 AI 기반의 토폴로지 자동 최적화 및 이상 탐지(Anomaly Detection)를 위한 학습 데이터셋 구축에 최적화된 구조입니다. + +--- + +## 3. 핵심 아키텍처 모델 (Core Architecture Model) + +drawNET은 **SSoT (Single Source of Truth)** 원칙에 따라 모든 상태를 단일 JSON 객체로 관리합니다. + +### 3.1 논리 흐름 (Logical Workflow) +시스템의 데이터 처리는 다음과 같은 순환 구조를 따릅니다. + +1. **Interaction Layer**: 사용자의 드래그, 단축키, 속성 변경을 수집합니다. +2. **Event Orchestration**: 객체 간 부모-자식 관계 변경(Embedding), 연결 상태 변경(Connecting) 이벤트를 감지하여 데이터 무결성을 검증합니다. +3. **Data Transformation**: 변경된 상태를 X6 셀(Cell)의 `data` 속성에 즉각 반영합니다. +4. **Persistence Layer**: 변경된 전체 그래프 상태를 `graph.toJSON()`으로 직렬화하여 영속 저장소(LocalStorage/Server)에 동기화합니다. + +### 3.2 UUID 기반 객체 참조 (UUID-based Referencing) +모든 노드와 엣지는 시스템 전역에서 유일한 **UUID**를 식별자로 가집니다. 이는 **RFC4122 v4** 표준을 철저하게 준수하며, 라벨(Label)이나 명칭 변경 시에도 객체 간의 참조 무결성(Referential Integrity)이 깨지지 않도록 보장하며, 대규모 프로젝트에서 복잡한 계층 구조를 추적하는 핵심 메커니즘입니다. + +### 3.3 시스템 구조도 (System Overview Diagram) + +본 시스템의 모듈 간 상호작용과 데이터 흐름은 다음과 같습니다. + +```mermaid +graph TD + User["사용자 (User)"] + X6["AntV X6 Graph Engine"] + Sidebar["속성 사이드바 (Sidebar)"] + Persistence["영속성 제어 (persistence.js)"] + State["Shared State (state.js)"] + LocalStorage["Local Storage / Server"] + + User -- "UI 상호작용" --> X6 + X6 -- "JSON Export" --> Persistence + Persistence -- "JSON Save" --> LocalStorage + LocalStorage -- "JSON Load" --> Persistence + Persistence -- "graph.fromJSON()" --> X6 + + X6 -- "객체 선택 (UUID)" --> Sidebar + Sidebar -- "데이터 수정 (setData)" --> X6 + + subgraph Frontend [Client Side] + X6 + Sidebar + State + Persistence + end +``` + +--- + +## 4. 멀티레이어 논리 격리 및 제어 (Multi-Layer & Logical Isolation) + +drawNET은 단순히 선을 겹쳐 그리는 도구가 아닌, 복잡한 인프라를 **논리적 도메인(Domain)**으로 분리하여 관리하는 차세대 아키텍처를 채택했습니다. 이는 기존의 드로잉 도구(Draw.io, Visio 등)와 가장 극명하게 대비되는 drawNET만의 독보적 강점입니다. + +### 4.1 Visual Layer vs. Logical Engineering Layer +| 비교 항목 | 기존 도구 (Visio, Draw.io) | **drawNET Premium** | +| :--- | :--- | :--- | +| **핵심 성격** | **Visual Layer** (시각적 그룹화) | **Logical Layer** (엔지니어링 격리) | +| **주요 용도** | 단순 Show/Hide (투명 비닐지 방식) | 도메인별 논리 격리 및 데이터 제어 | +| **데이터 일관성** | 레이어 간 복사 시 별개 객체로 분리 | 동일 UUID 기반의 다중 관점(View) 동기화 | +| **상호 작용** | 레이어 간 논리적 연동 불가 | Cross-layer Tunneling (계층 간 연동 추적) | +| **활용 가치** | "그림의 정리 정돈" | "복잡한 시스템의 통합 거버넌스" | + +### 4.2 왜 '논리적 격리'인가? (The Reason Why) +엔터프라이즈급 인프라 설계에서 물리(Physical), 논리(Logical), 보안(Security) 데이터를 하나의 화면에 그리는 것은 불가능에 가깝습니다. drawNET은 이를 해결하기 위해 다음과 같은 고난도 기술을 구현했습니다. +1. **도메인 격리(Domain Isolation)**: L1(케이블/랙), L2(VLAN/IP), L3(보안 정책) 등 각 도메인의 정밀한 분리를 통해 설계의 복잡도를 낮추고 각 담당자가 본인의 영역에 집중하게 합니다. +2. **Single Source of Truth (SSOT)**: 1번 레이어의 '코어 스위치'와 3번 레이어의 '보안 장비'가 동일한 물리 장비라면, drawNET은 단 하나의 데이터 소스를 공유하여 어느 레이어에서 수정해도 전체 정합성이 유지되게 설계되었습니다. +3. **지능형 터널링(Layer Tunneling)**: 레이어는 분리되어 있지만, 데이터 경로(Path)는 연결되어 있습니다. 물리적 케이블이 끊어졌을 때 논리 레이어의 패킷 흐름에 어떤 영향을 주는지 **교차 레이어 분석**이 가능합니다. + +### 4.3 공간 쿼리 및 부모 선택 알고리즘 (Innermost Heuristic) +노드가 중첩된 그룹 영역으로 이동할 때, 시스템은 **Bounding Box 면적 기반의 Innermost 알고리즘**을 수행합니다. +- **알고리즘**: 드롭 포인트를 포함하는 모든 부모 후보 중 면적이 가장 작은(가장 구체적인) 그룹을 최종 부모로 선택합니다. +- **의도**: 이를 통해 복잡한 랙(Rack) 및 사이트(Site) 계층 내부로의 직관적인 객체 삽입이 가능해집니다. + +--- + +## 5. 저장 방식의 지향성과 확장성 (Storage & Scalability) + +### 5.1 JSON-Native의 이점 +- **VCS 친화성**: 텍스트 기반 JSON 파일로 저장되므로, Git과 같은 버전 관리 시스템을 통해 시나리오별 변경 이력을 관리하기 용이합니다. +- **상호운용성 (Interoperability)**: Python, JS 등 다양한 언어에서 표준 JSON 라이브러리를 통해 프로젝트 파일에 접근하여 자동화된 분석 보고서를 생성할 수 있습니다. + +### 5.2 에셋 라이브러리 확장성 (Modular & Open Asset Architecture) +drawNET의 에셋 시스템은 폐쇄적�### 7. 전문 내보내기 서브시스템 및 하이브리드 리포팅 (High-Fidelity Export & Hybrid Reporting) + +drawNET은 단순한 캔버스 캡처를 넘어, 엔지니어링 결과물의 시각적 완밀성과 데이터의 편집 가능성을 동시에 확보하는 **하이브리드 내보내기 전략**을 취합니다. + +#### 7.1 하이브리드 이미지-객체 모델 (Hybrid Image-Object Model) +PPTX 리포트 생성 시, 시스템은 두 가지 서로 다른 렌더링 경로를 결합합니다. +1. **Topology View (High-Res Snapshot)**: 복잡한 선(Path) 라우팅, SVG 그림자, 반투명 그룹 등은 PPTX 네이티브 객체로 변환 시 시각적 손실이 큽니다. 이를 방지하기 위해 200% 스케일의 고해상도 PNG 스냅샷으로 캔버스를 캡처하여 삽입합니다. +2. **Inventory Data (Native PPTX Objects)**: 장비 목록, 프로젝트 정보, 요약 통계는 수정이 용이해야 합니다. 따라서 이 데이터는 PPTX의 네이티브 테이블(Table) 및 텍스트 상자로 생성하여, 리포트 출력 후에도 사용자가 파워포인트 내에서 직접 내용을 수정할 수 있도록 보장합니다. + +#### 7.2 초정밀 클린 캡처 및 안정화 (Clean Capture & Stabilization) +내보내기 수행 시, 시스템은 실시간으로 **가상 스타일시트 주입(Virtual CSS Injection)** 및 **모사 데이터 동기화** 기술을 사용합니다. +- **UI 노이즈 제거**: 연결점(Port/Anchor), 선택 박스(Selection), 그리드 가이드 등을 캡처 순간에만 `display: none`으로 처리합니다. +- **적응형 안정화 지연 (1000ms Delay)**: 모델 업데이트(Base64 변환 등) 후 브라우저 DOM이 완전히 동기화되도록 1초의 대기 시간을 강제하여, 저사양 환경에서도 캡처 무결성을 보장합니다. +- **해상도 보정 (2x Scaling)**: 사용자 모니터의 DPI와 관계없이 항상 고품질 인쇄가 가능한 수준의 픽셀 밀도를 확보하기 위해 2배수 슈퍼 샘플링(Super Sampling) 캡처를 수행합니다. + +#### 7.3 전수 속성 스캔 및 Base64 임베딩 (Recursive Asset Embedding) +SVG 내보내기의 핵심은 외부 자산의 완전한 자립화입니다. +- **재귀적 선택자 탐색**: 특정 태그에 국한되지 않고 노드의 모든 속성 트리를 스캔하여 외부 이미지 경로를 식별합니다. +- **속성 패리티(Parity)**: `xlink:href`와 일반 `href` 속성 모두에 동일한 Base64 데이터를 주입하여 크로스 브라우저/뷰어 호환성을 극대화합니다. +- **절대 좌표 매핑 (Zero-Clip)**: 캔버스의 현재 뷰포트 상태와 무관하게 `getCellsBBox`를 통한 실제 객체 영역을 자동 계산하고, 명시적인 `viewBox` 주입을 통해 상하좌우 짤림 현상을 원천 차단합니다. +상태, 환경 사양 등 무한한 메타데이터를 자유롭게 추가하고 수정할 수 있습니다. +- **데이터 활용성**: 모든 부가 정보는 JSON 데이터 모델에 정적/동적으로 포함되어 저장되므로, 설계가 완료된 후 즉시 인벤토리 보고서(Inventory Report) 생성, 검색 엔진 필터링, 혹은 외부 시스템과의 데이터 연동(API)에 활용됩니다. +- **설계 의도의 보존**: 이는 "그림"이 아닌 "설계 데이터" 그 자체를 보존함으로써, 설계자가 의도한 모든 엔지니어링 맥락이 유실 없이 영구적으로 관리됨을 의미합니다. + +### 5.4 PM 지향적 설계 및 자산 관리 (PM-Centric Design & Asset Management) +엔지니어의 기술적 관점뿐 아니라, 프로젝트 매니저(PM)의 **의사결정 및 자산 관리 효율성**을 극대화합니다. +- **선제적 비즈니스 데이터 매핑**: 설계 초기 단계부터 각 객체에 벤더 정보, 단가(Price), 구매 일정, 담당 부서 등 관리 지표를 미리 입력할 수 있습니다. +- **원클릭 전수 관리**: "Inventory View" 및 "JSON/PPTX Export" 기능을 통해 프로젝트에 투입된 전체 자산 현황과 예상 비용을 한눈에 파악할 수 있으며, 이는 즉시 구매 발주서나 예산 보고서의 기초 자료로 변환됩니다. +- **전략적 가시성**: 시각적 토폴로지와 비즈니스 데이터가 결합됨으로써, PM은 단순히 "어떻게 연결되는가"를 넘어 "무엇이 얼마의 비용으로 구축되는가"에 대한 전략적 통찰을 실시간으로 확보할 수 있습니다. + +### 5.5 REST API 기반의 생태계 통합 (REST API-Based Ecosystem Integration) +drawNET의 데이터 구조는 고립된 파일에 머물지 않고 외부 시스템과 유기적으로 소통할 수 있는 **프로그래밍 가능한 인터페이스(Programmable Interface)**를 지향합니다. +- **Native REST API 지원**: Flask 기반의 강력한 백엔드를 통해 토폴로지 데이터의 CRUD(Create, Read, Update, Delete)를 REST API로 실시간 제공합니다. +- **엔터프라이즈 시스템 연동**: 기업 내 CMDB(자산 관리 시스템), NMS(네트워크 모니터링), 혹은 클라우드 프로비저닝 엔진과의 양방향 데이터 동기화가 가능합니다. +- **자동화된 생명주기 관리**: 외부 스크립트를 통해 새로운 프로젝트를 자동 생성하거나, 실시간 모니터링 데이터를 API로 수신하여 캔버스상의 노드 상태(장애 발생 등)를 시각적으로 즉시 갱신하는 등 고도화된 자동화 워크플로우를 구현할 수 있는 강력한 무기를 갖추고 있습니다. + +--- + +## 6. 엔지니어링 생산성: 지능형 단축키 시스템 (Engineering Productivity: Intelligent Hotkey System) + +drawNET은 일반적인 드로잉 도구(Draw.io, Visio 등)와 차별화되는 **"전문 엔지니어 전용 워크스테이션"**으로서의 정체성을 단축키 시스템을 통해 증명합니다. + +### 6.1 "Always-Enabled" 로직의 기술적 의도 +일반적인 웹 도구는 텍스트 입력 중 시스템 단축킹(Undo/Redo 등)이 차단되거나 포커스 충돌을 일으킵니다. drawNET의 단축키 엔진은 `isTyping` 상태를 정밀하게 인지하되, 핵심적인 그래프 제어 액션에 대해서는 **전역적 우선순위(Override Priority)**를 부여합니다. 이는 수천 개의 속성을 동시에 수정하는 현업 환경에서 작업의 연속성을 완벽하게 보장하는 설계입니다. + +### 6.2 Drawing Tool vs. Engineering Tool +- **드로잉 도구 (Draw.io, Visio)**: 시각적 표현이 목적이므로 마우스 기반의 정교한 배치를 우선시하며, 단축키는 보조 수단에 불과합니다. +- **엔지니어링 도구 (drawNET)**: 토폴로지 구성 속도가 핵심입니다. 따라서 **"Zero-Mouse"** 워크플로우를 지향하며, 로직 기반의 정렬(Alignment), 속성 복제(Format Painter), 컨텍스트 기반의 부모-자식 포함 로직을 단축키 하나로 수행할 수 있도록 최적화되어 있습니다. + +### 6.3 현업 최적화 컨텍스트 핸들러 +단순한 좌표 이동을 넘어, `Grid Snapping` 연동 이동, `Large/Small Step` 이동, 그리고 레이어 가시성 퀵 토글 등 현업 엔지니어가 토폴로지 구성 시 가장 빈번하게 수행하는 동작들을 모듈화된 핸들러(`handlers/`)로 구현하여 응답성을 극대화했습니다. + +--- + +## 7. 전문 내보내기 서브시스템 및 하이브리드 리포팅 (High-Fidelity Export & Hybrid Reporting) + +drawNET은 단순한 캔버스 캡처를 넘어, 엔지니어링 결과물의 시각적 완밀성과 데이터의 편집 가능성을 동시에 확보하는 **하이브리드 내보내기 전략**을 취합니다. + +### 7.1 하이브리드 이미지-객체 모델 (Hybrid Image-Object Model) +PPTX 리포트 생성 시, 시스템은 두 가지 서로 다른 렌더링 경로를 결합합니다. +1. **Topology View (High-Res Snapshot)**: 복잡한 선(Path) 라우팅, SVG 그림자, 반투명 그룹 등은 PPTX 네이티브 객체로 변환 시 시각적 손실이 큽니다. 이를 방지하기 위해 200% 스케일의 고해상도 PNG 스냅샷으로 캔버스를 캡처하여 삽입합니다. +2. **Inventory Data (Native PPTX Objects)**: 장비 목록, 프로젝트 정보, 요약 통계는 수정이 용이해야 합니다. 따라서 이 데이터는 PPTX의 네이티브 테이블(Table) 및 텍스트 상자로 생성하여, 리포트 출력 후에도 사용자가 파워포인트 내에서 직접 내용을 수정할 수 있도록 보장합니다. + +### 7.2 초정밀 클린 캡처 메커니즘 (Clean Capture Mechanism) +내보내기 수행 시, 시스템은 실시간으로 **가상 스타일시트 주입(Virtual CSS Injection)** 기술을 사용하여 시각적 노이즈를 제거합니다. +- **UI 노이즈 제거**: 연결점(Port/Anchor), 선택 박스(Selection), 그리드 가이드 등을 캡처 순간에만 `display: none`으로 처리하여 설계 데이터 본연의 모습만 선명하게 담아냅니다. +- **해상도 보정 (2x Scaling)**: 사용자 모니터의 DPI와 관계없이 항상 고품질 인쇄가 가능한 수준의 픽셀 밀도를 확보하기 위해 2배수 슈퍼 샘플링(Super Sampling) 캡처를 수행합니다. + +### 7.3 레이어 기반 수직적 리포팅 (Layer-Aware Vertical Reporting) +전체 토폴로지뿐 아니라, 프로젝트에 정의된 각 레이어(물리, 논리, 보안 등)를 개별적으로 분석하여 슬라이드를 생성합니다. +- **동적 가시성 제어**: 각 레이어별 전용 슬라이드를 캡처할 때, 시스템은 백그라운드에서 레이어 가시성을 순차적으로 토글(Toggle)하고 필터를 적용하여 해당 도메인의 객체들만 깨끗하게 분리된 자동 리포트를 구성합니다. + + +#### 7.4 엔지니어링 실무 데이터 매핑 (Engineering Data Mapping) +- **식별자 기반 매핑 (ID-Key Linkage)**: drawNET의 모든 객체는 고유 UUID를 Primary Key로 가집니다. 이는 실무 엔지니어가 보유한 방대한 외부 데이터(라우팅 테이블, 방화벽 룰 등)와 시각적 도면을 VLOOKUP이나 데이터 조인으로 즉시 연결하는 매개체가 됩니다. +- **경량 메타데이터 레이어 (Description & Tags)**: 도면의 가벼움을 유지하면서도 실무에 꼭 필요한 컨텍스트를 `Tags`와 `Description`으로 캡처합니다. 이는 "무거운 데이터 관리는 외부 전문 툴에 맡기고, 도면은 맥락과 연결 고리만 제공한다"는 실무적 철학을 반영합니다. +- **BOM 및 인벤토리 자동 생성**: 인벤토리 내 '소속 그룹' 정보를 포함하여, 내보낸 즉시 자산 관리 대장(Excel)으로 활용 가능한 고순도 데이터를 제공합니다. + + + +--- + +## 8. Connectivity & Simulation Architecture (논리적 연결 계층화) +drawNET은 물리적 자산 배치와 논리적 연결 시뮬레이션을 분리하기 위해 **'레이어 타입 기반 제약(Layer-Type Constraints)'** 아키텍처를 채택합니다. +### 8.1 레이어 타입 정의 +- **Standard (Physical)**: 장비(Node)와 연결(Edge)이 공존하는 기본 레이어. +- **Logical (Simulation)**: 연결선(Edge)만 허용되는 특수 레이어. 신규 노드 생성이 차단되며, 복제 시 노드는 필터링되고 연결 관계만 전이됩니다. +### 8.2 데이터 일관성 및 시뮬레이션 원칙 +- **SSoT (Single Source of Truth)**: 장비의 마스터 정보는 물리 레이어에 위치하며, 논리 레이어의 선들은 서로 다른 레이어에 속한 노드들을 참조(UUID 기반)하여 가상의 망 구성을 형성합니다. +- **포맷 페인터(Style Propagation)**: 클립보드 데이터를 최우선으로 하는 `Default-Strict` 로직을 통해 개체의 스타일 정보가 유실 없이 전파되도록 보장합니다. +- **자기 치유형 상태 관리**: 브라우저 및 OS 레벨의 이벤트 유실에 대비하여, 인터랙션 발생 시마다 실제 모디파이어(Ctrl/Cmd) 상태를 재검증하는 안정성 프로토콜을 운영합니다. + + + + +## 9. AI Ready: 구조화된 그래프 데이터의 가치 (AI Ready: The Value of Structured Data) + +drawNET은 단순히 도면을 "그리는" 도구가 아니라, **AI가 즉시 이해하고 분석할 수 있는 고정밀 데이터셋**을 생성하는 플랫폼입니다. + +### 9.1 데이터 고정밀도 (Data High-Fidelity) +기존의 PDF나 이미지(OCR 기반) 도면 분석은 시각적 모호성으로 인해 연결 관계의 왜곡이나 오인식 확률이 높습니다. drawNET의 JSON-Native 구조는 모든 연결을 UUID와 참조 무결성(Referential Integrity)으로 정의하므로, AI에게 **"정답(Ground Truth)"**을 제공합니다. 이는 AI 모델의 학습 및 분석 정확도를 비약적으로 높여줍니다. + +### 9.2 지능형 설계 감사 및 예측 (Intelligent Auditing & Prediction) +구조화된 데이터 모델은 차세대 AI 엔진과 결합하여 다음과 같은 가치를 창출합니다: +- **자동 설계 검증 (Automated Auditing)**: 설계된 토폴로지가 기업의 보안 정책이나 표준망 구성 원칙을 준수하는지 AI가 실시간으로 감시하고 이상 징후를 탐지합니다. +- **장애 시뮬레이션 (Impact Analysis)**: 특정 노드 장애 시 전체 서비스에 미치는 영향도를 그래프 알고리즘으로 자동 계산하여 최적의 백업 경로를 제안합니다. +- **비용 최적화 (TCO Optimization)**: 입력된 단가와 장비 스펙 데이터를 AI가 분석하여, 운용 효율은 유지하면서도 구축 비용을 최소화할 수 있는 설계 최적화 모델을 제시합니다. + +### 9.3 그래프 알고리즘과의 완벽한 호환성 +본 프로젝트가 생성하는 데이터는 **그래프 이론(Graph Theory)**을 따르는 인접 리스트(Adjacency List) 구조로 즉시 변환 가능합니다. 이는 LLM(대형 언어 모델)뿐만 아니라 GNN(Graph Neural Networks)과의 결합을 통해 네트워크 인프라의 미래를 설계하는 데 가장 적합한 아키텍처임을 증명합니다. + +### 9.4 네트워크 가상 시뮬레이션 및 디지털 트윈 (Network Virtual Simulation & Digital Twin) +drawNET의 데이터는 단순한 시각화를 넘어, 가상 환경에서의 **패킷 흐름 시뮬레이션**을 가능케 하는 디지털 트윈의 기반이 됩니다. +- **라우팅 루프 및 블랙홀 탐지 (Loop & Blackhole Detection)**: 엔터프라이즈 네트워크의 고질적인 문제인 라우팅 루프를 설계 단계에서 사전에 차단합니다. 객체의 `tags`에 포함된 라우팅 정보와 `ip` 속성을 그래프 경로 탐색 알고리즘과 결합하여, 논리적 순환 경로(Loop)나 목적지 없이 사라지는 경로(Blackhole)를 AI가 0.1초 만에 전수 검사합니다. +- **물리-논리 정합성 검증**: 물리적 케이블 연결(Edge)과 논리적 라우팅 정책(Metadata) 사이의 불일치를 잡아내어, "그림과 실제 설정이 다른" 휴먼 에러를 원천적으로 방지합니다. + +### 9.5 AI 범용성 및 미래 지향성 (Universal AI-Agnostic Architecture) +drawNET이 생성하는 데이터 모델은 특정 AI 기술에 종속되지 않는 **"범용 AI 데이터 언어"**로서의 가치를 지닙니다. +- **Cross-AI Compatibility**: OpenAI(GPT), Anthropic(Claude), Meta(Llama) 등 모든 주요 AI 모델들은 시각적 이미지보다 정형화된 JSON 데이터에서 강력한 추론 능력을 발휘합니다. drawNET은 어떤 AI가 등장하더라도 즉시 협업할 수 있는 완벽한 인터페이스를 미리 갖추고 있습니다. +- **데이터 주권과 보안 (Data Sovereignty)**: 클라우드 기반 AI를 사용할 수 없는 고도의 보안 환경에서도, 표준 JSON 형식의 프로젝트 파일을 로컬 AI 엔진(On-premise LLM)이 직접 분석하게 함으로써 데이터 외부 유출 없이도 지능형 설계를 수행할 수 있습니다. +- **공공 및 국가 중요 시설 최적화**: 망 분리 환경이 필수적인 공공기관, 금융, 국방 분야에서 폐쇄형 LLM과의 결합을 통해 **보안 가이드라인 준수 여부(Compliance Audit)**를 자동 검증할 수 있습니다. 이는 인적 과실로 인한 국가적 보안 사고를 설계 단계에서 원천 차단하는 가장 강력한 보안 설계 아키텍처임을 보장합니다. +- **미래를 위한 확장팩**: 현재 입력된 `tags`, `ip`, `metadata` 등은 미래의 강력한 AI 에이전트가 네트워크 인프라를 자동으로 정밀하게 제어(Autonomous Networking)할 수 있게 만드는 핵심 데이터 전구체(Precursor) 역할을 수행합니다. + +--- + +## 10. 미래 전망 및 지향점 (Future Direction) + +1. **AI Topology Auditor**: 저장된 JSON 데이터를 분석하여 네트워크 설계상의 병목 구간이나 단일 장애점(SPOF)을 AI가 자동으로 식별하는 기능을 계획하고 있습니다. +2. **Visual Diff Engine (Next Gen)**: 두 개의 프로젝트 JSON 파일을 비교하여 노드 위치 변화, 속성 변화를 캔버스상에 시각적으로 강조(Highlight)하는 도구로 발전시킬 것입니다. +3. **Master Model Definition**: 하나의 마스터 모델에서 다양한 관점의 서브 그래프(View)를 동시에 생성하고 동기화하는 엔터프라이즈 협업 기능을 지향합니다. + +--- + +*최초 공식 릴리즈: 2026-03-20 (v1.0 Premium Edition - New Launch)* +*작성자: Antigravity AI Implementation Team (drawNET Core)* diff --git a/docs/bug_fix.md b/docs/bug_fix.md new file mode 100644 index 0000000..19bf023 --- /dev/null +++ b/docs/bug_fix.md @@ -0,0 +1,23 @@ +# drawNET Bug Fix Log 🐞 index + +이 문서는 drawNET 개발 과정에서 발생한 버그 수정 이력을 날짜별로 요약 및 아카이브합니다. + +--- + +## 📅 아카이브 목록 (By Date) + +- **[2026-03-21](./bug_reports/2026-03-21.md)**: 리치 카드 이슈, 데이터 정합성(Z-Index, 유실 복구), 사이드바 수동 저장 모델 도입 등 (총 19건) +- *추가 예정...* + +--- + +## 🔍 주요 카테고리별 요약 + +| 카테고리 | 주요 사례 | 누적 건수 | +| :--- | :--- | :--- | +| **UX/UI** | 사이드바 포커스 유지, Alt+Enter, 실시간 동기화 | 5건 | +| **Syntax/Load** | JSON 문법 오류, 중복 식별자, 구문 에러 | 4건 | +| **Stability/Data** | 데이터 복구(Pos/Label), Z-Index 계층, 엣지 보존 | 10건 | + +--- +마지막 업데이트: 2026-03-21 diff --git a/docs/bug_reports/2026-03-21.md b/docs/bug_reports/2026-03-21.md new file mode 100644 index 0000000..01d1d4e --- /dev/null +++ b/docs/bug_reports/2026-03-21.md @@ -0,0 +1,133 @@ +# drawNET Bug Report - 2026-03-21 🐞 + +이 문서는 2026년 3월 21일 발생한 버그 및 장애와 그에 따른 조치 사항을 기록합니다. + +--- + +### [Instance #2255] - Sidebar Focus Loss & Explicit Save Refactoring +- **현상**: 사이드바에서 라벨 수정 시 포커스 유실로 인한 타이핑 불가능 현상 및 자동 저장에 의한 의도치 않은 데이터 경합 가능성 제기. +- **원인**: 실시간 `input` 및 자동 `change`(blur) 이벤트가 시각 속성 변경 리스너와 충돌하여 DOM 리렌더링 발생. +- **조치**: + 1. **명시적 저장 모델(Explicit Apply)** 도입: 텍스트 관련 필드는 오직 **Enter** 또는 **[적용]** 버튼 클릭 시에만 저장되도록 변경하여 입력 중 데이터 무결성 보장. + 2. 사이드바 내부 요소에 포커스가 있을 경우 그래프 외부 변화에 의한 리렌더링을 차단하여 포커스 연속성 확보. +- **현상**: 라벨 위치를 "하(bottom)"로 설정해도 저장 후 불러오면 다시 "상(top)"으로 초기화됨. +- **원인**: `layers.js` 내부에 라벨 위치 기본값이 `bottom`으로 하드코딩되어 강제 적용되었으며, 일부 객체 생성 시 `label_pos` 데이터 주입 누락. +- **조치**: `layers.js` 하드코딩 제거, `system.js`에서 생성 시 기본값(장비-하, 그룹-상) 강제 주입, 유틸리티 함수 보강을 통한 정합성 확보. + +### [Instance #2245] - Sidebar Display Stale During Group Rename (Recursive & Logic Fix) +- **현상**: 그룹 이름을 변경해도 해당 그룹에 속한 하위 개체의 사이드바 내 [상위] 정보가 즉시 바뀌지 않음. +- **원인**: + 1. **저장 조건부 누락**: 부모 노드가 바뀌지 않은 단순 속성(이름 등) 변경 시 `saveUpdates` 호출이 누락되어 저장이 실행되지 않음. + 2. **포커스 가드 충돌**: 사이드바 내부에서 편집 중일 때 리렌더링을 차단하는 로직이 적용(Apply) 시점의 갱신마저 막아버림. + 3. **비동기 타이핑 불일치**: 엔진의 데이터 확정 전 UI 렌더링 시도로 인한 구형 데이터 출력. +- **조치**: + 1. `handleNodeUpdate` 내 저장 로직을 평탄화하여 **속성 변경 시 항상 저장**되도록 수정. + 2. **재귀적 전파(Recursive Propagation)** 도입: 그룹명 변경 시 하위 모든 개체(`getDescendants`)에 동기화 타임스탬프를 주입하여 하위 개체들의 변경 이벤트를 강제 트리거함. + 3. `safeRender` 포커스 가드 최적화: `INPUT/TEXTAREA`가 활성화된 경우만 스킵하도록 정규화하고 `setTimeout(0)`으로 렌더링 시기를 튜닝함. +- **현상**: 불러온 파일의 일부 그룹 라벨이 화면 출력값과 사이드바 표시값이 서로 다름 (예: Storage vs 그룹). +- **원인**: 과거 버전의 저장 로직 오류로 인해 `attrs`와 `data` 필드 간의 불일치가 파일 내에 고착화됨. +- **조치**: `json_handler.js` 마이그레이션 필터를 추가하여, 로드 시 `data.label`을 원본 소스로 삼아 시각적 라벨을 강제 동기화함. + +### [Instance #2235] - Destructive Object Disappearance (Style Corrupt) +- **현상**: 레이어 설정 변경 시 객체가 갑자기 투명해지거나 색상이 사라지는 현상. +- **원인**: `layers.js`에서 투명도 적용 시 `setAttrs`를 사용하여 기존의 모든 커스텀 스타일(fill, stroke 등)을 덮어써버림. +- **조치**: `attr()` 개별 호출 방식으로 변경하여 기존 스타일 유산을 완벽히 보존함. + +### [Instance #2230] - Missing Coordinates Recovery (Pos/Size) +- **현상**: 일부 객체가 좌표값 누락으로 인해 (0,0)에 배치되거나 아예 보이지 않음. +- **원인**: 복사/붙여넣기 및 엔진 전환 과정에서 X6 표준 좌표 필드가 유실된 데이터 잔재. +- **조치**: `json_handler.js`에 `data.pos` 기반 좌표 자동 복구 로직을 주입하여 유실된 개체들을 정상 위치로 소환함. + +### [Instance #2225] - Edge Clipping & Selection Difficulty (Z-Index) +- **현상**: 그룹 위에 선을 그으면 그룹 뒤로 숨어서 클릭이 안 됨. 단축키 연결 시에도 동일 현상 반복. +- **원인**: 엣지 기본 Z-Index가 5로 설정되어, 레이어 오프셋이 적용된 그룹보다 하단에 배치됨. +- **조치**: 전체 계층 구조 재설계 `Group(1~19) < Edge(30) < Node(50)` 및 마우스/단축키 생성 경로 동기화. + +### [Instance #2220] - Accidental Reset of Edge Vertices +- **현상**: 새로운 장비를 연결하면 기존에 예쁘게 꺾어 놓았던 선들이 모두 일직선으로 초기화됨. +- **원인**: `applyLayerFilters` 함수 내에 모든 엣지의 버텍스를 강제로 비우는 과도한 '자동 복구' 로직이 포함되어 있었음. +- **조치**: 해당 파괴적인 초기화 로직(`setVertices([])`)을 삭제하여 사용자 커스텀 경로 보존. (Instance #1480 정정 사항) + +--- + +### [Instance #2202] - Label Reverts when Changing Label Position (Select Sync) +- **현상**: 라벨 이름을 수정한 직후(아직 저장되기 전) 라벨 위치(`select`)를 변경하면 이름이 이전 상태로 되돌아감. +- **원인**: 모든 입력 요소에 동일한 `debounce`(300ms)가 적용되어 있어, 상호작용 간 데이터 경합 발생 및 `renderProperties`에 의한 DOM 덮어쓰기 현상. +- **조치**: `select`, `checkbox`, `color` 등 상태 선택형 요소는 `change` 이벤트 발생 시 즉시 저장(`applyChanges`)되도록 변경하여 데이터 동기화 보장. + +### [Instance #2108] - Inconsistent Line Thickness (Style vs Selection) +- **현상**: 구성도 작성 시 선 두께가 일정하지 않게 보임. +- **원인**: + 1. 선택 시 강조 효과(3px)와 일반 상태(2px)의 차이. + 2. '굵은 선' 스타일이 UI에는 있으나 실제 두께(4px) 반영 로직이 누락됨. +- **조치**: + 1. '굵은 선(double)' 선택 시 실제 4px가 적용되도록 매핑 로직 업데이트. + 2. 속성창에 '선 두께(Width)' 수치 입력 필드를 추가하여 개별 커스터마이징 지원. + +### [Instance #2010] - ID & Label Confusion (Initial Data Setup) +- **현상**: 그룹이나 노드 생성 시 이름이 `group_xxxx`와 같은 ID 형식으로 표시되며, 수정 후 특정 상황에서 다시 ID 값으로 되돌아가는 것처럼 보임. +- **원인**: `drop.js`에서 노드 생성 시 ID와 Label을 동일한 랜덤 문자열로 초기화했기 때문에 발생한 혼동. +- **조치**: 초기 라벨을 '그룹', '사각형' 등 친숙한 한글 명칭(다국어 대응)으로 설정하도록 변경하고, 사이드바에서 ID를 읽기 전용 필드로 명시적으로 분리 노출함. + +### [Instance #1968] - Data Reverted During Move after Rename (Blur vs Drag) +- **현상**: 그룹 이름을 수정한 직후 다른 곳을 클릭하지 않고 바로 드래그하여 이동하면 이름이 이전 값으로 되돌아감. +- **원인**: 사이드바가 `change`(포커스 해제) 시점에 저장하는데, 드래그 시 발생하는 리렌더링 이벤트가 `change`보다 먼저 발생하여 이전 데이터를 불러옴. +- **조치**: 사이드바 텍스트 입력 이벤트를 `input`으로 변경하고 300ms 디바운싱을 적용하여 실시간 동기화 구현. + +### [Instance #1940] - JSON Syntax Error in Locale File (Stray Backticks) +- **현상**: 앱 구동 시 `[drawNET:CRITICAL] Failed to load locales` 에러 발생하며 모든 텍스트가 키값으로 표시됨. +- **원인**: `ko.json` 수정 과정에서 AI 도구가 파일 끝에 마크다운 기호(```)를 잘못 삽입하여 유효하지 않은 JSON 형식이 됨. +- **조치**: `ko.json` 파일 끝의 불필요한 문자를 제거하고 구조 정상화. + +### [Instance #1931] - Property Handler Syntax Error (Accidental Deletion) +- **현상**: 노드 속성 수정 시 변경사항이 반영되지 않거나 콘솔에 `SyntaxError` 발생. +- **원인**: '에셋 경로' 필드를 제거하는 과정에서 `handlers/node.js` 속성 추출 객체의 괄호 및 인접 필드(color, fill 등)를 실수로 대량 삭제함. +- **조치**: 삭제된 모든 필드 로직을 원래대로 복구하고 의도했던 `assetPath` 추출부만 정교하게 제거. + +### [Instance #1860] - Rich Card Sidebar UI Inconsistency +- **현상**: 리치 텍스트 카드의 속성창 디자인이 기존 '컴팩트 UI' 표준(토글 스위치, 정렬된 입력창 등)과 다르게 투박하게 표시되고 정보 밀도가 낮음. +- **원인**: 신규 객체 전용 템플릿 작성 시 표준 CSS 클래스(`prop-input`, `toggle-switch`) 적용 누락 및 일부 스타일(`input-with-color`) 미정의. +- **조치**: `rich_card.js` 템플릿을 표준 컴포넌트 구조로 전면 재작성하고, `properties_sidebar.css`에 부족한 레이아웃 스타일 보강. + +### [Instance #1840] - Rich Card Syntax Error (Duplicate Identifier) +- **현상**: 리치 카드 선택 시 콘솔에 `Uncaught SyntaxError: Identifier 'renderRichContent' has already been declared` 발생 및 사이드바 작동 중단. +- **원인**: `styles/utils.js`에서 함수를 임포트했음에도 불구하고, 로컬 핸들러 파일에도 동일한 가명 함수가 남아있어 충돌 발생. +- **조치**: `handlers/rich_card.js` 하단의 중복된 `renderRichContent` 함수를 제거하고 공용 유틸리티 함수만 사용하도록 수정. + +### [Instance #1692] - 다중 선택 해제 시 시각적 잔상(Focus) 유지 +- **현상**: `Ctrl+Click`으로 다중 선택 객체 중 일부를 해제해도 캔버스상에 점선 테두리(Focus)가 남아 있음. +- **원인**: X6의 `Selection` 또는 `Transform` 플러그인이 추가한 `boundary` 도구가 `unselected` 이벤트 시 자동으로 제거되지 않거나 커스텀 도구 관리에 밀려 잔류함. +- **조치**: `selection.js`의 `unselected` 이벤트 핸들러에서 노드/엣지 해제 시 `removeTools()`를 명시적으로 호출하도록 강화. + +### [Instance #1684] - `removeLabel` 런타임 에러 +- **현상**: 엣지 선택 해제 시 `cell.removeLabel is not a function` 에러 발생. +- **원인**: 일부 X6 환경에서 엣지 객체의 단축 함수가 유실되거나 차단되는 문제. +- **조치**: `setLabels`와 `filter`를 사용하여 명시적으로 해당 ID의 라벨을 제외한 리스트를 재설정함. + +### [Instance #1640] - 하이라이트 플러그인 의존성 에러 +- **현상**: 시작/대상 앵커 호버 시 `createExecutionContext` 및 `unhighlight` 함수를 찾을 수 없다는 TypeError 발생. +- **원인**: AntV X6의 Highlight 플러그인 의존성 문제. +- **조치**: 외부 플러그인 의존성을 제거하고, 노드의 본체(`body`) 속성(`attr`)을 직접 제어하여 강조 효과를 주는 방식으로 로직 선회. + +### [Instance #1628] - `addLabel` 런타임 에러 +- **현상**: 엣지에 라벨 추가 시 `cell.addLabel is not a function` 에러 발생. +- **원인**: X6 특정 버전에서 엣지 객체의 믹스인(Mixin) 상태에 따라 단축 함수가 인식되지 않는 문제. +- **조치**: `getLabels()` / `setLabels()` 패턴으로 변경하여 호환성 확보. + +### [Instance #1505] - 직선 라우팅 강제 꺾임 현상 +- **현상**: 라우터를 제거했음에도 선이 90도로 꺾여 연결됨. +- **원인**: X6의 방향성 앵커(`top`, `left` 등)가 경로에 영향을 미침. +- **조치**: '직선' 모드일 경우 앵커를 방향성이 없는 `center`로 강제 전환. + +### [Instance #1480] - 레이어 필터링 시 라우팅 설정 유실 (정정됨) +- **현상**: 레이어나 줌 변경 시 다시 꺾인 상태로 회귀함. +- **원인**: 레이어 'Auto-Repair' 로직이 Vertices를 초기화하지 않음. +- **조치**: (구) `setVertices([])` 추가 -> (현) 해당 로직이 사용자 데이터 파괴를 유발하여 최종 삭제 완료 (Instance #2220 참조). + +### [Instance #1466] - Logger 참조 에러 +- **현상**: `logger is not defined` 발생. +- **원인**: `edge.js` 내 모듈 임포트 누락. +- **조치**: `logger` 모듈 임포트 추가. + +--- +*아카이브 관리자: drawNET AI Assistant* diff --git a/docs/bug_reports/2026-03-22-explicit-metadata-fix.md b/docs/bug_reports/2026-03-22-explicit-metadata-fix.md new file mode 100644 index 0000000..6f42277 --- /dev/null +++ b/docs/bug_reports/2026-03-22-explicit-metadata-fix.md @@ -0,0 +1,17 @@ +# drawNET Bug Report - 2026-03-22 🐞 + +이 문서는 2026년 03월 22일 발생한 설계 취약점 보완 및 그에 따른 조치 사항을 기록합니다. + +--- + +### [Instance #0001] - 연결선(Edge)의 레이어 정보 유추 의존성 해결 +- **현상**: 연결선 데이터 자체에 레이어 정보가 없어, 특정 연결선이 크로스 레이어인지 판단하려면 반드시 소스/타겟 노드를 그래프에서 검색해야 함. 이는 외부 도구(LLM 등) 연동 시 데이터 독립성을 저하시키고, 대규모 도면에서 필터링 성능 저하를 유발함. +- **원인**: 초기 설계 시 "노드 ID가 있으니 나중에 조회하면 된다"는 유추 방식에 의존함. 데이터 아키텍처 관점에서 객체 단독으로는 자신의 상태(Cross-layer 여부 등)를 완벽히 설명하지 못하는 불완전한 상태였음. +- **조치**: + 1. `static/js/modules/graph/interactions/edges.js`: `edge:connected` 이벤트 발생 시 소스/타겟 노드의 `layerId`를 직접 조회하여 연결선 데이터(`source_layer`, `target_layer`, `is_cross_layer`)에 명시적으로 기록하도록 수정. + 2. `static/js/modules/graph/io/json_handler.js`: 기존 도면(Legacy data) 로드 시 누락된 레이어 메타데이터를 자동으로 계산하여 보정하는 자가 치유(Self-healing) 로직 추가. + 3. `6개월 뒤의 나`를 위해 각 관련 파일에 작업 배경 및 이유를 주석으로 명시. +- **관련 이전 이슈**: 없음. + +모든 항목은 압축하지 말고, 이전 리포트들보다 더 자세하거나 최소한 동일한 상세도로 작성할 것. +절대 요약·생략·간략화하지 마. 각 항목에 구체적인 코드 조각, 이벤트 이름, 함수명, 속성명 등을 최대한 포함. diff --git a/docs/bug_reports/2026-03-22-favicon-unification.md b/docs/bug_reports/2026-03-22-favicon-unification.md new file mode 100644 index 0000000..ed768e5 --- /dev/null +++ b/docs/bug_reports/2026-03-22-favicon-unification.md @@ -0,0 +1,17 @@ +# drawNET Bug Report - 2026-03-22 🐞 + +이 문서는 2026년 03월 22일 발생한 UI 불일치 문제 해결 및 그에 따른 조치 사항을 기록합니다. + +--- + +### [Instance #0002] - 파비콘(Favicon)과 서비스 로고 아이콘 불일치 해결 +- **현상**: 브라우저 탭에 표시되는 파비콘과 서비스 내부 사이드바 상단의 "dN" 로고 아이콘이 서로 달라 사용자 경험(UX)에 일관성이 없으며, 기존 파비콘의 심미성이 떨어짐. +- **원인**: 초기 개발 시 기본 제공되는 `favicon.ico`를 그대로 사용하였으나, 서비스 브랜드 아이덴티티가 "dN" 로고(Blue/Indigo Gradient)로 확립된 이후에도 파비콘이 갱신되지 않음. +- **조치**: + 1. **아이콘 생성**: 사이드바 `.logo-icon`의 CSS 스타일(135도 그라데이션, #3b82f6 ~ #6366f1, 흰색 "dN" 텍스트)을 그대로 반영한 고해상도 PNG 이미지를 생성. + 2. **파일 교체**: `static/favicon.png` 경로에 새로운 파비콘 이미지 저장. + 3. **코드 반영**: `templates/index.html`의 `` 태그를 새로운 PNG 파비콘으로 교체하여 즉시 반영. +- **관련 이전 이슈**: 없음. + +모든 항목은 압축하지 말고, 이전 리포트들보다 더 자세하거나 최소한 동일한 상세도로 작성할 것. +절대 요약·생략·간략화하지 마. 각 항목에 구체적인 코드 조각, 이벤트 이름, 함수명, 속성명 등을 최대한 포함. diff --git a/docs/bug_reports/2026-03-22-help-modal-dark-mode-fix.md b/docs/bug_reports/2026-03-22-help-modal-dark-mode-fix.md new file mode 100644 index 0000000..ca143d6 --- /dev/null +++ b/docs/bug_reports/2026-03-22-help-modal-dark-mode-fix.md @@ -0,0 +1,16 @@ +# drawNET Bug Report - 2026-03-22 🐞 + +이 문서는 2026년 03월 22일 발생한 다크모드 가시성 문제 해결 및 그에 따른 조치 사항을 기록합니다. + +--- + +### [Instance #0003] - 다크모드에서 도움말(온보딩 가이드) 가시성 불량 해결 +- **현상**: 다크모드 활성화 시, 도움말 모달 내의 텍스트가 배경색과 비슷한 어두운 색으로 표시되어 읽기가 매우 힘듦. (사용자 제보 이미지 확인됨) +- **원인**: `static/js/modules/ui/help_modal.js` 내부의 HTML 템플릿에서 텍스트 색상(`#1e293b`, `#334155` 등)과 배경색을 하드코딩된 인라인 스타일로 정의함. 이로 인해 테마가 바뀌어도 색상이 고정되어 대비(Contrast)가 확보되지 않음. +- **조치**: + 1. **테마 변수 적용**: 하드코딩된 색상을 `base.css`에 정의된 CSS 변수(`var(--text-color)`, `var(--sub-text)`, `var(--panel-border)`, `var(--item-bg)`, `var(--accent-color)`)로 전면 교체. + 2. **가독성 보정**: 정보 박스(`manual/guide.md` 안내)의 배경을 `var(--item-bg)`로 변경하여 다크모드에서도 자연스럽고 선명하게 보이도록 수정. +- **관련 이전 이슈**: 없음. + +모든 항목은 압축하지 말고, 이전 리포트들보다 더 자세하거나 최소한 동일한 상세도로 작성할 것. +절대 요약·생략·간략화하지 마. 각 항목에 구체적인 코드 조각, 이벤트 이름, 함수명, 속성명 등을 최대한 포함. diff --git a/docs/bug_reports/2026-03-22-help-modal-reference-error.md b/docs/bug_reports/2026-03-22-help-modal-reference-error.md new file mode 100644 index 0000000..3381ccb --- /dev/null +++ b/docs/bug_reports/2026-03-22-help-modal-reference-error.md @@ -0,0 +1,19 @@ +# drawNET Bug Report - 2026-03-22 🐞 + +이 문서는 2026년 3월 22일 발생한 `help_modal.js` 내의 ReferenceError 해결 및 그에 따른 조치 사항을 기록합니다. + +--- + +### [Instance #2300] - ReferenceError: t is not defined in help_modal.js +- **현상**: 도움말 버튼(`help-btn`) 클릭 시 도움말 모달(Help Modal)이 열리지 않고, 브라우저 콘솔에 `Uncaught (in promise) ReferenceError: t is not defined` 에러가 발생하며 인터페이스가 멈추는 현상. +- **원인**: + 1. 마크다운 렌더러 라이브러리(`marked.js`) 통합을 위한 `help_modal.js` 리팩토링 과정에서 실수로 상단의 `import { t } from '../i18n.js';` 구문을 삭제함. + 2. 모달 템플릿 코드 내에서 다국어 번역 함수인 `${t('help_center')}` 등을 호출할 때 해당 함수가 정의되지 않아 런타임 에러가 발생함. +- **조치**: + 1. `static/js/modules/ui/help_modal.js` 파일 상단에 누락된 `t` 함수 임포트 구문을 즉시 복구함. + 2. 모달 내의 모든 `t()` 호출부가 정상적으로 바인딩되었는지 검증하고, 모달이 정상적으로 팝업되는 것을 확인함. + 3. 향후 리팩토링 시 필수 의존성(Dependency) 누락 여부를 체크하도록 코드 리뷰 프로세스 보강. +- **관련 이전 이슈**: 없음. + +--- +*아카이브 관리자: drawNET AI Assistant* diff --git a/docs/bug_reports/2026-03-22-studio-resource-404.md b/docs/bug_reports/2026-03-22-studio-resource-404.md new file mode 100644 index 0000000..c2ec239 --- /dev/null +++ b/docs/bug_reports/2026-03-22-studio-resource-404.md @@ -0,0 +1,19 @@ +# drawNET Bug Report - 2026-03-22 🐞 + +이 문서는 2026년 3월 22일 발생한 오브젝트 스튜디오 404 에러 해결 및 그에 따른 조치 사항을 기록합니다. + +--- + +### [Instance #2310] - 404 Resource Not Found in Object Studio +- **현상**: 오브젝트 스튜디오(Object Studio) 접속 시 다국어 파일(`i18n.js`)과 파비콘(`favicon.ico`)을 찾을 수 없다는 404 에러와 함께 UI의 버튼 글자가 번역되지 않은 상태(Raw Key)로 노출됨. +- **원인**: + 1. **경로 오표기**: `static/js/modules/studio/` 디렉토리 내의 `renderer.js`와 `actions.js`에서 `../../i18n.js` 경로를 사용함. 실제 파일은 `../i18n.js`(`static/js/modules/i18n.js`)에 위치해 있어 상대 경로 계산 오류 발생. + 2. **파비콘 링크 누락**: `studio.html` 파일에 명시적인 파비콘 링크가 없어 브라우저가 기본값인 `/favicon.ico`를 호출함. +- **조치**: + 1. `renderer.js` 및 `actions.js`의 임포트 경로를 `../i18n.js`로 일괄 수정하여 다국어 모듈 로딩 정상화. + 2. `studio.html` 상단에 통합 로고(`logo.svg`)를 파비콘으로 사용하는 링크 태그 추가. + 3. 스튜디오 전체 리소스 로딩 상태를 재점검하여 누락된 정적 파일이 없음을 확인. +- **관련 이전 이슈**: Instance #2300 (유사한 Import 문제) + +--- +*아카이브 관리자: drawNET AI Assistant* diff --git a/docs/bug_reports/2026-03-22.md b/docs/bug_reports/2026-03-22.md new file mode 100644 index 0000000..839e0be --- /dev/null +++ b/docs/bug_reports/2026-03-22.md @@ -0,0 +1,80 @@ +# drawNET Bug Report - 2026-03-22 🐞 + +이 문서는 2026년 3월 22일 발생한 버그 및 장애와 그에 따른 조치 사항을 기록합니다. + +--- + +### [Instance #2310] - 404 Resource Not Found in Object Studio +- **현상**: 오브젝트 스튜디오(Object Studio) 접속 시 다국어 파일(`i18n.js`)과 파비콘(`favicon.ico`)을 찾을 수 없다는 404 에러와 함께 UI의 버튼 글자가 번역되지 않은 상태(Raw Key)로 노출됨. +- **원인**: + 1. **경로 오표기**: `static/js/modules/studio/` 디렉토리 내의 `renderer.js`와 `actions.js`에서 `../../i18n.js` 경로를 사용함. 실제 파일은 `../i18n.js`(`static/js/modules/i18n.js`)에 위치해 있어 상대 경로 계산 오류 발생. + 2. **파비콘 링크 누락**: `studio.html` 파일에 명시적인 파비콘 링크가 없어 브라우저가 기본값인 `/favicon.ico`를 호출함. +- **조치**: + 1. `renderer.js` 및 `actions.js`의 임포트 경로를 `../i18n.js`로 일괄 수정하여 다국어 모듈 로딩 정상화. + 2. `studio.html` 상단에 통합 로고(`logo.svg`)를 파비콘으로 사용하는 링크 태그 추가. + 3. 스튜디오 전체 리소스 로딩 상태를 재점검하여 누락된 정적 파일이 없음을 확인. + +### [Instance #2300] - ReferenceError: t is not defined in help_modal.js +- **현상**: 도움말 버튼(`help-btn`) 클릭 시 도움말 모달(Help Modal)이 열리지 않고, 브라우저 콘솔에 `Uncaught (in promise) ReferenceError: t is not defined` 에러가 발생하며 인터페이스가 멈추는 현상. +- **원인**: + 1. 마크다운 렌더러 라이브러리(`marked.js`) 통합을 위한 `help_modal.js` 리팩토링 과정에서 실수로 상단의 `import { t } from '../i18n.js';` 구문을 삭제함. + 2. 모달 템플릿 코드 내에서 다국어 번역 함수인 `${t('help_center')}` 등을 호출할 때 해당 함수가 정의되지 않아 런타임 에러가 발생함. +- **조치**: + 1. `static/js/modules/ui/help_modal.js` 파일 상단에 누락된 `t` 함수 임포트 구문을 즉시 복구함. + 2. 모달 내의 모든 `t()` 호출부가 정상적으로 바인딩되었는지 검증하고, 모달이 정상적으로 팝업되는 것을 확인함. + 3. 향후 리팩토링 시 필수 의존성(Dependency) 누락 여부를 체크하도록 코드 리뷰 프로세스 보강. + +### [Instance #2290] - Incorrect Filtering in PPTX Details Slide +- **현상**: PPTX 내보내기 시 "객체별 상세 내용 및 주석 목록" 슬라이드에서 실제 노드(오브젝트)는 보이지 않고, UUID 형태의 이름을 가진 선(edge)들만 대거 나열되는 현상. +- **원인**: + 1. 상세 목록 필터가 `description` 속성이 있는 객체만 찾도록 되어 있어, 설명이 없는 일반 노드들은 모두 제외됨. + 2. 수동 경로 오프셋(`routing_offset`)이 있는 엣지들이 필터에 포함되면서, 라벨이 없는 일반 엣지들이 UUID와 함께 노출됨. +- **조치**: + 1. 상세 목록 필터를 개선하여 **모든 일반 노드**를 포함하도록 수정 (단, 그룹은 설명이 있을 때만 포함). + 2. 엣지는 **사용자 정의 라벨이나 설명이 있을 때만** 포함하도록 변경하여 무의미한 항목 제거. + 3. 라벨이 없는 엣지의 경우 UUID 대신 `[시작노드] -> [대상노드]` 형태의 읽기 쉬운 이름을 자동 생성하도록 보완. + +### [Instance #2280] - Asset Filter Modal Invisibility +- **현상**: 왼쪽 에셋 라이브러리 상단의 필터(패키지 관리) 아이콘을 클릭해도 아무런 반응이 없는 것처럼 보이는 현상. +- **원인**: + 1. `selector.js`에서 모달 팝업 생성 시 `modal.style.display = 'flex'`만 사용함. + 2. 공통 CSS(`modal.css`)에서 `.modal-overlay`는 기본적으로 `opacity: 0`이며 `.active` 클래스가 있어야만 화면에 표시되도록 정의되어 있어 시각적으로 숨겨진 상태였음. + 3. 구형 코드인 `static/js/modules/assets.js` 파일이 잔류하여 디버깅 및 유지보수에 혼선을 줌. +- **조치**: + 1. `selector.js`의 모달 제어 로직을 `classList.add('active')` 및 `remove('active')` 방식으로 변경하여 CSS 애니메이션 및 가시성 확보. + 2. 사용되지 않는 구형 `assets.js` 파일을 삭제하여 모듈 구조 단순화. + +### [Instance #2275] - Selection Highlight Disappears during Edit +- **현상**: 선(edge) 속성창에서 시작/대상 호버 하이라이트가 표시된 상태에서 색상이나 스타일을 변경하면 하이라이트가 즉시 사라짐. +- **원인**: `renderProperties()` 시작 부분에 `unhighlight()`가 포함되어 있어, 속성 변경에 따른 리렌더링 발생 시마다 하이라이트가 강제로 초기화됨. +- **조치**: + 1. `renderProperties()` 내부의 상시 `unhighlight()` 호출 제거. + 2. 선택된 객체가 변경될 때 발생하는 `selection:changed` 이벤트 핸들러에서만 `unhighlight()`를 호출하도록 로직 위치 변경. + 3. 이를 통해 동일 객체의 속성을 수정하는 동안에는 시각적 하이라이트가 유지되도록 정합성 확보. + +### [Instance #2270] - Infinite Loop in Sidebar Rendering (Selection Loop) +- **현상**: 선(edge) 선택 시 브라우저 콘솔에 `renderProperties start` 로그가 무한히 출력되며 성능이 저하되는 현상. +- **원인**: + 1. 선 선택 시 호출되는 `unhighlight()`가 노드의 `attr`을 수정함. + 2. `attr` 수정이 `cell:change:attrs` 이벤트를 발생시킴. + 3. 해당 이벤트 리스너가 다시 `renderProperties()`를 호출하여 무한 루프가 발생함. +- **조치**: + 1. `unhighlight` 및 `highlight` 호출 시 모든 속성 변경에 `{ silent: true }` 옵션을 부여하여 불필요한 이벤트 전파 차단. + 2. `cell:change` 이벤트 리스너에서 `options.silent` 플래그를 확인하여 내부적인 시각 효과 변경 시에는 리렌더링을 건너뛰도록 개선. + +### [Instance #2265] - Sticky Source/Target Highlights in Sidebar +- **현상**: 엣지 속성창에서 시작/대상 선택 상자에 마우스를 올렸을 때 나타나는 노드 강조(테두리)가 사이드바를 닫거나 선택을 바꿔도 사라지지 않고 유지됨. +- **원인**: 하이라이트 제거 로직(`unhighlight`)이 오직 `mouseleave` 이벤트에만 바인딩되어 있어, 사이드바를 닫거나 다른 객체로 전환 시 이벤트가 트리거되지 않음. +- **조치**: + 1. `unhighlight` 로직을 모듈 레벨 함수로 분리. + 2. 사이드바 닫기 버튼, 적용 버튼 클릭 시 및 속성창 리렌더링(`renderProperties`) 시작 시점에 항상 `unhighlight`를 호출하도록 보강하여 잔상 방지. + +### [Instance #2260] - Edge Rendered Underneath Groups (Z-Index Hierarchy) +- **현상**: 새로 생성된 선(edge)이 기존 그룹의 배경 뒤로 숨어서 보이지 않거나 선택이 어려운 현상. +- **원인**: 선 생성 시 레이어 오프셋이 적용되지 않은 기본 z-index(30)가 부여되어, 이미 레이어 가중치(101, 201 등)를 받은 그룹보다 낮게 배치됨. +- **조치**: + 1. `layers.js`에 중앙 집중형 z-index 계산 함수(`calculateCellZIndex`)를 도입하여 레이어 오프셋과 객체 타입별 우선순위(노드>선>그룹)를 통합 관리. + 2. 선 및 노드 생성 시(`config.js`, 스타일 매핑 모듈) 즉시 해당 함수를 호출하여 초기 z-index를 올바르게 할당하도록 구조 개선. + +--- +*아카이브 관리자: drawNET AI Assistant* diff --git a/docs/changelog.md b/docs/changelog.md new file mode 100644 index 0000000..7916274 --- /dev/null +++ b/docs/changelog.md @@ -0,0 +1,155 @@ +# drawNET 업데이트 로그 (Changelog) + +## [v1.0 Alpha-1] - 2026-03-21 +### 🎉 Project Milestone: Release Alpha Version +오늘로써 drawNET의 모든 핵심 엔진 기능이 구현되어 공식 **v1.0 Alpha-1** 버전으로 명명합니다. + +## [2026-03-21] - High-Fidelity 하이브리드 내보내기 슈트 및 안정성 고도화 + +### 🚀 신규 기능 (Added) +- **엣지 라우팅 및 앵커 가시성 제어 거버넌스 수립**: + - **시작/대상(S/T) 가이드 라벨**: 엣지 선택 시 양 끝에 초록/빨강 라벨을 표시하여 망 구성 식별력 강화. + - **인터랙티브 앵커 하이라이트**: 사이드바 앵커 설정 시 캔버스 내 노드 실시간 점멸 피드백 제공. + - **직선 라우팅 최우선 순위화**: 앵커 방향 제약 및 전역 기본 설정을 극복한 '완벽한 직선' 모드 구현. +- **Format Painter (Style Copy/Paste) 엣지 확장**: + - `Ctrl+Shift+C/V`를 통해 선의 색상, 스타일, 라우팅, 화살표 정보를 다른 선으로 즉시 복제. +- **UX 편의 기능**: + - **ESC 전역 캔슬**: 원터치로 모든 선택 해제 및 사이드바 닫기. + - **단축키 도움말(?) 애니메이션 복구**: 누락된 리소스를 보강하여 도움말 모달 가독성 개선. +- **객체 메타데이터 및 인벤토리 거버넌스**: + - **상세 설명(Description) 및 태그(Tags) 도입**: 모든 노드와 엣지에 설계 의도 및 기술 사양을 기록할 수 있는 전용 필드 추가. + - **3중 데이터 무결성 보장 로직**: 구버전 파일 자동 마이그레이션, 복사/붙여넣기(`Ctrl+C/V`) 시 전역 데이터 새니타이저(Sanitizer)를 통한 필수 필드 누락 원천 봉쇄. +- **엔터프라이즈급 PPTX 리포팅 고도화**: + - **상세 설명 전용 슬라이드**: `autoPage` 기능을 활용하여 대규모 프로젝트의 모든 객체 상세 주석을 표 형태로 자동 생성. + - **인벤토리 매핑 강화**: 상세 목록에 '소속 그룹(Parent Group)' 및 '태그' 컬럼을 추가하여 외부 자산 데이터와의 매칭 편의성 제고. +- **High-Fidelity 하이브리드 내보내기 슈트 (v2.0)**: + - **SVG 내보내기 엔진 완전 재설계**: 전수 이미지 스캔 로직을 통해 상속된 아이콘까지 100% Base64로 임베딩하여 '아이콘 깨짐' 현상 종결. + - **절대 좌표 기반 짤림 방지 (Zero-Clip)**: `getCellsBBox`와 명시적 `viewBox` 주입을 통해 화면 줌/위치와 무관하게 120px 안전 여백이 포함된 완벽한 도면 출력. + - **전문가용 내보내기 UI**: 내보내기 프로세스 시작 시 "파일 준비 중" 안내 오버레이와 블러 효과를 적용하여 사용자 피드백 및 경험(UX) 고도화. + - **적응형 안정화 지연 (1000ms)**: 모델 업데이트 후 DOM 동기화를 위해 1초의 대기 시간을 부여하여 저사양 PC에서도 무결한 캡처 보장. + - **전문가용 PPTX 리포트**: 도면은 고해상도 PNG 스냅샷으로, 데이터는 편집 가능한 네이티브 표(Table)로 구성하는 하이브리드 모델 도입. + - **레이어별 자동 슬라이드 생성**: 멀티 레이어 프로젝트를 분석하여 레이어별 상세 도면 슬라이드를 자동으로 생성하는 엔진 구축. +- **초정밀 클린 캡처 (Clean Capture)**: + - 내보내기 시 앵커(포트), 선택 박스, UI 가이드를 자동으로 숨겨 시각적 노이즈를 제거하는 로직 반영. + - **2x 해상도 렌더링**: 모든 이미지 기반 내보내기 시 200% 스케일업을 통해 레티나 디스플레이 및 대형 인쇄 대응 수준의 화질 확보. +- **사이드바 데이터 정합성 및 실시간 동기화 슈트**: + - **재귀적 데이터 전파(Recursive Poke)**: 그룹 이름 변경 시 하위 모든 객체들을 대상으로 동기화 이벤트를 강제 트리거하여 사이드바의 상위 그룹 정보가 실시간으로 갱신되도록 개선 (#2245). + - **세이프 렌더(Safe Render) 및 포커스 유실 방지**: 사이드바 입력 중 그래프 변화에 의한 리렌더링을 지능적으로 차단하여 타이핑 연속성 확보 (#2255). + - **비동기 데이터 렌더링 타이즈**: `setTimeout(0)`을 적용하여 X6 엔진 데이터와 UI 간의 미세한 타이밍 불일치 완전 소거. +- **레이어 격리 및 상호작용 보안 거버넌스**: + - **선택 필터링(Selection Filter)**: 활성 레이어가 아닌 객체는 마우스로 선택할 수 없도록 플러그인 레벨에서 격리 구현. + - **상호작용 가드**: 비활성 레이어 객체에 대한 더블 클릭 등 파괴적 액션을 원천 차단하여 레이어 간 데이터 오염 방지. +- **개발 생산성 도구**: + - **`logger.debug` 정식 지원**: 개발 중 임시 로그를 위한 별도의 디버그 레벨과 서식 도입. +- **하이엔드 레이어 안정성 및 데이터 거버넌스 수립**: + - **논리 전용 레이어(Logical-Only Layer)**: 물리 배치와 논리 연결의 명확한 분리를 위한 레이어 타입 규격 도입 및 지능형 드롭/복제 필터링 엔진 구축. + - **레이어 하드-락(Hard-Lock) 시스템**: 중요 레이어의 실수에 의한 삭제나 이름 변경을 원천 차단하는 자물쇠 기능 도입. + - **데이터 보호 이중 확인(Double Confirmation)**: 오브젝트가 포함된 레이어 삭제 시 '항목 수 안내'와 '최종 파기 확인'의 2단계 절차를 거치는 안전 로직 적용. + - **레이어 전용 휴지통(Trash Bin)**: 드래그 앤 드롭으로 레이어를 명시적으로 버릴 수 있는 직관적인 폐기 워크플로우 구현. + - **레이어 패널 UI 최적화**: 가시성과 조작 편의성 개선을 위해 레이어 관리창 전체 크기를 약 25% 확대 (250px x 400px). +- **멀티 플랫폼 및 브라우저 호환성 하모니**: + - **Mac Command(⌘) 키 완벽 지원**: Mac 환경에서도 Cmd 키를 사용해 복제 및 단축키 기능을 동일하게 사용 가능. + - **자기 치유형 키 상태 관리(Self-healing)**: 탭 전환 등으로 인한 키 업/다운 이벤트 유실 시에도 마우스 활동 감지를 통해 시스템 키 상태를 자동 보정. + - **ESC 전역 캔슬 확장**: 드래그/복제 도중 `Escape` 키로 즉시 취소 및 고스트 박스 자동 소거 로직 고도화. +- **포맷 페인터(Format Painter) 데이터 무결성 수정**: + - 선(Edge)의 색상 및 두께 복사 시 UI 기본값보다 클립보드 데이터를 최우선(Strict Prioritization)으로 하여 속성이 누락되던 현상 해결. +- **하이엔드 안정성 및 논리 레이어 정책 거버넌스 수립**: + - **논리 전용 레이어(Logical-Only Layer)**: 물리 배치와 논리 연결의 명확한 분리를 위한 레이어 타입 규격 도입 및 지능형 드롭/복제 필터링 엔진 구축. + - **멀티 플랫폼(Windows/Mac) 하모니**: Cmd/Ctrl 키 통합 지원 및 자기 치유형(Self-healing) 키 상태 관리 로직 적용. + - **ESC 드래그 캔슬**: 복제 드래그 중 Escape 키로 즉석 취소 및 고스트 박스 자동 소거 로직 반영. + +### 🛠️ 구조 개선 (Refactored) +- **내보내기 서브시스템(Export Subsystem) 모듈화**: `image_exporter.js`, `pptx_exporter.js` 등으로 로직을 분리하여 확장성 강화. +- **UI 시각적 가시성 개선**: 라이트 모드(White Mode)에서 플라이아웃 메뉴의 호버 대비(Contrast)를 액센트 컬러로 교체하여 접근성 및 전문성 강화. +- **중복 초기화 제거 (Zero Duplication)**: `app.js` 내로 핵심 모듈 초기화 로직을 일원화하여 중복 팝업 및 이벤트 리스너 누수 문제 원천 해결. + +### 🐛 버그 수정 (Fixed) +- **레이어 데이터 손실 방지**: 새로고침 시 레이어 정보가 유실되던 데이터 영속성 결함 수정. +- **아이콘 매핑 정확도 향상**: `assetId` 기반의 정밀 매핑 및 경로 복제 방지 로직을 통해 PPTX 내 아이콘 404 오류 해결. +- **그룹 노드 렌더링 정상화**: PPTX 내에서 그룹 객체가 거대한 이미지로 보이던 현상을 투명도를 가진 네이티브 사각형으로 수정. + +### ✅ 완료된 마일스톤 +- **Phase 1.50**: High-Fidelity 하이브리드 내보내기 거버넌스 수립 완료 +- **Phase 1.55**: 시스템 초기화 및 안정성 전수 감사(Full Audit) 완료 +- **Phase 1.60**: 로컬 독립 실행 및 오프라인 리포팅 환경 구축 완료 + +--- + +## [2026-03-20] - i18n 거버넌스 및 아키텍처 전략 고도화 + +### 🚀 신규 기능 (Added) +- **전역 다국어(i18n) 통합 지원 (ko/en)**: + - 브라우저 언어 설정 및 사용자 선택에 대응하는 실시간 로케일 전환 엔진 구축. + - `en.json` 신설을 통한 영미권 사용자 지원 기반 마련. +- **기술 용어 직관화 (Terminology Optimization)**: + - 난해한 공학 용어를 직관적인 한국어로 교체: `Manhattan` -> `자동 경로 (장애물 회피)`, `U-Shape` -> `ㄷ자 경로`, `Orthogonal` -> `수직/수평 (일반)`. +- **PPTX 아키텍처 리포트 다국어화**: + - 생성되는 모든 PPTX 보고서의 헤더, 요약 표, 인벤토리 항목을 설정 언어에 맞춰 동적 렌더링하도록 개선. + +### 🛠️ 구조 개선 (Refactored) +- **하드코딩 문자열 제로화 (Hardcoding-Free)**: + - `Object Studio`, `Settings`, `Persistence`, `UI Templates` 등 시스템 전반의 텍스트를 로케일 파일로 분리 관리. +- **아키텍처 문서(`architecture.md`) 대대적 보강**: + - **Section 4 (Multi-Layer Isolation)**: 물리/논리/보안 레이어 간 SSOT(Single Source of Truth) 보장을 위한 데이터 평면 설계 명문화. + - **Section 5 (PM Assets & Expansion)**: 외부 자산 연동 및 REST API 확장 전략 구체화. + - **Section 8 (AI-Ready Strategy)**: 정규화된 JSON 구조를 통한 AI 분석 및 네트워크 시뮬레이션 가치 강조. +- **로케일 데이터 무결성 확보**: JSON 내 중복 키 전수 제거 및 정적 분석 오류 해결. + +### 🚀 기존 Premium UX 업데이트 내역 (이전 작업) +- **오브젝트 적층 순서 제어 (Z-Index Control)**: `[` (뒤로 보내기), `]` (앞으로 가져오기) 단축키 지원. +- **오브젝트 정밀 잠금 (Full Object Locking)**: `Ctrl + L` 및 시각적 피드백(Red Dashed Boundary) 구현. +- **재귀적 오브젝트 선택 (Recursive Selection)**: `Ctrl + 마우스 우클릭`을 통한 Surgical Picker 도입. +- **프리미엄 레이어 패널**: 레이어 이름 변경 및 비활성 레이어 투명도 조절 기능. + +### ✅ 완료된 마일스톤 +- **Phase 1.30**: 전역 다국어 통합 거버넌스 및 하드코딩 제거 완료 +- **Phase 1.35**: 아키텍처 설계서(architecture.md) 엔지니어링 표준화 완료 +- **Phase 1.40**: UI/UX 용어 고도화 및 전문가 DX 공식 수립 + +--- + +## [2026-03-19] - Object Studio & Asset Infrastructure 고도화 + +### 🚀 신규 기능 (Added) +- **Object Studio 전용 페이지 (`/studio`)**: 독립된 환경에서 자산을 제작하고 관리할 수 있는 전문 도구 세트 구현. +- **하이브리드 벡터 변환 엔진**: Potrace-js를 통합하여 PNG 비트맵 이미지를 고품질 SVG `` 데이터로 실시간 변환하는 기능 추가. +- **멀티 벤더 패키징 시스템**: + - 에셋을 벤더 단위 팩(`package.json`)으로 묶어 물리적 디렉토리에 저장하는 서버 API 구현. + - 저장된 패키지가 설계 영역(Designer) 라이브러리에 실시간 로드되는 인프라 구축. +- **인제스터(Ingester) 개선**: 폴더 단위 업로드(`webkitdirectory`) 및 드래그 앤 드롭을 통한 대량 자산 일괄 로드 지원. +- **리뷰 및 선택 UI**: 원본과 변환본을 나란히 비교하고, 사용자 취향에 따라 포맷을 선택할 수 있는 Side-by-Side 뷰 도입. + +### 🛠️ 구조 개선 (Refactored) +- **스튜디오 프론트엔드 모듈화**: `Renderer`, `Actions`, `State`, `Processor` 등으로 로직을 분리하여 확장성 및 유지보수성 확보. +- **백엔드 자산 스캔 로직 최적화**: `api_routes.py` 내 멀티 패키지 로딩 엔진 고도화. +- **명명 규칙 자동화**: 파일명을 기반으로 슬러그(Slug) 형태의 ID와 라벨을 자동 생성하는 로직 반영. + +### ✅ 완료된 마일스톤 +- **Phase 1**: 데이터 규격 및 멀티 로더 (Vendor Pack 시스템) +- **Phase 2**: 스튜디오 기반 구축 (라우팅, 레이아웃, 인제스천) +- **Phase 3**: 핵심 가공 기능 (SVG 트레이싱, 비교 검수) +- **Phase 4**: 패키징 및 설계영역 최종 연동 (Build & Save) + +--- + +## [2026-03-18] - UX & Precision Tools 고도화 + +### 🚀 신규 기능 +- **단축키 UX 고도화**: 컨텍스트 메뉴 내 단축키 힌트 노출 및 `Alt + 1` 사이드바 토글 등 전문 도구 수준의 단축키 전략 확립. +- **신규 객체 '리치 텍스트 카드(Rich Text Card)' 출시**: + - 아키텍처 도면의 '구축 내역' 및 '범례(Legend)'를 위한 전문 문서화 객체 추가. + - 지능형 리스트 렌더링 (번호 사각형, 불렛 기호 자동 생성). + - 범례 모드 지원: `- (도형:색상) 설명` 텍스트 기반 시각화 자동화. +- **Format Painter (Style Copy/Paste) 엣지 확장**: `Ctrl+Shift+C/V`를 통해 노드뿐만 아니라 선(Edge)의 라우팅, 색상, 스타일을 일괄 복사/적용 가능. +- **ESC 키 전역 캔슬**: `Esc` 키로 선택 해제 및 사이드바 닫기 지원. +- **다중 선택 정렬 패널**: 여러 노드 선택 시 사이드바에 즉시 정렬 및 스타일 편집 옵션 표시. + +### 🐛 버그 수정 +- **캔버스 팬닝 충돌 해결**: Space 키 드래그 시 Rubberband 선택과 겹치는 현상 수정 (인터랙션 명시적 비활성화). + +--- + +## [이전 로그] - 프로젝트 초기화 및 핵심 엔진 구축 +- AntV X6 그래프 엔진 기반 마이그레이션 완료. +- DSL(Domain Specific Language) 파싱 및 캔버스 동기화 인프라 구축. +- 그룹화, 라우팅, 인벤토리 등 핵심 기능 순차적 도입. diff --git a/docs/features.md b/docs/features.md new file mode 100644 index 0000000..54d258a --- /dev/null +++ b/docs/features.md @@ -0,0 +1,79 @@ +# drawNET 기능 명세서 (v1.0 Alpha) + +현재 구현된 주요 기능들의 목록과 상세 설명입니다. "이 문서에 없는 기능은 구현되지 않은 것으로 간주합니다." + +## 1. 프로젝트 관리 (Project Management) +- **JSON 기반 SSoT**: `graph.toJSON()`과 `graph.fromJSON()`을 사용하여 프로젝트 상태(노드, 엣지, 위치, 스타일 등)를 완벽하게 보존. +- **자동 저장 및 세션 복구**: `persistence.js`를 통해 변경 사항 발생 시 브라우저 LocalStorage에 실시간 자동 저장. +- **임포트/익스포트**: `.json` 또는 `.dnet` 확장자로 프로젝트 파일을 내보내고 가져오기 지원. + +## 2. 그래프 캔버스 (Topology Canvas) +- **AntV X6 v2.x 엔진**: 엔터프라이즈 레벨의 고성능 그래프 렌더링. +- **UUID 아키텍처**: 모든 오브젝트에 고유 ID를 부여하여 라벨 중복과 무관하게 데이터 무결성 보장. +- **정밀 직교 라우팅 (Manhattan)**: 선 꼬임 방지 및 직각 연결 유지 알고리즘 적용. +- **스마트 앵커 (Smart Anchors)**: 상/하/좌/우 포트 고정을 통한 정교한 경로 제어. + +## 3. 지능형 그룹화 (Smart Grouping) +- **컨테이너-자식 관계**: 드래그 앤 드롭을 통한 계층 구조 형성. +- **가변 패딩 조절**: 속성 사이드바를 통해 그룹 내부 여백 실시간 조정 가능. +- **UUID 계층 구조**: 부모-자식 관계가 UUID로 관리되어 노드 이동 및 이름 변경 시에도 계층 유지. +- **최하위 그룹 자동 인식 (Innermost Selection)**: 그룹이 중첩되거나 겹쳐 있는 경우, 시스템이 자동으로 가장 면적이 작은(가장 안쪽의) 그룹을 부모로 선택하여 정밀한 계층 관리 지원. + +## 4. 사이드바 및 속성 제어 (Sidebar & Properties) +- **자산 라이브러리**: 카테고리별 자산 트리 및 실시간 검색 필터링. +- **상세 속성 편집**: + - 노드: 타입, 라벨, 부모(UUID), IP, 상태, 벤더, 커스텀 어셋 경로 등. + - 엣지: 타입, 스타일, 색상, 라우팅 방식, 앵커 위치, 터널링 여부 등. +- **자동 사이드바 오픈**: 오브젝트 선택 시 해당 속성 창 자동 노출. + +## 5. 정밀 배치 및 협업 도구 (Precision Tools) +- **인벤토리 패널**: 타입별 자산 수량 실시간 집계 및 CSV 내보내기 지원 (`Alt + 0`). +- **서식 복사 (Format Painter)**: `Ctrl + Shift + C/V`를 통해 노드 및 엣지(선)의 스타일을 일괄 복제. + | 구분 | 대상 | 복사/붙여넣기 항목 | + | :--- | :--- | :--- | + | **노드** | 데이터 & 디자인 | 제조사, 모델, 상태, 프로젝트, 태그, 배경색, 글꼴 크기/색상 등 | + | **엣지** | 라우팅 & 스타일 | **직선/직각 모드**, 선 색상, 두께, 점선 여부, 시작/대상 앵커 위치 등 | +- **오브젝트 적층 제어 (Stacking Order)**: `[` (Send to Back), `]` (Bring to Front) 단축키를 사용하여 겹친 오브젝트의 상하 순서 조절. +- **물리적 객체 잠금 (Object Locking)**: `Ctrl + L` 또는 속성창의 스위치를 통해 이동, 삭제, 회전을 원천 차단. 잠긴 객체는 **빨간색 점선 경계**로 표시됨. +- **재귀적 오브젝트 선택 (Recursive Picker)**: `Ctrl + 마우스 우클릭` 시 마우스 포인터 위치에 중첩된 모든 오브젝트 목록을 팝업하여, 복잡한 레이어 구조에서 원하는 항목만 정밀하게 선택 가능. +- **비주얼 디프 (Visual Diff)**: JSON 스냅샷 비교를 통해 이전 상태 대비 변경된 위치 및 추가된 노드 하이라이트. +- **드래그 복제**: `Ctrl + Drag`를 통한 즉시 노드 복제 (고스트 박스 기반 실시간 프리뷰). +- **하이엔드 안정성(Failsafe) 설계**: + - **ESC 즉시 취소**: 드래그 또는 복제 중 ESC 키 입력 시 모든 상태 초기화 및 고스트 제거. + - **자기 치유형 키 상태(Self-healing)**: 브라우저 탭 전환 등으로 인한 키 업/다운 이벤트 유실 시, 마우스 활동 감지로 실제 키 상태 자동 재동기화. + - **멀티 플랫폼(Mac) 지원**: Windows(Ctrl)와 Mac(Command) 키를 통합 지원하여 동일한 복제 워크플로우 제공. + +## 6. 오브젝트 스튜디오 (Object Studio) +- **대량 이미지 업로드**: 드래그 앤 드롭으로 다량의 에셋 일괄 처리. +- **PNG to SVG 벡터 변환**: Potrace-js 엔진을 활용한 고품질 벡터화. +- **실시간 비교 뷰어**: 비트맵과 벡터 결과물의 실시간 품질 대조. +- **벤더 패키징**: 가공된 에셋을 라이브러리로 즉시 패키징하여 반영. + +## 7. 단축키 시스템 (Hotkeys - Premium) +- **Alt + 0/1**: 인벤토리 / 속성 사이드바 토글. +- **Alt + 9**: 레이어 패널 토글. +- **Shift + A/D**: 빠른 선 연결 / 끊기. +- **Shift + 1~6**: 오브젝트 자동 정렬 (Alignment). +- **Shift + 7~8**: 오브젝트 균등 분배 (Distribution). +- **F2**: 선택된 오브젝트의 라벨 즉시 편집. +- **Directional Keys**: 5px / 그리드 단위(Shift) 정밀 이동. + +## 8. 논리적 계층화 (Multi-Layer Support) +- **레이어 기반 가시성 제어**: 무제한 논리적 레이어 생성 및 개별 Visible 토글. +- **비활성 레이어 투명도 (Opacity Control)**: 슬라이더를 통해 배경 레이어의 투명도를 0~100%로 조절하여 집중도 향상. +- **레이어 리네임 (Rename)**: 편집 아이콘(Pencil)을 사용하여 레이어 이름을 직관적으로 변경하고 영속 저장. +- **액티브 레이어 자동 할당**: 현재 선택된 레이어에 신규 오브젝트 자동 귀속. +- **논리 전용 레이어 (Logical-Only Layer)**: + - 레이어별로 **'장비(Physical)'** 또는 **'연결(Logical)'** 성격 부여 가능. + - 논리 레이어에서는 **노드 드롭 차단** 및 **지능형 노드 필터링(복제 시 선만 추출)** 기능을 통해 설계 실수 방지 및 시뮬레이션 효율 극대화. +- **지능형 적층 계층 (Z-Index Hierarchy)**: `Group (1) < Edge (30) < Node (50)` 계층을 기본으로 하여, 연결선이 그룹에 가려지지 않고 항상 인터랙션 가능하도록 최적화. + +## 9. 시스템 데이터 무결성 (Data Integrity & Recovery) +- **자동 데이터 자가 치유(Self-healing)**: 프로젝트 로드 시 유실된 좌표(`pos`), 크기(`size`), 라벨(`label`) 등을 `data` 필드로부터 추론하여 자동으로 복구 및 동기화. +- **명시적 저장 모델 (Explicit Property Apply)**: 사이드바 텍스트 수정 시 실시간 반영 대신 **[적용]** 버튼이나 **Enter** 키를 통한 명시적 확정 방식을 채택하여, 입력 도중의 포커스 유실을 방지하고 데이터 경합 최소화. +- **명시적 연결선 메타데이터 (Explicit Edge Layers)**: + - 모든 연결선에 `source_layer`, `target_layer`, `is_cross_layer` 정보를 명시적으로 기록. + - 이를 통해 전체 도면 데이터 없이도 연결성(Connectivity)을 독립적으로 해석 가능하게 하며, 외부 도구 및 LLM 분석 시의 정밀도를 대폭 향상. + +--- +- **마지막 업데이트**: 2026-03-22 (명시적 연결선 메타데이터 추가, Z-Index 계층화, 데이터 자가치유 로직) diff --git a/docs/maintenance.md b/docs/maintenance.md new file mode 100644 index 0000000..a11c672 --- /dev/null +++ b/docs/maintenance.md @@ -0,0 +1,90 @@ +# drawNET Maintenance Guide (AI 개발자 필독) + +이 문서는 drawNET 프로젝트의 연속성을 유지하기 위한 **핵심 기술 규칙 및 유지보수 지침**을 담고 있습니다. 새로운 세션의 AI 개발자는 작업을 시작하기 전 본 문서를 반드시 숙지하여 기존의 설계 철학이 깨지지 않도록 해야 합니다. + +--- + + + +## ⌨️ 3. 단축키 시스템 (Hotkeys) + +- **규칙**: + 1. `static/hotkeys.json`에서 `undo`와 `redo` 액션은 반드시 **`"alwaysEnabled": true`** 속성을 가져야 합니다. + 2. `static/js/modules/hotkeys.js`는 `isTyping` 상태(텍스트 입력 중)일지라도 `alwaysEnabled`가 참인 단축키는 차단하지 않고 실행해야 합니다. + 3. **이유**: 예기치 않게 특정 입력창에 포커스가 머물러 있더라도 그래프의 Undo/Redo 기능은 항상 작동해야 하기 때문입니다. + +## 🎨 4. 오브젝트 스튜디오 (Studio) + +- **규칙**: + 1. **ID 고유성**: `static/js/modules/studio/state.js`의 `addSource(file)` 함수는 파일명이 중복될 경우(예: `icon.png`, `icon.png`) `id` 뒤에 `_1`, `_2` 등의 접미사를 붙여 반드시 고유한 ID를 생성해야 합니다. + 2. **ID 생성 방식**: 소문자 영문과 숫자 위주로 변환하며, 공백이나 특수문자는 언더바(`_`)로 치환합니다. + +## 📂 5. 에셋 라이브러리 (Asset Library) + +- **구조**: `Pack (Package) -> Category -> Object` 3단계 계층 구조를 유지합니다. +- **필터링**: 사용자가 사이드바의 **'Filter' 아이콘**을 통해 원하는 패키지만 선택적으로 로드할 수 있어야 하며, 이 설정은 `localStorage`의 `selectedPackIds`에 저장됩니다. +- **Composite ID (중요)**: 에셋의 `id`가 패키지 간에 중복될 수 있으므로, `state.assetMap`의 키와 드래그 앤 드롭 통신에는 반드시 **`${pack_id}|${asset.id}`** 형식의 조합 키를 사용해야 합니다. + +## 🧼 6. 오브젝트 데이터 정합성 (Object Data Purity) + +- **규칙**: + 1. **그룹 및 기본 도형(Primitives)**: `group`, `rect`, `circle`, `rounded-rect`, `text-box`, `label` 등 시각적 도형 객체는 에셋 이미지 경로(`assetPath`)를 가져서는 안 됩니다. + 2. **ID 매칭 주의**: `static/js/modules/graph/styles/mapping.js`의 `getX6NodeConfig` 함수는 객체 타입이 그룹이거나 기본 도형 목록에 포함될 경우 에셋 검색 및 할당 로직을 반드시 건너뛰어야 합니다. + 3. **라벨 데이터-시각 속성 동기화**: `data.label`은 사이드바와 비즈니스 로직의 원본 소스(SSoT)입니다. `json_handler.js` 및 `handleNodeUpdate`는 항상 `data.label`의 값을 `attrs.label.text`에 강제로 동기화하여 시각적 불일치를 방지해야 합니다. + 4. **이유**: 그룹 이름이나 도형 라벨이 기존 에셋 명칭을 포함할 경우(예: "Switch Group"), 시스템이 이를 에셋으로 오판하여 잘못된 아이콘을 렌더링하거나 404 에러를 유발할 수 있기 때문입니다. + +## 🔄 7. 부모 그룹 선택 가변 로직 (Parent Selection Heuristic) + +- **원칙**: 노드가 중첩되거나 겹쳐 있는 여러 그룹 영역에 드롭/이동될 경우, 시스템은 항상 **가장 구체적인(Innermost)** 부모를 선택해야 합니다. +- **판단 알고리즘**: + 1. **면적 기반 우선순위**: 드롭 포인트를 포함하는 모든 그룹 후보 중 Bounding Box의 **면적(Area)이 가장 작은 그룹**을 최종 부모로 선택합니다. + 2. **계층 기반 보완**: 만약 후보 그룹들의 면적이 동일한 경우(예: 기본 사이즈로 중첩된 경우), `getAncestors()`를 확인하여 다른 그룹의 **자손(Descendant)인 그룹**을 우선적으로 선택합니다. +- **적용 위치**: `static/js/modules/graph/config.js` (`embedding.findParent`) 및 `static/js/modules/graph/interactions/drop.js`. + +## 🧩 8. 모듈화 및 리팩토링 규칙 (Refactoring & Import Integrity) + +- **규칙**: + 1. **상대 경로 재계산**: 파일을 하위 디렉토리로 이동(예: `events.js` → `events/index.js`)할 경우, 해당 파일 내의 모든 상대 경로 임포트(`import ... from '../../state.js'`)는 반드시 새로운 디렉토리 깊이에 맞춰 업데이트해야 합니다. + 2. **공통 참조 체크리스트**: + - `state.js`, `constants.js` (보통 `modules/` 최상위) + - `graph/styles/utils.js` 등 공용 유틸리티 + - `ui/`, `persistence.js` 등 외부 모듈 의존성 + 3. **검증 절차**: 모듈화 작업 직후에는 반드시 `grep`이나 IDE 기능을 사용하여 **"지정된 파일을 찾을 수 없습니다"** 또는 **"404 Not Found"** 오류가 없는지 전수 검사해야 합니다. +- **이유**: 파일 구조가 깊어짐에 따라 기존의 `./` 또는 `../` 경로가 깨지면서 런타임 오류를 유발하고 개발 흐름을 방해하기 때문입니다. + +## 11. 사이드바 및 실시간 동기화 (Sidebar & Sync) + +- **규칙**: + 1. **세이프 렌더(Safe Render)**: 사이드바의 `input` 또는 `textarea`에 포커스가 있는 동안에는 그래프 이벤트에 의한 전체 리렌더링을 차단해야 합니다. (`index.js` 내 `safeRender` 함수 참조) + 2. **비동기 렌더링 튜닝**: X6의 데이터 변경 이벤트(`cell:change:data`) 발생 직후 렌더링할 때는 반드시 `setTimeout(..., 0)`을 사용하여 엔진 내부의 데이터 확정이 완료된 후 UI를 그려야 합니다. + 3. **명시적 저장(Explicit Apply)**: 라벨, 자산 정보 등 텍스트 기반 속성은 `Enter` 키 또는 **[적용]** 버튼을 통해서만 저장되도록 하여, 입력 중 데이터 유실이나 포커스 탈취를 원천 차단합니다. + 4. **재귀적 전파(Recursive Poke)**: 그룹의 이름이나 레이아웃 정보를 변경할 경우, 반드시 모든 하위 객체(`getDescendants`)에 `_parent_updated`와 같은 더미 타임스탬프를 `setData`로 주입하여 하위 객체들의 사이드바가 즉각 최신 부모 정보를 반영하게 해야 합니다. +- **이유**: 실시간 협업 및 복잡한 계층 구조에서 데이터 정합성과 사용자 입력의 연속성을 동시에 보장하기 위한 필수 장치입니다. + +## 12. 레이어 격리 및 선택 필터링 (Layer Isolation) + +- **규칙**: + 1. **선택 격리(Selection Filter)**: `plugins.js`의 `Selection` 플러그인 설정에서는 반드시 현재 활성 레이어(`state.activeLayerId`)에 속한 셀만 선택 가능하도록 필터링해야 합니다. + 2. **상호작용 차단**: 활성 레이어가 아닌 객체에 대한 더블 클릭(더 하위 계층으로 진입 등)은 `nodes.js` 이벤트 핸들러에서 명시적으로 차단 가드를 두어야 합니다. + 3. **정적 필터링**: `pointer-events: none`과 같은 CSS 기반 차단 대신, 플러그인 레벨의 필터링을 우선하여 고스트 스냅(Ghost Snapping) 등 보조 기능은 유지되도록 관리합니다. +- **이유**: 사용자가 편집 중이지 않은 레이어의 객체를 실수로 조작하여 데이터가 오염되는 것을 방지하기 위함입니다. + +## 9. 오브젝트 적층 및 잠금 관리 (Stacking & Locking) + +- **Z-Index 규칙 (2026-03-21 개정)**: + - **계층 구조**: `Group/Rack (1~19) < Edge (30) < Node (50)` + - 그룹은 하단에, 연결선(Edge)은 그룹 위에, 일반 노드는 최상단에 배치하여 가시성 및 클릭 편의성을 보장합니다. + - 사용자 조작(`[`, `]`)에 의한 동적 변경 시에도 이 기본 계층 범위를 크게 벗어나지 않도록 주의합니다. +- **잠금(Lock)의 물리적 강제**: + - 단순히 `data.locked` 필드만 변경하는 것이 아니라, `cell.setProp`을 통해 `movable`, `deletable`, `rotatable` 속성을 동기화해야 합니다. + - `static/js/modules/graph/config.js`의 `interacting` 블록은 반드시 함수형으로 작성되어 각 셀의 `movable` 속성을 실시간으로 체크해야 합니다. + +## 10. 정밀 공간 쿼리 (Spatial Query Integrity) + +- **규칙**: + - 특정 좌표(`x, y`)에서 오브젝트를 검색할 때, AntV X6 v2의 실험적/변동성이 큰 API(`findModelsAtPoint` 등)에 의존하지 않습니다. + - 대신 `graph.getCells().filter(cell => cell.getBBox().containsPoint(local))`와 같은 **수동 기하학 필터링** 방식을 유지하여 버전 업데이트에 따른 오작동을 방지합니다. +- **좌표 변환**: 반드시 브라우저의 클라이언트 좌표를 `graph.clientToLocal(e.clientX, e.clientY)`를 통해 그래프 로컬 좌표로 먼저 변환한 후 계산에 사용해야 합니다. + +--- +*마지막 업데이트: 2026-03-20* diff --git a/docs/roadmap.md b/docs/roadmap.md new file mode 100644 index 0000000..bab1d84 --- /dev/null +++ b/docs/roadmap.md @@ -0,0 +1,86 @@ +# drawNET 프로젝트 로드맵 및 개발 가이드 + +이 문서는 drawNET 프로젝트의 개발 원칙, 완료된 마일스톤, 그리고 향후 발전 방향을 정의합니다. + +--- + +## 🛠️ 개발 원칙 (Development Principles) +1. **하드코딩 배제:** 모든 자산과 설정은 `assets.json` 등 외부 파일을 통해 관리합니다. +2. **로컬 최적화:** 설치와 실행이 간편해야 하며, 보안 및 폐쇄망 대응을 위해 핵심 라이브러리(AntV X6 등)를 로컬에서 관리합니다. +3. **사용자 경험 최선:** 텍스트(DSL)와 시각적 편집(GUI)의 장점을 결합한 하이드리브 워크플로우를 지향합니다. +4. **엔진 독립성:** 특정 엔진에 종속된 기능을 지양하되, 현재는 AntV X6의 성능을 극대화하여 구현합니다. + +--- + +## 📅 완료된 마일스톤 (Milestones) + +### 1. 전용 그래프 엔진 마이그레이션 (AntV X6) +- **엔진 전환:** Cytoscape.js에서 AntV X6로 전체 시스템 이관 완료. +- **직교 라우팅:** Manhattan 알고리즘을 통한 완벽한 90도 굴곡 선 지원. +- **쉐이프 커스터마이징:** 이미지 및 메타데이터를 포함한 전용 노드 타입 등록. +- **로컬화:** 외부 CDN 차단 및 ORB 이슈 해결을 위한 라이브러리 자산 로컬화. +- **방향성 고정 라우팅 (Top/Bottom/Left/Right):** 앵커 선택에 따라 해당 방향으로 선이 가장 먼저 뻗어나오도록 강제하는 지능형 Manhattan 라우팅 엔진 구현 완료. + +### 2. 하이브리드 속성 및 인터랙션 +- **속성 사이드바:** X6 셀 데이터와 실시간 연동되는 속성 편집 패널. +- **컨텍스트 메뉴:** 우클릭을 통한 퀵 액션 및 스타일 제어. +- **지능형 그룹화:** 컨테이너 드롭 및 노드 드래그 포함을 통한 계층 구조 자동 생성. + +### 3. 영속성 및 환경 관리 +- **Leaf-Only 복구:** 계층 구조의 좌표 뒤틀림을 방지하는 X6 최적화 좌표 복구 엔진. +- **전용 포맷(.dnet):** 메타데이터 헤더를 포함한 X6 JSON 구조 표준화. +- **캔버스 환경 저장:** 그리드 스타일, 스냅 설정, 줌 레벨 등 시큐리티 가시성 환경 보존. + +### 4. 인벤토리 및 정밀 배치 시스템 +- **Inventory UI:** 타입별 수량 집계 및 드래그 가능한 플로팅 패널 구현. +- **데이터 기반 단축키 엔진:** `hotkeys.json` 설정을 통한 유연한 키 바인딩 시스템 도입. +- **키보드 네비게이션:** 방향키 및 Shift 조합을 통한 그리드 단위 오브젝트 정밀 이동 기능 추가. +- **파서 고도화:** 커스텀 포트 이름 및 그룹 멤버십 안정성 강화. + +### 5. 오브젝트 상세 커스터마이징 및 단축키 전략 (New) +- **라벨 속성 강화**: 라벨 색상(Color) 및 위치(Top/Bottom/Left/Right/Center)를 속성창에서 즉시 변경 가능한 UI 구현. +- **단축키 계통 확립**: `Alt`(패널), `Shift`(액션), `Ctrl`(시스템)로 구분된 전문적인 단축키 설계 원칙 문서화 및 `Alt + 1` 적용. +- **실행 취소/다시 실행**: `Ctrl + Z/Y`를 통한 무제한 작업 실행 취소 기능 활성화. + +### 7. Premium UX & 정밀 제어 시스템 (New) +- **오브젝트 적층(Z-Index)**: `[` / `]` 단축키를 통한 가역적 레이어링 시스템 구축 완료. +- **물리적 잠금(Locking)**: 인터랙션 제한 및 시각적 피드백(Red Boundary)을 결합한 강력한 객체 보호 기능 구현. +- **재귀적 선택(Recursive Select)**: 겹친 오브젝트를 정밀하게 골라내는 Surgical Picker(Photoshop Style) 시스템 완성. +- **레이어 패널 고도화**: 비활성 레이어 투명도 조절, 레이어 리네임 및 영속성 동기화 완료. + +--- + +## 🚀 향후 개발 우선순위 (Future Priorities) + +### 💡 Current Focus: Interaction & Topology Intelligence +현재 기본적인 정밀 제어 도구가 완성됨에 따라, **망(Network)의 논리적 연속성**을 보장하는 지능형 인터랙션으로 전환 중입니다. + +### 🎯 주요 목표 +- [x] **정밀 고정 및 적층:** 오브젝트 잠금 및 Z-Index 제어 완결. +- [x] **정밀 선택 도구:** 복잡한 도면에서의 surgical selection 지원. +- [x] **고스트 타겟팅 (Ghost Targeting):** 레이어 간 관통 연결 시 하부 레이어 노드에 대한 자석 효과 및 안내선 제공. +- [x] **레이어 스패닝 (Spanning):** 여러 레이어에 걸쳐 있는 거대 오브젝트(Backbone 등)의 통합 관리 로직. + + +### Phase 2: 고급 시각화 및 UX (중기) +- [x] **선 교차(Cross) 점프:** 선이 겹칠 때 시각적으로 건너뛰는(Jump/Hop) 브릿지 효과. +- [x] **실행 취소/다시 실행:** X6 History 플러그인을 활용한 무제한 Undo/Redo. + + +### Phase 5: PM 자산 관리 및 인벤토리 (Inventory & Asset Management) [x] +- [x] **표준 속성 확장**: 제조사, 모델명, IP, 자산번호, 상태 등 PM용 표준 데이터 스키마 적용. +- [x] **지능형 검색 및 이동 (Search & Zoom)**: IP, 자산번호, 모델명 기반 검색 및 해당 노드로 즉시 포커싱. +- [x] **속성 복사/붙여넣기 (Format Painter)**: `Ctrl+Shift+C/V`를 통한 스타일 및 관리 데이터 일괄 복제. +- [x] **BOM 인벤토리 내보내기 (Excel Export)**: 전체 자산 리스트를 엑셀/CSV로 자동 생성 및 다운로드. +- [x] **드래그 복제 (Ctrl+Shift+Drag)**: 마우스 드래그를 이용한 즉시 오브젝트 복제 구현. + +--- + +### Phase 7: 멀티 레이어 아키텍처 및 논리적 계층화 (Multi-Layer & Logical Stratification) +- [x] **평면 중첩(Flat Overlay) 시스템**: 여러 망(내부, 외부, 폐쇄망)을 독립된 레이어로 분리하고 투명도 기반으로 겹쳐 보기 기능 구현. +- [x] **레이어 관통 스냅(Ghost Snapping)**: 다른 레이어의 노드(방화벽 등)에 자석 효과를 적용하여 레이어 간 연결 편의성 극대화. +- [ ] **입체 레이어 뷰 (3D Exploded View) [취소/폐기]**: 프레젠테이션용 아코디언 익스플로드 뷰 실험 결과 가독성 저하로 폐기 결정. +- [x] **디자인 가이드라인 수립**: [Multi-Layer 설계 지침](file:///c:/project/drawNET/docs/design_multilayer.md) 기반의 데이터 정합성 엔진 개발. + +### Phase 4: 인프라 연동 및 자동화 (Integration & Automation) +- [x] **Export 다변화**: SVG, PDF, 고해상도 PNG(투명 배경) 및 전문적인 PPTX 리포트 자동 생성 기능. diff --git a/docs/studio/phase1_checklist.md b/docs/studio/phase1_checklist.md new file mode 100644 index 0000000..ec1e3c1 --- /dev/null +++ b/docs/studio/phase1_checklist.md @@ -0,0 +1,46 @@ +## 1. 데이터 규격 정의 (package.json) +- [x] 패키지 기본 정보(ID, Vendor, Version) 필드 정의 완료 +- [x] 에셋 개별 정보(ID, Label, Category, Paths) 필드 정의 완료 +- [x] 전/후면(Front/Back) 뷰 확장을 고려한 데이터 구조 검토 완료 + +### [최종 확정 규격] +```json +{ + "id": "cisco_nexus_9k", + "name": "Cisco Nexus 9000 Series", + "vendor": "Cisco", + "version": "1.0.0", + "description": "Standard Nexus switches for Data Center", + "assets": [ + { + "id": "n9k_93180yc", + "label": "Nexus 93180YC-EX", + "category": "Switch", + "views": { + "icon": "icon.svg", + "front": "front.svg", + "back": "back.svg" + }, + "specs": { + "u_height": 1, + "is_rack_unit": true + } + } + ] +} +``` + +## 2. 설계영역(Draw) 패키지 로더 구현 +- [x] `assets.js`가 단일 경로가 아닌 `packs/` 내의 모든 하위 패키지를 스캔하도록 수정 +- [x] 사이드바 라이브러리 영역에 패키지별 섹션(또는 그룹) UI 생성 +- [x] 개별 에셋을 드래그하여 캔버스 드롭 시 정상 렌더링 확인 + +## 3. 샘플 패키지 연동 테스트 +- [x] `static/assets/packs/sample_cisco/` 수동 생성 및 테스트 데이터 수납 +- [x] 설계영역 재로드 시 샘플 패키지가 라이브러리에 자동 노출되는지 확인 +- [x] 언어(ko/en) 파일에 패키지 관련 신규 키 추가 여부 확인 + +## 4. 안정성 및 예외 처리 +- [x] 잘못된 형식의 `package.json` 로드 시 에러 핸들링 및 사용자 알림 +- [x] 에셋 파일 경로 누락 시 기본(Default) 아이콘 표시 로직 확인 +- [x] 기존 라이브러리(Fixed Objects 등)와의 UI 충돌 여부 확인 diff --git a/docs/studio/phase2_checklist.md b/docs/studio/phase2_checklist.md new file mode 100644 index 0000000..568457f --- /dev/null +++ b/docs/studio/phase2_checklist.md @@ -0,0 +1,26 @@ +# Phase 2 체크리스트: 스튜디오 기반 구축 (Base Setup) + +## 1. 전용 페이지 및 라우팅 설정 +- [x] `routes/main_routes.py`에 `/studio` 엔드포인트 추가 완료 +- [x] `templates/studio.html` 기본 구조(HTML5, 필요한 CSS/JS 로드) 생성 완료 +- [x] 설계영역(Draw)에서 스튜디오로 이동할 수 있는 메뉴/버튼 배치 (예: 상단 툴바) + +## 2. 스튜디오 전용 UI/UX 레이아웃 (3-Panel) +- [x] **Source Panel (좌측)**: 업로드된 파일 목록 및 Drag & Drop 영역 구현 +- [x] **Workspace (중앙)**: 에셋들을 바둑판식(Grid)으로 보여주는 프리뷰 영역 구현 +- [x] **Property Panel (우측)**: 선택된 에셋의 상세 정보(ID, Label) 입력 영역 스켈레톤 생성 +- [x] 스튜디오 전용 다크 테마 및 전문 도구 스타일 CSS 적용 + +## 3. Ingestion(이미지 수집) 엔진 구현 +- [x] 브라우저 폴더 선택(`webkitdirectory`) 기능 구현 및 파일 필터링(.svg, .png, .jpg) +- [x] 개별 파일 드래그 앤 드롭(Drag & Drop) 업로드 지원 +- [x] 선택된 이미지들을 중앙 Workspace 그리드에 즉시 렌더링 (Memory URL 사용) + +## 4. 선택 및 상태 서비스 (State Management) +- [x] 그리드 내 이미지 개별/다중 선택(Ctrl/Shift 클릭) 로직 구현 +- [x] 선택된 항목 수 및 파일 정보(해상도, 크기) 하단 상태바 표시 +- [x] 업로드된 소스 목록 관리 서비스(`studio_state.js`) 초기화 + +## 5. 설계영역과의 분리 검증 +- [x] `/studio` 페이지 로딩 시 설계영역의 X6 인스턴스가 생성되지 않아 리소스가 낭비되지 않는지 확인 +- [x] 뒤로가기 또는 '설계영역으로 돌아가기' 버튼 정상 작동 확인 diff --git a/docs/studio/phase3_checklist.md b/docs/studio/phase3_checklist.md new file mode 100644 index 0000000..136b559 --- /dev/null +++ b/docs/studio/phase3_checklist.md @@ -0,0 +1,19 @@ +## 1. PNG to SVG 변환 엔진 (Transformation) +- [x] 브라우저 기반 벡터라이징 라이브러리(Potrace) 통합 완료 +- [x] 소스 리스트의 PNG 파일을 읽어 실제 벡터 `` 데이터로 추출하는 Processor 모듈 구현 +- [x] 성능 최적화: 대량의 파일 변환 시 순차 처리 로직 구현 + +## 2. 변환 품질 검수 및 비교 UI (Review) +- [x] **Side-by-Side 뷰**: 원본 PNG와 변환된 SVG를 동일 크기로 나란히 배치하여 시각적 비교 지원 +- [x] **가변 옵션 조절**: 기본 임계값 적용 및 벡터화 결과 즉시 반영 로직 구현 +- [x] **최종 채택 토글**: 개별 에셋별로 [PNG 유지] 또는 [SVG 채택] 중 하나를 명시적으로 선택하는 기능 + +## 3. 다중 선택 및 벌크 속성 편집 (Bulk Edit) +- [x] 그리드 내 여러 에셋 선택 시 우측 패널에 '일괄 편집' 모드 활성화 +- [x] **공통 속성 적용**: 선택된 모든 에셋에 대해 카테고리 일괄 변경 기능 구현 +- [x] **명명 규칙(Naming Rule)**: 파일명을 기반으로 ID 및 라벨 자동 생성 로직 반영 + +## 4. 메타데이터 및 상태 관리 +- [x] 가공 중인 에셋들의 실시간 세션 상태 유지 (`studio/state.js`) +- [x] 유효성 검사: 필수 값(Label) 실시간 업데이트 반영 +- [x] 작업 중인 이미지의 프리뷰 및 선택 상태 시각화 diff --git a/docs/studio/phase4_checklist.md b/docs/studio/phase4_checklist.md new file mode 100644 index 0000000..6078ecd --- /dev/null +++ b/docs/studio/phase4_checklist.md @@ -0,0 +1,23 @@ +## 1. 패키지 메타데이터 입력 UI +- [x] 상단 툴바에 패키지 ID(영문/숫자/언더바), 이름, 버전 입력 필드 추가 +- [x] 패키지 전용 벤더(Vendor) 및 아이콘 지정 기능 구현 +- [x] 필수 값 입력 여부 유효성 검사 로직 추가 + +## 2. 서버 측 저장 API (Backend) +- [x] `api_routes.py`에 `/api/studio/save-pack` POST 엔드포인트 구현 +- [x] 서버의 `static/assets/packs/[pack_id]/` 디렉토리를 자동 생성하고 이미지 파일 저장 +- [x] 가공된 에셋 정보를 바탕으로 최종 `package.json` 파일 생성 및 저장 + +## 3. Build & Publish 워크플로우 +- [x] `[Build Package]` 버튼 클릭 시 가공된 모든 에셋(SVG/PNG 선택본)을 수집하여 서버로 전송 +- [x] 진행 상태 표시(Progress Bar) 및 성공/실패 알림 모달 구현 +- [x] 성공 시 생성된 패키지 요약 정보(에셋 개수, 용량 등) 표시 + +## 4. 설계영역(Designer) 즉시 반영 +- [x] 패키지 저장 후 설계영역으로 이동 시 신규 패키지가 라이브러리에 자동 로드되는지 확인 +- [x] 라이브러리 내 카테고리가 `package.json`의 정의대로 올바르게 그룹화되는지 검증 +- [x] 새로 추가된 에셋을 캔버스에 드랍했을 때 이미지 경로가 정상적으로 해석되는지 최종 확인 + +## 5. 데이터 모델 확장 및 검증 (Future Proof) +- [x] 향후 Rack 배치를 고려한 `Front/Back View` 정보가 `package.json`에 포함될 수 있는 구조인지 재확인 +- [x] 패키지 삭제 또는 덮어쓰기(Overwrite) 시의 안정성 확보 diff --git a/docs/studio/test_scenario.md b/docs/studio/test_scenario.md new file mode 100644 index 0000000..42d8a9a --- /dev/null +++ b/docs/studio/test_scenario.md @@ -0,0 +1,33 @@ +# Object Studio 테스트 시나리오 (Verification) + +본 시나리오는 스튜디오의 핵심 가공 기능(Phase 3)을 검증하기 위한 절차입니다. + +## 시나리오: 멀티 벤더 패키지 제작 및 설계영역 연동 + +### 1. 이미지 준비 및 수집 (Ingestion) +* **파일 로드**: 로컬의 PNG 아이콘 파일 3~5개를 준비하여 워크스페이스로 드래그 앤 드롭함. +* **검증**: 좌측 소스 리스트에 파일명이 나타나고, 중앙 그리드에 실시간 프리뷰가 렌더링되는지 확인. + +### 2. 단일 에셋 정밀 가공 (Processing) +* **변환 실행**: 그리드에서 하나의 PNG 파일을 선택하고 우측 패널의 `[Convert to SVG]` 버튼을 누름. +* **비교 검수**: + * 화면에 나타나는 [Original PNG]와 [Vectorized SVG]의 품질을 비교. + * 임계값(Threshold) 바를 조절하여 외곽선이 깔끔하게 추출되는지 확인. + * `[채택(SVG)]` 버튼을 눌러 결과가 반영되는지 확인. +* **속성 입력**: 에셋의 표시 이름을 'Core Router'로 변경하고 카테고리를 'Network'로 지정. + +### 3. 벌크 속성 편집 (Bulk Edit) +* **다중 선택**: 나머지 3개의 이미지를 `Ctrl+Click`으로 선택. +* **일괄 적용**: 우측 패널에서 제조사(Vendor)를 'Cisco'로 일괄 입력하고 `[Apply]` 클릭. +* **검증**: 각 에셋을 개별 클릭했을 때 제조사 정보가 모두 'Cisco'로 동기화되었는지 확인. + +### 4. 패키징 및 최종 발행 (Packaging) +* **정보 입력**: 상단 툴바의 패키지 명칭을 'My_Cisco_Pack'으로 입력. +* **발행**: `[Build Package]` 버튼을 눌러 서버에 에셋과 `package.json`이 저장되는지 확인. +* **연동 확인**: 설계영역(Draw)으로 돌아갔을 때 좌측 라이브러리에 'My_Cisco_Pack' 섹션이 새로 나타나는지 확인. + +--- + +## 성공/실패 판정 기준 +* **Success**: 모든 에셋이 `package.json`에 정의된 대로 라이브러리에 그룹화되어 나타남. +* **Failure**: 변환 중 브라우저 멈춤, 데이터 누락, 또는 설계영역에서 아이콘이 깨짐. diff --git a/docs/studio_plan.md b/docs/studio_plan.md new file mode 100644 index 0000000..c9c4404 --- /dev/null +++ b/docs/studio_plan.md @@ -0,0 +1,118 @@ +# DrawNET Object Studio 설계서 (Phase 1) + +**Object Studio**는 단순한 이미지 업로드를 넘어, 인프라 설계에 필요한 전문적인 **에셋 관리 시스템(Asset Management System)**을 지향합니다. + +## 1. 개요 +* **목적**: 복잡한 인프라 소자(Cisco, Fortinet 등)를 패키지 단위로 관리하고, 전/후면 뷰 및 메타데이터를 정밀하게 가공하여 도면 제작 효율을 극대화함. +* **접근 주소**: `/studio` (독립형 페이지) + +--- + +## 2. 주요 워크플로우 + +### [Ingestion: 소스 로드] +1. **벌크 로드**: 사용자가 로컬 폴더를 지정(`webkitdirectory`)하거나 여러 파일을 드래그 앤 드롭하여 소스 목록에 추가. +2. **프리뷰 그리드**: 업로드된 이미지들을 썸네일 형태로 시각화하여 확인. + +### [Processing: 에셋 가공 및 속성 정의] +1. **개별/벌크 편집**: + * 선택된 오브젝트의 이름 변경, 속성 지정(아이콘 타입, 유형 등), 카테고리 매칭. + * 다중 선택 시 '제조사(Vendor)', '모델 시리즈', '환경' 등 공통 정보를 일괄 적용. +2. **PNG to SVG 하이브리드 변환**: + * PNG 소스를 벡터화(SVG Trace)하여 변환 결과 프리뷰 제공. + * 사용자가 **[원본 PNG 유지]** 또는 **[벡터 SVG 채택]** 중 선택. (SVG 채택 시 고해상도 무한 확대 및 색상 커스터마이징 가능) + +### [Packaging: 내보내기 및 등록] +1. **패키지(Pack) 생성**: 가공 완료된 에셋들을 하나의 논리적 팩(예: `Cisco_Nexus_9000_Pack`)으로 묶음. +2. **뷰 매칭 (Front/Back)**: 랙 배치를 고려하여 동일 모델의 전면 아이콘과 후면 아이콘을 하나의 에셋 데이터로 바인딩. +3. **최종 발행**: 서버 저장소(`static/assets/packs/`)에 저장하고 메인 에디터의 에셋 라이브러리에 패키지 정보 업데이트. + +--- + +## 3. 화면 UI/UX 설계 (안) + +### 레이아웃 구조 +* **좌측 (Source Panel)**: 업로드된 원본 파일 목록 및 Drag & Drop 영역. +* **중앙 (Workspace)**: 바둑판식(Grid) 에셋 프리뷰 영역 및 선택 도구. +* **우측 (Property Panel)**: 선택된 에셋(들)의 속성 입력창 (명칭, 제조사, 카테고리 등) 및 SVG 변환 비교 뷰. + +### 주요 기능 버튼 +* `[Load Folder]`: 폴더 단위 소스 로드. +* `[Batch Edit]`: 선택 항목 일괄 속성 적용. +* `[Vectorize]`: 벡터 변환 및 품질 검수 모드 진입. +* `[Build Pack]`: 최종 패키지 추출 및 서버 등록. + +--- + +## 4. 데이터 모델 확장 (Draft) + +```json +{ + "pack_id": "cisco_sw_pack", + "vendor": "Cisco", + "version": "1.0.0", + "assets": [ + { + "id": "c9300L_24T", + "label": "Catalyst 9300L 24T", + "category": "Switch", + "views": { + "front": "packs/cisco/9300l_f.svg", + "back": "packs/cisco/9300l_b.svg" + }, + "specs": { + "u_height": 1, + "depth": "350mm" + } + } + ] +} +``` + +--- + +## 6. 구현 단계별 로드맵 (Roadmap) + +안정적인 연동과 품질 관리를 위해 다음 순서로 개발을 진행합니다. + +### Phase 1: 설계영역 수용성 및 인프라 구축 (Infrastructure) +* **목표**: 스튜디오에서 만든 패키지를 설계영역에서 즉시 읽어 들일 수 있는 기반 마련. +* **주요 작업**: + * `package.json` 데이터 규격 확정. + * 설계영역 에셋 라이브러리의 '멀티 패키지 로더' 구현. + * 샘플 패키지(`Cisco_Sample`)를 통한 연동 테스트. +* **체크리스트**: `/docs/studio/phase1_checklist.md` + +### Phase 2: 스튜디오 기반 구축 (Base Setup) +* **목표**: 스튜디오 독립 페이지 및 이미지 Ingestion 엔진 구현. +* **주요 작업**: + * `/studio` 라운팅 및 전용 HTML/CSS 레이아웃 생성. + * 폴더 선택 및 드래그 앤 드롭 업로드 구현. + * 에셋 프리뷰 그리드 UI 최적화. +* **체크리스트**: `/docs/studio/phase2_checklist.md` + +### Phase 3: 스튜디오 핵심 가공 기능 (Core Processing) +* **목표**: PNG to SVG 변환 및 벌크 속성 편집 기능 구현. +* **주요 작업**: + * 벡터라이징(Trace) 엔진 탑재 및 변환 전/후 비교 UI. + * 다중 선택 기반 일괄 속성(Vendor, Category 등) 편집기. +* **체크리스트**: `/docs/studio/phase3_checklist.md` + +* **체크리스트**: `/docs/studio/phase4_checklist.md` [v] **Completed** + +--- + +## 7. 최종 구현 사양 (Final Implementation) + +### 아키텍처 (Architecture) +- **프론트엔드 모듈화**: 코드 복잡도를 제어하기 위해 관심사별로 모듈을 분리함. + - `index.js`: 엔트리 포인트 및 이벤트 바인딩. + - `renderer.js`: 모든 DOM 생성 및 UI 업데이트 담당. + - `actions.js`: 빌드, 변환, 벌크 수정 등 비즈니스 로직. + - `state.js` / `ingester.js` / `processor.js`: 상태 관리 및 데이터 처리 전담. +- **백엔드**: Flask (`api_routes.py`) 기반의 멀티 패키지 스캔 및 저장 엔진 구축. + +### 주요 기술 스택 +- **Potrace-js**: 클라이언트 사이드 고속 벡터화. +- **Flask FormData**: 대용량 이미지 및 메타데이터 일괄 전송. +- **X6 Data Integration**: `package.json` 규격을 통한 설계 영역과의 심리스한 연동. diff --git a/docs/task.md b/docs/task.md new file mode 100644 index 0000000..813be96 --- /dev/null +++ b/docs/task.md @@ -0,0 +1,43 @@ +# drawNET Development Task List (Updated 2026-03-19) + +## 📋 현재 상태 요약 +- **완료:** AntV X6 엔진 마이그레이션, DSL 동기화 기초, 정밀 배치 도구, UX 고도화. +- **핵심 성과:** **Object Studio(Phase 1-4) 구현 완료**. 이제 독립된 환경에서 자산을 제작하고 패키징하여 도면에 즉시 반영 가능. + +## ✅ 완료된 작업 (Object Studio Milestone) + +### Phase 1: 자산 인프라 및 멀티 로더 +- [x] `package.json` 데이터 규격 정의 (`vendor`, `pack_id`, `views` 등) +- [x] 백엔드 멀티 패키지 스캔 엔진 (`/assets`) 고도화 +- [x] 설계영역(Designer) 사이드바의 벤더별 패키지 자동 로딩 구현 + +### Phase 2: 스튜디오 기반 구축 +- [x] 독립된 제작 페이지 (`/studio`) 라우팅 및 전용 레이아웃 (3-Panel) +- [x] 폴더/파일 단위 대량 이미지 인제스천(Ingestion) 기능 +- [x] 작업 영역(Grid) 및 실시간 필터링 UI + +### Phase 3: 핵심 가공 및 벡터 변환 +- [x] Potrace-js 통합을 통한 PNG -> SVG 실시간 벡터라이징 +- [x] **Side-by-Side 리뷰 UI**: 원본과 변환본 비교 및 최종 포맷 채택 기능 +- [x] 벌크(Bulk) 속성 편집(Category 일괄 적용 등) 기능 + +### Phase 4: 패키징 및 최종 연동 +- [x] **/api/studio/save-pack**: 가공된 에셋 및 `package.json` 서버 저장 API +- [x] 버튼 하나로 빌드부터 설계영역 반영까지 워크플로우 자동화 +- [x] **코드 모듈화(Refactoring)**: `Renderer`, `Actions` 모듈 분리로 코드 품질 확보 +- [x] **PPTX 내보내기 (Simple Test)**: PptxGenJS 기반 도면 슬라이드 추출 기능 구현 (설계영역) + +--- + +## 🚀 향후 개발 우선순위 + +### 1단계: 엔터프라이즈 기능 확장 +- [ ] **Sub-Graph (Nesting)**: 그룹 내부 진입 및 상세 설계 드릴다운 기능 +- [ ] **Rack View 가공**: 스튜디오에서 장비의 U-Height 정보를 기반으로 한 랙 실장 뷰 연동 + +### 2단계: 분석 및 자동화 +- [ ] **Live Status Monitoring**: 실시간 Ping 체크를 통한 장애 가시화 +- [ ] **Compliance Audit**: 설계 보안 가이드 준수 여부 자동 분석 + +### 3단계: AI 어시스턴트 +- [ ] LLM 연동을 통한 자연어 기반 토폴로지 자동 생성 및 최적화 제안 diff --git a/image/logo.png b/image/logo.png new file mode 100644 index 0000000..0e92bb4 Binary files /dev/null and b/image/logo.png differ diff --git a/image/main.png b/image/main.png new file mode 100644 index 0000000..810b5d7 Binary files /dev/null and b/image/main.png differ diff --git a/localize_fonts.py b/localize_fonts.py new file mode 100644 index 0000000..676841b --- /dev/null +++ b/localize_fonts.py @@ -0,0 +1,39 @@ +import os +import re +import requests + +css_path = r'c:\project\drawNET\static\css\lib\google-fonts.css' +fonts_dir = r'c:\project\drawNET\static\fonts' + +if not os.path.exists(fonts_dir): + os.makedirs(fonts_dir) + +with open(css_path, 'r', encoding='utf-8') as f: + content = f.read() + +urls = re.findall(r'url$(https://fonts\.gstatic\.com/s/[^)]+)$', content) +urls = list(set(urls)) # Unique URLs + +url_map = {} +for i, url in enumerate(urls): + filename = url.split('/')[-1] + local_path = os.path.join(fonts_dir, filename) + print(f"Downloading {url} -> {filename}") + try: + r = requests.get(url) + if r.status_code == 200: + with open(local_path, 'wb') as f: + f.write(r.content) + url_map[url] = f"/static/fonts/{filename}" + except Exception as e: + print(f"Failed to download {url}: {e}") + +# Update CSS +new_content = content +for url, local_url in url_map.items(): + new_content = new_content.replace(url, local_url) + +with open(css_path, 'w', encoding='utf-8') as f: + f.write(new_content) + +print("Google Fonts localized successfully.") diff --git a/logic/__init__.py b/logic/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/manual/guide.md b/manual/guide.md new file mode 100644 index 0000000..5dd9029 --- /dev/null +++ b/manual/guide.md @@ -0,0 +1,58 @@ +# drawNET Premium 실무 가이드 (Advanced Engineering) + +본 가이드는 drawNET Premium 에디션을 사용하여 복잡한 네트워크 아키텍처와 시스템 토폴로지를 설계하는 엔지니어들을 위한 핵심 지침서입니다. + +--- + +## 1. 핵심 철학: "Drawing for Context, Data for Mapping" +drawNET은 단순한 다이어그램 도구가 아닙니다. **"시각적 아키텍처(Drawing)"**와 **"엔지니어링 데이터(Inventory)"**를 하나로 통합합니다. +- 모든 디자인 요소는 배후에 데이터 속성(IP, 모델, 상태 등)을 가지고 있으며, 이는 자동으로 보고서와 연동됩니다. + +--- + +## 2. 캔버스 네비게이션 +- **스마트 팬닝**: 마우스 **우측 버튼** 드래그 또는 `Space` + 드래그로 캔버스를 이동합니다. +- **정밀 줌**: `Ctrl` + 마우스 휠을 사용하여 **커서가 가리키는 지점**을 중심으로 확대/축소합니다. +- **화면 맞춤**: `Ctrl + F`를 눌러 모든 요소를 한눈에 보이게 정렬합니다. + +--- + +## 3. 지능형 자산(Asset) 활용 +- **패키지 관리**: 왼쪽 라이브러리 상단의 **필터 아이콘**을 클릭하여 필요한 제조사/분류 패키지만 활성화할 수 있습니다. +- **카테고리 토글**: 카테고리 헤더를 클릭하여 사용하지 않는 자산 목록을 접어 가독성을 높이세요. +- **Fixed Objects**: 기본 도형(`Rect`, `Circle`, `Text` 등)은 상단 고정 섹션에서 언제든 꺼내 쓸 수 있습니다. + +--- + +## 4. 고급 조작 및 편집 (Gestures) +- **즉시 복제 (Cloning)**: 노드를 선택한 후 **`Ctrl` + 드래그**하면 고스트 효과와 함께 즉시 복제본이 생성됩니다. +- **중첩 선택 (Recursive Select)**: 복잡하게 겹쳐진 구간에서 **`Ctrl` + 우클릭**을 하면 해당 지점의 모든 객체 목록이 나타나 원하는 레이어를 정확히 선택할 수 있습니다. +- **포맷 페인터 (Style Painter)**: 한 객체의 스타일을 다른 객체에 동일하게 적용하려면 `Ctrl + Shift + C`(복사) -> `Ctrl + Shift + V`(붙여넣기)를 사용하세요. + +--- + +## 5. 레이어 시스템 (Standard vs Logical) +drawNET Premium은 목적에 따른 두 가지 레이어 유형을 제공합니다. +- **Standard Layer (물리)**: 실제 장비 배치 및 물리적 연결을 설계합니다. +- **Logical Layer (논리)**: 보안 구역, 데이터 흐름, 서비스 연관도 등 추상적인 개념을 설계합니다. 이 레이어에서는 복제 시 데이터의 논리적 무결성이 보호됩니다. + +--- + +## 6. 스마트 라우팅 (Connectivity) +- **Manhattan (`Shift + A`)**: 장애물을 회피하는 직각 경로로 자동 연결합니다. +- **Straight (`Shift + S`)**: 최단 거리 직선으로 연결합니다. +- **선 스타일 전환**: 이미 그려진 선을 선택하고 `Alt + M`(Manhattan) 또는 `Alt + L`(Straight)로 즉시 변경할 수 있습니다. +- **연결 해제**: 두 노드를 선택하고 `Shift + D`를 누르면 사이의 모든 연결이 제거됩니다. + +--- + +## 7. 전문 보고서 및 인벤토리 추출 +설계가 완료되면 상단 메뉴를 통해 다음 형식으로 성과물을 내보낼 수 있습니다. +- **PPTX 보고서**: 각 노드별 상세 설명과 인벤토리 통계가 포함된 고품질 발표 자료를 생성합니다. +- **Excel 인벤토리**: 모든 자산의 상세 속성(IP, 모델, 태그 등)을 집계하여 관리 대장으로 활용합니다. +- **Vectored Export**: PNG/SVG/PDF를 통해 깨짐 없는 고해상도 아키텍처 이미지를 확보합니다. + +--- + +*최종 업데이트: 2026-03-22* +*drawNET Engineering Team* diff --git a/manual/rich_card.md b/manual/rich_card.md new file mode 100644 index 0000000..aca0bce --- /dev/null +++ b/manual/rich_card.md @@ -0,0 +1,50 @@ +# 리치 텍스트 카드(Rich Text Card) 활용 가이드 🃏 + +'리치 텍스트 카드'는 아키텍처 도면의 **설명(구축 내역)**이나 **범례(Legend)**를 전문적으로 표현하기 위해 설계된 스마트 객체입니다. + +--- + +## 1. 기본 사용법 +1. **에셋 선택**: 왼쪽 '고정 오브젝트(Fixed Objects)' 목록 최하단의 **'리치 텍스트 카드'**를 캔버스로 드래그합니다. +2. **속성 편집**: 오브젝트를 선택하면 오른쪽 사이드바에 편집 메뉴가 나타납니다. +3. **내용 입력**: '내용' 칸에 텍스트를 입력하면 실시간으로 카드 본문에 반영됩니다. (줄바꿈 지원) + +--- + +## 2. 카드 유형별 특징 + +### ❶ 번호 매기기 (Numbered List) +- **용도**: 구축 내역, 작업 순서, 시스템 특징 나열 등. +- **특징**: 각 줄마다 헤더 색상과 동일한 **파란색 번호 박스**가 자동으로 생성됩니다. +- **팁**: 단순히 엔터(`\n`)로 줄을 나누기만 하면 번호가 순차적으로 부여됩니다. + +### ❷ 불렛 기호 (Bullet Points) +- **용도**: 일반적인 특징 설명, 비고 사항 등. +- **특징**: 깔끔한 원형(`●`) 불렛 기호가 각 줄 앞에 붙습니다. + +### ❸ 범례 모드 (Legend Mode) ⭐ +- **용도**: 도면 하단의 기호 설명(범례) 작성. +- **특징**: 텍스트 기반의 특수 문법을 사용하여 **아이콘을 포함한 범례**를 자동으로 렌더링합니다. + +#### 💡 범례 모드 문법 (Syntax): +본문에 아래와 같이 입력하세요: +- `- (circle:#색상코드) 설명` : 지정된 색상의 **원형** 아이콘 생성 +- `- (rect:#색상코드) 설명` : 지정된 색상의 **사각형** 아이콘 생성 +- `- (line:#색상코드) 설명` : 지정된 색상의 **가로 선** 아이콘 생성 + +> **입력 예시:** +> `- (circle:#10b981) 가동 중인 시스템` +> `- (rect:#ef4444) 장애 발생 구역` +> `- (line:#f97316) 외부 연동 구간` + +--- + +## 3. 스타일 커스터마이징 +- **헤더 제목**: 도면의 맥락에 맞게 '구축 내역', '범례' 등으로 수정하세요. +- **테마 색상**: 헤더의 색상 피커를 사용하여 프로젝트 테마에 맞게 색상을 변경할 수 있습니다. (테두리 색상도 자동으로 동기화됩니다.) +- **잠금 기능**: 배치가 완료된 후 'Locked'를 체크하면 의도치 않은 이동이나 삭제를 방지할 수 있습니다. + +--- + +*최종 수정일: 2026-03-21* +*drawNET Design System* diff --git a/manual/shortcuts.md b/manual/shortcuts.md new file mode 100644 index 0000000..a020058 --- /dev/null +++ b/manual/shortcuts.md @@ -0,0 +1,69 @@ +# drawNET Keyboard Shortcuts (Premium Edition) + +이 문서는 drawNET의 실제 시스템 설정(`hotkeys.json`)과 일치하는 최신 단축키 안내를 포함합니다. + +## 1. 기본 조작 및 뷰 (Navigation & View) + +| 단축키 | 기능 | 설명 | +| :--- | :--- | :--- | +| `Ctrl` + `F` | 화면 맞춤 (Fit) | 모든 노드가 화면에 들어오도록 줌 및 정렬 조정 | +| `Ctrl` + `+` / `=` | 확대 (Zoom In) | 캔버스 확대 | +| `Ctrl` + `-` | 축소 (Zoom Out) | 캔버스 축소 | +| `Ctrl` + `Mouse Wheel` | 정밀 줌 | **마우스 커서 위치**를 중심으로 확대/축소 | +| `Alt` + `0` | 인벤토리 패널 | 자산 수량 집계 패널 토글 | +| `Alt` + `1` **또는** `Alt` + `Enter` | 속성 사이드바 | 선택된 오브젝트의 상세 속성 편집창 토글 | +| `Alt` + `9` | 레이어 패널 | 논리적 계층 관리 및 가시성 제어 패널 토글 | +| `Space` + `Drag` | 캔버스 팬닝 | 캔버스를 상하좌우로 자유롭게 이동 | +| **`Right Click`** + `Drag` | **스마트 팬닝** | 마우스 우측 버튼 드래그로 즉시 팬닝 (문맥 메뉴와 구분됨) | +| **`Ctrl` + `Right Click`** | **재귀적 오브젝트 선택** | 겹친 지점의 모든 오브젝트 목록을 보여줌 (Photoshop 스타일) | + +## 2. 편집 및 수정 (Editing) + +| 단축키 | 기능 | 설명 | +| :--- | :--- | :--- | +| `Delete` / `Backspace` | 삭제 | 선택된 노드 또는 선을 삭제 | +| `Esc` | 모든 선택 해제 | 선택된 모든 요소를 해제하고 속성 창을 닫음 | +| `Ctrl` + `Z` | 실행 취소 (Undo) | 마지막 작업 취소 | +| `Ctrl` + `Y` / `Ctrl` + `Shift` + `Z` | 다시 실행 (Redo) | 취소한 작업 다시 실행 | +| `Ctrl` + `C` | 복사 (Copy) | 선택된 오브젝트들을 클립보드에 복사 | +| `Ctrl` + `V` | 붙여넣기 (Paste) | 복사된 오브젝트들을 마우스 위치에 붙여넣기 | +| **`Ctrl` + `Drag`** | **즉시 복제 (Cloning)** | 선택된 노드를 드래그하여 즉시 복제 (고스트 효과 동반) | +| `Ctrl` + `D` | 제자리 복제 (Duplicate) | 선택된 오브젝트를 제자리에 즉시 복제 | +| `Ctrl` + `G` | 그룹화 (Group) | 선택된 노드들을 하나의 그룹으로 묶음 | +| `F2` | 이름 변경 | 선택된 오브젝트의 **속성창 라벨 입력칸으로 포커스 이동** | +| `Shift` + `A` | 자동 연결 (Manhattan) | 선택된 노드 사이를 장애물 회피 경로로 연결 | +| `Shift` + `S` | 직선 연결 (Straight) | 선택된 노드 사이를 직선으로 연결 | +| `Alt` + `M` | 선 스타일 전환 | 선택된 선을 Manhattan(자동) 스타일로 변경 | +| `Alt` + `L` | 선 스타일 전환 | 선택된 선을 Straight(직선) 스타일로 변경 | +| `Shift` + `D` | 연결 끊기 | 선택된 노드들 사이의 모든 연결 제거 | +| `[` | 뒤로 보내기 | 선택된 오브젝트를 시각적으로 한 단계 뒤로 보냄 | +| `]` | 앞으로 가져오기 | 선택된 오브젝트를 시각적으로 한 단계 앞으로 가져옴 | +| `Ctrl` + `L` | 오브젝트 잠금 | 선택된 오브젝트의 이동 및 삭제 방지 (시각적 점선 표시) | +| **`Ctrl` + `Shift` + `L`** | 자동 레이아웃 | 노드들을 계층 구조에 따라 자동으로 재배치 | +| **`Ctrl` + `Shift` + `C`** | **포맷 복사** | 선택된 노드/엣지의 스타일(색상, 크기 등)을 복사 | +| **`Ctrl` + `Shift` + `V`** | **포맷 붙여넣기** | 복사한 스타일을 선택한 대상에 즉시 적용 | + +## 3. 정렬 및 배치 (Alignment & Distribution) + +| 단축키 | 기능 | 설명 | +| :--- | :--- | :--- | +| `Shift` + `1` ~ `4` | 정렬 (Align) | 상단, 하단, 왼쪽, 오른쪽 정렬 | +| `Shift` + `5` ~ `6` | 중앙 정렬 (Center) | 수직 중앙(Middle), 수평 중앙(Center) 정렬 | +| `Shift` + `7` ~ `8` | 균등 배치 (Distribute) | 가로 간격 동일하게, 세로 간격 동일하게 배치 | + +## 4. 노드 이동 (Movement) + +| 단축키 | 기능 | 설명 | +| :--- | :--- | :--- | +| `Arrow Keys` | 미세 이동 | 선택된 노드를 5px 단위로 정밀 이동 | +| `Shift` + `Arrow Keys` | 격자 이동 | 선택된 노드를 그리드 설정 간격으로 이동 | + +## 5. 파일 관리 (File Management) + +| 단축키 | 기능 | 설명 | +| :--- | :--- | :--- | +| `Ctrl` + `S` | 저장 (Export) | 현재 상태를 `.dnet` JSON 파일로 내보내기 | +| `Ctrl` + `O` | 불러오기 (Import) | `.dnet` 파일 불러오기 | + +--- + diff --git a/requirements-dev.txt b/requirements-dev.txt new file mode 100644 index 0000000..c2fea87 --- /dev/null +++ b/requirements-dev.txt @@ -0,0 +1,4 @@ +# Development Dependencies for drawNET +# Required for compiling Python to binary (.pyd/.so) +Cython>=3.0.0 +setuptools>=68.0.0 diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..cff9aba --- /dev/null +++ b/requirements.txt @@ -0,0 +1,6 @@ +Flask>=3.0.0 +requests>=2.31.0 +gunicorn>=21.2.0 +python-dotenv>=1.0.0 +cryptography>=42.0.0 +paramiko>=3.4.0 diff --git a/routes/__init__.py b/routes/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/routes/main_routes.py b/routes/main_routes.py new file mode 100644 index 0000000..6cc322d --- /dev/null +++ b/routes/main_routes.py @@ -0,0 +1,20 @@ +import os +from flask import Blueprint, render_template, send_from_directory + +main_bp = Blueprint('main', __name__) + +@main_bp.route('/') +def index(): + return render_template('index.html') + +@main_bp.route('/studio') +def studio(): + return render_template('studio.html') + +@main_bp.route('/admin/license') +def admin_license(): + return render_template('admin_license.html') + +@main_bp.route('/manual/') +def serve_manual(filename): + return send_from_directory(os.path.join(os.getcwd(), 'manual'), filename) diff --git a/static/assets.json b/static/assets.json new file mode 100644 index 0000000..628e86f --- /dev/null +++ b/static/assets.json @@ -0,0 +1,70 @@ +{ + "categories": [ + { + "id": "Network", + "label": "Network Devices", + "icon": "router.svg" + }, + { + "id": "Security", + "label": "Security & Firewalls", + "icon": "firewall.svg" + } + ], + "assets": [ + { + "id": "router", + "type": "Router", + "category": "Network", + "label": "Standard Router", + "path": "router.svg", + "format": "svg", + "vendor": "Cisco" + }, + { + "id": "switch", + "type": "Switch", + "category": "Network", + "label": "L3 Switch", + "path": "switch.svg", + "format": "svg", + "vendor": "Cisco" + }, + { + "id": "firewall_cisco", + "type": "Firewall", + "category": "Security", + "label": "Cisco Firewall", + "path": "firewall.svg", + "format": "svg", + "vendor": "Cisco" + }, + { + "id": "firewall_png", + "type": "F/W", + "category": "Security", + "label": "Legacy F/w", + "path": "firewall.png", + "format": "png", + "vendor": "Generic" + }, + { + "id": "server", + "type": "Server", + "category": "Compute", + "label": "Enterprise Server", + "path": "server.svg", + "format": "svg", + "vendor": "Generic" + }, + { + "id": "cloud", + "type": "Internet", + "category": "External", + "label": "External Cloud", + "path": "cloud.svg", + "format": "svg", + "vendor": "Generic" + } + ] +} diff --git a/static/assets/cloud.svg b/static/assets/cloud.svg new file mode 100644 index 0000000..6c09439 --- /dev/null +++ b/static/assets/cloud.svg @@ -0,0 +1,3 @@ + diff --git a/static/assets/firewall.png b/static/assets/firewall.png new file mode 100644 index 0000000..f3ab2cf Binary files /dev/null and b/static/assets/firewall.png differ diff --git a/static/assets/firewall.svg b/static/assets/firewall.svg new file mode 100644 index 0000000..ae0b2fb --- /dev/null +++ b/static/assets/firewall.svg @@ -0,0 +1,4 @@ + diff --git a/static/assets/group.png b/static/assets/group.png new file mode 100644 index 0000000..8553d26 Binary files /dev/null and b/static/assets/group.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_cloud.png b/static/assets/packs/cisco_base_pack/cisco_cloud.png new file mode 100644 index 0000000..13d770f Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_cloud.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_contentservicerouter.png b/static/assets/packs/cisco_base_pack/cisco_contentservicerouter.png new file mode 100644 index 0000000..becee94 Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_contentservicerouter.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_database.png b/static/assets/packs/cisco_base_pack/cisco_database.png new file mode 100644 index 0000000..9f77ec4 Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_database.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_firewall.png b/static/assets/packs/cisco_base_pack/cisco_firewall.png new file mode 100644 index 0000000..37cad4e Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_firewall.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_firewallservicemodule.png b/static/assets/packs/cisco_base_pack/cisco_firewallservicemodule.png new file mode 100644 index 0000000..fc4f48b Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_firewallservicemodule.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_generic.png b/static/assets/packs/cisco_base_pack/cisco_generic.png new file mode 100644 index 0000000..ef4d78e Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_generic.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_iosslb.png b/static/assets/packs/cisco_base_pack/cisco_iosslb.png new file mode 100644 index 0000000..97d2650 Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_iosslb.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_l2_100base.png b/static/assets/packs/cisco_base_pack/cisco_l2_100base.png new file mode 100644 index 0000000..e01659f Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_l2_100base.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_laptop.png b/static/assets/packs/cisco_base_pack/cisco_laptop.png new file mode 100644 index 0000000..e45b5d5 Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_laptop.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_mgx8000.png b/static/assets/packs/cisco_base_pack/cisco_mgx8000.png new file mode 100644 index 0000000..b6170b0 Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_mgx8000.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_printer.png b/static/assets/packs/cisco_base_pack/cisco_printer.png new file mode 100644 index 0000000..1ebf37c Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_printer.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_wirelessrouter.png b/static/assets/packs/cisco_base_pack/cisco_wirelessrouter.png new file mode 100644 index 0000000..cc25b97 Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_wirelessrouter.png differ diff --git a/static/assets/packs/cisco_base_pack/cisco_wwwserver.png b/static/assets/packs/cisco_base_pack/cisco_wwwserver.png new file mode 100644 index 0000000..f7bfc72 Binary files /dev/null and b/static/assets/packs/cisco_base_pack/cisco_wwwserver.png differ diff --git a/static/assets/packs/cisco_base_pack/package.json b/static/assets/packs/cisco_base_pack/package.json new file mode 100644 index 0000000..e4cd54c --- /dev/null +++ b/static/assets/packs/cisco_base_pack/package.json @@ -0,0 +1,125 @@ +{ + "id": "cisco_base_pack", + "name": "cisco_pack", + "vendor": "Unknown", + "version": "1.0.0", + "assets": [ + { + "id": "cisco_firewall", + "label": "Cisco Firewall", + "category": "Security", + "views": { + "icon": "cisco_firewall.png", + "front": "cisco_firewall.png" + } + }, + { + "id": "cisco_firewallservicemodule", + "label": "Cisco Firewall service module", + "category": "Security", + "views": { + "icon": "cisco_firewallservicemodule.png", + "front": "cisco_firewallservicemodule.png" + } + }, + { + "id": "cisco_generic", + "label": "Cisco Generic", + "category": "Other", + "views": { + "icon": "cisco_generic.png", + "front": "cisco_generic.png" + } + }, + { + "id": "cisco_iosslb", + "label": "Cisco Iosslb", + "category": "Network", + "views": { + "icon": "cisco_iosslb.png", + "front": "cisco_iosslb.png" + } + }, + { + "id": "cisco_laptop", + "label": "Cisco Laptop", + "category": "Device", + "views": { + "icon": "cisco_laptop.png", + "front": "cisco_laptop.png" + } + }, + { + "id": "cisco_printer", + "label": "Cisco Printer", + "category": "Device", + "views": { + "icon": "cisco_printer.png", + "front": "cisco_printer.png" + } + }, + { + "id": "cisco_wirelessrouter", + "label": "Cisco Wirelessrouter", + "category": "Network", + "views": { + "icon": "cisco_wirelessrouter.png", + "front": "cisco_wirelessrouter.png" + } + }, + { + "id": "cisco_wwwserver", + "label": "Cisco Wwwserver", + "category": "Device", + "views": { + "icon": "cisco_wwwserver.png", + "front": "cisco_wwwserver.png" + } + }, + { + "id": "cisco_contentservicerouter", + "label": "Cisco Contentservicerouter", + "category": "Network", + "views": { + "icon": "cisco_contentservicerouter.png", + "front": "cisco_contentservicerouter.png" + } + }, + { + "id": "cisco_database", + "label": "Cisco Database", + "category": "DBMS", + "views": { + "icon": "cisco_database.png", + "front": "cisco_database.png" + } + }, + { + "id": "cisco_mgx8000", + "label": "Cisco Mgx8000", + "category": "Network", + "views": { + "icon": "cisco_mgx8000.png", + "front": "cisco_mgx8000.png" + } + }, + { + "id": "cisco_l2_100base", + "label": "Cisco L2 ", + "category": "Network", + "views": { + "icon": "cisco_l2_100base.png", + "front": "cisco_l2_100base.png" + } + }, + { + "id": "cisco_cloud", + "label": "Cisco Cloud", + "category": "Cloud", + "views": { + "icon": "cisco_cloud.png", + "front": "cisco_cloud.png" + } + } + ] +} \ No newline at end of file diff --git a/static/assets/packs/sample_cisco/package.json b/static/assets/packs/sample_cisco/package.json new file mode 100644 index 0000000..0400e8c --- /dev/null +++ b/static/assets/packs/sample_cisco/package.json @@ -0,0 +1,24 @@ +{ + "id": "sample_cisco", + "name": "Cisco Enterprise Pack", + "vendor": "Cisco", + "version": "1.0.0", + "assets": [ + { + "id": "cisco_router", + "label": "Integrated Services Router", + "category": "Network", + "views": { + "icon": "router.svg" + } + }, + { + "id": "cisco_switch", + "label": "Catalyst Switch", + "category": "Network", + "views": { + "icon": "switch.svg" + } + } + ] +} diff --git a/static/assets/packs/sample_cisco/router.svg b/static/assets/packs/sample_cisco/router.svg new file mode 100644 index 0000000..366b104 --- /dev/null +++ b/static/assets/packs/sample_cisco/router.svg @@ -0,0 +1,5 @@ + diff --git a/static/assets/packs/sample_cisco/switch.svg b/static/assets/packs/sample_cisco/switch.svg new file mode 100644 index 0000000..c3c4300 --- /dev/null +++ b/static/assets/packs/sample_cisco/switch.svg @@ -0,0 +1,5 @@ + diff --git a/static/assets/router.svg b/static/assets/router.svg new file mode 100644 index 0000000..366b104 --- /dev/null +++ b/static/assets/router.svg @@ -0,0 +1,5 @@ + diff --git a/static/assets/server.svg b/static/assets/server.svg new file mode 100644 index 0000000..d92fc61 --- /dev/null +++ b/static/assets/server.svg @@ -0,0 +1,7 @@ + diff --git a/static/assets/switch.svg b/static/assets/switch.svg new file mode 100644 index 0000000..c3c4300 --- /dev/null +++ b/static/assets/switch.svg @@ -0,0 +1,5 @@ + diff --git a/static/css/modules/analysis.css b/static/css/modules/analysis.css new file mode 100644 index 0000000..f0e146b --- /dev/null +++ b/static/css/modules/analysis.css @@ -0,0 +1,120 @@ +/* analysis.css - Theme-aware styles for Inventory and Analysis Panels */ + +.inventory-panel { + position: absolute; + bottom: 24px; + right: 24px; + width: 260px; + max-height: 320px; + z-index: 1000; + padding: 16px; + display: flex; + flex-direction: column; + gap: 12px; + pointer-events: auto !important; +} + +.inventory-header { + display: flex; + align-items: center; + gap: 10px; + font-size: 13px; + font-weight: 800; + color: var(--text-color); + border-bottom: 1px solid var(--panel-border); + padding-bottom: 10px; + letter-spacing: -0.02em; +} + +.inventory-header i { + color: var(--accent-color); + font-size: 14px; +} + +.inventory-list { + display: flex; + flex-direction: column; + gap: 6px; + overflow-y: auto; + padding-right: 4px; +} + +/* Custom Scrollbar for Inventory */ +.inventory-list::-webkit-scrollbar { + width: 4px; +} +.inventory-list::-webkit-scrollbar-track { + background: transparent; +} +.inventory-list::-webkit-scrollbar-thumb { + background: var(--panel-border); + border-radius: 4px; +} + +.inventory-item { + display: flex; + justify-content: space-between; + align-items: center; + background: var(--item-bg); + padding: 8px 14px 8px 18px; + border-radius: 12px; + border: 1px solid var(--panel-border); + transition: all 0.2s ease; +} + +.inventory-item:hover { + background: var(--item-hover-bg); + transform: translateX(-2px); +} + +.inventory-item .lbl { + font-weight: 600; + color: var(--sub-text); + font-size: 11px; + text-transform: capitalize; +} + +.inventory-item .val { + font-weight: 800; + color: var(--accent-color); + background: rgba(59, 130, 246, 0.1); + padding: 2px 8px; + border-radius: 6px; + font-size: 12px; + min-width: 24px; + text-align: center; +} + +.inventory-footer { + margin-top: auto; + padding-top: 12px; + border-top: 1px solid var(--panel-border); +} + +.btn-export-bom { + width: 100%; + padding: 10px; + background: var(--accent-color); + color: white; + border: none; + border-radius: 12px; + font-size: 11px; + font-weight: 800; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: all 0.2s ease; + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); +} + +.btn-export-bom:hover { + background: #2563eb; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); +} + +.btn-export-bom i { + font-size: 12px; +} diff --git a/static/css/modules/animations.css b/static/css/modules/animations.css new file mode 100644 index 0000000..69f0113 --- /dev/null +++ b/static/css/modules/animations.css @@ -0,0 +1,32 @@ +/* Animations */ +@keyframes fadeInUp { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + + +.animate-up { + animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; +} + +/* Edge Flow Animation */ +@keyframes drawnet-flow { + from { stroke-dashoffset: 20; } + to { stroke-dashoffset: 0; } +} + +.flow-animation path { + stroke-dasharray: 5, 5; + animation: drawnet-flow 1s linear infinite; +} + +/* Modal Animations */ +@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } +@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } +@keyframes scaleUp { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } +@keyframes scaleDown { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.9) translateY(20px); } } + +.animate-fade-in { animation: fadeIn 0.3s ease forwards; } +.animate-fade-out { animation: fadeOut 0.2s ease forwards; } +.animate-scale-up { animation: scaleUp 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; } +.animate-scale-down { animation: scaleDown 0.3s ease forwards; } diff --git a/static/css/modules/assets.css b/static/css/modules/assets.css new file mode 100644 index 0000000..a0e3fb2 --- /dev/null +++ b/static/css/modules/assets.css @@ -0,0 +1,175 @@ +.asset-library { + padding: 0 16px; + flex: 1; + overflow-y: auto; + overflow-x: hidden; +} + +.asset-library h3 { + font-size: 10px; + text-transform: uppercase; + letter-spacing: 1.5px; + color: var(--sub-text); + margin: 24px 16px 12px; + white-space: nowrap; + font-weight: 800; +} + +.sidebar.collapsed .asset-library h3 { + opacity: 0; +} + +.asset-category { + margin-bottom: 8px; +} + +.category-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: var(--item-bg); + border-radius: 12px; + cursor: pointer; + transition: background 0.2s; +} + +.category-header:hover { + background: var(--item-hover-bg); +} + +.category-header span { + font-size: 11px; + font-weight: 800; + color: var(--text-color); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.category-header i { + font-size: 10px; + color: var(--sub-text); + transition: transform 0.3s; +} + +.asset-category.active .category-header i { + transform: rotate(180deg); +} + +.category-content { + display: none; + padding: 12px 0; +} + +.asset-category.active .category-content { + display: block; +} + +.sidebar.collapsed .category-content { + display: none !important; /* Always hide content in sidebar when collapsed */ +} + +.asset-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + padding: 0 8px; +} + +.asset-item { + background: var(--item-bg); + border: 1px solid var(--panel-border); + padding: 12px; + border-radius: 16px; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + cursor: grab; + transition: all 0.3s; + min-width: 0; +} + +.asset-item span { + font-size: 9px; + color: var(--text-color); + text-align: center; + word-break: break-all; + line-height: 1.3; + opacity: 0.8; +} + +.sidebar.collapsed .asset-item span { + display: none; +} + +.asset-item:hover { + background: var(--item-hover-bg); + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(0,0,0,0.05); +} + +.asset-item img { + pointer-events: none; +} + +/* Fixed Category Optimization */ +.fixed-category .asset-grid { + grid-template-columns: repeat(4, 1fr); + gap: 10px; +} + +.fixed-category .asset-item { + padding: 8px; + height: 44px; + width: 44px; + justify-content: center; +} + +.fixed-category .asset-item span { + display: none; +} + +.fixed-category .asset-item i, +.fixed-category .asset-item img { + margin-bottom: 0 !important; +} + +.category-divider { + height: 1px; + background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent); + margin: 20px 0; + position: relative; +} + +.category-divider::after { + content: '-'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--sidebar-bg); + padding: 0 10px; + font-size: 10px; + color: var(--sub-text); + font-weight: 800; +} +.asset-group-label { + font-size: 9px; + font-weight: 800; + color: var(--sub-text); + padding: 12px 16px 6px; + text-transform: uppercase; + letter-spacing: 0.8px; + opacity: 0.7; + display: flex; + align-items: center; + gap: 8px; +} + +.asset-group-label::after { + content: ''; + flex: 1; + height: 1px; + background: rgba(255,255,255,0.05); +} diff --git a/static/css/modules/base.css b/static/css/modules/base.css new file mode 100644 index 0000000..6f8663f --- /dev/null +++ b/static/css/modules/base.css @@ -0,0 +1,140 @@ +:root { + --bg-color: #f8fafc; + --bg-rgb: 248, 250, 252; + --text-color: #0f172a; + --accent-color: #3b82f6; + --panel-bg: rgba(255, 255, 255, 0.7); + --panel-border: rgba(255, 255, 255, 0.5); + --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); + --sub-text: #64748b; + --canvas-bg: #ffffff; + --grid-color: rgba(0, 0, 0, 0.05); + --grid-size: 20px; + --item-bg: rgba(255, 255, 255, 0.4); + --item-hover-bg: #e2e8f0; +} + +[data-theme="dark"] { + --bg-color: #020617; + --bg-rgb: 2, 6, 23; + --text-color: #f8fafc; + --accent-color: #3b82f6; + --panel-bg: rgba(15, 23, 42, 0.8); + --panel-border: rgba(255, 255, 255, 0.1); + --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); + --sub-text: #cbd5e1; + --canvas-bg: #1e293b; + --grid-color: rgba(255, 255, 255, 0.1); + --grid-size: 20px; + --item-bg: rgba(255, 255, 255, 0.05); + --item-hover-bg: rgba(255, 255, 255, 0.1); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Inter', -apple-system, sans-serif; + background-color: var(--bg-color); + color: var(--text-color); + height: 100vh; + overflow: hidden; +} + +.glass-panel { + background: var(--panel-bg); + backdrop-filter: blur(12px) saturate(180%); + border: 1px solid var(--panel-border); + box-shadow: var(--shadow); + border-radius: 32px; +} + +/* Markdown Rendering Styles */ +.markdown-body { + font-size: 14px; + line-height: 1.7; + color: var(--text-color); +} + +.markdown-body h1, .markdown-body h2, .markdown-body h3 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 800; +} + +.markdown-body h1 { font-size: 1.8em; } +.markdown-body h2 { + font-size: 1.4em; + border-bottom: 1px solid var(--panel-border); + padding-bottom: 8px; + color: var(--accent-color); +} +.markdown-body h3 { font-size: 1.2em; } + +.markdown-body p { margin-bottom: 16px; color: var(--sub-text); } + +.markdown-body ul, .markdown-body ol { + padding-left: 20px; + margin-bottom: 16px; +} + +.markdown-body li { margin-bottom: 8px; } + +.markdown-body blockquote { + padding: 12px 20px; + margin: 16px 0; + background: var(--item-bg); + border-left: 4px solid var(--accent-color); + border-radius: 4px; + font-style: italic; + color: var(--sub-text); +} + +.markdown-body code { + background: var(--item-bg); + padding: 2px 6px; + border-radius: 4px; + font-family: 'JetBrains Mono', 'Fira Code', monospace; + font-size: 0.9em; + color: var(--accent-color); +} + +.markdown-body pre { + background: var(--item-bg); + padding: 16px; + border-radius: 12px; + overflow-x: auto; + margin-bottom: 16px; +} + +.markdown-body table { + width: 100%; + border-collapse: collapse; + margin-bottom: 24px; + border: 1px solid var(--panel-border); + border-radius: 12px; + overflow: hidden; +} + +.markdown-body th, .markdown-body td { + padding: 12px 16px; + border-bottom: 1px solid var(--panel-border); + text-align: left; +} + +.markdown-body th { + background: var(--item-bg); + font-weight: 800; + color: var(--accent-color); +} + +.markdown-body img { + max-width: 100%; + border-radius: 16px; + border: 1px solid var(--panel-border); + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + margin: 16px 0; +} diff --git a/static/css/modules/editor.css b/static/css/modules/editor.css new file mode 100644 index 0000000..63ef8a3 --- /dev/null +++ b/static/css/modules/editor.css @@ -0,0 +1,49 @@ +.editor-panel { + position: absolute; + bottom: 24px; + right: 24px; + width: 480px; + min-width: 400px; + height: 200px; + z-index: 90; + overflow: hidden; + display: flex; + flex-direction: column; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transform-origin: bottom right; +} + +.editor-panel.collapsed { + height: 40px; /* Header only height */ + opacity: 0.8; +} + +.editor-header { + padding: 12px 25px; + border-bottom: 1px solid var(--panel-border); + display: flex; + justify-content: space-between; + align-items: center; +} + +.editor-header span { + font-size: 10px; + font-weight: 900; + color: var(--sub-text); + text-transform: uppercase; + letter-spacing: 1px; +} + +#editor { + flex: 1; + width: 100%; + padding: 20px; + background: transparent; + border: none; + resize: none; + font-family: 'JetBrains Mono', 'Fira Code', monospace; + font-size: 13px; + color: var(--text-color); + outline: none; + line-height: 1.6; +} diff --git a/static/css/modules/flyout.css b/static/css/modules/flyout.css new file mode 100644 index 0000000..c3e2b56 --- /dev/null +++ b/static/css/modules/flyout.css @@ -0,0 +1,148 @@ +.sidebar.collapsed .category-header { + display: none; +} + +.category-collapsed-icon { + display: none; + width: 100%; + padding: 12px 0; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s; + position: relative; + border-radius: 12px; +} + +.sidebar.collapsed .category-collapsed-icon { + display: flex; + z-index: 10; +} + +.category-collapsed-icon:hover { + background: white; + transform: scale(1.1); +} + +/* Flyout Panel */ +.category-flyout { + position: fixed; + left: 90px; + top: auto; + width: 280px; + max-height: 80vh; + z-index: 9999; + display: flex; + flex-direction: column; + padding: 20px; + opacity: 0; + transform: translateX(-10px); + transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + pointer-events: none; +} + +.category-flyout.active { + opacity: 1; + transform: translateX(0); + pointer-events: all; +} + +.flyout-menu { + position: absolute; + bottom: 80px; + left: 20px; + width: 220px; + padding: 12px; + z-index: 1000; + box-shadow: 0 10px 30px rgba(0,0,0,0.2); + border: 1px solid var(--panel-border); + flex-direction: column; + gap: 2px; +} + +.flyout-section { + display: flex; + flex-direction: column; + gap: 2px; +} + +.section-label { + font-size: 9px; + font-weight: 800; + color: var(--sub-text); + text-transform: uppercase; + letter-spacing: 1px; + padding: 8px 14px 4px; + opacity: 0.6; +} + +.flyout-item { + width: 100%; + padding: 10px 14px; + border: none; + background: transparent; + color: var(--text-color); + font-size: 13px; + font-weight: 600; + text-align: left; + display: flex; + align-items: center; + gap: 12px; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; +} + +.flyout-item i { + width: 16px; + text-align: center; + color: var(--sub-text); +} + +.flyout-item:hover { + background: var(--accent-color); + color: white; +} + +.flyout-item:hover i { + color: white; +} + +.flyout-item.primary { + color: var(--accent-color); +} + +.flyout-item.primary:hover { + background: var(--accent-color); + color: white; +} + +.divider { + height: 1px; + background: var(--panel-border); + margin: 8px 4px; +} +.flyout-header { + margin-bottom: 15px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(0,0,0,0.05); +} + +.flyout-header strong { + font-size: 14px; + display: block; +} + +.flyout-header small { + font-size: 10px; + color: #94a3b8; + text-transform: uppercase; +} + +.flyout-grid { + overflow-y: auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + padding-right: 5px; +} diff --git a/static/css/modules/header.css b/static/css/modules/header.css new file mode 100644 index 0000000..4d0c980 --- /dev/null +++ b/static/css/modules/header.css @@ -0,0 +1,139 @@ +.header { + position: absolute; + top: 24px; + right: 24px; + height: 80px; + z-index: 90; + padding: 0 30px; + display: flex; + align-items: center; + justify-content: space-between; + transition: all 0.3s ease; +} + +.header-compact { + height: 50px; + padding: 0 20px; + top: 15px; + right: 24px; +} + +.header-compact h2 { + font-size: 13px !important; +} + +.header-compact p { + font-size: 9px !important; +} + +.header-info { + display: flex; + flex-direction: column; +} + +.header-status { + display: flex; + align-items: center; + gap: 12px; + background: rgba(16, 185, 129, 0.1); + padding: 4px 12px; + border-radius: 20px; + border: 1px solid rgba(16, 185, 129, 0.2); +} + +.help-circle-btn { + background: transparent; + border: none; + color: #047857; + font-size: 16px; + cursor: pointer; + transition: all 0.2s ease; + padding: 2px; + display: flex; + align-items: center; + justify-content: center; +} + +.help-circle-btn:hover { + color: #10b981; + transform: scale(1.1); +} + +.status-dot { + width: 6px; + height: 6px; + border-radius: 50%; +} + +.status-dot.online { + background: #10b981; + box-shadow: 0 0 8px #10b981; +} + +.header h2 { + font-size: 14px; + font-weight: 800; +} + +.header-btns { + display: flex; + gap: 15px; +} + +.btn { + padding: 12px 24px; + border-radius: 16px; + font-size: 12px; + font-weight: 700; + cursor: pointer; + border: none; + transition: all 0.2s; +} + +.btn-secondary { + background: var(--item-bg); + color: var(--sub-text); +} + +.btn-primary { + background: var(--accent-color); + color: white; + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); +} + +.header-search { + flex: 1; + max-width: 400px; + margin: 0 40px; + background: rgba(255, 255, 255, 0.2); + border: 1px solid var(--panel-border); + border-radius: 20px; + padding: 6px 15px; + display: flex; + align-items: center; + gap: 10px; + transition: all 0.2s; +} + +.header-search:focus-within { + background: rgba(255, 255, 255, 0.4); + box-shadow: 0 4px 12px rgba(0,0,0,0.05); +} + +.header-search i { + color: var(--sub-text); + font-size: 13px; +} + +.header-search input { + background: transparent; + border: none; + outline: none; + color: var(--text-color); + font-size: 12px; + width: 100%; +} + +.btn:active { + transform: scale(0.95); +} diff --git a/static/css/modules/layers.css b/static/css/modules/layers.css new file mode 100644 index 0000000..3ac9f46 --- /dev/null +++ b/static/css/modules/layers.css @@ -0,0 +1,318 @@ +/* layers.css - Layer Management Panel Styles */ + +.layer-panel { + position: absolute; + bottom: 24px; + right: 300px; /* Offset from Inventory */ + width: 250px; + max-height: 400px; + z-index: 1000; + padding: 16px; + display: flex; + flex-direction: column; + gap: 12px; + pointer-events: auto !important; +} + +.layer-item.dragging { + opacity: 0.4; + background: var(--primary-color-dim); + border: 1px dashed var(--primary-color); +} + +.drag-handle { + cursor: grab; + color: #64748b; + margin-right: 12px; + font-size: 12px; +} + +.layer-item:active .drag-handle { + cursor: grabbing; +} + +.panel-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + font-size: 13px; + font-weight: 800; + color: var(--text-color); + border-bottom: 1px solid var(--panel-border); + padding-bottom: 10px; +} + +.panel-header i { + color: var(--accent-color); +} + +.layer-list { + display: flex; + flex-direction: column; + gap: 8px; + overflow-y: auto; +} + +.layer-item { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 12px; + background: var(--item-bg); + border: 1px solid var(--panel-border); + border-radius: 10px; + cursor: pointer; + transition: all 0.2s ease; +} + +.layer-item:hover { + background: var(--item-hover-bg); + border-color: var(--accent-color); +} + +.layer-item.active { + border-color: var(--accent-color); + background: rgba(59, 130, 246, 0.1); +} + +.layer-color { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.layer-name { + flex: 1; + font-size: 11px; + font-weight: 600; + color: var(--text-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.layer-actions { + display: flex; + gap: 4px; +} + +.layer-actions button { + background: none; + border: none; + color: var(--sub-text); + cursor: pointer; + font-size: 12px; + padding: 2px; +} + +.layer-actions button:hover { + color: var(--accent-color); +} + +.panel-header button { + background: var(--accent-color); + color: white !important; + border: none; + border-radius: 4px; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 12px; + transition: all 0.2s ease; +} + +.panel-header button:hover { + background: #2563eb; + transform: scale(1.1); +} + +.panel-header button i { + color: white !important; /* Force icon color */ +} + +.mini-btn:hover { + background: #2563eb; +} + +.layer-footer { + margin-top: auto; + padding-top: 10px; + border-top: 1px solid var(--panel-border); +} + +.opacity-control { + display: flex; + align-items: center; + gap: 8px; + font-size: 11px; + color: var(--sub-text); +} + +.opacity-control input[type="range"] { + flex: 1; + height: 6px; + background: rgba(0, 0, 0, 0.1); + border-radius: 3px; + appearance: none; + cursor: pointer; + outline: none; +} + +.opacity-control input[type="range"]::-webkit-slider-runnable-track { + background: linear-gradient(to right, var(--accent-color), #ddd); + height: 6px; + border-radius: 3px; +} + +.opacity-control input[type="range"]::-webkit-slider-thumb { + appearance: none; + width: 14px; + height: 14px; + background: var(--accent-color); + border: 2px solid white; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + border-radius: 50%; + cursor: pointer; + margin-top: -4px; /* Align with track */ +} + +#opacity-val { + min-width: 30px; + text-align: right; +} + +.layer-rename-input { + background: white; + border: 1px solid var(--accent-color); + border-radius: 4px; + padding: 2px 4px; + font-size: 13px; + width: 100px; + outline: none; + color: var(--main-text); +} +/* Trash Bin for Deletion */ +.layer-trash { + margin-top: 12px; + padding: 12px; + border: 1.5px dashed rgba(239, 68, 68, 0.4); + border-radius: 10px; + color: #ef4444; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + font-size: 11px; + font-weight: 700; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + background: rgba(239, 68, 68, 0.05); +} + +.layer-trash i { + font-size: 14px; +} + +.layer-trash.drag-over { + background: #ef4444; + color: white; + border-color: #ef4444; + transform: scale(1.02); + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); +} +/* Visual Nudge: Pulse Animation */ +@keyframes nudgePulse { + 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } + 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } + 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } +} + +.pulse-nudge { + animation: nudgePulse 1.5s infinite; + border-radius: 4px; + background: rgba(59, 130, 246, 0.1); +} + +/* Mini Guide Tooltip */ +.nudge-tooltip { + position: absolute; + left: 45px; + background: #3b82f6; + color: white; + padding: 6px 10px; + border-radius: 6px; + font-size: 10px; + font-weight: 700; + white-space: nowrap; + pointer-events: none; + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); + animation: tooltipFadeIn 0.3s ease-out forwards; + z-index: 1001; +} + +.nudge-tooltip::before { + content: ''; + position: absolute; + left: -4px; + top: 50%; + transform: translateY(-50%); + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-right: 4px solid #3b82f6; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateX(-10px); } + to { opacity: 1; transform: translateX(0); } +} + +@keyframes tooltipFadeOut { + from { opacity: 1; transform: translateX(0); } + to { opacity: 0; transform: translateX(5px); } +} + +/* Active Layer Floating Badge */ +.active-layer-badge { + position: absolute; + top: 20px; + right: 20px; + z-index: 100; + pointer-events: none; + display: flex; + align-items: center; + gap: 8px; + background: rgba(15, 23, 42, 0.6); + backdrop-filter: blur(12px); + padding: 8px 16px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + animation: fadeInDown 0.5s ease-out; +} + +.active-layer-badge .badge-label { + font-size: 9px; + font-weight: 800; + color: #94a3b8; + letter-spacing: 1px; +} + +.active-layer-badge .badge-value { + font-size: 13px; + font-weight: 900; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + transition: all 0.3s ease; +} + +@keyframes badgePop { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +.badge-pop { + animation: badgePop 0.3s ease-out; +} diff --git a/static/css/modules/layout.css b/static/css/modules/layout.css new file mode 100644 index 0000000..bec0980 --- /dev/null +++ b/static/css/modules/layout.css @@ -0,0 +1,84 @@ +/* Main Area Adjustment */ +.header, .editor-panel { + left: 284px; /* Default sidebar width + margin */ + transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.sidebar.collapsed ~ .header, +.sidebar.collapsed ~ .editor-panel, +.sidebar.collapsed ~ .main-viewport { + left: 104px; /* Collapsed sidebar width + margin */ +} +.main-viewport { + position: absolute; + top: 0; + left: 284px; + right: 0; + bottom: 0; + overflow: auto; + background-color: var(--bg-color); + display: flex; + /* justify-content and align-items removed to allow margin:auto to handle centering with overflow */ + padding: 60px; /* Space for shadow and boundaries */ + transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); + scrollbar-gutter: stable; +} + +#cy { + flex-shrink: 0; + background-color: var(--canvas-bg); /* Theme-aware paper background */ + position: relative; + /* Sizes will be set by JS or default to 100% */ + width: 100%; + height: 100%; + margin: auto; /* Handles centering when sized fixed (A3/A4) */ + box-shadow: 0 0 40px rgba(0,0,0,0.1); + border: 1px solid var(--panel-border); /* Visible canvas boundary */ +} + +#cy.grid-solid { + background-image: + linear-gradient(var(--grid-color) 1px, transparent 1px), + linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); + background-size: var(--grid-size) var(--grid-size); +} + +#cy.grid-dashed { + background-image: + radial-gradient(var(--grid-color) 1px, transparent 1px); + background-size: var(--grid-size) var(--grid-size); +} + +/* Inventory Panel Overlay (Legacy - handled in analysis.css) */ +/* .inventory-panel { ... } */ + +.inventory-header { + font-size: 11px; + font-weight: 800; + text-transform: uppercase; + color: var(--sub-text); + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 8px; +} + +.inventory-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 6px 0; + font-size: 12px; + font-weight: 600; + color: var(--text-color); + border-bottom: 1px solid rgba(255,255,255,0.05); +} + +.inventory-item .count { + background: var(--accent-color); + color: white; + padding: 2px 8px; + border-radius: 10px; + font-size: 10px; + font-weight: 800; +} diff --git a/static/css/modules/modal.css b/static/css/modules/modal.css new file mode 100644 index 0000000..3c1d292 --- /dev/null +++ b/static/css/modules/modal.css @@ -0,0 +1,141 @@ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(4px); + z-index: 10000; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s; +} + +.modal-overlay.active { + opacity: 1; + pointer-events: all; +} + +.modal-content { + width: 500px; + max-width: 90vw; + background: var(--panel-bg); + backdrop-filter: blur(20px) saturate(180%); + border: 1px solid var(--panel-border); + border-radius: 32px; + box-shadow: 0 20px 50px rgba(0,0,0,0.1); + transform: scale(0.9) translateY(20px); + transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.modal-overlay.active .modal-content { + transform: scale(1) translateY(0); +} + +.modal-header { + padding: 24px 30px; + border-bottom: 1px solid var(--panel-border); + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-header h2 { + font-size: 18px; + font-weight: 800; + color: var(--text-color); +} + +.close-modal { + background: transparent; + border: none; + font-size: 20px; + color: var(--sub-text); + cursor: pointer; + transition: color 0.2s; +} + +.close-modal:hover { + color: var(--text-color); +} + +.modal-body { + padding: 30px; + flex: 1; +} + +.settings-group { + margin-bottom: 24px; +} + +.settings-group h3 { + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--sub-text); + margin-bottom: 12px; +} + +.setting-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; +} + +.setting-label { + font-size: 14px; + font-weight: 600; +} + +.setting-item select, +.setting-item input[type="number"], +.setting-item input[type="text"] { + background: var(--item-bg); + border: 1px solid var(--panel-border); + border-radius: 8px; + padding: 6px 10px; + font-size: 13px; + color: var(--text-color); + outline: none; + transition: border-color 0.2s; +} + +.setting-item select:focus, +.setting-item input:focus { + border-color: var(--accent-color); +} + +.setting-item select option { + background-color: var(--bg-color); + color: var(--text-color); +} + +.setting-item input[type="color"] { + appearance: none; + width: 40px; + height: 24px; + border: none; + border-radius: 4px; + cursor: pointer; + background: none; +} + +.setting-item input[type="color"]::-webkit-color-swatch { + border: 1px solid var(--panel-border); + border-radius: 4px; +} + +.modal-footer { + padding: 20px 30px; + border-top: 1px solid var(--panel-border); + display: flex; + justify-content: flex-end; +} diff --git a/static/css/modules/properties_sidebar.css b/static/css/modules/properties_sidebar.css new file mode 100644 index 0000000..e301025 --- /dev/null +++ b/static/css/modules/properties_sidebar.css @@ -0,0 +1,256 @@ +/* Properties Sidebar Styles */ +#properties-sidebar { + position: fixed; + right: -320px; /* Hidden by default */ + top: 60px; /* Below header */ + bottom: 0; + width: 300px; + background: var(--panel-bg); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-left: 1px solid var(--panel-border); + box-shadow: -10px 0 25px rgba(0, 0, 0, 0.3); + transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 900; + display: flex; + flex-direction: column; + color: var(--text-color); +} + +#properties-sidebar.open { + right: 0; +} + +.sidebar-header { + padding: 18px 20px; + border-bottom: 1px solid var(--panel-border); + display: flex; + justify-content: space-between; + align-items: center; +} + +.sidebar-header h3 { + margin: 0; + font-size: 16px; + font-weight: 800; + color: var(--accent-color); +} + +.close-sidebar { + cursor: pointer; + font-size: 20px; + color: var(--sub-text); + transition: color 0.2s; +} + +.close-sidebar:hover { + color: var(--text-color); +} + +.sidebar-content { + flex: 1; + overflow-y: auto; + padding: 24px 20px; +} + +.prop-group { + margin-bottom: 20px; +} + +.prop-row { + display: flex; + gap: 12px; + margin-bottom: 16px; +} + +.prop-row .prop-group { + flex: 1; + margin-bottom: 0; +} + +.prop-group.horizontal { + display: flex; + align-items: center; + gap: 12px; +} + +.prop-group.horizontal label { + flex: 0 0 80px; + margin-bottom: 0; +} + +.prop-group.horizontal .prop-input { + flex: 1; +} + +.prop-group label { + display: block; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--sub-text); + margin-bottom: 8px; + font-weight: 700; +} + +.prop-input { + width: 100%; + background: var(--item-bg); + border: 1px solid var(--panel-border); + border-radius: 8px; + padding: 9px 12px; + color: var(--text-color); + font-size: 14px; + outline: none; + transition: all 0.2s; +} + +.prop-input:focus { + border-color: var(--accent-color); + background: var(--item-hover-bg); +} + +.sidebar-footer { + padding: 16px 20px; + border-top: 1px solid var(--panel-border); + display: flex; + gap: 12px; + background: rgba(var(--bg-rgb), 0.05); +} + +.btn-apply { + flex: 1; + background: var(--accent-color); + color: white; + border: none; + padding: 12px; + border-radius: 8px; + cursor: pointer; + font-weight: 700; + transition: all 0.2s; +} + +.btn-apply:hover { + filter: brightness(1.1); + transform: translateY(-1px); +} + +/* Toggle Switch Styles */ +.toggle-group { + margin-bottom: 24px; +} + +.toggle-switch { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + padding: 12px 14px; + background: var(--item-bg); + border: 1px solid var(--panel-border); + border-radius: 12px; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.toggle-switch:hover { + background: var(--item-hover-bg); + border-color: var(--accent-color); +} + +.toggle-switch span { + font-size: 13px; + font-weight: 600; + color: var(--text-color); +} + +.toggle-switch input { + display: none; +} + +.switch-slider { + position: relative; + width: 36px; + height: 20px; + background: #475569; + border-radius: 20px; + transition: background 0.3s; +} + +.switch-slider:before { + content: ""; + position: absolute; + width: 16px; + height: 16px; + left: 2px; + top: 2px; + background: white; + border-radius: 50%; + transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 1px 3px rgba(0,0,0,0.3); +} + +.toggle-switch input:checked + .switch-slider { + background: var(--accent-color); +} + +.toggle-switch input:checked + .switch-slider:before { + transform: translateX(16px); +} + +/* Multi-Selection Alignment UI */ +.alignment-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + margin-top: 12px; +} + +.align-btn { + aspect-ratio: 1; + background: var(--item-bg); + border: 1px solid var(--panel-border); + border-radius: 8px; + color: var(--sub-text); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + transition: all 0.2s; +} + +.align-btn:hover:not(:disabled) { + background: var(--accent-color); + color: white; + border-color: var(--accent-color); +} + +.align-btn:disabled { + opacity: 0.2; + cursor: not-allowed; +} + +/* Color Input Consistency */ +.input-with-color { + display: flex; + gap: 8px; + align-items: center; +} + +.input-with-color .prop-input[type="color"] { + width: 44px; + height: 38px; + padding: 3px; + cursor: pointer; + flex-shrink: 0; +} + +.input-with-color .prop-input[type="color"]::-webkit-color-swatch { + border: 1px solid var(--panel-border); + border-radius: 4px; +} + +/* Danger variant for toggle-switch */ +.toggle-switch.danger input:checked + .switch-slider { + background: #ef4444; +} diff --git a/static/css/modules/settings_panel.css b/static/css/modules/settings_panel.css new file mode 100644 index 0000000..b6fe2c5 --- /dev/null +++ b/static/css/modules/settings_panel.css @@ -0,0 +1,202 @@ +/* settings_panel.css - Professional Sliding Settings Panel */ + +.settings-panel { + position: fixed; + top: 10px; + right: -420px; /* Hidden by default */ + width: 400px; + height: calc(100vh - 20px); + z-index: 2000; + display: flex; + flex-direction: column; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); +} + +.settings-panel.active { + right: 10px; +} + +.settings-header { + padding: 20px 24px; + border-bottom: 1px solid var(--panel-border); + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-title { + display: flex; + align-items: center; + gap: 12px; + font-size: 16px; + font-weight: 800; + color: var(--text-color); +} + +.header-title i { + color: var(--accent-color); +} + +.settings-container { + flex: 1; + display: flex; + overflow: hidden; +} + +/* Sidebar Tabs */ +.settings-sidebar { + width: 100px; + background: var(--item-bg); + border-right: 1px solid var(--panel-border); + display: flex; + flex-direction: column; + padding: 10px 0; +} + +.settings-tab { + padding: 18px 10px; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + cursor: pointer; + color: var(--sub-text); + transition: all 0.2s ease; + text-align: center; +} + +.settings-tab i { + font-size: 20px; +} + +.settings-tab span { + font-size: 9px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.settings-tab:hover { + color: var(--text-color); + background: var(--item-hover-bg); +} + +.settings-tab.active { + color: var(--accent-color); + background: rgba(59, 130, 246, 0.1); + border-left: 3px solid var(--accent-color); +} + +/* Body Content */ +.settings-body { + flex: 1; + padding: 24px; + overflow-y: auto; + background: rgba(var(--bg-rgb), 0.1); +} + +.settings-section { + margin-bottom: 30px; + animation: fadeIn 0.3s ease; +} + +.settings-section h3 { + font-size: 11px; + color: var(--sub-text); + text-transform: uppercase; + margin-bottom: 16px; + letter-spacing: 0.8px; + font-weight: 800; +} + +.setting-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 14px 0; + border-bottom: 1px solid var(--panel-border); +} + +.setting-info { + display: flex; + flex-direction: column; + gap: 4px; +} + +.setting-info .label { + font-size: 14px; + font-weight: 600; + color: var(--text-color); +} + +.setting-info .desc { + font-size: 11px; + color: var(--sub-text); +} + +.setting-ctrl select, +.setting-ctrl input[type="number"], +.setting-ctrl input[type="text"] { + background: var(--btn-bg, #1e293b); + border: 1px solid var(--panel-border); + color: var(--text-color); + padding: 7px 12px; + border-radius: 8px; + font-size: 13px; + outline: none; + transition: border-color 0.2s; + cursor: pointer; + color-scheme: dark light; /* Support both schemes */ +} + +.setting-ctrl select option { + background-color: #1e293b; /* Solid background for options */ + color: white; +} + +.setting-ctrl select:focus, +.setting-ctrl input:focus { + border-color: var(--accent-color); +} + +/* Toggle switch adjustments within settings */ +.toggle-switch { + background: var(--item-bg) !important; + border: 1px solid var(--panel-border) !important; +} + +.toggle-switch:hover { + background: var(--item-hover-bg) !important; + border-color: var(--accent-color) !important; +} + +.toggle-switch .label { + color: var(--sub-text) !important; +} + +/* Animation */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(5px); } + to { opacity: 1; transform: translateY(0); } +} + +.close-btn { + background: none; + border: none; + color: var(--sub-text); + cursor: pointer; + font-size: 20px; + transition: all 0.2s; + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.close-btn:hover { + background: #ef4444; + color: white; +} diff --git a/static/css/modules/sidebar.css b/static/css/modules/sidebar.css new file mode 100644 index 0000000..38f4821 --- /dev/null +++ b/static/css/modules/sidebar.css @@ -0,0 +1,140 @@ +.sidebar { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 260px; + z-index: 100; + display: flex; + flex-direction: column; + border-radius: 0; + border-left: none; + border-top: none; + border-bottom: none; + transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + overflow-x: hidden; +} + +.sidebar.collapsed { + width: 80px; + overflow-x: hidden !important; +} + +.sidebar-header { + padding: 24px; + display: flex; + align-items: center; + justify-content: space-between; + min-height: 80px; + transition: padding 0.3s; + overflow: hidden; +} + +.sidebar.collapsed .sidebar-header { + padding: 24px 0; + flex-direction: column; + gap: 15px; + justify-content: center; +} + +.menu-toggle { + background: transparent; + border: none; + color: var(--sub-text); + font-size: 20px; + cursor: pointer; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; + transition: all 0.2s; +} + +.sidebar.collapsed .menu-toggle { + order: -1; /* Toggle button first when collapsed */ +} + +.menu-toggle:hover { + background: var(--item-bg); +} + +.logo-area { + display: flex; + align-items: center; + gap: 12px; + transition: opacity 0.2s; + white-space: nowrap; +} + +.sidebar.collapsed .logo-text { + display: none; +} + +.logo-icon { + min-width: 40px; + width: 40px; + height: 40px; + background: linear-gradient(135deg, #3b82f6, #6366f1); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: 900; + font-size: 18px; + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); +} + +.search-container { + padding: 0 24px 20px; + position: relative; + transition: padding 0.3s; +} + +.search-container i { + position: absolute; + left: 40px; + top: 13px; + font-size: 14px; + color: var(--sub-text); + z-index: 5; + transition: all 0.3s; +} + +#asset-search { + width: 100%; + background: var(--item-bg); + border: 1px solid var(--panel-border); + padding: 10px 15px 10px 40px; + border-radius: 12px; + font-size: 13px; + font-family: inherit; + outline: none; + transition: all 0.2s; +} + +#asset-search:focus { + background: var(--item-hover-bg); + box-shadow: 0 4px 12px rgba(0,0,0,0.03); + border-color: #3b82f6; +} + +.sidebar.collapsed .search-container { + padding: 10px 0; + display: flex; + justify-content: center; +} + +.sidebar.collapsed #asset-search { + display: none; +} + +.sidebar.collapsed .search-container i { + font-size: 18px; + color: var(--sub-text); + cursor: pointer; + position: static; +} diff --git a/static/css/modules/sidebar_footer.css b/static/css/modules/sidebar_footer.css new file mode 100644 index 0000000..6357f6e --- /dev/null +++ b/static/css/modules/sidebar_footer.css @@ -0,0 +1,68 @@ +/* Sidebar Footer Settings */ +.sidebar-footer { + padding: 20px 24px; + border-top: 1px solid var(--panel-border); + display: flex; + align-items: center; + gap: 12px; + margin-top: auto; /* Push to bottom */ +} + +.footer-btns { + display: flex; + gap: 8px; +} + +.footer-btn { + width: 32px; + height: 32px; + background: var(--item-bg); + border: none; + border-radius: 8px; + color: var(--sub-text); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); +} + +.footer-btn:hover { + background: var(--item-hover-bg); + color: white; +} + +#settings-btn:hover { + transform: rotate(45deg); +} + +#system-menu-btn.active { + background: var(--accent-color); + color: white; +} + +.footer-text { + flex: 1; +} + +.footer-text p { + font-size: 11px; + font-weight: 800; + margin: 0; +} + +.footer-text small { + font-size: 9px; + color: var(--sub-text); +} + +.sidebar.collapsed .sidebar-footer { + padding: 20px 0; + flex-direction: column; + justify-content: center; +} + +.sidebar.collapsed .footer-text { + display: none; +} diff --git a/static/css/modules/studio.css b/static/css/modules/studio.css new file mode 100644 index 0000000..346bd7d --- /dev/null +++ b/static/css/modules/studio.css @@ -0,0 +1,99 @@ +.floating-window { + position: fixed; + background: var(--sidebar-bg); + backdrop-filter: blur(20px); + border: 1px solid var(--panel-border); + border-radius: 16px; + box-shadow: 0 20px 50px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + overflow: hidden; + animation: win-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes win-appear { + from { opacity: 0; transform: scale(0.9) translateY(20px); } + to { opacity: 1; transform: scale(1) translateY(0); } +} + +.win-header { + padding: 12px 20px; + background: rgba(255, 255, 255, 0.05); + border-bottom: 1px solid var(--panel-border); + display: flex; + align-items: center; + justify-content: space-between; + cursor: grab; + user-select: none; +} + +.win-header:active { + cursor: grabbing; +} + +.win-title { + font-size: 13px; + font-weight: 800; + color: var(--text-color); + display: flex; + align-items: center; + gap: 10px; +} + +.win-controls { + display: flex; + gap: 10px; +} + +.win-btn { + background: transparent; + border: none; + color: var(--sub-text); + cursor: pointer; + font-size: 12px; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + transition: all 0.2s; +} + +.win-btn:hover { + background: var(--item-hover-bg); + color: var(--text-color); +} + +.win-btn.win-close:hover { + background: #ef4444; + color: white; +} + +.floating-window.minimized { + height: 48px !important; + width: 250px !important; +} + +.floating-window.minimized .win-body { + display: none; +} + +.win-body { + flex: 1; + overflow: auto; + padding: 20px; +} + +/* Studio Specific Polish */ +.studio-container { + height: 100%; +} + +.studio-modal .preview-area { + min-height: 200px; +} + +[data-theme='dark'] .floating-window { + background: rgba(15, 23, 42, 0.8); +} diff --git a/static/css/premium.css b/static/css/premium.css new file mode 100644 index 0000000..a77b5ed --- /dev/null +++ b/static/css/premium.css @@ -0,0 +1,349 @@ +/* + drawNET Premium CSS Manifest + This file imports modules to keep the production bundle organized. +*/ + +@import "modules/base.css"; +@import "modules/sidebar.css"; +@import "modules/sidebar_footer.css"; +@import "modules/assets.css"; +@import "modules/flyout.css"; +@import "modules/header.css"; +@import "modules/editor.css"; +@import "modules/layout.css"; +@import "modules/animations.css"; +@import "modules/modal.css"; +@import "modules/settings_panel.css"; +@import "modules/properties_sidebar.css"; + +/* Floating Context Menu */ +.floating-menu { + background: rgba(30, 41, 59, 0.85); /* Slate 800-ish with glassmorphism */ + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); + padding: 6px; + min-width: 180px; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +.menu-item { + padding: 10px 14px; + border-radius: 8px; + cursor: pointer; + font-size: 13px; + color: #f1f5f9; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + align-items: center; +} + +.menu-item:hover { + background: #3b82f6; /* Blue 500 */ + color: white; + transform: translateY(-1px); +} + +.menu-divider { + height: 1px; + background: rgba(255, 255, 255, 0.1); + margin: 6px 0; +} + +.menu-label { + padding: 6px 14px 4px; + font-size: 10px; + font-weight: 700; + color: #475569; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.menu-icon-row { + display: flex; + justify-content: space-between; + padding: 4px 8px; + gap: 4px; +} + +.icon-btn { + flex: 1; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + cursor: pointer; + color: #94a3b8; + transition: all 0.2s; + font-size: 14px; +} + +.icon-btn:hover { + background: #3b82f6; + color: white; +} + +.icon-btn i.fa-rotate-90 { + transform: rotate(90deg); +} + +/* --- X6 Port Styles --- */ +.x6-port { + visibility: hidden; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.x6-node:hover .x6-port { + visibility: visible; +} + +.x6-port circle { + cursor: crosshair; +} + +.x6-port circle:hover { + fill: #3b82f6 !important; + r: 6 !important; +} + +/* --- X6 Edge Selection Highlight --- */ +.x6-edge-selected path { + stroke: #3b82f6 !important; + stroke-width: 3px !important; + filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.8)); + transition: all 0.2s ease; +} + +/* Flow animation for selected flow lines */ +.x6-edge-selected.flow-animation path { + stroke-width: 4px !important; +} + +/* Mini buttons for editor actions */ +.footer-btn.mini { + width: auto; + padding: 6px 12px; + font-size: 11px; + height: 28px; + background: rgba(59, 130, 246, 0.1); + border: 1px solid rgba(59, 130, 246, 0.2); + color: #3b82f6; + border-radius: 6px; + margin-left: 6px; + display: inline-flex; + align-items: center; + gap: 6px; + font-weight: 700; +} + +.footer-btn.mini:hover { + background: #3b82f6; + color: white; +} + +/* --- Export Loading Overlay --- */ +.export-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(15, 23, 42, 0.65); /* Slate 900 with transparency */ + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 9999; + color: white; + font-family: inherit; + animation: fadeIn 0.3s ease-out; +} + +.export-spinner { + width: 50px; + height: 50px; + border: 4px solid rgba(255, 255, 255, 0.1); + border-left-color: #3b82f6; + border-radius: 50%; + animation: spin 1s linear infinite; + margin-bottom: 20px; +} + +.export-text { + font-size: 18px; + font-weight: 700; + letter-spacing: -0.02em; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +/* --- License Management UI --- */ +.license-status-card { + background: rgba(30, 41, 59, 0.4); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 20px; + margin: 16px 0 24px; + backdrop-filter: blur(10px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); +} + +.status-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 16px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.edition-label { + font-size: 10px; + font-weight: 800; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 1px; + display: block; + margin-bottom: 4px; +} + +.edition-name { + font-size: 22px; + font-weight: 900; + color: white; + margin: 0; + letter-spacing: -0.5px; +} + +.status-icon { + width: 48px; + height: 48px; + border-radius: 14px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); +} + +.status-icon.valid { + background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); + color: white; +} + +.status-icon.expired { + background: linear-gradient(135deg, #475569 0%, #1e293b 100%); + color: #94a3b8; +} + +.hwid-section { + display: flex; + flex-direction: column; + gap: 10px; +} + +.hwid-label-row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 12px; + font-weight: 700; + color: #cbd5e1; +} + +.text-link-btn { + background: none; + border: none; + color: #3b82f6; + font-size: 11px; + font-weight: 700; + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + transition: all 0.2s; +} + +.text-link-btn:hover { + background: rgba(59, 130, 246, 0.1); +} + +.hwid-value-box { + background: rgba(15, 23, 42, 0.4); + border: 1px solid rgba(255, 255, 255, 0.05); + padding: 12px; + border-radius: 10px; + min-height: 40px; + display: flex; + align-items: center; +} + +.hwid-value-box code { + font-family: 'Fira Code', 'Cascadia Code', monospace; + font-size: 13px; + color: #3b82f6; + word-break: break-all; + width: 100%; +} + +.license-action-section { + margin-top: 20px; +} + +.key-input-wrapper textarea { + width: 100%; + height: 100px; + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + color: #f1f5f9; + padding: 12px; + font-family: monospace; + font-size: 12px; + resize: none; + margin-bottom: 12px; + transition: all 0.2s; +} + +.key-input-wrapper textarea:focus { + border-color: #3b82f6; + outline: none; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); +} + +.primary-btn-premium { + background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); + color: white; + border: none; + padding: 12px 24px; + border-radius: 10px; + font-weight: 700; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: all 0.2s; + width: 100%; +} + +.primary-btn-premium:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); +} + +.primary-btn-premium:disabled { + opacity: 0.6; + cursor: not-allowed; +} diff --git a/static/css/studio.css b/static/css/studio.css new file mode 100644 index 0000000..86e7abf --- /dev/null +++ b/static/css/studio.css @@ -0,0 +1,344 @@ +/* + * drawNET Studio - Asset Management Styles + */ + +body.studio-body { + margin: 0; + padding: 0; + background: #0f172a; + color: #f8fafc; + height: 100vh; + overflow: hidden; + font-family: 'Inter', sans-serif; +} + +.studio-layout { + display: grid; + grid-template-columns: 280px 1fr 320px; + grid-template-rows: 60px 1fr; + height: 100vh; +} + +.studio-header { + grid-column: 1 / 4; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + background: rgba(30, 41, 59, 0.7); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + backdrop-filter: blur(20px); +} + +.studio-header-left { + display: flex; + align-items: center; + gap: 20px; +} + +.header-metadata { + display: flex; + gap: 15px; + align-items: center; +} + +.meta-input-group { + display: flex; + flex-direction: column; +} + +.meta-label { + font-size: 9px; + color: #64748b; + font-weight: 800; + text-transform: uppercase; +} + +.meta-input { + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #f8fafc; + padding: 4px 8px; + border-radius: 4px; + font-size: 13px; + transition: border-color 0.2s; +} + +.meta-input:focus { + outline: none; + border-color: #38bdf8; +} + +.meta-input.highlight { + color: #38bdf8; + font-weight: 700; +} + +.panel { + background: rgba(15, 23, 42, 0.5); + border-right: 1px solid rgba(255, 255, 255, 0.05); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.panel-header { + padding: 15px 20px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + font-size: 12px; + font-weight: 800; + color: #94a3b8; + letter-spacing: 0.05em; + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: space-between; +} + +.panel-content { + flex: 1; + overflow-y: auto; + padding: 20px; +} + +/* Source Panel (Left) */ +.source-panel { + background: rgba(15, 23, 42, 0.8); +} + +.upload-area { + border: 2px dashed rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 30px 20px; + text-align: center; + cursor: pointer; + transition: all 0.2s; + margin-bottom: 20px; +} + +.upload-area:hover { + background: rgba(255, 255, 255, 0.02); + border-color: #38bdf8; +} + +.upload-area i { + display: block; + font-size: 24px; + color: #38bdf8; + margin-bottom: 10px; +} + +.upload-text { + font-size: 12px; + margin: 0; +} + +.upload-hint { + font-size: 10px; + color: #64748b; +} + +.source-list { + list-style: none; + padding: 0; + margin: 0; +} + +.source-item { + padding: 10px 12px; + border-radius: 8px; + font-size: 13px; + cursor: pointer; + display: flex; + align-items: center; + gap: 10px; + transition: background 0.2s; +} + +.source-item:hover { + background: rgba(255, 255, 255, 0.05); +} + +.source-item i { + width: 16px; + opacity: 0.6; +} + +/* Workspace (Center) */ +.workspace { + background: #020617; + padding: 30px; +} + +.asset-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: 20px; +} + +.asset-card { + background: rgba(30, 41, 59, 0.5); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 15px; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + cursor: pointer; + transition: all 0.2s; +} + +.asset-card:hover { + transform: translateY(-2px); + background: rgba(30, 41, 59, 0.8); + border-color: #38bdf8; +} + +.asset-card.selected { + border-color: #38bdf8; + background: rgba(56, 189, 248, 0.1); + box-shadow: 0 0 0 1px #38bdf8; +} + +.asset-preview { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; +} + +.asset-preview img { + max-width: 100%; + max-height: 100%; +} + +.asset-name { + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + text-align: center; + color: #cbd5e1; +} + +/* Comparison View */ +.comparison-view { + display: flex; + gap: 20px; + margin-top: 20px; + padding: 15px; + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.comp-box { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.comp-preview { + width: 100px; + height: 100px; + background: #1e293b; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.comp-preview img, .comp-preview svg { + max-width: 90%; + max-height: 90%; +} + +.comp-label { + font-size: 10px; + font-weight: 800; + color: #64748b; + text-transform: uppercase; +} + +.choice-btn { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #94a3b8; + padding: 8px 12px; + border-radius: 6px; + font-size: 11px; + cursor: pointer; + width: 100%; + transition: all 0.2s; +} + +.choice-btn.active { + background: #38bdf8; + color: #0f172a; + border-color: #38bdf8; + font-weight: 700; +} + +/* Property Panel (Right) */ +.property-panel { + border-left: 1px solid rgba(255, 255, 255, 0.05); + background: rgba(15, 23, 42, 0.8); +} + +.property-empty { + text-align: center; + color: #64748b; + margin-top: 50px; +} + +.property-empty i { + font-size: 30px; + margin-bottom: 15px; + display: block; +} + +.property-empty p { + font-size: 13px; +} + +.btn-primary { + background: #38bdf8; + color: #0f172a; + border: none; + padding: 8px 16px; + border-radius: 8px; + font-weight: 700; + font-size: 13px; + cursor: pointer; + transition: all 0.2s; +} + +.btn-primary:hover { + background: #7dd3fc; + transform: translateY(-1px); +} + +.back-link { + text-decoration: none; + color: #94a3b8; + font-size: 13px; + display: flex; + align-items: center; + gap: 8px; +} + +.back-link:hover { + color: #cbd5e1; +} + +.placeholder-icon { + font-size: 32px; + color: #334155; +} diff --git a/static/css/styles.css b/static/css/styles.css new file mode 100644 index 0000000..5de1117 --- /dev/null +++ b/static/css/styles.css @@ -0,0 +1 @@ +/* Ghost file to prevent MIME type 404 errors in legacy/library environments */ diff --git a/static/css/webfonts/fa-brands-400.woff2 b/static/css/webfonts/fa-brands-400.woff2 new file mode 100644 index 0000000..71e3185 Binary files /dev/null and b/static/css/webfonts/fa-brands-400.woff2 differ diff --git a/static/css/webfonts/fa-regular-400.woff2 b/static/css/webfonts/fa-regular-400.woff2 new file mode 100644 index 0000000..7f02168 Binary files /dev/null and b/static/css/webfonts/fa-regular-400.woff2 differ diff --git a/static/css/webfonts/fa-solid-900.woff2 b/static/css/webfonts/fa-solid-900.woff2 new file mode 100644 index 0000000..5c16cd3 Binary files /dev/null and b/static/css/webfonts/fa-solid-900.woff2 differ diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..919de70 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..0e92bb4 Binary files /dev/null and b/static/favicon.png differ diff --git a/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2 b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2 new file mode 100644 index 0000000..d750914 Binary files /dev/null and b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2 differ diff --git a/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2 b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2 new file mode 100644 index 0000000..d15208d Binary files /dev/null and b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2 differ diff --git a/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2 b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2 new file mode 100644 index 0000000..024f077 Binary files /dev/null and b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2 differ diff --git a/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2 b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2 new file mode 100644 index 0000000..479d010 Binary files /dev/null and b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2 differ diff --git a/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2 b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2 new file mode 100644 index 0000000..de83a9c Binary files /dev/null and b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2 differ diff --git a/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2 b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2 new file mode 100644 index 0000000..6e7141f Binary files /dev/null and b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2 differ diff --git a/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2 b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2 new file mode 100644 index 0000000..a40c469 Binary files /dev/null and b/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2 differ diff --git a/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVgaY.woff2 b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVgaY.woff2 new file mode 100644 index 0000000..3d61cca Binary files /dev/null and b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVgaY.woff2 differ diff --git a/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVgaY.woff2 b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVgaY.woff2 new file mode 100644 index 0000000..9d97c9b Binary files /dev/null and b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVgaY.woff2 differ diff --git a/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNVOVgaY.woff2 b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNVOVgaY.woff2 new file mode 100644 index 0000000..2e5dab0 Binary files /dev/null and b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNVOVgaY.woff2 differ diff --git a/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOVOVgaY.woff2 b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOVOVgaY.woff2 new file mode 100644 index 0000000..da7ab5f Binary files /dev/null and b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOVOVgaY.woff2 differ diff --git a/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2 b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2 new file mode 100644 index 0000000..5858873 Binary files /dev/null and b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2 differ diff --git a/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOVgaY.woff2 b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOVgaY.woff2 new file mode 100644 index 0000000..f60f0bd Binary files /dev/null and b/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOVgaY.woff2 differ diff --git a/static/hotkeys.json b/static/hotkeys.json new file mode 100644 index 0000000..a6a0759 --- /dev/null +++ b/static/hotkeys.json @@ -0,0 +1,54 @@ +{ + "hotkeys": [ + { "key": "Delete", "code": "Delete", "action": "deleteSelected", "description": "Remove selected elements" }, + { "key": "Backspace", "code": "Backspace", "action": "deleteSelected", "description": "Remove selected elements" }, + { "ctrl": true, "key": "f", "code": "KeyF", "action": "fitScreen", "description": "Fit to screen" }, + { "ctrl": true, "key": "=", "code": "Equal", "action": "zoomIn", "description": "Zoom in" }, + { "ctrl": true, "key": "+", "code": "Equal", "shift": true, "action": "zoomIn", "description": "Zoom in" }, + { "ctrl": true, "key": "-", "code": "Minus", "action": "zoomOut", "description": "Zoom out" }, + { "ctrl": true, "key": "s", "code": "KeyS", "action": "exportJson", "description": "Export JSON" }, + { "ctrl": true, "key": "o", "code": "KeyO", "action": "importJson", "description": "Import JSON" }, + { "alt": true, "key": "0", "code": "Digit0", "alwaysEnabled": true, "action": "toggleInventory", "description": "Toggle Inventory Panel" }, + { "alt": true, "key": "1", "code": "Digit1", "alwaysEnabled": true, "action": "toggleProperties", "description": "Toggle Properties Sidebar" }, + { "alt": true, "key": "Enter", "code": "Enter", "alwaysEnabled": true, "action": "toggleProperties", "description": "Open/Toggle Properties Sidebar" }, + { "key": "F2", "code": "F2", "action": "editLabel", "description": "Edit label of selected element" }, + { "key": "[", "code": "BracketLeft", "action": "sendToBack", "description": "Send selected to back" }, + { "key": "]", "code": "BracketRight", "action": "bringToFront", "description": "Bring selected to front" }, + { "ctrl": true, "key": "l", "code": "KeyL", "action": "toggleLock", "description": "Lock/Unlock selected element" }, + { "alt": true, "key": "9", "code": "Digit9", "alwaysEnabled": true, "action": "toggleLayers", "description": "Toggle Layer Panel" }, + { "ctrl": true, "shift": true, "key": "l", "code": "KeyL", "action": "arrangeLayout", "description": "Auto-arrange layout" }, + { "shift": true, "key": "a", "code": "KeyA", "action": "connectNodes", "description": "Connect selected nodes (Manhattan)" }, + { "shift": true, "key": "s", "code": "KeyS", "action": "connectStraight", "description": "Connect selected nodes (Straight)" }, + { "alt": true, "key": "m", "code": "KeyM", "action": "connectNodes", "description": "Change to Manhattan Line" }, + { "alt": true, "key": "l", "code": "KeyL", "action": "connectStraight", "description": "Change to Straight Line" }, + { "shift": true, "key": "d", "code": "KeyD", "action": "disconnectNodes", "description": "Disconnect selected nodes" }, + { "ctrl": true, "key": "g", "code": "KeyG", "action": "groupNodes", "description": "Group Selected" }, + { "ctrl": true, "key": "z", "code": "KeyZ", "action": "undo", "alwaysEnabled": true, "description": "Undo last action" }, + { "ctrl": true, "key": "y", "code": "KeyY", "action": "redo", "alwaysEnabled": true, "description": "Redo last undone action" }, + { "ctrl": true, "shift": true, "key": "z", "code": "KeyZ", "action": "redo", "alwaysEnabled": true, "description": "Redo last undone action" }, + { "ctrl": true, "key": "c", "code": "KeyC", "action": "copyNodes", "description": "Copy selected nodes" }, + { "ctrl": true, "key": "v", "code": "KeyV", "action": "pasteNodes", "description": "Paste nodes from clipboard" }, + { "ctrl": true, "key": "d", "code": "KeyD", "action": "duplicateNodes", "description": "Duplicate selected nodes (Immediate)" }, + { "ctrl": true, "shift": true, "key": "c", "code": "KeyC", "action": "copyAttributes", "description": "Copy node attributes (Format Painter)" }, + { "ctrl": true, "shift": true, "key": "v", "code": "KeyV", "action": "pasteAttributes", "description": "Paste node attributes" }, + + { "shift": true, "key": "1", "code": "Digit1", "action": "alignTop", "description": "Align nodes to top" }, + { "shift": true, "key": "2", "code": "Digit2", "action": "alignBottom", "description": "Align nodes to bottom" }, + { "shift": true, "key": "3", "code": "Digit3", "action": "alignLeft", "description": "Align nodes to left" }, + { "shift": true, "key": "4", "code": "Digit4", "action": "alignRight", "description": "Align nodes to right" }, + { "shift": true, "key": "5", "code": "Digit5", "action": "alignMiddle", "description": "Align nodes to vertical center" }, + { "shift": true, "key": "6", "code": "Digit6", "action": "alignCenter", "description": "Align nodes to horizontal center" }, + { "shift": true, "key": "7", "code": "Digit7", "action": "distributeHorizontal", "description": "Distribute nodes horizontally" }, + { "shift": true, "key": "8", "code": "Digit8", "action": "distributeVertical", "description": "Distribute nodes vertically" }, + + { "key": "ArrowUp", "code": "ArrowUp", "action": "moveUp", "description": "Move nodes up" }, + { "key": "ArrowDown", "code": "ArrowDown", "action": "moveDown", "description": "Move nodes down" }, + { "key": "ArrowLeft", "code": "ArrowLeft", "action": "moveLeft", "description": "Move nodes left" }, + { "key": "ArrowRight", "code": "ArrowRight", "action": "moveRight", "description": "Move nodes right" }, + { "shift": true, "key": "ArrowUp", "code": "ArrowUp", "action": "moveUpLarge", "description": "Move nodes up (large)" }, + { "shift": true, "key": "ArrowDown", "code": "ArrowDown", "action": "moveDownLarge", "description": "Move nodes down (large)" }, + { "shift": true, "key": "ArrowLeft", "code": "ArrowLeft", "action": "moveLeftLarge", "description": "Move nodes left (large)" }, + { "shift": true, "key": "ArrowRight", "code": "ArrowRight", "action": "moveRightLarge", "description": "Move nodes right (large)" }, + { "key": "Escape", "code": "Escape", "alwaysEnabled": true, "action": "cancel", "description": "Deselect all and close sidebar" } + ] +} diff --git a/static/js/app.js b/static/js/app.js new file mode 100644 index 0000000..4555b17 --- /dev/null +++ b/static/js/app.js @@ -0,0 +1,78 @@ +import { initAssets } from './modules/assets/index.js'; +import { initGraph } from './modules/graph.js'; +import { initUIToggles } from './modules/ui.js'; +import { initSettings } from './modules/settings/ui.js'; +import { applySavedSettings, applySavedTheme } from './modules/settings/store.js'; +import { initHotkeys } from './modules/hotkeys/index.js'; +import { initGlobalSearch } from './modules/graph/search.js'; +import { initInventory } from './modules/graph/analysis.js'; +import { initLayerPanel } from './modules/ui/layer_panel.js'; +import { applyLayerFilters } from './modules/graph/layers.js'; +import { initI18n } from './modules/i18n.js'; +import { initPropertiesSidebar } from './modules/properties_sidebar/index.js'; +import { initPersistence } from './modules/persistence.js'; +import { initGraphIO } from './modules/graph/io/index.js'; +import { initContextMenu } from './modules/ui/context_menu/index.js'; +import { initLicense } from './modules/ui/license.js'; +import { logger } from './modules/utils/logger.js'; + +document.addEventListener('DOMContentLoaded', async () => { + // 0. Initialize i18n (Language first) + await initI18n(); + + // 1. Apply Saved Theme immediately (prevent flash) + applySavedTheme(); + + // 2. Load Assets & Sidebar + await initAssets(); + + // 2.5 Load Global Config + try { + const configRes = await fetch('/api/config'); + if (configRes.ok) { + const configData = await configRes.json(); + const { state } = await import('./modules/state.js'); + state.appConfig = configData; + logger.info("Global configuration loaded from server."); + } + } catch (err) { + logger.high("Failed to load global config, using defaults."); + } + + // 3. Initialize X6 Graph + initGraph(); + + // 4. Initialize UI Toggles + initUIToggles(); + + // 5. Initialize Settings Modal Logic + initSettings(); + + // 6. Apply Saved Visual Settings (Grid, Size) + applySavedSettings(); + + // 7. Initialize Keyboard Hotkeys + initHotkeys(); + + // 8. Initialize UI Components & Persistence + initPropertiesSidebar(); + initContextMenu(); + initGraphIO(); + initGlobalSearch(); + initInventory(); + initLayerPanel(); + applyLayerFilters(); + initPersistence(); + initLicense(); + + // Help Button + const helpBtn = document.getElementById('help-btn'); + if (helpBtn) { + helpBtn.addEventListener('click', async () => { + const { showHelpModal } = await import('./modules/ui/help_modal.js'); + showHelpModal(); + }); + } + + logger.high("drawNET Premium initialized successfully."); +}); diff --git a/static/js/modules/assets/api.js b/static/js/modules/assets/api.js new file mode 100644 index 0000000..d5b9dff --- /dev/null +++ b/static/js/modules/assets/api.js @@ -0,0 +1,17 @@ +import { state } from '../state.js'; +import { logger } from '../utils/logger.js'; + +/** + * fetchAssets - Fetches the complete asset and pack list from the server + */ +export async function fetchAssets() { + try { + const response = await fetch('/assets'); + const data = await response.json(); + state.assetsData = data.assets || []; + return data; + } catch (e) { + logger.critical("Failed to fetch assets:", e); + return { assets: [], packs: [] }; + } +} diff --git a/static/js/modules/assets/fixed_objects.js b/static/js/modules/assets/fixed_objects.js new file mode 100644 index 0000000..4de13ab --- /dev/null +++ b/static/js/modules/assets/fixed_objects.js @@ -0,0 +1,110 @@ +import { state } from '../state.js'; +import { t } from '../i18n.js'; + +export const FIXED_ASSETS = [ + { id: 'fixed-group', type: 'group', label: 'Group Container', icon: 'group.png', is_img: true }, + { id: 'fixed-rect', type: 'rect', label: 'Rectangle', icon: 'far fa-square', is_img: false }, + { id: 'fixed-rounded-rect', type: 'rounded-rect', label: 'Rounded Rectangle', icon: 'fas fa-vector-square', is_img: false }, + { id: 'fixed-circle', type: 'circle', label: 'Circle', icon: 'far fa-circle', is_img: false }, + { id: 'fixed-text', type: 'text-box', label: 'Text Box', icon: 'fas fa-font', is_img: false }, + { id: 'fixed-label', type: 'label', label: 'Label', icon: 'fas fa-tag', is_img: false }, + { id: 'fixed-blank', type: 'blank', label: 'Blank Point (Invisible)', icon: 'fas fa-crosshairs', is_img: false, extra_style: 'opacity: 0.5;' }, + { id: 'fixed-dot', type: 'dot', label: 'Dot (Small visible point)', icon: 'fas fa-circle', is_img: false, extra_style: 'font-size: 6px;' }, + { id: 'fixed-ellipse', type: 'ellipse', label: 'Ellipse', icon: 'fas fa-egg', is_img: false, extra_style: 'transform: rotate(-45deg);' }, + { id: 'fixed-polyline', type: 'polyline', label: 'Polyline', icon: 'fas fa-chart-line', is_img: false }, + { id: 'fixed-browser', type: 'browser', label: 'Browser', icon: 'fas fa-window-maximize', is_img: false }, + { id: 'fixed-user', type: 'user', label: 'User', icon: 'fas fa-user', is_img: false }, + { id: 'fixed-admin', type: 'admin', label: 'Admin', icon: 'fas fa-user-shield', is_img: false }, + { id: 'fixed-triangle', type: 'triangle', label: 'Triangle', icon: 'fas fa-caret-up', is_img: false, extra_style: 'font-size: 22px; margin-top: -2px;' }, + { id: 'fixed-diamond', type: 'diamond', label: 'Diamond', icon: 'fas fa-square', is_img: false, extra_style: 'transform: rotate(45deg) scale(0.8);' }, + { id: 'fixed-parallelogram', type: 'parallelogram', label: 'Parallelogram', icon: 'fas fa-square', is_img: false, extra_style: 'transform: skewX(-20deg) scaleX(1.2);' }, + { id: 'fixed-cylinder', type: 'cylinder', label: 'Cylinder', icon: 'fas fa-database', is_img: false }, + { id: 'fixed-document', type: 'document', label: 'Document', icon: 'fas fa-file-alt', is_img: false }, + { id: 'fixed-manual-input', type: 'manual-input', label: 'Manual Input', icon: 'fas fa-keyboard', is_img: false }, + { id: 'fixed-table', type: 'table', label: 'Table', icon: 'fas fa-table', is_img: false }, + { id: 'fixed-rack', type: 'rack', label: 'Rack', icon: 'fas fa-columns', is_img: false }, + { id: 'fixed-hourglass', type: 'hourglass', label: 'Hourglass', icon: 'fas fa-hourglass-half', is_img: false }, + { id: 'fixed-arrow-up', type: 'arrow-up', label: 'Arrow Up', icon: 'fas fa-arrow-up', is_img: false }, + { id: 'fixed-arrow-down', type: 'arrow-down', label: 'Arrow Down', icon: 'fas fa-arrow-down', is_img: false }, + { id: 'fixed-arrow-left', type: 'arrow-left', label: 'Arrow Left', icon: 'fas fa-arrow-left', is_img: false }, + { id: 'fixed-arrow-right', type: 'arrow-right', label: 'Arrow Right', icon: 'fas fa-arrow-right', is_img: false }, + { id: 'fixed-rich-card', type: 'rich-card', label: t('rich_card') || 'Rich Text Card', icon: 'fas fa-address-card', is_img: false } +]; + +export function renderFixedSection(container) { + const fixedSection = document.createElement('div'); + fixedSection.className = 'asset-category fixed-category'; + + const title = t('fixed_objects') || 'Fixed Objects'; + + fixedSection.innerHTML = ` +

+ ${title} + +

+ +

+ `; + + // Toggle Logic + const header = fixedSection.querySelector('.category-header'); + header.addEventListener('click', () => { + if (!document.getElementById('sidebar').classList.contains('collapsed')) { + fixedSection.classList.toggle('active'); + } + }); + + // Handle Sidebar Collapsed State (Flyout) + const collapsedIcon = fixedSection.querySelector('.category-collapsed-icon'); + collapsedIcon.addEventListener('click', (e) => { + if (document.getElementById('sidebar').classList.contains('collapsed')) { + e.stopPropagation(); + // Since we don't want to import renderFlyout here to avoid circular dependencies + // we'll dispatch a custom event or check if it's available globally (though not recommended) + // or just let assets.js handle it if we restructure. + // For now, let's trigger a click on a hidden flyout handler or use state. + const event = new CustomEvent('render-fixed-flyout', { + detail: { + container: fixedSection, + assets: FIXED_ASSETS, + meta: { id: 'fixed_objects', label: title } + } + }); + document.dispatchEvent(event); + } + }); + + const grid = fixedSection.querySelector('.asset-grid'); + FIXED_ASSETS.forEach(asset => { + const item = document.createElement('div'); + item.className = 'asset-item'; + item.draggable = true; + item.dataset.type = asset.type; + item.dataset.assetId = asset.id; + item.title = asset.label; + + if (asset.is_img) { + item.innerHTML = `

`; + } else { + item.innerHTML = ``; + } + + item.addEventListener('dragstart', (e) => { + e.dataTransfer.setData('assetId', asset.id); + state.assetMap[asset.id] = { + id: asset.id, + type: asset.type, + path: asset.is_img ? asset.icon : '', + label: asset.label + }; + }); + grid.appendChild(item); + }); + + container.appendChild(fixedSection); +} diff --git a/static/js/modules/assets/index.js b/static/js/modules/assets/index.js new file mode 100644 index 0000000..245f5ab --- /dev/null +++ b/static/js/modules/assets/index.js @@ -0,0 +1,60 @@ +import { state } from '../state.js'; +import { t } from '../i18n.js'; +import { fetchAssets } from './api.js'; +import { renderLibrary, createAssetElement, renderFlyout } from './renderer.js'; +import { renderPackSelector } from './selector.js'; +import { initSearch } from './search.js'; +import { renderFixedSection } from './fixed_objects.js'; +import { logger } from '../utils/logger.js'; + +/** + * initAssets - Main initialization for the asset library sidebar + */ +export async function initAssets() { + try { + const data = await fetchAssets(); + const library = document.querySelector('.asset-library'); + if (!library) return; + + // 1. Initial Header & Global UI + library.innerHTML = ` +

+ ${t('asset_library') || 'Asset Library'} +

+ +

+ `; + + // 2. Setup Manage Packs Button + document.getElementById('manage-packs-btn').onclick = (e) => { + e.stopPropagation(); + renderPackSelector(data.packs || []); + }; + + // 3. Initialize selection if empty + if (state.selectedPackIds.length === 0 && data.packs && data.packs.length > 0) { + state.selectedPackIds = data.packs.map(p => p.id); + localStorage.setItem('selectedPackIds', JSON.stringify(state.selectedPackIds)); + } + + // 4. Render Sections + renderFixedSection(library); + renderLibrary({ ...data, state }, library, renderPackSelector); + + // 5. Handle Flyouts for Fixed/Custom Sections via Event + document.addEventListener('render-fixed-flyout', (e) => { + const { container, assets, meta } = e.detail; + renderFlyout(container, assets, meta); + }); + + initSearch(); + + } catch (e) { + logger.critical("Asset Initialization Error:", e); + } +} + +export { createAssetElement, renderFlyout, renderPackSelector }; diff --git a/static/js/modules/assets/renderer.js b/static/js/modules/assets/renderer.js new file mode 100644 index 0000000..9d3f7f9 --- /dev/null +++ b/static/js/modules/assets/renderer.js @@ -0,0 +1,197 @@ +import { t } from '../i18n.js'; +import { DEFAULTS } from '../constants.js'; + +/** + * createAssetElement - Creates a single asset item DOM element + * @param {Object} asset + * @returns {HTMLElement} + */ +export function createAssetElement(asset, compositeId = null) { + const item = document.createElement('div'); + item.className = 'asset-item'; + item.draggable = true; + item.dataset.type = asset.type || asset.id; + item.dataset.assetId = compositeId || asset.id; + item.title = asset.label; + + // Support legacy 'path', new 'views.icon' or FontAwesome icon class + const isFontAwesome = asset.is_img === false || (!asset.path && !asset.views && asset.icon && asset.icon.includes('fa-')); + + if (isFontAwesome) { + item.innerHTML = ` + + ${t(asset.id) || asset.label || asset.id} + `; + } else { + const iconPath = (asset.views && asset.views.icon) ? asset.views.icon : (asset.path || DEFAULTS.DEFAULT_ICON); + item.innerHTML = ` +

+ ${t(asset.id) || asset.label || asset.id} + `; + } + item.addEventListener('dragstart', (e) => { + e.dataTransfer.setData('assetId', item.dataset.assetId); + }); + return item; +} + +/** + * renderFlyout - Renders the floating category window when sidebar is collapsed + * @param {HTMLElement} container + * @param {Array} assets + * @param {Object} meta + */ +export function renderFlyout(container, assets, meta) { + document.querySelectorAll('.category-flyout').forEach(f => f.remove()); + + const flyout = document.createElement('div'); + flyout.className = 'category-flyout glass-panel active'; + + const rect = container.getBoundingClientRect(); + flyout.style.top = `${Math.max(10, Math.min(window.innerHeight - 400, rect.top))}px`; + flyout.style.left = '90px'; + + flyout.innerHTML = ` + + + `; + const content = flyout.querySelector('.flyout-content'); + + // Group by category for flyout as well + const groups = assets.reduce((acc, a) => { + const cat = a.category || 'Other'; + if (!acc[cat]) acc[cat] = []; + acc[cat].push(a); + return acc; + }, {}); + + Object.keys(groups).sort().forEach(catName => { + if (Object.keys(groups).length > 1 || catName !== 'Other') { + const label = document.createElement('div'); + label.className = 'asset-group-label'; + label.textContent = catName; + content.appendChild(label); + } + + const grid = document.createElement('div'); + grid.className = 'asset-grid flyout-grid'; + groups[catName].forEach(asset => grid.appendChild(createAssetElement(asset))); + content.appendChild(grid); + }); + + document.body.appendChild(flyout); + + const closeFlyout = (e) => { + if (!flyout.contains(e.target)) { + flyout.remove(); + document.removeEventListener('click', closeFlyout); + } + }; + setTimeout(() => document.addEventListener('click', closeFlyout), 10); +} + +/** + * renderLibrary - The main loop that renders the entire asset library + */ +export function renderLibrary(data, library, renderPackSelector) { + const { state } = data; // We expect state to be passed or accessible + const packs = data.packs || []; + const filteredPacks = packs.filter(p => state.selectedPackIds.includes(p.id)); + + // 1. Clear Library (except fixed categories and header) + const dynamicPacks = library.querySelectorAll('.asset-category:not(.fixed-category)'); + dynamicPacks.forEach(p => p.remove()); + + // 2. Group Custom Assets by Pack -> Category + const packGroups = state.assetsData.reduce((acc, asset) => { + const packId = asset.pack_id || 'legacy'; + if (packId !== 'legacy' && !state.selectedPackIds.includes(packId)) return acc; + + const category = asset.category || 'Other'; + if (!acc[packId]) acc[packId] = {}; + if (!acc[packId][category]) acc[packId][category] = []; + + acc[packId][category].push(asset); + return acc; + }, {}); + + // 3. Render each visible Pack + Object.keys(packGroups).forEach((packId, index) => { + const packMeta = packs.find(p => p.id === packId) || { id: packId, name: (packId === 'legacy' ? t('other_assets') : packId) }; + const categories = packGroups[packId]; + + const allAssetsInPack = Object.values(categories).flat(); + + // Ensure proper path is set for pack-based assets + if (packId !== 'legacy') { + allAssetsInPack.forEach(asset => { + if (asset.views && asset.views.icon) { + const icon = asset.views.icon; + // Only prepend packs/ if not already present + if (!icon.startsWith('packs/')) { + asset.path = `packs/${packId}/${icon}`; + } else { + asset.path = icon; + } + } + }); + } + + const firstAsset = allAssetsInPack[0] || {}; + const iconPath = (firstAsset.views && firstAsset.views.icon) ? firstAsset.views.icon : (firstAsset.path || DEFAULTS.DEFAULT_ICON); + + const catContainer = document.createElement('div'); + catContainer.className = `asset-category shadow-sm`; + + const header = document.createElement('div'); + header.className = 'category-header'; + header.innerHTML = `${packMeta.name || packMeta.id}`; + header.onclick = () => { + if (!document.getElementById('sidebar').classList.contains('collapsed')) { + catContainer.classList.toggle('active'); + } + }; + + const collapsedIcon = document.createElement('div'); + collapsedIcon.className = 'category-collapsed-icon'; + collapsedIcon.title = packMeta.name || packMeta.id; + collapsedIcon.innerHTML = `

`; + collapsedIcon.onclick = (e) => { + if (document.getElementById('sidebar').classList.contains('collapsed')) { + e.stopPropagation(); + renderFlyout(catContainer, allAssetsInPack, packMeta); + } + }; + + const content = document.createElement('div'); + content.className = 'category-content'; + + // Render each Category within the Pack + Object.keys(categories).sort().forEach(catName => { + const assets = categories[catName]; + + if (Object.keys(categories).length > 1 || catName !== 'Other') { + const subHeader = document.createElement('div'); + subHeader.className = 'asset-group-label'; + subHeader.textContent = catName; + content.appendChild(subHeader); + } + + const itemGrid = document.createElement('div'); + itemGrid.className = 'asset-grid'; + assets.forEach(asset => { + const compositeId = `${packId}|${asset.id}`; + state.assetMap[compositeId] = asset; + itemGrid.appendChild(createAssetElement(asset, compositeId)); + }); + content.appendChild(itemGrid); + }); + + catContainer.append(header, collapsedIcon, content); + library.appendChild(catContainer); + }); +} + diff --git a/static/js/modules/assets/search.js b/static/js/modules/assets/search.js new file mode 100644 index 0000000..c8f7bd4 --- /dev/null +++ b/static/js/modules/assets/search.js @@ -0,0 +1,35 @@ +import { state } from '../state.js'; + +/** + * initSearch - Initializes the asset search input listener + */ +export function initSearch() { + const searchInput = document.getElementById('asset-search'); + if (!searchInput) return; + + searchInput.addEventListener('input', (e) => { + const query = e.target.value.toLowerCase().trim(); + const categories = document.querySelectorAll('.asset-category'); + + categories.forEach(cat => { + const items = cat.querySelectorAll('.asset-item'); + let hasVisibleItem = false; + + items.forEach(item => { + const assetId = item.dataset.assetId; + const asset = state.assetMap[assetId]; + if (!asset) return; + + const matches = (asset.type && asset.type.toLowerCase().includes(query)) || + (asset.label && asset.label.toLowerCase().includes(query)) || + (asset.vendor && asset.vendor.toLowerCase().includes(query)); + + item.style.display = matches ? 'flex' : 'none'; + if (matches) hasVisibleItem = true; + }); + + cat.style.display = (hasVisibleItem || query === '') ? 'block' : 'none'; + if (query !== '' && hasVisibleItem) cat.classList.add('active'); + }); + }); +} diff --git a/static/js/modules/assets/selector.js b/static/js/modules/assets/selector.js new file mode 100644 index 0000000..4674de1 --- /dev/null +++ b/static/js/modules/assets/selector.js @@ -0,0 +1,64 @@ +import { state } from '../state.js'; +import { t } from '../i18n.js'; + +/** + * renderPackSelector - Show a modal to enable/disable asset packages + */ +export function renderPackSelector(packs) { + let modal = document.getElementById('pack-selector-modal'); + if (!modal) { + modal = document.createElement('div'); + modal.id = 'pack-selector-modal'; + modal.className = 'modal-overlay'; + document.body.appendChild(modal); + } + + const selectedIds = state.selectedPackIds; + + modal.innerHTML = ` + + `; + + modal.classList.add('active'); + + // Close handlers + modal.querySelector('.close-modal').onclick = () => modal.classList.remove('active'); + modal.onclick = (e) => { if (e.target === modal) modal.classList.remove('active'); }; + + // Apply handler + modal.querySelector('.apply-packs').onclick = () => { + const checkboxes = modal.querySelectorAll('input[type="checkbox"]'); + const newSelectedIds = Array.from(checkboxes) + .filter(cb => cb.checked) + .map(cb => cb.dataset.id); + + state.selectedPackIds = newSelectedIds; + localStorage.setItem('selectedPackIds', JSON.stringify(newSelectedIds)); + + // This is a global refresh to re-init everything with new filters + // For a more seamless experience, we could re-call initAssets() + window.location.reload(); + }; +} diff --git a/static/js/modules/constants.js b/static/js/modules/constants.js new file mode 100644 index 0000000..fae3461 --- /dev/null +++ b/static/js/modules/constants.js @@ -0,0 +1,29 @@ +/** + * constants.js - Central repository for magic strings and app configuration + */ + +// LocalStorage Keys +export const STORAGE_KEYS = { + SETTINGS: 'drawNET-settings', + THEME: 'drawNET-theme', + AUTOSAVE: 'drawNET_autosave', + LANGUAGE: 'drawNET_lang' +}; + +// Default Configuration +export const DEFAULTS = { + GRID_SPACING: 20, + GRID_COLOR: '#e2e8f0', + MAJOR_GRID_COLOR: '#cbd5e1', + MAJOR_GRID_INTERVAL: 5, + CANVAS_PRESET: 'A4', + CANVAS_ORIENTATION: 'portrait', + APP_VERSION: '2.0.0-pro', + DEFAULT_ICON: 'router.svg' +}; + +// UI Toggles & States +export const UI_STATES = { + QUAKE_COLLAPSED_HEIGHT: '40px', + QUAKE_EXPANDED_HEIGHT: '300px' +}; diff --git a/static/js/modules/graph.js b/static/js/modules/graph.js new file mode 100644 index 0000000..888db80 --- /dev/null +++ b/static/js/modules/graph.js @@ -0,0 +1,34 @@ +/** + * graph.js - Main Entry for AntV X6 Graph Module + * Modularized version splitting styles, events, interactions, and IO. + */ +import { state } from './state.js'; +import { registerCustomShapes } from './graph/styles.js'; +import { initGraphEvents } from './graph/events/index.js'; +import { initInteractions } from './graph/interactions/index.js'; +import { initGraphIO } from './graph/io/index.js'; +import { initPropertiesSidebar } from './properties_sidebar/index.js'; +import { initContextMenu } from './ui/context_menu/index.js'; +import { getGraphConfig } from './graph/config.js'; +import { initGraphPlugins } from './graph/plugins.js'; +import { logger } from './utils/logger.js'; + +export function initGraph() { + const container = document.getElementById('graph-container'); + if (!container) return; + + // 1. Register Custom Shapes + registerCustomShapes(); + + // 2. Initialize AntV X6 Graph Instance + state.graph = new X6.Graph(getGraphConfig(container)); + + // 3. Enable Plugins + initGraphPlugins(state.graph); + + // 4. Initialize Sub-modules + initGraphEvents(); + initInteractions(); + + logger.high("AntV X6 Graph initialized with modules."); +} diff --git a/static/js/modules/graph/alignment.js b/static/js/modules/graph/alignment.js new file mode 100644 index 0000000..a5b6278 --- /dev/null +++ b/static/js/modules/graph/alignment.js @@ -0,0 +1,139 @@ +import { state } from '../state.js'; +import { logger } from '../utils/logger.js'; + +/** + * Alignment and Distribution tools for drawNET (X6 version). + */ + +/** + * alignNodes - Aligns selected nodes based on the FIRST selected node + * @param {'top'|'bottom'|'left'|'right'|'middle'|'center'} type + */ +export function alignNodes(type) { + if (!state.graph) return; + const selected = state.graph.getSelectedCells().filter(c => c.isNode()); + if (selected.length < 2) return; + + // First selected object is the reference per user request + const reference = selected[0]; + const refPos = reference.getPosition(); + const refSize = reference.getSize(); + + selected.slice(1).forEach(node => { + const pos = node.getPosition(); + const size = node.getSize(); + + switch (type) { + case 'top': + node.setPosition(pos.x, refPos.y); + break; + case 'bottom': + node.setPosition(pos.x, refPos.y + refSize.height - size.height); + break; + case 'left': + node.setPosition(refPos.x, pos.y); + break; + case 'right': + node.setPosition(refPos.x + refSize.width - size.width, pos.y); + break; + case 'middle': + node.setPosition(pos.x, refPos.y + (refSize.height / 2) - (size.height / 2)); + break; + case 'center': + node.setPosition(refPos.x + (refSize.width / 2) - (size.width / 2), pos.y); + break; + } + }); + + notifyChanges(); + logger.info(`drawNET: Aligned ${selected.length} nodes (${type}).`); +} + +/** + * moveNodes - Moves selected nodes by dx, dy + */ +export function moveNodes(dx, dy) { + if (!state.graph) return; + const selected = state.graph.getSelectedCells().filter(c => c.isNode()); + if (selected.length === 0) return; + + selected.forEach(node => { + const pos = node.getPosition(); + node.setPosition(pos.x + dx, pos.y + dy); + }); + + // Sync with persistence after move (with debounce) + clearTimeout(state.moveSyncTimer); + state.moveSyncTimer = setTimeout(() => { + notifyChanges(); + }, 500); +} + +export function distributeNodes(type) { + if (!state.graph) return; + const selected = state.graph.getSelectedCells().filter(c => c.isNode()); + if (selected.length < 3) return; + + const bboxes = selected.map(node => ({ + node, + bbox: node.getBBox() + })); + + if (type === 'horizontal') { + // Sort nodes from left to right + bboxes.sort((a, b) => a.bbox.x - b.bbox.x); + + const first = bboxes[0]; + const last = bboxes[bboxes.length - 1]; + + // Calculate Total Span (Right edge of last - Left edge of first) + const totalSpan = (last.bbox.x + last.bbox.width) - first.bbox.x; + + // Calculate Sum of Node Widths + const sumWidths = bboxes.reduce((sum, b) => sum + b.bbox.width, 0); + + // Total Gap Space + const totalGapSpace = totalSpan - sumWidths; + if (totalGapSpace < 0) return; // Overlapping too much? Skip for now + + const gapSize = totalGapSpace / (bboxes.length - 1); + + let currentX = first.bbox.x; + bboxes.forEach((b, i) => { + if (i > 0) { + currentX += bboxes[i-1].bbox.width + gapSize; + b.node.setPosition(currentX, b.bbox.y); + } + }); + } else if (type === 'vertical') { + // Sort nodes from top to bottom + bboxes.sort((a, b) => a.bbox.y - b.bbox.y); + + const first = bboxes[0]; + const last = bboxes[bboxes.length - 1]; + + const totalSpan = (last.bbox.y + last.bbox.height) - first.bbox.y; + const sumHeights = bboxes.reduce((sum, b) => sum + b.bbox.height, 0); + const totalGapSpace = totalSpan - sumHeights; + if (totalGapSpace < 0) return; + + const gapSize = totalGapSpace / (bboxes.length - 1); + + let currentY = first.bbox.y; + bboxes.forEach((b, i) => { + if (i > 0) { + currentY += bboxes[i-1].bbox.height + gapSize; + b.node.setPosition(b.bbox.x, currentY); + } + }); + } + + notifyChanges(); +} + +/** + * notifyChanges - Marks dirty for persistence + */ +function notifyChanges() { + import('/static/js/modules/persistence.js').then(m => m.markDirty()); +} diff --git a/static/js/modules/graph/analysis.js b/static/js/modules/graph/analysis.js new file mode 100644 index 0000000..6c20ade --- /dev/null +++ b/static/js/modules/graph/analysis.js @@ -0,0 +1,167 @@ +import { state } from '../state.js'; +import { logger } from '../utils/logger.js'; +import { t } from '../i18n.js'; +import { makeDraggable } from '../ui/utils.js'; + +/** + * initInventory - Initializes the real-time inventory counting panel + */ +export function initInventory() { + const inventoryPanel = document.getElementById('inventory-panel'); + const inventoryList = document.getElementById('inventory-list'); + if (!inventoryPanel || !inventoryList) return; + + // Make Draggable + makeDraggable(inventoryPanel, '.inventory-header'); + + // Initial update + updateInventory(inventoryList); + + // Listen for graph changes + if (state.graph) { + state.graph.on('node:added', () => updateInventory(inventoryList)); + state.graph.on('node:removed', () => updateInventory(inventoryList)); + state.graph.on('cell:changed', ({ cell }) => { + if (cell.isNode()) updateInventory(inventoryList); + }); + + // project:restored 이벤트 수신 (복구 시점) + state.graph.on('project:restored', () => { + logger.info("Project restored. Updating inventory."); + updateInventory(inventoryList); + }); + } +} + +/** + * toggleInventory - Toggles the visibility of the inventory panel + */ +export function toggleInventory() { + const panel = document.getElementById('inventory-panel'); + if (!panel) return; + + // Use getComputedStyle for more reliable check + const currentDisplay = window.getComputedStyle(panel).display; + + if (currentDisplay === 'none') { + panel.style.display = 'flex'; + panel.classList.add('animate-up'); + } else { + panel.style.display = 'none'; + } +} + +/** + * updateInventory - Aggregates node counts by type and updates the UI + */ +export function updateInventory(container) { + if (!state.graph) return; + + // Use default container if not provided + if (!container) { + container = document.getElementById('inventory-list'); + } + if (!container) return; + + const nodes = state.graph.getNodes(); + const counts = {}; + + nodes.forEach(node => { + const data = node.getData() || {}; + const type = data.type || 'Unknown'; + counts[type] = (counts[type] || 0) + 1; + }); + + // Render list + container.innerHTML = ''; + + const sortedTypes = Object.keys(counts).sort(); + + if (sortedTypes.length === 0) { + container.innerHTML = `

${t('no_objects_found') || 'No objects found'}

`; + return; + } + + sortedTypes.forEach(type => { + const item = document.createElement('div'); + item.className = 'inventory-item'; + const displayType = t(type.toLowerCase()) || type; + item.innerHTML = ` + ${displayType} + ${counts[type]} + `; + container.appendChild(item); + }); + + // BOM 내보내기 버튼 추가 (푸터) + let footer = document.querySelector('.inventory-footer'); + if (!footer) { + footer = document.createElement('div'); + footer.className = 'inventory-footer'; + } + footer.innerHTML = ` + + `; + container.appendChild(footer); + + const btn = document.getElementById('btn-export-bom'); + if (btn) btn.onclick = downloadBOM; +} + +/** + * downloadBOM - 가시화된 모든 노드 정보를 엑셀/CSV 형태로 추출 + */ +function downloadBOM() { + if (!state.graph) return; + + const nodes = state.graph.getNodes(); + if (nodes.length === 0) return; + + // 헤더 정의 + const headers = [ + t('prop_id'), t('display_name'), t('prop_type'), + t('prop_vendor'), t('prop_model'), t('prop_ip'), + t('prop_status'), t('prop_asset_tag'), t('prop_project'), t('prop_env') + ]; + + // 데이터 행 생성 + const rows = nodes.map(node => { + const data = node.getData() || {}; + const label = node.attr('label/text') || ''; + return [ + node.id, + label, + data.type || '', + data.vendor || '', + data.model || '', + data.ip || '', + data.status || '', + data.asset_tag || '', + data.project || '', + data.env || '' + ].map(val => `"${String(val).replace(/"/g, '""')}"`); // CSV 이스케이프 + }); + + // CSV 문자열 합치기 + const csvContent = "\uFEFF" + // UTF-8 BOM for Excel kor + headers.join(',') + "\n" + + rows.map(r => r.join(',')).join('\n'); + + // 다운로드 트리거 + const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + const link = document.createElement("a"); + const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19); + + link.setAttribute("href", url); + link.setAttribute("download", `drawNET_BOM_${timestamp}.csv`); + link.style.visibility = 'hidden'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + logger.info("BOM exported successfully."); +} diff --git a/static/js/modules/graph/config.js b/static/js/modules/graph/config.js new file mode 100644 index 0000000..0cb6dad --- /dev/null +++ b/static/js/modules/graph/config.js @@ -0,0 +1,134 @@ +import { DEFAULTS } from '../constants.js'; +import { state } from '../state.js'; +import { calculateCellZIndex } from './layers.js'; +import { getSettings } from '../settings/store.js'; + +/** + * graph/config.js - X6 Graph configuration options + */ +export const getGraphConfig = (container) => { + const settings = getSettings(); + const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; + const defaultBg = isDark ? '#1e293b' : '#f8fafc'; + + return { + container: container, + autoResize: true, + background: { color: settings.bgColor || defaultBg }, + grid: { + visible: settings.gridStyle !== 'none', + type: settings.gridStyle === 'solid' ? 'mesh' : (settings.gridStyle === 'dashed' ? 'doubleMesh' : 'dot'), + size: settings.gridSpacing || DEFAULTS.GRID_SPACING, + args: { + color: settings.gridColor || DEFAULTS.GRID_COLOR, + thickness: settings.gridThickness || 1 + }, + }, + panning: { + enabled: true, + modifiers: 'space', + }, + history: { + enabled: true, + }, + mousewheel: { + enabled: true, + modifiers: ['ctrl', 'meta'], + factor: state.appConfig?.mousewheel?.factor || 1.05, + minScale: state.appConfig?.mousewheel?.minScale || 0.1, + maxScale: state.appConfig?.mousewheel?.maxScale || 10, + }, + connecting: { + router: null, + connector: { name: 'jumpover', args: { type: 'arc', size: 6 } }, + anchor: 'orth', + connectionPoint: 'boundary', + allowNode: false, + allowBlank: false, + snap: { radius: 20 }, + createEdge() { + const edgeData = { + layerId: state.activeLayerId || 'l1', + routing_offset: 20, + direction: 'none', + description: "", + asset_tag: "" + }; + + return new X6.Shape.Edge({ + attrs: { + line: { + stroke: '#94a3b8', + strokeWidth: 2, + targetMarker: null + }, + }, + zIndex: calculateCellZIndex(edgeData, 0, false), + data: edgeData + }) + }, + validateConnection({ sourceMagnet, targetMagnet }) { + return !!sourceMagnet && !!targetMagnet; + }, + highlight: true, + }, + embedding: { + enabled: true, + findParent({ node }) { + const bbox = node.getBBox(); + const candidates = this.getNodes().filter((n) => { + const data = n.getData(); + if (data && data.is_group && n.id !== node.id) { + const targetBBox = n.getBBox(); + return targetBBox.containsRect(bbox); + } + return false; + }); + + if (candidates.length === 0) return []; + if (candidates.length === 1) return [candidates[0]]; + + // Return the one with the smallest area (the innermost one) + const bestParent = candidates.reduce((smallest, current) => { + const smallestBBox = smallest.getBBox(); + const currentBBox = current.getBBox(); + const currentArea = currentBBox.width * currentBBox.height; + const smallestArea = smallestBBox.width * smallestBBox.height; + + if (currentArea < smallestArea) return current; + if (currentArea > smallestArea) return smallest; + + // If areas are equal, pick the one that is a descendant of the other + if (current.getAncestors().some(a => a.id === smallest.id)) return current; + return smallest; + }); + + return [bestParent]; + + }, + validate({ child, parent }) { + return parent.getData()?.is_group; + }, + }, + interacting: { + nodeMovable: (view) => { + if (state.isCtrlPressed) return false; // Block default move during Ctrl+Drag + return view.cell.getProp('movable') !== false; + }, + edgeMovable: (view) => { + if (state.isCtrlPressed) return false; + return view.cell.getProp('movable') !== false; + }, + edgeLabelMovable: (view) => view.cell.getProp('movable') !== false, + arrowheadMovable: (view) => view.cell.getProp('movable') !== false, + vertexMovable: (view) => view.cell.getProp('movable') !== false, + vertexAddable: (view) => { + if (view.cell.getProp('movable') === false) return false; + // Only allow adding vertices if the edge is ALREADY selected. + // This prevents accidental addition on the first click (which selects the edge). + return view.graph.isSelected(view.cell); + }, + vertexDeletable: (view) => view.cell.getProp('movable') !== false, + }, +}; +}; diff --git a/static/js/modules/graph/events/index.js b/static/js/modules/graph/events/index.js new file mode 100644 index 0000000..80bbae6 --- /dev/null +++ b/static/js/modules/graph/events/index.js @@ -0,0 +1,18 @@ +import { initSystemEvents } from './system.js'; +import { initViewportEvents } from './viewport.js'; +import { initSelectionEvents } from './selection.js'; +import { initNodeEvents } from './nodes.js'; +import { initRoutingEvents } from './routing.js'; + +export { updateGridBackground } from './system.js'; + +/** + * initGraphEvents - Orchestrates the initialization of all specialized event modules. + */ +export function initGraphEvents() { + initSystemEvents(); + initViewportEvents(); + initSelectionEvents(); + initNodeEvents(); + initRoutingEvents(); +} diff --git a/static/js/modules/graph/events/nodes.js b/static/js/modules/graph/events/nodes.js new file mode 100644 index 0000000..9f41adf --- /dev/null +++ b/static/js/modules/graph/events/nodes.js @@ -0,0 +1,98 @@ +import { state } from '../../state.js'; +import { generateRackUnitsPath } from '../styles/utils.js'; + +export function initNodeEvents() { + if (!state.graph) return; + + // Hover Guides for specific objects + state.graph.on('node:mouseenter', ({ node }) => { + if (node.shape === 'drawnet-dot') { + node.attr('hit/stroke', 'rgba(59, 130, 246, 0.4)'); + node.attr('hit/strokeDasharray', '2,2'); + } + }); + + state.graph.on('node:mouseleave', ({ node }) => { + if (node.shape === 'drawnet-dot') { + node.attr('hit/stroke', 'transparent'); + node.attr('hit/strokeDasharray', '0'); + } + }); + + // Rack Drill Down Interaction + state.graph.on('node:dblclick', ({ node }) => { + const data = node.getData() || {}; + if (data.layerId !== state.activeLayerId) return; // Guard: Block drills into other layers + + if (node.shape === 'drawnet-rack') { + state.graph.zoomToCell(node, { + padding: { top: 60, bottom: 60, left: 100, right: 100 }, + animation: { duration: 600 } + }); + + state.graph.getCells().forEach(cell => { + if (cell.id !== node.id && !node.getDescendants().some(d => d.id === cell.id)) { + cell.setAttrs({ body: { opacity: 0.1 }, image: { opacity: 0.1 }, label: { opacity: 0.1 }, line: { opacity: 0.1 } }); + } else { + cell.setAttrs({ body: { opacity: 1 }, image: { opacity: 1 }, label: { opacity: 1 }, line: { opacity: 1 } }); + } + }); + + showBackToTopBtn(); + } + }); + + // Parent/Structural Changes + state.graph.on('node:change:parent', ({ node, current }) => { + const parentId = current || null; + const currentData = node.getData() || {}; + node.setData({ ...currentData, parent: parentId }); + + import('../layers.js').then(m => m.applyLayerFilters()); + import('/static/js/modules/properties_sidebar/index.js').then(m => m.renderProperties()); + import('/static/js/modules/persistence.js').then(m => m.markDirty()); + }); + + // Data Syncing (Rack-specific) + state.graph.on('node:change:data', ({ node, current }) => { + if (node.shape === 'drawnet-rack') { + const slots = current.slots || 42; + const bbox = node.getBBox(); + node.attr('units/d', generateRackUnitsPath(bbox.height, slots)); + + if (!current.label || current.label.startsWith('Rack (')) { + node.attr('label/text', `Rack (${slots}U)`); + } + } + + // Rich Card Content Refresh on Data Change + if (node.shape === 'drawnet-rich-card') { + import('../styles/utils.js').then(m => m.renderRichContent(node)); + } + }); +} + +function showBackToTopBtn() { + let btn = document.getElementById('rack-back-btn'); + if (btn) btn.remove(); + + btn = document.createElement('div'); + btn.id = 'rack-back-btn'; + btn.innerHTML = ' Back to Topology'; + btn.style.cssText = ` + position: absolute; top: 100px; left: 300px; z-index: 1000; + padding: 10px 20px; background: #3b82f6; color: white; + border-radius: 8px; cursor: pointer; font-weight: bold; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: all 0.2s; + `; + + btn.onclick = () => { + state.graph.zoomToFit({ padding: 100, animation: { duration: 500 } }); + state.graph.getCells().forEach(cell => { + cell.setAttrs({ body: { opacity: 1 }, image: { opacity: 1 }, label: { opacity: 1 }, line: { opacity: 1 } }); + }); + btn.remove(); + }; + + document.getElementById('graph-container').parentElement.appendChild(btn); +} diff --git a/static/js/modules/graph/events/routing.js b/static/js/modules/graph/events/routing.js new file mode 100644 index 0000000..8494eb1 --- /dev/null +++ b/static/js/modules/graph/events/routing.js @@ -0,0 +1,60 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; + +export function initRoutingEvents() { + if (!state.graph) return; + + // Re-evaluate routing when nodes are moved to handle adaptive fallback (Phase 1.18) + state.graph.on('node:change:position', ({ node }) => { + const edges = state.graph.getConnectedEdges(node); + if (edges.length === 0) return; + + import('/static/js/modules/graph/styles.js').then(({ getX6EdgeConfig }) => { + edges.forEach(edge => { + const data = edge.getData() || {}; + const config = getX6EdgeConfig({ + source: edge.getSource().cell, + target: edge.getTarget().cell, + ...data + }); + + if (config.router !== edge.getRouter()) { + edge.setRouter(config.router || null); + logger.info(`drawNET: Dynamic Routing Update for ${edge.id}`); + } + if (config.connector !== edge.getConnector()) { + edge.setConnector(config.connector); + } + // Sync physical connections during move (especially for manual anchors) + if (config.source) edge.setSource(config.source); + if (config.target) edge.setTarget(config.target); + }); + }); + }); + + // Unify styling when an edge is newly connected via mouse (Phase 1.19) + state.graph.on('edge:connected', ({ edge }) => { + if (!edge || !edge.isEdge()) return; + + import('/static/js/modules/graph/styles.js').then(({ getX6EdgeConfig }) => { + const data = edge.getData() || {}; + const config = getX6EdgeConfig({ + source: edge.getSource().cell, + target: edge.getTarget().cell, + ...data + }); + + // Apply official style & configuration + if (config.source) edge.setSource(config.source); + if (config.target) edge.setTarget(config.target); + edge.setRouter(config.router || null); + edge.setConnector(config.connector); + edge.setZIndex(config.zIndex || 5); + + if (config.attrs) { + edge.setAttrs(config.attrs); + } + logger.info(`drawNET: Unified Style applied to new edge ${edge.id}`); + }); + }); +} diff --git a/static/js/modules/graph/events/selection.js b/static/js/modules/graph/events/selection.js new file mode 100644 index 0000000..816849b --- /dev/null +++ b/static/js/modules/graph/events/selection.js @@ -0,0 +1,55 @@ +import { state } from '../../state.js'; + +export function initSelectionEvents() { + if (!state.graph) return; + + state.graph.on('cell:selected', ({ cell }) => { + if (cell.isNode()) { + if (!state.selectionOrder.includes(cell.id)) { + state.selectionOrder.push(cell.id); + } + } else if (cell.isEdge()) { + // Add vertices tool for manual routing control (unless locked) + if (!cell.getData()?.locked) { + cell.addTools([{ name: 'vertices' }]); + } + + // ADD S/T labels for clear identification of Start and Target + const currentLabels = cell.getLabels() || []; + cell.setLabels([ + ...currentLabels, + { id: 'selection-source-label', position: { distance: 0.05 }, attrs: { text: { text: 'S', fill: '#10b981', fontSize: 10, fontWeight: 'bold' }, rect: { fill: '#ffffff', stroke: '#10b981', strokeWidth: 1, rx: 2, ry: 2 } } }, + { id: 'selection-target-label', position: { distance: 0.95 }, attrs: { text: { text: 'T', fill: '#ef4444', fontSize: 10, fontWeight: 'bold' }, rect: { fill: '#ffffff', stroke: '#ef4444', strokeWidth: 1, rx: 2, ry: 2 } } } + ]); + } + }); + + state.graph.on('cell:unselected', ({ cell }) => { + const isLocked = cell.getData()?.locked; + + if (cell.isEdge()) { + if (!isLocked) { + cell.removeTools(); + } else { + // Keep boundary if locked, but remove selection-only tools if any + cell.removeTools(['vertices']); + } + + // Remove selection labels safely + const labels = cell.getLabels() || []; + const filteredLabels = labels.filter(l => + l.id !== 'selection-source-label' && l.id !== 'selection-target-label' + ); + cell.setLabels(filteredLabels); + } else if (cell.isNode()) { + if (!isLocked) { + cell.removeTools(); + } + } + state.selectionOrder = state.selectionOrder.filter(id => id !== cell.id); + }); + + state.graph.on('blank:click', () => { + state.selectionOrder = []; + }); +} diff --git a/static/js/modules/graph/events/system.js b/static/js/modules/graph/events/system.js new file mode 100644 index 0000000..d0d7ce0 --- /dev/null +++ b/static/js/modules/graph/events/system.js @@ -0,0 +1,132 @@ +import { state } from '../../state.js'; +import { updateGraphTheme } from '../styles.js'; +import { DEFAULTS } from '../../constants.js'; + +export function initSystemEvents() { + if (!state.graph) return; + + // Theme changes + window.addEventListener('themeChanged', () => { + updateGraphTheme(); + const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; + state.graph.drawBackground({ color: isDark ? '#1e293b' : '#f8fafc' }); + }); + + // Background color changes (from settings) + window.addEventListener('backgroundChanged', (e) => { + if (state.graph) { + state.graph.drawBackground({ color: e.detail.color }); + } + }); + + // Canvas resize event + window.addEventListener('canvasResize', (e) => { + const { width, height } = e.detail; + state.canvasSize = { width, height }; + const container = document.getElementById('graph-container'); + + if (width === '100%') { + container.style.width = '100%'; + container.style.height = '100%'; + container.style.boxShadow = 'none'; + container.style.margin = '0'; + state.graph.resize(); + } else { + container.style.width = `${width}px`; + container.style.height = `${height}px`; + container.style.boxShadow = '0 10px 30px rgba(0,0,0,0.1)'; + container.style.margin = '40px auto'; + container.style.backgroundColor = '#fff'; + state.graph.resize(width, height); + } + }); + + // Grid type change + window.addEventListener('gridChanged', (e) => { + state.gridStyle = e.detail.style; + if (!state.graph) return; + + if (e.detail.style === 'none') { + state.graph.hideGrid(); + state.isSnapEnabled = false; + } else { + state.graph.showGrid(); + state.isSnapEnabled = true; + + if (e.detail.showMajor) { + state.graph.drawGrid({ + type: 'doubleMesh', + args: [ + { + color: e.detail.majorColor || DEFAULTS.MAJOR_GRID_COLOR, + thickness: (e.detail.thickness || 1) * 1.5, + factor: e.detail.majorInterval || DEFAULTS.MAJOR_GRID_INTERVAL + }, + { + color: e.detail.color || DEFAULTS.GRID_COLOR, + thickness: e.detail.thickness || 1 + }, + ], + }); + } else { + const gridType = e.detail.style === 'solid' ? 'mesh' : (e.detail.style === 'dashed' ? 'doubleMesh' : 'dot'); + state.graph.drawGrid({ + type: gridType, + args: [ + { + color: e.detail.color || DEFAULTS.GRID_COLOR, + thickness: e.detail.thickness || 1 + }, + ], + }); + } + state.graph.setGridSize(state.gridSpacing || DEFAULTS.GRID_SPACING); + } + }); + + // Grid spacing change + window.addEventListener('gridSpacingChanged', (e) => { + state.gridSpacing = e.detail.spacing; + if (state.graph) { + state.graph.setGridSize(state.gridSpacing); + } + }); + + // Global Data Sanitizer & Enforcer (Ensures all objects have latest schema defaults) + // This handles all creation paths: Drag-and-Drop, Copy-Paste, Grouping, and programatic addEdge. + state.graph.on('cell:added', ({ cell }) => { + const data = cell.getData() || {}; + let updated = false; + + // 1. Common Fields for all Node/Edge objects + if (data.description === undefined) { data.description = ""; updated = true; } + if (data.asset_tag === undefined) { data.asset_tag = ""; updated = true; } + if (!data.tags) { data.tags = []; updated = true; } + if (data.locked === undefined) { data.locked = false; updated = true; } + + // 2. Ensure label_pos exists to prevent display reset + if (data.label_pos === undefined) { + data.label_pos = data.is_group ? 'top' : (['rect', 'circle', 'rounded-rect', 'text-box', 'label'].includes((data.type || '').toLowerCase()) ? 'center' : 'bottom'); + updated = true; + } + + // 3. Edge Specific Defaults + if (cell.isEdge()) { + if (data.routing_offset === undefined) { data.routing_offset = 20; updated = true; } + } + + if (updated) { + // Use silent: true to prevent triggering another 'cell:added' if someone is listening to data changes + cell.setData(data, { silent: true }); + } + + // Keep existing layer logic + import('../layers.js').then(m => m.applyLayerFilters()); + }); +} + +export function updateGridBackground() { + if (!state.graph) return; + state.graph.setGridSize(state.gridSpacing || DEFAULTS.GRID_SPACING); + state.graph.showGrid(); +} diff --git a/static/js/modules/graph/events/viewport.js b/static/js/modules/graph/events/viewport.js new file mode 100644 index 0000000..0db6917 --- /dev/null +++ b/static/js/modules/graph/events/viewport.js @@ -0,0 +1,80 @@ +import { state } from '../../state.js'; + +let isRightDragging = false; +let startX = 0; +let startY = 0; +const threshold = 5; + +/** + * Handle mousedown on the graph to initialize right-click panning. + */ +const handleGraphMouseDown = ({ e }) => { + if (e.button === 2) { // Right Click + isRightDragging = false; + startX = e.clientX; + startY = e.clientY; + state.isRightDragging = false; + } +}; + +/** + * Global event handler for mousemove to support panning. + * Registered only once on document level. + */ +const onMouseMove = (e) => { + if (e.buttons === 2 && state.graph) { + const dx = e.clientX - startX; + const dy = e.clientY - startY; + + // Detect dragging start (beyond threshold) + if (!isRightDragging && (Math.abs(dx) > threshold || Math.abs(dy) > threshold)) { + isRightDragging = true; + state.isRightDragging = true; + // Sync start positions to current mouse position to avoid the initial jump + startX = e.clientX; + startY = e.clientY; + return; + } + + if (isRightDragging) { + state.graph.translateBy(dx, dy); + startX = e.clientX; + startY = e.clientY; + } + } +}; + +/** + * Global event handler for mouseup to finish panning. + * Registered only once on document level. + */ +const onMouseUp = () => { + if (isRightDragging) { + // Reset after a short delay to allow contextmenu event to check the flag + setTimeout(() => { + state.isRightDragging = false; + isRightDragging = false; + }, 100); + } +}; + +/** + * Initializes viewport-related events for the current graph instance. + * Should be called whenever a new graph is created. + */ +export function initViewportEvents() { + if (!state.graph) return; + + // Attach to the specific graph instance, ensuring no duplicates + state.graph.off('blank:mousedown', handleGraphMouseDown); + state.graph.on('blank:mousedown', handleGraphMouseDown); + state.graph.off('cell:mousedown', handleGraphMouseDown); + state.graph.on('cell:mousedown', handleGraphMouseDown); + + // Register document-level listeners only once per page session + if (!window._drawNetViewportEventsInitialized) { + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + window._drawNetViewportEventsInitialized = true; + } +} diff --git a/static/js/modules/graph/interactions/drop.js b/static/js/modules/graph/interactions/drop.js new file mode 100644 index 0000000..ae872be --- /dev/null +++ b/static/js/modules/graph/interactions/drop.js @@ -0,0 +1,95 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; +import { t } from '../../i18n.js'; +import { getX6NodeConfig } from '../styles.js'; + +/** + * initDropHandling - Sets up drag and drop from the asset library to the graph + */ +export function initDropHandling(container) { + container.addEventListener('dragover', (e) => e.preventDefault()); + + container.addEventListener('drop', (e) => { + e.preventDefault(); + const assetId = e.dataTransfer.getData('assetId'); + const asset = state.assetMap[assetId]; + const pos = state.graph.clientToLocal(e.clientX, e.clientY); + + logger.info(`Drop Event at {${pos.x}, ${pos.y}}`, { + assetId: assetId, + found: !!asset, + id: asset?.id, + path: asset?.path, + type: asset?.type, + rawAsset: asset + }); + + if (!asset) { + logger.high(`Asset [${assetId}] not found in map`); + return; + } + + // Logical Layer Guard: Block dropping new nodes + const activeLayer = state.layers.find(l => l.id === state.activeLayerId); + if (activeLayer && activeLayer.type === 'logical') { + import('../../ui/utils.js').then(m => m.showToast(t('err_logical_layer_drop'), 'warning')); + return; + } + + const isPrimitive = ['rect', 'rounded-rect', 'circle', 'text-box', 'label'].includes(asset.type); + const prefix = asset.id === 'fixed-group' ? 'group_' : (asset.type === 'blank' || asset.type === 'dot' ? 'p_' : (isPrimitive ? 'shp_' : 'node_')); + const id = prefix + Math.random().toString(36).substr(2, 4); + + // Use translate keys or asset label first, or fallback to generic name + let initialLabel = asset.label || t(asset.id) || (asset.id === 'fixed-group' ? 'New Group' : 'New ' + (asset.type || 'Object')); + if (asset.id === 'fixed-group') initialLabel = t('group') || 'New Group'; + + // Find if dropped over a group (prefer the smallest/innermost one) + const candidates = state.graph.getNodes().filter(n => { + if (!n.getData()?.is_group) return false; + const bbox = n.getBBox(); + return bbox.containsPoint(pos); + }); + + const parent = candidates.length > 0 + ? candidates.reduce((smallest, current) => { + const smallestBBox = smallest.getBBox(); + const currentBBox = current.getBBox(); + const currentArea = currentBBox.width * currentBBox.height; + const smallestArea = smallestBBox.width * smallestBBox.height; + + if (currentArea < smallestArea) return current; + if (currentArea > smallestArea) return smallest; + + // If areas are equal, pick the one that is a descendant of the other + if (current.getAncestors().some(a => a.id === smallest.id)) return current; + return smallest; + }) + : undefined; + + + // 2. Add to X6 immediately + const config = getX6NodeConfig({ + id: id, + label: initialLabel, + type: asset.type || asset.category || asset.label || 'Unknown', + assetId: assetId, // Store unique composite ID for lookup + assetPath: asset.id === 'fixed-group' ? undefined : asset.path, + is_group: asset.id === 'fixed-group' || asset.is_group === true, + pos: { x: pos.x, y: pos.y }, + parent: parent ? parent.id : undefined, + layerId: state.activeLayerId, + description: "", + asset_tag: "", + tags: [] + }); + + const newNode = state.graph.addNode(config); + if (parent) { + parent.addChild(newNode); + } + + // Ensure the new node follows the active layer's interaction rules immediately + import('../layers.js').then(m => m.applyLayerFilters()); + }); +} diff --git a/static/js/modules/graph/interactions/edges.js b/static/js/modules/graph/interactions/edges.js new file mode 100644 index 0000000..5311ac3 --- /dev/null +++ b/static/js/modules/graph/interactions/edges.js @@ -0,0 +1,47 @@ +/** + * graph/interactions/edges.js - Handles edge connection logic and metadata assignment. + */ +import { state } from '../../state.js'; + +/** + * initEdgeHandling - Sets up edge connection events + */ +export function initEdgeHandling() { + state.graph.on('edge:connected', ({ edge }) => { + const sourceId = edge.getSourceCellId(); + const targetId = edge.getTargetCellId(); + if (!sourceId || !targetId) return; + + // Assign to current active layer and apply standard styling + import('/static/js/modules/graph/styles.js').then(({ getX6EdgeConfig }) => { + // [6개월 뒤의 나를 위한 메모] + // 단순 유추가 아닌 명시적 기록을 통해, 도면 전체를 전송하지 않고도 연결선 단독으로 + // 크로스 레이어 여부를 파악할수 있게 하여 외부 도구/AI 연동 안정성을 높임. + const sourceNode = state.graph.getCellById(sourceId); + const targetNode = state.graph.getCellById(targetId); + const sourceLayer = sourceNode?.getData()?.layerId || state.activeLayerId; + const targetLayer = targetNode?.getData()?.layerId || state.activeLayerId; + const isCrossLayer = (sourceLayer !== targetLayer); + + const edgeData = { + source: sourceId, + target: targetId, + layerId: state.activeLayerId, + source_layer: sourceLayer, + target_layer: targetLayer, + is_cross_layer: isCrossLayer, + ...edge.getData() + }; + + const config = getX6EdgeConfig(edgeData); + + // Apply standardized config to the new edge + edge.setData(edgeData, { silent: true }); + if (config.router) edge.setRouter(config.router); + else edge.setRouter(null); + + if (config.connector) edge.setConnector(config.connector); + edge.setAttrs(config.attrs); + }); + }); +} diff --git a/static/js/modules/graph/interactions/index.js b/static/js/modules/graph/interactions/index.js new file mode 100644 index 0000000..c4262cb --- /dev/null +++ b/static/js/modules/graph/interactions/index.js @@ -0,0 +1,23 @@ +import { state } from '../../state.js'; +import { initDropHandling } from './drop.js'; +import { initEdgeHandling } from './edges.js'; +import { initSnapping } from './snapping.js'; +import { initSpecialShortcuts } from './shortcuts.js'; +import { logger } from '../../utils/logger.js'; + +/** + * initInteractions - Entry point for all graph interactions + */ +export function initInteractions() { + if (!state.graph) return; + + const container = state.graph.container; + + // 1. Initialize Sub-modules + initDropHandling(container); + initEdgeHandling(); + initSnapping(); + initSpecialShortcuts(); + + logger.info("Graph interactions initialized via modules."); +} diff --git a/static/js/modules/graph/interactions/shortcuts.js b/static/js/modules/graph/interactions/shortcuts.js new file mode 100644 index 0000000..6a8b138 --- /dev/null +++ b/static/js/modules/graph/interactions/shortcuts.js @@ -0,0 +1,125 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; + +/** + * initSpecialShortcuts - Sets up specialized mouse/keyboard combined gestures + */ +export function initSpecialShortcuts() { + if (!state.graph) return; + + let dragStartData = null; + + // Ctrl + Drag to Copy: Improved Ghost Logic + state.graph.on('node:mousedown', ({ e, node }) => { + // Support both Ctrl (Windows) and Cmd (Mac) + const isModifier = e.ctrlKey || e.metaKey; + if (isModifier && e.button === 0) { + const selected = state.graph.getSelectedCells(); + const targets = selected.includes(node) ? selected : [node]; + + // 1. Initial State for tracking + const mouseStart = state.graph.clientToLocal(e.clientX, e.clientY); + dragStartData = { + targets: targets, + mouseStart: mouseStart, + initialNodesPos: targets.map(t => ({ ...t.position() })), + ghost: null + }; + + const onMouseMove = (moveEvt) => { + if (!dragStartData) return; + + const mouseNow = state.graph.clientToLocal(moveEvt.clientX, moveEvt.clientY); + const dx = mouseNow.x - dragStartData.mouseStart.x; + const dy = mouseNow.y - dragStartData.mouseStart.y; + + // Create Ghost on movement + if (!dragStartData.ghost && (Math.abs(dx) > 2 || Math.abs(dy) > 2)) { + const cellsBBox = state.graph.getCellsBBox(dragStartData.targets); + dragStartData.ghost = state.graph.addNode({ + shape: 'rect', + x: cellsBBox.x, + y: cellsBBox.y, + width: cellsBBox.width, + height: cellsBBox.height, + attrs: { + body: { + fill: 'rgba(59, 130, 246, 0.1)', + stroke: '#3b82f6', + strokeWidth: 2, + strokeDasharray: '5,5', + pointerEvents: 'none' + } + }, + zIndex: 1000 + }); + dragStartData.initialGhostPos = { x: cellsBBox.x, y: cellsBBox.y }; + } + + if (dragStartData.ghost) { + dragStartData.ghost.position( + dragStartData.initialGhostPos.x + dx, + dragStartData.initialGhostPos.y + dy + ); + } + }; + + const onMouseUp = (upEvt) => { + cleanup(upEvt.button === 0); + }; + + const onKeyDown = (keyEvt) => { + if (keyEvt.key === 'Escape') { + cleanup(false); // Cancel on ESC + } + }; + + function cleanup(doPaste) { + if (dragStartData) { + if (doPaste && dragStartData.ghost) { + const finalPos = dragStartData.ghost.position(); + const dx = finalPos.x - dragStartData.initialGhostPos.x; + const dy = finalPos.y - dragStartData.initialGhostPos.y; + + if (Math.abs(dx) > 5 || Math.abs(dy) > 5) { + state.graph.copy(dragStartData.targets, { deep: true }); + let clones = state.graph.paste({ offset: { dx, dy }, select: true }); + + // Logical Layer Guard: Filter out nodes if target layer is logical + const activeLayer = state.layers.find(l => l.id === state.activeLayerId); + if (activeLayer && activeLayer.type === 'logical') { + clones.forEach(clone => { + if (clone.isNode()) clone.remove(); + }); + clones = clones.filter(c => !c.isNode()); + if (clones.length === 0) { + import('/static/js/modules/ui/utils.js').then(m => m.showToast(t('err_logical_layer_drop'), 'warning')); + } + } + + clones.forEach(clone => { + if (clone.isNode()) { + const d = clone.getData() || {}; + clone.setData({ ...d, id: clone.id }, { silent: true }); + } + }); + import('/static/js/modules/persistence.js').then(m => m.markDirty()); + } + } + + if (dragStartData.ghost) dragStartData.ghost.remove(); + } + dragStartData = null; + window.removeEventListener('mousemove', onMouseMove, true); + window.removeEventListener('mouseup', onMouseUp, true); + window.removeEventListener('keydown', onKeyDown, true); + } + + window.addEventListener('mousemove', onMouseMove, true); + window.addEventListener('mouseup', onMouseUp, true); + window.addEventListener('keydown', onKeyDown, true); + } + }); + + logger.info("initSpecialShortcuts (Ctrl+Drag with ESC Failsafe) initialized."); +} diff --git a/static/js/modules/graph/interactions/snapping.js b/static/js/modules/graph/interactions/snapping.js new file mode 100644 index 0000000..9646b72 --- /dev/null +++ b/static/js/modules/graph/interactions/snapping.js @@ -0,0 +1,48 @@ +import { state } from '../../state.js'; + +/** + * initSnapping - Sets up snapping and grouping interactions during movement + */ +export function initSnapping() { + // 1. Rack Snapping Logic + state.graph.on('node:moving', ({ node }) => { + const parent = node.getParent(); + if (parent && parent.shape === 'drawnet-rack') { + const rackBBox = parent.getBBox(); + const nodeSize = node.size(); + const pos = node.getPosition(); + + const headerHeight = 30; + const rackBodyHeight = rackBBox.height - headerHeight; + const unitCount = parent.getData()?.slots || 42; + const unitHeight = rackBodyHeight / unitCount; + + const centerX = rackBBox.x + (rackBBox.width - nodeSize.width) / 2; + const relativeY = pos.y - rackBBox.y - headerHeight; + const snapY = rackBBox.y + headerHeight + Math.round(relativeY / unitHeight) * unitHeight; + + node.setPosition(centerX, snapY, { silent: true }); + } + }); + + // 2. Parent-Child Relationship Update on Move End + state.graph.on('node:moved', ({ node }) => { + if (node.getData()?.is_group) return; + + let parent = node.getParent(); + + if (!parent) { + const pos = node.getPosition(); + const center = { x: pos.x + node.size().width / 2, y: pos.y + node.size().height / 2 }; + parent = state.graph.getNodes().find(n => { + if (n.id === node.id || !n.getData()?.is_group) return false; + const bbox = n.getBBox(); + return bbox.containsPoint(center); + }); + } + + if (parent && node.getParent()?.id !== parent.id) { + parent.addChild(node); + } + }); +} diff --git a/static/js/modules/graph/io/excel_exporter.js b/static/js/modules/graph/io/excel_exporter.js new file mode 100644 index 0000000..28084cf --- /dev/null +++ b/static/js/modules/graph/io/excel_exporter.js @@ -0,0 +1,120 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; +import { t } from '../../i18n.js'; + +/** + * excel_exporter.js - Exports topology data to a structured CSV format compatible with Excel. + * Includes all metadata (Parent Group, Tags, Description) for both Nodes and Edges. + */ + +export function exportToExcel() { + if (!state.graph) return; + + const nodes = state.graph.getNodes(); + const edges = state.graph.getEdges(); + + if (nodes.length === 0 && edges.length === 0) { + alert(t('pptx_no_data') || 'No data to export.'); + return; + } + + // Header Definition (Unified for mapping ease) + const headers = [ + "Category", + "ID", + "Label/Name", + "Type", + "Parent Group", + "Source (ID/Label)", + "Target (ID/Label)", + "Tags", + "Description", + "IP Address", + "Vendor", + "Model", + "Asset Tag" + ]; + + const csvRows = []; + + // Add Nodes + nodes.forEach(node => { + const d = node.getData() || {}; + const label = node.attr('label/text') || d.label || ''; + + // Find Parent Group Name + let parentName = ''; + const parent = node.getParent(); + if (parent && parent.isNode()) { + parentName = parent.attr('label/text') || parent.getData()?.label || parent.id; + } + + csvRows.push([ + "Node", + node.id, + label, + d.type || '', + parentName, + "", // Source + "", // Target + (d.tags || []).join('; '), + d.description || '', + d.ip || '', + d.vendor || '', + d.model || '', + d.asset_tag || '' + ]); + }); + + // Add Edges + edges.forEach(edge => { + const d = edge.getData() || {}; + const label = (edge.getLabels()[0]?.attrs?.label?.text) || d.label || ''; + + const sourceCell = edge.getSourceCell(); + const targetCell = edge.getTargetCell(); + + const sourceStr = sourceCell ? (sourceCell.attr('label/text') || sourceCell.id) : (edge.getSource().id || 'Unknown'); + const targetStr = targetCell ? (targetCell.attr('label/text') || targetCell.id) : (edge.getTarget().id || 'Unknown'); + + csvRows.push([ + "Edge", + edge.id, + label, + d.type || 'Connection', + "", // Parent Group (Edges usually not grouped in same way) + sourceStr, + targetStr, + (d.tags || []).join('; '), + d.description || '', + "", // IP + "", // Vendor + "", // Model + d.asset_tag || '' + ]); + }); + + import('../../ui/toast.js').then(m => m.showToast(t('msg_export_start').replace('{format}', 'Excel'), 'info', 2000)); + + // Generate CSV Content with UTF-8 BOM + const csvContent = "\uFEFF" + // UTF-8 BOM for Excel (Required for Korean/Special chars) + headers.join(',') + "\n" + + csvRows.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(',')).join('\n'); + + // Trigger Download + const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + const link = document.createElement("a"); + const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19); + const projectName = document.getElementById('project-title')?.innerText || "Project"; + + link.setAttribute("href", url); + link.setAttribute("download", `drawNET_Inventory_${projectName}_${timestamp}.csv`); + link.style.visibility = 'hidden'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + import('../../ui/toast.js').then(m => m.showToast(t('msg_export_success').replace('{format}', 'Excel'), 'success')); + logger.high(`Inventory exported for ${nodes.length} nodes and ${edges.length} edges.`); +} diff --git a/static/js/modules/graph/io/image_exporter.js b/static/js/modules/graph/io/image_exporter.js new file mode 100644 index 0000000..aca9eda --- /dev/null +++ b/static/js/modules/graph/io/image_exporter.js @@ -0,0 +1,259 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; +import { t } from '../../i18n.js'; +import { showToast } from '../../ui/toast.js'; + +/** + * 전역 내보내기 로딩 오버레이 표시/숨김 + */ +function showLoading() { + const overlay = document.createElement('div'); + overlay.id = 'export-loading-overlay'; + overlay.className = 'export-overlay'; + overlay.innerHTML = ` +

${t('export_preparing')}

+ `; + document.body.appendChild(overlay); +} + +function hideLoading() { + const overlay = document.getElementById('export-loading-overlay'); + if (overlay) overlay.remove(); +} + +/** + * 이미지를 Base64 Data URL로 변환 (캐시 및 재시도 적용) + */ +const assetCache = new Map(); +async function toDataURL(url, retries = 2) { + if (!url || typeof url !== 'string') return url; + if (assetCache.has(url)) return assetCache.get(url); + + const origin = window.location.origin; + const absoluteUrl = url.startsWith('http') ? url : + (url.startsWith('/') ? `${origin}${url}` : `${origin}/${url}`); + + for (let i = 0; i <= retries; i++) { + try { + const response = await fetch(absoluteUrl); + if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); + const blob = await response.blob(); + const dataUrl = await new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result); + reader.onerror = reject; + reader.readAsDataURL(blob); + }); + assetCache.set(url, dataUrl); + return dataUrl; + } catch (e) { + if (i === retries) { + logger.critical(`Base64 conversion failed after ${retries} retries for: ${url}`, e); + return url; + } + await new Promise(r => setTimeout(r, 100 * (i + 1))); // 지수 백오프 대기 + } + } +} + +/** + * 내보내기 전 모든 노드의 이미지 속성을 Base64로 일괄 변환 (상속된 속성 포함) + */ +export async function prepareExport() { + if (!state.graph) return null; + + const backupNodes = []; + const nodes = state.graph.getNodes(); + + const promises = nodes.map(async (node) => { + const imageAttrs = []; + const attrs = node.getAttrs(); + + // 1. 노드의 모든 속성을 재귀적으로 탐색하여 이미지 경로처럼 보이는 문자열 식별 + const selectors = Object.keys(attrs); + // 기본 'image' 선택자 외에도 커스텀 선택자가 있을 수 있으므로 모두 확인 + const targetSelectors = new Set(['image', 'icon', 'body', ...selectors]); + + for (const selector of targetSelectors) { + // xlink:href와 href 두 가지 모두 명시적으로 점검 + const keys = ['xlink:href', 'href', 'src']; + for (const key of keys) { + const path = `${selector}/${key}`; + const val = node.attr(path); + + if (val && typeof val === 'string' && !val.startsWith('data:')) { + const trimmedVal = val.trim(); + if (trimmedVal.includes('.') || trimmedVal.startsWith('/') || trimmedVal.startsWith('http')) { + const base64Data = await toDataURL(trimmedVal); + + if (base64Data && base64Data !== trimmedVal) { + imageAttrs.push({ path, originalValue: val }); + + // 중요: 한 쪽에서만 발견되어도 호환성을 위해 두 가지 속성 모두 업데이트 + const pairKey = key === 'xlink:href' ? 'href' : (key === 'href' ? 'xlink:href' : null); + node.attr(path, base64Data); + if (pairKey) { + const pairPath = `${selector}/${pairKey}`; + imageAttrs.push({ path: pairPath, originalValue: node.attr(pairPath) }); + node.attr(pairPath, base64Data); + } + } + } + } + } + } + + if (imageAttrs.length > 0) { + backupNodes.push({ node, imageAttrs }); + } + }); + + await Promise.all(promises); + + // PC 사양에 따른 DOM 동기화 안정성을 위해 1초 대기 (사용자 요청 반영) + await new Promise(resolve => setTimeout(resolve, 1000)); + + return backupNodes; +} + +/** + * 내보내기 후 원래 속성으로 복구 + */ +export function cleanupExport(backup) { + if (!backup) return; + try { + backup.forEach(item => { + item.imageAttrs.forEach(attr => { + item.node.attr(attr.path, attr.originalValue); + }); + }); + } catch (e) { + console.error("Cleanup export failed", e); + } +} + +/** + * exportToPNG - PNG 이미지 내보내기 + */ +export async function exportToPNG() { + if (!state.graph) return; + + showLoading(); + showToast(t('msg_export_start').replace('{format}', 'PNG'), 'info', 2000); + const backup = await prepareExport(); + try { + const bbox = state.graph.getCellsBBox(state.graph.getCells()); + const padding = 100; + + state.graph.toPNG((dataUri) => { + const link = document.createElement('a'); + link.download = `drawNET_Topology_${Date.now()}.png`; + link.href = dataUri; + link.click(); + cleanupExport(backup); + hideLoading(); + showToast(t('msg_export_success').replace('{format}', 'PNG'), 'success'); + logger.high("Exported to PNG successfully."); + }, { + padding, + backgroundColor: '#ffffff', + width: (bbox.width + padding * 2) * 2, + height: (bbox.height + padding * 2) * 2, + stylesheet: '.x6-port { display: none !important; } .x6-edge-selected path { filter: none !important; }' + }); + } catch (err) { + if (backup) cleanupExport(backup); + hideLoading(); + showToast(t('msg_export_failed').replace('{format}', 'PNG'), 'error'); + logger.critical("PNG Export failed", err); + } +} + +/** + * exportToSVG - SVG 벡터 내보내기 + */ +export async function exportToSVG() { + if (!state.graph) return; + + showLoading(); + const backup = await prepareExport(); + try { + // 실제 셀들의 정확한 좌표 영역 계산 (줌/이동 무관한 절대 영역) + const bbox = state.graph.getCellsBBox(state.graph.getCells()); + const padding = 120; + + // 여백을 포함한 최종 영역 설정 + const exportArea = { + x: bbox.x - padding, + y: bbox.y - padding, + width: bbox.width + padding * 2, + height: bbox.height + padding * 2 + }; + + state.graph.toSVG((svg) => { + const blob = new Blob([svg], { type: 'image/svg+xml' }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.download = `drawNET_Topology_${Date.now()}.svg`; + link.href = url; + link.click(); + cleanupExport(backup); + hideLoading(); + showToast(t('msg_export_success').replace('{format}', 'SVG'), 'success'); + URL.revokeObjectURL(url); + logger.high("Exported to SVG successfully."); + }, { + // 명시적 viewBox 지정으로 짤림 방지 + viewBox: exportArea, + width: exportArea.width, + height: exportArea.height, + backgroundColor: '#ffffff', + stylesheet: '.x6-port { display: none !important; } .x6-edge-selected path { filter: none !important; }' + }); + } catch (err) { + if (backup) cleanupExport(backup); + hideLoading(); + showToast(t('msg_export_failed').replace('{format}', 'SVG'), 'error'); + logger.critical("SVG Export failed", err); + } +} + +/** + * exportToPDF - PDF 문서 내보내기 + */ +export async function exportToPDF() { + if (!state.graph) return; + + showLoading(); + const backup = await prepareExport(); + try { + const { jsPDF } = window.jspdf; + const bbox = state.graph.getCellsBBox(state.graph.getCells()); + const padding = 120; + const totalW = bbox.width + padding * 2; + const totalH = bbox.height + padding * 2; + + state.graph.toPNG((dataUri) => { + const orientation = totalW > totalH ? 'l' : 'p'; + const pdf = new jsPDF(orientation, 'px', [totalW, totalH]); + pdf.addImage(dataUri, 'PNG', padding, padding, bbox.width, bbox.height); + pdf.save(`drawNET_Topology_${Date.now()}.pdf`); + cleanupExport(backup); + hideLoading(); + showToast(t('msg_export_success').replace('{format}', 'PDF'), 'success'); + logger.high("Exported to PDF successfully."); + }, { + padding, + backgroundColor: '#ffffff', + width: totalW * 2, + height: totalH * 2, + stylesheet: '.x6-port { display: none !important; } .x6-edge-selected path { filter: none !important; }' + }); + } catch (err) { + if (backup) cleanupExport(backup); + hideLoading(); + showToast(t('msg_export_failed').replace('{format}', 'PDF'), 'error'); + logger.critical("PDF Export failed", err); + } +} diff --git a/static/js/modules/graph/io/index.js b/static/js/modules/graph/io/index.js new file mode 100644 index 0000000..7a4da93 --- /dev/null +++ b/static/js/modules/graph/io/index.js @@ -0,0 +1,116 @@ +import { state } from '../../state.js'; +import { getProjectData, restoreProjectData } from './json_handler.js'; +import { exportToPPTX } from './pptx_exporter.js'; +import { logger } from '../../utils/logger.js'; + +/** + * initGraphIO - 그래프 관련 I/O 이벤트 리스너 초기화 + */ +export function initGraphIO() { + // Export JSON (.dnet) + const exportBtn = document.getElementById('export-json'); + if (exportBtn) { + exportBtn.addEventListener('click', () => { + const projectData = getProjectData(); + if (!projectData) return; + + const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(projectData, null, 2)); + const safeName = (state.projectName || "project").replace(/[^a-z0-9]/gi, '_').toLowerCase(); + const dlAnchorElem = document.createElement('a'); + dlAnchorElem.setAttribute("href", dataStr); + dlAnchorElem.setAttribute("download", `${safeName}_${Date.now()}.dnet`); + dlAnchorElem.click(); + logger.high("Project exported (.dnet v3.0)."); + }); + } + + // Export PPTX + const exportPptxBtn = document.getElementById('export-pptx'); + if (exportPptxBtn) { + exportPptxBtn.addEventListener('click', () => { + if (state.license.level === 'Trial') return; + exportToPPTX(); + }); + } + + // Export Excel + const exportExcelBtn = document.getElementById('export-excel'); + if (exportExcelBtn) { + exportExcelBtn.addEventListener('click', () => { + if (state.license.level === 'Trial') return; + import('./excel_exporter.js').then(m => m.exportToExcel()); + }); + } + + // Export PNG (Allowed for Trial) + const exportPngBtn = document.getElementById('export-png'); + if (exportPngBtn) { + import('./image_exporter.js').then(m => { + exportPngBtn.addEventListener('click', () => m.exportToPNG()); + }); + } + + // Export SVG + const exportSvgBtn = document.getElementById('export-svg'); + if (exportSvgBtn) { + import('./image_exporter.js').then(m => { + exportSvgBtn.addEventListener('click', () => { + if (state.license.level === 'Trial') return; + m.exportToSVG(); + }); + }); + } + + // Export PDF (Allowed for Trial) + const exportPdfBtn = document.getElementById('export-pdf'); + if (exportPdfBtn) { + import('./image_exporter.js').then(m => { + exportPdfBtn.addEventListener('click', () => m.exportToPDF()); + }); + } + + // Import + const importInput = document.getElementById('import-json-input'); + if (importInput) { + importInput.setAttribute('accept', '.dnet,.json'); + } + const importBtn = document.getElementById('import-json'); + if (importBtn && importInput) { + importBtn.addEventListener('click', () => importInput.click()); + importInput.addEventListener('change', (e) => { + const file = e.target.files[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = async (event) => { + try { + const data = JSON.parse(event.target.result); + if (!state.graph) return; + + const isDrawNET = data.header?.app === "drawNET Premium"; + if (!isDrawNET) { + alert("지원하지 않는 파일 형식입니다."); + return; + } + + if (data.graphJson) { + const ok = restoreProjectData(data); + if (ok) { + logger.high("Import complete (v3.0 JSON)."); + } + } else { + alert("이 파일은 구버전(v2.x) 형식입니다. 현재 버전에서는 지원되지 않습니다.\n새로 작성 후 저장해 주세요."); + } + } catch (err) { + logger.critical("Failed to parse project file.", err); + alert("프로젝트 파일을 읽을 수 없습니다."); + } + }; + reader.readAsText(file); + e.target.value = ''; + }); + } +} + +// Re-export for compatibility +export { getProjectData, restoreProjectData, exportToPPTX }; diff --git a/static/js/modules/graph/io/json_handler.js b/static/js/modules/graph/io/json_handler.js new file mode 100644 index 0000000..d4a6c62 --- /dev/null +++ b/static/js/modules/graph/io/json_handler.js @@ -0,0 +1,153 @@ +/** + * graph/io/json_handler.js - Project serialization and restoration with auto-repair logic. + */ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; + +/** + * getProjectData - 프로젝트 전체를 JSON으로 직렬화 (graph.toJSON 기반) + */ +export function getProjectData() { + if (!state.graph) return null; + + const graphJson = state.graph.toJSON(); + const viewport = state.graph.translate(); + + return { + header: { + app: "drawNET Premium", + version: "3.0.0", + export_time: new Date().toISOString(), + projectName: state.projectName || "Untitled_Project" + }, + graphJson: graphJson, + viewport: { + zoom: state.graph.zoom(), + tx: viewport.tx, + ty: viewport.ty + }, + settings: { + gridSpacing: state.gridSpacing, + gridStyle: state.gridStyle, + isSnapEnabled: state.isSnapEnabled, + canvasSize: state.canvasSize, + theme: document.documentElement.getAttribute('data-theme') + }, + layers: state.layers, + activeLayerId: state.activeLayerId + }; +} + +/** + * restoreProjectData - JSON 프로젝트 데이터로 그래프 복원 + */ +export function restoreProjectData(data) { + if (!state.graph || !data) return false; + + try { + if (data.graphJson) { + state.graph.fromJSON(data.graphJson); + + // Migrate old data to new schema (Add defaults if missing) + state.graph.getCells().forEach(cell => { + const cellData = cell.getData() || {}; + let updated = false; + + // 1. Recover missing position/size for nodes from data.pos + if (cell.isNode()) { + const pos = cell.getPosition(); + if ((!pos || (pos.x === 0 && pos.y === 0)) && cellData.pos) { + cell.setPosition(cellData.pos.x, cellData.pos.y); + logger.info(`Recovered position for ${cell.id} from data.pos`); + updated = true; + } + + const size = cell.getSize(); + if (!size || (size.width === 0 && size.height === 0)) { + if (cellData.is_group) cell.setSize(200, 200); + else cell.setSize(60, 60); + updated = true; + } + } + + // 2. Ensure description exists for all objects + if (cellData.description === undefined) { + cellData.description = ""; + updated = true; + } + + // 3. Ensure routing_offset exists for edges + if (cell.isEdge()) { + if (cellData.routing_offset === undefined) { + cellData.routing_offset = 20; + updated = true; + } + + // [6개월 뒤의 나를 위한 메모] + // 하위 호환성 유지 및 데이터 무결성 강화를 위한 자가 치유(Self-healing) 로직. + // 기존 도면을 불러올 때 누락된 크로스 레이어 정보를 노드 데이터를 참조하여 실시간 복구함. + if (cellData.source_layer === undefined || cellData.target_layer === undefined) { + const srcNode = state.graph.getCellById(cellData.source); + const dstNode = state.graph.getCellById(cellData.target); + + // Default to current edge's layer if node is missing (safe fallback) + const srcLayer = srcNode?.getData()?.layerId || cellData.layerId || 'l1'; + const dstLayer = dstNode?.getData()?.layerId || cellData.layerId || 'l1'; + + cellData.source_layer = srcLayer; + cellData.target_layer = dstLayer; + cellData.is_cross_layer = (srcLayer !== dstLayer); + updated = true; + logger.info(`Auto-repaired layer metadata for edge ${cell.id}`); + } + } + + // 4. Ensure label consistency (data vs attrs) + const pureLabel = cellData.label || ""; + const visualLabel = cell.attr('label/text'); + if (visualLabel !== pureLabel) { + cell.attr('label/text', pureLabel); + updated = true; + } + + if (updated) { + cell.setData(cellData, { silent: true }); + } + }); + } + + const vp = data.viewport || {}; + if (vp.zoom !== undefined) state.graph.zoomTo(vp.zoom); + if (vp.tx !== undefined) state.graph.translate(vp.tx, vp.ty || 0); + + const settings = data.settings || {}; + if (settings.gridSpacing) { + window.dispatchEvent(new CustomEvent('gridSpacingChanged', { detail: { spacing: settings.gridSpacing } })); + } + if (settings.gridStyle) { + window.dispatchEvent(new CustomEvent('gridChanged', { detail: { style: settings.gridStyle } })); + } + if (settings.theme) { + document.documentElement.setAttribute('data-theme', settings.theme); + } + + // Restore Layers + if (data.layers && Array.isArray(data.layers)) { + state.layers = data.layers; + state.activeLayerId = data.activeLayerId || data.layers[0]?.id; + } + + // Restore Metadata + if (data.header?.projectName) { + state.projectName = data.header.projectName; + const titleEl = document.getElementById('project-title'); + if (titleEl) titleEl.innerText = state.projectName; + } + + state.graph.trigger('project:restored'); + return true; + } catch (e) { + logger.critical("Failed to restore project data.", e); + return false; + } +} diff --git a/static/js/modules/graph/io/pptx_exporter.js b/static/js/modules/graph/io/pptx_exporter.js new file mode 100644 index 0000000..3baf8d7 --- /dev/null +++ b/static/js/modules/graph/io/pptx_exporter.js @@ -0,0 +1,238 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; +import { t } from '../../i18n.js'; +import { applyLayerFilters } from '../layers.js'; +import { prepareExport, cleanupExport } from './image_exporter.js'; + +/** + * PPTX로 내보내기 (PptxGenJS 활용) + * 단순 캡처가 아닌 개별 이미지 배치 및 선 객체 생성을 통한 고도화된 리포트 생성 + */ +export async function exportToPPTX() { + if (!state.graph) return; + if (typeof PptxGenJS === 'undefined') { + alert(t('pptx_lib_error')); + return; + } + + try { + const pptx = new PptxGenJS(); + import('../../ui/toast.js').then(m => m.showToast(t('msg_export_start').replace('{format}', 'PPTX'), 'info', 3000)); + pptx.layout = 'LAYOUT_16x9'; + + const projectTitle = document.getElementById('project-title')?.innerText || t('untitled_project'); + const allCells = state.graph.getCells(); + if (allCells.length === 0) { + alert(t('pptx_no_data')); + return; + } + + // --- 1. 슬라이드 1: 요약 정보 --- + const summarySlide = pptx.addSlide(); + summarySlide.addText(t('pptx_report_title').replace('{title}', projectTitle), { + x: 0.5, y: 0.3, w: '90%', h: 0.6, fontSize: 24, color: '363636', bold: true + }); + + const stats = {}; + allCells.filter(c => c.isNode()).forEach(node => { + const type = node.getData()?.type || 'Unknown'; + stats[type] = (stats[type] || 0) + 1; + }); + + const summaryRows = [[t('pptx_obj_type'), t('pptx_quantity')]]; + Object.entries(stats).sort().forEach(([type, count]) => { + summaryRows.push([type, count.toString()]); + }); + + summarySlide.addTable(summaryRows, { + x: 0.5, y: 1.2, w: 4.0, colW: [2.5, 1.5], + border: { pt: 1, color: 'E2E8F0' }, fill: { color: 'F8FAFC' }, + fontSize: 11, align: 'center' + }); + + summarySlide.addText(t('pptx_generated_at').replace('{date}', new Date().toLocaleString()), { + x: 6.0, y: 5.2, w: 3.5, h: 0.3, fontSize: 9, color: '999999', align: 'right' + }); + + // --- 좌표 변환 헬퍼 (Inches) --- + const MARGIN = 0.5; + const SLIDE_W = 10 - (MARGIN * 2); + const SLIDE_H = 5.625 - (MARGIN * 2); + + const addGraphToSlide = (slide, cells, title) => { + if (cells.length === 0) return; + + if (title) { + slide.addText(title, { x: 0.5, y: 0.2, w: 5.0, h: 0.4, fontSize: 14, bold: true, color: '4B5563' }); + } + + // High-Fidelity Hybrid: Capture topology as PNG + // Since toPNG is asynchronous with a callback, we use a different approach for batching or just use the current canvas state + // But for PPTX report, we want to ensure it's high quality. + // X6 toPNG is usually sync if no external images, but here we have SVGs. + + // To keep it simple and stable, we'll use a placeholder or wait for the user to confirm. + // Actually, we can use the plugin's sync return if possible, or just export the whole thing. + + return new Promise(async (resolve) => { + const backup = await prepareExport(); + const bbox = state.graph.getContentBBox(); + const ratio = bbox.width / bbox.height; + const maxW = 8.0; + const maxH = 4.5; + + let imgW = maxW; + let imgH = imgW / ratio; + + if (imgH > maxH) { + imgH = maxH; + imgW = imgH * ratio; + } + + const imgX = 1.0 + (maxW - imgW) / 2; + const imgY = 0.8 + (maxH - imgH) / 2; + + state.graph.toPNG((dataUri) => { + slide.addImage({ data: dataUri, x: imgX, y: imgY, w: imgW, h: imgH }); + cleanupExport(backup); + resolve(); + }, { + padding: 10, + backgroundColor: '#ffffff', + width: bbox.width * 2, + height: bbox.height * 2, + stylesheet: '.x6-port { display: none !important; } .x6-edge-selected path { filter: none !important; }' + }); + }); + }; + + // --- 2. 슬라이드 2: 전체 조감도 --- + const mainDiagSlide = pptx.addSlide(); + // Backup visibility + const originalVisibility = state.layers.map(l => ({ id: l.id, visible: l.visible })); + + // Show everything for overall view + state.layers.forEach(l => l.visible = true); + await applyLayerFilters(); + await addGraphToSlide(mainDiagSlide, allCells, t('pptx_overall_topo')); + + // --- 3. 슬라이드 3~: 레이어별 상세도 --- + if (state.layers && state.layers.length > 1) { + for (const layer of state.layers) { + // Only show this layer + state.layers.forEach(l => l.visible = (l.id === layer.id)); + await applyLayerFilters(); + + const layerCells = allCells.filter(c => (c.getData()?.layerId || 'l1') === layer.id); + if (layerCells.length > 0) { + const layerSlide = pptx.addSlide(); + await addGraphToSlide(layerSlide, layerCells, t('pptx_layer_title').replace('{name}', layer.name)); + } + } + } + + // Restore original visibility + originalVisibility.forEach(orig => { + const l = state.layers.find(ly => ly.id === orig.id); + if (l) l.visible = orig.visible; + }); + await applyLayerFilters(); + + // --- 4. 슬라이드 마지막: 상세 인벤토리 테이블 --- + const nodes = allCells.filter(c => c.isNode()); + if (nodes.length > 0) { + const tableSlide = pptx.addSlide(); + tableSlide.addText(t('pptx_inv_title'), { x: 0.5, y: 0.3, w: 5.0, h: 0.5, fontSize: 18, bold: true }); + + const tableRows = [[t('prop_label'), t('prop_type'), t('prop_parent'), t('prop_model'), t('prop_ip'), t('prop_status')]]; + nodes.forEach(node => { + const d = node.getData() || {}; + const parent = node.getParent(); + const parentLabel = parent ? (parent.getData()?.label || parent.attr('label/text') || parent.id) : '-'; + + tableRows.push([ + d.label || node.attr('label/text') || '', + d.type || '', + parentLabel, + d.model || '', + d.ip || '', + d.status || '' + ]); + }); + + tableSlide.addTable(tableRows, { + x: 0.5, y: 1.0, w: 9.0, + colW: [1.5, 1.2, 1.5, 1.6, 1.6, 1.6], + border: { pt: 0.5, color: 'CCCCCC' }, + fontSize: 8, + autoPage: true + }); + } + + // --- 5. 슬라이드: 객체별 상세 설명 (Label & Description) --- + const descObjects = allCells.filter(c => { + const d = c.getData() || {}; + if (c.isNode()) { + // Include all standard nodes, but only include groups if they have a description + return !d.is_group || !!d.description; + } + // Include edges only if they have a user-defined label or description + return !!(d.label || d.description); + }); + + if (descObjects.length > 0) { + const descSlide = pptx.addSlide(); + descSlide.addText(t('pptx_desc_table_title'), { + x: 0.5, y: 0.3, w: 8.0, h: 0.5, fontSize: 18, bold: true, color: '2D3748' + }); + + const descRows = [[t('prop_label'), t('prop_type'), t('prop_tags'), t('prop_description')]]; + descObjects.forEach(cell => { + const d = cell.getData() || {}; + let label = ''; + + if (cell.isNode()) { + label = d.label || cell.attr('label/text') || `Node (${cell.id.substring(0,8)})`; + } else { + // Optimized Edge Label: Use d.label if available, else Source -> Target name + if (d.label) { + label = d.label; + } else { + const src = state.graph.getCellById(cell.getSource().cell); + const dst = state.graph.getCellById(cell.getTarget().cell); + const srcName = src?.getData()?.label || src?.attr('label/text') || 'Unknown'; + const dstName = dst?.getData()?.label || dst?.attr('label/text') || 'Unknown'; + label = `${srcName} -> ${dstName}`; + } + } + + const type = cell.isNode() ? (d.type || 'Node') : `Edge (${d.routing || 'manhattan'})`; + const tags = (d.tags || []).join(', '); + + descRows.push([ + label, + type, + tags || '-', + d.description || '-' + ]); + }); + + descSlide.addTable(descRows, { + x: 0.5, y: 1.0, w: 9.0, + colW: [1.5, 1.2, 1.8, 4.5], + border: { pt: 0.5, color: 'CCCCCC' }, + fill: { color: 'FFFFFF' }, + fontSize: 9, + autoPage: true, + newSlideProps: { margin: [0.5, 0.5, 0.5, 0.5] } + }); + } + + pptx.writeFile({ fileName: `drawNET_Report_${Date.now()}.pptx` }); + import('../../ui/toast.js').then(m => m.showToast(t('msg_export_success').replace('{format}', 'PPTX'), 'success')); + } catch (err) { + import('../../ui/toast.js').then(m => m.showToast(t('msg_export_failed').replace('{format}', 'PPTX'), 'error')); + logger.critical("PPTX export failed.", err); + alert(t('pptx_export_error').replace('{message}', err.message)); + } +} diff --git a/static/js/modules/graph/layers.js b/static/js/modules/graph/layers.js new file mode 100644 index 0000000..d24d582 --- /dev/null +++ b/static/js/modules/graph/layers.js @@ -0,0 +1,82 @@ +import { state } from '../state.js'; + +/** + * calculateCellZIndex - Logic to determine the Z-Index of a cell based on its layer and type. + * Hierarchy: Nodes(50) > Edges(30) > Groups(1). + */ +export function calculateCellZIndex(data, ancestorsCount, isNode) { + const layerId = data.layerId || 'l1'; + const layerIndex = state.layers.findIndex(l => l.id === layerId); + const layerOffset = layerIndex !== -1 ? (state.layers.length - layerIndex) * 100 : 0; + + let baseZ = 0; + if (isNode) { + if (data.is_group) { + baseZ = 1 + ancestorsCount; + } else { + baseZ = 50 + ancestorsCount; + } + } else { + baseZ = 30; // Edges: Always above groups + } + + return layerOffset + baseZ; +} + +/** + * applyLayerFilters - Updates the visibility of all cells in the graph based on their layer. + * Also enforces a strict Z-Index hierarchy: Nodes(50) > Edges(30) > Groups(1). + * Auto-Repairs existing edges to the latest styling standards. + */ +export async function applyLayerFilters() { + if (!state.graph) return; + + // Pre-import style mapping for efficiency + const { getX6EdgeConfig, getLabelAttributes } = await import('./styles.js'); + + const cells = state.graph.getCells(); + const visibleLayerIds = new Set( + state.layers + .filter(l => l.visible) + .map(l => l.id) + ); + + state.graph.batchUpdate(() => { + cells.forEach(cell => { + const data = cell.getData() || {}; + const cellLayerId = data.layerId || 'l1'; + const isActive = (cellLayerId === state.activeLayerId); + + const ancestorsCount = cell.getAncestors().length; + const zIndex = calculateCellZIndex(data, ancestorsCount, cell.isNode()); + cell.setZIndex(zIndex); + + const isVisible = visibleLayerIds.has(cellLayerId); + if (isVisible) { + cell.show(); + + const opacity = isActive ? 1 : (state.inactiveLayerOpacity || 0.3); + cell.attr('body/opacity', opacity); + cell.attr('image/opacity', opacity); + cell.attr('label/opacity', opacity); + cell.attr('line/opacity', opacity); + + // Re-enable pointer events to allow "Ghost Snapping" (Connecting to other layers) + // We rely on Selection Plugin Filter and interacting rules for isolation. + cell.attr('root/style/pointer-events', 'auto'); + + const layerIndex = state.layers.findIndex(l => l.id === cellLayerId); + const isTrialLocked = state.license.level === 'Trial' && layerIndex >= 3; + const isManuallyLocked = data.locked === true || isTrialLocked; + const shouldBeInteractable = isActive && !isManuallyLocked; + + cell.setProp('movable', shouldBeInteractable); + cell.setProp('deletable', shouldBeInteractable); + if (cell.isNode()) cell.setProp('rotatable', shouldBeInteractable); + + } else { + cell.hide(); + } + }); + }); +} diff --git a/static/js/modules/graph/plugins.js b/static/js/modules/graph/plugins.js new file mode 100644 index 0000000..19bce5f --- /dev/null +++ b/static/js/modules/graph/plugins.js @@ -0,0 +1,67 @@ +/** + * graph/plugins.js - X6 Plugin initialization + */ +export function initGraphPlugins(graph) { + if (window.X6PluginSelection) { + graph.use(new window.X6PluginSelection.Selection({ + enabled: true, + multiple: true, + modifiers: 'shift', + rubberband: true, + showNodeSelectionBox: true, + showEdgeSelectionBox: false, + pointerEvents: 'none', + filter: (cell) => { + const data = cell.getData() || {}; + const cellLayerId = data.layerId || 'l1'; + return cellLayerId === state.activeLayerId; + } + })); + } + + if (window.X6PluginSnapline) { + graph.use(new window.X6PluginSnapline.Snapline({ + enabled: true, + sharp: true, + })); + } + + /* Disable X6 Keyboard plugin to prevent interception of global hotkeys */ + /* + if (window.X6PluginKeyboard) { + graph.use(new window.X6PluginKeyboard.Keyboard({ + enabled: true, + global: false, + })); + } + */ + + if (window.X6PluginClipboard) { + graph.use(new window.X6PluginClipboard.Clipboard({ + enabled: true, + })); + } + + if (window.X6PluginHistory) { + graph.use(new window.X6PluginHistory.History({ + enabled: true, + })); + } + + if (window.X6PluginTransform) { + graph.use(new window.X6PluginTransform.Transform({ + resizing: { enabled: true, orthographic: false }, + rotating: { enabled: true }, + // 선(Edge) 제외 및 현재 활성 레이어만 허용 + filter: (cell) => { + if (!cell.isNode()) return false; + const data = cell.getData() || {}; + return (data.layerId || 'l1') === state.activeLayerId; + }, + })); + } + + if (window.X6PluginExport) { + graph.use(new window.X6PluginExport.Export()); + } +} diff --git a/static/js/modules/graph/search.js b/static/js/modules/graph/search.js new file mode 100644 index 0000000..57f09cd --- /dev/null +++ b/static/js/modules/graph/search.js @@ -0,0 +1,99 @@ +import { state } from '../state.js'; + +/** + * initGlobalSearch - Initializes the canvas-wide search and highlight functionality + */ +export function initGlobalSearch() { + const searchInput = document.getElementById('global-search'); + if (!searchInput) return; + + searchInput.addEventListener('input', (e) => { + const query = e.target.value.toLowerCase().trim(); + if (!state.graph) return; + + const allNodes = state.graph.getNodes(); + + if (query === '') { + allNodes.forEach(node => { + node.attr('body/opacity', 1); + node.attr('image/opacity', 1); + node.attr('label/opacity', 1); + node.removeTools(); + }); + return; + } + + allNodes.forEach(node => { + const data = node.getData() || {}; + const label = (node.attr('label/text') || '').toLowerCase(); + const id = node.id.toLowerCase(); + + // PM 전용 표준 속성 검색 대상 포함 + const searchFields = [ + id, label, + (data.type || '').toLowerCase(), + (data.ip || '').toLowerCase(), + (data.model || '').toLowerCase(), + (data.vendor || '').toLowerCase(), + (data.asset_tag || '').toLowerCase(), + (data.serial || '').toLowerCase(), + (data.project || '').toLowerCase(), + (data.tags || []).join(' ').toLowerCase() + ]; + + const isMatch = searchFields.some(field => field.includes(query)); + + if (isMatch) { + node.attr('body/opacity', 1); + node.attr('image/opacity', 1); + node.attr('label/opacity', 1); + + // 검색 강조 툴 추가 + node.addTools({ + name: 'boundary', + args: { + padding: 5, + attrs: { + fill: 'none', + stroke: '#3b82f6', + strokeWidth: 3, + strokeDasharray: '0', + }, + }, + }); + } else { + node.attr('body/opacity', 0.1); + node.attr('image/opacity', 0.1); + node.attr('label/opacity', 0.1); + node.removeTools(); + } + }); + }); + + // 엔터 키 입력 시 검색된 첫 번째 항목으로 포커싱 + searchInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + const query = e.target.value.toLowerCase().trim(); + if (!query || !state.graph) return; + + const matches = state.graph.getNodes().filter(node => { + const data = node.getData() || {}; + const label = (node.attr('label/text') || '').toLowerCase(); + const searchFields = [ + node.id.toLowerCase(), label, + (data.ip || ''), (data.asset_tag || ''), (data.model || '') + ]; + return searchFields.some(f => f.toLowerCase().includes(query)); + }); + + if (matches.length > 0) { + // 첫 번째 매치된 항목으로 줌인 + state.graph.zoomToCell(matches[0], { + padding: 100, + animation: { duration: 600 } + }); + state.graph.select(matches[0]); + } + } + }); +} diff --git a/static/js/modules/graph/styles.js b/static/js/modules/graph/styles.js new file mode 100644 index 0000000..baff174 --- /dev/null +++ b/static/js/modules/graph/styles.js @@ -0,0 +1,33 @@ +/** + * graph/styles.js - Main Entry for Graph Styling (Plugin-based) + */ +import { shapeRegistry } from './styles/registry.js'; +import { registerNodes } from './styles/node_shapes.js'; +import { getX6NodeConfig, getX6EdgeConfig } from './styles/mapping/index.js'; +import { getLabelAttributes } from './styles/utils.js'; + +/** + * registerCustomShapes - Initializes and registers all shape plugins + */ +export function registerCustomShapes() { + // 1. Initialize Registry (Load plugins) + registerNodes(); + + // 2. Install to X6 + if (typeof X6 !== 'undefined') { + shapeRegistry.install(X6); + } +} + +/** + * Re-exporting functions for compatibility with other modules + */ +export { + getX6NodeConfig, + getX6EdgeConfig, + getLabelAttributes, + shapeRegistry +}; + +// Default Theme Update +export function updateGraphTheme() {} diff --git a/static/js/modules/graph/styles/edges.js b/static/js/modules/graph/styles/edges.js new file mode 100644 index 0000000..083fee8 --- /dev/null +++ b/static/js/modules/graph/styles/edges.js @@ -0,0 +1,52 @@ +export function getEdgeConfig(data) { + let routingType = data.routing || 'manhattan'; + if (routingType === 'u-shape') routingType = 'manhattan-u'; + + const srcAnchor = (data.routing === 'u-shape') ? 'top' : (data.source_anchor || 'orth'); + const dstAnchor = (data.routing === 'u-shape') ? 'top' : (data.target_anchor || 'orth'); + + const routerArgs = { + step: 5, // Finer step for better pathfinding + padding: 10, // Reduced padding to avoid "unreachable" errors in tight spaces + }; + const directions = ['top', 'bottom', 'left', 'right']; + + if (directions.includes(srcAnchor)) routerArgs.startDirections = [srcAnchor]; + if (directions.includes(dstAnchor)) routerArgs.endDirections = [dstAnchor]; + + // For U-shape, we need a bit more padding but not too much to fail + if (data.routing === 'u-shape') routerArgs.padding = 15; + + const routerConfigs = { + manhattan: { name: 'manhattan', args: routerArgs }, + 'manhattan-u': { name: 'manhattan', args: routerArgs }, + orthogonal: { name: 'orth' }, + straight: null, + metro: { name: 'metro' } + }; + + return { + id: data.id || `e_${data.source}_${data.target}`, + source: { cell: data.source, anchor: srcAnchor, connectionPoint: 'boundary' }, + target: { cell: data.target, anchor: dstAnchor, connectionPoint: 'boundary' }, + router: routerConfigs[routingType] || routerConfigs.manhattan, + connector: { name: 'jumpover', args: { type: 'arc', size: 5, radius: 12 } }, + attrs: { + line: { + stroke: data.is_tunnel ? (data.color || '#ef4444') : (data.color || '#94a3b8'), + strokeWidth: data.is_tunnel ? 2 : (data.width || 2), + strokeDasharray: data.flow ? '5,5' : (data.is_tunnel ? '6,3' : (data.style === 'dashed' ? '5,5' : '0')), + targetMarker: (data.direction === 'forward' || data.direction === 'both') ? 'block' : null, + sourceMarker: (data.direction === 'backward' || data.direction === 'both') ? 'block' : null, + class: data.flow ? 'flow-animation' : '', + } + }, + labels: data.is_tunnel ? [{ + attrs: { + text: { text: 'VPN', fill: '#ef4444', fontSize: 10, fontWeight: 'bold' }, + rect: { fill: '#ffffff', rx: 4, ry: 4 } + } + }] : [], + data: data + }; +} diff --git a/static/js/modules/graph/styles/mapping/edge.js b/static/js/modules/graph/styles/mapping/edge.js new file mode 100644 index 0000000..c3621fe --- /dev/null +++ b/static/js/modules/graph/styles/mapping/edge.js @@ -0,0 +1,208 @@ +import { state } from '../../../state.js'; +import { logger } from '../../../utils/logger.js'; +import { calculateCellZIndex } from '../../layers.js'; + +/** + * getX6EdgeConfig - Maps edge data to X6 connecting properties + */ +export function getX6EdgeConfig(data) { + if (!data || !data.source || !data.target) { + return { + source: data?.source, + target: data?.target, + router: null, + attrs: { + line: { + stroke: '#94a3b8', + strokeWidth: 2, + targetMarker: 'block' + } + } + }; + } + + + // 1. Resolve Routing Type (Explicit choice > Adaptive) + let routingType = data.routing || 'manhattan'; + if (routingType === 'u-shape') routingType = 'manhattan-u'; + + // Adaptive Routing: Only force straight if NO explicit choice was made or if it's currently manhattan + if (state.graph && (routingType === 'manhattan' || !data.routing)) { + const srcNode = state.graph.getCellById(data.source); + const dstNode = state.graph.getCellById(data.target); + + if (srcNode && dstNode && srcNode.isNode() && dstNode.isNode()) { + const b1 = srcNode.getBBox(); + const b2 = dstNode.getBBox(); + const p1 = { x: b1.x + b1.width / 2, y: b1.y + b1.height / 2 }; + const p2 = { x: b2.x + b2.width / 2, y: b2.y + b2.height / 2 }; + const dist = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)); + + if (dist < 100) { + routingType = 'straight'; + } + } + } + + const isStraight = (routingType === 'straight'); + + // 2. Resolve Anchors & Router Args + const srcAnchor = (data.routing === 'u-shape') ? 'top' : (data.source_anchor || 'orth'); + const dstAnchor = (data.routing === 'u-shape') ? 'top' : (data.target_anchor || 'orth'); + + // Manhattan Router Args (Enhanced for topological diagrams) + const routerArgs = { + padding: 10, + step: 5, // [TWEAK] Increase precision (10 -> 5) to reduce redundant bends + offset: data.routing_offset || 20, + exclude(cell) { + return cell && typeof cell.getData === 'function' && cell.getData()?.is_group; + } + }; + + // Sync Manhattan directions with manual anchors to force the router to respect the side + const validSides = ['top', 'bottom', 'left', 'right']; + if (srcAnchor && validSides.includes(srcAnchor)) { + routerArgs.startDirections = [srcAnchor]; + } + if (dstAnchor && validSides.includes(dstAnchor)) { + routerArgs.endDirections = [dstAnchor]; + } + + if (routingType === 'manhattan-u') { + routerArgs.startDirections = ['top']; + routerArgs.endDirections = ['top']; + } + + // 3. Intelligent Port Matching (Shortest Path) + // If ports are not explicitly provided (e.g. via Auto-connect Shift+A), + // we find the closest port pair to ensure the most direct connection. + let resolvedSourcePort = data.source_port; + let resolvedTargetPort = data.target_port; + + if (state.graph && !resolvedSourcePort && !resolvedTargetPort && srcAnchor === 'orth' && dstAnchor === 'orth') { + const srcNode = state.graph.getCellById(data.source); + const dstNode = state.graph.getCellById(data.target); + if (srcNode && dstNode && srcNode.isNode() && dstNode.isNode()) { + const bestPorts = findClosestPorts(srcNode, dstNode); + if (bestPorts) { + resolvedSourcePort = bestPorts.source; + resolvedTargetPort = bestPorts.target; + } + } + } + + const routerConfigs = { + manhattan: { name: 'manhattan', args: routerArgs }, + 'manhattan-u': { name: 'manhattan', args: routerArgs }, + orthogonal: { name: 'orth' }, + straight: null, + metro: { name: 'metro' } + }; + + const isStraightFinal = (routingType === 'straight'); + const direction = data.direction || 'none'; + + // Resolve source/target configuration + // Rule: If a port is explicitly provided AND the anchor is set to 'orth' (Auto), + // we keep the port. If a manual anchor (top, left, etc.) is set, we clear the port. + const sourceConfig = { + cell: data.source, + connectionPoint: { name: 'boundary', args: { padding: 6 } } + }; + if (resolvedSourcePort && srcAnchor === 'orth') { + sourceConfig.port = resolvedSourcePort; + } else { + // [FIX] In Straight mode, directional anchors (top, left etc) force a bend. + // We use 'center' but rely on 'boundary' connection point for a perfect straight diagonal. + sourceConfig.anchor = isStraight ? { name: 'center' } : { name: srcAnchor }; + } + + const targetConfig = { + cell: data.target, + connectionPoint: { name: 'boundary', args: { padding: 6 } } + }; + if (resolvedTargetPort && dstAnchor === 'orth') { + targetConfig.port = resolvedTargetPort; + } else { + targetConfig.anchor = isStraight ? { name: 'center' } : { name: dstAnchor }; + } + + const config = { + id: data.id || `e_${data.source}_${data.target}`, + source: sourceConfig, + target: targetConfig, + router: isStraight ? null : (routerConfigs[routingType] || routerConfigs.manhattan), + connector: isStraight ? { name: 'normal' } : { name: 'jumpover', args: { type: 'arc', size: 6 } }, + attrs: { + line: { + stroke: data.is_tunnel ? (data.color || '#ef4444') : (data.color || '#94a3b8'), + strokeWidth: data.is_tunnel ? 2 : (data.width || (data.style === 'double' ? 4 : 2)), + strokeDasharray: data.flow ? '5,5' : (data.is_tunnel ? '6,3' : (data.style === 'dashed' ? '5,5' : (data.style === 'dotted' ? '2,2' : '0'))), + targetMarker: (direction === 'forward' || direction === 'both') ? 'block' : null, + sourceMarker: (direction === 'backward' || direction === 'both') ? 'block' : null, + class: data.flow ? 'flow-animation' : '', + } + }, + labels: (() => { + const lbls = []; + if (data.label) { + lbls.push({ + attrs: { + text: { text: data.label, fill: data.color || '#64748b', fontSize: 11, fontWeight: '600' }, + rect: { fill: 'rgba(255,255,255,0.8)', rx: 4, ry: 4, strokeWidth: 0 } + } + }); + } + if (data.is_tunnel) { + lbls.push({ + attrs: { + text: { text: 'VPN', fill: '#ef4444', fontSize: 10, fontWeight: 'bold' }, + rect: { fill: '#ffffff', rx: 3, ry: 3, stroke: '#ef4444', strokeWidth: 1 } + }, + position: { distance: 0.25 } + }); + } + return lbls; + })(), + zIndex: data.zIndex || calculateCellZIndex(data, 0, false), // Edges default to 30 (Above groups) + movable: !data.locked, + deletable: !data.locked, + data: data + }; + return config; +} + +/** + * findClosestPorts - Finds the pair of ports with the minimum distance between two nodes. + */ +function findClosestPorts(srcNode, dstNode) { + const srcPorts = srcNode.getPorts(); + const dstPorts = dstNode.getPorts(); + + if (srcPorts.length === 0 || dstPorts.length === 0) return null; + + let minParams = null; + let minDistance = Infinity; + + srcPorts.forEach(sp => { + dstPorts.forEach(dp => { + const p1 = srcNode.getPortProp(sp.id, 'args/point') || { x: 0, y: 0 }; + const p2 = dstNode.getPortProp(dp.id, 'args/point') || { x: 0, y: 0 }; + + // Convert to absolute coordinates + const pos1 = srcNode.getPosition(); + const pos2 = dstNode.getPosition(); + const abs1 = { x: pos1.x + p1.x, y: pos1.y + p1.y }; + const abs2 = { x: pos2.x + p2.x, y: pos2.y + p2.y }; + + const dist = Math.sqrt(Math.pow(abs1.x - abs2.x, 2) + Math.pow(abs1.y - abs2.y, 2)); + if (dist < minDistance) { + minDistance = dist; + minParams = { source: sp.id, target: dp.id }; + } + }); + }); + + return minParams; +} diff --git a/static/js/modules/graph/styles/mapping/index.js b/static/js/modules/graph/styles/mapping/index.js new file mode 100644 index 0000000..efbd69b --- /dev/null +++ b/static/js/modules/graph/styles/mapping/index.js @@ -0,0 +1,2 @@ +export { getX6NodeConfig } from './node.js'; +export { getX6EdgeConfig } from './edge.js'; diff --git a/static/js/modules/graph/styles/mapping/node.js b/static/js/modules/graph/styles/mapping/node.js new file mode 100644 index 0000000..dac761a --- /dev/null +++ b/static/js/modules/graph/styles/mapping/node.js @@ -0,0 +1,138 @@ +import { state } from '../../../state.js'; +import { shapeRegistry } from '../registry.js'; +import { getLabelAttributes, generateRackUnitsPath } from '../utils.js'; +import { DEFAULTS } from '../../../constants.js'; +import { calculateCellZIndex } from '../../layers.js'; + +/** + * getX6NodeConfig - Maps data properties to X6 node attributes using ShapeRegistry + */ +export function getX6NodeConfig(data) { + const nodeType = (data.type || '').toLowerCase(); + + // 1. Find the plugin in the registry + let plugin = shapeRegistry.get(nodeType); + + // Fallback for generic types if not found by direct name + if (!plugin) { + if (nodeType === 'rectangle') plugin = shapeRegistry.get('rect'); + else if (nodeType === 'blank') plugin = shapeRegistry.get('dummy'); + } + + // Default to 'default' plugin if still not found + if (!plugin) plugin = shapeRegistry.get('default'); + + // 2. Resolve asset path (Skip for groups and primitives!) + const primitives = ['rect', 'circle', 'ellipse', 'rounded-rect', 'text-box', 'label', 'dot', 'dummy', 'rack', 'triangle', 'diamond', 'parallelogram', 'cylinder', 'document', 'manual-input', 'table', 'user', 'admin', 'hourglass', 'polyline']; + let assetPath = `/static/assets/${DEFAULTS.DEFAULT_ICON}`; + + if (data.is_group || primitives.includes(nodeType)) { + assetPath = undefined; + } else if (plugin.shape === 'drawnet-node' || plugin.type === 'default' || !plugin.icon) { + const currentPath = data.assetPath || data.asset_path; + if (currentPath) { + assetPath = currentPath.startsWith('/static/assets/') ? currentPath : `/static/assets/${currentPath}`; + } else { + const matchedAsset = state.assetsData?.find(a => { + const searchType = (a.type || '').toLowerCase(); + const searchId = (a.id || '').toLowerCase(); + return nodeType === searchType || nodeType === searchId || + nodeType.includes(searchType) || nodeType.includes(searchId); + }); + + if (matchedAsset) { + const iconFileName = matchedAsset.path || (matchedAsset.views && matchedAsset.views.icon) || DEFAULTS.DEFAULT_ICON; + assetPath = `/static/assets/${iconFileName}`; + data.assetPath = iconFileName; + } + } + } + + // 3. Build Base Configuration + let config = { + id: data.id, + shape: plugin.shape, + position: data.pos ? { x: data.pos.x, y: data.pos.y } : { x: 100, y: 100 }, + zIndex: data.zIndex || calculateCellZIndex(data, 0, true), + movable: !data.locked, + deletable: !data.locked, + data: data, + attrs: { + label: { + text: data.label || '', + fill: data.color || data['text-color'] || '#64748b', + ...getLabelAttributes(data.label_pos || data['label-pos'], nodeType, data.is_group) + } + } + }; + + // 4. Plugin Specific Overrides + if (data.is_group) { + config.attrs.body = { + fill: data.background || '#f1f5f9', + stroke: data['border-color'] || '#3b82f6' + }; + } else if (plugin.shape === 'drawnet-icon' && plugin.icon) { + config.attrs.icon = { + text: plugin.icon, + fill: data.color || '#64748b' + }; + } else if (plugin.shape === 'drawnet-node') { + config.attrs.image = { 'xlink:href': assetPath }; + } + + // 5. Primitive Styling Persistence + if (primitives.includes(nodeType)) { + if (!config.attrs.body) config.attrs.body = {}; + if (data.fill) config.attrs.body.fill = data.fill; + if (data.border) config.attrs.body.stroke = data.border; + } + + // Rack specific handling + if (nodeType === 'rack') { + const slots = data.slots || 42; + const height = data.height || 600; + config.data.is_group = true; + config.attrs = { + ...config.attrs, + units: { d: generateRackUnitsPath(height, slots) }, + label: { text: data.label || `Rack (${slots}U)` } + }; + } + + // Rich Card specific handling + if (nodeType === 'rich-card' || plugin.shape === 'drawnet-rich-card') { + config.data.headerText = data.headerText || data.label || 'RICH INFO CARD'; + config.data.content = data.content || '1. Content goes here...\n2. Support multiple lines'; + config.data.cardType = data.cardType || 'numbered'; + config.data.headerColor = data.headerColor || '#3b82f6'; + config.data.headerAlign = data.headerAlign || 'left'; + config.data.contentAlign = data.contentAlign || 'left'; + + const hAnchor = config.data.headerAlign === 'center' ? 'middle' : (config.data.headerAlign === 'right' ? 'end' : 'start'); + const hX = config.data.headerAlign === 'center' ? 0.5 : (config.data.headerAlign === 'right' ? '100%' : 10); + const hX2 = config.data.headerAlign === 'right' ? -10 : 0; + + config.attrs = { + ...config.attrs, + headerLabel: { + text: config.data.headerText, + textAnchor: hAnchor, + refX: hX, + refX2: hX2 + }, + header: { fill: config.data.headerColor }, + body: { stroke: config.data.headerColor } + }; + + // Initial render trigger (Hack: X6 might not be ready, so we defer) + setTimeout(() => { + const cell = state.graph.getCellById(config.id); + if (cell) { + import('../utils.js').then(m => m.renderRichContent(cell)); + } + }, 50); + } + + return config; +} diff --git a/static/js/modules/graph/styles/node_shapes.js b/static/js/modules/graph/styles/node_shapes.js new file mode 100644 index 0000000..fd4a840 --- /dev/null +++ b/static/js/modules/graph/styles/node_shapes.js @@ -0,0 +1,338 @@ +/** + * graph/styles/node_shapes.js - Registration of individual shape plugins + */ +import { shapeRegistry } from './registry.js'; +import { commonPorts } from './ports.js'; +import { generateRackUnitsPath, getLabelAttributes } from './utils.js'; +import { DEFAULTS } from '../../constants.js'; + +/** + * Initialize all shape plugins into the registry + */ +export function registerNodes() { + // 1. Default Node + shapeRegistry.register('default', { + shape: 'drawnet-node', + definition: { + inherit: 'rect', + width: 60, height: 60, + attrs: { + body: { strokeWidth: 0, fill: 'transparent', rx: 4, ry: 4 }, + image: { 'xlink:href': `/static/assets/${DEFAULTS.DEFAULT_ICON || 'router.svg'}`, width: 48, height: 48, refX: 6, refY: 6 }, + label: { + text: '', fill: '#64748b', fontSize: 12, fontFamily: 'Inter, sans-serif', + fontWeight: 'bold', textVerticalAnchor: 'top', refX: 0.5, refY: '100%', refY2: 10, + }, + }, + markup: [ + { tagName: 'rect', selector: 'body' }, + { tagName: 'image', selector: 'image' }, + { tagName: 'text', selector: 'label' }, + ], + ports: { ...commonPorts } + } + }); + + // 2. Group Node + shapeRegistry.register('group', { + shape: 'drawnet-group', + definition: { + inherit: 'rect', + width: 200, height: 200, + attrs: { + body: { strokeWidth: 2, stroke: '#3b82f6', fill: '#f1f5f9', fillOpacity: 0.2, rx: 8, ry: 8 }, + label: { + text: '', fill: '#1e293b', fontSize: 14, fontFamily: 'Inter, sans-serif', + fontWeight: 'bold', textVerticalAnchor: 'bottom', refX: 0.5, refY: -15, + }, + }, + ports: { ...commonPorts } + } + }); + + // 3. Dummy/Blank Node + shapeRegistry.register('dummy', { + shape: 'drawnet-dummy', + definition: { + inherit: 'circle', + width: 8, height: 8, + attrs: { + body: { strokeWidth: 1, stroke: 'rgba(148, 163, 184, 0.2)', fill: 'rgba(255, 255, 255, 0.1)' }, + }, + ports: { + groups: { ...commonPorts.groups, center: { position: 'absolute', attrs: { circle: { r: 4, magnet: true, stroke: '#31d0c6', strokeWidth: 2, fill: '#fff' } } } }, + items: [{ id: 'center', group: 'center' }], + } + } + }); + + // 4. Dot Node + shapeRegistry.register('dot', { + shape: 'drawnet-dot', + definition: { + inherit: 'circle', + width: 6, height: 6, + attrs: { + body: { strokeWidth: 1, stroke: '#64748b', fill: '#64748b' }, + }, + ports: { + groups: { ...commonPorts.groups, center: { position: 'absolute', attrs: { circle: { r: 3, magnet: true, stroke: '#31d0c6', strokeWidth: 1, fill: '#fff' } } } }, + items: [{ id: 'center', group: 'center' }], + } + } + }); + + // 5. Basic Shapes (Primitives) + const basicAttrs = { + body: { strokeWidth: 2, stroke: '#94a3b8', fill: '#ffffff' }, + label: { text: '', fill: '#64748b', fontSize: 12, refX: 0.5, refY: 0.5, textAnchor: 'middle', textVerticalAnchor: 'middle' } + }; + + shapeRegistry.register('rect', { + shape: 'drawnet-rect', + definition: { inherit: 'rect', width: 100, height: 60, attrs: basicAttrs, ports: commonPorts } + }); + + shapeRegistry.register('rounded-rect', { + shape: 'drawnet-rounded-rect', + definition: { + inherit: 'rect', width: 100, height: 60, + attrs: { ...basicAttrs, body: { ...basicAttrs.body, rx: 12, ry: 12 } }, + ports: commonPorts + } + }); + + shapeRegistry.register('circle', { + shape: 'drawnet-circle', + definition: { inherit: 'circle', width: 60, height: 60, attrs: basicAttrs, ports: commonPorts } + }); + + shapeRegistry.register('ellipse', { + shape: 'drawnet-ellipse', + definition: { inherit: 'ellipse', width: 80, height: 50, attrs: basicAttrs, ports: commonPorts } + }); + + shapeRegistry.register('text-box', { + shape: 'drawnet-text', + definition: { + inherit: 'rect', width: 100, height: 40, + attrs: { body: { strokeWidth: 0, fill: 'transparent' }, label: { ...basicAttrs.label, text: 'Text', fill: '#1e293b', fontSize: 14 } } + } + }); + + shapeRegistry.register('label', { + shape: 'drawnet-label', + definition: { + inherit: 'rect', width: 80, height: 30, + attrs: { + ...basicAttrs, + body: { ...basicAttrs.body, rx: 4, ry: 4, strokeWidth: 1 }, + label: { ...basicAttrs.label, fontSize: 13, fill: '#1e293b' } + }, + ports: commonPorts + } + }); + + // 6. Practical Shapes + shapeRegistry.register('browser', { + shape: 'drawnet-browser', + definition: { + inherit: 'rect', width: 120, height: 80, + markup: [ + { tagName: 'rect', selector: 'body' }, + { tagName: 'rect', selector: 'header' }, + { tagName: 'circle', selector: 'btn1' }, + { tagName: 'circle', selector: 'btn2' }, + { tagName: 'text', selector: 'label' } + ], + attrs: { + body: { strokeWidth: 2, stroke: '#94a3b8', fill: '#ffffff', rx: 4, ry: 4 }, + header: { strokeWidth: 2, stroke: '#94a3b8', fill: '#f1f5f9', height: 18, refWidth: '100%', rx: 4, ry: 4 }, + btn1: { r: 3, fill: '#cbd5e1', refX: 10, refY: 9 }, + btn2: { r: 3, fill: '#cbd5e1', refX: 20, refY: 9 }, + label: { text: '', fill: '#64748b', fontSize: 12, refX: 0.5, refY: 0.6, textAnchor: 'middle', textVerticalAnchor: 'middle' } + }, + ports: commonPorts + } + }); + + shapeRegistry.register('triangle', { + shape: 'drawnet-triangle', + definition: { + inherit: 'polygon', width: 60, height: 60, + attrs: { + body: { refPoints: '0,10 5,0 10,10', strokeWidth: 2, stroke: '#94a3b8', fill: '#ffffff' }, + label: { ...basicAttrs.label, refY: 0.7 } + }, + ports: commonPorts + } + }); + + shapeRegistry.register('diamond', { + shape: 'drawnet-diamond', + definition: { + inherit: 'polygon', width: 80, height: 80, + attrs: { body: { refPoints: '0,5 5,0 10,5 5,10', strokeWidth: 2, stroke: '#94a3b8', fill: '#ffffff' }, label: basicAttrs.label }, + ports: commonPorts + } + }); + + shapeRegistry.register('parallelogram', { + shape: 'drawnet-parallelogram', + definition: { + inherit: 'polygon', width: 100, height: 60, + attrs: { body: { refPoints: '2,0 10,0 8,10 0,10', strokeWidth: 2, stroke: '#94a3b8', fill: '#ffffff' }, label: basicAttrs.label }, + ports: commonPorts + } + }); + + shapeRegistry.register('cylinder', { + shape: 'drawnet-cylinder', + definition: { + inherit: 'rect', width: 60, height: 80, + markup: [ + { tagName: 'path', selector: 'body' }, + { tagName: 'path', selector: 'top' }, + { tagName: 'text', selector: 'label' } + ], + attrs: { + body: { d: 'M 0 10 L 0 70 C 0 80 60 80 60 70 L 60 10', strokeWidth: 2, stroke: '#94a3b8', fill: '#ffffff' }, + top: { d: 'M 0 10 C 0 0 60 0 60 10 C 60 20 0 20 0 10 Z', strokeWidth: 2, stroke: '#94a3b8', fill: '#e2e8f0' }, + label: basicAttrs.label + }, + ports: commonPorts + } + }); + + shapeRegistry.register('document', { + shape: 'drawnet-document', + definition: { + inherit: 'rect', width: 60, height: 80, + markup: [ + { tagName: 'path', selector: 'body' }, + { tagName: 'path', selector: 'fold' }, + { tagName: 'text', selector: 'label' } + ], + attrs: { + body: { d: 'M 0 0 L 45 0 L 60 15 L 60 80 L 0 80 Z', strokeWidth: 2, stroke: '#94a3b8', fill: '#ffffff' }, + fold: { d: 'M 45 0 L 45 15 L 60 15', strokeWidth: 2, stroke: '#94a3b8', fill: '#e2e8f0' }, + label: basicAttrs.label + }, + ports: commonPorts + } + }); + + shapeRegistry.register('manual-input', { + shape: 'drawnet-manual-input', + definition: { + inherit: 'polygon', width: 100, height: 60, + attrs: { body: { refPoints: '0,3 10,0 10,10 0,10', strokeWidth: 2, stroke: '#94a3b8', fill: '#ffffff' }, label: basicAttrs.label }, + ports: commonPorts + } + }); + + shapeRegistry.register('table', { + // ... (previous table registration) + }); + + // --- 랙(Rack) 컨테이너 플러그인 --- + shapeRegistry.register('rack', { + shape: 'drawnet-rack', + definition: { + inherit: 'rect', + width: 160, height: 600, + markup: [ + { tagName: 'rect', selector: 'body' }, + { tagName: 'rect', selector: 'header' }, + { tagName: 'path', selector: 'units' }, + { tagName: 'text', selector: 'label' } + ], + attrs: { + body: { strokeWidth: 3, stroke: '#334155', fill: '#f8fafc', rx: 4, ry: 4 }, + header: { refWidth: '100%', height: 30, fill: '#1e293b', stroke: '#334155', strokeWidth: 2, rx: 4, ry: 4 }, + units: { + d: generateRackUnitsPath(600, 42), + stroke: '#94a3b8', strokeWidth: 1 + }, + label: { + text: 'Rack', fill: '#ffffff', fontSize: 14, fontWeight: 'bold', + refX: 0.5, refY: 15, textAnchor: 'middle', textVerticalAnchor: 'middle' + } + }, + ports: commonPorts + } + }); + + // 8. Rich Text Card (Header + Listing) + shapeRegistry.register('rich-card', { + shape: 'drawnet-rich-card', + definition: { + inherit: 'rect', + width: 280, height: 180, + markup: [ + { tagName: 'rect', selector: 'body' }, + { tagName: 'rect', selector: 'header' }, + { tagName: 'text', selector: 'headerLabel' }, + { + tagName: 'foreignObject', + selector: 'fo', + children: [ + { + tagName: 'div', + ns: 'http://www.w3.org/1999/xhtml', + selector: 'content', + style: { + width: '100%', + height: '100%', + padding: '10px', + fontSize: '12px', + color: '#334155', + overflow: 'hidden', + boxSizing: 'border-box', + lineHeight: '1.4' + } + } + ] + } + ], + attrs: { + body: { fill: '#ffffff', stroke: '#3b82f6', strokeWidth: 1, rx: 4, ry: 4 }, + header: { refWidth: '100%', height: 32, fill: '#3b82f6', rx: 4, ry: 4 }, + headerLabel: { + text: 'TITLE', fill: '#ffffff', fontSize: 13, fontWeight: 'bold', + refX: 10, refY: 16, textVerticalAnchor: 'middle' + }, + fo: { refX: 0, refY: 32, refWidth: '100%', refHeight: 'calc(100% - 32)' } + }, + ports: commonPorts + } + }); + + // 7. Dynamic Icon-based Plugins + const icons = { + 'user': '\uf007', 'admin': '\uf505', 'hourglass': '\uf252', + 'table': '\uf0ce', 'tag': '\uf02b', 'polyline': '\uf201', + 'arrow-up': '\uf062', 'arrow-down': '\uf063', 'arrow-left': '\uf060', 'arrow-right': '\uf061' + }; + + Object.keys(icons).forEach(type => { + shapeRegistry.register(type, { + shape: 'drawnet-icon', + icon: icons[type], + definition: { + inherit: 'rect', width: 60, height: 60, + markup: [ + { tagName: 'rect', selector: 'body' }, + { tagName: 'text', selector: 'icon' }, + { tagName: 'text', selector: 'label' } + ], + attrs: { + body: { strokeWidth: 0, fill: 'transparent' }, + icon: { text: icons[type], fontFamily: 'FontAwesome', fontSize: 40, fill: '#64748b', refX: 0.5, refY: 0.5, textAnchor: 'middle', textVerticalAnchor: 'middle' }, + label: { text: '', fill: '#64748b', fontSize: 12, refX: 0.5, refY: '100%', refY2: 12, textAnchor: 'middle', textVerticalAnchor: 'top' } + }, + ports: commonPorts + } + }); + }); +} diff --git a/static/js/modules/graph/styles/ports.js b/static/js/modules/graph/styles/ports.js new file mode 100644 index 0000000..c736816 --- /dev/null +++ b/static/js/modules/graph/styles/ports.js @@ -0,0 +1,39 @@ +/** + * graph/styles/ports.js - Core port configurations for X6 nodes + */ + +export const commonPorts = { + groups: { + top: { + position: 'top', + attrs: { circle: { r: 4, magnet: true, stroke: '#31d0c6', strokeWidth: 2, fill: '#fff' } } + }, + bottom: { + position: 'bottom', + attrs: { circle: { r: 4, magnet: true, stroke: '#31d0c6', strokeWidth: 2, fill: '#fff' } } + }, + left: { + position: 'left', + attrs: { circle: { r: 4, magnet: true, stroke: '#31d0c6', strokeWidth: 2, fill: '#fff' } } + }, + right: { + position: 'right', + attrs: { circle: { r: 4, magnet: true, stroke: '#31d0c6', strokeWidth: 2, fill: '#fff' } } + }, + center: { + position: 'absolute', + attrs: { circle: { r: 4, magnet: true, stroke: '#31d0c6', strokeWidth: 2, fill: '#fff' } } + } + }, + items: [ + { id: 'top', group: 'top' }, + { id: 'bottom', group: 'bottom' }, + { id: 'left', group: 'left' }, + { id: 'right', group: 'right' } + ], +}; + +export const centerPort = { + ...commonPorts, + items: [{ id: 'center', group: 'center' }] +}; diff --git a/static/js/modules/graph/styles/registry.js b/static/js/modules/graph/styles/registry.js new file mode 100644 index 0000000..374d46e --- /dev/null +++ b/static/js/modules/graph/styles/registry.js @@ -0,0 +1,54 @@ +import { logger } from '../../utils/logger.js'; +/** + * graph/styles/registry.js - Central registry for custom X6 shapes (Plugin System) + */ + +class ShapeRegistry { + constructor() { + this.shapes = new Map(); + } + + /** + * Registers a new shape plugin + * @param {string} type - Node type name (e.g., 'browser', 'triangle') + * @param {Object} options - Shape configuration + * @param {string} options.shape - The X6 shape name to register (e.g., 'drawnet-browser') + * @param {Object} options.definition - The X6 registration object (inherit, markup, attrs, etc.) + * @param {Object} options.mapping - Custom mapping logic or attribute overrides + * @param {string} options.icon - Default FontAwesome icon (if applicable) + */ + register(type, options) { + this.shapes.set(type.toLowerCase(), { + type, + ...options + }); + } + + get(type) { + return this.shapes.get(type.toLowerCase()); + } + + getAll() { + return Array.from(this.shapes.values()); + } + + /** + * Internal X6 registration helper + */ + install(X6) { + if (!X6) return; + const registeredShapes = new Set(); + this.shapes.forEach((plugin) => { + if (plugin.shape && plugin.definition && !registeredShapes.has(plugin.shape)) { + try { + X6.Graph.registerNode(plugin.shape, plugin.definition); + registeredShapes.add(plugin.shape); + } catch (e) { + logger.high(`Shape [${plugin.shape}] registration failed:`, e); + } + } + }); + } +} + +export const shapeRegistry = new ShapeRegistry(); diff --git a/static/js/modules/graph/styles/utils.js b/static/js/modules/graph/styles/utils.js new file mode 100644 index 0000000..b3f2a3d --- /dev/null +++ b/static/js/modules/graph/styles/utils.js @@ -0,0 +1,135 @@ +/** + * graph/styles/utils.js - Utility functions for graph styling + */ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; + +/** + * getLabelAttributes - Returns X6 label attributes based on position and node type + */ +export function getLabelAttributes(pos, nodeType, is_group) { + const defaultPos = is_group ? 'top' : (['rect', 'circle', 'rounded-rect', 'text-box', 'label', 'browser', 'triangle', 'diamond', 'parallelogram', 'cylinder', 'document', 'manual-input'].includes(nodeType) ? 'center' : 'bottom'); + const actualPos = pos || defaultPos; + + switch (actualPos) { + case 'top': + return { refX: 0.5, refY: 0, textAnchor: 'middle', textVerticalAnchor: 'bottom', refY2: -8, refX2: 0 }; + case 'bottom': + return { refX: 0.5, refY: '100%', textAnchor: 'middle', textVerticalAnchor: 'top', refY2: 8, refX2: 0 }; + case 'left': + return { refX: 0, refY: 0.5, textAnchor: 'end', textVerticalAnchor: 'middle', refY2: 0, refX2: -12 }; + case 'right': + return { refX: '100%', refY: 0.5, textAnchor: 'start', textVerticalAnchor: 'middle', refY2: 0, refX2: 12 }; + case 'center': + return { refX: 0.5, refY: 0.5, textAnchor: 'middle', textVerticalAnchor: 'middle', refY2: 0, refX2: 0 }; + default: + return { refX: 0.5, refY: '100%', textAnchor: 'middle', textVerticalAnchor: 'top', refY2: 8, refX2: 0 }; + } +} + +/** + * doctorEdge - Debug assistant for checking cell data and attributes + */ +window.doctorEdge = function (id) { + if (!state.graph) return logger.critical("X6 Graph not initialized."); + const cell = state.graph.getCellById(id); + if (!cell) return logger.critical(`Cell [${id}] not found.`); + + logger.info(`--- drawNET STYLE DOCTOR (X6) for [${id}] ---`); + logger.info("Data Properties:", cell.getData()); + logger.info("Cell Attributes:", cell.getAttrs()); + + if (cell.isEdge()) { + logger.info("Router:", cell.getRouter()); + logger.info("Connector:", cell.getConnector()); + logger.info("Source/Target:", { + source: cell.getSource(), + target: cell.getTarget() + }); + } +}; + +/** + * Rack의 높이와 슬롯 수에 따라 U-Unit 눈금 패스(SVG Path)를 생성합니다. + */ +export function generateRackUnitsPath(height, slots = 42) { + let path = ''; + const headerHeight = 30; // node_shapes.js 고정값과 동기화 + const rackBodyHeight = height - headerHeight; + const unitHeight = rackBodyHeight / slots; + + // 단순화된 눈금 (좌우 레일에 작은 선) + for (let i = 0; i < slots; i++) { + const y = headerHeight + (i * unitHeight); + path += `M 5 ${y} L 15 ${y} M 145 ${y} L 155 ${y} `; + } + return path; +} + +/** + * renderRichContent - Translates plain text to stylized HTML for the Rich Card + */ +export function renderRichContent(cell, updates) { + if (!state.graph) return; + const view = cell.findView(state.graph); + if (!view) return; // View might not be rendered yet + + const container = view.container; + const contentDiv = container.querySelector('div[selector="content"]'); + if (!contentDiv) return; + + const data = updates || cell.getData() || {}; + const content = data.content || ''; + const cardType = data.cardType || 'standard'; + const headerColor = data.headerColor || '#3b82f6'; + const contentAlign = data.contentAlign || 'left'; + + contentDiv.style.textAlign = contentAlign; + + const lines = content.split('\n').filter(line => line.trim() !== ''); + let html = ''; + + if (cardType === 'numbered') { + html = lines.map((line, idx) => ` +

+ ${idx + 1} +

${line}

+ `).join(''); + } else if (cardType === 'bullet') { + html = lines.map(line => ` +

●

${line}

+ `).join(''); + } else if (cardType === 'legend') { + html = lines.map(line => { + const match = line.match(/^-\s*$(.*?):(.*?)$\s*(.*)/); + if (match) { + const [, shape, color, text] = match; + const iconHtml = shape === 'line' + ? `

` + : `

`; + + return ` +

+ ${iconHtml} +

${text}

+ `; + } + return `

${line}

`; + }).join(''); + } else { + html = lines.map(line => `

${line}

`).join(''); + } + + contentDiv.innerHTML = html; +} diff --git a/static/js/modules/graph/utils.js b/static/js/modules/graph/utils.js new file mode 100644 index 0000000..5cc2114 --- /dev/null +++ b/static/js/modules/graph/utils.js @@ -0,0 +1,8 @@ +/** + * Snap a position to the nearest grid interval, accounting for the object's dimension + * to ensure its edges or center align properly with the grid. + */ +export function snapPosition(pos, dimension, spacing) { + const offset = (dimension / 2) % spacing; + return Math.round((pos - offset) / spacing) * spacing + offset; +} diff --git a/static/js/modules/hotkeys/handlers.js b/static/js/modules/hotkeys/handlers.js new file mode 100644 index 0000000..a8526f2 --- /dev/null +++ b/static/js/modules/hotkeys/handlers.js @@ -0,0 +1,14 @@ +import { graphHandlers } from './handlers/graph.js'; +import { uiHandlers } from './handlers/ui.js'; +import { clipboardHandlers } from './handlers/clipboard.js'; +import { ioHandlers } from './handlers/io.js'; + +/** + * actionHandlers - 단축키 동작을 기능별 모듈에서 취합하여 제공하는 매니페스트 객체입니다. + */ +export const actionHandlers = { + ...graphHandlers, + ...uiHandlers, + ...clipboardHandlers, + ...ioHandlers +}; diff --git a/static/js/modules/hotkeys/handlers/clipboard.js b/static/js/modules/hotkeys/handlers/clipboard.js new file mode 100644 index 0000000..f954da6 --- /dev/null +++ b/static/js/modules/hotkeys/handlers/clipboard.js @@ -0,0 +1,190 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; + +const generateShortId = () => Math.random().toString(36).substring(2, 6); + +export const clipboardHandlers = { + copyAttributes: () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + if (selected.length === 0) return; + + const cell = selected[0]; + const data = cell.getData() || {}; + + if (cell.isNode()) { + const whitelistedData = {}; + const dataKeys = ['vendor', 'model', 'status', 'project', 'env', 'tags', 'color', 'asset_path']; + dataKeys.forEach(key => { + if (data[key] !== undefined) whitelistedData[key] = data[key]; + }); + + const whitelistedAttrs = { + label: { + fill: cell.attr('label/fill'), + fontSize: cell.attr('label/fontSize'), + }, + body: { + fill: cell.attr('body/fill'), + stroke: cell.attr('body/stroke'), + strokeWidth: cell.attr('body/strokeWidth'), + } + }; + + state.clipboardNodeData = whitelistedData; + state.clipboardNodeAttrs = whitelistedAttrs; + state.clipboardEdgeData = null; // Clear edge clipboard + logger.info(`Node attributes copied from ${cell.id}`); + } else if (cell.isEdge()) { + const edgeKeys = [ + 'color', 'routing', 'style', 'source_anchor', 'target_anchor', + 'direction', 'is_tunnel', 'routing_offset', 'width', 'flow' + ]; + const edgeData = {}; + edgeKeys.forEach(key => { + if (data[key] !== undefined) edgeData[key] = data[key]; + }); + + state.clipboardEdgeData = edgeData; + state.clipboardNodeData = null; // Clear node clipboard + logger.info(`Edge attributes (Style) copied from ${cell.id}`); + } + }, + + pasteAttributes: async () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + if (selected.length === 0) return; + + const hasNodeData = !!state.clipboardNodeData; + const hasEdgeData = !!state.clipboardEdgeData; + + if (!hasNodeData && !hasEdgeData) return; + + const { handleEdgeUpdate } = await import('../../properties_sidebar/handlers/edge.js'); + + state.graph.batchUpdate(async () => { + for (const cell of selected) { + if (cell.isNode() && hasNodeData) { + const currentData = cell.getData() || {}; + cell.setData({ ...currentData, ...state.clipboardNodeData }); + + if (state.clipboardNodeAttrs) { + const attrs = state.clipboardNodeAttrs; + if (attrs.label) { + if (attrs.label.fill) cell.attr('label/fill', attrs.label.fill); + if (attrs.label.fontSize) cell.attr('label/fontSize', attrs.label.fontSize); + } + if (attrs.body) { + if (attrs.body.fill) cell.attr('body/fill', attrs.body.fill); + if (attrs.body.stroke) cell.attr('body/stroke', attrs.body.stroke); + if (attrs.body.strokeWidth) cell.attr('body/strokeWidth', attrs.body.strokeWidth); + } + } + } else if (cell.isEdge() && hasEdgeData) { + // Apply Edge Formatting + // We use handleEdgeUpdate to ensure physical routers/anchors are updated + await handleEdgeUpdate(cell, state.clipboardEdgeData); + } + } + }); + + logger.high(`Format Painter applied to ${selected.length} elements.`); + import('../../persistence.js').then(m => m.markDirty()); + }, + + copyNodes: () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + if (selected.length === 0) return; + + state.graph.copy(selected); + logger.high("Nodes copied to clipboard (X6)."); + }, + + pasteNodes: () => { + if (!state.graph || state.graph.isClipboardEmpty()) return; + + // Logical Layer Guard: Filter out nodes if target layer is logical + const activeLayer = state.layers.find(l => l.id === state.activeLayerId); + const isLogical = activeLayer && activeLayer.type === 'logical'; + + let pasted = state.graph.paste({ offset: 20 }); + if (pasted && pasted.length > 0) { + if (isLogical) { + pasted.forEach(cell => { if (cell.isNode()) cell.remove(); }); + pasted = pasted.filter(c => !c.isNode()); + if (pasted.length === 0) { + import('/static/js/modules/i18n.js').then(({ t }) => { + import('../../ui/utils.js').then(m => m.showToast(t('err_logical_layer_drop'), 'warning')); + }); + } + } + + state.graph.batchUpdate(() => { + pasted.forEach(cell => { + if (cell.isNode()) { + const currentData = cell.getData() || {}; + const currentLabel = currentData.label || cell.attr('label/text'); + if (currentLabel) { + const newLabel = `${currentLabel}_${generateShortId()}`; + cell.setData({ ...currentData, label: newLabel, id: cell.id }); + cell.attr('label/text', newLabel); + } else { + cell.setData({ ...currentData, id: cell.id }); + } + } + }); + }); + state.graph.cleanSelection(); + state.graph.select(pasted); + } + logger.high("Nodes pasted and randomized (Logical Filter applied)."); + import('../../persistence.js').then(m => m.markDirty()); + }, + + duplicateNodes: () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + if (selected.length === 0) return; + + state.graph.copy(selected); + + // Logical Layer Guard: Filter out nodes if target layer is logical + const activeLayer = state.layers.find(l => l.id === state.activeLayerId); + const isLogical = activeLayer && activeLayer.type === 'logical'; + + let cloned = state.graph.paste({ offset: 30 }); + if (cloned && cloned.length > 0) { + if (isLogical) { + cloned.forEach(cell => { if (cell.isNode()) cell.remove(); }); + cloned = cloned.filter(c => !c.isNode()); + if (cloned.length === 0) { + import('/static/js/modules/i18n.js').then(({ t }) => { + import('../../ui/utils.js').then(m => m.showToast(t('err_logical_layer_drop'), 'warning')); + }); + } + } + + state.graph.batchUpdate(() => { + cloned.forEach(cell => { + if (cell.isNode()) { + const currentData = cell.getData() || {}; + const currentLabel = currentData.label || cell.attr('label/text'); + if (currentLabel) { + const newLabel = `${currentLabel}_${generateShortId()}`; + cell.setData({ ...currentData, label: newLabel, id: cell.id }); + cell.attr('label/text', newLabel); + } else { + cell.setData({ ...currentData, id: cell.id }); + } + } + }); + }); + state.graph.cleanSelection(); + state.graph.select(cloned); + } + logger.high("Nodes duplicated and randomized (Logical Filter applied)."); + import('../../persistence.js').then(m => m.markDirty()); + } +}; diff --git a/static/js/modules/hotkeys/handlers/graph.js b/static/js/modules/hotkeys/handlers/graph.js new file mode 100644 index 0000000..a605a51 --- /dev/null +++ b/static/js/modules/hotkeys/handlers/graph.js @@ -0,0 +1,111 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; +import { alignNodes, moveNodes, distributeNodes } from '../../graph/alignment.js'; +import { handleMenuAction } from '../../ui/context_menu/handlers.js'; + +export const graphHandlers = { + // ... cleanup ... + deleteSelected: () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + if (selected.length === 0) return; + + state.graph.removeCells(selected); + import('../../persistence.js').then(m => m.markDirty()); + }, + fitScreen: () => { + if (state.graph) { + state.graph.zoomToFit({ padding: 50 }); + logger.high("Graph fit to screen (X6)."); + } + }, + zoomIn: () => state.graph?.zoom(0.2), + zoomOut: () => state.graph?.zoom(-0.2), + connectNodes: () => handleMenuAction('connect-solid'), + connectStraight: () => handleMenuAction('connect-straight'), + disconnectNodes: () => handleMenuAction('disconnect'), + undo: () => { + if (!state.graph) return; + try { + if (typeof state.graph.undo === 'function') { + state.graph.undo(); + logger.info("Undo performed via graph.undo()"); + } else { + const history = state.graph.getPlugin('history'); + if (history) history.undo(); + logger.info("Undo performed via history plugin"); + } + } catch (e) { + logger.critical("Undo failed", e); + } + }, + redo: () => { + if (!state.graph) return; + try { + if (typeof state.graph.redo === 'function') { + state.graph.redo(); + logger.info("Redo performed via graph.redo()"); + } else { + const history = state.graph.getPlugin('history'); + if (history) history.redo(); + logger.info("Redo performed via history plugin"); + } + } catch (e) { + logger.critical("Redo failed", e); + } + }, + arrangeLayout: () => { + logger.high("Auto-layout is currently disabled (Refactoring)."); + }, + bringToFront: () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + selected.forEach(cell => cell.toFront({ deep: true })); + import('../../persistence.js').then(m => m.markDirty()); + }, + sendToBack: () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + selected.forEach(cell => cell.toBack({ deep: true })); + import('../../persistence.js').then(m => m.markDirty()); + }, + toggleLock: () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + if (selected.length === 0) return; + + selected.forEach(cell => { + const data = cell.getData() || {}; + const isLocked = !data.locked; + cell.setData({ ...data, locked: isLocked }); + cell.setProp('movable', !isLocked); + cell.setProp('deletable', !isLocked); + cell.setProp('rotatable', !isLocked); + + if (isLocked) { + cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]); + } else { + cell.removeTools(); + } + }); + import('../../persistence.js').then(m => m.markDirty()); + logger.high(`Toggled lock for ${selected.length} elements.`); + }, + alignTop: () => alignNodes('top'), + alignBottom: () => alignNodes('bottom'), + alignLeft: () => alignNodes('left'), + alignRight: () => alignNodes('right'), + alignMiddle: () => alignNodes('middle'), + alignCenter: () => alignNodes('center'), + distributeHorizontal: () => distributeNodes('horizontal'), + distributeVertical: () => distributeNodes('vertical'), + groupNodes: () => handleMenuAction('group'), + moveUp: () => moveNodes(0, -5), + moveDown: () => moveNodes(0, 5), + moveLeft: () => moveNodes(-5, 0), + moveRight: () => moveNodes(5, 0), + moveUpLarge: () => moveNodes(0, -(state.gridSpacing || 20)), + moveDownLarge: () => moveNodes(0, (state.gridSpacing || 20)), + moveLeftLarge: () => moveNodes(-(state.gridSpacing || 20), 0), + moveRightLarge: () => moveNodes((state.gridSpacing || 20), 0) +}; diff --git a/static/js/modules/hotkeys/handlers/io.js b/static/js/modules/hotkeys/handlers/io.js new file mode 100644 index 0000000..74b3539 --- /dev/null +++ b/static/js/modules/hotkeys/handlers/io.js @@ -0,0 +1,10 @@ +export const ioHandlers = { + exportJson: () => { + const exportBtn = document.getElementById('export-json'); + if (exportBtn) exportBtn.click(); + }, + importJson: () => { + const importBtn = document.getElementById('import-json'); + if (importBtn) importBtn.click(); + } +}; diff --git a/static/js/modules/hotkeys/handlers/ui.js b/static/js/modules/hotkeys/handlers/ui.js new file mode 100644 index 0000000..d799ef9 --- /dev/null +++ b/static/js/modules/hotkeys/handlers/ui.js @@ -0,0 +1,34 @@ +import { state } from '../../state.js'; + +export const uiHandlers = { + toggleInventory: () => { + import('../../graph/analysis.js').then(m => m.toggleInventory()); + }, + toggleProperties: () => { + import('../../properties_sidebar/index.js').then(m => m.toggleSidebar()); + }, + toggleLayers: () => { + import('../../ui/layer_panel.js').then(m => m.toggleLayerPanel()); + }, + editLabel: () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + if (selected.length === 0) return; + + import('../../properties_sidebar/index.js').then(m => { + m.toggleSidebar(true); + setTimeout(() => { + const labelInput = document.getElementById('prop-label'); + if (labelInput) { + labelInput.focus(); + labelInput.select(); + } + }, 50); + }); + }, + cancel: () => { + if (!state.graph) return; + state.graph.cleanSelection(); + import('../../properties_sidebar/index.js').then(m => m.toggleSidebar(false)); + } +}; diff --git a/static/js/modules/hotkeys/index.js b/static/js/modules/hotkeys/index.js new file mode 100644 index 0000000..0428695 --- /dev/null +++ b/static/js/modules/hotkeys/index.js @@ -0,0 +1,94 @@ +import { state } from '../state.js'; +import { actionHandlers } from './handlers.js'; +import { logger } from '../utils/logger.js'; + +/** + * initHotkeys - Initializes the keyboard shortcut system. + */ +export async function initHotkeys() { + if (window.__drawNET_Hotkeys_Initialized) { + logger.high("Hotkeys already initialized. Skipping."); + return; + } + window.__drawNET_Hotkeys_Initialized = true; + + try { + const response = await fetch('/static/hotkeys.json'); + const config = await response.json(); + const hotkeys = config.hotkeys; + + window.addEventListener('keydown', (e) => { + if (e.repeat) return; + + const editableElements = ['TEXTAREA', 'INPUT']; + const isTyping = editableElements.includes(e.target.tagName) && e.target.id !== 'dark-mode-toggle'; + + const keyPressed = e.key.toLowerCase(); + const keyCode = e.code; + + for (const hk of hotkeys) { + // Match by physical code (preferred) or key string + const matchCode = hk.code && hk.code === keyCode; + const matchKey = hk.key && hk.key.toLowerCase() === keyPressed; + + if (!(matchCode || matchKey)) continue; + + // Match modifiers strictly + const matchCtrl = !!hk.ctrl === e.ctrlKey; + const matchAlt = !!hk.alt === e.altKey; + const matchShift = !!hk.shift === e.shiftKey; + + if (matchCtrl && matchAlt && matchShift) { + const allowWhileTyping = hk.alwaysEnabled === true; + if (isTyping && !allowWhileTyping) break; + + logger.info(`Hotkey Match - ${hk.action} (${hk.key})`); + + if (allowWhileTyping || !isTyping) { + e.preventDefault(); + } + const handler = actionHandlers[hk.action]; + if (handler) { + handler(); + } + return; + } + } + }); + + logger.high("Hotkeys module initialized (X6)."); + } catch (err) { + logger.critical("Failed to load hotkeys configuration (X6).", err); + } + + // Ctrl + Wheel: Zoom handling + window.addEventListener('wheel', (e) => { + if (e.ctrlKey) { + e.preventDefault(); + if (!state.graph) return; + const delta = e.deltaY > 0 ? -0.1 : 0.1; + state.graph.zoom(delta, { center: { x: e.clientX, y: e.clientY } }); + } + }, { passive: false }); + + // Global Key State Tracking (for Ctrl+Drag copy) + // Extra guard: Check e.ctrlKey/metaKey on mouse events to auto-heal mismatched state + const syncCtrlState = (e) => { + const isModifier = e.ctrlKey || e.metaKey; + if (state.isCtrlPressed !== isModifier) { + state.isCtrlPressed = isModifier; + } + }; + window.addEventListener('mousedown', syncCtrlState, true); + window.addEventListener('mousemove', syncCtrlState, true); + + window.addEventListener('keydown', (e) => { + if (e.key === 'Control' || e.key === 'Meta') state.isCtrlPressed = true; + }, true); + window.addEventListener('keyup', (e) => { + if (e.key === 'Control' || e.key === 'Meta') state.isCtrlPressed = false; + }, true); + window.addEventListener('blur', () => { + state.isCtrlPressed = false; // Reset on window blur to avoid stuck state + }); +} diff --git a/static/js/modules/i18n.js b/static/js/modules/i18n.js new file mode 100644 index 0000000..bba78c7 --- /dev/null +++ b/static/js/modules/i18n.js @@ -0,0 +1,50 @@ +import { state } from './state.js'; +import { logger } from './utils/logger.js'; + +export async function initI18n() { + const lang = state.language; + + try { + const response = await fetch(`/static/locales/${lang}.json`); + const translations = await response.json(); + const enResponse = await fetch('/static/locales/en.json'); + const enTranslations = await enResponse.json(); + + state.i18n = { ...enTranslations, ...translations }; + applyTranslations(); + logger.high(`i18n initialized for [${lang}]`); + } catch (err) { + logger.critical("Failed to load locales", err); + } +} + +export function t(key, params = {}) { + let translation = (state.i18n && state.i18n[key]) || key; + + // Support for placeholders like {count} or {date} + for (const [pKey, pVal] of Object.entries(params)) { + translation = translation.replace(`{${pKey}}`, pVal); + } + + return translation; +} + +export function applyTranslations() { + const elements = document.querySelectorAll('[data-i18n]'); + elements.forEach(el => { + const key = el.getAttribute('data-i18n'); + const translation = t(key); + + if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') { + el.placeholder = translation; + } else if (el.title) { + el.title = translation; + } else { + el.innerText = translation; + } + }); + + // Handle Title specifically if needed + const searchInput = document.getElementById('asset-search'); + if (searchInput) searchInput.placeholder = t('search_placeholder'); +} diff --git a/static/js/modules/persistence.js b/static/js/modules/persistence.js new file mode 100644 index 0000000..7f439fb --- /dev/null +++ b/static/js/modules/persistence.js @@ -0,0 +1,102 @@ +import { state } from './state.js'; +import { getProjectData, restoreProjectData } from './graph/io/index.js'; +import { getSettings } from './settings/store.js'; +import { STORAGE_KEYS } from './constants.js'; +import { logger } from './utils/logger.js'; +import { t } from './i18n.js'; +import { showToast } from './ui/toast.js'; + +const AUTOSAVE_KEY = STORAGE_KEYS.AUTOSAVE; +let isDirty = false; + +/** + * initPersistence - 자동 저장 및 세션 복구 초기화 + */ +export function initPersistence() { + // 1. 페이지 이탈 가드 + window.addEventListener('beforeunload', (e) => { + if (isDirty) { + e.preventDefault(); + e.returnValue = ''; + } + }); + + // 2. 30초마다 자동 저장 (변경사항 있을 때만) + setInterval(() => { + if (isDirty) { + saveToLocal(); + } + }, 30000); + + // 3. X6 변경 감지 + if (state.graph) { + state.graph.on('cell:added cell:removed cell:changed', () => { + markDirty(); + }); + } + + // 4. 세션 복구 확인 + checkRecovery(); +} + +export function markDirty() { + isDirty = true; +} + +export function clearDirty() { + isDirty = false; +} + +export function clearLastState() { + localStorage.removeItem(AUTOSAVE_KEY); + isDirty = false; + logger.info("Local auto-save session cleared."); +} + +function saveToLocal() { + const data = getProjectData(); + if (data) { + localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(data)); + clearDirty(); + showToast(t('msg_autosaved'), 'success', 2000); + logger.info("Progress auto-saved to local storage (X6)."); + } +} + +async function checkRecovery() { + const saved = localStorage.getItem(AUTOSAVE_KEY); + if (!saved) return; + + try { + const data = JSON.parse(saved); + + // v3.0 포맷 확인 (graphJson 필드 존재 여부) + const isV3 = data.header?.app === "drawNET Premium" && data.graphJson; + if (!isV3) { + // 구버전 자동저장 데이터는 무효화하고 삭제 + logger.high("Legacy auto-save format detected. Clearing."); + localStorage.removeItem(AUTOSAVE_KEY); + return; + } + + const nodeCount = (data.graphJson?.cells || []).filter(c => c.shape !== 'edge').length; + if (nodeCount === 0) return; + + const settings = getSettings(); + + setTimeout(() => { + if (settings.autoLoadLast) { + logger.high("Auto-loading last session per user settings."); + showToast(t('msg_restoring'), 'info', 3000); + restoreProjectData(data); + } else if (confirm(t('confirm_recovery'))) { + restoreProjectData(data); + } else { + localStorage.removeItem(AUTOSAVE_KEY); + } + }, 1200); + } catch (e) { + logger.critical("Failed to parse auto-save data.", e); + localStorage.removeItem(AUTOSAVE_KEY); + } +} diff --git a/static/js/modules/properties_sidebar/handlers/edge.js b/static/js/modules/properties_sidebar/handlers/edge.js new file mode 100644 index 0000000..9328a3d --- /dev/null +++ b/static/js/modules/properties_sidebar/handlers/edge.js @@ -0,0 +1,88 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; + +/** + * handleEdgeUpdate - Synchronizes property sidebar changes to the X6 Edge cell. + * Ensures data, attributes (markers, colors), anchors, and routers are all updated. + */ +export async function handleEdgeUpdate(cell, data) { + if (cell.isNode()) return; + + const updates = { + id: cell.id, + source: cell.getSource().cell, + target: cell.getTarget().cell, + source_port: cell.getSource().port, + target_port: cell.getTarget().port, + + // Priority: DOM Element > Provided Data (Format Painter) > Default/Old Data + color: document.getElementById('prop-color')?.value || data?.color, + style: document.getElementById('prop-style')?.value || data?.style, + routing: document.getElementById('prop-routing')?.value || data?.routing, + source_anchor: document.getElementById('prop-src-anchor')?.value || data?.source_anchor || 'orth', + target_anchor: document.getElementById('prop-dst-anchor')?.value || data?.target_anchor || 'orth', + direction: document.getElementById('prop-direction')?.value || data?.direction || 'none', + is_tunnel: document.getElementById('prop-is-tunnel') ? !!document.getElementById('prop-is-tunnel').checked : !!data?.is_tunnel, + width: document.getElementById('prop-width') ? parseFloat(document.getElementById('prop-width').value) : (parseFloat(data?.width) || 2), + routing_offset: document.getElementById('prop-routing-offset') ? parseInt(document.getElementById('prop-routing-offset').value) : (parseInt(data?.routing_offset) || 20), + description: document.getElementById('prop-description') ? document.getElementById('prop-description').value : data?.description, + tags: document.getElementById('prop-tags') ? document.getElementById('prop-tags').value.split(',').map(t => t.trim()).filter(t => t) : (data?.tags || []), + label: document.getElementById('prop-label') ? document.getElementById('prop-label').value : data?.label, + locked: document.getElementById('prop-locked') ? !!document.getElementById('prop-locked').checked : !!data?.locked + }; + + // 1. Update Cell Data (Single Source of Truth) + const currentData = cell.getData() || {}; + cell.setData({ ...currentData, ...updates }); + + // 2. Sync Visual Attributes (Arrows, Colors, Styles) + // We reuse the central mapping logic from styles.js for consistency + const { getX6EdgeConfig } = await import('/static/js/modules/graph/styles.js'); + const edgeConfig = getX6EdgeConfig(updates); + + // Apply Attributes (Markers, Stroke, Dasharray) + // Note: setAttrs merges by default, but we use it to apply the calculated style object + if (edgeConfig.attrs) { + cell.setAttrs(edgeConfig.attrs); + } + + // Apply Labels + if (edgeConfig.labels) { + cell.setLabels(edgeConfig.labels); + } + + // 3. Anchor & Router Updates (Physical Pathing) + if (edgeConfig.source) cell.setSource(edgeConfig.source); + if (edgeConfig.target) cell.setTarget(edgeConfig.target); + + // Apply Router and Connector (Physical Pathing) + // Clear everything first to prevent old state persistence + cell.setVertices([]); + cell.setRouter(null); + cell.setConnector('normal'); + + if (edgeConfig.router) { + cell.setRouter(edgeConfig.router); + } + + if (edgeConfig.connector) { + cell.setConnector(edgeConfig.connector); + } + + // 4. Mark Project as Dirty and Apply Locking/Selection Tools + cell.setProp('movable', !updates.locked); + cell.setProp('deletable', !updates.locked); + + // Selection Tool Preservation: If currently selected, ensure vertices are visible + const isSelected = state.graph.isSelected(cell); + if (updates.locked) { + cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]); + } else { + cell.removeTools(); + if (isSelected) { + cell.addTools(['vertices']); + } + } + + import('/static/js/modules/persistence.js').then(m => m.markDirty()); +} diff --git a/static/js/modules/properties_sidebar/handlers/node.js b/static/js/modules/properties_sidebar/handlers/node.js new file mode 100644 index 0000000..218cd3d --- /dev/null +++ b/static/js/modules/properties_sidebar/handlers/node.js @@ -0,0 +1,136 @@ +import { state } from '../../state.js'; +import { logger } from '../../utils/logger.js'; + +export async function handleNodeUpdate(cell, data) { + const isNode = cell.isNode(); + if (!isNode) return; + + const updates = { + // Priority: DOM Element > Provided Data (Format Painter) > Default/Old Data + type: document.getElementById('prop-type')?.value || data?.type, + label: document.getElementById('prop-label') ? document.getElementById('prop-label').value : data?.label, + is_group: document.getElementById('prop-is-group') ? !!document.getElementById('prop-is-group').checked : !!data?.is_group, + padding: document.getElementById('prop-padding') ? parseInt(document.getElementById('prop-padding').value) : (data?.padding || undefined), + slots: document.getElementById('prop-slots') ? parseInt(document.getElementById('prop-slots').value) : (data?.slots || undefined), + color: document.getElementById('prop-label-color')?.value || data?.color, + fill: document.getElementById('prop-fill-color')?.value || data?.fill, + border: document.getElementById('prop-border-color')?.value || data?.border, + label_pos: document.getElementById('prop-label-pos')?.value || data?.label_pos, + // PM Standard Attributes + vendor: document.getElementById('prop-vendor') ? document.getElementById('prop-vendor').value : data?.vendor, + model: document.getElementById('prop-model') ? document.getElementById('prop-model').value : data?.model, + ip: document.getElementById('prop-ip') ? document.getElementById('prop-ip').value : data?.ip, + status: document.getElementById('prop-status')?.value || data?.status, + project: document.getElementById('prop-project') ? document.getElementById('prop-project').value : data?.project, + env: document.getElementById('prop-env')?.value || data?.env, + asset_tag: document.getElementById('prop-asset-tag') ? document.getElementById('prop-asset-tag').value : data?.asset_tag, + tags: document.getElementById('prop-tags') ? document.getElementById('prop-tags').value.split(',').map(t => t.trim()).filter(t => t) : (data?.tags || []), + description: document.getElementById('prop-description') ? document.getElementById('prop-description').value : data?.description, + locked: document.getElementById('prop-locked') ? !!document.getElementById('prop-locked').checked : !!data?.locked + }; + const pureLabel = updates.label || ''; + cell.attr('label/text', pureLabel); + + if (updates.color) cell.attr('label/fill', updates.color); + + // Apply Fill and Border to body (for primitives and groups) + if (updates.fill) { + cell.attr('body/fill', updates.fill); + if (updates.is_group) updates.background = updates.fill; // Sync for group logic + } + if (updates.border) { + cell.attr('body/stroke', updates.border); + if (updates.is_group) updates['border-color'] = updates.border; // Sync for group logic + } + + if (updates.label_pos) { + const { getLabelAttributes } = await import('/static/js/modules/graph/styles.js'); + const labelAttrs = getLabelAttributes(updates.label_pos, updates.type, updates.is_group); + Object.keys(labelAttrs).forEach(key => { + cell.attr(`label/${key}`, labelAttrs[key]); + }); + } + + // Handle group membership via selection (parentId is now a UUID) + const parentId = document.getElementById('prop-parent')?.value; + const currentParent = cell.getParent(); + + // Case 1: Parent added or changed + if (parentId && (!currentParent || currentParent.id !== parentId)) { + const parent = state.graph.getCellById(parentId); + if (parent) { + parent.addChild(cell); + updates.parent = parentId; + saveUpdates(); + return; + } + } + + // Case 2: Parent removed (Ungrouping) + if (!parentId && currentParent) { + // 부모 해제 시 경고 설정 확인 + const triggerUngroup = async () => { + const { getSettings } = await import('../../settings/store.js'); + const settings = getSettings(); + + if (settings.confirmUngroup !== false) { + const { showConfirmModal } = await import('../../ui/utils.js'); + const { t } = await import('../../i18n.js'); + + showConfirmModal({ + title: t('confirm_ungroup_title') || 'Disconnect from Group', + message: t('confirm_ungroup_msg') || 'Are you sure you want to remove this object from its parent group?', + showDontAskAgain: true, + checkboxKey: 'confirmUngroup', + onConfirm: () => { + currentParent.removeChild(cell); + updates.parent = null; + saveUpdates(); + }, + onCancel: () => { + import('../index.js').then(m => m.renderProperties()); + } + }); + } else { + currentParent.removeChild(cell); + updates.parent = null; + saveUpdates(); + } + }; + triggerUngroup(); + return; + } + + // Case 3: Parent unchanged or no parent (Regular update) + saveUpdates(); + + function saveUpdates() { + // 최종 데이터 병합 및 저장 (id, layerId 등 기존 메타데이터 보존) + const currentData = cell.getData() || {}; + const finalData = { ...currentData, ...updates }; + + cell.setData(finalData); + + // [Instance #2245] Recursive Propagation: + // If this is a group, "poke" all descendants to trigger their change events, + // ensuring the sidebar for any selected child reflects the new parent name. + if (updates.is_group) { + const descendants = cell.getDescendants(); + descendants.forEach(child => { + const childData = child.getData() || {}; + const syncTime = Date.now(); + // We add a timestamp to child data to force X6 to fire 'change:data' + child.setData({ ...childData, _parent_updated: syncTime }, { silent: false }); + }); + } + // Apply Locking Constraints + cell.setProp('movable', !updates.locked); + cell.setProp('deletable', !updates.locked); + cell.setProp('rotatable', !updates.locked); + if (updates.locked) { + cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]); + } else { + cell.removeTools(); + } + } +} diff --git a/static/js/modules/properties_sidebar/handlers/rich_card.js b/static/js/modules/properties_sidebar/handlers/rich_card.js new file mode 100644 index 0000000..d39c54d --- /dev/null +++ b/static/js/modules/properties_sidebar/handlers/rich_card.js @@ -0,0 +1,50 @@ +import { state } from '../../state.js'; +import { renderRichContent } from '../../graph/styles/utils.js'; + +export async function handleRichCardUpdate(cell, data) { + const isNode = cell.isNode(); + if (!isNode) return; + + const updates = { + headerText: document.getElementById('prop-header-text')?.value, + headerColor: document.getElementById('prop-header-color')?.value, + headerAlign: document.getElementById('prop-header-align')?.value || 'left', + cardType: document.getElementById('prop-card-type')?.value, + contentAlign: document.getElementById('prop-content-align')?.value || 'left', + content: document.getElementById('prop-card-content')?.value, + locked: !!document.getElementById('prop-locked')?.checked + }; + + // 1. Sync to X6 Attributes + cell.attr('headerLabel/text', updates.headerText); + cell.attr('header/fill', updates.headerColor); + cell.attr('body/stroke', updates.headerColor); + + // Apply header alignment + const anchor = updates.headerAlign === 'center' ? 'middle' : (updates.headerAlign === 'right' ? 'end' : 'start'); + const x = updates.headerAlign === 'center' ? 0.5 : (updates.headerAlign === 'right' ? '100%' : 10); + const x2 = updates.headerAlign === 'right' ? -10 : 0; + + cell.attr('headerLabel/textAnchor', anchor); + cell.attr('headerLabel/refX', x); + cell.attr('headerLabel/refX2', x2); + + // 2. Render Content via HTML inside ForeignObject + renderRichContent(cell, updates); + + // 3. Update Cell Data + const currentData = cell.getData() || {}; + cell.setData({ ...currentData, ...updates }); + + // 4. Handle Lock State + cell.setProp('movable', !updates.locked); + cell.setProp('deletable', !updates.locked); + + if (updates.locked) { + cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]); + } else { + cell.removeTools(); + } + + import('/static/js/modules/persistence.js').then(m => m.markDirty()); +} diff --git a/static/js/modules/properties_sidebar/index.js b/static/js/modules/properties_sidebar/index.js new file mode 100644 index 0000000..2f92059 --- /dev/null +++ b/static/js/modules/properties_sidebar/index.js @@ -0,0 +1,237 @@ +import { state } from '../state.js'; +import { logger } from '../utils/logger.js'; +import { getNodeTemplate, getEdgeTemplate, getMultiSelectTemplate } from './templates.js'; +import { getRichCardTemplate } from './templates/rich_card.js'; +import { handleNodeUpdate } from './handlers/node.js'; +import { handleEdgeUpdate } from './handlers/edge.js'; +import { handleRichCardUpdate } from './handlers/rich_card.js'; + +// --- Utility: Simple Debounce to prevent excessive updates --- +function debounce(func, wait) { + let timeout; + return (...args) => { + clearTimeout(timeout); + timeout = setTimeout(() => func(...args), wait); + }; +} + +let sidebarElement = null; + +export function initPropertiesSidebar() { + sidebarElement = document.getElementById('properties-sidebar'); + if (!sidebarElement) return; + + const closeBtn = sidebarElement.querySelector('.close-sidebar'); + const footerBtn = sidebarElement.querySelector('#sidebar-apply'); + const content = sidebarElement.querySelector('.sidebar-content'); + + if (closeBtn) { + closeBtn.addEventListener('click', () => { + unhighlight(); + toggleSidebar(false); + }); + } + if (footerBtn) { + footerBtn.addEventListener('click', () => { + unhighlight(); + applyChangesGlobal(); + toggleSidebar(false); + }); + } + + // Event Delegation: Register once at initialization to prevent memory leaks and redundant listeners + if (content) { + content.addEventListener('input', (e) => { + const input = e.target; + if (!input.classList.contains('prop-input')) return; + }); + + content.addEventListener('change', (e) => { + const input = e.target; + if (!input.classList.contains('prop-input')) return; + + const isText = (input.type === 'text' || input.tagName === 'TEXTAREA' || input.type === 'number'); + if (!isText) { + applyChangesGlobal(); + } + }); + + content.addEventListener('keydown', (e) => { + if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') { + applyChangesGlobal(); + toggleSidebar(false); + } + }); + } + + if (state.graph) { + state.graph.on('selection:changed', ({ selected }) => { + unhighlight(); + renderProperties(); + if (selected && selected.length > 0) toggleSidebar(true); + }); + + const safeRender = () => { + const active = document.activeElement; + const isEditing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA'); + + if (sidebarElement && sidebarElement.contains(active) && isEditing) { + return; + } + // Use setTimeout to ensure X6 data sync is complete before re-rendering + setTimeout(() => renderProperties(), 0); + }; + + state.graph.on('cell:change:data', ({ options }) => { + if (options && options.silent) return; + safeRender(); + }); + state.graph.on('cell:change:attrs', ({ options }) => { + if (options && options.silent) return; + safeRender(); + }); + } +} + +const applyChangesGlobal = async () => { + if (!state.graph) return; + const selected = state.graph.getSelectedCells(); + if (selected.length !== 1) return; + + const cell = selected[0]; + const data = cell.getData() || {}; + + if (cell.shape === 'drawnet-rich-card') { + await handleRichCardUpdate(cell, data); + } else if (cell.isNode()) { + await handleNodeUpdate(cell, data); + } else { + await handleEdgeUpdate(cell, data); + } + + import('/static/js/modules/persistence.js').then(m => m.markDirty()); +}; + +const debouncedApplyGlobal = debounce(applyChangesGlobal, 300); + +export function toggleSidebar(open) { + if (!sidebarElement) return; + if (open === undefined) { + sidebarElement.classList.toggle('open'); + } else if (open) { + sidebarElement.classList.add('open'); + } else { + sidebarElement.classList.remove('open'); + } +} + +export function renderProperties() { + if (!state.graph || !sidebarElement) return; + + const selected = state.graph.getSelectedCells(); + const content = sidebarElement.querySelector('.sidebar-content'); + if (!content) return; + + logger.info(`[Sidebar] renderProperties start`, { + selectedCount: selected.length, + firstId: selected[0]?.id + }); + + if (!selected || selected.length === 0) { + content.innerHTML = `

Select an object to edit properties

`; + return; + } + + if (selected.length > 1) { + content.innerHTML = getMultiSelectTemplate(selected.length); + + content.querySelectorAll('.align-btn').forEach(btn => { + btn.addEventListener('click', () => { + const action = btn.getAttribute('data-action'); + if (action) import('/static/js/modules/ui/context_menu/handlers.js').then(m => m.handleMenuAction(action)); + }); + }); + + const lockToggle = content.querySelector('#prop-locked'); + if (lockToggle) { + lockToggle.addEventListener('change', () => { + const isLocked = lockToggle.checked; + selected.forEach(cell => { + const data = cell.getData() || {}; + cell.setData({ ...data, locked: isLocked }); + cell.setProp('movable', !isLocked); + cell.setProp('deletable', !isLocked); + if (cell.isNode()) cell.setProp('rotatable', !isLocked); + + if (isLocked) { + cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]); + } else { + cell.removeTools(); + } + }); + import('/static/js/modules/persistence.js').then(m => m.markDirty()); + }); + } + return; + } + + const cell = selected[0]; + const data = cell.getData() || {}; + const isNode = cell.isNode(); + + if (isNode) { + const allGroups = state.graph.getNodes().filter(n => n.getData()?.is_group && n.id !== cell.id); + const liveParent = cell.getParent(); + const uiData = { ...data, id: cell.id, parent: liveParent ? liveParent.id : null }; + + if (cell.shape === 'drawnet-rich-card') { + content.innerHTML = getRichCardTemplate(cell); + } else { + content.innerHTML = getNodeTemplate(uiData, allGroups); + } + } else { + content.innerHTML = getEdgeTemplate({ ...data, id: cell.id }); + } + + if (!isNode) { + initAnchorHighlighting(cell, content); + } +} + +function unhighlight() { + if (!state.graph) return; + state.graph.getNodes().forEach(node => { + const data = node.getData() || {}; + if (data._isHighlighting) { + node.attr('body/stroke', data._oldStroke, { silent: true }); + node.attr('body/strokeWidth', data._oldWidth, { silent: true }); + node.setData({ ...data, _isHighlighting: false }, { silent: true }); + } + }); +} + +function initAnchorHighlighting(cell, container) { + const srcSelect = container.querySelector('#prop-src-anchor'); + const dstSelect = container.querySelector('#prop-dst-anchor'); + + const highlight = (isSource) => { + const endpoint = isSource ? cell.getSource() : cell.getTarget(); + if (endpoint && endpoint.cell) { + const targetCell = state.graph.getCellById(endpoint.cell); + if (targetCell && !targetCell.getData()?._isHighlighting) { + targetCell.setData({ + _oldStroke: targetCell.attr('body/stroke'), + _oldWidth: targetCell.attr('body/strokeWidth'), + _isHighlighting: true + }, { silent: true }); + targetCell.attr('body/stroke', isSource ? '#10b981' : '#ef4444', { silent: true }); + targetCell.attr('body/strokeWidth', 6, { silent: true }); + } + } + }; + + srcSelect?.addEventListener('mouseenter', () => highlight(true)); + srcSelect?.addEventListener('mouseleave', unhighlight); + dstSelect?.addEventListener('mouseenter', () => highlight(false)); + dstSelect?.addEventListener('mouseleave', unhighlight); +} diff --git a/static/js/modules/properties_sidebar/sync.js b/static/js/modules/properties_sidebar/sync.js new file mode 100644 index 0000000..bd3bb16 --- /dev/null +++ b/static/js/modules/properties_sidebar/sync.js @@ -0,0 +1,84 @@ +/** + * Synchronizes the changes made in the properties sidebar back to the DSL in the editor. + */ +export async function syncToDSL(ele, oldLabel) { + const editor = document.getElementById('editor'); + if (!editor) return; + + let dsl = editor.value; + const data = ele.getData() || {}; + const isNode = ele.isNode(); + + if (isNode) { + if (data.is_group) { + // Update group definition: group Name { attrs } + const regex = new RegExp(`^group\\s+${oldLabel}(\\s*\\{.*?\\})?`, 'mi'); + let attrParts = []; + if (data.background) attrParts.push(`background: ${data.background}`); + if (data.padding) attrParts.push(`padding: ${data.padding}`); + const attrs = attrParts.length > 0 ? `{ ${attrParts.join(', ')} }` : ''; + + if (regex.test(dsl)) { + dsl = dsl.replace(regex, `group ${data.label} ${attrs}`); + } else { + dsl += `\ngroup ${data.label} ${attrs}\n`; + } + + // If label changed, update all 'in' lines + if (oldLabel !== data.label) { + const memberRegex = new RegExp(`\\s+in\\s+${oldLabel}\\b`, 'gi'); + dsl = dsl.replace(memberRegex, ` in ${data.label}`); + } + } else { + // Update node definition: Label [Type] { attrs } + const regex = new RegExp(`^\\s*${oldLabel}(\\s*\\[.*?\\])?(\\s*\\{.*?\\})?\\s*(?!->)$`, 'm'); + const typeStr = data.type && data.type !== 'default' ? ` [${data.type}]` : ''; + const parentStr = data.parent ? ` { parent: ${data.parent} }` : ''; + + if (regex.test(dsl)) { + dsl = dsl.replace(regex, `${data.label}${typeStr}${parentStr}`); + } else { + dsl += `\n${data.label}${typeStr}${parentStr}\n`; + } + } + } else { + // Update edge definition: Source -> Target { attrs } + const sourceNode = ele.getSourceNode(); + const targetNode = ele.getTargetNode(); + const sourceLabel = sourceNode?.getData()?.label || sourceNode?.id; + const targetLabel = targetNode?.getData()?.label || targetNode?.id; + + if (sourceLabel && targetLabel) { + const escSrc = sourceLabel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + const escDst = targetLabel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + + // Match the whole line for the edge + const edgeRegex = new RegExp(`^\\s*${escSrc}(?:\\s*\\[.*?\\])?(?:\\s*:[a-z]+)?\\s*->\\s*${escDst}(?:\\s*\\[.*?\\])?(?:\\s*:[a-z]+)?\\s*(\\{.*?\\})?\\s*$`, 'mi'); + + let attrParts = []; + if (data.color) attrParts.push(`color: ${data.color}`); + if (data.style) attrParts.push(`style: ${data.style}`); + if (data.source_anchor) attrParts.push(`source_anchor: ${data.source_anchor}`); + if (data.target_anchor) attrParts.push(`target_anchor: ${data.target_anchor}`); + if (data.direction && data.direction !== 'forward') attrParts.push(`direction: ${data.direction}`); + if (data.is_tunnel) attrParts.push(`is_tunnel: true`); + if (data.label) attrParts.push(`label: ${data.label}`); + + const attrs = attrParts.length > 0 ? ` { ${attrParts.join(', ')} }` : ''; + + if (edgeRegex.test(dsl)) { + dsl = dsl.replace(edgeRegex, (match) => { + const baseMatch = match.split('{')[0].trim(); + return `${baseMatch}${attrs}`; + }); + } else { + dsl += `\n${sourceLabel} -> ${targetLabel}${attrs}\n`; + } + } + } + + editor.value = dsl; + // Trigger analyze with force=true to avoid race + const editorModule = await import('../editor.js'); + editorModule.analyzeTopology(true); +} diff --git a/static/js/modules/properties_sidebar/templates.js b/static/js/modules/properties_sidebar/templates.js new file mode 100644 index 0000000..ca6d4ae --- /dev/null +++ b/static/js/modules/properties_sidebar/templates.js @@ -0,0 +1,5 @@ +import { getNodeTemplate } from './templates/node.js'; +import { getEdgeTemplate } from './templates/edge.js'; +import { getMultiSelectTemplate } from './templates/multi.js'; + +export { getNodeTemplate, getEdgeTemplate, getMultiSelectTemplate }; diff --git a/static/js/modules/properties_sidebar/templates/edge.js b/static/js/modules/properties_sidebar/templates/edge.js new file mode 100644 index 0000000..5074410 --- /dev/null +++ b/static/js/modules/properties_sidebar/templates/edge.js @@ -0,0 +1,116 @@ +import { t } from '../../i18n.js'; + +/** + * Generates the HTML for edge properties. + */ +export function getEdgeTemplate(data) { + return ` +

+ ${t('prop_id')} + +

+ ${t('prop_label')} + +

+ ${t('prop_tags')} + +

+ +

+ ${t('prop_color')} + +

+ ${t('prop_style')} + +

+ +

+ ${t('prop_width') || 'Width'} + +

+ +

+ ${t('prop_routing')} + +

+ +

+ ● START + +

+ ● TARGET + +

+ +

+ ${t('prop_direction')} + +

+ +

+ + TUNNEL + +

+ +

+ + LOCK + +

+ +

+ ${t('prop_routing_offset')} + +

+ ${t('prop_description')} + +

+ `; +} diff --git a/static/js/modules/properties_sidebar/templates/multi.js b/static/js/modules/properties_sidebar/templates/multi.js new file mode 100644 index 0000000..1bda603 --- /dev/null +++ b/static/js/modules/properties_sidebar/templates/multi.js @@ -0,0 +1,50 @@ +import { state } from '../../state.js'; +import { t } from '../../i18n.js'; + +export function getMultiSelectTemplate(count) { + const t_title = (state.i18n && state.i18n['multi_select_title']) || 'Multiple Selected'; + const t_align = (state.i18n && state.i18n['alignment']) || 'Alignment'; + const t_dist = (state.i18n && state.i18n['distribution']) || 'Distribution'; + + return ` +

+ + ${count} ${t_title} +

+ +

+ ${t_align} +

+ + + + + + +

+ +

+ ${t_dist} +

+ + +

+ +

+ + ${t('prop_locked')} (Bulk) + +

+ +

+ + Tip: Use Shift + 1~8 to quickly align and distribute selected nodes without opening the sidebar. +

+ `; +} diff --git a/static/js/modules/properties_sidebar/templates/node.js b/static/js/modules/properties_sidebar/templates/node.js new file mode 100644 index 0000000..a42e074 --- /dev/null +++ b/static/js/modules/properties_sidebar/templates/node.js @@ -0,0 +1,163 @@ +import { t } from '../../i18n.js'; + +/** + * Generates the HTML for node properties. + */ +export function getNodeTemplate(data, allGroups) { + return ` +

+ ${t('prop_id')} + +

+ ${t('prop_label')} + +

+ ${t('prop_type')} + +

+ ${t('prop_parent')} + +

+ + GROUP + +

+ +

+ + LOCK + +

+ +

+ ${t('prop_label_color')} + +

+ ${t('prop_label_pos')} + +

+ + ${(() => { + const nodeType = (data.type || '').toLowerCase(); + const primitives = ['rect', 'circle', 'rounded-rect', 'text-box', 'label', 'triangle', 'diamond', 'parallelogram', 'cylinder', 'document', 'manual-input', 'rack']; + if (data.is_group || primitives.includes(nodeType)) { + return ` +

+ ${t('prop_fill_color')} + +

+ ${t('prop_border_color')} + +

+ `; + } + return ''; + })()} + +

+ ${data.is_group ? ` +

+ ${t('prop_padding')} + +

+ ` : ''} + ${data.type === 'rack' ? ` +

+ ${t('prop_slots')} + +

+ ` : ''} +

+ + +

+ ${t('prop_vendor')} + +

+ ${t('prop_model')} + +

+ +

+ ${t('prop_ip')} + +

+ ${t('prop_status')} + +

+ +

+ ${t('prop_project')} + +

+ ${t('prop_env')} + +

+ +

+ ${t('prop_tags')} + +

+ ${t('prop_description')} + +

+ `; +} diff --git a/static/js/modules/properties_sidebar/templates/rich_card.js b/static/js/modules/properties_sidebar/templates/rich_card.js new file mode 100644 index 0000000..e71a7ea --- /dev/null +++ b/static/js/modules/properties_sidebar/templates/rich_card.js @@ -0,0 +1,74 @@ +import { t } from '../../i18n.js'; + +export function getRichCardTemplate(cell) { + const data = cell.getData() || {}; + const headerText = data.headerText || 'TITLE'; + const content = data.content || ''; + const cardType = data.cardType || 'standard'; + const headerColor = data.headerColor || '#3b82f6'; + const headerAlign = data.headerAlign || 'left'; + const contentAlign = data.contentAlign || 'left'; + + return ` +

${t('rich_card')}

+ +

+ ${t('prop_header_text')} +

+ + +

+ +

+ ${t('prop_header_align')} + +

+ +

+ ${t('prop_card_type')} + +

+ +

+ ${t('prop_content_align')} + +

+ +

+ ${t('prop_card_content')} + +

+ +

+ + ${t('prop_locked')} + +

+ +

+ `; +} diff --git a/static/js/modules/settings/store.js b/static/js/modules/settings/store.js new file mode 100644 index 0000000..8a07ae1 --- /dev/null +++ b/static/js/modules/settings/store.js @@ -0,0 +1,78 @@ +import { STORAGE_KEYS } from '../constants.js'; + +/** + * settings/store.js - Persistence logic for app settings + */ +export function getSettings() { + return JSON.parse(localStorage.getItem(STORAGE_KEYS.SETTINGS) || '{}'); +} + +export function updateSetting(key, value) { + const settings = getSettings(); + settings[key] = value; + localStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(settings)); +} + +export function getTheme() { + return localStorage.getItem(STORAGE_KEYS.THEME) || 'light'; +} + +export function setTheme(theme) { + document.documentElement.setAttribute('data-theme', theme); + localStorage.setItem(STORAGE_KEYS.THEME, theme); + window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme } })); +} + +export function applySavedTheme() { + const theme = getTheme(); + document.documentElement.setAttribute('data-theme', theme); +} + +export function applySavedSettings() { + const settings = getSettings(); + if (settings.bgColor) { + document.documentElement.style.setProperty('--bg-color', settings.bgColor); + window.dispatchEvent(new CustomEvent('backgroundChanged', { detail: { color: settings.bgColor } })); + } + + if (settings.gridStyle) { + window.dispatchEvent(new CustomEvent('gridChanged', { + detail: { + style: settings.gridStyle, + color: settings.gridColor, + thickness: settings.gridThickness, + showMajor: settings.showMajorGrid, + majorColor: settings.majorGridColor, + majorInterval: settings.majorGridInterval + } + })); + } + + if (settings.gridSpacing) { + document.documentElement.style.setProperty('--grid-size', `${settings.gridSpacing}px`); + window.dispatchEvent(new CustomEvent('gridSpacingChanged', { detail: { spacing: settings.gridSpacing } })); + } + + if (settings.canvasPreset) { + const val = settings.canvasPreset; + const orient = settings.canvasOrientation || 'portrait'; + let w = '100%', h = '100%'; + + if (val === 'A4') { + w = orient === 'portrait' ? 794 : 1123; + h = orient === 'portrait' ? 1123 : 794; + } + else if (val === 'A3') { + w = orient === 'portrait' ? 1123 : 1587; + h = orient === 'portrait' ? 1587 : 1123; + } + else if (val === 'custom') { + w = settings.canvasWidth; + h = settings.canvasHeight; + } + + window.dispatchEvent(new CustomEvent('canvasResize', { + detail: { width: w, height: h } + })); + } +} diff --git a/static/js/modules/settings/tabs/about.js b/static/js/modules/settings/tabs/about.js new file mode 100644 index 0000000..6279dfe --- /dev/null +++ b/static/js/modules/settings/tabs/about.js @@ -0,0 +1,25 @@ +import { t } from '../../i18n.js'; + +export function renderAbout(container) { + container.innerHTML = ` +

${t('about')} drawNET

+ Version + Premium Edition v2.1.0 +

+ Engine + AntV X6 + drawNET Proprietary Parser +

+ ${t('identity')} + Developed for High-Stakes Engineering +

+ `; +} diff --git a/static/js/modules/settings/tabs/engine.js b/static/js/modules/settings/tabs/engine.js new file mode 100644 index 0000000..ff711fe --- /dev/null +++ b/static/js/modules/settings/tabs/engine.js @@ -0,0 +1,48 @@ +import { t } from '../../i18n.js'; +import { getSettings, updateSetting } from '../store.js'; + +export function renderEngine(container) { + const settings = getSettings(); + container.innerHTML = ` +

${t('engine') || 'Engine'}

+ ${t('auto_load_last')} + ${t('auto_load_last_desc')} +

+ +

+ ${t('sync_mode')} + ${t('sync_mode_desc')} +

+ +

+ ${t('auto_save')} + ${t('auto_save_desc')} +

+ +

+ `; +} + +export function bindEngineEvents(container) { + const autoLoadToggle = container.querySelector('#auto-load-toggle'); + if (autoLoadToggle) { + autoLoadToggle.addEventListener('change', (e) => { + updateSetting('autoLoadLast', e.target.checked); + }); + } +} diff --git a/static/js/modules/settings/tabs/general.js b/static/js/modules/settings/tabs/general.js new file mode 100644 index 0000000..98fb615 --- /dev/null +++ b/static/js/modules/settings/tabs/general.js @@ -0,0 +1,73 @@ +/** + * settings/tabs/general.js - General Settings Tab + */ +import { setTheme, getSettings } from '../store.js'; +import { t } from '../../i18n.js'; + +export function renderGeneral(container) { + container.innerHTML = ` +

${t('identity') || 'Identity'}

+ ${t('dark_mode')} + ${t('dark_mode_desc')} +

+ + +

+ +

${t('editor_behavior') || 'Editor Behavior'}

+ ${t('confirm_ungroup') || 'Confirm before Un-grouping'} + ${t('confirm_ungroup_desc') || 'Show a confirmation dialog when removing an object from a group.'} +

+ + +

+ +

${t('language') || 'Language'}

+ ${t('language')} + ${t('select_lang_desc')} +

+ +

+ `; +} + +export function bindGeneralEvents(container) { + const darkModeToggle = container.querySelector('#dark-mode-toggle'); + if (darkModeToggle) { + darkModeToggle.addEventListener('change', (e) => setTheme(e.target.checked ? 'dark' : 'light')); + } + + const ungroupToggle = container.querySelector('#confirm-ungroup-toggle'); + if (ungroupToggle) { + ungroupToggle.addEventListener('change', (e) => { + import('../store.js').then(m => m.updateSetting('confirmUngroup', e.target.checked)); + }); + } + + const langSelect = container.querySelector('#lang-select'); + if (langSelect) { + langSelect.addEventListener('change', (e) => { + localStorage.setItem('drawNET_lang', e.target.value); + location.reload(); + }); + } +} diff --git a/static/js/modules/settings/tabs/license.js b/static/js/modules/settings/tabs/license.js new file mode 100644 index 0000000..cfeeee1 --- /dev/null +++ b/static/js/modules/settings/tabs/license.js @@ -0,0 +1,103 @@ +import { t } from '../../i18n.js'; +import { checkLicenseStatus } from '../../ui/license.js'; + +export async function renderLicense(container) { + const status = await checkLicenseStatus(); + container.innerHTML = ` +

${t('license_management')}

${t('license_intro')}

+ +

+ ${t('current_edition')} +

${status.valid ? status.data.level : t('trial_community')}

+ +

+ ${t('machine_id')} + +

+ ${status.hwid} +

+ + ${status.valid ? ` +

+ ${t('expiry_info')} + ${t('valid_until', { date: `${status.data.expiry}` })} +

+ ` : ''} + +

+ +

${t('activate_license_title')}

+ +

+ `; + + bindLicenseEvents(container); +} + +function bindLicenseEvents(container) { + const copyBtn = container.querySelector('#copy-hwid-btn'); + if (copyBtn) { + copyBtn.onclick = () => { + const hwid = container.querySelector('code').textContent; + navigator.clipboard.writeText(hwid); + // Simple visual feedback + const icon = copyBtn.querySelector('i'); + icon.className = 'fas fa-check'; + setTimeout(() => icon.className = 'fas fa-copy', 2000); + }; + } + + const activateBtn = container.querySelector('#activate-license-btn'); + if (activateBtn) { + activateBtn.onclick = async () => { + const key = container.querySelector('#license-key-input').value.trim(); + if (!key) { + alert(t('enter_license_key')); + return; + } + + activateBtn.disabled = true; + activateBtn.innerHTML = ` ${t('verifying')}`; + + try { + const res = await fetch('/api/license/activate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ key }) + }); + const result = await res.json(); + if (result.success) { + alert(t('license_activated_success')); + location.reload(); + } else { + alert(t('activation_failed') + result.message); + } + } catch (err) { + alert(t('connection_error') + err.message); + } finally { + activateBtn.disabled = false; + activateBtn.innerHTML = ` ${t('activate_license_btn')}`; + } + }; + } +} diff --git a/static/js/modules/settings/tabs/workspace.js b/static/js/modules/settings/tabs/workspace.js new file mode 100644 index 0000000..14adc11 --- /dev/null +++ b/static/js/modules/settings/tabs/workspace.js @@ -0,0 +1,220 @@ +/** + * settings/tabs/workspace.js - Workspace (Canvas/Grid) Settings Tab + */ +import { updateSetting } from '../store.js'; +import { t } from '../../i18n.js'; + +export function renderWorkspace(container, settings) { + container.innerHTML = ` +

${t('canvas_background') || 'Workspace'}

+ ${t('grid_style')} + ${t('grid_style_desc')} +

+ +

+ ${t('grid_spacing')} + ${t('grid_spacing_desc')} +

+ +

+ ${t('bg_color')} + ${t('bg_color_desc')} +

+ +

+ ${t('grid_color')} + ${t('grid_color_desc')} +

+ +

+ ${t('grid_thickness')} + ${t('grid_thickness_desc')} +

+ +

+ ${t('show_major_grid')} + ${t('show_major_grid_desc')} +

+ +

+ ${t('major_grid_color')} + ${t('major_grid_color_desc')} +

+ +

+ ${t('major_grid_interval')} + ${t('major_grid_interval_desc')} +

+ +

+ ${t('canvas_preset')} + ${t('canvas_preset_desc')} +

+ +

+ ${t('orientation')} + ${t('orientation_desc')} +

+ +

+ + + +

+ `; +} + +export function bindWorkspaceEvents(container) { + const getGridParams = () => ({ + style: container.querySelector('#grid-style-select').value, + color: container.querySelector('#grid-color-picker').value, + thickness: parseFloat(container.querySelector('#grid-thickness-input').value) || 1, + showMajor: container.querySelector('#major-grid-toggle').checked, + majorColor: container.querySelector('#major-grid-color-picker').value, + majorInterval: parseInt(container.querySelector('#major-grid-interval-input').value) || 5 + }); + + const dispatchGridUpdate = () => { + const params = getGridParams(); + updateSetting('gridStyle', params.style); + updateSetting('gridColor', params.color); + updateSetting('gridThickness', params.thickness); + updateSetting('showMajorGrid', params.showMajor); + updateSetting('majorGridColor', params.majorColor); + updateSetting('majorGridInterval', params.majorInterval); + + const majorOpts = container.querySelector('#major-grid-options'); + if (majorOpts) majorOpts.style.display = params.showMajor ? 'block' : 'none'; + + window.dispatchEvent(new CustomEvent('gridChanged', { detail: params })); + }; + + const gridStyleSelect = container.querySelector('#grid-style-select'); + gridStyleSelect.addEventListener('change', dispatchGridUpdate); + + const gridColorPicker = container.querySelector('#grid-color-picker'); + gridColorPicker.addEventListener('input', dispatchGridUpdate); + + const gridThicknessInput = container.querySelector('#grid-thickness-input'); + gridThicknessInput.addEventListener('input', dispatchGridUpdate); + + const majorGridToggle = container.querySelector('#major-grid-toggle'); + majorGridToggle.addEventListener('change', dispatchGridUpdate); + + const majorGridColorPicker = container.querySelector('#major-grid-color-picker'); + majorGridColorPicker.addEventListener('input', dispatchGridUpdate); + + const majorGridIntervalInput = container.querySelector('#major-grid-interval-input'); + majorGridIntervalInput.addEventListener('input', dispatchGridUpdate); + + const gridSpacingInput = container.querySelector('#grid-spacing-input'); + gridSpacingInput.addEventListener('input', (e) => { + const val = parseInt(e.target.value) || 20; + updateSetting('gridSpacing', val); + document.documentElement.style.setProperty('--grid-size', `${val}px`); + window.dispatchEvent(new CustomEvent('gridSpacingChanged', { detail: { spacing: val } })); + }); + + const bgColorPicker = container.querySelector('#bg-color-picker'); + bgColorPicker.addEventListener('input', (e) => { + updateSetting('bgColor', e.target.value); + document.documentElement.style.setProperty('--bg-color', e.target.value); + }); + + const canvasPreset = container.querySelector('#canvas-preset'); + const orientationContainer = container.querySelector('#orientation-container'); + const customSizeDiv = container.querySelector('#custom-size-inputs'); + + const updateCanvas = () => { + const val = canvasPreset.value; + const orientationSelect = container.querySelector('#canvas-orientation'); + const orient = orientationSelect ? orientationSelect.value : 'portrait'; + + updateSetting('canvasPreset', val); + updateSetting('canvasOrientation', orient); + + if (customSizeDiv) customSizeDiv.style.display = val === 'custom' ? 'flex' : 'none'; + if (orientationContainer) orientationContainer.style.display = val === 'full' ? 'none' : 'flex'; + + let w = '100%', h = '100%'; + if (val === 'A4') { + w = orient === 'portrait' ? 794 : 1123; + h = orient === 'portrait' ? 1123 : 794; + } else if (val === 'A3') { + w = orient === 'portrait' ? 1123 : 1587; + h = orient === 'portrait' ? 1587 : 1123; + } else if (val === 'custom') { + w = parseInt(container.querySelector('#canvas-width').value) || 800; + h = parseInt(container.querySelector('#canvas-height').value) || 600; + updateSetting('canvasWidth', w); + updateSetting('canvasHeight', h); + } + + window.dispatchEvent(new CustomEvent('canvasResize', { + detail: { width: w, height: h } + })); + }; + + canvasPreset.addEventListener('change', updateCanvas); + + const orientationSelect = container.querySelector('#canvas-orientation'); + if (orientationSelect) orientationSelect.addEventListener('change', updateCanvas); + + const applyCustomBtn = container.querySelector('#apply-custom-size'); + if (applyCustomBtn) applyCustomBtn.addEventListener('click', updateCanvas); +} diff --git a/static/js/modules/settings/ui.js b/static/js/modules/settings/ui.js new file mode 100644 index 0000000..0171c36 --- /dev/null +++ b/static/js/modules/settings/ui.js @@ -0,0 +1,79 @@ +/** + * settings/ui.js - Professional Settings Panel UI (Modular) + */ +import { getSettings } from './store.js'; +import { renderGeneral, bindGeneralEvents } from './tabs/general.js'; +import { renderWorkspace, bindWorkspaceEvents } from './tabs/workspace.js'; +import { renderEngine, bindEngineEvents } from './tabs/engine.js'; +import { renderLicense } from './tabs/license.js'; +import { renderAbout } from './tabs/about.js'; + +let activeTab = 'general'; + +export function initSettings() { + const settingsBtn = document.getElementById('settings-btn'); + const closeBtn = document.getElementById('close-settings-btn'); + const panel = document.getElementById('settings-panel'); + const tabs = document.querySelectorAll('.settings-tab'); + + if (settingsBtn && panel) { + settingsBtn.addEventListener('click', () => { + panel.classList.toggle('active'); + if (panel.classList.contains('active')) renderTabContent(activeTab); + }); + } + + if (closeBtn && panel) { + closeBtn.addEventListener('click', () => panel.classList.remove('active')); + } + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + tabs.forEach(t => t.classList.remove('active')); + tab.classList.add('active'); + activeTab = tab.getAttribute('data-tab'); + renderTabContent(activeTab); + }); + }); + + document.addEventListener('mousedown', (e) => { + if (panel?.classList.contains('active')) { + if (!panel.contains(e.target) && !settingsBtn.contains(e.target)) { + panel.classList.remove('active'); + } + } + }); +} + +function renderTabContent(tabName) { + const body = document.getElementById('settings-body'); + if (!body) return; + + const settings = getSettings(); + body.innerHTML = ''; + const section = document.createElement('div'); + section.className = 'settings-section'; + + switch (tabName) { + case 'general': + renderGeneral(section); + bindGeneralEvents(section); + break; + case 'workspace': + renderWorkspace(section, settings); + bindWorkspaceEvents(section); + break; + case 'engine': + renderEngine(section); + bindEngineEvents(section); + break; + case 'about': + renderAbout(section); + break; + case 'license': + renderLicense(section); + break; + } + + body.appendChild(section); +} diff --git a/static/js/modules/state.js b/static/js/modules/state.js new file mode 100644 index 0000000..624816d --- /dev/null +++ b/static/js/modules/state.js @@ -0,0 +1,49 @@ +import { DEFAULTS } from './constants.js'; + +// Shared state across modules +export const state = { + assetMap: {}, + assetsData: [], + graph: null, + // Grid & Interaction State + gridSpacing: DEFAULTS.GRID_SPACING, + gridStyle: 'none', // 'none', 'solid', or 'dashed' + isSnapEnabled: false, + canvasSize: { width: '100%', height: '100%' }, + // Attribute Copy/Paste Clipboard + clipboardNodeData: null, + clipboardNodeAttrs: null, + clipboardEdgeData: null, + // Layer Management + layers: [ + { id: 'l1', name: 'Main Layer', visible: true, locked: false, color: '#3b82f6', type: 'standard' } + ], + activeLayerId: 'l1', + inactiveLayerOpacity: 0.3, + // Interaction State + isRightDragging: false, + isCtrlPressed: false, // Global tracking for Ctrl+Drag copy + // Selection Order Tracking + selectionOrder: [], + // Asset Management + selectedPackIds: JSON.parse(localStorage.getItem('selectedPackIds') || '[]'), + language: localStorage.getItem('drawNET_lang') || (navigator.language.startsWith('ko') ? 'ko' : 'en'), + // Global Application Config (from config.json) + appConfig: {}, + // License State + license: { + level: 'Trial', + valid: false, + data: {} + }, + // Project Metadata + projectName: "" // Will be set to t('untitled_project') on init +}; + +// Expose to window for browser debugging +if (typeof window !== 'undefined') { + window.state = state; +} + +// For browser console debugging +window.state = state; diff --git a/static/js/modules/studio.js b/static/js/modules/studio.js new file mode 100644 index 0000000..c69b005 --- /dev/null +++ b/static/js/modules/studio.js @@ -0,0 +1,141 @@ +import { FloatingWindow } from './ui/window.js'; +import { logger } from './utils/logger.js'; + +class ObjectStudioPlugin { + constructor() { + this.win = null; + this.uploadedPath = ''; + } + + open() { + if (this.win) { + this.win.bringToFront(); + return; + } + + this.win = new FloatingWindow('studio', t('object_studio'), { + width: 700, + height: 500, + icon: 'fas fa-magic' + }); + + const content = ` +

+ +

${t('preview')}

+ + +

${t('basic_info')}

+ ${t('id_label')} + +

+ ${t('display_name')} + +

+ ${t('category')} + +

+ +

${t('asset_attachment')}

+ ${t('icon_image')} +

+ + +

+ `; + + this.win.render(content); + this.initEventListeners(); + } + + initEventListeners() { + const el = this.win.element; + const fileInput = el.querySelector('#studio-file'); + const uploadBtn = el.querySelector('#studio-upload-btn'); + const saveBtn = el.querySelector('#studio-save'); + const cancelBtn = el.querySelector('#studio-cancel'); + + cancelBtn.addEventListener('click', () => this.win.destroy()); + this.win.onClose = () => { this.win = null; }; + + uploadBtn.addEventListener('click', () => this.handleUpload(fileInput)); + saveBtn.addEventListener('click', () => this.handleSave()); + } + + async handleUpload(fileInput) { + const file = fileInput.files[0]; + if (!file) return; + + const formData = new FormData(); + formData.append('file', file); + + try { + const res = await fetch('/api/studio/upload', { method: 'POST', body: formData }); + const data = await res.json(); + if (data.success) { + this.uploadedPath = data.path; + const preview = this.win.element.querySelector('#studio-preview-icon'); + preview.innerHTML = `

`; + preview.querySelector('img').style.transform = 'scale(0.8)'; + setTimeout(() => { preview.querySelector('img').style.transform = 'scale(1)'; }, 10); + } + } catch (err) { logger.critical(err); } + } + + async handleSave() { + const id = document.getElementById('studio-id').value.trim(); + const label = document.getElementById('studio-label').value.trim(); + const category = document.getElementById('studio-category').value; + + if (!id || !label || !this.uploadedPath) { + alert("Please fill all required fields."); + return; + } + + const newAsset = { id, type: label, label, category, path: this.uploadedPath, format: this.uploadedPath.split('.').pop() }; + + try { + const res = await fetch('/api/studio/add', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(newAsset) + }); + const data = await res.json(); + if (data.success) { + initAssets(); + this.win.destroy(); + } + } catch (err) { logger.critical(err); } + } +} + +export const studioPlugin = new ObjectStudioPlugin(); +export const openStudioModal = () => studioPlugin.open(); diff --git a/static/js/modules/studio/actions.js b/static/js/modules/studio/actions.js new file mode 100644 index 0000000..e76229a --- /dev/null +++ b/static/js/modules/studio/actions.js @@ -0,0 +1,141 @@ +import { studioState } from './state.js'; +import * as processor from './processor.js'; +import { renderStudioUI } from './renderer.js'; +import { logger } from '../utils/logger.js'; +import { t } from '../i18n.js'; + +/** + * Handle individual asset vectorization + */ +export async function startVectorization(id) { + const src = studioState.sources.find(s => s.id === id); + if (!src || src.status === 'processing') return; + + src.status = 'processing'; + renderStudioUI(); + + try { + const img = new Image(); + img.src = src.previewUrl; + await new Promise(r => img.onload = r); + + const pathData = await processor.traceImage(img, { + threshold: src.threshold || 128, + turdsize: 2 + }); + const svgData = processor.wrapAsSVG(pathData); + + studioState.updateSource(id, { + svgData, + status: 'done', + choice: 'svg' + }); + } catch (err) { + logger.critical("Trace Error:", err); + src.status = 'error'; + } + renderStudioUI(); +} + +/** + * Bulk update properties for selected assets + */ +export function bulkUpdateProperties(sources, updates) { + sources.forEach(src => { + if (updates.category) src.category = updates.category; + if (updates.vendor) src.vendor = updates.vendor; + }); +} + +/** + * Final Build and Publish to Server + */ +export async function buildPackage() { + const packIdElement = document.getElementById('pack-id'); + const packNameElement = document.getElementById('pack-name'); + + if (!packIdElement) return; + + const packId = packIdElement.value.trim(); + const packName = packNameElement ? packNameElement.value.trim() : packId; + + if (!packId || studioState.sources.length === 0) { + alert(t('please_enter_pack_id')); + return; + } + + const buildBtn = document.getElementById('build-btn'); + const originalText = buildBtn.innerHTML; + buildBtn.disabled = true; + buildBtn.innerHTML = ` ${t('building')}`; + + try { + const formData = new FormData(); + formData.append('packId', packId); + formData.append('packName', packName); + + const assetsMetadata = studioState.sources.map(src => ({ + id: src.id, + label: src.label, + category: src.category, + choice: src.choice, + svgData: src.choice === 'svg' ? src.svgData : null + })); + formData.append('assets', JSON.stringify(assetsMetadata)); + + studioState.sources.forEach(src => { + if (src.choice === 'png' || (src.type === 'svg' && src.choice === 'svg' && !src.svgData)) { + formData.append(`file_${src.id}`, src.file); + } + }); + + const response = await fetch('/api/studio/save-pack', { + method: 'POST', + body: formData + }); + + const result = await response.json(); + if (result.success) { + alert(result.message || t('build_success')); + window.location.href = '/'; + } else { + throw new Error(result.message || t('build_failed').replace('{message}', '')); + } + } catch (err) { + alert(t('build_failed').replace('{message}', err.message)); + buildBtn.disabled = false; + buildBtn.innerHTML = originalText; + } +} + +/** + * Load an existing package from the server + */ +export async function loadExistingPack(packId) { + if (!packId) return; + + try { + const response = await fetch(`/api/studio/load-pack/${packId}`); + const result = await response.json(); + + if (result.success) { + studioState.loadFromMetadata(result.data); + + // UI에 Pack ID와 Name 입력값 동기화 + const packIdInput = document.getElementById('pack-id'); + const packNameInput = document.getElementById('pack-name'); + const vendorInput = document.getElementById('pack-vendor'); + + if (packIdInput) packIdInput.value = studioState.packInfo.id; + if (packNameInput) packNameInput.value = studioState.packInfo.name; + if (vendorInput) vendorInput.value = studioState.packInfo.vendor; + + renderStudioUI(); + logger.info(`drawNET Studio: Package "${packId}" loaded.`); + } else { + alert(t('load_failed').replace('{message}', result.message)); + } + } catch (err) { + alert(t('load_error').replace('{message}', err.message)); + } +} diff --git a/static/js/modules/studio/index.js b/static/js/modules/studio/index.js new file mode 100644 index 0000000..7d055a7 --- /dev/null +++ b/static/js/modules/studio/index.js @@ -0,0 +1,29 @@ +import { initIngester } from './ingester.js'; +import { renderStudioUI } from './renderer.js'; +import { buildPackage } from './actions.js'; +import { logger } from '../utils/logger.js'; + +/** + * Object Studio Main Entry Point + */ +document.addEventListener('DOMContentLoaded', () => { + initStudio(); +}); + +function initStudio() { + logger.info("DrawNET Studio Initializing..."); + + // Initialize file ingestion module + initIngester(); + + // Listen for state updates to trigger re-renders + window.addEventListener('studio-sources-updated', renderStudioUI); + window.addEventListener('studio-selection-updated', renderStudioUI); + + // Bind Global Actions + const buildBtn = document.getElementById('build-btn'); + if (buildBtn) buildBtn.onclick = buildPackage; + + // Initial render + renderStudioUI(); +} diff --git a/static/js/modules/studio/ingester.js b/static/js/modules/studio/ingester.js new file mode 100644 index 0000000..b65c30d --- /dev/null +++ b/static/js/modules/studio/ingester.js @@ -0,0 +1,52 @@ +import { studioState } from './state.js'; + +export function initIngester() { + const dropZone = document.getElementById('drop-zone'); + const folderInput = document.getElementById('folder-input'); + const fileInput = document.getElementById('file-input'); + + if (!dropZone || !folderInput) return; + + // Handle clicks + dropZone.addEventListener('click', () => folderInput.click()); + + // Handle folder selection + folderInput.addEventListener('change', (e) => handleFiles(e.target.files)); + fileInput.addEventListener('change', (e) => handleFiles(e.target.files)); + + // Handle drag & drop + dropZone.addEventListener('dragover', (e) => { + e.preventDefault(); + dropZone.style.borderColor = '#38bdf8'; + dropZone.style.background = 'rgba(56, 189, 248, 0.05)'; + }); + + dropZone.addEventListener('dragleave', () => { + dropZone.style.borderColor = 'rgba(255, 255, 255, 0.1)'; + dropZone.style.background = 'transparent'; + }); + + dropZone.addEventListener('drop', (e) => { + e.preventDefault(); + dropZone.style.borderColor = 'rgba(255, 255, 255, 0.1)'; + dropZone.style.background = 'transparent'; + handleFiles(e.dataTransfer.files); + }); +} + +function handleFiles(files) { + const validTypes = ['image/png', 'image/jpeg', 'image/svg+xml']; + let addedCount = 0; + + Array.from(files).forEach(file => { + if (validTypes.includes(file.type)) { + studioState.addSource(file); + addedCount++; + } + }); + + if (addedCount > 0) { + // Trigger UI update (to be implemented in index.js) + window.dispatchEvent(new CustomEvent('studio-sources-updated')); + } +} diff --git a/static/js/modules/studio/processor.js b/static/js/modules/studio/processor.js new file mode 100644 index 0000000..7b314d6 --- /dev/null +++ b/static/js/modules/studio/processor.js @@ -0,0 +1,78 @@ +import { potrace, init } from 'https://cdn.jsdelivr.net/npm/esm-potrace-wasm@0.4.1/dist/index.js'; +import { logger } from '../utils/logger.js'; + +let isWasmInitialized = false; + +/** + * Image Tracing using WASM Potrace (High performance & quality) + * @param {HTMLImageElement} imageElement + * @param {Object} options + */ +export async function traceImage(imageElement, options = {}) { + if (!isWasmInitialized) { + await init(); + isWasmInitialized = true; + } + + // Ensure image is loaded + if (imageElement instanceof HTMLImageElement && !imageElement.complete) { + await new Promise(r => imageElement.onload = r); + } + + // --- Pre-process with Canvas for Thresholding --- + const canvas = document.createElement('canvas'); + canvas.width = imageElement.naturalWidth || imageElement.width; + canvas.height = imageElement.naturalHeight || imageElement.height; + const ctx = canvas.getContext('2d'); + ctx.drawImage(imageElement, 0, 0); + + const threshold = options.threshold !== undefined ? options.threshold : 128; + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const data = imageData.data; + + for (let i = 0; i < data.length; i += 4) { + // Luminance calculation + const brightness = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]; + const v = brightness < threshold ? 0 : 255; + data[i] = data[i+1] = data[i+2] = v; + // Keep alpha as is or flatten to white? + // For icons, if alpha is low, treat as white + if (data[i+3] < 128) { + data[i] = data[i+1] = data[i+2] = 255; + data[i+3] = 255; + } + } + ctx.putImageData(imageData, 0, 0); + + // Potrace Options (WASM version) + const potraceOptions = { + turdsize: options.turdsize || 2, + turnpolicy: options.turnpolicy || 4, + alphamax: options.alphamax !== undefined ? options.alphamax : 1, + opticurve: options.opticurve !== undefined ? options.opticurve : 1, + opttolerance: options.opttolerance || 0.2 + }; + + try { + // Pass the thresholded canvas instead of the original image + const svgStr = await potrace(canvas, potraceOptions); + return svgStr; + } catch (err) { + logger.critical("WASM Potrace Error:", err); + throw err; + } +} + +/** + * Creates a clean SVG string from path data + * (Maintained for API compatibility, though WASM potrace returns full SVG) + */ +export function wrapAsSVG(svgData, width = 64, height = 64) { + if (typeof svgData === 'string' && svgData.trim().startsWith(' +`; +} diff --git a/static/js/modules/studio/renderer.js b/static/js/modules/studio/renderer.js new file mode 100644 index 0000000..6d4895c --- /dev/null +++ b/static/js/modules/studio/renderer.js @@ -0,0 +1,269 @@ +import { studioState } from './state.js'; +import * as actions from './actions.js'; +import { t } from '../i18n.js'; + +/** + * Main Studio UI rendering orchestrator + */ +export function renderStudioUI() { + renderSourceList(); + renderAssetGrid(); + renderPropertyPanel(); +} + +/** + * Left Panel: Source File List + */ +function renderSourceList() { + const list = document.getElementById('source-list'); + const loadArea = document.getElementById('load-package-area'); + if (!list) return; + + // 1. Render Load Area (only once or update if needed) + if (loadArea && loadArea.innerHTML === "") { + fetch('/assets').then(res => res.json()).then(data => { + const packs = data.packs || []; + loadArea.innerHTML = ` +

+ ${t('studio_edit_existing')} +

+ + +

+ `; + + document.getElementById('load-pack-btn').onclick = () => { + const packId = document.getElementById('exist-pack-select').value; + if (packId && confirm(t('confirm_load_package').replace('{id}', packId))) { + actions.loadExistingPack(packId); + } + }; + }); + } + + // 2. Render Source List + list.innerHTML = studioState.sources.map(src => ` +

+ + ${src.name} + +

+ `).join(''); + + // Add click listeners + list.querySelectorAll('.source-item').forEach(item => { + const id = item.dataset.id; + item.addEventListener('click', (e) => { + if (e.target.classList.contains('delete-btn')) { + studioState.removeSource(id); + renderStudioUI(); + } else { + studioState.toggleSelection(id, e.ctrlKey || e.metaKey); + renderStudioUI(); + } + }); + }); +} + +/** + * Center Panel: Asset Preview Grid + */ +function renderAssetGrid() { + const grid = document.getElementById('asset-grid'); + if (!grid) return; + + if (studioState.sources.length === 0) { + grid.innerHTML = ` +

+ +

${t('studio_no_assets')}

+ `; + return; + } + + grid.innerHTML = studioState.sources.map(src => ` +

${src.label}

${src.choice.toUpperCase()}

+ `).join(''); + + // Add click listeners + grid.querySelectorAll('.asset-card').forEach(card => { + card.addEventListener('click', (e) => { + studioState.toggleSelection(card.dataset.id, e.ctrlKey || e.metaKey); + renderStudioUI(); + }); + }); +} + +/** + * Right Panel: Property Settings & Comparison + */ +function renderPropertyPanel() { + const panel = document.querySelector('.property-panel .panel-content'); + if (!panel) return; + + const selectedSources = studioState.sources.filter(s => studioState.selectedIds.has(s.id)); + + if (selectedSources.length === 0) { + panel.innerHTML = ` +

+ +

${t('studio_select_prompt')}

+ `; + return; + } + + if (selectedSources.length === 1) { + const src = selectedSources[0]; + panel.innerHTML = renderSingleAssetUI(src); + setupSingleAssetListeners(panel, src); + } else { + panel.innerHTML = renderBulkEditUI(selectedSources.length); + setupBulkEditListeners(panel, selectedSources); + } +} + +function renderSingleAssetUI(src) { + return ` +

${t('studio_asset_detail')}

+ ${t('display_name_label')} + +

+ ${t('category')} +

+ + +

+ ${t('trace_threshold')} + ${src.threshold || 128} +

+ +

${t('trace_hint')}

+ +

+ ${t('original')} +

+ +

+ ${t('vector_svg')} +

+ ${src.svgData ? src.svgData : ''} +

+ +

+ `; +} + +let thresholdTimer = null; +function setupSingleAssetListeners(panel, src) { + panel.querySelector('#prop-label').oninput = (e) => src.label = e.target.value; + panel.querySelector('#prop-category').onchange = (e) => src.category = e.target.value; + panel.querySelector('#prop-category').value = src.category; + + panel.querySelector('#add-cat-btn').onclick = () => { + const area = panel.querySelector('#new-cat-area'); + area.style.display = area.style.display === 'none' ? 'flex' : 'none'; + if (area.style.display === 'flex') panel.querySelector('#new-cat-name').focus(); + }; + + panel.querySelector('#save-cat-btn').onclick = () => { + const input = panel.querySelector('#new-cat-name'); + const name = input.value.trim(); + if (studioState.addCategory(name)) { + src.category = name; + renderStudioUI(); + } else { + panel.querySelector('#new-cat-area').style.display = 'none'; + } + }; + + const thresholdInput = panel.querySelector('#prop-threshold'); + const thresholdVal = panel.querySelector('#threshold-val'); + + thresholdInput.oninput = (e) => { + const val = parseInt(e.target.value); + src.threshold = val; + thresholdVal.textContent = val; + + // Debounced Auto-retrace + clearTimeout(thresholdTimer); + thresholdTimer = setTimeout(() => { + actions.startVectorization(src.id); + }, 400); + }; + + panel.querySelectorAll('.choice-btn').forEach(btn => { + btn.onclick = () => { + if (btn.disabled) return; + studioState.setChoice(src.id, btn.dataset.choice); + renderStudioUI(); + }; + }); + + panel.querySelector('#convert-btn').onclick = () => actions.startVectorization(src.id); +} + +function renderBulkEditUI(count) { + return ` +

${t('bulk_edit').replace('{count}', count)}

+ ${t('common_category')} + +

+ + `; +} + +function setupBulkEditListeners(panel, selectedSources) { + panel.querySelector('#bulk-apply').onclick = () => { + const cat = panel.querySelector('#bulk-category').value; + actions.bulkUpdateProperties(selectedSources, { category: cat }); + renderStudioUI(); + }; +} diff --git a/static/js/modules/studio/state.js b/static/js/modules/studio/state.js new file mode 100644 index 0000000..86d1a83 --- /dev/null +++ b/static/js/modules/studio/state.js @@ -0,0 +1,118 @@ +export const studioState = { + sources: [], // Original files [{file, id, previewUrl, type}] + selectedIds: new Set(), + packInfo: { + id: '', + name: '', + vendor: '', + version: '1.0.0' + }, + categories: ['Network', 'Security', 'Compute', 'Cloud', 'Device', 'Other'], + + addCategory(name) { + if (name && !this.categories.includes(name)) { + this.categories.push(name); + return true; + } + return false; + }, + + addSource(file) { + const baseId = file.name.replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9]/g, '_'); + let id = baseId; + let counter = 1; + + // Ensure ID is unique + while (this.sources.some(s => s.id === id)) { + id = `${baseId}_${counter++}`; + } + + const previewUrl = URL.createObjectURL(file); + this.sources.push({ + id, + file, + name: file.name, + label: id.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '), + previewUrl, + category: 'Other', + type: file.type.includes('svg') ? 'svg' : 'png', + choice: file.type.includes('svg') ? 'svg' : 'png', // png, svg + svgData: null, + threshold: 128, + status: 'pending' // pending, processing, done, error + }); + }, + + updateSource(id, data) { + const src = this.sources.find(s => s.id === id); + if (src) Object.assign(src, data); + }, + + setChoice(id, choice) { + const src = this.sources.find(s => s.id === id); + if (src) src.choice = choice; + }, + + removeSource(id) { + const index = this.sources.findIndex(s => s.id === id); + if (index > -1) { + URL.revokeObjectURL(this.sources[index].previewUrl); + this.sources.splice(index, 1); + this.selectedIds.delete(id); + } + }, + + clearSources() { + this.sources.forEach(s => URL.revokeObjectURL(s.previewUrl)); + this.sources = []; + this.selectedIds.clear(); + }, + + toggleSelection(id, multi = false) { + if (!multi) { + const wasSelected = this.selectedIds.has(id); + this.selectedIds.clear(); + if (!wasSelected) this.selectedIds.add(id); + } else { + if (this.selectedIds.has(id)) this.selectedIds.delete(id); + else this.selectedIds.add(id); + } + }, + + loadFromMetadata(metadata) { + this.clearSources(); + this.packInfo = { + id: metadata.id || '', + name: metadata.name || metadata.id || '', + vendor: metadata.vendor || '', + version: metadata.version || '1.0.0' + }; + + if (metadata.assets) { + metadata.assets.forEach(asset => { + const choice = asset.views && asset.views.icon && asset.views.icon.endsWith('.svg') ? 'svg' : 'png'; + const filename = asset.views ? asset.views.icon : ''; + const previewUrl = `/static/assets/packs/${metadata.id}/${filename}`; + + this.sources.push({ + id: asset.id, + file: null, // No local file object for loaded assets + name: filename, + label: asset.label || asset.id, + previewUrl, + category: asset.category || 'Other', + type: choice, + choice: choice, + svgData: null, + threshold: 128, + status: 'done' + }); + + // Ensure category exists in the list + if (asset.category && !this.categories.includes(asset.category)) { + this.categories.push(asset.category); + } + }); + } + } +}; diff --git a/static/js/modules/ui.js b/static/js/modules/ui.js new file mode 100644 index 0000000..6d37ce0 --- /dev/null +++ b/static/js/modules/ui.js @@ -0,0 +1,13 @@ +import { initSidebar } from './ui/sidebar.js'; +import { logger } from './utils/logger.js'; +import { initSystemMenu } from './ui/system_menu.js'; +import { initHeader } from './ui/header.js'; +import { initGraphIO } from './graph/io/index.js'; + +export function initUIToggles() { + initSidebar(); + initSystemMenu(); + initHeader(); + + logger.info("UI modules initialized."); +} diff --git a/static/js/modules/ui/context_menu/handlers.js b/static/js/modules/ui/context_menu/handlers.js new file mode 100644 index 0000000..07788e1 --- /dev/null +++ b/static/js/modules/ui/context_menu/handlers.js @@ -0,0 +1,191 @@ +import { state } from '../../state.js'; +import { toggleSidebar } from '../../properties_sidebar/index.js'; + +/** + * handleMenuAction - Executes the logic for a clicked context menu item + * Direct X6 API version (Replaces legacy DSL-based handler) + */ +export function handleMenuAction(action, cellId) { + if (!state.graph) return; + + // Recursive Selection Focus + if (action === 'select-cell' && cellId) { + const target = state.graph.getCellById(cellId); + if (target) { + state.graph.cleanSelection(); + state.graph.select(target); + toggleSidebar(true); + } + return; + } + + const selectedCells = state.graph.getSelectedCells(); + const selectedNodes = selectedCells.filter(c => c.isNode()); + + if (action === 'properties') { + if (cellId) { + const target = state.graph.getCellById(cellId); + if (target) { + state.graph.cleanSelection(); + state.graph.select(target); + } + } + toggleSidebar(true); + return; + } + + // Alignment & Distribution Actions + const isAlignmentAction = action.startsWith('align') || action.startsWith('distribute'); + const isZOrderAction = action === 'to-front' || action === 'to-back'; + + if (isAlignmentAction || isZOrderAction) { + if (action === 'to-front') { selectedCells.forEach(c => c.toFront({ deep: true })); return; } + if (action === 'to-back') { selectedCells.forEach(c => c.toBack({ deep: true })); return; } + + import('/static/js/modules/graph/alignment.js').then(m => { + const alignMap = { + 'alignLeft': 'left', 'align-left': 'left', + 'alignRight': 'right', 'align-right': 'right', + 'alignTop': 'top', 'align-top': 'top', + 'alignBottom': 'bottom', 'align-bottom': 'bottom', + 'alignCenter': 'center', 'align-center': 'center', + 'alignMiddle': 'middle', 'align-middle': 'middle' + }; + const distMap = { + 'distributeHorizontal': 'horizontal', 'distribute-h': 'horizontal', + 'distributeVertical': 'vertical', 'distribute-v': 'vertical' + }; + + if (alignMap[action]) m.alignNodes(alignMap[action]); + else if (distMap[action]) m.distributeNodes(distMap[action]); + }); + return; + } + + // --- Group Management (X6 API directly) --- + if (action === 'group') { + if (selectedNodes.length < 2) return; + const groupLabel = 'group_' + Math.random().toString(36).substr(2, 4); + + // Calculate BBox of selected nodes + const bbox = state.graph.getCellsBBox(selectedNodes); + const padding = 40; + + const groupNode = state.graph.addNode({ + shape: 'drawnet-node', + x: bbox.x - padding, + y: bbox.y - padding, + width: bbox.width + padding * 2, + height: bbox.height + padding * 2, + zIndex: 1, + data: { + label: groupLabel, + is_group: true, + background: '#e0f2fe', + description: "", + asset_tag: "", + tags: [] + }, + attrs: { + label: { text: groupLabel }, + body: { fill: '#e0f2fe', stroke: '#3b82f6' } + } + }); + + // Set child nodes + selectedNodes.forEach(n => groupNode.addChild(n)); + state.graph.cleanSelection(); + state.graph.select(groupNode); + + import('/static/js/modules/persistence.js').then(m => m.markDirty()); + return; + } + + if (action === 'ungroup') { + if (selectedNodes.length === 0) return; + const group = selectedNodes[0]; + if (!group.getData()?.is_group) return; + + // Separate child nodes + const children = group.getChildren() || []; + children.forEach(child => group.removeChild(child)); + state.graph.removeNode(group); + + import('/static/js/modules/persistence.js').then(m => m.markDirty()); + return; + } + + // --- Disconnect (X6 API directly) --- + if (action === 'disconnect') { + if (selectedNodes.length < 2) return; + const nodeIds = new Set(selectedNodes.map(n => n.id)); + const edgesToRemove = state.graph.getEdges().filter(e => { + return nodeIds.has(e.getSourceCellId()) && nodeIds.has(e.getTargetCellId()); + }); + edgesToRemove.forEach(e => state.graph.removeEdge(e)); + + import('/static/js/modules/persistence.js').then(m => m.markDirty()); + return; + } + + // --- Connect / Line Style Update actions --- + const selectedEdges = selectedCells.filter(c => c.isEdge()); + + const styleMap = { + 'connect-solid': { routing: 'manhattan' }, + 'connect-straight': { routing: 'straight' }, + 'connect-dashed': { style: 'dashed' } + }; + + if (selectedEdges.length > 0 && styleMap[action]) { + const edgeData = styleMap[action]; + selectedEdges.forEach(async (edge) => { + const currentData = edge.getData() || {}; + const newData = { ...currentData, ...edgeData }; + const { handleEdgeUpdate } = await import('../../properties_sidebar/handlers/edge.js'); + await handleEdgeUpdate(edge, newData); + }); + return; + } + + const connectableNodes = selectedCells.filter(c => c.isNode()); + if (connectableNodes.length < 2) return; + + // Sort by selection order if available + const sortedNodes = [...connectableNodes].sort((a, b) => { + const idxA = state.selectionOrder.indexOf(a.id); + const idxB = state.selectionOrder.indexOf(b.id); + if (idxA === -1 || idxB === -1) return 0; + return idxA - idxB; + }); + + const edgeData = styleMap[action] || {}; + + // Chain connection logic (1 -> 2, 2 -> 3, ...) + for (let i = 0; i < sortedNodes.length - 1; i++) { + const src = sortedNodes[i]; + const dst = sortedNodes[i+1]; + + // Prevent duplicate connections (bi-directional check) + const exists = state.graph.getEdges().some(e => + (e.getSourceCellId() === src.id && e.getTargetCellId() === dst.id) || + (e.getSourceCellId() === dst.id && e.getTargetCellId() === src.id) + ); + if (exists) continue; + + import('/static/js/modules/graph/styles.js').then(({ getX6EdgeConfig }) => { + const config = getX6EdgeConfig({ + id: `e_${src.id}_${dst.id}_${Date.now()}`, + source: src.id, + target: dst.id, + description: "", + asset_tag: "", + routing_offset: 20, + ...edgeData + }); + state.graph.addEdge(config); + }); + } + + import('/static/js/modules/persistence.js').then(m => m.markDirty()); +} diff --git a/static/js/modules/ui/context_menu/index.js b/static/js/modules/ui/context_menu/index.js new file mode 100644 index 0000000..080e8c2 --- /dev/null +++ b/static/js/modules/ui/context_menu/index.js @@ -0,0 +1,79 @@ +import { state } from '../../state.js'; +import { handleMenuAction } from './handlers.js'; +import { generateMenuHTML, generateSelectionMenuHTML, showContextMenu, hideContextMenu } from './renderer.js'; + +let contextMenuElement = null; + +/** + * initContextMenu - Initializes the context menu module and event listeners + */ +export function initContextMenu() { + if (contextMenuElement) return; + + // 1. Create and Setup Menu Element + contextMenuElement = document.createElement('div'); + contextMenuElement.id = 'floating-context-menu'; + contextMenuElement.className = 'floating-menu'; + contextMenuElement.style.display = 'none'; + contextMenuElement.style.position = 'fixed'; + contextMenuElement.style.zIndex = '1000'; + document.body.appendChild(contextMenuElement); + + // 2. Event Listeners for menu items + contextMenuElement.addEventListener('click', (e) => { + const item = e.target.closest('[data-action]'); + if (!item) return; + + const action = item.getAttribute('data-action'); + const cellId = item.getAttribute('data-cell-id'); + + if (action) { + handleMenuAction(action, cellId); + } + hideContextMenu(contextMenuElement); + }); + + // Close menu on click outside + document.addEventListener('click', (e) => { + if (contextMenuElement && !contextMenuElement.contains(e.target)) { + hideContextMenu(contextMenuElement); + } + }); + + if (state.graph) { + // Listen for right click on Graph Cells + state.graph.on('cell:contextmenu', ({ e, cell }) => { + e.preventDefault(); + if (state.isRightDragging) return; + + // Photoshop-style recursive selection if Ctrl is pressed + if (e.ctrlKey) { + const local = state.graph.clientToLocal(e.clientX, e.clientY); + const models = state.graph.getCells().filter(cell => cell.getBBox().containsPoint(local)); + contextMenuElement.innerHTML = generateSelectionMenuHTML(models); + } else { + const selected = state.graph.getSelectedCells(); + const nodes = selected.filter(c => c.isNode()); + const isGroupSelected = nodes.length === 1 && nodes[0].getData()?.is_group; + contextMenuElement.innerHTML = generateMenuHTML(nodes, isGroupSelected); + } + + showContextMenu(contextMenuElement, e.clientX, e.clientY); + }); + + // Blank context menu (Handle Ctrl+RightClick here too) + state.graph.on('blank:contextmenu', ({ e }) => { + e.preventDefault(); + if (state.isRightDragging) return; + + if (e.ctrlKey) { + const local = state.graph.clientToLocal(e.clientX, e.clientY); + const models = state.graph.getCells().filter(cell => cell.getBBox().containsPoint(local)); + contextMenuElement.innerHTML = generateSelectionMenuHTML(models); + showContextMenu(contextMenuElement, e.clientX, e.clientY); + } else { + hideContextMenu(contextMenuElement); + } + }); + } +} diff --git a/static/js/modules/ui/context_menu/renderer.js b/static/js/modules/ui/context_menu/renderer.js new file mode 100644 index 0000000..11d2e15 --- /dev/null +++ b/static/js/modules/ui/context_menu/renderer.js @@ -0,0 +1,121 @@ +/** + * renderer.js - UI Generation and Positioning for Context Menu + */ +export function generateMenuHTML(nodes, isGroupSelected) { + let html = ''; + + // 1. Connection Group + html += ` + + + + + + `; + + // 2. Node Management Group + if (nodes.length >= 2 || isGroupSelected) { + html += ``; + if (nodes.length >= 2) { + html += ``; + } + if (isGroupSelected) { + html += ``; + } + } + + // 3. Alignment Group + if (nodes.length >= 2) { + html += ` + + + + `; + if (nodes.length >= 3) { + html += ` + + `; + } + } + + // 4. Other Group + html += ` + + + `; + + return html; +} + +export function generateSelectionMenuHTML(models) { + let html = ''; + + if (models.length === 0) { + html += ''; + return html; + } + + models.forEach(model => { + const data = model.getData() || {}; + const type = (data.type || model.shape || 'Unknown').toUpperCase(); + const label = data.label || model.id.substring(0, 8); + const iconClass = model.isNode() ? (data.is_group ? 'fa-object-group' : 'fa-microchip') : 'fa-link'; + + html += ` + + `; + }); + + return html; +} + +/** + * showContextMenu - Positions and displays the menu + */ +export function showContextMenu(el, x, y) { + if (!el) return; + + el.style.opacity = '0'; + el.style.display = 'block'; + + const menuWidth = el.offsetWidth; + const menuHeight = el.offsetHeight; + const padding = 10; + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + + let left = x; + if (x + menuWidth + padding > windowWidth) { + left = windowWidth - menuWidth - padding; + } + + let top = y; + if (y + menuHeight + padding > windowHeight) { + top = windowHeight - menuHeight - padding; + } + + el.style.left = `${Math.max(padding, left)}px`; + el.style.top = `${Math.max(padding, top)}px`; + el.style.opacity = '1'; +} + +/** + * hideContextMenu - Hides the menu + */ +export function hideContextMenu(el) { + if (el) el.style.display = 'none'; +} diff --git a/static/js/modules/ui/header.js b/static/js/modules/ui/header.js new file mode 100644 index 0000000..55694ca --- /dev/null +++ b/static/js/modules/ui/header.js @@ -0,0 +1,33 @@ +import { state } from '../state.js'; +import { markDirty } from '../persistence.js'; +import { t } from '../i18n.js'; + +/** + * ui/header.js - Logic for the application header (Project Name, Search, etc.) + */ +export function initHeader() { + const titleEl = document.getElementById('project-title'); + if (!titleEl) return; + + // Set initial title from state + titleEl.innerText = state.projectName || t('untitled_project'); + + // Direct editing by clicking + titleEl.addEventListener('click', () => { + const currentName = state.projectName || titleEl.innerText; + const newName = prompt(t('rename_project_prompt'), currentName); + + if (newName && newName.trim() !== "" && newName !== currentName) { + state.projectName = newName.trim(); + titleEl.innerText = state.projectName; + markDirty(); + + // Log for context + console.log(`Project renamed to: ${state.projectName}`); + } + }); + + // Hover effect class (optional, but good for UX) + titleEl.style.cursor = 'pointer'; + titleEl.title = t('rename_project_tooltip'); +} diff --git a/static/js/modules/ui/help_modal.js b/static/js/modules/ui/help_modal.js new file mode 100644 index 0000000..017cd70 --- /dev/null +++ b/static/js/modules/ui/help_modal.js @@ -0,0 +1,152 @@ +import { t } from '../i18n.js'; + +/** + * help_modal.js - Advanced Tabbed Markdown Guide. + * Uses marked.js for high-fidelity rendering. + */ + +export async function showHelpModal() { + const modalContainer = document.getElementById('modal-container'); + if (!modalContainer) return; + + const existing = document.getElementById('help-modal'); + if (existing) existing.remove(); + + const overlay = document.createElement('div'); + overlay.id = 'help-modal'; + overlay.className = 'modal-overlay animate-fade-in active'; + + overlay.innerHTML = ` + + `; + + modalContainer.appendChild(overlay); + + const tabsBar = overlay.querySelector('#help-tabs'); + const contentArea = overlay.querySelector('#help-modal-body'); + + async function loadTabContent(fileId, tabElement) { + // Update tab styles + tabsBar.querySelectorAll('.help-tab').forEach(t => { + t.style.borderBottom = '2px solid transparent'; + t.style.color = 'var(--sub-text)'; + t.style.background = 'transparent'; + }); + tabElement.style.borderBottom = '2px solid var(--accent-color)'; + tabElement.style.color = 'var(--accent-color)'; + tabElement.style.background = 'rgba(59, 130, 246, 0.05)'; + + contentArea.innerHTML = ` +

+ Loading ${fileId}... +

+ `; + + try { + const response = await fetch(`/manual/${fileId}`); + if (!response.ok) throw new Error('File not found'); + let markdown = await response.text(); + + // Image Path Pre-processing: Fix relative paths for marked.js + markdown = markdown.replace(/!\[(.*?)\]$(.*?)$/g, (match, alt, src) => { + const finalSrc = (src.startsWith('http') || src.startsWith('/')) ? src : `/manual/${src}`; + return `![${alt}](${finalSrc})`; + }); + + // Use marked library + const htmlContent = window.marked.parse(markdown); + contentArea.innerHTML = `

${htmlContent}

`; + contentArea.scrollTop = 0; + } catch (err) { + contentArea.innerHTML = `

Error: ${err.message}

`; + } + } + + // Load Help File List + try { + const response = await fetch('/api/help/list'); + const helpFiles = await response.json(); + + tabsBar.innerHTML = ''; // Clear "Initializing" + + helpFiles.forEach((file, index) => { + const tab = document.createElement('div'); + tab.className = 'help-tab'; + tab.dataset.id = file.id; + tab.innerText = file.title; + tab.style.cssText = ` + padding: 14px 20px; + cursor: pointer; + font-size: 13px; + font-weight: 700; + color: var(--sub-text); + border-bottom: 2px solid transparent; + white-space: nowrap; + transition: all 0.2s; + `; + + tab.addEventListener('mouseenter', () => { + if (tab.style.borderBottomColor === 'transparent') { + tab.style.color = 'var(--text-color)'; + } + }); + tab.addEventListener('mouseleave', () => { + if (tab.style.borderBottomColor === 'transparent') { + tab.style.color = 'var(--sub-text)'; + } + }); + + tab.onclick = () => loadTabContent(file.id, tab); + tabsBar.appendChild(tab); + + // Auto-load first tab + if (index === 0) loadTabContent(file.id, tab); + }); + + } catch (err) { + tabsBar.innerHTML = `

Failed to load help list.

`; + } + + const closeModal = () => { + overlay.classList.replace('animate-fade-in', 'animate-fade-out'); + overlay.querySelector('.modal-content').classList.replace('animate-scale-up', 'animate-scale-down'); + setTimeout(() => overlay.remove(), 200); + }; + + overlay.querySelector('#close-help').onclick = closeModal; + overlay.querySelector('#help-confirm').onclick = closeModal; + overlay.onclick = (e) => { if (e.target === overlay) closeModal(); }; +} diff --git a/static/js/modules/ui/layer_panel.js b/static/js/modules/ui/layer_panel.js new file mode 100644 index 0000000..11e9add --- /dev/null +++ b/static/js/modules/ui/layer_panel.js @@ -0,0 +1,403 @@ +import { state } from '../state.js'; +import { applyLayerFilters } from '../graph/layers.js'; +import { makeDraggable, showConfirmModal, showToast } from './utils.js'; +import { markDirty } from '../persistence.js'; +import { t } from '../i18n.js'; + +/** + * Updates the floating active layer indicator in the top-right corner + */ +export function updateActiveLayerIndicator() { + const activeLayer = state.layers.find(l => l.id === state.activeLayerId); + const indicator = document.getElementById('current-layer-name'); + const badge = document.getElementById('active-layer-indicator'); + + if (activeLayer && indicator && badge) { + indicator.innerText = activeLayer.name.toUpperCase(); + indicator.style.color = activeLayer.color || '#3b82f6'; + + // Add a small pop animation + badge.classList.remove('badge-pop'); + void badge.offsetWidth; // trigger reflow + badge.classList.add('badge-pop'); + } +} + +/** + * initLayerPanel - Initializes the Layer Management Panel + */ +export function initLayerPanel() { + const container = document.getElementById('layer-panel'); + if (!container) return; + + renderLayerPanel(container); + updateActiveLayerIndicator(); // Sync on load + + // Refresh UI on project load/recovery + if (state.graph) { + state.graph.on('project:restored', () => { + renderLayerPanel(container); + applyLayerFilters(); + updateActiveLayerIndicator(); + }); + } +} + +/** + * toggleLayerPanel - Shows/Hides the layer panel + */ +export function toggleLayerPanel() { + const container = document.getElementById('layer-panel'); + if (!container) return; + + if (container.style.display === 'none' || container.style.display === '') { + container.style.display = 'flex'; + renderLayerPanel(container); // Refresh state + } else { + container.style.display = 'none'; + } +} + +/** + * renderLayerPanel - Renders the internal content of the Layer Panel + */ +export function renderLayerPanel(container) { + container.innerHTML = ` +

+ ${t('layers_title')} + +

+ ${state.layers.map((layer, index) => { + const isTrialLocked = state.license.level === 'Trial' && index >= 3; + const isFinalLocked = layer.locked || isTrialLocked; + + return ` +

+ +

+ ${layer.name} ${isTrialLocked ? '' : ''} +

+ + + +

`; + }).join('')} +

+ + `; + + // Drag and Drop reordering logic + const layerList = container.querySelector('#layer-list'); + if (layerList) { + layerList.addEventListener('dragstart', (e) => { + const item = e.target.closest('.layer-item'); + if (item) { + e.dataTransfer.setData('text/plain', item.dataset.id); + item.classList.add('dragging'); + } + }); + + layerList.addEventListener('dragend', (e) => { + const item = e.target.closest('.layer-item'); + if (item) item.classList.remove('dragging'); + }); + + layerList.addEventListener('dragover', (e) => { + e.preventDefault(); + const draggingItem = layerList.querySelector('.dragging'); + const targetItem = e.target.closest('.layer-item'); + if (targetItem && targetItem !== draggingItem) { + const rect = targetItem.getBoundingClientRect(); + const next = (e.clientY - rect.top) > (rect.height / 2); + layerList.insertBefore(draggingItem, next ? targetItem.nextSibling : targetItem); + } + }); + + layerList.addEventListener('drop', (e) => { + e.preventDefault(); + const newOrderIds = Array.from(layerList.querySelectorAll('.layer-item')).map(el => el.dataset.id); + const newLayers = newOrderIds.map(id => state.layers.find(l => l.id === id)); + state.layers = newLayers; + + markDirty(); + applyLayerFilters(); + renderLayerPanel(container); + }); + } + + // Trash Drop Handling + const trash = container.querySelector('#layer-trash'); + if (trash) { + trash.ondragover = (e) => { + e.preventDefault(); + trash.classList.add('drag-over'); + }; + trash.ondragleave = () => trash.classList.remove('drag-over'); + trash.ondrop = (e) => { + e.preventDefault(); + trash.classList.remove('drag-over'); + const id = e.dataTransfer.getData('text/plain'); + if (id) deleteLayer(id); + }; + } + + // Events + const slider = document.getElementById('layer-opacity-slider'); + const opacityVal = document.getElementById('opacity-val'); + if (slider) { + slider.oninput = (e) => { + const val = parseFloat(e.target.value); + state.inactiveLayerOpacity = val; + if (opacityVal) opacityVal.innerText = `${Math.round(val * 100)}%`; + applyLayerFilters(); + }; + } + + const startRename = (id, nameSpan) => { + const layer = state.layers.find(l => l.id === id); + if (!layer) return; + if (layer.locked) { + showToast(t('err_layer_locked'), 'warning'); + return; + } + + const input = document.createElement('input'); + input.type = 'text'; + input.className = 'layer-rename-input'; + input.value = layer.name; + + nameSpan.replaceWith(input); + input.focus(); + input.select(); + + const finishRename = () => { + const newName = input.value.trim(); + if (newName && newName !== layer.name) { + layer.name = newName; + markDirty(); + updateActiveLayerIndicator(); + } + renderLayerPanel(container); + }; + + input.onblur = finishRename; + input.onkeydown = (e) => { + if (e.key === 'Enter') finishRename(); + if (e.key === 'Escape') renderLayerPanel(container); + }; + }; + + container.querySelectorAll('.layer-name').forEach(nameSpan => { + nameSpan.ondblclick = (e) => { + e.stopPropagation(); + startRename(nameSpan.dataset.id, nameSpan); + }; + }); + + container.querySelectorAll('.rename-layer').forEach(btn => { + btn.onclick = (e) => { + e.stopPropagation(); + const id = btn.dataset.id; + const nameSpan = container.querySelector(`.layer-name[data-id="${id}"]`); + if (nameSpan) startRename(id, nameSpan); + }; + }); + + container.querySelectorAll('.layer-item').forEach(item => { + item.onclick = (e) => { + if (e.target.tagName === 'INPUT' || e.target.closest('.layer-actions')) return; + const id = item.dataset.id; + const layer = state.layers.find(l => l.id === id); + + state.activeLayerId = id; + renderLayerPanel(container); + updateActiveLayerIndicator(); + applyLayerFilters(); + }; + }); + + container.querySelectorAll('.toggle-vis').forEach(btn => { + btn.onclick = (e) => { + e.stopPropagation(); + const id = btn.dataset.id; + const layer = state.layers.find(l => l.id === id); + if (layer) { + layer.visible = !layer.visible; + renderLayerPanel(container); + applyLayerFilters(); + } + }; + }); + + container.querySelectorAll('.toggle-lock').forEach(btn => { + btn.onclick = (e) => { + e.stopPropagation(); + const id = btn.dataset.id; + const layer = state.layers.find(l => l.id === id); + if (layer) { + layer.locked = !layer.locked; + markDirty(); + renderLayerPanel(container); + } + }; + }); + + container.querySelectorAll('.layer-type-toggle').forEach(btn => { + btn.onclick = (e) => { + e.stopPropagation(); + const id = btn.dataset.id; + const layer = state.layers.find(l => l.id === id); + if (layer) { + // Clear nudge if active + btn.classList.remove('pulse-nudge'); + const tooltip = btn.querySelector('.nudge-tooltip'); + if (tooltip) tooltip.remove(); + + layer.type = (layer.type === 'logical') ? 'standard' : 'logical'; + markDirty(); + renderLayerPanel(container); + updateActiveLayerIndicator(); + } + }; + }); + + const addBtn = document.getElementById('add-layer-btn'); + + if (addBtn) { + addBtn.onclick = () => { + // Tiered License Check: Trial mode limit (Max 3 layers) + if (state.license.level === 'Trial' && state.layers.length >= 3) { + showToast(t('err_trial_layer_limit') || 'Trial 버전은 최대 3개의 레이어만 지원합니다.', 'warning'); + return; + } + + const nextIndex = state.layers.length + 1; + const newId = `l${Date.now()}`; + state.layers.push({ + id: newId, + name: `Layer ${nextIndex}`, + visible: true, + locked: false, + type: 'standard', // Explicitly standard + color: `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}` + }); + state.activeLayerId = newId; + renderLayerPanel(container); + updateActiveLayerIndicator(); + applyLayerFilters(); + + // Apply Nudge & Guide Toast + setTimeout(() => { + const newToggle = container.querySelector(`.layer-type-toggle[data-id="${newId}"]`); + if (newToggle) { + newToggle.classList.add('pulse-nudge'); + + // Add mini tooltip + const tooltip = document.createElement('div'); + tooltip.className = 'nudge-tooltip'; + tooltip.innerText = t('nudge_logical_hint'); + newToggle.appendChild(tooltip); + + // Show breadcrumb toast + showToast(t('nudge_new_layer'), 'info', 4000); + + // Auto-cleanup nudge + setTimeout(() => { + newToggle.classList.remove('pulse-nudge'); + tooltip.style.animation = 'tooltipFadeOut 0.4s ease-in forwards'; + setTimeout(() => tooltip.remove(), 400); + }, 5000); + } + }, 100); + }; + } + + // Delete Logic + function deleteLayer(id) { + if (state.layers.length <= 1) { + showToast(t('err_last_layer'), 'warning'); + return; + } + + const layer = state.layers.find(l => l.id === id); + if (!layer) return; + + if (layer.locked) { + showToast(t('err_layer_locked'), 'warning'); + return; + } + + const cellsOnLayer = state.graph ? state.graph.getCells().filter(cell => { + const data = cell.getData() || {}; + return data.layerId === id; + }) : []; + + const finalizeDeletion = () => { + if (state.graph) { + state.graph.removeCells(cellsOnLayer); + } + state.layers = state.layers.filter(l => l.id !== id); + if (state.activeLayerId === id) { + state.activeLayerId = state.layers[0].id; + } + markDirty(); + applyLayerFilters(); + renderLayerPanel(container); + updateActiveLayerIndicator(); + }; + + if (cellsOnLayer.length > 0) { + // Phase 1: Object count warning + showConfirmModal({ + title: t('warning') || 'Warning', + message: t('layer_contains_objects').replace('{name}', layer.name).replace('{count}', cellsOnLayer.length), + onConfirm: () => { + // Phase 2: IRREVERSIBLE final warning + setTimeout(() => { + showConfirmModal({ + title: t('confirm_delete_layer_final')?.split(':')[0] || 'Final Confirmation', + message: t('confirm_delete_layer_final').replace('{name}', layer.name), + onConfirm: finalizeDeletion + }); + }, 300); // Small delay for smooth transition + } + }); + } else { + // Clean layer: Single confirm + showConfirmModal({ + title: t('remove'), + message: t('confirm_delete_layer').replace('{name}', layer.name), + onConfirm: finalizeDeletion + }); + } + } + + // Keyboard selection handling (optional: could keep for activating layers, but currently not needed as click handles it) + container.querySelectorAll('.layer-item').forEach(item => { + item.setAttribute('tabindex', '0'); // Make focusable for accessibility + }); + + // Re-bind draggability after the structural render + makeDraggable(container, '.panel-header'); +} diff --git a/static/js/modules/ui/license.js b/static/js/modules/ui/license.js new file mode 100644 index 0000000..4b94777 --- /dev/null +++ b/static/js/modules/ui/license.js @@ -0,0 +1,109 @@ +import { t } from '../i18n.js'; +import { logger } from '../utils/logger.js'; + +export async function initLicense() { + const status = await checkLicenseStatus(); + + // Update global state + state.license = { + level: status.valid ? status.data.level : t('trial_community'), + valid: status.valid, + data: status.data || {} + }; + + updateLicenseUI(status); +} + +export async function checkLicenseStatus() { + try { + const res = await fetch('/api/license/status'); + if (res.ok) { + return await res.json(); + } + } catch (err) { + logger.error("Failed to check license status", err); + } + return { valid: false, hwid: 'N/A' }; +} + +export function updateLicenseUI(status) { + const badge = document.querySelector('.logo-area span'); + if (badge) { + if (status.valid) { + badge.textContent = status.data.level.toUpperCase(); + badge.style.background = status.data.level === 'Enterprise' ? '#8b5cf6' : '#10b981'; + } else { + badge.textContent = 'UNLICENSED'; + badge.style.background = '#ef4444'; + } + } +} + +export async function showLicenseModal() { + const status = await checkLicenseStatus(); + const { showModal } = await import('./window.js'); + + const content = ` + + `; + + showModal({ + title: t('license_management'), + content: content, + width: "500px", + onRender: (modalEl) => { + const btn = modalEl.querySelector('#activate-btn'); + const input = modalEl.querySelector('#license-key-input'); + btn.onclick = async () => { + const key = input.value.trim(); + if (!key) return; + + btn.disabled = true; + btn.textContent = t('verifying'); + + try { + const res = await fetch('/api/license/activate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ key }) + }); + const result = await res.json(); + if (result.success) { + alert(t('license_activated_success')); + location.reload(); + } else { + alert(t('activation_failed') + result.message); + } + } catch (err) { + alert(t('error_occurred') + err.message); + } finally { + btn.disabled = false; + btn.textContent = t('activate_license_btn'); + } + }; + } + }); +} diff --git a/static/js/modules/ui/sidebar.js b/static/js/modules/ui/sidebar.js new file mode 100644 index 0000000..34578d3 --- /dev/null +++ b/static/js/modules/ui/sidebar.js @@ -0,0 +1,31 @@ +import { state } from '../state.js'; + +export function initSidebar() { + const sidebar = document.getElementById('sidebar'); + const sidebarToggle = document.getElementById('sidebar-toggle'); + const footer = document.querySelector('.sidebar-footer'); + + if (sidebarToggle && sidebar) { + const toggleSidebar = () => { + sidebar.classList.toggle('collapsed'); + if (footer) { + footer.style.display = sidebar.classList.contains('collapsed') ? 'none' : 'block'; + } + setTimeout(() => { + if (state.graph) state.graph.zoomToFit({ padding: 50 }); + }, 350); + }; + + sidebarToggle.addEventListener('click', toggleSidebar); + + const searchIcon = document.querySelector('.search-container i'); + if (searchIcon) { + searchIcon.addEventListener('click', () => { + if (sidebar.classList.contains('collapsed')) { + toggleSidebar(); + document.getElementById('asset-search').focus(); + } + }); + } + } +} diff --git a/static/js/modules/ui/system_menu.js b/static/js/modules/ui/system_menu.js new file mode 100644 index 0000000..d41b2dc --- /dev/null +++ b/static/js/modules/ui/system_menu.js @@ -0,0 +1,97 @@ +import { state } from '../state.js'; +import { t } from '../i18n.js'; +import { logger } from '../utils/logger.js'; + +/** + * handleNewProject - Clears the current graph and resets project meta + */ +export function handleNewProject() { + if (!state.graph) return; + + if (confirm(t('confirm_new_project') || "Are you sure you want to start a new project?")) { + state.graph.clearCells(); + + // Reset Project Metadata in UI + const projectTitle = document.getElementById('project-title'); + if (projectTitle) projectTitle.innerText = t('untitled_project'); + + // Reset state + state.projectName = t('untitled_project'); + state.layers = [ + { id: 'l1', name: 'Main Layer', visible: true, locked: false, color: '#3b82f6', type: 'standard' } + ]; + + // Sync UI + if (projectTitle) projectTitle.innerText = state.projectName; + + state.activeLayerId = 'l1'; + state.selectionOrder = []; + + // Clear Persistence (Optional: could trigger immediate save of empty state) + import('../persistence.js').then(m => { + if (m.clearLastState) m.clearLastState(); + m.markDirty(); + }); + + logger.high("New project created. Canvas cleared."); + } +} + +export function initSystemMenu() { + const systemBtn = document.getElementById('system-menu-btn'); + const systemFlyout = document.getElementById('system-flyout'); + const studioBtn = document.getElementById('studio-btn'); + const newProjectBtn = document.getElementById('new-project'); + + if (systemBtn && systemFlyout) { + // Toggle Flyout + systemBtn.addEventListener('click', (e) => { + e.stopPropagation(); + const isVisible = systemFlyout.style.display === 'flex'; + systemFlyout.style.display = isVisible ? 'none' : 'flex'; + systemBtn.classList.toggle('active', !isVisible); + }); + + // "New Project" Handler + if (newProjectBtn) { + newProjectBtn.addEventListener('click', () => { + handleNewProject(); + systemFlyout.style.display = 'none'; + systemBtn.classList.remove('active'); + }); + } + + // "Object Studio" Handler + if (studioBtn) { + studioBtn.addEventListener('click', () => { + window.open('/studio', '_blank'); + systemFlyout.style.display = 'none'; + systemBtn.classList.remove('active'); + }); + } + + // Close on outside click + document.addEventListener('click', (e) => { + if (!systemFlyout.contains(e.target) && e.target !== systemBtn) { + systemFlyout.style.display = 'none'; + systemBtn.classList.remove('active'); + } + }); + } + + // Export Format Filtering (Trial: PNG, PDF only) + const exportBtns = document.querySelectorAll('.export-btn'); + exportBtns.forEach(btn => { + const format = btn.getAttribute('data-format'); + if (state.license.level === 'Trial' && !['png', 'pdf', 'dnet'].includes(format?.toLowerCase())) { + btn.classList.add('trial-disabled'); + btn.title = 'Premium License Required'; + btn.onclick = (e) => { + e.stopPropagation(); + import('./toast.js').then(m => m.showToast(t('msg_premium_only'), 'warning')); + }; + } + }); +} + +// initUndoRedo is removed from UI as requested (Hotkeys still work via actionHandlers) diff --git a/static/js/modules/ui/toast.js b/static/js/modules/ui/toast.js new file mode 100644 index 0000000..e1fb443 --- /dev/null +++ b/static/js/modules/ui/toast.js @@ -0,0 +1,105 @@ +/** + * toast.js - Modularized Notification System for drawNET + */ + +let toastContainer = null; + +/** + * Ensures a singleton container for toasts exists in the DOM. + */ +function ensureContainer() { + if (toastContainer) return toastContainer; + + toastContainer = document.createElement('div'); + toastContainer.id = 'toast-container'; + toastContainer.style.cssText = ` + position: fixed; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + gap: 10px; + z-index: 10000; + pointer-events: none; + `; + document.body.appendChild(toastContainer); + return toastContainer; +} + +/** + * showToast - Displays a stylish, non-blocking notification + * @param {string} message - Message to display + * @param {string} type - 'info', 'success', 'warning', 'error' + * @param {number} duration - MS to stay visible (default 3500) + */ +export function showToast(message, type = 'info', duration = 3500) { + const container = ensureContainer(); + + const toast = document.createElement('div'); + toast.className = `toast-item ${type}`; + + const colors = { + info: '#3b82f6', + success: '#10b981', + warning: '#f59e0b', + error: '#ef4444' + }; + + const icons = { + info: 'fa-info-circle', + success: 'fa-check-circle', + warning: 'fa-exclamation-triangle', + error: 'fa-times-circle' + }; + + toast.innerHTML = ` + + ${message} + `; + + toast.style.cssText = ` + background: rgba(15, 23, 42, 0.9); + color: white; + padding: 12px 20px; + border-radius: 12px; + font-size: 13px; + font-weight: 600; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); + display: flex; + align-items: center; + gap: 12px; + border-left: 4px solid ${colors[type]}; + backdrop-filter: blur(8px); + pointer-events: auto; + animation: toastIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; + min-width: 280px; + `; + + // Add CSS Keyframes if not present + if (!document.getElementById('toast-styles')) { + const style = document.createElement('style'); + style.id = 'toast-styles'; + style.innerHTML = ` + @keyframes toastIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } + } + @keyframes toastOut { + from { opacity: 1; transform: translateY(0); } + to { opacity: 0; transform: translateY(-20px) scale(0.95); } + } + `; + document.head.appendChild(style); + } + + container.appendChild(toast); + + const dismiss = () => { + toast.style.animation = 'toastOut 0.3s ease-in forwards'; + setTimeout(() => toast.remove(), 300); + }; + + setTimeout(dismiss, duration); + toast.onclick = dismiss; +} diff --git a/static/js/modules/ui/utils.js b/static/js/modules/ui/utils.js new file mode 100644 index 0000000..5885032 --- /dev/null +++ b/static/js/modules/ui/utils.js @@ -0,0 +1,107 @@ +/** + * ui/utils.js - Shared UI utilities + */ + +/** + * makeDraggable - Helper to make an element draggable by its header or itself + */ +export function makeDraggable(el, headerSelector) { + const header = headerSelector ? el.querySelector(headerSelector) : el; + if (!header) return; + + let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; + + header.onmousedown = dragMouseDown; + header.style.cursor = 'move'; + + function dragMouseDown(e) { + // Don't prevent default on inputs, buttons, or sliders inside + if (['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(e.target.tagName)) return; + + pos3 = e.clientX; + pos4 = e.clientY; + document.onmouseup = closeDragElement; + document.onmousemove = elementDrag; + } + + function elementDrag(e) { + e.preventDefault(); + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + el.style.top = (el.offsetTop - pos2) + "px"; + el.style.left = (el.offsetLeft - pos1) + "px"; + el.style.bottom = 'auto'; // Break fixed constraints + el.style.right = 'auto'; + } + + function closeDragElement() { + document.onmouseup = null; + document.onmousemove = null; + } +} + +/** + * showConfirmModal - Displays a professional confirmation modal + * @param {Object} options { title, message, onConfirm, showDontAskAgain } + */ +export function showConfirmModal({ title, message, onConfirm, onCancel, showDontAskAgain = false, checkboxKey = '' }) { + const overlay = document.createElement('div'); + overlay.className = 'modal-overlay glass-panel active'; + overlay.style.zIndex = '10000'; + + const modal = document.createElement('div'); + modal.className = 'modal-content animate-up'; + modal.style.width = '320px'; + modal.style.padding = '0'; + + modal.innerHTML = ` + + + + `; + + overlay.appendChild(modal); + document.body.appendChild(overlay); + + const close = () => overlay.remove(); + + modal.querySelector('#modal-cancel').onclick = () => { + close(); + if (onCancel) onCancel(); + }; + + modal.querySelector('#modal-confirm').onclick = () => { + const dontAsk = modal.querySelector('#dont-ask-again')?.checked; + if (dontAsk && checkboxKey) { + import('../settings/store.js').then(m => m.updateSetting(checkboxKey, false)); + } + close(); + if (onConfirm) onConfirm(); + }; + + overlay.onclick = (e) => { if (e.target === overlay) close(); }; +} + +import { showToast as coreShowToast } from './toast.js'; + +/** + * showToast - Compatibility wrapper for modularized toast + */ +export function showToast(message, type = 'info', duration = 3500) { + coreShowToast(message, type, duration); +} diff --git a/static/js/modules/ui/window.js b/static/js/modules/ui/window.js new file mode 100644 index 0000000..6947bfa --- /dev/null +++ b/static/js/modules/ui/window.js @@ -0,0 +1,105 @@ +/** + * window.js - Reusable Draggable Floating Window System + */ +export class FloatingWindow { + constructor(id, title, options = {}) { + this.id = id; + this.title = title; + this.options = { + width: options.width || 400, + height: options.height || 300, + x: options.x || (window.innerWidth / 2 - (options.width || 400) / 2), + y: options.y || (window.innerHeight / 2 - (options.height || 300) / 2), + resizable: options.resizable !== false, + ...options + }; + this.element = null; + this.isDragging = false; + this.dragOffset = { x: 0, y: 0 }; + } + + render(contentHtml) { + if (this.element) return this.element; + + this.element = document.createElement('div'); + this.element.id = `win-${this.id}`; + this.element.className = 'floating-window'; + this.element.style.width = `${this.options.width}px`; + this.element.style.height = `${this.options.height}px`; + this.element.style.left = `${this.options.x}px`; + this.element.style.top = `${this.options.y}px`; + this.element.style.zIndex = '1000'; + + this.element.innerHTML = ` +

${this.title}

+ + +

+ ${contentHtml} +

+ `; + + document.body.appendChild(this.element); + this.initEvents(); + return this.element; + } + + initEvents() { + const header = this.element.querySelector('.win-header'); + const closeBtn = this.element.querySelector('.win-close'); + const minBtn = this.element.querySelector('.win-minimize'); + + header.addEventListener('mousedown', (e) => { + if (e.target.closest('.win-controls')) return; + this.isDragging = true; + this.dragOffset.x = e.clientX - this.element.offsetLeft; + this.dragOffset.y = e.clientY - this.element.offsetTop; + this.bringToFront(); + }); + + window.addEventListener('mousemove', (e) => { + if (!this.isDragging) return; + this.element.style.left = `${e.clientX - this.dragOffset.x}px`; + this.element.style.top = `${e.clientY - this.dragOffset.y}px`; + }); + + window.addEventListener('mouseup', () => { + this.isDragging = false; + }); + + closeBtn.addEventListener('click', () => this.destroy()); + + minBtn.addEventListener('click', () => { + this.element.classList.toggle('minimized'); + if (this.element.classList.contains('minimized')) { + this.element.style.height = '48px'; + } else { + this.element.style.height = `${this.options.height}px`; + } + }); + + this.element.addEventListener('mousedown', () => this.bringToFront()); + } + + bringToFront() { + const allWins = document.querySelectorAll('.floating-window'); + let maxZ = 1000; + allWins.forEach(win => { + const z = parseInt(win.style.zIndex); + if (z > maxZ) maxZ = z; + }); + this.element.style.zIndex = maxZ + 1; + } + + destroy() { + if (this.element) { + this.element.remove(); + this.element = null; + } + if (this.onClose) this.onClose(); + } +} diff --git a/static/js/modules/utils/logger.js b/static/js/modules/utils/logger.js new file mode 100644 index 0000000..1eaf0e5 --- /dev/null +++ b/static/js/modules/utils/logger.js @@ -0,0 +1,64 @@ +import { state } from '../state.js'; + +/** + * logger.js - Integrated Logging System for drawNET + * Supports filtering based on config.json [log_level: info | high | critical] + */ + +const LEVELS = { + info: 0, + high: 1, + critical: 2 +}; + +function getLogLevel() { + const level = state.appConfig?.log_level || 'info'; + return LEVELS[level.toLowerCase()] ?? LEVELS.info; +} + +export const logger = { + /** + * info - General progress, initialization, data loading (Level: info) + */ + info: (msg, ...args) => { + if (getLogLevel() <= LEVELS.info) { + console.log(`%c[drawNET:INFO]%c ${msg}`, 'color: #38bdf8; font-weight: bold;', 'color: inherit;', ...args); + } + }, + + /** + * debug - Temporary debugging logs (Alias for info) + */ + debug: (msg, ...args) => { + if (getLogLevel() <= LEVELS.info) { + console.log(`%c[drawNET:DEBUG]%c ${msg}`, 'color: #94a3b8; font-style: italic;', 'color: inherit;', ...args); + } + }, + + /** + * high - Important events, user actions, validation warnings (Level: high) + */ + high: (msg, ...args) => { + if (getLogLevel() <= LEVELS.high) { + console.info(`%c[drawNET:HIGH]%c ${msg}`, 'color: #f59e0b; font-weight: bold;', 'color: inherit;', ...args); + } + }, + + /** + * critical - System failures, data corruption, critical exceptions (Level: critical) + */ + critical: (msg, ...args) => { + if (getLogLevel() <= LEVELS.critical) { + console.error(`%c[drawNET:CRITICAL]%c ${msg}`, 'background: #ef4444; color: white; padding: 2px 4px; border-radius: 4px; font-weight: bold;', 'color: #ef4444;', ...args); + } + }, + + /** + * warn - Standard warnings that should be visible in 'high' level + */ + warn: (msg, ...args) => { + if (getLogLevel() <= LEVELS.high) { + console.warn(`[drawNET:WARN] ${msg}`, ...args); + } + } +}; diff --git a/static/locales/en.json b/static/locales/en.json new file mode 100644 index 0000000..e2f9ce2 --- /dev/null +++ b/static/locales/en.json @@ -0,0 +1,303 @@ +{ + "app_name": "drawNET", + "app_subtitle": "Premium Edition", + "search_placeholder": "Search assets...", + "asset_library": "Asset Library", + "fixed_objects": "Fixed Objects", + "properties_title": "Properties", + "apply_btn": "Apply", + "close_btn": "Close", + "system_menu": "System", + "undo": "Undo", + "redo": "Redo", + "new_project": "New Project", + "confirm_new_project": "Are you sure you want to start a new project? Unsaved changes will be lost.", + "import_json": "Load Project (.dnet)", + "export_json": "Save Project (.dnet)", + "help_btn": "Help & Guide", + "quick_start": "Quick Start Guide", + "file_menu": "File", + "tools_menu": "Tools", + "settings": "Settings", + "active_session": "Active Session", + "select_object_prompt": "Select an object to edit properties", + "appearance": "Appearance", + "dark_mode": "Dark Mode", + "canvas_background": "Canvas & Background", + "bg_color": "Background Color", + "grid_style": "Grid Style", + "grid_none": "None", + "grid_solid": "Solid", + "grid_dashed": "Dashed", + "grid_spacing": "Grid Spacing (px)", + "canvas_preset": "Canvas Preset", + "canvas_full": "Full Screen", + "orientation": "Orientation", + "portrait": "Portrait", + "landscape": "Landscape", + "width": "Width", + "height": "Height", + "group": "Group", + "blank": "Blank Object", + "dot": "Dot", + "object_studio": "Object Studio", + "inventory": "Inventory", + "global_search_placeholder": "Search devices, IPs...", + "preview": "Preview", + "basic_info": "Basic Info", + "id_label": "ID (Unique)", + "id_placeholder": "e.g. firewall_palo", + "display_name": "Display Name", + "name_placeholder": "e.g. Palo Alto FW", + "category": "Category", + "vendor": "Vendor", + "vendor_placeholder": "e.g. Palo Alto", + "asset_attachment": "Asset Attachment", + "icon_image": "Icon Image (SVG/PNG)", + "save_device": "Save Device", + "Network": "Network", + "Security": "Security", + "Compute": "Compute", + "External": "External", + "Other": "Other", + "rect": "Rectangle", + "ellipse": "Ellipse", + "polyline": "Polyline", + "rounded-rect": "Rounded Rect", + "circle": "Circle", + "text-box": "Text Box", + "label": "Label", + "prop_id": "ID", + "prop_label": "Label", + "prop_type": "Type", + "prop_parent": "Parent (Group)", + "prop_is_group": "Is Group Node", + "prop_asset_path": "Asset Path (Icon)", + "prop_label_color": "Label Color", + "prop_fill_color": "Fill Color", + "prop_border_color": "Border Color", + "prop_label_pos": "Label Position", + "prop_slots": "Slots (U)", + "prop_padding": "Padding", + "prop_width": "Width", + "prop_color": "Color", + "prop_style": "Style", + "prop_routing": "Routing", + "prop_source_anchor": "Source Anchor", + "prop_src_anchor": "Source Anchor", + "prop_target_anchor": "Target Anchor", + "prop_dst_anchor": "Target Anchor", + "prop_direction": "Direction", + "prop_is_tunnel": "Is Tunnel (VPN)", + "prop_model": "Model Name", + "prop_vendor": "Vendor", + "prop_asset_tag": "Asset Tag", + "prop_serial": "Serial Number", + "prop_status": "Status", + "prop_project": "Project/Team", + "prop_env": "Operating Env", + "prop_ip": "IP Address", + "prop_tags": "Tags (Comma separated)", + "export_bom": "Export BOM (Excel)", + "no_objects_found": "No objects found", + "none": "None", + "solid": "Solid", + "dashed": "Dashed", + "dotted": "Dotted", + "double": "Double", + "manhattan": "Auto (Avoidance)", + "u_shape": "U-Shape", + "orthogonal": "Orthogonal (General)", + "straight": "Straight", + "metro": "Metro (8-way)", + "orth": "Auto Orthogonal", + "center": "Center", + "left": "Left", + "right": "Right", + "top": "Top", + "bottom": "Bottom", + "forward": "Forward (A -> B)", + "backward": "Backward (B -> A)", + "both": "Both Way", + "browser": "Browser", + "user": "User", + "admin": "Admin", + "parallelogram": "Parallelogram", + "hourglass": "Hourglass", + "triangle": "Triangle", + "diamond": "Diamond", + "cylinder": "Cylinder", + "document": "Document", + "manual-input": "Manual Input", + "table": "Table", + "rack": "Rack", + "arrow-up": "Arrow (Up)", + "arrow-down": "Arrow (Down)", + "arrow-left": "Arrow (Left)", + "arrow-right": "Arrow (Right)", + "multi_select_title": "Multi-selected", + "alignment": "Alignment", + "distribution": "Distribution", + "align_top": "Align Top", + "align_bottom": "Align Bottom", + "align_left": "Align Left", + "align_right": "Align Right", + "align_middle": "Align Middle", + "align_center": "Align Center", + "distribute_horizontal": "Distribute Horizontal", + "distribute_vertical": "Distribute Vertical", + "prop_locked": "Lock Object", + "layer_standard": "Standard Layer", + "layer_logical": "Logical Layer", + "err_logical_layer_drop": "Devices cannot be placed directly on a logical layer. (Connection only)", + "confirm_delete_layer": "Do you want to delete layer '{name}'? All objects in this layer will be deleted.", + "confirm_delete_layer_final": "Caution: This action cannot be undone. Are you sure you want to permanently delete layer '{name}' and all its data?", + "layer_contains_objects": "The selected layer '{name}' contains {count} objects. Do you want to continue?", + "err_last_layer": "Cannot delete because at least one layer must exist.", + "err_layer_locked": "Locked layers cannot be deleted or modified. Please unlock it first.", + "layer_locked_title": "Layer Locked", + "nudge_new_layer": "A new layer has been created.", + "nudge_logical_hint": "Click this icon to toggle to 'Logical Only'!", + "msg_autosaved": "Progress has been safely auto-saved.", + "msg_restoring": "Restoring the last session...", + "msg_export_start": "Preparing {format} export. Please wait...", + "msg_export_success": "{format} export completed!", + "msg_export_failed": "{format} export failed. Please try again.", + "export_pptx": "Export PPTX Report", + "export_excel": "Export Excel Inventory", + "export_png": "Export PNG Image", + "export_svg": "Export SVG Vector", + "export_pdf": "Export PDF Document", + "export_preparing": "Preparing file. Please wait...", + "confirm_recovery": "A previous session was found. Restore it?", + "studio_edit_existing": "Edit Existing Package", + "studio_select_package": "-- Select Package --", + "studio_open": "Open", + "confirm_load_package": "Existing package \"{id}\" will be loaded. Unsaved studio work will be lost. Continue?", + "remove": "Remove", + "studio_no_assets": "No assets loaded. Please upload folders or files.", + "studio_select_prompt": "Select an asset to edit or convert", + "studio_asset_detail": "Asset Detail", + "display_name_label": "Display Name", + "add_category_tooltip": "Add Category", + "new_category_placeholder": "New category name...", + "add": "Add", + "upload": "Upload", + "trace_threshold": "Trace Threshold", + "trace_hint": "Lower for brighter, higher for darker tracing.", + "original": "Original", + "vector_svg": "Vector (SVG)", + "keep_png": "Keep PNG", + "use_svg": "Use SVG", + "tracing": "Tracing...", + "convert_to_svg": "Convert to Vector (SVG)", + "bulk_edit": "Bulk Edit ({count} items)", + "common_category": "Common Category", + "no_change": "(No Change)", + "apply_to_selected": "Apply to Selected", + "build_success": "Package built successfully!", + "build_failed": "Build failed: {message}", + "load_failed": "Load failed: {message}", + "load_error": "Load error: {message}", + "please_enter_pack_id": "Please enter a Pack ID and add at least one asset.", + "building": "Building...", + "connected": "CONNECTED", + "disconnected": "DISCONNECTED", + "active_session_label": "ACTIVE SESSION", + "select_object_to_edit": "Select an object to edit properties", + "identity": "Identity", + "language": "Language", + "select_lang_desc": "Select your preferred language", + "dark_mode_desc": "Toggle premium dark aesthetics", + "grid_style_desc": "Visual guide style", + "grid_spacing_desc": "Snap distance (px)", + "bg_color_desc": "Canvas background color", + "grid_color": "Grid Color", + "grid_color_desc": "Color of the grid lines/dots", + "grid_thickness": "Grid Thickness", + "grid_thickness_desc": "Line weight (px)", + "show_major_grid": "Show Major Grid", + "show_major_grid_desc": "Show thicker lines at intervals", + "major_grid_color": "Major Grid Color", + "major_grid_color_desc": "Color for primary grid lines", + "major_grid_interval": "Major Grid Interval", + "major_grid_interval_desc": "Every N small grids", + "canvas_preset_desc": "Standard page sizes", + "orientation_desc": "Portrait or Landscape", + "apply": "Apply", + "auto_load_last": "Auto-load last session", + "auto_load_last_desc": "Confirm-less restoration on startup", + "sync_mode": "Sync Mode", + "sync_mode_desc": "Manual sync for high stability", + "auto_save": "Auto-Save", + "auto_save_desc": "Persist progress locally", + "pptx_lib_error": "PPTX library is not loaded.", + "pptx_no_data": "No data to export.", + "pptx_report_title": "drawNET Architecture Report: {title}", + "pptx_obj_type": "Object Type", + "pptx_quantity": "Quantity", + "pptx_generated_at": "Generated at: {date}", + "pptx_overall_topo": "Overall Topology Overview", + "pptx_layer_title": "Layer: {name}", + "pptx_inv_title": "Detailed Inventory List", + "pptx_export_error": "PPTX export failed: {message}", + "about": "About", + "editor_behavior": "Editor Behavior", + "confirm_ungroup": "Confirm before Un-grouping", + "confirm_ungroup_desc": "Show a confirmation dialog when removing an object from a group.", + "confirm_ungroup_title": "Disconnect from Group", + "confirm_ungroup_msg": "Are you sure you want to remove this object from its parent group?", + "prop_description": "Description", + "prop_routing_offset": "Routing Offset", + "routing_control": "Routing Control", + "pptx_desc_table_title": "Object Details & Descriptions", + "prop_header_text": "Header Title", + "prop_card_type": "Card Type", + "prop_card_content": "Content (Newline separated)", + "numbered": "Numbered List [1]", + "bullet": "Bullet Points (●)", + "legend": "Legend Mode (-)", + "standard": "Standard Text", + "rich_card": "Rich Text Card", + "prop_header_align": "Header Align", + "prop_content_align": "Content Align", + "license_management": "License Management", + "license_intro": "Manage the official license for drawNET Premium Edition.", + "machine_id": "Machine ID (HWID)", + "copy": "Copy", + "expiry_info": "Expiry Information", + "valid_until": "Your premium access is valid until {date}.", + "activate_license_title": "License Activation", + "license_key_placeholder": "Paste the license key you received here...", + "activate_license_btn": "Activate License", + "verifying": "Verifying...", + "license_activated_success": "License activated successfully!", + "activation_failed": "Activation failed: ", + "connection_error": "Connection error: ", + "enter_license_key": "Please enter the license key.", + "error_occurred": "An error occurred: ", + "hwid_copy_hint": "Please provide the above ID to the administrator for license issuance.", + "status_invalid": "License is invalid.", + "current_edition": "Current Edition", + "trial_community": "Trial / Community", + "msg_premium_only": "This format requires a Basic/Pro license.", + "rename_project_prompt": "Enter new project name:", + "rename_project_tooltip": "Rename project", + "layers_title": "Layers", + "add_layer_tooltip": "Add Layer", + "layer_type_logical": "Logical (Edge Only)", + "layer_type_standard": "Standard (All Objects)", + "unlock_layer": "Unlock Layer", + "lock_layer": "Lock Layer", + "rename_layer": "Rename Layer", + "opacity_label": "Inactive Layer Opacity", + "trash_tooltip": "Drag layer here to delete", + "discard_layer": "Discard Layer", + "err_trial_layer_limit": "Trial version supports a maximum of 3 layers.", + "warning": "Warning", + "final_confirmation": "Final Confirmation", + "untitled_project": "Untitled_Project", + "connected_status": "CONNECTED", + "layer_label": "LAYER:", + "main_layer_name": "Main Layer" +} diff --git a/static/locales/ko.json b/static/locales/ko.json new file mode 100644 index 0000000..65bbd82 --- /dev/null +++ b/static/locales/ko.json @@ -0,0 +1,303 @@ +{ + "app_name": "drawNET", + "app_subtitle": "v1.0 알파", + "search_placeholder": "에셋 검색...", + "asset_library": "에셋 라이브러리", + "fixed_objects": "고정 오브젝트", + "properties_title": "속성", + "apply_btn": "적용", + "close_btn": "닫기", + "system_menu": "시스템", + "undo": "실행 취소", + "redo": "다시 실행", + "new_project": "새 프로젝트", + "confirm_new_project": "새 프로젝트를 만드시겠습니까? 저장하지 않은 작업은 사라집니다.", + "import_json": "프로젝트 불러오기 (.dnet)", + "export_json": "프로젝트 저장 (.dnet)", + "help_btn": "도움말 및 가이드", + "quick_start": "빠른 시작 가이드", + "file_menu": "파일", + "tools_menu": "도구", + "settings": "설정", + "active_session": "활성 세션", + "select_object_prompt": "오브젝트를 선택하여 속성을 편집하세요", + "appearance": "포맷/화면", + "dark_mode": "다크 모드", + "canvas_background": "캔버스 및 배경", + "bg_color": "배경 색상", + "grid_style": "그리드 스타일", + "grid_none": "없음", + "grid_solid": "실선", + "grid_dashed": "점선", + "grid_spacing": "그리드 간격 (px)", + "canvas_preset": "캔버스 크기", + "canvas_full": "전체 화면", + "orientation": "방향", + "portrait": "세로", + "landscape": "가로", + "width": "너비", + "height": "높이", + "group": "그룹", + "blank": "빈 오브젝트", + "dot": "점", + "object_studio": "오브젝트 스튜디오", + "inventory": "인벤토리", + "global_search_placeholder": "장비, IP 검색...", + "preview": "미리보기", + "basic_info": "기본 정보", + "id_label": "ID (고유값)", + "id_placeholder": "예: firewall_palo", + "display_name": "기기 명칭", + "name_placeholder": "예: Palo Alto FW", + "category": "분류", + "vendor": "제조사", + "vendor_placeholder": "예: Palo Alto", + "asset_attachment": "에셋 첨부", + "icon_image": "아이콘 이미지 (SVG/PNG)", + "save_device": "장비 저장", + "Network": "네트워크", + "Security": "보안", + "Compute": "컴퓨트", + "External": "외부망", + "Other": "기타", + "rect": "사각형", + "ellipse": "타원", + "polyline": "폴리라인", + "rounded-rect": "둥근 사각형", + "circle": "원", + "text-box": "텍스트 상자", + "label": "라벨", + "prop_id": "ID", + "prop_label": "라벨", + "prop_type": "유형", + "prop_parent": "상위 (그룹)", + "prop_is_group": "그룹 노드 여부", + "prop_asset_path": "에셋 경로 (아이콘)", + "prop_label_color": "라벨 색상", + "prop_fill_color": "채우기 색상", + "prop_border_color": "테두리 색상", + "prop_label_pos": "라벨 위치", + "prop_slots": "슬롯 수 (U)", + "prop_padding": "패딩 (Padding)", + "prop_width": "선 두께 (Width)", + "prop_color": "색상", + "prop_style": "스타일", + "prop_routing": "라우팅", + "prop_source_anchor": "시작 앵커", + "prop_src_anchor": "시작 앵커", + "prop_target_anchor": "대상 앵커", + "prop_dst_anchor": "대상 앵커", + "prop_direction": "화살표 방향", + "prop_is_tunnel": "터널 여부 (VPN)", + "prop_model": "모델명", + "prop_vendor": "제조사", + "prop_asset_tag": "자산 번호", + "prop_serial": "시리얼 번호", + "prop_status": "설치 상태", + "prop_project": "프로젝트/팀", + "prop_env": "운영 환경", + "prop_ip": "IP 주소", + "prop_tags": "태그 (쉼표로 구분)", + "export_bom": "BOM (Excel) 내보내기", + "no_objects_found": "오브젝트가 없습니다", + "none": "없음", + "solid": "실선", + "dashed": "점선", + "dotted": "점선 (Dotted)", + "double": "굵은 선", + "manhattan": "자동 경로 (장애물 회피)", + "u_shape": "ㄷ자 경로", + "orthogonal": "수직/수평 (일반)", + "straight": "직선", + "metro": "8방향 (대각선 포함)", + "orth": "자동 수직/수평", + "center": "중앙", + "left": "좌", + "right": "우", + "top": "상", + "bottom": "하", + "forward": "정방향 (A -> B)", + "backward": "역방향 (B -> A)", + "both": "양방향", + "browser": "브라우저", + "user": "사용자", + "admin": "관리자", + "parallelogram": "평행사변형", + "hourglass": "모래시계", + "triangle": "삼각형", + "diamond": "마름모 (결정)", + "cylinder": "원통 (분석/DB)", + "document": "문서", + "manual-input": "사용자 입력", + "table": "테이블", + "rack": "랙 (Rack)", + "arrow-up": "화살표 (상)", + "arrow-down": "화살표 (하)", + "arrow-left": "화살표 (좌)", + "arrow-right": "화살표 (우)", + "multi_select_title": "다중 선택됨", + "alignment": "정렬", + "distribution": "배치", + "align_top": "상 정렬", + "align_bottom": "하 정렬", + "align_left": "좌 정렬", + "align_right": "우 정렬", + "align_middle": "수직 중앙 정렬 (Middle)", + "align_center": "수평 중앙 정렬 (Center)", + "distribute_horizontal": "가로 간격 동일하게", + "distribute_vertical": "세로 간격 동일하게", + "prop_locked": "오브젝트 잠금 (이동/삭제 방지)", + "layer_standard": "일반 레이어", + "layer_logical": "논리 전용", + "err_logical_layer_drop": "논리 전용 레이어에는 장비를 직접 배치할 수 없습니다. (선 연결만 가능)", + "confirm_delete_layer": "레이어 '{name}'을(를) 삭제하시겠습니까? 해당 레이어의 모든 오브젝트가 함께 삭제됩니다.", + "confirm_delete_layer_final": "주의: 이 작업은 되돌릴 수 없습니다. 정말로 '{name}' 레이어와 모든 데이터를 영구 삭제하시겠습니까?", + "layer_contains_objects": "선택한 '{name}' 레이어에 {count}개의 오브젝트가 포함되어 있습니다. 계속하시겠습니까?", + "err_last_layer": "최소 하나 이상의 레이어가 존재해야 하므로 삭제할 수 없습니다.", + "err_layer_locked": "잠긴 레이어는 삭제하거나 수정할 수 없습니다. 먼저 잠금을 해제해 주세요.", + "layer_locked_title": "레이어 잠김", + "nudge_new_layer": "새 레이어가 생성되었습니다.", + "nudge_logical_hint": "이 아이콘을 클릭하면 '논리 전용'으로 전환됩니다!", + "msg_autosaved": "진행 상황이 안전하게 자동 저장되었습니다.", + "msg_restoring": "마지막 작업 세션을 복구하는 중입니다...", + "msg_export_start": "{format} 내보내기를 준비 중입니다. 잠시만 기다려 주세요...", + "msg_export_success": "{format} 내보내기가 완료되었습니다!", + "msg_export_failed": "{format} 내보내기에 실패했습니다. 다시 시도해 주세요.", + "export_pptx": "PPTX 리포트 내보내기", + "export_excel": "Excel 인벤토리 내보내기", + "export_png": "PNG 이미지 내보내기", + "export_svg": "SVG 벡터 내보내기", + "export_pdf": "PDF 문서 내보내기", + "export_preparing": "파일을 준비 중입니다. 잠시만 기다려 주세요...", + "confirm_recovery": "마지막으로 작업하던 세션이 발견되었습니다. 복구하시겠습니까?", + "studio_edit_existing": "기존 패키지 편집", + "studio_select_package": "-- 패키지 선택 --", + "studio_open": "열기", + "confirm_load_package": "기존 패키지 \"{id}\"를 불러옵니다. 스튜디오의 저장되지 않은 작업은 사라집니다. 계속하시겠습니까?", + "remove": "제거", + "studio_no_assets": "로드된 에셋이 없습니다. 폴더나 파일을 업로드해 주세요.", + "studio_select_prompt": "에셋을 선택하여 편집하거나 변환하세요", + "studio_asset_detail": "에셋 상세 정보", + "display_name_label": "표시 명칭", + "add_category_tooltip": "카테고리 추가", + "new_category_placeholder": "새 카테고리명...", + "add": "추가", + "upload": "업로드", + "trace_threshold": "트레이싱 임계값", + "trace_hint": "낮을수록 밝게, 높을수록 어둡게 트레이싱됩니다.", + "original": "원본 (Original)", + "vector_svg": "벡터 (SVG)", + "keep_png": "PNG 유지", + "use_svg": "SVG 사용", + "tracing": "트레이싱 중...", + "convert_to_svg": "벡터(SVG)로 변환", + "bulk_edit": "다중 편집 ({count}개 항목)", + "common_category": "공통 카테고리", + "no_change": "(변경 없음)", + "apply_to_selected": "선택 항목에 적용", + "build_success": "패키지가 성공적으로 빌드되었습니다!", + "build_failed": "빌드 실패: {message}", + "load_failed": "로드 실패: {message}", + "load_error": "로드 오류: {message}", + "please_enter_pack_id": "Pack ID를 입력하고 최소 하나 이상의 에셋을 추가해 주세요.", + "building": "빌드 중...", + "connected": "연결됨", + "disconnected": "연결 끊김", + "active_session_label": "활성 세션", + "select_object_to_edit": "오브젝트를 선택하여 속성을 편집하세요", + "identity": "아이덴티티", + "language": "언어", + "select_lang_desc": "선호하는 언어를 선택하세요", + "dark_mode_desc": "프리미엄 다크 테마 전환", + "grid_style_desc": "그리드 시각 가이드 스타일", + "grid_spacing_desc": "그리드 스냅 간격 (px)", + "bg_color_desc": "캔버스 배경 색상", + "grid_color": "그리드 색상", + "grid_color_desc": "그리드 선/점의 색상", + "grid_thickness": "그리드 두께", + "grid_thickness_desc": "선의 굵기 (px)", + "show_major_grid": "대분할선(Major) 활성화", + "show_major_grid_desc": "지정된 간격마다 굵은 선 표시", + "major_grid_color": "대분할선 색상", + "major_grid_color_desc": "주 그리드 선의 색상", + "major_grid_interval": "대분할 간격", + "major_grid_interval_desc": "소 그리드 N개마다 표시", + "canvas_preset_desc": "표준 페이지 규격", + "orientation_desc": "가로/세로 방향", + "apply": "적용", + "auto_load_last": "시작 시 마지막 작업 자동 불러오기", + "auto_load_last_desc": "확인창 없이 마지막 세션 복구", + "sync_mode": "동기화 모드", + "sync_mode_desc": "수동 동기화 (안정성 우선)", + "auto_save": "자동 저장", + "auto_save_desc": "브라우저 로컬 저장소에 상시 보관", + "pptx_lib_error": "PPTX 라이브러리가 로드되지 않았습니다.", + "pptx_no_data": "내보내기할 데이터가 없습니다.", + "pptx_report_title": "drawNET 아키텍처 보고서: {title}", + "pptx_obj_type": "객체 유형", + "pptx_quantity": "수량", + "pptx_generated_at": "생성 시간: {date}", + "pptx_overall_topo": "전체 토폴로지 구상도", + "pptx_layer_title": "레이어: {name}", + "pptx_inv_title": "상세 인벤토리 목록", + "pptx_export_error": "PPTX 내보내기 중 오류가 발생했습니다: {message}", + "about": "정보", + "editor_behavior": "에디터 동작", + "confirm_ungroup": "그룹 해제 시 확인", + "confirm_ungroup_desc": "객체를 그룹에서 제외할 때 확인창을 표시합니다.", + "confirm_ungroup_title": "그룹 연결 해제", + "confirm_ungroup_msg": "이 객체를 상위 그룹에서 제외하시겠습니까?", + "prop_description": "상세 설명", + "prop_routing_offset": "라우팅 여백 (Offset)", + "routing_control": "라우팅 제어", + "pptx_desc_table_title": "객체별 상세 내용 및 주석 목록", + "prop_header_text": "헤더 제목", + "prop_card_type": "카드 유형", + "prop_card_content": "내용 (엔터로 구분)", + "numbered": "번호 매기기 [1]", + "bullet": "불렛 기호 (●)", + "legend": "범례 모드 (-)", + "standard": "기본 텍스트", + "rich_card": "리치 텍스트 카드", + "prop_header_align": "제목 정렬", + "prop_content_align": "본문 정렬", + "license_management": "라이선스 관리", + "license_intro": "drawNET Premium Edition의 정식 라이선스를 관리합니다.", + "machine_id": "머신 ID (HWID)", + "copy": "복사", + "expiry_info": "만료 정보", + "valid_until": "프리미엄 액세스가 {date}까지 유효합니다.", + "activate_license_title": "라이선스 키 활성화", + "license_key_placeholder": "전달받은 라이선스 키를 여기에 붙여넣으세요...", + "activate_license_btn": "라이선스 활성화", + "verifying": "검증 중...", + "license_activated_success": "라이선스가 성공적으로 활성화되었습니다!", + "activation_failed": "인증 실패: ", + "connection_error": "연결 오류: ", + "enter_license_key": "라이선스 키를 입력해주세요.", + "error_occurred": "오류 발생: ", + "hwid_copy_hint": "라이선스 발급을 위해 위 ID를 관리자에게 전달해주세요.", + "status_invalid": "라이선스가 유효하지 않습니다.", + "current_edition": "현재 에디션", + "trial_community": "체험판 / 커뮤니티", + "msg_premium_only": "이 포맷은 Basic/Pro 라이선스가 필요합니다.", + "rename_project_prompt": "새로운 구성도(프로젝트) 이름을 입력하세요:", + "rename_project_tooltip": "프로젝트 이름 변경", + "layers_title": "레이어", + "add_layer_tooltip": "레이어 추가", + "layer_type_logical": "논리 전용 (선 연결 전용)", + "layer_type_standard": "일반 (모든 객체)", + "unlock_layer": "레이어 잠금 해제", + "lock_layer": "레이어 잠금", + "rename_layer": "레이어 이름 변경", + "opacity_label": "비활성 레이어 투명도", + "trash_tooltip": "레이어를 여기로 드래그하여 삭제", + "discard_layer": "레이어 삭제", + "err_trial_layer_limit": "Trial 버전은 최대 3개의 레이어만 지원합니다.", + "warning": "경고", + "final_confirmation": "최종 확인", + "untitled_project": "제목_없는_프로젝트", + "connected_status": "연결됨", + "layer_label": "레이어:", + "main_layer_name": "기본 레이어" +} diff --git a/static/webfonts/fa-brands-400.woff2 b/static/webfonts/fa-brands-400.woff2 new file mode 100644 index 0000000..71e3185 Binary files /dev/null and b/static/webfonts/fa-brands-400.woff2 differ diff --git a/static/webfonts/fa-regular-400.woff2 b/static/webfonts/fa-regular-400.woff2 new file mode 100644 index 0000000..7f02168 Binary files /dev/null and b/static/webfonts/fa-regular-400.woff2 differ diff --git a/static/webfonts/fa-solid-900.woff2 b/static/webfonts/fa-solid-900.woff2 new file mode 100644 index 0000000..5c16cd3 Binary files /dev/null and b/static/webfonts/fa-solid-900.woff2 differ diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..f8e0b5f --- /dev/null +++ b/templates/index.html @@ -0,0 +1,224 @@ + + + + + + drawNET Generator | Integrated + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ +

+ + +

+ +

Asset Library

+ +

+ + + + + +

drawNET

+ Premium Edition +

+ +

+ + + + + +

+ +

+ LAYER: + Main Layer +

+ + +

+ + Settings +

+ +

+ + +

+ +

+ + + + + + + + + + + diff --git a/templates/studio.html b/templates/studio.html new file mode 100644 index 0000000..7355e97 --- /dev/null +++ b/templates/studio.html @@ -0,0 +1,93 @@ + + + + + + drawNET Studio | Asset Management + + + + + + + + +

+ + + Back to Designer + +

+ PACK ID + +

+ PACK NAME + +

+ PACK VENDOR + +

+ +

+ + + + + +

+ +

Waiting for sources...

+ + + +

+ + +

+ ${t('asset_library') || 'Asset Library'} +

${t('manage_packages') || 'Manage Packages'}

${t('rich_card')}

${t('about')} drawNET

${t('engine') || 'Engine'}

${t('identity') || 'Identity'}

${t('editor_behavior') || 'Editor Behavior'}

${t('language') || 'Language'}

${t('license_management')}

${status.valid ? status.data.level : t('trial_community')}

${t('activate_license_title')}

${t('canvas_background') || 'Workspace'}

${t('basic_info')}

${t('asset_attachment')}

${t('studio_asset_detail')}

${t('bulk_edit').replace('{count}', count)}

${t('help_center') || 'drawNET Help Center'}

${title}

Properties