Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-17 06:16:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): clamp method in color picker (#10840)

Browse Source 
Related to https://github.com/toeverything/AFFiNE/pull/10577
This commit is contained in:
fundon
2025-03-13 19:37:37 +00:00
parent 341321284e
commit b238aa3182
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
blocksuite/affine/components/src/color-picker/color-picker.ts
View File

@@ -1,6 +1,5 @@
import type { Color } from '@blocksuite/affine-model';
import { on, once, stopPropagation } from '@blocksuite/affine-shared/utils';
import { clamp } from '@blocksuite/global/gfx';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
import { batch, computed, signal } from '@preact/signals-core';
import { html, LitElement } from 'lit';
@@ -9,6 +8,7 @@ import { classMap } from 'lit/directives/class-map.js';
import { live } from 'lit/directives/live.js';
import { repeat } from 'lit/directives/repeat.js';
import { styleMap } from 'lit/directives/style-map.js';
import clamp from 'lodash-es/clamp';
import { AREA_CIRCLE_R, MATCHERS, SLIDER_CIRCLE_R } from './consts.js';
import { COLOR_PICKER_STYLE } from './styles.js';
@@ -133,7 +133,7 @@ export class EdgelessColorPicker extends SignalWatcher(
#setAlphaPos(clientX: number) {
const { left, width } = this.#alphaRect;
const x = clamp(0, clientX - left, width);
const x = clamp(clientX - left, 0, width);
this.alphaPosX$.value = x;
}
@@ -141,7 +141,7 @@ export class EdgelessColorPicker extends SignalWatcher(
#setAlphaPosWithWheel(y: number) {
const { width } = this.#alphaRect;
const px = this.alphaPosX$.peek();
const ax = clamp(0, px + (y * width) / 100, width);
const ax = clamp(px + (y * width) / 100, 0, width);
this.alphaPosX$.value = ax;
}
@@ -161,7 +161,7 @@ export class EdgelessColorPicker extends SignalWatcher(
#setHuePos(clientX: number) {
const { left, width } = this.#hueRect;
const x = clamp(0, clientX - left, width);
const x = clamp(clientX - left, 0, width);
this.huePosX$.value = x;
}
@@ -169,15 +169,15 @@ export class EdgelessColorPicker extends SignalWatcher(
#setHuePosWithWheel(y: number) {
const { width } = this.#hueRect;
const px = this.huePosX$.peek();
const ax = clamp(0, px + (y * width) / 100, width);
const ax = clamp(px + (y * width) / 100, 0, width);
this.huePosX$.value = ax;
}
#setPalettePos(clientX: number, clientY: number) {
const { left, top, width, height } = this.#paletteRect;
const x = clamp(0, clientX - left, width);
const y = clamp(0, clientY - top, height);
const x = clamp(clientX - left, 0, width);
const y = clamp(clientY - top, 0, height);
this.palettePos$.value = { x, y };
}
@@ -185,8 +185,8 @@ export class EdgelessColorPicker extends SignalWatcher(
#setPalettePosWithWheel(x: number, y: number) {
const { width, height } = this.#paletteRect;
const pos = this.palettePos$.peek();
const px = clamp(0, pos.x + (x * width) / 100, width);
const py = clamp(0, pos.y + (y * height) / 100, height);
const px = clamp(pos.x + (x * width) / 100, 0, width);
const py = clamp(pos.y + (y * height) / 100, 0, height);
this.palettePos$.value = { x: px, y: py };
}

6
blocksuite/affine/components/src/color-picker/utils.ts
View File

@@ -1,7 +1,7 @@
// https://www.w3.org/TR/css-color-4/
import type { Color, ColorScheme } from '@blocksuite/affine-model';
import { clamp } from '@blocksuite/global/gfx';
import clamp from 'lodash-es/clamp';
import { COLORS, FIRST_COLOR } from './consts.js';
import type {
@@ -54,7 +54,7 @@ export function linearGradientAt(t: number): Rgb {
const lerp = (a: number, b: number, t: number) => a + t * (b - a);
export const bound01 = (n: number, max: number) => {
n = clamp(0, n, max);
n = clamp(n, 0, max);
// Handle floating point rounding errors
if (Math.abs(n - max) < 0.000001) {
@@ -94,7 +94,7 @@ export const rgbToHsv = ({ r, g, b }: Rgb): Hsv => {
export const hsvToRgb = ({ h, s, v }: Hsv): Rgb => {
if (h < 0) h = (h + 1) % 1; // wrap
h *= 6;
s = clamp(0, s, 1);
s = clamp(s, 0, 1);
const i = Math.floor(h),
f = h - i,