feat: [planning-design] 메뉴/캔버스 경계 드래그 리사이즈 기능 추가

This commit is contained in:
김보곤
2026-03-08 00:20:42 +09:00
parent 08cc866afa
commit 20e5ab784e

View File

@@ -562,9 +562,14 @@
/* Left Menu Panel */
.sb-menu-panel {
width: 160px; flex-shrink: 0; border-right: 1px solid #e2e8f0;
flex-shrink: 0; border-right: none;
padding: 12px 0; font-size: 11px; overflow-y: auto; background: #f8fafc;
}
.sb-menu-resizer {
width: 5px; flex-shrink: 0; cursor: col-resize; background: #e2e8f0;
transition: background .15s;
}
.sb-menu-resizer:hover, .sb-menu-resizer.active { background: #818cf8; }
.sb-menu-section { font-size: 8px; font-weight: 700; color: #94a3b8; padding: 4px 12px; text-transform: uppercase; }
.sb-menu-item {
padding: 5px 12px 5px 16px; color: #64748b; cursor: default;
@@ -1484,9 +1489,11 @@
</div>
</div>
<div class="sb-page-body">
<div class="sb-page-body"
@mousemove.window="if(_sbMenuResize){ sbMenuWidth = Math.max(80, Math.min(400, _sbMenuResize.startW + $event.clientX - _sbMenuResize.startX)); }"
@mouseup.window="if(_sbMenuResize){ _sbMenuResize = null; document.querySelector('.sb-menu-resizer.active')?.classList.remove('active'); }">
{{-- Left Menu --}}
<div class="sb-menu-panel">
<div class="sb-menu-panel" :style="'width:' + sbMenuWidth + 'px'">
<div class="sb-menu-logo" x-text="sb.docInfo.projectName || 'LOGO'"></div>
<div class="sb-menu-section">ERP 메뉴</div>
<template x-for="menu in sb.menuTree" :key="menu.name">
@@ -1501,6 +1508,10 @@
</template>
</div>
{{-- Menu / Content Resizer --}}
<div class="sb-menu-resizer"
@mousedown.prevent="_sbMenuResize = { startX: $event.clientX, startW: sbMenuWidth }; $event.target.classList.add('active')"></div>
{{-- Content + Description --}}
<div class="sb-content-area">
{{-- Block Editor Area (moved toolbar to sb-topbar above) --}}
@@ -1974,6 +1985,8 @@ function planningCanvas() {
_sbDrag: null, // { blk, startX, startY, origX, origY }
_sbResize: null, // { blk, dir, startX, startY, origW, origH }
_sbClipboard: null, // copied block data
sbMenuWidth: 160,
_sbMenuResize: null,
_sbHistory: [],
_sbHistoryIdx: -1,
_sbHistoryPaused: false,