Editor Canvas

    The canvas is the place where you can construct, import, or edit your molecules in Marvin JS. There are several options to help you always see the structure in your focus of interest.

    Navigating on the Canvas

    You can navigate on the canvas by using the vertical and horizontal scroll-bars. The scroll bars become visible only when the contents of the canvas exceed the canvas size.

    {info} Regardless of the currently active tool, you can get into "navigation mode" by pressing the middle mouse button. In "navigation mode", the canvas can be moved by the mouse cursor until the middle mouse button is released.

    Modifying the Zoom Ratio

    The contents of the canvas can be reduced or magnified at will with the Zoom in and Zoom out buttons on the general toolbar. The zoom ratio can be changed by rolling the mouse wheel, where the center of the zooming is the position of the cursor.

    The Zoom all button on the general toolbar sets the optimal magnification to view everything on the canvas. The Enter key can also be used for this purpose.

    The Zoom to selection button on the same toolbar or the Ctrl+Enter keyboard shortcut increases the zoom ratio, placing the selected object in the center. The Zoom to selection button is only available when there is active selection on the canvas.

    Moving Molecules on the Canvas

    1. Select the whole structure by double-clicking one of its atoms or bonds.
    2. Hold the left mouse button on the blue, highlighted area of the structure (atoms or bonds).
    3. Drag the structure to the desired position.
    4. Release the mouse button, the structure is repositioned now.

    Moving molecules on the canvas

    When the selection contains only a fragment, the molecule will be distorted due to the changes in bond lengths and bond angles.

    Moving a fragment of a molecule

    Rotating Molecules in 2D

    Rotating Around the Molecule Center

    When a structure has been selected, it can be rotated around its center in two dimensions.

    A pink circle with a dot is indicating the center of the selected area (pivot point). The molecule can be rotated around this point by clicking on the blue dot and dragging the cursor on the canvas.

    During dragging, you can see the angle of rotation near this blue dot. By default, rotation is done at 6° increments. For continuous rotation hold down the Shift button while rotating.

    Rotating a molecule in 2D

    Moving the Center of the Rotation

    When a whole molecule is selected, the original center of rotation can be relocated by dragging.

    In this case, if the new rotation center is too close to its original position, it will be snapped back to it.

    However, pressing the Shift key while dragging the center of rotation allows it to be as close to its original place as you wish. Moving the center lets you rotate the molecule around any point of the canvas. The image of the starting structure remains displayed in grey during rotation.

    Moving the center of the rotation

    Rotating Fragments in a Structure

    When a selected part is only a fragment which connects to the rest of the molecule with one bond only, you cannot move the pivot point (which is gray in this case). In such cases, the center of rotation will be the atom that connects the selected and non-selected parts of the structure.

    Rotating fragments of a molecule