Text Box Border Art Padding, Context Menu Type Discrimination & Slider Reactivity

Text Box Border Art Padding, Context Menu Type Discrimination & Slider Reactivity

Adding decorative border art to individual text boxes elevates certificates, gift cards, coupons, and prominent article sidebars. By surrounding text boxes with repeating clipart patterns like stars, vines, ribbon banners, or architectural flourishes, designers can create vintage and ornate publications. Earlier versions suffered from three distinct friction points: text typing under border art tiles, sliders failing to update text boxes unless a page border was added first, and right-click menus incorrectly treating border art text boxes as picture elements. Version 5.7.5 resolved these issues with an architectural overhaul of element border art state management and discrimination.

Independent Slider Reactivity & Target Synchronization

Version 5.7.5 decoupled element border art sliders from page border dependencies:

• Direct Element Reactivity: In elements/border-art/border-art.js, slider change listeners previously verified an unpopulated internal ID (this.currentArtId) that only updated when applying a page border. New helpers (getActiveArtId() and syncStateWithTarget()) resolve the active preset directly from the selected element.

• Target State Isolation: Toggling between "Whole Page" and "Selected Box" in the Border Art modal updates slider controls, numerical readout labels, and pattern card highlights immediately, keeping page border settings completely isolated from element borders.

• Expanded Size Range: Element border art clamping thresholds were relaxed to Math.min(w, h) / 2 - 2, allowing users to dial in bold border art tiles up to 64px on text containers.

Dynamic Text Box Padding (Auto-Buffer Inset)

When decorative border art clipart tiles are rendered inside a text box, typed content must not overlap the artwork:

• Tile Reach Calculation: When border art is applied, the engine computes the outer reach of the tiles: borderReach = safeInset + safeSize.

• Dynamic Inset Buffer: The editable text container receives dynamic padding matching the border reach plus a comfortable 6px buffer: targetPad = Math.round(borderReach + 6) with box-sizing: border-box.

• Clean State Restoration: The original padding is safely preserved in data-original-padding. When border art is removed (artId === 'none'), the text container's initial padding is restored automatically.

Context Menu Discrimination via getElementContentImage

Earlier builds misidentified text boxes containing border art as image elements because border art overlays contain decorative <img> tiles:

• The Discrimination Helper: Introduced window.getElementContentImage(el) in core/core.js. This function finds content images while strictly ignoring tiles nested within .element-border-art, .border-art-wrapper, or native borders.

• Text Box Context Menu Restoration: In ui/menus.js, right-clicking a decorated text box now reliably reveals the Text Box context menu ("Format Text Box", "Border Art...", "Bring to Front", "Send to Back") instead of image actions ("Crop Image", "Change Picture...").

• Ribbon & Selection Pane Consistency: The Format Text ribbon tab activates correctly upon selection, the floating text formatting toolbar appears on text highlighting, and the Selection Pane labels the object as "Text Box".

Tip: You can adjust the Margin / Inset slider in the Border Art dialog to pull border tiles slightly outside the text boundary, maximizing readable typing space.