Re-add the focal-point picker to the new Angular image editor

[oidacra]

Description

The new Angular image editor (#36063 / PR #36236) originally had a focal-point picker. It was removed during development; this issue re-adds it.

What a focal point is / why it matters

A focal point is a normalized (x, y) anchor stored on the asset's metadata. When any downstream crop/resize renders the image at a different size or aspect ratio without explicit crop coordinates, dotCMS centers the crop on the stored focal point instead of the geometric center (CropImageFilter.calcFocalPoint → FocalPointAPI.readFocalPoint).

So an editor marks the "keep-in-frame" point once, and every auto-generated rendition across the site (cards, thumbnails, responsive srcset, social previews) keeps the subject in frame. It is the editorial/manual counterpart to SmartCrop's automatic region detection (#36315).

Backend contract (already implemented)

• Persist: …/filter/FocalPoint/fp/{x},{y}/?overwrite={n} → FocalPointImageFilter calls FocalPointAPI.writeFocalPoint(inode, field, fp), writing the focal point to the asset metadata. fp is normalized floats 0..1 (e.g. 0.42,0.31).
• Consume: subsequent crops/resizes with no explicit x,y read it via readFocalPoint and center the crop on it.

Reference

The prior implementation lived in DotImageEditorFocalOverlayComponent + a with-focal-point store feature + a FocalPoint entry in the URL builder/model — all removed in PR #36236. Git history has the working version to restore from.

Scope

The draggable picker UI plus persisting the focal point to the asset metadata. A focal-point-centered crop preview inside the editor (cropping to ratios to visualize the effect) is out of scope (possible follow-up).

Acceptance Criteria

• The editor offers a focal-point tool that shows a draggable marker overlaid on the image; the marker is positionable by drag and by keyboard (arrow-key nudge) for accessibility.
• The marker position maps to a normalized focal point in the range 0..1 for both x and y, independent of the current zoom/pan.
• Confirming the focal point persists it to the asset's metadata via …/filter/FocalPoint/fp/{x},{y}/?overwrite=… (normalized floats), so downstream crops/resizes center on it.
• When the image already has a stored focal point, opening the editor pre-positions the marker at that point.
• The focal-point action appears in the edit history (applied-edits) and can be removed/undone; clearing it removes the marker.
• Setting the focal point does not alter the displayed image pixels (it is metadata, not a visible transform) — the preview is unchanged aside from the marker.
• Accessibility: the marker has an aria-label, is keyboard-operable, and an aria-live region announces the current focal coordinates.
• Unit tests cover the normalized-coordinate mapping (drag/keyboard → 0..1), the persist call URL, and pre-positioning from existing metadata.

Priority

Medium

Additional Context

• Re-adds functionality removed earlier in PR feat(image-editor): add Angular image editor #36236 — restore from git history: DotImageEditorFocalOverlayComponent, with-focal-point.feature, and the FocalPoint entry in the URL builder/model.
• Builds on [IMAGE EDITOR] Build DotImageEditorComponent modal shell and image-editor signalStore #36063 (PR feat(image-editor): add Angular image editor #36236); part of the Edit Content screen redesign epic Edit Content Screen — GTM #35846.
• Dependency / coordination: persisting writes to the asset's own metadata (independent of the edited-rendition temp file). Decide whether to persist on focal-point set or as part of Save — coordinate with the Save-to-content flow issue.
• Related: SmartCrop Add a SmartCrop control to the new Angular image editor #36315 (the automatic counterpart) and the Save-to-content (new rendition) flow (separate issue).

[erickgonzalez]

This was re-added part of feature parity