u2ui 1.5.7 → 1.5.8

package/js/rte/src/client/images.js

@@ -2,7 +2,7 @@ import {elementAttributes, selectedElement} from '../command/element.js';
 import {inlineUi} from '../config/config.js';
 import {caretAfter} from '../ui/caret.js';
 import {Handles} from '../ui/handles.js';
-import {place} from '../ui/place.js';
+import {panelGap, place} from '../ui/place.js';
 
 const STYLE = `
 #image {
@@ -193,7 +193,7 @@ function position(state, box = null) {
         state.handles.place(handle.name, rect.left + rect.width * handle.x, rect.top + rect.height * handle.y);
     }
     // Below the image, clear of the handles sitting on its lower edge.
-    place(state.alt, state.active.view.surface, {align: 'start', prefer: 'below', gap: 16, on: rect});
+    place(state.alt, state.active.view.surface, {align: 'start', prefer: 'below', gap: panelGap, on: rect});
 }
 
 function build(state) {

package/js/rte/src/client/link.js

@@ -1,7 +1,7 @@
 import {inlineUi} from '../config/config.js';
 import {linkHtml} from '../mark/standard.js';
 import {caretAfter} from '../ui/caret.js';
-import {place} from '../ui/place.js';
+import {panelGap, place} from '../ui/place.js';
 import {valueMark} from '../command/mark.js';
 
 const STYLE = `
@@ -419,7 +419,7 @@ function position(state) {
     return place(state.form, active.surface, {
         align: 'start',
         prefer: 'below',
-        gap: 4,
+        gap: panelGap,
         on: active.element?.getBoundingClientRect() || null,
     });
 }

package/js/rte/src/ui/README.md

@@ -243,6 +243,11 @@ keeps the element inside the viewport, and falls to the other side when the
 preferred one does not fit. The roaming toolbar centres above the selection; the
 link form aligns to its start and prefers below.
 
+Two panels can answer for the same thing — an image that is also a link brings
+its frame, its name and its address — so a panel goes under whatever is already
+drawn where it wants to be, in the order the chrome holds them. `panelGap` is
+the one distance they all keep from what they hang off, and from each other.
+
 `caretAfter(surface, element)` is its counterpart at the end: the one way a
 contextual UI hands the caret back, after the element it was about to change
 rather than inside it. An element that is no longer there leaves the surface

package/js/rte/src/ui/place.js

@@ -6,6 +6,11 @@ import {rangeRect} from '../browser/range-rect.js';
 //
 // A UI that belongs to one element rather than to the selection passes that
 // element's rect as `on`: what it points at should not shift with the caret.
+// One distance for every panel that hangs off an element rather than off the
+// selection: the handles on a frame's edge reach about this far, and two panels
+// answering for the same element must not sit at two different heights.
+export const panelGap = 16;
+
 export function place(element, surface, {align = 'center', prefer = 'above', gap = 28, on = null} = {}) {
     const range = on ? null : surface.selection?.range();
     if (!on && !range) return false;
@@ -19,7 +24,24 @@ export function place(element, surface, {align = 'center', prefer = 'above', gap
     const top = prefer === 'above'
         ? (fits ? above : Math.min(view.innerHeight - box.height - gap, below))
         : (fits ? below : Math.max(gap, above));
-    element.style.left = `${Math.max(gap, Math.min(view.innerWidth - box.width - gap, start))}px`;
-    element.style.top = `${top}px`;
+    const left = Math.max(gap, Math.min(view.innerWidth - box.width - gap, start));
+    element.style.left = `${left}px`;
+    element.style.top = `${clear(element, {top, left, width: box.width, height: box.height}, gap)}px`;
     return true;
 }
+
+// Two panels can answer for the same thing — an image that is also a link — and
+// the second must not sit on the first. What is already drawn keeps its spot and
+// the newcomer goes under it, in the order the chrome holds them, so the same
+// two always stack the same way round.
+function clear(element, box, gap) {
+    let top = box.top;
+    for (const panel of element.getRootNode().querySelectorAll?.('.panel') ?? []) {
+        if (panel === element || panel.hidden) continue;
+        const other = panel.getBoundingClientRect();
+        const misses = other.bottom <= top || other.top >= top + box.height
+            || other.right <= box.left || other.left >= box.left + box.width;
+        if (!misses) top = other.bottom + gap;
+    }
+    return top;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",