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 `
-
- `;
- };
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 `
+
+ `;
+ }
+
+ 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;
}
/**