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

[cn0809]

close: #2820

[gemini-code-assist]

Summary of Changes

Hello @cn0809, I'm Gemini Code Assist¹! 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

• The pull request was opened by cn0809.
• The changes address issue Builder UI: monitor target/property select #2820, as indicated in the description.

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. ↩

[gemini-code-assist]

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.

[Copilot]

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.

[nighca]

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

[cn0809]

/review

[xgopilot]

Good overall implementation. The target/property select redesign is clean, the legacy getVar: prefix migration is handled safely, and the sentinel value $stage for the UISelect is well-reasoned. The handlePropertyRenamed event wiring is a nice touch for keeping monitors in sync on rename. A few inline notes on cancellation propagation in checkAndNotifyMonitorError, missing abort signals in getInvalidMonitors, the MutationObserver concurrency hazard in UISelect, and a minor JSDoc gap in PropertyRenamedEvent.