-
+
@@ -1997,7 +2033,10 @@ function planningCanvas() {
_sbResize: null, // { blk, dir, startX, startY, origW, origH }
_sbClipboard: null, // copied block data
sbMenuWidth: 160,
+ sbDescHeight: 200,
+ sbMarkerNum: '01',
_sbMenuResize: null,
+ _sbDescResize: null,
sbMultiSelected: [], // ๋ค์ค ์ ํ ๋ธ๋ก id ๋ฐฐ์ด
_sbLasso: null, // { startX, startY, rx, ry, rw, rh }
_sbLassoDone: false, // ์ฌ๊ฐ๋ฏธ ์๋ฃ ์งํ click.self ๋ฐฉ์ง ํ๋๊ทธ
@@ -2956,8 +2995,8 @@ function planningCanvas() {
const maxBottom = Math.max(...page.blocks.map(b => (b.y || 0) + (b.h || 40)));
autoY = maxBottom + 12;
}
- const defW = { heading: 400, heading2: 350, text: 340, divider: 400, table: 500, card: 300, code: 400, badges: 350, todo: 300, image: 400 };
- const defH = { heading: 40, heading2: 36, text: 50, divider: 20, table: 140, card: 90, button: 50, input: 70, select: 70, callout: 60, code: 80, badges: 50, todo: 80, image: 200 };
+ const defW = { heading: 400, heading2: 350, text: 340, divider: 400, table: 500, card: 300, code: 400, badges: 350, todo: 300, image: 400, marker: 32 };
+ const defH = { heading: 40, heading2: 36, text: 50, divider: 20, table: 140, card: 90, button: 50, input: 70, select: 70, callout: 60, code: 80, badges: 50, todo: 80, image: 200, marker: 32 };
const base = { id, type, content: '', x: 16, y: autoY, w: defW[type] || 240, h: defH[type] || 40 };
switch (type) {
case 'heading': return { ...base };
@@ -2981,6 +3020,7 @@ function planningCanvas() {
{ text: 'ํญ๋ชฉ 2', checked: false },
]};
case 'image': return { ...base, src: '' };
+ case 'marker': return { ...base, content: base.content || '01' };
default: return base;
}
},
@@ -2996,6 +3036,42 @@ function planningCanvas() {
this.autoSave();
},
+ sbAddMarkerBlock() {
+ const num = this.sbMarkerNum || '01';
+ const page = this.sbCurrentPage;
+ if (!page) return;
+ if (!page.blocks) page.blocks = [];
+ this.sbPushHistory();
+ const blk = this.sbNewBlock('marker');
+ blk.content = num;
+ page.blocks.push(blk);
+ this.sbSelectedBlock = blk.id;
+ // ๋ค์ ๋ฒํธ ์๋ ์ฆ๊ฐ
+ const n = parseInt(num, 10);
+ if (!isNaN(n)) this.sbMarkerNum = String(n + 1).padStart(2, '0');
+ this.autoSave();
+ },
+
+ sbDropMarker(e) {
+ const data = e.dataTransfer.getData('text/plain');
+ if (!data.startsWith('marker:')) return;
+ const num = data.slice(7);
+ const page = this.sbCurrentPage;
+ if (!page) return;
+ if (!page.blocks) page.blocks = [];
+ this.sbPushHistory();
+ const rect = this.$refs.sbCanvas.getBoundingClientRect();
+ const x = e.clientX - rect.left + this.$refs.sbCanvas.scrollLeft;
+ const y = e.clientY - rect.top + this.$refs.sbCanvas.scrollTop;
+ const blk = this.sbNewBlock('marker');
+ blk.content = num;
+ blk.x = Math.max(0, x - 14);
+ blk.y = Math.max(0, y - 14);
+ page.blocks.push(blk);
+ this.sbSelectedBlock = blk.id;
+ this.autoSave();
+ },
+
sbAddBlockAfter(idx, type) {
const page = this.sbCurrentPage;
if (!page || !page.blocks) return;
@@ -3351,8 +3427,8 @@ function planningCanvas() {
if (page.blocks.length > 0) {
curY = Math.max(...page.blocks.map(b => (b.y || 0) + (b.h || 40))) + 16;
}
- const defW = { heading: 400, heading2: 350, text: 340, divider: 400, table: 500, card: 300, code: 400, badges: 350, todo: 300, image: 400 };
- const defH = { heading: 40, heading2: 36, text: 50, divider: 20, table: 140, card: 90, button: 50, input: 70, select: 70, callout: 60, code: 80, badges: 50, todo: 80, image: 200 };
+ const defW = { heading: 400, heading2: 350, text: 340, divider: 400, table: 500, card: 300, code: 400, badges: 350, todo: 300, image: 400, marker: 32 };
+ const defH = { heading: 40, heading2: 36, text: 50, divider: 20, table: 140, card: 90, button: 50, input: 70, select: 70, callout: 60, code: 80, badges: 50, todo: 80, image: 200, marker: 32 };
blocks.forEach(blk => {
blk.id = 'blk_' + Date.now() + '_' + Math.random().toString(36).slice(2, 5);
if (blk.x === undefined) blk.x = 16;
@@ -3602,6 +3678,7 @@ function planningCanvas() {
return t + '
';
}
case 'image': return blk.src ? '