Skip to content

Commit

Permalink
refactor(formula-editor): init (#3833)
Browse files Browse the repository at this point in the history 
Co-authored-by: zhangw <zhang9748@foxmail.com>
  • Loading branch information
@Gggpound @weird94
Gggpound and weird94 authored Oct 30, 2024
1 parent a437ad0 commit 063fd29
Show file tree
Hide file tree
Showing 55 changed files with 2,758 additions and 410 deletions.
5 changes: 5 additions & 0 deletions packages/docs-ui/src/controllers/render-controllers/doc-editor-bridge.controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,11 @@ export class DocEditorBridgeController extends Disposable implements IRenderModu
return;
}

// TODO:@ggg: Docs-ui should not rely on sheet-ui stuff, and the code needs to be removed after the editor is refactored.
if (unitId.includes('range_selector') || unitId.includes('embedding_formula_editor')) {
return;
}

this._editorService.blur();
})
);
Expand Down
75 changes: 70 additions & 5 deletions packages/docs-ui/src/services/editor/editor-manager.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import type { DocumentDataModel, IDisposable, IDocumentBody, IDocumentData, Null
import type { ISuccinctDocRangeParam, Scene } from '@univerjs/engine-render';
import type { Observable } from 'rxjs';
import type { IEditorConfigParams, IEditorStateParams } from './editor';
import { createIdentifier, DEFAULT_EMPTY_DOCUMENT_VALUE, Disposable, EDITOR_ACTIVATED, FOCUSING_EDITOR_INPUT_FORMULA, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, HorizontalAlign, ICommandService, IContextService, Inject, IUndoRedoService, IUniverInstanceService, toDisposable, UniverInstanceType, VerticalAlign } from '@univerjs/core';
import { createIdentifier, DEFAULT_EMPTY_DOCUMENT_VALUE, Disposable, EDITOR_ACTIVATED, FOCUSING_EDITOR_INPUT_FORMULA, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, HorizontalAlign, ICommandService, IContextService, Inject, isInternalEditorID, IUndoRedoService, IUniverInstanceService, toDisposable, UniverInstanceType, VerticalAlign } from '@univerjs/core';
import { DocSelectionManagerService } from '@univerjs/docs';
import { isReferenceStrings, LexerTreeBuilder, operatorToken } from '@univerjs/engine-formula';
import { IRenderManagerService } from '@univerjs/engine-render';
Expand Down Expand Up @@ -46,20 +46,35 @@ export interface IEditorInputFormulaParam {
formulaString: string;
}

/**
* @deprecated
*/
export interface IEditorService {
getEditor(id?: string): Readonly<Nullable<Editor>>;

register(config: IEditorConfigParams, container: HTMLDivElement): IDisposable;

/**
* @deprecated
*/
isVisible(id: string): Nullable<boolean>;

inputFormula$: Observable<IEditorInputFormulaParam>;

/**
* @deprecated
*/
setFormula(formulaString: string): void;

resize$: Observable<string>;
/**
* @deprecated
*/
resize(id: string): void;

/**
* @deprecated
*/
getAllEditor(): Map<string, Editor>;

/**
Expand All @@ -80,43 +95,91 @@ export interface IEditorService {
isSheetEditor(editorUnitId: string): boolean;

closeRangePrompt$: Observable<unknown>;
/**
* @deprecated
*/
closeRangePrompt(): void;

blur$: Observable<unknown>;
/**
* @deprecated
*/
blur(): void;

focus$: Observable<ISuccinctDocRangeParam>;
/**
* @deprecated
*/
focus(editorUnitId?: string): void;

setValue$: Observable<IEditorSetValueParam>;
valueChange$: Observable<Readonly<Editor>>;

/**
* @deprecated
*/
setValue(val: string, editorUnitId?: string): void;

/**
* @deprecated
*/
setValueNoRefresh(val: string, editorUnitId?: string): void;

/**
* @deprecated
*/
setRichValue(body: IDocumentBody, editorUnitId?: string): void;

/**
* @deprecated
*/
getFirstEditor(): Editor;

focusStyle$: Observable<Nullable<string>>;
/**
* @deprecated
*/
focusStyle(editorUnitId: Nullable<string>): void;

/**
* @deprecated
*/
refreshValueChange(editorId: string): void;

/**
* @deprecated
*/
checkValueLegality(editorId: string): boolean;

/**
* @deprecated
*/
getValue(id: string): Nullable<string>;

/**
* @deprecated
*/
getRichValue(id: string): Nullable<IDocumentBody>;

/**
* @deprecated
*/
changeSpreadsheetFocusState(state: boolean): void;

/**
* @deprecated
*/
getSpreadsheetFocusState(): boolean;

/**
* @deprecated
*/
selectionChangingState(): boolean;

singleSelection$: Observable<boolean>;
/**
* @deprecated
*/
singleSelection(state: boolean): void;

setFocusId(id: Nullable<string>): void;
Expand Down Expand Up @@ -273,9 +336,11 @@ export class EditorService extends Disposable implements IEditorService, IDispos
editor.setFocus(true);

this._contextService.setContextValue(EDITOR_ACTIVATED, true);
this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, true);

this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, editor.isSingle());
if (!isInternalEditorID(editorUnitId)) {
this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, true);
this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, editor.isSingle());
}

if (!this._spreadsheetFocusState) {
this.singleSelection(!!editor.isSingleChoice());
Expand Down Expand Up @@ -353,8 +418,8 @@ export class EditorService extends Disposable implements IEditorService, IDispos
this.focusStyle(editorUnitId);

this._focus$.next({
startOffset: valueCount - 2,
endOffset: valueCount - 2,
startOffset: valueCount,
endOffset: valueCount,
});
}

Expand Down
55 changes: 35 additions & 20 deletions packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/colorScale.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,24 @@
* limitations under the License.
*/

import { createInternalEditorID, IUniverInstanceService, LocaleService, UniverInstanceType, useDependency } from '@univerjs/core';
import { InputNumber, Select } from '@univerjs/design';
import { TextEditor } from '@univerjs/docs-ui';
import { CFRuleType, CFValueType, createDefaultValueByValueType, SHEET_CONDITIONAL_FORMATTING_PLUGIN } from '@univerjs/sheets-conditional-formatting';
import React, { useEffect, useMemo, useState } from 'react';
import type { Workbook } from '@univerjs/core';
import type { IColorScale, IConditionalFormattingRuleConfig } from '@univerjs/sheets-conditional-formatting';
import type { IStyleEditorProps } from './type';

import { IUniverInstanceService, LocaleService, UniverInstanceType, useDependency } from '@univerjs/core';
import { InputNumber, Select } from '@univerjs/design';
import { CFRuleType, CFValueType, createDefaultValueByValueType } from '@univerjs/sheets-conditional-formatting';
import { FormulaEditor } from '@univerjs/sheets-formula-ui';
import { useSidebarClick } from '@univerjs/ui';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { ColorPicker } from '../../color-picker';
import { Preview } from '../../preview';
import stylesBase from '../index.module.less';
import styles from './index.module.less';
import type { IStyleEditorProps } from './type';

const createOptionItem = (text: string, localeService: LocaleService) => ({ label: localeService.t(`sheet.cf.valueType.${text}`), value: text });

const TextInput = (props: { id: string; type: CFValueType | 'none';value: number | string;onChange: (v: number | string) => void; className: string }) => {
const TextInput = (props: { id: string; type: CFValueType | 'none'; value: number | string; onChange: (v: number | string) => void; className: string }) => {
const { type, className, onChange, id, value } = props;
const univerInstanceService = useDependency(IUniverInstanceService);
const unitId = univerInstanceService.getCurrentUnitForType<Workbook>(UniverInstanceType.UNIVER_SHEET)!.getUnitId();
Expand All @@ -50,21 +52,31 @@ const TextInput = (props: { id: string; type: CFValueType | 'none';value: number
min: Number.MIN_SAFE_INTEGER, max: Number.MAX_SAFE_INTEGER,
};
}, [type]);

const formulaEditorActionsRef = useRef<Parameters<typeof FormulaEditor>[0]['actions']>({});
const [isFocusFormulaEditor, isFocusFormulaEditorSet] = useState(false);

useSidebarClick((e: MouseEvent) => {
const handleOutClick = formulaEditorActionsRef.current?.handleOutClick;
handleOutClick && handleOutClick(e, () => isFocusFormulaEditorSet(false));
});

if (type === CFValueType.formula) {
return (
<TextEditor
openForSheetSubUnitId={subUnitId}
openForSheetUnitId={unitId}
id={createInternalEditorID(`${SHEET_CONDITIONAL_FORMATTING_PLUGIN}_colo_scale_${id}`)}
value={formulaInitValue}
style={{ maxWidth: '50%', marginLeft: 4 }}
canvasStyle={{ fontSize: 10 }}
onlyInputFormula={true}
onChange={(v = '') => {
const formula = v || '';
onChange(formula);
}}
/>
<div style={{ width: '100%', marginLeft: 4 }}>
<FormulaEditor
initValue={formulaInitValue as any}
unitId={unitId}
subUnitId={subUnitId}
isFocus={isFocusFormulaEditor}
onChange={(v = '') => {
const formula = v || '';
onChange(formula);
}}
onFocus={() => isFocusFormulaEditorSet(true)}
actions={formulaEditorActionsRef.current}
/>
</div>
);
} else {
return <InputNumber className={className} value={Number(props.value) || 0} onChange={(v) => props.onChange(v || 0)} {...config} />;
Expand Down Expand Up @@ -217,6 +229,7 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => {
<div className={stylesBase.label}>{localeService.t('sheet.cf.valueType.min')}</div>
<div className={`${stylesBase.labelContainer} ${stylesBase.mTSm}`}>
<Select
style={{ flexShrink: 0 }}
options={minOptions}
value={minType}
onChange={(v) => {
Expand Down Expand Up @@ -248,6 +261,7 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => {
<div className={stylesBase.label}>{localeService.t('sheet.cf.panel.medianValue')}</div>
<div className={`${stylesBase.labelContainer} ${stylesBase.mTSm}`}>
<Select
style={{ flexShrink: 0 }}
options={medianOptions}
value={medianType}
onChange={(v) => {
Expand Down Expand Up @@ -283,6 +297,7 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => {
<div className={stylesBase.label}>{localeService.t('sheet.cf.valueType.max')}</div>
<div className={`${stylesBase.labelContainer} ${stylesBase.mTSm}`}>
<Select
style={{ flexShrink: 0 }}
options={maxOptions}
value={maxType}
onChange={(v) => {
Expand Down
52 changes: 33 additions & 19 deletions packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/dataBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,20 @@
* limitations under the License.
*/

import { createInternalEditorID, IUniverInstanceService, LocaleService, UniverInstanceType, useDependency } from '@univerjs/core';
import { Checkbox, InputNumber, Radio, RadioGroup, Select } from '@univerjs/design';
import { TextEditor } from '@univerjs/docs-ui';
import { CFRuleType, CFValueType, createDefaultValueByValueType, defaultDataBarNativeColor, defaultDataBarPositiveColor, SHEET_CONDITIONAL_FORMATTING_PLUGIN } from '@univerjs/sheets-conditional-formatting';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import type { Workbook } from '@univerjs/core';
import type { IConditionalFormattingRuleConfig, IValueConfig } from '@univerjs/sheets-conditional-formatting';
import type { IStyleEditorProps } from './type';
import { IUniverInstanceService, LocaleService, UniverInstanceType, useDependency } from '@univerjs/core';
import { Checkbox, InputNumber, Radio, RadioGroup, Select } from '@univerjs/design';

import { CFRuleType, CFValueType, createDefaultValueByValueType, defaultDataBarNativeColor, defaultDataBarPositiveColor } from '@univerjs/sheets-conditional-formatting';
import { FormulaEditor } from '@univerjs/sheets-formula-ui';
import { useSidebarClick } from '@univerjs/ui';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { ColorPicker } from '../../color-picker';
import { Preview } from '../../preview';
import stylesBase from '../index.module.less';
import styles from './index.module.less';
import type { IStyleEditorProps } from './type';

const createOptionItem = (text: CFValueType, localeService: LocaleService) => ({ label: localeService.t(`sheet.cf.valueType.${text}`), value: text });

Expand All @@ -34,6 +36,15 @@ const InputText = (props: { disabled?: boolean; id: string; className: string; t
const univerInstanceService = useDependency(IUniverInstanceService);
const unitId = univerInstanceService.getCurrentUnitForType<Workbook>(UniverInstanceType.UNIVER_SHEET)!.getUnitId();
const subUnitId = univerInstanceService.getCurrentUnitForType<Workbook>(UniverInstanceType.UNIVER_SHEET)!.getActiveSheet()?.getSheetId();

const formulaEditorActionsRef = useRef<Parameters<typeof FormulaEditor>[0]['actions']>({});
const [isFocusFormulaEditor, isFocusFormulaEditorSet] = useState(false);

useSidebarClick((e: MouseEvent) => {
const handleOutClick = formulaEditorActionsRef.current?.handleOutClick;
handleOutClick && handleOutClick(e, () => isFocusFormulaEditorSet(false));
});

const _value = useRef(value);
const config = useMemo(() => {
if ([CFValueType.percentile, CFValueType.percent].includes(type)) {
Expand All @@ -49,19 +60,20 @@ const InputText = (props: { disabled?: boolean; id: string; className: string; t
if (type === CFValueType.formula) {
const v = String(_value.current).startsWith('=') ? String(_value.current) || '' : '=';
return (
<TextEditor
id={createInternalEditorID(`${SHEET_CONDITIONAL_FORMATTING_PLUGIN}_data_bar_${id}`)}
value={v}
openForSheetSubUnitId={subUnitId}
openForSheetUnitId={unitId}
style={{ width: '47%', marginLeft: 14 }}
canvasStyle={{ fontSize: 10 }}
onlyInputFormula={true}
onChange={(v = '') => {
const formula = v || '';
onChange(formula);
}}
/>
<div style={{ width: '100%', marginLeft: 12 }}>
<FormulaEditor
initValue={v as any}
unitId={unitId}
subUnitId={subUnitId}
isFocus={isFocusFormulaEditor}
onChange={(v = '') => {
const formula = v || '';
onChange(formula);
}}
onFocus={() => isFocusFormulaEditorSet(true)}
actions={formulaEditorActionsRef.current}
/>
</div>
);
}
return (
Expand Down Expand Up @@ -273,6 +285,7 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
<div className={stylesBase.label}>{localeService.t('sheet.cf.valueType.min')}</div>
<div className={`${stylesBase.mTSm} ${stylesBase.labelContainer}`}>
<Select
style={{ width: '50%', flexShrink: 0 }}
options={minOptions}
value={minValueType}
onChange={(v) => {
Expand All @@ -298,6 +311,7 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
<div className={stylesBase.label}>{localeService.t('sheet.cf.valueType.max')}</div>
<div className={`${stylesBase.mTSm} ${stylesBase.labelContainer}`}>
<Select
style={{ width: '50%', flexShrink: 0 }}
options={maxOptions}
value={maxValueType}
onChange={(v) => {
Expand Down
Loading

0 comments on commit 063fd29

Please sign in to comment.