Merge pull request #4 from KamiC6238/feat-breakpoint-tips

feat: support hover message for added & unadded breakpoint

package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/KamiC6238/monaco-breakpoints"
   },
   "license": "MIT",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

src/core/index.ts

@@ -11,7 +11,8 @@ import {
 	EditorMouseTarget,
 	ModelDeltaDecoration,
 	MonacoBreakpointProps,
-	CursorPositionChangedEvent
+	CursorPositionChangedEvent,
+  HoverMessage
 } from '../types';
 
 import {
@@ -44,14 +45,17 @@ export default class MonacoBreakpoint {
 	private decorationIdAndRangeMap = new Map<string, Range>();
 	private lineNumberAndDecorationIdMap = new Map<number, string>();
 
+  private hoverMessage: HoverMessage | null = null
+
 	constructor(params: MonacoBreakpointProps) {
 		if (!params?.editor) {
 			throw new Error("Missing 'editor' parameter");
 		}
 
-		const { editor } = params;
+		const { editor, hoverMessage = null } = params;
 
 		this.editor = editor;
+    this.hoverMessage = hoverMessage
 		this.initMouseEvent();
 		this.initEditorEvent();
 	}
@@ -61,7 +65,7 @@ export default class MonacoBreakpoint {
 		this.mouseMoveDisposable = this.editor!.onMouseMove(
 			(e: EditorMouseEvent) => {
 				const model = this.getModel();
-				const { range, detail, type } = this.getMouseEventTarget(e);
+				const { range, detail, type, position } = this.getMouseEventTarget(e);
 
 				// This indicates that the current position of the mouse is over the total number of lines in the editor
 				if (detail?.isAfterLines) {
@@ -73,6 +77,10 @@ export default class MonacoBreakpoint {
 					// remove previous hover breakpoint decoration
 					this.removeHoverDecoration();
 
+          if (this.checkIfBreakpointExistInLine(position.lineNumber)) {
+            return
+          }
+
 					// create new hover breakpoint decoration
 					const newDecoration = this.createBreakpointDecoration(
 						range,
@@ -81,7 +89,15 @@ export default class MonacoBreakpoint {
 					// render decoration
 					const decorationIds = model.deltaDecorations(
 						[],
-						[newDecoration]
+						[
+              {
+                range: newDecoration.range,
+                options: {
+                  ...newDecoration.options,
+                  glyphMarginHoverMessage: this.hoverMessage?.unAdded ?? null
+                }
+              }
+            ]
 					);
 					// record the hover decoraion id
 					this.hoverDecorationId = decorationIds[0];
@@ -224,7 +240,7 @@ export default class MonacoBreakpoint {
 		return { ...(e.target as EditorMouseTarget) };
 	}
 
-	private getLineDecoration(lineNumber: number) {
+	private getBreankpointDecorationInLine(lineNumber: number) {
 		return (
 			this.getModel()
 				?.getLineDecorations(lineNumber)
@@ -318,7 +334,15 @@ export default class MonacoBreakpoint {
 			// render decoration
 			const newDecorationId = model.deltaDecorations(
 				[],
-				[newDecoration]
+				[
+          {
+            range: { ...newDecoration.range },
+            options: {
+              ...newDecoration.options,
+              glyphMarginHoverMessage: this.hoverMessage?.added ?? null
+            }
+          }
+        ]
 			)[0];
 
 			// record the new breakpoint decoration id
@@ -329,7 +353,7 @@ export default class MonacoBreakpoint {
 			this.emitBreakpointChanged();
 
 			// record the new decoration
-			const decoration = this.getLineDecoration(range.endLineNumber);
+			const decoration = this.getBreankpointDecorationInLine(range.endLineNumber);
 
 			if (decoration) {
 				this.decorationIdAndRangeMap.set(newDecorationId, decoration.range);
@@ -422,6 +446,17 @@ export default class MonacoBreakpoint {
 		return lineBreakInHead;
 	}
 
+  private checkIfBreakpointExistInLine(lineNumber: number) {
+    const decorationInLine = this.getBreankpointDecorationInLine(lineNumber)
+    const decorationIdInLine = this.lineNumberAndDecorationIdMap.get(lineNumber)
+
+    return (
+      decorationInLine &&
+      decorationIdInLine &&
+      decorationInLine.id === decorationIdInLine
+    )
+  }
+
 	private emit<T extends keyof BreakpointEvents>(event: T, data: BreakpointEvents[T]) {
 		this.eventEmitter.emit(event, data);
 	}

src/index.ts

@@ -1 +1 @@
-export {default as MonacoBreakpoint} from './core';
+export {default as MonacoBreakpoint} from './core';

src/style/index.css

@@ -1,15 +1,15 @@
 .monaco-hover-breakpoint {
-    width: 10px !important;
-    height: 10px !important;
+    width: 8px !important;
+    height: 8px !important;
     border-radius: 100%;
     background-color: #eabebc;
     margin: 4px 0 0 8px;
     cursor: pointer;
 }
 
 .monaco-breakpoint {
-    width: 10px !important;
-    height: 10px !important;
+    width: 8px !important;
+    height: 8px !important;
     border-radius: 100%;
     background-color: #d47d78;
     margin: 4px 0 0 8px;

src/types/index.ts

@@ -3,6 +3,7 @@ import type * as monaco from 'monaco-editor';
 export type Range = monaco.IRange;
 export type Position = monaco.IPosition;
 export type Disposable = monaco.IDisposable;
+export type Model = monaco.editor.ITextModel
 export type MonacoEditor = monaco.editor.IStandaloneCodeEditor;
 
 export type EditorMouseEvent = monaco.editor.IEditorMouseEvent;
@@ -13,6 +14,8 @@ export type ModelDecoration = monaco.editor.IModelDecoration;
 export type ModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 export type ModelDecorationOptions = monaco.editor.IModelDecorationOptions;
 
+export type IMarkdownString = monaco.IMarkdownString
+
 /**
  * The meaning of 'Exist' is that the current breakpoint is actually present
  */
@@ -21,8 +24,19 @@ export enum BreakpointEnum {
 	Hover,
 }
 
+export type HoverMessage = {
+  /** Hover message for added breakpoint. Defaults to empty. */
+  added?: IMarkdownString | IMarkdownString[]
+  /** Hover message for unadded breakpoints. Defaults to 'Click to add a breakpoint'. */
+  unAdded?: IMarkdownString | IMarkdownString[]
+}
+
 export interface MonacoBreakpointProps {
 	editor: MonacoEditor;
+  /**
+   * Hover message for added/unadded breakpoint
+   */
+  hoverMessage?: HoverMessage
 }
 
 export type Handler<T = any> = (data: T) => void;