Update app.py

app.py

@@ -45,7 +45,7 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 .media-item-dur{{position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.7);padding:1px 3px;border-radius:2px;font-size:8px;color:#fff}}
 .preview-area{{flex:1;display:flex;flex-direction:column;background:#1a1a1a;margin:6px;border-radius:8px;overflow:hidden}}
 .preview-box{{flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}}
-#previewCanvas{{background:#000;box-shadow:0 0 20px rgba(0,0,0,0.5)}}
+#previewCanvas{{background:#000;box-shadow:0 0 20px rgba(0,0,0,0.5);cursor:default}}
 .controls{{height:45px;background:#222;display:flex;align-items:center;justify-content:center;gap:6px}}
 .ctrl-btn{{width:28px;height:28px;border:none;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;font-size:12px}}
 .ctrl-btn:hover{{background:rgba(255,255,255,0.2)}}
@@ -267,6 +267,88 @@ S.canvas=document.getElementById('previewCanvas');
 S.ctx=S.canvas.getContext('2d');
 updateCanvasSize();
 drawPlaceholder();
+setupCanvasDrag();
+}}
+
+// 캔버스에서 텍스트 드래그 설정
+function setupCanvasDrag(){{
+var canvas=S.canvas;
+var dragging=null;
+var dragOffsetX=0,dragOffsetY=0;
+
+canvas.addEventListener('mousedown',function(e){{
+var rect=canvas.getBoundingClientRect();
+var scaleX=canvas.width/rect.width;
+var scaleY=canvas.height/rect.height;
+var mx=(e.clientX-rect.left)*scaleX;
+var my=(e.clientY-rect.top)*scaleY;
+
+// 현재 시간의 텍스트 클립 중 클릭된 것 찾기
+var textClips=getTextClipsAt(S.time);
+for(var i=textClips.length-1;i>=0;i--){{
+var tc=textClips[i];
+if(tc._bounds){{
+var b=tc._bounds;
+if(mx>=b.x&&mx<=b.x+b.w&&my>=b.y&&my<=b.y+b.h){{
+dragging=tc;
+selClip(tc.id);
+var size=S.ratioSizes[S.ratio];
+dragOffsetX=mx-size.pw*tc.posX;
+dragOffsetY=my-size.ph*tc.posY;
+canvas.style.cursor='move';
+e.preventDefault();
+return;
+}}
+}}
+}}
+}});
+
+canvas.addEventListener('mousemove',function(e){{
+var rect=canvas.getBoundingClientRect();
+var scaleX=canvas.width/rect.width;
+var scaleY=canvas.height/rect.height;
+var mx=(e.clientX-rect.left)*scaleX;
+var my=(e.clientY-rect.top)*scaleY;
+
+if(dragging){{
+var size=S.ratioSizes[S.ratio];
+dragging.posX=Math.max(0.1,Math.min(0.9,(mx-dragOffsetX)/size.pw));
+dragging.posY=Math.max(0.1,Math.min(0.9,(my-dragOffsetY)/size.ph));
+drawFrame();
+}}else{{
+// 호버 커서 변경
+var textClips=getTextClipsAt(S.time);
+var onText=false;
+for(var i=0;i<textClips.length;i++){{
+var tc=textClips[i];
+if(tc._bounds){{
+var b=tc._bounds;
+if(mx>=b.x&&mx<=b.x+b.w&&my>=b.y&&my<=b.y+b.h){{
+onText=true;
+break;
+}}
+}}
+}}
+canvas.style.cursor=onText?'move':'default';
+}}
+}});
+
+canvas.addEventListener('mouseup',function(){{
+if(dragging){{
+save();
+dragging=null;
+canvas.style.cursor='default';
+renderProps();
+}}
+}});
+
+canvas.addEventListener('mouseleave',function(){{
+if(dragging){{
+save();
+dragging=null;
+canvas.style.cursor='default';
+}}
+}});
 }}
 
 function updateCanvasSize(){{
@@ -528,6 +610,8 @@ if(c.type==='text'){{
 box.innerHTML='<div class="prop-group"><div class="prop-label">텍스트</div><input class="prop-input" value="'+c.text+'" onchange="setProp(\\'text\\',this.value)"></div>'+
 '<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
 '<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
+'<div class="prop-group"><div class="prop-label">위치 X ('+Math.round((c.posX||0.5)*100)+'%)</div><input class="prop-input" type="range" min="0.05" max="0.95" step="0.01" value="'+(c.posX||0.5)+'" oninput="setProp(\\'posX\\',parseFloat(this.value))"></div>'+
+'<div class="prop-group"><div class="prop-label">위치 Y ('+Math.round((c.posY||0.85)*100)+'%)</div><input class="prop-input" type="range" min="0.05" max="0.95" step="0.01" value="'+(c.posY||0.85)+'" oninput="setProp(\\'posY\\',parseFloat(this.value))"></div>'+
 '<div class="prop-group"><div class="prop-label">글자 크기</div><select class="prop-input" onchange="setProp(\\'fontSize\\',parseInt(this.value))">'+
 '<option value="24"'+(c.fontSize===24?' selected':'')+'>작게</option>'+
 '<option value="36"'+(c.fontSize===36?' selected':'')+'>보통</option>'+
@@ -820,7 +904,9 @@ text:text,
 fontSize:parseInt(document.getElementById('textSize').value),
 fontColor:document.getElementById('textColor').value,
 bgStyle:document.getElementById('textBgStyle').value,
-bgColor:document.getElementById('textBgColor').value
+bgColor:document.getElementById('textBgColor').value,
+posX:0.5,  // 0~1 비율 (가운데)
+posY:0.85  // 0~1 비율 (하단)
 }});
 closeTextModal();
 renderTL();
@@ -843,6 +929,8 @@ var fontSize=clip.fontSize||48;
 var fontColor=clip.fontColor||'#ffffff';
 var bgStyle=clip.bgStyle||'none';
 var bgColor=clip.bgColor||'#000000';
+var posX=clip.posX!==undefined?clip.posX:0.5;
+var posY=clip.posY!==undefined?clip.posY:0.85;
 
 ctx.font='bold '+fontSize+'px -apple-system,BlinkMacSystemFont,sans-serif';
 ctx.textAlign='center';
@@ -851,8 +939,16 @@ ctx.textBaseline='middle';
 var metrics=ctx.measureText(text);
 var textW=metrics.width;
 var textH=fontSize;
-var x=dw/2;
-var y=dh-fontSize-30; // 하단에 배치
+var x=dw*posX;
+var y=dh*posY;
+
+// 텍스트 영역 저장 (클릭 감지용)
+clip._bounds={{
+x:x-textW/2-fontSize*0.3,
+y:y-textH/2-fontSize*0.15,
+w:textW+fontSize*0.6,
+h:textH+fontSize*0.3
+}};
 
 if(bgStyle!=='none'){{
 var padding=fontSize*0.3;
@@ -861,7 +957,7 @@ var bgY=y-textH/2-padding/2;
 var bgW=textW+padding*2;
 var bgH=textH+padding;
 
-ctx.fillStyle=bgColor+'cc'; // 약간 투명
+ctx.fillStyle=bgColor+'cc';
 if(bgStyle==='rounded'){{
 ctx.beginPath();
 ctx.roundRect(bgX,bgY,bgW,bgH,10);
@@ -878,6 +974,15 @@ ctx.fillText(text,x+2,y+2);
 // 텍스트
 ctx.fillStyle=fontColor;
 ctx.fillText(text,x,y);
+
+// 선택된 텍스트면 테두리 표시
+if(S.sel===clip.id){{
+ctx.strokeStyle='#6366f1';
+ctx.lineWidth=2;
+ctx.setLineDash([5,3]);
+ctx.strokeRect(clip._bounds.x,clip._bounds.y,clip._bounds.w,clip._bounds.h);
+ctx.setLineDash([]);
+}}
 }}
 function setZoom(v){{S.zoom=parseFloat(v);renderTL();updateHead()}}
 function tlClick(e){{
@@ -1115,10 +1220,12 @@ ctx.drawImage(frameCanvas,fx,fy,fw,fh);
 // 내보내기용 텍스트 렌더링
 function drawTextExport(ctx,clip,dw,dh){{
 var text=clip.text;
-var fontSize=Math.round(clip.fontSize*(dw/640))||72; // 내보내기 해상도에 맞게 스케일
+var fontSize=Math.round(clip.fontSize*(dw/640))||72;
 var fontColor=clip.fontColor||'#ffffff';
 var bgStyle=clip.bgStyle||'none';
 var bgColor=clip.bgColor||'#000000';
+var posX=clip.posX!==undefined?clip.posX:0.5;
+var posY=clip.posY!==undefined?clip.posY:0.85;
 
 ctx.font='bold '+fontSize+'px -apple-system,BlinkMacSystemFont,sans-serif';
 ctx.textAlign='center';
@@ -1127,8 +1234,8 @@ ctx.textBaseline='middle';
 var metrics=ctx.measureText(text);
 var textW=metrics.width;
 var textH=fontSize;
-var x=dw/2;
-var y=dh-fontSize-50; // 하단에 배치
+var x=dw*posX;
+var y=dh*posY;
 
 if(bgStyle!=='none'){{
 var padding=fontSize*0.3;