forked from 0xfe/vexflow
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement TextSVGContext, now VexFlow can run without web browser
TextSVGContext uses opentype.js lib to replace getBBox which parses font file and draws text to svg path, And get bounding box using svg-path-bounding-box. As a final step, it generates svg text using react. Now generating svg files runs on node.js directly, SlimerJS dependency removed
- Loading branch information
Showing
8 changed files
with
185 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| // Vex Flow | ||
| // | ||
| // @copyright Mohit Muthanna 2016 | ||
| // @author Taehoon Moon 2016 | ||
|
|
||
| /** @constructor */ | ||
| Vex.Flow.TextSVGContext = (function() { | ||
| function TextSVGContext(options) { | ||
| if (arguments.length > 0) this.init(options); | ||
| } | ||
|
|
||
| Vex.Inherit(TextSVGContext, Vex.Flow.SVGContext, { | ||
| init: function(options) { | ||
| this.React = options.React; | ||
| this.ReactDOMServer = options.ReactDOMServer; | ||
| this.fontObj = options.font; | ||
| this.getBoundingBox = options.getBoundingBox; | ||
|
|
||
| TextSVGContext.superclass.init.call(this, this.create('div')); | ||
| }, | ||
|
|
||
| create: function(svgElementType) { | ||
| var props = { | ||
| style: {} | ||
| }; | ||
|
|
||
| // Add xmlns to root | ||
| if (svgElementType === 'svg') props['data-xmlns'] = this.svgNS; | ||
|
|
||
| return { | ||
| svgElementType: svgElementType, | ||
| props: props, | ||
| children: [], | ||
| setAttribute: function(propertyName, value) { | ||
| if (propertyName === 'class') propertyName = 'className'; | ||
|
|
||
| this.props[propertyName] = value; | ||
| }, | ||
|
|
||
| get style() { | ||
| return props.style; | ||
| }, | ||
| }; | ||
| }, | ||
|
|
||
| applyAttributes: function(element, attributes) { | ||
| for(var propertyName in attributes) { | ||
| var _propertyName = propertyName.replace( | ||
| /-([a-z])/g, | ||
| function (g) { return g[1].toUpperCase(); } | ||
| ); | ||
|
|
||
| element.props[_propertyName] = attributes[propertyName]; | ||
| } | ||
|
|
||
| return element; | ||
| }, | ||
|
|
||
| fillText: function(text, x, y) { | ||
| var attributes = {}; | ||
| Vex.Merge(attributes, this.attributes); | ||
|
|
||
| var path = this.create('path'); | ||
| var fontSize = this.getFontSize(); | ||
| var pathData = this.fontObj.getPath(text, x, y, fontSize).toPathData(); | ||
|
|
||
| attributes.d = pathData; | ||
| attributes.stroke = "none"; | ||
| attributes.x = x; | ||
| attributes.y = y; | ||
|
|
||
| this.applyAttributes(path, attributes); | ||
| this.add(path); | ||
| }, | ||
|
|
||
| add: function(element) { | ||
| this.parent.children.push(element); | ||
| }, | ||
|
|
||
| getFontSize: function() { | ||
| var fontSize = Number(this.attributes['font-size'].replace(/[^.\d]+/g, '')); | ||
|
|
||
| // Convert pt to px | ||
| if (/pt$/.test(this.attributes['font-size'])) { | ||
| fontSize = (fontSize * 4 / 3) | 0; | ||
| } | ||
|
|
||
| return fontSize; | ||
| }, | ||
|
|
||
| measureText: function(text) { | ||
| var fontSize = this.getFontSize(); | ||
| var pathData = this.fontObj.getPath(text, 0, 0, fontSize).toPathData(); | ||
|
|
||
| return this.getBoundingBox(pathData); | ||
| }, | ||
|
|
||
| createReactElement: function(element) { | ||
| var children = []; | ||
|
|
||
| for (var i = 0; i < element.children.length; i++) { | ||
| children.push(this.createReactElement(element.children[i])); | ||
| } | ||
|
|
||
| return this.React.createElement( | ||
| element.svgElementType, element.props, children | ||
| ); | ||
| }, | ||
|
|
||
| toSVG: function() { | ||
| var reactElement = this.createReactElement(this.svg); | ||
| var svgData = this.ReactDOMServer.renderToStaticMarkup(reactElement); | ||
|
|
||
| // React v0.15 does not support xmlns attribute, so used like this | ||
| return svgData.replace('data-xmlns', 'xmlns'); | ||
| }, | ||
|
|
||
| iePolyfill: function() {} | ||
| }); | ||
|
|
||
| return TextSVGContext; | ||
| }()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters