From 4c3c953a36813c055a1a26d15a9103b58e0e7bc0 Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Mon, 3 Mar 2025 10:33:38 +0000
Subject: [PATCH] chore(editor): merge clamp functions (#10577)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-2625](https://linear.app/affine-design/issue/BS-2625/合并clamp函数)
---
 blocksuite/affine/block-database/src/properties/converts.ts | 2 +-
 .../src/edgeless/components/panel/line-width-panel.ts       | 3 ++-
 .../block-root/src/edgeless/components/panel/scale-panel.ts | 3 ++-
 .../block-root/src/edgeless/components/panel/size-panel.ts  | 3 ++-
 .../src/edgeless/components/rects/edgeless-selected-rect.ts | 2 +-
 .../affine/block-root/src/edgeless/edgeless-root-service.ts | 2 +-
 .../affine/block-root/src/edgeless/gfx-tool/default-tool.ts | 2 +-
 blocksuite/affine/block-root/src/utils/position.ts          | 2 +-
 .../affine/components/src/color-picker/color-picker.ts      | 5 ++---
 blocksuite/affine/components/src/color-picker/utils.ts      | 4 +---
 blocksuite/affine/components/src/date-picker/date-picker.ts | 6 +++---
 blocksuite/affine/components/src/date-picker/utils.ts       | 5 -----
 .../affine/data-view/src/property-presets/converts.ts       | 2 +-
 blocksuite/affine/shared/src/utils/dom/point-to-block.ts    | 3 +--
 blocksuite/affine/shared/src/utils/math.ts                  | 6 ------
 blocksuite/tests-legacy/e2e/utils/bs-alternative.ts         | 5 ++---
 16 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/blocksuite/affine/block-database/src/properties/converts.ts b/blocksuite/affine/block-database/src/properties/converts.ts
index 28d189a42a..912ff79f8f 100644
--- a/blocksuite/affine/block-database/src/properties/converts.ts
+++ b/blocksuite/affine/block-database/src/properties/converts.ts
@@ -1,4 +1,3 @@
-import { clamp } from '@blocksuite/affine-shared/utils';
 import {
   createPropertyConvert,
   getTagColor,
@@ -6,6 +5,7 @@ import {
 } from '@blocksuite/data-view';
 import { presetPropertyConverts } from '@blocksuite/data-view/property-presets';
 import { propertyModelPresets } from '@blocksuite/data-view/property-pure-presets';
+import { clamp } from '@blocksuite/global/utils';
 import { nanoid, Text } from '@blocksuite/store';
 
 import { richTextPropertyModelConfig } from './rich-text/define.js';
diff --git a/blocksuite/affine/block-root/src/edgeless/components/panel/line-width-panel.ts b/blocksuite/affine/block-root/src/edgeless/components/panel/line-width-panel.ts
index f586a97879..9b78fc3617 100644
--- a/blocksuite/affine/block-root/src/edgeless/components/panel/line-width-panel.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/panel/line-width-panel.ts
@@ -1,9 +1,10 @@
 import { LINE_WIDTHS, LineWidth } from '@blocksuite/affine-model';
-import { clamp, on, once } from '@blocksuite/affine-shared/utils';
+import { on, once } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import clamp from 'lodash-es/clamp';
 
 interface Config {
   width: number;
diff --git a/blocksuite/affine/block-root/src/edgeless/components/panel/scale-panel.ts b/blocksuite/affine/block-root/src/edgeless/components/panel/scale-panel.ts
index ac7105bee2..24c7b2230d 100644
--- a/blocksuite/affine/block-root/src/edgeless/components/panel/scale-panel.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/panel/scale-panel.ts
@@ -1,7 +1,8 @@
-import { clamp, stopPropagation } from '@blocksuite/affine-shared/utils';
+import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import clamp from 'lodash-es/clamp';
 
 const MIN_SCALE = 0;
 const MAX_SCALE = 400;
diff --git a/blocksuite/affine/block-root/src/edgeless/components/panel/size-panel.ts b/blocksuite/affine/block-root/src/edgeless/components/panel/size-panel.ts
index 0a3c3cc2c3..7aee6b7aff 100644
--- a/blocksuite/affine/block-root/src/edgeless/components/panel/size-panel.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/panel/size-panel.ts
@@ -1,8 +1,9 @@
-import { clamp, stopPropagation } from '@blocksuite/affine-shared/utils';
+import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { DoneIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import clamp from 'lodash-es/clamp';
 
 const MIN_SIZE = 1;
 const MAX_SIZE = 200;
diff --git a/blocksuite/affine/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts b/blocksuite/affine/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts
index 02a575429c..e91092e0b7 100644
--- a/blocksuite/affine/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts
@@ -35,7 +35,6 @@ import {
 import { EMBED_CARD_HEIGHT } from '@blocksuite/affine-shared/consts';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import {
-  clamp,
   getElementsWithoutGroup,
   getSelectedRect,
   requestThrottledConnectedFrame,
@@ -68,6 +67,7 @@ import { css, html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import clamp from 'lodash-es/clamp';
 
 import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
 import {
diff --git a/blocksuite/affine/block-root/src/edgeless/edgeless-root-service.ts b/blocksuite/affine/block-root/src/edgeless/edgeless-root-service.ts
index 8229e03356..3d84fbd6e0 100644
--- a/blocksuite/affine/block-root/src/edgeless/edgeless-root-service.ts
+++ b/blocksuite/affine/block-root/src/edgeless/edgeless-root-service.ts
@@ -14,7 +14,6 @@ import {
   MindmapElementModel,
   RootBlockSchema,
 } from '@blocksuite/affine-model';
-import { clamp } from '@blocksuite/affine-shared/utils';
 import type { BlockStdScope } from '@blocksuite/block-std';
 import type {
   GfxController,
@@ -35,6 +34,7 @@ import {
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { Bound, getCommonBound } from '@blocksuite/global/utils';
 import { effect } from '@preact/signals-core';
+import clamp from 'lodash-es/clamp';
 
 import { RootService } from '../root-service.js';
 import { TemplateJob } from './services/template.js';
diff --git a/blocksuite/affine/block-root/src/edgeless/gfx-tool/default-tool.ts b/blocksuite/affine/block-root/src/edgeless/gfx-tool/default-tool.ts
index 5cd26a66b9..66ce37838b 100644
--- a/blocksuite/affine/block-root/src/edgeless/gfx-tool/default-tool.ts
+++ b/blocksuite/affine/block-root/src/edgeless/gfx-tool/default-tool.ts
@@ -27,7 +27,6 @@ import {
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
 import {
-  clamp,
   handleNativeRangeAtPoint,
   resetNativeSelection,
 } from '@blocksuite/affine-shared/utils';
@@ -52,6 +51,7 @@ import {
   Vec,
 } from '@blocksuite/global/utils';
 import { effect } from '@preact/signals-core';
+import clamp from 'lodash-es/clamp';
 
 import type { EdgelessRootBlockComponent } from '../edgeless-root-block.js';
 import { prepareCloneData } from '../utils/clone-utils.js';
diff --git a/blocksuite/affine/block-root/src/utils/position.ts b/blocksuite/affine/block-root/src/utils/position.ts
index 4585b6ea52..65da8a84bc 100644
--- a/blocksuite/affine/block-root/src/utils/position.ts
+++ b/blocksuite/affine/block-root/src/utils/position.ts
@@ -1,4 +1,4 @@
-import { clamp } from '@blocksuite/affine-shared/utils';
+import clamp from 'lodash-es/clamp';
 
 type CollisionBox = {
   /**
diff --git a/blocksuite/affine/components/src/color-picker/color-picker.ts b/blocksuite/affine/components/src/color-picker/color-picker.ts
index e30896cf13..a002ff6a43 100644
--- a/blocksuite/affine/components/src/color-picker/color-picker.ts
+++ b/blocksuite/affine/components/src/color-picker/color-picker.ts
@@ -1,6 +1,6 @@
 import type { Color } from '@blocksuite/affine-model';
 import { on, once, stopPropagation } from '@blocksuite/affine-shared/utils';
-import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
+import { clamp, SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { batch, computed, signal } from '@preact/signals-core';
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -24,7 +24,6 @@ import type {
 } from './types.js';
 import {
   bound01,
-  clamp,
   defaultHsva,
   eq,
   hsvaToHex8,
@@ -55,7 +54,7 @@ export class EdgelessColorPicker extends SignalWatcher(
     const orignalValue = target.value;
     let value = orignalValue.trim().replace(/[^0-9]/, '');
 
-    const alpha = clamp(0, Number(value), 100);
+    const alpha = clamp(Number(value), 0, 100);
     const a = bound01(alpha, 100);
     const hsva = this.hsva$.peek();
 
diff --git a/blocksuite/affine/components/src/color-picker/utils.ts b/blocksuite/affine/components/src/color-picker/utils.ts
index cf50d18ab4..0712a6adfa 100644
--- a/blocksuite/affine/components/src/color-picker/utils.ts
+++ b/blocksuite/affine/components/src/color-picker/utils.ts
@@ -1,6 +1,7 @@
 // https://www.w3.org/TR/css-color-4/
 
 import type { Color, ColorScheme } from '@blocksuite/affine-model';
+import { clamp } from '@blocksuite/global/utils';
 
 import { COLORS, FIRST_COLOR } from './consts.js';
 import type {
@@ -52,9 +53,6 @@ export function linearGradientAt(t: number): Rgb {
 
 const lerp = (a: number, b: number, t: number) => a + t * (b - a);
 
-export const clamp = (min: number, val: number, max: number) =>
-  Math.min(Math.max(min, val), max);
-
 export const bound01 = (n: number, max: number) => {
   n = clamp(0, n, max);
 
diff --git a/blocksuite/affine/components/src/date-picker/date-picker.ts b/blocksuite/affine/components/src/date-picker/date-picker.ts
index 6810ceb8bb..a4f51d45a9 100644
--- a/blocksuite/affine/components/src/date-picker/date-picker.ts
+++ b/blocksuite/affine/components/src/date-picker/date-picker.ts
@@ -1,4 +1,4 @@
-import { WithDisposable } from '@blocksuite/global/utils';
+import { clamp, WithDisposable } from '@blocksuite/global/utils';
 import { isSameDay, isSameMonth, isToday } from 'date-fns';
 import {
   html,
@@ -13,7 +13,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 import { arrowLeftIcon } from './icons.js';
 import { datePickerStyle } from './style.js';
-import { clamp, getMonthMatrix, toDate } from './utils.js';
+import { getMonthMatrix, toDate } from './utils.js';
 
 const days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const months = [
@@ -522,7 +522,7 @@ export class DatePicker extends WithDisposable(LitElement) {
   }
 
   openYearSelector() {
-    this._yearCursor = clamp(this._minYear, this._maxYear, this.year);
+    this._yearCursor = clamp(this.year, this._minYear, this._maxYear);
     this._mode = 'year';
     this._getYearMatrix();
   }
diff --git a/blocksuite/affine/components/src/date-picker/utils.ts b/blocksuite/affine/components/src/date-picker/utils.ts
index 3616e38068..39cd91247c 100644
--- a/blocksuite/affine/components/src/date-picker/utils.ts
+++ b/blocksuite/affine/components/src/date-picker/utils.ts
@@ -66,8 +66,3 @@ export function getMonthMatrix(maybeDate: MaybeDate) {
   }
   return matrix;
 }
-
-export function clamp(num1: number, num2: number, value: number) {
-  const [min, max] = [num1, num2].sort((a, b) => a - b);
-  return Math.min(Math.max(value, min), max);
-}
diff --git a/blocksuite/affine/data-view/src/property-presets/converts.ts b/blocksuite/affine/data-view/src/property-presets/converts.ts
index ca3c059ffd..54b94823d9 100644
--- a/blocksuite/affine/data-view/src/property-presets/converts.ts
+++ b/blocksuite/affine/data-view/src/property-presets/converts.ts
@@ -1,4 +1,4 @@
-import { clamp } from '@blocksuite/affine-shared/utils';
+import { clamp } from '@blocksuite/global/utils';
 
 import { createPropertyConvert } from '../core/index.js';
 import { multiSelectPropertyModelConfig } from './multi-select/define.js';
diff --git a/blocksuite/affine/shared/src/utils/dom/point-to-block.ts b/blocksuite/affine/shared/src/utils/dom/point-to-block.ts
index 87dd09efc7..5ff1bd22fe 100644
--- a/blocksuite/affine/shared/src/utils/dom/point-to-block.ts
+++ b/blocksuite/affine/shared/src/utils/dom/point-to-block.ts
@@ -1,11 +1,10 @@
 import { NoteBlockModel, RootBlockModel } from '@blocksuite/affine-model';
 import { BLOCK_ID_ATTR, type BlockComponent } from '@blocksuite/block-std';
 import { SurfaceBlockModel } from '@blocksuite/block-std/gfx';
-import type { Point, Rect } from '@blocksuite/global/utils';
+import { clamp, type Point, type Rect } from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
 
 import { BLOCK_CHILDREN_CONTAINER_PADDING_LEFT } from '../../consts/index.js';
-import { clamp } from '../math.js';
 import { matchModels } from '../model/checker.js';
 
 const ATTR_SELECTOR = `[${BLOCK_ID_ATTR}]`;
diff --git a/blocksuite/affine/shared/src/utils/math.ts b/blocksuite/affine/shared/src/utils/math.ts
index 3b8f158834..e99ca058ac 100644
--- a/blocksuite/affine/shared/src/utils/math.ts
+++ b/blocksuite/affine/shared/src/utils/math.ts
@@ -2,12 +2,6 @@ export function almostEqual(a: number, b: number, epsilon = 0.0001) {
   return Math.abs(a - b) < epsilon;
 }
 
-export function clamp(value: number, min: number, max: number): number {
-  if (value < min) return min;
-  if (value > max) return max;
-  return value;
-}
-
 export function rangeWrap(n: number, min: number, max: number) {
   max = max - min;
   n = (n - min + max) % max;
diff --git a/blocksuite/tests-legacy/e2e/utils/bs-alternative.ts b/blocksuite/tests-legacy/e2e/utils/bs-alternative.ts
index 90c908ecec..0781d02be4 100644
--- a/blocksuite/tests-legacy/e2e/utils/bs-alternative.ts
+++ b/blocksuite/tests-legacy/e2e/utils/bs-alternative.ts
@@ -1,3 +1,5 @@
+import { clamp } from '@blocksuite/global/utils';
+
 export const BLOCK_CHILDREN_CONTAINER_PADDING_LEFT = 24;
 export const NOTE_MIN_WIDTH = 450 + 24 * 2;
 export const NOTE_MIN_HEIGHT = 92;
@@ -11,9 +13,6 @@ export enum NoteDisplayMode {
   EdgelessOnly = 'edgeless',
 }
 
-export const clamp = (min: number, val: number, max: number) =>
-  Math.min(Math.max(min, val), max);
-
 export const bound01 = (n: number, max: number) => {
   n = clamp(0, n, max);