CN-122018881-A - Canvas operation method, device, equipment and medium of online layout design tool

CN122018881ACN 122018881 ACN122018881 ACN 122018881ACN-122018881-A

Abstract

The invention discloses a canvas operation method, a device, equipment and a medium of an online layout design tool, which are applied to a fabric. Js tool library and relate to the technical field of electronic design automation, and comprise the steps of acquiring an operation instruction sent by a user side and acquiring a current operation state corresponding to a current state index; the current operation state is the canvas operation state of the current canvas on the online layout design tool, corresponding operation actions are executed on the current canvas based on the operation instruction and the current operation state, and after the operation actions are completed, state variables corresponding to the current canvas are modified, the operation actions comprise canvas operation cancel actions or canvas operation restore actions, corresponding operation records are generated based on the operation actions and the current operation state, and the operation records are added into a preset state array. Thus, the reliability of the canvas operation cancel recovery function in the online layout design tool can be improved.

Inventors

YU HONGZHEN
LI YANZHEN
XUE CHANGQING

Assignees

山东云海国创云计算装备产业创新中心有限公司

Dates

Publication Date: 20260512
Application Date: 20260228

Claims (10)

1. A canvas operation method of an online layout design tool is characterized by being applied to a fabric. Js tool library and comprising the following steps: Acquiring an operation instruction sent by a user side, and acquiring a current operation state corresponding to a current state index, wherein the current operation state is a canvas operation state of a current canvas on an online layout design tool, and the canvas operation state comprises a canvas adding operation, a canvas deleting operation and a canvas modifying operation; Executing corresponding operation actions on the current canvas based on the operation instructions and the current operation state, and modifying state variables corresponding to the current canvas after completing the operation actions, wherein the operation actions comprise canvas operation undoing actions or canvas operation restoring actions; and generating a corresponding operation record based on the operation action and the current operation state, and adding the operation record into a preset state array.
2. The canvas operation method for an online layout design tool according to claim 1, wherein before the operation instruction sent by the user side is obtained and the current operation state corresponding to the current state index is obtained, the method further comprises: Dividing the canvas operation state into a canvas adding operation, a canvas deleting operation and a canvas modifying operation; Recording the canvas operation state and the operation information corresponding to the canvas operation state by utilizing the preset state array; If the canvas operation state is the canvas adding operation, the operation information comprises object adding time, a unique identifier and object attribute complete information; If the canvas operation state is the canvas deleting operation, the operation information comprises object deleting time and a unique identifier; if the canvas operation state is the canvas modification operation, the operation information comprises object modification time, a unique identifier and attribute change information before and after modification; And recording the corresponding storage position of the canvas operation state in the preset state array by using a state index so as to determine the current operation state from the canvas operation state based on the state index.
3. The canvas operation method of an on-line layout design tool according to claim 1, wherein if the operation instruction is a cancel instruction, the 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 completing the operation action, comprises: If the current operation state is the canvas adding operation, traversing the preset state array, and determining a first target item with the adding time being the same as the changing time of the current operation state; determining a first target object identical to a unique identifier of a first target item from a current object list of the current canvas, and removing the first target object from the current canvas; Storing object information corresponding to the first target object into a preset removal object list; if the current operation state is the canvas deleting operation, traversing the preset state array, and determining a second target item with the deleting time identical to the changing time of the current operation state; judging whether an object identical to the unique identifier of the second target item exists in the current object list or not; If the current object list does not contain the object which is the same as the unique identifier of the second target item, acquiring a historical object corresponding to the current operation state from the preset removal object list; Creating a fabric js object corresponding to the history object to obtain a second target object, and adding the second target object to the current canvas; if the current operation state is the canvas modification operation, traversing the preset state array to determine a third target item with a changed version based on attribute change information before and after modification; determining the same object as the unique identifier of the third target item in the current object list to obtain a third target object; Copying the state of the third target object, and restoring the state of the third target object to the current canvas by using a preset variable setting method; and after the operation action is finished, subtracting 1 from the value of the state variable corresponding to the current canvas.
4. A canvas operation method for an online layout design tool according to claim 3, wherein if the operation instruction is a resume instruction, the performing a corresponding operation action on the current canvas based on the operation instruction and the current operation state comprises: adding 1 to the value of the state variable corresponding to the current canvas; if the current operation state is the canvas adding operation, traversing the preset state array, and determining a fourth target item with the adding time being the same as the changing time of the current operation state; judging whether an object identical to the unique identifier of the fourth target item exists on the current canvas or not; If the object which is the same as the unique identifier of the fourth target item does not exist, acquiring a second historical object corresponding to the current operation state from a preset removal object list; Creating a fabric. Js object corresponding to the second history object to obtain a fourth target object, and adding the fourth target object to the current canvas; if the current operation state is the canvas deleting operation, traversing the preset state array, and determining a fifth target item with the deleting time identical to the changing time of the current operation state; Determining a fifth target object from the current object list that is identical to the unique identifier of the fifth target item, and removing the fifth target object from the current canvas; Storing object information corresponding to the fifth target object into the preset removal object list; If the current operation state is the canvas modification operation, traversing the preset state array to determine a sixth target item with a changed version based on attribute change information before and after modification; Determining the same object as the unique identifier of the sixth target item in the current object list to obtain a sixth target object; Copying the state of the sixth target object, and restoring the state of the third target object to the current canvas by using a preset variable setting method.
5. The canvas operation method of an online layout design tool according to claim 1, wherein before the performing the corresponding operation action on the current canvas based on the operation instruction and the current operation state, further comprising: invoking a preset cancel current active object method to clear a selected state on the current canvas; The preset asynchronous re-rendering canvas method is invoked to update the canvas state.
6. The canvas operation method of an online layout design tool according to claim 1, wherein the performing a corresponding operation action on the current canvas based on the operation instruction and the current operation state further comprises: Carrying out serial number and inverse serialization processing on object states of all target operation objects in the operation action by using a preset serialization method so as to obtain target object copies; And storing all the sub-objects of the target combined object by using a recursion storage method so as to create sub-object examples corresponding to all the sub-objects in the canvas operation recovery action process, thereby obtaining the new target combined object.
7. The canvas operation method for an online layout design tool according to any one of claims 1 to 6, further comprising: judging the value corresponding to the state variable; If the value corresponding to the state variable is smaller than 0, prohibiting execution of the canvas operation undoing action, and performing corresponding prohibition undoing operation prompt; and if the value corresponding to the state variable is greater than or equal to a preset recovery value, prohibiting the execution of the canvas operation recovery action and carrying out corresponding prohibition recovery operation prompt, wherein the preset recovery value is the value of the data quantity of the preset state array minus 1.
8. Canvas operating device of on-line layout design tool, characterized in that, be applied to fabric. Js tool library, include: The instruction acquisition module is used for acquiring an operation instruction sent by a user side and acquiring a current operation state corresponding to a current state index, wherein the current operation state is a canvas operation state of a current canvas on an online layout design tool, and the canvas operation state comprises a canvas adding operation, a canvas deleting operation and a canvas modifying operation; The operation execution module is used for executing corresponding operation actions on the current canvas based on the operation instruction and the current operation state, and modifying state variables corresponding to the current canvas after the operation actions are completed, wherein the operation actions comprise canvas operation cancel actions or canvas operation restore actions; And the operation record module is used for generating a corresponding operation record based on the operation action and the current operation state and adding the operation record into a preset state array.
9. An electronic device, comprising: A memory for storing a computer program; A processor for executing the computer program to implement the steps of the canvas operation method of the on-line layout design tool as claimed in any one of claims 1 to 7.
10. A computer readable storage medium, wherein a computer program is stored on the computer readable storage medium, which when executed by a processor, performs the steps of the canvas operation method of the on-line layout design tool as claimed in any one of claims 1 to 7.

Description

Canvas operation method, device, equipment and medium of online layout design tool Technical Field The invention relates to the technical field of electronic design automation, in particular to a canvas operation method, a canvas operation device, canvas operation equipment and canvas operation medium of an online layout design tool. Background EDA (Electronic Design Automation ) technology is a novel technology special for an electronic system, which is formed by taking a computer as a tool and adopting an expression mode of a hardware description language to fuse multi-disciplinary knowledge such as a database, computational mathematics, graphics, optimization theory and the like. The technology can effectively support simulation, debugging and verification of various levels of electronic engineering, obviously lightens the working intensity of designers, and is an indispensable software tool for chip and circuit board design. In recent years, online EDA platforms based on HTML5 Canvas and JavaScript libraries (such as fabric. Js) have become an important trend, with undo restoration functionality being a key module to ensure design consistency. However, the traditional implementation mode generally stores the history record by serializing the whole canvas state (such as converting into a JSON format), and has obvious defects in processing complex graphics and a large number of operations, namely, on one hand, frequent full-state storage can cause memory occupation to be increased sharply, and on the other hand, re-rendering efficiency is low when the recovery is cancelled, so that interface is blocked, and on the other hand, support for composite operations (such as frame selection movement) is insufficient, so that problems of disorder of graphics relationship, selection state residues and the like are easy to occur. Therefore, in the background of the development of the online layout design tool to the complexity, how to improve the performance and accuracy of the revocation recovery function has become a technical challenge to be solved. Disclosure of Invention The embodiment of the invention aims to provide a canvas operation method, device, equipment and medium of an online layout design tool, which can improve the reliability of canvas operation cancel recovery function in the online layout design tool. The specific scheme is as follows: In a first aspect, the application discloses a canvas operation method of an online layout design tool, which is applied to a fabric. Js tool library and comprises the following steps: Acquiring an operation instruction sent by a user side, and acquiring a current operation state corresponding to a current state index, wherein the current operation state is a canvas operation state of a current canvas on an online layout design tool, and the canvas operation state comprises a canvas adding operation, a canvas deleting operation and a canvas modifying operation; Executing corresponding operation actions on the current canvas based on the operation instructions and the current operation state, and modifying state variables corresponding to the current canvas after completing the operation actions, wherein the operation actions comprise canvas operation undoing actions or canvas operation restoring actions; and generating a corresponding operation record based on the operation action and the current operation state, and adding the operation record into a preset state array. Optionally, before the operation instruction sent by the user side is obtained and the current operation state corresponding to the current state index is obtained, the method further includes: Dividing the canvas operation state into a canvas adding operation, a canvas deleting operation and a canvas modifying operation; Recording the canvas operation state and the operation information corresponding to the canvas operation state by utilizing the preset state array; If the canvas operation state is the canvas adding operation, the operation information comprises object adding time, a unique identifier and object attribute complete information; If the canvas operation state is the canvas deleting operation, the operation information comprises object deleting time and a unique identifier; if the canvas operation state is the canvas modification operation, the operation information comprises object modification time, a unique identifier and attribute change information before and after modification; And recording the corresponding storage position of the canvas operation state in the preset state array by using a state index so as to determine the current operation state from the canvas operation state based on the state index. Optionally, if the operation instruction is a cancel instruction, the executing a corresponding operation action on the current canvas based on the operation instruction and the current operation state, and after completing the operation action, modifying a state variable corr