@textbus/xnote 0.0.9 → 0.0.11

package/bundles/index.esm.js

@@ -1834,11 +1834,18 @@ function findNonIntersectingRectangles(rectangles) {
 function getMaxRectangle(start, rectangles) {
     let merged = start;
     const remaining = [...rectangles];
+    const unMerged = [];
     while (remaining.length > 0) {
         const current = remaining.shift();
         if (current.intersects(merged)) {
             merged = current.merge(merged);
         }
+        else {
+            unMerged.push(current);
+        }
+    }
+    if (unMerged.length && merged !== start) {
+        return getMaxRectangle(merged, unMerged);
     }
     return merged;
 }
@@ -2073,13 +2080,13 @@ class TableComponent extends Component {
                 endIndex: i.length
             };
         });
-        this.selection.setSelectedRanges(slotRanges);
         this.tableSelection.set({
             startColumn: 0,
             endColumn: this.state.columnsConfig.length,
             startRow: startIndex,
             endRow: endIndex,
         });
+        this.selection.setSelectedRanges(slotRanges);
         this.focus.next(true);
         if (slotRanges.length) {
             setTimeout(() => {
@@ -2108,13 +2115,13 @@ class TableComponent extends Component {
                 endIndex: i.length
             };
         });
-        this.selection.setSelectedRanges(slotRanges);
         this.tableSelection.set({
             startColumn: startIndex,
             endColumn: endIndex,
             startRow: 0,
             endRow: this.state.rows.length,
         });
+        this.selection.setSelectedRanges(slotRanges);
         this.focus.next(true);
         this.selection.restore();
         this.textbus.focus();
@@ -5557,16 +5564,17 @@ function TopBar(props) {
         });
         return () => sub.unsubscribe();
     });
-    const instance = getCurrentInstance();
+    // const instance = getCurrentInstance()
     const s = props.component.changeMarker.onChange.subscribe(() => {
-        instance.markAsDirtied();
+        const currentLayout = props.component.state.columnsConfig.slice();
+        if (currentLayout.join(',') !== props.layoutWidth().join(',')) {
+            props.layoutWidth.set(currentLayout);
+        }
+        // instance.markAsDirtied()
     });
     onUnmounted(() => {
         s.unsubscribe();
     });
-    function refreshLayoutWidth() {
-        props.layoutWidth.set(props.component.state.columnsConfig.slice());
-    }
     return withScopedCSS(scopedId$4, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
@@ -5585,7 +5593,6 @@ function TopBar(props) {
                                     transform: 'translateX(-50%)'
                                 }, visible: !!selectedColumnRange(), children: jsx(ToolbarItem, { children: jsx(Button, { onClick: () => {
                                             props.component.deleteColumns();
-                                            refreshLayoutWidth();
                                         }, children: jsx("span", { class: "xnote-icon-bin" }) }) }) }), jsx("table", { style: {
                                     transform: `translateX(${-leftDistance()}px)`
                                 }, children: jsx("tbody", { children: jsx("tr", { children: props.layoutWidth().map((i, index) => {
@@ -5597,14 +5604,12 @@ function TopBar(props) {
                                                                 left: '-10px'
                                                             }, onClick: () => {
                                                                 props.component.insertColumn(0);
-                                                                refreshLayoutWidth();
                                                             }, children: jsx("button", { class: "insert-btn", type: "button", children: "+" }) })), jsx("span", { class: "insert-btn-wrap", onMouseenter: () => {
                                                                 tableService.onInsertColumnBefore.next(index + 1);
                                                             }, onMouseleave: () => {
                                                                 tableService.onInsertColumnBefore.next(null);
                                                             }, onClick: () => {
                                                                 props.component.insertColumn(index + 1);
-                                                                refreshLayoutWidth();
                                                             }, children: jsx("button", { class: "insert-btn", type: "button", children: "+" }) })] }) }));
                                         }) }) }) })] }), jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
@@ -5681,8 +5686,8 @@ function LeftBar(props) {
         const actionBarRows = actionBarRef.current.rows;
         setTimeout(() => {
             Array.from(props.tableRef.current.rows).forEach((tr, i) => {
-                const height = tr.offsetHeight ||
-                    Math.min(...Array.from(tr.children).map(i => i.offsetHeight)) || 0;
+                const height = tr.getBoundingClientRect().height ||
+                    Math.min(...Array.from(tr.children).map(i => i.getBoundingClientRect().height)) || 0;
                 insertBarRows.item(i).style.height = height + 'px';
                 actionBarRows.item(i).style.height = height + 'px';
             });
@@ -6206,24 +6211,25 @@ let TableSelectionAwarenessDelegate = class TableSelectionAwarenessDelegate exte
             return false;
         }
         const rect = data.data || commonAncestorComponent.getMaxRectangle(findFocusCell(commonAncestorComponent, startSlot), findFocusCell(commonAncestorComponent, endSlot));
-        const renderer = this.domAdapter;
         if (!rect) {
             return false;
         }
-        const normalizedSlots = commonAncestorComponent.getSelectedNormalizedSlotsByRectangle(rect);
-        const rects = normalizedSlots.map(row => {
-            return row.cells.filter(i => i.visible).map(i => {
-                const td = renderer.getNativeNodeBySlot(i.raw.slot);
-                return td.getBoundingClientRect();
-            });
-        }).flat();
-        const left = Math.min(...rects.map(i => i.left));
-        const top = Math.min(...rects.map(i => i.top));
+        const dom = this.domAdapter.getNativeNodeByComponent(commonAncestorComponent);
+        const content = dom.querySelector('.xnote-table-content');
+        const trs = content.querySelectorAll('tr');
+        const cols = content.querySelectorAll('col');
+        const top = trs[rect.y1].getBoundingClientRect().top;
+        const left = cols[rect.x1].getBoundingClientRect().left;
+        let height = trs[rect.y2 - 1].getBoundingClientRect().bottom - top;
+        if (height === 0) {
+            height = trs[rect.y2 - 1].children.item(0).getBoundingClientRect().bottom - top;
+        }
+        const width = cols[rect.x2 - 1].getBoundingClientRect().right - left;
         return [{
                 left,
                 top,
-                width: Math.max(...rects.map(i => i.right)) - left,
-                height: Math.max(...rects.map(i => i.bottom)) - top
+                width,
+                height
             }];
     }
 };
@@ -6351,9 +6357,22 @@ class XNoteMessageBug extends MessageBus {
     get() {
         const selection = this.selection;
         const c = selection.commonAncestorComponent;
-        return Object.assign(Object.assign({}, this.userinfo), { selection: selection.getPaths(), data: (!selection.isCollapsed && c instanceof TableComponent) ? c.getSelectedRect() : null });
+        const msg = Object.assign(Object.assign({}, this.userinfo), { selection: selection.getPaths() });
+        if (!selection.isCollapsed && c instanceof TableComponent) {
+            const selection = c.tableSelection();
+            if (selection) {
+                msg.data = {
+                    x1: selection.startColumn,
+                    x2: selection.endColumn,
+                    y1: selection.startRow,
+                    y2: selection.endRow,
+                };
+            }
+        }
+        return msg;
     }
     consume(message) {
+        message = message.filter(i => i.message);
         this.messageChangeEvent.next([...message]);
         this.collaborateCursor.draw(message.filter(item => {
             return item.message.id !== this.userinfo.id;

package/bundles/index.js

@@ -1836,11 +1836,18 @@ function findNonIntersectingRectangles(rectangles) {
 function getMaxRectangle(start, rectangles) {
     let merged = start;
     const remaining = [...rectangles];
+    const unMerged = [];
     while (remaining.length > 0) {
         const current = remaining.shift();
         if (current.intersects(merged)) {
             merged = current.merge(merged);
         }
+        else {
+            unMerged.push(current);
+        }
+    }
+    if (unMerged.length && merged !== start) {
+        return getMaxRectangle(merged, unMerged);
     }
     return merged;
 }
@@ -2075,13 +2082,13 @@ class TableComponent extends core$1.Component {
                 endIndex: i.length
             };
         });
-        this.selection.setSelectedRanges(slotRanges);
         this.tableSelection.set({
             startColumn: 0,
             endColumn: this.state.columnsConfig.length,
             startRow: startIndex,
             endRow: endIndex,
         });
+        this.selection.setSelectedRanges(slotRanges);
         this.focus.next(true);
         if (slotRanges.length) {
             setTimeout(() => {
@@ -2110,13 +2117,13 @@ class TableComponent extends core$1.Component {
                 endIndex: i.length
             };
         });
-        this.selection.setSelectedRanges(slotRanges);
         this.tableSelection.set({
             startColumn: startIndex,
             endColumn: endIndex,
             startRow: 0,
             endRow: this.state.rows.length,
         });
+        this.selection.setSelectedRanges(slotRanges);
         this.focus.next(true);
         this.selection.restore();
         this.textbus.focus();
@@ -5559,16 +5566,17 @@ function TopBar(props) {
         });
         return () => sub.unsubscribe();
     });
-    const instance = core.getCurrentInstance();
+    // const instance = getCurrentInstance()
     const s = props.component.changeMarker.onChange.subscribe(() => {
-        instance.markAsDirtied();
+        const currentLayout = props.component.state.columnsConfig.slice();
+        if (currentLayout.join(',') !== props.layoutWidth().join(',')) {
+            props.layoutWidth.set(currentLayout);
+        }
+        // instance.markAsDirtied()
     });
     core.onUnmounted(() => {
         s.unsubscribe();
     });
-    function refreshLayoutWidth() {
-        props.layoutWidth.set(props.component.state.columnsConfig.slice());
-    }
     return scopedCss.withScopedCSS(scopedId$4, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
@@ -5587,7 +5595,6 @@ function TopBar(props) {
                                     transform: 'translateX(-50%)'
                                 }, visible: !!selectedColumnRange(), children: jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Button, { onClick: () => {
                                             props.component.deleteColumns();
-                                            refreshLayoutWidth();
                                         }, children: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }) }) }) }), jsxRuntime.jsx("table", { style: {
                                     transform: `translateX(${-leftDistance()}px)`
                                 }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
@@ -5599,14 +5606,12 @@ function TopBar(props) {
                                                                 left: '-10px'
                                                             }, onClick: () => {
                                                                 props.component.insertColumn(0);
-                                                                refreshLayoutWidth();
                                                             }, children: jsxRuntime.jsx("button", { class: "insert-btn", type: "button", children: "+" }) })), jsxRuntime.jsx("span", { class: "insert-btn-wrap", onMouseenter: () => {
                                                                 tableService.onInsertColumnBefore.next(index + 1);
                                                             }, onMouseleave: () => {
                                                                 tableService.onInsertColumnBefore.next(null);
                                                             }, onClick: () => {
                                                                 props.component.insertColumn(index + 1);
-                                                                refreshLayoutWidth();
                                                             }, children: jsxRuntime.jsx("button", { class: "insert-btn", type: "button", children: "+" }) })] }) }));
                                         }) }) }) })] }), jsxRuntime.jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsxRuntime.jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
@@ -5683,8 +5688,8 @@ function LeftBar(props) {
         const actionBarRows = actionBarRef.current.rows;
         setTimeout(() => {
             Array.from(props.tableRef.current.rows).forEach((tr, i) => {
-                const height = tr.offsetHeight ||
-                    Math.min(...Array.from(tr.children).map(i => i.offsetHeight)) || 0;
+                const height = tr.getBoundingClientRect().height ||
+                    Math.min(...Array.from(tr.children).map(i => i.getBoundingClientRect().height)) || 0;
                 insertBarRows.item(i).style.height = height + 'px';
                 actionBarRows.item(i).style.height = height + 'px';
             });
@@ -6208,24 +6213,25 @@ let TableSelectionAwarenessDelegate = class TableSelectionAwarenessDelegate exte
             return false;
         }
         const rect = data.data || commonAncestorComponent.getMaxRectangle(findFocusCell(commonAncestorComponent, startSlot), findFocusCell(commonAncestorComponent, endSlot));
-        const renderer = this.domAdapter;
         if (!rect) {
             return false;
         }
-        const normalizedSlots = commonAncestorComponent.getSelectedNormalizedSlotsByRectangle(rect);
-        const rects = normalizedSlots.map(row => {
-            return row.cells.filter(i => i.visible).map(i => {
-                const td = renderer.getNativeNodeBySlot(i.raw.slot);
-                return td.getBoundingClientRect();
-            });
-        }).flat();
-        const left = Math.min(...rects.map(i => i.left));
-        const top = Math.min(...rects.map(i => i.top));
+        const dom = this.domAdapter.getNativeNodeByComponent(commonAncestorComponent);
+        const content = dom.querySelector('.xnote-table-content');
+        const trs = content.querySelectorAll('tr');
+        const cols = content.querySelectorAll('col');
+        const top = trs[rect.y1].getBoundingClientRect().top;
+        const left = cols[rect.x1].getBoundingClientRect().left;
+        let height = trs[rect.y2 - 1].getBoundingClientRect().bottom - top;
+        if (height === 0) {
+            height = trs[rect.y2 - 1].children.item(0).getBoundingClientRect().bottom - top;
+        }
+        const width = cols[rect.x2 - 1].getBoundingClientRect().right - left;
         return [{
                 left,
                 top,
-                width: Math.max(...rects.map(i => i.right)) - left,
-                height: Math.max(...rects.map(i => i.bottom)) - top
+                width,
+                height
             }];
     }
 };
@@ -6353,9 +6359,22 @@ class XNoteMessageBug extends collaborate.MessageBus {
     get() {
         const selection = this.selection;
         const c = selection.commonAncestorComponent;
-        return Object.assign(Object.assign({}, this.userinfo), { selection: selection.getPaths(), data: (!selection.isCollapsed && c instanceof TableComponent) ? c.getSelectedRect() : null });
+        const msg = Object.assign(Object.assign({}, this.userinfo), { selection: selection.getPaths() });
+        if (!selection.isCollapsed && c instanceof TableComponent) {
+            const selection = c.tableSelection();
+            if (selection) {
+                msg.data = {
+                    x1: selection.startColumn,
+                    x2: selection.endColumn,
+                    y1: selection.startRow,
+                    y2: selection.endRow,
+                };
+            }
+        }
+        return msg;
     }
     consume(message) {
+        message = message.filter(i => i.message);
         this.messageChangeEvent.next([...message]);
         this.collaborateCursor.draw(message.filter(item => {
             return item.message.id !== this.userinfo.id;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/xnote",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "A high-performance rich text editor that supports multiplayer online collaboration.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",