fix: the initial values of some nodes are not set by default (#6075)

Co-authored-by: 王璨 <can.wang@eoitek.com>
This commit is contained in:
MusicTen 2024-07-22 19:10:41 +08:00 committed by GitHub
parent 3ac8a02e8f
commit c3058dc532
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 84 additions and 0 deletions

View File

@ -0,0 +1,30 @@
import { createGraph } from '../utils';
describe('bug: element-node-update-badge', () => {
it('should update node badge', async () => {
const graph = createGraph({
animation: false,
node: {
style: {
badge: true,
badges: [{ text: '1' }],
badgeFill: 'white',
badgeBackgroundFill: 'red',
},
},
data: {
nodes: [{ id: 'node-0', style: { x: 100, y: 100 }, states: ['inactive'] }],
},
});
await graph.render();
await expect(graph).toMatchSnapshot(__filename);
graph.setElementState('node-0', []);
await graph.render();
await expect(graph).toMatchSnapshot(__filename, 'update-node-badge');
});
});

View File

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g >
<g fill="none">
<g fill="none">
<g fill="none" x="100" y="100" transform="matrix(1,0,0,1,100,100)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" fill-opacity="0.25" stroke-width="0" stroke="rgba(0,0,0,1)" stroke-opacity="0.25" r="16"/>
</g>
<g fill="none" class="badge-0" transform="matrix(1,0,0,1,0,-16)">
<g fill="none" class="label">
<g>
<path fill="rgba(255,0,0,1)" d="M 0.5,0 l 0,0 a 6.42,6.42,0,0,1,6.42,6.42 l 0,4.16 a 6.42,6.42,0,0,1,-6.42,6.42 l 0,0 a 6.42,6.42,0,0,1,-6.42,-6.42 l 0,-4.16 a 6.42,6.42,0,0,1,6.42,-6.42 z" class="background" opacity="0.25" stroke-width="0" x="-5.92" y="0" width="12.84" height="17"/>
</g>
<g>
<text fill="rgba(255,255,255,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="8.5px" class="text" font-size="8" font-family="system-ui, sans-serif" text-anchor="middle">
1
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g >
<g fill="none">
<g fill="none">
<g fill="none" x="100" y="100" transform="matrix(1,0,0,1,100,100)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
<g fill="none" class="badge-0" transform="matrix(1,0,0,1,0,-16)">
<g fill="none" class="label">
<g>
<path fill="rgba(255,0,0,1)" d="M 0.5,0 l 0,0 a 6.42,6.42,0,0,1,6.42,6.42 l 0,4.16 a 6.42,6.42,0,0,1,-6.42,6.42 l 0,0 a 6.42,6.42,0,0,1,-6.42,-6.42 l 0,-4.16 a 6.42,6.42,0,0,1,6.42,-6.42 z" class="background" stroke-width="0" x="-5.92" y="0" width="12.84" height="17"/>
</g>
<g>
<text fill="rgba(255,255,255,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="8.5px" class="text" font-size="8" font-family="system-ui, sans-serif" text-anchor="middle">
1
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -86,6 +86,8 @@ export function create(tokens: ThemeTokens): Theme {
node: {
palette: nodePaletteOptions,
style: {
donutOpacity: 1,
badgeBackgroundOpacity: 1,
badgeFill: '#fff',
badgeFontSize: 8,
badgePadding: [0, 4],