Merge pull request #1045 from aleen42/master

Fix wrong global definition genereated by Webpack in UMD styles
0xfe · Aug 4, 2021 · 1bcc739 · 1bcc739
2 parents 5d30c80 + eee5ff9
commit 1bcc739
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 12 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -37,7 +37,7 @@ module.exports = (grunt) => {
         library: libraryName,
         libraryTarget: 'umd',
         libraryExport: 'default',
-        globalObject: 'this',
+        globalObject: `typeof window !== 'undefined' ? window : this`,
         publicPath: 'auto',
       },
       resolve: {

diff --git a/demos/README.md b/demos/README.md
@@ -0,0 +1,5 @@
+# Demos
+
+This folder contains examples of ways you can use VexFlow.
+
+To run the demos, first build the VexFlow library by running `npm install` and then `grunt` from the main folder.
diff --git a/demos/node/README.md b/demos/node/README.md
@@ -0,0 +1,7 @@
+# Using VexFlow in Node JS
+
+You can use VexFlow in Node JS by calling `const Vex = require(...)` on the JS library.
+
+`node canvas.js > output.html` creates an HTML page containing the VexFlow output.
+
+`node svg.js > output.svg` creates a SVG image file containing the VexFlow output.
diff --git a/demos/node/canvas.js b/demos/node/canvas.js
@@ -0,0 +1,18 @@
+// node canvas.js > output.html
+
+const { createCanvas } = require('canvas');
+const Vex = require('../../build/vexflow-debug');
+const VF = Vex.Flow;
+
+const canvas = createCanvas(500, 500);
+
+const renderer = new VF.Renderer(canvas, VF.Renderer.Backends.CANVAS);
+const context = renderer.getContext();
+context.setFont('Arial', 10, '').setBackgroundFillStyle('#eed');
+
+const stave = new VF.Stave(10, 40, 400);
+stave.addClef('treble');
+stave.addTimeSignature('4/4');
+stave.setContext(context).draw();
+
+console.log(`<!DOCTYPE html><html><body><img src="${canvas.toDataURL()}"></body></html>`);
diff --git a/demos/node/svg.js b/demos/node/svg.js
@@ -0,0 +1,33 @@
+// node svg.js > output.svg
+
+const Vex = require('../../build/vexflow-debug');
+const { JSDOM } = require('jsdom');
+const fs = require('fs');
+
+const VF = Vex.Flow;
+
+const dom = new JSDOM('<!DOCTYPE html><html><body><div id="vf"></div><body></html>');
+
+global.document = dom.window.document;
+
+// Create an SVG renderer and attach it to the DIV element named "vf".
+const div = document.getElementById('vf');
+const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
+
+// Configure the rendering context.
+renderer.resize(500, 500);
+const context = renderer.getContext();
+context.setFont('Arial', 10, '').setBackgroundFillStyle('#eed');
+
+// Create a stave of width 400 at position 10, 40 on the canvas.
+const stave = new VF.Stave(10, 40, 400);
+
+// Add a clef and time signature.
+stave.addClef('treble').addTimeSignature('4/4');
+
+// Connect it to the rendering context and draw!
+stave.setContext(context).draw();
+
+const svg = div.innerHTML.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
+
+console.log(svg);
diff --git a/src/renderer.ts b/src/renderer.ts
@@ -13,7 +13,7 @@ export type ContextBuilder = typeof Renderer.getSVGContext | typeof Renderer.get
  * Support Canvas & SVG rendering contexts.
  */
 export class Renderer {
-  protected elementId?: string | HTMLElement;
+  protected elementId?: string | HTMLCanvasElement;
   protected element: HTMLCanvasElement;
   protected backend: number;
 
@@ -43,7 +43,7 @@ export class Renderer {
   static lastContext?: RenderContext = undefined;
 
   static buildContext(
-    elementId: string | HTMLElement,
+    elementId: string | HTMLCanvasElement,
     backend: number,
     width: number,
     height: number,
@@ -145,19 +145,20 @@ export class Renderer {
     context.stroke();
   }
 
-  constructor(elementId: string | HTMLElement, backend: number) {
-    this.elementId = elementId;
-    if (this.elementId === undefined) {
+  constructor(elementId: string | HTMLCanvasElement, backend: number) {
+    if (!elementId) {
       throw new RuntimeError('BadArgument', 'Invalid id for renderer.');
     }
 
-    this.element = document.getElementById(elementId as string) as HTMLCanvasElement;
-    if (!this.element) this.element = elementId as HTMLCanvasElement;
+    this.element =
+      typeof elementId === 'string' && typeof document !== 'undefined'
+        ? (document.getElementById(elementId as string) as HTMLCanvasElement)
+        : (elementId as HTMLCanvasElement);
 
     // Verify backend and create context
     this.backend = backend;
     if (this.backend === Renderer.Backends.CANVAS) {
-      if (!this.element.getContext) {
+      if (!this.element?.getContext) {
         throw new RuntimeError('BadElement', `Can't get canvas context from element: ${elementId}`);
       }
       this.ctx = Renderer.bolsterCanvasContext(this.element.getContext('2d'));
@@ -170,9 +171,6 @@ export class Renderer {
 
   resize(width: number, height: number): this {
     if (this.backend === Renderer.Backends.CANVAS) {
-      if (!this.element.getContext) {
-        throw new RuntimeError('BadElement', `Can't get canvas context from element: ${this.elementId}`);
-      }
       [width, height] = CanvasContext.SanitizeCanvasDims(width, height);
 
       const devicePixelRatio = window.devicePixelRatio || 1;