A flutter low-code development and real-time synchronization method and system supporting multi-user collaboration

Abstract

The application relates to the technical field of low-code development, and discloses a Flutter low-code development and real-time synchronization method and system supporting multi-user collaboration, which comprises the following steps: collecting component tree structures, operation logs and visual layout contexts of each end in multi-user collaborative editing; generating a partial-order component sequence with visual anchor points through visual semantic modeling; constructing a visual-consistent directed graph in combination with component visual feature supplementary data; fusing remote operation instructions and local component tree states to generate an insertion path function with topological constraints; and finally performing semantic-preserving insertion and triggering incremental rendering synchronization; through deep fusion of visual semantics and topological relations, the application solves the core problems of visual and logical sequence inconsistency under Flutter diversity layout and multi-user collaborative operation intention mapping deviation caused by traditional synchronization dependence on logical indexes, and realizes visual semantic consistency and real-time synchronization efficiency of collaborative editing.

Description

Technical Field

[0001] This invention relates to the field of low-code development technology, specifically to a method and system for supporting multi-user collaborative Flutter low-code development and real-time synchronization. Background Technology

[0002] In multi-user collaborative Flutter low-code development scenarios, real-time synchronization mechanisms based on Operation Transformation (OT) or Conflict-Free Copy Data Type (CRDT) are typically employed. These technologies are based on a structured representation of a Widget tree, recording user interactions with the interface through metadata such as unique component identifiers, parent node references, and child node indices, and maintaining consistency across multiple devices in a network environment. Their core feature is transforming visual editing behavior into CRUD operations on a tree structure, relying on structural indexes to achieve remote synchronization.

[0003] However, in actual engineering applications, when multiple users concurrently perform visually guided operations such as dragging and inserting, the final placement of components often does not match the user's original intention. For example, user A drags a button to the bottom of the third visible component in a container on the local interface. However, because user B deletes the first component in the container during this period, the button is inserted into a new index position after remote synchronization, and the actual rendering result is below the second visible component. This deviation is not directly caused by network latency or explicit operation conflicts, but rather stems from the fact that the synchronization mechanism only performs operation mapping based on static structural indexes, ignoring the dynamic visual context on which the user's operation depends. Since the order of child nodes in the Widget tree only represents logical inclusion relationships, and the actual arrangement of components seen by the user is also affected by the layout parameters of the parent container, the logical order and the visual presentation order are not always consistent. This misalignment can lead to semantic distortion of the interface. For example, disordered form field order can cause confusion in user filling logic, or navigation item position offset can cause accidental touches in the business process, thereby increasing the cost of manual verification and rework later. Moreover, such problems are difficult to locate the root cause through regular logs or conflict prompts. Summary of the Invention

[0004] To overcome the aforementioned shortcomings of the prior art, this invention provides a Flutter low-code development and real-time synchronization method that supports multi-user collaboration, including:

[0005] S1 collects the component tree structure, operation logs and corresponding visual layout context of each terminal during multi-user collaborative editing. The three types of data are fused and processed through visual semantic modeling and partial order relation mapping methods to generate and output a partial order component sequence with visual anchors.

[0006] S2, receive the partially ordered component sequence with visual anchors, supplement the data with component visual features, process the visual relationships in the partially ordered component sequence through the adjacency semantic extraction algorithm, and generate and output a visually consistent directed graph with visual adjacency relationships as edges.

[0007] S3, based on the visual consistency directed graph and remote operation instructions, combined with the real-time status data of the local component tree, uses a path function construction algorithm to fuse the topological relationships in the visual consistency directed graph and the remote operation instructions, and generates and outputs an insertion path function with topological constraints.

[0008] S4, based on the insertion path function with topological constraints, combined with the local component tree and collaborative editing status flags, performs component insertion operation on the local component tree through the semantically preserved insertion algorithm, and triggers the incremental rendering synchronization mechanism to generate and output synchronization messages;

[0009] S5 generates hardware protocol code and synchronizes development documentation based on the inserted local component tree and collaborative design configuration data package.

[0010] Furthermore, the step of generating and outputting a partially ordered component sequence with visual anchors includes: collecting the component tree structure, operation logs, and corresponding visual layout context of each terminal during multi-user collaborative editing to form three types of core raw datasets; and performing visual semantic modeling and partially ordered relation mapping based on the three types of core raw datasets to generate a partially ordered component sequence with visual anchors.

[0011] Further, the steps of visual semantic modeling and partial order relation mapping include: performing visibility filtering and node extraction on the component tree structure in the three types of core original datasets to obtain a set of visible components for the target container; the method for obtaining the set of visible components for the target container is as follows: based on the hierarchical relationship of the component tree structure, locate the target container node corresponding to the user operation, traverse all child component nodes under the target container node, combine the visibility and transparency attributes of the component to determine whether the component is visible, filter out components that are hidden or completely transparent, and organize the unique identifiers of the remaining visible components and the associated logical child node indices into a set of visible components for the target container; synchronously collect the visual layout context of each component in the set of visible components for the target container, and construct a component visual feature matrix; based on the component visual features... The feature matrix is ​​used to establish partial order relationships between components through a visual relative position determination algorithm, generating a set of visual partial order relationships. The visual relative position determination algorithm is as follows: first, a layout tolerance threshold is set based on the layout type and inner margin parameters of the parent container; then, all component pairs in the component visual feature matrix are traversed, and the projection overlap of the component pairs in the x-axis direction and the y-axis direction is calculated. The projection overlap is combined with the layout tolerance threshold to determine whether the projection overlap meets the effective association standard, thereby determining the vertical or horizontal partial order relationship between components; the visible component set of the target container and the visual partial order relationship set are fused, and visual anchor point identifiers are added to generate a partial order component sequence with visual anchor points; the visual anchor point identifier contains a unique component identifier and corresponding visual feature data, which is used to characterize the benchmark reference of the partial order relationship.

[0012] Furthermore, the steps for generating the visually consistent directed graph include: collecting supplementary visual feature data of components, associating and integrating it with the partially ordered component sequence with visual anchors to form a basic dataset for visual relationship modeling; and performing adjacency semantic extraction based on the basic dataset for visual relationship modeling to generate a visually consistent directed graph.

[0013] Furthermore, the adjacency semantic extraction steps include: extracting all component pairs with direct visual partial order relationships based on the partially ordered component sequence with visual anchors to form an initial visual relationship set; combining component visual feature supplementary data to determine the adjacency of component pairs in the initial visual relationship set to generate a candidate adjacency relationship set; eliminating ambiguous paths in the candidate adjacency relationship set through a transitive closure algorithm to optimize and generate a visual adjacency relationship set; and constructing a visually consistent directed graph based on the component identifier set and the visual adjacency relationship set.

[0014] Furthermore, the step of generating and outputting the insertion path function with topological constraints includes: receiving remote operation instructions, collecting real-time state data of the local component tree, associating it with the visual consistency directed graph, and forming a basic dataset for path function construction; the remote operation instructions refer to component operation requests sent by other users during collaborative editing, including the user identifier of the operation initiator, the target operation type, the target container identifier, the base component identifier, and a visual intent description at the time of the operation; the real-time state data of the local component tree refers to the component tree structure of the current client and the corresponding component visual feature matrix; based on the basic dataset for path function construction, the path function construction is performed to generate the insertion path function with topological constraints.

[0015] Furthermore, the steps for constructing the path function include: parsing remote operation instructions, extracting core operation parameters, and verifying the validity of the baseline component; based on a visually consistent directed graph, performing a restricted depth-first traversal starting from the baseline component identifier to find the neighboring component identifiers of the target insertion position; fusing component visual feature data with real-time state data of the local component tree to optimize the initial path node sequence and generate the path node sequence and visual projection interval; calculating the direction vector and local density features, and integrating them to generate an insertion path function with topological constraints.

[0016] Furthermore, the step of generating and outputting the synchronization message includes: obtaining the collaborative editing status identifier, associating it with the insertion path function with topological constraints and the real-time status data of the local component tree to form a semantically preserved insertion base dataset; performing a semantically preserved insertion operation based on the semantically preserved insertion base dataset to generate the inserted local component tree; and triggering an incremental rendering synchronization mechanism based on the inserted local component tree and the collaborative editing status identifier to generate and output the synchronization message.

[0017] Further, the steps of the semantically preserved insertion operation include: parsing the insertion path function with topological constraints, extracting core parameters, and determining the logical index of the target insertion position; determining the logical index of the target insertion position involves extracting the path node sequence, visual projection interval, direction vector, and local density features from the insertion path function, finding the current logical index of the corresponding component node based on the identifier of the last node in the path node sequence, calculating the insertion offset by combining the direction vector and local density features, and determining the target logical index of the new component; verifying the validity of the target insertion position and performing the semantically preserved component insertion operation; the semantically preserved component insertion operation involves verifying whether there is component overlap or layout conflict at the position corresponding to the target logical index based on the real-time status data of the local component tree. If a conflict exists, the target logical index is adjusted, and then a new component instance is created and inserted into the position corresponding to the target logical index, while recording detailed logs of the insertion operation; determining the semantic degradation state of the insertion operation and marking the operation type; the operation types include: semantically fully preserved, semantically degraded, and requiring manual verification.

[0018] Furthermore, the steps of generating hardware protocol code and synchronizing development documentation include: generating executable hardware communication code based on the co-design configuration data packet; and generating structured development documentation data based on the inserted local component tree and the co-design configuration data packet.

[0019] Furthermore, the step of generating executable hardware communication code from the collaborative design configuration data package includes: extracting hardware interaction visualization configuration data and target platform identifier from the collaborative design configuration data package to generate hardware interaction process definition data and communication protocol frame structure data; generating platform adaptation code framework based on hardware interaction process definition data and target platform identifier; and generating protocol parsing and data binding code module based on communication protocol frame structure data and interface variable binding relationship data.

[0020] A Flutter low-code development and real-time synchronization system supporting multi-user collaboration is provided, which implements the aforementioned Flutter low-code development and real-time synchronization method supporting multi-user collaboration. The system includes:

[0021] Data acquisition and partial order sequence generation module: used to collect the component tree structure, operation logs and corresponding visual layout context of each terminal during multi-user collaborative editing. The three types of data are fused and processed through visual semantic modeling and partial order relation mapping methods to generate and output a partial order component sequence with visual anchors.

[0022] Visual Consistency Directed Graph Construction Module: This module receives a partially ordered sequence of components with visual anchors, supplements the data with the visual features of the components, processes the visual relationships in the partially ordered sequence of components using an adjacency semantic extraction algorithm, and generates and outputs a visual consistency directed graph with visual adjacency relationships as edges.

[0023] Insertion path function construction module: Based on the visual consistency directed graph and remote operation instructions, combined with the real-time status data of the local component tree, the module uses a path function construction algorithm to fuse the topological relationships in the visual consistency directed graph and the remote operation instructions, and generates and outputs insertion path functions with topological constraints.

[0024] Semantic Preservation Insertion and Synchronization Module: Based on the insertion path function with topological constraints, combined with the local component tree and collaborative editing status flags, it performs component insertion operations on the local component tree through the semantic preservation insertion algorithm, triggers the incremental rendering synchronization mechanism, generates synchronization messages and outputs them;

[0025] Hardware Protocol and Documentation Generation Module: Used to generate hardware protocol code and synchronize development documentation based on the inserted local component tree and collaborative design configuration data package.

[0026] Compared to existing technologies, the advantages of this invention are as follows: It solves the problem of operational intent mapping deviation caused by inconsistencies between visual and logical order in Flutter multi-user collaborative editing. Through visual semantic modeling and partial order relation mapping, it accurately captures the dynamic visual context at the moment of user operation, transforming the spatial positional relationship of visible components into a partial order sequence with visual anchors. This eliminates the reliance on static logical indexes susceptible to structural disturbances in the synchronization mechanism, avoiding placement errors caused by concurrent deletion or movement of components by other users, and significantly improving semantic fidelity. The constructed visually consistent directed graph effectively eliminates ambiguous paths in dynamic scenarios such as layout wrapping through adjacency semantic extraction and transitive closure algorithms, achieving a stable topological expression of component adjacency relationships and adapting to the non-linear arrangement requirements of diverse layouts such as Flex, Wrap, and Stack. The insertion path function with topological constraints integrates geometric projection and direction vector features, endowing the operation mapping with continuous spatial awareness. Even when the base component fails or the index changes, it can still accurately locate the insertion position, solving the core user experience pain point of "seeing but not inserting accurately." The semantically preserving insertion algorithm, combined with the incremental rendering synchronization mechanism, only synchronizes the changed parts of the Widget subtree, which greatly reduces network bandwidth consumption, improves synchronization efficiency and smoothness in multi-user high-frequency interaction scenarios, and reduces the cost of manual verification and rework in the later stage. Attached Figure Description

[0027] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0028] Figure 1 This is a flowchart of a Flutter low-code development and real-time synchronization method that supports multi-user collaboration, as described in this invention.

[0029] Figure 2 This is a schematic diagram of the visual layout context in an embodiment of the present invention;

[0030] Figure 3 This is a schematic diagram of a partially ordered component sequence with visual anchors in an embodiment of the present invention;

[0031] Figure 4 This is a schematic diagram of the insertion operation in an embodiment of the present invention;

[0032] Figure 5 This is a schematic diagram of the incremental rendering synchronization mechanism in an embodiment of the present invention;

[0033] Figure 6 This is a functional module diagram of a Flutter low-code development and real-time synchronization system that supports multi-user collaboration, as described in this invention. Detailed Implementation

[0034] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0035] Example 1:

[0036] Please see Figure 1 As shown, this embodiment provides a method for supporting multi-user collaboration in Flutter low-code development and real-time synchronization, including:

[0037] S1: Collect the Widget tree structure, operation logs and corresponding visual layout context of each terminal during multi-user collaborative editing. The three types of data are fused and processed through visual semantic modeling and partial order relation mapping methods to generate and output a partial order component sequence with visual anchors.

[0038] This step focuses on the visual semantic capture requirements of multi-user collaborative editing. First, it collects the Widget tree structure, operation logs, and corresponding visual layout context of each terminal during the multi-user collaborative editing process. Then, it fuses the three types of data through visual semantic modeling and partial order relation mapping methods to generate and output a partial order component sequence with visual anchors.

[0039] The Widget tree structure refers to the structured description carrier of the Flutter application interface, containing the type identifiers, attribute parameters, logical hierarchy relationships, and unique component identifiers of all components. It is obtained in real-time through the Flutter framework's Widget tree traversal interface. Its structure is organized in a hierarchical nested manner of "root node - parent container node - child component node," with each node associated with a unique component identifier to ensure global uniqueness. The operation log refers to the record of user interactions performed in the low-code editing interface, including the operation type, the user identifier initiating the operation, the target container identifier, the operation trigger timestamp, and the initial logical child node index. Operation types cover visual editing behaviors such as component drag-and-drop insertion, deletion, attribute modification, and position adjustment. It is captured through the editing tool's event listening mechanism and archived in timestamp order. The visual layout context refers to the spatial presentation data of all visible components within the target container at the moment the user performs an operation. This includes the center coordinates, width and height dimensions, stacking order, and parent container layout parameters of each component in the rendering coordinate system. The rendering coordinate system has its origin at the top-left corner of the target container, with the positive x-axis pointing horizontally to the right and the positive y-axis pointing vertically downwards. The actual layout information after component rendering is obtained through Flutter's Render Object tree. Please refer to [reference needed]. Figure 2 .

[0040] The partially ordered component sequence with visual anchors is a component relationship carrier that integrates logical hierarchy and visual semantics. Its structure includes two parts: a component identifier set and a visual partially ordered relationship set. The component identifier set is an unordered set consisting of the unique identifiers of all visible components within the target container. Its value range is all component identifiers that are not hidden and are in a rendering state at the time of operation. The visual partially ordered relationship set is a set of component identifier pairs that satisfy the "visual relative position constraint". Each relationship pair exists in the form of a triple of (previous component identifier, subsequent component identifier, position relationship type). The position relationship type includes above and below in the vertical direction and left and right in the horizontal direction, which is used to define the visual relative position constraint between components.

[0041] Specifically, the steps for generating a partially ordered sequence of components with visual anchors are as follows:

[0042] S11: Collect the Widget tree structure, operation logs, and corresponding visual layout context of each terminal during multi-user collaborative editing to form three types of core raw datasets.

[0043] The widget tree structure is obtained in real time through the widget tree traversal interface of the Flutter framework. The operation logs are captured and archived through the event listening mechanism of the editing tool. The visual layout context is obtained through the Flutter Render Object tree. The three types of data are associated according to "operation trigger timestamp - target container identifier" to form three core raw datasets.

[0044] S12: Based on three types of core original datasets, perform visual semantic modeling and partial order relation mapping operations to generate a partial order component sequence with visual anchors.

[0045] Specifically, to achieve the fusion of logical hierarchy and visual semantics, the process of visual semantic modeling and partial order relation mapping is as follows:

[0046] S121: Perform visibility filtering and node extraction on the Widget tree structure in the three core original datasets to obtain the set of visible components for the target container. Based on the hierarchical relationship of the Widget tree structure, locate the target container node corresponding to the user operation, traverse all child component nodes under that node, and determine whether the component is visible by combining the component's visibility and opacity attributes. Filter out components that are hidden or completely transparent, and organize the unique identifiers of the remaining visible components and the indices of their associated logical child nodes into the set of visible components for the target container.

[0047] S122: Synchronously collect the visual layout context of each component in the visible component set of the target container and construct a component visual feature matrix. For each component in the visible component set of the target container, obtain its rendered center point x-coordinate, center point y-coordinate, width, height, and stacking order value through the Flutter framework's RenderBox object. At the same time, extract the layout parameters of the parent container, including layout type (such as Flex, Wrap, Stack, etc.), main axis alignment, cross axis alignment, and padding parameters. Organize the above visual information of each component according to the dimensions of "component unique identifier - center point x-coordinate - center point y-coordinate - width - height - stacking order value - parent container layout type - main axis alignment - cross axis alignment - padding parameters" to form a component visual feature matrix.

[0048] S123: Based on the component visual feature matrix, a partial order relationship between components is established through a visual relative position determination algorithm, generating a set of visual partial order relationships. First, a layout tolerance threshold is set, calculated based on the layout type and inner margin parameters of the parent container. For example, the tolerance threshold for Flex layout is 1 / 5 of the parent container's inner margin, and the tolerance threshold for Wrap layout is 1 / 3 of the average component height, used to distinguish between effective adjacent relationships and gaps between components. Then, all component pairs in the component visual feature matrix are traversed, calculating the projection overlap of the component pairs in the x-axis direction and the projection overlap in the y-axis direction. Combined with the layout tolerance threshold, it is determined whether the overlap meets the effective association standard. When the y-axis projection overlap is greater than or equal to 80%, the x-axis projection overlap is greater than or equal to 50%, and the component spacing does not exceed the layout tolerance threshold, it is determined to be a vertical relationship. For each component, the center point y-coordinates of the two components are compared. The component with the smaller center point y-coordinate is the preceding component, and the component with the larger center point y-coordinate is the following component, forming a partial order relationship where "the preceding component is above the following component". When the x-axis projection overlap is greater than or equal to 80% and the y-axis projection overlap is greater than or equal to 50%, and the component spacing does not exceed the layout tolerance threshold, they are determined to be horizontally related components. The center point x-coordinates of the two components are further compared. The component with the smaller center point x-coordinate is the preceding component, and the component with the larger center point x-coordinate is the following component, forming a partial order relationship where "the preceding component is to the left of the following component". Finally, all partial order relationships that meet the conditions are organized into a visual partial order relationship set.

[0049] S124: Merge the set of visible components and the set of visually partial order relationships of the target container, add visual anchor point identifiers, and generate a partially ordered component sequence with visual anchor points. Mark the preceding component identifier of each relationship pair in the set of visually partial order relationships as a visual anchor point. The anchor point identifier contains a unique component identifier and corresponding visual feature data, serving as a benchmark reference to characterize the partial order relationship. Sort the component identifiers according to the transitivity of the visually partial order relationship to form a partially ordered component sequence. Only explicit visual relative positional constraints between components are retained in the sequence; components without direct or indirect visual associations remain in an unordered state, ultimately forming a partially ordered component sequence with visual anchor points. Please refer to the diagram of the partially ordered component sequence with visual anchor points. Figure 3As shown in the figure, in the canvas space of the Flutter low-code editor, the system constructs a directed graph structure with directional constraints for the six visible components through visual semantic modeling. Component 1 (comp_001) serves as the visual anchor point, forming direct visual associations with Component 2 (comp_002) and Component 6 (comp_006) as "right adjacent" and "directly below adjacent," respectively. Component 4 (comp_004) is located at the "lower left adjacent" position of Component 1 and is further connected to Component 5 (comp_005) through the "right adjacent" relationship, forming a secondary visual chain. It is worth noting that although Component 6 is on the vertical extension line of Component 1, its spacing exceeds the parent container's inner margin tolerance threshold and there is z-index stacking interference. Therefore, it is judged as an "indirectly below" partial order relationship rather than an adjacent relationship, which is marked by a dashed arrow in the figure. This diagram can be understood as follows: When three users concurrently edit a product details page, user A drags the "price tag" (component 1) into the container, user B immediately follows by inserting a "promotional badge" (component 2) visually "right adjacent," and user C attempts to add a "buy button" (component 6) directly below the "price tag." Traditional synchronization mechanisms based on logical indexes will cause the logical index of component 1 to shift due to user A's subsequent adjustment of the parent container's padding value, resulting in user C's operation being mapped to the wrong location. However, this system binds the center point coordinates (x=120, y=80) of component 1 to a unique ID using visual anchor points. Even if the logical index changes, the insertion path function of component 6 can still be calculated using the direction vector (0,1) and local density features, accurately locating it 150 pixels visually below component 1 (considering component height and gap parameters). The partial order relationship determination in the figure effectively eliminates the ambiguous path generated by the layout line wrapping dynamics. When the width of the parent container changes and triggers the automatic line wrapping of component 6, the overlap of its y-axis projection with component 1 will drop to 45%. The system automatically deconstructs the partial order relationship, triggers the baseline component backtracking mechanism, and ensures that the insertion position always fits the original visual intent of user C.

[0050] The core advantage of the partially ordered component sequence with visual anchors generated in this step lies in overcoming the limitation of traditional synchronization mechanisms that rely solely on logical indexes. It transforms the dynamic visual context upon which user operations depend into quantifiable and transitive partially ordered relationships. In Flutter low-code development scenarios, the layout parameters of the parent container can directly cause inconsistencies between the logical order and the visual presentation order of components. For example, components in a Wrap layout may automatically wrap due to insufficient space, at which point the logical child node numbers cannot reflect the visual row and column arrangement. By using visual semantic modeling and partially ordered relationship mapping methods, the spatial coordinates, size, and other visual information of components are bound to logical identifiers, allowing the partially ordered component sequence to retain both the hierarchical structure of the Widget tree and embed user-perceptible visual semantics. This design can accurately capture the visual reference benchmark at the moment of user operation, solving the root cause problem of misalignment between operational intent and placement results caused by ignoring visual context in traditional synchronization mechanisms. Compared to directly using logical indexes, the partially ordered nature of partial-order component sequences is more suitable for the non-linear arrangement scenarios of diverse layouts in Flutter. It can adapt to the visual relationship modeling needs under different layout types such as Flex, Wrap, and Stack, and provides a semantic foundation that is closer to the user's actual operational intent for subsequent real-time synchronization.

[0051] For example, when a user drags and drops components into a Wrap layout container, there are five visible components in the target container, logically ordered as components 1 to 5. However, due to space limitations, components 4 and 5 are arranged on separate lines. Visually, component 3 is at the end of the first line, and component 4 is at the beginning of the second line. Using the method described in this step, after collecting the center point coordinates and dimensions of each component, it is determined that components 1, 2, and 3 are vertically non-overlapping and arranged sequentially, forming a partial order relationship of "component 1 above component 2" and "component 2 above component 3." Component 4 is located to the lower right of component 3 and is not obscured by other components, forming a partial order relationship of "component 3 to the upper left of component 4." Component 5 is to the right of component 4, forming a partial order relationship of "component 4 to the left of component 5." The final generated partial order component sequence with visual anchors contains these visual partial order relationships, providing accurate visual semantic basis for subsequent synchronization operation mapping.

[0052] S2: Receive a partially ordered component sequence with visual anchors, supplement the data with component visual features, process the visual relationships in the partially ordered component sequence through an adjacency semantic extraction algorithm, and generate and output a visually consistent directed graph with visually close adjacency relationships as edges.

[0053] This step focuses on the accurate modeling requirements of visual semantics. It receives the partially ordered component sequence with visual anchors generated by S1, supplements the data with component visual features, processes the visual relationships in the partially ordered component sequence through the adjacency semantic extraction algorithm, and generates and outputs a visually consistent directed graph with visually close adjacency relationships as edges.

[0054] The supplementary visual feature data of the components refers to the extended data of the visual feature matrix of the components in S1, which includes the component's border coordinates, rendering priority, and layout gap parameters of the parent container. These parameters are obtained through Flutter's RenderObject debugging interface. The border coordinates are the coordinates of the top left and bottom right corners of the component in the rendering coordinate system, used to accurately calculate the spatial spacing between components. The rendering priority is used to distinguish the display level of components in the stacked layout, with components having higher values ​​being closer to the visual front end. The layout gap parameters of the parent container include the horizontal and vertical spacing between components, which are directly obtained from the layout properties of the parent container.

[0055] The visual consistency directed graph is a topological structure representing the visual proximity relationships between components. Its structure comprises two parts: a set of nodes and a set of directed edges. The set of nodes is identical to the set of component identifiers in the partially ordered component sequence with visual anchors, and each node is associated with corresponding component visual feature data. The set of directed edges is an ordered set of component identifier pairs that satisfy the visual proximity relationship. Each directed edge exists as a triple of (starting component identifier, ending component identifier, proximity type). The proximity type includes vertically adjacent below, vertically adjacent above, horizontally adjacent to the right, and horizontally adjacent to the left, used to clarify the direct visual association direction between components. The topological structure of the visual consistency directed graph has a transitive closure property; that is, if there is a directed edge from component A to component B and a directed edge from component B to component C, then an indirect visual relationship from component A to component C can be deduced. This property is used to eliminate ambiguous paths generated by dynamic line wrapping in the layout.

[0056] Specifically, the steps for generating a visually consistent directed graph are as follows:

[0057] S21: Collect supplementary data on the visual features of the components, and integrate them with the partially ordered component sequence with visual anchors generated in S1 to form a basic dataset for visual relationship modeling.

[0058] Supplementary visual feature data of components is obtained through Flutter's RenderObject debugging interface. The components are associated with a partial order of components with visual anchors according to their unique identifiers. This ensures that the identifier of each component is bound to both the original visual feature data and the supplementary feature data, forming a basic dataset for visual relationship modeling.

[0059] S22: Based on the visual relationship modeling dataset, perform adjacency semantic extraction operations to generate a visually consistent directed graph.

[0060] Specifically, to transform partial order relations into accurate visual proximity relations, the adjacency semantic extraction operation process is as follows:

[0061] S221: Based on the partially ordered component sequence with visual anchors, extract all component pairs with direct visual partial order relationships to form an initial visual relationship set. Traverse the visual partial order relationship set in the partially ordered component sequence with visual anchors, filter out relationship pairs with relationship types of vertical upward and downward and horizontal left and right, exclude partial order relationships without clear directional constraints, and organize the filtered relationship pairs into the initial visual relationship set according to the format of (previous component identifier, subsequent component identifier, positional relationship type).

[0062] S222: Supplementing data with component visual features, the adjacency of component pairs in the initial visual relationship set is determined, generating a candidate adjacency relationship set. For each component pair in the initial visual relationship set, the spatial distance between the two components is first calculated. The vertical distance between component pairs is the difference between the top-left y-coordinate of the lower component and the bottom-right y-coordinate of the upper component. The horizontal distance between component pairs is the difference between the top-left x-coordinate of the right component and the bottom-right x-coordinate of the left component. Then, the calculated spatial distance is compared with the corresponding layout gap parameter of the parent container. When the spatial distance is less than or equal to 1.2 times the layout gap parameter and no other component's border coordinates fall within this distance range, the two components are determined to meet the spatial adjacency condition. Finally, considering the component rendering priority, if the two components have the same rendering priority and no higher-priority component occludes between them, their adjacency relationship is further confirmed. Component pairs that meet all conditions are organized into a candidate adjacency relationship set, and the adjacency type of each relationship pair is marked.

[0063] S223: Eliminate ambiguous paths in the candidate close neighbor set using the transitive closure algorithm to optimize the generation of the visual close neighbor set. First, construct an adjacency matrix for the candidate close neighbor set. The rows and columns of the matrix correspond to component identifiers. A matrix element of 1 indicates that there is a candidate close neighbor relationship between the components in the corresponding row and column, while 0 indicates that there is no close neighbor relationship. This adjacency matrix serves as the input to the transitive closure algorithm. Its power set is calculated iteratively through matrix multiplication, and finally transformed into a transitive closure matrix, which is used to filter direct close neighbor relationships. Then, the transitive closure operation is performed on the adjacency matrix, that is, the power set of the adjacency matrix is ​​calculated iteratively through matrix multiplication until the matrix no longer changes, resulting in the transitive closure matrix. Finally, based on the transitive closure matrix, all component pair combinations are traversed, and component pairs that only have direct close neighbor relationships and no indirect close neighbor relationships are filtered out. That is, if the matrix element corresponding to component A and component B is 1, and there is no component C such that the matrix elements corresponding to A and C, and C and B are both 1, then the close neighbor relationship between component A and component B is retained. The filtered component pairs are then organized into a visual close neighbor set.

[0064] S224: Construct a directed graph of visual consistency based on the component identifier set and the visual proximity relationship set. The component identifier set is used as the node set of the directed graph of visual consistency, and each node is associated with the corresponding component visual feature data. Each relationship pair in the visual proximity relationship set is used as a directed edge of the directed graph of visual consistency. The starting point of the directed edge is the preceding component identifier in the relationship pair, the ending point is the following component identifier, and the attribute of the directed edge is the corresponding proximity type, ultimately forming a complete directed graph of visual consistency.

[0065] The visually consistent directed graph constructed in this step transforms the visual partial order relationships in a partially ordered component sequence into precise visual adjacency relationships through an adjacency semantic extraction algorithm. This solves the problem that traditional methods cannot model the dynamic mapping of visual semantics after structural perturbations. In multi-user collaborative editing scenarios, when other users perform operations such as deletion or movement on the widget tree, the logical index of the components changes, but the visual adjacency relationships between components remain relatively stable. For example, if user A inserts a component below component X visually, even if the logical index of component X changes due to other users' operations, the adjacent components below it may still remain unchanged. The visually consistent directed graph, through the fusion of coordinate geometry and partial order constraints, gives adjacency relationships spatial continuity and contextual stability. The visual semantics carried by its topological structure cannot be replaced by simple indexes or lists. Compared with traditional logical index mapping, the visually consistent directed graph can accurately capture the direct visual associations between components, avoiding operational mapping deviations caused by inconsistencies between logical and visual orders, and providing a stable visual semantic benchmark for subsequent remote operation synchronization. Meanwhile, the application of the transitive closure algorithm effectively eliminates ambiguous paths generated by layout line breaks, ensuring the topological accuracy of the visually consistent directed graph, and enabling subsequent path reasoning to accurately reflect the user's visual operation intent.

[0066] For example, in the target container of a Flex layout, components 1, 2, and 3 are arranged vertically in sequence. Visually, component 1 is adjacent to component 2 above it, and component 2 is adjacent to component 3 above it, forming an initial set of visual relationships. When user B deletes component 2, the transitive closure property of the visual consistency directed graph can be used to deduce that component 1 and component 3 form a new visually adjacent relationship. At this time, the visual consistency directed graph will automatically update the directed edges, replacing the original "component 1→component 2" and "component 2→component 3" with "component 1→component 3", ensuring that subsequent operations by user A, such as inserting component 1 below it, can be accurately mapped to the visual position above component 3, which is consistent with the user's original operation intention.

[0067] S3: Based on the visually consistent directed graph and remote operation instructions, combined with the real-time status data of the local Widget tree, the path function construction algorithm is used to fuse the topological relationships in the visually consistent directed graph and the remote operation instructions to generate and output the insertion path function with topological constraints.

[0068] This step focuses on the requirement of accurately mapping the visual intent of remote operation. Based on the visually consistent directed graph generated by S2 and the remote operation instructions, combined with the real-time status data of the local Widget tree, the topological relationship in the visually consistent directed graph and the remote operation instructions are fused through the path function construction algorithm to generate and output the insertion path function with topological constraints.

[0069] The remote operation command refers to the component operation request sent by other users during the collaborative editing process. It includes the user identifier of the operation initiator, the target operation type, the target container identifier, the base component identifier, and a visual intent description at the time of the operation. It is received through the real-time communication module of the collaborative editing system. The target operation type includes component insertion, deletion, movement, and attribute modification. The base component identifier is the unique identifier of the visual reference component on which the user operation depends. The visual intent description is a description of the visual target when the user operates, such as "insert directly below the base component" or "insert to the right adjacent position of the base component".

[0070] The real-time state data of the local Widget tree refers to the current client's Widget tree structure and the corresponding component visual feature matrix. It is obtained in real time through the Flutter framework's Widget tree listening interface and includes the latest logical index, visual layout information and state attributes of all components. It is used to verify the current state of the target container and the base component corresponding to the remote operation command, and to ensure that the path function is constructed based on the latest local interface state.

[0071] The topologically constrained insertion path function is an operation mapping carrier that encapsulates visual semantics and topological relationships. Its structure comprises four parts: a path node sequence, a visual projection interval, a direction vector, and local density features. The path node sequence is an ordered set of nodes from the base component identifier to the target insertion position's adjacent component identifier in the visual consistency directed graph, representing the path trajectory of the operation mapping. The visual projection interval is the x-axis and y-axis projection range of all components in the path node sequence in the rendering coordinate system, defining the spatial constraints of the insertion operation. The direction vector is the vector pointing from the center point of the base component to the target insertion position, clarifying the visual direction of the insertion operation. The local density features are the component distribution density in the area where the path node sequence is located, calculated by the ratio of the number of components in that area to the spatial range, used to adapt insertion strategies for different component density scenarios. The functional properties of the insertion path function allow it to adjust the insertion position through interpolation during layout deformation, ensuring visual semantic consistency. Please refer to the diagram for an insertion operation illustration. Figure 4 . Figure 4 This is a schematic diagram of a semantically preserved insertion operation provided in an embodiment of this application. The left side of the diagram, "Pre-Insertation State," shows the original component tree structure. The middle section, "Insertation Operation," represents the system parsing the insertion path function with topological constraints, extracting the path node sequence, visual projection interval, direction vector, and local density features to determine the logical index of the target insertion position. The right side, "Post-Insertation State," shows that the new component has been inserted into the target position and the layout semantic consistency has not been violated. The "Insertion Position" indicates the precise insertion point calculated based on the direction vector and local density features. "Semantic Preservation" indicates that even if the local component tree undergoes structural disturbances, the system still verifies the validity of the insertion position, determines the semantic degradation state (semantic preservation, semantic degradation, and manual verification required), and triggers an incremental rendering synchronization mechanism. Only the changed parts of the Widget subtree are synchronized, ensuring that the new component's placement matches the original visual intent, avoiding the misalignment problem caused by traditional index mapping, and solving the core pain point of "visible but inaccurate insertion."

[0072] Specifically, the steps for generating an insertion path function with topological constraints are as follows:

[0073] S31: Receives remote operation commands, collects real-time status data of the local Widget tree, associates it with the visually consistent directed graph generated by S2, and forms a path function to construct the basic dataset.

[0074] The system receives remote operation commands through the real-time communication module of the collaborative editing system, obtains real-time status data of the local Widget tree through the Widget tree listening interface of the Flutter framework, and associates the remote operation commands, the real-time status data of the local Widget tree with the visual consistency directed graph according to the target container identifier to form the basic dataset for constructing path functions.

[0075] S32: Construct a basic dataset based on the path function, perform the path function construction operation, and generate an insertion path function with topological constraints.

[0076] Specifically, to integrate visual intent and topological relationships, the path function construction process is as follows:

[0077] S321: Parse remote operation commands, extract core operation parameters, and verify the validity of the baseline component. Perform syntax parsing on the remote operation commands to extract core parameters such as the target container identifier, baseline component identifier, and visual intent description. Based on real-time status data of the local Widget tree, query the container node corresponding to the target container identifier and the component node corresponding to the baseline component identifier. If the baseline component node exists and is visible, the baseline component is deemed valid, and its current visual feature data is recorded. If the baseline component node does not exist or is hidden, the remote operation command is marked as "baseline invalid," and a baseline component backtracking mechanism is triggered. The topological relationship of the visual consistency directed graph is used to find candidate baseline components with indirect visual associations to the original baseline component, and the component with the highest association is selected as the replacement baseline component. This replacement baseline component will serve as the new traversal starting point, and subsequent restricted depth-first traversals will be performed.

[0078] S322: Based on a visually consistent directed graph, a restricted depth-first traversal is performed starting from the baseline component identifier to find the nearest neighbor component identifier of the target insertion position. First, a traversal depth threshold and directional constraints are set. The traversal depth threshold is dynamically calculated based on the number of nodes in the visually consistent directed graph, typically one-third of the total number of nodes, to avoid efficiency losses due to excessive traversal. The directional constraints are determined according to the visual intent description of the remote operation command. For example, if the visual intent is "straight below," the traversal direction is constrained to be only vertically adjacent to the bottom. Then, starting from the node corresponding to the baseline component identifier, adjacent nodes are traversed according to the directional constraints, and the node sequence on the traversal path is recorded. When a node is traversed where its spatial relationship with the baseline component perfectly matches the visual intent description, and no subsequent nodes of that node have a better match, the traversal stops, and the node identifier is determined as the nearest neighbor component identifier of the target insertion position. The corresponding traversal path is the initial path node sequence.

[0079] S323: Integrate component visual feature data with real-time state data from the local Widget tree to optimize the initial path node sequence, generating a path node sequence and visual projection interval. Calculate the component visual feature data corresponding to each node in the initial path node sequence, extract the center point coordinates and border coordinates of each component, and merge the x-axis and y-axis coordinate ranges of all components to obtain the visual projection interval. Simultaneously, combine the real-time state data from the local Widget tree to verify the current state of each component in the path node sequence. If a component has been deleted or moved, it is replaced with the optimal candidate component through the topological relationship of the visually consistent directed graph, ensuring the validity of the path node sequence, and finally generating the optimized path node sequence.

[0080] S324: Calculate the direction vector and local density features, and integrate them to generate an insertion path function with topological constraints. Based on the center point coordinates of the reference component and the center point coordinates of the component immediately adjacent to the target insertion position, calculate the vector difference between the two to obtain the direction vector; count the number of components within the visual projection interval where the path node sequence is located, calculate the area of ​​the interval, and use the ratio of the number of components to the area of ​​the interval as the local density feature; finally, encapsulate the path node sequence, visual projection interval, direction vector, and local density features according to a preset format to form an insertion path function with topological constraints.

[0081] The topologically constrained insertion path function generated in this step deeply integrates the visual intent of remote operation commands with the topological relationships of the visually consistent directed graph through a path function construction algorithm, solving the problem that simple next node lookup is easily affected by structural disturbances. In multi-user collaborative editing scenarios, structural disturbances are unavoidable, such as other users deleting or inserting components, causing changes in the logical index of the baseline component. However, the insertion path function, as a whole variable, carries both geometric and topological information, enabling the insertion decision to have continuous spatial awareness. Compared with traditional operation mapping based on logical indexes, the insertion path function does not rely on a single index value, but accurately locates the insertion position through the topological relationships of the path node sequence and the spatial constraints of the visual projection interval, avoiding semantic breaks caused by discrete index jumps. At the same time, the combination of constrained depth-first traversal and the baseline component backtracking mechanism ensures that even if the baseline component fails or structural disturbances occur, the optimal insertion position reference can still be found, further improving the accuracy of the insertion operation. The functional properties of the insertion path function enable it to adapt to different layout types and component densities. By adjusting the insertion position through interpolation adaptation, it ensures that no matter how the layout is deformed, the insertion operation can maximally match the user's original visual intent.

[0082] For example, user A sends a remote operation command intending to insert a component directly below component X. At this time, user B has deleted a component preceding component X, causing a change in the logical index of component X. This method first parses the remote operation command to verify that component X is still valid; then, based on a visually consistent directed graph, a restricted depth-first traversal is performed according to the vertically adjacent downward direction constraint to find the immediate neighbor component Y directly below component X; the component's visual feature data is fused with the real-time state of the local Widget tree to generate a sequence of path nodes containing components X and Y and their corresponding visual projection intervals; the direction vector from component X to Y and the local density features of this region are calculated, finally generating the insertion path function. This function can ignore changes in the logical index of component X and accurately locate the insertion position based on visual topology, ensuring that the component is inserted visually directly below component X.

[0083] S4: Based on the insertion path function with topological constraints, combined with the local Widget tree and collaborative editing state flags, the component insertion operation is performed on the local Widget tree through the semantically preserved insertion algorithm, and the incremental rendering synchronization mechanism is triggered to generate and output a synchronization message.

[0084] This step focuses on the semantic consistency and synchronization efficiency requirements of collaborative editing. Based on the insertion path function with topological constraints generated by S3, combined with the local Widget tree and collaborative editing status flags, the component insertion operation is performed on the local Widget tree through the semantically preserved insertion algorithm, and the incremental rendering synchronization mechanism is triggered to generate and output synchronization messages.

[0085] The collaborative editing status identifier refers to the current editing status data of the client, including whether it is in offline mode, whether there are any unsynchronized operations, and the current synchronization progress. It is obtained through the status management module of the collaborative editing system and is used to determine the execution timing and synchronization strategy of the insertion operation. For example, when in offline mode, the insertion operation is cached and synchronized after connecting to the network.

[0086] The synchronization message is a data carrier used to notify other clients to perform consistency calibration. It includes the user identifier of the operation initiator, complete information of the inserted component, a summary of the insertion path function, a context checksum, and an operation timestamp. The complete information of the inserted component includes the component type, attribute parameters, and unique component identifier. The insertion path function summary is a simplified representation of the core parameters of the insertion path function. The context checksum is calculated based on the state data of the insertion path function and the local Widget tree and is used to verify the validity of the synchronization operation.

[0087] Specifically, the steps for performing semantic-based insertion and incremental rendering synchronization are as follows:

[0088] S41: Obtain the collaborative editing status identifier and associate it with the topologically constrained insertion path function generated by S3 and the real-time status data of the local Widget tree to form a semantically preserved insertion base dataset.

[0089] The collaborative editing status identifier is obtained through the status management module of the collaborative editing system. The real-time status data of the insertion path function with topological constraints and the local Widget tree are associated with the collaborative editing status identifier according to the unique component identifier and operation timestamp, forming a semantically preserved insertion basic dataset.

[0090] S42: Based on the semantically preserved insertion base dataset, perform semantically preserved insertion operations to generate the local Widget tree after insertion.

[0091] Specifically, to preserve the user's original layout intent to the greatest extent possible, the semantically preserved insertion operation process is as follows:

[0092] S421: Parse the insertion path function with topological constraints, extract core parameters, and determine the logical index of the target insertion position. Extract the path node sequence, visual projection interval, direction vector, and local density features from the insertion path function; based on the identifier of the last node in the path node sequence, find the corresponding component node in the local widget tree and determine the current logical index of the component node; combine the direction vector and local density features to calculate the insertion offset. If the local density feature is high, i.e., the component distribution is dense, the insertion offset is smaller to avoid component overlap; if the local density feature is low, the insertion offset is larger to ensure visual rationality; determine the target logical index of the new component based on the logical index of the target component node and the insertion offset.

[0093] S422: Verify the validity of the target insertion position and perform a semantically preserved component insertion operation. Based on real-time state data of the local Widget tree, verify whether there is component overlap or layout conflict at the position corresponding to the target logical index. If a conflict exists, adjust the target logical index according to the visual projection range and direction vector until the optimal insertion position is found. Then, create a new component instance, set its attribute parameters and unique component identifier, and insert the new component instance into the position corresponding to the target logical index in the local Widget tree. At the same time, record a detailed log of the insertion operation, including the unique identifier of the inserted component, the target logical index, the insertion timestamp, and the corresponding insertion path function summary, for subsequent synchronization and auditing.

[0094] S423: Determine the semantic degradation status of the insertion operation and mark the operation type. Check the current state of each component in the path node sequence of the insertion path function. If all components are valid and their positions have not changed significantly, the semantics of the insertion operation are completely preserved, and the operation type is marked as "semantically preserved". If some components have moved but there is still a valid path, and the insertion position deviates slightly from the original visual intent, the insertion operation is marked as "semantically partially preserved", and the operation type is marked as "semantic degradation". If most components in the path node sequence are invalid, and the insertion position deviates significantly from the original visual intent, the insertion operation is marked as "severely semantically deviated", and the operation type is marked as "requires manual verification", and a prompt is given in the editing interface.

[0095] S43: Based on the inserted local Widget tree and collaborative editing status flags, trigger the incremental rendering synchronization mechanism, generate synchronization messages and output them.

[0096] Specifically, to improve synchronization efficiency and ensure consistency, the incremental rendering synchronization mechanism operates as follows:

[0097] S431: Compare the differences in the local Widget tree before and after the insertion operation, and extract only the changed parts of the Widget subtree related to the insertion operation to avoid performance loss caused by full rendering. The relevant changed parts of the Widget subtree specifically include the newly inserted component itself, the parent container whose layout position or hierarchy has changed due to the insertion behavior, and the adjacent components before and after the insertion position;

[0098] S432: Based on the modified Widget subtree and the insertion operation log, generate a synchronization message. The context checksum in the synchronization message is obtained by calculating the insertion path function and the state data of the modified Widget subtree using a hash algorithm.

[0099] S433: The synchronization strategy is determined based on the collaborative editing status indicator. If the collaborative editing status indicator shows that it is currently in online mode and there is no backlog of unsynchronized operations, the synchronization message is immediately sent to the collaborative editing system's server, which then forwards it to other clients. If the collaborative editing status indicator shows that it is currently in offline mode, the synchronization message is cached in the local storage module. Once the status indicator is updated to online mode, it is sent in batches according to the operation timestamp order. Please refer to the diagram of the incremental rendering synchronization mechanism. Figure 5When client A detects a change in the Widget tree, it extracts only the changed parts, including the newly inserted component itself, the affected parent container, and adjacent components, generating a small-scale synchronization message. This message is then transmitted over the network to client B, where incremental rendering updates the application, avoiding a full rebuild. This mechanism extracts the changed subtree by comparing the differences before and after insertion, generates a context checksum using a hash algorithm, and determines whether to send it in real-time or cache it locally based on the collaborative editing status flag. This significantly reduces bandwidth consumption and improves synchronization efficiency and smoothness in multi-user, high-frequency interaction scenarios.

[0100] This step, through a semantically preserving insertion algorithm and incremental rendering synchronization mechanism, ensures that component insertion operations retain the user's original layout intent to the greatest extent possible even under structural changes, solving the core user experience problem of visible but inaccurate insertion in collaborative editing. Traditional synchronization mechanisms insert components directly by logical index, ignoring visual semantics, resulting in component placement that does not match the user's intent. This step, however, executes the insertion operation based on an insertion path function with topological constraints. The parameters carried by the insertion path function, such as the visual projection range and direction vector, accurately map the user's visual intent. Even if the local widget tree undergoes structural disturbances, the insertion position can be adjusted through the topological relationship of the path node sequence, ensuring that the new component, after rendering, is as close as possible to its original visual position at the time of the original operation. The semantic degradation state determination mechanism provides users with feedback on the validity of the operation, allowing them to promptly identify and handle insertion operations with significant semantic deviations, reducing the cost of manual verification and rework later. Simultaneously, the incremental rendering synchronization mechanism only synchronizes the changed parts of the widget tree, effectively improving synchronization efficiency and reducing network bandwidth consumption. The introduction of context checksums ensures the accuracy of the synchronization operation, avoiding synchronization errors caused by network latency or data tampering. Compared to traditional full synchronization, the synchronization mechanism in this step is more suitable for collaborative editing scenarios with high-frequency interaction among multiple users, and can improve the smoothness of the editing experience while ensuring synchronization consistency.

[0101] For example, user A inserts a component via a remote operation command, with its insertion path function specifying that the component should be inserted directly below component Y visually. When this insertion path function is received by the local client, component Y's logical index has changed from 3 to 2 due to user B's operation. However, through a semantically preserved insertion algorithm, after parsing the insertion path function, the target logical index directly below component Y's visual position is determined based on component Y's current visual position and direction vector. The new component is then inserted at that position, and after rendering, the new component remains directly below component Y's visual position, perfectly matching user A's original operation intent. Simultaneously, an incremental rendering synchronization mechanism is triggered, synchronizing only the inserted portion of the new component to other clients, ensuring that the interface state of all clients remains consistent.

[0102] S5: Based on the inserted local component tree and collaborative design configuration data package, hardware protocol code is generated and development documentation is synchronized.

[0103] This step focuses on the engineering output requirements of low-code development results. Based on the inserted local component tree and collaborative design configuration data packet output by S4, it generates and outputs executable hardware communication code and structured development document data through hardware protocol code generation algorithm and development document dynamic construction algorithm.

[0104] The local component tree after insertion refers to the local Widget tree structure obtained after S4 performs the semantically preserved insertion operation, which includes the final arrangement order, attribute parameters, and unique identifiers of all components. The collaborative design configuration data package refers to the structured data set formed by S4 during the generation of synchronization messages, integrating the current collaborative editing project status, including hardware interaction visualization configuration data, interface variable binding relationship data, component operation logs, and project metadata.

[0105] S51: Generate executable hardware communication code based on co-design configuration data packets.

[0106] S511: Extract hardware interaction visualization configuration data and target platform identifier from the collaborative design configuration data package, and generate hardware interaction process definition data and communication protocol frame structure data.

[0107] Specifically, the hardware interaction visualization configuration data refers to the structured data stream formed by users dragging and dropping hardware function nodes in a collaborative editing environment. The node types include channel-type nodes such as USB-HID, serial port, TCP-Server, TCP-Client, UDP, CoAP, NFC, and Bluetooth, as well as sensor-type nodes such as accelerometers (excluding gravity), accelerometers (including gravity), gyroscopes, magnetometers, barometers, photosensors, distance sensors, and cameras. The target platform identifier refers to the operating system type identifier that the application will deploy and run on, such as Android, iOS, or Windows. The generation process is as follows: parsing the hardware interaction visualization configuration data, mapping it to the corresponding driver abstraction layer according to the node type identifier, converting the node sequence into an ordered set of hardware operation instructions to form hardware interaction flow definition data; simultaneously, extracting protocol frame format parameters according to the technical specifications of channel-type or sensor-type nodes, including the frame header byte sequence, frame tail byte sequence, data segment length definition method, and verification algorithm identifier, to form communication protocol frame structure data.

[0108] S512: Based on the hardware interaction process, define data and target platform identifiers to generate a platform-adaptive code framework.

[0109] Specifically, the generation process is as follows: select the corresponding hardware communication middleware template according to the target platform identifier, map the hardware interaction process definition data to the interface call sequence of the template, and generate a code framework containing device discovery, connection establishment, data channel maintenance and event listening logic.

[0110] S513: Generates protocol parsing and data binding code module based on communication protocol frame structure data and interface variable binding relationship data.

[0111] Specifically, the interface variable binding relationship data refers to the set of mapping relationships between protocol data fields and interface component variables extracted from the collaborative design configuration data packet. The generation process is as follows: based on the frame format definition in the communication protocol frame structure data, a data parsing function containing frame header recognition, data segment extraction, and checksum verification logic is generated; based on the interface variable binding relationship data, code statements that assign specific data segments to corresponding interface variables are inserted into this parsing function, forming a protocol parsing and data binding code module.

[0112] S514: Integrates platform adaptation code framework and protocol parsing and data binding code module, injects exception handling logic, and generates and outputs executable hardware communication code.

[0113] Specifically, the integration process is as follows: the protocol parsing and data binding code module is integrated as a callback function into the data receiving event handling position in the platform adaptation code framework; the injected exception handling logic refers to inserting timeout control, connection status check, and retry or error reporting code blocks for data format verification failures at key nodes of the code connection, data sending and receiving and parsing, and finally generating complete executable hardware communication code that can be embedded in the Flutter project.

[0114] S52: Generate structured development document data based on the inserted local component tree and collaborative design configuration data package.

[0115] S521: Extract component operation logs and project metadata from the collaborative design configuration data package, and combine them with the inserted local component tree to generate a development metadata set.

[0116] Specifically, the generation process is as follows: traverse the component operation log and reorganize the user editing operation sequence in chronological order; analyze the local component tree after insertion and extract the component hierarchy, type and attribute information; integrate the project name, version and participant information in the project metadata to form a set of development metadata containing a complete development process record.

[0117] S522: Based on the development metadata set and document template rules, execute the document dynamic construction algorithm to generate and output structured development document data.

[0118] Specifically, the document template rules define the mapping relationship between different types of metadata and document chapters. The document dynamic construction algorithm executes the following process: traversing the development metadata set, classifying each piece of metadata into the corresponding chapter according to the document template rules; converting the metadata into natural language descriptions or chart codes according to preset narrative logic and format specifications; assembling the content of each chapter to generate structured development document data that can be rendered in HTML, Markdown, or PDF format.

[0119] S523: Monitor changes to the development metadata set, trigger the incremental document update mechanism, update the structured development document data, and record the document version trajectory.

[0120] Specifically, the monitoring mechanism continuously compares the current state of the development metadata set with the state of the previous version; when a metadata change is detected, it automatically triggers the document dynamic construction algorithm to incrementally update the structured development document data; at the same time, it records the summary of this change, the associated metadata identifier, and the timestamp into the document version track.

[0121] For example, multiple users collaboratively design an application interface for connecting to a Bluetooth body fat scale, forming a local component tree after insertion. During collaborative editing, users configure the Bluetooth scanning, connection, and data reception processes through a graphical panel; these configurations are recorded in the collaborative design configuration data package. S51 extracts the configuration information from this data package and automatically generates Dart code that can search for Bluetooth devices, parse weight data according to a specified frame format, and update the UI. Simultaneously, S52, based on the final component tree and operation logs, automatically generates an HTML-formatted development document containing an interface structure diagram, a variable dictionary, and communication protocol specifications. When any user subsequently modifies the interface or protocol configuration, the document is automatically updated synchronously.

[0122] Example 2:

[0123] This embodiment, based on embodiment 1, provides a Flutter low-code development and real-time synchronization system that supports multi-user collaboration, such as... Figure 6 As shown, it includes:

[0124] A Flutter low-code development and real-time synchronization system supporting multi-user collaboration is provided, which implements the aforementioned Flutter low-code development and real-time synchronization method supporting multi-user collaboration. The system includes:

[0125] Data acquisition and partial order sequence generation module: used to collect the component tree structure, operation logs and corresponding visual layout context of each terminal during multi-user collaborative editing. The three types of data are fused and processed through visual semantic modeling and partial order relation mapping methods to generate and output a partial order component sequence with visual anchors.

[0126] Visual Consistency Directed Graph Construction Module: This module receives a partially ordered sequence of components with visual anchors, supplements the data with the visual features of the components, processes the visual relationships in the partially ordered sequence of components using an adjacency semantic extraction algorithm, and generates and outputs a visual consistency directed graph with visual adjacency relationships as edges.

[0127] Insertion path function construction module: Based on the visual consistency directed graph and remote operation instructions, combined with the real-time status data of the local component tree, the module uses a path function construction algorithm to fuse the topological relationships in the visual consistency directed graph and the remote operation instructions, and generates and outputs insertion path functions with topological constraints.

[0128] Semantic Preservation Insertion and Synchronization Module: Based on the insertion path function with topological constraints, combined with the local component tree and collaborative editing status flags, it performs component insertion operations on the local component tree through the semantic preservation insertion algorithm, triggers the incremental rendering synchronization mechanism, generates synchronization messages and outputs them.

[0129] Hardware Protocol and Documentation Generation Module: Used to generate hardware protocol code and synchronize development documentation based on the inserted local component tree and collaborative design configuration data package.

Claims

1. A method for Flutter low-code development and real-time synchronization supporting multi-user collaboration, characterized in that, The method includes: S1: Collect the component tree structure, operation logs and corresponding visual layout context of each terminal during multi-user collaborative editing. The three types of data are fused and processed through visual semantic modeling and partial order relation mapping methods to generate and output a partial order component sequence with visual anchors. S2: Receive a partially ordered component sequence with visual anchors, supplement the data with component visual features, process the visual relationships in the partially ordered component sequence through an adjacency semantic extraction algorithm, and generate and output a visually consistent directed graph with visually close adjacency relationships as edges. S3: Based on the visually consistent directed graph and remote operation instructions, combined with the real-time status data of the local component tree, the path function construction algorithm is used to fuse the topological relationship in the visually consistent directed graph and the remote operation instructions to generate and output the insertion path function with topological constraints. S4: Based on the insertion path function with topological constraints, combined with the local component tree and collaborative editing status flags, the component insertion operation is performed on the local component tree through the semantically preserved insertion algorithm, and the incremental rendering synchronization mechanism is triggered to generate and output a synchronization message; S5: Based on the inserted local component tree and collaborative design configuration data package, hardware protocol code is generated and development documentation is synchronized; The step of generating and outputting the insertion path function with topological constraints includes: The system receives remote operation commands, collects real-time status data of the local component tree, and associates it with a visual consistency directed graph to form a path function construction base dataset. The remote operation commands refer to component operation requests sent by other users during collaborative editing, including the user identifier of the operation initiator, the target operation type, the target container identifier, the base component identifier, and a visual intent description at the time of the operation. The real-time status data of the local component tree refers to the component tree structure of the current client and the corresponding component visual feature matrix. The basic dataset is constructed based on the path function, and the path function construction is performed to generate the insertion path function with topological constraints. The steps for constructing the path function include: parsing remote operation instructions, extracting core operation parameters, and verifying the validity of the baseline component; performing a restricted depth-first traversal based on a visually consistent directed graph, starting from the baseline component identifier, to find the nearest neighbor component identifier of the target insertion position; fusing component visual feature data with real-time state data of the local component tree to optimize the initial path node sequence and generate the path node sequence and visual projection interval; calculating the direction vector and local density features, and integrating them to generate an insertion path function with topological constraints.

2. The Flutter low-code development and real-time synchronization method supporting multi-user collaboration according to claim 1, characterized in that, The step of generating and outputting the partially ordered component sequence with visual anchors includes: The component tree structure, operation logs, and corresponding visual layout context of each terminal during multi-user collaborative editing were collected to form three types of core raw datasets; Based on three types of core original datasets, visual semantic modeling and partial order relation mapping are performed to generate a partial order component sequence with visual anchors.

3. The Flutter low-code development and real-time synchronization method supporting multi-user collaboration according to claim 2, characterized in that, The steps of visual semantic modeling and partial order relation mapping include: The visibility of the component tree structure in the three types of core original datasets is filtered and nodes are extracted to obtain the set of visible components of the target container. The method for obtaining the set of visible components of the target container is as follows: based on the hierarchical relationship of the component tree structure, the target container node corresponding to the user operation is located, all child component nodes under the target container node are traversed, and the visibility and transparency attributes of the components are combined to determine whether the components are visible. Components that are hidden or completely transparent are filtered out, and the unique identifiers of the remaining visible components and the indexes of their associated logical child nodes are organized into the set of visible components of the target container. Synchronously collect the visual layout context of each component in the visible component set of the target container and construct a component visual feature matrix; Based on the component visual feature matrix, a visual relative position determination algorithm is used to establish a partial order relationship between components and generate a visual partial order relationship set. The visual relative position determination algorithm is as follows: first, a layout tolerance threshold is set based on the layout type and inner margin parameters of the parent container; then, all component pairs in the component visual feature matrix are traversed, and the projection overlap of the component pairs in the x-axis direction and the projection overlap in the y-axis direction are calculated. The layout tolerance threshold is combined to determine whether the projection overlap reaches the effective association standard, and then the vertical or horizontal partial order relationship between components is determined. The set of visible components of the target container and the set of visual partial order relationships are merged, and visual anchor point identifiers are added to generate a partially ordered component sequence with visual anchor points. The visual anchor point identifier contains a unique identifier of the component and corresponding visual feature data, which is used to characterize the benchmark reference of the partial order relationship.

4. The Flutter low-code development and real-time synchronization method supporting multi-user collaboration according to claim 1, characterized in that, The steps for generating the visually consistent directed graph include: Collect supplementary data on the visual features of components, and integrate them with the partially ordered component sequences with visual anchors to form a basic dataset for visual relationship modeling. Based on the visual relationship modeling dataset, adjacency semantic extraction is performed to generate a visually consistent directed graph.

5. The Flutter low-code development and real-time synchronization method supporting multi-user collaboration according to claim 4, characterized in that, The steps for adjacency semantic extraction include: Based on the partially ordered component sequence with visual anchors, extract all component pairs that have direct visual partially ordered relationships to form an initial set of visual relationships; By combining the visual features of the components with supplementary data, the adjacentity of component pairs in the initial visual relationship set is determined, and a candidate adjacent relationship set is generated. The transitive closure algorithm is used to eliminate ambiguous paths in the candidate adjacent relationship set and optimize the generation of the visual adjacent relationship set. A directed graph of visual consistency is constructed based on the set of component identifiers and the set of visual adjacency relationships.

6. The Flutter low-code development and real-time synchronization method supporting multi-user collaboration according to claim 1, characterized in that, The step of generating and outputting the synchronization message includes: Obtain collaborative editing status identifiers and associate them with the insertion path function with topological constraints and the real-time status data of the local component tree to form a semantically preserved insertion base dataset; Based on the semantically preserved insertion dataset, perform semantically preserved insertion operations to generate a local component tree after insertion; Based on the inserted local component tree and collaborative editing status flags, the incremental rendering synchronization mechanism is triggered, generating and outputting synchronization messages.

7. The Flutter low-code development and real-time synchronization method supporting multi-user collaboration according to claim 6, characterized in that, The steps of the semantically preserving insertion operation include: The insertion path function with topological constraints is parsed, the core parameters are extracted, and the logical index of the target insertion position is determined. The determination of the logical index of the target insertion position is to extract the path node sequence, visual projection interval, direction vector and local density features in the insertion path function, find the current logical index of the corresponding component node based on the last node identifier of the path node sequence, and calculate the insertion offset by combining the direction vector and local density features to determine the target logical index of the new component. Verify the validity of the target insertion position and perform a semantically preserved component insertion operation. The semantically preserved component insertion operation is to verify whether there is component overlap or layout conflict at the position corresponding to the target logical index based on the real-time status data of the local component tree. If there is a conflict, adjust the target logical index, then create a new component instance and insert it into the position corresponding to the target logical index, and record a detailed log of the insertion operation. Determine the semantic degradation status of the insertion operation and mark the operation type; the operation types include: semantics fully preserved, semantic degradation, and manual verification required.

8. The Flutter low-code development and real-time synchronization method supporting multi-user collaboration according to claim 1, characterized in that, The steps for generating hardware protocol code and synchronizing development documentation include: Generate executable hardware communication code based on collaborative design configuration data packets; Structured development documentation data is generated based on the inserted local component tree and the collaborative design configuration data package.

9. A method for supporting multi-user collaboration in Flutter low-code development and real-time synchronization according to claim 8, characterized in that, The steps for generating executable hardware communication code from the collaborative design configuration data packet include: Extract hardware interaction visualization configuration data and target platform identifier from the collaborative design configuration data package to generate hardware interaction process definition data and communication protocol frame structure data; Based on the hardware interaction process, define the data and target platform identifier, and generate a platform-adaptive code framework; Based on the communication protocol frame structure data and the interface variable binding relationship data, a protocol parsing and data binding code module is generated.

10. A Flutter low-code development and real-time synchronization system supporting multi-user collaboration, used to implement the method of any one of claims 1-9, characterized in that, The system includes: Data acquisition and partial order sequence generation module: used to collect the component tree structure, operation logs and corresponding visual layout context of each terminal during multi-user collaborative editing. The three types of data are fused and processed through visual semantic modeling and partial order relation mapping methods to generate and output a partial order component sequence with visual anchors. Visual Consistency Directed Graph Construction Module: This module receives a partially ordered sequence of components with visual anchors, supplements the data with the visual features of the components, processes the visual relationships in the partially ordered sequence of components using an adjacency semantic extraction algorithm, and generates and outputs a visual consistency directed graph with visual adjacency relationships as edges. Insertion path function construction module: Based on the visual consistency directed graph and remote operation instructions, combined with the real-time status data of the local component tree, the module uses a path function construction algorithm to fuse the topological relationships in the visual consistency directed graph and the remote operation instructions, and generates and outputs insertion path functions with topological constraints. Semantic Preservation Insertion and Synchronization Module: Based on the insertion path function with topological constraints, combined with the local component tree and collaborative editing status flags, it performs component insertion operations on the local component tree through the semantic preservation insertion algorithm, triggers the incremental rendering synchronization mechanism, generates synchronization messages and outputs them; Hardware Protocol and Documentation Generation Module: Used to generate hardware protocol code and synchronize development documentation based on the inserted local component tree and collaborative design configuration data package.

Images