fabric 6.2.0 → 6.3.0

package/dist-extensions/src/util/typeAssertions.d.ts

@@ -0,0 +1,13 @@
+import type { FabricObject } from '../shapes/Object/Object';
+import type { TFiller } from '../typedefs';
+import type { FabricText } from '../shapes/Text/Text';
+import type { Pattern } from '../Pattern';
+import type { Path } from '../shapes/Path';
+import type { ActiveSelection } from '../shapes/ActiveSelection';
+export declare const isFiller: (filler: TFiller | string | null) => filler is TFiller;
+export declare const isSerializableFiller: (filler: TFiller | string | null) => filler is TFiller;
+export declare const isPattern: (filler: TFiller) => filler is Pattern;
+export declare const isTextObject: (fabricObject?: FabricObject) => fabricObject is FabricText;
+export declare const isPath: (fabricObject?: FabricObject) => fabricObject is Path;
+export declare const isActiveSelection: (fabricObject?: FabricObject) => fabricObject is ActiveSelection;
+//# sourceMappingURL=typeAssertions.d.ts.map

package/dist-extensions/src/util/typeAssertions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeAssertions.d.ts","sourceRoot":"","sources":["../../../src/util/typeAssertions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,eAAO,MAAM,QAAQ,WACX,OAAO,GAAG,MAAM,GAAG,IAAI,KAC9B,MAAM,IAAI,OAEZ,CAAC;AAEF,eAAO,MAAM,oBAAoB,WACvB,OAAO,GAAG,MAAM,GAAG,IAAI,KAC9B,MAAM,IAAI,OAEZ,CAAC;AAEF,eAAO,MAAM,SAAS,WAAY,OAAO,KAAG,MAAM,IAAI,OAIrD,CAAC;AAEF,eAAO,MAAM,YAAY,kBACR,YAAY,KAC1B,YAAY,IAAI,UAKlB,CAAC;AAEF,eAAO,MAAM,MAAM,kBAAmB,YAAY,KAAG,YAAY,IAAI,IAOpE,CAAC;AAEF,eAAO,MAAM,iBAAiB,kBACb,YAAY,KAC1B,YAAY,IAAI,eACyC,CAAC"}

package/eslint.config.mjs

@@ -0,0 +1,108 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: [
+      'src/mixins/eraser_brush.mixin.ts',
+      'src/util/lang_class.ts',
+      'src/parkinglot',
+    ],
+  },
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+      globals: {
+        console: 'readonly',
+      },
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: './',
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/consistent-type-exports': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-restricted-types': 1,
+      '@typescript-eslint/ban-ts-comment': 1,
+
+      'no-restricted-globals': [
+        'error',
+        {
+          name: 'window',
+          message: 'Use fabric window or other utils instead.',
+        },
+        {
+          name: 'document',
+          message: 'Use fabric document or other utils instead.',
+        },
+      ],
+
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: '[callee.object.name="Math"][callee.property.name="hypot"]',
+          message:
+            '`Math.hypot` is not accurate on chrome, use `Math.sqrt` instead.\nSee https://stackoverflow.com/questions/62931950/different-results-of-math-hypot-on-chrome-and-firefox',
+        },
+        {
+          selector: 'VariableDeclarator[init.name="Math"]',
+          message:
+            'Aliasing or destructing `Math` is not allowed due to restrictions on `Math.hypot` usage.',
+        },
+        {
+          selector: '[callee.object.name="console"]',
+          message: 'Use the `log` util',
+        },
+        {
+          selector: 'NewExpression[callee.name="Error"]',
+          message: 'Use `FabricError`',
+        },
+      ],
+
+      '@typescript-eslint/no-explicit-any': ['warn'],
+
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+        },
+      ],
+
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          ignoreRestSiblings: true,
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.ts'],
+  },
+];

package/extensions/README.MD

@@ -0,0 +1,27 @@
+# FabricJS extensions or plugins
+
+Extensions and/or plugins are all those features that do no have a place in the library itself.
+FabricJS is a rendering library with an interactive layer and serialization support and has already a lot of features and needs to avoid more scope creep.
+
+Extension are all those pieces of codes that are more features and less api, as examples:
+
+- filters with a niche use case
+- high level interactions like guidelines or snapping
+- high level objects that pertain to UX
+- Controls sets that could be built with the api but are pre-built here so developers have a reference implementation
+
+## Requirements for a feature
+
+A feature in order to be merged needs to have
+
+- Unit tests
+- An e2e test if there is an interaction flow
+- A small Readme file that explain how to use it and what to expect from it
+
+## How to use features
+
+Each feature is built how is built.
+It may be a class or a function that wrap an existing class, or a series of functions to use in a particular way.
+Refer to each README file for explanations
+
+Feature are not built in the main FabricJS bundle and are available both in form of ES module or an extension bundle.

package/extensions/aligning_guidelines/README.MD

@@ -0,0 +1,22 @@
+# Aligning guidelines
+
+## How to use it
+
+```ts
+import { initAligningGuidelines } from 'fabric/extensions';
+
+const config = {
+  /** At what distance from the shape does alignment begin? */
+  margin: 4,
+  /** Aligning line dimensions */
+  width: 1,
+  /** Aligning line color */
+  color: 'rgb(255,0,0,0.9)',
+};
+
+const deactivate = initAligningGuidelines(myCanvas, options);
+
+// in order to disable alignment guidelines later:
+
+deactivate();
+```

package/extensions/aligning_guidelines/constant.ts

@@ -0,0 +1,10 @@
+import type { AligningLineConfig } from './typedefs';
+
+export const aligningLineConfig: AligningLineConfig = {
+  /** At what distance from the shape does alignment begin? */
+  margin: 4,
+  /** Aligning line dimensions */
+  width: 1,
+  /** Aligning line color */
+  color: 'rgb(255,0,0,0.9)',
+};

package/extensions/aligning_guidelines/index.ts

@@ -0,0 +1,166 @@
+import type {
+  BasicTransformEvent,
+  Canvas,
+  FabricObject,
+  TBBox,
+  TPointerEvent,
+} from 'fabric';
+import { Point, util } from 'fabric';
+import {
+  collectHorizontalPoint,
+  collectVerticalPoint,
+} from './util/collect-point';
+import {
+  drawHorizontalLine,
+  drawPointList,
+  drawVerticalLine,
+} from './util/draw';
+import { getObjectsByTarget } from './util/get-objects-by-target';
+import { collectLine } from './util/collect-line';
+import type {
+  AligningLineConfig,
+  HorizontalLine,
+  VerticalLine,
+} from './typedefs';
+import { aligningLineConfig } from './constant';
+
+type TransformEvent = BasicTransformEvent<TPointerEvent> & {
+  target: FabricObject;
+};
+
+export type { AligningLineConfig } from './typedefs';
+
+export function initAligningGuidelines(
+  canvas: Canvas,
+  options: Partial<AligningLineConfig> = {},
+) {
+  Object.assign(aligningLineConfig, options);
+
+  const horizontalLines = new Set<string>();
+  const verticalLines = new Set<string>();
+  let onlyDrawPoint = false;
+  const cacheMap = new Map<string, [TBBox, Point[]]>();
+
+  const getCaCheMapValue = (object: FabricObject) => {
+    const cacheKey = [
+      object.calcTransformMatrix().toString(),
+      object.width,
+      object.height,
+    ].join();
+    const cacheValue = cacheMap.get(cacheKey);
+    if (cacheValue) return cacheValue;
+    const coords = object.getCoords();
+    const rect = util.makeBoundingBoxFromPoints(coords);
+    const value: [TBBox, Point[]] = [rect, coords];
+    cacheMap.set(cacheKey, value);
+    return value;
+  };
+
+  function moving(e: TransformEvent) {
+    const activeObject = e.target;
+    activeObject.setCoords();
+    onlyDrawPoint = false;
+    verticalLines.clear();
+    horizontalLines.clear();
+
+    const objects = getObjectsByTarget(activeObject);
+    const activeObjectRect = activeObject.getBoundingRect();
+
+    for (const object of objects) {
+      const objectRect = getCaCheMapValue(object)[0];
+      const { vLines, hLines } = collectLine({
+        activeObject,
+        activeObjectRect,
+        objectRect,
+      });
+      vLines.forEach((o) => {
+        verticalLines.add(JSON.stringify(o));
+      });
+      hLines.forEach((o) => {
+        horizontalLines.add(JSON.stringify(o));
+      });
+    }
+  }
+
+  function scalingOrResizing(e: TransformEvent) {
+    // br bl tr tl mb ml mt mr
+    const activeObject = e.target;
+    activeObject.setCoords();
+    const isScale = String(e.transform.action).startsWith('scale');
+    verticalLines.clear();
+    horizontalLines.clear();
+
+    const objects = getObjectsByTarget(activeObject);
+    let corner = e.transform.corner;
+    if (activeObject.flipX) corner = corner.replace('l', 'r').replace('r', 'l');
+    if (activeObject.flipY) corner = corner.replace('t', 'b').replace('b', 't');
+    let index = ['tl', 'tr', 'br', 'bl', 'mt', 'mr', 'mb', 'ml'].indexOf(
+      corner,
+    );
+    if (index == -1) return;
+    onlyDrawPoint = index > 3;
+    if (onlyDrawPoint) {
+      const angle = activeObject.getTotalAngle();
+      if (angle % 90 != 0) return;
+      index -= 4;
+    }
+    let point = activeObject.getCoords()[index];
+    for (const object of objects) {
+      const [rect, coords] = getCaCheMapValue(object);
+      const center = new Point(
+        rect.left + rect.width / 2,
+        rect.top + rect.height / 2,
+      );
+      const list = [...coords, center];
+      const props = { activeObject, point, list, isScale, index };
+      const vLines = collectVerticalPoint(props);
+      const hLines = collectHorizontalPoint(props);
+      vLines.forEach((o) => {
+        verticalLines.add(JSON.stringify(o));
+      });
+      hLines.forEach((o) => {
+        horizontalLines.add(JSON.stringify(o));
+      });
+      if (vLines.length || hLines.length)
+        point = activeObject.getCoords()[index];
+    }
+  }
+
+  function beforeRender() {
+    canvas.clearContext(canvas.contextTop);
+  }
+  function afterRender() {
+    if (onlyDrawPoint) {
+      const list: Array<VerticalLine | HorizontalLine> = [];
+      for (const v of verticalLines) list.push(JSON.parse(v));
+      for (const h of horizontalLines) list.push(JSON.parse(h));
+      drawPointList(canvas, list);
+    } else {
+      for (const v of verticalLines) drawVerticalLine(canvas, JSON.parse(v));
+      for (const h of horizontalLines)
+        drawHorizontalLine(canvas, JSON.parse(h));
+    }
+  }
+  function mouseUp() {
+    verticalLines.clear();
+    horizontalLines.clear();
+    cacheMap.clear();
+    canvas.requestRenderAll();
+  }
+
+  canvas.on('object:resizing', scalingOrResizing);
+  canvas.on('object:scaling', scalingOrResizing);
+  canvas.on('object:moving', moving);
+  canvas.on('before:render', beforeRender);
+  canvas.on('after:render', afterRender);
+  canvas.on('mouse:up', mouseUp);
+
+  return () => {
+    canvas.off('object:resizing', scalingOrResizing);
+    canvas.off('object:scaling', scalingOrResizing);
+    canvas.off('object:moving', moving);
+    canvas.off('before:render', beforeRender);
+    canvas.off('after:render', afterRender);
+    canvas.off('mouse:up', mouseUp);
+  };
+}

package/extensions/aligning_guidelines/typedefs.ts

@@ -0,0 +1,36 @@
+export type VerticalLine = {
+  x: number;
+  y1: number;
+  y2: number;
+};
+
+export type HorizontalLine = {
+  y: number;
+  x1: number;
+  x2: number;
+};
+
+export type VerticalLineProps = {
+  x: number;
+  objectY: number;
+  objectHeight: number;
+  activeObjectY: number;
+  activeObjectHeight: number;
+};
+
+export type HorizontalLineProps = {
+  y: number;
+  objectX: number;
+  objectWidth: number;
+  activeObjectX: number;
+  activeObjectWidth: number;
+};
+
+export type AligningLineConfig = {
+  /** At what distance from the shape does alignment begin? */
+  margin: number;
+  /** Aligning line dimensions */
+  width: number;
+  /** Aligning line color */
+  color: string;
+};

package/extensions/aligning_guidelines/util/basic.spec.ts

@@ -0,0 +1,31 @@
+import { getDistance, setPositionDir } from './basic';
+import { Rect } from '../../../src/shapes/Rect';
+import { Point } from '../../../src/Point';
+
+describe('getDistance', () => {
+  it('returns the distabnce between the 2 numbers', () => {
+    expect(getDistance(4, 6)).toBe(2);
+    expect(getDistance(6, 4)).toBe(2);
+    expect(getDistance(-6, -4)).toBe(2);
+    expect(getDistance(6, -4)).toBe(10);
+  });
+});
+
+describe('setPositionDir', () => {
+  it('set the position of the object', () => {
+    const rect = new Rect({
+      width: 100,
+      height: 50,
+      originX: 'left',
+      originY: 'top',
+      left: 100,
+      top: 100,
+    });
+    setPositionDir(rect, new Point(10, 15), 'x');
+    expect(rect.left).toEqual(-40.5);
+    expect(rect.top).toEqual(100);
+    setPositionDir(rect, new Point(10, 15), 'y');
+    expect(rect.left).toEqual(-40.5);
+    expect(rect.top).toEqual(-10.5);
+  });
+});

package/extensions/aligning_guidelines/util/basic.ts

@@ -0,0 +1,20 @@
+import type { FabricObject, Point } from 'fabric';
+
+export function getDistance(a: number, b: number) {
+  return Math.abs(a - b);
+}
+
+export function setPositionDir(
+  target: FabricObject,
+  pos: Point,
+  dir: 'x' | 'y',
+) {
+  const center = target.translateToCenterPoint(pos, 'center', 'center');
+  const position = target.translateToOriginPoint(
+    center,
+    target.originX,
+    target.originY,
+  );
+  if (dir == 'x') target.setX(position.x);
+  else target.setY(position.y);
+}

package/extensions/aligning_guidelines/util/collect-line.ts

@@ -0,0 +1,172 @@
+import type { FabricObject, TBBox } from 'fabric';
+import { Point } from 'fabric';
+import type { HorizontalLine, VerticalLine } from '../typedefs';
+import { aligningLineConfig } from '../constant';
+import { getDistance, setPositionDir } from './basic';
+
+type CollectLineProps = {
+  activeObject: FabricObject;
+  activeObjectRect: TBBox;
+  objectRect: TBBox;
+};
+
+export function collectLine(props: CollectLineProps) {
+  const aligningLineMargin = aligningLineConfig.margin;
+  const { activeObject, activeObjectRect, objectRect } = props;
+  const list = makeLineByRect(objectRect);
+  const aList = makeLineByRect(activeObjectRect);
+  const margin = aligningLineMargin / (activeObject.canvas?.getZoom() ?? 1);
+  const opts = { target: activeObject, list, aList, margin };
+  const vLines = collectVerticalLine(opts);
+  const hLines = collectHorizontalLine(opts);
+
+  return { vLines, hLines };
+}
+
+type CollectItemLineProps = {
+  target: FabricObject;
+  list: LineProps[];
+  aList: LineProps[];
+  margin: number;
+};
+function collectVerticalLine(props: CollectItemLineProps) {
+  const { target, list, aList, margin } = props;
+
+  const arr = aList.map((x) => getDistanceLine(x, list, 'x'));
+  const min = Math.min(...arr.map((x) => x.dis));
+  if (min > margin) return [];
+  const lines: VerticalLine[] = [];
+  const width = aList[0].x2 - aList[0].x;
+  const height = aList[0].y2 - aList[0].y;
+  let b = false;
+  for (let i = 0; i < arr.length; i++) {
+    const item = arr[i];
+    if (min == item.dis) {
+      const line = list[item.index];
+      const aLine = aList[item.index];
+      const x = line.x;
+      const y = aLine.y;
+
+      const y1 = Math.min(line.y, line.y2, y, aLine.y2);
+      const y2 = Math.max(line.y, line.y2, y, aLine.y2);
+      // 参考线可画多条
+      lines.push({ x, y1, y2 });
+      if (b) continue;
+      b = true;
+      // 对齐只进行一次
+      setPos({
+        target,
+        x,
+        y,
+        centerX: i - 1,
+        centerY: item.index - 1,
+        width,
+        height,
+        dir: 'x',
+      });
+      const dis = min * item.dir;
+      aList.forEach((x) => (x.x -= dis));
+    }
+  }
+  return lines;
+}
+
+function collectHorizontalLine(props: CollectItemLineProps) {
+  const { target, list, aList, margin } = props;
+
+  const arr = aList.map((x) => getDistanceLine(x, list, 'y'));
+  const min = Math.min(...arr.map((x) => x.dis));
+  if (min > margin) return [];
+  const lines: HorizontalLine[] = [];
+  const width = aList[0].x2 - aList[0].x;
+  const height = aList[0].y2 - aList[0].y;
+  let b = false;
+  for (let i = 0; i < arr.length; i++) {
+    const item = arr[i];
+    if (min == item.dis) {
+      const line = list[item.index];
+      const aLine = aList[item.index];
+      const y = line.y;
+      const x = aLine.x;
+
+      const x1 = Math.min(line.x, line.x2, x, aLine.x2);
+      const x2 = Math.max(line.x, line.x2, x, aLine.x2);
+      // 参考线可画多条
+      lines.push({ y, x1, x2 });
+      if (b) continue;
+      b = true;
+      // 对齐只进行一次
+      setPos({
+        target,
+        x,
+        y,
+        centerX: item.index - 1,
+        centerY: i - 1,
+        width,
+        height,
+        dir: 'y',
+      });
+      const dis = min * item.dir;
+      aList.forEach((x) => (x.y -= dis));
+    }
+  }
+  return lines;
+}
+
+type LineProps = {
+  x: number;
+  y: number;
+  x2: number;
+  y2: number;
+};
+function getDistanceLine(
+  target: LineProps,
+  list: LineProps[],
+  type: 'x' | 'y',
+) {
+  let dis = Infinity;
+  let index = -1;
+  /** 1正值 -1负值 */
+  let dir = 1;
+  for (let i = 0; i < list.length; i++) {
+    const v = getDistance(target[type], list[i][type]);
+    if (dis > v) {
+      index = i;
+      dis = v;
+      dir = target[type] > list[i][type] ? 1 : -1;
+    }
+  }
+  return { dis, index, dir };
+}
+
+function makeLineByRect(rect: TBBox) {
+  const { left, top, width, height } = rect;
+  const a = { x: left, y: top, x2: left + width, y2: top + height };
+  const x = left + width / 2;
+  const y = top + height / 2;
+  const b = { x, y, x2: x, y2: y };
+  const c = { x: left + width, x2: left, y: top + height, y2: top };
+
+  return [a, b, c];
+}
+
+type SnapToPixelProps = {
+  target: FabricObject;
+  x: number;
+  y: number;
+  /** -1 0 1 */
+  centerX: number;
+  /** -1 0 1 */
+  centerY: number;
+  width: number;
+  height: number;
+  dir: 'x' | 'y';
+};
+function setPos(props: SnapToPixelProps) {
+  const { target, centerX, centerY, width, height, dir } = props;
+  let { x, y } = props;
+  x -= (centerX * width) / 2;
+  y -= (centerY * height) / 2;
+  setPositionDir(target, new Point(x, y), dir);
+  target.setCoords();
+}

package/extensions/aligning_guidelines/util/collect-point.ts

@@ -0,0 +1,83 @@
+import type { FabricObject, Point, TOriginX, TOriginY } from 'fabric';
+import { aligningLineConfig } from '../constant';
+import { getDistance } from './basic';
+
+type CollectPointProps = {
+  activeObject: FabricObject;
+  point: Point;
+  list: Point[];
+  isScale: boolean;
+  index: number;
+};
+const originXArr: TOriginX[] = ['left', 'center', 'right'];
+const originYArr: TOriginY[] = ['top', 'center', 'bottom'];
+
+export function collectVerticalPoint(props: CollectPointProps) {
+  const aligningLineMargin = aligningLineConfig.margin;
+  const { activeObject, isScale, index, point, list } = props;
+  const { dis, arr } = getDistanceList(point, list, 'x');
+  const margin = aligningLineMargin / (activeObject.canvas?.getZoom() ?? 1);
+  if (dis > margin) return [];
+  let v = arr[arr.length - 1].x - point.x;
+  const dir = index == 0 || index == 3 ? -1 : 1;
+  v *= dir;
+
+  const { width, scaleX, left } = activeObject;
+  const dim = activeObject._getTransformedDimensions();
+  const sx = (v + dim.x) / dim.x;
+  if (isScale) activeObject.set('scaleX', scaleX * sx);
+  else activeObject.set('width', width * sx);
+  const dArr = [0, (v / 2) * dir, v * dir];
+  if (dir < 0) dArr.reverse();
+  const d = dArr[originXArr.indexOf(activeObject.originX)];
+  activeObject.set('left', left + d);
+  activeObject.setCoords();
+  return arr.map((item) => ({
+    x: item.x,
+    y1: item.y,
+    y2: point.y,
+  }));
+}
+
+export function collectHorizontalPoint(props: CollectPointProps) {
+  const aligningLineMargin = aligningLineConfig.margin;
+  const { activeObject, isScale, index, point, list } = props;
+  const { dis, arr } = getDistanceList(point, list, 'y');
+  const margin = aligningLineMargin / (activeObject.canvas?.getZoom() ?? 1);
+  if (dis > margin) return [];
+  let v = arr[arr.length - 1].y - point.y;
+  const dir = index < 2 ? -1 : 1;
+  v *= dir;
+
+  const { height, scaleY, top } = activeObject;
+  const dim = activeObject._getTransformedDimensions();
+  const sy = (v + dim.y) / dim.y;
+  if (isScale) activeObject.set('scaleY', scaleY * sy);
+  else activeObject.set('height', height * sy);
+  const dArr = [0, (v / 2) * dir, v * dir];
+  if (dir < 0) dArr.reverse();
+  const d = dArr[originYArr.indexOf(activeObject.originY)];
+  activeObject.set('top', top + d);
+  activeObject.setCoords();
+  return arr.map((item) => ({
+    y: item.y,
+    x1: item.x,
+    x2: point.x,
+  }));
+}
+
+function getDistanceList(point: Point, list: Point[], type: 'x' | 'y') {
+  let dis = Infinity;
+  let arr: Point[] = [];
+  for (const item of list) {
+    const v = getDistance(point[type], item[type]);
+    if (dis > v) {
+      arr = [];
+      dis = v;
+    }
+    if (dis == v) {
+      arr.push(item);
+    }
+  }
+  return { dis, arr };
+}