ddubrava · ddubrava · Aug 24, 2024 · Aug 24, 2024
diff --git a/apps/angular-yandex-maps-v3-demo/src/app/app.component.css b/apps/angular-yandex-maps-v3-demo/src/app/app.component.css
@@ -2,3 +2,37 @@
   width: 1000px;
   height: 500px;
 }
+
+.circle {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  color: #7234c3;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.7);
+  transform: translate(-50%, -50%);
+}
+
+.circle-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  height: 70%;
+  border-radius: 50%;
+  background-color: currentColor;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.circle-text {
+  font-size: 0.9em;
+  color: #fff;
+}
+
+.pin {
+  transform: translate(-50%, -100%);
+}
diff --git a/apps/angular-yandex-maps-v3-demo/src/app/app.component.html b/apps/angular-yandex-maps-v3-demo/src/app/app.component.html
@@ -193,3 +193,36 @@ <h1>Hint</h1>
     />
   </y-map>
 </div>
+
+<h1>Clusterer</h1>
+
+<div class="container">
+  <y-map
+    [props]="{
+      location: {
+        center: [-0.127696, 51.507351],
+        zoom: 10,
+      },
+    }"
+  >
+    <y-map-default-scheme-layer />
+    <y-map-default-features-layer />
+
+    <y-map-clusterer [props]="{ features }">
+      <ng-template #marker let-context>
+        <img
+          src="https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/3.0.14707275/build/static/s3-cases/markers-clusterizer/pin.svg"
+          class="pin"
+        />
+      </ng-template>
+
+      <ng-template #cluster let-context>
+        <div class="circle">
+          <div class="circle-content">
+            <span class="circle-text">{{ context.features.length }}</span>
+          </div>
+        </div>
+      </ng-template>
+    </y-map-clusterer>
+  </y-map>
+</div>
diff --git a/apps/angular-yandex-maps-v3-demo/src/app/app.component.ts b/apps/angular-yandex-maps-v3-demo/src/app/app.component.ts
@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, Component, DoCheck } from '@angular/core';
 import type { YMapFeature, YMapHotspot, YMapMarker } from '@yandex/ymaps3-types/imperative';
+import { Feature } from '@yandex/ymaps3-types/packages/clusterer';
 import {
   YConfig,
+  YMapClustererDirective,
   YMapComponent,
   YMapControlButtonDirective,
   YMapControlCommonButtonDirective,
@@ -42,6 +44,7 @@ import { config$ } from './app.config';
     YMapOpenMapsButtonDirective,
     YMapControlDirective,
     YMapHintDirective,
+    YMapClustererDirective,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -52,6 +55,28 @@ import { config$ } from './app.config';
 export class AppComponent implements DoCheck {
   lang: YConfig['lang'] = 'ru_RU';
 
+  coordinates: [number, number][] = [
+        [-0.597696, 51.907351],
+    [0.412304, 51.287351],
+    [-0.087696, 51.947351],
+    [-0.477696, 51.117351],
+    [0.152304, 51.867351],
+    [-0.627696, 51.347351],
+    [0.402304, 51.737351],
+    [-0.057696, 51.107351],
+    [-0.457696, 51.787351],
+    [0.362304, 51.627351],
+  ];
+
+  features: Feature[] = this.coordinates.map((coordinates, i) => ({
+    type: 'Feature',
+    id: i.toString(),
+    geometry: {
+      type: 'Point',
+      coordinates,
+    },
+  }));
+
   ngDoCheck() {
     console.log('do check');
   }

diff --git a/libs/angular-yandex-maps-v3/src/index.ts b/libs/angular-yandex-maps-v3/src/index.ts
@@ -4,6 +4,7 @@
 
 // Components
 export * from './lib/components/common/y-map/y-map.component';
+export * from './lib/components/common/y-map-clusterer/y-map-clusterer.di
ED4F
rective';
 export * from './lib/components/common/y-map-default-marker/y-map-default-marker.directive';
 export * from './lib/components/common/y-map-feature/y-map-feature.directive';
 export * from './lib/components/common/y-map-feature-data-source/y-map-feature-data-source.directive';

diff --git a/...andex-maps-v3/src/lib/components/common/y-map-clusterer/y-map-clusterer.directive.spec.ts b/...andex-maps-v3/src/lib/components/common/y-map-clusterer/y-map-clusterer.directive.spec.ts
@@ -0,0 +1,159 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { YMapClustererProps } from '@yandex/ymaps3-types/packages/clusterer';
+import { BehaviorSubject } from 'rxjs';
+
+import {
+  mockClusterByGrid,
+  mockYMapClustererConstructor,
+  mockYMapClustererInstance,
+  mockYMapInstance,
+} from '../../../../test-utils';
+import { Optional } from '../../../types/utilities/optional';
+import { YReadyEvent } from '../../../types/y-ready-event';
+import { YMapComponent } from '../y-map/y-map.component';
+import { YMapClustererDirective } from './y-map-clusterer.directive';
+
+type OptionalYMapClustererProps = Optional<YMapClustererProps, 'marker' | 'cluster' | 'method'>;
+
+@Component({
+  standalone: true,
+  imports: [YMapClustererDirective],
+  template: `
+    <y-map-clusterer [props]="props">
+      <ng-template #marker />
+      <ng-template #cluster />
+    </y-map-clusterer>
+  `,
+})
+class MockHostComponent {
+  @ViewChild(YMapClustererDirective, { static: true })
+  clusterer!: YMapClustererDirective;
+
+  props: OptionalYMapClustererProps = {
+    features: [
+      {
+        type: 'Feature',
+        id: '0',
+        geometry: {
+          type: 'Point',
+          coordinates: [0, 1],
+        },
+      },
+    ],
+  };
+}
+
+describe('YMapClustererDirective', () => {
+  let component: YMapClustererDirective;
+  let mockComponent: MockHostComponent;
+  let fixture: ComponentFixture<MockHostComponent>;
+
+  let mapInstance: ReturnType<typeof mockYMapInstance>;
+  let clustererInstance: ReturnType<typeof mockYMapClustererInstance>;
+  let clustererConstructorMock: jest.Mock;
+
+  beforeEach(async () => {
+    mapInstance = mockYMapInstance();
+
+    await TestBed.configureTestingModule({
+      imports: [MockHostComponent],
+      providers: [
+        {
+          provide: YMapComponent,
+          useValue: {
+            map$: new BehaviorSubject(mapInstance),
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MockHostComponent);
+    mockComponent = fixture.componentInstance;
+    component = mockComponent.clusterer;
+
+    // Two instances are returned from the import function.
+    clustererInstance = mockYMapClustererInstance();
+    clustererConstructorMock = mockYMapClustererConstructor(clustererInstance);
+    mockClusterByGrid();
+  });
+
+  afterEach(() => {
+    (window as any).ymaps3 = undefined;
+  });
+
+  it('should create entity', async () => {
+    fixture.detectChanges();
+
+    expect((window as any).ymaps3.import).toHaveBeenCalledWith('@yandex/ymaps3-clusterer@0.0.1');
+
+    // ymaps3.import is async, wait for it
+    await new Promise(process.nextTick);
+
+    expect(clustererConstructorMock).toHaveBeenCalledWith({
+      marker: expect.any(Function),
+      cluster: expect.any(Function),
+      method: [],
+      ...mockComponent.props,
+    });
+
+    expect(mapInstance.addChild).toHaveBeenCalledWith(clustererInstance);
+  });
+
+  it('should emit ready on load', async () => {
+    jest.spyOn(component.ready, 'emit');
+    fixture.detectChanges();
+
+    // ymaps3.import is async, wait for it
+    await new Promise(process.nextTick);
+
+    const readyEvent: YReadyEvent = {
+      ymaps3: (window as any).ymaps3,
+      entity: clustererInstance,
+    };
+
+    expect(component.ready.emit).toHaveBeenCalledWith(readyEvent);
+  });
+
+  it('should pass inputs to constructor', async () => {
+    const props: OptionalYMapClustererProps = {
+      features: [],
+      method: { render: () => [] },
+    };
+
+    mockComponent.props = props;
+
+    fixture.detectChanges();
+
+    // ymaps3.import is async, wait for it
+    await new Promise(process.nextTick);
+
+    expect(clustererConstructorMock).toHaveBeenCalledWith(expect.objectContaining(props));
+  });
+
+  it('should update props input after init', async () => {
+    fixture.detectChanges();
+
+    // ymaps3.import is async, wait for it
+    await new Promise(process.nextTick);
+
+    const props: OptionalYMapClustererProps = {
+      features: [
+        {
+          type: 'Feature',
+          id: '10',
+          geometry: {
+            type: 'Point',
+            coordinates: [50, 50],
+          },
+        },
+      ],
+    };
+
+    mockComponent.props = props;
+
+    fixture.detectChanges();
+
+    expect(clustererInstance.update).toHaveBeenCalledWith(expect.objectContaining(props));
+  });
+});