✨ feat: update showFloatTip to accept HTMLElement or structured object

Author: xiangechen

packages/chili-core/src/foundation/pubsub.ts

@@ -30,7 +30,7 @@ export interface PubSubEventMap {
     parentVisibleChanged: (model: INode) => void;
     selectionChanged: (document: IDocument, selected: INode[], unselected: INode[]) => void;
     showDialog: (title: I18nKeys, content: HTMLElement, callback?: (result: DialogResult) => void) => void;
-    showFloatTip: (level: MessageType, msg: string) => void;
+    showFloatTip: (dom: HTMLElement | { level: MessageType; msg: string }) => void;
     showInput: (text: string, handler: (text: string) => Result<string, I18nKeys>) => void;
     showPermanent: (action: () => Promise<void>, message: I18nKeys, ...args: any[]) => void;
     showProperties(document: IDocument, nodes: INode[]): void;

packages/chili-ui/src/viewport/flyout/flyout.ts

@@ -7,7 +7,7 @@ import { Input } from "./input";
 import { Tip } from "./tip";
 
 export class Flyout extends HTMLElement {
-    private _tip: Tip | undefined;
+    private _tip: HTMLElement | undefined;
     private _input: Input | undefined;
     private lastFocus: HTMLElement | null = null;
 
@@ -30,12 +30,16 @@ export class Flyout extends HTMLElement {
         PubSub.default.remove("clearInput", this.clearInput);
     }
 
-    private readonly showTip = (level: MessageType, msg: string) => {
-        if (this._tip === undefined) {
-            this._tip = new Tip(msg, level);
+    private readonly showTip = (dom: HTMLElement | { level: MessageType; msg: string }) => {
+        if (dom instanceof HTMLElement) {
+            this._tip?.remove();
+            this._tip = dom;
             this.append(this._tip);
-        } else {
-            this._tip.set(msg, level);
+        } else if (this._tip === undefined) {
+            this._tip = new Tip(dom.msg, dom.level);
+            this.append(this._tip);
+        } else if (this._tip instanceof Tip) {
+            this._tip.set(dom.msg, dom.level);
         }
     };
 

packages/chili/src/snap/handlers/snapEventHandler.ts

@@ -73,7 +73,7 @@ export abstract class SnapEventHandler<D extends SnapData = SnapData> implements
     }
 
     private cleanupResources() {
-        this.clearSnapTip();
+        this.clearSnapPrompt();
         this.clearInput();
         this.removeTempVisuals();
         this.snaps.forEach((snap) => snap.clear());
@@ -93,9 +93,9 @@ export abstract class SnapEventHandler<D extends SnapData = SnapData> implements
     private updateSnapPoint(view: IView, event: PointerEvent) {
         this.setSnaped(view, event);
         if (this._snaped) {
-            this.showSnapPrompt(this.formatPrompt(this._snaped));
+            this.showSnapPrompt(this._snaped);
         } else {
-            this.clearSnapTip();
+            this.clearSnapPrompt();
         }
     }
 
@@ -104,22 +104,6 @@ export abstract class SnapEventHandler<D extends SnapData = SnapData> implements
         view.document.visual.update();
     }
 
-    private formatPrompt(snaped: SnapResult) {
-        let prompt = this.data.prompt?.(snaped);
-        if (!prompt) {
-            let distance = snaped.distance ?? snaped.refPoint?.distanceTo(snaped.point!);
-            if (distance) {
-                prompt = this.formatDistance(distance);
-            }
-        }
-
-        return [snaped.info, prompt].filter((x) => x !== undefined).join(" -> ");
-    }
-
-    protected formatDistance(num: number) {
-        return num.toFixed(2);
-    }
-
     protected setSnaped(view: IView, event: PointerEvent) {
         this.findSnapPoint(ShapeType.Edge, view, event);
 
@@ -173,16 +157,42 @@ export abstract class SnapEventHandler<D extends SnapData = SnapData> implements
         return { shapes, view, mx: event.offsetX, my: event.offsetY };
     }
 
-    private clearSnapTip() {
+    protected clearSnapPrompt() {
         PubSub.default.pub("clearFloatTip");
     }
 
-    private showSnapPrompt(msg: string | undefined) {
-        if (!msg) {
-            this.clearSnapTip();
+    protected showSnapPrompt(snaped: SnapResult) {
+        const prompt = this.formatSnapPrompt(snaped);
+        if (!prompt) {
+            this.clearSnapPrompt();
             return;
         }
-        PubSub.default.pub("showFloatTip", MessageType.info, msg);
+        PubSub.default.pub("showFloatTip", prompt);
+    }
+
+    protected formatSnapPrompt(
+        snaped: SnapResult,
+    ): HTMLElement | { level: MessageType; msg: string } | undefined {
+        let prompt = this.data.prompt?.(snaped);
+        if (!prompt) {
+            let distance = snaped.distance ?? snaped.refPoint?.distanceTo(snaped.point!);
+            if (distance) {
+                prompt = this.formatSnapDistance(distance);
+            }
+        }
+
+        if (!prompt && !snaped.info) {
+            return undefined;
+        }
+
+        return {
+            level: MessageType.info,
+            msg: [snaped.info, prompt].filter((x) => x !== undefined).join(" -> "),
+        };
+    }
+
+    protected formatSnapDistance(num: number) {
+        return num.toFixed(2);
     }
 
     private removeTempVisuals() {