fix: import eventemitter by default #1186

packages/g-lite/src/camera/Camera.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 import type { vec2 } from 'gl-matrix';
 import { mat3, mat4, quat, vec3, vec4 } from 'gl-matrix';
 import type { Canvas } from '../Canvas';

packages/g-lite/src/dom/EventTarget.ts

@@ -1,5 +1,5 @@
 import { isBoolean, isObject } from '@antv/util';
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 import { isFunction } from '../utils';
 import { CustomEvent } from './CustomEvent';
 import { FederatedEvent } from './FederatedEvent';

packages/g-lite/src/services/EventService.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 import { mat4, vec3 } from 'gl-matrix';
 import type { HTML } from '../display-objects';
 import { Element } from '../dom/Element';

packages/g-mobile-canvas-element/src/CanvasElement.ts

@@ -1,5 +1,5 @@
 import type { CanvasLike } from '@antv/g-lite';
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 
 class CanvasElement implements CanvasLike {
   width: number;

packages/g-plugin-annotation/src/AnnotationPlugin.ts

@@ -7,7 +7,7 @@ import type {
   RenderingPlugin,
   RenderingPluginContext,
 } from '@antv/g-lite';
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 import { DrawerEvent, DrawerTool } from './constants/enum';
 import { CircleDrawer } from './drawers/circle';
 import { PolygonDrawer } from './drawers/polygon';

packages/g-plugin-device-renderer/src/geometries/BufferGeometry.ts

@@ -1,5 +1,5 @@
 import { AABB } from '@antv/g-lite';
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 import type { Mesh } from '../Mesh';
 import type { Buffer, Device, InputLayoutDescriptor, VertexBufferFrequency } from '../platform';
 import { BufferFrequencyHint, BufferUsage, Format, PrimitiveTopology } from '../platform';

packages/g-plugin-device-renderer/src/materials/Material.ts

@@ -1,6 +1,6 @@
 import type { Tuple4Number } from '@antv/g-lite';
 import { isNil } from '@antv/util';
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 import type { Mesh } from '../Mesh';
 import type {
   BlendFactor,

packages/g-plugin-webgl-device/src/platform/ResourceBase.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 import type { Disposable, Resource, ResourceBase } from '@antv/g-plugin-device-renderer';
 import type { Device_GL } from './Device';
 

packages/g-plugin-webgpu-device/src/platform/ResourceBase.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from 'eventemitter3';
+import EventEmitter from 'eventemitter3';
 import type { Disposable, ResourceBase, ResourceType } from '@antv/g-plugin-device-renderer';
 import type { IDevice_WebGPU } from './interfaces';
 

packages/site/examples/ecosystem/lottie/demo/ant.js

@@ -0,0 +1,84 @@
+import { Canvas, CanvasEvent } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Renderer as CanvaskitRenderer } from '@antv/g-canvaskit';
+import { loadAnimation } from '@antv/g-lottie-player';
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Renderer as WebGPURenderer } from '@antv/g-webgpu';
+import * as lil from 'lil-gui';
+import Stats from 'stats.js';
+import * as d3 from 'd3';
+
+/**
+ * @see https://lottiefiles.github.io/lottie-docs/concepts/#transform
+ */
+
+// create a renderer
+const canvasRenderer = new CanvasRenderer();
+const svgRenderer = new SVGRenderer();
+const webglRenderer = new WebGLRenderer();
+const webgpuRenderer = new WebGPURenderer();
+const canvaskitRenderer = new CanvaskitRenderer({
+  wasmDir: '/',
+  fonts: [
+    {
+      name: 'sans-serif',
+      url: '/NotoSans-Regular.ttf',
+    },
+  ],
+});
+
+// create a canvas
+const canvas = new Canvas({
+  container: 'container',
+  width: 600,
+  height: 500,
+  renderer: canvasRenderer,
+});
+
+canvas.addEventListener(CanvasEvent.READY, async () => {
+  const data = await d3.json('/lottie/ant.json');
+  const animation = loadAnimation(data, { loop: true });
+  const wrapper = animation.render(canvas);
+});
+
+// stats
+const stats = new Stats();
+stats.showPanel(0);
+const $stats = stats.dom;
+$stats.style.position = 'absolute';
+$stats.style.left = '0px';
+$stats.style.top = '0px';
+const $wrapper = document.getElementById('container');
+$wrapper.appendChild($stats);
+canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
+  if (stats) {
+    stats.update();
+  }
+});
+
+// GUI
+const gui = new lil.GUI({ autoPlace: false });
+$wrapper.appendChild(gui.domElement);
+const rendererFolder = gui.addFolder('renderer');
+const rendererConfig = {
+  renderer: 'canvas',
+};
+rendererFolder
+  .add(rendererConfig, 'renderer', ['canvas', 'svg', 'webgl', 'webgpu', 'canvaskit'])
+  .onChange((rendererName) => {
+    let renderer;
+    if (rendererName === 'canvas') {
+      renderer = canvasRenderer;
+    } else if (rendererName === 'svg') {
+      renderer = svgRenderer;
+    } else if (rendererName === 'webgl') {
+      renderer = webglRenderer;
+    } else if (rendererName === 'webgpu') {
+      renderer = webgpuRenderer;
+    } else if (rendererName === 'canvaskit') {
+      renderer = canvaskitRenderer;
+    }
+    canvas.setRenderer(renderer);
+  });
+rendererFolder.open();

packages/site/examples/ecosystem/lottie/demo/meta.json

@@ -26,6 +26,13 @@
         "en": "Lottie Player - Displaying assets"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/raptor/1667977747890/A_NVmwSb89Y3kAAAAAAAAAAAAAARQnAQ.gif"
+    },
+    {
+      "filename": "ant.js",
+      "title": {
+        "zh": "蚂蚁形象",
+        "en": "Ant"
+      }
     }
   ]
 }