slate-angular 20.2.0-next.10 → 20.2.0-next.12

package/fesm2022/slate-angular.mjs

@@ -1138,6 +1138,9 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
     e.selectAll = () => {
         Transforms.select(e, []);
     };
+    e.isVisible = element => {
+        return true;
+    };
     return e;
 };
 
@@ -2568,17 +2571,51 @@ function executeAfterViewInit(editor) {
 }
 
 class VirtualScrollDebugOverlay {
+    static { this.storageKey = 'slate_virtual_scroll_debug_overlay_state'; }
+    static { this.minWidth = 320; }
+    static { this.minHeight = 240; }
+    static { this.defaultWidth = 410; }
+    static { this.defaultHeight = 480; }
+    static getInstance(doc) {
+        if (!this.instance) {
+            this.instance = new VirtualScrollDebugOverlay(doc);
+        }
+        this.instance.init();
+        return this.instance;
+    }
+    static log(doc, type, ...args) {
+        this.getInstance(doc).log(type, ...args);
+    }
+    static syncScrollTop(doc, value) {
+        const instance = this.getInstance(doc);
+        instance.setScrollTopValue(value);
+    }
     constructor(doc) {
         this.doc = doc;
+        this.state = {
+            left: 16,
+            top: 16,
+            collapsed: false,
+            width: VirtualScrollDebugOverlay.defaultWidth,
+            height: VirtualScrollDebugOverlay.defaultHeight
+        };
         this.originalConsoleLog = console.log.bind(console);
         this.originalConsoleWarn = console.warn.bind(console);
         this.dragOffsetX = 0;
         this.dragOffsetY = 0;
         this.isDragging = false;
+        this.isResizing = false;
+        this.resizeStartX = 0;
+        this.resizeStartY = 0;
+        this.resizeStartWidth = 0;
+        this.resizeStartHeight = 0;
+        this.dragMoved = false;
+        this.wasDragged = false;
         this.onDragging = (event) => {
             if (!this.isDragging || !this.container) {
                 return;
             }
+            this.dragMoved = true;
             const nextLeft = event.clientX - this.dragOffsetX;
             const nextTop = event.clientY - this.dragOffsetY;
             this.container.style.left = `${nextLeft}px`;
@@ -2591,17 +2628,47 @@ class VirtualScrollDebugOverlay {
                 return;
             }
             this.isDragging = false;
+            this.wasDragged = this.dragMoved;
+            this.dragMoved = false;
             this.doc.removeEventListener('mousemove', this.onDragging);
             this.doc.removeEventListener('mouseup', this.onDragEnd);
             if (this.container) {
+                const rect = this.container.getBoundingClientRect();
+                this.state.left = rect.left;
+                this.state.top = rect.top;
+                this.persistState();
                 this.container.style.transition = '';
             }
         };
+        this.onResizing = (event) => {
+            if (!this.isResizing || !this.container) {
+                return;
+            }
+            const deltaX = event.clientX - this.resizeStartX;
+            const deltaY = event.clientY - this.resizeStartY;
+            const nextWidth = Math.max(VirtualScrollDebugOverlay.minWidth, this.resizeStartWidth + deltaX);
+            const nextHeight = Math.max(VirtualScrollDebugOverlay.minHeight, this.resizeStartHeight + deltaY);
+            this.state.width = nextWidth;
+            this.state.height = nextHeight;
+            this.applySize();
+        };
+        this.onResizeEnd = () => {
+            if (!this.isResizing) {
+                return;
+            }
+            this.isResizing = false;
+            this.doc.removeEventListener('mousemove', this.onResizing);
+            this.doc.removeEventListener('mouseup', this.onResizeEnd);
+            this.persistState();
+        };
     }
     init() {
         if (!this.container) {
             this.createContainer();
         }
+        else {
+            this.applyState();
+        }
     }
     log(type, ...args) {
         this.init();
@@ -2616,58 +2683,75 @@ class VirtualScrollDebugOverlay {
     dispose() {
         this.container?.remove();
         this.container = undefined;
+        this.contentWrapper = undefined;
+        this.bubble = undefined;
         this.logList = undefined;
         this.selectorInput = undefined;
         this.distanceInput = undefined;
+        this.collapseToggle = undefined;
+        this.resizeHandle = undefined;
         this.doc.removeEventListener('mousemove', this.onDragging);
         this.doc.removeEventListener('mouseup', this.onDragEnd);
+        this.doc.removeEventListener('mousemove', this.onResizing);
+        this.doc.removeEventListener('mouseup', this.onResizeEnd);
         this.isDragging = false;
+        this.isResizing = false;
     }
     createContainer() {
+        this.loadState();
         const doc = this.doc;
         const container = doc.createElement('div');
         container.style.position = 'fixed';
-        container.style.left = '16px';
-        container.style.top = '16px';
         container.style.right = 'auto';
         container.style.bottom = 'auto';
-        container.style.width = '360px';
-        container.style.maxHeight = '70vh';
-        container.style.padding = '12px';
         container.style.boxSizing = 'border-box';
         container.style.background = 'rgba(17, 24, 39, 0.95)';
         container.style.color = '#e5e7eb';
         container.style.fontSize = '12px';
-        container.style.fontFamily = 'Menlo, Consolas, monospace';
         container.style.border = '1px solid #1f2937';
         container.style.borderRadius = '10px';
+        container.style.fontFamily = 'Menlo, Consolas, monospace';
         container.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.35)';
         container.style.zIndex = '9999';
         container.style.display = 'flex';
         container.style.flexDirection = 'column';
         container.style.gap = '10px';
+        container.style.minWidth = `${VirtualScrollDebugOverlay.minWidth}px`;
+        container.style.minHeight = `${VirtualScrollDebugOverlay.minHeight}px`;
+        container.style.maxHeight = '80vh';
+        container.style.cursor = 'default';
+        container.addEventListener('mousedown', event => {
+            if (this.state.collapsed) {
+                this.startDrag(event);
+            }
+        });
         const header = doc.createElement('div');
         header.style.display = 'flex';
         header.style.alignItems = 'center';
         header.style.justifyContent = 'space-between';
         header.style.cursor = 'move';
         header.addEventListener('mousedown', event => {
-            if (!this.container) {
-                return;
-            }
-            const rect = this.container.getBoundingClientRect();
-            this.isDragging = true;
-            this.dragOffsetX = event.clientX - rect.left;
-            this.dragOffsetY = event.clientY - rect.top;
-            this.container.style.transition = 'none';
-            this.doc.addEventListener('mousemove', this.onDragging);
-            this.doc.addEventListener('mouseup', this.onDragEnd);
-            event.preventDefault();
+            this.startDrag(event);
         });
         const title = doc.createElement('div');
         title.textContent = 'Virtual Scroll Debug';
         title.style.fontWeight = '600';
         title.style.letterSpacing = '0.3px';
+        const actions = doc.createElement('div');
+        actions.style.display = 'flex';
+        actions.style.gap = '6px';
+        const collapseButton = doc.createElement('button');
+        collapseButton.type = 'button';
+        collapseButton.textContent = '折叠';
+        collapseButton.style.background = '#1f2937';
+        collapseButton.style.color = '#e5e7eb';
+        collapseButton.style.border = '1px solid #374151';
+        collapseButton.style.borderRadius = '6px';
+        collapseButton.style.padding = '4px 8px';
+        collapseButton.style.cursor = 'pointer';
+        collapseButton.addEventListener('click', () => {
+            this.setCollapsed(!this.state.collapsed);
+        });
         const clearButton = doc.createElement('button');
         clearButton.type = 'button';
         clearButton.textContent = '清除日志';
@@ -2682,11 +2766,13 @@ class VirtualScrollDebugOverlay {
                 this.logList.innerHTML = '';
             }
         });
+        actions.appendChild(collapseButton);
+        actions.appendChild(clearButton);
         header.appendChild(title);
-        header.appendChild(clearButton);
+        header.appendChild(actions);
         const scrollForm = doc.createElement('div');
         scrollForm.style.display = 'grid';
-        scrollForm.style.gridTemplateColumns = '1fr 90px 70px';
+        scrollForm.style.gridTemplateColumns = '1fr 110px 50px';
         scrollForm.style.gap = '6px';
         scrollForm.style.alignItems = 'center';
         const selectorInput = doc.createElement('input');
@@ -2752,14 +2838,194 @@ class VirtualScrollDebugOverlay {
         logList.style.display = 'flex';
         logList.style.flexDirection = 'column';
         logList.style.gap = '6px';
-        container.appendChild(header);
-        container.appendChild(scrollForm);
-        container.appendChild(logList);
+        logList.style.flex = '1';
+        logList.style.minHeight = '160px';
+        const bubble = doc.createElement('div');
+        bubble.textContent = 'VS';
+        bubble.style.display = 'none';
+        bubble.style.alignItems = 'center';
+        bubble.style.justifyContent = 'center';
+        bubble.style.fontWeight = '700';
+        bubble.style.fontSize = '14px';
+        bubble.style.letterSpacing = '0.5px';
+        bubble.style.width = '100%';
+        bubble.style.height = '100%';
+        bubble.style.userSelect = 'none';
+        bubble.addEventListener('click', () => {
+            if (this.wasDragged) {
+                this.wasDragged = false;
+                return;
+            }
+            this.setCollapsed(false);
+        });
+        const contentWrapper = doc.createElement('div');
+        contentWrapper.style.display = 'flex';
+        contentWrapper.style.flexDirection = 'column';
+        contentWrapper.style.gap = '10px';
+        contentWrapper.style.width = '100%';
+        contentWrapper.style.height = '100%';
+        contentWrapper.appendChild(header);
+        contentWrapper.appendChild(scrollForm);
+        contentWrapper.appendChild(logList);
+        container.appendChild(contentWrapper);
+        container.appendChild(bubble);
+        const resizeHandle = doc.createElement('div');
+        resizeHandle.style.position = 'absolute';
+        resizeHandle.style.right = '6px';
+        resizeHandle.style.bottom = '6px';
+        resizeHandle.style.width = '14px';
+        resizeHandle.style.height = '14px';
+        resizeHandle.style.cursor = 'nwse-resize';
+        resizeHandle.style.borderRight = '2px solid #4b5563';
+        resizeHandle.style.borderBottom = '2px solid #4b5563';
+        resizeHandle.addEventListener('mousedown', event => {
+            this.startResize(event);
+        });
+        container.appendChild(resizeHandle);
         doc.body.appendChild(container);
         this.container = container;
+        this.contentWrapper = contentWrapper;
+        this.bubble = bubble;
         this.logList = logList;
         this.selectorInput = selectorInput;
         this.distanceInput = distanceInput;
+        this.collapseToggle = collapseButton;
+        this.resizeHandle = resizeHandle;
+        this.applyState();
+    }
+    startDrag(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        if (!this.container) {
+            return;
+        }
+        const rect = this.container.getBoundingClientRect();
+        this.isDragging = true;
+        this.wasDragged = false;
+        this.dragMoved = false;
+        this.dragOffsetX = event.clientX - rect.left;
+        this.dragOffsetY = event.clientY - rect.top;
+        this.container.style.transition = 'none';
+        this.doc.addEventListener('mousemove', this.onDragging);
+        this.doc.addEventListener('mouseup', this.onDragEnd);
+        if (!this.state.collapsed) {
+            event.preventDefault();
+        }
+    }
+    startResize(event) {
+        if (event.button !== 0 || this.state.collapsed) {
+            return;
+        }
+        if (!this.container) {
+            return;
+        }
+        const rect = this.container.getBoundingClientRect();
+        this.isResizing = true;
+        this.resizeStartX = event.clientX;
+        this.resizeStartY = event.clientY;
+        this.resizeStartWidth = rect.width;
+        this.resizeStartHeight = rect.height;
+        this.doc.addEventListener('mousemove', this.onResizing);
+        this.doc.addEventListener('mouseup', this.onResizeEnd);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    applyPosition() {
+        if (!this.container) {
+            return;
+        }
+        this.container.style.left = `${this.state.left}px`;
+        this.container.style.top = `${this.state.top}px`;
+    }
+    applySize() {
+        if (!this.container) {
+            return;
+        }
+        const width = Math.max(VirtualScrollDebugOverlay.minWidth, this.state.width || VirtualScrollDebugOverlay.defaultWidth);
+        const height = Math.max(VirtualScrollDebugOverlay.minHeight, this.state.height || VirtualScrollDebugOverlay.defaultHeight);
+        this.state.width = width;
+        this.state.height = height;
+        this.container.style.width = `${width}px`;
+        this.container.style.height = `${height}px`;
+    }
+    applyCollapsedState() {
+        if (!this.container || !this.contentWrapper || !this.bubble || !this.collapseToggle) {
+            return;
+        }
+        if (this.state.collapsed) {
+            this.container.style.width = '36px';
+            this.container.style.height = '36px';
+            this.container.style.minWidth = '';
+            this.container.style.minHeight = '';
+            this.container.style.padding = '0';
+            this.container.style.borderRadius = '50%';
+            this.container.style.display = 'flex';
+            this.container.style.flexDirection = 'row';
+            this.container.style.alignItems = 'center';
+            this.container.style.justifyContent = 'center';
+            this.container.style.cursor = 'move';
+            this.contentWrapper.style.display = 'none';
+            this.bubble.style.display = 'flex';
+            this.collapseToggle.textContent = '展开';
+            this.resizeHandle.style.display = 'none';
+        }
+        else {
+            this.applySize();
+            this.container.style.padding = '12px';
+            this.container.style.borderRadius = '10px';
+            this.container.style.display = 'flex';
+            this.container.style.flexDirection = 'column';
+            this.container.style.gap = '10px';
+            this.container.style.cursor = 'default';
+            this.contentWrapper.style.display = 'flex';
+            this.bubble.style.display = 'none';
+            this.collapseToggle.textContent = '折叠';
+            this.resizeHandle.style.display = 'block';
+        }
+    }
+    setCollapsed(collapsed) {
+        this.state.collapsed = collapsed;
+        this.applyCollapsedState();
+        this.persistState();
+    }
+    applyState() {
+        this.applyPosition();
+        this.applyCollapsedState();
+    }
+    loadState() {
+        try {
+            const raw = this.doc.defaultView?.localStorage?.getItem(VirtualScrollDebugOverlay.storageKey);
+            if (raw) {
+                const parsed = JSON.parse(raw);
+                if (typeof parsed.left === 'number') {
+                    this.state.left = parsed.left;
+                }
+                if (typeof parsed.top === 'number') {
+                    this.state.top = parsed.top;
+                }
+                if (typeof parsed.collapsed === 'boolean') {
+                    this.state.collapsed = parsed.collapsed;
+                }
+                if (typeof parsed.width === 'number') {
+                    this.state.width = parsed.width;
+                }
+                if (typeof parsed.height === 'number') {
+                    this.state.height = parsed.height;
+                }
+            }
+        }
+        catch {
+            // ignore storage errors
+        }
+    }
+    persistState() {
+        try {
+            this.doc.defaultView?.localStorage?.setItem(VirtualScrollDebugOverlay.storageKey, JSON.stringify(this.state));
+        }
+        catch {
+            // ignore storage errors
+        }
     }
     appendLog(type, ...args) {
         if (!this.logList) {
@@ -2794,6 +3060,11 @@ class VirtualScrollDebugOverlay {
             return String(value);
         }
     }
+    setScrollTopValue(value) {
+        if (this.distanceInput) {
+            this.distanceInput.value = String(value ?? 0);
+        }
+    }
 }
 
 const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
@@ -3064,16 +3335,9 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        let visibleIndexes = Array.from(this.virtualVisibleIndexes);
-        const isFirstRender = visibleIndexes.length === 0;
-        if (isFirstRender) {
-            const virtualView = this.refreshVirtualView();
-            this.applyVirtualView(virtualView);
-            visibleIndexes = Array.from(this.virtualVisibleIndexes);
-        }
-        else {
-            this.renderedChildren = visibleIndexes.map(index => this.editor.children[index]);
-        }
+        const virtualView = this.refreshVirtualView();
+        this.applyVirtualView(virtualView);
+        const visibleIndexes = Array.from(this.virtualVisibleIndexes);
         this.listRender.update(this.renderedChildren, this.editor, this.context);
         this.remeasureHeightByIndics(visibleIndexes);
         // repair collaborative editing when Chinese input is interrupted by other users' cursors
@@ -3211,8 +3475,7 @@ class SlateEditable {
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
             if (isDebug) {
                 const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-                this.debugOverlay = new VirtualScrollDebugOverlay(doc);
-                this.debugOverlay.init();
+                VirtualScrollDebugOverlay.getInstance(doc);
             }
         }
     }
@@ -3224,11 +3487,8 @@ class SlateEditable {
         this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
     }
     debugLog(type, ...args) {
-        if (!this.debugOverlay) {
-            const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-            this.debugOverlay = new VirtualScrollDebugOverlay(doc);
-        }
-        this.debugOverlay.log(type, ...args);
+        const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
+        VirtualScrollDebugOverlay.log(doc, type, ...args);
     }
     doVirtualScroll() {
         this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
@@ -3270,6 +3530,10 @@ class SlateEditable {
             };
         }
         const scrollTop = this.virtualConfig.scrollTop;
+        if (isDebug) {
+            const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
+            VirtualScrollDebugOverlay.syncScrollTop(doc, Number.isFinite(scrollTop) ? scrollTop : 0);
+        }
         const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
         if (!viewportHeight) {
             return {
@@ -3420,11 +3684,22 @@ class SlateEditable {
     }
     getBlockHeight(index, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) {
         const node = this.editor.children[index];
+        const isVisible = this.editor.isVisible(node);
+        if (!isVisible) {
+            return 0;
+        }
         if (!node) {
             return defaultHeight;
         }
         const key = AngularEditor.findKey(this.editor, node);
-        return this.measuredHeights.get(key.id) ?? defaultHeight;
+        const height = this.measuredHeights.get(key.id);
+        if (typeof height === 'number') {
+            return height;
+        }
+        if (this.measuredHeights.has(key.id)) {
+            console.error('getBlockHeight: invalid height value', key.id, height);
+        }
+        return defaultHeight;
     }
     buildAccumulatedHeight(heights) {
         const accumulatedHeights = new Array(heights.length + 1).fill(0);
@@ -4205,8 +4480,6 @@ class SlateEditable {
     //#endregion
     ngOnDestroy() {
         this.editorResizeObserver?.disconnect();
-        this.debugOverlay?.dispose();
-        this.debugOverlay = undefined;
         NODE_TO_ELEMENT.delete(this.editor);
         this.manualListeners.forEach(manualListener => {
             manualListener();