Smart Arrow Color Picker & Tip Handle Drag Precision Engine
Smart Arrows provide publication designers with parametric, responsive directional graphics whose stems stretch dynamically while arrowhead proportions remain crisp. In earlier builds, two subtle interactions required refinement: clicking the Fill or Outline color buttons on the floating Action Toolbar failed to open the color picker due to DOM teardown on mouseup, and dragging the orange arrowhead tip handle on left, up, or down arrows inverted mouse movement (moving right shifted the handle left). Version 5.6.6 delivered a comprehensive precision update, restoring instant color picker access and guaranteeing 1:1 directional tracking across all arrow orientations.
Clicking Fill or Outline opens the palette instantly, while the orange junction handle moves in lockstep with the mouse.
1:1 Directional Handle Drag Precision
When arrows point in directions other than right (such as Left, Up, Down, Double, or Quad), drag delta calculations must respect spatial orientation:
Early SVG Style Inspection: getArrowTipInfo() now inspects child <svg> attributes during element creation, ensuring initial handle directions (left, right, up, down) configure properly from the first render.
Dynamic Direction Evaluation: Rather than relying on stale closure variables, mousemove handlers read the active handle direction attribute dynamically, ensuring dragging right moves the handle right and dragging left moves it left.
Flip & Rotation Invariance: Evaluates horizontal (data-scaleX) and vertical (data-scaleY) flip transforms to guarantee handles track cursor motion accurately on flipped arrows.
HUD Slider Parity: Moving the tip slider in the floating toolbar and dragging the on-canvas junction handle produce identical mathematical results and stay in sync.
Restored Fill & Outline Color Pickers
Clicking color buttons on the floating Action Toolbar now reliably displays the Custom Color Picker:
In-Place Overlay Updates: renderSelectionOverlays() detects existing arrow controls and updates dimensions in place (updateArrowTipOverlay) rather than destroying DOM nodes on mouseup, allowing click events to fire normally.
Fill Color Button: Clicking Fill opens the color picker anchored directly to the HUD swatch, immediately updating arrow fill and HUD indicator upon color selection.
Outline Color Button: Clicking Outline adjusts the border stroke dynamically while preserving line thickness.
Right-Click Transparent Toggle: Right-clicking either button toggles transparent No Fill or No Outline cleanly.
Tip: Right-click the Outline swatch on the arrow toolbar to quickly remove borders and create clean flat arrows.