diff --git a/README.md b/README.md index 49b869a..ed31137 100644 --- a/README.md +++ b/README.md @@ -116,6 +116,24 @@ Re-draws the svg. ## API Methods +### `add(str)` + +- `@param {String} str` The string to add. + +```js +// TODO: how to use tk +``` + +### `setAttributes(attributes)` + +Update the global attributes for the svg. + +- `@param {Object} attributes` An object of attributes. + +### `markup()` + +- `@return {String}` The html markup for the svg. + ### `group(draw, opts)` - `@param {Function} draw` The draw function. Called with the arguments tk. @@ -158,11 +176,12 @@ tk The following are not chainable. -### `save(fileName)` +### `save(fileName, isPng)` Save the svg as a png. - `@param {String} fileName` The name of the file name. +- `@param {Boolean} fileName` Save the file as a `.svg` or `.png`. ### `map(number, inMin, inMax, outMin, outMax)` @@ -181,11 +200,11 @@ Get a random number between two numbers. - `@param {Number} min` The min of the range. - `@param {Number} max` The max of the range. -### `spline(points = [], tension = 1, close = false, callback) {)` +### `spline(points, tension, close, callback) {)` -- `@param {Array [Object]} points` Series of points with an x and y value. -- `@param {Number} tension` tk. -- `@param {Boolean} close` tk. +- `@param {Array [Object]} points` Series of points with an x and y value. Defaults to `[]`. +- `@param {Number} tension` tk. Defaults to `1`. +- `@param {Boolean} close` tk. Defaults to `false` - `@param {Func} callback` tk. ```js diff --git a/index.js b/index.js index c106fa8..a5789b3 100644 --- a/index.js +++ b/index.js @@ -23,11 +23,13 @@ export default class Graphic { 'grid', 'line', 'map', + 'markup', 'polyline', 'rect', 'redraw', 'remove', 'save', + 'setAttributes', 'spline', 'square', 'times', @@ -50,20 +52,9 @@ export default class Graphic { draw() { const container = document.querySelector(this.container); - const getMarkup = (contents) => { - return ` - - ${contents.join('\n')} - - `; - }; if (container) { - container.innerHTML = getMarkup(this.contents); + container.innerHTML = this.markup(this, className); } else { console.log('WARN: no container'); } @@ -175,6 +166,12 @@ export default class Graphic { * Loop Functions */ + setAttributes(attributes = {}) { + this.attributes = {...this.attributes, ...attributes}; + + return this; + } + times(number, draw) { for (let x = 0; x < number; x++) { draw(this, x); @@ -211,8 +208,46 @@ export default class Graphic { * Helper Functions */ - save(fileName) { + markup() { + return ` + + ${this.contents.join('\n')} + + `; + } + + save(fileName, isPng) { const svg = document.querySelector(`${this.container} .${className}`); + const svgText = `data:image/svg+xml;utf8,${encodeURIComponent( + svg.outerHTML + )}`; + + if (isPng) { + this.savePNG(fileName, svgText); + } else { + this.saveSVG(fileName, svgText); + } + } + + saveSVG(fileName, svgText) { + const link = document.createElement('a'); + + link.setAttribute('href', svgText); + link.setAttribute('download', fileName); + + link.style.display = 'none'; + document.body.appendChild(link); + + link.click(); + + document.body.removeChild(link); + } + + savePNG(fileName, svgText) { const img = new Image(); img.onload = function () { @@ -238,7 +273,7 @@ export default class Graphic { // const image64 = b64start + svg64; // img.src = image64; - img.src = `data:image/svg+xml;utf8,${encodeURIComponent(svg.outerHTML)}`; + img.src = svgText; } /**