Canvas operation method and device for online layout design tool, equipment and medium

Abstract

The invention discloses a canvas operation method and device for an online layout design tool, equipment and a medium, is applied to a Fabric.js tool library, and relates to the technical field of electronic design automation. The canvas operation method comprises the steps that an operation instruction sent by a user side is obtained, and a current operation state corresponding to a current state index is obtained; the current operation state is a canvas operation state of a current canvas on the online layout design tool; executing a corresponding operation action on the current canvas based on the operation instruction and the current operation state, and modifying a state variable corresponding to the current canvas after the operation action is completed; the operation action comprises a canvas operation revocation action or a canvas operation recovery action; and generating a corresponding operation record based on the operation action and the current operation state, and adding the operation record to a preset state array. In this way, the reliability of the canvas operation revocation recovery function in the online layout design tool can be improved.

Description

Technical Field

[0001] This invention relates to the field of electronic design automation technology, and in particular to canvas operation methods, apparatus, devices and media for online layout design tools. Background Technology

[0002] EDA (Electronic Design Automation) technology is a specialized new technology for electronic systems that uses computers as tools, employs hardware description languages, and integrates knowledge from multiple disciplines such as databases, computational mathematics, graphics, and optimization theory. This technology effectively supports simulation, debugging, and verification at all levels of electronic engineering, significantly reducing the workload of designers and making it an indispensable software tool for chip and circuit board design.

[0003] In recent years, online EDA platforms based on HTML5 Canvas and JavaScript libraries (such as Fabric.js) have become an important trend, with undo / redo functionality being a key module for ensuring design consistency. However, traditional implementations typically save history by serializing the entire canvas state (e.g., converting it to JSON format), which has significant drawbacks when handling complex graphics and numerous operations: on the one hand, frequent full-state saving leads to a surge in memory consumption, and re-rendering during undo / redo is inefficient, causing interface lag; on the other hand, there is insufficient support for compound operations (such as selection and movement), which can easily result in problems such as disordered graphic relationships and residual selection states.

[0004] Therefore, as online layout design tools become increasingly complex, improving the performance and accuracy of undo / redo functions has become a pressing technical challenge. Summary of the Invention

[0005] The purpose of this invention is to provide a canvas operation method, apparatus, device, and medium for online layout design tools, which can improve the reliability of the canvas operation undo and restore function in online layout design tools. The specific solution is as follows: Firstly, this application discloses a canvas operation method for an online layout design tool, applied to the Fabric.js utility library, including: Obtain the operation command sent by the user and obtain the current operation status corresponding to the current status index; the current operation status is the canvas operation status of the current canvas on the online layout design tool; the canvas operation status includes canvas add operation, canvas delete operation and canvas modify operation; Based on the operation instruction and the current operation state, the corresponding operation action is performed on the current canvas, and after the operation action is completed, the state variable corresponding to the current canvas is modified; the operation action includes canvas operation undo action or canvas operation redo action; Based on the operation action and the current operation state, a corresponding operation record is generated and added to a preset state array.

[0006] Optionally, before obtaining the operation instruction sent by the user terminal and obtaining the current operation state corresponding to the current state index, the method further includes: The canvas operation states are divided into canvas add operation, canvas delete operation and canvas modify operation; The preset state array is used to record the canvas operation state and the operation information corresponding to the canvas operation state; If the canvas operation status is a canvas addition operation, then the operation information includes the object addition time, unique identifier, and complete object attribute information; If the canvas operation status is a canvas deletion operation, then the operation information includes the object deletion time and a unique identifier; If the canvas operation status is a canvas modification operation, then the operation information includes the object modification time, unique identifier, and attribute change information before and after modification; The storage location corresponding to the canvas operation state in the preset state array is recorded using a state index, so that the current operation state can be determined from the canvas operation state based on the state index.

[0007] Optionally, if the operation instruction is a cancel instruction, then the step of performing a corresponding operation action on the current canvas based on the operation instruction and the current operation state, and modifying the state variable corresponding to the current canvas after completing the operation action, includes: If the current operation state is the canvas addition operation, then the preset state array is traversed to determine the first target item whose addition time is the same as the change time of the current operation state; Determine a first target object from the current object list of the current canvas that has the same unique identifier as the first target item, and remove the first target object from the current canvas; Save the object information corresponding to the first target object to a preset list of objects to be removed; If the current operation state is the canvas deletion operation, then the preset state array is traversed to determine the second target item whose deletion time is the same as the change time of the current operation state; Determine whether there exists an object in the current object list that has the same unique identifier as the second target item; If there is no object in the current object list that has the same unique identifier as the second target project, then retrieve the historical object corresponding to the current operation state from the preset object removal list; Create a Fabric.js object corresponding to the historical object to obtain the second target object, and add the second target object to the current canvas; If the current operation state is the canvas modification operation, then the preset state array is traversed to determine the third target item whose version has changed based on the attribute change information before and after the modification. The object with the same unique identifier as the third target item is identified in the current object list to obtain the third target object; The state of the third target object is copied, and the state of the third target object is restored to the current canvas using a preset variable setting method; After the operation is completed, the value of the state variable corresponding to the current canvas is decremented by 1.

[0008] Optionally, if the operation instruction is a restore instruction, then performing the corresponding operation action on the current canvas based on the operation instruction and the current operation state includes: Increment the value of the state variable corresponding to the current canvas by 1; If the current operation state is the canvas addition operation, then the preset state array is traversed to determine the fourth target item whose addition time is the same as the change time of the current operation state; Determine whether there exists an object on the current canvas that has the same unique identifier as the fourth target project; If no object with the same unique identifier as the fourth target project exists, then the second historical object corresponding to the current operation state is obtained from the preset list of removed objects; Create a Fabric.js object corresponding to the second historical object to obtain the fourth target object, and add the fourth target object to the current canvas; If the current operation state is the canvas deletion operation, then the preset state array is traversed to determine the fifth target item whose deletion time is the same as the change time of the current operation state; Identify a fifth target object from the current object list that has the same unique identifier as the fifth target item, and remove the fifth target object from the current canvas; Save the object information corresponding to the fifth target object to the preset list of objects to be removed; If the current operation state is the canvas modification operation, then the preset state array is traversed to determine the sixth target item whose version has changed based on the attribute change information before and after the modification. In the current object list, identify the object that has the same unique identifier as the sixth target item to obtain the sixth target object; The state of the sixth target object is copied, and the state of the third target object is restored to the current canvas using a preset variable setting method.

[0009] Optionally, before performing the corresponding operation action on the current canvas based on the operation instruction and the current operation state, the method further includes: Call the preset method to cancel the currently active object to clear the selection state on the current canvas; Call the preset asynchronous re-render canvas method to update the canvas state.

[0010] Optionally, the step of performing a corresponding operation on the current canvas based on the operation instruction and the current operation state further includes: The object states of all target operation objects in the operation action are serialized and deserialized using a preset serialization method to obtain a copy of the target object; A recursive saving method is used to save all sub-objects of the target composite object so that during the canvas operation recovery action, sub-object instances corresponding to all sub-objects are created to obtain a new target composite object.

[0011] Optionally, the method further includes: The value corresponding to the state variable is judged; If the value corresponding to the state variable is less than 0, the canvas operation undo action is prohibited, and a corresponding prompt prohibiting undo operation is displayed. If the value corresponding to the state variable is greater than or equal to the preset recovery value, the canvas operation recovery action is prohibited, and a corresponding prompt to prohibit the recovery operation is given; the preset recovery value is the value of the data volume of the preset state array minus 1.

[0012] Secondly, this application discloses a canvas operation device for an online layout design tool, applied to the Fabric.js tool library, including: The instruction acquisition module is used to acquire operation instructions sent by the user terminal and acquire the current operation status corresponding to the current status index; the current operation status is the canvas operation status of the current canvas on the online layout design tool; the canvas operation status includes canvas add operation, canvas delete operation and canvas modify operation; An operation execution module is used to perform corresponding operation actions on the current canvas based on the operation instructions and the current operation state, and modify the state variables corresponding to the current canvas after completing the operation actions; the operation actions include canvas operation undo actions or canvas operation redo actions; The operation record module is used to generate corresponding operation records based on the operation action and the current operation state, and add the operation records to a preset state array.

[0013] Thirdly, this application discloses an electronic device, including: Memory, used to store computer programs; A processor for executing the computer program to implement the aforementioned canvas operation method of the online layout design tool.

[0014] Fourthly, this application discloses a computer-readable storage medium for storing a computer program, which, when executed by a processor, implements the aforementioned canvas operation method of the online layout design tool.

[0015] As can be seen, in this invention, the user's operation command is obtained, and the current operation state corresponding to the current state index is obtained; the current operation state is the canvas operation state of the current canvas on the online layout design tool; the canvas operation state includes canvas add operation, canvas delete operation, and canvas modify operation; based on the operation command and the current operation state, the corresponding operation action is executed on the current canvas, and after the operation action is completed, the state variable corresponding to the current canvas is modified; the operation action includes canvas operation undo action or canvas operation redo action; based on the operation action and the current operation state, a corresponding operation record is generated, and the operation record is added to a preset state array. That is, the user's operation command and the corresponding canvas operation state are captured in real time, and the undo or redo action is executed accurately according to the command and the current state; then the canvas state variable is updated synchronously to ensure the consistency between the interface and the data state. Based on each operation action and its associated state, a clear operation record is generated and added to the preset state array in an orderly manner to form a complete and traceable operation history sequence. This not only makes state transitions fast and reliable, reducing continuous consumption of memory and computing resources, but also accurately handles multi-layered and complex canvas editing operations, avoiding state transition errors or data loss that often occurred during undo / redo. It significantly improves the responsiveness and operational reliability of online layout design tools, enabling users to perform complex editing smoothly and confidently, thereby improving user experience and operational efficiency. Attached Figure Description

[0016] To more clearly illustrate the embodiments of the present invention, the accompanying drawings used in the embodiments 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.

[0017] Figure 1 This is a flowchart of a canvas operation method for an online layout design tool disclosed in this invention; Figure 2 This is a schematic diagram of the canvas operation device structure of an online layout design tool disclosed in this invention; Figure 3 This is a structural diagram of an electronic device disclosed in this invention. Detailed Implementation

[0018] 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 of ordinary skill in the art without creative effort are within the protection scope of the present invention.

[0019] The terms "comprising" and "having," and any variations thereof, in the specification and accompanying drawings of this invention are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not limited to the steps or units listed, but may include steps or units not listed.

[0020] To enable those skilled in the art to better understand the present invention, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0021] EDA technology is the core of electronic design automation, supporting chip and circuit board design. Traditional full-state serialization methods suffer from high memory consumption, low rendering efficiency, and insufficient support for complex operations. As designs become more complex, improving the performance and accuracy of this function has become an urgent technical challenge.

[0022] See Figure 1 As shown in the figure, this application discloses a canvas operation method for an online layout design tool, applied to the Fabric.js tool library, including: Step S11: Obtain the operation command sent by the user terminal, and obtain the current operation status corresponding to the current status index; the current operation status is the canvas operation status of the current canvas on the online layout design tool; the canvas operation status includes canvas add operation, canvas delete operation and canvas modify operation.

[0023] In this embodiment, before obtaining the operation command sent by the user terminal and obtaining the current operation state corresponding to the current state index, the method further includes: dividing the canvas operation state into canvas add operation, canvas delete operation, and canvas modify operation; using the preset state array to record the canvas operation state and the operation information corresponding to the canvas operation state; if the canvas operation state is the canvas add operation, the operation information includes the object add time, unique identifier, and complete object attribute information; if the canvas operation state is the canvas delete operation, the operation information includes the object delete time and unique identifier; if the canvas operation state is the canvas modify operation, the operation information includes the object modify time, unique identifier, and attribute change information before and after modification; using the state index to record the storage location corresponding to the canvas operation state in the preset state array, so as to determine the current operation state from the canvas operation state based on the state index. The canvas operation state is subdivided into four categories: canvas add operation (add), canvas delete operation (remove), canvas modify operation (modified), and no change (nochange). For each type of operation, key information is recorded in detail. In the add operation, the object's add time (addTime), unique identifier (onlyId), and complete object attribute information are recorded. In the delete operation, the object's delete time (removeTime) and unique identifier (onlyId) are recorded. For the modify operation, the version number (changeversion), unique identifier (onlyId), and key attribute changes before and after the modification are recorded. This categorized and detailed recording method accurately captures the essential characteristics of each canvas operation. Furthermore, a state array (e.g., canvasState) is used to store all operation states, while a state index (e.g., stateIndex) is used to track the current operation state's position in the array. Whenever a new operation occurs, a corresponding state record is generated based on the operation type and added to the canvasState array, while simultaneously updating stateIndex. This design makes operation state management orderly and easy to trace. Then, when the user triggers the corresponding operation, the canvas operation state corresponding to the current state index is first retrieved. In this way, through the categorized management and modular implementation of operation states, new operation types can be easily added to the existing framework without significantly impacting the overall system, providing strong support for the continuous development of online layout design tools.

[0024] Step S12: Execute the corresponding operation action on the current canvas based on the operation instruction and the current operation state, and modify the state variable corresponding to the current canvas after completing the operation action; the operation action includes canvas operation undo action or canvas operation redo action.

[0025] In this embodiment, if the operation instruction is a cancel instruction, then the step of performing a corresponding operation on the current canvas based on the operation instruction and the current operation state, and modifying the state variable corresponding to the current canvas after completing the operation, includes: if the current operation state is a canvas addition operation, then traversing the preset state array to determine a first target item whose addition time is the same as the change time of the current operation state; determining a first target object with the same unique identifier as the first target item from the current object list of the current canvas, and removing the first target object from the current canvas; saving the object information corresponding to the first target object to a preset removal object list; if the current operation state is a canvas deletion operation, then traversing the preset state array to determine a second target item whose deletion time is the same as the change time of the current operation state; determining whether there is a second target item in the current object list that is the same as the first target item. If the second target item has the same unique identifier as the first target item, then if no object with the same unique identifier as the second target item exists in the current object list, then the historical object corresponding to the current operation state is obtained from the preset removal object list; a Fabric.js object corresponding to the historical object is created to obtain the second target object, and the second target object is added to the current canvas; if the current operation state is a canvas modification operation, then the preset state array is traversed to determine the third target item whose version has changed based on the attribute change information before and after modification; an object with the same unique identifier as the third target item is determined in the current object list to obtain the third target object; the state of the third target object is copied, and the state of the third target object is restored to the current canvas using a preset variable setting method; after the operation is completed, the value of the state variable corresponding to the current canvas is decremented by 1. That is, when the user triggers an undo operation (i.e., type is revoke), the canvas operation state (canvasItem) corresponding to the current state index is first obtained. If the canvasItem type is add, then the canvasState array is traversed to find all items whose addition time is the same as the changeTime of the canvasItem. For each found item, search for an object with the same onlyId in the current canvas's object list and remove it from the canvas. Simultaneously, for subsequent recovery operations, save the complete state of the removed object (through a deep copy, e.g., using JSON.parse(JSON.stringify(obj))) into a dedicated list for storing the state of removed objects (e.g., removeItemList).When the canvasItem type is `remove`, the canvasState array is traversed to find items whose deletion time matches the canvasItem's `changeTime`. It checks if an object with that item's `onlyId` already exists in the current canvas. If not, the previously saved object state is retrieved from `removeItemList`, and a new object instance is created and added to the canvas based on that state. This process of creating a new object instance is implemented using a dedicated method (e.g., `createObjectFromState`), which creates a corresponding Fabric.js object based on the object's type (e.g., rectangle, circle, text, etc.) and sets its properties to the saved state. For canvasItem types of `modified`, the canvasState array is traversed to find items with a `changeVersion` of `canvasItem.changeVersion - 1`. In the current canvas's object list, an object with the same `onlyId` and a `changeVersion` of `item.changeVersion + 1` is found. The state is saved by deep copying (e.g., `constsavedState = JSON.parse(JSON.stringify(item));`), then the object's properties are set to the saved state using set methods, and the object's coordinate information is updated by calling the `setCoords` method to ensure that the object's position and shape on the canvas are correctly restored. After completing the above operations, `stateIndex` is decremented by 1, indicating that the state has been rolled back to the previous state.

[0026] In this embodiment, if the operation instruction is a restore instruction, then the step of performing the corresponding operation action on the current canvas based on the operation instruction and the current operation state includes: incrementing the value of the state variable corresponding to the current canvas by 1; if the current operation state is a canvas addition operation, then traversing the preset state array to determine a fourth target item whose addition time is the same as the change time of the current operation state; determining whether there is an object on the current canvas with the same unique identifier as the fourth target item; if there is no object with the same unique identifier as the fourth target item, then obtaining the second historical object corresponding to the current operation state from the preset removed object list; creating a Fabric.js object corresponding to the second historical object to obtain the fourth target object, and adding the fourth target object to the current canvas; if the current operation state is... The canvas deletion operation involves iterating through the preset state array to determine the fifth target item whose deletion time is the same as the change time of the current operation state; determining the fifth target object with the same unique identifier as the fifth target item from the current object list, and removing the fifth target object from the current canvas; saving the object information corresponding to the fifth target object to the preset removed object list; if the current operation state is the canvas modification operation, iterating through the preset state array to determine the sixth target item whose version has changed based on the attribute change information before and after modification; determining the object with the same unique identifier as the sixth target item in the current object list to obtain the sixth target object; copying the state of the sixth target object, and using a preset variable setting method to restore the state of the third target object to the current canvas. That is, when the user performs a restore operation (i.e., type is not revoke), the stateIndex is first incremented by 1. Then, the canvas operation state (canvasItem) corresponding to the new state index is obtained. If the canvasItem type is add, the canvasState array is traversed to find the item whose addition time is the same as the changeTime of the canvasItem. Check if an object with the specified `onlyId` already exists in the current canvas. If not, retrieve the previously saved state of the corresponding object from `removeItemList` and add a new object instance to the canvas using the `createObjectFromState` method. When `canvasItem` is of type `remove`, iterate through the `canvasState` array to find items whose deletion time matches the `changeTime` of the `canvasItem`. Check if an object with the specified `onlyId` already exists in the current canvas. If it exists, remove it from the canvas and save the complete state of the removed object to `removeItemList`.For canvasItems of type modified, iterate through the canvasState array and find items whose changeversion is the same as canvasItem.changeversion. In the current canvas object list, find objects with the same onlyId and whose changeversion is item.changeversion - 1. Save the state through a deep copy, use setter methods to set the object's properties to the saved state, and call the setCoords method to update the object's coordinate information, thus correctly restoring the object's state.

[0027] In this embodiment, before performing the corresponding operation on the current canvas based on the operation instruction and the current operation state, the method further includes: calling a preset method to cancel the current active object to clear the selection state on the current canvas; and calling a preset asynchronous re-rendering canvas method to update the canvas state. That is, before performing the undo or redo operation, the `this.canvas.discardActiveObject()` method is first called to clear the selection state on the current canvas, ensuring that no residual selection box affects the visual effect and subsequent operations. Then, the `this.canvas.requestRenderAll()` method is called to request re-rendering of the canvas to update the canvas state.

[0028] In this embodiment, the step of performing the corresponding operation action on the current canvas based on the operation instruction and the current operation state further includes: using a preset serialization method to perform serialization and deserialization processing on the object states of all target operation objects in the operation action to obtain a copy of the target object; and using a recursive saving method to save all sub-objects of the target composite object so that during the canvas operation recovery action, sub-object instances corresponding to all sub-objects are created to obtain a new target composite object. That is, during the entire undo and recovery process, the saving and recovery of object states adopts a deep copy approach. For example, when saving the object state, JSON.parse(JSON.stringify(obj)) is used to serialize and deserialize the complete state of the object to obtain an independent object copy. This avoids inconsistencies in state due to object reference issues during the recovery operation. For composite objects (such as temporary combinations formed by user selection of multiple graphics), special processing is performed during saving and recovery. When saving the state of a composite object, the states of all its sub-objects are saved recursively. When recovering a composite object, all sub-object instances are first created according to the saved state, and then these sub-object instances are combined into a new composite object and added to the canvas. This method ensures the integrity and correctness of the combined objects during the undo and restore process.

[0029] Step S13: Generate a corresponding operation record based on the operation action and the current operation state, and add the operation record to a preset state array.

[0030] In this embodiment, corresponding operation records are generated based on the operation action and the current operation state, and these operation records are added to a preset state array. That is, a corresponding operation record is generated for each operation action and the current operation state to form a complete and traceable operation history sequence. Specifically, when a new operation occurs, a corresponding state record is generated according to the operation type and added to the canvasState array, while simultaneously updating the stateIndex. This design makes the management of operation states orderly and easy to trace. This avoids state transition errors or data loss that often occur during previous undo / redo processes. The added state index boundary check mechanism ensures that errors such as exceeding boundaries do not occur during undo / redo operations, improving the stability and reliability of the system. Furthermore, the comprehensive consideration and handling of various operation situations allows the method of this invention to exhibit good adaptability and stability in different scenarios.

[0031] In addition, during the continuous interactive flow of canvas operations, the system can listen to user-sent operation commands in real time and simultaneously capture the instantaneous state parameters of the current operating environment. The command type, state identifier, timestamp, and context fingerprint are semantically encapsulated to form operation record units with unique sequence identifiers. These record units are then appended to a pre-configured circular queue-style state storage unit in chronological order. This storage unit dynamically maintains the complete operation chain of the most recent time period with a fixed capacity, automatically discarding the oldest record whenever a new record is added to maintain a constant threshold of memory usage. In this way, each state transition is transformed into a reproducible structured data trace, tightly linked to the historical trajectory. When a process interruption occurs or it is necessary to backtrack to a historical node, the serialized records in the state storage unit can be directly traversed to parse out the complete environmental variables and operation sequence at that time, thereby accurately reconstructing the scene and locating the triggering conditions.

[0032] This embodiment further includes: judging the value corresponding to the state variable; if the value corresponding to the state variable is less than 0, the canvas operation undo action is prohibited, and a corresponding undo operation prompt is given; if the value corresponding to the state variable is greater than or equal to a preset restore value, the canvas operation restore action is prohibited, and a corresponding restore operation prompt is given; the preset restore value is the value of the data volume of the preset state array minus 1. Specifically, when performing undo and restore operations, this invention adds boundary checks on the state index. In the undo operation, if stateIndex is less than 0, it indicates that the earliest operation state has been reached and undoing is not possible. At this time, a prompt message is output (such as console.log('Unable to continue undoing');), and stopRecord is set to false to stop the current undo operation process. In the restore operation, if stateIndex is greater than or equal to canvasStateType.length - 1, it indicates that the latest operation state has been reached and restore is not possible. Similarly, a prompt message is output (such as console.log('Unable to continue restore');), and stopRecord is set to false to stop the restore operation process. To optimize performance, batch processing is used for multiple state change operations. For example, after a series of add, delete, or modify operations on the canvas, instead of immediately re-rendering the canvas, the state of these operations is recorded first. Once all operations are complete, the `this.canvas.renderAll()` method is called all at once to re-render the canvas. This reduces unnecessary rendering attempts and improves application responsiveness. Simultaneously, frequently used methods and data are cached to avoid redundant calculations and queries, further enhancing performance.

[0033] As can be seen, in this embodiment, the operation instructions sent by the user are obtained, and the current operation state corresponding to the current state index is obtained; the current operation state is the canvas operation state of the current canvas on the online layout design tool; the canvas operation state includes canvas add operation, canvas delete operation, and canvas modify operation; based on the operation instructions and the current operation state, the corresponding operation action is executed on the current canvas, and after the operation action is completed, the state variable corresponding to the current canvas is modified; the operation action includes canvas operation undo action or canvas operation redo action; based on the operation action and the current operation state, a corresponding operation record is generated, and the operation record is added to a preset state array. That is, the user operation instructions and the corresponding canvas operation state are captured in real time, and the undo or redo action is executed accurately according to the instructions and the current state; then the canvas state variable is updated synchronously to ensure the consistency between the interface and the data state. Based on each operation action and its associated state, a clear operation record is generated and added to the preset state array in an orderly manner to form a complete and traceable operation history sequence. This not only makes state transitions fast and reliable, reducing continuous consumption of memory and computing resources, but also accurately handles multi-layered and complex canvas editing operations, avoiding state transition errors or data loss that often occurred during undo / redo. It significantly improves the responsiveness and operational reliability of online layout design tools, enabling users to perform complex editing smoothly and confidently, thereby improving user experience and operational efficiency.

[0034] refer to Figure 2 The present application also discloses a canvas operation device for an online layout design tool, applied to the Fabric.js tool library, comprising: The instruction acquisition module 11 is used to acquire operation instructions sent by the user terminal and acquire the current operation status corresponding to the current status index; the current operation status is the canvas operation status of the current canvas on the online layout design tool; the canvas operation status includes canvas addition operation, canvas deletion operation and canvas modification operation; The operation execution module 12 is used to perform corresponding operation actions on the current canvas based on the operation instructions and the current operation state, and modify the state variable corresponding to the current canvas after completing the operation action; the operation action includes canvas operation undo action or canvas operation redo action; The operation record module 13 is used to generate corresponding operation records based on the operation action and the current operation state, and add the operation records to a preset state array.

[0035] As can be seen, in this embodiment, user operation commands and corresponding canvas operation states are captured in real time, and undo or redo actions are executed precisely based on the commands and the current state. Subsequently, the canvas state variables are updated synchronously to ensure consistency between the interface and data states. A clear operation record is generated based on each operation and its associated state, and these records are added in an orderly manner to a preset state array, forming a complete and traceable operation history sequence. This not only makes state switching fast and reliable, reducing the continuous consumption of memory and computing resources, but also accurately handles multi-level and complex canvas editing operations, avoiding state jump errors or data loss that often occur during undo / redo processes. This significantly improves the response speed and operational reliability of the online layout design tool, enabling users to perform complex editing smoothly and confidently, thereby improving user experience and operational efficiency.

[0036] Furthermore, embodiments of this application also disclose an electronic device, Figure 3 This is a structural diagram of an electronic device according to an exemplary embodiment. The content of the diagram should not be construed as limiting the scope of this application. Specifically, the electronic device may include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 stores a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the canvas operation method of the online layout design tool disclosed in any of the foregoing embodiments. Furthermore, the electronic device in this embodiment may specifically be a computer.

[0037] In this embodiment, the power supply 23 is used to provide operating voltage for various hardware devices on the electronic device; the communication interface 24 can create a data transmission channel between the electronic device and external devices, and the communication protocol it follows can be any communication protocol applicable to the technical solution of this application, and is not specifically limited here; the input / output interface 25 is used to acquire external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs, and is not specifically limited here.

[0038] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, disk or optical disk, etc. The resources stored thereon can include operating system 221, computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0039] The operating system 221 is used to manage and control the various hardware devices on the electronic device and the computer program 222, which may be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program capable of performing the canvas operation method of the online layout design tool executed by the electronic device as disclosed in any of the foregoing embodiments, the computer program 222 may further include a computer program capable of performing other specific tasks.

[0040] Furthermore, this application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, it implements the canvas operation method of the aforementioned online layout design tool. The specific steps of this method can be found in the corresponding content disclosed in the foregoing embodiments, and will not be repeated here.

[0041] Furthermore, this application also discloses a computer program product, including a computer program / instructions; wherein, when the computer program / instructions are executed by a processor, they implement the aforementioned disclosed alarm aggregation method. Specific steps of this method can be found in the corresponding content disclosed in the foregoing embodiments, and will not be repeated here.

[0042] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to in the method section.

[0043] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0044] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein can be implemented directly by hardware, a software module executed by a processor, or a combination of both. The software module can be located in random access memory (RAM), main memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, removable disk, CD-ROM, or any other form of storage medium known in the art.

[0045] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0046] The technical solutions provided in this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only intended to help understand the methods and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A canvas operation method for an online layout design tool, characterized in that, Applied to the Fabric.js utility library, including: Obtain the operation command sent by the user and obtain the current operation status corresponding to the current status index; the current operation status is the canvas operation status of the current canvas on the online layout design tool; the canvas operation status includes canvas add operation, canvas delete operation and canvas modify operation; Based on the operation instruction and the current operation state, the corresponding operation action is performed on the current canvas, and after the operation action is completed, the state variable corresponding to the current canvas is modified; the operation action includes canvas operation undo action or canvas operation redo action; Based on the operation action and the current operation state, a corresponding operation record is generated and added to a preset state array.

2. The canvas operation method of the online layout design tool according to claim 1, characterized in that, Before obtaining the operation command sent by the user terminal and obtaining the current operation state corresponding to the current state index, the method further includes: The canvas operation states are divided into canvas add operation, canvas delete operation and canvas modify operation; The preset state array is used to record the canvas operation state and the operation information corresponding to the canvas operation state; If the canvas operation status is a canvas addition operation, then the operation information includes the object addition time, unique identifier, and complete object attribute information; If the canvas operation status is a canvas deletion operation, then the operation information includes the object deletion time and a unique identifier; If the canvas operation status is a canvas modification operation, then the operation information includes the object modification time, unique identifier, and attribute change information before and after modification; The storage location corresponding to the canvas operation state in the preset state array is recorded using a state index, so that the current operation state can be determined from the canvas operation state based on the state index.

3. The canvas operation method of the online layout design tool according to claim 1, characterized in that, If the operation instruction is a cancel instruction, then the step of performing a corresponding operation action on the current canvas based on the operation instruction and the current operation state, and modifying the state variable corresponding to the current canvas after completing the operation action, includes: If the current operation state is the canvas addition operation, then the preset state array is traversed to determine the first target item whose addition time is the same as the change time of the current operation state; Determine a first target object from the current object list of the current canvas that has the same unique identifier as the first target item, and remove the first target object from the current canvas; Save the object information corresponding to the first target object to a preset list of objects to be removed; If the current operation state is the canvas deletion operation, then the preset state array is traversed to determine the second target item whose deletion time is the same as the change time of the current operation state; Determine whether there exists an object in the current object list that has the same unique identifier as the second target item; If there is no object in the current object list that has the same unique identifier as the second target project, then retrieve the historical object corresponding to the current operation state from the preset object removal list; Create a Fabric.js object corresponding to the historical object to obtain the second target object, and add the second target object to the current canvas; If the current operation state is the canvas modification operation, then the preset state array is traversed to determine the third target item whose version has changed based on the attribute change information before and after the modification. The object with the same unique identifier as the third target item is identified in the current object list to obtain the third target object; The state of the third target object is copied, and the state of the third target object is restored to the current canvas using a preset variable setting method; After the operation is completed, the value of the state variable corresponding to the current canvas is decremented by 1.

4. The canvas operation method of the online layout design tool according to claim 3, characterized in that, If the operation instruction is a restore instruction, then the step of performing the corresponding operation action on the current canvas based on the operation instruction and the current operation state includes: Increment the value of the state variable corresponding to the current canvas by 1; If the current operation state is the canvas addition operation, then the preset state array is traversed to determine the fourth target item whose addition time is the same as the change time of the current operation state; Determine whether there exists an object on the current canvas that has the same unique identifier as the fourth target project; If no object with the same unique identifier as the fourth target project exists, then the second historical object corresponding to the current operation state is obtained from the preset list of removed objects; Create a Fabric.js object corresponding to the second historical object to obtain the fourth target object, and add the fourth target object to the current canvas; If the current operation state is the canvas deletion operation, then the preset state array is traversed to determine the fifth target item whose deletion time is the same as the change time of the current operation state; Identify a fifth target object from the current object list that has the same unique identifier as the fifth target item, and remove the fifth target object from the current canvas; Save the object information corresponding to the fifth target object to the preset list of objects to be removed; If the current operation state is the canvas modification operation, then the preset state array is traversed to determine the sixth target item whose version has changed based on the attribute change information before and after the modification. In the current object list, identify the object that has the same unique identifier as the sixth target item to obtain the sixth target object; The state of the sixth target object is copied, and the state of the third target object is restored to the current canvas using a preset variable setting method.

5. The canvas operation method of the online layout design tool according to claim 1, characterized in that, Before performing the corresponding operation action on the current canvas based on the operation instruction and the current operation state, the method further includes: Call the preset method to cancel the currently active object to clear the selection state on the current canvas; Call the preset asynchronous re-render canvas method to update the canvas state.

6. The canvas operation method of the online layout design tool according to claim 1, characterized in that, The step of performing a corresponding operation on the current canvas based on the operation instruction and the current operation state further includes: The object states of all target operation objects in the operation action are serialized and deserialized using a preset serialization method to obtain a copy of the target object; A recursive saving method is used to save all sub-objects of the target composite object so that during the canvas operation recovery action, sub-object instances corresponding to all sub-objects are created to obtain a new target composite object.

7. The canvas operation method of the online layout design tool according to any one of claims 1 to 6, characterized in that, Also includes: The value corresponding to the state variable is judged; If the value corresponding to the state variable is less than 0, the canvas operation undo action is prohibited, and a corresponding prompt prohibiting undo operation is displayed. If the value corresponding to the state variable is greater than or equal to the preset recovery value, the canvas operation recovery action is prohibited, and a corresponding prompt to prohibit the recovery operation is displayed. The preset recovery value is the value of the preset state array data volume minus 1.

8. A canvas operation device for an online layout design tool, characterized in that, Applied to the Fabric.js utility library, including: The instruction acquisition module is used to acquire operation instructions sent by the user terminal and acquire the current operation status corresponding to the current status index; the current operation status is the canvas operation status of the current canvas on the online layout design tool; the canvas operation status includes canvas add operation, canvas delete operation and canvas modify operation; An operation execution module is used to perform corresponding operation actions on the current canvas based on the operation instructions and the current operation state, and modify the state variables corresponding to the current canvas after completing the operation actions; the operation actions include canvas operation undo actions or canvas operation redo actions; The operation record module is used to generate corresponding operation records based on the operation action and the current operation state, and add the operation records to a preset state array.

9. An electronic device, characterized in that, include: Memory, used to store computer programs; A processor for executing the computer program to implement the steps of the canvas operation method of the online layout design tool as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the canvas operation method of the online layout design tool as described in any one of claims 1 to 7.

Images