Skip to content

fix: replace FloatingPanel with translucent panel - #421

Open
JWWTSL wants to merge 1 commit into
linuxdeepin:masterfrom
JWWTSL:agent/pms-bug-bot/74d88b6860ec
Open

JWWTSL wants to merge 1 commit into
linuxdeepin:masterfrom
JWWTSL:agent/pms-bug-bot/74d88b6860ec

Conversation

@JWWTSL

@JWWTSL JWWTSL commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

Root Cause Analysis

Edit-mode toolbars used DTK.FloatingPanel which relies on InWindowBlur to cache backdrop textures. When an image is zoomed up beyond the toolbar and then scaled back, the cached texture is not refreshed, leaving stale image pixels on the toolbar surface. Git history confirms commit 576c01d6 previously fixed this by replacing FloatingPanel with a manual translucent panel, but commit 9f647527 reverted that fix and added a third FloatingPanel instance, reintroducing the bug.

Fix

Replace all three DTK.FloatingPanel instances in edit mode with Item { BoxShadow + Rectangle } theme-aware translucent panels (palette.window alpha 0.72), eliminating the InWindowBlur texture cache dependency. Accessible.ignored: true is preserved on the crop action panel Item for accessibility consistency.

Changed files:

  • src/qml/EditToolbar.qml — toolbar background
  • src/qml/EditPropertyPanel.qml — property panel background
  • src/qml/FullImageView.qml — crop action panel background

Change Safety Assessment

Code Safety

  • Risk Level: Low
  • Pure QML UI replacement, no logic or data flow changes; pattern matches the previously validated fix in commit 576c01d6
  • No new external dependencies; BoxShadow and Rectangle are existing DTK/QML types already used in the codebase

Business Impact Scope

  • Edit-mode toolbar, property panel, and crop action panel visual backgrounds
  • User scenario: zooming an image beyond the toolbar and back no longer leaves stale colors

Verification Suggestion

  1. Open an image in the viewer, enter edit mode, zoom beyond the toolbar, zoom back — verify no color residue
  2. Verify all three panels (toolbar, property panel, crop panel) display correctly
  3. Confirm visual style matches the home-screen toolbar

根因分析

编辑模式工具栏使用 DTK.FloatingPanel,其 InWindowBlur 缓存背景纹理。图片放大超过工具栏再缩小时,缓存纹理未刷新,导致工具栏残留图片颜色。Git 历史显示 commit 576c01d6 曾修复此问题,但 commit 9f647527 回退修复并新增第三处 FloatingPanel,导致 Bug 复现。

修复方案

将编辑模式三处 DTK.FloatingPanel 替换为 Item { BoxShadow + Rectangle } 主题半透明面板,消除 InWindowBlur 纹理缓存依赖。裁剪操作面板 Item 保留 Accessible.ignored: true 维持无障碍行为一致。

改动文件:

  • src/qml/EditToolbar.qml — 工具栏背景
  • src/qml/EditPropertyPanel.qml — 属性面板背景
  • src/qml/FullImageView.qml — 裁剪操作面板背景

改动安全评估

代码安全评估

  • 风险等级:低风险
  • 纯 QML UI 替换,无逻辑或数据流变更,模式与 commit 576c01d6 中已验证的修复一致
  • 无新增外部依赖,BoxShadow 和 Rectangle 为代码库中已有的 DTK/QML 类型

业务影响范围

  • 编辑模式工具栏、属性面板、裁剪操作面板的视觉背景
  • 用户场景:放大图片超过工具栏再缩小时不再残留颜色

验证建议

  1. 打开图片进入编辑模式,放大超过工具栏再缩小,验证无颜色残留
  2. 验证三处面板(工具栏、属性面板、裁剪面板)显示正常
  3. 确认视觉风格与首页工具栏一致

PMS: BUG-380001

Summary by Sourcery

Replace edit-mode floating panels with live translucent backgrounds to eliminate stale visual artifacts during image zooming.

Bug Fixes:

  • Prevent stale image colors from appearing on edit-mode panels after zooming by removing their dependency on cached backdrop textures.

Enhancements:

  • Replace edit-mode floating panels with theme-aware translucent surfaces while preserving panel shadows, borders, and crop-panel accessibility behavior.

1. Root cause: DTK.FloatingPanel uses InWindowBlur which caches
   backdrop textures; when the image is scaled up over the toolbar
   and then scaled back, stale pixels remain on the panel surface
2. Fix: replace DTK.FloatingPanel with Item { BoxShadow + Rectangle }
   using theme-aware translucent colors (palette.window alpha 0.72)
   in EditToolbar.qml, EditPropertyPanel.qml, and FullImageView.qml
3. Impact: edit-mode toolbars and crop action panel no longer retain
   stale image colors after zoom; visual style matches home toolbar

Log: Edit-mode toolbars no longer retain stale image colors after zoom

Influence:
1. Test edit toolbar after zooming image beyond toolbar then zoom back
2. Test property panel background after image zoom operations
3. Test crop action panel background after image zoom operations
4. Verify toolbar visual style consistency with home screen

fix: 替换编辑工具栏浮动面板为半透明面板

1. 根因:DTK.FloatingPanel 使用 InWindowBlur 缓存背景纹理,图片放大
   超过工具栏再缩小时,缓存纹理未刷新导致工具栏残留图片颜色
2. 方案:将 EditToolbar.qml、EditPropertyPanel.qml、FullImageView.qml
   三处 FloatingPanel 替换为 Item { BoxShadow + Rectangle } 主题半透明
   面板(palette.window alpha 0.72),不依赖纹理缓存
3. 影响:编辑模式工具栏和裁剪操作面板不再残留图片颜色,视觉风格
   与首页工具栏一致

Log: 编辑模式工具栏不再在缩放后残留图片颜色

Influence:
1. 测试放大图片超过工具栏再缩小后工具栏背景是否正常
2. 测试图片缩放操作后编辑属性面板背景是否正常
3. 测试图片缩放操作后裁剪操作面板背景是否正常
4. 验证工具栏视觉风格与首页一致性

PMS: BUG-380001
@deepin-ci-robot

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: JWWTSL

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@sourcery-ai

sourcery-ai Bot commented Oct 27, 2026

Copy link
Copy Markdown

Reviewer's Guide

The PR removes all three edit-mode FloatingPanel/InWindowBlur usages and implements rounded translucent panels using existing BoxShadow and Rectangle components, preventing stale backdrop pixels after image zooming while preserving accessibility behavior for the crop panel.

File-Level Changes

Change Details Files
Replace cached-blur FloatingPanel backgrounds with live, theme-aware translucent panel composition.
  • Replace the edit toolbar background with an Item containing DTK.BoxShadow and a rounded, semi-transparent Rectangle.
  • Apply the same shadow, border, radius, and palette.window-based alpha treatment to the edit property panel.
  • Replace the crop action FloatingPanel with an equivalent Item-based panel while preserving Accessible.ignored.
src/qml/EditToolbar.qml
src/qml/EditPropertyPanel.qml
src/qml/FullImageView.qml

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

@deepin-ci-robot

Copy link
Copy Markdown

deepin pr auto review

🤖 AI 代码审查报告

总体评分: 93 分 (通过阈值: 70分)

Pass


📊 总体评价

项目 结果
审查结论 代码审查通过
评分详情 本次提交将三个 QML 文件中的 DTK.FloatingPanel 替换为自定义半透明面板(Item + BoxShadow + Rectangle), 解决了 DTK 6.7.44 FloatingPanel 在画布缩放后保留过期背景纹理的问题。语法正确,逻辑清晰, 无安全漏洞。存在少量代码重复(三处相同的面板实现模式)和魔法数字,建议后续提取为可复用组件。 综合评分 93 分,审查通过。

🔍 详细分析

1. 语法逻辑 ✅

评价: 语法正确,逻辑清晰 ✅ 通过

潜在问题:
✅ 未发现明显问题

建议: ['在 EditPropertyPanel.qml 和 EditToolbar.qml 的 background Item 上补充 Accessible.ignored: true,保持三处实现一致']


2. 代码质量 ✅

评价: 代码结构清晰,注释完整 ✅ 通过

潜在问题:
✅ 未发现明显问题

建议: ['将重复的面板实现提取为独立的可复用 QML 组件(如 TranslucentPanel.qml),三处引用该组件,避免后续样式修改时需要同步修改三个文件']


3. 代码性能 ✅

评价: 性能良好,资源使用合理 ✅ 通过

潜在问题:
✅ 未发现明显问题

建议: ['将魔法数字提取为属性常量(如 readonly property int shadowBlur: 20),提升可读性和可维护性']


4. 代码安全 🔒

评价: 存在0个安全漏洞 ✅ 通过

🔐 发现 0 个安全漏洞

安全漏洞详情:
✅ 未发现安全漏洞

建议: []


💡 改进建议代码示例

// 建议提取为可复用组件 TranslucentPanel.qml
import QtQuick
import DTK

Item {
    id: root

    // 命名常量,消除魔法数字
    readonly property int shadowBlur: 20
    readonly property int shadowOffsetY: 6
    readonly property int panelRadius: 18
    readonly property real shadowAlpha: 0.24
    readonly property real borderAlpha: 0.12
    readonly property real backgroundAlpha: 0.72

    // 可由外部覆盖的颜色引用
    property var themeTextColor: palette.windowText
    property var backgroundColor: palette.window
    property var shadowBaseColor: palette.shadow

    DTK.BoxShadow {
        anchors.fill: panelBackground
        cornerRadius: panelBackground.radius
        hollow: true
        shadowBlur: root.shadowBlur
        shadowColor: Qt.rgba(root.shadowBaseColor.r,
                             root.shadowBaseColor.g,
                             root.shadowBaseColor.b, root.shadowAlpha)
        shadowOffsetY: root.shadowOffsetY
    }

    Rectangle {
        id: panelBackground
        anchors.fill: parent
        border.color: Qt.rgba(root.themeTextColor.r,
                              root.themeTextColor.g,
                              root.themeTextColor.b, root.borderAlpha)
        border.width: 1
        color: Qt.rgba(root.backgroundColor.r,
                       root.backgroundColor.g,
                       root.backgroundColor.b, root.backgroundAlpha)
        radius: root.panelRadius
    }
}

// 使用示例(在 EditPropertyPanel.qml 中):
// background: TranslucentPanel {
//     Accessible.ignored: true
//     themeTextColor: propertyPanel.themeTextColor
// }

本报告由 AI 代码审查工具自动生成

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants