mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-08 20:57:08 +08:00
chore: test
This commit is contained in:
@@ -81,53 +81,6 @@ function getOpacity(elementModel: SurfaceElementModel) {
|
||||
return { opacity: `${elementModel.opacity ?? 1}` };
|
||||
}
|
||||
|
||||
/**
|
||||
* @class DomRenderer
|
||||
* Renders surface elements directly to the DOM using HTML elements and CSS.
|
||||
*
|
||||
* This renderer supports an extension mechanism to handle different types of surface elements.
|
||||
* To add rendering support for a new element type (e.g., 'my-custom-element'), follow these steps:
|
||||
*
|
||||
* 1. **Define the Renderer Function**:
|
||||
* Create a function that implements the rendering logic for your element.
|
||||
* This function will receive the element's model, the target HTMLElement, and the DomRenderer instance.
|
||||
* Signature: `(model: MyCustomElementModel, domElement: HTMLElement, renderer: DomRenderer) => void;`
|
||||
* Example: `shapeDomRenderer` in `blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts`.
|
||||
* In this function, you'll apply styles and attributes to the `domElement` based on the `model`.
|
||||
*
|
||||
* 2. **Create the Renderer Extension**:
|
||||
* Create a new file (e.g., `my-custom-element-dom-renderer.extension.ts`).
|
||||
* Import `DomElementRendererExtension` (e.g., from `@blocksuite/affine-block-surface` or its source location
|
||||
* `blocksuite/affine/blocks/surface/src/extensions/dom-element-renderer.ts`).
|
||||
* Import your renderer function (from step 1).
|
||||
* Use the factory to create your extension:
|
||||
* `export const MyCustomElementDomRendererExtension = DomElementRendererExtension('my-custom-element', myCustomElementRendererFn);`
|
||||
* Example: `ShapeDomRendererExtension` in `blocksuite/affine/gfx/shape/src/element-renderer/shape-dom.ts`.
|
||||
*
|
||||
* 3. **Register the Extension**:
|
||||
* In your application setup where BlockSuite services and view extensions are registered (e.g., a `ViewExtensionProvider`
|
||||
* or a central DI configuration place), import your new extension (from step 2) and register it with the
|
||||
* dependency injection container.
|
||||
* Example: `context.register(MyCustomElementDomRendererExtension);`
|
||||
* As seen with `ShapeDomRendererExtension` being registered in `blocksuite/affine/gfx/shape/src/view.ts`.
|
||||
*
|
||||
* 4. **Core Infrastructure (Provided by DomRenderer System)**:
|
||||
* - `DomElementRenderer` (type): The function signature for renderers, defined in
|
||||
* `blocksuite/affine/blocks/surface/src/renderer/dom-elements/index.ts`.
|
||||
* - `DomElementRendererIdentifier` (function): Creates unique service identifiers for DI,
|
||||
* used by `DomRenderer` to look up specific renderers. Defined in the same file.
|
||||
* - `DomElementRendererExtension` (factory): A helper to create extension objects for easy registration.
|
||||
* (e.g., from `@blocksuite/affine-block-surface` or its source).
|
||||
* - `DomRenderer._renderElement()`: This method automatically looks up the registered renderer using
|
||||
* `DomElementRendererIdentifier(elementType)` and calls it if found.
|
||||
*
|
||||
* 5. **Ensure Exports**:
|
||||
* - The `DomRenderer` class itself should be accessible (e.g., exported from `@blocksuite/affine/blocks/surface`).
|
||||
* - The `DomElementRendererExtension` factory should be accessible.
|
||||
*
|
||||
* By following these steps, `DomRenderer` will automatically pick up and use your custom rendering logic
|
||||
* when it encounters elements of 'my-custom-element' type.
|
||||
*/
|
||||
export class DomRenderer {
|
||||
private _container!: HTMLElement;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user