refactor(edgeless): surface elements api (#5874)

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

@@ -4,7 +4,7 @@ import '../../database-block/table/define.js';
 
 import type { BlockModel, Page } from '@blocksuite/store';
 import { Generator, Schema, Workspace } from '@blocksuite/store';
-import { beforeEach, describe, expect, test } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { numberPureColumnConfig } from '../../database-block/common/columns/number/define.js';
 import { richTextPureColumnConfig } from '../../database-block/common/columns/rich-text/define.js';
@@ -58,6 +58,8 @@ describe('DatabaseManager', () => {
  ];
 
  beforeEach(async () => {
+ vi.useFakeTimers({ toFake: ['requestIdleCallback'] });
+
  page = await createTestPage();
 
  pageBlockId = page.addBlock('affine:page', {

packages/blocks/src/_common/edgeless/mixin/edgeless-selectable.ts

@@ -1,6 +1,7 @@
 import type { Constructor } from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
 
+import type { SurfaceBlockModel } from '../../../models.js';
 import { BLOCK_BATCH } from '../../../surface-block/batch.js';
 import {
  Bound,
@@ -97,6 +98,14 @@ export function selectable<
  )
  );
  }
+
+ get group() {
+ const surfaceModel = this.page.getBlockByFlavour(
+ 'affine:surface'
+ ) as SurfaceBlockModel[];
+
+ return surfaceModel[0]?.getGroup(this.id) ?? null;
+ }
  }
 
  return DerivedSelectableInEdgelessClass as Constructor<

packages/blocks/src/index.ts

@@ -78,12 +78,16 @@ export * from './paragraph-block/index.js';
 export {
  Bound,
  type BrushElement,
+ BrushElementModel,
  CanvasElementType,
  type ConnectorElement,
+ ConnectorElementModel,
  ConnectorEndpointStyle,
  ConnectorMode,
  generateKeyBetween,
+ GroupElementModel,
  type ShapeElement,
+ ShapeElementModel,
  ShapeStyle,
  StrokeStyle,
  type TextElement,

packages/blocks/src/page-block/edgeless/components/block-portal/note/edgeless-note.ts

@@ -71,8 +71,8 @@ export class EdgelessNoteMask extends WithDisposable(ShadowlessElement) {
 
  override render() {
  const selected =
- this.edgeless.selectionManager.has(this.model.id) &&
- this.edgeless.selectionManager.selections.some(
+ this.edgeless?.selectionManager.has(this.model.id) &&
+ this.edgeless?.selectionManager.selections.some(
  sel => sel.elements.includes(this.model.id) && sel.editing
  );
 

packages/blocks/src/surface-block/element-model/base.ts

@@ -0,0 +1,135 @@
+import { type Y } from '@blocksuite/store';
+
+import type { SurfaceBlockModel } from '../surface-model.js';
+import { Bound } from '../utils/bound.js';
+import { getBoundsWithRotation } from '../utils/math-utils.js';
+import { deserializeXYWH, type SerializedXYWH } from '../utils/xywh.js';
+import { local, updateDerivedProp, yfield } from './decorators.js';
+
+export type BaseProps = {
+ index: string;
+};
+
+export abstract class ElementModel<Props extends BaseProps = BaseProps> {
+ static propsToY(props: Record<string, unknown>) {
+ return props;
+ }
+
+ /**
+ * When the ymap is not connected to the doc, the value cannot be accessed.
+ * But sometimes we need to access the value when creating the element model, those temporary values are stored here.
+ */
+ protected _preserved: Map<string, unknown> = new Map();
+ protected _stashed: Map<keyof Props, unknown>;
+ protected _local: Map<string | symbol, unknown> = new Map();
+ protected _onChange: (props: Record<string, { oldValue: unknown }>) => void;
+
+ yMap: Y.Map<unknown>;
+ surfaceModel!: SurfaceBlockModel;
+
+ abstract rotate: number;
+
+ abstract xywh: SerializedXYWH;
+
+ abstract get type(): string;
+
+ @yfield()
+ index!: string;
+
+ @local()
+ display: boolean = true;
+
+ @local()
+ opacity: number = 1;
+
+ constructor(options: {
+ yMap: Y.Map<unknown>;
+ model: SurfaceBlockModel;
+ stashedStore: Map<unknown, unknown>;
+ onChange: (props: Record<string, { oldValue: unknown }>) => void;
+ }) {
+ const { yMap, model, stashedStore, onChange } = options;
+
+ this.yMap = yMap;
+ this.surfaceModel = model;
+ this._stashed = stashedStore as Map<keyof Props, unknown>;
+ this._onChange = onChange;
+
+ // base class property field is assigned before yMap is set
+ // so we need to manually assign the default value here
+ this.index = 'a0';
+ }
+
+ get deserializedXYWH() {
+ return deserializeXYWH(this.xywh);
+ }
+
+ get x() {
+ return this.deserializedXYWH[0];
+ }
+
+ get y() {
+ return this.deserializedXYWH[1];
+ }
+
+ get w() {
+ return this.deserializedXYWH[2];
+ }
+
+ get h() {
+ return this.deserializedXYWH[3];
+ }
+
+ get group() {
+ return this.surfaceModel.getGroup(this.id);
+ }
+
+ get id() {
+ return this.yMap.get('id') as string;
+ }
+
+ get elementBound() {
+ if (this.rotate) {
+ return Bound.from(getBoundsWithRotation(this));
+ }
+
+ return Bound.deserialize(this.xywh);
+ }
+
+ stash(prop: keyof Props) {
+ if (this._stashed.has(prop)) {
+ return;
+ }
+
+ const curVal = this.yMap.get(prop as string);
+ const prototype = Object.getPrototypeOf(this);
+
+ this._stashed.set(prop, curVal);
+
+ Object.defineProperty(this, prop, {
+ configurable: true,
+ enumerable: true,
+ get: () => this._stashed.get(prop),
+ set: (value: unknown) => {
+ const oldValue = this._stashed.get(prop);
+
+ this._stashed.set(prop, value);
+ this._onChange({ [prop]: { oldValue } });
+
+ updateDerivedProp(prototype, prop as string, this);
+ },
+ });
+ }
+
+ pop(prop: keyof Props) {
+ if (!this._stashed.has(prop)) {
+ return;
+ }
+
+ const value = this._stashed.get(prop);
+ this._stashed.delete(prop);
+ // @ts-ignore
+ delete this[prop];
+ this.yMap.set(prop as string, value);
+ }
+}

packages/blocks/src/surface-block/element-model/brush.ts

@@ -0,0 +1,63 @@
+import {
+ Bound,
+ getBoundFromPoints,
+ inflateBound,
+ transformPointsToNewBound,
+} from '../utils/bound.js';
+import { type SerializedXYWH } from '../utils/xywh.js';
+import { type BaseProps, ElementModel } from './base.js';
+import { derive, yfield } from './decorators.js';
+
+export type BrushProps = BaseProps & {
+ /**
+ * [[x0,y0],[x1,y1]...]
+ */
+ points: number[][];
+ color: string;
+ lineWidth: number;
+};
+
+export class BrushElementModel extends ElementModel<BrushProps> {
+ @derive((instance: BrushElementModel) => {
+ const lineWidth = instance.lineWidth;
+ const bound = getBoundFromPoints(instance.points);
+ const boundWidthLineWidth = inflateBound(bound, lineWidth);
+
+ return {
+ xywh: boundWidthLineWidth.serialize(),
+ };
+ })
+ @yfield()
+ points: number[][] = [];
+
+ @derive((instance: BrushElementModel) => {
+ const bound = Bound.deserialize(instance.xywh);
+ const { lineWidth } = instance;
+ const transformed = transformPointsToNewBound(
+ instance.points.map(([x, y]) => ({ x, y })),
+ instance,
+ lineWidth / 2,
+ bound,
+ lineWidth / 2
+ );
+
+ return {
+ points: transformed.points.map(p => [p.x, p.y]),
+ };
+ })
+ @yfield()
+ xywh: SerializedXYWH = '[0,0,0,0]';
+
+ @yfield()
+ rotate: number = 0;
+
+ @yfield()
+ color: string = '#000000';
+
+ @yfield()
+ lineWidth: number = 4;
+
+ override get type() {
+ return 'brush';
+ }
+}

packages/blocks/src/surface-block/element-model/common.ts

@@ -0,0 +1,19 @@
+export type StrokeStyle = 'solid' | 'dash' | 'none';
+
+export enum FontFamily {
+ Inter = 'blocksuite:surface:Inter',
+ Kalam = 'blocksuite:surface:Kalam',
+ Satoshi = 'blocksuite:surface:Satoshi',
+ Poppins = 'blocksuite:surface:Poppins',
+ Lora = 'blocksuite:surface:Lora',
+ BebasNeue = 'blocksuite:surface:BebasNeue',
+ OrelegaOne = 'blocksuite:surface:OrelegaOne',
+}
+
+export const enum FontWeight {
+ Light = '300',
+ Regular = '400',
+ SemiBold = '600',
+}
+
+export type FontStyle = 'normal' | 'italic';

packages/blocks/src/surface-block/element-model/connector.ts

@@ -0,0 +1,78 @@
+import { DEFAULT_ROUGHNESS } from '../consts.js';
+import type { SerializedXYWH } from '../index.js';
+import { type BaseProps, ElementModel } from './base.js';
+import type { StrokeStyle } from './common.js';
+import { local, yfield } from './decorators.js';
+
+export type PointStyle = 'None' | 'Arrow' | 'Triangle' | 'Circle' | 'Diamond';
+
+export type Connection = {
+ id?: string;
+ position: [number, number];
+};
+
+export enum ConnectorMode {
+ Straight,
+ Orthogonal,
+ Curve,
+}
+
+type ConnectorElementProps = BaseProps & {
+ mode: ConnectorMode;
+ stroke: string;
+ strokeWidth: number;
+ strokeStyle: StrokeStyle;
+ roughness?: number;
+ rough?: boolean;
+ source: Connection;
+ target: Connection;
+
+ frontEndpointStyle?: PointStyle;
+ rearEndpointStyle?: PointStyle;
+};
+
+export class ConnectorElementModel extends ElementModel<ConnectorElementProps> {
+ get type() {
+ return 'connector';
+ }
+
+ @local()
+ xywh: SerializedXYWH = '[0,0,0,0]';
+
+ @local()
+ rotate: number = 0;
+
+ @yfield()
+ mode: ConnectorMode = ConnectorMode.Orthogonal;
+
+ @yfield()
+ strokeWidth: number = 4;
+
+ @yfield()
+ stroke: string = '#000000';
+
+ @yfield()
+ strokeStyle: StrokeStyle = 'solid';
+
+ @yfield()
+ roughness: number = DEFAULT_ROUGHNESS;
+
+ @yfield()
+ rough?: boolean;
+
+ @yfield()
+ source: Connection = {
+ position: [0, 0],
+ };
+
+ @yfield()
+ target: Connection = {
+ position: [0, 0],
+ };
+
+ @yfield()
+ frontEndpointStyle?: PointStyle;
+
+ @yfield()
+ rearEndpointStyle?: PointStyle;
+}