A code block container, visual programming platform device and method

Abstract

The present application relates to a code block container, a visual programming platform and a method, and belongs to the field of computer technology. The code block container includes: a scroll view component for providing a visual area with a scrolling function, and adjusting the actual area of ​​the code block container displayed in the visual area accordingly by receiving an operation event; a container component for determining the actual area of ​​the code block container; and an intermediate component for adjusting the position of the code block relative to the container component by adjusting its position, so that the code block can be displayed in the actual area determined by the container component. By designing a new code block container, the actual area of ​​the code block container can be infinitely expanded in four directions: up, down, left, and right, thereby supporting the code block to be arbitrarily placed and moved in the actual area of ​​the code block container.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and specifically relates to a code block container, a visual programming platform and a method. Background Art

[0002] In the visual programming system, the code block container is a core function. The code block container is a visual area with horizontal and vertical scroll bars and can adjust the current display content by sliding. In the visual programming system based on the Unity technology stack, when the user UI (User Interface) interface function is implemented using the Unity UI Toolkit technology. The aforementioned code block container can be implemented using the UI ToolKit component. UI ToolKit is a UI system that organizes UI elements using a tree data structure. In the UI ToolKit component, the ScrollView component is a component that is relatively close to an infinitely expandable code block container. Among them, the so-called infinite expansion means that the user can place, remove or edit the code block at any position in the actual area of ​​the code block container, and can drag the code block to any new position. The code block container can dynamically adjust the size of the actual content area of ​​the code block container according to the size and position of all the code blocks inside it, so that the actual content area of ​​the code block container does not seem to encounter boundaries in any direction.

[0003] like Figure 1 As shown, ScrollView (Node0) is a visible area with horizontal and vertical scroll bars. The actual content area displayed in the current visible area can be adjusted by dragging the scroll bar or dragging and sliding in the visible area. By dragging the scroll bar or dragging and sliding in the ScrollView visible area, you can view the code blocks (Node1, Node2) with positive x and y coordinates in the ScrollView. When the horizontal scroll bar slides to the leftmost end and the vertical scroll bar slides to the topmost end, if the x or y coordinate of a code block is negative at this time, the code block (Node3, Node4) will only be partially visible or invisible. Because the ScrollView component can only expand to the right and downward, but not to the left and upward, if ScrollView is used as a container for code blocks, only code blocks with positive x and y coordinates can be placed. This brings a lot of inconvenience to users in providing a free code block editing environment. Summary of the invention

[0004] In view of this, the purpose of the present application is to provide a code block container, a visual programming platform and a method to improve the problem caused by the inability of the existing code block editing environment to expand leftward and upward.

[0005] The embodiment of the present application is implemented as follows:

[0006] In a first aspect, an embodiment of the present application provides a code block container, comprising: a scroll view component, a container component, and an intermediate component; the scroll view component is used to provide a visible area with a scrolling function, and the actual area of ​​the code block container displayed in the visible area is adjusted accordingly by receiving an operation event; the container component serves as a child node of the scroll view component, and the container component is used to determine the actual area of ​​the code block container; the intermediate component is used to serve as a parent node of the code block and as a child node of the container component, and adjusts the position of the code block relative to the container component by adjusting its own position, so that the code block can be displayed in the actual area determined by the container component. In an embodiment of the present application, a new code block container is designed, so that the code block container includes a scroll view component, a container component and an intermediate component, wherein the scroll view component serves as the parent node of the container component, the container component serves as the parent node of the intermediate component, and the intermediate component serves as the parent node of the code block. The position of the code block relative to the container component is adjusted by adjusting the position of the intermediate component, so that the code block can be displayed in the actual area determined by the container component, thereby supporting the actual content area of ​​the code block container component to be infinitely expanded in four directions of up, down, left and right, thereby supporting the code block to be arbitrarily placed and moved in the actual area of ​​the code block container.

[0007] In combination with a possible implementation of the embodiment of the first aspect, when the code block container receives at least one operation of adding a new code block, removing a code block, editing a code block, and moving a code block, the container component dynamically adjusts the size of the actual area of ​​the code block container according to the bounding box containing all current code blocks. In the embodiment of the present application, whether a code block is added, removed, edited, or moved in the code block container, the container component will dynamically adjust the actual area of ​​the code block container according to the operation, so that the size of the actual area changes dynamically in real time with the relevant operations on the code block.

[0008] In combination with a possible implementation of the embodiment of the first aspect, the container component is used to determine a bounding box containing all code blocks according to the positions, widths and heights of all code blocks in the code block container, and adjust the actual area according to the bounding box. In the embodiment of the present application, when adjusting the size of the actual area, the container component determines a bounding box containing all code blocks according to the positions, widths and heights of all code blocks in the code block container, and then dynamically adjusts the actual area of ​​the code block container according to the bounding box, so that the size of the actual area reflects the dynamic changes of the code blocks in the code block container.

[0009] The width of the actual area is adjusted to the sum of the width of the bounding box and the preset left margin width and the preset right margin width, and the height of the actual area is adjusted to the sum of the height of the bounding box and the preset upper margin height and the preset lower margin height. By presetting the upper, lower, left and right margin areas of a certain width, the code block will not overlap with the boundary of the visible area when it is presented in the visible area, which is more beautiful.

[0010] In combination with a possible implementation of the first aspect embodiment, the container component is used to adjust the width of the actual area to the sum of the width of the bounding box and the width of the preset left margin and the width of the preset right margin when adjusting the actual area according to the bounding box, and to adjust the height of the actual area to the sum of the height of the bounding box and the height of the preset upper margin and the height of the preset lower margin. In the embodiment of the present application, when adjusting the width and height of the actual area, the container component adjusts the width of the actual area to the sum of the width of the bounding box and the width of the preset left margin and the width of the preset right margin, and adjusts the height of the actual area to the sum of the height of the bounding box and the height of the preset upper margin and the height of the preset lower margin. By presetting the upper, lower, left, and right blank areas of a certain width, the code block will not overlap with the boundary of the visible area when it is presented in the visible area, which is more beautiful.

[0011] In combination with a possible implementation of the first aspect embodiment, the value of the preset left margin width and the value of the preset right margin width are both the values ​​of the width of the visible area, and the value of the preset upper margin height and the value of the preset lower margin height are both the values ​​of the height of the visible area. In the embodiment of the present application, by setting the value of the preset left margin width and the value of the preset right margin width to the value of the width of the visible area, and the value of the preset upper margin height and the value of the preset lower margin height to the value of the height of the visible area, when no code block is placed in the code block container, the width of ScrollView (the width of the visible area) is half of the width of the container component (the width of the actual area), and the height of ScrollView (the height of the visible area) is half of the height of the container component (the height of the actual area), which is more beautiful.

[0012] In combination with a possible implementation method of the first aspect, when the code block container receives at least one operation of adding a code block, removing a code block, editing a code block, and moving a code block, the intermediate component dynamically adjusts its own position according to the deviation between the upper left vertex of the bounding box and the starting point of the content of the actual area, so that all code blocks in the code block container are displayed in the actual area determined by the container component. In the embodiment of the present application, whether adding a code block, removing a code block, editing a code block, or moving a code block in the code block container, the intermediate component dynamically adjusts its own position according to the deviation between the upper left vertex of the bounding box and the starting point of the content of the actual area, so that all code blocks in the code block container are displayed in the actual area determined by the container component.

[0013] In combination with a possible implementation of the embodiment of the first aspect, the intermediate component is used to adjust its own position so that the upper left vertex of the bounding box coincides with the content starting point of the container component. In the embodiment of the present application, the intermediate component adjusts its own position so that the upper left vertex of the bounding box containing all code blocks coincides with the content starting point of the container component, so that all code blocks in the code block container are displayed in the actual area determined by the container component, and the code blocks can be better displayed in the center of the visible area, thereby improving the user experience.

[0014] In combination with a possible implementation of the first aspect, the outer-boundary display mode attribute of the intermediate component is set to visible mode. In the embodiment of the present application, the outer-boundary display mode attribute of the intermediate component is set to visible mode, so that the display of all code blocks under the intermediate component is not limited by the display range of the intermediate component.

[0015] In combination with a possible implementation of the embodiment of the first aspect, the outside-boundary display mode attribute of the container component is set to a clipping mode, so that any content that exceeds the actual area of ​​the code block container is clipped. In the embodiment of the present application, the outside-boundary display mode (overflow) of the container component is set to a clipping mode (clip). When the intermediate component appears outside the actual area determined by the container component (the display range of the container component) due to movement in some cases, this setting allows the intermediate component that exceeds the actual area to be clipped.

[0016] In a second aspect, an embodiment of the present application further provides a visual programming platform, comprising: a code block container provided in the above-mentioned first aspect embodiment and / or any possible implementation method in combination with the first aspect embodiment, wherein the code block container is a component of the visual programming platform.

[0017] In a third aspect, an embodiment of the present application further provides a visual programming method, which is applied to an electronic device comprising a visual programming platform as provided in the embodiment of the second aspect above, the method comprising: obtaining a user's configuration operation on a code block in a code block container of the visual programming platform, the configuration operation comprising at least one of adding a code block, removing a code block, editing a code block, and moving a code block; in response to the configuration operation, adjusting the size of an actual area determined by a container component in the code block container, and adjusting the position of an intermediate component in the code block container to adjust the position of the code block in the code block container relative to the container component in the code block container, so that the code block is displayed in the actual area determined by the container component.

[0018] In combination with a possible implementation manner of the third aspect embodiment, adjusting the size of the actual area determined by the container component in the code block container includes: determining a bounding box containing all the code blocks according to the width, height and position of all the code blocks in the code block container, and adjusting the width of the actual area to be the sum of the width of the bounding box and the width of a preset left margin and the width of a preset right margin, and adjusting the height of the actual area to be the sum of the height of the bounding box and the height of a preset upper margin and the height of a preset lower margin.

[0019] In combination with a possible implementation manner of the third aspect, adjusting the position of the intermediate component in the code block container includes: dynamically adjusting the position of the intermediate component in the code block container according to the deviation between the upper left vertex of the bounding box and the starting point of the content of the actual area.

[0020] In combination with a possible implementation manner of the third aspect, the position of the intermediate component in the code block container is dynamically adjusted according to the deviation between the upper left vertex of the bounding box and the starting point of the content of the actual area, including: after detecting that the size of the actual area is adjusted, the position of the intermediate component is adjusted so that the upper left vertex of the bounding box coincides with the starting point of the content of the container component.

[0021] Other features and advantages of the present application will be described in the following description, and partly become apparent from the description, or understood by implementing the embodiments of the present application. The purpose and other advantages of the present application can be realized and obtained by the structures specifically pointed out in the written description and the drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can also be obtained based on these drawings without creative work. As shown in the drawings, the above and other purposes, features and advantages of the present application will be clearer. The same reference numerals indicate the same parts in all the drawings. The drawings are not deliberately scaled to the actual size, and the focus is on showing the main purpose of the present application.

[0023] Figure 1 A diagram showing the visibility of code blocks in an existing ScrollView code block container.

[0024] Figure 2 A schematic diagram of an infinitely expandable code block container provided in an embodiment of the present application is shown.

[0025] Figure 3 A schematic diagram showing the relationship between a scroll view component, a container component, an intermediate component, and a code block in a code block container provided in an embodiment of the present application is shown.

[0026] Figure 4 A schematic diagram showing the principle of adding an intermediate component to a container component provided in an embodiment of the present application is shown.

[0027] Figure 5 A schematic diagram showing the principle of adding a code block under an intermediate component provided in an embodiment of the present application is shown.

[0028] Figure 6 A schematic diagram showing the principle of determining the overall bounding box of a code block provided by an embodiment of the present application is shown.

[0029] Figure 7 A schematic diagram showing the principle of adjusting the width and height of a container assembly provided in an embodiment of the present application is shown.

[0030] Figure 8 A schematic diagram showing the principle of adjusting the intermediate component so that the code block container supports the expansion of the code block to the left and top provided by an embodiment of the present application.

[0031] Fig. 9 A schematic diagram showing the principle of trimming off a blank area by adjusting an intermediate component provided in an embodiment of the present application is shown.

[0032] Fig.10 The figure shows an actual effect diagram of a code block container provided by an embodiment of the present application.

[0033] Fig.11A schematic diagram showing a code block list displayed by clicking a "Sports" label provided in an embodiment of the present application is shown.

[0034] Fig.12 A schematic diagram after a new code block is added to a code block container provided by an embodiment of the present application is shown.

[0035] Fig.13 A schematic diagram after two code blocks are added to a code block container provided by an embodiment of the present application is shown.

[0036] Fig.14 A schematic diagram after three code blocks are added to a code block container provided by an embodiment of the present application is shown.

[0037] Fig.15 Shown in Fig.14 The schematic diagram after moving the code block based on the .

[0038] Fig.16 Shown in Fig.14 The schematic diagram after editing the code block based on.

[0039] Fig.17 A structural block diagram of an electronic device provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0040] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application.

[0041] It should be noted that similar numbers and letters represent similar items in the following drawings, so once an item is defined in one drawing, it is not necessary to further define and explain it in the subsequent drawings. At the same time, in the description of this application, relational terms such as "first", "second", etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. Moreover, the term "include", "comprise" or any other variant thereof is intended to cover non-exclusive inclusion, so that the process, method, article or equipment including a series of elements includes not only those elements, but also includes other elements that are not clearly listed, or also includes elements inherent to such process, method, article or equipment. In the absence of more restrictions, the elements limited by the sentence "including one..." do not exclude the existence of other identical elements in the process, method, article or equipment including the elements.

[0042] Furthermore, the term "and / or" in this application is merely a term used to describe the association relationship between associated objects, indicating that three relationships may exist. For example, A and / or B may represent three situations: A exists alone, A and B exist at the same time, and B exists alone.

[0043] In view of the fact that existing code block containers such as ScrollView can only display code blocks whose x and y coordinates in ScrollView are both positive numbers, and only support code blocks to expand to the right and downward in the code block container, but not to the left and upward, this brings a lot of inconvenience to users in providing a free code block editing environment. Therefore, an embodiment of the present application provides an infinitely expandable code block container, which supports the infinite expansion of the actual content area of ​​the code block container in four directions: upward, downward, left, and right. After a user operation occurs, in response, the code block container can dynamically adjust the actual area size according to the width, height, and position of all the code blocks inside it, so that it seems as if there will be no boundaries in any direction, thereby realizing the infinite expansion of the actual content area of ​​the code block container, as shown in the schematic diagram. Figure 2 shown.

[0044] The code block container in this application is implemented based on the Unity UIToolkit component. A new UITookit container component (code block container) is designed using the custom UI component function provided by Unity UITookit. The code block container includes a scroll view component (ScrollView), a container component, and an intermediate component. Among them, the container component and the intermediate component are subclasses of the VisualElement (visual element) component in the Unity UIToolkit component. The container component is a child node of the scroll view component, the intermediate component is a child node of the container component, and the intermediate component serves as the parent node of the code block. The relationship diagram of the scroll view component, container component, intermediate component, and code block is shown in the following figure. Figure 3 shown. Figure 3 The middle node in is the middle component, and Node1, Node2, and Node3 are the code blocks under the middle component. Figure 3 The coordinate system origin Os of the ScrollView in the image coincides with the coordinate system origin O of the container component, and O'(x, y) is the coordinate system of the intermediate component.

[0045] In one implementation, a VisualElement can be added as an intermediate node in a container component that inherits from VisualElement of Unity UITookit, and the code blocks are added under this intermediate node, and then the container component is used as a child node of ScrollView, that is, the container component is added to a ScrollView, thereby forming a complete code block container. Alternatively, a container component that inherits from VisualElement of UnityUITookit can be added as a child node in ScrollView, and then a VisualElement can be added as an intermediate node under the child node, and the code blocks are added under this intermediate node, thereby forming a complete code block container.

[0046] Among them, the scroll view component (ScrollView) is used to provide a visible area with a scrolling function. By receiving operation events, the position of the actual area in the visible area can be adjusted, that is, the actual area of ​​the code block container displayed in the visible area can be adjusted. The visible area can have a scroll bar, and the actual area of ​​the code block container displayed in the visible area can be adjusted by sliding the scroll bar or dragging and sliding on the visible area of ​​the scroll view. The position of the scroll bar indicates the position of the actual area displayed in the visible area, so that the part of the actual area of ​​the code block container displayed in the visible area can be adjusted by sliding the scroll bar. In addition to the above two sliding methods, the actual area size can also be adjusted by a mouse wheel or other methods.

[0047] The above operation event may be an event of sliding a scroll bar, an event of dragging and sliding on the visible area of ​​the scroll view, or an event of sliding a cursor on the visible area of ​​the scroll view by a mouse wheel. When dragging and sliding on the visible area of ​​the scroll view, the mouse may be used to drag and slide, or a touch pad may be used to drag and slide.

[0048] Among them, the size of the visible area is fixed, the size of the actual area is greater than or equal to the size of the visible area (when they are equal, the scroll bar may not be displayed), and the length of the scroll bar represents the ratio of the visible area to the actual area. The larger the actual area, the shorter the scroll bar, and the smaller the actual area, the longer the scroll bar.

[0049] The container component is a child node of the scroll view component in the view organization structure. The container component is used to determine the actual area of ​​the code block container. When the code block container receives at least one of the operations of adding a code block, removing a code block, editing a code block, and moving a code block, the container component will respond and dynamically adjust the size of the actual area of ​​the code block container. For example, the container component will dynamically adjust the size of the actual area of ​​the code block container according to the bounding box containing all the current code blocks.

[0050] It should be noted that when the container component dynamically adjusts the actual area of ​​the code block container, the scroll view component will also adjust the ratio of the visible area to the actual area, that is, adjust the length of the corresponding scroll bar.

[0051] In an optional implementation, when determining the actual area of ​​the code block container, the container component may determine a bounding box (Bounding Box) containing all code blocks based on the width, height and position of each code block in the code block container, and adjust the actual area based on the bounding box, wherein the actual area includes the bounding box.

[0052] In one implementation mode, when the container component adjusts the actual area according to the bounding box, the width of the actual area is adjusted to the sum of the width of the bounding box and the width of the preset left margin and the width of the preset right margin, that is, the width of the actual area = the width of the bounding box + the width of the preset left margin + the width of the preset right margin; and the height of the actual area is adjusted to the sum of the height of the bounding box and the height of the preset upper margin and the height of the preset lower margin, that is, the height of the actual area = the height of the bounding box + the height of the preset upper margin + the height of the preset lower margin. It should be noted that when the container component adjusts the actual area according to the bounding box, it is not limited to the above-mentioned method. For example, the width of the actual area is adjusted to the sum of the width of the bounding box and the width of the preset left margin or the width of the preset right margin, and the height of the actual area is adjusted to the sum of the height of the bounding box and the height of the preset upper margin or the height of the preset lower margin. By presetting the upper, lower, left, and right margin areas of a certain width, when the code block is presented in the actual area, it will not overlap with the boundary of the actual area, and thus will not overlap with the boundary of the visible area, which is more beautiful.

[0053] In an optional implementation, the width of the preset left margin is equal to the width of the preset right margin, and the height of the preset upper margin is equal to the height of the preset lower margin. As a preferred implementation, the width of the preset left margin and the width of the preset right margin are both the width of the visible area; the height of the preset upper margin and the height of the preset lower margin are both the height of the visible area, so that when the horizontal scroll bar is at the leftmost end and the vertical scroll bar is at the topmost end, the coordinate system origin Os of ScrollView coincides with the coordinate system origin O of the container component, and the width of ScrollView (the width of the visible area) is half of the width of the container component (the width of the actual area), and the height of ScrollView (the height of the visible area) is half of the height of the container component (the height of the actual area). It should be noted that when no code block is placed in the code block container, the width of the actual area = the width of the overall boundary box + the width of the preset left margin + the width of the preset right margin, and is equal to twice the width of the visible area; the height of the actual area = the height of the preset upper margin + the height of the preset lower margin, and is equal to twice the height of the visible area.

[0054] The middle component is the child node of the container component and the parent node of the code block in the view organization structure. By setting the attribute mode (overflow) of the middle component to visible mode (visible), the position of the code block can still be displayed even if it is outside the display range of the middle component. The display range of the middle component is a rectangular area with a width and height of 0. When the code block container receives at least one operation of adding a code block, removing a code block, editing a code block, and moving a code block, in addition to the container component dynamically adjusting the actual area of ​​the code block container, the middle component will also adjust its own position to adjust the position of the code block relative to the container component, so that the code block can be displayed in the actual area determined by the container component, so that all code blocks can be displayed in the actual area determined by the container component.

[0055] It should be noted that when the middle component adjusts its position, the positions of all the code blocks under it will be adjusted as a whole. When moving, the relative positions of the code blocks remain unchanged. For example, when the middle component moves to the upper left relative to the container component, all the code blocks under it will also be equivalent to the container component moving to the upper left as a whole, but the relative positions of the code blocks remain unchanged.

[0056] The intermediate component is used to dynamically adjust its own position according to the deviation between the upper left vertex of the bounding box containing all code blocks in the code block container and the content starting point of the actual area when adjusting its own position. In other words, the intermediate component adjusts its own position so that the deviation between the upper left vertex of the bounding box and the content starting point of the actual area is within a preset range, so that all code blocks can be displayed in the actual area determined by the container component. In an optional implementation, the intermediate component can adjust its own position so that the upper left vertex of the bounding box and the content starting point of the actual area coincide (align), at which time the deviation between the upper left vertex of the bounding box and the content starting point of the actual area is zero.

[0057] When the origin of the middle node coincides with the origin of the container component, if the coordinates of some code blocks are negative, for example, the coordinates of the code block Node1 are negative, then Node1 crosses the boundary of the actual area of ​​the code block or is outside the actual area of ​​the code block. Since the display mode attribute outside the boundary of the container component is the cropping mode, the code block Node1 that exceeds the actual area determined by the container component will be partially visible or invisible. By adjusting the coordinates of the middle node so that the coordinates of the code block relative to the container component are positive, Node1 can be displayed in the actual area of ​​the container component. In this way, even if the coordinates of the code block in the coordinate system of the middle node (that is, the code block in the code block container coordinate system) are negative, it can be displayed.

[0058] Among them, when dragging a code block to move toward the first direction of the visible area, the container component will first adjust the size of the actual area according to the new bounding box containing all the code blocks, and then the middle component will move toward the second direction of the visible area, so that the deviation between the upper left vertex of the new bounding box and the starting point of the content of the actual area is within a preset range, so that the code block can be displayed in the actual area determined by the container component, and the first direction and the second direction are opposite. For example, when dragging the code block to move toward the upper left of the visible area, the container component will first adjust the size of the actual area according to the new bounding box containing all the code blocks, and then the middle component will move toward the lower right of the visible area, so that the deviation between the upper left vertex of the new bounding box and the starting point of the content of the actual area is within a preset range, so that the code block is displayed in the actual area of ​​the container component, thereby supporting the actual area of ​​the code block container to be infinitely expanded in the upper left direction. Alternatively, when the code block is dragged and moved toward the lower right side of the visible area, the container component will first adjust the size of the actual area according to the new bounding box that contains all the code blocks, and then the middle component will move toward the upper left side of the visible area so that the deviation between the upper left vertex of the new bounding box and the starting point of the content of the actual area is within the preset range, so that the code block is displayed in the actual area of ​​the container component, thereby supporting the code block to be infinitely expanded toward the lower right direction in the code block container.

[0059] If the code blocks are concentrated together and the coordinates are far away from the coordinate origin, a large amount of blank area will appear between the code blocks and the coordinate origin. If the traditional code block container component (ScrollView) is used at this time, the actual area will be very large and contain a large amount of blank space. In this way, when it is necessary to display the concentrated code blocks in the visible area of ​​the code block container, it is necessary to drag and slide in the visible area of ​​the code block container for a long time, and it is not easy to locate the position of the code block. In order to solve this problem, the calculation method of the actual area size is redefined in this application as the entire code block bounding box plus the reserved space; and the middle node is made the parent node of the code block, that is, the local coordinate system of the middle node is used as the coordinate system of the code block container; and the out-of-bounds display mode attribute (overflow) of the container component is set to the clipping mode (clip), and the out-of-bounds display mode attribute (overflow) of the middle node is set to the visible mode (visible). In this way, when the code blocks are concentrated together and the coordinates are far away from the coordinate origin, the size of the actual area of ​​the code block container can be made close to the range size of the code block concentration. By moving the position of the intermediate node, the code blocks are presented in the content area of ​​the actual area determined by the container component. Through the clipping setting outside the boundary of the container component, a large amount of blank space between the code block and the coordinate origin is clipped off, so that the user can locate the position of the code block concentration more quickly, thereby solving the problem.

[0060] For ease of understanding, the principle of the code block container shown in this application will be explained below with examples. When creating a code block container, in one implementation, a VisualElement (middle component) can be added as an intermediate node in a container component that inherits from VisualElement of Unity UITookit, the overflow mode of the container component is set to clip, and the overflow mode of the middle node is set to visible, as shown in the schematic diagram. Figure 4 As shown. After that, add this container component as a child node of ScrollView to ScrollView to form a complete code block container.

[0061] When placing code blocks in the code block container, the code blocks are added under this intermediate node. For example, three code blocks are placed in the code block container, namely Node1, Node2, and Node3. The schematic diagram is as follows: Figure 5 shown.

[0062] After placing the code block, the container component will determine the overall bounding box containing all the code blocks according to the width and height of each code block in the code block container. The schematic diagram is as follows Figure 6As shown. The rectangular area enclosed by P1 and P2 is the Bounding Box of the code blocks Node1, Node2, and Node3. Afterwards, the container component will adjust its own width and height, that is, adjust the width and height of the actual area. For example, the width of the actual area is adjusted to the sum of the width of the overall bounding box and the width of the preset left margin and the width of the preset right margin, and the height of the actual area is adjusted to the sum of the height of the overall bounding box and the height of the preset upper margin and the height of the preset lower margin. The schematic diagram is shown as follows Figure 7 At the same time, the middle component adjusts its own position so that the top left vertex of the overall bounding box (such as P1) coincides with the content starting point of the container component (such as P3).

[0063] When the origin of the middle node coincides with the origin of the container component, if the coordinates of some code blocks (relative to the container component) are negative, by adjusting the position of the middle node so that the coordinates of the code block relative to the container component are positive, the code block can be displayed within the display range of the container component. In this way, even if the coordinates of the code block in the coordinate system of the middle node (that is, the code block container coordinate system) are negative, it can be displayed, thereby achieving infinite expansion of the code block to the left and upward. The schematic diagram is shown as follows: Figure 8 As shown, Figure 8 Node0 in is the container component. By adjusting the position of the middle node, all code blocks are displayed in the actual area of ​​the container component, that is, by adjusting the position of the middle node, the coordinates of all code blocks relative to the container component are positive values, so that the code blocks can be infinitely extended to the left and upward.

[0064] When the code blocks are concentrated in the lower right corner and deviate far from the origin O(0,0), more blank areas will be left in the upper left corner. The size of the actual area is re-determined through the container component, and the middle node is used as the parent node of the code block. The outside display mode attribute (overflow) of the container component is set to the clipping mode (clip), and the outside display mode attribute (overflow) of the middle component is set to the visible mode (visible). By adjusting the position of the middle component, the middle component is located outside the actual area of ​​the container component, and all code blocks in the code block container are located in the content area of ​​the actual area of ​​the container component. In this way, a large amount of redundant blank area between the code block and the coordinate origin can be clipped. The schematic diagram is shown as follows Fig. 9 As shown, Fig. 9 Node0 in is the container component.

[0065] The above principle will be explained below with reference to specific examples. Fig.10This is a practical effect diagram of a code block container. You can view any part of the actual area of ​​the code block container by dragging and sliding in the visible area of ​​the code block container (you can slide in four directions: up, down, left, and right). You can also drag the scroll bar to slide. The labels on the left, such as "Motion", "Appearance", "Sound", "Event", "Control", "Detection", "Operation", and "Variable" are all code block labels. By clicking a label, the code block list under the label will be displayed. For example, clicking the "Motion" label will display Fig.11 As shown in the schematic diagram, a code block can be placed in the code block container by dragging a code block from the code block list to the code block container.

[0066] When adding, moving, removing or editing code blocks, the code block container will dynamically adjust the size of the actual area (which can be presented by the length and position changes of the scroll bar) and trim off excess white space, allowing users to quickly locate the remaining code blocks in the code block container. Figure 12-14 To add a new code block to the code block container, Fig.12 , Fig.13 , Fig.14 The length and position of the scroll bar between the two change, which shows that the actual area of ​​the code block container changes when a code block is added. Conversely, when a code block is removed from the code block container (with Figure 14-Figure 12 After that, the code block container will also dynamically adjust the size of the actual area, from Fig.12 , Fig.13 , Fig.14 The length and position of the scroll bar between and change show that the actual area of ​​the code block container changes when the code block is removed.

[0067] When a code block is moved, the code block container will also dynamically adjust the size of the actual area. Fig.14 and Fig.15 The length and position of the scroll bar shown in the figure clearly show that when the code block is moved, the actual area of ​​the code block container changes. When the code block is edited, the code block container will also dynamically adjust the size of the actual area. For example, combined with Fig.14 and Fig.16 The length and position of the scroll bar change, and it can be clearly seen that when the code block is edited, the actual area of ​​the code block container changes.

[0068] Based on the same inventive concept, the embodiment of the present application further provides a visual programming platform, which includes the above-mentioned code block container, which is a component of the visual programming platform. The visual programming platform can be a visual programming platform based on the Unity technology stack.

[0069] The visual programming platform provided in the embodiment of the present application has the same implementation principle and technical effects as those of the aforementioned code block container embodiment. For the sake of brief description, for matters not mentioned in the visual programming platform embodiment, reference may be made to the corresponding contents in the aforementioned code block container embodiment.

[0070] Based on the same inventive concept, an embodiment of the present application also provides a visual programming method, which is applied to an electronic device that includes the above-mentioned visual programming platform, and the method includes: obtaining a user's configuration operation on a code block in a code block container of the visual programming platform, and the configuration operation includes at least one of adding a code block, removing a code block, editing a code block, and moving a code block; in response to the configuration operation, first adjusting the actual area size of the container component in the code block container, and adjusting the position of the intermediate component in the code block container to adjust the position of the code block in the code block container relative to the container component in the code block container, so that the code block is displayed in the actual area determined by the container component.

[0071] In one implementation, adjusting the actual area size of a container component in a code block container includes: determining a bounding box containing all code blocks according to the width, height, and position of each code block in the code block container, and adjusting the width of the actual area to be the sum of the width of the bounding box and the width of a preset left margin and the width of a preset right margin, and adjusting the height of the actual area to be the sum of the height of the bounding box and the height of a preset upper margin and the height of a preset lower margin.

[0072] In one implementation, the method further includes: after detecting that the size of the actual area is adjusted, adjusting the length of the scroll bar of the code block container according to the size of the actual area, the length of the scroll bar represents the ratio of the visible area of ​​the code block container to the actual area.

[0073] In one implementation, adjusting the position of the intermediate component in the code block container includes: dynamically adjusting the position of the intermediate component in the code block container according to a deviation between an upper left vertex of the bounding box and a content starting point of the actual area.

[0074] In one implementation, the position of the intermediate component in the code block container is dynamically adjusted according to the deviation between the upper left vertex of the bounding box and the starting point of the content of the actual area, including: after detecting that the size of the actual area is adjusted, the position of the intermediate component is adjusted so that the upper left vertex of the bounding box coincides with the starting point of the content of the container component.

[0075] The implementation principle and technical effects of the visual programming method provided in the embodiment of the present application are the same as those of the aforementioned code block container embodiment. For the sake of brief description, for matters not mentioned in the method embodiment, reference can be made to the corresponding contents in the aforementioned code block container embodiment.

[0076] like Fig.17 As shown, Fig.17 The structural block diagram of an electronic device 200 provided in an embodiment of the present application is shown. The electronic device 200 includes: a transceiver 210, a memory 220, a communication bus 230 and a processor 240. The electronic device is installed with the above-mentioned visual programming platform, and the user can perform code programming on the visual programming platform.

[0077] The transceiver 210, the memory 220, and the processor 240 are electrically connected to each other directly or indirectly to achieve data transmission or interaction. For example, these components can be electrically connected to each other through one or more communication buses 230 or signal lines. Among them, the transceiver 210 is used to send and receive data. The memory 220 is used to store a computer program, which includes at least one software function module that can be stored in the memory 220 in the form of software or firmware or solidified in the operating system (OS) of the electronic device 200. The processor 240 is used to execute the executable module or computer program stored in the memory 220. For example, the processor 240 is used to obtain a user's configuration operation on a code block in a code block container of the visual programming platform, wherein the configuration operation includes at least one of adding a code block, removing a code block, editing a code block, and moving a code block; in response to the configuration operation, the processor 240 adjusts the size of an actual area determined by a container component in the code block container, and adjusts the position of an intermediate component in the code block container to adjust the position of a code block in the code block container relative to the container component in the code block container, so that the code block is displayed in the actual area determined by the container component.

[0078] Among them, the memory 220 can be, but is not limited to, random access memory (Random Access Memory, RAM), read only memory (Read Only Memory, ROM), programmable read-only memory (Programmable Read-Only Memory, PROM), erasable programmable read-only memory (Erasable Programmable Read-Only Memory, EPROM), electrically erasable read-only memory (Electric Erasable Programmable Read-Only Memory, EEPROM), etc.

[0079] The processor 240 may be an integrated circuit chip with signal processing capabilities. The above-mentioned processor may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The various methods, steps and logic block diagrams disclosed in the embodiments of the present application may be implemented or executed. The general-purpose processor may be a microprocessor or the processor 240 may also be any conventional processor, etc.

[0080] The electronic device 200 mentioned above includes but is not limited to a computer and the like.

[0081] The embodiment of the present application also provides a non-volatile computer-readable storage medium (hereinafter referred to as storage medium), on which a computer program is stored. When the computer program is run by a computer such as the above-mentioned electronic device 200, the above-mentioned visual programming method is executed.

[0082] It should be noted that the various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0083] In several embodiments provided in the present application, it should be understood that the disclosed devices and methods can also be implemented in other ways. The device embodiments described above are merely schematic. For example, the flowcharts and block diagrams in the accompanying drawings show the possible architecture, functions and operations of the devices, methods and computer program products according to multiple embodiments of the present application. In this regard, each box in the flowchart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of a code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of boxes in the block diagram and / or flowchart can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

[0084] In addition, the functional modules in the various embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

[0085] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art. The computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a laptop, a server, or an electronic device, etc.) to perform all or part of the steps of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0086] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A code block container, characterized in that: include: A scroll view component, used for providing a visible area with a scrolling function, and adjusting the actual area of ​​the code block container displayed in the visible area accordingly by receiving an operation event, wherein the actual area of ​​the code block container is dynamically adjusted according to a bounding box containing all current code blocks, and the actual area contains the bounding box; A container component, used to determine the actual area of ​​the code block container, the container component being a child node of the scroll view component; The intermediate component is used to serve as the parent node of the code block and as the child node of the container component, and adjusts the position of the code block relative to the container component by adjusting its own position. When the intermediate component adjusts its own position, the positions of all the code blocks under it will be adjusted as a whole. The intermediate component adjusts its own position so that the deviation between the upper left vertex of the bounding box and the starting point of the content of the actual area is within a preset range, so that all code blocks can be displayed in the actual area determined by the container component.

2. The code block container according to claim 1, characterized in that: When the code block container receives at least one operation of adding a code block, removing a code block, editing a code block, and moving a code block, the container component dynamically adjusts the size of the actual area of ​​the code block container according to a bounding box containing all current code blocks.

3. The code block container according to claim 2, characterized in that: The container component is used to determine a bounding box containing all the code blocks according to the width, height and position of all the code blocks in the code block container, and adjust the actual area according to the bounding box.

4. The code block container according to claim 3, characterized in that: The container component is used to adjust the width of the actual area to the sum of the width of the bounding box and the width of the preset left margin and the width of the preset right margin when adjusting the actual area according to the bounding box, and to adjust the height of the actual area to the sum of the height of the bounding box and the height of the preset upper margin and the height of the preset lower margin.

5. The code block container according to claim 4, characterized in that: When the code block container receives at least one operation of adding a code block, removing a code block, editing a code block, and moving a code block, the intermediate component dynamically adjusts its own position according to the deviation between the upper left vertex of the bounding box and the starting point of the content of the actual area, so that all code blocks in the code block container are displayed in the actual area determined by the container component.

6. The code block container according to claim 5, characterized in that: The intermediate component adjusts its own position so that the upper left vertex of the boundary box coincides with the content starting point of the container component.

7. The code block container according to claim 1, characterized in that: The outside-bounds display mode property of the middle component is set to the visible mode.

8. The code block container according to any one of claims 1 to 7, characterized in that: The out-of-bounds display mode property of the container component is set to a clipping mode, so that any content that exceeds the actual area of ​​the code block container is clipped.

9. A visual programming platform device, characterized in that: include: The code block container according to any one of claims 1 to 8, wherein the code block container is a component of the visual programming platform device.

10. A visual programming method, characterized in that: Applied to an electronic device comprising the visual programming platform device as claimed in claim 9, the method comprising: Acquire a configuration operation of a user on a code block in a code block container of the visual programming platform, wherein the configuration operation includes at least one of adding a code block, removing a code block, editing a code block, and moving a code block; In response to the configuration operation, the size of the actual area determined by the container component in the code block container is adjusted, and the position of the intermediate component in the code block container is adjusted to adjust the position of the code block in the code block container relative to the container component in the code block container, so that the code block is displayed in the actual area determined by the container component.

Images