@oicl/openbridge-webcomponents 2.0.0-next.170 → 2.0.0-next.172

package/dist/ar/poi-layer/poi-layer.js

@@ -38,6 +38,9 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 		this.internalSwapping = false;
 		this.lastHeight = 0;
 		this.isGrouping = false;
+		this.lastGroupingSignature = "";
+		this.groupingIds = /* @__PURE__ */ new WeakMap();
+		this.nextGroupingId = 1;
 		this.targetObservers = /* @__PURE__ */ new Map();
 		this.targetSizeElements = /* @__PURE__ */ new Map();
 		this.groupingRaf = 0;
@@ -82,6 +85,12 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 		};
 		this.buttonOffsetXResetRaf = /* @__PURE__ */ new Map();
 	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			slotAssignment: "manual"
+		};
+	}
 	static {
 		this.GROUP_LAYER_HOOK_ATTR = "data-in-poi-layer";
 	}
@@ -283,19 +292,24 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 	setupLayerMutationObserver() {
 		this.layerMutationObserver?.disconnect();
 		this.layerMutationObserver = new MutationObserver((mutations) => {
+			let childListChanged = false;
+			let relevant = false;
 			for (const mutation of mutations) {
 				if (mutation.type !== "childList") continue;
+				childListChanged = true;
 				const nodes = [...mutation.addedNodes, ...mutation.removedNodes];
-				for (const node of nodes) {
-					if (!(node instanceof HTMLElement)) continue;
-					if (this.isPoiLayerRelevantNode(node)) {
-						this.updateTargetObservers();
-						this.scheduleGrouping();
-						this.scheduleLayerHeightUpdate();
-						this.crossingTargetsDirty = true;
-						return;
-					}
+				for (const node of nodes) if (node instanceof HTMLElement && this.isPoiLayerRelevantNode(node)) {
+					relevant = true;
+					break;
 				}
+				if (relevant) break;
+			}
+			if (childListChanged) this.syncSlotAssignments();
+			if (relevant) {
+				this.updateTargetObservers();
+				this.scheduleGrouping();
+				this.scheduleLayerHeightUpdate();
+				this.crossingTargetsDirty = true;
 			}
 		});
 		this.layerMutationObserver.observe(this, {
@@ -307,6 +321,68 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 		this.scheduleGrouping();
 		this.scheduleLayerHeightUpdate();
 	}
+	getMainSlot() {
+		return this.shadowRoot?.querySelector("slot.main") ?? null;
+	}
+	/**
+	* Assign every light-DOM child that is not currently placed in an
+	* auto-group member slot to the main slot. With `slotAssignment: 'manual'`
+	* nothing renders unless explicitly assigned, so this runs after render,
+	* on child-list mutations, and after every grouping change.
+	*/
+	syncSlotAssignments() {
+		const mainSlot = this.getMainSlot();
+		if (!mainSlot) return;
+		const groupAssigned = /* @__PURE__ */ new Set();
+		this.getAutoGroups().forEach((group) => {
+			this.getAutoGroupMemberSlot(group)?.assignedNodes().forEach((node) => groupAssigned.add(node));
+		});
+		const mainNodes = Array.from(this.childNodes).filter((node) => !groupAssigned.has(node) && (node instanceof Element || node instanceof Text));
+		mainSlot.assign(...mainNodes);
+	}
+	/**
+	* Called by an auto-created `obc-poi-group` after it removed a target from
+	* its member slot, so the target immediately re-renders through the main
+	* slot instead of disappearing until the next grouping pass.
+	* @internal
+	*/
+	releaseAssignedTarget(_target) {
+		this.syncSlotAssignments();
+		this.requestGroupingUpdate();
+	}
+	/**
+	* The auto-created `obc-poi-group` elements currently managed by this
+	* layer. Auto groups are shadow-internal chrome (they never appear in the
+	* consumer's light DOM); use this accessor — typically after a
+	* `grouping-change` event — to reach them, e.g. to expand a group
+	* programmatically.
+	*/
+	get autoGroups() {
+		return this.getAutoGroups();
+	}
+	getAutoGroups() {
+		return Array.from(this.shadowRoot?.querySelectorAll("obc-poi-group[data-auto-group]") ?? []);
+	}
+	getAutoGroupMemberSlot(group) {
+		return group.querySelector(":scope > slot.auto-group-members");
+	}
+	/** The auto group a target is currently assigned into, if any. */
+	getAutoGroupOf(target) {
+		const slot = target.assignedSlot;
+		if (slot?.classList.contains("auto-group-members")) return slot.parentElement;
+		return null;
+	}
+	/**
+	* Members of a group in either mode: slot-assigned (shadow auto groups) or
+	* light-DOM children (consumer-managed manual groups).
+	*/
+	getGroupMembers(group) {
+		if (group instanceof HTMLElement) {
+			const slot = this.getAutoGroupMemberSlot(group);
+			if (slot) return slot.assignedElements().filter((el) => isPoi(el));
+		}
+		return Array.from(group.querySelectorAll(`[${POI_ATTR}]`)).filter((node) => isPoi(node));
+	}
 	scheduleGrouping() {
 		if (this.overlapMode === "crossing") {
 			this.scheduleCrossingMode();
@@ -352,6 +428,35 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 		this.crossingOrder = next.crossingOrder;
 		return next.shouldContinue;
 	}
+	getGroupingId(target) {
+		let id = this.groupingIds.get(target);
+		if (id === void 0) {
+			id = this.nextGroupingId++;
+			this.groupingIds.set(target, id);
+		}
+		return id;
+	}
+	notifyGroupingChange(clusters, frontTargets, behindTargets, preGrouped) {
+		const idsOf = (targets) => Array.from(targets, (target) => this.getGroupingId(target)).sort((a, b) => a - b);
+		const signature = JSON.stringify({
+			clusters: clusters.map((cluster) => idsOf(cluster)).sort(),
+			front: idsOf(frontTargets),
+			behind: idsOf(behindTargets),
+			pre: idsOf(preGrouped)
+		});
+		if (signature === this.lastGroupingSignature) return;
+		this.lastGroupingSignature = signature;
+		this.dispatchEvent(new CustomEvent("grouping-change", {
+			detail: {
+				clusters: clusters.map((cluster) => [...cluster]),
+				front: [...frontTargets],
+				behind: [...behindTargets],
+				pregrouped: [...preGrouped]
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	toggleGroupLayerHook(group, hasTargets) {
 		if (hasTargets) group.setAttribute(_ObcPoiLayer.GROUP_LAYER_HOOK_ATTR, "");
 		else group.removeAttribute(_ObcPoiLayer.GROUP_LAYER_HOOK_ATTR);
@@ -376,14 +481,18 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 			const exitRaw = getComputedStyle(this).getPropertyValue("--obc-poi-layer-overlap-exit");
 			const preRaw = getComputedStyle(this).getPropertyValue("--obc-poi-layer-overlap-pre");
 			const behindRaw = getComputedStyle(this).getPropertyValue("--obc-poi-layer-overlap-behind");
-			const enterThreshold = Number.parseFloat(enterRaw) || 0;
-			const exitThreshold = Number.parseFloat(exitRaw) || Math.max(enterThreshold + 8, 8);
-			const preThreshold = Number.parseFloat(preRaw) || enterThreshold;
-			const behindThreshold = Number.parseFloat(behindRaw) || enterThreshold;
+			const parseThreshold = (raw, fallback) => {
+				const value = Number.parseFloat(raw);
+				return Number.isFinite(value) ? value : fallback;
+			};
+			const enterThreshold = parseThreshold(enterRaw, 10);
+			const exitThreshold = Math.max(parseThreshold(exitRaw, enterThreshold + 8), enterThreshold);
+			const preThreshold = parseThreshold(preRaw, Math.max(enterThreshold, 16));
+			const behindThreshold = parseThreshold(behindRaw, enterThreshold);
 			const currentGroupByTarget = /* @__PURE__ */ new Map();
 			targets.forEach((target) => {
-				const parent = target.parentElement;
-				if (parent?.tagName.toLowerCase() === "obc-poi-group") currentGroupByTarget.set(target, parent);
+				const group = this.getAutoGroupOf(target);
+				if (group) currentGroupByTarget.set(target, group);
 			});
 			const rects = /* @__PURE__ */ new Map();
 			targets.forEach((target) => {
@@ -397,7 +506,7 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 			}, currentGroupByTarget);
 			const clusters = buildClusters(targets, adjacency);
 			const behindClusters = buildClusters(targets, behindAdjacency);
-			const existingGroups = Array.from(this.querySelectorAll("obc-poi-group[data-auto-group]"));
+			const existingGroups = this.getAutoGroups().filter((group) => !group.hasAttribute("data-exiting"));
 			const frontTargets = /* @__PURE__ */ new Set();
 			clusters.forEach((cluster) => {
 				const front = this.getFrontTarget(cluster, rects);
@@ -410,13 +519,24 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 			});
 			const expandedAutoGroup = existingGroups.find((group) => group.expand === true || group.collapsing === true);
 			if (expandedAutoGroup) {
-				if (this.joinWhileExpanded) this.tryJoinExpandedGroup(expandedAutoGroup, targets, rects, enterThreshold);
+				const joined = this.joinWhileExpanded ? this.tryJoinExpandedGroup(expandedAutoGroup, targets, rects, enterThreshold) : null;
+				if (joined) {
+					const liveClusters = existingGroups.map((group) => this.getGroupMembers(group));
+					const liveFront = /* @__PURE__ */ new Set();
+					liveClusters.forEach((cluster) => {
+						const front = this.getFrontTarget(cluster, rects);
+						if (front) liveFront.add(front);
+					});
+					behindTargets.delete(joined);
+					preGrouped.delete(joined);
+					this.notifyGroupingChange(liveClusters, liveFront, behindTargets, preGrouped);
+				}
 				return;
 			}
 			const remainingClusters = [...clusters];
 			const keptGroups = [];
 			existingGroups.forEach((group) => {
-				const children = Array.from(group.children).filter((child) => isPoi(child));
+				const children = this.getGroupMembers(group);
 				const matchIndex = remainingClusters.findIndex((cluster) => cluster.length === children.length && cluster.every((target) => children.includes(target)));
 				if (matchIndex >= 0) {
 					keptGroups.push(group);
@@ -444,7 +564,8 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 					});
 					group.removeAttribute("data-visible");
 					group.setAttribute("data-exiting", "true");
-					children.forEach((child) => this.appendChild(child));
+					this.getAutoGroupMemberSlot(group)?.assign();
+					this.syncSlotAssignments();
 					children.forEach((child) => {
 						if (!front || child !== front) child.getBoundingClientRect();
 					});
@@ -465,12 +586,16 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 				group.setAttribute("data-position-mode", "bottom");
 				group.setAttribute("data-visible", "true");
 				group.internalSwapping = !!this.internalSwapping;
-				group.setAttribute("positionVertical", `${this.getGroupPositionVertical(cluster, rects, layerRect, group)}px`);
+				group.setAttribute("position-vertical", `${this.getGroupPositionVertical(cluster, rects, layerRect, group)}px`);
+				const memberSlot = document.createElement("slot");
+				memberSlot.className = "auto-group-members";
+				group.appendChild(memberSlot);
 				cluster.forEach((target) => {
 					target.removeAttribute("data-grouped");
-					group.appendChild(target);
 				});
-				this.appendChild(group);
+				this.wrapper?.appendChild(group);
+				memberSlot.assign(...cluster);
+				this.syncSlotAssignments();
 				requestAnimationFrame(() => {
 					cluster.forEach((target) => target.setAttribute("data-grouped", "true"));
 				});
@@ -478,8 +603,8 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 			});
 			const groupedTargets = /* @__PURE__ */ new Set();
 			keptGroups.forEach((group) => {
-				Array.from(group.children).forEach((child) => {
-					if (isPoi(child)) groupedTargets.add(child);
+				this.getGroupMembers(group).forEach((child) => {
+					groupedTargets.add(child);
 				});
 			});
 			targets.forEach((target) => {
@@ -518,6 +643,7 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 				}
 			});
 			this.refreshGroupPositions(layerRect, rects);
+			this.notifyGroupingChange(clusters, frontTargets, behindTargets, preGrouped);
 			requestAnimationFrame(() => {
 				targets.forEach((target) => target.removeAttribute("data-front-exit"));
 			});
@@ -528,13 +654,13 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 	}
 	tryJoinExpandedGroup(group, targets, rects, enterThreshold) {
 		const groupTargets = this.getGroupTargets(group);
-		if (groupTargets.length === 0) return;
+		if (groupTargets.length === 0) return null;
 		const groupTargetSet = new Set(groupTargets);
-		const candidates = targets.filter((target) => !groupTargetSet.has(target) && target.parentElement?.tagName.toLowerCase() !== "obc-poi-group");
-		if (candidates.length === 0) return;
+		const candidates = targets.filter((target) => !groupTargetSet.has(target) && target.parentElement?.tagName.toLowerCase() !== "obc-poi-group" && this.getAutoGroupOf(target) === null);
+		if (candidates.length === 0) return null;
 		const useButtonRects = group.expand === true || group.collapsing === true;
 		const groupCenters = groupTargets.map((target) => useButtonRects ? this.getTargetRect(target) : rects.get(target)).filter((rect) => !!rect).map((rect) => rect.left + rect.width / 2);
-		if (groupCenters.length === 0) return;
+		if (groupCenters.length === 0) return null;
 		const groupCenter = (Math.min(...groupCenters) + Math.max(...groupCenters)) / 2;
 		let bestCandidate = null;
 		let bestGap = Number.POSITIVE_INFINITY;
@@ -552,10 +678,16 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 				}
 			}
 		}
-		if (!bestCandidate) return;
+		if (!bestCandidate) return null;
 		bestCandidate.setAttribute("data-joined-expanded", "true");
 		const candidateRect = rects.get(bestCandidate);
-		if ((candidateRect?.left !== void 0 ? candidateRect.left + candidateRect.width / 2 : 0) < groupCenter) group.insertBefore(bestCandidate, groupTargets[0] ?? null);
+		const insertBefore = (candidateRect?.left !== void 0 ? candidateRect.left + candidateRect.width / 2 : 0) < groupCenter;
+		const memberSlot = group instanceof HTMLElement ? this.getAutoGroupMemberSlot(group) : null;
+		if (memberSlot) {
+			const members = memberSlot.assignedElements().filter((el) => el !== bestCandidate);
+			memberSlot.assign(...insertBefore ? [bestCandidate, ...members] : [...members, bestCandidate]);
+			this.syncSlotAssignments();
+		} else if (insertBefore) group.insertBefore(bestCandidate, groupTargets[0] ?? null);
 		else group.appendChild(bestCandidate);
 		bestCandidate.setAttribute("data-grouped", "true");
 		bestCandidate.removeAttribute("data-behind");
@@ -571,6 +703,7 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 			bestCandidate.style.height = touchTarget;
 		}
 		group.refreshExpandedLayout?.(true);
+		return bestCandidate;
 	}
 	applyStandaloneVisualState(target, overlap) {
 		const isEnhanced = target.buttonType === ObcPoiButtonType.Enhanced;
@@ -586,17 +719,17 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 		clearPoiVisualState(target);
 	}
 	refreshGroupPositions(layerRect, rects) {
-		Array.from(this.querySelectorAll("obc-poi-group")).forEach((group) => {
-			const children = Array.from(group.children).filter((child) => isPoi(child));
+		[...Array.from(this.querySelectorAll("obc-poi-group")), ...this.getAutoGroups()].forEach((group) => {
+			const children = this.getGroupMembers(group);
 			this.toggleGroupLayerHook(group, children.length > 0);
-			const hasPositionAttr = group.hasAttribute("positionvertical") || group.hasAttribute("positionVertical");
+			const hasPositionAttr = group.hasAttribute("position-vertical");
 			if (!group.hasAttribute("data-auto-group") && !group.hasAttribute("data-position-mode")) group.setAttribute("data-position-mode", "bottom");
 			const shouldSetPosition = group.hasAttribute("data-auto-group") || !hasPositionAttr;
 			if (group.hasAttribute("data-auto-group")) group.internalSwapping = !!this.internalSwapping;
 			if (children.length > 0 && shouldSetPosition) {
 				const layerBounds = layerRect ?? this.getBoundingClientRect();
 				const rectMap = rects ?? new Map(children.map((child) => [child, this.getTargetRectForGrouping(child, layerBounds)]));
-				group.setAttribute("positionVertical", `${this.getGroupPositionVertical(children, rectMap, layerBounds, group)}px`);
+				group.setAttribute("position-vertical", `${this.getGroupPositionVertical(children, rectMap, layerBounds, group)}px`);
 			}
 			group.updatePosition?.();
 		});
@@ -738,19 +871,20 @@ var ObcPoiLayer = class ObcPoiLayer extends LitElement {
 		return Array.from(this.querySelectorAll(`[${POI_ATTR}]`)).filter((node) => isPoi(node) && !node.hasAttribute("data-stack-selected"));
 	}
 	getGroupTargets(group) {
-		return Array.from(group.querySelectorAll(`[${POI_ATTR}]`)).filter((node) => isPoi(node));
-	}
-	updated(changedProperties) {
-		if (changedProperties.has("isSelected")) this.dispatchEvent(new Event("layer-selection-changed", { bubbles: true }));
+		return this.getGroupMembers(group);
 	}
 	render() {
 		return html`
       <div class="wrapper${this.debug ? " debug" : ""}">
         ${this.debug ? html`<span class="debug-label">${this.label || "Layer"}</span>` : nothing}
-        <slot></slot>
+        <slot class="main"></slot>
       </div>
     `;
 	}
+	updated(changedProperties) {
+		if (changedProperties.has("isSelected")) this.dispatchEvent(new Event("layer-selection-changed", { bubbles: true }));
+		this.syncSlotAssignments();
+	}
 	static {
 		this.styles = unsafeCSS(poi_layer_default);
 	}