A method and device for drawing a chemical structural formula, and a computer device

Abstract

This invention relates to the field of chemical structure drawing, and provides an interactive method for drawing chemical structures, comprising: responding to a pointer hovering operation on the canvas, performing a hit detection to determine a target object; determining an appropriate set of drawing elements according to the type of the target object, dynamically rendering a floating menu and binding the display anchor point to the target object; responding to a primitive expansion operation triggered by the floating menu, generating a new primitive starting from the target object, and automatically transferring the display anchor point of the floating menu and the currently bound target to the endpoint object of the new primitive. This invention achieves in-situ tool rendering and automatic focus flow during continuous drawing, significantly improving the efficiency and interactive coherence of chemical structure drawing.

Description

Technical Field

[0001] This application relates to the field of chemical structure drawing technology, and in particular to a method, apparatus and computer equipment for drawing chemical structures. Background Technology

[0002] In the process of editing chemical structures and drawing reaction routes, researchers need to frequently draw and modify molecular structures or reaction routes in the structure editor.

[0003] Existing chemical structure editors typically employ a fixed sidebar toolbar interaction mode. When switching between basic drawing elements such as chemical bonds, elements, and groups during the drawing process, users need to move the mouse a considerable distance to the sidebar to select the element and then return to the canvas editing position. This repetitive operation severely disrupts the continuity of the drawing process. Furthermore, when drawing chain structures continuously, after each new atom or bond is generated, users often need to precisely click or hover to re-enable the tool, resulting in a lengthy and error-prone interaction chain. Additionally, for chemically specific operations such as isotope labeling and specific bond type replacements, existing editors lack context-based intelligent recommendation mechanisms, leading to cumbersome operations and low efficiency.

[0004] Therefore, there is an urgent need for an interactive solution that can shorten the tool selection path and support seamless continuous drawing. Summary of the Invention

[0005] To address the problems of long tool selection paths, interrupted continuous drawing interaction, and lack of contextual intelligent adaptation in existing chemical structure drawing processes, this application provides a chemical structure drawing method, apparatus, and computer equipment that achieves dynamic menu rendering based on hovering targets and automatic focus transfer during continuous drawing, thereby improving drawing efficiency and interactive continuity.

[0006] To achieve the above objectives, the present invention adopts the following technical solution:

[0007] A method for drawing chemical structures includes: responding to a cursor hovering operation on a chemical structure canvas, performing a hit detection on objects on the chemical structure canvas, and taking the hit objects as target objects, wherein the object type of the target objects includes atoms or chemical bonds; determining a set of drawing elements adapted to the object type according to the object type of the target objects, dynamically rendering a floating menu containing the set of drawing elements, and binding the display anchor point of the floating menu to the target objects; responding to a primitive expansion operation triggered by the floating menu, generating new primitives starting from the target objects, and automatically transferring the display anchor point of the floating menu and the currently bound target to the endpoint object of the new primitives to maintain the continuous display of the floating menu.

[0008] In this way, by establishing a drawing-level hit detection mechanism, the accuracy of target identification in areas with overlapping complex chemical structures is ensured; by dynamically rendering and adapting the floating menu according to the target object type, the tool is presented in place and the context is intelligently filtered, eliminating the interactive redundancy of searching for tools over long distances; by automatically transferring the display anchor point and binding the target after primitive expansion operations, the floating menu can seamlessly flow with the drawing growth direction, maintaining the flow experience of continuous drawing.

[0009] In some embodiments, determining a set of drawing elements adapted to the object type of the target object and dynamically rendering a floating menu containing the set of drawing elements includes: when the target object is an atom, rendering a floating menu containing a first set of drawing elements, the first set of drawing elements including at least one of bonding elements, ring addition elements, isotope substitution elements, and group addition elements; when the target object is a chemical bond, rendering a floating menu containing a second set of drawing elements, the second set of drawing elements including at least one of bond type substitution elements, ring fusion elements, and chemical bond deletion elements.

[0010] In this way, by distinguishing the semantic differences between atoms and chemical bonds, a differentiated set of drawing elements is provided, avoiding the interference of irrelevant tools on visual attention and improving the accuracy and efficiency of tool selection.

[0011] In some embodiments, the step of generating a new primitive starting from the target object in response to a primitive expansion operation triggered by the floating menu, and automatically transferring the display anchor point and the currently bound target of the floating menu to the endpoint object of the new primitive, includes: in response to a selection operation of a drawing element in the floating menu, executing a corresponding primitive action and obtaining action result data; if the action result data contains an automatic switching identifier, updating the currently bound target to the endpoint object of the new primitive, re-rendering the floating menu, and repositioning the display anchor point to the center position of the endpoint object; wherein, when the selection operation is a bond addition operation, the action result data contains the automatic switching identifier; when the selection operation is an isotope substitution operation or a group addition operation, maintaining the current bound target and the display anchor point unchanged; when the selection operation is a chemical bond operation, closing the floating menu and clearing the current bound target.

[0012] This clarifies the triggering boundary for automatic focus shifting, triggering the shift only after primitive expansion operations with spatial extension attributes, while maintaining the original position after attribute modification operations, ensuring that the interaction logic conforms to the user's psychological expectations and chemical drawing standards.

[0013] In some embodiments, the method further includes controlling the display and hiding of the floating menu through a session state machine, the session state machine including an idle state, a menu display state, a close delay state, and a keep-alive state; wherein, controlling the display and hiding of the floating menu through the session state machine includes: in the idle state, in response to the cursor first hovering over the target object, starting a first hover timer; when the first hover timer times out, entering the menu display state and rendering the floating menu; in the menu display state, in response to the cursor moving to a new target object, starting a target switching timer; when the target switching timer times out, updating the currently bound target and re-rendering the floating menu; in response to the cursor leaving the target object and the valid context area of ​​the floating menu, starting a close timer to enter the close delay state; in the close delay state, if the cursor enters the display area of ​​the floating menu, canceling the close timer and entering the keep-alive state; if the close timer times out, hiding the floating menu and returning to the idle state.

[0014] In this way, the multi-state transition mechanism effectively solves the problem of accidental triggering when the mouse hovers over quickly and the problem of focus preemption when switching targets. At the same time, by disabling delay and keeping the menu alive, it prevents the menu from disappearing unexpectedly when the user moves between the target and the menu, thus improving the stability and fault tolerance of the interaction.

[0015] In some embodiments, controlling the display and hiding of the floating menu via the session state machine further includes: a preset timeout threshold of 80 to 120 milliseconds for the first hover timer to filter out rapid cursor hovering operations; a preset timeout threshold of 100 to 150 milliseconds for the target switching timer to prevent the cursor from being preempted by other objects passing by during movement; a preset timeout threshold of 700 to 900 milliseconds for the shutdown timer, and it is not reset when the cursor continues to move in the blank area of ​​the chemical structure canvas; in the keep-alive state, if the cursor leaves the display area of ​​the floating menu again, the shutdown timer is restarted; in response to a global forced shutdown event, all timers are cleared and the floating menu is hidden, forcibly returning to the idle state; the global forced shutdown event includes a window defocus event, a global click on a non-menu area of ​​the chemical structure canvas, or a close quick drawing settings event.

[0016] In this way, by setting precise time thresholds and global event monitoring, the sensitivity and anti-interference capability of menu response are further balanced, ensuring the determinism and recoverability of system status under various abnormal operation scenarios.

[0017] In some embodiments, binding the display anchor point of the floating menu to the target object includes: calculating the chemical structure canvas anchor point coordinates according to the object type of the target object; when the target object is an atom, using the center point of the atom as the chemical structure canvas anchor point coordinates; when the target object is a chemical bond, using the midpoint of the bond line of the chemical bond as the chemical structure canvas anchor point coordinates; converting the chemical structure canvas anchor point coordinates into container coordinates, the conversion process incorporating a chemical structure canvas scaling factor, translation offset, and device pixel ratio; and converting the container coordinates into screen coordinates, the conversion process incorporating an offset of the chemical structure canvas container relative to the browser window, to obtain the final screen position of the display anchor point.

[0018] In this way, through a multi-level coordinate transformation system, it is ensured that the floating menu can be accurately anchored to the visual center of the target object under different scaling ratios, different device pixel ratios, and different window layouts, thus guaranteeing display consistency across platforms and resolutions.

[0019] In some embodiments, the floating menu may take the form of a circular menu or a bar menu. When the floating menu is a circular menu, the distance and angle of the cursor relative to the display anchor point are calculated based on polar coordinates. If the distance and angle simultaneously meet a preset track range condition, the cursor is determined to be within the circular menu area, and the currently bound target is frozen to prevent object switching. The first-level menu buttons of the circular menu are arranged based on a first fixed angle, and the second-level menu buttons are arranged based on a second fixed angle. When the floating menu is a bar menu, the initial display position of the bar menu is calculated. If the initial display position exceeds the container boundary of the chemical structure canvas, a vertical flip or a horizontal boundary correction is performed to determine the final display position.

[0020] This provides two menu formats that adapt to different user habits. By using pure geometric range hit detection and boundary adaptation algorithms, it solves the problems of traditional DOM event bubbling obscuring the underlying canvas and menus being invisible when they exceed the viewport, thus enhancing the flexibility and usability of the interaction.

[0021] In some embodiments, the method further includes: when the selection tool is activated, in response to a double-click operation on a blank area of ​​the chemical structure canvas, popping up a quick floating menu containing commonly used drawing elements in a preset offset direction at the double-click position; performing four-directional boundary detection on the quick floating menu, and if the quick floating menu exceeds the container boundary of the chemical structure canvas, correcting the display position of the quick floating menu.

[0022] This adds a shortcut to non-editable areas, meeting users' needs to quickly start drawing or insert annotations in blank spaces, and improving the overall coverage of the interactive system.

[0023] Furthermore, the present invention also provides an interactive device for drawing chemical structures, comprising: a target recognition module, used to respond to a cursor hovering operation on a chemical structure canvas, perform hit detection on objects on the chemical structure canvas, and take the hit objects as target objects, wherein the object type of the target objects includes atoms or chemical bonds; a menu rendering module, used to determine a set of drawing elements adapted to the object type according to the object type of the target object, dynamically render a floating menu containing the set of drawing elements, and bind the display anchor point of the floating menu to the target object; and a focus transfer module, used to respond to a primitive expansion operation triggered by the floating menu, generate a new primitive starting from the target object, and automatically transfer the display anchor point of the floating menu and the currently bound target to the endpoint object of the new primitive to maintain the continuous display of the floating menu.

[0024] Furthermore, the present invention also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the method described in any of the above embodiments.

[0025] Compared with the prior art, this application has the following technical effects:

[0026] 1. This invention constructs a dynamic menu rendering mechanism based on rendering hierarchy with accurate hit detection and context awareness, which moves the tool selection operation from the fixed sidebar to the user's current focus of attention, significantly shortening the physical path and cognitive load of human-computer interaction.

[0027] 2. This invention uses a focus-automatic transfer logic driven by primitive expansion to enable the floating menu to intelligently flow with the growth of chemical structures, eliminating interactive breakpoints of repeatedly selected nodes during continuous drawing and achieving seamless construction of chain structures.

[0028] 3. This invention combines a sophisticated session state machine with a multi-level coordinate transformation system, which effectively suppresses accidental triggering and interface flickering while ensuring the sensitivity of interactive response. It ensures operational stability and visual consistency in complex editing scenarios and changing display environments, thereby comprehensively improving the efficiency of chemical structure drawing and user experience. Attached Figure Description

[0029] Figure 1 This is a flowchart of an interactive method for drawing chemical structural formulas provided in one embodiment of this application;

[0030] Figure 2 This is a flow diagram of a session state machine provided in one embodiment of this application;

[0031] Figure 3 This is a schematic diagram of the interactive interface of a circular menu provided in one embodiment of this application;

[0032] Figure 4 This is a schematic diagram of the interactive interface of a bar menu provided in one embodiment of this application;

[0033] Figure 5 This is a schematic diagram of the interface for quick drawing settings provided in one embodiment of this application;

[0034] Figure 6 This is a structural block diagram of an interactive device for drawing chemical structural formulas provided in one embodiment of this application.

[0035] In the picture:

[0036] 100. Drawing interactive devices; 101. Target recognition module; 102. Menu rendering module; 103. Focus transfer module. Detailed Implementation

[0037] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0038] The technical solutions of the various embodiments of this application can be combined with each other, but only if they are based on the ability of a person skilled in the art to implement them. When the combination of technical solutions is contradictory or cannot be implemented, it should be considered that such combination of technical solutions does not exist and is not within the scope of protection claimed by this application.

[0039] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, specific embodiments of this application will be described in detail below with reference to the accompanying drawings.

[0040] Example 1:

[0041] like Figure 1 As shown in the figure, this embodiment provides an interactive method for drawing chemical structures. This method achieves intelligent assistance and continuous interaction in the chemical structure drawing process by constructing a hierarchical target recognition, context-aware menu rendering, and a focus flow mechanism based on operation results. The method mainly includes the following steps.

[0042] S100, in response to the cursor hovering operation on the chemical structure canvas, performs a hit detection on the chemical structure canvas and takes the hit object as the target object. The object type of the target object includes atoms or chemical bonds.

[0043] Specifically, in the rendering engine of the chemical structure editor, different types of primitives often have visual overlap or occlusion relationships. For example, the lines of a chemical bond may pass through the central region of an atom, or the element symbol text of an atom may cover the bond line. To accurately interpret the user's hovering intent, this embodiment adopts a priority detection strategy based on the rendering layer. When the cursor moves on the canvas and triggers a hover event, the system traverses and detects layer by layer from high to low according to the preset rendering stacking order. The "hit and return" detection mechanism ensures that in complex overlapping areas, the system can prioritize responding to the top-level object that the user is most likely to focus on, effectively avoiding interaction interference caused by accidental triggering of lower-level objects. It should be understood that the specific layer order can be adaptively adjusted according to the actual rendering stacking relationship, as long as the detection priority is consistent with the visual occlusion logic.

[0044] S200: Based on the object type of the target object, determine the set of drawing elements that matches the object type, dynamically render the floating menu containing the set of drawing elements, and bind the display anchor point of the floating menu to the target object.

[0045] Specifically, the floating menu is not a static toolbar with fixed content, but a dynamic interface component built in real time based on the current interaction context. After identifying the target object, the system queries a pre-defined type-function mapping table and extracts only drawing elements semantically related to the current object. For example, when the target object is identified as an atom, the system infers that the user's potential intention is to modify the atom or extend the structure from it. Therefore, the determined set of drawing elements mainly includes growth-type or attribute-modification tools such as bond addition, ring addition, isotope substitution, and group addition. When the target object is identified as a chemical bond, the system infers that the user's intention is to change the bond's properties or delete connections. Therefore, the determined set of drawing elements switches to editing tools such as bond replacement, ring fusion, and bond deletion. This differentiated content adaptation strategy significantly reduces the information entropy of the menu and reduces the cognitive load on users who need to visually search through a large number of irrelevant tools. At the same time, the system binds the display anchor point of the floating menu to the spatial coordinates of the target object, allowing the menu to appear near the user's current focus of attention, eliminating the interactive redundancy of long-distance mouse back-and-forth movement in the traditional sidebar tool mode. It should be noted that "dynamic rendering" here emphasizes the real-time generation and assembly of menu content. Its specific visual presentation form can be circular, bar-shaped, or other arbitrarily adapted forms. This embodiment does not limit this.

[0046] S300, in response to a primitive expansion operation triggered by the floating menu, generates a new primitive starting from the target object and automatically transfers the display anchor point of the floating menu and the currently bound target to the endpoint object of the new primitive to maintain the continuous display of the floating menu.

[0047] Specifically, this is the core step in achieving seamless rendering of chain structures. In chemical structure rendering, many operations have spatial extensibility, such as drawing a single bond connecting one carbon atom to another. When a user selects such primitive expansion operations (e.g., "add single bond") via the floating menu, the system not only executes the drawing instructions to generate new chemical bonds and endpoint atoms on the canvas, but also immediately captures the action result data. If the action result indicates the generation of new interactive endpoints, the system will automatically switch the target of the floating menu from the original atom to the newly generated endpoint atom and simultaneously update the position of the display anchor point. This process is perceived by the user as the floating menu automatically "jumping" or "flowing" to the next node to be edited as the structure grows, without requiring the user to manually close the menu, move the mouse to find a new node, or re-trigger the hover. This automatic focus transfer mechanism transforms the discrete "select tool-draw-reselect node" cycle into a continuous "draw-grow-redraw" flowing experience, greatly improving the efficiency of constructing complex molecular skeletons. It should be understood that "primitive expansion operations" specifically refer to those operations that cause the canvas topology to expand spatially. For attribute change operations such as isotope marking and color modification that do not generate new endpoints, the floating menu will remain bound in place to meet the user's psychological expectation of in-place editing.

[0048] Through the collaborative work of S100 to S300 described above, this embodiment constructs a complete intelligent drawing interaction closed loop. Hierarchical hit detection ensures the accuracy of the interaction entry point, context-aware dynamic menus improve the precision and convenience of tool selection, and automatic focus transfer based on extended operations completely eliminates the interaction breakpoints in continuous drawing. These three elements work together to solve the technical problems of long tool call paths and frequent interruptions in continuous operations in existing chemical structure editors, providing users with an efficient drawing experience that aligns with chemical intuition.

[0049] In some embodiments, a set of drawing elements adapted to the object type is determined based on the object type of the target object, and a floating menu containing the set of drawing elements is dynamically rendered. Specifically, this embodiment achieves intelligent filtering and differentiated presentation of the floating menu content by establishing a mapping relationship between object type and functional semantics. In the chemical structure editing scenario, atoms and chemical bonds carry distinctly different editing intentions. When the target object is identified as an atom, the system determines that the current interaction context is node modification or structure growth, and therefore the determined first set of drawing elements mainly includes at least one of bonding elements, ring addition elements, isotope substitution elements, and group addition elements. For example, as Figure 3 and Figure 4 As shown, when the cursor hovers over the hydroxyl oxygen atom of a naphthol molecule, the floating menu prioritizes displaying bonding tools such as single and double bonds. 16 O、 18 The O isotope option allows users to extend carbon chains or label tracer atoms starting from that atom. Conversely, when the target object is identified as a chemical bond, the system determines that the current interaction context is for connection adjustment. Therefore, the determined second set of drawing elements mainly includes at least one of bond replacement elements, ring fusion elements, and chemical bond deletion elements. For example, when the cursor hovers over a double bond within a six-membered ring, the floating menu automatically switches to display tools for single, triple, and aromatic bond conversion, ring fusion (e.g., benzene rings), and an eraser tool, while hiding isotope or group options related to atomic properties. This semantic-based dynamic adaptation mechanism effectively eliminates unavailable or low-relevance tools in the current context, significantly reducing the user's visual search time and cognitive load in a dense tool list, ensuring the interface always focuses on the most likely operational path.

[0050] In some embodiments, in response to the selection of a drawing element in the floating menu, the corresponding primitive action is executed and action result data is obtained. If the action result data contains an automatic switching flag, the currently bound target is updated to the endpoint object of the new primitive, the floating menu is re-rendered, and the display anchor point is repositioned to the center of the endpoint object. Specifically, to support the continuous drawing experience of chemical structures, the system defines a standardized action result data structure at the underlying level, which includes a key Boolean field as an automatic switching flag (e.g., autoPinNewAtom) to precisely control the trigger boundary of focus transfer. The core design principle of this mechanism is to distinguish whether the operation has spatial extension properties. When the selected operation is a bond addition operation or a benzene ring addition, since this operation will inevitably generate new chemical bonds and terminal atoms or benzene rings on the canvas, constituting a physical extension of the topological structure, the automatic switching flag in the action result data will be set to true. Once the system detects the identifier, it immediately and seamlessly transfers the binding target of the floating menu from the starting atom to the newly generated endpoint atom, and simultaneously updates the display anchor point (e.g., making the anchor point highlighted). This allows the user to continue drawing the next bond or group directly on the new endpoint without any additional operation, thus achieving a streaming drawing experience.

[0051] Furthermore, when the selected operation is an isotope substitution or group addition operation, the current bound target and display anchor point remain unchanged. This negative boundary setting is crucial for ensuring the determinism of the interaction logic. Specifically, isotope substitution and group addition essentially modify the properties of existing atoms and do not create new spatial nodes. Therefore, the menu remains in place and its content is refreshed in real time, allowing the user to continue making other modifications to the atom or confirm the modification results. However, when the chemical bond deletion operation is selected, the floating menu closes and the current bound target is cleared. This is because the chemical bond deletion operation removes existing connections; the deleted chemical bond no longer exists on the canvas, and its anchor point disappears accordingly. Therefore, the system actively closes the menu and clears the bound target, waiting for the user to select the next editing object. For example, as shown... Figure 3 As shown, when the user selects to replace carbon atoms with in the circular menu 13When using C isotopes, the menu remains in place and its content is instantly refreshed to the isotope-labeled state, allowing users to continue making further modifications to the atom or confirm the results. The focus only shifts when the operation explicitly generates a new endpoint available for subsequent editing. This intelligent focus management strategy based on operational semantics ensures the continuity of chain-like growth operations while avoiding focus drift during attribute editing, perfectly aligning with the mental models and operational intuitions of chemical researchers during molecular construction. It should be understood that although this embodiment lists specific operation types such as bond addition and isotope substitution, in practical applications, any operation that causes spatial extension of the canvas topology and generates new interactive nodes can be configured to trigger automatic label switching, while any operation that only changes existing primitive attributes or removes primitives should be excluded, thus constructing a robust and expected interactive loop.

[0052] In some embodiments, the method further includes controlling the display and hiding of the floating menu through a session state machine, wherein the session state machine includes an idle state, a menu display state, a shutdown delay state, and a keep-alive state. Specifically, as Figure 2 As shown, to balance the sensitivity of menu response and the stability of the interface in high-frequency, high-precision interactive scenarios such as chemical structure rendering, this invention does not employ simple instantaneous triggering or fixed-delay logic. Instead, it constructs a finite state machine model containing four core states. This model transforms discrete mouse events into ordered state transitions, effectively solving the problems of false triggering, focus preemption, and visual flickering that easily occur in traditional hover menus in complex, densely populated areas. The operation of the state machine does not rely on a single timer but rather on the coordinated work of multiple independent timers to accurately perceive the user's operational intent.

[0053] In idle state, a first hover timer is started in response to the cursor's first hover over the target object. When the first hover timer times out, the menu display state is entered and the floating menu is rendered. Furthermore, the preset timeout threshold for the first hover timer is 80 to 120 milliseconds to filter out rapid cursor hovering. This parameter range is determined based on the limits of visual perception and motion control in ergonomics. Research shows that conscious recognition of visual stimuli by humans typically requires at least 80 milliseconds of cognitive processing time; mouse movements below this threshold are mostly unconscious scanning or path transitions. If the threshold is set too low (e.g., less than 50 milliseconds), when the user quickly locates the target on the canvas, the atoms or bonds along the path will frequently trigger menu pop-ups, causing severe visual interference. If the threshold is set too high (e.g., greater than 200 milliseconds), it will give the user a negative perception of sluggish system response. The 80 to 120 millisecond range is precisely at the critical zone between "unconscious hovering" and "intentional hovering," ensuring immediate feedback during intentional operations while completely filtering out invalid path noise.

[0054] In menu display mode, a target switching timer is started in response to the cursor moving to a new target object. When the target switching timer times out, the currently bound target is updated and the floating menu is re-rendered. Furthermore, the preset timeout threshold for the target switching timer is 100 to 150 milliseconds to prevent the cursor from being overtaken by other objects during movement. In chemical structures, atoms and bonds are often closely arranged. When a user attempts to shift the focus from the current atom A to an adjacent atom B, the mouse trajectory is very likely to briefly pass over the chemical bond between them or other nearby atoms C. If the system responds instantly to target switching, the menu content will jump drastically between A, C, and B, making it difficult for the user to reliably select the target. A switching delay of 100 to 150 milliseconds is equivalent to establishing an "intent confirmation tunnel." Only when the cursor dwells on the new object for more than this threshold is the system considered a valid target switch rather than path noise. This threshold is slightly longer than the initial hover threshold because, with a menu already displayed, the user's need for interface stability is higher than the need for responsiveness during initial activation; a slightly longer delay significantly improves the certainty of operation during continuous editing.

[0055] In response to the cursor leaving the target object and the effective context area of ​​the floating menu, a shutdown timer is started to enter a shutdown delay state. Furthermore, the preset timeout threshold for the shutdown timer is 700 to 900 milliseconds, and it does not reset while the cursor is continuously moving within a blank area of ​​the chemical structure canvas. This longer time window primarily serves two physical scenarios: First, the path the mouse takes from the target object to the floating menu button is typically a non-linear, diagonal trajectory, and is affected by hand tremors and mouse precision; users may need hundreds of milliseconds to complete this displacement, and a short delay would cause the menu to unexpectedly disappear before the user arrives. Second, when observing molecular structures, users may temporarily move the mouse away from the object to think, but their gaze remains focused on the current editing point; the long delay preserves the menu's visibility as a visual anchor, avoiding repeated waking. It is particularly important to emphasize that "not resetting while continuously moving within a blank area" is a crucial anti-sticking design. If the user makes large mouse movements or searches for other tools in a blank area far from the editing area, the shutdown timer can still be reset, causing the menu to remain in an irrelevant position for an extended period, severely obstructing the canvas view. Therefore, the cursor is kept alive only when it is in the target object or menu area. Once it enters the blank area, an irreversible countdown is started to ensure that the menu can disappear automatically in time.

[0056] In the closed-delay state, if the cursor enters the display area of ​​the floating menu, the close timer is canceled and the system enters the keep-alive state; if the close timer times out, the floating menu is hidden and the system returns to the idle state. In the keep-alive state, if the cursor leaves the display area of ​​the floating menu again, the close timer is restarted. This bidirectional flow mechanism provides the interaction with great fault tolerance. When the user successfully moves the mouse into the menu area, the system immediately recognizes the clear interaction intention, cancels all close countdowns, and puts the menu into a stable, operable state. When the user moves out of the menu area but does not return to the original target object (e.g., moves to another potential target or an empty area), the system does not close the menu directly, but instead provides a complete close-delay window again. This means that when the user is exploratoryly moving between the menu and the target, or between different targets, the menu always remains "ready" rather than "disconnected," greatly reducing the risk of operation interruption due to hand tremors or path deviations.

[0057] Furthermore, in response to a global forced shutdown event, all timers are immediately cleared and the floating menu is hidden, forcibly returning to an idle state. Global forced shutdown events include window defocusing events, global clicks on non-menu areas of the chemical structure canvas, or closing shortcut drawing settings. This is the state machine's safe reset mechanism. In actual use, users may interrupt the current editing flow by switching windows with Alt+Tab, clicking sidebar tools, or directly turning off function switches. These global events have higher priority than any local hover state; the system must unconditionally and immediately destroy the menu instance and reset all internal timers to prevent the "zombie UI" phenomenon where the window has been switched but the menu remains on the screen, ensuring that software behavior is deterministic and predictable under any abnormal path. It should be understood that although this embodiment provides specific preferred ranges of 80-120ms, 100-150ms, and 700-900ms, these thresholds can be adaptively adjusted under different hardware performance or user-defined configurations while maintaining the relative timing relationship (i.e., switching delay > first delay, shutdown delay >> switching delay), as long as they can still achieve the technical effects of filtering noise, preventing preemption, and tolerating oblique movement.

[0058] In some embodiments, binding the display anchor point of the floating menu to the target object is not a simple coordinate assignment, but rather a multi-level coordinate transformation system to achieve precise spatial alignment. Specifically, since chemical structure editors typically use a virtual canvas coordinate system for mathematical modeling and storage of molecular structures, while the floating menu, as a graphical user interface component, relies on the screen pixel coordinate system of the browser or operating system for rendering, there are multiple mapping relationships between the two, including scaling, translation, and device resolution. If only a single-layer transformation is performed or the original coordinates are used directly, it is very easy to cause obvious visual separation or misalignment between the floating menu and the target object when the canvas is scaled, dragged, or displayed on a high-DPI screen. To this end, this embodiment designs a three-level positioning algorithm that includes canvas anchor point calculation, canvas-to-container transformation, and container-to-screen transformation to ensure that the floating menu can accurately attach to the visual center of gravity of the target object in any editing state and display environment.

[0059] First, the system calculates the anchor point coordinates of the chemical structure canvas based on the object type of the target object. This step aims to determine the logical mounting point of the menu in the virtual world. When the target object is an atom, the center point of the atom is used as the anchor point coordinates of the chemical structure canvas; when the target object is a chemical bond, the midpoint of the bond line is used as the anchor point coordinates of the chemical structure canvas. For example, for a carbon atom, its geometric center is the rendering reference point for the element symbol text; for a single or double bond, the anchor point is the geometric center of the line segment connecting the two atoms. This anchor point selection strategy based on primitive geometric features conforms to the visual cognitive habits of chemical structures, allowing the floating menu to naturally cover or be adjacent to the structural part currently of interest to the user when it pops up, avoiding the visual disjointedness caused by anchor point deviation. It should be understood that although this embodiment lists the center point and midpoint as preferred anchor points, in other embodiments, the atomic edge tangent point or bond line endpoint can also be selected as the anchor point according to a specific UI design style, as long as the anchor point can represent the spatial position of the target object.

[0060] Secondly, the system converts the calculated chemical structure canvas anchor point coordinates into container coordinates. This conversion process incorporates the chemical structure canvas scaling factor, translation offset, and device pixel ratio. This is a crucial step in achieving adaptive layout. In its implementation, this conversion follows the mathematical model below:

[0061] containerX = (canvasX × matrix[0] + matrix[4]) / devicePixelRatio

[0062] containerY = (canvasY × matrix[3] + matrix[5]) / devicePixelRatio

[0063] In the formula, canvasX and canvasY represent the canvas anchor point coordinates determined in S601; matrix[0] and matrix[3] represent the scaling factors of the canvas in the horizontal and vertical directions, respectively, reflecting the user's zooming in or out operation on the canvas; matrix[4] and matrix[5] represent the translation offset of the canvas in the horizontal and vertical directions, respectively, reflecting the viewport displacement caused by the user dragging the canvas; devicePixelRatio represents the device pixel ratio, that is, the ratio of physical pixels to logical pixels; containerX and containerY are the converted container coordinates. By introducing scaling factors and translation offsets, this formula ensures that when the user performs any scaling or translation operation in the editor, the anchor point of the floating menu can follow the actual position change of the target object in the view in real time, completely solving the common "menu drift after scaling" problem in traditional solutions. More importantly, the calculation of dividing by the device pixel ratio is specifically optimized for high DPI display devices such as Retina screens. In modern web rendering engines, CSS pixels often differ from physical pixels. Without this correction, menus may appear misaligned or have blurred edges on high-DPI screens. This embodiment explicitly integrates this parameter into the coordinate transformation chain, ensuring consistent and clear display across devices from the ground up.

[0064] Finally, the system converts the container coordinates to screen coordinates. This conversion process incorporates the offset of the chemical structure canvas container relative to the browser window to obtain the final screen position of the display anchor point. The specific calculation formula is as follows:

[0065] screenX = containerX + offset.left

[0066] screenY = containerY + offset.top

[0067] In the formula, `offset.left` represents the offset distance of the DOM container element carrying the chemical structure canvas relative to the left side of the current browser viewport; `offset.top` represents the offset distance of the DOM container element carrying the chemical structure canvas relative to the top side of the current browser viewport; `containerX` and `containerY` are the container coordinates; and `screenX` and `screenY` are the transformed screen coordinates. The significance of this transformation lies in decoupling the editor's internal state from the external environment layout. In practical applications, the chemical structure editor may be embedded in complex web systems, and its container position may dynamically change with page scrolling, sidebar collapsing, or window resizing. By incorporating the relative offset of the container into the calculation, the floating menu can always be accurately positioned above the target object, regardless of the editor's position on the page or whether the browser window is maximized. For example, when the user scrolls down the page, causing the canvas container to move upwards, the value of `offset.top` decreases, and the calculated `screenY` is automatically corrected accordingly, thus maintaining the relative stillness between the menu and the molecules.

[0068] In summary, this embodiment constructs a three-level coordinate transformation link of "canvas-container-screen" and parameterizes environmental variables such as scaling, translation, device pixel ratio, and window offset into the transformation formula, establishing a robust anchor point positioning mechanism. This mechanism not only mathematically guarantees the strict accuracy of coordinate mapping but also solves GUI development challenges such as high DPI adaptation and dynamic viewport compatibility in engineering, providing solid underlying support for the stable display of floating menus in various complex interactive scenarios. It should be understood that the variable names in the above formulas are merely illustrative examples. In actual code implementation, any equivalent variable names or matrix operation library functions can be used, as long as their mathematical essence covers the three core transformation elements of scaling, translation, and pixel ratio correction, and should be considered to fall within the protection scope of this invention.

[0069] In some embodiments, the floating menu takes the form of a circular menu or a bar menu. Specifically, to adapt to different users' operating habits and diverse editing scenarios, this invention provides two differentiated visual and interactive paradigms for floating menus. These two forms are not simply UI skin switching, but rather employ completely different technical implementation paths in the underlying hit detection mechanism and spatial layout strategy. The circular menu focuses on omnidirectional radial interaction around a focal point, suitable for high-frequency, continuous chain-like drawing; the bar menu focuses on linear function listing and compact space occupation, suitable for scenarios sensitive to screen vertical space. The system allows users to access the menu through various methods such as... Figure 5The quick drawing settings interface shown allows for real-time switching between the "ring" and "bar" tabs, with the switch taking effect immediately and being persistently stored. This maximizes respect for users' personalized preferences while ensuring the consistency of the core technical solution.

[0070] When the floating menu is a circular menu, the distance and angle of the cursor relative to the display anchor point are calculated based on polar coordinates. If both the distance and angle simultaneously meet the preset track range conditions, the cursor is determined to be within the circular menu area, and the currently bound target is frozen to prevent object switching. This design is one of the core innovations of this invention, distinguishing it from traditional graphical user interface menus. In traditional web or desktop application development, menu interaction typically relies on the event bubbling mechanism of the Document Object Model (DOM), i.e., triggering responses by listening to mouse events on menu elements. However, in high-density drawing scenarios such as chemical structure editors, the circular menu radiates across the canvas. If physical DOM elements are used to handle mouse events, it will inevitably obscure the chemical bonds and atoms below, causing users to be unable to perceive or select underlying primitives during menu operations, severely disrupting the continuity of drawing. Therefore, this embodiment abandons DOM event capture and instead adopts a hit detection algorithm based on pure mathematical geometry.

[0071] Specifically, this geometric determination process first converts the cursor's container coordinates to polar coordinates relative to the display anchor point. The calculation formula is as follows:

[0072] dx = pointerContainerPoint.x - anchorContainerPoint.x

[0073] dy = pointerContainerPoint.y - anchorContainerPoint.y

[0074] distance = sqrt(dx × dx + dy × dy)

[0075] angle = atan2(dy, dx) × 180 / π,

[0076] In the formula, pointerContainerPoint.x and pointerContainerPoint.y are the horizontal and vertical coordinates of the cursor in the current container coordinate system, anchorContainerPoint.x and anchorContainerPoint.y are the horizontal and vertical coordinates of the floating menu display anchor point (i.e., the center of the target object) in the container coordinate system, distance is the Euclidean distance from the cursor to the anchor point, and angle is the azimuth angle of the cursor relative to the anchor point, with a value range normalized to [0°, 360°). After obtaining the polar coordinate parameters, the system performs a dual condition check: the first is an angle check, determining whether angle falls within the angle range of the sector occupied by the currently valid button; the second is a distance check, determining whether distance falls within the preset track radius range. The specific calculation method for the distance hit range is as follows:

[0077] First, calculate the hit tolerance (hitTolerance):

[0078] hitTolerance = max(4, round(radialItemSize × 0.2))

[0079] In the formula, radialItemSize is the button size (e.g., 32 pixels), and the hit tolerance is the larger of 20% of the button size and 4 pixels, to ensure sufficient touch tolerance on high-resolution screens.

[0080] Next, calculate the inner and outer radii of the primary orbit:

[0081] primaryInner = radialRadius - radialTrackWidth / 2 - hitTolerance

[0082] primaryOuter = radialRadius + radialTrackWidth / 2 + hitTolerance

[0083] In the formula, primaryInner is the inner radius of the primary track, primaryOuter is the outer radius of the primary track, radialRadius is the radius of the primary menu track (e.g., 64 pixels), and radialTrackWidth is the width of the primary menu track (e.g., 36 pixels).

[0084] If the secondary menu is not expanded, the distance hit condition is distance ∈ [primaryInner, primaryOuter]. If the secondary menu is expanded, the outer radius of the secondary track needs to be further calculated:

[0085] submenuOuter=radialRadius+radialSubmenuRadiusGap+ radialTrackWidth / 2 + hitTolerance

[0086] In the formula, radialSubmenuRadiusGap is the radial distance between the second-level menu and the first-level menu (e.g., 36 pixels). The distance hit condition is distance ∈ [primaryInner, submenuOuter], ensuring that user actions within the second-level menu area are also recognized as valid menu interactions.

[0087] The system only recognizes the cursor as being within a valid menu interaction area when both distance and angle conditions are met simultaneously. The advantage of this purely geometric determination is that it completely decouples the visual rendering layer from the interaction logic layer, allowing the menu to appear visually semi-transparent or even only highlighted when hovered, while maintaining precise hit feedback logically, thus completely eliminating the interception and interference of the transparent DOM layer on the underlying canvas events.

[0088] More importantly, when the cursor is determined to be within the circular menu area, the system immediately freezes the currently bound target to prevent object switching. Here, "freezing" refers to pausing the start of the target switching timer described in the previous embodiment or ignoring its timeout event at the state machine level. During the interaction with the circular menu, the user's mouse trajectory often needs to move in a circle around the anchor point to select a button at a specific angle. This trajectory is very likely to sweep over other nearby atoms or chemical bonds. Without the freezing mechanism, according to the logic of the previous embodiment, these passed primitives would be identified as new potential targets and trigger a switching countdown, causing the menu content to unexpectedly change before the user completes the selection, resulting in severe operational frustration. By forcibly locking the current context when a geometric hit occurs, this embodiment ensures that all exploratory movements by the user within the menu area are considered continuous operations on the current target, rather than an intention to switch to a new target, thus guaranteeing the determinism and smoothness of the circular interaction. Furthermore, the first-level menu buttons of the circular menu are arranged based on a first fixed angle, and the second-level menu buttons are arranged based on a second fixed angle. For example, a primary menu can evenly distribute up to 12 frequently used functions at 30° intervals, while a secondary menu expands outwards at 18° intervals to both sides of the axis where the primary button is located after the primary button is activated. This discrete layout based on fixed angles not only reduces the cognitive load on users remembering button locations but also allows the angle verification in the aforementioned geometric hit detection to be efficiently completed using simple integer division or table lookup methods, avoiding the overhead of complex floating-point operations.

[0089] When the floating menu is a bar menu, the initial display position of the bar menu is calculated. If the initial display position exceeds the container boundary of the chemical structure canvas, a vertical flip or horizontal boundary correction is performed to determine the final display position. Unlike the in-situ radial layout of the circular menu, the bar menu uses a linear arrangement. Its default initial position is usually set to the center directly above the target object's anchor point to conform to the user's top-down reading habits. However, in actual editing, the target object may be located at the edge or corner of the canvas. If the default position is mechanically rendered, it is very easy for part or all of the menu to overflow the visible container area, making the function unusable. Therefore, this embodiment introduces a four-directional boundary adaptive correction algorithm.

[0090] The input parameters of this algorithm include: the container coordinates of the target anchor point (anchorContainerPoint.x and anchorContainerPoint.y), the menu size (width menuSize.width and height menuSize.height), the container size (width containerWidth and height containerHeight), the preset safety margin boundaryPadding (such as 12 pixels), the horizontal offset menuOffsetX (such as 0 pixels), and the vertical offset menuOffsetY (such as 8 pixels). The calculation process is divided into the following five steps:

[0091] The first step is to calculate the initial position. By default, the menu is centered above the target anchor point:

[0092] - left = anchorContainerPoint.x - menuSize.width / 2 + menuOffsetX

[0093] - top = anchorContainerPoint.y - menuSize.height - menuOffsetY

[0094] The second step is to judge the vertical flip. If the top of the menu exceeds the upper boundary of the container (i.e., top < boundaryPadding), it indicates that there is insufficient space above, and the system flips the menu below the target anchor point:

[0095] - top = anchorContainerPoint.y + menuOffsetY

[0096] The third step is to correct the left boundary in the horizontal direction. If the left side of the menu exceeds the left boundary of the container (i.e., left < boundaryPadding), then stick the left edge of the menu to the inside of the left boundary of the container:

[0097] - left = boundaryPadding

[0098] The fourth step is to correct the right boundary in the horizontal direction. Calculate the maximum allowable left boundary maxLeft = containerWidth - menuSize.width - boundaryPadding. If the left side of the menu exceeds the right boundary (i.e., left > maxLeft), then stick the right edge of the menu to the inside of the right boundary of the container:

[0099] - left = max(maxLeft, boundaryPadding)

[0100] Fifth, a fallback for extreme cases. After the above flipping and correction, if left or top is still smaller than the safety margin boundaryPadding, then force it to be set to boundaryPadding to ensure that the menu is always within the visible area.

[0101] The final output (left, top) represents the rendering coordinates of the bar menu within the container. Through the five-step progressive verification process described above, regardless of the target object's extreme position on the canvas, the bar menu is completely constrained within the visible area, ensuring functional accessibility and preventing interface layout collapse due to abnormal menu positioning. It should be understood that although this embodiment uses a bar menu as an example to describe the boundary correction logic, similar boundary-aware strategies can also be applied to the secondary expansion direction control of circular menus or the positioning of other floating panels in other implementations. As long as the core idea is to dynamically adjust the rendering parameters of UI elements based on container constraints, they should all be considered within the scope of protection of this invention.

[0102] In some embodiments, the method further includes: when the selection tool is active, in response to a double-click operation on a blank area of ​​the chemical structure canvas, a shortcut floating menu containing commonly used drawing elements pops up in a preset offset direction at the double-click position. Specifically, the interaction mechanism provided in this embodiment is a parallel branch independent of the hover interaction logic described in the foregoing embodiments. The aforementioned hover menu relies on existing atoms or chemical bonds on the canvas as trigger anchors. However, in the initial stage of drawing chemical structures or when new fragments need to be inserted between molecules, there are often no valid objects available for hovering on the canvas, forcing users to return to the sidebar to find tools, creating a break in the interactive experience. To solve this cold start drawing requirement when there are "no objects to hover over", this invention designs a shortcut entry based on double-clicking on a blank area. The triggering of this mechanism has strict preconditions: first, the currently active tool must be a selection tool, which effectively avoids conflicts with existing interactions such as double-clicking to select text in text editing mode or double-clicking to modify attributes in atomic editing mode; second, the double-click landing point must be determined to be a blank area, that is, no text, chemical bonds, or atomic primitives are hit. When the above conditions are met simultaneously, the system will pop up a quick floating menu containing commonly used drawing elements near the double-click location. The content of this menu is usually dynamically configured based on user operation frequency statistics, and includes tools such as text tools, single keys, snake keys, six-element rings, five-element rings, rectangles, circles, arcs, solid lines, dashed lines, and various arrow tools. By presenting frequently used starting tools nearby, this mechanism significantly shortens the operation path from "conceptualization" to "pen stroke," and is an important supplement to the hover menu system.

[0103] Furthermore, the system performs four-directional boundary detection on the quick floating menu. If the quick floating menu exceeds the container boundary of the chemical structure canvas, its display position is corrected. Specifically, since the location of double-click operations is random, directly aligning the menu center with the double-click point for rendering can easily cause parts of the menu to overflow the viewport or be clipped by the browser edges. Therefore, the system executes a complete boundary adaptation algorithm before rendering. First, it calculates the initial bounding box coordinates of the quick floating menu in the default preset offset direction (usually the lower right of the double-click point to avoid mouse cursor obstruction). Then, it sequentially checks whether the bounding box exceeds the boundaries of the container in the top, bottom, left, and right directions. If right-side overflow is detected, the menu is horizontally shifted to the left until it fully enters the viewport; if bottom-side overflow is detected, the menu is vertically flipped upwards above the double-click point; if the upper left corner still exceeds the boundary, the menu edge is forcibly clamped within the container's safe margin. This four-directional boundary correction strategy ensures that the quick floating menu remains fully visible and interactive regardless of whether the user performs a double-click operation in a corner or at the edge of the canvas. It should be understood that although this embodiment uses the selection tool activation as the preferred trigger condition, in other embodiments, the quick floating menu can also be invoked through custom shortcut key combinations or specific gestures. As long as its core logic is still to provide the nearest tool access point in an objectless context, it should be considered to fall within the protection scope of this invention. Through the combination of this embodiment and the aforementioned floating menu embodiment, this invention constructs a seamless quick drawing system covering the entire scenario of "editing with objects" and "starting without objects," completely eliminating the efficiency bottleneck of frequent back-and-forth movement of the sidebar in traditional editors.

[0104] Example 2:

[0105] This embodiment provides an interactive device for drawing chemical structural formulas. This device is a modular carrier as described in Embodiment 1 above, aiming to implement the technical solution of this invention at the software product architecture level. Figure 6 As shown, the drawing interaction device 100 mainly includes a target recognition module 101, a menu rendering module 102, and a focus transfer module 103. The modules communicate and cooperate with each other through a data bus or function call interface to jointly realize intelligent assistance and continuous interaction functions in the chemical structure drawing process.

[0106] The target recognition module 101 is used to respond to cursor hovering operations on the chemical structure canvas, perform hit detection on objects on the chemical structure canvas, and identify the hit objects as target objects. The object type of the target objects includes atoms or chemical bonds. Specifically, this module encapsulates the hit detection logic described in S100 of Embodiment 1. In software implementation, the target recognition module typically exists as an independent event listener or ray detection service, and it maintains a configurable layer priority list internally. When a mouse movement event is received from the canvas, the module traverses the scene graph according to a preset rendering stacking order (Z-order) to perform hit detection. This modular design allows adjustments to the hit strategy without modifying the underlying rendering engine code; only configuration parameters need to be updated to adapt to changes in different chemical drawing specifications. It also ensures that in patent infringement determinations, as long as the accused product has the same hit detection logic, regardless of its specific code implementation, it can be considered to fall within the functional scope of this module.

[0107] The menu rendering module 102 is used to determine the set of drawing elements adapted to the object type based on the object type of the target object, dynamically render the floating menu containing the set of drawing elements, and bind the display anchor point of the floating menu to the target object. Specifically, this module executes S200 in Embodiment 1 and the context adaptation logic described in Embodiment 1. This module integrates a type-function mapping registry and a UI component factory. After receiving the target object information output by the target recognition module, the menu rendering module first parses the semantic type of the object (such as carbon atom, double bond, etc.), then queries the registry to obtain the corresponding toolset configuration, and calls the UI factory to instantiate the floating menu component in real time. At the same time, this module is also responsible for calling the coordinate transformation algorithm described in Embodiment 1 to convert the anchor point in the canvas coordinate system to the rendering position in the screen coordinate system in real time. By encapsulating content generation and position calculation in the same module, the system ensures strong consistency between menu content and spatial position, avoiding menu misalignment or content lag caused by asynchronous processing. It should be understood that the specific implementation of this module can be a higher-order component in front-end frameworks such as React / Vue, or a custom control class in desktop applications. As long as it undertakes the responsibility of dynamically assembling and positioning the menu based on the object type, it is an equivalent replacement for this module.

[0108] The focus transfer module 103 is used to respond to primitive expansion operations triggered by the floating menu. It generates a new primitive starting from the target object and automatically transfers the display anchor point of the floating menu and the currently bound target to the endpoint object of the new primitive to maintain the continuous display of the floating menu. Specifically, this module is a functional embodiment of S300 and the growth mechanism in Example 1. This module listens to action commands issued by the menu rendering module and immediately parses the automatic switching flag in the action result data after the drawing engine completes the creation of the new primitive. If the flag is true, the module actively takes over the control of the session state machine, updates the currently bound target handle to a reference to the new endpoint, and notifies the menu rendering module to re-execute the rendering and positioning process. This process achieves the effect of the menu automatically flowing with the structure's growth in the user's perception. From an architectural perspective, the focus transfer module decouples "drawing operations" from "interaction state management," allowing the drawing engine to be unconcerned about subsequent UI behaviors, and the UI layer to be unaware of specific chemical bonding rules; the two only interact through a standardized action result protocol. This high-cohesion, low-coupling design not only improves the maintainability of the system, but also provides a standardized access point for subsequent expansion of new primitive types or interaction modes.

[0109] Through the collaborative work of the three core modules described above, this embodiment constructs a complete interactive device for drawing chemical structures. This device not only fully replicates all the technical features of the aforementioned method embodiments in terms of functionality, but also establishes clear module boundaries and data flow in its architecture. This modular product form enables the invention to be distributed and protected in various commercial forms such as software suites, SDK components, or cloud service APIs, effectively covering the entire protection chain from source code implementation to end-user experience.

[0110] Example 3:

[0111] This embodiment provides a computer device, including a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the method described in the aforementioned embodiment 1.

[0112] Specifically, the computer device is the physical entity that carries and runs the chemical structure drawing interactive method described in this invention. From a hardware architecture perspective, the processor and memory communicate via a system bus, which may include an address bus, a data bus, and a control bus for transmitting instructions, data, and control signals between the processor and memory. The processor, as the core of the device's computation and control center, is responsible for reading the computer program instructions stored in the memory and parsing them into specific machine code sequences to drive the hardware to execute corresponding logical operations. In this invention, when the processor executes the program, it sequentially or in parallel calls the target recognition logic, menu dynamic rendering logic, focus automatic transfer logic, and session state machine control logic described in the foregoing embodiments, thereby presenting a chemical structure editing interactive interface that conforms to the user's intent on the connected display device.

[0113] It should be understood that the memory in this embodiment is not limited to a single type of storage medium, and may include a combination of volatile and non-volatile memory. For example, non-volatile memory may be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory, used for persistent storage of operating system, application code, and user-drawn chemical structure data; volatile memory may be random access memory (RAM), used as an external cache or runtime memory for the processor to support high-frequency read and write operations such as real-time rendering of floating menus, coordinate transformation matrix operations, and state machine timer maintenance. In addition, the memory may also include disk storage devices (such as hard disk drives, solid-state drives) or optical storage devices for long-term storage of complex molecular library files or customized quick drawing configuration parameters.

[0114] Similarly, the processor in this embodiment can also be implemented in various hardware forms. In a preferred embodiment, the processor can be a general-purpose central processing unit (CPU), suitable for performing serial computing tasks such as hierarchical hit detection, state machine transitions, and business logic judgments described in Embodiment 1. In another preferred embodiment, considering that the multi-level coordinate transformation in Embodiment 1 involves a large number of floating-point operations, and that the geometric hit detection of the ring menu and the adaptive boundary of the bar menu in Embodiment 1 require efficient graphics processing capabilities, the processor can also include a graphics processing unit (GPU) or a field-programmable gate array (FPGA) as a coprocessor. In this heterogeneous computing architecture, the CPU is responsible for the main control logic and event distribution, while the GPU or FPGA is dedicated to accelerating canvas rendering, anchor point positioning calculation, and menu animation generation, thereby reducing the load on the main processor and improving the overall system energy efficiency while ensuring interactive response sensitivity.

[0115] From a product perspective, the computer device can be any intelligent device with data processing and graphics display capabilities, such as a desktop computer, laptop, workstation, tablet, or mobile terminal. When this device is manufactured, sold, or offered for sale, as long as it is pre-installed with a computer program containing the logic of the method of this invention, or can be obtained and run by downloading, installing, or other means, it falls within the protection scope of this invention. This comprehensive protection of the hardware entity effectively covers the entire commercial chain from software development to the final product, preventing others from evading the infringement liability of the method patent by only selling hardware devices pre-installed with infringing software. Furthermore, the computer device can also interact with other servers or cloud services through a network interface, such as synchronizing the user's personalized quick drawing settings from the cloud, downloading the latest isotope database, or uploading drawn molecular structures, but this does not change its technical essence as a local execution entity.

[0116] Example 4:

[0117] To more clearly illustrate the application value and technical effects of the present invention's technical solution in practical business scenarios, this embodiment provides an example of an application scenario for the continuous rendering of complex drug molecules. In this scenario, the user needs to render the molecular structure of a naphthol derivative with isotope labeling. This process fully covers the entire interactive features from target recognition, dynamic menu adaptation, automatic focus transition, state machine anti-shake control to multi-level coordinate transformation, fully demonstrating the advantages of the present invention in improving the efficiency and coherence of chemical structure rendering.

[0118] Specifically, when a user launches the chemical structure editor and enters drawing mode, they first hover the cursor over the hydroxyl oxygen atom in the already drawn naphthol molecular skeleton. The system then responds to the cursor hovering on the chemical structure canvas, performing a hit detection to accurately identify the target object as an atom. Based on this object type, the system determines the first set of drawing elements compatible with the atom and dynamically renders a ring-shaped floating menu containing bonding elements, ring-adding elements, isotope substitution elements, and group-adding elements at the center of the oxygen atom. This process validates the intelligent filtering mechanism for menu content based on object type: the system only displays tools related to atom modification or growth, while automatically hiding irrelevant options such as bond substitution and bond deletion, which are only applicable to the chemical bond context. This significantly reduces the user's visual search load in a dense toolset, making the communication of interactive intent more precise and efficient.

[0119] Subsequently, the user clicks the "Single Bond" button in the pop-up circular floating menu to extend the carbon chain. In response to this primitive extension operation, the system generates a new chemical bond and a terminal carbon atom, starting from the current oxygen atom. Since the "Add Single Bond" operation is a typical spatial extension action, its result data includes an automatic switching indicator. Upon detecting this indicator, the system immediately and seamlessly transfers the current binding target of the floating menu from the starting oxygen atom to the newly generated terminal carbon atom, and repositions the display anchor point to the center of that carbon atom. From the user's perspective, the floating menu appears to automatically "flow" to the next editable node as the chemical bond grows, without requiring the user to manually close the menu, move the mouse to find new atoms, or re-trigger the hover. This automatic focus transfer mechanism transforms the discrete "select tool-draw-reselect node" cycle into a continuous "draw-grow-redraw" flowing experience, perfectly matching the chemist's intuitive "pen and paper" mindset when constructing molecular skeletons, greatly improving the efficiency of chain structure construction.

[0120] During continuous rendering, the user's mouse trajectory is often not a precise point-to-point movement. For example, after a user completes a key press, their hand might quickly move the mouse towards a newly generated carbon atom to prepare for the next operation, but it might briefly glide over other nearby atoms or blank areas along the way. In this scenario, the session state machine's debouncing mechanism plays a crucial role. When the cursor leaves the original target and enters a new target area, the system starts a target switching timer with a preset timeout threshold of 100 to 150 milliseconds. Because the user's movement speed is relatively fast, the cursor's dwell time on the new carbon atom has not yet reached this threshold, or the dwell condition has not been met when passing other interfering objects. Therefore, the system determines that this is a valid target confirmation process rather than a misclick, and temporarily suspends the refresh of the menu content. Only when the cursor has stably stayed on the new carbon atom for more than the threshold does the system officially update the currently bound target and re-render the menu. This mechanism effectively prevents the menu from flickering violently or preempting focus due to frequent capture of intermediate objects along the mouse movement path, ensuring the visual stability and operational certainty of the interactive interface, and avoiding user cognitive interruption caused by interface jitter.

[0121] Next, the user decided to label the newly generated carbon atoms with isotopes. While the floating menu remained displayed, the user selected " 13The "C" option allows for isotope replacement. Unlike the aforementioned bonded operations, isotope replacement is an attribute modification operation that does not involve spatial extension of the topology. Therefore, its result data does not include an automatic switching indicator. The system maintains the current bound target and display anchor point unchanged, only refreshing the menu content in place with the isotope-marked state (e.g., displaying a mass number superscript). This precise control of the negative boundary ensures that the focus does not unexpectedly drift during non-growth-type editing, allowing users to continue adjusting other attributes or confirming modifications in the same location, aligning with the psychological expectation of "in-situ modification." Mechanically shifting the focus at this point would cause the menu to jump to an invalid location or disappear, forcing the user to reposition and disrupting the editing flow.

[0122] Finally, to observe the overall conformation of the molecules or make fine-tuning adjustments, the user zoomed in and out of the canvas. Throughout this process, the floating menu's anchor point remained precisely attached to the center of the currently bound carbon atom, without any visual misalignment or drift. This is thanks to the real-time calculation of a multi-level coordinate transformation system: the system converts the atom's center point in the canvas coordinate system to container coordinates in real time based on the current canvas scaling factor, translation offset, and device pixel ratio, and then calculates the final screen coordinates by combining this with the browser window offset. Regardless of the canvas's scaling ratio or viewport position, this algorithm ensures strict alignment between the menu and the target object at the physical pixel level. Especially on high-DPI screens, the introduction of the device pixel ratio eliminates positioning deviations caused by inconsistencies between CSS pixels and physical pixels, ensuring a consistent and professional interactive experience across devices and resolutions.

[0123] In summary, the synergistic effect of the various technical features of this invention can be intuitively verified through the drawing scenario of naphthol derivatives with isotope labeling described in this embodiment. Hierarchical hit detection ensures the accuracy of target recognition in complex overlapping areas; context-aware dynamic menus enable in-situ tool presentation and intelligent filtering; automatic focus transfer based on operation semantics breaks down the interaction breakpoints of continuous drawing; a refined session state machine suppresses false triggers and interface flickering; and a multi-level coordinate transformation system lays the foundation for stable display across environments. These features together constitute an efficient drawing interaction paradigm that conforms to the thinking of chemical research, solving the technical problems of long tool call paths, frequent interruptions of continuous operation, and unstable interface feedback in traditional editors, significantly improving the efficiency of complex molecular structure construction and user experience. It should be understood that although this embodiment uses naphthol derivatives as an example for detailed description, the technical solution of this invention is also applicable to other scientific visualization scenarios involving continuous primitive construction and attribute modification, such as protein sequence editing, reaction route drawing, and material crystal structure modeling. As long as its interaction logic follows the core principles of target recognition, dynamic adaptation, focus transfer, and state control mentioned above, it should be considered to fall within the protection scope of this invention.

[0124] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Those skilled in the art should understand that the specific details regarding the drawing hierarchy order, floating menu form, state machine timeout threshold, coordinate transformation formula, and primitive expansion operation type in the foregoing embodiments are preferred examples listed to fully disclose the technical solution, and are not intended to limit the present invention. Any changes, substitutions, modifications, or equivalent substitutions made by those skilled in the art within the scope of the technology disclosed in the present invention, based on the concept of the present invention, such as adjusting the hierarchical priority of hit detection, using other geometric models to implement menu hit determination, or applying the session state machine to other scientific drawing interaction scenarios, should all be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

[0125] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

Claims

1. A method for drawing interaction of chemical structural formula, characterized in that, include: In response to a cursor hovering over a chemical structure canvas, a hit detection is performed on the objects on the chemical structure canvas, and the hit objects are taken as target objects. The object type of the target objects includes atoms or chemical bonds. Based on the object type of the target object, determine a set of drawing elements that are compatible with the object type, dynamically render a floating menu containing the set of drawing elements, and bind the display anchor point of the floating menu to the target object; In response to the primitive expansion operation triggered by the floating menu, a new primitive is generated starting from the target object, and the display anchor point and the currently bound target of the floating menu are automatically transferred to the endpoint object of the new primitive to maintain the continuous display of the floating menu.

2. The method of claim 1, wherein, The step of determining a set of drawing elements that matches the object type based on the object type of the target object, and dynamically rendering a floating menu containing the set of drawing elements, includes: When the target object is an atom, a floating menu containing a first set of drawing elements is rendered, the first set of drawing elements including at least one of bonding elements, ring adding elements, isotope substitution elements and group adding elements; When the target object is a chemical bond, a floating menu containing a second set of drawing elements is rendered, the second set of drawing elements including at least one of bond replacement elements, ring fusion elements and chemical bond deletion elements.

3. The method of claim 2, wherein, The step of responding to a primitive expansion operation triggered by the floating menu, generating a new primitive starting from the target object, and automatically transferring the display anchor point of the floating menu and the currently bound target to the endpoint object of the new primitive, includes: In response to the selection of a drawing element in the floating menu, the corresponding graphic element action is executed and the action result data is obtained; If the action result data contains an automatic switching identifier, then the current bound target is updated to the endpoint object of the new primitive, the floating menu is re-rendered, and the display anchor point is repositioned to the center of the endpoint object; Specifically, when the selection operation is a bond addition operation, the action result data includes the automatic switching identifier; when the selection operation is an isotope substitution operation or a group addition operation, the current binding target and the display anchor point remain unchanged; when the selection operation is a chemical bond operation, the floating menu is closed and the current binding target is cleared.

4. The method of claim 1, wherein, The method further includes controlling the display and hiding of the floating menu through a session state machine, wherein the session state machine includes an idle state, a menu display state, a shutdown delay state, and a keep-alive state; The display and hiding of the floating menu are controlled through the session state machine, including: In the idle state, in response to the cursor first hovering over the target object, a first hover timer is started; when the first hover timer times out, the menu display state is entered and the floating menu is rendered. In the menu display state, in response to the cursor moving to a new target object, a target switching timer is started; when the target switching timer times out, the currently bound target is updated and the floating menu is re-rendered; In response to the cursor leaving the target object and the valid context area of ​​the floating menu, a shutdown timer is started to enter the shutdown delay state; In the closed delay state, if the cursor enters the display area of ​​the floating menu, the closed timer is canceled and the system enters the keep-alive state; if the closed timer times out, the floating menu is hidden and the system returns to the idle state.

5. The method of claim 4, wherein, The method of controlling the display and hiding of the floating menu through the session state machine also includes: The preset timeout threshold of the first hover timer is 80 milliseconds to 120 milliseconds, which is used to filter out the cursor's rapid hovering operation; The preset timeout threshold of the target switching timer is 100 to 150 milliseconds, which is used to prevent the cursor from being preempted by other objects passing by during the movement. The preset timeout threshold for the timer is 700 to 900 milliseconds, and it is not reset when the cursor continues to move in the blank area of ​​the chemical structure canvas. In the keep-alive state, if the cursor leaves the display area of ​​the floating menu again, the shutdown timer is restarted; In response to a global forced shutdown event, all timers are cleared and the floating menu is hidden, forcibly returning to the idle state; the global forced shutdown event includes a window defocus event, a global click on a non-menu area of ​​the chemical structure canvas event, or a close quick drawing settings event.

6. The method of claim 2, wherein, The step of binding the display anchor point of the floating menu to the target object includes: The chemical structure canvas anchor point coordinates are calculated based on the object type of the target object; when the target object is an atom, the center point of the atom is used as the chemical structure canvas anchor point coordinates; when the target object is a chemical bond, the midpoint of the bond line of the chemical bond is used as the chemical structure canvas anchor point coordinates. The chemical structure canvas anchor point coordinates are converted into container coordinates. The conversion process incorporates the chemical structure canvas scaling factor, translation offset, and device pixel ratio. The container coordinates are converted to screen coordinates. The conversion process incorporates the offset of the chemical structure canvas container relative to the browser window to obtain the final screen position of the display anchor point.

7. The method of claim 1, wherein, The floating menu can take the form of a circular menu or a bar menu; When the floating menu is a circular menu, the distance and angle of the cursor relative to the display anchor point are calculated based on polar coordinates. If the distance and angle simultaneously meet the preset track range conditions, it is determined that the cursor is located within the circular menu area, and the currently bound target is frozen to prevent object switching. The first-level menu buttons of the circular menu are arranged based on a first fixed angle, and the second-level menu buttons are arranged based on a second fixed angle. When the floating menu is a bar menu, the initial display position of the bar menu is calculated. If the initial display position exceeds the container boundary of the chemical structure canvas, a vertical flip or a horizontal boundary correction is performed to determine the final display position.

8. The method of claim 1, wherein, The method further includes: When the selection tool is active, in response to a double-click operation on a blank area of ​​the chemical structure canvas, a quick floating menu containing commonly used drawing elements pops up in a preset offset direction at the double-click position. The quick floating menu is subjected to four-directional boundary detection. If the quick floating menu exceeds the container boundary of the chemical structure canvas, the display position of the quick floating menu is corrected.

9. An interactive device for drawing chemical structures, characterized by include: The target recognition module is used to respond to the hovering operation of the cursor on the chemical structure canvas, perform hit detection on the chemical structure canvas, and take the hit object as the target object. The object type of the target object includes atoms or chemical bonds. The menu rendering module is used to determine a set of drawing elements that are compatible with the object type of the target object, dynamically render a floating menu containing the set of drawing elements, and bind the display anchor point of the floating menu to the target object. The focus shifting module is used to respond to the primitive expansion operation triggered by the floating menu, generate a new primitive starting from the target object, and automatically shift the display anchor point of the floating menu and the currently bound target to the endpoint object of the new primitive to maintain the continuous display of the floating menu. 10.A computer device, comprising a memory and a processor, wherein the memory stores a computer program, and the computer device is configured to perform the method according to any one of claims 1-9. When the processor executes the computer program, it implements the method of any one of claims 1 to 8.

Images