vexflow

<!DOCTYPE html> <html> <head> <title>svgcontext.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" /> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div class="container"> <div class="page"> <div class="header"> <h1>svgcontext.js</h1> <div class="toc"> <h3>Table of Contents</h3> <ol> <li> <a class="source" href="accidental.html"> accidental.js </a> </li> <li> <a class="source" href="annotation.html"> annotation.js </a> </li> <li> <a class="source" href="articulation.html"> articulation.js </a> </li> <li> <a class="source" href="barnote.html"> barnote.js </a> </li> <li> <a class="source" href="beam.html"> beam.js </a> </li> <li> <a class="source" href="bend.html"> bend.js </a> </li> <li> <a class="source" href="boundingbox.html"> boundingbox.js </a> </li> <li> <a class="source" href="boundingboxcomputation.html"> boundingboxcomputation.js </a> </li> <li> <a class="source" href="canvascontext.html"> canvascontext.js </a> </li> <li> <a class="source" href="clef.html"> clef.js </a> </li> <li> <a class="source" href="clefnote.html"> clefnote.js </a> </li> <li> <a class="source" href="crescendo.html"> crescendo.js </a> </li> <li> <a class="source" href="curve.html"> curve.js </a> </li> <li> <a class="source" href="dot.html"> dot.js </a> </li> <li> <a class="source" href="easyscore.html"> easyscore.js </a> </li> <li> <a class="source" href="element.html"> element.js </a> </li> <li> <a class="source" href="factory.html"> factory.js </a> </li> <li> <a class="source" href="formatter.html"> formatter.js </a> </li> <li> <a class="source" href="fraction.html"> fraction.js </a> </li> <li> <a class="source" href="frethandfinger.html"> frethandfinger.js </a> </li> <li> <a class="source" href="ghostnote.html"> ghostnote.js </a> </li> <li> <a class="source" href="glyph.html"> glyph.js </a> </li> <li> <a class="source" href="glyphnote.html"> glyphnote.js </a> </li> <li> <a class="source" href="gracenote.html"> gracenote.js </a> </li> <li> <a class="source" href="gracenotegroup.html"> gracenotegroup.js </a> </li> <li> <a class="source" href="gracetabnote.html"> gracetabnote.js </a> </li> <li> <a class="source" href="index.html"> index.js </a> </li> <li> <a class="source" href="keymanager.html"> keymanager.js </a> </li> <li> <a class="source" href="keysignature.html"> keysignature.js </a> </li> <li> <a class="source" href="keysignote.html"> keysignote.js </a> </li> <li> <a class="source" href="modifier.html"> modifier.js </a> </li> <li> <a class="source" href="modifiercontext.html"> modifiercontext.js </a> </li> <li> <a class="source" href="multimeasurerest.html"> multimeasurerest.js </a> </li> <li> <a class="source" href="music.html"> music.js </a> </li> <li> <a class="source" href="note.html"> note.js </a> </li> <li> <a class="source" href="notehead.html"> notehead.js </a> </li> <li> <a class="source" href="notesubgroup.html"> notesubgroup.js </a> </li> <li> <a class="source" href="ornament.html"> ornament.js </a> </li> <li> <a class="source" href="parser.html"> parser.js </a> </li> <li> <a class="source" href="pedalmarking.html"> pedalmarking.js </a> </li> <li> <a class="source" href="raphaelcontext.html"> raphaelcontext.js </a> </li> <li> <a class="source" href="registry.html"> registry.js </a> </li> <li> <a class="source" href="renderer.html"> renderer.js </a> </li> <li> <a class="source" href="repeatnote.html"> repeatnote.js </a> </li> <li> <a class="source" href="smufl.html"> smufl.js </a> </li> <li> <a class="source" href="stave.html"> stave.js </a> </li> <li> <a class="source" href="stavebarline.html"> stavebarline.js </a> </li> <li> <a class="source" href="staveconnector.html"> staveconnector.js </a> </li> <li> <a class="source" href="stavehairpin.html"> stavehairpin.js </a> </li> <li> <a class="source" href="staveline.html"> staveline.js </a> </li> <li> <a class="source" href="stavemodifier.html"> stavemodifier.js </a> </li> <li> <a class="source" href="stavenote.html"> stavenote.js </a> </li> <li> <a class="source" href="staverepetition.html"> staverepetition.js </a> </li> <li> <a class="source" href="stavesection.html"> stavesection.js </a> </li> <li> <a class="source" href="stavetempo.html"> stavetempo.js </a> </li> <li> <a class="source" href="stavetext.html"> stavetext.js </a> </li> <li> <a class="source" href="stavetie.html"> stavetie.js </a> </li> <li> <a class="source" href="stavevolta.html"> stavevolta.js </a> </li> <li> <a class="source" href="stem.html"> stem.js </a> </li> <li> <a class="source" href="stemmablenote.html"> stemmablenote.js </a> </li> <li> <a class="source" href="stringnumber.html"> stringnumber.js </a> </li> <li> <a class="source" href="strokes.html"> strokes.js </a> </li> <li> <a class="source" href="svgcontext.html"> svgcontext.js </a> </li> <li> <a class="source" href="system.html"> system.js </a> </li> <li> <a class="source" href="tables.html"> tables.js </a> </li> <li> <a class="source" href="tabnote.html"> tabnote.js </a> </li> <li> <a class="source" href="tabslide.html"> tabslide.js </a> </li> <li> <a class="source" href="tabstave.html"> tabstave.js </a> </li> <li> <a class="source" href="tabtie.html"> tabtie.js </a> </li> <li> <a class="source" href="textbracket.html"> textbracket.js </a> </li> <li> <a class="source" href="textdynamics.html"> textdynamics.js </a> </li> <li> <a class="source" href="textnote.html"> textnote.js </a> </li> <li> <a class="source" href="tickable.html"> tickable.js </a> </li> <li> <a class="source" href="tickcontext.html"> tickcontext.js </a> </li> <li> <a class="source" href="timesignature.html"> timesignature.js </a> </li> <li> <a class="source" href="timesignote.html"> timesignote.js </a> </li> <li> <a class="source" href="tremolo.html"> tremolo.js </a> </li> <li> <a class="source" href="tuning.html"> tuning.js </a> </li> <li> <a class="source" href="tuplet.html"> tuplet.js </a> </li> <li> <a class="source" href="vex.html"> vex.js </a> </li> <li> <a class="source" href="vibrato.html"> vibrato.js </a> </li> <li> <a class="source" href="vibratobracket.html"> vibratobracket.js </a> </li> <li> <a class="source" href="voice.html"> voice.js </a> </li> <li> <a class="source" href="voicegroup.html"> voicegroup.js </a> </li> </ol> </div> </div> <a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010. @author Gregory Ristow (2015) <div class='highlight'><pre> import { Vex } from './vex'; const attrNamesToIgnoreMap = { path: { x: true, y: true, width: true, height: true, }, rect: { }, text: { width: true, height: true, }, }; { const fontAttrNamesToIgnore = { 'font-family': true, 'font-weight': true, 'font-style': true, 'font-size': true, }; Vex.Merge(attrNamesToIgnoreMap.rect, fontAttrNamesToIgnore); Vex.Merge(attrNamesToIgnoreMap.path, fontAttrNamesToIgnore); } export class SVGContext { constructor(element) {</pre></div> element is the parent DOM object <div class='highlight'><pre> this.element = element;</pre></div> Create the SVG in the SVG namespace: <div class='highlight'><pre> this.svgNS = 'http://www.w3.org/2000/svg'; const svg = this.create('svg');</pre></div> Add it to the canvas: <div class='highlight'><pre> this.element.appendChild(svg);</pre></div> Point to it: <div class='highlight'><pre> this.svg = svg; this.groups = [this.svg]; // Create the group stack this.parent = this.svg; this.path = ''; this.pen = { x: NaN, y: NaN }; this.lineWidth = 1.0; this.state = { scale: { x: 1, y: 1 }, 'font-family': 'Arial', 'font-size': '8pt', 'font-weight': 'normal', }; this.attributes = { 'stroke-width': 0.3, 'fill': 'black', 'stroke': 'black', 'stroke-dasharray': 'none', 'font-family': 'Arial', 'font-size': '10pt', 'font-weight': 'normal', 'font-style': 'normal', }; this.background_attributes = { 'stroke-width': 0, 'fill': 'white', 'stroke': 'white', 'stroke-dasharray': 'none', 'font-family': 'Arial', 'font-size': '10pt', 'font-weight': 'normal', 'font-style': 'normal', }; this.shadow_attributes = { width: 0, color: 'black', }; this.state_stack = [];</pre></div> Test for Internet Explorer <div class='highlight'><pre> this.iePolyfill(); } create(svgElementType) { return document.createElementNS(this.svgNS, svgElementType); }</pre></div> Allow grouping elements in containers for interactivity. <div class='highlight'><pre> openGroup(cls, id, attrs) { const group = this.create('g'); this.groups.push(group); this.parent.appendChild(group); this.parent = group; if (cls) group.setAttribute('class', Vex.Prefix(cls)); if (id) group.setAttribute('id', Vex.Prefix(id)); if (attrs && attrs.pointerBBox) { group.setAttribute('pointer-events', 'bounding-box'); } return group; } closeGroup() { this.groups.pop(); this.parent = this.groups[this.groups.length - 1]; } add(elem) { this.parent.appendChild(elem); }</pre></div> Tests if the browser is Internet Explorer; if it is, we do some tricks to improve text layout. See the note at ieMeasureTextFix() for details. <div class='highlight'><pre> iePolyfill() { if (typeof (navigator) !== 'undefined') { this.ie = ( /MSIE 9/i.test(navigator.userAgent) || /MSIE 10/i.test(navigator.userAgent) || /rv:11\.0/i.test(navigator.userAgent) || /Trident/i.test(navigator.userAgent) ); } }</pre></div> <h3 id="styling--state-methods">Styling & State Methods:</h3> <div class='highlight'><pre> setFont(family, size, weight) {</pre></div> Unlike canvas, in SVG italic is handled by font-style, not weight. So: we search the weight argument and apply bold and italic to weight and style respectively. <div class='highlight'><pre> let bold = false; let italic = false; let style = 'normal';</pre></div> Weight might also be a number (200, 400, etc…) so we test its type to be sure we have access to String methods. <div class='highlight'><pre> if (typeof weight === 'string') {</pre></div> look for “italic” in the weight: <div class='highlight'><pre> if (weight.indexOf('italic') !== -1) { weight = weight.replace(/italic/g, ''); italic = true; }</pre></div> look for “bold” in weight <div class='highlight'><pre> if (weight.indexOf('bold') !== -1) { weight = weight.replace(/bold/g, ''); bold = true; }</pre></div> remove any remaining spaces <div class='highlight'><pre> weight = weight.replace(/ /g, ''); } weight = bold ? 'bold' : weight; weight = (typeof weight === 'undefined' || weight === '') ? 'normal' : weight; style = italic ? 'italic' : style; const fontAttributes = { 'font-family': family, 'font-size': size + 'pt', 'font-weight': weight, 'font-style': style, };</pre></div> Store the font size so that if the browser is Internet Explorer we can fix its calculations of text width. <div class='highlight'><pre> this.fontSize = Number(size); Vex.Merge(this.attributes, fontAttributes); Vex.Merge(this.state, fontAttributes); return this; } setRawFont(font) { font = font.trim();</pre></div> Assumes size first, splits on space – which is presently how all existing modules are calling this. <div class='highlight'><pre> const fontArray = font.split(' '); this.attributes['font-family'] = fontArray[1]; this.state['font-family'] = fontArray[1]; this.attributes['font-size'] = fontArray[0]; this.state['font-size'] = fontArray[0];</pre></div> Saves fontSize for IE polyfill <div class='highlight'><pre> this.fontSize = Number(fontArray[0].match(/\d+/)); return this; } setFillStyle(style) { this.attributes.fill = style; return this; } setBackgroundFillStyle(style) { this.background_attributes.fill = style; this.background_attributes.stroke = style; return this; } setStrokeStyle(style) { this.attributes.stroke = style; return this; } setShadowColor(style) { this.shadow_attributes.color = style; return this; } setShadowBlur(blur) { this.shadow_attributes.width = blur; return this; } setLineWidth(width) { this.attributes['stroke-width'] = width; this.lineWidth = width; }</pre></div> @param array {lineDash} as [dashInt, spaceInt, dashInt, spaceInt, etc…] <div class='highlight'><pre> setLineDash(lineDash) { if (Object.prototype.toString.call(lineDash) === '[object Array]') { lineDash = lineDash.join(', '); this.attributes['stroke-dasharray'] = lineDash; return this; } else { throw new Vex.RERR('ArgumentError', 'lineDash must be an array of integers.'); } } setLineCap(lineCap) { this.attributes['stroke-linecap'] = lineCap; return this; }</pre></div> <h3 id="sizing--scaling-methods">Sizing & Scaling Methods:</h3> TODO (GCR): See note at scale() – seperate our internal conception of pixel-based width/height from the style.width and style.height properties eventually to allow users to apply responsive sizing attributes to the SVG. <div class='highlight'><pre> resize(width, height) { this.width = width; this.height = height; this.element.style.width = width; this.svg.style.width = width; this.svg.style.height = height; const attributes = { width, height, }; this.applyAttributes(this.svg, attributes); this.scale(this.state.scale.x, this.state.scale.y); return this; } scale(x, y) {</pre></div> uses viewBox to scale TODO (GCR): we may at some point want to distinguish the style.width / style.height properties that are applied to the SVG object from our internal conception of the SVG width/height. This would allow us to create automatically scaling SVG’s that filled their containers, for instance. As this isn’t implemented in Canvas or Raphael contexts, I’ve left as is for now, but in using the viewBox to handle internal scaling, am trying to make it possible for us to eventually move in that direction. <div class='highlight'><pre> this.state.scale = { x, y }; const visibleWidth = this.width / x; const visibleHeight = this.height / y; this.setViewBox(0, 0, visibleWidth, visibleHeight); return this; } setViewBox(...args) {</pre></div> Override for “x y w h” style: <div class='highlight'><pre> if (args.length === 1) { const [viewBox] = args; this.svg.setAttribute('viewBox', viewBox); } else { const [xMin, yMin, width, height] = args; const viewBoxString = xMin + ' ' + yMin + ' ' + width + ' ' + height; this.svg.setAttribute('viewBox', viewBoxString); } }</pre></div> <h3 id="drawing-helper-methods">Drawing helper methods:</h3> <div class='highlight'><pre> applyAttributes(element, attributes) { const attrNamesToIgnore = attrNamesToIgnoreMap[element.nodeName]; Object .keys(attributes) .forEach(propertyName => { if (attrNamesToIgnore && attrNamesToIgnore[propertyName]) { return; } element.setAttributeNS(null, propertyName, attributes[propertyName]); }); return element; }</pre></div> <h3 id="shape--path-methods">Shape & Path Methods:</h3> <div class='highlight'><pre> clear() {</pre></div> Clear the SVG by removing all inner children. (This approach is usually slightly more efficient than removing the old SVG & adding a new one to the container element, since it does not cause the container to resize twice. Also, the resize triggered by removing the entire SVG can trigger a touchcancel event when the element resizes away from a touch point.) <div class='highlight'><pre> while (this.svg.lastChild) { this.svg.removeChild(this.svg.lastChild); }</pre></div> Replace the viewbox attribute we just removed: <div class='highlight'><pre> this.scale(this.state.scale.x, this.state.scale.y); }</pre></div> <h2 id="rectangles">Rectangles:</h2> <div class='highlight'><pre> rect(x, y, width, height, attributes) {</pre></div> Avoid invalid negative height attribs by flipping the rectangle on its head: <div class='highlight'><pre> if (height < 0) { y += height; height *= -1; }</pre></div> Create the rect & style it: <div class='highlight'><pre> const rectangle = this.create('rect'); if (typeof attributes === 'undefined') { attributes = { fill: 'none', 'stroke-width': this.lineWidth, stroke: 'black', }; } Vex.Merge(attributes, { x, y, width, height, }); this.applyAttributes(rectangle, attributes); this.add(rectangle); return this; } fillRect(x, y, width, height) { if (height < 0) { y += height; height *= -1; } this.rect(x, y, width, height, this.attributes); return this; } clearRect(x, y, width, height) {</pre></div> TODO(GCR): Improve implementation of this… Currently it draws a box of the background color, rather than creating alpha through lower z-levels. See the implementation of this in SVGKit: <a href="http://sourceforge.net/projects/svgkit/">http://sourceforge.net/projects/svgkit/</a> as a starting point. Adding a large number of transform paths (as we would have to do) could be a real performance hit. Since tabNote seems to be the only module that makes use of this it may be worth creating a seperate tabStave that would draw lines around locations of tablature fingering. <div class='highlight'><pre> this.rect(x, y, width, height, this.background_attributes); return this; }</pre></div> <h2 id="paths">Paths:</h2> <div class='highlight'><pre> beginPath() { this.path = ''; this.pen.x = NaN; this.pen.y = NaN; return this; } moveTo(x, y) { this.path += 'M' + x + ' ' + y; this.pen.x = x; this.pen.y = y; return this; } lineTo(x, y) { this.path += 'L' + x + ' ' + y; this.pen.x = x; this.pen.y = y; return this; } bezierCurveTo(x1, y1, x2, y2, x, y) { this.path += 'C' + x1 + ' ' + y1 + ',' + x2 + ' ' + y2 + ',' + x + ' ' + y; this.pen.x = x; this.pen.y = y; return this; } quadraticCurveTo(x1, y1, x, y) { this.path += 'Q' + x1 + ' ' + y1 + ',' + x + ' ' + y; this.pen.x = x; this.pen.y = y; return this; }</pre></div> This is an attempt (hack) to simulate the HTML5 canvas arc method. <div class='highlight'><pre> arc(x, y, radius, startAngle, endAngle, antiClockwise) { function normalizeAngle(angle) { while (angle < 0) { angle += Math.PI * 2; } while (angle > Math.PI * 2) { angle -= Math.PI * 2; } return angle; } startAngle = normalizeAngle(startAngle); endAngle = normalizeAngle(endAngle); if (startAngle > endAngle) { const tmp = startAngle; startAngle = endAngle; endAngle = tmp; antiClockwise = !antiClockwise; } const delta = endAngle - startAngle; if (delta > Math.PI) { this.arcHelper(x, y, radius, startAngle, startAngle + delta / 2, antiClockwise); this.arcHelper(x, y, radius, startAngle + delta / 2, endAngle, antiClockwise); } else { this.arcHelper(x, y, radius, startAngle, endAngle, antiClockwise); } return this; } arcHelper(x, y, radius, startAngle, endAngle, antiClockwise) { const x1 = x + radius * Math.cos(startAngle); const y1 = y + radius * Math.sin(startAngle); const x2 = x + radius * Math.cos(endAngle); const y2 = y + radius * Math.sin(endAngle); let largeArcFlag = 0; let sweepFlag = 0; if (antiClockwise) { sweepFlag = 1; if (endAngle - startAngle < Math.PI) { largeArcFlag = 1; } } else if (endAngle - startAngle > Math.PI) { largeArcFlag = 1; } this.path += 'M' + x1 + ' ' + y1 + ' A' + radius + ' ' + radius + ' 0 ' + largeArcFlag + ' ' + sweepFlag + ' ' + x2 + ' ' + y2; if (!isNaN(this.pen.x) && !isNaN(this.pen.y)) { this.peth += 'M' + this.pen.x + ' ' + this.pen.y; } } closePath() { this.path += 'Z'; return this; }</pre></div> Adapted from the source for Raphael’s Element.glow <div class='highlight'><pre> glow() {</pre></div> Calculate the width & paths of the glow: <div class='highlight'><pre> if (this.shadow_attributes.width > 0) { const sa = this.shadow_attributes; const num_paths = sa.width / 2;</pre></div> Stroke at varying widths to create effect of gaussian blur: <div class='highlight'><pre> for (let i = 1; i <= num_paths; i++) { const attributes = { stroke: sa.color, 'stroke-linejoin': 'round', 'stroke-linecap': 'round', 'stroke-width': +((sa.width * 0.4) / num_paths * i).toFixed(3), opacity: +((sa.opacity || 0.3) / num_paths).toFixed(3), }; const path = this.create('path'); attributes.d = this.path; this.applyAttributes(path, attributes); this.add(path); } } return this; } fill(attributes) {</pre></div> If our current path is set to glow, make it glow <div class='highlight'><pre> this.glow(); const path = this.create('path'); if (typeof attributes === 'undefined') { attributes = {}; Vex.Merge(attributes, this.attributes); attributes.stroke = 'none'; } attributes.d = this.path; this.applyAttributes(