Improvement to the facsimile support and ledger line connection to notes #3861

lpugin · 2024-11-14T08:40:13Z

The PR brings some adjustments to the facsimile support as discussed for the Beethovens Werkstatt project.

It also adds connections between ledger line dashes and corresponding notes or accidentals when the --svg-html5 option is set. This fixes #3858.

When the --svg-html5 option is set, each ledger line dash in the SVG is placed in a g element with an additional data-mei-id attribute carrying the id(s) of the note(s) or accidental(s) related to it.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="https://music-encoding.org/schema/4.0.0/mei-all.rng" type="application/xml" schematypens="http://relaxng.org/ns/structure/1.0"?>
<?xml-model href="https://music-encoding.org/schema/4.0.0/mei-all.rng" type="application/xml" schematypens="http://purl.oclc.org/dsdl/schematron"?>
<mei xmlns="http://www.music-encoding.org/ns/mei" meiversion="4.0.0">
    <meiHead>
        <fileDesc>
            <titleStmt>
                <title>Pickup note spacing</title>
            </titleStmt>
            <pubStmt>
                <date isodate="2017-07-28">2017-07-28</date>
            </pubStmt>
            <seriesStmt>
                <title>Verovio test suite</title>
            </seriesStmt>
            <notesStmt>
                <annot>Verovio appropriately spaces pickup notes.</annot>
            </notesStmt>
        </fileDesc>
        <encodingDesc>
            <appInfo>
                <application version="2.0.0" label="2">
                    <name>Verovio</name>
                </application>
            </appInfo>
        </encodingDesc>
    </meiHead>
    <music>
        <body>
            <mdiv>
                <score>
                    <scoreDef midi.bpm="400">
                        <staffGrp>
                            <staffDef n="1" lines="5" clef.shape="G" clef.line="2" />
                        </staffGrp>
                    </scoreDef>
                    <section>
                        <measure>
                            <staff n="1">
                                <layer n="1">
                                    <accid accid="f" loc="10"></accid>
                                    <note loc="10" dur="4"></note>
                                    <accid accid="x" loc="10"></accid>
                                    <note loc="10" dur="4"></note>
                                    <accid accid="ff" loc="11"></accid>
                                    <note loc="11" dur="4"></note>
                                    <accid accid="tf" loc="12"></accid>
                                    <note loc="12" dur="4"></note>
                                </layer>
                            </staff>
                        </measure>
                        <measure>
                            <staff n="1">
                                <layer n="1">
                                    <accid accid="f" loc="-1"></accid>
                                    <note loc="-1" dur="4"></note>
                                    <accid accid="x" loc="-2"></accid>
                                    <note loc="-2" dur="4"></note>
                                    <accid accid="ff" loc="-3"></accid>
                                    <note loc="-3" dur="4"></note>
                                    <accid accid="tf" loc="-4"></accid>
                                    <note loc="-4" dur="4"></note>
                                </layer>
                            </staff>
                        </measure>
                    </section>
                </score>
            </mdiv>
        </body>
    </music>
</mei>

SVG of the staff element of the second measure without --svg-html5

<g id="s9yy8yz" class="staff">
    <path d="M4719 1423 L8793 1423" stroke="currentColor" stroke-width="13" />
    <path d="M4719 1603 L8793 1603" stroke="currentColor" stroke-width="13" />
    <path d="M4719 1783 L8793 1783" stroke="currentColor" stroke-width="13" />
    <path d="M4719 1963 L8793 1963" stroke="currentColor" stroke-width="13" />
    <path d="M4719 2143 L8793 2143" stroke="currentColor" stroke-width="13" />
    <g class="ledgerLines below">
        <path d="M5730 2323 L6003 2323" stroke="currentColor" stroke-width="22" />
        <path d="M6049 2323 L6363 2323" stroke="currentColor" stroke-width="22" />
        <path d="M6600 2323 L6967 2323" stroke="currentColor" stroke-width="22" />
        <path d="M7013 2323 L7327 2323" stroke="currentColor" stroke-width="22" />
        <path d="M7495 2323 L7999 2323" stroke="currentColor" stroke-width="22" />
        <path d="M8046 2323 L8360 2323" stroke="currentColor" stroke-width="22" />
        <path d="M7495 2503 L7999 2503" stroke="currentColor" stroke-width="22" />
        <path d="M8046 2503 L8360 2503" stroke="currentColor" stroke-width="22" />
    </g>
    <g id="l174qs6g" class="layer">
        <g id="a1xuua9r" class="accid">
            <use xlink:href="#E260-1wr3wsz" x="4899" y="2233" height="720px" width="720px" />
        </g>
        <g id="n3yctqk" class="note">
            <g class="notehead">
                <use xlink:href="#E0A4-1wr3wsz" x="5176" y="2233" height="720px" width="720px" />
            </g>
            <g id="segyzt9" class="stem">
                <path d="M5393 2205 L5393 1603" stroke="currentColor" stroke-width="18" />
            </g>
        </g>
        <g id="a1madmg3" class="accid">
            <use xlink:href="#E263-1wr3wsz" x="5773" y="2323" height="720px" width="720px" />
        </g>
        <g id="niamgx1" class="note">
            <g class="notehead">
                <use xlink:href="#E0A4-1wr3wsz" x="6093" y="2323" height="720px" width="720px" />
            </g>
            <g id="s1ldqugp" class="stem">
                <path d="M6310 2295 L6310 1693" stroke="currentColor" stroke-width="18" />
            </g>
        </g>
        <g id="a8x2zjm" class="accid">
            <use xlink:href="#E264-1wr3wsz" x="6643" y="2413" height="720px" width="720px" />
        </g>
        <g id="n18lkvm6" class="note">
            <g class="notehead">
                <use xlink:href="#E0A4-1wr3wsz" x="7057" y="2413" height="720px" width="720px" />
            </g>
            <g id="s18b48g1" class="stem">
                <path d="M7274 2385 L7274 1783" stroke="currentColor" stroke-width="18" />
            </g>
        </g>
        <g id="ar0dk67" class="accid">
            <use xlink:href="#E266-1wr3wsz" x="7539" y="2503" height="720px" width="720px" />
        </g>
        <g id="n1gbxadu" class="note">
            <g class="notehead">
                <use xlink:href="#E0A4-1wr3wsz" x="8090" y="2503" height="720px" width="720px" />
            </g>
            <g id="s19us33q" class="stem">
                <path d="M8307 2475 L8307 1783" stroke="currentColor" stroke-width="18" />
            </g>
        </g>
    </g>
</g>

The first measure with --svg-html5

<g data-id="susm273" data-class="staff" class="staff">
    <path d="M0 1423 L4719 1423" stroke="currentColor" stroke-width="13" />
    <path d="M0 1603 L4719 1603" stroke="currentColor" stroke-width="13" />
    <path d="M0 1783 L4719 1783" stroke="currentColor" stroke-width="13" />
    <path d="M0 1963 L4719 1963" stroke="currentColor" stroke-width="13" />
    <path d="M0 2143 L4719 2143" stroke="currentColor" stroke-width="13" />
    <g data-id="cz06acv" data-class="clef" class="clef">
        <use xlink:href="#E050-hrnrfr" x="90" y="1963" height="720px" width="720px" />
    </g>
    <g data-id="kjntlfz" data-class="keySig" class="keySig" />
    <g data-class="ledgerLines" class="ledgerLines above">
        <g data-class="lineDash" class="lineDash" data-mei-id="abt2snm">
            <path d="M782 1243 L1012 1243" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="nk1d95g">
            <path d="M1058 1243 L1372 1243" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="a7wuvt3">
            <path d="M1656 1243 L1929 1243" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="n1h1urjr">
            <path d="M1975 1243 L2289 1243" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="a1q3fvtp">
            <path d="M2526 1243 L2893 1243" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="n67yql6">
            <path d="M2939 1243 L3253 1243" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="af5w3jm">
            <path d="M3421 1243 L3925 1243" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="nm8vrvn">
            <path d="M3972 1243 L4286 1243" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="af5w3jm">
            <path d="M3421 1063 L3925 1063" stroke="currentColor" stroke-width="22" />
        </g>
        <g data-class="lineDash" class="lineDash" data-mei-id="nm8vrvn">
            <path d="M3972 1063 L4286 1063" stroke="currentColor" stroke-width="22" />
        </g>
    </g>
    <g data-id="l1idfoa9" data-class="layer" class="layer">
        <g data-id="abt2snm" data-class="accid" class="accid">
            <use xlink:href="#E260-hrnrfr" x="825" y="1243" height="720px" width="720px" />
        </g>
        <g data-id="nk1d95g" data-class="note" class="note">
            <g data-class="notehead" class="notehead">
                <use xlink:href="#E0A4-hrnrfr" x="1102" y="1243" height="720px" width="720px" />
            </g>
            <g data-id="s1009fsf" data-class="stem" class="stem">
                <path d="M1111 1271 L1111 1873" stroke="currentColor" stroke-width="18" />
            </g>
        </g>
        <g data-id="a7wuvt3" data-class="accid" class="accid">
            <use xlink:href="#E263-hrnrfr" x="1699" y="1243" height="720px" width="720px" />
        </g>
        <g data-id="n1h1urjr" data-class="note" class="note">
            <g data-class="notehead" class="notehead">
                <use xlink:href="#E0A4-hrnrfr" x="2019" y="1243" height="720px" width="720px" />
            </g>
            <g data-id="s1dg8eld" data-class="stem" class="stem">
                <path d="M2028 1271 L2028 1873" stroke="currentColor" stroke-width="18" />
            </g>
        </g>
        <g data-id="a1q3fvtp" data-class="accid" class="accid">
            <use xlink:href="#E264-hrnrfr" x="2569" y="1153" height="720px" width="720px" />
        </g>
        <g data-id="n67yql6" data-class="note" class="note">
            <g data-class="notehead" class="notehead">
                <use xlink:href="#E0A4-hrnrfr" x="2983" y="1153" height="720px" width="720px" />
            </g>
            <g data-id="shqqoqx" data-class="stem" class="stem">
                <path d="M2992 1181 L2992 1783" stroke="currentColor" stroke-width="18" />
            </g>
        </g>
        <g data-id="af5w3jm" data-class="accid" class="accid">
            <use xlink:href="#E266-hrnrfr" x="3465" y="1063" height="720px" width="720px" />
        </g>
        <g data-id="nm8vrvn" data-class="note" class="note">
            <g data-class="notehead" class="notehead">
                <use xlink:href="#E0A4-hrnrfr" x="4016" y="1063" height="720px" width="720px" />
            </g>
            <g data-id="s1iww319" data-class="stem" class="stem">
                <path d="M4025 1091 L4025 1783" stroke="currentColor" stroke-width="18" />
            </g>
        </g>
    </g>
</g>

…facsimile data

# Conflicts: # include/vrv/facsimilefunctor.h # src/facsimilefunctor.cpp

ahankinson · 2024-11-14T10:08:14Z

Add a hash to IDs
Still not sure about the name data-mei-id -- should at least be ids? Possibly data-group-ptr?

* Add # * Change name to data-related

lpugin added 10 commits October 7, 2024 13:52

Add facsimile elements to functors

6388bd6

Add Accept and AcceptEnd methods to facsimile classes

620bb75

Read and write surface@type pixel per unit when loading or writing …

588d637

…facsimile data

Add LedgerLine::Dash class

144f374

Add DeviceContext method to add custom data-*

7ed45bd

Pass event object to various ledgerline related functions

89bff78

Add custom group and data-* to ledger line dashes

470e7c2

Process BarLine and ignore y-position when not neon data

914f21f

Merge branch 'develop-facsimile' into develop-beethovens-werkstatt

3511ff5

# Conflicts: # include/vrv/facsimilefunctor.h # src/facsimilefunctor.cpp

Do not process event when not html5

ba25668

Adjust the ledger line dash data-*

73f28d6

* Add # * Change name to data-related

ahankinson approved these changes Nov 14, 2024

View reviewed changes

lpugin merged commit acc6d64 into develop Nov 14, 2024
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improvement to the facsimile support and ledger line connection to notes #3861

Improvement to the facsimile support and ledger line connection to notes #3861

lpugin commented Nov 14, 2024 •

edited by ahankinson

Loading

ahankinson commented Nov 14, 2024

Improvement to the facsimile support and ledger line connection to notes #3861

Improvement to the facsimile support and ledger line connection to notes #3861

Conversation

lpugin commented Nov 14, 2024 • edited by ahankinson Loading

ahankinson commented Nov 14, 2024

lpugin commented Nov 14, 2024 •

edited by ahankinson

Loading