feat: annotation pin

__mocks__/comments.mock.ts

@@ -1,6 +1,10 @@
 export const MOCK_ANNOTATION = {
   uuid: 'any_uuid',
-  position: 'any_position',
+  position: JSON.stringify({
+    x: 100,
+    y: 100,
+    type: 'canvas',
+  }),
   resolved: false,
   comments: [
     {

lib.md

@@ -3,8 +3,9 @@
 ```ts
 import { SuperViz } from '@superviz/sdk';
 import { VideoComponent } from '@superviz/sdk/components/video.ts';
-import { CommentsComponent } from '@superviz/sdk/components/comments.ts';
-import { MatterportComponent } from '@superviz/matterport';
+import { CommentsComponent, CanvasAdapter } from '@superviz/sdk/components/comments.ts';
+import { Presence3D, CommentsAdapter } from '@superviz/matterport';
+import { Presence3D, CommentsAdapter } from '@superviz/three';
 import { PresenceComponent } from '@superviz/sdk/components/presence.ts';
 
 const SuperViz = await Manager(DEVELOPER_KEY, {
@@ -21,10 +22,23 @@ const SuperViz = await Manager(DEVELOPER_KEY, {
 
 const video = new VideoComponent();
 
+const mpPresence = new Presence3D(mpInstance);
+SuperViz.addComponent(mpPresence);
+
+// Initialize comments with canvas
+const canvasAdapter = new CanvasAdapter('canvas-id');
+const comments = new CommentsComponent(canvasAdapter);
+SuperViz.addComponent(comments);
+
+// Initialize coments with matterport 3d component
+const canvasAdapter = new CommentsAdapter(mpInstance);
+const comments = new CommentsComponent(canvasAdapter);
+SuperViz.addComponent(comments);
+
+// const mpCommentsAdapter = new CommentsAdapter(mpInstance);
+
 // add configs
 SuperViz.addComponent(video);
-SuperViz.addComponent(presence);
-SuperViz.addComponent(comments);
 SuperViz.addComponent(mpPresence);
 
 // PubSub

src/components/comments/canvas-pin-adapter/index.test.ts

@@ -0,0 +1,204 @@
+import { MOCK_ANNOTATION } from '../../../../__mocks__/comments.mock';
+
+import { CanvasPinAdapter } from '.';
+
+describe('CanvasPinAdapter', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <canvas id="canvas"></canvas>
+    `;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should create a new instance of CanvasPinAdapter', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+    expect(canvasPinAdapter).toBeInstanceOf(CanvasPinAdapter);
+  });
+
+  test('should throw an error if no canvas element is found', () => {
+    expect(() => new CanvasPinAdapter('not-found-canvas')).toThrowError(
+      'Canvas with id not-found-canvas not found',
+    );
+  });
+
+  test('should add event listeners to the canvas element', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+    const addEventListenerSpy = jest.spyOn(canvasPinAdapter['canvas'], 'addEventListener');
+    canvasPinAdapter['addListeners']();
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(4);
+  });
+
+  test('should destroy the canvas pin adapter', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    const removeEventListenerSpy = jest.spyOn(canvasPinAdapter['canvas'], 'removeEventListener');
+
+    canvasPinAdapter.destroy();
+
+    expect(canvasPinAdapter['mouseElement']).toBeNull();
+    expect(removeEventListenerSpy).toHaveBeenCalledTimes(4);
+  });
+
+  test('when mouse enters canvas, should create a new mouse element', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+    const mock = jest.fn().mockImplementation(() => document.createElement('div'));
+    canvasPinAdapter['createMouseElement'] = mock;
+
+    canvasPinAdapter['canvas'].dispatchEvent(new MouseEvent('mouseenter'));
+
+    expect(canvasPinAdapter['createMouseElement']).toHaveBeenCalledTimes(1);
+  });
+
+  test('when mouse leaves canvas, should remove the mouse element', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter['canvas'].dispatchEvent(new MouseEvent('mouseenter'));
+    canvasPinAdapter['canvas'].dispatchEvent(new MouseEvent('mouseout'));
+
+    expect(canvasPinAdapter['mouseElement']).toBeNull();
+  });
+
+  test('when mouse clicks canvas', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter['canvas'].dispatchEvent(new MouseEvent('mouseenter'));
+    canvasPinAdapter['onClick']({ x: 100, y: 100 } as unknown as MouseEvent);
+  });
+
+  test('should remove annotation pin', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter.updateAnnotations([MOCK_ANNOTATION]);
+
+    expect(canvasPinAdapter['pins'].size).toEqual(1);
+
+    canvasPinAdapter.removeAnnotationPin(MOCK_ANNOTATION.uuid);
+
+    expect(canvasPinAdapter['pins'].size).toEqual(0);
+  });
+
+  test('should not remove annotation pin if it does not exist', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter.updateAnnotations([MOCK_ANNOTATION]);
+
+    expect(canvasPinAdapter['pins'].size).toEqual(1);
+
+    canvasPinAdapter.removeAnnotationPin('not_found_uuid');
+
+    expect(canvasPinAdapter['pins'].size).toEqual(1);
+  });
+
+  test('should not render annotations if the adapter is not active', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(false);
+
+    canvasPinAdapter.updateAnnotations([MOCK_ANNOTATION]);
+
+    expect(canvasPinAdapter['pins'].size).toEqual(0);
+  });
+
+  test('should remove pins when isActive is turned to false', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter.updateAnnotations([MOCK_ANNOTATION]);
+
+    expect(canvasPinAdapter['pins'].size).toEqual(1);
+
+    canvasPinAdapter.setActive(false);
+
+    expect(canvasPinAdapter['pins'].size).toEqual(0);
+  });
+
+  test('should not render annotation if the coordinate type is not canvas', () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter.updateAnnotations([
+      {
+        ...MOCK_ANNOTATION,
+        uuid: 'not-canvas',
+        position: JSON.stringify({
+          x: 100,
+          y: 100,
+          type: 'not-canvas',
+        }),
+      },
+    ]);
+
+    expect(canvasPinAdapter['pins'].has('not-canvas')).toBeFalsy();
+  });
+
+  test('should select annotation pin', async () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter.updateAnnotations([MOCK_ANNOTATION]);
+
+    expect(canvasPinAdapter['selectedPin']).not.toBeDefined();
+
+    canvasPinAdapter['annotationSelected'](
+      new CustomEvent('select-annotation', {
+        detail: {
+          uuid: MOCK_ANNOTATION.uuid,
+        },
+      }),
+    );
+
+    expect(
+      [...canvasPinAdapter['pins'].values()].some((pin) => pin.hasAttribute('active')),
+    ).toBeTruthy();
+  });
+
+  test('should not select annotation pin if uuid is not defined', async () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter.updateAnnotations([MOCK_ANNOTATION]);
+
+    expect(canvasPinAdapter['selectedPin']).not.toBeDefined();
+
+    canvasPinAdapter['annotationSelected'](
+      new CustomEvent('select-annotation', {
+        detail: {
+          uuid: undefined,
+        },
+      }),
+    );
+
+    expect(
+      [...canvasPinAdapter['pins'].values()].some((pin) => pin.hasAttribute('active')),
+    ).toBeFalsy();
+  });
+
+  test('should not select annotation pin if it does not exist', async () => {
+    const canvasPinAdapter = new CanvasPinAdapter('canvas');
+    canvasPinAdapter.setActive(true);
+
+    canvasPinAdapter.updateAnnotations([MOCK_ANNOTATION]);
+
+    expect(canvasPinAdapter['selectedPin']).not.toBeDefined();
+
+    canvasPinAdapter['annotationSelected'](
+      new CustomEvent('select-annotation', {
+        detail: {
+          uuid: 'not-found',
+        },
+      }),
+    );
+
+    expect(
+      [...canvasPinAdapter['pins'].values()].some((pin) => pin.hasAttribute('active')),
+    ).toBeFalsy();
+  });
+});