Skip to content

Commit 21b211e

Browse files
EncaikEncaik
committed
refactor(render): 更新 SVG 渲染节点的属性设置
- 修改多个 SVG 渲染节点（block, element, line, page, root）以使用更简洁的 ID 设置，移除前缀 'layout-'，并引入 'layouttype' 和 'datatype' 属性以增强数据层的可读性。 - 在 LayoutTest.vue 中更新 ABC 测试数据，增加多章节示例，提升测试覆盖率和功能验证。 该变更优化了渲染逻辑，增强了代码的可维护性和可扩展性。
1 parent 46562d9 commit 21b211e

File tree

7 files changed

+189
-19
lines changed

7 files changed

+189
-19
lines changed

‎packages/simple-notation/src/layout/trans/score-transformer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export class ScoreTransformer {
2626
const blockConfig = this.layoutConfig.getBlock();
2727

2828
// 创建 Block 节点（默认撑满父级宽度）
29-
const scoreBlock = new SNLayoutBlock(`layout-${score.id}`);
29+
const scoreBlock = new SNLayoutBlock(`layout-score-${score.id}`);
3030
scoreBlock.data = score;
3131

3232
// 设置块配置

‎packages/simple-notation/src/render/renderer/svg/node/block.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,12 @@ export function renderBlock(
1919

2020
// 创建块容器组
2121
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
22-
g.setAttribute('id', `layout-${node.id}`);
23-
g.setAttribute('data-type', 'block');
22+
g.setAttribute('id', node.id);
23+
g.setAttribute('layouttype', 'block');
24+
// 设置数据层类型（如果有对应的数据节点）
25+
if (node.data?.type) {
26+
g.setAttribute('datatype', node.data.type);
27+
}
2428

2529
// 设置位置
2630
g.setAttribute('transform', `translate(${layout.x}, ${layout.y})`);

‎packages/simple-notation/src/render/renderer/svg/node/element.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,12 @@ export function renderElement(
1818

1919
// 创建元素容器组
2020
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
21-
g.setAttribute('id', `layout-${node.id}`);
22-
g.setAttribute('data-type', 'element');
21+
g.setAttribute('id', node.id);
22+
g.setAttribute('layouttype', 'element');
23+
// 设置数据层类型（如果有对应的数据节点）
24+
if (node.data?.type) {
25+
g.setAttribute('datatype', node.data.type);
26+
}
2327

2428
// 设置位置
2529
g.setAttribute('transform', `translate(${layout.x}, ${layout.y})`);

‎packages/simple-notation/src/render/renderer/svg/node/line.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,12 @@ export function renderLine(
1818

1919
// 创建行容器组
2020
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
21-
g.setAttribute('id', `layout-${node.id}`);
22-
g.setAttribute('data-type', 'line');
21+
g.setAttribute('id', node.id);
22+
g.setAttribute('layouttype', 'line');
23+
// 设置数据层类型（如果有对应的数据节点）
24+
if (node.data?.type) {
25+
g.setAttribute('datatype', node.data.type);
26+
}
2327

2428
// 设置位置
2529
g.setAttribute('transform', `translate(${layout.x}, ${layout.y})`);

‎packages/simple-notation/src/render/renderer/svg/node/page.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,12 @@ export function renderPage(
1818

1919
// 创建页面容器组
2020
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
21-
g.setAttribute('id', `layout-${node.id}`);
22-
g.setAttribute('data-type', 'page');
21+
g.setAttribute('id', node.id);
22+
g.setAttribute('layouttype', 'page');
23+
// 设置数据层类型（如果有对应的数据节点）
24+
if (node.data?.type) {
25+
g.setAttribute('datatype', node.data.type);
26+
}
2327

2428
// 设置位置
2529
g.setAttribute('transform', `translate(${layout.x}, ${layout.y})`);

‎packages/simple-notation/src/render/renderer/svg/node/root.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,12 @@ export function renderRoot(
1818

1919
// 创建根容器组
2020
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
21-
g.setAttribute('id', `layout-${node.id}`);
22-
g.setAttribute('data-type', 'root');
21+
g.setAttribute('id', node.id);
22+
g.setAttribute('layouttype', 'root');
23+
// 设置数据层类型（如果有对应的数据节点）
24+
if (node.data?.type) {
25+
g.setAttribute('datatype', node.data.type);
26+
}
2327

2428
// 设置位置和尺寸
2529
g.setAttribute('transform', `translate(${layout.x}, ${layout.y})`);

‎packages/web/src/pages/LayoutTest.vue‎

Lines changed: 158 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,169 @@ defineOptions({
2020
const container = ref<HTMLDivElement | null>(null);
2121
let sn: SimpleNotation | null = null;
2222
23-
// ABC 测试数据
24-
const abcData = `%%abc-2.1
23+
const abcData: string = `%%abc-2.1
2524
%%encoding utf-8
25+
%%abc-charset utf-8
26+
%%这是一个全面的 ABC 测试文件
27+
% 用于测试解析器的各种功能
28+
2629
X:1
27-
T:测试乐曲
28-
C:测试作者
30+
T:欢乐颂
31+
T:Ode to Joy
32+
C:Ludwig van Beethoven
33+
O:Germany
34+
A:Vienna
35+
N:贝多芬第九交响曲第四乐章主题
36+
M:4/4
37+
L:1/8
38+
Q:1/4=120
39+
K:C major
40+
41+
S:1
42+
% 第一章节：主旋律（包含歌词）
43+
V:1 name="Melody" clef=treble
44+
[K:C] |: (3BBB A2 A2 | G2 G2 (3BBB | A2 A2 G2 G2 | G2 G2 F2 F2 |
45+
w:欢 乐 颂 | 歌 声 嘹 亮 | 传 遍 四 方 | 和 平 友 爱 |
46+
E2 E2 D2 D2 | C2 C2 C2 C2 | z8 | z8 :|
47+
w:永 远 不 变 | 人 类 希 望 | * * | * * |
48+
49+
V:2 name="Harmony" clef=treble
50+
[K:C] |: C2 C2 G2 G2 | C2 C2 G2 G2 | C2 C2 E2 E2 | C2 C2 E2 E2 |
51+
G2 G2 E2 E2 | G2 G2 E2 E2 | C2 C2 G2 G2 | z8 :|
52+
53+
S:2
54+
% 第二章节：变奏（包含多音节和延长音）
55+
V:1 name="Melody" clef=treble
56+
[K:C] |: (3DDD C2 C2 | B2 B2 (3AAA | G2 G2 F2 F2 | E2 E2 D2 D2 |
57+
w:变-奏 旋 律 | 优 美 动 听 | 音-符 跳 跃 | 节 奏 鲜 明 |
58+
C2 C2 B2 B2 | A2 A2 G2 G2 | z8 | z8 :|
59+
w:和 声 丰 富 | 层 次 分 明 | * * | * * |
60+
61+
V:2 name="Harmony" clef=treble
62+
[K:C] |: G2 G2 C2 C2 | G2 G2 C2 C2 | E2 E2 G2 G2 | E2 E2 G2 G2 |
63+
C2 C2 E2 E2 | C2 C2 E2 E2 | G2 G2 C2 C2 | z8 :|
64+
65+
S:3
66+
% 第三章节：高潮部分（包含延音线和变音记号）
67+
V:1 name="Melody" clef=treble
68+
[K:C] |: C4 D4 | E4 F4 | G8- | G4 F4 |
69+
w:高 潮 来 临 | 情 绪 高 涨 | 延 长_ | 音 符 持 续 |
70+
E4 D4 | C8- | C8 | z8 :|
71+
w:逐 渐 回 落 | 宁 静_ | 安 详 | 结 束 |
72+
73+
V:2 name="Harmony" clef=treble
74+
[K:C] |: C4 G4 | C4 G4 | E8- | E4 G4 |
75+
C4 G4 | C8- | C8 | z8 :|
76+
77+
X:2
78+
T:友谊地久天长
79+
T:Auld Lang Syne
80+
C:Traditional
81+
O:Scotland
82+
A:Scotland
83+
N:苏格兰传统民歌
84+
M:3/4
85+
L:1/8
86+
Q:1/4=90
87+
K:F major
88+
89+
% 第一章节：主歌（多声部合唱）
90+
S:1
91+
V:1 name="Soprano" clef=treble
92+
[K:F] |: F2 F2 F2 | A,2 A,2 A,2 | F2 G2 G2 | G2 A,2 A,4 | z6 |
93+
w:友 谊 地 久 | 天 长 我 们 | 共 同 歌 唱 | 美 好 时 光 | * * |
94+
F2 F2 F2 | A,2 A,2 A,2 | G2 F4 | z2 z6 :|
95+
w:回 忆 过 去 | 珍 惜 现 在 | 友 谊 永 存 | * * * |
96+
97+
V:2 name="Alto" clef=treble
98+
[K:F] |: C2 C2 C2 | F2 F2 F2 | C2 D2 D2 | D2 F2 F4 | z6 |
99+
C2 C2 C2 | F2 F2 F2 | D2 C4 | z2 z6 :|
100+
101+
V:3 name="Bass" clef=bass
102+
[K:F] |: F,2 F,2 F,2 | C,2 C,2 C,2 | F,2 G,,2 G,,2 | G,,2 C,2 C,4 | z6 |
103+
F,2 F,2 F,2 | C,2 C,2 C,2 | G,,2 F,4 | z2 z6 :|
104+
105+
% 第二章节：副歌（包含变音记号）
106+
S:2
107+
V:1 name="Soprano" clef=treble
108+
[K:F] |: A,2 A,2 A,2 | C2 C2 C2 | A,2 ^B2 ^B2 | ^B2 A,2 A,4 | z6 |
109+
w:副 歌 旋 律 | 更 加 优 美 | 升 音 增 加 | 色 彩 丰 富 | * * |
110+
F2 F2 F2 | A,2 A,2 A,2 | G2 F4 | z2 z6 :|
111+
w:回 到 主 题 | 深 情 演 绎 | 完 美 结 束 | * * * |
112+
113+
V:2 name="Alto" clef=treble
114+
[K:F] |: F2 F2 F2 | A2 A2 A2 | F2 G2 G2 | G2 F2 F4 | z6 |
115+
C2 C2 C2 | F2 F2 F2 | D2 C4 | z2 z6 :|
116+
117+
V:3 name="Bass" clef=bass
118+
[K:F] |: C,2 C,2 C,2 | F,2 F,2 F,2 | C,2 D,2 D,2 | D,2 C,2 C,4 | z6 |
119+
F,2 F,2 F,2 | C,2 C,2 C,2 | G,,2 F,4 | z2 z6 :|
120+
121+
% 第三章节：结尾
122+
S:3
123+
V:1 name="Soprano" clef=treble
124+
[K:F] |: F2 F2 F2 | A,2 A,2 A,2 | F2 G2 G2 | G2 A,2 A,4 |
125+
F2 F2 F2 | A,2 A,2 A,2 | G2 F6 | z6 :|
126+
127+
V:2 name="Alto" clef=treble
128+
[K:F] |: C2 C2 C2 | F2 F2 F2 | C2 D2 D2 | D2 F2 F4 |
129+
C2 C2 C2 | F2 F2 F2 | D2 C6 | z6 :|
130+
131+
V:3 name="Bass" clef=bass
132+
[K:F] |: F,2 F,2 F,2 | C,2 C,2 C,2 | F,2 G,,2 G,,2 | G,,2 C,2 C,4 |
133+
F,2 F,2 F,2 | C,2 C,2 C,2 | G,,2 F,6 | z6 :|
134+
135+
X:3
136+
T:小星星
137+
T:Twinkle Twinkle Little Star
138+
C:Traditional
29139
M:4/4
30140
L:1/4
31-
K:C
141+
Q:1/4=100
142+
K:C major
143+
144+
% 第一章节：主旋律（包含多行歌词）
145+
S:1
146+
V:1 name="Melody" clef=treble
147+
[K:C] |: C C G G | A A G2 | F F E E | D D C2 |
148+
w:一 闪 一 闪 | 亮 晶 晶 | 满 天 都 是 | 小 星 星 |
149+
W:Twinkle twinkle | little star | how I wonder | what you are |
150+
G G F F | E E D2 | G G F F | E E D2 :|
151+
w:挂 在 天 空 | 放 光 明 | 好 像 许 多 | 小 眼 睛 |
152+
W:Up above the | world so high | like a diamond | in the sky |
153+
154+
V:2 name="Accompaniment" clef=treble
155+
[K:C] |: C2 E2 G2 | C2 E2 G2 | F2 A2 C2 | F2 A2 C2 |
156+
E2 G2 B2 | E2 G2 B2 | D2 F2 A2 | D2 F2 A2 :|
157+
158+
% 第二章节：变奏（包含多词同音符和对齐）
159+
S:2
32160
V:1 name="Melody" clef=treble
33-
[K:C] C4 D4 E4 F4 | G4 A4 B4 c4 | c4 B4 A4 G4 | F4 E4 D4 C4 :|
34-
w:这 是 测 试 | 歌 词 对 齐 | 测 试 功 能 | 正 常 运 行 |
35-
w:* 多 行 * | * 歌 词 * | * 测 试 * | * 功 能 * |
161+
[K:C] |: C4 G4 | A4 G4 | F4 E4 | D4 C4 |
162+
w:快~乐~的 | 小~朋~友 | 唱~着~歌 | 跳~着~舞 |
163+
G4 F4 | E4 D4 | G4 F4 | E4 D4 :|
164+
w:星~星~们 | 眨~眼~睛 | 陪~伴~着 | 我~们~玩 |
165+
166+
V:2 name="Accompaniment" clef=treble
167+
[K:C] |: C2 E2 G2 C2 | C2 E2 G2 C2 | F2 A2 C2 F2 | F2 A2 C2 F2 |
168+
E2 G2 B2 E2 | E2 G2 B2 E2 | D2 F2 A2 D2 | D2 F2 A2 D2 :|
169+
170+
X:4
171+
T:测试用例：复杂功能
172+
C:Test Suite
173+
M:6/8
174+
L:1/16
175+
Q:3/8=80
176+
K:G major
177+
178+
% 测试章节：各种复杂功能
179+
S:1
180+
V:1 name="Complex" clef=treble
181+
% 测试：连音、变音、延音线、休止符混合
182+
[K:G] |: (3^F^G^A ^G4 ^F4 | (5G A B c d) ^G4 |
183+
w:三 连 音 | 五 连 音 |
184+
_E4 =F4 G4 | A4- A4 z4 | B4 _c4 d4 | z8 :|
185+
w:降 音 还 原 | 延 长_ * | 升 降 混 合 | * * |
36186
37187
V:2 name="Harmony" clef=treble
38188
[K:G] |: G4 D4 | E4 D4 | G4 E4 | D4 G4 | E4 D4 | z8 :|`;

0 commit comments

Comments
 (0)