Skip to content

Commit

Permalink
fix(editor): range selector (#1503)
Browse files Browse the repository at this point in the history 
* fix(editor): review update and active callback

* fix(editor): range selector focus and range error

* fix(editor): type error

* fix(editor): remove invalid code
  • Loading branch information
@DR-Univer
DR-Univer authored Mar 7, 2024
1 parent ed27e84 commit eee2aab
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 34 deletions.
8 changes: 0 additions & 8 deletions examples/src/plugins/debugger/views/test-editor/TestTextEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,6 @@ export const TestEditorContainer = () => {

const sheetId = workbook.getActiveSheet().getSheetId();

// function onActive(state: boolean) {
// console.warn('active:', state);
// }
// onActive={onActive} onValid={onValid}
// function onValid(state: boolean) {
// console.warn('valid:', state);
// }

return (
<div
style={containerStyle}
Expand Down
38 changes: 28 additions & 10 deletions packages/sheets-ui/src/controllers/editor-bridge.controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,20 +217,38 @@ export class EditorBridgeController extends RxDisposable {

private _initialRangeSelector() {
this.disposeWithMe(
this._selectionManagerService.selectionMoving$.subscribe((selectionWithStyle: Nullable<ISelectionWithStyle[]>) => {
if (!selectionWithStyle) {
return;
}

const ranges = selectionWithStyle.map((value: ISelectionWithStyle) => {
return value.range;
});
this._selectionManagerService.selectionMoving$.subscribe(this._rangeSelector.bind(this))
);

this._rangeSelectorService.selectionChange(ranges);
})
this.disposeWithMe(
this._selectionManagerService.selectionMoveStart$.subscribe(this._rangeSelector.bind(this))
);
}

private _rangeSelector(selectionWithStyle: Nullable<ISelectionWithStyle[]>) {
if (!selectionWithStyle) {
return;
}

const { unitId, sheetId, sheetName } = this._getCurrentUnitIdAndSheetId();

const ranges = selectionWithStyle.map((value: ISelectionWithStyle) => {
return { range: value.range, unitId, sheetId, sheetName };
});

this._rangeSelectorService.selectionChange(ranges);
}

private _getCurrentUnitIdAndSheetId() {
const workbook = this._currentUniverService.getCurrentUniverSheetInstance();
const worksheet = workbook.getActiveSheet();
return {
unitId: workbook.getUnitId(),
sheetId: worksheet.getSheetId(),
sheetName: worksheet.getName(),
};
}

private _getSheetObject() {
return getSheetObject(this._currentUniverService, this._renderManagerService);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/editor/TextEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
const activeChange = debounce((state: boolean) => {
setActive(state);
onActive && onActive(state);
}, 10);
}, 30);

const focusStyleSubscription = editorService.focusStyle$.subscribe((unitId: Nullable<string>) => {
let state = false;
Expand All @@ -188,7 +188,7 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
onValid && onValid(isLegality);

onChange && onChange(editorService.getValue(id));
}, 10);
}, 30);

const valueChangeSubscription = editorService.valueChange$.subscribe((editor) => {
if (!editor.onlyInputFormula() && !editor.onlyInputRange()) {
Expand Down
31 changes: 24 additions & 7 deletions packages/ui/src/components/range-selector/RangeSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
* limitations under the License.
*/

import type { IRange, IUnitRange, Nullable } from '@univerjs/core';
import type { IUnitRange, Nullable } from '@univerjs/core';
import { IUniverInstanceService, LocaleService } from '@univerjs/core';
import { Button, Dialog, Input, Tooltip } from '@univerjs/design';
import { CloseSingle, DeleteSingle, SelectRangeSingle } from '@univerjs/icons';
import { useDependency } from '@wendellhu/redi/react-bindings';
import React, { useEffect, useRef, useState } from 'react';

import { deserializeRangeWithSheet, isReferenceString, serializeRange } from '@univerjs/engine-formula';
import { deserializeRangeWithSheet, isReferenceString, serializeRange, serializeRangeWithSheet, serializeRangeWithSpreadsheet } from '@univerjs/engine-formula';
import { TextEditor } from '../editor/TextEditor';
import { IEditorService } from '../../services/editor/editor.service';
import { IRangeSelectorService } from '../../services/range-selector/range-selector.service';
Expand Down Expand Up @@ -107,7 +107,11 @@ export function RangeSelector(props: IRangeSelectorProps) {
resizeObserver.observe(selector);

let prevRangesCount = 1;
const valueChangeSubscription = rangeSelectorService.selectionChange$.subscribe((ranges: IRange[]) => {
const valueChangeSubscription = rangeSelectorService.selectionChange$.subscribe((ranges) => {
if (rangeSelectorService.getCurrentSelectorId() !== id) {
return;
}

if (ranges.length === 0) {
prevRangesCount = 0;
return;
Expand All @@ -122,7 +126,17 @@ export function RangeSelector(props: IRangeSelectorProps) {
}

const lastRange = ranges[ranges.length - 1];
const rangeRef = serializeRange(lastRange);

let rangeRef: string = '';

if (lastRange.unitId === openForSheetUnitId && lastRange.sheetId === openForSheetSubUnitId) {
rangeRef = serializeRange(lastRange.range);
} else if (lastRange.unitId === openForSheetUnitId) {
rangeRef = serializeRangeWithSheet(lastRange.sheetName, lastRange.range);
} else {
rangeRef = serializeRangeWithSpreadsheet(lastRange.unitId, lastRange.sheetName, lastRange.range);
}

if (addItemCount >= 1 && !isSingleChoice) {
addNewItem(rangeRef);
setCurrentInputIndex(-1);
Expand Down Expand Up @@ -158,6 +172,8 @@ export function RangeSelector(props: IRangeSelectorProps) {
setRangeDataList(['']);
}

editorService.closeRangePrompt();

rangeSelectorService.setCurrentSelectorId(id);

setSelectorVisible(true);
Expand Down Expand Up @@ -198,21 +214,21 @@ export function RangeSelector(props: IRangeSelectorProps) {
}

function getSheetIdByName(name: string) {
return currentUniverService.getCurrentUniverSheetInstance().getSheetBySheetName(name) || '';
return currentUniverService.getCurrentUniverSheetInstance().getSheetBySheetName(name)?.getSheetId() || '';
}

function handleTextValueChange(value: Nullable<string>) {
setRangeValue(value || '');

const ranges = rangeValue.split(',').map((ref) => {
const ranges = value?.split(',').map((ref) => {
const unitRange = deserializeRangeWithSheet(ref);
return {
unitId: unitRange.unitId,
sheetId: getSheetIdByName(unitRange.sheetName),
range: unitRange.range,
} as IUnitRange;
});
onChange && onChange(ranges);
onChange && onChange(ranges || []);
}

let sClassName = styles.rangeSelector;
Expand Down Expand Up @@ -246,6 +262,7 @@ export function RangeSelector(props: IRangeSelectorProps) {
</footer>
)}
onClose={handleCloseModal}

>
<div className={styles.rangeSelectorModal}>
{rangeDataList.map((item, index) => (
Expand Down
23 changes: 21 additions & 2 deletions packages/ui/src/services/editor/editor.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,11 +304,16 @@ export interface IEditorService {

singleSelection$: Observable<boolean>;
singleSelection(state: boolean): void;

setFocusId(id: Nullable<string>): void;
getFocusId(): Nullable<string>;
}

export class EditorService extends Disposable implements IEditorService, IDisposable {
private _editors = new Map<string, Editor>();

private _focusEditorUnitId: Nullable<string>;

private readonly _state$ = new Subject<Nullable<IEditorStateParam>>();
readonly state$ = this._state$.asObservable();

Expand Down Expand Up @@ -354,6 +359,14 @@ export class EditorService extends Disposable implements IEditorService, IDispos
super();
}

setFocusId(id: Nullable<string>) {
this._focusEditorUnitId = id;
}

getFocusId() {
return this._focusEditorUnitId;
}

isEditor(editorUnitId: string) {
return this._editors.has(editorUnitId);
}
Expand Down Expand Up @@ -398,15 +411,19 @@ export class EditorService extends Disposable implements IEditorService, IDispos
}

this._focusStyle$.next(editorUnitId);
this.setFocusId(editorUnitId);
}

singleSelection(state: boolean) {
this._singleSelection$.next(state);
}

selectionChangingState() {
const documentDataModel = this._currentUniverService.getCurrentUniverDocInstance();
const editorUnitId = documentDataModel.getUnitId();
// const documentDataModel = this._currentUniverService.getCurrentUniverDocInstance();
const editorUnitId = this.getFocusId();
if (editorUnitId == null) {
return true;
}
const editor = this.getEditor(editorUnitId);

return !this.getSpreadsheetFocusState() || !editor || editor.isSheetEditor();
Expand All @@ -416,13 +433,15 @@ export class EditorService extends Disposable implements IEditorService, IDispos
if (!this._spreadsheetFocusState) {
this._closeRangePrompt$.next(null);
this.singleSelection(false);
this.setFocusId(null);
}

this.getAllEditor().forEach((editor) => {
editor.setFocus(false);
});

this._focusStyle$.next();

this._blur$.next(null);
}

Expand Down
14 changes: 9 additions & 5 deletions packages/ui/src/services/range-selector/range-selector.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,31 @@
* limitations under the License.
*/

import type { IRange, Nullable } from '@univerjs/core';
import type { IUnitRange, Nullable } from '@univerjs/core';
import { Disposable } from '@univerjs/core';
import type { IDisposable } from '@wendellhu/redi';
import { createIdentifier } from '@wendellhu/redi';
import type { Observable } from 'rxjs';
import { Subject } from 'rxjs';

export interface IRangeSelectorRange extends IUnitRange {
sheetName: string;
}

export interface IRangeSelectorService {
selectionChange$: Observable<IRange[]>;
selectionChange$: Observable<IRangeSelectorRange[]>;

setCurrentSelectorId(id: Nullable<string>): void;

getCurrentSelectorId(): Nullable<string>;

selectionChange(ranges: IRange[]): void;
selectionChange(ranges: IRangeSelectorRange[]): void;
}

export class RangeSelectorService extends Disposable implements IRangeSelectorService, IDisposable {
private _currentSelectorId: Nullable<string>;

private readonly _selectionChange$ = new Subject<IRange[]>();
private readonly _selectionChange$ = new Subject<IRangeSelectorRange[]>();

readonly selectionChange$ = this._selectionChange$.asObservable();

Expand All @@ -46,7 +50,7 @@ export class RangeSelectorService extends Disposable implements IRangeSelectorSe
return this._currentSelectorId;
}

selectionChange(range: IRange[]) {
selectionChange(range: IRangeSelectorRange[]) {
if (!this._currentSelectorId) {
return;
}
Expand Down

0 comments on commit eee2aab

Please sign in to comment.