@vervedoc/docx-editor-comment 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,802 @@
1
+ const j = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399", "#00BCD4", "#9C27B0"], w = "ce";
2
+ function B(T) {
3
+ let e = 0;
4
+ for (let n = 0; n < T.length; n++)
5
+ e = T.charCodeAt(n) + ((e << 5) - e);
6
+ return j[Math.abs(e) % j.length];
7
+ }
8
+ function P(T) {
9
+ if (!T) return "";
10
+ try {
11
+ const e = new Date(T);
12
+ if (isNaN(e.getTime())) return T;
13
+ const n = e.getFullYear(), t = String(e.getMonth() + 1).padStart(2, "0"), o = String(e.getDate()).padStart(2, "0"), i = String(e.getHours()).padStart(2, "0"), s = String(e.getMinutes()).padStart(2, "0");
14
+ return `${n}-${t}-${o} ${i}:${s}`;
15
+ } catch {
16
+ return T;
17
+ }
18
+ }
19
+ class K {
20
+ constructor() {
21
+ this._command = null, this._comments = [], this._callbacks = {}, this._overlayContainer = null, this._svgEl = null, this._cardDoms = /* @__PURE__ */ new Map(), this._activeMenuId = null;
22
+ }
23
+ get _annotationColor() {
24
+ var e, n, t;
25
+ return ((t = (n = (e = this._command) == null ? void 0 : e.getOptions) == null ? void 0 : n.call(e)) == null ? void 0 : t.annotationColor) || "#409eff";
26
+ }
27
+ install(e, n) {
28
+ return this._command = e, n && (this._callbacks = n), this;
29
+ }
30
+ getComments() {
31
+ return this._comments;
32
+ }
33
+ setComments(e) {
34
+ this._comments = e;
35
+ }
36
+ addComment(e = "当前用户") {
37
+ var o, i;
38
+ if (!this._command) return null;
39
+ const n = (i = (o = this._command).executeSetGroup) == null ? void 0 : i.call(o);
40
+ if (!n) return null;
41
+ const t = {
42
+ id: n,
43
+ groupId: n,
44
+ content: "",
45
+ userName: e,
46
+ createdDate: P((/* @__PURE__ */ new Date()).toISOString()),
47
+ rangeText: "",
48
+ isEditing: !0
49
+ };
50
+ return this._comments.push(t), t;
51
+ }
52
+ deleteComment(e) {
53
+ var t, o, i, s;
54
+ const n = this._comments.findIndex((r) => r.id === e);
55
+ if (n !== -1) {
56
+ const r = this._comments[n];
57
+ this._comments.splice(n, 1), (o = (t = this._command) == null ? void 0 : t.executeDeleteGroup) == null || o.call(t, r.groupId), (s = (i = this._callbacks).onDelete) == null || s.call(i, e);
58
+ }
59
+ }
60
+ locateComment(e) {
61
+ var t, o;
62
+ const n = this._comments.find((i) => i.id === e);
63
+ n && ((o = (t = this._command) == null ? void 0 : t.executeLocationGroup) == null || o.call(t, n.groupId));
64
+ }
65
+ saveComment(e) {
66
+ const n = this._comments.findIndex((t) => t.id === e.id);
67
+ n !== -1 && (this._comments[n] = { ...e, isEditing: !1 });
68
+ }
69
+ cancelComment(e) {
70
+ var o, i;
71
+ const n = this._comments.findIndex((s) => s.id === e);
72
+ if (n === -1) return;
73
+ const t = this._comments[n];
74
+ t.content ? t.isEditing = !1 : (this._comments.splice(n, 1), (i = (o = this._command) == null ? void 0 : o.executeDeleteGroup) == null || i.call(o, t.groupId));
75
+ }
76
+ replyToComment(e, n, t = "当前用户") {
77
+ const o = this._comments.find((i) => i.id === e);
78
+ o && (o.replies || (o.replies = []), o.replies.push({
79
+ id: `reply-${Date.now()}`,
80
+ groupId: o.groupId,
81
+ content: n,
82
+ userName: t,
83
+ avatarColor: B(t),
84
+ createdDate: P((/* @__PURE__ */ new Date()).toISOString()),
85
+ rangeText: ""
86
+ }));
87
+ }
88
+ resolveComment(e, n) {
89
+ const t = this._comments.find((o) => o.id === e);
90
+ t && (t.status = n ? 2 : 1);
91
+ }
92
+ serializeComments() {
93
+ return this._comments.map((e) => {
94
+ var n;
95
+ return {
96
+ id: e.id,
97
+ groupId: e.groupId,
98
+ content: e.content,
99
+ userName: e.userName,
100
+ avatarColor: e.avatarColor,
101
+ createdDate: e.createdDate,
102
+ rangeText: e.rangeText || "",
103
+ status: e.status,
104
+ replies: (n = e.replies) == null ? void 0 : n.map((t) => ({
105
+ id: t.id,
106
+ groupId: t.groupId,
107
+ content: t.content,
108
+ userName: t.userName,
109
+ avatarColor: t.avatarColor,
110
+ createdDate: t.createdDate,
111
+ rangeText: t.rangeText || ""
112
+ }))
113
+ };
114
+ });
115
+ }
116
+ restoreComments(e) {
117
+ const n = [];
118
+ for (const t of e) {
119
+ if (!t || typeof t != "object") continue;
120
+ const o = String(t.id || "").trim(), i = String(t.groupId || o).trim();
121
+ o && n.push({
122
+ id: o,
123
+ groupId: i,
124
+ content: String(t.content || ""),
125
+ userName: String(t.userName || "未知用户"),
126
+ avatarColor: t.avatarColor || B(String(t.userName || "")),
127
+ createdDate: String(t.createdDate || ""),
128
+ rangeText: String(t.rangeText || ""),
129
+ status: t.status
130
+ });
131
+ }
132
+ this._comments = n;
133
+ }
134
+ buildCommentsFromMetas(e) {
135
+ const n = [];
136
+ for (const t of e) {
137
+ const o = "comment_" + t.id;
138
+ n.push({
139
+ id: o,
140
+ groupId: o,
141
+ content: t.content,
142
+ userName: t.author || "未知用户",
143
+ avatarColor: B(t.author || ""),
144
+ createdDate: P(t.date || ""),
145
+ rangeText: ""
146
+ });
147
+ }
148
+ this._comments = n;
149
+ }
150
+ _getPageOffsetY(e) {
151
+ var i, s, r, d, c, a;
152
+ const n = (s = (i = this._command) == null ? void 0 : i.getContainer) == null ? void 0 : s.call(i);
153
+ if (n) {
154
+ const l = n.querySelectorAll("canvas[data-index]");
155
+ if (l.length > e) {
156
+ const h = l[e];
157
+ if (h && h.offsetTop !== void 0)
158
+ return h.offsetTop;
159
+ }
160
+ }
161
+ const t = ((d = (r = this._command) == null ? void 0 : r.getDrawHeight) == null ? void 0 : d.call(r)) || 1123, o = ((a = (c = this._command) == null ? void 0 : c.getPageGap) == null ? void 0 : a.call(c)) ?? 0;
162
+ return e * (t + o);
163
+ }
164
+ _computePositions() {
165
+ var s, r, d, c, a, l, h, p, m, k, L, R, S, W, $, y, E, b;
166
+ if (!this._command || this._comments.length === 0) return;
167
+ const e = (r = (s = this._command).getPositionList) == null ? void 0 : r.call(s);
168
+ if (!e || e.length === 0) return;
169
+ const n = ((c = (d = this._command).getDrawWidth) == null ? void 0 : c.call(d)) || 794;
170
+ (l = (a = this._command).getDrawHeight) != null && l.call(a), (p = (h = this._command).getPageGap) == null || p.call(h);
171
+ const t = n + 16;
172
+ for (const g of this._comments) {
173
+ const f = (k = (m = this._command) == null ? void 0 : m.getGroupContext) == null ? void 0 : k.call(m, g.groupId);
174
+ if (!f) continue;
175
+ const v = f.isTable ? f.index ?? -1 : f.startIndex ?? -1, x = f.isTable ? f.index : f.endIndex;
176
+ if (v == null || v < 0 || v >= e.length) continue;
177
+ const u = e[v];
178
+ if (!(u != null && u.coordinate)) continue;
179
+ const I = u.pageNo ?? 0, A = this._getPageOffsetY(I) + (((L = u.coordinate.leftTop) == null ? void 0 : L[1]) || 0), _ = ((R = u.coordinate.leftTop) == null ? void 0 : R[0]) || 0, Y = A;
180
+ let z = ((S = u.coordinate.rightBottom) == null ? void 0 : S[0]) || ((W = u.coordinate.rightTop) == null ? void 0 : W[0]) || _, M = A + (u.lineHeight || 20);
181
+ if (x != null && x >= 0 && x < e.length) {
182
+ const C = e[x];
183
+ if (C != null && C.coordinate) {
184
+ const H = C.pageNo ?? 0, N = this._getPageOffsetY(H);
185
+ z = (($ = C.coordinate.rightBottom) == null ? void 0 : $[0]) || ((y = C.coordinate.rightTop) == null ? void 0 : y[0]) || _, M = N + (((E = C.coordinate.leftBottom) == null ? void 0 : E[1]) || ((b = C.coordinate.leftTop) == null ? void 0 : b[1]) || 0);
186
+ }
187
+ }
188
+ g.position = { top: A, left: t, lineWidth: 0, originalTop: A }, g.anchor = { startX: _, startY: Y, endX: z, endY: M, lineHeight: u.lineHeight || 20 };
189
+ }
190
+ const o = this._comments.filter((g) => g.position).sort((g, f) => g.position.top - f.position.top), i = 80;
191
+ for (let g = 1; g < o.length; g++) {
192
+ const f = o[g - 1], v = o[g];
193
+ v.position.top - f.position.top < i && (v.position.top = f.position.top + i);
194
+ }
195
+ }
196
+ render() {
197
+ var t, o;
198
+ if (!this._command) return;
199
+ const e = (o = (t = this._command).getOptions) == null ? void 0 : o.call(t);
200
+ if ((e == null ? void 0 : e.showCommentBalloons) === !1) {
201
+ this._clearCards(), this._restoreContainerWidth();
202
+ return;
203
+ }
204
+ this._computePositions();
205
+ const n = this._comments.filter((i) => i.position);
206
+ if (n.length === 0) {
207
+ this._clearCards(), this._restoreContainerWidth();
208
+ return;
209
+ }
210
+ this._overlayContainer || this._createOverlayContainer(), this._expandContainerWidth(n), this._renderCards(n);
211
+ }
212
+ _createOverlayContainer() {
213
+ var o, i;
214
+ if (!this._command) return;
215
+ const e = (i = (o = this._command).getContainer) == null ? void 0 : i.call(o);
216
+ if (!e) return;
217
+ const n = document.createElement("div");
218
+ n.classList.add(`${w}-comment-overlay`), n.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:visible;";
219
+ const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
220
+ t.classList.add(`${w}-comment-lines`), t.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;", n.append(t), e.append(n), this._overlayContainer = n, this._svgEl = t;
221
+ }
222
+ _clearCards() {
223
+ for (const e of this._cardDoms.values())
224
+ e.remove();
225
+ if (this._cardDoms.clear(), this._svgEl)
226
+ for (; this._svgEl.firstChild; ) this._svgEl.removeChild(this._svgEl.firstChild);
227
+ }
228
+ _expandContainerWidth(e) {
229
+ var r, d, c, a;
230
+ if (!this._command || e.length === 0) return;
231
+ const n = (d = (r = this._command).getContainer) == null ? void 0 : d.call(r);
232
+ if (!n) return;
233
+ const t = ((a = (c = this._command).getDrawWidth) == null ? void 0 : a.call(c)) || 794, s = t + 16 + 300 + 16;
234
+ n.__commentNeededWidth = s, this._applyContainerWidth(n, t);
235
+ }
236
+ _restoreContainerWidth() {
237
+ var t, o, i, s;
238
+ if (!this._command) return;
239
+ const e = (o = (t = this._command).getContainer) == null ? void 0 : o.call(t);
240
+ if (!e) return;
241
+ const n = ((s = (i = this._command).getDrawWidth) == null ? void 0 : s.call(i)) || 794;
242
+ e.__commentNeededWidth = 0, this._applyContainerWidth(e, n);
243
+ }
244
+ _applyContainerWidth(e, n) {
245
+ const t = e.__commentNeededWidth || 0, o = e.__revisionNeededWidth || 0, i = Math.max(t, o);
246
+ i > n ? (e.style.width = `${i}px`, e.style.minWidth = `${i}px`) : (e.style.width = `${n}px`, e.style.minWidth = "");
247
+ }
248
+ _renderLines(e) {
249
+ var d, c, a, l, h, p;
250
+ if (!this._svgEl) return;
251
+ for (; this._svgEl.firstChild; ) this._svgEl.removeChild(this._svgEl.firstChild);
252
+ const n = (c = (d = this._command) == null ? void 0 : d.getContainer) == null ? void 0 : c.call(d);
253
+ if (!n) return;
254
+ const t = n.getBoundingClientRect(), o = Math.ceil(t.width), i = Math.ceil(t.height);
255
+ o > 0 && i > 0 && (this._svgEl.setAttribute("viewBox", `0 0 ${o} ${i}`), this._svgEl.setAttribute("width", String(o)), this._svgEl.setAttribute("height", String(i)));
256
+ const s = ((l = (a = this._command) == null ? void 0 : a.getDrawWidth) == null ? void 0 : l.call(a)) || 794;
257
+ (p = (h = this._command) == null ? void 0 : h.getOptions) == null || p.call(h);
258
+ const r = this._annotationColor;
259
+ for (const m of e) {
260
+ if (!m.anchor || !m.position) continue;
261
+ const { startX: k, startY: L, endX: R, endY: S } = m.anchor, W = m.position.top, $ = m.position.left, y = k, E = L, b = E + (m.anchor.lineHeight || 20), g = s, f = W + 12;
262
+ let v;
263
+ f > S ? v = [
264
+ `${y},${E}`,
265
+ `${y},${b}`,
266
+ `${g},${b}`,
267
+ `${g},${f}`,
268
+ `${$},${f}`
269
+ ].join(" ") : f < E ? v = [
270
+ `${y},${E}`,
271
+ `${y},${b}`,
272
+ `${g},${b}`,
273
+ `${g},${f}`,
274
+ `${$},${f}`
275
+ ].join(" ") : v = [
276
+ `${y},${E}`,
277
+ `${y},${b}`,
278
+ `${g},${b}`,
279
+ `${$},${f}`
280
+ ].join(" ");
281
+ const x = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
282
+ x.setAttribute("points", v), x.setAttribute("fill", "none"), x.setAttribute("stroke", r), x.setAttribute("stroke-width", "1"), x.setAttribute("stroke-dasharray", "4,3"), this._svgEl.append(x);
283
+ }
284
+ }
285
+ _renderCards(e) {
286
+ if (!this._overlayContainer) return;
287
+ const n = new Set(e.map((t) => t.id));
288
+ for (const [t, o] of this._cardDoms)
289
+ n.has(t) || (o.remove(), this._cardDoms.delete(t));
290
+ this._renderLines(e);
291
+ for (const t of e) {
292
+ let o = this._cardDoms.get(t.id);
293
+ o ? this._updateCardDom(o, t) : (o = this._createCardDom(t), this._overlayContainer.append(o), this._cardDoms.set(t.id, o)), o.style.top = `${t.position.top}px`, o.style.left = `${t.position.left}px`;
294
+ }
295
+ }
296
+ _createCardDom(e) {
297
+ const n = document.createElement("div");
298
+ n.style.cssText = "position:absolute;pointer-events:auto;transition:all 0.2s ease;";
299
+ const t = document.createElement("div");
300
+ t.classList.add(`${w}-comment-card`), t.dataset.commentId = e.id, this._applyCardStyle(t, e);
301
+ const o = document.createElement("div");
302
+ o.style.cssText = "display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;";
303
+ const i = document.createElement("div");
304
+ i.style.cssText = "display:flex;align-items:center;gap:8px;";
305
+ const s = document.createElement("div");
306
+ s.style.cssText = `width:28px;height:28px;border-radius:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;flex-shrink:0;background:${e.avatarColor || B(e.userName)};`, s.textContent = e.userName.charAt(0);
307
+ const r = document.createElement("span");
308
+ r.style.cssText = "font-weight:600;font-size:13px;color:#1f1f1f;", r.textContent = e.userName, i.append(s, r);
309
+ const d = document.createElement("div");
310
+ if (d.style.cssText = "display:flex;align-items:center;gap:4px;position:relative;", e.status === 2) {
311
+ const h = document.createElement("span");
312
+ h.style.cssText = "font-size:10px;color:#67c23a;background:#f0f9eb;padding:2px 6px;border-radius:10px;white-space:nowrap;", h.textContent = "已解决", d.append(h);
313
+ }
314
+ const c = document.createElement("span");
315
+ c.style.cssText = "font-size:11px;color:#9e9e9e;white-space:nowrap;", c.textContent = e.createdDate;
316
+ const a = document.createElement("button");
317
+ a.title = "更多操作", a.style.cssText = "display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:50%;cursor:pointer;color:#9e9e9e;transition:all 0.15s ease;padding:0;flex-shrink:0;", a.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="19" r="1.5" fill="currentColor"/></svg>', a.addEventListener("mouseenter", () => {
318
+ a.style.background = "#f0f0f0", a.style.color = "#666";
319
+ }), a.addEventListener("mouseleave", () => {
320
+ a.style.background = "transparent", a.style.color = "#9e9e9e";
321
+ }), a.addEventListener("click", (h) => {
322
+ h.stopPropagation(), this._toggleMenu(e.id);
323
+ }), d.append(c, a), o.append(i, d);
324
+ const l = document.createElement("div");
325
+ return l.classList.add(`${w}-comment-body`), this._renderCardBody(l, e), t.append(o, l), n.append(t), n;
326
+ }
327
+ _renderCardBody(e, n) {
328
+ if (e.innerHTML = "", n.isEditing) {
329
+ const o = document.createElement("div");
330
+ o.style.cssText = "margin:8px 0;";
331
+ const i = document.createElement("textarea");
332
+ i.classList.add(`${w}-comment-textarea`), i.placeholder = "请输入批注内容...", i.rows = 3, i.value = n.content, i.style.cssText = "width:93%;min-height:80px;padding:8px 10px;border:1px solid #dcdfe6;border-radius:6px;font-size:13px;font-family:inherit;line-height:1.6;resize:vertical;outline:none;transition:border-color 0.2s ease;", i.addEventListener("input", () => {
333
+ n.content = i.value;
334
+ }), i.addEventListener("keydown", (c) => {
335
+ c.ctrlKey && c.key === "Enter" && this._handleSave(n);
336
+ }), i.addEventListener("focus", () => {
337
+ i.style.borderColor = this._annotationColor;
338
+ }), i.addEventListener("blur", () => {
339
+ i.style.borderColor = "#dcdfe6";
340
+ });
341
+ const s = document.createElement("div");
342
+ s.style.cssText = "display:flex;gap:8px;justify-content:flex-end;margin-top:8px;";
343
+ const r = document.createElement("button");
344
+ r.textContent = "保存", r.style.cssText = `padding:5px 14px;font-size:12px;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-weight:500;background:${this._annotationColor};color:#fff;`, r.addEventListener("click", () => this._handleSave(n)), r.addEventListener("mouseenter", () => {
345
+ r.style.background = "#66b1ff";
346
+ }), r.addEventListener("mouseleave", () => {
347
+ r.style.background = this._annotationColor;
348
+ });
349
+ const d = document.createElement("button");
350
+ d.textContent = "取消", d.style.cssText = "padding:5px 14px;font-size:12px;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-weight:500;background:#f5f5f5;color:#666;", d.addEventListener("click", () => this._handleCancel(n)), d.addEventListener("mouseenter", () => {
351
+ d.style.background = "#e8e8e8";
352
+ }), d.addEventListener("mouseleave", () => {
353
+ d.style.background = "#f5f5f5", d.style.color = "#666";
354
+ }), s.append(r, d), o.append(i, s), e.append(o), setTimeout(() => i.focus(), 50);
355
+ return;
356
+ }
357
+ const t = document.createElement("div");
358
+ if (t.style.cssText = "font-size:13px;color:#444;line-height:1.4;word-break:break-word;cursor:pointer;padding:2px 0;", t.textContent = n.content, t.addEventListener("dblclick", () => {
359
+ n.isEditing = !0, this._refreshCard(n.id);
360
+ }), t.addEventListener("mouseenter", () => {
361
+ t.style.background = "#f8f8f8", t.style.borderRadius = "4px";
362
+ }), t.addEventListener("mouseleave", () => {
363
+ t.style.background = "transparent";
364
+ }), e.append(t), n.replies && n.replies.length > 0) {
365
+ const o = document.createElement("div");
366
+ o.style.cssText = "margin-top:8px;padding-top:8px;border-top:1px solid #f0f0f0;";
367
+ for (const i of n.replies) {
368
+ const s = document.createElement("div");
369
+ s.style.cssText = "display:flex;align-items:flex-start;gap:8px;padding:6px 0;";
370
+ const r = document.createElement("div");
371
+ r.style.cssText = "width:2px;background:#e4e7ed;border-radius:1px;flex-shrink:0;align-self:stretch;";
372
+ const d = document.createElement("div");
373
+ d.style.cssText = `width:22px;height:22px;border-radius:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:10px;flex-shrink:0;background:${i.avatarColor || "#909399"};`, d.textContent = i.userName.charAt(0);
374
+ const c = document.createElement("div");
375
+ c.style.cssText = "flex:1;min-width:0;";
376
+ const a = document.createElement("div");
377
+ a.style.cssText = "display:flex;align-items:center;gap:8px;margin-bottom:4px;";
378
+ const l = document.createElement("span");
379
+ l.style.cssText = "font-size:12px;font-weight:600;color:#303133;", l.textContent = i.userName;
380
+ const h = document.createElement("span");
381
+ h.style.cssText = "font-size:10px;color:#c0c4cc;", h.textContent = i.createdDate, a.append(l, h);
382
+ const p = document.createElement("div");
383
+ p.style.cssText = "font-size:12px;color:#606266;line-height:1.5;word-break:break-word;", p.textContent = i.content, c.append(a, p), s.append(r, d, c), o.append(s);
384
+ }
385
+ e.append(o);
386
+ }
387
+ n.isReplying && this._renderReplyInput(e, n);
388
+ }
389
+ _renderReplyInput(e, n) {
390
+ const t = document.createElement("div");
391
+ t.style.cssText = "margin:8px 0;";
392
+ const o = document.createElement("textarea");
393
+ o.placeholder = "输入回复...", o.rows = 2, o.style.cssText = "width:93%;min-height:50px;padding:8px 10px;border:1px solid #dcdfe6;border-radius:6px;font-size:13px;font-family:inherit;line-height:1.6;resize:vertical;outline:none;transition:border-color 0.2s ease;", o.addEventListener("focus", () => {
394
+ o.style.borderColor = this._annotationColor;
395
+ }), o.addEventListener("blur", () => {
396
+ o.style.borderColor = "#dcdfe6";
397
+ });
398
+ const i = document.createElement("div");
399
+ i.style.cssText = "display:flex;gap:8px;justify-content:flex-end;margin-top:8px;";
400
+ const s = document.createElement("button");
401
+ s.textContent = "回复", s.style.cssText = `padding:5px 14px;font-size:12px;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-weight:500;background:${this._annotationColor};color:#fff;`, s.addEventListener("mouseenter", () => {
402
+ s.style.background = "#66b1ff";
403
+ }), s.addEventListener("mouseleave", () => {
404
+ s.style.background = this._annotationColor;
405
+ });
406
+ const r = document.createElement("button");
407
+ r.textContent = "取消", r.style.cssText = "padding:5px 14px;font-size:12px;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-weight:500;background:#f5f5f5;color:#666;", r.addEventListener("mouseenter", () => {
408
+ r.style.background = "#e8e8e8";
409
+ }), r.addEventListener("mouseleave", () => {
410
+ r.style.background = "#f5f5f5", r.style.color = "#666";
411
+ });
412
+ const d = () => {
413
+ var a, l, h, p;
414
+ const c = o.value.trim();
415
+ c && (n.isReplying = !1, this.replyToComment(n.id, c), (l = (a = this._callbacks).onReply) == null || l.call(a, n.id, c), (p = (h = this._callbacks).onRequestSave) == null || p.call(h), this._refreshCard(n.id));
416
+ };
417
+ s.addEventListener("click", d), o.addEventListener("keydown", (c) => {
418
+ c.ctrlKey && c.key === "Enter" && d();
419
+ }), r.addEventListener("click", () => {
420
+ n.isReplying = !1, this._refreshCard(n.id);
421
+ }), i.append(s, r), t.append(o, i), e.append(t), setTimeout(() => o.focus(), 50);
422
+ }
423
+ _applyCardStyle(e, n) {
424
+ const t = this._annotationColor, o = n.status === 2 ? "#67c23a" : t;
425
+ let i = `min-width:240px;max-width:300px;border-radius:0;padding:6px 10px;transition:all 0.2s ease;background:#fff;border:1px solid #e8e8e8;border-left:3px solid ${o};box-shadow:0 2px 8px rgba(0,0,0,0.06);`;
426
+ n.status === 2 && (i += "opacity:0.65;"), n.isEditing && (i += `border-color:${o};box-shadow:0 4px 16px rgba(64,158,255,0.15);background:#fafcff;`), e.style.cssText = i;
427
+ }
428
+ _updateCardDom(e, n) {
429
+ const t = e.querySelector(`.${w}-comment-card`);
430
+ if (!t) return;
431
+ this._applyCardStyle(t, n);
432
+ const o = t.querySelector(":scope > div:first-child");
433
+ if (o) {
434
+ const s = o.querySelector(":scope > div:last-child");
435
+ if (s) {
436
+ const r = s.querySelector(".resolved-badge");
437
+ if (n.status === 2 && !r) {
438
+ const d = document.createElement("span");
439
+ d.classList.add("resolved-badge"), d.style.cssText = "font-size:11px;color:#67c23a;background:#f0f9eb;padding:1px 6px;border-radius:3px;white-space:nowrap;", d.textContent = "已解决", s.insertBefore(d, s.firstChild);
440
+ } else n.status !== 2 && r && r.remove();
441
+ }
442
+ }
443
+ const i = t.querySelector(`.${w}-comment-body`);
444
+ i && this._renderCardBody(i, n);
445
+ }
446
+ _refreshCard(e) {
447
+ const n = this._comments.find((o) => o.id === e);
448
+ if (!n) return;
449
+ const t = this._cardDoms.get(e);
450
+ t && this._updateCardDom(t, n);
451
+ }
452
+ _handleSave(e) {
453
+ var n, t, o, i;
454
+ if (!e.content.trim()) {
455
+ this._handleCancel(e);
456
+ return;
457
+ }
458
+ e.isEditing = !1, (t = (n = this._callbacks).onSave) == null || t.call(n, e), (i = (o = this._callbacks).onRequestSave) == null || i.call(o), this._refreshCard(e.id);
459
+ }
460
+ _handleCancel(e) {
461
+ var n, t, o, i;
462
+ e.content ? (e.isEditing = !1, this._refreshCard(e.id)) : (this.cancelComment(e.id), (t = (n = this._callbacks).onCancel) == null || t.call(n, e.id), (i = (o = this._callbacks).onRequestSave) == null || i.call(o), this.render());
463
+ }
464
+ _toggleMenu(e) {
465
+ this._closeMenu(), this._activeMenuId = e;
466
+ const n = this._cardDoms.get(e);
467
+ if (!n) return;
468
+ const t = n.querySelector(`.${w}-comment-card`);
469
+ if (!t) return;
470
+ const o = t.querySelector(":scope > div:first-child > div:last-child");
471
+ if (!o) return;
472
+ const i = this._comments.find((c) => c.id === e);
473
+ if (!i) return;
474
+ const s = document.createElement("div");
475
+ s.classList.add(`${w}-comment-menu`), s.style.cssText = "position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.1);padding:4px 0;z-index:100;min-width:120px;";
476
+ const r = [
477
+ { label: "编辑", action: () => {
478
+ i.isEditing = !0, this._refreshCard(e);
479
+ } },
480
+ { label: "回复", action: () => {
481
+ i.isReplying = !0, this._refreshCard(e);
482
+ } },
483
+ { label: i.status === 2 ? "重新打开" : "解决", action: () => {
484
+ var a, l, h, p;
485
+ const c = i.status !== 2;
486
+ this.resolveComment(e, c), (l = (a = this._callbacks).onResolve) == null || l.call(a, e, c), (p = (h = this._callbacks).onRequestSave) == null || p.call(h), this.render();
487
+ } },
488
+ { label: "删除", action: () => {
489
+ var c, a;
490
+ this.deleteComment(e), (a = (c = this._callbacks).onRequestSave) == null || a.call(c), this.render();
491
+ }, isDelete: !0 }
492
+ ];
493
+ for (const c of r) {
494
+ const a = document.createElement("button");
495
+ a.style.cssText = `display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:none;cursor:pointer;font-size:13px;color:${c.isDelete ? "#e53935" : "#444"};transition:all 0.15s ease;text-align:left;border-radius:4px;margin:0 4px;width:calc(100% - 8px);`, a.textContent = c.label, a.addEventListener("click", (l) => {
496
+ l.stopPropagation(), this._closeMenu(), c.action();
497
+ }), a.addEventListener("mouseenter", () => {
498
+ c.isDelete ? a.style.background = "#fce4ec" : (a.style.background = "#f5f5f5", a.style.color = "#1f1f1f");
499
+ }), a.addEventListener("mouseleave", () => {
500
+ a.style.background = "none", a.style.color = c.isDelete ? "#e53935" : "#444";
501
+ }), s.append(a);
502
+ }
503
+ o.append(s);
504
+ const d = (c) => {
505
+ c.target.closest(`.${w}-comment-menu`) || (this._closeMenu(), document.removeEventListener("click", d));
506
+ };
507
+ setTimeout(() => document.addEventListener("click", d), 0);
508
+ }
509
+ _closeMenu() {
510
+ const e = document.querySelector(`.${w}-comment-menu`);
511
+ e && e.remove(), this._activeMenuId = null;
512
+ }
513
+ destroy() {
514
+ this._clearCards(), this._restoreContainerWidth(), this._overlayContainer && (this._overlayContainer.remove(), this._overlayContainer = null), this._svgEl = null, this._closeMenu(), this._comments = [], this._command = null;
515
+ }
516
+ }
517
+ const O = "ce";
518
+ class U {
519
+ constructor() {
520
+ this._command = null, this._container = null, this._overlayContainer = null, this._svgEl = null, this._balloonDoms = /* @__PURE__ */ new Map(), this._callbacks = {};
521
+ }
522
+ get _revisionColor() {
523
+ var e, n, t;
524
+ return ((t = (n = (e = this._command) == null ? void 0 : e.getOptions) == null ? void 0 : n.call(e)) == null ? void 0 : t.revisionColor) || "#e60000";
525
+ }
526
+ install(e, n) {
527
+ var o;
528
+ this._command = e, n && (this._callbacks = n);
529
+ const t = (o = e.getContainer) == null ? void 0 : o.call(e);
530
+ return t && (this._container = t, this._overlayContainer = this._createOverlayContainer(), this._svgEl = this._createSvg(), this._overlayContainer.append(this._svgEl), this._container.append(this._overlayContainer)), this;
531
+ }
532
+ _createOverlayContainer() {
533
+ const e = document.createElement("div");
534
+ return e.classList.add(`${O}-revision-overlay`), e.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:visible;", e;
535
+ }
536
+ _createSvg() {
537
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
538
+ return e.classList.add(`${O}-revision-lines`), e.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;", e;
539
+ }
540
+ _formatDate(e) {
541
+ if (!e) return "";
542
+ try {
543
+ const n = new Date(e);
544
+ if (isNaN(n.getTime())) return e;
545
+ const t = n.getFullYear(), o = String(n.getMonth() + 1).padStart(2, "0"), i = String(n.getDate()).padStart(2, "0"), s = String(n.getHours()).padStart(2, "0"), r = String(n.getMinutes()).padStart(2, "0");
546
+ return `${t}-${o}-${i} ${s}:${r}`;
547
+ } catch {
548
+ return e;
549
+ }
550
+ }
551
+ _createBalloonDom(e) {
552
+ const n = document.createElement("div");
553
+ n.classList.add(`${O}-revision-balloon`), n.style.cssText = `position:absolute;pointer-events:auto;min-width:240px;max-width:300px;padding:6px 10px;background:#fff;border:1px solid #e8e8e8;border-left:3px solid ${this._revisionColor};border-radius:0;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);`, n.style.top = `${e.top}px`, n.style.left = `${e.left}px`;
554
+ const t = document.createElement("div");
555
+ t.style.cssText = "display:flex;align-items:center;justify-content:flex-start;margin-bottom:6px;gap:8px;";
556
+ const o = document.createElement("span");
557
+ o.style.cssText = `color:${this._revisionColor};font-weight:600;font-size:13px;white-space:nowrap;`, o.textContent = e.author || "未知";
558
+ const i = document.createElement("span");
559
+ i.style.cssText = "color:#9e9e9e;font-size:11px;white-space:nowrap;", i.textContent = this._formatDate(e.date);
560
+ const s = document.createElement("div");
561
+ s.style.cssText = "display:flex;gap:4px;flex-shrink:0;margin-left:auto;";
562
+ const r = document.createElement("button");
563
+ r.title = "接受修订", r.style.cssText = "display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:0;cursor:pointer;transition:background 0.15s;color:#52c41a;font-size:14px;", r.textContent = "✓", r.addEventListener("mouseenter", () => {
564
+ r.style.background = "#f6ffed";
565
+ }), r.addEventListener("mouseleave", () => {
566
+ r.style.background = "transparent";
567
+ }), r.addEventListener("click", () => {
568
+ this.acceptRevision(e.revisionId);
569
+ });
570
+ const d = document.createElement("button");
571
+ d.title = "拒绝修订", d.style.cssText = `display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:0;cursor:pointer;transition:background 0.15s;color:${this._revisionColor};font-size:14px;`, d.textContent = "✕", d.addEventListener("mouseenter", () => {
572
+ d.style.background = "#fff1f0";
573
+ }), d.addEventListener("mouseleave", () => {
574
+ d.style.background = "transparent";
575
+ }), d.addEventListener("click", () => {
576
+ this.rejectRevision(e.revisionId);
577
+ }), s.append(r, d), t.append(o, i, s);
578
+ const c = document.createElement("div");
579
+ c.style.cssText = "font-size:13px;line-height:1.4;word-break:break-word;max-height:72px;overflow:hidden;padding:2px 0;";
580
+ const a = document.createElement("span");
581
+ a.style.cssText = `color:${this._revisionColor};font-weight:500;`, a.textContent = "删除:";
582
+ const l = document.createElement("span");
583
+ return l.className = "revision-content", l.style.cssText = "color:#444;", l.textContent = e.content, c.append(a, l), n.append(t, c), n;
584
+ }
585
+ _getPageOffsetY(e) {
586
+ var o, i, s, r;
587
+ if (this._container) {
588
+ const d = this._container.querySelectorAll("canvas[data-index]");
589
+ if (d.length > e) {
590
+ const c = d[e];
591
+ if (c && c.offsetTop !== void 0)
592
+ return c.offsetTop;
593
+ }
594
+ }
595
+ const n = ((i = (o = this._command) == null ? void 0 : o.getDrawHeight) == null ? void 0 : i.call(o)) || 1123, t = ((r = (s = this._command) == null ? void 0 : s.getPageGap) == null ? void 0 : r.call(s)) ?? 0;
596
+ return e * (n + t);
597
+ }
598
+ _getPolylinePoints(e) {
599
+ const n = Math.min(e.anchorStartX, e.anchorEndX), t = e.anchorEndY, o = e.pageRight, i = e.left, s = e.top + 12;
600
+ return `${n},${t} ${o},${t} ${i},${s}`;
601
+ }
602
+ _getRevisions() {
603
+ var t, o;
604
+ if (!this._command) return [];
605
+ const e = (o = (t = this._command).getElementList) == null ? void 0 : o.call(t);
606
+ if (!e) return [];
607
+ const n = /* @__PURE__ */ new Map();
608
+ for (let i = 0; i < e.length; i++) {
609
+ const s = e[i];
610
+ if (!s.revisionId || !s.revisionType || s.revisionType === "insert") continue;
611
+ const r = n.get(s.revisionId);
612
+ r ? (r.content += s.value || "", r.lastIndex = i) : n.set(s.revisionId, {
613
+ id: s.revisionId,
614
+ type: s.revisionType,
615
+ author: s.revisionAuthor || "",
616
+ date: s.revisionDate || "",
617
+ content: s.value || "",
618
+ firstIndex: i,
619
+ lastIndex: i
620
+ });
621
+ }
622
+ return Array.from(n.values());
623
+ }
624
+ getRevisions() {
625
+ return this._getRevisions().map((e) => ({
626
+ id: e.id,
627
+ type: e.type,
628
+ author: e.author,
629
+ date: e.date,
630
+ content: e.content
631
+ }));
632
+ }
633
+ update() {
634
+ var d, c, a, l, h, p, m, k, L, R, S, W, $, y, E, b, g, f, v, x;
635
+ if (!this._command) return;
636
+ const e = (c = (d = this._command).getOptions) == null ? void 0 : c.call(d);
637
+ if (!(e != null && e.showRevisionBalloons)) {
638
+ this._clear(), this._restoreContainerWidth();
639
+ return;
640
+ }
641
+ const n = this._getRevisions();
642
+ if (n.length === 0) {
643
+ this._clear(), this._restoreContainerWidth();
644
+ return;
645
+ }
646
+ const t = (l = (a = this._command).getPositionList) == null ? void 0 : l.call(a);
647
+ if (!t || t.length === 0) {
648
+ this._clear(), this._restoreContainerWidth();
649
+ return;
650
+ }
651
+ const o = ((p = (h = this._command).getDrawWidth) == null ? void 0 : p.call(h)) || 794;
652
+ (k = (m = this._command).getDrawHeight) != null && k.call(m), (R = (L = this._command).getPageGap) == null || R.call(L);
653
+ const i = o + 16, s = [];
654
+ for (const u of n) {
655
+ const I = u.firstIndex;
656
+ if (I < 0 || I >= t.length) continue;
657
+ const D = t[I];
658
+ if (!(D != null && D.coordinate)) continue;
659
+ const A = Math.min(u.lastIndex, t.length - 1), _ = t[A], Y = D.pageNo ?? 0, M = this._getPageOffsetY(Y) + (((S = D.coordinate.leftTop) == null ? void 0 : S[1]) || 0), C = ((W = D.coordinate.leftTop) == null ? void 0 : W[0]) || 0, H = M;
660
+ let N = ((y = ($ = _ == null ? void 0 : _.coordinate) == null ? void 0 : $.rightBottom) == null ? void 0 : y[0]) || ((b = (E = _ == null ? void 0 : _.coordinate) == null ? void 0 : E.rightTop) == null ? void 0 : b[0]) || C, X = M + (D.lineHeight || 20);
661
+ if (_ != null && _.coordinate) {
662
+ const G = _.pageNo ?? 0, F = this._getPageOffsetY(G);
663
+ N = ((g = _.coordinate.rightBottom) == null ? void 0 : g[0]) || ((f = _.coordinate.rightTop) == null ? void 0 : f[0]) || C, X = F + (((v = _.coordinate.leftBottom) == null ? void 0 : v[1]) || ((x = _.coordinate.leftTop) == null ? void 0 : x[1]) || 0);
664
+ }
665
+ const q = o;
666
+ s.push({
667
+ revisionId: u.id,
668
+ type: u.type,
669
+ author: u.author,
670
+ date: u.date,
671
+ content: u.content,
672
+ top: M,
673
+ left: i,
674
+ anchorStartX: C,
675
+ anchorStartY: H,
676
+ anchorEndX: N,
677
+ anchorEndY: X,
678
+ pageRight: q
679
+ });
680
+ }
681
+ s.sort((u, I) => u.top - I.top);
682
+ const r = 70;
683
+ for (let u = 1; u < s.length; u++)
684
+ s[u].top - s[u - 1].top < r && (s[u].top = s[u - 1].top + r);
685
+ this._expandContainerWidth(s), this._renderBalloons(s);
686
+ }
687
+ _expandContainerWidth(e) {
688
+ var s, r;
689
+ if (!this._command || e.length === 0 || !this._container) return;
690
+ const n = ((r = (s = this._command).getDrawWidth) == null ? void 0 : r.call(s)) || 794, i = n + 16 + 300 + 16;
691
+ this._container.__revisionNeededWidth = i, this._applyContainerWidth(this._container, n);
692
+ }
693
+ _restoreContainerWidth() {
694
+ var n, t;
695
+ if (!this._command || !this._container) return;
696
+ const e = ((t = (n = this._command).getDrawWidth) == null ? void 0 : t.call(n)) || 794;
697
+ this._container.__revisionNeededWidth = 0, this._applyContainerWidth(this._container, e);
698
+ }
699
+ _applyContainerWidth(e, n) {
700
+ const t = e.__commentNeededWidth || 0, o = e.__revisionNeededWidth || 0, i = Math.max(t, o);
701
+ i > n ? (e.style.width = `${i}px`, e.style.minWidth = `${i}px`) : (e.style.width = `${n}px`, e.style.minWidth = "");
702
+ }
703
+ _renderBalloons(e) {
704
+ if (!this._svgEl || !this._overlayContainer) return;
705
+ for (; this._svgEl.firstChild; )
706
+ this._svgEl.removeChild(this._svgEl.firstChild);
707
+ const n = new Set(e.map((t) => t.revisionId));
708
+ for (const [t, o] of this._balloonDoms)
709
+ n.has(t) || (o.remove(), this._balloonDoms.delete(t));
710
+ if (this._container) {
711
+ const t = this._container.getBoundingClientRect(), o = Math.ceil(t.width), i = Math.ceil(t.height);
712
+ o > 0 && i > 0 && (this._svgEl.setAttribute("viewBox", `0 0 ${o} ${i}`), this._svgEl.setAttribute("width", String(o)), this._svgEl.setAttribute("height", String(i)));
713
+ }
714
+ for (const t of e) {
715
+ const o = this._getPolylinePoints(t), i = document.createElementNS("http://www.w3.org/2000/svg", "circle");
716
+ i.setAttribute("cx", String(Math.min(t.anchorStartX, t.anchorEndX))), i.setAttribute("cy", String(t.anchorEndY)), i.setAttribute("r", "3"), i.setAttribute("fill", this._revisionColor), this._svgEl.append(i);
717
+ const s = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
718
+ s.setAttribute("points", o), s.setAttribute("fill", "none"), s.setAttribute("stroke", this._revisionColor), s.setAttribute("stroke-width", "1"), s.setAttribute("stroke-dasharray", "4,3"), this._svgEl.append(s);
719
+ let r = this._balloonDoms.get(t.revisionId);
720
+ if (!r)
721
+ r = this._createBalloonDom(t), this._overlayContainer.append(r), this._balloonDoms.set(t.revisionId, r);
722
+ else {
723
+ r.style.top = `${t.top}px`, r.style.left = `${t.left}px`;
724
+ const d = r.querySelector(".revision-content");
725
+ d && (d.textContent = t.content);
726
+ }
727
+ }
728
+ }
729
+ _clear() {
730
+ if (this._svgEl)
731
+ for (; this._svgEl.firstChild; )
732
+ this._svgEl.removeChild(this._svgEl.firstChild);
733
+ for (const e of this._balloonDoms.values())
734
+ e.remove();
735
+ this._balloonDoms.clear();
736
+ }
737
+ acceptRevision(e) {
738
+ var i, s, r, d, c, a, l, h;
739
+ if (!this._command) return;
740
+ const n = (s = (i = this._command).getElementList) == null ? void 0 : s.call(i);
741
+ if (!n) return;
742
+ const t = [];
743
+ for (let p = n.length - 1; p >= 0; p--) {
744
+ const m = n[p];
745
+ m.revisionId === e && (m.revisionType === "delete" ? t.push(p) : (delete m.revisionId, delete m.revisionType, delete m.revisionAuthor, delete m.revisionDate));
746
+ }
747
+ for (const p of t)
748
+ (d = (r = this._command).spliceElementList) == null || d.call(r, n, p, 1, void 0, { isIgnoreDeletedRule: !0 });
749
+ const o = this._balloonDoms.get(e);
750
+ o && (o.remove(), this._balloonDoms.delete(e)), (a = (c = this._command).renderDraw) == null || a.call(c, { isSubmitHistory: !0 }), (h = (l = this._callbacks).onAccept) == null || h.call(l, e);
751
+ }
752
+ rejectRevision(e) {
753
+ var i, s, r, d, c, a, l, h;
754
+ if (!this._command) return;
755
+ const n = (s = (i = this._command).getElementList) == null ? void 0 : s.call(i);
756
+ if (!n) return;
757
+ const t = [];
758
+ for (let p = n.length - 1; p >= 0; p--) {
759
+ const m = n[p];
760
+ m.revisionId === e && (m.revisionType === "insert" ? t.push(p) : (delete m.revisionId, delete m.revisionType, delete m.revisionAuthor, delete m.revisionDate));
761
+ }
762
+ for (const p of t)
763
+ (d = (r = this._command).spliceElementList) == null || d.call(r, n, p, 1, void 0, { isIgnoreDeletedRule: !0 });
764
+ const o = this._balloonDoms.get(e);
765
+ o && (o.remove(), this._balloonDoms.delete(e)), (a = (c = this._command).renderDraw) == null || a.call(c, { isSubmitHistory: !0 }), (h = (l = this._callbacks).onReject) == null || h.call(l, e);
766
+ }
767
+ acceptAllRevisions() {
768
+ var t, o, i, s, r, d;
769
+ if (!this._command) return;
770
+ const e = (o = (t = this._command).getElementList) == null ? void 0 : o.call(t);
771
+ if (!e) return;
772
+ const n = [];
773
+ for (let c = e.length - 1; c >= 0; c--) {
774
+ const a = e[c];
775
+ !a.revisionId || !a.revisionType || (a.revisionType === "delete" ? n.push(c) : (delete a.revisionId, delete a.revisionType, delete a.revisionAuthor, delete a.revisionDate));
776
+ }
777
+ for (const c of n)
778
+ (s = (i = this._command).spliceElementList) == null || s.call(i, e, c, 1, void 0, { isIgnoreDeletedRule: !0 });
779
+ this._clear(), (d = (r = this._command).renderDraw) == null || d.call(r, { isSubmitHistory: !0 });
780
+ }
781
+ rejectAllRevisions() {
782
+ var t, o, i, s, r, d;
783
+ if (!this._command) return;
784
+ const e = (o = (t = this._command).getElementList) == null ? void 0 : o.call(t);
785
+ if (!e) return;
786
+ const n = [];
787
+ for (let c = e.length - 1; c >= 0; c--) {
788
+ const a = e[c];
789
+ !a.revisionId || !a.revisionType || (a.revisionType === "insert" ? n.push(c) : (delete a.revisionId, delete a.revisionType, delete a.revisionAuthor, delete a.revisionDate));
790
+ }
791
+ for (const c of n)
792
+ (s = (i = this._command).spliceElementList) == null || s.call(i, e, c, 1, void 0, { isIgnoreDeletedRule: !0 });
793
+ this._clear(), (d = (r = this._command).renderDraw) == null || d.call(r, { isSubmitHistory: !0 });
794
+ }
795
+ destroy() {
796
+ this._clear(), this._restoreContainerWidth(), this._overlayContainer && (this._overlayContainer.remove(), this._overlayContainer = null), this._svgEl = null, this._container = null, this._command = null;
797
+ }
798
+ }
799
+ export {
800
+ K as CommentComponent,
801
+ U as RevisionComponent
802
+ };
@@ -0,0 +1 @@
1
+ (function(k,A){typeof exports=="object"&&typeof module<"u"?A(exports):typeof define=="function"&&define.amd?define(["exports"],A):(k=typeof globalThis<"u"?globalThis:k||self,A(k.DocxEditorComment={}))})(this,function(k){"use strict";const A=["#409EFF","#67C23A","#E6A23C","#F56C6C","#909399","#00BCD4","#9C27B0"],E="ce";function Y(T){let e=0;for(let n=0;n<T.length;n++)e=T.charCodeAt(n)+((e<<5)-e);return A[Math.abs(e)%A.length]}function P(T){if(!T)return"";try{const e=new Date(T);if(isNaN(e.getTime()))return T;const n=e.getFullYear(),t=String(e.getMonth()+1).padStart(2,"0"),o=String(e.getDate()).padStart(2,"0"),i=String(e.getHours()).padStart(2,"0"),s=String(e.getMinutes()).padStart(2,"0");return`${n}-${t}-${o} ${i}:${s}`}catch{return T}}class G{constructor(){this._command=null,this._comments=[],this._callbacks={},this._overlayContainer=null,this._svgEl=null,this._cardDoms=new Map,this._activeMenuId=null}get _annotationColor(){var e,n,t;return((t=(n=(e=this._command)==null?void 0:e.getOptions)==null?void 0:n.call(e))==null?void 0:t.annotationColor)||"#409eff"}install(e,n){return this._command=e,n&&(this._callbacks=n),this}getComments(){return this._comments}setComments(e){this._comments=e}addComment(e="当前用户"){var o,i;if(!this._command)return null;const n=(i=(o=this._command).executeSetGroup)==null?void 0:i.call(o);if(!n)return null;const t={id:n,groupId:n,content:"",userName:e,createdDate:P(new Date().toISOString()),rangeText:"",isEditing:!0};return this._comments.push(t),t}deleteComment(e){var t,o,i,s;const n=this._comments.findIndex(r=>r.id===e);if(n!==-1){const r=this._comments[n];this._comments.splice(n,1),(o=(t=this._command)==null?void 0:t.executeDeleteGroup)==null||o.call(t,r.groupId),(s=(i=this._callbacks).onDelete)==null||s.call(i,e)}}locateComment(e){var t,o;const n=this._comments.find(i=>i.id===e);n&&((o=(t=this._command)==null?void 0:t.executeLocationGroup)==null||o.call(t,n.groupId))}saveComment(e){const n=this._comments.findIndex(t=>t.id===e.id);n!==-1&&(this._comments[n]={...e,isEditing:!1})}cancelComment(e){var o,i;const n=this._comments.findIndex(s=>s.id===e);if(n===-1)return;const t=this._comments[n];t.content?t.isEditing=!1:(this._comments.splice(n,1),(i=(o=this._command)==null?void 0:o.executeDeleteGroup)==null||i.call(o,t.groupId))}replyToComment(e,n,t="当前用户"){const o=this._comments.find(i=>i.id===e);o&&(o.replies||(o.replies=[]),o.replies.push({id:`reply-${Date.now()}`,groupId:o.groupId,content:n,userName:t,avatarColor:Y(t),createdDate:P(new Date().toISOString()),rangeText:""}))}resolveComment(e,n){const t=this._comments.find(o=>o.id===e);t&&(t.status=n?2:1)}serializeComments(){return this._comments.map(e=>{var n;return{id:e.id,groupId:e.groupId,content:e.content,userName:e.userName,avatarColor:e.avatarColor,createdDate:e.createdDate,rangeText:e.rangeText||"",status:e.status,replies:(n=e.replies)==null?void 0:n.map(t=>({id:t.id,groupId:t.groupId,content:t.content,userName:t.userName,avatarColor:t.avatarColor,createdDate:t.createdDate,rangeText:t.rangeText||""}))}})}restoreComments(e){const n=[];for(const t of e){if(!t||typeof t!="object")continue;const o=String(t.id||"").trim(),i=String(t.groupId||o).trim();o&&n.push({id:o,groupId:i,content:String(t.content||""),userName:String(t.userName||"未知用户"),avatarColor:t.avatarColor||Y(String(t.userName||"")),createdDate:String(t.createdDate||""),rangeText:String(t.rangeText||""),status:t.status})}this._comments=n}buildCommentsFromMetas(e){const n=[];for(const t of e){const o="comment_"+t.id;n.push({id:o,groupId:o,content:t.content,userName:t.author||"未知用户",avatarColor:Y(t.author||""),createdDate:P(t.date||""),rangeText:""})}this._comments=n}_getPageOffsetY(e){var i,s,r,d,c,a;const n=(s=(i=this._command)==null?void 0:i.getContainer)==null?void 0:s.call(i);if(n){const l=n.querySelectorAll("canvas[data-index]");if(l.length>e){const h=l[e];if(h&&h.offsetTop!==void 0)return h.offsetTop}}const t=((d=(r=this._command)==null?void 0:r.getDrawHeight)==null?void 0:d.call(r))||1123,o=((a=(c=this._command)==null?void 0:c.getPageGap)==null?void 0:a.call(c))??0;return e*(t+o)}_computePositions(){var s,r,d,c,a,l,h,p,m,L,S,M,W,I,D,y,w,b;if(!this._command||this._comments.length===0)return;const e=(r=(s=this._command).getPositionList)==null?void 0:r.call(s);if(!e||e.length===0)return;const n=((c=(d=this._command).getDrawWidth)==null?void 0:c.call(d))||794;(l=(a=this._command).getDrawHeight)!=null&&l.call(a),(p=(h=this._command).getPageGap)==null||p.call(h);const t=n+16;for(const g of this._comments){const f=(L=(m=this._command)==null?void 0:m.getGroupContext)==null?void 0:L.call(m,g.groupId);if(!f)continue;const v=f.isTable?f.index??-1:f.startIndex??-1,x=f.isTable?f.index:f.endIndex;if(v==null||v<0||v>=e.length)continue;const u=e[v];if(!(u!=null&&u.coordinate))continue;const R=u.pageNo??0,N=this._getPageOffsetY(R)+(((S=u.coordinate.leftTop)==null?void 0:S[1])||0),_=((M=u.coordinate.leftTop)==null?void 0:M[0])||0,O=N;let j=((W=u.coordinate.rightBottom)==null?void 0:W[0])||((I=u.coordinate.rightTop)==null?void 0:I[0])||_,B=N+(u.lineHeight||20);if(x!=null&&x>=0&&x<e.length){const C=e[x];if(C!=null&&C.coordinate){const X=C.pageNo??0,z=this._getPageOffsetY(X);j=((D=C.coordinate.rightBottom)==null?void 0:D[0])||((y=C.coordinate.rightTop)==null?void 0:y[0])||_,B=z+(((w=C.coordinate.leftBottom)==null?void 0:w[1])||((b=C.coordinate.leftTop)==null?void 0:b[1])||0)}}g.position={top:N,left:t,lineWidth:0,originalTop:N},g.anchor={startX:_,startY:O,endX:j,endY:B,lineHeight:u.lineHeight||20}}const o=this._comments.filter(g=>g.position).sort((g,f)=>g.position.top-f.position.top),i=80;for(let g=1;g<o.length;g++){const f=o[g-1],v=o[g];v.position.top-f.position.top<i&&(v.position.top=f.position.top+i)}}render(){var t,o;if(!this._command)return;const e=(o=(t=this._command).getOptions)==null?void 0:o.call(t);if((e==null?void 0:e.showCommentBalloons)===!1){this._clearCards(),this._restoreContainerWidth();return}this._computePositions();const n=this._comments.filter(i=>i.position);if(n.length===0){this._clearCards(),this._restoreContainerWidth();return}this._overlayContainer||this._createOverlayContainer(),this._expandContainerWidth(n),this._renderCards(n)}_createOverlayContainer(){var o,i;if(!this._command)return;const e=(i=(o=this._command).getContainer)==null?void 0:i.call(o);if(!e)return;const n=document.createElement("div");n.classList.add(`${E}-comment-overlay`),n.style.cssText="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:visible;";const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.classList.add(`${E}-comment-lines`),t.style.cssText="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;",n.append(t),e.append(n),this._overlayContainer=n,this._svgEl=t}_clearCards(){for(const e of this._cardDoms.values())e.remove();if(this._cardDoms.clear(),this._svgEl)for(;this._svgEl.firstChild;)this._svgEl.removeChild(this._svgEl.firstChild)}_expandContainerWidth(e){var r,d,c,a;if(!this._command||e.length===0)return;const n=(d=(r=this._command).getContainer)==null?void 0:d.call(r);if(!n)return;const t=((a=(c=this._command).getDrawWidth)==null?void 0:a.call(c))||794,s=t+16+300+16;n.__commentNeededWidth=s,this._applyContainerWidth(n,t)}_restoreContainerWidth(){var t,o,i,s;if(!this._command)return;const e=(o=(t=this._command).getContainer)==null?void 0:o.call(t);if(!e)return;const n=((s=(i=this._command).getDrawWidth)==null?void 0:s.call(i))||794;e.__commentNeededWidth=0,this._applyContainerWidth(e,n)}_applyContainerWidth(e,n){const t=e.__commentNeededWidth||0,o=e.__revisionNeededWidth||0,i=Math.max(t,o);i>n?(e.style.width=`${i}px`,e.style.minWidth=`${i}px`):(e.style.width=`${n}px`,e.style.minWidth="")}_renderLines(e){var d,c,a,l,h,p;if(!this._svgEl)return;for(;this._svgEl.firstChild;)this._svgEl.removeChild(this._svgEl.firstChild);const n=(c=(d=this._command)==null?void 0:d.getContainer)==null?void 0:c.call(d);if(!n)return;const t=n.getBoundingClientRect(),o=Math.ceil(t.width),i=Math.ceil(t.height);o>0&&i>0&&(this._svgEl.setAttribute("viewBox",`0 0 ${o} ${i}`),this._svgEl.setAttribute("width",String(o)),this._svgEl.setAttribute("height",String(i)));const s=((l=(a=this._command)==null?void 0:a.getDrawWidth)==null?void 0:l.call(a))||794;(p=(h=this._command)==null?void 0:h.getOptions)==null||p.call(h);const r=this._annotationColor;for(const m of e){if(!m.anchor||!m.position)continue;const{startX:L,startY:S,endX:M,endY:W}=m.anchor,I=m.position.top,D=m.position.left,y=L,w=S,b=w+(m.anchor.lineHeight||20),g=s,f=I+12;let v;f>W?v=[`${y},${w}`,`${y},${b}`,`${g},${b}`,`${g},${f}`,`${D},${f}`].join(" "):f<w?v=[`${y},${w}`,`${y},${b}`,`${g},${b}`,`${g},${f}`,`${D},${f}`].join(" "):v=[`${y},${w}`,`${y},${b}`,`${g},${b}`,`${D},${f}`].join(" ");const x=document.createElementNS("http://www.w3.org/2000/svg","polyline");x.setAttribute("points",v),x.setAttribute("fill","none"),x.setAttribute("stroke",r),x.setAttribute("stroke-width","1"),x.setAttribute("stroke-dasharray","4,3"),this._svgEl.append(x)}}_renderCards(e){if(!this._overlayContainer)return;const n=new Set(e.map(t=>t.id));for(const[t,o]of this._cardDoms)n.has(t)||(o.remove(),this._cardDoms.delete(t));this._renderLines(e);for(const t of e){let o=this._cardDoms.get(t.id);o?this._updateCardDom(o,t):(o=this._createCardDom(t),this._overlayContainer.append(o),this._cardDoms.set(t.id,o)),o.style.top=`${t.position.top}px`,o.style.left=`${t.position.left}px`}}_createCardDom(e){const n=document.createElement("div");n.style.cssText="position:absolute;pointer-events:auto;transition:all 0.2s ease;";const t=document.createElement("div");t.classList.add(`${E}-comment-card`),t.dataset.commentId=e.id,this._applyCardStyle(t,e);const o=document.createElement("div");o.style.cssText="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;";const i=document.createElement("div");i.style.cssText="display:flex;align-items:center;gap:8px;";const s=document.createElement("div");s.style.cssText=`width:28px;height:28px;border-radius:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;flex-shrink:0;background:${e.avatarColor||Y(e.userName)};`,s.textContent=e.userName.charAt(0);const r=document.createElement("span");r.style.cssText="font-weight:600;font-size:13px;color:#1f1f1f;",r.textContent=e.userName,i.append(s,r);const d=document.createElement("div");if(d.style.cssText="display:flex;align-items:center;gap:4px;position:relative;",e.status===2){const h=document.createElement("span");h.style.cssText="font-size:10px;color:#67c23a;background:#f0f9eb;padding:2px 6px;border-radius:10px;white-space:nowrap;",h.textContent="已解决",d.append(h)}const c=document.createElement("span");c.style.cssText="font-size:11px;color:#9e9e9e;white-space:nowrap;",c.textContent=e.createdDate;const a=document.createElement("button");a.title="更多操作",a.style.cssText="display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:50%;cursor:pointer;color:#9e9e9e;transition:all 0.15s ease;padding:0;flex-shrink:0;",a.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="19" r="1.5" fill="currentColor"/></svg>',a.addEventListener("mouseenter",()=>{a.style.background="#f0f0f0",a.style.color="#666"}),a.addEventListener("mouseleave",()=>{a.style.background="transparent",a.style.color="#9e9e9e"}),a.addEventListener("click",h=>{h.stopPropagation(),this._toggleMenu(e.id)}),d.append(c,a),o.append(i,d);const l=document.createElement("div");return l.classList.add(`${E}-comment-body`),this._renderCardBody(l,e),t.append(o,l),n.append(t),n}_renderCardBody(e,n){if(e.innerHTML="",n.isEditing){const o=document.createElement("div");o.style.cssText="margin:8px 0;";const i=document.createElement("textarea");i.classList.add(`${E}-comment-textarea`),i.placeholder="请输入批注内容...",i.rows=3,i.value=n.content,i.style.cssText="width:93%;min-height:80px;padding:8px 10px;border:1px solid #dcdfe6;border-radius:6px;font-size:13px;font-family:inherit;line-height:1.6;resize:vertical;outline:none;transition:border-color 0.2s ease;",i.addEventListener("input",()=>{n.content=i.value}),i.addEventListener("keydown",c=>{c.ctrlKey&&c.key==="Enter"&&this._handleSave(n)}),i.addEventListener("focus",()=>{i.style.borderColor=this._annotationColor}),i.addEventListener("blur",()=>{i.style.borderColor="#dcdfe6"});const s=document.createElement("div");s.style.cssText="display:flex;gap:8px;justify-content:flex-end;margin-top:8px;";const r=document.createElement("button");r.textContent="保存",r.style.cssText=`padding:5px 14px;font-size:12px;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-weight:500;background:${this._annotationColor};color:#fff;`,r.addEventListener("click",()=>this._handleSave(n)),r.addEventListener("mouseenter",()=>{r.style.background="#66b1ff"}),r.addEventListener("mouseleave",()=>{r.style.background=this._annotationColor});const d=document.createElement("button");d.textContent="取消",d.style.cssText="padding:5px 14px;font-size:12px;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-weight:500;background:#f5f5f5;color:#666;",d.addEventListener("click",()=>this._handleCancel(n)),d.addEventListener("mouseenter",()=>{d.style.background="#e8e8e8"}),d.addEventListener("mouseleave",()=>{d.style.background="#f5f5f5",d.style.color="#666"}),s.append(r,d),o.append(i,s),e.append(o),setTimeout(()=>i.focus(),50);return}const t=document.createElement("div");if(t.style.cssText="font-size:13px;color:#444;line-height:1.4;word-break:break-word;cursor:pointer;padding:2px 0;",t.textContent=n.content,t.addEventListener("dblclick",()=>{n.isEditing=!0,this._refreshCard(n.id)}),t.addEventListener("mouseenter",()=>{t.style.background="#f8f8f8",t.style.borderRadius="4px"}),t.addEventListener("mouseleave",()=>{t.style.background="transparent"}),e.append(t),n.replies&&n.replies.length>0){const o=document.createElement("div");o.style.cssText="margin-top:8px;padding-top:8px;border-top:1px solid #f0f0f0;";for(const i of n.replies){const s=document.createElement("div");s.style.cssText="display:flex;align-items:flex-start;gap:8px;padding:6px 0;";const r=document.createElement("div");r.style.cssText="width:2px;background:#e4e7ed;border-radius:1px;flex-shrink:0;align-self:stretch;";const d=document.createElement("div");d.style.cssText=`width:22px;height:22px;border-radius:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:10px;flex-shrink:0;background:${i.avatarColor||"#909399"};`,d.textContent=i.userName.charAt(0);const c=document.createElement("div");c.style.cssText="flex:1;min-width:0;";const a=document.createElement("div");a.style.cssText="display:flex;align-items:center;gap:8px;margin-bottom:4px;";const l=document.createElement("span");l.style.cssText="font-size:12px;font-weight:600;color:#303133;",l.textContent=i.userName;const h=document.createElement("span");h.style.cssText="font-size:10px;color:#c0c4cc;",h.textContent=i.createdDate,a.append(l,h);const p=document.createElement("div");p.style.cssText="font-size:12px;color:#606266;line-height:1.5;word-break:break-word;",p.textContent=i.content,c.append(a,p),s.append(r,d,c),o.append(s)}e.append(o)}n.isReplying&&this._renderReplyInput(e,n)}_renderReplyInput(e,n){const t=document.createElement("div");t.style.cssText="margin:8px 0;";const o=document.createElement("textarea");o.placeholder="输入回复...",o.rows=2,o.style.cssText="width:93%;min-height:50px;padding:8px 10px;border:1px solid #dcdfe6;border-radius:6px;font-size:13px;font-family:inherit;line-height:1.6;resize:vertical;outline:none;transition:border-color 0.2s ease;",o.addEventListener("focus",()=>{o.style.borderColor=this._annotationColor}),o.addEventListener("blur",()=>{o.style.borderColor="#dcdfe6"});const i=document.createElement("div");i.style.cssText="display:flex;gap:8px;justify-content:flex-end;margin-top:8px;";const s=document.createElement("button");s.textContent="回复",s.style.cssText=`padding:5px 14px;font-size:12px;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-weight:500;background:${this._annotationColor};color:#fff;`,s.addEventListener("mouseenter",()=>{s.style.background="#66b1ff"}),s.addEventListener("mouseleave",()=>{s.style.background=this._annotationColor});const r=document.createElement("button");r.textContent="取消",r.style.cssText="padding:5px 14px;font-size:12px;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-weight:500;background:#f5f5f5;color:#666;",r.addEventListener("mouseenter",()=>{r.style.background="#e8e8e8"}),r.addEventListener("mouseleave",()=>{r.style.background="#f5f5f5",r.style.color="#666"});const d=()=>{var a,l,h,p;const c=o.value.trim();c&&(n.isReplying=!1,this.replyToComment(n.id,c),(l=(a=this._callbacks).onReply)==null||l.call(a,n.id,c),(p=(h=this._callbacks).onRequestSave)==null||p.call(h),this._refreshCard(n.id))};s.addEventListener("click",d),o.addEventListener("keydown",c=>{c.ctrlKey&&c.key==="Enter"&&d()}),r.addEventListener("click",()=>{n.isReplying=!1,this._refreshCard(n.id)}),i.append(s,r),t.append(o,i),e.append(t),setTimeout(()=>o.focus(),50)}_applyCardStyle(e,n){const t=this._annotationColor,o=n.status===2?"#67c23a":t;let i=`min-width:240px;max-width:300px;border-radius:0;padding:6px 10px;transition:all 0.2s ease;background:#fff;border:1px solid #e8e8e8;border-left:3px solid ${o};box-shadow:0 2px 8px rgba(0,0,0,0.06);`;n.status===2&&(i+="opacity:0.65;"),n.isEditing&&(i+=`border-color:${o};box-shadow:0 4px 16px rgba(64,158,255,0.15);background:#fafcff;`),e.style.cssText=i}_updateCardDom(e,n){const t=e.querySelector(`.${E}-comment-card`);if(!t)return;this._applyCardStyle(t,n);const o=t.querySelector(":scope > div:first-child");if(o){const s=o.querySelector(":scope > div:last-child");if(s){const r=s.querySelector(".resolved-badge");if(n.status===2&&!r){const d=document.createElement("span");d.classList.add("resolved-badge"),d.style.cssText="font-size:11px;color:#67c23a;background:#f0f9eb;padding:1px 6px;border-radius:3px;white-space:nowrap;",d.textContent="已解决",s.insertBefore(d,s.firstChild)}else n.status!==2&&r&&r.remove()}}const i=t.querySelector(`.${E}-comment-body`);i&&this._renderCardBody(i,n)}_refreshCard(e){const n=this._comments.find(o=>o.id===e);if(!n)return;const t=this._cardDoms.get(e);t&&this._updateCardDom(t,n)}_handleSave(e){var n,t,o,i;if(!e.content.trim()){this._handleCancel(e);return}e.isEditing=!1,(t=(n=this._callbacks).onSave)==null||t.call(n,e),(i=(o=this._callbacks).onRequestSave)==null||i.call(o),this._refreshCard(e.id)}_handleCancel(e){var n,t,o,i;e.content?(e.isEditing=!1,this._refreshCard(e.id)):(this.cancelComment(e.id),(t=(n=this._callbacks).onCancel)==null||t.call(n,e.id),(i=(o=this._callbacks).onRequestSave)==null||i.call(o),this.render())}_toggleMenu(e){this._closeMenu(),this._activeMenuId=e;const n=this._cardDoms.get(e);if(!n)return;const t=n.querySelector(`.${E}-comment-card`);if(!t)return;const o=t.querySelector(":scope > div:first-child > div:last-child");if(!o)return;const i=this._comments.find(c=>c.id===e);if(!i)return;const s=document.createElement("div");s.classList.add(`${E}-comment-menu`),s.style.cssText="position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.1);padding:4px 0;z-index:100;min-width:120px;";const r=[{label:"编辑",action:()=>{i.isEditing=!0,this._refreshCard(e)}},{label:"回复",action:()=>{i.isReplying=!0,this._refreshCard(e)}},{label:i.status===2?"重新打开":"解决",action:()=>{var a,l,h,p;const c=i.status!==2;this.resolveComment(e,c),(l=(a=this._callbacks).onResolve)==null||l.call(a,e,c),(p=(h=this._callbacks).onRequestSave)==null||p.call(h),this.render()}},{label:"删除",action:()=>{var c,a;this.deleteComment(e),(a=(c=this._callbacks).onRequestSave)==null||a.call(c),this.render()},isDelete:!0}];for(const c of r){const a=document.createElement("button");a.style.cssText=`display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:none;cursor:pointer;font-size:13px;color:${c.isDelete?"#e53935":"#444"};transition:all 0.15s ease;text-align:left;border-radius:4px;margin:0 4px;width:calc(100% - 8px);`,a.textContent=c.label,a.addEventListener("click",l=>{l.stopPropagation(),this._closeMenu(),c.action()}),a.addEventListener("mouseenter",()=>{c.isDelete?a.style.background="#fce4ec":(a.style.background="#f5f5f5",a.style.color="#1f1f1f")}),a.addEventListener("mouseleave",()=>{a.style.background="none",a.style.color=c.isDelete?"#e53935":"#444"}),s.append(a)}o.append(s);const d=c=>{c.target.closest(`.${E}-comment-menu`)||(this._closeMenu(),document.removeEventListener("click",d))};setTimeout(()=>document.addEventListener("click",d),0)}_closeMenu(){const e=document.querySelector(`.${E}-comment-menu`);e&&e.remove(),this._activeMenuId=null}destroy(){this._clearCards(),this._restoreContainerWidth(),this._overlayContainer&&(this._overlayContainer.remove(),this._overlayContainer=null),this._svgEl=null,this._closeMenu(),this._comments=[],this._command=null}}const H="ce";class F{constructor(){this._command=null,this._container=null,this._overlayContainer=null,this._svgEl=null,this._balloonDoms=new Map,this._callbacks={}}get _revisionColor(){var e,n,t;return((t=(n=(e=this._command)==null?void 0:e.getOptions)==null?void 0:n.call(e))==null?void 0:t.revisionColor)||"#e60000"}install(e,n){var o;this._command=e,n&&(this._callbacks=n);const t=(o=e.getContainer)==null?void 0:o.call(e);return t&&(this._container=t,this._overlayContainer=this._createOverlayContainer(),this._svgEl=this._createSvg(),this._overlayContainer.append(this._svgEl),this._container.append(this._overlayContainer)),this}_createOverlayContainer(){const e=document.createElement("div");return e.classList.add(`${H}-revision-overlay`),e.style.cssText="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:visible;",e}_createSvg(){const e=document.createElementNS("http://www.w3.org/2000/svg","svg");return e.classList.add(`${H}-revision-lines`),e.style.cssText="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;",e}_formatDate(e){if(!e)return"";try{const n=new Date(e);if(isNaN(n.getTime()))return e;const t=n.getFullYear(),o=String(n.getMonth()+1).padStart(2,"0"),i=String(n.getDate()).padStart(2,"0"),s=String(n.getHours()).padStart(2,"0"),r=String(n.getMinutes()).padStart(2,"0");return`${t}-${o}-${i} ${s}:${r}`}catch{return e}}_createBalloonDom(e){const n=document.createElement("div");n.classList.add(`${H}-revision-balloon`),n.style.cssText=`position:absolute;pointer-events:auto;min-width:240px;max-width:300px;padding:6px 10px;background:#fff;border:1px solid #e8e8e8;border-left:3px solid ${this._revisionColor};border-radius:0;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);`,n.style.top=`${e.top}px`,n.style.left=`${e.left}px`;const t=document.createElement("div");t.style.cssText="display:flex;align-items:center;justify-content:flex-start;margin-bottom:6px;gap:8px;";const o=document.createElement("span");o.style.cssText=`color:${this._revisionColor};font-weight:600;font-size:13px;white-space:nowrap;`,o.textContent=e.author||"未知";const i=document.createElement("span");i.style.cssText="color:#9e9e9e;font-size:11px;white-space:nowrap;",i.textContent=this._formatDate(e.date);const s=document.createElement("div");s.style.cssText="display:flex;gap:4px;flex-shrink:0;margin-left:auto;";const r=document.createElement("button");r.title="接受修订",r.style.cssText="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:0;cursor:pointer;transition:background 0.15s;color:#52c41a;font-size:14px;",r.textContent="✓",r.addEventListener("mouseenter",()=>{r.style.background="#f6ffed"}),r.addEventListener("mouseleave",()=>{r.style.background="transparent"}),r.addEventListener("click",()=>{this.acceptRevision(e.revisionId)});const d=document.createElement("button");d.title="拒绝修订",d.style.cssText=`display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:0;cursor:pointer;transition:background 0.15s;color:${this._revisionColor};font-size:14px;`,d.textContent="✕",d.addEventListener("mouseenter",()=>{d.style.background="#fff1f0"}),d.addEventListener("mouseleave",()=>{d.style.background="transparent"}),d.addEventListener("click",()=>{this.rejectRevision(e.revisionId)}),s.append(r,d),t.append(o,i,s);const c=document.createElement("div");c.style.cssText="font-size:13px;line-height:1.4;word-break:break-word;max-height:72px;overflow:hidden;padding:2px 0;";const a=document.createElement("span");a.style.cssText=`color:${this._revisionColor};font-weight:500;`,a.textContent="删除:";const l=document.createElement("span");return l.className="revision-content",l.style.cssText="color:#444;",l.textContent=e.content,c.append(a,l),n.append(t,c),n}_getPageOffsetY(e){var o,i,s,r;if(this._container){const d=this._container.querySelectorAll("canvas[data-index]");if(d.length>e){const c=d[e];if(c&&c.offsetTop!==void 0)return c.offsetTop}}const n=((i=(o=this._command)==null?void 0:o.getDrawHeight)==null?void 0:i.call(o))||1123,t=((r=(s=this._command)==null?void 0:s.getPageGap)==null?void 0:r.call(s))??0;return e*(n+t)}_getPolylinePoints(e){const n=Math.min(e.anchorStartX,e.anchorEndX),t=e.anchorEndY,o=e.pageRight,i=e.left,s=e.top+12;return`${n},${t} ${o},${t} ${i},${s}`}_getRevisions(){var t,o;if(!this._command)return[];const e=(o=(t=this._command).getElementList)==null?void 0:o.call(t);if(!e)return[];const n=new Map;for(let i=0;i<e.length;i++){const s=e[i];if(!s.revisionId||!s.revisionType||s.revisionType==="insert")continue;const r=n.get(s.revisionId);r?(r.content+=s.value||"",r.lastIndex=i):n.set(s.revisionId,{id:s.revisionId,type:s.revisionType,author:s.revisionAuthor||"",date:s.revisionDate||"",content:s.value||"",firstIndex:i,lastIndex:i})}return Array.from(n.values())}getRevisions(){return this._getRevisions().map(e=>({id:e.id,type:e.type,author:e.author,date:e.date,content:e.content}))}update(){var d,c,a,l,h,p,m,L,S,M,W,I,D,y,w,b,g,f,v,x;if(!this._command)return;const e=(c=(d=this._command).getOptions)==null?void 0:c.call(d);if(!(e!=null&&e.showRevisionBalloons)){this._clear(),this._restoreContainerWidth();return}const n=this._getRevisions();if(n.length===0){this._clear(),this._restoreContainerWidth();return}const t=(l=(a=this._command).getPositionList)==null?void 0:l.call(a);if(!t||t.length===0){this._clear(),this._restoreContainerWidth();return}const o=((p=(h=this._command).getDrawWidth)==null?void 0:p.call(h))||794;(L=(m=this._command).getDrawHeight)!=null&&L.call(m),(M=(S=this._command).getPageGap)==null||M.call(S);const i=o+16,s=[];for(const u of n){const R=u.firstIndex;if(R<0||R>=t.length)continue;const $=t[R];if(!($!=null&&$.coordinate))continue;const N=Math.min(u.lastIndex,t.length-1),_=t[N],O=$.pageNo??0,B=this._getPageOffsetY(O)+(((W=$.coordinate.leftTop)==null?void 0:W[1])||0),C=((I=$.coordinate.leftTop)==null?void 0:I[0])||0,X=B;let z=((y=(D=_==null?void 0:_.coordinate)==null?void 0:D.rightBottom)==null?void 0:y[0])||((b=(w=_==null?void 0:_.coordinate)==null?void 0:w.rightTop)==null?void 0:b[0])||C,q=B+($.lineHeight||20);if(_!=null&&_.coordinate){const U=_.pageNo??0,J=this._getPageOffsetY(U);z=((g=_.coordinate.rightBottom)==null?void 0:g[0])||((f=_.coordinate.rightTop)==null?void 0:f[0])||C,q=J+(((v=_.coordinate.leftBottom)==null?void 0:v[1])||((x=_.coordinate.leftTop)==null?void 0:x[1])||0)}const K=o;s.push({revisionId:u.id,type:u.type,author:u.author,date:u.date,content:u.content,top:B,left:i,anchorStartX:C,anchorStartY:X,anchorEndX:z,anchorEndY:q,pageRight:K})}s.sort((u,R)=>u.top-R.top);const r=70;for(let u=1;u<s.length;u++)s[u].top-s[u-1].top<r&&(s[u].top=s[u-1].top+r);this._expandContainerWidth(s),this._renderBalloons(s)}_expandContainerWidth(e){var s,r;if(!this._command||e.length===0||!this._container)return;const n=((r=(s=this._command).getDrawWidth)==null?void 0:r.call(s))||794,i=n+16+300+16;this._container.__revisionNeededWidth=i,this._applyContainerWidth(this._container,n)}_restoreContainerWidth(){var n,t;if(!this._command||!this._container)return;const e=((t=(n=this._command).getDrawWidth)==null?void 0:t.call(n))||794;this._container.__revisionNeededWidth=0,this._applyContainerWidth(this._container,e)}_applyContainerWidth(e,n){const t=e.__commentNeededWidth||0,o=e.__revisionNeededWidth||0,i=Math.max(t,o);i>n?(e.style.width=`${i}px`,e.style.minWidth=`${i}px`):(e.style.width=`${n}px`,e.style.minWidth="")}_renderBalloons(e){if(!this._svgEl||!this._overlayContainer)return;for(;this._svgEl.firstChild;)this._svgEl.removeChild(this._svgEl.firstChild);const n=new Set(e.map(t=>t.revisionId));for(const[t,o]of this._balloonDoms)n.has(t)||(o.remove(),this._balloonDoms.delete(t));if(this._container){const t=this._container.getBoundingClientRect(),o=Math.ceil(t.width),i=Math.ceil(t.height);o>0&&i>0&&(this._svgEl.setAttribute("viewBox",`0 0 ${o} ${i}`),this._svgEl.setAttribute("width",String(o)),this._svgEl.setAttribute("height",String(i)))}for(const t of e){const o=this._getPolylinePoints(t),i=document.createElementNS("http://www.w3.org/2000/svg","circle");i.setAttribute("cx",String(Math.min(t.anchorStartX,t.anchorEndX))),i.setAttribute("cy",String(t.anchorEndY)),i.setAttribute("r","3"),i.setAttribute("fill",this._revisionColor),this._svgEl.append(i);const s=document.createElementNS("http://www.w3.org/2000/svg","polyline");s.setAttribute("points",o),s.setAttribute("fill","none"),s.setAttribute("stroke",this._revisionColor),s.setAttribute("stroke-width","1"),s.setAttribute("stroke-dasharray","4,3"),this._svgEl.append(s);let r=this._balloonDoms.get(t.revisionId);if(!r)r=this._createBalloonDom(t),this._overlayContainer.append(r),this._balloonDoms.set(t.revisionId,r);else{r.style.top=`${t.top}px`,r.style.left=`${t.left}px`;const d=r.querySelector(".revision-content");d&&(d.textContent=t.content)}}}_clear(){if(this._svgEl)for(;this._svgEl.firstChild;)this._svgEl.removeChild(this._svgEl.firstChild);for(const e of this._balloonDoms.values())e.remove();this._balloonDoms.clear()}acceptRevision(e){var i,s,r,d,c,a,l,h;if(!this._command)return;const n=(s=(i=this._command).getElementList)==null?void 0:s.call(i);if(!n)return;const t=[];for(let p=n.length-1;p>=0;p--){const m=n[p];m.revisionId===e&&(m.revisionType==="delete"?t.push(p):(delete m.revisionId,delete m.revisionType,delete m.revisionAuthor,delete m.revisionDate))}for(const p of t)(d=(r=this._command).spliceElementList)==null||d.call(r,n,p,1,void 0,{isIgnoreDeletedRule:!0});const o=this._balloonDoms.get(e);o&&(o.remove(),this._balloonDoms.delete(e)),(a=(c=this._command).renderDraw)==null||a.call(c,{isSubmitHistory:!0}),(h=(l=this._callbacks).onAccept)==null||h.call(l,e)}rejectRevision(e){var i,s,r,d,c,a,l,h;if(!this._command)return;const n=(s=(i=this._command).getElementList)==null?void 0:s.call(i);if(!n)return;const t=[];for(let p=n.length-1;p>=0;p--){const m=n[p];m.revisionId===e&&(m.revisionType==="insert"?t.push(p):(delete m.revisionId,delete m.revisionType,delete m.revisionAuthor,delete m.revisionDate))}for(const p of t)(d=(r=this._command).spliceElementList)==null||d.call(r,n,p,1,void 0,{isIgnoreDeletedRule:!0});const o=this._balloonDoms.get(e);o&&(o.remove(),this._balloonDoms.delete(e)),(a=(c=this._command).renderDraw)==null||a.call(c,{isSubmitHistory:!0}),(h=(l=this._callbacks).onReject)==null||h.call(l,e)}acceptAllRevisions(){var t,o,i,s,r,d;if(!this._command)return;const e=(o=(t=this._command).getElementList)==null?void 0:o.call(t);if(!e)return;const n=[];for(let c=e.length-1;c>=0;c--){const a=e[c];!a.revisionId||!a.revisionType||(a.revisionType==="delete"?n.push(c):(delete a.revisionId,delete a.revisionType,delete a.revisionAuthor,delete a.revisionDate))}for(const c of n)(s=(i=this._command).spliceElementList)==null||s.call(i,e,c,1,void 0,{isIgnoreDeletedRule:!0});this._clear(),(d=(r=this._command).renderDraw)==null||d.call(r,{isSubmitHistory:!0})}rejectAllRevisions(){var t,o,i,s,r,d;if(!this._command)return;const e=(o=(t=this._command).getElementList)==null?void 0:o.call(t);if(!e)return;const n=[];for(let c=e.length-1;c>=0;c--){const a=e[c];!a.revisionId||!a.revisionType||(a.revisionType==="insert"?n.push(c):(delete a.revisionId,delete a.revisionType,delete a.revisionAuthor,delete a.revisionDate))}for(const c of n)(s=(i=this._command).spliceElementList)==null||s.call(i,e,c,1,void 0,{isIgnoreDeletedRule:!0});this._clear(),(d=(r=this._command).renderDraw)==null||d.call(r,{isSubmitHistory:!0})}destroy(){this._clear(),this._restoreContainerWidth(),this._overlayContainer&&(this._overlayContainer.remove(),this._overlayContainer=null),this._svgEl=null,this._container=null,this._command=null}}k.CommentComponent=G,k.RevisionComponent=F,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})});
@@ -0,0 +1,110 @@
1
+ import { IComment } from '@vervedoc/docx-editor-schema';
2
+
3
+ declare type Command = any;
4
+
5
+ declare type Command_2 = any;
6
+
7
+ declare interface CommentCallbacks {
8
+ onDelete?: (id: string) => void;
9
+ onLocate?: (id: string) => void;
10
+ onSave?: (comment: IComment) => void;
11
+ onCancel?: (id: string) => void;
12
+ onReply?: (id: string, content: string) => void;
13
+ onResolve?: (id: string, resolved: boolean) => void;
14
+ onRequestSave?: () => void;
15
+ }
16
+
17
+ export declare class CommentComponent {
18
+ private _command;
19
+ private _comments;
20
+ private _callbacks;
21
+ private _overlayContainer;
22
+ private _svgEl;
23
+ private _cardDoms;
24
+ private _activeMenuId;
25
+ private get _annotationColor();
26
+ install(command: Command, callbacks?: CommentCallbacks): this;
27
+ getComments(): IComment[];
28
+ setComments(comments: IComment[]): void;
29
+ addComment(userName?: string): IComment | null;
30
+ deleteComment(id: string): void;
31
+ locateComment(id: string): void;
32
+ saveComment(comment: IComment): void;
33
+ cancelComment(id: string): void;
34
+ replyToComment(id: string, content: string, userName?: string): void;
35
+ resolveComment(id: string, resolved: boolean): void;
36
+ serializeComments(): Array<Record<string, unknown>>;
37
+ restoreComments(saved: any[]): void;
38
+ buildCommentsFromMetas(metas: DocxCommentMeta[]): void;
39
+ private _getPageOffsetY;
40
+ private _computePositions;
41
+ render(): void;
42
+ private _createOverlayContainer;
43
+ private _clearCards;
44
+ private _expandContainerWidth;
45
+ private _restoreContainerWidth;
46
+ private _applyContainerWidth;
47
+ private _renderLines;
48
+ private _renderCards;
49
+ private _createCardDom;
50
+ private _renderCardBody;
51
+ private _renderReplyInput;
52
+ private _applyCardStyle;
53
+ private _updateCardDom;
54
+ private _refreshCard;
55
+ private _handleSave;
56
+ private _handleCancel;
57
+ private _toggleMenu;
58
+ private _closeMenu;
59
+ destroy(): void;
60
+ }
61
+
62
+ export declare interface DocxCommentMeta {
63
+ id: string | number;
64
+ content: string;
65
+ author?: string;
66
+ date?: string;
67
+ }
68
+
69
+ export declare interface RevisionCallbacks {
70
+ onAccept?: (revisionId: string) => void;
71
+ onReject?: (revisionId: string) => void;
72
+ }
73
+
74
+ export declare class RevisionComponent {
75
+ private _command;
76
+ private _container;
77
+ private _overlayContainer;
78
+ private _svgEl;
79
+ private _balloonDoms;
80
+ private _callbacks;
81
+ private get _revisionColor();
82
+ install(command: Command_2, callbacks?: RevisionCallbacks): this;
83
+ private _createOverlayContainer;
84
+ private _createSvg;
85
+ private _formatDate;
86
+ private _createBalloonDom;
87
+ private _getPageOffsetY;
88
+ private _getPolylinePoints;
89
+ private _getRevisions;
90
+ getRevisions(): Array<{
91
+ id: string;
92
+ type: 'delete';
93
+ author: string;
94
+ date: string;
95
+ content: string;
96
+ }>;
97
+ update(): void;
98
+ private _expandContainerWidth;
99
+ private _restoreContainerWidth;
100
+ private _applyContainerWidth;
101
+ private _renderBalloons;
102
+ private _clear;
103
+ acceptRevision(revisionId: string): void;
104
+ rejectRevision(revisionId: string): void;
105
+ acceptAllRevisions(): void;
106
+ rejectAllRevisions(): void;
107
+ destroy(): void;
108
+ }
109
+
110
+ export { }
package/package.json ADDED
@@ -0,0 +1,50 @@
1
+ {
2
+ "name": "@vervedoc/docx-editor-comment",
3
+ "version": "1.0.6",
4
+ "description": "DocxEditor 批注系统模块",
5
+ "author": "wanghe",
6
+ "license": "MIT",
7
+ "type": "module",
8
+ "main": "./dist/docx-editor-comment.umd.cjs",
9
+ "module": "./dist/docx-editor-comment.js",
10
+ "types": "./dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/index.d.ts",
14
+ "import": "./dist/docx-editor-comment.js",
15
+ "require": "./dist/docx-editor-comment.umd.cjs"
16
+ }
17
+ },
18
+ "publishConfig": {
19
+ "access": "public"
20
+ },
21
+ "files": [
22
+ "dist",
23
+ "README.md",
24
+ "package.json"
25
+ ],
26
+ "scripts": {
27
+ "dev": "vite",
28
+ "clean": "node -e \"const fs = require('fs'); if(fs.existsSync('dist')) fs.rmSync('dist', {recursive: true})\"",
29
+ "build": "npm run clean && tsc && vite build",
30
+ "preview": "vite preview",
31
+ "type:check": "tsc --noEmit"
32
+ },
33
+ "dependencies": {
34
+ "@vervedoc/docx-editor-schema": "1.0.7",
35
+ "@vervedoc/docx-editor-state": "1.0.2",
36
+ "@vervedoc/docx-editor-transform": "1.0.7"
37
+ },
38
+ "devDependencies": {
39
+ "@eslint/js": "^10.0.1",
40
+ "eslint": "^10.4.0",
41
+ "eslint-plugin-unused-imports": "^4.4.1",
42
+ "typescript": "^5.0.0",
43
+ "typescript-eslint": "^8.59.4",
44
+ "vite": "^5.4.10",
45
+ "vite-plugin-dts": "^4.5.4"
46
+ },
47
+ "engines": {
48
+ "node": ">=16.0.0"
49
+ }
50
+ }