Ribbon Drawing and Arrange Tools: Shapes, Connectors, Format Painter, and Layout | Mingcedar Studio

<div class="manual-doc-article manual-doc-article-section"><h2 id="ribbon-shapes-arrange">Authoring: Ribbon Drawing and Arrange Tools: Shapes, Connectors, Format Painter, and Layout</h2>

MX Design → Shapes and Arrange provides shapes, connectors, appearance copying, alignment, distribution, rotation, layers and grouping.

<div class="doc-card-list">

<article class="doc-card">

<h3 id="ribbon-shapes-arrange-item-1">Check the selection before using an arrange command</h3>

<p>Arrange commands affect selected shapes. Hold Ctrl to select several objects. To change a child, select inside the group or ungroup it first.</p>

<ul>

<li>Insert a shape or connector: no selection is required.</li>

<li>Align: select at least two objects.</li>

<li>Horizontal or vertical distribution: select at least three objects.</li>

<li>Group: select at least two groupable objects.</li>

<li>Ungroup: select one group object.</li>

</ul>

</article>

<article class="doc-card">

<h3 id="ribbon-shapes-arrange-item-2">Insert shapes, straight connectors, and arrow connectors</h3>

<p>Use MX Design → Shapes → ShapesInsertGallery to insert shapes. Drag Straight Connector or Straight Connector Arrow between object connection points, then move both objects to verify attachment.</p>

<ul>

<li>Frames, buttons, and status blocks: choose a rectangle, circle, or another native shape.</li>

<li>Undirected relationship: Straight Connector.</li>

<li>Flow or sequence direction: Straight Connector Arrow.</li>

<li>After drawing, move both endpoints and verify that the connector stays attached.</li>

</ul>

</article>

<article class="doc-card">

<h3 id="ribbon-shapes-arrange-item-3">Use Format Painter for appearance only</h3>

<p>Select the source, click Format Painter, then click the target to copy fill, stroke, font and basic effects. Copy runtime behaviors with Behavior Browser → Copy Behavior / Paste Behavior.</p>

<ul>

<li>Copy appearance: Format Painter.</li>

<li>Copy State Color, Write Tag, or another runtime behavior: Copy Behavior / Paste Behavior.</li>

<li>After painting, recheck the target object&#39;s text, component name, and behaviors.</li>

</ul>

</article>

<article class="doc-card">

<h3 id="ribbon-shapes-arrange-item-4">Align left, center, right, top, middle, or bottom</h3>

<p>Ctrl-select at least two objects and choose an Arrange alignment. If the reference is wrong, undo with Ctrl+Z, adjust the selection and retry.</p>

<ul>

<li>A column of values: left or right align is usually useful.</li>

<li>A row of buttons: top align or vertical middle is usually useful.</li>

<li>Alignment changes position only; it does not equalize spacing.</li>

</ul>

</article>

<article class="doc-card">

<h3 id="ribbon-shapes-arrange-item-5">Distribute objects evenly</h3>

<p>Select at least three objects. Horizontal Distribution fixes the leftmost and rightmost objects and spaces the others; Vertical Distribution does the same from top to bottom. Position the endpoints first.</p>

<ul>

<li>Distribution does not run with fewer than three objects.</li>

<li>Position the first and last objects before selecting the full set.</li>

<li>After distribution, check spacing against the page edge and nearby content.</li>

</ul>

</article>

<article class="doc-card">

<h3 id="ribbon-shapes-arrange-item-6">Rotate and change layer order</h3>

<p>Rotate Left 90 / Rotate Right 90 turns objects by 90 degrees. Bring Forward advances one layer; Bring To Front moves above all peers. Check backgrounds and transparent click targets after changing layers.</p>

<ul>

<li>Wrong orientation: rotate left or right by 90 degrees.</li>

<li>Move across one neighboring object: Bring Forward.</li>

<li>Place above every peer object: Bring To Front.</li>

<li>Test visible overlap and click behavior after changing layers.</li>

</ul>

</article>

<article class="doc-card">

<h3 id="ribbon-shapes-arrange-item-7">Group and ungroup objects</h3>

<p>Group combines objects for moving, resizing or template reuse. Ungroup preserves child behaviors but removes metadata or animation belonging only to the template/group root. Recheck template identity and root behavior afterward.</p>

<ul>

<li>Finish the repeated device parts before grouping them.</li>

<li>Before adding a behavior to the group, confirm the behavior should affect the whole group.</li>

<li>After ungrouping, check child behaviors, names, and layer order.</li>

<li>Reconfirm whether the result still needs to be saved as a reusable template.</li>

</ul>

</article>

</div>

</div>