In the process of continuous iteration, it is difficult to think through all the features that need to be supported at the beginning of development, and sometimes it is necessary to use the power of the community to continuously produce new feature points or optimize existing features. This requires the system to have a certain degree of scalability. The plug-in pattern is often the approach of choice, with the following advantages.

• Single responsibility. Plug-in code is decoupled from the system code in engineering, can be developed independently, and the complexity of the internal logic of the framework isolated to developers.
• Can be dynamically introduced and configured.

Plugin systems can be found in a wide range of popular software, such as webpack, VS Code, and Chrome.

To make the rendering engine also well extensible, we also have a built-in plugin system that allows different renderers to extend their capabilities at runtime. The full set of currently supported plugins is listed below.

Set of plug-ins

Extensible plug-in mechanism and rich set of plug-ins：

• Rendering Related
  • g-plugin-canvas-renderer Rendering 2D graphics based on Canvas2D.
  • g-plugin-svg-renderer Rendering 2D graphics based on SVG.
  • g-plugin-device-renderer Rendering 2D graphics based on GPUDevice.
  • g-plugin-html-renderer Rendering DOM with HTML.
  • g-plugin-3d Extended 3D capabilities.
  • g-plugin-rough-canvas-renderer Perform hand-drawn style rendering with rough.js and Canvs2D.
  • g-plugin-rough-svg-renderer Perform hand-drawn style rendering with rough.js and SVG.
  • g-plugin-canvaskit-renderer Rendering 2D graphics based on Skia.
• Picking
  • g-plugin-canvas-picker Do picking with Canvas2D and mathematical calculations.
  • g-plugin-svg-picker Do picking with SVG and DOM API.
• Interaction
  • g-plugin-dom-interaction Binds event listeners with DOM API.
  • g-plugin-control Provides camera interaction for 3D scenes.
  • g-plugin-dragndrop Provides Drag 'n' Drop based on PointerEvents.
  • g-plugin-annotation Perform transformations on graphics in an interactive form like Fabric.js and Konva.js.
• Physics Engine
  • g-plugin-box2d Based on Box2D.
  • g-plugin-matterjs Based on matter.js.
  • g-plugin-physx Based on PhysX.
• Layout Engine
  • g-plugin-yoga Provides Flex layout capabilities based on Yoga.
• GPGPU
  • g-plugin-gpgpu Provides GPGPU capabilities based on WebGPU.
• CSS Selector
  • g-plugin-css-select Supports for retrieval in the scene graph using CSS selectors.
• A11y
  • g-plugin-a11y Provides accessibility features.

CDN

Import the core and renderer code in UMD format first, then import plugin code in the same way.

<script src="https://unpkg.com/@antv/g-plugin-rough-canvas-renderer@1.7.16/dist/index.umd.min.js"></script>

Then we can use plugin under the namespace window.G, take g-plugin-rough-canvas-renderer as an example:

const plugin = new window.G.RoughCanvasRenderer.Plugin();

CodeSandbox Example

NPM Module

Install core and renderer from NPM first, then we can install plugins in the same way. Take g-plugin-rough-canvas-renderer as an example:

npm install @antv/g-plugin-rough-canvas-renderer --save

Then we can registerPlugin on renderer:

import { Plugin } from '@antv/g-plugin-rough-canvas-renderer';

renderer.registerPlugin(new Plugin());

Relationship with Renderer

These renderers essentially consist of a set of plug-ins through which their capabilities can also be extended.

renderer.registerPlugin(new Plugin());