[BUG] Low Level APIs - Renderer SVG multiple tracks wrong split #1133

DevJett · 2023-03-28T20:51:55Z

Is there an existing issue for this?

I have searched the existing issues

Current Behavior

I'm following the provided low-level APIs to generate an SVG from a Guitar Pro file that contains multiple tracks. However, the result is not as expected. It seems that all of the track bars are placed in the first SVG without any splits between them, and the names of each track are also included. This makes the first SVG too long and difficult to print, as the pages will be stacked on top of each other and become unreadable. Please take a look at the provided screenshot.

Download the Guitar Pro File I'm using here

https://files.fm/u/8w3ct5tjm

I have tested almost all version

1.3 alpha
1.2.3
1.0.1

And still the same issue.

Expected Behavior

The first SVG should be splatted into parts same as when there is no multiple tracks. Also, it would be great if you can also keep the names of each track for the rest of the bars same as the exported PDF from original Guitar Pro software.

Steps To Reproduce

Here is the source code: https://alphatab.net/docs/guides/nodejs
Download GP File here: https://files.fm/u/8w3ct5tjm

Link to jsFiddle, CodePen, Project

No response

Found in Version

1.3-alpha

Platform

Node.js

Environment

- **OS**:
- **Browser**:
- **.net Version**:

Anything else?

No response

Danielku15 · 2023-03-30T18:44:17Z

It might be tough to help in detail without having a concrete code sample of how you are doing everything. From our own samples I cannot infer how you are handling things exactly in your software when it comes to SVG rendering and printing to PDF. Let's break down your reported things:

1. Alignment of SVG
These low level docs seem to be a bit outdated when it comes to the details of how to align things. In the previous releases there were some changes when it comes to the positioning of the "partials" which are rendered which is not indicated in this example correct. All partials come now with an "absolute" X/Y position at which they have to be placed.

First the partials are informed to be layout via https://alphatab.net/docs/reference/scorerenderer/partiallayoutfinished and then via renderResult the rendering is then initiated and received via https://alphatab.net/docs/reference/scorerenderer/partialrenderfinished/. The provided X/Y positions have to be respected. The enableLazyLoading setting might make things a bit simpler.

Depending on how you "print" the PDF, it might not be the problem of alphaTab that the alignment is not fully as expected but rather that your printing library has some expectations on the positioning of elements too.

2. Printing
The workflow of "printing" is an own big topic as such because alphaTab doesn't have at this point a capability of aligning/optimizing the output for A4 (or other page sizes). The browser version has a print function on the API which might give some hints on managing some print optimized settings:

alphaTab/src/platform/javascript/AlphaTabApi.ts

Lines 28 to 119 in a708a3d

    
               public print(width?: string, additionalSettings: unknown = null): void { 
        
                   // prepare a popup window for printing (a4 width, window height, centered) 
        
                   let preview: Window = window.open('', '', 'width=0,height=0')!; 
        
                   let a4: HTMLElement = preview.document.createElement('div'); 
        
                   if (width) { 
        
                       a4.style.width = width; 
        
                   } else { 
        
                       if (this.settings.display.layoutMode === LayoutMode.Horizontal) { 
        
                           a4.style.width = '297mm'; 
        
                       } else { 
        
                           a4.style.width = '210mm'; 
        
                       } 
        
                   } 
        
                   // the style is a workaround for browser having problems with printing using absolute positions.  
        
                   preview.document.write(` 
        
                   <!DOCTYPE html> 
        
                   <html> 
        
                     <head> 
        
                       <style> 
        
                       .at-surface { 
        
                           width: auto !important; 
        
                           height: auto !important; 
        
                       } 
        
                       .at-surface > div { 
        
                           position: relative!important; 
        
                           left: auto !important; 
        
                           top: auto !important; 
        
                           break-inside: avoid; 
        
                       } 
        
                       </style> 
        
                     </head> 
        
                     <body></body> 
        
                   </html> 
        
                   `); 
        
                   const score = this.score; 
        
                   if (score) { 
        
                       if (score.artist && score.title) { 
        
                           preview.document.title = `${score.title} - ${score.artist}`; 
        
                       } else if (score.title) { 
        
                           preview.document.title = `${score.title}`; 
        
                       } 
        
                   } 
        
                   preview.document.body.appendChild(a4); 
        
                   let dualScreenLeft: number = 
        
                       typeof (window as any)['screenLeft'] !== 'undefined' 
        
                           ? (window as any)['screenLeft'] 
        
                           : (window as any)['left']; 
        
                   let dualScreenTop: number = 
        
                       typeof (window as any)['screenTop'] !== 'undefined' ? (window as any)['screenTop'] : (window as any)['top']; 
        
                   let screenWidth: number = 
        
                       "innerWidth" in window 
        
                           ? window.innerWidth 
        
                           : "clientWidth" in document.documentElement 
        
                               ? document.documentElement.clientWidth 
        
                               : (window as Window).screen.width; 
        
                   let screenHeight: number = 
        
                       "innerHeight" in window 
        
                           ? window.innerHeight 
        
                           : "clientHeight" in document.documentElement 
        
                               ? document.documentElement.clientHeight 
        
                               :  (window as Window).screen.height; 
        
                   let w: number = a4.offsetWidth + 50; 
        
                   let h: number = window.innerHeight; 
        
                   let left: number = ((screenWidth / 2) | 0) - ((w / 2) | 0) + dualScreenLeft; 
        
                   let top: number = ((screenHeight / 2) | 0) - ((h / 2) | 0) + dualScreenTop; 
        
                   preview.resizeTo(w, h); 
        
                   preview.moveTo(left, top); 
        
                   preview.focus(); 
        
                   // render alphaTab 
        
                   let settings: Settings = JsonConverter.jsObjectToSettings(JsonConverter.settingsToJsObject(this.settings)); 
        
                   settings.core.enableLazyLoading = false; 
        
                   settings.core.useWorkers = true; 
        
                   settings.core.file = null; 
        
                   settings.core.tracks = null; 
        
                   settings.player.enableCursor = false; 
        
                   settings.player.enablePlayer = false; 
        
                   settings.player.enableElementHighlighting = false; 
        
                   settings.player.enableUserInteraction = false; 
        
                   settings.player.soundFont = null; 
        
                   settings.display.scale = 0.8; 
        
                   settings.display.stretchForce = 0.8; 
        
                   SettingsSerializer.fromJson(settings, additionalSettings); 
        
                   let alphaTab: AlphaTabApi = new AlphaTabApi(a4, settings); 
        
                   preview.onunload = () => { 
        
                       alphaTab.destroy(); 
        
                   }; 
        
                   alphaTab.renderer.postRenderFinished.on(() => { 
        
                       preview.print(); 
        
                   }); 
        
                   alphaTab.renderTracks(this.tracks); 
        
               }

It has some key parts for aligning the elements to be more suitable for printing controlled via CSS.

Again it depends on how you're doing things exactly.

If the required size of the score goes beyond the page size, alphaTab has currently no capabilities of splitting this further. alphaTab doesn't have at this point a "Page" layout like Guitar Pro. The layouts of alphaTab are rather the "Screen Vertical" and "Screen Horizontal". I checked how Guitar Pro does PDF exports in the different scenarios and they also simply have 1 page with the full music sheet on it for those layouts. The "Page" layout is more advanced.

alphaTab could likely support also a real "page" layout, but that would be a bigger new feature to add. The foundation would be there but how to then ensure the correct output in the browser or svg chunks is a separate topic again.

Track Names.
I'm not sure if I get that fully right. Maybe you can explain this a bit further and/or confirm my understanding: As soon in Guitar Pro multiple tracks are displayed, the track names are shown on the first staff of a new page. When having only a single track shown, the track name is only shown once at the start of the music sheet.

As alphaTab doesn't split into "pages" at this point, the only option we could offer is to show the names on every staff.

To summarize:

We don't have really a "bug" at this point but the current functionality doesn't fit your use case of printing.
You would like to have a new feature: An actual page layout where the music sheet is fit into given page sizes. (looking back it was a bad decision to name the current layout page while it is actually a different one compared to Guitar Pro).
With this new print optimized layout you would like to see the track name on the first staff of each page.

DevJett added the state-needs-triage Bug not triaged yet. label Mar 28, 2023

DevJett assigned Danielku15 Mar 28, 2023

Danielku15 added type-improvement 🚀 state-accepted This is a valid topic to work on. platform-javascript Related to the JavaScript version of alphaTab area-documentation Related to documentation and sample code and removed state-needs-triage Bug not triaged yet. labels Mar 30, 2023

Danielku15 added state-needs-discussion 💬 and removed state-accepted This is a valid topic to work on. labels Mar 30, 2023

Danielku15 added this to alphaTab Roadmap Dec 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] Low Level APIs - Renderer SVG multiple tracks wrong split #1133

[BUG] Low Level APIs - Renderer SVG multiple tracks wrong split #1133

DevJett commented Mar 28, 2023

Danielku15 commented Mar 30, 2023

[BUG] Low Level APIs - Renderer SVG multiple tracks wrong split #1133

[BUG] Low Level APIs - Renderer SVG multiple tracks wrong split #1133

Comments

DevJett commented Mar 28, 2023

Is there an existing issue for this?

Current Behavior

Expected Behavior

Steps To Reproduce

Link to jsFiddle, CodePen, Project

Found in Version

Platform

Environment

Anything else?

Danielku15 commented Mar 30, 2023