Skip to main content

Drawers

To start dragging in blocks into the canvas, we will need a place to drag them from. That is where the drawer comes in. The drawer is located on the left-hand side of the environment, and organizes blocks based on a specification you provide. Let's use the previous blocks we created, and create some drawers for them.

DrawerSpec​

The drawer is customized with a set of DrawerSpec entries. The DrawerSpec comes in two variants, the ObjectDrawerSpec and the ReferenceDrawerSpec. The ObjectDrawerSpec is used to specify a drawer that contains multiple different types of block instances, while the ReferenceDrawerSpec is used to provide draggable references to existing instances (or calls to existing functions) defined in the program.

For our purposes here, we will only be using the ObjectDrawerSpec. First, let's create a single drawer that includes both blocks we created in the previous section.

const drawers = [
  {
    title: "Blocks",
    type: DrawerType.Multiple,
    metaType: MetaType.ObjectInstance,
    objectTypes: ["simpleType", "textType"],
    icon: "SquareRounded",
  },
];

And here is the result of that configuration, rendered in the environment:

Loading...