mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00:00

Files

Yifeng Wang 76568bae9f feat(editor): support connector dom renderer (#12505 )

### TL;DR

Added DOM-based renderer for connector elements in the AFFiNE editor.

### What changed?

- Created a new DOM-based renderer for connector elements that uses SVG
for rendering
- Implemented `ConnectorDomRendererExtension` to register the DOM
renderer for connector elements
- Added support for rendering connector paths, endpoints (arrows,
triangles, circles, diamonds), stroke styles, and labels
- Registered the new DOM renderer extension in the connector view setup
- Added comprehensive tests to verify DOM rendering functionality

### How to test?

1. Enable the DOM renderer flag in the editor
2. Create connector elements between shapes or with fixed positions
3. Verify that connectors render correctly with different styles:
   - Try different stroke styles (solid, dashed)
   - Test various endpoint styles (Arrow, Triangle, Circle, Diamond)
   - Add text labels to connectors
4. Check that connectors update properly when connected elements move
5. Verify that connectors are removed when deleted

### Why make this change?

The DOM-based renderer provides an alternative to the Canvas-based
renderer, offering better accessibility and potentially improved
performance for certain use cases. This implementation allows connectors
to be rendered as SVG elements within the DOM, which can be more easily
inspected, styled with CSS, and interacted with by assistive
technologies.

2025-06-23 03:59:45 +00:00

src

feat(editor): support connector dom renderer (#12505 )

2025-06-23 03:59:45 +00:00

package.json

chore(editor): update loading css vars (#12557 )

2025-05-29 02:01:06 +00:00

README.md

test(editor): add tests for turbo renderer state machine (#11659 )

2025-04-14 17:01:27 +08:00

renderer.html

refactor(editor): rename presets to integration test (#10340 )

2025-02-21 06:26:03 +00:00

tsconfig.json

refactor(editor): remove blocks package (#10708 )

2025-03-09 05:44:26 +00:00

vite.config.ts

refactor(editor): rename presets to integration test (#10340 )

2025-02-21 06:26:03 +00:00

vitest.config.ts

chore(editor): add retry for flaky test (#12143 )

2025-05-07 02:01:14 +00:00

README.md

`@blocksuite/integration-test`

Integration test for BlockSuite.

Running Tests

You can run all integration tests using:

cd blocksuite/integration-test
yarn test:unit

To run a specific test or test file, use the -t flag with a test name pattern:

# Run a specific test
yarn test:unit -t "should access turbo renderer instance"

# Run all tests in a specific file
yarn test:unit src/__tests__/edgeless/viewport-renderer.spec.ts

For debugging tests with the Playwright debugger:

yarn test:debug

yarn test:debug -t "should access turbo renderer instance"