Smart Arrows Floating Action Toolbar & Responsive Controls

Smart Arrows Floating Action Toolbar & Responsive Controls

Creating complex diagrams, process charts, and infographic callouts requires rapid access to styling controls without constant menu navigation. Version 5.3.0 introduced a dedicated Two-Tier Floating Action Toolbar for Smart Arrows that docks directly below selected elements. Featuring direct color pickers, tip size sliders, and an innovative outline thickness control supporting mouse wheel scrolling down to 0px, designers can style directional graphics with unmatched speed.

🎯
[Screenshot: Compact Two-Tier Floating Action Toolbar on Canvas (700 x 360)]

The compact 320px toolbar docks to selected arrows, offering tip sizing, live color swatches, and line thickness tuning.

The Mobile-Optimized Two-Tier Layout

In initial prototypes, arranging all arrow controls horizontally produced an unwieldy 550px toolbar that overflowed on laptops and tablets. Version 5.3.0 introduced a compact two-tier architecture measuring only 320px wide:

  • Top Tier (Tip Sizing & Colors): Houses the interactive tip size slider, a vertical divider, and circular live color swatches for Fill and Outline.

  • Bottom Tier (Outline Thickness): Separated by a clean hairline divider, the lower tier contains the outline width icon, minus/plus single-pixel steppers, a continuous range slider, and a live pixel readout.

  • Intelligent Viewport Docking: When an arrow is near the bottom edge of the canvas, the toolbar automatically flips to dock cleanly above the element, preventing clipping.

Direct Color Pickers & Theme Decoupling

Styling arrows no longer requires opening the Page Design or Format Shape ribbon tabs:

  • Live Swatch Pickers: Left-clicking either the Fill or Outline swatch opens the full Open Publisher color modal (HSV spectrum canvas, theme palette, hex/RGB inputs, and eyedropper).

  • Quick Transparency Toggle: Right-clicking either color button instantly toggles transparent mode (none), displayed by a red diagonal strike-through on the swatch.

  • Theme Clobber Protection: Setting a custom color removes theme scheme attributes, ensuring subsequent global theme switches do not overwrite custom diagram branding.

Outline Thickness Control with 0px Scroll Support

Fine-tuning outline width is fluid and intuitive:

  • Multi-Modal Input: Adjust thickness via the range slider (0px to 24px), single-pixel -1px / +1px stepper buttons, or mouse wheel scrolling.

  • Zero-Pixel Stroke Removal: Scrolling down to 0px completely removes the stroke (stroke="none", stroke-width="0") for clean, borderless solid vector shapes.

  • Automatic Stroke Restoration: Scrolling back up to 1px or higher automatically restores the previous outline color from element memory.

Tip: Hover over the thickness section of the floating toolbar and roll your mouse wheel up or down for rapid, tactile border adjustments.