Explore

Mini Design Tool

In this exercise, you’re adding a feature to a mini browser-based design tool written in React.

We are providing you with a basic working design tool that has the following capabilities implemented:

There are two modes in the canvas: Select and Draw. This is controlled by a dropdown.

When in Draw mode, drag on the canvas to create new boxes. We call this "lassoing" in the code.

When in Select mode, click on boxes to select them. Drag boxes to move them around.

Press the Backspace key to remove the selected box.

Press Cmd+S (Ctrl+S on PC) to save to localStorage (loaded on next refresh).

There is UI to create some number of random boxes. The implementation does not handle large numbers of rectangles well.

Your task is to enhance this codebase with a major new feature, nesting.

This problem is designed to give you some flavor of the work we do here at Plasmic.

Please feel free to reach out to us with questions! We are happy to clarify things, give you pointers on the tooling/infrastructure, etc.

Nesting

Nesting means you can nest boxes within each other. Once nested, moving a box moves all its descendants. The user should be able to nest boxes in two ways.

Drag-move one box into another box.

The mouse pointer determines which target box to parent under. The new parent should be the “leaf-most” box that the pointer is inside. Note this means that the parent does not need to fully enclose the child.

You can move a box outside its parent, so that it is no longer be nested inside any other box.

If there are multiple overlapping, you can choose an arbitrary parent.

Draw a new box within another box and/or around other boxes.

The new box should be parented under the “leaf-most” box that fully contains it. If there are multiple overlapping, you can choose an arbitrary parent.

Any of that parent’s children that are fully enclosed by the new box become re-parented under the new box. Should not simply adopt any boxes that are enclosed.

Here is a video explaining this in more detail⁠

If the drawn box does not have a tentative parent (i.e., is not drawn fully inside another box, and would become a top-level box), then adopt any other top-level boxes that the new box encloses.

As you are moving or lassoing, you should continuously provide visual feedback as to which box the new box will nest within, and which boxes the new box will nest.

Here’s a clip demoing nesting in action:

⁠

https://youtu.be/HXPr1hfQkGk⁠

⁠

Additional Requirements

When in select mode and clicking on a point with multiple sibling overlapping boxes, you can select an arbitrary box (similar to the behavior in the starter codebase). However, if the boxes are nested, you should always be selecting the leaf-most nested box.

We love to see attention to detail!

When in doubt, try to mimic the functionality shown in the video (or ask us!).

Try to make your implementation perform smoothly during drag operations with at least a few hundred boxes on the screen (ideally more!). This means minimizing jank, frames that are dropped due to JS execution exceeding the 16ms frame rate budget.

Existing functionality should continue to work—moving, deletion, persistence.

Try to cleanly organize the code—including your components, data structures, and state management—the way you would in a real project.

Getting started

To get started with the app, clone the following project:

git clone "https://gerrit.aws.plasmic.app/take-home-public" take-home

Then start the app:

cd take-home/

npm install

npm run dev

Then you open up the app in your browser at

http://localhost:5173⁠

The project was created using

Vite⁠

. It uses plain JavaScript objects and React state, with no third-party state management or data model libraries. Note that the assignment is designed to be doable without introducing any third-party libraries, but feel free to use any libraries you wish.

Submitting

To submit your project, please push your code to a private repo on Github or Gitlab, and then share it with us:

On Github: add plasmicops as a collaborator—see

docs⁠

On Gitlab: invite plasmicapp as a group—see

docs⁠

For instance, to push your code from this existing repo to a brand new empty Github project, replace the ALLCAPS parts below:

git remote rename origin old-origin

git remote add origin git@github.com:YOURNAME/YOURPROJECT.git

git push -u origin --all

git push -u origin --tags

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.