refactor(database): avoid modifying all views when editing a single view

packages/affine/data-view/src/core/component/tags/multi-tag-select.ts

@@ -308,7 +308,7 @@ export class MultiTagSelect extends SignalWatcher(
         <input
           class="tag-select-input"
           placeholder="Type here..."
-          .value="${this.text}"
+          .value="${this.text.value}"
           @input="${this._onInput}"
           @keydown="${this._onInputKeydown}"
           @pointerdown="${stopPropagation}"
@@ -358,7 +358,7 @@ export class MultiTagSelect extends SignalWatcher(
             };
             return html`
               <div
-                ${!select.isCreate && sortable(select.id)}
+                ${select.isCreate ? nothing : sortable(select.id)}
                 class="${classes}"
                 @mouseenter="${mouseenter}"
                 @click="${select.select}"

packages/affine/data-view/src/core/data-source/base.ts

@@ -1,4 +1,7 @@
-import type { InsertToPosition } from '@blocksuite/affine-shared/utils';
+import type {
+  InsertToPosition,
+  NewInsertPosition,
+} from '@blocksuite/affine-shared/utils';
 
 import { computed, type ReadonlySignal } from '@preact/signals-core';
 
@@ -69,7 +72,7 @@ export interface DataSource {
   viewDataAdd(viewData: DataViewDataType): string;
   viewDataDuplicate(id: string): string;
   viewDataDelete(viewId: string): void;
-  viewDataMoveTo(id: string, position: InsertToPosition): void;
+  viewDataMoveTo(id: string, position: NewInsertPosition): void;
   viewDataUpdate<ViewData extends DataViewDataType>(
     id: string,
     updater: (data: ViewData) => Partial<ViewData>
@@ -206,7 +209,7 @@ export abstract class DataSourceBase implements DataSource {
     return computed(() => this.viewDataGet(viewId));
   }
 
-  abstract viewDataMoveTo(id: string, position: InsertToPosition): void;
+  abstract viewDataMoveTo(id: string, position: NewInsertPosition): void;
 
   abstract viewDataUpdate<ViewData extends DataViewDataType>(
     id: string,

packages/affine/data-view/src/core/group-by/setting.ts

@@ -251,7 +251,7 @@ export const popSelectGroupByProperty = (
 };
 export const popGroupSetting = (
   target: PopupTarget,
-  view: SingleView<TableViewData | KanbanViewData>,
+  view: TableSingleView | KanbanSingleView,
   onBack: () => void
 ) => {
   const groupBy = view.data$.value?.groupBy;

packages/affine/data-view/src/core/view-manager/view-manager.ts

@@ -1,4 +1,4 @@
-import type { InsertToPosition } from '@blocksuite/affine-shared/utils';
+import type { NewInsertPosition } from '@blocksuite/affine-shared/utils';
 
 import { nanoid } from '@blocksuite/store';
 import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
@@ -33,7 +33,7 @@ export interface ViewManager {
 
   viewDataGet(id: string): DataViewDataType | undefined;
 
-  moveTo(id: string, position: InsertToPosition): void;
+  moveTo(id: string, position: NewInsertPosition): void;
 
   viewChangeType(id: string, type: string): void;
 }
@@ -63,7 +63,7 @@ export class ViewManagerBase implements ViewManager {
 
   constructor(public dataSource: DataSource) {}
 
-  moveTo(id: string, position: InsertToPosition): void {
+  moveTo(id: string, position: NewInsertPosition): void {
     this.dataSource.viewDataMoveTo(id, position);
   }
 

packages/affine/data-view/src/property-presets/multi-select/define.ts

@@ -34,31 +34,35 @@ export const multiSelectPropertyModelConfig =
     },
     cellToString: ({ value, data }) =>
       value?.map(id => data.options.find(v => v.id === id)?.value).join(','),
-    cellFromString: ({ value: oldValue, data }) => {
-      const optionMap = Object.fromEntries(data.options.map(v => [v.value, v]));
-      const optionNames = oldValue
+    cellFromString: ({ value: stringValue, data }) => {
+      const optionMap = new Map(data.options.map(v => [v.value, v]));
+      const optionNames = stringValue
         .split(',')
         .map(v => v.trim())
         .filter(v => v);
 
       const value: string[] = [];
       optionNames.forEach(name => {
-        if (!optionMap[name]) {
+        const option = optionMap.get(name);
+        if (!option) {
           const newOption: SelectTag = {
             id: nanoid(),
             value: name,
             color: getTagColor(),
           };
-          data.options.push(newOption);
+          optionMap.set(name, newOption);
           value.push(newOption.id);
         } else {
-          value.push(optionMap[name].id);
+          value.push(option.id);
         }
       });
 
       return {
         value,
-        data: data,
+        data: {
+          ...data,
+          options: Array.from(optionMap.values()),
+        },
       };
     },
     cellToJson: ({ value }) => value ?? null,

packages/affine/data-view/src/property-presets/select/define.ts

@@ -28,33 +28,36 @@ export const selectPropertyModelConfig = selectPropertyType.modelConfig<
   },
   cellToString: ({ value, data }) =>
     data.options.find(v => v.id === value)?.value ?? '',
-  cellFromString: ({ value: oldValue, data }) => {
-    if (!oldValue) {
+  cellFromString: ({ value: stringValue, data }) => {
+    if (!stringValue) {
       return { value: null, data: data };
     }
-    const optionMap = Object.fromEntries(data.options.map(v => [v.value, v]));
-    const name = oldValue
+    const optionMap = new Map(data.options.map(v => [v.value, v]));
+    const name = stringValue
       .split(',')
       .map(v => v.trim())
       .filter(v => v)[0];
 
     let value: string | undefined;
-    const option = optionMap[name];
+    const option = optionMap.get(name);
     if (!option) {
       const newOption: SelectTag = {
         id: nanoid(),
         value: name,
         color: getTagColor(),
       };
-      data.options.push(newOption);
+      optionMap.set(name, newOption);
       value = newOption.id;
     } else {
       value = option.id;
     }
 
     return {
       value,
-      data: data,
+      data: {
+        ...data,
+        options: Array.from(optionMap.values()),
+      },
     };
   },
   cellToJson: ({ value }) => value ?? null,

packages/affine/data-view/src/widget-presets/views-bar/views-view.ts

@@ -172,23 +172,25 @@ export class DataViewHeaderViews extends WidgetBase {
             hide: () => index === 0,
             prefix: MoveLeftIcon(),
             select: () => {
-              const targetId = views[index - 1];
-              this.viewManager.moveTo(
-                id,
-                targetId ? { before: true, id: targetId } : 'start'
-              );
+              const prev = views[index - 2];
+              const next = views[index - 1];
+              this.viewManager.moveTo(id, {
+                prevId: prev,
+                nextId: next,
+              });
             },
           }),
           menu.action({
             name: 'Move Right',
             prefix: MoveRightIcon(),
             hide: () => index === views.length - 1,
             select: () => {
-              const targetId = views[index + 1];
-              this.viewManager.moveTo(
-                id,
-                targetId ? { before: false, id: targetId } : 'end'
-              );
+              const prev = views[index + 1];
+              const next = views[index + 2];
+              this.viewManager.moveTo(id, {
+                prevId: prev,
+                nextId: next,
+              });
             },
           }),
           menu.group({

packages/affine/model/src/blocks/database/types.ts

@@ -16,6 +16,7 @@ export type Cell<ValueType = unknown> = {
 export type SerializedCells = Record<string, Record<string, Cell>>;
 export type ViewBasicDataType = {
   id: string;
+  index?: string;
   name: string;
   mode: string;
 };

packages/affine/shared/package.json

@@ -28,6 +28,7 @@
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
     "@toeverything/theme": "^1.0.15",
+    "fractional-indexing": "^3.2.0",
     "lit": "^3.2.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.mergewith": "^4.6.2",

packages/affine/shared/src/utils/insert.ts

@@ -1,3 +1,5 @@
+import { generateKeyBetween } from 'fractional-indexing';
+
 export type InsertToPosition =
   | 'end'
   | 'start'
@@ -34,6 +36,41 @@ export function insertPositionToIndex<T>(
   }
   return arr.findIndex(v => key(v) === position) + 1;
 }
+
+export type NewInsertPosition = {
+  prevId?: string;
+  nextId?: string;
+};
+
+export const numIndexToStrIndex = (index: number) => {
+  return `V${index.toString(10).padStart(6, '0')}`;
+};
+
+export const getIndexMap = <
+  T extends {
+    id: string;
+    index?: string;
+  },
+>(
+  arr: T[]
+): Map<string, string> => {
+  const map = new Map<string, string>();
+  arr.forEach((v, i) => {
+    map.set(v.id, v.index ?? numIndexToStrIndex(i));
+  });
+  return map;
+};
+
+export const genIndexByPosition = (
+  position: NewInsertPosition,
+  indexMap: Map<string, string>
+) => {
+  return generateKeyBetween(
+    position.prevId ? indexMap.get(position.prevId) : null,
+    position.nextId ? indexMap.get(position.nextId) : null
+  );
+};
+
 export const arrayMove = <T>(
   arr: T[],
   from: (t: T) => boolean,

packages/blocks/package.json

@@ -47,6 +47,7 @@
     "file-type": "^19.5.0",
     "fractional-indexing": "^3.2.0",
     "html2canvas": "^1.4.1",
+    "immer": "^10.1.1",
     "katex": "^0.16.11",
     "lit": "^3.2.0",
     "mdast-util-gfm-autolink-literal": "^2.0.1",

packages/blocks/src/__tests__/database/database.unit.spec.ts

@@ -15,13 +15,15 @@ import { beforeEach, describe, expect, test } from 'vitest';
 
 import { databaseBlockColumns } from '../../database-block/index.js';
 import {
-  addProperty,
-  copyCellsByProperty,
-  deleteColumn,
+  duplicateCellsByProperty,
   getCell,
-  getProperty,
   updateCell,
-} from '../../database-block/utils/block-utils.js';
+} from '../../database-block/utils/cell-utils.js';
+import {
+  addProperty,
+  deleteProperty,
+  getProperty,
+} from '../../database-block/utils/property-utils.js';
 
 const AffineSchemas = [
   RootBlockSchema,
@@ -163,7 +165,7 @@ describe('DatabaseManager', () => {
     addProperty(db, 'end', column);
     expect(getProperty(db, column.id)).toEqual(column);
 
-    deleteColumn(db, column.id);
+    deleteProperty(db, column.id);
     expect(getProperty(db, column.id)).toBeUndefined();
   });
 
@@ -225,7 +227,7 @@ describe('DatabaseManager', () => {
       })
     );
 
-    copyCellsByProperty(db, col2, newColId);
+    duplicateCellsByProperty(db, col2, newColId);
 
     const cell = getCell(db, p2, newColId);
     expect(cell).toEqual({