Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-25 06:18:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): support triangle and diamond shape in shape dom renderer

Browse Source
This commit is contained in:
Yifeng Wang
2025-05-16 17:10:56 +08:00
parent 77392efaa2
commit 6a0eb80903
2 changed files with 117 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/integration-test/src/__tests__/edgeless/shape-dom.spec.ts
+44
View File
@@ -91,4 +91,48 @@ describe('Shape rendering with DOM renderer', () => {
);
expect(shapeElement).toBeNull();
});
test('should correctly apply clip-path for diamond shape', async () => {
const surfaceView = getSurface(window.doc, window.editor);
const surfaceModel = surfaceView.model;
const shapeProps = {
type: 'shape',
subType: 'diamond',
xywh: '[150, 150, 80, 60]',
fill: '#ff0000',
stroke: '#000000',
};
const shapeId = surfaceModel.addElement(shapeProps as any);
await wait(100);
const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>(
`[data-element-id="${shapeId}"]`
);
expect(shapeElement).not.toBeNull();
expect(shapeElement?.style.clipPath).toBe(
'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)'
);
});
test('should correctly apply clip-path for triangle shape', async () => {
const surfaceView = getSurface(window.doc, window.editor);
const surfaceModel = surfaceView.model;
const shapeProps = {
type: 'shape',
subType: 'triangle',
xywh: '[150, 150, 80, 60]',
fill: '#ff0000',
stroke: '#000000',
};
const shapeId = surfaceModel.addElement(shapeProps as any);
await wait(100);
const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>(
`[data-element-id="${shapeId}"]`
);
expect(shapeElement).not.toBeNull();
expect(shapeElement?.style.clipPath).toBe(
'polygon(50% 0%, 100% 100%, 0% 100%)'
);
});
});