Explorar o código

feat(PDF): remove createPDF from OSMD object, reducing bundle size. move to demo. fix filereader pollution

fix filereader pollution for raw javascript usage example:
https://github.com/opensheetmusicdisplay/RawJavascript-usage-example/issues/1

jspdf was polluting filereader, making it impossible to add a filereader eventlistener
when OSMD was merely imported.

test and test:visual pass.
sschmid %!s(int64=5) %!d(string=hai) anos
pai
achega
64c8ccff94
Modificáronse 3 ficheiros con 59 adicións e 59 borrados
  1. 57 2
      demo/index.js
  2. 2 2
      package.json
  3. 0 55
      src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

+ 57 - 2
demo/index.js

@@ -1,4 +1,6 @@
-import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMusicDisplay';
+import { OpenSheetMusicDisplay, BackendType } from '../src/OpenSheetMusicDisplay';
+import * as jsPDF  from '../node_modules/jspdf-yworks/dist/jspdf.min'
+import * as svg2pdf from '../node_modules/svg2pdf.js/dist/svg2pdf.min';
 
 /*jslint browser:true */
 (function () {
@@ -354,7 +356,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         for (const printPdfBtn of printPdfBtns) {
             if (printPdfBtn) {
                 printPdfBtn.onclick = function () {
-                    openSheetMusicDisplay.createPdf();
+                    createPdf();
                 }
             }
         }
@@ -769,6 +771,59 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         }
     }
 
+    /**
+     * Creates a Pdf of the currently rendered MusicXML
+     * @param pdfName if no name is given, the composer and title of the piece will be used
+     */
+    function createPdf(pdfName) {
+        if (openSheetMusicDisplay.backendType !== BackendType.SVG) {
+            console.log("[OSMD] createPdf(): Warning: createPDF is only supported for SVG background for now, not for Canvas." +
+                " Please use osmd.setOptions({backendType: SVG}).");
+            return;
+        }
+
+        if (pdfName === undefined) {
+            pdfName = openSheetMusicDisplay.sheet.FullNameString + ".pdf";
+        }
+
+        const backends = openSheetMusicDisplay.drawer.Backends;
+        let svgElement = backends[0].getSvgElement();
+
+        let pageWidth = 210;
+        let pageHeight = 297;
+        const engravingRulesPageFormat = openSheetMusicDisplay.rules.PageFormat;
+        if (engravingRulesPageFormat && !engravingRulesPageFormat.IsUndefined) {
+            pageWidth = engravingRulesPageFormat.width;
+            pageHeight = engravingRulesPageFormat.height;
+        } else {
+            pageHeight = pageWidth * svgElement.clientHeight / svgElement.clientWidth;
+        }
+
+        const orientation = pageHeight > pageWidth ? "p" : "l";
+        // create a new jsPDF instance
+        const pdf = new jsPDF(orientation, "mm", [pageWidth, pageHeight]);
+        const scale = pageWidth / svgElement.clientWidth;
+        for (let idx = 0, len = backends.length; idx < len; ++idx) {
+            if (idx > 0) {
+                pdf.addPage();
+            }
+            svgElement = backends[idx].getSvgElement();
+
+            // render the svg element
+            svg2pdf(svgElement, pdf, {
+                scale: scale,
+                xOffset: 0,
+                yOffset: 0
+            });
+        }
+
+        // simply save the created pdf
+        pdf.save(pdfName);
+
+        // note that using jspdf with svg2pdf creates unnecessary console warnings "AcroForm-Classes are not populated into global-namespace..."
+        // this will hopefully be fixed with a new jspdf release, see https://github.com/yWorks/jsPDF/pull/32
+    }
+
     // Register events: load, drag&drop
     window.addEventListener("load", function () {
         init();

+ 2 - 2
package.json

@@ -61,10 +61,8 @@
   "homepage": "http://opensheetmusicdisplay.org",
   "dependencies": {
     "@types/vexflow": "^1.2.33",
-    "jspdf-yworks": "^2.1.1",
     "jszip": "3.4.0",
     "loglevel": "^1.6.8",
-    "svg2pdf.js": "^1.5.0",
     "typescript-collections": "^1.3.3",
     "vexflow": "1.2.93"
   },
@@ -87,6 +85,7 @@
     "html-webpack-plugin": "^4.3.0",
     "jquery": "^3.4.1",
     "jsdom": "^16.2.2",
+    "jspdf-yworks": "^2.1.1",
     "karma": "^5.0.8",
     "karma-base64-to-js-preprocessor": "^0.0.1",
     "karma-chai": "^0.1.0",
@@ -102,6 +101,7 @@
     "ts-loader": "^4.1.0",
     "tslint": "^5.14.0",
     "tslint-loader": "^3.5.4",
+    "svg2pdf.js": "^1.5.0",
     "typedoc": "^0.17.3",
     "typescript": "^3.7.4",
     "webpack": "^4.43.0",

+ 0 - 55
src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -19,8 +19,6 @@ import { AbstractExpression } from "../MusicalScore/VoiceData/Expressions/Abstra
 import { Dictionary } from "typescript-collections";
 import { NoteEnum } from "..";
 import { AutoColorSet, GraphicalMusicPage } from "../MusicalScore";
-import jspdf = require("jspdf-yworks/dist/jspdf.min");
-import svg2pdf = require("svg2pdf.js/dist/svg2pdf.min");
 import { MusicPartManagerIterator } from "../MusicalScore/MusicParts";
 import { ITransposeCalculator } from "../MusicalScore/Interfaces";
 /**
@@ -783,59 +781,6 @@ export class OpenSheetMusicDisplay {
         }
     }
 
-    /**
-     * Creates a Pdf of the currently rendered MusicXML
-     * @param pdfName if no name is given, the composer and title of the piece will be used
-     */
-    public createPdf(pdfName: string = undefined): void {
-        if (this.backendType !== BackendType.SVG) {
-            console.log("[OSMD] osmd.createPdf(): Warning: createPDF is only supported for SVG background for now, not for Canvas." +
-                " Please use osmd.setOptions({backendType: SVG}).");
-            return;
-        }
-
-        if (pdfName === undefined) {
-            pdfName = this.sheet.FullNameString + ".pdf";
-        }
-
-        const backends: VexFlowBackend[] = this.drawer.Backends;
-        let svgElement: SVGElement = (<SvgVexFlowBackend>backends[0]).getSvgElement();
-
-        let pageWidth: number = 210;
-        let pageHeight: number = 297;
-        const engravingRulesPageFormat: PageFormat = this.rules.PageFormat;
-        if (engravingRulesPageFormat && !engravingRulesPageFormat.IsUndefined) {
-            pageWidth = engravingRulesPageFormat.width;
-            pageHeight = engravingRulesPageFormat.height;
-        } else {
-            pageHeight = pageWidth * svgElement.clientHeight / svgElement.clientWidth;
-        }
-
-        const orientation: string = pageHeight > pageWidth ? "p" : "l";
-        // create a new jsPDF instance
-        const pdf: any = new jspdf(orientation, "mm", [pageWidth, pageHeight]);
-        const scale: number = pageWidth / svgElement.clientWidth;
-        for (let idx: number = 0, len: number = backends.length; idx < len; ++idx) {
-            if (idx > 0) {
-                pdf.addPage();
-            }
-            svgElement = (<SvgVexFlowBackend>backends[idx]).getSvgElement();
-
-            // render the svg element
-            svg2pdf(svgElement, pdf, {
-                scale: scale,
-                xOffset: 0,
-                yOffset: 0
-            });
-        }
-
-        // simply save the created pdf
-        pdf.save(pdfName);
-
-        // note that using jspdf with svg2pdf creates unnecessary console warnings "AcroForm-Classes are not populated into global-namespace..."
-        // this will hopefully be fixed with a new jspdf release, see https://github.com/yWorks/jsPDF/pull/32
-    }
-
     //#region GETTER / SETTER
     public set DrawSkyLine(value: boolean) {
         this.drawSkyLine = value;