chore(editor): remove common utils in surface block (#9527)

blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts

@@ -1,6 +1,5 @@
 import {
   CanvasElementType,
-  CommonUtils,
   EdgelessCRUDIdentifier,
 } from '@blocksuite/affine-block-surface';
 import {
@@ -36,7 +35,10 @@ import type { XYWH } from '@blocksuite/global/utils';
 import {
   assertInstanceOf,
   Bound,
+  clamp,
+  normalizeDegAngle,
   serializeXYWH,
+  toDegree,
   Vec,
   WithDisposable,
 } from '@blocksuite/global/utils';
@@ -342,10 +344,8 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
     if (!point) return;
 
     const len = connector.path.length;
-    const angle = CommonUtils.normalizeDegAngle(
-      CommonUtils.toDegree(
-        Vec.angle(connector.path[len - 2], connector.path[len - 1])
-      )
+    const angle = normalizeDegAngle(
+      toDegree(Vec.angle(connector.path[len - 2], connector.path[len - 1]))
     );
     let nextBound: Bound;
     let position: Connection['position'];
@@ -399,8 +399,8 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
     const coord = viewport.toViewCoord(pos[0], pos[1]);
     const { width, height } = viewportRect;
 
-    coord[0] = CommonUtils.clamp(coord[0], 20, width - 20 - PANEL_WIDTH);
-    coord[1] = CommonUtils.clamp(coord[1], 20, height - 20 - PANEL_HEIGHT);
+    coord[0] = clamp(coord[0], 20, width - 20 - PANEL_WIDTH);
+    coord[1] = clamp(coord[1], 20, height - 20 - PANEL_HEIGHT);
 
     return coord;
   }

blocksuite/blocks/src/root-block/edgeless/components/auto-complete/utils.ts

@@ -1,5 +1,4 @@
 import {
-  CommonUtils,
   type Options,
   Overlay,
   type RoughCanvas,
@@ -17,7 +16,7 @@ import {
 import type { GfxController, GfxModel } from '@blocksuite/block-std/gfx';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import type { XYWH } from '@blocksuite/global/utils';
-import { assertType, Bound } from '@blocksuite/global/utils';
+import { assertType, Bound, normalizeDegAngle } from '@blocksuite/global/utils';
 import * as Y from 'yjs';
 
 import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
@@ -193,7 +192,7 @@ export function nextBound(
       angle = 270;
       break;
   }
-  angle = CommonUtils.normalizeDegAngle(angle + curShape.rotate);
+  angle = normalizeDegAngle(angle + curShape.rotate);
 
   if (angle >= 45 && angle <= 135) {
     nextBound = new Bound(x, y + h + MAIN_GAP, w, h);

blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts

@@ -8,7 +8,6 @@ import {
 } from '@blocksuite/affine-block-embed';
 import {
   CanvasElementType,
-  CommonUtils,
   normalizeShapeBound,
   OverlayIdentifier,
   TextUtils,
@@ -54,6 +53,7 @@ import {
   assertType,
   Bound,
   deserializeXYWH,
+  normalizeDegAngle,
   pickValues,
   Slot,
 } from '@blocksuite/global/utils';
@@ -597,7 +597,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
       } else {
         this.gfx.updateElement(id, {
           xywh: bounds.serialize(),
-          rotate: CommonUtils.normalizeDegAngle(rotate + delta),
+          rotate: normalizeDegAngle(rotate + delta),
         });
       }
     });

blocksuite/blocks/src/root-block/edgeless/components/resize/resize-manager.ts

@@ -1,4 +1,3 @@
-import { CommonUtils } from '@blocksuite/affine-block-surface';
 import { NOTE_MIN_WIDTH } from '@blocksuite/affine-model';
 import {
   assertExists,
@@ -7,13 +6,12 @@ import {
   type IPoint,
   type IVec,
   type PointLocation,
+  rotatePoints,
 } from '@blocksuite/global/utils';
 
 import type { SelectableProps } from '../../utils/query.js';
 import { HandleDirection, type ResizeMode } from './resize-handles.js';
 
-const { rotatePoints } = CommonUtils;
-
 // 15deg
 const SHIFT_LOCKING_ANGLE = Math.PI / 12;
 

blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-shape-text-editor.ts

@@ -1,5 +1,4 @@
 import {
-  CommonUtils,
   EdgelessCRUDIdentifier,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
@@ -15,6 +14,7 @@ import {
 import {
   assertExists,
   Bound,
+  toRadian,
   Vec,
   WithDisposable,
 } from '@blocksuite/global/utils';
@@ -25,8 +25,6 @@ import * as Y from 'yjs';
 
 import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
 
-const { toRadian } = CommonUtils;
-
 export class EdgelessShapeTextEditor extends WithDisposable(ShadowlessElement) {
   get crud() {
     return this.edgeless.std.get(EdgelessCRUDIdentifier);

blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-text-editor.ts

@@ -1,5 +1,4 @@
 import {
-  CommonUtils,
   EdgelessCRUDIdentifier,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
@@ -14,6 +13,7 @@ import {
 import {
   assertExists,
   Bound,
+  toRadian,
   Vec,
   WithDisposable,
 } from '@blocksuite/global/utils';
@@ -24,8 +24,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
 import { deleteElements } from '../../utils/crud.js';
 
-const { toRadian } = CommonUtils;
-
 export class EdgelessTextEditor extends WithDisposable(ShadowlessElement) {
   get crud() {
     return this.edgeless.std.get(EdgelessCRUDIdentifier);

blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts

@@ -1,4 +1,3 @@
-import { CommonUtils } from '@blocksuite/affine-block-surface';
 import {
   FrameNavigatorNextIcon,
   FrameNavigatorPrevIcon,
@@ -10,7 +9,7 @@ import { toast } from '@blocksuite/affine-components/toast';
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
-import { Bound, SignalWatcher } from '@blocksuite/global/utils';
+import { Bound, clamp, SignalWatcher } from '@blocksuite/global/utils';
 import { effect } from '@preact/signals-core';
 import { cssVar } from '@toeverything/theme';
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
@@ -22,8 +21,6 @@ import { isFrameBlock } from '../../utils/query.js';
 import { launchIntoFullscreen } from '../utils.js';
 import { EdgelessToolbarToolMixin } from './mixins/tool.mixin.js';
 
-const { clamp } = CommonUtils;
-
 export class PresentationToolbar extends EdgelessToolbarToolMixin(
   SignalWatcher(LitElement)
 ) {

blocksuite/blocks/src/root-block/edgeless/components/utils.ts

@@ -1,7 +1,6 @@
-import { CommonUtils } from '@blocksuite/affine-block-surface';
 import type { CursorType, StandardCursor } from '@blocksuite/block-std/gfx';
 import type { IVec } from '@blocksuite/global/utils';
-import { assertExists, Vec } from '@blocksuite/global/utils';
+import { assertExists, normalizeDegAngle, Vec } from '@blocksuite/global/utils';
 import { css, html } from 'lit';
 
 // "<svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g><path fill='white' d='M13.7,18.5h3.9l0-1.5c0-1.4-1.2-2.6-2.6-2.6h-1.5v3.9l-5.8-5.8l5.8-5.8v3.9h2.3c3.1,0,5.6,2.5,5.6,5.6v2.3h3.9l-5.8,5.8L13.7,18.5z'/><path d='M20.4,19.4v-3.2c0-2.6-2.1-4.7-4.7-4.7h-3.2l0,0V9L9,12.6l3.6,3.6v-2.6l0,0H15c1.9,0,3.5,1.6,3.5,3.5v2.4l0,0h-2.6l3.6,3.6l3.6-3.6L20.4,19.4L20.4,19.4z'/></g></svg>";
@@ -93,7 +92,7 @@ export function calcAngle(target: HTMLElement, point: IVec, offset = 0) {
   assertExists(rect);
   const { left, top, right, bottom } = rect;
   const center = Vec.med([left, top], [right, bottom]);
-  return CommonUtils.normalizeDegAngle(
+  return normalizeDegAngle(
     ((Vec.angle(center, point) + offset) * 180) / Math.PI
   );
 }
@@ -155,9 +154,7 @@ export function calcAngleWithRotation(
 
   const c = new DOMPoint(...center).matrixTransform(m);
 
-  return CommonUtils.normalizeDegAngle(
-    (Vec.angle([c.x, c.y], point) * 180) / Math.PI
-  );
+  return normalizeDegAngle((Vec.angle([c.x, c.y], point) * 180) / Math.PI);
 }
 
 export function calcAngleEdgeWithRotation(target: HTMLElement, rotate: number) {

blocksuite/blocks/src/root-block/edgeless/edgeless-root-block.ts

@@ -3,8 +3,8 @@ import type {
   SurfaceBlockModel,
 } from '@blocksuite/affine-block-surface';
 import {
-  CommonUtils,
   EdgelessLegacySlotIdentifier,
+  normalizeWheelDeltaY,
 } from '@blocksuite/affine-block-surface';
 import type {
   RootBlockModel,
@@ -49,8 +49,6 @@ import { getBackgroundGrid, isCanvasElement } from './utils/query.js';
 import { mountShapeTextEditor } from './utils/text.js';
 import { fitToScreen } from './utils/viewport.js';
 
-const { normalizeWheelDeltaY } = CommonUtils;
-
 export class EdgelessRootBlockComponent extends BlockComponent<
   RootBlockModel,
   EdgelessRootService,

blocksuite/blocks/src/root-block/edgeless/gfx-tool/eraser-tool.ts

@@ -1,5 +1,4 @@
 import {
-  CommonUtils,
   EdgelessCRUDIdentifier,
   Overlay,
   type SurfaceBlockComponent,
@@ -7,9 +6,13 @@ import {
 import { isTopLevelBlock } from '@blocksuite/affine-shared/utils';
 import type { PointerEventState } from '@blocksuite/block-std';
 import { BaseTool } from '@blocksuite/block-std/gfx';
-import { Bound, type IVec } from '@blocksuite/global/utils';
-
-const { getSvgPathFromStroke, getStroke, linePolygonIntersects } = CommonUtils;
+import {
+  Bound,
+  getStroke,
+  getSvgPathFromStroke,
+  type IVec,
+  linePolygonIntersects,
+} from '@blocksuite/global/utils';
 
 class EraserOverlay extends Overlay {
   d = '';

blocksuite/blocks/src/root-block/edgeless/gfx-tool/lasso-tool.ts

@@ -1,5 +1,4 @@
 import {
-  CommonUtils,
   Overlay,
   type SurfaceBlockComponent,
 } from '@blocksuite/affine-block-surface';
@@ -12,6 +11,7 @@ import {
   Bound,
   getBoundFromPoints,
   getPolygonPathFromPoints,
+  getSvgPathFromStroke,
   linePolygonIntersects,
   pointInPolygon,
   rotatePoints,
@@ -70,7 +70,7 @@ export class LassoTool extends BaseTool<LassoToolOption> {
   private readonly _loop = () => {
     const path =
       this.activatedOption.mode === LassoMode.FreeHand
-        ? CommonUtils.getSvgPathFromStroke(this._lassoPoints)
+        ? getSvgPathFromStroke(this._lassoPoints)
         : getPolygonPathFromPoints(this._lassoPoints);
 
     this._overlay.d = path;

blocksuite/blocks/src/root-block/edgeless/services/template-middlewares.ts

@@ -1,4 +1,4 @@
-import { CommonUtils, sortIndex } from '@blocksuite/affine-block-surface';
+import { generateElementId, sortIndex } from '@blocksuite/affine-block-surface';
 import type { ConnectorElementModel } from '@blocksuite/affine-model';
 import { assertExists, assertType, Bound } from '@blocksuite/global/utils';
 import type { BlockSnapshot, SnapshotNode } from '@blocksuite/store';
@@ -50,7 +50,7 @@ export const replaceIdMiddleware = (job: TemplateJob) => {
       Object.entries(
         blockJson.props.elements as Record<string, Record<string, unknown>>
       ).forEach(([id, val]) => {
-        const newId = CommonUtils.generateElementId();
+        const newId = generateElementId();
 
         regeneratedIdMap.set(id, newId);
         val.id = newId;

blocksuite/blocks/src/root-block/edgeless/utils/query.ts

@@ -1,6 +1,5 @@
 import {
   type CanvasElementWithText,
-  CommonUtils,
   GRID_GAP_MAX,
   GRID_GAP_MIN,
 } from '@blocksuite/affine-block-surface';
@@ -36,13 +35,11 @@ import type {
   Viewport,
 } from '@blocksuite/block-std/gfx';
 import type { PointLocation } from '@blocksuite/global/utils';
-import { Bound } from '@blocksuite/global/utils';
+import { Bound, clamp } from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
 
 import type { Connectable } from '../../../_common/utils/index.js';
 
-const { clamp } = CommonUtils;
-
 export function isMindmapNode(
   element: GfxBlockElementModel | BlockSuite.EdgelessModel | null
 ) {

blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts

@@ -1,5 +1,4 @@
 import type { BuiltInEmbedModel } from '@blocksuite/affine-block-bookmark';
-import { CommonUtils } from '@blocksuite/affine-block-surface';
 import { ConnectorCWithArrowIcon } from '@blocksuite/affine-components/icons';
 import {
   cloneGroups,
@@ -31,6 +30,7 @@ import { requestConnectedFrame } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
 import {
   atLeastNMatches,
+  clamp,
   getCommonBoundWithRotation,
   groupBy,
   pickValues,
@@ -238,8 +238,8 @@ export class EdgelessElementToolbarWidget extends WidgetComponent<
         left += 0.5 * (w - rect.width);
       }
 
-      left = CommonUtils.clamp(left, 10, width - rect.width - 10);
-      top = CommonUtils.clamp(top, 10, height - rect.height - 150);
+      left = clamp(left, 10, width - rect.width - 10);
+      top = clamp(top, 10, height - rect.height - 150);
 
       this.style.transform = `translate3d(${left}px, ${top}px, 0)`;
     }, this);