Layer Association Logic

Mockitt clearly defines the relationship between In-Page elements, Out-of-Page elements, and Independent elements, helping you better understand the page structure during prototyping.

Page and Element Relationships

Pages do not support nesting. If pages overlap, the page higher up in the layer list takes visual precedence.

The relationship between elements and pages is categorized into three types:

1. In-Page Element: An element that belongs to the page and visually intersects (overlaps) with it.
2. Out-of-Page Element: An element that belongs to the page structure (in the Layers list) but does not visually intersect with the page area.
3. Independent Element: An element that does not belong to any page.

Visual Display of Different Elements:

Different types of elements display differently in the editing area:

• In-Page Elements: Parts extending beyond the page boundary will appear semi-transparent to indicate their relationship with the page.
• Out-of-Page Elements: The entire element appears semi-transparent.
• Independent Elements: Always display in their original style without transparency.

Association Logic When Moving Elements

1. Dragging with Mouse

When you drag an element or adjust its size with the mouse, the relationship between the element and the page is re-evaluated upon releasing the mouse button.

1. If an Independent Element is dragged and overlaps with a page, it becomes an In-Page Element of that page.
2. If an In-Page Element is dragged out so it no longer intersects its original page:
   • If it does not intersect any page, it becomes an Independent Element.
   • If it intersects a new page, it becomes an In-Page Element of the new page.
3. If an Out-of-Page Element is dragged and intersects a different page (and no longer belongs to the original context), it becomes an In-Page Element of the new page.
4. Priority: When an element overlaps multiple pages simultaneously, it is assigned to the page with the higher layer hierarchy.

2. Moving via Keyboard or Properties

When you use keyboard arrow keys or modify X/Y coordinates in the properties panel to move an In-Page Element: Even if it moves completely outside the page boundary, it remains associated with that page (becoming an Out-of-Page Element).

3. Adjusting via Layers Panel

You can manually change the relationship of any element (In-Page, Out-of-Page, or Independent) by dragging the layer up or down, or into/out of a page folder in the Layers list on the left.

4. Creating a New Page

When you create a new page, if it is placed over existing Independent Elements, those elements are automatically absorbed into the new page and become In-Page Elements.

5. Creating New Widgets

When creating a widget (e.g., by double-clicking), if the new widget intersects with a page, it will automatically belong to that page.

Note: Layer association logic is only active in Edit Mode.