@textbus/xnote 0.0.10 → 0.1.0

package/bundles/index.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('@viewfly/core/jsx-runtime');
 var scopedCss = require('@viewfly/scoped-css');
 var core = require('@viewfly/core');
 var core$1 = require('@textbus/core');
+var color = require('@tanbo/color');
 var platformBrowser = require('@textbus/platform-browser');
 var platformBrowser$1 = require('@viewfly/platform-browser');
 var hooks = require('@viewfly/hooks');
@@ -11,10 +12,9 @@ var highlightjs = require('highlight.js');
 var uuid = require('uuid');
 var Katex = require('katex');
 var adapterViewfly = require('@textbus/adapter-viewfly');
-var color = require('@tanbo/color');
 var collaborate = require('@textbus/collaborate');
 
-var scopedId$n = "vf-d94b56";
+var scopedId$o = "vf-d94b56";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -147,7 +147,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$n, () => {
+    return scopedCss.withScopedCSS(scopedId$o, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -159,6 +159,346 @@ function Button(props) {
     });
 }
 
+var scopedId$n = "vf-d552b9";
+
+class Picker {
+    set hex(color$1) {
+        var _a;
+        const c = color$1 ? color.normalizeHex(color$1) : null;
+        if (c) {
+            this.empty = false;
+            this._hex = c;
+            this._hsl = color.hex2Hsl(c);
+            this._rgb = color.hex2Rgb(c);
+            this._hsv = color.hex2Hsv(c);
+            this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+        }
+        else {
+            this.empty = true;
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get hex() {
+        return this.empty ? null : this._hex;
+    }
+    set hsl(color$1) {
+        var _a;
+        if (!color$1 || typeof color$1.h !== 'number' || typeof color$1.s !== 'number' || typeof color$1.l !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._hsl = color$1;
+            this._hex = color.hsl2Hex(color$1);
+            this._hsv = color.hsl2Hsv(color$1);
+            this._rgb = color.hsl2Rgb(color$1);
+            this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get hsl() {
+        return this.empty ? null : this._hsl;
+    }
+    set rgb(color$1) {
+        var _a;
+        if (!color$1 || typeof color$1.r !== 'number' || typeof color$1.g !== 'number' || typeof color$1.b !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._rgb = color$1;
+            this._rgba = Object.assign(Object.assign({}, color$1), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+            this._hsl = color.rgb2Hsl(color$1);
+            this._hex = color.rgb2Hex(color$1);
+            this._hsv = color.rgb2Hsv(color$1);
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get rgb() {
+        return this.empty ? null : this._rgb;
+    }
+    set rgba(color$1) {
+        if (!color$1 ||
+            typeof color$1.r !== 'number' ||
+            typeof color$1.g !== 'number' ||
+            typeof color$1.b !== 'number' ||
+            typeof color$1.a !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._rgba = color$1;
+            this._hsl = color.rgb2Hsl(color$1);
+            this._hex = color.rgb2Hex(color$1);
+            this._hsv = color.rgb2Hsv(color$1);
+        }
+        this.onChange();
+    }
+    get rgba() {
+        return this.empty ? null : this._rgba;
+    }
+    set hsv(color$1) {
+        var _a;
+        if (!color$1 || typeof color$1.h !== 'number' || typeof color$1.s !== 'number' || typeof color$1.v !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._hsv = color$1;
+            this._hex = color.hsv2Hex(color$1);
+            this._hsl = color.hsv2Hsl(color$1);
+            this._rgb = color.hsv2Rgb(color$1);
+            this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get hsv() {
+        return this.empty ? null : this._hsv;
+    }
+    constructor(onChange, value) {
+        this.onChange = onChange;
+        this._hex = '';
+        this._hsl = null;
+        this._rgb = null;
+        this._hsv = null;
+        this._rgba = null;
+        this.empty = false;
+        this.resetAlpha = true;
+        this.hex = value || '#f00';
+    }
+}
+const recentColors = core.createSignal([]);
+function ColorPicker(props) {
+    const instance = core.getCurrentInstance();
+    const picker = new Picker(() => {
+        instance.markAsDirtied();
+    }, props.value);
+    const mainColors = [
+        '#000', '#333', '#444', '#555', '#666', '#777', '#888',
+        '#999', '#aaa', '#bbb', '#ccc', '#ddd', '#eee', '#fff',
+    ];
+    const colors = [
+        '#fec6c2', '#fee5c3', '#fefcc3', '#baf6c4', '#c3ebfe', '#c3cbfe', '#e1caff',
+        '#fc8e88', '#fccc88', '#fcf888', '#76ec8a', '#88d8fc', '#97a4fb', '#c098f4',
+        '#ff6666', '#ffb151', '#fada3a', '#18c937', '#3aaafa', '#6373e2', '#a669f7',
+        '#f63030', '#f88933', '#deb12a', '#038e23', '#1276cc', '#3f52ce', '#8838ed',
+        '#c60000', '#d86912', '#b88811', '#086508', '#144c93', '#1b2eaa', '#6117bf',
+    ];
+    function addRecentColor() {
+        const color = picker.hex;
+        if (!color) {
+            return;
+        }
+        const colors = recentColors().filter(item => {
+            return item !== color;
+        });
+        colors.unshift(color);
+        if (colors.length >= 7) {
+            colors.length = 7;
+        }
+        recentColors.set(colors);
+    }
+    const paletteRef = core.createRef();
+    function bindPaletteEvent(ev) {
+        const update = (ev) => {
+            var _a;
+            const position = paletteRef.current.getBoundingClientRect();
+            const offsetX = ev.clientX - position.left;
+            const offsetY = ev.clientY - position.top;
+            let s = offsetX / 130 * 100;
+            let v = 100 - offsetY / 130 * 100;
+            s = Math.max(0, s);
+            s = Math.min(100, s);
+            v = Math.max(0, v);
+            v = Math.min(100, v);
+            picker.resetAlpha = false;
+            picker.hsv = {
+                h: picker.hsv.h,
+                s,
+                v
+            };
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        update(ev);
+        const unMouseMove = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    const hueBarRef = core.createRef();
+    function bindHueBarEvent(ev) {
+        const update = (ev) => {
+            var _a;
+            const position = hueBarRef.current.getBoundingClientRect();
+            let offsetY = ev.clientY - position.top;
+            offsetY = Math.max(0, offsetY);
+            offsetY = Math.min(100, offsetY);
+            const h = 360 / 100 * offsetY;
+            picker.resetAlpha = false;
+            picker.hsv = {
+                h,
+                s: picker.hsv.s,
+                v: picker.hsv.v
+            };
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        update(ev);
+        const unMouseMove = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    const alphaBarRef = core.createRef();
+    function bindAlphaEvent(ev) {
+        const update = (ev) => {
+            var _a;
+            const position = alphaBarRef.current.getBoundingClientRect();
+            let offsetX = ev.clientX - position.left;
+            offsetX = Math.max(0, offsetX);
+            offsetX = Math.min(position.width, offsetX);
+            picker.rgba = Object.assign(Object.assign({}, picker.rgba), { a: offsetX / position.width });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        update(ev);
+        const unMouseMove = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    function bindInputsEvent(ev) {
+        var _a;
+        const updateByHSL = (h, s, l) => {
+            var _a;
+            picker.hex = color.hsl2Hex({ h, s, l });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        const updateByRGB = (r, g, b) => {
+            var _a;
+            picker.hex = color.rgb2Hex({ r, g, b });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        const el = ev.target;
+        const model = el.getAttribute('data-model');
+        if (el.type === 'number') {
+            const min = +el.min;
+            const max = +el.max;
+            el.value = Math.max(+el.value, min) + '';
+            el.value = Math.min(+el.value, max) + '';
+        }
+        const { h, s, l } = picker.hsl;
+        const { r, g, b } = picker.rgb;
+        switch (model) {
+            case 'H':
+                updateByHSL(+el.value, s, l);
+                break;
+            case 'S':
+                updateByHSL(h, +el.value, l);
+                break;
+            case 'L':
+                updateByHSL(h, s, +el.value);
+                break;
+            case 'R':
+                updateByRGB(+el.value, g, b);
+                break;
+            case 'G':
+                updateByRGB(r, +el.value, b);
+                break;
+            case 'B':
+                updateByRGB(r, g, +el.value);
+                break;
+            case 'HEX':
+                if (/^#(([0-9a-f]){3}){1,2}$/i.test(el.value)) {
+                    picker.hex = el.value;
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+                }
+                break;
+        }
+    }
+    const isShowPalette = core.createSignal(false);
+    function selected() {
+        props.onSelected(picker);
+        addRecentColor();
+        isShowPalette.set(false);
+    }
+    function bindColorOptionsEvent(ev) {
+        const target = ev.target;
+        if (!target.hasAttribute('data-color')) {
+            return;
+        }
+        const c = target.getAttribute('data-color');
+        if (/^rgba/.test(c)) {
+            picker.rgba = color.parseCss(c);
+        }
+        else {
+            picker.hex = c;
+        }
+        props.onSelected(picker);
+        addRecentColor();
+    }
+    return scopedCss.withScopedCSS(scopedId$n, () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        return (jsxRuntime.jsxs("div", { onMousedown: ev => {
+                ev.stopPropagation();
+            }, class: {
+                'xnote-color-picker': true,
+                'xnote-color-picker-show-palette': isShowPalette()
+            }, children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-preset", onClick: bindColorOptionsEvent, children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 50px", children: mainColors.map(color$1 => {
+                                var _a, _b, _c;
+                                const hsl = (color.any2Hsl(color$1) || {});
+                                return (jsxRuntime.jsx("div", { "data-color": color$1, class: {
+                                        'xnote-color-picker-current': hsl.l === ((_a = picker.hsl) === null || _a === void 0 ? void 0 : _a.l) && hsl.s === ((_b = picker.hsl) === null || _b === void 0 ? void 0 : _b.s) && hsl.h === ((_c = picker.hsl) === null || _c === void 0 ? void 0 : _c.h),
+                                    }, style: {
+                                        background: color$1
+                                    } }));
+                            }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 118px;", children: colors.map(color => {
+                                return (jsxRuntime.jsx("div", { "data-color": color, style: {
+                                        background: color
+                                    } }));
+                            }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-recent-text", children: "\u6700\u8FD1\u989C\u8272" }), jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 25px;", children: Array.from({ length: 7 }).map((_, index) => {
+                                const colors = recentColors();
+                                const color = colors[index] || '';
+                                return (jsxRuntime.jsx("div", { "data-color": color || 'unknown', style: {
+                                        background: color
+                                    } }));
+                            }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-flex", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", children: jsxRuntime.jsx("div", { "data-color": "" }) }), jsxRuntime.jsxs("button", { type: "button", class: "xnote-color-picker-to-palette", onClick: () => {
+                                        isShowPalette.set(true);
+                                    }, children: ["\u8C03\u8272\u76D8", jsxRuntime.jsx("svg", { style: "vertical-align: middle;fill: currentColor;overflow: hidden;", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { transform: "rotate(180, 512, 512)", d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) })] })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-menu", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-back-btn-wrap", children: jsxRuntime.jsxs("button", { type: "button", class: "xnote-color-picker-back-btn", onClick: () => {
+                                    isShowPalette.set(false);
+                                }, children: [jsxRuntime.jsx("svg", { style: "vertical-align: middle;fill: currentColor;overflow: hidden;", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) }), "\u8FD4\u56DE"] }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer", children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-left", children: [jsxRuntime.jsx("div", { class: [
+                                                'xnote-color-picker-palette',
+                                                {
+                                                    'xnote-color-picker-palette-empty': picker.empty
+                                                }
+                                            ], style: {
+                                                background: picker.empty ? '' : `linear-gradient(to right, #fff, hsl(${(_a = picker.hsv) === null || _a === void 0 ? void 0 : _a.h}, 100%, 50%))`
+                                            }, ref: paletteRef, onMousedown: bindPaletteEvent, children: jsxRuntime.jsx("div", { class: "xnote-color-picker-palette-point", style: {
+                                                    left: `calc(${(_b = picker.hsv) === null || _b === void 0 ? void 0 : _b.s}% - 6px)`,
+                                                    top: `calc(${100 - (((_c = picker.hsv) === null || _c === void 0 ? void 0 : _c.v) || 0)}% - 6px)`
+                                                } }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-alpha", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-viewer-alpha-pointer", style: {
+                                                        left: picker.empty ? '100%' : (((_d = picker.rgba) === null || _d === void 0 ? void 0 : _d.a) || 0) * 100 + '%',
+                                                    } }), jsxRuntime.jsx("div", { class: "xnote-color-picker-viewer-alpha-bar", style: {
+                                                        background: picker.empty ? '' : `linear-gradient(to right, transparent, ${picker.hex})`
+                                                    }, onMousedown: bindAlphaEvent, ref: alphaBarRef })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-right", children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-tools", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-value", children: jsxRuntime.jsx("div", { class: "xnote-color-picker-value-color", style: {
+                                                            background: picker.empty ? '' : `rgba(${(_e = picker.rgba) === null || _e === void 0 ? void 0 : _e.r}, ${(_f = picker.rgba) === null || _f === void 0 ? void 0 : _f.g}, ${(_g = picker.rgba) === null || _g === void 0 ? void 0 : _g.b}, ${(_h = picker.rgba) === null || _h === void 0 ? void 0 : _h.a})`
+                                                        } }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-hue-bar", ref: hueBarRef, onMousedown: bindHueBarEvent, children: jsxRuntime.jsx("div", { class: "xnote-color-picker-hue-pointer", style: {
+                                                            top: `calc(${(((_j = picker.hsv) === null || _j === void 0 ? void 0 : _j.h) || 0) / 360 * 100}% - 4px)`
+                                                        } }) })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-viewer-alpha-value", children: Number((_k = picker.rgba) === null || _k === void 0 ? void 0 : _k.a.toFixed(2)) })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-inputs", onInput: bindInputsEvent, children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-hsl", children: [jsxRuntime.jsxs("div", { children: ["H ", jsxRuntime.jsx("input", { "data-model": "H", min: "0", max: "360", type: "number", value: (_l = picker.hsl) === null || _l === void 0 ? void 0 : _l.h })] }), jsxRuntime.jsxs("div", { children: ["S ", jsxRuntime.jsx("input", { "data-model": "S", min: "0", max: "100", type: "number", value: (_m = picker.hsl) === null || _m === void 0 ? void 0 : _m.s })] }), jsxRuntime.jsxs("div", { children: ["L ", jsxRuntime.jsx("input", { "data-model": "L", min: "0", max: "100", type: "number", value: (_o = picker.hsl) === null || _o === void 0 ? void 0 : _o.l })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-rgb", children: [jsxRuntime.jsxs("div", { children: ["R ", jsxRuntime.jsx("input", { "data-model": "R", min: "0", max: "255", type: "number", value: (_p = picker.rgb) === null || _p === void 0 ? void 0 : _p.r })] }), jsxRuntime.jsxs("div", { children: ["G ", jsxRuntime.jsx("input", { "data-model": "G", min: "0", max: "255", type: "number", value: (_q = picker.rgb) === null || _q === void 0 ? void 0 : _q.g })] }), jsxRuntime.jsxs("div", { children: ["B ", jsxRuntime.jsx("input", { "data-model": "B", min: "0", max: "255", type: "number", value: (_r = picker.rgb) === null || _r === void 0 ? void 0 : _r.b })] })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-hex", children: jsxRuntime.jsxs("div", { children: ["HEX ", jsxRuntime.jsx("input", { "data-model": "HEX", type: "text", value: picker.hex })] }) })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-btn-wrap", children: jsxRuntime.jsx("button", { type: "button", class: "xnote-color-picker-btn", onClick: selected, children: "\u786E\u5B9A" }) })] })] }));
+    });
+}
+
 var scopedId$m = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
@@ -1836,11 +2176,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 +2422,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 +2457,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();
@@ -3148,7 +3495,7 @@ const backgroundColorFormatter = new core$1.Formatter('backgroundColor', {
 });
 const backgroundColorFormatLoader = {
     match(element) {
-        return !!element.style.backgroundColor;
+        return element.tagName !== 'TD' && !!element.style.backgroundColor;
     },
     read(element) {
         return {
@@ -3961,6 +4308,36 @@ function CellAlignTool() {
     };
 }
 
+const cellBackgroundAttr = new core$1.Attribute('cellBackground', {
+    render(node, formatValue) {
+        const rgba = color.parseCss(formatValue);
+        if (rgba) {
+            const hsl = color.rgb2Hsl(rgba);
+            if (hsl.l > 50) {
+                hsl.l -= 10;
+            }
+            else {
+                hsl.l += Math.max((50 - hsl.l) * 0.55, 10);
+            }
+            hsl.s *= 0.7;
+            const newRgba = color.hsl2Rgb(hsl);
+            node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a})`);
+        }
+        node.styles.set('backgroundColor', formatValue);
+    }
+});
+const cellBackgroundAttrLoader = {
+    match(element) {
+        return element instanceof HTMLTableCellElement && !!element.style.backgroundColor;
+    },
+    read(element) {
+        return {
+            attribute: cellBackgroundAttr,
+            value: element.style.backgroundColor
+        };
+    }
+};
+
 function CellBackgroundTool() {
     const refreshService = core.inject(exports.RefreshService);
     const selection = core.inject(core$1.Selection);
@@ -3968,16 +4345,24 @@ function CellBackgroundTool() {
         highlight: false,
         disabled: false,
     });
-    function split() {
-        // const commonAncestorComponent = selection.commonAncestorComponent
-        // if (commonAncestorComponent instanceof TableComponent) {
-        //   const scopes = selection.getSelectedScopes()
-        //   if (scopes.length) {
-        //     const start = commonAncestorComponent.getCellBySlot(scopes.at(0)!.slot)
-        //     const end = commonAncestorComponent.getCellBySlot(scopes.at(-1)!.slot)
-        //     // Re
-        //   }
-        // }
+    function setColor(picker) {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            const slots = commonAncestorComponent.getSelectedNormalizedSlots();
+            if (slots) {
+                slots.map(i => {
+                    return i.cells.filter(t => t.visible).map(i => i.raw.slot);
+                }).flat().forEach(slot => {
+                    const rgba = picker.rgba;
+                    if (rgba) {
+                        slot.setAttribute(cellBackgroundAttr, `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`);
+                    }
+                    else {
+                        slot.removeAttribute(cellBackgroundAttr);
+                    }
+                });
+            }
+        }
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const commonAncestorComponent = selection.commonAncestorComponent;
@@ -3990,7 +4375,7 @@ function CellBackgroundTool() {
     });
     return () => {
         const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) });
+        return (jsxRuntime.jsx(Dropdown, { width: '177px', menu: jsxRuntime.jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) }) }));
     };
 }
 
@@ -4988,7 +5373,7 @@ const Toolbar = core.withAnnotation({
                 opacity: p.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: p.transitionDuration + 's'
-            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table"), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
+            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table"), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
     });
 });
 
@@ -6206,24 +6591,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 +6737,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;
@@ -6420,6 +6819,7 @@ class Editor extends core$1.Textbus {
                 strikeThroughFormatLoader,
                 underlineFormatLoader
             ], attributeLoaders: [
+                cellBackgroundAttrLoader,
                 cellAlignAttrLoader,
                 headingAttrLoader,
                 textAlignAttrLoader,
@@ -6507,6 +6907,7 @@ class Editor extends core$1.Textbus {
                 strikeThroughFormatter,
                 underlineFormatter
             ], attributes: [
+                cellBackgroundAttr,
                 cellAlignAttr,
                 headingAttr,
                 textAlignAttr,
@@ -6578,6 +6979,7 @@ exports.Button = Button;
 exports.CellAlignTool = CellAlignTool;
 exports.CellBackgroundTool = CellBackgroundTool;
 exports.CodeTool = CodeTool;
+exports.ColorPicker = ColorPicker;
 exports.ColorTool = ColorTool;
 exports.ComponentToolbar = ComponentToolbar;
 exports.Divider = Divider;
@@ -6611,6 +7013,7 @@ exports.Organization = Organization;
 exports.OutputInjectionToken = OutputInjectionToken;
 exports.ParagraphComponent = ParagraphComponent;
 exports.ParagraphView = ParagraphView;
+exports.Picker = Picker;
 exports.Popup = Popup;
 exports.RootComponent = RootComponent;
 exports.RootView = RootView;
@@ -6637,6 +7040,8 @@ exports.boldFormatLoader = boldFormatLoader;
 exports.boldFormatter = boldFormatter;
 exports.cellAlignAttr = cellAlignAttr;
 exports.cellAlignAttrLoader = cellAlignAttrLoader;
+exports.cellBackgroundAttr = cellBackgroundAttr;
+exports.cellBackgroundAttrLoader = cellBackgroundAttrLoader;
 exports.codeFormatLoader = codeFormatLoader;
 exports.codeFormatter = codeFormatter;
 exports.colorFormatLoader = colorFormatLoader;

package/bundles/textbus/attributes/_api.d.ts

@@ -1,4 +1,5 @@
 export * from './cell-align.attr';
+export * from './cell-background.attr';
 export * from './heading.attr';
 export * from './text-align.attr';
 export * from './text-indent.attr';

package/bundles/textbus/attributes/cell-background.attr.d.ts

@@ -0,0 +1,4 @@
+import { Attribute } from '@textbus/core';
+import { AttributeLoader } from '@textbus/platform-browser';
+export declare const cellBackgroundAttr: Attribute<string>;
+export declare const cellBackgroundAttrLoader: AttributeLoader<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/xnote",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "A high-performance rich text editor that supports multiplayer online collaboration.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -33,7 +33,7 @@
     "@textbus/platform-browser": "^4.2.0",
     "@viewfly/core": "^1.0.5",
     "@viewfly/hooks": "^1.0.5",
-    "@viewfly/platform-browser": "^1.0.5",
+    "@viewfly/platform-browser": "^1.0.6",
     "@viewfly/scoped-css": "^1.0.5",
     "highlight.js": "^11.9.0",
     "katex": "^0.16.10",