d03c7ed870
- 기초관리: 목록(13컬럼) + 폼(기본정보 + 케이스전용 + 절곡테이블 + 이미지) - 절곡품: 가이드레일/케이스/하단마감재 타입별 목록 + 폼 - 부품 추가(기초관리 검색 모달) + 삭제 + 수량/품명/재질 편집 - 절곡테이블 inline 편집 + 재질별 폭합 자동계산 - 작업지시서 레거시 포맷 인쇄 모달 - 원본수정 버튼 sam_item_id 직접 링크 - DB 메뉴 등록 (기초관리 + 절곡품 + 케이스 + 하단마감재)
69 lines
4.2 KiB
PHP
69 lines
4.2 KiB
PHP
{{-- Canvas Editor Modal (Fabric.js 기반) --}}
|
|
<dialog id="ce-dialog" class="rounded-lg shadow-2xl p-0 backdrop:bg-black/50" style="max-width:90vw; max-height:90vh; border:none;">
|
|
{{-- 헤더 --}}
|
|
<div class="flex items-center justify-between px-3 py-2 bg-gray-100 border-b">
|
|
<span class="text-sm font-bold text-gray-700">이미지 편집기</span>
|
|
<div class="flex gap-1">
|
|
<button type="button" id="ce-applyBtn" class="px-3 py-1 bg-green-600 text-white rounded text-xs hover:bg-green-700">적용</button>
|
|
<button type="button" id="ce-closeBtn" class="px-3 py-1 bg-gray-400 text-white rounded text-xs hover:bg-gray-500">닫기</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 도구 모음 --}}
|
|
<div class="flex items-center gap-1 px-3 py-2 bg-gray-50 border-b flex-wrap">
|
|
<button type="button" id="ce-polyBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="폴리라인">
|
|
<i class="ri-pen-nib-line"></i> Poly
|
|
</button>
|
|
<button type="button" id="ce-freeBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="자유선">
|
|
<i class="ri-brush-line"></i> Free
|
|
</button>
|
|
<button type="button" id="ce-lineBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="직선 (L키)">
|
|
<i class="ri-subtract-line"></i> Line
|
|
</button>
|
|
<button type="button" id="ce-textBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="문자입력">
|
|
<i class="ri-text"></i> Text
|
|
</button>
|
|
<button type="button" id="ce-eraserBtn" class="ce-tool-btn px-2 py-1 border border-yellow-400 rounded text-xs hover:bg-yellow-100" title="지우개">
|
|
<i class="ri-eraser-line"></i> Eraser
|
|
</button>
|
|
<button type="button" id="ce-selectBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="선택 (Delete로 삭제)">
|
|
<i class="ri-cursor-line"></i> Select
|
|
</button>
|
|
|
|
<span class="mx-1 text-gray-300">|</span>
|
|
|
|
<label class="flex items-center gap-1 text-xs cursor-pointer">
|
|
<input type="checkbox" id="ce-rightAngle" checked class="rounded border-gray-300">
|
|
직각고정
|
|
</label>
|
|
|
|
<span class="mx-1 text-gray-300">|</span>
|
|
|
|
<button type="button" id="ce-clearBtn" class="px-2 py-1 border border-red-300 text-red-600 rounded text-xs hover:bg-red-50">
|
|
전체지우기
|
|
</button>
|
|
</div>
|
|
|
|
{{-- 색상 + 지우개 크기 --}}
|
|
<div class="flex items-center gap-2 px-3 py-1.5 bg-gray-50 border-b">
|
|
<div id="ce-colors" class="flex gap-1">
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full ring-2 ring-offset-1 ring-gray-800" data-color="#000000" style="background:#000"></button>
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#ff0000" style="background:#f00"></button>
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#0000ff" style="background:#00f"></button>
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#00aa00" style="background:#0a0"></button>
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#ff8800" style="background:#f80"></button>
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#800080" style="background:#808"></button>
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#888888" style="background:#888"></button>
|
|
</div>
|
|
<span class="text-gray-300">|</span>
|
|
<label class="text-xs text-gray-500">지우개:</label>
|
|
<input type="range" id="ce-eraserRange" min="5" max="100" value="20" class="w-20 h-1">
|
|
<span id="ce-eraserSize" class="text-xs font-bold">20</span><span class="text-xs text-gray-400">px</span>
|
|
</div>
|
|
|
|
{{-- 캔버스 영역 --}}
|
|
<div id="ce-body" class="relative overflow-auto bg-white" style="max-height: calc(90vh - 130px);">
|
|
<canvas id="ce-canvas" width="400" height="300"></canvas>
|
|
</div>
|
|
</dialog>
|