Files
SheetMe/src/SheetMe.Designer/ViewModels/SelectionOverlayViewModel.cs
T
MsystechandClaude Fable 5 020595f8d4 사용성 2순위 — 있는 명령에 닿는 길을 낸다
1순위가 '틀린 것 고치기'였다면 여기는 <b>이미 있는 명령에 닿는 길</b>이다.
새 패널·새 화면 없이 커맨드·단축키·메뉴 층에서 끝난다.

## 선택 확장 4종 — 정렬 8종의 실효 사용률을 통째로 끌어올린다

정렬 6종·간격 4종·같은 크기가 다 있는데, 그 명령들이 전제하는 '올바른 선택'을
만들 수단이 없었다. 표 서식에서 가장 흔한 편집이 "이 행의 입력칸 8개를 조금 높이고
아래로 붙이자"인데, 그 8개를 고르는 길이 <b>Ctrl+클릭 8번뿐</b>이다.
마퀴는 교차 판정이라 행 띠를 스치는 것이 전부 딸려 온다 —
실측 787건에서 행 무리의 94.2%에 침입자가 있고 그 수가 중앙값 7개·p90 41개다.
즉 지금까지는 "드래그 → 딸려온 것 빼기"가 매번 앞에 붙었다.

주 선택 기준으로 같은 행/열/종류/크기인 <b>형제</b>를 선택에 더한다(Alt+1~4, 우클릭 메뉴 맨 위).
범위를 형제로 한 것은 정렬 명령이 쓰는 범위와 같아야 결과를 예측할 수 있어서다.

2px 오차를 허용한다. 정확히 같은 값만 묶으면 눈으로 맞춘 서식에서 <b>일부만</b> 잡히고,
8개 중 5개를 정렬해 놓고 나머지가 남은 것을 못 알아채는 것이 가장 나쁜 결과다.
격자 크기에 묶지 않았다 — 격자를 바꿨다고 선택 규칙이 달라지면 예측할 수 없다.
잠긴 것은 뺀다. 편집하려고 넓히는 선택인데 안 움직이는 것이 섞이면
정렬을 눌렀을 때 "왜 이건 그대로지"가 된다.

## 줌 단축키 — 커맨드는 처음부터 있었고 키만 없었다

8pt 글자를 확인하려 200% 로 올렸다가 전체 배치를 보려면, 캔버스에서 손을 떼고
<b>화면 맨 아래 가운데</b> 플로팅 바의 배율 버튼을 눌러 팝업을 열고 '화면 맞춤'을 골라야 했다.
확대·축소조차 Ctrl+휠뿐이라 트랙패드에서는 배율을 바꿀 키보드 수단이 아예 없었다.

Ctrl+0(100%) · Ctrl+1(화면 맞춤) · Ctrl+± 를 <b>창</b> InputBindings 에 건다.
캔버스 키 처리기에 두면 안 된다 — 그쪽은 포커스가 TextBox/ComboBox 면 통째로 비켜서므로
인스펙터 값을 고친 직후에 줌 키가 죽는다.

## Ctrl+방향키로 크기 — 위치에만 있던 미세 조정의 짝

입력칸 폭을 3px 늘리려면 오른쪽 인스펙터 W 칸으로 가서 숫자를 읽고 3 을 더해 입력했다 —
캔버스와 300px 떨어진 패널 사이를 마우스로 왕복한다. 마우스 핸들은 판정 반경이 화면 6px 이라
작은 컨트롤에서 3px 를 정확히 집기 어렵고, 스냅이 붙으면 원하는 값에 못 선다.

넛지와 같은 400ms 코얼레스를 쓴다. 선은 LineGeometry 를 태워 두께 축이 늘어나지 않게 막는다 —
허용하면 디자이너에만 두꺼운 선이 보이고 EMR 은 원래 두께로 그린다.

## 잠금·숨김을 캔버스에서, 그리고 잠긴 것을 보이게

배경 괘선 40개를 잠가 두고 그 위에서 라벨만 만지고 싶을 때, 지금은 좌측 패널을 레이어 탭으로
바꾸고 트리에서 40행을 찾아 13px 자물쇠를 40번 눌러야 했다. 마퀴로 40개를 잡아 놔도
한 번에 잠글 수단이 없었다. Ctrl+L / Ctrl+Shift+H 와 우클릭 메뉴를 붙인다.

<b>표시가 없던 것이 더 문제였다.</b> 숨김은 0.25 투명이라 티가 나는데 잠금은 아무 표시가 없어,
클릭도 드래그도 안 되는 이유가 화면에 없었다 — "왜 이것만 안 잡히지"만 남는다.
점선 테두리를 <b>오버레이 층</b>에 그린다. 종이 층(PageView)에 넣으면
db-render 게이트가 그것을 찍어 md5 가 깨진다 — 레거시와의 픽셀 동일성을 잠그는 게이트다.

메뉴 이름은 '선택 잠그기'로 한정했다. <b>해제는 캔버스에서 못 한다</b> —
히트 판정이 잠긴 것을 후보에서 빼므로 우클릭조차 닿지 않는다. 해제 경로는 레이어 패널이다.

## Ctrl+\ — 유일한 레이아웃 변경

좌 248 + 스플리터 10 + 우 300 = 558px 가 <b>항상</b> 점유된다. MinWidth 180/250 때문에
스플리터를 끝까지 밀어도 사라지지 않고, 보기 메뉴에도 항목이 없었다.
가로 용지를 120% 로만 올려도 캔버스에 가로 스크롤이 생기는데 '종이만 보기' 상태가 없다.

좌우를 <b>함께</b> 접는다. 개별 토글 두 개를 두지 않았다 — 목적이 하나라 키도 하나여야 손이 기억한다.
MinWidth 도 함께 0 으로 내려야 실제로 사라진다(Width=0 만으로는 최소폭이 이긴다).
펼친 폭은 따로 기억한다 — 접힌 0 을 사용자가 정한 폭으로 착각하면 다음에 못 되돌린다.
F4(인스펙터 진입)를 누르면 접힌 인스펙터를 먼저 편다.

레이아웃은 이것 말고 바꾸지 않았다. 좌 248 / 우 300 은 이미 측정된 값이고
(레이어 행 최소치, 인스펙터 X|Y 한 줄 최소치) 라벨 1개 선택 시 자주 쓰는 4종이
0 스크롤·0 클릭이다. 컨트롤 1,000개짜리 서식에서 트리와 속성을 동시에 봐야 하는 작업이라
떠 있는 패널로 바꾸면 겹침·재배치 비용만 생긴다.

## 판정

- 단위 시험 388
- edit-smoke 376건 전건 통과 (선택 확장 7건 · 크기 조절 2건 · 잠금 5건 추가)
- --db-render P062 md5 8d683835f5d81e7bb41c79071d6bf954 불변 (잠금 표시가 종이에 안 나온다는 증거)
- <b>--cleartype 은 이번에 판정 불가다</b> — 게이트가 스스로 "캡처 실패, 색 픽셀 0" 이라고 보고한다.
  이전 커밋에서 stash 로 되돌려 돌려도 같은 결과라 이 변경 탓이 아니다(환경 문제).
  화면 캡처가 되는 상태에서 다시 확인할 것.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-20 17:28:43 +09:00

377 lines
14 KiB
C#
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
using System.Collections.ObjectModel;
using System.Windows;
using SheetMe.Core.Layout;
namespace SheetMe.Designer.ViewModels;
/// <summary>
/// 오버레이 가이드선 1개 — 월드 좌표 <b>선분</b>(양끝).
///
/// 예전에는 위치 하나만 들고 화면 끝에서 끝까지(±100000) 그었다. 그러면 "무엇에 맞춘 것인지"가
/// 안 보인다 — 종이 밖 회색 배경까지 선이 뻗어 대비도 죽었다. 관련된 것들만 잇는다.
/// </summary>
public sealed class GuideLineInfo
{
public double X1 { get; init; }
public double Y1 { get; init; }
public double X2 { get; init; }
public double Y2 { get; init; }
/// <summary>수직선 여부 — 진단·테스트용 파생(뷰는 X1..Y2 만 쓴다)</summary>
public bool IsVertical => Math.Abs(X1 - X2) < 0.001;
/// <summary>정합 좌표 — 진단·테스트용 파생</summary>
public double Position => IsVertical ? X1 : Y1;
}
/// <summary>
/// 간격 균등 표시 1개 — 막대 하나와 양끝 갈고리 둘. 전부 월드 좌표.
/// 좌표를 여기서 다 구워 두는 것은 이 저장소 규약이다(<see cref="HandleInfo"/> 와 같다) —
/// XAML 에서는 산술을 할 수 없다.
/// </summary>
public sealed class SpacingMarkInfo
{
public double X1 { get; init; }
public double Y1 { get; init; }
public double X2 { get; init; }
public double Y2 { get; init; }
/// <summary>시작 쪽 갈고리</summary>
public double CapAX1 { get; init; }
public double CapAY1 { get; init; }
public double CapAX2 { get; init; }
public double CapAY2 { get; init; }
/// <summary>끝 쪽 갈고리</summary>
public double CapBX1 { get; init; }
public double CapBY1 { get; init; }
public double CapBX2 { get; init; }
public double CapBY2 { get; init; }
/// <summary>간격값 표시</summary>
public string Text { get; init; } = string.Empty;
public double TextX { get; init; }
public double TextY { get; init; }
}
/// <summary>잠긴 컨트롤 하나의 자리 — 월드 좌표. 오버레이가 점선 테두리로 그린다.</summary>
public sealed class LockMarkInfo
{
/// <summary>좌상단 X(월드)</summary>
public double X { get; init; }
/// <summary>좌상단 Y(월드)</summary>
public double Y { get; init; }
/// <summary>너비(월드)</summary>
public double W { get; init; }
/// <summary>높이(월드)</summary>
public double H { get; init; }
}
/// <summary>탭순서 배지 1개 — 월드 좌표(컨트롤 좌상단)</summary>
public sealed class TabBadgeInfo
{
/// <summary>배지 X(월드)</summary>
public double X { get; init; }
/// <summary>배지 Y(월드)</summary>
public double Y { get; init; }
/// <summary>표시 텍스트(순번 또는 "")</summary>
public string Text { get; init; } = string.Empty;
/// <summary>순번 지정 여부(지정=파랑, 미지정=회색)</summary>
public bool IsAssigned { get; init; }
}
/// <summary>선택 핸들 1개 — 월드 좌표(중심점)</summary>
public sealed class HandleInfo
{
/// <summary>핸들 인덱스(0=NW,1=N,2=NE,3=E,4=SE,5=S,6=SW,7=W)</summary>
public int Index { get; init; }
/// <summary>핸들 좌상단 X(월드)</summary>
public double X { get; init; }
/// <summary>핸들 좌상단 Y(월드)</summary>
public double Y { get; init; }
}
/// <summary>
/// 선택/마퀴/가이드 오버레이 표시 상태 — 전부 월드 좌표.
/// 오버레이 뷰는 이 상태를 그리기만 한다(입력 처리 없음).
/// </summary>
public sealed class SelectionOverlayViewModel : ViewModelBase
{
#region Member Fields
/// <summary>핸들 한 변 크기(논리 px)</summary>
public const double HandleSize = 8;
private bool hasSelection;
private double selX;
private double selY;
private double selW;
private double selH;
private bool showHandles;
private bool hasMarquee;
private double marX;
private double marY;
private double marW;
private double marH;
private double zoom = 1;
#endregion
#region Properties
/// <summary>선택 박스 표시 여부</summary>
public bool HasSelection { get => hasSelection; set => SetProperty(ref hasSelection, value); }
/// <summary>선택 박스 X(월드)</summary>
public double SelX { get => selX; set => SetProperty(ref selX, value); }
/// <summary>선택 박스 Y(월드)</summary>
public double SelY { get => selY; set => SetProperty(ref selY, value); }
/// <summary>선택 박스 너비</summary>
public double SelW { get => selW; set => SetProperty(ref selW, value); }
/// <summary>선택 박스 높이</summary>
public double SelH { get => selH; set => SetProperty(ref selH, value); }
/// <summary>리사이즈 핸들 표시 여부(잠금 선택 시 숨김)</summary>
public bool ShowHandles { get => showHandles; set => SetProperty(ref showHandles, value); }
/// <summary>핸들 8개(월드 좌표)</summary>
public ObservableCollection<HandleInfo> Handles { get; } = new();
/// <summary>마퀴 표시 여부</summary>
public bool HasMarquee { get => hasMarquee; set => SetProperty(ref hasMarquee, value); }
/// <summary>마퀴 X(월드)</summary>
public double MarX { get => marX; set => SetProperty(ref marX, value); }
/// <summary>마퀴 Y(월드)</summary>
public double MarY { get => marY; set => SetProperty(ref marY, value); }
/// <summary>마퀴 너비</summary>
public double MarW { get => marW; set => SetProperty(ref marW, value); }
/// <summary>마퀴 높이</summary>
public double MarH { get => marH; set => SetProperty(ref marH, value); }
/// <summary>정렬 가이드선 목록</summary>
public ObservableCollection<GuideLineInfo> Guides { get; } = new();
/// <summary>간격 균등 표시 목록</summary>
public ObservableCollection<SpacingMarkInfo> Spacings { get; } = new();
/// <summary>
/// 캔버스 줌 — 오버레이는 줌이 걸린 층에 얹혀 있어서, 선을 화면 1px 로 유지하려면
/// 두께에 이 역수를 걸어야 한다. 갈고리 길이도 같은 이유로 이걸 쓴다.
/// </summary>
public double Zoom
{
get => zoom;
set
{
if (SetProperty(ref zoom, value <= 0 ? 1 : value))
{
OnPropertyChanged(nameof(InverseZoom));
}
}
}
/// <summary>화면 1px 에 해당하는 월드 길이</summary>
public double InverseZoom => 1.0 / zoom;
/// <summary>탭순서 배지 목록(탭순서 편집 모드 전용)</summary>
public ObservableCollection<TabBadgeInfo> TabBadges { get; } = new();
/// <summary>
/// 잠긴 컨트롤의 테두리 — <b>편집 크롬</b>이라 종이에는 그려지지 않는다.
///
/// 이 층에 두는 이유가 있다. 종이 층(PageView)에 표시를 넣으면 <c>--db-render</c> 게이트가
/// 그것을 찍어 md5 가 깨진다 — 그 게이트는 레거시와 픽셀이 같다는 것을 잠그고 있다.
///
/// 표시가 필요한 이유: 숨김은 0.25 투명이라 티가 나는데 <b>잠금은 아무 표시가 없었다</b>.
/// 클릭도 드래그도 안 되는데 이유가 화면에 없으니 "왜 이것만 안 잡히지"만 남는다.
/// </summary>
public ObservableCollection<LockMarkInfo> LockMarks { get; } = new();
#endregion
#region Methods
/// <summary>선택 박스/핸들 갱신 — bbox 는 월드 좌표</summary>
public void UpdateSelection(Rect? bbox, bool handlesVisible)
{
if (bbox is null || bbox.Value.IsEmpty)
{
HasSelection = false;
ShowHandles = false;
Handles.Clear();
return;
}
var rect = bbox.Value;
HasSelection = true;
SelX = rect.X;
SelY = rect.Y;
SelW = rect.Width;
SelH = rect.Height;
ShowHandles = handlesVisible;
Handles.Clear();
if (!handlesVisible)
{
return;
}
var half = HandleSize / 2;
var positions = HandlePositions(rect);
for (var i = 0; i < positions.Length; i++)
{
Handles.Add(new HandleInfo { Index = i, X = positions[i].X - half, Y = positions[i].Y - half });
}
}
/// <summary>핸들 중심 좌표 8개(0=NW 시계방향)</summary>
public static Point[] HandlePositions(Rect rect) => new[]
{
new Point(rect.Left, rect.Top),
new Point(rect.Left + rect.Width / 2, rect.Top),
new Point(rect.Right, rect.Top),
new Point(rect.Right, rect.Top + rect.Height / 2),
new Point(rect.Right, rect.Bottom),
new Point(rect.Left + rect.Width / 2, rect.Bottom),
new Point(rect.Left, rect.Bottom),
new Point(rect.Left, rect.Top + rect.Height / 2),
};
/// <summary>마퀴 갱신 — null 이면 숨김</summary>
public void UpdateMarquee(Rect? rect)
{
if (rect is null)
{
HasMarquee = false;
return;
}
HasMarquee = true;
MarX = rect.Value.X;
MarY = rect.Value.Y;
MarW = rect.Value.Width;
MarH = rect.Value.Height;
}
/// <summary>가이드·간격 표시 지우기</summary>
public void ClearGuides()
{
if (Guides.Count > 0)
{
Guides.Clear();
}
if (Spacings.Count > 0)
{
Spacings.Clear();
}
}
/// <summary>
/// 스냅 결과를 표시형으로 — 계산은 <see cref="SheetMe.Core.Layout.SnapSolver"/> 가 끝냈고
/// 여기서는 그리기 좌표만 굽는다.
///
/// 내용이 이전과 같으면 컬렉션을 건드리지 않는다. 드래그는 프레임마다 들어오는데
/// 매번 Clear+Add 하면 ItemsControl 이 컨테이너를 통째로 다시 만든다.
/// </summary>
public void SetGuides(IReadOnlyList<SnapGuide> guides, IReadOnlyList<SpacingMark> spacings)
{
if (!SameGuides(guides))
{
Guides.Clear();
foreach (var guide in guides)
{
Guides.Add(guide.IsVertical
? new GuideLineInfo { X1 = guide.Position, X2 = guide.Position, Y1 = guide.Start, Y2 = guide.End }
: new GuideLineInfo { Y1 = guide.Position, Y2 = guide.Position, X1 = guide.Start, X2 = guide.End });
}
}
if (SameSpacings(spacings))
{
return;
}
Spacings.Clear();
// 갈고리는 화면 4px — 줌이 걸린 층이라 월드 길이로 환산해 굽는다
var cap = 4 * InverseZoom;
foreach (var mark in spacings)
{
var mid = (mark.Start + mark.End) / 2;
var text = FormatGap(mark.Gap);
// 칩은 좌상단 기준으로 놓이므로 중심 보정을 여기서 넣는다(뷰 설명 참조).
// 폭은 글꼴을 재지 않고 글자 수로 어림한다 — 1~4자짜리 숫자라 오차가 눈에 안 띈다.
var halfWidth = (4 + 3.4 * text.Length) * InverseZoom;
var halfHeight = 7 * InverseZoom;
Spacings.Add(mark.IsHorizontal
? new SpacingMarkInfo
{
X1 = mark.Start, Y1 = mark.Cross, X2 = mark.End, Y2 = mark.Cross,
CapAX1 = mark.Start, CapAY1 = mark.Cross - cap, CapAX2 = mark.Start, CapAY2 = mark.Cross + cap,
CapBX1 = mark.End, CapBY1 = mark.Cross - cap, CapBX2 = mark.End, CapBY2 = mark.Cross + cap,
Text = text, TextX = mid - halfWidth, TextY = mark.Cross - halfHeight,
}
: new SpacingMarkInfo
{
X1 = mark.Cross, Y1 = mark.Start, X2 = mark.Cross, Y2 = mark.End,
CapAX1 = mark.Cross - cap, CapAY1 = mark.Start, CapAX2 = mark.Cross + cap, CapAY2 = mark.Start,
CapBX1 = mark.Cross - cap, CapBY1 = mark.End, CapBX2 = mark.Cross + cap, CapBY2 = mark.End,
Text = text, TextX = mark.Cross - halfWidth, TextY = mid - halfHeight,
});
}
}
private static string FormatGap(double gap) => $"{Math.Round(gap):0}";
private bool SameGuides(IReadOnlyList<SnapGuide> guides)
{
if (Guides.Count != guides.Count)
{
return false;
}
for (var i = 0; i < guides.Count; i++)
{
var a = Guides[i];
var b = guides[i];
var x1 = b.IsVertical ? b.Position : b.Start;
var y1 = b.IsVertical ? b.Start : b.Position;
var x2 = b.IsVertical ? b.Position : b.End;
var y2 = b.IsVertical ? b.End : b.Position;
if (Math.Abs(a.X1 - x1) > 0.001 || Math.Abs(a.Y1 - y1) > 0.001
|| Math.Abs(a.X2 - x2) > 0.001 || Math.Abs(a.Y2 - y2) > 0.001)
{
return false;
}
}
return true;
}
private bool SameSpacings(IReadOnlyList<SpacingMark> spacings)
{
if (Spacings.Count != spacings.Count)
{
return false;
}
for (var i = 0; i < spacings.Count; i++)
{
var a = Spacings[i];
var b = spacings[i];
var x1 = b.IsHorizontal ? b.Start : b.Cross;
var y1 = b.IsHorizontal ? b.Cross : b.Start;
if (Math.Abs(a.X1 - x1) > 0.001 || Math.Abs(a.Y1 - y1) > 0.001)
{
return false;
}
}
return true;
}
#endregion
}