Skip to content

feat(spx-gui): monitor target/property select#2859

Merged
nighca merged 4 commits intogoplus:devfrom
cn0809:issue-2820
Mar 12, 2026
Merged

feat(spx-gui): monitor target/property select#2859
nighca merged 4 commits intogoplus:devfrom
cn0809:issue-2820

Conversation

@cn0809
Copy link
Copy Markdown
Collaborator

@cn0809 cn0809 commented Feb 26, 2026

close: #2820

@gemini-code-assist
Copy link
Copy Markdown

Summary of Changes

Hello @cn0809, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly upgrades the functionality of monitor widgets by allowing users to select specific targets (stage or sprites) and their associated properties for display. This change involves a complete overhaul of the monitor's configuration UI, transitioning from a simple text input to interactive dropdowns for target and property selection. Under the hood, it integrates with the Language Server Protocol to dynamically retrieve available properties and ensures that the monitor's data model and rendering adapt seamlessly to these new capabilities.

Highlights

  • Monitor Widget Enhancements: Monitor widgets now support selecting a specific target (stage or sprite) and a property from that target to display, moving beyond global variables.
  • UI Refactor for Monitor Details: The monitor detail panel has been updated to replace the free-text value input with intuitive dropdowns for target and property selection.
  • Language Server Protocol (LSP) Integration: New LSP commands and types have been introduced to fetch available properties for a given target and to handle notifications when properties are renamed, ensuring UI consistency.
  • Monitor Data Model Update: The internal Monitor data model has been extended to include a target property, and its serialization/deserialization logic has been adjusted accordingly.
  • Dynamic UI Rendering: The monitor widget's display logic has been improved to dynamically adjust its layout based on the presence of a label and to correctly format variable names with their target prefixes.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • spx-gui/src/components/editor/code-editor/code-editor.ts
    • Imported new types Property and PropertiesTarget for LSP communication.
    • Added an asynchronous getProperties method to fetch properties for a given target using the LSP client.
  • spx-gui/src/components/editor/code-editor/common.ts
    • Defined new TypeScript types PropertiesTarget and Property to represent targets and their properties in the LSP context.
    • Introduced lspStageTarget constant for consistent stage target naming.
  • spx-gui/src/components/editor/code-editor/lsp/index.ts
    • Imported new types, commands, and notifications related to property management.
    • Registered a handler for xgoPropertyRenamedNotification to react to property renaming events from the LSP server.
    • Added workspaceExecuteCommandXGoGetProperties to facilitate executing the new LSP command for fetching properties.
    • Implemented handlePropertyRenamedNotification to update monitor widgets when a property is renamed.
    • Provided a getProperties method to the SpxLSPClient to abstract the LSP command call.
  • spx-gui/src/components/editor/code-editor/lsp/spxls/commands.ts
    • Imported the Property type for use in command definitions.
    • Defined the xgoGetProperties namespace, including its command name, parameters (XGoGetPropertiesParams), and expected result type (Property[]), for fetching properties via LSP.
  • spx-gui/src/components/editor/code-editor/lsp/spxls/notifications.ts
    • Added a new file to define xgoPropertyRenamedNotification, a custom server-to-client LSP notification for property renaming events, including its method name, direction, and parameters.
  • spx-gui/src/components/editor/common/viewer/quick-config/utils.ts
    • Added a target getter to the WidgetLocalConfig class to expose the monitor's target property.
  • spx-gui/src/components/editor/preview/stage-viewer/widgets/MonitorNode.vue
    • Conditionally rendered label-related elements based on the hasLabel computed property.
    • Adjusted the labelTextWidth update logic to reset width to 0 when no label is present.
    • Introduced minValueTextWidth and updated valueTextWidth calculation to ensure a minimum width.
    • Modified zIndex assignment to safely access labelTextRef or valueTextRef.
    • Added hasLabel and labelSectionWidth computed properties to manage dynamic layout based on label presence.
    • Updated rectConfig, valueBgConfig, and valueTextConfig to correctly position and size elements, including target-prefixed variable names.
  • spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
    • Replaced the single UITextInput for 'Value' with UISelect components for 'Target' and 'Value' (property).
    • Integrated UISelect and UISelectOption components for dynamic selection of targets and properties.
    • Implemented loadProperties to asynchronously fetch properties based on the selected target using the code editor context.
    • Added watch on props.monitor.target to reload properties when the target changes.
    • Introduced handleTargetUpdate and handlePropertyUpdate functions to manage the monitor's target and variable name state.
  • spx-gui/src/components/ui/select/UISelect.vue
    • Added onMounted and onBeforeUnmount lifecycle hooks to implement a MutationObserver.
    • Enabled re-synchronization of the selected value when child options dynamically change (e.g., due to asynchronous loading).
  • spx-gui/src/models/spx/widget/monitor.ts
    • Added an optional target property to MonitorInits and the Monitor class, defaulting to an empty string for the stage.
    • Removed the supportedTarget constant, allowing for dynamic target selection.
    • Updated the Monitor constructor to accept and initialize the new target property.
    • Modified the fromRaw static method to correctly parse and assign the target from raw monitor configuration.
    • Adjusted the export method to include the target property in the exported raw monitor configuration.
Activity
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request introduces a feature to select a target (stage or sprite) and a property for monitor widgets. The changes are well-implemented across the data model, UI components, and LSP client. A custom LSP notification for property renaming is also included. The related UISelect component has been enhanced to support asynchronously loaded options, which is a great improvement. I have one suggestion to improve code robustness.

Comment thread spx-gui/src/components/editor/code-editor/lsp/index.ts Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR implements monitor target and property selection functionality for the SPX GUI, addressing issue #2820. The changes enable monitors to watch properties on specific sprites or the stage, with UI support for selecting targets and properties dynamically loaded from the language server.

Changes:

  • Added target field to Monitor model to distinguish between stage (empty string) and sprite properties
  • Implemented UI components for selecting monitor target (stage/sprite) and property with LSP-based property lookup
  • Added automatic synchronization when sprites or properties are renamed to maintain referential integrity
  • Enhanced monitor rendering to handle empty labels and display target prefix in property values

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
tools/spxls/go.mod Updated xgolsw dependency to version with property support
tools/spxls/go.sum Updated checksums for xgolsw dependency
spx-gui/src/models/spx/widget/monitor.ts Added target field to Monitor model with getter/setter and updated export/import logic
spx-gui/src/components/ui/select/UISelect.vue Added MutationObserver to handle async-loaded options in select component
spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue Implemented target and property selection UI with LSP-based property loading
spx-gui/src/components/editor/preview/stage-viewer/widgets/MonitorNode.vue Updated monitor rendering to handle empty labels and show target prefix in values
spx-gui/src/components/editor/preview/EditorPreview.vue Added validation for monitor configuration before running project
spx-gui/src/components/editor/common/viewer/quick-config/utils.ts Exposed target getter in WidgetLocalConfig for rendering
spx-gui/src/components/editor/code-editor/lsp/spxls/notifications.ts Defined propertyRenamed notification type from LSP
spx-gui/src/components/editor/code-editor/lsp/spxls/commands.ts Added getProperties command type for LSP
spx-gui/src/components/editor/code-editor/lsp/index.ts Implemented property renamed notification handler and getProperties method
spx-gui/src/components/editor/code-editor/common.ts Added Property and PropertiesTarget types with lspStageTarget constant
spx-gui/src/components/editor/code-editor/code-editor.ts Exposed getProperties method in CodeEditor API
spx-gui/src/components/asset/index.ts Added monitor target update when sprite is renamed

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread spx-gui/src/models/spx/widget/monitor.ts
Comment thread spx-gui/src/components/ui/select/UISelect.vue
Comment thread spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue Outdated
Comment thread spx-gui/src/components/editor/preview/EditorPreview.vue Outdated
Comment thread spx-gui/src/components/ui/select/UISelect.vue
Comment thread spx-gui/src/components/editor/code-editor/lsp/index.ts Outdated
Comment thread spx-gui/src/models/spx/widget/monitor.ts Outdated
Comment thread tools/spxls/go.mod Outdated
require (
github.com/goplus/builder/tools/ai v0.0.0
github.com/goplus/xgolsw v0.16.1
github.com/goplus/xgolsw v0.16.2-0.20260226010849-bc7e940eb027
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Mark: 等 xgolsw 发布正式版本后这里更新到正式版本再合入

Comment thread spx-gui/src/components/asset/index.ts
Comment thread spx-gui/src/components/editor/code-editor/lsp/index.ts Outdated
Comment thread spx-gui/src/components/editor/code-editor/lsp/index.ts Outdated
Comment thread spx-gui/src/components/editor/preview/EditorPreview.vue Outdated
Comment thread spx-gui/src/components/editor/preview/EditorPreview.vue Outdated
Comment thread spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue Outdated
Comment thread spx-gui/src/components/ui/select/UISelect.vue
Comment thread spx-gui/src/models/spx/widget/monitor.ts Outdated
@cn0809
Copy link
Copy Markdown
Collaborator Author

cn0809 commented Feb 27, 2026

/review

Comment thread spx-gui/src/components/editor/preview/EditorPreview.vue
Comment thread spx-gui/src/components/editor/code-editor/code-editor.ts Outdated
Comment thread spx-gui/src/components/editor/code-editor/code-editor.ts Outdated
Comment thread spx-gui/src/components/ui/select/UISelect.vue
Comment thread spx-gui/src/components/editor/code-editor/lsp/index.ts Outdated
Comment thread spx-gui/src/utils/dom.ts Outdated
Comment thread spx-gui/src/models/spx/widget/widget.test.ts
Comment thread spx-gui/src/components/editor/code-editor/lsp/index.ts Outdated
Comment thread spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue Outdated
Comment thread spx-gui/src/components/editor/code-editor/code-editor.ts Outdated
Comment thread spx-gui/src/components/editor/code-editor/code-editor.ts Outdated
Comment thread spx-gui/src/components/editor/code-editor/code-editor.ts Outdated
@cn0809
Copy link
Copy Markdown
Collaborator Author

cn0809 commented Mar 11, 2026

/review

position: toLSPPosition(position),
newName
}
)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Concurrent rename race condition

onceEvent('propertyRenamed', ...) is registered before the rename request. If two rename() calls are in-flight concurrently, the second call's listener could fire on the first rename's notification (or vice versa), silently updating the wrong monitor's variable name.

Consider either serializing rename calls or associating notifications with a request correlation ID. At minimum, document that rename() must not be called concurrently.

Comment thread spx-gui/src/components/asset/index.ts Outdated
Comment thread spx-gui/src/components/editor/preview/EditorPreview.vue
Comment thread spx-gui/src/components/editor/code-editor/spx-code-editor/common.ts
Comment thread spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue Outdated
@fennoai
Copy link
Copy Markdown
Contributor

fennoai Bot commented Mar 11, 2026

Good implementation overall — the target/property select UX is clean, legacy getVar: prefix migration is handled correctly with backward compatibility, and the new getInvalidMonitors pre-run check is a nice safety net. A few issues worth addressing before merge: a concurrent-rename race in onceEvent, sequential LSP calls where parallel would work better, and a sentinel value leakage risk from crafted project files.

Comment thread spx-gui/src/components/editor/code-editor/xgo-code-editor/lsp/types.ts Outdated
Comment thread spx-gui/src/components/editor/code-editor/xgo-code-editor/code-editor.ts Outdated
Comment thread spx-gui/src/components/editor/code-editor/xgo-code-editor/code-editor.ts Outdated
lspClient.onPropertyRenamed(({ target, oldName, newName }) => {
for (const widget of spxProject.stage.widgets) {
if (widget.type === 'monitor' && widget.target === target && widget.variableName === oldName) {
widget.setVariableName(newName)
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

#2859 (comment) 所述,建议这里补充注释,说明为什么这里不需要用 action 包

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

ok, 加上了 6724179

@nighca
Copy link
Copy Markdown
Collaborator

nighca commented Mar 12, 2026

#2930 好像把这个 PR 依赖的 xgolsw、spx 改动带进来了?是的话这个 PR 应该可以直接 merge 了

@cn0809
Copy link
Copy Markdown
Collaborator Author

cn0809 commented Mar 12, 2026

#2930 好像把这个 PR 依赖的 xgolsw、spx 改动带进来了?是的话这个 PR 应该可以直接 merge 了

那个 PR 里 xgolsw、spx 不是正式版本,要等正式版本发布了在这个 PR 里更新下吗

@nighca
Copy link
Copy Markdown
Collaborator

nighca commented Mar 12, 2026

那个 PR 里 xgolsw、spx 不是正式版本,要等正式版本发布了在这个 PR 里更新下吗

等那俩发正式版本再单独提 PR 更新吧

@nighca nighca merged commit c062889 into goplus:dev Mar 12, 2026
5 checks passed
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.

Builder UI: monitor target/property select

3 participants