@univerjs/docs-thread-comment-ui 1.0.0-insiders.20260809-70eefdd → 1.0.0-rc.0

package/lib/es/index.js

@@ -1,70 +1,48 @@
-import { BuildTextUtils, CommandType, CustomDecorationType, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, Plugin, SHEET_EDITOR_UNITS, UniverInstanceType, UserManagerService, isInternalEditorID, merge, sequenceExecute } from "@univerjs/core";
-import { DocBackScrollRenderController, DocRenderController, DocSelectionRenderService, FLOAT_TOOLBAR_MENU_POSITION, UniverDocsUIPlugin, addCustomDecorationBySelectionFactory, deleteCustomDecorationFactory } from "@univerjs/docs-ui";
-import { AddCommentMutation, IThreadCommentDataSourceService, ThreadCommentModel, UniverThreadCommentPlugin, getDT } from "@univerjs/thread-comment";
-import { SetActiveCommentOperation, ThreadCommentPanel, ThreadCommentPanelService, UniverThreadCommentUIPlugin } from "@univerjs/thread-comment-ui";
-import { DOC_INTERCEPTOR_POINT, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation, SetTextSelectionsOperation, UniverDocsPlugin } from "@univerjs/docs";
+import { BuildTextUtils, CommandType, CustomDecorationType, DependentOn, Disposable, ICommandService, IConfigService, IPermissionService, IUniverInstanceService, Inject, Injector, Plugin, SHEET_EDITOR_UNITS, ThemeService, UniverInstanceType, UserManagerService, isInternalEditorID, merge, sequenceExecute, toDisposable } from "@univerjs/core";
+import { DOC_INTERCEPTOR_POINT, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation, SetTextSelectionsOperation, UniverDocsPlugin, getDocumentPermissionValue } from "@univerjs/docs";
+import { DEFAULT_DOC_SUBUNIT_ID, UniverDocsThreadCommentPlugin, prepareDocTextRangeComment } from "@univerjs/docs-thread-comment";
+import { SetActiveCommentOperation, ThreadCommentCanvasOverlay, ThreadCommentDraftService, ThreadCommentPanel, ThreadCommentPanelService, UniverThreadCommentUIPlugin } from "@univerjs/thread-comment-ui";
+import { DocBackScrollRenderController, DocSelectionRenderService, FLOAT_TOOLBAR_MENU_POSITION, UniverDocsUIPlugin, deleteCustomDecorationFactory } from "@univerjs/docs-ui";
+import { IDrawingManagerService, UniverDrawingPlugin, getDrawingShapeKeyByDrawingSearch } from "@univerjs/drawing";
 import { DocumentEditArea, IRenderManagerService, UniverRenderEnginePlugin, withCurrentTypeOfRenderer } from "@univerjs/engine-render";
-import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
-import { BehaviorSubject, Observable, debounceTime, filter, map } from "rxjs";
-import { CommentIcon } from "@univerjs/icons";
+import { ThreadCommentAnchorKind, ThreadCommentModel, UniverThreadCommentPlugin, deserializeThreadCommentAnchor, getDT, serializeThreadCommentAnchor } from "@univerjs/thread-comment";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, FloatingObjectToolbarPosition, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { BehaviorSubject, Observable, combineLatest, debounceTime, filter, map, merge as merge$1, pairwise, skip, startWith } from "rxjs";
+import { UnitAction } from "@univerjs/protocol";
+import { CommentIcon, InsertCommentDoubleIcon } from "@univerjs/icons";
 import { useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/common/const.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const DOCS_THREAD_COMMENT_PANEL = "univer.doc.thread-comment-panel";
-const PLUGIN_NAME = "DOC_THREAD_COMMENT_UI_PLUGIN";
-const DEFAULT_DOC_SUBUNIT_ID = "default_doc";
-
-//#endregion
 //#region src/commands/commands/add-doc-comment.command.ts
+/** Adds a document comment and activates it in the UI comment panel. */
 const AddDocCommentComment = {
 	id: "docs.command.add-comment",
 	type: CommandType.COMMAND,
 	async handler(accessor, params) {
 		if (!params) return false;
-		const { comment: originComment, unitId } = params;
-		const comment = await accessor.get(IThreadCommentDataSourceService).addComment(originComment);
-		const commandService = accessor.get(ICommandService);
-		const doMutation = addCustomDecorationBySelectionFactory(accessor, {
-			id: comment.threadId,
-			type: CustomDecorationType.COMMENT,
-			unitId
-		});
-		if (doMutation) return (await sequenceExecute([
-			{
-				id: AddCommentMutation.id,
-				params: {
-					unitId,
-					subUnitId: DEFAULT_DOC_SUBUNIT_ID,
-					comment
-				}
-			},
-			doMutation,
-			{
-				id: SetActiveCommentOperation.id,
-				params: {
-					unitId,
-					subUnitId: DEFAULT_DOC_SUBUNIT_ID,
-					commentId: comment.id
-				}
+		const prepared = await prepareDocTextRangeComment(accessor, params);
+		if (!prepared) return false;
+		const activeOperation = {
+			id: SetActiveCommentOperation.id,
+			params: {
+				unitId: prepared.comment.unitId,
+				subUnitId: prepared.comment.subUnitId,
+				commentId: prepared.comment.id
 			}
-		], commandService)).result;
-		return false;
+		};
+		const decorationMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				...prepared.decorationMutationParams,
+				textRanges: null,
+				noNeedSetTextRange: true
+			}
+		};
+		return (await sequenceExecute([
+			prepared.commentMutation,
+			decorationMutation,
+			activeOperation
+		], accessor.get(ICommandService))).result;
 	}
 };
 
@@ -86,6 +64,26 @@ const DeleteDocCommentComment = {
 	}
 };
 
+//#endregion
+//#region src/common/const.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DOCS_THREAD_COMMENT_PANEL = "univer.doc.thread-comment-panel";
+const PLUGIN_NAME = "DOC_THREAD_COMMENT_UI_PLUGIN";
+
 //#endregion
 //#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
@@ -268,14 +266,76 @@ const StartAddCommentOperation = {
 		return true;
 	}
 };
+const AddDocDrawingCommentOperation = {
+	id: "docs.operation.add-drawing-comment",
+	type: CommandType.OPERATION,
+	handler(accessor) {
+		const drawing = accessor.get(IDrawingManagerService).getFocusDrawings()[0];
+		const doc = accessor.get(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+		if (!drawing || !doc || drawing.unitId !== doc.getUnitId()) return false;
+		accessor.get(ThreadCommentDraftService).place({
+			unitId: drawing.unitId,
+			subUnitId: drawing.subUnitId,
+			anchor: {
+				kind: ThreadCommentAnchorKind.DOC_DRAWING,
+				pageId: drawing.subUnitId,
+				elementId: drawing.drawingId
+			}
+		});
+		const panelService = accessor.get(ThreadCommentPanelService);
+		accessor.get(ISidebarService).open({
+			header: { title: "docs-thread-comment-ui.panel.title" },
+			children: { label: DOCS_THREAD_COMMENT_PANEL },
+			width: 320,
+			onClose: () => panelService.setPanelVisible(false)
+		});
+		panelService.setPanelVisible(true);
+		return true;
+	}
+};
 
 //#endregion
 //#region src/menu/menu.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function getCommentPermissionDisabled$(accessor) {
+	const instanceService = accessor.get(IUniverInstanceService);
+	const permissionService = accessor.get(IPermissionService);
+	return combineLatest([instanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), permissionService.permissionPointUpdate$.pipe(startWith(void 0))]).pipe(map(([document]) => !document || !getDocumentPermissionValue(permissionService, document.getUnitId(), document.getUnitId(), UnitAction.Comment)));
+}
+function AddDocDrawingCommentMenuItemFactory(accessor) {
+	return {
+		id: AddDocDrawingCommentOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "InsertCommentDoubleIcon",
+		title: "docs-thread-comment-ui.panel.addComment",
+		tooltip: "docs-thread-comment-ui.panel.addComment",
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
+		disabled$: getCommentPermissionDisabled$(accessor)
+	};
+}
 const shouldDisableAddComment = (accessor) => {
 	var _withCurrentTypeOfRen;
 	const renderManagerService = accessor.get(IRenderManagerService);
 	const docSelectionManagerService = accessor.get(DocSelectionManagerService);
-	const skeleton = (_withCurrentTypeOfRen = withCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC, DocSkeletonManagerService, accessor.get(IUniverInstanceService), renderManagerService)) === null || _withCurrentTypeOfRen === void 0 ? void 0 : _withCurrentTypeOfRen.getSkeleton();
+	const instanceService = accessor.get(IUniverInstanceService);
+	const permissionService = accessor.get(IPermissionService);
+	const document = instanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+	if (!document || !getDocumentPermissionValue(permissionService, document.getUnitId(), document.getUnitId(), UnitAction.Comment)) return true;
+	const skeleton = (_withCurrentTypeOfRen = withCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC, DocSkeletonManagerService, instanceService, renderManagerService)) === null || _withCurrentTypeOfRen === void 0 ? void 0 : _withCurrentTypeOfRen.getSkeleton();
 	const editArea = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getViewModel().getEditArea();
 	if (editArea === DocumentEditArea.FOOTER || editArea === DocumentEditArea.HEADER) return true;
 	const range = docSelectionManagerService.getActiveTextRange();
@@ -286,18 +346,11 @@ function AddDocCommentMenuItemFactory(accessor) {
 	return {
 		id: StartAddCommentOperation.id,
 		type: MenuItemType.BUTTON,
-		icon: "CommentIcon",
+		icon: "InsertCommentDoubleIcon",
 		title: "docs-thread-comment-ui.panel.addComment",
 		tooltip: "docs-thread-comment-ui.panel.addComment",
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC, void 0, SHEET_EDITOR_UNITS),
-		disabled$: new Observable(function(subscribe) {
-			const observer = accessor.get(DocSelectionManagerService).textSelection$.pipe(debounceTime(16)).subscribe(() => {
-				subscribe.next(shouldDisableAddComment(accessor));
-			});
-			return () => {
-				observer.unsubscribe();
-			};
-		})
+		disabled$: combineLatest([accessor.get(DocSelectionManagerService).textSelection$.pipe(debounceTime(16), map(() => shouldDisableAddComment(accessor)), startWith(shouldDisableAddComment(accessor))), getCommentPermissionDisabled$(accessor)]).pipe(map(([selectionDisabled, permissionDisabled]) => selectionDisabled || permissionDisabled))
 	};
 }
 function ToolbarDocCommentMenuItemFactory(accessor) {
@@ -305,8 +358,8 @@ function ToolbarDocCommentMenuItemFactory(accessor) {
 		id: ToggleCommentPanelOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "CommentIcon",
-		title: "docs-thread-comment-ui.panel.addComment",
-		tooltip: "docs-thread-comment-ui.panel.addComment",
+		title: "docs-thread-comment-ui.panel.openComments",
+		tooltip: "docs-thread-comment-ui.panel.openComments",
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
 	};
 }
@@ -314,24 +367,48 @@ function ToolbarDocCommentMenuItemFactory(accessor) {
 //#endregion
 //#region src/menu/schema.ts
 const menuSchema = {
-	[RibbonInsertGroup.MEDIA]: { [ToggleCommentPanelOperation.id]: {
-		order: 3,
-		menuItemFactory: ToolbarDocCommentMenuItemFactory
-	} },
+	[RibbonInsertGroup.MEDIA]: {
+		[ToggleCommentPanelOperation.id]: {
+			order: 3,
+			gridLayout: {
+				row: 1,
+				column: 4,
+				showLabel: true
+			},
+			menuItemFactory: ToolbarDocCommentMenuItemFactory
+		},
+		[StartAddCommentOperation.id]: {
+			order: 3.1,
+			gridLayout: {
+				row: 2,
+				column: 4,
+				showLabel: true
+			},
+			menuItemFactory: AddDocCommentMenuItemFactory
+		}
+	},
 	[FLOAT_TOOLBAR_MENU_POSITION]: { [StartAddCommentOperation.id]: {
 		order: 21,
 		menuItemFactory: AddDocCommentMenuItemFactory
 	} },
+	[FloatingObjectToolbarPosition.DOC]: { [AddDocDrawingCommentOperation.id]: {
+		order: 10,
+		menuItemFactory: AddDocDrawingCommentMenuItemFactory
+	} },
 	[ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.DATA]: { [StartAddCommentOperation.id]: {
 		order: 1,
 		menuItemFactory: AddDocCommentMenuItemFactory
+	} } },
+	[ContextMenuPosition.DRAWING]: { [ContextMenuGroup.DATA]: { [AddDocDrawingCommentOperation.id]: {
+		order: 1,
+		menuItemFactory: AddDocDrawingCommentMenuItemFactory
 	} } }
 };
 
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-thread-comment-ui";
-var version = "1.0.0-insiders.20260809-70eefdd";
+var version = "1.0.0-rc.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -341,17 +418,44 @@ const defaultPluginConfig = {};
 
 //#endregion
 //#region src/views/DocThreadCommentPanel.tsx
+function getDocCommentPanelSubUnitId(draft, unitId) {
+	return draft && draft.unitId === unitId ? draft.subUnitId : DEFAULT_DOC_SUBUNIT_ID;
+}
 const DocThreadCommentPanel = () => {
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const injector = useDependency(Injector);
 	const doc = useObservable(useMemo(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).pipe(filter((doc) => !!doc && !isInternalEditorID(doc.getUnitId()))), [univerInstanceService]));
-	const subUnitId$ = useMemo(() => new Observable((sub) => sub.next(DEFAULT_DOC_SUBUNIT_ID)), []);
+	const draftService = useDependency(ThreadCommentDraftService);
+	const drawingDraft = useObservable(draftService.draft$, draftService.draft);
+	const subUnitId$ = useMemo(() => new Observable((sub) => sub.next(getDocCommentPanelSubUnitId(drawingDraft, doc === null || doc === void 0 ? void 0 : doc.getUnitId()))), [doc, drawingDraft]);
 	const docSelectionManagerService = useDependency(DocSelectionManagerService);
 	const selectionChange$ = useMemo(() => docSelectionManagerService.textSelection$.pipe(debounceTime(16)), [docSelectionManagerService.textSelection$]);
-	const disableAdd = useObservable(() => selectionChange$.pipe(map(() => shouldDisableAddComment(injector))), shouldDisableAddComment(injector), false, [injector, selectionChange$]);
+	const permissionService = useDependency(IPermissionService);
+	const disableAddChange$ = useMemo(() => merge$1(selectionChange$, permissionService.permissionPointUpdate$), [permissionService.permissionPointUpdate$, selectionChange$]);
+	const disableAdd = useObservable(() => disableAddChange$.pipe(map(() => shouldDisableAddComment(injector))), shouldDisableAddComment(injector), false, [disableAddChange$, injector]);
 	const commandService = useDependency(ICommandService);
+	const threadCommentModel = useDependency(ThreadCommentModel);
+	useObservable(threadCommentModel.commentUpdate$);
 	const docCommentService = useDependency(DocThreadCommentService);
-	const tempComment = useObservable(docCommentService.addingComment$);
+	const textTempComment = useObservable(docCommentService.addingComment$);
+	const userManagerService = useDependency(UserManagerService);
+	const drawingTempComment = (drawingDraft === null || drawingDraft === void 0 ? void 0 : drawingDraft.anchor.kind) === ThreadCommentAnchorKind.DOC_DRAWING && drawingDraft.unitId === (doc === null || doc === void 0 ? void 0 : doc.getUnitId()) ? {
+		id: "",
+		threadId: "",
+		unitId: drawingDraft.unitId,
+		subUnitId: drawingDraft.subUnitId,
+		ref: serializeThreadCommentAnchor(drawingDraft.anchor),
+		dT: "",
+		personId: userManagerService.getCurrentUser().userID,
+		text: { dataStream: "\r\n" }
+	} : null;
+	const tempComment = drawingTempComment ?? textTempComment;
+	const drawingIds = new Set(Object.keys((doc === null || doc === void 0 ? void 0 : doc.getSnapshot().drawings) ?? {}));
+	const isDrawingComment = (comment) => {
+		const anchor = deserializeThreadCommentAnchor(comment.ref);
+		return (anchor === null || anchor === void 0 ? void 0 : anchor.kind) === ThreadCommentAnchorKind.DOC_DRAWING || comment.ref.startsWith("#") && drawingIds.has(comment.ref.slice(1));
+	};
+	const drawingCommentIds = doc ? threadCommentModel.getUnit(doc.getUnitId()).filter((thread) => isDrawingComment(thread.root)).map((thread) => thread.root.id) : [];
 	const [commentIds, setCommentIds] = useState([]);
 	useEffect(() => {
 		const set = /* @__PURE__ */ new Set();
@@ -388,31 +492,36 @@ const DocThreadCommentPanel = () => {
 		getSubUnitName: () => "",
 		disableAdd,
 		tempComment,
-		onAddComment: (comment) => {
+		onAddComment: async (comment) => {
+			if (drawingTempComment && !comment.parentId) return true;
 			if (!comment.parentId) {
 				const params = {
 					unitId,
-					range: tempComment,
+					range: textTempComment,
 					comment
 				};
-				commandService.executeCommand(AddDocCommentComment.id, params);
+				if (!await commandService.executeCommand(AddDocCommentComment.id, params)) throw new Error("Failed to add document comment.");
 				docCommentService.endAdd();
 				return false;
 			}
 			return true;
 		},
-		onDeleteComment: (comment) => {
+		onAfterDeleteComment: async (comment) => {
 			if (!comment.parentId) {
+				if (isDrawingComment(comment)) return;
 				const params = {
 					unitId,
 					commentId: comment.id
 				};
-				commandService.executeCommand(DeleteDocCommentComment.id, params);
-				return false;
+				await commandService.executeCommand(DeleteDocCommentComment.id, params);
 			}
-			return true;
 		},
-		showComments: commentIds
+		showComments: [...commentIds, ...drawingCommentIds],
+		onTempCommentClose: () => draftService.cancel(),
+		formatRef: (comment) => {
+			const anchor = deserializeThreadCommentAnchor(comment.ref);
+			return (anchor === null || anchor === void 0 ? void 0 : anchor.kind) === ThreadCommentAnchorKind.DOC_DRAWING ? `#${anchor.elementId}` : comment.ref;
+		}
 	});
 };
 
@@ -447,7 +556,10 @@ let ComponentsController = class ComponentsController extends Disposable {
 		});
 	}
 	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ CommentIcon }));
+		this.disposeWithMe(this._iconManager.register({
+			CommentIcon,
+			InsertCommentDoubleIcon
+		}));
 	}
 };
 ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
@@ -478,17 +590,10 @@ let DocThreadCommentSelectionController = class DocThreadCommentSelectionControl
 				lastSelection = primary;
 				if (primary && doc) {
 					const { startOffset, endOffset, collapsed } = primary;
-					let customRange;
-					if (collapsed) {
-						var _doc$getBody;
-						customRange = (_doc$getBody = doc.getBody()) === null || _doc$getBody === void 0 || (_doc$getBody = _doc$getBody.customDecorations) === null || _doc$getBody === void 0 ? void 0 : _doc$getBody.find((value) => value.startIndex <= startOffset && value.endIndex >= endOffset - 1);
-					} else {
-						var _doc$getBody2;
-						customRange = (_doc$getBody2 = doc.getBody()) === null || _doc$getBody2 === void 0 || (_doc$getBody2 = _doc$getBody2.customDecorations) === null || _doc$getBody2 === void 0 ? void 0 : _doc$getBody2.find((value) => value.startIndex <= startOffset && value.endIndex >= endOffset - 1);
-					}
+					const selectionEnd = collapsed ? startOffset : endOffset - 1;
+					const customRange = this._findActiveCommentDecoration(doc, unitId, startOffset, selectionEnd);
 					if (customRange) {
-						const comment = this._threadCommentModel.getComment(unitId, DEFAULT_DOC_SUBUNIT_ID, customRange.id);
-						if (comment && !comment.resolved) this._commandService.executeCommand(ShowCommentPanelOperation.id, { activeComment: {
+						this._commandService.executeCommand(ShowCommentPanelOperation.id, { activeComment: {
 							unitId,
 							subUnitId: DEFAULT_DOC_SUBUNIT_ID,
 							commentId: customRange.id
@@ -499,20 +604,27 @@ let DocThreadCommentSelectionController = class DocThreadCommentSelectionControl
 				if (!this._threadCommentPanelService.activeCommentId) return;
 				const addingComment = this._docThreadCommentService.addingComment;
 				const activeComment = this._threadCommentPanelService.activeCommentId;
-				if (addingComment && (activeComment === null || activeComment === void 0 ? void 0 : activeComment.unitId) === addingComment.unitId && (activeComment === null || activeComment === void 0 ? void 0 : activeComment.subUnitId) === "default_doc" && (activeComment === null || activeComment === void 0 ? void 0 : activeComment.commentId) === addingComment.id) return;
+				if (addingComment && (activeComment === null || activeComment === void 0 ? void 0 : activeComment.unitId) === addingComment.unitId && (activeComment === null || activeComment === void 0 ? void 0 : activeComment.subUnitId) === DEFAULT_DOC_SUBUNIT_ID && (activeComment === null || activeComment === void 0 ? void 0 : activeComment.commentId) === addingComment.id) return;
 				this._commandService.executeCommand(SetActiveCommentOperation.id);
 			}
 		}));
 	}
+	_findActiveCommentDecoration(doc, unitId, selectionStart, selectionEnd) {
+		var _doc$getBody;
+		return [...((_doc$getBody = doc.getBody()) === null || _doc$getBody === void 0 ? void 0 : _doc$getBody.customDecorations) ?? []].reverse().filter((decoration) => decoration.type === CustomDecorationType.COMMENT && decoration.startIndex <= selectionStart && decoration.endIndex >= selectionEnd).sort((left, right) => left.endIndex - left.startIndex - (right.endIndex - right.startIndex)).find((decoration) => {
+			const comment = this._threadCommentModel.getComment(unitId, DEFAULT_DOC_SUBUNIT_ID, decoration.id);
+			return comment && !comment.resolved;
+		});
+	}
 	_initActiveCommandChange() {
 		this.disposeWithMe(this._threadCommentPanelService.activeCommentId$.subscribe((activeComment) => {
 			var _this$_docThreadComme;
 			if (activeComment) {
 				const doc = this._univerInstanceService.getUnit(activeComment.unitId);
 				if (doc) {
-					var _this$_renderManagerS, _doc$getBody3;
+					var _this$_renderManagerS, _doc$getBody2;
 					const backScrollController = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(activeComment.unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocBackScrollRenderController);
-					const customRange = (_doc$getBody3 = doc.getBody()) === null || _doc$getBody3 === void 0 || (_doc$getBody3 = _doc$getBody3.customDecorations) === null || _doc$getBody3 === void 0 ? void 0 : _doc$getBody3.find((range) => range.id === activeComment.commentId);
+					const customRange = (_doc$getBody2 = doc.getBody()) === null || _doc$getBody2 === void 0 || (_doc$getBody2 = _doc$getBody2.customDecorations) === null || _doc$getBody2 === void 0 ? void 0 : _doc$getBody2.find((range) => range.id === activeComment.commentId);
 					if (customRange && backScrollController) backScrollController.scrollToRange({
 						startOffset: customRange.startIndex,
 						endOffset: customRange.endIndex,
@@ -535,50 +647,156 @@ DocThreadCommentSelectionController = __decorate([
 
 //#endregion
 //#region src/controllers/render-controllers/render.controller.ts
+const DOC_COMMENT_DRAWING_OVERLAY_KEY = "doc-thread-comment-drawing-overlay";
+const DOC_COMMENT_DRAWING_OVERLAY_LAYER_INDEX = 10100;
 let DocThreadCommentRenderController = class DocThreadCommentRenderController extends Disposable {
-	constructor(_context, _docInterceptorService, _threadCommentPanelService, _docRenderController, _univerInstanceService, _threadCommentModel, _commandService) {
+	constructor(_context, _docInterceptorService, _threadCommentPanelService, _univerInstanceService, _threadCommentModel, _commandService, _drawingManagerService, _themeService) {
 		super();
 		this._context = _context;
 		this._docInterceptorService = _docInterceptorService;
 		this._threadCommentPanelService = _threadCommentPanelService;
-		this._docRenderController = _docRenderController;
 		this._univerInstanceService = _univerInstanceService;
 		this._threadCommentModel = _threadCommentModel;
 		this._commandService = _commandService;
+		this._drawingManagerService = _drawingManagerService;
+		this._themeService = _themeService;
+		_defineProperty(this, "_drawingOverlay", void 0);
+		_defineProperty(this, "_drawingCommentSubUnits", /* @__PURE__ */ new Map());
+		this._drawingOverlay = new ThreadCommentCanvasOverlay(DOC_COMMENT_DRAWING_OVERLAY_KEY, {
+			...this._getDrawingOverlayColors(),
+			zoomRatio: 1,
+			markers: [],
+			underlines: []
+		});
+		this._context.scene.addObject(this._drawingOverlay, DOC_COMMENT_DRAWING_OVERLAY_LAYER_INDEX);
 		this._interceptorViewModel();
 		this._initReRender();
 		this._initSyncComments();
+		this._initDrawingOverlay();
 	}
 	_initReRender() {
-		this.disposeWithMe(this._threadCommentPanelService.activeCommentId$.subscribe((activeComment) => {
+		[this._threadCommentPanelService.activeCommentId$, this._threadCommentPanelService.hoveredCommentId$].forEach((observable) => this.disposeWithMe(observable.pipe(skip(1), startWith(void 0), pairwise()).subscribe(([previous, current]) => {
 			var _this$_univerInstance;
-			if (activeComment) {
-				this._docRenderController.reRender(activeComment.unitId);
-				return;
+			const currentUnitId = (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
+			if ((/* @__PURE__ */ new Set([
+				previous === null || previous === void 0 ? void 0 : previous.unitId,
+				current === null || current === void 0 ? void 0 : current.unitId,
+				currentUnitId
+			])).has(this._context.unitId)) {
+				var _this$_context$mainCo;
+				(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeDirty(true);
 			}
-			const unitId = (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
-			if (unitId) this._docRenderController.reRender(unitId);
-		}));
+		})));
 		this.disposeWithMe(this._threadCommentModel.commentUpdate$.subscribe((update) => {
-			if (update.type === "resolve") this._docRenderController.reRender(update.unitId);
+			if (update.type === "resolve" && update.unitId === this._context.unitId) {
+				var _this$_context$mainCo2;
+				(_this$_context$mainCo2 = this._context.mainComponent) === null || _this$_context$mainCo2 === void 0 || _this$_context$mainCo2.makeDirty(true);
+			}
+			if (update.unitId === this._context.unitId) this._syncDrawingOverlay();
 		}));
 	}
+	_initDrawingOverlay() {
+		this.disposeWithMe(toDisposable(this._drawingOverlay.onPointerDown$.subscribeEvent((_event, state) => {
+			const commentId = this._drawingOverlay.hitCommentId;
+			const subUnitId = commentId && this._drawingCommentSubUnits.get(commentId);
+			if (!commentId || !subUnitId) return;
+			state.stopPropagation();
+			this._commandService.executeCommand(ShowCommentPanelOperation.id, { activeComment: {
+				unitId: this._context.unitId,
+				subUnitId,
+				commentId,
+				trigger: "doc-canvas"
+			} });
+		})));
+		this.disposeWithMe(toDisposable(this._context.engine.onTransformChange$.subscribeEvent(() => this._syncDrawingOverlay())));
+		[this._threadCommentPanelService.activeCommentId$, this._threadCommentPanelService.hoveredCommentId$].forEach((observable) => this.disposeWithMe(observable.subscribe(() => this._syncDrawingOverlay())));
+		[
+			this._drawingManagerService.add$,
+			this._drawingManagerService.update$,
+			this._drawingManagerService.remove$
+		].forEach((observable) => this.disposeWithMe(observable.subscribe((drawings) => {
+			if (drawings.some((drawing) => drawing.unitId === this._context.unitId)) this._syncDrawingOverlay();
+		})));
+		this.disposeWithMe(this._themeService.currentTheme$.subscribe(() => this._syncDrawingOverlay()));
+		this._syncDrawingOverlay();
+	}
+	_syncDrawingOverlay() {
+		const underlines = /* @__PURE__ */ new Map();
+		this._drawingCommentSubUnits.clear();
+		this._threadCommentModel.query({
+			unitIds: [this._context.unitId],
+			anchorKinds: [ThreadCommentAnchorKind.DOC_DRAWING],
+			resolved: false
+		}).forEach(({ root, subUnitId }) => {
+			const anchor = deserializeThreadCommentAnchor(root.ref);
+			if ((anchor === null || anchor === void 0 ? void 0 : anchor.kind) !== ThreadCommentAnchorKind.DOC_DRAWING) return;
+			const outline = this._getDrawingOutline(anchor.pageId ?? subUnitId, anchor.elementId);
+			if (!outline) return;
+			this._drawingCommentSubUnits.set(root.id, subUnitId);
+			underlines.set(`${anchor.pageId ?? subUnitId}\0${anchor.elementId}`, {
+				commentId: root.id,
+				left: outline.left,
+				top: outline.top + outline.height + 2,
+				width: outline.width
+			});
+		});
+		const focusedCommentIds = [];
+		const focusOutlines = /* @__PURE__ */ new Map();
+		[this._threadCommentPanelService.activeCommentId, this._threadCommentPanelService.hoveredCommentId].forEach((target) => {
+			if (!target || target.unitId !== this._context.unitId) return;
+			const comment = this._threadCommentModel.getComment(target.unitId, target.subUnitId, target.commentId);
+			const anchor = comment && deserializeThreadCommentAnchor(comment.ref);
+			if ((anchor === null || anchor === void 0 ? void 0 : anchor.kind) !== ThreadCommentAnchorKind.DOC_DRAWING) return;
+			focusedCommentIds.push(target.commentId);
+			const outline = this._getDrawingOutline(anchor.pageId ?? target.subUnitId, anchor.elementId);
+			if (outline) focusOutlines.set(`${anchor.pageId ?? target.subUnitId}\0${anchor.elementId}`, outline);
+		});
+		this._drawingOverlay.updateState({
+			...this._getDrawingOverlayColors(),
+			markers: [],
+			underlines: Array.from(underlines.values()),
+			focusedCommentIds,
+			focusOutlines: Array.from(focusOutlines.values())
+		});
+	}
+	_getDrawingOutline(subUnitId, drawingId) {
+		var _this$_context$scene$, _this$_context$scene;
+		const objectKey = getDrawingShapeKeyByDrawingSearch({
+			unitId: this._context.unitId,
+			subUnitId,
+			drawingId
+		});
+		const object = ((_this$_context$scene$ = (_this$_context$scene = this._context.scene).getObjectIncludeInGroup) === null || _this$_context$scene$ === void 0 ? void 0 : _this$_context$scene$.call(_this$_context$scene, objectKey)) ?? this._context.scene.getObject(objectKey);
+		if (!object) return null;
+		const bounds = object.getRealBound();
+		return {
+			left: bounds.left,
+			top: bounds.top,
+			width: bounds.width,
+			height: bounds.height
+		};
+	}
+	_getDrawingOverlayColors() {
+		return {
+			accentColor: this._themeService.getColorFromTheme("yellow.400"),
+			foregroundColor: this._themeService.getColorFromTheme("gray.900"),
+			outlineColor: this._themeService.getColorFromTheme("white")
+		};
+	}
 	_interceptorViewModel() {
 		this._docInterceptorService.intercept(DOC_INTERCEPTOR_POINT.CUSTOM_DECORATION, { handler: (data, pos, next) => {
 			if (!data) return next(data);
-			const { unitId, index, customDecorations } = pos;
-			const { commentId, unitId: commentUnitID } = this._threadCommentPanelService.activeCommentId || {};
-			const activeCustomDecoration = customDecorations.find((i) => i.id === commentId);
+			const { unitId } = pos;
+			const focusedComments = [this._threadCommentPanelService.activeCommentId, this._threadCommentPanelService.hoveredCommentId];
 			const comment = this._threadCommentModel.getComment(unitId, DEFAULT_DOC_SUBUNIT_ID, data.id);
 			if (!comment) return next({
 				...data,
 				show: false
 			});
-			const isActiveIndex = activeCustomDecoration && index >= activeCustomDecoration.startIndex && index <= activeCustomDecoration.endIndex;
-			const isActive = commentUnitID === unitId && data.id === commentId;
+			const isActive = focusedComments.some((focusedComment) => (focusedComment === null || focusedComment === void 0 ? void 0 : focusedComment.unitId) === unitId && focusedComment.subUnitId === DEFAULT_DOC_SUBUNIT_ID && focusedComment.commentId === data.id);
 			return next({
 				...data,
-				active: isActive || isActiveIndex,
+				active: isActive,
 				show: !comment.resolved
 			});
 		} });
@@ -588,7 +806,7 @@ let DocThreadCommentRenderController = class DocThreadCommentRenderController ex
 		const unitId = this._context.unit.getUnitId();
 		const subUnitId = DEFAULT_DOC_SUBUNIT_ID;
 		const threadIds = ((_this$_context$unit$g = this._context.unit.getBody()) === null || _this$_context$unit$g === void 0 || (_this$_context$unit$g = _this$_context$unit$g.customDecorations) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.filter((i) => i.type === CustomDecorationType.COMMENT).map((i) => i.id)) ?? [];
-		threadIds.length && this._threadCommentModel.syncThreadComments(this._context.unit.getUnitId(), "default_doc", threadIds);
+		threadIds.length && this._threadCommentModel.syncThreadComments(this._context.unit.getUnitId(), DEFAULT_DOC_SUBUNIT_ID, threadIds);
 		let prevThreadIds = threadIds.sort();
 		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
 			if (commandInfo.id === RichTextEditingMutation.id) {
@@ -612,10 +830,11 @@ let DocThreadCommentRenderController = class DocThreadCommentRenderController ex
 DocThreadCommentRenderController = __decorate([
 	__decorateParam(1, Inject(DocInterceptorService)),
 	__decorateParam(2, Inject(ThreadCommentPanelService)),
-	__decorateParam(3, Inject(DocRenderController)),
-	__decorateParam(4, IUniverInstanceService),
-	__decorateParam(5, Inject(ThreadCommentModel)),
-	__decorateParam(6, ICommandService)
+	__decorateParam(3, IUniverInstanceService),
+	__decorateParam(4, Inject(ThreadCommentModel)),
+	__decorateParam(5, ICommandService),
+	__decorateParam(6, IDrawingManagerService),
+	__decorateParam(7, Inject(ThemeService))
 ], DocThreadCommentRenderController);
 
 //#endregion
@@ -645,6 +864,7 @@ let DocThreadCommentUIController = class DocThreadCommentUIController extends Di
 	}
 	_initCommands() {
 		[
+			AddDocDrawingCommentOperation,
 			AddDocCommentComment,
 			DeleteDocCommentComment,
 			ShowCommentPanelOperation,
@@ -663,6 +883,11 @@ DocThreadCommentUIController = __decorate([__decorateParam(0, ICommandService),
 
 //#endregion
 //#region src/plugin.ts
+const STARTING_DEPENDENCIES = [
+	[DocThreadCommentUIController],
+	[DocThreadCommentSelectionController],
+	[DocThreadCommentService]
+];
 let UniverDocsThreadCommentUIPlugin = class UniverDocsThreadCommentUIPlugin extends Plugin {
 	constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _configService) {
 		super();
@@ -677,11 +902,7 @@ let UniverDocsThreadCommentUIPlugin = class UniverDocsThreadCommentUIPlugin exte
 	onStarting() {
 		this._injector.add([ComponentsController]);
 		this._injector.get(ComponentsController);
-		[
-			[DocThreadCommentUIController],
-			[DocThreadCommentSelectionController],
-			[DocThreadCommentService]
-		].forEach((dep) => {
+		STARTING_DEPENDENCIES.forEach((dep) => {
 			this._injector.add(dep);
 		});
 	}
@@ -691,9 +912,7 @@ let UniverDocsThreadCommentUIPlugin = class UniverDocsThreadCommentUIPlugin exte
 		this._injector.get(DocThreadCommentUIController);
 	}
 	_initRenderModule() {
-		[DocThreadCommentRenderController].forEach((dep) => {
-			this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, dep);
-		});
+		this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, [DocThreadCommentRenderController]);
 	}
 };
 _defineProperty(UniverDocsThreadCommentUIPlugin, "pluginName", PLUGIN_NAME);
@@ -701,7 +920,7 @@ _defineProperty(UniverDocsThreadCommentUIPlugin, "packageName", name);
 _defineProperty(UniverDocsThreadCommentUIPlugin, "version", version);
 _defineProperty(UniverDocsThreadCommentUIPlugin, "type", UniverInstanceType.UNIVER_DOC);
 UniverDocsThreadCommentUIPlugin = __decorate([
-	DependentOn(UniverDocsPlugin, UniverThreadCommentPlugin, UniverRenderEnginePlugin, UniverDocsUIPlugin, UniverThreadCommentUIPlugin),
+	DependentOn(UniverDocsPlugin, UniverDocsThreadCommentPlugin, UniverThreadCommentPlugin, UniverDrawingPlugin, UniverRenderEnginePlugin, UniverDocsUIPlugin, UniverThreadCommentUIPlugin),
 	__decorateParam(1, Inject(Injector)),
 	__decorateParam(2, IRenderManagerService),
 	__decorateParam(3, IConfigService)