fix(UI): 布局边界按尺寸自适应 + 修复拖滚动条的绘制残留与浮层层级
## 1. 边界描边按元素尺寸自适应(修复"小元素变成粗描边")
旧规则四角固定 3-4px:对 15px 的复选框来说包角占短边 20%,看起来就是一整圈粗边框。
新规则全部以**短边**为基准:
- 四边固定 1 设备像素;
- 包角粗细 = min(基础 4/3, 短边/10),再夹到 [1, 短边/4];
- 包角长度 = min(14, 短边/3),且不小于包角粗细;
- 短边 <= 12 只画四个 L 形角标记、**不画边**(一圈连续描边会让小方框显得"被框住");
- 短边 <= 5 完全不画(再画就盖住元素本身);
- 内缩只用于「层级 > 0 且短边 >= 10」,否则小元素会被缩没。
同时**删除文字标签**(含 UiDebugPaintStyle):黑底白字在小元素上必糊成一片,体积也省约 1.5KB。
## 2. 拖网格滚动条时的"大量绘制残留":三个独立成因
R1. PlotView::CollectDebugBoxes 读了 m_decorRects —— 那是**装饰层位图缓存**的登记矩形,
坐标处在位图/图层坐标系(带负 Y、超出绘图区),于是出现 (472,-27 1213x101) 这类
**横跨工具栏的幽灵巨框**。改为只用 LaneBadgeRect 与 m_legendHits(屏幕坐标)。
R2. Paint 的三条快路径(静态场景贴图 / 宽基底贴图 / 样式补丁)只重画**变化的部分**,
而调试边框是画在整个窗口上的叠加内容 ⇒ 上一帧的边框残留在未被重画的像素上,
直到松开鼠标走整幅重绘才消失。
新增 PlotView::SetForceFullRepaint(bool):开启调试叠加层时禁用全部快路径。
R3. 组件内元素可能落在自己地盘之外(滚出可视区的 lane.rect 的 Y 为负),不裁剪就画到
工具栏/标签栏上。box 增加 clip:宿主按组件 Area() 设置,Add() 跳过无交集、
绘制时与 clip 求交。
另外把 Render 的 fullChrome 并入 m_showLayoutBounds,装饰区也保证完整一帧。
## 3. 层级:排序 + 挖洞(修复二级菜单被下层边界覆盖)
- UiDebugBoxList::PushLayer() + 按 (layer, depth) 稳定排序:后收集的内容压住先收集的。
- 但仅靠排序不够:调试线画在所有内容之后,下层组件的线仍会显示在不透明菜单上面。
新增 AddOccluder():菜单/拾色器把本体登记为遮挡矩形,绘制**更低层**的 box 时用
Region::Exclude 挖洞。实测菜单区与子菜单区的琥珀/绿色像素均为 0。
- 浮层**不设** clip = 本体矩形:二级子菜单会展开到本体之外,设裁剪会把它整个裁掉。
## 4. 验证
- make release / make debug 零 error 零 warning;TargetCheck.exe 906,752 B(885.5 KiB < 900 KiB)。
- 新增 .preflight/lbresid(MF4-Record.MF4 / 283 网格 / 拖滚动条)**5/5**:
toolbar-unchanged-while-scrolling、repaint-same-state-is-identical、
toolbar-restored-by-full-repaint、residual-never-above-plot-area、later-layer-wins-over-earlier。
- 新增 .preflight/lbzorder **4/4**:菜单与二级子菜单区内下层颜色像素 = 0。
- 回归:.preflight/lbcheck 21/21、Tools/uicheck 69/69、
Tools/rendercheck「工具栏带以下」区域哈希 8/8 与上一轮逐一相同 + FUNC 7/7。
注:判断"是否有绘制残留"不能用"拖拽帧 vs 松开后一帧"——两者图层预热进度不同会产生
几十万像素的**合法**差异;正确判据是**同一状态连续两帧必须逐像素相同**。
## 5. 文档
Documents/UI_Refactor_Plan.md / UI_Refactor_Progress.md / UI_Refactor_Report.md 追加第八阶段;
Documents/agent_mem.md 同步变更日志与「2026-10-28 第十轮」硬约束与踩坑。
This commit is contained in:
1 parent
24706c906a
commit
57e12cfb27
14 files changed
+630
-191
No files matched your search
@@ -499,7 +499,7 @@ namespace jdi
|
|||||||
// * `fullChrome` —— 标签栏 / 工具栏 / 整窗底色 / 面板都要重绘(有真内容变化);
|
// * `fullChrome` —— 标签栏 / 工具栏 / 整窗底色 / 面板都要重绘(有真内容变化);
|
||||||
// * `panelOnly` —— **只有面板像素变了**(面板滚动动画),标签栏/工具栏/整窗底色
|
// * `panelOnly` —— **只有面板像素变了**(面板滚动动画),标签栏/工具栏/整窗底色
|
||||||
// 与上一帧逐像素相同,没必要重绘(实测 129 网格时约 3~4ms/帧)。
|
// 与上一帧逐像素相同,没必要重绘(实测 129 网格时约 3~4ms/帧)。
|
||||||
const bool fullChrome = m_chromeDirty || m_loading || overlaysVisible;
|
const bool fullChrome = m_chromeDirty || m_loading || overlaysVisible || m_showLayoutBounds;
|
||||||
const bool panelOnly = !fullChrome && (panelAnimating || m_panelDirty);
|
const bool panelOnly = !fullChrome && (panelAnimating || m_panelDirty);
|
||||||
m_chromeDirty = false;
|
m_chromeDirty = false;
|
||||||
m_panelDirty = false;
|
m_panelDirty = false;
|
||||||
@@ -510,6 +510,13 @@ namespace jdi
|
|||||||
// 1px,走"只回送绘图区"的快路径会让装饰区的边界停留在旧帧上(看起来像没开)。
|
// 1px,走"只回送绘图区"的快路径会让装饰区的边界停留在旧帧上(看起来像没开)。
|
||||||
const bool fullFrame = chromeDirty || m_plot.HintNeedsAnimation() || m_showLayoutBounds;
|
const bool fullFrame = chromeDirty || m_plot.HintNeedsAnimation() || m_showLayoutBounds;
|
||||||
|
|
||||||
|
// ⚠️⚠️ **调试叠加层必须让绘图区走整幅重绘**:`PlotView` 的三条快路径(静态场景贴图 /
|
||||||
|
// 宽基底贴图 / 样式补丁)只重画**变化的部分**,而调试边框是画在整个窗口上的叠加内容 ——
|
||||||
|
// 底层不逐像素重画时,上一帧的边框会与新内容叠在一起(用户 2026-10-28 报告:拖网格
|
||||||
|
// 滚动条时"工具栏和网格区域上出现大量绘制残留,松开并移动鼠标才消失")。
|
||||||
|
// 关掉开关后立即恢复快路径,因此只有调试时损失帧率。
|
||||||
|
m_plot.SetForceFullRepaint(m_showLayoutBounds);
|
||||||
|
|
||||||
{
|
{
|
||||||
gd::Graphics g(m_backDc);
|
gd::Graphics g(m_backDc);
|
||||||
g.SetSmoothingMode(gd::SmoothingModeAntiAlias);
|
g.SetSmoothingMode(gd::SmoothingModeAntiAlias);
|
||||||
|
|||||||
@@ -1159,27 +1159,37 @@ namespace jdi
|
|||||||
UiDebugBoxList boxes;
|
UiDebugBoxList boxes;
|
||||||
|
|
||||||
// 客户区外框:便于确认"窗口边缘 == 最外层边界"。
|
// 客户区外框:便于确认"窗口边缘 == 最外层边界"。
|
||||||
boxes.Add(gd::RectF(0.0f, 0.0f, static_cast<float>(width), static_cast<float>(height)), 0,
|
boxes.Add(gd::RectF(0.0f, 0.0f, static_cast<float>(width), static_cast<float>(height)), 0);
|
||||||
L"window");
|
|
||||||
|
|
||||||
// 组件区域(底 → 顶;组件自己负责补齐内部结构)。
|
// 组件区域(底 → 顶;组件自己负责补齐内部结构)。
|
||||||
|
// ⚠️ 两点都很重要:
|
||||||
|
// 1. `SetClip(组件区域)`:组件内部的元素可能落在自己地盘之外(典型:滚出可视区的
|
||||||
|
// 网格 `lane.rect` 的 Y 为负数),不裁剪会把边框画到工具栏/标签栏上
|
||||||
|
// —— 这正是"工具栏上出现绘制残留"的直接原因。
|
||||||
|
// 2. 每收集完一个组件就 `PushLayer()`:浮层压在本体之上(右键二级菜单压在行上面),
|
||||||
|
// 只有按收集顺序分层,后收集的内容才画在上面。
|
||||||
for (const ComponentEntry& entry : m_components)
|
for (const ComponentEntry& entry : m_components)
|
||||||
{
|
{
|
||||||
if (entry.component != nullptr)
|
if (entry.component != nullptr)
|
||||||
{
|
{
|
||||||
|
boxes.SetClip(entry.component->Area());
|
||||||
entry.component->CollectDebugBoxes(boxes);
|
entry.component->CollectDebugBoxes(boxes);
|
||||||
}
|
}
|
||||||
|
boxes.PushLayer();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 不属于任何组件的两块:面板分隔条(由宿主直接填充色块)、菜单 / 拾色器(浮层)。
|
// 不属于任何组件的两块:面板分隔条(由宿主直接填充色块)、菜单 / 拾色器(浮层)。
|
||||||
|
// ⚠️ 浮层**不设裁剪矩形**:菜单的二级子菜单会展开到菜单本体之外,设裁剪会把它裁掉;
|
||||||
|
// 它们自己会把本体登记为"遮挡矩形"(见 `PopupMenu::CollectDebugBoxes`),
|
||||||
|
// 由绘制阶段把更低层的 box 从浮层区域里挖掉。
|
||||||
|
boxes.SetClip(gd::RectF());
|
||||||
boxes.Add(m_splitterRect, 0);
|
boxes.Add(m_splitterRect, 0);
|
||||||
|
boxes.PushLayer();
|
||||||
m_menu.CollectDebugBoxes(boxes);
|
m_menu.CollectDebugBoxes(boxes);
|
||||||
|
boxes.PushLayer();
|
||||||
m_colorPicker.CollectDebugBoxes(boxes);
|
m_colorPicker.CollectDebugBoxes(boxes);
|
||||||
|
|
||||||
UiDebugPaintStyle style;
|
UiDebugPaintBoxList(g, boxes);
|
||||||
style.font = m_fonts.uiSmall;
|
|
||||||
style.scale = m_scale;
|
|
||||||
UiDebugPaintBoxList(g, boxes, style);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
void Application::DispatchMenuResult(const MenuResult& result)
|
void Application::DispatchMenuResult(const MenuResult& result)
|
||||||
|
|||||||
@@ -216,6 +216,20 @@ namespace jdi
|
|||||||
*/
|
*/
|
||||||
void CollectDebugBoxes(UiDebugBoxList& boxes) override;
|
void CollectDebugBoxes(UiDebugBoxList& boxes) override;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief 强制走「整幅重绘」路径(用于调试叠加层)。
|
||||||
|
*
|
||||||
|
* 平时 `Paint` 会用三条快路径(静态场景贴图 / 宽基底贴图 / 样式补丁)只重画变化部分,
|
||||||
|
* 这在拖动网格滚动条时会**跳过一部分像素**。而调试叠加层(「显示布局边界」)是画在
|
||||||
|
* 整个窗口上的叠加内容 —— 一旦底层没有逐像素重画,上一帧的调试边框就会与新内容叠加,
|
||||||
|
* 表现为「工具栏与网格区域上大量绘制残留」(用户 2026-10-28 报告)。
|
||||||
|
*
|
||||||
|
* 因此调试叠加层开启时必须打开本开关:牺牲帧率,换取"每帧都是完整一帧"。
|
||||||
|
*
|
||||||
|
* @param [IN] force 为 true 时禁用全部快路径且不作画质降级。
|
||||||
|
*/
|
||||||
|
void SetForceFullRepaint(bool force) { m_forceFullRepaint = force; }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 处理鼠标移动(含拖拽)。
|
* @brief 处理鼠标移动(含拖拽)。
|
||||||
* @param [IN] x 客户区横坐标。
|
* @param [IN] x 客户区横坐标。
|
||||||
@@ -1271,6 +1285,9 @@ namespace jdi
|
|||||||
/** @brief 前台是否正在播放 UI 动画(见 `SetAnimationBusy`)。 */
|
/** @brief 前台是否正在播放 UI 动画(见 `SetAnimationBusy`)。 */
|
||||||
bool m_animationBusy = false;
|
bool m_animationBusy = false;
|
||||||
|
|
||||||
|
/** @brief 是否禁用全部快速绘制路径(见 `SetForceFullRepaint`)。 */
|
||||||
|
bool m_forceFullRepaint = false;
|
||||||
|
|
||||||
public:
|
public:
|
||||||
/**
|
/**
|
||||||
* @brief 单个网格的绘制信息。
|
* @brief 单个网格的绘制信息。
|
||||||
|
|||||||
@@ -567,29 +567,24 @@ namespace jdi
|
|||||||
{
|
{
|
||||||
UiComponent::CollectDebugBoxes(boxes);
|
UiComponent::CollectDebugBoxes(boxes);
|
||||||
|
|
||||||
// 层级 1:每个网格的波形区;层级 2:该网格的 GX 编号徽标与装饰层矩形。
|
// 层级 1:每个网格的波形区;层级 2:该网格的 GX 编号徽标。
|
||||||
|
// ⚠️ **绝不能读 `m_decorRects`**:那里存的是"装饰层位图缓存"的登记矩形,
|
||||||
|
// 坐标处在**位图/图层坐标系**(会带负 Y、或超出绘图区),拿它当屏幕矩形会出现
|
||||||
|
// 横跨工具栏与绘图区的巨型幽灵框(用户报告的"绘制残留"的直接原因)。
|
||||||
|
// 需要装饰元素的屏幕几何时,请用 `m_legendHits`(屏幕坐标)或 `LaneBadgeRect`。
|
||||||
for (std::size_t index = 0; index < m_lanes.size(); ++index)
|
for (std::size_t index = 0; index < m_lanes.size(); ++index)
|
||||||
{
|
{
|
||||||
const LaneVisual& lane = m_lanes[index];
|
const LaneVisual& lane = m_lanes[index];
|
||||||
boxes.Add(lane.rect, 1, L"lane " + std::to_wstring(index + 1));
|
boxes.Add(lane.rect, 1);
|
||||||
|
|
||||||
// GX 编号徽标:矩形由 `LaneBadgeRect` 统一给出(绘制与命中都用它)。
|
// GX 编号徽标:矩形由 `LaneBadgeRect` 统一给出(绘制与命中都用它)。
|
||||||
boxes.Add(LaneBadgeRect(static_cast<int>(index)), 2, L"G");
|
boxes.Add(LaneBadgeRect(static_cast<int>(index)), 2);
|
||||||
|
|
||||||
// 装饰层矩形(图例托底 / “无信号” / “更多”):绘制时已登记在 `m_decorRects`。
|
|
||||||
for (const gd::RectF& decor : m_decorRects)
|
|
||||||
{
|
|
||||||
if (decor.Y >= lane.rect.Y && decor.Y < lane.rect.Y + lane.rect.Height)
|
|
||||||
{
|
|
||||||
boxes.Add(decor, 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 层级 2/3:图例条目(托底 + 色块 + 文本),绘制时已登记在 `m_legendHits`。
|
// 层级 2/3:图例条目(托底 + 色块 + 文本),绘制时已登记在 `m_legendHits`。
|
||||||
for (const LegendHit& hit : m_legendHits)
|
for (const LegendHit& hit : m_legendHits)
|
||||||
{
|
{
|
||||||
boxes.Add(hit.rect, 2, L"legend");
|
boxes.Add(hit.rect, 2);
|
||||||
boxes.Add(hit.swatch, 3);
|
boxes.Add(hit.swatch, 3);
|
||||||
boxes.Add(hit.text, 3);
|
boxes.Add(hit.text, 3);
|
||||||
}
|
}
|
||||||
@@ -608,18 +603,18 @@ namespace jdi
|
|||||||
{
|
{
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
boxes.Add(layout.panel, 2, L"panel");
|
boxes.Add(layout.panel, 2);
|
||||||
boxes.Add(layout.title, 3, L"title");
|
boxes.Add(layout.title, 3);
|
||||||
boxes.Add(layout.close, 3, L"x");
|
boxes.Add(layout.close, 3);
|
||||||
boxes.Add(layout.disclosure, 3);
|
boxes.Add(layout.disclosure, 3);
|
||||||
boxes.Add(layout.badge, 3, L"G");
|
boxes.Add(layout.badge, 3);
|
||||||
boxes.Add(layout.edit, 3);
|
boxes.Add(layout.edit, 3);
|
||||||
boxes.Add(layout.button, 3);
|
boxes.Add(layout.button, 3);
|
||||||
boxes.Add(layout.content, 3, L"content");
|
boxes.Add(layout.content, 3);
|
||||||
boxes.Add(layout.scrollTrack, 3, L"scroll");
|
boxes.Add(layout.scrollTrack, 3);
|
||||||
boxes.Add(layout.scrollThumb, 4);
|
boxes.Add(layout.scrollThumb, 4);
|
||||||
boxes.Add(layout.opacityTrack, 3, L"track");
|
boxes.Add(layout.opacityTrack, 3);
|
||||||
boxes.Add(layout.opacityValue, 3, L"value");
|
boxes.Add(layout.opacityValue, 3);
|
||||||
boxes.Add(layout.showDelta, 3);
|
boxes.Add(layout.showDelta, 3);
|
||||||
boxes.Add(layout.showEnum, 3);
|
boxes.Add(layout.showEnum, 3);
|
||||||
|
|
||||||
@@ -638,15 +633,15 @@ namespace jdi
|
|||||||
|
|
||||||
for (const EdgePanelLayout::MarkerGroup& group : layout.markerGroups)
|
for (const EdgePanelLayout::MarkerGroup& group : layout.markerGroups)
|
||||||
{
|
{
|
||||||
boxes.Add(group.header, 3, L"group");
|
boxes.Add(group.header, 3);
|
||||||
boxes.Add(group.tableHeader, 3);
|
boxes.Add(group.tableHeader, 3);
|
||||||
boxes.Add(group.triangle, 4);
|
boxes.Add(group.triangle, 4);
|
||||||
boxes.Add(group.close, 4, L"x");
|
boxes.Add(group.close, 4);
|
||||||
}
|
}
|
||||||
for (const EdgePanelLayout::MarkerRow& row : layout.markerRows)
|
for (const EdgePanelLayout::MarkerRow& row : layout.markerRows)
|
||||||
{
|
{
|
||||||
boxes.Add(row.rect, 4, L"marker");
|
boxes.Add(row.rect, 4);
|
||||||
boxes.Add(row.close, 4, L"x");
|
boxes.Add(row.close, 4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -768,7 +763,9 @@ namespace jdi
|
|||||||
// 网格次序拖拽:静态场景缓存仍然有效,但各网格要按位移重新"摆放"。
|
// 网格次序拖拽:静态场景缓存仍然有效,但各网格要按位移重新"摆放"。
|
||||||
// 这里逐网格把缓存中的横向条带平移贴回(几十微秒),
|
// 这里逐网格把缓存中的横向条带平移贴回(几十微秒),
|
||||||
// 因此拖动百万级采样的网格时依然流畅,且被拖网格的波形随鼠标自由移动。
|
// 因此拖动百万级采样的网格时依然流畅,且被拖网格的波形随鼠标自由移动。
|
||||||
if (m_dragMode == PlotDragMode::LANE_REORDER && m_laneDragFrom >= 0 && m_sceneValid)
|
// ⚠️ `m_forceFullRepaint`(调试叠加层)下必须跳过:局部贴图会留下上一帧的边界。
|
||||||
|
if (!m_forceFullRepaint && m_dragMode == PlotDragMode::LANE_REORDER && m_laneDragFrom >= 0 &&
|
||||||
|
m_sceneValid)
|
||||||
{
|
{
|
||||||
PaintLaneReorder(g);
|
PaintLaneReorder(g);
|
||||||
paintOverlays();
|
paintOverlays();
|
||||||
@@ -780,7 +777,7 @@ namespace jdi
|
|||||||
// 大文件下整幅重绘约 80ms,贴图约 1ms —— 鼠标悬停、拖拽选区这些
|
// 大文件下整幅重绘约 80ms,贴图约 1ms —— 鼠标悬停、拖拽选区这些
|
||||||
// "只改一小块叠加层"的交互因此不再重绘波形。
|
// "只改一小块叠加层"的交互因此不再重绘波形。
|
||||||
// 随鼠标变化的内容(悬停高亮、读数框、选区、光标、拖拽虚影、输入框)一律画在贴图之后。
|
// 随鼠标变化的内容(悬停高亮、读数框、选区、光标、拖拽虚影、输入框)一律画在贴图之后。
|
||||||
if (SceneCacheMatches() && BlitSceneCache(g))
|
if (!m_forceFullRepaint && SceneCacheMatches() && BlitSceneCache(g))
|
||||||
{
|
{
|
||||||
// ⚠️ **顺手做一次"空闲预热"**:图层不存在(刚加载 / 网格数量变化)或仍是旧跨度时,
|
// ⚠️ **顺手做一次"空闲预热"**:图层不存在(刚加载 / 网格数量变化)或仍是旧跨度时,
|
||||||
// 在这里用既有预算机制**每帧至多补 1 个网格**。若不预热,用户第一次平移 / 选区放大
|
// 在这里用既有预算机制**每帧至多补 1 个网格**。若不预热,用户第一次平移 / 选区放大
|
||||||
@@ -804,7 +801,8 @@ namespace jdi
|
|||||||
// ⚠️ **不要求"正在拖拽"**:非拖拽的视界变化(键盘方向键 / 工具栏)同样走此快路径,
|
// ⚠️ **不要求"正在拖拽"**:非拖拽的视界变化(键盘方向键 / 工具栏)同样走此快路径,
|
||||||
// 避免该放大区间"整幅重绘约 124ms"的卡顿。
|
// 避免该放大区间"整幅重绘约 124ms"的卡顿。
|
||||||
bool wideUsable = false;
|
bool wideUsable = false;
|
||||||
if (HasDrawableContent() && m_sceneValid && m_sceneGeometryHash == SceneGeometryHash())
|
if (!m_forceFullRepaint && HasDrawableContent() && m_sceneValid &&
|
||||||
|
m_sceneGeometryHash == SceneGeometryHash())
|
||||||
{
|
{
|
||||||
std::vector<std::vector<SceneStyleEntry>> currentStyles;
|
std::vector<std::vector<SceneStyleEntry>> currentStyles;
|
||||||
CollectSceneStyles(currentStyles);
|
CollectSceneStyles(currentStyles);
|
||||||
@@ -947,7 +945,7 @@ namespace jdi
|
|||||||
// 再写回缓存。(VERY_BIG_DATA 实测:整幅重绘 30ms+,单网格重画约 4ms。)
|
// 再写回缓存。(VERY_BIG_DATA 实测:整幅重绘 30ms+,单网格重画约 4ms。)
|
||||||
{
|
{
|
||||||
std::vector<int> patchLanes;
|
std::vector<int> patchLanes;
|
||||||
if (FindStyleOnlyLanes(patchLanes) && BlitSceneCache(g))
|
if (!m_forceFullRepaint && FindStyleOnlyLanes(patchLanes) && BlitSceneCache(g))
|
||||||
{
|
{
|
||||||
// ⚠️ 样式**正在连续变化**(拖透明度 / 粗细 / 拾色滑块):这本身就是一种"交互中"。
|
// ⚠️ 样式**正在连续变化**(拖透明度 / 粗细 / 拾色滑块):这本身就是一种"交互中"。
|
||||||
// 若不切换快速帧,本帧会用**抗锯齿**重画波形包络带 —— 实测单条网格的包络带
|
// 若不切换快速帧,本帧会用**抗锯齿**重画波形包络带 —— 实测单条网格的包络带
|
||||||
|
|||||||
@@ -7,7 +7,6 @@
|
|||||||
|
|
||||||
#include <cstddef>
|
#include <cstddef>
|
||||||
#include <cstdint>
|
#include <cstdint>
|
||||||
#include <string>
|
|
||||||
#include <vector>
|
#include <vector>
|
||||||
|
|
||||||
#include "Theme.hpp"
|
#include "Theme.hpp"
|
||||||
@@ -26,83 +25,135 @@ namespace jdi
|
|||||||
std::uint32_t UiDebugBoundsColor(int depth);
|
std::uint32_t UiDebugBoundsColor(int depth);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 一个待显示的布局边界 box。
|
* @brief 一个待显示的布局边界 box(**纯值类型**)。
|
||||||
*
|
*
|
||||||
* 这里刻意用**值类型**而不是控件基类:`PlotView` 的 4 层位图缓存、`SignalPanel` 的
|
* 刻意不继承控件基类:`PlotView` 的 4 层位图缓存、`SignalPanel` 的行位图缓存都要求
|
||||||
* 行位图缓存都要求"绘制由组件自己负责",把几何也塞进继承体系会和缓存体系打架。
|
* "绘制由组件自己负责",把几何塞进继承体系会和缓存体系打架。box 只描述
|
||||||
* box 只描述"哪里有一个矩形、属于第几层、叫什么名字",因此**几何可以被绘制、命中与
|
* "哪里有一个矩形、属于第几层、在第几绘制层",因此**几何可以被绘制、命中与调试共用**,
|
||||||
* 调试共用**,也不需要任何虚函数或生命周期管理。
|
* 也不需要任何虚函数或生命周期管理。
|
||||||
*/
|
*/
|
||||||
struct UiDebugBox
|
struct UiDebugBox
|
||||||
{
|
{
|
||||||
gd::RectF rect; /**< 矩形(客户区坐标)。 */
|
gd::RectF rect; /**< 矩形(客户区坐标)。 */
|
||||||
int depth = 0; /**< 层级(决定配色与角的粗细)。 */
|
gd::RectF clip; /**< 裁剪矩形(= 所属组件的区域;空 = 不裁剪)。 */
|
||||||
std::wstring tag; /**< 可选短标签(空 = 不画标签)。 */
|
int depth = 0; /**< 层级(决定配色与包角粗细)。 */
|
||||||
|
int layer = 0; /**< 绘制层(越大越靠上):由 `UiDebugBoxList::PushLayer` 分配。 */
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief box 收集器(值语义容器)。
|
* @brief box 收集器(值语义容器)。
|
||||||
*
|
*
|
||||||
* 由宿主每帧构造一次、交给各组件填充、再一次性画完 —— 全程只在「显示布局边界」打开时执行。
|
* 由宿主每帧构造一次、交给各组件填充、再一次性画完 —— 全程只在「显示布局边界」打开时执行。
|
||||||
|
*
|
||||||
|
* ⚠️ **两个排序键缺一不可**:
|
||||||
|
* * `layer`(绘制层,来自 `PushLayer()`):保证**后收集的内容压住先收集的**。
|
||||||
|
* 没有它,"信号面板的行边界"会盖住"右键弹出的二级菜单"(菜单是后收集的浮层)。
|
||||||
|
* * `depth`(层级):同一层内先画父(浅层)再画子(深层),子元素的彩色包角才不被父覆盖。
|
||||||
*/
|
*/
|
||||||
class UiDebugBoxList
|
class UiDebugBoxList
|
||||||
{
|
{
|
||||||
public:
|
public:
|
||||||
/** @brief 清空(复用同一实例时调用)。 */
|
/** @brief 清空(复用同一实例时调用),同时把绘制层复位为 0。 */
|
||||||
void Clear() { m_boxes.clear(); }
|
void Clear();
|
||||||
/** @brief 追加一个 box(空矩形自动忽略)。 */
|
/**
|
||||||
void Add(const gd::RectF& rect, int depth, std::wstring tag = std::wstring());
|
* @brief 进入下一个绘制层。
|
||||||
|
*
|
||||||
|
* 宿主在每个组件收集完之后调用一次;组件内部若有"浮层压住本体"的情形
|
||||||
|
* (例如菜单的二级子菜单)也应在收集子层之前调用。
|
||||||
|
*/
|
||||||
|
void PushLayer() { ++m_layer; }
|
||||||
|
/**
|
||||||
|
* @brief 设置后续 box 的裁剪矩形(= 当前组件的区域)。
|
||||||
|
*
|
||||||
|
* ⚠️ **必须像裁剪绘制一样裁剪调试 box**:组件内部元素可能落在地盘之外
|
||||||
|
* (典型:滚出可视区的网格 `lane.rect` 的 Y 会是负数),不裁剪就会画到相邻组件
|
||||||
|
* (工具栏 / 标签栏)上面 —— 这正是用户报告“工具栏上出现大量残留”的直接原因。
|
||||||
|
*
|
||||||
|
* @param [IN] clip 裁剪矩形;传空矩形表示不裁剪。
|
||||||
|
*/
|
||||||
|
void SetClip(const gd::RectF& clip) { m_clip = clip; }
|
||||||
|
/** @brief 追加一个 box(空矩形 / 与裁剪矩形无交集的 box 自动忽略)。 */
|
||||||
|
void Add(const gd::RectF& rect, int depth);
|
||||||
/** @brief 追加一组同层级的 box(空矩形逐个忽略)。 */
|
/** @brief 追加一组同层级的 box(空矩形逐个忽略)。 */
|
||||||
void AddAll(const std::vector<gd::RectF>& rects, int depth);
|
void AddAll(const std::vector<gd::RectF>& rects, int depth);
|
||||||
|
/**
|
||||||
|
* @brief 登记一个**遮挡矩形**(浮层本体,如弹出菜单 / 拾色器)。
|
||||||
|
*
|
||||||
|
* ⚠️ 必须做这件事:调试 box 是画在所有内容**之后**的,仅靠 `layer` 排序只能决定
|
||||||
|
* “两个 box 重叠时谁压谁”,并不能阻止“下层组件的边框线画在不透明浮层上面”。
|
||||||
|
* 登记为 occluder 后,**绘制层比它低**的 box 在该区域内会被裁掉,
|
||||||
|
* 于是观察右键菜单的空间布局时不会被底下的行/网格边界干扰。
|
||||||
|
*
|
||||||
|
* @param [IN] rect 遮挡矩形(客户区坐标;空矩形忽略)。
|
||||||
|
*/
|
||||||
|
void AddOccluder(const gd::RectF& rect);
|
||||||
/** @brief 是否为空。 */
|
/** @brief 是否为空。 */
|
||||||
bool Empty() const { return m_boxes.empty(); }
|
bool Empty() const { return m_boxes.empty(); }
|
||||||
/** @brief box 数量。 */
|
/** @brief box 数量。 */
|
||||||
std::size_t Count() const { return m_boxes.size(); }
|
std::size_t Count() const { return m_boxes.size(); }
|
||||||
/** @brief 只读访问。 */
|
/** @brief 只读访问(**未排序**,绘制时内部会按 layer/depth 稳定排序)。 */
|
||||||
const std::vector<UiDebugBox>& Items() const { return m_boxes; }
|
const std::vector<UiDebugBox>& Items() const { return m_boxes; }
|
||||||
|
|
||||||
|
/** @brief 一个遮挡矩形(含它所在的绘制层)。 */
|
||||||
|
struct Occluder
|
||||||
|
{
|
||||||
|
gd::RectF rect; /**< 遮挡矩形。 */
|
||||||
|
int layer = 0; /**< 所在绘制层(只遮挡更低的层)。 */
|
||||||
|
};
|
||||||
|
/** @brief 遮挡矩形集合(只读)。 */
|
||||||
|
const std::vector<Occluder>& Occluders() const { return m_occluders; }
|
||||||
|
|
||||||
private:
|
private:
|
||||||
std::vector<UiDebugBox> m_boxes;
|
std::vector<UiDebugBox> m_boxes;
|
||||||
};
|
std::vector<Occluder> m_occluders;
|
||||||
|
int m_layer = 0; /**< 当前绘制层。 */
|
||||||
/** @brief 绘制 box 列表所需的附加资源。 */
|
gd::RectF m_clip; /**< 当前裁剪矩形(空 = 不裁剪)。 */
|
||||||
struct UiDebugPaintStyle
|
|
||||||
{
|
|
||||||
HFONT font = nullptr; /**< 标签字体(`nullptr` = 一律不画标签)。 */
|
|
||||||
float scale = 1.0f; /**< DPI 缩放(只用于标签排版,不用于线宽)。 */
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 绘制一个矩形的布局边界。
|
* @brief 绘制一个矩形的布局边界(**四角粗、四边细**,且粗细随矩形尺寸自适应)。
|
||||||
*
|
*
|
||||||
* 视觉规则(**四角粗、四边细**,便于一眼定位元素的实际边界):
|
* 视觉规则:
|
||||||
* * 四条边固定 1 设备像素;
|
* * 四条边固定 1 设备像素;
|
||||||
* * 四个角额外加粗(层级 0 为 4px,其余 3px),每个角沿水平与垂直方向各延伸一段
|
* * 四个角额外加粗成 `⌜ ⌝ ⌞ ⌟` 包角 —— 这是"一眼定位元素边界"的关键,
|
||||||
* `cornerLen`,形成 `⌜ ⌝ ⌞ ⌟` 的包角;
|
* 即使多个矩形共边也能靠角的形状分辨层次;
|
||||||
* * 只描边、不填充 —— 填充会在几十个嵌套矩形上层层叠加,把内容糊成一片;
|
* * **包角粗细与长度都随矩形短边自适应**:元素越小越细(小方框不会被描成"粗边框"),
|
||||||
* * 层级 > 0 的矩形整体内缩 1 像素,避免与父矩形共边时叠成一条"更粗的边"。
|
* 短边 ≤ 12px 时只画角、不画边(四个 L 形小标记,最不干扰内容),
|
||||||
|
* 短边 ≤ 5px 时完全不画(否则就盖住元素本身了);
|
||||||
|
* * 层级 > 0 的矩形整体内缩 1 像素(短边太小时不内缩),避免与父矩形共边时叠成粗线;
|
||||||
|
* * **只描边、不填充、不写文字** —— 填充会糊住内容,文字标签在小元素上会连成一片。
|
||||||
*
|
*
|
||||||
* ⚠️ **线宽按设备像素固定**(不乘 `scale`):调试线一旦随 DPI 变粗就会盖住内容。
|
* ⚠️ 线宽按**设备像素**固定(不乘 `scale`)并临时 `PixelOffsetModeNone` + 关抗锯齿,
|
||||||
* ⚠️ 描绘边时临时切到 `PixelOffsetModeNone` + 无抗锯齿,并把矩形对齐到整像素,
|
* 否则 1px 线会被抗锯齿摊成 2px 灰边,无法判断真实边界。
|
||||||
* 否则 1px 线会被抗锯齿摊成 2px 灰边(无法判断真实边界)。
|
|
||||||
*
|
*
|
||||||
* @param [IN,OUT] g 绘图上下文。
|
* @param [IN,OUT] g 绘图上下文。
|
||||||
* @param [IN] rect 目标矩形(客户区坐标)。
|
* @param [IN] rect 目标矩形(客户区坐标)。
|
||||||
* @param [IN] depth 层级(决定配色、角的粗细与内缩)。
|
* @param [IN] depth 层级(决定配色与包角基础粗细)。
|
||||||
*/
|
*/
|
||||||
void UiDebugPaintBounds(gd::Graphics& g, const gd::RectF& rect, int depth);
|
void UiDebugPaintBounds(gd::Graphics& g, const gd::RectF& rect, int depth);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief `UiDebugPaintBounds` 的内部实现(带裁剪矩形)。
|
||||||
|
*
|
||||||
|
* 供 `UiDebugPaintBoxList` 使用:非空 `clip` 表示"只在所属组件的地盘内绘制"。
|
||||||
|
*
|
||||||
|
* @param [IN,OUT] g 绘图上下文。
|
||||||
|
* @param [IN] rect 目标矩形。
|
||||||
|
* @param [IN] clip 裁剪矩形(空 = 不裁剪)。
|
||||||
|
* @param [IN] depth 层级。
|
||||||
|
*/
|
||||||
|
void UiDebugPaintBoundsClipped(gd::Graphics& g, const gd::RectF& rect, const gd::RectF& clip,
|
||||||
|
int depth);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 一次性画完整个 box 列表(在宿主绘制的最后一步调用)。
|
* @brief 一次性画完整个 box 列表(在宿主绘制的最后一步调用)。
|
||||||
*
|
*
|
||||||
* 按层级从浅到深排序后绘制:深层的彩色包角因此不会被父级的边压住。
|
* 按 `(layer, depth)` 稳定排序后绘制:后收集的层压住先收集的层,同层内父先子后。
|
||||||
*
|
*
|
||||||
* @param [IN,OUT] g 绘图上下文。
|
* @param [IN,OUT] g 绘图上下文。
|
||||||
* @param [IN] boxes box 列表。
|
* @param [IN] boxes box 列表。
|
||||||
* @param [IN] style 字体与缩放(标签用)。
|
|
||||||
*/
|
*/
|
||||||
void UiDebugPaintBoxList(gd::Graphics& g, const UiDebugBoxList& boxes,
|
void UiDebugPaintBoxList(gd::Graphics& g, const UiDebugBoxList& boxes);
|
||||||
const UiDebugPaintStyle& style);
|
|
||||||
|
|
||||||
} // namespace jdi
|
} // namespace jdi
|
||||||
|
|
||||||
|
|||||||
@@ -1102,25 +1102,27 @@ namespace jdi
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 层级 0:面板浮层整体。
|
// 层级 0:面板浮层整体。
|
||||||
boxes.Add(m_rect, 0, L"picker");
|
boxes.Add(m_rect, 0);
|
||||||
|
// 浮层不透明 ⇒ 登记为遮挡矩形:下层组件的边框线不再画到它上面。
|
||||||
|
boxes.AddOccluder(m_rect);
|
||||||
|
|
||||||
// 层级 1:面板内部的固定控件。
|
// 层级 1:面板内部的固定控件。
|
||||||
boxes.Add(m_titleRect, 1, L"title");
|
boxes.Add(m_titleRect, 1);
|
||||||
boxes.Add(m_previewRect, 1);
|
boxes.Add(m_previewRect, 1);
|
||||||
boxes.Add(m_hexRect, 1, L"hex");
|
boxes.Add(m_hexRect, 1);
|
||||||
boxes.Add(m_gamutRect, 1, L"gamut");
|
boxes.Add(m_gamutRect, 1);
|
||||||
boxes.Add(m_hueRect, 1, L"hue");
|
boxes.Add(m_hueRect, 1);
|
||||||
|
|
||||||
// 层级 2:三条分量滑块的轨道与数值。
|
// 层级 2:三条分量滑块的轨道与数值。
|
||||||
for (const gd::RectF& track : m_tracks)
|
for (const gd::RectF& track : m_tracks)
|
||||||
{
|
{
|
||||||
boxes.Add(track, 2, L"track");
|
boxes.Add(track, 2);
|
||||||
}
|
}
|
||||||
for (const gd::RectF& value : m_values)
|
for (const gd::RectF& value : m_values)
|
||||||
{
|
{
|
||||||
boxes.Add(value, 2);
|
boxes.Add(value, 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
boxes.Add(EditFieldRect(), 2, L"edit");
|
boxes.Add(EditFieldRect(), 2);
|
||||||
}
|
}
|
||||||
} // namespace jdi
|
} // namespace jdi
|
||||||
@@ -6,6 +6,7 @@
|
|||||||
#include "PopupMenuInternal.hpp"
|
#include "PopupMenuInternal.hpp"
|
||||||
#include "UiControls.hpp"
|
#include "UiControls.hpp"
|
||||||
#include "UiDebugBounds.hpp"
|
#include "UiDebugBounds.hpp"
|
||||||
|
#include "UiLayout.hpp"
|
||||||
|
|
||||||
namespace jdi
|
namespace jdi
|
||||||
{
|
{
|
||||||
@@ -713,7 +714,9 @@ namespace jdi
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 层级 0:菜单浮层整体。
|
// 层级 0:菜单浮层整体。
|
||||||
boxes.Add(m_rect, 0, L"menu");
|
boxes.Add(m_rect, 0);
|
||||||
|
// 菜单是不透明浮层 ⇒ 登记为遮挡矩形:下层组件(面板行 / 网格)的边框线不再画到它上面。
|
||||||
|
boxes.AddOccluder(m_rect);
|
||||||
|
|
||||||
// 层级 1:每个条目(含标题 / 分隔线 / 色块行,它们的矩形都已算好)。
|
// 层级 1:每个条目(含标题 / 分隔线 / 色块行,它们的矩形都已算好)。
|
||||||
for (const gd::RectF& item : m_itemRects)
|
for (const gd::RectF& item : m_itemRects)
|
||||||
@@ -722,15 +725,20 @@ namespace jdi
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 层级 1/2:可滚动菜单的可视区、轨道与滑块。
|
// 层级 1/2:可滚动菜单的可视区、轨道与滑块。
|
||||||
boxes.Add(m_scrollViewport, 1, L"view");
|
boxes.Add(m_scrollViewport, 1);
|
||||||
boxes.Add(m_scrollBarRect, 2, L"track");
|
boxes.Add(m_scrollBarRect, 2);
|
||||||
boxes.Add(ScrollBarThumbRect(), 2);
|
boxes.Add(ScrollBarThumbRect(), 2);
|
||||||
|
|
||||||
// 层级 0/1:二级子菜单。
|
// 层级 0/1:二级子菜单(**另起一个绘制层**:它压在菜单项之上)。
|
||||||
boxes.Add(m_subRect, 0, L"sub");
|
if (UiRectHasArea(m_subRect))
|
||||||
for (const gd::RectF& item : m_subItemRects)
|
|
||||||
{
|
{
|
||||||
boxes.Add(item, 1);
|
boxes.PushLayer();
|
||||||
|
boxes.Add(m_subRect, 0);
|
||||||
|
boxes.AddOccluder(m_subRect);
|
||||||
|
for (const gd::RectF& item : m_subItemRects)
|
||||||
|
{
|
||||||
|
boxes.Add(item, 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} // namespace jdi
|
} // namespace jdi
|
||||||
@@ -3,8 +3,6 @@
|
|||||||
#include <algorithm>
|
#include <algorithm>
|
||||||
#include <cmath>
|
#include <cmath>
|
||||||
|
|
||||||
#include "PaintUtil.hpp"
|
|
||||||
|
|
||||||
namespace jdi
|
namespace jdi
|
||||||
{
|
{
|
||||||
|
|
||||||
@@ -12,19 +10,30 @@ namespace jdi
|
|||||||
{
|
{
|
||||||
/** @brief 四条边的描边宽度(设备像素)。 */
|
/** @brief 四条边的描边宽度(设备像素)。 */
|
||||||
constexpr int kEdgeStroke = 1;
|
constexpr int kEdgeStroke = 1;
|
||||||
/** @brief 层级 0 的包角粗细(设备像素)。 */
|
/** @brief 层级 0 的包角基础粗细(设备像素)。 */
|
||||||
constexpr int kAreaCornerThick = 4;
|
constexpr int kAreaCornerThick = 4;
|
||||||
/** @brief 层级 ≥1 的包角粗细(设备像素)。 */
|
/** @brief 层级 ≥1 的包角基础粗细(设备像素)。 */
|
||||||
constexpr int kNodeCornerThick = 3;
|
constexpr int kNodeCornerThick = 3;
|
||||||
/** @brief 包角沿边延伸的长度上限(设备像素;小矩形按比例收缩)。 */
|
/** @brief 包角沿边延伸的长度上限(设备像素)。 */
|
||||||
constexpr int kCornerLenMax = 14;
|
constexpr int kCornerLenMax = 14;
|
||||||
/** @brief 层级 > 0 的矩形内缩量(设备像素):避免与父矩形共边时叠成粗线。 */
|
/** @brief 短边不超过该值时**只画角、不画边**(小方框画满一圈会像粗边框)。 */
|
||||||
constexpr int kNestedInset = 1;
|
constexpr int kEdgelessThreshold = 12;
|
||||||
|
/** @brief 短边不超过该值时完全不画(再画就盖住元素本身了)。 */
|
||||||
|
constexpr int kSkipThreshold = 5;
|
||||||
|
/** @brief 短边小于该值时不做内缩(内缩会把小元素缩成一条线)。 */
|
||||||
|
constexpr int kInsetThreshold = 10;
|
||||||
|
|
||||||
/** @brief 标签底衬的不透明度(保证文字在任何内容上都可读)。 */
|
/** @brief 一个已对齐到整像素、可直接填充的矩形。 */
|
||||||
constexpr std::uint32_t kTagBackdrop = 0xD9101014u;
|
struct PixelRect
|
||||||
/** @brief 标签文字颜色。 */
|
{
|
||||||
constexpr std::uint32_t kTagInk = 0xFFFFFFFFu;
|
int left = 0;
|
||||||
|
int top = 0;
|
||||||
|
int right = -1;
|
||||||
|
int bottom = -1;
|
||||||
|
int Width() const { return right - left + 1; }
|
||||||
|
int Height() const { return bottom - top + 1; }
|
||||||
|
bool Valid() const { return right >= left && bottom >= top; }
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief 用整数像素矩形填充(要求调用方已把像素偏移模式设为 `None`)。
|
* @brief 用整数像素矩形填充(要求调用方已把像素偏移模式设为 `None`)。
|
||||||
@@ -42,18 +51,6 @@ namespace jdi
|
|||||||
g.FillRectangle(&brush, x, y, width, height);
|
g.FillRectangle(&brush, x, y, width, height);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @brief 一个已对齐到整像素、可直接填充的矩形。 */
|
|
||||||
struct PixelRect
|
|
||||||
{
|
|
||||||
int left = 0;
|
|
||||||
int top = 0;
|
|
||||||
int right = -1;
|
|
||||||
int bottom = -1;
|
|
||||||
int Width() const { return right - left + 1; }
|
|
||||||
int Height() const { return bottom - top + 1; }
|
|
||||||
bool Valid() const { return right >= left && bottom >= top; }
|
|
||||||
};
|
|
||||||
|
|
||||||
/** @brief 把逻辑矩形对齐到整像素(`inset` 先内缩,用于避免父子共边)。 */
|
/** @brief 把逻辑矩形对齐到整像素(`inset` 先内缩,用于避免父子共边)。 */
|
||||||
PixelRect AlignToPixels(const gd::RectF& rect, int inset)
|
PixelRect AlignToPixels(const gd::RectF& rect, int inset)
|
||||||
{
|
{
|
||||||
@@ -84,17 +81,47 @@ namespace jdi
|
|||||||
}
|
}
|
||||||
} // namespace
|
} // namespace
|
||||||
|
|
||||||
void UiDebugBoxList::Add(const gd::RectF& rect, int depth, std::wstring tag)
|
void UiDebugBoxList::Clear()
|
||||||
|
{
|
||||||
|
m_boxes.clear();
|
||||||
|
m_occluders.clear();
|
||||||
|
m_layer = 0;
|
||||||
|
m_clip = gd::RectF();
|
||||||
|
}
|
||||||
|
|
||||||
|
void UiDebugBoxList::AddOccluder(const gd::RectF& rect)
|
||||||
|
{
|
||||||
|
if (!(rect.Width > 0.0f) || !(rect.Height > 0.0f))
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Occluder occluder;
|
||||||
|
occluder.rect = rect;
|
||||||
|
occluder.layer = m_layer;
|
||||||
|
m_occluders.push_back(occluder);
|
||||||
|
}
|
||||||
|
|
||||||
|
void UiDebugBoxList::Add(const gd::RectF& rect, int depth)
|
||||||
{
|
{
|
||||||
if (!(rect.Width > 0.0f) || !(rect.Height > 0.0f))
|
if (!(rect.Width > 0.0f) || !(rect.Height > 0.0f))
|
||||||
{
|
{
|
||||||
return; // 空矩形(未布局 / 该元素当前不显示)不登记。
|
return; // 空矩形(未布局 / 该元素当前不显示)不登记。
|
||||||
}
|
}
|
||||||
|
if (m_clip.Width > 0.0f && m_clip.Height > 0.0f)
|
||||||
|
{
|
||||||
|
// 与所属组件的区域无交集 ⇒ 已经完全滚出地盘,不必登记(也避免越界画到邻居上)。
|
||||||
|
if (rect.X + rect.Width <= m_clip.X || rect.X >= m_clip.X + m_clip.Width ||
|
||||||
|
rect.Y + rect.Height <= m_clip.Y || rect.Y >= m_clip.Y + m_clip.Height)
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
UiDebugBox box;
|
UiDebugBox box;
|
||||||
box.rect = rect;
|
box.rect = rect;
|
||||||
|
box.clip = m_clip;
|
||||||
box.depth = (depth < 0) ? 0 : depth;
|
box.depth = (depth < 0) ? 0 : depth;
|
||||||
box.tag = std::move(tag);
|
box.layer = m_layer;
|
||||||
m_boxes.push_back(std::move(box));
|
m_boxes.push_back(box);
|
||||||
}
|
}
|
||||||
|
|
||||||
void UiDebugBoxList::AddAll(const std::vector<gd::RectF>& rects, int depth)
|
void UiDebugBoxList::AddAll(const std::vector<gd::RectF>& rects, int depth)
|
||||||
@@ -122,65 +149,116 @@ namespace jdi
|
|||||||
}
|
}
|
||||||
|
|
||||||
void UiDebugPaintBounds(gd::Graphics& g, const gd::RectF& rect, int depth)
|
void UiDebugPaintBounds(gd::Graphics& g, const gd::RectF& rect, int depth)
|
||||||
|
{
|
||||||
|
UiDebugPaintBoundsClipped(g, rect, gd::RectF(), depth);
|
||||||
|
}
|
||||||
|
|
||||||
|
void UiDebugPaintBoundsClipped(gd::Graphics& g, const gd::RectF& rect, const gd::RectF& clip,
|
||||||
|
int depth)
|
||||||
{
|
{
|
||||||
const int level = (depth < 0) ? 0 : depth;
|
const int level = (depth < 0) ? 0 : depth;
|
||||||
const int inset = (level > 0) ? kNestedInset : 0;
|
|
||||||
const PixelRect pixels = AlignToPixels(rect, inset);
|
// 先用未内缩的尺寸判断"值不值得画"和"要不要内缩":
|
||||||
|
// 内缩是给"父子共边"用的,元素本身很小时内缩只会把它缩没。
|
||||||
|
const float rawShortSide = std::min(rect.Width, rect.Height);
|
||||||
|
if (rawShortSide <= static_cast<float>(kSkipThreshold))
|
||||||
|
{
|
||||||
|
return; // 太小:画上去就是糊住元素本身。
|
||||||
|
}
|
||||||
|
const int inset = (level > 0 && rawShortSide >= static_cast<float>(kInsetThreshold)) ? 1 : 0;
|
||||||
|
|
||||||
|
PixelRect pixels = AlignToPixels(rect, inset);
|
||||||
if (!pixels.Valid())
|
if (!pixels.Valid())
|
||||||
{
|
{
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ⚠️ 与裁剪矩形求交(见 `UiDebugBoxList::SetClip`):组件内部的元素可能落在地盘之外。
|
||||||
|
// 用 floor/ceil 而不是取整:裁剪是“能看见多少就画多少”,宁可多一像素也不要把
|
||||||
|
// 紧贴边界的包角整个裁掉。
|
||||||
|
if (clip.Width > 0.0f && clip.Height > 0.0f)
|
||||||
|
{
|
||||||
|
const int clipLeft = static_cast<int>(std::floor(clip.X));
|
||||||
|
const int clipTop = static_cast<int>(std::floor(clip.Y));
|
||||||
|
const int clipRight = static_cast<int>(std::ceil(clip.X + clip.Width)) - 1;
|
||||||
|
const int clipBottom = static_cast<int>(std::ceil(clip.Y + clip.Height)) - 1;
|
||||||
|
PixelRect clipped;
|
||||||
|
clipped.left = std::max(pixels.left, clipLeft);
|
||||||
|
clipped.top = std::max(pixels.top, clipTop);
|
||||||
|
clipped.right = std::min(pixels.right, clipRight);
|
||||||
|
clipped.bottom = std::min(pixels.bottom, clipBottom);
|
||||||
|
if (!clipped.Valid())
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
pixels = clipped;
|
||||||
|
}
|
||||||
|
|
||||||
const int width = pixels.Width();
|
const int width = pixels.Width();
|
||||||
const int height = pixels.Height();
|
const int height = pixels.Height();
|
||||||
|
const int shortSide = std::min(width, height);
|
||||||
const std::uint32_t color = UiDebugBoundsColor(level);
|
const std::uint32_t color = UiDebugBoundsColor(level);
|
||||||
const int cornerThick = std::min((level == 0) ? kAreaCornerThick : kNodeCornerThick,
|
|
||||||
std::max(1, std::min(width, height)));
|
// ⚠️ **包角粗细随尺寸自适应**:这是"小元素变成粗描边"的修复点。
|
||||||
// 包角沿边延伸的长度:默认 14px,但不超过短边的一半(否则四角会连成实线框)。
|
// 基准 4/3px 只在足够大的矩形上使用;短边越小越细,最终退化为 1px。
|
||||||
const int cornerLen = std::max(cornerThick + 1,
|
// 同时不超过短边的 1/4,避免包角在元素自身上"占比过大"。
|
||||||
std::min(kCornerLenMax, std::max(1, std::min(width, height) / 2)));
|
const int baseThick = (level == 0) ? kAreaCornerThick : kNodeCornerThick;
|
||||||
|
int cornerThick = std::min(baseThick, shortSide / 10);
|
||||||
|
cornerThick = std::max(1, std::min(cornerThick, std::max(1, shortSide / 4)));
|
||||||
|
|
||||||
|
// 包角沿边延伸的长度:短边的 1/3,不超过上限,也不小于角本身。
|
||||||
|
int cornerLen = std::min(kCornerLenMax, std::max(1, shortSide / 3));
|
||||||
|
cornerLen = std::max(cornerLen, cornerThick);
|
||||||
|
|
||||||
|
// 小方框只画角、不画边:一圈连续描边会让复选框/色块/✕ 看起来"被粗框包住",
|
||||||
|
// 而四个 L 形小标记既不糊内容,又能立刻定位边界的四角。
|
||||||
|
const bool drawEdges = (shortSide > kEdgelessThreshold);
|
||||||
|
|
||||||
const gd::GraphicsState state = g.Save();
|
const gd::GraphicsState state = g.Save();
|
||||||
// 描边必须锐利:关抗锯齿 + 关半像素偏移,矩形已对齐整像素 ⇒ 1px 就是 1px。
|
// 描边必须锐利:关抗锯齿 + 关半像素偏移,矩形已对齐整像素 ⇒ 1px 就是 1px。
|
||||||
g.SetSmoothingMode(gd::SmoothingModeNone);
|
g.SetSmoothingMode(gd::SmoothingModeNone);
|
||||||
g.SetPixelOffsetMode(gd::PixelOffsetModeNone);
|
g.SetPixelOffsetMode(gd::PixelOffsetModeNone);
|
||||||
|
|
||||||
// (1) 四边:统一 1px,用实心矩形而不是 `DrawRectangle`
|
if (drawEdges)
|
||||||
// (后者会因笔宽奇偶而偏移半像素,且抗锯齿会糊成 2px)。
|
{
|
||||||
FillPixels(g, pixels.left, pixels.top, width, kEdgeStroke, color); // 上
|
// 四边:统一 1px,用实心矩形而不是 `DrawRectangle`
|
||||||
FillPixels(g, pixels.left, pixels.bottom, width, kEdgeStroke, color); // 下
|
//(后者会因笔宽奇偶而偏移半像素,且抗锯齿会糊成 2px)。
|
||||||
FillPixels(g, pixels.left, pixels.top, kEdgeStroke, height, color); // 左
|
FillPixels(g, pixels.left, pixels.top, width, kEdgeStroke, color); // 上
|
||||||
FillPixels(g, pixels.right, pixels.top, kEdgeStroke, height, color); // 右
|
FillPixels(g, pixels.left, pixels.bottom, width, kEdgeStroke, color); // 下
|
||||||
|
FillPixels(g, pixels.left, pixels.top, kEdgeStroke, height, color); // 左
|
||||||
|
FillPixels(g, pixels.right, pixels.top, kEdgeStroke, height, color); // 右
|
||||||
|
}
|
||||||
|
|
||||||
// (2) 四个角:加粗成 ⌜ ⌝ ⌞ ⌟ 包角 —— 这是"一眼定位元素边界"的关键,
|
// 四个角:加粗成 ⌜ ⌝ ⌞ ⌟ 包角(粗细见上)。
|
||||||
// 即使多个矩形共边也能靠角的形状分辨层次。
|
|
||||||
const int len = std::max(1, std::min(cornerLen, std::max(1, std::min(width, height))));
|
|
||||||
const int thick = std::min(cornerThick, std::max(1, std::min(width, height)));
|
|
||||||
// 左上
|
// 左上
|
||||||
FillPixels(g, pixels.left, pixels.top, len, thick, color);
|
FillPixels(g, pixels.left, pixels.top, cornerLen, cornerThick, color);
|
||||||
FillPixels(g, pixels.left, pixels.top, thick, len, color);
|
FillPixels(g, pixels.left, pixels.top, cornerThick, cornerLen, color);
|
||||||
// 右上
|
// 右上
|
||||||
FillPixels(g, pixels.right - len + 1, pixels.top, len, thick, color);
|
FillPixels(g, pixels.right - cornerLen + 1, pixels.top, cornerLen, cornerThick, color);
|
||||||
FillPixels(g, pixels.right - thick + 1, pixels.top, thick, len, color);
|
FillPixels(g, pixels.right - cornerThick + 1, pixels.top, cornerThick, cornerLen, color);
|
||||||
// 左下
|
// 左下
|
||||||
FillPixels(g, pixels.left, pixels.bottom - thick + 1, len, thick, color);
|
FillPixels(g, pixels.left, pixels.bottom - cornerThick + 1, cornerLen, cornerThick, color);
|
||||||
FillPixels(g, pixels.left, pixels.bottom - len + 1, thick, len, color);
|
FillPixels(g, pixels.left, pixels.bottom - cornerLen + 1, cornerThick, cornerLen, color);
|
||||||
// 右下
|
// 右下
|
||||||
FillPixels(g, pixels.right - len + 1, pixels.bottom - thick + 1, len, thick, color);
|
FillPixels(g, pixels.right - cornerLen + 1, pixels.bottom - cornerThick + 1, cornerLen,
|
||||||
FillPixels(g, pixels.right - thick + 1, pixels.bottom - len + 1, thick, len, color);
|
cornerThick, color);
|
||||||
|
FillPixels(g, pixels.right - cornerThick + 1, pixels.bottom - cornerLen + 1, cornerThick,
|
||||||
|
cornerLen, color);
|
||||||
|
|
||||||
g.Restore(state);
|
g.Restore(state);
|
||||||
}
|
}
|
||||||
|
|
||||||
void UiDebugPaintBoxList(gd::Graphics& g, const UiDebugBoxList& boxes,
|
void UiDebugPaintBoxList(gd::Graphics& g, const UiDebugBoxList& boxes)
|
||||||
const UiDebugPaintStyle& style)
|
|
||||||
{
|
{
|
||||||
if (boxes.Empty())
|
if (boxes.Empty())
|
||||||
{
|
{
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 浅层先画、深层后画:深层的包角不会被父级的边盖住。
|
// ⚠️ 排序键是 `(layer, depth)`:
|
||||||
|
// * `layer` 保证"后收集的(更靠上的浮层)压住先收集的" —— 没有它,信号面板的行边界
|
||||||
|
// 会盖在右键弹出的二级菜单上面;
|
||||||
|
// * `depth` 保证同一层内先画父再画子,子元素的彩色包角不会被父的边压住。
|
||||||
std::vector<const UiDebugBox*> ordered;
|
std::vector<const UiDebugBox*> ordered;
|
||||||
ordered.reserve(boxes.Count());
|
ordered.reserve(boxes.Count());
|
||||||
for (const UiDebugBox& box : boxes.Items())
|
for (const UiDebugBox& box : boxes.Items())
|
||||||
@@ -189,39 +267,54 @@ namespace jdi
|
|||||||
}
|
}
|
||||||
std::stable_sort(ordered.begin(), ordered.end(),
|
std::stable_sort(ordered.begin(), ordered.end(),
|
||||||
[](const UiDebugBox* lhs, const UiDebugBox* rhs)
|
[](const UiDebugBox* lhs, const UiDebugBox* rhs)
|
||||||
{ return lhs->depth < rhs->depth; });
|
{
|
||||||
|
if (lhs->layer != rhs->layer)
|
||||||
|
{
|
||||||
|
return lhs->layer < rhs->layer;
|
||||||
|
}
|
||||||
|
return lhs->depth < rhs->depth;
|
||||||
|
});
|
||||||
|
|
||||||
for (const UiDebugBox* box : ordered)
|
for (const UiDebugBox* box : ordered)
|
||||||
{
|
{
|
||||||
UiDebugPaintBounds(g, box->rect, box->depth);
|
// ⚠️ 遮挡:浮层(菜单 / 拾色器)是不透明的,它上面的内容不该出现下层组件的边框线。
|
||||||
|
// 仅靠 layer 排序只能决定“两个 box 重叠时谁压谁”,不能阻止“先画的线仍然可见”,
|
||||||
if (box->tag.empty() || style.font == nullptr)
|
// 因此这里把**更高层**的遮挡矩形从裁剪区里排除。
|
||||||
|
bool occluded = false;
|
||||||
|
gd::Region region;
|
||||||
|
bool regionReady = false;
|
||||||
|
for (const UiDebugBoxList::Occluder& occluder : boxes.Occluders())
|
||||||
{
|
{
|
||||||
|
if (occluder.layer <= box->layer)
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (!regionReady)
|
||||||
|
{
|
||||||
|
// 以“整个客户区”为起点(足够大的矩形,超出窗口的部分自然不会被画到)。
|
||||||
|
const gd::RectF everything(-100000.0f, -100000.0f, 200000.0f, 200000.0f);
|
||||||
|
region.MakeInfinite();
|
||||||
|
region.Intersect(everything);
|
||||||
|
regionReady = true;
|
||||||
|
}
|
||||||
|
region.Exclude(occluder.rect);
|
||||||
|
occluded = true;
|
||||||
|
}
|
||||||
|
if (!occluded)
|
||||||
|
{
|
||||||
|
UiDebugPaintBoundsClipped(g, box->rect, box->clip, box->depth);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ⚠️ **尺寸门槛**:只在"装得下标签"的矩形上画标签。
|
// 已有裁剪矩形时先与它求交,再设进 Graphics(region 天然支持这种“挖洞”裁剪)。
|
||||||
// 复选框、色块、✕ 这类小方框彼此紧邻,每个都贴一条文字会连成一片糊字,
|
if (box->clip.Width > 0.0f && box->clip.Height > 0.0f)
|
||||||
// 反而看不出边界 —— 它们的归属靠包角形状与颜色层级就能分辨。
|
|
||||||
const float scale = (style.scale > 0.1f) ? style.scale : 1.0f;
|
|
||||||
if (box->rect.Width < 56.0f * scale || box->rect.Height < 16.0f * scale)
|
|
||||||
{
|
{
|
||||||
continue;
|
region.Intersect(box->clip);
|
||||||
}
|
}
|
||||||
|
const gd::GraphicsState state = g.Save();
|
||||||
// 标签贴在**左上角内侧**,带深色底衬(内容可能很亮,白字直接压上去会看不清)。
|
g.SetClip(®ion, gd::CombineModeIntersect);
|
||||||
// ⚠️ GDI 文本不受 GDI+ 裁剪约束 ⇒ 用 `UiTextClipped` 明确给出裁剪矩形。
|
UiDebugPaintBoundsClipped(g, box->rect, gd::RectF(), box->depth);
|
||||||
const float textWidth = UiMeasureTextWidth(style.font, box->tag);
|
g.Restore(state);
|
||||||
const float padX = 3.0f * scale;
|
|
||||||
const float padY = 1.0f * scale;
|
|
||||||
const float height = std::round(15.0f * scale);
|
|
||||||
const gd::RectF backdrop(box->rect.X + 2.0f * scale, box->rect.Y + 2.0f * scale,
|
|
||||||
textWidth + padX * 2.0f, height);
|
|
||||||
UiFillRect(g, backdrop, kTagBackdrop);
|
|
||||||
|
|
||||||
const gd::RectF text(backdrop.X + padX, backdrop.Y, textWidth,
|
|
||||||
std::max(1.0f, backdrop.Height - padY * 2.0f));
|
|
||||||
UiTextClipped(g, box->tag, style.font, text, kTagInk, TextAlign::LEFT, backdrop);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -85,18 +85,18 @@ namespace jdi
|
|||||||
EnsureRows();
|
EnsureRows();
|
||||||
|
|
||||||
// ── 层级 1:面板内部的四个功能分区 ────────────────────────────────
|
// ── 层级 1:面板内部的四个功能分区 ────────────────────────────────
|
||||||
boxes.Add(m_headerRect, 1, L"header");
|
boxes.Add(m_headerRect, 1);
|
||||||
boxes.Add(m_filterRect, 1, L"filter");
|
boxes.Add(m_filterRect, 1);
|
||||||
boxes.Add(m_listRect, 1, L"list");
|
boxes.Add(m_listRect, 1);
|
||||||
boxes.Add(m_styleRect, 1, L"style");
|
boxes.Add(m_styleRect, 1);
|
||||||
|
|
||||||
// ── 层级 2:分区内部的固定控件 ────────────────────────────────────
|
// ── 层级 2:分区内部的固定控件 ────────────────────────────────────
|
||||||
boxes.Add(m_filterRect, 2); // 输入框外框(与分区边框区分)
|
boxes.Add(m_filterRect, 2); // 输入框外框(与分区边框区分)
|
||||||
boxes.Add(FilterFieldRect(), 3, L"field");
|
boxes.Add(FilterFieldRect(), 3);
|
||||||
boxes.Add(FilterClearRect(), 3, L"x");
|
boxes.Add(FilterClearRect(), 3);
|
||||||
boxes.Add(m_toggleAllRect, 2);
|
boxes.Add(m_toggleAllRect, 2);
|
||||||
|
|
||||||
boxes.Add(m_scrollBarRect, 2, L"scroll");
|
boxes.Add(m_scrollBarRect, 2);
|
||||||
boxes.Add(ScrollThumbRect(), 3);
|
boxes.Add(ScrollThumbRect(), 3);
|
||||||
|
|
||||||
// ── 样式区:五行 + 每行内部的色块/按钮/滑轨/数值 ──────────────────
|
// ── 样式区:五行 + 每行内部的色块/按钮/滑轨/数值 ──────────────────
|
||||||
@@ -108,7 +108,7 @@ namespace jdi
|
|||||||
{
|
{
|
||||||
boxes.Add(swatch, 3);
|
boxes.Add(swatch, 3);
|
||||||
}
|
}
|
||||||
boxes.Add(m_customChipRect, 3, L"custom");
|
boxes.Add(m_customChipRect, 3);
|
||||||
for (const gd::RectF& mode : m_modeRects)
|
for (const gd::RectF& mode : m_modeRects)
|
||||||
{
|
{
|
||||||
boxes.Add(mode, 3);
|
boxes.Add(mode, 3);
|
||||||
@@ -117,15 +117,15 @@ namespace jdi
|
|||||||
{
|
{
|
||||||
boxes.Add(adjust, 3);
|
boxes.Add(adjust, 3);
|
||||||
}
|
}
|
||||||
boxes.Add(m_widthTrackRect, 3, L"track");
|
boxes.Add(m_widthTrackRect, 3);
|
||||||
boxes.Add(m_widthValueRect, 3, L"value");
|
boxes.Add(m_widthValueRect, 3);
|
||||||
boxes.Add(m_opacityTrackRect, 3, L"track");
|
boxes.Add(m_opacityTrackRect, 3);
|
||||||
boxes.Add(m_opacityValueRect, 3, L"value");
|
boxes.Add(m_opacityValueRect, 3);
|
||||||
|
|
||||||
// ── 「目标」行(样式区顶部,展示当前选中信号) ────────────────────
|
// ── 「目标」行(样式区顶部,展示当前选中信号) ────────────────────
|
||||||
boxes.Add(m_targetRowRect, 2, L"target");
|
boxes.Add(m_targetRowRect, 2);
|
||||||
boxes.Add(m_targetNameRect, 3, L"name");
|
boxes.Add(m_targetNameRect, 3);
|
||||||
boxes.Add(m_targetBadgeRect, 3, L"G");
|
boxes.Add(m_targetBadgeRect, 3);
|
||||||
|
|
||||||
// ── 列表里**当前可见**的行,以及每行内部的元素 ────────────────────
|
// ── 列表里**当前可见**的行,以及每行内部的元素 ────────────────────
|
||||||
// 被滚出列表的行不登记,否则边界会糊到列表区之外。
|
// 被滚出列表的行不登记,否则边界会糊到列表区之外。
|
||||||
@@ -144,7 +144,7 @@ namespace jdi
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
boxes.Add(rect, 2, L"row");
|
boxes.Add(rect, 2);
|
||||||
|
|
||||||
const ListRow& item = m_rows[static_cast<std::size_t>(row)];
|
const ListRow& item = m_rows[static_cast<std::size_t>(row)];
|
||||||
const bool isGroup = (item.kind == RowKind::GROUP);
|
const bool isGroup = (item.kind == RowKind::GROUP);
|
||||||
@@ -157,16 +157,15 @@ namespace jdi
|
|||||||
const gd::RectF checkRect(baseX + kDisclosureWidth * m_scale,
|
const gd::RectF checkRect(baseX + kDisclosureWidth * m_scale,
|
||||||
centerY - kCheckSize * m_scale * 0.5f,
|
centerY - kCheckSize * m_scale * 0.5f,
|
||||||
kCheckSize * m_scale, kCheckSize * m_scale);
|
kCheckSize * m_scale, kCheckSize * m_scale);
|
||||||
boxes.Add(disclosureRect, 3, L"disclose");
|
boxes.Add(disclosureRect, 3);
|
||||||
boxes.Add(checkRect, 3, L"check");
|
boxes.Add(checkRect, 3);
|
||||||
|
|
||||||
if (isGroup)
|
if (isGroup)
|
||||||
{
|
{
|
||||||
const float labelLeft = checkRect.X + checkRect.Width + 8.0f * m_scale;
|
const float labelLeft = checkRect.X + checkRect.Width + 8.0f * m_scale;
|
||||||
boxes.Add(gd::RectF(labelLeft, rect.Y, GroupLabelWidth(row), rect.Height), 3,
|
boxes.Add(gd::RectF(labelLeft, rect.Y, GroupLabelWidth(row), rect.Height), 3);
|
||||||
L"group");
|
boxes.Add(GroupStatsRect(row), 3);
|
||||||
boxes.Add(GroupStatsRect(row), 3, L"count");
|
boxes.Add(GroupCloseRect(row), 3);
|
||||||
boxes.Add(GroupCloseRect(row), 3, L"x");
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -174,19 +173,19 @@ namespace jdi
|
|||||||
const gd::RectF swatchRect(checkRect.X + checkRect.Width + 6.0f * m_scale,
|
const gd::RectF swatchRect(checkRect.X + checkRect.Width + 6.0f * m_scale,
|
||||||
centerY - kSwatchSize * m_scale * 0.5f,
|
centerY - kSwatchSize * m_scale * 0.5f,
|
||||||
kSwatchSize * m_scale, kSwatchSize * m_scale);
|
kSwatchSize * m_scale, kSwatchSize * m_scale);
|
||||||
boxes.Add(swatchRect, 3, L"swatch");
|
boxes.Add(swatchRect, 3);
|
||||||
boxes.Add(RowNameRect(row), 3, L"name");
|
boxes.Add(RowNameRect(row), 3);
|
||||||
if (SignalBadgeVisible(ref))
|
if (SignalBadgeVisible(ref))
|
||||||
{
|
{
|
||||||
boxes.Add(SignalBadgeRect(row), 3, L"G");
|
boxes.Add(SignalBadgeRect(row), 3);
|
||||||
}
|
}
|
||||||
boxes.Add(SignalRemoveRect(row), 3, L"x");
|
boxes.Add(SignalRemoveRect(row), 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── 内联编辑框(正在重命名时才有意义) ───────────────────────────
|
// ── 内联编辑框(正在重命名时才有意义) ───────────────────────────
|
||||||
if (m_editField != StyleEditField::NONE)
|
if (m_editField != StyleEditField::NONE)
|
||||||
{
|
{
|
||||||
boxes.Add(EditFieldRect(), 4, L"edit");
|
boxes.Add(EditFieldRect(), 4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -502,7 +502,7 @@ namespace jdi
|
|||||||
// 关闭按钮是「标签条内部的子块」,控件树里没有对应节点(由标签条控件自绘)⇒ 单独登记。
|
// 关闭按钮是「标签条内部的子块」,控件树里没有对应节点(由标签条控件自绘)⇒ 单独登记。
|
||||||
for (const TabItem& tab : m_tabs)
|
for (const TabItem& tab : m_tabs)
|
||||||
{
|
{
|
||||||
boxes.Add(tab.closeRect, 2, L"x");
|
boxes.Add(tab.closeRect, 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -482,3 +482,41 @@ protected:
|
|||||||
* 「工具栏带以下」区域哈希与上一轮**逐一相同**(证明改动只落在工具栏带内);
|
* 「工具栏带以下」区域哈希与上一轮**逐一相同**(证明改动只落在工具栏带内);
|
||||||
* `lbcheck` 21/21、`rendercheck` FUNC 7/7、`uicheck` 69/69;
|
* `lbcheck` 21/21、`rendercheck` FUNC 7/7、`uicheck` 69/69;
|
||||||
* 打开开关后:每行的复选框/色块/名称/GX 徽标/✕、每个网格的 GX 徽标与图例、每个浮层控件都有独立包角框。
|
* 打开开关后:每行的复选框/色块/名称/GX 徽标/✕、每个网格的 GX 徽标与图例、每个浮层控件都有独立包角框。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 第八阶段计划(2026-10-28 第十轮):边界观感自适应 + 残留与层级缺陷修复
|
||||||
|
|
||||||
|
> 用户反馈:① 包角对小元素来说太粗(小方框直接变成粗描边);② 不需要黑色底衬的文字标签;
|
||||||
|
> ③ 加载 MF4-Record.MF4 全部信号独立网格后,按住左键拖动网格滚动条快速滚动会出现大量
|
||||||
|
> 绘制残留(工具栏与网格区域都有),松开并移动鼠标才消失;④ 右键二级菜单上被下层元素的
|
||||||
|
> 边界线覆盖,干扰观察菜单布局。
|
||||||
|
|
||||||
|
## 任务清单
|
||||||
|
|
||||||
|
| # | 任务 | 验证手段 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| P8-1 | 包角粗细/长度按矩形短边自适应;小方框只画角不画边;过小则不画 | 截图放大 3 倍核对 |
|
||||||
|
| P8-2 | 删除文字标签(连同 `UiDebugPaintStyle`),降低体积与视觉噪声 | 编译 + 体积 |
|
||||||
|
| P8-3 | 定位并修复「拖网格滚动条时的绘制残留」 | 新增离屏探针 `.preflight/lbresid` |
|
||||||
|
| P8-4 | 修复 `PlotView` 误用 `m_decorRects`(位图坐标系)产生的跨工具栏幽灵框 | 同上(box 清单打印) |
|
||||||
|
| P8-5 | 调试叠加层开启时强制绘图区整幅重绘(禁用三条快路径) | 同上(同状态两帧必须逐像素相同) |
|
||||||
|
| P8-6 | box 增加 `clip`(组件地盘),组件内越界元素不再画到邻居上 | 同上(差异 bbox 不得越过绘图区上沿) |
|
||||||
|
| P8-7 | 层级:`(layer, depth)` 双排序键 + 浮层 `occluder` 挖洞 | 新增探针 `.preflight/lbzorder`(4 条断言) |
|
||||||
|
| P8-8 | 文档与共享记忆同步;`TargetCheck.exe` < 900 KiB | 构建 |
|
||||||
|
|
||||||
|
## 风险与对策
|
||||||
|
|
||||||
|
| 风险 | 对策 |
|
||||||
|
| --- | --- |
|
||||||
|
| 强制整幅重绘让调试模式变慢 | 只在开关打开时生效;关闭立即恢复快路径 |
|
||||||
|
| `Region::Exclude` 影响其他绘制 | 只在 `Save/Restore` 内临时 `SetClip`,且仅在存在遮挡时才走该分支 |
|
||||||
|
| 裁剪把紧贴边界的包角裁掉 | 裁剪用 `floor/ceil` 向外取整(宁可多一像素) |
|
||||||
|
| 移除标签后难以辨认 box 归属 | 层级配色(青蓝/品红/琥珀/绿)+ 包角形状 |
|
||||||
|
|
||||||
|
## 完成判据
|
||||||
|
|
||||||
|
* 零 warning;`lbresid` 5/5、`lbzorder` 4/4、`lbcheck` 21/21、`uicheck` 69/69;
|
||||||
|
* `rendercheck` 的「工具栏带以下」区域哈希与上一轮**逐一相同**、FUNC 7/7;
|
||||||
|
* 拖动滚动条期间工具栏区域像素**完全不变**,且同状态两帧**逐像素相同**;
|
||||||
|
* 菜单/二级子菜单区域内不出现下层组件的边界色。
|
||||||
@@ -499,3 +499,83 @@ rendercheck FUNC 7/7 PASS
|
|||||||
* 齿轮图标在 22px 时,"齿从环中心线伸出"会让齿被环的描边吃掉,看起来只剩一个甜甜圈。
|
* 齿轮图标在 22px 时,"齿从环中心线伸出"会让齿被环的描边吃掉,看起来只剩一个甜甜圈。
|
||||||
必须让**齿占最外一圈、外环缩到 0.54R**,齿才会明显。
|
必须让**齿占最外一圈、外环缩到 0.54R**,齿才会明显。
|
||||||
* 中文不能写进 `.ps1`(PS 5.1 按 GBK 读),文本块要落到 UTF-8 数据文件再由 ASCII 脚本拼接。
|
* 中文不能写进 `.ps1`(PS 5.1 按 GBK 读),文本块要落到 UTF-8 数据文件再由 ASCII 脚本拼接。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 第十轮(2026-10-28):包角自适应 + 文字标签移除 + 绘制残留与层级缺陷修复
|
||||||
|
|
||||||
|
### 进度总览
|
||||||
|
|
||||||
|
| # | 任务 | 状态 | 验证 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| 1 | 包角粗细/长度按短边自适应 | ✅ | 3 倍放大截图 |
|
||||||
|
| 2 | 小方框只画角、不画边 | ✅ | 同上 |
|
||||||
|
| 3 | 删除文字标签与 `UiDebugPaintStyle` | ✅ | 体积 −1.5 KB |
|
||||||
|
| 4 | 修复拖滚动条时的绘制残留(三条快路径) | ✅ | `.preflight/lbresid` |
|
||||||
|
| 5 | 修复 `m_decorRects` 幽灵框 | ✅ | box 清单打印 |
|
||||||
|
| 6 | box `clip`(组件地盘) | ✅ | 差异 bbox 不再越过绘图区上沿 |
|
||||||
|
| 7 | `(layer, depth)` 双排序键 | ✅ | `.preflight/lbzorder` |
|
||||||
|
| 8 | 浮层 `occluder` 挖洞 | ✅ | 菜单区 `amber=0 green=0` |
|
||||||
|
| 9 | 文档 + 共享记忆 | ✅ | — |
|
||||||
|
|
||||||
|
### 1. 描边按尺寸自适应(修复"小元素变成粗描边")
|
||||||
|
|
||||||
|
旧规则:四角固定 3–4px、四边 1px。对 15px 的复选框来说,3px 包角占短边 20%,看起来就是粗边框。
|
||||||
|
|
||||||
|
新规则(全部以**短边**为基准):
|
||||||
|
|
||||||
|
| 量 | 规则 |
|
||||||
|
| --- | --- |
|
||||||
|
| 四边 | 固定 1 设备像素 |
|
||||||
|
| 包角粗细 | `min(基础值 4/3, 短边/10)`,再夹到 `[1, 短边/4]` |
|
||||||
|
| 包角长度 | `min(14, 短边/3)`,且不小于包角粗细 |
|
||||||
|
| 短边 ≤ 12 | **只画四个 L 形角标记、不画边**(一圈连续描边会让小方框显得"被框住") |
|
||||||
|
| 短边 ≤ 5 | 完全不画(再画就盖住元素本身) |
|
||||||
|
| 内缩 | 仅层级 > 0 **且短边 ≥ 10** 时内缩 1px |
|
||||||
|
|
||||||
|
同时**删除了文字标签**(含 `UiDebugPaintStyle`):黑底白字在小元素上必然连成一片,
|
||||||
|
且体积上省掉约 1.5 KB。
|
||||||
|
|
||||||
|
### 2. 绘制残留:三个独立成因,逐个修复
|
||||||
|
|
||||||
|
| # | 成因 | 修复 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| R1 | `PlotView::CollectDebugBoxes` 读了 `m_decorRects` —— 那是**装饰层位图缓存**的登记矩形,坐标处在**位图/图层坐标系**(带负 Y、超出绘图区)。于是出现 `(472,-27 1213x101)` 这类**横跨工具栏的幽灵巨框** | 不再读 `m_decorRects`;只保留 `LaneBadgeRect` 与 `m_legendHits`(屏幕坐标) |
|
||||||
|
| R2 | `Paint` 的三条快路径(静态场景贴图 / 宽基底贴图 / 样式补丁)只重画**变化的部分**,而调试边框是画在整个窗口上的叠加内容 ⇒ 上一帧的边框残留在未被重画的像素上 | 新增 `PlotView::SetForceFullRepaint(bool)`:开启调试叠加层时禁用全部快路径 |
|
||||||
|
| R3 | 组件内元素可能落在自己地盘之外(滚出可视区的 `lane.rect` Y 为负),不裁剪就画到工具栏/标签栏上 | box 增加 `clip`:宿主按组件 `Area()` 设置,`Add()` 跳过无交集、绘制时求交 |
|
||||||
|
|
||||||
|
另外把 `Render` 的 `fullChrome` 也并入 `m_showLayoutBounds`,保证装饰区每帧都是完整一帧。
|
||||||
|
|
||||||
|
### 3. 层级:`(layer, depth)` 双排序键 + 浮层挖洞
|
||||||
|
|
||||||
|
* `layer` 由 `UiDebugBoxList::PushLayer()` 分配,宿主每收集完一个组件就 +1 ⇒ **后收集的压住先收集的**
|
||||||
|
(右键二级菜单是最后收集的浮层)。
|
||||||
|
* `depth` 在同一层内先画父再画子,子元素的彩色包角不被父的边压住。
|
||||||
|
* ⚠️ 仅靠排序**不够**:调试线画在所有内容之后,下层组件的线仍会显示在不透明菜单上面。
|
||||||
|
因此新增 `AddOccluder()`:菜单/拾色器把本体登记为遮挡矩形,绘制时对**更低层**的 box
|
||||||
|
用 `Region::Exclude` 挖洞。实测菜单区与子菜单区的琥珀/绿像素均为 **0**。
|
||||||
|
|
||||||
|
### 4. 验证数据
|
||||||
|
|
||||||
|
```
|
||||||
|
make release / make debug 零 error 零 warning
|
||||||
|
TargetCheck.exe 906,752 B(885.5 KiB,< 900 KiB)
|
||||||
|
.preflight/lbresid 5/5 toolbar-unchanged-while-scrolling / repaint-same-state-is-identical
|
||||||
|
/ toolbar-restored-by-full-repaint / residual-never-above-plot-area
|
||||||
|
/ later-layer-wins-over-earlier
|
||||||
|
INFO toolbar diff pixels=0;same-state 两帧 settled after 1 extra frame 后逐像素相同
|
||||||
|
.preflight/lbzorder 4/4 menu 区 amber=0 green=0;submenu 区 amber=0 green=0
|
||||||
|
.preflight/lbcheck 21/21
|
||||||
|
uicheck 69/69
|
||||||
|
rendercheck 「工具栏带以下」区域哈希 8/8 与上一轮逐一相同 + FUNC 7/7
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. 本轮踩到的坑
|
||||||
|
|
||||||
|
* `Region::MakeInfinite()` 之后必须 `Intersect` 一个足够大的有限矩形,否则 `Exclude` 的行为
|
||||||
|
在部分 GDI+ 版本上不可预期;这里用 `(-1e5,-1e5) + 2e5 见方`。
|
||||||
|
* 给浮层设 `clip = 菜单本体` 会把**展开到本体之外**的二级子菜单整个裁掉
|
||||||
|
(首版就是这样,子菜单一个框都没有)。正确做法是浮层不设 clip,改用它自己登记的 occluder。
|
||||||
|
* 探针判定"是否有残留"不能拿"拖拽帧 vs 松开后一帧"直接比:两者渲染路径不同
|
||||||
|
(图层预热进度不同)会得到几十万像素的**合法**差异。正确判据是
|
||||||
|
**同一状态连续两帧必须逐像素相同**。
|
||||||
@@ -439,3 +439,73 @@ uicheck 69/69
|
|||||||
3. 开关状态仍未持久化。
|
3. 开关状态仍未持久化。
|
||||||
4. `TargetCheck.exe` 已接近 900 KiB(889 KiB),`CollectDebugBoxes` 的文字常量与
|
4. `TargetCheck.exe` 已接近 900 KiB(889 KiB),`CollectDebugBoxes` 的文字常量与
|
||||||
`std::to_wstring` 是主要增量;若继续增长需要把标签文本改回静态字面量并去掉动态编号。
|
`std::to_wstring` 是主要增量;若继续增长需要把标签文本改回静态字面量并去掉动态编号。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 第八阶段报告:调试叠加层的三个真实缺陷(尺寸、残留、层级)
|
||||||
|
|
||||||
|
## 1. 症状与真实成因
|
||||||
|
|
||||||
|
用户报的三个问题看起来都像"边界画得不好",实际是**三个互不相干**的缺陷:
|
||||||
|
|
||||||
|
| 症状 | 真实成因 |
|
||||||
|
| --- | --- |
|
||||||
|
| 小元素变成粗描边 | 包角粗细是**固定值**(3–4px),没考虑元素尺寸 |
|
||||||
|
| 拖滚动条时"大量绘制残留",松开并移动鼠标才消失 | ① 我的收集代码读了**位图坐标系**的 `m_decorRects`,生成横跨工具栏的幽灵框;② 绘图区的三条快路径只重画变化区域,而调试线画在最后 ⇒ 旧线残留;③ 组件内越界元素没裁剪 |
|
||||||
|
| 右键二级菜单被下层边界线覆盖 | 只有按 `depth` 排序,没有"收集顺序/浮层"概念;且调试线画在内容之后,光是排序并不能阻止露线 |
|
||||||
|
|
||||||
|
## 2. 尺寸自适应
|
||||||
|
|
||||||
|
以短边为基准推导包角:粗细 `min(4/3, 短边/10)`(再夹到 `[1, 短边/4]`),长度 `min(14, 短边/3)`。
|
||||||
|
短边 ≤ 12 只画四个 L 形角标记(不画边),≤ 5 完全不画。于是:
|
||||||
|
|
||||||
|
* 15px 复选框 → 1px 角标记,不再"被框住";
|
||||||
|
* 40px 按钮 → 3px 包角 + 1px 边;
|
||||||
|
* 200px 区域 → 4px 包角,形状仍是 `⌜ ⌝ ⌞ ⌟`。
|
||||||
|
|
||||||
|
文字标签整块删除(含 `UiDebugPaintStyle`):黑底白字在小元素上必然糊成一片,体积也省 1.5 KB。
|
||||||
|
|
||||||
|
## 3. 残留:为什么"松开并移动鼠标"就消失
|
||||||
|
|
||||||
|
因为松开鼠标后 `m_dragMode` 回到 `NONE` 且 `m_chromeDirty` 被置位 ⇒ 走**整幅重绘**,
|
||||||
|
把上一帧残留的边框像素全部盖掉。这反过来证明残留来自"部分重画 + 叠加层"。
|
||||||
|
|
||||||
|
修法分三层:
|
||||||
|
1. **不再读位图坐标系的缓存**(`m_decorRects`),消灭幽灵框;
|
||||||
|
2. **调试模式强制整幅重绘**(`SetForceFullRepaint`),让每一帧都是完整一帧;
|
||||||
|
3. **box 带 `clip`**(组件地盘),组件内越界元素(`lane.rect` 的 Y 可以是负数)
|
||||||
|
不会画到工具栏上。
|
||||||
|
|
||||||
|
探针的判据也值得记一笔:不能拿"拖拽帧 vs 松开后一帧"比 —— 两者图层预热进度不同,
|
||||||
|
会有几十万像素的**合法**差异。正确判据是**同一状态连续两帧必须逐像素相同**。
|
||||||
|
|
||||||
|
## 4. 层级:排序不够,还要挖洞
|
||||||
|
|
||||||
|
`layer`(收集顺序)+ `depth`(父子)双排序键解决"两个 box 重叠时谁压谁"。
|
||||||
|
但调试线是画在**所有内容之后**的,下层组件的线仍然会显示在不透明菜单上 ——
|
||||||
|
于是补上 `AddOccluder()`:菜单/拾色器把本体登记为遮挡矩形,绘制更低层的 box 时
|
||||||
|
用 `Region::Exclude` 挖洞。
|
||||||
|
|
||||||
|
实测:菜单区与二级子菜单区的琥珀/绿色像素均为 **0**(既没有下层行边框,也没有被裁破的包角)。
|
||||||
|
|
||||||
|
## 5. 顺带修掉的东西
|
||||||
|
|
||||||
|
* 浮层**不能**用"本体矩形"当 clip:二级子菜单会展开到本体之外,会被整个裁掉
|
||||||
|
(首版就踩了这个坑,子菜单一个框都没有)。
|
||||||
|
* `Render` 的 `fullChrome` 并入 `m_showLayoutBounds`,装饰区也保证完整一帧。
|
||||||
|
|
||||||
|
## 6. 验证
|
||||||
|
|
||||||
|
```
|
||||||
|
lbresid 5/5 (工具栏恒等、同状态两帧恒等、差异不越过绘图区上沿、层序正确)
|
||||||
|
lbzorder 4/4 (菜单与子菜单区内 0 个下层颜色)
|
||||||
|
lbcheck 21/21 ;uicheck 69/69 ;rendercheck 区域哈希 8/8 不变 + FUNC 7/7
|
||||||
|
零 warning;TargetCheck.exe 906,752 B(885.5 KiB)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 7. 遗留
|
||||||
|
|
||||||
|
1. 调试模式下强制整幅重绘:283 个网格时帧率明显下降 —— 这是**有意的取舍**
|
||||||
|
(调试而非日常使用),但若将来要让边界常驻,需要改为"只把叠加层位图化再贴回"。
|
||||||
|
2. 菜单项逐个画框略显拥挤,可选做"只画外框 + 悬停项高亮框"。
|
||||||
|
3. 开关状态仍未持久化。
|
||||||
@@ -3031,6 +3031,8 @@ else if (panelOnly) { /* 只回送“本帧重绘过的区域并集” */ }
|
|||||||
|
|
||||||
| 2026-10-28 | DeepSeek-V4.1-Flash(**UI_Refactor 分支**) | **布局边界观感重做(四角粗/四边细)+ 全覆盖 + 几何同源(详见 §12 末尾「2026-10-28 第九轮」)**。① **描边规则改了**:四条边固定 **1 设备像素**,四个角加粗(层级 0 = 4px、其余 3px,沿边延伸 ≤14px 且 ≤ 短边一半),层级 > 0 整体**内缩 1px**(父子共边不再叠粗),**绝不填充**;整像素对齐 + `PixelOffsetModeNone` + 关抗锯齿。② **协议改为「收集 → 统一绘制」**:`UiComponent::CollectDebugBoxes(UiDebugBoxList&)`(默认只登记 `Area()`)+ `UiWidget::CollectDebugBoxes(boxes, depth)` 递归控件树;**不要**改成"所有元素继承同一基类"(会与 `PlotView` 4 层缓存 / `SignalPanel` 行位图缓存的失效体系打架)。③ **覆盖补齐**:`Toolbar` 按钮内容(新增 `UiButtonWidget::ContentRect()`)、`TabBar` ✕、`SignalPanel` 每个可见行的折起三角/复选框/色块/名称/GX 徽标/✕(组行另有组名/计数)+ 筛选框/清空✕/滚动轨道与滑块/样式 5 行与 12 色块/3 模式/3 调整/线宽与透明度轨道和数值/目标行/编辑框、`PlotView` GX 徽标/装饰层矩形/图例托底+色块+文本/**5 类浮动面板全部 20+ 字段**、`PopupMenu` 条目/可视区/轨道/滑块/二级子菜单、`ColorPickerPopup` 各控件。标签设**尺寸门槛**(< 56×16 逻辑像素不画)避免糊字。④ **性能**:`RowRect` 曾是 O(row) 逐行累加且画一行调 5 次 ⇒ 改用 `m_rowTop` 前缀和(`UpdateAnimGeometry()` 重建,长度不一致时退回累加)⇒ O(1);`ContentOffsetBeforeRow` 同步;`PanelBounds()` 收敛 6 处重复三元式。⑤ **齿轮按钮改主按钮配色**(与「导入文件」一致),图标重画(齿占最外一圈 0.66R→1.0R、外环 0.54R,否则齿被环描边吃掉只剩甜甜圈)。验证:`lbcheck` 21/21(含关闭后逐像素还原)、`rendercheck` 「工具栏带以下」区域哈希 **8/8 与上一轮逐一相同** + FUNC 7/7、`uicheck` 69/69、零警告、`TargetCheck.exe` **910,336 字节(889 KiB)**。 |
|
| 2026-10-28 | DeepSeek-V4.1-Flash(**UI_Refactor 分支**) | **布局边界观感重做(四角粗/四边细)+ 全覆盖 + 几何同源(详见 §12 末尾「2026-10-28 第九轮」)**。① **描边规则改了**:四条边固定 **1 设备像素**,四个角加粗(层级 0 = 4px、其余 3px,沿边延伸 ≤14px 且 ≤ 短边一半),层级 > 0 整体**内缩 1px**(父子共边不再叠粗),**绝不填充**;整像素对齐 + `PixelOffsetModeNone` + 关抗锯齿。② **协议改为「收集 → 统一绘制」**:`UiComponent::CollectDebugBoxes(UiDebugBoxList&)`(默认只登记 `Area()`)+ `UiWidget::CollectDebugBoxes(boxes, depth)` 递归控件树;**不要**改成"所有元素继承同一基类"(会与 `PlotView` 4 层缓存 / `SignalPanel` 行位图缓存的失效体系打架)。③ **覆盖补齐**:`Toolbar` 按钮内容(新增 `UiButtonWidget::ContentRect()`)、`TabBar` ✕、`SignalPanel` 每个可见行的折起三角/复选框/色块/名称/GX 徽标/✕(组行另有组名/计数)+ 筛选框/清空✕/滚动轨道与滑块/样式 5 行与 12 色块/3 模式/3 调整/线宽与透明度轨道和数值/目标行/编辑框、`PlotView` GX 徽标/装饰层矩形/图例托底+色块+文本/**5 类浮动面板全部 20+ 字段**、`PopupMenu` 条目/可视区/轨道/滑块/二级子菜单、`ColorPickerPopup` 各控件。标签设**尺寸门槛**(< 56×16 逻辑像素不画)避免糊字。④ **性能**:`RowRect` 曾是 O(row) 逐行累加且画一行调 5 次 ⇒ 改用 `m_rowTop` 前缀和(`UpdateAnimGeometry()` 重建,长度不一致时退回累加)⇒ O(1);`ContentOffsetBeforeRow` 同步;`PanelBounds()` 收敛 6 处重复三元式。⑤ **齿轮按钮改主按钮配色**(与「导入文件」一致),图标重画(齿占最外一圈 0.66R→1.0R、外环 0.54R,否则齿被环描边吃掉只剩甜甜圈)。验证:`lbcheck` 21/21(含关闭后逐像素还原)、`rendercheck` 「工具栏带以下」区域哈希 **8/8 与上一轮逐一相同** + FUNC 7/7、`uicheck` 69/69、零警告、`TargetCheck.exe` **910,336 字节(889 KiB)**。 |
|
||||||
|
|
||||||
|
| 2026-10-28 | DeepSeek-V4.1-Flash(**UI_Refactor 分支**) | **布局边界自适应 + 绘制残留与层级缺陷修复(详见 §12 末尾「2026-10-28 第十轮」)**。① **描边按短边自适应**(取代第九轮固定包角):四边固定 1px;包角粗细 `min(4/3, 短边/10)` 夹到 `[1, 短边/4]`;包角长度 `min(14, 短边/3)`;**短边 ≤ 12 只画 L 形角标记不画边、≤ 5 完全不画**;内缩仅层级 > 0 且短边 ≥ 10。文字标签**整体删除**(含 `UiDebugPaintStyle`,省 ~1.5KB)。② **绘制残留三个成因**:(a) `PlotView::CollectDebugBoxes` 误读 `m_decorRects`(位图坐标系,负 Y)⇒ 横跨工具栏的幽灵巨框,改为只用 `LaneBadgeRect`/`m_legendHits`;(b) `Paint` 三条快路径只重画变化区域而调试线画在最后 ⇒ 新增 `PlotView::SetForceFullRepaint(bool)`,开启边界时禁用全部快路径;(c) 组件内元素越界(`lane.rect` Y 为负)⇒ box 增加 `clip`(宿主按 `Area()` 设置,`Add()` 跳过无交集、绘制时求交)。`Render` 的 `fullChrome` 并入 `m_showLayoutBounds`。③ **层级**:`UiDebugBoxList::PushLayer()` + 按 `(layer, depth)` 稳定排序;⚠️ 仅排序不够(调试线在所有内容之后),新增 `AddOccluder()` 让菜单/拾色器把本体登记为遮挡矩形,绘制更低层 box 时用 `Region::Exclude` 挖洞;⚠️ 浮层不要设 `clip=本体`(会把展开到本体外的二级子菜单整个裁掉)。④ **验证方法论**:判断残留不能用"拖拽帧 vs 松开后一帧"(图层预热进度不同会产生几十万像素合法差异),正确判据是**同一状态连续两帧逐像素相同**。新增探针 `.preflight/lbresid`(5/5)与 `.preflight/lbzorder`(4/4);`lbcheck` 21/21、`uicheck` 69/69、`rendercheck` 区域哈希 8/8 不变 + FUNC 7/7;零 warning;`TargetCheck.exe` **906,752 字节(885.5 KiB)**。 |
|
||||||
|
|
||||||
## 11. 跨设备协作须知(起源设备视角)
|
## 11. 跨设备协作须知(起源设备视角)
|
||||||
|
|
||||||
> **本文件是唯一权威记忆**。所有设备 / Agent 共用它,**不要再新建 `agent_mem_origin.md` 等旁支记忆文件**。
|
> **本文件是唯一权威记忆**。所有设备 / Agent 共用它,**不要再新建 `agent_mem_origin.md` 等旁支记忆文件**。
|
||||||
@@ -8129,3 +8131,67 @@ rendercheck 「工具栏带以下」区域哈希 8/8 与上一轮逐一相同 +
|
|||||||
文件里的闭括号带前导缩进,用 `TrimEnd()` 会越界(`InvokeMethodOnNull`)且**开头已被删掉**,
|
文件里的闭括号带前导缩进,用 `TrimEnd()` 会越界(`InvokeMethodOnNull`)且**开头已被删掉**,
|
||||||
要在替换后逐个核对括号配对。
|
要在替换后逐个核对括号配对。
|
||||||
* 中文不能写进 `.ps1`(PS 5.1 按 GBK 读)⇒ 文本块落 UTF-8 数据文件、脚本保持纯 ASCII。
|
* 中文不能写进 `.ps1`(PS 5.1 按 GBK 读)⇒ 文本块落 UTF-8 数据文件、脚本保持纯 ASCII。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 本轮(2026-10-28 第十轮,本机):布局边界自适应 + 绘制残留与层级缺陷修复
|
||||||
|
|
||||||
|
### 1. 描边规则(**现行,取代第九轮的固定包角**)
|
||||||
|
|
||||||
|
以**短边**为基准,不再用固定 3–4px 包角:
|
||||||
|
|
||||||
|
| 量 | 规则 |
|
||||||
|
| --- | --- |
|
||||||
|
| 四边 | 固定 1 设备像素 |
|
||||||
|
| 包角粗细 | `min(4(层级0)/3(其余), 短边/10)`,夹到 `[1, 短边/4]` |
|
||||||
|
| 包角长度 | `min(14, 短边/3)`,且 ≥ 包角粗细 |
|
||||||
|
| 短边 ≤ 12 | **只画四个 L 形角标记、不画边** |
|
||||||
|
| 短边 ≤ 5 | 完全不画 |
|
||||||
|
| 内缩 | 仅层级 > 0 **且短边 ≥ 10** |
|
||||||
|
|
||||||
|
文字标签已**整体删除**(含 `UiDebugPaintStyle`):黑底白字在小元素上必糊,且省 ~1.5 KB。
|
||||||
|
|
||||||
|
### 2. 调试叠加层的三条硬约束(血泪)
|
||||||
|
|
||||||
|
1. **绝不读位图坐标系的缓存**:`m_decorRects` 是装饰层位图缓存的登记矩形(负 Y / 超出绘图区),
|
||||||
|
拿它当屏幕矩形会出现横跨工具栏的幽灵巨框。屏幕几何请用 `LaneBadgeRect` / `m_legendHits`。
|
||||||
|
2. **调试开启时必须强制整幅重绘**:`PlotView::SetForceFullRepaint(true)` 关掉三条快路径
|
||||||
|
(静态场景贴图 / 宽基底贴图 / 样式补丁),否则局部重画会让上一帧的边框残留
|
||||||
|
(症状:拖网格滚动条时工具栏与网格区域出现大量残留,松开并移动鼠标才消失)。
|
||||||
|
3. **box 必须带 `clip`(组件地盘)**:组件内元素可能越界(滚出可视区的 `lane.rect` Y 为负),
|
||||||
|
宿主按 `Area()` 设置裁剪,`Add()` 跳过无交集、绘制时求交。
|
||||||
|
|
||||||
|
### 3. 层级:排序 + 挖洞
|
||||||
|
|
||||||
|
* `UiDebugBoxList::PushLayer()`:宿主每收集完一个组件 +1(菜单/拾色器最后)。
|
||||||
|
绘制按 `(layer, depth)` 稳定排序 ⇒ 后收集的压住先收集的。
|
||||||
|
* ⚠️ 仅排序**不够**:调试线画在所有内容之后,下层组件的线仍会显示在不透明菜单上。
|
||||||
|
因此 `AddOccluder()`:菜单/拾色器登记本体为遮挡矩形,绘制**更低层** box 时用
|
||||||
|
`Region::Exclude` 挖洞。实测菜单区 / 子菜单区下层颜色像素 = **0**。
|
||||||
|
* ⚠️ 浮层**不要**设 `clip = 本体矩形`:二级子菜单会展开到本体之外,会被整个裁掉
|
||||||
|
(改用它自己登记的 occluder)。
|
||||||
|
|
||||||
|
### 4. 验证
|
||||||
|
|
||||||
|
```
|
||||||
|
lbresid 5/5 toolbar-unchanged-while-scrolling / repaint-same-state-is-identical
|
||||||
|
/ toolbar-restored-by-full-repaint / residual-never-above-plot-area
|
||||||
|
/ later-layer-wins-over-earlier
|
||||||
|
lbzorder 4/4 menu & submenu:amber=0 green=0
|
||||||
|
lbcheck 21/21 ;uicheck 69/69;rendercheck 区域哈希 8/8 不变 + FUNC 7/7
|
||||||
|
零 warning;TargetCheck.exe 906,752 B(885.5 KiB)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. 验证方法论(重要)
|
||||||
|
|
||||||
|
判断"是否有绘制残留"**不能**用"拖拽帧 vs 松开后一帧":两者图层预热进度不同,
|
||||||
|
会产生几十万像素的**合法**差异。正确判据是 **同一状态连续两帧必须逐像素相同**
|
||||||
|
(探针里先跑若干帧直到收敛,再比较相邻两帧)。
|
||||||
|
|
||||||
|
### 6. 新增探针
|
||||||
|
|
||||||
|
* `.preflight/lbresid`:MF4-Record.MF4 / 283 网格 / 拖滚动条,5 条断言 + BMP 落盘。
|
||||||
|
* `.preflight/lbzorder`:打开网格右键菜单与「实验性功能」子菜单,检查浮层区内无下层颜色。
|
||||||
|
|
||||||
|
两个探针都在 `.preflight/`(已被 gitignore),需在 `make release TARGET_FILE_NAME=TargetCheck`
|
||||||
|
之后用各自的 `build.ps1` 构建。
|
||||||
Reference in new issue
Block a user