Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-25 22:38:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): remove edit view of database block properties (#10748)

Browse Source
This commit is contained in:
zzj3720
2025-03-10 16:24:44 +00:00
parent 4a45cc9ba4
commit db707dff7f
49 changed files with 1387 additions and 1782 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/data-view/src/view-presets/kanban/mobile/cell.ts
+16 -15
View File
@@ -5,7 +5,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
import { computed, effect, signal } from '@preact/signals-core';
import { css } from 'lit';
import { property, state } from 'lit/decorators.js';
import { property } from 'lit/decorators.js';
import { html } from 'lit/static-html.js';
import type {
@@ -52,7 +52,7 @@ export class MobileKanbanCell extends SignalWatcher(
private readonly _cell = signal<DataViewCellLifeCycle>();
isEditing$ = computed(() => {
isSelectionEditing$ = computed(() => {
const selection = this.kanban?.props.selection$.value;
if (selection?.selectionType !== 'cell') {
return false;
@@ -108,19 +108,21 @@ export class MobileKanbanCell extends SignalWatcher(
if (this.column.readonly$.value) return;
this.disposables.add(
effect(() => {
const isEditing = this.isEditing$.value;
const isEditing = this.isSelectionEditing$.value;
if (isEditing) {
this.isEditing = true;
this._cell.value?.onEnterEditMode();
this.isEditing$.value = true;
requestAnimationFrame(() => {
this._cell.value?.afterEnterEditingMode();
});
} else {
this._cell.value?.onExitEditMode();
this.isEditing = false;
this._cell.value?.beforeExitEditingMode();
this.isEditing$.value = false;
}
})
);
this._disposables.addFromEvent(this, 'click', e => {
e.stopPropagation();
if (!this.isEditing) {
if (!this.isEditing$.value) {
this.selectCurrentCell(!this.column.readonly$.value);
}
});
@@ -129,16 +131,16 @@ export class MobileKanbanCell extends SignalWatcher(
override render() {
const props: CellRenderProps = {
cell: this.column.cellGet(this.cardId),
isEditing: this.isEditing,
isEditing$: this.isEditing$,
selectCurrentCell: this.selectCurrentCell,
};
const renderer = this.column.renderer$.value;
if (!renderer) return;
const { view, edit } = renderer;
this.view.lockRows(this.isEditing);
this.dataset['editing'] = `${this.isEditing}`;
const { view } = renderer;
this.view.lockRows(this.isEditing$.value);
this.dataset['editing'] = `${this.isEditing$.value}`;
return html` ${this.renderIcon()}
${renderUniLit(this.isEditing && edit ? edit : view, props, {
${renderUniLit(view, props, {
ref: this._cell,
class: 'mobile-kanban-cell',
style: { display: 'block', flex: '1', overflow: 'hidden' },
@@ -167,8 +169,7 @@ export class MobileKanbanCell extends SignalWatcher(
@property({ attribute: false })
accessor groupKey!: string;
@state()
accessor isEditing = false;
isEditing$ = signal(false);
@property({ attribute: false })
accessor view!: KanbanSingleView;
blocksuite/affine/data-view/src/view-presets/kanban/pc/cell.ts
+8 -9
View File
@@ -109,7 +109,7 @@ export class KanbanCell extends SignalWatcher(
if (!selectionElement) return;
if (e.shiftKey) return;
if (!this.editing) {
if (!this.isEditing$.value) {
this.selectCurrentCell(!this.column.readonly$.value);
}
});
@@ -130,22 +130,22 @@ export class KanbanCell extends SignalWatcher(
override render() {
const props: CellRenderProps = {
cell: this.column.cellGet(this.cardId),
isEditing: this.editing,
isEditing$: this.isEditing$,
selectCurrentCell: this.selectCurrentCell,
};
const renderer = this.column.renderer$.value;
if (!renderer) return;
const { view, edit } = renderer;
this.view.lockRows(this.editing);
this.dataset['editing'] = `${this.editing}`;
const { view } = renderer;
this.view.lockRows(this.isEditing$.value);
this.dataset['editing'] = `${this.isEditing$.value}`;
this.style.border = this.isFocus
? '1px solid var(--affine-primary-color)'
: '';
this.style.boxShadow = this.editing
this.style.boxShadow = this.isEditing$.value
? '0px 0px 0px 2px rgba(30, 150, 235, 0.30)'
: '';
return html` ${this.renderIcon()}
${renderUniLit(this.editing && edit ? edit : view, props, {
${renderUniLit(view, props, {
ref: this._cell,
class: 'kanban-cell',
style: { display: 'block', flex: '1', overflow: 'hidden' },
@@ -168,8 +168,7 @@ export class KanbanCell extends SignalWatcher(
@property({ attribute: false })
accessor contentOnly = false;
@state()
accessor editing = false;
isEditing$ = signal(false);
@property({ attribute: false })
accessor groupKey!: string;
blocksuite/affine/data-view/src/view-presets/kanban/pc/controller/drag.ts
+1 -1
View File
@@ -153,7 +153,7 @@ export class KanbanDragController implements ReactiveController {
const target = event.target;
if (target instanceof Element) {
const cell = target.closest('affine-data-view-kanban-cell');
if (cell?.editing) {
if (cell?.isEditing$.value) {
return;
}
cell?.selectCurrentCell(false);
blocksuite/affine/data-view/src/view-presets/kanban/pc/controller/selection.ts
+6 -6
View File
@@ -96,13 +96,11 @@ export class KanbanSelectionController implements ReactiveController {
const cell = container?.cell;
if (selection.isEditing) {
requestAnimationFrame(() => {
cell?.onExitEditMode();
});
cell?.beforeExitEditingMode();
if (cell?.blurCell()) {
container.blur();
}
container.editing = false;
container.isEditing$.value = false;
} else {
container.blur();
}
@@ -142,11 +140,13 @@ export class KanbanSelectionController implements ReactiveController {
container.isFocus = true;
const cell = container?.cell;
if (selection.isEditing) {
cell?.onEnterEditMode();
if (cell?.focusCell()) {
container.focus();
}
container.editing = true;
container.isEditing$.value = true;
requestAnimationFrame(() => {
cell?.afterEnterEditingMode();
});
} else {
container.focus();
}
blocksuite/affine/data-view/src/view-presets/table/mobile/cell.ts
+17 -20
View File
@@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
import { computed, effect, signal } from '@preact/signals-core';
import { css } from 'lit';
import { property, state } from 'lit/decorators.js';
import { property } from 'lit/decorators.js';
import {
type CellRenderProps,
@@ -47,7 +47,7 @@ export class MobileTableCell extends SignalWatcher(
return this.column.cellGet(this.rowId);
});
isEditing$ = computed(() => {
isSelectionEditing$ = computed(() => {
const selection = this.table?.props.selection$.value;
if (selection?.selectionType !== 'area') {
return false;
@@ -97,10 +97,6 @@ export class MobileTableCell extends SignalWatcher(
return this.closest('mobile-table-group')?.group?.key;
}
private get readonly() {
return this.column.readonly$.value;
}
private get table() {
return this.closest('mobile-data-view-table');
}
@@ -110,18 +106,21 @@ export class MobileTableCell extends SignalWatcher(
if (this.column.readonly$.value) return;
this.disposables.add(
effect(() => {
const isEditing = this.isEditing$.value;
const isEditing = this.isSelectionEditing$.value;
if (isEditing) {
this.isEditing = true;
this._cell.value?.onEnterEditMode();
this.isEditing$.value = true;
const cell = this._cell.value;
requestAnimationFrame(() => {
cell?.afterEnterEditingMode();
});
} else {
this._cell.value?.onExitEditMode();
this.isEditing = false;
this._cell.value?.beforeExitEditingMode();
this.isEditing$.value = false;
}
})
);
this.disposables.addFromEvent(this, 'click', () => {
if (!this.isEditing) {
if (!this.isEditing$.value) {
this.selectCurrentCell(!this.column.readonly$.value);
}
});
@@ -132,17 +131,16 @@ export class MobileTableCell extends SignalWatcher(
if (!renderer) {
return;
}
const { edit, view } = renderer;
const uni = !this.readonly && this.isEditing && edit != null ? edit : view;
this.view.lockRows(this.isEditing);
this.dataset['editing'] = `${this.isEditing}`;
const { view } = renderer;
this.view.lockRows(this.isEditing$.value);
this.dataset['editing'] = `${this.isEditing$.value}`;
const props: CellRenderProps = {
cell: this.cell$.value,
isEditing: this.isEditing,
isEditing$: this.isEditing$,
selectCurrentCell: this.selectCurrentCell,
};
return renderUniLit(uni, props, {
return renderUniLit(view, props, {
ref: this._cell,
style: {
display: 'contents',
@@ -156,8 +154,7 @@ export class MobileTableCell extends SignalWatcher(
@property({ attribute: false })
accessor columnIndex!: number;
@state()
accessor isEditing = false;
isEditing$ = signal(false);
@property({ attribute: false })
accessor rowIndex!: number;
blocksuite/affine/data-view/src/view-presets/table/pc/cell.ts
+8 -14
View File
@@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
import { computed, signal } from '@preact/signals-core';
import { css } from 'lit';
import { property, state } from 'lit/decorators.js';
import { property } from 'lit/decorators.js';
import { renderUniLit } from '../../../core/index.js';
import type {
@@ -88,10 +88,6 @@ export class DatabaseCellContainer extends SignalWatcher(
return this.closest<TableGroup>('affine-data-view-table-group')?.group?.key;
}
private get readonly() {
return this.column.readonly$.value;
}
private get selectionView() {
return this.closest('affine-database-table')?.selectionController;
}
@@ -104,7 +100,7 @@ export class DatabaseCellContainer extends SignalWatcher(
override connectedCallback() {
super.connectedCallback();
this._disposables.addFromEvent(this, 'click', () => {
if (!this.isEditing) {
if (!this.isEditing$.value) {
this.selectCurrentCell(!this.column.readonly$.value);
}
});
@@ -128,17 +124,16 @@ export class DatabaseCellContainer extends SignalWatcher(
if (!renderer) {
return;
}
const { edit, view } = renderer;
const uni = !this.readonly && this.isEditing && edit != null ? edit : view;
this.view.lockRows(this.isEditing);
this.dataset['editing'] = `${this.isEditing}`;
const { view } = renderer;
this.view.lockRows(this.isEditing$.value);
this.dataset['editing'] = `${this.isEditing$.value}`;
const props: CellRenderProps = {
cell: this.cell$.value,
isEditing: this.isEditing,
isEditing$: this.isEditing$,
selectCurrentCell: this.selectCurrentCell,
};
return renderUniLit(uni, props, {
return renderUniLit(view, props, {
ref: this._cell,
style: {
display: 'contents',
@@ -152,8 +147,7 @@ export class DatabaseCellContainer extends SignalWatcher(
@property({ attribute: false })
accessor columnIndex!: number;
@state()
accessor isEditing = false;
isEditing$ = signal(false);
@property({ attribute: false })
accessor rowIndex!: number;
blocksuite/affine/data-view/src/view-presets/table/pc/controller/selection.ts
+7 -7
View File
@@ -192,11 +192,9 @@ export class TableSelectionController implements ReactiveController {
if (container) {
const cell = container.cell;
if (old.isEditing) {
requestAnimationFrame(() => {
cell?.onExitEditMode();
});
cell?.beforeExitEditingMode();
cell?.blurCell();
container.isEditing = false;
container.isEditing$.value = false;
}
}
}
@@ -211,9 +209,11 @@ export class TableSelectionController implements ReactiveController {
if (container) {
const cell = container.cell;
if (newSelection.isEditing) {
cell?.onEnterEditMode();
container.isEditing = true;
cell?.focusCell();
container.isEditing$.value = true;
requestAnimationFrame(() => {
cell?.afterEnterEditingMode();
cell?.focusCell();
});
}
}
}