Method and system for application window to follow position and size changes of a page element of a VSCode plugin

Abstract

The system and method for application window to follow the position and size changes of a page element of VSCode plug-in, the system comprises a page element positioning module and a window positioning service. The page element positioning module is responsible for calculating the position and size of a page element of the plug-in and sending the information to the window positioning service. When developing the plug-in, the page element positioning module is introduced into the html code of the webview, and the page element id to be positioned, the page element parent window information and the application window information are input into the page element positioning module. The window positioning service runs as a background service, is responsible for receiving the connection and communication content of the page element positioning module, and controls the position and size of the application window according to the received message by using the Linux window manager to monitor the translation of the page element parent window, so that the application window follows the position and size changes of the page element. By detecting the translation of the page element parent window through the window positioning service and sending the parent window translation message to the page element positioning module, the problem that the translation of the page element parent window cannot be detected can be avoided.

Description

Technical Field

[0001] This invention relates to the field of application window display performance optimization technology, specifically to a method and system for an application window to follow the position and size changes of a page element in the VSCode plugin. Background Technology

[0002] Visual Studio Code, or VSCode for short, is a code editor developed by Microsoft that has gained immense popularity among developers in recent years. Through plugins, VSCode's functionality can be extended, transforming it from a code editor into a versatile integrated development environment (IDE). VSCode has attracted a large number of developers through its open-source community, resulting in a vast array of plugins.

[0003] When developing VSCode plugins, it's sometimes desirable to launch a local application and have its window follow the position and size changes of a specific page element within the plugin, achieving a visually unified interface between the application window and the VSCode graphical interface. This problem is not easily solved on Linux systems.

[0004] To achieve the goal of the application window following the position and size changes of a page element in the plugin, the following is required: 1) It can know the position and size of the plugin page elements in real time, that is, it can immediately detect when the position or size of the plugin page elements changes; 2) It can control the position of the application window to be consistent with the position and size of the plugin page elements.

[0005] Using a WebView in a plugin, you can calculate the current size of an HTML element and its position relative to the screen by calling JavaScript code within the WebView's HTML. However, this method only detects changes in the window.onresize event, meaning it only detects changes in the size of the HTML element and cannot detect translations.

[0006] Using a Linux window manager, one can perceive the position, size, and status of application windows, and control their position and size. For example, the `xev` command can monitor the window position, and the `wmctrl` command can set the window position and size. Alternatively, a window management program written using Xlib can also achieve the same purpose of monitoring and setting the window position and size. However, it cannot perceive the size and position of plugin page elements. Summary of the Invention

[0007] To address the shortcomings of existing technologies, this invention provides a system for application windows to follow the position and size changes of a page element in the VSCode plugin, including a page element positioning module, a window positioning service, and a window manager, wherein: The page element positioning module is imported into the plugin page in the form of HTML code. It receives the page element ID, the parent window information of the page element, and the application window information of the page element to be positioned. The window positioning service connects to the page element positioning module to receive registration messages from the page element positioning module, record page element IDs, parent window information, and application window information, launch the application window using the window manager, and set the application window according to the initial position and size of the page element in the registration message received from the page element positioning module; simultaneously, it monitors the translation of the parent window of the page element using the window manager based on the parent window information and sends the parent window translation message to the page element positioning module; and it receives the position and size information of the page element relative to the screen sent by the page element positioning module and adjusts the position and size of the application window accordingly using the window manager. Window managers are used to monitor the panning events of the parent window of page elements and to set the position and size of application windows. This can be achieved using window manager tools available in Linux systems, such as the xev tool for monitoring window panning changes and wmctrl for setting window position and size; alternatively, window monitoring and setting programs can be written using the Xlib library.

[0008] The page element positioning module calculates the position and size of the registered page element relative to the screen based on the page element ID and sends it to the window positioning service.

[0009] The present invention also provides a method for an application window to follow the position and size changes of a page element in the VSCode plugin, comprising the following steps: Step S1: When developing the plugin, import the page element positioning module into the HTML code of the webview, and input the page element ID to be positioned, the parent window information of the page element, and the application window information into the page element positioning module; Step S2: The page element positioning module establishes a connection with the window positioning service. The page element positioning module sends the page element ID, parent window information, application window information, and initial position size of the page element to be positioned as a registration message to the window positioning service. Step S3: When the window positioning service receives the registration message from the page element positioning module, it records the page element ID, the page element's parent window information, and the application window information, and uses the window manager to start the application window based on the initial position and size of the page element. Step S4: When the parent window of a page element is shifted or an onresize event occurs, the page element positioning module calculates the position and size of the registered page element relative to the screen based on the page element ID, and sends a positioning message to the window positioning service. Step S5: The window positioning service sets the position and size of the application window through the window manager.

[0010] In step S4, the translation event of the parent window of the page element is monitored through the following mechanism: the window positioning service calls the window manager to monitor the translation event of the parent window of the page element based on the received parent window information of the page element, and sends a translation message of the parent window of the page element to the page element positioning module when the translation event occurs.

[0011] This also includes: when the page element positioning module detects that a page element is invisible, it sends an invisible message to the window positioning service. When the window positioning service receives the invisible message, it minimizes the application window using the window manager.

[0012] This also includes: when the page element positioning module detects that the page element html is closed, it sends a close message to the window positioning service and disconnects; when the window positioning service receives the close message, it uses the window manager to close the application window and disconnects.

[0013] This invention enables the application window to follow the position and size changes of a page element in the VSCode plugin, achieving visual integration between the application window and the VSCode graphical interface. When the page element is scaled, the application window scales accordingly; when the page element is panned, the application window pans accordingly. Attached Figure Description

[0014] Figure 1 The present invention is a logical architecture diagram of a system in which the application window follows the position and size changes of a certain page element in the VSCode plugin.

[0015] Figure 2 The flowchart illustrates the implementation of the method by which the application window follows the position and size changes of a page element in the VSCode plugin.

[0016] Figure 3 : Another implementation flowchart of the method of the present invention for the application window to follow the position and size changes of a certain page element in the VSCode plugin. Detailed Implementation

[0017] To gain a better understanding of the technical solution and beneficial effects of the present invention, the technical solution of the present invention and its beneficial effects are described in detail below with reference to the accompanying drawings.

[0018] To address the shortcomings of existing technologies, this invention aims to provide a method that allows an application window to follow the position and size changes of a specific page element in the VSCode plugin, achieving visual integration between the application window and the VSCode graphical interface. Specifically, a method is designed to enable the application window to follow the position and size changes of a specific page element in the VSCode plugin, achieving visual integration between the application window and the VSCode graphical interface. A window positioning service is introduced to monitor changes in the parent window of the page element, avoiding the problem of undetected parent window translation. The page element positioning module and the window positioning service work together, establishing a message mechanism that combines JavaScript code calculating the position and size of HTML elements with the Linux window manager controlling the application window.

[0019] like Figure 1 As shown, this invention consists of a page element positioning module, a window positioning service, and a Linux window manager. The page element positioning module connects and communicates with the window positioning service via WebSocket or other communication methods. The Linux window manager can be implemented using window manager tools available in the Linux system, such as the xev tool to monitor window translation changes and wmctrl to set window position and size; alternatively, window monitoring and window setting programs can be written using the Xlib library.

[0020] The page element positioning module is responsible for calculating the position and size of a specific page element in the plugin and sending this information to the window positioning service. The page element positioning module is provided as JavaScript code or an npm module. When developing plugins, users typically use a webview to create the plugin page. The page element positioning module is included in the webview's HTML code, and the ID of the page element to be positioned, its parent window information, the application window information, and the initial position and size of the page element are input into the module. The window positioning service runs as a background service. It receives connections and communication from the page element positioning module and, based on the received messages, uses the Linux window manager to monitor the translation of the page element's parent window and control the application window's position and size. This method ensures that the application window follows the changes in the page element's position and size. The window positioning service uses the Linux window manager to monitor the translation of the page element's parent window and sends the parent window translation message to the page element positioning module, avoiding the problem of undetected parent window translation.

[0021] like Figure 2 , Figure 3 As shown: 1) When developing a plugin, users can import the page element positioning module into the HTML code of the webview and input the page element ID, parent window information, and application window information of the page element to be positioned into the page element positioning module.

[0022] 2) When a user initiates the follow service, the page element positioning module establishes a WebSocket connection with the window positioning service. The page element positioning module sends the ID of the page element to be positioned, the parent window information of the page element, the application window information, and the initial position and size of the page element (calculated based on the page element ID) as a registration message to the window positioning service. Upon receiving the registration message from the page element positioning module, the window positioning service records the page element ID, the parent window information of the page element, and the application window information. It then launches the application window using the Linux window manager, sets the application window according to the received initial position and size of the page element, and uses the Linux window manager to monitor the translation of the parent window of the page element.

[0023] 3) When the window positioning service detects a parent window translation event of a page element through the Linux window manager, it sends a parent window translation message to the page element positioning module. Upon receiving the parent window translation message, the page element positioning module calculates the position and size of the registered page element relative to the screen based on the page element ID, and then sends a positioning message to the window positioning service.

[0024] 4) When the page element positioning module receives the window.onresize event of the html element, it calculates the position and size of the registered page element relative to the screen based on the page element ID, and sends a positioning message to the window positioning service.

[0025] 5) When the window positioning service receives the positioning message from the page element positioning module, it uses the Linux window manager to set the application window according to the page element position and size information.

[0026] 6) When the page element location module detects that a page element is not visible, it sends an invisible message to the window location service. When the window location service receives the invisible message, it minimizes the application window using the Linux window manager.

[0027] 7) When the page element location module detects that the page element (html) is closed, it sends a close message to the window location service and disconnects the WebSocket connection. Upon receiving the close message, the window location service uses the Linux window manager to close the application window and disconnects the WebSocket connection.

[0028] Although the present invention has been described using the above preferred embodiments, it is not intended to limit the scope of protection of the present invention. Any changes and modifications made by those skilled in the art to the above embodiments without departing from the spirit and scope of the present invention shall still fall within the scope of protection of the present invention. Therefore, the scope of protection of the present invention shall be defined by the claims.

Claims

1. A system in which the application window follows the position and size changes of a page element in the VSCode plugin, characterized in that, This includes a page element positioning module, a window positioning service, and a window manager, among which: The page element positioning module is imported into the plugin page in the form of HTML code. It receives the page element ID, the parent window information of the page element, and the application window information of the page element to be positioned. The window positioning service connects to the page element positioning module to receive registration messages from the page element positioning module, record page element IDs, parent window information, and application window information, launch the application window using the window manager, and set the application window according to the initial position and size of the page element in the registration message received from the page element positioning module; simultaneously, it monitors the translation of the parent window of the page element using the window manager based on the parent window information and sends the parent window translation message to the page element positioning module; and it receives the position and size information of the page element relative to the screen sent by the page element positioning module and adjusts the position and size of the application window accordingly using the window manager. Window managers are used to monitor the panning events of the parent window of page elements and set the position and size of application windows. They can be implemented using window manager tools available in Linux systems.

2. The system as described in claim 1, in which the application window follows the position and size changes of a page element in the VSCode plugin, is characterized in that: The page element positioning module calculates the position and size of the registered page element relative to the screen based on the page element ID and sends it to the window positioning service.

3. A method for applying a window to follow the position and size changes of a page element in a VSCode plugin, characterized in that... Includes the following steps: Step S1: When developing the plugin, import the page element positioning module into the HTML code of the webview, and input the page element ID to be positioned, the parent window information of the page element, and the application window information into the page element positioning module; Step S2: The page element positioning module establishes a connection with the window positioning service. The page element positioning module sends the page element ID, parent window information, application window information, and initial position size of the page element to be positioned as a registration message to the window positioning service. Step S3: When the window positioning service receives the registration message from the page element positioning module, it records the page element ID, the page element's parent window information, and the application window information, and uses the window manager to start the application window based on the initial position and size of the page element. Step S4: When the parent window of a page element is shifted or an onresize event occurs, the page element positioning module calculates the position and size of the registered page element relative to the screen based on the page element ID, and sends a positioning message to the window positioning service. Step S5: The window positioning service sets the position and size of the application window through the window manager.

4. The method for an application window to follow the position and size changes of a page element in the VSCode plugin as described in claim 3, characterized in that... In step S4, the page element parent window translation event is monitored through the following mechanism: the window positioning service calls the window manager to monitor the translation event of the page element parent window based on the received page element parent window information, and sends the page element parent window translation message to the page element positioning module when the translation event occurs.

5. The method for an application window to follow the position and size changes of a page element in the VSCode plugin as described in claim 3, characterized in that... It also includes: when the page element positioning module detects that a page element is not visible, it sends an invisible message to the window positioning service; when the window positioning service receives the page element not visible message, it uses the window manager to minimize the application window.

6. The method for an application window to follow the position and size changes of a page element in the VSCode plugin as described in claim 3, characterized in that... It also includes: when the page element positioning module detects that the page element html is closed, it sends a close message to the window positioning service and disconnects; when the window positioning service receives the close message, it uses the window manager to close the application window and disconnects.

Images