aidev
359 lines
16 KiB
TypeScript
359 lines
16 KiB
TypeScript
/**
|
||
* ChartMagnifier
|
||
*
|
||
* 차트 위에 떠 있는 돋보기(루페) 오버레이.
|
||
* - 헤더 드래그로 이동
|
||
* - 8방향 핸들로 리사이즈
|
||
* - 내부 canvas 에 차트 픽셀을 확대 복사 (rAF 루프)
|
||
* - X/Y 동시 줌 배율 조절
|
||
* - Y축 전용 줌(Y-Zoom): 수직 방향만 추가 확대 → 미세한 Y값 변화도 파악 가능
|
||
* - LIVE 지시등: 캔버스 픽셀 변화 감지 시 점멸
|
||
*/
|
||
import React, { useRef, useEffect, useCallback, useState } from 'react';
|
||
|
||
interface ChartMagnifierProps {
|
||
/** LWC canvas 들이 들어있는 chart-container div */
|
||
containerRef: React.RefObject<HTMLDivElement>;
|
||
/** position:relative 부모 (tv-chart-wrap) — 위치 기준점 */
|
||
wrapperRef: React.RefObject<HTMLDivElement>;
|
||
enabled: boolean;
|
||
onClose: () => void;
|
||
}
|
||
|
||
const HEADER_H = 30;
|
||
const MIN_W = 180;
|
||
const MIN_H = 120 + HEADER_H;
|
||
const INIT_W = 320;
|
||
const INIT_H = 240 + HEADER_H;
|
||
|
||
const XY_STEPS: number[] = [1.5, 2, 2.5, 3, 4, 5, 6, 8];
|
||
const Y_STEPS: number[] = [1, 1.5, 2, 3, 5, 8, 12];
|
||
|
||
type ResizeDir = 'nw'|'n'|'ne'|'e'|'se'|'s'|'sw'|'w';
|
||
|
||
const HANDLES: { id: ResizeDir; cursor: string; style: React.CSSProperties }[] = [
|
||
{ id:'nw', cursor:'nw-resize', style:{ top:-5, left:-5 } },
|
||
{ id:'n', cursor:'n-resize', style:{ top:-5, left:'50%', transform:'translateX(-50%)' } },
|
||
{ id:'ne', cursor:'ne-resize', style:{ top:-5, right:-5 } },
|
||
{ id:'e', cursor:'e-resize', style:{ top:'50%', right:-5, transform:'translateY(-50%)' } },
|
||
{ id:'se', cursor:'se-resize', style:{ bottom:-5, right:-5 } },
|
||
{ id:'s', cursor:'s-resize', style:{ bottom:-5, left:'50%',transform:'translateX(-50%)' } },
|
||
{ id:'sw', cursor:'sw-resize', style:{ bottom:-5, left:-5 } },
|
||
{ id:'w', cursor:'w-resize', style:{ top:'50%', left:-5, transform:'translateY(-50%)' } },
|
||
];
|
||
|
||
const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
|
||
containerRef, wrapperRef, enabled, onClose,
|
||
}) => {
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const tempCvRef = useRef<HTMLCanvasElement | null>(null); // Y-Zoom 용 임시 캔버스
|
||
const rafRef = useRef<number>(0);
|
||
|
||
// ── position / size / xy-zoom / y-zoom ────────────────────────────────────
|
||
// position: fixed 기준 — 뷰포트 좌표 (wrapper 밖으로도 이동 가능)
|
||
const initPos = useCallback(() => {
|
||
const wr = wrapperRef.current?.getBoundingClientRect();
|
||
return wr ? { x: wr.left + 40, y: wr.top + 40 } : { x: 80, y: 80 };
|
||
}, [wrapperRef]);
|
||
|
||
const [pos, setPos] = useState(() => ({ x: 80, y: 80 }));
|
||
const [size, setSize] = useState({ w: INIT_W, h: INIT_H });
|
||
const [xyZoom, setXyZoom] = useState(2.5);
|
||
const [yZoom, setYZoom] = useState(1);
|
||
/** LIVE 지시등: true = 직전 프레임 대비 픽셀 변화 있음 */
|
||
const [isLive, setIsLive] = useState(false);
|
||
|
||
const posRef = useRef({ x: 80, y: 80 });
|
||
const sizeRef = useRef({ w: INIT_W, h: INIT_H });
|
||
const xyZoomRef = useRef(2.5);
|
||
const yZoomRef = useRef(1);
|
||
|
||
// 픽셀 변화 감지용: 이전 프레임의 중앙 수직 라인 픽셀 데이터
|
||
const prevRowRef = useRef<Uint8ClampedArray | null>(null);
|
||
const liveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
|
||
// ── rAF: 차트 캔버스 픽셀을 확대하여 magnifier canvas 에 복사 ──────────────
|
||
const renderFrame = useCallback(() => {
|
||
const canvas = canvasRef.current;
|
||
const container = containerRef.current;
|
||
const wrapper = wrapperRef.current;
|
||
if (!canvas || !container || !wrapper) return;
|
||
const ctx = canvas.getContext('2d', { willReadFrequently: true });
|
||
if (!ctx) return;
|
||
|
||
const { x, y } = posRef.current;
|
||
const { w, h } = sizeRef.current;
|
||
const zm = xyZoomRef.current;
|
||
const yz = yZoomRef.current;
|
||
const canvasH = h - HEADER_H;
|
||
const dpr = window.devicePixelRatio || 1;
|
||
|
||
// canvas 해상도 유지
|
||
const tW = Math.round(w * dpr);
|
||
const tH = Math.round(canvasH * dpr);
|
||
if (canvas.width !== tW || canvas.height !== tH) {
|
||
canvas.width = tW;
|
||
canvas.height = tH;
|
||
canvas.style.width = w + 'px';
|
||
canvas.style.height = canvasH + 'px';
|
||
}
|
||
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// 샘플링 중심 — position:fixed 이므로 pos가 이미 뷰포트 절대 좌표
|
||
const centerX = x + w / 2;
|
||
const centerY = y + HEADER_H + canvasH / 2;
|
||
|
||
// 원본 영역 (xy-zoom 적용)
|
||
const srcW = w / zm;
|
||
const srcH = canvasH / zm;
|
||
const srcL = centerX - srcW / 2;
|
||
const srcT = centerY - srcH / 2;
|
||
|
||
// position:fixed → pos 자체가 뷰포트 좌표이므로 wrapper 오프셋 불필요
|
||
const ssrcL = srcL;
|
||
const ssrcT = srcT;
|
||
|
||
// LWC 캔버스 레이어 순서대로 복사
|
||
const layers = Array.from(container.querySelectorAll<HTMLCanvasElement>('canvas'));
|
||
for (const lc of layers) {
|
||
const cRect = lc.getBoundingClientRect();
|
||
const csX = (ssrcL - cRect.left) * dpr;
|
||
const csY = (ssrcT - cRect.top ) * dpr;
|
||
const csW = srcW * dpr;
|
||
const csH = srcH * dpr;
|
||
const x0 = Math.max(0, csX);
|
||
const y0 = Math.max(0, csY);
|
||
const x1 = Math.min(lc.width, csX + csW);
|
||
const y1 = Math.min(lc.height, csY + csH);
|
||
if (x1 <= x0 || y1 <= y0) continue;
|
||
const dstX = ((x0 - csX) / csW) * canvas.width;
|
||
const dstY = ((y0 - csY) / csH) * canvas.height;
|
||
const dstW = ((x1 - x0) / csW) * canvas.width;
|
||
const dstH = ((y1 - y0) / csH) * canvas.height;
|
||
try { ctx.drawImage(lc, x0, y0, x1-x0, y1-y0, dstX, dstY, dstW, dstH); }
|
||
catch { /* cross-origin 무시 */ }
|
||
}
|
||
|
||
// ── Y-Zoom: 수직 방향 추가 확대 ───────────────────────────────────────────
|
||
// Y축의 미세한 움직임을 파악할 수 있도록 중앙 기준으로 수직만 재확대
|
||
if (yz > 1) {
|
||
// 임시 캔버스 초기화 (한 번만 생성)
|
||
let tmp = tempCvRef.current;
|
||
if (!tmp || tmp.width !== canvas.width || tmp.height !== canvas.height) {
|
||
tmp = document.createElement('canvas');
|
||
tmp.width = canvas.width;
|
||
tmp.height = canvas.height;
|
||
tempCvRef.current = tmp;
|
||
}
|
||
const tCtx = tmp.getContext('2d')!;
|
||
tCtx.clearRect(0, 0, tmp.width, tmp.height);
|
||
tCtx.drawImage(canvas, 0, 0);
|
||
|
||
// 중앙 ±(1/yz) 영역만 잘라 전체 높이로 늘림
|
||
const srcYH = Math.round(canvas.height / yz);
|
||
const srcYT = Math.round((canvas.height - srcYH) / 2);
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
ctx.drawImage(tmp, 0, srcYT, canvas.width, srcYH, 0, 0, canvas.width, canvas.height);
|
||
|
||
// Y-Zoom 배율 워터마크
|
||
ctx.fillStyle = 'rgba(255,200,50,0.6)';
|
||
ctx.font = `bold ${Math.round(10 * dpr)}px monospace`;
|
||
ctx.fillText(`Y×${yz}`, 4 * dpr, (canvasH - 4) * dpr);
|
||
}
|
||
|
||
// ── 테두리 ─────────────────────────────────────────────────────────────────
|
||
ctx.strokeStyle = 'rgba(255, 200, 50, 0.35)';
|
||
ctx.lineWidth = 1;
|
||
ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1);
|
||
|
||
// ── LIVE 감지: 중앙 세로 라인 픽셀 샘플링으로 변화 감지 ─────────────────
|
||
try {
|
||
const midX = Math.floor(canvas.width / 2);
|
||
const sample = ctx.getImageData(midX, 0, 1, canvas.height).data;
|
||
const prev = prevRowRef.current;
|
||
if (prev && prev.length === sample.length) {
|
||
let diff = 0;
|
||
for (let i = 0; i < sample.length; i += 4) {
|
||
diff += Math.abs(sample[i] - prev[i]);
|
||
diff += Math.abs(sample[i+1] - prev[i+1]);
|
||
diff += Math.abs(sample[i+2] - prev[i+2]);
|
||
}
|
||
if (diff > 30) { // 임계값: 미세 잡음 무시
|
||
setIsLive(true);
|
||
if (liveTimerRef.current) clearTimeout(liveTimerRef.current);
|
||
liveTimerRef.current = setTimeout(() => setIsLive(false), 600);
|
||
}
|
||
}
|
||
prevRowRef.current = new Uint8ClampedArray(sample);
|
||
} catch { /* getImageData 실패 무시 */ }
|
||
}, [containerRef, wrapperRef]);
|
||
|
||
// enabled 시 wrapper 위치 기준으로 초기 위치 설정
|
||
useEffect(() => {
|
||
if (!enabled) return;
|
||
const p = initPos();
|
||
posRef.current = p;
|
||
setPos(p);
|
||
}, [enabled, initPos]);
|
||
|
||
// rAF 루프
|
||
useEffect(() => {
|
||
if (!enabled) { cancelAnimationFrame(rafRef.current); return; }
|
||
const loop = () => { renderFrame(); rafRef.current = requestAnimationFrame(loop); };
|
||
rafRef.current = requestAnimationFrame(loop);
|
||
return () => cancelAnimationFrame(rafRef.current);
|
||
}, [enabled, renderFrame]);
|
||
|
||
// ── 드래그 (헤더) ─────────────────────────────────────────────────────────
|
||
const dragStart = useRef<{ mx: number; my: number; px: number; py: number } | null>(null);
|
||
|
||
const onHeaderDown = useCallback((e: React.PointerEvent) => {
|
||
e.preventDefault();
|
||
dragStart.current = { mx: e.clientX, my: e.clientY, px: posRef.current.x, py: posRef.current.y };
|
||
(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
|
||
}, []);
|
||
|
||
const onHeaderMove = useCallback((e: React.PointerEvent) => {
|
||
if (!dragStart.current) return;
|
||
const dx = e.clientX - dragStart.current.mx;
|
||
const dy = e.clientY - dragStart.current.my;
|
||
const vw = window.innerWidth;
|
||
const vh = window.innerHeight;
|
||
const { w, h } = sizeRef.current;
|
||
// 헤더가 항상 화면 안에 있도록 최소 마진만 유지 (위아래 자유 이동)
|
||
const np = {
|
||
x: Math.max(-(w - 60), Math.min(vw - 60, dragStart.current.px + dx)),
|
||
y: Math.max(-(h - HEADER_H), Math.min(vh - HEADER_H, dragStart.current.py + dy)),
|
||
};
|
||
posRef.current = np;
|
||
setPos(np);
|
||
}, []);
|
||
|
||
const onHeaderUp = useCallback(() => { dragStart.current = null; }, []);
|
||
|
||
// ── 리사이즈 핸들 ──────────────────────────────────────────────────────────
|
||
const resizeStart = useRef<{
|
||
dir: ResizeDir; mx: number; my: number;
|
||
px: number; py: number; pw: number; ph: number;
|
||
} | null>(null);
|
||
|
||
const onHandleDown = useCallback((e: React.PointerEvent, dir: ResizeDir) => {
|
||
e.preventDefault(); e.stopPropagation();
|
||
resizeStart.current = {
|
||
dir, mx: e.clientX, my: e.clientY,
|
||
px: posRef.current.x, py: posRef.current.y,
|
||
pw: sizeRef.current.w, ph: sizeRef.current.h,
|
||
};
|
||
(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
|
||
}, []);
|
||
|
||
const onHandleMove = useCallback((e: React.PointerEvent) => {
|
||
const rs = resizeStart.current; if (!rs) return;
|
||
const { dir, mx, my, px, py, pw, ph } = rs;
|
||
const dx = e.clientX - mx; const dy = e.clientY - my;
|
||
let nx = px, ny = py, nw = pw, nh = ph;
|
||
if (dir.includes('e')) { nw = Math.max(MIN_W, pw + dx); }
|
||
if (dir.includes('w')) { nw = Math.max(MIN_W, pw - dx); nx = px + pw - nw; }
|
||
if (dir.includes('s')) { nh = Math.max(MIN_H, ph + dy); }
|
||
if (dir.includes('n')) { nh = Math.max(MIN_H, ph - dy); ny = py + ph - nh; }
|
||
// 리사이즈 시 뷰포트 경계 안에서만 클램프 (헤더 마진 확보)
|
||
nx = Math.max(-(nw - 60), Math.min(window.innerWidth - 60, nx));
|
||
ny = Math.max(-(nh - HEADER_H), Math.min(window.innerHeight - HEADER_H, ny));
|
||
posRef.current = { x: nx, y: ny };
|
||
sizeRef.current = { w: nw, h: nh };
|
||
setPos ({ x: nx, y: ny });
|
||
setSize({ w: nw, h: nh });
|
||
}, [wrapperRef]);
|
||
|
||
const onHandleUp = useCallback(() => { resizeStart.current = null; }, []);
|
||
|
||
// ── XY-Zoom 조절 ──────────────────────────────────────────────────────────
|
||
const adjustXyZoom = useCallback((delta: number) => {
|
||
const cur = xyZoomRef.current;
|
||
const idx = XY_STEPS.findIndex(s => s >= cur - 0.01);
|
||
const next = XY_STEPS[Math.max(0, Math.min(XY_STEPS.length - 1, idx + delta))];
|
||
xyZoomRef.current = next; setXyZoom(next);
|
||
}, []);
|
||
|
||
// ── Y-Zoom 조절 ───────────────────────────────────────────────────────────
|
||
const adjustYZoom = useCallback((delta: number) => {
|
||
const cur = yZoomRef.current;
|
||
const idx = Y_STEPS.findIndex(s => s >= cur - 0.01);
|
||
const next = Y_STEPS[Math.max(0, Math.min(Y_STEPS.length - 1, idx + delta))];
|
||
yZoomRef.current = next; setYZoom(next);
|
||
}, []);
|
||
|
||
if (!enabled) return null;
|
||
|
||
return (
|
||
<div
|
||
className="chart-magnifier"
|
||
style={{ left: pos.x, top: pos.y, width: size.w, height: size.h }}
|
||
onPointerDown={onHeaderDown}
|
||
onPointerMove={onHeaderMove}
|
||
onPointerUp={onHeaderUp}
|
||
>
|
||
{/* ── 헤더 ──────────────────────────────────────────────── */}
|
||
<div
|
||
className="chart-magnifier-header"
|
||
>
|
||
{/* 아이콘 + 제목 */}
|
||
<svg className="chart-magnifier-icon" width="13" height="13" viewBox="0 0 13 13"
|
||
fill="none" stroke="currentColor" strokeWidth="1.8">
|
||
<circle cx="5.5" cy="5.5" r="4"/>
|
||
<line x1="8.8" y1="8.8" x2="12.5" y2="12.5"/>
|
||
<line x1="5.5" y1="3.5" x2="5.5" y2="7.5"/>
|
||
<line x1="3.5" y1="5.5" x2="7.5" y2="5.5"/>
|
||
</svg>
|
||
<span className="chart-magnifier-title">확대경</span>
|
||
|
||
{/* LIVE 지시등 */}
|
||
<span
|
||
className={`chart-magnifier-live${isLive ? ' live-on' : ''}`}
|
||
title="캔버스 실시간 갱신 감지"
|
||
>LIVE</span>
|
||
|
||
{/* XY Zoom 컨트롤 */}
|
||
<div className="chart-magnifier-zoom" title="X·Y 동시 확대">
|
||
<button className="chart-magnifier-zoom-btn" onPointerDown={e => e.stopPropagation()}
|
||
onClick={() => adjustXyZoom(-1)}>−</button>
|
||
<span className="chart-magnifier-zoom-val">{xyZoom}×</span>
|
||
<button className="chart-magnifier-zoom-btn" onPointerDown={e => e.stopPropagation()}
|
||
onClick={() => adjustXyZoom(1)}>+</button>
|
||
</div>
|
||
|
||
{/* Y-Zoom 컨트롤 */}
|
||
<div className="chart-magnifier-yzoom" title="Y축 전용 확대 (미세 변화 감지용)">
|
||
<button className="chart-magnifier-zoom-btn chart-magnifier-yzoom-btn"
|
||
onPointerDown={e => e.stopPropagation()} onClick={() => adjustYZoom(-1)}>−</button>
|
||
<span className="chart-magnifier-zoom-val">
|
||
<span style={{ fontSize: 9, opacity: 0.7 }}>Y</span>{yZoom}×
|
||
</span>
|
||
<button className="chart-magnifier-zoom-btn chart-magnifier-yzoom-btn"
|
||
onPointerDown={e => e.stopPropagation()} onClick={() => adjustYZoom(1)}>+</button>
|
||
</div>
|
||
|
||
{/* 닫기 */}
|
||
<button className="chart-magnifier-close" onPointerDown={e => e.stopPropagation()}
|
||
onClick={onClose} title="닫기">×</button>
|
||
</div>
|
||
|
||
{/* ── 확대 canvas ───────────────────────────────────────── */}
|
||
<canvas ref={canvasRef} className="chart-magnifier-canvas" />
|
||
|
||
{/* ── 리사이즈 핸들 (8방향) ─────────────────────────────── */}
|
||
{HANDLES.map(h => (
|
||
<div key={h.id} className="chart-magnifier-handle"
|
||
style={{ ...h.style, cursor: h.cursor, position: 'absolute', width: 10, height: 10 }}
|
||
onPointerDown={e => onHandleDown(e, h.id)}
|
||
onPointerMove={onHandleMove}
|
||
onPointerUp={onHandleUp}
|
||
/>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ChartMagnifier;
|