@vkontakte/vkui 8.1.3 → 8.2.0

package/src/lib/svg/path/interpolate.ts

@@ -0,0 +1,151 @@
+import { type DeepReadonly } from '../../../types';
+import * as array from '../../array';
+import { distancePoint } from '../../math';
+import { approximateRing, type MaxSegmentLengthOptions } from './approximate';
+import { copySVGPath, type DrawtoCommandSupport, type SVGPathSupport } from './path';
+import { type Point, type Points } from './point';
+
+function pointAlong([x1, y1]: Readonly<Point>, [x2, y2]: Readonly<Point>, progress: number): Point {
+  return [x1 + (x2 - x1) * progress, y1 + (y2 - y1) * progress];
+}
+
+function polygonLength(points: Points): number {
+  return points.reduce(
+    (acc, point, index) => acc + distancePoint(point, points[(index + 1) % points.length]),
+    0,
+  );
+}
+
+function addPoints(path: Points, numPoints: number): Points {
+  if (numPoints === 0) {
+    return path;
+  }
+
+  const desiredLength = path.length + numPoints;
+
+  const step = polygonLength(path) / numPoints;
+
+  let index = 0;
+  let cursor = 0;
+  let insertAt = step / 2;
+
+  while (path.length < desiredLength) {
+    const element = path[index];
+    const nextElement = path[(index + 1) % path.length];
+
+    const segment = distancePoint(element, nextElement);
+
+    if (insertAt <= cursor + segment) {
+      path.splice(
+        index + 1,
+        0,
+        segment ? pointAlong(element, nextElement, insertAt - cursor) : array.copy(element), // TODO: test coverage
+      );
+      insertAt += step;
+      continue;
+    }
+
+    cursor += segment;
+    index++;
+  }
+
+  return path;
+}
+
+function bisect(path: Points, { maxSegmentLength }: Required<MaxSegmentLengthOptions>): Points {
+  for (let index = 0; index < path.length; index++) {
+    const element = path[index];
+    let nextElement = path[(index + 1) % path.length];
+
+    while (distancePoint(element, nextElement) > maxSegmentLength) {
+      nextElement = pointAlong(element, nextElement, 0.5);
+
+      path.splice(index + 1, 0, nextElement);
+    }
+  }
+
+  return path;
+}
+
+function normalizeRing(
+  path: DeepReadonly<SVGPathSupport>,
+  { maxSegmentLength }: Required<MaxSegmentLengthOptions>,
+): Points {
+  return bisect(approximateRing(path, { maxSegmentLength }), { maxSegmentLength });
+}
+
+function rotate(from: Points, to: Points) {
+  let min = Infinity;
+  let bestOffset = 0;
+
+  for (let offset = 0; offset < from.length; offset++) {
+    let sumOfSquares = 0;
+
+    to.forEach((element, index) => {
+      const d = distancePoint(from[(offset + index) % from.length], element);
+      sumOfSquares += d * d;
+    });
+
+    if (sumOfSquares < min) {
+      min = sumOfSquares;
+      bestOffset = offset;
+    }
+  }
+
+  if (bestOffset) {
+    const spliced = from.splice(0, bestOffset);
+    from.splice(from.length, 0, ...spliced);
+  }
+}
+
+function interpolatePoint(from: Readonly<Point>, to: Readonly<Point>): (progress: number) => Point {
+  return (progress: number) => {
+    return [from[0] + progress * (to[0] - from[0]), from[1] + progress * (to[1] - from[1])];
+  };
+}
+
+function interpolatePoints(from: Points, to: Points): (progress: number) => SVGPathSupport {
+  const interpolators = from.map((point, index) => interpolatePoint(point, to[index]));
+
+  return (progress: number) => {
+    const result = interpolators.map<DrawtoCommandSupport>((interpolator, index) => [
+      index === 0 ? 'M' : 'L',
+      interpolator(progress),
+    ]);
+    result.push(['Z', []]);
+
+    return result;
+  };
+}
+
+function interpolateRing(from: Points, to: Points): (progress: number) => SVGPathSupport {
+  const diff = from.length - to.length;
+
+  const fromRing = addPoints(from, -Math.min(diff, 0));
+  const toRing = addPoints(to, Math.max(diff, 0));
+
+  rotate(fromRing, toRing);
+
+  return interpolatePoints(fromRing, toRing);
+}
+
+export function interpolate(
+  from: DeepReadonly<SVGPathSupport>,
+  to: DeepReadonly<SVGPathSupport>,
+  { maxSegmentLength = 1 }: MaxSegmentLengthOptions = {},
+): (progress: number) => SVGPathSupport {
+  const fromRing = normalizeRing(from, { maxSegmentLength });
+  const toRing = normalizeRing(to, { maxSegmentLength });
+
+  const fn = interpolateRing(fromRing, toRing);
+
+  return (progress: number) => {
+    if (progress < 1e-4) {
+      return copySVGPath(from);
+    } else if (progress > 1 - 1e-4) {
+      return copySVGPath(to);
+    }
+
+    return fn(progress);
+  };
+}

package/src/lib/svg/path/path.ts

@@ -0,0 +1,102 @@
+import type { DeepReadonly, DeepWriteable } from '../../../types';
+import * as array from '../../array';
+
+type Flag = 0 | 1;
+
+export type CoordinatePair = [number, number];
+export type Coordinate = [number];
+export type CurvetoCoordinate = [number, number, number, number, number, number];
+export type SmoothCurvetoCoordinate = [number, number, number, number];
+export type QuadraticCurvetoCoordinate = [number, number, number, number];
+export type EllipticalArcArgument = [number, number, number, Flag, Flag, number, number];
+
+export type DrawtoCommandAbsolute =
+  | ['M', CoordinatePair]
+  | ['L', CoordinatePair]
+  | ['H', Coordinate]
+  | ['V', Coordinate]
+  | ['C', CurvetoCoordinate]
+  | ['S', SmoothCurvetoCoordinate]
+  | ['Q', QuadraticCurvetoCoordinate]
+  | ['T', CoordinatePair]
+  | ['A', EllipticalArcArgument]
+  | ['Z', []];
+
+type DrawtoCommandRelative =
+  | ['m', CoordinatePair]
+  | ['l', CoordinatePair]
+  | ['h', Coordinate]
+  | ['v', Coordinate]
+  | ['c', CurvetoCoordinate]
+  | ['s', SmoothCurvetoCoordinate]
+  | ['q', QuadraticCurvetoCoordinate]
+  | ['t', CoordinatePair]
+  | ['a', EllipticalArcArgument]
+  | ['z', []];
+
+export type DrawtoCommand = DrawtoCommandAbsolute | DrawtoCommandRelative;
+
+export type SVGPath = DrawtoCommand[];
+
+export type DrawtoCommandSupport =
+  | ['M', CoordinatePair]
+  | ['L', CoordinatePair]
+  | ['C', CurvetoCoordinate]
+  | ['Z', []];
+
+/**
+ * Поддерживаем только `M`, `L`, `C`, и `Z` команды для оптимизации размера кода
+ */
+export type SVGPathSupport = DrawtoCommandSupport[];
+
+/**
+ * Преобразует `SVGPath` в строку
+ *
+ * ```ts
+ * import * as path from './path';
+ * import * as assert from 'node:assert/strict';
+ *
+ * assert.equal(
+ *   path.svgPathToString([['M', [20, 40]], ['L', [40, 60]]]),
+ *   'M20,40L40,60',
+ * );
+ * ```
+ */
+export function svgPathToString(svgPath: DeepReadonly<SVGPath>): string {
+  // return svgPath.reduce((acc, value) => acc + value[0] + value[1].join(','), '');
+
+  let value = '';
+
+  // WARNING: При изменении кода рекомендуется проверить изменение
+  // времени исполнения на компоненте ExpressiveSpinner в профайлерах
+  for (let index = 0; index < svgPath.length; index++) {
+    value += svgPath[index][0];
+    for (let valueIndex = 0; valueIndex < svgPath[index][1].length - 1; valueIndex++) {
+      value += svgPath[index][1][valueIndex].toFixed(4) + ',';
+    }
+
+    if (svgPath[index][1].length) {
+      value += svgPath[index][1][svgPath[index][1].length - 1].toFixed(4);
+    }
+  }
+
+  return value;
+}
+
+/**
+ * Копирует массив команд для пути
+ *
+ * ```ts
+ * import * as path from './path';
+ * import * as assert from 'node:assert/strict';
+ *
+ * const originalSVGPath = [['M', [20, 40]], ['L', [40, 60]]];
+ * const copiedSVGPath = path.copy(originalSVGPath);
+ *
+ * assert.deepEqual(copiedSVGPath, originalSVGPath);
+ * assert.notEqual(copiedSVGPath, originalSVGPath);
+ * ```
+ */
+export function copySVGPath<T extends DeepReadonly<SVGPath>>(svgPath: T): DeepWriteable<T> {
+  return svgPath.map((value) => [value[0], array.copy(value[1])]) as DeepWriteable<T>;
+}

package/src/lib/svg/path/point.ts

@@ -0,0 +1,2 @@
+export type Point = [number, number];
+export type Points = Point[];

package/src/lib/svg/path/transform.ts

@@ -0,0 +1,147 @@
+import { type DeepReadonly } from '../../../types';
+import * as array from '../../array';
+import {
+  type CoordinatePair,
+  copySVGPath,
+  type CurvetoCoordinate,
+  type DrawtoCommandSupport,
+  type SVGPathSupport,
+} from './path';
+
+type TransformFn = <T extends CoordinatePair | CurvetoCoordinate>(values: Readonly<T>) => T;
+
+function transformDrawtoCommand(
+  drawtoCommand: DeepReadonly<DrawtoCommandSupport>,
+  fn: TransformFn,
+): DrawtoCommandSupport {
+  if (drawtoCommand[0] === 'Z') {
+    return ['Z', []];
+  }
+
+  return [drawtoCommand[0], fn(drawtoCommand[1])] as DrawtoCommandSupport;
+}
+
+function transformSVGPath(path: DeepReadonly<SVGPathSupport>, fn: TransformFn): SVGPathSupport {
+  return path.map((item) => transformDrawtoCommand(item, fn));
+}
+
+/**
+ * Масштабирует путь.
+ *
+ * ```ts
+ * import * as transform from './transform';
+ * import * as assert from 'node:assert/strict';
+ *
+ * const scalePath = transform.scale(
+ *   [['M', [10, 20]], ['L', [30, 40]]],
+ *   2,
+ *   2,
+ * );
+ *
+ * assert.deepEqual(
+ *   scalePath,
+ *   [['M', [20, 40]], ['L', [60, 80]]],
+ * );
+ * ```
+ */
+export function scale(
+  path: DeepReadonly<SVGPathSupport>,
+  scaleX: number,
+  scaleY: number,
+): SVGPathSupport {
+  if (scaleX === 1 && scaleY === 1) {
+    return copySVGPath(path);
+  }
+
+  const scaleTransform = <T extends number[]>(values: Readonly<T>): T =>
+    values.map((value, index) => value * (index % 2 === 0 ? scaleX : scaleY)) as T;
+
+  return transformSVGPath(path, scaleTransform);
+}
+
+/**
+ * Перемещает путь по осям X и Y.
+ *
+ * ```ts
+ * import * as transform from './transform';
+ * import * as assert from 'node:assert/strict';
+ *
+ * const translatePath = transform.translate(
+ *   [['M', [10, 20]], ['L', [30, 40]]],
+ *   10,
+ *   20,
+ * );
+ *
+ * assert.deepEqual(
+ *   translatePath,
+ *    [['M', [20, 40]], ['L', [40, 60]]],
+ * );
+ * ```
+ */
+export function translate(
+  path: DeepReadonly<SVGPathSupport>,
+  translateX: number,
+  translateY: number,
+): SVGPathSupport {
+  if (translateX === 0 && translateY === 0) {
+    return copySVGPath(path);
+  }
+
+  const translateTransform = <T extends number[]>(values: Readonly<T>): T =>
+    values.map((value, index) => value + (index % 2 === 0 ? translateX : translateY)) as T;
+
+  return transformSVGPath(path, translateTransform);
+}
+
+/**
+ * Вращает путь относительно заданной точки на заданный угол
+ *
+ * ```ts
+ * import * as transform from './transform';
+ * import * as assert from 'node:assert/strict';
+ *
+ * const rotatePath = transform.rotate(
+ *   [['M', [10, 20]], ['L', [30, 40]]],
+ *   30,
+ *   30,
+ *   180
+ * );
+ *
+ * assert.deepEqual(
+ *   rotatePath,
+ *   [['M', [20, 40]], ['L', [60, 80]]],
+ * );
+ * ```
+ */
+export function rotate(
+  path: DeepReadonly<SVGPathSupport>,
+  originX: number,
+  originY: number,
+  angle: number,
+): SVGPathSupport {
+  angle %= 360;
+  if (angle === 0) {
+    return copySVGPath(path);
+  }
+
+  const rad = (angle * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+
+  const rotateTransformAbsolute = <T extends number[]>(originValues: Readonly<T>): T => {
+    const values = array.copy(originValues);
+
+    for (let i = 0; i < values.length; i += 2) {
+      const px = values[i];
+      const py = values[i + 1];
+      const qx = originX + (px - originX) * cos - (py - originY) * sin;
+      const qy = originY + (px - originX) * sin + (py - originY) * cos;
+      values[i] = qx;
+      values[i + 1] = qy;
+    }
+
+    return values;
+  };
+
+  return transformSVGPath(path, rotateTransformAbsolute);
+}

package/src/lib/tokens/useTokenClassName.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import { ConfigProviderContext } from '../../components/ConfigProvider/ConfigProviderContext';
+import {
+  ColorSchemeContext,
+  PlatformContext,
+} from '../../components/ConfigProvider/ConfigProviderSubContexts';
 import { type ColorSchemeType, DEFAULT_COLOR_SCHEME } from '../colorScheme';
 import { Platform, type PlatformType } from '../platform';
 import { DEFAULT_TOKENS_CLASS_NAMES } from './constants';
@@ -30,11 +34,9 @@ const getAppearanceTokenClassNameByPlatform = (
  * @private
  */
 export const useTokensClassName = (): string => {
-  const {
-    platform,
-    colorScheme = DEFAULT_COLOR_SCHEME,
-    tokensClassNames,
-  } = React.useContext(ConfigProviderContext);
+  const platform = React.useContext(PlatformContext);
+  const colorScheme = React.useContext(ColorSchemeContext) ?? DEFAULT_COLOR_SCHEME;
+  const { tokensClassNames } = React.useContext(ConfigProviderContext);
 
   const colorSchemeClassName = isTokensClassNamesForPlatforms(tokensClassNames)
     ? getAppearanceTokenClassNameByPlatform(platform, tokensClassNames)

package/src/lib/touch/UIPanGestureRecognizer.ts

@@ -1,5 +1,6 @@
 import { millisecondsInSecond } from '../date';
 import { getFirstTouchEventData } from '../dom';
+import { distance } from '../math';
 
 export type Direction = { axis: 'x' | 'y'; direction: -1 | 1 | null };
 
@@ -45,8 +46,7 @@ export class UIPanGestureRecognizer {
   }
 
   distance(): number {
-    const { x, y } = this.delta();
-    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+    return distance(this.x1, this.y1, this.x2, this.y2);
   }
 
   velocity(): Coords {

package/src/types.ts

@@ -148,3 +148,19 @@ export type Elevation = '1' | '2' | '3' | '4';
 export type PartialWithUndefined<T> = {
   [P in keyof T]?: T[P] | undefined;
 };
+
+export type DeepReadonly<T> = Readonly<{
+  [K in keyof T]: T[K] extends number | string | symbol // Is it a primitive? Then make it readonly
+    ? Readonly<T[K]>
+    : // Is it an array of items? Then make the array readonly and the item as well
+      T[K] extends any[]
+      ? Readonly<DeepReadonly<T[K]>>
+      : // It is some other object, make it readonly as well
+        DeepReadonly<T[K]>;
+}>;
+
+export type DeepWriteable<T> = { -readonly [P in keyof T]: DeepWriteable<T[P]> };
+
+export interface ReadonlyWeakMap<K extends WeakKey, V> extends Pick<WeakMap<K, V>, 'get' | 'has'> {
+  readonly [Symbol.toStringTag]: string;
+}

package/dist/cssm/components/WriteBar/WriteBar.module.css

@@ -1,118 +0,0 @@
-.host {
-  background: var(--vkui--color_background_contrast_themed);
-}
-
-.shadow {
-  box-shadow: var(--vkui--elevation3);
-}
-
-.before,
-.form,
-.after {
-  display: flex;
-  align-items: flex-end;
-}
-
-.form {
-  min-block-size: 52px;
-}
-
-.formIn {
-  position: relative;
-  display: flex;
-  flex: 1;
-  min-inline-size: 0;
-}
-
-.textarea {
-  box-sizing: border-box;
-  flex: 1;
-  inline-size: 100%;
-  min-inline-size: 0;
-  max-block-size: 120px;
-  margin: 0;
-  color: var(--vkui--color_text_primary);
-  -webkit-appearance: none;
-          appearance: none;
-  resize: none;
-  background: transparent;
-  border: 0;
-}
-
-.textarea:placeholder-shown {
-  text-overflow: ellipsis;
-}
-
-.textarea::placeholder {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--vkui--color_text_subhead);
-  white-space: nowrap;
-  /* Для Firefox */
-  opacity: 1;
-}
-
-.textarea:focus {
-  outline: var(--vkui_internal--outline-reset);
-}
-
-.inlineAfter {
-  display: flex;
-  align-items: flex-end;
-}
-
-.before {
-  padding-inline-start: 4px;
-}
-
-.after {
-  padding-inline-end: 4px;
-}
-
-.textarea {
-  block-size: 52px;
-  padding-block: 16px;
-  padding-inline: 12px;
-}
-
-/**
- * iOS
- */
-
-.ios {
-  background: var(--vkui--color_background_content);
-}
-
-.ios .before,
-.ios .after {
-  padding-block: 0;
-  padding-inline: 4px;
-}
-
-.ios .formIn {
-  box-sizing: border-box;
-  margin-block: 8px;
-  margin-inline: 0;
-  background-color: var(--vkui--color_write_bar_input_background);
-  border: var(--vkui--size_border--regular) solid var(--vkui--color_write_bar_input_border);
-  border-radius: 18px;
-}
-
-.ios .formIn:first-child {
-  margin-inline-start: 12px;
-}
-
-.ios .inlineAfter {
-  /* чтобы правильно выровнять иконку, нужно учитывать border */
-  --vkui_internal--writebar-right-gap: calc(-1 * var(--vkui--size_border--regular));
-  --vkui_internal--writebar-vertical-gap: calc(var(--vkui_internal--writebar-right-gap) - 8px);
-
-  margin-block: var(--vkui_internal--writebar-vertical-gap);
-  margin-inline-end: var(--vkui_internal--writebar-right-gap);
-}
-
-.ios .textarea {
-  block-size: 36px;
-  padding-block: 6px;
-  padding-inline: 12px 0;
-}

package/src/components/WriteBar/WriteBar.module.css

@@ -1,116 +0,0 @@
-.host {
-  background: var(--vkui--color_background_contrast_themed);
-}
-
-.shadow {
-  box-shadow: var(--vkui--elevation3);
-}
-
-.before,
-.form,
-.after {
-  display: flex;
-  align-items: flex-end;
-}
-
-.form {
-  min-block-size: 52px;
-}
-
-.formIn {
-  position: relative;
-  display: flex;
-  flex: 1;
-  min-inline-size: 0;
-}
-
-.textarea {
-  box-sizing: border-box;
-  flex: 1;
-  inline-size: 100%;
-  min-inline-size: 0;
-  max-block-size: 120px;
-  margin: 0;
-  color: var(--vkui--color_text_primary);
-  appearance: none;
-  resize: none;
-  background: transparent;
-  border: 0;
-}
-
-.textarea:placeholder-shown {
-  text-overflow: ellipsis;
-}
-
-.textarea::placeholder {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--vkui--color_text_subhead);
-  white-space: nowrap;
-  /* Для Firefox */
-  opacity: 1;
-}
-
-.textarea:focus {
-  outline: var(--vkui_internal--outline-reset);
-}
-
-.inlineAfter {
-  display: flex;
-  align-items: flex-end;
-}
-
-.before {
-  padding-inline-start: 4px;
-}
-
-.after {
-  padding-inline-end: 4px;
-}
-
-.textarea {
-  block-size: 52px;
-  padding-block: 16px;
-  padding-inline: 12px;
-}
-
-/**
- * iOS
- */
-.ios {
-  background: var(--vkui--color_background_content);
-}
-
-.ios .before,
-.ios .after {
-  padding-block: 0;
-  padding-inline: 4px;
-}
-
-.ios .formIn {
-  box-sizing: border-box;
-  margin-block: 8px;
-  margin-inline: 0;
-  background-color: var(--vkui--color_write_bar_input_background);
-  border: var(--vkui--size_border--regular) solid var(--vkui--color_write_bar_input_border);
-  border-radius: 18px;
-}
-
-.ios .formIn:first-child {
-  margin-inline-start: 12px;
-}
-
-.ios .inlineAfter {
-  /* чтобы правильно выровнять иконку, нужно учитывать border */
-  --vkui_internal--writebar-right-gap: calc(-1 * var(--vkui--size_border--regular));
-  --vkui_internal--writebar-vertical-gap: calc(var(--vkui_internal--writebar-right-gap) - 8px);
-
-  margin-block: var(--vkui_internal--writebar-vertical-gap);
-  margin-inline-end: var(--vkui_internal--writebar-right-gap);
-}
-
-.ios .textarea {
-  block-size: 36px;
-  padding-block: 6px;
-  padding-inline: 12px 0;
-}

package/src/components/WriteBar/WriteBar.module.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["./WriteBar.module.css"],"names":["host","shadow","before","form","after","formIn","textarea","inlineAfter","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,Q,WAJA;AAAA,E,aAQAC,Q,WARA;AAAA,E,aASAC,M,WATA;AAAA,E,aAUAC,O,WAVA;AAAA,E,aAeAD,M,WAfA;AAAA,E,aAmBAE,Q,WAnBA;AAAA,E,aA0BAC,U,WA1BA;AAAA,E,aAwCAA,U,WAxCA;AAAA,E,aA4CAA,U,WA5CA;AAAA,E,aAqDAA,U,WArDA;AAAA,E,aAyDAC,a,WAzDA;AAAA,E,aA8DAL,Q,WA9DA;AAAA,E,aAkEAE,O,WAlEA;AAAA,E,aAsEAE,U,WAtEA;AAAA,E,aA+EAE,K,WA/EA;AAAA,E,aAmFAA,K,WAnFA;AAAA,E,aAmFKN,Q,WAnFL;AAAA,E,aAoFAM,K,WApFA;AAAA,E,aAoFKJ,O,WApFL;AAAA,E,aAyFAI,K,WAzFA;AAAA,E,aAyFKH,Q,WAzFL;AAAA,E,aAkGAG,K,WAlGA;AAAA,E,aAkGKH,Q,WAlGL;AAAA,E,aAsGAG,K,WAtGA;AAAA,E,aAsGKD,a,WAtGL;AAAA,E,aA+GAC,K,WA/GA;AAAA,E,aA+GKF,U,WA/GL;AAAA;AAAA","file":"WriteBar.module.css.d.ts","sourceRoot":""}