diff --git a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js index 1f14578de4fd0..77f3ca99126fe 100644 --- a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js +++ b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js @@ -204,7 +204,7 @@ const BOTTOMBAR_HEIGHT = 36; const DEFAULT_CELL_WIDTH = 96; const DEFAULT_CELL_HEIGHT = 23; - const SCROLLBAR_WIDTH$1 = 15; + const SCROLLBAR_WIDTH = 15; const AUTOFILL_EDGE_LENGTH = 8; const ICON_EDGE_LENGTH = 18; const UNHIDE_ICON_EDGE_LENGTH = 14; @@ -4075,7 +4075,7 @@ this.spreadsheetPosition = useSpreadsheetPosition(); } get maxHeight() { - return Math.max(0, this.viewportDimension.height - BOTTOMBAR_HEIGHT - SCROLLBAR_WIDTH$1); + return Math.max(0, this.viewportDimension.height - BOTTOMBAR_HEIGHT - SCROLLBAR_WIDTH); } get style() { // the props's position is expressed relative to the "body" element @@ -19521,9 +19521,6 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A break; } } - unsubscribe() { - this.mode = "inactive"; - } // --------------------------------------------------------------------------- // Getters // --------------------------------------------------------------------------- @@ -20424,13 +20421,12 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A setup() { owl.onMounted(() => { const el = this.composerRef.el; + if (this.props.isDefaultFocus) { + this.env.focusableElement.setFocusableElement(el); + } this.contentHelper.updateEl(el); this.processContent(); }); - owl.onWillUnmount(() => { - var _a, _b; - (_b = (_a = this.props).onComposerUnmounted) === null || _b === void 0 ? void 0 : _b.call(_a); - }); owl.onPatched(() => { if (!this.isKeyStillDown) { this.processContent(); @@ -20441,7 +20437,8 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A // Handlers // --------------------------------------------------------------------------- processArrowKeys(ev) { - if (this.env.model.getters.isSelectingForComposer()) { + if (this.env.model.getters.isSelectingForComposer() || + this.env.model.getters.getEditionMode() === "inactive") { this.functionDescriptionState.showDescription = false; // Prevent the default content editable behavior which moves the cursor // but don't stop the event and let it bubble to the grid which will @@ -20474,21 +20471,23 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A processTabKey(ev) { ev.preventDefault(); ev.stopPropagation(); - if (this.autoCompleteState.showProvider && this.autocompleteAPI) { - const autoCompleteValue = this.autocompleteAPI.getValueToFill(); - if (autoCompleteValue) { - this.autoComplete(autoCompleteValue); - return; + if (this.env.model.getters.getEditionMode() !== "inactive") { + if (this.autoCompleteState.showProvider && this.autocompleteAPI) { + const autoCompleteValue = this.autocompleteAPI.getValueToFill(); + if (autoCompleteValue) { + this.autoComplete(autoCompleteValue); + return; + } } - } - else { - // when completing with tab, if there is no value to complete, the active cell will be moved to the right. - // we can't let the model think that it is for a ref selection. - // todo: check if this can be removed someday - this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION"); + else { + // when completing with tab, if there is no value to complete, the active cell will be moved to the right. + // we can't let the model think that it is for a ref selection. + // todo: check if this can be removed someday + this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION"); + } + this.env.model.dispatch("STOP_EDITION"); } const direction = ev.shiftKey ? "left" : "right"; - this.env.model.dispatch("STOP_EDITION"); this.env.model.selection.moveAnchorCell(direction, 1); } processEnterKey(ev) { @@ -20520,6 +20519,9 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A this.compositionActive = false; } onKeydown(ev) { + if (this.env.model.getters.getEditionMode() === "inactive") { + return; + } let handler = this.keyMapping[ev.key]; if (handler) { handler.call(this, ev); @@ -20530,23 +20532,46 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A } } updateCursorIfNeeded() { - if (!this.env.model.getters.isSelectingForComposer()) { + const moveCursor = !this.env.model.getters.isSelectingForComposer() && + !(this.env.model.getters.getEditionMode() === "inactive"); + if (moveCursor) { const { start, end } = this.contentHelper.getCurrentSelection(); this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", { start, end }); this.isKeyStillDown = true; } } + onPaste(ev) { + if (this.env.model.getters.getEditionMode() !== "inactive") { + ev.stopPropagation(); + } + } /* * Triggered automatically by the content-editable between the keydown and key up * */ - onInput() { - if (this.props.focus === "inactive" || !this.shouldProcessInputEvents) { + onInput(ev) { + var _a, _b; + if (!this.shouldProcessInputEvents) { return; } + if (ev.inputType === "insertFromPaste" && + this.env.model.getters.getEditionMode() === "inactive") { + return; + } + ev.stopPropagation(); + let content; + if (this.env.model.getters.getEditionMode() === "inactive") { + content = ev.data || ""; + } + else { + const el = this.composerRef.el; + content = el.childNodes.length ? el.textContent : ""; + } + if (this.props.focus === "inactive") { + return (_b = (_a = this.props).onComposerCellFocused) === null || _b === void 0 ? void 0 : _b.call(_a, content); + } this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION"); - const el = this.composerRef.el; this.env.model.dispatch("SET_CURRENT_CONTENT", { - content: el.childNodes.length ? el.textContent : "", + content, selection: this.contentHelper.getCurrentSelection(), }); } @@ -20593,9 +20618,8 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A } const newSelection = this.contentHelper.getCurrentSelection(); this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION"); - if (this.props.focus === "inactive") { - this.props.onComposerContentFocused(newSelection); - } + this.props.onComposerContentFocused(); + if (this.props.focus === "inactive") ; this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", newSelection); this.processTokenAtCursor(); } @@ -20615,6 +20639,7 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A this.contentHelper.removeAll(); // removes the content of the composer, to be added just after this.shouldProcessInputEvents = false; if (this.props.focus !== "inactive") { + this.contentHelper.el.focus(); this.contentHelper.selectRange(0, 0); // move the cursor inside the composer at 0 0. } const content = this.getContent(); @@ -20783,10 +20808,9 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A Composer.defaultProps = { inputStyle: "", focus: "inactive", + isDefaultFocus: false, }; - const SCROLLBAR_WIDTH = 14; - const SCROLLBAR_HIGHT = 15; const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1; css /* scss */ ` div.o-grid-composer { @@ -20801,40 +20825,52 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A * It also applies the style of the cell to the composer input. */ class GridComposer extends owl.Component { + constructor() { + super(...arguments); + this.rect = undefined; + this.isEditing = false; + } + get defaultRect() { + return { x: 0, y: 0, width: 0, height: 0 }; + } setup() { - this.gridComposerRef = owl.useRef("gridComposer"); - this.composerState = owl.useState({ - rect: null, - delimitation: null, - }); - const { col, row } = this.env.model.getters.getPosition(); - this.zone = this.env.model.getters.expandZone(this.env.model.getters.getActiveSheetId(), { - left: col, - right: col, - top: row, - bottom: row, - }); - this.rect = this.env.model.getters.getVisibleRect(this.zone); - owl.onMounted(() => { - const el = this.gridComposerRef.el; - //TODO Should be more correct to have a props that give the parent's clientHeight and clientWidth - const maxHeight = el.parentElement.clientHeight - this.rect.y - SCROLLBAR_HIGHT; - el.style.maxHeight = (maxHeight + "px"); - const maxWidth = el.parentElement.clientWidth - this.rect.x - SCROLLBAR_WIDTH; - el.style.maxWidth = (maxWidth + "px"); - this.composerState.rect = { - x: this.rect.x, - y: this.rect.y, - width: el.clientWidth, - height: el.clientHeight, - }; - this.composerState.delimitation = { - width: el.parentElement.clientWidth, - height: el.parentElement.clientHeight, - }; + owl.onWillUpdateProps(() => { + const isEditing = this.env.model.getters.getEditionMode() !== "inactive"; + if (this.isEditing !== isEditing) { + this.isEditing = isEditing; + if (!isEditing) { + this.rect = undefined; + this.env.focusableElement.focus(); + return; + } + const position = this.env.model.getters.getPosition(); + const zone = this.env.model.getters.expandZone(this.env.model.getters.getActiveSheetId(), positionToZone(position)); + this.rect = this.env.model.getters.getVisibleRect(zone); + } }); } + get composerProps() { + const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders(); + return { + rect: this.rect && { ...this.rect }, + delimitation: { + width, + height, + }, + inputStyle: this.composerStyle, + focus: this.props.focus, + isDefaultFocus: true, + onComposerContentFocused: this.props.onComposerContentFocused, + onComposerCellFocused: this.props.onComposerCellFocused, + }; + } get containerStyle() { + if (this.env.model.getters.getEditionMode() === "inactive" || !this.rect) { + return ` + position: absolute; + z-index: -1000; + `; + } const isFormula = this.env.model.getters.getCurrentContent().startsWith("="); const cell = this.env.model.getters.getActiveCell(); let style = {}; @@ -20857,12 +20893,18 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A if (!isFormula) { textAlign = style.align || (cell === null || cell === void 0 ? void 0 : cell.defaultAlign) || "left"; } + const sheetDimensions = this.env.model.getters.getSheetViewDimensionWithHeaders(); + const maxWidth = sheetDimensions.width - this.rect.x; + const maxHeight = sheetDimensions.height - this.rect.y; return ` left: ${left - 1}px; top: ${top}px; min-width: ${width + 2}px; min-height: ${height + 1}px; + max-width: ${maxWidth}px; + max-height: ${maxHeight}px; + background: ${background}; color: ${color}; @@ -22499,8 +22541,8 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A &.corner { right: 0px; bottom: 0px; - height: ${SCROLLBAR_WIDTH$1}px; - width: ${SCROLLBAR_WIDTH$1}px; + height: ${SCROLLBAR_WIDTH}px; + width: ${SCROLLBAR_WIDTH}px; border-top: 1px solid #e2e3e3; border-left: 1px solid #e2e3e3; } @@ -22565,7 +22607,7 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A return { left: `${this.props.position.left + x}px`, bottom: "0px", - height: `${SCROLLBAR_WIDTH$1}px`, + height: `${SCROLLBAR_WIDTH}px`, right: `0px`, }; } @@ -22607,7 +22649,7 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A return { top: `${this.props.position.top + y}px`, right: "0px", - width: `${SCROLLBAR_WIDTH$1}px`, + width: `${SCROLLBAR_WIDTH}px`, bottom: `0px`, }; } @@ -22765,16 +22807,15 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A menuItems: [], }); this.gridRef = owl.useRef("grid"); - this.hiddenInput = owl.useRef("hiddenInput"); this.canvasPosition = useAbsolutePosition(this.gridRef); this.hoveredCell = owl.useState({ col: undefined, row: undefined }); owl.useExternalListener(document.body, "cut", this.copy.bind(this, true)); owl.useExternalListener(document.body, "copy", this.copy.bind(this, false)); owl.useExternalListener(document.body, "paste", this.paste); - owl.onMounted(() => this.focus()); - this.props.exposeFocus(() => this.focus()); + owl.onMounted(() => this.focusDefaultElement()); + this.props.exposeFocus(() => this.focusDefaultElement()); useGridDrawing("canvas", this.env.model, () => this.env.model.getters.getSheetViewDimensionWithHeaders()); - owl.useEffect(() => this.focus(), () => [this.env.model.getters.getActiveSheetId()]); + owl.useEffect(() => this.focusDefaultElement(), () => [this.env.model.getters.getActiveSheetId()]); this.onMouseWheel = useWheelHandler((deltaX, deltaY) => { this.moveCanvas(deltaX, deltaY); this.hoveredCell.col = undefined; @@ -22789,19 +22830,18 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A return ` top: ${HEADER_HEIGHT}px; left: ${HEADER_WIDTH}px; - height: calc(100% - ${HEADER_HEIGHT + SCROLLBAR_WIDTH$1}px); - width: calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH$1}px); + height: calc(100% - ${HEADER_HEIGHT + SCROLLBAR_WIDTH}px); + width: calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH}px); `; } onClosePopover() { this.closeOpenedPopover(); - this.focus(); + this.focusDefaultElement(); } - focus() { - var _a; + focusDefaultElement() { if (!this.env.model.getters.getSelectedFigureId() && this.env.model.getters.getEditionMode() === "inactive") { - (_a = this.hiddenInput.el) === null || _a === void 0 ? void 0 : _a.focus(); + this.env.focusableElement.focus(); } } get gridEl() { @@ -22950,19 +22990,6 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A return; } } - onInput(ev) { - // the user meant to paste in the sheet, not open the composer with the pasted content - if (!ev.isComposing && ev.inputType === "insertFromPaste") { - return; - } - if (ev.data) { - // if the user types a character on the grid, it means he wants to start composing the selected cell with that - // character - ev.preventDefault(); - ev.stopPropagation(); - this.props.onGridComposerCellFocused(ev.data); - } - } // --------------------------------------------------------------------------- // Context Menu // --------------------------------------------------------------------------- @@ -23043,7 +23070,7 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A } closeMenu() { this.menuState.isOpen = false; - this.focus(); + this.focusDefaultElement(); } } Grid.template = "o-spreadsheet-Grid"; @@ -26739,7 +26766,7 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A * a breaking change is made in the way the state is handled, and an upgrade * function should be defined */ - const CURRENT_VERSION = 12; + const CURRENT_VERSION = 12.5; const INITIAL_SHEET_ID = "Sheet1"; /** * This function tries to load anything that could look like a valid @@ -27005,6 +27032,31 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A return data; }, }, + { + description: "Fix datafilter duplication", + from: 12, + to: 12.5, + applyMigration(data) { + for (let sheet of data.sheets || []) { + let knownDataFilterZones = []; + for (let filterTable of sheet.filterTables || []) { + const zone = toZone(filterTable.range); + // See commit message for the details + const intersectZoneIndex = knownDataFilterZones.findIndex((knownZone) => overlap(knownZone, zone)); + if (intersectZoneIndex !== -1) { + knownDataFilterZones[intersectZoneIndex] = zone; + } + else { + knownDataFilterZones.push(zone); + } + } + sheet.filterTables = knownDataFilterZones.map((zone) => ({ + range: zoneToXc(zone), + })); + } + return data; + }, + }, ]; /** * This function is used to repair faulty data independently of the migration. @@ -27900,9 +27952,6 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A format: cell.format ? getItemId(cell.format, formats) : undefined, content: cell.content || undefined, }; - if (cell.isFormula()) { - cells[xc].content = this.buildFormulaContent(_sheet.id, cell, cell.dependencies, true); - } } _sheet.cells = cells; } @@ -27925,6 +27974,9 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A const exportedCellData = sheet.cells[xc]; exportedCellData.value = cell.evaluated.value; exportedCellData.isFormula = cell.isFormula(); + if (cell.isFormula()) { + exportedCellData.content = this.buildFormulaContent(sheet.id, cell, cell.dependencies, true); + } if (cell.format !== cell.evaluated.format) { exportedCellData.computedFormat = cell.evaluated.format; } @@ -35367,9 +35419,6 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A } } } - unsubscribe() { - this.unfocus(); - } // --------------------------------------------------------------------------- // Getters || only callable by the parent // --------------------------------------------------------------------------- @@ -35581,9 +35630,6 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A } (_a = this.currentInput) === null || _a === void 0 ? void 0 : _a.handle(cmd); } - unsubscribe() { - this.unfocus(); - } // --------------------------------------------------------------------------- // Getters // --------------------------------------------------------------------------- @@ -37982,6 +38028,19 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A sequence: 5, }); + class FocusableElement { + constructor() { + this.focusableElement = undefined; + } + setFocusableElement(element) { + this.focusableElement = element; + } + focus() { + var _a; + (_a = this.focusableElement) === null || _a === void 0 ? void 0 : _a.focus(); + } + } + // ----------------------------------------------------------------------------- // SpreadSheet // ----------------------------------------------------------------------------- @@ -39125,8 +39184,8 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A &.corner { right: 0px; bottom: 0px; - height: ${SCROLLBAR_WIDTH$1}px; - width: ${SCROLLBAR_WIDTH$1}px; + height: ${SCROLLBAR_WIDTH}px; + width: ${SCROLLBAR_WIDTH}px; border-top: 1px solid #e2e3e3; border-left: 1px solid #e2e3e3; } @@ -39170,6 +39229,7 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A toggleSidePanel: this.toggleSidePanel.bind(this), _t: Spreadsheet._t, clipboard: navigator.clipboard, + focusableElement: new FocusableElement(), }); owl.useExternalListener(window, "resize", () => this.render(true)); owl.useExternalListener(window, "beforeunload", this.unbindModelEvents.bind(this)); @@ -39272,17 +39332,18 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A this.model.dispatch("UNFOCUS_SELECTION_INPUT"); this.composer.topBarFocus = "contentFocus"; this.composer.gridFocusMode = "inactive"; - this.setComposerContent({ selection } || {}); + this.setComposerContent({ selection }); } - onGridComposerContentFocused() { + onGridComposerContentFocused(selection) { if (this.model.getters.isReadonly()) { return; } this.model.dispatch("UNFOCUS_SELECTION_INPUT"); this.composer.topBarFocus = "inactive"; this.composer.gridFocusMode = "contentFocus"; - this.setComposerContent({}); + this.setComposerContent({ selection }); } + // TODO: either both are defined or none of them. change those args to an object onGridComposerCellFocused(content, selection) { if (this.model.getters.isReadonly()) { return; @@ -40655,18 +40716,17 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A if (this.observers.find((sub) => sub.owner === owner)) { throw new Error("You are already subscribed forever"); } - if ((_a = this.mainSubscription) === null || _a === void 0 ? void 0 : _a.owner) { + if (((_a = this.mainSubscription) === null || _a === void 0 ? void 0 : _a.owner) && this.mainSubscription.owner !== owner) { (_c = (_b = this.mainSubscription.callbacks).release) === null || _c === void 0 ? void 0 : _c.call(_b); } this.mainSubscription = { owner, callbacks }; } release(owner) { - var _a, _b, _c, _d; + var _a; if (((_a = this.mainSubscription) === null || _a === void 0 ? void 0 : _a.owner) !== owner || this.observers.find((sub) => sub.owner === owner)) { return; } - (_d = (_b = this.mainSubscription) === null || _b === void 0 ? void 0 : (_c = _b.callbacks).release) === null || _d === void 0 ? void 0 : _d.call(_c); this.mainSubscription = this.defaultSubscription; } /** @@ -43085,7 +43145,7 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A BOTTOMBAR_HEIGHT, DEFAULT_CELL_WIDTH, DEFAULT_CELL_HEIGHT, - SCROLLBAR_WIDTH: SCROLLBAR_WIDTH$1, + SCROLLBAR_WIDTH, }; const registries = { autofillModifiersRegistry, @@ -43198,9 +43258,9 @@ day_count_convention (number, default=${DEFAULT_DAY_COUNT_CONVENTION} ) ${_lt("A Object.defineProperty(exports, '__esModule', { value: true }); - __info__.version = '16.0.31'; - __info__.date = '2024-02-02T14:02:36.070Z'; - __info__.hash = 'a2e40a9'; + __info__.version = '16.0.32'; + __info__.date = '2024-02-09T14:25:28.385Z'; + __info__.hash = '452dce2'; })(this.o_spreadsheet = this.o_spreadsheet || {}, owl); diff --git a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.xml b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.xml index 5cdab5d621b12..a20c1f931cf79 100644 --- a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.xml +++ b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.xml @@ -189,7 +189,7 @@ t-on-keyup="onKeyup" t-on-click="onClick" t-on-blur="onBlur" - t-on-paste.stop="" + t-on-paste="onPaste" t-on-compositionstart="onCompositionStart" t-on-compositionend="onCompositionEnd" /> @@ -279,14 +279,7 @@
- +
@@ -592,9 +585,10 @@ class="o-grid" tabindex="-1" t-att-class="{'o-two-columns': !props.sidePanelIsOpen}" - t-on-click="focus" + t-on-click="focusDefaultElement" t-on-keydown="onKeydown" t-on-wheel="onMouseWheel" + t-on-contextmenu="onInputContextMenu" t-ref="grid"> - - - - - - - +