npm - @hailin-zheng/editor-core - Versions diffs - 2.1.28 → 2.2.0 - Mend

@hailin-zheng/editor-core 2.1.28 → 2.2.0

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.

Files changed (74) hide show

package/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ import * as acor from 'acorn';
 import { generate } from 'astring';
 import estraverse from 'estraverse';
 import JsBarcode from 'jsbarcode';
-import { toVNode, init as init$1, styleModule, classModule, attributesModule, eventListenersModule, h } from 'snabbdom';
+import { toVNode, init as init$1, styleModule, classModule, attributesModule, eventListenersModule, datasetModule, h } from 'snabbdom';
 /**
  * 元素事件
@@ -951,7 +951,7 @@ function getExactDiffProps(oldProps, newProps) {
     });
     return obj;
 }
-function generatePatch(doc) {
+function generatePatch(doc, clear = true) {
     const insertOpsMap = new Map();
     const formatOpsMap = new Map();
     const patches = [];
@@ -977,6 +977,9 @@ function generatePatch(doc) {
             }
             formatOpsMap.set(ele, op);
         }
+        if ('insert' in op.ops) {
+            insertOpsMap.set(ele, op);
+        }
         // if ('insert' in op.ops) {
         //     op.ops.insert = ele.clone(true);
         //     const log = getOpsLog(ele, op.ops);
@@ -984,17 +987,17 @@ function generatePatch(doc) {
         //     op.prevIndex = log.prevIndex;
         //     op.parentIndex = log.parentIndex;
         // }
-        if ('insert' in op.ops) {
-            const prevEle = ElementUtil.getPrevSiblingElement(ele);
-            op.ops.insert = ele.clone(true);
-            op.index = ElementUtil.getControlIndex(ele, true);
-            op.parentIndex = ElementUtil.getControlIndex(ele.parent, true);
-            op.prevIndex = prevEle ? ElementUtil.getControlIndex(prevEle, true) : -1;
-        }
+        // if ('insert' in op.ops) {
+        //     const prevEle = ElementUtil.getPrevSiblingElement(ele);
+        //     op.ops.insert = ele.clone(true);
+        //     op.index = ElementUtil.getControlIndex(ele, true);
+        //     op.parentIndex = ElementUtil.getControlIndex(ele.parent, true);
+        //     op.prevIndex = prevEle ? ElementUtil.getControlIndex(prevEle, true) : -1;
+        // }
         patches.push({ index: op.index, parentIndex: op.parentIndex, prevIndex: op.prevIndex, ops: op.ops });
     }
     //清空
-    ops.length = 0;
+    clear && (ops.length = 0);
     return patches;
 }
 /**
@@ -1025,11 +1028,11 @@ function mergeDiffProps(prevFormat, currFormat) {
 /**
  * 订阅者
  */
-class Subscription$1 {
+class Subscription {
     closed = false;
     once = false;
 }
-class EventSourceCore$1 {
+class EventSourceCore {
     closed = false;
     subs = [];
     next(data) {
@@ -1058,7 +1061,7 @@ class EventSourceCore$1 {
 /**
  * DOM事件处理
  */
-class DOMEventSource extends EventSourceCore$1 {
+class DOMEventSource extends EventSourceCore {
     dom;
     type;
     constructor(dom, type) {
@@ -1078,7 +1081,7 @@ class DOMEventSource extends EventSourceCore$1 {
         return sub;
     }
 }
-class DOMSubscription extends Subscription$1 {
+class DOMSubscription extends Subscription {
     listener;
     cancel;
     constructor(listener, cancel) {
@@ -1097,23 +1100,23 @@ class DOMSubscription extends Subscription$1 {
         this.cancel();
     }
 }
-class Subject$1 extends EventSourceCore$1 {
+class Subject extends EventSourceCore {
     subscribe(listener) {
-        const sub = new SubjectSubscription$1(listener, () => {
+        const sub = new SubjectSubscription(listener, () => {
             this.removeSub(sub);
         });
         this.addSub(sub);
         return sub;
     }
 }
-class OnceSubject extends Subject$1 {
+class OnceSubject extends Subject {
     subscribe(listener) {
         const sub = super.subscribe(listener);
         sub.once = true;
         return sub;
     }
 }
-class SubjectSubscription$1 extends Subscription$1 {
+class SubjectSubscription extends Subscription {
     listener;
     cancel;
     constructor(listener, cancel) {
@@ -1143,7 +1146,7 @@ class EventBus {
             handlers = [];
             this.subs.set(event, handlers);
         }
-        const sub = new Subject$1();
+        const sub = new Subject();
         sub.subscribe(handler);
         handlers.push(sub);
     }
@@ -1179,7 +1182,7 @@ class Rect {
 /**
  * 修改标志
  */
-var ModifyFlag$1;
+var ModifyFlag;
 (function (ModifyFlag) {
     //被修改
     ModifyFlag[ModifyFlag["Modify"] = 0] = "Modify";
@@ -1187,7 +1190,7 @@ var ModifyFlag$1;
     ModifyFlag[ModifyFlag["None"] = 1] = "None";
     //子项被修改
     ModifyFlag[ModifyFlag["Track"] = 2] = "Track";
-})(ModifyFlag$1 || (ModifyFlag$1 = {}));
+})(ModifyFlag || (ModifyFlag = {}));
 /**
  * 类型事件处理
  */
@@ -1215,11 +1218,11 @@ function invokeTypeHandler(ele, eventName, e, useCapture = false) {
  */
 class Element {
     type;
-    modifyFlag = ModifyFlag$1.Modify;
+    modifyFlag = ModifyFlag.Modify;
     isMouseenter;
     _eventMap;
-    _refreshEvent = new Subject$1();
-    _onChangeEvent = new Subject$1();
+    _refreshEvent = new Subject();
+    _onChangeEvent = new Subject();
     observers = new WeakMap();
     paintRenders = [];
     cacheRender;
@@ -1373,22 +1376,22 @@ class LeafElement extends Element {
         return 1;
     }
     pubOnChange(selfChange) {
-        if (this.modifyFlag === ModifyFlag$1.None) {
+        if (this.modifyFlag === ModifyFlag.None) {
             this.refreshView();
         }
-        if (this.modifyFlag === ModifyFlag$1.Track && selfChange === 'tracker') {
+        if (this.modifyFlag === ModifyFlag.Track && selfChange === 'tracker') {
             return;
         }
-        if (this.modifyFlag === ModifyFlag$1.Modify) {
+        if (this.modifyFlag === ModifyFlag.Modify) {
             return;
         }
         if (selfChange === 'tracker') {
-            if (this.modifyFlag === ModifyFlag$1.None) {
-                this.modifyFlag = ModifyFlag$1.Track;
+            if (this.modifyFlag === ModifyFlag.None) {
+                this.modifyFlag = ModifyFlag.Track;
             }
         }
         else {
-            this.modifyFlag = ModifyFlag$1.Modify;
+            this.modifyFlag = ModifyFlag.Modify;
         }
         this._onChangeEvent.next();
     }
@@ -1490,15 +1493,22 @@ class BranchElement extends Element {
         }, 0);
     }
     getSelfLength(pure) {
-        return 1 + this.chilren.reduce((prev, curr) => {
+        const len = 1 + this.chilren.reduce((prev, curr) => {
             return prev + curr.getSelfLength(pure);
         }, 0);
+        //fixed:block-container类型的元素，比如表格单元格，再插入元素的时候，内部没有
+        //段落，但是在文档排版时，会补充段落元素；因此在插入时，统计的index和len是有问题的
+        //因此在统计的时候，手动将数量修复
+        if (len === 1 && this instanceof BlockContainerElement) {
+            return 2;
+        }
+        return len;
     }
     treeFilter(predicate) {
         const items = [];
         for (let i = 0; i < this.length; i++) {
             const item = this.getChild(i);
-            if (predicate(item, i)) {
+            if (predicate(item)) {
                 items.push(item);
             }
             if (item instanceof BranchElement) {
@@ -1510,7 +1520,7 @@ class BranchElement extends Element {
     treeFind(predicate) {
         for (let i = 0; i < this.length; i++) {
             const item = this.getChild(i);
-            if (predicate(item, i)) {
+            if (predicate(item)) {
                 return item;
             }
             if (item instanceof BranchElement) {
@@ -1523,19 +1533,19 @@ class BranchElement extends Element {
         return null;
     }
     pubOnChange(selfChange) {
-        if (this.modifyFlag === ModifyFlag$1.Track && selfChange === 'tracker') {
+        if (this.modifyFlag === ModifyFlag.Track && selfChange === 'tracker') {
             return;
         }
-        if (this.modifyFlag === ModifyFlag$1.Modify) {
+        if (this.modifyFlag === ModifyFlag.Modify) {
             return;
         }
         if (selfChange === 'tracker') {
-            if (this.modifyFlag === ModifyFlag$1.None) {
-                this.modifyFlag = ModifyFlag$1.Track;
+            if (this.modifyFlag === ModifyFlag.None) {
+                this.modifyFlag = ModifyFlag.Track;
             }
         }
         else {
-            this.modifyFlag = ModifyFlag$1.Modify;
+            this.modifyFlag = ModifyFlag.Modify;
             //clearChildrenRenderCache(this);
             for (let i = 0; i < this.length; i++) {
                 this.getChild(i).pubOnChange('to-child');
@@ -1757,28 +1767,12 @@ class ViewOptions {
     defaultIndent = 20;
     //内容区宽度，受审阅窗口宽度影响
     get contentWidth() {
-        if (this.showReviewWindow) {
-            return this.docPageSettings.width + this.reviewWindowWidth;
-        }
-        return this.docPageSettings.width;
-    }
-    /**
-     * 内容区域的高度
-     * 同时限定canvas的最小宽度
-     */
-    get ContentWidth() {
-        let width = this.docPageSettings.width;
-        if (this.showReviewWindow) {
-            width = width + this.reviewWindowWidth;
-        }
-        return width;
+        return this.docPageSettings.width + this.reviewWindowWidth;
     }
     //两个页的间距
     docSpace = 0;
-    //是否显示审阅窗口
-    showReviewWindow = false;
     //审阅窗口宽度
-    reviewWindowWidth = 200;
+    reviewWindowWidth = 0;
     //缩放
     _scale = 1;
     get scale() {
@@ -1817,7 +1811,7 @@ class ViewOptions {
     editUser = { id: '', name: '' };
     //留痕区域的生效时间段，同一用户的留痕块在此时间外需要生成新的留痕块
     trackChangePeriod = 10;
-    onChange = new Subject$1();
+    onChange = new Subject();
     //打印模式，普通模式，续打模式
     printMode = 'normal';
     constructor() {
@@ -2886,65 +2880,6 @@ class BodyPartProps extends INotifyPropertyChanged {
     }
 }
-class CommsContainerElement extends BlockContainerElement {
-    constructor() {
-        super('comm-list');
-    }
-    createRenderObject(data) {
-        const render = new CommsContainerRenderObject(this);
-        render.rect.width = data.options.reviewWindowWidth;
-        return render;
-    }
-    serialize(viewOptions) {
-        return {
-            type: this.type,
-            props: {}
-        };
-    }
-    clone(data) {
-        const clone = new CommsContainerElement();
-        cloneElementBase(this, clone);
-        cloneChildren(this, clone, data);
-        return clone;
-    }
-}
-class CommsContainerRenderObject extends BlockContainerRenderObject {
-    //批注内容是否已经重组,只要重新绘制的时候组合一次即可
-    isMeasureComm;
-    commsMarks = [];
-    clone() {
-        const clone = new CommsContainerRenderObject(this.element);
-        clone.rect = ElementUtil.cloneRect(this.rect);
-        for (let i = 0; i < this.length; i++) {
-            clone.addChild(this.getChild(i).clone());
-        }
-        return clone;
-    }
-    exportSVG(event) {
-        const t = super.exportSVG(event);
-        t.children = [ElementUtil.createSvgEle('rect', {
-                x: 0,
-                y: 0,
-                width: this.rect.width,
-                height: this.rect.height,
-                fill: '#fafafa',
-                stroke: 'black',
-                'paint-order': 'stroke fill markers',
-                'stroke-width': 0.5,
-            })];
-        return t;
-    }
-}
-class CommentsFactory extends ElementFactory {
-    match(type) {
-        return type === "comm-list";
-    }
-    createElement(data) {
-        const commentsEle = new CommsContainerElement();
-        return commentsEle;
-    }
-}
 class DataDecorateElement extends LeafElement {
     dataEle;
     isPrefix;
@@ -3111,7 +3046,7 @@ class ParagraphElement extends BlockContentElement {
         super('p');
         this.props = new ParagraphProps();
         this.addEvent('BackspaceKey', (evt) => {
-            if (evt.selectionState.collapsed) {
+            if (evt.selectionState.editable && evt.selectionState.collapsed) {
                 const pFirstLeafElement = ElementUtil.getFirstLeafElement(this);
                 if (pFirstLeafElement === evt.source && evt.sourceOffset === 0) {
                     if (this.props.numberType >= 0) {
@@ -3127,7 +3062,7 @@ class ParagraphElement extends BlockContentElement {
         }, true);
         this.addEvent('ElementKeyDown', evt => {
             //当前存在缩进，点击tab
-            if (evt.sourceEvent.keyCode === 9) {
+            if (evt.selectionState.editable && evt.sourceEvent.keyCode === 9) {
                 const { startControl, startOffset } = evt.selectionState;
                 if (startOffset === 0 && startControl === this.getChild(0)) {
                     const defaultIndent = evt.ctx.viewOptions.defaultIndent;
@@ -3643,60 +3578,6 @@ class DocumentRenderObject extends BlockContainerRenderObject {
             render.contentContext.drawText(viewOptions.copyRightInfo, textP, position.x + 5, position.y + 5, 100, 12);
         }
     }
-    /**
-     * 绘制文档边距线
-     */
-    drawMarginLine(position, render, docWidth, docHeight) {
-        const padding = this.padding;
-        let paddingPos = { x: padding.left + position.x, y: padding.top + position.y };
-        const drawLineWidth = 0.5;
-        const lineWidth = 20;
-        render.overlaysContext.strokeLines([{ x: paddingPos.x - lineWidth, y: paddingPos.y }, paddingPos, {
-                x: paddingPos.x,
-                y: paddingPos.y - lineWidth
-            }], drawLineWidth);
-        paddingPos = { x: docWidth - padding.right + position.x, y: padding.top + position.y };
-        render.overlaysContext.strokeLines([{ x: paddingPos.x + lineWidth, y: paddingPos.y }, paddingPos, {
-                x: paddingPos.x,
-                y: paddingPos.y - lineWidth
-            }], drawLineWidth);
-        paddingPos = { x: padding.left + position.x, y: docHeight - this.padding.bottom + position.y };
-        render.overlaysContext.strokeLines([{ x: paddingPos.x - lineWidth, y: paddingPos.y }, paddingPos, {
-                x: paddingPos.x,
-                y: paddingPos.y + lineWidth
-            }], drawLineWidth);
-        paddingPos = { x: docWidth - padding.left + position.x, y: docHeight - this.padding.bottom + position.y };
-        render.overlaysContext.strokeLines([{ x: paddingPos.x + lineWidth, y: paddingPos.y }, paddingPos, {
-                x: paddingPos.x,
-                y: paddingPos.y + lineWidth
-            }], drawLineWidth);
-    }
-    /**
-     * 绘制水印
-     * @param ctx
-     * @param position
-     */
-    drawWatermark(ctx, viewOptions, position) {
-        if (viewOptions.watermark) {
-            const watermark = viewOptions.watermark;
-            ctx.contentContext.ctx.save();
-            ctx.contentContext.ctx.translate(position.x, position.y);
-            const { width, height } = this.rect;
-            const degrees = Math.atan(height / width) * 180 / Math.PI;
-            ctx.contentContext.ctx.rotate(degrees * Math.PI / 180);
-            ctx.contentContext.ctx.globalAlpha = 0.3;
-            const d = Math.sqrt(width * width + height * height);
-            const textProps = new TextProps();
-            textProps.color = "#000000";
-            textProps.fontName = '楷体';
-            textProps.fontSize = 60;
-            const textWidth = ctx.contentContext.measureText(watermark, textProps).width;
-            const x = d / 2 - textWidth / 2;
-            ctx.contentContext.ctx.font = textProps.getFont();
-            ctx.contentContext.ctx.fillText(watermark, x, 30);
-            ctx.contentContext.ctx.restore();
-        }
-    }
     clone() {
         throw new Error('未实现');
     }
@@ -3741,9 +3622,6 @@ class DocumentRenderObject extends BlockContainerRenderObject {
         return pageNumNode;
     }
     exportSVG(event) {
-        const padding = this.padding;
-        event.options.docPageSettings;
-        ({ x: padding.left, y: padding.top });
         const selection = {
             sel: "g",
             data: {
@@ -4485,7 +4363,7 @@ class TableRowElement extends BlockContainerElement {
     beginMeasure(data) {
         super.beginMeasure(data);
         //在差异更新中，由于行内单元格存在合并行的情况，需要将当前行内存在合并的单元格，将其修改标志改为修改
-        if (this.modifyFlag === ModifyFlag$1.Track) {
+        if (this.modifyFlag === ModifyFlag.Track) {
             this.checkRowModifyState();
         }
     }
@@ -4505,17 +4383,17 @@ class TableRowElement extends BlockContainerElement {
                 const endRowIndex = TableUtil.getVMergeEndIndex(tb, currRowIndex, i);
                 const startRowIndex = TableUtil.getVMergeStartIndex(tb, currRowIndex, i);
                 for (let j = startRowIndex; j <= endRowIndex; j++) {
-                    setChildrenModifyFlag(ModifyFlag$1.Modify, tb.getChild(j));
+                    setChildrenModifyFlag(ModifyFlag.Modify, tb.getChild(j));
                 }
             }
             else if (cell.props.vMerge === 'restart') {
                 const endRowIndex = TableUtil.getVMergeEndIndex(tb, currRowIndex, i);
                 for (let j = currRowIndex; j <= endRowIndex; j++) {
-                    setChildrenModifyFlag(ModifyFlag$1.Modify, tb.getChild(j));
+                    setChildrenModifyFlag(ModifyFlag.Modify, tb.getChild(j));
                 }
                 break;
             }
-            cell.modifyFlag = ModifyFlag$1.Modify;
+            cell.modifyFlag = ModifyFlag.Modify;
         }
     }
     createRenderObject() {
@@ -4620,7 +4498,7 @@ class TextGroupElement extends LeafElement {
         return this.textMeasures.map(item => item.char).join('');
     }
     createRenderObject(data) {
-        if (!this.isMeasure || this.modifyFlag !== ModifyFlag$1.None || !this.cacheRender) {
+        if (!this.isMeasure || this.modifyFlag !== ModifyFlag.None || !this.cacheRender) {
             data.renderCtx.contentContext.measureTextUnits(this.textMeasures, this.props);
             //data.renderCtx.contentContext.measureTextMetrics(this.props.getFont());
             this.isMeasure = true;
@@ -5441,7 +5319,8 @@ class TableUtil {
                     currCell.props.hMerge = null;
                 }
                 if (currCell !== startCell) {
-                    if (currCell.getChildLength() !== 2) {
+                    //单元格存在有效内容
+                    if (currCell.getChildLength() > 2) {
                         cellContents.push(...ElementUtil.getChildrenElements(currCell.clone(true)));
                         currCell.clearItems();
                     }
@@ -5506,6 +5385,9 @@ class TableUtil {
                         this.restoreCellMerge(cell);
                     }
                 }
+                else {
+                    break;
+                }
             }
         }
         if (hMerge === 'restart') {
@@ -5517,6 +5399,9 @@ class TableUtil {
                         this.restoreCellMerge(cell);
                     }
                 }
+                else {
+                    break;
+                }
             }
         }
         cell.props.hMerge = null;
@@ -6496,94 +6381,6 @@ class CommentContentFactory extends ElementFactory {
     }
 }
-class CommentsUtil {
-    static createCommentsImage(commWindow) {
-        const commContainer = commWindow.element.cacheRender;
-        commWindow.clear();
-        for (let i = 0; i < commContainer.length; i++) {
-            const commRender = commContainer.getChild(i);
-            const commEle = commRender.element;
-            const mapComm = commWindow.commsMarks.find(item => item.element.props.id === commEle.props.id);
-            if (mapComm) {
-                const commContentRender = commRender.clone();
-                commContentRender.rect.x = 0;
-                commContentRender.rect.y = 0;
-                commWindow.addChild(commContentRender);
-            }
-        }
-    }
-    static arrangeComments(commWindow) {
-        if (commWindow.isMeasureComm) {
-            return;
-        }
-        const commContainer = commWindow.element.cacheRender;
-        const commMap = [];
-        const docRender = ElementUtil.getParentRender(commWindow, DocumentRenderObject);
-        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender);
-        for (let i = 0; i < commContainer.length; i++) {
-            const commRender = commContainer.getChild(i);
-            const commEle = commRender.element;
-            const mapComm = commWindow.commsMarks.find(item => item.element.props.id === commEle.props.id);
-            if (mapComm) {
-                const commRenderPos = ElementUtil.getRenderAbsolutePaintPos(mapComm);
-                const commPos = { x: commRenderPos.x - docRenderPos.x, y: commRenderPos.y - docRenderPos.y };
-                const commMarkLinePos = ElementUtil.getParaLinePos(mapComm, commPos);
-                commPos.y = commMarkLinePos.y + 2;
-                const commContentRender = commWindow.getItems().find(item => item.element === commRender.element);
-                //const commContentRender = commRender.clone() as CommContentBaseRenderObject<any>;
-                commContentRender.rect.x = 0;
-                commContentRender.rect.y = commPos.y;
-                //commWindow.addChild(commContentRender);
-                commMap.push({
-                    commMarkRender: mapComm,
-                    commMarkPos: commPos,
-                    commContentRender: commContentRender
-                });
-            }
-        }
-        let sumCommentHeight = 0;
-        for (let i = 0; i < commMap.length; i++) {
-            const map = commMap[i];
-            const prevRender = commMap[i - 1]?.commContentRender;
-            const { commContentRender } = map;
-            sumCommentHeight += commContentRender.rect.height + 5;
-            if (prevRender) {
-                const { y: prevY, height: prevHeight } = prevRender.rect;
-                if (commContentRender.rect.y < prevY + prevHeight) {
-                    commContentRender.rect.y = prevY + prevHeight + 5;
-                }
-            }
-            commContentRender.commMarkRender = { render: map.commMarkRender, pos: map.commMarkPos };
-        }
-        if (!commMap.length) {
-            return;
-        }
-        const lastCommentMap = commMap[commMap.length - 1];
-        const { commContentRender: lastCommContentRender } = lastCommentMap;
-        const { rect: lastRect } = lastCommContentRender;
-        //批注内容超出文档，需要重新排序
-        if (lastRect.y + lastRect.height > docRender.rect.height) {
-            //总内容小于容器高度,则进行倒排
-            //否则进行正排
-            if (sumCommentHeight < docRender.rect.height) {
-                lastRect.y = docRender.rect.height - lastRect.height;
-                for (let i = commMap.length - 1; i >= 0; i--) {
-                    const map = commMap[i];
-                    const prevRender = commMap[i + 1]?.commContentRender;
-                    const { commContentRender } = map;
-                    if (prevRender) {
-                        const { y: prevY } = prevRender.rect;
-                        if (commContentRender.rect.y + commContentRender.rect.height > prevY) {
-                            commContentRender.rect.y = prevY - commContentRender.rect.height - 5;
-                        }
-                    }
-                    commContentRender.commMarkRender = { render: map.commMarkRender, pos: map.commMarkPos };
-                }
-            }
-        }
-    }
-}
 let activeEditorContext = null;
 function setActiveEditorContext(ctx) {
     activeEditorContext = ctx;
@@ -6796,7 +6593,7 @@ class SelectionState {
     set endControl(value) {
         this._endControl = value;
     }
-    onChangedEvent = new Subject$1();
+    onChangedEvent = new Subject();
     startControlIndex;
     startOffset;
     endControlIndex;
@@ -7003,7 +6800,7 @@ class CommentElement extends LeafElement {
     color;
     constructor() {
         super('comm');
-        this.isDecorate = true;
+        //this.isDecorate = true;
         this.disableClick = true;
         this.props = new CommProps();
         this.color = CommonUtil.randomRgbColor(0.5);
@@ -7059,10 +6856,14 @@ class CommentRenderObject extends LeafRenderObject {
         if (this.element.paintRenders.indexOf(this) !== 0) {
             return;
         }
+        const { x, y } = event.globalPos;
+        const docRender = ElementUtil.getParentRender(this, DocumentRenderObject);
         const appCtx = getActiveEditorContext();
         const opType = '批注：';
         const content = this.element.props.text;
-        const left = 5;
+        let left = 5;
+        //显示在文档的右测
+        left += docRender.rect.x + docRender.rect.width + 20;
         let sel = 'div.tg-container';
         const node = {
             sel,
@@ -7070,7 +6871,10 @@ class CommentRenderObject extends LeafRenderObject {
             data: {
                 style: {
                     left: `${left}px`,
-                    top: `${event.globalPos.y}px`
+                    top: `${y}px`
+                },
+                dataset: {
+                    key: this.element.key
                 },
                 on: {
                     click: (e) => {
@@ -7113,6 +6917,43 @@ class CommentRenderObject extends LeafRenderObject {
                 }]
         };
         event.addChangeTips(node);
+        const triangleTipX = x + this.rect.width / 2;
+        const tipLineAWidth = docRender.rect.x + docRender.rect.width - triangleTipX;
+        const tipLineA = {
+            sel: 'div.doc-triangle-line',
+            data: {
+                style: {
+                    left: `${triangleTipX}px`,
+                    top: `${y + this.rect.height}px`,
+                    width: tipLineAWidth + 'px'
+                }
+            }
+        };
+        const tipLineB = {
+            sel: 'div.doc-triangle-line',
+            data: {
+                style: {
+                    left: `${triangleTipX + tipLineAWidth}px`,
+                    top: `${y + this.rect.height}px`,
+                    width: 20 + 'px'
+                },
+                dataset: {
+                    key: this.element.key
+                }
+            }
+        };
+        const triangleTip = {
+            sel: `div.doc-triangle`,
+            data: {
+                style: {
+                    left: `${triangleTipX}px`,
+                    top: `${y + this.rect.height * 2 / 3}px`
+                }
+            }
+        };
+        event.addChangeTips(triangleTip);
+        event.addChangeTips(tipLineA);
+        event.addChangeTips(tipLineB);
         // <div class="container">
         // <div class="header">
         // <span class="header-user">张三</span>
@@ -7146,10 +6987,72 @@ class CommentFactory extends ElementFactory {
         ele.props.id = props.id;
         ele.props.markType = props.markType;
         ele.props.text = props.text;
+        ele.props.userId = props.userId;
+        ele.props.userName = props.userName;
+        ele.props.date = props.date;
         return ele;
     }
 }
+class CommsContainerElement extends BlockContainerElement {
+    constructor() {
+        super('comm-list');
+    }
+    createRenderObject(data) {
+        const render = new CommsContainerRenderObject(this);
+        render.rect.width = data.options.reviewWindowWidth;
+        return render;
+    }
+    serialize(viewOptions) {
+        return {
+            type: this.type,
+            props: {}
+        };
+    }
+    clone(data) {
+        const clone = new CommsContainerElement();
+        cloneElementBase(this, clone);
+        cloneChildren(this, clone, data);
+        return clone;
+    }
+}
+class CommsContainerRenderObject extends BlockContainerRenderObject {
+    //批注内容是否已经重组,只要重新绘制的时候组合一次即可
+    isMeasureComm;
+    commsMarks = [];
+    clone() {
+        const clone = new CommsContainerRenderObject(this.element);
+        clone.rect = ElementUtil.cloneRect(this.rect);
+        for (let i = 0; i < this.length; i++) {
+            clone.addChild(this.getChild(i).clone());
+        }
+        return clone;
+    }
+    exportSVG(event) {
+        const t = super.exportSVG(event);
+        t.children = [ElementUtil.createSvgEle('rect', {
+                x: 0,
+                y: 0,
+                width: this.rect.width,
+                height: this.rect.height,
+                fill: '#fafafa',
+                stroke: 'black',
+                'paint-order': 'stroke fill markers',
+                'stroke-width': 0.5,
+            })];
+        return t;
+    }
+}
+class CommentsFactory extends ElementFactory {
+    match(type) {
+        return type === "comm-list";
+    }
+    createElement(data) {
+        const commentsEle = new CommsContainerElement();
+        return commentsEle;
+    }
+}
 /**
  * 数据元验证提示
  */
@@ -10597,7 +10500,7 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
         if (fillColor) {
             t.data.attrs['fill'] = fillColor;
         }
-        this.createChangeTips(event);
+        this.createModifyTips(event);
         const { x, y } = event.relativePagePos;
         const color = this.element.type === 'ins-run' ? 'green' : 'red';
         if (this.element.type === 'del-run') {
@@ -10605,35 +10508,39 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
             event.highlights.push(ElementUtil.getStrokeSvgPath(`M${x} ${delY} H${x + this.rect.width}`, 'red', 1));
             event.highlights.push(ElementUtil.getStrokeSvgPath(`M${x} ${delY + 4} H${x + this.rect.width}`, 'red', 1));
         }
-        if (this.element.gotFocus && event.options.showTrackChanges) {
+        if (this.element.gotFocus) {
             //起始位置
             if (this.element.paintRenders.indexOf(this) === 0) {
                 const pathPoints = [];
                 pathPoints.push({ x: x, y: y + this.rect.height / 3 });
                 pathPoints.push({ x, y });
                 pathPoints.push({ x: x + this.rect.width, y: y });
-                event.highlights.push(ElementUtil.getStrokeSvgPath(pathPoints, color, 2));
+                event.highlights.push(ElementUtil.getStrokeSvgPath(pathPoints, color, 1));
             }
             if (this.element.paintRenders.indexOf(this) === this.element.paintRenders.length - 1) {
                 const pathPoints = [];
                 pathPoints.push({ x: x, y: y + this.rect.height });
                 pathPoints.push({ x: x + this.rect.width, y: y + this.rect.height });
                 pathPoints.push({ x: x + this.rect.width, y: y + this.rect.height * 2 / 3 });
-                event.highlights.push(ElementUtil.getStrokeSvgPath(pathPoints, color, 2));
+                event.highlights.push(ElementUtil.getStrokeSvgPath(pathPoints, color, 1));
             }
         }
         return t;
     }
-    createChangeTips(event) {
+    createModifyTips(event) {
         if (this.element.paintRenders.indexOf(this) !== 0) {
             return;
         }
         if (!event.options.showTrackChangesTip) {
             return;
         }
+        const { x, y } = event.globalPos;
+        const docRender = ElementUtil.getParentRender(this, DocumentRenderObject);
         const opType = this.element.type === 'ins-run' ? '插入:' : '删除:';
         const content = ElementSerialize.serializeString(this.element, { all: true });
-        const left = this.element.gotFocus ? -10 : 5;
+        let left = this.element.gotFocus ? -10 : 5;
+        //显示在文档的右测
+        left += docRender.rect.x + docRender.rect.width + 20;
         let sel = 'div.tg-container';
         if (this.element.gotFocus) {
             sel += '.tg-container--selected';
@@ -10644,7 +10551,10 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
             data: {
                 style: {
                     left: `${left}px`,
-                    top: `${event.globalPos.y}px`
+                    top: `${y}px`
+                },
+                dataset: {
+                    key: this.element.key
                 }
             },
             children: [{
@@ -10666,6 +10576,43 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
                 }]
         };
         event.addChangeTips(node);
+        const triangleTipX = x + this.rect.width / 2;
+        const tipLineAWidth = docRender.rect.x + docRender.rect.width - triangleTipX;
+        const tipLineA = {
+            sel: 'div.doc-triangle-line',
+            data: {
+                style: {
+                    left: `${triangleTipX}px`,
+                    top: `${y + this.rect.height}px`,
+                    width: tipLineAWidth + 'px'
+                }
+            }
+        };
+        const tipLineB = {
+            sel: 'div.doc-triangle-line',
+            data: {
+                style: {
+                    left: `${triangleTipX + tipLineAWidth}px`,
+                    top: `${y + this.rect.height}px`,
+                    width: 20 + 'px'
+                },
+                dataset: {
+                    key: this.element.key
+                }
+            }
+        };
+        const triangleTip = {
+            sel: `div.doc-triangle`,
+            data: {
+                style: {
+                    left: `${triangleTipX}px`,
+                    top: `${y + this.rect.height * 2 / 3}px`
+                }
+            }
+        };
+        event.addChangeTips(triangleTip);
+        event.addChangeTips(tipLineA);
+        event.addChangeTips(tipLineB);
     }
     clone() {
         const cloneRender = new TrackRunRenderObject(this.element);
@@ -12046,9 +11993,6 @@ class ElementUtil {
         if (element instanceof DocumentHeaderElement) {
             return { type: 'header', target: element };
         }
-        if (element instanceof CommsContainerElement) {
-            return { type: 'review', target: element };
-        }
         return this.getElementRegionTarget(element.parent);
     }
     /**
@@ -12417,6 +12361,22 @@ class ElementUtil {
             delete ele.attribute[attr];
         }
     }
+    static getMatchItems(item, predicate) {
+        const items = [];
+        if (predicate(item)) {
+            items.push(item);
+        }
+        if (item instanceof BranchElement) {
+            for (let i = 0; i < item.length; i++) {
+                const child = item.getChild(i);
+                const matchItems = this.getMatchItems(child, predicate);
+                if (matchItems) {
+                    items.push(...matchItems);
+                }
+            }
+        }
+        return items;
+    }
 }
 var TextUnitsHolder;
@@ -12913,7 +12873,7 @@ class EditorContext {
     docChange;
     clearPrevDocCb;
     //绘制结束之后回调函数
-    paintedCallback;
+    nextViewFn;
     constructor(selectionState, viewOptions) {
         this.selectionState = selectionState;
         this.viewOptions = viewOptions;
@@ -12923,8 +12883,8 @@ class EditorContext {
             this.syncRefresh?.();
         });
     }
-    setPaintedCallback(cb) {
-        this.paintedCallback = cb;
+    onNextView(cb) {
+        this.nextViewFn = cb;
     }
     get document() {
         return this._document;
@@ -12952,6 +12912,7 @@ class EditorContext {
                 this.selectionState?.renderContainer?.destroy();
                 this.clear();
                 this._document.destroy();
+                clearTraces(this._document);
             }
             this.clearPrevDocCb = null;
             this.selectionState.startHitInfo = null;
@@ -13034,7 +12995,7 @@ class EditorContext {
         if (!this._document) {
             return null;
         }
-        return this._document.modifyFlag === ModifyFlag$1.None ? 'appearance' : 'content';
+        return this._document.modifyFlag === ModifyFlag.None ? 'appearance' : 'content';
     }
 }
 /**
@@ -14336,7 +14297,7 @@ class DocumentArrange {
         };
     }
     measureControl(element, maxWidth) {
-        if (element.modifyFlag === ModifyFlag$1.None && element.cacheRender) {
+        if (element.modifyFlag === ModifyFlag.None && element.cacheRender) {
             return element.cacheRender;
         }
         if (element instanceof BlockContentElement) {
@@ -14738,7 +14699,7 @@ class DocumentArrange {
                 this.setMeasureCompletedModifyFlag(ele.getChild(i));
             }
         }
-        ele.modifyFlag = ModifyFlag$1.None;
+        ele.modifyFlag = ModifyFlag.None;
         if (!ele.loaded) {
             ele.loaded = true;
         }
@@ -14788,9 +14749,6 @@ class DocumentArrange {
         }
         for (let i = 0; i < renderTree.length; i++) {
             const currRender = renderTree.getChild(i);
-            if (currRender.element) {
-                this.cacheCommsRender(currRender);
-            }
             if (currRender instanceof BranchRenderObject) {
                 this.cacheRenders(currRender);
             }
@@ -14799,26 +14757,6 @@ class DocumentArrange {
             }
         }
     }
-    /**
-     * 缓存批注标志
-     * @private
-     */
-    cacheCommsRender(render) {
-        if (render.element && render.element.type === 'comm') {
-            const commElement = render.element;
-            if (commElement.props.markType === 'start') {
-                const currDocRender = this.cacheDoc;
-                const docCommContainer = currDocRender.getItems().find(item => item instanceof CommsContainerRenderObject);
-                if (docCommContainer) {
-                    docCommContainer.commsMarks.push(render);
-                }
-            }
-        }
-        if (render.element && render.element.type === 'comm-list') {
-            const commContainer = render;
-            CommentsUtil.createCommentsImage(commContainer);
-        }
-    }
     endMeasures(ele) {
         ele.endMeasure();
         if (ele instanceof BranchElement) {
@@ -14859,14 +14797,11 @@ class DocumentPaginator {
         this.docCtx.selectionState.renderContainer = this.docContainer;
         this.docContainer.rect.width = this.viewOptions.docPageSettings.width;
         const newMeasure = new DocumentArrange(this.docCtx, this.renderContext, this.seo);
-        const docPages = newMeasure.measureDoc();
-        this.setCommRangeMark();
-        this.docPages = docPages;
+        this.docPages = newMeasure.measureDoc();
         this.layoutPages();
     }
     /**
      * 文档页面显示布局
-     * @param pages
      */
     layoutPages() {
         if (!this.docContainer || !this.docPages) {
@@ -14949,39 +14884,6 @@ class DocumentPaginator {
     getDocContainer() {
         return this.docContainer;
     }
-    /***
-     * 设置审阅区间样式痕迹
-     */
-    setCommRangeMark() {
-        if (!this.viewOptions.showReviewWindow) {
-            return;
-        }
-        // const cce = this.docCtx.document.commentsContainerElement;
-        // const set = new Map<Element, SelectionContentRange>();
-        // const commentRangeStatus: Array<CommentRangeStatus> = [];
-        // for (let i = 0; i < cce.length; i++) {
-        //     const commContent = cce.getChild(i) as CommContentElement;
-        //     const commMarkPair = cce.markPairs.find(item => item.id === commContent.props.id);
-        //     if (commMarkPair) {
-        //         if (commMarkPair.start) {
-        //             commContent.startMark = commMarkPair.start;
-        //         }
-        //         if (commMarkPair.end) {
-        //             commContent.endMark = commMarkPair.end;
-        //         }
-        //     }
-        //     const {startMark, endMark, props: {id}, focus} = commContent;
-        //     const ancestorCommonControl = DocumentSelection.getAncestorCommonControl(startMark, endMark);
-        //     const commonRange = RangeUtil.getSectionRange(startMark, 0, endMark, 1, ancestorCommonControl);
-        //     SelectionOverlays.addToCommentSets(commonRange, set);
-        //     commentRangeStatus.push({
-        //         commContent,
-        //         range: commonRange
-        //     })
-        // }
-        // (<CommsContainerRenderObject>cce.cacheRender).selectedSet = set;
-        // (<CommsContainerRenderObject>cce.cacheRender).commentRangeStatus = commentRangeStatus;
-    }
 }
 class ElementReader {
@@ -15117,491 +15019,6 @@ class ElementReader {
     }
 }
-class Subscription {
-    closed = false;
-    once = false;
-}
-class EventSourceCore {
-    closed = false;
-    subs = [];
-    next(data) {
-        const subs = [...this.subs];
-        subs.forEach((sub) => {
-            sub.invoke(data);
-            if (sub.once) {
-                sub.unsubscribe();
-            }
-        });
-    }
-    addSub(sub) {
-        this.subs.push(sub);
-    }
-    removeSub(sub) {
-        const index = this.subs.indexOf(sub);
-        if (index >= 0) {
-            this.subs.splice(index, 1);
-        }
-    }
-    unsubscribe() {
-        this.subs.length = 0;
-        this.closed = true;
-    }
-}
-class Subject extends EventSourceCore {
-    subscribe(listener) {
-        const sub = new SubjectSubscription(listener, () => {
-            this.removeSub(sub);
-        });
-        this.addSub(sub);
-        return sub;
-    }
-    onceSubscribe(listener) {
-        const sub = this.subscribe(listener);
-        sub.once = true;
-        return sub;
-    }
-}
-class SubjectSubscription extends Subscription {
-    listener;
-    cancel;
-    constructor(listener, cancel) {
-        super();
-        this.listener = listener;
-        this.cancel = cancel;
-    }
-    invoke(data) {
-        if (this.closed) {
-            return;
-        }
-        this.listener(data);
-    }
-    unsubscribe() {
-        this.closed = true;
-        this.cancel();
-    }
-}
-var ModifyFlag;
-(function (ModifyFlag) {
-    ModifyFlag[ModifyFlag["None"] = 0] = "None";
-    ModifyFlag[ModifyFlag["Modify"] = 1] = "Modify";
-    ModifyFlag[ModifyFlag["Track"] = 2] = "Track";
-})(ModifyFlag || (ModifyFlag = {}));
-class NodeCore {
-    enableClip = true;
-    pointEvent = true;
-    allowHitTest = false;
-    hitTest(hitPos, currPos) {
-        return false;
-    }
-    get enable() {
-        return this._enable;
-    }
-    set enable(value) {
-        this.propertyChanged('enable', this._enable, value);
-    }
-    _enable = true;
-    enableFocus = false;
-    isFocused = false;
-    get cursor() {
-        return this._cursor;
-    }
-    set cursor(value) {
-        this.propertyChanged('cursor', this._cursor, value);
-        this._cursor = value;
-    }
-    _cursor = 'default';
-    get visible() {
-        return this._visible;
-    }
-    set visible(value) {
-        this.propertyChanged('visible', this._visible, value);
-        this._visible = value;
-    }
-    _visible = true;
-    get borderRadius() {
-        return this._borderRadius;
-    }
-    set borderRadius(value) {
-        this.propertyChanged('borderRadius', this._borderRadius, value);
-        this._borderRadius = value;
-    }
-    get width() {
-        return this._width;
-    }
-    set width(value) {
-        this.propertyChanged('width', this._width, value);
-        this._width = value;
-    }
-    get height() {
-        return this._height;
-    }
-    set height(value) {
-        this.propertyChanged('height', this._height, value);
-        this._height = value;
-    }
-    get x() {
-        return this._x;
-    }
-    set x(value) {
-        this.propertyChanged('x', this._x, value);
-        this._x = value;
-    }
-    get y() {
-        return this._y;
-    }
-    set y(value) {
-        this.propertyChanged('y', this._y, value);
-        this._y = value;
-    }
-    _minWidth = Number.NaN;
-    _minHeight = Number.NaN;
-    get minWidth() {
-        return this._minWidth;
-    }
-    set minWidth(value) {
-        this.propertyChanged('minWidth', this._minWidth, value);
-        this._minWidth = value;
-    }
-    get minHeight() {
-        return this._minHeight;
-    }
-    set minHeight(value) {
-        this.propertyChanged('minHeight', this._minHeight, value);
-        this._minHeight = value;
-    }
-    get bgColor() {
-        return this._bgColor;
-    }
-    set bgColor(value) {
-        this.propertyChanged('bgColor', this._bgColor, value);
-        this._bgColor = value;
-    }
-    _border = 0;
-    get border() {
-        return this._border;
-    }
-    set border(value) {
-        this.propertyChanged('border', this._border, Math.abs(value));
-        this._border = value;
-    }
-    _padding = 0;
-    get padding() {
-        return this._padding;
-    }
-    set padding(value) {
-        this.propertyChanged('padding', this._padding, Math.abs(value));
-        this._padding = value;
-    }
-    _borderRadius = 0;
-    _borderColor;
-    get borderColor() {
-        return this._borderColor;
-    }
-    set borderColor(value) {
-        this.propertyChanged('borderColor', this._borderColor, value);
-        this._borderColor = value;
-    }
-    _shadowBlur = 0;
-    _shadowColor;
-    get shadowBlur() {
-        return this._shadowBlur;
-    }
-    set shadowBlur(value) {
-        this.propertyChanged('shadowBlur', this._shadowBlur, value);
-        this._shadowBlur = value;
-    }
-    get shadowColor() {
-        return this._shadowColor;
-    }
-    set shadowColor(value) {
-        this.propertyChanged('shadowColor', this._shadowColor, value);
-        this._shadowColor = value;
-    }
-    _isMouseenter = false;
-    get isMouseenter() {
-        return this._isMouseenter;
-    }
-    set isMouseenter(value) {
-        this.propertyChanged('isMouseenter', this._isMouseenter, value);
-        this._isMouseenter = value;
-    }
-    _overflowHidden = true;
-    get overflowHidden() {
-        return this._overflowHidden;
-    }
-    set overflowHidden(value) {
-        this.propertyChanged('overflowHidden', this._overflowHidden, value);
-        this._overflowHidden = value;
-    }
-    outlineColor = '';
-    outlineStyle = 'none';
-    outlineWidth = 0;
-    _width = Number.NaN;
-    _height = Number.NaN;
-    _x = 0;
-    _y = 0;
-    //测量需要的大小
-    desiredSize;
-    //绘制的大小
-    renderSize;
-    //最终分配的大小
-    finalRect;
-    _bgColor;
-    _modifyFlag = ModifyFlag.Modify;
-    get modifyFlag() {
-        return this._modifyFlag;
-    }
-    set modifyFlag(value) {
-        this._modifyFlag = value;
-    }
-    onChangedEvent = new Subject();
-    listenerEvents = [];
-    parent;
-    propertyChanged(prop, old, newV) {
-        if (this._modifyFlag == ModifyFlag.Modify) {
-            return;
-        }
-        if (old === newV) {
-            return;
-        }
-        this.onChanged();
-    }
-    onChanged() {
-        if (this._modifyFlag == ModifyFlag.Modify) {
-            return;
-        }
-        this._modifyFlag = ModifyFlag.Modify;
-        // if (this.parent) {
-        //     this.parent.onChildChanged();
-        // }
-        this.onChangedEvent.next();
-    }
-    addEventListener(name, listener, useCapture = false) {
-        this.listenerEvents.push({
-            name,
-            listener: listener,
-            useCapture
-        });
-    }
-    removeEventListener(name, listener, useCapture = false) {
-        const index = this.listenerEvents.findIndex(item => item.name === name && item.listener === listener && item.useCapture === useCapture);
-        if (index >= 0) {
-            this.listenerEvents.splice(index, 1);
-        }
-    }
-    /**
-     * 父容器传入参数，子容器设置坐标位置
-     * @param e
-     * @param finalRect
-     */
-    arrange(e, finalRect) {
-        if (!this._visible) {
-            this.finalRect = { x: finalRect.x, y: finalRect.y, width: 0, height: 0 };
-            return;
-        }
-        const contentSize = this.getContentSize(finalRect.width, finalRect.height);
-        const finalSize = this.arrangeOverride(e, contentSize);
-        this.renderSize = this.getOuterSize({
-            width: Math.min(contentSize.width, finalSize.width),
-            height: Math.min(contentSize.height, finalSize.height)
-        });
-        this.finalRect = { x: finalRect.x, y: finalRect.y, width: this.renderSize.width, height: this.renderSize.height };
-    }
-    arrangeOverride(e, finalSize) {
-        return finalSize;
-    }
-    /**
-     * 测量阶段
-     * @param e
-     * @param availableSize
-     */
-    measure(e, availableSize) {
-        if (!this._visible) {
-            this.desiredSize = { width: 0, height: 0 };
-            return;
-        }
-        let width = 0, height = 0;
-        if (Number.isNaN(this._width)) {
-            width = availableSize.width;
-        }
-        else {
-            width = this.getPercentWidth(availableSize.width);
-        }
-        if (Number.isNaN(this._height)) {
-            height = availableSize.height;
-        }
-        else {
-            height = this.getPercentHeight(availableSize.height);
-        }
-        const measureSize = this.getOuterSize(this.measureOverride(e, this.getContentSize(width, height)));
-        if (Number.isNaN(this._width)) {
-            width = measureSize.width;
-        }
-        if (Number.isNaN(this._height)) {
-            height = measureSize.height;
-        }
-        this.desiredSize = { width, height };
-    }
-    getPercentWidth(val) {
-        if (typeof this._width === 'object') {
-            return val * this._width.value / 100;
-        }
-        else {
-            return this._width;
-        }
-    }
-    getPercentHeight(val) {
-        if (typeof this._height === 'object') {
-            return val * this._height.value / 100;
-        }
-        else {
-            return this._height;
-        }
-    }
-    /**
-     * 获取内容尺寸
-     * 元素模型为边框模型，元素的大小为默认包含边框大小，内容大小需要减去边框大小
-     * @private
-     * @param width
-     * @param height
-     */
-    getContentSize(width, height) {
-        return {
-            width: width - this._border * 2 - this._padding * 2,
-            height: height - this._border * 2 - this.padding * 2
-        };
-    }
-    /**
-     * 获取外部尺寸
-     * @param availableSize
-     * @private
-     */
-    getOuterSize(availableSize) {
-        return {
-            width: availableSize.width + this._border * 2 + this._padding * 2,
-            height: availableSize.height + this._border * 2 + this._padding * 2
-        };
-    }
-    /**
-     * 子元素需重写该方法
-     * @param e
-     * @param availableSize
-     */
-    measureOverride(e, availableSize) {
-        return availableSize;
-    }
-    preRender(e) {
-        return true;
-    }
-    attachedProp = {};
-    setAttachedProp(name, val) {
-        const key = name;
-        this.propertyChanged(key, this.attachedProp[key], val);
-        this.attachedProp[key] = val;
-    }
-    getAttachedPropValue(name) {
-        return this.attachedProp[name];
-    }
-    removeAttachedProp(name) {
-        this.propertyChanged(name, this.attachedProp[name], undefined);
-        delete this.attachedProp[name];
-    }
-    /**
-     * 绘制轮廓
-     */
-    renderOutline(renderCtx) {
-        drawOutline(this, renderCtx);
-        clipContent(this, renderCtx);
-        drawBorderline(this, renderCtx);
-        translate(renderCtx, this.finalRect.x, this.finalRect.y);
-        translate(renderCtx, this.border + this.padding, this.border + this.padding);
-    }
-}
-/**
- * 绘制边框
- * @param node
- * @param renderCtx
- */
-function drawBorderline(node, renderCtx) {
-    //renderCtx.contentContext.fillRect(node.x, node.y, node.finalRect.width, node.finalRect.height, node.bgColor);
-    if (!node.border) {
-        return;
-    }
-    let { finalRect: { x, y, width, height } } = node;
-    const ctx = renderCtx.ctx;
-    ctx.save();
-    ctx.fillStyle = node.borderColor;
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-    ctx.lineTo(x + width, y);
-    ctx.lineTo(x + width, y + height);
-    ctx.lineTo(x, y + height);
-    ctx.lineTo(x, y);
-    ctx.closePath();
-    ctx.fill();
-    if (node.border) {
-        ctx.globalCompositeOperation = 'source-atop';
-        x += node.border;
-        y += node.border;
-        width -= node.border * 2;
-        height -= node.border * 2;
-        const bgColor = node.bgColor ? node.bgColor : 'white';
-        ctx.fillStyle = bgColor;
-        renderCtx.roundRect(x, y, width, height, node.borderRadius);
-    }
-    ctx.fill();
-    ctx.restore();
-    //裁剪子内容区域范围
-    node.enableClip && renderCtx.clipFunc(() => renderCtx.roundRect(x, y, width, height, node.borderRadius));
-}
-/**
- * 绘制外轮廓
- */
-function drawOutline(node, renderCtx) {
-    if (node.outlineWidth <= 0 || node.outlineStyle === 'none' || !node.outlineColor) {
-        return;
-    }
-    let { x, y, finalRect: { width, height } } = node;
-    x -= node.outlineWidth / 2;
-    y -= node.outlineWidth / 2;
-    width += node.outlineWidth;
-    height += node.outlineWidth;
-    renderCtx.strokeRect(x, y, width, height, node.outlineColor, node.outlineWidth, node.borderRadius);
-}
-function clipContent(node, renderCtx) {
-    const x = node.finalRect.x;
-    const y = node.finalRect.y;
-    const width = node.finalRect.width;
-    const height = node.finalRect.height;
-    renderCtx.ctx.lineWidth = 0;
-    //绘制背景
-    if (node.bgColor) {
-        renderCtx.fillRect(x, y, width, height, node.bgColor, node.shadowBlur, node.shadowColor, node.borderRadius);
-    }
-    //确定绘制裁剪范围
-    renderCtx.clipFunc(() => renderCtx.roundRect(x, y, width, height, node.borderRadius));
-}
-function translate(renderCtx, x, y) {
-    renderCtx.ctx.translate(x, y);
-}
-class RectNode extends NodeCore {
-    render(e) {
-        // const {render}=e;
-        // const ctx=render.contentContext.ctx;
-        //
-        // var gradient = ctx.createLinearGradient(0,0, this.finalRect.width,0);
-        //
-        // gradient.addColorStop(0, 'green');
-        // gradient.addColorStop(.5, 'cyan');
-        // gradient.addColorStop(1, 'blue');
-        //
-        // ctx.fillStyle=gradient;
-        // ctx.fill();
-    }
-}
 /**
  * 事件系统
  */
@@ -15619,13 +15036,13 @@ class DocumentEvent {
     focusedRect;
     //当前光标所在的元素
     currentMouseoverRender;
-    hitInfoChanged = new Subject$1();
-    clickEvent = new Subject$1();
-    dblClickEvent = new Subject$1();
-    tripleClickEvent = new Subject$1();
-    changeCursor = new Subject$1();
-    contextMenu = new Subject$1();
-    trackTipsChanged = new Subject$1();
+    hitInfoChanged = new Subject();
+    clickEvent = new Subject();
+    dblClickEvent = new Subject();
+    tripleClickEvent = new Subject();
+    changeCursor = new Subject();
+    contextMenu = new Subject();
+    trackTipsChanged = new Subject();
     //光标处于边框的绘制元素
     edgeRenderInfo;
     //当前鼠标所在的page-position
@@ -16845,119 +16262,6 @@ class DocumentEvent {
         //     }
         // }
     }
-    /**
-     * 开启打印区域
-     */
-    startPrintArea(editor) {
-        const cancelToken = {};
-        const startRect = new RectNode();
-        startRect.x = 0;
-        startRect.y = 0;
-        startRect.width = editor.width;
-        startRect.height = 0;
-        //设置半透明颜色
-        startRect.bgColor = this.viewOptions.selectPrintAreaBgColor;
-        startRect.pointEvent = false;
-        const endRect = new RectNode();
-        endRect.x = 0;
-        endRect.y = editor.finalRect.height;
-        endRect.width = editor.width;
-        endRect.height = 0;
-        //设置半透明颜色
-        endRect.bgColor = this.viewOptions.selectPrintAreaBgColor;
-        endRect.pointEvent = false;
-        let state = 'start';
-        editor.parent?.addChild(startRect);
-        editor.parent?.addChild(endRect);
-        let startY = 0, startDocIndex = 0, endY = 0, endDocIndex = 0;
-        const onMousemoveHandler = (evt) => {
-            const pos = evt.sourceHitPos;
-            if (state === 'start') {
-                startRect.height = pos.y;
-            }
-            else {
-                if (startRect.height + 5 > pos.y) {
-                    return;
-                }
-                endRect.y = pos.y;
-                endRect.height = editor.finalRect.height - pos.y;
-            }
-        };
-        const onKeydownHandler = (evt) => {
-            if (evt.sourceEvt.keyCode === 27) {
-                cancelToken.cancel?.();
-            }
-        };
-        const onClickHandler = (evt) => {
-            const pos = evt.sourceHitPos;
-            const hitDoc = this.getHitDocPage({ globalX: pos.x, globalY: pos.y });
-            if (!hitDoc) {
-                return;
-            }
-            const { docIndex, hitPagePos } = hitDoc;
-            if (state === 'start') {
-                startY = hitPagePos.y;
-                startDocIndex = docIndex;
-                state = 'end';
-            }
-            else {
-                if (startRect.height + 5 > pos.y) {
-                    return;
-                }
-                endY = hitPagePos.y;
-                endDocIndex = docIndex;
-                cancelToken.onFinish?.({
-                    startY,
-                    startDocIndex,
-                    endY,
-                    endDocIndex
-                });
-            }
-        };
-        editor.addEventListener('mousemove', onMousemoveHandler);
-        editor.addEventListener('keydown', onKeydownHandler);
-        editor.addEventListener('click', onClickHandler);
-        cancelToken.cancel = () => {
-            if (!startRect.parent) {
-                return;
-            }
-            startRect.parent?.removeChild(startRect);
-            endRect.parent?.removeChild(endRect);
-            editor.removeEventListener('mousemove', onMousemoveHandler);
-            editor.removeEventListener('keydown', onKeydownHandler);
-            editor.removeEventListener('click', onClickHandler);
-        };
-        return cancelToken;
-    }
-    clicks = 0;
-    timeout;
-    /**
-     * 处理三击事件
-     */
-    handleTripleClick() {
-        this.clicks++;
-        let curr = this;
-        if (this.clicks === 1) {
-            // 设置延时，等待第二次点击
-            this.timeout = setTimeout(function () {
-                curr.clicks = 0;
-            }, 300);
-        }
-        else if (this.clicks === 2) {
-            // 第二次点击后，清除延时
-            clearTimeout(curr.timeout);
-            // 设置延时，等待第三次点击
-            curr.timeout = setTimeout(function () {
-                curr.clicks = 0;
-            }, 300);
-        }
-        else if (curr.clicks === 3) {
-            // 第三次点击后，处理三击事件并清除延时
-            clearTimeout(curr.timeout);
-            this.tripleClickEvent.next();
-            this.clicks = 0;
-        }
-    }
     /**
      * 获取当前光标所在的数据元
      * @returns
@@ -16990,34 +16294,34 @@ class DocumentEvent {
 class DocumentInput {
     docCtx;
     //输入内容事件
-    onInputEvent = new Subject$1();
+    onInputEvent = new Subject();
     //backspace 键盘事件
-    onBackspaceEvent = new Subject$1();
+    onBackspaceEvent = new Subject();
     //delete 键盘事件
-    onDeleteEvent = new Subject$1();
+    onDeleteEvent = new Subject();
     //enter 键盘事件
-    onEnterEvent = new Subject$1();
+    onEnterEvent = new Subject();
     //左键
-    onLeftEvent = new Subject$1();
+    onLeftEvent = new Subject();
     //右键
-    onRightEvent = new Subject$1();
+    onRightEvent = new Subject();
     //复制
-    onCopyEvent = new Subject$1();
+    onCopyEvent = new Subject();
     //剪切
-    onCutEvent = new Subject$1();
+    onCutEvent = new Subject();
     //粘贴
-    onPasteEvent = new Subject$1();
+    onPasteEvent = new Subject();
     //插入换行符
-    onInsertBr = new Subject$1();
+    onInsertBr = new Subject();
     //ctrl+A 全选事件
-    onSelectAllEvent = new Subject$1();
+    onSelectAllEvent = new Subject();
     //home 事件
-    onHomeEvent = new Subject$1();
+    onHomeEvent = new Subject();
     //end 事件
-    onEndEvent = new Subject$1();
-    onUpEvent = new Subject$1();
-    onDownEvent = new Subject$1();
-    onTabKeyEvent = new Subject$1();
+    onEndEvent = new Subject();
+    onUpEvent = new Subject();
+    onDownEvent = new Subject();
+    onTabKeyEvent = new Subject();
     constructor(docCtx) {
         this.docCtx = docCtx;
     }
@@ -17205,7 +16509,7 @@ class DocumentChange {
         });
     }
     newInput(data) {
-        if (data.composition && data.data === '在') {
+        if (data.composition && data.data === '啊') {
             debugger;
         }
         const { startControl, startOffset, collapsed, enableTrackChanges } = this.selectionState;
@@ -17230,6 +16534,9 @@ class DocumentChange {
             const comp = data.compositionStartInfo;
             comp.element = newInput;
             comp.offset = 0;
+            //修正数据
+            if (data.composition)
+                this.documentInput.correctInputEle(newInput, newInput.text, 0);
             this.inputTextGroup(newInput, data);
             return;
         }
@@ -17281,7 +16588,7 @@ class DocumentChange {
             return true;
         };
         //利用回调完成后续的输入处理
-        this.docCtx.setPaintedCallback(cb);
+        this.docCtx.onNextView(cb);
     }
     /**
      * 当前元素是否在正确的留痕区域(ins-run、del-run)，情况分为以下情况
@@ -18410,7 +17717,7 @@ class DocumentChange {
             const cb = () => {
                 this.handlePasteContent({ text: pasteText, doc: pasteData }, this.selectionState);
             };
-            this.docCtx.setPaintedCallback(cb);
+            this.docCtx.onNextView(cb);
             return;
         }
         this.handlePasteContent({ text: pasteText, doc: pasteData }, this.selectionState);
@@ -19344,7 +18651,7 @@ class ElementTrackManage {
         if (!ssLog) {
             return;
         }
-        this.docCtx.setPaintedCallback(() => {
+        this.docCtx.onNextView(() => {
             const { startIndex, startOffset, endIndex, endOffset, editable } = ssLog;
             const range = new SelectionRange();
             const sc = this.getControl(startIndex, false);
@@ -19450,6 +18757,9 @@ class ElementTrackManage {
     getControl(index, pure = true) {
         return ElementUtil.getControlByIndex(this.docCtx.document, { currIndex: -1, index: index }, pure);
     }
+    getControlIndex(control) {
+        return ElementUtil.getControlIndex(control, true);
+    }
 }
 class DocumentSvg {
@@ -19465,7 +18775,7 @@ class DocumentSvg {
         this.sso = sso;
         this.renderCtx = renderCtx;
     }
-    getVNode(render, selectionRects, parentPos) {
+    getVNode(render, parentMaskRect, parentPos) {
         const currPos = {
             x: parentPos.x + render.rect.x,
             y: parentPos.y + render.rect.y,
@@ -19473,17 +18783,13 @@ class DocumentSvg {
             height: render.rect.height
         };
         //处理选区遮罩
-        this.createSelectionRect(render, selectionRects, currPos);
-        //审阅窗口重新计算位置
-        if (this.viewOptions.showReviewWindow && render instanceof CommsContainerRenderObject) {
-            CommentsUtil.arrangeComments(render);
-        }
-        const getChildNodes = (node, selectionRects) => {
+        this.createSelectionRect(render, parentMaskRect, currPos);
+        const getChildNodes = (node, selectionMask) => {
             if (node instanceof BranchRenderObject) {
                 const children = [];
                 for (let i = 0; i < node.length; i++) {
                     const child = node.getChild(i);
-                    const vNode = this.getVNode(child, selectionRects, currPos);
+                    const vNode = this.getVNode(child, selectionMask, currPos);
                     if (Array.isArray(vNode)) {
                         children.push(...vNode);
                     }
@@ -19493,14 +18799,12 @@ class DocumentSvg {
                 }
                 return children;
             }
-            else {
-                return null;
-            }
+            return null;
         };
-        let selectionRectsTemp = [];
+        let currMaskGroup = { selection: [], mask: [] };
         const vNodeOptions = {
             getChildNodes: (node) => {
-                return getChildNodes(node, selectionRectsTemp);
+                return getChildNodes(node, currMaskGroup);
             },
             options: this.viewOptions,
             highlights: [],
@@ -19520,7 +18824,7 @@ class DocumentSvg {
             this.highlights.push(...vNodeOptions.highlights);
         }
         if (currVNode && !currVNode.isCompleted) {
-            const childNodes = getChildNodes(render, selectionRectsTemp);
+            const childNodes = getChildNodes(render, currMaskGroup);
             if (childNodes) {
                 if (!currVNode.children) {
                     currVNode.children = [];
@@ -19534,26 +18838,22 @@ class DocumentSvg {
             }
         }
         if (render instanceof ParagraphLineRectRenderObject) {
-            if (selectionRectsTemp.length > 0) {
-                const startX = selectionRectsTemp[0].x;
-                const endX = selectionRectsTemp[selectionRectsTemp.length - 1].x + selectionRectsTemp[selectionRectsTemp.length - 1].width;
-                selectionRects.push({
-                    x: startX,
-                    y: currPos.y,
-                    width: endX - startX,
-                    height: currPos.height,
-                    color: selectionRectsTemp[0].color
-                });
-                selectionRectsTemp.length = 0;
+            if (currMaskGroup.selection.length > 0) {
+                this.combineParaLineSelection(parentMaskRect.selection, currMaskGroup.selection, currPos);
             }
         }
         else if (render instanceof TableCellRenderObject) {
             if (this.sso.selectionEleSets.has(render.element) && this.sso.selectionEleSets.get(render.element)?.isFullSelected) {
-                selectionRects.push(currPos);
-                selectionRectsTemp.length = 0;
+                parentMaskRect.selection.push(currPos);
+                currMaskGroup.selection.length = 0;
+            }
+            if (this.sso.commRangeSets.has(render.element) && this.sso.commRangeSets.get(render.element)?.isFullSelected) {
+                parentMaskRect.mask.push(currPos);
+                currMaskGroup.mask.length = 0;
             }
         }
-        selectionRects.push(...selectionRectsTemp);
+        parentMaskRect.selection.push(...currMaskGroup.selection);
+        parentMaskRect.mask.push(...currMaskGroup.mask);
         // if (currVNode && currVNode.data?.attrs?.transform) {
         //     currVNode.data.attrs.transform = `translate(${currVNode.data?.attrs?.transform.x},${currVNode.data?.attrs?.transform.y})`
         // }
@@ -19573,13 +18873,6 @@ class DocumentSvg {
                 if (line && !item.data.attrs.transform) {
                     item.data.attrs.transform = `translate(${translateX},${translateY})`;
                 }
-                // if (item && item.data?.attrs?.transform && typeof item.data?.attrs?.transform === 'object') {
-                //     item.data.attrs.transform = `translate(${item.data.attrs.transform.x + translateX},${item.data.attrs.transform.y + translateY})`
-                // } else {
-                //     if (line && !item.data.attrs.transform) {
-                //         item.data.attrs.transform = `translate(${translateX},${translateY})`;
-                //     }
-                // }
             });
             if (line) {
                 return currVNode.children;
@@ -19590,32 +18883,35 @@ class DocumentSvg {
         }
         return currVNode;
     }
-    createSelectionRect(render, selectionRects, currPos) {
-        const items = [this.sso.selectionEleSets, this.sso.commRangeSets];
-        for (const item of items) {
-            if (item.has(render.element)) {
-                const range = item.get(render.element);
-                if (render.element && render instanceof LeafRenderObject) {
-                    if (range.isFullSelected) {
-                        selectionRects.push({ ...currPos, color: range['rangeColor'] });
-                    }
-                    else {
-                        if (render.element instanceof TextGroupElement && range.endOffset > range.startOffset) {
-                            const { startX, endX } = ElementUtil.getTextRenderHorX(render, range.startOffset, range.endOffset);
-                            const width = endX - startX;
-                            const x = currPos.x + startX;
-                            // @ts-ignore
-                            selectionRects.push({
-                                x,
-                                y: currPos.y,
-                                width,
-                                height: currPos.height,
-                                color: range['rangeColor']
-                            });
-                        }
+    createSelectionRect(render, selectionMask, currPos) {
+        const createMaskVNode = (range, selectionRects) => {
+            if (render.element && render instanceof LeafRenderObject) {
+                if (range.isFullSelected) {
+                    selectionRects.push({ ...currPos, color: range['rangeColor'] });
+                }
+                else {
+                    if (render.element instanceof TextGroupElement && range.endOffset > range.startOffset) {
+                        const { startX, endX } = ElementUtil.getTextRenderHorX(render, range.startOffset, range.endOffset);
+                        const width = endX - startX;
+                        const x = currPos.x + startX;
+                        selectionRects.push({
+                            x,
+                            y: currPos.y,
+                            width,
+                            height: currPos.height,
+                            color: range['rangeColor']
+                        });
                     }
                 }
             }
+        };
+        if (this.sso.selectionEleSets.has(render.element)) {
+            const range = this.sso.selectionEleSets.get(render.element);
+            createMaskVNode(range, selectionMask.selection);
+        }
+        if (this.sso.commRangeSets.has(render.element)) {
+            const range = this.sso.commRangeSets.get(render.element);
+            createMaskVNode(range, selectionMask.mask);
         }
     }
     getHTMLVNode(docRenders) {
@@ -19664,12 +18960,13 @@ class DocumentSvg {
     }
     getPageSvgVNode(item) {
         this.highlights = [];
-        const rects = [];
+        const rects = { selection: [], mask: [] };
         this.pagePos = { x: item.rect.x, y: item.rect.y };
         const pageSvg = this.getVNode(item, rects, { x: -item.rect.x, y: -item.rect.y });
         const selectionNode = pageSvg.children?.find(item => item && item.data?.attrs?.id === 'selection');
-        const hightlightNode = pageSvg.children?.find(item => item && item.data?.attrs?.id === 'highlight');
-        selectionNode.children = rects.map(item => ({
+        const highlightNode = pageSvg.children?.find(item => item && item.data?.attrs?.id === 'highlight');
+        rects.selection = rects.selection.concat(rects.mask);
+        selectionNode.children = rects.selection.map(item => ({
             sel: 'path',
             data: {
                 ns: 'http://www.w3.org/2000/svg',
@@ -19682,7 +18979,7 @@ class DocumentSvg {
                 }
             }
         }));
-        hightlightNode.children = this.highlights;
+        highlightNode.children = this.highlights;
         return pageSvg;
     }
     counterMap = {};
@@ -19702,6 +18999,25 @@ class DocumentSvg {
     addChangeTips(tipVNode) {
         this.changeTips.push(tipVNode);
     }
+    /**
+     * 合并段落行选区
+     * @param parentMaskRect
+     * @param currMaskRect
+     * @param currPos
+     * @private
+     */
+    combineParaLineSelection(parentMaskRect, currMaskRect, currPos) {
+        const startX = currMaskRect[0].x;
+        const endX = currMaskRect[currMaskRect.length - 1].x + currMaskRect[currMaskRect.length - 1].width;
+        parentMaskRect.push({
+            x: startX,
+            y: currPos.y,
+            width: endX - startX,
+            height: currPos.height,
+            color: currMaskRect[0].color
+        });
+        currMaskRect.length = 0;
+    }
 }
 /**
@@ -19714,7 +19030,7 @@ class EditorCalendarVNode {
     currCalendarMode;
     selectedDate;
     currentDate = '';
-    onSetValue = new Subject$1();
+    onSetValue = new Subject();
     currTime;
     selectedTime;
     constructor(viewOptions) {
@@ -20535,6 +19851,154 @@ class DocRule {
     }
 }
+function calculateOverflow(rect, viewport) {
+    const overflow = rect.y + rect.height - (viewport.y + viewport.height);
+    return overflow > 0 ? overflow : 0;
+}
+function adjustRectangles(rectangles, startIndex, endIndex, overflow) {
+    for (let i = startIndex; i < endIndex; i++) {
+        const currentRect = rectangles[i];
+        currentRect.y -= overflow;
+    }
+}
+function placeRectangles(rectangles, viewport) {
+    // Step 1: 过滤视窗内的矩形并按y值排序
+    const sortedRectangles = rectangles
+        .filter(rect => rect.y + rect.height >= viewport.y &&
+        rect.y <= viewport.y + viewport.height)
+        .sort((a, b) => a.y - b.y);
+    // Step 2: 遍历并调整矩形位置
+    for (let i = 1; i < sortedRectangles.length; i++) {
+        const currentRect = sortedRectangles[i];
+        const prevRect = sortedRectangles[i - 1];
+        // Step 3: 调整重叠矩形的位置
+        if (currentRect.y < prevRect.y + prevRect.height) {
+            currentRect.y = prevRect.y + prevRect.height;
+        }
+        // Step 4: 处理超出视窗的情况
+        let overflow = calculateOverflow(currentRect, viewport);
+        if (overflow <= 0) {
+            continue;
+        }
+        //紧挨着的上级兄弟元素之间存在足够空间
+        const remainingSpace = currentRect.y - prevRect.y - prevRect.height;
+        if (remainingSpace > 0) {
+            if (remainingSpace >= overflow) {
+                currentRect.y -= overflow;
+                continue;
+            }
+            else {
+                overflow -= remainingSpace;
+                adjustRectangles(sortedRectangles, i - 1, i, remainingSpace);
+                currentRect.y -= remainingSpace;
+            }
+        }
+        const space = findSpace(sortedRectangles, viewport, i - 1, i, overflow);
+        //完全没有可用空间，后续元素按照顺序排列即可
+        if (space === overflow) {
+            const prevRect = sortedRectangles[i - 1];
+            sortedRectangles.filter((item, index) => index >= i).reduce((prev, curr) => { curr.y = prev.y + prev.height; return curr; }, prevRect);
+            break;
+        }
+        currentRect.y -= (overflow - space);
+    }
+    return sortedRectangles;
+}
+function findSpace(sortedRectangles, viewport, i, overflowIndex, overflow) {
+    for (let j = i; j >= 0; j--) {
+        let currentRect = sortedRectangles[j];
+        let aboveRect = sortedRectangles[j - 1];
+        if (aboveRect === undefined) {
+            aboveRect = { y: viewport.y, height: 0, width: 0, x: 0 };
+        }
+        const remainingSpace = currentRect.y - aboveRect.y - aboveRect.height;
+        //存在可用空间
+        if (remainingSpace > 0) {
+            if (remainingSpace >= overflow) {
+                adjustRectangles(sortedRectangles, j, overflowIndex, overflow);
+                return 0;
+            }
+            else {
+                overflow -= remainingSpace;
+                // 调整当前元素到溢出元素之间的元素的y值
+                adjustRectangles(sortedRectangles, j, overflowIndex, remainingSpace);
+                return findSpace(sortedRectangles, viewport, j - 1, overflowIndex, overflow);
+            }
+        }
+        else {
+            return findSpace(sortedRectangles, viewport, j - 1, overflowIndex, overflow);
+        }
+    }
+    return overflow;
+}
+/**
+ * 调整页面提示框位置，使其在视窗内的位置合理
+ */
+function adjustViewportElements(tipContainer, viewPort) {
+    viewPort.y /= viewPort.scale;
+    viewPort.height /= viewPort.scale;
+    const tipContainerEle = tipContainer.elm;
+    const tipContainerRect = tipContainerEle.getBoundingClientRect();
+    const children = tipContainer.children;
+    if (!children || children.length === 0) {
+        return;
+    }
+    const nativeEle = [];
+    for (let i = 0; i < children.length; i++) {
+        const item = children[i];
+        const elm = item.elm;
+        if (!elm.classList.contains("tg-container")) {
+            continue;
+        }
+        const runKey = elm.dataset['key'];
+        const lineElm = tipContainerEle.querySelector(`.doc-triangle-line[data-key='${runKey}']`);
+        const linePos = getEleAbsolutePos(lineElm);
+        const eleRect = { elm, lineElm, x: 0, y: 0, width: 0, height: 0, linePos };
+        nativeEle.push(eleRect);
+        const rect = elm.getBoundingClientRect();
+        eleRect.y = linePos.y;
+        eleRect.x = (rect.x - tipContainerRect.x) / viewPort.scale;
+        eleRect.width = rect.width / viewPort.scale;
+        eleRect.height = rect.height / viewPort.scale;
+    }
+    if (nativeEle.length) {
+        const sortedRectangles = placeRectangles(nativeEle, viewPort);
+        for (let i = 0; i < sortedRectangles.length; i++) {
+            const item = sortedRectangles[i];
+            item.elm.style.top = item.y + 'px';
+            const rotationAngle = calculateRotationAngle(item.linePos, item);
+            const distance = calculateDistance(item.linePos, item);
+            rotateDiv(item.lineElm, rotationAngle, distance);
+        }
+    }
+}
+function getEleAbsolutePos(elm) {
+    const topStr = elm.style.top;
+    const leftStr = elm.style.left;
+    return {
+        x: parseInt(leftStr.substring(0, leftStr.length - 2)),
+        y: parseInt(topStr.substring(0, topStr.length - 2))
+    };
+}
+function calculateRotationAngle(a, b) {
+    const deltaX = b.x - a.x;
+    const deltaY = b.y - a.y;
+    // 使用反正切函数计算旋转角度
+    const angleInRadians = Math.atan2(deltaY, deltaX);
+    // 将弧度转换为度数
+    const angleInDegrees = angleInRadians * (180 / Math.PI);
+    return angleInDegrees;
+}
+function rotateDiv(c, angle, distance) {
+    c.style.transform = `rotate(${angle}deg)`;
+    c.style.width = `${distance}px`;
+}
+function calculateDistance(a, b) {
+    const deltaX = b.x - a.x;
+    const deltaY = b.y - a.y;
+    return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+}
 class DocEditor {
     svgContainer;
     //private docContent!: HTMLElement;
@@ -20552,28 +20016,25 @@ class DocEditor {
     selectionOverlays;
     //private docRule: DocRule;
     historyMange;
-    selectionChanged = new Subject$1();
-    beforeRenderSubject = new Subject$1();
-    afterRenderSubject = new Subject$1();
-    onBeforeSetCursorSubject = new Subject$1();
-    contentChanged = new Subject$1();
-    onPatchVNodeSubject = new Subject$1();
+    selectionChanged = new Subject();
+    beforeRenderSubject = new Subject();
+    afterRenderSubject = new Subject();
+    onBeforeSetCursorSubject = new Subject();
+    contentChanged = new Subject();
+    onPatchVNodeSubject = new Subject();
     selectionState;
-    //显示右键菜单
-    onContextMenuItemChanged = new Subject$1();
-    onDblClickEvent = new Subject$1();
-    onClickEvent = new Subject$1();
-    onScrollViewEvent = new Subject$1();
+    onDblClickEvent = new Subject();
+    onClickEvent = new Subject();
     //文档改变事件:内容及样式，业务模块需要根据此事件，来追踪当前文档是否改变的状态
-    onDocChangedEvent = new Subject$1();
+    onDocChangedEvent = new Subject();
     //执行flushTask,refreshDoc之前，此时可以在文档计算排版之前改变内容
-    onBeforeRefreshDocument = new Subject$1();
+    onBeforeRefreshDocument = new Subject();
     //文档视图尺寸改变事件
-    onDocViewSizeChanged = new Subject$1();
+    onDocViewSizeChanged = new Subject();
     //编辑器销毁事件
-    onDestroy = new Subject$1();
-    beforeNodePatch = new Subject$1();
-    afterNodePatch = new Subject$1();
+    onDestroy = new Subject();
+    beforeNodePatch = new Subject();
+    afterNodePatch = new Subject();
     //自定义事件传递消息
     eventBus;
     editInput;
@@ -20588,7 +20049,6 @@ class DocEditor {
         this.viewOptions.drawCharRectColor = 'green';
         this.viewOptions.showLineRect = true;
         this.viewOptions.docSpace = 20;
-        this.viewOptions.reviewWindowWidth = 200;
         this.viewOptions.defaultFontName = '宋体';
         this.viewOptions.editorVersion = this.version();
         //this.viewOptions.scale = 2;
@@ -20774,11 +20234,13 @@ class DocEditor {
             return null;
         }
         this.flushTask = () => {
+            //读取变更记录，可能会同步影响文档内容
+            this.readDocChangeLog();
             this.refreshDocument();
             this.flushTask = null;
-            let cb = this.docCtx.paintedCallback;
+            let cb = this.docCtx.nextViewFn;
             if (cb) {
-                this.docCtx.setPaintedCallback(null);
+                this.docCtx.onNextView(null);
                 cb();
                 return;
             }
@@ -21209,7 +20671,7 @@ class DocEditor {
         this.onDocViewSizeChanged.unsubscribe();
         this.flushTask = null;
         Object.keys(this).forEach(key => {
-            if (this[key] instanceof Subject$1) {
+            if (this[key] instanceof Subject) {
                 this[key].unsubscribe();
             }
         });
@@ -21315,7 +20777,7 @@ class DocEditor {
     }
     /**
      * 设置段落样式
-     * @param newProps
+     * @param setterFunc
      */
     setParaStyleByFn(setterFunc) {
         DocumentChange.setParaStyle(this.selectionState, setterFunc);
@@ -21676,7 +21138,8 @@ class DocEditor {
             styleModule,
             classModule,
             attributesModule,
-            eventListenersModule
+            eventListenersModule,
+            datasetModule
         ]);
         setActiveEditorContext(this);
         const vNodeFunc = this.renderRoot();
@@ -21741,6 +21204,7 @@ class DocEditor {
                 children.push(tipsContainer);
                 children.push(...vNode);
                 tipsContainer.children?.push(...svgGenerator.changeTips);
+                this.updateTipLayoutWidth();
                 const sub = this.afterNodePatch.subscribe(() => {
                     this.updateTipLayoutAfterPatch();
                     sub.unsubscribe();
@@ -21750,42 +21214,50 @@ class DocEditor {
         };
     }
     /**
-     * 更新留痕提示框位置在文档渲染后
+     * 更新提示区域布局宽度，根据渲染的节点，判断是否需要设置提示区域宽度
      * @private
      */
-    updateTipLayoutAfterPatch() {
-        const children = this.tipContainer.children;
-        if (!children || children.length === 0) {
-            return;
-        }
-        let prevPos = { x: 0, y: -999999 };
-        const gap = 12;
-        for (let i = 0; i < children.length; i++) {
-            const item = children[i];
-            const elm = item.elm;
-            const topStr = elm.style.top;
-            let topPixs = Number.parseInt(topStr.substring(0, topStr.length - 2));
-            const rect = elm.getBoundingClientRect();
-            if (topPixs + gap < prevPos.y) {
-                topPixs = (prevPos.y + gap);
-                elm.style.top = topPixs + 'px';
+    updateTipLayoutWidth() {
+        const tipChildren = this.tipContainer?.children;
+        if (!tipChildren || !tipChildren.length) {
+            if (this.viewOptions.reviewWindowWidth > 0) {
+                this.viewOptions.reviewWindowWidth = 0;
+                //刷新页面
+                this.adjustPageLayout();
             }
-            if (topPixs - prevPos.y < gap) {
-                elm.style.top = (prevPos.y + gap) + 'px';
+        }
+        else {
+            if (this.viewOptions.reviewWindowWidth === 0) {
+                this.viewOptions.reviewWindowWidth = 250;
+                //刷新页面
+                this.adjustPageLayout();
             }
-            prevPos.y = topPixs + rect.height;
         }
     }
+    /**
+     * 更新留痕提示框位置在文档渲染后
+     * @private
+     */
+    updateTipLayoutAfterPatch() {
+        const viewBoxRect = {
+            x: this.viewOptions.pageOffset.x,
+            y: this.viewOptions.pageOffset.y,
+            width: this.viewOptions.viewSettings.width,
+            height: this.viewOptions.viewSettings.height,
+            scale: this.viewOptions.scale
+        };
+        adjustViewportElements(this.tipContainer, viewBoxRect);
+    }
     createChangeTipContainer() {
         const docRect = this.documentPaginator.docContainer.getItems()[0].rect;
-        const x = docRect.x + docRect.width + 20;
+        docRect.x + docRect.width + 20;
         return {
-            sel: 'div.tip-container',
+            sel: 'div.decorate-container',
             data: {
-                style: {
-                    left: x + 'px',
-                    top: '0px',
-                }
+            /* style: {
+                 left: x + 'px',
+                 top: '0px',
+             }*/
             },
             children: []
         };
@@ -21866,7 +21338,6 @@ class DocEditor {
                                         },
                                         on: {
                                             click: (evt) => {
-                                                console.log('dd');
                                                 onChangeHandler(item.code);
                                             }
                                         }
@@ -22034,7 +21505,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.1.28";
+        return "2.2.0";
     }
     switchPageHeaderEditor() {
         this.docCtx.document.switchPageHeaderEditor(this.selectionState, null);
@@ -22114,6 +21585,36 @@ class DocEditor {
             ])
         ]);
     }
+    readDocChangeLog() {
+        //获取文档的变更日志
+        const ops = generatePatch(this.docCtx.document, false);
+        for (let i = 0; i < ops.length; i++) {
+            const op = ops[i];
+            if ('delete' in op.ops) {
+                const delItem = op.ops.delete;
+                //获取删除的批注元素
+                const getDelCommItems = ElementUtil.getMatchItems(delItem, (item) => item instanceof CommentElement);
+                const maps = {};
+                getDelCommItems.forEach(item => {
+                    let num = maps[item.props.id];
+                    if (num === undefined) {
+                        maps[item.props.id] = 1;
+                    }
+                    else {
+                        maps[item.props.id] = num + 1;
+                    }
+                });
+                //获取需要删除的批注元素
+                const keys = Object.keys(maps).filter(key => maps[key] === 1);
+                if (keys.length) {
+                    const commItems = this.docCtx.document.treeFilter(item => item instanceof CommentElement);
+                    const delCommItems = commItems.filter(item => keys.includes(item.props.id));
+                    delCommItems.forEach(item => item.remove());
+                    return true;
+                }
+            }
+        }
+    }
 }
 /**
@@ -27211,10 +26712,10 @@ class DocumentPrintOffscreenBase {
     docCtx;
     renderCtx;
     elementReader;
-    beforeRenderEvent = new Subject$1();
-    afterRenderEvent = new Subject$1();
-    beforePrint = new Subject$1();
-    afterPrint = new Subject$1();
+    beforeRenderEvent = new Subject();
+    afterRenderEvent = new Subject();
+    beforePrint = new Subject();
+    afterPrint = new Subject();
     constructor() {
         this.viewOptions = new ViewOptions();
         this.viewOptions.copyRightInfo = '万达信息电子病历编辑器,www.wondersgroup.com';
@@ -27500,5 +27001,5 @@ function removeDuplicatesEvent(events) {
     return arr;
 }
-export { BlockContainerElement, BlockContainerRenderObject, BlockContentElement, BlockContentRenderObject, BlockLineRectRenderObject, BodyPartProps, BooleanEnum, BorderProps, BranchElement, BranchRenderObject, BreakElement, BreakFactory, BreakRenderObject, CheckBoxElement, CheckBoxFactory, CheckBoxProps, CheckBoxRenderObject, ColumnPatchUtil, CommContentBaseElement, CommContentBaseRenderObject, CommContentElement, CommContentProps, CommContentRenderObject, CommProps, CommentContentFactory, CommentElement, CommentFactory, CommentRenderObject, CommentsFactory, CommentsUtil, CommonUtil, CommsContainerElement, CommsContainerRenderObject, ContentMenuItem, ContextMenuElementEvent, CopyElementEvent, DOMEventSource, DOMSubscription, DataDecorateElement, DataDecorateProps, DataDecorateRenderObject, DataEleBaseProps, DataEleBaseTextProps, DataEleCheckProps, DataEleDateProps, DataEleImageProps, DataEleListProps, DataEleMHProps, DataElementBarcode, DataElementBarcodeFactory, DataElementBarcodeProps, DataElementBarcodeRenderObject, DataElementBaseFactory, DataElementCheck, DataElementCheckFactory, DataElementCheckRenderObject, DataElementDate, DataElementDateFactory, DataElementDateRenderObject, DataElementGroupElement, DataElementGroupFactory, DataElementGroupProps, DataElementGroupRenderObject, DataElementImage, DataElementImgFactory, DataElementInlineGroup, DataElementLeaf, DataElementList, DataElementListFactory, DataElementListRenderObject, DataElementMH, DataElementMHFactory, DataElementRenderObject, DataElementText, DataElementTextFactory, DataElementTextRenderObject, DataImageRenderObject, DataRenderMH, DocEditor, DocMode, DocumentBodyElement, DocumentBodyFactory, DocumentBodyPartElement, DocumentBodyPartFactory, DocumentBodyPartRenderObject, DocumentBodyRenderObject, DocumentChange, DocumentCombine, DocumentComment, DocumentContainerRender, DocumentContext, DocumentCursor, DocumentElement, DocumentEvalFunc, DocumentEvent, DocumentFactory, DocumentFooterElement, DocumentFooterFactory, DocumentFooterRenderObject, DocumentHeaderElement, DocumentHeaderFactory, DocumentHeaderRenderObject, DocumentInput, DocumentPaginator, DocumentPrintOffscreen, DocumentPrintOffscreenBase, DocumentProps, DocumentRenderObject, DocumentSelection, DocumentTemplate, DropElementEvent, EditMode, EditorContext, Element, ElementEvent, ElementFactory, ElementReader, ElementSerialize, ElementUtil, EventBus, EventMap, EventSourceCore$1 as EventSourceCore, FillNullSpaceElement, FillNullSpaceRenderObject, GetTrackTipsEvent, GotCursorEvent, IDispose, INotifyPropertyChanged, InlineBlockContainer, InlineGroupElement, InlineGroupInputElement, InlineGroupRenderObject, InlineMuiltBlockLineRenderObject, InputElementEvent, IsInSideDataElement, IsInSideInlineGroupInputElement, KeyboradElementEvent, LeafElement, LeafRenderObject, LostCursorEvent, MarginProps, ModifyFlag$1 as ModifyFlag, MouseElementEvent, MousedownElementEvent, MuiltBlockLineRenderObject, OnceSubject, PSymbolElement, PSymbolRenderObject, PaddingProps, PageBreakElement, PageBreakFactory, PageBreakRenderObject, PageOptions, PaintContent, ParagraphElement, ParagraphFactory, ParagraphLineRectRenderObject, ParagraphNumberType, ParagraphProps, ParagraphRenderObject, PasteElementEvent, PermanentTeethElement, PermanentTeethFactory, PermanentTeethProps, PermanentTeethRenderObject, PictureElement, PictureFactory, PictureProps, PictureRenderObject, RadioBoxElement, RadioBoxFactory, RadioBoxProps, RadioBoxRenderObject, RangeUtil, Rect, RenderContext, RenderObject, RenderObjectType, ResizeLeafRenderObject, RowMinHeight, RunElementFactory, SVGElement, SVGFactory, SVGProps, SVGRenderObject, SelectionOverlays, SelectionRange, SelectionState, Subject$1 as Subject, SubjectSubscription$1 as SubjectSubscription, Subscription$1 as Subscription, TabElement, TabFactory, TabRenderObject, TableCellElement, TableCellFactory, TableCellProps, TableCellRenderObject, TableElement, TableFactory, TableProps, TableRenderObject, TableRowElement, TableRowFactory, TableRowProps, TableRowRenderObject, TableSplitCell, TableUtil, TextGroupElement, TextGroupFactory, TextGroupRenderObject, TextProps, TextUnitsHolder, TrackRunElement, TrackRunProps, TrackRunRenderObject, TrackRunTypeEnum, ValidateCondition, ValidateElement, ValidateProps, ValidateRenderObject, ViewOptions, addReturn, clearChildrenRenderCache, clearTraces, cloneChildren, cloneElementBase, defaultParaHanging, deleteCurrentParagraph, docOpsMap, elementTypeEventHandler, exportDecoratorHTML, falseChar, fontMapFunc, formatEle, fromEvent, generatePatch, getCalleeName, getFocusTextSegment, inputText, insertEle, invokeTypeHandler, isDate, logUpdateEleProps, objectToString$4 as objectToString, onTableContextmenu, onceTask, parser, reactiveMap, removeEle, removeText, runTextLineRender, setChildrenModifyFlag, setDataElementProps, setNotifyChangedCallback, setTraceTrackingFlag, suppressTracking, targetMaps, textLineRenderMode, toRawType, toTypeString, trueChar, validateDataEle, validateDataEleRenderObj, validateInlineInputRenderObj, watchChanged };
+export { BlockContainerElement, BlockContainerRenderObject, BlockContentElement, BlockContentRenderObject, BlockLineRectRenderObject, BodyPartProps, BooleanEnum, BorderProps, BranchElement, BranchRenderObject, BreakElement, BreakFactory, BreakRenderObject, CheckBoxElement, CheckBoxFactory, CheckBoxProps, CheckBoxRenderObject, ColumnPatchUtil, CommContentBaseElement, CommContentBaseRenderObject, CommContentElement, CommContentProps, CommContentRenderObject, CommProps, CommentContentFactory, CommentElement, CommentFactory, CommentRenderObject, CommentsFactory, CommonUtil, CommsContainerElement, CommsContainerRenderObject, ContentMenuItem, ContextMenuElementEvent, CopyElementEvent, DOMEventSource, DOMSubscription, DataDecorateElement, DataDecorateProps, DataDecorateRenderObject, DataEleBaseProps, DataEleBaseTextProps, DataEleCheckProps, DataEleDateProps, DataEleImageProps, DataEleListProps, DataEleMHProps, DataElementBarcode, DataElementBarcodeFactory, DataElementBarcodeProps, DataElementBarcodeRenderObject, DataElementBaseFactory, DataElementCheck, DataElementCheckFactory, DataElementCheckRenderObject, DataElementDate, DataElementDateFactory, DataElementDateRenderObject, DataElementGroupElement, DataElementGroupFactory, DataElementGroupProps, DataElementGroupRenderObject, DataElementImage, DataElementImgFactory, DataElementInlineGroup, DataElementLeaf, DataElementList, DataElementListFactory, DataElementListRenderObject, DataElementMH, DataElementMHFactory, DataElementRenderObject, DataElementText, DataElementTextFactory, DataElementTextRenderObject, DataImageRenderObject, DataRenderMH, DocEditor, DocMode, DocumentBodyElement, DocumentBodyFactory, DocumentBodyPartElement, DocumentBodyPartFactory, DocumentBodyPartRenderObject, DocumentBodyRenderObject, DocumentChange, DocumentCombine, DocumentComment, DocumentContainerRender, DocumentContext, DocumentCursor, DocumentElement, DocumentEvalFunc, DocumentEvent, DocumentFactory, DocumentFooterElement, DocumentFooterFactory, DocumentFooterRenderObject, DocumentHeaderElement, DocumentHeaderFactory, DocumentHeaderRenderObject, DocumentInput, DocumentPaginator, DocumentPrintOffscreen, DocumentPrintOffscreenBase, DocumentProps, DocumentRenderObject, DocumentSelection, DocumentTemplate, DropElementEvent, EditMode, EditorContext, Element, ElementEvent, ElementFactory, ElementReader, ElementSerialize, ElementUtil, EventBus, EventMap, EventSourceCore, FillNullSpaceElement, FillNullSpaceRenderObject, GetTrackTipsEvent, GotCursorEvent, IDispose, INotifyPropertyChanged, InlineBlockContainer, InlineGroupElement, InlineGroupInputElement, InlineGroupRenderObject, InlineMuiltBlockLineRenderObject, InputElementEvent, IsInSideDataElement, IsInSideInlineGroupInputElement, KeyboradElementEvent, LeafElement, LeafRenderObject, LostCursorEvent, MarginProps, ModifyFlag, MouseElementEvent, MousedownElementEvent, MuiltBlockLineRenderObject, OnceSubject, PSymbolElement, PSymbolRenderObject, PaddingProps, PageBreakElement, PageBreakFactory, PageBreakRenderObject, PageOptions, PaintContent, ParagraphElement, ParagraphFactory, ParagraphLineRectRenderObject, ParagraphNumberType, ParagraphProps, ParagraphRenderObject, PasteElementEvent, PermanentTeethElement, PermanentTeethFactory, PermanentTeethProps, PermanentTeethRenderObject, PictureElement, PictureFactory, PictureProps, PictureRenderObject, RadioBoxElement, RadioBoxFactory, RadioBoxProps, RadioBoxRenderObject, RangeUtil, Rect, RenderContext, RenderObject, RenderObjectType, ResizeLeafRenderObject, RowMinHeight, RunElementFactory, SVGElement, SVGFactory, SVGProps, SVGRenderObject, SelectionOverlays, SelectionRange, SelectionState, Subject, SubjectSubscription, Subscription, TabElement, TabFactory, TabRenderObject, TableCellElement, TableCellFactory, TableCellProps, TableCellRenderObject, TableElement, TableFactory, TableProps, TableRenderObject, TableRowElement, TableRowFactory, TableRowProps, TableRowRenderObject, TableSplitCell, TableUtil, TextGroupElement, TextGroupFactory, TextGroupRenderObject, TextProps, TextUnitsHolder, TrackRunElement, TrackRunProps, TrackRunRenderObject, TrackRunTypeEnum, ValidateCondition, ValidateElement, ValidateProps, ValidateRenderObject, ViewOptions, addReturn, clearChildrenRenderCache, clearTraces, cloneChildren, cloneElementBase, defaultParaHanging, deleteCurrentParagraph, docOpsMap, elementTypeEventHandler, exportDecoratorHTML, falseChar, fontMapFunc, formatEle, fromEvent, generatePatch, getCalleeName, getFocusTextSegment, inputText, insertEle, invokeTypeHandler, isDate, logUpdateEleProps, objectToString$4 as objectToString, onTableContextmenu, onceTask, parser, reactiveMap, removeEle, removeText, runTextLineRender, setChildrenModifyFlag, setDataElementProps, setNotifyChangedCallback, setTraceTrackingFlag, suppressTracking, targetMaps, textLineRenderMode, toRawType, toTypeString, trueChar, validateDataEle, validateDataEleRenderObj, validateInlineInputRenderObj, watchChanged };
 //# sourceMappingURL=index.js.map